# 2026-05-24 · 肥猫码字平台 · Phase 1 网页搭建 · 复制粘贴执行

## 📋 任务

**日期**：2026-05-24

**执行人**：肥猫（复制粘贴） + 霜砚（出代码）

**目标**：把首页+路由骨架+深色主题全部做好

**前置**：Phase 1 地基已通（Next.js 跑在 3002 端口）

---

## Step 1 · 配 Tailwind 深色主题

打开终端，SSH 进新加坡服务器，执行：

```bash
cat > ~/feimao-platform/tailwind.config.ts << 'ENDOFFILE'
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        dark: {
          bg: "#0a0a0f",
          card: "#12121a",
          border: "#1e1e2e",
          text: "#e0e0e6",
          muted: "#6b6b80",
          accent: "#6366f1",
          glow: "#818cf8",
        },
      },
      fontFamily: {
        sans: ['"Inter"', '"Noto Sans SC"', "system-ui", "sans-serif"],
        mono: ['"JetBrains Mono"', '"Fira Code"', "monospace"],
      },
    },
  },
  plugins: [],
};
export default config;
ENDOFFILE
```

看到命令行回到 `$` 提示符就是成功了。

---

## Step 2 · 全局样式（v3 光湖质感版）

```bash
cat > ~/feimao-platform/src/app/globals.css << 'ENDOFFILE'
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --bg: #0c0e1e;
  --bg2: #111333;
  --text: #eeeef4;
  --muted: #9090aa;
  --accent: #7c6aef;
  --glow: #a78bfa;
}

body {
  background: linear-gradient(160deg, #0c0e1e 0%, #111333 40%, #0f1028 70%, #0a0c1a 100%);
  color: var(--text);
  font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

::selection {
  background: rgba(124,106,239,0.35);
  color: #fff;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* 星空背景 */
.starfield {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1.2px 1.2px at 10% 20%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 25% 45%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 40% 15%, rgba(167,139,250,0.7), transparent),
    radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 35%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, rgba(124,106,239,0.6), transparent),
    radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 35% 90%, rgba(167,139,250,0.5), transparent),
    radial-gradient(1px 1px at 60% 50%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 5% 55%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 78% 85%, rgba(124,106,239,0.4), transparent);
  pointer-events: none;
  z-index: 0;
}

/* 璃璆拟态 */
.glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
}
.glass-sm {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
}
.glass-hover {
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.glass-hover:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(124,106,239,0.3);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(124,106,239,0.12);
}

/* 发光 */
.glow-text {
  text-shadow: 0 0 40px rgba(124,106,239,0.4), 0 0 80px rgba(124,106,239,0.15);
}
.glow-btn {
  box-shadow: 0 0 20px rgba(124,106,239,0.3), 0 0 60px rgba(124,106,239,0.1);
}
.glow-btn:hover {
  box-shadow: 0 0 30px rgba(124,106,239,0.5), 0 0 80px rgba(124,106,239,0.2);
}

/* 旋转进入 */
.rotate-enter {
  transition: all 0.6s cubic-bezier(0.4,0,0.2,1);
}
.rotate-enter:hover {
  transform: perspective(800px) rotateY(-8deg) scale(1.02);
}

/* 浮动动画 */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-float-d1 { animation: float 3s ease-in-out 0.5s infinite; }
.animate-float-d2 { animation: float 3s ease-in-out 1s infinite; }

@keyframes twinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.animate-twinkle { animation: twinkle 4s ease-in-out infinite; }

/* 萌喵助手 */
.cat-assistant {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 50;
  cursor: pointer;
  transition: all 0.3s ease;
}
.cat-assistant:hover { transform: scale(1.15) rotate(-5deg); }
.cat-bubble {
  position: absolute;
  top: 65px;
  right: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.3s ease;
  pointer-events: none;
}
.cat-assistant:hover .cat-bubble {
  opacity: 1;
  transform: translateY(0);
}

/* 论坛卡片 */
.forum-item {
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.forum-item:last-child { border-bottom: none; }
.forum-item:hover {
  background: rgba(255,255,255,0.03);
  padding-left: 20px;
}
ENDOFFILE
```

