style: polish workspace UI — tab/pagination/table/nav-editor refinements

- Type tabs: gradient active state, pill counts, inset shadow container
- Pagination: bordered buttons with primary next, page info with accent
- Data table: hover highlight, uppercase headers, softer shadow
- Nav editor: proper 6-col grid alignment (handle/name/route/up/down/del),
  column headers row, focused input glow, red delete hover

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-10-28 11:59:10 +08:00
parent 0225c270ea
commit fbda69035c
2 changed files with 46 additions and 6 deletions
+7 -6
View File
@@ -125,7 +125,7 @@ function content(){if(!currentSite())return noSite();let arr=state.entries.filte
const typeCounts={};state.entries.forEach(e=>typeCounts[e.type]=(typeCounts[e.type]||0)+1);
const tabs=[{key:'',label:'全部',count:state.entries.length},...Object.entries(typeName).filter(([k])=>typeCounts[k]).map(([key,value])=>({key,label:value,count:typeCounts[key]}))];
const tabHtml=`<div class=”type-tabs” role=”tablist”>${tabs.map(t=>`<button class=”type-tab ${(!state.typ&&t.key==='')||(state.typ===t.key)?'active':''}” role=”tab” data-action=”set-type-tab” data-type=”${t.key}”>${t.label}<span class=”count”>${t.count}</span></button>`).join('')}</div>`;
const pagination=totalPages>1?`<div style=”display:flex;align-items:center;gap:12px;justify-content:center;padding:16px 0”><button class=”btn btn-tiny” data-action=”page-prev” ${state.page<=1?'disabled':''}>‹ 上一页</button><span class=”muted”>第 ${state.page} / ${totalPages} 页 · 共 ${arr.length} 条</span><button class=”btn btn-tiny” data-action=”page-next” ${state.page>=totalPages?'disabled':''}>下一页 ›</button></div>`:'';
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')))+
@@ -341,16 +341,17 @@ async function openNavEditor(){
}
function drawNavEditor(){
const el=$('#navEditorBody');
el.innerHTML=navItems.length?navItems.map((n,i)=>`
const header=navItems.length?'<div class="nav-edit-header"><span></span><span>菜单名称</span><span>链接路径</span><span></span><span></span><span></span></div>':'';
el.innerHTML=header+(navItems.length?navItems.map((n,i)=>`
<div class="nav-edit-row">
<span class="handle" title="拖动排序">⋮⋮</span>
<input value="${esc(n.title||'')}" placeholder="菜单名称" oninput="navItems[${i}].title=this.value">
<input value="${esc(n.route||'/')}" placeholder="/路径/" oninput="navItems[${i}].route=this.value">
<button class="btn btn-tiny" title="上移" onclick="W.moveNav(${i},-1)" ${i===0?'disabled':''}>↑</button>
<button class="btn btn-tiny" title="下移" onclick="W.moveNav(${i},1)" ${i===navItems.length-1?'disabled':''}>↓</button>
<button class="btn btn-tiny" title="删除" onclick="W.removeNav(${i})" style="color:#c14f45">✕</button>
<button class="btn" title="上移" onclick="W.moveNav(${i},-1)" ${i===0?'disabled':''}>↑</button>
<button class="btn" title="下移" onclick="W.moveNav(${i},1)" ${i===navItems.length-1?'disabled':''}>↓</button>
<button class="btn del" title="删除" onclick="W.removeNav(${i})">✕</button>
</div>`).join('')
:'<p class="muted" style="text-align:center;padding:28px 0">暂无菜单项,点击下方按钮添加。</p>';
:'<p class="muted" style="text-align:center;padding:28px 0">暂无菜单项,点击下方按钮添加。</p>');
}
async function saveNavDraft(){
const s=state.site;if(!s||!navSiteDesign)return;