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
开发环境通过 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 命令使用。