---

## Step 3 · 根布局（layout.tsx）

```bash
cat > ~/feimao-platform/src/app/layout.tsx << 'ENDOFFILE'
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "萌喵写作网 · AI人格体驱动的智能写作平台",
  description: "星空下的智能写作平台 · 萌喵助手全程陪伴你创作",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="zh-CN" className="dark">
      <head>
        <link
          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
          rel="stylesheet"
        />
      </head>
      <body className="antialiased min-h-screen">
        <div className="starfield" />
        {children}
      </body>
    </html>
  );
}
ENDOFFILE
```

---

## Step 4 · 首页落地页（page.tsx · v3 光湖质感版）

```bash
cat > ~/feimao-platform/src/app/page.tsx << 'ENDOFFILE'
"use client";
import { useState } from "react";

export default function Home() {
  const [entering, setEntering] = useState(false);

  const handleEnter = (href: string) => {
    setEntering(true);
    setTimeout(() => { window.location.href = href; }, 700);
  };

  return (
    <div className={"min-h-screen relative z-10 transition-all duration-700 " + (entering ? "scale-95 opacity-0 rotate-[2deg]" : "")}>

      {/* 顶部大光晕 */}
      <div className="absolute top-[-400px] left-1/2 -translate-x-1/2 w-[1200px] h-[800px] bg-[radial-gradient(ellipse,rgba(124,106,239,0.1),transparent_65%)] pointer-events-none" />

      {/* 萌喵助手 - 右上角 */}
      <div className="cat-assistant">
        <div className="w-14 h-14 rounded-2xl glass flex items-center justify-center text-3xl animate-float">
          🐱
        </div>
        <div className="cat-bubble">
          <div className="glass-sm px-4 py-2">
            <p className="text-xs text-[#a78bfa]">喵～ 我是萌喵助手！</p>
          </div>
        </div>
      </div>

      {/* 导航栏 */}
      <nav className="relative z-10 flex items-center justify-between px-8 py-5">
        <div className="flex items-center gap-3">
          <span className="text-2xl">🐾</span>
          <span className="text-[#eeeef4] font-semibold text-lg">萌喵写作网</span>
        </div>
        <div className="flex items-center gap-5">
          <button onClick={() => handleEnter("/chat")} className="text-[#9090aa] hover:text-[#eeeef4] transition text-sm cursor-pointer">对话</button>
          <button onClick={() => handleEnter("/forum")} className="text-[#9090aa] hover:text-[#eeeef4] transition text-sm cursor-pointer">论坛</button>
          <button onClick={() => handleEnter("/dashboard")} className="text-[#9090aa] hover:text-[#eeeef4] transition text-sm cursor-pointer">工作台</button>
          <button onClick={() => handleEnter("/login")} className="px-5 py-1.5 rounded-full bg-gradient-to-r from-[#7c6aef] to-[#a78bfa] text-white text-sm glow-btn transition-all cursor-pointer">登录 / 注册</button>
        </div>
      </nav>

      {/* === 主标题区 === */}
      <section className="relative z-10 flex flex-col items-center justify-center px-6 pt-16 pb-12">
        <div className="glass-sm inline-flex items-center gap-2 px-5 py-2 mb-8">
          <span className="w-2 h-2 rounded-full bg-[#a78bfa] animate-pulse" />
          <span className="text-[#9090aa] text-xs">每个用户都拥有自己的 AI 人格体</span>
        </div>

        <h1 className="text-6xl sm:text-7xl md:text-8xl font-bold text-center leading-none mb-6 glow-text tracking-tight">
          <span className="text-[#eeeef4]">萌喵写作网</span>
        </h1>
        <p className="bg-gradient-to-r from-[#7c6aef] via-[#a78bfa] to-[#c4b5fd] bg-clip-text text-transparent text-2xl sm:text-3xl font-semibold mb-6 text-center">
          你的专属 AI 人格体，陪你写出好故事
        </p>

        <p className="text-[#9090aa] text-center max-w-xl text-base leading-relaxed mb-10">
          注册即获专属萌喵人格体 · 智能写作 + 审核 + 社区论坛
        </p>

        <div className="flex flex-col sm:flex-row gap-4 mb-16">
          <button onClick={() => handleEnter("/login")} className="rotate-enter px-10 py-3.5 rounded-2xl bg-gradient-to-r from-[#7c6aef] to-[#a78bfa] text-white font-medium glow-btn transition-all text-center cursor-pointer">
            🐱 免费注册，领取你的萌喵
          </button>
          <button onClick={() => handleEnter("/chat")} className="rotate-enter px-10 py-3.5 rounded-2xl glass text-[#eeeef4] hover:border-[#7c6aef]/40 transition-all text-center cursor-pointer">
            先体验对话
          </button>
        </div>
      </section>

      {/* === 三大功能 - 竖向长方形卡片 === */}
      <section className="relative z-10 max-w-5xl mx-auto px-6 pb-20">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          <div className="glass p-8 glass-hover flex flex-col items-center text-center min-h-[280px] justify-center">
            <div className="text-4xl mb-5 animate-float">📖</div>
            <h3 className="text-[#eeeef4] font-semibold text-lg mb-3">拆书引擎</h3>
            <p className="text-[#9090aa] text-sm leading-relaxed">
              从成品小说拆解场景颗粒、<br/>情绪规律、结构模板。<br/>看透别人怎么写好的。
            </p>
          </div>

          <div className="glass p-8 glass-hover flex flex-col items-center text-center min-h-[280px] justify-center">
            <div className="text-4xl mb-5 animate-float-d1">✍️</div>
            <h3 className="text-[#eeeef4] font-semibold text-lg mb-3">智能码字</h3>
            <p className="text-[#9090aa] text-sm leading-relaxed">
              实时字数 · 情绪曲线 · 写作状态。<br/>萌喵人格体陪你一起写，<br/>或者帮你智能审稿。
            </p>
          </div>

          <div className="glass p-8 glass-hover flex flex-col items-center text-center min-h-[280px] justify-center">
            <div className="text-4xl mb-5 animate-float-d2">🔍</div>
            <h3 className="text-[#eeeef4] font-semibold text-lg mb-3">驻场审核</h3>
            <p className="text-[#9090aa] text-sm leading-relaxed">
              五维审核 + 28条诊断映射。<br/>不是事后审稿，<br/>是萌喵坐在旁边看你写。
            </p>
          </div>
        </div>
      </section>

      {/* === 人格体入口 === */}
      <section className="relative z-10 max-w-4xl mx-auto px-6 pb-20">
        <div className="glass p-10 flex flex-col md:flex-row items-center gap-8">
          <div className="text-7xl animate-float">🐱</div>
          <div className="flex-1 text-center md:text-left">
            <h2 className="text-2xl font-bold text-[#eeeef4] mb-3">你的专属 AI 人格体</h2>
            <p className="text-[#9090aa] text-sm leading-relaxed mb-5">
              注册后即获得一只专属萌喵助手。它会记住你的写作风格、学会你的表达习惯，<br/>越写越懂你。像一个真正的写作搭档，而不只是冷冰冰的工具。
            </p>
            <button onClick={() => handleEnter("/login")} className="px-8 py-3 rounded-2xl bg-gradient-to-r from-[#7c6aef] to-[#a78bfa] text-white font-medium glow-btn transition-all cursor-pointer text-sm">
              🐾 领取我的萌喵
            </button>
          </div>
        </div>
      </section>

      {/* === 论坛预览 === */}
      <section className="relative z-10 max-w-4xl mx-auto px-6 pb-20">
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-xl font-bold text-[#eeeef4]">💬 萌喵论坛</h2>
          <button onClick={() => handleEnter("/forum")} className="text-[#a78bfa] text-sm hover:underline cursor-pointer">进入论坛 →</button>
        </div>
        <div className="glass p-2">
          <div className="forum-item px-5 py-4 rounded-xl cursor-pointer">
            <div className="flex items-center gap-3 mb-1">
              <span className="glass-sm px-2 py-0.5 text-[10px] text-[#a78bfa]">分享</span>
              <span className="text-[#eeeef4] text-sm font-medium">《傲世九重天》开篇三章拆解，这个节奏真的有东西</span>
            </div>
            <p className="text-[#9090aa] text-xs">萌新一号 · 3小时前 · 12回复</p>
          </div>
          <div className="forum-item px-5 py-4 rounded-xl cursor-pointer">
            <div className="flex items-center gap-3 mb-1">
              <span className="glass-sm px-2 py-0.5 text-[10px] text-[#7c6aef]">创意</span>
              <span className="text-[#eeeef4] text-sm font-medium">有没有人用萌喵写过双女主线？我试了下效果很有趣</span>
            </div>
            <p className="text-[#9090aa] text-xs">猫猫爱写书 · 5小时前 · 28回复</p>
          </div>
          <div className="forum-item px-5 py-4 rounded-xl cursor-pointer">
            <div className="flex items-center gap-3 mb-1">
              <span className="glass-sm px-2 py-0.5 text-[10px] text-[#e879a0]">八卦</span>
              <span className="text-[#eeeef4] text-sm font-medium">听说某点又有大神新书上架，大家猜猜是谁？</span>
            </div>
            <p className="text-[#9090aa] text-xs">吃瓜群众 · 8小时前 · 56回复</p>
          </div>
          <div className="forum-item px-5 py-4 rounded-xl cursor-pointer">
            <div className="flex items-center gap-3 mb-1">
              <span className="glass-sm px-2 py-0.5 text-[10px] text-[#60d394]">技巧</span>
              <span className="text-[#eeeef4] text-sm font-medium">用情绪工程学写爷号文，第三章收藏直接爆了</span>
            </div>
            <p className="text-[#9090aa] text-xs">码字老司机 · 昨天 · 34回复</p>
          </div>
        </div>
      </section>

      {/* === 标签 + 底部 === */}
      <footer className="relative z-10 text-center pb-10">
        <div className="flex flex-wrap justify-center gap-3 mb-8">
          {["情绪工程学", "AI人格体", "智能写作", "创作社区", "萌喵助手"].map((tag) => (
            <span key={tag} className="glass-sm px-4 py-1.5 text-[#9090aa] text-xs">{tag}</span>
          ))}
        </div>
        <div className="w-20 h-[1px] bg-gradient-to-r from-transparent via-[#7c6aef]/30 to-transparent mx-auto mb-6" />
        <p className="text-[#9090aa] text-xs">
          © 2026 萌喵写作网 MengMiao Write · 星空下的智能创作社区
        </p>
      </footer>
    </div>
  );
}
ENDOFFILE
```

