xinyouhe/cms-SiteForge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
app/static/workspace.css
+39
View File
@@ -61,3 +61,42 @@
.nav-edit-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.nav-add-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px dashed #b8c8dc;border-radius:8px;color:var(--blue);font-size:13px;font-weight:600;cursor:pointer;background:#f8fafd;margin-top:12px;width:100%;justify-content:center}
.nav-add-btn:hover{background:#edf3ff;border-color:var(--blue)}
/* ── 内容类型 Tab 精修（v2）── */
.type-tabs{display:flex;border:1px solid #d4dce8;border-radius:11px;overflow:hidden;overflow-x:auto;margin-bottom:20px;background:#fbfcfe;box-shadow:inset 0 1px 3px rgba(20,40,80,.03)}
.type-tab{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;font-size:13px;font-weight:600;color:#64748b;background:none;border:0;border-right:1px solid #e2e8f0;white-space:nowrap;transition:all .15s;cursor:pointer;min-height:42px}
.type-tab:last-child{border-right:0}
.type-tab:hover{background:#eef4fb;color:#1e4089}
.type-tab.active{background:linear-gradient(135deg,#245ac6,#1a4a9e);color:#fff;box-shadow:0 2px 8px rgba(36,90,198,.3)}
.type-tab .count{font-size:11px;font-weight:700;background:rgba(100,116,139,.12);padding:3px 8px;border-radius:99px;line-height:1.2;letter-spacing:.2px}
.type-tab:hover .count{background:rgba(30,64,137,.12)}
.type-tab.active .count{background:rgba(255,255,255,.22);color:#fff}
/* ── 分页精修 ── */
.pagination{display:flex;align-items:center;gap:14px;justify-content:center;padding:20px 0 6px;border-top:1px solid #eef1f6;margin-top:4px}
.page-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;font-size:13px;font-weight:600;border:1px solid #d4dce8;border-radius:9px;background:#fff;color:#3b556e;cursor:pointer;transition:all .15s;min-height:38px}
.page-btn:hover:not(:disabled){background:#eef4fb;border-color:#b3c8e4;color:#1e4089}
.page-btn:disabled{opacity:.35;cursor:not-allowed}
.page-btn.primary{background:linear-gradient(135deg,#245ac6,#1a4a9e);border-color:#245ac6;color:#fff;box-shadow:0 2px 8px rgba(36,90,198,.25)}
.page-btn.primary:hover:not(:disabled){background:#1a4a9e;color:#fff}
.page-info{font-size:12px;color:#8494a6;letter-spacing:.3px}
.page-info strong{color:#245ac6;font-size:14px}
/* ── 数据表精修 ── */
.table-wrap{border-radius:12px;box-shadow:0 2px 10px rgba(20,40,80,.04)}
.data-table{font-size:13px}
.data-table th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#8494a6;padding:14px 16px}
.data-table td{padding:14px 16px}
.data-table tbody tr{transition:background .12s}
.data-table tbody tr:hover{background:#f8fafe}
.data-table td strong{color:#1e2f45}
/* ── 导航编辑弹窗布局修正 ── */
.nav-edit-row{display:grid;grid-template-columns:24px 1fr 1fr 34px 34px 34px;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid #eef1f6}
.nav-edit-row .handle{color:#a0b0c0;font-size:15px;cursor:grab;text-align:center;user-select:none}
.nav-edit-row input{padding:9px 12px;font-size:13px;border:1px solid #d9e1ed;border-radius:8px;width:100%;min-width:0;transition:border-color .15s,box-shadow .15s}
.nav-edit-row input:focus{border-color:#4d8ce8;box-shadow:0 0 0 3px rgba(77,140,232,.15);outline:none}
.nav-edit-row .btn{padding:6px;border-radius:7px;font-size:12px;min-height:32px;min-width:32px;display:inline-flex;align-items:center;justify-content:center}
.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}
app/static/workspace.js
+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;