feat(ui): finalize shared shells and loading states

web/src/components/audit/DigitalEmployeeListPanel.vue

@@ -6,13 +6,21 @@
     :error="errorMessage"
     :empty="!visibleEmployees.length"
     :empty-state="emptyState"
+    :show-pagination="!loading && !errorMessage && visibleEmployees.length > 0"
+    :current-page="currentPage"
+    :page-size="pageSize"
+    :pages="pageNumbers"
+    :show-page-size="false"
+    :summary="paginationSummary"
+    :total="visibleEmployees.length"
+    :total-pages="totalPages"
     loading-title="数字员工资产同步中"
     loading-message="正在加载数字员工资产"
     loading-icon="mdi mdi-view-list-outline"
-    hint="归集后台自动执行的数字员工技能，可查看技能内容、执行计划、启动状态和最近版本。"
+    @update:current-page="currentPage = $event"
   >
     <template #filters>
-      <label class="search-filter">
+      <label class="list-search">
         <i class="mdi mdi-magnify"></i>
         <input
           :value="keyword"
@@ -127,51 +135,21 @@
             @click="emit('open-employee-detail', employee)"
           >
             <td>
-              <div class="skill-name-cell">
-                <span class="skill-avatar" :class="employee.badgeTone">{{ employee.short }}</span>
-                <div>
-                  <strong>{{ employee.name }}</strong>
-                  <span class="skill-list-subtitle">{{ employee.summary || employee.code }}</span>
-                </div>
-              </div>
+              <strong class="doc-id">{{ employee.name }}</strong>
             </td>
-            <td><span class="scope-pill skill-type-pill">{{ employee.skillCategory }}</span></td>
+            <td><span class="doc-kind-tag application">{{ employee.skillCategory }}</span></td>
             <td>{{ employee.owner }}</td>
-            <td><span class="scope-pill">{{ employee.scope }}</span></td>
+            <td><span class="type-tag other">{{ employee.scope }}</span></td>
             <td>{{ employee.executionMode }}</td>
             <td>
-              <span :class="['status-pill', employee.statusTone]">{{ employee.status }}</span>
+              <span :class="['status-tag', employee.statusTone]">{{ employee.status }}</span>
             </td>
-            <td><span :class="['status-pill', employee.enabledTone]">{{ employee.enabledLabel }}</span></td>
+            <td><span :class="['status-tag', employee.enabledTone]">{{ employee.enabledLabel }}</span></td>
             <td>{{ employee.updatedAt || '-' }}</td>
           </tr>
         </tbody>
       </table>
     </template>
-
-    <template #footer>
-      <footer v-if="!loading && !errorMessage && visibleEmployees.length" class="list-foot digital-employee-pagination">
-        <span class="page-summary">共 {{ visibleEmployees.length }} 条，目前第 {{ currentPage }} / {{ totalPages }} 页</span>
-        <div class="pager" aria-label="员工技能分页">
-          <button class="page-nav" type="button" :disabled="currentPage === 1" @click="currentPage--">
-            <i class="mdi mdi-chevron-left"></i>
-          </button>
-          <button
-            v-for="page in pageNumbers"
-            :key="page"
-            class="page-number"
-            :class="{ active: currentPage === page }"
-            type="button"
-            @click="currentPage = page"
-          >
-            {{ page }}
-          </button>
-          <button class="page-nav" type="button" :disabled="currentPage === totalPages" @click="currentPage++">
-            <i class="mdi mdi-chevron-right"></i>
-          </button>
-        </div>
-      </footer>
-    </template>
   </EnterpriseListPage>
 </template>
 
@@ -228,6 +206,9 @@ const pageNumbers = computed(() => {
   const start = Math.max(1, Math.min(currentPage.value - 3, total - 6))
   return Array.from({ length: 7 }, (_, index) => start + index)
 })
