Auto commit: 2026-03-18 00:26

- 修复数组解构错误导致单条数据时不显示表格
- 优化DetailsDialog弹窗布局，内容过多时按钮始终可见

.env.example

@@ -0,0 +1,7 @@
+## 本地环境
+
+# VITE_API_URL = "http://localhost:8000"
+### 开发环境
+VITE_API_URL = "https://kevisual.xiongxiao.me"
+### 生产环境
+# VITE_API_URL = "https://kevisual.cn"

package.json

@@ -14,42 +14,44 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.2.0",
-    "@kevisual/router": "0.0.84",
-    "@tanstack/react-router": "^1.162.9",
+    "@kevisual/router": "0.1.1",
+    "@tanstack/react-router": "^1.166.7",
     "@tanstack/react-table": "^8.21.3",
-    "@uiw/react-codemirror": "^4.25.5",
+    "@uiw/react-codemirror": "^4.25.8",
     "@uiw/react-md-editor": "^4.0.11",
-    "antd": "^6.3.0",
+    "antd": "^6.3.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "dayjs": "^1.11.19",
     "eruda": "^3.4.3",
-    "es-toolkit": "^1.44.0",
+    "es-toolkit": "^1.45.1",
     "fuse.js": "^7.1.0",
     "idb-keyval": "^6.2.2",
-    "lucide-react": "^0.575.0",
+    "lucide-react": "^0.577.0",
     "nanoid": "^5.1.6",
     "next-themes": "^0.4.6",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-hook-form": "^7.71.2",
-    "react-resizable-panels": "^4.6.5",
+    "react-resizable-panels": "^4.7.2",
     "sonner": "^2.0.7",
-    "valtio": "^2.3.0",
+    "valtio": "^2.3.1",
     "zod": "^4.3.6",
     "zustand": "^5.0.11"
   },
   "devDependencies": {
-    "@kevisual/api": "^0.0.60",
+    "@kevisual/ai": "^0.0.28",
+    "@kevisual/api": "^0.0.62",
     "@kevisual/context": "^0.0.8",
-    "@kevisual/js-filter": "^0.0.5",
-    "@kevisual/query": "^0.0.52",
+    "@kevisual/js-filter": "^0.0.6",
+    "@kevisual/kv-login": "^0.1.17",
+    "@kevisual/query": "^0.0.53",
     "@kevisual/types": "^0.0.12",
     "@tailwindcss/vite": "^4.2.1",
-    "@tanstack/react-router-devtools": "^1.162.9",
-    "@tanstack/router-plugin": "^1.162.9",
-    "@types/node": "^25.3.0",
+    "@tanstack/react-router-devtools": "^1.166.7",
+    "@tanstack/router-plugin": "^1.166.7",
+    "@types/node": "^25.4.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
@@ -58,6 +60,6 @@
     "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
-    "vite": "v8.0.0-beta.15"
+    "vite": "v8.0.0-beta.16"
   }
 }

src/agent/app.ts

@@ -1,3 +0,0 @@
-import { QueryRouterServer } from '@kevisual/router/browser'
-import { use } from '@kevisual/context'
-export const app = use('app', new QueryRouterServer())

src/agents/app.ts

@@ -0,0 +1,8 @@
+import { QueryRouterServer } from '@kevisual/router/browser'
+import { use } from '@kevisual/context'
+export const app = use('app', new QueryRouterServer())
+
+import { useLayoutStore } from '@/pages/auth/store'
+
+const layoutStore = useLayoutStore.getState()
+layoutStore.setShowBaseHeader(false)

src/agents/index.ts

@@ -1,5 +1,7 @@
 import { app } from './app.ts';
 
 import './routes/left-panel.ts';
+import { Load } from '@kevisual/context/load'
+Load.npm({ pkg: 'eruda' });
 
 export { app };

src/app/[root]/v1/[appId]/page2.tsx

@@ -1,14 +0,0 @@
-import { AppProvider } from '../../../studio/index.tsx';
-
-interface PageProps {
-  params: Promise<{
-    root: string
-    appId: string
-  }>
-}
-
-export default async function Page({ params }: PageProps) {
-  const { root, appId } = await params;
-  console.log('root', root, 'appId', appId);
-  return <AppProvider />;
-}

src/components/ui/dialog.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
 

src/main.tsx

@@ -3,7 +3,7 @@ import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 import './index.css'
 import { getDynamicBasename } from './modules/basename'
