162 lines
3.8 KiB
Markdown
162 lines
3.8 KiB
Markdown
|
||
# 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. 这是演示版本，实际部署建议连接真实后端
|