# Billiard App - 台球馆小程序开发规范

## 项目技术栈

- **框架**: Taro 4.0.9
- **UI 框架**: React 18
- **语言**: TypeScript
- **状态管理**: MobX 6
- **UI 组件库**: @taroify/core 0.9.0
- **样式**: SCSS
- **构建工具**: Webpack 5
- **包管理器**: npm

## 项目结构

```
billiard-app/
├── src/
│   ├── pages/            # 页面目录
│   │   ├── index/        # 首页
│   │   ├── store/        # 门店列表
│   │   ├── scan/         # 扫码
│   │   ├── message/      # 消息
│   │   └── user/         # 个人中心
│   ├── store/            # MobX 状态管理
│   ├── custom-tab-bar/   # 自定义 TabBar
│   ├── constants/        # 常量配置
│   ├── app.ts            # 入口文件
│   └── app.config.ts     # 全局配置
├── config/               # 编译配置
├── babel.config.js       # Babel 配置
└── package.json          # 项目依赖
```

## 代码规范

### 1. MobX 使用

所有组件必须用 `observer` 包裹才能响应状态变化：

```typescript
import { observer } from 'mobx-react'
import { userStore } from '../../store'

const MyPage = observer(() => {
  const { userInfo } = userStore
  return <View>{userInfo?.nickname}</View>
})
```

### 2. Taroify 组件

按需导入（已配置 babel-plugin-import）：

```typescript
import { Button, Toast } from '@taroify/core'
import { HomeOutlined } from '@taroify/icons'
```

### 3. TypeScript

所有变量和函数必须有类型定义。

### 4. 样式规范

- 使用 SCSS
- designWidth 为 750
- 使用 px单位,会自动转换为 rpx
- 使用 BEM 命名规范
- 非特殊说明,不要使用PX
- 新页面的 样式使用 _ 链接 比如“name_label”

## 常用命令

```bash
# 开发
npm run dev:weapp    # 微信小程序
npm run dev:h5       # H5

# 编译
npm run build:weapp  # 编译微信小程序
npm run build:h5     # 编译 H5
```

## 注意事项

1. MobX 组件必须用 `observer` 包裹
2. Taroify 样式已引入,
3: 组件优先查看 taroify ui 库是否支持,再根据设计ui样式进行微调可使用 mcp 检查taroify 组件和api:
     ```
     - mcp_taroifymcp_list-components：查看所有可用组件
     - mcp_taroifymcp_get-component-docs：获取组件详细文档
     - mcp_taroifymcp_get-component-props：获取组件 Props 和 API
     - mcp_taroifymcp_list-component-example：查看组件示例
     ```
3. 修改 TabBar 需同时更新 `custom-tab-bar/` 和 `app.config.ts`
4. 状态持久化使用 `Taro.setStorageSync`

## 相关文档

- [Taro 官方文档](https://taro-docs.jd.com/)
- [Taroify 文档](https://taroify.github.io/taroify.com/)
- [MobX 文档](https://mobx.js.org/)