From a904f63ec8a1f36eaa1a259d8d23dcb1b564fa40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=AD=90=E9=BB=98?= <925456043@qq.com>
Date: Mon, 27 Jul 2026 19:41:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E5=8E=86=E5=8F=B2=E7=AD=9B=E9=80=89=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/src/views/ai/chatHistory/index.vue    | 248 ++++++++++++------
 1 file changed, 168 insertions(+), 80 deletions(-)

diff --git a/easyflow-ui-admin/app/src/views/ai/chatHistory/index.vue b/easyflow-ui-admin/app/src/views/ai/chatHistory/index.vue
index 956fdad6..b6061843 100644
--- a/easyflow-ui-admin/app/src/views/ai/chatHistory/index.vue
+++ b/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,48 +378,61 @@ function closeDetail() {
 </script>
 
 <template>
-  <div class="chat-history-page flex h-full flex-col gap-6 p-6">
-    <ListPageShell class="flex-1" :content-padding="20">
+  <div class="chat-history-page flex h-full flex-col p-6">
+    <ListPageShell class="flex-1" surface="plain" :content-padding="0">
       <template #filters>
         <div class="chat-history-page__filters">
-          <ElSelect
-            v-model="query.assistantId"
-            clearable
-            filterable
-            placeholder="筛选智能体"
-            :loading="agentLoading"
-            :options="agentOptions"
-            class="chat-history-page__filter-control is-select"
-            @change="handleSearch"
-          />
-          <ElInput
-            v-model="query.userAccount"
-            class="chat-history-page__filter-control is-input"
-            placeholder="搜索聊天用户"
-            :prefix-icon="Search"
-            @keyup.enter="handleSearch"
-          />
-          <div class="chat-history-page__quick-ranges">
+          <div class="chat-history-page__filter-main">
+            <ElSelect
+              v-model="query.assistantId"
+              clearable
+              filterable
+              placeholder="筛选智能体"
+              :loading="agentLoading"
+              :options="agentOptions"
+              class="chat-history-page__filter-control is-select"
+              @change="handleSearch"
+            />
+            <ElInput
+              v-model="query.userAccount"
+              class="chat-history-page__filter-control is-input"
+              placeholder="搜索聊天用户"
+              :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"
+                class="chat-history-page__quick-range-button"
+                :class="{ 'is-active': quickRange === item.value }"
+                @click="applyQuickRange(item.value)"
+              >
+                {{ item.label }}
+              </ElButton>
+            </div>
+            <ElDatePicker
+              v-model="query.timeRange"
+              class="chat-history-page__filter-control is-range"
+              type="daterange"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              @change="handleTimeRangeChange"
+            />
             <ElButton
-              v-for="item in quickRangeOptions"
-              :key="item.value"
-              :type="quickRange === item.value ? 'primary' : 'default'"
-              class="chat-history-page__quick-range-button"
-              @click="applyQuickRange(item.value)"
+              type="primary"
+              :icon="Search"
+              :loading="loading"
+              class="chat-history-page__search-button"
+              @click="handleSearch"
             >
-              {{ item.label }}
+              查询
             </ElButton>
           </div>
-          <ElDatePicker
-            v-model="query.timeRange"
-            class="chat-history-page__filter-control is-range"
-            type="daterange"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="handleTimeRangeChange"
-          />
-          <ElButton type="primary" @click="handleSearch">查询</ElButton>
         </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: 8px;
+  gap: var(--space-1);
+  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;
-  align-items: center;
+  display: inline-block;
   max-width: 100%;
-  min-height: 28px;
-  padding: 0 12px;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 12px;
-  font-weight: 600;
+  font-size: 13px;
+  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;
-  padding: 4px 10px;
-  font-size: 12px;
+  min-width: 24px;
+  font-size: 13px;
   font-weight: 600;
   color: hsl(var(--text-strong));
-  background: hsl(var(--surface-contrast-soft) / 88%);
-  border-radius: 999px;
+  font-variant-numeric: tabular-nums;
 }
 
 .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%);
-  border-bottom-color: hsl(var(--divider-faint) / 28%);
+  background: hsl(var(--table-header-bg));
+  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%;
   }
 }