# OpenClaw Skills 数字员工交易平台（纯前端版本）

基于 Vue 3 的数字员工交易平台，**无需后端，无需 Java 环境**，所有数据存储在浏览器本地 localStorage 中。

## 技术栈

- Vue 3
- Vite 5
- Element Plus
- Vue Router 4
- Pinia
- LocalStorage（数据持久化）

## 项目特点

✅ **无需后端** - 所有业务逻辑在前端实现  
✅ **无需 Java** - 不需要 Java 环境  
✅ **数据持久化** - 使用 localStorage 保存数据  
✅ **完整功能** - 用户、商城、积分、订单全部功能完整

## 项目结构

```
数字员工/
├── frontend/                   # 前端项目（只需启动这个）
│   ├── src/
│   │   ├── data/              # 模拟数据
│   │   │   └── mockData.js   # 数据初始化和存储
│   │   ├── service/           # 业务服务层
│   │   │   └── localService.js # 本地服务实现
│   │   ├── api/               # API 接口（已改为本地调用）
│   │   ├── components/        # 通用组件
│   │   ├── router/            # 路由配置
│   │   ├── stores/            # 状态管理
│   │   ├── views/             # 页面组件
│   │   ├── App.vue
│   │   └── main.js
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
└── README.md
```

## 快速启动（仅需前端）

### 前置要求
- Node.js (推荐 v16 或更高版本)
- npm 或 yarn 或 pnpm

### 启动步骤

1. 进入前端目录：
```bash
cd frontend
```

2. 安装依赖：
```bash
npm install
```

3. 启动开发服务器：
```bash
npm run dev
```

4. 打开浏览器访问：
```
http://localhost:5173
```

## 测试账号

| 手机号 | 积分 | 说明 |
|--------|------|------|
| 13800138000 | 500 | 演示用户 |
| 13900139000 | 200 | 测试用户 |

密码：任意输入即可（演示用）

## 功能模块

### 1. 用户系统
- 用户注册/登录
- 个人信息编辑
- 邀请码生成和绑定

### 2. Skill 商城
- Skill 列表展示
- 分类筛选
- 关键词搜索
- Skill 详情查看
- 热门/最新推荐
- 免费/付费 Skill 区分

### 3. 积分系统
- **积分获取方式**：
  - 新用户注册奖励（300积分）
  - 每日签到（10积分/天）
  - 邀请好友（100积分/人 + 好友消费奖励）
  - 加入技术交流群（50积分）
  - 充值赠送（多充多送）
- **积分消耗**：
  - 兑换付费 Skill
- 积分充值
- 积分明细查询

### 4. 订单管理
- 创建订单
- 支付订单（现金/积分）
- 订单查询

### 5. 个人中心
- 个人信息管理
- 每日签到
- 加入社群
- 邀请好友
- 充值入口

## 数据存储

所有数据保存在浏览器 localStorage 中，包括：
- 用户数据
- Skill 数据
- 积分记录
- 订单数据

**注意**：清除浏览器缓存会重置所有数据！

## 测试数据说明

系统预置了以下测试数据：
- 2个测试用户
- 6个示例 Skill（包含免费和付费）
- 完整的积分记录
- 示例订单

## 充值档位

| 充值金额 | 赠送积分 | 总计获得 |
|----------|----------|----------|
| ¥10 | +10 | 20积分 |
| ¥50 | +60 | 110积分 |
| ¥100 | +150 | 250积分 |
| ¥500 | +800 | 1300积分 |
| ¥1000 | +2000 | 3000积分 |

## 技术亮点

1. **完整的业务逻辑** - 所有后端逻辑完整迁移到前端
2. **数据持久化** - 使用 localStorage 保存数据
3. **响应式设计** - 适配不同屏幕尺寸
4. **组件化架构** - 代码清晰易维护
5. **模拟数据完整** - 包含真实的业务场景

## 注意事项

1. 数据存储在浏览器 localStorage 中，清除缓存会丢失数据
2. 推荐使用 Chrome/Edge/Firefox 浏览器
3. 这是演示版本，实际部署建议连接真实后端