-
+import './agents/index.ts';
 // Set up a Router instance
 const router = createRouter({
   routeTree,

src/pages/auth/index.tsx

@@ -0,0 +1,58 @@
+import { useEffect } from "react"
+import { useLayoutStore } from "./store"
+import { useShallow } from "zustand/shallow"
+import { LogIn, LockKeyhole } from "lucide-react"
+export { BaseHeader } from './modules/BaseHeader'
+import { useMemo } from 'react';
+import { useLocation, useNavigate } from '@tanstack/react-router';
+
+
+type Props = {
+  children?: React.ReactNode,
+  mustLogin?: boolean,
+}
+export const AuthProvider = ({ children, mustLogin }: Props) => {
+  const store = useLayoutStore(useShallow(state => ({
+    init: state.init,
+    me: state.me,
+    openLinkList: state.openLinkList,
+  })));
+  useEffect(() => {
+    store.init()
+  }, [])
+  const location = useLocation()
+  const navigate = useNavigate();
+  const isOpen = useMemo(() => {
+    return store.openLinkList.some(item => location.pathname.startsWith(item))
+  }, [location.pathname])
+  const loginUrl = '/root/login/?redirect=' + encodeURIComponent(window.location.href);
+  if (mustLogin && !store.me && !isOpen) {
+    return (
+      <div className="w-full h-full min-h-screen flex items-center justify-center bg-background">
+        <div className="flex flex-col items-center gap-6 p-10 rounded-2xl border border-border bg-card shadow-lg max-w-sm w-full mx-4">
+          <div className="flex items-center justify-center w-16 h-16 rounded-full bg-muted">
+            <LockKeyhole className="w-8 h-8 text-muted-foreground" />
+          </div>
+          <div className="flex flex-col items-center gap-2 text-center">
+            <h2 className="text-xl font-semibold text-foreground">需要登录</h2>
+            <p className="text-sm text-muted-foreground">请先登录以继续访问此页面</p>
+          </div>
+          <div
+            className="inline-flex items-center justify-center gap-2 w-full px-6 py-2.5 rounded-lg bg-foreground text-background text-sm font-medium transition-opacity hover:opacity-80 active:opacity-70"
+            onClick={() => {
+              // window.open(loginUrl, '_blank');
+              navigate({ to: '/login' });
+            }}
+          >
+            <LogIn className="w-4 h-4" />
+            立即登录
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return <>
+    {children}
+  </>
+}

src/pages/auth/modules/BaseHeader.tsx

@@ -0,0 +1,93 @@
+import { Home, User, LogIn, LogOut } from 'lucide-react';
+import { Link, useNavigate } from '@tanstack/react-router'
+import { useLayoutStore } from '../store';
+import { useShallow } from 'zustand/shallow';
+import { useMemo } from 'react';
+
+export const BaseHeader = (props: { main?: React.ComponentType | null }) => {
+  const store = useLayoutStore(useShallow(state => ({
+    me: state.me,
+    clearMe: state.clearMe,
+    links: state.links,
+    showBaseHeader: state.showBaseHeader,
+  })));
+  const navigate = useNavigate();
+  const meInfo = useMemo(() => {
+    if (!store.me) {
+      return (
+        <button
+          onClick={() => navigate({ to: '/login' })}
+          className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
+        >
+          <LogIn className="w-4 h-4" />
+          <span>去登录</span>
+        </button>
+      )
+    }
+    return (
+      <div className="flex items-center gap-3">
+        {store.me.avatar && (
+          <img
+            src={store.me.avatar}
+            alt="Avatar"
+            className="w-8 h-8 rounded-full object-cover"
+          />
+        )}
+        {!store.me.avatar && (
+          <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
+            <User className="w-4 h-4 text-gray-500" />
+          </div>
+        )}
+        <span className="font-medium text-gray-700">{store.me?.username}</span>
+        <button
+          onClick={() => store.clearMe?.()}
+          className="flex items-center gap-1 px-2 py-1 text-sm text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors cursor-pointer"
+          title="退出登录"
+        >
+          <LogOut className="w-4 h-4" />
+        </button>
+      </div>
+    )
+  }, [store.me, store.clearMe])
+  if (!store.showBaseHeader) {
+    return null;
+  }
+  return (
+    <>
+      <div className="flex gap-2 text-lg w-full h-12 items-center justify-between bg-gray-200">
+        <div className='px-2 flex items-center gap-1'>
+          {
+            store.links.map(link => (
+              <div key={link.key || link.title}
+                className="cursor-pointer flex items-center justify-center gap-1 p-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+                onClick={() => {
+                  if (!link.href) return;
+                  if (link.href.startsWith('http') || link.isRoot) {
+                    window.open(link.href, '_blank');
+                    return;
+                  }
+                  navigate({
+                    to: link.href
+                  })
+                }}
+              >
+                {link.key === 'home' && <Home className="w-4 h-4" />}
+                {link.icon && <>{link.icon}</>}
+                {!link.icon && link.title}
+              </div>
+
+            ))
+          }
+        </div>
+        <div className='mr-4'>
+          {meInfo}
+        </div>
+      </div>
+      <hr />
+    </>
+  )
+}
+
+export const LayoutMain = () => {
+  return <BaseHeader />
+}

src/pages/auth/page.tsx

@@ -0,0 +1,81 @@
+import { useContextKey } from '@kevisual/context';
+import '@kevisual/kv-login';
+import { checkPluginLogin } from '@kevisual/kv-login'
+import { useEffect } from 'react';
+import { useLayoutStore } from './store';
+import { useShallow } from 'zustand/shallow';
+import { useNavigate } from '@tanstack/react-router';
+
+export const LoginComponent = ({ onLoginSuccess }: { onLoginSuccess: () => void }) => {
+  useEffect(() => {
+    // 监听登录成功事件
+    const handleLoginSuccess = () => {
+      console.log('监听到登录成功事件，关闭弹窗');
+      onLoginSuccess();
+    };
+    const loginEmitter = useContextKey('login-emitter')
+    console.log('KvLogin Types:', loginEmitter);
+
+    loginEmitter.on('login-success', handleLoginSuccess);
+
+    // 清理监听器
+    return () => {
+      loginEmitter.off('login-success', handleLoginSuccess);
+    };
+  }, [onLoginSuccess]);
+
+  // @ts-ignore
+  return (<kv-login></kv-login>)
+}
+export const App = () => {
+  const store = useLayoutStore(useShallow((state) => ({
+    init: state.init,
+    loginPageConfig: state.loginPageConfig,
+  })));
+  useEffect(() => {
+    checkPluginLogin();
+  }, []);
+  const navigate = useNavigate();
+  const handleLoginSuccess = async () => {
+    await store.init()
+    navigate({ to: '/' })
+  };
+  const { title, subtitle, footer } = store.loginPageConfig;
+  return (
+    <div className='w-full h-full relative overflow-hidden bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900'>
+      {/* 背景装饰 - 圆形光晕 */}
+      <div className='absolute top-1/4 -left-32 w-96 h-96 bg-purple-500/30 rounded-full blur-3xl'></div>
+      <div className='absolute bottom-1/4 -right-32 w-96 h-96 bg-blue-500/30 rounded-full blur-3xl'></div>
+      <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-indigo-500/20 rounded-full blur-3xl'></div>
+
+      {/* 背景装饰 - 网格图案 */}
+      <div className='absolute inset-0 opacity-[0.03] bg-[linear-gradient(rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:50px_50px]'></div>
+
+      {/* 顶部装饰文字 */}
+      <div className='absolute top-10 left-0 right-0 text-center'>
+        <h1 className='text-4xl font-bold text-white/90 tracking-wider'>{title}</h1>
+        <p className='mt-2 text-white/50 text-sm tracking-widest'>{subtitle}</p>
+      </div>
+
+      {/* 登录卡片容器 */}
+      <div className='w-full h-full flex items-center justify-center p-8'>
+        <div className='relative'>
+          {/* 卡片外圈光效 */}
+          <div className='absolute -inset-1 bg-gradient-to-r from-purple-500 via-blue-500 to-indigo-500 rounded-2xl blur opacity-30'></div>
+
+          {/* 登录组件容器 */}
+          <div className='relative bg-slate-900/80 backdrop-blur-xl rounded-2xl border border-white/10 shadow-2xl overflow-hidden'>
+            <LoginComponent onLoginSuccess={handleLoginSuccess} />
+          </div>
+        </div>
+      </div>
+
+      {/* 底部装饰 */}
+      <div className='absolute bottom-6 left-0 right-0 text-center'>
+        <p className='text-white/30 text-xs'>{footer}</p>
+      </div>
+    </div>
+  )
+}
+
+export default App;

src/pages/auth/store.ts

@@ -0,0 +1,110 @@
+
+import { queryLogin } from '@/modules/query';
+import { create } from 'zustand';
+import { toast } from 'sonner';
+type UserInfo = {
+  id?: string;
+  username?: string;
+  nickname?: string | null;
+  needChangePassword?: boolean;
+  description?: string | null;
+  type?: 'user' | 'org';
+  orgs?: string[];
+  avatar?: string;
+};
+export type LayoutStore = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openUser: boolean;
+  setOpenUser: (openUser: boolean) => void;
+  me?: UserInfo;
+  setMe: (me: UserInfo) => void;
+  clearMe: () => void;
+  getMe: () => Promise<void>;
+  switchOrg: (username?: string) => Promise<void>;
+  isAdmin: boolean;
+  setIsAdmin: (isAdmin: boolean) => void
+  init: () => Promise<void>;
+  openLinkList: string[];
+  setOpenLinkList: (openLinkList: string[]) => void;
+  loginPageConfig: {
+    title: string;
+    subtitle: string;
+    footer: string;
+  };
+  setLoginPageConfig: (config: Partial<LayoutStore['loginPageConfig']>) => void;
+  links: HeaderLink[];
+  setLinks: (links: HeaderLink[]) => void;
+  showBaseHeader: boolean;
+  setShowBaseHeader: (showBaseHeader: boolean) => void;
+};
+type HeaderLink = {
+  title?: string;
+  href: string;
+  description?: string;
+  icon?: React.ReactNode;
+  key?: string;
+  isRoot?: boolean;
+};
+
+export const useLayoutStore = create<LayoutStore>((set, get) => ({
+  open: false,
+  setOpen: (open) => set({ open }),
+  openUser: false,
+  setOpenUser: (openUser) => set({ openUser }),
+  me: undefined,
+  setMe: (me) => set({ me }),
+  clearMe: () => {
+    set({ me: undefined, isAdmin: false });
+    window.location.href = '/root/login/?redirect=' + encodeURIComponent(window.location.href);
+  },
+  getMe: async () => {
+    const res = await queryLogin.getMe();
+    if (res.code === 200) {
+      set({ me: res.data });
+      set({ isAdmin: res.data.orgs?.includes?.('admin') || false });
+    }
+  },
+  switchOrg: async (username?: string) => {
+    const res = await queryLogin.switchUser(username || '');
+    if (res.code === 200) {
+      toast.success('切换成功');
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    } else {
+      toast.error(res.message || '请求失败');
+    }
+  },
+  isAdmin: false,
+  setIsAdmin: (isAdmin) => set({ isAdmin }),
+  init: async () => {
+    const token = await queryLogin.getToken();
+    if (token) {
+      set({ me: {} })
+      const me = await queryLogin.getMe();
+      // const user = await queryLogin.checkLocalUser() as UserInfo;
+      const user = me.code === 200 ? me.data : undefined;
+      if (user) {
+        set({ me: user });
+        set({ isAdmin: user.orgs?.includes?.('admin') || false });
+      } else {
+        set({ me: undefined, isAdmin: false });
+      }
+    }
+  },
+  openLinkList: ['/login'],
+  setOpenLinkList: (openLinkList) => set({ openLinkList }),
+  loginPageConfig: {
+    title: '可视化管理平台',
+    subtitle: '让工具和智能化触手可及',
+    footer: '欢迎使用可视化管理平台 · 连接您的工具',
+  },
+  setLoginPageConfig: (config) => set((state) => ({
+    loginPageConfig: { ...state.loginPageConfig, ...config },
+  })),
+  links: [{ title: '', href: '/', key: 'home' }],
+  setLinks: (links) => set({ links }),
+  showBaseHeader: true,
+  setShowBaseHeader: (showBaseHeader) => set({ showBaseHeader }),
+}));

src/pages/chat/index.tsx

@@ -1,4 +1,4 @@
-import { app } from '@/agent/index.ts'
+import { app } from '@/agents'
 import { useStudioStore } from '../studio/store';
 import { useShallow } from 'zustand/shallow';
 import { useState } from 'react';
@@ -19,8 +19,14 @@ export const Chat = () => {
     setIsLoading(true);
     const { routes } = studioStore;
     let callPrompts = '';
-    const toolsList = routes.map((r, index) =>
-      `${index + 1}. 工具名称: ${r.id}\n   描述: ${r.description}`
+    const toolsList = routes.map((r, index) => {
+      const args = r.metadata?.args || {};
+      let argsDescription = '';
+      if (Object.keys(args).length > 0) {
+        argsDescription = '，参数: ' + JSON.stringify(args);
+      }
+      return `${index + 1}. 工具名称: path: ${r.path} key: ${r.key}\n   描述: ${r.description}${argsDescription}`;
+    }
     ).join('\n\n');
 
     callPrompts = `你是一个 AI 助手，你可以使用以下工具来帮助用户完成任务:
@@ -34,7 +40,8 @@ ${toolsList}
 ## JSON 数据格式
 \`\`\`json
 {
-  "id": "工具的id",
+  "path": "工具的path",
+  "key": "工具的key",
   "payload": {
     // 工具所需的参数（如果需要）
     // 例如: "id": "xxx", "name": "xxx"
@@ -45,7 +52,7 @@ ${toolsList}
 注意：
 - payload 中包含工具执行所需的所有参数
 - 如果工具不需要参数，payload 可以为空对象 {}
-- 确保返回的 id 与上述工具列表中的工具名称完全匹配`
+- 确保返回的 path 和 key 与上述工具列表中的工具名称完全匹配`
 
     const res = await query.post({
       path: 'ai',
@@ -69,7 +76,7 @@ ${toolsList}
       // 处理返回结果
       const payload = res.data?.action;
       if (payload) {
-        const route = routes.find(r => r.id === payload.id);
+        const route = routes.find(r => r.path === payload.path && r.key === payload.key);
         const { path, key } = route || {};
         const { id, ...otherParams } = payload.payload || {};
         const action = { path, key, ...otherParams }
@@ -101,7 +108,7 @@ ${toolsList}
   }
   return <div className="h-full flex flex-col border-l border-gray-300 bg-white">
     <div style={{ height: '3rem' }} className="flex items-center justify-between px-4 border-b border-gray-300 bg-gray-50">
-      <div className="text-sm text-gray-600">智能体</div>
+      <div className="text-sm text-gray-600">执行体</div>
     </div>
     <div style={{ height: 'calc(100% - 3rem)' }} className="overflow-auto">
       <QueryViewMessages type="component" />

src/pages/query-view/components/DetailsDialog.tsx

@@ -1,7 +1,7 @@
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { DetailsTab, useQueryViewStore } from '../store';
 import { useShallow } from 'zustand/shallow';
-import { useStudioStore, filterRouteInfo, getPayload } from '@/app/studio/store';
+import { useStudioStore, filterRouteInfo, getPayload } from '@/pages/studio/store';
 import { QueryView } from '..';
 import { useCallback, useMemo, useState } from 'react';
 import { pickRouterViewData, RouterViewData, RouterViewItem } from '@kevisual/api/proxy';
@@ -539,12 +539,12 @@ export const DetailsDialog = () => {
         </DialogContent>
       </Dialog>
       <Dialog open={queryViewStore.showDetailsDialog} onOpenChange={queryViewStore.setShowDetailsDialog}>
-        <DialogContent className={`max-h-[80vh] overflow-hidden ${isFullscreen ? 'w-screen! h-screen! max-w-screen! max-h-screen! ' : 'max-w-3xl! '}`}>
-          <DialogHeader>
+        <DialogContent className={`flex flex-col max-h-[85vh] ${isFullscreen ? 'w-screen! h-screen! max-w-screen! max-h-screen! ' : 'max-w-4xl! '}`}>
+          <DialogHeader className="flex-shrink-0">
             <DialogTitle>详情信息</DialogTitle>
           </DialogHeader>
 
-          <div className="flex gap-2 border-b border-gray-200">
+          <div className="flex gap-2 border-b border-gray-200 flex-shrink-0">
             {queryViewStore.allDetailsTabs.map((tab) => (
               <button
                 key={tab.key}
@@ -559,7 +559,7 @@ export const DetailsDialog = () => {
             ))}
           </div>
 
-          <div className="mt-4 h-[calc(80vh-200px)] overflow-auto scrollbar px-2">
+          <div className="flex-1 overflow-auto scrollbar px-2 min-h-0">
             {/* 第一个标签页：详情信息 */}
             {queryViewStore.detailsActiveTab === 'details' && (
               <DetailsInfoPanel detailsData={queryViewStore.detailsData} />
@@ -575,9 +575,9 @@ export const DetailsDialog = () => {
               <RouterInfoPanel routeInfo={routeInfo} />
             )}
 
-            {/* 第三个标签页：响应 */}
+            {/* 第四个标签页：响应 */}
             {queryViewStore.detailsActiveTab === 'response' && (
-              <div className="space-y-4">
+              <div className="space-y-4 h-full">
                 <QueryView viewData={queryViewStore.detailsData} type={'message'} setIsFullscreen={setIsFullscreen} />
               </div>
             )}

src/pages/query-view/index.tsx

@@ -1,5 +1,5 @@
 import { QueryProxy, RouterViewItem } from '@kevisual/api/proxy'
-import { app } from '@/agent/index.ts'
+import { app } from '@/agents'
 import { use, useEffect, useState, useRef, useId, useMemo } from 'react'
 import { flexRender, useReactTable, getCoreRowModel, ColumnDef } from '@tanstack/react-table'
 import { RefreshCw, Info, MoreVertical, Edit, Trash2, Download, Save, ExternalLink, Code, Delete, Maximize, Minimize } from 'lucide-react'
@@ -67,7 +67,7 @@ export const QueryView = (props: Props) => {
       setIsList(true);
     }
     setData(response.data.list)
-    const [_, firstItem] = response.data.list || []
+    const [firstItem] = response.data.list || []
     if (firstItem) {
       const cols: ColumnDef<any>[] = Object.keys(firstItem).map(key => ({
         accessorKey: key,

src/pages/studio/components/ProxyStatusDialog.tsx

@@ -0,0 +1,135 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useStudioStore } from '../store';
+import { useShallow } from 'zustand/shallow';
+import { Activity, RefreshCw, CheckCircle, XCircle } from 'lucide-react';
+import { useState, useEffect, useRef } from 'react';
+import { cloneDeep } from 'es-toolkit';
+import { RouterViewItem } from '@kevisual/api/proxy';
+
+export const ProxyStatusDialog = () => {
+  const { showProxyStatus, setShowProxyStatus, getQueryProxyStatus } = useStudioStore(
+    useShallow((state) => ({
+      showProxyStatus: state.showProxyStatus,
+      setShowProxyStatus: state.setShowProxyStatus,
+      getQueryProxyStatus: state.getQueryProxyStatus,
+    }))
+  );
+
+  const [statusList, setStatusList] = useState<RouterViewItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const loadStatus = async () => {
+    setLoading(true);
+    try {
+      const status = await getQueryProxyStatus();
+      console.log('Loaded proxy status:', status);
+      setStatusList(cloneDeep(status));
+    } catch (error) {
+      console.error('Failed to load proxy status:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (showProxyStatus) {
+      loadStatus();
+      // 每5秒刷新一次
+      intervalRef.current = setInterval(loadStatus, 5000);
+    } else {
+      // 关闭弹窗时清除定时器
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [showProxyStatus]);
+
+  const getStatusStyle = (status?: string) => {
+    switch (status) {
+      case 'active':
+        return {
+          icon: <CheckCircle size={14} />,
+          className: 'bg-green-100 text-green-700 border-green-200',
+        };
+      case 'error':
+        return {
+          icon: <XCircle size={14} />,
+          className: 'bg-red-100 text-red-700 border-red-200',
+        };
+      default:
+        return {
+          icon: null,
+          className: 'bg-gray-100 text-gray-700 border-gray-200',
+        };
+    }
+  };
+
+  return (
+    <Dialog open={showProxyStatus} onOpenChange={setShowProxyStatus}>
+      <DialogContent className="max-w-2xl! max-h-[80vh] overflow-hidden flex flex-col">
+        <DialogHeader className="flex flex-row items-center justify-between">
+          <DialogTitle className="flex items-center gap-2">
+            <Activity size={20} />
+            Proxy Router 状态
+            <button
+              className="p-1 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-200 transition-colors"
+              title="刷新"
+              onClick={loadStatus}
+              disabled={loading}
+            >
+              <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
+            </button>
+          </DialogTitle>
+
+        </DialogHeader>
+        <div className="flex-1 overflow-auto">
+          {loading ? (
+            <div className="text-center text-gray-500 py-8">加载中...</div>
+          ) : statusList.length === 0 ? (
+            <div className="text-center text-gray-500 py-8">暂无数据</div>
+          ) : (
+            <div className="space-y-2">
+              {statusList.map((item) => {
+                const statusStyle = getStatusStyle(item.routerStatus);
+                return (
+                  <div
+                    key={item.id}
+                    className="p-3 border border-gray-200 rounded-md hover:bg-gray-50 transition-colors"
+                  >
+                    <div className="flex items-center justify-between">
+                      <span className="font-medium text-gray-900">{item.title}</span>
+                      <span className="text-xs text-gray-500">{item.id}</span>
+                    </div>
+                    {item.type === 'api' && item.api?.url && (
+                      <div className="mt-2">
+                        <span className="text-xs text-gray-500">URL: </span>
+                        <span className="text-xs font-mono text-gray-700">{item.api?.url}</span>
+                      </div>
+                    )}
+                    {item.routerStatus && (
+                      <div className="mt-2 flex flex-wrap gap-2">
+                        <span className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs border ${statusStyle.className}`}>
+                          {statusStyle.icon}
+                          {item.routerStatus}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/pages/studio/components/RouterGroupDialog.tsx

@@ -0,0 +1,196 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useStudioStore } from '../store';
+import { useShallow } from 'zustand/shallow';
+import { FolderClosed, FolderOpen, Search, List } from 'lucide-react';
+import { useState, useMemo, useEffect } from 'react';
+
+interface RouteItem {
+  id: string;
+  path?: string;
+  key?: string;
+  description?: string;
+  metadata?: Record<string, any>;
+}
+
+interface GroupedRoutes {
+  [group: string]: RouteItem[];
+}
+
+type TabType = 'grouped' | 'all';
+
+export const RouterGroupDialog = () => {
+  const { showRouterGroup, setShowRouterGroup, routes, allRoutes, searchRoutes, setShowFilter, getAllRoutes } = useStudioStore(
+    useShallow((state) => ({
+      showRouterGroup: state.showRouterGroup,
+      setShowRouterGroup: state.setShowRouterGroup,
+      routes: state.routes,
+      allRoutes: state.allRoutes,
+      searchRoutes: state.searchRoutes,
+      setShowFilter: state.setShowFilter,
+      getAllRoutes: state.getAllRoutes,
+    }))
+  );
+
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
+  const [activeTab, setActiveTab] = useState<TabType>('grouped');
+
+  useEffect(() => {
+    if (showRouterGroup && activeTab === 'all') {
+      getAllRoutes();
+    }
+  }, [showRouterGroup, activeTab, getAllRoutes]);
+
+  const displayRoutes = activeTab === 'grouped' ? routes : allRoutes;
+
+  // 按 path 分组
+  const groupedRoutes = useMemo(() => {
+    const groups: GroupedRoutes = {};
+    displayRoutes.forEach((route: RouteItem) => {
+      if (!route.path) return;
+      // 获取第一级路径作为分组
+      const firstSegment = route.path.split('/').filter(Boolean)[0] || 'root';
+      if (!groups[firstSegment]) {
+        groups[firstSegment] = [];
+      }
+      groups[firstSegment].push(route);
+    });
+    return groups;
+  }, [displayRoutes]);
+
+  const toggleGroup = (group: string) => {
+    const newExpanded = new Set(expandedGroups);
+    if (newExpanded.has(group)) {
+      newExpanded.delete(group);
+    } else {
+      newExpanded.add(group);
+    }
+    setExpandedGroups(newExpanded);
+  };
+
+  const handleSearchByPath = (e: React.MouseEvent, path: string) => {
+    e.stopPropagation();
+    const keyword = `WHERE path='${path}'`;
+    searchRoutes(keyword);
+    setShowFilter(true);
+    setShowRouterGroup(false);
+  };
+
+  const handleSearchByKey = (e: React.MouseEvent, path: string, key: string) => {
+    e.stopPropagation();
+    const keyword = `WHERE path='${path}' AND key='${key}'`;
+    searchRoutes(keyword);
+    setShowFilter(true);
+    setShowRouterGroup(false);
+  };
+
+  const sortedGroups = Object.keys(groupedRoutes).sort();
+
+  const renderRouteItem = (route: RouteItem) => (
+    <div
+      key={route.id}
+      className="px-4 py-2 hover:bg-gray-50 transition-colors flex items-center justify-between"
+    >
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <span className="font-mono text-sm text-gray-800 truncate">{route.path}</span>
+        {route.key && (
+          <>
+            <span className="text-xs text-gray-500">/</span>
+            <span className="text-sm text-gray-600 truncate">{route.key}</span>
+            <button
+              className="p-1 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 transition-colors shrink-0"
+              title="搜索此路径和key"
+              onClick={(e) => handleSearchByKey(e, route.path!, route.key!)}
+            >
+              <Search size={14} />
+            </button>
+          </>
+        )}
+      </div>
+      {route.description && (
+        <span className="text-xs text-gray-500 truncate max-w-xs ml-2 shrink-0">
+          {route.description}
+        </span>
+      )}
+    </div>
+  );
+
+  const renderGroup = (group: string) => {
+    const isExpanded = expandedGroups.has(group);
+    const groupRoutes = groupedRoutes[group];
+    // 使用分组的第一个路由的完整 path 作为搜索关键词
+    const searchPath = groupRoutes[0]?.path || `/${group}`;
+
+    return (
+      <div key={group} className="border border-gray-200 rounded-md overflow-hidden">
+        <div
+          className="flex items-center gap-2 px-3 py-2 bg-gray-50 cursor-pointer hover:bg-gray-100 transition-colors"
+          onClick={() => toggleGroup(group)}
+        >
+          {isExpanded ? (
+            <FolderOpen size={18} className="text-gray-600" />
+          ) : (
+            <FolderClosed size={18} className="text-gray-600" />
+          )}
+          <span className="font-medium text-gray-900">/{group}</span>
+          <span className="text-xs text-gray-500">({groupRoutes.length} 个路由)</span>
+          <button
+            className="ml-auto p-1 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 transition-colors"
+            title="搜索此路径"
+            onClick={(e) => handleSearchByPath(e, searchPath)}
+          >
+            <Search size={14} />
+          </button>
+        </div>
+        {isExpanded && (
+          <div className="divide-y divide-gray-100">
+            {groupRoutes.map(renderRouteItem)}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Dialog open={showRouterGroup} onOpenChange={setShowRouterGroup}>
+      <DialogContent className="max-w-3xl! max-h-[80vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle>路由分组</DialogTitle>
+        </DialogHeader>
+        {/* Tabs */}
+        <div className="flex border-b border-gray-200">
+          <button
+            className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors ${
+              activeTab === 'grouped'
+                ? 'text-gray-900 border-b-2 border-gray-900'
+                : 'text-gray-500 hover:text-gray-700'
+            }`}
+            onClick={() => setActiveTab('grouped')}
+          >
+            <FolderClosed size={16} />
+            当前分组
+          </button>
+          <button
+            className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors ${
+              activeTab === 'all'
+                ? 'text-gray-900 border-b-2 border-gray-900'
+                : 'text-gray-500 hover:text-gray-700'
+            }`}
+            onClick={() => setActiveTab('all')}
+          >
+            <List size={16} />
+            全部路由 ({allRoutes.length})
+          </button>
+        </div>
+        <div className="flex-1 overflow-auto space-y-2 p-2">
+          {sortedGroups.length === 0 ? (
+            <div className="text-center text-gray-500 py-8">
+              {activeTab === 'all' && allRoutes.length === 0 ? '加载中...' : '暂无路由数据'}
+            </div>
+          ) : (
+            sortedGroups.map(renderGroup)
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/pages/studio/index.tsx

@@ -1,6 +1,6 @@
 import { filterRouteInfo, useStudioStore } from './store.ts';
 import { use, useEffect, useState } from 'react';
-import { MonitorPlay, Play, PanelLeft, PanelLeftClose, PanelRight, PanelRightClose, Filter, FilterX, Search, X, MoreHorizontal, Info, Code, RotateCcw } from 'lucide-react';
+import { MonitorPlay, Play, PanelLeft, PanelLeftClose, PanelRight, PanelRightClose, PanelTop, PanelTopClose, Filter, FilterX, Search, X, MoreHorizontal, Info, Code, RotateCcw, Book, FolderClosed, Activity } from 'lucide-react';
 import { Panel, Group } from 'react-resizable-panels'
 import { ViewList } from '../view/list.tsx';
 import { useShallow } from 'zustand/shallow';
@@ -9,9 +9,12 @@ import { Input } from '@/components/ui/input.tsx';
 import { Button } from '@/components/ui/button.tsx';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu.tsx';
 import { ExportDialog } from './components/ExportDialog';
+import { RouterGroupDialog } from './components/RouterGroupDialog';
+import { ProxyStatusDialog } from './components/ProxyStatusDialog';
 import { useQueryViewStore } from '../query-view/store/index.ts';
 import { toast } from 'sonner';
 import { DetailsDialog } from '../query-view/components/DetailsDialog.tsx';
+import { useLayoutStore } from '../auth/store.ts';
 export const AppProvider = () => {
   const { showLeftPanel, showRightPanel } = useStudioStore(useShallow((state) => ({
     showLeftPanel: state.showLeftPanel,
@@ -49,13 +52,27 @@ export const WrapperHeader = (props: { children: React.ReactNode }) => {
     showRightPanel: state.showRightPanel,
     setShowRightPanel: state.setShowRightPanel,
   })));
+  const layoutStore = useLayoutStore(useShallow((state) => ({
+    showBaseHeader: state.showBaseHeader,
+    setShowBaseHeader: state.setShowBaseHeader,
+  })));
   return <div className='h-full'>
     <div className="w-full h-12 flex items-center justify-between px-4 border-b border-gray-200 bg-white">
+      <div className='flex gap-2'>
+
         <div className="cursor-pointer text-gray-600 hover:text-gray-900 transition-colors" title="Kevisual Router Studio" onClick={() => {
           store.setShowLeftPanel(!store.showLeftPanel);
         }}>
           {showLeftPanel ? <PanelLeftClose size={16} /> : <PanelLeft size={16} />}
         </div>
+        <div className='cursor-pointer text-gray-600 hover:text-gray-900 transition-colors" title={layoutStore.showBaseHeader ? "隐藏BaseHeader" : "显示BaseHeader"}' onClick={
+          () => {
+            layoutStore.setShowBaseHeader(!layoutStore.showBaseHeader)
+          }
+        }>
+          {layoutStore.showBaseHeader ? <PanelTopClose size={16} /> : <PanelTop size={16} />}
+        </div>
+      </div>
       <div className="flex items-center gap-2">
         <button
           className="p-1.5 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-all duration-200 cursor-pointer"
@@ -100,6 +117,8 @@ export const App = () => {
     setShowFilter: state.setShowFilter,
     setShowExportDialog: state.setShowExportDialog,
     setExportRoutes: state.setExportRoutes,
+    setShowRouterGroup: state.setShowRouterGroup,
+    setShowProxyStatus: state.setShowProxyStatus,
   })));
   const queryViewStore = useQueryViewStore(useShallow((state) => ({
     setShowDetailsDialog: state.setShowDetailsDialog,
@@ -173,6 +192,8 @@ export const App = () => {
   return (
     <div className="max-w-5xl mx-auto p-6 h-full overflow-hidden flex flex-col relative">
       <ExportDialog />
+      <RouterGroupDialog />
+      <ProxyStatusDialog />
       {loading && <div className="text-center text-gray-500 mb-4">加载中...</div>}
       {store.showFilter && (
         <div className="mb-3 animate-in fade-in slide-in-from-top-2 duration-300">
@@ -348,7 +369,27 @@ export const App = () => {
           );
         })}
       </div>
-      <div className='h-12 absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex items-center justify-end px-4'>
+      <div className='h-12 absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex items-center justify-end px-4 gap-2'>
+        <Button
+          variant="ghost"
+          onClick={() => {
+            store.setShowProxyStatus(true);
+          }}
+          className="gap-2"
+          title="Proxy 状态"
+        >
+          <Activity size={16} />
+        </Button>
+        <Button
+          variant="ghost"
+          onClick={() => {
+            store.setShowRouterGroup(true);
+          }}
+          className="gap-2"
+          title="路由分组"
+        >
+          <FolderClosed size={16} />
+        </Button>
         <Button
           variant="ghost"
           onClick={() => {

src/pages/studio/store.ts

@@ -6,10 +6,12 @@ import { toast } from 'sonner';
 import { use } from '@kevisual/context'
 // import { MyCache } from '@kevisual/cache'
 import { persist } from 'zustand/middleware';
-import { app } from '@/agent/index.ts'
+import { app } from '@/agents'
 import { cloneDeep } from 'es-toolkit'
-import { nanoid } from 'nanoid';
+import { nanoid, customAlphabet } from 'nanoid';
 import { Result } from '@kevisual/query';
+const letterAndNumber = 'abcdefghijklmnopqrstuvwxy';
+const nanoid8 = customAlphabet(letterAndNumber, 8);
 const historyReplace = (url: string) => {
   if (window.history.replaceState) {
     window.history.replaceState(null, '', url);
@@ -42,6 +44,8 @@ interface StudioState {
   setLoading: (loading: boolean) => void;
   routes: Array<RouteItem>;
   searchRoutes: (keyword: string) => Promise<void>;
+  allRoutes: Array<RouteItem>;
+  getAllRoutes: () => Promise<void>;
   run: (route: RouteItem, type?: 'normal' | 'custom') => Promise<void>;
   queryProxy?: QueryProxy;
   init: (force?: boolean) => Promise<{ queryProxy: QueryProxy }>;
@@ -70,6 +74,13 @@ interface StudioState {
   setShowExportDialog: (show: boolean) => void;
   exportRoutes?: RouteItem[];
   setExportRoutes: (routes?: RouteItem[]) => void;
+  showApiDocs: boolean;
+  setShowApiDocs: (show: boolean) => void;
+  showRouterGroup: boolean;
+  setShowRouterGroup: (show: boolean) => void;
+  showProxyStatus: boolean;
+  setShowProxyStatus: (show: boolean) => void;
+  getQueryProxyStatus: () => Promise<RouterViewItem[]>;
 }
 const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 export const filterRouteInfo = (viewData: RouterViewItem) => {
@@ -106,6 +117,12 @@ export const useStudioStore = create<StudioState>()(
         const routes: any[] = await queryProxy.listRoutes(() => true, { query: keyword });
         set({ routes, searchKeyword: keyword });
       },
+      allRoutes: [],
+      getAllRoutes: async () => {
+        let queryProxy = get().queryProxy!;
+        const routes: any[] = await queryProxy.listRoutes(() => true);
+        set({ allRoutes: routes });
+      },
       searchKeyword: '',
       setSearchKeyword: (keyword: string) => set({ searchKeyword: keyword }),
       currentView: undefined,
@@ -332,7 +349,23 @@ export const useStudioStore = create<StudioState>()(
       showExportDialog: false,
       setShowExportDialog: (show: boolean) => set({ showExportDialog: show }),
       exportRoutes: undefined,
-      setExportRoutes: (routes?: RouteItem[]) => set({ exportRoutes: routes })
+      setExportRoutes: (routes?: RouteItem[]) => set({ exportRoutes: routes }),
+      showApiDocs: false,
+      setShowApiDocs: (show: boolean) => set({ showApiDocs: show }),
+      showRouterGroup: false,
+      setShowRouterGroup: (show: boolean) => set({ showRouterGroup: show }),
+      showProxyStatus: false,
+      setShowProxyStatus: (show: boolean) => set({ showProxyStatus: show }),
+      getQueryProxyStatus: async () => {
+        let queryProxy = get().queryProxy!;
+        const status = queryProxy.routerViewItems.map(item => {
+          return {
+            id: item.id || nanoid8(),
+            ...item,
+          }
+        })
+        return status;
+      }
     }),
     {
       name: 'studio-storage',

src/pages/view/components/DocsModal.tsx

@@ -0,0 +1,34 @@
+import { useStudioStore } from "@/pages/studio/store";
+import { useShallow } from "zustand/shallow";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+export const DocsModal = () => {
+  const store = useStudioStore(useShallow((state) => ({
+    showApiDocs: state.showApiDocs,
+    setShowApiDocs: state.setShowApiDocs,
+  })));
+
+  return (
+    <Dialog open={store.showApiDocs} onOpenChange={store.setShowApiDocs}>
+      <DialogContent className="max-w-3xl! max-h-[80vh] overflow-hidden">
+        <DialogHeader>
+          <DialogTitle className="text-xl">API 文档</DialogTitle>
+        </DialogHeader>
+        <div className="flex-1 overflow-auto">
+          <p>这里是 API 文档的内容...</p>
+        </div>
+        <DialogFooter>
+          <Button onClick={() => store.setShowApiDocs(false)}>关闭</Button>
+        </DialogFooter>
+      </DialogContent>
+
+    </Dialog>
+  );
+};

src/pages/view/components/ViewEditor.tsx

@@ -4,8 +4,8 @@ import { Label } from "@/components/ui/label"
 import { Input } from "@/components/ui/input"
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { DataItemForm } from "@/app/view/components/DataItemForm"
-import { ViewFormItem } from "@/app/view/components/ViewFormItem"
+import { DataItemForm } from "@/pages/view/components/DataItemForm"
+import { ViewFormItem } from "@/pages/view/components/ViewFormItem"
 import { nanoid } from "nanoid"
 
 interface ViewEditorProps {

src/pages/view/list.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useStudioStore } from '../studio/store.ts';
-import { Search, RotateCw, Plus, MoreHorizontal, Layout, Edit2, Trash2, MousePointer2 } from "lucide-react";
+import { Search, RotateCw, Plus, MoreHorizontal, Layout, Edit2, Trash2, MousePointer2, Book } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import {
@@ -11,10 +11,10 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { ViewEditor } from "@/app/view/components/ViewEditor.tsx";
+import { ViewEditor } from "@/pages/view/components/ViewEditor.tsx";
 import { toast } from "sonner";
 import { useShallow } from "zustand/shallow";
-
+import { DocsModal } from './components/DocsModal.tsx'
 const ViewItem = ({ view, onEdit, onDelete, onDeleteViewItem }: { view: any; onEdit: (view: any) => void; onDelete: (id: string) => void; onDeleteViewItem: (id: string, viewId: string) => void }) => {
   const [expanded, setExpanded] = useState(false);
   const studioStore = useStudioStore(useShallow((state) => ({
@@ -158,22 +158,29 @@ const ViewItem = ({ view, onEdit, onDelete, onDeleteViewItem }: { view: any; onE
   </div>
 }
 export const ViewList = () => {
-  const { routeViewList, updateRouteView, deleteRouteView, deleteRouteViewItem, getViewList } = useStudioStore();
+  const store = useStudioStore(useShallow((state) => ({
+    routeViewList: state.routeViewList,
+    updateRouteView: state.updateRouteView,
+    deleteRouteView: state.deleteRouteView,
+    deleteRouteViewItem: state.deleteRouteViewItem,
+    getViewList: state.getViewList,
+    setShowApiDocs: state.setShowApiDocs,
+  })));
   const [searchTerm, setSearchTerm] = useState("");
   const [editorOpen, setEditorOpen] = useState(false);
   const [editingView, setEditingView] = useState<any>(null);
 
-  const filteredViews = routeViewList.filter(view =>
+  const filteredViews = store.routeViewList.filter(view =>
     (view.title || '未命名视图').toLowerCase().includes(searchTerm.toLowerCase()) ||
     (view.description || '').toLowerCase().includes(searchTerm.toLowerCase())
   );
   useEffect(() => {
-    getViewList();
+    store.getViewList();
   }, [])
 
   const handleRefresh = async () => {
     const toastId = toast.loading('正在刷新视图列表...');
-    await getViewList();
+    await store.getViewList();
     // toast.update(toastId, { render: '视图列表已刷新', type: 'success', id: false, autoClose: 1000 });
     toast.success('视图列表已刷新', { duration: 1000 });
     toast.dismiss(toastId);
@@ -190,17 +197,20 @@ export const ViewList = () => {
 
   const handleDelete = (id: string) => {
     if (confirm('确定要删除这个视图吗？')) {
-      deleteRouteView(id);
+      store.deleteRouteView(id);
     }
   };
 
   const handleSaveView = (viewData: any) => {
-    updateRouteView(viewData);
+    store.updateRouteView(viewData);
   };
 
   return (
-    <div className="w-full h-full max-w-4xl p-4 border border-gray-200 rounded-md shadow-sm">
-      <div className="flex items-center space-x-2 mb-4">
+    <div className="w-full h-full max-w-4xl  py-4  border border-gray-200 rounded-md shadow-sm overflow-hidden">
+      <div className="flex items-center px-4 space-x-2 mb-4">
+        <Button onClick={() => store.setShowApiDocs(true)} title='文档' variant="outline" size="icon" className="h-8 w-8 cursor-pointer border-gray-300">
+          <Book size={16} />
+        </Button>
         <div className="relative flex-1">
           <Input
             placeholder="搜索视图..."
@@ -218,7 +228,7 @@ export const ViewList = () => {
         </Button>
       </div>
 
-      <div className="flex flex-col">
+      <div className="flex flex-col px-4 overscroll-auto scrollbar" style={{ height: 'calc(100% - 32px)' }}>
         {filteredViews.length === 0 ? (
           <div className="text-center py-4 text-gray-500">
             {searchTerm ? '未找到匹配的视图' : '暂无视图'}
@@ -230,7 +240,7 @@ export const ViewList = () => {
               view={view}
               onEdit={handleEdit}
               onDelete={handleDelete}
-              onDeleteViewItem={deleteRouteViewItem}
+              onDeleteViewItem={store.deleteRouteViewItem}
             />
           ))
         )}
@@ -242,6 +252,7 @@ export const ViewList = () => {
         data={editingView}
         onSave={handleSaveView}
       />
+      <DocsModal />
     </div>
   );
 }

src/routeTree.gen.ts

@@ -10,6 +10,7 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as ViewRouteImport } from './routes/view'
+import { Route as LoginRouteImport } from './routes/login'
 import { Route as ConsoleRouteImport } from './routes/console'
 import { Route as IdRouteImport } from './routes/$id'
 import { Route as IndexRouteImport } from './routes/index'
@@ -19,6 +20,11 @@ const ViewRoute = ViewRouteImport.update({
   path: '/view',
   getParentRoute: () => rootRouteImport,
 } as any)
+const LoginRoute = LoginRouteImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ConsoleRoute = ConsoleRouteImport.update({
   id: '/console',
   path: '/console',
@@ -39,12 +45,14 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/$id': typeof IdRoute
   '/console': typeof ConsoleRoute
+  '/login': typeof LoginRoute
   '/view': typeof ViewRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/$id': typeof IdRoute
   '/console': typeof ConsoleRoute
+  '/login': typeof LoginRoute
   '/view': typeof ViewRoute
 }
 export interface FileRoutesById {
@@ -52,20 +60,22 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/$id': typeof IdRoute
   '/console': typeof ConsoleRoute
+  '/login': typeof LoginRoute
   '/view': typeof ViewRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/$id' | '/console' | '/view'
+  fullPaths: '/' | '/$id' | '/console' | '/login' | '/view'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/$id' | '/console' | '/view'
-  id: '__root__' | '/' | '/$id' | '/console' | '/view'
+  to: '/' | '/$id' | '/console' | '/login' | '/view'
+  id: '__root__' | '/' | '/$id' | '/console' | '/login' | '/view'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   IdRoute: typeof IdRoute
   ConsoleRoute: typeof ConsoleRoute
+  LoginRoute: typeof LoginRoute
   ViewRoute: typeof ViewRoute
 }
 
@@ -78,6 +88,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ViewRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/login': {
+      id: '/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof LoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/console': {
       id: '/console'
       path: '/console'
@@ -106,6 +123,7 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   IdRoute: IdRoute,
   ConsoleRoute: ConsoleRoute,
+  LoginRoute: LoginRoute,
   ViewRoute: ViewRoute,
 }
 export const routeTree = rootRouteImport

src/routes/$id.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import App from '@/app/page'
+import App from '@/pages/page'
 
 export const Route = createFileRoute('/$id')({
   component: RouteComponent,

src/routes/__root.tsx

@@ -1,38 +1,36 @@
-import { Link, Outlet, createRootRoute, useLocation } from '@tanstack/react-router'
+import { LayoutMain } from '@/pages/auth/modules/BaseHeader';
+import { Outlet, createRootRoute } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { Toaster } from '@/components/ui/sonner'
-import { Load } from '@kevisual/context/load'
-import * as query from '@/modules/query';
+import { AuthProvider } from '@/pages/auth'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { useLayoutStore } from '@/pages/auth/store';
+import { useShallow } from 'zustand/shallow';
+import clsx from 'clsx';
 export const Route = createRootRoute({
   component: RootComponent,
 })
-Load.npm({ pkg: 'eruda' });
+
 
 function RootComponent() {
-  // 这里预加载一下 query 模块，避免在代码分割自动threeshaking;
-  query;
-
+  const store = useLayoutStore(useShallow(state => ({
+    showBaseHeader: state.showBaseHeader,
+  })));
   return (
     <div className='h-full overflow-hidden'>
-
-      <div className="p-2 flex gap-2 text-lg">
-        <Link
-          to="/"
-          activeProps={{
-            className: 'font-bold',
-          }}
-          activeOptions={{ exact: true }}
-        >
-          首页
-        </Link>
-      </div>
-      <hr />
-      <main className='h-[calc(100%-4rem)] overflow-auto scrollbar'>
+      <LayoutMain />
+      <AuthProvider mustLogin={true}>
+        <TooltipProvider>
+          <main className={clsx('overflow-auto scrollbar', {
+            'h-[calc(100%-3rem)]': store.showBaseHeader,
+            'h-full': !store.showBaseHeader,
+          })}>
             <Outlet />
           </main>
-      <TanStackRouterDevtools position="bottom-left" />
+        </TooltipProvider>
+      </AuthProvider>
+      <TanStackRouterDevtools position="bottom-right" />
       <Toaster />
     </div>
-
   )
 }

src/routes/index.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import App from '@/app/page'
+import App from '@/pages/page'
 export const Route = createFileRoute('/')({
   component: RouteComponent,
 })

src/routes/login.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+import App from '@/pages/auth/page'
+export const Route = createFileRoute('/login')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <App />
+}

src/routes/view.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import App from '../app/query-view/page'
+import App from '@/pages/query-view/page'
 export const Route = createFileRoute('/view')({
   component: RouteComponent,
 })

web/.cnb.yml

@@ -1,19 +0,0 @@
-# .cnb.yml
-include:
-  - https://cnb.cool/kevisual/cnb/-/blob/main/.cnb/template.yml
-
-.common_env: &common_env
-  env:
-    USERNAME: root
-  imports:
-    - https://cnb.cool/kevisual/env/-/blob/main/.env.development
-
-$:
-  vscode:
-    - docker:
-        image: docker.cnb.cool/kevisual/dev-env:latest
-      services:
-        - vscode
-        - docker
-      imports: !reference  [.common_env, imports]
-      stages: !reference  [.dev_template, stages]

web/.env.example

@@ -1,2 +0,0 @@
-NODE_ENV=
-VITE_API_URL=http://localhost:51515

web/.gitignore

@@ -1,18 +0,0 @@
-# Logs
-logs
-*.log
-
-node_modules
-dist
-pack-dist
-
-.DS_Store
-
-.turbo
-
-.pnpm-store
-
-.tanstack
-.env*
-
-!.env.example