style(ai): refine conversation sidebar layout

src/assets/styles/main.css

@@ -25,6 +25,9 @@
   --color-card-bg: #ffffff;
   --color-card-dark: rgba(255, 255, 255, 0.03);
 
+  /* 悬浮侧栏背景 */
+  --color-sidebar-dark: #202024;
+
   /* 悬浮表面阴影 - 减少向下偏移，避免底边过重 */
   --shadow-elevated: 0 10px 28px -12px rgb(15 23 42 / 0.22), 0 3px 10px -4px rgb(15 23 42 / 0.1);
 

src/components/AIChat/ChatExplorer.vue

@@ -326,7 +326,6 @@ watch(
       :session-id="sessionId"
       :active-id="currentAIChatId"
       :disabled="isAIThinking"
-      class="h-full shrink-0"
       @select="handleSelectAIChat"
       @create="handleCreateAIChat"
       @delete="handleDeleteAIChat"
@@ -481,7 +480,7 @@ watch(
 
           <!-- 预设问题气泡（仅在对话为空时显示） -->
           <div v-if="messages.length === 0 && !isAIThinking" class="px-4 pb-2">
-            <div class="mx-auto max-w-3xl">
+            <div class="mx-auto max-w-[740px]">
               <PresetQuestions
                 :questions="currentPresetQuestions"
                 :leading-action-label="t('ai.chat.input.useSkill')"

src/components/AIChat/chat/ConversationList.vue

@@ -176,13 +176,17 @@ defineExpose({
 
 <template>
   <div
-    class="flex flex-col border-r border-gray-200 bg-white transition-all dark:border-gray-800 dark:bg-page-dark"
-    :class="isCollapsed ? 'w-10' : 'w-64'"
+    class="m-3 flex h-[calc(100%-1.5rem)] shrink-0 flex-col overflow-hidden rounded-lg bg-white shadow-elevated transition-all duration-300 ease-in-out dark:bg-sidebar-dark"
+    :class="isCollapsed ? 'w-14' : 'w-64'"
   >
     <!-- 头部 -->
     <div
-      class="flex items-center border-b border-gray-200 dark:border-gray-800"
-      :class="isCollapsed ? 'justify-center px-0 py-2' : 'justify-between pl-3 pr-2 py-2'"
+      class="flex items-center"
+      :class="
+        isCollapsed
+          ? 'justify-center px-2 pb-2 pt-5'
+          : 'justify-between border-b border-gray-200 py-2 pl-3 pr-2 dark:border-gray-800'
+      "
     >
       <template v-if="!isCollapsed">
         <button
@@ -194,19 +198,24 @@ defineExpose({
           <UIcon name="i-heroicons-plus" class="h-3.5 w-3.5" />
           <span>{{ t('ai.chat.conversation.newConversation') }}</span>
         </button>
-        <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"
+        <UButton
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          class="group flex h-9 w-9 cursor-pointer items-center justify-center rounded-full hover:bg-gray-200/60 dark:hover:bg-white/[0.06]"
           @click="isCollapsed = !isCollapsed"
         >
-          <UIcon name="i-heroicons-chevron-left" class="h-4 w-4" />
-        </button>
+          <UIcon name="i-lucide-panel-right" class="size-4 scale-x-[-1] group-hover:hidden" />
+          <UIcon name="i-lucide-panel-right-close" class="size-4 hidden scale-x-[-1] group-hover:block" />
+        </UButton>
       </template>
       <template v-else>
         <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"
+          type="button"
+          class="group relative flex h-9 w-9 cursor-pointer items-center justify-center rounded-full hover:bg-gray-200/60 dark:hover:bg-white/[0.06]"
           @click="isCollapsed = !isCollapsed"
         >
-          <UIcon name="i-heroicons-chevron-right" class="h-4 w-4" />
+          <UIcon name="i-lucide-panel-right-open" class="size-4 scale-x-[-1]" />
         </button>
       </template>
     </div>
@@ -332,28 +341,34 @@ defineExpose({
     </div>
 
     <!-- 折叠状态列表 -->
-    <div v-else class="flex flex-1 flex-col items-center gap-2 overflow-y-auto py-2">
+    <div v-else class="flex flex-1 flex-col items-center gap-1 overflow-y-auto px-2 pb-2">
       <button
-        class="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-pink-500 dark:hover:bg-gray-800"
+        class="flex h-10 w-10 items-center justify-center rounded-lg text-gray-600 transition-colors hover:bg-gray-200/40 hover:text-primary-600 dark:text-gray-300 dark:hover:bg-white/[0.06] dark:hover:text-primary-400"
         :title="t('ai.chat.conversation.newConversation')"
         :disabled="disabled"
         :class="{ 'cursor-not-allowed opacity-50': disabled }"
         @click="!disabled && emit('create')"
       >
-        <UIcon name="i-heroicons-plus" class="h-4 w-4" />
+        <UIcon name="i-heroicons-plus" class="h-5 w-5" />
       </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']"
+        class="relative mx-auto flex h-10 w-10 items-center justify-center rounded-lg transition-all duration-200"
+        :class="[
+          activeId === conv.id
+            ? 'bg-gray-200/50 text-primary-600 dark:bg-white/[0.07] dark:text-primary-400 dark:ring-1 dark:ring-white/10'
+            : 'text-gray-600 hover:bg-gray-200/40 dark:text-gray-300 dark:hover:bg-white/[0.06]',
+        ]"
         :title="getTitle(conv)"
         @click="emit('select', conv.id)"
       >
-        <UIcon name="i-heroicons-chat-bubble-left" class="h-4 w-4" />
+        <span
+          v-if="activeId === conv.id"
+          class="absolute -left-2 top-1/2 h-4.5 w-[3px] -translate-y-1/2 rounded-r-full bg-primary-500"
+        />
+        <UIcon name="i-heroicons-chat-bubble-left" class="h-5 w-5" />
       </button>
     </div>
   </div>

src/components/common/Sidebar.vue

@@ -411,7 +411,7 @@ function getAvatarColorClass(session: AnalysisSession, isActive: boolean) {
 
 <template>
   <div
-    class="m-3 flex h-[calc(100%-1.5rem)] shrink-0 flex-col overflow-hidden rounded-lg bg-white shadow-elevated transition-all duration-300 ease-in-out dark:bg-[#202024]"
+    class="m-3 flex h-[calc(100%-1.5rem)] shrink-0 flex-col overflow-hidden rounded-lg bg-white shadow-elevated transition-all duration-300 ease-in-out dark:bg-sidebar-dark"
     :class="isCollapsed ? 'w-14' : 'w-72'"
   >
     <div class="flex flex-col pt-5" :class="[isCollapsed ? 'px-2 pb-4' : 'p-4']">

src/components/common/sidebar/SidebarButton.vue

@@ -50,9 +50,9 @@ const { isSidebarCollapsed: isCollapsed } = storeToRefs(layoutStore)
     :class="[
       active
         ? 'bg-gray-200/50 text-primary-600 font-medium dark:bg-white/[0.07] dark:text-primary-400 dark:ring-1 dark:ring-white/10'
-        : 'text-gray-600 dark:text-gray-300',
+        : 'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white',
     ]"
-    color="gray"
+    color="neutral"
     variant="ghost"
   >
     <UIcon :name="icon" class="mr-2.5 h-5 w-5 shrink-0" :class="iconClass" />