# Billiard App - 台球馆自助小程序

一个基于 Taro 4.x + React + TypeScript + MobX + Taroify 的台球馆自助小程序。

## 技术栈

- ⚡️ **Taro 4.0.9** - 跨平台小程序开发框架
- ⚛️ **React 18** - UI 框架
- 📘 **TypeScript** - 类型安全
- 🔥 **MobX 6** - 状态管理
- 🎨 **Taroify 0.9.0** - UI 组件库
- 💅 **SCSS** - 样式预处理
- 📦 **Webpack 5** - 构建工具

## 项目特点

- ✅ TypeScript 全面支持
- ✅ MobX 响应式状态管理
- ✅ Taroify 组件库按需引入
- ✅ 5 个 TabBar 页面完整结构
- ✅ 自定义 TabBar 实现
- ✅ Webpack 5 构建

## 快速开始

### 1. 安装依赖

```bash
cd billiard-app
npm install
```

### 2. 开发

```bash
# 微信小程序
npm run dev:weapp

# H5
npm run dev:h5
```

### 3. 预览

- **微信小程序**：使用微信开发者工具打开 `dist/` 目录
- **H5**：浏览器访问开发服务器地址

### 4. 编译

```bash
# 微信小程序
npm run build:weapp

# H5
npm run build:h5
```

## 页面结构

项目包含 5 个 TabBar 页面：

| 页面 | 路径 | 说明 |
|------|------|------|
| 首页 | `/pages/index/index` | 主页面，扫码开台入口 |
| 门店 | `/pages/store/index` | 门店列表 |
| 扫码 | `/pages/scan/index` | 扫码功能（中间大按钮） |
| 消息 | `/pages/message/index` | 消息列表 |
| 我的 | `/pages/user/index` | 个人中心 |

## MobX 使用示例

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

const MyPage = observer(() => {
  const { userInfo, balance } = userStore
  
  return (
    <View>
      <Text>{userInfo?.nickname}</Text>
      <Text>余额: ¥{balance}</Text>
    </View>
  )
})

export default MyPage
```

## Taroify 组件使用

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

// 使用组件
<Button color="primary">按钮</Button>
<HomeOutlined size={24} />
```

## 开发规范

详见 [.cursorrules](./.cursorrules)

## 注意事项

1. **MobX 响应式**：组件必须用 `observer` 包裹
2. **样式单位**：使用 `px`，自动转换为 `rpx`
3. **TabBar 配置**：修改需同步更新配置文件

## License

MIT