博客系统前端 (Blog Frontend v3)

基于 Vue 3 + TypeScript + Vite 构建的现代化博客系统前端，支持文章管理、分类标签、数学公式、代码高亮等丰富功能。

🌟 功能特性

文章管理

• 📖 富文本编辑器（支持两种编辑器：Tiptap 和 WangEditor）
• 📝 Markdown 实时预览
• 🔤 数学公式支持（KaTeX）
• 💻 代码高亮（highlight.js）
• 📎 图片上传与管理
• 🏷️ 标签和分类管理
• 🌏 地图和地理数据显示【远期】

用户界面

• 🎨 响应式设计（Vuetify 3）
• 📱 移动端适配
• 🔍 全文搜索
• 📊 文章统计图表

管理功能

• 👤 用户认证与权限管理
• 📋 文章CRUD操作
• 🏷️ 标签管理
• 📂 分类管理
• 👥 用户管理

🚀 技术栈

• 框架: Vue 3 + Composition API
• 语言: TypeScript 5.8+
• 构建工具: Vite 7.0+
• UI框架: Vuetify 3
• 状态管理: Pinia + 持久化存储
• 路由: Vue Router 4
• HTTP客户端: Axios
• 测试: Playwright (E2E) + Vitest (单元测试)
• 代码规范: ESLint + Prettier

📦 依赖亮点

编辑器

• Tiptap: 现代化富文本编辑器
• WangEditor: 轻量级富文本编辑器
• 数学公式: KaTeX + @wangeditor/plugin-formula + ...

工具库

• 日期处理: Day.js
• Markdown: Marked
• 代码高亮: Highlight.js
• 图标: Material Design Icons

🛠️ 快速开始

环境要求

• Node.js 18+
• npm 8+

安装依赖

npm install

开发环境

# 启动开发服务器
npm run dev

# 运行测试
npm run test:unit
npm run test:e2e

生产构建

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

📁 项目结构

blog-frontend-v3/
├── src/
│ ├── components/ # 通用组件
│ │ ├── BaseButton.vue
│ │ ├── BaseTable.vue
│ │ ├── TipTapTextEditor.vue
│ │ └── WangTextEditor.vue
│ ├── layouts/ # 布局组件
│ │ ├── AdminLayout.vue
│ │ ├── AuthLayout.vue
│ │ └── DefaultLayout.vue
│ ├── modules/ # 业务模块
│ │ ├── article/
│ │ ├── auth/
│ │ ├── category/
│ │ └── tag/
│ ├── services/ # API服务
│ ├── router/ # 路由配置
│ └── types/ # TypeScript类型定义
├── e2e/ # E2E测试
└── public/ # 静态资源

🔧 开发指南

代码规范

# 代码格式化
npm run format

# ESLint检查
npm run lint

环境变量

创建 .env 文件配置环境变量：

VITE_API_BASE_URL=http://localhost:8880/api

🚢 部署

Docker部署

项目已配置Docker支持，使用nginx作为Web服务器。

静态部署

构建后的文件位于 GISHQFront-v3/ 目录，可直接部署到任何静态服务器。

📱 浏览器支持

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

🙏 致谢

• Vue.js
• Element Plus 第二版前端的UI框架
• Vuetify 第三版前端的UI框架
• Material Design Icons 图标库
• Tiptap 第二版前端使用的富文本编辑器
• WangEditor 第三版前端使用的富文本编辑器
• Vite
• Playwright