style(navigation): align sidebar and tab states

src/components/common/Sidebar.vue

@@ -414,7 +414,7 @@ function getAvatarColorClass(session: AnalysisSession, isActive: boolean) {
     class="m-3 flex h-[calc(100%-1.5rem)] shrink-0 flex-col overflow-hidden rounded-lg bg-white 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']">
+    <div class="flex flex-col px-2 pb-4 pt-5">
       <!-- Header -->
       <div
         class="mb-2 flex items-center"
@@ -538,8 +538,7 @@ function getAvatarColorClass(session: AnalysisSession, isActive: boolean) {
           <div
             v-for="virtualItem in virtualSessionItems"
             :key="String(virtualItem.key)"
-            class="absolute"
-            :class="[isCollapsed ? 'left-2 right-2' : 'left-4 right-4']"
+            class="absolute left-2 right-2"
             :style="{ transform: `translateY(${virtualItem.start}px)` }"
           >
             <UContextMenu :items="getContextMenuItems(virtualSessionAt(virtualItem.index))">
@@ -554,7 +553,7 @@ function getAvatarColorClass(session: AnalysisSession, isActive: boolean) {
                   :class="[
                     route.params.id === virtualSessionAt(virtualItem.index).id
                       ? 'text-primary-600 font-medium dark:text-primary-400'
-                      : 'text-gray-600 dark:text-gray-300 hover:bg-gray-200/30 dark:hover:bg-white/[0.06]',
+                      : 'text-gray-600 dark:text-gray-300 hover:bg-gray-200/20 dark:hover:bg-white/[0.04]',
                     isCollapsed
                       ? 'justify-center h-10 w-10 rounded-lg mx-auto'
                       : 'h-10 w-full rounded-xl p-1.5 px-2.5 pl-1.5',
@@ -569,9 +568,8 @@ function getAvatarColorClass(session: AnalysisSession, isActive: boolean) {
                 >
                   <!-- 激活指示器：在展开和折叠下，都优雅地贴在侧边栏最左侧边缘 -->
                   <div
-                    class="absolute top-1/2 -translate-y-1/2 w-[3px] rounded-r-full bg-primary-500 transition-all duration-200"
+                    class="absolute -left-2 top-1/2 w-[3px] -translate-y-1/2 rounded-r-full bg-primary-500 transition-all duration-200"
                     :class="[
-                      isCollapsed ? '-left-2' : '-left-4',
                       route.params.id === virtualSessionAt(virtualItem.index).id
                         ? 'h-4.5 opacity-100'
                         : 'h-0 opacity-0 group-hover:h-2.5 group-hover:opacity-40',

src/components/common/sidebar/SidebarButton.vue

@@ -33,7 +33,7 @@ const { isSidebarCollapsed: isCollapsed } = storeToRefs(layoutStore)
       :class="[
         active
           ? 'text-primary-600 dark:text-primary-400'
-          : 'text-gray-600 dark:text-gray-300 hover:bg-gray-200/40 dark:hover:bg-white/[0.06]',
+          : 'text-gray-600 dark:text-gray-300 hover:bg-gray-200/20 dark:hover:bg-white/[0.04]',
       ]"
     >
       <span
@@ -46,7 +46,7 @@ const { isSidebarCollapsed: isCollapsed } = storeToRefs(layoutStore)
   <!-- 展开状态：直接渲染 UButton，标题已可见，无需 tooltip -->
   <UButton
     v-else
-    class="relative h-10 w-[calc(100%-8px)] cursor-pointer justify-start rounded-xl pl-2.5 transition-all duration-200 hover:bg-gray-200/40 dark:hover:bg-white/[0.06]"
+    class="relative h-10 w-full cursor-pointer justify-start rounded-xl pl-2.5 transition-all duration-200 hover:bg-gray-200/20 active:bg-gray-200/20 dark:hover:bg-white/[0.04] dark:active:bg-white/[0.04]"
     :class="[
       active
         ? 'text-primary-600 font-medium dark:text-primary-400'
@@ -55,7 +55,7 @@ const { isSidebarCollapsed: isCollapsed } = storeToRefs(layoutStore)
     color="neutral"
     variant="ghost"
   >
-    <span v-if="active" class="absolute -left-4 top-1/2 h-4.5 w-[3px] -translate-y-1/2 rounded-r-full bg-primary-500" />
+    <span v-if="active" class="absolute -left-2 top-1/2 h-4.5 w-[3px] -translate-y-1/2 rounded-r-full bg-primary-500" />
     <UIcon :name="icon" class="mr-2.5 h-5 w-5 shrink-0" :class="iconClass" />
     <span class="truncate text-xs font-medium">{{ title }}</span>
   </UButton>

src/components/common/sidebar/SidebarFooter.vue

@@ -6,11 +6,11 @@ import SidebarButton from './SidebarButton.vue'
 
 const { t } = useI18n()
 const layoutStore = useLayoutStore()
-const { showSettings, isSidebarCollapsed: isCollapsed } = storeToRefs(layoutStore)
+const { showSettings } = storeToRefs(layoutStore)
 </script>
 
 <template>
-  <div class="mb-2 space-y-2 py-2 dark:border-gray-800" :class="[isCollapsed ? 'px-2' : 'px-4']">
+  <div class="mb-2 space-y-2 px-2 py-2 dark:border-gray-800">
     <!-- 设置 -->
     <SidebarButton
       icon="i-heroicons-cog-6-tooth"

src/components/navigation/PageTabs.vue

@@ -42,8 +42,8 @@ function selectItem(item: PageTabItem): void {
           class="flex shrink-0 items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-semibold whitespace-nowrap transition-colors"
           :class="
             modelValue === item.id
-              ? 'bg-primary-500 text-white dark:bg-primary-900/30 dark:text-primary-300'
-              : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800'
+              ? 'bg-primary-500 text-white dark:bg-primary-900/30 dark:text-primary-400'
+              : 'text-gray-600 hover:bg-primary-50 dark:text-gray-400 dark:hover:bg-primary-900/20'
           "
           :aria-pressed="item.to ? undefined : modelValue === item.id"
           @click="selectItem(item)"