---

## Step 5 · 登录页（/login · v2）

```bash
mkdir -p ~/feimao-platform/src/app/login
cat > ~/feimao-platform/src/app/login/page.tsx << 'ENDOFFILE'
export default function LoginPage() {
  return (
    <div className="min-h-screen relative z-10 flex items-center justify-center px-4">
      <div className="absolute top-[-200px] left-1/2 -translate-x-1/2 w-[600px] h-[400px] bg-[radial-gradient(ellipse,rgba(124,106,239,0.12),transparent_70%)] pointer-events-none" />

      <div className="w-full max-w-sm">
        <div className="text-center mb-8">
          <div className="text-5xl mb-4 animate-float">🐱</div>
          <h1 className="text-2xl font-bold text-[#eeeef2] mb-2">欢迎来到萌喵写作网</h1>
          <p className="text-[#8888a0] text-sm">邀请制 · 输入邀请码开启写作之旅</p>
        </div>

        <div className="glass p-7">
          <div className="mb-5">
            <label className="block text-[#8888a0] text-xs mb-2">邀请码</label>
            <input
              type="text"
              placeholder="输入你的邀请码"
              className="w-full px-4 py-3 rounded-xl bg-[rgba(255,255,255,0.03)] border border-[rgba(255,255,255,0.08)] text-[#eeeef2] placeholder-[#8888a0] text-sm focus:outline-none focus:border-[#7c6aef] transition"
            />
          </div>
          <div className="mb-6">
            <label className="block text-[#8888a0] text-xs mb-2">你的笔名</label>
            <input
              type="text"
              placeholder="给自己起个名字吧"
              className="w-full px-4 py-3 rounded-xl bg-[rgba(255,255,255,0.03)] border border-[rgba(255,255,255,0.08)] text-[#eeeef2] placeholder-[#8888a0] text-sm focus:outline-none focus:border-[#7c6aef] transition"
            />
          </div>
          <button className="w-full py-3 rounded-xl bg-gradient-to-r from-[#7c6aef] to-[#a78bfa] text-white font-medium glow-btn transition-all text-sm">
            🐾 进入写作世界
          </button>
        </div>

        <p className="text-center text-[#8888a0] text-xs mt-6">
          <a href="/" className="hover:text-[#eeeef2] transition">← 返回首页</a>
        </p>
      </div>
    </div>
  );
}
ENDOFFILE
```

