feat: 更新依赖版本，添加PWA更新组件，优化Sidebar组件，增加footer支持

2026-03-22 13:54:30 +08:00
parent 518a3f2864
commit dd100fd7ef
9 changed files with 175 additions and 37 deletions
--- a/package.json
+++ b/package.json
@@ -17,19 +17,19 @@
  "author": "abearxiong <xiongxiao@xiongxiao.me>",
  "license": "MIT",
  "dependencies": {
-    "@ai-sdk/anthropic": "^3.0.58",
-    "@ai-sdk/openai": "^3.0.41",
-    "@ai-sdk/openai-compatible": "^2.0.35",
+    "@ai-sdk/anthropic": "^3.0.63",
+    "@ai-sdk/openai": "^3.0.47",
+    "@ai-sdk/openai-compatible": "^2.0.37",
    "@base-ui/react": "^1.3.0",
-    "@kevisual/api": "^0.0.64",
-    "@kevisual/cnb": "^0.0.52",
+    "@kevisual/api": "^0.0.65",
+    "@kevisual/cnb": "^0.0.59",
    "@kevisual/cnb-ai": "^0.0.2",
    "@kevisual/context": "^0.0.8",
    "@kevisual/kv-login": "^0.1.18",
-    "@kevisual/router": "0.1.3",
-    "@tanstack/react-router": "^1.167.4",
+    "@kevisual/router": "0.1.6",
+    "@tanstack/react-router": "^1.168.1",
    "@uiw/react-codemirror": "^4.25.8",
-    "ai": "^6.0.116",
+    "ai": "^6.0.134",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
@@ -43,7 +43,7 @@
    "re-resizable": "^6.11.2",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
-    "react-hook-form": "^7.71.2",
+    "react-hook-form": "^7.72.0",
    "react-resizable": "^3.1.3",
    "sonner": "^2.0.7",
    "vite-plugin-pwa": "^1.2.0",
@@ -56,12 +56,12 @@
  "devDependencies": {
    "@codemirror/lang-yaml": "^6.1.2",
    "@kevisual/gitea": "^0.0.6",
-    "@kevisual/query": "0.0.53",
+    "@kevisual/query": "0.0.55",
    "@kevisual/types": "^0.0.12",
-    "@tailwindcss/vite": "^4.2.1",
-    "@tanstack/react-query": "^5.90.21",
-    "@tanstack/react-router-devtools": "^1.166.9",
-    "@tanstack/router-plugin": "^1.166.13",
+    "@tailwindcss/vite": "^4.2.2",
+    "@tanstack/react-query": "^5.94.5",
+    "@tanstack/react-router-devtools": "^1.166.10",
+    "@tanstack/router-plugin": "^1.167.2",
    "@types/node": "^25.5.0",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
@@ -69,9 +69,9 @@
    "@vitejs/plugin-react": "^6.0.1",
    "dotenv": "^17.3.1",
    "tailwind-merge": "^3.5.0",
-    "tailwindcss": "^4.2.1",
+    "tailwindcss": "^4.2.2",
    "tw-animate-css": "^1.4.0",
    "typescript": "^5.9.3",
-    "vite": "^8.0.0"
+    "vite": "^8.0.1"
  }
 }
