feat: 样式和体验优化

src/App.vue

@@ -9,6 +9,10 @@ const chatStore = useChatStore()
 const { isInitialized } = storeToRefs(chatStore)
 const route = useRoute()
 
+const tooltip = {
+  delayDuration: 100,
+}
+
 // 应用启动时从数据库加载会话列表
 onMounted(async () => {
   await chatStore.loadSessions()
@@ -16,11 +20,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <UApp>
+  <UApp :tooltip="tooltip">
     <div class="flex h-screen w-full overflow-hidden bg-white dark:bg-gray-950">
       <template v-if="!isInitialized">
         <div class="flex h-full w-full items-center justify-center">
-          <div class="text-center">
+          <div class="flex flex-col items-center justify-center text-center">
             <UIcon name="i-heroicons-arrow-path" class="h-8 w-8 animate-spin text-pink-500" />
             <p class="mt-2 text-sm text-gray-500">加载中...</p>
           </div>

src/components/Sidebar.vue

@@ -12,11 +12,11 @@ dayjs.extend(relativeTime)
 dayjs.locale('zh-cn')
 
 const chatStore = useChatStore()
-const { sessions } = storeToRefs(chatStore)
+const { sessions, isSidebarCollapsed: isCollapsed } = storeToRefs(chatStore)
+const { toggleSidebar } = chatStore
 const router = useRouter()
 const route = useRoute()
 
-const isCollapsed = ref(false)
 const deleteConfirmId = ref<string | null>(null)
 
 // 加载会话列表
@@ -24,10 +24,6 @@ onMounted(() => {
   chatStore.loadSessions()
 })
 
-function toggleSidebar() {
-  isCollapsed.value = !isCollapsed.value
-}
-
 function handleImport() {
   // Navigate to home (Welcome Guide)
   router.push('/')
@@ -62,18 +58,20 @@ function cancelDelete() {
       <!-- Header / Toggle -->
       <div class="mb-6 flex items-center" :class="[isCollapsed ? 'justify-center' : 'justify-between']">
         <div v-if="!isCollapsed" class="text-lg font-semibold text-gray-900 dark:text-white">ChatLab</div>
-        <UButton
-          icon="i-heroicons-bars-3"
-          color="gray"
-          variant="ghost"
-          size="md"
-          class="flex h-12 w-12 cursor-pointer items-center justify-center rounded-full hover:bg-gray-200/60 dark:hover:bg-gray-800"
-          @click="toggleSidebar"
-        />
+        <UTooltip :text="isCollapsed ? '展开侧边栏' : '收起侧边栏'" :popper="{ placement: 'right' }">
+          <UButton
+            icon="i-heroicons-bars-3"
+            color="gray"
+            variant="ghost"
+            size="md"
+            class="flex h-12 w-12 cursor-pointer items-center justify-center rounded-full hover:bg-gray-200/60 dark:hover:bg-gray-800"
+            @click="toggleSidebar"
+          />
+        </UTooltip>
       </div>
 
       <!-- New Analysis Button -->
-      <UTooltip :text="isCollapsed ? '分析新的聊天' : ''" :popper="{ placement: 'right' }">
+      <UTooltip :text="isCollapsed ? '分析新聊天' : ''" :popper="{ placement: 'right' }">
         <UButton
           :block="!isCollapsed"
           class="transition-all rounded-full hover:bg-gray-200/60 dark:hover:bg-gray-800 h-12 cursor-pointer"
@@ -83,7 +81,7 @@ function cancelDelete() {
           @click="handleImport"
         >
           <UIcon name="i-heroicons-plus" class="h-5 w-5 shrink-0" :class="[isCollapsed ? '' : 'mr-2']" />
-          <span v-if="!isCollapsed" class="truncate">分析新的聊天</span>
+          <span v-if="!isCollapsed" class="truncate">分析新聊天</span>
         </UButton>
       </UTooltip>
     </div>
@@ -97,80 +95,85 @@ function cancelDelete() {
           聊天记录
         </div>
 
-        <div
+        <UTooltip
           v-for="session in sessions"
           :key="session.id"
-          class="group relative flex w-full items-center rounded-full p-2 text-left transition-colors"
-          :class="[
-            route.params.id === session.id && !isCollapsed
-              ? 'bg-primary-100 text-gray-900 dark:bg-primary-900/30 dark:text-primary-100'
-              : 'text-gray-700 dark:text-gray-200 hover:bg-gray-200/60 dark:hover:bg-gray-800',
-            isCollapsed ? 'justify-center cursor-pointer' : 'cursor-pointer',
-          ]"
-          @click="router.push({ name: 'chat', params: { id: session.id } })"
+          :text="isCollapsed ? session.name : ''"
+          :popper="{ placement: 'right' }"
         >
-          <!-- Platform Icon / Text Avatar -->
           <div
-            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold"
+            class="group relative flex w-full items-center rounded-full p-2 text-left transition-colors"
             :class="[
-              route.params.id === session.id
-                ? 'bg-primary-600 text-white dark:bg-primary-500 dark:text-white'
-                : 'bg-gray-400 text-white dark:bg-gray-600 dark:text-white',
-              isCollapsed ? '' : 'mr-3',
+              route.params.id === session.id && !isCollapsed
+                ? 'bg-primary-100 text-gray-900 dark:bg-primary-900/30 dark:text-primary-100'
+                : 'text-gray-700 dark:text-gray-200 hover:bg-gray-200/60 dark:hover:bg-gray-800',
+              isCollapsed ? 'justify-center cursor-pointer' : 'cursor-pointer',
             ]"
+            @click="router.push({ name: 'chat', params: { id: session.id } })"
           >
-            {{ session.name ? session.name.charAt(0) : '?' }}
-          </div>
+            <!-- Platform Icon / Text Avatar -->
+            <div
+              class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold"
+              :class="[
+                route.params.id === session.id
+                  ? 'bg-primary-600 text-white dark:bg-primary-500 dark:text-white'
+                  : 'bg-gray-400 text-white dark:bg-gray-600 dark:text-white',
+                isCollapsed ? '' : 'mr-3',
+              ]"
+            >
+              {{ session.name ? session.name.charAt(0) : '?' }}
+            </div>
 
-          <!-- Session Info -->
-          <div v-if="!isCollapsed" class="min-w-0 flex-1">
-            <p class="truncate text-sm font-medium">
-              {{ session.name }}
-            </p>
-            <p class="truncate text-xs text-gray-500 dark:text-gray-400">
-              {{ session.messageCount }} 条消息 · {{ formatTime(session.importedAt) }}
-            </p>
-          </div>
+            <!-- Session Info -->
+            <div v-if="!isCollapsed" class="min-w-0 flex-1">
+              <p class="truncate text-sm font-medium">
+                {{ session.name }}
+              </p>
+              <p class="truncate text-xs text-gray-500 dark:text-gray-400">
+                {{ session.messageCount }} 条消息 · {{ formatTime(session.importedAt) }}
+              </p>
+            </div>
 
-          <!-- Delete Button -->
-          <div v-if="!isCollapsed" class="shrink-0 opacity-0 transition-opacity group-hover:opacity-100">
-            <UPopover v-if="deleteConfirmId === session.id" :open="true" @update:open="cancelDelete">
-              <template #default>
-                <UButton
-                  icon="i-heroicons-trash"
-                  color="red"
-                  variant="ghost"
-                  size="xs"
-                  class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full"
-                  @click="(e: Event) => confirmDelete(session.id, e)"
-                />
-              </template>
-              <template #content>
-                <div class="p-3">
-                  <p class="mb-3 text-sm">确定删除此记录？</p>
-                  <div class="flex justify-end gap-2">
-                    <UButton size="xs" color="red" @click="handleDelete(session.id)">确定删除</UButton>
+            <!-- Delete Button -->
+            <div v-if="!isCollapsed" class="shrink-0 opacity-0 transition-opacity group-hover:opacity-100">
+              <UPopover v-if="deleteConfirmId === session.id" :open="true" @update:open="cancelDelete">
+                <template #default>
+                  <UButton
+                    icon="i-heroicons-trash"
+                    color="red"
+                    variant="ghost"
+                    size="xs"
+                    class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full"
+                    @click="(e: Event) => confirmDelete(session.id, e)"
+                  />
+                </template>
+                <template #content>
+                  <div class="p-3">
+                    <p class="mb-3 text-sm">确定删除此记录？</p>
+                    <div class="flex justify-end gap-2">
+                      <UButton size="xs" color="red" @click="handleDelete(session.id)">确定删除</UButton>
+                    </div>
                   </div>
-                </div>
-              </template>
-            </UPopover>
-            <UButton
-              v-else
-              icon="i-heroicons-trash"
-              color="gray"
-              variant="ghost"
-              size="xs"
-              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full"
-              @click="(e: Event) => confirmDelete(session.id, e)"
-            />
+                </template>
+              </UPopover>
+              <UButton
+                v-else
+                icon="i-heroicons-trash"
+                color="gray"
+                variant="ghost"
+                size="xs"
+                class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full"
+                @click="(e: Event) => confirmDelete(session.id, e)"
+              />
+            </div>
           </div>
-        </div>
+        </UTooltip>
       </div>
     </div>
 
     <!-- Footer -->
     <div class="border-t border-gray-200 p-4 dark:border-gray-800">
-      <UTooltip :text="isCollapsed ? '设置' : ''" :popper="{ placement: 'right' }">
+      <UTooltip :text="isCollapsed ? '设置和帮助' : ''" :popper="{ placement: 'right' }">
         <UButton
           :block="!isCollapsed"
           class="transition-all rounded-full hover:bg-gray-200/60 dark:hover:bg-gray-800 h-12 cursor-pointer"
@@ -179,7 +182,7 @@ function cancelDelete() {
           variant="ghost"
         >
           <UIcon name="i-heroicons-cog-6-tooth" class="h-5 w-5 shrink-0" :class="[isCollapsed ? '' : 'mr-2']" />
-          <span v-if="!isCollapsed" class="truncate">设置</span>
+          <span v-if="!isCollapsed" class="truncate">设置和帮助</span>
         </UButton>
       </UTooltip>
     </div>

src/components/UI/LoadingState.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+  text?: string
+  height?: string
+}>()
+</script>
+
+<template>
+  <div class="flex items-center justify-center" :class="height || 'py-8'">
+    <div class="flex flex-col items-center justify-center text-center">
+      <UIcon name="i-heroicons-arrow-path" class="h-6 w-6 animate-spin text-pink-500" />
+      <p v-if="text" class="mt-2 text-sm text-gray-500">{{ text }}</p>
+    </div>
+  </div>
+</template>

src/components/analysis/MembersTab.vue

@@ -1,8 +1,16 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import type { MemberActivity, MemberNameHistory, RepeatAnalysis, CatchphraseAnalysis, DragonKingAnalysis, MonologueAnalysis } from '@/types/chat'
+import type {
+  MemberActivity,
+  MemberNameHistory,
+  RepeatAnalysis,
+  CatchphraseAnalysis,
+  DragonKingAnalysis,
+  MonologueAnalysis,
+} from '@/types/chat'
 import { RankListPro, BarChart, ListPro } from '@/components/charts'
 import type { RankItem, BarChartData } from '@/components/charts'
+import LoadingState from '@/components/UI/LoadingState.vue'
 
 interface TimeFilter {
   startTs?: number
@@ -289,12 +297,7 @@ function formatPeriod(startTs: number, endTs: number | null): string {
     <RankListPro :members="memberRankData" title="成员活跃度排行" />
 
     <!-- 龙王排名 -->
-    <div
-      v-if="isLoadingDragonKing"
-      class="rounded-xl border border-gray-200 bg-white px-5 py-8 text-center text-sm text-gray-400 shadow-sm dark:border-gray-800 dark:bg-gray-900"
-    >
-      正在统计龙王数据...
-    </div>
+    <LoadingState v-if="isLoadingDragonKing" text="正在统计龙王数据..." />
     <RankListPro
       v-else-if="dragonKingRankData.length > 0"
       :members="dragonKingRankData"
@@ -307,14 +310,10 @@ function formatPeriod(startTs: number, endTs: number | null): string {
     <div class="rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900">
       <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
         <h3 class="font-semibold text-gray-900 dark:text-white">🎤 自言自语榜</h3>
-        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-          连续发言 ≥3 条（间隔 ≤5 分钟）统计
-        </p>
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">连续发言 ≥3 条（间隔 ≤5 分钟）统计</p>
       </div>
 
-      <div v-if="isLoadingMonologue" class="px-5 py-8 text-center text-sm text-gray-400">
-        正在统计自言自语数据...
-      </div>
+      <LoadingState v-if="isLoadingMonologue" text="正在统计自言自语数据..." />
 
       <template v-else-if="monologueAnalysis && monologueAnalysis.rank.length > 0">
         <!-- 最高纪录卡片 -->
@@ -498,7 +497,7 @@ function formatPeriod(startTs: number, endTs: number | null): string {
         该群组所有成员均未修改过昵称
       </div>
 
-      <div v-else class="px-5 py-8 text-center text-sm text-gray-400">正在加载昵称变更记录...</div>
+      <LoadingState v-else text="正在加载昵称变更记录..." />
     </div>
 
     <!-- 复读分析模块 -->
@@ -537,7 +536,7 @@ function formatPeriod(startTs: number, endTs: number | null): string {
         </div>
       </div>
 
-      <div v-if="isLoadingRepeat" class="px-5 py-8 text-center text-sm text-gray-400">正在分析复读数据...</div>
+      <LoadingState v-if="isLoadingRepeat" text="正在分析复读数据..." />
 
       <div v-else-if="repeatAnalysis && repeatAnalysis.totalRepeatChains > 0" class="space-y-6 p-5">
         <!-- 复读链长度分布 & 最火复读内容 -->
@@ -630,12 +629,7 @@ function formatPeriod(startTs: number, endTs: number | null): string {
     </div>
 
     <!-- 口头禅分析模块 -->
-    <div
-      v-if="isLoadingCatchphrase"
-      class="rounded-xl border border-gray-200 bg-white px-5 py-8 text-center text-sm text-gray-400 shadow-sm dark:border-gray-800 dark:bg-gray-900"
-    >
-      正在分析口头禅数据...
-    </div>
+    <LoadingState v-if="isLoadingCatchphrase" text="正在分析口头禅数据..." />
 
     <ListPro
       v-else-if="catchphraseAnalysis && catchphraseAnalysis.members.length > 0"

src/components/analysis/TimelineTab.vue

@@ -4,6 +4,7 @@ import type { DailyActivity, DivingAnalysis } from '@/types/chat'
 import dayjs from 'dayjs'
 import { LineChart } from '@/components/charts'
 import type { LineChartData } from '@/components/charts'
+import LoadingState from '@/components/UI/LoadingState.vue'
 
 interface TimeFilter {
   startTs?: number
@@ -156,14 +157,10 @@ watch(
     <div class="rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900">
       <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
         <h3 class="font-semibold text-gray-900 dark:text-white">🤿 潜水排名</h3>
-        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-          按最后发言时间排序，最久没发言的在前面
-        </p>
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">按最后发言时间排序，最久没发言的在前面</p>
       </div>
 
-      <div v-if="isLoadingDiving" class="px-5 py-8 text-center text-sm text-gray-400">
-        正在统计潜水数据...
-      </div>
+      <LoadingState v-if="isLoadingDiving" text="正在统计潜水数据..." />
 
       <div
         v-else-if="divingAnalysis && divingAnalysis.rank.length > 0"

src/pages/chat.vue

@@ -27,7 +27,7 @@ const timeRange = ref<{ start: number; end: number } | null>(null)
 // 年份筛选
 const availableYears = ref<number[]>([])
 const selectedYear = ref<number>(0) // 0 表示全部
-const isInitialLoad = ref(false) // 用于跳过初始加载时的 watch 触发
+const isInitialLoad = ref(true) // 用于跳过初始加载时的 watch 触发，并控制首屏加载状态
 
 // Tab 配置
 const tabs = [
@@ -186,8 +186,8 @@ onMounted(() => {
 <template>
   <div class="flex h-full flex-col bg-gray-50 dark:bg-gray-950">
     <!-- Loading State -->
-    <div v-if="isLoading && !session" class="flex h-full items-center justify-center">
-      <div class="text-center">
+    <div v-if="isInitialLoad" class="flex h-full items-center justify-center">
+      <div class="flex flex-col items-center justify-center text-center">
         <UIcon name="i-heroicons-arrow-path" class="h-8 w-8 animate-spin text-pink-500" />
         <p class="mt-2 text-sm text-gray-500">加载分析数据...</p>
       </div>
@@ -250,22 +250,12 @@ onMounted(() => {
 
       <!-- Tab Content -->
       <div class="relative flex-1 overflow-y-auto">
-        <!-- Loading Overlay - 完全覆盖内容区 -->
-        <div
-          v-if="isLoading"
-          class="absolute inset-0 z-50 flex items-center justify-center bg-gray-50 dark:bg-gray-950"
-        >
-          <div class="text-center">
-            <UIcon name="i-heroicons-arrow-path" class="h-8 w-8 animate-spin text-pink-500" />
-            <p class="mt-3 text-sm font-medium text-gray-600 dark:text-gray-400">加载中...</p>
-          </div>
-        </div>
-
         <!-- Content with padding -->
         <div class="p-6">
-          <Transition name="fade" mode="out-in">
+          <Transition name="tab-slide" mode="out-in">
             <OverviewTab
               v-if="activeTab === 'overview'"
+              :key="'overview-' + selectedYear"
               :session="session"
               :member-activity="memberActivity"
               :top-members="topMembers"
@@ -279,18 +269,21 @@ onMounted(() => {
             />
             <MembersTab
               v-else-if="activeTab === 'members'"
+              :key="'members-' + selectedYear"
               :session-id="currentSessionId!"
               :member-activity="memberActivity"
               :time-filter="timeFilter"
             />
             <TimeTab
               v-else-if="activeTab === 'time'"
+              :key="'time-' + selectedYear"
               :session-id="currentSessionId!"
               :hourly-activity="hourlyActivity"
               :time-filter="timeFilter"
             />
             <TimelineTab
               v-else-if="activeTab === 'timeline'"
+              :key="'timeline-' + selectedYear"
               :session-id="currentSessionId!"
               :daily-activity="dailyActivity"
               :time-range="timeRange"
@@ -309,13 +302,20 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.15s ease;
+.tab-slide-enter-active,
+.tab-slide-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
 }
 
-.fade-enter-from,
-.fade-leave-to {
+.tab-slide-enter-from {
   opacity: 0;
+  transform: translateY(10px);
+}
+
+.tab-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
 }
 </style>

src/pages/index.vue

@@ -2,6 +2,7 @@
 import { useChatStore } from '@/stores/chat'
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 const chatStore = useChatStore()
 const { isImporting, importProgress } = storeToRefs(chatStore)
@@ -36,11 +37,15 @@ const features = [
   },
 ]
 
+const router = useRouter()
+
 async function handleImport() {
   importError.value = null
   const result = await chatStore.importFile()
   if (!result.success && result.error && result.error !== '未选择文件') {
     importError.value = result.error
+  } else if (result.success && chatStore.currentSessionId) {
+    router.push({ name: 'chat', params: { id: chatStore.currentSessionId } })
   }
 }
 
@@ -88,6 +93,8 @@ async function handleDrop(e: DragEvent) {
   const result = await chatStore.importFileFromPath(filePath)
   if (!result.success && result.error) {
     importError.value = result.error
+  } else if (result.success && chatStore.currentSessionId) {
+    router.push({ name: 'chat', params: { id: chatStore.currentSessionId } })
   }
 }
 
@@ -100,15 +107,15 @@ function getProgressText(): string {
   if (!importProgress.value) return ''
   switch (importProgress.value.stage) {
     case 'reading':
-      return '读取文件中...'
+      return '正在读取中...'
     case 'parsing':
-      return '解析聊天记录...'
+      return '解析器解析中...'
     case 'saving':
-      return '保存数据...'
+      return '写入本地数据库中...'
     case 'done':
-      return '导入完成！'
+      return '导入完成'
     case 'error':
-      return '导入失败'
+      return '导入中断'
     default:
       return ''
   }
@@ -121,13 +128,6 @@ function getProgressText(): string {
     <div class="relative z-10 flex h-full w-full flex-col items-center justify-center px-4">
       <!-- Hero Section -->
       <div class="mb-12 text-center">
-        <div
-          class="mb-6 inline-flex items-center justify-center rounded-3xl bg-white p-4 shadow-lg shadow-pink-100 ring-1 ring-gray-100 dark:bg-gray-900 dark:shadow-pink-900/20 dark:ring-gray-800"
-          :class="[isImporting ? '' : 'animate-bounce']"
-        >
-          <UIcon v-if="!isImporting" name="i-heroicons-sparkles" class="h-8 w-8 text-pink-500" />
-          <UIcon v-else name="i-heroicons-arrow-path" class="h-8 w-8 animate-spin text-pink-500" />
-        </div>
         <h1
           class="mb-4 bg-linear-to-r from-pink-600 via-pink-500 to-rose-400 bg-clip-text text-5xl font-black tracking-tight text-transparent sm:text-6xl"
         >
@@ -186,7 +186,7 @@ function getProgressText(): string {
               <!-- 导入中显示进度 -->
               <p class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">{{ getProgressText() }}</p>
               <div class="mx-auto w-full max-w-md">
-                <UProgress :value="importProgress.progress" size="md" color="pink" />
+                <UProgress v-model="importProgress.progress" size="md" />
               </div>
               <p class="mt-3 text-sm text-gray-500 dark:text-gray-400">
                 {{ importProgress.message }}

src/stores/chat.ts

@@ -68,15 +68,50 @@ export const useChatStore = defineStore(
       try {
         // 开始导入
         isImporting.value = true
+
+        // 初始化状态
         importProgress.value = {
           stage: 'reading',
           progress: 0,
-          message: '准备导入...',
+          message: '',
+        }
+
+        // 进度队列控制
+        const queue: ImportProgress[] = []
+        let isProcessing = false
+        let currentStage = 'reading'
+        let lastStageTime = Date.now()
+        const MIN_STAGE_TIME = 1000 // 每个阶段至少展示1秒
+
+        const processQueue = async () => {
+          if (isProcessing) return
+          isProcessing = true
+
+          while (queue.length > 0) {
+            const next = queue[0]
+
+            // 如果阶段发生变化，确保上一阶段展示了足够时间
+            if (next.stage !== currentStage) {
+              const elapsed = Date.now() - lastStageTime
+              if (elapsed < MIN_STAGE_TIME) {
+                await new Promise((resolve) => setTimeout(resolve, MIN_STAGE_TIME - elapsed))
+              }
+              currentStage = next.stage
+              lastStageTime = Date.now()
+            }
+
+            // 更新状态
+            importProgress.value = queue.shift()!
+          }
+          isProcessing = false
         }
 
         // 监听导入进度
         const unsubscribe = window.chatApi.onImportProgress((progress) => {
-          importProgress.value = progress
+          // 跳过完成状态，直接跳转
+          if (progress.stage === 'done') return
+          queue.push(progress)
+          processQueue()
         })
 
         // 执行导入
@@ -85,6 +120,25 @@ export const useChatStore = defineStore(
         // 取消监听
         unsubscribe()
 
+        // 等待队列处理完成
+        while (queue.length > 0 || isProcessing) {
+          await new Promise((resolve) => setTimeout(resolve, 100))
+        }
+
+        // 确保最后一个阶段也展示足够时间
+        const elapsed = Date.now() - lastStageTime
+        if (elapsed < MIN_STAGE_TIME) {
+          await new Promise((resolve) => setTimeout(resolve, MIN_STAGE_TIME - elapsed))
+        }
+
+        // 确保进度条走完
+        if (importProgress.value) {
+          importProgress.value.progress = 100
+        }
+
+        // 给一点时间展示 100%
+        await new Promise((resolve) => setTimeout(resolve, 300))
+
         if (importResult.success && importResult.sessionId) {
           // 刷新会话列表
           await loadSessions()
@@ -101,7 +155,7 @@ export const useChatStore = defineStore(
         // 延迟清除进度，让用户看到完成状态
         setTimeout(() => {
           importProgress.value = null
-        }, 1500)
+        }, 500)
       }
     }
 
@@ -143,6 +197,13 @@ export const useChatStore = defineStore(
       currentSessionId.value = null
     }
 
+    // 侧边栏状态
+    const isSidebarCollapsed = ref(false)
+
+    function toggleSidebar() {
+      isSidebarCollapsed.value = !isSidebarCollapsed.value
+    }
+
     return {
       // State
       sessions,
@@ -150,6 +211,7 @@ export const useChatStore = defineStore(
       isImporting,
       importProgress,
       isInitialized,
+      isSidebarCollapsed,
       // Computed
       currentSession,
       // Actions
@@ -159,13 +221,14 @@ export const useChatStore = defineStore(
       selectSession,
       deleteSession,
       clearSelection,
+      toggleSidebar,
     }
   },
   {
     persist: {
       // 使用 sessionStorage：页面刷新时保留，应用重启时清除
       // 这样启动应用默认显示 WelcomeGuide，但刷新页面保留当前状态
-      pick: ['currentSessionId'],
+      pick: ['currentSessionId', 'isSidebarCollapsed'],
       storage: sessionStorage,
     },
   }