fix: 优化版本号显示样式 (v1.3.1)

CHANGELOG.md

@@ -5,6 +5,14 @@
 格式基于 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.0.0/)，
 版本号遵循 [语义化版本](https://semver.org/lang/zh-CN/)。
 
+## [1.3.1] - 2026-01-26
+
+### 优化
+- **版本号显示优化** - 侧边栏版本号按钮样式改进
+  - 移至次级导航区域，与其他菜单项样式一致
+  - 更新日志改用 Sheet 组件（右侧滑出），替代底部 Drawer
+  - 统一暗色主题下的视觉效果
+
 ## [1.3.0] - 2026-01-26
 
 ### 新增

web/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "web",
 	"private": true,
-	"version": "1.3.0",
+	"version": "1.3.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

web/src/lib/components/ChangelogDrawer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import * as Drawer from '$lib/components/ui/drawer';
+	import * as Sheet from '$lib/components/ui/sheet';
 	import { Button } from '$lib/components/ui/button';
-	import X from '@lucide/svelte/icons/x';
 	import Calendar from '@lucide/svelte/icons/calendar';
 	import Tag from '@lucide/svelte/icons/tag';
 
@@ -9,6 +8,18 @@
 
 	// Changelog 内容（从 CHANGELOG.md 解析或硬编码）
 	const changelog = [
+		{
+			version: '1.3.1',
+			date: '2026-01-26',
+			changes: {
+				优化: [
+					'版本号显示优化 - 侧边栏版本号按钮样式改进',
+					'移至次级导航区域，与其他菜单项样式一致',
+					'更新日志改用 Sheet 组件（右侧滑出），替代底部 Drawer',
+					'统一暗色主题下的视觉效果'
+				]
+			}
+		},
 		{
 			version: '1.3.0',
 			date: '2026-01-26',
@@ -65,18 +76,16 @@
 	];
 </script>
 
-<Drawer.Root bind:open>
+<Sheet.Root bind:open>
-	<Drawer.Content class="max-h-[90vh]">
+	<Sheet.Content side="right" class="w-[400px] sm:w-[500px] overflow-hidden">
-		<Drawer.Header class="border-b">
+		<Sheet.Header>
-			<div class="flex items-center justify-between">
+			<Sheet.Title class="text-xl font-semibold">版本更新日志</Sheet.Title>
-				<Drawer.Title class="text-xl font-semibold">版本更新日志</Drawer.Title>
+			<Sheet.Description class="text-muted-foreground">
-				<Button variant="ghost" size="icon" onclick={() => (open = false)}>
+				查看 BillAI 的版本更新历史
-					<X class="size-4" />
+			</Sheet.Description>
-				</Button>
+		</Sheet.Header>
-			</div>
-		</Drawer.Header>
 
-		<div class="h-[calc(90vh-8rem)] overflow-y-auto p-6">
+		<div class="flex-1 overflow-y-auto py-6">
 			<div class="space-y-8">
 				{#each changelog as release}
 					<div class="space-y-3">
@@ -113,8 +122,8 @@
 			</div>
 		</div>
 
-		<Drawer.Footer class="border-t">
+		<Sheet.Footer class="border-t pt-4">
 			<Button variant="outline" onclick={() => (open = false)} class="w-full">关闭</Button>
-		</Drawer.Footer>
+		</Sheet.Footer>
-	</Drawer.Content>
+	</Sheet.Content>
-</Drawer.Root>
+</Sheet.Root>

web/src/routes/+layout.svelte

@@ -229,31 +229,26 @@
                 </Sidebar.MenuButton>
               </Sidebar.MenuItem>
             {/each}
+            
+            <!-- 版本号 -->
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton>
+                {#snippet child({ props })}
+                  <button {...props} onclick={() => changelogOpen = true} title="查看更新日志">
+                    <Info class="size-4" />
+                    <span>v{appVersion}</span>
+                  </button>
+                {/snippet}
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
           </Sidebar.Menu>
         </Sidebar.GroupContent>
       </Sidebar.Group>
     </Sidebar.Content>
 
-    <!-- Footer: 用户信息 + 版本号 -->
+    <!-- Footer: 用户信息 -->
     <Sidebar.Footer>
       <Sidebar.Menu>
-        <!-- 版本号 -->
-        <Sidebar.MenuItem>
-          <Sidebar.MenuButton>
-            {#snippet child({ props })}
-              <button 
-                {...props} 
-                onclick={() => changelogOpen = true}
-                class="w-full"
-                title="查看更新日志"
-              >
-                <Info class="size-4" />
-                <span class="text-xs">v{appVersion}</span>
-              </button>
-            {/snippet}
-          </Sidebar.MenuButton>
-        </Sidebar.MenuItem>
-        
         <!-- 用户信息 -->
         <Sidebar.MenuItem>
           <DropdownMenu.Root>