快速入门

1. 访问管理后台

在浏览器中访问管理后台地址后，系统会先检查当前用户的登录状态。未登录的用户会自动跳转到登录页面；登录成功后，则可进入后台首页继续操作。

2. 登录认证

2.1 登录页面

登录页面采用简洁的卡片式布局，页面主要包含以下元素：

• 标题区域：显示「后台管理系统」
• 邮箱输入框：用于输入注册邮箱
• 密码输入框：用于输入账户密码
• 登录按钮：用于提交登录认证

整体设计偏向简洁和直接，便于用户快速完成登录。

2.2 登录流程

用户登录后台时，整体流程如下：

1. 输入邮箱和密码
2. 点击「登录」按钮提交表单
3. 系统对凭据进行校验
4. 校验通过后返回 Token
5. Token 自动存储到本地
6. 页面跳转到管理后台首页

这个流程在大多数情况下是自动完成的，用户只需要输入正确的登录信息即可。

2.3 Token 管理

登录成功后，系统使用双 Token 机制维持登录状态：

安全设计：

• access_token 存储在 localStorage，便于前端获取并附加到请求头中
• refresh_token 存储在 HttpOnly Cookie，防止 XSS 攻击窃取，同时支持自动携带到后端

当 access_token 过期时，系统会自动使用 refresh_token 获取新的访问令牌，无需用户重新登录。

3. 管理端结构

管理后台左侧菜单包含多个功能模块，用于内容管理、互动管理和系统管理。整体结构如下：

从结构上看，后台功能划分比较清晰：

• 内容管理：负责文章、动态等内容本身
• 互动管理：负责评论、友链、RSS、反馈等互动功能
• 系统管理：负责用户、文件、日志与系统配置等后台能力
• 主题配置：负责菜单、主题样式、页面配置等前台展示能力

4. 页面布局

管理后台整体采用「左侧导航 + 右侧内容区」的经典布局方式：

• 左侧为固定宽度的导航栏，支持折叠
• 右侧为主内容区，自适应页面宽度
• 顶部通常显示当前页面标题与面包屑导航

这种布局便于在后台功能较多时保持较高的可用性，也方便用户快速在不同模块之间切换。

响应式设计

为了适配不同终端设备，后台还支持响应式布局：

• 桌面端：展示完整导航菜单
• 平板端：支持折叠导航菜单
• 移动端：使用汉堡菜单，并切换为全宽内容区

这意味着无论是在电脑还是移动设备上访问后台，都能获得相对清晰的操作体验。

5. 仪表盘

管理后台首页的仪表盘主要用于展示系统的整体运行概况和核心统计信息，帮助管理员快速了解当前站点状态。

5.1 顶部信息卡

顶部区域通常包含以下内容：

• 头像：显示当前登录用户的头像
• 问候语：根据当前时间动态显示不同问候语，如凌晨好、早安、上午好、中午好、下午好、傍晚好、晚上好、夜深了
• 一言：随机显示从「一言 API」获取的一句话
• 统计数字：展示文章总数、友链总数、动态总数等关键指标

这个区域主要用于增强首页的信息感和使用氛围，同时快速反馈系统的基础规模数据。

5.2 概况卡片

仪表盘中的概况卡片通常包含四个统计卡片，用于展示关键业务指标的增长情况，例如：

• 浏览量
• 访客量
• 评论数
• 用户数

每个卡片通常会显示：

• 总量
• 今日新增数量
• 增长率

通过这些指标，管理员可以快速了解站点的访问与互动变化趋势。

5.3 图表区域

图表区域主要用于更加直观地展示数据分布和趋势，常见内容包括：

• 访问趋势图：通过折线图展示 PV / UV 的变化趋势，并支持按日或按月切换
• 分类统计图：通过饼图展示各分类下的文章数量分布
• 标签统计图：通过词云图展示标签使用频率
• 文章贡献图：通过热力日历图展示每日文章发布情况

这些图表可以帮助管理员从趋势、分类、标签和活跃度等不同角度观察网站内容生态。

5.4 快捷访问

仪表盘中还提供常用链接入口，通常包括：

• 主页
• 博客
• GitHub
• 文档

通过快捷访问区域，管理员可以快速跳转到常用页面，提高后台操作效率。

6. 系统信息

在「系统管理 → 系统信息」页面中，可以查看服务器与系统运行状态，用于辅助日常运维和问题排查。

6.1 信息刷新机制

系统信息页面中的数据分为动态信息和静态信息，两者刷新方式不同：

• 动态数据：每 10 秒自动刷新一次
• 静态数据：仅在页面加载时获取一次

这种机制既能保证关键状态数据的实时性，又能避免不必要的重复请求。

6.2 服务器信息

服务器信息通常包括以下内容：

• 主机名
• 操作系统
• IP
• 时区
• 运行时间

这些信息用于快速确认当前服务部署环境的基本状态。

6.3 CPU 信息

CPU 信息通常展示：

• 核心数
• 使用率
• 型号
• 架构
• 系统负载

在界面表现上，系统负载通常会结合进度条颜色进行区分：

• 绿色：低于 50%
• 橙色：50%～80%
• 红色：高于 80%

这种可视化方式有助于管理员快速判断服务器是否处于高负载状态。

6.4 内存信息

内存信息一般包括：

• 总容量
• 已用量
• 使用率
• 未使用容量
• Swap 信息

通过这些指标，可以判断当前服务的内存使用情况是否稳定，是否存在资源紧张的风险。

6.5 磁盘信息

磁盘信息通常包含：

• 总容量
• 使用率
• 已用空间
• 未使用空间

这部分数据主要用于监控磁盘剩余空间，避免因存储不足导致系统运行异常。

6.6 数据库信息

数据库信息通常包括：

• 数据库类型
• 当前状态
• 数据库大小
• 表数量
• 连接数

通过数据库状态页，管理员可以快速确认数据库运行是否正常，以及当前数据库规模情况。

6.7 外部连通状态

系统还会展示一些外部服务的连通状态，例如：

• 文件存储
• 邮箱通知
• 飞书交互服务

这些状态信息有助于快速定位外部依赖是否可用，尤其在文件上传、通知发送或第三方交互异常时非常有帮助。

7. 页面路由

为了帮助你更快理解 FlecBlog 的整体页面结构，下面整理了博客端与管理端的主要路由信息，便于在使用、测试和配置时快速定位页面。

7.1 博客端

7.1.1 主要页面

7.1.2 内容分类

7.1.3 互动页面

7.1.4 用户页面

7.1.5 法律页面

7.1.6 其他页面

7.2 管理端

7.2.1 主要页面

7.2.2 内容管理

7.2.3 用户与互动

7.2.4 链接管理

7.2.5 系统设置

7.2.6 数据与日志