132 lines
3.7 KiB
Markdown
132 lines
3.7 KiB
Markdown
# 小程序框架文档说明
|
||
|
||
## 📋 目录
|
||
|
||
- [项目结构](#项目结构)
|
||
- [不可修改目录](#不可修改目录)
|
||
- [可修改目录](#可修改目录)
|
||
- [使用组件的方式](#使用组件的方式)
|
||
|
||
---
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
mini-programs/
|
||
├── src/
|
||
│ ├── components/ # ⚠️ 不可修改（公共组件）
|
||
│ ├── utils/ # ✅ 可修改（工具函数）
|
||
│ ├── services/ # ✅ 可修改（API 服务）
|
||
│ ├── store/ # ✅ 可修改（状态管理）
|
||
│ ├── config/ # ✅ 可修改（配置文件）
|
||
│ ├── scss/ # ✅ 可修改（样式文件）
|
||
│ ├── static/ # ✅ 可修改（静态资源）
|
||
│ ├── container/ # ✅ 可修改（容器组件）
|
||
│ ├── context/ # ✅ 可修改（上下文）
|
||
│ ├── game_pages/ # ✅ 可修改（球局页面）
|
||
│ ├── home_pages/ # ✅ 可修改（首页）
|
||
│ ├── login_pages/ # ✅ 可修改（登录页面）
|
||
│ ├── main_pages/ # ✅ 可修改（主页面）
|
||
│ ├── order_pages/ # ✅ 可修改（订单页面）
|
||
│ ├── other_pages/ # ✅ 可修改（其他页面）
|
||
│ ├── publish_pages/ # ✅ 可修改（发布页面）
|
||
│ └── user_pages/ # ✅ 可修改（用户页面）
|
||
├── config/ # 构建配置
|
||
├── docs/ # 文档
|
||
└── types/ # 类型定义
|
||
```
|
||
|
||
---
|
||
|
||
## 不可修改目录
|
||
|
||
### ⚠️ `src/components/` - 公共组件目录
|
||
|
||
**该目录下的所有组件禁止直接修改**，包括：
|
||
|
||
- 所有组件文件夹（如 `ActivityTypeSwitch/`、`CommonPopup/` 等）
|
||
- `index.ts` - 组件统一导出文件
|
||
- `index.types.ts` - 组件类型定义文件
|
||
|
||
**如需定制功能，请通过以下方式：**
|
||
|
||
1. **通过 Props 配置**
|
||
```tsx
|
||
<CommonPopup visible={visible} title="自定义标题" />
|
||
```
|
||
|
||
2. **通过样式覆盖**
|
||
```scss
|
||
.custom-wrapper {
|
||
.nut-popup {
|
||
// 自定义样式
|
||
}
|
||
}
|
||
```
|
||
|
||
3. **创建业务组件封装**
|
||
```tsx
|
||
import { CommonPopup } from '@/components';
|
||
|
||
export const CustomPopup = (props) => {
|
||
return <CommonPopup {...props} customConfig={...} />;
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## 可修改目录
|
||
|
||
以下目录可以根据业务需求自由修改：
|
||
|
||
### 业务页面目录
|
||
- `src/game_pages/` - 球局相关页面
|
||
- `src/home_pages/` - 首页相关页面
|
||
- `src/login_pages/` - 登录相关页面
|
||
- `src/main_pages/` - 主页面
|
||
- `src/order_pages/` - 订单相关页面
|
||
- `src/other_pages/` - 其他页面
|
||
- `src/publish_pages/` - 发布相关页面
|
||
- `src/user_pages/` - 用户相关页面
|
||
|
||
### 公共资源目录（可修改）
|
||
- `src/utils/` - 工具函数
|
||
- `src/services/` - API 服务
|
||
- `src/store/` - 状态管理
|
||
- `src/config/` - 配置文件
|
||
- `src/scss/` - 样式文件
|
||
- `src/static/` - 静态资源
|
||
- `src/container/` - 容器组件
|
||
- `src/context/` - 上下文
|
||
|
||
---
|
||
|
||
## 使用组件的方式
|
||
|
||
### 导入组件
|
||
|
||
```tsx
|
||
// 从统一导出文件导入
|
||
import { CommonPopup, CommonDialog, ImageUpload } from '@/components';
|
||
```
|
||
|
||
### 常用组件列表
|
||
|
||
- `CommonPopup` - 通用弹窗
|
||
- `CommonDialog` - 通用对话框
|
||
- `ImageUpload` - 图片上传
|
||
- `FormSwitch` - 表单开关
|
||
- `TimeSelector` - 时间选择器
|
||
- `Range` - 范围选择
|
||
- `Comments` - 评论组件
|
||
- `EmptyState` - 空状态
|
||
- 更多组件请查看 `src/components/index.ts`
|
||
|
||
---
|
||
|
||
## 📝 注意事项
|
||
|
||
- ❌ **禁止**直接修改 `src/components/` 下的任何文件
|
||
- ✅ **允许**修改其他所有目录和文件
|
||
- ✅ 如需定制组件功能，请通过 Props、样式覆盖或封装新组件的方式实现
|