update

2026-01-27 22:25:40 +08:00
parent c2f5f504d3
commit 98f21d8aaa
44 changed files with 2 additions and 1 deletions
--- a/cli-center-docs/src/apps/footer.tsx
+++ b/cli-center-docs/src/apps/footer.tsx
@@ -0,0 +1,41 @@
+import { wrapBasename } from "@/modules/basename"
+
+export const Footer = () => {
+
+  const links = [
+    {
+      href: wrapBasename('/'),
+      label: '主页',
+    },
+    {
+      href: wrapBasename('/docs'),
+      label: '文档',
+    },
+  ]
+
+  return (
+    <footer className="fixed bottom-0 w-full bg-white border-t border-gray-200 shadow-lg">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+        {/* 链接区域 */}
+        <nav className="flex flex-wrap justify-center items-center gap-2 sm:gap-4 mb-3">
+          {links.map((link) => (
+            <a
+              key={link.href}
+              href={link.href}
+              className="relative px-4 py-2 text-sm sm:text-base font-medium text-gray-600 hover:text-blue-600 transition-all duration-300 ease-in-out
+                         before:absolute before:bottom-0 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 before:transition-all before:duration-300
+                         hover:before:w-full active:scale-95"
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+
+        {/* 版权信息 */}
+        <div className="text-center text-xs sm:text-sm text-gray-500">
+          &copy; 2025 Daily Question
+        </div>
+      </div>
+    </footer>
+  )
+}
--- a/cli-center-docs/src/apps/menu.tsx
+++ b/cli-center-docs/src/apps/menu.tsx
@@ -0,0 +1,62 @@
+import { useMemo } from "react";
+
+export type MenuProps = {
+  items: MenuItem[];
+  basename?: string;
+};
+export type MenuItem = {
+  id: string;
+  data: {
+    title: string;
+    tags: string[];
+    hideInMenu?: boolean;
+  }
+}
+export const Menu = (props: MenuProps) => {
+  const { items, basename = '' } = props;
+  const list = useMemo(() => {
+    return items.filter(item => !item.data?.hideInMenu).sort((a, b) => {
+      return (a.id).localeCompare(b.id)
+    });
+  }, [items]);
+  if (list.length === 0) {
+    return null;
+  }
+  const currentPath = typeof window !== 'undefined' ? window.location.pathname : '';
+  
+  const isActive = (itemId: string) => {
+    return currentPath.includes(`/docs/${itemId}`);
+  };
+  
+  return (
+    <nav className='flex-1 overflow-y-auto scrollbar bg-white border border-gray-200 rounded-lg shadow-sm'>
+      <div className="sticky top-0 bg-white border-b border-gray-200 px-4 py-3 rounded-t-lg">
+        <h2 className="text-sm font-semibold text-black">文档列表</h2>
+      </div>
+      <div className="p-2 space-y-0.5">
+        {list.map(item => (
+          <a
+            key={item.id}
+            href={`${basename}/docs/${item.id}/`}
+            className={`group block rounded-md transition-all duration-200 ease-in-out border-l-3 ${
+              isActive(item.id)
+                ? 'bg-gray-100 border-l-4 border-black shadow-sm'
+                : 'border-transparent hover:bg-gray-50 hover:border-l-4 hover:border-gray-400'
+            }`}
+          >
+            <div className="px-3 py-2.5">
+              <h3 className={`text-sm font-medium transition-colors ${
+                isActive(item.id)
+                  ? 'text-black font-semibold'
+                  : 'text-gray-700 group-hover:text-black'
+              }`}>
+                {item.data?.title}
+              </h3>
+            </div>
+          </a>
+        ))}
+      </div>
+    </nav>
+  );
+}
+
--- a/cli-center-docs/src/apps/settings/index.tsx
+++ b/cli-center-docs/src/apps/settings/index.tsx
@@ -0,0 +1,103 @@
+import { use, useEffect, useState } from "react";
+import { Layout } from "./layout"
+import { useStore } from "./store";
+import '@kevisual/kv-code/kv-code.js'
+const link = {
+  loginDocs: '../docs/01-login-first/',
+  settingsDocs: '../../docs/10-config/',
+}
+export const FirstLogin = () => {
+  const store = useStore();
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  useEffect(() => {
+    store.initAdmin();
+  }, []);
+  useEffect(() => {
+    if (store.username) {
+      setUsername(store.username);
+    }
+  }, [store.username]);
+  const onClickLogin = async () => {
+    await store.login(username, password);
+  }
+  return (
+    <Layout>
+      <div className='flex items-center justify-center px-4'>
+        <div className='w-full max-w-md space-y-6'>
+          <h1 className='text-2xl font-bold text-black text-center'>管理员设置</h1>
+          <blockquote className="text-gray-500 p-4 mt-4">
+            第一次登录的<a className="text-gray-700 mx-1" href="https://kevisual.cn">kevisual</a> 用户为当前设备管理员。如果已经存在管理员账号，管理员可在"全局设置"中设置。
+            <a className="text-gray-700 mx-1 underline" href={link.loginDocs}>文档</a>
+          </blockquote>
+          <form className='space-y-4 mt-8'>
+            <div>
+              <label htmlFor='account' className='block text-sm font-medium text-gray-900 mb-2'> 账号 </label>
+              <input
+                type='text'
+                id='account'
+                onChange={e => setUsername(e.target.value)}
+                value={username}
+                placeholder='请输入账号'
+                autoComplete="username"
+                className='w-full px-4 py-2 border-2 border-black bg-white text-black placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent'
+              />
+            </div>
+            <div>
+              <label htmlFor='password' className='block text-sm font-medium text-gray-900 mb-2'> 密码 </label>
+              <input
+                type='password'
+                id='password'
+                onChange={e => setPassword(e.target.value)}
+                value={password}
+                placeholder='请输入密码'
+                autoComplete='current-password'
+                className='w-full px-4 py-2 border-2 border-black bg-white text-black placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent'
+              />
+            </div>
+            <button
+              type='button'
+              onClick={onClickLogin}
+              className='w-full px-4 py-2 bg-black text-white font-medium hover:bg-gray-800 active:bg-gray-900 transition-colors focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2'>
+              确定
+            </button>
+          </form>
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export const Config = () => {
+  const store = useStore();
+  const [code, setCode] = useState('');
+  useEffect(() => {
+    store.initAdmin();
+  }, []);
+  const onSaveConfig = async () => {
+    console.log('onSaveConfig', code);
+    const parsedCode = JSON.parse(code);
+    await store.saveConfig(parsedCode);
+  }
+  return (
+    <Layout>
+      <div className="p-4 flex flex-col h-full">
+        <div className="mb-4 flex justify-between items-center">
+          <h2 className="text-xl font-bold text-black" >
+            <a href={link.settingsDocs} target="_blank" rel="noreferrer" className="underline">
+              配置中心文档
+            </a>
+          </h2>
+          <button
+            onClick={onSaveConfig}
+            className="px-6 py-2 bg-black text-white font-medium hover:bg-gray-800 active:bg-gray-900 transition-colors focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
+            保存配置
+          </button>
+        </div>
+        <kv-code-editor className="flex-1" value={JSON.stringify(store.config, null, 2)} onChange={(e) => {
+          setCode(e.nativeEvent?.detail?.value);
+        }} type="json"></kv-code-editor>
+      </div>
+    </Layout>
+  )
+}
--- a/cli-center-docs/src/apps/settings/layout.tsx
+++ b/cli-center-docs/src/apps/settings/layout.tsx
@@ -0,0 +1,24 @@
+import { Nav } from './nav'
+import { toast, ToastContainer } from 'react-toastify'
+
+export const Layout = (props) => {
+  return (
+    <div className="flex min-h-screen bg-white">
+      <div className="left-nav w-64 bg-white border-r border-gray-100">
+        <div className="p-4">
+          <h2 className="text-xl font-bold text-black">设置</h2>
+        </div>
+        <div className="p-4">
+          <Nav />
+        </div>
+      </div>
+      <div className="main flex-1 flex flex-col">
+        <div className="main-header bg-white px-6 py-4 border-b border-gray-100">
+          <h1 className="text-lg font-semibold text-black">配置中心</h1>
+        </div>
+        <main className="flex-1 p-6 bg-gray-50">{props.children}</main>
+      </div>
+      <ToastContainer />
+    </div>
+  )
+}
--- a/cli-center-docs/src/apps/settings/nav.tsx
+++ b/cli-center-docs/src/apps/settings/nav.tsx
@@ -0,0 +1,34 @@
+import { wrapBasename } from "../../modules/basename";
+import { clsx } from 'clsx';
+
+export const Nav = () => {
+  const currentPath = typeof window !== 'undefined' ? window.location.pathname : ''
+  
+  const navItems = [
+    { name: '管理员设置', path: wrapBasename('/settings/') },
+    { name: '全局设置', path: wrapBasename('/settings/all/') },
+  ];
+  
+  const isActive = (path: string) => {
+    return currentPath === path 
+  }
+  
+  return (
+    <nav className="space-y-2">
+      {navItems.map((item) => (
+        <a
+          key={item.path}
+          href={item.path}
+          className={clsx(
+            "block px-4 py-2 rounded transition-colors border-l-4",
+            isActive(item.path)
+              ? "bg-gray-100 text-black border-black font-medium"
+              : "text-gray-700 border-transparent hover:bg-gray-50 hover:border-gray-300"
+          )}
+        >
+          {item.name}
+        </a>
+      ))}
+    </nav>
+  )
+}
--- a/cli-center-docs/src/apps/settings/store.ts
+++ b/cli-center-docs/src/apps/settings/store.ts
@@ -0,0 +1,55 @@
+import { clientQuery, queryLogin } from '@/modules/query';
+import { create } from 'zustand';
+import { toast } from 'react-toastify';
+type SettingState = {
+  username?: string;
+  initAdmin: () => any;
+  login: (username: string, password: string) => any;
+  config?: any;
+  saveConfig: any;
+}
+export const useStore = create<SettingState>((set => ({
+  username: undefined,
+  config: undefined,
+  initAdmin: async () => {
+    const res = await clientQuery.post({
+      path: 'config'
+    })
+    console.log('initAdmin', res);
+    if (res.code === 200) {
+      const auth = res.data.auth || {}
+      if (auth.username) {
+        set({ username: auth.username });
+      }
+      set({ config: res.data });
+    }
+  },
+  login: async (username: string, password: string) => {
+    const res = await clientQuery.post({
+      path: 'admin',
+      key: 'login',
+      username,
+      password
+    });
+    if (res.code === 200) {
+      set({ username });
+      const setToken = await queryLogin.setLoginToken(res.data)
+      toast.success('登录成功');
+    }
+
+    return res;
+  },
+  saveConfig: async (config: any) => {
+    const res = await clientQuery.post({
+      path: 'config',
+      key: 'set',
+      data: config
+    })
+    if (res.code === 200) {
+      set({ config })
+      toast.success('配置保存成功');
+    }
+    console.log('saveConfig res', res);
+    return res;
+  }
+})));
--- a/cli-center-docs/src/components/MdPreview.tsx
+++ b/cli-center-docs/src/components/MdPreview.tsx
@@ -0,0 +1,70 @@
+import { cn } from '@/lib/utils';
+import { useEffect, useState } from 'react';
+import { Marked } from 'marked';
+import hljs from 'highlight.js';
+import { markedHighlight } from 'marked-highlight';
+
+const markedAndHighlight = new Marked(
+  markedHighlight({
+    emptyLangClass: 'hljs',
+    langPrefix: 'hljs language-',
+    highlight(code, lang, info) {
+      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+      return hljs.highlight(code, { language }).value;
+    },
+  }),
+);
+
+export const md2html = async (md: string) => {
+  const html = markedAndHighlight.parse(md);
+  return html;
+};
+
+export const clearMeta = (markdown?: string) => {
+  if (!markdown) return '';
+  // Remove YAML front matter if present
+  const yamlRegex = /^---\n[\s\S]*?\n---\n/;
+  return markdown.replace(yamlRegex, '');
+};
+type Props = {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  content?: string; // Optional content prop for markdown text
+  [key: string]: any; // Allow any additional props
+};
+export const MarkdownPreview = (props: Props) => {
+  return (
+    <div
+      className={cn(
+        'markdown-body scrollbar h-full overflow-auto w-full px-6 py-2 max-w-[800px] border my-4 flex flex-col justify-self-center rounded-md shadow-md',
+        props.className,
+      )}
+      style={props.style}>
+      {props.children ? <WrapperText>{props.children}</WrapperText> : <MarkdownPreviewWrapper content={clearMeta(props.content)} />}
+    </div>
+  );
+};
+
+export const WrapperText = (props: { children?: React.ReactNode; html?: string }) => {
+  if (props.html) {
+    return <div className='w-full' dangerouslySetInnerHTML={{ __html: props.html }} />;
+  }
+  return <div className='w-full h-full'>{props.children}</div>;
+};
+
+export const MarkdownPreviewWrapper = (props: Props) => {
+  const [html, setHtml] = useState<string>('');
+  useEffect(() => {
+    init();
+  }, [props.content]);
+  const init = async () => {
+    if (props.content) {
+      const htmlContent = await md2html(props.content);
+      setHtml(htmlContent);
+    } else {
+      setHtml('');
+    }
+  };
+  return <WrapperText html={html} />;
+};
--- a/cli-center-docs/src/components/html.astro
+++ b/cli-center-docs/src/components/html.astro
@@ -0,0 +1,47 @@
+---
+import '../styles/global.css';
+import '../styles/theme.css';
+export interface Props {
+  title?: string;
+  description?: string;
+  lang?: string;
+  charset?: string;
+}
+
+const { title = 'Light Code', description = 'A lightweight code editor', lang = 'zh-CN', charset = 'UTF-8' } = Astro.props;
+---
+
+<!doctype html>
+<html lang={lang}>
+  <head>
+    <meta charset={charset} />
+    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+    <meta name='description' content={description} />
+    <title>{title}</title>
+    <!-- 样式 -->
+    <slot name='head' />
+  </head>
+  <body>
+    <slot />
+
+    <!-- 脚本 -->
+    <slot name='scripts' />
+  </body>
+</html>
+
+<style>
+  html {
+    font-family: system-ui, sans-serif;
+  }
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+</style>
--- a/cli-center-docs/src/components/ui/button.tsx
+++ b/cli-center-docs/src/components/ui/button.tsx
@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/cli-center-docs/src/components/vue/Counter.vue
+++ b/cli-center-docs/src/components/vue/Counter.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  count: {
+    default: 0,
+  },
+})
+
+const counter = ref(props.count)
+</script>
+
+<template>
+  <div class="flex w-min border border-main rounded-md">
+    <button
+      class="border-r border-main p-2 font-mono outline-none hover:bg-gray-400 hover:bg-opacity-20"
+      @click="counter -= 1"
+    >
+      -
+    </button>
+    <span class="m-auto p-2">{{ counter }}</span>
+    <button
+      class="border-l border-main p-2 font-mono outline-none hover:bg-gray-400 hover:bg-opacity-20"
+      @click="counter += 1"
+    >
+      +
+    </button>
+  </div>
+</template>
--- a/cli-center-docs/src/content.config.ts
+++ b/cli-center-docs/src/content.config.ts
@@ -0,0 +1,24 @@
+// @ts-ignore
+import { defineCollection, z } from 'astro:content';
+import { glob, file } from 'astro/loaders'; // 不适用于旧版 API
+
+const docs = defineCollection({
+  loader: glob({ pattern: '**/[^_]*.md', base: './src/data/docs' }),
+  schema: z.object({
+    title: z.string().optional(),
+    description: z.string().optional(),
+    tags: z.array(z.string()).optional(),
+    // pubDate: z.coerce.date(),
+    createdAt: z.coerce.date().optional(),
+    updatedAt: z.coerce.date().optional(),
+    showMenu: z.boolean().optional().default(true),
+    /**
+     * 在侧边栏隐藏该文档
+     */
+    hideInMenu: z.boolean().optional().default(false),
+    order: z.number().optional().default(0),
+  }),
+});
+
+
+export const collections = { docs };
--- a/cli-center-docs/src/data/docs/00-intro.md
+++ b/cli-center-docs/src/data/docs/00-intro.md
@@ -0,0 +1,15 @@
+---
+title: '介绍'
+tags: ['introduce']
+createdAt: '2025-12-18 20:00:00'
+---
+
+# @kevisual/cli 目的？
+
+对于每一个人来说，搭建知识库，自动化，数据可视化，都是一件非常复杂的事情。但是，我们希望通过 `@kevisual/cli` 让这件事情变得非常简单。
+
+AI 时代，人人都可以成为开发者，每一个人的灵感和想法都能变成代码，而把代码运行起来，把自己的知识库运行起来，也应该有一个体系化的解决方案。而这就是基于这个初衷。
+
+## 数据代理
+
+https://kevisual.cn 只作为一个用户管理的平台，而每一个人的设备，都需要运行一个cli，而这个cli负责管理所有的程序的运行，但是通过公网去访问到自己的服务。
--- a/cli-center-docs/src/data/docs/01-login-first.md
+++ b/cli-center-docs/src/data/docs/01-login-first.md
@@ -0,0 +1,13 @@
+---
+title: '第一次登录'
+tags: ['settings']
+createdAt: '2025-12-18 20:00:00'
+---
+
+## 第一次登录设备
+
+每一台设备需要有自己的管理员信息，第一次登录的时候，用kevisual.cn 的账号密码登录，就会把这个账号设置为这个设备的管理员账号。
+
+下一次修改管理员配置，必须管理员才能操作。
+
+或者自己在 `kevisual/assistant-app/assistant-config.json` 里面修改管理员账号.
--- a/cli-center-docs/src/data/docs/10-config.md
+++ b/cli-center-docs/src/data/docs/10-config.md
@@ -0,0 +1,424 @@
+---
+title: '配置项介绍'
+description: 'Assistant 应用配置项完整说明文档，包括应用信息、代理、服务器、认证、AI、存储等各项配置详解'
+tags: ['config', 'configuration', 'settings', 'assistant']
+createdAt: '2025-12-18'
+---
+
+# 配置项介绍
+
+本文档详细介绍 Assistant 应用的所有配置项。配置文件通常为 JSON 格式，用于定制应用的行为和功能。
+
+## app - 应用信息
+
+应用的基本标识信息。
+
+```json
+{
+  "app": {
+    "id": "my-assistant-001",
+    "url": "https://my-app.example.com"
+  }
+}
+```
+
+| 字段 | 类型     | 说明                                       |
+| ---- | -------- | ------------------------------------------ |
+| id   | `string` | 应用唯一标识符，用于识别具体设备或应用实例 |
+| url  | `string` | 应用访问地址                               |
+
+## token - 访问令牌
+
+用于身份验证的访问令牌。
+
+```json
+{
+  "token": "your-access-token"
+}
+```
+
+| 字段  | 类型     | 说明     |
+| ----- | -------- | -------- |
+| token | `string` | 访问令牌 |
+
+## registry - 注册中心
+
+注册中心地址，默认为 `https://kevisual.cn`。
+
+```json
+{
+  "registry": "https://kevisual.cn"
+}
+```
+
+| 字段     | 类型     | 说明         |
+| -------- | -------- | ------------ |
+| registry | `string` | 注册中心地址 |
+
+## proxy - 前端代理配置
+
+前端路由代理配置，用于将特定路径转发到目标服务器。
+
+```json
+{
+  "proxy": [
+    {
+      "path": "/root/home",
+      "target": "https://kevisual.cn",
+      "pathname": "/root/home"
+    }
+  ]
+}
+```
+
+| 字段             | 类型          | 说明                   |
+| ---------------- | ------------- | ---------------------- |
+| proxy            | `ProxyInfo[]` | 代理配置数组           |
+| proxy[].path     | `string`      | 匹配的路径前缀         |
+| proxy[].target   | `string`      | 目标服务器地址         |
+| proxy[].pathname | `string`      | 转发到目标服务器的路径 |
+
+示例：访问 `/root/home` 会被转发到 `https://kevisual.cn/root/home`
+
+## api - API代理配置
+
+专门用于 API 请求的代理配置，例如 `/api` 或 `/v1` 开头的请求。
+
+```json
+{
+  "api": {
+    "proxy": [
+      {
+        "path": "/api",
+        "target": "https://api.example.com"
+      },
+      {
+        "path": "/v1",
+        "target": "https://api-v1.example.com"
+      }
+    ]
+  }
+}
+```
+
+| 字段 | 类型 | 说明 |
+|------|------|{------|
+| api.proxy | `ProxyInfo[]` | API代理配置数组 |
+
+## router - 路由配置
+
+配置应用的路由代理功能。
+
+```json
+{
+  "router": {
+    "proxy": [
+      {
+        "type": "router",
+        "router": {
+          "url": "https://kevisual.cn/api/router"
+        }
+      }
+    ],
+    "base": true
+  }
+}
+```
+
+| 字段         | 类型          | 说明                                                              |
+| ------------ | ------------- | ----------------------------------------------------------------- |
+| router.proxy | `ProxyInfo[]` | 代理配置数组                                                      |
+| router.base  | `boolean`     | 是否注册基础路由,监听https://kevisual.cn/api/router，默认 `false` |
+
+## description - 应用描述
+
+应用的描述信息。
+
+```json
+{
+  "description": "我的助手应用"
+}
+```
+
+| 字段        | 类型     | 说明         |
+| ----------- | -------- | ------------ |
+| description | `string` | 应用描述信息 |
+
+## server - 服务器配置
+
+配置本地服务器的监听地址和端口。
+
+```json
+{
+  "server": {
+    "path": "127.0.0.1",
+    "port": 3000
+  }
+}
+```
+
+| 字段        | 类型      | 说明                             |
+| ----------- | --------- | -------------------------------- |
+| server.path | `string`` | 服务器监听地址，默认 `127.0.0.1` |
+| server.port | `number`  | 服务器监听端口号                 |
+
+## share - 远程访问配置
+
+配置应用是否可被远程调用。
+
+```json
+{
+  "share": {
+    "url": "https://kevisual.cn/ws/proxy",
+    "enabled": true
+  }
+}
+```
+
+| 字段          | 类型      | 说明                 |
+| ------------- | --------- | -------------------- |
+| share.url     | `string`  | 远程应用代理地址     |
+| share.enabled | `boolean` | 是否启用远程访问功能 |
+
+## watch - 文件监听配置
+
+配置是否监听 pages 目录下的文件变化。
+
+```json
+{
+  "watch": {
+    "enabled": true
+  }
+}
+```
+
+| 字段          | 类型      | 说明             |
+| ------------- | --------- | ---------------- |
+| watch.enabled | `boolean` | 是否启用文件监听 |
+
+## home - 首页路径
+
+访问根路径 `/` 时自动重定向的首页地址。
+
+```json
+{
+  "home": "/root/home"
+}
+```
+
+| 字段 | 类型     | 说明     |
+| ---- | -------- | -------- |
+| home | `string` | 首页路径 |
+
+## ai - AI功能配置
+
+启用和配置本地 AI 代理功能。
+
+```json
+{
+  "ai": {
+    "enabled": true,
+    "provider": "DeepSeek",
+    "apiKey": "your-api-key",
+    "model": "deepseek-chat"
+  }
+}
+```
+
+| 字段        | 类型      | 说明                         |
+| ----------- | --------- | ---------------------------- | ---------- |
+| ai.enabled  | `boolean` | 是否启用 AI 功能             |
+| ai.provider | `string`  | AI 提供商，可选 `'DeepSeek'` | `'Custom'` |
+| ai.apiKey   | `string`  | API 密钥                     |
+| ai.model    | `string`  | 使用的模型名称               |
+
+## asr - 语音识别配置
+
+配置阿里云语音识别服务。
+
+```json
+{
+  "asr": {
+    "enabled": true,
+    "token": "your-asr-token"
+  }
+}
+```
+
+| 字段        | 类型      | 说明                 |
+| ----------- | --------- | -------------------- |
+| asr.enabled | `boolean` | 是否启用语音识别功能 |
+| asr.token   | `string`  | 阿里云 ASR 服务令牌  |
+
+使用模型：`qwen3-asr-flash-realtime`
+
+## auth - 认证和权限配置
+
+配置应用的认证和访问权限策略。
+
+```json
+{
+  "auth": {
+    "share": "protected"
+  }
+}
+```
+
+| 字段       | 类型     | 说明                                              |
+| ---------- | -------- | ------------------------------------------------- |
+| auth.share | `string` | 共享访问模式，影响 pages 目录下页面的对外共享权限 |
+
+**share 可选值：**
+
+- `"protected"` - 需要认证才能访问（默认）
+- `"public"` - 公开访问，无需认证
+- `"private"` - 私有访问，完全禁止外部访问
+
+## storage - 存储配置
+
+配置文件存储，支持本地文件系统和 S3/MinIO 两种存储方式。
+
+### 本地文件存储 (FileStorage)
+
+```json
+{
+  "storage": [
+    {
+      "id": "local-storage",
+      "path": "./uploads",
+      "type": "local"
+    }
+  ]
+}
+```
+
+### S3/MinIO 存储 (S3Storage)
+
+```json
+{
+  "storage": [
+    {
+      "id": "s3-storage",
+      "bucket": "my-bucket",
+      "region": "us-east-1",
+      "accessKeyId": "AKIAXXXXXXXXXXXXXXXX",
+      "secretAccessKey": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
+      "endpoint": "https://s3.amazonaws.com",
+      "type": "s3"
+    },
+    {
+      "id": "minio-storage",
+      "bucket": "my-bucket",
+      "region": "us-east-1",
+      "accessKeyId": "minioadmin",
+      "secretAccessKey": "minioadmin",
+      "endpoint": "http://localhost:9000",
+      "type": "minio"
+    }
+  ]
+}
+```
+
+| 字段                      | 类型                         | 说明                                                    |
+| ------------------------- | ---------------------------- | ------------------------------------------------------- |
+| storage[].id              | `string`                     | 存储标识符，唯一标识一个存储配置                        |
+| storage[].type            | `'local' \| 's3' \| 'minio'` | 存储类型                                                |
+| storage[].path            | `string`                     | 本地存储路径（仅 type 为 `local` 时有效）               |
+| storage[].bucket          | `string`                     | 存储桶名称（仅 type 为 `s3` 或 `minio` 时有效）         |
+| storage[].region          | `string`                     | 存储区域（仅 type 为 `s3` 或 `minio` 时有效）           |
+| storage[].accessKeyId     | `string`                     | 访问密钥 ID（仅 type 为 `s3` 或 `minio` 时有效）        |
+| storage[].secretAccessKey | `string`                     | 访问密钥（仅 type 为 `s3` 或 `minio` 时有效）           |
+| storage[].endpoint        | `string`                     | 服务端点地址（仅 type 为 `s3` 或 `minio` 时有效，可选） |
+
+## 完整配置示例
+
+```json
+{
+  "app": {
+    "id": "assistant-prod-001",
+    "url": "https://app.example.com"
+  },
+  "token": "your-secure-token",
+  "registry": "https://kevisual.cn",
+  "proxy": [
+    {
+      "path": "/root/home",
+      "target": "https://kevisual.cn",
+      "pathname": "/root/home"
+    }
+  ],
+  "api": {
+    "proxy": [
+      {
+        "path": "/api",
+        "target": "https://api.example.com"
+      }
+    ]
+  },
+  "router": {
+    "proxy": [
+      {
+        "type": "router",
+        "router": {
+          "url": "https://kevisual.cn/api/router"
+        }
+      }
+    ],
+    "base": true
+  },
+  "description": "生产环境助手应用",
+  "server": {
+    "path": "0.0.0.0",
+    "port": 3000
+  },
+  "share": {
+    "url": "https://kevisual.cn/ws/proxy",
+    "enabled": true
+  },
+  "watch": {
+    "enabled": true
+  },
+  "home": "/root/home",
+  "ai": {
+    "enabled": true,
+    "provider": "DeepSeek",
+    "apiKey": "sk-xxx",
+    "model": "deepseek-chat"
+  },
+  "asr": {
+    "enabled": true,
+    "token": "your-asr-token"
+  },
+  "auth": {
+    "share": "protected"
+  },
+  "storage": [
+    {
+      "id": "local-storage",
+      "path": "./uploads",
+      "type": "local"
+    },
+    {
+      "id": "s3-storage",
+      "bucket": "my-bucket",
+      "region": "us-east-1",
+      "accessKeyId": "AKIAXXXXXXXXXXXXXXXX",
+      "secretAccessKey": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
+      "endpoint": "https://s3.amazonaws.com",
+      "type": "s3"
+    }
+  ]
+}
+```
+
+## 配置文件位置
+
+配置文件通常位于项目根目录，文件名为 `kevisual.json` 或其他约定名称。
+
+## 最佳实践
+
+1. **安全性**: 不要在配置文件中硬编码敏感信息（如 token、apiKey、secretAccessKey），建议使用环境变量
+2. **端口选择**: 确保选择的端口未被占用
+3. **代理配置**: 合理配置代理路径，避免路径冲突
+4. **权限控制**: 根据实际需求选择合适的 `auth.share` 模式
+5. **存储配置**: 根据应用规模选择合适的存储方式，本地存储适合开发和小型应用，S3/MinIO 适合生产环境
--- a/cli-center-docs/src/layouts/MDXPost.astro
+++ b/cli-center-docs/src/layouts/MDXPost.astro
@@ -0,0 +1,24 @@
+---
+import '../styles/global.css';
+export interface Props {
+	title?: string;
+	description?: string;
+}
+import 'github-markdown-css/github-markdown-light.css';
+import 'highlight.js/styles/github-dark.css';
+const { title, description } = Astro.props;
+---
+
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>{title || '文档'}</title>
+  </head>
+  <body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+      <article class="markdown-body bg-white rounded-lg shadow-lg p-8">
+        <slot />
+      </article>
+    </div>
+  </body>
+</html>
--- a/cli-center-docs/src/layouts/blank.astro
+++ b/cli-center-docs/src/layouts/blank.astro
@@ -0,0 +1,47 @@
+---
+import '../styles/global.css';
+import '../styles/theme.css';
+export interface Props {
+  title?: string;
+  description?: string;
+  lang?: string;
+  charset?: string;
+}
+
+const { title = 'Light Code', description = 'A lightweight code editor', lang = 'zh-CN', charset = 'UTF-8' } = Astro.props;
+---
+
+<!doctype html>
+<html lang={lang}>
+  <head>
+    <meta charset={charset} />
+    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+    <meta name='description' content={description} />
+    <title>{title}</title>
+    <!-- 样式 -->
+    <slot name='head' />
+  </head>
+  <body>
+    <slot />
+
+    <!-- 脚本 -->
+    <slot name='scripts' />
+  </body>
+</html>
+
+<style>
+  html {
+    font-family: system-ui, sans-serif;
+  }
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+</style>
--- a/cli-center-docs/src/layouts/docs/pagination.astro
+++ b/cli-center-docs/src/layouts/docs/pagination.astro
@@ -0,0 +1,4 @@
+---
+---
+
+分页组件
--- a/cli-center-docs/src/layouts/mdx.astro
+++ b/cli-center-docs/src/layouts/mdx.astro
@@ -0,0 +1,73 @@
+---
+export interface Props {
+  children: any;
+}
+import '../styles/global.css';
+import '../styles/theme.css';
+import 'github-markdown-css/github-markdown-light.css';
+import { Menu, MenuItem } from '../apps/menu';
+export interface Props {
+  title?: string;
+  description?: string;
+  lang?: string;
+  charset?: string;
+  showMenu?: boolean;
+  menu?: MenuItem[];
+  basename?: string;
+}
+
+const {
+  title = 'Light Code',
+  description = 'A lightweight code editor',
+  lang = 'zh-CN',
+  charset = 'UTF-8',
+  showMenu = true,
+  menu,
+  basename = '',
+} = Astro.props;
+---
+
+<html lang={lang}>
+  <head>
+    <meta charset={charset} />
+    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+    <title>{title}</title>
+    <meta name='description' content={description} />
+    <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body class='flex flex-col items-center bg-background'>
+    <div class='w-full'>
+      <slot name='header' />
+    </div>
+    <main class='flex-1 flex overflow-hidden w-full max-w-7xl px-4 py-4'>
+      {
+        showMenu && (
+          <aside class='w-64 min-w-64 h-full flex flex-col'>
+            <slot name='menu'>
+              <Menu items={menu!} client:only basename={basename} />
+            </slot>
+          </aside>
+        )
+      }
+      <div class='flex-1 h-full flex items-start justify-center overflow-hidden'>
+        <article class='markdown-body h-full scrollbar overflow-auto px-8 py-6 w-full max-w-4xl border border-border rounded-lg shadow-sm bg-card'>
+          <slot />
+        </article>
+      </div>
+    </main>
+    <footer class='w-full border-t border-border bg-card/50 backdrop-blur-sm'>
+      <slot name='footer'>
+        <div class='text-center text-sm text-muted-foreground py-4'>Copyright &copy; 2025</div>
+      </slot>
+    </footer>
+  </body>
+</html>
--- a/cli-center-docs/src/lib/utils.ts
+++ b/cli-center-docs/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/cli-center-docs/src/modules/basename.ts
+++ b/cli-center-docs/src/modules/basename.ts
@@ -0,0 +1,13 @@
+// @ts-ignore
+export const basename = BASE_NAME;
+
+console.log(basename);
+
+export const wrapBasename = (path: string) => {
+  const hasEnd = path.endsWith('/')
+  if (basename) {
+    return `${basename}${path}` + (hasEnd ? '' : '/');
+  } else {
+    return path;
+  }
+}
--- a/cli-center-docs/src/modules/query.ts
+++ b/cli-center-docs/src/modules/query.ts
@@ -0,0 +1,27 @@
+import { QueryClient, Query } from '@kevisual/query'
+import { QueryLoginBrowser } from '@kevisual/query-login'
+const getUrl = () => {
+  const host = window.location.host
+  const isKevisual = host.includes('kevisual');
+  if (isKevisual) {
+    return '/api/router'
+  }
+
+  return '/client/router'
+}
+
+export const query = new QueryClient({
+  url: getUrl()
+});
+
+export const clientQuery = new QueryClient({
+  url: '/client/router'
+});
+
+export const remoteQuery = new Query({
+  url: '/api/router'
+});
+
+export const queryLogin = new QueryLoginBrowser({
+  query: remoteQuery
+});
--- a/cli-center-docs/src/pages/demos/base.astro
+++ b/cli-center-docs/src/pages/demos/base.astro
@@ -0,0 +1,9 @@
+---
+import Html from '@/components/html.astro';
+---
+
+<Html>
+  <main>
+   
+  </main>
+</Html>
--- a/cli-center-docs/src/pages/demos/vue.astro
+++ b/cli-center-docs/src/pages/demos/vue.astro
@@ -0,0 +1,10 @@
+---
+import Html from '@/components/html.astro';
+// import Counter from '@/components/vue/Counter.vue';
+---
+
+<Html>
+  <main>
+    <!-- <Counter count={10} client:only/> -->
+  </main>
+</Html>
--- a/cli-center-docs/src/pages/docs/[...id].astro
+++ b/cli-center-docs/src/pages/docs/[...id].astro
@@ -0,0 +1,27 @@
+---
+import { getCollection, render } from 'astro:content';
+import Main from '@/layouts/mdx.astro';
+import { basename } from '@/modules/basename';
+// 1. 为每个集合条目生成一个新路径
+export async function getStaticPaths() {
+  const posts = await getCollection('docs');
+  return posts.map((post) => ({
+    params: { id: post.id },
+    props: { post },
+    data: post,
+  }));
+}
+type Post = {
+  data: { title: string; tags: string[]; showMenu?: boolean };
+};
+// 2. 对于你的模板，你可以直接从 prop 获取条目
+const { post } = Astro.props as { post: Post };
+const { Content } = await render(post);
+const showMenu = post.data?.showMenu;
+const staticPaths = await getStaticPaths();
+const menu = staticPaths.map((item) => item.data);
+---
+
+<Main showMenu={showMenu} menu={menu} basename={basename} title={post.data.title}>
+  <Content />
+</Main>
--- a/cli-center-docs/src/pages/docs/index.astro
+++ b/cli-center-docs/src/pages/docs/index.astro
@@ -0,0 +1,80 @@
+---
+import { getCollection } from 'astro:content';
+const posts = await getCollection('docs');
+import { basename, wrapBasename } from '@/modules/basename';
+import Blank from '@/layouts/blank.astro';
+---
+
+<Blank>
+  <main class='min-h-screen bg-linear-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800'>
+    <div class='max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12'>
+      {/* 页面标题区域 */}
+      <div class='mb-12'>
+        <h1 class='text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white mb-4 bg-clip-text bg-linear-to-r from-blue-600 to-purple-600'>📚 文档列表</h1>
+        <p class='text-slate-600 dark:text-slate-400 text-lg'>浏览所有可用的文档资源</p>
+        <div class='mt-4 h-1 w-20 bg-linear-to-r from-blue-600 to-purple-600 rounded-full'></div>
+      </div>
+
+      {/* 文档列表 */}
+      <div class='space-y-4'>
+        {
+          posts.map((post) => {
+            const tags = post.data.tags || [];
+            const postUrl = wrapBasename(`/docs/${post.id}`);
+            return (
+              <article class='group bg-white dark:bg-slate-800 rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-200 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-400'>
+                <div class='p-6'>
+                  {/* 文档标题 */}
+                  <a href={postUrl} class='block'>
+                    <h2 class='text-xl sm:text-2xl font-semibold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 mb-3'>
+                      {post.data.title}
+                    </h2>
+                  </a>
+
+                  {/* 文档描述(如果有) */}
+                  {post.data.description && <p class='text-slate-600 dark:text-slate-400 mb-4 line-clamp-2'>{post.data.description}</p>}
+
+                  {/* 标签列表 */}
+                  {tags.length > 0 && (
+                    <div class='flex flex-wrap gap-2 mt-4'>
+                      {tags.map((tag) => (
+                        <div class='inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors duration-200 border border-blue-200 dark:border-blue-800'>
+                          <span class='mr-1'>#</span>
+                          {tag}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* 阅读更多指示器 */}
+                  <a
+                    href={postUrl}
+                    class='mt-4 flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-200'>
+                    <span>阅读更多</span>
+                    <svg
+                      class='w-4 h-4 ml-1 transform group-hover:translate-x-1 transition-transform duration-200'
+                      fill='none'
+                      viewBox='0 0 24 24'
+                      stroke='currentColor'>
+                      <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7' />
+                    </svg>
+                  </a>
+                </div>
+              </article>
+            );
+          })
+        }
+      </div>
+
+      {/* 空状态 */}
+      {
+        posts.length === 0 && (
+          <div class='text-center py-16'>
+            <div class='text-6xl mb-4'>📭</div>
+            <p class='text-xl text-slate-600 dark:text-slate-400'>暂无文档</p>
+          </div>
+        )
+      }
+    </div>
+  </main>
+</Blank>
--- a/cli-center-docs/src/pages/index.astro
+++ b/cli-center-docs/src/pages/index.astro
@@ -0,0 +1,120 @@
+---
+import Html from '@/components/html.astro';
+---
+
+<Html>
+  <main class="container">
+    <div class="hero">
+      <h1 class="title">欢迎使用 CLI Center</h1>
+      <p class="subtitle">强大的命令行工具管理中心</p>
+    </div>
+    
+    <div class="card-grid">
+      <a href={"/root/cli/docs/"} class="card">
+        <div class="card-icon">📚</div>
+        <h2>文档中心</h2>
+        <p>查看完整的使用文档和API参考</p>
+      </a>
+      
+      <a href={"/root/cli/settings/"} class="card">
+        <div class="card-icon">⚙️</div>
+        <h2>设置中心</h2>
+        <p>配置和管理您的应用设置</p>
+      </a>
+    </div>
+  </main>
+</Html>
+
+<style>
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 3rem 1.5rem;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hero {
+    text-align: center;
+    margin-bottom: 4rem;
+  }
+
+  .title {
+    font-size: 3.5rem;
+    font-weight: 800;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 1rem;
+    line-height: 1.2;
+  }
+
+  .subtitle {
+    font-size: 1.5rem;
+    color: #6b7280;
+    margin: 0;
+  }
+
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    width: 100%;
+    max-width: 800px;
+  }
+
+  .card {
+    background: white;
+    border-radius: 1rem;
+    padding: 2.5rem;
+    text-decoration: none;
+    color: inherit;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+  }
+
+  .card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    border-color: #667eea;
+  }
+
+  .card-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+  }
+
+  .card h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin: 0 0 0.75rem 0;
+    color: #111827;
+  }
+
+  .card p {
+    font-size: 1rem;
+    color: #6b7280;
+    margin: 0;
+    line-height: 1.6;
+  }
+
+  @media (max-width: 768px) {
+    .title {
+      font-size: 2.5rem;
+    }
+
+    .subtitle {
+      font-size: 1.25rem;
+    }
+
+    .card-grid {
+      grid-template-columns: 1fr;
+      max-width: 400px;
+    }
+  }
+</style>
--- a/cli-center-docs/src/pages/settings.astro
+++ b/cli-center-docs/src/pages/settings.astro
@@ -0,0 +1,8 @@
+---
+import Html from '@/components/html.astro';
+import { FirstLogin } from '@/apps/settings/index.tsx';
+---
+
+<Html>
+  <FirstLogin client:only />
+</Html>
--- a/cli-center-docs/src/pages/settings/all.astro
+++ b/cli-center-docs/src/pages/settings/all.astro
@@ -0,0 +1,8 @@
+---
+import Html from '@/components/html.astro';
+import { Config } from '@/apps/settings/index.tsx';
+---
+
+<Html>
+  <Config client:only />
+</Html>
--- a/cli-center-docs/src/styles/global.css
+++ b/cli-center-docs/src/styles/global.css
@@ -0,0 +1,120 @@
+@import 'tailwindcss';
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/cli-center-docs/src/styles/theme.css
+++ b/cli-center-docs/src/styles/theme.css
@@ -0,0 +1,98 @@
+@import 'tailwindcss';
+
+@theme {
+  /* --color-primary: #ffc107;
+  --color-secondary: #ffa000;
+  --color-text-primary: #000000;
+  --color-text-secondary: #000000;
+  --color-success: #28a745; */
+
+  --color-scrollbar-thumb: #999999;
+  --color-scrollbar-track: rgba(0, 0, 0, 0.1);
+  --color-scrollbar-thumb-hover: #666666;
+  --scrollbar-color: #ffc107;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+}
+
+/* font-family */
+@utility font-family-mon {
+  font-family: 'Montserrat', sans-serif;
+}
+
+@utility font-family-rob {
+  font-family: 'Roboto', sans-serif;
+}
+
+@utility font-family-int {
+  font-family: 'Inter', sans-serif;
+}
+
+@utility font-family-orb {
+  font-family: 'Orbitron', sans-serif;
+}
+
+@utility font-family-din {
+  font-family: 'DIN', sans-serif;
+}
+
+@utility flex-row-center {
+  @apply flex flex-row items-center justify-center;
+}
+
+@utility flex-col-center {
+  @apply flex flex-col items-center justify-center;
+}
+
+@utility scrollbar {
+  overflow: auto;
+
+  /* 整个滚动条 */
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--color-scrollbar-track);
+  }
+
+  /* 滚动条有滑块的轨道部分 */
+  &::-webkit-scrollbar-track-piece {
+    background-color: transparent;
+    border-radius: 1px;
+  }
+
+  /* 滚动条滑块(竖向:vertical 横向:horizontal) */
+  &::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    background-color: var(--color-scrollbar-thumb);
+    border-radius: 5px;
+  }
+
+  /* 滚动条滑块hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-scrollbar-thumb-hover);
+  }
+
+  /* 同时有垂直和水平滚动条时交汇的部分 */
+  &::-webkit-scrollbar-corner {
+    display: block;
+    /* 修复交汇时出现的白块 */
+  }
+}
+
+ul,
+menu {
+  list-style: disc;
+}
+
+ol {
+  list-style: decimal;
+}