diff --git a/src/components/analysis/AITab.vue b/src/components/analysis/AITab.vue
index 080573a..24092ea 100644
--- a/src/components/analysis/AITab.vue
+++ b/src/components/analysis/AITab.vue
@@ -2,9 +2,10 @@
 import { ref } from 'vue'
 import { SubTabs } from '@/components/UI'
 import ChatExplorer from './ai/ChatExplorer.vue'
+import SQLLabTab from './SQLLabTab.vue'
 
 // Props
-defineProps<{
+const props = defineProps<{
   sessionId: string
   sessionName: string
   timeFilter?: { startTs: number; endTs: number }
@@ -14,9 +15,31 @@ defineProps<{
 // 子 Tab 配置
 const subTabs = [
   { id: 'chat-explorer', label: '对话式探索', icon: 'i-heroicons-chat-bubble-left-ellipsis' },
-  { id: 'manual', label: '筛选分析', icon: 'i-heroicons-adjustments-horizontal' },
-  { id: 'sql', label: 'AI SQL', icon: 'i-heroicons-beaker' },
-  { id: 'mbti', label: 'MBTI检测仪', icon: 'i-heroicons-heart' },
+  { id: 'sql-lab', label: 'SQL实验室', icon: 'i-heroicons-command-line' },
+  {
+    id: 'manual',
+    label: '筛选分析',
+    desc: '计划实现高级筛选功能，可以先按人/按时间/按搜索内容手动筛选，然后再进行AI分析',
+    icon: 'i-heroicons-adjustments-horizontal',
+  },
+  {
+    id: 'mbti',
+    label: 'MBTI鉴定',
+    desc: '计划选中成员，然后根据聊天记录以及上下文分析TA的MBTI',
+    icon: 'i-heroicons-heart',
+  },
+  {
+    id: 'cyber-friend',
+    label: '赛博群友计划',
+    desc: '思路：指定某个群友，然后根据聊天记录分析群友的特征，包括口头禅、表情包和标点风格、什么话题他会出现之类的，将这些分析结果打包为系统提示词，并注入AI，就生成了一个赛博群友。实际上可能要复杂一些，但是应该会很好玩。',
+    icon: 'i-heroicons-cpu-chip',
+  },
+  {
+    id: 'campus',
+    label: '阵营9宫格',
+    desc: '和朋友们聊天的时候产生的一个有趣的想法，群里偶尔会很认真的讨论某个话题，大家都聊的很认真，那么是不是可以让AI分析聊天记录，然后针对这个话题，让AI用 守序善良/绝对中立/守序邪恶/混乱邪恶这样的九宫格把群友划分到对应的格子里面',
+    icon: 'i-heroicons-squares-2x2',
+  },
 ]
 
 const activeSubTab = ref('chat-explorer')
@@ -38,7 +61,7 @@ defineExpose({
 <template>
   <div class="flex h-full flex-col">
     <!-- 子 Tab 导航 -->
-    <SubTabs class="hidden" v-model="activeSubTab" :items="subTabs" />
+    <SubTabs v-model="activeSubTab" :items="subTabs" />
 
     <!-- 子 Tab 内容 -->
     <div class="flex-1 min-h-0 overflow-hidden">
@@ -54,55 +77,41 @@ defineExpose({
           :chat-type="chatType"
         />
 
-        <!-- 实验室 - 暂未实现 -->
-        <div v-else-if="activeSubTab === 'lab'" class="flex h-full items-center justify-center p-6">
+        <!-- 暂未实现的功能 -->
+        <div
+          v-else-if="['manual', 'mbti', 'cyber-friend', 'campus'].includes(activeSubTab)"
+          class="flex h-full items-center justify-center p-6"
+        >
           <div
             class="flex h-full w-full items-center justify-center rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/50"
           >
             <div class="text-center">
-              <UIcon name="i-heroicons-beaker" class="mx-auto h-12 w-12 text-gray-400" />
-              <p class="mt-3 text-sm font-medium text-gray-600 dark:text-gray-400">实验室功能开发中</p>
-              <p class="mt-1 text-xs text-gray-400">敬请期待...</p>
+              <UIcon :name="subTabs.find((t) => t.id === activeSubTab)?.icon" class="mx-auto h-12 w-12 text-gray-400" />
+              <p class="mt-3 text-sm font-medium text-gray-600 dark:text-gray-400">
+                {{ subTabs.find((t) => t.id === activeSubTab)?.label }}功能开发中
+              </p>
+              <p class="mt-1 max-w-md px-4 text-sm text-gray-500">
+                {{ subTabs.find((t) => t.id === activeSubTab)?.desc || '敬请期待...' }}
+              </p>
+
+              <div class="mt-8 flex items-center justify-center gap-1 text-xs text-gray-400">
+                <span>功能上线通知，欢迎关注我的小红书</span>
+                <UButton
+                  to="https://www.xiaohongshu.com/user/profile/6841741e000000001d0091b4"
+                  target="_blank"
+                  variant="link"
+                  :padded="false"
+                  class="text-xs font-medium"
+                >
+                  @地瓜
+                </UButton>
+              </div>
             </div>
           </div>
         </div>
 
-        <!-- 筛选分析 - 暂未实现 -->
-        <div v-else-if="activeSubTab === 'manual'" class="flex h-full items-center justify-center p-6">
-          <div
-            class="flex h-full w-full items-center justify-center rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/50"
-          >
-            <div class="text-center">
-              <UIcon name="i-heroicons-adjustments-horizontal" class="mx-auto h-12 w-12 text-gray-400" />
-              <p class="mt-3 text-sm font-medium text-gray-600 dark:text-gray-400">筛选分析功能开发中</p>
-              <p class="mt-1 text-xs text-gray-400">敬请期待...</p>
-            </div>
-          </div>
-        </div>
-        <!-- AI SQL -->
-        <div v-else-if="activeSubTab === 'sql'" class="flex h-full items-center justify-center p-6">
-          <div
-            class="flex h-full w-full items-center justify-center rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/50"
-          >
-            <div class="text-center">
-              <UIcon name="i-heroicons-beaker" class="mx-auto h-12 w-12 text-gray-400" />
-              <p class="mt-3 text-sm font-medium text-gray-600 dark:text-gray-400">开发中</p>
-              <p class="mt-1 text-xs text-gray-400">敬请期待...</p>
-            </div>
-          </div>
-        </div>
-        <!-- MBTI检测仪 -->
-        <div v-else-if="activeSubTab === 'mbti'" class="flex h-full items-center justify-center p-6">
-          <div
-            class="flex h-full w-full items-center justify-center rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/50"
-          >
-            <div class="text-center">
-              <UIcon name="i-heroicons-beaker" class="mx-auto h-12 w-12 text-gray-400" />
-              <p class="mt-3 text-sm font-medium text-gray-600 dark:text-gray-400">开发中</p>
-              <p class="mt-1 text-xs text-gray-400">敬请期待...</p>
-            </div>
-          </div>
-        </div>
+        <!-- SQL 实验室 -->
+        <SQLLabTab v-else-if="activeSubTab === 'sql-lab'" class="h-full" :session-id="props.sessionId" />
       </Transition>
     </div>
   </div>
diff --git a/src/components/analysis/Overview/ActivityTimeDistribution.vue b/src/components/analysis/Overview/ActivityTimeDistribution.vue
new file mode 100644
index 0000000..81be04a
--- /dev/null
+++ b/src/components/analysis/Overview/ActivityTimeDistribution.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { HourlyActivity, WeekdayActivity, MonthlyActivity } from '@/types/chat'
+import { BarChart } from '@/components/charts'
+import type { BarChartData } from '@/components/charts'
+import { SectionCard } from '@/components/UI'
+
+const props = defineProps<{
+  hourlyActivity: HourlyActivity[]
+  weekdayActivity: WeekdayActivity[]
+  monthlyActivity: MonthlyActivity[]
+  isLoadingWeekday: boolean
+  isLoadingMonthly: boolean
+  weekdayNames: string[]
+  weekdayVsWeekend: { weekday: number; weekend: number }
+}>()
+
+// --- 24小时分布逻辑 ---
+// 24小时分布图数据
+const hourlyChartData = computed<BarChartData>(() => {
+  return {
+    labels: props.hourlyActivity.map((h) => `${h.hour}:00`),
+    values: props.hourlyActivity.map((h) => h.messageCount),
+  }
+})
+
+// 时段占比计算
+const totalMessages = computed(() => props.hourlyActivity.reduce((sum, h) => sum + h.messageCount, 0))
+
+const lateNightRatio = computed(() => {
+  const lateNight = props.hourlyActivity
+    .filter((h) => h.hour >= 0 && h.hour < 6)
+    .reduce((sum, h) => sum + h.messageCount, 0)
+  return totalMessages.value > 0 ? Math.round((lateNight / totalMessages.value) * 100) : 0
+})
+
+const morningRatio = computed(() => {
+  const morning = props.hourlyActivity
+    .filter((h) => h.hour >= 6 && h.hour < 12)
+    .reduce((sum, h) => sum + h.messageCount, 0)
+  return totalMessages.value > 0 ? Math.round((morning / totalMessages.value) * 100) : 0
+})
+
+const afternoonRatio = computed(() => {
+  const afternoon = props.hourlyActivity
+    .filter((h) => h.hour >= 12 && h.hour < 18)
+    .reduce((sum, h) => sum + h.messageCount, 0)
+  return totalMessages.value > 0 ? Math.round((afternoon / totalMessages.value) * 100) : 0
+})
+
+const eveningRatio = computed(() => {
+  const evening = props.hourlyActivity
+    .filter((h) => h.hour >= 18 && h.hour < 24)
+    .reduce((sum, h) => sum + h.messageCount, 0)
+  return totalMessages.value > 0 ? Math.round((evening / totalMessages.value) * 100) : 0
+})
+
+// --- 星期分布逻辑 ---
+// 星期分布图数据
+const weekdayChartData = computed<BarChartData>(() => {
+  return {
+    labels: props.weekdayActivity.map((w) => props.weekdayNames[w.weekday - 1]),
+    values: props.weekdayActivity.map((w) => w.messageCount),
+  }
+})
+
+// --- 月份分布逻辑 ---
+// 月份分布图数据
+const monthlyChartData = computed<BarChartData>(() => {
+  return {
+    labels: props.monthlyActivity.map((m) => `${m.month}月`),
+    values: props.monthlyActivity.map((m) => m.messageCount),
+  }
+})
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-6 lg:grid-cols-2 2xl:grid-cols-3">
+    <!-- 24小时分布 -->
+    <SectionCard title="24小时活跃分布" :show-divider="false">
+      <div class="p-5">
+        <BarChart
+          :data="hourlyChartData"
+          :height="256"
+          :x-label-filter="(_, index) => (index % 3 === 0 ? `${index}:00` : '')"
+        />
+
+        <div class="mt-6 grid grid-cols-4 gap-2">
+          <div class="text-center">
+            <div class="text-xs text-gray-500 dark:text-gray-400">凌晨</div>
+            <div class="mt-1 text-base font-semibold text-gray-900 dark:text-white">{{ lateNightRatio }}%</div>
+            <div class="mx-auto mt-1 h-1 w-full max-w-12 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
+              <div class="h-full rounded-full bg-pink-300 transition-all" :style="{ width: `${lateNightRatio}%` }" />
+            </div>
+          </div>
+          <div class="text-center">
+            <div class="text-xs text-gray-500 dark:text-gray-400">上午</div>
+            <div class="mt-1 text-base font-semibold text-gray-900 dark:text-white">{{ morningRatio }}%</div>
+            <div class="mx-auto mt-1 h-1 w-full max-w-12 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
+              <div class="h-full rounded-full bg-pink-400 transition-all" :style="{ width: `${morningRatio}%` }" />
+            </div>
+          </div>
+          <div class="text-center">
+            <div class="text-xs text-gray-500 dark:text-gray-400">下午</div>
+            <div class="mt-1 text-base font-semibold text-gray-900 dark:text-white">{{ afternoonRatio }}%</div>
+            <div class="mx-auto mt-1 h-1 w-full max-w-12 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
+              <div class="h-full rounded-full bg-pink-500 transition-all" :style="{ width: `${afternoonRatio}%` }" />
+            </div>
+          </div>
+          <div class="text-center">
+            <div class="text-xs text-gray-500 dark:text-gray-400">晚上</div>
+            <div class="mt-1 text-base font-semibold text-gray-900 dark:text-white">{{ eveningRatio }}%</div>
+            <div class="mx-auto mt-1 h-1 w-full max-w-12 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
+              <div class="h-full rounded-full bg-pink-600 transition-all" :style="{ width: `${eveningRatio}%` }" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </SectionCard>
+
+    <!-- 星期分布 -->
+    <SectionCard title="星期活跃分布" :show-divider="false">
+      <div class="p-5">
+        <div v-if="isLoadingWeekday" class="flex h-64 items-center justify-center">
+          <UIcon name="i-heroicons-arrow-path" class="h-6 w-6 animate-spin text-pink-500" />
+        </div>
+        <template v-else>
+          <BarChart :data="weekdayChartData" :height="256" />
+
+          <div class="mt-6 grid grid-cols-2 gap-4">
+            <div class="text-center">
+              <div class="text-xs text-gray-500 dark:text-gray-400">工作日</div>
+              <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
+                {{ weekdayVsWeekend.weekday }}%
+              </div>
+              <div class="mx-auto mt-2 h-1 w-full max-w-24 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
+                <div
+                  class="h-full rounded-full bg-pink-500 transition-all"
+                  :style="{ width: `${weekdayVsWeekend.weekday}%` }"
+                />
+              </div>
+            </div>
+            <div class="text-center">
+              <div class="text-xs text-gray-500 dark:text-gray-400">周末</div>
+              <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
+                {{ weekdayVsWeekend.weekend }}%
+              </div>
+              <div class="mx-auto mt-2 h-1 w-full max-w-24 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
+                <div
+                  class="h-full rounded-full bg-blue-500 transition-all"
+                  :style="{ width: `${weekdayVsWeekend.weekend}%` }"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </SectionCard>
+
+    <!-- 月份活跃分布 -->
+    <SectionCard title="月份活跃分布" :show-divider="false">
+      <div class="p-5">
+        <div v-if="isLoadingMonthly" class="flex h-64 items-center justify-center">
+          <UIcon name="i-heroicons-arrow-path" class="h-6 w-6 animate-spin text-pink-500" />
+        </div>
+        <BarChart v-else :data="monthlyChartData" :height="256" />
+      </div>
+    </SectionCard>
+  </div>
+</template>
diff --git a/src/components/analysis/Overview/DailyTrendCard.vue b/src/components/analysis/Overview/DailyTrendCard.vue
new file mode 100644
index 0000000..95ded8e
--- /dev/null
+++ b/src/components/analysis/Overview/DailyTrendCard.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { SectionCard } from '@/components/UI'
+import { LineChart } from '@/components/charts'
+import type { LineChartData } from '@/components/charts'
+import type { DailyActivity } from '@/types/chat'
+
+defineProps<{
+  dailyActivity: DailyActivity[]
+  dailyChartData: LineChartData
+}>()
+</script>
+
+<template>
+  <SectionCard v-if="dailyActivity.length > 0" title="每日消息趋势" :show-divider="false">
+    <div class="p-5">
+      <LineChart :data="dailyChartData" :height="288" />
+    </div>
+  </SectionCard>
+</template>
diff --git a/src/components/analysis/Overview/OverviewIdentityCard.vue b/src/components/analysis/Overview/OverviewIdentityCard.vue
new file mode 100644
index 0000000..06c127b
--- /dev/null
+++ b/src/components/analysis/Overview/OverviewIdentityCard.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { AnalysisSession } from '@/types/chat'
+
+defineProps<{
+  session: AnalysisSession
+  totalDurationDays: number
+  totalDailyAvgMessages: number
+}>()
+</script>
+
+<template>
+  <div class="relative overflow-hidden rounded-3xl bg-pink-500 p-8 text-white shadow-xl">
+    <div class="relative">
+      <div>
+        <div class="flex items-center gap-3">
+          <h2 class="text-3xl font-black tracking-tight">{{ session.name }}</h2>
+          <span class="rounded-full bg-white/20 px-3 py-1 text-xs font-medium backdrop-blur-md">
+            {{ session.platform.toUpperCase() }}
+          </span>
+        </div>
+        <p class="mt-2 text-lg text-white/90 font-medium">
+          {{ session.memberCount > 2 ? '群聊' : '私聊' }} ·
+          <span class="opacity-80">数据分析报告</span>
+        </p>
+      </div>
+
+      <div class="mt-8 grid grid-cols-3 gap-6">
+        <div class="rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-md">
+          <p class="text-3xl font-black tracking-tight">{{ session.messageCount.toLocaleString() }}</p>
+          <p class="mt-1 text-sm font-medium text-white/70">消息总数</p>
+        </div>
+        <div class="rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-md">
+          <p class="text-3xl font-black tracking-tight">{{ totalDurationDays }}</p>
+          <p class="mt-1 text-sm font-medium text-white/70">跨度天数</p>
+        </div>
+        <div class="rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-md">
+          <p class="text-3xl font-black tracking-tight">{{ totalDailyAvgMessages }}</p>
+          <p class="mt-1 text-sm font-medium text-white/70">日均消息</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/analysis/Overview/OverviewStatCards.vue b/src/components/analysis/Overview/OverviewStatCards.vue
new file mode 100644
index 0000000..baf4c7a
--- /dev/null
+++ b/src/components/analysis/Overview/OverviewStatCards.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { StatCard } from '@/components/UI'
+import type { WeekdayActivity, DailyActivity, HourlyActivity } from '@/types/chat'
+import dayjs from 'dayjs'
+
+defineProps<{
+  dailyAvgMessages: number
+  durationDays: number
+  imageCount: number
+  peakHour: HourlyActivity | null
+  peakWeekday: WeekdayActivity | null
+  weekdayNames: string[]
+  weekdayVsWeekend: { weekday: number; weekend: number }
+  peakDay: DailyActivity | null
+  activeDays: number
+  totalDays: number
+  activeRate: number
+  maxConsecutiveDays: number
+}>()
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+    <!-- 日均消息 -->
+    <StatCard label="日均消息" :value="`${dailyAvgMessages} 条`" icon="📊" icon-bg="blue">
+      <template #subtext>
+        <span class="text-sm text-gray-500">共 {{ durationDays }} 天</span>
+      </template>
+    </StatCard>
+
+    <!-- 图片/表情 -->
+    <StatCard label="图片消息" :value="`${imageCount} 张`" icon="📸" icon-bg="pink">
+      <template #subtext>
+        <span class="text-sm text-gray-500">最活跃时段:</span>
+        <span class="font-semibold text-pink-500">{{ peakHour?.hour || 0 }}:00</span>
+      </template>
+    </StatCard>
+
+    <!-- 最活跃星期 -->
+    <StatCard
+      label="最活跃星期"
+      :value="peakWeekday ? weekdayNames[peakWeekday.weekday - 1] : '-'"
+      icon="📅"
+      icon-bg="amber"
+    >
+      <template #subtext>
+        <span class="text-sm text-gray-500">{{ peakWeekday?.messageCount ?? 0 }} 条消息</span>
+      </template>
+    </StatCard>
+
+    <!-- 周末活跃度 -->
+    <StatCard label="周末活跃度" :value="`${weekdayVsWeekend.weekend}%`" icon="🏖️" icon-bg="green">
+      <template #subtext>
+        <span class="text-sm text-gray-500">周末消息占比</span>
+      </template>
+    </StatCard>
+
+    <!-- 最活跃日期 -->
+    <StatCard label="最活跃日期" :value="peakDay ? dayjs(peakDay.date).format('MM/DD') : '-'" icon="🔥" icon-bg="red">
+      <template #subtext>
+        <span class="text-sm text-gray-500">{{ peakDay?.messageCount ?? 0 }} 条消息</span>
+      </template>
+    </StatCard>
+
+    <!-- 活跃天数 -->
+    <StatCard label="活跃天数" :value="`${activeDays}`" icon="📆" icon-bg="blue">
+      <template #subtext>
+        <span class="text-sm text-gray-500">/ {{ totalDays }} 天</span>
+      </template>
+    </StatCard>
+
+    <!-- 连续打卡 -->
+    <StatCard label="连续打卡" :value="`${maxConsecutiveDays} 天`" icon="⚡" icon-bg="amber">
+      <template #subtext>
+        <span class="text-sm text-gray-500">最长连续活跃</span>
+      </template>
+    </StatCard>
+
+    <!-- 活跃率 -->
+    <StatCard label="活跃率" :value="`${activeRate}%`" icon="📈" icon-bg="gray">
+      <template #subtext>
+        <span class="text-sm text-gray-500">有消息的天数占比</span>
+      </template>
+    </StatCard>
+  </div>
+</template>
diff --git a/src/components/analysis/OverviewTab.vue b/src/components/analysis/OverviewTab.vue
deleted file mode 100644
index 121563c..0000000
--- a/src/components/analysis/OverviewTab.vue
+++ /dev/null
@@ -1,408 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import type {
-  AnalysisSession,
-  MemberActivity,
-  HourlyActivity,
-  MessageType,
-  WeekdayActivity,
-  MonthlyActivity,
-} from '@/types/chat'
-import { getMessageTypeName } from '@/types/chat'
-import { DoughnutChart, BarChart } from '@/components/charts'
-import type { DoughnutChartData, BarChartData } from '@/components/charts'
-import { SectionCard, StatCard } from '@/components/UI'
-
-const props = defineProps<{
-  session: AnalysisSession
-  memberActivity: MemberActivity[]
-  topMembers: MemberActivity[]
-  bottomMembers: MemberActivity[]
-  messageTypes: Array<{ type: MessageType; count: number }>
-  hourlyActivity: HourlyActivity[]
-  timeRange: { start: number; end: number } | null
-  selectedYear: number | null
-  filteredMessageCount: number
-  filteredMemberCount: number
-  timeFilter?: { startTs?: number; endTs?: number }
-}>()
-
-// 时间跨度
-const durationDays = computed(() => {
-  if (props.selectedYear) {
-    const isLeapYear =
-      (props.selectedYear % 4 === 0 && props.selectedYear % 100 !== 0) || props.selectedYear % 400 === 0
-    return isLeapYear ? 366 : 365
-  }
-  if (!props.timeRange) return 0
-  return Math.ceil((props.timeRange.end - props.timeRange.start) / 86400)
-})
-
-// 显示的消息数和成员数
-const displayMessageCount = computed(() => {
-  return props.selectedYear ? props.filteredMessageCount : props.session.messageCount
-})
-
-const displayMemberCount = computed(() => {
-  return props.selectedYear ? props.filteredMemberCount : props.session.memberCount
-})
-
-// 消息类型图表数据
-const typeChartData = computed<DoughnutChartData>(() => {
-  return {
-    labels: props.messageTypes.map((t) => getMessageTypeName(t.type)),
-    values: props.messageTypes.map((t) => t.count),
-  }
-})
-
-// 成员水群分布图表数据
-const memberChartData = computed<DoughnutChartData>(() => {
-  const sortedMembers = [...props.memberActivity].sort((a, b) => b.messageCount - a.messageCount)
-  const top10 = sortedMembers.slice(0, 10)
-  const othersCount = sortedMembers.slice(10).reduce((sum, m) => sum + m.messageCount, 0)
-
-  const labels = top10.map((m) => m.name)
-  const values = top10.map((m) => m.messageCount)
-
-  if (othersCount > 0) {
-    labels.push('其他人')
-    values.push(othersCount)
-  }
-
-  return {
-    labels,
-    values,
-  }
-})
-
-// 最活跃时段
-const peakHour = computed(() => {
-  if (!props.hourlyActivity.length) return null
-  const peak = props.hourlyActivity.reduce(
-    (max, h) => (h.messageCount > max.messageCount ? h : max),
-    props.hourlyActivity[0]
-  )
-  return peak
-})
-
-// 图片消息数量
-const imageCount = computed(() => {
-  const imageType = props.messageTypes.find((t) => t.type === 1)
-  return imageType?.count || 0
-})
-
-// 日均消息数
-const dailyAvgMessages = computed(() => {
-  if (durationDays.value === 0) return 0
-  return Math.round(displayMessageCount.value / durationDays.value)
-})
-
-// 星期活跃度数据
-const weekdayActivity = ref<WeekdayActivity[]>([])
-const isLoadingWeekday = ref(false)
-
-// 月份活跃度数据
-const monthlyActivity = ref<MonthlyActivity[]>([])
-const isLoadingMonthly = ref(false)
-
-// 星期名称映射（周一开始）
-const weekdayNames = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-
-// 加载星期活跃度数据
-async function loadWeekdayActivity() {
-  if (!props.session.id) return
-  isLoadingWeekday.value = true
-  try {
-    weekdayActivity.value = await window.chatApi.getWeekdayActivity(props.session.id, props.timeFilter)
-  } catch (error) {
-    console.error('加载星期活跃度失败:', error)
-  } finally {
-    isLoadingWeekday.value = false
-  }
-}
-
-// 加载月份活跃度数据
-async function loadMonthlyActivity() {
-  if (!props.session.id) return
-  isLoadingMonthly.value = true
-  try {
-    monthlyActivity.value = await window.chatApi.getMonthlyActivity(props.session.id, props.timeFilter)
-  } catch (error) {
-    console.error('加载月份活跃度失败:', error)
-  } finally {
-    isLoadingMonthly.value = false
-  }
-}
-
-// 监听 session.id 和 timeFilter 变化
-watch(
-  () => [props.session.id, props.timeFilter],
-  () => {
-    loadWeekdayActivity()
-    loadMonthlyActivity()
-  },
-  { immediate: true, deep: true }
-)
-
-// 24小时分布图数据
-const hourlyChartData = computed<BarChartData>(() => {
-  return {
-    labels: props.hourlyActivity.map((h) => `${h.hour}:00`),
-    values: props.hourlyActivity.map((h) => h.messageCount),
-  }
-})
-
-// 星期分布图数据
-const weekdayChartData = computed<BarChartData>(() => {
-  return {
-    labels: weekdayActivity.value.map((w) => weekdayNames[w.weekday - 1]),
-    values: weekdayActivity.value.map((w) => w.messageCount),
-  }
-})
-
-// 月份分布图数据
-const monthlyChartData = computed<BarChartData>(() => {
-  return {
-    labels: monthlyActivity.value.map((m) => `${m.month}月`),
-    values: monthlyActivity.value.map((m) => m.messageCount),
-  }
-})
-
-// 最活跃星期
-const peakWeekday = computed(() => {
-  if (!weekdayActivity.value.length) return null
-  return weekdayActivity.value.reduce(
-    (max, w) => (w.messageCount > max.messageCount ? w : max),
-    weekdayActivity.value[0]
-  )
-})
-
-// 时段占比计算
-const totalMessages = computed(() => props.hourlyActivity.reduce((sum, h) => sum + h.messageCount, 0))
-
-const lateNightRatio = computed(() => {
-  const lateNight = props.hourlyActivity
-    .filter((h) => h.hour >= 0 && h.hour < 6)
-    .reduce((sum, h) => sum + h.messageCount, 0)
-  return totalMessages.value > 0 ? Math.round((lateNight / totalMessages.value) * 100) : 0
-})
-
-const morningRatio = computed(() => {
-  const morning = props.hourlyActivity
-    .filter((h) => h.hour >= 6 && h.hour < 12)
-    .reduce((sum, h) => sum + h.messageCount, 0)
-  return totalMessages.value > 0 ? Math.round((morning / totalMessages.value) * 100) : 0
-})
-
-const afternoonRatio = computed(() => {
-  const afternoon = props.hourlyActivity
-    .filter((h) => h.hour >= 12 && h.hour < 18)
-    .reduce((sum, h) => sum + h.messageCount, 0)
-  return totalMessages.value > 0 ? Math.round((afternoon / totalMessages.value) * 100) : 0
-})
-
-const eveningRatio = computed(() => {
-  const evening = props.hourlyActivity
-    .filter((h) => h.hour >= 18 && h.hour < 24)
-    .reduce((sum, h) => sum + h.messageCount, 0)
-  return totalMessages.value > 0 ? Math.round((evening / totalMessages.value) * 100) : 0
-})
-
-const weekdayVsWeekend = computed(() => {
-  if (!weekdayActivity.value.length) return { weekday: 0, weekend: 0 }
-  const weekdaySum = weekdayActivity.value
-    .filter((w) => w.weekday >= 1 && w.weekday <= 5)
-    .reduce((sum, w) => sum + w.messageCount, 0)
-  const weekendSum = weekdayActivity.value
-    .filter((w) => w.weekday >= 6 && w.weekday <= 7)
-    .reduce((sum, w) => sum + w.messageCount, 0)
-  const total = weekdaySum + weekendSum
-  return {
-    weekday: total > 0 ? Math.round((weekdaySum / total) * 100) : 0,
-    weekend: total > 0 ? Math.round((weekendSum / total) * 100) : 0,
-  }
-})
-</script>
-
-<template>
-  <div class="space-y-6 p-6">
-    <!-- 群聊身份卡 -->
-    <div class="relative overflow-hidden rounded-3xl bg-pink-500 p-8 text-white shadow-xl">
-      <div class="relative">
-        <div>
-          <div class="flex items-center gap-3">
-            <h2 class="text-3xl font-black tracking-tight">{{ session.name }}</h2>
-            <span class="rounded-full bg-white/20 px-3 py-1 text-xs font-medium backdrop-blur-md">
-              {{ session.platform.toUpperCase() }}
-            </span>
-          </div>
-          <p class="mt-2 text-lg text-white/90 font-medium">
-            {{ session.memberCount > 2 ? '群聊' : '私聊' }} ·
-            <span class="opacity-80">数据分析报告</span>
-          </p>
-        </div>
-
-        <div class="mt-8 grid grid-cols-3 gap-6">
-          <div class="rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-md">
-            <p class="text-3xl font-black tracking-tight">{{ displayMessageCount.toLocaleString() }}</p>
-            <p class="mt-1 text-sm font-medium text-white/70">{{ selectedYear ? '筛选消息' : '消息总数' }}</p>
-          </div>
-          <div class="rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-md">
-            <p class="text-3xl font-black tracking-tight">{{ displayMemberCount.toLocaleString() }}</p>
-            <p class="mt-1 text-sm font-medium text-white/70">{{ selectedYear ? '活跃成员' : '成员总数' }}</p>
-          </div>
-          <div class="rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-md">
-            <p class="text-3xl font-black tracking-tight">{{ durationDays }}</p>
-            <p class="mt-1 text-sm font-medium text-white/70">跨度天数</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 关键指标卡片 -->
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-      <!-- 日均消息 -->
-      <StatCard label="日均消息" :value="`${dailyAvgMessages} 条`" icon="📊" icon-bg="blue">
-        <template #subtext>
-          <span class="text-sm text-gray-500">共 {{ durationDays }} 天</span>
-        </template>
-      </StatCard>
-
-      <!-- 图片/表情 -->
-      <StatCard label="图片消息" :value="`${imageCount} 张`" icon="📸" icon-bg="pink">
-        <template #subtext>
-          <span class="text-sm text-gray-500">最活跃时段:</span>
-          <span class="font-semibold text-pink-500">{{ peakHour?.hour || 0 }}:00</span>
-        </template>
-      </StatCard>
-
-      <!-- 最活跃星期 -->
-      <StatCard
-        label="最活跃星期"
-        :value="peakWeekday ? weekdayNames[peakWeekday.weekday - 1] : '-'"
-        icon="📅"
-        icon-bg="amber"
-      >
-        <template #subtext>
-          <span class="text-sm text-gray-500">{{ peakWeekday?.messageCount ?? 0 }} 条消息</span>
-        </template>
-      </StatCard>
-
-      <!-- 周末活跃度 -->
-      <StatCard label="周末活跃度" :value="`${weekdayVsWeekend.weekend}%`" icon="🏖️" icon-bg="green">
-        <template #subtext>
-          <span class="text-sm text-gray-500">周末消息占比</span>
-        </template>
-      </StatCard>
-    </div>
-
-    <!-- 图表区域：消息类型 & 成员分布 -->
-    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-      <!-- 消息类型分布 -->
-      <SectionCard title="消息类型分布" :show-divider="false">
-        <div class="p-5">
-          <DoughnutChart :data="typeChartData" :height="256" />
-        </div>
-      </SectionCard>
-
-      <!-- 成员水群分布 -->
-      <SectionCard title="成员水群分布" :show-divider="false">
-        <div class="p-5">
-          <DoughnutChart :data="memberChartData" :height="256" />
-        </div>
-      </SectionCard>
-    </div>
-
-    <!-- 24小时 & 星期分布 & 月份分布 -->
-    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2 2xl:grid-cols-3">
-      <!-- 24小时分布 -->
-      <SectionCard title="24小时活跃分布" :show-divider="false">
-        <div class="p-5">
-          <BarChart
-            :data="hourlyChartData"
-            :height="256"
-            :x-label-filter="(_, index) => (index % 3 === 0 ? `${index}:00` : '')"
-          />
-
-          <div class="mt-6 grid grid-cols-4 gap-2">
-            <div class="text-center">
-              <div class="text-xs text-gray-500 dark:text-gray-400">凌晨</div>
-              <div class="mt-1 text-base font-semibold text-gray-900 dark:text-white">{{ lateNightRatio }}%</div>
-              <div class="mx-auto mt-1 h-1 w-full max-w-12 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
-                <div class="h-full rounded-full bg-pink-300 transition-all" :style="{ width: `${lateNightRatio}%` }" />
-              </div>
-            </div>
-            <div class="text-center">
-              <div class="text-xs text-gray-500 dark:text-gray-400">上午</div>
-              <div class="mt-1 text-base font-semibold text-gray-900 dark:text-white">{{ morningRatio }}%</div>
-              <div class="mx-auto mt-1 h-1 w-full max-w-12 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
-                <div class="h-full rounded-full bg-pink-400 transition-all" :style="{ width: `${morningRatio}%` }" />
-              </div>
-            </div>
-            <div class="text-center">
-              <div class="text-xs text-gray-500 dark:text-gray-400">下午</div>
-              <div class="mt-1 text-base font-semibold text-gray-900 dark:text-white">{{ afternoonRatio }}%</div>
-              <div class="mx-auto mt-1 h-1 w-full max-w-12 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
-                <div class="h-full rounded-full bg-pink-500 transition-all" :style="{ width: `${afternoonRatio}%` }" />
-              </div>
-            </div>
-            <div class="text-center">
-              <div class="text-xs text-gray-500 dark:text-gray-400">晚上</div>
-              <div class="mt-1 text-base font-semibold text-gray-900 dark:text-white">{{ eveningRatio }}%</div>
-              <div class="mx-auto mt-1 h-1 w-full max-w-12 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
-                <div class="h-full rounded-full bg-pink-600 transition-all" :style="{ width: `${eveningRatio}%` }" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </SectionCard>
-
-      <!-- 星期分布 -->
-      <SectionCard title="星期活跃分布" :show-divider="false">
-        <div class="p-5">
-          <div v-if="isLoadingWeekday" class="flex h-64 items-center justify-center">
-            <UIcon name="i-heroicons-arrow-path" class="h-6 w-6 animate-spin text-pink-500" />
-          </div>
-          <BarChart v-else :data="weekdayChartData" :height="256" />
-
-          <div class="mt-6 grid grid-cols-2 gap-4">
-            <div class="text-center">
-              <div class="text-xs text-gray-500 dark:text-gray-400">工作日</div>
-              <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
-                {{ weekdayVsWeekend.weekday }}%
-              </div>
-              <div class="mx-auto mt-2 h-1 w-full max-w-24 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
-                <div
-                  class="h-full rounded-full bg-pink-500 transition-all"
-                  :style="{ width: `${weekdayVsWeekend.weekday}%` }"
-                />
-              </div>
-            </div>
-            <div class="text-center">
-              <div class="text-xs text-gray-500 dark:text-gray-400">周末</div>
-              <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
-                {{ weekdayVsWeekend.weekend }}%
-              </div>
-              <div class="mx-auto mt-2 h-1 w-full max-w-24 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
-                <div
-                  class="h-full rounded-full bg-blue-500 transition-all"
-                  :style="{ width: `${weekdayVsWeekend.weekend}%` }"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </SectionCard>
-
-      <!-- 月份活跃分布 -->
-      <SectionCard title="月份活跃分布" :show-divider="false">
-        <div class="p-5">
-          <div v-if="isLoadingMonthly" class="flex h-64 items-center justify-center">
-            <UIcon name="i-heroicons-arrow-path" class="h-6 w-6 animate-spin text-pink-500" />
-          </div>
-          <BarChart v-else :data="monthlyChartData" :height="256" />
-        </div>
-      </SectionCard>
-    </div>
-  </div>
-</template>
diff --git a/src/components/analysis/PrivateOverviewTab.vue b/src/components/analysis/PrivateOverviewTab.vue
deleted file mode 100644
index ee7d0b9..0000000
--- a/src/components/analysis/PrivateOverviewTab.vue
+++ /dev/null
@@ -1,437 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import type { AnalysisSession, MemberActivity, HourlyActivity, MessageType, WeekdayActivity } from '@/types/chat'
-import { getMessageTypeName } from '@/types/chat'
-import { DoughnutChart, BarChart } from '@/components/charts'
-import type { DoughnutChartData, BarChartData } from '@/components/charts'
-import { SectionCard, StatCard } from '@/components/UI'
-
-const props = defineProps<{
-  session: AnalysisSession
-  memberActivity: MemberActivity[]
-  messageTypes: Array<{ type: MessageType; count: number }>
-  hourlyActivity: HourlyActivity[]
-  timeRange: { start: number; end: number } | null
-  selectedYear: number | null
-  filteredMessageCount: number
-  filteredMemberCount: number
-  timeFilter?: { startTs?: number; endTs?: number }
-}>()
-
-// 时间跨度
-const durationDays = computed(() => {
-  if (props.selectedYear) {
-    const isLeapYear =
-      (props.selectedYear % 4 === 0 && props.selectedYear % 100 !== 0) || props.selectedYear % 400 === 0
-    return isLeapYear ? 366 : 365
-  }
-  if (!props.timeRange) return 0
-  return Math.ceil((props.timeRange.end - props.timeRange.start) / 86400)
-})
-
-// 显示的消息数
-const displayMessageCount = computed(() => {
-  return props.selectedYear ? props.filteredMessageCount : props.session.messageCount
-})
-
-// 消息类型图表数据
-const typeChartData = computed<DoughnutChartData>(() => {
-  return {
-    labels: props.messageTypes.map((t) => getMessageTypeName(t.type)),
-    values: props.messageTypes.map((t) => t.count),
-  }
-})
-
-// 双方消息对比数据
-const memberComparisonData = computed(() => {
-  if (props.memberActivity.length !== 2) return null
-
-  const sorted = [...props.memberActivity].sort((a, b) => b.messageCount - a.messageCount)
-  const total = sorted[0].messageCount + sorted[1].messageCount
-
-  return {
-    member1: {
-      name: sorted[0].name,
-      count: sorted[0].messageCount,
-      percentage: total > 0 ? Math.round((sorted[0].messageCount / total) * 100) : 0,
-    },
-    member2: {
-      name: sorted[1].name,
-      count: sorted[1].messageCount,
-      percentage: total > 0 ? Math.round((sorted[1].messageCount / total) * 100) : 0,
-    },
-    total,
-  }
-})
-
-// 双方对比图表数据
-const comparisonChartData = computed<DoughnutChartData>(() => {
-  if (!memberComparisonData.value) {
-    return { labels: [], values: [] }
-  }
-  return {
-    labels: [memberComparisonData.value.member1.name, memberComparisonData.value.member2.name],
-    values: [memberComparisonData.value.member1.count, memberComparisonData.value.member2.count],
-  }
-})
-
-// 最活跃时段
-const peakHour = computed(() => {
-  if (!props.hourlyActivity.length) return null
-  const peak = props.hourlyActivity.reduce(
-    (max, h) => (h.messageCount > max.messageCount ? h : max),
-    props.hourlyActivity[0]
-  )
-  return peak
-})
-
-// 图片消息数量
-const imageCount = computed(() => {
-  const imageType = props.messageTypes.find((t) => t.type === 1)
-  return imageType?.count || 0
-})
-
-// 日均消息数
-const dailyAvgMessages = computed(() => {
-  if (durationDays.value === 0) return 0
-  return Math.round(displayMessageCount.value / durationDays.value)
-})
-
-// 星期活跃度数据
-const weekdayActivity = ref<WeekdayActivity[]>([])
-const isLoadingWeekday = ref(false)
-
-// 星期名称映射（周一开始）
-const weekdayNames = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-
-// 加载星期活跃度数据
-async function loadWeekdayActivity() {
-  if (!props.session.id) return
-  isLoadingWeekday.value = true
-  try {
-    weekdayActivity.value = await window.chatApi.getWeekdayActivity(props.session.id, props.timeFilter)
-  } catch (error) {
-    console.error('加载星期活跃度失败:', error)
-  } finally {
-    isLoadingWeekday.value = false
-  }
-}
-
-// 监听 session.id 和 timeFilter 变化
-watch(
-  () => [props.session.id, props.timeFilter],
-  () => {
-    loadWeekdayActivity()
-  },
-  { immediate: true, deep: true }
-)
-
-// 24小时分布图数据
-const hourlyChartData = computed<BarChartData>(() => {
-  return {
-    labels: props.hourlyActivity.map((h) => `${h.hour}:00`),
-    values: props.hourlyActivity.map((h) => h.messageCount),
-  }
-})
-
-// 星期分布图数据
-const weekdayChartData = computed<BarChartData>(() => {
-  return {
-    labels: weekdayActivity.value.map((w) => weekdayNames[w.weekday - 1]),
-    values: weekdayActivity.value.map((w) => w.messageCount),
-  }
-})
-
-// 最活跃星期
-const peakWeekday = computed(() => {
-  if (!weekdayActivity.value.length) return null
-  return weekdayActivity.value.reduce(
-    (max, w) => (w.messageCount > max.messageCount ? w : max),
-    weekdayActivity.value[0]
-  )
-})
-
-// 时段占比计算
-const totalMessages = computed(() => props.hourlyActivity.reduce((sum, h) => sum + h.messageCount, 0))
-
-const lateNightRatio = computed(() => {
-  const lateNight = props.hourlyActivity
-    .filter((h) => h.hour >= 0 && h.hour < 6)
-    .reduce((sum, h) => sum + h.messageCount, 0)
-  return totalMessages.value > 0 ? Math.round((lateNight / totalMessages.value) * 100) : 0
-})
-
-const morningRatio = computed(() => {
-  const morning = props.hourlyActivity
-    .filter((h) => h.hour >= 6 && h.hour < 12)
-    .reduce((sum, h) => sum + h.messageCount, 0)
-  return totalMessages.value > 0 ? Math.round((morning / totalMessages.value) * 100) : 0
-})
-
-const afternoonRatio = computed(() => {
-  const afternoon = props.hourlyActivity
-    .filter((h) => h.hour >= 12 && h.hour < 18)
-    .reduce((sum, h) => sum + h.messageCount, 0)
-  return totalMessages.value > 0 ? Math.round((afternoon / totalMessages.value) * 100) : 0
-})
-
-const eveningRatio = computed(() => {
-  const evening = props.hourlyActivity
-    .filter((h) => h.hour >= 18 && h.hour < 24)
-    .reduce((sum, h) => sum + h.messageCount, 0)
-  return totalMessages.value > 0 ? Math.round((evening / totalMessages.value) * 100) : 0
-})
-
-const weekdayVsWeekend = computed(() => {
-  if (!weekdayActivity.value.length) return { weekday: 0, weekend: 0 }
-  const weekdaySum = weekdayActivity.value
-    .filter((w) => w.weekday >= 1 && w.weekday <= 5)
-    .reduce((sum, w) => sum + w.messageCount, 0)
-  const weekendSum = weekdayActivity.value
-    .filter((w) => w.weekday >= 6 && w.weekday <= 7)
-    .reduce((sum, w) => sum + w.messageCount, 0)
-  const total = weekdaySum + weekendSum
-  return {
-    weekday: total > 0 ? Math.round((weekdaySum / total) * 100) : 0,
-    weekend: total > 0 ? Math.round((weekendSum / total) * 100) : 0,
-  }
-})
-</script>
-
-<template>
-  <div class="space-y-6 p-6">
-    <!-- 私聊身份卡 -->
-    <div class="relative overflow-hidden rounded-3xl bg-pink-500 p-8 text-white shadow-xl">
-      <div class="relative">
-        <div>
-          <div class="flex items-center gap-3">
-            <h2 class="text-3xl font-black tracking-tight">{{ session.name }}</h2>
-            <span class="rounded-full bg-white/20 px-3 py-1 text-xs font-medium backdrop-blur-md">
-              {{ session.platform.toUpperCase() }}
-            </span>
-          </div>
-          <p class="mt-2 text-lg text-white/90 font-medium">
-            私聊 ·
-            <span class="opacity-80">数据分析报告</span>
-          </p>
-        </div>
-
-        <div class="mt-8 grid grid-cols-3 gap-6">
-          <div class="rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-md">
-            <p class="text-3xl font-black tracking-tight">{{ displayMessageCount.toLocaleString() }}</p>
-            <p class="mt-1 text-sm font-medium text-white/70">{{ selectedYear ? '筛选消息' : '消息总数' }}</p>
-          </div>
-          <div class="rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-md">
-            <p class="text-3xl font-black tracking-tight">{{ durationDays }}</p>
-            <p class="mt-1 text-sm font-medium text-white/70">跨度天数</p>
-          </div>
-          <div class="rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-md">
-            <p class="text-3xl font-black tracking-tight">{{ dailyAvgMessages }}</p>
-            <p class="mt-1 text-sm font-medium text-white/70">日均消息</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 双方消息对比 -->
-    <SectionCard v-if="memberComparisonData" title="消息占比" :show-divider="false">
-      <div class="p-5">
-        <div class="flex items-center gap-8">
-          <!-- 左侧成员 -->
-          <div class="flex-1 text-center">
-            <div
-              class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-pink-100 dark:bg-pink-900/30"
-            >
-              <span class="text-2xl font-bold text-pink-600 dark:text-pink-400">
-                {{ memberComparisonData.member1.name.charAt(0) }}
-              </span>
-            </div>
-            <p class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
-              {{ memberComparisonData.member1.name }}
-            </p>
-            <p class="text-2xl font-black text-pink-600 dark:text-pink-400">
-              {{ memberComparisonData.member1.percentage }}%
-            </p>
-            <p class="text-sm text-gray-500 dark:text-gray-400">
-              {{ memberComparisonData.member1.count.toLocaleString() }} 条
-            </p>
-          </div>
-
-          <!-- 中间对比条 -->
-          <div class="flex-1">
-            <div class="relative h-8 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
-              <div
-                class="absolute left-0 top-0 h-full rounded-l-full bg-pink-500 transition-all"
-                :style="{ width: `${memberComparisonData.member1.percentage}%` }"
-              />
-              <div
-                class="absolute right-0 top-0 h-full rounded-r-full bg-blue-500 transition-all"
-                :style="{ width: `${memberComparisonData.member2.percentage}%` }"
-              />
-            </div>
-            <div class="mt-2 flex justify-between text-xs text-gray-500">
-              <span>{{ memberComparisonData.member1.percentage }}%</span>
-              <span>{{ memberComparisonData.member2.percentage }}%</span>
-            </div>
-          </div>
-
-          <!-- 右侧成员 -->
-          <div class="flex-1 text-center">
-            <div
-              class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30"
-            >
-              <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">
-                {{ memberComparisonData.member2.name.charAt(0) }}
-              </span>
-            </div>
-            <p class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
-              {{ memberComparisonData.member2.name }}
-            </p>
-            <p class="text-2xl font-black text-blue-600 dark:text-blue-400">
-              {{ memberComparisonData.member2.percentage }}%
-            </p>
-            <p class="text-sm text-gray-500 dark:text-gray-400">
-              {{ memberComparisonData.member2.count.toLocaleString() }} 条
-            </p>
-          </div>
-        </div>
-      </div>
-    </SectionCard>
-
-    <!-- 关键指标卡片 -->
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-      <!-- 日均消息 -->
-      <StatCard label="日均消息" :value="`${dailyAvgMessages} 条`" icon="📊" icon-bg="blue">
-        <template #subtext>
-          <span class="text-sm text-gray-500">共 {{ durationDays }} 天</span>
-        </template>
-      </StatCard>
-
-      <!-- 图片/表情 -->
-      <StatCard label="图片消息" :value="`${imageCount} 张`" icon="📸" icon-bg="pink">
-        <template #subtext>
-          <span class="text-sm text-gray-500">最活跃时段:</span>
-          <span class="font-semibold text-pink-500">{{ peakHour?.hour || 0 }}:00</span>
-        </template>
-      </StatCard>
-
-      <!-- 最活跃星期 -->
-      <StatCard
-        label="最活跃星期"
-        :value="peakWeekday ? weekdayNames[peakWeekday.weekday - 1] : '-'"
-        icon="📅"
-        icon-bg="amber"
-      >
-        <template #subtext>
-          <span class="text-sm text-gray-500">{{ peakWeekday?.messageCount ?? 0 }} 条消息</span>
-        </template>
-      </StatCard>
-
-      <!-- 周末活跃度 -->
-      <StatCard label="周末活跃度" :value="`${weekdayVsWeekend.weekend}%`" icon="🏖️" icon-bg="green">
-        <template #subtext>
-          <span class="text-sm text-gray-500">周末消息占比</span>
-        </template>
-      </StatCard>
-    </div>
-
-    <!-- 图表区域：消息类型 & 双方占比 -->
-    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-      <!-- 消息类型分布 -->
-      <SectionCard title="消息类型分布" :show-divider="false">
-        <div class="p-5">
-          <DoughnutChart :data="typeChartData" :height="256" />
-        </div>
-      </SectionCard>
-
-      <!-- 双方消息占比饼图 -->
-      <SectionCard v-if="memberComparisonData" title="双方消息占比" :show-divider="false">
-        <div class="p-5">
-          <DoughnutChart :data="comparisonChartData" :height="256" />
-        </div>
-      </SectionCard>
-    </div>
-
-    <!-- 24小时 & 星期分布 -->
-    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-      <!-- 24小时分布 -->
-      <SectionCard title="24小时活跃分布" :show-divider="false">
-        <div class="p-5">
-          <BarChart
-            :data="hourlyChartData"
-            :height="256"
-            :x-label-filter="(_, index) => (index % 3 === 0 ? `${index}:00` : '')"
-          />
-
-          <div class="mt-6 grid grid-cols-4 gap-2">
-            <div class="text-center">
-              <div class="text-xs text-gray-500 dark:text-gray-400">凌晨</div>
-              <div class="mt-1 text-base font-semibold text-gray-900 dark:text-white">{{ lateNightRatio }}%</div>
-              <div class="mx-auto mt-1 h-1 w-full max-w-12 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
-                <div class="h-full rounded-full bg-pink-300 transition-all" :style="{ width: `${lateNightRatio}%` }" />
-              </div>
-            </div>
-            <div class="text-center">
-              <div class="text-xs text-gray-500 dark:text-gray-400">上午</div>
-              <div class="mt-1 text-base font-semibold text-gray-900 dark:text-white">{{ morningRatio }}%</div>
-              <div class="mx-auto mt-1 h-1 w-full max-w-12 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
-                <div class="h-full rounded-full bg-pink-400 transition-all" :style="{ width: `${morningRatio}%` }" />
-              </div>
-            </div>
-            <div class="text-center">
-              <div class="text-xs text-gray-500 dark:text-gray-400">下午</div>
-              <div class="mt-1 text-base font-semibold text-gray-900 dark:text-white">{{ afternoonRatio }}%</div>
-              <div class="mx-auto mt-1 h-1 w-full max-w-12 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
-                <div class="h-full rounded-full bg-pink-500 transition-all" :style="{ width: `${afternoonRatio}%` }" />
-              </div>
-            </div>
-            <div class="text-center">
-              <div class="text-xs text-gray-500 dark:text-gray-400">晚上</div>
-              <div class="mt-1 text-base font-semibold text-gray-900 dark:text-white">{{ eveningRatio }}%</div>
-              <div class="mx-auto mt-1 h-1 w-full max-w-12 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
-                <div class="h-full rounded-full bg-pink-600 transition-all" :style="{ width: `${eveningRatio}%` }" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </SectionCard>
-
-      <!-- 星期分布 -->
-      <SectionCard title="星期活跃分布" :show-divider="false">
-        <div class="p-5">
-          <div v-if="isLoadingWeekday" class="flex h-64 items-center justify-center">
-            <UIcon name="i-heroicons-arrow-path" class="h-6 w-6 animate-spin text-pink-500" />
-          </div>
-          <BarChart v-else :data="weekdayChartData" :height="256" />
-
-          <div class="mt-6 grid grid-cols-2 gap-4">
-            <div class="text-center">
-              <div class="text-xs text-gray-500 dark:text-gray-400">工作日</div>
-              <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
-                {{ weekdayVsWeekend.weekday }}%
-              </div>
-              <div class="mx-auto mt-2 h-1 w-full max-w-24 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
-                <div
-                  class="h-full rounded-full bg-pink-500 transition-all"
-                  :style="{ width: `${weekdayVsWeekend.weekday}%` }"
-                />
-              </div>
-            </div>
-            <div class="text-center">
-              <div class="text-xs text-gray-500 dark:text-gray-400">周末</div>
-              <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
-                {{ weekdayVsWeekend.weekend }}%
-              </div>
-              <div class="mx-auto mt-2 h-1 w-full max-w-24 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
-                <div
-                  class="h-full rounded-full bg-blue-500 transition-all"
-                  :style="{ width: `${weekdayVsWeekend.weekend}%` }"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </SectionCard>
-    </div>
-  </div>
-</template>
diff --git a/src/components/analysis/PrivateTimelineTab.vue b/src/components/analysis/PrivateTimelineTab.vue
deleted file mode 100644
index db75604..0000000
--- a/src/components/analysis/PrivateTimelineTab.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import type { DailyActivity, MemberActivity, MemberNameHistory } from '@/types/chat'
-import dayjs from 'dayjs'
-import { LineChart } from '@/components/charts'
-import type { LineChartData } from '@/components/charts'
-import { SectionCard, StatCard, EmptyState, LoadingState } from '@/components/UI'
-import { formatPeriod } from '@/utils'
-
-interface TimeFilter {
-  startTs?: number
-  endTs?: number
-}
-
-const props = defineProps<{
-  sessionId: string
-  dailyActivity: DailyActivity[]
-  memberActivity: MemberActivity[]
-  timeRange: { start: number; end: number } | null
-  timeFilter?: TimeFilter
-}>()
-
-// 检测是否跨年
-const isMultiYear = computed(() => {
-  if (props.dailyActivity.length < 2) return false
-  const years = new Set(props.dailyActivity.map((d) => dayjs(d.date).year()))
-  return years.size > 1
-})
-
-// 每日趋势图数据（动态聚合）
-const dailyChartData = computed<LineChartData>(() => {
-  const rawData = props.dailyActivity
-  const maxPoints = 50 // 最大展示点数
-
-  if (rawData.length <= maxPoints) {
-    const dateFormat = isMultiYear.value ? 'YYYY/MM/DD' : 'MM/DD'
-    return {
-      labels: rawData.map((d) => dayjs(d.date).format(dateFormat)),
-      values: rawData.map((d) => d.messageCount),
-    }
-  }
-
-  // 需要聚合
-  const groupSize = Math.ceil(rawData.length / maxPoints)
-  const aggregatedLabels: string[] = []
-  const aggregatedValues: number[] = []
-
-  for (let i = 0; i < rawData.length; i += groupSize) {
-    const chunk = rawData.slice(i, i + groupSize)
-    if (chunk.length === 0) continue
-
-    // 计算该组的平均日期作为标签
-    const midIndex = Math.floor(chunk.length / 2)
-    const midDate = chunk[midIndex].date
-    const dateFormat = isMultiYear.value ? 'YYYY/MM/DD' : 'MM/DD'
-    aggregatedLabels.push(dayjs(midDate).format(dateFormat))
-
-    // 计算该组的日均消息数
-    const totalMessages = chunk.reduce((sum, d) => sum + d.messageCount, 0)
-    const avgMessages = Math.round(totalMessages / chunk.length)
-    aggregatedValues.push(avgMessages)
-  }
-
-  return {
-    labels: aggregatedLabels,
-    values: aggregatedValues,
-  }
-})
-
-// 最活跃的一天
-const peakDay = computed(() => {
-  if (!props.dailyActivity.length) return null
-  return props.dailyActivity.reduce((max, d) => (d.messageCount > max.messageCount ? d : max), props.dailyActivity[0])
-})
-
-// 平均每日消息数
-const avgDailyMessages = computed(() => {
-  if (!props.dailyActivity.length) return 0
-  const total = props.dailyActivity.reduce((sum, d) => sum + d.messageCount, 0)
-  return Math.round(total / props.dailyActivity.length)
-})
-
-// 活跃天数
-const activeDays = computed(() => {
-  return props.dailyActivity.filter((d) => d.messageCount > 0).length
-})
-
-// 总天数
-const totalDays = computed(() => {
-  if (!props.timeRange) return 0
-  const start = dayjs.unix(props.timeRange.start)
-  const end = dayjs.unix(props.timeRange.end)
-  return end.diff(start, 'day') + 1
-})
-
-// 活跃率
-const activeRate = computed(() => {
-  return totalDays.value > 0 ? Math.round((activeDays.value / totalDays.value) * 100) : 0
-})
-
-// ==================== 昵称变更记录 ====================
-interface MemberWithHistory {
-  memberId: number
-  name: string
-  history: MemberNameHistory[]
-}
-
-const membersWithNicknameChanges = ref<MemberWithHistory[]>([])
-const isLoadingHistory = ref(false)
-
-async function loadMembersWithNicknameChanges() {
-  if (!props.sessionId || props.memberActivity.length === 0) return
-
-  isLoadingHistory.value = true
-  const membersWithChanges: MemberWithHistory[] = []
-
-  try {
-    const historyPromises = props.memberActivity.map((member) =>
-      window.chatApi.getMemberNameHistory(props.sessionId, member.memberId)
-    )
-
-    const allHistories = await Promise.all(historyPromises)
-
-    props.memberActivity.forEach((member, index) => {
-      const history = allHistories[index]
-      if (history.length > 1) {
-        membersWithChanges.push({
-          memberId: member.memberId,
-          name: member.name,
-          history,
-        })
-      }
-    })
-
-    membersWithNicknameChanges.value = membersWithChanges
-  } catch (error) {
-    console.error('加载昵称变更记录失败:', error)
-  } finally {
-    isLoadingHistory.value = false
-  }
-}
-
-watch(
-  () => [props.sessionId, props.memberActivity.length],
-  () => {
-    loadMembersWithNicknameChanges()
-  },
-  { immediate: true }
-)
-</script>
-
-<template>
-  <div class="space-y-6 p-6">
-    <!-- 标题 -->
-    <div>
-      <h2 class="text-xl font-bold text-gray-900 dark:text-white">时间轴分析</h2>
-      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">追踪私聊的活跃趋势变化</p>
-    </div>
-
-    <!-- 统计卡片 -->
-    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
-      <StatCard
-        label="最活跃日期"
-        :value="peakDay ? dayjs(peakDay.date).format('MM/DD') : '-'"
-        :subtext="`${peakDay?.messageCount ?? 0} 条消息`"
-      />
-      <StatCard label="日均消息" :value="avgDailyMessages" subtext="条/天" />
-      <StatCard label="活跃天数" :value="activeDays" :subtext="`/ ${totalDays} 天`" />
-      <StatCard label="活跃率" :value="`${activeRate}%`" subtext="有消息的天数占比" />
-    </div>
-
-    <!-- 每日趋势 -->
-    <SectionCard title="每日消息趋势" :show-divider="false">
-      <div class="p-5">
-        <LineChart :data="dailyChartData" :height="288" />
-      </div>
-    </SectionCard>
-
-    <!-- 昵称变更记录 -->
-    <SectionCard
-      title="昵称变更记录"
-      :description="
-        isLoadingHistory
-          ? '加载中...'
-          : membersWithNicknameChanges.length > 0
-            ? `${membersWithNicknameChanges.length} 位成员曾修改过昵称`
-            : '暂无成员修改昵称'
-      "
-    >
-      <div
-        v-if="!isLoadingHistory && membersWithNicknameChanges.length > 0"
-        class="divide-y divide-gray-100 dark:divide-gray-800"
-      >
-        <div
-          v-for="member in membersWithNicknameChanges"
-          :key="member.memberId"
-          class="flex items-start gap-3 px-5 py-3"
-        >
-          <div class="w-32 shrink-0 pt-0.5 font-medium text-gray-900 dark:text-white">
-            {{ member.name }}
-          </div>
-
-          <div class="flex flex-1 flex-wrap items-center gap-2">
-            <template v-for="(item, index) in member.history" :key="index">
-              <div class="flex items-center gap-1.5 rounded-lg bg-gray-50 px-3 py-1.5 dark:bg-gray-800">
-                <span
-                  class="text-sm"
-                  :class="item.endTs === null ? 'font-semibold text-pink-600' : 'text-gray-700 dark:text-gray-300'"
-                >
-                  {{ item.name }}
-                </span>
-                <UBadge v-if="item.endTs === null" color="primary" variant="soft" size="xs">当前</UBadge>
-                <span class="text-xs text-gray-400">({{ formatPeriod(item.startTs, item.endTs) }})</span>
-              </div>
-
-              <span v-if="index < member.history.length - 1" class="text-gray-300 dark:text-gray-600">→</span>
-            </template>
-          </div>
-        </div>
-      </div>
-
-      <EmptyState v-else-if="!isLoadingHistory" text="双方均未修改过昵称" />
-
-      <LoadingState v-else text="正在加载昵称变更记录..." />
-    </SectionCard>
-  </div>
-</template>
diff --git a/src/components/analysis/sql/AIGenerateModal.vue b/src/components/analysis/SQLLab/AIGenerateModal.vue
similarity index 100%
rename from src/components/analysis/sql/AIGenerateModal.vue
rename to src/components/analysis/SQLLab/AIGenerateModal.vue
diff --git a/src/components/analysis/sql/AIHistoryModal.vue b/src/components/analysis/SQLLab/AIHistoryModal.vue
similarity index 100%
rename from src/components/analysis/sql/AIHistoryModal.vue
rename to src/components/analysis/SQLLab/AIHistoryModal.vue
diff --git a/src/components/analysis/sql/ResultTable.vue b/src/components/analysis/SQLLab/ResultTable.vue
similarity index 100%
rename from src/components/analysis/sql/ResultTable.vue
rename to src/components/analysis/SQLLab/ResultTable.vue
diff --git a/src/components/analysis/sql/SchemaPanel.vue b/src/components/analysis/SQLLab/SchemaPanel.vue
similarity index 100%
rename from src/components/analysis/sql/SchemaPanel.vue
rename to src/components/analysis/SQLLab/SchemaPanel.vue
diff --git a/src/components/analysis/sql/index.ts b/src/components/analysis/SQLLab/index.ts
similarity index 100%
rename from src/components/analysis/sql/index.ts
rename to src/components/analysis/SQLLab/index.ts
diff --git a/src/components/analysis/sql/types.ts b/src/components/analysis/SQLLab/types.ts
similarity index 100%
rename from src/components/analysis/sql/types.ts
rename to src/components/analysis/SQLLab/types.ts
diff --git a/src/components/analysis/SQLLabTab.vue b/src/components/analysis/SQLLabTab.vue
index 7b7d902..36c8db8 100644
--- a/src/components/analysis/SQLLabTab.vue
+++ b/src/components/analysis/SQLLabTab.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { SchemaPanel, AIGenerateModal, AIHistoryModal, ResultTable } from './sql'
-import type { AIHistory, SQLResult, TableSchema } from './sql'
+import { SchemaPanel, AIGenerateModal, AIHistoryModal, ResultTable } from './SQLLab'
+import type { AIHistory, SQLResult, TableSchema } from './SQLLab'
 
 // Props
 const props = defineProps<{
@@ -156,35 +156,37 @@ onMounted(() => {
     <div class="flex flex-1 flex-col overflow-hidden">
       <!-- SQL 编辑器区域 -->
       <div class="flex flex-col border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-950">
-        <!-- 编辑器 -->
-        <textarea
-          v-model="sql"
-          class="h-32 w-full resize-none rounded-lg border border-gray-300 bg-white p-3 font-mono text-sm text-gray-800 focus:border-pink-500 focus:outline-none focus:ring-1 focus:ring-pink-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
-          placeholder="输入 SQL 查询语句..."
-          spellcheck="false"
-          @keydown="handleKeyDown"
-        />
+        <div class="mx-auto w-full max-w-3xl">
+          <!-- 编辑器 -->
+          <textarea
+            v-model="sql"
+            class="h-32 w-full resize-none rounded-lg border border-gray-300 bg-white p-3 font-mono text-sm text-gray-800 focus:border-pink-500 focus:outline-none focus:ring-1 focus:ring-pink-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
+            placeholder="输入 SQL 查询语句..."
+            spellcheck="false"
+            @keydown="handleKeyDown"
+          />
 
-        <!-- 工具栏 -->
-        <div class="mt-3 flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <span class="text-xs text-gray-400">提示：双击左侧列名可插入到 SQL</span>
-          </div>
-          <div class="flex items-center gap-2">
-            <UButton variant="ghost" size="sm" :disabled="aiHistory.length === 0" @click="showHistoryModal = true">
-              <UIcon name="i-heroicons-clock" class="mr-1 h-4 w-4" />
-              历史
-              <span v-if="aiHistory.length > 0" class="ml-1 text-xs text-gray-400">({{ aiHistory.length }})</span>
-            </UButton>
-            <UButton variant="outline" size="sm" @click="showAIModal = true">
-              <UIcon name="i-heroicons-sparkles" class="mr-1 h-4 w-4" />
-              AI 生成
-            </UButton>
-            <span class="text-xs text-gray-400">Ctrl/⌘ + Enter 执行</span>
-            <UButton color="primary" size="sm" :loading="isExecuting" @click="executeSQL">
-              <UIcon name="i-heroicons-play" class="mr-1 h-4 w-4" />
-              运行
-            </UButton>
+          <!-- 工具栏 -->
+          <div class="mt-3 flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <span class="text-xs text-gray-400">提示：双击左侧列名可插入到 SQL</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <UButton variant="ghost" size="sm" :disabled="aiHistory.length === 0" @click="showHistoryModal = true">
+                <UIcon name="i-heroicons-clock" class="mr-1 h-4 w-4" />
+                历史
+                <span v-if="aiHistory.length > 0" class="ml-1 text-xs text-gray-400">({{ aiHistory.length }})</span>
+              </UButton>
+              <UButton variant="outline" size="sm" @click="showAIModal = true">
+                <UIcon name="i-heroicons-sparkles" class="mr-1 h-4 w-4" />
+                AI 生成
+              </UButton>
+              <span class="text-xs text-gray-400">Ctrl/⌘ + Enter 执行</span>
+              <UButton color="primary" size="sm" :loading="isExecuting" @click="executeSQL">
+                <UIcon name="i-heroicons-play" class="mr-1 h-4 w-4" />
+                运行
+              </UButton>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/analysis/TimelineTab.vue b/src/components/analysis/TimelineTab.vue
deleted file mode 100644
index 1aae36a..0000000
--- a/src/components/analysis/TimelineTab.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import type { DailyActivity, MemberActivity, MemberNameHistory } from '@/types/chat'
-import dayjs from 'dayjs'
-import { LineChart } from '@/components/charts'
-import type { LineChartData } from '@/components/charts'
-import { SectionCard, StatCard, EmptyState, LoadingState } from '@/components/UI'
-import { formatPeriod } from '@/utils'
-
-interface TimeFilter {
-  startTs?: number
-  endTs?: number
-}
-
-const props = defineProps<{
-  sessionId: string
-  dailyActivity: DailyActivity[]
-  memberActivity: MemberActivity[]
-  timeRange: { start: number; end: number } | null
-  timeFilter?: TimeFilter
-}>()
-
-// 检测是否跨年
-const isMultiYear = computed(() => {
-  if (props.dailyActivity.length < 2) return false
-  const years = new Set(props.dailyActivity.map((d) => dayjs(d.date).year()))
-  return years.size > 1
-})
-
-// 每日趋势图数据（动态聚合）
-const dailyChartData = computed<LineChartData>(() => {
-  const rawData = props.dailyActivity
-  const maxPoints = 50 // 最大展示点数
-
-  if (rawData.length <= maxPoints) {
-    const dateFormat = isMultiYear.value ? 'YYYY/MM/DD' : 'MM/DD'
-    return {
-      labels: rawData.map((d) => dayjs(d.date).format(dateFormat)),
-      values: rawData.map((d) => d.messageCount),
-    }
-  }
-
-  // 需要聚合
-  const groupSize = Math.ceil(rawData.length / maxPoints)
-  const aggregatedLabels: string[] = []
-  const aggregatedValues: number[] = []
-
-  for (let i = 0; i < rawData.length; i += groupSize) {
-    const chunk = rawData.slice(i, i + groupSize)
-    if (chunk.length === 0) continue
-
-    // 计算该组的平均日期作为标签
-    const midIndex = Math.floor(chunk.length / 2)
-    const midDate = chunk[midIndex].date
-    const dateFormat = isMultiYear.value ? 'YYYY/MM/DD' : 'MM/DD'
-    aggregatedLabels.push(dayjs(midDate).format(dateFormat))
-
-    // 计算该组的日均消息数
-    const totalMessages = chunk.reduce((sum, d) => sum + d.messageCount, 0)
-    const avgMessages = Math.round(totalMessages / chunk.length)
-    aggregatedValues.push(avgMessages)
-  }
-
-  return {
-    labels: aggregatedLabels,
-    values: aggregatedValues,
-  }
-})
-
-// 最活跃的一天
-const peakDay = computed(() => {
-  if (!props.dailyActivity.length) return null
-  return props.dailyActivity.reduce((max, d) => (d.messageCount > max.messageCount ? d : max), props.dailyActivity[0])
-})
-
-// 平均每日消息数
-const avgDailyMessages = computed(() => {
-  if (!props.dailyActivity.length) return 0
-  const total = props.dailyActivity.reduce((sum, d) => sum + d.messageCount, 0)
-  return Math.round(total / props.dailyActivity.length)
-})
-
-// 活跃天数
-const activeDays = computed(() => {
-  return props.dailyActivity.filter((d) => d.messageCount > 0).length
-})
-
-// 总天数
-const totalDays = computed(() => {
-  if (!props.timeRange) return 0
-  const start = dayjs.unix(props.timeRange.start)
-  const end = dayjs.unix(props.timeRange.end)
-  return end.diff(start, 'day') + 1
-})
-
-// 活跃率
-const activeRate = computed(() => {
-  return totalDays.value > 0 ? Math.round((activeDays.value / totalDays.value) * 100) : 0
-})
-
-// ==================== 昵称变更记录 ====================
-interface MemberWithHistory {
-  memberId: number
-  name: string
-  history: MemberNameHistory[]
-}
-
-const membersWithNicknameChanges = ref<MemberWithHistory[]>([])
-const isLoadingHistory = ref(false)
-
-async function loadMembersWithNicknameChanges() {
-  if (!props.sessionId || props.memberActivity.length === 0) return
-
-  isLoadingHistory.value = true
-  const membersWithChanges: MemberWithHistory[] = []
-
-  try {
-    const historyPromises = props.memberActivity.map((member) =>
-      window.chatApi.getMemberNameHistory(props.sessionId, member.memberId)
-    )
-
-    const allHistories = await Promise.all(historyPromises)
-
-    props.memberActivity.forEach((member, index) => {
-      const history = allHistories[index]
-      if (history.length > 1) {
-        membersWithChanges.push({
-          memberId: member.memberId,
-          name: member.name,
-          history,
-        })
-      }
-    })
-
-    membersWithNicknameChanges.value = membersWithChanges
-  } catch (error) {
-    console.error('加载昵称变更记录失败:', error)
-  } finally {
-    isLoadingHistory.value = false
-  }
-}
-
-watch(
-  () => [props.sessionId, props.memberActivity.length],
-  () => {
-    loadMembersWithNicknameChanges()
-  },
-  { immediate: true }
-)
-</script>
-
-<template>
-  <div class="space-y-6 p-6">
-    <!-- 标题 -->
-    <div>
-      <h2 class="text-xl font-bold text-gray-900 dark:text-white">时间轴分析</h2>
-      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">追踪群聊的活跃趋势变化</p>
-    </div>
-
-    <!-- 统计卡片 -->
-    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
-      <StatCard
-        label="最活跃日期"
-        :value="peakDay ? dayjs(peakDay.date).format('MM/DD') : '-'"
-        :subtext="`${peakDay?.messageCount ?? 0} 条消息`"
-      />
-      <StatCard label="日均消息" :value="avgDailyMessages" subtext="条/天" />
-      <StatCard label="活跃天数" :value="activeDays" :subtext="`/ ${totalDays} 天`" />
-      <StatCard label="活跃率" :value="`${activeRate}%`" subtext="有消息的天数占比" />
-    </div>
-
-    <!-- 每日趋势 -->
-    <SectionCard title="每日消息趋势" :show-divider="false">
-      <div class="p-5">
-        <LineChart :data="dailyChartData" :height="288" />
-      </div>
-    </SectionCard>
-
-    <!-- 昵称变更记录 -->
-    <SectionCard
-      title="昵称变更记录"
-      :description="
-        isLoadingHistory
-          ? '加载中...'
-          : membersWithNicknameChanges.length > 0
-            ? `${membersWithNicknameChanges.length} 位成员曾修改过昵称`
-            : '暂无成员修改昵称'
-      "
-    >
-      <div
-        v-if="!isLoadingHistory && membersWithNicknameChanges.length > 0"
-        class="divide-y divide-gray-100 dark:divide-gray-800"
-      >
-        <div
-          v-for="member in membersWithNicknameChanges"
-          :key="member.memberId"
-          class="flex items-start gap-3 px-5 py-3"
-        >
-          <div class="w-32 shrink-0 pt-0.5 font-medium text-gray-900 dark:text-white">
-            {{ member.name }}
-          </div>
-
-          <div class="flex flex-1 flex-wrap items-center gap-2">
-            <template v-for="(item, index) in member.history" :key="index">
-              <div class="flex items-center gap-1.5 rounded-lg bg-gray-50 px-3 py-1.5 dark:bg-gray-800">
-                <span
-                  class="text-sm"
-                  :class="item.endTs === null ? 'font-semibold text-pink-600' : 'text-gray-700 dark:text-gray-300'"
-                >
-                  {{ item.name }}
-                </span>
-                <UBadge v-if="item.endTs === null" color="primary" variant="soft" size="xs">当前</UBadge>
-                <span class="text-xs text-gray-400">({{ formatPeriod(item.startTs, item.endTs) }})</span>
-              </div>
-
-              <span v-if="index < member.history.length - 1" class="text-gray-300 dark:text-gray-600">→</span>
-            </template>
-          </div>
-        </div>
-      </div>
-
-      <EmptyState v-else-if="!isLoadingHistory" text="该群组所有成员均未修改过昵称" />
-
-      <LoadingState v-else text="正在加载昵称变更记录..." />
-    </SectionCard>
-  </div>
-</template>
diff --git a/src/components/analysis/ai/ChatExplorer.vue b/src/components/analysis/ai/ChatExplorer.vue
index 98a17df..6dd230b 100644
--- a/src/components/analysis/ai/ChatExplorer.vue
+++ b/src/components/analysis/ai/ChatExplorer.vue
@@ -224,17 +224,15 @@ watch(
 <template>
   <div class="flex h-full overflow-hidden">
     <!-- 左侧：对话记录列表 -->
-    <div class="w-64 shrink-0 border-r border-gray-200 bg-gray-50/50 dark:border-gray-800 dark:bg-gray-900/50">
-      <ConversationList
-        ref="conversationListRef"
-        :session-id="sessionId"
-        :active-id="currentConversationId"
-        @select="handleSelectConversation"
-        @create="handleCreateConversation"
-        @delete="handleDeleteConversation"
-        class="h-full"
-      />
-    </div>
+    <ConversationList
+      ref="conversationListRef"
+      :session-id="sessionId"
+      :active-id="currentConversationId"
+      @select="handleSelectConversation"
+      @create="handleCreateConversation"
+      @delete="handleDeleteConversation"
+      class="h-full shrink-0"
+    />
 
     <!-- 中间：对话区域 -->
     <div class="flex h-full flex-1">
diff --git a/src/components/analysis/ai/ConversationList.vue b/src/components/analysis/ai/ConversationList.vue
index 3396384..380cd4c 100644
--- a/src/components/analysis/ai/ConversationList.vue
+++ b/src/components/analysis/ai/ConversationList.vue
@@ -28,6 +28,7 @@ const conversations = ref<Conversation[]>([])
 const isLoading = ref(false)
 const editingId = ref<string | null>(null)
 const editingTitle = ref('')
+const isCollapsed = ref(false)
 
 // 加载对话列表
 async function loadConversations() {
@@ -113,22 +114,43 @@ defineExpose({
 </script>
 
 <template>
-  <div class="flex h-full w-64 flex-col">
+  <div
+    class="flex flex-col border-r border-gray-200 bg-white transition-all dark:border-gray-800 dark:bg-gray-900"
+    :class="isCollapsed ? 'w-10' : 'w-64'"
+  >
     <!-- 头部 -->
-    <div class="flex items-center justify-between px-2 py-4">
-      <span class="text-xs font-semibold tracking-wider text-gray-400 uppercase">AI对话记录</span>
-      <UButton
-        icon="i-heroicons-plus"
-        color="gray"
-        variant="ghost"
-        size="xs"
-        class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
-        @click="emit('create')"
-      />
+    <div class="flex items-center justify-between border-b border-gray-200 p-2 dark:border-gray-800">
+      <template v-if="!isCollapsed">
+        <span class="text-xs font-medium text-gray-500 dark:text-gray-400">AI对话记录</span>
+        <div class="flex items-center gap-1">
+          <UButton
+            icon="i-heroicons-plus"
+            color="gray"
+            variant="ghost"
+            size="xs"
+            class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+            @click="emit('create')"
+          />
+          <button
+            class="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+            @click="isCollapsed = !isCollapsed"
+          >
+            <UIcon name="i-heroicons-chevron-left" class="h-4 w-4" />
+          </button>
+        </div>
+      </template>
+      <template v-else>
+        <button
+          class="mx-auto rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+          @click="isCollapsed = !isCollapsed"
+        >
+          <UIcon name="i-heroicons-chevron-right" class="h-4 w-4" />
+        </button>
+      </template>
     </div>
 
-    <!-- 对话列表 -->
-    <div class="flex-1 overflow-y-auto px-2">
+    <!-- 展开状态列表 -->
+    <div v-if="!isCollapsed" class="flex-1 overflow-y-auto p-2">
       <!-- 加载中 -->
       <div v-if="isLoading" class="flex items-center justify-center py-8">
         <UIcon name="i-heroicons-arrow-path" class="h-5 w-5 animate-spin text-gray-400" />
@@ -209,5 +231,32 @@ defineExpose({
         </div>
       </div>
     </div>
+
+    <!-- 折叠状态列表 -->
+    <div v-else class="flex flex-1 flex-col items-center gap-2 overflow-y-auto py-2">
+      <!-- 新建按钮 -->
+      <button
+        class="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-pink-500 dark:hover:bg-gray-800"
+        title="开始新对话"
+        @click="emit('create')"
+      >
+        <UIcon name="i-heroicons-plus" class="h-4 w-4" />
+      </button>
+
+      <!-- 分隔线 -->
+      <div class="h-px w-6 bg-gray-200 dark:bg-gray-800"></div>
+
+      <!-- 对话列表图标 -->
+      <button
+        v-for="conv in conversations"
+        :key="conv.id"
+        class="rounded p-1 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
+        :class="[activeId === conv.id ? 'text-pink-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300']"
+        :title="getTitle(conv)"
+        @click="emit('select', conv.id)"
+      >
+        <UIcon name="i-heroicons-chat-bubble-left" class="h-4 w-4" />
+      </button>
+    </div>
   </div>
 </template>
diff --git a/src/composables/analysis/useDailyTrend.ts b/src/composables/analysis/useDailyTrend.ts
new file mode 100644
index 0000000..e1e1717
--- /dev/null
+++ b/src/composables/analysis/useDailyTrend.ts
@@ -0,0 +1,56 @@
+import { computed } from 'vue'
+import type { DailyActivity } from '@/types/chat'
+import type { LineChartData } from '@/components/charts'
+import dayjs from 'dayjs'
+
+export function useDailyTrend(dailyActivity: DailyActivity[]) {
+  // 检测是否跨年
+  const isMultiYear = computed(() => {
+    if (dailyActivity.length < 2) return false
+    const years = new Set(dailyActivity.map((d) => dayjs(d.date).year()))
+    return years.size > 1
+  })
+
+  // 每日趋势图数据（动态聚合）
+  const dailyChartData = computed<LineChartData>(() => {
+    const rawData = dailyActivity
+    const maxPoints = 50 // 最大展示点数
+
+    if (rawData.length <= maxPoints) {
+      const dateFormat = isMultiYear.value ? 'YYYY/MM/DD' : 'MM/DD'
+      return {
+        labels: rawData.map((d) => dayjs(d.date).format(dateFormat)),
+        values: rawData.map((d) => d.messageCount),
+      }
+    }
+
+    // 需要聚合
+    const groupSize = Math.ceil(rawData.length / maxPoints)
+    const aggregatedLabels: string[] = []
+    const aggregatedValues: number[] = []
+
+    for (let i = 0; i < rawData.length; i += groupSize) {
+      const chunk = rawData.slice(i, i + groupSize)
+      if (chunk.length === 0) continue
+
+      const midIndex = Math.floor(chunk.length / 2)
+      const midDate = chunk[midIndex].date
+      const dateFormat = isMultiYear.value ? 'YYYY/MM/DD' : 'MM/DD'
+      aggregatedLabels.push(dayjs(midDate).format(dateFormat))
+
+      const totalMessages = chunk.reduce((sum, d) => sum + d.messageCount, 0)
+      const avgMessages = Math.round(totalMessages / chunk.length)
+      aggregatedValues.push(avgMessages)
+    }
+
+    return {
+      labels: aggregatedLabels,
+      values: aggregatedValues,
+    }
+  })
+
+  return {
+    isMultiYear,
+    dailyChartData,
+  }
+}
diff --git a/src/composables/analysis/useOverviewStatistics.ts b/src/composables/analysis/useOverviewStatistics.ts
new file mode 100644
index 0000000..2472509
--- /dev/null
+++ b/src/composables/analysis/useOverviewStatistics.ts
@@ -0,0 +1,178 @@
+import { computed, type Ref } from 'vue'
+import type { AnalysisSession, HourlyActivity, DailyActivity, MessageType, WeekdayActivity } from '@/types/chat'
+import dayjs from 'dayjs'
+
+interface UseOverviewStatisticsProps {
+  session: AnalysisSession
+  messageTypes: Array<{ type: MessageType; count: number }>
+  hourlyActivity: HourlyActivity[]
+  dailyActivity: DailyActivity[]
+  timeRange: { start: number; end: number } | null
+  selectedYear: number | null
+  filteredMessageCount: number
+  filteredMemberCount: number
+}
+
+export function useOverviewStatistics(props: UseOverviewStatisticsProps, weekdayActivity: Ref<WeekdayActivity[]>) {
+  // 时间跨度
+  const durationDays = computed(() => {
+    if (props.selectedYear) {
+      const isLeapYear =
+        (props.selectedYear % 4 === 0 && props.selectedYear % 100 !== 0) || props.selectedYear % 400 === 0
+      return isLeapYear ? 366 : 365
+    }
+    if (!props.timeRange) return 0
+    return Math.ceil((props.timeRange.end - props.timeRange.start) / 86400)
+  })
+
+  // 显示的消息数
+  const displayMessageCount = computed(() => {
+    return props.selectedYear ? props.filteredMessageCount : props.session.messageCount
+  })
+
+  // 显示的成员数
+  const displayMemberCount = computed(() => {
+    return props.selectedYear ? props.filteredMemberCount : props.session.memberCount
+  })
+
+  // 全量时间跨度 (不随筛选变化)
+  const totalDurationDays = computed(() => {
+    if (!props.timeRange) return 0
+    return Math.ceil((props.timeRange.end - props.timeRange.start) / 86400)
+  })
+
+  // 全量日均消息
+  const totalDailyAvgMessages = computed(() => {
+    if (totalDurationDays.value === 0) return 0
+    return Math.round(props.session.messageCount / totalDurationDays.value)
+  })
+
+  // 日均消息数 (随筛选变化)
+  const dailyAvgMessages = computed(() => {
+    if (durationDays.value === 0) return 0
+    return Math.round(displayMessageCount.value / durationDays.value)
+  })
+
+  // 图片消息数量
+  const imageCount = computed(() => {
+    const imageType = props.messageTypes.find((t) => t.type === 1)
+    return imageType?.count || 0
+  })
+
+  // 最活跃时段
+  const peakHour = computed(() => {
+    if (!props.hourlyActivity.length) return null
+    return props.hourlyActivity.reduce(
+      (max, h) => (h.messageCount > max.messageCount ? h : max),
+      props.hourlyActivity[0]
+    )
+  })
+
+  // 最活跃星期
+  const peakWeekday = computed(() => {
+    if (!weekdayActivity.value.length) return null
+    return weekdayActivity.value.reduce(
+      (max, w) => (w.messageCount > max.messageCount ? w : max),
+      weekdayActivity.value[0]
+    )
+  })
+
+  // 星期名称映射（周一开始）
+  const weekdayNames = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+
+  // 周末活跃度
+  const weekdayVsWeekend = computed(() => {
+    if (!weekdayActivity.value.length) return { weekday: 0, weekend: 0 }
+    const weekdaySum = weekdayActivity.value
+      .filter((w) => w.weekday >= 1 && w.weekday <= 5)
+      .reduce((sum, w) => sum + w.messageCount, 0)
+    const weekendSum = weekdayActivity.value
+      .filter((w) => w.weekday >= 6 && w.weekday <= 7)
+      .reduce((sum, w) => sum + w.messageCount, 0)
+    const total = weekdaySum + weekendSum
+    return {
+      weekday: total > 0 ? Math.round((weekdaySum / total) * 100) : 0,
+      weekend: total > 0 ? Math.round((weekendSum / total) * 100) : 0,
+    }
+  })
+
+  // 最活跃的一天
+  const peakDay = computed(() => {
+    if (!props.dailyActivity.length) return null
+    return props.dailyActivity.reduce((max, d) => (d.messageCount > max.messageCount ? d : max), props.dailyActivity[0])
+  })
+
+  // 活跃天数
+  const activeDays = computed(() => {
+    return props.dailyActivity.filter((d) => d.messageCount > 0).length
+  })
+
+  // 总天数（用于计算活跃率）
+  const totalDays = computed(() => {
+    if (!props.timeRange) return 0
+    const start = dayjs.unix(props.timeRange.start)
+    const end = dayjs.unix(props.timeRange.end)
+    return end.diff(start, 'day') + 1
+  })
+
+  // 活跃率
+  const activeRate = computed(() => {
+    return totalDays.value > 0 ? Math.round((activeDays.value / totalDays.value) * 100) : 0
+  })
+
+  // 最长连续打卡天数
+  const maxConsecutiveDays = computed(() => {
+    if (!props.dailyActivity.length) return 0
+
+    // 按日期排序确保顺序正确
+    const sortedDates = [...props.dailyActivity]
+      .filter((d) => d.messageCount > 0)
+      .sort((a, b) => dayjs(a.date).valueOf() - dayjs(b.date).valueOf())
+
+    if (sortedDates.length === 0) return 0
+
+    let maxStreak = 1
+    let currentStreak = 1
+
+    for (let i = 1; i < sortedDates.length; i++) {
+      const prevDate = dayjs(sortedDates[i - 1].date)
+      const currDate = dayjs(sortedDates[i].date)
+
+      // 检查是否是连续的每一天
+      if (currDate.diff(prevDate, 'day') === 1) {
+        currentStreak++
+      } else {
+        if (currentStreak > maxStreak) {
+          maxStreak = currentStreak
+        }
+        currentStreak = 1
+      }
+    }
+
+    // 循环结束后再次检查最后一段连续天数
+    if (currentStreak > maxStreak) {
+      maxStreak = currentStreak
+    }
+
+    return maxStreak
+  })
+
+  return {
+    durationDays,
+    displayMessageCount,
+    displayMemberCount,
+    dailyAvgMessages,
+    totalDurationDays,
+    totalDailyAvgMessages,
+    imageCount,
+    peakHour,
+    peakWeekday,
+    weekdayNames,
+    weekdayVsWeekend,
+    peakDay,
+    activeDays,
+    totalDays,
+    activeRate,
+    maxConsecutiveDays,
+  }
+}
diff --git a/src/components/analysis/MemberTab.vue b/src/pages/group-chat/components/MemberTab.vue
similarity index 79%
rename from src/components/analysis/MemberTab.vue
rename to src/pages/group-chat/components/MemberTab.vue
index 5b25fbe..502804d 100644
--- a/src/components/analysis/MemberTab.vue
+++ b/src/pages/group-chat/components/MemberTab.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue'
-import type { MemberWithStats } from '@/types/chat'
+import type { MemberWithStats, MemberNameHistory } from '@/types/chat'
+import { SectionCard, EmptyState, LoadingState } from '@/components/UI'
+import { formatPeriod } from '@/utils'
 
 // Props
 const props = defineProps<{
@@ -153,6 +155,48 @@ async function confirmDelete() {
   }
 }
 
+// ==================== 昵称变更记录 ====================
+interface MemberWithHistory {
+  memberId: number
+  name: string
+  history: MemberNameHistory[]
+}
+
+const membersWithNicknameChanges = ref<MemberWithHistory[]>([])
+const isLoadingHistory = ref(false)
+
+async function loadMembersWithNicknameChanges() {
+  if (!props.sessionId || members.value.length === 0) return
+
+  isLoadingHistory.value = true
+  const membersWithChanges: MemberWithHistory[] = []
+
+  try {
+    const historyPromises = members.value.map((member) =>
+      window.chatApi.getMemberNameHistory(props.sessionId, member.id)
+    )
+
+    const allHistories = await Promise.all(historyPromises)
+
+    members.value.forEach((member, index) => {
+      const history = allHistories[index]
+      if (history.length > 1) {
+        membersWithChanges.push({
+          memberId: member.id,
+          name: getDisplayName(member),
+          history,
+        })
+      }
+    })
+
+    membersWithNicknameChanges.value = membersWithChanges
+  } catch (error) {
+    console.error('加载昵称变更记录失败:', error)
+  } finally {
+    isLoadingHistory.value = false
+  }
+}
+
 // 搜索时重置页码
 watch(searchQuery, () => {
   currentPage.value = 1
@@ -169,6 +213,16 @@ watch(
   { immediate: true }
 )
 
+// 成员加载完成后加载昵称变更记录
+watch(
+  () => members.value.length,
+  () => {
+    if (members.value.length > 0) {
+      loadMembersWithNicknameChanges()
+    }
+  }
+)
+
 onMounted(() => {
   loadMembers()
 })
@@ -347,6 +401,55 @@ onMounted(() => {
       </div>
     </div>
 
+    <!-- 昵称变更记录 -->
+    <SectionCard
+      class="mt-6"
+      title="昵称变更记录"
+      :description="
+        isLoadingHistory
+          ? '加载中...'
+          : membersWithNicknameChanges.length > 0
+            ? `${membersWithNicknameChanges.length} 位成员曾修改过昵称`
+            : '暂无成员修改昵称'
+      "
+    >
+      <div
+        v-if="!isLoadingHistory && membersWithNicknameChanges.length > 0"
+        class="divide-y divide-gray-100 dark:divide-gray-800"
+      >
+        <div
+          v-for="member in membersWithNicknameChanges"
+          :key="member.memberId"
+          class="flex items-start gap-3 px-5 py-3"
+        >
+          <div class="w-32 shrink-0 pt-0.5 font-medium text-gray-900 dark:text-white">
+            {{ member.name }}
+          </div>
+
+          <div class="flex flex-1 flex-wrap items-center gap-2">
+            <template v-for="(item, index) in member.history" :key="index">
+              <div class="flex items-center gap-1.5 rounded-lg bg-gray-50 px-3 py-1.5 dark:bg-gray-800">
+                <span
+                  class="text-sm"
+                  :class="item.endTs === null ? 'font-semibold text-pink-600' : 'text-gray-700 dark:text-gray-300'"
+                >
+                  {{ item.name }}
+                </span>
+                <UBadge v-if="item.endTs === null" color="primary" variant="soft" size="xs">当前</UBadge>
+                <span class="text-xs text-gray-400">({{ formatPeriod(item.startTs, item.endTs) }})</span>
+              </div>
+
+              <span v-if="index < member.history.length - 1" class="text-gray-300 dark:text-gray-600">→</span>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <EmptyState v-else-if="!isLoadingHistory" text="该群组所有成员均未修改过昵称" />
+
+      <LoadingState v-else text="正在加载昵称变更记录..." />
+    </SectionCard>
+
     <!-- 删除确认弹窗 -->
     <UModal :open="!!deletingMember" @update:open="deletingMember = null" :ui="{ content: 'max-w-sm' }">
       <template #content>
@@ -373,3 +476,4 @@ onMounted(() => {
     </UModal>
   </div>
 </template>
+
diff --git a/src/pages/group-chat/components/OverviewTab.vue b/src/pages/group-chat/components/OverviewTab.vue
new file mode 100644
index 0000000..3943815
--- /dev/null
+++ b/src/pages/group-chat/components/OverviewTab.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type {
+  AnalysisSession,
+  MemberActivity,
+  HourlyActivity,
+  DailyActivity,
+  MessageType,
+  WeekdayActivity,
+  MonthlyActivity,
+} from '@/types/chat'
+import { getMessageTypeName } from '@/types/chat'
+import { DoughnutChart } from '@/components/charts'
+import type { DoughnutChartData } from '@/components/charts'
+import { SectionCard } from '@/components/UI'
+import { useOverviewStatistics } from '@/composables/analysis/useOverviewStatistics'
+import { useDailyTrend } from '@/composables/analysis/useDailyTrend'
+import OverviewStatCards from '@/components/analysis/Overview/OverviewStatCards.vue'
+import OverviewIdentityCard from '@/components/analysis/Overview/OverviewIdentityCard.vue'
+import ActivityTimeDistribution from '@/components/analysis/Overview/ActivityTimeDistribution.vue'
+import DailyTrendCard from '@/components/analysis/Overview/DailyTrendCard.vue'
+
+const props = defineProps<{
+  session: AnalysisSession
+  memberActivity: MemberActivity[]
+  topMembers: MemberActivity[]
+  bottomMembers: MemberActivity[]
+  messageTypes: Array<{ type: MessageType; count: number }>
+  hourlyActivity: HourlyActivity[]
+  dailyActivity: DailyActivity[]
+  timeRange: { start: number; end: number } | null
+  selectedYear: number | null
+  filteredMessageCount: number
+  filteredMemberCount: number
+  timeFilter?: { startTs?: number; endTs?: number }
+}>()
+
+// 星期活跃度数据
+const weekdayActivity = ref<WeekdayActivity[]>([])
+const isLoadingWeekday = ref(false)
+
+// 使用 Composables
+const {
+  durationDays,
+  dailyAvgMessages,
+  totalDurationDays,
+  totalDailyAvgMessages,
+  imageCount,
+  peakHour,
+  peakWeekday,
+  weekdayNames,
+  weekdayVsWeekend,
+  peakDay,
+  activeDays,
+  totalDays,
+  activeRate,
+  maxConsecutiveDays,
+} = useOverviewStatistics(props, weekdayActivity)
+
+const { dailyChartData } = useDailyTrend(props.dailyActivity)
+
+// 消息类型图表数据
+const typeChartData = computed<DoughnutChartData>(() => {
+  return {
+    labels: props.messageTypes.map((t) => getMessageTypeName(t.type)),
+    values: props.messageTypes.map((t) => t.count),
+  }
+})
+
+// 成员水群分布图表数据
+const memberChartData = computed<DoughnutChartData>(() => {
+  const sortedMembers = [...props.memberActivity].sort((a, b) => b.messageCount - a.messageCount)
+  const top10 = sortedMembers.slice(0, 10)
+  const othersCount = sortedMembers.slice(10).reduce((sum, m) => sum + m.messageCount, 0)
+
+  const labels = top10.map((m) => m.name)
+  const values = top10.map((m) => m.messageCount)
+
+  if (othersCount > 0) {
+    labels.push('其他人')
+    values.push(othersCount)
+  }
+
+  return {
+    labels,
+    values,
+  }
+})
+
+// 月份活跃度数据
+const monthlyActivity = ref<MonthlyActivity[]>([])
+const isLoadingMonthly = ref(false)
+
+// 加载星期活跃度数据
+async function loadWeekdayActivity() {
+  if (!props.session.id) return
+  isLoadingWeekday.value = true
+  try {
+    weekdayActivity.value = await window.chatApi.getWeekdayActivity(props.session.id, props.timeFilter)
+  } catch (error) {
+    console.error('加载星期活跃度失败:', error)
+  } finally {
+    isLoadingWeekday.value = false
+  }
+}
+
+// 加载月份活跃度数据
+async function loadMonthlyActivity() {
+  if (!props.session.id) return
+  isLoadingMonthly.value = true
+  try {
+    monthlyActivity.value = await window.chatApi.getMonthlyActivity(props.session.id, props.timeFilter)
+  } catch (error) {
+    console.error('加载月份活跃度失败:', error)
+  } finally {
+    isLoadingMonthly.value = false
+  }
+}
+
+// 监听 session.id 和 timeFilter 变化
+watch(
+  () => [props.session.id, props.timeFilter],
+  () => {
+    loadWeekdayActivity()
+    loadMonthlyActivity()
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<template>
+  <div class="space-y-6 p-6">
+    <!-- 群聊身份卡 -->
+    <OverviewIdentityCard
+      :session="session"
+      :total-duration-days="totalDurationDays"
+      :total-daily-avg-messages="totalDailyAvgMessages"
+    />
+
+    <!-- 关键指标卡片 -->
+    <OverviewStatCards
+      :daily-avg-messages="dailyAvgMessages"
+      :duration-days="durationDays"
+      :image-count="imageCount"
+      :peak-hour="peakHour"
+      :peak-weekday="peakWeekday"
+      :weekday-names="weekdayNames"
+      :weekday-vs-weekend="weekdayVsWeekend"
+      :peak-day="peakDay"
+      :active-days="activeDays"
+      :total-days="totalDays"
+      :active-rate="activeRate"
+      :max-consecutive-days="maxConsecutiveDays"
+    />
+
+    <!-- 图表区域：消息类型 & 成员分布 -->
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      <!-- 消息类型分布 -->
+      <SectionCard title="消息类型分布" :show-divider="false">
+        <div class="p-5">
+          <DoughnutChart :data="typeChartData" :height="256" />
+        </div>
+      </SectionCard>
+
+      <!-- 成员水群分布 -->
+      <SectionCard title="成员水群分布" :show-divider="false">
+        <div class="p-5">
+          <DoughnutChart :data="memberChartData" :height="256" />
+        </div>
+      </SectionCard>
+    </div>
+
+    <!-- 时间分布图表 -->
+    <ActivityTimeDistribution
+      :hourly-activity="hourlyActivity"
+      :weekday-activity="weekdayActivity"
+      :monthly-activity="monthlyActivity"
+      :is-loading-weekday="isLoadingWeekday"
+      :is-loading-monthly="isLoadingMonthly"
+      :weekday-names="weekdayNames"
+      :weekday-vs-weekend="weekdayVsWeekend"
+    />
+
+    <!-- 每日消息趋势 -->
+    <DailyTrendCard :daily-activity="dailyActivity" :daily-chart-data="dailyChartData" />
+  </div>
+</template>
diff --git a/src/components/analysis/QuotesTab.vue b/src/pages/group-chat/components/QuotesTab.vue
similarity index 94%
rename from src/components/analysis/QuotesTab.vue
rename to src/pages/group-chat/components/QuotesTab.vue
index fcb4d64..890407b 100644
--- a/src/components/analysis/QuotesTab.vue
+++ b/src/pages/group-chat/components/QuotesTab.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { SubTabs } from '@/components/UI'
-import { CatchphraseTab, HotRepeatTab, KeywordAnalysis } from './quotes'
+import { CatchphraseTab, HotRepeatTab, KeywordAnalysis } from '@/components/analysis/quotes'
 
 interface TimeFilter {
   startTs?: number
@@ -65,3 +65,4 @@ const activeSubTab = ref('catchphrase')
   opacity: 0;
 }
 </style>
+
diff --git a/src/components/analysis/RankingTab.vue b/src/pages/group-chat/components/RankingTab.vue
similarity index 99%
rename from src/components/analysis/RankingTab.vue
rename to src/pages/group-chat/components/RankingTab.vue
index 82edbe6..daa6909 100644
--- a/src/components/analysis/RankingTab.vue
+++ b/src/pages/group-chat/components/RankingTab.vue
@@ -131,3 +131,4 @@ const memberRankData = computed<RankItem[]>(() => {
     <PageAnchorsNav :anchors="anchors" :active-anchor="activeAnchor" @click="scrollToAnchor" />
   </div>
 </template>
+
diff --git a/src/components/analysis/RelationshipsTab.vue b/src/pages/group-chat/components/RelationshipsTab.vue
similarity index 99%
rename from src/components/analysis/RelationshipsTab.vue
rename to src/pages/group-chat/components/RelationshipsTab.vue
index fdac7e2..0daf4b9 100644
--- a/src/components/analysis/RelationshipsTab.vue
+++ b/src/pages/group-chat/components/RelationshipsTab.vue
@@ -276,3 +276,4 @@ watch(
     </UModal>
   </div>
 </template>
+
diff --git a/src/components/analysis/ranking/CheckInRank.vue b/src/pages/group-chat/components/ranking/CheckInRank.vue
similarity index 100%
rename from src/components/analysis/ranking/CheckInRank.vue
rename to src/pages/group-chat/components/ranking/CheckInRank.vue
diff --git a/src/components/analysis/ranking/DivingRank.vue b/src/pages/group-chat/components/ranking/DivingRank.vue
similarity index 100%
rename from src/components/analysis/ranking/DivingRank.vue
rename to src/pages/group-chat/components/ranking/DivingRank.vue
diff --git a/src/components/analysis/ranking/DragonKingRank.vue b/src/pages/group-chat/components/ranking/DragonKingRank.vue
similarity index 100%
rename from src/components/analysis/ranking/DragonKingRank.vue
rename to src/pages/group-chat/components/ranking/DragonKingRank.vue
diff --git a/src/components/analysis/ranking/MemeBattleRank.vue b/src/pages/group-chat/components/ranking/MemeBattleRank.vue
similarity index 100%
rename from src/components/analysis/ranking/MemeBattleRank.vue
rename to src/pages/group-chat/components/ranking/MemeBattleRank.vue
diff --git a/src/components/analysis/ranking/MonologueRank.vue b/src/pages/group-chat/components/ranking/MonologueRank.vue
similarity index 100%
rename from src/components/analysis/ranking/MonologueRank.vue
rename to src/pages/group-chat/components/ranking/MonologueRank.vue
diff --git a/src/components/analysis/ranking/NightOwlRank.vue b/src/pages/group-chat/components/ranking/NightOwlRank.vue
similarity index 100%
rename from src/components/analysis/ranking/NightOwlRank.vue
rename to src/pages/group-chat/components/ranking/NightOwlRank.vue
diff --git a/src/components/analysis/ranking/RepeatSection.vue b/src/pages/group-chat/components/ranking/RepeatSection.vue
similarity index 100%
rename from src/components/analysis/ranking/RepeatSection.vue
rename to src/pages/group-chat/components/ranking/RepeatSection.vue
diff --git a/src/pages/group-chat.vue b/src/pages/group-chat/index.vue
similarity index 92%
rename from src/pages/group-chat.vue
rename to src/pages/group-chat/index.vue
index d3e6b20..be3478a 100644
--- a/src/pages/group-chat.vue
+++ b/src/pages/group-chat/index.vue
@@ -6,14 +6,12 @@ import { storeToRefs } from 'pinia'
 import type { AnalysisSession, MemberActivity, HourlyActivity, DailyActivity, MessageType } from '@/types/chat'
 import { formatDateRange } from '@/utils'
 import UITabs from '@/components/UI/Tabs.vue'
-import OverviewTab from '@/components/analysis/OverviewTab.vue'
-import RankingTab from '@/components/analysis/RankingTab.vue'
-import TimelineTab from '@/components/analysis/TimelineTab.vue'
-import QuotesTab from '@/components/analysis/QuotesTab.vue'
-import RelationshipsTab from '@/components/analysis/RelationshipsTab.vue'
 import AITab from '@/components/analysis/AITab.vue'
-import MemberTab from '@/components/analysis/MemberTab.vue'
-import SQLLabTab from '@/components/analysis/SQLLabTab.vue'
+import OverviewTab from './components/OverviewTab.vue'
+import RankingTab from './components/RankingTab.vue'
+import QuotesTab from './components/QuotesTab.vue'
+import RelationshipsTab from './components/RelationshipsTab.vue'
+import MemberTab from './components/MemberTab.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -34,16 +32,14 @@ const availableYears = ref<number[]>([])
 const selectedYear = ref<number>(0) // 0 表示全部
 const isInitialLoad = ref(true) // 用于跳过初始加载时的 watch 触发，并控制首屏加载状态
 
-// Tab 配置
+// Tab 配置（SQL实验室已整合到AI实验室中，趋势已合并到总览）
 const tabs = [
   { id: 'overview', label: '总览', icon: 'i-heroicons-chart-pie' },
   { id: 'ranking', label: '群榜单', icon: 'i-heroicons-trophy' },
   { id: 'quotes', label: '群语录', icon: 'i-heroicons-chat-bubble-bottom-center-text' },
   { id: 'relationships', label: '群关系', icon: 'i-heroicons-heart' },
-  { id: 'timeline', label: '群趋势', icon: 'i-heroicons-chart-bar' },
   { id: 'members', label: '群成员', icon: 'i-heroicons-user-group' },
   { id: 'ai', label: 'AI实验室', icon: 'i-heroicons-sparkles' },
-  { id: 'sql', label: 'SQL实验室', icon: 'i-heroicons-command-line' },
 ]
 
 const activeTab = ref((route.query.tab as string) || 'overview')
@@ -308,6 +304,7 @@ onMounted(() => {
               :bottom-members="bottomMembers"
               :message-types="messageTypes"
               :hourly-activity="hourlyActivity"
+              :daily-activity="dailyActivity"
               :time-range="timeRange"
               :selected-year="selectedYear"
               :filtered-message-count="filteredMessageCount"
@@ -335,15 +332,6 @@ onMounted(() => {
               :session-id="currentSessionId!"
               :time-filter="timeFilter"
             />
-            <TimelineTab
-              v-else-if="activeTab === 'timeline'"
-              :key="'timeline-' + selectedYear"
-              :session-id="currentSessionId!"
-              :daily-activity="dailyActivity"
-              :member-activity="memberActivity"
-              :time-range="timeRange"
-              :time-filter="timeFilter"
-            />
             <MemberTab
               v-else-if="activeTab === 'members'"
               :key="'members-' + selectedYear"
@@ -358,7 +346,6 @@ onMounted(() => {
               :time-filter="timeFilter"
               chat-type="group"
             />
-            <SQLLabTab v-else-if="activeTab === 'sql'" :key="'sql-' + selectedYear" :session-id="currentSessionId!" />
           </Transition>
         </div>
       </div>
@@ -389,3 +376,4 @@ onMounted(() => {
   transform: translateY(-10px);
 }
 </style>
+
diff --git a/src/components/analysis/PrivateMemberTab.vue b/src/pages/private-chat/components/MemberTab.vue
similarity index 100%
rename from src/components/analysis/PrivateMemberTab.vue
rename to src/pages/private-chat/components/MemberTab.vue
diff --git a/src/pages/private-chat/components/OverviewTab.vue b/src/pages/private-chat/components/OverviewTab.vue
new file mode 100644
index 0000000..f109b1c
--- /dev/null
+++ b/src/pages/private-chat/components/OverviewTab.vue
@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type {
+  AnalysisSession,
+  MemberActivity,
+  HourlyActivity,
+  DailyActivity,
+  MessageType,
+  WeekdayActivity,
+  MonthlyActivity,
+} from '@/types/chat'
+import { getMessageTypeName } from '@/types/chat'
+import { DoughnutChart } from '@/components/charts'
+import type { DoughnutChartData } from '@/components/charts'
+import { SectionCard } from '@/components/UI'
+import { useOverviewStatistics } from '@/composables/analysis/useOverviewStatistics'
+import { useDailyTrend } from '@/composables/analysis/useDailyTrend'
+import OverviewStatCards from '@/components/analysis/Overview/OverviewStatCards.vue'
+import OverviewIdentityCard from '@/components/analysis/Overview/OverviewIdentityCard.vue'
+import ActivityTimeDistribution from '@/components/analysis/Overview/ActivityTimeDistribution.vue'
+import DailyTrendCard from '@/components/analysis/Overview/DailyTrendCard.vue'
+
+const props = defineProps<{
+  session: AnalysisSession
+  memberActivity: MemberActivity[]
+  messageTypes: Array<{ type: MessageType; count: number }>
+  hourlyActivity: HourlyActivity[]
+  dailyActivity: DailyActivity[]
+  timeRange: { start: number; end: number } | null
+  selectedYear: number | null
+  filteredMessageCount: number
+  filteredMemberCount: number
+  timeFilter?: { startTs?: number; endTs?: number }
+}>()
+
+// 星期活跃度数据
+const weekdayActivity = ref<WeekdayActivity[]>([])
+const isLoadingWeekday = ref(false)
+
+// 使用 Composables
+const {
+  durationDays,
+  dailyAvgMessages,
+  totalDurationDays,
+  totalDailyAvgMessages,
+  imageCount,
+  peakHour,
+  peakWeekday,
+  weekdayNames,
+  weekdayVsWeekend,
+  peakDay,
+  activeDays,
+  totalDays,
+  activeRate,
+  maxConsecutiveDays,
+} = useOverviewStatistics(props, weekdayActivity)
+
+const { dailyChartData } = useDailyTrend(props.dailyActivity)
+
+// 消息类型图表数据
+const typeChartData = computed<DoughnutChartData>(() => {
+  return {
+    labels: props.messageTypes.map((t) => getMessageTypeName(t.type)),
+    values: props.messageTypes.map((t) => t.count),
+  }
+})
+
+// 双方消息对比数据
+const memberComparisonData = computed(() => {
+  if (props.memberActivity.length !== 2) return null
+
+  const sorted = [...props.memberActivity].sort((a, b) => b.messageCount - a.messageCount)
+  const total = sorted[0].messageCount + sorted[1].messageCount
+
+  return {
+    member1: {
+      name: sorted[0].name,
+      count: sorted[0].messageCount,
+      percentage: total > 0 ? Math.round((sorted[0].messageCount / total) * 100) : 0,
+    },
+    member2: {
+      name: sorted[1].name,
+      count: sorted[1].messageCount,
+      percentage: total > 0 ? Math.round((sorted[1].messageCount / total) * 100) : 0,
+    },
+    total,
+  }
+})
+
+// 双方对比图表数据
+const comparisonChartData = computed<DoughnutChartData>(() => {
+  if (!memberComparisonData.value) {
+    return { labels: [], values: [] }
+  }
+  return {
+    labels: [memberComparisonData.value.member1.name, memberComparisonData.value.member2.name],
+    values: [memberComparisonData.value.member1.count, memberComparisonData.value.member2.count],
+  }
+})
+
+// 月份活跃度数据
+const monthlyActivity = ref<MonthlyActivity[]>([])
+const isLoadingMonthly = ref(false)
+
+// 加载星期活跃度数据
+async function loadWeekdayActivity() {
+  if (!props.session.id) return
+  isLoadingWeekday.value = true
+  try {
+    weekdayActivity.value = await window.chatApi.getWeekdayActivity(props.session.id, props.timeFilter)
+  } catch (error) {
+    console.error('加载星期活跃度失败:', error)
+  } finally {
+    isLoadingWeekday.value = false
+  }
+}
+
+// 加载月份活跃度数据
+async function loadMonthlyActivity() {
+  if (!props.session.id) return
+  isLoadingMonthly.value = true
+  try {
+    monthlyActivity.value = await window.chatApi.getMonthlyActivity(props.session.id, props.timeFilter)
+  } catch (error) {
+    console.error('加载月份活跃度失败:', error)
+  } finally {
+    isLoadingMonthly.value = false
+  }
+}
+
+// 监听 session.id 和 timeFilter 变化
+watch(
+  () => [props.session.id, props.timeFilter],
+  () => {
+    loadWeekdayActivity()
+    loadMonthlyActivity()
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<template>
+  <div class="space-y-6 p-6">
+    <!-- 私聊身份卡 -->
+    <OverviewIdentityCard
+      :session="session"
+      :total-duration-days="totalDurationDays"
+      :total-daily-avg-messages="totalDailyAvgMessages"
+    />
+
+    <!-- 双方消息对比 -->
+    <SectionCard v-if="memberComparisonData" title="消息占比" :show-divider="false">
+      <div class="p-5">
+        <div class="flex items-center gap-8">
+          <!-- 左侧成员 -->
+          <div class="flex-1 text-center">
+            <div
+              class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-pink-100 dark:bg-pink-900/30"
+            >
+              <span class="text-2xl font-bold text-pink-600 dark:text-pink-400">
+                {{ memberComparisonData.member1.name.charAt(0) }}
+              </span>
+            </div>
+            <p class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
+              {{ memberComparisonData.member1.name }}
+            </p>
+            <p class="text-2xl font-black text-pink-600 dark:text-pink-400">
+              {{ memberComparisonData.member1.percentage }}%
+            </p>
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+              {{ memberComparisonData.member1.count.toLocaleString() }} 条
+            </p>
+          </div>
+
+          <!-- 中间对比条 -->
+          <div class="flex-1">
+            <div class="relative h-8 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
+              <div
+                class="absolute left-0 top-0 h-full rounded-l-full bg-pink-500 transition-all"
+                :style="{ width: `${memberComparisonData.member1.percentage}%` }"
+              />
+              <div
+                class="absolute right-0 top-0 h-full rounded-r-full bg-blue-500 transition-all"
+                :style="{ width: `${memberComparisonData.member2.percentage}%` }"
+              />
+            </div>
+            <div class="mt-2 flex justify-between text-xs text-gray-500">
+              <span>{{ memberComparisonData.member1.percentage }}%</span>
+              <span>{{ memberComparisonData.member2.percentage }}%</span>
+            </div>
+          </div>
+
+          <!-- 右侧成员 -->
+          <div class="flex-1 text-center">
+            <div
+              class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30"
+            >
+              <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">
+                {{ memberComparisonData.member2.name.charAt(0) }}
+              </span>
+            </div>
+            <p class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
+              {{ memberComparisonData.member2.name }}
+            </p>
+            <p class="text-2xl font-black text-blue-600 dark:text-blue-400">
+              {{ memberComparisonData.member2.percentage }}%
+            </p>
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+              {{ memberComparisonData.member2.count.toLocaleString() }} 条
+            </p>
+          </div>
+        </div>
+      </div>
+    </SectionCard>
+
+    <!-- 关键指标卡片 -->
+    <OverviewStatCards
+      :daily-avg-messages="dailyAvgMessages"
+      :duration-days="durationDays"
+      :image-count="imageCount"
+      :peak-hour="peakHour"
+      :peak-weekday="peakWeekday"
+      :weekday-names="weekdayNames"
+      :weekday-vs-weekend="weekdayVsWeekend"
+      :peak-day="peakDay"
+      :active-days="activeDays"
+      :total-days="totalDays"
+      :active-rate="activeRate"
+      :max-consecutive-days="maxConsecutiveDays"
+    />
+
+    <!-- 图表区域：消息类型 & 双方占比 -->
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      <!-- 消息类型分布 -->
+      <SectionCard title="消息类型分布" :show-divider="false">
+        <div class="p-5">
+          <DoughnutChart :data="typeChartData" :height="256" />
+        </div>
+      </SectionCard>
+
+      <!-- 双方消息占比饼图 -->
+      <SectionCard v-if="memberComparisonData" title="双方消息占比" :show-divider="false">
+        <div class="p-5">
+          <DoughnutChart :data="comparisonChartData" :height="256" />
+        </div>
+      </SectionCard>
+    </div>
+
+    <!-- 时间分布图表 -->
+    <ActivityTimeDistribution
+      :hourly-activity="hourlyActivity"
+      :weekday-activity="weekdayActivity"
+      :monthly-activity="monthlyActivity"
+      :is-loading-weekday="isLoadingWeekday"
+      :is-loading-monthly="isLoadingMonthly"
+      :weekday-names="weekdayNames"
+      :weekday-vs-weekend="weekdayVsWeekend"
+    />
+
+    <!-- 每日消息趋势 -->
+    <DailyTrendCard :daily-activity="dailyActivity" :daily-chart-data="dailyChartData" />
+  </div>
+</template>
diff --git a/src/components/analysis/PrivateQuotesTab.vue b/src/pages/private-chat/components/QuotesTab.vue
similarity index 94%
rename from src/components/analysis/PrivateQuotesTab.vue
rename to src/pages/private-chat/components/QuotesTab.vue
index eed0e94..7cc07cf 100644
--- a/src/components/analysis/PrivateQuotesTab.vue
+++ b/src/pages/private-chat/components/QuotesTab.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { SubTabs } from '@/components/UI'
-import { CatchphraseTab, KeywordAnalysis } from './quotes'
+import { CatchphraseTab, KeywordAnalysis } from '@/components/analysis/quotes'
 
 interface TimeFilter {
   startTs?: number
@@ -57,4 +57,3 @@ const activeSubTab = ref('catchphrase')
   opacity: 0;
 }
 </style>
-
diff --git a/src/pages/private-chat.vue b/src/pages/private-chat/index.vue
similarity index 89%
rename from src/pages/private-chat.vue
rename to src/pages/private-chat/index.vue
index fca1725..f6e13dd 100644
--- a/src/pages/private-chat.vue
+++ b/src/pages/private-chat/index.vue
@@ -6,12 +6,10 @@ import { storeToRefs } from 'pinia'
 import type { AnalysisSession, MemberActivity, HourlyActivity, DailyActivity, MessageType } from '@/types/chat'
 import { formatDateRange } from '@/utils'
 import UITabs from '@/components/UI/Tabs.vue'
-import PrivateOverviewTab from '@/components/analysis/PrivateOverviewTab.vue'
-import PrivateTimelineTab from '@/components/analysis/PrivateTimelineTab.vue'
-import PrivateQuotesTab from '@/components/analysis/PrivateQuotesTab.vue'
-import PrivateMemberTab from '@/components/analysis/PrivateMemberTab.vue'
 import AITab from '@/components/analysis/AITab.vue'
-import SQLLabTab from '@/components/analysis/SQLLabTab.vue'
+import OverviewTab from './components/OverviewTab.vue'
+import QuotesTab from './components/QuotesTab.vue'
+import MemberTab from './components/MemberTab.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -32,14 +30,12 @@ const availableYears = ref<number[]>([])
 const selectedYear = ref<number>(0) // 0 表示全部
 const isInitialLoad = ref(true) // 用于跳过初始加载时的 watch 触发，并控制首屏加载状态
 
-// Tab 配置 - 私聊有总览、趋势、语录、成员、AI 和 SQL
+// Tab 配置 - 私聊有总览、语录、成员、AI实验室（趋势已合并到总览）
 const tabs = [
   { id: 'overview', label: '总览', icon: 'i-heroicons-chart-pie' },
-  { id: 'timeline', label: '趋势', icon: 'i-heroicons-chart-bar' },
   { id: 'quotes', label: '语录', icon: 'i-heroicons-chat-bubble-left-right' },
   { id: 'member', label: '成员', icon: 'i-heroicons-user-group' },
   { id: 'ai', label: 'AI实验室', icon: 'i-heroicons-sparkles' },
-  { id: 'sql', label: 'SQL实验室', icon: 'i-heroicons-command-line' },
 ]
 
 const activeTab = ref((route.query.tab as string) || 'overview')
@@ -276,35 +272,27 @@ onMounted(() => {
 
         <div class="h-full">
           <Transition name="tab-slide" mode="out-in">
-            <PrivateOverviewTab
+            <OverviewTab
               v-if="activeTab === 'overview'"
               :key="'overview-' + selectedYear"
               :session="session"
               :member-activity="memberActivity"
               :message-types="messageTypes"
               :hourly-activity="hourlyActivity"
+              :daily-activity="dailyActivity"
               :time-range="timeRange"
               :selected-year="selectedYear"
               :filtered-message-count="filteredMessageCount"
               :filtered-member-count="filteredMemberCount"
               :time-filter="timeFilter"
             />
-            <PrivateTimelineTab
-              v-else-if="activeTab === 'timeline'"
-              :key="'timeline-' + selectedYear"
-              :session-id="currentSessionId!"
-              :daily-activity="dailyActivity"
-              :member-activity="memberActivity"
-              :time-range="timeRange"
-              :time-filter="timeFilter"
-            />
-            <PrivateQuotesTab
+            <QuotesTab
               v-else-if="activeTab === 'quotes'"
               :key="'quotes-' + selectedYear"
               :session-id="currentSessionId!"
               :time-filter="timeFilter"
             />
-            <PrivateMemberTab
+            <MemberTab
               v-else-if="activeTab === 'member'"
               :key="'member'"
               :session-id="currentSessionId!"
@@ -317,11 +305,6 @@ onMounted(() => {
               :time-filter="timeFilter"
               chat-type="private"
             />
-            <SQLLabTab
-              v-else-if="activeTab === 'sql'"
-              :key="'sql-' + selectedYear"
-              :session-id="currentSessionId!"
-            />
           </Transition>
         </div>
       </div>
@@ -352,3 +335,4 @@ onMounted(() => {
   transform: translateY(-10px);
 }
 </style>
+
diff --git a/src/routes/index.ts b/src/routes/index.ts
index acd79b4..c3c5397 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -10,12 +10,12 @@ export const router = createRouter({
     {
       path: '/group-chat/:id',
       name: 'group-chat',
-      component: () => import('@/pages/group-chat.vue'),
+      component: () => import('@/pages/group-chat/index.vue'),
     },
     {
       path: '/private-chat/:id',
       name: 'private-chat',
-      component: () => import('@/pages/private-chat.vue'),
+      component: () => import('@/pages/private-chat/index.vue'),
     },
     {
       path: '/tools',