--- a/public/auth.json
+++ b/public/auth.json
@@ -22,20 +22,43 @@
  },
  "sync": {
    "AGENTS.md": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/AGENTS.md",
+    "tsconfig.json": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/tsconfig.json",
    "vite.config.ts": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/vite.config.ts",
-    "src/main.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/main.tsx",
    "public/auth.json": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/public/auth.json",
-    "src/agents/index.ts": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/agents/index.ts",
-    "src/modules/basename.ts": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/modules/basename.ts",
+    "public/demo.html": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/public/demo.html",
    "src/modules/query.ts": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/modules/query.ts",
    "src/routes/demo.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/routes/demo.tsx",
    "src/routes/index.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/routes/index.tsx",
    "src/routes/login.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/routes/login.tsx",
    "src/styles/theme.css": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/styles/theme.css",
+    "src/components/a/PWAUpdate.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/a/PWAUpdate.tsx",
+    "src/components/a/Sidebar.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/a/Sidebar.tsx",
+    "src/components/ui/badge.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/badge.tsx",
+    "src/components/ui/breadcrumb.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/breadcrumb.tsx",
+    "src/components/ui/button.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/button.tsx",
+    "src/components/ui/card.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/card.tsx",
+    "src/components/ui/checkbox.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/checkbox.tsx",
+    "src/components/ui/command.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/command.tsx",
+    "src/components/ui/dialog.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/dialog.tsx",
+    "src/components/ui/dropdown-menu.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/dropdown-menu.tsx",
+    "src/components/ui/input-group.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/input-group.tsx",
+    "src/components/ui/input.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/input.tsx",
+    "src/components/ui/kbd.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/kbd.tsx",
+    "src/components/ui/label.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/label.tsx",
+    "src/components/ui/menubar.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/menubar.tsx",
+    "src/components/ui/popover.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/popover.tsx",
+    "src/components/ui/select.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/select.tsx",
+    "src/components/ui/sheet.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/sheet.tsx",
+    "src/components/ui/skeleton.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/skeleton.tsx",
+    "src/components/ui/sonner.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/sonner.tsx",
+    "src/components/ui/tabs.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/tabs.tsx",
+    "src/components/ui/textarea.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/textarea.tsx",
+    "src/components/ui/tooltip.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/components/ui/tooltip.tsx",
    "src/pages/auth/index.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/pages/auth/index.tsx",
    "src/pages/auth/page.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/pages/auth/page.tsx",
    "src/pages/auth/store.ts": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/pages/auth/store.ts",
    "src/pages/demo/page.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/pages/demo/page.tsx",
+    "src/agents/app.ts": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/agents/app.ts",
    "src/pages/auth/hooks/index.ts": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/pages/auth/hooks/index.ts",
    "src/pages/auth/hooks/use-api-query.ts": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/pages/auth/hooks/use-api-query.ts",
    "src/pages/auth/modules/BaseHeader.tsx": "https://kevisual.cn/root/ai/kevisual/frontend/vite-react-template/src/pages/auth/modules/BaseHeader.tsx",
--- a/src/agents/app.ts
+++ b/src/agents/app.ts
@@ -1,10 +1,3 @@
-import { QueryRouterServer } from '@kevisual/router/browser'
+import { QueryRouterServer } from "@kevisual/router/browser"
 import { useContextKey } from '@kevisual/context'
 export const app = useContextKey('app', new QueryRouterServer())
-
-// import '@kevisual/cnb-ai'
-
-const url = 'https://kevisual.cn/root/cnb-ai/dist/app.js'
-setTimeout(() => {
-  import(/* @vite-ignore */url)
-}, 2000)
--- a/src/agents/index.ts
+++ b/src/agents/index.ts
@@ -1 +1,8 @@
 export * from './app.ts'
+
+// import '@kevisual/cnb-ai'
+
+const url = 'https://kevisual.cn/root/cnb-ai/dist/app.js'
+setTimeout(() => {
+  import(/* @vite-ignore */url)
+}, 2000)
--- a/src/components/a/PWAUpdate.tsx
+++ b/src/components/a/PWAUpdate.tsx
@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { useRegisterSW } from 'virtual:pwa-register/react';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+function PWAUpdate() {
+  const {
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onNeedRefresh() {
+      setNeedRefresh(true);
+    },
+  });
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleUpdate = async () => {
+    setIsLoading(true);
+    await updateServiceWorker(true);
+    setIsLoading(false);
+  };
+
+  const handleDismiss = () => {
+    setNeedRefresh(false);
+  };
+
+  if (!needRefresh) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50">
+      <Card className="w-80 shadow-lg">
+        <CardHeader className="pb-3">
+          <CardTitle>发现新版本</CardTitle>
+          <CardDescription>有新版本可用，点击立即更新</CardDescription>
+        </CardHeader>
+        <CardContent className="pt-0" />
+        <CardFooter className="gap-2">
+          <Button variant="outline" size="sm" onClick={handleDismiss}>
+            稍后
+          </Button>
+          <Button size="sm" onClick={handleUpdate} disabled={isLoading}>
+            {isLoading ? '更新中...' : '立即更新'}
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
+
+export default PWAUpdate;
--- a/src/components/a/Sidebar.tsx
+++ b/src/components/a/Sidebar.tsx
@@ -32,6 +32,7 @@ export interface SidebarProps {
  children?: React.ReactNode
  logo?: React.ReactNode
  title?: React.ReactNode
+  footer?: React.ReactNode
  defaultCollapsed?: boolean
  defaultWidth?: number
  minWidth?: number
@@ -44,6 +45,7 @@ export function Sidebar({
  children,
  logo,
  title,
+  footer,
  defaultCollapsed = false,
  defaultWidth = 208,
  minWidth = 120,
@@ -172,7 +174,6 @@ export function Sidebar({
      </li>
    )
  }
-
  return (
    <>
      <div className={cn('flex h-full', className)}>
@@ -194,7 +195,7 @@ export function Sidebar({
          >
            <aside
              className={cn(
-                'border-r bg-white flex-shrink-0 flex flex-col'
+                'h-full border-r bg-white flex-shrink-0 flex flex-col'
              )}
              style={{ width: sidebarWidth }}
            >
@@ -223,11 +224,18 @@ export function Sidebar({
                  {items.map((item) => renderNavItem(item))}
                </ul>
              </nav>
+
+              {/* Footer */}
+              {footer && (
+                <div className="border-t flex-shrink-0">
+                  {footer}
+                </div>
+              )}
            </aside>
          </Resizable>
        ) : (
          // 收起状态
-          <aside className="w-14 border-r bg-white flex-shrink-0 flex flex-col">
+          <aside className="h-full w-14 border-r bg-white flex-shrink-0 flex flex-col">
            {/* Logo 区域 */}
            <div className="h-12 flex items-center justify-center border-b px-2">
              <div className="group relative flex-shrink-0">
@@ -248,6 +256,13 @@ export function Sidebar({
                {items.map((item) => renderNavItem(item))}
              </ul>
            </nav>
+
+            {/* Footer */}
+            {footer && (
+              <div className="border-t flex-shrink-0">
+                {footer}
+              </div>
+            )}
          </aside>
        )}

--- a/src/pages/auth/store.ts
+++ b/src/pages/auth/store.ts
@@ -90,13 +90,10 @@ export const useLayoutStore = create<LayoutStore>((set, get) => ({
  setIsAdmin: (isAdmin) => set({ isAdmin }),
  init: async () => {
    await queryLogin.init();
-    const token = await queryLogin.checkLocalToken();
+    const token = await queryLogin.checkTokenValid();
    if (token) {
      set({ me: {} });
      try {
-        // const data = await stackQueryClient.fetchQuery({
-        //   queryKey: authQueryKeys.me,
-        // }) as UserInfo;
        const userInfo = await queryLogin.checkLocalUser();
        if (userInfo) {
          set({ me: userInfo as UserInfo, isAdmin: userInfo.orgs?.includes?.('admin') || false });
--- a/src/pages/sidebar/components/Sidebar.tsx
+++ b/src/pages/sidebar/components/Sidebar.tsx
@@ -33,7 +33,17 @@ const navItems: NavItem[] = [

 export function SidebarLayout({ children }: { children: React.ReactNode }) {
  return (
-    <Sidebar items={navItems} title='云原生' logo={<Logo className='w-6 h-6' />}>
+    <Sidebar items={navItems} title='云原生' logo={<Logo className='w-6 h-6' />}
+      footer={<div className="p-4 border-t text-sm text-gray-500 hover:text-gray-700">
+        <a
+          href="https://cnb.cool/kevisual/cnb-center"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          CNB Center
+        </a>
+      </div>}
+    >
      {children}
    </Sidebar>
  )
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -32,6 +32,39 @@ export default defineConfig({
    tailwindcss(),
    VitePWA({
      injectRegister: 'auto',
+      registerType: 'autoUpdate',
+      // Workbox 缓存策略配置
+      workbox: {
+        // API 请求使用网络优先策略，确保获取最新数据
+        runtimeCaching: [
+          {
+            urlPattern: /^https?.*\/api\/.*/,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'api-cache',
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24, // 24小时
+              },
+              cacheableResponse: {
+                statuses: [0, 200],
+              },
+            },
+          },
+          // 静态资源使用缓存优先，但设置较短过期时间
+          {
+            urlPattern: /^https?.*\.(js|css|woff2?|png|jpg|jpeg|svg|gif|ico)/,
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'static-resources',
+              expiration: {
+                maxEntries: 100,
+                maxAgeSeconds: 60 * 60 * 24 * 7, // 7天
+              },
+            },
+          },
+        ],
+      },
    }),
  ],
  resolve: {