增加了版本号系统

web/frontend/src/layouts/MainLayout.tsx

@@ -12,6 +12,7 @@ import { authApi } from '../api/modules';
 import { type ThemeMode } from '../store/theme';
 import { useTheme } from '../store/useTheme';
 import { usePermissions } from '../hooks/usePermissions';
+import { useAppInfo } from '../hooks/useAppInfo';
 
 const { Sider, Content } = Layout;
 const { Text } = Typography;
@@ -35,6 +36,7 @@ export default function MainLayout({ onLogout }: { onLogout?: () => void }) {
   const [collapsed, setCollapsed] = useState(false);
   const { mode, isDark, setMode } = useTheme();
   const { can, canAny } = usePermissions(user);
+  const appInfo = useAppInfo();
 
   useEffect(() => {
     if (!user) navigate('/login');
@@ -100,6 +102,8 @@ export default function MainLayout({ onLogout }: { onLogout?: () => void }) {
 
   const siderTheme = isDark ? 'dark' : 'light';
   const siderTextColor = isDark ? '#fff' : undefined;
+  const secondaryTextColor = isDark ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,0.45)';
+  const versionText = appInfo?.version ? `v${appInfo.version}` : 'v--';
 
   return (
     <Layout style={{ height: '100vh', overflow: 'hidden' }}>
@@ -143,35 +147,58 @@ export default function MainLayout({ onLogout }: { onLogout?: () => void }) {
               {!collapsed && (
                 <>
                   <Text style={{ color: siderTextColor }}>{user.username}</Text>
-                  <Text style={{ color: isDark ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,0.45)', fontSize: 12 }}>
+                  <Text style={{ color: secondaryTextColor, fontSize: 12 }}>
                     ({ROLE_LABELS[user.role] || user.role})
                   </Text>
                 </>
               )}
             </Space>
+            {!collapsed && (
+              <Text style={{
+                display: 'block',
+                color: secondaryTextColor,
+                fontSize: 12,
+                lineHeight: '20px',
+                marginBottom: 8,
+              }}>
+                当前版本 {versionText}
+              </Text>
+            )}
             {collapsed ? (
-              <Space direction="vertical" style={{ width: '100%' }}>
-                <Dropdown
-                  menu={{ items: THEME_OPTIONS.map(o => ({ key: o.key, label: o.label, icon: o.icon, onClick: () => setMode(o.key) })) }}
-                  trigger={['click']}
-                >
+              <>
+                <Space direction="vertical" style={{ width: '100%' }}>
+                  <Dropdown
+                    menu={{ items: THEME_OPTIONS.map(o => ({ key: o.key, label: o.label, icon: o.icon, onClick: () => setMode(o.key) })) }}
+                    trigger={['click']}
+                  >
+                    <Button
+                      block
+                      type="text"
+                      size="small"
+                      icon={isDark ? <MoonOutlined /> : <SunOutlined />}
+                      style={{ color: secondaryTextColor }}
+                    />
+                  </Dropdown>
                   <Button
                     block
                     type="text"
                     size="small"
-                    icon={isDark ? <MoonOutlined /> : <SunOutlined />}
-                    style={{ color: isDark ? 'rgba(255,255,255,0.65)' : undefined }}
+                    icon={<LogoutOutlined />}
+                    onClick={handleLogout}
+                    style={{ color: secondaryTextColor }}
                   />
-                </Dropdown>
-                <Button
-                  block
-                  type="text"
-                  size="small"
-                  icon={<LogoutOutlined />}
-                  onClick={handleLogout}
-                  style={{ color: isDark ? 'rgba(255,255,255,0.65)' : undefined }}
-                />
-              </Space>
+                </Space>
+                <Text style={{
+                  display: 'block',
+                  color: secondaryTextColor,
+                  fontSize: 11,
+                  lineHeight: '18px',
+                  textAlign: 'center',
+                  marginTop: 8,
+                }}>
+                  {versionText}
+                </Text>
+              </>
             ) : (
               <Space style={{ width: '100%', justifyContent: 'space-between' }}>
                 <Dropdown
@@ -182,7 +209,7 @@ export default function MainLayout({ onLogout }: { onLogout?: () => void }) {
                     type="text"
                     size="small"
                     icon={isDark ? <MoonOutlined /> : <SunOutlined />}
-                    style={{ color: isDark ? 'rgba(255,255,255,0.65)' : undefined }}
+                    style={{ color: isDark ? secondaryTextColor : undefined }}
                   >
                     {THEME_OPTIONS.find(o => o.key === mode)?.label}
                   </Button>
@@ -192,7 +219,7 @@ export default function MainLayout({ onLogout }: { onLogout?: () => void }) {
                   size="small"
                   icon={<LogoutOutlined />}
                   onClick={handleLogout}
-                  style={{ color: isDark ? 'rgba(255,255,255,0.65)' : undefined }}
+                  style={{ color: isDark ? secondaryTextColor : undefined }}
                 >
                   退出
                 </Button>