工作台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 对齐测量脚本

project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js

@@ -409,9 +409,8 @@ async function renderAccountDetail(view, id) {
       // 账号定位：默认最多 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>`;
       panel = `<div class="info-card">
-        <div class="info-row">${infoGrid('抖音号', acc.douyin_id)}${infoGrid('年龄', acc.age)}</div>
-        <div class="info-row">${infoGrid('赛道', acc.track)}${infoGrid('AI制作', acc.is_ai === '是' ? '是' : '否')}${infoGrid('地区', acc.location)}</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.douyin_id)}${infoGrid('作品数', acc.works_count)}${infoGrid('获取视频', dv.total)}</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.bio, true)}</div>
         <div class="info-row">${infoGrid('账号定位', contentHtml, true, true)}</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 }));
   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 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');
 
   function load() {
@@ -552,9 +551,11 @@ async function renderVideoDetail(view, id) {
       <div class="detail-body">
         <div class="info-card video-info">
           <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="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>
-          <div class="info-row">${infoGrid('标签', `${v.tags ? esc(v.tags) : '无'}　${viewLink}`, true, true)}</div>
+          <div class="video-grid">
+            ${infoGrid('账号', v.account_name)}${infoGrid('视频ID', v.aweme_id, false, false, 'vid-limited', v.aweme_id)}${infoGrid('时长', fmtDuration(v.duration))}${infoGrid('发布时间', v.publish_time)}
+            ${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 class="tabs">${tabBtns}</div>
         ${body}

project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css

@@ -379,9 +379,13 @@ td.td-title { max-width: 240px; }
 .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; }
 /* 视频详情信息卡：标题独立一行（大字号），下方按行分组 */
-/* 视频详情第2/3行：四字段等宽 grid（字段间隔统一用之前的 18px，避免 flex 自适应参差） */
-.video-info .info-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; }
-.video-info .info-row .info-item { min-width: 0; }
+/* 视频详情字段对齐（09-02 终版）：8 字段同处一个 grid 容器（2 行 × 4 列），列轨道跨行共享——第 i 列严格对齐（分享↔时长、收藏↔发布时间）；列宽贴合内容（min-content~max-content，非均分）；横向间隔 80px 与账号信息一致。之前用两个独立 .info-row 容器导致跨行不对齐 */
+.video-info .video-grid { display: grid; grid-template-columns: repeat(4, minmax(min-content, max-content)); gap: 10px 80px; justify-content: start; }
+.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 行，可点击展开/收起（账号定位等） */
 /* 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 */