diff --git a/src/app/globals.css b/src/app/globals.css index 4126c5311..36441b5db 100755 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a9510509c..ceb72766c 100755 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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 ( {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 346069c22..409e8c690 100755 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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() {
-

回响星核

-

+

回响星核

+

ECHO NEXUS · v0.10

@@ -271,7 +273,7 @@ export default function Page() { {/* 顶部状态条 */}
- CRYSTAL CORE · ONLINE + CRYSTAL CORE · ONLINE
diff --git a/worklog.md b/worklog.md index 46eeb55b7..78969ecbf 100755 --- a/worklog.md +++ b/worklog.md @@ -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秒)执行一轮完整迭代循环 +- 循环结构:调研→工单→策划→开发(嵌套性能优化)→发布→记录下一轮调研项