From 7ad8cf4e1faaddd970f05ae92c41def6ebf3da4b Mon Sep 17 00:00:00 2001 From: maogeigei Date: Thu, 3 Sep 2026 19:08:37 +0800 Subject: [PATCH] =?UTF-8?q?R44:=20=E8=B4=A6=E5=8F=B7=E8=AF=A6=E6=83=85?= =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=8D=A1=E5=AD=97=E6=AE=B5=E5=AF=B9=E9=BD=90?= =?UTF-8?q?=E2=80=94=E2=80=94=E6=8A=96=E9=9F=B3=E5=8F=B7/=E8=B5=9B?= =?UTF-8?q?=E9=81=93=E7=AD=89=E8=B7=A8=E8=A1=8C=20grid=20=E5=88=97?= =?UTF-8?q?=E8=BD=A8=E9=81=93=E5=85=B1=E4=BA=AB=EF=BC=88=E5=90=8C=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E8=AF=A6=E6=83=85=E6=96=B9=E6=A1=88=EF=BC=89=EF=BC=8C?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=8A=96=E9=9F=B3=E5=8F=B7=E9=95=BF=E7=9F=AD?= =?UTF-8?q?=E8=87=B4=E4=BD=9C=E5=93=81=E6=95=B0=E4=B8=8EAI=E5=88=B6?= =?UTF-8?q?=E4=BD=9C=E9=94=99=E4=BD=8D=EF=BC=9Bcss=20ac=E2=86=92ad?= =?UTF-8?q?=E3=80=81data-pages=20ae=E2=86=92af?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .workbuddy/memory/2026-09-03.md | 10 ++++++++++ .../V1.0/mcn-work-shop/public/data-pages.js | 8 +++----- .../V1.0/mcn-work-shop/public/index.html | 4 ++-- .../短视频脚本创作/V1.0/mcn-work-shop/public/style.css | 4 ++++ 4 files changed, 19 insertions(+), 7 deletions(-) diff --git a/.workbuddy/memory/2026-09-03.md b/.workbuddy/memory/2026-09-03.md index 64f80e3..80919b4 100644 --- a/.workbuddy/memory/2026-09-03.md +++ b/.workbuddy/memory/2026-09-03.md @@ -445,3 +445,13 @@ - **视觉留档**：`tmp/shot-r42-persona2.png`（深链 `#/account/2/persona/2` 直开=视频列表第2页完整还原） - **坑**：Page.navigate 多次 SIGTERM——截图脚本改用纯 hash 切换避免；首次冒烟需先 Page.navigate 强刷使新版 data-pages 入 DOM 再断言 - **commit 049d37a 已 push origin/main**（52a5058..049d37a） + +## R44 账号详情信息字段跨行对齐（09-03 19:10） +- **需求**：「账号详情中 抖音号 和 赛道 内容的宽度保持一致，现在抖音号内容有长有短 导致作品数和AI制作错位了」 +- **根因**：账号信息卡用两个独立 `.info-row` flex 容器（行1=抖音号/作品数/获取视频，行2=赛道/AI制作/粉丝/获赞），各行按内容宽度左排 + gap 80px——抖音号长则「作品数」被顶到右侧，而赛道短「AI制作」靠左，跨行第 2 列 x 起点不一致 = 视觉错位 +- **修复**：套用 09-02 视频详情已验证的同款 grid 方案——`panel` 改单容器 `.account-info .account-grid`，**grid-template-columns: repeat(4, minmax(min-content, max-content)) + grid-template-areas: 'a b c .' 'd e f g' 'h h h h'** 列轨道跨行共享（首列=抖音号↔赛道同宽、b列=作品数↔AI制作严格对齐）；infoGrid 增第 5 参 area（内联 grid-area:a~h）；wide「账号定位」= h 区 +- **改动**：data-pages.js（infoGrid 签名 + panel 段）；style.css 新增 `.account-info .account-grid` 2 行（areas 模板 + item min-width:0） +- **版本**：style.css ac→ad、data-pages.js ae→af +- **CDP 冒烟** `tmp/r44-align.mjs`（9225）**10/10 PASS**（账号 2 Ricardo1999，抖音号英文长 ID）：account-grid 8 字段 ✓ / 抖音号.left=赛道.left=40.7 ✓ / 作品数.left=AI制作.left=353.2 ✓ / 获取视频.left=粉丝.left=665.7 ✓ / 首列格宽 抖音号=赛道=232.5px ✓ / 第2列格宽一致 ✓ / 字段内容非空 ✓ +- **坑**：冒烟首次 FAIL 全因页面停在旧资源（ac/ae）——须先 Page.navigate ignoreCache 强刷新版再断言（页面 hash 直跳不换 index.html） +- **commit 未推送**（待收尾） diff --git a/project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js b/project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js index a1e9473..405677f 100644 --- a/project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js +++ b/project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js @@ -957,7 +957,7 @@ async function renderAccountDetail(view, id) { if (tab === 'info' && persona === null) await loadPersona(); // 账号设定内联在信息页，首屏即加载（与视频数据并行） if (tab === 'persona' && trendData === null) await loadTrend(); // 视频列表页首屏拉全量趋势数据（与分页数据并行） const dv = await dvP; - const infoGrid = (label, val, wide, raw) => `
${label}
${raw ? val : esc(fmt(val))}
`; + const infoGrid = (label, val, wide, raw, area) => `
${label}
${raw ? val : esc(fmt(val))}
`; const rows = (dv.items || []).map((v) => ` ${bstate.batch ? `` : ''} ${fmt(v.publish_time)} @@ -1009,10 +1009,8 @@ async function renderAccountDetail(view, id) { : '-'; // 账号定位：默认最多 4 行，可点击展开/收起 const contentHtml = `${esc(contentText) || '-'}${contentText.length > 120 ? `` : ''}`; - panel = `
-
${infoGrid('抖音号', dyHtml, false, true)}${infoGrid('作品数', acc.works_count)}${infoGrid('获取视频', dv.total)}
-
${infoGrid('赛道', acc.track)}${infoGrid('AI制作', acc.is_ai === '是' ? '是' : '否')}${infoGrid('粉丝', acc.followers)}${infoGrid('获赞', acc.total_likes)}
-
${infoGrid('账号定位', contentHtml, true, true)}
+ panel = `

账号设定

${personaPanel()}`; diff --git a/project/短视频脚本创作/V1.0/mcn-work-shop/public/index.html b/project/短视频脚本创作/V1.0/mcn-work-shop/public/index.html index d88e9c1..97b356c 100644 --- a/project/短视频脚本创作/V1.0/mcn-work-shop/public/index.html +++ b/project/短视频脚本创作/V1.0/mcn-work-shop/public/index.html @@ -4,7 +4,7 @@ MCN热点雷达 - + @@ -42,6 +42,6 @@
- + diff --git a/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css b/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css index aeda5a4..51fcc7c 100644 --- a/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css +++ b/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css @@ -520,6 +520,10 @@ td.td-title { max-width: 240px; } .info-row { display: flex; flex-wrap: wrap; gap: 10px 80px; } .info-row .info-item { flex: 0 0 auto; min-width: 100px; } .info-row + .info-row { margin-top: 10px; } +/* 账号信息字段对齐（09-03 R44）：与视频详情同款解法——抖音号/作品数/获取视频 与 赛道/AI制作/粉丝/获赞 同处一个 grid， + 列轨道跨行共享（a列=抖音号与赛道同宽，b列=作品数与AI制作严格对齐）；原独立 .info-row 各行按内容宽排，抖音号长短会把「作品数」顶偏造成跨行错位 */ +.account-info .account-grid { display: grid; grid-template-columns: repeat(4, minmax(min-content, max-content)); grid-template-areas: 'a b c .' 'd e f g' 'h h h h'; gap: 10px 80px; justify-content: start; } +.account-info .account-grid .info-item { min-width: 0; } .info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px; } .info-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .info-wide { grid-column: 1/-1; }