feat: 准备 GitHub 模板仓库

README.md

@@ -1,54 +1,102 @@
-# React + TypeScript + Vite
+# React Vite Template
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+一个基于 React 19、TypeScript、Vite、React Router 和 Tailwind CSS 的前端项目模板。
 
-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
+- React 19 + TypeScript
+- Vite 6 开发与构建
+- React Router 7 路由管理
+- 路由页面懒加载
+- Tailwind CSS 4
+- Biome 代码格式化与检查
+- Husky + lint-staged 提交前检查
+- `@` 指向 `src` 的路径别名
+- 组件分层：通用组件、业务组件、页面组件
 
-## Expanding the ESLint configuration
+## 使用模板
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+### 通过 GitHub 页面创建
 
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+1. 打开模板仓库页面
+2. 点击 **Use this template**
+3. 创建自己的新仓库
+4. 克隆新仓库并安装依赖
+
+```bash
+git clone https://github.com/your-name/your-app.git
+cd your-app
+bun install
+bun dev
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+### 通过 GitHub CLI 创建
 
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
+```bash
+gh repo create my-react-app --template your-name/react-vite-template --public
+cd my-react-app
+bun install
+bun dev
 ```
+
+创建项目后，建议修改 [package.json](package.json) 中的 `name` 字段。
+
+## 开发命令
+
+```bash
+bun dev        # 启动开发服务器
+bun build      # 类型检查并构建生产版本
+bun preview    # 预览生产构建
+bun lint       # 代码检查
+bun lint:fix   # 自动修复代码问题
+```
+
+## 目录结构
+
+```text
+src/
+├── api/          # API 请求相关代码
+├── assets/       # 项目资源
+├── components/   # 组件
+│   ├── business/ # 业务组件
+│   └── common/   # 通用组件
+├── hooks/        # 自定义 Hooks
+├── pages/        # 页面组件
+├── router/       # 路由配置
+├── styles/       # 全局样式
+├── types/        # TypeScript 类型
+└── utils/        # 工具函数
+```
+
+## 路由懒加载
+
+模板内置了 `lazyRoute` 工具函数，新页面可以这样配置：
+
+```tsx
+{
+  path: "about",
+  lazy: lazyRoute(() => import("../pages/About/About")),
+}
+```
+
+页面组件使用默认导出：
+
+```tsx
+export default function About() {
+  return <div>About</div>;
+}
+```
+
+## 发布为 GitHub 模板仓库
+
+如果你要把这个项目作为模板发布：
+
+1. 推送到 GitHub
+2. 进入仓库 **Settings**
+3. 勾选 **Template repository**
+
+之后其他人就可以通过 **Use this template** 使用它。
+
+## License
+
+MIT