🚀 Modern Blog System (基于 Flask + React + TypeScript)

这是一个高颜值、现代化、轻量级的前后端分离个人博客系统。前端视觉风格深度参考了著名的 Hexo Fluid 主题设计，拥有极佳的视觉表现、顺滑的微动画和全面的暗色模式（Dark Mode）自适应。

---

✨ 核心特性

🎨 极致视觉与交互体验 (Hexo Fluid 风格)

• 卡片式板面布局：首页大板卡（.index-container）以负外边距悬浮遮挡 Banner，带来强烈的层次感。
• 扁平透明卡片：无边框无阴影透明设计，卡片间通过细腻的线条分隔，排版清爽现代。
• 圆润胶囊徽章：分类与标签自动采用 14% 透明度的主题色背景配合 40% 的彩色边框，呈现精致的高级毛玻璃胶囊质感。
• 呼吸点状态指示：管理后台中的文章状态去除了沉重的实色背景，改为彩色指示圆点与高对比度文字结合，页面呼吸感强。

🌓 全站暗色/亮色主题切换

• 双模自适应：支持系统首选项（prefers-color-scheme: dark）自动切换。
• 手动控制：导航栏右侧提供 ☀️ 浅色 / 🌙 深色 手动切换按钮，配置即时持久化到 localStorage 中，刷新不闪屏。
• 后台完美适配：管理后台（文章管理、分类管理、仪表盘、设置页面等）全部基于 CSS 变量定义，杜绝暗色模式下的“白底白字”现象。

⚙️ 全面的系统后台自定义设置

• Favicon 自定义：支持在后台直接输入图标 URL，全局动态刷新标签页小图标。
• 动态 Title Suffix：配置网站标题（website_title）后，前台各页面标题将全局动态更新为 ${当前页} - ${website_title}。
• 关于我内容配置：支持在后台自定义“关于我”页面的个人简介副标题与详细自述内容（保留换行排版），支持长篇文本储存。
• 动态 Banner 描述：可自定义配置首页横幅中显示的个性化标语，替代原先固定的“记录技术 · 分享生活 · 散漫而行”。

📊 主机性能数字大屏

• 实时监测：仪表盘支持实时读取并显示主机的 CPU 使用率、内存使用率 数字及 Node.js 的环境版本号。

---

🛠️ 技术栈清单

💻 前端 (Frontend)

• 构建工具：Vite 8.x
• 核心框架：React 18.x + TypeScript 5.x
• 路由导航：React Router DOM 6.x
• 样式方案：Vanilla CSS 变量控制系统 + 现代排版微动画
• 核心组件：Markdown 渲染器、文章侧边栏目录生成 (TOC)、全局全文检索弹窗

🐍 后端 (Backend)

• 核心框架：Flask 3.x
• ORM 映射：SQLAlchemy & Flask-SQLAlchemy 3.x
• 数据库：MySQL 8.x (PyMySQL 驱动，全库支持 utf8mb4 Emoji 特殊字符存储)
• 监控底层：psutil 跨平台主机监测库
• 身份验证：PyJWT Bearer Token 验证机制

---

📦 快速本地部署

1. 克隆代码与前置准备

确保本地安装有以下环境：

• Node.js (推荐 v18+)
• Python (推荐 >= 3.14)
• MySQL 数据库服务

2. 后端服务配置与运行

1. 进入项目根目录。
2. 配置 config.py 中的 MySQL 连接地址、端口、库名以及用户名密码：

   HOSTNAME = '127.0.0.1'
   PORT = '3306'
   DATABASE = 'blog'
   USERNAME = 'root'
   PASSWORD = 'your_password'

3. 使用 Python 包管理器 uv（或 pip）安装依赖并启动服务：

   # 使用 uv 快速运行（会自动建立虚拟环境并安装 pyproject.toml 声明的全部依赖）
   uv run python app.py

   💡 自动种子填充：首次运行 app.py 时，后台会自动检测并创建所有数据库表，并自动在库中初始化默认分类（默认分类、Oracle、Splunk）、默认标签、系统初始文章（Hello World）、管理员账号（账号：admin，密码：admin）及初始系统配置项，无需手动导入 SQL。

3. 前端服务配置与运行

1. 进入 frontend/ 目录：

   cd frontend

2. 安装依赖：

   npm install

3. 启动开发服务器（支持局域网 IP 与 127.0.0.1 外部跨域请求访问）：

   npm run dev

4. 编译生产环境产物：

   npm run build

---

🔒 账号与安全信息

• 默认后台地址：/login
• 初始账号：admin
• 初始密码：admin (MD5 加密存储)
• 登录成功后，您可以在后台的系统设置与文章管理中，安全地开始创作并打理属于您的数字花园。