feat: 准备 GitHub 模板仓库

.npmignore

@@ -0,0 +1,27 @@
+# Dependencies
+node_modules
+bun.lock
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# Build outputs
+dist
+dist-ssr
+*.local
+
+# Logs
+logs
+*.log
+
+# OS
+.DS_Store
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
+
+# Temp
+*.tmp
+*.temp

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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
+- React 19 + TypeScript
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- 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
+1. 打开模板仓库页面
-export default tseslint.config({
+2. 点击 **Use this template**
-  extends: [
+3. 创建自己的新仓库
-    // Remove ...tseslint.configs.recommended and replace with this
+4. 克隆新仓库并安装依赖
-    ...tseslint.configs.recommendedTypeChecked,
+
-    // Alternatively, use this for stricter rules
+```bash
-    ...tseslint.configs.strictTypeChecked,
+git clone https://github.com/your-name/your-app.git
-    // Optionally, add this for stylistic rules
+cd your-app
-    ...tseslint.configs.stylisticTypeChecked,
+bun install
-  ],
+bun dev
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
 ```
 
-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
+```bash
-// eslint.config.js
+gh repo create my-react-app --template your-name/react-vite-template --public
-import reactX from 'eslint-plugin-react-x'
+cd my-react-app
-import reactDom from 'eslint-plugin-react-dom'
+bun install
-
+bun dev
-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,
-  },
-})
 ```
+
+创建项目后，建议修改 [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

index.html

@@ -3,8 +3,11 @@
   <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" />
+    <meta
-    <title>Vite + React + TS</title>
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
+    />
+    <title>React Vite App</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "eco-steps",
+	"name": "react-vite-template",
 	"private": true,
 	"version": "0.0.0",
 	"type": "module",

src/pages/About/About.tsx

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import { Button } from "@/components/common";
 
-export function About() {
+export default function About() {
 	return (
 		<div className="text-center">
 			<h1 className="mb-4 text-4xl font-bold">关于我们</h1>

src/pages/Home/Home.tsx

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import { Button } from "@/components/common";
 
-export function Home() {
+export default function Home() {
 	return (
 		<div className="text-center">
 			<h1 className="mb-4 text-4xl font-bold">首页</h1>

src/router/index.tsx

@@ -1,6 +1,6 @@
 import { createHashRouter } from "react-router-dom";
 import App from "../App.tsx";
-import { About, Home } from "../pages";
+import { lazyRoute } from "../utils";
 
 export const router = createHashRouter([
 	{
@@ -9,11 +9,11 @@ export const router = createHashRouter([
 		children: [
 			{
 				index: true,
-				element: <Home />,
+				lazy: lazyRoute(() => import("../pages/Home/Home")),
 			},
 			{
 				path: "about",
-				element: <About />,
+				lazy: lazyRoute(() => import("../pages/About/About")),
 			},
 		],
 	},

src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from "./assets";
+export * from "./lazyRoute";
 export * from "./tailwind";

src/utils/lazyRoute.ts

@@ -0,0 +1,8 @@
+import type { ComponentType } from "react";
+
+export function lazyRoute(loader: () => Promise<{ default: ComponentType }>) {
+	return async () => {
+		const module = await loader();
+		return { Component: module.default };
+	};
+}

vite.config.ts

@@ -10,4 +10,7 @@ export default defineConfig({
 			"@": fileURLToPath(new URL("./src", import.meta.url)),
 		},
 	},
+	server: {
+		host: true,
+	},
 });