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

feat: Projects page + workspace logo upload + CTA customization UI

Browse Source
This commit is contained in:
浅念
2026-10-29 15:11:02 +08:00
parent f5dc2f7624
commit e169a815ea
1 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/workspace.js
+25 -1
View File
@@ -135,7 +135,8 @@ function design(){if(!currentSite())return noSite();const s=state.site;const car
return htmlHeading('外观与设计','先选一套网站风格，再打开可视化编辑器修改图文、导航和手机端布局。')+
`<div class="section-heading"><div><h2>第一步 · 选择行业主题</h2><p>更换主题不会删除您已经录入的业务内容和 URL。</p></div><a href="/theme-gallery" class="btn btn-tiny">查看完整主题预览 ↗</a></div><div class="choice-cards">${cards}</div>`+
`<div class="section-heading"><div><h2>第二步 · 导航菜单</h2><p>自定义网站的顶部导航：添加、删除、排序菜单项，支持三级下拉。</p></div></div><div class="panel" id="navQuickPanel"><div class="panel-head"><div><h2>☰ 网站导航菜单</h2><p>直接编辑菜单文字和链接，改完保存并重新构建即可生效。</p></div><button class="btn btn-primary" type="button" data-action="open-nav-editor">编辑导航菜单 →</button></div><div id="navQuickPreview" class="muted" style="padding:4px 0">点击按钮直接修改导航。</div></div>`+
`<div class="section-heading"><div><h2>第三步 · 设计网页</h2><p>挑选要修改的页面；可在设计器中编辑导航、页眉、页脚及各设备布局。</p></div></div><div class="panel"><div class="panel-head"><div><h2>选择要设计的页面</h2><p>修改先保存为草稿，正式发布设计后才会参与下一次静态构建。</p></div></div><div class="grid-2 grid-equal">${state.entries.filter(e=>e.type==='page').slice(0,8).map(e=>`<a class="site-card" href="/editor/${encodeURIComponent(s.id)}/${encodeURIComponent(e.id)}"><span class="site-icon">▤</span><span><h3>${esc(e.title)}</h3><p>${esc(e.route)}</p></span><span class="arrow">›</span></a>`).join('')||'<div class="muted">尚无页面，请先添加内容。</div>'}</div></div><div class="help-hint" style="margin-top:19px"><strong>提示</strong>：网站设置用于公司信息和域名；可视化编辑器用于调整页面外观。两者不会混在同一表单里。</div>`;
`<div class="section-heading"><div><h2>第三步 · 品牌标识</h2><p>上传 Logo 和设置顶部联系按钮。</p></div></div><div class="panel"><div class="panel-head"><div><h2>🏷 Logo 与联系按钮</h2><p>Logo 显示在网站顶部左侧；联系按钮显示在导航右侧。</p></div></div><div style="display:grid;grid-template-columns:1fr 1fr;gap:20px"><div><label style="font-size:12px;font-weight:650;color#3d5067;display:block;margin-bottom:8px">网站 Logo</label><div style="display:flex;gap:12px;align-items:center">${s.logo?`<img src="${esc(s.logo)}" alt="Logo" style="max-height:48px;max-width:180px;border-radius:6px;border:1px solid #e2e8f0;padding:4px 8px;background#fff">`:'<div style="width:120px;height:48px;border:2px dashed#b8c8dc;border-radius:8px;display:flex;align-items:center;justify-content:center;color#8494a6;font-size:11px">暂无 Logo</div>'}<div><input type="file" id="logoFile" accept="image/png,image/jpeg,image/webp,image/svg+xml" style="display:none" onchange="W.uploadLogo(this.files[0])"><button class="btn btn-tiny" onclick="document.getElementById('logoFile').click()">${s.logo?'更换':'上传'} Logo</button>${s.logo?' <button class="btn btn-tiny" onclick="W.removeLogo()" style="color#c14f45">移除</button>':''}</div></div></div><div><label style="font-size:12px;font-weight:650;color#3d5067;display:block;margin-bottom:8px">顶部联系按钮</label><div style="display:grid;gap:8px"><input id="ctaTextInput" placeholder="按钮文字（如 Contact Us）" value="${esc(state.siteDesign?.header?.cta_text||'Contact Us')}" style="padding:8px 12px;border:1px solid#d9e1ed;border-radius:8px"><input id="ctaHrefInput" placeholder="链接（如 /contact-us/）" value="${esc(state.siteDesign?.header?.cta_href||'/contact-us/')}" style="padding:8px 12px;border:1px solid#d9e1ed;border-radius:8px"><div style="display:flex;gap:8px;align-items:center"><label style="font-size:12px;display:flex;gap:6px;align-items:center"><input type="checkbox" id="ctaShowInput" ${state.siteDesign?.header?.show_cta!==false?'checked':''}> 显示按钮</label><button class="btn btn-tiny btn-primary" type="button" onclick="W.saveCta()">保存按钮设置</button></div></div></div></div></div>`+
`<div class="section-heading"><div><h2>第四步 · 设计网页</h2><p>挑选要修改的页面；可在设计器中编辑导航、页眉、页脚及各设备布局。</p></div></div><div class="panel"><div class="panel-head"><div><h2>选择要设计的页面</h2><p>修改先保存为草稿，正式发布设计后才会参与下一次静态构建。</p></div></div><div class="grid-2 grid-equal">${state.entries.filter(e=>e.type==='page').slice(0,8).map(e=>`<a class="site-card" href="/editor/${encodeURIComponent(s.id)}/${encodeURIComponent(e.id)}"><span class="site-icon">▤</span><span><h3>${esc(e.title)}</h3><p>${esc(e.route)}</p></span><span class="arrow">›</span></a>`).join('')||'<div class="muted">尚无页面，请先添加内容。</div>'}</div></div><div class="help-hint" style="margin-top:19px"><strong>提示</strong>：网站设置用于公司信息和域名；可视化编辑器用于调整页面外观。两者不会混在同一表单里。</div>`;
}
function imports(){if(!currentSite())return noSite();return htmlHeading('导入与迁移','根据您已有的资料选择操作方式：Excel 产品、WordPress 网站，或者外部 API / 数据库。')+
`<div class="quick-grid"><a class="quick-card" href="/production-v8"><span class="quick-ico">▤</span><span><h3>导入 Excel / CSV</h3><p>推荐先预览字段、检查冲突，再确认提交。</p><span class="quick-more">安全导入与批次回滚 →</span></span></a><a class="quick-card" href="/production-v8"><span class="quick-ico">⇄</span><span><h3>迁移 WordPress 旧站</h3><p>迁移会话、文章采集、图片与 SEO 检查。</p><span class="quick-more">打开迁移工作台 ↗</span></span></a><a class="quick-card" href="/production-v8"><span class="quick-ico">⌘</span><span><h3>API / XML / MySQL</h3><p>连接外部业务系统，进行字段映射和分批导入。</p><span class="quick-more">进入高级导入 ↗</span></span></a></div>`+
@@ -375,4 +376,27 @@ function addNavItem(){navItems.push({title:'新菜单',route:'/'});drawNavEditor
function removeNav(i){navItems.splice(i,1);drawNavEditor()}
function moveNav(i,dir){const t=navItems[i];navItems[i]=navItems[i+dir];navItems[i+dir]=t;drawNavEditor()}
window.W={addNavItem,removeNav,moveNav,saveNavDraft,publishNav};
// Logo 上传与 CTA 设置
async function uploadLogo(file){if(!file||!state.site)return;try{
const form=new FormData();form.append('file',file);
const r=await api(`/api/sites/${state.site.id}/media`,{method:'POST',body:form});
await api(`/api/sites/${state.site.id}`,{method:'PATCH',body:JSON.stringify({logo:r.url})});
await refreshSiteKeepView();rerender();toast('Logo 已上传并生效');
}catch(e){toast('Logo 上传失败：'+e.message,true)}}
async function removeLogo(){if(!state.site)return;try{
await api(`/api/sites/${state.site.id}`,{method:'PATCH',body:JSON.stringify({logo:''})});
await refreshSiteKeepView();rerender();toast('Logo 已移除');
}catch(e){toast(e.message,true)}}
async function saveCta(){if(!state.site)return;try{
const text=$('#ctaTextInput')?.value?.trim()||'Contact Us';
const href=$('#ctaHrefInput')?.value?.trim()||'/contact-us/';
const show=$('#ctaShowInput')?.checked!==false;
const d=await api(`/api/sites/${state.site.id}/site-design`);
const config=d.config||{};config.header=config.header||{};
config.header.cta_text=text;config.header.cta_href=href;config.header.show_cta=show;
await api(`/api/sites/${state.site.id}/site-design`,{method:'PUT',body:JSON.stringify({config,expected_revision:d.revision})});
const r2=await api(`/api/sites/${state.site.id}/site-design/publish`,{method:'POST',body:JSON.stringify({expected_revision:(d.revision||0)+1})});
toast('联系按钮已保存，重新构建后生效');
}catch(e){toast('保存失败：'+e.message,true)}}
window.W.uploadLogo=uploadLogo;window.W.removeLogo=removeLogo;window.W.saveCta=saveCta;
document.addEventListener('DOMContentLoaded',init);