Commit 38d16c01 authored by shrabbit's avatar shrabbit
Browse files

chore(web): scaffold Nuxt 4 base structure 

- nuxt.config.ts: add Google Fonts, page transitions, global CSS
- assets/styles: design tokens (variables), global reset, animations
- composables: useScrollReveal (IntersectionObserver), useThemeColors, useNavigation
- layouts/default.vue + AppHeader.vue (sticky nav, mobile burger) + AppFooter.vue
- app.vue wired with NuxtLayout + scroll reveal init
- minimal placeholder index.vue
parents

.gitignore

0 → 100644
+24 −0
Original line number Diff line number Diff line 
# Nuxt dev/build outputs

.output

.data

.nuxt

.nitro

.cache

dist



# Node dependencies

node_modules



# Logs

logs

*.log



# Misc

.DS_Store

.fleet

.idea



# Local env files

.env

.env.*

!.env.example

SeekMyGenshin.wiki @ 1da2308b

Original line number Diff line number Diff line 
Subproject commit 1da2308b3fa050c25f760a2afde55d16eab2b898

web/.gitignore

0 → 100644
+24 −0
Original line number Diff line number Diff line 
# Nuxt dev/build outputs

.output

.data

.nuxt

.nitro

.cache

dist



# Node dependencies

node_modules



# Logs

logs

*.log



# Misc

.DS_Store

.fleet

.idea



# Local env files

.env

.env.*

!.env.example

web/.trae/documents/PRD.md

0 → 100644
+79 −0
Original line number Diff line number Diff line 
# SeekMyGenshin 原理展示站 — 产品需求文档 (PRD)



## 1. 产品概述



SeekMyGenshin 是一个用于逆向解析米哈游官方社区/官网数据的工具集。本展示站基于其公开 Wiki，用精致的 Nuxt 4 网页形式，向开发者讲清"它是怎么做到的"——从抓取频道号、解析 `sExt` 字段到关联角色与地区、聚合社区内容。



- **目标用户**：对逆向工程、爬虫、米哈游生态感兴趣的开发者

- **核心价值**：把零散的 Wiki 文档转化为可视化、可交互的"原理图谱"，让阅读者一眼看懂数据流转链路



## 2. 核心功能



### 2.1 功能模块



1. **首页 / 概览**：项目介绍、四篇 Wiki 的索引卡片、数据流总览图

2. **地区与角色页**：演示从 `ys.mihoyo.com` 主页提取 `CHARACTER`/`NOTE` 频道号、用 `sChanId` 关联角色与地区

3. **sExt 字段页**：演示 `sExt` JSON 字符串如何被解析为角色结构化数据（头像/cover/语音/CV/元素）

4. **社区内容页**：演示米游社社区数据抓取（活动、表情包、游戏列表、新闻）



### 2.2 页面详情



| 页面名称 | 模块名称 | 功能描述 |

|----------|----------|----------|

| 首页 | Hero 区 | 大标题 + 副标题 + 进入主区域的引导动画 |

| 首页 | Wiki 索引卡 | 四张卡片对应四篇 Wiki，hover 有视差与发光效果 |

| 首页 | 数据流图 | 用 SVG/CSS 绘制从官网到本地存档的数据流向 |

| 地区与角色 | 频道号提取 | 展示原始 JS 片段、正则匹配步骤、结果表格 |

| 地区与角色 | 角色-地区关联 | 用 `sChanId` 数组与频道字典做交集，可视化连接 |

| sExt 解析 | 字段拆解 | 逐项展示 `732_0` ~ `732_16` 各下标的含义 |

| sExt 解析 | 角色卡片 | 用真实样例数据渲染一张完整的角色卡 |

| 社区内容 | 游戏列表 | 展示米游社全部游戏的图标与主色 |

| 社区内容 | 表情包墙 | 网格化展示部分官方表情包 |

| 社区内容 | 新闻/活动 | 展示活动 banner 与新闻封面 |



## 3. 核心流程



用户进入首页 → 浏览 Wiki 索引 → 点击任一卡片进入对应原理页 → 在原理页内通过分步可视化和交互逐步理解 → 可返回首页切换其他主题



```mermaid

flowchart LR

    "首页" --> "地区与角色页"

    "首页" --> "sExt 解析页"

    "首页" --> "社区内容页"

    "地区与角色页" --> "示例数据可视化"

    "sExt 解析页" --> "角色卡片渲染"

    "社区内容页" --> "游戏/表情/新闻"

```



## 4. 用户界面设计



### 4.1 设计风格



整体走 **暗色 + 米哈游官方金棕色调（#D4A45A）** 的"考古手稿/技术档案"风格，呈现一种"逆向工程笔记"的氛围：



- **主色**：深墨绿黑 `#0E1311` 背景，金棕 `#D4A45A` 主点缀，米白 `#F1E9D2` 正文

- **辅色**：风元素青 `#74C2A8`、岩元素金 `#E4A672`、雷元素紫 `#9A6EC5`

- **字体**：标题用衬线字体（Cormorant Garamond / Noto Serif SC）营造典雅感，正文用现代无衬线（Noto Sans SC / IBM Plex Sans）

- **按钮**：扁平方角、1px 金棕色描边、hover 时背景填充渐变

- **图标**：lucide-vue-next，线性风格统一

- **氛围细节**：背景叠加大尺度网格 + 噪点 + 角落里的星座几何线条，呼应原神世界观



### 4.2 页面设计概览



| 页面 | 主色调用 | 关键动效 |

|------|----------|----------|

| 首页 | 深色 + 金棕 | 进入时 stagger reveal、卡片视差 |

| 地区与角色 | 深色 + 风元素青 | 表格逐行高亮、SVG 连线动画 |

