# 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 命令使用。