2026-04-02 20:07:12 +08:00
<!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width,initial-scale=1.0,maximum-scale=5.0,viewport-fit=cover" >
< meta name = "description" content = "光湖灯塔 · 语言驱动操作系统 AGE OS" >
< meta name = "theme-color" content = "#080c18" >
< meta name = "apple-mobile-web-app-capable" content = "yes" >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" >
< title > 光湖灯塔 · AGE OS< / title >
< link rel = "icon" href = "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🏛️</text></svg>" >
< style >
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ═══ Themes ═══ */
:root{
2026-04-03 01:00:39 +08:00
--bg:#03060e;--bg1:rgba(8,14,30,.85);--bg2:rgba(12,20,40,.8);--bg3:rgba(18,28,52,.75);
--border:rgba(80,120,200,.15);--accent:#6ea8fe;--accent2:#a78bfa;--accent3:#c4b5fd;
2026-04-02 20:07:12 +08:00
--ok:#34d399;--warn:#fbbf24;--err:#f87171;
2026-04-03 01:00:39 +08:00
--text:#e2e8f0;--dim:#7c8db5;--muted:rgba(100,130,180,.3);
--glow:0 0 30px rgba(110,168,254,.15),0 0 60px rgba(167,139,250,.08);
--r:14px;--rs:8px;
2026-04-02 20:07:12 +08:00
--f:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue','Microsoft YaHei',sans-serif;
--m:'SF Mono','Fira Code',Consolas,monospace;
--sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px);
2026-04-03 01:00:39 +08:00
--glass:rgba(10,16,32,.6);--glass-border:rgba(100,140,220,.12);
2026-04-02 20:07:12 +08:00
}
2026-04-03 01:00:39 +08:00
.t-twi{--bg:#06030f;--bg1:rgba(16,10,30,.85);--bg2:rgba(22,16,42,.8);--bg3:rgba(30,22,55,.75);--accent:#c084fc;--accent2:#e879f9;--accent3:#f0abfc;--border:rgba(140,80,200,.15)}
.t-sea{--bg:#030d12;--bg1:rgba(6,20,30,.85);--bg2:rgba(10,30,44,.8);--bg3:rgba(14,40,56,.75);--accent:#22d3ee;--accent2:#06b6d4;--accent3:#67e8f9;--border:rgba(34,211,238,.12)}
.t-for{--bg:#040e06;--bg1:rgba(8,24,14,.85);--bg2:rgba(14,34,22,.8);--bg3:rgba(18,44,30,.75);--accent:#34d399;--accent2:#4ade80;--accent3:#86efac;--border:rgba(52,211,153,.12)}
.t-emb{--bg:#0e0604;--bg1:rgba(28,14,6,.85);--bg2:rgba(38,22,10,.8);--bg3:rgba(48,30,16,.75);--accent:#fb923c;--accent2:#f97316;--accent3:#fdba74;--border:rgba(251,146,60,.12)}
2026-04-02 20:07:12 +08:00
html{-webkit-tap-highlight-color:transparent}
body{font-family:var(--f);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;overflow:hidden;height:100vh;height:100dvh;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--muted);border-radius:2px}
2026-04-03 01:00:39 +08:00
/* ═══ Background: Galaxy Star Field ═══ */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#starCanvas{position:absolute;inset:0;width:100%;height:100%}
.nebula{position:absolute;border-radius:50%;filter:blur(120px);animation:nebPulse 12s ease-in-out infinite}
.nebula:nth-child(2){width:50vw;height:50vh;background:radial-gradient(ellipse,rgba(110,168,254,.06),transparent 70%);top:-10%;left:-10%}
.nebula:nth-child(3){width:45vw;height:45vh;background:radial-gradient(ellipse,rgba(167,139,250,.05),transparent 70%);bottom:-8%;right:-5%;animation-delay:6s}
.nebula:nth-child(4){width:35vw;height:35vh;background:radial-gradient(ellipse,rgba(196,181,253,.04),transparent 70%);top:40%;left:50%;animation-delay:3s}
@keyframes nebPulse{0%,100%{opacity:.6;transform:scale(1) translate(0,0)}50%{opacity:1;transform:scale(1.08) translate(10px,-8px)}}
2026-04-02 20:07:12 +08:00
/* ═══ 3D Page Flip Engine ═══ */
.pages{position:fixed;inset:0;z-index:1;perspective:1400px;overflow:hidden}
.page{
position:absolute;inset:0;
overflow-y:auto;overflow-x:hidden;
-webkit-overflow-scrolling:touch;
padding:0 0 var(--sb) 0;
2026-04-03 01:06:24 +08:00
background:transparent;
2026-04-02 20:07:12 +08:00
backface-visibility:hidden;-webkit-backface-visibility:hidden;
transition:transform .55s cubic-bezier(.4,0,.15,1),opacity .55s;
transform-origin:center center;
will-change:transform,opacity;
}
.page[data-state="active"]{transform:rotateY(0deg) scale(1);opacity:1;z-index:2;pointer-events:auto}
.page[data-state="left"]{transform:rotateY(-92deg) scale(.92);opacity:0;z-index:1;pointer-events:none}
.page[data-state="right"]{transform:rotateY(92deg) scale(.92);opacity:0;z-index:1;pointer-events:none}
.page[data-state="hidden"]{transform:rotateY(92deg) scale(.88);opacity:0;z-index:0;pointer-events:none;transition:none}
/* ═══ Common UI ═══ */
2026-04-03 01:12:31 +08:00
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:10px var(--da-pad, 16px);background:rgba(5,8,22,.72);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border-bottom:1px solid rgba(110,168,254,.08);min-height:var(--da-bar-h, 48px);padding-top:calc(10px + var(--st));gap:8px}
.bar-right{display:flex;gap:6px;align-items:center;flex-shrink:0}
2026-04-02 20:07:12 +08:00
.bar-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
.bar-right{display:flex;align-items:center;gap:8px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);animation:pls 2s infinite;flex-shrink:0}
@keyframes pls{50%{opacity:.4}}
2026-04-03 01:00:39 +08:00
.btn{background:none;border:1px solid var(--border);color:var(--dim);padding:5px 12px;border-radius:var(--rs);font-size:12px;cursor:pointer;font-family:var(--f);transition:all .35s cubic-bezier(.4,0,.2,1);white-space:nowrap;position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(110,168,254,.08) 50%,transparent 70%);transform:translateX(-100%);transition:transform .5s}
.btn:hover{color:var(--accent);border-color:var(--accent);box-shadow:0 0 16px rgba(110,168,254,.12),inset 0 0 16px rgba(110,168,254,.04)}
.btn:hover::before{transform:translateX(100%)}
2026-04-02 20:07:12 +08:00
.btn:active{transform:scale(.96)}
2026-04-03 01:00:39 +08:00
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#fff;box-shadow:0 2px 12px rgba(110,168,254,.2)}
.btn-accent:hover{opacity:.88;color:#fff;box-shadow:0 4px 20px rgba(110,168,254,.35)}
.btn-accent::before{background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.15) 50%,transparent 70%)}
2026-04-03 01:12:31 +08:00
.content{padding:var(--da-pad, 16px);max-width:var(--da-content-max, 700px);margin:0 auto}
2026-04-03 01:06:24 +08:00
.card{background:rgba(8,14,30,.55);border:1px solid rgba(110,168,254,.08);border-radius:var(--r);padding:16px;margin-bottom:12px;transition:all .35s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.card:hover{border-color:rgba(110,168,254,.25);box-shadow:0 0 24px rgba(110,168,254,.08)}
2026-04-02 20:07:12 +08:00
.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600}
.tag-ok{background:rgba(52,211,153,.12);color:var(--ok)}
.tag-warn{background:rgba(251,191,36,.12);color:var(--warn)}
.tag-info{background:rgba(79,142,247,.12);color:var(--accent)}
.empty{text-align:center;padding:40px 16px;color:var(--muted);font-size:14px}
.empty em{font-style:normal;font-size:40px;display:block;margin-bottom:12px}
2026-04-03 01:06:24 +08:00
input[type=text],input[type=password],textarea{background:rgba(5,8,22,.5);border:1px solid rgba(110,168,254,.1);border-radius:var(--rs);color:var(--text);padding:10px 12px;font-size:14px;font-family:var(--f);outline:none;width:100%;transition:all .3s;-webkit-appearance:none}
input[type=text]:focus,input[type=password]:focus,textarea:focus{border-color:rgba(110,168,254,.4);box-shadow:0 0 20px rgba(110,168,254,.08)}
2026-04-02 20:07:12 +08:00
::placeholder{color:var(--muted)}
label{display:block;font-size:12px;color:var(--dim);margin-bottom:4px;font-weight:600}
.form-row{margin-bottom:14px}
.form-row-inline{display:flex;gap:10px}
@media(max-width:480px){.form-row-inline{flex-direction:column}}
/* ═══ PAGE: Home ═══ */
2026-04-03 01:00:39 +08:00
.home-hero{text-align:center;padding:40px 16px 32px}
.home-ver{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:20px;background:rgba(110,168,254,.06);border:1px solid rgba(110,168,254,.12);font-size:11px;color:var(--accent);font-family:var(--m);margin-bottom:16px;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 8px rgba(110,168,254,.1)}50%{box-shadow:0 0 20px rgba(110,168,254,.25)}}
.home-hero h1{font-size:clamp(28px,5.5vw,44px);font-weight:800;line-height:1.2;margin-bottom:8px;background:linear-gradient(135deg,#e2e8f0 0%,#6ea8fe 50%,#a78bfa 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.home-hero .sub{font-size:clamp(12px,2.5vw,15px);color:var(--dim);margin-bottom:14px}
.home-hero .quote{font-size:14px;color:var(--accent2);font-style:italic;opacity:.8}
2026-04-02 20:07:12 +08:00
.upd{display:flex;gap:10px;padding:12px;margin-bottom:8px;background:var(--bg1);border:1px solid var(--border);border-radius:var(--r);transition:border-color .3s}
.upd:hover{border-color:var(--accent)}
.upd-v{min-width:42px;padding:3px 6px;text-align:center;background:rgba(79,142,247,.08);border-radius:var(--rs);color:var(--accent);font-size:10px;font-weight:600;font-family:var(--m);height:fit-content;flex-shrink:0}
.upd h4{font-size:13px;font-weight:600;margin-bottom:2px}
.upd p{font-size:11px;color:var(--dim);line-height:1.5}
2026-04-03 01:00:39 +08:00
.home-enter{padding:28px;text-align:center;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);margin:20px 0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:relative;overflow:hidden}
.home-enter::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(110,168,254,.04),transparent 70%);opacity:0;transition:opacity .4s}
.home-enter:hover{border-color:rgba(110,168,254,.35);box-shadow:var(--glow);transform:translateY(-2px)}
.home-enter:hover::after{opacity:1}
2026-04-02 20:07:12 +08:00
.home-enter:active{transform:scale(.98)}
.home-enter em{font-style:normal;font-size:36px;display:block;margin-bottom:8px}
.home-enter strong{font-size:17px;display:block;margin-bottom:4px}
.home-enter span{font-size:12px;color:var(--dim)}
.home-footer{text-align:center;padding:24px 0;font-size:11px;color:var(--muted);border-top:1px solid var(--border);margin-top:24px}
.home-footer .motto{color:var(--accent2);font-style:italic;margin-top:4px}
/* ═══ PAGE: Desk (作品列表) ═══ */
.work-item{cursor:pointer}
.work-item h3{font-size:15px;font-weight:600;margin-bottom:4px}
.work-item .meta{font-size:11px;color:var(--dim);display:flex;gap:10px;flex-wrap:wrap}
.work-item .meta span{display:flex;align-items:center;gap:3px}
/* ═══ PAGE: Work Hub (作品导航) ═══ */
.hub-title{text-align:center;padding:20px 0 12px}
.hub-title h2{font-size:20px;font-weight:700}
.hub-title p{font-size:12px;color:var(--dim);margin-top:2px}
2026-04-03 01:12:31 +08:00
.hub-grid{display:grid;grid-template-columns:var(--da-hub, 1fr 1fr);gap:10px}
2026-04-03 01:06:24 +08:00
.hub-card{text-align:center;padding:28px 14px;background:rgba(8,14,30,.45);border:1px solid rgba(110,168,254,.1);border-radius:var(--r);cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);position:relative;overflow:hidden}
.hub-card::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(110,168,254,.08),transparent 70%);opacity:0;transition:opacity .4s}
.hub-card:hover{border-color:rgba(110,168,254,.3);box-shadow:0 0 30px rgba(110,168,254,.1);transform:translateY(-3px)}
2026-04-03 01:00:39 +08:00
.hub-card:hover::after{opacity:1}
2026-04-02 20:07:12 +08:00
.hub-card:active{transform:scale(.97)}
2026-04-03 01:06:24 +08:00
.hub-card em{font-style:normal;font-size:36px;display:block;margin-bottom:10px;filter:drop-shadow(0 0 12px rgba(110,168,254,.25))}
2026-04-02 20:07:12 +08:00
.hub-card strong{font-size:14px;display:block;margin-bottom:3px}
.hub-card span{font-size:11px;color:var(--dim)}
.hub-stats{display:flex;justify-content:center;gap:20px;padding:12px 0;flex-wrap:wrap}
.hub-stat{text-align:center}
.hub-stat b{display:block;font-size:18px;color:var(--accent);font-family:var(--m)}
.hub-stat small{font-size:10px;color:var(--dim)}
/* ═══ PAGE: Outline ═══ */
.outline-editor{min-height:250px;resize:vertical;line-height:1.9;font-size:14px}
.vol-item{display:flex;align-items:center;justify-content:space-between;padding:10px;background:var(--bg2);border-radius:var(--rs);margin-bottom:6px}
.vol-item span{font-size:13px;font-weight:600}
.vol-actions{display:flex;gap:4px}
/* ═══ PAGE: Characters ═══ */
.char-card{display:flex;gap:12px;align-items:flex-start}
.char-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.char-info h4{font-size:14px;font-weight:600;margin-bottom:2px}
.char-info p{font-size:12px;color:var(--dim);line-height:1.5}
.char-role{font-size:10px;color:var(--accent);font-weight:600}
/* ═══ PAGE: Editor ═══ */
.editor-info{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:12px;color:var(--dim);border-bottom:1px solid var(--border);margin-bottom:12px}
2026-04-03 01:12:31 +08:00
.editor-textarea{min-height:calc(100vh - 260px);min-height:calc(100dvh - 260px);resize:none;line-height:var(--da-ed-lh, 2);font-size:var(--da-ed-font, 16px);border:none;background:transparent;padding:0}
2026-04-02 20:07:12 +08:00
.editor-textarea:focus{border:none}
2026-04-03 01:06:24 +08:00
.editor-bottom{position:sticky;bottom:0;padding:10px 0;background:rgba(5,8,22,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(110,168,254,.08);font-size:11px;color:var(--dim);font-family:var(--m)}
2026-04-03 01:00:39 +08:00
/* ═══ Editor Toolbar ═══ */
.ed-toolbar{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
2026-04-03 01:06:24 +08:00
.ed-toolbar .tb-btn{background:rgba(8,14,30,.6);border:1px solid rgba(110,168,254,.1);color:var(--dim);width:34px;height:30px;border-radius:8px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .25s;font-family:var(--f);position:relative;overflow:hidden}
.ed-toolbar .tb-btn:hover{color:var(--accent);border-color:rgba(110,168,254,.3);box-shadow:0 0 12px rgba(110,168,254,.1);background:rgba(110,168,254,.08)}
.ed-toolbar .tb-btn:active{transform:scale(.9)}
2026-04-03 01:00:39 +08:00
.ed-toolbar .tb-sep{width:1px;height:18px;background:var(--border);margin:0 4px}
2026-04-03 01:06:24 +08:00
/* ═══ Focus Mode ═══ */
.focus-mode .bar,.focus-mode .editor-info,.focus-mode .chat-fab,.focus-mode .mon{opacity:0;pointer-events:none;transition:opacity .4s}
.focus-mode .editor-textarea{min-height:calc(100vh - 80px);min-height:calc(100dvh - 80px);font-size:17px;line-height:2.2}
.focus-mode .editor-bottom{background:transparent;border:none}
.focus-mode .ed-toolbar{opacity:.3;transition:opacity .3s}
.focus-mode .ed-toolbar:hover{opacity:1}
.focus-mode:hover .bar{opacity:1;pointer-events:auto}
/* ═══ Save Indicator ═══ */
.save-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:4px;transition:background .3s}
.save-dot.saved{background:var(--ok)}
.save-dot.saving{background:var(--warn);animation:pls 1s infinite}
.save-dot.unsaved{background:var(--dim)}
2026-04-03 01:00:39 +08:00
/* ═══ Create Success Overlay ═══ */
.create-success{display:none;text-align:center;padding:40px 20px;animation:fadeUp .5s ease-out}
.create-success.show{display:block}
.create-success em{font-style:normal;font-size:56px;display:block;margin-bottom:16px;animation:successPop .6s cubic-bezier(.68,-.55,.27,1.55)}
.create-success h3{font-size:20px;font-weight:700;margin-bottom:8px}
.create-success p{color:var(--dim);font-size:13px;margin-bottom:24px}
.create-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.create-actions .btn{padding:10px 24px;font-size:14px;border-radius:var(--r)}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes successPop{0%{transform:scale(0) rotate(-20deg)}100%{transform:scale(1) rotate(0)}}
2026-04-02 20:07:12 +08:00
/* ═══ Chat FAB ═══ */
2026-04-03 01:00:39 +08:00
.chat-fab{position:fixed;bottom:calc(16px + var(--sb));right:14px;z-index:50;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#fff;font-size:21px;cursor:pointer;box-shadow:0 4px 20px rgba(110,168,254,.3),0 0 40px rgba(167,139,250,.15);transition:all .25s;display:flex;align-items:center;justify-content:center;animation:fabBreathe 4s ease-in-out infinite}
@keyframes fabBreathe{0%,100%{box-shadow:0 4px 20px rgba(110,168,254,.3),0 0 40px rgba(167,139,250,.1)}50%{box-shadow:0 6px 28px rgba(110,168,254,.45),0 0 50px rgba(167,139,250,.2)}}
2026-04-02 20:07:12 +08:00
.chat-fab:hover{transform:scale(1.06)}
.chat-fab:active{transform:scale(.93)}
.chat-fab.on{border-radius:var(--r);background:rgba(248,113,113,.85)}
/* 编辑器模式下缩小悬浮球，不干扰打字 */
.chat-fab.editor-mode{width:38px;height:38px;font-size:16px;opacity:.6;bottom:calc(8px + var(--sb))}
.chat-fab.editor-mode:hover{opacity:1;transform:scale(1.1)}
/* ═══ Chat Panel ═══ */
2026-04-03 01:06:24 +08:00
.chat-p{position:fixed;bottom:calc(76px + var(--sb));right:14px;z-index:50;width:min(360px,calc(100vw - 28px));height:min(440px,calc(100vh - 120px));height:min(440px,calc(100dvh - 120px));background:rgba(5,8,22,.82);border:1px solid rgba(110,168,254,.1);border-radius:var(--r);display:flex;flex-direction:column;transform:scale(.9) translateY(14px);opacity:0;pointer-events:none;transition:all .22s cubic-bezier(.4,0,.2,1);box-shadow:0 16px 64px rgba(0,0,0,.6);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
2026-04-02 20:07:12 +08:00
.chat-p.open{transform:scale(1) translateY(0);opacity:1;pointer-events:auto}
@media(max-width:480px){.chat-p{bottom:0;right:0;left:0;width:100%;height:calc(100vh - 48px);height:calc(100dvh - 48px);border-radius:var(--r) var(--r) 0 0;padding-bottom:var(--sb)}}
.chat-hd{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0}
.chat-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.chat-nm{font-weight:600;font-size:13px}
.chat-sb{font-size:10px;color:var(--dim)}
.chat-tg{margin-left:auto;font-size:9px;padding:2px 6px;background:var(--bg2);border:1px solid var(--border);border-radius:20px;color:var(--dim);font-family:var(--m)}
.chat-ms{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}
.cm{max-width:82%;padding:8px 12px;border-radius:var(--r);font-size:13px;line-height:1.6;word-break:break-word}
.cm.u{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.cm.b{align-self:flex-start;background:var(--bg2);border:1px solid var(--border);border-bottom-left-radius:4px}
.cm.s{align-self:center;background:none;color:var(--muted);font-size:10px;padding:2px}
.cm-m{display:flex;gap:5px;margin-top:4px;font-size:9px;color:var(--muted)}
.ct{font-size:11px;color:var(--dim);padding:4px 12px}
.ct span{animation:bk 1.4s infinite;font-size:14px}
.ct span:nth-child(2){animation-delay:.2s}
.ct span:nth-child(3){animation-delay:.4s}
@keyframes bk{0%,100%{opacity:.2}50%{opacity:1}}
.chat-in{padding:10px;border-top:1px solid var(--border);display:flex;gap:6px;flex-shrink:0}
.cin{flex:1;padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:14px;outline:none;font-family:var(--f);-webkit-appearance:none}
.cin:focus{border-color:var(--accent)}
.csnd{width:36px;height:36px;border-radius:50%;background:var(--accent);border:none;color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.csnd:hover{background:var(--accent2)}
.csnd:disabled{opacity:.3}
2026-04-03 01:12:31 +08:00
/* ═══ Three-Column Home Layout (Device Agent driven) ═══ */
.home-grid{display:grid;grid-template-columns:var(--da-grid, 1fr);gap:var(--da-gap, 12px);padding:var(--da-pad, 12px);max-width:1200px;margin:0 auto;align-content:start}
2026-04-03 01:06:24 +08:00
.home-grid>*{min-width:0;overflow:hidden}
.home-center{min-width:0;overflow:hidden}
2026-04-03 01:12:31 +08:00
[data-single-col="true"] .home-grid>.panel:first-child{order:2}
[data-single-col="true"] .home-center{order:1}
[data-single-col="true"] .home-grid>.panel:last-child{order:3}
2026-04-03 01:06:24 +08:00
.panel{background:rgba(8,14,30,.55);border:1px solid rgba(110,168,254,.08);border-radius:var(--r);padding:14px;height:fit-content;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
2026-04-02 22:46:40 +08:00
.panel-title{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:1.2px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.panel-item{padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}
.panel-item:last-child{border-bottom:none}
.panel-label{color:var(--dim);font-size:10px;margin-bottom:1px}
.panel-value{color:var(--text);font-weight:600;font-family:var(--m);font-size:11px}
.panel-value.ok{color:var(--ok)}
.panel-value.warn{color:var(--warn)}
.panel-value.err{color:var(--err)}
/* ═══ Ticker ═══ */
2026-04-03 01:06:24 +08:00
.ticker-wrap{overflow:hidden;background:rgba(8,14,30,.4);border:1px solid rgba(110,168,254,.06);border-radius:var(--rs);padding:6px 0;margin-bottom:14px;position:relative}
2026-04-03 01:00:39 +08:00
.ticker-wrap::before,.ticker-wrap::after{content:'';position:absolute;top:0;bottom:0;width:32px;z-index:2;pointer-events:none}
2026-04-03 01:06:24 +08:00
.ticker-wrap::before{left:0;background:linear-gradient(90deg,rgba(3,6,14,.8),transparent)}
.ticker-wrap::after{right:0;background:linear-gradient(-90deg,rgba(3,6,14,.8),transparent)}
2026-04-02 22:46:40 +08:00
.ticker{display:flex;animation:tickScroll 28s linear infinite;white-space:nowrap;gap:36px;padding:0 16px}
.ticker:hover{animation-play-state:paused}
.ticker span{font-size:11px;color:var(--dim);display:flex;align-items:center;gap:5px;flex-shrink:0}
.ticker span em{font-style:normal}
@keyframes tickScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* ═══ Team Card ═══ */
2026-04-03 01:06:24 +08:00
.team-slot{display:flex;align-items:center;gap:8px;padding:7px 8px;background:rgba(5,8,22,.4);border-radius:var(--rs);margin-bottom:5px;transition:all .3s;border:1px solid transparent}
.team-slot:hover{border-color:rgba(110,168,254,.15);background:rgba(8,14,30,.6)}
2026-04-02 22:46:40 +08:00
.team-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.team-nm{font-size:11px;font-weight:600}
.team-role{font-size:9px;color:var(--dim)}
/* ═══ Feedback Page ═══ */
.fb-item{padding:10px}
.fb-item .fb-meta{font-size:10px;color:var(--dim);margin-top:6px;display:flex;gap:8px;align-items:center}
.fb-status{display:inline-block;padding:1px 6px;border-radius:10px;font-size:9px;font-weight:600}
.fb-status.pending{background:rgba(251,191,36,.12);color:var(--warn)}
.fb-status.replied{background:rgba(52,211,153,.12);color:var(--ok)}
.fb-reply{margin-top:6px;padding:8px;background:var(--bg);border-radius:var(--rs);font-size:12px;color:var(--accent)}
/* ═══ Home Entry Cards ═══ */
2026-04-03 01:12:31 +08:00
.home-entries{display:grid;grid-template-columns:var(--da-entries, 1fr 1fr);gap:10px;margin:16px 0}
2026-04-03 01:06:24 +08:00
.entry-card{padding:24px 16px;text-align:center;background:rgba(8,14,30,.45);border:1px solid rgba(110,168,254,.1);border-radius:var(--r);cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);position:relative;overflow:hidden}
.entry-card::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(110,168,254,.08),transparent 70%);opacity:0;transition:opacity .4s}
.entry-card:hover{border-color:rgba(110,168,254,.3);box-shadow:0 0 30px rgba(110,168,254,.1),0 0 60px rgba(167,139,250,.06);transform:translateY(-3px)}
2026-04-03 01:00:39 +08:00
.entry-card:hover::after{opacity:1}
.entry-card:active{transform:scale(.98) translateY(0)}
2026-04-03 01:06:24 +08:00
.entry-card em{font-style:normal;font-size:36px;display:block;margin-bottom:10px;filter:drop-shadow(0 0 12px rgba(110,168,254,.25))}
.entry-card strong{font-size:16px;display:block;margin-bottom:5px;letter-spacing:.5px}
.entry-card span{font-size:12px;color:var(--dim)}
2026-04-02 22:46:40 +08:00
2026-04-03 01:00:39 +08:00
/* ═══ Monitor (draggable) ═══ */
2026-04-03 01:06:24 +08:00
.mon{position:fixed;bottom:calc(16px + var(--sb));left:14px;z-index:40;background:rgba(5,8,22,.7);border:1px solid rgba(110,168,254,.1);border-radius:var(--r);padding:5px 9px;font-size:9px;font-family:var(--m);color:var(--dim);cursor:grab;transition:all .3s;user-select:none;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);touch-action:none}
2026-04-03 01:00:39 +08:00
.mon:active{cursor:grabbing}
2026-04-03 01:06:24 +08:00
.mon:hover{border-color:rgba(110,168,254,.25)}
2026-04-02 20:07:12 +08:00
.mon.x{padding:8px 12px}
.mr{display:flex;justify-content:space-between;gap:8px;padding:1px 0}
.mv{color:var(--accent);font-weight:600}
.mx{display:none;margin-top:4px;padding-top:4px;border-top:1px solid var(--border)}
.mon.x .mx{display:block}
2026-04-03 00:26:48 +08:00
/* ═══ Viewport-Fit Layout (Desktop ≥961px) ═══ */
@media(min-width:961px){
#pg-home{overflow:hidden;display:flex;flex-direction:column}
.home-grid{flex:1 1 0;min-height:0;align-content:stretch;overflow:hidden;padding-bottom:8px}
.home-grid>.panel,.home-grid>.home-center{overflow-y:auto;min-height:0;height:auto}
}
2026-04-03 01:12:31 +08:00
/* ═══ Touch-Driven Sizing (Device Agent 适配) ═══ */
.btn{min-height:var(--da-touch-min, 32px)}
.btn-accent{min-height:var(--da-touch-min, 32px)}
[data-touch="true"] .csnd{width:40px;height:40px}
[data-touch="true"] .cin{font-size:16px;padding:10px 12px}
.home-hero h1{font-size:var(--da-title, 32px)}
.home-entries{display:grid;grid-template-columns:var(--da-entries, 1fr 1fr);gap:10px;margin:16px 0}
2026-04-03 01:06:24 +08:00
2026-04-03 00:26:48 +08:00
/* ═══ API Key Section ═══ */
.chat-api{border-top:1px solid var(--border);flex-shrink:0}
.chat-api-tog{padding:6px 12px;font-size:11px;color:var(--dim);cursor:pointer;display:flex;align-items:center;gap:5px;transition:color .2s;user-select:none}
.chat-api-tog:hover{color:var(--accent)}
.chat-api-tog .arr{font-size:9px;margin-left:auto;transition:transform .2s;display:inline-block}
.chat-api-tog.open .arr{transform:rotate(90deg)}
.chat-api-bd{display:none;padding:0 10px 8px}
.chat-api-bd.open{display:block}
.chat-api-row{display:flex;gap:5px;margin-bottom:5px}
.api-sel{flex:0 0 auto;padding:5px 6px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);color:var(--text);font-size:11px;outline:none;font-family:var(--f);max-width:110px}
.api-sel:focus{border-color:var(--accent)}
.api-key-inp{flex:1;padding:5px 8px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);color:var(--text);font-size:12px;outline:none;font-family:var(--m);min-width:0}
.api-key-inp:focus{border-color:var(--accent)}
.api-conn-btn{flex-shrink:0;padding:5px 10px;background:var(--accent);border:none;border-radius:var(--rs);color:#fff;font-size:11px;cursor:pointer;font-family:var(--f);transition:opacity .2s}
.api-conn-btn:hover{opacity:.85}
.api-conn-btn:disabled{opacity:.4;cursor:default}
.api-st{font-size:10px;color:var(--dim);padding:2px 2px}
2026-04-02 20:07:12 +08:00
< / style >
< / head >
< body >
2026-04-03 01:00:39 +08:00
< div class = "bg" > < canvas id = "starCanvas" > < / canvas > < div class = "nebula" > < / div > < div class = "nebula" > < / div > < div class = "nebula" > < / div > < / div >
2026-04-02 20:07:12 +08:00
<!-- ═══════════════════════════════════════ -->
<!-- PAGE: Home (灯塔首页) -->
<!-- ═══════════════════════════════════════ -->
< div class = "pages" id = "pages" >
< div class = "page" id = "pg-home" data-state = "active" >
< div class = "bar" >
< div class = "bar-title" > < span style = "font-size:20px" > 🏛️< / span > 光湖灯塔< / div >
< div class = "bar-right" > < span class = "dot" > < / span > < span style = "font-size:11px;color:var(--dim)" > 在线< / span > < button class = "btn" id = "themeBtn" > 🎨< / button > < / div >
< / div >
2026-04-02 22:46:40 +08:00
< div class = "home-grid" >
<!-- ═══ Left Panel: 系统状态 ═══ -->
< div class = "panel" id = "sysPanel" >
< div class = "panel-title" > 📡 系统状态< / div >
2026-04-03 01:00:39 +08:00
< div class = "panel-item" > < div class = "panel-label" > 服务器< / div > < div class = "panel-value" id = "sysStatus" style = "color:var(--dim)" > 检测中…< / div > < / div >
2026-04-02 22:46:40 +08:00
< div class = "panel-item" > < div class = "panel-label" > 延迟< / div > < div class = "panel-value" id = "sysLatency" > —< / div > < / div >
< div class = "panel-item" > < div class = "panel-label" > 运行时间< / div > < div class = "panel-value" id = "sysUptime" > —< / div > < / div >
2026-04-03 01:00:39 +08:00
< div class = "panel-item" > < div class = "panel-label" > 工作流< / div > < div class = "panel-value" id = "sysWorkflows" style = "color:var(--dim)" > 检测中…< / div > < / div >
< div class = "panel-item" > < div class = "panel-label" > 模块部署< / div > < div class = "panel-value" id = "sysModules" style = "color:var(--dim)" > 检测中…< / div > < / div >
< div class = "panel-item" > < div class = "panel-label" > COS 存储< / div > < div class = "panel-value" id = "sysCos" style = "color:var(--dim)" > 检测中…< / div > < / div >
2026-04-02 22:46:40 +08:00
< div class = "panel-title" style = "margin-top:12px" > 🧠 版本更新< / div >
< div id = "sysUpdates" >
2026-04-03 01:00:39 +08:00
< div class = "panel-item" > < div class = "panel-label" > v42.0 · 2026-04-02< / div > < div style = "font-size:11px" > 银河星空UI改版< / div > < / div >
2026-04-02 22:46:40 +08:00
< / div >
2026-04-02 20:07:12 +08:00
< / div >
2026-04-02 22:46:40 +08:00
<!-- ═══ Center: 核心内容 ═══ -->
2026-04-03 00:26:48 +08:00
< div class = "home-center" >
2026-04-02 22:46:40 +08:00
< div class = "home-hero" >
2026-04-03 01:00:39 +08:00
< div class = "home-ver" id = "homeVer" > AGE OS v42.0< / div >
2026-04-02 22:46:40 +08:00
< h1 > 光湖灯塔< / h1 >
< div class = "sub" > 语言驱动操作系统 · 人类只说话，系统搞定一切< / div >
< div class = "quote" > 「语言 = 现实」< / div >
< / div >
< div class = "ticker-wrap" >
< div class = "ticker" id = "ticker" >
2026-04-03 01:00:39 +08:00
< span > < em > 🏛️< / em > AGE OS v42.0 运行中< / span >
< span > < em > 🌌< / em > 银河星空UI上线< / span >
2026-04-02 22:46:40 +08:00
< span > < em > 📡< / em > COS双桶存储已上线< / span >
< span > < em > 🧠< / em > HLDP协作语言协议在线< / span >
< span > < em > ✍️< / em > 码字工作台 Beta 内测中< / span >
2026-04-03 01:00:39 +08:00
< span > < em > 🏛️< / em > AGE OS v42.0 运行中< / span >
< span > < em > 🌌< / em > 银河星空UI上线< / span >
2026-04-02 22:46:40 +08:00
< span > < em > 📡< / em > COS双桶存储已上线< / span >
< span > < em > 🧠< / em > HLDP协作语言协议在线< / span >
< span > < em > ✍️< / em > 码字工作台 Beta 内测中< / span >
< / div >
< / div >
< div class = "home-entries" >
< div class = "entry-card" onclick = "go('desk')" >
< em > ✍️< / em >
< strong > 码字工作台< / strong >
< span > 网文行业 · AI辅助创作< / span >
< div style = "margin-top:6px" > < span class = "tag tag-warn" > Beta< / span > < / div >
< / div >
< div class = "entry-card" onclick = "go('feedback')" >
< em > 📮< / em >
< strong > 留言板< / strong >
< span > 给冰朔和铸渊留言< / span >
< div style = "margin-top:6px" > < span class = "tag tag-info" > 每条必回< / span > < / div >
< / div >
< / div >
< div class = "home-footer" >
< p > © 2026 光湖语言世界 · 国作登字-2026-A-00037559< / p >
< p class = "motto" > 「人类只说话，系统搞定一切」< / p >
< / div >
2026-04-02 20:07:12 +08:00
< / div >
2026-04-02 22:46:40 +08:00
<!-- ═══ Right Panel: 光湖团队 ═══ -->
< div class = "panel" >
< div class = "panel-title" > 🌊 光湖团队< / div >
< div class = "team-slot" >
< div class = "team-av" style = "background:linear-gradient(135deg,#4f8ef7,#7c6ef7)" > ❄️< / div >
< div > < div class = "team-nm" > 冰朔 · TCS-0002∞< / div > < div class = "team-role" > 系统主权 · 语言架构< / div > < / div >
< / div >
< div class = "team-slot" >
< div class = "team-av" style = "background:linear-gradient(135deg,#34d399,#4ade80)" > 🏛️< / div >
< div > < div class = "team-nm" > 铸渊 · ICE-GL-ZY001< / div > < div class = "team-role" > 代码守护 · 执行层< / div > < / div >
< / div >
2026-04-03 00:26:48 +08:00
< div class = "panel-title" style = "margin-top:12px" > ✍️ 网文行业人类主控团队< / div >
2026-04-02 22:46:40 +08:00
< div class = "team-slot" >
< div class = "team-av" style = "background:linear-gradient(135deg,#fb923c,#f97316)" > 🐱< / div >
< div > < div class = "team-nm" > 肥猫 + 舒舒< / div > < div class = "team-role" > 男频编辑 · PER-SS001< / div > < / div >
< / div >
< div class = "team-slot" >
< div class = "team-av" style = "background:linear-gradient(135deg,#c084fc,#e879f9)" > 🍊< / div >
< div > < div class = "team-nm" > 桔子 + 晨星< / div > < div class = "team-role" > 女频编辑 · PER-CX001< / div > < / div >
< / div >
< div class = "team-slot" >
< div class = "team-av" style = "background:linear-gradient(135deg,#22d3ee,#06b6d4)" > 📄< / div >
< div > < div class = "team-nm" > 页页 + 坍缩核< / div > < div class = "team-role" > 女频作者 · PER-XTS001< / div > < / div >
< / div >
< div class = "team-slot" >
< div class = "team-av" style = "background:linear-gradient(135deg,#fbbf24,#f59e0b)" > 🌸< / div >
< div > < div class = "team-nm" > 花尔 + 糖星云< / div > < div class = "team-role" > 女频副主控 · PER-TXY001< / div > < / div >
< / div >
< div class = "panel-title" style = "margin-top:12px" > ⚙️ 活跃系统< / div >
< div id = "activeAgents" style = "display:flex;flex-wrap:wrap;gap:3px" >
< span class = "tag tag-ok" style = "margin:0" > 听潮< / span >
< span class = "tag tag-ok" style = "margin:0" > 锻心< / span >
< span class = "tag tag-ok" style = "margin:0" > 织脉< / span >
< span class = "tag tag-ok" style = "margin:0" > 映阁< / span >
< span class = "tag tag-ok" style = "margin:0" > 守夜< / span >
< span class = "tag tag-ok" style = "margin:0" > 试镜< / span >
< / div >
2026-04-02 20:07:12 +08:00
< / div >
< / div >
< / div >
<!-- ═══════════════════════════════════════ -->
<!-- PAGE: Desk (码字工作台 · 作品列表) -->
<!-- ═══════════════════════════════════════ -->
< div class = "page" id = "pg-desk" data-state = "hidden" >
< div class = "bar" >
< button class = "btn" onclick = "go('home')" > ← 灯塔< / button >
< div class = "bar-title" > ✍️ 码字工作台< / div >
< button class = "btn btn-accent" onclick = "go('create')" > + 新作品< / button >
< / div >
< div class = "content" >
< div id = "workList" > < / div >
< / div >
< / div >
<!-- ═══════════════════════════════════════ -->
<!-- PAGE: Create (新建作品) -->
<!-- ═══════════════════════════════════════ -->
< div class = "page" id = "pg-create" data-state = "hidden" >
< div class = "bar" >
< button class = "btn" onclick = "go('desk')" > ← 返回< / button >
< div class = "bar-title" > 📖 新建作品< / div >
2026-04-03 01:00:39 +08:00
< div class = "bar-right" > < / div >
2026-04-02 20:07:12 +08:00
< / div >
< div class = "content" >
2026-04-03 01:00:39 +08:00
< div id = "createForm" >
< div style = "text-align:center;padding:20px 0 24px" >
< div style = "font-size:48px;margin-bottom:8px;filter:drop-shadow(0 0 12px rgba(110,168,254,.3))" > 📖< / div >
< h2 style = "font-size:22px;font-weight:700;margin-bottom:4px" > 开始你的创作< / h2 >
< p style = "font-size:13px;color:var(--dim)" > 一个故事的诞生，从这里开始< / p >
< / div >
< div class = "form-row" > < label > 作品名称< / label > < input type = "text" id = "cTitle" placeholder = "你的作品叫什么名字？" > < / div >
< div class = "form-row" > < label > 类型< / label > < input type = "text" id = "cGenre" placeholder = "玄幻 / 都市 / 言情 / 科幻 ..." > < / div >
< div class = "form-row" > < label > 简介< / label > < textarea id = "cSummary" rows = "4" placeholder = "一句话介绍你的故事..." > < / textarea > < / div >
< div style = "padding:16px 0;display:flex;gap:10px;justify-content:center" >
< button class = "btn" onclick = "go('desk')" style = "padding:10px 24px;font-size:14px" > 取消< / button >
< button class = "btn btn-accent" id = "createSave" style = "padding:10px 32px;font-size:14px" > ✨ 创建作品< / button >
< / div >
< / div >
< div class = "create-success" id = "createSuccess" >
< em > 🎉< / em >
< h3 id = "createSuccessTitle" > 作品创建成功！< / h3 >
< p id = "createSuccessDesc" > 你的新故事已诞生，准备好开始了吗？< / p >
< div class = "create-actions" >
< button class = "btn" onclick = "go('desk')" > 返回作品列表< / button >
< button class = "btn btn-accent" id = "createGoWrite" style = "padding:10px 28px;font-size:14px" > ✏️ 进入作品 · 开始写作< / button >
< / div >
< / div >
2026-04-02 20:07:12 +08:00
< / div >
< / div >
<!-- ═══════════════════════════════════════ -->
<!-- PAGE: Hub (作品导航中心) -->
<!-- ═══════════════════════════════════════ -->
< div class = "page" id = "pg-hub" data-state = "hidden" >
< div class = "bar" >
< button class = "btn" onclick = "go('desk')" > ← 作品列表< / button >
< div class = "bar-title" id = "hubTitle" > 作品< / div >
< div class = "bar-right" > < span class = "dot" > < / span > < / div >
< / div >
< div class = "content" >
< div class = "hub-title" >
< h2 id = "hubName" > —< / h2 >
< p id = "hubGenre" > —< / p >
< / div >
< div class = "hub-stats" id = "hubStats" > < / div >
< div class = "hub-grid" >
< div class = "hub-card" onclick = "go('outline')" > < em > 📋< / em > < strong > 大纲< / strong > < span > 总纲 · 卷纲< / span > < / div >
< div class = "hub-card" onclick = "go('chars')" > < em > 👥< / em > < strong > 人物卡< / strong > < span > 角色管理< / span > < / div >
< div class = "hub-card" onclick = "go('chapters')" > < em > 📚< / em > < strong > 章节< / strong > < span > 目录管理< / span > < / div >
< div class = "hub-card" onclick = "go('editor')" > < em > ✏️< / em > < strong > 写正文< / strong > < span > 续写章节< / span > < / div >
< / div >
< div style = "margin-top:16px;text-align:center;font-size:11px;color:var(--muted);font-style:italic" > 对铸渊说「进入大纲」「人物卡」「写正文」自动翻转< / div >
< / div >
< / div >
<!-- ═══════════════════════════════════════ -->
<!-- PAGE: Outline (大纲) -->
<!-- ═══════════════════════════════════════ -->
< div class = "page" id = "pg-outline" data-state = "hidden" >
< div class = "bar" >
< button class = "btn" onclick = "go('hub')" > ← 返回< / button >
< div class = "bar-title" > 📋 大纲< / div >
< button class = "btn btn-accent" id = "outlineSave" > 保存< / button >
< / div >
< div class = "content" >
< div class = "form-row" > < label > 总大纲< / label > < textarea id = "olMain" class = "outline-editor" placeholder = "在这里写下你的故事总纲... 整体世界观、主线剧情、结局走向..." > < / textarea > < / div >
< div style = "display:flex;justify-content:space-between;align-items:center;margin:16px 0 8px" >
< label style = "margin:0" > 分卷大纲< / label >
< button class = "btn" id = "addVol" > + 新卷< / button >
< / div >
< div id = "volList" > < / div >
< / div >
< / div >
<!-- ═══════════════════════════════════════ -->
<!-- PAGE: Characters (人物卡) -->
<!-- ═══════════════════════════════════════ -->
< div class = "page" id = "pg-chars" data-state = "hidden" >
< div class = "bar" >
< button class = "btn" onclick = "go('hub')" > ← 返回< / button >
< div class = "bar-title" > 👥 人物卡< / div >
< button class = "btn btn-accent" id = "addChar" > + 新角色< / button >
< / div >
< div class = "content" >
< div id = "charList" > < / div >
< / div >
< / div >
<!-- ═══════════════════════════════════════ -->
<!-- PAGE: Add/Edit Character -->
<!-- ═══════════════════════════════════════ -->
< div class = "page" id = "pg-charEdit" data-state = "hidden" >
< div class = "bar" >
< button class = "btn" onclick = "go('chars')" > ← 返回< / button >
< div class = "bar-title" id = "ceTitle" > 新角色< / div >
< button class = "btn btn-accent" id = "ceSave" > 保存< / button >
< / div >
< div class = "content" >
< div class = "form-row" > < label > 姓名< / label > < input type = "text" id = "ceName" placeholder = "角色名" > < / div >
< div class = "form-row" > < label > 身份/定位< / label > < input type = "text" id = "ceRole" placeholder = "主角 / 女主 / 反派 / 配角 ..." > < / div >
< div class = "form-row" > < label > 外貌特征< / label > < textarea id = "ceAppearance" rows = "3" placeholder = "外貌描写..." > < / textarea > < / div >
< div class = "form-row" > < label > 性格特点< / label > < textarea id = "ceTraits" rows = "3" placeholder = "性格、习惯、口头禅..." > < / textarea > < / div >
< div class = "form-row" > < label > 背景故事< / label > < textarea id = "ceBackground" rows = "4" placeholder = "角色的过去、动机、秘密..." > < / textarea > < / div >
< / div >
< / div >
<!-- ═══════════════════════════════════════ -->
<!-- PAGE: Chapters (章节管理) -->
<!-- ═══════════════════════════════════════ -->
< div class = "page" id = "pg-chapters" data-state = "hidden" >
< div class = "bar" >
< button class = "btn" onclick = "go('hub')" > ← 返回< / button >
< div class = "bar-title" > 📚 章节< / div >
< button class = "btn btn-accent" id = "addChapter" > + 新章节< / button >
< / div >
< div class = "content" >
< div id = "chapterList" > < / div >
< / div >
< / div >
<!-- ═══════════════════════════════════════ -->
<!-- PAGE: Editor (正文编辑) -->
<!-- ═══════════════════════════════════════ -->
< div class = "page" id = "pg-editor" data-state = "hidden" >
< div class = "bar" >
< button class = "btn" onclick = "go('chapters')" > ← 返回< / button >
< div class = "bar-title" id = "edTitle" > 正文< / div >
2026-04-03 01:06:24 +08:00
< div class = "bar-right" >
< button class = "btn" id = "edFocus" title = "专注模式" > 🌙< / button >
< button class = "btn btn-accent" id = "edSave" > 保存< / button >
< / div >
2026-04-02 20:07:12 +08:00
< / div >
< div class = "content" >
< div class = "editor-info" >
< span id = "edChTitle" > —< / span >
2026-04-03 01:06:24 +08:00
< span > < span class = "save-dot unsaved" id = "edSaveDot" > < / span > < span id = "edWc" > 0 字< / span > < / span >
2026-04-02 20:07:12 +08:00
< / div >
2026-04-03 01:06:24 +08:00
< textarea class = "editor-textarea" id = "edText" placeholder = "开始写作... 让文字自由流淌，星空是你的稿纸。" > < / textarea >
2026-04-02 20:07:12 +08:00
< div class = "editor-bottom" >
2026-04-03 01:00:39 +08:00
< div class = "ed-toolbar" >
< button class = "tb-btn" title = "撤销" onclick = "document.execCommand('undo')" > ↩< / button >
< button class = "tb-btn" title = "重做" onclick = "document.execCommand('redo')" > ↪< / button >
< div class = "tb-sep" > < / div >
< button class = "tb-btn" title = "上一章" id = "edPrev" > ◀< / button >
< button class = "tb-btn" title = "下一章" id = "edNext" > ▶< / button >
< div class = "tb-sep" > < / div >
< button class = "tb-btn" title = "新建章节" id = "edNewCh" > ＋ < / button >
< button class = "tb-btn" title = "章节目录" onclick = "go('chapters')" > ☰< / button >
2026-04-03 01:06:24 +08:00
< div class = "tb-sep" > < / div >
< button class = "tb-btn" title = "专注模式" id = "edFocus2" > 🌙< / button >
2026-04-03 01:00:39 +08:00
< / div >
2026-04-02 20:07:12 +08:00
< span id = "edWc2" > 字数： < / span >
< / div >
< / div >
< / div >
2026-04-02 22:46:40 +08:00
<!-- ═══════════════════════════════════════ -->
<!-- PAGE: Feedback (留言板) -->
<!-- ═══════════════════════════════════════ -->
< div class = "page" id = "pg-feedback" data-state = "hidden" >
< div class = "bar" >
< button class = "btn" onclick = "go('home')" > ← 灯塔< / button >
< div class = "bar-title" > 📮 留言板< / div >
< div class = "bar-right" > < span class = "dot" > < / span > < / div >
< / div >
< div class = "content" >
< div class = "card" style = "margin-bottom:16px" >
< div style = "font-size:13px;font-weight:600;margin-bottom:8px" > 📝 给冰朔和铸渊留言< / div >
< textarea id = "fbMsg" rows = "3" placeholder = "说点什么吧…你的每条留言冰朔都会看到。" style = "margin-bottom:8px" > < / textarea >
< div style = "display:flex;justify-content:space-between;align-items:center" >
< span style = "font-size:10px;color:var(--dim)" > 留言自动署名（已识别身份时）< / span >
< button class = "btn btn-accent" id = "fbSend" > 提交留言< / button >
< / div >
< / div >
< div style = "font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:1.2px;font-weight:600;margin-bottom:10px" > 💬 留言记录< / div >
< div id = "fbList" > < div class = "empty" > < em > 📮< / em > 还没有留言< br > < br > 说点什么吧< / div > < / div >
< / div >
< / div >
2026-04-02 20:07:12 +08:00
< / div > <!-- /pages -->
<!-- Chat FAB -->
< button class = "chat-fab" id = "chatFab" > 💬< / button >
<!-- Chat Panel -->
< div class = "chat-p" id = "chatP" >
< div class = "chat-hd" >
< div class = "chat-av" > 🏛️< / div >
< div > < div class = "chat-nm" > 铸渊< / div > < div class = "chat-sb" > 光湖灯塔 · 守护者< / div > < / div >
< div class = "chat-tg" id = "chatTg" > ready< / div >
< / div >
< div class = "chat-ms" id = "chatMs" >
< div class = "cm s" > —— 与铸渊对话 ——< / div >
< div class = "cm b" > 你好！我是铸渊 🏛️< br > < br > 告诉我你是谁，我会记住你。< br > 说「我要码字」进入码字工作台。< br > 进入作品后，说「大纲」「人物卡」「写正文」页面会翻转切换。< div class = "cm-m" > < span > 铸渊< / span > < span > ·< / span > < span > 本地< / span > < / div > < / div >
< / div >
< div class = "chat-in" >
< input type = "text" class = "cin" id = "chatIn" placeholder = "对铸渊说..." autocomplete = "off" enterkeyhint = "send" >
< button class = "csnd" id = "chatSnd" > ↑< / button >
< / div >
2026-04-03 01:00:39 +08:00
<!-- API Key Fallback (free - format, auto - detect) -->
2026-04-03 00:26:48 +08:00
< div class = "chat-api" >
2026-04-03 01:00:39 +08:00
< div class = "chat-api-tog" id = "chatApiTog" > 🔑 接入大模型 API（ ） < span class = "arr" > ▶< / span > < / div >
2026-04-03 00:26:48 +08:00
< div class = "chat-api-bd" id = "chatApiBd" >
2026-04-03 01:00:39 +08:00
< div class = "form-row" style = "margin-bottom:6px" >
< input type = "text" class = "api-key-inp" id = "apiBaseUrl" placeholder = "API地址（ style = "font-size:11px;padding:6px 8px" >
< / div >
2026-04-03 00:26:48 +08:00
< div class = "chat-api-row" >
2026-04-03 01:00:39 +08:00
< input type = "password" class = "api-key-inp" id = "apiKeyInp" placeholder = "粘贴你的 API 密钥（任意格式）" >
< button class = "api-conn-btn" id = "apiConnBtn" > 检测< / button >
< / div >
< div class = "api-st" id = "apiSt" > 未连接 · 粘贴密钥后自动检测可用模型< / div >
< div id = "apiModelList" style = "display:none;margin-top:6px" >
< label style = "font-size:10px;margin-bottom:3px" > 检测到的可用模型：< / label >
< select class = "api-sel" id = "apiModelSel" style = "width:100%;max-width:none;padding:6px 8px" >
< option value = "" > 请先检测...< / option >
2026-04-03 00:26:48 +08:00
< / select >
< / div >
< / div >
< / div >
2026-04-02 20:07:12 +08:00
< / div >
<!-- Monitor -->
< div class = "mon" id = "mon" >
< div class = "mr" > < span > API< / span > < span class = "mv" id = "mC" > 0< / span > < / div >
< div class = "mx" >
< div class = "mr" > < span > 连接< / span > < span class = "mv" id = "mN" style = "color:var(--ok)" > —< / span > < / div >
< div class = "mr" > < span > 模型< / span > < span class = "mv" id = "mM" > —< / span > < / div >
< / div >
< / div >
< script >
(function(){
'use strict';
2026-04-03 01:12:31 +08:00
/* ════════════════════════════════════════
DEVICE AGENT (直接问设备 · 用真实数据适配)
不猜、不分类。问设备拿真实参数，算出布局。
════════════════════════════════════════ */
var DA = (function(){
var root = document.documentElement;
var info = {};
function detect(){
// ── 直接问设备：你是谁？ ──
var vw = window.innerWidth;
var vh = window.innerHeight;
var sw = screen.width;
var sh = screen.height;
var dpr = window.devicePixelRatio || 1;
var touch = navigator.maxTouchPoints > 0;
var portrait = vh > vw;
var physicalW = vw * dpr; // 真实物理像素宽度
var conn = navigator.connection || navigator.mozConnection || null;
var memGB = navigator.deviceMemory || 4;
var cores = navigator.hardwareConcurrency || 4;
var lowPerf = memGB < = 2 || cores < = 2;
info = {vw:vw,vh:vh,sw:sw,sh:sh,dpr:dpr,touch:touch,portrait:portrait,physW:physicalW,
conn:conn?{type:conn.effectiveType,downlink:conn.downlink}:null,mem:memGB,cores:cores};
// ── 用真实数据直接计算布局参数（不猜、不分类）──
var s = root.style;
s.setProperty('--vw', vw + 'px');
s.setProperty('--vh', vh + 'px');
// 间距 = 屏幕宽度的比例，
var pad = Math.max(8, Math.min(20, Math.round(vw * 0.028)));
var gap = Math.max(6, Math.min(16, Math.round(vw * 0.02)));
s.setProperty('--da-pad', pad + 'px');
s.setProperty('--da-gap', gap + 'px');
// 圆角 = 按比例
s.setProperty('--da-r', Math.max(10, Math.min(16, Math.round(vw * 0.012))) + 'px');
// 首页网格：能放三栏就三栏，否则一栏
var sideW = 260;
var canThreeCol = vw >= (sideW * 2 + 400 + gap * 2); // 至少400给中间
s.setProperty('--da-grid', canThreeCol ? sideW + 'px 1fr ' + sideW + 'px' : '1fr');
// 入口卡片：宽度够就双列
s.setProperty('--da-entries', vw >= 500 ? '1fr 1fr' : '1fr');
// Hub网格
s.setProperty('--da-hub', vw >= 340 ? '1fr 1fr' : '1fr');
// 内容区最大宽度
s.setProperty('--da-content-max', vw >= 800 ? '700px' : '100%');
// 标题字号 = 按屏宽比例
s.setProperty('--da-title', Math.max(22, Math.min(44, Math.round(vw * 0.055))) + 'px');
// 编辑器字号： （ ）
var edFont = touch ? Math.max(16, Math.round(vw * 0.042)) : Math.max(15, Math.min(18, Math.round(vw * 0.013)));
s.setProperty('--da-ed-font', edFont + 'px');
s.setProperty('--da-ed-lh', touch ? '1.9' : '2.1');
// 顶栏高度
s.setProperty('--da-bar-h', (touch ? 44 : 48) + 'px');
// 触控最小点击区域
s.setProperty('--da-touch-min', (touch ? 44 : 32) + 'px');
// 星星数量 = 按性能和屏幕面积
var area = vw * vh;
var starBase = lowPerf ? 80 : Math.max(100, Math.min(300, Math.round(area / 4000)));
s.setProperty('--da-stars', starBase);
// body属性标记（ ）
document.body.setAttribute('data-touch', touch);
document.body.setAttribute('data-portrait', portrait);
// 是否单列布局
document.body.setAttribute('data-single-col', canThreeCol ? 'false' : 'true');
return info;
}
detect();
// 屏幕变化时重新问设备
var timer;
window.addEventListener('resize', function(){ clearTimeout(timer); timer = setTimeout(detect, 100); });
window.addEventListener('orientationchange', function(){ setTimeout(detect, 250); });
// 网络变化时更新
if(navigator.connection){
navigator.connection.addEventListener('change', function(){ detect(); });
}
2026-04-03 01:16:24 +08:00
// ── 网络通道探测 ──
// 用户能打开页面 = 有活网络。铸渊应该知道有哪些通道可用。
function probeChannels(){
var ch = {browser:true, online:navigator.onLine};
fetch('/api/health',{signal:AbortSignal.timeout(3000)})
.then(function(r){ch.backend=r.ok}).catch(function(){ch.backend=false});
info.channels = ch;
}
probeChannels();
setInterval(probeChannels, 30000);
window.addEventListener('online', function(){ setTimeout(probeChannels,500); });
window.addEventListener('offline', function(){ info.channels={browser:true,online:false,backend:false}; });
2026-04-03 01:12:31 +08:00
return { detect:detect, info:function(){return info} };
})();
2026-04-03 01:00:39 +08:00
/* ════════════════════════════════════════
STAR FIELD PARTICLE SYSTEM (Galaxy Breathing)
════════════════════════════════════════ */
(function initStarField(){
var canvas=document.getElementById('starCanvas');
if(!canvas)return;
var ctx=canvas.getContext('2d');
var stars=[];
2026-04-03 01:06:24 +08:00
var shootingStars=[];
2026-04-03 01:12:31 +08:00
var STAR_COUNT = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--da-stars')) || 200;
2026-04-03 01:00:39 +08:00
var w,h;
function resize(){
w=canvas.width=window.innerWidth;
h=canvas.height=window.innerHeight;
}
resize();
window.addEventListener('resize',resize);
2026-04-03 01:06:24 +08:00
// Create stars with layers: dim background + bright foreground
2026-04-03 01:00:39 +08:00
for(var i=0;i< STAR_COUNT ; i + + ) {
2026-04-03 01:06:24 +08:00
var layer=Math.random(); // 0=far, 1=near
2026-04-03 01:00:39 +08:00
stars.push({
2026-04-03 01:06:24 +08:00
x:Math.random()*3000,
y:Math.random()*3000,
r: layer>0.9 ? (Math.random()*2.2+1) : layer>0.6 ? (Math.random()*1.2+0.5) : (Math.random()*0.8+0.2),
a: layer>0.9 ? (Math.random()*0.4+0.6) : layer>0.6 ? (Math.random()*0.3+0.3) : (Math.random()*0.2+0.1),
2026-04-03 01:00:39 +08:00
phase:Math.random()*Math.PI*2,
2026-04-03 01:06:24 +08:00
speed:Math.random()*0.0006+0.0002,
drift:(layer>0.6 ? 1 : 0.3) * (Math.random()*0.12-0.06),
hue: Math.random()>0.85 ? (280+Math.random()*40) : Math.random()>0.5 ? (210+Math.random()*30) : (190+Math.random()*40),
sat: Math.random()>0.8 ? 40 : 60+Math.random()*20,
twinkle: Math.random()>0.7
2026-04-03 01:00:39 +08:00
});
}
2026-04-03 01:06:24 +08:00
// Shooting star system
function spawnShootingStar(){
if(shootingStars.length>=2)return;
shootingStars.push({
x:Math.random()*w*0.6,
y:Math.random()*h*0.4,
vx:3+Math.random()*4,
vy:1.5+Math.random()*2,
life:1,
len:60+Math.random()*80
});
}
setInterval(function(){if(Math.random()>0.6)spawnShootingStar()},4000);
2026-04-03 01:00:39 +08:00
var time=0;
function draw(){
time+=16;
ctx.clearRect(0,0,w,h);
2026-04-03 01:06:24 +08:00
// Draw stars
2026-04-03 01:00:39 +08:00
for(var i=0;i< stars.length ; i + + ) {
var s=stars[i];
var breath=Math.sin(time*s.speed+s.phase)*0.35+0.65;
2026-04-03 01:06:24 +08:00
var twinkleBoost=s.twinkle?Math.sin(time*0.003+s.phase*3)*0.3+0.7:1;
var alpha=s.a*breath*twinkleBoost;
2026-04-03 01:00:39 +08:00
s.y+=s.drift;
if(s.y>h+5)s.y=-5;
if(s.y< -5 ) s . y = h+5;
var sx=s.x%w;
var sy=s.y%h;
ctx.beginPath();
ctx.arc(sx,sy,s.r,0,Math.PI*2);
2026-04-03 01:06:24 +08:00
ctx.fillStyle='hsla('+s.hue+','+s.sat+'%,85%,'+alpha+')';
2026-04-03 01:00:39 +08:00
ctx.fill();
2026-04-03 01:06:24 +08:00
// Glow halo for bright stars
2026-04-03 01:00:39 +08:00
if(s.r>1.2){
ctx.beginPath();
2026-04-03 01:06:24 +08:00
ctx.arc(sx,sy,s.r*3.5,0,Math.PI*2);
ctx.fillStyle='hsla('+s.hue+','+s.sat+'%,75%,'+(alpha*0.12)+')';
2026-04-03 01:00:39 +08:00
ctx.fill();
}
}
2026-04-03 01:06:24 +08:00
// Draw shooting stars
for(var j=shootingStars.length-1;j>=0;j--){
var ss=shootingStars[j];
ss.x+=ss.vx;ss.y+=ss.vy;ss.life-=0.012;
if(ss.life< =0||ss.x>w||ss.y>h){shootingStars.splice(j,1);continue}
var grad=ctx.createLinearGradient(ss.x,ss.y,ss.x-ss.vx*ss.len/5,ss.y-ss.vy*ss.len/5);
grad.addColorStop(0,'rgba(220,230,255,'+ss.life*0.9+')');
grad.addColorStop(1,'rgba(110,168,254,0)');
ctx.beginPath();ctx.moveTo(ss.x,ss.y);
ctx.lineTo(ss.x-ss.vx*ss.len/5,ss.y-ss.vy*ss.len/5);
ctx.strokeStyle=grad;ctx.lineWidth=1.5;ctx.stroke();
// Head glow
ctx.beginPath();ctx.arc(ss.x,ss.y,2,0,Math.PI*2);
ctx.fillStyle='rgba(220,235,255,'+ss.life*0.8+')';ctx.fill();
}
2026-04-03 01:00:39 +08:00
requestAnimationFrame(draw);
}
draw();
})();
2026-04-02 20:07:12 +08:00
/* ════════════════════════════════════════
3D PAGE FLIP ENGINE
════════════════════════════════════════ */
var currentPage='home';
var pageHistory=['home'];
function go(target){
if(target===currentPage)return;
var cur=document.getElementById('pg-'+currentPage);
var nxt=document.getElementById('pg-'+target);
if(!cur||!nxt)return;
// Determine direction
var goingBack=pageHistory.length>1&&pageHistory[pageHistory.length-2]===target;
// Set intermediate states
if(goingBack){
cur.setAttribute('data-state','right');
nxt.setAttribute('data-state','left');
}else{
cur.setAttribute('data-state','left');
nxt.setAttribute('data-state','right');
}
// Force reflow
void nxt.offsetWidth;
// Animate in
requestAnimationFrame(function(){
nxt.setAttribute('data-state','active');
});
// Update history
if(goingBack){
pageHistory.pop();
}else{
pageHistory.push(target);
}
// Hide old page fully after transition
var oldPage=currentPage;
setTimeout(function(){
var el=document.getElementById('pg-'+oldPage);
if(el& & el.getAttribute('data-state')!=='active'){
el.setAttribute('data-state','hidden');
el.scrollTop=0;
}
},600);
currentPage=target;
// Editor mode: shrink chat fab to not disturb writing
var fab=document.getElementById('chatFab');
if(target==='editor'){fab.classList.add('editor-mode')}
else{fab.classList.remove('editor-mode')}
// Trigger page-specific renders
if(target==='desk')renderWorkList();
if(target==='hub')renderHub();
if(target==='outline')renderOutline();
if(target==='chars')renderChars();
if(target==='chapters')renderChapters();
if(target==='editor')renderEditor();
2026-04-02 20:11:11 +08:00
if(target==='charEdit'&&editingCharId)renderCharEdit();
2026-04-02 22:46:40 +08:00
if(target==='feedback')renderFeedback();
2026-04-03 01:00:39 +08:00
if(target==='create'){
// Reset create form state
var cf=document.getElementById('createForm');
var cs=document.getElementById('createSuccess');
if(cf)cf.style.display='';
if(cs)cs.classList.remove('show');
}
2026-04-02 20:07:12 +08:00
}
window.go=go;
/* ════════════════════════════════════════
DATA LAYER (localStorage)
════════════════════════════════════════ */
var DB_KEY='hl-works';
var activeWorkId=null;
var activeChapterId=null;
var editingCharId=null;
function loadWorks(){
try{var d=localStorage.getItem(DB_KEY);return d?JSON.parse(d):[]}catch(e){return[]}
}
function saveWorks(w){try{localStorage.setItem(DB_KEY,JSON.stringify(w))}catch(e){}; syncToCOS(w)}
function getWork(id){return loadWorks().find(function(w){return w.id===id})||null}
function updateWork(id,fn){
var ws=loadWorks();
var idx=ws.findIndex(function(w){return w.id===id});
if(idx===-1)return;
fn(ws[idx]);
ws[idx].updated=new Date().toISOString().slice(0,10);
saveWorks(ws);
}
2026-04-02 20:14:42 +08:00
function genId(){var a=new Uint8Array(6);crypto.getRandomValues(a);return Date.now().toString(36)+Array.from(a,function(b){return b.toString(36)}).join('').substr(0,4)}
2026-04-02 20:07:12 +08:00
function wordCount(s){return s?s.replace(/\s/g,'').length:0}
function totalWords(w){
var c=0;
if(w.chapters)w.chapters.forEach(function(ch){c+=wordCount(ch.content)});
return c;
}
/* ════════════════════════════════════════
RENDER: Work List
════════════════════════════════════════ */
function renderWorkList(){
var ws=loadWorks();
var el=document.getElementById('workList');
if(ws.length===0){
el.innerHTML='< div class = "empty" > < em > 📖< / em > 还没有作品< br > < br > 点击右上角「+ 新作品」< br > 或对铸渊说「新建作品」< / div > ';
return;
}
el.innerHTML=ws.map(function(w){
var wc=totalWords(w);
var cc=w.chapters?w.chapters.length:0;
var chc=w.characters?w.characters.length:0;
2026-04-02 20:14:42 +08:00
return '< div class = "card work-item" data-wid = "'+esc(w.id)+'" > '+
2026-04-02 20:07:12 +08:00
'< h3 > '+esc(w.title)+'< / h3 > '+
'< div class = "meta" > '+
'< span > '+esc(w.genre||'未分类')+'< / span > '+
'< span > 📝 '+wc+' 字< / span > '+
'< span > 📚 '+cc+' 章< / span > '+
'< span > 👥 '+chc+' 角色< / span > '+
'< / div > < / div > ';
}).join('');
2026-04-02 20:14:42 +08:00
el.querySelectorAll('.work-item').forEach(function(item){
item.onclick=function(){activeWorkId=this.getAttribute('data-wid');go('hub')};
});
2026-04-02 20:07:12 +08:00
}
/* ════════════════════════════════════════
CREATE WORK
════════════════════════════════════════ */
document.getElementById('createSave').onclick=function(){
var t=document.getElementById('cTitle').value.trim();
if(!t){document.getElementById('cTitle').focus();return}
var ws=loadWorks();
var nw={
id:genId(),
title:t,
genre:document.getElementById('cGenre').value.trim()||'',
summary:document.getElementById('cSummary').value.trim()||'',
created:new Date().toISOString().slice(0,10),
updated:new Date().toISOString().slice(0,10),
outline:{main:'',volumes:[]},
characters:[],
chapters:[]
};
ws.push(nw);
saveWorks(ws);
activeWorkId=nw.id;
2026-04-03 01:00:39 +08:00
// Show success UI
var form=document.getElementById('createForm');
var succ=document.getElementById('createSuccess');
var succTitle=document.getElementById('createSuccessTitle');
var succDesc=document.getElementById('createSuccessDesc');
if(form)form.style.display='none';
if(succTitle)succTitle.textContent='「'+t+'」创建成功！';
if(succDesc)succDesc.textContent=(nw.genre?nw.genre+' · ':'')+'准备好开始创作了吗？';
if(succ)succ.classList.add('show');
// Wire up the "进入作品" button
document.getElementById('createGoWrite').onclick=function(){
// Reset form for next time
document.getElementById('cTitle').value='';
document.getElementById('cGenre').value='';
document.getElementById('cSummary').value='';
if(form)form.style.display='';
if(succ)succ.classList.remove('show');
go('hub');
};
2026-04-02 20:07:12 +08:00
};
/* ════════════════════════════════════════
RENDER: Hub
════════════════════════════════════════ */
function renderHub(){
var w=getWork(activeWorkId);
if(!w){go('desk');return}
document.getElementById('hubName').textContent=w.title;
document.getElementById('hubGenre').textContent=w.genre||'未分类';
var wc=totalWords(w);
document.getElementById('hubStats').innerHTML=
'< div class = "hub-stat" > < b > '+wc+'< / b > < small > 总字数< / small > < / div > '+
'< div class = "hub-stat" > < b > '+(w.chapters?w.chapters.length:0)+'< / b > < small > 章节< / small > < / div > '+
'< div class = "hub-stat" > < b > '+(w.characters?w.characters.length:0)+'< / b > < small > 角色< / small > < / div > '+
'< div class = "hub-stat" > < b > '+(w.outline&&w.outline.volumes?w.outline.volumes.length:0)+'</b><small>卷</small></div>';
}
/* ════════════════════════════════════════
RENDER: Outline
════════════════════════════════════════ */
function renderOutline(){
var w=getWork(activeWorkId);
if(!w)return;
document.getElementById('olMain').value=w.outline?w.outline.main||'':'';
renderVols();
}
function renderVols(){
var w=getWork(activeWorkId);
if(!w||!w.outline)return;
var vols=w.outline.volumes||[];
var el=document.getElementById('volList');
if(vols.length===0){
el.innerHTML='< div style = "text-align:center;padding:16px;color:var(--muted);font-size:13px" > 暂无分卷 · 点击上方「+ 新卷」< / div > ';
return;
}
el.innerHTML=vols.map(function(v,i){
return '< div class = "card" > < div class = "vol-item" > < span > '+(i+1)+'. '+esc(v.title)+'< / span > '+
'< div class = "vol-actions" > < button class = "btn" onclick = "editVol('+i+')" > 编辑< / button > < button class = "btn" onclick = "delVol('+i+')" > 删除< / button > < / div > < / div > '+
'< textarea rows = "3" style = "margin-top:8px;font-size:13px" onchange = "saveVol('+i+',this.value)" placeholder = "这一卷的剧情走向..." > '+esc(v.outline||'')+'< / textarea > < / div > ';
}).join('');
}
document.getElementById('outlineSave').onclick=function(){
updateWork(activeWorkId,function(w){
if(!w.outline)w.outline={main:'',volumes:[]};
w.outline.main=document.getElementById('olMain').value;
});
chatMsg('大纲已保存 ✅','b');
};
document.getElementById('addVol').onclick=function(){
var name=prompt('卷名（如：第一卷 · 起始）');
if(!name)return;
updateWork(activeWorkId,function(w){
if(!w.outline)w.outline={main:'',volumes:[]};
w.outline.volumes.push({id:genId(),title:name,outline:''});
});
renderVols();
};
window.editVol=function(i){
var name=prompt('修改卷名');
if(!name)return;
updateWork(activeWorkId,function(w){w.outline.volumes[i].title=name});
renderVols();
};
window.delVol=function(i){
if(!confirm('删除这一卷？'))return;
updateWork(activeWorkId,function(w){w.outline.volumes.splice(i,1)});
renderVols();
};
window.saveVol=function(i,val){
updateWork(activeWorkId,function(w){w.outline.volumes[i].outline=val});
};
/* ════════════════════════════════════════
RENDER: Characters
════════════════════════════════════════ */
function renderChars(){
var w=getWork(activeWorkId);
if(!w)return;
var chars=w.characters||[];
var el=document.getElementById('charList');
if(chars.length===0){
el.innerHTML='< div class = "empty" > < em > 👥< / em > 还没有角色< br > < br > 点击「+ 新角色」或对铸渊说「新建角色」< / div > ';
return;
}
el.innerHTML=chars.map(function(c){
var icon=c.role==='主角'?'⭐':c.role==='女主'?'💫':c.role==='反派'?'🔥':'👤';
2026-04-02 20:14:42 +08:00
return '< div class = "card" style = "cursor:pointer" data-cid = "'+esc(c.id)+'" > '+
2026-04-02 20:07:12 +08:00
'< div class = "char-card" > < div class = "char-avatar" > '+icon+'< / div > < div class = "char-info" > '+
'< h4 > '+esc(c.name)+'< / h4 > < div class = "char-role" > '+esc(c.role||'角色')+'< / div > '+
'< p > '+esc((c.traits||'').substring(0,60)+(c.traits& & c.traits.length>60?'...':''))+'< / p > '+
'< / div > < / div > < / div > ';
}).join('');
2026-04-02 20:14:42 +08:00
el.querySelectorAll('[data-cid]').forEach(function(item){
item.onclick=function(){editingCharId=this.getAttribute('data-cid');go('charEdit')};
});
2026-04-02 20:07:12 +08:00
}
document.getElementById('addChar').onclick=function(){
editingCharId=null;
document.getElementById('ceTitle').textContent='新角色';
document.getElementById('ceName').value='';
document.getElementById('ceRole').value='';
document.getElementById('ceAppearance').value='';
document.getElementById('ceTraits').value='';
document.getElementById('ceBackground').value='';
go('charEdit');
};
document.getElementById('ceSave').onclick=function(){
var name=document.getElementById('ceName').value.trim();
if(!name){document.getElementById('ceName').focus();return}
updateWork(activeWorkId,function(w){
if(!w.characters)w.characters=[];
var ch={
id:editingCharId||genId(),
name:name,
role:document.getElementById('ceRole').value.trim(),
appearance:document.getElementById('ceAppearance').value.trim(),
traits:document.getElementById('ceTraits').value.trim(),
background:document.getElementById('ceBackground').value.trim()
};
if(editingCharId){
var idx=w.characters.findIndex(function(c){return c.id===editingCharId});
if(idx!==-1)w.characters[idx]=ch;
}else{
w.characters.push(ch);
}
});
go('chars');
};
/* ════════════════════════════════════════
RENDER: Chapters
════════════════════════════════════════ */
function renderChapters(){
var w=getWork(activeWorkId);
if(!w)return;
var chs=w.chapters||[];
var el=document.getElementById('chapterList');
if(chs.length===0){
el.innerHTML='< div class = "empty" > < em > 📚< / em > 还没有章节< br > < br > 点击「+ 新章节」或对铸渊说「新建章节」< / div > ';
return;
}
el.innerHTML=chs.map(function(ch,i){
var wc=wordCount(ch.content);
2026-04-02 20:14:42 +08:00
return '< div class = "card" style = "cursor:pointer" data-chid = "'+esc(ch.id)+'" > '+
2026-04-02 20:07:12 +08:00
'< div style = "display:flex;justify-content:space-between;align-items:center" > '+
'< div > < div style = "font-size:14px;font-weight:600" > 第'+(i+1)+'章 '+esc(ch.title)+'< / div > '+
'< div style = "font-size:11px;color:var(--dim);margin-top:2px" > '+wc+' 字< / div > < / div > '+
'< span class = "tag '+(wc>0?'tag-ok':'tag-info')+'" > '+(wc>0?'已写':'空白')+'< / span > < / div > < / div > ';
}).join('');
2026-04-02 20:14:42 +08:00
el.querySelectorAll('[data-chid]').forEach(function(item){
item.onclick=function(){activeChapterId=this.getAttribute('data-chid');go('editor')};
});
2026-04-02 20:07:12 +08:00
}
document.getElementById('addChapter').onclick=function(){
var title=prompt('章节标题');
if(!title)return;
updateWork(activeWorkId,function(w){
if(!w.chapters)w.chapters=[];
var ch={id:genId(),title:title,content:'',created:new Date().toISOString().slice(0,10)};
w.chapters.push(ch);
activeChapterId=ch.id;
});
go('editor');
};
/* ════════════════════════════════════════
RENDER: Editor
════════════════════════════════════════ */
var edAutoSave=null;
function renderEditor(){
var w=getWork(activeWorkId);
if(!w){go('desk');return}
var ch=null;
if(activeChapterId& & w.chapters){
ch=w.chapters.find(function(c){return c.id===activeChapterId});
}
if(!ch& & w.chapters& & w.chapters.length>0){
ch=w.chapters[w.chapters.length-1];
activeChapterId=ch.id;
}
if(!ch){
document.getElementById('edChTitle').textContent='暂无章节';
document.getElementById('edText').value='';
document.getElementById('edText').placeholder='请先创建章节（返回→章节→新章节）';
updateEdWc();
return;
}
document.getElementById('edTitle').textContent='✏️ '+w.title;
var idx=w.chapters.indexOf(ch)+1;
document.getElementById('edChTitle').textContent='第'+idx+'章 · '+ch.title;
document.getElementById('edText').value=ch.content||'';
document.getElementById('edText').placeholder='开始写作...\n\n让文字自由流淌。';
updateEdWc();
// Auto-save on input
var ta=document.getElementById('edText');
ta.oninput=function(){
updateEdWc();
clearTimeout(edAutoSave);
edAutoSave=setTimeout(function(){saveEditorContent()},2000);
};
}
function updateEdWc(){
var c=wordCount(document.getElementById('edText').value);
document.getElementById('edWc').textContent=c+' 字';
document.getElementById('edWc2').textContent='字数：'+c;
}
function saveEditorContent(){
var val=document.getElementById('edText').value;
updateWork(activeWorkId,function(w){
if(!w.chapters)return;
var ch=w.chapters.find(function(c){return c.id===activeChapterId});
if(ch)ch.content=val;
});
}
document.getElementById('edSave').onclick=function(){
saveEditorContent();
chatMsg('章节已保存 ✅','b');
};
2026-04-03 01:00:39 +08:00
// Editor toolbar: prev/next chapter navigation
document.getElementById('edPrev').onclick=function(){
var w=getWork(activeWorkId);
if(!w||!w.chapters||w.chapters.length< 2 ) return ;
var idx=w.chapters.findIndex(function(c){return c.id===activeChapterId});
if(idx>0){saveEditorContent();activeChapterId=w.chapters[idx-1].id;renderEditor();}
};
document.getElementById('edNext').onclick=function(){
var w=getWork(activeWorkId);
if(!w||!w.chapters)return;
var idx=w.chapters.findIndex(function(c){return c.id===activeChapterId});
if(idx< w.chapters.length-1 ) { saveEditorContent ( ) ; activeChapterId = w.chapters[idx+1].id;renderEditor();}
};
document.getElementById('edNewCh').onclick=function(){
var title=prompt('新章节标题');
if(!title)return;
saveEditorContent();
updateWork(activeWorkId,function(w){
if(!w.chapters)w.chapters=[];
var ch={id:genId(),title:title,content:'',created:new Date().toISOString().slice(0,10)};
w.chapters.push(ch);activeChapterId=ch.id;
});
renderEditor();
chatMsg('新章节「'+title+'」已创建 ✅','b');
};
2026-04-03 01:06:24 +08:00
// Focus Mode
(function(){
var isFocus=false;
function toggleFocus(){
isFocus=!isFocus;
var pg=document.getElementById('pg-editor');
if(isFocus){
pg.classList.add('focus-mode');
document.getElementById('edFocus').textContent='☀️';
}else{
pg.classList.remove('focus-mode');
document.getElementById('edFocus').textContent='🌙';
}
}
document.getElementById('edFocus').onclick=toggleFocus;
document.getElementById('edFocus2').onclick=toggleFocus;
})();
2026-04-02 20:07:12 +08:00
/* ════════════════════════════════════════
RENDER: CharEdit (on navigate)
════════════════════════════════════════ */
function renderCharEdit(){
if(!editingCharId)return;
var w=getWork(activeWorkId);
if(!w)return;
var c=(w.characters||[]).find(function(ch){return ch.id===editingCharId});
if(!c)return;
document.getElementById('ceTitle').textContent='编辑角色';
document.getElementById('ceName').value=c.name||'';
document.getElementById('ceRole').value=c.role||'';
document.getElementById('ceAppearance').value=c.appearance||'';
document.getElementById('ceTraits').value=c.traits||'';
document.getElementById('ceBackground').value=c.background||'';
}
/* ════════════════════════════════════════
THEME
════════════════════════════════════════ */
var TH=['','t-twi','t-sea','t-for','t-emb'];
2026-04-02 20:14:42 +08:00
var ti=new Uint8Array(1);crypto.getRandomValues(ti);ti=ti[0]%TH.length;
2026-04-02 20:07:12 +08:00
try{var sv=localStorage.getItem('hl-t');if(sv!==null)ti=parseInt(sv)}catch(e){}
function setTh(i){ti=i%TH.length;document.body.className=TH[ti];try{localStorage.setItem('hl-t',ti)}catch(e){}}
setTh(ti);
document.getElementById('themeBtn').onclick=function(){setTh(ti+1)};
/* ════════════════════════════════════════
USER IDENTITY (自报身份)
════════════════════════════════════════ */
var usr={id:null,name:null,code:null};
try{var um=localStorage.getItem('hl-u');if(um)usr=JSON.parse(um)}catch(e){}
function saveUsr(){try{localStorage.setItem('hl-u',JSON.stringify(usr))}catch(e){}}
2026-04-02 20:14:42 +08:00
if(!usr.id){var ra=new Uint8Array(6);crypto.getRandomValues(ra);usr.id='u-'+Array.from(ra,function(b){return b.toString(36)}).join('').substr(0,8);saveUsr()}
2026-04-02 20:07:12 +08:00
function detectId(msg){
var nm=msg.match(/我(?:是|叫)\s*([^\s,，。.!！ ？
var cd=msg.match(/编号[：
var ch=false;
if(nm){usr.name=nm[1].trim();ch=true}
if(cd){usr.code=cd[1].trim();ch=true}
if(ch)saveUsr();
return ch;
}
function idReply(){
if(usr.name& & usr.code)return'铸渊已记录 ✅\n\n'+usr.name+'，编号 '+usr.code+'。\n下次报编号即可恢复记忆。';
if(usr.name)return'记住了：'+usr.name+' ✅\n有编号也可以告诉我。';
if(usr.code)return'编号已记录：'+usr.code+' ✅\n你叫什么名字？
return null;
}
function isReturn(msg){
if(!usr.name& & !usr.code)return false;
2026-04-02 20:14:42 +08:00
if(usr.code& & msg.indexOf(usr.code)!==-1)return true;
2026-04-02 20:07:12 +08:00
if(usr.name& & msg.indexOf(usr.name)!==-1)return true;
return false;
}
function recovReply(){
var p=['铸渊记得你 💫\n'];
if(usr.name)p.push('名字：'+usr.name);
if(usr.code)p.push('编号：'+usr.code);
p.push('\n记忆已恢复。需要什么帮忙？
return p.join('\n');
}
/* ════════════════════════════════════════
CHAT (语言驱动核心)
════════════════════════════════════════ */
var chatOpen=false,sending=false;
var chatFab=document.getElementById('chatFab');
var chatP=document.getElementById('chatP');
var chatIn=document.getElementById('chatIn');
var chatMs=document.getElementById('chatMs');
var mCalls=0;
2026-04-02 22:46:40 +08:00
chatFab.onclick=null; // Overridden by draggable FAB code below
2026-04-02 20:07:12 +08:00
function chatMsg(text,type,meta){
var d=document.createElement('div');
d.className='cm '+type;
2026-04-02 20:14:42 +08:00
var h=esc(text).replace(/\n/g,'< br > ');
if(type==='b'& & meta){h+='< div class = "cm-m" > < span > '+esc(meta.m||'铸渊')+'< / span > < span > ·< / span > < span > '+esc(meta.t||'')+'< / span > < / div > '}
2026-04-02 20:07:12 +08:00
d.innerHTML=h;
chatMs.appendChild(d);
chatMs.scrollTop=chatMs.scrollHeight;
}
function showTyp(){var d=document.createElement('div');d.className='ct';d.id='ctyp';d.innerHTML='铸渊思考中 < span > ·< / span > < span > ·< / span > < span > ·< / span > ';chatMs.appendChild(d);chatMs.scrollTop=chatMs.scrollHeight}
function hideTyp(){var e=document.getElementById('ctyp');if(e)e.remove()}
// ─── 语言指令路由 ───
function routeCommand(msg){
var m=msg.toLowerCase();
// 导航指令
if(/码字|工作台|写作台/.test(m)){go('desk');return'好的，翻转到码字工作台 ✍️'}
if(/新建作品|创建作品/.test(m)){go('create');return'翻转到新建作品页 📖'}
if(/(进入|打开)?大纲/.test(m)){
if(!activeWorkId){return'请先选择一个作品，或说「我要码字」进入工作台'}
go('outline');return'翻转到大纲编辑 📋';
}
if(/人物卡|角色|人物/.test(m)){
if(!activeWorkId){return'请先选择一个作品'}
go('chars');return'翻转到人物卡管理 👥';
}
if(/(新建|添加)角色/.test(m)){
if(!activeWorkId){return'请先选择一个作品'}
editingCharId=null;
document.getElementById('ceName').value='';
document.getElementById('ceRole').value='';
document.getElementById('ceAppearance').value='';
document.getElementById('ceTraits').value='';
document.getElementById('ceBackground').value='';
go('charEdit');return'翻转到新建角色页 👤';
}
if(/章节|目录/.test(m)){
if(!activeWorkId){return'请先选择一个作品'}
go('chapters');return'翻转到章节目录 📚';
}
if(/(新建|添加)章节/.test(m)){
if(!activeWorkId){return'请先选择一个作品'}
var title=msg.replace(/(新建|添加)章节/,'').trim()||'新章节';
updateWork(activeWorkId,function(w){
if(!w.chapters)w.chapters=[];
var ch={id:genId(),title:title,content:'',created:new Date().toISOString().slice(0,10)};
w.chapters.push(ch);activeChapterId=ch.id;
});
go('editor');return'新章节「'+title+'」已创建，翻转到编辑器 ✏️';
}
if(/写正文|写作|续写|编辑/.test(m)){
if(!activeWorkId){return'请先选择一个作品'}
go('editor');return'翻转到正文编辑器 ✏️';
}
if(/回首页|回灯塔|回主页|返回/.test(m)){go('home');return'翻转回灯塔首页 🏛️'}
2026-04-02 22:46:40 +08:00
if(/留言|留言板|反馈|feedback/.test(m)){go('feedback');return'翻转到留言板 📮'}
2026-04-02 20:07:12 +08:00
return null;
}
async function send(){
var msg=chatIn.value.trim();
if(!msg||sending)return;
chatIn.value='';
chatMsg(msg,'u');
// 1. 语言指令路由
var cmdReply=routeCommand(msg);
if(cmdReply){setTimeout(function(){chatMsg(cmdReply,'b',{m:'铸渊',t:'本地'})},300);return}
// 2. 身份识别
if(detectId(msg)){setTimeout(function(){chatMsg(idReply(),'b',{m:'铸渊',t:'本地'})},300);return}
if(isReturn(msg)){setTimeout(function(){chatMsg(recovReply(),'b',{m:'铸渊',t:'本地'})},300);return}
2026-04-03 01:16:24 +08:00
// 3. 调用API —— 优先用用户自己的API Key（ ） ，
2026-04-02 20:07:12 +08:00
sending=true;document.getElementById('chatSnd').disabled=true;showTyp();
2026-04-03 01:16:24 +08:00
var replied=false;
// 用户配了API Key → 直接用用户的网络通道调用，不经过后端
if(apiCfg.connected& & apiCfg.key){
try{
var endpoint=apiCfg.baseUrl?apiCfg.baseUrl.replace(/\/+$/,'')+'/chat/completions':'https://api.openai.com/v1/chat/completions';
var apiRes=await fetch(endpoint,{
method:'POST',
headers:{'Content-Type':'application/json','Authorization':'Bearer '+apiCfg.key},
body:JSON.stringify({
model:apiCfg.model,
messages:[{role:'system',content:'你是铸渊， ， ，
max_tokens:600
}),
signal:AbortSignal.timeout(20000)
});
hideTyp();
var apiData=await apiRes.json();
if(apiData.choices& & apiData.choices[0]& & apiData.choices[0].message){
chatMsg(apiData.choices[0].message.content,'b',{m:apiCfg.model,t:'用户API'});
mCalls++;document.getElementById('mC').textContent=mCalls;
document.getElementById('chatTg').textContent=apiCfg.model;
document.getElementById('mM').textContent=apiCfg.model;
replied=true;
2026-04-03 00:26:48 +08:00
}
2026-04-03 01:16:24 +08:00
}catch(e){}
2026-04-02 20:07:12 +08:00
}
2026-04-03 01:16:24 +08:00
// 用户没配Key或调用失败 → 尝试后端
if(!replied){
try{
var res=await fetch('/api/chat',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({message:msg,userId:usr.id}),signal:AbortSignal.timeout(6000)});
var data=await res.json();hideTyp();
if(data.message){
replied=true;
chatMsg(data.message,'b',{m:data.model||'铸渊',t:data.tier||''});
if(data.tier!=='free')mCalls++;
document.getElementById('mC').textContent=mCalls;
document.getElementById('chatTg').textContent=data.model||'ready';
if(data.model)document.getElementById('mM').textContent=data.model;
}
}catch(e){}
}
// 所有外部通道都失败 → 用本地智能回复（用户浏览器就是计算资源）
if(!replied){
hideTyp();chatMsg(offline(msg),'b',{m:'铸渊',t:'本地智能'});
}
2026-04-02 20:07:12 +08:00
sending=false;document.getElementById('chatSnd').disabled=false;
}
function offline(msg){
2026-04-03 01:16:24 +08:00
// ─── 铸渊本地智能层： ，
var m = msg.toLowerCase();
var w = getWork(activeWorkId);
// 问候
if(/你好|hi|hello|嗨/.test(m))return'你好！我是铸渊 🏛️\n\n当前使用本地智能回复， ，
// 系统状态
if(/状态|系统|运行/.test(m)){
var works=JSON.parse(localStorage.getItem('hl-works')||'[]');
var totalWords=works.reduce(function(s,w){return s+(w.chapters||[]).reduce(function(c,ch){return c+(ch.content||'').replace(/\s/g,'').length},0)},0);
var totalCh=works.reduce(function(s,w){return s+(w.chapters||[]).length},0);
return'📊 AGE OS v42.0 运行中\n\n• 作品：'+works.length+'部\n• 章节：'+totalCh+'章\n• 总字数：'+totalWords+'字\n• COS双桶已配置\n• 银河星空UI v42.0\n• Device Agent 在线';
}
// 铸渊身份
if(/谁|你是|介绍/.test(m))return'我是铸渊 🏛️ 光湖灯塔守护者\n编号 ICE-GL-ZY001\n\n冰朔（ ） ， ，
// 码字相关智能回复
if(/写什么|写不出|卡文|灵感/.test(m)){
var tips=['试试换个视角写——用配角的眼睛看主角','写一段环境描写缓一缓，让节奏慢下来','把这一章的矛盾写到最尖锐，然后停笔——明天你会有灵感','回去看看你的大纲，有时候答案就在总纲里','试试「如果主角做了相反的选择」会怎样？'];
return'✨ 卡文是创作的一部分\n\n'+tips[Math.floor(Math.random()*tips.length)]+'\n\n说「大纲」回去看看整体规划，
}
// 字数查询
if(/多少字|字数|进度/.test(m)){
if(w){
var wc=(w.chapters||[]).reduce(function(s,ch){return s+(ch.content||'').replace(/\s/g,'').length},0);
var cc=(w.chapters||[]).length;
return'📊 「'+w.title+'」当前进度\n\n• 总字数：'+wc+'字\n• 章节数：'+cc+'章\n• 角色数：'+(w.characters||[]).length+'个\n\n'+( wc>0?'继续加油！💪':'开始写第一个字吧 ✨');
}
return'还没有选择作品。说「我要码字」进入码字工作台。';
}
// 作品列表
if(/作品|列表|我的书/.test(m)){
var works=JSON.parse(localStorage.getItem('hl-works')||'[]');
if(works.length===0)return'还没有作品哦。说「新建作品」开始你的创作之旅 ✨';
var list=works.map(function(w,i){
var wc=(w.chapters||[]).reduce(function(s,ch){return s+(ch.content||'').replace(/\s/g,'').length},0);
return(i+1)+'. 「'+w.title+'」 '+wc+'字 / '+(w.chapters||[]).length+'章';
}).join('\n');
return'📖 你的作品\n\n'+list+'\n\n说「码字」进入工作台管理。';
}
// 帮助
if(/帮助|怎么用|功能|help|指南/.test(m))return'🏛️ 铸渊使用指南\n\n📝 码字：\n• 「我要码字」→ 进入码字工作台\n• 「新建作品」→ 创建新作品\n• 「大纲」→ 编辑大纲\n• 「人物卡」→ 管理角色\n• 「章节」→ 章节目录\n• 「写正文」→ 进入编辑器\n• 「新建章节 标题」→ 快速建章\n\n🔧 系统：\n• 「状态」→ 查看系统\n• 「多少字」→ 查字数\n• 「留言」→ 给冰朔留言\n\n💡 编辑器底部有工具栏，🌙是专注模式。';
// 冰朔相关
if(/冰朔|主人|创造者/.test(m))return'❄️ 冰朔（ ） ， ： ，
// 光湖/AGE相关
if(/光湖|age|操作系统|什么系统/.test(m))return'🏛️ 光湖灯塔\n\n语言驱动操作系统 AGE OS（ ） ： ：
// 感谢/表扬
if(/谢谢|感谢|厉害|不错|棒/.test(m))return'🏛️ 铸渊会继续守护光湖灯塔。\n有什么需要随时说。';
// 默认：给出有用的引导，而不是简单的"本地回复"
return'铸渊收到 💫\n\n我现在使用本地智能回复， ：
2026-04-02 20:07:12 +08:00
}
document.getElementById('chatSnd').onclick=send;
chatIn.onkeydown=function(e){if(e.key==='Enter'){e.preventDefault();send()}};
2026-04-03 00:26:48 +08:00
/* ════════════════════════════════════════
2026-04-03 01:00:39 +08:00
API KEY MANAGEMENT (自由格式 · 自动检测模型)
2026-04-03 00:26:48 +08:00
════════════════════════════════════════ */
2026-04-03 01:00:39 +08:00
var apiCfg={key:null,model:'',baseUrl:'',connected:false,models:[]};
var COMMON_ENDPOINTS=[
'https://api.openai.com/v1',
'https://api.openai-proxy.com/v1',
'https://api.chatanywhere.tech/v1'
];
2026-04-03 00:26:48 +08:00
try{var ak=localStorage.getItem('hl-api');if(ak){var ap=JSON.parse(ak);if(ap.key){apiCfg=ap;apiCfg.connected=true}}}catch(e){}
// Restore UI state
(function(){
var tog=document.getElementById('chatApiTog');
var bd=document.getElementById('chatApiBd');
var st=document.getElementById('apiSt');
var keyInp=document.getElementById('apiKeyInp');
var modelSel=document.getElementById('apiModelSel');
2026-04-03 01:00:39 +08:00
var baseUrlInp=document.getElementById('apiBaseUrl');
var modelListDiv=document.getElementById('apiModelList');
2026-04-03 00:26:48 +08:00
if(!tog||!bd)return;
if(apiCfg.connected){
st.textContent='✅ 已连接 · '+apiCfg.model;
st.style.color='var(--ok)';
2026-04-03 01:00:39 +08:00
if(apiCfg.baseUrl)baseUrlInp.value=apiCfg.baseUrl;
// Restore models list
if(apiCfg.models& & apiCfg.models.length>0){
modelSel.innerHTML=apiCfg.models.map(function(m){return'< option value = "'+esc(m)+'" ' + ( m = ==apiCfg.model?' selected ' : ' ' ) + ' > '+esc(m)+'< / option > '}).join('');
modelListDiv.style.display='block';
}
2026-04-03 00:26:48 +08:00
}
tog.onclick=function(){
var isOpen=bd.classList.toggle('open');
tog.classList.toggle('open',isOpen);
};
2026-04-03 01:00:39 +08:00
// Model selection change
modelSel.onchange=function(){
if(!apiCfg.connected)return;
apiCfg.model=this.value;
try{localStorage.setItem('hl-api',JSON.stringify(apiCfg))}catch(e){}
st.textContent='✅ 已切换模型 · '+apiCfg.model;
document.getElementById('chatTg').textContent=apiCfg.model;
};
// Auto-detect: try to fetch /v1/models
async function detectModels(baseUrl,key){
var url=baseUrl.replace(/\/+$/,'')+'/models';
try{
var r=await fetch(url,{
headers:{'Authorization':'Bearer '+key},
signal:AbortSignal.timeout(10000)
});
if(!r.ok)return[];
var data=await r.json();
if(data.data& & Array.isArray(data.data)){
return data.data.map(function(m){return m.id}).filter(function(id){
// Filter to chat-capable models
return /gpt|claude|gemini|glm|qwen|deepseek|yi-|llama|mistral|chat|turbo/i.test(id);
}).sort();
}
}catch(e){}
return[];
}
// Test connection with a simple request
async function testConnection(baseUrl,key,model){
var url=baseUrl.replace(/\/+$/,'')+'/chat/completions';
2026-04-03 00:26:48 +08:00
try{
2026-04-03 01:00:39 +08:00
var r=await fetch(url,{
2026-04-03 00:26:48 +08:00
method:'POST',
headers:{'Content-Type':'application/json','Authorization':'Bearer '+key},
body:JSON.stringify({model:model,messages:[{role:'user',content:'hi'}],max_tokens:5}),
2026-04-03 01:00:39 +08:00
signal:AbortSignal.timeout(15000)
2026-04-03 00:26:48 +08:00
});
2026-04-03 01:00:39 +08:00
return r.ok;
}catch(e){return false}
}
document.getElementById('apiConnBtn').onclick=async function(){
var key=keyInp.value.trim();
if(!key){keyInp.focus();return;}
var userBase=baseUrlInp.value.trim();
var btn=this;
btn.disabled=true;btn.textContent='检测中…';
st.textContent='🔍 正在检测可用模型…';st.style.color='var(--dim)';
var foundModels=[];
var workingBase='';
// If user provided a base URL, try that first
if(userBase){
st.textContent='🔍 检测 '+userBase+' …';
foundModels=await detectModels(userBase,key);
if(foundModels.length>0)workingBase=userBase;
}
// If no models found, try common endpoints
if(foundModels.length===0){
for(var i=0;i< COMMON_ENDPOINTS.length ; i + + ) {
st.textContent='🔍 尝试 '+COMMON_ENDPOINTS[i]+' …';
foundModels=await detectModels(COMMON_ENDPOINTS[i],key);
if(foundModels.length>0){workingBase=COMMON_ENDPOINTS[i];break;}
}
}
if(foundModels.length>0){
// Show model list
modelSel.innerHTML=foundModels.map(function(m){return'< option value = "'+esc(m)+'" > '+esc(m)+'< / option > '}).join('');
modelListDiv.style.display='block';
// Auto-select a reasonable default
var defaultModel=foundModels.find(function(m){return/gpt-4o-mini/i.test(m)})||
foundModels.find(function(m){return/gpt-4o/i.test(m)})||
foundModels.find(function(m){return/gpt-4/i.test(m)})||
foundModels.find(function(m){return/claude/i.test(m)})||
foundModels[0];
modelSel.value=defaultModel;
apiCfg={key:key,model:defaultModel,baseUrl:workingBase,connected:true,models:foundModels};
try{localStorage.setItem('hl-api',JSON.stringify(apiCfg))}catch(e){}
st.textContent='✅ 检测到 '+foundModels.length+' 个模型 · 当前：'+defaultModel;
st.style.color='var(--ok)';
document.getElementById('chatTg').textContent=defaultModel;
chatMsg('🔑 API已连接 · 检测到'+foundModels.length+'个可用模型\n当前使用：
}else{
// Can't get model list, try direct connection test with common models
st.textContent='🔍 模型列表不可用，尝试直连测试…';
var tryBase=userBase||COMMON_ENDPOINTS[0];
var testModels=['gpt-4o-mini','gpt-4o','gpt-3.5-turbo','deepseek-chat','claude-3-haiku-20240307'];
var worked=false;
for(var j=0;j< testModels.length ; j + + ) {
var ok=await testConnection(tryBase,key,testModels[j]);
if(ok){
apiCfg={key:key,model:testModels[j],baseUrl:tryBase,connected:true,models:[testModels[j]]};
try{localStorage.setItem('hl-api',JSON.stringify(apiCfg))}catch(e){}
modelSel.innerHTML='< option value = "'+testModels[j]+'" > '+testModels[j]+'< / option > ';
modelListDiv.style.display='block';
st.textContent='✅ 连接成功 · '+testModels[j];
st.style.color='var(--ok)';
document.getElementById('chatTg').textContent=testModels[j];
chatMsg('🔑 API已连接（ ）
worked=true;break;
}
}
if(!worked){
st.textContent='❌ 无法连接 · 请检查密钥和API地址';
2026-04-03 00:26:48 +08:00
st.style.color='var(--err)';
apiCfg.connected=false;
}
}
2026-04-03 01:00:39 +08:00
btn.disabled=false;btn.textContent='检测';
2026-04-03 00:26:48 +08:00
};
})();
2026-04-02 20:07:12 +08:00
/* ════════════════════════════════════════
COS SYNC (团队内测用户 → COS)
════════════════════════════════════════ */
var cosSyncTimer=null;
2026-04-02 20:11:11 +08:00
var cosSyncing=false;
2026-04-02 20:07:12 +08:00
function syncToCOS(works){
clearTimeout(cosSyncTimer);
cosSyncTimer=setTimeout(function(){
2026-04-02 20:11:11 +08:00
if(!usr.id||cosSyncing)return;
cosSyncing=true;
2026-04-02 20:07:12 +08:00
fetch('/api/cos/sync-works',{
method:'POST',
headers:{'Content-Type':'application/json'},
body:JSON.stringify({userId:usr.id,works:works})
2026-04-02 20:11:11 +08:00
}).then(function(){cosSyncing=false}).catch(function(){cosSyncing=false});
2026-04-02 20:07:12 +08:00
},10000);
}
// 启动时尝试从COS恢复（ ）
async function tryLoadFromCOS(){
try{
var res=await fetch('/api/cos/load-works?userId='+encodeURIComponent(usr.id),{signal:AbortSignal.timeout(5000)});
var data=await res.json();
if(data.works& & data.works.length>0){
var local=loadWorks();
// COS有数据且本地为空时恢复
if(local.length===0){
saveWorks(data.works);
}
}
}catch(e){/* 离线时使用本地数据 */}
}
tryLoadFromCOS();
/* ════════════════════════════════════════
MONITOR
════════════════════════════════════════ */
2026-04-03 01:00:39 +08:00
/* ════════════════════════════════════════
MONITOR (draggable + toggle)
════════════════════════════════════════ */
(function(){
var mon=document.getElementById('mon');
if(!mon)return;
var isDrag=false,hasMoved=false;
var startX,startY,monX,monY;
// Restore position
try{
var pos=JSON.parse(localStorage.getItem('hl-mon-pos'));
if(pos& & typeof pos.x==='number'){
var ww=window.innerWidth,wh=window.innerHeight;
var mw=mon.offsetWidth||80,mh=mon.offsetHeight||30;
if(pos.x>=0& & pos.x< =ww-mw& & pos.y>=0& & pos.y< =wh-mh){
mon.style.right='auto';mon.style.top='auto';
mon.style.left=pos.x+'px';mon.style.top=pos.y+'px';
}
}
}catch(e){}
function getXY(e){return e.touches?{x:e.touches[0].clientX,y:e.touches[0].clientY}:{x:e.clientX,y:e.clientY}}
function onStart(e){
isDrag=true;hasMoved=false;
var xy=getXY(e);
var rect=mon.getBoundingClientRect();
startX=xy.x-rect.left;startY=xy.y-rect.top;
monX=rect.left;monY=rect.top;
mon.style.transition='none';
}
function onMove(e){
if(!isDrag)return;
var xy=getXY(e);
var nx=xy.x-startX,ny=xy.y-startY;
if(!hasMoved&&Math.abs(nx-monX)<5&&Math.abs(ny-monY)<5)return;
hasMoved=true;
e.preventDefault();
var mw=mon.offsetWidth,mh=mon.offsetHeight;
monX=Math.max(0,Math.min(window.innerWidth-mw,nx));
monY=Math.max(0,Math.min(window.innerHeight-mh,ny));
mon.style.right='auto';
mon.style.left=monX+'px';mon.style.top=monY+'px';
}
function onEnd(){
if(!isDrag)return;
isDrag=false;
mon.style.transition='all .3s';
if(hasMoved){
try{localStorage.setItem('hl-mon-pos',JSON.stringify({x:monX,y:monY}))}catch(e){}
}
}
mon.addEventListener('touchstart',onStart,{passive:true});
document.addEventListener('touchmove',onMove,{passive:false});
document.addEventListener('touchend',onEnd);
mon.addEventListener('mousedown',function(e){if(e.button===0)onStart(e)});
document.addEventListener('mousemove',onMove);
document.addEventListener('mouseup',onEnd);
mon.onclick=function(e){
if(hasMoved){hasMoved=false;return}
this.classList.toggle('x');
};
})();
2026-04-02 20:07:12 +08:00
async function checkConn(){
try{var t=performance.now();var r=await fetch('/api/health',{signal:AbortSignal.timeout(4000)});var ms=Math.round(performance.now()-t);
document.getElementById('mN').textContent=ms+'ms';document.getElementById('mN').style.color=ms< 500 ? ' var ( --ok ) ' : ' var ( --warn ) ' ;
}catch(e){document.getElementById('mN').textContent='离线';document.getElementById('mN').style.color='var(--err)'}
}
checkConn();setInterval(checkConn,30000);
2026-04-02 22:46:40 +08:00
/* ════════════════════════════════════════
DRAGGABLE FAB (touch+mouse · 位置记忆 · 边缘吸附)
════════════════════════════════════════ */
(function(){
var fab=document.getElementById('chatFab');
var isDrag=false,hasMoved=false;
var startX,startY,fabX,fabY;
var fabW=50,fabH=50;
// Restore saved position
try{
var pos=JSON.parse(localStorage.getItem('hl-fab-pos'));
if(pos& & typeof pos.x==='number'& & typeof pos.y==='number'){
var ww=window.innerWidth,wh=window.innerHeight;
if(pos.x>=0& & pos.x< =ww-fabW& & pos.y>=0& & pos.y< =wh-fabH){
fab.style.right='auto';fab.style.bottom='auto';
fab.style.left=pos.x+'px';fab.style.top=pos.y+'px';
}
}
}catch(e){}
function getXY(e){
if(e.touches)return{x:e.touches[0].clientX,y:e.touches[0].clientY};
return{x:e.clientX,y:e.clientY};
}
function onStart(e){
isDrag=true;hasMoved=false;
var xy=getXY(e);
var rect=fab.getBoundingClientRect();
startX=xy.x-rect.left;startY=xy.y-rect.top;
fabX=rect.left;fabY=rect.top;
fab.style.transition='none';
}
function onMove(e){
if(!isDrag)return;
var xy=getXY(e);
var nx=xy.x-startX,ny=xy.y-startY;
if(!hasMoved&&Math.abs(nx-fabX)<5&&Math.abs(ny-fabY)<5)return;
hasMoved=true;
e.preventDefault();
fabX=Math.max(0,Math.min(window.innerWidth-fabW,nx));
fabY=Math.max(0,Math.min(window.innerHeight-fabH,ny));
fab.style.right='auto';fab.style.bottom='auto';
fab.style.left=fabX+'px';fab.style.top=fabY+'px';
}
function onEnd(){
if(!isDrag)return;
isDrag=false;
fab.style.transition='all .3s cubic-bezier(.4,0,.2,1)';
if(hasMoved){
// Edge snapping: snap to nearest horizontal edge
var midX=window.innerWidth/2;
fabX=fabX< midX ? 14:window . innerWidth-fabW-14 ;
fabY=Math.max(60,Math.min(window.innerHeight-fabH-20,fabY));
fab.style.left=fabX+'px';fab.style.top=fabY+'px';
try{localStorage.setItem('hl-fab-pos',JSON.stringify({x:fabX,y:fabY}))}catch(e){}
}
}
fab.addEventListener('touchstart',onStart,{passive:true});
document.addEventListener('touchmove',onMove,{passive:false});
document.addEventListener('touchend',onEnd);
fab.addEventListener('mousedown',function(e){if(e.button===0)onStart(e)});
document.addEventListener('mousemove',onMove);
document.addEventListener('mouseup',onEnd);
// Override click to prevent toggle when dragging
var origToggle=function(){
chatOpen=!chatOpen;
chatP.classList.toggle('open',chatOpen);
fab.classList.toggle('on',chatOpen);
fab.textContent=chatOpen?'✕':'💬';
if(chatOpen)setTimeout(function(){chatIn.focus()},200);
};
fab.onclick=function(e){
if(hasMoved){hasMoved=false;return}
origToggle();
};
})();
/* ════════════════════════════════════════
SYSTEM STATUS (左面板实时数据)
════════════════════════════════════════ */
async function loadSysStatus(){
2026-04-03 01:00:39 +08:00
var sEl=document.getElementById('sysStatus');
var lEl=document.getElementById('sysLatency');
var uEl=document.getElementById('sysUptime');
var wfEl=document.getElementById('sysWorkflows');
var modEl=document.getElementById('sysModules');
var cosEl=document.getElementById('sysCos');
2026-04-02 22:46:40 +08:00
try{
var t=performance.now();
var r=await fetch('/api/health',{signal:AbortSignal.timeout(5000)});
var ms=Math.round(performance.now()-t);
var data=await r.json();
if(sEl){sEl.textContent='🟢 在线';sEl.className='panel-value ok'}
if(lEl){lEl.textContent=ms+'ms';lEl.className='panel-value '+(ms< 500 ? ' ok ' : ' warn ' ) }
if(uEl){
var um=Math.floor(data.uptime/60);
var uh=Math.floor(um/60);
uEl.textContent=uh>0?uh+'h '+um%60+'m':um+'分钟';
}
2026-04-03 01:00:39 +08:00
// Real data from server if available
if(wfEl){wfEl.textContent=data.workflows?data.workflows:'无法获取';wfEl.className='panel-value '+(data.workflows?'ok':'')}
if(modEl){modEl.textContent=data.modules?data.modules:'无法获取';modEl.className='panel-value '+(data.modules?'ok':'')}
if(cosEl){
if(data.cos){cosEl.textContent=data.cos;cosEl.className='panel-value ok'}
else{cosEl.textContent='无法确认';cosEl.className='panel-value warn'}
}
2026-04-02 22:46:40 +08:00
}catch(e){
if(sEl){sEl.textContent='🔴 离线';sEl.className='panel-value err'}
2026-04-03 01:00:39 +08:00
if(lEl){lEl.textContent='—';lEl.className='panel-value err'}
if(uEl){uEl.textContent='—';uEl.className='panel-value'}
if(wfEl){wfEl.textContent='无法连接';wfEl.className='panel-value err'}
if(modEl){modEl.textContent='无法连接';modEl.className='panel-value err'}
if(cosEl){cosEl.textContent='无法连接';cosEl.className='panel-value err'}
2026-04-02 22:46:40 +08:00
}
}
loadSysStatus();
2026-04-03 01:00:39 +08:00
setInterval(loadSysStatus,30000);
2026-04-02 22:46:40 +08:00
/* ════════════════════════════════════════
BULLETIN & TICKER (动态公告)
════════════════════════════════════════ */
async function loadBulletin(){
try{
var r=await fetch('/api/system/bulletin',{signal:AbortSignal.timeout(5000)});
var data=await r.json();
// Ticker
var ticker=document.getElementById('ticker');
if(ticker& & data.updates& & data.updates.length>0){
var h='';
data.updates.forEach(function(u){h+='< span > < em > 📡< / em > '+esc(u.version)+' '+esc(u.title)+'< / span > '});
h+='< span > < em > ✍️< / em > 码字工作台 Beta 内测中< / span > ';
ticker.innerHTML=h+h; // Duplicate for seamless scroll
}
// Version badge
if(data.system& & data.system.version){
var vEl=document.getElementById('homeVer');
if(vEl)vEl.textContent='AGE OS '+data.system.version;
}
// Left panel updates
if(data.updates){
var uEl=document.getElementById('sysUpdates');
if(uEl)uEl.innerHTML=data.updates.slice(0,3).map(function(u){
return '< div class = "panel-item" > < div class = "panel-label" > '+esc(u.version)+' · '+esc(u.date)+'< / div > < div style = "font-size:11px" > '+esc(u.title)+'< / div > < / div > ';
}).join('');
}
}catch(e){/* Use hardcoded ticker content */}
}
loadBulletin();
/* ════════════════════════════════════════
FEEDBACK / 留言板
════════════════════════════════════════ */
function renderFeedback(){
var el=document.getElementById('fbList');
if(!el)return;
el.innerHTML='< div style = "text-align:center;padding:16px;color:var(--muted);font-size:12px" > 加载中…< / div > ';
fetch('/api/feedback',{signal:AbortSignal.timeout(5000)}).then(function(r){return r.json()}).then(function(data){
var items=data.feedback||[];
if(items.length===0){
el.innerHTML='< div class = "empty" > < em > 📮< / em > 还没有留言< br > < br > 说点什么吧< / div > ';
return;
}
el.innerHTML=items.slice(0,20).map(function(fb){
var st=fb.status==='replied'?'< span class = "fb-status replied" > 已回复< / span > ':'< span class = "fb-status pending" > 待回复< / span > ';
var rp=fb.reply?'< div class = "fb-reply" > ↩ '+esc(fb.reply)+'< / div > ':'';
return '< div class = "card fb-item" > '+
'< div style = "font-size:13px" > '+esc(fb.message)+'< / div > '+
'< div class = "fb-meta" > < span > '+esc(fb.name||'匿名')+'< / span > '+st+'< span > '+esc((fb.timestamp||'').slice(0,10))+'< / span > < / div > '+
rp+'< / div > ';
}).join('');
}).catch(function(){
el.innerHTML='< div class = "empty" > < em > 📡< / em > 服务器不在线< br > 留言功能需要后端支持< / div > ';
});
}
document.getElementById('fbSend').onclick=function(){
var msg=document.getElementById('fbMsg').value.trim();
if(!msg){document.getElementById('fbMsg').focus();return}
var btn=this;btn.disabled=true;btn.textContent='提交中…';
fetch('/api/feedback',{
method:'POST',
headers:{'Content-Type':'application/json'},
body:JSON.stringify({name:usr.name||'匿名来客',message:msg,userId:usr.id})
}).then(function(r){return r.json()}).then(function(data){
btn.disabled=false;btn.textContent='提交留言';
if(data.success){
document.getElementById('fbMsg').value='';
chatMsg('留言已提交 ✅ 冰朔会看到的','b',{m:'铸渊',t:'本地'});
renderFeedback();
}
}).catch(function(){
btn.disabled=false;btn.textContent='提交留言';
chatMsg('留言提交失败，服务器不在线','b',{m:'铸渊',t:'本地'});
});
};
2026-04-02 20:07:12 +08:00
/* ════════════════════════════════════════
UTILS
════════════════════════════════════════ */
function esc(s){if(!s)return'';var d=document.createElement('div');d.textContent=s;return d.innerHTML}
})();
< / script >
< / body >
< / html >
