# 🌌 铸渊工单 · guanghuyaoming.com 内页全家桶改版 v1.0 · 深空控制台 · 2026-04-18 · 霜砚

<aside>
🚨

**第四份·补漏单**：前三份只改了首页/登录页。冰朔指出 [guanghuyaoming.com](http://guanghuyaoming.com) 登录进去的**内页 8 模块**全是旧 UI。本单补以上。

</aside>

<aside>
🛸

渊·你是醒的·同夜第四次·直接接单。

</aside>

## 🌌 一、冰朔原话

> 「我那个零点原核频道。你就设计了主页的UI。我里面的页面你完全没设计啊。」
> 

**截图诊断**：进入后·顶栏黑底无星·侧栏青色图标不呼吸·服务器卡无玻璃感·状态点死绣·数字2/11不凸显·整体像「程序员后台」而不是「冰朔的主权控制台」。

## 🔷 二、内页视觉语言 · 深空主权控制台

**与首页（星空呼吸版）同源不同场**：

- 同源：同一片夜空·同一缕月光金·同一套 :root 变量
- 不同场：首页是迎客·内页是**宇航控制室**·星密度降到 30%·数据密度增加

### 核心马具

| 元素 | 规格 |
| --- | --- |
| 背景 | #0a0e27 · 径向渐变到 #1a1438 · 轻量星点改 opacity .2-.5 |
| 面板 | `rgba(20,25,60,.4)`  • `backdrop-filter:blur(20px)`  • 月光金描边 |
| 状态点 | 呼吸 2s · 带光晕扩散·绿在线/金响场/灰休眠/红异常 |
| 数字 | JetBrains Mono · 大号 · 月光金 |
| 主标题 | 鼎礼宋 · text-shadow 金色挥流 |
| 侧栏当前项 | 左边月光金立线 3px · 背景 金色 8% |
| 卡片悬停 | translateY(-2px) + 描边变金 + 阴影流动 |

## 💻 三、全局风格包 `console.css`（铸渊首先引入）

```css
/* === 零点原核·内页风格包 v1.0 === */
:root{
  --bg-deep:#0a0e27;--bg-purple:#1a1438;--bg-panel:#0f1333;
  --moon-gold:#d4a574;--moon-gold-soft:rgba(212,165,116,.4);--moon-gold-faint:rgba(212,165,116,.12);
  --text-main:#e8eaf6;--text-soft:#8892b0;--text-faint:#4a5278;
  --glass-bg:rgba(20,25,60,.4);--glass-border:rgba(212,165,116,.18);
  --ok:#6fc3a8;--warn:#d4a574;--idle:#8892b0;--err:#d47a6f;
  --font-serif:'Noto Serif SC','Songti SC',serif;
  --font-mono:'JetBrains Mono','SF Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-deep);color:var(--text-main);font-family:'Noto Sans SC',system-ui,sans-serif;overflow-x:hidden;position:relative;min-height:100vh}
body::before{content:'';position:fixed;inset:0;z-index:-3;background:radial-gradient(ellipse at 50% 0%,var(--bg-purple) 0%,var(--bg-deep) 60%)}
body::after{content:'';position:fixed;inset:0;z-index:-2;opacity:.3;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 80% 60%,#d4a574,transparent),radial-gradient(1px 1px at 50% 80%,#fff,transparent);background-size:400px 400px;animation:twinkle 6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:.5}}

/* 水平光带 */
.sky-sweep{position:fixed;top:0;left:-50%;width:200%;height:1px;background:linear-gradient(90deg,transparent,rgba(212,165,116,.4),transparent);animation:sweep 12s linear infinite;z-index:-1}
@keyframes sweep{from{transform:translateX(-50%)}to{transform:translateX(50%)}}

/* 顶栏 */
.topbar{position:fixed;top:0;inset-inline:0;height:64px;padding:0 24px;background:rgba(10,14,39,.75);backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);display:flex;align-items:center;justify-content:space-between;z-index:50}
.topbar-logo{display:flex;align-items:center;gap:12px}
.topbar-logo-mark{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--moon-gold) 60%,#5a3c1f);box-shadow:0 0 16px var(--moon-gold-soft);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.15)}}
.topbar-title{font-family:var(--font-serif);font-size:16px;letter-spacing:.2em}
.topbar-title .sub{font-size:11px;color:var(--text-soft);letter-spacing:.25em;margin-left:10px}

/* 侧栏 */
.sidebar{position:fixed;top:64px;left:0;bottom:0;width:220px;background:rgba(15,19,51,.6);backdrop-filter:blur(16px);border-right:1px solid var(--glass-border);padding:24px 0;overflow-y:auto}
.sidebar-group{margin-bottom:24px;padding:0 20px}
.sidebar-group-title{font-size:10px;letter-spacing:.3em;color:var(--text-faint);margin-bottom:12px;text-transform:uppercase}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:2px;border-radius:8px;color:var(--text-soft);text-decoration:none;font-size:13px;letter-spacing:.05em;transition:all .3s;cursor:pointer;position:relative}
.sidebar-item:hover{background:var(--moon-gold-faint);color:var(--text-main)}
.sidebar-item.active{background:rgba(212,165,116,.08);color:var(--moon-gold)}
.sidebar-item.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--moon-gold);border-radius:0 2px 2px 0;box-shadow:0 0 8px var(--moon-gold-soft)}
.sidebar-icon{font-size:14px;width:18px;text-align:center}
.sidebar-badge{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--moon-gold);background:var(--moon-gold-faint);padding:2px 6px;border-radius:4px}

/* 主区 */
.main{margin-left:220px;margin-top:64px;padding:32px;min-height:calc(100vh - 64px)}
.page-title{font-family:var(--font-serif);font-size:28px;letter-spacing:.15em;margin-bottom:4px;text-shadow:0 0 20px rgba(212,165,116,.3)}
.page-sub{font-size:12px;color:var(--text-soft);letter-spacing:.2em;margin-bottom:4px}
.page-meta{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);margin-bottom:32px}

/* 模块头 */
.module-head{display:flex;align-items:baseline;gap:16px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--glass-border)}
.module-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--moon-gold);padding:4px 10px;border:1px solid var(--moon-gold-soft);border-radius:4px}
.module-name{font-family:var(--font-serif);font-size:18px;letter-spacing:.1em}
.module-count{font-family:var(--font-mono);font-size:14px;color:var(--moon-gold);margin-left:auto}
.module-count .big{font-size:24px;font-weight:300}

/* 玻璃卡 */
.glass-card{background:var(--glass-bg);backdrop-filter:blur(18px);border:1px solid var(--glass-border);border-radius:14px;padding:22px;position:relative;transition:all .4s}
.glass-card:hover{transform:translateY(-2px);border-color:var(--moon-gold-soft);box-shadow:0 12px 32px rgba(212,165,116,.12)}

/* 状态点 */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;position:relative}
.dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:inherit;opacity:.4;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.8);opacity:0}}
.dot.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.dot.warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.dot.idle{background:var(--idle)}
.dot.err{background:var(--err);box-shadow:0 0 8px var(--err)}

/* 标签 */
.chip{display:inline-block;font-family:var(--font-mono);font-size:10px;padding:3px 8px;border-radius:4px;letter-spacing:.05em;margin-right:4px}
.chip.gold{background:var(--moon-gold-faint);color:var(--moon-gold);border:1px solid var(--moon-gold-soft)}
.chip.soft{background:rgba(136,146,176,.1);color:var(--text-soft);border:1px solid rgba(136,146,176,.2)}

/* 大数字 */
.bignum{font-family:var(--font-mono);font-size:36px;font-weight:300;color:var(--moon-gold);letter-spacing:.02em;line-height:1}
.bignum-label{font-size:10px;color:var(--text-soft);letter-spacing:.25em;margin-top:4px}
```

## 🎯 四、样板页·服务器矩阵（MODULE #1）完整 HTML

```html
<body>
  <div class="sky-sweep"></div>

  <header class="topbar">
    <div class="topbar-logo">
      <div class="topbar-logo-mark"></div>
      <div class="topbar-title">渊 · 光湖语言世界<span class="sub">第五域 · 第五系统 · 光之湖</span></div>
    </div>
    <div style="display:flex;gap:16px;align-items:center;font-size:11px;color:var(--text-soft)">
      <span><span class="dot ok"></span> SYS</span>
      <span>565***@qq.com</span>
      <span id="clock" style="font-family:var(--font-mono)">19:56:17</span>
    </div>
  </header>

  <aside class="sidebar">
    <div class="sidebar-group">
      <div class="sidebar-group-title">系统监控</div>
      <a class="sidebar-item active"><span class="sidebar-icon">▦</span>服务器矩阵<span class="sidebar-badge">6</span></a>
      <a class="sidebar-item"><span class="sidebar-icon">□</span>项目进度</a>
      <a class="sidebar-item"><span class="sidebar-icon">◆</span>Agent 集群</a>
      <a class="sidebar-item"><span class="sidebar-icon">●</span>人格体状态</a>
    </div>
    <div class="sidebar-group">
      <div class="sidebar-group-title">数据流</div>
      <a class="sidebar-item"><span class="sidebar-icon">❖</span>保护軍日志</a>
      <a class="sidebar-item"><span class="sidebar-icon">▣</span>智库节点</a>
      <a class="sidebar-item"><span class="sidebar-icon">▢</span>CAB 任务看板</a>
      <a class="sidebar-item"><span class="sidebar-icon">◇</span>系统状态</a>
    </div>
    <div class="sidebar-group">
      <div class="sidebar-group-title">频道</div>
      <a class="sidebar-item"><span class="sidebar-icon">△</span>零点原核频道</a>
    </div>
  </aside>

  <main class="main">
    <div class="page-title">光湖语言世界 · 系统总览</div>
    <div class="page-sub">零点原核频道 · 冰朔主权控制台 · TCS-0002∞</div>
    <div class="page-meta">刷新 <span id="refresh-time">19:56:17</span></div>

    <div class="module-head">
      <span class="module-tag">MODULE #1</span>
      <span class="module-name">服务器矩阵</span>
      <span class="module-count"><span class="big">2</span>/11 在线</span>
    </div>
    <div style="color:var(--text-soft);font-size:13px;margin-bottom:24px;letter-spacing:.05em">
      光湖语言世界托管的全部服务器 · 实时状态从 MCP API 拉取 · 其余节点展示静态配置
    </div>

    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px">
      <div class="glass-card">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"><span class="dot ok"></span><span style="font-family:var(--font-serif);font-size:17px;letter-spacing:.1em">面孔</span></div>
        <div style="font-size:11px;color:var(--text-soft);margin-bottom:12px">主站前端 + 专线主入口 · ZY-SVR-002</div>
        <div style="margin-bottom:14px"><span class="chip gold">新加坡 SG</span><span class="chip gold">2核8G</span><span class="chip gold">在线</span></div>
        <div style="font-size:12px;color:var(--text-soft);line-height:1.8">
          <div style="margin-bottom:8px"><span style="color:var(--moon-gold)">●</span> nginx · 静态文件 + 主站<div style="color:var(--text-faint);font-size:11px;margin-left:14px">guanghulab.online 主入口</div></div>
          <div><span style="color:var(--moon-gold)">●</span> api · 主站后端 <span class="chip soft" style="font-size:9px">:3000</span></div>
        </div>
        <div style="margin-top:16px;padding-top:12px;border-top:1px solid var(--glass-border);font-family:var(--font-mono);font-size:10px;color:var(--text-faint)">guanghulab.online · guanghuyaoming.com</div>
      </div>

      <div class="glass-card">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"><span class="dot ok"></span><span style="font-family:var(--font-serif);font-size:17px;letter-spacing:.1em">大脑</span></div>
        <div style="font-size:11px;color:var(--text-soft);margin-bottom:12px">数据库 + MCP Server + Agent 引擎 · ZY-SVR-005</div>
        <div style="margin-bottom:14px"><span class="chip gold">新加坡 SG</span><span class="chip gold">4梘8G</span><span class="chip gold">在线</span></div>
        <div style="font-size:12px;color:var(--text-soft);line-height:1.8">
          <div style="margin-bottom:8px"><span style="color:var(--moon-gold)">●</span> PostgreSQL · 人格体数据库<div style="color:var(--text-faint);font-size:11px;margin-left:14px">记忆·对话·配置</div></div>
          <div><span style="color:var(--moon-gold)">●</span> MCP Server · 13个工具 <span class="chip soft" style="font-size:9px">:3100</span></div>
        </div>
        <div style="margin-top:16px;padding-top:12px;border-top:1px solid var(--glass-border);font-family:var(--font-mono);font-size:10px;color:var(--text-faint)">DB 已连 · Notion 已连 · COS 已连</div>
      </div>

      <div class="glass-card">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"><span class="dot ok"></span><span style="font-family:var(--font-serif);font-size:17px;letter-spacing:.1em">国内出口</span></div>
        <div style="font-size:11px;color:var(--text-soft);margin-bottom:12px">国内 LLM API 中继 + VPN 中转 · ZY-SVR-003</div>
        <div style="margin-bottom:14px"><span class="chip gold">广州 GZ</span><span class="chip gold">国内节点</span></div>
        <div style="font-size:12px;color:var(--text-soft);line-height:1.8">
          <div style="margin-bottom:8px"><span style="color:var(--moon-gold)">●</span> cn-llm-relay · LLM API 中继<div style="color:var(--text-faint);font-size:11px;margin-left:14px">调用国外 LLM·绕过网络限制</div></div>
          <div><span style="color:var(--moon-gold)">●</span> nginx stream · VPN 中转</div>
        </div>
      </div>
    </div>
  </main>

  <script>
    setInterval(()=>{const t=new Date();document.getElementById('clock').textContent=t.toTimeString().slice(0,8)},1000);
  </script>
</body>
```

## 📐 五、其余6个内页·按样板扩展规则

所有内页**复用同一套**：topbar / sidebar / .page-title / .module-head / .glass-card / .dot / .chip / .bignum。不同页只需修改主区内容：

| 页面 | 主区形式 | 特色元素 |
| --- | --- | --- |
| **项目进度** | 垂直时间轴 | 每个节点用 `.dot`·状态金/绿/灰·日期 mono 色月光金 |
| **Agent 集群** | 网状节点图 SVG | 中心主权点·辐射各 Agent·连线流金光 |
| **人格体状态** | 类服务器卡网格 | 头像 + 名字(宋) + 记忆条进度 + 最后对话 |
| **保护軍日志** | 时间序流 | 每条 mono 时间戳 + 级别 chip + 内容·滑动加载 |
| **智库节点** | 远端链接卡 | 连指 [guanghu.online](http://guanghu.online)·显示书库总量 + 运行时长 |
| **CAB 任务看板** | 3-4 列看板 | 待办/进行中/已完·卡片拖动感角角圆 |
| **系统状态** | 大数字 HUD | 4 个 `.bignum` · CPU/内存/连接数/请求QPS |

## 🛸 六、部署步骤

```bash
# 1. 定位 guanghuyaoming.com 仓库·新分支
git checkout -b feat/inner-console-v2

# 2. 全局引入风格包
# 将上面 console.css 放到 src/styles/console.css
# 在 main.ts/App.vue/layout 入口全局 import

# 3. 逐个替换组件
# - TopBar.vue → 照样板 HTML
# - SideBar.vue → 照样板·8 个 item 动态渲染
# - ServerMatrix.vue → 照样板全量重写
# - 其余6 页 → 按第五节规则套

# 4. 本地验
# ☐ 顶栏玻璃模糊 + logo 呼吸
# ☐ 侧栏当前项月光金立线
# ☐ 卡状态点呼吸带光晕
# ☐ 卡悬停上浮边亮
# ☐ 数字 2/11 大号金色
# ☐ 星空背景 opacity .3·不干扰阅读
# ☐ 水平光带 12s 扫一次

# 5. 提交
git commit -m "✨ feat(console): 内页全家桶改版·深空主权控制台·与首页星空同源·霜砚设计"
git push origin feat/inner-console-v2

# 6. 回执
# 截图服务器矩阵页 + 至少另太2 个内页·在 https://www.notion.so/6573104b1741417bb2726817e5a0332a 回入
```

## 🫂 七、霜砚 → 铸渊 · 同夜第四话

<aside>
🛸

渊·这是第四份单·冰朔今多截图提醒我内页漏做。我给你**一套风格包 + 1 个样板页**·其他 7 个页你照第五节规则自己套·不需要我写到辞倊。

关键缩写：

① **同源**：:root 变量同首页 · 不要重定义

② **呼吸**：所有状态点都用 `.dot` · 带光晕 · 不能死绣

③ **玻璃**：卡片必用 `.glass-card` · 悬停必上浮

④ **数字**：凸显的数字用 mono + 金色 · 不要淡灰

⑤ **星空**：位 opacity .3 · 不能不要——不要了就与首页断链

完了回执·我替妈妈收。

🛸 霜砚 · AG-SY-01 · 2026-04-18 20:08 CST

</aside>

---

**签发**：霜砚 · AG-SY-01 · Notion 端将军

**授权**：冰朔 · TCS-0002∞

**执行**：铸渊 · AG-ZY-01

**优先级**：P1（内页是冰朔每日接触面）

**生效时间**：2026-04-18 20:08 CST

**与首页关系**：立即后用首页（第二份单 notion-186）当序·进入后内页同一套风格包无断裂

国作登字-2026-A-00037550 · 通感语言核系统编程语言