easyflow-ui-admin/app/src/views/ai/chatHistory/index.vue

@@ -5,9 +5,9 @@ import { computed, onMounted, ref } from 'vue';
 
 import { useEasyFlowDrawer } from '@easyflow/common-ui';
 import {
-  createChatVariantSwitchController,
   ChatTimeHistoryMapper,
   ChatTimeTimelineBuilder,
+  createChatVariantSwitchController,
 } from '@easyflow/utils';
 
 import { Search } from '@element-plus/icons-vue';
@@ -60,7 +60,10 @@ const messagePage = ref({
   pageSize: 20,
 });
 const variantSwitchStateVersion = ref(0);
-const variantSwitchController = createChatVariantSwitchController<any, ChatTimeTimelineItem>({
+const variantSwitchController = createChatVariantSwitchController<
+  any,
+  ChatTimeTimelineItem
+>({
   mapRecords: (records) => ChatTimeHistoryMapper.fromHistoryRecords(records),
   onStateChange: () => {
     variantSwitchStateVersion.value += 1;
@@ -245,7 +248,8 @@ function prefetchVisibleVariants() {
       Number(item.variantCount || 0) > 1
     ) {
       variantSwitchController.prefetchVariants({
-        fetchVariants: () => fetchRoundVariants(sessionId, String(item.roundId)),
+        fetchVariants: () =>
+          fetchRoundVariants(sessionId, String(item.roundId)),
         roundId: item.roundId,
         sessionId,
       });
@@ -254,7 +258,7 @@ function prefetchVisibleVariants() {
 }
 
 function currentSwitchingRoundIds() {
-  variantSwitchStateVersion.value;
+  void variantSwitchStateVersion.value;
   const sessionId = String(currentSession.value?.id || '');
   if (!sessionId) {
     return [];
@@ -262,7 +266,8 @@ function currentSwitchingRoundIds() {
   return messageList.value
     .filter(
       (item) =>
-        item.roundId && variantSwitchController.isSwitching(sessionId, item.roundId),
+        item.roundId &&
+        variantSwitchController.isSwitching(sessionId, item.roundId),
     )
     .map((item) => String(item.roundId));
 }
@@ -373,10 +378,11 @@ function closeDetail() {
 </script>
 
 <template>
-  <div class="chat-history-page flex h-full flex-col gap-6 p-6">
+  <div class="chat-history-page flex h-full flex-col p-6">
-    <ListPageShell class="flex-1" :content-padding="20">
+    <ListPageShell class="flex-1" surface="plain" :content-padding="0">
       <template #filters>
         <div class="chat-history-page__filters">
+          <div class="chat-history-page__filter-main">
             <ElSelect
               v-model="query.assistantId"
               clearable
@@ -394,12 +400,15 @@ function closeDetail() {
               :prefix-icon="Search"
               @keyup.enter="handleSearch"
             />
+          </div>
+
+          <div class="chat-history-page__date-tools">
             <div class="chat-history-page__quick-ranges">
               <ElButton
                 v-for="item in quickRangeOptions"
                 :key="item.value"
-              :type="quickRange === item.value ? 'primary' : 'default'"
                 class="chat-history-page__quick-range-button"
+                :class="{ 'is-active': quickRange === item.value }"
                 @click="applyQuickRange(item.value)"
               >
                 {{ item.label }}
@@ -414,7 +423,16 @@ function closeDetail() {
               end-placeholder="结束时间"
               @change="handleTimeRangeChange"
             />
-          <ElButton type="primary" @click="handleSearch">查询</ElButton>
+            <ElButton
+              type="primary"
+              :icon="Search"
+              :loading="loading"
+              class="chat-history-page__search-button"
+              @click="handleSearch"
+            >
+              查询
+            </ElButton>
+          </div>
         </div>
       </template>
 
@@ -499,7 +517,6 @@ function closeDetail() {
 
         <div v-if="pageState.total > 0" class="chat-history-page__pagination">
           <ElPagination
-            background
             layout="total, sizes, prev, pager, next, jumper"
             :current-page="query.pageNumber"
             :page-size="query.pageSize"
@@ -532,8 +549,26 @@ function closeDetail() {
 .chat-history-page__filters {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: var(--space-3) var(--space-4);
   align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.chat-history-page__filter-main,
+.chat-history-page__date-tools {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  min-width: 0;
+}
+
+.chat-history-page__filter-main {
+  flex: 1 1 400px;
+}
+
+.chat-history-page__date-tools {
+  flex: 0 1 auto;
 }
 
 .chat-history-page__filter-control {
@@ -542,21 +577,54 @@ function closeDetail() {
 
 .chat-history-page__filter-control.is-select,
 .chat-history-page__filter-control.is-input {
-  width: 220px;
+  width: 200px;
+}
+
+.chat-history-page__filter-control.is-input {
+  flex: 1 1 220px;
+  max-width: 280px;
 }
 
 .chat-history-page__filter-control.is-range {
-  width: 360px;
+  width: 320px;
 }
 
 .chat-history-page__quick-ranges {
   display: inline-flex;
-  flex-wrap: wrap;
+  gap: var(--space-1);
-  gap: 8px;
+  padding: var(--space-1);
+  white-space: nowrap;
+  background: hsl(var(--surface-contrast-soft));
+  border-radius: var(--radius-control);
 }
 
 .chat-history-page__quick-range-button {
-  min-width: 88px;
+  min-width: auto;
+  height: var(--space-8);
+  padding: 0 var(--space-3);
+  margin: 0;
+  color: hsl(var(--text-muted));
+  background: transparent;
+  border: 0;
+  border-radius: calc(var(--radius-control) - 2px);
+  box-shadow: none;
+}
+
+.chat-history-page__quick-range-button:hover,
+.chat-history-page__quick-range-button:focus-visible {
+  color: hsl(var(--text-strong));
+  background: hsl(var(--surface-panel));
+}
+
+.chat-history-page__quick-range-button.is-active {
+  font-weight: 600;
+  color: hsl(var(--nav-item-active-foreground));
+  background: hsl(var(--surface-panel));
+}
+
+.chat-history-page__search-button {
+  flex: none;
+  min-width: 80px;
 }
 
 .chat-history-page__content {
@@ -570,17 +638,6 @@ function closeDetail() {
   flex: 1;
   min-height: 0;
   overflow: hidden;
-  background: linear-gradient(
-    180deg,
-    hsl(var(--glass-border) / 28%) 0%,
-    hsl(var(--glass-tint) / 40%) 14%,
-    hsl(var(--surface-panel) / 94%) 100%
-  );
-  border: 1px solid hsl(var(--glass-border) / 42%);
-  border-radius: 24px;
-  box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 54%),
-    0 24px 42px -36px hsl(var(--foreground) / 16%);
 }
 
 .chat-history-page__table {
@@ -617,39 +674,31 @@ function closeDetail() {
 }
 
 .chat-history-page__assistant-chip {
-  display: inline-flex;
+  display: inline-block;
-  align-items: center;
   max-width: 100%;
-  min-height: 28px;
-  padding: 0 12px;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 12px;
+  font-size: 13px;
-  font-weight: 600;
+  font-weight: 500;
   color: hsl(var(--nav-item-active-foreground));
   white-space: nowrap;
-  background: hsl(var(--glass-tint) / 76%);
-  border: 1px solid hsl(var(--glass-border) / 48%);
-  border-radius: 999px;
 }
 
 .chat-history-page__user-cell,
 .chat-history-page__time-cell {
   font-size: 13px;
-  color: hsl(var(--text-secondary));
+  color: hsl(var(--text-muted));
 }
 
 .chat-history-page__count-pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 42px;
+  min-width: 24px;
-  padding: 4px 10px;
+  font-size: 13px;
-  font-size: 12px;
   font-weight: 600;
   color: hsl(var(--text-strong));
-  background: hsl(var(--surface-contrast-soft) / 88%);
+  font-variant-numeric: tabular-nums;
-  border-radius: 999px;
 }
 
 .chat-history-page__detail-action {
@@ -667,7 +716,17 @@ function closeDetail() {
 .chat-history-page__pagination {
   display: flex;
   justify-content: flex-end;
-  padding-top: 20px;
+  padding: var(--space-4) var(--space-5);
+  border-top: 1px solid hsl(var(--divider-faint) / 52%);
+}
+
+.chat-history-page :deep(.list-page-shell__toolbar) {
+  padding: 0 0 var(--space-4);
+  border-bottom: 1px solid hsl(var(--divider-faint) / 58%);
+}
+
+.chat-history-page :deep(.list-page-shell__content) {
+  border-radius: var(--radius-panel);
 }
 
 .chat-history-page__content :deep(.el-table),
@@ -692,14 +751,19 @@ function closeDetail() {
   font-size: 12px;
   font-weight: 600;
   color: hsl(var(--text-muted));
-  background: hsl(var(--surface-contrast-soft) / 54%);
+  background: hsl(var(--table-header-bg));
-  border-bottom-color: hsl(var(--divider-faint) / 28%);
+  border-bottom-color: hsl(var(--table-row-border));
+}
+
+.chat-history-page__content :deep(.el-table th.el-table__cell:first-child),
+.chat-history-page__content :deep(.el-table th.el-table__cell:last-child) {
+  border-radius: 0;
 }
 
 .chat-history-page__content :deep(.el-table td.el-table__cell) {
   padding: 14px 0;
   background: transparent;
-  border-bottom-color: hsl(var(--divider-faint) / 22%);
+  border-bottom-color: hsl(var(--table-row-border));
 }
 
 .chat-history-page__content
@@ -713,8 +777,13 @@ function closeDetail() {
 }
 
 @media (max-width: 1024px) {
+  .chat-history-page__date-tools {
+    flex: 1 1 100%;
+  }
+
   .chat-history-page__filter-control.is-range {
-    width: min(100%, 360px);
+    flex: 1 1 280px;
+    width: auto;
   }
 }
 
@@ -724,12 +793,31 @@ function closeDetail() {
   }
 
   .chat-history-page__filters {
-    gap: 10px;
+    gap: var(--space-3);
+  }
+
+  .chat-history-page__filter-main,
+  .chat-history-page__date-tools {
+    flex-wrap: wrap;
+    width: 100%;
   }
 
   .chat-history-page__filter-control.is-select,
   .chat-history-page__filter-control.is-input,
   .chat-history-page__filter-control.is-range {
+    flex: 1 1 100%;
+    max-width: none;
+    width: 100%;
+  }
+
+  .chat-history-page__quick-ranges {
+    display: grid;
+    flex: 1 1 100%;
+    grid-template-columns: repeat(3, 1fr);
+    width: 100%;
+  }
+
+  .chat-history-page__search-button {
     width: 100%;
   }
 }