工作台UI:账号详情去年龄/地区重排两行 + 视频信息字段对齐(video-grid单容器跨行列对齐) + 视频ID限宽220px
- 账号信息:行1=抖音号/作品数/获取视频,行2=赛道/AI制作/粉丝/获赞\n- 视频信息:8字段合并同一grid容器(2行x4列,minmax(min-content,max-content)+80px间隔),时长↔分享/发布时间↔收藏逐列对齐(CDP实测差0)\n- 视频ID .vid-limited 220px省略+hover全量\n- 新增 cdp-align-videoinfo.mjs 对齐测量脚本
This commit is contained in:
1 parent
714976c23a
commit
831fd0e123
5 files changed
+122
-10
No files matched your search
@@ -325,3 +325,8 @@
|
|||||||
- 修改:references/创作流程/6_生成短视频框架.md「场次结构表·8列维度说明」后新增通用规则(引用 S5「结构性符号」概念,不硬编码任何账号/符号)——「开场钩子场(场1)结构性符号承接:场1钩子设计必须承接账号结构性符号,位于开头位置的须一个镜头/一句话交代清楚(遵循 S5 呈现效率规则),禁止铺垫/多步推理;缺失或需铺垫的打回修改场1」
|
- 修改:references/创作流程/6_生成短视频框架.md「场次结构表·8列维度说明」后新增通用规则(引用 S5「结构性符号」概念,不硬编码任何账号/符号)——「开场钩子场(场1)结构性符号承接:场1钩子设计必须承接账号结构性符号,位于开头位置的须一个镜头/一句话交代清楚(遵循 S5 呈现效率规则),禁止铺垫/多步推理;缺失或需铺垫的打回修改场1」
|
||||||
- 同步:V1.0 源技能(~/.workbuddy/skills/短视频脚本创作/)+ dsh 副本(~/.dsh/skills/short-video-script/)两处,Lite 不动
|
- 同步:V1.0 源技能(~/.workbuddy/skills/短视频脚本创作/)+ dsh 副本(~/.dsh/skills/short-video-script/)两处,Lite 不动
|
||||||
- 重跑验证:备份 mcn-plugin.db.bak-s6fix-* → 删 RW26-31 + script_review(rewrite_id 26-31) → build-create-prompts.cjs 提交 6 任务(automation-1788258518460 等,v309/313/320=topic、v315/316/318=content)→ poll-create-tasks.cjs 轮询(task M70h3o)
|
- 重跑验证:备份 mcn-plugin.db.bak-s6fix-* → 删 RW26-31 + script_review(rewrite_id 26-31) → build-create-prompts.cjs 提交 6 任务(automation-1788258518460 等,v309/313/320=topic、v315/316/318=content)→ poll-create-tasks.cjs 轮询(task M70h3o)
|
||||||
|
|
||||||
|
## 09-02 失误与规避:浏览器操作工具选择(10:15)
|
||||||
|
- 失误:验证视频详情页对齐时误用 agent-browser(system 技能列表里可见),未遵守项目铁律「浏览器操作一律 browser-harness」(user 级技能,Always use browser-harness for any web interaction)
|
||||||
|
- 检查:browser-harness 环境未安装——技能目录只有 SKILL.md,无 subskills/browser-harness/envs/ 环境(可执行文件 browser-harness.exe 不存在)
|
||||||
|
- 规避:涉及浏览器自动化/截图/交互时,先 where browser-harness 或查 C:/Users/maidou/.workbuddy/skills/browser-harness/subskills/browser-harness/envs/browser-harness/Scripts/browser-harness.exe 是否存在;未装则 uv tool install --python 3.12 --upgrade --force browser-harness + doctor 验三要素,不装 agent-browser
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
# 2026-09-02 工作日志
|
||||||
|
|
||||||
|
## 工作台 UI 调整(09:53-10:15)
|
||||||
|
- 09:53 打开 MCN 工作台(服务重启,PID 32336,`?v=20260902-0953#/`)
|
||||||
|
- **账号详情页账号信息**(data-pages.js:412-413):去掉「年龄」「地区」,重排两行——行1=抖音号/作品数/获取视频,行2=赛道/AI制作/粉丝/获赞;简介/账号定位/视频列表不变
|
||||||
|
- **视频详情字段间隔/对齐**(style.css:383-385 + data-pages.js:552-556,多轮迭代定稿):
|
||||||
|
- 需求:字段横向间隔参考账号信息(flex+80px)→ 但「分享/收藏」与「时长/发布时间」要求跨行对齐
|
||||||
|
- 迭代教训:flex 内容宽度天然不跨行对齐;独立 .info-row 容器各自 grid 也不会对齐(跨容器不共享列轨道)
|
||||||
|
- **终版方案**:8 字段(账号/视频ID/时长/发布时间 + 点赞/评论/分享/收藏)合并进同一个 `.video-grid` 容器(2行×4列 grid,`repeat(4, minmax(min-content, max-content))` + gap 10px 80px + justify-content:start),列轨道跨行共享→严格对齐,列宽贴合内容非均分;标签行 info-wide 占满整行
|
||||||
|
- 视频ID 限宽 220px(.vid-limited,省略号+hover title 全量)
|
||||||
|
- 服务未重启(纯静态资源,Cache-Control: no-store,重开页面即生效)
|
||||||
|
|
||||||
|
## 失误与规避:浏览器操作工具选择(10:15)
|
||||||
|
- 失误:验证页面时误用 agent-browser(system 技能列表可见),未遵守铁律「浏览器操作一律 browser-harness」(user 级技能)
|
||||||
|
- 检查:browser-harness 环境未安装——技能目录只有 SKILL.md,无 subskills/browser-harness/envs/(browser-harness.exe 不存在)
|
||||||
|
- 规避:需要浏览器自动化/截图时,先查 `C:\Users\maidou\.workbuddy\skills\browser-harness\subskills\browser-harness\envs\browser-harness\Scripts\browser-harness.exe`;未装则 `uv tool install --python 3.12 --upgrade --force browser-harness` + doctor 验三要素;不装 agent-browser
|
||||||
|
|
||||||
|
## browser-harness 真实环境定位 + 对齐实测通过(10:20 纠正昨日误判)
|
||||||
|
- **纠正**:browser-harness 并未"未安装"——真身在源技能 `project/短视频脚本创作/V1.0/subskill/mcn-dou-analysis/subskills/browser-harness/`(envs/browser-harness/python.exe 完整存在,已验证);另有 `C:/Users/maidou/.dsh/skills/browser-harness/src`(无 envs)与 `D:/miniconda3/envs/browser-harness`(08-28 用过)两处
|
||||||
|
- **昨天实测主流方式**(非 python IPC):Node + WebSocket 直连 9223 CDP 脚本(mcn-work-shop/cdp-verify-*.mjs、cdp-measure-*.mjs 等 30+ 个),Runtime.evaluate 测量 DOM;browser-harness python 调用(BU_CDP_URL=9223 + PYTHONPATH=<BH>/src + env python -m browser_harness.run heredoc)今天实测 IPC 超时(daemon 0.1.8 vs client 0.1.10 版本不匹配)
|
||||||
|
- **9223 调试 Chrome**:`chrome.exe --remote-debugging-port=9223 --user-data-dir=C:/Users/maidou/.workbuddy/tmp/bh-chrome-9223`;新开 Tab 访问 localhost 会 chrome-error,必须复用现有 8900 标签页
|
||||||
|
- **对齐实测**(新脚本 cdp-align-videoinfo.mjs):视频详情 .video-grid 8 字段逐列 left 完全一致(账号@41=点赞@41、视频ID@157=评论@157、时长@404=分享@404、发布时间@549=收藏@549,差 0)✅ 结构修复生效
|
||||||
@@ -0,0 +1,80 @@
|
|||||||
|
/* cdp-align-videoinfo.mjs — 测量视频详情页 .video-grid 各字段 x 坐标,验证跨行列对齐(09-02)
|
||||||
|
* 期望:第 i 列两行字段 left 一致(时长↔分享、发布时间↔收藏)
|
||||||
|
*/
|
||||||
|
const CDP = 'http://127.0.0.1:9223';
|
||||||
|
async function getWs(targetId) {
|
||||||
|
const tabs = await (await fetch(CDP + '/json')).json();
|
||||||
|
const t = tabs.find((x) => x.id === targetId);
|
||||||
|
if (!t) throw new Error('target not found: ' + targetId);
|
||||||
|
return t.webSocketDebuggerUrl;
|
||||||
|
}
|
||||||
|
function cdp(ws, method, params = {}) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const id = ++cdp._id;
|
||||||
|
const w = new WebSocket(ws);
|
||||||
|
const timer = setTimeout(() => { try { w.close(); } catch (e) {} reject(new Error('timeout: ' + method)); }, 30000);
|
||||||
|
w.onopen = () => w.send(JSON.stringify({ id, method, params }));
|
||||||
|
w.onmessage = (ev) => {
|
||||||
|
const m = JSON.parse(ev.data);
|
||||||
|
if (m.id !== id) return;
|
||||||
|
clearTimeout(timer);
|
||||||
|
try { w.close(); } catch (e) {}
|
||||||
|
m.error ? reject(new Error(method + ': ' + JSON.stringify(m.error))) : resolve(m.result);
|
||||||
|
};
|
||||||
|
w.onerror = () => { clearTimeout(timer); reject(new Error('ws error: ' + method)); };
|
||||||
|
});
|
||||||
|
}
|
||||||
|
cdp._id = 0;
|
||||||
|
async function evalJs(ws, expr) {
|
||||||
|
const r = await cdp(ws, 'Runtime.evaluate', { expression: expr, awaitPromise: true, returnByValue: true });
|
||||||
|
if (r.exceptionDetails) throw new Error('eval err: ' + JSON.stringify(r.exceptionDetails).slice(0, 300));
|
||||||
|
return r.result && r.result.value;
|
||||||
|
}
|
||||||
|
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
const tabs = await (await fetch(CDP + '/json')).json();
|
||||||
|
const tab = tabs.find((x) => x.url.includes('localhost:8900')) || tabs.find((x) => x.type === 'page');
|
||||||
|
if (!tab) throw new Error('no 8900 tab found');
|
||||||
|
const ws = await getWs(tab.id);
|
||||||
|
await cdp(ws, 'Page.enable');
|
||||||
|
await cdp(ws, 'Runtime.enable');
|
||||||
|
// 复用现有 8900 标签页导航(新开 Tab 访问 localhost 会 chrome-error)
|
||||||
|
await cdp(ws, 'Page.navigate', { url: 'http://localhost:8900/?v=aligncheck0902#/video/309' });
|
||||||
|
await sleep(2500);
|
||||||
|
const measure = `(() => {
|
||||||
|
const items = [...document.querySelectorAll('.video-info .video-grid .info-item')];
|
||||||
|
if (!items.length) return { err: 'video-grid items not found', html: document.querySelector('.video-info') ? document.querySelector('.video-info').textContent.slice(0, 80) : 'no .video-info' };
|
||||||
|
const row = (el) => Math.round(el.getBoundingClientRect().top / 5);
|
||||||
|
return items.map((el, i) => {
|
||||||
|
const label = el.querySelector('.info-label') ? el.querySelector('.info-label').textContent.trim() : '?';
|
||||||
|
const r = el.getBoundingClientRect();
|
||||||
|
return { i, label, left: Math.round(r.left), top: Math.round(r.top), row: row(el) };
|
||||||
|
});
|
||||||
|
})()`;
|
||||||
|
const list = await evalJs(ws, measure);
|
||||||
|
if (list.err) { console.error('ERR:', list.err); process.exit(1); }
|
||||||
|
// 按 row 分组(前两行各 4 项)
|
||||||
|
const rows = {};
|
||||||
|
for (const it of list) { (rows[it.row] = rows[it.row] || []).push(it); }
|
||||||
|
const rKeys = Object.keys(rows).sort((a, b) => a - b).slice(0, 2);
|
||||||
|
console.log('=== .video-grid 字段测量 ===');
|
||||||
|
for (const k of rKeys) {
|
||||||
|
console.log('行' + k + ':', rows[k].map((x) => `${x.label}@${x.left}`).join(' '));
|
||||||
|
}
|
||||||
|
if (rKeys.length === 2) {
|
||||||
|
const a = rows[rKeys[0]], b = rows[rKeys[1]];
|
||||||
|
const diff2 = a[2].left - b[2].left;
|
||||||
|
const diff3 = a[3].left - b[3].left;
|
||||||
|
console.log('---');
|
||||||
|
console.log('第3列(时长↔分享) left 差:', diff2, diff2 === 0 ? '✅ 对齐' : '❌ 未对齐');
|
||||||
|
console.log('第4列(发布时间↔收藏) left 差:', diff3, diff3 === 0 ? '✅ 对齐' : '❌ 未对齐');
|
||||||
|
const labels1 = a.map((x) => x.label).join('/');
|
||||||
|
const labels2 = b.map((x) => x.label).join('/');
|
||||||
|
console.log('行1:', labels1, '| 行2:', labels2);
|
||||||
|
} else {
|
||||||
|
console.log('⚠️ 只识别到', rKeys.length, '行');
|
||||||
|
}
|
||||||
|
process.exit(0);
|
||||||
|
}
|
||||||
|
main().catch((e) => { console.error('ERROR:', e.message); process.exit(1); });
|
||||||
@@ -409,9 +409,8 @@ async function renderAccountDetail(view, id) {
|
|||||||
// 账号定位:默认最多 10 行,可点击展开/收起
|
// 账号定位:默认最多 10 行,可点击展开/收起
|
||||||
const contentHtml = `<span class="clamp-wrap"><span class="clamp-text" data-clamp>${esc(contentText) || '-'}</span>${contentText.length > 200 ? `<button class="clamp-btn" data-clamp-toggle>展开</button>` : ''}</span>`;
|
const contentHtml = `<span class="clamp-wrap"><span class="clamp-text" data-clamp>${esc(contentText) || '-'}</span>${contentText.length > 200 ? `<button class="clamp-btn" data-clamp-toggle>展开</button>` : ''}</span>`;
|
||||||
panel = `<div class="info-card">
|
panel = `<div class="info-card">
|
||||||
<div class="info-row">${infoGrid('抖音号', acc.douyin_id)}${infoGrid('年龄', acc.age)}</div>
|
<div class="info-row">${infoGrid('抖音号', acc.douyin_id)}${infoGrid('作品数', acc.works_count)}${infoGrid('获取视频', dv.total)}</div>
|
||||||
<div class="info-row">${infoGrid('赛道', acc.track)}${infoGrid('AI制作', acc.is_ai === '是' ? '是' : '否')}${infoGrid('地区', acc.location)}</div>
|
<div class="info-row">${infoGrid('赛道', acc.track)}${infoGrid('AI制作', acc.is_ai === '是' ? '是' : '否')}${infoGrid('粉丝', acc.followers)}${infoGrid('获赞', acc.total_likes)}</div>
|
||||||
<div class="info-row">${infoGrid('作品数', acc.works_count)}${infoGrid('粉丝', acc.followers)}${infoGrid('获赞', acc.total_likes)}${infoGrid('获取视频', dv.total)}</div>
|
|
||||||
<div class="info-row">${infoGrid('简介', acc.bio, true)}</div>
|
<div class="info-row">${infoGrid('简介', acc.bio, true)}</div>
|
||||||
<div class="info-row">${infoGrid('账号定位', contentHtml, true, true)}</div>
|
<div class="info-row">${infoGrid('账号定位', contentHtml, true, true)}</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -533,7 +532,7 @@ async function renderVideoDetail(view, id) {
|
|||||||
const d = await api('/api/dsh/video-detail?videoId=' + videoId).catch((e) => ({ ok: false, error: e.message }));
|
const d = await api('/api/dsh/video-detail?videoId=' + videoId).catch((e) => ({ ok: false, error: e.message }));
|
||||||
if (!d.ok) { view.innerHTML = `<div class="page"><div class="page-toolbar">${toolbarBack()}</div><div class="empty">${esc(d.error || '视频不存在')}</div></div>`; bindBack(view); return; }
|
if (!d.ok) { view.innerHTML = `<div class="page"><div class="page-toolbar">${toolbarBack()}</div><div class="empty">${esc(d.error || '视频不存在')}</div></div>`; bindBack(view); return; }
|
||||||
const v = d.video, analysis = d.analysis, parse = d.parse || {};
|
const v = d.video, analysis = d.analysis, parse = d.parse || {};
|
||||||
const infoGrid = (label, val, wide, raw) => `<div class="info-item ${wide ? 'info-wide' : ''}"><div class="info-label">${label}</div><div class="info-value">${raw ? val : esc(fmt(val))}</div></div>`;
|
const infoGrid = (label, val, wide, raw, cls, title) => `<div class="info-item ${wide ? 'info-wide' : ''}${cls ? ' ' + cls : ''}"${title ? ` title="${esc(title)}"` : ''}><div class="info-label">${label}</div><div class="info-value">${raw ? val : esc(fmt(val))}</div></div>`;
|
||||||
const analysisToMd = (obj) => Object.entries(obj || {}).map(([k, val]) => `# ${k}\n\n${val}`).join('\n\n---\n\n');
|
const analysisToMd = (obj) => Object.entries(obj || {}).map(([k, val]) => `# ${k}\n\n${val}`).join('\n\n---\n\n');
|
||||||
|
|
||||||
function load() {
|
function load() {
|
||||||
@@ -552,9 +551,11 @@ async function renderVideoDetail(view, id) {
|
|||||||
<div class="detail-body">
|
<div class="detail-body">
|
||||||
<div class="info-card video-info">
|
<div class="info-card video-info">
|
||||||
<div class="info-card-title">视频信息</div>
|
<div class="info-card-title">视频信息</div>
|
||||||
<div class="info-row">${infoGrid('账号', v.account_name)}${infoGrid('视频ID', v.aweme_id)}${infoGrid('时长', fmtDuration(v.duration))}${infoGrid('发布时间', v.publish_time)}</div>
|
<div class="video-grid">
|
||||||
<div class="info-row">${infoGrid('点赞', fmtWan(v.like_display || v.like_count))}${infoGrid('评论', fmtWan(v.comment_count))}${infoGrid('分享', fmtWan(v.share_count))}${infoGrid('收藏', fmtWan(v.collect_count))}</div>
|
${infoGrid('账号', v.account_name)}${infoGrid('视频ID', v.aweme_id, false, false, 'vid-limited', v.aweme_id)}${infoGrid('时长', fmtDuration(v.duration))}${infoGrid('发布时间', v.publish_time)}
|
||||||
<div class="info-row">${infoGrid('标签', `${v.tags ? esc(v.tags) : '无'} ${viewLink}`, true, true)}</div>
|
${infoGrid('点赞', fmtWan(v.like_display || v.like_count))}${infoGrid('评论', fmtWan(v.comment_count))}${infoGrid('分享', fmtWan(v.share_count))}${infoGrid('收藏', fmtWan(v.collect_count))}
|
||||||
|
${infoGrid('标签', `${v.tags ? esc(v.tags) : '无'} ${viewLink}`, true, true)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tabs">${tabBtns}</div>
|
<div class="tabs">${tabBtns}</div>
|
||||||
${body}
|
${body}
|
||||||
|
|||||||
@@ -379,9 +379,13 @@ td.td-title { max-width: 240px; }
|
|||||||
.info-label { font-size: 14px; color: var(--dim); }
|
.info-label { font-size: 14px; color: var(--dim); }
|
||||||
.info-value { font-size: 15px; color: var(--text); word-break: break-word; white-space: pre-wrap; line-height: 1.6; }
|
.info-value { font-size: 15px; color: var(--text); word-break: break-word; white-space: pre-wrap; line-height: 1.6; }
|
||||||
/* 视频详情信息卡:标题独立一行(大字号),下方按行分组 */
|
/* 视频详情信息卡:标题独立一行(大字号),下方按行分组 */
|
||||||
/* 视频详情第2/3行:四字段等宽 grid(字段间隔统一用之前的 18px,避免 flex 自适应参差) */
|
/* 视频详情字段对齐(09-02 终版):8 字段同处一个 grid 容器(2 行 × 4 列),列轨道跨行共享——第 i 列严格对齐(分享↔时长、收藏↔发布时间);列宽贴合内容(min-content~max-content,非均分);横向间隔 80px 与账号信息一致。之前用两个独立 .info-row 容器导致跨行不对齐 */
|
||||||
.video-info .info-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; }
|
.video-info .video-grid { display: grid; grid-template-columns: repeat(4, minmax(min-content, max-content)); gap: 10px 80px; justify-content: start; }
|
||||||
.video-info .info-row .info-item { min-width: 0; }
|
.video-info .video-grid .info-item { min-width: 0; }
|
||||||
|
.video-info .video-grid .info-item.info-wide { grid-column: 1 / -1; }
|
||||||
|
/* 视频ID 限宽(09-02):长数字不把第一行撑爆,多余省略号 + hover 提示全量 */
|
||||||
|
.video-info .info-item.vid-limited { max-width: 220px; }
|
||||||
|
.video-info .info-item.vid-limited .info-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
/* 长文本默认最多 10 行,可点击展开/收起(账号定位等) */
|
/* 长文本默认最多 10 行,可点击展开/收起(账号定位等) */
|
||||||
/* 09-01 改用 block+max-height 裁剪:display:-webkit-box 下长句不折行,内容宽被撑到 1896px 导致 main 横向滚动条 */
|
/* 09-01 改用 block+max-height 裁剪:display:-webkit-box 下长句不折行,内容宽被撑到 1896px 导致 main 横向滚动条 */
|
||||||
.clamp-text { display: block; max-height: 240px; overflow: hidden; word-break: break-word; overflow-wrap: anywhere; } /* 240px=10行×15px×1.6 */
|
.clamp-text { display: block; max-height: 240px; overflow: hidden; word-break: break-word; overflow-wrap: anywhere; } /* 240px=10行×15px×1.6 */
|
||||||
|
|||||||
Reference in new issue
Block a user