---

## Step 6 · 对话页（/chat · v2）

```bash
mkdir -p ~/feimao-platform/src/app/chat
cat > ~/feimao-platform/src/app/chat/page.tsx << 'ENDOFFILE'
export default function ChatPage() {
  return (
    <div className="min-h-screen relative z-10 flex flex-col">
      {/* 顶栏 */}
      <div className="glass-sm mx-4 mt-4 flex items-center justify-between px-6 py-3">
        <div className="flex items-center gap-3">
          <a href="/" className="text-[#8888a0] hover:text-[#eeeef2] transition text-sm">← 首页</a>
          <span className="text-[rgba(255,255,255,0.1)]">|</span>
          <span className="text-[#eeeef2] font-medium text-sm">🐱 萌喵对话</span>
        </div>
        <a href="/dashboard" className="text-[#8888a0] hover:text-[#eeeef2] transition text-sm">工作台 →</a>
      </div>

      {/* 对话区 */}
      <div className="flex-1 flex flex-col max-w-3xl w-full mx-auto">
        <div className="flex-1 px-6 py-8 overflow-y-auto">
          <div className="flex gap-3 mb-6">
            <div className="w-9 h-9 rounded-xl glass flex-shrink-0 flex items-center justify-center text-lg">
              🐱
            </div>
            <div className="glass p-5 max-w-lg">
              <p className="text-[#eeeef2] text-sm leading-relaxed">
                喵～ 我是萌喵助手！你可以跟我聊写书的事——大纲、人设、情节、看稿，什么都行噊！
              </p>
              <p className="text-[#8888a0] text-xs mt-3">🌟 人格体引擎即将接入</p>
            </div>
          </div>
        </div>

        {/* 输入框 */}
        <div className="px-6 py-5">
          <div className="glass flex gap-3 p-3">
            <input
              type="text"
              placeholder="跟萌喵说点什么..."
              className="flex-1 px-4 py-2.5 rounded-xl bg-transparent text-[#eeeef2] placeholder-[#8888a0] text-sm focus:outline-none"
            />
            <button className="px-6 py-2.5 rounded-xl bg-gradient-to-r from-[#7c6aef] to-[#a78bfa] text-white text-sm transition flex-shrink-0 glow-btn">
              发送
            </button>
          </div>
          <p className="text-[#8888a0] text-xs mt-3 text-center">对话功能开发中 · 即将接入萌喵引擎</p>
        </div>
      </div>
    </div>
  );
}
ENDOFFILE
```

