初始化项目

1 year ago · 6177c7cd10
commit 6177c7cd10
50 changed files with 5567 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,13 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+tab_width = 2
+
+[*md]
+trim_trailing_whitespace = false
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,2 @@
+node_modules
+dist
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,13 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2020: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,9 @@
+dist
+.DS_Store
+node_modules
+TODOs.md
+*.log
+*.local
+.idea
+!.vscode/extensions.json
+.vscode
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1,11 @@
+# 设置源 为淘宝源
+# registry =https://registry.npm.taobao.org
+
+# 默认情况下，PNPM创建了一个半模型，依赖关系可以访问未删除的依赖项，
+# 但在node_modules之外的模块不会。 使用此布局，生态系统中的大多数包都没有问题。
+# 但是，如果某些工具仅在Node_Modules的根目录中工作时，您可以将其设置为true以为您提升。
+# shamefully-hoist=true
+
+# 结合根目录的 package.json 中的 engines 字段，
+# 我们可以指定运行的 node 版本和 pnpm 版本。
+engine-strict=true
--- a/example/.eslintrc.cjs
+++ b/example/.eslintrc.cjs
@ -0,0 +1,23 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    // 'react-refresh/only-export-components': [
+    //   'warn',
+    //   { allowConstantExport: true },
+    // ],
+    "react-hooks/exhaustive-deps": [
+      "warn", {
+        "additionalHooks": "useRecoilCallback"
+      }
+    ],
+  },
+}
--- a/example/README.md
+++ b/example/README.md
@ -0,0 +1,27 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+   },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
--- a/example/index.html
+++ b/example/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-Hans">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>后台脚手架</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/example/package.json
+++ b/example/package.json
@ -0,0 +1,41 @@
+{
+  "name": "@doad/example",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "license": "MIT",
+  "description": "a Vite4 + Typescript + React + Antd + Less + Eslint + Prettier template",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "engines": {
+    "node": ">=14",
+    "pnpm": ">=7"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.1.4",
+    "antd": "^5.7.2",
+    "dayjs": "^1.11.9",
+    "default-passive-events": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.2",
+    "recoil": "^0.7.7",
+    "@doad/doad": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^20.4.4",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}
--- a/example/src/components/layouts/AdminLayout.tsx
+++ b/example/src/components/layouts/AdminLayout.tsx
@ -0,0 +1,15 @@
+import {FC} from "react";
+import {DoadRoot} from "@doad/doad";
+import {Outlet} from "react-router-dom";
+
+const AdminLayout: FC = () => {
+  return (
+    <DoadRoot search>
+      <Outlet/>
+    </DoadRoot>
+  )
+}
+
+AdminLayout.displayName = 'AdminLayout'
+
+export default AdminLayout
--- a/example/src/components/layouts/ErrorPage.tsx
+++ b/example/src/components/layouts/ErrorPage.tsx
@ -0,0 +1,50 @@
+import {ExceptionStatusType} from "antd/es/result";
+import {FC} from "react";
+import {useNavigate, useRouteError} from "react-router-dom";
+import {Button, Card, Layout, Result} from "antd";
+import {DoadGeneralLayout, DoadHead, doadHeaderStyle, doadLayoutStyles} from "@doad/doad";
+
+const errors: Record<ExceptionStatusType, string> = {
+  403: '您没有权限访问当前页面',
+  404: '您访问的页面不存在',
+  500: '程序出错了',
+}
+
+export interface RouteError {
+  status?: ExceptionStatusType
+  statusText?: string
+  message?: string
+}
+
+const ErrorPage: FC = () => {
+  const error = useRouteError() as RouteError;
+  const navigate = useNavigate()
+
+  return (
+    <Layout style={{backgroundColor: 'transparent'}}>
+      <Layout.Header style={doadHeaderStyle}>
+        <DoadHead search />
+      </Layout.Header>
+      <Layout.Content>
+        <DoadGeneralLayout>
+          <Card style={{...doadLayoutStyles, textAlign: 'center'}}>
+            <Result
+              status={error.status ?? 500}
+              subTitle={errors[error.status!] ?? (error.statusText || error.message)}
+              extra={
+                <>
+                  <Button onClick={() => navigate(-1)}>上一页</Button>
+                  <Button type="primary" onClick={() => navigate('/')}>返回首页</Button>
+                </>
+              }
+            />
+          </Card>
+        </DoadGeneralLayout>
+      </Layout.Content>
+    </Layout>
+  )
+}
+
+ErrorPage.displayName = 'ErrorPage'
+
+export default ErrorPage
--- a/example/src/index.css
+++ b/example/src/index.css
@ -0,0 +1,24 @@
+html,
+body {
+  width: 100%;
+  min-height: 100vh;
+}
+
+html {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+  margin: 0;
+  min-width: 1200px;
+  /*background: #f8f9fb;*/
+  /*background: #f5f8ff;*/
+  background: #f1f1f1;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
--- a/example/src/main.tsx
+++ b/example/src/main.tsx
@ -0,0 +1,120 @@
+import { FC, ReactNode, StrictMode, useEffect } from 'react'
+import ReactDOM from 'react-dom/client'
+import dayjs from 'dayjs';
+import { RecoilRoot } from 'recoil';
+import { RouterProvider } from 'react-router-dom';
+import router from './routes/test.tsx';
+import {
+  AppstoreFilled,
+  CodeFilled,
+  CompassFilled,
+  FireFilled,
+  HomeFilled,
+  NotificationFilled,
+  PieChartFilled,
+  SettingFilled,
+  TrophyFilled
+} from "@ant-design/icons";
+import { App } from 'antd'
+
+import {DoadMenuItem, useDoadMenuItemsSetter} from "@doad/doad";
+
+// 关于 Added non-passive event listener to a scroll-blocking ‘wheel’ event. Consider marking event handler as 'passive'
+// to make the page more responsive. 的新解决方案
+import 'default-passive-events'
+import 'dayjs/locale/zh-cn';
+import './index.css'
+
+dayjs.locale('zh-cn');
+
+let itemKey = 0
+
+function getItem(
+  title: ReactNode,
+  icon?: ReactNode,
+  children?: DoadMenuItem[],
+  path?: string
+): DoadMenuItem {
+  let handle: DoadMenuItem['handle']
+  if (path == null) {
+    handle = (_, navigate) => navigate("/abc")
+  }
+  return {
+    key: `${++itemKey}`,
+    title,
+    icon,
+    path,
+    handle,
+    children,
+  }
+}
+
+const items: DoadMenuItem[] = [
+  getItem("首页", <HomeFilled/>, [
+    getItem('工作台', null, [], "/about"),
+  ]),
+  getItem('管理', <CompassFilled/>, [
+    getItem('版本管理'),
+    getItem('成员管理'),
+    getItem('用户反馈'),
+    getItem('付费管理'),
+  ]),
+  getItem("统计", <PieChartFilled/>),
+  getItem('功能', <AppstoreFilled/>, [
+    getItem('附近的小程序'),
+    getItem('微信搜一搜'),
+    getItem('微信支付'),
+    getItem('购物订单'),
+    getItem('交易保障'),
+    getItem('体验评价'),
+    getItem('购物订单'),
+    getItem('物流服务'),
+    getItem('硬件设备'),
+    getItem('客服'),
+    getItem('订阅消息'),
+    getItem('页面内容接入'),
+    getItem('小程序插件'),
+    getItem('交易组件'),
+    getItem('实验工具'),
+  ]),
+
+  getItem('开发', <CodeFilled/>, [
+    getItem('开发管理'),
+    getItem('开发工具'),
+    getItem('云服务'),
+  ]),
+
+  getItem('成长', <TrophyFilled/>, [
+    getItem('小程序评测'),
+    getItem('违规记录'),
+  ]),
+
+  getItem('推广', <NotificationFilled/>, [
+    getItem('流量主'),
+    getItem('广告主'),
+  ]),
+
+  getItem('第三方服务', <FireFilled/>, [
+    getItem('服务'),
+  ]),
+
+  getItem('设置', <SettingFilled/>),
+];
+
+const Application: FC = () => {
+  const setMenus = useDoadMenuItemsSetter()
+  useEffect(() => setMenus(items))
+  return (
+    <App>
+      <RouterProvider router={router} />
+    </App>
+  )
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <RecoilRoot>
+      <Application />
+    </RecoilRoot>
+  </StrictMode>,
+)
--- a/example/src/routes/test.tsx
+++ b/example/src/routes/test.tsx
@ -0,0 +1,50 @@
+import {Card} from "antd";
+import {createBrowserRouter} from "react-router-dom";
+import {DoadLazy, DoadTabbedLayout, DoadTabbedLayoutProps} from "@doad/doad";
+import AdminLayout from "@/components/layouts/AdminLayout";
+import ErrorPage from "@/components/layouts/ErrorPage";
+
+const getTabItem = (label: string, key: string) => {
+  return {
+    key,
+    label,
+    render: () => <DoadLazy>{() => {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve({
+            default: () => <Card>{label}</Card>
+          })
+        }, 2000)
+      })
+    }}</DoadLazy>,
+  }
+}
+
+const tabsItems: DoadTabbedLayoutProps['items'] = [
+  getTabItem('功能异常', '1'),
+  getTabItem('产品建议', '2'),
+  getTabItem('监控告警', '3'),
+  getTabItem('垃圾箱', '4'),
+];
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <AdminLayout/>,
+    errorElement: <ErrorPage/>,
+    children: [
+      {
+        path: "about",
+        element: (
+          <DoadTabbedLayout
+            title="用户反馈"
+            items={tabsItems}
+            activeKey="1"
+          />
+        )
+      },
+    ]
+  }
+])
+
+export default router
--- a/example/src/services/api.d.ts
+++ b/example/src/services/api.d.ts
@ -0,0 +1,50 @@
+declare namespace API {
+  /** 请求参数结构 */
+  type Request<
+    Query = Record<string, unknown> | string,
+    Body = unknown,
+    Files = Record<string, Blob | File | string>
+  > = {
+    /** 请求的目标地址 */
+    url: string
+    /** HTTP 请求方法，我们可以按照下面列举的方式理解其用法和意义:
+     *
+     * - GET（SELECT）：从服务器取出资源（一项或多项）。
+     * - POST（CREATE）：在服务器新建一个资源。
+     * - PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
+     * - PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。
+     * - DELETE（DELETE）：从服务器删除资源。 */
+    method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'
+    /** 搜索参数，对应 URL 的 QueryString 部分，用于对返回结构的过滤，
+     * 比如分页参数、排序字段、排序方式及其它。*/
+    query?: Query
+    /** 请求体数据 */
+    body?: Body
+    /** 上传的文件 */
+    files?: Files
+  }
+
+  /** 响应数据结构 */
+  type Response<T = unknown> = {
+    /** 业务上的请求是否成功 */
+    success: boolean
+    /** 业务约定的错误码 */
+    code: string
+    /** 业务上的错误信息 */
+    message?: string
+    /** 业务数据 */
+    data?: T
+  }
+
+  /** 分页数据结构 */
+  type Pagination<T = unknown> = {
+    /** 数据总数 */
+    total: number
+    /** 当前页码 */
+    page: number
+    /** 页面数据容量 */
+    per_page: number
+    /** 数据列表 */
+    list: T[]
+  }
+}
--- a/example/src/vite-env.d.ts
+++ b/example/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/example/tsconfig.node.json
+++ b/example/tsconfig.node.json
@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/example/vite.config.ts
+++ b/example/vite.config.ts
@ -0,0 +1,13 @@
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: [
+      {find: '@', replacement: resolve(__dirname, "src")}
+    ]
+  }
+})
--- a/package.json
+++ b/package.json
@ -0,0 +1,34 @@
+{
+  "private": true,
+  "version": "1.0.0",
+  "packageManager": "pnpm@8.6.2",
+  "type": "module",
+  "scripts": {
+    "check": "tsc --incremental --noEmit",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "engines": {
+    "node": ">=16.11.0"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged && pnpm check",
+    "commit-msg": "node scripts/verifyCommit.js"
+  },
+  "lint-staged": {
+    "*.{json,ts?(x)}": [
+      "eslint --fix"
+    ]
+  },
+  "devDependencies": {
+    "@types/node": "^20.4.4",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "chalk": "^5.3.0",
+    "eslint": "^8.45.0",
+    "lint-staged": "^13.2.3",
+    "simple-git-hooks": "^2.9.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vitest": "^0.33.0"
+  }
+}
--- a/packages/doad/.eslintrc.cjs
+++ b/packages/doad/.eslintrc.cjs
@ -0,0 +1,22 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    "react-hooks/exhaustive-deps": [
+      "warn", {
+        "additionalHooks": "useRecoilCallback"
+      }
+    ],
+  },
+}
--- a/packages/doad/package.json
+++ b/packages/doad/package.json
@ -0,0 +1,41 @@
+{
+  "name": "@doad/doad",
+  "version": "0.0.1",
+  "type": "module",
+  "license": "MIT",
+  "description": "Dashboard of ant design",
+  "main": "src/index.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "engines": {
+    "node": ">=14",
+    "pnpm": ">=7"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.1.4",
+    "antd": "^5.7.2",
+    "dayjs": "^1.11.9",
+    "default-passive-events": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.2",
+    "recoil": "^0.7.7"
+  },
+  "devDependencies": {
+    "@types/node": "^20.4.4",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}
--- a/packages/doad/src/components/access.tsx
+++ b/packages/doad/src/components/access.tsx
@ -0,0 +1,123 @@
+import {ComponentClass, FunctionComponent} from "react";
+import {useDoadPermissionValue} from "../state";
+import {getDisplayName, toArray} from "../utils";
+import {Link} from "react-router-dom";
+import {
+  Alert,
+  AutoComplete,
+  Avatar,
+  Badge,
+  Button,
+  Calendar,
+  Card,
+  Carousel,
+  Cascader,
+  Checkbox,
+  Collapse,
+  ColorPicker,
+  DatePicker,
+  Descriptions,
+  Drawer,
+  Dropdown,
+  FloatButton,
+  Form,
+  Image,
+  Input,
+  InputNumber,
+  List,
+  Mentions,
+  Modal,
+  Popconfirm,
+  Popover,
+  Progress,
+  QRCode,
+  Radio,
+  Rate,
+  Segmented,
+  Select,
+  Slider,
+  Statistic,
+  Switch,
+  Table,
+  Tabs,
+  Tag,
+  Timeline,
+  TimePicker,
+  Tooltip,
+  Tour,
+  Transfer,
+  Tree,
+  TreeSelect,
+  Upload
+} from "antd";
+
+export type AuthorityComponent<P> = FunctionComponent<P & {
+  permissions?: Array<string | number> | string | number
+}>
+
+export function withAuthority<P>(BaseComponent: FunctionComponent<P> | ComponentClass<P> | string): AuthorityComponent<P> {
+  return function (props) {
+    const permissions = useDoadPermissionValue()
+    const allows = toArray(props.permissions)
+    if (allows == null || permissions.some(x => allows.includes(x.key))) {
+      const attributes = {...props}
+      delete attributes.permissions
+      return <BaseComponent {...attributes} />
+    }
+    return null
+  }
+}
+
+function wrap<P>(BaseComponent: FunctionComponent<P> | ComponentClass<P> | string): AuthorityComponent<P>  {
+  const Comp = withAuthority<P>(BaseComponent)
+  Comp.displayName = `Doad${getDisplayName(BaseComponent)}`
+  return Comp
+}
+
+export const DoadLink = wrap(Link)
+export const DoadButton = wrap(Button)
+export const DoadDropdown = wrap(Dropdown)
+export const DoadAutoComplete = wrap(AutoComplete)
+export const DoadCascader = wrap(Cascader)
+export const DoadCheckbox = wrap(Checkbox)
+export const DoadColorPicker = wrap(ColorPicker)
+export const DoadDatePicker = wrap(DatePicker)
+export const DoadForm = wrap(Form)
+export const DoadInput = wrap(Input)
+export const DoadInputNumber = wrap(InputNumber)
+export const DoadMentions = wrap(Mentions)
+export const DoadRadio = wrap(Radio)
+export const DoadRate = wrap(Rate)
+export const DoadSelect = wrap(Select)
+export const DoadSlider = wrap(Slider)
+export const DoadSwitch = wrap(Switch)
+export const DoadTimePicker = wrap(TimePicker)
+export const DoadTransfer = wrap(Transfer)
+export const DoadTreeSelect = wrap(TreeSelect)
+export const DoadUpload = wrap(Upload)
+export const DoadAvatar = wrap(Avatar)
+export const DoadBadge = wrap(Badge)
+export const DoadCalendar = wrap(Calendar)
+export const DoadCard = wrap(Card)
+export const DoadCarousel = wrap(Carousel)
+export const DoadCollapse = wrap(Collapse)
+export const DoadDescriptions = wrap(Descriptions)
+export const DoadImage = wrap(Image)
+export const DoadList = wrap(List)
+export const DoadPopover = wrap(Popover)
+export const DoadQRCode = wrap(QRCode)
+export const DoadSegmented = wrap(Segmented)
+export const DoadStatistic = wrap(Statistic)
+export const DoadTable = wrap(Table)
+export const DoadTabs = wrap(Tabs)
+export const DoadTag = wrap(Tag)
+export const DoadTimeline = wrap(Timeline)
+export const DoadTooltip = wrap(Tooltip)
+export const DoadTour = wrap(Tour)
+export const DoadTree = wrap(Tree)
+export const DoadAlert = wrap(Alert)
+export const DoadDrawer = wrap(Drawer)
+export const DoadModal = wrap(Modal)
+export const DoadPopconfirm = wrap(Popconfirm)
+export const DoadProgress = wrap(Progress)
+export const DoadFloatButton = wrap(FloatButton)
--- a/packages/doad/src/components/head.tsx
+++ b/packages/doad/src/components/head.tsx
@ -0,0 +1,39 @@
+import {FC, ReactNode} from "react";
+import {DoadSearch, DoadSearchProps} from "./search";
+import {Avatar, Col, Row} from "antd";
+import {BellOutlined} from "@ant-design/icons";
+import {DoadLogo} from './logo'
+
+export interface DoadHeadProps {
+  search?: DoadSearchProps | boolean
+  logo?: ReactNode
+}
+
+export const DoadHead: FC<DoadHeadProps> = (props) => {
+  const searchProps = props.search === true ? {} : props.search
+  return (
+    <Row wrap={false} align='middle'>
+      <Col flex="187px" style={{
+        alignItems: 'center',
+        width: '100%',
+        justifyContent: 'start',
+        display: 'flex',
+        gap: '12px',
+        fontSize: '24px',
+      }}>
+        <DoadLogo element={props.logo}/>
+      </Col>
+      <Col flex="1px" style={{borderInlineEnd: '1px solid rgba(5, 5, 5, 0.06)', height: '22px'}}/>
+      <Col flex="none">
+        {searchProps && <DoadSearch {...searchProps} />}
+      </Col>
+      <Col flex="auto"/>
+      <Col flex="none" style={{display: "flex", alignItems: 'center', gap: '40px'}}>
+        <BellOutlined style={{fontSize: '22px', opacity: '0.65'}}/>
+        <Avatar src="https://wx.qlogo.cn/mmhead/Q3auHgzwzM7nCvm721MTlkPGQuLWEYYYkV6ibpDI9zcSlkBIbib2Emyw/0"/>
+      </Col>
+    </Row>
+  )
+}
+
+DoadHead.displayName = 'DoadHead'
--- a/packages/doad/src/components/layout.css
+++ b/packages/doad/src/components/layout.css
@ -0,0 +1,7 @@
+.acsRLTLine .ant-tabs-nav::before {
+  border-bottom-color: #e4e8eb;
+}
+
+.acsRLTLine .ant-tabs-nav .ant-tabs-ink-bar {
+  height: 3px;
+}
--- a/packages/doad/src/components/layout.tsx
+++ b/packages/doad/src/components/layout.tsx
@ -0,0 +1,87 @@
+import {CSSProperties, FC, ReactNode, useState} from "react";
+import {Tabs} from "antd";
+import {DoadTitle} from './title'
+import {mergeStyles} from "../utils";
+import './layout.css'
+
+export const doadLayoutStyles: CSSProperties = {
+  maxWidth: '1280px',
+  width: '85%',
+  margin: '40px auto',
+}
+
+export interface DoadGeneralLayoutProps {
+  title?: ReactNode
+  tailing?: ReactNode
+  style?: CSSProperties
+  children?: ReactNode
+}
+
+export const DoadGeneralLayout: FC<DoadGeneralLayoutProps> = (props) => {
+  return (
+    <div style={mergeStyles(doadLayoutStyles, props.style)}>
+      <DoadTitle title={props.title} tailing={props.tailing} />
+      {props.children}
+    </div>
+  )
+}
+
+DoadGeneralLayout.displayName = 'DoadGeneralLayout'
+
+export interface DoadTabbedLayoutTab {
+  key: string
+  label: string
+  disabled?: boolean
+  render?: (ready: boolean) => ReactNode
+}
+
+export interface DoadTabbedLayoutProps {
+  title?: ReactNode
+  titleTailing?: ReactNode
+  subtitle?: ReactNode
+  style?: CSSProperties
+  activeKey?: string,
+  lazy?: boolean
+  animated?: boolean
+  items: DoadTabbedLayoutTab[]
+}
+
+export const DoadTabbedLayout: FC<DoadTabbedLayoutProps> = (props) => {
+  const activeKey = props.activeKey ?? props.items[0]?.key ?? ''
+  const [rendered, setRendered] = useState<string[]>([activeKey])
+  const tabs = props.items.map((tab) => {
+    return {
+      key: tab.key,
+      label: <span style={{fontSize: '16px'}}>{tab.label}</span>,
+      disabled: tab.disabled,
+      children: tab.render?.(props.lazy ? rendered.includes(tab.key) : true),
+    }
+  })
+  const handleTabChange = (activeKey: string) => {
+    if (props.lazy && !rendered.includes(activeKey)) {
+      setRendered((keys) => [...keys, activeKey])
+    }
+  }
+
+  // fixme 为什么会被渲染2次
+
+  return (
+    <DoadGeneralLayout
+      title={props.title}
+      tailing={props.titleTailing}
+      style={props.style}
+    >
+      {props.subtitle}
+      <Tabs
+        defaultActiveKey={props.activeKey}
+        className="acsRLTLine"
+        items={tabs}
+        size={'small'}
+        animated={props.animated}
+        onChange={handleTabChange}
+      />
+    </DoadGeneralLayout>
+  )
+}
+
+DoadTabbedLayout.displayName = 'DoadTabbedLayout'
--- a/packages/doad/src/components/lazy.tsx
+++ b/packages/doad/src/components/lazy.tsx
@ -0,0 +1,29 @@
+import {FC, ReactNode, Suspense, createElement, ComponentType, lazy} from "react";
+import {Space, Spin} from "antd";
+
+export type LazyFactory<T> = () => Promise<{ default: T }>
+
+export interface DoadLazyProps {
+  children?: LazyFactory<ComponentType<unknown>>
+  loading?: ReactNode
+}
+
+const defaultLoading = (
+  <Space align="center" style={{lineHeight: 1, padding: '24px 0'}}>
+    <Spin size="small"/>
+    <span>加载中...</span>
+  </Space>
+)
+
+export const DoadLazy: FC<DoadLazyProps> = (props) => {
+  if (props.children == null) {
+    return null
+  }
+  return (
+    <Suspense fallback={props.loading ?? defaultLoading}>
+      {createElement(lazy(props.children))}
+    </Suspense>
+  )
+}
+
+DoadLazy.displayName = 'DoadLazy'
--- a/packages/doad/src/components/logo.tsx
+++ b/packages/doad/src/components/logo.tsx
@ -0,0 +1,36 @@
+import {CSSProperties, FC, ReactNode} from 'react';
+import {mergeStyles} from '../utils';
+
+export const doadLogoStyle: CSSProperties = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexWrap: 'nowrap',
+}
+
+export const defaultLogoElement = (
+  <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
+    <img
+      src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+      height="32"
+      width="32"
+      alt="logo"
+    />
+    <span>Ant Design</span>
+  </div>
+)
+
+export interface DoadLogoProps {
+  style?: CSSProperties
+  element?: ReactNode
+}
+
+export const DoadLogo: FC<DoadLogoProps> = (props) => {
+  return (
+    <div style={mergeStyles(doadLogoStyle, props.style)}>
+      {props.element ?? defaultLogoElement}
+    </div>
+  )
+}
+
+DoadLogo.displayName = 'DoadLogo'
--- a/packages/doad/src/components/menu.tsx
+++ b/packages/doad/src/components/menu.tsx
@ -0,0 +1,114 @@
+import {FC} from "react";
+import {useNavigate} from "react-router-dom";
+import {Menu, MenuProps, Space} from "antd";
+import { useDoadActiveMenuValue, useDoadMenuItemsValue } from "../state";
+import {DoadMenuItem} from "../types";
+
+export const doadMenuWidth = 228
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+function getMenuItem(items: DoadMenuItem[], key: string): DoadMenuItem | null {
+  for (const item of items) {
+    if (item.key === key) {
+      return item
+    }
+    if (item.children != null) {
+      const sub = getMenuItem(item.children, key)
+      if (sub != null) {
+        return sub
+      }
+    }
+  }
+  return null
+}
+
+function toRawMenuItems(items: DoadMenuItem[], deep = 0): MenuItem[] {
+  return items.reduce((list, item, i) => {
+    let label = item.title
+    if (deep === 0 && item.icon != null) {
+      label = (
+        <Space style={{color: 'rgba(0,0,0,.88)', fontSize: '18px', width: '100%'}} size='middle'>
+          <span style={{opacity: 0.6}}>{item.icon}</span>
+          <span>{item.title}</span>
+        </Space>
+      )
+    }
+    let type: 'group' | undefined
+    if (deep == 0) {
+      type = 'group'
+    }
+    let children: MenuItem[] | undefined
+    if (item.children?.length) {
+      children = toRawMenuItems(item.children, deep + 1)
+    } else if (deep == 0) {
+      children = toRawMenuItems([item], deep + 1)
+    }
+    if (deep == 0 && i !== items.length - 1) {
+      children ??= []
+      children.push( {
+        type: "divider",
+        style: {
+          width: '43%',
+          margin: '12px 0 12px 50px',
+        }
+      })
+    }
+
+    list.push({
+      key: item.key,
+      label,
+      type,
+      children,
+      style: {
+        padding: type ? "0 18px" : "0 18px 0 46px",
+        textAlign: "left",
+      }
+    })
+
+    return list
+  }, [] as MenuItem[])
+}
+
+export interface DoadMenuProps {
+  onClick?: (item: DoadMenuItem, handled: boolean) => void
+}
+
+export const DoadMenu: FC<DoadMenuProps> = (props) => {
+  const menuItems = useDoadMenuItemsValue()
+  const activeMenuKey = useDoadActiveMenuValue()
+  const navigate = useNavigate();
+
+  const handleClick: MenuProps['onClick'] = (e) => {
+    const item = getMenuItem(menuItems, e.key)
+    let handled = true
+    if (item?.handle != null) {
+      item.handle(item, navigate)
+    } else if (item?.path != null) {
+      navigate(item.path)
+    } else {
+      handled = false
+    }
+    if (item != null) {
+      props.onClick?.(item, handled)
+    }
+  }
+
+  return (
+    <Menu
+      selectedKeys={[activeMenuKey].filter(Boolean) as string[]}
+      style={{
+        width: doadMenuWidth,
+        margin: '40px 0',
+        userSelect: 'none',
+        backgroundColor: 'transparent',
+      }}
+      mode="inline"
+      inlineIndent={0}
+      items={toRawMenuItems(menuItems)}
+      onClick={handleClick}
+    />
+  )
+}
+
+DoadMenu.displayName = 'DoadMenu'
--- a/packages/doad/src/components/root.tsx
+++ b/packages/doad/src/components/root.tsx
@ -0,0 +1,48 @@
+import {CSSProperties, FC, ReactNode} from "react";
+import {Layout} from "antd";
+import {DoadSearchProps} from "./search";
+import {DoadMenu, DoadMenuProps, doadMenuWidth} from "./menu";
+import {DoadHead} from "./head";
+
+export const doadHeaderStyle: CSSProperties = {
+  position: 'sticky',
+  top: 0,
+  zIndex: 3,
+  textAlign: 'center',
+  height: 64,
+  paddingInline: 40,
+  lineHeight: '64px',
+  backgroundColor: '#ffffff',
+  boxShadow: '0 1px 2px rgba(150, 150, 150, 0.3)',
+}
+
+export interface DoadRootProps {
+  logo?: ReactNode
+  footer?: ReactNode
+  children?: ReactNode
+  search?: DoadSearchProps | boolean
+  onMenuClick?: DoadMenuProps['onClick']
+}
+
+export const DoadRoot: FC<DoadRootProps> = (props) => {
+  return (
+    <Layout style={{backgroundColor: 'transparent'}}>
+      <Layout.Header style={{...doadHeaderStyle}}>
+        <DoadHead search={props.search} logo={props.logo}/>
+      </Layout.Header>
+      <Layout style={{backgroundColor: 'transparent'}}>
+        <Layout.Sider style={{backgroundColor: 'transparent'}} width={doadMenuWidth}>
+          <DoadMenu onClick={props.onMenuClick}/>
+        </Layout.Sider>
+        <Layout.Content>
+          {props.children}
+        </Layout.Content>
+      </Layout>
+      {props.footer && <Layout.Footer>
+        {props.footer}
+      </Layout.Footer>}
+    </Layout>
+  )
+}
+
+DoadRoot.displayName = 'DoadRoot'
--- a/packages/doad/src/components/search.tsx
+++ b/packages/doad/src/components/search.tsx
@ -0,0 +1,36 @@
+import {CSSProperties, FC, ReactNode} from "react";
+import {Input} from "antd";
+import {SearchOutlined} from "@ant-design/icons";
+import {mergeStyles} from "../utils";
+
+export const doadSearchShortcutStyle: CSSProperties = {
+  color: '#ced4d9',
+  backgroundColor: 'rgba(150, 150, 150, 0.06)',
+  border: '1px solid rgba(100, 100, 100, 0.2)',
+  borderRadius: '4px',
+  padding: '4px 8px',
+  fontSize: '12px',
+  lineHeight: 1,
+}
+
+export interface DoadSearchProps {
+  placeholder?: string
+  shortcut?: ReactNode
+  bordered?: boolean
+  style?: CSSProperties
+  shortcutStyle?: CSSProperties
+}
+
+export const DoadSearch: FC<DoadSearchProps> = (props) => {
+  return (
+    <Input
+      style={props.style}
+      prefix={<SearchOutlined/>}
+      suffix={props.shortcut ?? <span style={mergeStyles(doadSearchShortcutStyle, props.shortcutStyle)}>Ctrl+K</span>}
+      placeholder={props.placeholder ?? '请输入关键字搜索'}
+      bordered={props.bordered ?? false}
+    />
+  )
+}
+
+DoadSearch.displayName = 'DoadSearch'
--- a/packages/doad/src/components/title.tsx
+++ b/packages/doad/src/components/title.tsx
@ -0,0 +1,47 @@
+import {FC, ReactNode} from "react";
+import {Col, Row} from "antd";
+
+export interface DoadTitleProps {
+  title?: ReactNode
+  tailing?: ReactNode
+}
+
+export const DoadTitle: FC<DoadTitleProps> = (props) => {
+  if (props.title == null) {
+    return null
+  }
+  if (props.tailing == null) {
+    return (
+      <h2 style={{
+        fontSize: '26px',
+        lineHeight: '36px',
+        marginBottom: '12px',
+        fontWeight: 400,
+        fontStyle: 'normal',
+      }}>{props.title}</h2>
+    )
+  }
+  return  (
+    <Row
+      style={{marginBottom: '12px'}}
+      justify="space-between"
+      align="middle"
+      gutter={36}
+      wrap={false}
+    >
+      <Col flex='none'>
+        <h2 style={{
+          fontSize: '26px',
+          lineHeight: '36px',
+          fontWeight: 400,
+          fontStyle: 'normal',
+        }}>{props.title}</h2>
+      </Col>
+      <Col flex='none'>
+        {props.tailing}
+      </Col>
+    </Row>
+  )
+}
+
+DoadTitle.displayName = 'DoadTitle'
--- a/packages/doad/src/index.ts
+++ b/packages/doad/src/index.ts
@ -0,0 +1,10 @@
+export * from './components/access'
+export * from './components/head'
+export * from './components/layout'
+export * from './components/lazy'
+export * from './components/logo'
+export * from './components/menu'
+export * from './components/root'
+export * from './components/search'
+export * from './state'
+export * from './types'
--- a/packages/doad/src/state.ts
+++ b/packages/doad/src/state.ts
@ -0,0 +1,59 @@
+import {
+  DefaultValue,
+  atom,
+  selector,
+  useRecoilState,
+  useRecoilValue,
+  useSetRecoilState
+} from "recoil";
+import {DoadProfile} from "./types";
+
+export const radProfile = atom<DoadProfile>({
+  key: 'acsProfile',
+  default: {
+    menuItems: [],
+    routes: [],
+    permissions: [],
+  }
+})
+
+function createSelector<K extends keyof DoadProfile>(
+  key: string,
+  field: K,
+  defValue?: () => DoadProfile[K],
+) {
+  return selector<DoadProfile[K]>({
+    key,
+    get({get}) {
+      return get(radProfile)[field]
+    },
+    set({set}, newValue) {
+      set(radProfile, v => ({
+        ...v,
+        [field]: newValue instanceof DefaultValue ? defValue?.() : newValue,
+      }))
+    },
+  })
+}
+
+const activeMenuKeyState = createSelector('doadActiveMenuKeyState', 'activeMenuKey')
+const menuItemsState = createSelector('doadMenuItemsState', 'menuItems', () => [])
+const userState = createSelector('doadUserState', 'user')
+const permissionsState = createSelector('doadPermissionsState', 'permissions', () => [])
+const routesState = createSelector('doadRoutesState', 'routes', () => [])
+
+export const useDoadActiveMenuState = () => useRecoilState(activeMenuKeyState)
+export const useDoadActiveMenuSetter = () => useSetRecoilState(activeMenuKeyState)
+export const useDoadActiveMenuValue = () => useRecoilValue(activeMenuKeyState)
+export const useDoadMenuItemsState = () => useRecoilState(menuItemsState)
+export const useDoadMenuItemsSetter = () => useSetRecoilState(menuItemsState)
+export const useDoadMenuItemsValue = () => useRecoilValue(menuItemsState)
+export const useDoadUserState = () => useRecoilState(userState)
+export const useDoadUserSetter = () => useSetRecoilState(userState)
+export const useDoadUserValue = () => useRecoilValue(userState)
+export const useDoadPermissionState = () => useRecoilState(permissionsState)
+export const useDoadPermissionSetter = () => useSetRecoilState(permissionsState)
+export const useDoadPermissionValue = () => useRecoilValue(permissionsState)
+export const useDoadRoutesState = () => useRecoilState(routesState)
+export const useDoadRoutesSetter = () => useSetRecoilState(routesState)
+export const useDoadRoutesValue = () => useRecoilValue(routesState)
--- a/packages/doad/src/types.ts
+++ b/packages/doad/src/types.ts
@ -0,0 +1,57 @@
+/** 布局菜单选项 */
+export interface DoadMenuItem {
+  /** 菜单唯一键 */
+  key: string
+  /** 菜单标题 */
+  title: import('react').ReactNode
+  /** 菜单图标 */
+  icon?: import('react').ReactNode
+  /** 菜单跳转路径 */
+  path?: string
+  /** 子菜单 */
+  children?: DoadMenuItem[]
+  /** 自定义点击函数，优先级高于 {@link DoadMenuItem.path} */
+  handle?: (item: DoadMenuItem, navigate: import('react-router-dom').NavigateFunction) => void
+  /** 其它自定义数据 */
+  [key: string]: unknown
+}
+
+/** 登录用户信息 */
+export interface DoadUser {
+  /** 用户昵称 */
+  nickname: string
+  /** 用户头像 */
+  avatar?: string
+  /** 其它自定义数据 */
+  [key: string]: unknown
+}
+
+/** 权限 */
+export interface DoadPermission {
+  /** 权限唯一键 */
+  key: string | number
+  /** 权限名称 */
+  title?: string
+  /** 其它自定义数据 */
+  [key: string]: unknown
+}
+
+
+/** 当前用户环境 */
+export interface DoadProfile {
+  /** 登录的用户信息 */
+  user?: DoadUser
+  /** 有效的菜单 */
+  menuItems: DoadMenuItem[]
+  /** 有效的路由 */
+  routes: string[]
+  /** 被允许的权限 */
+  permissions: DoadPermission[]
+  /** 当前菜单键 */
+  activeMenuKey?: string
+}
+
+export type DoadLayoutStatus =
+  | 'loading'
+  | 'success'
+  | 'error'
--- a/packages/doad/src/utils/array.ts
+++ b/packages/doad/src/utils/array.ts
@ -0,0 +1,12 @@
+import {ComponentType} from "react";
+
+export function toArray<T>(t: T | T[]): T[] | undefined {
+  if (t == null) return undefined
+  return Array.isArray(t) ? t : [t]
+}
+
+export function getDisplayName(Component: unknown) {
+  return (Component as ComponentType).displayName
+    || (Component as ComponentType).name
+    || 'Component'
+}
--- a/packages/doad/src/utils/css.ts
+++ b/packages/doad/src/utils/css.ts
@ -0,0 +1,11 @@
+import {CSSProperties} from "react";
+
+export const mergeStyles = (style: CSSProperties, ...others: Array<CSSProperties | undefined>): CSSProperties => {
+  let merged = {...style}
+  for (const other of others) {
+    if (other != null) {
+      merged = {...merged, ...other}
+    }
+  }
+  return merged
+}
--- a/packages/doad/src/utils/index.ts
+++ b/packages/doad/src/utils/index.ts
@ -0,0 +1,2 @@
+export * from './array'
+export * from './css'
--- a/packages/doad/tsconfig.json
+++ b/packages/doad/tsconfig.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/packages/doad/tsconfig.node.json
+++ b/packages/doad/tsconfig.node.json
@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/packages/mock/package.json
+++ b/packages/mock/package.json
@ -0,0 +1,7 @@
+{
+  "name": "@doad/mock",
+  "version": "1.0.0",
+  "dependencies": {
+    "path-to-regexp": "^6.2.1"
+  }
+}
--- a/packages/mock/src/mock.ts
+++ b/packages/mock/src/mock.ts
@ -0,0 +1,28 @@
+import {DefineOptions, MockMethod} from "./types";
+import {setMockData} from "./utils";
+
+export function defineMock(opts: DefineOptions) {
+  if (!(import.meta as any).env?.VITE_USE_MOCK) {
+    return
+  }
+  let items: MockMethod | Array<MockMethod> | undefined
+  if (typeof opts === 'function') {
+    items = opts()
+  } else if (Array.isArray(opts)) {
+    items = opts
+  } else if ('setup' in opts) {
+    if (opts.mock || opts.mock == null) {
+      items = opts.setup()
+    }
+  } else {
+    items = opts
+  }
+  if (!items) {
+    return
+  }
+  if (Array.isArray(items)) {
+    items.forEach(setMockData)
+  } else {
+    setMockData(items)
+  }
+}
--- a/packages/mock/src/types.ts
+++ b/packages/mock/src/types.ts
@ -0,0 +1,99 @@
+// import {Connect} from "vite";
+// import IncomingMessage = Connect.IncomingMessage;
+// import {ServerResponse} from "http";
+// import TypedArray = NodeJS.TypedArray;
+//
+// export type MockMethod =
+//   | 'get'
+//   | 'post'
+//   | 'put'
+//   | 'delete'
+//   | 'patch'
+//   | 'head'
+//   | 'options'
+//
+// export interface MockContext {
+//   params: Record<string, any> | null
+//   query: URLSearchParams
+//   body: () => Promise<Record<string, any> | null>
+//   headers?: Record<string, string>
+// }
+//
+// export interface ServerMockContext extends MockContext {
+//   request: IncomingMessage
+//   response: ServerResponse
+//   json: () => unknown
+//   text: () => string
+//   buffer: () => TypedArray
+// }
+//
+// export interface MockItem<T = unknown> {
+//   url: string
+//   method?: MockMethod
+//   timeout?: number
+//   statusCode?: number
+//   response?: (ctx: MockContext) => Promise<T> | T
+// }
+//
+// export type DefineFunction = () => MockItem | MockItem[]
+//
+// export interface DefineMockOptions {
+//   mock?: boolean,
+//   setup: DefineFunction
+// }
+//
+// export type DefineOptions =
+//   | DefineMockOptions
+//   | DefineFunction
+//   | MockItem
+//   | MockItem[]
+
+import { IncomingMessage, ServerResponse as RawServerResponse } from 'http'
+
+export type MethodType = 'get' | 'post' | 'put' | 'delete' | 'patch'
+
+export interface ServerResponse extends RawServerResponse {
+  text(): Promise<string>
+  json(): Promise<unknown>
+  buffer(): Promise<Uint8Array>
+}
+
+export interface MockContext {
+  /** 发起请求的路径 */
+  url: string
+  /** 发起请求的参数 */
+  method: string
+  /** 路径上面解析到的参数 */
+  params: Record<string, any> | null
+  /** 解析到的 QueryString 参数 */
+  query: URLSearchParams
+  /** 提交的报头 */
+  headers?: Record<string, string>
+  /** 提交的内容 */
+  body: () => Promise<Record<string, any> | string | null>
+  /** 请求结构，利用服务器端 mock 时有效 */
+  request?: IncomingMessage
+  /** 响应结构，利用服务器端 mock 时有效 */
+  response: ServerResponse
+}
+
+export interface MockMethod {
+  url: string
+  method?: MethodType | MethodType[]
+  timeout?: number
+  statusCode?: number
+  response: (ctx: MockContext) => unknown
+}
+
+export type DefineFunction = () => MockMethod | Array<MockMethod>
+
+export interface DefineMockOptions {
+  mock?: boolean,
+  setup: DefineFunction
+}
+
+export type DefineOptions =
+  | DefineMockOptions
+  | DefineFunction
+  | MockMethod
+  | Array<MockMethod>
--- a/packages/mock/src/utils.ts
+++ b/packages/mock/src/utils.ts
@ -0,0 +1,28 @@
+import { match, pathToRegexp } from 'path-to-regexp'
+import {MockContext, MockMethod} from "./types";
+
+interface MockItemNormalized<T = unknown> {
+  url: string
+  method: string
+  regex: RegExp
+  match: (path: string) => Record<string, unknown> | null
+  timeout?: number
+  statusCode?: number
+  response?: (ctx: MockContext) => T
+}
+
+const mockItems: MockItemNormalized[] = []
+
+export function setMockData(data: MockMethod) {
+  mockItems.push({
+    ...data,
+    method: ((data.method ?? 'get') as string).toUpperCase(),
+    regex: pathToRegexp(data.url),
+    match(path: string): Record<string, unknown> | null {
+      const urlMatch = match(data.url, { decode: decodeURIComponent })
+      const res = urlMatch(path)
+      if (!res) return null
+      return res.params as Record<string, unknown>
+    },
+  })
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@ -0,0 +1,3 @@
+packages:
+  - 'packages/*'
+  - 'example'
--- a/scripts/verifyCommit.mjs
+++ b/scripts/verifyCommit.mjs
@ -0,0 +1,27 @@
+// @ts-check
+import chalk from 'chalk'
+import {readFileSync} from 'node:fs'
+import path from 'node:path'
+
+const msgPath = path.resolve('.git/COMMIT_EDITMSG')
+const msg = readFileSync(msgPath, 'utf-8').trim()
+const commitRE =
+  /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/
+
+if (!commitRE.test(msg)) {
+  console.log()
+  console.error(
+    `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(
+      `invalid commit message format.`
+    )}\n\n` +
+    chalk.red(
+      `  Proper commit message format is required for automated changelog generation. Examples:\n\n`
+    ) +
+    `    ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
+    `    ${chalk.green(
+      `fix(v-model): handle events on blur (close #28)`
+    )}\n\n` +
+    chalk.red(`  See .github/commit-convention.md for more details.\n`)
+  )
+  process.exit(1)
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "rootDir": ".",
+    /* Linting */
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vitest.config.ts
+++ b/vitest.config.ts
@ -0,0 +1,12 @@
+import {defineConfig} from "vitest/config";
+
+export default defineConfig({
+  define: {
+    __DEV__: true,
+    __VERSION__: '"test"',
+  },
+  test: {
+    globals: true,
+    threads: !process.env.GITHUB_ACTIONS,
+  }
+})