From 5cfa62611c34aadb6a0bc6fffa4211db1193e648 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Wed, 28 Oct 2026 14:07:52 +0800
Subject: [PATCH] =?UTF-8?q?style:=20content=20list=20v3=20=E2=80=94=20colo?=
 =?UTF-8?q?red=20type=20badges,=20mono=20routes,=20status=20dots,=20gradie?=
 =?UTF-8?q?nt=20design=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 app/static/workspace.css | 23 +++++++++++++++++++++++
 app/static/workspace.js  |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/app/static/workspace.css b/app/static/workspace.css
index 68629fe..c516f82 100644
--- a/app/static/workspace.css
+++ b/app/static/workspace.css
@@ -100,3 +100,26 @@
 .nav-edit-row .btn.del{color:#c14f45}
 .nav-edit-row .btn.del:hover{background:#fdf0ef;border-color:#e8b4b0}
 .nav-edit-header{display:grid;grid-template-columns:24px 1fr 1fr 34px 34px 34px;gap:8px;padding:0 0 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;border-bottom:2px solid #e2e8f0;margin-bottom:4px}
+
+/* ── 内容列表精修 v3 ── */
+.content-table th{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:#7e8ea0;padding:12px 16px;background:#f4f6fa;border-bottom:2px solid #e0e5ec}
+.content-table td{padding:14px 16px}
+.content-table td strong{display:block;font-size:14px;color:#1a2c42;margin-bottom:2px}
+.content-table td .route-code{font-family:'SF Mono','Cascadia Code',Consolas,monospace;font-size:11px;color:#8494a6;background:#f0f3f8;padding:3px 8px;border-radius:5px;display:inline-block}
+.type-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.3px}
+.type-badge.product{background:#e8f4fd;color:#1a6ec8}
+.type-badge.post{background:#e8fdf0;color:#178a4e}
+.type-badge.page{background:#ede8fd;color:#6c3fb8}
+.type-badge.case{background:#fdf0e8;color#c05a20}
+.type-badge.service{background:#e8f8fd;color#088a9e}
+.type-badge.brand{background:#fde8f4;color#c03a8e}
+.type-badge.vehicle{background:#f0f0e8;color#7a7a20}
+.type-badge._other{background:#f0f3f8;color#64748b}
+.status-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
+.status-dot::before{content:'';width:8px;height:8px;border-radius:50%;display:inline-block}
+.status-dot.published::before{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.4)}
+.status-dot.draft::before{background:#f59e0b;box-shadow:0 0 6px rgba(245,158,11,.4)}
+.action-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;font-size:12px;font-weight:600;border:1px solid #dce3ec;border-radius:8px;background:#fff;color#3b556e;cursor:pointer;transition:all .15s;text-decoration:none;white-space:nowrap}
+.action-btn:hover{background#eef4fb;border-color#b3c8e4;color#1e4089}
+.action-btn.design{background:linear-gradient(135deg,#245ac6,#1a4a9e);border-color:#245ac6;color#fff}
+.action-btn.design:hover{background#1a4a9e;color#fff}
diff --git a/app/static/workspace.js b/app/static/workspace.js
index 2fa814b..f27dea6 100644
--- a/app/static/workspace.js
+++ b/app/static/workspace.js
@@ -128,7 +128,7 @@ function content(){if(!currentSite())return noSite();let arr=state.entries.filte
  const pagination=totalPages>1?`<div class=”pagination”><button class=”page-btn” data-action=”page-prev” ${state.page<=1?'disabled':''}>‹ 上一页</button><span class=”page-info”>第 <strong>${state.page}</strong> / ${totalPages} 页 · 共 ${arr.length} 条</span><button class=”page-btn primary” data-action=”page-next” ${state.page>=totalPages?'disabled':''}>下一页 ›</button></div>`:'';
  return htmlHeading('内容与页面','所有网页、产品、车型和新闻都在这里维护，保存后重新构建即可更新网站。',actionButton('＋ 添加内容','new-entry'))+
  `<div class=”panel”><div class=”panel-head”><div><h2>内容列表</h2><p>共 ${state.entries.length} 条内容。点击”设计页面”可进行可视化排版。</p></div></div><div style=”margin-bottom:12px”>${tabHtml}</div><div class=”toolbar”><input id=”contentSearch” aria-label=”搜索内容” placeholder=”搜索标题或页面路径…” value=”${esc(state.search)}”></div>`+
- (pageItems.length?`<div class=”table-wrap”><table class=”data-table”><thead><tr><th>名称</th><th>内容类型</th><th>页面地址</th><th>状态</th><th>操作</th></tr></thead><tbody>${pageItems.map(e=>`<tr><td><strong>${esc(e.title)}</strong></td><td>${esc(typeName[e.type]||e.type)}</td><td class=”muted”>${esc(e.route)}</td><td><span class=”pill ${e.status==='draft'?'warn':'success'}”>${e.status==='draft'?'草稿':'已保存'}</span></td><td class=”action-cell”><button class=”btn btn-tiny” data-action=”edit-entry” data-id=”${esc(e.id)}”>修改内容</button> <a class=”btn btn-tiny” href=”/editor/${encodeURIComponent(state.site.id)}/${encodeURIComponent(e.id)}”>设计页面 ↗</a></td></tr>`).join('')}</tbody></table></div>${pagination}`:emptyState('没有找到内容','可以清除筛选条件，或者添加新内容。',actionButton('＋ 添加内容','new-entry')))+
+ (pageItems.length?`<div class=”table-wrap”><table class=”data-table content-table”><thead><tr><th style=”min-width:200px”>名称</th><th>类型</th><th style=”min-width:180px”>页面地址</th><th>状态</th><th style=”min-width:220px”>操作</th></tr></thead><tbody>${pageItems.map(e=>`<tr><td><strong>${esc(e.title)}</strong></td><td><span class=”type-badge ${e.type}”>${esc(typeName[e.type]||e.type)}</span></td><td><span class=”route-code”>${esc(e.route)}</span></td><td><span class=”status-dot ${e.status==='draft'?'draft':'published'}”>${e.status==='draft'?'草稿':'已发布'}</span></td><td class=”action-cell”><button class=”action-btn” data-action=”edit-entry” data-id=”${esc(e.id)}”>✎ 修改内容</button> <a class=”action-btn design” href=”/editor/${encodeURIComponent(state.site.id)}/${encodeURIComponent(e.id)}”>▤ 设计页面</a></td></tr>`).join('')}</tbody></table></div>${pagination}`:emptyState('没有找到内容','可以清除筛选条件，或者添加新内容。',actionButton('＋ 添加内容','new-entry')))+
  `</div>`;
 }
 function design(){if(!currentSite())return noSite();const s=state.site;const cards=Object.entries(themeName).map(([id,name])=>`<div class="theme-card"><div class="theme-preview ${id}">${name}</div><div class="theme-desc"><h3>${name} ${s.theme===id?'<span class="pill success">当前使用</span>':''}</h3><p>${({automotive:'适合汽车出口、车型及品牌展示',industrial:'适合制造业、产品与技术参数',corporate:'适合集团公司、服务和案例',minimal:'适合作品展示和品牌形象','trade-pro':'适合外贸 B2B 英文站点与询盘'})[id]}</p><button class="btn btn-tiny ${s.theme===id?'btn-muted':'btn-primary'}" ${s.theme===id?'disabled':''} data-action="set-theme" data-theme="${id}">${s.theme===id?'正在使用':'使用此主题'}</button><a class="btn btn-tiny btn-muted" href="/theme-gallery?theme=${encodeURIComponent(id)}" target="_blank" rel="noopener">预览页面效果</a></div></div>`).join('');