一个基于 Vue+Vite 开发的商品视频分销平台，响应式网站，vue-element-admin风格。连接商家与达人，实现商品视频内容的分发与变现。
该平台允许商家上传商品和视频，达人可以下载并分享到 TikTok 进行分销获得佣金。
-
用户角色
- 支持注册、登录功能。注册时需要选择角色。
- 新建mock数据，输入邮箱号123@qq.com，密码123456时，可以登录为达人角色。输入邮箱号456@qq.com，密码123456时，可以登录为商家角色。
- 商家：发布商品和视频内容
- 达人：下载视频并分享到 TikTok
- 管理员：管理用户、商品、视频、订单等
-
商家功能
- 发布商品（名称、主图、售价、链接）
- 上传商品视频
- 设置佣金比例
- 提供授权协议
- 查看订单管理
- 查看达人分销数据
-
达人功能
- TikTok 账号绑定
- 浏览商品视频
- 下载或一键分享视频
- 查看订单记录和佣金
- Vue 3
- TypeScript
- Vite
- Element Plus
- Vue Router
- Pinia
- Axios
src/
├── assets/ # 静态资源
├── components/ # 公共组件
├── layouts/ # 布局组件
│ ├── MainLayout.vue # 主布局
│ └── DashboardLayout.vue# 后台布局
├── router/ # 路由配置
├── stores/ # Pinia 状态管理
│ ├── app.ts # 应用状态
│ ├── auth.ts # 认证状态
│ └── product.ts # 商品状态
├── styles/ # 全局样式
├── views/ # 页面组件
│ ├── auth/ # 认证相关页面
│ ├── merchant/ # 商家后台页面
│ └── influencer/ # 达人后台页面
└── main.ts # 应用入口
/- 首页/login- 登录页/register- 注册页/merchant/products- 商品管理orders- 订单管理
/influencer/videos- 视频浏览orders- 订单记录tiktok- TikTok绑定
- Node.js 16+
- npm 7+
npm installnpm run devnpm run build- 邮箱：123@qq.com
- 密码：123456
- 角色：达人
-
响应式设计
- 适配多种设备屏幕
- 流畅的用户体验
-
模块化架构
- 清晰的代码组织
- 可复用的组件设计
-
安全性
- 用户认证
- 角色权限控制
-
可扩展性
- 支持更多平台集成
- 灵活的业务逻辑扩展
-
代码风格
- 使用 TypeScript
- 遵循 Vue 3 组合式 API
- ESLint + Prettier 规范
-
组件开发
- 单一职责原则
- Props 类型声明
- 事件命名规范
-
状态管理
- Pinia 模块化
- 合理的状态分割
-
样式规范
- SCSS 预处理器
- BEM 命名规范
- 主题变量统一管理