update

2025-11-24 13:49:36 +08:00
parent 21b56d0948
commit 8b9fdb706f
43 changed files with 8123 additions and 622 deletions
--- a/frontend/.env
+++ b/frontend/.env
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:9000
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+
+.astro
+
+dist
--- a/frontend/astro.config.mjs
+++ b/frontend/astro.config.mjs
@@ -0,0 +1,43 @@
+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';
+
+dotenv.config();
+const isDev = process.env.NODE_ENV === 'development';
+
+let target = process.env.VITE_API_URL || 'http://localhost:51015';
+const apiProxy = { target: target, changeOrigin: true, ws: true, rewriteWsOrigin: true, secure: false, cookieDomainRewrite: 'localhost' };
+let proxy = {
+  '/root/': {
+    target: `${target}/root/`,
+  },
+  '/api': apiProxy,
+  '/client': apiProxy,
+};
+
+const basename = isDev ? undefined : `${pkgs.basename}`;
+export default defineConfig({
+  base: basename,
+  integrations: [
+    mdx(),
+    react(), //
+    // sitemap(), // sitemap must be site has a domain
+  ],
+  
+  vite: {
+    plugins: [tailwindcss()],
+    define: {
+      BASE_NAME: JSON.stringify(basename || ''),
+    },
+    server: {
+      port: 7008,
+      host: '0.0.0.0',
+      allowedHosts: true,
+      proxy,
+    },
+  },
+});
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "@kevisual/daily-question",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "basename": "/root/daily-question",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "pub": "envision deploy ./dist -k daily-question -v 0.0.1 -u",
+    "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.12",
+    "@astrojs/react": "^4.4.2",
+    "@astrojs/sitemap": "^3.6.0",
+    "@kevisual/query": "^0.0.29",
+    "@kevisual/query-login": "^0.0.7",
+    "@kevisual/registry": "^0.0.1",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@tailwindcss/vite": "^4.1.17",
+    "@uiw/react-md-editor": "^4.0.8",
+    "antd": "^6.0.0",
+    "astro": "^5.16.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.19",
+    "es-toolkit": "^1.42.0",
+    "github-markdown-css": "^5.8.1",
+    "highlight.js": "^11.11.1",
+    "lucide-react": "^0.554.0",
+    "marked": "^17.0.1",
+    "marked-highlight": "^2.2.3",
+    "nanoid": "^5.1.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-toastify": "^11.0.5",
+    "tailwind-merge": "^3.4.0",
+    "zustand": "^5.0.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@kevisual/types": "^0.0.10",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-basic-ssl": "^2.1.0",
+    "dotenv": "^17.2.3",
+    "tailwindcss": "^4.1.17",
+    "tw-animate-css": "^1.4.0"
+  },
+  "packageManager": "pnpm@10.23.0",
+  "onlyBuiltDependencies": [
+    "@tailwindcss/oxide",
+    "esbuild",
+    "sharp"
+  ]
+}
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/src/apps/daily/index.tsx
+++ b/frontend/src/apps/daily/index.tsx
@@ -0,0 +1,124 @@
+import { ConfigProvider, message, Space } from 'antd';
+import { Table, Button } from 'antd';
+import { useStore } from '../today/store';
+import { useShallow } from 'zustand/shallow';
+import { useEffect } from 'react';
+import { AppModal } from './modal.tsx'
+import dayjs from 'dayjs';
+
+const render = (dateStr: string) => {
+  return dayjs(dateStr).format('YYYY-MM-DD HH:mm:ss');
+}
+
+export const App = () => {
+  const store = useStore(useShallow((state) => ({
+    list: state.dailyList,
+    getList: state.getDailyList,
+    setFormData: state.setFormData,
+    setOpen: state.setOpen,
+    deleteItem: state.deleteDaily,
+  })));
+  useEffect(() => {
+    store.getList();
+  }, [])
+  const columns = [
+    {
+      title: '日期',
+      dataIndex: 'date',
+      key: 'date',
+    },
+    {
+      title: '题目',
+      dataIndex: 'title',
+      key: 'title',
+    },
+    {
+      title: '标签',
+      dataIndex: 'tags',
+      key: 'tags',
+      render: (tags: string[]) => (
+        <>
+          {tags.map((tag) => (
+            <span key={tag} style={{ marginRight: 8, padding: '2px 6px', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>
+              {tag}
+            </span>
+          ))}
+        </>
+      ),
+    },
+    {
+      title: '回答',
+      dataIndex: 'description',
+      key: 'description',
+      ellipsis: true,
+    },
+    {
+      title: '资料库ID',
+      dataIndex: 'qid',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      render
+    },
+    {
+      title: '更新时间',
+      dataIndex: 'updatedAt',
+      key: 'updatedAt',
+      render
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_: any, record: any) => (
+        <Space>
+          <Button type="link" onClick={() => {
+            store.setFormData(record);
+            store.setOpen(true);
+          }}>编辑</Button>
+
+          <Button danger onClick={async () => {
+            await store.deleteItem(record.id);
+            message.success('删除成功');
+            store.getList();
+          }}>删除</Button>
+        </Space>
+      ),
+    }
+  ]
+  return <Table rowKey="id" columns={columns} dataSource={store.list} pagination={false} />
+}
+
+
+export const AppProvider = () => {
+  return <ConfigProvider>
+    <WrapperTable>
+      <App />
+    </WrapperTable>
+  </ConfigProvider>
+}
+export const Header = () => {
+  const store = useStore(useShallow((state) => ({
+    open: state.open,
+    setOpen: state.setOpen,
+    setFormData: state.setFormData,
+  })));
+  return <div className='container mx-auto px-4 py-4 flex justify-between items-center'>
+    <h1 className='text-2xl font-bold'>每日问题历史记录管理</h1>
+    <Space>
+      {/* <Button type="default" onClick={() => message.info('批量导入')}>批量导入</Button> */}
+      <Button type="primary" onClick={() => {
+        store.setFormData({});
+        store.setOpen(true)
+      }}>新增</Button>
+    </Space>
+  </div>
+}
+export const WrapperTable = (props: { children: React.ReactNode }) => {
+  return <div className='container mx-auto px-4 py-8 bg-white rounded-lg shadow-md'>
+    <Header />
+    <AppModal />
+    {props.children}
+  </div>
+}
--- a/frontend/src/apps/daily/modal.tsx
+++ b/frontend/src/apps/daily/modal.tsx
@@ -0,0 +1,109 @@
+import { Modal, Form, Input, Select } from 'antd';
+import { useStore } from '../today/store';
+import { useShallow } from 'zustand/shallow';
+import { useEffect } from 'react';
+import dayjs from 'dayjs';
+
+const { TextArea } = Input;
+
+export const AppModal = () => {
+  const [form] = Form.useForm();
+  const store = useStore(useShallow((state) => ({
+    open: state.open,
+    setOpen: state.setOpen,
+    formData: state.formData,
+    setFormData: state.setFormData,
+    postForm: state.postDaily,
+    refresh: state.getDailyList,
+  })));
+  const isEdit = Boolean(store.formData.id);
+
+  // 当模态框打开时,设置表单初始值
+  useEffect(() => {
+    if (store.open) {
+      form.setFieldsValue({
+        date: store.formData.date || dayjs().format('YYYY-MM-DD'),
+        title: store.formData.title || '',
+        tags: store.formData.tags || [],
+        description: store.formData.description || '',
+        qid: store.formData.qid || '',
+      });
+    } else {
+      form.resetFields();
+    }
+  }, [store.open, store.formData, form]);
+
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields();
+      // 提交表单数据的逻辑
+      const newFormData = { id: store.formData?.id, ...values };
+      console.log('提交表单数据:', newFormData);
+      store.setFormData({});
+      await store.postForm(newFormData);
+      store.refresh();
+      store.setOpen(false);
+    } catch (error) {
+      console.error('表单验证失败:', error);
+    }
+  };
+
+  return (
+    <Modal
+      title={isEdit ? '编辑每日题目' : '新增每日题目'}
+      open={store.open}
+      onCancel={() => store.setOpen(false)}
+      onOk={handleOk}
+      okText="确定"
+      cancelText="取消"
+      forceRender
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        autoComplete="off"
+      >
+        <Form.Item
+          label="日期"
+          name="date"
+        >
+          <Input placeholder="请输入日期" />
+        </Form.Item>
+
+        <Form.Item
+          label="题目"
+          name="title"
+        >
+          <Input placeholder="请输入题目" />
+        </Form.Item>
+        <Form.Item
+          label="资料库ID"
+          name="qid"
+        >
+          <Input placeholder="请输入资料库ID" />
+        </Form.Item>
+
+        <Form.Item
+          label="标签"
+          name="tags"
+        >
+          <Select
+            mode="tags"
+            placeholder="请输入标签,按回车添加"
+            style={{ width: '100%' }}
+          />
+        </Form.Item>
+
+        <Form.Item
+          label="回答"
+          name="description"
+        >
+          <TextArea
+            rows={4}
+            placeholder="请输入回答"
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
--- a/frontend/src/apps/library/index.tsx
+++ b/frontend/src/apps/library/index.tsx
@@ -0,0 +1,129 @@
+import { ConfigProvider, Space, message } from 'antd';
+import { Table, Button } from 'antd';
+import { useStore } from '../today/store';
+import { useShallow } from 'zustand/shallow';
+import { useEffect } from 'react';
+import { AppModal } from './modal'
+import dayjs from 'dayjs';
+
+const render = (dateStr: string) => {
+  return dayjs(dateStr).format('YYYY-MM-DD HH:mm:ss');
+}
+export const App = () => {
+  const store = useStore(useShallow((state) => ({
+    list: state.libraryList,
+    getList: state.getLibraryList,
+    setFormData: state.setFormData,
+    setOpen: state.setOpen,
+    deleteItem: state.deleteLibrary,
+  })));
+  useEffect(() => {
+    store.getList();
+  }, [])
+  const columns = [
+    {
+      title: '题目',
+      dataIndex: 'title',
+      key: 'title',
+    },
+    {
+      title: '标签',
+      dataIndex: 'tags',
+      key: 'tags',
+      render: (tags: string[]) => (
+        <>
+          {tags?.map((tag) => (
+            <span key={tag} style={{ marginRight: 8, padding: '2px 6px', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>
+              {tag}
+            </span>
+          ))}
+        </>
+      ),
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+      ellipsis: true,
+    },
+    {
+      title: '是否可重复',
+      dataIndex: 'repeat',
+      key: 'repeat',
+      render: (repeat: boolean) => repeat ? '是' : '否'
+    },
+    {
+      title: '是否已使用',
+      dataIndex: 'isUse',
+      key: 'isUse',
+      render: (isUse: boolean) => isUse ? '是' : '否'
+    },
+    {
+      title: '使用时间',
+      dataIndex: 'usedAt',
+      key: 'usedAt',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      render
+    },
+    {
+      title: '更新时间',
+      dataIndex: 'updatedAt',
+      key: 'updatedAt',
+      render
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_: any, record: any) => (
+        <Space>
+          <Button type="link" onClick={() => {
+            store.setFormData(record);
+            store.setOpen(true);
+          }}>编辑</Button>
+
+          <Button danger onClick={async () => {
+            await store.deleteItem(record.id);
+            message.success('删除成功');
+            store.getList();
+          }}>删除</Button>
+        </Space>
+      ),
+    }
+  ]
+  return <Table rowKey="id" columns={columns} dataSource={store.list} pagination={false} />
+}
+export const AppProvider = () => {
+  return <ConfigProvider>
+    <WrapperTable>
+      <App />
+    </WrapperTable>
+  </ConfigProvider>
+}
+export const Header = () => {
+  const store = useStore(useShallow((state) => ({
+    open: state.open,
+    setOpen: state.setOpen,
+    setFormData: state.setFormData,
+  })));
+  return <div className='container mx-auto px-4 py-4 flex justify-between items-center'>
+    <h1 className='text-2xl font-bold'>每日问题知识库管理</h1>
+    <Space>
+      {/* <Button type="default" onClick={() => message.info('批量导入')}>批量导入</Button> */}
+      <Button type="primary" onClick={() => {
+        store.setFormData({});
+        store.setOpen(true)
+      }}>新增</Button>
+    </Space>
+  </div>
+}
+export const WrapperTable = (props: { children: React.ReactNode }) => {
+  return <div className='container mx-auto px-4 py-8 bg-white rounded-lg shadow-md'>
+    <Header />
+    <AppModal />
+    {props.children}
+  </div>
+}
--- a/frontend/src/apps/library/modal.tsx
+++ b/frontend/src/apps/library/modal.tsx
@@ -0,0 +1,110 @@
+import { Modal, Form, Input, Select, Switch } from 'antd';
+import { useStore } from '../today/store';
+import { useShallow } from 'zustand/shallow';
+import { useEffect } from 'react';
+
+const { TextArea } = Input;
+
+export const AppModal = () => {
+  const [form] = Form.useForm();
+  const store = useStore(useShallow((state) => ({
+    open: state.open,
+    setOpen: state.setOpen,
+    formData: state.formData,
+    setFormData: state.setFormData,
+    postForm: state.postLibrary,
+    refresh: state.getLibraryList,
+  })));
+  const isEdit = Boolean(store.formData.id);
+
+  // 当模态框打开时,设置表单初始值
+  useEffect(() => {
+    if (store.open) {
+      form.setFieldsValue({
+        title: store.formData.title || '',
+        tags: store.formData.tags || [],
+        description: store.formData.description || '',
+        repeat: store.formData.repeat ?? false,
+        usedAt: store.formData.usedAt || '',
+      });
+    } else {
+      form.resetFields();
+    }
+  }, [store.open, store.formData, form]);
+
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields();
+      // 提交表单数据的逻辑
+      const newFormData = { id: store.formData?.id, ...values };
+      console.log('提交表单数据:', newFormData);
+      store.setFormData(newFormData);
+      await store.postForm(newFormData);
+      store.refresh();
+      store.setOpen(false);
+    } catch (error) {
+      console.error('表单验证失败:', error);
+    }
+  };
+
+  return (
+    <Modal
+      title={isEdit ? '编辑知识库条目' : '新增知识库条目'}
+      open={store.open}
+      onCancel={() => store.setOpen(false)}
+      onOk={handleOk}
+      okText="确定"
+      cancelText="取消"
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        autoComplete="off"
+      >
+        <Form.Item
+          label="题目"
+          name="title"
+          rules={[{ required: true, message: '请输入题目' }]}
+        >
+          <Input placeholder="请输入题目" />
+        </Form.Item>
+
+        <Form.Item
+          label="标签"
+          name="tags"
+          rules={[{ required: true, message: '请选择至少一个标签' }]}
+        >
+          <Select
+            mode="tags"
+            placeholder="请输入标签,按回车添加"
+            style={{ width: '100%' }}
+          />
+        </Form.Item>
+
+        <Form.Item
+          label="描述"
+          name="description"
+          rules={[{ required: true, message: '请输入描述' }]}
+        >
+          <TextArea
+            rows={4}
+            placeholder="请输入描述"
+          />
+        </Form.Item>
+        <Form.Item
+          label="使用时间"
+          name="usedAt"
+        >
+          <Input placeholder="请输入使用时间" />
+        </Form.Item>
+        <Form.Item
+          label="是否可重复"
+          name="repeat"
+          valuePropName="checked"
+        >
+          <Switch checkedChildren="是" unCheckedChildren="否" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
--- a/frontend/src/apps/today/index.tsx
+++ b/frontend/src/apps/today/index.tsx
@@ -0,0 +1,118 @@
+import { query } from "@/modules/query";
+import { use, useEffect, useState } from "react";
+import { useStore } from "./store";
+import { useShallow } from "zustand/shallow";
+import MDEditor from '@uiw/react-md-editor';
+import { parseDataTag } from './utils.ts';
+import { ConfigProvider } from 'antd';
+export const App = () => {
+  const store = useStore(useShallow((state) => ({
+    today: state.today,
+    setToday: state.setToday,
+    answer: state.answer,
+    setAnswer: state.setAnswer,
+    getToday: state.getToday,
+    postDaily: state.postToday
+  })));
+  const { answer, setAnswer } = store;
+  useEffect(() => {
+    init();
+  }, [])
+
+  const init = async () => {
+    store.getToday();
+  }
+
+  const handleSubmit = async () => {
+    if (!answer.trim()) {
+      alert('请输入答案');
+      return;
+    }
+    store.postDaily()
+  }
+
+  return <div className="min-h-screen bg-linear-to-br from-blue-50 via-white to-purple-50">
+    <div className="container mx-auto px-4 py-8 max-w-5xl">
+      {/* 头部标题 */}
+      <div className="mb-8 text-center">
+        <h1 className="text-4xl font-bold mb-2 bg-linear-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+          今日题目 {store.today?.date}
+        </h1>
+        <p className="text-gray-500 text-sm">Daily Question Challenge</p>
+      </div>
+
+      {/* 题目卡片 */}
+      {store.today && (
+        <div className="mb-8 bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300 p-6 border border-gray-100">
+          <div className="flex items-start justify-between mb-4">
+            <h2 className="text-2xl font-bold text-gray-800 flex-1">{store.today.title}</h2>
+            {store.today.qid && (
+              <span className="ml-4 px-3 py-1 bg-linear-to-r from-blue-500 to-purple-500 text-white rounded-full text-xs font-semibold">
+                #{store.today.qid}
+              </span>
+            )}
+          </div>
+
+          {store.today?.tags && store.today.tags.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {store.today.tags.map((tag, index) => (
+                <span
+                  key={index}
+                  className="px-3 py-1.5 bg-linear-to-r from-blue-50 to-purple-50 text-blue-700 rounded-lg text-sm font-medium border border-blue-200 hover:border-blue-300 transition-colors"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 答案编辑区 */}
+      <div className="mb-8 bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
+        <div className="flex items-center mb-4">
+          <svg className="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+          </svg>
+          <h3 className="text-xl font-bold text-gray-800">我的答案</h3>
+        </div>
+        <div className="rounded-xl overflow-hidden border border-gray-200 shadow-sm">
+          <MDEditor
+            value={answer}
+            onChange={(val) => setAnswer(val || '')}
+            height={400}
+            preview="edit"
+          />
+        </div>
+      </div>
+
+      {/* 操作按钮 */}
+      <div className="flex gap-4 justify-center">
+        <button
+          onClick={handleSubmit}
+          className="group relative px-8 py-3 bg-linear-to-r from-blue-500 to-purple-600 text-white rounded-xl font-semibold shadow-lg hover:shadow-xl hover:scale-105 transform transition-all duration-200 flex items-center gap-2"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+          提交答案
+        </button>
+        <button
+          onClick={() => setAnswer('')}
+          className="px-8 py-3 bg-white text-gray-700 rounded-xl font-semibold border-2 border-gray-300 hover:border-gray-400 hover:bg-gray-50 hover:scale-105 transform transition-all duration-200 flex items-center gap-2 shadow-md"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          </svg>
+          清空
+        </button>
+      </div>
+    </div>
+  </div>;
+}
+
+export const AppProvider = () => {
+  return <ConfigProvider>
+    <App />
+  </ConfigProvider>
+}
--- a/frontend/src/apps/today/store.ts
+++ b/frontend/src/apps/today/store.ts
@@ -0,0 +1,189 @@
+import { create } from 'zustand';
+import { query } from '@/modules/query';
+import { parseDataTag } from './utils';
+import { message } from "antd";
+type DailyData = {
+  id: string;
+  qid: string;
+  title: string;
+  description: string;
+  summary: string;
+  tags: string[];
+  date: string;
+}
+
+type LibraryData = {
+  id: string;
+  title: string;
+  description: string;
+  tags: string[];
+  repeat: boolean;
+  isUse: boolean;
+  usedAt?: string;  // YYYY-MM-DD format
+  createdAt: string;
+  updatedAt: string;
+}
+interface TodayStore {
+  today?: DailyData;
+  setToday: (data: DailyData) => void;
+  answer: string;
+  setAnswer: (answer: string) => void;
+  getToday: () => Promise<void>;
+  postToday: () => void;
+
+  dailyList?: DailyData[];
+  setDailyList: (data: DailyData[]) => void;
+  getDailyList: () => Promise<void>;
+  postDaily: (data: Partial<DailyData>) => Promise<void>;
+  deleteDaily: (id: string) => Promise<void>;
+
+  libraryList?: LibraryData[];
+  setLibraryList: (data: LibraryData[]) => void;
+  getLibraryList: () => Promise<void>;
+  postLibrary: (data: Partial<LibraryData>) => Promise<void>;
+  deleteLibrary: (id: string) => Promise<void>;
+}
+interface TodayStore {
+  // common
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  formData: Record<string, any>;
+  setFormData: (data: Record<string, any>) => void;
+}
+
+export const useStore = create<TodayStore>((set, get) => ({
+  today: undefined,
+  setToday: (data: DailyData) => set({ today: data }),
+  answer: '',
+  setAnswer: (answer: string) => set({ answer }),
+  getToday: async () => {
+    const res = await query.post({
+      path: 'daily',
+      key: 'today'
+    })
+    console.log('today', res);
+    if (res.code === 200) {
+      const today = res.data.question;
+      set({
+        answer: today.description || '',
+        today: parseDataTag(today)
+      })
+    }
+  },
+  postToday: async () => {
+    const today = get().today!;
+    const answer = get().answer;
+    today.description = answer;
+    set({
+      today
+    })
+    const newData = parseDataTag(today);
+    // 提交答案的逻辑
+    console.log('提交答案:', newData);
+    const res = await query.post({
+      path: 'daily',
+      key: 'update',
+      payload: {
+        id: newData.id,
+        tags: newData.tags,
+        title: newData.title,
+        date: newData.date,
+        qid: newData.qid,
+        description: answer
+      }
+    });
+    if (res.code === 200) {
+      console.log('答案提交成功');
+    } else {
+      console.error('答案提交失败');
+    }
+  },
+  dailyList: [],
+  setDailyList: (data: DailyData[]) => set({ dailyList: data }),
+  getDailyList: async () => {
+    const res = await query.post({
+      path: 'daily',
+      key: 'list'
+    })
+    console.log('daily list', res);
+    if (res.code === 200) {
+      const dailyList = res.data.list;
+      const list = dailyList.map((item: any) => parseDataTag(item));
+      set({
+        dailyList: list
+      })
+    }
+  },
+  deleteDaily: async (id: string) => {
+    const res = await query.post({
+      path: 'daily',
+      key: 'delete',
+      payload: { id }
+    });
+    if (res.code === 200) {
+      message.success('删除成功');
+    } else {
+      message.error('删除失败');
+    }
+  },
+  postDaily: async (data: Partial<DailyData>) => {
+    const res = await query.post({
+      path: 'daily',
+      key: 'update',
+      payload: data
+    });
+    if (res.code === 200) {
+      message.success('保存成功');
+    } else {
+      message.error('保存失败');
+    }
+  },
+  libraryList: [],
+  setLibraryList: (data: LibraryData[]) => set({ libraryList: data }),
+  getLibraryList: async () => {
+    const res = await query.post({
+      path: 'library',
+      key: 'list'
+    })
+    console.log('library list', res);
+    if (res.code === 200) {
+      const _list = res.data.list;
+      const list = _list.map((item: any) => parseDataTag(item));
+      set({
+        libraryList: list
+      })
+    }
+  },
+  deleteLibrary: async (id: string) => {
+    const res = await query.post({
+      path: 'library',
+      key: 'delete',
+      payload: { id }
+    });
+    if (res.code === 200) {
+      message.success('删除成功');
+    } else {
+      message.error('删除失败');
+    }
+  },
+  postLibrary: async (data: Partial<LibraryData>) => {
+    const res = await query.post({
+      path: 'library',
+      key: 'update',
+      payload: data
+    });
+    if (res.code === 200) {
+      message.success('保存成功');
+    } else {
+      message.error('保存失败');
+    }
+  },
+
+  // common
+  open: false,
+  setOpen: (open: boolean) => set({ open }),
+  formData: {},
+  setFormData: (data: Record<string, any>) => set({
+    formData: data
+  }),
+}));
--- a/frontend/src/apps/today/utils.ts
+++ b/frontend/src/apps/today/utils.ts
@@ -0,0 +1,26 @@
+export const parseDataTag = (data: { tags: string | string[], [key: string]: any }): any => {
+  let tags: string[] = [];
+  if (typeof data.tags === 'string') {
+    try {
+      tags = JSON.parse(data.tags);
+    } catch (e) {
+      tags = [];
+    }
+  } else if (Array.isArray(data.tags)) {
+    tags = data.tags;
+  }
+  data.tags = tags;
+  return data;
+}
+
+export const formatDataTag = (data: { tags: string[] | string }) => {
+  if (typeof data.tags === 'string') {
+    data.tags = JSON.parse(data.tags);
+  }
+  data.tags = JSON.stringify(data.tags || []);
+  return data;
+};
+
+export const jsstr = (str: string[]) => {
+  return JSON.stringify(str);
+};
--- a/frontend/src/components/MdPreview.tsx
+++ b/frontend/src/components/MdPreview.tsx
@@ -0,0 +1,70 @@
+import { cn } from '@/lib/utils';
+import { useEffect, useState } from 'react';
+import { Marked } from 'marked';
+import hljs from 'highlight.js';
+import { markedHighlight } from 'marked-highlight';
+
+const markedAndHighlight = new Marked(
+  markedHighlight({
+    emptyLangClass: 'hljs',
+    langPrefix: 'hljs language-',
+    highlight(code, lang, info) {
+      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+      return hljs.highlight(code, { language }).value;
+    },
+  }),
+);
+
+export const md2html = async (md: string) => {
+  const html = markedAndHighlight.parse(md);
+  return html;
+};
+
+export const clearMeta = (markdown?: string) => {
+  if (!markdown) return '';
+  // Remove YAML front matter if present
+  const yamlRegex = /^---\n[\s\S]*?\n---\n/;
+  return markdown.replace(yamlRegex, '');
+};
+type Props = {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  content?: string; // Optional content prop for markdown text
+  [key: string]: any; // Allow any additional props
+};
+export const MarkdownPreview = (props: Props) => {
+  return (
+    <div
+      className={cn(
+        'markdown-body scrollbar h-full overflow-auto w-full px-6 py-2 max-w-[800px] border my-4 flex flex-col justify-self-center rounded-md shadow-md',
+        props.className,
+      )}
+      style={props.style}>
+      {props.children ? <WrapperText>{props.children}</WrapperText> : <MarkdownPreviewWrapper content={clearMeta(props.content)} />}
+    </div>
+  );
+};
+
+export const WrapperText = (props: { children?: React.ReactNode; html?: string }) => {
+  if (props.html) {
+    return <div className='w-full' dangerouslySetInnerHTML={{ __html: props.html }} />;
+  }
+  return <div className='w-full h-full'>{props.children}</div>;
+};
+
+export const MarkdownPreviewWrapper = (props: Props) => {
+  const [html, setHtml] = useState<string>('');
+  useEffect(() => {
+    init();
+  }, [props.content]);
+  const init = async () => {
+    if (props.content) {
+      const htmlContent = await md2html(props.content);
+      setHtml(htmlContent);
+    } else {
+      setHtml('');
+    }
+  };
+  return <WrapperText html={html} />;
+};
--- a/frontend/src/components/html.astro
+++ b/frontend/src/components/html.astro
@@ -0,0 +1,47 @@
+---
+import '../styles/global.css';
+import '../styles/theme.css';
+export interface Props {
+  title?: string;
+  description?: string;
+  lang?: string;
+  charset?: string;
+}
+
+const { title = 'Light Code', description = 'A lightweight code editor', lang = 'zh-CN', charset = 'UTF-8' } = Astro.props;
+---
+
+<!doctype html>
+<html lang={lang}>
+  <head>
+    <meta charset={charset} />
+    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+    <meta name='description' content={description} />
+    <title>{title}</title>
+    <!-- 样式 -->
+    <slot name='head' />
+  </head>
+  <body>
+    <slot />
+
+    <!-- 脚本 -->
+    <slot name='scripts' />
+  </body>
+</html>
+
+<style>
+  html {
+    font-family: system-ui, sans-serif;
+  }
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+</style>
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/frontend/src/content.config.ts
+++ b/frontend/src/content.config.ts
@@ -0,0 +1,19 @@
+// @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/blogs' }),
+  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(),
+  }),
+});
+
+
+export const collections = { docs };
--- a/frontend/src/data/docs/01-frontend.md
+++ b/frontend/src/data/docs/01-frontend.md
@@ -0,0 +1,24 @@
+---
+title: '01-frontend'
+tags: ['frontend', 'react', 'prompt']
+description: '第一次对功能进行最简单的解析'
+---
+
+## 前端页面
+
+### 页面1-今日问题页面
+
+今日问题和书写今日答案
+
+今日问题：第一次访问的时候，随机获取，可以点击后随机获取新的
+
+写今日答案，使用@uiw/react-md-editor库
+
+[访问地址](../..)
+
+### 页面2-查看以前的问题页面
+
+
+### 页面3-查看所有的问题页面
+
+### 页面4-AI添加问题
--- a/frontend/src/layouts/blank.astro
+++ b/frontend/src/layouts/blank.astro
@@ -0,0 +1,47 @@
+---
+import '../styles/global.css';
+import '../styles/theme.css';
+export interface Props {
+  title?: string;
+  description?: string;
+  lang?: string;
+  charset?: string;
+}
+
+const { title = 'Light Code', description = 'A lightweight code editor', lang = 'zh-CN', charset = 'UTF-8' } = Astro.props;
+---
+
+<!doctype html>
+<html lang={lang}>
+  <head>
+    <meta charset={charset} />
+    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+    <meta name='description' content={description} />
+    <title>{title}</title>
+    <!-- 样式 -->
+    <slot name='head' />
+  </head>
+  <body>
+    <slot />
+
+    <!-- 脚本 -->
+    <slot name='scripts' />
+  </body>
+</html>
+
+<style>
+  html {
+    font-family: system-ui, sans-serif;
+  }
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+</style>
--- a/frontend/src/layouts/mdx.astro
+++ b/frontend/src/layouts/mdx.astro
@@ -0,0 +1,62 @@
+---
+export interface Props {
+  children: any;
+}
+import '../styles/global.css';
+import '../styles/theme.css';
+import 'github-markdown-css/github-markdown-light.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;
+---
+
+<html lang='zh-CN'>
+  <head>
+    <meta charset='UTF-8' />
+    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+    <title>Docs</title>
+    <link
+      rel='stylesheet'
+      href='https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown-light.min.css'
+      integrity='sha512-X175XRJAO6PHAUi8AA7GP8uUF5Wiv+w9bOi64i02CHKDQBsO1yy0jLSKaUKg/NhRCDYBmOLQCfKaTaXiyZlLrw=='
+      crossorigin='anonymous'
+      referrerpolicy='no-referrer'
+    />
+    <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+      body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <slot name='header' />
+    </div>
+    <main class='p-2 flex-1 overflow-hidden'>
+      <div class='markdown-body h-full scrollbar border-gray-200 overflow-auto px-6 py-2 w-[800px] border my-4 rounded-md shadow-md'>
+        <slot />
+      </div>
+    </main>
+    <footer>
+      <slot name='footer'>
+        <p>Copyrignt &copy; 2025</p>
+      </slot>
+    </footer>
+  </body>
+</html>
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/frontend/src/modules/basename.ts
+++ b/frontend/src/modules/basename.ts
@@ -0,0 +1,4 @@
+// @ts-ignore
+export const basename = BASE_NAME;
+
+console.log(basename);
--- a/frontend/src/modules/query.ts
+++ b/frontend/src/modules/query.ts
@@ -0,0 +1,5 @@
+import { Query } from '@kevisual/query'
+
+export const query = new Query({
+  url: '/client/router'
+});
--- a/frontend/src/pages/daily.astro
+++ b/frontend/src/pages/daily.astro
@@ -0,0 +1,10 @@
+---
+import { AppProvider } from '@/apps/daily';
+import Html from '@/components/html.astro';
+---
+
+<Html>
+  <main>
+    <AppProvider client:only />
+  </main>
+</Html>
--- a/frontend/src/pages/demos/base.astro
+++ b/frontend/src/pages/demos/base.astro
@@ -0,0 +1,9 @@
+---
+import Html from '@/components/html.astro';
+---
+
+<Html>
+  <main>
+   
+  </main>
+</Html>
--- a/frontend/src/pages/docs/[...id].astro
+++ b/frontend/src/pages/docs/[...id].astro
@@ -0,0 +1,23 @@
+---
+import { getCollection, render } from 'astro:content';
+import Main from '@/layouts/mdx.astro';
+// 1. 为每个集合条目生成一个新路径
+export async function getStaticPaths() {
+  const posts = await getCollection('docs');
+  return posts.map((post) => ({
+    params: { id: post.id },
+    props: { post },  
+  }));
+}
+type Post = {
+  data: { title: string };
+};
+// 2. 对于你的模板，你可以直接从 prop 获取条目
+const { post } = Astro.props as { post: Post };
+const { Content } = await render(post);
+---
+
+<Main>
+  <!-- <h1 slot={'header'}>{post.data.title}</h1> -->
+  <Content />
+</Main>
--- a/frontend/src/pages/docs/index.astro
+++ b/frontend/src/pages/docs/index.astro
@@ -0,0 +1,83 @@
+---
+import { getCollection } from 'astro:content';
+const posts = await getCollection('docs');
+console.log('post', posts);
+import { basename } 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 || [];
+            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={`${basename}/docs/${post.id}`} 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={`${basename}/docs/${post.id}`}
+                    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/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -0,0 +1,10 @@
+---
+import { AppProvider } from '@/apps/today';
+import Html from '@/components/html.astro';
+---
+
+<Html title="Daily" description="Daily Question App">
+  <main>
+    <AppProvider client:only />
+  </main>
+</Html>
--- a/frontend/src/pages/library.astro
+++ b/frontend/src/pages/library.astro
@@ -0,0 +1,10 @@
+---
+import { AppProvider } from '@/apps/library';
+import Html from '@/components/html.astro';
+---
+
+<Html title='Library' description='Library App'>
+  <main>
+    <AppProvider client:only />
+  </main>
+</Html>
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -0,0 +1,120 @@
+@import 'tailwindcss';
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -0,0 +1,98 @@
+@import 'tailwindcss';
+
+@theme {
+  /* --color-primary: #ffc107;
+  --color-secondary: #ffa000;
+  --color-text-primary: #000000;
+  --color-text-secondary: #000000;
+  --color-success: #28a745; */
+
+  --color-scrollbar-thumb: #999999;
+  --color-scrollbar-track: rgba(0, 0, 0, 0.1);
+  --color-scrollbar-thumb-hover: #666666;
+  --scrollbar-color: #ffc107;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+}
+
+/* font-family */
+@utility font-family-mon {
+  font-family: 'Montserrat', sans-serif;
+}
+
+@utility font-family-rob {
+  font-family: 'Roboto', sans-serif;
+}
+
+@utility font-family-int {
+  font-family: 'Inter', sans-serif;
+}
+
+@utility font-family-orb {
+  font-family: 'Orbitron', sans-serif;
+}
+
+@utility font-family-din {
+  font-family: 'DIN', sans-serif;
+}
+
+@utility flex-row-center {
+  @apply flex flex-row items-center justify-center;
+}
+
+@utility flex-col-center {
+  @apply flex flex-col items-center justify-center;
+}
+
+@utility scrollbar {
+  overflow: auto;
+
+  /* 整个滚动条 */
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--color-scrollbar-track);
+  }
+
+  /* 滚动条有滑块的轨道部分 */
+  &::-webkit-scrollbar-track-piece {
+    background-color: transparent;
+    border-radius: 1px;
+  }
+
+  /* 滚动条滑块(竖向:vertical 横向:horizontal) */
+  &::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    background-color: var(--color-scrollbar-thumb);
+    border-radius: 5px;
+  }
+
+  /* 滚动条滑块hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-scrollbar-thumb-hover);
+  }
+
+  /* 同时有垂直和水平滚动条时交汇的部分 */
+  &::-webkit-scrollbar-corner {
+    display: block;
+    /* 修复交汇时出现的白块 */
+  }
+}
+
+ul,
+menu {
+  list-style: disc;
+}
+
+ol {
+  list-style: decimal;
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@kevisual/types/json/frontend.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+  },
+  "include": [
+    "src/**/*",
+  ],
+}