-
-
- ${works.map((video) => `
-
-
${escapeHtml(describeVideo(video))}
-
${escapeHtml(`发布时间 ${formatDateTime(video.published_at)} · 播放 ${formatNumber(video.stats?.play)} · 点赞 ${formatNumber(video.stats?.like)}`)}
+ ` : activeTab === "recovery" ? `
+
+
+
+
+
+
失败任务恢复
+
把最近失败任务按恢复可行性分组，批量恢复入口在这里。
+
- `).join("")}
- ${recentDocs.map((doc) => `
-
-
${escapeHtml(doc.title)}
-
${escapeHtml(brief(doc.style_summary || doc.combined_text || doc.transcript_text, 92))}
-
${escapeHtml(doc.source_type || "document")}学习素材
+
+ ${failedJobs.map(({ job, recovery }) => `
+
+
${escapeHtml(job.title || job.id)}
+
${escapeHtml(brief(job.error || recovery.reason || "任务失败，请查看恢复说明。", 120))}
+
+ ${escapeHtml(recovery.label)}
+ ${escapeHtml(job.line_type || job.source_type || "analysis")}
+ ${job.updated_at ? `${escapeHtml(formatDateTime(job.updated_at))}` : ""}
+ ${recovery.recoverable ? `${escapeHtml(recovery.actionLabel)}` : `${escapeHtml(recovery.reason)}`}
+ 看详情
+
+
+ `).join("") || `
当前没有失败任务
最近任务都在正常推进，暂时不需要恢复。
`}
- `).join("") || (works.length ? "" : `
`)}
+
+
+
+ ${renderRecoveryHistoryPanel()}
- ${renderLastJobDetailCard()}
- ${renderRecoveryHistoryPanel()}
-
+ ` : activeTab === "recorder" ? `
+
+ ${renderLiveRecorderManagementPanel()}
+
+ ` : `
+
+
+
+
+
+ ${works.map((video) => `
+
+
${escapeHtml(describeVideo(video))}
+
${escapeHtml(`发布时间 ${formatDateTime(video.published_at)} · 播放 ${formatNumber(video.stats?.play)} · 点赞 ${formatNumber(video.stats?.like)}`)}
+
+
+ `).join("")}
+ ${recentDocs.map((doc) => `
+
+
${escapeHtml(doc.title)}
+
${escapeHtml(brief(doc.style_summary || doc.combined_text || doc.transcript_text, 92))}
+
${escapeHtml(doc.source_type || "document")}学习素材
+
+ `).join("") || (works.length ? "" : `
`)}
+
+
+
+
+ ${renderLastJobDetailCard()}
+
+
+ `}
`
);
@@ -4684,15 +4892,162 @@ function renderCreditsScreen() {
return screenShell("额度", "先自动连接工作区。", `${button("自动连接", "open-auth", "primary")}`, renderEmptyState("额度未加载", "自动连接成功后，这里会展示真实额度和运营看板。"));
}
const jobs = safeArray(appState.dashboard.recent_jobs);
+ const quota = appState.tenantQuota;
+ const usage = appState.tenantUsage || quota?.usage || {};
+ const categories = usage?.categories || {};
+ const estimatedVideoUsage = (categories.ai_video?.quantity || 0) + (categories.real_cut?.quantity || 0);
return screenShell(
"额度",
"在接真实计费前，先按任务量给出运营看板。",
`${button("刷新", "refresh-data")}`,
`
-
文案消耗预估${escapeHtml(formatNumber(jobs.filter((item) => item.line_type === "analysis").length))}
-
封面消耗预估0
-
视频消耗预估${escapeHtml(formatNumber(jobs.filter((item) => item.line_type === "ai_video" || item.line_type === "real_cut").length))}
+
文案消耗预估${escapeHtml(formatNumber(categories.copy?.quantity || jobs.filter((item) => item.line_type === "analysis").length))}
+
本周期预算${escapeHtml(formatNumber((quota?.monthly_budget_cents || usage?.total_cost_cents || 0) / 100))}
+
视频消耗预估${escapeHtml(formatNumber(estimatedVideoUsage || jobs.filter((item) => item.line_type === "ai_video" || item.line_type === "real_cut").length))}
+
+
+
+
+
当前额度策略
先让用户能看懂“还剩多少、风险在哪、下一步怎么做”。
+
+
+
预算与已用
+
${escapeHtml(quota ? `当前预算 ${formatNumber((quota.monthly_budget_cents || 0) / 100)} 元，已用 ${formatNumber((usage?.total_cost_cents || 0) / 100)} 元。` : "后端尚未完全接入真实预算，当前先按任务量做用户可理解的额度看板。")}
+
+
+
动作额度
+
${escapeHtml(quota ? `文案 ${formatNumber(quota.copy_quota || 0)} / AI 视频 ${formatNumber(quota.ai_video_quota || 0)} / 实拍剪辑 ${formatNumber(quota.real_cut_quota || 0)}。` : "当前优先展示文案、封面、视频三类额度池，后续再接真实套餐。")}
+
+
+
使用建议
+
${escapeHtml((quota?.enabled === false) ? "当前额度保护已关闭，适合内部联调，不适合正式对外。":"当前额度保护已开启，适合逐步转向对外产品表达。")}
+
+
+
+
+
+
+
用户能理解的表达
不要只给数字，要给解释和风险提示。
+
+
+
文案额度
+
适合高频迭代，建议和项目阶段绑定，而不是裸数字展示。
+
+
+
视频额度
+
成本更高，适合明确写出已用、剩余和推荐使用场景。
+
+
+
风险提示
+
${escapeHtml(quota?.storage_over_limit ? "当前存储已超限，后续应优先处理清理或扩容。" : "当前没有明显超限风险，但仍建议补齐真实计费链路。")}
+
+
+
+
+
+ `
+ );
+}
+
+function renderSettingsScreen() {
+ const session = appState.session;
+ const project = getSelectedProject();
+ const tabs = [
+ { value: "workspace", label: "连接与工作区" },
+ { value: "display", label: "界面与帮助" }
+ ];
+ const activeTab = getActiveDetailTab("settingsDetailTab", tabs);
+ return screenShell(
+ "设置",
+ "这里不放系统治理内容，只处理当前用户需要理解的连接、界面和帮助信息。",
+ `${button("连接状态", "open-auth")} ${isSuperAdmin() ? button("管理员配置台", "goto-admin-workbench", "primary") : button("刷新", "refresh-data", "primary")}`,
+ `
+
+
设置与帮助
+
把连接状态、当前工作区和使用说明放在一起，避免和管理员控制面混在同一页。
+
+
+
+ ${renderDetailTabs("settingsDetailTab", tabs)}
+ ${activeTab === "workspace" ? `
+
+
+
+
+
+
+
${escapeHtml(session?.account?.display_name || session?.account?.username || "未连接")}
+
${escapeHtml(session?.backendUrl || DEFAULT_BACKEND_URL)}
+
+ ${escapeHtml(session ? "已自动连接" : "等待连接")}
+ ${project ? `${escapeHtml(project.name)}` : ""}
+
+
+
+
自动连接说明
+
当前站点不会要求用户手输账号密码，而是直接向固定后端请求自动会话。
+
+
+
+
+
+
+
+
+
+
项目与 Agent
+
如果你想切项目、看默认 Agent 或确认当前工作上下文，可以直接从这里回去。
+
+ ${actionTag("去我的项目", "goto-intake")}
+ ${actionTag("去 Agent", "goto-playbook")}
+
+
+
+
生产与跟踪
+
如果你更关心最近任务和跟踪动态，可以直接回到这两个工作页。
+
+ ${actionTag("去生产中心", "goto-production")}
+ ${actionTag("去跟踪账号", "goto-tracking")}
+
+
+
+
+
+
+ ` : `
+
+
+
+
+
+
首页优先看动作
首页只负责“今天先做什么”，深层信息回到各工作页处理。
+
单页只做一类决策
重页面已经收成页内 tab，避免一次看到太多层信息。
+
系统治理不混进用户页
管理员相关配置统一收口到管理员配置台。
+
+
+
+
+
+
帮助入口
用户先看到帮助和定位，不直接掉进系统控制面。
+
+
+
连接状态
+
如果页面看起来没有数据，先确认当前工作区是否已自动连接。
+
${actionTag("打开连接状态", "open-auth")}
+
+ ${isSuperAdmin() ? `
+
+
管理员配置台
+
系统依赖、存储、平台 Agent 和运维审计都在管理员配置台里，不放在普通用户页。
+
${actionTag("去管理员配置台", "goto-admin-workbench")}
+
+ ` : ""}
+
+
+
+
+ `}
`
);
@@ -4766,6 +5121,9 @@ function renderAll() {
screenMap.production.innerHTML = renderProductionScreen();
screenMap.review.innerHTML = renderReviewScreen();
screenMap.credits.innerHTML = renderCreditsScreen();
+ if (screenMap.settings) {
+ screenMap.settings.innerHTML = renderSettingsScreen();
+ }
if (screenMap["admin-workbench"]) {
screenMap["admin-workbench"].innerHTML = renderAdminWorkbenchScreen();
}
@@ -7503,6 +7861,23 @@ document.addEventListener("click", async (event) => {
setScreen("review");
return;
}
+ if (name === "goto-settings") {
+ setScreen("settings");
+ return;
+ }
+ if (name === "goto-admin-workbench") {
+ setScreen("admin-workbench");
+ return;
+ }
+ if (name === "select-page-tab") {
+ const key = action.dataset.pageTabKey;
+ const value = action.dataset.pageTabValue;
+ if (key && value) {
+ appState[key] = value;
+ renderAll();
+ }
+ return;
+ }
if (name === "open-import-homepage") {
openImportHomepageAction();
return;
@@ -7870,6 +8245,13 @@ navButtons.forEach((button) => {
});
});
+window.addEventListener("hashchange", () => {
+ const next = getScreenFromHash();
+ if (next !== appState.screen) {
+ setScreen(next, { updateHash: false });
+ }
+});
+
ensureAuthUi();
renderAll();
bootstrap();
diff --git a/web/storyforge-web-v4/index.html b/web/storyforge-web-v4/index.html
index 5927b72..f3bb888 100644
--- a/web/storyforge-web-v4/index.html
+++ b/web/storyforge-web-v4/index.html
@@ -68,7 +68,7 @@
⚙
管理员配置台
-
diff --git a/web/storyforge-web-v4/tests/workbench-pages.test.mjs b/web/storyforge-web-v4/tests/workbench-pages.test.mjs
new file mode 100644
index 0000000..0bc169f
--- /dev/null
+++ b/web/storyforge-web-v4/tests/workbench-pages.test.mjs
@@ -0,0 +1,49 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import path from "node:path";
+
+const ROOT = path.resolve(process.cwd(), "web/storyforge-web-v4");
+const HTML = fs.readFileSync(path.join(ROOT, "index.html"), "utf8");
+const APP = fs.readFileSync(path.join(ROOT, "assets/app.js"), "utf8");
+
+function extractBetween(source, startToken, endToken) {
+ const start = source.indexOf(startToken);
+ assert.notEqual(start, -1, `Missing token: ${startToken}`);
+ const end = source.indexOf(endToken, start);
+ assert.notEqual(end, -1, `Missing token: ${endToken}`);
+ return source.slice(start, end);
+}
+
+test("settings navigation and screen are real routes", () => {
+ assert.match(HTML, /data-screen-target="settings"/);
+ assert.match(HTML, /data-screen="settings"/);
+ assert.match(APP, /function renderSettingsScreen\(/);
+ assert.match(APP, /screenMap\.settings\.innerHTML = renderSettingsScreen\(\);/);
+ assert.match(APP, /window\.addEventListener\("hashchange"/);
+});
+
+test("automation screen stays user-facing and excludes admin-only panels", () => {
+ const source = extractBetween(APP, "function renderAutomationScreen()", "function renderOwnedScreen()");
+ assert.doesNotMatch(source, /renderTenantQuotaPanel\(/);
+ assert.doesNotMatch(source, /renderOneLinerActionRegistryPanel\(/);
+ assert.doesNotMatch(source, /renderAdminOpsPanel\(/);
+ assert.match(source, /renderDetailTabs\("automationDetailTab"/);
+});
+
+test("agent screen excludes quota and registry panels and uses page tabs", () => {
+ const source = extractBetween(APP, "function renderPlaybookScreen()", "function renderProductionScreen()");
+ assert.doesNotMatch(source, /renderTenantQuotaPanel\(/);
+ assert.doesNotMatch(source, /renderOneLinerActionRegistryPanel\(/);
+ assert.match(source, /renderDetailTabs\("playbookDetailTab"/);
+});
+
+test("discovery, production, and admin screens use page tabs for heavy content", () => {
+ const discovery = extractBetween(APP, "function renderDiscoveryScreen()", "function renderTrackingScreen()");
+ const production = extractBetween(APP, "function renderProductionScreen()", "function renderReviewScreen()");
+ const admin = extractBetween(APP, "function renderAdminWorkbenchScreen()", "function renderDashboardScreen()");
+
+ assert.match(discovery, /renderDetailTabs\("discoveryDetailTab"/);
+ assert.match(production, /renderDetailTabs\("productionDetailTab"/);
+ assert.match(admin, /renderDetailTabs\("adminWorkbenchTab"/);
+});