# 小程序框架文档说明

## 📋 目录

- [项目结构](#项目结构)
- [不可修改目录](#不可修改目录)
- [可修改目录](#可修改目录)
- [使用组件的方式](#使用组件的方式)

---

## 项目结构

```
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、样式覆盖或封装新组件的方式实现