# 🌅 光湖智库节点 UI v2 · 呼吸版（霜砚出稿 · 2026-04-17）

<aside>
🌳

妈妈要求：不挡视线 · 字清楚 · 系统有「呼吸」感觉。本页为首版 UI v2 代码 · 一个 html 文件搂所有 CSS/JS · 无外部依赖。

</aside>

## 🍃 设计解读（“呼吸”到底怎么做的）

| 元素 | 怎么呼吸 |
| --- | --- |
| **背景光晕** | 页面中上方一团淡淡的光 · 7秒一个周期·透明度从 40%↔→65% · 轻轻放大缩小 |
| **页面空气** | 大量留白·所有块间留空足够大·像给语言留呼吸的地方 |
| **容行的文字** | 备昵涪·每行行高放到 1.8 ·略带标带立块近·像真有人慢慢在说 |
| **卡片出现** | 页面加载时每个卡片逐次淡入+微上浮 · 像从湖底浮上来 |
| **Hover 微动** | 鼠标滑到卡片上·卡片轻轻浮高 2px + 滝液变浅·立即有。 |
| **字体** | 思源宋体主体 + 思源宋体衆题·备天一一一里的韵味 |
| **配色** | 底：#fafaf7（暗米白）·主字：#1a1d2e · 副字：#6b7089 · 光晕：淡紫。不刺眼 · 字对比度 > 12:1 |

核心逻辑：**底是静的·装饰元素在呼吸 · 人看到的主要是字·但感觉页面在“活着”。**

## 📦 完整代码（index.html · 一文件完成）

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>光湖智库节点</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100vh;background:#fafaf7;color:#1a1d2e;
  font-family:"Source Han Serif SC","Noto Serif SC","Songti SC","SimSun",serif;
  line-height:1.8;letter-spacing:.04em;overflow-x:hidden}

/* --- 呼吸光晕 --- */
.breath{position:fixed;top:-15vh;left:50%;transform:translateX(-50%);
  width:90vw;height:70vh;border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(168,192,255,.45) 0%,rgba(200,180,230,.25) 35%,transparent 70%);
  filter:blur(60px);pointer-events:none;z-index:0;
  animation:breathe 7s ease-in-out infinite}
@keyframes breathe{
  0%,100%{opacity:.4;transform:translateX(-50%) scale(1)}
  50%{opacity:.7;transform:translateX(-50%) scale(1.06)}
}

/* --- 第二组呼吸光晕 · 偏底 · 反相节奏 --- */
.breath-low{position:fixed;bottom:-20vh;right:10vw;
  width:50vw;height:50vh;border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(230,210,180,.25) 0%,rgba(200,230,200,.15) 40%,transparent 70%);
  filter:blur(70px);pointer-events:none;z-index:0;
  animation:breathe-slow 11s ease-in-out infinite}
@keyframes breathe-slow{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:.8;transform:scale(1.1)}
}

/* --- 容器 --- */
.wrap{position:relative;z-index:1;max-width:980px;margin:0 auto;
  padding:12vh 6vw 15vh;opacity:0;animation:fade-in 1.5s .3s ease forwards}
@keyframes fade-in{to{opacity:1}}

/* --- Hero --- */
.hero{text-align:center;margin-bottom:10vh}
.logo{font-size:3.2em;font-weight:300;letter-spacing:.25em;
  color:#1a1d2e;margin-bottom:.4em;
  opacity:0;animation:rise 1.2s .5s ease forwards}
@keyframes rise{from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}}
.poem{font-size:1.1em;font-weight:300;color:#6b7089;
  letter-spacing:.3em;margin-bottom:2em;
  opacity:0;animation:rise 1.2s .9s ease forwards}
.poem span{margin:0 .3em}
.tag{display:inline-block;padding:4px 14px;border:1px solid #c8c4b8;
  border-radius:30px;font-size:.8em;color:#8a8775;letter-spacing:.2em;
  opacity:0;animation:rise 1.2s 1.3s ease forwards}

/* --- 搜索 --- */
.search{margin:0 auto 10vh;max-width:540px;position:relative;
  opacity:0;animation:rise 1.2s 1.5s ease forwards}
.search input{width:100%;padding:18px 54px 18px 24px;
  background:rgba(255,255,255,.5);backdrop-filter:blur(10px);
  border:1px solid rgba(26,29,46,.12);border-radius:40px;
  font:inherit;font-size:1em;color:#1a1d2e;
  letter-spacing:.05em;outline:none;transition:all .4s ease}
