change to next

2026-01-15 12:32:07 +08:00
parent 62b5c5841a
commit b2f315a459
122 changed files with 9396 additions and 9354 deletions
--- a/web/.cnb.yml
+++ b/web/.cnb.yml
@@ -0,0 +1,44 @@
+# .cnb.yml
+include:
+  - https://cnb.cool/kevisual/cnb/-/blob/main/.cnb/template.yml
+
+.common_env: &common_env
+  env:
+    TO_REPO: template/next-simple-template
+    TO_URL: git.xiongxiao.me
+  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:
+      #   - name: pnpm install
+      #     script: pnpm install
+      stages: !reference  [.dev_tempalte, stages]
+
+.common_sync_to_gitea: &common_sync_to_gitea
+  - <<: *common_env
+    services: !reference  [.common_sync_to_gitea_template, services]
+    stages: !reference [.common_sync_to_gitea_template, stages]
+
+.common_sync_from_gitea: &common_sync_from_gitea
+  - <<: *common_env
+    services: !reference  [.common_sync_from_gitea_template, services]
+    stages: !reference [.common_sync_from_gitea_template, stages]
+
+main:
+  web_trigger_sync_to_gitea: 
+    - <<: *common_sync_to_gitea
+  web_trigger_sync_from_gitea:
+    - <<: *common_sync_from_gitea
+  api_trigger_sync_to_gitea:
+    - <<: *common_sync_to_gitea
+  api_trigger_sync_from_gitea:
+    - <<: *common_sync_from_gitea
--- a/web/.env.example
+++ b/web/.env.example
@@ -1 +1,2 @@
-VITE_API_URL='http://localhost:4005'
+NODE_ENV=
+API_URL=http://localhost:51515
--- a/web/.github/prompts/astro.prompt.md
+++ b/web/.github/prompts/astro.prompt.md
@@ -1,32 +0,0 @@
---
-agent: agent
-tags: ["astro", "react", "tailwindcss", "shadcn/ui", "typescript"]
-createdAt: 2026-01-03
---
-
-# 项目技术栈和上下文
-
-## 核心框架和库
- **Astro** - 静态站点生成框架，用于构建高性能网站
- **React** - 用于构建交互式 UI 组件
- **TypeScript** - 项目使用 TypeScript 编写，有 tsconfig.json 配置
-
-## UI 和样式
- **TailwindCSS** - CSS 框架，已集成
- **shadcn/ui** - 高质量 React 组件库，已安装
-
-## 项目结构特点
- 使用 pnpm 工作区管理
- `src/` 目录包含主要源代码
-  - `apps/` - 应用模块（chat、cv、studio、query-view 等）
-  - `components/` - React组件
-  - `pages/` - Astro 页面
-  - `layouts/` - Astro 布局
- `slides/` - 演示幻灯片内容
-
-## 开发指南
- 修改代码时遵循项目现有的代码结构和命名约定
- React 组件通常使用 `.tsx` 后缀
- Astro 组件使用 `.astro` 后缀
- 样式优先使用 TailwindCSS 类
- 复用已有的 shadcn/ui 组件库中的组件
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -1,9 +0,0 @@
-node_modules
-.DS_Store
-
-.astro
-
-dist
-
-.env
-!.env*example
--- a/web/.opencode/opencode.json
+++ b/web/.opencode/opencode.json
@@ -1,6 +0,0 @@
-{
-  "$schema": "https://opencode.ai/config.json",
-  "tools": {
-    "skill": true
-  }
-}
--- a/web/.opencode/skill/git-commit/SKILL.md
+++ b/web/.opencode/skill/git-commit/SKILL.md
@@ -1,19 +0,0 @@
---
-title: git-commit
-description: 获取需要diff的代码，总结和提交代码的技能
-license: MIT
-compatibility: opencode
-metadata:
-  audience: maintainers
---
-
-## 我的工作
-
- 获取代码变更的diff
- 总结代码变更内容
- 创建git提交
- 推送代码到远程仓库
-
-## 何时使用我
-
-在需要提交代码变更时使用我。
--- a/web/AGENTS.md
+++ b/web/AGENTS.md
@@ -0,0 +1,63 @@
+# 项目概览
+
+## 项目名称
+next-simple-template
+
+## 包名/作用域
+@kevisual/next-simple-template
+
+## 项目描述
+Light Code - 一个直觉、高效的代码编辑器前端界面
+
+## 技术栈
+- **框架**: Next.js 16.1.1 (App Router)
+- **语言**: TypeScript 5
+- **UI库**: React 19.2.3
+- **样式**: Tailwind CSS 4
+- **组件库**: Radix UI (Dialog, Slot, etc.)
+- **状态管理**: Zustand valtio
+- **图标**: Lucide React
+- **工具库**:
+  - class-variance-authority (组件变体)
+  - clsx + tailwind-merge (样式处理)
+  - react-toastify (通知)
+- **请求库**（自定义框架）
+  - @kevisual/query
+
+
+## 项目结构
+```
+src/
+├── app/
+│   ├── layout.tsx       # 根布局,配置字体和元数据
+│   ├── page.tsx         # 首页组件
+│   └── globals.css      # 全局样式
+├── components/
+│   └── ui/
+│       ├── button.tsx   # 按钮组件 (支持多种变体)
+│       └── dialog.tsx   # 对话框组件
+├── lib/
+│   └── utils.ts         # 工具函数 (cn类名合并)
+└── proxy.ts             # 代理配置
+```
+
+## 核心配置
+- **路径别名**: `@/*` 映射到 `./src/*`
+- **构建输出**: 
+  - 开发环境: 标准Next.js
+  - 生产环境: 静态导出到 `dist` 目录
+- **Base Path**: 生产环境使用 `basename` 路径
+
+## 可用命令
+- `pnpm dev` - 启动开发服务器
+- `pnpm build` - 构建生产版本
+- `pnpm start` - 启动生产服务器
+- `pnpm pub` - 部署到远程
+- `pnpm ui` - 添加shadcn组件
+
+## 特性
+- 深色模式支持
+- 响应式设计
+- TypeScript严格模式
+- 可访问性组件 (Radix UI)
+- 静态导出支持
--- a/web/README.md
+++ b/web/README.md
@@ -0,0 +1,11 @@
+# next-simple-template
+
+主要是前端界面
+
+## 下载
+
+```bash
+ev clone -i  https://kevisual.cn/root/ai/kevisual/next/next-simple-template/kevisual.json
+ev upload
+ev sync 
+```
--- a/web/astro.config.mjs
+++ b/web/astro.config.mjs
@@ -1,45 +0,0 @@
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import react from '@astrojs/react';
-import sitemap from '@astrojs/sitemap';
-import pkgs from './package.json';
-import tailwindcss from '@tailwindcss/vite';
-import dotenv from 'dotenv';
-// import vue from '@astrojs/vue';
-
-dotenv.config();
-const isDev = process.env.NODE_ENV === 'development';
-
-let target = process.env.VITE_API_URL || 'http://localhost:51515';
-console.log('API Proxy Target:', target);
-const apiProxy = { target: target, changeOrigin: true, ws: true, rewriteWsOrigin: true, secure: false, cookieDomainRewrite: 'localhost' };
-let proxy = {
-  '/root/': apiProxy,
-  '/api': apiProxy,
-  '/client': apiProxy,
-};
-
-const basename = isDev ? undefined : `${pkgs.basename}`;
-export default defineConfig({
-  base: basename,
-  integrations: [
-    mdx(),
-    react(), //
-    // vue(),
-    // sitemap(), // sitemap must be site has a domain
-  ],
-  server: {
-    port: 7008,
-    host: '0.0.0.0',
-    allowedHosts: true,
-  },
-  vite: {
-    plugins: [tailwindcss()],
-    define: {
-      BASE_NAME: JSON.stringify(basename || ''),
-    },
-    server: {
-      proxy,
-    },
-  },
-});
--- a/web/components.json
+++ b/web/components.json
@@ -1,11 +1,11 @@
 {
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
-  "rsc": false,
+  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
-    "css": "src/styles/global.css",
+    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
--- a/web/kevisual.json
+++ b/web/kevisual.json
@@ -3,7 +3,7 @@
    "name": "kevisual",
    "share": "public"
  },
