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