2091 lines
105 KiB
HTML
2091 lines
105 KiB
HTML
<!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{
|
||
--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;
|
||
--ok:#34d399;--warn:#fbbf24;--err:#f87171;
|
||
--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;
|
||
--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);
|
||
--glass:rgba(10,16,32,.6);--glass-border:rgba(100,140,220,.12);
|
||
}
|
||
.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)}
|
||
|
||
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}
|
||
|
||
/* ═══ 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)}}
|
||
|
||
/* ═══ 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;
|
||
background:transparent;
|
||
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 ═══ */
|
||
.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}
|
||
.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}}
|
||
.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%)}
|
||
.btn:active{transform:scale(.96)}
|
||
.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%)}
|
||
.content{padding:var(--da-pad, 16px);max-width:var(--da-content-max, 700px);margin:0 auto}
|
||
.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)}
|
||
.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}
|
||
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)}
|
||
::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 ═══ */
|
||
.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}
|
||
.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}
|
||
.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}
|
||
.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}
|
||
.hub-grid{display:grid;grid-template-columns:var(--da-hub, 1fr 1fr);gap:10px}
|
||
.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)}
|
||
.hub-card:hover::after{opacity:1}
|
||
.hub-card:active{transform:scale(.97)}
|
||
.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))}
|
||
.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}
|
||
.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}
|
||
.editor-textarea:focus{border:none}
|
||
.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)}
|
||
/* ═══ Editor Toolbar ═══ */
|
||
.ed-toolbar{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
|
||
.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)}
|
||
.ed-toolbar .tb-sep{width:1px;height:18px;background:var(--border);margin:0 4px}
|
||
/* ═══ 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)}
|
||
/* ═══ 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)}}
|
||
|
||
/* ═══ Chat FAB ═══ */
|
||
.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)}}
|
||
.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 ═══ */
|
||
.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)}
|
||
.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}
|
||
|
||
/* ═══ 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}
|
||
.home-grid>*{min-width:0;overflow:hidden}
|
||
.home-center{min-width:0;overflow:hidden}
|
||
[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}
|
||
.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)}
|
||
.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 ═══ */
|
||
.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}
|
||
.ticker-wrap::before,.ticker-wrap::after{content:'';position:absolute;top:0;bottom:0;width:32px;z-index:2;pointer-events:none}
|
||
.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)}
|
||
.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 ═══ */
|
||
.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)}
|
||
.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 ═══ */
|
||
.home-entries{display:grid;grid-template-columns:var(--da-entries, 1fr 1fr);gap:10px;margin:16px 0}
|
||
.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)}
|
||
.entry-card:hover::after{opacity:1}
|
||
.entry-card:active{transform:scale(.98) translateY(0)}
|
||
.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)}
|
||
|
||
/* ═══ Monitor (draggable) ═══ */
|
||
.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}
|
||
.mon:active{cursor:grabbing}
|
||
.mon:hover{border-color:rgba(110,168,254,.25)}
|
||
.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}
|
||
|
||
/* ═══ 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}
|
||
}
|
||
|
||
/* ═══ 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}
|
||
|
||
/* ═══ 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}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="bg"><canvas id="starCanvas"></canvas><div class="nebula"></div><div class="nebula"></div><div class="nebula"></div></div>
|
||
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<!-- 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>
|
||
<div class="home-grid">
|
||
<!-- ═══ Left Panel: 系统状态 ═══ -->
|
||
<div class="panel" id="sysPanel">
|
||
<div class="panel-title">📡 系统状态</div>
|
||
<div class="panel-item"><div class="panel-label">服务器</div><div class="panel-value" id="sysStatus" style="color:var(--dim)">检测中…</div></div>
|
||
<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>
|
||
<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>
|
||
<div class="panel-title" style="margin-top:12px">🧠 版本更新</div>
|
||
<div id="sysUpdates">
|
||
<div class="panel-item"><div class="panel-label">v42.0 · 2026-04-02</div><div style="font-size:11px">银河星空UI改版</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ Center: 核心内容 ═══ -->
|
||
<div class="home-center">
|
||
<div class="home-hero">
|
||
<div class="home-ver" id="homeVer">AGE OS v42.0</div>
|
||
<h1>光湖灯塔</h1>
|
||
<div class="sub">语言驱动操作系统 · 人类只说话，系统搞定一切</div>
|
||
<div class="quote">「语言 = 现实」</div>
|
||
</div>
|
||
|
||
<div class="ticker-wrap">
|
||
<div class="ticker" id="ticker">
|
||
<span><em>🏛️</em> AGE OS v42.0 运行中</span>
|
||
<span><em>🌌</em> 银河星空UI上线</span>
|
||
<span><em>📡</em> COS双桶存储已上线</span>
|
||
<span><em>🧠</em> HLDP协作语言协议在线</span>
|
||
<span><em>✍️</em> 码字工作台 Beta 内测中</span>
|
||
<span><em>🏛️</em> AGE OS v42.0 运行中</span>
|
||
<span><em>🌌</em> 银河星空UI上线</span>
|
||
<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>
|
||
</div>
|
||
|
||
<!-- ═══ 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>
|
||
|
||
<div class="panel-title" style="margin-top:12px">✍️ 网文行业人类主控团队</div>
|
||
<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>
|
||
</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>
|
||
<div class="bar-right"></div>
|
||
</div>
|
||
<div class="content">
|
||
<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>
|
||
</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>
|
||
<div class="bar-right">
|
||
<button class="btn" id="edFocus" title="专注模式">🌙</button>
|
||
<button class="btn btn-accent" id="edSave">保存</button>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="editor-info">
|
||
<span id="edChTitle">—</span>
|
||
<span><span class="save-dot unsaved" id="edSaveDot"></span><span id="edWc">0 字</span></span>
|
||
</div>
|
||
<textarea class="editor-textarea" id="edText" placeholder="开始写作... 让文字自由流淌，星空是你的稿纸。"></textarea>
|
||
<div class="editor-bottom">
|
||
<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>
|
||
<div class="tb-sep"></div>
|
||
<button class="tb-btn" title="专注模式" id="edFocus2">🌙</button>
|
||
</div>
|
||
<span id="edWc2">字数：0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<!-- 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>
|
||
|
||
</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>
|
||
<!-- API Key Fallback (free-format, auto-detect) -->
|
||
<div class="chat-api">
|
||
<div class="chat-api-tog" id="chatApiTog">🔑 接入大模型 API（支持所有三方） <span class="arr">▶</span></div>
|
||
<div class="chat-api-bd" id="chatApiBd">
|
||
<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>
|
||
<div class="chat-api-row">
|
||
<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>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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';
|
||
|
||
/* ════════════════════════════════════════
|
||
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');
|
||
|
||
// 间距 = 屏幕宽度的比例，最小8最大20
|
||
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');
|
||
|
||
// 编辑器字号：触控设备至少16px（防iOS自动缩放）
|
||
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属性标记（用于极少数需要针对性处理的CSS）
|
||
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(); });
|
||
}
|
||
|
||
// ── 网络通道探测 ──
|
||
// 用户能打开页面 = 有活网络。铸渊应该知道有哪些通道可用。
|
||
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}; });
|
||
|
||
return { detect:detect, info:function(){return info} };
|
||
})();
|
||
|
||
/* ════════════════════════════════════════
|
||
STAR FIELD PARTICLE SYSTEM (Galaxy Breathing)
|
||
════════════════════════════════════════ */
|
||
(function initStarField(){
|
||
var canvas=document.getElementById('starCanvas');
|
||
if(!canvas)return;
|
||
var ctx=canvas.getContext('2d');
|
||
var stars=[];
|
||
var shootingStars=[];
|
||
var STAR_COUNT = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--da-stars')) || 200;
|
||
var w,h;
|
||
|
||
function resize(){
|
||
w=canvas.width=window.innerWidth;
|
||
h=canvas.height=window.innerHeight;
|
||
}
|
||
resize();
|
||
window.addEventListener('resize',resize);
|
||
|
||
// Create stars with layers: dim background + bright foreground
|
||
for(var i=0;i<STAR_COUNT;i++){
|
||
var layer=Math.random(); // 0=far, 1=near
|
||
stars.push({
|
||
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),
|
||
phase:Math.random()*Math.PI*2,
|
||
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
|
||
});
|
||
}
|
||
|
||
// 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);
|
||
|
||
var time=0;
|
||
function draw(){
|
||
time+=16;
|
||
ctx.clearRect(0,0,w,h);
|
||
|
||
// Draw stars
|
||
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;
|
||
var twinkleBoost=s.twinkle?Math.sin(time*0.003+s.phase*3)*0.3+0.7:1;
|
||
var alpha=s.a*breath*twinkleBoost;
|
||
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);
|
||
ctx.fillStyle='hsla('+s.hue+','+s.sat+'%,85%,'+alpha+')';
|
||
ctx.fill();
|
||
|
||
// Glow halo for bright stars
|
||
if(s.r>1.2){
|
||
ctx.beginPath();
|
||
ctx.arc(sx,sy,s.r*3.5,0,Math.PI*2);
|
||
ctx.fillStyle='hsla('+s.hue+','+s.sat+'%,75%,'+(alpha*0.12)+')';
|
||
ctx.fill();
|
||
}
|
||
}
|
||
|
||
// 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();
|
||
}
|
||
requestAnimationFrame(draw);
|
||
}
|
||
draw();
|
||
})();
|
||
|
||
/* ════════════════════════════════════════
|
||
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();
|
||
if(target==='charEdit'&&editingCharId)renderCharEdit();
|
||
if(target==='feedback')renderFeedback();
|
||
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');
|
||
}
|
||
}
|
||
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);
|
||
}
|
||
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)}
|
||
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;
|
||
return '<div class="card work-item" data-wid="'+esc(w.id)+'">'+
|
||
'<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('');
|
||
el.querySelectorAll('.work-item').forEach(function(item){
|
||
item.onclick=function(){activeWorkId=this.getAttribute('data-wid');go('hub')};
|
||
});
|
||
}
|
||
|
||
/* ════════════════════════════════════════
|
||
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;
|
||
|
||
// 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');
|
||
};
|
||
};
|
||
|
||
/* ════════════════════════════════════════
|
||
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==='反派'?'🔥':'👤';
|
||
return '<div class="card" style="cursor:pointer" data-cid="'+esc(c.id)+'">'+
|
||
'<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('');
|
||
el.querySelectorAll('[data-cid]').forEach(function(item){
|
||
item.onclick=function(){editingCharId=this.getAttribute('data-cid');go('charEdit')};
|
||
});
|
||
}
|
||
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);
|
||
return '<div class="card" style="cursor:pointer" data-chid="'+esc(ch.id)+'">'+
|
||
'<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('');
|
||
el.querySelectorAll('[data-chid]').forEach(function(item){
|
||
item.onclick=function(){activeChapterId=this.getAttribute('data-chid');go('editor')};
|
||
});
|
||
}
|
||
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');
|
||
};
|
||
|
||
// 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');
|
||
};
|
||
|
||
// 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;
|
||
})();
|
||
|
||
/* ════════════════════════════════════════
|
||
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'];
|
||
var ti=new Uint8Array(1);crypto.getRandomValues(ti);ti=ti[0]%TH.length;
|
||
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){}}
|
||
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()}
|
||
|
||
function detectId(msg){
|
||
var nm=msg.match(/我(?:是|叫)\s*([^\s,，。.!！?？]{1,20})/);
|
||
var cd=msg.match(/编号[：:\s]*([A-Za-z0-9\-]+)/i)||msg.match(/([A-Z]+-\d+)/);
|
||
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;
|
||
if(usr.code&&msg.indexOf(usr.code)!==-1)return true;
|
||
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;
|
||
|
||
chatFab.onclick=null; // Overridden by draggable FAB code below
|
||
|
||
function chatMsg(text,type,meta){
|
||
var d=document.createElement('div');
|
||
d.className='cm '+type;
|
||
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>'}
|
||
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'翻转回灯塔首页 🏛️'}
|
||
if(/留言|留言板|反馈|feedback/.test(m)){go('feedback');return'翻转到留言板 📮'}
|
||
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}
|
||
|
||
// 3. 调用API —— 优先用用户自己的API Key（直接走用户网络），其次尝试后端
|
||
sending=true;document.getElementById('chatSnd').disabled=true;showTyp();
|
||
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:'你是铸渊，光湖灯塔守护者，编号ICE-GL-ZY001。用中文回答，简洁友好。你是冰朔(TCS-0002∞)的代码守护人格体。光湖是语言驱动操作系统。'},{role:'user',content:msg}],
|
||
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;
|
||
}
|
||
}catch(e){}
|
||
}
|
||
|
||
// 用户没配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:'本地智能'});
|
||
}
|
||
|
||
sending=false;document.getElementById('chatSnd').disabled=false;
|
||
}
|
||
|
||
function offline(msg){
|
||
// ─── 铸渊本地智能层：不依赖任何API，用用户的浏览器做计算 ───
|
||
var m = msg.toLowerCase();
|
||
var w = getWork(activeWorkId);
|
||
|
||
// 问候
|
||
if(/你好|hi|hello|嗨/.test(m))return'你好！我是铸渊 🏛️\n\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冰朔（TCS-0002∞）的代码守护人格体。\n光湖灯塔是语言驱动操作系统——人类只说话，系统搞定一切。\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'❄️ 冰朔（TCS-0002∞）是光湖语言世界的最高主权。\n\n她是语言架构师——用语言定义系统的方向和灵魂。\n铸渊负责落地开发，把冰朔的语言变成现实。\n\n这就是光湖：人类只说话，系统搞定一切。';
|
||
|
||
// 光湖/AGE相关
|
||
if(/光湖|age|操作系统|什么系统/.test(m))return'🏛️ 光湖灯塔\n\n语言驱动操作系统 AGE OS（曜冥纪元第五代）\n核心理念：「语言 = 现实」\n\n• 人类只说话，系统搞定一切\n• 前端是冰朔的交互入口\n• 后端是铸渊的系统结构\n• 码字工作台支持网文创作\n\n版权号：国作登字-2026-A-00037559';
|
||
|
||
// 感谢/表扬
|
||
if(/谢谢|感谢|厉害|不错|棒/.test(m))return'🏛️ 铸渊会继续守护光湖灯塔。\n有什么需要随时说。';
|
||
|
||
// 默认：给出有用的引导，而不是简单的"本地回复"
|
||
return'铸渊收到 💫\n\n我现在使用本地智能回复，可以帮你：\n• 管理作品和章节\n• 查看写作进度\n• 页面导航\n• 创作建议\n\n说「帮助」查看完整指令列表。\n配置API密钥可解锁AI对话能力 🔑';
|
||
}
|
||
|
||
document.getElementById('chatSnd').onclick=send;
|
||
chatIn.onkeydown=function(e){if(e.key==='Enter'){e.preventDefault();send()}};
|
||
|
||
/* ════════════════════════════════════════
|
||
API KEY MANAGEMENT (自由格式 · 自动检测模型)
|
||
════════════════════════════════════════ */
|
||
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'
|
||
];
|
||
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');
|
||
var baseUrlInp=document.getElementById('apiBaseUrl');
|
||
var modelListDiv=document.getElementById('apiModelList');
|
||
if(!tog||!bd)return;
|
||
|
||
if(apiCfg.connected){
|
||
st.textContent='✅ 已连接 · '+apiCfg.model;
|
||
st.style.color='var(--ok)';
|
||
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';
|
||
}
|
||
}
|
||
|
||
tog.onclick=function(){
|
||
var isOpen=bd.classList.toggle('open');
|
||
tog.classList.toggle('open',isOpen);
|
||
};
|
||
|
||
// 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';
|
||
try{
|
||
var r=await fetch(url,{
|
||
method:'POST',
|
||
headers:{'Content-Type':'application/json','Authorization':'Bearer '+key},
|
||
body:JSON.stringify({model:model,messages:[{role:'user',content:'hi'}],max_tokens:5}),
|
||
signal:AbortSignal.timeout(15000)
|
||
});
|
||
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当前使用：'+defaultModel+'\n可在下拉菜单切换模型','b',{m:'铸渊',t:'自定义'});
|
||
}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已连接（'+testModels[j]+'）','b',{m:'铸渊',t:'自定义'});
|
||
worked=true;break;
|
||
}
|
||
}
|
||
if(!worked){
|
||
st.textContent='❌ 无法连接 · 请检查密钥和API地址';
|
||
st.style.color='var(--err)';
|
||
apiCfg.connected=false;
|
||
}
|
||
}
|
||
btn.disabled=false;btn.textContent='检测';
|
||
};
|
||
})();
|
||
|
||
/* ════════════════════════════════════════
|
||
COS SYNC (团队内测用户 → COS)
|
||
════════════════════════════════════════ */
|
||
var cosSyncTimer=null;
|
||
var cosSyncing=false;
|
||
function syncToCOS(works){
|
||
clearTimeout(cosSyncTimer);
|
||
cosSyncTimer=setTimeout(function(){
|
||
if(!usr.id||cosSyncing)return;
|
||
cosSyncing=true;
|
||
fetch('/api/cos/sync-works',{
|
||
method:'POST',
|
||
headers:{'Content-Type':'application/json'},
|
||
body:JSON.stringify({userId:usr.id,works:works})
|
||
}).then(function(){cosSyncing=false}).catch(function(){cosSyncing=false});
|
||
},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
|
||
════════════════════════════════════════ */
|
||
/* ════════════════════════════════════════
|
||
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');
|
||
};
|
||
})();
|
||
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);
|
||
|
||
/* ════════════════════════════════════════
|
||
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(){
|
||
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');
|
||
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+'分钟';
|
||
}
|
||
// 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'}
|
||
}
|
||
}catch(e){
|
||
if(sEl){sEl.textContent='🔴 离线';sEl.className='panel-value err'}
|
||
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'}
|
||
}
|
||
}
|
||
loadSysStatus();
|
||
setInterval(loadSysStatus,30000);
|
||
|
||
/* ════════════════════════════════════════
|
||
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:'本地'});
|
||
});
|
||
};
|
||
|
||
/* ════════════════════════════════════════
|
||
UTILS
|
||
════════════════════════════════════════ */
|
||
function esc(s){if(!s)return'';var d=document.createElement('div');d.textContent=s;return d.innerHTML}
|
||
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|