-  "registry": "https://kevisual.cn/root/ai/kevisual/frontend/simple-astro-template",
+  "registry": "https://kevisual.cn/root/ai/kevisual/next/next-simple-template",
  "clone": {
    ".": {
      "enabled": true
@@ -14,12 +14,12 @@
      "files": [
        "**/*"
      ],
+      "ignore": [
+        "dist",
+        ".next"
+      ],
      "registry": ""
    }
  ],
-  "sync": {
-    ".gitignore": {
-      "url": "/gitignore.txt"
-    }
-  }
+  "sync": {}
 }
--- a/web/next-env.d.ts
+++ b/web/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./dist/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
--- a/web/next.config.ts
+++ b/web/next.config.ts
@@ -0,0 +1,17 @@
+import type { NextConfig } from "next";
+import pkgs from "./package.json";
+
+const isDev = process.env.NODE_ENV !== "production";
+console.log(`NODE_ENV: ${process.env.NODE_ENV}`);
+const basePath = isDev ? "" : `${pkgs.basename}`;
+const nextConfig: NextConfig = {
+  /* config options here */
+  output: isDev ? undefined : 'export',
+  distDir: 'dist',
+  basePath: basePath,
+  trailingSlash: true,
+  turbopack: { root: '/workspace' },
+  transpilePackages: ['@kevisual/api', '@kevisual/router'],
+};
+
+export default nextConfig;
--- a/web/package.json
+++ b/web/package.json
@@ -1,85 +1,56 @@
 {
-  "name": "@kevisual/router-studio",
-  "version": "0.0.2",
-  "description": "",
-  "main": "index.js",
-  "basename": "/root/router-studio",
+  "name": "@kevisual/next-simple-template",
+  "version": "0.1.0",
+  "basename": "/root/next-simple-template",
  "scripts": {
-    "dev": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "pub": "envision deploy ./dist -k router-studio -v 0.0.2 -u -y yes",
-    "slide:dev": "slidev --open slides/index.md",
-    "slide:build": "slidev build slides/index.md --base /root/router-studio-slide/",
-    "slide:pub": "envision deploy ./slides/dist -k router-studio-slide -v 0.0.2 -u -y yes",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "pub": "ev deploy ./dist -k next-simple-template -v 0.1.0 -u -y y",
    "ui": "pnpm dlx shadcn@latest add "
  },
-  "keywords": [],
-  "author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)",
-  "license": "MIT",
-  "type": "module",
  "dependencies": {
-    "@astrojs/mdx": "^4.3.13",
-    "@astrojs/react": "^4.4.2",
-    "@astrojs/sitemap": "^3.6.0",
-    "@astrojs/vue": "^5.1.3",
-    "@kevisual/cache": "^0.0.5",
+    "@kevisual/api": "^0.0.17",
    "@kevisual/context": "^0.0.4",
    "@kevisual/query": "^0.0.35",
-    "@kevisual/query-login": "^0.0.7",
-    "@kevisual/registry": "^0.0.1",
-    "@kevisual/router": "^0.0.52",
+    "@kevisual/router": "^0.0.53",
    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-dropdown-menu": "^2.1.16",
    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
    "@radix-ui/react-slot": "^1.2.4",
    "@radix-ui/react-tabs": "^1.1.13",
    "@radix-ui/react-tooltip": "^1.2.8",
-    "@tailwindcss/vite": "^4.1.18",
    "@tanstack/react-table": "^8.21.3",
-    "@uiw/react-md-editor": "^4.0.11",
-    "antd": "^6.1.3",
-    "astro": "^5.16.6",
+    "antd": "^6.2.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
-    "dayjs": "^1.11.19",
+    "dotenv": "^17.2.3",
    "es-toolkit": "^1.43.0",
-    "github-markdown-css": "^5.8.1",
-    "handsontable": "^16.2.0",
-    "highlight.js": "^11.11.1",
+    "idb-keyval": "^6.2.2",
    "lucide-react": "^0.562.0",
-    "marked": "^17.0.1",
-    "marked-highlight": "^2.2.3",
-    "nanoid": "^5.1.6",
-    "papaparse": "^5.5.3",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-hook-form": "^7.70.0",
-    "react-resizable-panels": "^4.2.1",
+    "next": "16.1.2",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-resizable-panels": "^4.4.1",
    "react-toastify": "^11.0.5",
+    "sonner": "^2.0.7",
    "tailwind-merge": "^3.4.0",
-    "vue": "^3.5.26",
-    "zustand": "^5.0.9"
-  },
-  "publishConfig": {
-    "access": "public"
+    "valtio": "^2.3.0",
+    "zustand": "^5.0.10"
  },
  "devDependencies": {
-    "@kevisual/api": "^0.0.17",
-    "@kevisual/types": "^0.0.10",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "baseline-browser-mapping": "^2.9.11",
-    "dotenv": "^17.2.3",
-    "tailwindcss": "^4.1.18",
-    "tw-animate-css": "^1.4.0"
-  },
-  "packageManager": "pnpm@10.27.0",
-  "onlyBuiltDependencies": [
-    "@tailwindcss/oxide",
-    "esbuild",
-    "sharp"
-  ]
+    "@kevisual/types": "^0.0.11",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^25",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
 }
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
--- a/web/pnpm-workspace.yaml
+++ b/web/pnpm-workspace.yaml
@@ -1,2 +0,0 @@
-onlyBuiltDependencies:
-  - core-js
--- a/web/postcss.config.mjs
+++ b/web/postcss.config.mjs
@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
--- a/web/slides/components/Counter.vue
+++ b/web/slides/components/Counter.vue
@@ -1,29 +0,0 @@
-<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/web/slides/demos/contents.md
+++ b/web/slides/demos/contents.md
@@ -1,611 +0,0 @@
-# Welcome to Slidev
-
-Presentation slides for developers
-
-<div @click="$slidev.nav.next" class="mt-12 py-1" hover:bg="white op-10">
-  Press Space for next page <carbon:arrow-right />
-</div>
-
-<div class="abs-br m-6 text-xl">
-  <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="slidev-icon-btn">
-    <carbon:edit />
-  </button>
-  <a href="https://github.com/slidevjs/slidev" target="_blank" class="slidev-icon-btn">
-    <carbon:logo-github />
-  </a>
-</div>
-
-<!--
-The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
-->
-
---
-transition: fade-out
---
-
-# What is Slidev?
-
-Slidev is a slides maker and presenter designed for developers, consist of the following features
-
- 📝 **Text-based** - focus on the content with Markdown, and then style them later
- 🎨 **Themable** - themes can be shared and re-used as npm packages
- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
- 🤹 **Interactive** - embed Vue components to enhance your expressions
- 🎥 **Recording** - built-in recording and camera view
- 📤 **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA
- 🛠 **Hackable** - virtually anything that's possible on a webpage is possible in Slidev
-<br>
-<br>
-
-Read more about [Why Slidev?](https://sli.dev/guide/why)
-
-<!--
-You can have `style` tag in markdown to override the style for the current page.
-Learn more: https://sli.dev/features/slide-scope-style
-->
-
-<style>
-h1 {
-  background-color: #2B90B6;
-  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
-  background-size: 100%;
-  -webkit-background-clip: text;
-  -moz-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  -moz-text-fill-color: transparent;
-}
-</style>
-
-<!--
-Here is another comment.
-->
-
---
-transition: slide-up
-level: 2
---
-
-# Navigation
-
-Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/ui#navigation-bar)
-
-## Keyboard Shortcuts
-
-|                                                     |                             |
-| --------------------------------------------------- | --------------------------- |
-| <kbd>right</kbd> / <kbd>space</kbd>                 | next animation or slide     |
-| <kbd>left</kbd>  / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide |
-| <kbd>up</kbd>                                       | previous slide              |
-| <kbd>down</kbd>                                     | next slide                  |
-
-<!-- https://sli.dev/guide/animations.html#click-animation -->
-<img
-  v-click
-  class="absolute -bottom-9 -left-7 w-80 opacity-50"
-  src="https://sli.dev/assets/arrow-bottom-left.svg"
-  alt=""
-/>
-<p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">Here!</p>
-
---
-layout: two-cols
-layoutClass: gap-16
---
-
-# Table of contents
-
-You can use the `Toc` component to generate a table of contents for your slides:
-
-```html
-<Toc minDepth="1" maxDepth="1" />
-```
-
-The title will be inferred from your slide content, or you can override it with `title` and `level` in your frontmatter.
-
-::right::
-
-<Toc text-sm minDepth="1" maxDepth="2" />
-
---
-layout: image-right
-image: https://cover.sli.dev
---
-
-# Code
-
-Use code snippets and get the highlighting directly, and even types hover!
-
-```ts [filename-example.ts] {all|4|6|6-7|9|all} twoslash
-// TwoSlash enables TypeScript hover information
-// and errors in markdown code blocks
-// More at https://shiki.style/packages/twoslash
-import { computed, ref } from 'vue'
-
-const count = ref(0)
-const doubled = computed(() => count.value * 2)
-
-doubled.value = 2
-```
-
-<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="342" color="#953" width="2" arrowSize="1" />
-
-<!-- This allow you to embed external code blocks -->
-<!-- <<< @/snippets/external.ts#snippet -->
-
-<!-- Footer -->
-
-[Learn more](https://sli.dev/features/line-highlighting)
-
-<!-- Inline style -->
-<style>
-.footnotes-sep {
-  @apply mt-5 opacity-10;
-}
-.footnotes {
-  @apply text-sm opacity-75;
-}
-.footnote-backref {
-  display: none;
-}
-</style>
-
-<!--
-Notes can also sync with clicks
-
-[click] This will be highlighted after the first click
-
-[click] Highlighted with `count = ref(0)`
-
-[click:3] Last click (skip two clicks)
-->
-
---
-level: 2
---
-
-# Shiki Magic Move
-
-Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev supports animations across multiple code snippets.
-
-Add multiple code blocks and wrap them with <code>````md magic-move</code> (four backticks) to enable the magic move. For example:
-
-````md magic-move {lines: true}
-```ts {*|2|*}
-// step 1
-const author = reactive({
-  name: 'John Doe',
-  books: [
-    'Vue 2 - Advanced Guide',
-    'Vue 3 - Basic Guide',
-    'Vue 4 - The Mystery'
-  ]
-})
-```
-
-```ts {*|1-2|3-4|3-4,8}
-// step 2
-export default {
-  data() {
-    return {
-      author: {
-        name: 'John Doe',
-        books: [
-          'Vue 2 - Advanced Guide',
-          'Vue 3 - Basic Guide',
-          'Vue 4 - The Mystery'
-        ]
-      }
-    }
-  }
-}
-```
-
-```ts
-// step 3
-export default {
-  data: () => ({
-    author: {
-      name: 'John Doe',
-      books: [
-        'Vue 2 - Advanced Guide',
-        'Vue 3 - Basic Guide',
-        'Vue 4 - The Mystery'
-      ]
-    }
-  })
-}
-```
-
-Non-code blocks are ignored.
-
-```vue
-<!-- step 4 -->
-<script setup>
-const author = {
-  name: 'John Doe',
-  books: [
-    'Vue 2 - Advanced Guide',
-    'Vue 3 - Basic Guide',
-    'Vue 4 - The Mystery'
-  ]
-}
-</script>
-```
-````
-
---
-
-# Components
-
-<div grid="~ cols-2 gap-4">
-<div>
-
-You can use Vue components directly inside your slides.
-
-We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly. And adding your custom components is also super easy.
-
-```html
-<Counter :count="10" />
-```
-
-<!-- ../components/Counter.vue -->
-<Counter :count="10" m="t-4" />
-
-Check out [the guides](https://sli.dev/builtin/components.html) for more.
-
-</div>
-<div>
-
-```html
-<Tweet id="1390115482657726468" />
-```
-
-<Tweet id="1390115482657726468" scale="0.65" />
-
-</div>
-</div>
-
-<!--
-Presenter note with **bold**, *italic*, and ~~striked~~ text.
-
-Also, HTML elements are valid:
-<div class="flex w-full">
-  <span style="flex-grow: 1;">Left content</span>
-  <span>Right content</span>
-</div>
-->
-
---
-class: px-20
---
-
-# Themes
-
-Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter:
-
-<div grid="~ cols-2 gap-2" m="t-2">
-
-```yaml
---
-theme: default
---
-```
-
-```yaml
---
-theme: seriph
---
-```
-
-<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt="">
-
-<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt="">
-
-</div>
-
-Read more about [How to use a theme](https://sli.dev/guide/theme-addon#use-theme) and
-check out the [Awesome Themes Gallery](https://sli.dev/resources/theme-gallery).
-
---
-
-# Clicks Animations
-
-You can add `v-click` to elements to add a click animation.
-
-<div v-click>
-
-This shows up when you click the slide:
-
-```html
-<div v-click>This shows up when you click the slide.</div>
-```
-
-</div>
-
-<br>
-
-<v-click>
-
-The <span v-mark.red="3"><code>v-mark</code> directive</span>
-also allows you to add
-<span v-mark.circle.orange="4">inline marks</span>
-, powered by [Rough Notation](https://roughnotation.com/):
-
-```html
-<span v-mark.underline.orange>inline markers</span>
-```
-
-</v-click>
-
-<div mt-20 v-click>
-
-[Learn more](https://sli.dev/guide/animations#click-animation)
-
-</div>
-
---
-
-# Motions
-
-Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), triggered by `v-motion` directive.
-
-```html
-<div
-  v-motion
-  :initial="{ x: -80 }"
-  :enter="{ x: 0 }"
-  :click-3="{ x: 80 }"
-  :leave="{ x: 1000 }"
->
-  Slidev
-</div>
-```
-
-<div class="w-60 relative">
-  <div class="relative w-40 h-40">
-    <img
-      v-motion
-      :initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }"
-      :enter="final"
-      class="absolute inset-0"
-      src="https://sli.dev/logo-square.png"
-      alt=""
-    />
-    <img
-      v-motion
-      :initial="{ y: 500, x: -100, scale: 2 }"
-      :enter="final"
-      class="absolute inset-0"
-      src="https://sli.dev/logo-circle.png"
-      alt=""
-    />
-    <img
-      v-motion
-      :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
-      :enter="final"
-      class="absolute inset-0"
-      src="https://sli.dev/logo-triangle.png"
-      alt=""
-    />
-  </div>
-
-  <div
-    class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1"
-    v-motion
-    :initial="{ x: -80, opacity: 0}"
-    :enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }">
-    Slidev
-  </div>
-</div>
-
-<!-- vue script setup scripts can be directly used in markdown, and will only affects current page -->
-<script setup lang="ts">
-const final = {
-  x: 0,
-  y: 0,
-  rotate: 0,
-  scale: 1,
-  transition: {
-    type: 'spring',
-    damping: 10,
-    stiffness: 20,
-    mass: 2
-  }
-}
-</script>
-
-<div
-  v-motion
-  :initial="{ x:35, y: 30, opacity: 0}"
-  :enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }">
-
-[Learn more](https://sli.dev/guide/animations.html#motion)
-
-</div>
-
---
-
-# LaTeX
-
-LaTeX is supported out-of-box. Powered by [KaTeX](https://katex.org/).
-
-<div h-3 />
-
-Inline $\sqrt{3x-1}+(1+x)^2$
-
-Block
-$$ {1|3|all}
-\begin{aligned}
-\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
-\nabla \cdot \vec{B} &= 0 \\
-\nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t} \\
-\nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t}
-\end{aligned}
-$$
-
-[Learn more](https://sli.dev/features/latex)
-
---
-
-# Diagrams
-
-You can create diagrams / graphs from textual descriptions, directly in your Markdown.
-
-<div class="grid grid-cols-4 gap-5 pt-4 -mb-6">
-
-```mermaid {scale: 0.5, alt: 'A simple sequence diagram'}
-sequenceDiagram
-    Alice->John: Hello John, how are you?
-    Note over Alice,John: A typical interaction
-```
-
-```mermaid {theme: 'neutral', scale: 0.8}
-graph TD
-B[Text] --> C{Decision}
-C -->|One| D[Result 1]
-C -->|Two| E[Result 2]
-```
-
-```mermaid
-mindmap
-  root((mindmap))
-    Origins
-      Long history
-      ::icon(fa fa-book)
-      Popularisation
-        British popular psychology author Tony Buzan
-    Research
-      On effectiveness<br/>and features
-      On Automatic creation
-        Uses
-            Creative techniques
-            Strategic planning
-            Argument mapping
-    Tools
-      Pen and paper
-      Mermaid
-```
-
-```plantuml {scale: 0.7}
-@startuml
-
-package "Some Group" {
-  HTTP - [First Component]
-  [Another Component]
-}
-
-node "Other Groups" {
-  FTP - [Second Component]
-  [First Component] --> FTP
-}
-
-cloud {
-  [Example 1]
-}
-
-database "MySql" {
-  folder "This is my folder" {
-    [Folder 3]
-  }
-  frame "Foo" {
-    [Frame 4]
-  }
-}
-
-[Another Component] --> [Example 1]
-[Example 1] --> [Folder 3]
-[Folder 3] --> [Frame 4]
-
-@enduml
-```
-
-</div>
-
-Learn more: [Mermaid Diagrams](https://sli.dev/features/mermaid) and [PlantUML Diagrams](https://sli.dev/features/plantuml)
-
---
-foo: bar
-dragPos:
-  square: 691,32,167,_,-16
---
-
-# Draggable Elements
-
-Double-click on the draggable elements to edit their positions.
-
-<br>
-
-###### Directive Usage
-
-```md
-<img v-drag="'square'" src="https://sli.dev/logo.png">
-```
-
-<br>
-
-###### Component Usage
-
-```md
-<v-drag text-3xl>
-  <div class="i-carbon:arrow-up" />
-  Use the `v-drag` component to have a draggable container!
-</v-drag>
-```
-
-<v-drag pos="640,212,261,_,-15">
-  <div text-center text-3xl border border-main rounded>
-    Double-click me!
-  </div>
-</v-drag>
-
-<img v-drag="'square'" src="https://sli.dev/logo.png">
-
-###### Draggable Arrow
-
-```md
-<v-drag-arrow two-way />
-```
-
-<v-drag-arrow pos="360,319,253,46" two-way op70 />
-
---
-src: ./pages/imported-slides.md
-hide: false
---
-
---
-
-# Monaco Editor
-
-Slidev provides built-in Monaco Editor support.
-
-Add `{monaco}` to the code block to turn it into an editor:
-
-```ts {monaco}
-import { ref } from 'vue'
-import { emptyArray } from './external'
-
-const arr = ref(emptyArray(10))
-```
-
-Use `{monaco-run}` to create an editor that can execute the code directly in the slide:
-
-```ts {monaco-run}
-import { version } from 'vue'
-import { emptyArray, sayHello } from './external'
-
-sayHello()
-console.log(`vue ${version}`)
-console.log(emptyArray<number>(10).reduce(fib => [...fib, fib.at(-1)! + fib.at(-2)!], [1, 1]))
-```
-
---
-layout: center
-class: text-center
---
-
-# Learn More
-
-[Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/resources/showcases)
-
-<PoweredBySlidev mt-10 />
--- a/web/slides/index.md
+++ b/web/slides/index.md
@@ -1,28 +0,0 @@
---
-theme: default
-# random image from a curated Unsplash collection by Anthony
-background: https://cover.sli.dev
-# 介绍文档： https://sli.dev
-title: Welcome to Slidev
-info: |
-  ## 关于Slidev的介绍
-  演示稿
-class: text-center
-# https://sli.dev/features/drawing
-drawings:
-  persist: false
-# slide transition: https://sli.dev/guide/animations.html#slide-transitions
-transition: slide-left
-# enable MDC Syntax: https://sli.dev/features/mdc
-mdc: true
-htmlAttrs:
-  dir: ltr
-  lang: zh-CN
-# duration of the presentation
-duration: 35min
---
-# slide 是一个 所见即所得的幻灯片制作工具
---
-src: ./demos/contents.md
-hide: false
---
--- a/web/slides/pages/contents.md
+++ b/web/slides/pages/contents.md
@@ -1,10 +0,0 @@
---
-title: '例子'
---
-
-# 常用语法结构
-
---
---
-
-# 第二个
--- a/web/src/agent/app.ts
+++ b/web/src/agent/app.ts
--- a/web/src/agent/index.ts
+++ b/web/src/agent/index.ts
@@ -1,4 +1,4 @@
-import { app } from '@/app.ts';
+import { app } from './app.ts';

 import './routes/left-panel.ts';

--- a/web/src/agent/routes/left-panel.ts
+++ b/web/src/agent/routes/left-panel.ts
@@ -1,4 +1,4 @@
-import { app } from '@/app.ts';
+import { app } from '../app.ts';
 import { use } from '@kevisual/context'

 app.route({
--- a/web/src/app/about/page.tsx
+++ b/web/src/app/about/page.tsx
@@ -0,0 +1,9 @@
+export default function AboutPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        About Light Code
+      </main>
+    </div>
+  );
+}
--- a/web/src/apps/chat/index.tsx
+++ b/web/src/apps/chat/index.tsx
@@ -1,4 +1,4 @@
-import { app } from '@/index.ts'
+import { app } from '@/agent/index.ts'
 import { useStudioStore } from '../studio/store';
 import { useShallow } from 'zustand/shallow';
 import { useState } from 'react';
--- a/web/src/apps/chat/modules/messages.tsx
+++ b/web/src/apps/chat/modules/messages.tsx
--- a/web/src/apps/chat/store.ts
+++ b/web/src/apps/chat/store.ts
--- a/web/src/apps/cv/index.css
+++ b/web/src/apps/cv/index.css
--- a/web/src/apps/cv/index.tsx
+++ b/web/src/apps/cv/index.tsx
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -1,50 +1,53 @@
-@import 'tailwindcss';
+@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
  --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);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
 }

 :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);
@@ -74,6 +77,8 @@
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
 }

 .dark {
@@ -117,4 +122,4 @@
  body {
    @apply bg-background text-foreground;
  }
-}
+}
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -0,0 +1,44 @@
+import type { Metadata, Viewport } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Toaster } from 'sonner'
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Light Code",
+  description: "直觉、高效的代码编辑",
+};
+
+export const viewport: Viewport = {
+  themeColor: "#000000",
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="zh-CN" className="">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-x-hidden bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100`}
+      >
+        {children}
+        <Toaster></Toaster>
+      </body>
+    </html>
+  );
+}
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -0,0 +1,8 @@
+
+import { AppProvider } from './studio/index.tsx';
+
+export default function Home() {
+  return (
+    <AppProvider />
+  );
+}
--- a/web/src/apps/query-view/index.tsx
+++ b/web/src/apps/query-view/index.tsx
@@ -1,5 +1,5 @@
 import { QueryProxy, RouterViewItem } from '@kevisual/api/proxy'
-import { app } from '@/index.ts'
+import { app } from '@/agent/index.ts'
 import { use, useEffect, useState } from 'react'
 import { flexRender, useReactTable, getCoreRowModel, ColumnDef } from '@tanstack/react-table'
 import { RefreshCw, Info, MoreVertical, Edit, Trash2, Download, Save, ExternalLink, Code } from 'lucide-react'
--- a/web/src/apps/setting/index.tsx
+++ b/web/src/apps/setting/index.tsx
--- a/web/src/apps/studio/index.tsx
+++ b/web/src/apps/studio/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { toast, ToastContainer, Slide } from 'react-toastify';
 import { useStudioStore } from './store.ts';
 import { use, useEffect, useState } from 'react';
--- a/web/src/apps/studio/store.ts
+++ b/web/src/apps/studio/store.ts
@@ -1,3 +1,4 @@
+'use client';
 import { create } from 'zustand';
 import { QueryProxy, RouterViewData, RouterViewItem, pickRouterViewData } from '@kevisual/api'
 import { query } from '@/modules/query.ts'
@@ -5,7 +6,7 @@ import { toast } from 'react-toastify';
 import { use } from '@kevisual/context'
 import { MyCache } from '@kevisual/cache'
 import { persist } from 'zustand/middleware';
-import { app } from '@/index.ts'
+import { app } from '@/agent/index.ts'
 import { cloneDeep, random } from 'es-toolkit'
 import { nanoid } from 'nanoid';
 const historyReplace = (url: string) => {
--- a/web/src/apps/view/components/DataItemForm.tsx
+++ b/web/src/apps/view/components/DataItemForm.tsx
--- a/web/src/apps/view/components/ViewEditor.tsx
+++ b/web/src/apps/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 "@/apps/view/components/DataItemForm"
-import { ViewFormItem } from "@/apps/view/components/ViewFormItem"
+import { DataItemForm } from "@/app/view/components/DataItemForm"
+import { ViewFormItem } from "@/app/view/components/ViewFormItem"
 import { nanoid } from "nanoid"

 interface ViewEditorProps {
--- a/web/src/apps/view/components/ViewFormItem.tsx
+++ b/web/src/apps/view/components/ViewFormItem.tsx
--- a/web/src/apps/view/list.tsx
+++ b/web/src/apps/view/list.tsx
@@ -11,7 +11,7 @@ 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 "@/apps/view/components/ViewEditor.tsx";
+import { ViewEditor } from "@/app/view/components/ViewEditor.tsx";
 import { toast } from "react-toastify";

 const ViewItem = ({ view, onEdit, onDelete, onDeleteViewItem }: { view: any; onEdit: (view: any) => void; onDelete: (id: string) => void; onDeleteViewItem: (id: string, viewId: string) => void }) => {
--- a/web/src/apps/footer.tsx
+++ b/web/src/apps/footer.tsx
@@ -1,41 +0,0 @@
-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/web/src/apps/menu.tsx
+++ b/web/src/apps/menu.tsx
@@ -1,56 +0,0 @@
-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);
-  }, [items]);
-  if (list.length === 0) {
-    return null;
-  }
-  return (
-    <nav className='flex-1 overflow-y-auto scrollbar bg-sidebar border border-sidebar-border rounded-lg p-4 shadow-sm'>
-      <h2 className="text-sm font-semibold text-sidebar-foreground">列表</h2>
-      <div className="space-y-1">
-        {list.map(item => (
-          <a
-            key={item.id}
-            href={`${basename}/docs/${item.id}/`}
-            className="group block rounded-md hover:bg-sidebar-accent transition-all duration-200 ease-in-out"
-          >
-            <div className="px-3 py-2.5">
-              <h3 className="text-sm font-semibold text-sidebar-foreground group-hover:text-sidebar-accent-foreground transition-colors">
-                {item.data?.title}
-              </h3>
-              {item.data?.tags && item.data.tags.length > 0 && (
-                <div className="flex flex-wrap gap-1.5 mt-2">
-                  {item.data.tags.map(tag => (
-                    <span
-                      key={tag}
-                      className="text-xs px-2 py-0.5 rounded-full bg-muted/60 text-muted-foreground font-medium hover:bg-muted transition-colors"
-                    >
-                      {tag}
-                    </span>
-                  ))}
-                </div>
-              )}
-            </div>
-          </a>
-        ))}
-      </div>
-    </nav>
-  );
-}
-
--- a/web/src/components/MdPreview.tsx
+++ b/web/src/components/MdPreview.tsx
@@ -1,70 +0,0 @@
-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/web/src/components/html.astro
+++ b/web/src/components/html.astro
@@ -1,47 +0,0 @@
---
-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/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/web/src/components/ui/checkbox.tsx
+++ b/web/src/components/ui/checkbox.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { CheckIcon } from "lucide-react"
--- a/web/src/components/ui/command.tsx
+++ b/web/src/components/ui/command.tsx
@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
--- a/web/src/components/ui/dialog.tsx
+++ b/web/src/components/ui/dialog.tsx
@@ -1,42 +1,143 @@
+"use client"
+
 import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"

-const Dialog = ({ open, onOpenChange, children }: { open: boolean; onOpenChange: (open: boolean) => void; children: React.ReactNode }) => {
-  if (!open) return null
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}

+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="fixed inset-0 bg-black/50" onClick={() => onOpenChange(false)} />
-      <div className="relative z-50 w-full max-w-2xl max-h-[90vh] overflow-auto bg-white rounded-lg shadow-lg p-6">
-        {children}
-      </div>
-    </div>
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
  )
 }

-const DialogHeader = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left mb-4", className)} {...props}>
-    {children}
-  </div>
-)
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}

-const DialogTitle = ({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
-  <h2 className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props}>
-    {children}
-  </h2>
-)
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}

-const DialogContent = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("", className)} {...props}>
-    {children}
-  </div>
-)
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}

-const DialogFooter = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 mt-4", className)} {...props}>
-    {children}
-  </div>
-)
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}

-export { Dialog, DialogHeader, DialogTitle, DialogContent, DialogFooter }
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
--- a/web/src/components/ui/dropdown-menu.tsx
+++ b/web/src/components/ui/dropdown-menu.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
--- a/web/src/components/ui/kbd.tsx
+++ b/web/src/components/ui/kbd.tsx
@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }
--- a/web/src/components/ui/label.tsx
+++ b/web/src/components/ui/label.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"

--- a/web/src/components/ui/menubar.tsx
+++ b/web/src/components/ui/menubar.tsx
@@ -0,0 +1,276 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
--- a/web/src/components/ui/popover.tsx
+++ b/web/src/components/ui/popover.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"

--- a/web/src/components/ui/select.tsx
+++ b/web/src/components/ui/select.tsx
@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
--- a/web/src/components/ui/table.tsx
+++ b/web/src/components/ui/table.tsx
@@ -1,114 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Table({ className, ...props }: React.ComponentProps<"table">) {
-  return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  )
-}
-
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
-}
-
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
--- a/web/src/components/ui/tabs.tsx
+++ b/web/src/components/ui/tabs.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"

--- a/web/src/components/ui/tooltip.tsx
+++ b/web/src/components/ui/tooltip.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"

--- a/web/src/components/vue/Counter.vue
+++ b/web/src/components/vue/Counter.vue
@@ -1,29 +0,0 @@
-<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/web/src/content.config.ts
+++ b/web/src/content.config.ts
@@ -1,24 +0,0 @@
-// @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/web/src/data/docs/menu.md
+++ b/web/src/data/docs/menu.md
@@ -1,8 +0,0 @@
---
-title: 'astro 概览'
-tags: ['astro', 'simple', 'template']
-createdAt: '2025-11-25 20:00:00'
-hideInMenu: true
---
-
-## 概览
--- a/web/src/data/docs/simpalte-template.md
+++ b/web/src/data/docs/simpalte-template.md
@@ -1,10 +0,0 @@
---
-title: '想要模板做什么'
-tags: ['astro', 'simple', 'template']
-createdAt: '2025-11-25 20:00:00'
-hideInMenu: true
---
-
-## 模板介绍
-
-合并文档内容和开发项目的模块
--- a/web/src/layouts/MDXPost.astro
+++ b/web/src/layouts/MDXPost.astro
@@ -1,24 +0,0 @@
---
-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/web/src/layouts/blank.astro
+++ b/web/src/layouts/blank.astro
@@ -1,47 +0,0 @@
---
-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/web/src/layouts/docs/pagination.astro
+++ b/web/src/layouts/docs/pagination.astro
@@ -1,4 +0,0 @@
---
---
-
-分页组件
--- a/web/src/layouts/mdx.astro
+++ b/web/src/layouts/mdx.astro
@@ -1,73 +0,0 @@
---
-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/web/src/modules/basename.ts
+++ b/web/src/modules/basename.ts
@@ -1,13 +1,18 @@
-// @ts-ignore
-export const basename = BASE_NAME;
+const isDev = process.env.NODE_ENV === "development";
+const BASE_NAME = isDev ? '' : '/root/perler-beads';

-console.log(basename);
+export const basename = BASE_NAME;

 export const wrapBasename = (path: string) => {
  const hasEnd = path.endsWith('/')
+  let _basename = basename;
  if (basename) {
-    return `${basename}${path}` + (hasEnd ? '' : '/');
+    _basename = `${basename}${path}`;
  } else {
-    return path;
+    _basename = path;
  }
+  if (isDev) {
+    return _basename
+  }
+  return _basename + '.html';
 }
--- a/web/src/modules/query.ts
+++ b/web/src/modules/query.ts
@@ -1,3 +1,4 @@
+'use client';
 import { QueryClient } from '@kevisual/query'

 const getUrl = () => {
--- a/web/src/pages/cv.astro
+++ b/web/src/pages/cv.astro
@@ -1,8 +0,0 @@
---
-import Html from '@/components/html.astro';
-import { AppProvider } from '@/apps/cv/index.tsx';
---
-
-<Html title='简历'>
-  <AppProvider client:only></AppProvider>
-</Html>
--- a/web/src/pages/demos/base.astro
+++ b/web/src/pages/demos/base.astro
@@ -1,9 +0,0 @@
---
-import Html from '@/components/html.astro';
---
-
-<Html>
-  <main>
-   
-  </main>
-</Html>
--- a/web/src/pages/demos/vue.astro
+++ b/web/src/pages/demos/vue.astro
@@ -1,10 +0,0 @@
---
-import Html from '@/components/html.astro';
-// import Counter from '@/components/vue/Counter.vue';
---
-
-<Html>
-  <main>
-    <!-- <Counter count={10} client:only/> -->
-  </main>
-</Html>
--- a/web/src/pages/docs/[...id].astro
+++ b/web/src/pages/docs/[...id].astro
@@ -1,27 +0,0 @@
---
-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/web/src/pages/docs/index.astro
+++ b/web/src/pages/docs/index.astro
@@ -1,80 +0,0 @@
---
-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/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -1,8 +0,0 @@
---
-import Html from '@/components/html.astro';
-import { AppProvider } from '@/apps/studio/index.tsx';
---
-
-<Html title='Router Studio'>
-  <AppProvider client:only></AppProvider>
-</Html>
--- a/web/src/pages/query-view.astro
+++ b/web/src/pages/query-view.astro
@@ -1,8 +0,0 @@
---
-import Html from '@/components/html.astro';
-import { AppProvider } from '@/apps/query-view/index.tsx';
---
-
-<Html title='Router Studio'>
-  <AppProvider client:only />
-</Html>
--- a/web/src/proxy.ts
+++ b/web/src/proxy.ts
@@ -0,0 +1,65 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_URL = process.env.API_URL || 'http://localhost:51515';
+console.log(`Proxy API_URL: ${API_URL}`);
+/**
+ * 通用代理函数
+ * @param request 原始请求
+ * @param targetHost 目标服务器地址（如 http://localhost:51515）
+ * @returns NextResponse 代理响应
+ */
+async function proxyRequest(request: NextRequest, targetHost: string): Promise<NextResponse> {
+  const { pathname } = request.nextUrl;
+  const targetUrl = new URL(pathname + request.nextUrl.search, targetHost);
+
+  try {
+    console.log(`Proxying request to: ${targetUrl.toString()}`);
+    const response = await fetch(targetUrl.toString(), {
+      method: request.method,
+      headers: {
+        // 复制原始请求的所有头部
+        ...Object.fromEntries(request.headers.entries()),
+        // 确保转发 cookie
+        cookie: request.headers.get('cookie') || '',
+      },
+      body: request.method !== 'GET' && request.method !== 'HEAD' ? await request.text() : undefined,
+      // 包含 cookie 的请求
+      credentials: 'include',
+    });
+
+    // 创建响应，保留原始响应的所有头部（包括 Set-Cookie）
+    const responseHeaders = new Headers(response.headers);
+
+    return new NextResponse(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers: responseHeaders,
+    });
+  } catch (error) {
+    console.error('Proxy error:', error);
+    return NextResponse.json(
+      { error: 'Proxy request failed' },
+      { status: 502 }
+    );
+  }
+}
+
+export async function proxy(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+  // 代理 /api 请求
+  if (pathname.startsWith('/api')) {
+    return proxyRequest(request, API_URL);
+  }
+  // 代理 /root/home 或 /root/home/ 请求 (第二个路径段后可以为空或以 / 结尾)
+  if (pathname.startsWith('/root')) {
+    return proxyRequest(request, API_URL);
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/api/:path*', '/root/:segment/:path*'],
+};
+
+export default proxy;
--- a/web/src/styles/theme.css
+++ b/web/src/styles/theme.css
@@ -1,98 +0,0 @@
-@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;
-}
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,18 +1,23 @@
 {
-  "extends": "@kevisual/types/json/frontend.json",
+  "extends": "@kevisual/types/json/next.json",
  "compilerOptions": {
-    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
-      ],
-      "@/agent": [
-        "./src/agent"
      ]
-    },
+    }
  },
  "include": [
-    "src/**/*",
-    "agent/**/*"
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts",
+    "dist/types/**/*.ts",
+    "dist/dev/types/**/*.ts"
  ],
+  "exclude": [
+    "node_modules"
+  ]
 }