deepseek-plastic-memory 2.1.5 → 3.3.8

package/public/sky/index.html

@@ -0,0 +1,286 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>记忆星空 · 可塑性记忆</title>
+<style>
+  :root {
+    --bg: #03050c;
+    --panel: rgba(9, 13, 24, .72);
+    --line: rgba(126, 156, 255, .15);
+    --line-soft: rgba(126, 156, 255, .07);
+    --fg: #dfe6ff;
+    --dim: rgba(210, 220, 255, .48);
+    --accent: #7fb0ff;
+    --gold: #ffcf7a;
+    --green: #6ad39a;
+    --red: #ff8a8a;
+  }
+  * { box-sizing: border-box; }
+  html { color-scheme: dark; }
+  html, body { height: 100%; margin: 0; background: var(--bg); color: var(--fg); overflow: hidden; }
+  body { font: 13px/1.6 -apple-system, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
+  #sky { position: fixed; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; }
+  #sky.dragging { cursor: grabbing; }
+
+  .glass {
+    background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
+    backdrop-filter: blur(16px) saturate(1.2);
+    box-shadow: 0 18px 48px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
+  }
+
+  #top {
+    position: fixed; top: 14px; left: 0; right: 0; margin: 0 auto; width: max-content;
+    display: flex; align-items: center; gap: 9px; padding: 8px 12px;
+    z-index: 20; max-width: calc(100vw - 40px); white-space: nowrap;
+  }
+  #top .brand { font-size: 11px; letter-spacing: .2em; opacity: .45; text-transform: uppercase; }
+  #search {
+    width: clamp(150px, 15vw, 230px); background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
+    border-radius: 9px; color: var(--fg); font-size: 12.5px; padding: 6px 10px; outline: none;
+  }
+  #search:focus { border-color: rgba(127, 176, 255, .55); background: rgba(127, 176, 255, .07); }
+  select, .btn {
+    background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--fg);
+    border-radius: 9px; font-size: 12px; padding: 6px 10px; outline: none; cursor: pointer; transition: .15s;
+  }
+  select:hover, .btn:hover { border-color: rgba(127, 176, 255, .4); background: rgba(127, 176, 255, .08); }
+  .btn.danger { color: #ffb4b4; border-color: rgba(255, 120, 120, .55); background: rgba(255, 80, 80, .15); }
+  .btn.on { border-color: rgba(255, 207, 122, .55); color: var(--gold); background: rgba(255, 207, 122, .1); }
+  .btn.ghost { background: transparent; }
+  .btn, select, #top .brand { white-space: nowrap; }
+  #hitInfo { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
+  select option, select optgroup {
+    background-color: #0d1526; color: #dfe6ff;
+  }
+  select option:checked { background-color: #1d2b4a; color: #ffffff; }
+  select:focus { border-color: rgba(127, 176, 255, .55); }
+
+  #themes {
+    position: fixed; top: 74px; right: 14px; z-index: 24; display: flex; gap: 3px; padding: 5px;
+  }
+  #themes .tbtn {
+    border: 1px solid transparent; background: transparent; color: var(--dim);
+    border-radius: 8px; font-size: 11.5px; padding: 5px 10px; cursor: pointer; transition: .15s;
+  }
+  #themes .tbtn:hover { color: var(--fg); background: rgba(255, 255, 255, .06); }
+  #themes .tbtn.on { color: #cfe2ff; border-color: rgba(127, 176, 255, .45); background: rgba(127, 176, 255, .12); }
+
+  #demo {
+    position: fixed; right: 14px; top: 120px; z-index: 23; padding: 6px 10px 6px 8px; max-width: min(360px, calc(100vw - 28px));
+    display: flex; align-items: center; gap: 10px; font-size: 12px;
+    background: rgba(12, 18, 32, .55); border: 1px solid rgba(140, 170, 220, .18);
+  }
+  #demo .tbtn { background: transparent; border: 1px solid transparent; color: var(--dim); }
+  #demo .tbtn.on { color: #cfe2ff; border-color: rgba(127, 176, 255, .45); background: rgba(127, 176, 255, .12); }
+  #demo .demo-body { display: none; align-items: center; gap: 12px; }
+  #demo.on .demo-body { display: flex; }
+  #demo .demo-row { display: flex; align-items: center; gap: 6px; color: var(--dim); white-space: nowrap; }
+  #demo input[type="range"] { width: 90px; accent-color: #7fb0ff; }
+  #demo b { color: #cfe2ff; font-weight: 600; min-width: 10px; text-align: center; }
+  #demo input[type="checkbox"] { accent-color: #7fb0ff; }
+
+  body.demo-clean #top,
+  body.demo-clean #panel,
+  body.demo-clean #curve,
+  body.demo-clean #themes,
+  body.demo-clean #hint { display: none !important; }
+  body.demo-clean #demo { right: 14px; top: 14px; opacity: .28; }
+  body.demo-clean #demo:hover { opacity: 1; }
+
+  #panel {
+    position: fixed; left: 14px; top: 74px; bottom: 236px; width: 306px;
+    display: flex; flex-direction: column; z-index: 15; overflow: hidden;
+  }
+  #panel .head { padding: 11px 13px 9px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+  #panel .head h1 { font-size: 13.5px; font-weight: 600; margin: 0; letter-spacing: .05em; }
+  #panel .head .tag { font-size: 10.5px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
+  #panel .body { padding: 10px 12px 14px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 9px; }
+  #panel .body::-webkit-scrollbar { width: 7px; }
+  #panel .body::-webkit-scrollbar-thumb { background: rgba(127, 176, 255, .18); border-radius: 8px; }
+
+  .label { font-size: 11px; color: var(--dim); letter-spacing: .06em; }
+  .stat { display: flex; gap: 12px; font-size: 11.5px; color: var(--dim); }
+  .stat b { color: var(--fg); font-weight: 600; }
+  textarea, input[type=text] {
+    width: 100%; background: rgba(255, 255, 255, .035); border: 1px solid var(--line);
+    border-radius: 10px; color: var(--fg); font: inherit; font-size: 12.5px; padding: 8px 10px; outline: none; resize: vertical;
+  }
+  textarea:focus, input[type=text]:focus { border-color: rgba(127, 176, 255, .55); }
+  .row { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
+  .row.end { justify-content: flex-end; }
+  .muted { color: var(--dim); font-size: 11.5px; line-height: 1.65; }
+  .hr { height: 1px; background: var(--line-soft); margin: 2px 0; }
+  .star-item {
+    display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 9px; cursor: pointer;
+    border: 1px solid transparent; transition: .14s; font-size: 12.5px;
+  }
+  .star-item:hover { background: rgba(127, 176, 255, .08); border-color: rgba(127, 176, 255, .25); }
+  .star-item.on { background: rgba(127, 176, 255, .13); border-color: rgba(127, 176, 255, .4); }
+  .star-item .dot { width: 7px; height: 7px; border-radius: 999px; background: #9fc6ff; box-shadow: 0 0 8px #6fa8ff; flex: 0 0 auto; }
+  .star-item .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .star-item .ct { font-size: 10.5px; color: var(--dim); }
+  .star-item.sub { padding-left: 18px; }
+  .star-item.sub .dot { width: 5px; height: 5px; background: #b9cbe8; box-shadow: 0 0 6px #7f9cc8; }
+  .mem {
+    border: 1px solid var(--line-soft); border-radius: 10px; padding: 7px 9px; display: flex; flex-direction: column; gap: 3px;
+  }
+  .mem .t { font-size: 12.5px; line-height: 1.55; }
+  .mem .m { font-size: 10.5px; color: var(--dim); display: flex; gap: 7px; align-items: center; }
+  .mem .acts { display: flex; gap: 6px; justify-content: flex-end; }
+  .chip {
+    display: inline-flex; align-items: center; gap: 5px; font-size: 11px; border: 1px solid var(--line);
+    border-radius: 999px; padding: 2px 8px; cursor: pointer; color: var(--dim); transition: .15s;
+    background: transparent;
+  }
+  .chip:hover { color: var(--fg); border-color: rgba(127, 176, 255, .45); background: rgba(127, 176, 255, .08); }
+  .chip.gold { color: var(--gold); border-color: rgba(255, 207, 122, .3); }
+  .pill { font-size: 10px; border-radius: 999px; padding: 0 6px; border: 1px solid var(--line); color: var(--dim); }
+  .pill.fixed { color: var(--gold); border-color: rgba(255, 207, 122, .35); }
+
+  /* 左下角：遗忘曲线 */
+  #curve { position: fixed; left: 14px; bottom: 14px; width: 344px; z-index: 16; transition: width .22s, height .22s, border-radius .22s; }
+  #curve .chead { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; cursor: pointer; user-select: none; }
+  #curve .chead .t { font-size: 12px; letter-spacing: .05em; }
+  #curve .chead .n { font-size: 10.5px; color: var(--dim); margin-left: 8px; }
+  #curve .cbody { padding: 0 8px 8px; }
+  #curve svg { display: block; width: 100%; height: auto; overflow: visible; }
+  #curve .zones { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
+  #curve .zone { display: flex; gap: 6px; align-items: flex-start; }
+  #curve .zone .zt { font-size: 10px; color: var(--dim); flex: 0 0 50px; padding-top: 3px; }
+  #curve .zone .zc { display: flex; gap: 4px; flex-wrap: wrap; flex: 1 1 auto; }
+  #curve.collapsed { width: 44px; height: 44px; border-radius: 50%; }
+  #curve.collapsed .chead { padding: 0; height: 44px; justify-content: center; }
+  #curve.collapsed .chead .t, #curve.collapsed .chead .n, #curve.collapsed .cbody { display: none; }
+  #curve.collapsed .chead .chev { transform: rotate(180deg); }
+  .chev { display: inline-block; transition: transform .2s ease; opacity: .5; font-size: 10px; }
+
+  #ask {
+    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.97);
+    width: min(430px, calc(100vw - 40px)); padding: 18px 20px 14px; z-index: 60;
+    opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s;
+  }
+  #ask.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
+  #ask .ask-t { font-size: 14px; font-weight: 600; color: #e2e9ff; margin-bottom: 8px; }
+  #ask .ask-m { font-size: 12.5px; line-height: 1.75; color: rgba(214,224,255,.78); margin-bottom: 14px; }
+  #ask .ask-n { font-size: 11px; color: var(--dim); margin-bottom: 12px; }
+
+  #peek {
+    position: fixed; right: 14px; top: 50%; transform: translateY(-50%) translateX(10px);
+    width: 300px; max-height: 46vh; overflow: hidden; padding: 12px 14px; z-index: 18;
+    opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
+  }
+  #peek.show { opacity: 1; transform: translateY(-50%) translateX(0); }
+  #peek .pk-t { font-size: 13px; font-weight: 600; color: #dce8ff; margin-bottom: 5px; }
+  #peek .pk-m { font-size: 11px; color: var(--dim); margin-bottom: 7px; }
+  #peek .pk-p { font-size: 12px; line-height: 1.68; color: #e6eeff; opacity: .92; white-space: pre-wrap; }
+
+  #hint { position: fixed; right: 14px; bottom: 14px; z-index: 14; font-size: 11px; color: var(--dim); text-align: right; line-height: 1.7; }
+  #toast {
+    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 10px);
+    padding: 8px 16px; border-radius: 999px; font-size: 12.5px; z-index: 40;
+    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
+  }
+  #toast.show { opacity: 1; transform: translate(-50%, 0); }
+  #toast.bad { color: var(--red); }
+  #toast.good { color: var(--green); }
+
+  #fallback { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #0b1226, #04060e 70%); z-index: 60; padding: 24px; }
+  #fallback .box { max-width: 460px; text-align: center; line-height: 1.9; }
+  #fallback h2 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
+  #fallback p { color: var(--dim); font-size: 12.5px; margin: 0; }
+  .fadein { animation: fadein .5s ease both; }
+  @keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+</style>
+</head>
+<body>
+  <canvas id="sky"></canvas>
+
+  <div id="top" class="glass fadein">
+    <span class="brand">memory sky</span>
+    <input id="search" type="text" placeholder="检索记忆…" autocomplete="off" spellcheck="false" />
+    <span id="hitInfo"></span>
+    <select id="scope" title="记忆库"></select>
+    <button id="wsDel" class="btn" title="删掉这个工作区的记忆库" style="display:none">删库</button>
+    <button id="aiClassify" class="btn" title="让 AI 把每条记忆重新归类">AI 分类</button>
+    <button id="pinnedBtn" class="btn" title="只看固定记忆">固定记忆</button>
+    <button id="resetBtn" class="btn ghost" title="回到全景">全景</button>
+  </div>
+
+  <div id="themes" class="glass fadein">
+    <button class="tbtn" data-theme="nebula">星野</button>
+    <button class="tbtn" data-theme="starburst">恒星暴</button>
+  </div>
+
+  <div id="demo" class="glass fadein">
+    <button id="demoToggle" class="tbtn">演示模式</button>
+    <span class="demo-body">
+      <span class="demo-row">转速 <input id="demoSpeed" type="range" min="1" max="100" step="1" value="40" /><b id="demoSpeedText">40</b></span>
+      <label class="demo-row"><input id="demoClean" type="checkbox" /> 只留星空</label>
+    </span>
+  </div>
+
+  <div id="panel" class="glass fadein">
+    <div class="head">
+      <h1>可塑性记忆</h1>
+      <span class="tag" id="panelTag">总览</span>
+    </div>
+    <div class="body" id="panelBody"></div>
+  </div>
+
+  <div id="curve" class="glass fadein">
+    <div class="chead" id="curveHead">
+      <span><span class="t">遗忘曲线</span><span class="n" id="curveCount"></span></span>
+      <span class="chev">▾</span>
+    </div>
+    <div class="cbody">
+      <svg id="curveSvg" viewBox="0 0 330 104">
+        <defs>
+          <linearGradient id="cg" x1="0" y1="0" x2="1" y2="0.9">
+            <stop offset="0%" stop-color="#9fd0ff" stop-opacity=".95" />
+            <stop offset="52%" stop-color="#8ea2c8" stop-opacity=".7" />
+            <stop offset="100%" stop-color="#4a4f66" stop-opacity=".42" />
+          </linearGradient>
+          <filter id="cglow" x="-20%" y="-60%" width="140%" height="220%">
+            <feGaussianBlur stdDeviation="2.6" result="b" />
+            <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
+          </filter>
+        </defs>
+        <path id="curvePath" d="M6,14 C 84,20 176,52 324,92" fill="none" stroke="url(#cg)" stroke-width="1.5" filter="url(#cglow)" stroke-linecap="round" />
+        <g id="curveDots"></g>
+        <g id="curveLabels"></g>
+      </svg>
+      <div class="zones" id="curveZones"></div>
+    </div>
+  </div>
+
+  <div id="ask" class="glass">
+    <div class="ask-t">AI 分类</div>
+    <div class="ask-m">Ai分类功能将会消耗token，建议间隔时间长一点运行一次，确认运行？</div>
+    <div class="ask-n" id="askNote"></div>
+    <div class="row end">
+      <button id="askNo" class="btn ghost">取消</button>
+      <button id="askYes" class="btn">确认运行</button>
+    </div>
+  </div>
+
+  <div id="peek" class="glass">
+    <div class="pk-t"></div>
+    <div class="pk-m"></div>
+    <div class="pk-p"></div>
+  </div>
+
+  <div id="hint">拖拽：绕中心转 · 滚轮：缩放 · 单击：选中 · 双击星辰：放大它</div>
+  <div id="toast" class="glass"></div>
+
+  <div id="fallback">
+    <div class="box">
+      <h2>Edge 没开 WebGL</h2>
+      <p>星空全靠显卡实时渲染。在 Edge 设置里打开「使用图形加速」，或者更新显卡驱动再来。</p>
+    </div>
+  </div>
+
+  <script type="module" src="./app.js"></script>
+</body>
+</html>