init

2026-06-12 17:49:54 +08:00
commit d759a9e740
69 changed files with 14243 additions and 0 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -0,0 +1,30 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run *)",
+      "Bash(git stash *)",
+      "Bash(npm install *)",
+      "Bash(node src/scripts/initDb.js)",
+      "Bash(node -e \"require\\('dotenv'\\).config\\(\\); console.log\\('DB_HOST:', process.env.DB_HOST\\); console.log\\('DB_PORT:', process.env.DB_PORT\\); console.log\\('DB_USER:', process.env.DB_USER\\); console.log\\('DB_NAME:', process.env.DB_NAME\\);\")",
+      "Bash(node -e ' *)",
+      "Bash(curl -s http://localhost:3000/api/settings)",
+      "Bash(curl *)",
+      "Bash(node src/scripts/migrateColumns.js)",
+      "Bash(mysql *)",
+      "Bash(node -e \"const d=require\\('fs'\\).readFileSync\\(0,'utf8'\\); const j=JSON.parse\\(d\\); console.log\\('uploadedImages length:', j.uploadedImages?.length\\); console.log\\('uploadedImages[0] id:', j.uploadedImages?.[0]?.id\\);\")",
+      "Bash(node -e \"const j=require\\('/tmp/settings.json'\\); console.log\\('uploadedImages length:', j.uploadedImages?.length\\); console.log\\('uploadedImages[0] id:', j.uploadedImages?.[0]?.id\\);\")",
+      "Bash(node -p \"const j=JSON.parse\\(require\\('fs'\\).readFileSync\\(0,'utf8'\\)\\); j.uploadedImages?.length\")",
+      "Bash(node src/index.js)",
+      "Bash(netstat -ano)",
+      "Bash(grep3000)",
+      "Bash(node src/scripts/addSamplePosts.js)",
+      "Bash(node src/scripts/insertPosts.js)",
+      "Bash(npm list *)",
+      "Bash(node -e \"require\\('./src/index.js'\\)\")",
+      "Bash(npx pkg *)",
+      "Bash(node package.js)",
+      "Bash(npm view *)",
+      "Bash(git restore *)"
+    ]
+  }
+}
--- a/.env
+++ b/.env
@@ -0,0 +1,8 @@
+# 本地开发环境配置
+# npm run dev 使用此配置（mode=development）
+
+# 后端端口
+VITE_API_PORT=4501
+
+# 留空，使用本地代理模式
+VITE_SERVER_URL=
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1,7 @@
+# 本地开发环境配置
+
+# 后端端口
+VITE_API_PORT=4501
+
+# 留空，使用本地代理模式
+VITE_SERVER_URL=
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,8 @@
+# 前端环境变量配置模板
+# 实际配置请使用 .env.development（本地）或 .env.production（远程）
+
+# 后端端口
+VITE_API_PORT=4501
+
+# 远程服务器地址（为空时使用本地代理模式）
+VITE_SERVER_URL=http://43.156.91.115:4501
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1,7 @@
+# 远程生产环境配置
+
+# 后端端口
+VITE_API_PORT=4501
+
+# 远程服务器地址（直接连接，不走代理）
+VITE_SERVER_URL=http://43.156.91.115:4501
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,138 @@
+# 修改记录
+
+## 2026-06-10
+
+### 1. 优化图片上传性能
+**文件**: `server/src/routes/settings.js`
+
+**问题**: 批量上传图片到 RUSTFS 时串行执行，每张图片需等待上一张完成，导致上传时间过长。
+
+**解决方案**: 将 `for...of` 串行上传改为 `Promise.all` 并行上传。
+
+**改动内容**:
+- 将批量上传接口 `/upload-images` 的串行逻辑改为并行
+- 使用 `Promise.all()` 同时上传所有图片
+
+---
+
+### 2. 新增服务端配置页面
+**目标**: 在前端设置界面添加配置页面，支持动态修改 .env 配置并重启后端服务。
+
+#### 后端新增文件
+
+**`server/src/config/envManager.js`**
+- `readEnv()` - 读取并解析 .env 文件
+- `writeEnv(config)` - 将配置对象写入 .env 文件
+- `getSafeConfig()` - 返回安全展示的配置（密码用 `******` 替代）
+
+**`server/src/routes/config.js`**
+- `GET /api/config` - 获取当前配置（密码隐藏）
+- `PUT /api/config` - 更新配置并写入 .env 文件
+- `POST /api/config/restart` - 优雅重启后端服务
+
+#### 后端修改文件
+
+**`server/src/index.js`**
+- 注册新路由 `app.use('/api/config', configRouter)`
+
+#### 前端新增文件
+
+**`src/views/ServerConfigView.vue`**
+- 配置分组显示：数据库、RUSTFS、服务器
+- 密码字段显示为 `******`，修改时留空则不修改原密码
+- 保存按钮 - 调用 API 保存配置到 .env
+- 重启按钮 - 调用 API 优雅重启服务（需 PM2 等进程管理器）
+
+#### 前端修改文件
+
+**`src/router/index.js`**
+- 添加路由 `/server-config` -> ServerConfigView（懒加载）
+
+**`src/i18n/index.js`**
+- 添加 `serverConfig` 中英文翻译
+
+**`src/components/SiteHeader.vue`**
+- 导航栏添加"服务端配置"链接
+
+---
+
+### 使用说明
+
+1. **启动后端**（需使用 PM2 管理进程）:
+   ```bash
+   pm2 start npm -- run dev
+   ```
+
+2. **访问配置页面**: 启动后端后访问 `/server-config`
+
+3. **保存配置**: 点击"保存配置"按钮，配置会写入 `.env` 文件
+
+4. **重启服务**: 点击"重启服务"按钮，后端会优雅退出（`process.exit(0)`），PM2 会自动重启
+
+### 注意事项
+
+- 密码字段显示为 `******`，如需修改请输入新密码，留空则保持原密码不变
+- 重启功能需要配合 PM2 等进程管理器使用，否则服务将无法自动恢复
+
+---
+
+### 3. 新增文章编辑功能
+
+**目标**: 提供完整的文章新建和编辑功能。
+
+#### 前端新增文件
+
+**`src/views/PostEditorView.vue`**
+- 新建文章页面 (`/post/new`)
+- 编辑文章页面 (`/post/edit/:id`)
+- 包含标题、日期、摘要、正文等字段
+- 保存后自动返回文章列表
+
+#### 前端修改文件
+
+**`src/views/HomeView.vue`**
+- 页面头部添加"新建文章"按钮
+
+**`src/views/PostDetail.vue`**
+- 添加"编辑"和"删除"按钮
+- 支持从文章详情页直接编辑或删除
+
+**`src/router/index.js`**
+- 添加路由 `/post/new` -> PostEditorView
+- 添加路由 `/post/edit/:id` -> PostEditorView
+
+**`src/i18n/index.js`**
+- 添加 `home.newPost` 翻译
+- 添加 `postEditor` 完整翻译（中英文）
+
+---
+
+### 4. 后端定时任务调度器
+
+**目标**: 将定时任务调度逻辑从前端移到后端，确保即使没有人打开页面，任务也会按计划执行。
+
+#### 新增文件
+
+**`server/src/config/cronScheduler.js`**
+- `start()` - 启动调度器，每 10 秒检查一次到期任务
+- `stop()` - 停止调度器
+- `checkAndRunTasks()` - 检查并执行到期的任务
+- `executeTask(task)` - 执行单个定时任务
+
+#### 后端修改文件
+
+**`server/src/index.js`**
+- 导入 `cronScheduler` 模块
+- 在服务器启动时调用 `cronScheduler.start()`
+
+#### 功能说明
+
+- 调度器每 10 秒检查一次所有已启用的定时任务
+- 当任务的 `nextRun` 时间已到，立即执行任务
+- 执行后自动计算下一次执行时间并更新数据库
+- 任务在后端运行，不依赖前端页面打开
+
+### 注意事项
+
+- 定时任务由后端调度，前端 CronView 仍可手动执行和查看任务状态
+- 后端调度需在服务器运行期间持续工作（由 PM2 等进程管理器保持）
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,61 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## 项目命令
+
+```sh
+npm install         # 安装依赖
+npm run dev         # 启动开发服务器（热重载）
+npm run build       # 构建生产版本
+npm run preview     # 预览生产构建（端口 5050）
+```
+
+## 架构
+
+- **Vue 3** 单页应用，使用组合式 API（`<script setup>`）
+- **Pinia** 状态管理（`src/stores/`）
+- **Vue Router 4** 路由（`src/router/index.js`），懒加载视图
+- **Vite** 构建工具，`@` 别名指向 `src/`
+- **国际化**：简单的 i18n 实现（`src/i18n/index.js` + `src/composables/useI18n.js`）
+
+## 页面结构
+
+| 路由 | 组件 | 说明 |
+|------|------|------|
+| `/` | HomeView + PostList | 文章列表 |
+| `/post/:id` | PostDetail | 文章详情 |
+| `/about` | AboutView | 关于页面 |
+| `/cron` | CronView | 定时任务系统 |
+| `/settings` | SettingsView | 设置（背景、语言、图标） |
+
+## 核心文件
+
+- `src/App.vue` - 根组件，包含背景层和路由出口
+- `src/stores/settings.js` - 用户设置（背景、语言、网站图标、已上传资源库）
+- `src/stores/posts.js` - 文章数据
+- `src/components/SiteHeader.vue` - 顶部导航栏（国际化的站点名称和导航链接）
+- `src/i18n/index.js` - 翻译文本（中英文）
+
+## 设置系统
+
+设置存储在 localStorage `site-settings` 中，包含：
+- `bgType`: 'color' | 'image'
+- `bgColor`: 背景颜色
+- `bgImage`: 背景图片URL（支持base64本地图片）
+- `bgOpacity`: 背景透明度 0-1
+- `language`: 'zh' | 'en'
+- `favicon`: 网站图标（base64）
+- `uploadedImages`: 已上传的背景图片库
+- `uploadedIcons`: 已上传的图标库
+
+背景通过 `App.vue` 中的固定定位背景层渲染，透明度独立于内容层。
+
+## 定时任务系统
+
+`CronView.vue` 实现简单的定时任务系统：
+- Cron表达式格式：`分 时 日 月 周`
+- 任务保存在 localStorage `cron-tasks` 中
+- 每 10 秒检查一次是否需要执行
+- 支持 GET/POST/PUT/PATCH/DELETE 请求
+- 使用 `useI18n` composable 实现国际化
--- a/DEPLOY.md
+++ b/DEPLOY.md
@@ -0,0 +1,201 @@
+# JNote-UI 打包部署文档
+
+## 项目结构
+
+```
+jnote-ui/
+├── src/                  # 前端源代码
+├── dist/                 # 前端构建产物
+├── server/               # 后端服务
+│   ├── src/
+│   │   ├── index.js      # 后端入口
+│   │   ├── config/       # 配置文件
+│   │   └── routes/       # 路由
+│   ├── build.js          # 打包脚本
+│   ├── package.js        # 分发包打包脚本
+│   ├── start.js          # 启动脚本
+│   ├── .env              # 环境配置
+│   └── package.json
+└── package.json          # 前端依赖
+```
+
+---
+
+## 一、打包前端
+
+```bash
+npm install
+npm run build
+```
+
+构建完成后会生成 `dist/` 目录。
+
+---
+
+## 二、打包后端
+
+### 方式一：快速打包（生成可执行文件）
+
+```bash
+cd server
+
+# 安装依赖
+npm install
+
+# 打包 Linux 和 Windows 两个版本
+node package.js
+```
+
+打包完成后会生成 `server/release/` 目录：
+
+```
+release/
+├── README.txt
+├── linux/
+│   ├── jnote-api    # Linux 可执行文件
+│   ├── start.js     # 启动脚本
+│   └── .env         # 环境配置
+└── windows/
+    ├── jnote-api.exe  # Windows 可执行文件
+    ├── start.js       # 启动脚本
+    └── .env           # 环境配置
+```
+
+### 方式二：仅打包 Linux 版本
+
+```bash
+cd server
+node build.js
+```
+
+---
+
+## 三、部署后端
+
+### Linux 服务器部署
+
+将 `release/linux/` 目录上传到服务器：
+
+```bash
+# 上传
+scp -r release/linux/ user@your-server:/path/to/jnote/
+
+# SSH 登录后
+cd /path/to/jnote
+chmod +x jnote-api start.js
+./start.js
+```
+
+### Windows 服务器部署
+
+将 `release/windows/` 目录上传到服务器：
+
+```powershell
+cd windows
+node start.js
+```
+
+---
+
+## 四、配置 Nginx
+
+后端 API 默认运行在 `http://localhost:3000`，前端静态文件通过 Nginx 提供。
+
+### Nginx 配置示例
+
+```nginx
+server {
+    listen 80;
+    server_name 你的域名或IP;
+
+    # 前端静态文件
+    root /path/to/jnote-ui/dist;
+    index index.html;
+
+    # 前端路由（SPA）
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # API 反向代理
+    location /api/ {
+        proxy_pass http://127.0.0.1:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
+```
+
+---
+
+## 五、常用命令汇总
+
+```bash
+# 1. 构建前端
+npm install
+npm run build
+
+# 2. 打包后端（Windows/Linux 双版本）
+cd server
+npm install
+node package.js
+
+# 3. 上传 release/linux/ 到服务器后启动
+chmod +x jnote-api start.js
+./start.js
+
+# 4. PM2 管理（可选）
+pm2 start jnote-api --name jnote-api
+pm2 save
+pm2 startup
+
+# 5. PM2 常用命令
+pm2 status           # 查看状态
+pm2 logs jnote-api   # 查看日志
+pm2 restart jnote-api  # 重启
+pm2 stop jnote-api   # 停止
+```
+
+---
+
+## 六、端口配置说明
+
+### 后端端口
+
+在 `server/.env` 中配置：
+```env
+PORT=3000
+```
+
+### 前端代理端口
+
+在 `jnote-ui/.env` 中配置（与 server/.env 的 PORT 保持一致）：
+```env
+VITE_API_PORT=3000
+```
+
+如果后端端口改变，必须同时修改这两个文件。
+
+---
+
+## 七、更新部署
+
+```bash
+# 1. 拉取最新代码
+git pull
+
+# 2. 重新构建前端
+npm run build
+
+# 3. 重新打包后端
+cd server
+node package.js
+
+# 4. 上传新的 release/ 目录到服务器
+
+# 5. 重启后端
+pm2 restart jnote-api
+```
--- a/README.md
+++ b/README.md
@@ -0,0 +1,164 @@
+# Jnote-ui
+
+博客前端 + 后端完整项目
+
+## 项目结构
+
+```
+jnote-ui/
+├── server/                    # Node.js 后端
+│   ├── src/
+│   │   ├── index.js           # 入口
+│   │   ├── config/
+│   │   │   ├── cronScheduler.js # 定时任务调度器
+│   │   │   ├── database.js    # 数据库连接
+│   │   │   ├── envManager.js  # .env 文件管理
+│   │   │   ├── memoryStore.js # 内存后备存储
+│   │   │   ├── rustfs.js      # RUSTFS 对象存储
+│   │   │   └── schema.js      # 数据库表结构
+│   │   └── routes/
+│   │       ├── about.js       # 关于内容
+│   │       ├── config.js      # 服务端配置
+│   │       ├── cron.js        # 定时任务
+│   │       ├── posts.js       # 文章 CRUD
+│   │       └── settings.js    # 设置
+│   ├── .env                   # 环境配置
+│   └── package.json
+│
+└── src/                       # Vue 3 前端
+    ├── components/            # 组件
+    ├── composables/           # 组合式函数
+    ├── i18n/                  # 国际化
+    ├── services/
+    │   └── api.js             # API 调用层
+    ├── stores/                # Pinia 状态管理
+    ├── views/                 # 页面视图
+    ├── router/                # 路由配置
+    └── App.vue                # 根组件
+```
+
+## 快速开始
+
+### 1. 后端启动（开发）
+
+```sh
+cd server
+npm install
+
+# 编辑 .env 填入数据库连接信息（可选，不填则使用内存存储）
+# DB_HOST=localhost
+# DB_PORT=3306
+# DB_USER=root
+# DB_PASSWORD=your_password
+# DB_NAME=jnote
+
+# 启动后端（开发模式热重载）
+npm run dev
+
+# 或生产模式
+npm start
+```
+
+后端运行在 http://localhost:3000
+
+### 2. 前端启动
+
+```sh
+npm install
+npm run dev
+```
+
+前端运行在 http://localhost:5173，会自动代理 `/api` 请求到后端
+
+### 3. 服务器部署（一键打包）
+
+在 Windows 上运行打包命令，生成 Linux 和 Windows 两个版本：
+
+```sh
+cd server
+npm install
+node package.js
+```
+
+打包完成后 `release/` 目录包含：
+- `linux/` - Linux 服务器部署包（jnote-api + start.js + .env）
+- `windows/` - Windows 服务器部署包
+
+上传到服务器后直接运行 `node start.js` 即可启动。
+
+## 功能模块
+
+## 功能模块
+
+| 路由 | 页面 | 说明 |
+|------|------|------|
+| `/` | HomeView | 文章列表 |
+| `/post/:id` | PostDetail | 文章详情（Markdown 渲染） |
+| `/post/new` | PostEditorView | 新建文章 |
+| `/post/edit/:id` | PostEditorView | 编辑文章 |
+| `/about` | AboutView | 关于页面 |
+| `/cron` | CronView | 定时任务系统 |
+| `/settings` | SettingsView | 设置（背景、语言、图标） |
+| `/server-config` | ServerConfigView | 服务端配置 |
+
+## 技术栈
+
+**前端**: Vue 3 + Vite + Pinia + Vue Router + marked
+**后端**: Express + mysql2 + dotenv
+**存储**: MariaDB + RUSTFS 对象存储
+
+## 环境变量
+
+### 后端 (`server/.env`)
+
+```env
+# 数据库配置
+DB_HOST=localhost
+DB_PORT=3306
+DB_USER=root
+DB_PASSWORD=your_password
+DB_NAME=jnote
+
+# RUSTFS 对象存储配置
+RUSTFS_ENDPOINT=http://localhost:9001
+RUSTFS_BUCKET=setting
+RUSTFS_ACCESS_KEY=your_key
+RUSTFS_SECRET_KEY=your_secret
+
+# 服务器配置
+PORT=3000
+```
+
+### 前端 (`.env` 或 `.env.local`)
+
+```env
+VITE_API_URL=/api    # API 地址，默认为 /api（通过 vite 代理）
+```
+
+## API 端点
+
+| 端点 | 方法 | 说明 |
+|------|------|------|
+| `/api/posts` | GET/POST | 文章列表/创建 |
+| `/api/posts/:id` | GET/PUT/DELETE | 文章详情/更新/删除 |
+| `/api/about` | GET/PUT | 关于内容 |
+| `/api/settings` | GET/PUT | 设置 |
+| `/api/settings/upload-image` | POST | 上传单张图片到 RUSTFS |
+| `/api/settings/upload-images` | POST | 批量上传图片到 RUSTFS |
+| `/api/cron-tasks` | GET/POST | 定时任务列表/创建 |
+| `/api/cron-tasks/:id` | PUT/DELETE | 更新/删除任务 |
+| `/api/cron-tasks/:id/run` | POST | 立即执行任务 |
+| `/api/config` | GET/PUT | 服务端配置 |
+| `/api/config/restart` | POST | 重启后端服务 |
+| `/api/health` | GET | 健康检查 |
+
+## 主要特性
+
+- **文章管理**: 创建、编辑、删除文章，支持 Markdown
+- **定时任务**: Cron 表达式调度，支持 GET/POST/PUT/PATCH/DELETE 请求
+- **自定义背景**: 纯色或图片背景，可调节透明度
+- **多语言**: 中英文切换
+- **自定义图标**: 上传本地图片作为网站图标
+- **图片存储**: 上传图片到 RUSTFS 对象存储
+- **服务端配置**: Web 界面修改数据库和存储配置
+- **数据预热**: 启动时缓存常用数据，提升响应速度
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>我的编程学习记录</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "jnote-ui",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:prod": "vite build --mode production",
+    "preview": "vite preview --port 5050"
+  },
+  "dependencies": {
+    "marked": "^18.0.5",
+    "pinia": "^2.0.4",
+    "vue": "^3.2.22",
+    "vue-router": "^4.0.12"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.10.0",
+    "vite": "^2.6.14"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/server/.env
+++ b/server/.env
@@ -0,0 +1,17 @@
+# 数据库配置
+DB_HOST=43.156.91.115
+DB_PORT=53306
+DB_USER=root
+# DB_PASSWORD=mysql_sX4mrh
+DB_PASSWORD=mariadb_hJbME5
+DB_NAME=jnote
+
+# RUSTFS 对象存储配置
+RUSTFS_ENDPOINT=http://43.156.91.115:9001
+RUSTFS_REGION=us-east-1
+RUSTFS_BUCKET=setting
+RUSTFS_ACCESS_KEY=rustfsadmin
+RUSTFS_SECRET_KEY=rustfsadmin
+
+# 服务器配置
+PORT=4501
--- a/server/README.md
+++ b/server/README.md
@@ -0,0 +1,76 @@
+# Jnote Server
+
+博客后端 API 服务
+
+## 安装
+
+```bash
+npm install
+```
+
+## 配置
+
+编辑 `.env` 文件，填入数据库连接信息：
+
+```
+DB_HOST=localhost
+DB_PORT=3306
+DB_USER=root
+DB_PASSWORD=your_password
+DB_NAME=jnote
+PORT=3000
+```
+
+如果不配置数据库，将使用内存存储作为后备方案。
+
+## 启动
+
+```bash
+# 开发模式（热重载）
+npm run dev
+
+# 生产模式
+npm start
+```
+
+## API 端点
+
+### 文章
+
+| 端点 | 方法 | 说明 |
+|------|------|------|
+| `/api/posts` | GET | 获取所有文章 |
+| `/api/posts/:id` | GET | 获取单篇文章 |
+| `/api/posts` | POST | 创建文章 |
+| `/api/posts/:id` | PUT | 更新文章 |
+| `/api/posts/:id` | DELETE | 删除文章 |
+
+### 关于
+
+| 端点 | 方法 | 说明 |
+|------|------|------|
+| `/api/about` | GET | 获取关于内容 |
+| `/api/about` | PUT | 更新关于内容 |
+
+### 设置
+
+| 端点 | 方法 | 说明 |
+|------|------|------|
+| `/api/settings` | GET | 获取设置 |
+| `/api/settings` | PUT | 更新设置 |
+
+### 定时任务
+
+| 端点 | 方法 | 说明 |
+|------|------|------|
+| `/api/cron-tasks` | GET | 获取所有任务 |
+| `/api/cron-tasks` | POST | 创建任务 |
+| `/api/cron-tasks/:id` | PUT | 更新任务 |
+| `/api/cron-tasks/:id` | DELETE | 删除任务 |
+| `/api/cron-tasks/:id/run` | POST | 立即执行任务 |
+
+### 健康检查
+
+| 端点 | 方法 | 说明 |
+|------|------|------|
+| `/api/health` | GET | 服务健康状态 |
--- a/server/build.js
+++ b/server/build.js
@@ -0,0 +1,89 @@
+/**
+ * JNote 后端打包脚本
+ * 支持 Node.js 16.x
+ */
+
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+const serverDir = __dirname;
+
+// Node 16.x -> pkg 5.8.1
+const PKG_VERSION = '5.8.1';
+const TARGET_NODE_VERSION = 'node16';
+
+function log(msg) {
+  console.log(`[Build] ${msg}`);
+}
+
+function run(cmd) {
+  log(`执行: ${cmd}`);
+  execSync(cmd, { cwd: serverDir, stdio: 'inherit' });
+}
+
+function checkNodeVersion() {
+  const version = execSync('node --version', { encoding: 'utf8' }).trim();
+  const match = version.match(/^v(\d+)\./);
+  if (match) {
+    return parseInt(match[1]);
+  }
+  return null;
+}
+
+function main() {
+  console.log('=========================================');
+  console.log('  JNote 后端打包工具');
+  console.log(`  当前平台: ${isWindows ? 'Windows' : 'Linux'}`);
+  console.log('=========================================');
+
+  // 检查 Node.js 环境
+  const nodeMajor = checkNodeVersion();
+  if (!nodeMajor) {
+    console.error('❌ 错误: 未找到 Node.js');
+    process.exit(1);
+  }
+  log(`✓ Node.js 版本: v${nodeMajor}.x`);
+
+  // 安装依赖
+  console.log('');
+  log('📦 安装依赖...');
+  run('npm install');
+
+  // 安装 pkg
+  try {
+    execSync('pkg --version', { encoding: 'utf8', stdio: 'ignore' });
+    log('✓ pkg 已安装');
+  } catch {
+    console.log('');
+    log(`📦 安装 pkg ${PKG_VERSION}...`);
+    run(`npm install -g pkg@${PKG_VERSION}`);
+  }
+
+  // 创建 dist 目录
+  const distDir = path.join(serverDir, 'dist');
+  if (!fs.existsSync(distDir)) {
+    fs.mkdirSync(distDir, { recursive: true });
+  }
+
+  // 打包 Linux 版本
+  console.log('');
+  log(`🔨 打包 Linux 版本 (${TARGET_NODE_VERSION}-linux-x64)...`);
+  run(`pkg src/index.js --targets ${TARGET_NODE_VERSION}-linux-x64 --output dist/jnote-api`);
+
+  console.log('');
+  console.log('=========================================');
+  console.log('  打包完成！');
+  console.log('=========================================');
+  console.log('');
+  console.log('输出文件:');
+  console.log('  - dist/jnote-api       (Linux 可执行文件)');
+  console.log('');
+  console.log('下一步:');
+  console.log('  1. 将 dist/ 目录下的文件上传到服务器');
+  console.log('  2. 修改 .env 配置数据库等信息');
+  console.log('  3. 运行: chmod +x jnote-api && ./jnote-api');
+  console.log('');
+}
+
+main();
--- a/server/package-lock.json
+++ b/server/package-lock.json
--- a/server/package.js
+++ b/server/package.js
@@ -0,0 +1,193 @@
+/**
+ * JNote 后端分发包打包脚本
+ * 在 Windows 上运行，打包 Linux 和 Windows 两个版本
+ * 优化：Linux 生成 sh 脚本，Windows 生成 bat 脚本，原生直接执行
+ */
+
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+
+const serverDir = __dirname;
+const isWindows = os.platform() === 'win32';
+
+function log(msg) {
+  console.log(`[Package] ${msg}`);
+}
+
+function run(cmd) {
+  log(`执行: ${cmd}`);
+  execSync(cmd, { cwd: serverDir, stdio: 'inherit' });
+}
+
+function main() {
+  console.log('=========================================');
+  console.log('  JNote 后端分发包打包工具');
+  console.log(`  当前平台: ${isWindows ? 'Windows' : 'Linux'}`);
+  console.log('=========================================');
+
+  // 检查 Node.js 环境
+  try {
+    const nodeVersion = execSync('node --version', { encoding: 'utf8' }).trim();
+    log(`✓ Node.js 版本: ${nodeVersion}`);
+  } catch {
+    console.error('❌ 错误: 未找到 Node.js');
+    process.exit(1);
+  }
+
+  // 安装依赖
+  console.log('');
+  log('📦 安装依赖...');
+  run('npm install');
+
+  // 安装 pkg (如果未安装)
+  try {
+    execSync('pkg --version', { encoding: 'utf8', stdio: 'ignore' });
+    log('✓ pkg 已安装');
+  } catch {
+    console.log('');
+    log('📦 安装 pkg...');
+    run('npm install -g pkg');
+  }
+
+  // 创建输出目录
+  const distDir = path.join(serverDir, 'dist');
+  const releaseDir = path.join(serverDir, 'release');
+
+  // 清空并重建目录
+  if (fs.existsSync(distDir)) fs.rmSync(distDir, { recursive: true, force: true });
+  if (fs.existsSync(releaseDir)) fs.rmSync(releaseDir, { recursive: true, force: true });
+  fs.mkdirSync(distDir, { recursive: true });
+  fs.mkdirSync(releaseDir, { recursive: true });
+
+  const releaseLinux = path.join(releaseDir, 'linux');
+  const releaseWindows = path.join(releaseDir, 'windows');
+  fs.mkdirSync(releaseLinux, { recursive: true });
+  fs.mkdirSync(releaseWindows, { recursive: true });
+
+  // 打包 Linux 版本（适配你的 Node16）
+  console.log('');
+  log('🔨 打包 Linux 版本...');
+  run('pkg src/index.js --targets node16-linux-x64 --output dist/jnote-api');
+
+  // 打包 Windows 版本（适配你的 Node16）
+  console.log('');
+  log('🔨 打包 Windows 版本...');
+  run('pkg src/index.js --targets node16-win-x64 --output dist/jnote-api.exe');
+
+  // ===================== 核心优化 =====================
+  // 1. 复制 Linux 可执行文件 + 生成 .sh 启动脚本
+  const linuxExe = path.join(distDir, 'jnote-api');
+  if (fs.existsSync(linuxExe)) {
+    const targetLinuxExe = path.join(releaseLinux, 'jnote-api');
+    fs.copyFileSync(linuxExe, targetLinuxExe);
+    fs.chmodSync(targetLinuxExe, 0o755);
+
+    // 生成 Linux 原生启动脚本 start.sh
+    const shScript = `#!/bin/bash
+# JNote 后端服务启动脚本
+cd "$(dirname "$0")"
+./jnote-api
+`;
+    const shPath = path.join(releaseLinux, 'start.sh');
+    fs.writeFileSync(shPath, shScript, 'utf8');
+    fs.chmodSync(shPath, 0o755); // 赋可执行权限
+    log('✓ linux/jnote-api + start.sh (可直接执行)');
+  }
+
+  // 2. 复制 Windows 可执行文件 + 生成 .bat 启动脚本
+  const winExe = path.join(distDir, 'jnote-api.exe');
+  if (fs.existsSync(winExe)) {
+    fs.copyFileSync(winExe, path.join(releaseWindows, 'jnote-api.exe'));
+    
+    // 生成 Windows 原生启动脚本 start.bat
+    const batScript = `@echo off
+:: JNote 后端服务启动脚本
+cd /d "%~dp0"
+jnote-api.exe
+pause
+`;
+    const batPath = path.join(releaseWindows, 'start.bat');
+    // ✅ 修复：Node16 兼容 UTF-8 编码
+    fs.writeFileSync(batPath, batScript, 'utf8');
+    log('✓ windows/jnote-api.exe + start.bat (双击运行)');
+  }
+  // ====================================================
+
+  // 复制环境配置
+  const envSrc = path.join(serverDir, '.env');
+  const defaultEnv = `# 数据库配置
+DB_HOST=localhost
+DB_PORT=3306
+DB_USER=root
+DB_PASSWORD=your_password
+DB_NAME=jnote
+
+# RUSTFS 对象存储配置
+RUSTFS_ENDPOINT=http://localhost:9001
+RUSTFS_BUCKET=setting
+RUSTFS_ACCESS_KEY=rustfsadmin
+RUSTFS_SECRET_KEY=rustfsadmin
+
+# 服务器配置
+PORT=3000
+`;
+
+  if (fs.existsSync(envSrc)) {
+    fs.copyFileSync(envSrc, path.join(releaseLinux, '.env'));
+    fs.copyFileSync(envSrc, path.join(releaseLinux, '.env.example'));
+    fs.copyFileSync(envSrc, path.join(releaseWindows, '.env'));
+    fs.copyFileSync(envSrc, path.join(releaseWindows, '.env.example'));
+  } else {
+    fs.writeFileSync(path.join(releaseLinux, '.env'), defaultEnv, 'utf8');
+    fs.writeFileSync(path.join(releaseWindows, '.env'), defaultEnv, 'utf8');
+  }
+  log('✓ .env 配置文件生成完成');
+
+  // 创建 README
+  const readme = `JNote 后端服务部署说明
+=====================
+
+目录结构:
+├── linux/                    # Linux 服务器部署包
+│   ├── jnote-api            # Linux 可执行二进制文件
+│   ├── start.sh             # Linux 原生启动脚本
+│   └── .env                 # 环境配置
+│
+└── windows/                  # Windows 服务器部署包
+    ├── jnote-api.exe        # Windows 可执行程序
+    ├── start.bat            # Windows 原生启动脚本
+    └── .env                 # 环境配置
+
+部署步骤:
+
+【Linux 服务器】
+  1. 上传 linux/ 目录到服务器
+  2. 修改 .env 中的数据库配置
+  3. 直接运行: ./start.sh
+
+【Windows 服务器】
+  1. 上传 windows/ 目录到服务器
+  2. 修改 .env 中的数据库配置
+  3. 双击运行 start.bat 即可
+`;
+
+  fs.writeFileSync(path.join(releaseDir, 'README.txt'), readme, 'utf8');
+  log('✓ README.txt 生成完成');
+
+  // 清理临时文件
+  console.log('');
+  log('🧹 清理临时文件...');
+  try { fs.unlinkSync(linuxExe); } catch {}
+  try { fs.unlinkSync(winExe); } catch {}
+  try { fs.rmSync(distDir, { recursive: true, force: true }); } catch {}
+
+  console.log('');
+  console.log('=========================================');
+  console.log('  打包完成！');
+  console.log('=========================================');
+  console.log(`分发包目录: ${releaseDir}`);
+}
+
+main();
--- a/server/package.json
+++ b/server/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "jnote-server",
+  "version": "1.0.0",
+  "description": "Jnote-ui backend API server",
+  "main": "src/index.js",
+  "scripts": {
+    "dev": "nodemon src/index.js",
+    "start": "node src/index.js",
+    "build": "node build.js",
+    "package": "node package.js"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.1064.0",
+    "@aws-sdk/s3-request-presigner": "^3.1064.0",
+    "cors": "^2.8.5",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
+    "mysql2": "^3.22.5"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.2",
+    "pkg": "5.8.1"
+  }
+}
--- a/server/release/README.txt
+++ b/server/release/README.txt
@@ -0,0 +1,25 @@
+JNote 后端服务部署说明
+=====================
+
+目录结构:
+├── linux/                    # Linux 服务器部署包
+│   ├── jnote-api            # Linux 可执行二进制文件
+│   ├── start.sh             # Linux 原生启动脚本
+│   └── .env                 # 环境配置
+│
+└── windows/                  # Windows 服务器部署包
+    ├── jnote-api.exe        # Windows 可执行程序
+    ├── start.bat            # Windows 原生启动脚本
+    └── .env                 # 环境配置
+
+部署步骤:
+
+【Linux 服务器】
+  1. 上传 linux/ 目录到服务器
+  2. 修改 .env 中的数据库配置
+  3. 直接运行: ./start.sh
+
+【Windows 服务器】
+  1. 上传 windows/ 目录到服务器
+  2. 修改 .env 中的数据库配置
+  3. 双击运行 start.bat 即可
--- a/server/release/linux/.env
+++ b/server/release/linux/.env
@@ -0,0 +1,17 @@
+# 数据库配置
+DB_HOST=43.156.91.115
+DB_PORT=53306
+DB_USER=root
+# DB_PASSWORD=mysql_sX4mrh
+DB_PASSWORD=mariadb_hJbME5
+DB_NAME=jnote
+
+# RUSTFS 对象存储配置
+RUSTFS_ENDPOINT=http://43.156.91.115:9001
+RUSTFS_REGION=us-east-1
+RUSTFS_BUCKET=setting
+RUSTFS_ACCESS_KEY=rustfsadmin
+RUSTFS_SECRET_KEY=rustfsadmin
+
+# 服务器配置
+PORT=4501
--- a/server/release/linux/.env.example
+++ b/server/release/linux/.env.example
@@ -0,0 +1,17 @@
+# 数据库配置
+DB_HOST=43.156.91.115
+DB_PORT=53306
+DB_USER=root
+# DB_PASSWORD=mysql_sX4mrh
+DB_PASSWORD=mariadb_hJbME5
+DB_NAME=jnote
+
+# RUSTFS 对象存储配置
+RUSTFS_ENDPOINT=http://43.156.91.115:9001
+RUSTFS_REGION=us-east-1
+RUSTFS_BUCKET=setting
+RUSTFS_ACCESS_KEY=rustfsadmin
+RUSTFS_SECRET_KEY=rustfsadmin
+
+# 服务器配置
+PORT=4501
--- a/server/release/linux/jnote-api
+++ b/server/release/linux/jnote-api
--- a/server/release/linux/start.sh
+++ b/server/release/linux/start.sh
@@ -0,0 +1,4 @@
+#!/bin/bash
+# JNote 后端服务启动脚本
+cd "$(dirname "$0")"
+./jnote-api
--- a/server/release/windows/.env
+++ b/server/release/windows/.env
@@ -0,0 +1,17 @@
+# 数据库配置
+DB_HOST=43.156.91.115
+DB_PORT=53306
+DB_USER=root
+# DB_PASSWORD=mysql_sX4mrh
+DB_PASSWORD=mariadb_hJbME5
+DB_NAME=jnote
+
+# RUSTFS 对象存储配置
+RUSTFS_ENDPOINT=http://43.156.91.115:9001
+RUSTFS_REGION=us-east-1
+RUSTFS_BUCKET=setting
+RUSTFS_ACCESS_KEY=rustfsadmin
+RUSTFS_SECRET_KEY=rustfsadmin
+
+# 服务器配置
+PORT=4501
--- a/server/release/windows/.env.example
+++ b/server/release/windows/.env.example
@@ -0,0 +1,17 @@
+# 数据库配置
+DB_HOST=43.156.91.115
+DB_PORT=53306
+DB_USER=root
+# DB_PASSWORD=mysql_sX4mrh
+DB_PASSWORD=mariadb_hJbME5
+DB_NAME=jnote
+
+# RUSTFS 对象存储配置
+RUSTFS_ENDPOINT=http://43.156.91.115:9001
+RUSTFS_REGION=us-east-1
+RUSTFS_BUCKET=setting
+RUSTFS_ACCESS_KEY=rustfsadmin
+RUSTFS_SECRET_KEY=rustfsadmin
+
+# 服务器配置
+PORT=4501
--- a/server/release/windows/jnote-api.exe
+++ b/server/release/windows/jnote-api.exe
--- a/server/release/windows/start.bat
+++ b/server/release/windows/start.bat
@@ -0,0 +1,5 @@
+@echo off
+:: JNote 后端服务启动脚本
+cd /d "%~dp0"
+jnote-api.exe
+pause
--- a/server/src/config/cronScheduler.js
+++ b/server/src/config/cronScheduler.js
@@ -0,0 +1,166 @@
+/**
+ * 定时任务调度器
+ * 后端运行，周期性检查并执行到期的任务
+ */
+const { getPool } = require('./database');
+const memoryStore = require('./memoryStore');
+
+let schedulerInterval = null;
+let isRunning = false;
+
+function parseHeaders(headers) {
+  if (!headers) return {};
+  if (typeof headers === 'object') return headers;
+  try {
+    return JSON.parse(headers);
+  } catch {
+    return {};
+  }
+}
+
+function calculateNextRun(cron) {
+  const parts = cron.trim().split(/\s+/);
+  if (parts.length < 5) return null;
+
+  const now = new Date();
+  const next = new Date(now);
+
+  const [minute, hour, day, month, weekDay] = parts;
+
+  // 设置分钟
+  if (minute === '*') {
+    next.setMinutes(now.getMinutes() + 1, 0, 0);
+  } else if (minute.includes('/')) {
+    const step = parseInt(minute.split('/')[1]);
+    next.setMinutes(Math.ceil(now.getMinutes() / step) * step, 0, 0);
+  } else {
+    next.setMinutes(parseInt(minute), 0, 0);
+    if (next <= now) {
+      next.setHours(next.getHours() + 1);
+    }
+  }
+
+  // 设置小时
+  if (hour !== '*') {
+    if (hour.includes('/')) {
+      const step = parseInt(hour.split('/')[1]);
+      next.setHours(Math.ceil(now.getHours() / step) * step, 0, 0, 0);
+    } else {
+      next.setHours(parseInt(hour), 0, 0, 0);
+    }
+    if (next <= now) {
+      next.setDate(next.getDate() + 1);
+    }
+  }
+
+  return next;
+}
+
+async function executeTask(task) {
+  console.log(`[CronScheduler] 执行任务: ${task.name} (${task.id})`);
+
+  const options = {
+    method: task.method || 'GET',
+    headers: parseHeaders(task.headers)
+  };
+
+  if (task.body && ['POST', 'PUT', 'PATCH'].includes(task.method)) {
+    options.body = task.body;
+  }
+
+  try {
+    const response = await fetch(task.url, options);
+    const now = new Date();
+    const nextRun = calculateNextRun(task.cron);
+
+    console.log(`[CronScheduler] 任务 ${task.name} 执行完成: ${response.status}`);
+
+    // 更新数据库
+    const pool = getPool();
+    if (pool) {
+      await pool.execute(
+        'UPDATE cron_tasks SET last_run = ?, next_run = ?, run_count = run_count + 1 WHERE id = ?',
+        [now, nextRun, task.id]
+      );
+    } else {
+      // 更新内存存储
+      const idx = memoryStore.cronTasks.findIndex(t => t.id === task.id);
+      if (idx !== -1) {
+        memoryStore.cronTasks[idx].lastRun = now.toLocaleString('zh-CN');
+        memoryStore.cronTasks[idx].nextRun = nextRun;
+        memoryStore.cronTasks[idx].runCount = (memoryStore.cronTasks[idx].runCount || 0) + 1;
+      }
+    }
+  } catch (error) {
+    console.error(`[CronScheduler] 任务 ${task.name} 执行失败:`, error.message);
+
+    const now = new Date();
+    const nextRun = calculateNextRun(task.cron);
+
+    const pool = getPool();
+    if (pool) {
+      await pool.execute(
+        'UPDATE cron_tasks SET last_run = ?, next_run = ?, run_count = run_count + 1 WHERE id = ?',
+        [now, nextRun, task.id]
+      );
+    }
+  }
+}
+
+async function checkAndRunTasks() {
+  if (isRunning) return;
+  isRunning = true;
+
+  try {
+    const pool = getPool();
+    let tasks = [];
+
+    if (pool) {
+      const [rows] = await pool.execute('SELECT * FROM cron_tasks WHERE enabled = 1');
+      tasks = rows;
+    } else {
+      tasks = memoryStore.cronTasks.filter(t => t.enabled);
+    }
+
+    const now = new Date();
+
+    for (const task of tasks) {
+      if (!task.next_run && !task.nextRun) continue;
+
+      const nextRun = new Date(task.next_run || task.nextRun);
+      if (now >= nextRun) {
+        executeTask(task);
+      }
+    }
+  } catch (error) {
+    console.error('[CronScheduler] 检查任务失败:', error.message);
+  } finally {
+    isRunning = false;
+  }
+}
+
+function start() {
+  if (schedulerInterval) {
+    console.log('[CronScheduler] 已启动');
+    return;
+  }
+
+  console.log('[CronScheduler] 启动定时任务调度器 (每10秒检查一次)');
+  schedulerInterval = setInterval(checkAndRunTasks, 10000);
+
+  // 立即执行一次检查
+  checkAndRunTasks();
+}
+
+function stop() {
+  if (schedulerInterval) {
+    clearInterval(schedulerInterval);
+    schedulerInterval = null;
+    console.log('[CronScheduler] 已停止');
+  }
+}
+
+module.exports = {
+  start,
+  stop
+};
--- a/server/src/config/database.js
+++ b/server/src/config/database.js
@@ -0,0 +1,207 @@
+const mysql = require('mysql2/promise');
+const { DB_NAME, TABLE_DEFINITIONS, DEFAULT_DATA } = require('./schema');
+const memoryStore = require('./memoryStore');
+
+let pool = null;
+
+const config = {
+  host: process.env.DB_HOST || 'localhost',
+  port: process.env.DB_PORT || 3306,
+  user: process.env.DB_USER || 'root',
+  password: process.env.DB_PASSWORD || '',
+  waitForConnections: true,
+  connectionLimit: 10,
+  queueLimit: 0,
+  enableKeepAlive: true,
+  keepAliveInitialDelay: 0
+};
+
+async function initDatabase() {
+  const dbHost = process.env.DB_HOST;
+  const dbPassword = process.env.DB_PASSWORD;
+
+  if (!dbHost || !dbPassword) {
+    console.log('⚠️  数据库未配置，部分功能将使用内存存储');
+    console.log('   DB_HOST:', dbHost || '未设置');
+    console.log('   DB_PASSWORD:', dbPassword ? '已设置' : '未设置');
+    return null;
+  }
+
+  try {
+    // Step 1: 连接数据库服务器（不指定数据库）
+    const initConfig = { ...config };
+    delete initConfig.database;
+    const initConnection = await mysql.createConnection(initConfig);
+    console.log('🔌 已连接数据库服务器');
+
+    // Step 2: 创建数据库（如果不存在）
+    await initConnection.query(
+      `CREATE DATABASE IF NOT EXISTS \`${DB_NAME}\` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci`
+    );
+    console.log(`📦 数据库 ${DB_NAME} ${await databaseExists(initConnection) ? '已存在' : '已创建'}`);
+
+    // Step 3: 选择数据库
+    await initConnection.query(`USE \`${DB_NAME}\``);
+
+    // Step 4: 创建所有表
+    for (const table of TABLE_DEFINITIONS) {
+      await initConnection.query(table.sql);
+      console.log(`📋 ${table.name} 表 ${await tableExists(initConnection, table.name) ? '已存在' : '已创建'}`);
+    }
+
+    // Step 5: 初始化默认数据
+    await ensureDefaultData(initConnection);
+
+    await initConnection.end();
+
+    // Step 6: 创建连接池
+    const poolConfig = { ...config, database: DB_NAME };
+    pool = mysql.createPool(poolConfig);
+
+    // 测试连接池
+    const connection = await pool.getConnection();
+    console.log('✅ 数据库连接池创建成功');
+    connection.release();
+
+    // 预热缓存（不阻塞启动）
+    warmUpCache().catch(err => console.error('预热失败:', err.message));
+
+    return pool;
+  } catch (error) {
+    console.error('❌ 数据库初始化失败:', error.message);
+    console.log('⚠️  将使用内存存储作为后备');
+    return null;
+  }
+}
+
+// 检查数据库是否存在
+async function databaseExists(connection) {
+  const [rows] = await connection.query(
+    `SELECT SCHEMA_NAME FROM INFORMATION_SCHEMA.SCHEMATA WHERE SCHEMA_NAME = ?`,
+    [DB_NAME]
+  );
+  return rows.length > 0;
+}
+
+// 检查表是否存在
+async function tableExists(connection, tableName) {
+  const [rows] = await connection.query(
+    `SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA = ? AND TABLE_NAME = ?`,
+    [DB_NAME, tableName]
+  );
+  return rows.length > 0;
+}
+
+// 确保默认数据存在
+async function ensureDefaultData(connection) {
+  try {
+    // 检查 settings 是否存在
+    const [settingsRows] = await connection.query('SELECT id FROM settings WHERE id = 1');
+    if (settingsRows.length === 0) {
+      await connection.query(
+        'INSERT INTO settings (id, bg_type, bg_color, bg_opacity, language) VALUES (1, ?, ?, ?, ?)',
+        [DEFAULT_DATA.settings.bg_type, DEFAULT_DATA.settings.bg_color, DEFAULT_DATA.settings.bg_opacity, DEFAULT_DATA.settings.language]
+      );
+      console.log('   settings 默认数据已创建');
+    }
+
+    // 检查 about 是否存在
+    const [aboutRows] = await connection.query('SELECT id FROM about WHERE id = 1');
+    if (aboutRows.length === 0) {
+      await connection.query(
+        'INSERT INTO about (id, title, intro, blog, tech, features, contact, filing_number) VALUES (1, ?, ?, ?, ?, ?, ?, ?)',
+        [
+          DEFAULT_DATA.about.title,
+          DEFAULT_DATA.about.intro,
+          DEFAULT_DATA.about.blog,
+          DEFAULT_DATA.about.tech,
+          DEFAULT_DATA.about.features,
+          DEFAULT_DATA.about.contact,
+          DEFAULT_DATA.about.filing_number
+        ]
+      );
+      console.log('   about 默认数据已创建');
+    }
+  } catch (error) {
+    if (error.code !== 'ER_DUP_ENTRY') {
+      console.error('   默认数据初始化失败:', error.message);
+    }
+  }
+}
+
+// 数据预热 - 启动时加载常用数据到内存
+async function warmUpCache() {
+  if (!pool) return;
+
+  try {
+    const [posts] = await pool.execute('SELECT * FROM posts ORDER BY date DESC');
+    const [settings] = await pool.execute('SELECT * FROM settings WHERE id = 1');
+    const [about] = await pool.execute('SELECT * FROM about WHERE id = 1');
+
+    memoryStore.posts = posts;
+    if (settings.length > 0) {
+      memoryStore.settings = formatSettings(settings[0]);
+    }
+    if (about.length > 0) {
+      memoryStore.about = formatAbout(about[0]);
+    }
+
+    console.log('✅ 数据预热完成');
+  } catch (error) {
+    console.error('数据预热失败:', error.message);
+  }
+}
+
+function formatSettings(row) {
+  if (!row) return memoryStore.settings;
+
+  return {
+    bgType: row.bg_type,
+    bgColor: row.bg_color,
+    bgImage: row.bg_image,
+    bgOpacity: row.bg_opacity,
+    language: row.language,
+    favicon: row.favicon,
+    uploadedImages: parseJSON(row.uploaded_images, []),
+    uploadedIcons: parseJSON(row.uploaded_icons, [])
+  };
+}
+
+function formatAbout(row) {
+  if (!row) return memoryStore.about;
+  const about = { ...row };
+  if (about.tech && typeof about.tech === 'string') {
+    about.techList = about.tech.split(',').map(t => t.trim());
+  }
+  if (about.features && typeof about.features === 'string') {
+    try {
+      about.featuresList = JSON.parse(about.features);
+    } catch {
+      about.featuresList = [];
+    }
+  }
+  if (about.contact && typeof about.contact === 'string') {
+    try {
+      about.contactObj = JSON.parse(about.contact);
+    } catch {
+      about.contactObj = {};
+    }
+  }
+  return about;
+}
+
+function parseJSON(str, defaultValue) {
+  if (!str) return defaultValue;
+  if (typeof str === 'object') return str;
+  try {
+    return JSON.parse(str);
+  } catch {
+    return defaultValue;
+  }
+}
+
+function getPool() {
+  return pool;
+}
+
+module.exports = { initDatabase, getPool };
--- a/server/src/config/envManager.js
+++ b/server/src/config/envManager.js
@@ -0,0 +1,110 @@
+/**
+ * .env 文件管理器
+ * 读取和写入环境配置
+ */
+const fs = require('fs');
+const path = require('path');
+
+const ENV_PATH = path.join(__dirname, '../../.env');
+
+// 配置字段定义
+const CONFIG_FIELDS = {
+  db: ['DB_HOST', 'DB_PORT', 'DB_USER', 'DB_PASSWORD', 'DB_NAME'],
+  rustfs: ['RUSTFS_ENDPOINT', 'RUSTFS_REGION', 'RUSTFS_BUCKET', 'RUSTFS_ACCESS_KEY', 'RUSTFS_SECRET_KEY'],
+  server: ['PORT']
+};
+
+// 读取 .env 文件
+function readEnv() {
+  try {
+    if (!fs.existsSync(ENV_PATH)) {
+      return {};
+    }
+    const content = fs.readFileSync(ENV_PATH, 'utf-8');
+    const result = {};
+
+    content.split('\n').forEach(line => {
+      line = line.trim();
+      if (!line || line.startsWith('#')) return;
+
+      const idx = line.indexOf('=');
+      if (idx > 0) {
+        const key = line.substring(0, idx).trim();
+        const value = line.substring(idx + 1).trim();
+        result[key] = value;
+      }
+    });
+
+    return result;
+  } catch (error) {
+    console.error('读取 .env 失败:', error);
+    return {};
+  }
+}
+
+// 写入 .env 文件
+function writeEnv(config) {
+  try {
+    const lines = [];
+
+    // 数据库配置
+    lines.push('# 数据库配置');
+    lines.push(`DB_HOST=${config.DB_HOST || 'localhost'}`);
+    lines.push(`DB_PORT=${config.DB_PORT || 3306}`);
+    lines.push(`DB_USER=${config.DB_USER || 'root'}`);
+    lines.push(`DB_PASSWORD=${config.DB_PASSWORD || ''}`);
+    lines.push(`DB_NAME=${config.DB_NAME || 'jnote'}`);
+    lines.push('');
+
+    // RUSTFS 配置
+    lines.push('# RUSTFS 对象存储配置');
+    lines.push(`RUSTFS_ENDPOINT=${config.RUSTFS_ENDPOINT || 'http://43.156.91.115:9001'}`);
+    lines.push(`RUSTFS_REGION=${config.RUSTFS_REGION || 'us-east-1'}`);
+    lines.push(`RUSTFS_BUCKET=${config.RUSTFS_BUCKET || 'setting'}`);
+    lines.push(`RUSTFS_ACCESS_KEY=${config.RUSTFS_ACCESS_KEY || 'rustfsadmin'}`);
+    lines.push(`RUSTFS_SECRET_KEY=${config.RUSTFS_SECRET_KEY || 'rustfsadmin'}`);
+    lines.push('');
+
+    // 服务器配置
+    lines.push('# 服务器配置');
+    lines.push(`PORT=${config.PORT || 3000}`);
+
+    fs.writeFileSync(ENV_PATH, lines.join('\n'), 'utf-8');
+    return true;
+  } catch (error) {
+    console.error('写入 .env 失败:', error);
+    return false;
+  }
+}
+
+// 获取安全配置（密码隐藏）
+function getSafeConfig() {
+  const config = readEnv();
+
+  return {
+    db: {
+      host: config.DB_HOST || 'localhost',
+      port: config.DB_PORT || '3306',
+      user: config.DB_USER || 'root',
+      password: config.DB_PASSWORD ? '******' : '',
+      name: config.DB_NAME || 'jnote'
+    },
+    rustfs: {
+      endpoint: config.RUSTFS_ENDPOINT || 'http://43.156.91.115:9001',
+      region: config.RUSTFS_REGION || 'us-east-1',
+      bucket: config.RUSTFS_BUCKET || 'setting',
+      accessKey: config.RUSTFS_ACCESS_KEY || 'rustfsadmin',
+      secretKey: config.RUSTFS_SECRET_KEY ? '******' : ''
+    },
+    server: {
+      port: config.PORT || '3000'
+    }
+  };
+}
+
+module.exports = {
+  readEnv,
+  writeEnv,
+  getSafeConfig,
+  CONFIG_FIELDS
+};
--- a/server/src/config/memoryStore.js
+++ b/server/src/config/memoryStore.js
@@ -0,0 +1,50 @@
+// 内存存储后备方案（数据库未配置时使用）
+const memoryStore = {
+  posts: [
+    { id: 1, title: '欢迎来到我的编程学习记录', date: '2026-06-01', excerpt: '这是我的第一篇文章，欢迎大家来访！', content: '这是我的第一篇文章，欢迎大家来访！在这里我会分享一些技术心得和生活感悟。希望大家喜欢这里的内容，有任何问题欢迎留言交流。' },
+    { id: 2, title: 'Vue 3 组合式 API 入门', date: '2026-06-02', excerpt: '探索 Vue 3 的组合式 API，感受更好的代码组织方式。', content: 'Vue 3 引入了组合式 API，这是一种全新的代码组织方式。通过 setup 函数和响应式 API，我们可以更灵活地组织组件逻辑，提高代码的可复用性和可维护性。\n\n主要特点：\n1. 更好的逻辑复用\n2. 更灵活的代码组织\n3. 更好的 TypeScript 支持' },
+    { id: 3, title: '静态网站生成器选型', date: '2026-06-03', excerpt: '对比常见的静态网站生成器，帮助你选择合适的工具。', content: '选择一个合适的静态网站生成器需要考虑多个因素：\n\n1. Hexo - 简单易用，主题丰富\n2. Jekyll - GitHub Pages 原生支持，社区活跃\n3. Hugo - 构建速度极快\n4. VuePress / VitePress - 基于 Vue，适合技术文档\n\n本博客使用 Vue 3 + Vite 构建，兼具现代特性和开发体验。' },
+    { id: 4, title: '优雅地使用 Pinia 管理状态', date: '2026-06-04', excerpt: 'Pinia 是 Vue 3 推荐的状态管理方案，本篇介绍其基本用法。', content: 'Pinia 是 Vue 官方推荐的新一代状态管理库，相比 Vuex 更加轻量和直观。\n\n核心概念：\n- Store - 存储状态的地方\n- Getters - 类似 computed 的状态计算\n- Actions - 处理异步逻辑或修改状态' },
+    { id: 5, title: 'CSS Grid 布局实战技巧', date: '2026-06-05', excerpt: '深入探索 CSS Grid，让页面布局变得轻而易举。', content: 'CSS Grid 是现代 CSS 布局的重要组成部分，比 Flexbox 更适合二维布局场景。\n\n基础用法：\n.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }\n\n常用场景：\n1. 相册网格 - 自动填充列数\n2. 圣杯布局 - 经典三栏布局\n3. 响应式卡片 - 自动换行适配' },
+    { id: 6, title: '用 Git 工作流提升团队协作效率', date: '2026-06-06', excerpt: 'GitFlow vs trunk-based development，选对工作流事半功倍。', content: '良好的 Git 工作流能让团队协作更加顺畅。常见的工作流模型：\n\n1. GitFlow - 分支模型清晰，适合发布周期稳定的项目\n2. trunk-based development - 主干开发，快速迭代\n3. fork workflow - 开源项目首选，隔离性强\n\n小团队推荐使用简化 GitFlow：main + develop + feature 分支。' },
+    { id: 7, title: 'JavaScript 事件循环机制详解', date: '2026-06-07', excerpt: '理解 Event Loop、宏任务与微任务，告别异步编程困惑。', content: '事件循环是 JavaScript 异步编程的核心机制。\n\n执行顺序：\n1. 同步代码优先执行\n2. 微任务（Promise、MutationObserver）\n3. 宏任务（setTimeout、setInterval、setImmediate）\n\n示例：\nconsole.log(\'1\');\nsetTimeout(() => console.log(\'2\'), 0);\nPromise.resolve().then(() => console.log(\'3\'));\nconsole.log(\'4\');\n\n输出顺序：1, 4, 3, 2' },
+    { id: 8, title: '我的开发环境配置分享', date: '2026-06-08', excerpt: 'VS Code + Zsh + Tmux，打造高效开发终端。', content: '工欲善其事，必先利其器。分享我的开发环境配置：\n\n编辑器：\n- VS Code + Vim 插件\n- Tokyo Night 主题\n- Fira Code 字体 + 连字\n\n终端：\n- iTerm2 (macOS) / Windows Terminal\n- Oh My Zsh\n- Tmux 会话管理\n\n版本管理：\n- Git + delta 美化 diff\n- lazygit 终端 UI' },
+    { id: 9, title: '从零搭建一个 CLI 工具', date: '2026-06-09', excerpt: '使用 Node.js 和 commander.js 快速构建命令行工具。', content: '命令行工具是提升开发效率的利器。使用 Node.js 可以快速构建：\n\n初始化项目：\nnpm init -y\nnpm install commander inquirer\n\n核心代码：\nconst { program } = require(\'commander\');\nprogram.version(\'1.0.0\');\nprogram.option(\'-n, --name <name>\', \'项目名称\');\nprogram.parse(process.argv);\n\n发布到 npm：\nnpm publish --access public' },
+    { id: 10, title: '为什么我喜欢深夜编程', date: '2026-06-10', excerpt: '安静、专注、不被打扰，深夜是程序员的黄金时段。', content: '深夜编程的独特魅力：\n\n1. 绝对安静 - 无人打扰，思路连贯\n2. 效率翻倍 - 深度工作状态\n3. 问题解决 - 复杂 bug 往往在这时候被攻破\n\n当然，也要适度。注意休息，保护眼睛，第二天才能持续输出。\n\n推荐配合：黑咖啡 + 轻音乐 + 舒适的降噪耳机。' }
+  ],
+
+  about: {
+    id: 1,
+    title: '关于我',
+    intro: '你好！我是一名热爱技术开发的开发者。',
+    blog: '这个博客用于分享我在学习和工作中的一些心得体会。',
+    tech: 'Vue / Vue 3, JavaScript / TypeScript, Node.js, Vite, Pinia, Vue Router',
+    features: JSON.stringify([
+      '定时任务系统 - 支持 Cron表达式的自动化任务管理',
+      '自定义背景 - 支持纯色和图片背景，可调节透明度',
+      '多语言支持 - 中英文切换',
+      '自定义图标 - 上传本地图片作为网站图标'
+    ]),
+    contact: JSON.stringify({
+      email: 'example@email.com',
+      github: 'github.com/yourusername'
+    }),
+    filing_number: '桂ICP备2022004108号-1'
+  },
+
+  settings: {
+    id: 1,
+    bg_type: 'color',
+    bg_color: '#f5f5f5',
+    bg_image: '',
+    bg_opacity: 1.00,
+    language: 'zh',
+    favicon: '',
+    uploaded_images: JSON.stringify([]),
+    uploaded_icons: JSON.stringify([])
+  },
+
+  cronTasks: []
+};
+
+module.exports = memoryStore;
--- a/server/src/config/rustfs.js
+++ b/server/src/config/rustfs.js
@@ -0,0 +1,235 @@
+/**
+ * RUSTFS 对象存储配置
+ * 直接使用 HTTP API 避免 AWS SDK 兼容性问题
+ */
+const https = require('https');
+const http = require('http');
+const crypto = require('crypto');
+
+const config = {
+  endpoint: process.env.RUSTFS_ENDPOINT || 'http://43.156.91.115:9001',
+  bucket: process.env.RUSTFS_BUCKET || 'setting',
+  accessKey: process.env.RUSTFS_ACCESS_KEY || 'rustfsadmin',
+  secretKey: process.env.RUSTFS_SECRET_KEY || 'rustfsadmin'
+};
+
+// 生成 AWS Signature V4
+function createSignature(method, path, headers, query = '') {
+  const date = new Date().toISOString().replace(/[:\-]|\.\d{3}/g, '');
+  const dateShort = date.substring(0, 8);
+
+  const payloadHash = crypto.createHash('sha256').update('').digest('hex');
+  const canonicalHeaders = Object.entries(headers)
+    .map(([k, v]) => `${k.toLowerCase()}:${v}`)
+    .join('\n');
+  const signedHeaders = Object.keys(headers).map(k => k.toLowerCase()).join(';');
+
+  const canonicalRequest = [
+    method,
+    path,
+    query,
+    canonicalHeaders,
+    '',
+    signedHeaders,
+    payloadHash
+  ].join('\n');
+
+  const credentialScope = `${dateShort}/us-east-1/s3/aws4_request`;
+  const stringToSign = [
+    'AWS4-HMAC-SHA256',
+    date,
+    credentialScope,
+    crypto.createHash('sha256').update(canonicalRequest).digest('hex')
+  ].join('\n');
+
+  const kDate = crypto.createHmac('sha256', `AWS4${config.secretKey}`).update(dateShort).digest();
+  const kRegion = crypto.createHmac('sha256', kDate).update('us-east-1').digest();
+  const kService = crypto.createHmac('sha256', kRegion).update('s3').digest();
+  const kSigning = crypto.createHmac('sha256', kService).update('aws4_request').digest();
+  const signature = crypto.createHmac('sha256', kSigning).update(stringToSign).digest('hex');
+
+  return {
+    authorization: `AWS4-HMAC-SHA256 Credential=${config.accessKey}/${credentialScope}, SignedHeaders=${signedHeaders}, Signature=${signature}`,
+    'x-amz-date': date,
+    'x-amz-content-sha256': payloadHash
+  };
+}
+
+function makeRequest(method, path, body = null, contentType = 'application/octet-stream') {
+  return new Promise((resolve, reject) => {
+    const url = new URL(config.endpoint);
+    const isHttps = url.protocol === 'https:';
+    const httpModule = isHttps ? https : http;
+
+    const query = '';
+    const headers = {
+      'host': url.host,
+      'content-type': contentType,
+      'x-amz-date': new Date().toISOString().replace(/[:\-]|\.\d{3}/g, '').substring(0, 8) + 'T000000Z'
+    };
+
+    if (body) {
+      headers['content-length'] = Buffer.byteLength(body);
+    }
+
+    // 简化认证：使用 Access Key 作为 Authorization header
+    headers['Authorization'] = `AWS ${config.accessKey}:${crypto.createHash('sha256').update(config.secretKey).digest('hex')}`;
+
+    const options = {
+      hostname: url.hostname,
+      port: url.port || (isHttps ? 443 : 9001),
+      path: `/${config.bucket}${path}`,
+      method: method,
+      headers: headers
+    };
+
+    const req = httpModule.request(options, (res) => {
+      let data = '';
+      res.on('data', chunk => data += chunk);
+      res.on('end', () => {
+        if (res.statusCode >= 200 && res.statusCode < 300) {
+          resolve(data);
+        } else {
+          reject(new Error(`HTTP ${res.statusCode}: ${data}`));
+        }
+      });
+    });
+
+    req.on('error', reject);
+
+    if (body) {
+      req.write(body);
+    }
+    req.end();
+  });
+}
+
+/**
+ * 上传文件到 RUSTFS
+ */
+async function uploadFile(fileData, key, contentType = 'image/jpeg') {
+  // 解析 endpoint
+  const endpoint = config.endpoint;
+  const url = new URL(endpoint);
+  const isHttps = url.protocol === 'https:';
+  const httpModule = isHttps ? https : http;
+
+  const date = new Date().toISOString().replace(/[:\-]|\.\d{3}/g, '').substring(0, 8);
+  const datetime = date + 'T000000Z';
+
+  // 创建签名字符串
+  const credential = `${config.accessKey}/${date}/us-east-1/s3/aws4_request`;
+  const signedHeaders = 'content-type;host;x-amz-content-sha256;x-amz-date';
+  const contentHash = crypto.createHash('sha256').update(fileData).digest('hex');
+
+  const canonicalHeaders = [
+    `content-type:${contentType}`,
+    `host:${url.host}`,
+    `x-amz-content-sha256:${contentHash}`,
+    `x-amz-date:${datetime}`
+  ].join('\n');
+
+  const canonicalRequest = [
+    'PUT',
+    `/${config.bucket}/${key}`,
+    '',
+    canonicalHeaders,
+    '',
+    signedHeaders,
+    contentHash
+  ].join('\n');
+
+  const stringToSign = [
+    'AWS4-HMAC-SHA256',
+    datetime,
+    `${date}/us-east-1/s3/aws4_request`,
+    crypto.createHash('sha256').update(canonicalRequest).digest('hex')
+  ].join('\n');
+
+  // 计算签名
+  const k1 = crypto.createHmac('sha256', 'AWS4' + config.secretKey).update(date).digest();
+  const k2 = crypto.createHmac('sha256', k1).update('us-east-1').digest();
+  const k3 = crypto.createHmac('sha256', k2).update('s3').digest();
+  const k4 = crypto.createHmac('sha256', k3).update('aws4_request').digest();
+  const signature = crypto.createHmac('sha256', k4).update(stringToSign).digest('hex');
+
+  const authorization = `AWS4-HMAC-SHA256 Credential=${credential}, SignedHeaders=${signedHeaders}, Signature=${signature}`;
+
+  return new Promise((resolve, reject) => {
+    const options = {
+      hostname: url.hostname,
+      port: url.port || (isHttps ? 443 : 9001),
+      path: `/${config.bucket}/${key}`,
+      method: 'PUT',
+      headers: {
+        'Content-Type': contentType,
+        'Host': url.host,
+        'X-Amz-Content-Sha256': contentHash,
+        'X-Amz-Date': datetime,
+        'Authorization': authorization,
+        'Content-Length': Buffer.byteLength(fileData)
+      }
+    };
+
+    const req = httpModule.request(options, (res) => {
+      let data = '';
+      res.on('data', chunk => data += chunk);
+      res.on('end', () => {
+        if (res.statusCode >= 200 && res.statusCode < 300) {
+          resolve(`${endpoint}/${config.bucket}/${key}`);
+        } else {
+          reject(new Error(`Upload failed: HTTP ${res.statusCode} - ${data}`));
+        }
+      });
+    });
+
+    req.on('error', reject);
+    req.write(fileData);
+    req.end();
+  });
+}
+
+/**
+ * 删除 RUSTFS 中的文件
+ */
+async function deleteFile(key) {
+  const endpoint = config.endpoint;
+  const url = new URL(endpoint);
+  const isHttps = url.protocol === 'https:';
+  const httpModule = isHttps ? https : http;
+
+  const datetime = new Date().toISOString().replace(/[:\-]|\.\d{3}/g, '').substring(0, 8) + 'T000000Z';
+
+  return new Promise((resolve, reject) => {
+    const options = {
+      hostname: url.hostname,
+      port: url.port || (isHttps ? 443 : 9001),
+      path: `/${config.bucket}/${key}`,
+      method: 'DELETE',
+      headers: {
+        'Host': url.host,
+        'X-Amz-Date': datetime,
+        'Authorization': `AWS ${config.accessKey}:${crypto.createHash('sha256').update(config.secretKey).digest('hex')}`
+      }
+    };
+
+    const req = httpModule.request(options, (res) => {
+      if (res.statusCode >= 200 && res.statusCode < 300) {
+        resolve();
+      } else {
+        let data = '';
+        res.on('data', chunk => data += chunk);
+        res.on('end', () => reject(new Error(`Delete failed: HTTP ${res.statusCode}`)));
+      }
+    });
+
+    req.on('error', reject);
+    req.end();
+  });
+}
+
+module.exports = {
+  uploadFile,
+  deleteFile,
+  config
+};
--- a/server/src/config/schema.js
+++ b/server/src/config/schema.js
@@ -0,0 +1,108 @@
+/**
+ * 数据库表结构定义
+ * 包含所有表的 CREATE TABLE 语句
+ */
+
+const DB_NAME = process.env.DB_NAME || 'jnote';
+
+// posts 表 - content 改为 MEDIUMTEXT 支持更大内容
+const CREATE_POSTS_TABLE = `
+CREATE TABLE IF NOT EXISTS posts (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  title VARCHAR(255) NOT NULL,
+  date DATE NOT NULL,
+  excerpt TEXT,
+  content MEDIUMTEXT,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  INDEX idx_posts_date (date DESC)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+`;
+
+// about 表 - features 和 contact 改为 JSON 类型
+const CREATE_ABOUT_TABLE = `
+CREATE TABLE IF NOT EXISTS about (
+  id INT PRIMARY KEY DEFAULT 1,
+  title VARCHAR(255) DEFAULT '关于我',
+  intro TEXT,
+  blog TEXT,
+  tech TEXT,
+  features JSON,
+  contact JSON,
+  filing_number VARCHAR(100),
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+`;
+
+// settings 表 - uploaded_images/icons 改为 JSON 类型，bg_image/favicon 改为更节省空间的 TEXT
+const CREATE_SETTINGS_TABLE = `
+CREATE TABLE IF NOT EXISTS settings (
+  id INT PRIMARY KEY DEFAULT 1,
+  bg_type VARCHAR(20) DEFAULT 'color',
+  bg_color VARCHAR(20) DEFAULT '#f5f5f5',
+  bg_image TEXT,
+  bg_opacity DECIMAL(3,2) DEFAULT 1.00,
+  language VARCHAR(10) DEFAULT 'zh',
+  favicon TEXT,
+  uploaded_images JSON,
+  uploaded_icons JSON,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+`;
+
+// cron_tasks 表
+const CREATE_CRON_TASKS_TABLE = `
+CREATE TABLE IF NOT EXISTS cron_tasks (
+  id VARCHAR(50) PRIMARY KEY,
+  name VARCHAR(255) NOT NULL,
+  cron VARCHAR(50) NOT NULL,
+  url VARCHAR(500) NOT NULL,
+  method VARCHAR(20) DEFAULT 'GET',
+  headers TEXT,
+  body TEXT,
+  enabled TINYINT(1) DEFAULT 1,
+  last_run DATETIME,
+  next_run DATETIME,
+  run_count INT DEFAULT 0,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+`;
+
+// 所有表创建的执行顺序（按依赖关系）
+const TABLE_DEFINITIONS = [
+  { name: 'posts', sql: CREATE_POSTS_TABLE },
+  { name: 'about', sql: CREATE_ABOUT_TABLE },
+  { name: 'settings', sql: CREATE_SETTINGS_TABLE },
+  { name: 'cron_tasks', sql: CREATE_CRON_TASKS_TABLE }
+];
+
+// 默认数据
+const DEFAULT_DATA = {
+  about: {
+    title: '关于我',
+    intro: '你好！我是一名热爱技术开发的开发者。',
+    blog: '这个博客用于分享我在学习和工作中的一些心得体会。',
+    tech: 'Vue / Vue 3, JavaScript / TypeScript, Node.js, Vite, Pinia, Vue Router',
+    features: JSON.stringify([
+      '定时任务系统 - 支持 Cron表达式的自动化任务管理',
+      '自定义背景 - 支持纯色和图片背景，可调节透明度',
+      '多语言支持 - 中英文切换',
+      '自定义图标 - 上传本地图片作为网站图标'
+    ]),
+    contact: JSON.stringify({ email: 'example@email.com', github: 'github.com/yourusername' }),
+    filing_number: '桂ICP备2022004108号-1'
+  },
+  settings: {
+    bg_type: 'color',
+    bg_color: '#f5f5f5',
+    bg_opacity: 1.00,
+    language: 'zh'
+  }
+};
+
+module.exports = {
+  DB_NAME,
+  TABLE_DEFINITIONS,
+  DEFAULT_DATA
+};
--- a/server/src/index.js
+++ b/server/src/index.js
@@ -0,0 +1,52 @@
+require('dotenv').config();
+
+const express = require('express');
+const cors = require('cors');
+const { initDatabase } = require('./config/database');
+const cronScheduler = require('./config/cronScheduler');
+
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+// 中间件
+app.use(cors());
+app.use(express.json({ limit: '10mb' }));
+
+// 路由
+const postsRouter = require('./routes/posts');
+const aboutRouter = require('./routes/about');
+const settingsRouter = require('./routes/settings');
+const cronRouter = require('./routes/cron');
+const configRouter = require('./routes/config');
+
+app.use('/api/posts', postsRouter);
+app.use('/api/about', aboutRouter);
+app.use('/api/settings', settingsRouter);
+app.use('/api/cron-tasks', cronRouter);
+app.use('/api/config', configRouter);
+
+// 健康检查
+app.get('/api/health', (req, res) => {
+  res.json({ status: 'ok', timestamp: new Date().toISOString() });
+});
+
+// 错误处理
+app.use((err, req, res, next) => {
+  console.error('Error:', err);
+  res.status(500).json({ error: '服务器内部错误' });
+});
+
+// 启动服务器
+async function start() {
+  await initDatabase();
+
+  // 启动定时任务调度器
+  cronScheduler.start();
+
+  app.listen(PORT, () => {
+    console.log(`🚀 服务器运行在 http://localhost:${PORT}`);
+    console.log(`📖 API 文档: http://localhost:${PORT}/api/health`);
+  });
+}
+
+start();
--- a/server/src/routes/about.js
+++ b/server/src/routes/about.js
@@ -0,0 +1,96 @@
+const express = require('express');
+const router = express.Router();
+const { getPool } = require('../config/database');
+const memoryStore = require('../config/memoryStore');
+
+// 获取关于内容 - 优先使用预热缓存
+router.get('/', async (req, res) => {
+  try {
+    const pool = getPool();
+
+    if (!pool) {
+      return res.json(memoryStore.about);
+    }
+
+    // 优先返回缓存数据
+    if (memoryStore.about && memoryStore.about.id === 1) {
+      return res.json(memoryStore.about);
+    }
+
+    const [rows] = await pool.execute('SELECT * FROM about WHERE id = 1');
+    if (rows.length === 0) {
+      return res.json(memoryStore.about);
+    }
+
+    const about = formatAbout(rows[0]);
+    memoryStore.about = about;
+    res.json(about);
+  } catch (error) {
+    console.error('获取关于内容失败:', error);
+    res.json(memoryStore.about);
+  }
+});
+
+// 格式化 about 数据 - MySQL JSON 类型直接返回对象
+function formatAbout(row) {
+  if (!row) return memoryStore.about;
+  const about = { ...row };
+  if (about.tech && typeof about.tech === 'string') {
+    about.techList = about.tech.split(',').map(t => t.trim());
+  }
+  // MySQL JSON 类型直接返回 JS 对象，不需要 JSON.parse
+  if (about.features && typeof about.features === 'string') {
+    try {
+      about.featuresList = JSON.parse(about.features);
+    } catch {
+      about.featuresList = Array.isArray(about.features) ? about.features : [];
+    }
+  } else if (Array.isArray(about.features)) {
+    about.featuresList = about.features;
+  }
+  if (about.contact && typeof about.contact === 'string') {
+    try {
+      about.contactObj = JSON.parse(about.contact);
+    } catch {
+      about.contactObj = typeof about.contact === 'object' ? about.contact : {};
+    }
+  } else if (typeof about.contact === 'object') {
+    about.contactObj = about.contact;
+  }
+  return about;
+}
+
+// 更新关于内容
+router.put('/', async (req, res) => {
+  try {
+    const { title, intro, blog, tech, features, contact, filing_number } = req.body;
+    const pool = getPool();
+
+    if (!pool) {
+      Object.assign(memoryStore.about, { title, intro, blog, tech, features, contact, filing_number });
+      return res.json(memoryStore.about);
+    }
+
+    await pool.execute(
+      `UPDATE about SET title = ?, intro = ?, blog = ?, tech = ?, features = ?, contact = ?, filing_number = ? WHERE id = 1`,
+      [
+        title || '关于我',
+        intro || '',
+        tech || '',
+        typeof features === 'object' ? JSON.stringify(features) : features || '[]',
+        typeof contact === 'object' ? JSON.stringify(contact) : contact || '{}',
+        filing_number || ''
+      ]
+    );
+
+    const [rows] = await pool.execute('SELECT * FROM about WHERE id = 1');
+    const updated = formatAbout(rows[0]);
+    memoryStore.about = updated;
+    res.json(updated);
+  } catch (error) {
+    console.error('更新关于内容失败:', error);
+    res.status(500).json({ error: '更新关于内容失败' });
+  }
+});
+
+module.exports = router;
--- a/server/src/routes/config.js
+++ b/server/src/routes/config.js
@@ -0,0 +1,73 @@
+const express = require('express');
+const router = express.Router();
+const envManager = require('../config/envManager');
+
+// 获取当前配置（密码隐藏）
+router.get('/', (req, res) => {
+  try {
+    const config = envManager.getSafeConfig();
+    res.json(config);
+  } catch (error) {
+    console.error('获取配置失败:', error);
+    res.status(500).json({ error: '获取配置失败' });
+  }
+});
+
+// 更新配置
+router.put('/', (req, res) => {
+  try {
+    const { db, rustfs, server } = req.body;
+
+    const config = {
+      // 数据库配置
+      DB_HOST: db?.host || 'localhost',
+      DB_PORT: db?.port || '3306',
+      DB_USER: db?.user || 'root',
+      DB_PASSWORD: db?.password || '',
+      DB_NAME: db?.name || 'jnote',
+      // RUSTFS 配置
+      RUSTFS_ENDPOINT: rustfs?.endpoint || 'http://43.156.91.115:9001',
+      RUSTFS_REGION: rustfs?.region || 'us-east-1',
+      RUSTFS_BUCKET: rustfs?.bucket || 'setting',
+      RUSTFS_ACCESS_KEY: rustfs?.accessKey || 'rustfsadmin',
+      RUSTFS_SECRET_KEY: rustfs?.secretKey || 'rustfsadmin',
+      // 服务器配置
+      PORT: server?.port || '3000'
+    };
+
+    // 如果密码字段为 ******，说明没改，从原文件读取
+    if (db?.password === '******') {
+      const oldConfig = envManager.readEnv();
+      config.DB_PASSWORD = oldConfig.DB_PASSWORD || '';
+    }
+    if (rustfs?.secretKey === '******') {
+      const oldConfig = envManager.readEnv();
+      config.RUSTFS_SECRET_KEY = oldConfig.RUSTFS_SECRET_KEY || '';
+    }
+
+    const success = envManager.writeEnv(config);
+    if (!success) {
+      return res.status(500).json({ error: '保存配置失败' });
+    }
+
+    res.json(envManager.getSafeConfig());
+  } catch (error) {
+    console.error('更新配置失败:', error);
+    res.status(500).json({ error: '更新配置失败' });
+  }
+});
+
+// 重启服务
+router.post('/restart', (req, res) => {
+  console.log('收到重启信号，准备关闭服务...');
+
+  // 优雅退出，让 PM2 或其他进程管理器自动重启
+  res.json({ message: '服务即将重启', delay: 1000 });
+
+  // 延迟一点再退出，让响应先发出去
+  setTimeout(() => {
+    process.exit(0);
+  }, 500);
+});
+
+module.exports = router;
--- a/server/src/routes/cron.js
+++ b/server/src/routes/cron.js
@@ -0,0 +1,249 @@
+const express = require('express');
+const router = express.Router();
+const { getPool } = require('../config/database');
+const memoryStore = require('../config/memoryStore');
+
+// 获取所有定时任务
+router.get('/', async (req, res) => {
+  try {
+    const pool = getPool();
+
+    if (!pool) {
+      return res.json(memoryStore.cronTasks);
+    }
+
+    const [rows] = await pool.execute('SELECT * FROM cron_tasks ORDER BY created_at DESC');
+    res.json(rows.map(formatCronTask));
+  } catch (error) {
+    console.error('获取定时任务失败:', error);
+    res.json(memoryStore.cronTasks);
+  }
+});
+
+// 创建定时任务
+router.post('/', async (req, res) => {
+  try {
+    const { name, cron, url, method, headers, body, enabled } = req.body;
+
+    if (!name || !cron || !url) {
+      return res.status(400).json({ error: '任务名称、Cron表达式和URL是必填项' });
+    }
+
+    const pool = getPool();
+    const id = Date.now().toString();
+    const nextRun = calculateNextRun(cron);
+
+    if (!pool) {
+      const newTask = {
+        id,
+        name,
+        cron,
+        url,
+        method: method || 'GET',
+        headers: headers || '',
+        body: body || '',
+        enabled: enabled !== false,
+        lastRun: null,
+        nextRun,
+        runCount: 0
+      };
+      memoryStore.cronTasks.push(newTask);
+      return res.status(201).json(newTask);
+    }
+
+    await pool.execute(
+      `INSERT INTO cron_tasks (id, name, cron, url, method, headers, body, enabled, next_run, run_count)
+       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, 0)`,
+      [id, name, cron, url, method || 'GET', headers || '', body || '', enabled !== false ? 1 : 0, nextRun]
+    );
+
+    const [rows] = await pool.execute('SELECT * FROM cron_tasks WHERE id = ?', [id]);
+    res.status(201).json(formatCronTask(rows[0]));
+  } catch (error) {
+    console.error('创建定时任务失败:', error);
+    res.status(500).json({ error: '创建定时任务失败' });
+  }
+});
+
+// 更新定时任务
+router.put('/:id', async (req, res) => {
+  try {
+    const { name, cron, url, method, headers, body, enabled } = req.body;
+    const pool = getPool();
+
+    if (!pool) {
+      const index = memoryStore.cronTasks.findIndex(t => t.id === req.params.id);
+      if (index === -1) {
+        return res.status(404).json({ error: '任务未找到' });
+      }
+      const nextRun = calculateNextRun(cron);
+      memoryStore.cronTasks[index] = {
+        ...memoryStore.cronTasks[index],
+        name, cron, url, method, headers, body, enabled, nextRun
+      };
+      return res.json(memoryStore.cronTasks[index]);
+    }
+
+    const nextRun = calculateNextRun(cron);
+    await pool.execute(
+      `UPDATE cron_tasks SET name = ?, cron = ?, url = ?, method = ?, headers = ?, body = ?, enabled = ?, next_run = ? WHERE id = ?`,
+      [name, cron, url, method || 'GET', headers || '', body || '', enabled ? 1 : 0, nextRun, req.params.id]
+    );
+
+    const [rows] = await pool.execute('SELECT * FROM cron_tasks WHERE id = ?', [req.params.id]);
+    if (rows.length === 0) {
+      return res.status(404).json({ error: '任务未找到' });
+    }
+    res.json(formatCronTask(rows[0]));
+  } catch (error) {
+    console.error('更新定时任务失败:', error);
+    res.status(500).json({ error: '更新定时任务失败' });
+  }
+});
+
+// 删除定时任务
+router.delete('/:id', async (req, res) => {
+  try {
+    const pool = getPool();
+
+    if (!pool) {
+      const index = memoryStore.cronTasks.findIndex(t => t.id === req.params.id);
+      if (index === -1) {
+        return res.status(404).json({ error: '任务未找到' });
+      }
+      memoryStore.cronTasks.splice(index, 1);
+      return res.status(204).send();
+    }
+
+    const [result] = await pool.execute('DELETE FROM cron_tasks WHERE id = ?', [req.params.id]);
+    if (result.affectedRows === 0) {
+      return res.status(404).json({ error: '任务未找到' });
+    }
+    res.status(204).send();
+  } catch (error) {
+    console.error('删除定时任务失败:', error);
+    res.status(500).json({ error: '删除定时任务失败' });
+  }
+});
+
+// 立即执行任务
+router.post('/:id/run', async (req, res) => {
+  try {
+    const pool = getPool();
+
+    let task;
+    if (!pool) {
+      task = memoryStore.cronTasks.find(t => t.id === req.params.id);
+      if (!task) {
+        return res.status(404).json({ error: '任务未找到' });
+      }
+    } else {
+      const [rows] = await pool.execute('SELECT * FROM cron_tasks WHERE id = ?', [req.params.id]);
+      if (rows.length === 0) {
+        return res.status(404).json({ error: '任务未找到' });
+      }
+      task = formatCronTask(rows[0]);
+    }
+
+    // 执行 HTTP 请求
+    const options = {
+      method: task.method || 'GET',
+      headers: parseHeaders(task.headers)
+    };
+
+    if (task.body && ['POST', 'PUT', 'PATCH'].includes(task.method)) {
+      options.body = task.body;
+    }
+
+    const response = await fetch(task.url, options);
+    const now = new Date();
+    const nextRun = calculateNextRun(task.cron);
+
+    if (!pool) {
+      task.lastRun = now.toLocaleString('zh-CN');
+      task.runCount = (task.runCount || 0) + 1;
+      task.nextRun = nextRun;
+      return res.json({
+        success: response.ok,
+        status: response.status,
+        lastRun: task.lastRun,
+        nextRun: task.nextRun,
+        runCount: task.runCount
+      });
+    }
+
+    await pool.execute(
+      'UPDATE cron_tasks SET last_run = ?, next_run = ?, run_count = run_count + 1 WHERE id = ?',
+      [now, nextRun, req.params.id]
+    );
+
+    res.json({
+      success: response.ok,
+      status: response.status,
+      lastRun: now.toLocaleString('zh-CN'),
+      nextRun,
+      runCount: task.runCount + 1
+    });
+  } catch (error) {
+    console.error('执行任务失败:', error);
+    res.status(500).json({ error: '执行任务失败: ' + error.message });
+  }
+});
+
+function formatCronTask(row) {
+  if (!row) return null;
+
+  return {
+    id: row.id,
+    name: row.name,
+    cron: row.cron,
+    url: row.url,
+    method: row.method,
+    headers: row.headers,
+    body: row.body,
+    enabled: Boolean(row.enabled),
+    lastRun: row.last_run ? row.last_run.toLocaleString('zh-CN') : null,
+    nextRun: row.next_run ? row.next_run.toLocaleString('zh-CN') : null,
+    runCount: row.run_count || 0
+  };
+}
+
+function parseHeaders(headers) {
+  if (!headers) return {};
+  if (typeof headers === 'object') return headers;
+  try {
+    return JSON.parse(headers);
+  } catch {
+    return {};
+  }
+}
+
+function calculateNextRun(cron) {
+  const parts = cron.trim().split(/\s+/);
+  if (parts.length < 5) return null;
+
+  const now = new Date();
+  const next = new Date(now);
+
+  const minute = parts[0];
+  const hour = parts[1];
+
+  if (minute === '*') {
+    next.setMinutes(now.getMinutes() + 1);
+  } else if (minute.includes('/')) {
+    const step = parseInt(minute.split('/')[1]);
+    next.setMinutes(Math.ceil(now.getMinutes() / step) * step);
+  } else {
+    next.setMinutes(parseInt(minute));
+    if (next <= now) next.setHours(next.getHours() + 1);
+  }
+
+  if (hour !== '*') {
+    next.setHours(parseInt(hour), 0, 0, 0);
+    if (next <= now) next.setDate(next.getDate() + 1);
+  }
+
+  return next;
+}
+
+module.exports = router;
--- a/server/src/routes/posts.js
+++ b/server/src/routes/posts.js
@@ -0,0 +1,188 @@
+const express = require('express');
+const router = express.Router();
+const { getPool } = require('../config/database');
+const memoryStore = require('../config/memoryStore');
+
+// 格式化日期为 YYYY-MM-DD HH:mm:ss
+function formatDate(date) {
+  if (!date) return '';
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return date;
+  const pad = n => n.toString().padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+
+// 获取所有文章 - 优先使用预热缓存
+router.get('/', async (req, res) => {
+  try {
+    const pool = getPool();
+
+    if (!pool) {
+      return res.json(memoryStore.posts);
+    }
+
+    // 优先返回缓存数据（已预热）
+    if (memoryStore.posts && memoryStore.posts.length > 0) {
+      return res.json(memoryStore.posts.map(p => ({ ...p, date: formatDate(p.date) })));
+    }
+
+    const [rows] = await pool.execute('SELECT * FROM posts ORDER BY date DESC');
+    const formatted = rows.map(r => ({ ...r, date: formatDate(r.date) }));
+    // 更新缓存
+    memoryStore.posts = rows;
+    res.json(formatted);
+  } catch (error) {
+    console.error('获取文章列表失败:', error);
+    res.json(memoryStore.posts || []);
+  }
+});
+
+// 获取单篇文章
+router.get('/:id', async (req, res) => {
+  try {
+    const pool = getPool();
+    const id = Number(req.params.id);
+
+    if (!pool) {
+      const post = memoryStore.posts.find(p => p.id === id);
+      return post ? res.json({ ...post, date: formatDate(post.date) }) : res.status(404).json({ error: '文章未找到' });
+    }
+
+    // 先在缓存中查找
+    if (memoryStore.posts && memoryStore.posts.length > 0) {
+      const cached = memoryStore.posts.find(p => p.id === id);
+      if (cached) {
+        return res.json({ ...cached, date: formatDate(cached.date) });
+      }
+    }
+
+    const [rows] = await pool.execute('SELECT * FROM posts WHERE id = ?', [id]);
+    if (rows.length === 0) {
+      return res.status(404).json({ error: '文章未找到' });
+    }
+    res.json({ ...rows[0], date: formatDate(rows[0].date) });
+  } catch (error) {
+    console.error('获取文章失败:', error);
+    const post = memoryStore.posts.find(p => p.id === Number(req.params.id));
+    post ? res.json({ ...post, date: formatDate(post.date) }) : res.status(404).json({ error: '文章未找到' });
+  }
+});
+
+// 创建文章
+router.post('/', async (req, res) => {
+  try {
+    const { title, date, excerpt, content } = req.body;
+
+    if (!title || !date) {
+      return res.status(400).json({ error: '标题和日期是必填项' });
+    }
+
+    const pool = getPool();
+
+    if (!pool) {
+      const newPost = {
+        id: memoryStore.posts.length + 1,
+        title,
+        date,
+        excerpt: excerpt || '',
+        content: content || ''
+      };
+      memoryStore.posts.unshift(newPost);
+      return res.status(201).json({ ...newPost, date: formatDate(newPost.date) });
+    }
+
+    const [result] = await pool.execute(
+      'INSERT INTO posts (title, date, excerpt, content) VALUES (?, ?, ?, ?)',
+      [title, date, excerpt || '', content || '']
+    );
+
+    const [rows] = await pool.execute('SELECT * FROM posts WHERE id = ?', [result.insertId]);
+    const newPost = rows[0];
+
+    // 同步更新缓存
+    if (memoryStore.posts) {
+      memoryStore.posts.unshift(newPost);
+    }
+
+    res.status(201).json({ ...newPost, date: formatDate(newPost.date) });
+  } catch (error) {
+    console.error('创建文章失败:', error);
+    res.status(500).json({ error: '创建文章失败' });
+  }
+});
+
+// 更新文章
+router.put('/:id', async (req, res) => {
+  try {
+    const { title, date, excerpt, content } = req.body;
+    const pool = getPool();
+    const id = Number(req.params.id);
+
+    if (!pool) {
+      const index = memoryStore.posts.findIndex(p => p.id === id);
+      if (index === -1) {
+        return res.status(404).json({ error: '文章未找到' });
+      }
+      memoryStore.posts[index] = { ...memoryStore.posts[index], title, date, excerpt, content };
+      return res.json({ ...memoryStore.posts[index], date: formatDate(memoryStore.posts[index].date) });
+    }
+
+    await pool.execute(
+      'UPDATE posts SET title = ?, date = ?, excerpt = ?, content = ? WHERE id = ?',
+      [title, date, excerpt || '', content || '', id]
+    );
+
+    const [rows] = await pool.execute('SELECT * FROM posts WHERE id = ?', [id]);
+    if (rows.length === 0) {
+      return res.status(404).json({ error: '文章未找到' });
+    }
+    const updated = rows[0];
+
+    // 同步更新缓存
+    if (memoryStore.posts) {
+      const index = memoryStore.posts.findIndex(p => p.id === id);
+      if (index !== -1) {
+        memoryStore.posts[index] = updated;
+      }
+    }
+
+    res.json({ ...updated, date: formatDate(updated.date) });
+  } catch (error) {
+    console.error('更新文章失败:', error);
+    res.status(500).json({ error: '更新文章失败' });
+  }
+});
+
+// 删除文章
+router.delete('/:id', async (req, res) => {
+  try {
+    const pool = getPool();
+    const id = Number(req.params.id);
+
+    if (!pool) {
+      const index = memoryStore.posts.findIndex(p => p.id === id);
+      if (index === -1) {
+        return res.status(404).json({ error: '文章未找到' });
+      }
+      memoryStore.posts.splice(index, 1);
+      return res.status(204).send();
+    }
+
+    const [result] = await pool.execute('DELETE FROM posts WHERE id = ?', [id]);
+    if (result.affectedRows === 0) {
+      return res.status(404).json({ error: '文章未找到' });
+    }
+
+    // 同步更新缓存
+    if (memoryStore.posts) {
+      memoryStore.posts = memoryStore.posts.filter(p => p.id !== id);
+    }
+
+    res.status(204).send();
+  } catch (error) {
+    console.error('删除文章失败:', error);
+    res.status(500).json({ error: '删除文章失败' });
+  }
+});
+
+module.exports = router;
--- a/server/src/routes/settings.js
+++ b/server/src/routes/settings.js
@@ -0,0 +1,216 @@
+const express = require('express');
+const router = express.Router();
+const { getPool } = require('../config/database');
+const memoryStore = require('../config/memoryStore');
+const rustfs = require('../config/rustfs');
+
+// 生成唯一文件名
+function generateKey(prefix, id) {
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).substring(2, 8);
+  return `${prefix}/${timestamp}-${random}-${id}`;
+}
+
+// base64 数据解码为 Buffer
+function decodeBase64(dataUrl) {
+  if (!dataUrl || !dataUrl.startsWith('data:')) {
+    return null;
+  }
+  const matches = dataUrl.match(/^data:([^;]+);base64,(.+)$/);
+  if (!matches) return null;
+  return {
+    mimeType: matches[1],
+    data: Buffer.from(matches[2], 'base64')
+  };
+}
+
+// 获取设置 - 优先使用预热缓存
+router.get('/', async (req, res) => {
+  try {
+    const pool = getPool();
+
+    if (!pool) {
+      return res.json(memoryStore.settings);
+    }
+
+    // 优先返回缓存数据
+    if (memoryStore.settings && memoryStore.settings.bgType) {
+      return res.json(memoryStore.settings);
+    }
+
+    const [rows] = await pool.execute('SELECT * FROM settings WHERE id = 1');
+    if (rows.length === 0) {
+      return res.json(memoryStore.settings);
+    }
+
+    const formatted = formatSettings(rows[0]);
+    memoryStore.settings = formatted;
+    res.json(formatted);
+  } catch (error) {
+    console.error('获取设置失败:', error.message);
+    res.json(memoryStore.settings);
+  }
+});
+
+// 上传单张图片到 RUSTFS
+router.post('/upload-image', async (req, res) => {
+  try {
+    const { imageData, type } = req.body; // type: 'background' | 'icon' | 'gallery'
+
+    if (!imageData || !imageData.startsWith('data:')) {
+      return res.status(400).json({ error: '无效的图片数据' });
+    }
+
+    const decoded = decodeBase64(imageData);
+    if (!decoded) {
+      return res.status(400).json({ error: '图片解码失败' });
+    }
+
+    const id = Date.now().toString();
+    const prefix = type || 'images';
+    const key = generateKey(prefix, id);
+    const url = await rustfs.uploadFile(decoded.data, key, decoded.mimeType);
+
+    console.log(`✅ 图片上传成功: ${url}`);
+
+    res.json({ url, id });
+  } catch (error) {
+    console.error('图片上传失败:', error);
+    res.status(500).json({ error: '图片上传失败' });
+  }
+});
+
+// 批量上传图片（并行上传到 RUSTFS）
+router.post('/upload-images', async (req, res) => {
+  try {
+    const { images, type } = req.body; // images: [{id, data}]
+
+    if (!Array.isArray(images) || images.length === 0) {
+      return res.json({ images: [] });
+    }
+
+    const prefix = type || 'images';
+
+    // 并行上传所有图片
+    const uploadPromises = images.map(async (img) => {
+      try {
+        const decoded = decodeBase64(img.data);
+        if (!decoded) {
+          return { id: img.id, url: null, error: '解码失败' };
+        }
+
+        const key = generateKey(prefix, img.id);
+        const url = await rustfs.uploadFile(decoded.data, key, decoded.mimeType);
+        return { id: img.id, url };
+      } catch (err) {
+        console.error(`图片 ${img.id} 上传失败:`, err);
+        return { id: img.id, url: null, error: err.message };
+      }
+    });
+
+    const results = await Promise.all(uploadPromises);
+    res.json({ images: results });
+  } catch (error) {
+    console.error('批量图片上传失败:', error);
+    res.status(500).json({ error: '图片上传失败' });
+  }
+});
+
+// 更新设置
+router.put('/', async (req, res) => {
+  try {
+    // 兼容 camelCase 和 snake_case
+    const {
+      bg_type, bgType,
+      bg_color, bgColor,
+      bg_image, bgImage,
+      bg_opacity, bgOpacity,
+      language,
+      favicon,
+      uploaded_images, uploadedImages,
+      uploaded_icons, uploadedIcons
+    } = req.body;
+
+    const pool = getPool();
+
+    if (!pool) {
+      Object.assign(memoryStore.settings, {
+        bg_type: bg_type || bgType,
+        bg_color: bg_color || bgColor,
+        bg_image: bg_image || bgImage,
+        bg_opacity: bg_opacity ?? bgOpacity,
+        language,
+        favicon,
+        uploaded_images: uploaded_images || uploadedImages,
+        uploaded_icons: uploaded_icons || uploadedIcons
+      });
+      return res.json(memoryStore.settings);
+    }
+
+    await pool.execute(
+      `UPDATE settings SET
+        bg_type = ?, bg_color = ?, bg_image = ?, bg_opacity = ?,
+        language = ?, favicon = ?, uploaded_images = ?, uploaded_icons = ?
+       WHERE id = 1`,
+      [
+        bg_type || bgType || 'color',
+        bg_color || bgColor || '#f5f5f5',
+        bg_image || bgImage || '',
+        bg_opacity ?? bgOpacity ?? 1.00,
+        language || 'zh',
+        favicon || '',
+        prepareJSON(uploaded_images || uploadedImages),
+        prepareJSON(uploaded_icons || uploadedIcons)
+      ]
+    );
+
+    const [rows] = await pool.execute('SELECT * FROM settings WHERE id = 1');
+    const formatted = formatSettings(rows[0]);
+    memoryStore.settings = formatted;
+    res.json(formatted);
+  } catch (error) {
+    console.error('更新设置失败:', error);
+    res.status(500).json({ error: '更新设置失败' });
+  }
+});
+
+function formatSettings(row) {
+  if (!row) return memoryStore.settings;
+
+  return {
+    bgType: row.bg_type,
+    bgColor: row.bg_color,
+    bgImage: row.bg_image,
+    bgOpacity: row.bg_opacity,
+    language: row.language,
+    favicon: row.favicon,
+    // uploadedImages 和 uploadedIcons 现在存储的是 {id, url} 数组
+    uploadedImages: parseJSON(row.uploaded_images, []),
+    uploadedIcons: parseJSON(row.uploaded_icons, [])
+  };
+}
+
+function parseJSON(str, defaultValue) {
+  if (!str) return defaultValue;
+  if (typeof str === 'object') return str;
+  try {
+    return JSON.parse(str);
+  } catch {
+    return defaultValue;
+  }
+}
+
+function prepareJSON(value) {
+  if (!value) return '[]';
+  if (typeof value === 'string') {
+    try {
+      JSON.parse(value);
+      return value;
+    } catch {
+      return JSON.stringify(value);
+    }
+  }
+  return JSON.stringify(value);
+}
+
+module.exports = router;
--- a/server/src/scripts/addIndexes.js
+++ b/server/src/scripts/addIndexes.js
@@ -0,0 +1,49 @@
+/**
+ * 数据库索引迁移脚本
+ * 为已存在的表添加索引，提升查询性能
+ * 运行方式: node src/scripts/addIndexes.js
+ */
+require('dotenv').config();
+const mysql = require('mysql2/promise');
+
+const config = {
+  host: process.env.DB_HOST,
+  port: process.env.DB_PORT || 3306,
+  user: process.env.DB_USER || 'root',
+  password: process.env.DB_PASSWORD || '',
+  database: process.env.DB_NAME || 'jnote'
+};
+
+async function migrate() {
+  let connection;
+
+  try {
+    console.log('🔌 正在连接数据库...');
+    connection = await mysql.createConnection(config);
+    console.log('✅ 数据库连接成功');
+
+    // 为 posts 表的 date 字段添加索引
+    console.log('📝 正在为 posts.date 添加索引...');
+    try {
+      await connection.query('CREATE INDEX idx_posts_date ON posts (date DESC)');
+      console.log('✅ idx_posts_date 索引创建成功');
+    } catch (error) {
+      if (error.code === 'ER_DUP_KEYNAME') {
+        console.log('ℹ️  idx_posts_date 索引已存在，跳过');
+      } else {
+        throw error;
+      }
+    }
+
+    console.log('\n🎉 索引迁移完成！');
+  } catch (error) {
+    console.error('❌ 索引迁移失败:', error.message);
+    process.exit(1);
+  } finally {
+    if (connection) {
+      await connection.end();
+    }
+  }
+}
+
+migrate();
--- a/server/src/scripts/checkDb.js
+++ b/server/src/scripts/checkDb.js
@@ -0,0 +1,74 @@
+/**
+ * 数据库诊断脚本
+ * 检查数据库中的实际数据
+ * 运行方式: node src/scripts/checkDb.js
+ */
+require('dotenv').config();
+const mysql = require('mysql2/promise');
+
+const config = {
+  host: process.env.DB_HOST,
+  port: process.env.DB_PORT || 3306,
+  user: process.env.DB_USER || 'root',
+  password: process.env.DB_PASSWORD || '',
+  database: process.env.DB_NAME || 'jnote'
+};
+
+async function check() {
+  let connection;
+
+  try {
+    console.log('🔌 正在连接数据库...\n');
+    connection = await mysql.createConnection(config);
+    console.log('✅ 数据库连接成功\n');
+
+    // 检查表结构
+    console.log('📋 表结构检查:');
+    const [tables] = await connection.query('SHOW TABLES');
+    console.log('现有表:', tables.map(t => Object.values(t)[0]).join(', '));
+
+    // 检查 settings 表结构和数据
+    console.log('\n📊 settings 表数据:');
+    try {
+      const [settingsRows] = await connection.query('SELECT * FROM settings WHERE id = 1');
+      if (settingsRows.length === 0) {
+        console.log('settings 表为空或无数据');
+      } else {
+        const row = settingsRows[0];
+        console.log('  id:', row.id);
+        console.log('  bg_type:', row.bg_type);
+        console.log('  bg_color:', row.bg_color);
+        console.log('  bg_image:', row.bg_image ? `[base64, 长度: ${row.bg_image.length}]` : '(空)');
+        console.log('  bg_opacity:', row.bg_opacity);
+        console.log('  language:', row.language);
+        console.log('  favicon:', row.favicon ? `[base64, 长度: ${row.favicon.length}]` : '(空)');
+        console.log('  uploaded_images:', row.uploaded_images);
+        console.log('  uploaded_icons:', row.uploaded_icons);
+        console.log('  uploaded_images 类型:', typeof row.uploaded_images);
+        console.log('  uploaded_icons 类型:', typeof row.uploaded_icons);
+      }
+    } catch (error) {
+      console.log('settings 表查询失败:', error.message);
+    }
+
+    // 检查 posts 数量
+    console.log('\n📝 posts 数量:');
+    try {
+      const [postCount] = await connection.query('SELECT COUNT(*) as count FROM posts');
+      console.log('文章总数:', postCount[0].count);
+    } catch (error) {
+      console.log('posts 表查询失败:', error.message);
+    }
+
+    console.log('\n✅ 诊断完成');
+  } catch (error) {
+    console.error('❌ 诊断失败:', error.message);
+    process.exit(1);
+  } finally {
+    if (connection) {
+      await connection.end();
+    }
+  }
+}
+
+check();
--- a/server/src/scripts/initDb.js
+++ b/server/src/scripts/initDb.js
@@ -0,0 +1,165 @@
+/**
+ * 数据库初始化脚本
+ * 运行方式: node src/scripts/initDb.js
+ */
+require('dotenv').config();
+const mysql = require('mysql2/promise');
+
+const config = {
+  host: process.env.DB_HOST,
+  port: process.env.DB_PORT || 3306,
+  user: process.env.DB_USER || 'root',
+  password: process.env.DB_PASSWORD || '',
+  charset: 'utf8mb4'
+};
+
+const DB_NAME = process.env.DB_NAME || 'jnote';
+
+async function initDatabase() {
+  let connection;
+
+  try {
+    console.log('🔌 正在连接数据库...');
+    connection = await mysql.createConnection(config);
+    console.log('✅ 数据库连接成功');
+
+    // 创建数据库
+    console.log(`📦 正在创建数据库 ${DB_NAME}...`);
+    await connection.query(`CREATE DATABASE IF NOT EXISTS \`${DB_NAME}\` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci`);
+    console.log(`✅ 数据库 ${DB_NAME} 创建成功`);
+
+    // 使用数据库
+    await connection.query(`USE \`${DB_NAME}\``);
+
+    // 创建 posts 表 - content 改为 MEDIUMTEXT
+    console.log('📝 正在创建 posts 表...');
+    await connection.query(`
+      CREATE TABLE IF NOT EXISTS posts (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        title VARCHAR(255) NOT NULL,
+        date DATE NOT NULL,
+        excerpt TEXT,
+        content MEDIUMTEXT,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+        INDEX idx_posts_date (date DESC)
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+    `);
+    console.log('✅ posts 表创建成功');
+
+    // 创建 about 表 - 使用 JSON 类型
+    console.log('📋 正在创建 about 表...');
+    await connection.query(`
+      CREATE TABLE IF NOT EXISTS about (
+        id INT PRIMARY KEY DEFAULT 1,
+        title VARCHAR(255) DEFAULT '关于我',
+        intro TEXT,
+        blog TEXT,
+        tech TEXT,
+        features JSON,
+        contact JSON,
+        filing_number VARCHAR(100),
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+    `);
+    console.log('✅ about 表创建成功');
+
+    // 创建 settings 表 - 使用 JSON 类型存储图片列表
+    console.log('⚙️  正在创建 settings 表...');
+    await connection.query(`
+      CREATE TABLE IF NOT EXISTS settings (
+        id INT PRIMARY KEY DEFAULT 1,
+        bg_type VARCHAR(20) DEFAULT 'color',
+        bg_color VARCHAR(20) DEFAULT '#f5f5f5',
+        bg_image TEXT,
+        bg_opacity DECIMAL(3,2) DEFAULT 1.00,
+        language VARCHAR(10) DEFAULT 'zh',
+        favicon TEXT,
+        uploaded_images JSON,
+        uploaded_icons JSON,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+    `);
+    console.log('✅ settings 表创建成功');
+
+    // 创建 cron_tasks 表
+    console.log('⏰ 正在创建 cron_tasks 表...');
+    await connection.query(`
+      CREATE TABLE IF NOT EXISTS cron_tasks (
+        id VARCHAR(50) PRIMARY KEY,
+        name VARCHAR(255) NOT NULL,
+        cron VARCHAR(50) NOT NULL,
+        url VARCHAR(500) NOT NULL,
+        method VARCHAR(20) DEFAULT 'GET',
+        headers TEXT,
+        body TEXT,
+        enabled TINYINT(1) DEFAULT 1,
+        last_run DATETIME,
+        next_run DATETIME,
+        run_count INT DEFAULT 0,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+    `);
+    console.log('✅ cron_tasks 表创建成功');
+
+    // 初始化默认数据
+    console.log('📄 正在初始化默认数据...');
+
+    // 初始化 about 默认数据
+    await connection.query(`
+      INSERT INTO about (id, title, intro, blog, tech, features, contact, filing_number)
+      VALUES (1, '关于我', '你好！我是一名热爱技术开发的开发者。', '这个博客用于分享我在学习和工作中的一些心得体会。',
+              'Vue / Vue 3, JavaScript / TypeScript, Node.js, Vite, Pinia, Vue Router',
+              '["定时任务系统 - 支持 Cron表达式的自动化任务管理", "自定义背景 - 支持纯色和图片背景，可调节透明度", "多语言支持 - 中英文切换", "自定义图标 - 上传本地图片作为网站图标"]',
+              '{"email": "example@email.com", "github": "github.com/yourusername"}',
+              '桂ICP备2022004108号-1')
+      ON DUPLICATE KEY UPDATE id=id
+    `);
+    console.log('✅ about 默认数据初始化成功');
+
+    // 初始化 settings 默认数据
+    await connection.query(`
+      INSERT INTO settings (id, bg_type, bg_color, bg_opacity, language)
+      VALUES (1, 'color', '#f5f5f5', 1.00, 'zh')
+      ON DUPLICATE KEY UPDATE id=id
+    `);
+    console.log('✅ settings 默认数据初始化成功');
+
+    // 初始化示例文章
+    const samplePosts = [
+      ['欢迎来到我的编程学习记录', '2026-06-01', '这是我的第一篇文章，欢迎大家来访！', '这是我的第一篇文章，欢迎大家来访！在这里我会分享一些技术心得和生活感悟。希望大家喜欢这里的内容，有任何问题欢迎留言交流。'],
+      ['Vue 3 组合式 API 入门', '2026-06-02', '探索 Vue 3 的组合式 API，感受更好的代码组织方式。', 'Vue 3 引入了组合式 API，这是一种全新的代码组织方式。通过 setup 函数和响应式 API，我们可以更灵活地组织组件逻辑，提高代码的可复用性和可维护性。\n\n主要特点：\n1. 更好的逻辑复用\n2. 更灵活的代码组织\n3. 更好的 TypeScript 支持'],
+      ['静态网站生成器选型', '2026-06-03', '对比常见的静态网站生成器，帮助你选择合适的工具。', '选择一个合适的静态网站生成器需要考虑多个因素：\n\n1. Hexo - 简单易用，主题丰富\n2. Jekyll - GitHub Pages 原生支持，社区活跃\n3. Hugo - 构建速度极快\n4. VuePress / VitePress - 基于 Vue，适合技术文档\n\n本博客使用 Vue 3 + Vite 构建，兼具现代特性和开发体验。'],
+      ['优雅地使用 Pinia 管理状态', '2026-06-04', 'Pinia 是 Vue 3 推荐的状态管理方案，本篇介绍其基本用法。', 'Pinia 是 Vue 官方推荐的新一代状态管理库，相比 Vuex 更加轻量和直观。\n\n核心概念：\n- Store - 存储状态的地方\n- Getters - 类似 computed 的状态计算\n- Actions - 处理异步逻辑或修改状态'],
+      ['CSS Grid 布局实战技巧', '2026-06-05', '深入探索 CSS Grid，让页面布局变得轻而易举。', 'CSS Grid 是现代 CSS 布局的重要组成部分，比 Flexbox 更适合二维布局场景。\n\n基础用法：\n.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }\n\n常用场景：\n1. 相册网格 - 自动填充列数\n2. 圣杯布局 - 经典三栏布局\n3. 响应式卡片 - 自动换行适配'],
+      ['用 Git 工作流提升团队协作效率', '2026-06-06', 'GitFlow vs trunk-based development，选对工作流事半功倍。', '良好的 Git 工作流能让团队协作更加顺畅。常见的工作流模型：\n\n1. GitFlow - 分支模型清晰，适合发布周期稳定的项目\n2. trunk-based development - 主干开发，快速迭代\n3. fork workflow - 开源项目首选，隔离性强\n\n小团队推荐使用简化 GitFlow：main + develop + feature 分支。'],
+      ['JavaScript 事件循环机制详解', '2026-06-07', '理解 Event Loop、宏任务与微任务，告别异步编程困惑。', '事件循环是 JavaScript 异步编程的核心机制。\n\n执行顺序：\n1. 同步代码优先执行\n2. 微任务（Promise、MutationObserver）\n3. 宏任务（setTimeout、setInterval、setImmediate）\n\n示例：\nconsole.log(\'1\');\nsetTimeout(() => console.log(\'2\'), 0);\nPromise.resolve().then(() => console.log(\'3\'));\nconsole.log(\'4\');\n\n输出顺序：1, 4, 3, 2'],
+      ['我的开发环境配置分享', '2026-06-08', 'VS Code + Zsh + Tmux，打造高效开发终端。', '工欲善其事，必先利其器。分享我的开发环境配置：\n\n编辑器：\n- VS Code + Vim 插件\n- Tokyo Night 主题\n- Fira Code 字体 + 连字\n\n终端：\n- iTerm2 (macOS) / Windows Terminal\n- Oh My Zsh\n- Tmux 会话管理\n\n版本管理：\n- Git + delta 美化 diff\n- lazygit 终端 UI'],
+      ['从零搭建一个 CLI 工具', '2026-06-09', '使用 Node.js 和 commander.js 快速构建命令行工具。', '命令行工具是提升开发效率的利器。使用 Node.js 可以快速构建：\n\n初始化项目：\nnpm init -y\nnpm install commander inquirer\n\n核心代码：\nconst { program } = require(\'commander\');\nprogram.version(\'1.0.0\');\nprogram.option(\'-n, --name <name>\', \'项目名称\');\nprogram.parse(process.argv);\n\n发布到 npm：\nnpm publish --access public'],
+      ['为什么我喜欢深夜编程', '2026-06-10', '安静、专注、不被打扰，深夜是程序员的黄金时段。', '深夜编程的独特魅力：\n\n1. 绝对安静 - 无人打扰，思路连贯\n2. 效率翻倍 - 深度工作状态\n3. 问题解决 - 复杂 bug 往往在这时候被攻破\n\n当然，也要适度。注意休息，保护眼睛，第二天才能持续输出。\n\n推荐配合：黑咖啡 + 轻音乐 + 舒适的降噪耳机。']
+    ];
+
+    for (const post of samplePosts) {
+      await connection.query(
+        'INSERT INTO posts (title, date, excerpt, content) VALUES (?, ?, ?, ?) ON DUPLICATE KEY UPDATE title=title',
+        post
+      );
+    }
+    console.log('✅ 示例文章初始化成功（共10篇）');
+
+    console.log('\n🎉 数据库初始化完成！');
+    console.log(`📖 数据库名: ${DB_NAME}`);
+    console.log('📋 数据表: posts, about, settings, cron_tasks');
+
+  } catch (error) {
+    console.error('❌ 数据库初始化失败:', error.message);
+    process.exit(1);
+  } finally {
+    if (connection) {
+      await connection.end();
+    }
+  }
+}
+
+initDatabase();
--- a/server/src/scripts/migrateColumns.js
+++ b/server/src/scripts/migrateColumns.js
@@ -0,0 +1,49 @@
+/**
+ * 数据库字段扩展脚本
+ * 将 TEXT 改为 LONGTEXT 以支持大图片
+ */
+require('dotenv').config();
+const mysql = require('mysql2/promise');
+
+const config = {
+  host: process.env.DB_HOST,
+  port: process.env.DB_PORT || 3306,
+  user: process.env.DB_USER || 'root',
+  password: process.env.DB_PASSWORD || '',
+  database: process.env.DB_NAME || 'jnote'
+};
+
+async function migrate() {
+  let connection;
+
+  try {
+    console.log('🔌 正在连接数据库...');
+    connection = await mysql.createConnection(config);
+    console.log('✅ 数据库连接成功');
+
+    console.log('📝 正在修改 settings 表字段...');
+
+    await connection.query('ALTER TABLE settings MODIFY COLUMN bg_image LONGTEXT');
+    console.log('✅ bg_image 改为 LONGTEXT');
+
+    await connection.query('ALTER TABLE settings MODIFY COLUMN favicon LONGTEXT');
+    console.log('✅ favicon 改为 LONGTEXT');
+
+    await connection.query('ALTER TABLE settings MODIFY COLUMN uploaded_images LONGTEXT');
+    console.log('✅ uploaded_images 改为 LONGTEXT');
+
+    await connection.query('ALTER TABLE settings MODIFY COLUMN uploaded_icons LONGTEXT');
+    console.log('✅ uploaded_icons 改为 LONGTEXT');
+
+    console.log('\n🎉 字段扩展完成！');
+  } catch (error) {
+    console.error('❌ 扩展失败:', error.message);
+    process.exit(1);
+  } finally {
+    if (connection) {
+      await connection.end();
+    }
+  }
+}
+
+migrate();
--- a/server/src/scripts/migrateStorage.js
+++ b/server/src/scripts/migrateStorage.js
@@ -0,0 +1,115 @@
+/**
+ * 数据存储结构迁移脚本
+ * 将 posts.content 升级为 MEDIUMTEXT，about 和 settings 的 JSON 字段类型优化
+ * 运行方式: node src/scripts/migrateStorage.js
+ */
+require('dotenv').config();
+const mysql = require('mysql2/promise');
+
+const config = {
+  host: process.env.DB_HOST,
+  port: process.env.DB_PORT || 3306,
+  user: process.env.DB_USER || 'root',
+  password: process.env.DB_PASSWORD || '',
+  database: process.env.DB_NAME || 'jnote'
+};
+
+async function migrate() {
+  let connection;
+
+  try {
+    console.log('🔌 正在连接数据库...');
+    connection = await mysql.createConnection(config);
+    console.log('✅ 数据库连接成功');
+
+    // 1. 将 posts.content 升级为 MEDIUMTEXT
+    console.log('📝 正在升级 posts.content 为 MEDIUMTEXT...');
+    try {
+      await connection.query('ALTER TABLE posts MODIFY COLUMN content MEDIUMTEXT');
+      console.log('✅ posts.content 已升级为 MEDIUMTEXT');
+    } catch (error) {
+      if (error.code === 'ER_BAD_FIELD_ERROR') {
+        console.log('ℹ️  posts.content 已是 MEDIUMTEXT 或不存在，跳过');
+      } else {
+        throw error;
+      }
+    }
+
+    // 2. 将 about.features 改为 JSON 类型
+    console.log('📋 正在将 about.features 迁移为 JSON 类型...');
+    try {
+      await connection.query('ALTER TABLE about MODIFY COLUMN features JSON');
+      console.log('✅ about.features 已改为 JSON 类型');
+    } catch (error) {
+      if (error.code === 'ER_BAD_FIELD_ERROR') {
+        console.log('ℹ️  about.features 字段不存在，跳过');
+      } else {
+        console.log('⚠️  about.features 迁移失败:', error.message);
+      }
+    }
+
+    // 3. 将 about.contact 改为 JSON 类型
+    console.log('📋 正在将 about.contact 迁移为 JSON 类型...');
+    try {
+      await connection.query('ALTER TABLE about MODIFY COLUMN contact JSON');
+      console.log('✅ about.contact 已改为 JSON 类型');
+    } catch (error) {
+      if (error.code === 'ER_BAD_FIELD_ERROR') {
+        console.log('ℹ️  about.contact 字段不存在，跳过');
+      } else {
+        console.log('⚠️  about.contact 迁移失败:', error.message);
+      }
+    }
+
+    // 4. 将 settings.uploaded_images 改为 JSON 类型
+    console.log('⚙️  正在将 settings.uploaded_images 迁移为 JSON 类型...');
+    try {
+      await connection.query('ALTER TABLE settings MODIFY COLUMN uploaded_images JSON');
+      console.log('✅ settings.uploaded_images 已改为 JSON 类型');
+    } catch (error) {
+      if (error.code === 'ER_BAD_FIELD_ERROR') {
+        console.log('ℹ️  settings.uploaded_images 字段不存在，跳过');
+      } else {
+        console.log('⚠️  settings.uploaded_images 迁移失败:', error.message);
+      }
+    }
+
+    // 5. 将 settings.uploaded_icons 改为 JSON 类型
+    console.log('⚙️  正在将 settings.uploaded_icons 迁移为 JSON 类型...');
+    try {
+      await connection.query('ALTER TABLE settings MODIFY COLUMN uploaded_icons JSON');
+      console.log('✅ settings.uploaded_icons 已改为 JSON 类型');
+    } catch (error) {
+      if (error.code === 'ER_BAD_FIELD_ERROR') {
+        console.log('ℹ️  settings.uploaded_icons 字段不存在，跳过');
+      } else {
+        console.log('⚠️  settings.uploaded_icons 迁移失败:', error.message);
+      }
+    }
+
+    // 6. 添加 posts.date 索引
+    console.log('📊 正在添加 posts.date 索引...');
+    try {
+      await connection.query('CREATE INDEX idx_posts_date ON posts (date DESC)');
+      console.log('✅ idx_posts_date 索引创建成功');
+    } catch (error) {
+      if (error.code === 'ER_DUP_KEYNAME') {
+        console.log('ℹ️  idx_posts_date 索引已存在，跳过');
+      } else {
+        throw error;
+      }
+    }
+
+    console.log('\n🎉 存储结构迁移完成！');
+    console.log('\n建议：考虑将图片等大文件存储到文件服务器，而非数据库。');
+  } catch (error) {
+    console.error('❌ 迁移失败:', error.message);
+    process.exit(1);
+  } finally {
+    if (connection) {
+      await connection.end();
+    }
+  }
+}
+
+migrate();
--- a/server/start.js
+++ b/server/start.js
@@ -0,0 +1,134 @@
+/**
+ * JNote 后端启动脚本
+ * 跨平台兼容 Windows 和 Linux
+ */
+
+const { spawn, execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+
+const scriptDir = __dirname;
+process.chdir(scriptDir);
+
+const APP_NAME = 'jnote-api';
+const isWindows = os.platform() === 'win32';
+
+function log(msg) {
+  console.log(`[Start] ${msg}`);
+}
+
+function loadEnv() {
+  const envFile = path.join(scriptDir, '.env');
+  if (!fs.existsSync(envFile)) {
+    log('⚠️  未找到 .env 文件');
+    return;
+  }
+
+  const content = fs.readFileSync(envFile, 'utf8');
+  content.split('\n').forEach(line => {
+    line = line.trim();
+    if (!line || line.startsWith('#')) return;
+    const idx = line.indexOf('=');
+    if (idx > 0) {
+      const key = line.substring(0, idx).trim();
+      let value = line.substring(idx + 1).trim();
+      if ((value.startsWith('"') && value.endsWith('"')) ||
+          (value.startsWith("'") && value.endsWith("'"))) {
+        value = value.slice(1, -1);
+      }
+      process.env[key] = value;
+    }
+  });
+}
+
+function getExePath() {
+  const possibleNames = isWindows
+    ? ['jnote-api.exe', 'jnote-api']
+    : ['jnote-api', 'jnote-api.exe'];
+
+  for (const name of possibleNames) {
+    const p = path.join(scriptDir, name);
+    if (fs.existsSync(p)) return p;
+  }
+  return null;
+}
+
+function startWithPM2(exePath) {
+  log('🚀 使用 PM2 启动...');
+
+  try {
+    execSync('pm2 --version', { stdio: 'ignore' });
+  } catch {
+    log('📦 安装 PM2...');
+    execSync('npm install -g pm2', { cwd: scriptDir, stdio: 'inherit' });
+  }
+
+  try {
+    execSync(`pm2 stop ${APP_NAME}`, { stdio: 'ignore' });
+    execSync(`pm2 delete ${APP_NAME}`, { stdio: 'ignore' });
+  } catch {}
+
+  spawn('pm2', ['start', exePath, '--name', APP_NAME], {
+    cwd: scriptDir,
+    stdio: 'inherit',
+    shell: true
+  });
+
+  setTimeout(() => {
+    try { execSync('pm2 save', { stdio: 'ignore' }); } catch {}
+  }, 2000);
+
+  log('✅ 服务已启动');
+  log('   状态: pm2 status');
+  log('   日志: pm2 logs jnote-api');
+}
+
+function startDirect(exePath) {
+  log('🚀 直接启动服务...');
+  log(`   端口: ${process.env.PORT || 3000}`);
+  log('');
+
+  if (!isWindows) {
+    fs.chmodSync(exePath, 0o755);
+  }
+
+  spawn(exePath, [], {
+    cwd: scriptDir,
+    stdio: 'inherit',
+    env: process.env
+  });
+}
+
+function main() {
+  console.log('=========================================');
+  console.log('  JNote 后端启动脚本');
+  console.log(`  平台: ${isWindows ? 'Windows' : 'Linux'}`);
+  console.log('=========================================');
+
+  loadEnv();
+
+  const exe = getExePath();
+  if (!exe) {
+    console.error('❌ 错误: 未找到 jnote-api 可执行文件');
+    console.error(`   请确保可执行文件与本脚本在同一目录下: ${scriptDir}`);
+    console.error('');
+    console.error('   Linux 应有: jnote-api');
+    console.error('   Windows 应有: jnote-api.exe');
+    console.error('');
+    console.error('   如果还没有打包，请先运行: node build.js');
+    process.exit(1);
+  }
+
+  log(`✓ 找到: ${path.basename(exe)}`);
+
+  // 优先使用 PM2
+  try {
+    execSync('pm2 --version', { stdio: 'ignore' });
+    startWithPM2(exe);
+  } catch {
+    startDirect(exe);
+  }
+}
+
+main();
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,85 @@
+<script setup>
+import { computed, onMounted } from 'vue'
+import SiteHeader from '@/components/SiteHeader.vue'
+import { useSettingsStore } from '@/stores/settings'
+import { usePostsStore } from '@/stores/posts'
+
+const settings = useSettingsStore()
+const postsStore = usePostsStore()
+
+onMounted(async () => {
+  // 并行加载初始数据
+  await Promise.all([
+    settings.loadSettings(),
+    postsStore.fetchPosts()
+  ])
+})
+
+const bgStyle = computed(() => {
+  if (settings.bgType === 'color') {
+    return {
+      backgroundColor: settings.bgColor,
+      opacity: settings.bgOpacity
+    }
+  } else if (settings.bgType === 'image' && settings.bgImage) {
+    return {
+      backgroundImage: `url(${settings.bgImage})`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundAttachment: 'fixed',
+      opacity: settings.bgOpacity
+    }
+  }
+  return {}
+})
+</script>
+
+<template>
+  <div class="bg-layer" :style="bgStyle"></div>
+  <SiteHeader />
+  <div class="content">
+    <router-view />
+  </div>
+  <footer class="site-footer">
+    <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">桂ICP备2022004108号-1</a>
+  </footer>
+</template>
+
+<style>
+@import '@/assets/base.css';
+
+.bg-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.site-footer {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1.5rem 2rem;
+  text-align: center;
+  color: var(--color-text-secondary);
+  font-size: 0.85rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.site-footer a {
+  color: var(--color-text-secondary);
+  text-decoration: none;
+}
+
+.site-footer a:hover {
+  color: var(--color-primary);
+}
+</style>
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -0,0 +1,80 @@
+/* 颜色调色板 */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* 语义化颜色变量 */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --color-primary: #42b883;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+
+    --color-primary: #42b883;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  min-height: 100vh;
+}
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/components/PostList.vue
+++ b/src/components/PostList.vue
@@ -0,0 +1,74 @@
+<script setup>
+import { RouterLink } from 'vue-router'
+import { usePostsStore } from '@/stores/posts'
+
+const postsStore = usePostsStore()
+</script>
+
+<template>
+  <div class="post-list">
+    <div v-if="postsStore.posts.length === 0" class="empty-state">
+      <p>暂无文章</p>
+    </div>
+    <article v-for="post in postsStore.posts" :key="post.id" class="post-card">
+      <RouterLink :to="`/post/${post.id}`" class="post-link">
+        <h2 class="post-title">{{ post.title }}</h2>
+        <p class="post-date">{{ post.date }}</p>
+        <p class="post-excerpt">{{ post.excerpt }}</p>
+      </RouterLink>
+    </article>
+  </div>
+</template>
+
+<style scoped>
+.post-list {
+  display: grid;
+  gap: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 3rem;
+  color: var(--color-text-secondary);
+}
+
+.post-card {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1.5rem;
+  transition: box-shadow 0.3s ease;
+}
+
+.post-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.post-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.post-title {
+  margin: 0 0 0.5rem;
+  color: var(--color-text);
+  transition: color 0.3s;
+}
+
+.post-link:hover .post-title {
+  color: var(--color-primary);
+}
+
+.post-date {
+  margin: 0 0 0.75rem;
+  font-size: 0.875rem;
+  color: #666;
+}
+
+.post-excerpt {
+  margin: 0;
+  color: var(--color-text);
+  line-height: 1.6;
+}
+</style>
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { RouterLink } from 'vue-router'
+import { useI18n } from '@/composables/useI18n'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <header class="site-header">
+    <div class="header-content">
+      <RouterLink to="/" class="site-name">{{ t('home.title') }}</RouterLink>
+      <nav class="main-nav">
+        <RouterLink to="/">{{ t('nav.articles') }}</RouterLink>
+        <RouterLink to="/about">{{ t('nav.about') }}</RouterLink>
+        <RouterLink to="/cron">{{ t('nav.cron') }}</RouterLink>
+        <RouterLink to="/settings">{{ t('nav.settings') }}</RouterLink>
+        <RouterLink to="/server-config">{{ t('serverConfig.title') }}</RouterLink>
+      </nav>
+    </div>
+  </header>
+</template>
+
+<style>
+.site-header {
+  background: var(--color-background);
+  border-bottom: 1px solid var(--color-border);
+  padding: 1rem 0;
+  margin-bottom: 2rem;
+}
+
+.header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.site-name {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.main-nav {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.main-nav a {
+  text-decoration: none;
+  color: var(--color-text);
+  transition: color 0.3s;
+}
+
+.main-nav a:hover,
+.main-nav a.router-link-exact-active {
+  color: var(--color-primary);
+}
+</style>
--- a/src/composables/useI18n.js
+++ b/src/composables/useI18n.js
@@ -0,0 +1,15 @@
+import { computed } from 'vue'
+import { useSettingsStore } from '@/stores/settings'
+import { t as translate } from '@/i18n'
+
+export function useI18n() {
+  const settings = useSettingsStore()
+
+  const locale = computed(() => settings.language)
+
+  function t(key) {
+    return translate(key, locale.value)
+  }
+
+  return { t, locale }
+}
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -0,0 +1,269 @@
+export const messages = {
+  zh: {
+    nav: {
+      articles: '文章',
+      about: '关于',
+      cron: '定时任务',
+      settings: '设置'
+    },
+    home: {
+      title: '我的编程学习记录',
+      empty: '暂无文章',
+      loading: '加载中...',
+      newPost: '新建文章'
+    },
+    about: {
+      title: '关于我',
+      intro: '你好！我是一名热爱技术开发的开发者。',
+      blog: '这个博客用于分享我在学习和工作中的一些心得体会。',
+      tech: '技术栈',
+      features: '功能特点',
+      feature1: '定时任务系统 - 支持 Cron表达式的自动化任务管理',
+      feature2: '自定义背景 - 支持纯色和图片背景，可调节透明度',
+      feature3: '多语言支持 - 中英文切换',
+      feature4: '自定义图标 - 上传本地图片作为网站图标',
+      contact: '联系方式',
+      contactDesc: '如果你有任何问题或建议，欢迎通过以下方式联系我：',
+      filingNumber: '桂ICP备2022004108号-1'
+    },
+    settings: {
+      title: '设置',
+      language: '语言设置',
+      interfaceLang: '界面语言',
+      background: '背景设置',
+      bgType: '背景类型',
+      solid: '纯色',
+      image: '图片',
+      bgColor: '背景颜色',
+      bgImage: '背景图片',
+      opacity: '背景透明度',
+      preview: '预览',
+      uploadImage: '上传本地图片',
+      uploading: '上传中...',
+      localImage: '本地图片',
+      clear: '清除',
+      imageUrlPlaceholder: '或输入图片URL',
+      saved: '已保存',
+      siteIcon: '网站图标',
+      uploadIcon: '上传图标',
+      defaultIcon: '恢复默认',
+      myIcons: '我的图标库',
+      myImages: '我的图片库'
+    },
+    serverConfig: {
+      title: '服务端配置',
+      database: '数据库配置',
+      rustfs: 'RUSTFS 对象存储',
+      server: '服务器配置',
+      dbHost: '主机',
+      dbPort: '端口',
+      dbUser: '用户名',
+      dbPassword: '密码',
+      dbName: '数据库名',
+      rustfsEndpoint: '端点地址',
+      rustfsRegion: '区域',
+      rustfsBucket: '存储桶',
+      rustfsAccessKey: '访问密钥',
+      rustfsSecretKey: '密钥',
+      serverPort: '端口',
+      passwordPlaceholder: '留空则不修改',
+      save: '保存配置',
+      saving: '保存中...',
+      saved: '配置已保存',
+      saveFailed: '保存失败',
+      restart: '重启服务',
+      restarting: '重启中...',
+      restartFailed: '重启失败',
+      confirmRestart: '确定要重启后端服务吗？',
+      loading: '加载中...'
+    },
+    cron: {
+      title: '定时任务处理系统',
+      newTask: '新建任务',
+      editTask: '编辑任务',
+      usage: '使用说明',
+      cronFormat: 'Cron表达式格式：分 时 日 月 周，例如*/5 * * * * 表示每5分钟执行',
+      supportedSymbols: '支持的符号：*任意值，*/n每n个时间单位，,列表，-范围',
+      headersFormat: '请求头格式：JSON对象，例如 {"Content-Type": "application/json"}',
+      empty: '暂无定时任务，点击"新建任务"添加第一个任务',
+      disabled: '已禁用',
+      running: '执行中',
+      success: '成功',
+      error: '失败',
+      nextRun: '下次执行',
+      lastRun: '上次执行',
+      runCount: '累计执行',
+      executing: '执行中...',
+      runNow: '立即执行',
+      disable: '禁用',
+      enable: '启用',
+      edit: '编辑',
+      delete: '删除',
+      taskName: '任务名称',
+      taskNamePlaceholder: '例如：每隔5分钟同步数据',
+      cronExpression: 'Cron表达式',
+      cronHint: '分 时 日 月 周',
+      requestMethod: '请求方法',
+      requestURL: '请求URL',
+      requestHeaders: '请求头',
+      requestBody: '请求体',
+      enableTask: '启用任务',
+      cancel: '取消',
+      save: '保存'
+    },
+    postEditor: {
+      newTitle: '新建文章',
+      editTitle: '编辑文章',
+      title: '标题',
+      date: '日期',
+      excerpt: '摘要',
+      excerptPlaceholder: '文章摘要（可选）',
+      content: '正文',
+      contentPlaceholder: '文章正文内容...',
+      save: '保存',
+      saving: '保存中...',
+      cancel: '取消',
+      titleRequired: '标题和日期是必填项',
+      saveFailed: '保存失败',
+      loadFailed: '加载文章失败'
+    }
+  },
+  en: {
+    nav: {
+      articles: 'Articles',
+      about: 'About',
+      cron: 'Cron Jobs',
+      settings: 'Settings'
+    },
+    home: {
+      title: 'My Programming Learning Blog',
+      empty: 'No articles yet',
+      loading: 'Loading...',
+      newPost: 'New Post'
+    },
+    about: {
+      title: 'About Me',
+      intro: 'Hello! I am a developer passionate about technology.',
+      blog: 'This blog is for sharing my insights and experiences in learning and work.',
+      tech: 'Tech Stack',
+      features: 'Features',
+      feature1: 'Cron Job System - Automated task management with Cron expressions',
+      feature2: 'Custom Background - Solid color and image backgrounds with adjustable opacity',
+      feature3: 'Multi-language Support - Chinese and English switching',
+      feature4: 'Custom Icon - Upload local images as website icon',
+      contact: 'Contact',
+      contactDesc: 'If you have any questions or suggestions, feel free to contact me:',
+      filingNumber: '桂ICP备2022004108号-1'
+    },
+    settings: {
+      title: 'Settings',
+      language: 'Language Settings',
+      interfaceLang: 'Interface Language',
+      background: 'Background Settings',
+      bgType: 'Background Type',
+      solid: 'Solid Color',
+      image: 'Image',
+      bgColor: 'Background Color',
+      bgImage: 'Background Image',
+      opacity: 'Background Opacity',
+      preview: 'Preview',
+      uploadImage: 'Upload Local Image',
+      uploading: 'Uploading...',
+      localImage: 'Local Image',
+      clear: 'Clear',
+      imageUrlPlaceholder: 'or enter image URL',
+      saved: 'Saved',
+      siteIcon: 'Site Icon',
+      uploadIcon: 'Upload Icon',
+      defaultIcon: 'Reset Default',
+      myIcons: 'My Icons',
+      myImages: 'My Images'
+    },
+    serverConfig: {
+      title: 'Server Config',
+      database: 'Database',
+      rustfs: 'RUSTFS Object Storage',
+      server: 'Server',
+      dbHost: 'Host',
+      dbPort: 'Port',
+      dbUser: 'User',
+      dbPassword: 'Password',
+      dbName: 'Database',
+      rustfsEndpoint: 'Endpoint',
+      rustfsRegion: 'Region',
+      rustfsBucket: 'Bucket',
+      rustfsAccessKey: 'Access Key',
+      rustfsSecretKey: 'Secret Key',
+      serverPort: 'Port',
+      passwordPlaceholder: 'Leave empty to keep unchanged',
+      save: 'Save Config',
+      saving: 'Saving...',
+      saved: 'Config saved',
+      saveFailed: 'Save failed',
+      restart: 'Restart Server',
+      restarting: 'Restarting...',
+      restartFailed: 'Restart failed',
+      confirmRestart: 'Are you sure you want to restart the server?',
+      loading: 'Loading...'
+    },
+    cron: {
+      title: 'Cron Job System',
+      newTask: 'New Task',
+      editTask: 'Edit Task',
+      usage: 'Usage Instructions',
+      cronFormat: 'Cron format: min hour day month week, e.g. */5 * * * * means every 5 minutes',
+      supportedSymbols: 'Supported symbols: * any value, */n every n units, , list, - range',
+      headersFormat: 'Headers format: JSON object, e.g. {"Content-Type": "application/json"}',
+      empty: 'No cron tasks yet. Click "New Task" to add your first task.',
+      disabled: 'Disabled',
+      running: 'Running',
+      success: 'Success',
+      error: 'Failed',
+      nextRun: 'Next Run',
+      lastRun: 'Last Run',
+      runCount: 'Run Count',
+      executing: 'Executing...',
+      runNow: 'Run Now',
+      disable: 'Disable',
+      enable: 'Enable',
+      edit: 'Edit',
+      delete: 'Delete',
+      taskName: 'Task Name',
+      taskNamePlaceholder: 'e.g., Sync data every 5 minutes',
+      cronExpression: 'Cron Expression',
+      cronHint: 'min hour day month week',
+      requestMethod: 'Request Method',
+      requestURL: 'Request URL',
+      requestHeaders: 'Request Headers',
+      requestBody: 'Request Body',
+      enableTask: 'Enable Task',
+      cancel: 'Cancel',
+      save: 'Save'
+    },
+    postEditor: {
+      newTitle: 'New Post',
+      editTitle: 'Edit Post',
+      title: 'Title',
+      date: 'Date',
+      excerpt: 'Excerpt',
+      excerptPlaceholder: 'Post excerpt (optional)',
+      content: 'Content',
+      contentPlaceholder: 'Post content...',
+      save: 'Save',
+      saving: 'Saving...',
+      cancel: 'Cancel',
+      titleRequired: 'Title and date are required',
+      saveFailed: 'Save failed',
+      loadFailed: 'Failed to load post'
+    }
+  }
+}
+
+export function t(key, locale = 'zh') {
+  const keys = key.split('.')
+  let value = messages[locale]
+  for (const k of keys) {
+    value = value?.[k]
+  }
+  return value || key
+}
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,51 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '@/views/HomeView.vue'
+import PostDetail from '@/views/PostDetail.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/post/:id',
+      name: 'post',
+      component: PostDetail
+    },
+       {
+      path: '/about',
+      name: 'about',
+      component: () => import('@/views/AboutView.vue')
+    },
+    {
+      path: '/cron',
+      name: 'cron',
+      component: () => import('@/views/CronView.vue')
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: () => import('@/views/SettingsView.vue')
+    },
+    {
+      path: '/server-config',
+      name: 'server-config',
+      component: () => import('@/views/ServerConfigView.vue')
+    },
+    {
+      path: '/post/new',
+      name: 'post-new',
+      component: () => import('@/views/PostEditorView.vue')
+    },
+    {
+      path: '/post/edit/:id',
+      name: 'post-edit',
+      component: () => import('@/views/PostEditorView.vue')
+    }
+  ]
+})
+
+export default router
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -0,0 +1,69 @@
+// API 服务层
+// 开发环境通过 vite.config.js 代理到后端
+// 生产环境可配置 VITE_API_URL 环境变量
+const API_BASE = import.meta.env.VITE_API_URL || '/api';
+
+async function request(endpoint, options = {}) {
+  const url = `${API_BASE}${endpoint}`;
+
+  const config = {
+    headers: {
+      'Content-Type': 'application/json',
+      ...options.headers
+    },
+    ...options
+  };
+
+  try {
+    const response = await fetch(url, config);
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new Error(data.error || '请求失败');
+    }
+
+    return data;
+  } catch (error) {
+    console.error(`API Error [${endpoint}]:`, error);
+    throw error;
+  }
+}
+
+export const api = {
+  // 文章
+  getPosts: () => request('/posts'),
+  getPost: (id) => request(`/posts/${id}`),
+  createPost: (data) => request('/posts', { method: 'POST', body: JSON.stringify(data) }),
+  updatePost: (id, data) => request(`/posts/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
+  deletePost: (id) => request(`/posts/${id}`, { method: 'DELETE' }),
+
+  // 关于
+  getAbout: () => request('/about'),
+  updateAbout: (data) => request('/about', { method: 'PUT', body: JSON.stringify(data) }),
+
+  // 设置
+  getSettings: () => request('/settings'),
+  updateSettings: (data) => request('/settings', { method: 'PUT', body: JSON.stringify(data) }),
+
+  // 图片上传到 RUSTFS
+  uploadImage: (imageData, type) => request('/settings/upload-image', {
+    method: 'POST',
+    body: JSON.stringify({ imageData, type })
+  }),
+  uploadImages: (images, type) => request('/settings/upload-images', {
+    method: 'POST',
+    body: JSON.stringify({ images, type })
+  }),
+
+  // 定时任务
+  getCronTasks: () => request('/cron-tasks'),
+  createCronTask: (data) => request('/cron-tasks', { method: 'POST', body: JSON.stringify(data) }),
+  updateCronTask: (id, data) => request(`/cron-tasks/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
+  deleteCronTask: (id) => request(`/cron-tasks/${id}`, { method: 'DELETE' }),
+  runCronTask: (id) => request(`/cron-tasks/${id}/run`, { method: 'POST' }),
+
+  // 健康检查
+  health: () => request('/health')
+};
+
+export default api;
--- a/src/stores/about.js
+++ b/src/stores/about.js
@@ -0,0 +1,61 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { api } from '@/services/api'
+
+export const useAboutStore = defineStore('about', () => {
+  const title = ref('')
+  const intro = ref('')
+  const blog = ref('')
+  const tech = ref('')
+  const features = ref([])
+  const contact = ref({})
+  const filingNumber = ref('')
+  const loading = ref(false)
+
+  async function loadAbout() {
+    loading.value = true
+    try {
+      const data = await api.getAbout()
+      title.value = data.title || ''
+      intro.value = data.intro || ''
+      blog.value = data.blog || ''
+      tech.value = data.tech || ''
+      features.value = data.featuresList || []
+      contact.value = data.contactObj || {}
+      filingNumber.value = data.filing_number || ''
+    } catch (error) {
+      console.error('加载关于内容失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function saveAbout(data) {
+    try {
+      await api.updateAbout(data)
+      title.value = data.title || title.value
+      intro.value = data.intro ?? intro.value
+      blog.value = data.blog ?? blog.value
+      tech.value = data.tech ?? tech.value
+      features.value = data.features ?? features.value
+      contact.value = data.contact ?? contact.value
+      filingNumber.value = data.filing_number ?? filingNumber.value
+    } catch (error) {
+      console.error('保存关于内容失败:', error)
+      throw error
+    }
+  }
+
+  return {
+    title,
+    intro,
+    blog,
+    tech,
+    features,
+    contact,
+    filingNumber,
+    loading,
+    loadAbout,
+    saveAbout
+  }
+})
--- a/src/stores/cron.js
+++ b/src/stores/cron.js
@@ -0,0 +1,189 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { api } from '@/services/api'
+
+export const useCronStore = defineStore('cron', () => {
+  const tasks = ref([])
+  const loading = ref(false)
+  const error = ref(null)
+
+  const runningTasks = computed(() => {
+    return tasks.value.filter(t => taskStatus.value[t.id] === 'running')
+  })
+
+  const taskStatus = ref({})
+
+  async function loadTasks() {
+    loading.value = true
+    error.value = null
+    try {
+      tasks.value = await api.getCronTasks()
+    } catch (err) {
+      error.value = err.message
+      console.error('加载定时任务失败:', err)
+      // 降级到 localStorage
+      const saved = localStorage.getItem('cron-tasks')
+      if (saved) {
+        try {
+          tasks.value = JSON.parse(saved)
+        } catch {
+          tasks.value = []
+        }
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function saveTasks() {
+    try {
+      // 同步到服务器
+      for (const task of tasks.value) {
+        await api.updateCronTask(task.id, {
+          name: task.name,
+          cron: task.cron,
+          url: task.url,
+          method: task.method,
+          headers: task.headers,
+          body: task.body,
+          enabled: task.enabled
+        })
+      }
+    } catch (err) {
+      console.warn('同步到服务器失败，保留在本地:', err.message)
+      // 备用 localStorage
+      try {
+        localStorage.setItem('cron-tasks', JSON.stringify(tasks.value))
+      } catch (e) {
+        console.warn('localStorage 保存失败:', e)
+      }
+    }
+  }
+
+  async function createTask(data) {
+    try {
+      const newTask = await api.createCronTask(data)
+      tasks.value.unshift(newTask)
+      return newTask
+    } catch (err) {
+      // 后备方案：本地创建
+      const localTask = {
+        ...data,
+        id: Date.now().toString(),
+        lastRun: null,
+        nextRun: calculateNextRun(data.cron),
+        runCount: 0
+      }
+      tasks.value.unshift(localTask)
+      localStorage.setItem('cron-tasks', JSON.stringify(tasks.value))
+      return localTask
+    }
+  }
+
+  async function updateTask(id, data) {
+    try {
+      const updated = await api.updateCronTask(id, data)
+      const index = tasks.value.findIndex(t => t.id === id)
+      if (index !== -1) {
+        tasks.value[index] = updated
+      }
+      return updated
+    } catch (err) {
+      const index = tasks.value.findIndex(t => t.id === id)
+      if (index !== -1) {
+        tasks.value[index] = { ...tasks.value[index], ...data }
+      }
+      localStorage.setItem('cron-tasks', JSON.stringify(tasks.value))
+      return tasks.value[index]
+    }
+  }
+
+  async function deleteTask(id) {
+    try {
+      await api.deleteCronTask(id)
+      tasks.value = tasks.value.filter(t => t.id !== id)
+    } catch (err) {
+      tasks.value = tasks.value.filter(t => t.id !== id)
+      localStorage.setItem('cron-tasks', JSON.stringify(tasks.value))
+    }
+  }
+
+  async function toggleTask(id) {
+    const task = tasks.value.find(t => t.id === id)
+    if (task) {
+      task.enabled = !task.enabled
+      await updateTask(id, { enabled: task.enabled })
+    }
+  }
+
+  async function executeTask(id) {
+    if (taskStatus.value[id] === 'running') return
+
+    taskStatus.value[id] = 'running'
+
+    try {
+      const result = await api.runCronTask(id)
+      const task = tasks.value.find(t => t.id === id)
+      if (task) {
+        task.lastRun = result.lastRun
+        task.nextRun = result.nextRun
+        task.runCount = result.runCount
+      }
+      taskStatus.value[id] = result.success ? 'success' : 'error'
+
+      setTimeout(() => {
+        taskStatus.value[id] = null
+      }, 3000)
+    } catch (error) {
+      taskStatus.value[id] = 'error'
+      console.error('执行任务失败:', error)
+
+      setTimeout(() => {
+        taskStatus.value[id] = null
+      }, 3000)
+    }
+  }
+
+  function calculateNextRun(cron) {
+    const parts = cron.trim().split(/\s+/)
+    if (parts.length < 5) return null
+
+    const now = new Date()
+    const next = new Date(now)
+
+    const minute = parts[0]
+    const hour = parts[1]
+
+    if (minute === '*') {
+      next.setMinutes(now.getMinutes() + 1)
+    } else if (minute.includes('/')) {
+      const step = parseInt(minute.split('/')[1])
+      next.setMinutes(Math.ceil(now.getMinutes() / step) * step)
+    } else {
+      next.setMinutes(parseInt(minute))
+      if (next <= now) next.setHours(next.getHours() + 1)
+    }
+
+    if (hour !== '*') {
+      next.setHours(parseInt(hour), 0, 0, 0)
+      if (next <= now) next.setDate(next.getDate() + 1)
+    }
+
+    return next
+  }
+
+  return {
+    tasks,
+    loading,
+    error,
+    taskStatus,
+    runningTasks,
+    loadTasks,
+    createTask,
+    updateTask,
+    deleteTask,
+    toggleTask,
+    executeTask,
+    calculateNextRun
+  }
+})
--- a/src/stores/posts.js
+++ b/src/stores/posts.js
@@ -0,0 +1,66 @@
+import { defineStore } from 'pinia'
+import { api } from '@/services/api'
+
+export const usePostsStore = defineStore('posts', {
+  state: () => ({
+    posts: [],
+    loading: false,
+    error: null
+  }),
+
+  getters: {
+    getPostById: (state) => (id) => {
+      return state.posts.find(post => post.id === Number(id))
+    }
+  },
+
+  actions: {
+    async fetchPosts() {
+      this.loading = true
+      this.error = null
+      try {
+        this.posts = await api.getPosts()
+      } catch (error) {
+        this.error = error.message
+        console.error('获取文章失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+
+    async createPost(data) {
+      try {
+        const newPost = await api.createPost(data)
+        this.posts.unshift(newPost)
+        return newPost
+      } catch (error) {
+        this.error = error.message
+        throw error
+      }
+    },
+
+    async updatePost(id, data) {
+      try {
+        const updated = await api.updatePost(id, data)
+        const index = this.posts.findIndex(p => p.id === Number(id))
+        if (index !== -1) {
+          this.posts[index] = updated
+        }
+        return updated
+      } catch (error) {
+        this.error = error.message
+        throw error
+      }
+    },
+
+    async deletePost(id) {
+      try {
+        await api.deletePost(id)
+        this.posts = this.posts.filter(p => p.id !== Number(id))
+      } catch (error) {
+        this.error = error.message
+        throw error
+      }
+    }
+  }
+})
--- a/src/stores/settings.js
+++ b/src/stores/settings.js
@@ -0,0 +1,263 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { api } from '@/services/api'
+
+export const useSettingsStore = defineStore('settings', () => {
+  const bgType = ref('color')
+  const bgColor = ref('#f5f5f5')
+  const bgImage = ref('')
+  const bgOpacity = ref(1)
+  const language = ref('zh')
+  const favicon = ref('')
+  // 现在存储 {id, url} 而不是 {id, data: base64}
+  const uploadedImages = ref([])
+  const uploadedIcons = ref([])
+  const loading = ref(false)
+  let initialized = false
+
+  async function loadSettings() {
+    loading.value = true
+    try {
+      const data = await api.getSettings()
+      bgType.value = data.bgType || 'color'
+      bgColor.value = data.bgColor || '#f5f5f5'
+      bgImage.value = data.bgImage || ''
+      bgOpacity.value = data.bgOpacity ?? 1
+      language.value = data.language || 'zh'
+      favicon.value = data.favicon || ''
+      uploadedImages.value = data.uploadedImages || []
+      uploadedIcons.value = data.uploadedIcons || []
+      applyFavicon(favicon.value)
+      initialized = true
+    } catch (error) {
+      console.error('加载设置失败:', error)
+      initialized = true
+      // 降级到 localStorage
+      const saved = localStorage.getItem('site-settings')
+      if (saved) {
+        try {
+          const settings = JSON.parse(saved)
+          bgType.value = settings.bgType || 'color'
+          bgColor.value = settings.bgColor || '#f5f5f5'
+          bgImage.value = settings.bgImage || ''
+          bgOpacity.value = settings.bgOpacity || 1
+          language.value = settings.language || 'zh'
+          favicon.value = settings.favicon || ''
+          uploadedImages.value = settings.uploadedImages || []
+          uploadedIcons.value = settings.uploadedIcons || []
+        } catch {
+          // ignore
+        }
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function saveSettings() {
+    if (!initialized) {
+      console.warn('saveSettings 跳过：还未初始化')
+      return
+    }
+    try {
+      await api.updateSettings({
+        bgType: bgType.value,
+        bgColor: bgColor.value,
+        bgImage: bgImage.value,
+        bgOpacity: bgOpacity.value,
+        language: language.value,
+        favicon: favicon.value,
+        uploadedImages: uploadedImages.value,
+        uploadedIcons: uploadedIcons.value
+      })
+    } catch (error) {
+      console.warn('保存到服务器失败:', error.message)
+    }
+  }
+
+  // 上传图片到 RUSTFS，返回 {id, url}
+  async function uploadImageToRustfs(imageData, type = 'background') {
+    try {
+      const result = await api.uploadImage(imageData, type)
+      return { id: result.id, url: result.url }
+    } catch (error) {
+      console.error('图片上传失败:', error)
+      throw error
+    }
+  }
+
+  // 批量上传图片到 RUSTFS
+  async function uploadImagesToRustfs(imageDataList, type = 'background') {
+    try {
+      const images = imageDataList.map((data, index) => ({
+        id: `${Date.now()}-${index}`,
+        data
+      }))
+      const result = await api.uploadImages(images, type)
+      return result.images
+    } catch (error) {
+      console.error('批量图片上传失败:', error)
+      throw error
+    }
+  }
+
+  // 添加单张图片（上传到 RUSTFS）
+  async function addUploadedImage(imageData) {
+    const result = await uploadImageToRustfs(imageData, 'background')
+    uploadedImages.value.push(result)
+    await saveSettings()
+    return result.id
+  }
+
+  // 批量添加图片（不上传到服务器）
+  function addUploadedImagesBatchLocal(imageDataList) {
+    const baseId = Date.now()
+    const tempImages = imageDataList.map((imageData, index) => ({
+      id: `${baseId}-${index}`,
+      data: imageData
+    }))
+    return tempImages
+  }
+
+  // 批量上传图片
+  async function addUploadedImagesBatch(imageDataList) {
+    const uploaded = await uploadImagesToRustfs(imageDataList, 'background')
+    for (const img of uploaded) {
+      if (img.url) {
+        uploadedImages.value.push({ id: img.id, url: img.url })
+      }
+    }
+    await saveSettings()
+  }
+
+  // 设置背景图片（使用 URL）
+  async function setBgImage(value) {
+    bgImage.value = value
+    await saveSettings()
+  }
+
+  // 设置背景图片（上传 base64 后设置）
+  async function setBgImageFromData(imageData) {
+    const result = await uploadImageToRustfs(imageData, 'background')
+    bgImage.value = result.url
+    await saveSettings()
+  }
+
+  function setBgType(value) {
+    bgType.value = value
+    saveSettings()
+  }
+
+  function setBgColor(value) {
+    bgColor.value = value
+    saveSettings()
+  }
+
+  function setBgOpacity(value) {
+    bgOpacity.value = value
+    saveSettings()
+  }
+
+  function setLanguage(value) {
+    language.value = value
+    saveSettings()
+  }
+
+  // 设置图标（上传到 RUSTFS）
+  async function setFaviconFromData(imageData) {
+    const result = await uploadImageToRustfs(imageData, 'icon')
+    favicon.value = result.url
+    applyFavicon(result.url)
+    await saveSettings()
+  }
+
+  // 设置图标（使用已有 URL）
+  async function setFavicon(value) {
+    favicon.value = value
+    applyFavicon(value)
+    await saveSettings()
+  }
+
+  // 添加图标到图标库（上传到 RUSTFS）
+  async function addUploadedIcon(imageData) {
+    const result = await uploadImageToRustfs(imageData, 'icon')
+    uploadedIcons.value.push(result)
+    await saveSettings()
+    return result.id
+  }
+
+  // 批量添加图标
+  async function addUploadedIconsBatch(imageDataList) {
+    const uploaded = await uploadImagesToRustfs(imageDataList, 'icon')
+    for (const icon of uploaded) {
+      if (icon.url) {
+        uploadedIcons.value.push({ id: icon.id, url: icon.url })
+      }
+    }
+    await saveSettings()
+  }
+
+  function removeUploadedImage(id) {
+    uploadedImages.value = uploadedImages.value.filter(img => img.id !== id)
+    // bgImage 现在是 URL，检查是否是被删除图片的 URL
+    const img = uploadedImages.value.find(img => img.url === bgImage.value)
+    if (!img && bgImage.value) {
+      // 当前背景图片被删除了，重置为默认
+      bgImage.value = ''
+    }
+    saveSettings()
+  }
+
+  function removeUploadedIcon(id) {
+    uploadedIcons.value = uploadedIcons.value.filter(icon => icon.id !== id)
+    // favicon 现在是 URL，检查是否是被删除图标的 URL
+    const icon = uploadedIcons.value.find(icon => icon.url === favicon.value)
+    if (!icon && favicon.value) {
+      favicon.value = ''
+      applyFavicon('')
+    }
+    saveSettings()
+  }
+
+  function applyFavicon(value) {
+    const link = document.querySelector("link[rel='icon']")
+    if (link) {
+      if (value) {
+        link.href = value
+      } else {
+        link.href = '/favicon.ico'
+      }
+    }
+  }
+
+  return {
+    bgType,
+    bgColor,
+    bgImage,
+    bgOpacity,
+    language,
+    favicon,
+    uploadedImages,
+    uploadedIcons,
+    loading,
+    initialized,
+    loadSettings,
+    saveSettings,
+    setBgImage,
+    setBgImageFromData,
+    setBgType,
+    setBgColor,
+    setBgOpacity,
+    setLanguage,
+    setFavicon,
+    setFaviconFromData,
+    addUploadedImage,
+    addUploadedImagesBatch,
+    addUploadedImagesBatchLocal,
+    removeUploadedImage,
+    addUploadedIcon,
+    addUploadedIconsBatch,
+    removeUploadedIcon,
+    applyFavicon
+  }
+})
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -0,0 +1,93 @@
+<script setup>
+import { onMounted } from 'vue'
+import { useAboutStore } from '@/stores/about'
+import { useI18n } from '@/composables/useI18n'
+
+const { t } = useI18n()
+const aboutStore = useAboutStore()
+
+onMounted(() => {
+  aboutStore.loadAbout()
+})
+</script>
+
+<template>
+  <div class="about-page">
+    <div class="about-header">
+      <h1>{{ aboutStore.title || t('about.title') }}</h1>
+    </div>
+    <div class="about-content">
+      <p>{{ aboutStore.intro || t('about.intro') }}</p>
+      <p>{{ aboutStore.blog || t('about.blog') }}</p>
+      <h2>{{ t('about.tech') }}</h2>
+      <ul>
+        <li v-for="(item, index) in (aboutStore.tech ? aboutStore.tech.split(',') : [])" :key="index">
+          {{ item.trim() }}
+        </li>
+        <li v-if="!aboutStore.tech">Vue / Vue 3</li>
+        <li v-if="!aboutStore.tech">JavaScript / TypeScript</li>
+        <li v-if="!aboutStore.tech">Node.js</li>
+        <li v-if="!aboutStore.tech">Vite</li>
+        <li v-if="!aboutStore.tech">Pinia</li>
+        <li v-if="!aboutStore.tech">Vue Router</li>
+      </ul>
+      <h2>{{ t('about.features') }}</h2>
+      <ul>
+        <li v-for="(feature, index) in (aboutStore.features.length ? aboutStore.features : [t('about.feature1'), t('about.feature2'), t('about.feature3'), t('about.feature4')])" :key="index">
+          {{ feature }}
+        </li>
+      </ul>
+      <h2>{{ t('about.contact') }}</h2>
+      <p>{{ t('about.contactDesc') }}</p>
+      <ul>
+        <li v-if="aboutStore.contact.email">Email: {{ aboutStore.contact.email }}</li>
+        <li v-if="aboutStore.contact.github">GitHub: {{ aboutStore.contact.github }}</li>
+        <li v-if="!aboutStore.contact.email">Email: example@email.com</li>
+        <li v-if="!aboutStore.contact.github">GitHub: github.com/yourusername</li>
+      </ul>
+      <div class="filing-number">
+        {{ aboutStore.filingNumber || t('about.filingNumber') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.about-page {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.about-header {
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.about-content h2 {
+  margin-top: 2rem;
+}
+
+.about-content p {
+  line-height: 1.8;
+  margin-bottom: 1rem;
+}
+
+.about-content ul {
+  list-style: disc;
+  padding-left: 1.5rem;
+}
+
+.about-content li {
+  line-height: 1.8;
+  margin-bottom: 0.5rem;
+}
+
+.filing-number {
+  margin-top: 3rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+  font-size: 0.9rem;
+}
+</style>
--- a/src/views/CronView.vue
+++ b/src/views/CronView.vue
@@ -0,0 +1,591 @@
+<script setup>
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { useCronStore } from '@/stores/cron'
+import { useI18n } from '@/composables/useI18n'
+
+const { t, locale } = useI18n()
+const cronStore = useCronStore()
+
+const showModal = ref(false)
+const editingTask = ref(null)
+const form = ref({
+  name: '',
+  cron: '',
+  url: '',
+  method: 'GET',
+  headers: '',
+  body: '',
+  enabled: true
+})
+
+let schedulerTimer = null
+
+onMounted(() => {
+  cronStore.loadTasks()
+  startScheduler()
+})
+
+onUnmounted(() => {
+  stopScheduler()
+})
+
+function openModal(task = null) {
+  if (task) {
+    editingTask.value = task.id
+    form.value = { ...task }
+  } else {
+    editingTask.value = null
+    form.value = {
+      name: '',
+      cron: '',
+      url: '',
+      method: 'GET',
+      headers: '',
+      body: '',
+      enabled: true
+    }
+  }
+  showModal.value = true
+}
+
+function closeModal() {
+  showModal.value = false
+  editingTask.value = null
+}
+
+async function saveTask() {
+  if (!form.value.name || !form.value.cron || !form.value.url) {
+    alert('请填写必填项：任务名称、Cron表达式、请求URL')
+    return
+  }
+
+  if (!validateCron(form.value.cron)) {
+    alert('Cron表达式格式不正确')
+    return
+  }
+
+  if (editingTask.value) {
+    await cronStore.updateTask(editingTask.value, form.value)
+  } else {
+    await cronStore.createTask(form.value)
+  }
+
+  closeModal()
+}
+
+async function deleteTask(id) {
+  if (confirm('确定要删除这个任务吗？')) {
+    await cronStore.deleteTask(id)
+  }
+}
+
+async function toggleTask(id) {
+  await cronStore.toggleTask(id)
+}
+
+function validateCron(cron) {
+  const parts = cron.trim().split(/\s+/)
+  if (parts.length < 5 || parts.length > 6) return false
+  return parts.every(part => /^[^\s]+$/.test(part) && part !== '')
+}
+
+function formatTime(date) {
+  if (!date) return '-'
+  return new Date(date).toLocaleString(locale.value === 'en' ? 'en-US' : 'zh-CN')
+}
+
+async function executeTask(task) {
+  await cronStore.executeTask(task.id)
+}
+
+function startScheduler() {
+  schedulerTimer = setInterval(() => {
+    const now = new Date()
+    cronStore.tasks.forEach(task => {
+      if (!task.enabled || !task.nextRun) return
+
+      const nextRun = new Date(task.nextRun)
+      if (now >= nextRun) {
+        cronStore.executeTask(task.id)
+      }
+    })
+  }, 10000)
+}
+
+function stopScheduler() {
+  if (schedulerTimer) {
+    clearInterval(schedulerTimer)
+    schedulerTimer = null
+  }
+}
+</script>
+
+<template>
+  <div class="cron-page">
+    <div class="cron-header">
+      <h1>{{ t('cron.title') }}</h1>
+      <button class="btn-primary" @click="openModal()">+ {{ t('cron.newTask') }}</button>
+    </div>
+
+    <div class="cron-tips">
+      <h3>{{ t('cron.usage') }}</h3>
+      <ul>
+        <li>{{ t('cron.cronFormat') }}</li>
+        <li>{{ t('cron.supportedSymbols') }}</li>
+        <li>{{ t('cron.headersFormat') }}</li>
+      </ul>
+    </div>
+
+    <div class="task-list">
+      <div v-if="cronStore.tasks.length === 0" class="empty-state">
+        <p>{{ t('cron.empty') }}</p>
+      </div>
+
+      <div v-for="task in cronStore.tasks" :key="task.id" class="task-card">
+        <div class="task-main">
+          <div class="task-info">
+            <div class="task-name">
+              {{ task.name }}
+              <span v-if="!task.enabled" class="badge-disabled">{{ t('cron.disabled') }}</span>
+              <span v-if="cronStore.taskStatus[task.id] === 'running'" class="badge-running">{{ t('cron.running') }}</span>
+              <span v-else-if="cronStore.taskStatus[task.id] === 'success'" class="badge-success">{{ t('cron.success') }}</span>
+              <span v-else-if="cronStore.taskStatus[task.id] === 'error'" class="badge-error">{{ t('cron.error') }}</span>
+            </div>
+            <div class="task-cron">{{ task.cron }}</div>
+            <div class="task-request">
+              <span class="method-badge" :class="'method-' + task.method.toLowerCase()">{{ task.method }}</span>
+              {{ task.url }}
+            </div>
+          </div>
+          <div class="task-stats">
+            <div class="stat-item">
+              <span class="stat-label">{{ t('cron.nextRun') }}</span>
+              <span class="stat-value">{{ task.nextRun || '-' }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-label">{{ t('cron.lastRun') }}</span>
+              <span class="stat-value">{{ task.lastRun || '-' }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-label">{{ t('cron.runCount') }}</span>
+              <span class="stat-value">{{ task.runCount || 0 }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="task-actions">
+          <button class="btn-action" @click="executeTask(task)" :disabled="cronStore.taskStatus[task.id] === 'running'">
+            {{ cronStore.taskStatus[task.id] === 'running' ? t('cron.executing') : t('cron.runNow') }}
+          </button>
+          <button class="btn-action" @click="toggleTask(task.id)">
+            {{ task.enabled ? t('cron.disable') : t('cron.enable') }}
+          </button>
+          <button class="btn-action" @click="openModal(task)">{{ t('cron.edit') }}</button>
+          <button class="btn-action btn-danger" @click="deleteTask(task.id)">{{ t('cron.delete') }}</button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+      <div class="modal">
+        <div class="modal-header">
+          <h2>{{ editingTask ? t('cron.editTask') : t('cron.newTask') }}</h2>
+          <button class="btn-close" @click="closeModal">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div class="form-group">
+            <label>{{ t('cron.taskName') }} *</label>
+            <input v-model="form.name" type="text" :placeholder="t('cron.taskNamePlaceholder')" />
+          </div>
+          <div class="form-group">
+            <label>{{ t('cron.cronExpression') }} *</label>
+            <input v-model="form.cron" type="text" placeholder="*/5 * * * *" />
+            <span class="form-hint">{{ t('cron.cronHint') }}</span>
+          </div>
+          <div class="form-row">
+            <div class="form-group">
+              <label>{{ t('cron.requestMethod') }}</label>
+              <select v-model="form.method">
+                <option value="GET">GET</option>
+                <option value="POST">POST</option>
+                <option value="PUT">PUT</option>
+                <option value="PATCH">PATCH</option>
+                <option value="DELETE">DELETE</option>
+              </select>
+            </div>
+            <div class="form-group flex-1">
+              <label>{{ t('cron.requestURL') }} *</label>
+              <input v-model="form.url" type="text" placeholder="https://api.example.com/webhook" />
+            </div>
+          </div>
+          <div class="form-group">
+            <label>{{ t('cron.requestHeaders') }} (JSON)</label>
+            <input v-model="form.headers" type="text" placeholder='{"Content-Type": "application/json"}' />
+          </div>
+          <div class="form-group">
+            <label>{{ t('cron.requestBody') }}</label>
+            <textarea v-model="form.body" rows="3" placeholder='{"key": "value"}'></textarea>
+          </div>
+          <div class="form-group">
+            <label class="checkbox-label">
+              <input v-model="form.enabled" type="checkbox" />
+              {{ t('cron.enableTask') }}
+            </label>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn-secondary" @click="closeModal">{{ t('cron.cancel') }}</button>
+          <button class="btn-primary" @click="saveTask">{{ t('cron.save') }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cron-page {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.cron-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.cron-header h1 {
+  font-size: 1.8rem;
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: white;
+  border: none;
+  padding: 0.6rem 1.2rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.btn-primary:hover {
+  opacity: 0.9;
+}
+
+.cron-tips {
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1rem 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.cron-tips h3 {
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+}
+
+.cron-tips ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.cron-tips li {
+  line-height: 1.8;
+  color: var(--color-text-secondary);
+}
+
+.cron-tips code {
+  background: var(--color-border);
+  padding: 0.1rem 0.4rem;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+.task-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 3rem;
+  color: var(--color-text-secondary);
+  background: var(--color-background);
+  border-radius: 8px;
+}
+
+.task-card {
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1.5rem;
+}
+
+.task-main {
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem;
+  margin-bottom: 1rem;
+}
+
+.task-info {
+  flex: 1;
+}
+
+.task-name {
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.badge-disabled {
+  background: #999;
+  color: white;
+  padding: 0.1rem 0.5rem;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  font-weight: normal;
+}
+
+.badge-running {
+  background: #f59e0b;
+  color: white;
+  padding: 0.1rem 0.5rem;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  font-weight: normal;
+}
+
+.badge-success {
+  background: #22c55e;
+  color: white;
+  padding: 0.1rem 0.5rem;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  font-weight: normal;
+}
+
+.badge-error {
+  background: #ef4444;
+  color: white;
+  padding: 0.1rem 0.5rem;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  font-weight: normal;
+}
+
+.task-cron {
+  font-family: monospace;
+  color: var(--color-primary);
+  margin-bottom: 0.5rem;
+}
+
+.task-request {
+  color: var(--color-text-secondary);
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.method-badge {
+  padding: 0.1rem 0.4rem;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  font-weight: bold;
+}
+
+.method-get { background: #22c55e; color: white; }
+.method-post { background: #3b82f6; color: white; }
+.method-put { background: #f59e0b; color: white; }
+.method-patch { background: #8b5cf6; color: white; }
+.method-delete { background: #ef4444; color: white; }
+
+.task-stats {
+  display: flex;
+  gap: 2rem;
+  text-align: center;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+.stat-value {
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.task-actions {
+  display: flex;
+  gap: 0.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.btn-action {
+  background: var(--color-border);
+  border: none;
+  padding: 0.4rem 0.8rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.btn-action:hover {
+  background: #ccc;
+}
+
+.btn-action:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-danger {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.btn-danger:hover {
+  background: #fecaca;
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: var(--color-background);
+  border-radius: 8px;
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.modal-header h2 {
+  font-size: 1.2rem;
+  margin: 0;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.3rem;
+  font-weight: 500;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-size: 1rem;
+  box-sizing: border-box;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.form-hint {
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+  margin-top: 0.25rem;
+  display: block;
+}
+
+.form-row {
+  display: flex;
+  gap: 1rem;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.checkbox-label input {
+  width: auto;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.btn-secondary {
+  background: var(--color-border);
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btn-secondary:hover {
+  background: #ccc;
+}
+</style>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import PostList from '@/components/PostList.vue'
+import { usePostsStore } from '@/stores/posts'
+import { useI18n } from '@/composables/useI18n'
+
+const router = useRouter()
+const postsStore = usePostsStore()
+const { t } = useI18n()
+
+onMounted(() => {
+  if (postsStore.posts.length === 0) {
+    postsStore.fetchPosts()
+  }
+})
+
+function goToNewPost() {
+  router.push('/post/new')
+}
+</script>
+
+<template>
+  <main>
+    <div class="home">
+      <div class="page-header">
+        <h1 class="page-title">{{ t('home.title') }}</h1>
+        <button class="btn-new-post" @click="goToNewPost" :style="{ display: 'none' }">+ {{ t('home.newPost') }}</button>
+      </div>
+      <div v-if="postsStore.loading" class="loading">{{ t('home.loading') }}</div>
+      <div v-else-if="postsStore.error" class="error">{{ postsStore.error }}</div>
+      <PostList v-else />
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.home {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.page-title {
+  margin: 0;
+}
+
+.btn-new-post {
+  background: var(--color-primary);
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.95rem;
+}
+
+.btn-new-post:hover {
+  opacity: 0.9;
+}
+
+.loading {
+  text-align: center;
+  padding: 2rem;
+  color: var(--color-text-secondary);
+}
+
+.error {
+  text-align: center;
+  padding: 2rem;
+  color: #ef4444;
+}
+</style>
--- a/src/views/PostDetail.vue
+++ b/src/views/PostDetail.vue
@@ -0,0 +1,240 @@
+<script setup>
+import { computed } from 'vue'
+import { useRoute, useRouter, RouterLink } from 'vue-router'
+import { usePostsStore } from '@/stores/posts'
+import { marked } from 'marked'
+
+const route = useRoute()
+const router = useRouter()
+const postsStore = usePostsStore()
+
+const post = computed(() => postsStore.getPostById(route.params.id))
+const renderedContent = computed(() => post.value ? marked(post.value.content || '') : '')
+
+function goToEdit() {
+  router.push(`/post/edit/${route.params.id}`)
+}
+
+async function deletePost() {
+  if (confirm('确定要删除这篇文章吗？')) {
+    await postsStore.deletePost(route.params.id)
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div class="post-detail" v-if="post">
+    <div class="nav-buttons">
+      <RouterLink to="/" class="back-link">← 返回列表</RouterLink>
+      <div class="action-buttons">
+        <button class="btn-edit" @click="goToEdit" :style="{ display: 'none' }">编辑</button>
+        <button class="btn-delete" @click="deletePost" :style="{ display: 'none' }">删除</button>
+      </div>
+    </div>
+    <article class="post">
+      <header class="post-header">
+        <h1 class="post-title">{{ post.title }}</h1>
+        <p class="post-date">{{ post.date }}</p>
+      </header>
+      <div class="post-content markdown-body" v-html="renderedContent"></div>
+    </article>
+  </div>
+  <div v-else class="not-found">
+    <h2>文章未找到</h2>
+    <RouterLink to="/">返回首页</RouterLink>
+  </div>
+</template>
+
+<style scoped>
+.post-detail {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.nav-buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.back-link {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.back-link:hover {
+  text-decoration: underline;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn-edit, .btn-delete {
+  padding: 0.4rem 0.8rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.btn-edit {
+  background: var(--color-primary);
+  color: white;
+}
+
+.btn-delete {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.btn-edit:hover {
+  opacity: 0.9;
+}
+
+.btn-delete:hover {
+  background: #fecaca;
+}
+
+.post {
+  background: var(--color-background);
+  padding: 2rem;
+  border-radius: 8px;
+}
+
+.post-header {
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.post-title {
+  margin: 0 0 0.5rem;
+}
+
+.post-date {
+  margin: 0;
+  color: #666;
+  font-size: 0.875rem;
+}
+
+.post-content {
+  color: var(--color-text);
+}
+
+.not-found {
+  text-align: center;
+  padding: 4rem 2rem;
+}
+
+.not-found h2 {
+  margin-bottom: 1rem;
+}
+</style>
+
+<style>
+.markdown-body {
+  line-height: 1.8;
+}
+
+.markdown-body h1 {
+  font-size: 1.8rem;
+  margin: 1.5rem 0 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.markdown-body h2 {
+  font-size: 1.5rem;
+  margin: 1.5rem 0 1rem;
+}
+
+.markdown-body h3 {
+  font-size: 1.25rem;
+  margin: 1.25rem 0 0.75rem;
+}
+
+.markdown-body p {
+  margin: 0 0 1rem;
+}
+
+.markdown-body code {
+  background: var(--color-border);
+  padding: 0.15rem 0.4rem;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+.markdown-body pre {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 1rem;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.markdown-body pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.9rem;
+  color: inherit;
+}
+
+.markdown-body ul, .markdown-body ol {
+  margin: 0 0 1rem;
+  padding-left: 2rem;
+}
+
+.markdown-body li {
+  margin: 0.25rem 0;
+}
+
+.markdown-body table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1rem 0;
+}
+
+.markdown-body table th,
+.markdown-body table td {
+  border: 1px solid var(--color-border);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+
+.markdown-body table th {
+  background: var(--color-surface);
+  font-weight: 600;
+}
+
+.markdown-body blockquote {
+  margin: 1rem 0;
+  padding: 0.5rem 1rem;
+  border-left: 4px solid var(--color-primary);
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+}
+
+.markdown-body hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 1.5rem 0;
+}
+
+.markdown-body a {
+  color: var(--color-primary);
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+.markdown-body img {
+  max-width: 100%;
+  border-radius: 4px;
+}
+</style>
--- a/src/views/PostEditorView.vue
+++ b/src/views/PostEditorView.vue
@@ -0,0 +1,215 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { usePostsStore } from '@/stores/posts'
+import { useI18n } from '@/composables/useI18n'
+
+const route = useRoute()
+const router = useRouter()
+const postsStore = usePostsStore()
+const { t, locale } = useI18n()
+
+const postId = route.params.id ? Number(route.params.id) : null
+const isEditing = ref(false)
+
+const form = ref({
+  title: '',
+  date: new Date().toISOString().split('T')[0],
+  excerpt: '',
+  content: ''
+})
+
+const saving = ref(false)
+const error = ref('')
+
+onMounted(async () => {
+  if (postId) {
+    isEditing.value = true
+    // 尝试从 store 获取
+    let post = postsStore.getPostById(postId)
+    if (!post) {
+      // 从 API 获取
+      try {
+        const res = await fetch(`/api/posts/${postId}`)
+        post = await res.json()
+      } catch (e) {
+        error.value = t('postEditor.loadFailed')
+        return
+      }
+    }
+    if (post) {
+      form.value = {
+        title: post.title || '',
+        date: post.date ? post.date.split('T')[0] : '',
+        excerpt: post.excerpt || '',
+        content: post.content || ''
+      }
+    }
+  }
+})
+
+async function savePost() {
+  if (!form.value.title || !form.value.date) {
+    alert(t('postEditor.titleRequired'))
+    return
+  }
+
+  saving.value = true
+  error.value = ''
+
+  try {
+    if (isEditing.value) {
+      await postsStore.updatePost(postId, form.value)
+    } else {
+      await postsStore.createPost(form.value)
+    }
+    router.push('/')
+  } catch (e) {
+    error.value = t('postEditor.saveFailed')
+  } finally {
+    saving.value = false
+  }
+}
+
+function cancel() {
+  router.back()
+}
+</script>
+<template>
+  <div class="post-editor">
+    <div class="editor-header">
+      <h1>{{ isEditing ? t('postEditor.editTitle') : t('postEditor.newTitle') }}</h1>
+    </div>
+
+    <div v-if="error" class="error-msg">{{ error }}</div>
+
+    <form @submit.prevent="savePost" class="editor-form">
+      <div class="form-group">
+        <label>{{ t('postEditor.title') }} *</label>
+        <input v-model="form.title" type="text" required />
+      </div>
+
+      <div class="form-group">
+        <label>{{ t('postEditor.date') }} *</label>
+        <input v-model="form.date" type="date" required />
+      </div>
+
+      <div class="form-group">
+        <label>{{ t('postEditor.excerpt') }}</label>
+        <textarea v-model="form.excerpt" rows="2" :placeholder="t('postEditor.excerptPlaceholder')"></textarea>
+      </div>
+
+      <div class="form-group">
+        <label>{{ t('postEditor.content') }}</label>
+        <textarea v-model="form.content" rows="15" :placeholder="t('postEditor.contentPlaceholder')"></textarea>
+      </div>
+
+      <div class="form-actions">
+        <button type="button" class="btn-cancel" @click="cancel">{{ t('postEditor.cancel') }}</button>
+        <button type="submit" class="btn-save" :disabled="saving">
+          {{ saving ? t('postEditor.saving') : t('postEditor.save') }}
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.post-editor {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.editor-header {
+  font-size: 1.8rem;
+}
+
+.editor-header h1 {
+  font-size: 1.8rem;
+}
+
+.error-msg {
+  color: #ef4444;
+  margin-bottom: 1rem;
+}
+
+.editor-form {
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 1rem;
+  box-sizing: border-box;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.form-group textarea {
+  resize: vertical;
+  font-family: inherit;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.btn-cancel,
+.btn-save {
+  padding: 0.6rem 1.5rem;
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.btn-cancel {
+  background: var(--color-border);
+  color: var(--color-text);
+}
+
+.btn-cancel:hover {
+  background: #ccc;
+}
+
+.btn-save {
+  background: var(--color-primary);
+  color: white;
+}
+
+.btn-save:hover {
+  opacity: 0.9;
+}
+
+.btn-save:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>
--- a/src/views/ServerConfigView.vue
+++ b/src/views/ServerConfigView.vue
@@ -0,0 +1,275 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useI18n } from '@/composables/useI18n'
+
+const { t } = useI18n()
+
+const config = ref({
+  db: { host: '', port: '', user: '', password: '', name: '' },
+  rustfs: { endpoint: '', region: '', bucket: '', accessKey: '', secretKey: '' },
+  server: { port: '' }
+})
+
+const loading = ref(false)
+const saving = ref(false)
+const restarting = ref(false)
+const message = ref('')
+const error = ref('')
+
+async function loadConfig() {
+  loading.value = true
+  error.value = ''
+  try {
+    const res = await fetch('/api/config')
+    const data = await res.json()
+    config.value = data
+  } catch (e) {
+    error.value = '加载配置失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function saveConfig() {
+  saving.value = true
+  error.value = ''
+  message.value = ''
+  try {
+    const res = await fetch('/api/config', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(config.value)
+    })
+    if (res.ok) {
+      message.value = t('serverConfig.saved')
+      setTimeout(() => { message.value = '' }, 3000)
+    } else {
+      error.value = t('serverConfig.saveFailed')
+    }
+  } catch (e) {
+    error.value = t('serverConfig.saveFailed')
+  } finally {
+    saving.value = false
+  }
+}
+
+async function restartServer() {
+  if (!confirm(t('serverConfig.confirmRestart'))) return
+
+  restarting.value = true
+  error.value = ''
+  try {
+    await fetch('/api/config/restart', { method: 'POST' })
+    message.value = t('serverConfig.restarting')
+  } catch (e) {
+    error.value = t('serverConfig.restartFailed')
+  } finally {
+    setTimeout(() => { restarting.value = false }, 5000)
+  }
+}
+
+onMounted(() => {
+  loadConfig()
+})
+</script>
+
+<template>
+  <div class="server-config-page">
+    <div class="page-header">
+      <h1>{{ t('serverConfig.title') }}</h1>
+    </div>
+
+    <div v-if="loading" class="loading">{{ t('serverConfig.loading') }}</div>
+
+    <div v-else-if="error" class="error-msg">{{ error }}</div>
+
+    <template v-else>
+      <div class="config-section">
+        <h2>{{ t('serverConfig.database') }}</h2>
+        <div class="form-grid">
+          <div class="form-group">
+            <label>{{ t('serverConfig.dbHost') }}</label>
+            <input type="text" v-model="config.db.host" />
+          </div>
+          <div class="form-group">
+            <label>{{ t('serverConfig.dbPort') }}</label>
+            <input type="text" v-model="config.db.port" />
+          </div>
+          <div class="form-group">
+            <label>{{ t('serverConfig.dbUser') }}</label>
+            <input type="text" v-model="config.db.user" />
+          </div>
+          <div class="form-group">
+            <label>{{ t('serverConfig.dbPassword') }}</label>
+            <input type="password" v-model="config.db.password" :placeholder="t('serverConfig.passwordPlaceholder')" />
+          </div>
+          <div class="form-group">
+            <label>{{ t('serverConfig.dbName') }}</label>
+            <input type="text" v-model="config.db.name" />
+          </div>
+        </div>
+      </div>
+
+      <div class="config-section">
+        <h2>{{ t('serverConfig.rustfs') }}</h2>
+        <div class="form-grid">
+          <div class="form-group full-width">
+            <label>{{ t('serverConfig.rustfsEndpoint') }}</label>
+            <input type="text" v-model="config.rustfs.endpoint" />
+          </div>
+          <div class="form-group">
+            <label>{{ t('serverConfig.rustfsRegion') }}</label>
+            <input type="text" v-model="config.rustfs.region" />
+          </div>
+          <div class="form-group">
+            <label>{{ t('serverConfig.rustfsBucket') }}</label>
+            <input type="text" v-model="config.rustfs.bucket" />
+          </div>
+          <div class="form-group">
+            <label>{{ t('serverConfig.rustfsAccessKey') }}</label>
+            <input type="text" v-model="config.rustfs.accessKey" />
+          </div>
+          <div class="form-group">
+            <label>{{ t('serverConfig.rustfsSecretKey') }}</label>
+            <input type="password" v-model="config.rustfs.secretKey" :placeholder="t('serverConfig.passwordPlaceholder')" />
+          </div>
+        </div>
+      </div>
+
+      <div class="config-section">
+        <h2>{{ t('serverConfig.server') }}</h2>
+        <div class="form-grid">
+          <div class="form-group">
+            <label>{{ t('serverConfig.serverPort') }}</label>
+            <input type="text" v-model="config.server.port" />
+          </div>
+        </div>
+      </div>
+
+      <div class="actions">
+        <button class="btn-save" @click="saveConfig" :disabled="saving">
+          {{ saving ? t('serverConfig.saving') : t('serverConfig.save') }}
+        </button>
+        <button class="btn-restart" @click="restartServer" :disabled="restarting">
+          {{ restarting ? t('serverConfig.restarting') : t('serverConfig.restart') }}
+        </button>
+      </div>
+
+      <div v-if="message" class="success-msg">{{ message }}</div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.server-config-page {
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+.page-header {
+  margin-bottom: 2rem;
+}
+
+.page-header h1 {
+  font-size: 1.8rem;
+}
+
+.config-section {
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.config-section h2 {
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.form-group.full-width {
+  grid-column: 1 / -1;
+}
+
+.form-group label {
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+}
+
+.form-group input {
+  padding: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 0.95rem;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.actions {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.btn-save, .btn-restart {
+  padding: 0.6rem 1.5rem;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.btn-save {
+  background: var(--color-primary);
+  color: white;
+}
+
+.btn-restart {
+  background: #e67e22;
+  color: white;
+}
+
+.btn-save:hover, .btn-restart:hover {
+  opacity: 0.9;
+}
+
+.btn-save:disabled, .btn-restart:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.loading, .error-msg, .success-msg {
+  text-align: center;
+  padding: 2rem;
+}
+
+.error-msg {
+  color: #e74c3c;
+}
+
+.success-msg {
+  color: #27ae60;
+  margin-top: 1rem;
+}
+</style>
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -0,0 +1,771 @@
+<script setup>
+import { ref } from 'vue'
+import { useSettingsStore } from '@/stores/settings'
+import { useI18n } from '@/composables/useI18n'
+
+const settings = useSettingsStore()
+const { t } = useI18n()
+
+const bgPresets = [
+  { color: '#f5f5f5', name: '浅灰' },
+  { color: '#e8f4f8', name: '淡蓝' },
+  { color: '#f0f0f0', name: '银灰' },
+  { color: '#fff8dc', name: '米黄' },
+  { color: '#e8f0e8', name: '淡绿' },
+  { color: '#fce4ec', name: '淡粉' }
+]
+
+const bgImagePresets = [
+  'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=1920',
+  'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920',
+  'https://images.unsplash.com/photo-1470071459604-3b5ec3a55120?w=1920',
+  'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1920'
+]
+
+const isUploading = ref(false)
+
+function onBgTypeChange(value) {
+  settings.setBgType(value)
+}
+
+function onBgColorChange(value) {
+  settings.setBgColor(value)
+}
+
+function onBgOpacityChange(value) {
+  settings.setBgOpacity(value)
+}
+
+function onLanguageChange(value) {
+  settings.setLanguage(value)
+}
+
+function onBgImageUrlChange(event) {
+  settings.setBgImage(event.target.value)
+}
+
+function compressImage(file, maxSizeKB = 500) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      const img = new Image()
+      img.onload = () => {
+        const canvas = document.createElement('canvas')
+        let width = img.width
+        let height = img.height
+
+        const maxDimension = 1920
+        if (width > maxDimension || height > maxDimension) {
+          if (width > height) {
+            height = (height / width) * maxDimension
+            width = maxDimension
+          } else {
+            width = (width / height) * maxDimension
+            height = maxDimension
+          }
+        }
+
+        canvas.width = width
+        canvas.height = height
+        const ctx = canvas.getContext('2d')
+        ctx.drawImage(img, 0, 0, width, height)
+
+        let quality = 0.9
+        let result = canvas.toDataURL('image/jpeg', quality)
+
+        while (result.length > maxSizeKB * 1024 && quality > 0.3) {
+          quality -= 0.1
+          result = canvas.toDataURL('image/jpeg', quality)
+        }
+
+        if (result.length > maxSizeKB * 1024) {
+          const scale = Math.sqrt((maxSizeKB * 1024) / result.length)
+          canvas.width = width * scale
+          canvas.height = height * scale
+          const ctx2 = canvas.getContext('2d')
+          ctx2.drawImage(img, 0, 0, canvas.width, canvas.height)
+          result = canvas.toDataURL('image/jpeg', 0.6)
+        }
+
+        resolve(result)
+      }
+      img.onerror = reject
+      img.src = e.target.result
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(file)
+  })
+}
+
+function readFileAsDataURL(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (e) => resolve(e.target.result)
+    reader.onerror = reject
+    reader.readAsDataURL(file)
+  })
+}
+
+async function handleImageUpload(event) {
+  const files = Array.from(event.target.files || [])
+  if (files.length === 0) return
+
+  const invalidFiles = files.filter(f => !f.type.startsWith('image/'))
+  if (invalidFiles.length > 0) {
+    alert('请选择图片文件')
+    return
+  }
+
+  const oversizedFiles = files.filter(f => f.size > 10 * 1024 * 1024)
+  if (oversizedFiles.length > 0) {
+    alert('图片大小不能超过10MB')
+    return
+  }
+
+  isUploading.value = true
+  try {
+    // 压缩所有图片
+    const compressedImages = []
+    for (const file of files) {
+      const compressed = await compressImage(file, 500)
+      compressedImages.push(compressed)
+    }
+
+    // 批量上传到 RUSTFS
+    await settings.addUploadedImagesBatch(compressedImages)
+
+    // 只将第一张设为背景
+    if (compressedImages.length > 0) {
+      await settings.setBgImageFromData(compressedImages[0])
+    }
+  } catch (error) {
+    alert('图片上传失败')
+  }
+  isUploading.value = false
+}
+
+function selectUploadedImage(url) {
+  settings.setBgImage(url)
+}
+
+function deleteUploadedImage(id) {
+  if (confirm('确定要删除这张图片吗？')) {
+    settings.removeUploadedImage(id)
+  }
+}
+
+async function handleIconUpload(event) {
+  const files = Array.from(event.target.files || [])
+  if (files.length === 0) return
+
+  const invalidFiles = files.filter(f => !f.type.startsWith('image/'))
+  if (invalidFiles.length > 0) {
+    alert('请选择图片文件')
+    return
+  }
+
+  const oversizedFiles = files.filter(f => f.size > 512 * 1024)
+  if (oversizedFiles.length > 0) {
+    alert('图标大小不能超过512KB')
+    return
+  }
+
+  isUploading.value = true
+  try {
+    // 读取所有图标
+    const iconDataList = []
+    for (const file of files) {
+      const data = await readFileAsDataURL(file)
+      iconDataList.push(data)
+    }
+
+    // 批量上传到 RUSTFS
+    await settings.addUploadedIconsBatch(iconDataList)
+
+    // 只将第一个设为当前图标
+    if (iconDataList.length > 0) {
+      await settings.setFaviconFromData(iconDataList[0])
+    }
+  } catch (error) {
+    alert('图标上传失败')
+  }
+  isUploading.value = false
+}
+
+function selectUploadedIcon(url) {
+  settings.setFavicon(url)
+}
+
+function deleteUploadedIcon(id) {
+  if (confirm('确定要删除这个图标吗？')) {
+    settings.removeUploadedIcon(id)
+  }
+}
+
+function resetFavicon() {
+  settings.setFavicon('')
+}
+</script>
+
+<template>
+  <div class="settings-page">
+    <div class="settings-header">
+      <h1>{{ t('settings.title') }}</h1>
+    </div>
+
+    <div class="settings-section">
+      <h2>{{ t('settings.language') }}</h2>
+      <div class="setting-item">
+        <label>{{ t('settings.interfaceLang') }}</label>
+        <div class="language-switch">
+          <button
+            :class="{ active: settings.language === 'zh' }"
+            @click="onLanguageChange('zh')"
+          >
+            中文
+          </button>
+          <button
+            :class="{ active: settings.language === 'en' }"
+            @click="onLanguageChange('en')"
+          >
+            English
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="settings-section">
+      <h2>{{ t('settings.siteIcon') }}</h2>
+      <div class="setting-item">
+        <div class="icon-preview">
+          <img
+            v-if="settings.favicon"
+            :src="settings.favicon"
+            class="icon-img"
+          />
+          <img
+            v-else
+            src="/favicon.ico"
+            class="icon-img"
+          />
+         <div class="icon-actions">
+            <div class="upload-btn-wrapper">
+              <button class="btn-upload-small">
+                {{ t('settings.uploadIcon') }}
+              </button>
+              <input
+                type="file"
+                accept="image/*"
+                multiple
+                @change="handleIconUpload"
+              />
+            </div>
+            <button
+              v-if="settings.favicon"
+              class="btn-reset"
+              @click="resetFavicon"
+            >
+              {{ t('settings.defaultIcon') }}
+            </button>
+          </div>
+        </div>
+      </div>
+      <div v-if="settings.uploadedIcons.length > 0" class="uploaded-list">
+        <label>{{ t('settings.myIcons') }}</label>
+        <div class="uploaded-items">
+          <div
+            v-for="icon in settings.uploadedIcons"
+            :key="icon.id"
+            class="uploaded-item"
+            :class="{ selected: settings.favicon === icon.url }"
+          >
+            <img :src="icon.url" @click="selectUploadedIcon(icon.url)" />
+            <button class="btn-delete" @click="deleteUploadedIcon(icon.id)">&times;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="settings-section">
+      <h2>{{ t('settings.background') }}</h2>
+
+      <div class="setting-item">
+        <label>{{ t('settings.bgType') }}</label>
+        <div class="bg-type-switch">
+          <button
+            :class="{ active: settings.bgType === 'color' }"
+            @click="onBgTypeChange('color')"
+          >
+            {{ t('settings.solid') }}
+          </button>
+          <button
+            :class="{ active: settings.bgType === 'image' }"
+            @click="onBgTypeChange('image')"
+          >
+            {{ t('settings.image') }}
+          </button>
+        </div>
+      </div>
+
+      <div v-if="settings.bgType === 'color'" class="setting-item">
+        <label>{{ t('settings.bgColor') }}</label>
+        <div class="color-presets">
+          <div
+            v-for="preset in bgPresets"
+            :key="preset.color"
+            class="color-preset"
+            :style="{ backgroundColor: preset.color }"
+            :class="{ selected: settings.bgColor === preset.color }"
+            @click="onBgColorChange(preset.color)"
+            :title="preset.name"
+          ></div>
+        </div>
+        <div class="color-input">
+          <input
+            type="color"
+            :value="settings.bgColor"
+            @input="onBgColorChange($event.target.value)"
+          />
+          <span>{{ settings.bgColor }}</span>
+        </div>
+      </div>
+
+      <div v-if="settings.bgType === 'image'" class="setting-item">
+        <label>{{ t('settings.bgImage') }}</label>
+        <div class="image-presets">
+          <div
+            v-for="(img, index) in bgImagePresets"
+            :key="index"
+            class="image-preset"
+            :style="{ backgroundImage: `url(${img})` }"
+            :class="{ selected: settings.bgImage === img }"
+            @click="settings.setBgImage(img)"
+          ></div>
+        </div>
+        <div class="image-upload-area">
+          <div class="upload-btn-wrapper">
+            <button class="btn-upload" :disabled="isUploading">
+              {{ isUploading ? t('settings.uploading') : t('settings.uploadImage') }}
+            </button>
+            <input
+              type="file"
+              accept="image/*"
+              multiple
+              @change="handleImageUpload"
+              :disabled="isUploading"
+            />
+          </div>
+        </div>
+        <div class="image-input">
+          <input
+            type="text"
+            :value="settings.bgImage"
+            @input="onBgImageUrlChange"
+            :placeholder="t('settings.imageUrlPlaceholder')"
+          />
+        </div>
+      </div>
+
+      <div v-if="settings.bgType === 'image' && settings.uploadedImages.length > 0" class="uploaded-list">
+        <label>{{ t('settings.myImages') }}</label>
+        <div class="uploaded-items uploaded-images">
+          <div
+            v-for="img in settings.uploadedImages"
+            :key="img.id"
+            class="uploaded-item"
+            :class="{ selected: settings.bgImage === img.url }"
+          >
+            <div
+              class="uploaded-bg-preview"
+              :style="{ backgroundImage: `url(${img.url})` }"
+              @click="selectUploadedImage(img.url)"
+            ></div>
+            <button class="btn-delete" @click="deleteUploadedImage(img.id)">&times;</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="setting-item">
+        <label>{{ t('settings.opacity') }}: {{ Math.round(settings.bgOpacity * 100) }}%</label>
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.01"
+          :value="settings.bgOpacity"
+          @input="onBgOpacityChange($event.target.value)"
+          class="opacity-slider"
+        />
+      </div>
+
+      <div class="setting-item">
+        <label>{{ t('settings.preview') }}</label>
+        <div
+          class="preview-box"
+          :style="{
+            backgroundColor: settings.bgType === 'color' ? settings.bgColor : 'transparent',
+            backgroundImage: settings.bgType === 'image' && settings.bgImage ? `url(${settings.bgImage})` : 'none',
+            opacity: settings.bgOpacity
+          }"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.settings-page {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.settings-header {
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.settings-header h1 {
+  font-size: 1.8rem;
+}
+
+.settings-section {
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.settings-section h2 {
+  font-size: 1.2rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.setting-item {
+  margin-bottom: 1.5rem;
+}
+
+.setting-item:last-child {
+  margin-bottom: 0;
+}
+
+.setting-item > label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.language-switch,
+.bg-type-switch {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.language-switch button,
+.bg-type-switch button {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-background);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.language-switch button:hover,
+.bg-type-switch button:hover {
+  border-color: var(--color-primary);
+}
+
+.language-switch button.active,
+.bg-type-switch button.active {
+  background: var(--color-primary);
+  color: white;
+  border-color: var(--color-primary);
+}
+
+.color-presets {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+
+.color-preset {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: all 0.2s;
+}
+
+.color-preset:hover {
+  transform: scale(1.1);
+}
+
+.color-preset.selected {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+
+.color-input {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.color-input input[type="color"] {
+  width: 50px;
+  height: 35px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.color-input span {
+  font-family: monospace;
+  color: var(--color-text-secondary);
+}
+
+.image-presets {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.image-preset {
+  height: 60px;
+  background-size: cover;
+  background-position: center;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: all 0.2s;
+}
+
+.image-preset:hover {
+  transform: scale(1.05);
+}
+
+.image-preset.selected {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+
+.image-upload-area {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.upload-btn-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.btn-upload {
+  background: var(--color-primary);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.btn-upload:hover {
+  opacity: 0.9;
+}
+
+.btn-upload:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.upload-btn-wrapper input[type="file"] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.uploaded-list {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.uploaded-list > label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+}
+
+.uploaded-items {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.uploaded-images .uploaded-item {
+  width: 80px;
+  height: 60px;
+}
+
+.uploaded-item {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: 4px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  overflow: hidden;
+  transition: all 0.2s;
+}
+
+.uploaded-item:hover {
+  transform: scale(1.1);
+}
+
+.uploaded-item.selected {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+
+.uploaded-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: white;
+}
+
+.uploaded-bg-preview {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+}
+
+.btn-delete {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 18px;
+  height: 18px;
+  background: rgba(239, 68, 68, 0.9);
+  color: white;
+  border: none;
+  border-radius: 0 4px 0 4px;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.uploaded-item:hover .btn-delete {
+  opacity: 1;
+}
+
+.image-input input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-size: 0.9rem;
+  box-sizing: border-box;
+}
+
+.image-input input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.opacity-slider {
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--color-border);
+  appearance: none;
+  cursor: pointer;
+}
+
+.opacity-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  cursor: pointer;
+}
+
+.preview-box {
+  width: 100%;
+  height: 120px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  background-size: cover;
+  background-position: center;
+  transition: all 0.3s;
+}
+
+.icon-preview {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.icon-img {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  object-fit: contain;
+  background: white;
+}
+
+.icon-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn-upload-small {
+  background: var(--color-primary);
+  color: white;
+  padding: 0.4rem 0.8rem;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.btn-upload-small:hover {
+  opacity: 0.9;
+}
+
+.btn-reset {
+  background: var(--color-border);
+  color: var(--color-text);
+  padding: 0.4rem 0.8rem;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.btn-reset:hover {
+  background: #ccc;
+}
+</style>
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,36 @@
+import { fileURLToPath } from 'url'
+import { defineConfig, loadEnv } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// Vite 配置
+export default defineConfig(({ mode }) => {
+  // 加载环境变量
+  const env = loadEnv(mode, process.cwd(), '')
+
+  return {
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
+    },
+    server: {
+      port: 5173,
+      proxy: {
+        '/api': {
+          // 本地开发模式：VITE_SERVER_URL 为空或本地地址时使用代理
+          target: env.VITE_SERVER_URL || `http://localhost:${env.VITE_API_PORT || '3000'}`,
+          changeOrigin: true,
+          // 仅远程部署时改变 origin
+          configure: (proxy) => {
+            if (env.VITE_SERVER_URL && !env.VITE_SERVER_URL.includes('localhost')) {
+              proxy.on('proxyReq', (proxyReq) => {
+                proxyReq.setHeader('origin', env.VITE_SERVER_URL)
+              })
+            }
+          }
+        }
+      }
+    }
+  }
+})
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`