feat: connect storyforge web v4 to live workspace data

web/storyforge-web-v4/README.md

@@ -10,8 +10,8 @@
 
 ## 当前定位
 
-- 这不是最终生产版，而是从 `Web V4` 高保真原型提升出来的真实前端骨架
+- 这不是最终生产版，但已经不是纯静态原型
-- 目录已经从 `output/ui/` 原型区独立出来，后续应直接在这里继续接真实接口
+- 目录已经从 `output/ui/` 原型区独立出来，并接上了第一层真实业务接口
 - 当前保留的核心页面结构：
   - 项目总台
   - 我的项目
@@ -23,8 +23,39 @@
   - 发布与复盘
   - 额度
 
+## 当前已接入的真实能力
+
+- 后端登录与会话保持
+- 工作区信息与 `/v2/me`
+- 项目总台 `/v2/me/dashboard`
+- 项目创建 `/v2/projects`
+- 内容源列表 `/v2/content-sources`
+- 抖音对标账号 `/v2/douyin/accounts`
+- 单账号工作台 `/v2/douyin/accounts/{id}/workspace`
+- 单账号作品列表 `/v2/douyin/accounts/{id}/videos`
+- 最近知识库文档 `/v2/knowledge-bases/{id}/documents`
+
+## 本地预览
+
+推荐直接在目录内起一个临时静态服务：
+
+```bash
+cd /Users/kris/code/StoryForge-gitea/web/storyforge-web-v4
+python3 -m http.server 3918
+```
+
+然后打开：
+
+- [http://127.0.0.1:3918/index.html](http://127.0.0.1:3918/index.html)
+
+首次进入需要手动连接后端，默认地址是：
+
+- `http://127.0.0.1:8081`
+
 ## 后续建议
 
-- 先补前端服务层，再接业务接口
+- 继续补动作型接口，例如导入、绑定 Agent、触发分析与生产
+- 把全局搜索和页内搜索合并成统一搜索体验
+- 为 `生产中心 / 发布与复盘` 接入更完整的任务与成片对象
 - 不要把这套页面重新塞回 `scripts/douyin-browser-capture/control_panel.mjs`
 - 抖音采集控制台仍作为独立工具存在，这里才是正式业务应用壳

web/storyforge-web-v4/assets/styles.css

@@ -269,6 +269,114 @@ select {
   font-weight: 700;
 }
 
+.auth-inline {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.auth-status {
+  max-width: 240px;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.auth-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 28, 45, 0.28);
+  backdrop-filter: blur(6px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  z-index: 40;
+}
+
+.auth-modal-backdrop.hidden {
+  display: none;
+}
+
+.auth-modal {
+  width: min(560px, 100%);
+  border-radius: 24px;
+  border: 1px solid var(--line-strong);
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: var(--shadow);
+  padding: 22px;
+}
+
+.auth-head {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 18px;
+}
+
+.auth-head h3 {
+  margin: 0 0 6px;
+  font-size: 22px;
+}
+
+.auth-head p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.field-stack {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.field-stack label {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.field-stack input,
+.field-stack textarea {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 12px 14px;
+  background: white;
+  color: var(--text);
+  resize: vertical;
+}
+
+.helper-text {
+  min-height: 18px;
+  color: var(--orange);
+  font-size: 12px;
+}
+
+.auth-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.empty-state {
+  padding: 18px;
+  border-radius: 18px;
+  border: 1px dashed var(--line-strong);
+  background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+.empty-state strong {
+  display: block;
+  color: var(--text);
+  margin-bottom: 6px;
+}
+
 .screen {
   display: none;
   margin-top: 18px;