File size: 5,144 Bytes
96dd062
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
# 📦 Components 组件目录

Firefly 项目中所有可复用组件的集中管理。组件按照功能和职责进行分类,提供清晰的架构和易于维护的代码组织。

## 📁 目录结构

### 🏗️ layout/ - 页面布局组件

负责整体页面框架和布局结构的组件。

- `Footer.astro` - 页脚组件
- `Navbar.astro` - 导航栏组件
- `SideBar.astro` - 侧边栏组件
- `PostPage.astro` - 文章页面布局组件
- `PostCard.astro` - 文章卡片组件
- `PostMeta.astro` - 文章元数据组件
- `ConfigCarrier.astro` - 配置载体组件
- `DropdownMenu.astro` - 下拉菜单组件
- `NavMenuPanel.astro` - 导航菜单面板

### 🎮 controls/ - 导航和交互控件

页面导航和用户交互功能组件。

**导航控件**
- `BackToHome.astro` - 返回主页按钮
- `BackToTop.astro` - 返回顶部按钮
- `FloatingTOC.astro` - 浮动目录组件
- `FloatingControls.astro` - 右下角悬浮控件容器

**交互组件**
- `LightDarkSwitch.svelte` - 主题切换组件
- `LayoutSwitchButton.svelte` - 布局切换按钮
- `Search.svelte` - 搜索功能组件
- `ArchivePanel.svelte` - 归档面板组件
- `DisplaySettings.svelte` - 显示设置组件
- `DisplaySettingsIntegrated.svelte` - 集成显示设置组件
- `WallpaperSwitch.svelte` - 壁纸模式切换组件

### 🔧 common/ - 公共可复用组件

通用的 UI 组件和工具组件,支持跨项目复用。

**基础 UI 组件**
- `DropdownPanel.astro`/`.svelte` - 下拉面板容器
- `DropdownItem.astro`/`.svelte` - 下拉选项
- `FloatingButton.astro` - 悬浮按钮基础组件
- `Icon.svelte` - 图标组件(带加载状态和错误处理)
- `ButtonLink.astro` - 链接按钮
- `ButtonTag.astro` - 标签按钮
- `WidgetLayout.astro` - 小部件布局容器

**内容和展示组件**
- `ImageWrapper.astro` - 图片包装器(支持本地和远程图片)
- `CoverImage.astro` - 封面图组件(支持本地图片和随机图API)
- `Markdown.astro` - Markdown 内容样式包装器
- `PioMessageBox.astro` - 消息框组件(Live2D/Spine 消息显示)

**分页组件**
- `Pagination.astro` - 静态路由分页(Astro 原生)
- `ClientPagination.astro` - 客户端分页(JavaScript 控制)

### 🧩 widget/ - 侧边栏小部件

侧边栏中使用的各种功能小部件。

- `Advertisement.astro` - 广告组件
- `Announcement.astro` - 公告组件
- `Calendar.astro` - 日历组件
- `Categories.astro` - 分类组件
- `Music.astro` - 音乐播放器小部件
- `Profile.astro` - 个人信息/社交链接小部件
- `SidebarTOC.astro` - 侧边栏目录组件
- `SiteStats.astro` - 站点统计组件
- `Tags.astro` - 标签组件
- `Live2DWidget.astro` - Live2D 看板娘组件
- `SpineModel.astro` - Spine 看板娘组件

### ✨ features/ - 全局功能特效组件

全局加载的功能增强和特效组件。

**管理器(初始化和管理功能)**
- `FancyboxManager.astro` - Fancybox 图片查看器管理
- `KatexManager.astro` - Katex 数学公式渲染管理
- `FontManager.astro` - 字体加载和管理

**功能组件**
- `SakuraEffect.astro` - 樱花飘落特效
- `TypewriterText.astro` - 打字机动画效果
- `OverlayWallpaper.astro` - 背景壁纸覆盖层
- `Live2DWidget.astro` - Live2D 看板娘组件
- `SpineModel.astro` - Spine 看板娘组件

### 📃 pages/ - 页面特定组件

特定页面使用的组件,不用于其他页面。

- `AdvancedSearch.svelte` - 高级搜索组件

**pages/bangumi/** - 番组计划页面组件
- `BangumiSection.astro` - 番组分类展示组件
- `Card.astro` - 番组卡片组件
- `FilterControls.astro` - 筛选控制组件
- `TabNav.astro` - 标签导航组件

### 💬 comment/ - 评论系统组件

第三方评论系统集成组件。

- `index.astro` - 评论主组件
- `Artalk.astro` - Artalk 评论集成
- `Disqus.astro` - Disqus 评论集成
- `Giscus.astro` - Giscus 评论集成(GitHub 讨论)
- `Twikoo.astro` - Twikoo 评论集成
- `Waline.astro` - Waline 评论集成

### 📊 analytics/ - 数据统计组件

网站分析和统计集成组件。

- `GoogleAnalytics.astro` - Google Analytics
- `MicrosoftClarity.astro` - Microsoft Clarity

### 🔧 misc/ - 杂项工具组件

其他辅助和工具类组件。

- `License.astro` - 许可证信息显示
- `SharePoster.svelte` - 分享海报生成

---

## 🗂️ 分类原则

| 分类 | 用途 | 特点 |
|------|------|------|
| **layout/** | 页面布局和结构 | 决定整体页面框架 |
| **controls/** | 导航和交互 | 用户交互功能 |
| **common/** | 通用可复用组件 | 跨多个页面/组件使用 |
| **widget/** | 侧边栏小部件 | 侧边栏特定组件 |
| **features/** | 全局功能特效 | 全局加载的增强功能 |
| **pages/** | 页面特定组件 | 仅在特定页面使用 |
| **comment/** | 评论系统 | 第三方服务集成 |
| **analytics/** | 数据统计 | 分析和统计服务 |
| **misc/** | 工具和辅助 | 其他杂项功能 |