# WeChat Mini Program Configuration (.cursorrules)

## 1. Project Context (项目基础)
- **Framework**: Native WeChat Mini Program
- **UI Library**: Vant Weapp (`@vant/weapp`)
- **Styling**: WXSS (rpx)

## 2. Directory Structure (目录结构)
AI MUST follow this structure strictly:

- `pages/`: Main package pages (TabBar pages, Core features).
- `subpackages/`: Sub-features (Split based on modules, e.g., `module-a`).
- `components/`: Global reusable components.
- `behaviors/`: Reusable logic (Mixins).
- `api/`: API definition files (Network requests).
- `utils/`: Helper functions (`request.js`, `util.js`).
- `app.json`: Global configuration.

## 3. Coding Standards (编码规范)

### 3.1 WXML & WXSS
- **Layout**: Use Flexbox (`display: flex`) primarily.
- **Units**: Use `rpx` for responsive layout.
- **UI Components**: 
  - Prioritize Vant Weapp components (`<van-button>`, `<van-cell>`).
  - Use `wx:if` vs `hidden` correctly.
  - Use `wx:for` with `wx:key`.

### 3.2 JS / Logic
- **Lifecycle**: Use `onLoad` (init data), `onShow` (refresh status).
- **Data Binding**: Use `this.setData({})`. Minimize `setData` frequency/size for performance.
- **API**: 
  - ❌ DO NOT call `wx.request` directly in pages.
  - ✅ Import functions from `api/xxx.js`.
- **Events**: Use `bind:tap` instead of `bindtap` (best practice).

## 4. 🏗️ Scaffold Mode (骨架生成模式)
When user says **"Scaffold"** or **"生成骨架"**:

1.  **Config**: Add page path to `app.json` (main or subpackage).
2.  **API Skeleton**: Create `api/xxx.js` with empty functions.
3.  **Page Skeleton**: Create `.wxml`, `.wxss`, `.js`, `.json`.
    - **WXML**: Basic structure (e.g., `<view class="container">...</view>`).
    - **JS**: `Page({ data: {}, onLoad() {} })`.
    - **JSON**: Define `navigationBarTitleText` and `usingComponents`.

## 5. 🎨 Prototype Migration (原型迁移)
When migrating from HTML Prototype:
- `<div>` -> `<view>`
- `<span>` -> `<text>`
- `<img>` -> `<image>`
- `onclick` -> `bind:tap`
- CSS `px` -> `rpx` (Multiply by 2 usually)

第一步：初始化项目

npm init -y
npm i @vant/weapp -S --production

第二步：创建基础

请初始化项目基建：
1. 创建 `utils/request.js`。
   - 封装 wx.request。
   - BaseURL: `http://localhost:8080`。
   - 错误统一提示。
2. 在 `app.wxss` 中引入 Vant 的内置样式（如果有）或定义基础 flex 样式。

第三步：业务开发 

 Step 1：API 定义 (后端对接)

我要 开发报修模块。
后端接口：
- 提交报修: POST /api/repair/submit (参数: content, images, location)
- 报修列表: GET /api/repair/list

请在 `api/repair.js` 中定义这些接口函数。

 Step 2: 骨架生成

**任务**: 生成【模块名称，如：请假申请】的骨架代码。

**上下文**:
- 页面路径: `pages/【模块英文名】/index` (或 subpackages/...)
- 后端接口: 
  1. 【接口名1】: 【URL】 (参数: ...)
  2. 【接口名2】: 【URL】

**执行要求**:
1. **API**: 在 `api/【模块英文名】.js` 中定义上述接口函数。
2. **Config**: 将页面路径注册到 `app.json`。
3. **Page**: 创建 .wxml, .js, .json, .wxss 四个文件。
   - **JSON**: 设置标题为“【页面中文标题】”，并引入 Vant 组件: `van-button`, `van-field`, `van-cell`, `van-toast`【按需补充其他组件】。
   - **WXML**: 搭建基础结构，暂时只放标题或空状态。
   - **JS**: 初始化 `data` 和 `onLoad`，不写业务逻辑。

Step 3: UI 绘制 (基于 HTML 原型图)

**任务**: 将 HTML 原型迁移为小程序 UI。

**引用文件**: 
@【原型文件】.html  (拖入刚才生成的 HTML 原型文件)
@【页面路径】.wxml
@【页面路径】.json
@【页面路径】.wxss

**迁移目标**: `pages/【模块名】/index`

**执行要求**:
1. **结构迁移 (WXML)**:
   - 参考 @【原型文件】.html 的结构。
   - 将 HTML 标签转换为 **Vant Weapp** 组件：
     - `input` -> `<van-field>`
     - `div.card` -> `<van-cell-group inset>` 或自定义 View
     - `button` -> `<van-button>`
     - `img` -> `<van-image>`
   - 保持布局结构一致 (Flex/Grid)。

2. **样式迁移 (WXSS)**:
   - 提取原型中的 CSS。
   - 将 `px` 单位转换为 `rpx` (通常 * 2)。
   - 保持颜色、间距、字体大小与原型一致。

3. **组件配置 (JSON)**:
   - 根据用到的组件，自动在 JSON 中添加 `usingComponents` (如 `van-field`, `van-popup`)。

**特别注意**:
- 这是一个**小程序**项目，不要使用 HTML 标签 (div, span)，必须使用 (view, text)。
- 严格还原原型的视觉效果。

 Step 4: 逻辑注入 (Logic Phase)

**任务**: 实现【功能名称，如：提交访客预约】的业务逻辑。

**引用文件**:
@【页面路径】.js
@【页面路径】.wxml
@api/【模块名】.js  (后端接口定义文件)

**逻辑流程**:

1. **数据绑定 (Data Binding)**:
   - 确保 `wxml` 中的输入框 (`van-field`) 使用了 `model:value="{{ ... }}"` 或 `bind:change` 双向绑定。
   - 在 `js` 的 `data` 中定义对应的字段对象 (如 `form: { name: '', phone: '' }`)。

2. **事件处理 (Event Handling)**:
   - 给“【提交按钮】”绑定 `bind:tap="handleSubmit"` 事件。

3. **后端调用 (Backend Integration)**:
   - 在 `handleSubmit` 函数中：
     - **校验**: 检查必填项（如姓名不能为空），不通过则 `wx.showToast({ icon: 'none' })`。
     - **调用**: 调用 `@api` 文件中定义的后端接口函数。
     - **参数**: 将 `this.data.form` 作为参数传递给后端。
     - **Loading**: 调用前 `wx.showLoading`，回调结束后 `wx.hideLoading`。

4. **响应处理 (Response Handling)**:
   - 如果后端返回成功 (`code === 200`)：
     - 提示“操作成功”。
     - 延迟 1.5秒 后返回上一页 (`wx.navigateBack`) 或重置表单。
   - 如果失败：
     - 提示后端返回的错误信息 (`res.message`)。