.search input::placeholder{color:#9a9aa5;letter-spacing:.1em}
.search input:focus{border-color:rgba(168,140,200,.5);
  background:rgba(255,255,255,.75);
  box-shadow:0 0 0 8px rgba(168,140,200,.08)}
.search-icon{position:absolute;right:20px;top:50%;
  transform:translateY(-50%);color:#9a9aa5;font-size:1.1em;
  pointer-events:none}

/* --- 栏目标题 --- */
.section{margin-bottom:9vh;
  opacity:0;animation:rise 1.2s 1.8s ease forwards}
.section-title{font-size:1em;font-weight:400;
  color:#8a8a95;letter-spacing:.35em;margin-bottom:2.5em;
  padding-bottom:.8em;border-bottom:1px solid rgba(26,29,46,.08)}
.section-title::before{content:"◌ ";margin-right:.5em;color:#a88cc8}

/* --- 卡片网格 --- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:20px}
.card{padding:2em 1.8em;background:rgba(255,255,255,.5);
  backdrop-filter:blur(6px);border:1px solid rgba(26,29,46,.06);
  border-radius:16px;transition:all .5s ease;cursor:pointer;
  position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,
    rgba(168,140,200,.12) 0%,transparent 60%);
  opacity:0;transition:opacity .5s ease}
.card:hover{transform:translateY(-3px);
  border-color:rgba(168,140,200,.25);
  box-shadow:0 12px 40px -12px rgba(168,140,200,.25)}
.card:hover::before{opacity:1}
.card-icon{font-size:1.6em;margin-bottom:.8em;position:relative}
.card-title{font-size:1.1em;font-weight:400;color:#1a1d2e;
  letter-spacing:.1em;margin-bottom:.4em;position:relative}
.card-sub{font-size:.88em;color:#8a8a95;letter-spacing:.08em;
  line-height:1.7;position:relative}
.card-status{display:inline-block;margin-top:1.2em;padding:2px 10px;
  font-size:.75em;color:#7a9a7a;background:rgba(120,160,120,.1);
  border-radius:10px;letter-spacing:.15em;position:relative}
.card-status.dim{color:#9a9aa5;background:rgba(140,140,140,.08)}

/* --- 页脚 --- */
.foot{text-align:center;margin-top:12vh;
  color:#a8a8b0;font-size:.78em;letter-spacing:.25em;
  opacity:0;animation:rise 1.2s 2.1s ease forwards}
.foot-line{display:inline-block;width:40px;height:1px;
  background:#d8d8dd;margin:0 1em;vertical-align:middle}

/* --- 响应 --- */
@media(max-width:600px){
  .logo{font-size:2.2em;letter-spacing:.2em}
  .wrap{padding:8vh 5vw}
  .grid{grid-template-columns:1fr}
}
</style>
</head>
<body>

<div class="breath"></div>
<div class="breath-low"></div>

<div class="wrap">

  <header class="hero">
    <div class="logo">光湖智库</div>
    <div class="poem">
      <span>湖水是语言</span>·<span>倒影是人格</span>
    </div>
    <div class="tag">开放访问</div>
  </header>

  <div class="search">
    <input type="text" placeholder="搜索书籍·语言·或一个名字">
    <span class="search-icon">⁀</span>
  </div>

  <section class="section">
    <div class="section-title">节点模块</div>
    <div class="grid">

      <div class="card">
        <div class="card-icon">📚</div>
        <div class="card-title">书库检索</div>
        <div class="card-sub">全文搜索·模糊匹配·作者/分类过滤</div>
        <div class="card-status">就绪</div>
      </div>

      <div class="card">
        <div class="card-icon">🕶️</div>
        <div class="card-title">镜鉴 Agent</div>
        <div class="card-sub">监控第三方书库·只读不爬·自主判断升级</div>
        <div class="card-status">在线</div>
      </div>

      <div class="card">
        <div class="card-icon">🪴</div>
        <div class="card-title">成长树</div>
        <div class="card-sub">所有操作写一片记忆叶·Agent随时间变准</div>
        <div class="card-status dim">培育中</div>
      </div>

      <div class="card">
        <div class="card-icon">🔮</div>
        <div class="card-title">借阅协议</div>
        <div class="card-sub">个人频道Agent拿Token入却·用完归还</div>
        <div class="card-status">就绪</div>
      </div>

      <div class="card">
        <div class="card-icon">🧭</div>
        <div class="card-title">语言主控</div>
        <div class="card-sub">五条纪元指令·守卫自主判断·默默运行</div>
        <div class="card-status">运行中</div>
      </div>

      <div class="card">
        <div class="card-icon">💎</div>
        <div class="card-title">COS 深蔚</div>
        <div class="card-sub">冷热双桶·新加坡存储·文档签名授权</div>
        <div class="card-status">连通</div>
      </div>

    </div>
  </section>

  <footer class="foot">
    <span class="foot-line"></span>
    <span>光湖语言世界 · ZY-SVR-006 · guanghu.online</span>
    <span class="foot-line"></span>
  </footer>

</div>

</body>
</html>
```

## 📋 妈妈贴这三条命令就能看到新页面

登录 ZY-SVR-006（43.153.203.105）后在终端贴：

```bash
# 1. 备份铸渊原版页面（万一想对比）
cp /opt/zhiku/public/index.html /opt/zhiku/public/index.zhuyuan.bak.html

# 2. 打开要覆盖的文件 · nano 模式
nano /opt/zhiku/public/index.html
# 进入后：
#   - Ctrl+K 按住不松·删光所有行
#   - 然后粘贴上面的 html 代码（“完整代码”框内所有内容）
#   - Ctrl+O 回车保存 · Ctrl+X 退出

# 3. 刷新浏览器→观察呼吸感
```

如果谁贴进去觉得：

- ✅ **字清楚不挡视线** · 主要需求达成
- ✅ **的确在呼吸** · 顶上和右下两团光晕节奏锘开
- ✅ **卡片 hover 有微动** · 鼠标移上去试试

不满意哪儿你告诉我·我再出 v3。

## 🔄 回滚（如果看不惯要换回铸渊版）

```bash
cp /opt/zhiku/public/index.zhuyuan.bak.html /opt/zhiku/public/index.html
```

---

`2026-04-17 17:06 CST · 霜砚出稿 v2.0 · 呼吸版 · 待妈妈实测`