3.8 KiB
3.8 KiB
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
启动步骤
- 进入前端目录:
cd frontend
- 安装依赖:
npm install
- 启动开发服务器:
npm run dev
- 打开浏览器访问:
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积分 |
技术亮点
- 完整的业务逻辑 - 所有后端逻辑完整迁移到前端
- 数据持久化 - 使用 localStorage 保存数据
- 响应式设计 - 适配不同屏幕尺寸
- 组件化架构 - 代码清晰易维护
- 模拟数据完整 - 包含真实的业务场景
注意事项
- 数据存储在浏览器 localStorage 中,清除缓存会丢失数据
- 推荐使用 Chrome/Edge/Firefox 浏览器
- 这是演示版本,实际部署建议连接真实后端