GCluster 前端项目
基于 Vue 3 + TypeScript + Element Plus 的现代化服务器管理平台前端
--- ## 📋 简介 GCluster Frontend 是 GCluster 服务器管理平台的前端项目,提供直观、易用的 Web 界面,用于管理 Linux 服务器的网站、文件、容器、数据库和大语言模型。 ### ✨ 技术特性 - 🎨 **现代化 UI**: 基于 Element Plus 组件库,提供美观、一致的用户界面 - 🚀 **高性能**: 使用 Vite 构建工具,开发体验极佳,构建速度飞快 - 📦 **类型安全**: 全面使用 TypeScript,提供更好的代码提示和错误检查 - 🌐 **国际化支持**: 内置 vue-i18n,支持多语言切换 - 🔧 **代码规范**: 集成 ESLint、Prettier、Stylelint,保证代码质量 - 📱 **响应式设计**: 完美适配各种屏幕尺寸 - 🎯 **组件自动导入**: 使用 unplugin-auto-import 和 unplugin-vue-components,减少重复代码 --- ## 🛠️ 技术栈 ### 核心框架 - **Vue 3.4+**: 渐进式 JavaScript 框架 - **TypeScript 4.5+**: JavaScript 的超集,提供类型安全 - **Vite 6.0+**: 下一代前端构建工具 - **Vue Router 4.3+**: Vue.js 官方路由管理器 - **Pinia 2.1+**: Vue 3 状态管理库 ### UI 组件库 - **Element Plus 2.9**: 基于 Vue 3 的桌面端组件库 - **@element-plus/icons-vue**: Element Plus 图标库 - **fit2cloud-ui-plus**: 扩展 UI 组件库 ### 功能库 - **Axios 1.7**: HTTP 请求库 - **ECharts 5.5**: 数据可视化图表库 - **Monaco Editor 0.50**: 代码编辑器(VS Code 内核) - **CodeMirror 6.0**: 轻量级代码编辑器 - **Vue I18n 9.13**: 国际化解决方案 - **XTerm 5.5**: Web 终端模拟器 - **md-editor-v3**: Markdown 编辑器 - **@vue-office**: Office 文档预览(docx、excel) ### 工具库 - **@vueuse/core**: Vue Composition API 工具集 - **crypto-js**: 加密解密库 - **jsencrypt**: RSA 加密库 - **nprogress**: 进度条 - **qs**: URL 查询参数解析 - **screenfull**: 全屏 API 封装 - **vue-clipboard3**: 剪贴板操作 - **vue-virtual-scroller**: 虚拟滚动列表 ### 开发工具 - **ESLint**: JavaScript/TypeScript 代码检查 - **Prettier**: 代码格式化 - **Stylelint**: CSS 样式检查 - **Commitizen**: Git 提交规范 - **standard-version**: 语义化版本管理 - **lint-staged**: Git 暂存文件检查 ### 构建工具 - **Vite Plugin**: - @vitejs/plugin-vue: Vue 3 支持 - @vitejs/plugin-vue-jsx: JSX 支持 - vite-plugin-compression: Gzip 压缩 - vite-plugin-eslint: ESLint 集成 - vite-plugin-vue-setup-extend: Setup 函数命名 - unplugin-auto-import: API 自动导入 - unplugin-vue-components: 组件自动导入 --- ## 📂 项目结构 ``` gcluster-frontend/ ├── public/ # 静态资源 │ └── favicon.png # 网站图标 ├── src/ # 源代码 │ ├── api/ # API 接口 │ ├── assets/ # 资源文件(图片、样式等) │ ├── components/ # 公共组件 │ ├── config/ # 配置文件 │ ├── enums/ # 枚举定义 │ ├── global/ # 全局变量和方法 │ ├── hooks/ # Composition API 钩子 │ ├── lang/ # 国际化语言包 │ ├── layout/ # 布局组件 │ ├── routers/ # 路由配置 │ ├── store/ # Pinia 状态管理 │ ├── styles/ # 全局样式 │ ├── utils/ # 工具函数 │ ├── views/ # 页面组件 │ ├── App.vue # 根组件 │ └── main.ts # 入口文件 ├── index.html # HTML 模板 ├── vite.config.ts # Vite 配置 ├── tsconfig.json # TypeScript 配置 ├── package.json # 项目依赖 └── README.md # 项目说明 ``` --- ## 🚀 快速开始 ### 环境要求 - **Node.js**: >= 18.0.0 - **npm**: >= 8.0.0 - **Git**: >= 2.0.0 ### 安装依赖 ```bash npm install ``` ### 开发模式 启动开发服务器(默认端口: 3000): ```bash npm run dev ``` 或使用别名: ```bash npm run serve ``` 访问 http://localhost:3000 查看应用。 ### 生产构建 #### 开发环境构建 ```bash npm run build:dev ``` #### 测试环境构建 ```bash npm run build:test ``` #### 生产环境构建 ```bash npm run build:prod ``` 构建产物将输出到 `../cmd/server/web` 目录。 ### 预览生产构建 ```bash npm run preview ``` --- ## 📝 代码规范 ### 代码检查和修复 #### ESLint 检查和修复 ```bash npm run lint:eslint ``` #### Prettier 格式化 ```bash npm run lint:prettier ``` #### Stylelint 样式检查 ```bash npm run lint:stylelint ``` #### Lint-staged(Git 提交前检查) ```bash npm run lint:lint-staged ``` ### 全部格式化 ```bash npm run prettier ``` --- ## 🔧 配置说明 ### 环境变量 项目支持通过 `.env` 文件配置环境变量: - `.env.dev`: 开发环境 - `.env.test`: 测试环境 - `.env.prod`: 生产环境 主要配置项: ```bash # 服务器端口 VITE_PORT=3000 # 是否自动打开浏览器 VITE_OPEN=true # 是否生成构建分析报告 VITE_REPORT=false # 是否启用 Gzip 压缩 VITE_BUILD_GZIP=true # 生产环境是否删除 console.log VITE_DROP_CONSOLE=true ``` ### Vite 配置 主要配置项: - **路径别名**: `@` 指向 `src` 目录 - **代理配置**: `/api/v1` 代理到 `http://localhost:9999/` - **自动导入**: Element Plus 组件和 API 自动导入 - **代码分割**: Monaco Editor 按需加载 - **构建输出**: 输出到 `../cmd/server/web` ### TypeScript 配置 - **目标**: ESNext - **模块**: ESNext - **严格模式**: 关闭(项目兼容性考虑) - **路径映射**: `@/*` 映射到 `src/*` --- ## 🎨 主要功能模块 ### 1. 仪表盘 - 系统概览 - 资源监控 - 快捷操作 ### 2. 主机管理 - 系统信息 - 网络配置 - 防火墙设置 - 时区管理 ### 3. 网站管理 - 网站配置 - 域名管理 - SSL 证书 - 访问日志 - Nginx 配置 ### 4. 容器管理 - 容器列表 - 镜像管理 - 网络配置 - 存储卷 - Compose 管理 ### 5. 文件管理 - 文件浏览器 - 上传下载 - 在线编辑 - 权限管理 ### 6. 数据库管理 - 数据库列表 - SQL 编辑器 - 备份恢复 - 用户管理 ### 7. 应用商店 - 应用列表 - 应用安装 - 应用配置 - 应用更新 ### 8. 系统设置 - 用户管理 - 安全设置 - 备份计划 - 计划任务 - 系统日志 --- ## 🔌 API 代理配置 开发环境下,前端通过 Vite 代理访问后端 API: ```typescript server: { proxy: { '/api/v1': { target: 'http://localhost:9999/', changeOrigin: true, ws: true, }, }, } ``` 确保后端服务运行在 `http://localhost:9999`。 --- ## 🌍 国际化 项目使用 vue-i18n 实现国际化,支持多语言切换。 语言包位置: `src/lang/` 支持语言: - 中文简体 - 中文繁体 - 英语 - 日语 - 西班牙语 - 法语 - 德语 - 俄语 - 阿拉伯语 - 韩语 - 印尼语 - 马来语 - 葡萄牙语 - 土耳其语 --- ## 📦 构建优化 ### 代码分割 Monaco Editor 按语言模块分割,减少初始加载体积。 ### Gzip 压缩 生产环境自动生成 `.gz` 压缩文件。 ### Tree Shaking 自动移除未使用的代码。 ### 图片优化 SVG 加载器优化 SVG 文件加载。 --- ## 🤝 贡献指南 欢迎提交 Issue 和 Pull Request! ### 提交规范 使用 Commitizen 提交代码: ```bash npm run commit ``` 提交类型: - `feat`: 新功能 - `fix`: 修复 bug - `docs`: 文档更新 - `style`: 代码格式调整 - `refactor`: 重构 - `test`: 测试相关 - `chore`: 构建/工具链相关 ### 版本发布 使用 standard-version 进行版本管理: ```bash npm run release ``` --- ## 📄 许可证 本项目基于 GNU General Public License version 3 (GPLv3) 开源。 --- ## 🔗 相关链接 - **GCluster 主项目**: https://github.com/GCluster-dev/GCluster - **GCluster 官方文档**: https://docs.gcluster.org - **Element Plus 文档**: https://element-plus.org - **Vue 3 文档**: https://vuejs.org - **Vite 文档**: https://vitejs.dev --- ## 💬 联系方式 - **Discord**: https://discord.gg/bUpUqWqdRr - **Issue**: https://github.com/GCluster-dev/GCluster/issues ---Made with ❤️ by GCluster Team