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/app.d.ts

@@ -8,6 +8,9 @@ declare global {
 		// interface PageState {}
 		// interface Platform {}
 	}
+
+	// Vite 注入的全局变量
+	const __APP_VERSION__: string;
 }
 
 export {};

web/src/lib/components/ChangelogDrawer.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import * as Sheet from '$lib/components/ui/sheet';
+	import { Button } from '$lib/components/ui/button';
+	import Calendar from '@lucide/svelte/icons/calendar';
+	import Tag from '@lucide/svelte/icons/tag';
+
+	let { open = $bindable(false) } = $props();
+
+	// Changelog 内容（从 CHANGELOG.md 解析或硬编码）
+	const changelog = [
+		{
+			version: '1.3.1',
+			date: '2026-01-26',
+			changes: {
+				优化: [
+					'版本号显示优化 - 侧边栏版本号按钮样式改进',
+					'移至次级导航区域，与其他菜单项样式一致',
+					'更新日志改用 Sheet 组件（右侧滑出），替代底部 Drawer',
+					'统一暗色主题下的视觉效果'
+				]
+			}
+		},
+		{
+			version: '1.3.0',
+			date: '2026-01-26',
+			changes: {
+				新增: [
+					'京东账单支持 - 支持京东白条账单上传和清洗',
+					'自动识别京东账单类型（交易流水 ZIP）',
+					'解析京东白条账单 CSV 格式（含还款日期信息）',
+					'京东专属分类映射配置',
+					'支持京东外卖、京东平台商户等商户识别',
+					'上传页面和账单列表页面添加"京东"选项'
+				],
+				优化: [
+					'京东订单智能去重 - 上传京东账单时自动软删除其他来源中的京东订单',
+					'分类推断复核等级优化 - 京东账单引入 LOW 复核等级',
+					'京东平台商户关键词扩展'
+				],
+				技术改进: [
+					'新增京东账单清理器',
+					'新增京东专属配置',
+					'后端新增软删除接口',
+					'新增单元测试（11 个测试用例）'
+				]
+			}
+		},
+		{
+			version: '1.2.1',
+			date: '2026-01-23',
+			changes: {
+				优化: [
+					'智能复核快捷确认 - 在复核列表每行添加快捷确认按钮',
+					'无需打开详情页面即可确认分类正确',
+					'自动更新统计数据',
+					'提升复核效率，支持快速批量确认'
+				],
+				文档: ['AGENTS.md 更新 - 精简为 150 行，专为 AI 编程助手设计']
+			}
+		},
+		{
+			version: '1.2.0',
+			date: '2026-01-25',
+			changes: {
+				新增: [
+					'账单删除功能 - 支持在账单详情抽屉中删除账单（软删除）',
+					'删除按钮带二次确认，防止误操作',
+					'已删除的账单在所有查询中自动过滤'
+				],
+				技术改进: [
+					'后端 MongoDB 查询方法添加软删除过滤',
+					'新增 DELETE /api/bills/:id 接口'
+				]
+			}
+		}
+	];
+</script>
+
+<Sheet.Root bind:open>
+	<Sheet.Content side="right" class="w-[400px] sm:w-[500px] overflow-hidden">
+		<Sheet.Header>
+			<Sheet.Title class="text-xl font-semibold">版本更新日志</Sheet.Title>
+			<Sheet.Description class="text-muted-foreground">
+				查看 BillAI 的版本更新历史
+			</Sheet.Description>
+		</Sheet.Header>
+
+		<div class="flex-1 overflow-y-auto py-6">
+			<div class="space-y-8">
+				{#each changelog as release}
+					<div class="space-y-3">
+						<!-- 版本号和日期 -->
+						<div class="flex items-center gap-3">
+							<div class="flex items-center gap-2">
+								<Tag class="size-5 text-primary" />
+								<h3 class="text-lg font-semibold">v{release.version}</h3>
+							</div>
+							<div class="flex items-center gap-1.5 text-sm text-muted-foreground">
+								<Calendar class="size-4" />
+								<span>{release.date}</span>
+							</div>
+						</div>
+
+						<!-- 变更内容 -->
+						<div class="space-y-4 pl-7 border-l-2 border-muted">
+							{#each Object.entries(release.changes) as [category, items]}
+								<div class="space-y-2">
+									<h4 class="text-sm font-semibold text-primary">{category}</h4>
+									<ul class="space-y-1.5 text-sm text-muted-foreground">
+										{#each items as item}
+											<li class="flex gap-2 leading-relaxed">
+												<span class="text-primary mt-1.5">•</span>
+												<span>{item}</span>
+											</li>
+										{/each}
+									</ul>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<Sheet.Footer class="border-t pt-4">
+			<Button variant="outline" onclick={() => (open = false)} class="w-full">关闭</Button>
+		</Sheet.Footer>
+	</Sheet.Content>
+</Sheet.Root>

web/src/routes/+layout.svelte

@@ -10,6 +10,7 @@
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   import * as Avatar from '$lib/components/ui/avatar';
   import { Separator } from '$lib/components/ui/separator';
+  import ChangelogDrawer from '$lib/components/ChangelogDrawer.svelte';
   
   // Icons
   import Upload from '@lucide/svelte/icons/upload';
@@ -24,6 +25,10 @@
   import User from '@lucide/svelte/icons/user';
   import Bell from '@lucide/svelte/icons/bell';
   import Sparkles from '@lucide/svelte/icons/sparkles';
+  import Info from '@lucide/svelte/icons/info';
+  
+  // 版本号（从 Vite 编译时注入）
+  const appVersion = __APP_VERSION__;
   
   // Theme
   import {
@@ -42,6 +47,7 @@
   let checkingHealth = $state(true);
   let isAuthenticated = $state(false);
   let currentUser = $state<AuthUser | null>(null);
+  let changelogOpen = $state(false);
   
   // 订阅认证状态
   $effect(() => {
@@ -223,6 +229,18 @@
                 </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>
@@ -231,6 +249,7 @@
     <!-- Footer: 用户信息 -->
     <Sidebar.Footer>
       <Sidebar.Menu>
+        <!-- 用户信息 -->
         <Sidebar.MenuItem>
           <DropdownMenu.Root>
             <DropdownMenu.Trigger>
@@ -344,4 +363,7 @@
     </main>
   </Sidebar.Inset>
 </Sidebar.Provider>
+
+<!-- Changelog 抽屉 -->
+<ChangelogDrawer bind:open={changelogOpen} />
 {/if}

web/vite.config.ts

@@ -2,10 +2,18 @@ import { defineConfig } from 'vitest/config';
 import { playwright } from '@vitest/browser-playwright';
 import { sveltekit } from '@sveltejs/kit/vite';
 import tailwindcss from '@tailwindcss/vite';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+
+const pkg = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf-8'));
 
 export default defineConfig({
 	plugins: [sveltekit(), tailwindcss()],
 
+	define: {
+		__APP_VERSION__: JSON.stringify(pkg.version)
+	},
+
 	server: {
 		proxy: {
 			'/api': {