build: init

2024-10-14 18:51:44 +08:00
commit 6f6f976d24
70 changed files with 13878 additions and 0 deletions
--- a/template/README.md
+++ b/template/README.md
@@ -0,0 +1,109 @@
+# TOCO Project
+
+## 开发
+
+- install
+
+    ```shell
+    yarn install
+    ```
+
+- dev
+
+    ```shell
+    yarn start
+    ```
+
+- build
+
+    ```shell
+    yarn build
+    ```
+  
+## 路由和菜单
+
+本工程采用配置化自动生成路由和菜单方案，在 `pages` 下的单个页面目录中配置 `meta.json` 文件，即可生成路由和菜单，具体配置如下：
+
+```ts
+interface Meta {
+  displayName?: string; // 展示在菜单上的名字
+  icon?: string; // 展示在菜单上的图标
+  headMenu?: // 是否展示在头部菜单 或 所属头部菜单的名字
+          | boolean
+          | {
+    key: string;
+    label: string;
+    icon?: string;
+  };
+  sideMenu?: // 是否展示在侧边菜单 或 所属侧边菜单的名字
+          | boolean
+          | {
+    key: string;
+    label: string;
+    icon?: string;
+  };
+  order?: number; // 菜单排列序号，数字越小越靠前
+}
+```
+
+其中 `headMenu`、`sideMenu` 为 `true` 时，表示该页面是一个菜单页面，即点击对应 `displayName` 后直接跳转到该页面，参考 `demo` 页面。
+如果 `headMenu`、`sideMenu` 是对象，则表示的是该页面 **所属** 的非页面菜单组，参考 `test` 页面。
+
+## 常用方法和全局变量
+
+在每个页面内，可以使用以下常用方法和全局变量：
+
+  ```
+  navigate：页面跳转方法，用法：navigate('/path')
+  props：页面 props
+  tocoStore：全局 store
+  tocoServices：页面的请求
+  tocoRefs：页面上所有带 id 组件的 refs
+  ```
+
+## 目录结构
+
+
+    ```shell
+    src
+    ├── App.tsx # 路由逻辑，一般不需要修改
+    ├── app # store 主逻辑
+    │   └── store.ts # 如果写了新的 store，需要在这里引入
+    ├── components # 组件放这里
+    ├── config # 可以放一些常量、配置
+    │   └── index.ts
+    ├── enum # 枚举值定义
+    │   └── index.ts
+    ├── global.d.ts
+    ├── index.tsx
+    ├── langs # 国际化配置
+    │   ├── en_US.ts
+    │   ├── index.ts
+    │   └── zh_CN.ts
+    ├── layout # 布局
+    │   ├── HeaderAndFooter
+    │   ├── HeaderAndSider
+    │   └── index.tsx # 可以在这里切换布局方案
+    ├── pages # 页面放这里
+    │   ├── demo # 一个页面一个文件夹
+    │   │   ├── Demo.module.css # 页面样式
+    │   │   ├── Demo.tsx # 页面逻辑
+    │   │   ├── demoAPI.ts # 页面请求
+    │   │   ├── demoSlice.ts # 页面 store
+    │   │   └── meta.json # 页面元数据，用于生成路由和菜单，没有这个文件视为普通组件
+    │   └── test
+    ├── react-app-env.d.ts
+    ├── reportWebVitals.ts
+    ├── setupProxy.js
+    ├── setupTests.ts
+    ├── style # 全局样式
+    │   ├── index.css
+    │   └── reset.css
+    ├── themes # 主题配置
+    │   ├── CSSVariablesStyle.tsx # 用于定义css主题变量，不用修改
+    │   ├── dark.ts # 夜间主题
+    │   ├── default.ts # 日间主题
+    │   └── index.ts # 在这里定义自定义token，在主题文件内配置具体值
+    └── utils # 帮助函数放这里
+    ```
+