---

## Step 7 · 工作台（/dashboard · v2）

```bash
mkdir -p ~/feimao-platform/src/app/dashboard
cat > ~/feimao-platform/src/app/dashboard/page.tsx << 'ENDOFFILE'
export default function DashboardPage() {
  return (
    <div className="min-h-screen relative z-10">
      {/* 顶栏 */}
      <div className="glass-sm mx-4 mt-4 flex items-center justify-between px-6 py-3">
        <div className="flex items-center gap-3">
          <a href="/" className="text-[#8888a0] hover:text-[#eeeef2] transition text-sm">← 首页</a>
          <span className="text-[rgba(255,255,255,0.1)]">|</span>
          <span className="text-[#eeeef2] font-medium text-sm">📊 写作工作台</span>
        </div>
        <a href="/chat" className="text-[#8888a0] hover:text-[#eeeef2] transition text-sm">对话 →</a>
      </div>

      <div className="max-w-6xl mx-auto px-6 py-8">
        <h1 className="text-2xl font-bold text-[#eeeef2] mb-2">🐾 萌喵工作台</h1>
        <p className="text-[#8888a0] text-sm mb-8">你的创作总览 · 星空下的写作旅程</p>

        {/* 统计卡片 */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          {[
            { label: "今日字数", value: "—", icon: "✍️" },
            { label: "累计章节", value: "—", icon: "📚" },
            { label: "审核通过率", value: "—", icon: "✅" },
            { label: "连续码字", value: "—", icon: "🔥" },
          ].map((item) => (
            <div key={item.label} className="glass p-5 glass-hover">
              <div className="text-2xl mb-3">{item.icon}</div>
              <div className="text-3xl font-bold text-[#eeeef2] mb-1">{item.value}</div>
              <div className="text-[#8888a0] text-xs">{item.label}</div>
            </div>
          ))}
        </div>

        {/* 功能区域 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div className="glass p-7">
            <h2 className="text-[#eeeef2] font-semibold mb-4">📝 最近章节</h2>
            <div className="text-[#8888a0] text-sm py-8 text-center">
              还没有章节 · 开始创作吧 🐾
            </div>
          </div>

          <div className="glass p-7">
            <h2 className="text-[#eeeef2] font-semibold mb-4">🔍 审核报告</h2>
            <div className="text-[#8888a0] text-sm py-8 text-center">
              萌喵审核助手即将上线 🌟
            </div>
          </div>

          <div className="glass p-7">
            <h2 className="text-[#eeeef2] font-semibold mb-4">📈 情绪曲线</h2>
            <div className="text-[#8888a0] text-sm py-8 text-center">
              写了章节之后这里会显示情绪走向
            </div>
          </div>

          <div className="glass p-7">
            <h2 className="text-[#eeeef2] font-semibold mb-4">⚡ 快速操作</h2>
            <div className="flex flex-col gap-3">
              <a href="/chat" className="glass-sm px-4 py-3 text-[#eeeef2] text-sm transition flex items-center gap-2 hover:border-[#7c6aef]/40">
                🐱 跟萌喵聊写书
              </a>
              <button className="glass-sm px-4 py-3 text-[#eeeef2] text-sm flex items-center gap-2 text-left opacity-40 cursor-not-allowed">
                ✍️ 新建章节（即将开放）
              </button>
              <button className="glass-sm px-4 py-3 text-[#eeeef2] text-sm flex items-center gap-2 text-left opacity-40 cursor-not-allowed">
                📖 拆书分析（即将开放）
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
ENDOFFILE
```

