feat: 优化全局背景色

electron.vite.config.ts

@@ -44,7 +44,7 @@ export default defineConfig(() => {
           ui: {
             colors: {
               primary: 'pink', // 使用自定义 pink 作为主色
-              neutral: 'slate',
+              neutral: 'zinc',
             },
           },
         }),

src/App.vue

@@ -37,6 +37,8 @@ onMounted(async () => {
 <template>
   <UApp :tooltip="tooltip">
     <div class="flex h-screen w-full overflow-hidden bg-white dark:bg-gray-950">
+    <div class="relative flex h-screen w-full overflow-hidden bg-gray-50 dark:bg-gray-900">
+      <!-- 主内容区域 -->
       <template v-if="!isInitialized">
         <div class="flex h-full w-full items-center justify-center">
           <div class="flex flex-col items-center justify-center text-center">
@@ -47,7 +49,7 @@ onMounted(async () => {
       </template>
       <template v-else>
         <Sidebar />
-        <main class="flex-1 overflow-hidden">
+        <main class="relative flex-1 overflow-hidden">
           <router-view v-slot="{ Component }">
             <Transition name="page-fade" mode="out-in">
               <component :is="Component" :key="route.path" />
@@ -56,10 +58,7 @@ onMounted(async () => {
         </main>
       </template>
     </div>
-    <SettingModal
-      v-model:open="layoutStore.showSettingModal"
-      @ai-config-saved="promptStore.notifyAIConfigChanged"
-    />
+    <SettingModal v-model:open="layoutStore.showSettingModal" @ai-config-saved="promptStore.notifyAIConfigChanged" />
     <ScreenCaptureModal
       :open="layoutStore.showScreenCaptureModal"
       :image-data="layoutStore.screenCaptureImage"

src/assets/styles/main.css

@@ -15,6 +15,9 @@
   --color-pink-800: #a01d42;
   --color-pink-900: #84173b;
   --color-pink-950: #4a071c;
+
+  /* 分析页面使用的更深背景 - 统一使用 zinc-900 */
+  --color-page-dark: #18181b;
 }
 
 /* 全局滚动条样式 */

src/components/UI/SubTabs.vue

@@ -143,8 +143,8 @@ watch(
   <div
     :class="[
       isVertical
-        ? 'h-full border-r border-gray-200 dark:border-gray-700'
-        : 'border-b border-gray-200 bg-white px-6 dark:border-gray-800 dark:bg-gray-900',
+        ? 'h-full border-r border-gray-200/50 dark:border-gray-700/50'
+        : 'border-b border-gray-200/50 px-6 dark:border-gray-800/50',
     ]"
   >
     <div ref="containerRef" class="relative" :class="[isVertical ? 'flex flex-col gap-1' : 'flex gap-1']">

src/components/analysis/ai/ConversationList.vue

@@ -307,20 +307,20 @@ defineExpose({
               >
                 <!-- 左侧渐变过渡区域 -->
                 <div
-                  class="absolute inset-y-0 -left-6 w-6 bg-gradient-to-r from-transparent"
+                  class="absolute inset-y-0 -left-6 w-6 bg-linear-to-r from-transparent"
                   :class="[
                     activeId === conv.id
                       ? 'to-gray-100 dark:to-gray-800'
-                      : 'to-white group-hover:to-gray-50 dark:to-gray-900 dark:group-hover:to-gray-800/50',
+                      : 'to-gray-50 group-hover:to-gray-100 dark:to-gray-900 dark:group-hover:to-gray-800',
                   ]"
                 />
-                <!-- 按钮组（实色背景，h-full 确保完全覆盖） -->
+                <!-- 按钮组背景 -->
                 <div
                   class="relative flex h-full items-center gap-0.5 pl-1 pr-0.5"
                   :class="[
                     activeId === conv.id
                       ? 'bg-gray-100 dark:bg-gray-800'
-                      : 'bg-white group-hover:bg-gray-50 dark:bg-gray-900 dark:group-hover:bg-gray-800/50',
+                      : 'bg-gray-50 group-hover:bg-gray-100 dark:bg-gray-900 dark:group-hover:bg-gray-800',
                   ]"
                 >
                   <UButton

src/components/common/Sidebar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { ref, onMounted, nextTick } from 'vue'
+import { ref, computed, onMounted, nextTick } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import type { AnalysisSession } from '@/types/base'
@@ -24,6 +24,9 @@ const { toggleSidebar } = layoutStore
 const router = useRouter()
 const route = useRoute()
 
+// 是否在首页
+const isHomePage = computed(() => route.path === '/')
+
 // 重命名相关状态
 const showRenameModal = ref(false)
 const renameTarget = ref<AnalysisSession | null>(null)
@@ -159,10 +162,10 @@ function getSessionAvatarText(session: AnalysisSession): string {
 
 <template>
   <div
-    class="flex h-full flex-col border-r border-gray-200 bg-gray-50 transition-all duration-300 ease-in-out dark:border-gray-800 dark:bg-gray-900"
-    :class="[isCollapsed ? 'w-20' : 'w-72']"
+    class="flex h-full flex-col border-r border-gray-200/50 transition-all duration-300 ease-in-out dark:border-gray-800/50"
+    :class="[isCollapsed ? 'w-20' : 'w-72', isHomePage ? '' : 'bg-gray-50 dark:bg-gray-900']"
   >
-    <div class="flex flex-col p-4">
+    <div class="flex flex-col p-4 pt-8">
       <!-- Header -->
       <div class="mb-2 flex items-center" :class="[isCollapsed ? 'justify-center' : 'justify-between']">
         <div v-if="!isCollapsed" class="flex items-baseline ml-2">
@@ -283,10 +286,6 @@ function getSessionAvatarText(session: AnalysisSession): string {
           </UTooltip>
         </div>
       </div>
-      <!-- Fade overlay at bottom -->
-      <div
-        class="absolute bottom-0 left-0 right-0 h-16 pointer-events-none bg-linear-to-t from-gray-50 dark:from-gray-900 to-transparent"
-      />
     </div>
 
     <!-- Rename Modal -->

src/components/layout/PageHeader.vue

@@ -13,7 +13,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="border-b border-gray-200 bg-white px-6 pt-4 pb-2 dark:border-gray-800 dark:bg-gray-900">
+  <div class="border-b border-gray-200/50 px-6 pb-2 dark:border-gray-800/50">
     <!-- 标题区域 -->
     <div class="flex items-center justify-between">
       <div class="flex items-center gap-3">

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

@@ -27,7 +27,7 @@
       "error": "Import interrupted"
     },
     "processed": "{count} messages processed",
-    "tutorial": "View import tutorial →",
+    "tutorial": "View import tutorial",
     "viewLog": "View import log",
     "cannotReadPath": "Cannot read file path",
     "preparing": "Preparing import...",
@@ -48,4 +48,3 @@
     "failed": "Migration failed"
   }
 }
-

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

@@ -27,7 +27,7 @@
       "error": "导入中断"
     },
     "processed": "已处理 {count} 条消息",
-    "tutorial": "查看聊天记录导入教程 →",
+    "tutorial": "查看聊天记录导入教程",
     "viewLog": "查看导入日志",
     "cannotReadPath": "无法读取文件路径",
     "preparing": "准备导入...",

src/pages/group-chat/index.vue

@@ -249,7 +249,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex h-full flex-col bg-gray-50 dark:bg-gray-950">
+  <div class="flex h-full flex-col bg-white pt-8 dark:bg-gray-900">
     <!-- Loading State -->
     <LoadingState v-if="isInitialLoad" variant="page" :text="t('analysis.groupChat.loading')" />
 

src/pages/home/components/ImportArea.vue

@@ -153,25 +153,29 @@ function getProgressDetail(): string {
     >
       <template #default="{ isDragOver }">
         <div
-          class="group relative flex w-full cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-pink-300/50 bg-white/50 px-8 py-8 backdrop-blur-sm transition-all duration-300 hover:border-pink-400 hover:bg-white/80 hover:shadow-lg hover:shadow-pink-500/10 focus:outline-none focus:ring-4 focus:ring-pink-500/20 sm:px-12 sm:py-12 dark:border-pink-700/50 dark:bg-gray-900/50 dark:hover:border-pink-500 dark:hover:bg-gray-900/80"
+          class="group relative flex w-full cursor-pointer flex-col items-center justify-center rounded-3xl border border-gray-200/50 bg-white/40 px-8 py-10 backdrop-blur-md transition-all duration-300 hover:border-pink-500/30 hover:bg-white/60 hover:shadow-2xl hover:shadow-pink-500/10 focus:outline-none focus:ring-4 focus:ring-pink-500/20 sm:px-12 sm:py-14 dark:border-white/10 dark:bg-white/5 dark:hover:border-pink-500/30 dark:hover:bg-white/10"
           :class="{
-            'border-pink-500 bg-pink-50/50 dark:border-pink-400 dark:bg-pink-900/20': isDragOver && !isImporting,
+            'border-pink-500/50 bg-pink-50/50 dark:border-pink-400/50 dark:bg-pink-500/10': isDragOver && !isImporting,
             'cursor-not-allowed opacity-70': isImporting,
-            'hover:scale-[1.02]': !isImporting,
+            'hover:scale-[1.01]': !isImporting,
           }"
           @click="!isImporting && handleClickImport()"
         >
           <!-- Icon -->
           <div
-            class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-linear-to-br from-pink-100 to-rose-100 transition-transform duration-300 dark:from-pink-900/30 dark:to-rose-900/30"
+            class="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-pink-50 transition-transform duration-300 group-hover:scale-110 dark:bg-pink-500/10"
             :class="{ 'scale-110': isDragOver && !isImporting, 'animate-pulse': isImporting }"
           >
             <UIcon
               v-if="!isImporting"
               name="i-heroicons-arrow-up-tray"
-              class="h-8 w-8 text-pink-600 transition-transform group-hover:-translate-y-1 dark:text-pink-400"
+              class="h-10 w-10 text-pink-600 transition-transform duration-200 group-hover:-translate-y-1 dark:text-pink-400"
+            />
+            <UIcon
+              v-else
+              name="i-heroicons-arrow-path"
+              class="h-10 w-10 animate-spin text-pink-600 dark:text-pink-400"
             />
-            <UIcon v-else name="i-heroicons-arrow-path" class="h-8 w-8 animate-spin text-pink-600 dark:text-pink-400" />
           </div>
 
           <!-- Text -->
@@ -219,6 +223,8 @@ function getProgressDetail(): string {
       <UButton v-if="hasImportLog" size="xs" @click="openLatestImportLog">{{ t('home.import.viewLog') }}</UButton>
     </div>
 
-    <UButton @click="openTutorial">{{ t('home.import.tutorial') }}</UButton>
+    <UButton @click="openTutorial" trailing-icon="i-heroicons-chevron-right-20-solid">
+      {{ t('home.import.tutorial') }}
+    </UButton>
   </div>
 </template>

src/pages/home/index.vue

@@ -24,20 +24,7 @@ const features = computed(() => [
 </script>
 
 <template>
-  <div class="relative flex h-full w-full overflow-hidden bg-gray-50 dark:bg-gray-950">
-    <!-- Animated Background -->
-    <div class="absolute inset-0 overflow-hidden pointer-events-none">
-      <div
-        class="absolute -top-[20%] -left-[10%] h-[70%] w-[70%] rounded-full bg-purple-200/30 blur-[120px] mix-blend-multiply animate-blob dark:bg-purple-900/20 dark:mix-blend-screen"
-      ></div>
-      <div
-        class="absolute -top-[20%] -right-[10%] h-[70%] w-[70%] rounded-full bg-pink-200/30 blur-[120px] mix-blend-multiply animate-blob animation-delay-2000 dark:bg-pink-900/20 dark:mix-blend-screen"
-      ></div>
-      <div
-        class="absolute -bottom-[20%] left-[20%] h-[70%] w-[70%] rounded-full bg-blue-200/30 blur-[120px] mix-blend-multiply animate-blob animation-delay-4000 dark:bg-blue-900/20 dark:mix-blend-screen"
-      ></div>
-    </div>
-
+  <div class="relative flex h-full w-full overflow-hidden pt-8">
     <!-- Content Container -->
     <div class="relative h-full w-full overflow-y-auto">
       <div class="flex min-h-full w-full flex-col items-center justify-center px-4 py-12">

src/pages/private-chat/index.vue

@@ -223,7 +223,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex h-full flex-col bg-gray-50 dark:bg-gray-950">
+  <div class="flex h-full flex-col bg-white pt-8 dark:bg-gray-900">
     <!-- Loading State -->
     <LoadingState v-if="isInitialLoad" variant="page" :text="t('analysis.privateChat.loading')" />
 

src/pages/tools/index.vue

@@ -16,7 +16,7 @@ const activeTab = ref('merge')
 </script>
 
 <template>
-  <div class="flex h-full flex-col bg-gray-50 dark:bg-gray-950">
+  <div class="flex h-full flex-col bg-white pt-8 dark:bg-[var(--color-page-dark)]">
     <!-- Header -->
     <PageHeader
       :title="t('tools.title')"