# KingCola-ICG-Blog用户端 **Repository Path**: yngang/kingcola-icg-blog-web ## Basic Information - **Project Name**: KingCola-ICG-Blog用户端 - **Description**: 现代化视觉效果的团队博客系统，着重打造一个团队博客+聊天室+更多的优化效果，集成音乐播放器、3D特效粒子、骨架屏等增强用户体验的功能，采用Vue 2.7 + Vite + Element UI构建，支持Markdown和富文本编辑，🚀持续优化中，欢迎Star、Fork和贡献代码！ - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: https://blog.kingcola-icg.cn/ - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2025-06-13 - **Last Updated**: 2026-03-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: Vue, 团队博客, 聊天室, 3D特效 ## README # KingCola-ICG Blog 系统前端（用户端） [![Vue 2.7](https://img.shields.io/badge/Vue-2.7-4FC08D?style=flat-square&logo=vue.js)](https://vuejs.org/) [![Vite 5](https://img.shields.io/badge/Vite-5.x-646CFF?style=flat-square&logo=vite)](https://vitejs.dev/) [![Element UI](https://img.shields.io/badge/Element_UI-2.x-409EFF?style=flat-square&logo=element)](https://element.eleme.io/) [![Three.js](https://img.shields.io/badge/Three.js-0.175-000000?style=flat-square&logo=three.js)](https://threejs.org/) [![Gitee](https://img.shields.io/badge/Gitee-yngang-C71D23?style=flat-square&logo=gitee)](https://gitee.com/yngang/) ## 项目介绍 Kingcola-Blog 的用户端前端项目，采用 Vue2 + Vite 构建的现代化博客系统，提供了丰富的用户交互功能和优雅的界面设计。该项目为用户提供文章阅读、评论、搜索等功能，支持响应式设计，兼容各种设备访问。 本项目基于[拾壹博客](https://gitee.com/quequnlong/shiyi-blog)进行美化和二次开发，在保留原有功能的基础上，增加了更多交互特效和用户体验优化。 ### 项目仓库 - [博客前端 (blog-web)](https://gitee.com/yngang/kingcola-icg-blog-web) - 用户端前端系统 - [管理后台 (blog-admin)](https://gitee.com/yngang/kingcola-blog-system/tree/master/blog-admin) - 管理员后台系统（在完善） - [后端服务 (blog-backend)](https://gitee.com/yngang/kingcola-blog-system/tree/master/blog-backend) - Spring Boot 后端 API 服务（后续） ### 在线预览 - [博客前台](https://blog.kingcola-icg.cn) - 用户端博客系统（已部署） - [博客管理后台](https://admin.kingcola-icg.cn) - 管理员后台系统（未部署） ### 预览效果 ![Snipaste_2025-07-07_21-17-04.jpg](https://kingcola-icg-imgsite.pages.dev/file/1751903186942_Snipaste_2025-07-07_21-17-04.jpg) ![Snipaste_2025-07-07_21-21-32.jpg](https://kingcola-icg-imgsite.pages.dev/file/1751903195646_Snipaste_2025-07-07_21-21-32.jpg) ![Snipaste_2025-07-07_21-18-20.jpg](https://kingcola-icg-imgsite.pages.dev/file/1751903186333_Snipaste_2025-07-07_21-18-20.jpg) ![Snipaste_2025-07-07_21-22-48.jpg](https://kingcola-icg-imgsite.pages.dev/file/1751903186946_Snipaste_2025-07-07_21-22-48.jpg) ![Snipaste_2025-07-07_21-31-45.jpg](https://kingcola-icg-imgsite.pages.dev/file/1751903188487_Snipaste_2025-07-07_21-31-45.jpg) ![Snipaste_2025-07-07_21-27-26.jpg](https://kingcola-icg-imgsite.pages.dev/file/1751903185581_Snipaste_2025-07-07_21-27-26.jpg) ![Snipaste_2025-07-07_21-28-26.jpg](https://kingcola-icg-imgsite.pages.dev/file/1751903187526_Snipaste_2025-07-07_21-28-26.jpg) ![Snipaste_2025-07-07_21-30-19.jpg](https://kingcola-icg-imgsite.pages.dev/file/1751903189031_Snipaste_2025-07-07_21-30-19.jpg) ![Snipaste_2025-07-07_23-49-44.jpg](https://kingcola-icg-imgsite.pages.dev/file/1751903406655_Snipaste_2025-07-07_23-49-44.jpg) ## 技术栈 ### 核心框架 - **前端框架**：[Vue 2.7.x](https://v2.vuejs.org/) (带来 Composition API 的兼容性) - **构建工具**：[Vite 5.x](https://vitejs.dev/) (替代 Webpack，提供更快的开发体验) - **路由管理**：[Vue Router 3.x](https://v3.router.vuejs.org/) - **状态管理**：[Vuex 3.x](https://v3.vuex.vuejs.org/) - **UI 组件库**：[Element UI 2.x](https://element.eleme.io/) ### 渲染与展示 - **Markdown 渲染**：[Marked](https://marked.js.org/) + [Highlight.js](https://highlightjs.org/) - **Markdown 编辑器**：[Mavon-Editor](https://github.com/hinesboy/mavonEditor) - **富文本编辑器**：[WangEditor](https://www.wangeditor.com/) + [UEditorPlus](https://gitee.com/modstart-lib/ueditor-plus) - **图表可视化**：[ECharts 5.x](https://echarts.apache.org/) - **代码高亮**：[Prism.js](https://prismjs.com/) + [Highlight.js](https://highlightjs.org/) ### 动画与视觉效果 - **动画库**：[Animate.css](https://animate.style/) + [GSAP](https://greensock.com/gsap/) - **3D 效果**：[Three.js](https://threejs.org/) - **弹幕效果**：[Vue-Danmaku](https://github.com/hellodigua/vue-danmaku) - **水波纹效果**：自定义 Waves 组件 ### 工具与功能 - **HTTP 请求**：[Axios](https://axios-http.com/) - **图片处理**：[Vue-Cropper](https://github.com/xyxiao001/vue-cropper) + [Vue-Lazyload](https://github.com/hilongjw/vue-lazyload) - **剪贴板操作**：[Vue-Clipboard2](https://github.com/Inndy/vue-clipboard2) - **二维码生成**：[QRCode](https://github.com/soldair/node-qrcode) - **HTML 转图片**：[html2canvas](https://html2canvas.hertzen.com/) - **Markdown 转 HTML**：[Turndown](https://github.com/mixmark-io/turndown) - **防 XSS 攻击**：[DOMPurify](https://github.com/cure53/DOMPurify) - **音乐播放器**：基于 [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi) 开发 ### 性能优化 - **代码分割**：动态导入 (Dynamic Import) - **资源压缩**：Gzip + Brotli 双重压缩 - **图片懒加载**：Vue-Lazyload - **打包分析**：Rollup-Plugin-Visualizer - **SEO 优化**：动态生成 Sitemap.xml ## 项目结构 ``` blog-web/ ├── public/ # 静态资源目录 │ ├── favicon.ico # 网站图标 │ ├── fonts/ # 字体文件 │ └── static/ # 其他静态资源 ├── src/ │ ├── api/ # API 接口定义 │ │ ├── article.js # 文章相关接口 │ │ ├── auth.js # 认证相关接口 │ │ ├── music.js # 音乐播放器接口 │ │ └── ... # 其他业务接口 │ ├── assets/ # 项目资源文件 │ │ ├── images/ # 图片资源 │ │ ├── icons/ # SVG图标 │ │ └── font/ # 字体文件 │ ├── components/ # 公共组件 │ │ ├── Article/ # 文章相关组件 │ │ ├── Comment/ # 评论组件 │ │ ├── MusicPlayer/ # 音乐播放器组件 │ │ └── ... # 其他功能组件 │ ├── directives/ # 自定义指令 │ │ ├── animate.js # 动画指令 │ │ ├── loading.js # 加载指令 │ │ └── ... # 其他自定义指令 │ ├── layout/ # 布局组件 │ │ ├── components/ # 布局子组件 │ │ └── index.vue # 主布局文件 │ ├── router/ # 路由配置 │ │ └── index.js # 路由定义 │ ├── store/ # Vuex 状态管理 │ │ ├── modules/ # 状态模块 │ │ └── index.js # 状态管理入口 │ ├── styles/ # 全局样式 │ │ ├── global.scss # 全局样式定义 │ │ └── ... # 其他样式文件 │ ├── utils/ # 工具函数 │ │ ├── request.js # Axios 封装 │ │ ├── highlight.js # 代码高亮工具 │ │ └── ... # 其他工具函数 │ ├── views/ # 页面组件 │ │ ├── article/ # 文章相关页面 │ │ ├── home/ # 首页 │ │ ├── photos/ # 相册页面 │ │ └── ... # 其他页面组件 │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── index.html # HTML 模板 ├── vite.config.js # Vite 配置文件 ├── jsconfig.json # JavaScript 配置 └── package.json # 项目依赖 ``` ## 功能特性 ### 内容展示 - **文章阅读**：支持多种格式的文章内容展示，包括 Markdown 渲染和富文本展示 - **代码高亮**：支持多种编程语言的代码高亮显示 - **目录导航**：自动生成文章目录，支持锚点定位 - **图片预览**：支持图片点击放大、幻灯片浏览 - **相册功能**：支持照片墙、瀑布流布局展示 - **说说功能**：类似微博的短内容发布功能 ### 用户交互 - **评论互动**：支持多级嵌套评论、回复、点赞功能 - **表情支持**：评论支持丰富的表情选择 - **用户中心**：用户个人资料管理、文章收藏管理 - **文章分享**：一键分享到社交媒体 - **文章收藏**：用户可收藏喜欢的文章 - **文章点赞**：支持文章点赞功能 ### 搜索与导航 - **全文搜索**：支持文章全文搜索 - **搜索建议**：输入时提供实时搜索建议 - **热搜榜单**：展示热门搜索关键词 - **分类浏览**：按分类、标签浏览文章 - **归档功能**：按时间线展示文章归档 ### 用户体验 - **响应式设计**：自适应各种设备屏幕大小 - **暗黑模式**：支持亮色/暗色主题切换 - **动画效果**：页面过渡动画、滚动动画 - **骨架屏**：内容加载时显示骨架屏 - **音乐播放器**：内置音乐播放器，支持歌单管理 - **3D 特效**：首页 Hero 区域的 3D 交互效果 ### 高级功能 - **实时通讯**：集成聊天功能 - **资源下载**：提供资源下载功能 - **外链跳转提示**：外部链接跳转安全提示 - **友情链接**：展示合作伙伴链接 ## 性能优化 ### 加载优化 - **代码分割**：按路由拆分代码，实现按需加载 - **资源预加载**：关键资源预加载 - **图片懒加载**：滚动到可视区域才加载图片 - **骨架屏**：内容加载前显示骨架屏占位 ### 渲染优化 - **虚拟滚动**：长列表使用虚拟滚动技术 - **防抖节流**：对频繁触发的事件进行优化 - **组件缓存**：使用 keep-alive 缓存组件 ### 网络优化 - **资源压缩**：使用 Gzip 和 Brotli 压缩静态资源 - **CDN 加速**：静态资源使用 CDN 加速 - **HTTP 缓存**：合理设置缓存策略 ### SEO 优化 - **动态 Sitemap**：自动生成站点地图 - **Meta 标签**：动态生成 Meta 标签 - **结构化数据**：添加结构化数据支持搜索引擎 ## 快速开始 ### 环境要求 - Node.js 16+ - npm 或 yarn ### 安装步骤 1. 克隆代码到本地 ```bash git clone https://gitee.com/yngang/kingcola-icg-blog-web cd kingcola-icg-blog-web ``` 2. 安装依赖 ```bash npm install # 或 yarn install ``` 3. 启动开发服务器 ```bash npm run dev # 或 yarn dev ``` 4. 访问开发服务器 打开浏览器访问 http://localhost:3300 (端口可能会有所不同) ### 构建生产版本 ```bash npm run build # 或 yarn build ``` 构建完成后，生成的文件将位于 `dist` 目录中，可以部署到任何静态文件服务器。 ## 项目配置 ### 环境变量 在项目根目录创建以下文件来配置不同环境的变量： - `.env` - 所有环境通用的变量 - `.env.development` - 开发环境变量 - `.env.production` - 生产环境变量 主要的环境变量包括： ``` # API 接口基础路径 VITE_APP_BASE_API=/dev-api # API 服务器地址 VITE_APP_API_URL=http://localhost:8800 # 应用端口 VITE_APP_PORT=3300 ``` ## 开发指南 ### 代码规范 - 遵循 Vue.js 风格指南 - 使用 ESLint 进行代码检查 - 组件名使用 PascalCase 命名 - 页面组件放在 views 目录，公共组件放在 components 目录 ### 新功能开发流程 1. 在 `views` 或 `components` 中创建新组件 2. 在 `router` 中添加路由配置（如果是页面组件） 3. 在 `store` 中添加状态管理（如果需要） 4. 在 `api` 中添加接口定义 ### 组件开发规范 - 使用 Vue 2.7 的 Composition API 或 Options API - 组件应具有明确的职责，遵循单一职责原则 - 通用组件应提供适当的文档和示例 - 复杂组件应拆分为多个子组件 ### 性能优化建议 - 使用 `v-show` 代替频繁切换的 `v-if` - 大型列表使用虚拟滚动 - 频繁触发的事件使用防抖/节流 - 避免深层嵌套的响应式数据 - 组件中使用 `computed` 缓存计算结果 ## 部署指南 ### 前端部署 1. 构建生产版本 ```bash npm run build ``` 2. 配置 Nginx（后续完善） ## 参与贡献 非常欢迎你的贡献，你可以通过以下方式参与: 1. 通过 [Issue](https://gitee.com/yngang/kingcola-icg-blog-web/issues) 报告 bug 或进行咨询。 2. 提交 [Pull Request](https://gitee.com/yngang/kingcola-icg-blog-web/pulls) 改进代码。 ### Pull Request 规范 - 请先 fork 一份到自己的项目下，不要直接在仓库下建分支。 - commit 信息要以`[模块名]: 描述信息` 的形式填写，例如 `[文章模块]: 修复文章编辑器的bug`。 - 如果是修复 bug，请在 PR 中给出描述信息。 - 合并代码需要经过 review，请确保你的代码符合规范。 ## 版本历史 - **0.1.1** - 当前版本，着重全面美化优化用户体验感，美化博客整体效果，增加完善音乐播放器、说说发布、文章发布编辑器页面、个人主页查看、加载用户体验优化、后端功能效果增强等功能 - **0.1.0** - 初始版本，基于拾壹博客开发 - 基本的博客功能已实现 ## 联系方式 如有任何问题或建议，请通过以下方式联系我们： - 邮箱：kingcola_icg@163.com - 作者 Gitee：[yngang](https://gitee.com/yngang/) ## 鸣谢 感谢以下开源项目的支持： - [拾壹博客](https://gitee.com/quequnlong/shiyi-blog) - 本项目基于拾壹博客进行美化和二次开发 - [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi) - 为音乐播放器提供 API 支持 - [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架 - [Element UI](https://element.eleme.io/) - 基于 Vue 的组件库 - [Vite](https://vitejs.dev/) - 下一代前端构建工具 - [UEditor-Plus 富文本编辑器](https://gitee.com/modstart-lib/ueditor-plus) - 基于 UEditor 二次开发的富文本编辑器