feat: 总览模块样式调整

src/components/analysis/Overview/OverviewIdentityCard.vue

@@ -24,52 +24,59 @@ const fullTimeRangeText = computed(() => {
   <div
     class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-pink-500 to-pink-600 p-8 shadow-sm ring-1 ring-pink-600 dark:bg-gray-800/50 dark:from-transparent dark:to-transparent dark:ring-gray-800"
   >
-    <div class="relative">
-      <div>
-        <div class="flex items-center gap-3">
-          <h2 class="text-3xl font-black tracking-tight text-white">{{ session.name }}</h2>
-          <span
-            class="rounded-full bg-white px-3 py-1 text-xs font-medium text-pink-600 dark:bg-pink-500/10 dark:text-pink-400"
-          >
-            {{ session.platform.toUpperCase() }}
-          </span>
+    <div class="relative flex gap-8">
+      <div class="flex-1">
+        <div>
+          <div class="flex items-center gap-3">
+            <h2 class="text-3xl font-black tracking-tight text-white">{{ session.name }}</h2>
+            <span
+              class="rounded-full bg-white px-3 py-1 text-xs font-medium text-pink-600 dark:bg-pink-500/10 dark:text-pink-400"
+            >
+              {{ session.platform.toUpperCase() }}
+            </span>
+          </div>
+          <p class="mt-2 text-lg font-medium text-pink-100 dark:text-gray-400">
+            {{
+              session.type === 'private'
+                ? t('analysis.overview.identity.privateChat')
+                : t('analysis.overview.identity.groupChat')
+            }}
+            ·
+            <span class="opacity-80">{{ t('analysis.overview.identity.analysisReport') }}</span>
+          </p>
+          <!-- 聊天记录起止时间 -->
+          <p v-if="fullTimeRangeText" class="mt-2 text-sm font-medium text-pink-100/90 dark:text-gray-400">
+            {{ fullTimeRangeText }}
+          </p>
+        </div>
+
+        <div class="mt-8 grid grid-cols-3 gap-6">
+          <div class="rounded-2xl bg-white/10 px-6 py-4 dark:bg-gray-800">
+            <p class="text-3xl font-black tracking-tight text-white">
+              {{ session.messageCount.toLocaleString() }}
+            </p>
+            <p class="mt-1 text-sm font-medium text-pink-100 dark:text-gray-400">
+              {{ t('analysis.overview.identity.totalMessages') }}
+            </p>
+          </div>
+          <div class="rounded-2xl bg-white/10 px-6 py-4 dark:bg-gray-800">
+            <p class="text-3xl font-black tracking-tight text-white">{{ totalDurationDays }}</p>
+            <p class="mt-1 text-sm font-medium text-pink-100 dark:text-gray-400">
+              {{ t('analysis.overview.identity.durationDays') }}
+            </p>
+          </div>
+          <div class="rounded-2xl bg-white/10 px-6 py-4 dark:bg-gray-800">
+            <p class="text-3xl font-black tracking-tight text-white">{{ totalDailyAvgMessages }}</p>
+            <p class="mt-1 text-sm font-medium text-pink-100 dark:text-gray-400">
+              {{ t('analysis.overview.identity.dailyAvgMessages') }}
+            </p>
+          </div>
         </div>
-        <p class="mt-2 text-lg font-medium text-pink-100 dark:text-gray-400">
-          {{
-            session.type === 'private'
-              ? t('analysis.overview.identity.privateChat')
-              : t('analysis.overview.identity.groupChat')
-          }}
-          ·
-          <span class="opacity-80">{{ t('analysis.overview.identity.analysisReport') }}</span>
-        </p>
-        <!-- 聊天记录起止时间 -->
-        <p v-if="fullTimeRangeText" class="mt-2 text-sm font-medium text-pink-100/90 dark:text-gray-400">
-          {{ fullTimeRangeText }}
-        </p>
       </div>
 
-      <div class="mt-8 grid grid-cols-3 gap-6">
-        <div class="rounded-2xl bg-white/10 px-6 py-4 dark:bg-gray-800">
-          <p class="text-3xl font-black tracking-tight text-white">
-            {{ session.messageCount.toLocaleString() }}
-          </p>
-          <p class="mt-1 text-sm font-medium text-pink-100 dark:text-gray-400">
-            {{ t('analysis.overview.identity.totalMessages') }}
-          </p>
-        </div>
-        <div class="rounded-2xl bg-white/10 px-6 py-4 dark:bg-gray-800">
-          <p class="text-3xl font-black tracking-tight text-white">{{ totalDurationDays }}</p>
-          <p class="mt-1 text-sm font-medium text-pink-100 dark:text-gray-400">
-            {{ t('analysis.overview.identity.durationDays') }}
-          </p>
-        </div>
-        <div class="rounded-2xl bg-white/10 px-6 py-4 dark:bg-gray-800">
-          <p class="text-3xl font-black tracking-tight text-white">{{ totalDailyAvgMessages }}</p>
-          <p class="mt-1 text-sm font-medium text-pink-100 dark:text-gray-400">
-            {{ t('analysis.overview.identity.dailyAvgMessages') }}
-          </p>
-        </div>
+      <!-- 右侧工具区插槽 -->
+      <div v-if="$slots.tools" class="flex flex-none flex-col justify-end">
+        <slot name="tools" />
       </div>
     </div>
   </div>

src/i18n/locales/en-US/analysis.json

@@ -28,7 +28,7 @@
   "tooltip": {
     "chatViewer": "Chat Record Viewer",
     "sessionIndex": "Session Index",
-    "incrementalImport": "Append Chat Records"
+    "incrementalImport": "Import More"
   },
   "incremental": {
     "title": "Append Chat Records",
@@ -102,7 +102,8 @@
       "totalMessages": "Total Messages",
       "durationDays": "Duration Days",
       "dailyAvgMessages": "Daily Avg"
-    }
+    },
+    "tools": "Quick Tools"
   },
   "filter": {
     "title": "Filter Analysis",

src/i18n/locales/zh-CN/analysis.json

@@ -28,7 +28,7 @@
   "tooltip": {
     "chatViewer": "聊天记录查看器",
     "sessionIndex": "会话索引",
-    "incrementalImport": "追加聊天记录"
+    "incrementalImport": "增量导入"
   },
   "incremental": {
     "title": "追加聊天记录",
@@ -102,7 +102,8 @@
       "totalMessages": "消息总数",
       "durationDays": "跨度天数",
       "dailyAvgMessages": "日均消息"
-    }
+    },
+    "tools": "常用工具"
   },
   "filter": {
     "title": "自定义筛选",

src/pages/group-chat/components/OverviewTab.vue

@@ -15,6 +15,11 @@ import DailyTrendCard from '@/components/analysis/Overview/DailyTrendCard.vue'
 
 const { t } = useI18n()
 
+const emit = defineEmits<{
+  (e: 'openSessionIndex'): void
+  (e: 'openIncrementalImport'): void
+}>()
+
 const props = defineProps<{
   session: AnalysisSession
   memberActivity: MemberActivity[]
@@ -109,7 +114,29 @@ watch(
       :total-duration-days="totalDurationDays"
       :total-daily-avg-messages="totalDailyAvgMessages"
       :time-range="timeRange"
-    />
+    >
+      <template #tools>
+        <div class="flex flex-col gap-2">
+          <span class="mb-0.5 text-xs font-semibold tracking-wide text-white/60 dark:text-gray-500">
+            {{ t('analysis.overview.tools') }}
+          </span>
+          <button
+            class="flex items-center gap-2 rounded-xl bg-white/10 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-white/20 dark:bg-gray-700 dark:hover:bg-gray-600"
+            @click="emit('openIncrementalImport')"
+          >
+            <UIcon name="i-heroicons-plus-circle" class="h-4 w-4 shrink-0" />
+            {{ t('analysis.tooltip.incrementalImport') }}
+          </button>
+          <button
+            class="flex items-center gap-2 rounded-xl bg-white/10 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-white/20 dark:bg-gray-700 dark:hover:bg-gray-600"
+            @click="emit('openSessionIndex')"
+          >
+            <UIcon name="i-heroicons-clock" class="h-4 w-4 shrink-0" />
+            {{ t('analysis.tooltip.sessionIndex') }}
+          </button>
+        </div>
+      </template>
+    </OverviewIdentityCard>
 
     <!-- 关键指标卡片 -->
     <OverviewStatCards

src/pages/group-chat/index.vue

@@ -201,15 +201,6 @@ onMounted(() => {
         icon-class="bg-primary-600 text-white dark:bg-primary-500 dark:text-white"
       >
         <template #actions>
-          <UButton
-            color="neutral"
-            variant="soft"
-            size="sm"
-            icon="i-heroicons-plus-circle"
-            @click="showIncrementalImportModal = true"
-          >
-            {{ t('analysis.tooltip.incrementalImport') }}
-          </UButton>
           <UButton
             color="primary"
             variant="soft"
@@ -219,15 +210,6 @@ onMounted(() => {
           >
             {{ t('analysis.tooltip.chatViewer') }}
           </UButton>
-          <UTooltip :text="t('analysis.tooltip.sessionIndex')">
-            <UButton
-              icon="i-heroicons-clock"
-              color="neutral"
-              variant="ghost"
-              size="sm"
-              @click="showSessionIndexModal = true"
-            />
-          </UTooltip>
           <CaptureButton />
         </template>
         <!-- Tabs -->
@@ -282,6 +264,8 @@ onMounted(() => {
               :filtered-message-count="filteredMessageCount"
               :filtered-member-count="filteredMemberCount"
               :time-filter="timeFilter"
+              @open-session-index="showSessionIndexModal = true"
+              @open-incremental-import="showIncrementalImportModal = true"
             />
             <ViewTab
               v-else-if="activeTab === 'view'"

src/pages/private-chat/components/OverviewTab.vue

@@ -15,6 +15,11 @@ import DailyTrendCard from '@/components/analysis/Overview/DailyTrendCard.vue'
 
 const { t } = useI18n()
 
+const emit = defineEmits<{
+  (e: 'openSessionIndex'): void
+  (e: 'openIncrementalImport'): void
+}>()
+
 const props = defineProps<{
   session: AnalysisSession
   memberActivity: MemberActivity[]
@@ -125,7 +130,29 @@ watch(
       :total-duration-days="totalDurationDays"
       :total-daily-avg-messages="totalDailyAvgMessages"
       :time-range="timeRange"
-    />
+    >
+      <template #tools>
+        <div class="flex flex-col gap-2">
+          <span class="mb-0.5 text-xs font-semibold tracking-wide text-white/60 dark:text-gray-500">
+            {{ t('analysis.overview.tools') }}
+          </span>
+          <button
+            class="flex items-center gap-2 rounded-xl bg-white/10 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-white/20 dark:bg-gray-700 dark:hover:bg-gray-600"
+            @click="emit('openIncrementalImport')"
+          >
+            <UIcon name="i-heroicons-plus-circle" class="h-4 w-4 shrink-0" />
+            {{ t('analysis.tooltip.incrementalImport') }}
+          </button>
+          <button
+            class="flex items-center gap-2 rounded-xl bg-white/10 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-white/20 dark:bg-gray-700 dark:hover:bg-gray-600"
+            @click="emit('openSessionIndex')"
+          >
+            <UIcon name="i-heroicons-clock" class="h-4 w-4 shrink-0" />
+            {{ t('analysis.tooltip.sessionIndex') }}
+          </button>
+        </div>
+      </template>
+    </OverviewIdentityCard>
 
     <!-- 双方消息对比 -->
     <SectionCard v-if="memberComparisonData" :title="t('analysis.overview.messageRatio')" :show-divider="false">
@@ -133,7 +160,6 @@ watch(
         <div class="flex items-center gap-8">
           <!-- 左侧成员 -->
           <div class="flex-1 text-center">
-            <!-- 头像：优先显示真实头像 -->
             <img
               v-if="memberComparisonData.member1.avatar"
               :src="memberComparisonData.member1.avatar"
@@ -179,7 +205,6 @@ watch(
 
           <!-- 右侧成员 -->
           <div class="flex-1 text-center">
-            <!-- 头像：优先显示真实头像 -->
             <img
               v-if="memberComparisonData.member2.avatar"
               :src="memberComparisonData.member2.avatar"

src/pages/private-chat/index.vue

@@ -213,15 +213,6 @@ onMounted(() => {
         icon-class="bg-pink-600 text-white dark:bg-pink-500 dark:text-white"
       >
         <template #actions>
-          <UButton
-            color="neutral"
-            variant="soft"
-            size="sm"
-            icon="i-heroicons-plus-circle"
-            @click="showIncrementalImportModal = true"
-          >
-            {{ t('analysis.tooltip.incrementalImport') }}
-          </UButton>
           <UButton
             color="primary"
             variant="soft"
@@ -231,15 +222,6 @@ onMounted(() => {
           >
             {{ t('analysis.tooltip.chatViewer') }}
           </UButton>
-          <UTooltip :text="t('analysis.tooltip.sessionIndex')">
-            <UButton
-              icon="i-heroicons-clock"
-              color="neutral"
-              variant="ghost"
-              size="sm"
-              @click="showSessionIndexModal = true"
-            />
-          </UTooltip>
           <CaptureButton />
         </template>
         <!-- Tabs -->
@@ -291,6 +273,8 @@ onMounted(() => {
               :filtered-message-count="filteredMessageCount"
               :filtered-member-count="filteredMemberCount"
               :time-filter="timeFilter"
+              @open-session-index="showSessionIndexModal = true"
+              @open-incremental-import="showIncrementalImportModal = true"
             />
             <ViewTab
               v-else-if="activeTab === 'view'"