upgrade: adopt V8.21.3 (V8.13→8.21.3: P5 SFTP/S3, P6 multilingual, editor overhaul, enterprise hardening)
Overlay ~150 upstream items onto our V8.12 base, preserving trade-pro
theme, registry tests, and design docs. Re-applied our patch set
(discovery/env_for/blocks.css/type-mapping/theme_color/frontend entries,
test_theme_pro_v3 mods) — all anchors survived upstream evolution.
New platform enhancement (fixes upgrade-introduced regression):
multilingual.site_locale now honors settings_json.locale, plus
PUT /api/i18n/sites/{id}/locale — standalone English sites get
<html lang='en'> under the V8.15 locale-rewrite pipeline.
compose: adopt V8.21.3 (image 8.21.3-dev.1, /api/ready probes, MySQL/S3
env) with project name pinned to siteforge-v8-10 (data volumes).
Tests: 356 passed / 11 failed — all 11 confirmed pre-existing in
pristine V8.21.3 on this host (10 upstream Windows env + our build test
now green after locale fix). Patch registry updated in plan doc.
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
@@ -31,3 +31,54 @@ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,te
|
||||
.pro-pages-nav a{padding:.7rem 1.1rem;border:1px solid currentColor;border-radius:.4rem;text-decoration:none}
|
||||
.pro-pages-nav a:focus-visible{outline:3px solid var(--accent,#2563eb);outline-offset:3px}
|
||||
.pro-pages-nav span{font-size:.875rem}
|
||||
|
||||
/* P6 international sites: small, keyboard-operable language switch. */
|
||||
.sf-language-switch{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 12px;padding:4px;border:1px solid rgba(120,130,145,.22);border-radius:10px;background:rgba(255,255,255,.08)}
|
||||
.sf-language-switch a{font:inherit;font-size:12px;line-height:1.5;padding:4px 7px;border-radius:6px;color:inherit;text-decoration:none}
|
||||
.sf-language-switch a[aria-current="page"]{font-weight:700;text-decoration:underline;text-underline-offset:3px}
|
||||
.sf-language-switch a:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
|
||||
@media(max-width:640px){.sf-language-switch{margin:6px 0;width:auto}}
|
||||
|
||||
/* V8.21.3 — Four-theme unified mobile off-canvas navigation & optional tab bar.
|
||||
Desktop remains unchanged. Phone / tablet use one accessible drawer. */
|
||||
.sf-mobile-tabs{display:none!important}
|
||||
.sf-drawer-header,.sf-mobile-drawer-backdrop,.sf-drawer-extra{display:none}
|
||||
@media(max-width:1024px){
|
||||
.pro-head-inner{flex-wrap:nowrap!important;gap:12px!important}
|
||||
.pro-mobile-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto!important;flex:0 0 44px;min-width:44px;min-height:44px;position:relative;z-index:3}
|
||||
.pro-catalog-toggle{display:none!important}
|
||||
.pro-navigation,.pro-navigation.is-open{display:flex!important;position:fixed!important;inset:0 0 0 auto!important;width:min(88vw,360px)!important;height:100dvh!important;height:100vh;max-height:100dvh!important;flex:unset!important;flex-direction:column!important;align-items:stretch!important;order:unset!important;margin:0!important;padding:0 0 calc(20px + env(safe-area-inset-bottom,0px))!important;overflow-x:hidden;overflow-y:auto!important;background:var(--pro-background,#fff)!important;color:var(--pro-text,#19283c)!important;border:0!important;border-left:1px solid var(--pro-border,#ddd)!important;box-shadow:-15px 0 45px #0002!important;z-index:1201!important;transform:translateX(105%);visibility:hidden;pointer-events:none;transition:transform .24s ease,visibility .24s ease!important;overscroll-behavior:contain}
|
||||
.pro-navigation.is-open{transform:translateX(0);visibility:visible;pointer-events:auto}
|
||||
.sf-drawer-header{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:20px 18px;border-bottom:1px solid var(--pro-border,#dde3e9);font-size:17px;font-weight:750;position:sticky;top:0;background:var(--pro-background,#fff);z-index:2}
|
||||
.sf-drawer-close{min-width:44px;min-height:44px;border:1px solid var(--pro-border,#dde3e9);color:inherit;background:transparent;border-radius:10px;font-size:24px;cursor:pointer}
|
||||
.sf-mobile-drawer-backdrop{display:block;position:fixed;inset:0;z-index:1200;background:#0b1b31a3;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility .24s ease}
|
||||
.sf-mobile-drawer-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto}
|
||||
body.sf-drawer-open{overflow:hidden!important}
|
||||
.pro-navigation>a,.pro-navigation .pro-nav-group>a,.pro-navigation .sf-drawer-extra>a{display:flex;align-items:center;min-height:50px;padding:13px 20px!important;font-size:15px!important;color:inherit!important;white-space:normal;border-bottom:1px solid var(--pro-border,#dde3e9)!important;text-decoration:none!important}
|
||||
.pro-navigation .pro-nav-group{display:flex;position:relative;flex-wrap:wrap!important;width:100%;gap:0;align-items:center;justify-content:space-between}
|
||||
.pro-navigation .pro-nav-group>a{flex:1;min-width:0}
|
||||
.pro-navigation .pro-nav-disclose{margin-right:12px;min-width:44px;min-height:44px;border-radius:9px;background:var(--pro-surface,#f4f6f8)}
|
||||
.pro-navigation .pro-nav-children{position:static!important;width:100%!important;max-width:100%!important;box-shadow:none!important;border-left:3px solid var(--pro-accent,#e77730);border-radius:0!important;margin:0 0 8px 14px!important;flex-basis:calc(100% - 14px)!important;background:var(--pro-surface,#f6f8fa)}
|
||||
.pro-navigation .pro-nav-children a{padding:12px 16px!important;font-size:14px!important;color:inherit!important;min-height:44px}
|
||||
.sf-drawer-extra{display:block;padding:12px 0 5px}.sf-drawer-extra strong{display:block;font-size:12px;letter-spacing:.06em;padding:12px 20px;opacity:.65}.sf-drawer-extra a{font-size:14px!important}
|
||||
.sf-drawer-close:focus-visible,.pro-mobile-toggle:focus-visible,.pro-nav-disclose:focus-visible,.sf-mobile-tab:focus-visible{outline:3px solid var(--pro-accent,#ff8200);outline-offset:2px}
|
||||
}
|
||||
@media(max-width:767px){
|
||||
.pro-header-cta{display:none!important}
|
||||
.pro-head-inner .pro-logo{min-width:0;max-width:calc(100% - 65px)}
|
||||
.pro-logo-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.pro-home-hero .pro-home-grid{min-height:0!important}
|
||||
.pro-home-hero .pro-hero-art{min-height:230px}
|
||||
.pro-card,.pro-card-cover,.pro-product-media{max-width:100%;min-width:0}
|
||||
.pro-rich img,.pro-content img,.sf-canvas img{max-width:100%;height:auto}
|
||||
.pro-rich table{max-width:100%;overflow:auto}
|
||||
.pro-grid,.pro-footer-top{min-width:0}
|
||||
.sf-mobile-tabs{display:grid!important;position:fixed;z-index:1100;bottom:0;left:0;right:0;grid-template-columns:repeat(var(--sf-mobile-tab-count,4),minmax(0,1fr));align-items:stretch;padding:5px 6px calc(5px + env(safe-area-inset-bottom,0px));min-height:63px;background:var(--pro-background,#fff);color:var(--pro-text,#263446);border-top:1px solid var(--pro-border,#dfe4eb);box-shadow:0 -6px 24px #13223914}
|
||||
.sf-mobile-tab{appearance:none;border:0!important;background:transparent!important;color:inherit!important;text-decoration:none!important;padding:6px 2px;min-height:50px;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;border-radius:9px;cursor:pointer;font-family:inherit}
|
||||
.sf-tab-icon{font-size:23px;line-height:1.15;font-weight:500}
|
||||
.sf-tab-label{font-size:11px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.sf-mobile-tab[aria-current=page]{color:var(--pro-accent,#e47730)!important;background:var(--pro-surface,#f5f6f8)!important}
|
||||
body:has(> .sf-mobile-tabs){padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
|
||||
}
|
||||
@media(min-width:768px){.sf-mobile-tabs{display:none!important}}
|
||||
@media(prefers-reduced-motion:reduce){.pro-navigation,.sf-mobile-drawer-backdrop{transition:none!important}}
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
/* Safe, deterministic editor operations. Exported for Node regression tests. */
|
||||
(function (root, factory) {
|
||||
const api=factory();
|
||||
if(typeof module==='object' && module.exports)module.exports=api;
|
||||
root.SiteForgeEditorHelpers=api;
|
||||
})(typeof window!=='undefined'?window:globalThis, function(){
|
||||
'use strict';
|
||||
const deepCopy=value=>JSON.parse(JSON.stringify(value));
|
||||
function reorder(items, from, to){
|
||||
if(!Array.isArray(items)||!Number.isInteger(from)||!Number.isInteger(to)||from<0||to<0||from>=items.length||to>=items.length)return null;
|
||||
if(from===to)return items.slice();
|
||||
const next=items.slice();next.splice(to,0,next.splice(from,1)[0]);return next;
|
||||
}
|
||||
function duplicate(block, idFactory){
|
||||
if(!block || typeof idFactory!=='function')throw Error('无效的区块');
|
||||
const item=deepCopy(block);
|
||||
const rewrite=node=>{
|
||||
node.id=idFactory();
|
||||
if(node.type==='layout')for(const col of node.columns||[])for(const child of col.blocks||[])rewrite(child);
|
||||
};
|
||||
rewrite(item);return item;
|
||||
}
|
||||
function filterBlocks(blocks, term, names={}){
|
||||
const query=String(term||'').trim().toLocaleLowerCase();
|
||||
if(!query)return blocks.map((block,index)=>({block,index}));
|
||||
return blocks.flatMap((block,index)=>{
|
||||
const description=[block.title,block.subtitle,block.type,names[block.type]?.name]
|
||||
.concat(block.type==='layout'?(block.columns||[]).flatMap(c=>(c.blocks||[]).map(b=>b.title||b.type)):[])
|
||||
.filter(x=>typeof x==='string').join(' ').toLocaleLowerCase();
|
||||
return description.includes(query)?[{block,index}]:[];
|
||||
});
|
||||
}
|
||||
function historyState(snapshots,cursor){return {canUndo:cursor>0,canRedo:cursor>=0&&cursor<snapshots.length-1};}
|
||||
function clampNumber(value,min,max,fallback){const n=Number(value);return Number.isFinite(n)?Math.max(min,Math.min(max,n)):fallback;}
|
||||
function shouldAcceptPreview(requestedPage,requestedSeq,currentPage,currentSeq){
|
||||
return requestedPage===currentPage&&requestedSeq===currentSeq;
|
||||
}
|
||||
return {reorder,duplicate,filterBlocks,historyState,clampNumber,shouldAcceptPreview};
|
||||
});
|
||||
@@ -2,3 +2,89 @@
|
||||
@media(max-width:1200px){.studio-body{grid-template-columns:240px minmax(0,1fr) 290px}.preview-note{display:none}.studio-top{gap:8px}.file-name{max-width:180px}}@media(max-width:950px){.studio-body{grid-template-columns:210px minmax(0,1fr)}.right-pane{position:fixed;right:0;top:72px;bottom:0;width:310px;z-index:3;box-shadow:-8px 0 22px #0001}.studio-top .ui-btn.ghost{display:none}}@media(max-width:650px){.studio-body{grid-template-columns:1fr}.left-pane{display:none}.right-pane{display:none}.studio-top{padding:0 12px}.file-name{display:none}.save-status{display:none}}
|
||||
|
||||
.layout-editor-col{border:1px solid #dfe5ed;border-radius:12px;padding:10px;margin:12px 0;background:#f8fafc}.layout-editor-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:space-between}.layout-editor-title input{width:56px}.layout-editor-title button,.layout-child button{border:0;background:none;color:#54647a;cursor:pointer}.layout-child{background:white;border:1px solid #e5eaf3;border-radius:9px;margin:8px 0;padding:9px}.layout-child label{display:block;font-size:11px;color:#475569;margin:7px 0}.layout-child input,.layout-child select{display:block;width:100%;margin-top:3px;padding:7px;border:1px solid #e1e6ee;border-radius:6px}.layout-child-toolbar{display:flex;flex-wrap:wrap;gap:4px}.layout-child-toolbar button{background:#e8effa;border:0;padding:5px 7px;border-radius:6px;cursor:pointer;font-size:11px}
|
||||
/* V8.21.1 visual studio usability refresh — no saved blueprint schema changes. */
|
||||
:root{--studio-accent:#ed742d;--studio-focus:#e48b42;--studio-border:#e6eaf0;--studio-shadow:0 20px 54px rgba(31,48,69,.08)}
|
||||
.studio-top{box-shadow:0 1px 9px rgba(29,47,75,.035);padding-inline:18px;gap:9px}
|
||||
.brand>a{background:#252e3c;border-radius:10px;color:#ff9959}
|
||||
.top-center{margin:auto;background:#edf1f6}
|
||||
.icon-btn.on{color:#b95722}
|
||||
.ui-btn.primary{background:#dc6b2b;border-color:#dc6b2b}
|
||||
.ui-btn:focus-visible,.icon-btn:focus-visible,.block-row:focus-visible,.palette button:focus-visible,.row-actions button:focus-visible,.inspector-nav button:focus-visible{outline:2px solid var(--studio-focus);outline-offset:2px}
|
||||
.ui-btn:disabled,.row-actions button:disabled{opacity:.3;cursor:not-allowed}
|
||||
.pane-switcher{display:flex;gap:3px}
|
||||
.pane-switcher .ui-btn{padding:8px 10px}
|
||||
.studio-body{grid-template-columns:minmax(270px,290px) minmax(0,1fr) minmax(320px,350px)}
|
||||
.left-pane,.right-pane{background:#fff}
|
||||
.pane-heading{padding:22px 18px 14px}
|
||||
.pane-heading h3{font-size:16px;letter-spacing:0}
|
||||
.section-label{display:flex;justify-content:space-between;align-items:center;padding:14px 19px 9px;color:#56677b;font-size:11px;letter-spacing:0}
|
||||
.section-caption{font-size:10px;color:#a0abbb;font-weight:500}
|
||||
.structure-filter{margin:4px 13px 10px;display:flex;align-items:center;border:1px solid #dfe6ee;background:#f7f9fc;border-radius:9px;overflow:hidden;min-height:38px}
|
||||
.structure-filter:focus-within{border-color:var(--studio-focus);box-shadow:0 0 0 3px #f39a4923}
|
||||
.structure-filter input{background:transparent;border:0;outline:0;min-width:0;flex:1;padding:9px 12px;font-size:12px;color:#25364e}
|
||||
.structure-filter button{border:0;background:transparent;font-size:19px;color:#8796a7;width:34px}
|
||||
.structure-hint{color:#8190a3;font-size:10px;padding:8px 19px 17px;line-height:1.7}
|
||||
.block-list{padding:0 11px;min-height:60px}
|
||||
.block-row{background:#fff;box-shadow:0 2px 10px #334b6207;padding:9px 8px;margin-bottom:6px;gap:7px;border-color:#e9edf2;transition:border-color .15s,background .15s}
|
||||
.block-row:hover{border-color:#c4cedc;background:#fafbfd}
|
||||
.block-row.selected{background:#fff7f1;border-color:#f19b59;box-shadow:0 0 0 1px #f8e3d5}
|
||||
.block-row.is-hidden{opacity:.55}
|
||||
.block-icon{width:29px;height:29px;color:#d67b35;background:#fff8f2;flex-shrink:0}
|
||||
.block-copy strong{font-size:12px;color:#303e51}
|
||||
.block-copy small{font-size:10px;color:#7e90a5}
|
||||
.drag-handle{font-size:14px}
|
||||
.row-actions{display:flex;gap:0;flex-shrink:0}
|
||||
.row-actions button{font-size:12px;min-width:18px;padding:4px 2px;border-radius:5px}
|
||||
.row-actions button:hover:not(:disabled){background:#fff0e4;color:#c96728}
|
||||
.block-list .no-selection{padding:15px;margin:0 2px 10px}
|
||||
.palette{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:13px}
|
||||
.palette button{padding:10px 9px;border-style:solid}
|
||||
.palette button:hover{border-color:#e8aa76;background:#fff8f3}
|
||||
.palette button span{color:#d77936}
|
||||
.preview-workspace{background:#eff2f6}
|
||||
.preview-head{padding:0 16px;gap:9px}
|
||||
.preview-note{max-width:260px;line-height:1.3;text-align:right}
|
||||
.live-dot{background:#3aa688}
|
||||
.live-dot.loading{background:#db983a;animation:studio-pulse 1.25s infinite}
|
||||
.live-dot.error{background:#cb4e4e}
|
||||
@keyframes studio-pulse{50%{opacity:.3;box-shadow:0 0 0 7px #efab4626}}
|
||||
.stage{padding:22px 15px}
|
||||
.device-frame{border-radius:8px;box-shadow:var(--studio-shadow);overflow:hidden;min-height:300px}
|
||||
.device-frame.tablet,.device-frame.phone{max-width:calc(100% - 4px)}
|
||||
iframe{min-height:590px;height:calc(100vh - 224px)}
|
||||
.stage-footer{min-height:35px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 19px;font-size:10px;color:#8b9bad;border-top:1px solid #e1e7ee}
|
||||
.inspector-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:4px;margin:0 16px 17px;border-radius:9px;background:#f1f4f8}
|
||||
.inspector-nav button{background:none;border:0;border-radius:6px;padding:10px 5px;font-size:12px;color:#78869a;font-weight:650}
|
||||
.inspector-nav button[aria-selected=true]{background:white;box-shadow:0 1px 5px #233d5f12;color:#b95c2b}
|
||||
.inspector{padding:0 19px}
|
||||
.inspector [data-inspector-section][hidden]{display:none!important}
|
||||
.inspector-title{margin:0 0 16px}
|
||||
.inspector-title h3{font-size:14px}
|
||||
.right-foot{background:#faf8f5;border-color:#f0e6d7;margin-top:auto}
|
||||
.studio .section-label,.studio .pane-heading h3{user-select:none}
|
||||
.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
|
||||
@media(max-width:1400px){.studio-body{grid-template-columns:255px minmax(0,1fr) 310px}.studio-top{gap:6px}.studio-top>.ui-btn{padding:9px 10px}}
|
||||
@media(max-width:1130px){.studio-top>.ui-btn.ghost:not(#studioUndo):not(#studioRedo){display:none}.studio-body{grid-template-columns:245px minmax(0,1fr) 295px}.file-name{max-width:150px}.pane-switcher{display:flex}}
|
||||
@media(max-width:950px){.studio-body{grid-template-columns:230px minmax(0,1fr)}.right-pane{transform:translateX(105%);transition:transform .2s;display:flex!important;z-index:7;top:72px;width:min(340px,92vw)}body.show-inspector .right-pane{transform:translateX(0)}.preview-note{display:none}.studio-top>.ui-btn.ghost{display:none}}
|
||||
@media(max-width:650px){.studio{min-height:480px}.studio-body{grid-template-columns:minmax(0,1fr)}.left-pane{display:flex!important;position:fixed;z-index:7;top:72px;bottom:0;left:0;width:min(315px,88vw);transform:translateX(-106%);transition:transform .2s;box-shadow:6px 0 20px #17283f12}body.show-structure .left-pane{transform:translateX(0)}.right-pane{display:flex!important}.studio-top{padding-inline:8px}.pane-switcher .ui-btn{padding:8px}.studio-top .brand{display:none}.top-center{margin-inline:auto}.studio-top .ui-btn.primary{padding:9px 10px}.preview-head{height:42px;min-height:42px;padding:0 9px}.stage{padding:10px 6px}.device-frame.phone,.device-frame.tablet{max-width:100%}.stage-footer{padding:8px 10px}.studio-top .save-status{display:none}}
|
||||
|
||||
@media(max-width:950px){.studio-top>#saveDraftButton.ui-btn.ghost{display:inline-flex!important;align-items:center;padding:9px 10px;color:#c5652d;background:#fff6ed;border-color:#eec49e}}
|
||||
@media(max-width:430px){.studio-top #saveDraftButton{font-size:11px}.studio-top .ui-btn.primary{font-size:11px}.icon-btn{padding:6px 7px}}
|
||||
|
||||
.studio-actions{position:relative;flex-shrink:0}.studio-actions summary{display:flex;gap:6px;align-items:center;list-style:none;border:1px solid #e5eaf0;border-radius:8px;background:#fff;color:#394a60;padding:10px 13px;font-weight:650;font-size:12px;cursor:pointer;user-select:none}.studio-actions summary::-webkit-details-marker{display:none}.studio-actions[open] summary{border-color:#dbaa89;background:#fff8f1}.studio-actions-menu{position:absolute;right:0;top:calc(100% + 8px);display:grid;gap:5px;min-width:205px;z-index:12;padding:9px;border:1px solid #e2e7ed;border-radius:12px;background:#fff;box-shadow:0 15px 42px #283b5328}.studio-actions-menu .ui-btn{width:100%;text-align:left;border:0;padding:11px 12px;background:transparent}.studio-actions-menu .ui-btn:hover{background:#f5f7fa}.studio-actions-menu .ui-btn.ghost{display:block!important}@media(max-width:650px){.studio-actions summary{font-size:11px;padding:9px 7px}.studio-actions-menu{right:-15px;min-width:185px}}
|
||||
/* V8.21.2 Easy Studio — task-first UX; no schema or API changes */
|
||||
.sf-easy-top{height:70px;min-height:70px;padding:0 20px;gap:12px;z-index:15}
|
||||
.sf-easy-top .brand{min-width:138px}.sf-easy-top .brand small{font-size:10px;color:#a1aab7}.sf-easy-file{display:flex;flex-direction:column;gap:3px;min-width:130px;max-width:210px}.sf-easy-file small{color:#8b98a9;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sf-easy-file strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sf-easy-device{margin-left:auto;margin-right:auto;flex:0 0 auto;display:flex}.sf-easy-device .icon-btn{font-size:12px;padding:8px 12px;font-weight:700}.sf-easy-save-status{padding:7px 10px;max-width:120px;overflow:hidden;text-overflow:ellipsis;background:#f3f6f9;border-radius:7px}.sf-easy-save-status.dirty{color:#b96d21;background:#fff5e8}.sf-save-btn{border-color:#e7a36d!important;color:#b65d23!important;background:#fffaf5!important;padding-inline:15px}.sf-publish-btn{padding-inline:19px;background:#df752f!important}.sf-easy-top .studio-actions{margin:0}.sf-easy-top .studio-actions summary{padding:10px 11px}.sf-easy-top .studio-actions-menu{min-width:195px;max-height:80vh;overflow-y:auto}.sf-easy-top .studio-actions-menu .ui-btn{font-size:12px}
|
||||
.sf-steps{display:flex;align-items:center;gap:13px;padding:10px 22px;background:#fffaf6;border-bottom:1px solid #f2e3d7;color:#7d8290;min-height:45px;font-size:12px}.sf-steps-label{color:#b2683a;font-weight:800;flex-shrink:0}.sf-step{white-space:nowrap;font-weight:640;border-radius:8px;padding:5px 8px}.sf-step.active{background:#fce7d7;color:#b85b23}.sf-step-separator{color:#d6ad90}.sf-guide-link{margin-left:auto;border:0;background:none;color:#bc6529;font-weight:750;font-size:12px;white-space:nowrap;padding:5px 8px;text-decoration:underline;text-underline-offset:3px}
|
||||
.studio-body{min-height:0;grid-template-columns:270px minmax(0,1fr) 320px}.left-pane,.right-pane{min-height:0}.left-pane .pane-heading{padding-bottom:10px}.left-pane .pane-heading h3,.right-pane .pane-heading h3{font-size:17px}.sf-page-picker{margin-bottom:10px!important}.sf-page-picker label{color:#5f7184;font-size:11px}.sf-page-picker select{font-size:12px}.sf-add-area{padding:2px 15px 15px}.sf-add-button{display:block;width:100%;border:1px solid #dc732f;background:#e47b38;color:#fff;border-radius:10px;padding:14px 12px;font-size:14px;font-weight:800;box-shadow:0 4px 11px #dc732f25;text-align:center;cursor:pointer}.sf-add-button:hover{background:#ce6427}.sf-add-area p{margin:9px 1px 0;color:#8a97a8;font-size:11px;line-height:1.6}.sf-library-panel{margin:0 13px 12px;border:1px solid #f2cfb4;background:#fffaf6;border-radius:12px;padding:9px 0;box-shadow:0 7px 15px #b55e1f12}.sf-library-panel[hidden]{display:none!important}.sf-panel-caption{display:flex;justify-content:space-between;gap:5px;align-items:center;padding:4px 12px 10px;font-size:11px;font-weight:700;color:#895b3c}.sf-panel-caption button{border:none;background:transparent;color:#b86327;font-size:11px}.sf-library-panel .palette{grid-template-columns:repeat(2,minmax(0,1fr));padding:2px 9px 12px;gap:7px}.sf-library-panel .palette button{min-height:42px;background:#fff;border-style:solid;font-size:11px}.sf-subsection{margin:0 9px 6px;padding-top:8px;border-top:1px solid #f2ddc7}.sf-subsection>summary{padding:7px 5px;cursor:pointer;color:#85624b;font-size:11px;font-weight:750}.sf-subsection .palette{padding:8px 0;grid-template-columns:1fr}.left-pane .section-label{padding-top:13px;font-size:11px;color:#56677b}.block-list{padding:0 12px;min-height:75px}.block-row{min-height:54px}.block-copy strong{font-size:12px}.row-actions button{min-width:19px}.sf-advanced{margin:6px 13px 18px;border:1px solid #e6eaf0;border-radius:10px;background:#fafbfc}.sf-advanced summary{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:13px;cursor:pointer;font-weight:750;font-size:12px;color:#67758b}.sf-advanced summary::after{content:'⌄';font-size:15px;margin-left:auto;color:#99a7b9}.sf-advanced summary span{font-size:10px;font-weight:400;color:#9aa6b5}.sf-advanced[open]{background:#fff}.sf-advanced[open] summary{border-bottom:1px solid #edf0f4}.sf-advanced .field{margin:13px}.sf-advanced-buttons{display:grid;gap:7px;padding:0 13px 10px}.sf-advanced-buttons button{white-space:normal;text-align:left}.sf-advanced-note{font-size:10px;color:#9aa6b5;line-height:1.7;margin:4px 13px 13px}
|
||||
.structure-hint{padding-bottom:12px}.preview-workspace{min-width:0}.preview-head{min-height:48px;height:48px}.preview-note{font-size:10px}.right-pane .pane-heading{padding-bottom:15px}.right-pane .overline{letter-spacing:.4px;color:#d67832;font-size:10px}.right-pane .inspector-nav{margin-top:0}.sf-advanced-foot{display:block;padding:0;margin:22px 15px;border:1px solid #eceff2;background:#fafbfc}.sf-advanced-foot summary{padding:13px 15px;cursor:pointer;font-size:11px;font-weight:750;color:#617084}.sf-advanced-foot p{margin:0 15px 14px}.right-pane .no-selection b{display:block;color:#53667d;font-size:14px}.right-pane .no-selection p{font-size:12px;line-height:1.7}.right-pane .no-selection .ui-btn{margin-top:8px}.right-pane .prop label{font-size:12px;color:#5c6a7f}.right-pane .prop input,.right-pane .prop textarea,.right-pane .prop select{font-size:13px;padding:11px 12px}.sf-help-dialog{border:1px solid #dfe4eb;border-radius:18px;width:min(535px,94vw);padding:26px;box-shadow:0 25px 100px #23324835}.sf-help-dialog::backdrop{background:#1c2c405a}.sf-help-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.sf-help-head h2{margin:4px 0 15px;font-size:23px;color:#28364a}.sf-help-steps{padding-left:29px;line-height:1.65}.sf-help-steps li{margin:11px 0 17px;padding-left:5px;font-size:13px}.sf-help-steps b{font-size:15px;color:#c8682a}.sf-help-steps p{margin:5px 0;color:#6a7a8b}.sf-guide-note{border-radius:10px;padding:12px 15px;background:#f6f7f9;color:#718091;font-size:12px;line-height:1.6}.sf-guide-done{width:100%;margin-top:18px;font-size:14px}
|
||||
@media(max-width:1330px){.studio-body{grid-template-columns:245px minmax(0,1fr) 305px}.sf-easy-top{gap:8px;padding:0 12px}.sf-easy-top .brand{min-width:100px}.sf-easy-file{max-width:148px}.sf-easy-device .icon-btn{padding:8px}}
|
||||
@media(max-width:1060px){.studio-body{grid-template-columns:230px minmax(0,1fr)}.right-pane{position:fixed;right:0;top:115px;bottom:0;width:min(338px,92vw);display:flex!important;transform:translateX(106%);z-index:11;box-shadow:-10px 0 25px #1c2c4025}body.show-inspector .right-pane{transform:translateX(0)}.sf-easy-top .brand small,.sf-easy-save-status{display:none}.sf-easy-file{max-width:120px}.studio-top .ui-btn.ghost.sf-save-btn{display:inline-flex!important}.sf-steps{font-size:11px;gap:7px}}
|
||||
@media(max-width:720px){.sf-steps{min-height:39px;padding:5px 10px;gap:5px}.sf-step-separator,.sf-step,.sf-steps-label{display:none}.sf-steps::before{content:'① 选内容 → ② 改文字与样式 → ③ 保存发布';font-weight:700;font-size:11px;color:#a4653b}.sf-guide-link{font-size:11px}.studio-body{grid-template-columns:minmax(0,1fr)}.left-pane{position:fixed;top:109px;bottom:0;left:0;width:min(315px,92vw);z-index:11;display:flex!important;transform:translateX(-106%);box-shadow:10px 0 25px #1c2c4020}body.show-structure .left-pane{transform:translateX(0)}.right-pane{top:109px}.sf-easy-top{height:70px;min-height:70px;padding-inline:8px}.sf-easy-top .brand,.sf-easy-file{display:none}.sf-easy-device{margin-left:0;margin-right:auto}.sf-easy-device .icon-btn{font-size:11px;padding:7px}.sf-save-btn,.sf-publish-btn{font-size:11px;padding:9px!important}.sf-easy-top .studio-actions summary{padding:9px 8px;font-size:11px}.sf-easy-top .studio-actions-menu{right:0}.pane-switcher{display:none}.stage{padding:9px 6px}.device-frame.phone,.device-frame.tablet{max-width:100%}}
|
||||
@media(max-width:395px){.sf-easy-device .icon-btn{padding:6px;font-size:10px}.sf-guide-link{font-size:10px}.sf-save-btn{padding:8px 6px!important}.sf-publish-btn{padding:8px 6px!important}.sf-steps::before{content:'选区块 → 修改 → 保存发布';font-size:10px}}
|
||||
/* Responsive panel toggle is always available on narrow screens. */
|
||||
.sf-easy-top .sf-pane-controls{display:none;gap:5px}
|
||||
@media(max-width:1060px){.sf-easy-top .sf-pane-controls{display:flex}.sf-easy-top .sf-pane-controls button{padding:7px 9px;font-size:11px;border:1px solid #e2e6ed;background:white;border-radius:8px}}
|
||||
|
||||
/* Accessible repeated-item forms for galleries, carousels, FAQs and features */
|
||||
.sf-array-editor{display:grid;gap:10px}.sf-array-hint{font-size:11px;line-height:1.6;color:#8391a3;margin:0 0 4px}.sf-array-card{border:1px solid #e5eaf0;background:#fafbfd;padding:11px;border-radius:10px}.sf-array-card-head{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:12px}.sf-array-card-head b{font-size:12px;color:#586a7f}.sf-array-card-head div{display:flex;gap:3px}.sf-array-card-head button{border:1px solid #e2e7ed;border-radius:5px;color:#6c7a8e;background:white;padding:4px 7px;font-size:11px}.sf-array-card-head button:last-child{color:#b95d62}.sf-array-card-head button:disabled{opacity:.3;cursor:not-allowed}.sf-array-field{display:block!important;margin:10px 0!important;font-size:11px!important;font-weight:650!important}.sf-array-field input,.sf-array-field textarea{display:block;width:100%;margin-top:5px;background:white}.sf-array-field textarea{min-height:65px}.sf-array-add{border:1px dashed #e5a77c;border-radius:9px;background:#fff8f2;color:#be672a;padding:13px 9px;font-size:12px;font-weight:800}
|
||||
|
||||
+144
-20
@@ -8,31 +8,67 @@ const api=async(p,opt={})=>{if(!['GET','HEAD','OPTIONS'].includes((opt.method||'
|
||||
const req=(method,data)=>({method,headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});
|
||||
const toast=(s,err=false)=>{const t=$('#toast');t.textContent=s;t.style.background=err?'#a23c44':'#1c3555';t.classList.add('show');setTimeout(()=>t.classList.remove('show'),3400)};
|
||||
const activePage=()=>pages.find(e=>e.id===pageId);
|
||||
const editorTools=window.SiteForgeEditorHelpers;
|
||||
let libraryOpen=false;
|
||||
let inspectorTab='content',blockSearch='',previewRequest=0,previewController=null,savePromise=null,lastContinuousEdit=0;
|
||||
|
||||
let snapshots=[],snapshotCursor=-1,draggedChild=null,draftRevision=0,siteDesign=null,siteDesignRevision=0,siteDesignPreview=null;
|
||||
function recordSnapshot(){const current=JSON.stringify({blocks,kind,layoutMode});if(snapshotCursor>=0 && snapshots[snapshotCursor]===current)return;snapshots=snapshots.slice(0,snapshotCursor+1);snapshots.push(current);if(snapshots.length>75)snapshots.shift();snapshotCursor=snapshots.length-1}
|
||||
function restoreSnapshot(index){if(index<0||index>=snapshots.length)return;snapshotCursor=index;const state=JSON.parse(snapshots[index]);blocks=state.blocks;kind=state.kind;layoutMode=state.layoutMode;selected=Math.min(selected,blocks.length-1);$('#pageTemplate').value=kind;$('#layoutMode').value=layoutMode;dirty=true;$('#saveStatus').textContent='未保存更改';Studio.draw();Studio.refreshPreview()}
|
||||
function restoreSnapshot(index){if(index<0||index>=snapshots.length)return;snapshotCursor=index;const state=JSON.parse(snapshots[index]);blocks=state.blocks;kind=state.kind;layoutMode=state.layoutMode;selected=Math.min(selected,blocks.length-1);$('#pageTemplate').value=kind;$('#layoutMode').value=layoutMode;dirty=true;$('#saveStatus').textContent='未保存更改';$('#saveStatus').classList.add('dirty');Studio.updateHistoryButtons();Studio.draw();Studio.refreshPreview()}
|
||||
const Studio={
|
||||
async init(){try{csrf=(await api('/api/auth/me')).csrf;site=await api(`/api/sites/${siteId}`);pages=await api(`/api/sites/${siteId}/entries`);schema=await api('/api/editor/blocks');$('#siteName').textContent=site.name;const select=$('#pageSelect');select.innerHTML=pages.map(e=>`<option value="${html(e.id)}">${html(e.title)} (${html(e.route)})</option>`).join('');for(let [k,v] of Object.entries(schema.page_templates))$('#pageTemplate').innerHTML+=`<option value="${k}">${html(v.name)}</option>`;Studio.renderPalette();await Studio.loadReusables();await Studio.choosePage(pageId||pages[0]?.id)}catch(e){toast('初始化失败：'+e.message,true);console.error(e)}},
|
||||
async choosePage(id){if(dirty&&!confirm('当前页面尚未保存，确定切换？')){$('#pageSelect').value=pageId;return}pageId=id;$('#pageSelect').value=id;const data=await api(`/api/sites/${siteId}/pages/${id}/studio-draft`);draftRevision=data.revision;blocks=data.blocks.map(b=>structuredClone(b));kind=data.page_template;layoutMode=data.layout_mode||'append';$('#layoutMode').value=layoutMode;selected=blocks.length?0:-1;$('#pageTemplate').value=kind;$('#pageName').textContent=data.entry.title;$('#routeDisplay').textContent=data.entry.route;dirty=false;snapshots=[];snapshotCursor=-1;recordSnapshot();Studio.draw();Studio.refreshPreview()},
|
||||
async choosePage(id){if(savePromise){toast('保存仍在进行，请稍后切换页面',true);$('#pageSelect').value=pageId;return}if(dirty&&!confirm('当前页面尚未保存，确定切换？')){$('#pageSelect').value=pageId;return}pageId=id;$('#pageSelect').value=id;const data=await api(`/api/sites/${siteId}/pages/${id}/studio-draft`);draftRevision=data.revision;blocks=data.blocks.map(b=>structuredClone(b));kind=data.page_template;layoutMode=data.layout_mode||'append';$('#layoutMode').value=layoutMode;selected=blocks.length?0:-1;$('#pageTemplate').value=kind;$('#pageName').textContent=data.entry.title;$('#routeDisplay').textContent=data.entry.route;dirty=false;snapshots=[];snapshotCursor=-1;lastContinuousEdit=0;blockSearch='';$('#blockSearch').value='';recordSnapshot();Studio.updateHistoryButtons();$('#saveStatus').textContent=draftRevision?'草稿 v'+draftRevision:'未修改';$('#saveStatus').classList.remove('dirty');Studio.draw();Studio.refreshPreview()},
|
||||
async loadReusables(){try{reusables=await api(`/api/sites/${siteId}/components`);$('#reusablePalette').innerHTML=reusables.map(x=>`<button onclick="Studio.insertReusable('${html(x.id)}')">✦ ${html(x.name)} <small>v${x.version}</small></button>`).join('')||'<span style="font-size:12px;opacity:.55;padding:10px">暂无保存的组件</span>'}catch(e){console.warn(e)}},
|
||||
async saveReusable(){const block=blocks[selected];if(!block)return toast('请先选择一个区块',true);const name=prompt('为此组件命名',block.title||schema.blocks[block.type]?.name);if(!name?.trim())return;try{await api(`/api/sites/${siteId}/components`,req('POST',{name,block}));await Studio.loadReusables();toast('组件已保存到本站组件库')}catch(e){toast(e.message,true)}},
|
||||
insertReusable(id){const saved=reusables.find(x=>x.id===id);if(!saved)return;const copy=structuredClone(saved.block);const refreshIds=item=>{item.id=crypto.randomUUID().replace(/-/g,'').slice(0,10);if(item.type==='layout')(item.columns||[]).forEach(c=>(c.blocks||[]).forEach(refreshIds))};refreshIds(copy);blocks.push(copy);selected=blocks.length-1;Studio.modified();Studio.draw();},
|
||||
insertReusable(id){const saved=reusables.find(x=>x.id===id);if(!saved)return;const copy=editorTools.duplicate(saved.block,()=>crypto.randomUUID().replace(/-/g,'').slice(0,10));blocks.push(copy);selected=blocks.length-1;Studio.modified();Studio.draw();},
|
||||
renderPalette(){let p=$('#palette');p.innerHTML=Object.entries(schema.blocks).map(([key,b])=>`<button onclick="Studio.add('${key}')"><span>${html(b.icon)}</span>${html(b.name)}</button>`).join('')},
|
||||
draw(){let list=$('#blockList');$('#blockCount').textContent=blocks.length+' 区块';list.innerHTML=blocks.map((b,i)=>`<div class="block-row ${selected===i?'selected':''}" draggable="true" data-index="${i}" ondragstart="Studio.drag(event,${i})" ondragover="event.preventDefault()" ondrop="Studio.drop(event,${i})" onclick="Studio.select(${i})"><div class="drag-handle" title="拖动排序">⠿</div><div class="block-icon">${html(schema.blocks[b.type]?.icon||'▣')}</div><div class="block-copy"><strong>${html(schema.blocks[b.type]?.name||b.type)}</strong><small>${html(b.title||b.subtitle||b.type)}</small></div><div class="row-actions"><button title="复制" onclick="event.stopPropagation();Studio.duplicate(${i})">⧉</button><button title="删除" onclick="event.stopPropagation();Studio.remove(${i})">×</button></div></div>`).join('')||'<div class="no-selection">当前没有区块，点击下方按钮添加。</div>';Studio.inspector()},
|
||||
select(i){selected=i;Studio.draw()},
|
||||
add(type){let data=structuredClone(schema.blocks[type].defaults);data.id=crypto.randomUUID().replace(/-/g,'').slice(0,10);data.type=type;data.visible=true;blocks.push(data);selected=blocks.length-1;Studio.modified();Studio.draw()},
|
||||
duplicate(i){let b=structuredClone(blocks[i]);b.id=crypto.randomUUID().replace(/-/g,'').slice(0,10);blocks.splice(i+1,0,b);selected=i+1;Studio.modified();Studio.draw()},
|
||||
toggleLibrary(force){libraryOpen=typeof force==='boolean'?force:!libraryOpen;const el=$('#sfLibraryPanel'),btn=$('#sfAddBlock');if(el)el.hidden=!libraryOpen;if(btn){btn.setAttribute('aria-expanded',String(libraryOpen));btn.textContent=libraryOpen?'× 收起区块库':'＋ 添加内容区块'};Studio.updateGuidance()},
|
||||
showHelp(){const dlg=$('#sfGuideDialog');if(dlg&&!dlg.open)dlg.showModal()},
|
||||
updateGuidance(){const one=$('#sfStep1'),two=$('#sfStep2'),three=$('#sfStep3');if(!one||!two||!three)return;one.classList.toggle('active',selected<0||libraryOpen);two.classList.toggle('active',selected>=0&&!dirty&&!libraryOpen);three.classList.toggle('active',dirty);},
|
||||
draw(){
|
||||
const list=$('#blockList');$('#blockCount').textContent=blocks.length+' 区块';
|
||||
const found=editorTools.filterBlocks(blocks,blockSearch,schema.blocks);
|
||||
list.innerHTML=found.map(({block:b,index:i})=>`<div class="block-row ${selected===i?'selected':''} ${b.visible===false?'is-hidden':''}" role="listitem" tabindex="0" draggable="true" data-index="${i}" ondragstart="Studio.drag(event,${i})" ondragend="this.classList.remove('dragging')" ondragover="event.preventDefault()" ondrop="Studio.drop(event,${i})" onkeydown="Studio.blockKeydown(event,${i})" onclick="Studio.select(${i})"><div class="drag-handle" title="拖动排序" aria-hidden="true">⠿</div><div class="block-icon">${html(schema.blocks[b.type]?.icon||'▣')}</div><div class="block-copy"><strong>${html(schema.blocks[b.type]?.name||b.type)}</strong><small>${html(b.title||b.subtitle||b.type)}</small></div><div class="row-actions"><button type="button" aria-label="向上移动区块" title="上移" ${i===0?'disabled':''} onclick="event.stopPropagation();Studio.moveBlock(${i},-1)">↑</button><button type="button" aria-label="向下移动区块" title="下移" ${i===blocks.length-1?'disabled':''} onclick="event.stopPropagation();Studio.moveBlock(${i},1)">↓</button><button type="button" title="${b.visible===false?'显示':'隐藏'}" aria-label="切换区块可见性" onclick="event.stopPropagation();Studio.toggleVisible(${i})">${b.visible===false?'◌':'◉'}</button><button type="button" title="复制" aria-label="复制区块" onclick="event.stopPropagation();Studio.duplicate(${i})">⧉</button><button type="button" title="删除" aria-label="删除区块" onclick="event.stopPropagation();Studio.remove(${i})">×</button></div></div>`).join('')||`<div class="no-selection">${blockSearch?'没有找到匹配区块，试试清除搜索。':'当前没有区块，点击下方按钮添加。'}</div>`;
|
||||
Studio.inspector();Studio.updateGuidance();
|
||||
},
|
||||
filter(value){blockSearch=String(value||'').slice(0,100);Studio.draw()},
|
||||
clearFilter(){blockSearch='';$('#blockSearch').value='';Studio.draw();$('#blockSearch').focus()},
|
||||
moveBlock(i,offset){const target=i+offset;const next=editorTools.reorder(blocks,i,target);if(!next||target===i)return;blocks=next;selected=target;Studio.modified();Studio.draw();},
|
||||
toggleVisible(i){if(!blocks[i])return;blocks[i].visible=blocks[i].visible===false;Studio.modified();Studio.draw()},
|
||||
blockKeydown(event,i){if(event.target!==event.currentTarget)return;if(event.key==='Enter'||event.key===' '){event.preventDefault();Studio.select(i)}else if(event.altKey && (event.key==='ArrowUp'||event.key==='ArrowDown')){event.preventDefault();Studio.moveBlock(i,event.key==='ArrowUp'?-1:1)}},
|
||||
changeInspectorTab(tab){if(!['content','style','responsive'].includes(tab))return;inspectorTab=tab;Studio.applyInspectorTab()},
|
||||
applyInspectorTab(){for(const key of ['content','style','responsive']){const active=key===inspectorTab;const btn=$('#tab'+key.charAt(0).toUpperCase()+key.slice(1));btn?.setAttribute('aria-selected',String(active));const pane=$('[data-inspector-section="'+key+'"]');if(pane)pane.hidden=!active}},
|
||||
togglePane(which){const type=which==='left'?'show-structure':'show-inspector';document.body.classList.toggle(type);if(type==='show-structure')document.body.classList.remove('show-inspector');else document.body.classList.remove('show-structure');},
|
||||
updateHistoryButtons(){const state=editorTools.historyState(snapshots,snapshotCursor);$('#studioUndo').disabled=!state.canUndo;$('#studioRedo').disabled=!state.canRedo},
|
||||
|
||||
select(i){selected=i;Studio.draw();if(window.matchMedia('(max-width:950px)').matches){document.body.classList.add('show-inspector');document.body.classList.remove('show-structure')}},
|
||||
add(type){let data=structuredClone(schema.blocks[type].defaults);data.id=crypto.randomUUID().replace(/-/g,'').slice(0,10);data.type=type;data.visible=true;blocks.push(data);selected=blocks.length-1;Studio.modified();Studio.draw();Studio.toggleLibrary(false);if(window.matchMedia('(max-width:950px)').matches){document.body.classList.add('show-inspector');document.body.classList.remove('show-structure')}},
|
||||
duplicate(i){const b=editorTools.duplicate(blocks[i],()=>crypto.randomUUID().replace(/-/g,'').slice(0,10));blocks.splice(i+1,0,b);selected=i+1;Studio.modified();Studio.draw()},
|
||||
remove(i){if(!confirm('确定删除这个区块？'))return;blocks.splice(i,1);selected=Math.min(i,blocks.length-1);Studio.modified();Studio.draw()},
|
||||
drag(e,i){e.dataTransfer.setData('text/plain',String(i));e.dataTransfer.effectAllowed='move';e.currentTarget.classList.add('dragging')},
|
||||
drop(e,i){e.preventDefault();let src=Number(e.dataTransfer.getData('text/plain'));if(!Number.isInteger(src)||src<0||src>=blocks.length||src===i)return;let [b]=blocks.splice(src,1);blocks.splice(i,0,b);selected=i;Studio.modified();Studio.draw()},
|
||||
drop(e,i){e.preventDefault();let src=Number(e.dataTransfer.getData('text/plain'));if(!Number.isInteger(src)||src<0||src>=blocks.length||src===i)return;const moved=editorTools.reorder(blocks,src,i);if(!moved)return;blocks=moved;selected=i;Studio.modified();Studio.draw()},
|
||||
field(key,value){const b=blocks[selected];if(!b)return;b[key]=value;Studio.modified();Studio.draw()},
|
||||
fieldQuiet(key,value){const b=blocks[selected];if(!b)return;b[key]=value;Studio.modified();const row=$('#blockList').children[selected];if(row)row.querySelector('small').textContent=b.title||b.subtitle||b.type},
|
||||
fieldQuiet(key,value){const b=blocks[selected];if(!b)return;b[key]=value;Studio.modified(true);const row=$('#blockList').querySelector(`[data-index="${selected}"]`);if(row)row.querySelector('small').textContent=b.title||b.subtitle||b.type},
|
||||
arrayEditor(field,value,type){
|
||||
const rows=Array.isArray(value)?value:[];
|
||||
const labels={title:'标题',text:'文字介绍',value:'数字',label:'名称',question:'问题',answer:'回答',url:'图片地址',alt:'图片说明',image:'图片地址',caption:'图片说明',name:'名称',price:'价格',features:'方案包含的服务',href:'按钮跳转路径'};
|
||||
const spec=schema.blocks[type];const sample=(spec?.defaults?.[field]||[])[0]||{url:'',alt:''};
|
||||
const keys=Object.keys(sample);
|
||||
return `<div class="sf-array-editor"><p class="sf-array-hint">无需填写 JSON：按顺序编辑每一项，修改会自动显示在预览中。</p>`+
|
||||
rows.map((row,i)=>`<div class="sf-array-card"><div class="sf-array-card-head"><b>第 ${i+1} 项</b><div><button type="button" title="上移" ${i===0?'disabled':''} onclick="Studio.moveItem('${field}',${i},-1)">↑</button><button type="button" title="下移" ${i===rows.length-1?'disabled':''} onclick="Studio.moveItem('${field}',${i},1)">↓</button><button type="button" title="删除这一项" onclick="Studio.removeItem('${field}',${i})">删除</button></div></div>`+
|
||||
keys.map(key=>`<label class="sf-array-field">${html(labels[key]||key)}${key==='text'||key==='answer'||key==='features'?`<textarea oninput="Studio.itemField('${field}',${i},'${key}',this.value)">${html(Array.isArray(row?.[key])?(row[key]||[]).join('\n'):row?.[key]??'')}</textarea>`:`<input type="text" value="${html(row?.[key]??'')}" oninput="Studio.itemField('${field}',${i},'${key}',this.value)">`}</label>`).join('')+
|
||||
`</div>`).join('')+`<button type="button" class="sf-array-add" onclick="Studio.addItem('${field}')">＋ 添加${field==='images'?'图片':'一项'}</button></div>`;
|
||||
},
|
||||
itemField(field,index,key,value){const block=blocks[selected],row=block?.[field]?.[index];if(!row)return;row[key]=key==='features'?String(value).split('\n').map(x=>x.trim()).filter(Boolean):String(value).slice(0,1500);Studio.modified(true)},
|
||||
addItem(field){const block=blocks[selected];if(!block)return;const rows=block[field];if(!Array.isArray(rows))return;const limit=field==='images'?24:16;if(rows.length>=limit)return toast(`最多添加 ${limit} 项`,true);const sample=schema.blocks[block.type]?.defaults?.[field]?.[0]||{url:'',alt:''};const next={};for(const [key,val] of Object.entries(sample))next[key]=Array.isArray(val)?[]:'';rows.push(next);Studio.modified();Studio.inspector()},
|
||||
removeItem(field,index){const rows=blocks[selected]?.[field];if(!Array.isArray(rows)||!rows[index])return;rows.splice(index,1);Studio.modified();Studio.inspector()},
|
||||
moveItem(field,index,by){const rows=blocks[selected]?.[field],target=index+by;if(!Array.isArray(rows)||target<0||target>=rows.length)return;[rows[index],rows[target]]=[rows[target],rows[index]];Studio.modified();Studio.inspector()},
|
||||
jsonField(key,value){try{let data=JSON.parse(value);if(!Array.isArray(data))throw Error('必须为数组');Studio.fieldQuiet(key,data);$('#jsonError').textContent='✓ JSON 格式有效';$('#jsonError').style.color='#238460'}catch(e){$('#jsonError').textContent='JSON 格式有误：'+e.message;$('#jsonError').style.color='#bf5a58'}},
|
||||
styleField(key,value){const b=blocks[selected];b.style={...(b.style||{}),[key]:value};Studio.modified()},
|
||||
inspector(){let target=$('#inspector');let b=blocks[selected];$('#blockTypeLabel').textContent=b?schema.blocks[b.type].name:'页面';if(!b){target.innerHTML='<div class="no-selection">请从左侧选择区块并编辑属性。</div>';return}const spec=schema.blocks[b.type];let out=`<div class="inspector-title"><h3>${html(spec.name)}</h3><label class="toggle"><input type="checkbox" ${b.visible!==false?'checked':''} onchange="Studio.field('visible',this.checked)">显示</label></div>`;
|
||||
inspector(){let target=$('#inspector');let b=blocks[selected];$('#blockTypeLabel').textContent=b?schema.blocks[b.type].name:'页面';if(!b){target.innerHTML='<div class="no-selection"><b>还没有选中内容</b><p>先到左侧选择一个区块，或点击“添加内容区块”。</p><button type="button" class="ui-btn primary" onclick="Studio.toggleLibrary(true)">＋ 添加内容</button></div>';return}const spec=schema.blocks[b.type];let out=`<div class="inspector-title"><h3>${html(spec.name)}</h3><label class="toggle"><input type="checkbox" ${b.visible!==false?'checked':''} onchange="Studio.field('visible',this.checked)">显示</label></div><div data-inspector-section="content">`;
|
||||
for(const field of spec.fields){let value=b[field]??'',label=({title:'标题',subtitle:'副标题',description:'简介',image:'图片地址',body:'正文 HTML',button:'按钮文字',href:'跳转路径',source:'绑定内容类型',limit:'显示条数',columns:'每行列数',items:'重复条目',images:'画廊图片',image_side:'图片方向',align:'标题对齐',height:'间隔高度'})[field]||field;
|
||||
out+=`<div class="prop"><label>${html(label)}</label>`;
|
||||
if(field==='items'||field==='images')out+=`<textarea spellcheck="false" onchange="Studio.jsonField('${field}',this.value)">${html(JSON.stringify(value,null,2))}</textarea><span id="jsonError" class="prop-tip">请输入 JSON 数组，可编辑多个项目</span>`;
|
||||
if(field==='items'||field==='images')out+=Studio.arrayEditor(field,value,b.type);
|
||||
else if(field==='source')out+=`<select onchange="Studio.field('${field}',this.value)">${['product','post','page','vehicle','brand','case','service','other','all'].map(t=>`<option value="${t}" ${t===value?'selected':''}>${({product:'产品',post:'文章',page:'普通页面',vehicle:'车型',brand:'品牌',case:'案例',service:'服务',other:'其他',all:'全部类型'})[t]}</option>`).join('')}</select><span class="prop-tip">网站已有内容将自动绑定并生成卡片。</span>`;
|
||||
else if(field==='image_side'||field==='align')out+=`<select onchange="Studio.field('${field}',this.value)">${(field==='align'?['left','center']:['left','right']).map(v=>`<option value="${v}" ${value===v?'selected':''}>${v==='left'?'左侧':v==='right'?'右侧':'居中'}</option>`).join('')}</select>`;
|
||||
else if(field==='body'||field==='description')out+=`<textarea onchange="Studio.fieldQuiet('${field}',this.value)">${html(value)}</textarea>`;
|
||||
@@ -41,6 +77,7 @@ const Studio={
|
||||
if(['title','subtitle','description','image','body'].includes(field))out+='<small class="prop-tip">可输入 {{site.name}}、{{page.title}} 等变量。</small>';
|
||||
out+='</div>';
|
||||
}
|
||||
out+='</div><div data-inspector-section="responsive">';
|
||||
if(b.type==='layout'){
|
||||
out+=`<div class="subheading">列内组件 · 按设备排版</div><p class="prop-tip">分别调整平板/手机的列数、顺序、跨度与显隐。保存草稿后在设备预览切换查看效果。</p><div class="prop"><label>平板每行列数 <input type="number" min="1" max="3" value="${html(b.tablet_columns||2)}" onchange="Studio.setDeviceColumns('tablet',this.value)"></label><label>手机每行列数 <input type="number" min="1" max="2" value="${html(b.mobile_columns||1)}" onchange="Studio.setDeviceColumns('mobile',this.value)"></label></div>`;
|
||||
b.columns.forEach((column,ci)=>{
|
||||
@@ -55,20 +92,72 @@ const Studio={
|
||||
});
|
||||
out+='<button class="ui-btn ghost" onclick="Studio.addColumn()">＋ 添加列</button>';
|
||||
}
|
||||
out+=`<div class="subheading">区块设计（按设备覆盖）</div><div class="prop"><label>背景颜色</label><input type="color" value="${html(b.style?.background||'#ffffff')}" onchange="Studio.styleField('background',this.value)"></div><div class="prop"><label>上下间距（px）</label><input type="number" min="0" max="120" value="${html(b.style?.padding??82)}" onchange="Studio.styleField('padding',Number(this.value))"></div><div class="prop"><label>平板上下间距（px）</label><input type="number" min="0" max="120" value="${html(b.style?.tablet_padding??50)}" onchange="Studio.styleField('tablet_padding',Number(this.value))"></div><div class="prop"><label>手机上下间距（px）</label><input type="number" min="0" max="120" value="${html(b.style?.mobile_padding??28)}" onchange="Studio.styleField('mobile_padding',Number(this.value))"></div><div class="prop"><label><input type="checkbox" ${b.style?.hide_mobile?'checked':''} onchange="Studio.styleField('hide_mobile',this.checked)"> 手机上隐藏区块</label></div><div class="prop"><label>已上传图片</label><button class="ui-btn ghost" onclick="Studio.chooseMedia()">打开本站素材库</button></div><div class="prop"><label>上传区块图片</label><input type="file" accept="image/png,image/jpeg,image/webp,image/gif,image/avif" onchange="Studio.uploadImage(this.files[0])"></div>`;
|
||||
out+=`<div class="subheading">响应式样式</div><div class="prop"><label>平板上下间距（px）</label><input type="number" min="0" max="120" value="${html(b.style?.tablet_padding??50)}" onchange="Studio.styleField('tablet_padding',Number(this.value))"></div><div class="prop"><label>手机上下间距（px）</label><input type="number" min="0" max="120" value="${html(b.style?.mobile_padding??28)}" onchange="Studio.styleField('mobile_padding',Number(this.value))"></div><div class="prop"><label><input type="checkbox" ${b.style?.hide_mobile?'checked':''} onchange="Studio.styleField('hide_mobile',this.checked)"> 手机上隐藏区块</label></div>`;
|
||||
out+=`</div><div data-inspector-section="style"><div class="subheading">外观设置</div><div class="prop"><label>背景颜色</label><input type="color" value="${html(b.style?.background||'#ffffff')}" onchange="Studio.styleField('background',this.value)"></div><div class="prop"><label>上下间距（px）</label><input type="number" min="0" max="120" value="${html(b.style?.padding??82)}" onchange="Studio.styleField('padding',Number(this.value))"></div><div class="prop"><label>从图库选择图片</label><button type="button" class="ui-btn ghost" onclick="Studio.chooseMedia()">打开本站素材库</button></div><div class="prop"><label>上传图片</label><input type="file" accept="image/png,image/jpeg,image/webp,image/gif,image/avif" onchange="Studio.uploadImage(this.files[0])"></div></div>`;
|
||||
out+='<div style="display:flex;gap:8px;margin-bottom:22px"><button class="small-btn" onclick="Studio.duplicate('+selected+')">复制区块</button><button class="small-btn red-btn" onclick="Studio.remove('+selected+')">删除区块</button></div>';
|
||||
target.innerHTML=out;
|
||||
target.innerHTML=out;Studio.applyInspectorTab();
|
||||
},
|
||||
undo(){restoreSnapshot(snapshotCursor-1)},
|
||||
redo(){restoreSnapshot(snapshotCursor+1)},
|
||||
modified(){recordSnapshot();dirty=true;$('#saveStatus').textContent='未保存更改';$('#saveStatus').classList.add('dirty');clearTimeout(timer);timer=setTimeout(()=>Studio.refreshPreview(),500)},
|
||||
async refreshPreview(){if(!pageId)return;try{let frame=$('#sitePreview');let doc=await api(`/api/sites/${siteId}/pages/${pageId}/editor-preview`,req('POST',{blocks,page_template:kind,layout_mode:layoutMode,site_design:siteDesignPreview}));frame.srcdoc=doc}catch(e){toast('预览失败：'+e.message,true)}},
|
||||
device(type){$('#deviceFrame').className='device-frame '+(type==='desktop'?'':type);for(let name of ['Desktop','Tablet','Phone'])$('#device'+name).classList.toggle('on',name.toLowerCase()===type)},
|
||||
modified(continuous=false){
|
||||
const now=Date.now(),snap=JSON.stringify({blocks,kind,layoutMode});
|
||||
if(continuous&&lastContinuousEdit&&now-lastContinuousEdit<850&&snapshotCursor>0&&snapshotCursor===snapshots.length-1){snapshots[snapshotCursor]=snap;}
|
||||
else recordSnapshot();
|
||||
lastContinuousEdit=continuous?now:0;
|
||||
dirty=true;$('#saveStatus').textContent='未保存更改';$('#saveStatus').classList.add('dirty');
|
||||
Studio.updateHistoryButtons();Studio.updateGuidance();clearTimeout(timer);timer=setTimeout(()=>Studio.refreshPreview(),550);
|
||||
},
|
||||
async refreshPreview(){
|
||||
if(!pageId)return;
|
||||
const page=pageId,seq=++previewRequest;
|
||||
if(previewController)previewController.abort();previewController=new AbortController();
|
||||
const frame=$('#sitePreview');$('#previewState').textContent='正在更新预览…';$('#previewDot').classList.add('loading');
|
||||
try{
|
||||
const doc=await api(`/api/sites/${siteId}/pages/${page}/editor-preview`,{...req('POST',{blocks,page_template:kind,layout_mode:layoutMode,site_design:siteDesignPreview}),signal:previewController.signal});
|
||||
if(!editorTools.shouldAcceptPreview(page,seq,pageId,previewRequest))return;
|
||||
frame.srcdoc=doc;$('#previewState').textContent='实时预览 · 已更新';$('#previewDot').classList.remove('loading','error');
|
||||
}catch(e){
|
||||
if(!editorTools.shouldAcceptPreview(page,seq,pageId,previewRequest)||e.name==='AbortError')return;
|
||||
$('#previewState').textContent='预览更新失败';$('#previewDot').classList.remove('loading');$('#previewDot').classList.add('error');toast('预览失败：'+e.message,true);
|
||||
}
|
||||
},
|
||||
device(type){$('#deviceFrame').className='device-frame '+(type==='desktop'?'':type);$('#deviceDetails').textContent=({desktop:'桌面端 · 自适应宽度',tablet:'平板端 · 780px',phone:'手机端 · 390px'})[type]||'桌面端';for(let name of ['Desktop','Tablet','Phone'])$('#device'+name).classList.toggle('on',name.toLowerCase()===type)},
|
||||
changeTemplateKind(t){kind=t;Studio.modified()},
|
||||
setLayoutMode(v){layoutMode=v;Studio.modified()},
|
||||
async resetPreset(){if(!confirm('用当前主题的预设布局替换草稿？不会更改正式页面。'))return;try{const result=await api(`/api/sites/${siteId}/pages/${pageId}/studio-draft/preset?page_template=${encodeURIComponent(kind)}`);blocks=result.blocks;selected=blocks.length?0:-1;Studio.modified();Studio.draw();toast('已加载预设到草稿，记得保存')}catch(e){toast(e.message,true)}},
|
||||
async save(){try{const result=await api(`/api/sites/${siteId}/pages/${pageId}/studio-draft`,req('PUT',{blocks,page_template:kind,layout_mode:layoutMode,expected_revision:draftRevision}));draftRevision=result.revision;dirty=false;$('#saveStatus').textContent='草稿 v'+draftRevision;$('#saveStatus').classList.remove('dirty');toast('设计草稿已保存，正式构建不受影响')}catch(e){toast('草稿保存失败：'+e.message,true)}},
|
||||
async publishDesign(){if(dirty){await Studio.save();if(dirty)return}if(!draftRevision)return toast('当前没有待发布草稿');if(!confirm('发布设计将更新内容库中的页面布局，下次静态构建才会生效。是否发布？'))return;try{await api(`/api/sites/${siteId}/pages/${pageId}/studio-draft/publish`,req('POST',{expected_revision:draftRevision}));draftRevision=0;$('#saveStatus').textContent='已发布到内容库';toast('设计已发布；请构建网站生成新的正式静态文件')}catch(e){toast('发布失败：'+e.message,true)}},
|
||||
async showHistory(){
|
||||
if(!pageId)return toast('请先选择页面',true);
|
||||
$('#studioHistoryModal').showModal();$('#studioHistoryItems').textContent='读取历史记录中…';
|
||||
try{const data=await api(`/api/sites/${siteId}/pages/${pageId}/studio-history?limit=50`);
|
||||
$('#studioHistoryItems').innerHTML=(data.items||[]).map(x=>`<div style="padding:12px 0;border-bottom:1px solid #e2e8f0;display:flex;gap:12px;align-items:center;justify-content:space-between"><div><strong>${x.kind==='published'?'已发布':'草稿'} · v${html(x.revision)}</strong><div style="font-size:12px;color:#64748b">${html(x.created_at)} · ${html(x.actor)} · SHA ${html(x.snapshot_hash.slice(0,12))}</div></div><button class="ui-btn ghost" type="button" onclick="Studio.restoreHistory('${html(x.id)}')">恢复为新草稿</button></div>`).join('')||'<p>当前页面尚无保存记录。</p>';
|
||||
}catch(e){$('#studioHistoryItems').textContent='读取失败：'+e.message}
|
||||
},
|
||||
async restoreHistory(id){
|
||||
if(dirty&&!confirm('当前有未保存的本地修改。恢复历史记录将舍弃这些本地修改，继续吗？'))return;
|
||||
if(!confirm('确定以这个历史快照创建一个新的设计草稿？已发布的页面不会立即改变。'))return;
|
||||
try{await api(`/api/sites/${siteId}/pages/${pageId}/studio-history/${encodeURIComponent(id)}/restore`,req('POST',{expected_revision:draftRevision}));
|
||||
dirty=false;$('#studioHistoryModal').close();await Studio.choosePage(pageId);
|
||||
toast('历史版本已恢复为新草稿。核对后再点击发布设计。');
|
||||
}catch(e){toast('历史恢复失败：'+e.message,true)}
|
||||
},
|
||||
async save(){
|
||||
if(savePromise)return savePromise;
|
||||
const page=pageId;const snapshot=JSON.stringify({blocks,kind,layoutMode});const frozen=JSON.parse(snapshot);
|
||||
$('#saveStatus').textContent='保存中…';
|
||||
savePromise=(async()=>{
|
||||
try{
|
||||
const result=await api(`/api/sites/${siteId}/pages/${page}/studio-draft`,req('PUT',{blocks:frozen.blocks,page_template:frozen.kind,layout_mode:frozen.layoutMode,expected_revision:draftRevision}));
|
||||
if(page!==pageId)return;
|
||||
draftRevision=result.revision;
|
||||
const unchanged=snapshot===JSON.stringify({blocks,kind,layoutMode});
|
||||
dirty=!unchanged;$('#saveStatus').textContent=unchanged?'草稿 v'+draftRevision:'有新修改待保存';
|
||||
$('#saveStatus').classList.toggle('dirty',dirty);
|
||||
toast(unchanged?'设计草稿已保存，正式构建不受影响':'草稿已保存，但有新修改，需再次保存');
|
||||
}catch(e){dirty=true;$('#saveStatus').textContent='保存失败';$('#saveStatus').classList.add('dirty');toast('草稿保存失败：'+e.message,true)}
|
||||
finally{savePromise=null;Studio.updateGuidance()}
|
||||
})();return savePromise;
|
||||
},
|
||||
async publishDesign(){if(dirty){await Studio.save();if(dirty)return}if(!draftRevision)return toast('当前没有待发布草稿');if(!confirm('发布设计将更新内容库中的页面布局，下次静态构建才会生效。是否发布？'))return;try{await api(`/api/sites/${siteId}/pages/${pageId}/studio-draft/publish`,req('POST',{expected_revision:draftRevision}));draftRevision=0;$('#saveStatus').textContent='已发布到内容库';Studio.updateGuidance();toast('设计已发布到内容库。要更新线上网站，请在“更多”中构建并部署。')}catch(e){toast('发布失败：'+e.message,true)}},
|
||||
async discardDraft(){if(!draftRevision)return;if(!confirm('确定放弃草稿？'))return;try{await api(`/api/sites/${siteId}/pages/${pageId}/studio-draft`,{method:'DELETE'});dirty=false;await Studio.choosePage(pageId);toast('草稿已放弃')}catch(e){toast(e.message,true)}},
|
||||
dragChild(event,col,index){draggedChild={container:selected,col,index};event.dataTransfer.setData('application/siteforge-child','1');event.dataTransfer.effectAllowed='move';event.stopPropagation()},
|
||||
dropChild(event,destCol){if(!draggedChild)return;event.preventDefault();event.stopPropagation();const drag=draggedChild;draggedChild=null;const src=blocks[drag.container],dest=blocks[selected];if(!src||!dest||src.type!=='layout'||dest.type!=='layout')return;const moved=src.columns?.[drag.col]?.blocks.splice(drag.index,1)[0];if(!moved)return;dest.columns[destCol].blocks.push(moved);Studio.modified();Studio.draw()},
|
||||
@@ -80,15 +169,36 @@ const Studio={
|
||||
for(const [name,value] of Object.entries(f)){const key='footer_'+name,el=form.elements.namedItem(key);if(el){if(el.type==='checkbox')el.checked=value;else el.value=value}}
|
||||
for(const [name,value] of Object.entries(r)){const el=form.elements.namedItem(name);if(el){if(el.type==='checkbox')el.checked=value;else el.value=value}}
|
||||
form.elements.namedItem('nav').value=JSON.stringify(siteDesign.nav,null,2);
|
||||
form.elements.namedItem('mobile_tabs_enabled').checked=Boolean(siteDesign.mobile_tabs?.enabled);
|
||||
Studio.drawMobileTabs(siteDesign.mobile_tabs?.items||[]);
|
||||
Studio.toggleMobileTabsForm();
|
||||
$('#siteDesignStatus').textContent=result.state==='draft'?`待发布的全站草稿 v${siteDesignRevision}${result.conflict?' · 网站已被其他人修改':''}`:'当前为已发布设计';
|
||||
$('#siteDesignModal').showModal();
|
||||
}catch(e){toast('全站设计读取失败：'+e.message,true)}},
|
||||
drawMobileTabs(items){const root=$('#mobileTabsRows');root.replaceChildren();items.forEach((item,i)=>Studio.addMobileTab(item,i));},
|
||||
toggleMobileTabsForm(){const on=$('#siteDesignForm').elements.namedItem('mobile_tabs_enabled').checked;$('#mobileTabsEditor').hidden=!on;},
|
||||
addMobileTab(item={title:'新导航',icon:'grid',route:'/',action:'link'},index){
|
||||
const root=$('#mobileTabsRows');if(root.children.length>=5){toast('底部最多支持 5 个 Tab',true);return}
|
||||
const n=root.children.length;
|
||||
const row=document.createElement('div');row.className='mobile-tab-row';row.style.cssText='display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border:1px solid #dce3ed;border-radius:10px;background:#fafcff';
|
||||
const label=document.createElement('label');label.textContent='按钮名称';const title=document.createElement('input');title.className='mt-title';title.maxLength=12;title.value=item.title||'';label.append(title);
|
||||
const iconLabel=document.createElement('label');iconLabel.textContent='按钮图标';const icon=document.createElement('select');icon.className='mt-icon';
|
||||
for(const [v,t] of Object.entries({home:'⌂ 首页',grid:'▦ 栏目',products:'▤ 产品',news:'☷ 文章',contact:'✉ 联系',phone:'☎ 电话',info:'ⓘ 关于',search:'⌕ 搜索',menu:'☰ 菜单',star:'☆ 收藏'})){const opt=document.createElement('option');opt.value=v;opt.textContent=t;icon.append(opt)}icon.value=item.icon||'grid';iconLabel.append(icon);
|
||||
const actionLabel=document.createElement('label');actionLabel.textContent='点击操作';const action=document.createElement('select');action.className='mt-action';for(const [v,t] of [['link','打开站内页面'],['menu','打开导航抽屉']]){const o=document.createElement('option');o.value=v;o.textContent=t;action.append(o)}action.value=item.action||'link';actionLabel.append(action);
|
||||
const routeLabel=document.createElement('label');routeLabel.textContent='链接地址';const route=document.createElement('input');route.className='mt-route';route.placeholder='/products/、https://wa.me/... 或 tel:+...';route.value=item.route||'/';routeLabel.append(route);
|
||||
function updateRoute(){routeLabel.hidden=action.value==='menu'}action.addEventListener('change',updateRoute);updateRoute();
|
||||
const tools=document.createElement('div');tools.style.cssText='grid-column:1/-1;display:flex;gap:7px;justify-content:flex-end';
|
||||
for(const [name,fn] of [['↑ 上移',()=>{const prev=row.previousElementSibling;if(prev)root.insertBefore(row,prev)}],['↓ 下移',()=>{const next=row.nextElementSibling;if(next)root.insertBefore(next,row)}],['删除',()=>row.remove()]]){const b=document.createElement('button');b.type='button';b.className='ui-btn ghost';b.textContent=name;b.addEventListener('click',fn);tools.append(b)}
|
||||
row.append(label,iconLabel,actionLabel,routeLabel,tools);root.append(row);
|
||||
},
|
||||
collectSiteDesign(){const form=$('#siteDesignForm');if(!siteDesign)throw Error('请先打开全站设计');
|
||||
const v=(n)=>form.elements.namedItem(n).value;
|
||||
const yes=(n)=>form.elements.namedItem(n).checked;
|
||||
let nav;try{nav=JSON.parse(v('nav'))}catch(e){throw Error('导航必须是合法 JSON：'+e.message)}
|
||||
if(!Array.isArray(nav))throw Error('导航必须是数组');
|
||||
return {header:{announcement:v('announcement'),show_announcement:yes('show_announcement'),show_search:yes('show_search'),
|
||||
const tabs=[...$('#mobileTabsRows').children].map(row=>({title:row.querySelector('.mt-title').value.trim(),icon:row.querySelector('.mt-icon').value,route:row.querySelector('.mt-route').value.trim(),action:row.querySelector('.mt-action').value}));
|
||||
if(yes('mobile_tabs_enabled')&&!tabs.length)throw Error('开启底部 Tabs 后，请至少添加一个按钮');
|
||||
return {tokens:structuredClone(siteDesign.tokens),mobile_tabs:{enabled:yes('mobile_tabs_enabled'),items:tabs},header:{announcement:v('announcement'),show_announcement:yes('show_announcement'),show_search:yes('show_search'),
|
||||
show_cta:yes('show_cta'),cta_text:v('cta_text'),cta_href:v('cta_href')},
|
||||
footer:{title:v('footer_title'),description:v('footer_description'),email:v('footer_email'),show_nav:yes('footer_show_nav')},nav,
|
||||
responsive:{tablet_gap:Number(v('tablet_gap')),mobile_gap:Number(v('mobile_gap')),
|
||||
@@ -143,6 +253,12 @@ window.addEventListener('message',event=>{
|
||||
const frame=document.querySelector('#sitePreview');
|
||||
if(!frame||event.source!==frame.contentWindow)return;
|
||||
const data=event.data||{};
|
||||
if(data.source==='siteforge-select-block'){
|
||||
if(typeof data.blockId!=='string'||data.blockId.length>150)return;
|
||||
const findTop=rows=>{for(let i=0;i<rows.length;i++){const row=rows[i];if(row.id===data.blockId)return i;if(row.type==='layout'&&row.columns?.some(col=>col.blocks?.some(child=>child.id===data.blockId)))return i}return -1};
|
||||
const index=findTop(blocks);if(index>=0){selected=index;Studio.draw();if(window.matchMedia('(max-width:1060px)').matches){document.body.classList.add('show-inspector');document.body.classList.remove('show-structure')}}
|
||||
return;
|
||||
}
|
||||
if(data.source!=='siteforge-inline-editor')return;
|
||||
const findChild=rows=>{for(const row of rows){if(row.id===data.blockId)return {block:row,parent:row};if(row.type==='layout'){for(const col of row.columns||[]){const child=findChild(col.blocks||[]);if(child)return {block:child.block,parent:row};}}}return null};
|
||||
const found=findChild(blocks),b=found?.block;
|
||||
@@ -152,4 +268,12 @@ window.addEventListener('message',event=>{
|
||||
toast('已修改文字，点击保存页面写入数据库');
|
||||
});
|
||||
|
||||
window.addEventListener('keydown',event=>{if(!(event.ctrlKey||event.metaKey)||event.altKey)return;const el=document.activeElement;if(el&&['INPUT','TEXTAREA'].includes(el.tagName))return;if(event.key.toLowerCase()==='z'){event.preventDefault();event.shiftKey?Studio.redo():Studio.undo()}else if(event.key.toLowerCase()==='y'){event.preventDefault();Studio.redo()}});
|
||||
window.addEventListener('keydown',event=>{
|
||||
if(!(event.ctrlKey||event.metaKey)||event.altKey)return;
|
||||
const key=event.key.toLowerCase();
|
||||
if(key==='s'){event.preventDefault();Studio.save();return}
|
||||
const el=document.activeElement;
|
||||
if(el&&(['INPUT','TEXTAREA'].includes(el.tagName)||el.isContentEditable))return;
|
||||
if(key==='z'){event.preventDefault();event.shiftKey?Studio.redo():Studio.undo()}
|
||||
else if(key==='y'){event.preventDefault();Studio.redo()}
|
||||
});
|
||||
|
||||
@@ -43,11 +43,24 @@ async function readData(){let f=$('#dataFile').files?.[0];if(!f)return toast('
|
||||
async function previewRelations(){try{const r=await api(factoryUrl('/relationships'));$('#relationReport').innerHTML=`<div class="card"><b>产品-品牌关联检查</b><p>已有品牌 ${r.brands.length} 个、分类 ${r.categories.length} 个；缺少独立品牌页 ${r.brand_pages_missing.length} 个</p><p>${H(r.brand_pages_missing.map(x=>x.brand).join(' / ')||'无')}</p>${r.issues.slice(0,10).map(x=>`<p>${H(x.route)} · ${H(x.message)}</p>`).join('')}</div>`;}catch(e){toast(e.message,true)}}
|
||||
async function assembleRelations(){if(!confirm('依据真实产品品牌字段创建缺少的品牌页面？不会自动生成虚构文案。'))return;try{const r=await api(factoryUrl('/relationships/assemble'),'POST',{});toast(`已创建 ${r.count} 个品牌页面`);await previewRelations()}catch(e){toast(e.message,true)}}
|
||||
|
||||
function drawMapping(){let fields=['title','route','summary','body','cover','brand','category','model','energy','range','gallery','specs','sku','price','seo_title','seo_description','canonical'];let labels={title:'标题（必填）',route:'旧站 URL',summary:'摘要',body:'详情正文',cover:'封面',brand:'品牌',category:'分类',seo_title:'SEO标题',seo_description:'SEO描述',canonical:'Canonical',model:'型号',energy:'动力形式',range:'续航',gallery:'图库（JSON数组或分号分隔）',specs:'技术参数',sku:'SKU',price:'价格'};
|
||||
$('#mappingUI').innerHTML=`<div style="margin-top:27px"><h2>字段映射（已读取 ${state.importRows.length} 行）</h2>${fields.map(t=>`<div class="rule"><strong>${H(labels[t])}</strong><select data-target="${t}" class="mapfield"><option value="">不映射</option>${state.fields.map(x=>`<option value="${H(x)}" ${state.mapping[t]===x?'selected':''}>${H(x)}</option>`).join('')}</select></div>`).join('')}<button class="outline" onclick="mappingPreview()">预览数据和错误</button><button class="primary" onclick="mappingCommit()">确认导入</button><div id="mappingReport" style="margin-top:16px"></div></div>`;}
|
||||
function gather(){let rules={};$$('.mapfield').forEach(x=>{if(x.value)rules[x.dataset.target]=x.value});return {rows:state.importRows,rules,content_type:$('#mapKind').value}}
|
||||
async function mappingPreview(){try{let r=await api(factoryUrl('/mapping/run'),'POST',{...gather(),dry_run:true});$('#mappingReport').innerHTML=`<div class="card"><b>预览：${r.mapped} 条可映射</b><p>错误 ${r.errors.length} 条，URL 冲突 ${r.conflicts.length} 条</p><div class="scroll"><table><thead><tr><th>标题</th><th>新 URL</th><th>内容类型</th></tr></thead><tbody>${r.sample.map(x=>`<tr><td>${H(x.title)}</td><td>${H(x.route)}</td><td>${H(x.type)}</td></tr>`).join('')}</tbody></table></div>${r.errors.length?'<p class="error">'+H(JSON.stringify(r.errors.slice(0,6)))+'</p>':''}</div>`}catch(e){toast(e.message,true)}}
|
||||
async function mappingCommit(){if(!confirm('确认将已映射的数据写入当前网站？'))return;try{let r=await api(factoryUrl('/mapping/run'),'POST',{...gather(),dry_run:false,on_conflict:'skip'});toast(`新增 ${r.created} 条，跳过 ${r.skipped} 条，错误 ${r.errors.length} 条`);await render()}catch(e){toast(e.message,true)}}
|
||||
function drawMapping(){
|
||||
const fields=['title','route','summary','body','cover','brand','category','model','year','energy','sku','seo_title','seo_description'];
|
||||
const labels={title:'标题',route:'URL 原路径',summary:'摘要',body:'正文',cover:'封面',brand:'品牌',category:'分类',model:'型号',year:'年份',energy:'动力类型',sku:'SKU',seo_title:'SEO 标题',seo_description:'SEO 描述'};
|
||||
state.mappingPlanHash=null;
|
||||
$('#mappingUI').innerHTML=`<div style="margin-top:27px"><h2>字段映射（已读取 ${state.importRows.length} 行）</h2><p class="muted">可以为每个字段选择大小写变换；所有转换都由固定规则执行，不运行代码。</p>${fields.map(t=>`<div class="rule"><strong>${H(labels[t])}</strong><select data-target="${t}" class="mapfield" onchange="state.mappingPlanHash=null"><option value="">不映射</option>${state.fields.map(x=>`<option value="${H(x)}" ${state.mapping[t]===x?'selected':''}>${H(x)}</option>`).join('')}</select><select data-transform="${t}" class="mapcase" aria-label="${H(labels[t])}的大小写转换" onchange="state.mappingPlanHash=null"><option value="none">原样</option><option value="upper">英文大写</option><option value="lower">英文小写</option></select></div>`).join('')}<div class="field"><label>URL 冲突处理<select id="mapConflict" onchange="state.mappingPlanHash=null"><option value="abort">遇到冲突立即阻断（推荐）</option><option value="skip">跳过已有 URL</option><option value="replace">覆盖已有 URL（谨慎）</option></select></label></div><button class="outline" onclick="mappingPreview()">预览数据和错误</button><button class="primary" onclick="mappingCommit()">按本次预检确认导入</button><div id="mappingReport" style="margin-top:16px"></div></div>`;
|
||||
}
|
||||
function gather(){let rules={};$$('.mapfield').forEach(x=>{if(x.value){const mode=document.querySelector(`[data-transform="${x.dataset.target}"]`)?.value||'none';rules[x.dataset.target]=mode==='none'?x.value:{source:x.value,case:mode}}});return {rows:state.importRows,rules,content_type:$('#mapKind').value}}
|
||||
|
||||
async function mappingPreview(){try{const payload=gather(),r=await api(factoryUrl('/mapping/run'),'POST',{...payload,dry_run:true});state.mappingPlanHash=r.plan_hash;$('#mappingReport').innerHTML=`<div class="card"><b>预览：${r.mapped} 条可映射</b><p>错误 ${r.errors.length} 条，URL 冲突 ${r.conflicts.length} 条</p><p>预检指纹：${H(r.plan_hash.slice(0,16))}…（提交时验证内容未变化）</p><div class="scroll"><table><thead><tr><th>标题</th><th>新 URL</th><th>内容类型</th></tr></thead><tbody>${r.sample.map(x=>`<tr><td>${H(x.title)}</td><td>${H(x.route)}</td><td>${H(x.type)}</td></tr>`).join('')}</tbody></table></div>${r.errors.length?'<p class="error">'+H(JSON.stringify(r.errors.slice(0,6)))+'</p>':''}</div>`}catch(e){state.mappingPlanHash=null;toast(e.message,true)}}
|
||||
|
||||
async function mappingCommit(){
|
||||
if(!state.mappingPlanHash)return toast('请先执行映射预览，确认 URL 和冲突后再导入',true);
|
||||
const policy=$('#mapConflict').value;
|
||||
if(policy==='replace'&&!confirm('覆盖模式将修改已有同 URL 内容。请确认已备份并核对预览。'))return;
|
||||
if(!confirm('将当前预检结果写入当前网站？'))return;
|
||||
try{const r=await api(factoryUrl('/mapping/run'),'POST',{...gather(),dry_run:false,on_conflict:policy,expected_plan_hash:state.mappingPlanHash});state.mappingPlanHash=null;toast(`新增 ${r.created} 条，更新 ${r.updated} 条，跳过 ${r.skipped} 条，错误 ${r.errors.length} 条`);await render()}
|
||||
catch(e){state.mappingPlanHash=null;toast('导入失败，请重新预检：'+e.message,true)}
|
||||
}
|
||||
async function migration(){let [data,assets,builds]=await Promise.all([api(factoryUrl('/migration/readiness')),api(factoryUrl('/assets/inventory')),api(siteUrl('/builds'))]);
|
||||
let audit=builds.length?await api(`/api/audit/sites/${state.site.id}/builds/${builds[0].id}/report`).catch(()=>null):null;const gate=data.gates||[];$('#panel').innerHTML=`<div class="cards"><div class="card"><span class="overline">旧站 URL 基线</span><strong>${data.baseline.baseline_count}</strong><small>应保持有效的历史路径</small></div><div class="card"><span class="overline">缺失 URL</span><strong>${data.baseline.errors}</strong><small>发布阻断项</small></div><div class="card"><span class="overline">SEO 差异</span><strong>${data.baseline.warnings}</strong><small>需要人工核查</small></div><div class="card"><span class="overline">资源引用</span><strong>${assets.references}</strong><small>实际已识别的内容图片</small></div></div><div class="columns"><div class="section"><h2>迁移验收门禁</h2>${gate.length?gate.map(g=>`<div class="row"><div><span class="badge ${g.level==='block'?'danger':'warn'}">${g.level==='block'?'阻止发布':'需人工复核'}</span><p>${H(g.message)}</p></div></div>`).join(''):'<p class="success">当前已检测范围内未发现阻断项。</p>'}<div class="toolbar"><label>上传原站清单（WXR / Sitemap XML / CSV / JSON）<input type="file" id="baselineFile" accept=".xml,.csv,.json"></label><button class="primary" onclick="uploadBaseline()">导入原站 URL 基线</button></div><div class="toolbar"><button class="outline" onclick="snapshot()">用当前内容建立 URL 基线（仅限新站）</button><a class="outline" href="${factoryUrl('/assets/inventory')}" target="_blank">资源清单 JSON</a><button class="outline" onclick="openLatestAudit()">构建后查看完整差异报告</button></div><div id="baselineImportResult"></div><p>提示：完整旧站 URL 基线应来自迁移前的原网站清单，不要用迁移后不完整的网站替代。</p></div><div class="section"><h2>实际生成 HTML 与旧站对比</h2>${audit?`<p>旧站 ${audit.baseline_count} 条 / 已匹配 ${audit.matched_pages||0} 条；阻断 ${audit.errors} 项；待复核 ${audit.unreviewed_warnings||0} 项</p><a class="outline" href="/api/audit/sites/${state.site.id}/builds/${builds[0].id}/report.csv">下载差异 CSV</a><div class="scroll"><table><thead><tr><th>问题</th><th>路径</th><th>操作</th></tr></thead><tbody>${audit.issues.slice(0,40).map(i=>`<tr><td>${H(i.field)} · ${H(i.message)}</td><td>${H(i.route)}</td><td>${i.severity==='warning'&&!i.reviewed?`<button class="outline" onclick="approveAuditWarning('${H(builds[0].id)}','${H(i.issue_id)}')">复核接受</button>`:i.reviewed?'已复核':'必须修复'}</td></tr>`).join('')}</tbody></table></div>`:'<p>请先构建新站，再与旧站基线对比。</p>'}</div><div class="section"><h2>前 12 项差异</h2>${data.baseline.issues.slice(0,12).map(x=>`<div class="row"><div><strong>${H(x.route)}</strong><small>${H(x.field)} · ${H(x.severity)}</small></div></div>`).join('')||'<p>没有基线差异。</p>'}</div></div>`;}
|
||||
async function saveContactSettings(){try{await api(siteUrl('/contact-settings'),'PUT',{email:$('#configEmail').value,form_endpoint:$('#configForm').value,footer_text:$('#configFooter').value});toast('网站联系配置已保存');await refresh()}catch(e){toast(e.message,true)}}
|
||||
|
||||
@@ -14,14 +14,15 @@ function formatJobs(list){return list.length?list.map(j=>`<div class="row"><div>
|
||||
async function chooseSite(){siteId=$('#site').value;window.SiteForgeShell?.selectSite(siteId);lastPreview=null;$('#commitImport').disabled=true;await reload()}
|
||||
async function init(){try{csrf=(await request('/api/auth/me')).csrf;sites=await request('/api/sites');$('#site').innerHTML=sites.map(s=>`<option value="${esc(s.id)}">${esc(s.name)}</option>`).join('');siteId=sites[0]?.id||'';$('#site').onchange=chooseSite;$('#reload').onclick=reload;$('#previewImport').onclick=()=>importJSON(false);$('#commitImport').onclick=()=>importJSON(true);$('#build').onclick=buildSite;$('#deploy').onclick=deploySite;$('#refreshRelease').onclick=reload;await reload()}catch(e){notify(e.message,true)}}
|
||||
async function reload(){if(!siteId)return;try{
|
||||
const [list,jobsData,buildData,approvals,history,reviewData]=await Promise.all([
|
||||
request(`/api/sites/${siteId}`),request(`/api/enterprise/sites/${siteId}/jobs`),request(`/api/sites/${siteId}/builds`),request(`/api/factory/sites/${siteId}/release-requests`),request(`/api/enterprise/sites/${siteId}/releases`),request(`/api/migrations/sites/${siteId}/reviews`)]);
|
||||
const [list,jobsData,buildData,approvals,history,reviewData,deliveryData]=await Promise.all([
|
||||
request(`/api/sites/${siteId}`),request(`/api/enterprise/sites/${siteId}/jobs`),request(`/api/sites/${siteId}/builds`),request(`/api/factory/sites/${siteId}/release-requests`),request(`/api/enterprise/sites/${siteId}/releases`),request(`/api/migrations/sites/${siteId}/reviews`),request(`/api/production/sites/${siteId}/delivery-status`)]);
|
||||
jobs=jobsData;builds=buildData;releases=history;$('#statBuild').textContent=builds.length;$('#statJobs').textContent=jobs.filter(j=>['queued','running','retrying'].includes(j.state)).length;$('#statApprovals').textContent=approvals.filter(j=>j.state==='pending').length;$('#statMode').textContent=list.mode==='migration'?'迁移':'新建';$('#jobList').innerHTML=formatJobs(jobs);
|
||||
$('#buildList').innerHTML=builds.length?builds.slice(0,14).map(b=>`<div class="row"><div><b>${esc(b.id)}</b><small>${esc(b.created_at)} · ${esc(b.total_pages)} 页</small></div><button class="secondary" onclick="requestApproval('${esc(b.id)}')">提交审批</button></div>`).join(''):'当前没有构建';
|
||||
$('#releaseBuild').innerHTML=builds.map(b=>`<option value="${esc(b.id)}">${esc(b.id)} · ${esc(b.total_pages)} 页</option>`).join('');
|
||||
$('#approvals').innerHTML=approvals.length?approvals.slice(0,12).map(a=>`<div class="row"><div><b>${esc(a.build_id)} <span class="flag ${a.state==='pending'?'warn':''}">${esc(a.state)}</span></b><small>由 ${esc(a.requested_by)} 提交</small></div>${a.state==='pending'?`<button class="secondary" onclick="approve('${esc(a.id)}')">批准</button>`:''}</div>`).join(''):'暂无审批记录';
|
||||
$('#reviews').innerHTML=reviewData.items.length?reviewData.items.map(x=>`<div class="row"><div><b>${esc(x.platform)} · 第 ${esc(x.row_number)} 条</b><small>${esc(x.issue)}</small></div><button class="secondary" onclick="resolveReview('${esc(x.id)}')">已检查并处理</button></div>`).join(''):'暂无待复核事项';
|
||||
$('#releases').innerHTML=history.length?history.slice(0,10).map(x=>`<div class="row"><div><b>${esc(x.build_id)} · ${esc(x.action)}</b><small>${esc(x.created_at)}</small></div></div>`).join(''):'暂无部署记录';
|
||||
$('#releaseBackend').textContent=['staging','production'].map(t=>`${t}: ${deliveryData.backends?.[t]||'agent'} · ${deliveryData.configured?.[t]?'已配置':'未配置'}`).join(' ｜ ');
|
||||
$('#releases').innerHTML=deliveryData.history?.length?deliveryData.history.slice(0,10).map(x=>`<div class="row"><div><b>${esc(x.build_id)} · ${esc(x.target)} · ${esc(x.release_id)}</b><small>${esc(x.deployed_at)}</small></div><button class="secondary" onclick="rollbackRelease('${esc(x.release_id)}','${esc(x.target)}')">回滚</button></div>`).join(''): '暂无远程发布记录';
|
||||
const entries=await request(`/api/sites/${siteId}/entries`);const entry=entries.find(p=>p.route==='/')||entries[0];$('#edit').href=entry?`/editor/${siteId}/${entry.id}`:'/factory-studio';
|
||||
}catch(e){notify(e.message,true)}}
|
||||
async function importJSON(commit){const file=$('#file').files?.[0];if(!file)return notify('请选择 JSON 文件',true);if(!siteId)return;const platform=$('#platform').value;
|
||||
@@ -37,6 +38,9 @@ async function buildSite(){try{const task=await post(`/api/sites/${siteId}/build
|
||||
async function cancelJob(id){try{await post(`/api/enterprise/sites/${siteId}/jobs/${id}/cancel`,{});await reload()}catch(e){notify(e.message,true)}}
|
||||
async function requestApproval(build){try{await post(`/api/factory/sites/${siteId}/release-requests`,{build_id:build});notify('已提交发布审批');await reload()}catch(e){notify(e.message,true)}}
|
||||
async function approve(id){if(!confirm('审批人必须与申请人不同。确定审批通过吗？'))return;try{await post(`/api/factory/sites/${siteId}/release-requests/${id}/review`,{state:'approved'});notify('审批已完成');await reload()}catch(e){notify(e.message,true)}}
|
||||
async function deploySite(){if(!confirm('请确保目标环境已配置 HTTPS 和发布 Agent。继续发布？'))return;try{const data=await post(`/api/production/sites/${siteId}/deploy`,{build_id:$('#releaseBuild').value,target:$('#target').value});notify(`已发布：${data.remote.release}`);await reload()}catch(e){notify(e.message,true)}}
|
||||
async function deploySite(){if(!confirm('系统将使用目标环境预先配置的发布适配器。请确认构建已审批、DNS 与版本回退方案已准备好。继续发布？'))return;try{const data=await post(`/api/production/sites/${siteId}/deploy`,{build_id:$('#releaseBuild').value,target:$('#target').value});notify(`发布任务 ${data.id} 已提交，Worker 将先上传、校验，再切换线上版本。`);await reload()}catch(e){notify(e.message,true)}}
|
||||
async function rollbackRelease(release,target){if(!confirm(`确认将 ${target} 恢复为历史版本 ${release}？`))return;
|
||||
try{const result=await post(`/api/production/sites/${siteId}/rollback`,{release_id:release,target});notify(`回滚任务 ${result.id} 已进入队列`);await reload()}catch(e){notify(e.message,true)}}
|
||||
window.rollbackRelease=rollbackRelease;
|
||||
window.resolveReview=resolveReview;window.cancelJob=cancelJob;window.requestApproval=requestApproval;window.approve=approve;
|
||||
window.addEventListener('DOMContentLoaded',init);
|
||||
|
||||
@@ -1,6 +1,52 @@
|
||||
'use strict';(()=>{
|
||||
const menu=document.querySelector('[data-pro-menu]'); const nav=document.querySelector('#pro-navigation');
|
||||
if(menu&&nav){menu.addEventListener('click',()=>{const open=menu.getAttribute('aria-expanded')!=='true';menu.setAttribute('aria-expanded',String(open));nav.classList.toggle('is-open',open);menu.setAttribute('aria-label',open?'关闭导航':'打开导航');});}
|
||||
// Drawer navigation. The same markup is used across the four professional themes.
|
||||
const mobileNav=document.querySelector('#pro-navigation');
|
||||
let drawerBackdrop=null,drawerClose=null,returnFocus=null;
|
||||
if(menu&&mobileNav){
|
||||
const originalParent=mobileNav.parentNode,originalNext=mobileNav.nextSibling;
|
||||
const heading=document.createElement('div');heading.className='sf-drawer-header';
|
||||
const title=document.createElement('strong');title.textContent='网站导航';
|
||||
drawerClose=document.createElement('button');drawerClose.type='button';drawerClose.className='sf-drawer-close';drawerClose.textContent='×';drawerClose.setAttribute('aria-label','关闭网站导航');
|
||||
heading.append(title,drawerClose);mobileNav.prepend(heading);
|
||||
drawerBackdrop=document.createElement('div');drawerBackdrop.className='sf-mobile-drawer-backdrop';drawerBackdrop.hidden=false;document.body.append(drawerBackdrop);
|
||||
function setDrawer(open,focusBack=true){
|
||||
const isMobile=window.matchMedia('(max-width:1024px)').matches;
|
||||
open=Boolean(open&&isMobile);
|
||||
if(open){returnFocus=document.activeElement;document.body.append(mobileNav);}
|
||||
else if(mobileNav.parentNode!==originalParent){if(originalNext&&originalNext.parentNode===originalParent)originalParent.insertBefore(mobileNav,originalNext);else originalParent.append(mobileNav);}
|
||||
mobileNav.classList.toggle('is-open',open);drawerBackdrop.classList.toggle('is-open',open);
|
||||
document.body.classList.toggle('sf-drawer-open',open);
|
||||
menu.setAttribute('aria-expanded',String(open));menu.setAttribute('aria-label',open?'关闭导航':'打开导航');
|
||||
mobileNav.setAttribute('aria-hidden',String(!open&&isMobile));
|
||||
if('inert' in mobileNav)mobileNav.inert=!open&&isMobile;
|
||||
if(open)drawerClose.focus();
|
||||
else if(focusBack&&returnFocus instanceof HTMLElement){returnFocus.focus();returnFocus=null;}
|
||||
}
|
||||
// Replace the old inline-expansion listener: use capture to stop the old listener.
|
||||
menu.addEventListener('click',e=>{if(!window.matchMedia('(max-width:1024px)').matches)return;e.stopImmediatePropagation();setDrawer(!mobileNav.classList.contains('is-open'));},true);
|
||||
drawerClose.addEventListener('click',()=>setDrawer(false));
|
||||
drawerBackdrop.addEventListener('click',()=>setDrawer(false));
|
||||
document.querySelectorAll('[data-mobile-open-menu]').forEach(b=>b.addEventListener('click',()=>setDrawer(true)));
|
||||
mobileNav.addEventListener('click',e=>{if(e.target.closest('a'))setDrawer(false,false)});
|
||||
document.addEventListener('keydown',e=>{
|
||||
if(e.key==='Escape'&&mobileNav.classList.contains('is-open')){e.preventDefault();setDrawer(false);}
|
||||
if(e.key!=='Tab'||!mobileNav.classList.contains('is-open'))return;
|
||||
const els=[...mobileNav.querySelectorAll('button:not([disabled]),a[href]')].filter(el=>el.getClientRects().length&&!el.closest('[hidden]'));
|
||||
if(!els.length)return;const first=els[0],last=els[els.length-1];
|
||||
if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();}
|
||||
else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();}
|
||||
});
|
||||
window.matchMedia('(max-width:1024px)').addEventListener('change',()=>setDrawer(false,false));
|
||||
if('inert' in mobileNav&&window.matchMedia('(max-width:1024px)').matches)mobileNav.inert=true;
|
||||
// Do not strand catalogue links when the old mobile mega-button is hidden.
|
||||
const megaLinks=document.querySelectorAll('[data-pro-mega] a');
|
||||
if(megaLinks.length){const wrap=document.createElement('div');wrap.className='sf-drawer-extra';const h=document.createElement('strong');h.textContent='更多分类与系列';wrap.append(h);
|
||||
[...megaLinks].slice(0,20).forEach(a=>{const clone=a.cloneNode(true);wrap.append(clone);});mobileNav.append(wrap);}
|
||||
}
|
||||
const tabbar=document.querySelector('[data-mobile-tabs]');
|
||||
if(tabbar){tabbar.style.setProperty('--sf-mobile-tab-count',String(tabbar.children.length));}
|
||||
const megaButton=document.querySelector('[data-pro-catalog]'), mega=document.querySelector('[data-pro-mega]');
|
||||
if(megaButton&&mega){function setMega(open){mega.hidden=!open;mega.classList.toggle('is-open',open);megaButton.setAttribute('aria-expanded',String(open));}
|
||||
megaButton.addEventListener('click',()=>setMega(mega.hidden));
|
||||
|
||||
@@ -2,4 +2,5 @@
|
||||
|
||||
/* V8.12: task progress and dangerous actions, consistent focus and mobile sizing */
|
||||
.btn-danger{border:1px solid #f1c3c7;color:#a92840;background:#fff5f6}.btn-danger:hover{background:#feecee}.btn:disabled{opacity:.55;cursor:not-allowed}.build-row{min-width:0}.build-meta{overflow-wrap:anywhere}.site-card:focus-visible,.quick-card:focus-visible{outline:3px solid #80aaf6;outline-offset:2px}@media(max-width:570px){.build-row{align-items:flex-start;flex-wrap:wrap}.build-row>.inline-actions{width:100%;padding-left:0}.site-picker-wrap select{max-width:130px}}
|
||||
|
||||
.theme-preview.trade-pro{background:linear-gradient(125deg,#0b3d91,#3d6dc1);color:#e8f1fb}.site-icon.trade-pro{background:#e8f1fb;color:#0b3d91}
|
||||
|
||||
+53
-14
@@ -7,8 +7,8 @@ const typeName={page:'页面',product:'产品',vehicle:'车型',post:'新闻',br
|
||||
const fmtDate=t=>{if(!t)return '—';const d=new Date(t);return Number.isNaN(d.getTime())?String(t).slice(0,16):d.toLocaleDateString('zh-CN',{year:'numeric',month:'2-digit',day:'2-digit'})};
|
||||
const sfSiteKey='siteforge:selected-site';
|
||||
const sfRemember=id=>{try{if(id)localStorage.setItem(sfSiteKey,id)}catch{}};
|
||||
const state={sites:[],site:null,entries:[],builds:[],jobs:[],view:'home',csrf:'',search:'',typ:'',loading:false,job:null,selectionToken:0,building:false};
|
||||
const headings={home:'工作台',sites:'我的网站',overview:'网站概览',content:'内容与页面',design:'外观与设计',import:'导入与迁移',build:'构建与交付',settings:'网站设置'};
|
||||
const state={sites:[],site:null,entries:[],builds:[],jobs:[],view:'home',csrf:'',search:'',typ:'',loading:false,job:null,selectionToken:0,building:false,delivery:{jobs:[],history:[],configured:{}},language:{group:null,sites:[],units:[]},languageGroups:[],languageEntries:[]};
|
||||
const headings={home:'工作台',sites:'我的网站',overview:'网站概览',content:'内容与页面',design:'外观与设计',import:'导入与迁移',build:'构建与交付',languages:'多语言管理',settings:'网站设置'};
|
||||
async function api(url,method='GET',data=null,extraHeaders={}){
|
||||
const headers={...extraHeaders};if(method!=='GET'&&method!=='HEAD')headers['X-SiteForge-CSRF']=state.csrf;
|
||||
let body=data;if(data!=null && !(data instanceof FormData)){headers['Content-Type']='application/json';body=JSON.stringify(data)}
|
||||
@@ -86,28 +86,61 @@ function builds(){if(!currentSite())return noSite();const latest=latestDone();co
|
||||
(state.jobs.length?state.jobs.slice(0,8).map(j=>`<div class="build-row"><span class="quick-ico">${j.state==='done'?'✓':j.state==='failed'?'!':'◷'}</span><div class="build-meta"><h3>${esc(buildStatusLabel(j.state))}</h3><p>${esc(fmtDate(j.created_at))} · 任务 ${esc(j.id.slice(0,12))}${j.state==='failed'&&j.error?' · '+esc(j.error):''}</p></div>${['queued','running','retrying'].includes(j.state)?`<button class="btn btn-tiny btn-danger" data-action="cancel-job" data-id="${esc(j.id)}">取消任务</button>`:''}</div>`).join(''):'<p class="muted">当前网站还没有后台构建任务。</p>')+`</div>`+
|
||||
`<div class="panel" style="margin-top:18px"><div class="panel-head"><div><h2>构建版本</h2><p>建议先预览和核对质量报告，再下载 ZIP。预览不代表正式发布。</p></div></div>`+
|
||||
(state.builds.length?state.builds.slice(0,20).map(b=>`<div class="build-row"><span class="quick-ico">${['done','completed','success','complete'].includes(b.status)?'✓':'◷'}</span><div class="build-meta"><h3>${esc(fmtDate(b.created_at))} · ${esc(b.total_pages||'—')} 个页面</h3><p>版本 ${esc(b.id.slice(0,12))} · ${esc(b.status||'未知')}</p></div><div class="inline-actions">${['done','completed','success','complete'].includes(b.status)?`<a class="btn btn-tiny" href="/preview/${encodeURIComponent(state.site.id)}/${encodeURIComponent(b.id)}/" target="_blank" rel="noopener">预览 ↗</a><button class="btn btn-tiny" data-action="report" data-id="${esc(b.id)}">质量报告</button><a class="btn btn-tiny btn-primary" href="/api/sites/${encodeURIComponent(state.site.id)}/builds/${encodeURIComponent(b.id)}/download">下载 ZIP</a>`:'<span class="muted">尚未完成，暂不能下载</span>'}</div></div>`).join(''):emptyState('尚无完成版本','准备好网站数据后，在上方提交构建任务。'))+
|
||||
`<div id="reportContent"></div></div>`;
|
||||
`<div id="reportContent"></div></div>`+
|
||||
`<div class="panel" style="margin-top:18px"><div class="panel-head"><div><h2>正式发布与回滚</h2><p>先完成质量检查与独立审批，Worker 负责上传、校验和切换版本。没有配置目标服务器时不能发布。</p></div><a href="/operations" class="btn btn-tiny">审批与复核工具 ↗</a></div>
|
||||
<div class="field-grid"><label>选择已完成构建<select id="deliveryBuild">${state.builds.filter(b=>b.status==='complete').map(b=>`<option value="${esc(b.id)}">${esc(b.id.slice(0,12))} · ${esc(fmtDate(b.created_at))}</option>`).join('')}</select></label>
|
||||
<label>目标环境<select id="deliveryTarget"><option value="staging">测试环境（Staging）</option><option value="production">正式环境（Production）</option></select></label></div>
|
||||
<div class="form-actions"><button class="btn" data-action="release-preflight">检查发布条件</button><button class="btn" data-action="release-approval">提交独立审批</button><button class="btn btn-primary" data-action="release-deploy">提交发布任务</button></div>
|
||||
<div id="deliveryNotice" class="message" aria-live="polite" hidden></div>
|
||||
<h3>最近发布任务</h3>${(state.delivery.jobs||[]).length?state.delivery.jobs.slice(0,8).map(j=>`<div class="build-row"><div class="build-meta"><strong>${j.kind==='remote_rollback'?'回滚':'部署'} · ${esc(buildStatusLabel(j.state))}</strong><p>${esc(j.id.slice(0,12))} · ${esc(j.created_at)}${j.error?' · '+esc(j.error):''}</p></div>${['queued','running','retrying'].includes(j.state)?`<button class="btn btn-tiny btn-danger" data-action="cancel-job" data-id="${esc(j.id)}">取消</button>`:''}</div>`).join(''):'<p class="muted">暂无发布任务。</p>'}
|
||||
<h3>已发布版本</h3>${(state.delivery.history||[]).length?state.delivery.history.slice(0,8).map(r=>`<div class="build-row"><div class="build-meta"><strong>${esc(r.target)} · ${esc(r.release_id)}</strong><p>构建 ${esc(r.build_id.slice(0,12))} · ${esc(r.deployed_at)}</p></div><button class="btn btn-tiny" data-action="release-rollback" data-target="${esc(r.target)}" data-id="${esc(r.release_id)}">回滚到此版本</button></div>`).join(''):'<p class="muted">当前没有远程部署记录。</p>'}</div>`;
|
||||
}
|
||||
function settings(){if(!currentSite())return noSite();const s=state.site;return htmlHeading('网站设置','这里只管理公司资料、域名与站点属性。网页样式请到“外观与设计”修改。')+
|
||||
`<div class="panel"><h2>基本资料</h2><p class="panel-desc">没有域名也可以制作与预览网站，正式上线前再填写即可。</p><form id="settingsForm"><div class="field-grid"><label class="full">网站名称<input name="name" required value="${esc(s.name)}"></label><label class="full">正式域名<input name="domain" placeholder="https://www.example.com" value="${esc(s.domain||'')}"></label><label class="full">企业介绍 / 网站标语<textarea name="tagline" rows="3">${esc(s.tagline||'')}</textarea></label><label class="full">Logo 图片地址<input name="logo" value="${esc(s.logo||'')}"></label><label>网站类型<select name="mode"><option value="new" ${s.mode==='new'?'selected':''}>新建网站</option><option value="migration" ${s.mode==='migration'?'selected':''}>旧站迁移</option><option value="hybrid" ${s.mode==='hybrid'?'selected':''}>混合建站</option></select></label><label>主题色<input type="color" name="accent" value="${esc(s.accent||'#245ac6')}" style="padding:4px;height:43px"></label></div><div class="form-actions"><button class="btn btn-primary" type="submit">保存网站设置</button></div></form></div>`;
|
||||
}
|
||||
function languages(){
|
||||
if(!currentSite())return noSite();
|
||||
const d=state.language||{group:null,sites:[],units:[]};const g=d.group;
|
||||
const groups=state.languageGroups||[];
|
||||
const header=htmlHeading('多语言管理','多个语言版本分别拥有独立的网站、域名和内容。系统只关联已审核的翻译，不会自动翻译企业事实。','<button class="btn" data-action="language-refresh">刷新语言状态</button>');
|
||||
if(!g)return header+`<div class="panel"><h2>第一步 · 建立语言组</h2><p class="panel-desc">例如“集团全球网站”包含中文版、英文版、法文版。创建语言组后将网站加入对应语言。</p><form id="langGroupForm"><div class="field-grid"><label>语言组名称<input name="name" required minlength="2" placeholder="HESU 国际站"></label><label>默认语言<select name="default_locale"><option value="en">English (en)</option><option value="zh-CN">简体中文 (zh-CN)</option><option value="fr-FR">Français (fr-FR)</option><option value="ar">العربية (ar)</option></select></label><label>当前网站的实际语言<input name="current_locale" value="zh-CN" required placeholder="例如 zh-CN 或 en"></label></div><div class="form-actions"><button class="btn btn-primary">创建语言组并关联当前网站</button></div></form></div>`+
|
||||
(groups.length?`<div class="panel"><h2>加入已有语言组</h2><p class="panel-desc">仅可关联您有管理权限、且已配置独立 HTTPS 域名的网站。</p><form id="langJoinForm"><div class="field-grid"><label>语言组<select name="group_id">${groups.map(x=>`<option value="${esc(x.id)}">${esc(x.name)}</option>`).join('')}</select></label><label>当前网站的语言<input name="locale" value="zh-CN" required placeholder="zh-CN / en / fr-FR"></label></div><div class="form-actions"><button class="btn btn-primary">加入语言组</button></div></form></div>`:'')+
|
||||
`<div class="help-hint"><strong>上线前提示：</strong>网站设置中的正式域名应为 https://example.com 形式；不同语言网站不能共用一个域名。当前域名：${esc(state.site.domain||'未设置')}</div>`;
|
||||
const groupSites=d.sites||[]; const uniqueUnits=[...new Map((d.units||[]).map(u=>[u.id,u])).values()];
|
||||
const canJoin=state.sites.filter(x=>!groupSites.some(m=>m.site_id===x.id));
|
||||
return header+`<div class="panel"><div class="panel-head"><div><h2>${esc(g.name)}</h2><p>当前站语言 ${esc(g.locale)} · 默认语言 ${esc(g.default_locale)} · ${groupSites.length} 个语言站点</p></div></div><div class="table-wrap"><table class="data-table"><thead><tr><th>语言</th><th>网站</th><th>正式域名</th></tr></thead><tbody>${groupSites.map(x=>`<tr><td>${esc(x.locale)}</td><td>${esc(x.name)}</td><td>${esc(x.domain)}</td></tr>`).join('')}</tbody></table></div></div>`+
|
||||
`<div class="panel"><h2>第二步 · 添加其他语言网站</h2><form id="langJoinForm"><div class="field-grid"><input type="hidden" name="group_id" value="${esc(g.group_id)}"><label>已有网站<select name="site_id">${canJoin.map(x=>`<option value="${esc(x.id)}">${esc(x.name)}</option>`).join('')}</select></label><label>对应语言<input name="locale" required placeholder="例如 en、fr-FR"></label></div><div class="form-actions"><button class="btn btn-primary" ${!canJoin.length?'disabled':''}>加入语言站</button></div></form><p class="muted">先通过“我的网站”创建另一语言站并设置 HTTPS 域名，再加入语言组。</p></div>`+
|
||||
`<div class="panel"><h2>第三步 · 建立翻译内容关系</h2><p class="panel-desc">相同产品、文章或页面可以使用不同 URL。用一个内容标识关联它们，只有正式发布且审核通过的内容才会生成 hreflang。</p><form id="langUnitForm"><div class="field-grid"><label class="full">翻译组标识<input name="reference_key" required placeholder="例如 product:rox-01 或 about-page"></label></div><div class="form-actions"><button class="btn btn-primary">创建内容翻译组</button></div></form></div>`+
|
||||
`<div class="panel"><h2>第四步 · 关联各语言的实际内容</h2><form id="langLinkForm"><div class="field-grid"><label>翻译内容组<select name="unit_id">${uniqueUnits.map(x=>`<option value="${esc(x.id)}">${esc(x.reference_key)}</option>`).join('')}</select></label><label>语言网站<select id="langMemberSite" name="site_id">${groupSites.map(x=>`<option value="${esc(x.site_id)}" ${x.site_id===state.site.id?'selected':''}>${esc(x.locale)} · ${esc(x.name)}</option>`).join('')}</select></label><label class="full">对应内容<select id="langMemberEntry" name="entry_id">${(state.languageEntries||[]).map(x=>`<option value="${esc(x.id)}">${esc(x.title)} (${esc(x.route)}) · ${x.status==='published'?'正式':'草稿'}</option>`).join('')}</select></label><label>审核状态<select name="state"><option value="pending">待翻译（仅允许草稿）</option><option value="approved">翻译已确认（仅允许正式内容）</option></select></label></div><div class="form-actions"><button class="btn btn-primary" ${uniqueUnits.length?'':'disabled'}>保存关联</button></div></form></div>`+
|
||||
`<div class="panel"><h2>已有语言关系</h2><p class="panel-desc">没有已审核的双向内容关系，就不会输出假语言链接。</p>${d.units.length?`<div class="table-wrap"><table class="data-table"><thead><tr><th>内容组</th><th>语言</th><th>内容 / URL</th><th>状态</th></tr></thead><tbody>${d.units.map(u=>`<tr><td>${esc(u.reference_key)}</td><td>${esc(u.locale)}</td><td>${esc(u.title)}<br><small>${esc(u.route)}</small></td><td>${u.state==='approved'?'已审核':'待翻译'}</td></tr>`).join('')}</tbody></table></div>`:'<p class="muted">还没有关联内容。</p>'}</div>`;
|
||||
}
|
||||
async function loadLanguage(){const sid=state.site?.id;if(!sid)return;try{
|
||||
const [data,groups]=await Promise.all([api('/api/i18n/sites/'+encodeURIComponent(sid)),api('/api/i18n/groups')]);
|
||||
if(state.site?.id!==sid)return;state.language=data;state.languageGroups=groups;await loadLanguageEntries(sid,false);if(state.view==='languages')rerender();
|
||||
}catch(e){notifyError(e)}}
|
||||
async function loadLanguageEntries(siteId,redraw=true){if(!siteId)return;try{const rows=await api('/api/sites/'+encodeURIComponent(siteId)+'/entries');state.languageEntries=rows;if(redraw){const target=$('#langMemberEntry');if(target)target.innerHTML=rows.map(x=>`<option value="${esc(x.id)}">${esc(x.title)} (${esc(x.route)}) · ${x.status==='published'?'正式':'草稿'}</option>`).join('')}}catch(e){notifyError(e);state.languageEntries=[]}}
|
||||
async function submitLanguageGroup(ev){ev.preventDefault();if(!state.site)return;try{const d=Object.fromEntries(new FormData(ev.target));const locale=d.current_locale;delete d.current_locale;const group=await api('/api/i18n/groups','POST',d);await api('/api/i18n/groups/'+group.id+'/sites','POST',{site_id:state.site.id,locale});toast('语言组已创建');await loadLanguage()}catch(e){notifyError(e)}}
|
||||
async function submitLanguageJoin(ev){ev.preventDefault();try{const d=Object.fromEntries(new FormData(ev.target));await api('/api/i18n/groups/'+d.group_id+'/sites','POST',{site_id:d.site_id||state.site.id,locale:d.locale});toast('语言站已关联');await loadLanguage()}catch(e){notifyError(e)}}
|
||||
async function submitLanguageUnit(ev){ev.preventDefault();const d=Object.fromEntries(new FormData(ev.target));try{await api('/api/i18n/groups/'+state.language.group.group_id+'/units','POST',d);toast('翻译组已创建');await loadLanguage()}catch(e){notifyError(e)}}
|
||||
async function submitLanguageLink(ev){ev.preventDefault();const d=Object.fromEntries(new FormData(ev.target));try{await api('/api/i18n/groups/'+state.language.group.group_id+'/units/'+encodeURIComponent(d.unit_id)+'/members','POST',{site_id:d.site_id,entry_id:d.entry_id,state:d.state});toast('内容翻译关系已保存');await loadLanguage()}catch(e){notifyError(e)}}
|
||||
function rerender(){const area=$('#mainContent');const selected=state.view;$('#breadcrumbTitle').textContent=headings[selected]||'工作台';$('#sideSiteName').textContent=state.site?.name||'请先选择网站';
|
||||
document.querySelectorAll('[data-view].nav-item').forEach(el=>{const yes=el.dataset.view===selected;el.classList.toggle('active',yes);yes?el.setAttribute('aria-current','page'):el.removeAttribute('aria-current')});
|
||||
area.innerHTML=({home,sites,overview,content,design,import:imports,build:builds,settings}[selected]||home)();
|
||||
area.innerHTML=({home,sites,overview,content,design,import:imports,build:builds,languages,settings}[selected]||home)();
|
||||
}
|
||||
async function loadSites(){state.sites=await api('/api/sites');const picker=$('#sitePicker'),prev=state.site?.id||'';picker.innerHTML='<option value="">选择网站…</option>'+state.sites.map(s=>`<option value="${esc(s.id)}">${esc(s.name)}</option>`).join('');picker.value=state.sites.some(s=>s.id===prev)?prev:''}
|
||||
async function readDelivery(siteId){try{return await api(`/api/production/sites/${encodeURIComponent(siteId)}/delivery-status`)}catch(e){return {jobs:[],history:[],configured:{}}}}
|
||||
async function readJobs(siteId){try{return await api(`/api/enterprise/sites/${encodeURIComponent(siteId)}/jobs`)}catch(e){if(![403,404].includes(Number(e.status)))console.warn('加载任务状态失败',e);return []}}
|
||||
async function selectSite(id,go='overview',historyMode='push'){
|
||||
const token=++state.selectionToken;
|
||||
if(!id){state.site=null;state.entries=[];state.builds=[];state.jobs=[];state.job=null;state.view=go==='home'?'home':'sites';$('#sitePicker').value='';rerender();if(historyMode!=='none')rememberView(historyMode==='replace');return}
|
||||
if(!id){state.site=null;state.entries=[];state.builds=[];state.jobs=[];state.delivery={jobs:[],history:[],configured:{}};state.job=null;state.view=go==='home'?'home':'sites';$('#sitePicker').value='';rerender();if(historyMode!=='none')rememberView(historyMode==='replace');return}
|
||||
if(!state.sites.some(x=>x.id===id)){toast('该网站不在您的可见列表中',true);return}
|
||||
try{const [site,entries,builds,jobs]=await Promise.all([api(`/api/sites/${encodeURIComponent(id)}`),api(`/api/sites/${encodeURIComponent(id)}/entries`),api(`/api/sites/${encodeURIComponent(id)}/builds`),readJobs(id)]);
|
||||
try{const [site,entries,builds,jobs,delivery]=await Promise.all([api(`/api/sites/${encodeURIComponent(id)}`),api(`/api/sites/${encodeURIComponent(id)}/entries`),api(`/api/sites/${encodeURIComponent(id)}/builds`),readJobs(id),readDelivery(id)]);
|
||||
if(token!==state.selectionToken)return;
|
||||
state.site=site;sfRemember(id);state.entries=entries;state.builds=builds;state.jobs=jobs;state.job=null;state.view=go;state.search='';state.typ='';$('#sitePicker').value=id;rerender();if(historyMode!=='none')rememberView(historyMode==='replace');closeMobile();window.scrollTo({top:0,behavior:'instant'});
|
||||
state.site=site;sfRemember(id);state.entries=entries;state.builds=builds;state.jobs=jobs;state.delivery=delivery;state.job=null;state.view=go;state.search='';state.typ='';$('#sitePicker').value=id;rerender();if(historyMode!=='none')rememberView(historyMode==='replace');if(go==='languages')loadLanguage();closeMobile();window.scrollTo({top:0,behavior:'instant'});
|
||||
}catch(e){if(token===state.selectionToken)notifyError(e)}
|
||||
}
|
||||
function navigate(to,historyMode='push'){if(!state.site&&!['home','sites'].includes(to)){state.view='sites';rerender();toast('请先选择网站项目');return}state.view=to;rerender();closeMobile();if(historyMode!=='none')rememberView(historyMode==='replace');if(to==='build')refreshBuilds();window.scrollTo({top:0,behavior:'instant'})}
|
||||
async function refreshBuilds(){const id=state.site?.id;if(!id)return;try{const previouslyRunning=activeJobs().length>0;const [jobs,builds]=await Promise.all([readJobs(id),api(`/api/sites/${encodeURIComponent(id)}/builds`)]);if(state.site?.id!==id)return;state.jobs=jobs;state.builds=builds;if(previouslyRunning&&!activeJobs().length){const last=jobs[0];state.job=last?.state==='done'?'后台构建已完成，请预览并查看质量报告。':last?.state==='failed'?'本次构建失败，请在任务中心检查原因。':last?.state==='cancelled'?'本次构建已取消。':null}if(state.view==='build')rerender()}catch(e){notifyError(e)}}
|
||||
function navigate(to,historyMode='push'){if(!state.site&&!['home','sites'].includes(to)){state.view='sites';rerender();toast('请先选择网站项目');return}state.view=to;rerender();closeMobile();if(historyMode!=='none')rememberView(historyMode==='replace');if(to==='build')refreshBuilds();if(to==='languages')loadLanguage();window.scrollTo({top:0,behavior:'instant'})}
|
||||
async function refreshBuilds(){const id=state.site?.id;if(!id)return;try{const previouslyRunning=activeJobs().length>0;const [jobs,builds,delivery]=await Promise.all([readJobs(id),api(`/api/sites/${encodeURIComponent(id)}/builds`),readDelivery(id)]);if(state.site?.id!==id)return;state.jobs=jobs;state.builds=builds;state.delivery=delivery;if(previouslyRunning&&!activeJobs().length){const last=jobs[0];state.job=last?.state==='done'?'后台构建已完成，请预览并查看质量报告。':last?.state==='failed'?'本次构建失败，请在任务中心检查原因。':last?.state==='cancelled'?'本次构建已取消。':null}if(state.view==='build')rerender()}catch(e){notifyError(e)}}
|
||||
function openModal(name){const node=$('#'+name);node.showModal();node.querySelector('input:not([type=hidden]),select')?.focus()}
|
||||
function closeModal(name){$('#'+name)?.close()}
|
||||
function openEntry(id){const form=$('#entryForm');form.reset();form.elements.entry_id.value='';$('#entryModalTitle').textContent=id?'修改内容':'添加内容';if(id){const e=state.entries.find(x=>x.id===id);if(!e)return toast('这条内容不存在',true);for(const field of ['title','route','summary','body','seo_title','seo_description','type','status']){if(form.elements[field])form.elements[field].value=e[field]||''}form.elements.entry_id.value=id}openModal('entryModal')}
|
||||
@@ -125,6 +158,12 @@ async function buildNow(){if(!state.site)return toast('请先选择网站',true)
|
||||
try{navigate('build');state.job='正在提交构建任务…';rerender();const job=await api(`/api/sites/${encodeURIComponent(id)}/builds`,'POST',{mirror_images:false},{'Idempotency-Key':crypto.randomUUID()});
|
||||
if(state.site?.id!==id)return;state.job=`任务 ${job.id?.slice(0,12)||'已提交'} 已进入队列，可以离开页面；重新打开“构建与交付”查看结果。`;toast('已提交构建任务');await refreshBuilds();
|
||||
}catch(e){notifyError(e)}finally{state.building=false;if(state.site?.id===id&&state.view==='build')rerender()}}
|
||||
function selectedReleaseBuild(){const id=$('#deliveryBuild')?.value;if(!id)throw Error('没有可发布的构建版本，请先完成网站构建');return id}
|
||||
function showDeliveryMessage(message){const el=$('#deliveryNotice');if(el){el.hidden=false;el.textContent=message}toast(message)}
|
||||
async function releasePreflight(){if(!state.site)return;try{const id=selectedReleaseBuild(),s=state.site.id;const r=await api(`/api/production/sites/${encodeURIComponent(s)}/preflight/${encodeURIComponent(id)}`);if(state.site?.id!==s)return;showDeliveryMessage(r.ready?'已通过发布前置检查：'+r.message:'尚不能发布：'+r.message)}catch(e){notifyError(e)}}
|
||||
async function releaseApproval(){if(!state.site)return;try{const id=selectedReleaseBuild(),s=state.site.id;const r=await api(`/api/factory/sites/${encodeURIComponent(s)}/release-requests`,'POST',{build_id:id});showDeliveryMessage('审批申请已创建，请由另一名有审核权限的人员批准。申请编号：'+r.id)}catch(e){notifyError(e)}}
|
||||
async function releaseDeploy(){if(!state.site)return;try{const id=selectedReleaseBuild(),s=state.site.id,target=$('#deliveryTarget')?.value;if(!state.delivery.configured?.[target])throw Error('尚未配置此目标服务器，请管理员配置目标发布方式（Agent/SFTP/S3）、服务器凭据与 HTTPS 验证地址');if(!confirm(`确定将构建 ${id.slice(0,12)} 提交到${target==='production'?'正式':'测试'}环境吗？必须已有独立审批。`))return;const r=await api(`/api/production/sites/${encodeURIComponent(s)}/deploy`,'POST',{build_id:id,target},{'Idempotency-Key':crypto.randomUUID()});showDeliveryMessage(`发布任务 ${r.id} 已排队。Worker 会先暂存和校验，再激活新版本。`);await refreshBuilds()}catch(e){notifyError(e)}}
|
||||
async function releaseRollback(target,release){if(!state.site)return;if(!confirm(`确定在 ${target} 环境恢复历史版本 ${release} 吗？请确认其内容仍符合当前业务要求。`))return;try{const r=await api(`/api/production/sites/${encodeURIComponent(state.site.id)}/rollback`,'POST',{target,release_id:release},{'Idempotency-Key':crypto.randomUUID()});showDeliveryMessage(`回滚任务 ${r.id} 已排队，请在任务列表查看结果。`);await refreshBuilds()}catch(e){notifyError(e)}}
|
||||
async function checkReadiness(){if(!state.site)return;const siteId=state.site.id;
|
||||
try{const result=await api(`/api/factory/sites/${encodeURIComponent(siteId)}/migration/readiness`);
|
||||
if(state.site?.id!==siteId)return;
|
||||
@@ -139,21 +178,21 @@ function closeMobile(){$('#sideMenu').classList.remove('open');$('#mobileBackdro
|
||||
async function init(){try{const me=await api('/api/auth/me');state.csrf=me.csrf;await loadSites();const health=await api('/api/health');$('#appVersion').textContent='版本 '+health.version;
|
||||
// Restore URL first, then a previously selected site *only* after verifying /api/sites.
|
||||
const params=new URLSearchParams(location.search),requested=params.get('site');
|
||||
const target=params.get('view');const allowed=new Set(['home','sites','overview','content','design','import','build','settings']);
|
||||
const target=params.get('view');const allowed=new Set(['home','sites','overview','content','design','import','build','languages','settings']);
|
||||
let stored='';try{stored=localStorage.getItem(sfSiteKey)||''}catch{}
|
||||
const chosen=[requested,stored].find(id=>id&&state.sites.some(x=>x.id===id));
|
||||
if(chosen){await selectSite(chosen,allowed.has(target)?target:'overview','replace')}
|
||||
else {state.view=target==='sites'?'sites':'home';rerender();rememberView(true)}
|
||||
}catch(e){notifyError(e);$('#mainContent').innerHTML=emptyState('后台加载失败',e.message,'<button class="btn btn-primary" onclick="location.reload()">重新加载</button>')}}
|
||||
// Delegated UI interactions keep navigation and form actions centrally auditable.
|
||||
document.addEventListener('click',async ev=>{const control=ev.target.closest('[data-action]');if(!control)return;const action=control.dataset.action;try{if(action==='navigate')navigate(control.dataset.view);if(action==='new-site')openModal('siteModal');if(action==='select-site')await selectSite(control.dataset.id);if(action==='new-entry')openEntry();if(action==='edit-entry')openEntry(control.dataset.id);if(action==='set-theme')await setTheme(control.dataset.theme);if(action==='build-now')await buildNow();if(action==='refresh-builds')await refreshBuilds();if(action==='check-readiness')await checkReadiness();if(action==='cancel-job')await cancelJob(control.dataset.id);if(action==='report')await showReport(control.dataset.id)}catch(e){notifyError(e)}});
|
||||
document.addEventListener('click',async ev=>{const control=ev.target.closest('[data-action]');if(!control)return;const action=control.dataset.action;try{if(action==='navigate')navigate(control.dataset.view);if(action==='language-refresh')await loadLanguage();if(action==='new-site')openModal('siteModal');if(action==='select-site')await selectSite(control.dataset.id);if(action==='new-entry')openEntry();if(action==='edit-entry')openEntry(control.dataset.id);if(action==='set-theme')await setTheme(control.dataset.theme);if(action==='build-now')await buildNow();if(action==='refresh-builds')await refreshBuilds();if(action==='check-readiness')await checkReadiness();if(action==='cancel-job')await cancelJob(control.dataset.id);if(action==='report')await showReport(control.dataset.id);if(action==='release-preflight')await releasePreflight();if(action==='release-approval')await releaseApproval();if(action==='release-deploy')await releaseDeploy();if(action==='release-rollback')await releaseRollback(control.dataset.target,control.dataset.id)}catch(e){notifyError(e)}});
|
||||
document.addEventListener('click',ev=>{const btn=ev.target.closest('[data-close]');if(btn)closeModal(btn.dataset.close)});
|
||||
$('#siteForm').addEventListener('submit',saveSite);$('#entryForm').addEventListener('submit',saveEntry);
|
||||
document.addEventListener('submit',ev=>{if(ev.target.id==='settingsForm')saveSettings(ev);if(ev.target.id==='importForm')importFile(ev)});
|
||||
document.addEventListener('submit',ev=>{if(ev.target.id==='settingsForm')saveSettings(ev);if(ev.target.id==='importForm')importFile(ev);if(ev.target.id==='langGroupForm')submitLanguageGroup(ev);if(ev.target.id==='langJoinForm')submitLanguageJoin(ev);if(ev.target.id==='langUnitForm')submitLanguageUnit(ev);if(ev.target.id==='langLinkForm')submitLanguageLink(ev)});
|
||||
document.addEventListener('input',ev=>{if(ev.target.id==='contentSearch'){state.search=ev.target.value;const cursor=ev.target.selectionStart;const type=state.typ;rerender();const el=$('#contentSearch');el.focus();el.setSelectionRange(cursor,cursor);state.typ=type}});
|
||||
document.addEventListener('change',ev=>{if(ev.target.id==='contentType'){state.typ=ev.target.value;rerender()}});
|
||||
document.addEventListener('change',ev=>{if(ev.target.id==='contentType'){state.typ=ev.target.value;rerender()}if(ev.target.id==='langMemberSite')loadLanguageEntries(ev.target.value)});
|
||||
$('#sitePicker').addEventListener('change',ev=>selectSite(ev.target.value));
|
||||
window.addEventListener('popstate',async()=>{const p=new URLSearchParams(location.search);const site=p.get('site'),view=p.get('view')||'home';const allowed=['home','sites','overview','content','design','import','build','settings'];if(site&&state.sites.some(s=>s.id===site))await selectSite(site,allowed.includes(view)?view:'overview','none');else{state.selectionToken++;state.site=null;state.entries=[];state.jobs=[];state.builds=[];state.view=view==='sites'?'sites':'home';rerender()}});
|
||||
window.addEventListener('popstate',async()=>{const p=new URLSearchParams(location.search);const site=p.get('site'),view=p.get('view')||'home';const allowed=['home','sites','overview','content','design','import','build','languages','settings'];if(site&&state.sites.some(s=>s.id===site))await selectSite(site,allowed.includes(view)?view:'overview','none');else{state.selectionToken++;state.site=null;state.entries=[];state.jobs=[];state.builds=[];state.view=view==='sites'?'sites':'home';rerender()}});
|
||||
setInterval(()=>{if(!document.hidden&&state.view==='build'&&activeJobs().length)refreshBuilds()},5000);
|
||||
$('#newSiteTop').addEventListener('click',()=>openModal('siteModal'));
|
||||
$('#logoutBtn').addEventListener('click',async()=>{try{await api('/api/auth/logout','POST');location.href='/login'}catch(e){notifyError(e)}});
|
||||
|
||||
Reference in New Issue
Block a user