| sExt 解析 | 深色 + 岩元素金 | 字段卡片翻转、JSON 折叠展开 |

| 社区内容 | 深色 + 紫调 | 网格瀑布加载、hover 缩放 |



### 4.3 响应式



桌面优先（≥ 1280px）：双栏/三栏布局；平板（768-1280px）：双栏；移动（< 768px）：单栏，导航折叠为汉堡菜单



## 5. 技术约束



- 框架：Nuxt 4（已存在 starter 模板）

- 样式：原生 CSS + CSS 变量（不引入 Tailwind，便于贴合精致风格）

- 不需要后端，所有展示数据均为静态/示例

- 不需要图片生成，复用 wiki 中真实米哈游 CDN 资源 URL

web/.trae/documents/TechnicalArchitecture.md

0 → 100644
+130 −0
Original line number Diff line number Diff line 
# SeekMyGenshin 原理展示站 — 技术架构文档



## 1. 架构设计



纯前端 Nuxt 4 应用，无后端服务。所有数据来源于 Wiki 中已记录的真实样例（嵌入静态常量），通过组件化的方式可视化呈现解析流程。



```mermaid

flowchart TB

    subgraph "前端 Nuxt 4"

        A["pages/ 原理页"] --> B["components/ 复用组件"]

        A --> C["composables/ 状态与逻辑"]

        B --> D["assets/styles/ 全局样式"]

        A --> E["data/ 静态示例数据"]

    end

    E --> F["Wiki 中真实米哈游 CDN 资源"]

```



## 2. 技术栈说明



- **前端框架**：Nuxt 4.4 + Vue 3.5（`<script setup lang="ts">`）

- **路由**：Nuxt 内置文件式路由（`app/pages/`）

- **样式方案**：原生 CSS + CSS 变量，全局样式集中在 `app/assets/styles/`，组件私有样式以 `<style scoped>` 写在 `.vue` 内

- **图标**：`lucide-vue-next`

- **字体**：Google Fonts 引入 Cormorant Garamond + Noto Serif SC + Noto Sans SC

- **包管理**：npm（starter 默认）



## 3. 路由定义



| 路由 | 页面文件 | 用途 |

|------|----------|------|

| `/` | `app/pages/index.vue` | 首页：项目介绍 + Wiki 索引 + 数据流图 |

| `/world-and-character` | `app/pages/world-and-character.vue` | 地区与角色原理页 |

| `/sext-parse` | `app/pages/sext-parse.vue` | sExt 字段解析原理页 |

| `/community` | `app/pages/community.vue` | 社区内容原理页 |



## 4. 目录结构



```

web/

├── app/

│   ├── app.vue                     # 根组件（含 NuxtLayout + NuxtPage）

│   ├── layouts/

│   │   └── default.vue            # 默认布局：顶部导航 + 底部页脚

│   ├── components/

│   │   ├── AppHeader.vue          # 顶部导航

│   │   ├── AppFooter.vue          # 页脚

│   │   ├── WikiCard.vue           # 首页 Wiki 卡片

│   │   ├── DataFlowDiagram.vue    # 数据流图

│   │   ├── CodeBlock.vue          # 带行号的代码块

│   │   ├── StepIndicator.vue      # 步骤指示器

│   │   ├── CharacterCard.vue      # 角色卡片

│   │   ├── RegionMap.vue          # 地区-频道映射表

│   │   ├── SextFieldTable.vue     # sExt 字段表格

│   │   ├── GameGrid.vue           # 游戏列表网格

│   │   ├── EmojiWall.vue          # 表情包墙

│   │   └── NewsCard.vue           # 新闻卡片

│   ├── composables/

│   │   ├── useScrollReveal.ts     # 滚动进入动画

│   │   └── useThemeColors.ts     # 主题色访问

│   ├── pages/

│   │   ├── index.vue

│   │   ├── world-and-character.vue

│   │   ├── sext-parse.vue

│   │   └── community.vue

│   ├── assets/

│   │   └── styles/

│   │       ├── variables.css     # CSS 变量定义

│   │       ├── global.css        # 全局重置与基础样式

│   │       └── animations.css    # 共用关键帧动画

│   └── data/

│       ├── channels.ts           # 频道号示例数据

│       ├── characters.ts         # 角色示例数据

│       ├── worlds.ts             # 世界示例数据

│       └── community.ts          # 社区示例数据

├── public/

├── nuxt.config.ts

└── package.json

```



## 5. 数据模型



不使用数据库。所有示例数据为 TypeScript 常量，类型定义如下：



```typescript

// 频道

interface ChannelEntry { name: string; cnName: string; id: number }



// 角色

interface CharacterSample {

  title: string

  icon: string

  cover1: string

  cover2: string

  name: string

  attr: string

  intro: string

  sen: string

  lang: string[]

  cv: { name: string; audio: string[] }[]

  location: string

  sChanId: string[]

}



// 世界

interface WorldSample {

  title: string

  icon: string

  bg: string

  bg2: string

  content: string

  channelId: string

}



// 社区 - 游戏

interface GameItem {

  id: number; name: string; en_name: string

  icon: string; main_color: string; has_wiki: boolean

}



// 社区 - 表情

interface EmojiItem { id: number; name: string; icon: string }

```



## 6. 视觉与交互约定



- **统一动画曲线**：`cubic-bezier(0.22, 0.61, 0.36, 1)`（带回弹的快速进入）

- **stagger reveal**：通过 `IntersectionObserver` 检测元素进入视口，加 `is-visible` 类触发 `transform: translateY + opacity` 过渡，配合 `--stagger` CSS 变量错峰

- **代码块**：左侧带行号、右上角"复制"按钮，hover 时高亮当前行

- **表格**：斑马纹 + hover 行高亮 + 进入时逐行 fade-in

- **响应式断点**：1280px / 768px