Note Blog Platform

一个基于 Vue3 + Go 的现代化 PC 端博客平台
采用 iOS26 海洋蓝主题风格，毛玻璃效果，流畅动画

---

✨ 特性

• 🎨 iOS26 设计风格 - 海洋蓝主题、毛玻璃效果、大圆角、弹性动画
• 📝 富文本编辑 - 基于 Tiptap 的现代编辑器，支持图片上传
• 🔐 JWT 认证 - 安全的用户认证与权限管理
• 💬 评论系统 - 支持评论审核、楼中楼回复
• 🏷️ 分类标签 - 灵活的文章分类与标签管理
• 📦 容器化部署 - Docker Compose 一键启动

---

🛠️ 技术栈

层级	技术
前端框架	Vue 3 + TypeScript + Vite 7
状态管理	Pinia
UI 组件库	TDesign Vue Next
富文本编辑	Tiptap v2
后端框架	Go + Gin
数据库	PostgreSQL 16 (容器)
对象存储	MinIO (容器)
数据库迁移	golang-migrate

---

📁 项目结构

Note-VUE3/
├── docker-compose.yml      # 容器编排配置
├── .env                    # 环境变量（数据库/MinIO 配置）
├── README.md               # 项目文档
│
├── server/                 # 🔧 Go 后端
│   ├── cmd/api/main.go     # 程序入口
│   ├── internal/
│   │   ├── config/         # 配置加载
│   │   ├── database/       # 数据库连接与迁移
│   │   ├── handler/        # HTTP 处理器（控制器）
│   │   ├── middleware/     # JWT 认证中间件
│   │   ├── model/          # 数据模型与 DTO
│   │   ├── repository/     # 数据访问层
│   │   └── router/         # 路由注册
│   ├── migrations/         # SQL 迁移文件
│   ├── go.mod
│   └── go.sum
│
└── web/                    # 🎨 Vue 前端
    ├── src/
    │   ├── api/            # API 请求封装
    │   ├── router/         # 路由配置
    │   ├── stores/         # Pinia 状态管理
    │   ├── styles/         # 全局样式与主题变量
    │   ├── types/          # TypeScript 类型定义
    │   └── views/          # 页面组件
    │       ├── Home.vue           # 首页
    │       ├── Login.vue          # 登录页
    │       ├── PostDetail.vue     # 文章详情
    │       └── admin/             # 管理后台
    ├── package.json
    └── vite.config.ts

---

🚀 快速开始

环境要求

工具	版本要求
Node.js	>= 18.0
pnpm	>= 8.0
Go	>= 1.21
Docker	>= 24.0
Docker Compose	>= 2.0

第一步：克隆项目

git clone <repository-url>
cd Note-VUE3

第二步：启动数据库和对象存储

# 启动 PostgreSQL 和 MinIO 容器
docker compose up -d

# 验证容器状态
docker compose ps

容器启动后：

• PostgreSQL: localhost:54321 (用户: note, 密码: note_password)
• MinIO Console: http://localhost:9001 (用户: note_minio, 密码: note_minio_password)

第三步：启动后端服务

cd server

# 下载依赖
go mod tidy

# 启动服务（会自动执行数据库迁移）
go run ./cmd/api

后端服务启动在 http://localhost:8080

第四步：启动前端服务

cd web

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

前端服务启动在 http://localhost:3000

第五步：访问应用

打开浏览器访问 http://localhost:3000

---

👥 测试账号

系统预置了以下测试账号（密码统一为 admin123）：

用户名	密码	角色	权限说明
admin	admin123	管理员	全部权限
editor	admin123	编辑	文章/分类/标签/评论管理
user1	admin123	普通用户	浏览、评论
user2	admin123	普通用户	浏览、评论

---

📖 使用教程

前台功能

1. 浏览文章 - 首页展示已发布的文章列表，支持分类/标签筛选和关键词搜索
2. 阅读文章 - 点击文章卡片进入详情页，查看完整内容
3. 发表评论 - 登录后可在文章详情页发表评论（需等待审核）

后台管理

登录管理员账号后，点击导航栏「管理」进入后台：

1. 仪表盘 - 查看文章数量、待审核评论等统计
2. 文章管理 - 新建/编辑/删除文章，支持草稿和发布状态切换
3. 分类管理 - 管理文章分类
4. 标签管理 - 管理文章标签
5. 评论管理 - 审核/删除用户评论

文章编辑器

• 支持加粗、斜体、标题、列表、代码块等格式
• 点击「图片」按钮可上传图片（自动上传到 MinIO）
• 可设置文章封面、分类、标签
• 支持保存草稿或直接发布

---

🔌 API 文档

公开接口

方法	路径	说明
GET	/api/posts	文章列表（支持分页、筛选）
GET	/api/posts/:id	文章详情
GET	/api/categories	分类列表
GET	/api/tags	标签列表
GET	/api/posts/:id/comments	文章评论列表

认证接口

方法	路径	说明
POST	/api/auth/login	用户登录
POST	/api/auth/refresh	刷新 Token
GET	/api/me	获取当前用户信息

管理接口（需要 admin/editor 权限）

方法	路径	说明
GET	/api/admin/posts	管理端文章列表
POST	/api/admin/posts	创建文章
PUT	/api/admin/posts/:id	更新文章
DELETE	/api/admin/posts/:id	删除文章
POST	/api/admin/categories	创建分类
PUT	/api/admin/categories/:id	更新分类
DELETE	/api/admin/categories/:id	删除分类
POST	/api/admin/tags	创建标签
PUT	/api/admin/tags/:id	更新标签
DELETE	/api/admin/tags/:id	删除标签
GET	/api/admin/comments	评论列表
PUT	/api/admin/comments/:id/status	审核评论
DELETE	/api/admin/comments/:id	删除评论
POST	/api/admin/uploads/presign	获取上传签名

---

🎨 主题定制

项目使用 CSS 变量实现 iOS26 海洋蓝主题，核心变量定义在 web/src/styles/variables.css：

:root {
  /* 主题色 */
  --color-primary: #007AFF;
  --color-primary-gradient: linear-gradient(135deg, #007AFF 0%, #00C6FF 100%);
  
  /* 毛玻璃效果 */
  --color-bg-glass: rgba(255, 255, 255, 0.72);
  --blur-md: blur(20px);
  
  /* 大圆角 */
  --radius-xl: 28px;
  
  /* 弹性动画 */
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

---

🔧 开发指南

后端开发

cd server

# 运行（热重载推荐使用 air）
go run ./cmd/api

# 构建
go build -o note-api ./cmd/api

# 添加新的数据库迁移
# 在 migrations/ 目录创建 000004_xxx.up.sql 和 000004_xxx.down.sql

前端开发

cd web

# 开发模式
pnpm dev

# 类型检查
pnpm vue-tsc --noEmit

# 构建生产版本
pnpm build

# 预览生产版本
pnpm preview

环境变量

项目根目录 .env 文件：

# PostgreSQL
POSTGRES_DB=note
POSTGRES_USER=note
POSTGRES_PASSWORD=note_password
POSTGRES_PORT=54321

# MinIO
MINIO_ROOT_USER=note_minio
MINIO_ROOT_PASSWORD=note_minio_password
MINIO_PORT=9000
MINIO_CONSOLE_PORT=9001

---

📝 License

MIT