Qiufeng
fd944b08bd
- 新增 React + TDesign 管理端（sau_web_react），替代历史 Vue 前端 - 后端接入 11 平台登录/发布（视频+图文），check_cookie 扩展全平台 - 异步发布任务 + 实时进度监控 + 发布日志 - Open API 开放体系（API Key 鉴权 + 7 个开放接口 + API 文档页） - 账号单/批量校验与批量删除 - 全局配置（登录方式 + 发布静默模式） - 统一浏览器为系统 Chrome，品牌文案统一为 EveryPublish
72 lines
3.1 KiB
Markdown
72 lines
3.1 KiB
Markdown
# sau-web-react · 自媒体自动化发布管理端
|
||
|
||
基于 **腾讯 TDesign React Starter**（tdesign-react-starter）重构的 social-auto-upload 管理端前端，
|
||
替代历史 Vue 版 sau_frontend/，并将平台能力同步至 CLI 主线。
|
||
|
||
## 技术栈
|
||
|
||
- React 18 + TypeScript
|
||
- TDesign React（腾讯企业级组件库）
|
||
- Redux Toolkit（状态管理）
|
||
- React Router v6
|
||
- Vite（构建/开发服务器）
|
||
|
||
## 运行
|
||
|
||
先启动 Flask 后端（在项目根目录 social-auto-upload/ 下）：
|
||
|
||
source .venv/bin/activate
|
||
python sau_backend.py # 监听 0.0.0.0:5409
|
||
|
||
再启动前端：
|
||
|
||
cd sau_web_react
|
||
npm install
|
||
npm run dev # 监听 0.0.0.0:5174
|
||
|
||
打开 http://127.0.0.1:5174/
|
||
|
||
开发环境通过 Vite 代理将 /api/* 转发到 http://127.0.0.1:5409（并去掉 /api 前缀）。
|
||
登录扫码走 SSE，前端 EventSource 直连后端 5409（后端已开启 CORS）。
|
||
|
||
## 页面与功能
|
||
|
||
| 页面 | 路由 | 功能 |
|
||
| --- | --- | --- |
|
||
| 首页 | /dashboard | 账号/平台/素材统计卡片、快捷操作、最近素材 |
|
||
| 账号管理 | /account | 平台筛选、搜索、扫码登录、Cookie 导入/导出、Cookie 校验、编辑、删除 |
|
||
| 素材管理 | /material | 素材上传（视频/图片多选）、预览、下载、删除 |
|
||
| 发布中心 | /publish | 多平台 Tab、选择素材/账号、标题/标签、定时发布、草稿、原创、单发/批量发布 |
|
||
| 关于 | /about | 系统信息 + 平台能力矩阵（对齐 CLI 主线） |
|
||
|
||
## 平台能力矩阵（已同步 CLI 主线）
|
||
|
||
平台配置集中在 src/configs/platforms.ts，共 11 个平台（10 个 CLI 主线 + TikTok 预留）：
|
||
|
||
- Web 后端已接入（type 1-4）：抖音、快手、小红书、视频号 —— 登录/发布走 Flask 后端
|
||
- CLI 主线已接入，Web 待接入（type 5-10）：B站、百家号、支付宝、微博、虎扑、YouTube
|
||
- 未进 CLI 主线（type 11）：TikTok
|
||
|
||
后端新增 GET /platforms 接口返回同一能力矩阵；前端 services/platform.ts 优先读取后端、
|
||
失败时回退本地静态配置。
|
||
|
||
## 目录结构
|
||
|
||
src/
|
||
├── configs/ # 平台能力矩阵、host、颜色
|
||
├── layouts/ # TDesign 布局（侧边菜单/Header/Footer/主题设置）
|
||
├── modules/ # Redux Toolkit slices（global/account/material）
|
||
├── pages/ # 页面（Dashboard/Account/Material/Publish/About）
|
||
├── router/ # 路由配置（modules/* 按页拆分）
|
||
├── services/ # 接口层（account/material/publish/platform）
|
||
├── utils/ # axios 封装等
|
||
└── types/ # 全局类型
|
||
|
||
## 与历史 Vue 前端的关系
|
||
|
||
- 历史版 sau_frontend/（Vue 3 + Element Plus）保留未删除，作为参考。
|
||
- 本 React 版复用同一 Flask 后端 sau_backend.py 的接口契约（/getAccounts、/getFiles、
|
||
/uploadSave、/postVideo 等），因此可无缝替换。
|
||
- 前端平台能力已扩展到 CLI 主线 10 平台；Web 后端其余平台（B站/百家号/支付宝/微博/虎扑/YouTube）
|
||
的发布通道逐步接入中，当前可通过 sau CLI 命令使用。
|