# holynova/gushi_namer architecture

> Architecture diagram of the GitHub repository holynova/gushi_namer, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/holynova/gushi_namer
- Repository: https://github.com/holynova/gushi_namer

## Overview

古诗文起名是一款从古典诗词中生成带出处的名字，并支持收藏、备份和分享的前端应用。用户选择典籍、输入姓氏后，应用加载典籍数据并生成候选；随后可查看出处、收藏名字，或在收藏页导入导出记录。分享卡片由名字卡片生成。认证界面与 Supabase 集成也存在于代码中，但其与主起名流程的连接未在所示证据中确认。

Main entry points: [`src/App.tsx`](https://github.com/holynova/gushi_namer/blob/master/src/App.tsx) (应用与流程), [`src/contexts/AuthContext.tsx`](https://github.com/holynova/gushi_namer/blob/master/src/contexts/AuthContext.tsx) (认证状态), [`src/components/Auth/AuthModal.tsx`](https://github.com/holynova/gushi_namer/blob/master/src/components/Auth/AuthModal.tsx) (认证弹窗), [`src/utils/namer.ts`](https://github.com/holynova/gushi_namer/blob/master/src/utils/namer.ts) (名字生成器)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_naming["起名与典籍"]
  node_book_select["典籍选择<br/>[BookSelector.tsx]"]
  node_surname["姓氏输入"]
  node_namer["名字生成器<br/>[namer.ts]"]
  node_random["随机选择<br/>[random.ts]"]
  node_corpus["典籍 JSON"]
end

subgraph group_favorites["收藏管理"]
  node_favorites_page["收藏页<br/>[FavoritesPage.tsx]"]
  node_favorite_store[("本地收藏存储<br/>[favorites.ts]")]
end

subgraph group_sharing["名字分享"]
  node_name_card["名字卡片<br/>[NameCard.tsx]"]
end

subgraph group_auth["账户认证"]
  node_auth_modal["认证弹窗<br/>[AuthModal.tsx]"]
  node_login["登录表单<br/>[LoginForm.tsx]"]
  node_register["注册表单<br/>[RegisterForm.tsx]"]
  node_reset["密码重置表单"]
  node_auth_context["认证状态<br/>[AuthContext.tsx]"]
  node_supabase_client["Supabase 客户端<br/>[supabase.ts]"]
  node_supabase{{"Supabase 服务"}}
  node_user_menu["用户菜单<br/>[UserMenu.tsx]"]
  node_avatar["用户头像<br/>[UserAvatar.tsx]"]
end

node_user(("使用者"))
node_app["应用与流程<br/>[App.tsx]"]
node_about["关于页面<br/>[AboutPage.tsx]"]

node_user -->|"使用"| node_app
node_app -->|"呈现选择"| node_book_select
node_app -->|"呈现输入"| node_surname
node_app -->|"生成候选"| node_namer
node_namer -->|"读取典籍"| node_corpus
node_namer -->|"调用随机选择"| node_random
node_app -->|"呈现候选"| node_name_card
node_app -->|"检查与切换收藏"| node_favorite_store
node_app -->|"打开收藏页"| node_favorites_page
node_app -->|"打开关于页"| node_about
node_favorites_page -->|"读写与导入导出"| node_favorite_store
node_favorites_page -->|"呈现收藏"| node_name_card
node_auth_modal -->|"呈现表单"| node_login
node_auth_modal -->|"呈现表单"| node_register
node_auth_modal -->|"呈现表单"| node_reset
node_login -->|"调用认证"| node_auth_context
node_register -->|"调用认证"| node_auth_context
node_auth_context -->|"调用客户端"| node_supabase_client
node_supabase_client -->|"连接服务"| node_supabase
node_user_menu -->|"读取认证状态"| node_auth_context
node_user_menu -->|"呈现头像"| node_avatar

click node_app "https://github.com/holynova/gushi_namer/blob/master/src/App.tsx"
click node_book_select "https://github.com/holynova/gushi_namer/blob/master/src/components/BookSelector.tsx"
click node_surname "https://github.com/holynova/gushi_namer/blob/master/src/components/FamilyNameInput.tsx"
click node_namer "https://github.com/holynova/gushi_namer/blob/master/src/utils/namer.ts"
click node_random "https://github.com/holynova/gushi_namer/blob/master/src/utils/random.ts"
click node_corpus "https://github.com/holynova/gushi_namer/tree/master/public/json"
click node_favorites_page "https://github.com/holynova/gushi_namer/blob/master/src/components/FavoritesPage.tsx"
click node_favorite_store "https://github.com/holynova/gushi_namer/blob/master/src/utils/favorites.ts"
click node_name_card "https://github.com/holynova/gushi_namer/blob/master/src/components/NameCard.tsx"
click node_about "https://github.com/holynova/gushi_namer/blob/master/src/components/AboutPage.tsx"
click node_auth_modal "https://github.com/holynova/gushi_namer/blob/master/src/components/Auth/AuthModal.tsx"
click node_login "https://github.com/holynova/gushi_namer/blob/master/src/components/Auth/LoginForm.tsx"
click node_register "https://github.com/holynova/gushi_namer/blob/master/src/components/Auth/RegisterForm.tsx"
click node_reset "https://github.com/holynova/gushi_namer/blob/master/src/components/Auth/ResetPasswordForm.tsx"
click node_auth_context "https://github.com/holynova/gushi_namer/blob/master/src/contexts/AuthContext.tsx"
click node_supabase_client "https://github.com/holynova/gushi_namer/blob/master/src/config/supabase.ts"
click node_user_menu "https://github.com/holynova/gushi_namer/blob/master/src/components/Auth/UserMenu.tsx"
click node_avatar "https://github.com/holynova/gushi_namer/blob/master/src/components/Auth/UserAvatar.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_book_select,node_surname,node_namer,node_random,node_corpus toneBlue
class node_favorites_page,node_favorite_store toneAmber
class node_name_card toneMint
class node_auth_modal,node_login,node_register,node_reset,node_auth_context,node_supabase_client,node_supabase,node_user_menu,node_avatar toneRose
class node_user toneIndigo
class node_app,node_about toneTeal
```

## Components

### 起名与典籍

- [典籍选择](https://github.com/holynova/gushi_namer/blob/master/src/components/BookSelector.tsx): `src/components/BookSelector.tsx`
- [姓氏输入](https://github.com/holynova/gushi_namer/blob/master/src/components/FamilyNameInput.tsx): `src/components/FamilyNameInput.tsx`
- [名字生成器](https://github.com/holynova/gushi_namer/blob/master/src/utils/namer.ts): `src/utils/namer.ts`
- [随机选择](https://github.com/holynova/gushi_namer/blob/master/src/utils/random.ts): `src/utils/random.ts`
- [典籍 JSON](https://github.com/holynova/gushi_namer/tree/master/public/json): `public/json`

### 收藏管理

- [收藏页](https://github.com/holynova/gushi_namer/blob/master/src/components/FavoritesPage.tsx): `src/components/FavoritesPage.tsx`
- [本地收藏存储](https://github.com/holynova/gushi_namer/blob/master/src/utils/favorites.ts): `src/utils/favorites.ts`

### 名字分享

- [名字卡片](https://github.com/holynova/gushi_namer/blob/master/src/components/NameCard.tsx): `src/components/NameCard.tsx`

### 账户认证

- [认证弹窗](https://github.com/holynova/gushi_namer/blob/master/src/components/Auth/AuthModal.tsx): `src/components/Auth/AuthModal.tsx`
- [登录表单](https://github.com/holynova/gushi_namer/blob/master/src/components/Auth/LoginForm.tsx): `src/components/Auth/LoginForm.tsx`
- [注册表单](https://github.com/holynova/gushi_namer/blob/master/src/components/Auth/RegisterForm.tsx): `src/components/Auth/RegisterForm.tsx`
- [密码重置表单](https://github.com/holynova/gushi_namer/blob/master/src/components/Auth/ResetPasswordForm.tsx): `src/components/Auth/ResetPasswordForm.tsx`
- [认证状态](https://github.com/holynova/gushi_namer/blob/master/src/contexts/AuthContext.tsx): `src/contexts/AuthContext.tsx`
- [Supabase 客户端](https://github.com/holynova/gushi_namer/blob/master/src/config/supabase.ts): `src/config/supabase.ts`
- **Supabase 服务**
- [用户菜单](https://github.com/holynova/gushi_namer/blob/master/src/components/Auth/UserMenu.tsx): `src/components/Auth/UserMenu.tsx`
- [用户头像](https://github.com/holynova/gushi_namer/blob/master/src/components/Auth/UserAvatar.tsx): `src/components/Auth/UserAvatar.tsx`

### Other components

- **使用者**
- [应用与流程](https://github.com/holynova/gushi_namer/blob/master/src/App.tsx): `src/App.tsx`
- [关于页面](https://github.com/holynova/gushi_namer/blob/master/src/components/AboutPage.tsx): `src/components/AboutPage.tsx`

## Connections

- 使用者 → 应用与流程: 使用 (evidence: `README.md`)
- 应用与流程 → 典籍选择: 呈现选择 (evidence: `src/App.tsx`)
- 应用与流程 → 姓氏输入: 呈现输入 (evidence: `src/App.tsx`)
- 应用与流程 → 名字生成器: 生成候选 (evidence: `src/App.tsx`)
- 名字生成器 → 典籍 JSON: 读取典籍 (evidence: `src/utils/namer.ts`)
- 名字生成器 → 随机选择: 调用随机选择 (evidence: `src/utils/namer.ts`)
- 应用与流程 → 名字卡片: 呈现候选 (evidence: `src/App.tsx`)
- 应用与流程 → 本地收藏存储: 检查与切换收藏 (evidence: `src/App.tsx`)
- 应用与流程 → 收藏页: 打开收藏页 (evidence: `src/App.tsx`)
- 应用与流程 → 关于页面: 打开关于页 (evidence: `src/App.tsx`)
- 收藏页 → 本地收藏存储: 读写与导入导出 (evidence: `src/components/FavoritesPage.tsx`)
- 收藏页 → 名字卡片: 呈现收藏 (evidence: `src/components/FavoritesPage.tsx`)
- 认证弹窗 → 登录表单: 呈现表单 (evidence: `src/components/Auth/AuthModal.tsx`)
- 认证弹窗 → 注册表单: 呈现表单 (evidence: `src/components/Auth/AuthModal.tsx`)
- 认证弹窗 → 密码重置表单: 呈现表单 (evidence: `src/components/Auth/AuthModal.tsx`)
- 登录表单 → 认证状态: 调用认证 (evidence: `src/components/Auth/LoginForm.tsx`)
- 注册表单 → 认证状态: 调用认证 (evidence: `src/components/Auth/RegisterForm.tsx`)
- 认证状态 → Supabase 客户端: 调用客户端 (evidence: `src/contexts/AuthContext.tsx`)
- Supabase 客户端 → Supabase 服务: 连接服务 (evidence: `src/config/supabase.ts`)
- 用户菜单 → 认证状态: 读取认证状态 (evidence: `src/components/Auth/UserMenu.tsx`)
- 用户菜单 → 用户头像: 呈现头像 (evidence: `src/components/Auth/UserMenu.tsx`)