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. 进入前端目录：

cd frontend

2. 安装依赖：

npm install

3. 启动开发服务器：

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