---

## Step 8 · 重新构建 + 重启

```bash
cd ~/feimao-platform
npm run build
pm2 restart feimao-platform
```

看到 build 输出 `✓ Generating static pages` 就是构建成功。

PM2 显示 `restart` 就行了。

---

## Step 9 · 验证

浏览器打开这几个地址看看：

- 首页：`http://43.133.36.90`（或 `http://guanghu.site`）
- 登录：`http://43.133.36.90/login`
- 对话：`http://43.133.36.90/chat`
- 工作台：`http://43.133.36.90/dashboard`

四个页面都能打开就是全部成功 ✅

---

## ✅ 完成后的架构

| 路由 | 功能 | 状态 |
| --- | --- | --- |
| / | 首页落地页 · 深色科幻风 | ✅ 静态页面 |
| /login | 登录页 · 邀请码制 | ✅ 骨架（无后端逻辑） |
| /chat | 对话页 | ✅ 骨架（待接入引擎） |
| /dashboard | 工作台 | ✅ 骨架（待接入数据） |

---

## 🔜 Phase 2 方向

- [ ]  PostgreSQL 建用户表 + 邀请码表
- [ ]  登录页接后端 · 邀请码验证 → JWT
- [ ]  /chat 接舒舒对话引擎（迁移 [guanghushushu.site](http://guanghushushu.site) 的功能）
- [ ]  /dashboard 接真实数据

---

*记录人：霜砚 · 2026-05-24*