# portal-web **Repository Path**: smart-portal/portal-web ## Basic Information - **Project Name**: portal-web - **Description**: 用户前台 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2025-11-10 - **Last Updated**: 2026-03-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Portal Web 一个基于 Vue 3 + TypeScript + Vite 构建的现代化后台管理系统。 ## 📋 项目介绍 Portal Web 是一个功能完善的后台管理系统，提供了用户管理、会员管理、博客管理、通知管理等核心功能。系统采用现代化的前端技术栈，具有良好的用户体验和代码可维护性。 ## 🚀 技术栈 ### 核心框架 - **Vue 3.4+** - 渐进式 JavaScript 框架，使用 Composition API - **TypeScript 5.0+** - 类型安全的 JavaScript 超集 - **Vite 5.1+** - 下一代前端构建工具，极速的开发体验 ### 状态管理与路由 - **Pinia 2.1+** - Vue 官方状态管理库 - **Vue Router 4.3+** - Vue.js 官方路由管理器 ### UI 组件库 - **Element Plus 2.5+** - 基于 Vue 3 的企业级 UI 组件库 - **@element-plus/icons-vue** - Element Plus 图标库 ### 富文本编辑器 - **@vueup/vue-quill 1.2+** - Vue 3 富文本编辑器 - **Quill 2.0+** - 强大的富文本编辑器核心 ### 工具库 - **axios 1.6+** - 基于 Promise 的 HTTP 客户端 - **cross-env-plugins 1.0+** - 跨环境工具函数和验证库 - **sass 1.71+** - CSS 预处理器 ## ✨ 功能特性 ### 🔐 认证与权限 - ✅ 用户登录/登出 - ✅ 验证码登录 - ✅ JWT Token 认证 - ✅ 路由守卫和权限控制 - ✅ 自动登录状态检查 ### 👥 用户管理 - ✅ 用户列表查询（分页、搜索） - ✅ 用户创建、编辑、删除 - ✅ 用户状态管理 - ✅ 权限分配 ### 👤 会员管理 - ✅ 会员列表管理（分页、搜索、筛选） - ✅ 会员信息创建、编辑、删除 - ✅ 会员状态管理 - ✅ 会员等级关联 ### 🏆 会员等级管理 - ✅ 等级列表管理 - ✅ 等级创建、编辑、删除 - ✅ 等级排序 - ✅ 数据隔离（每个用户独立管理） ### 📝 博客管理 - ✅ 博客列表（分页、搜索、筛选） - ✅ 博客创建、编辑、删除 - ✅ 博客详情查看 - ✅ 富文本编辑器（支持图片、视频、代码等） - ✅ 博客发布/取消发布 - ✅ 封面图片上传（支持 URL 和文件上传） - ✅ 多分类、多标签支持 - ✅ 分类和标签管理子页面 ### 🏷️ 标签管理 - ✅ 标签列表（分页、搜索） - ✅ 标签创建、编辑、删除 - ✅ 标签颜色设置 - ✅ 数据隔离（每个用户独立管理） ### 📂 分类管理 - ✅ 分类列表（分页、搜索） - ✅ 分类创建、编辑、删除 - ✅ 分类排序 - ✅ 数据隔离（每个用户独立管理） ### 🔔 通知管理 - ✅ 通知列表（分页、筛选） - ✅ 通知创建、编辑、删除 - ✅ 通知推送（支持指定用户或全部用户） - ✅ 通知已读/未读状态 - ✅ 实时通知提醒 - ✅ 通知抽屉组件 ### 📊 仪表盘 - ✅ 数据统计展示 - ✅ 最近活动记录 ### 🎨 UI/UX 优化 - ✅ 响应式布局 - ✅ 侧边栏导航（可折叠） - ✅ 美观的 UI 设计 - ✅ 美化的表格溢出提示框 - ✅ 统一的样式规范 ## 📦 安装与运行 ### 环境要求 - Node.js >= 16.0.0 - npm >= 7.0.0 或 yarn >= 1.22.0 ### 安装依赖 ```bash npm install ``` ### 开发环境 ```bash # 启动开发服务器（默认运行在 http://localhost:5173） npm run dev # 或指定端口 npm run dev -- --port 3000 ``` ### 构建生产版本 ```bash # 构建开发环境版本 npm run build:dev # 构建生产环境版本 npm run build:prd # 或使用默认构建（生产环境） npm run build ``` ### 预览生产构建 ```bash npm run preview ``` ## ⚙️ 环境变量配置 项目使用环境变量来配置不同环境的 API 地址。 ### 开发环境 (`.env.development` 或 `.env.dev`) ```env # 开发环境使用代理路径 /devApi，通过 vite 代理转发到后端 VITE_API_BASE_URL=/devApi # 后端API目标地址（用于vite代理，必须配置） # 这是后端服务器的实际地址，vite 会将 /devApi 的请求代理到此地址 VITE_API_TARGET=http://localhost:8080 # 是否使用 Mock 数据（可选，默认开发环境启用） # VITE_USE_MOCK=true ``` ### 生产环境 (`.env.production` 或 `.env.prd`) ```env # 生产环境固定域名（可选） # 如果设置了此变量，所有 API 请求将使用此固定域名 # VITE_API_URL=https://api.example.com # API基础路径（相对路径，走地址栏域名） # 当 VITE_API_URL 未设置时使用此路径 VITE_API_BASE_URL=/api # 是否使用 Mock 数据（生产环境建议关闭） VITE_USE_MOCK=false ``` ### 环境变量说明 | 变量名 | 说明 | 开发环境 | 生产环境 | |--------|------|----------|----------| | `VITE_API_TARGET` | 后端服务器地址（仅开发环境） | 必填 | - | | `VITE_API_BASE_URL` | API 基础路径 | `/devApi` | `/api` | | `VITE_API_URL` | 固定域名（可选） | - | 可选 | | `VITE_USE_MOCK` | 是否使用 Mock 数据 | 可选 | 建议 `false` | ### 请求流程 - **开发环境**: 前端请求 `/devApi/api/xxx` → Vite 代理 → `VITE_API_TARGET/api/xxx` - **生产环境（有固定域名）**: 前端请求 `VITE_API_URL/api/xxx` - **生产环境（无固定域名）**: 前端请求 `/api/xxx`（相对路径，走当前域名） ## 📁 项目结构 ``` portal-web/ ├── src/ │ ├── api/ # API 接口 │ │ ├── request.ts # 请求封装（统一错误处理、Token管理） │ │ ├── auth.ts # 认证相关 API │ │ ├── user.ts # 用户管理 API │ │ ├── members.ts # 会员管理 API │ │ ├── memberLevels.ts # 会员等级 API │ │ ├── blogs.ts # 博客管理 API │ │ ├── tags.ts # 标签管理 API │ │ ├── categories.ts # 分类管理 API │ │ ├── notifications.ts # 通知管理 API │ │ └── mock/ # Mock 数据 │ │ └── blogs.ts # 博客 Mock 数据 │ ├── components/ # 公共组件 │ │ ├── BlogDialog.vue # 博客编辑对话框 │ │ ├── TagsManagement.vue # 标签管理组件 │ │ ├── CategoriesManagement.vue # 分类管理组件 │ │ ├── MemberDialog.vue # 会员编辑对话框 │ │ ├── MemberLevelDialog.vue # 会员等级编辑对话框 │ │ ├── NotificationDrawer.vue # 通知抽屉组件 │ │ └── ChangePassword.vue # 修改密码组件 │ ├── layouts/ # 布局组件 │ │ └── MainLayout.vue # 主布局（侧边栏+头部+内容区） │ ├── router/ # 路由配置 │ │ └── index.ts # 路由定义和守卫 │ ├── stores/ # Pinia 状态管理 │ │ ├── auth.ts # 认证状态 │ │ └── notification.ts # 通知状态 │ ├── styles/ # 全局样式 │ │ └── main.scss # 主样式文件 │ ├── utils/ # 工具函数 │ │ └── index.ts # 工具函数（基于 cross-env-plugins） │ ├── views/ # 页面组件 │ │ ├── Login.vue # 登录页 │ │ ├── Dashboard.vue # 仪表盘 │ │ ├── Profile.vue # 个人中心 │ │ ├── Members.vue # 会员管理 │ │ ├── MemberLevels.vue # 会员等级管理 │ │ ├── Blogs.vue # 博客管理 │ │ └── BlogDetail.vue # 博客详情 │ ├── App.vue # 根组件 │ ├── main.ts # 入口文件 │ └── vite-env.d.ts # Vite 类型声明 ├── doc/ # 文档 │ ├── API文档.md # API 接口文档 │ └── responseCode.ts # 响应码定义 ├── public/ # 静态资源 ├── index.html # HTML 模板 ├── package.json # 项目配置 ├── tsconfig.json # TypeScript 配置 ├── vite.config.ts # Vite 配置 └── README.md # 项目说明 ``` ## 🎯 主要功能模块 ### 1. 博客管理 博客管理模块提供了完整的博客内容管理功能： - **博客列表**: 支持分页、按标题/分类/标签/状态搜索 - **博客编辑**: 使用富文本编辑器，支持图片、视频、代码等 - **封面管理**: 支持 URL 链接和文件上传两种方式 - **分类标签**: 支持多分类、多标签，可关联已有分类和标签 - **发布管理**: 支持草稿和已发布状态，可一键发布/取消发布 - **分类管理**: 独立的分类管理页面，支持排序 - **标签管理**: 独立的标签管理页面，支持颜色设置 ### 2. 会员管理 会员管理模块提供了完整的会员信息管理： - **会员列表**: 支持分页、按姓名/手机号/状态搜索 - **会员信息**: 支持创建、编辑、删除会员 - **等级关联**: 支持关联会员等级 - **状态管理**: 支持启用/禁用会员 ### 3. 会员等级管理 会员等级管理模块支持多等级体系： - **等级列表**: 支持按名称搜索 - **等级管理**: 支持创建、编辑、删除等级 - **排序功能**: 支持设置等级排序 - **数据隔离**: 每个用户独立管理自己的等级 ### 4. 标签与分类管理 标签和分类管理提供了灵活的内容组织方式： - **标签管理**: 支持标签名称、颜色、描述设置 - **分类管理**: 支持分类名称、描述、排序设置 - **数据隔离**: 每个用户独立管理自己的标签和分类 ### 5. 通知管理 通知管理模块提供了完整的消息推送功能： - **通知创建**: 支持创建不同类型的通知 - **推送功能**: 支持推送给指定用户或全部用户 - **状态管理**: 支持已读/未读状态 - **实时提醒**: 支持实时通知提醒 ## 🛠️ 开发说明 ### 技术特点 - **TypeScript 支持**: 核心代码使用 TypeScript，提供类型安全 - **组件化开发**: 采用 Vue 3 Composition API，代码更清晰 - **统一请求封装**: 所有 API 请求通过 `request.ts` 统一处理 - **Mock 数据支持**: 开发环境支持 Mock 数据，方便前端开发 - **响应式设计**: 适配不同屏幕尺寸 - **样式优化**: 美化的 UI 组件和交互效果 ### 开发规范 1. **代码风格**: 使用 TypeScript 严格模式 2. **组件命名**: 使用 PascalCase 3. **文件命名**: 组件使用 PascalCase，工具函数使用 camelCase 4. **API 封装**: 所有 API 请求统一在 `src/api` 目录下 5. **状态管理**: 使用 Pinia 进行状态管理 6. **样式规范**: 使用 SCSS，遵循 BEM 命名规范 ### 常用命令 ```bash # 开发 npm run dev # 构建 npm run build:dev # 开发环境构建 npm run build:prd # 生产环境构建 # 类型检查 npm run type-check # 如果 package.json 中有此脚本 # 预览 npm run preview ``` ## 📚 相关文档 - [API 接口文档](./doc/API文档.md) - 完整的后端 API 接口说明 - [响应码定义](./doc/responseCode.ts) - 系统响应码定义 ## 🤝 参与贡献 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 许可证。 ## 👥 作者 Portal Web Team --- **注意**: 本项目为后台管理系统，需要配合后端 API 使用。详细 API 文档请参考 [API 文档](./doc/API文档.md)。