+const paginationSummary = computed(() =>
+  `共 ${props.visibleEmployees.length} 条，目前第 ${currentPage.value} / ${totalPages.value} 页`
+)
 const emptyState = {
   eyebrow: '数字员工',
   title: '暂无匹配的数字员工',
@@ -261,7 +242,7 @@ function selectFilter(type, value) {
 }
 </script>
 
-<style scoped src="../../assets/styles/views/audit-view.css"></style>
+<style scoped src="../../assets/styles/views/digital-employees-view.css"></style>
 
 <style scoped>
 .digital-employee-list-panel {
@@ -269,62 +250,8 @@ function selectFilter(type, value) {
   min-height: 0;
   display: flex;
   flex-direction: column;
+  padding: 0;
   overflow: hidden;
 }
 
-.digital-employee-list-panel :deep(.table-wrap) {
-  flex: 1 1 0;
-  min-height: 0;
-}
-
-.digital-employee-list-panel .digital-employee-pagination {
-  flex: 0 0 auto;
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  gap: 16px;
-}
-
-.digital-employee-list-panel .digital-employee-pagination .page-summary {
-  justify-self: start;
-}
-
-.digital-employee-list-panel .pager {
-  display: inline-flex;
-  justify-content: center;
-  gap: 6px;
-  padding: 4px;
-  border: 1px solid #e2e8f0;
-  border-radius: 4px;
-  background: #f8fafc;
-}
-
-.digital-employee-list-panel .pager button {
-  width: 32px;
-  height: 32px;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: #334155;
-  font-size: 14px;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.digital-employee-list-panel .pager button:hover:not(.active):not(:disabled) {
-  background: #fff;
-  color: var(--theme-primary-active);
-  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
-}
-
-.digital-employee-list-panel .pager button.active {
-  background: var(--theme-primary-active);
-  color: #fff;
-  box-shadow: 0 8px 16px var(--theme-primary-shadow);
-}
-
-.digital-employee-list-panel .pager button:disabled {
-  color: #cbd5e1;
-  cursor: not-allowed;
-}
 </style>

web/src/components/audit/DigitalEmployeeWorkRecords.vue

@@ -2,104 +2,114 @@
   <section class="digital-employee-list-panel digital-work-records">
     <Transition name="skill-view" mode="out-in">
       <!-- 列表视图 -->
-      <div v-if="!selectedRunDetail" key="list" class="digital-work-records-list-stage">
-        <div class="list-toolbar">
-          <div class="filter-set">
-            <label class="search-filter">
-              <i class="mdi mdi-magnify"></i>
-              <input
-                v-model="listKeyword"
-                type="search"
-                placeholder="搜索摘要、Run ID..."
-              />
-            </label>
-
-            <AuditPickerFilter
-              id="module"
-              title="选择工作模块"
-              close-label="关闭选择"
-              :active-filter-popover="activeFilterPopover"
-              :label="activeModule === '全部' ? '工作模块' : activeModule"
-              :options="modulePickerOptions"
-              :selected-value="activeModule"
-              @toggle="toggleFilterPopover"
-              @close="closeFilterPopover"
-              @select="selectModule"
+      <EnterpriseListPage
+        v-if="!selectedRunDetail"
+        key="list"
+        variant="digital-employee-list-panel digital-work-records-list-stage"
+        :panel="false"
+        :loading="loading && !runs.length"
+        :error="errorMessage"
+        :empty="!visibleRuns.length"
+        :empty-state="workRecordsEmptyState"
+        :show-pagination="!loading && !errorMessage && visibleRuns.length > 0"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :pages="pageNumbers"
+        :show-page-size="false"
+        :summary="paginationSummary"
+        :total="filteredRuns.length"
+        :total-pages="totalPages"
+        loading-title="工作记录同步中"
+        loading-message="正在读取数字员工近期执行记录"
+        loading-icon="mdi mdi-clipboard-text-clock-outline"
+        error-title="工作记录加载失败"
+        @update:current-page="currentPage = $event"
+      >
+        <template #filters>
+          <label class="list-search">
+            <i class="mdi mdi-magnify"></i>
+            <input
+              v-model="listKeyword"
+              type="search"
+              placeholder="搜索摘要、Run ID..."
             />
+          </label>
 
-            <AuditPickerFilter
-              id="status"
-              title="选择执行状态"
-              close-label="关闭选择"
-              :active-filter-popover="activeFilterPopover"
-              :label="activeStatus === '全部' ? '执行状态' : activeStatus"
-              :options="statusPickerOptions"
-              :selected-value="activeStatus"
-              @toggle="toggleFilterPopover"
-              @close="closeFilterPopover"
-              @select="selectStatus"
-            />
-          </div>
-
-          <div class="toolbar-actions">
-            <button
-              v-if="listKeyword || activeFilterTokens.length"
-              class="ghost-filter-btn"
-              type="button"
-              @click="resetFilters"
-            >
-              <i class="mdi mdi-filter-remove-outline"></i>
-              <span>清空筛选</span>
-            </button>
-            <button
-              class="create-btn digital-refresh-action"
-              type="button"
-              :disabled="loading"
-              @click="loadWorkRecords(true)"
-            >
-              <i class="mdi mdi-refresh"></i>
-              <span>{{ loading ? '刷新中...' : '刷新' }}</span>
-            </button>
-          </div>
-        </div>
-
-        <p class="hint">
-          <i class="mdi mdi-information-outline"></i>
-          查看数字员工近期执行记录、状态和结果摘要。
-        </p>
-
-        <div v-if="activeFilterTokens.length" class="active-filter-strip">
-          <span v-for="token in activeFilterTokens" :key="token" class="active-filter-chip">
-            {{ token }}
-          </span>
-        </div>
-
-        <div class="table-wrap digital-table-wrap" :class="{ 'is-empty': !loading && !errorMessage && !visibleRuns.length }">
-          <div v-if="loading && !runs.length" class="table-state">
-            <TableLoadingState
-              variant="panel"
-              title="工作记录同步中"
-              message="正在读取数字员工近期执行记录"
-              icon="mdi mdi-clipboard-text-clock-outline"
-            />
-          </div>
-
-          <div v-else-if="errorMessage" class="table-state error">
-            <i class="mdi mdi-alert-circle-outline"></i>
-            <p>{{ errorMessage }}</p>
-          </div>
-
-          <TableEmptyState
-            v-else-if="!visibleRuns.length"
-            eyebrow="工作记录"
-            title="暂无匹配的工作记录"
-            description="当前没有符合搜索条件的数字员工工作记录。"
-            icon="mdi mdi-clipboard-text-clock-outline"
-            tone="theme"
-            art-label="RECORDS"
+          <AuditPickerFilter
+            id="module"
+            title="选择工作模块"
+            close-label="关闭选择"
+            :active-filter-popover="activeFilterPopover"
+            :label="activeModule === '全部' ? '工作模块' : activeModule"
+            :options="modulePickerOptions"
+            :selected-value="activeModule"
+            @toggle="toggleFilterPopover"
+            @close="closeFilterPopover"
+            @select="selectModule"
           />
 
-          <table v-else class="digital-employees-table digital-work-records-table">
+          <AuditPickerFilter
+            id="status"
+            title="选择执行状态"
+            close-label="关闭选择"
+            :active-filter-popover="activeFilterPopover"
+            :label="activeStatus === '全部' ? '执行状态' : activeStatus"
+            :options="statusPickerOptions"
+            :selected-value="activeStatus"
+            @toggle="toggleFilterPopover"
+            @close="closeFilterPopover"
+            @select="selectStatus"
+          />
+        </template>
+
+        <template #actions>
+          <button
+            v-if="listKeyword || activeFilterTokens.length"
+            class="ghost-filter-btn"
+            type="button"
+            @click="resetFilters"
+          >
+            <i class="mdi mdi-filter-remove-outline"></i>
+            <span>清空筛选</span>
+          </button>
+          <AuditPickerFilter
+            id="refreshInterval"
+            title="选择刷新时间"
+            close-label="关闭刷新时间选择"
+            :active-filter-popover="activeFilterPopover"
+            :label="`刷新时间 ${refreshIntervalLabel}`"
+            :options="refreshIntervalPickerOptions"
+            :selected-value="refreshInterval"
+            @toggle="toggleFilterPopover"
+            @close="closeFilterPopover"
+            @select="changeRefreshInterval"
+          />
+          <button
+            class="create-btn digital-refresh-action digital-refresh-now"
+            type="button"
+            :disabled="loading"
+            aria-label="立即刷新工作记录"
+            @click="loadWorkRecords(true)"
+          >
+            <i :class="loading ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-refresh'"></i>
+          </button>
+        </template>
+
+        <template #meta>
+          <div v-if="activeFilterTokens.length" class="active-filter-strip">
+            <span v-for="token in activeFilterTokens" :key="token" class="active-filter-chip">
+              {{ token }}
+            </span>
+          </div>
+        </template>
+
+        <template #error>
+          <i class="mdi mdi-alert-circle-outline"></i>
+          <p>{{ errorMessage }}</p>
+        </template>
+
+        <template #table>
+          <table class="digital-work-records-table">
             <colgroup>
               <col class="col-time">
               <col class="col-module">
@@ -132,12 +142,9 @@
                 <td>{{ resolveWorkRecordModuleLabel(run) }}</td>
                 <td>{{ resolveWorkRecordSourceLabel(run.source) }}</td>
                 <td>
-                  <div class="work-record-status-stack">
-                    <span class="status-pill" :class="resolveWorkRecordStatusTone(run)">
-                      {{ resolveWorkRecordStatusLabel(run) }}
-                    </span>
-                    <span>{{ resolveWorkRecordStatusNote(run) }}</span>
-                  </div>
+                  <span class="status-tag" :class="resolveWorkRecordStatusTone(run)">
+                    {{ resolveWorkRecordStatusLabel(run) }}
+                  </span>
                 </td>
                 <td class="work-record-summary-cell">
                   <strong>{{ resolveWorkRecordTitle(run) }}</strong>
@@ -148,30 +155,8 @@
               </tr>
             </tbody>
           </table>
-        </div>
-
-        <footer v-if="!loading && !errorMessage && visibleRuns.length" class="list-foot digital-employee-pagination">
-          <span class="page-summary">共 {{ filteredRuns.length }} 条，目前第 {{ currentPage }} / {{ totalPages }} 页</span>
-          <div class="pager" aria-label="工作记录分页">
-            <button class="page-nav" type="button" :disabled="currentPage === 1" @click="currentPage--">
-              <i class="mdi mdi-chevron-left"></i>
-            </button>
-            <button
-              v-for="page in pageNumbers"
-              :key="page"
-              class="page-number"
-              :class="{ active: currentPage === page }"
-              type="button"
-              @click="currentPage = page"
-            >
-              {{ page }}
-            </button>
-            <button class="page-nav" type="button" :disabled="currentPage === totalPages" @click="currentPage++">
-              <i class="mdi mdi-chevron-right"></i>
-            </button>
-          </div>
-        </footer>
-      </div>
+        </template>
+      </EnterpriseListPage>
 
       <!-- 详情视图 (全屏样式，参考 AuditJsonRiskRuleDetail) -->
       <div v-else key="detail" class="json-risk-editor-shell panel work-records-detail-stage">
@@ -298,11 +283,15 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import AuditPickerFilter from './AuditPickerFilter.vue'
-import TableEmptyState from '../shared/TableEmptyState.vue'
+import EnterpriseListPage from '../shared/EnterpriseListPage.vue'
 import TableLoadingState from '../shared/TableLoadingState.vue'
 import { fetchAgentRunDetail, fetchAgentRuns } from '../../services/agentAssets.js'
 import { useToast } from '../../composables/useToast.js'
-import { AGENT_RUN_POLL_INTERVAL_MS } from '../../utils/agentRunMonitor.js'
+import {
+  DEFAULT_REFRESH_INTERVAL_MS,
+  REFRESH_INTERVAL_OPTIONS,
+  formatRefreshInterval
+} from '../../utils/refreshIntervalOptions.js'
 import {
   formatWorkRecordDateTime,
   formatWorkRecordSummary,
@@ -330,6 +319,7 @@ const detailLoading = ref(false)
 const detailError = ref('')
 const selectedRunId = ref('')
 const selectedRunDetail = ref(null)
+const refreshInterval = ref(DEFAULT_REFRESH_INTERVAL_MS)
 
 watch(detailOpen, (newVal) => {
   emit('detail-open-change', newVal)
@@ -392,6 +382,14 @@ const listKeyword = ref('')
 const activeModule = ref('全部')
 const activeStatus = ref('全部')
 const activeFilterPopover = ref('')
+const workRecordsEmptyState = {
+  eyebrow: '工作记录',
+  title: '暂无匹配的工作记录',
+  description: '当前没有符合搜索条件的数字员工工作记录。',
+  icon: 'mdi mdi-clipboard-text-clock-outline',
+  tone: 'theme',
+  artLabel: 'RECORDS'
+}
 
 const modulePickerOptions = computed(() => {
   const set = new Set(runs.value.map((run) => resolveWorkRecordModuleLabel(run)))
@@ -408,6 +406,11 @@ const statusPickerOptions = computed(() => {
     ...Array.from(set).map(s => ({ label: s, value: s }))
   ]
 })
+const refreshIntervalPickerOptions = REFRESH_INTERVAL_OPTIONS.map((option) => ({
+  label: `每 ${option.label}`,
+  value: option.value
+}))
+const refreshIntervalLabel = computed(() => formatRefreshInterval(refreshInterval.value))
 
 const activeFilterTokens = computed(() => {
   const tokens = []
@@ -449,6 +452,9 @@ const pageNumbers = computed(() => {
   const start = Math.max(1, Math.min(currentPage.value - 3, total - 6))
   return Array.from({ length: 7 }, (_, index) => start + index)
 })
+const paginationSummary = computed(() =>
+  `共 ${filteredRuns.value.length} 条，目前第 ${currentPage.value} / ${totalPages.value} 页`
+)
 
 watch(
   () => [listKeyword.value, activeModule.value, activeStatus.value],
@@ -486,6 +492,12 @@ function selectStatus(val) {
   closeFilterPopover()
 }
 
+function changeRefreshInterval(value) {
+  refreshInterval.value = Number(value) || DEFAULT_REFRESH_INTERVAL_MS
+  closeFilterPopover()
+  startPolling()
+}
+
 function resetFilters() {
   listKeyword.value = ''
   activeModule.value = '全部'
@@ -564,7 +576,7 @@ function startPolling() {
   stopPolling()
   pollTimer = window.setInterval(() => {
     loadWorkRecords(false)
-  }, AGENT_RUN_POLL_INTERVAL_MS)
+  }, refreshInterval.value)
 }
 
 function stopPolling() {
@@ -586,86 +598,104 @@ onBeforeUnmount(() => {
 
 <style scoped src="../../assets/styles/views/audit-view.css"></style>
 <style scoped src="../../assets/styles/views/audit-view-part2.css"></style>
-<style scoped src="../../assets/styles/views/digital-employees-view.css"></style>
-<style scoped src="../../assets/styles/components/digital-employee-work-records.css"></style>
 
 <style scoped>
-.digital-employee-list-panel {
+.digital-work-records {
+  height: 100%;
+}
+
+.digital-employee-list-panel,
+.digital-work-records-list-stage {
   flex: 1 1 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
+  padding: 0;
   overflow: hidden;
 }
 
-.digital-employee-list-panel .digital-table-wrap {
+.digital-work-records-table {
+  min-width: 1180px;
+  table-layout: fixed;
+}
+
+.digital-work-records-table .col-time { width: 14%; }
+.digital-work-records-table .col-module { width: 13%; }
+.digital-work-records-table .col-source { width: 10%; }
+.digital-work-records-table .col-status { width: 16%; }
+.digital-work-records-table .col-summary { width: 31%; }
+.digital-work-records-table .col-trace { width: 16%; }
+
+.work-record-row {
+  outline: none;
+}
+
+.work-record-row:focus-visible {
+  box-shadow: inset 0 0 0 2px rgba(58, 124, 165, 0.28);
+}
+
+.work-record-summary-cell {
+  text-align: left !important;
+}
+
+.work-record-summary-cell strong,
+.work-record-summary-cell span,
+.work-record-summary-cell em {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.work-record-summary-cell strong {
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.work-record-summary-cell span {
+  margin-top: 4px;
+  color: #64748b;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.work-record-summary-cell em {
+  margin-top: 6px;
+  color: #94a3b8;
+  font-size: 12px;
+  font-style: normal;
+}
+
+.work-record-trace-cell {
+  color: #2563eb !important;
+}
+
+.work-records-detail-stage,
+.work-record-detail-shell {
   flex: 1 1 0;
   min-height: 0;
 }
 
-.digital-employee-list-panel .digital-employee-pagination {
-  flex: 0 0 auto;
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  gap: 16px;
+.digital-work-records :deep(.toolbar-actions .picker-filter),
+.digital-work-records :deep(.toolbar-actions .picker-trigger) {
+  min-width: 148px;
 }
 
-.digital-employee-list-panel .digital-employee-pagination .page-summary {
-  justify-self: start;
+.digital-refresh-now {
+  width: 40px;
+  min-width: 40px;
+  padding: 0;
 }
 
-.digital-employee-list-panel .pager {
-  display: inline-flex;
-  justify-content: center;
-  gap: 6px;
-  padding: 4px;
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  background: #f8fafc;
+.digital-refresh-now .mdi {
+  font-size: 18px;
 }
 
-.digital-employee-list-panel .pager button {
-  width: 32px;
-  height: 32px;
-  border: 0;
-  border-radius: 9px;
+.work-record-detail-body.inline-detail {
+  padding: 0;
+  overflow: visible;
   background: transparent;
-  color: #334155;
-  font-size: 14px;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.digital-employee-list-panel .pager button:hover:not(.active):not(:disabled) {
-  background: #fff;
-  color: var(--theme-primary-active);
-  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
-}
-
-.digital-employee-list-panel .pager button.active {
-  background: var(--theme-primary-active);
-  color: #fff;
-  box-shadow: 0 8px 16px var(--theme-primary-shadow);
-}
-
-.digital-employee-list-panel .pager button:disabled {
-  color: #cbd5e1;
-  cursor: not-allowed;
-}
-
-.digital-work-records-list-stage {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-.work-records-detail-stage {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
 }
 
 </style>