diff --git a/app/static/workspace.css b/app/static/workspace.css index 11332ac..68629fe 100644 --- a/app/static/workspace.css +++ b/app/static/workspace.css @@ -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} diff --git a/app/static/workspace.js b/app/static/workspace.js index d5b2dce..005b64b 100644 --- a/app/static/workspace.js +++ b/app/static/workspace.js @@ -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=`
${tabs.map(t=>``).join('')}
`; - const pagination=totalPages>1?`
第 ${state.page} / ${totalPages} 页 · 共 ${arr.length} 条
`:''; + const pagination=totalPages>1?`
第 ${state.page} / ${totalPages} 页 · 共 ${arr.length} 条
`:''; return htmlHeading('内容与页面','所有网页、产品、车型和新闻都在这里维护,保存后重新构建即可更新网站。',actionButton('+ 添加内容','new-entry'))+ `

内容列表

共 ${state.entries.length} 条内容。点击”设计页面”可进行可视化排版。

${tabHtml}
`+ (pageItems.length?`
${pageItems.map(e=>``).join('')}
名称内容类型页面地址状态操作
${esc(e.title)}${esc(typeName[e.type]||e.type)}${esc(e.route)}${e.status==='draft'?'草稿':'已保存'} 设计页面 ↗
${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?'':''; + el.innerHTML=header+(navItems.length?navItems.map((n,i)=>` `).join('') - :'

暂无菜单项,点击下方按钮添加。

'; + :'

暂无菜单项,点击下方按钮添加。

'); } async function saveNavDraft(){ const s=state.site;if(!s||!navSiteDesign)return;