feat: update project structure and add new pages

- Changed the clone URL in README to point to the new webpack-taro-template. - Added 'mine' page to app configuration. - Enhanced index page styles and structure. - Created BottomNav component for navigation. - Added configuration and styles for the new 'mine' page. - Introduced navItems configuration for navigation. - Added AGENTS.md for project overview and development guidelines.
2026-03-12 18:11:00 +08:00
parent 7b760d20f3
commit 02dd31e85c
16 changed files with 480 additions and 1066 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,121 @@
+# AGENTS.md
+
+## 项目概述
+
+这是一个基于 **Taro 框架的多端小程序开发模板**项目。它提供了一个统一的开发框架，用于构建跨平台小程序，可以编译到微信、小红书、支付宝、百度、字节跳动、H5、React Native、QQ、京东等多个平台。
+
+## 技术栈
+
+- **框架**: Taro 4.1.11 (基于 React)
+- **语言**: TypeScript 5.9.3
+- **UI 框架**: React 18.3.1
+- **构建工具**: Webpack 5.105.4
+- **包管理器**: pnpm
+
+## 项目结构
+
+```
+taro-template/
+├── src/                      # 源代码目录
+│   ├── app.ts               # 应用入口组件
+│   ├── app.config.ts        # 应用全局配置
+│   ├── app.css              # 全局样式
+│   ├── index.html           # HTML 模板（用于 H5）
+│   ├── components/          # 公共组件
+│   │   └── BottomNav/       # 底部导航组件
+│   ├── pages/               # 页面组件
+│   │   ├── index/           # 首页
+│   │   │   ├── index.tsx    # 首页组件
+│   │   │   ├── index.config.ts
+│   │   │   └── index.css
+│   │   ├── mine/            # 我的页面
+│   │   │   ├── index.tsx
+│   │   │   ├── index.config.ts
+│   │   │   └── index.css
+│   │   └── xhs/             # 小红书平台特定工具
+│   │       └── utils/
+│   │           └── is-xhs.ts
+├── config/                  # 构建配置
+├── types/                   # TypeScript 类型定义
+├── project.xhs.json         # 小红书 IDE 配置
+├── project.config.json      # 微信 IDE 配置
+├── project.tt.json          # 字节跳动 IDE 配置
+├── tsconfig.json            # TypeScript 配置
+├── babel.config.js          # Babel 配置
+├── kevisual.json            # Kevisual 平台配置
+└── package.json             # 项目依赖
+```
+
+## 开发指南
+
+### 创建新页面
+
+使用 Taro CLI 创建新页面：
+
+```bash
+npm run new -- [pageName]
+```
+
+### 添加平台特定代码
+
+使用 `Taro.getEnv()` 检测当前平台：
+
+```typescript
+import Taro from "@tarojs/taro";
+
+const env = Taro.getEnv();
+if (env === Taro.ENV_TYPE.WEAPP) {
+  // 微信小程序特定代码
+} else if (env === "xhs") {
+  // 小红书特定代码
+}
+```
+
+或使用提供的工具函数：
+
+```typescript
+import { isXHS } from './pages/xhs/utils/is-xhs';
+
+if (isXHS()) {
+  // 小红书特定代码
+}
+```
+
+### 样式
+
+项目使用标准 CSS，页面样式与组件放在一起：
+
+- 全局样式: `src/app.css`
+- 页面样式: `src/pages/{page}/{page}.css`
+
+### 环境变量
+
+- `.env.development` - 开发环境
+- `.env.test` - 测试环境
+- `.env.production` - 生产环境
+
+## 配置文件说明
+
+### app.config.ts
+
+全局应用配置，包括页面注册、导航栏等。
+
+### app.ts
+
+应用入口组件，包含 `useLaunch` 生命周期钩子，用于应用初始化。在微信环境下会自动调用 `Taro.login`。
+
+### project.xhs.json
+
+小红书 IDE 特定配置（appid、编译设置等）。
+
+### tsconfig.json
+
+TypeScript 编译器选项，包括路径别名配置（`@/*` → `./src/*`）。
+
+## AI 代理注意事项
+
+1. 修改平台特定代码时，使用环境检测确保跨平台兼容性
+2. 避免使用浏览器专用 API，应使用 Taro 提供的统一 API
+3. 遵循现有的代码风格和目录结构
+4. 添加新依赖时，确保与所有目标平台兼容
+5. 项目使用 pnpm 作为包管理器