051da664-7c0a-4d7b-8129-36efb67f35b3

2026-06-24 01:38:08 +00:00
parent 23fb451a0b
commit 803857298f
4 changed files with 103 additions and 9 deletions
@@ -8,6 +8,7 @@
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
+  --font-display: var(--font-display);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -144,6 +145,17 @@
  -webkit-text-fill-color: transparent;
 }

+/* v0.10.1 调研落地：Orbitron 科幻显示字体工具类 */
+.font-display {
+  font-family: var(--font-display), var(--font-geist-sans), sans-serif;
+  letter-spacing: 0.02em;
+}
+/* 数值/技术文本使用 Orbitron 增强科幻感 */
+.font-tech {
+  font-family: var(--font-display), var(--font-geist-mono), monospace;
+  letter-spacing: 0.04em;
+}
+
 /* 通用脉冲 */
@keyframes echo-glow {
  0%, 100% { opacity: 0.6; }
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist, Geist_Mono, Orbitron } from "next/font/google";
 import "./globals.css";
 import { Toaster } from "@/components/ui/toaster";

@@ -13,6 +13,14 @@ const geistMono = Geist_Mono({
  subsets: ["latin"],
 });

+// v0.10.1 调研落地：Orbitron 科幻显示字体（用于标题/数值/全息UI）
+const orbitron = Orbitron({
+  variable: "--font-display",
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700", "900"],
+  display: "swap",
+});
+
 export const metadata: Metadata = {
  title: "回响星核 · Echo Nexus",
  description: "原创深空考古放置策略游戏 — 解码记忆晶体，拼凑以太文明的回响，跨越维度发起接触。",
@@ -42,7 +50,7 @@ export default function RootLayout({
  return (
    <html lang="zh-CN" suppressHydrationWarning className="dark">
      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
+        className={`${geistSans.variable} ${geistMono.variable} ${orbitron.variable} antialiased bg-background text-foreground`}
      >
        {children}
        <Toaster />
@@ -13,12 +13,14 @@ import { ExpeditionPanel } from "@/components/game/ExpeditionPanel";
 import { AchievementsPanel } from "@/components/game/AchievementsPanel";
 import { AchievementNotifier } from "@/components/game/AchievementNotifier";
 import { ConstellationPanel } from "@/components/game/ConstellationPanel";
-import { ConstellationDialog } from "@/components/game/ConstellationDialog";
-import { ChronicleDialog } from "@/components/game/ChronicleDialog";
 import { BeaconPanel } from "@/components/game/BeaconPanel";
 import { TutorialOverlay } from "@/components/game/TutorialOverlay";
-import { OfflineReportDialog } from "@/components/game/OfflineReportDialog";
-import { CruiseMode } from "@/components/game/CruiseMode";
+// v0.10.1 性能优化：重型对话框/全屏组件动态导入，减少首屏 bundle
+import dynamic from "next/dynamic";
+const ChronicleDialog = dynamic(() => import("@/components/game/ChronicleDialog").then(m => ({ default: m.ChronicleDialog })), { ssr: false });
+const ConstellationDialog = dynamic(() => import("@/components/game/ConstellationDialog").then(m => ({ default: m.ConstellationDialog })), { ssr: false });
+const OfflineReportDialog = dynamic(() => import("@/components/game/OfflineReportDialog").then(m => ({ default: m.OfflineReportDialog })), { ssr: false });
+const CruiseMode = dynamic(() => import("@/components/game/CruiseMode").then(m => ({ default: m.CruiseMode })), { ssr: false });
 import { AttributesPanel } from "@/components/game/AttributesPanel";
 import { ExplorationRadar } from "@/components/game/ExplorationRadar";
 import { RelicCodex } from "@/components/game/RelicCodex";
@@ -181,8 +183,8 @@ export default function Page() {
              </div>
            </div>
            <div className="leading-tight">
-              <h1 className="text-base sm:text-lg font-bold text-gradient">回响星核</h1>
-              <p className="text-[9px] sm:text-[10px] text-muted-foreground/70 -mt-0.5 tracking-wider">
+              <h1 className="text-base sm:text-lg font-bold text-gradient font-display">回响星核</h1>
+              <p className="text-[9px] sm:text-[10px] text-muted-foreground/70 -mt-0.5 tracking-wider font-tech">
                ECHO NEXUS · v0.10
              </p>
            </div>
@@ -271,7 +273,7 @@ export default function Page() {
            {/* 顶部状态条 */}
            <div className="pointer-events-none absolute top-2 left-1/2 -translate-x-1/2 flex items-center gap-1.5 text-[8px] font-mono text-muted-foreground/60 z-10">
              <span className="h-1 w-1 rounded-full bg-emerald-400 animate-pulse" />
-              <span>CRYSTAL CORE · ONLINE</span>
+              <span className="font-tech">CRYSTAL CORE · ONLINE</span>
              <span className="h-1 w-1 rounded-full bg-fuchsia-400 animate-pulse" />
            </div>

@@ -929,3 +929,75 @@ Stage Summary:
 - 🟡 成就系统价值化（成就解锁主动技能）— 待 v0.11
 - 🟡 VLM 建议：解码区 hover 效果 / 状态文字对比 / 星云背景
 - 🟡 部署 gh-pages
+
+---
+
+## v0.10.1 第1轮迭代循环 — 调研落地 + 性能优化（2026-01-24）
+
+### 本轮循环阶段
+- **调研主题**：放置游戏设计哲学 + 科幻字体资源 + Next.js bundle 优化
+- **工单状态**：Gitea 无 open 工单（#2 已于 v0.10 关闭）
+
+### 调研发现（附 URL）
+1. **放置游戏设计哲学**（Eric Guan - Idle Game Design Principles）
+   - URL: https://ericguan.substack.com/p/idle-game-design-principles
+   - 核心思想：idle 游戏 = 核心循环 + 暂停循环 + 回来重投资。深度来自"长目标 + 短反馈"
+   - 可落地：增加"长目标"系统（已有遗迹图鉴，可深化"文明兴衰时间线"）
+2. **Universal Paperclips 叙事深度**（New Yorker + Northeastern 论文）
+   - URL: https://www.newyorker.com/culture/culture-desk/the-unexpected-philosophical-depths-of-the-clicker-game-universal-paperclips
+   - URL: https://repository.library.northeastern.edu/files/neu:bz617n08c/fulltext.pdf
+   - 核心思想：incremental game 可以承载哲学叙事（存在主义/AI伦理/宇宙尺度）
+   - 可落地：遗迹图鉴故事碎片可增加"哲学拷问"层（如"飞升是否是逃避？"）
+3. **科幻字体资源**（Google Fonts - Orbitron）
+   - URL: https://fonts.google.com/specimen/Orbitron
+   - CC-BY 免费，几何无衬线，专为科幻 HUD 设计
+   - 已落地：集成到标题/数值/技术文本
+4. **Next.js bundle 优化**（web.dev + Medium 70% 优化案例）
+   - URL: https://web.dev/articles/code-splitting-with-dynamic-imports-in-nextjs
+   - 核心方法：next/dynamic 对按需组件动态导入，ssr:false 跳过 SSR
+   - 已落地：4 个重型对话框动态导入
+
+### 本轮目标
+1. ✅ 集成 Orbitron 科幻字体（调研资源落地）
+2. ✅ 动态导入重型对话框（性能优化）
+3. ✅ 部署 + QA 验证
+
+### 已完成的修改
+**文件变更：**
+- `src/app/layout.tsx`：新增 Orbitron 字体导入（--font-display 变量）
+- `src/app/globals.css`：新增 .font-display / .font-tech 工具类
+- `src/app/page.tsx`：
+  - 主标题 + 版本号 + 状态条应用 Orbitron
+  - ChronicleDialog/ConstellationDialog/OfflineReportDialog/CruiseMode 改为 next/dynamic 动态导入（ssr:false）
+
+### 性能优化记录
+| 指标 | 优化前 | 优化后 | 变化 |
+|------|--------|--------|------|
+| 总 bundle | 1.7M | 1.7M | 持平（字体增加抵消拆分） |
+| 主 chunk | 572K | 373K | **-199K (-35%)** |
+| 动态拆分 chunk | - | 98K（对话框独立） | 首屏不加载 |
+
+**优化方法**：next/dynamic + ssr:false 将 4 个按需对话框从主 chunk 拆出，首屏只加载核心 UI，对话框点击时才加载。
+
+### 验证结果
+- ✅ lint 零错误
+- ✅ 构建成功（4.8s 编译）
+- ✅ gh-pages 部署成功（HTTP 200）
+- ✅ VLM 验证：Orbitron 字体生效，标题科幻感增强，四色全息保持，无渲染异常
+- ✅ 动态导入对话框功能正常：编年史对话框点击打开正常，内容完整
+- ✅ agent-browser 交互测试通过
+
+### 未解决问题
+- 🟡 CSS 175K 偏大，未优化（下一轮可考虑 purge unused Tailwind）
+- 🟡 Orbitron 字体增加约 30K，可考虑只加载 400/700 两个 weight
+
+### 下一轮调研项（循环延续）
+1. **架构思想**：放置游戏存档系统架构（增量序列化 vs 全量），参考 Universal Paperclips 的存档设计
+2. **叙事思想**：ludonarrative harmony（玩法与叙事和谐）在放置游戏中的应用，如何让"解码晶体"动作本身承载叙事
+3. **资源调研**：freepd.com（CC0 音乐）/ mixkit 深空音效 / game-icons.net（CC-BY 图标扩展）
+4. **性能优化**：CSS purge + Zustand selector 细粒度拆分（检查 useGameStore 过宽订阅）
+5. **功能扩展**：基于 Eric Guan "长目标"思想，深化遗迹图鉴为"文明兴衰时间线"
+
+### 定时任务
+- job_id=228705，每 20 分钟（1200秒）执行一轮完整迭代循环
+- 循环结构：调研→工单→策划→开发（嵌套性能优化）→发布→记录下一轮调研项