Merge pull request #8 from DevilGenius/dev

feat(AccountsPage): 优化布局

Author: DouDOU-start

backend/internal/app/account/service.go

@@ -358,7 +358,7 @@ func (s *Service) ToggleScheduling(ctx context.Context, id int) (ToggleResult, e
 	} else {
 		newState = "disabled"
 		if s.stateWriter != nil {
-			if err := s.stateWriter.ManualDisable(ctx, id, "管理员手动关闭调度"); err != nil {
+			if err := s.stateWriter.ManualDisable(ctx, id, "手动关闭"); err != nil {
 				logger.Error("account_manual_disable_failed",
 					sdk.LogFieldAccountID, id, sdk.LogFieldError, err)
 				return ToggleResult{}, err

deploy/dev.ps1

@@ -447,7 +447,7 @@ function Start-Dev {
 
   $frontend = Start-Process `
     -FilePath "pwsh" `
-    -ArgumentList @("-NoLogo", "-NoProfile", "-Command", "pnpm dev -- --port $FrontendDevPort --strictPort") `
+    -ArgumentList @("-NoLogo", "-NoProfile", "-Command", "pnpm dev --port $FrontendDevPort --strictPort") `
     -WorkingDirectory $WebDir `
     -WindowStyle Hidden `
     -RedirectStandardOutput $FrontendOut `

web/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+allowBuilds:
+  esbuild: true

web/src/app/layout/AppShell.tsx

@@ -13,6 +13,7 @@ import { useTheme } from '../providers/ThemeProvider';
 import { useSiteSettings, defaultLogoUrl } from '../providers/SiteSettingsProvider';
 import { effectiveDocUrl } from '../../shared/utils/docUrl';
 import { useIsMobile } from '../../shared/hooks/useMediaQuery';
+import { usePersistentBoolean } from '../../shared/hooks/usePersistentBoolean';
 import { TopLoadingLine } from '../../shared/components/PageLoading';
 import {
   LayoutDashboard,
@@ -77,6 +78,8 @@ const apiKeyMenuItems: MenuItem[] = [
   { path: '/usage', labelKey: 'nav.my_usage', icon: <ReceiptText className="h-5 w-5" />, sectionKey: 'nav.personal' },
 ];
 
+const SIDEBAR_COLLAPSED_STORAGE_KEY = 'airgate:sidebar:collapsed';
+
 /**
  * 拉取插件菜单：所有登录用户均可调用 /plugins/menu，再按 page.audience 过滤显示。
  *   audience = "admin"（或空，向后兼容）— 仅管理员可见，挂在「插件」分组
@@ -158,7 +161,7 @@ export function AppShell({ children }: AppShellProps) {
   const { t, i18n } = useTranslation();
   const { theme, toggleTheme } = useTheme();
   const site = useSiteSettings();
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = usePersistentBoolean(SIDEBAR_COLLAPSED_STORAGE_KEY, false);
   const [mobileOpen, setMobileOpen] = useState(false);
   const isMobile = useIsMobile();
   const matchRoute = useMatchRoute();
@@ -377,21 +380,20 @@ export function AppShell({ children }: AppShellProps) {
         <div
           className="fixed inset-0 z-40 bg-black/40"
           onClick={() => setMobileOpen(false)}
-          style={{ animation: 'ag-fade-in 0.15s ease-out' }}
         />
       )}
 
       {/* Sidebar */}
       {isMobile ? (
         <aside
-          className="fixed inset-y-0 left-0 z-50 flex flex-col bg-surface border-r border-border transition-transform duration-300 ease-in-out"
+          className="fixed inset-y-0 left-0 z-50 flex flex-col bg-surface border-r border-border transition-transform duration-150 ease-out"
           style={{ width: 'var(--ag-sidebar-width)', transform: mobileOpen ? 'translateX(0)' : 'translateX(-100%)' }}
         >
           {sidebarContent}
         </aside>
       ) : (
         <aside
-          className="relative flex flex-col border-r border-border bg-surface transition-all duration-300 ease-in-out"
+          className="relative flex flex-col border-r border-border bg-surface transition-[width] duration-150 ease-out"
           style={{ width: collapsed ? 'var(--ag-sidebar-collapsed)' : 'var(--ag-sidebar-width)' }}
         >
           {sidebarContent}

web/src/app/providers/AuthProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import type { UserResp } from '../../shared/types';
 import {
   setToken,
@@ -40,36 +40,57 @@ function normalizeSessionUser(user: UserResp, token = getToken()): UserResp {
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<UserResp | null>(null);
   const [loading, setLoading] = useState(true);
+  const authRevisionRef = useRef(0);
 
   useEffect(() => {
+    let cancelled = false;
+    const revision = authRevisionRef.current;
     const token = getToken();
     if (token) {
       usersApi.me()
         .then((userData) => {
-          if (getToken() === token) setUser(normalizeSessionUser(userData, token));
+          const currentToken = getToken();
+          if (!cancelled && authRevisionRef.current === revision && currentToken) {
+            setUser(normalizeSessionUser(userData, currentToken));
+          }
         })
         .catch(() => {
-          if (getToken() === token) setToken(null);
+          if (!cancelled && authRevisionRef.current === revision && getToken() === token) {
+            setToken(null);
+            setUser(null);
+          }
         })
-        .finally(() => setLoading(false));
+        .finally(() => {
+          if (!cancelled && authRevisionRef.current === revision) setLoading(false);
+        });
     } else {
       setLoading(false);
     }
+
+    return () => {
+      cancelled = true;
+    };
   }, []);
 
   const login = useCallback((token: string, userData: UserResp) => {
+    authRevisionRef.current += 1;
+    const revision = authRevisionRef.current;
     setToken(token);
     setUser(normalizeSessionUser(userData, token));
     // 登录响应可能不包含全部用户字段（例如 API Key 登录时缺少 quota / expires_at），
     // 异步用 /me 拉一次完整数据补齐，避免首屏额度等信息显示不准。
     usersApi.me()
       .then((freshUser) => {
-        if (getToken() === token) setUser(normalizeSessionUser(freshUser, token));
+        const currentToken = getToken();
+        if (authRevisionRef.current === revision && currentToken) {
+          setUser(normalizeSessionUser(freshUser, currentToken));
+        }
       })
       .catch(() => {});
   }, []);
 
   const logout = useCallback(() => {
+    authRevisionRef.current += 1;
     setToken(null);
     setSessionAPIKey(null);
     setUser(null);

web/src/app/router.tsx

@@ -247,7 +247,8 @@ const authLayout = createRoute({
 });
 
 function HomePage() {
-  const { user, isAPIKeySession } = useAuth();
+  const { user, loading, isAPIKeySession } = useAuth();
+  if (loading) return <PageLoading />;
   if (!user) return null;
 
   const isAdmin = getTokenRole() === 'admin' || user.role === 'admin';