R60: 视频详情刷新/卡文切换并入 tab 行右侧(.tab-spacer 推右, 删 vd-tools 独立行, 内容不再空一行; style.css?f data-pages?k)
This commit is contained in:
maogeigei committed
1 parent
07fbcd489a
commit
c47bbd1690
3 files changed
+18
-13
No files matched your search
@@ -1448,20 +1448,23 @@ async function renderVideoDetail(view, id) {
|
||||
const parseBtn = (mode) => `<button class="btn btn-sm" data-parse="${mode}" title="${mode === 'refresh' ? '重新解析该视频（覆盖更新视频脚本与视频拆解）' : '对该视频做 MCP 解析（产出视频脚本与视频拆解）'}">${svgIcon(mode === 'refresh' ? 'refresh' : 'zap', 14, 'currentColor')} ${mode === 'refresh' ? '刷新' : '解析'}</button>`;
|
||||
const emptyAct = (icon, title, desc) => `<div class="empty-state"><div class="empty-icon">${svgIcon(icon, 40)}</div><div class="empty-title">${title}</div><div class="empty-desc">${desc}</div><div style="margin-top:12px">${parseBtn('parse')}</div></div>`;
|
||||
const tabBtns = [['script', '视频脚本'], ['deconstruct', '视频拆解']].map(([k, label]) => `<button class="tab ${tab === k ? 'tab-active' : ''}" data-tab="${k}">${label}</button>`).join('');
|
||||
/* R59：拆解 tab 内容区 = 关键信息卡（默认）/ 拆解全文 切换视图（同账号设定卡片交互：右上角卡/文切换钮，无 AI、纯前端抽取） */
|
||||
/* R59：拆解 tab 内容区 = 关键信息卡（默认）/ 拆解全文 切换视图（同账号设定卡片交互：卡/文切换钮，无 AI、纯前端抽取） */
|
||||
const vkSwitch = (active) => `<div class="vk-switch" title="切换视图"><button class="vi-btn ${active === 'card' ? 'vi-active' : ''}" data-vk="card" title="关键信息卡片版">${svgIcon('image', 15)}</button><button class="vi-btn ${active === 'text' ? 'vi-active' : ''}" data-vk="text" title="拆解全文版">${svgIcon('file-text', 15)}</button></div>`;
|
||||
/* 行尾工具（09-04 并入 tab 行右侧，内容区上方不再空工具行）：随当前 tab 与数据状态输出 */
|
||||
let tabTools = '';
|
||||
if (tab === 'script' && scriptMd) tabTools = parseBtn('refresh');
|
||||
else if (tab === 'deconstruct' && deconstructMd) tabTools = (keyCardHtml ? vkSwitch(vkMode) : '') + parseBtn('refresh');
|
||||
const deconPanel = () => {
|
||||
if (!deconstructMd) return emptyAct('chart', '暂无视频拆解', '该视频尚未完成结构化拆解。点击「解析」对该视频做 MCP 内容解析（同时产出「视频脚本」与「视频拆解」，约需数分钟）。');
|
||||
if (!keyCardHtml) return `<div class="vd-tools">${parseBtn('refresh')}</div><div class="md-body">${renderMarkdown(deconstructMd)}</div>`;
|
||||
const vkSwitch = `<div class="vk-switch" title="切换视图"><button class="vi-btn ${vkMode === 'card' ? 'vi-active' : ''}" data-vk="card" title="关键信息卡片版">${svgIcon('image', 15)}</button><button class="vi-btn ${vkMode === 'text' ? 'vi-active' : ''}" data-vk="text" title="拆解全文版">${svgIcon('file-text', 15)}</button></div>`;
|
||||
return `<div class="vd-tools">${vkSwitch}${parseBtn('refresh')}</div>
|
||||
<div class="vd-wrap">
|
||||
if (!keyCardHtml) return `<div class="md-body">${renderMarkdown(deconstructMd)}</div>`;
|
||||
return `<div class="vd-wrap">
|
||||
<div class="vk-view ${vkMode === 'card' ? '' : 'vs-hidden'}">${keyCardHtml}</div>
|
||||
<div class="md-body persona-text vk-text ${vkMode === 'text' ? '' : 'vs-hidden'}">${renderMarkdown(deconstructMd)}</div>
|
||||
</div>`;
|
||||
};
|
||||
let body = '';
|
||||
if (tab === 'script') body = scriptMd
|
||||
? `<div class="vd-tools">${parseBtn('refresh')}</div><div class="md-body">${renderMarkdown(scriptMd)}</div>`
|
||||
? `<div class="md-body">${renderMarkdown(scriptMd)}</div>`
|
||||
: emptyAct('file-text', '暂无视频脚本', '该视频尚未解析。点击「解析」对该视频做 MCP 内容解析（同时产出「视频脚本」与「视频拆解」，约需数分钟）。');
|
||||
else if (tab === 'deconstruct') body = deconPanel();
|
||||
view.innerHTML = `
|
||||
@@ -1476,7 +1479,7 @@ async function renderVideoDetail(view, id) {
|
||||
${infoGrid('标签', `${v.tags ? esc(v.tags) : '无'} ${viewLink}`, true, true)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs">${tabBtns}</div>
|
||||
<div class="tabs">${tabBtns}<span class="tab-spacer"></span><div class="tab-tools">${tabTools}</div></div>
|
||||
${body}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>短视频工作台</title>
|
||||
<link rel="stylesheet" href="style.css?v=20260904e">
|
||||
<link rel="stylesheet" href="style.css?v=20260904f">
|
||||
<script src="vendor/echarts.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -43,6 +43,6 @@
|
||||
|
||||
<script src="app.js?v=20260904e"></script>
|
||||
<script src="help-guide.js?v=20260904b"></script>
|
||||
<script src="data-pages.js?v=20260904j"></script>
|
||||
<script src="data-pages.js?v=20260904k"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -407,8 +407,7 @@ main#view { height: calc(100vh - 55px); overflow: auto; } /* 55px=topbar 实际
|
||||
.page { padding: 20px 24px; max-width: 1440px; margin: 0 auto; }
|
||||
/* ================= 视频详情页 md-body：内容相对 tab 缩进 20px + 标题字号收紧 ================= */
|
||||
.page-detail .md-body { font-size: 15px; margin-left: 20px; }
|
||||
/* 视频详情内容右上角工具条（09-03 R28）：已解析内容顶部右对齐放「刷新」按钮 */
|
||||
.vd-tools { display: flex; justify-content: flex-end; margin: 2px 0 8px 20px; }
|
||||
/* 视频详情内容右上角工具条（09-03 R28，09-04 已并入 tab 行 .tab-tools 不再独立成行） */
|
||||
.page-detail .md-body h1 { font-size: 20px; border-bottom: 1px solid var(--border); padding-bottom: 4px; margin: 14px 0 8px; }
|
||||
.page-detail .md-body h2 { font-size: 17px; border-bottom: 1px solid var(--border); padding-bottom: 3px; margin: 12px 0 6px; }
|
||||
.page-detail .md-body h3 { font-size: 15px; margin: 10px 0 6px; }
|
||||
@@ -486,10 +485,14 @@ main#view { height: calc(100vh - 55px); overflow: auto; } /* 55px=topbar 实际
|
||||
.pager-total, .pager-info { color: var(--dim); font-size: 15px; }
|
||||
|
||||
/* ================= 数据页 tab（下划线式：无背景，激活蓝色文字+直线下划线，与内容左对齐） ================= */
|
||||
.tabs { display: flex; gap: 4px; margin-bottom: 20px; margin-left: 0; border-bottom: 1px solid var(--border); }
|
||||
.tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 20px; margin-left: 0; border-bottom: 1px solid var(--border); }
|
||||
.tab { border: none; background: none; padding: 8px 16px; font-size: 15px; color: var(--dim); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; }
|
||||
.tab:hover { color: var(--primary); }
|
||||
.tab-active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }
|
||||
/* 行尾工具（09-04 并入 tab 行右侧：刷新/卡文切换等，内容区不再空工具行）；tab-spacer 把工具推到最右 */
|
||||
.tab-spacer { flex: 1; }
|
||||
.tab-tools { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; }
|
||||
.tab-tools .vk-switch { display: inline-flex; align-items: center; }
|
||||
/* 数据页列表标题（如账号视频列表）：与上方内容间隔 20px */
|
||||
.video-list-title { margin: 20px 0 10px; font-size: 17px; font-weight: 600; }
|
||||
/* 账号详情视频列表：发布时间列收窄 20px（155→135）；标题列 th 不设固定宽度（auto 自然分配，避免钳制列宽），
|
||||
@@ -551,7 +554,6 @@ td.td-title { max-width: 240px; }
|
||||
.video-info .video-grid .info-item:not(.info-wide) .info-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* ================= R59 视频关键信息卡（拆解 tab 默认视图，卡/文切换） ================= */
|
||||
.vd-tools { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 2px 0 8px 20px; }
|
||||
.vk-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--panel); }
|
||||
.vk-switch .vi-btn { padding: 4px 9px; }
|
||||
.vd-wrap .md-body { margin-left: 20px; }
|
||||
|
||||
Reference in new issue
Block a user