# platform-admin-web **Repository Path**: itweiwei/platform-admin-web ## Basic Information - **Project Name**: platform-admin-web - **Description**: 平台管理端 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-08-10 - **Last Updated**: 2025-08-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 平台管理后台Web端 (Platform Admin Web) ## 项目概述 己悦生活平台 - 平台管理后台系统，为平台运营团队提供全面的平台管理、监控和运营功能的Web端管理系统。 ## 产品定位 平台级管理后台，为己悦生活平台的运营团队、技术团队和管理层提供全方位的平台管理工具，支持平台的日常运营、数据分析和决策支持。 ## 核心功能模块 ### 1. 用户管理模块 - **租客管理**: 租客信息查看、状态管理、行为分析 - **公寓公司管理**: 公寓运营公司信息、资质审核、合作管理 - **管家管理**: 管家信息、绩效管理、权限分配 - **用户行为分析**: 用户活跃度、使用习惯、流失分析 ### 2. 房源管理模块 - **房源审核**: 房源信息审核、质量把控 - **房源监控**: 房源状态监控、异常处理 - **房源统计**: 房源分布、出租率、价格分析 - **房源推荐**: 推荐算法配置、效果评估 ### 3. 交易管理模块 - **合同管理**: 合同模板管理、签约流程监控 - **交易监控**: 交易数据实时监控、异常预警 - **佣金管理**: 佣金计算、分成管理、结算处理 - **财务对账**: 平台财务数据核对、报表生成 ### 4. 商城管理模块 - **商品审核**: 商品上架审核、质量把控 - **订单监控**: 订单异常处理、退款管理 - **供应商管理**: 供应商信息、合作管理 - **营销活动**: 活动策划、效果跟踪 ### 5. 运营管理模块 - **内容管理**: 平台内容发布、活动管理 - **消息推送**: 系统通知、营销推送 - **客服管理**: 客服工单、问题处理 - **反馈管理**: 用户反馈收集、处理跟踪 ### 6. 数据分析模块 - **运营数据**: 平台核心指标、趋势分析 - **用户分析**: 用户画像、行为分析、留存分析 - **业务分析**: 业务漏斗、转化分析、收入分析 - **实时监控**: 关键指标实时监控、异常告警 ### 7. 系统管理模块 - **权限管理**: 角色权限、功能权限、数据权限 - **系统配置**: 系统参数、业务规则配置 - **日志管理**: 操作日志、系统日志、审计日志 - **安全管理**: 安全策略、风险控制 ### 8. 己悦贝管理模块 - **积分规则**: 积分获取规则、使用规则配置 - **积分监控**: 积分发放、使用情况监控 - **积分分析**: 积分效果分析、用户行为影响 - **积分运营**: 积分活动策划、效果评估 ## 目标用户 ### 平台运营人员 - 职责：平台日常运营、用户管理、内容管理 - 需求：高效的运营工具、全面的数据支持 ### 平台管理层 - 职责：战略决策、业务分析、绩效评估 - 需求：清晰的数据报表、深度的业务洞察 ### 技术运维人员 - 职责：系统维护、安全管理、性能监控 - 需求：完善的监控工具、详细的日志信息 ### 财务人员 - 职责：财务核算、佣金结算、成本控制 - 需求：准确的财务数据、便捷的对账工具 ## 核心价值 1. **全平台监控**: 实时监控平台各项业务指标和系统状态 2. **数据驱动决策**: 提供全面的数据分析和业务洞察 3. **高效运营管理**: 简化运营流程，提升管理效率 4. **风险控制**: 及时发现和处理业务风险和系统异常 5. **业务增长支持**: 通过数据分析支持业务策略优化 ## 技术栈 - 前端框架: React/Vue.js - UI组件库: Ant Design Pro - 状态管理: Redux/Vuex - 图表库: ECharts/D3.js - 数据可视化: AntV/Chart.js - 构建工具: Webpack/Vite - 包管理器: npm/yarn ## 开发环境 ```bash # 安装依赖 npm install # 启动开发服务器 npm run dev # 构建生产版本 npm run build # 运行测试 npm run test ``` ## 相关文档 - [己悦生活平台整体PRD](../../../docs/PRD.md) - [产品路线图](../../../docs/Roadmap.md) - [用户故事地图](../../../docs/User_Story_Map.md) - [产品评估指标框架](../../../docs/Metrics_Framework.md) ## 项目简介 管理员后台是己悦生活平台的核心管理系统，为平台管理员提供全面的系统管理、用户管理、房源管理、订单管理、财务管理、数据分析等功能。采用现代化的前端技术栈，提供高效、易用的管理界面，支持多角色权限管理和实时数据监控。 ## 技术栈 - **前端框架**: Vue 3.x + TypeScript - **构建工具**: Vite 4.x - **UI组件库**: Element Plus / Ant Design Vue - **状态管理**: Pinia - **路由管理**: Vue Router 4.x - **HTTP客户端**: Axios - **图表库**: ECharts / Chart.js - **地图服务**: 高德地图 / 百度地图 - **富文本编辑器**: Quill / TinyMCE - **文件上传**: Vue-Upload-Component - **表格组件**: Vue3-Table-Lite / Vxe-Table - **日期处理**: Day.js - **工具库**: Lodash - **CSS预处理器**: Sass / SCSS - **代码规范**: ESLint + Prettier - **测试框架**: Vitest + Vue Test Utils ## 目录结构 ``` admin-dashboard/ ├── public/ # 静态资源 │ ├── favicon.ico # 网站图标 │ ├── logo.png # 网站Logo │ └── index.html # HTML模板 ├── src/ # 源代码目录 │ ├── api/ # API接口 │ │ ├── auth.ts # 认证相关API │ │ ├── user.ts # 用户管理API │ │ ├── property.ts # 房源管理API │ │ ├── order.ts # 订单管理API │ │ ├── finance.ts # 财务管理API │ │ ├── system.ts # 系统管理API │ │ ├── statistics.ts # 统计分析API │ │ ├── content.ts # 内容管理API │ │ ├── message.ts # 消息管理API │ │ └── index.ts # API统一导出 │ ├── assets/ # 静态资源 │ │ ├── images/ # 图片资源 │ │ │ ├── icons/ # 图标 │ │ │ ├── logos/ # Logo │ │ │ ├── avatars/ # 头像 │ │ │ └── banners/ # 横幅 │ │ ├── styles/ # 样式文件 │ │ │ ├── variables.scss # 变量定义 │ │ │ ├── mixins.scss # 混入样式 │ │ │ ├── reset.scss # 重置样式 │ │ │ ├── common.scss # 通用样式 │ │ │ └── themes/ # 主题样式 │ │ │ ├── default.scss # 默认主题 │ │ │ └── dark.scss # 暗色主题 │ │ └── fonts/ # 字体文件 │ ├── components/ # 公共组件 │ │ ├── Layout/ # 布局组件 │ │ │ ├── Header.vue # 头部组件 │ │ │ ├── Sidebar.vue # 侧边栏组件 │ │ │ ├── Footer.vue # 底部组件 │ │ │ ├── Breadcrumb.vue # 面包屑组件 │ │ │ └── index.ts # 布局组件导出 │ │ ├── Common/ # 通用组件 │ │ │ ├── Loading.vue # 加载组件 │ │ │ ├── Empty.vue # 空状态组件 │ │ │ ├── Pagination.vue # 分页组件 │ │ │ ├── SearchForm.vue # 搜索表单 │ │ │ ├── DataTable.vue # 数据表格 │ │ │ ├── UploadImage.vue # 图片上传 │ │ │ ├── RichEditor.vue # 富文本编辑器 │ │ │ ├── DatePicker.vue # 日期选择器 │ │ │ ├── SelectUser.vue # 用户选择器 │ │ │ └── index.ts # 通用组件导出 │ │ ├── Charts/ # 图表组件 │ │ │ ├── LineChart.vue # 折线图 │ │ │ ├── BarChart.vue # 柱状图 │ │ │ ├── PieChart.vue # 饼图 │ │ │ ├── AreaChart.vue # 面积图 │ │ │ ├── ScatterChart.vue # 散点图 │ │ │ └── index.ts # 图表组件导出 │ │ ├── Forms/ # 表单组件 │ │ │ ├── UserForm.vue # 用户表单 │ │ │ ├── PropertyForm.vue # 房源表单 │ │ │ ├── OrderForm.vue # 订单表单 │ │ │ ├── FinanceForm.vue # 财务表单 │ │ │ ├── SystemForm.vue # 系统表单 │ │ │ └── index.ts # 表单组件导出 │ │ └── Business/ # 业务组件 │ │ ├── UserCard.vue # 用户卡片 │ │ ├── PropertyCard.vue # 房源卡片 │ │ ├── OrderCard.vue # 订单卡片 │ │ ├── StatisticsCard.vue # 统计卡片 │ │ ├── MessageCard.vue # 消息卡片 │ │ └── index.ts # 业务组件导出 │ ├── views/ # 页面组件 │ │ ├── Dashboard/ # 仪表盘 │ │ │ ├── index.vue # 仪表盘首页 │ │ │ ├── Overview.vue # 数据概览 │ │ │ ├── Statistics.vue # 统计分析 │ │ │ └── Reports.vue # 报表中心 │ │ ├── User/ # 用户管理 │ │ │ ├── index.vue # 用户列表 │ │ │ ├── Detail.vue # 用户详情 │ │ │ ├── Create.vue # 创建用户 │ │ │ ├── Edit.vue # 编辑用户 │ │ │ ├── Landlord.vue # 房东管理 │ │ │ ├── Tenant.vue # 租客管理 │ │ │ ├── Admin.vue # 管理员管理 │ │ │ └── Blacklist.vue # 黑名单管理 │ │ ├── Property/ # 房源管理 │ │ │ ├── index.vue # 房源列表 │ │ │ ├── Detail.vue # 房源详情 │ │ │ ├── Audit.vue # 房源审核 │ │ │ ├── Category.vue # 房源分类 │ │ │ ├── Area.vue # 区域管理 │ │ │ ├── Facility.vue # 设施管理 │ │ │ └── Recommend.vue # 推荐管理 │ │ ├── Order/ # 订单管理 │ │ │ ├── index.vue # 订单列表 │ │ │ ├── Detail.vue # 订单详情 │ │ │ ├── Contract.vue # 合同管理 │ │ │ ├── Payment.vue # 支付管理 │ │ │ ├── Refund.vue # 退款管理 │ │ │ └── Dispute.vue # 纠纷处理 │ │ ├── Finance/ # 财务管理 │ │ │ ├── index.vue # 财务概览 │ │ │ ├── Income.vue # 收入管理 │ │ │ ├── Expense.vue # 支出管理 │ │ │ ├── Commission.vue # 佣金管理 │ │ │ ├── Settlement.vue # 结算管理 │ │ │ ├── Invoice.vue # 发票管理 │ │ │ └── Report.vue # 财务报表 │ │ ├── Content/ # 内容管理 │ │ │ ├── Article.vue # 文章管理 │ │ │ ├── Banner.vue # 轮播图管理 │ │ │ ├── Notice.vue # 公告管理 │ │ │ ├── Help.vue # 帮助中心 │ │ │ ├── Feedback.vue # 意见反馈 │ │ │ └── Template.vue # 模板管理 │ │ ├── Message/ # 消息管理 │ │ │ ├── index.vue # 消息列表 │ │ │ ├── Send.vue # 发送消息 │ │ │ ├── Template.vue # 消息模板 │ │ │ ├── Push.vue # 推送管理 │ │ │ └── Statistics.vue # 消息统计 │ │ ├── System/ # 系统管理 │ │ │ ├── Role.vue # 角色管理 │ │ │ ├── Permission.vue # 权限管理 │ │ │ ├── Menu.vue # 菜单管理 │ │ │ ├── Config.vue # 系统配置 │ │ │ ├── Log.vue # 操作日志 │ │ │ ├── Monitor.vue # 系统监控 │ │ │ └── Backup.vue # 数据备份 │ │ ├── Statistics/ # 数据统计 │ │ │ ├── index.vue # 统计概览 │ │ │ ├── User.vue # 用户统计 │ │ │ ├── Property.vue # 房源统计 │ │ │ ├── Order.vue # 订单统计 │ │ │ ├── Finance.vue # 财务统计 │ │ │ ├── Region.vue # 区域统计 │ │ │ └── Trend.vue # 趋势分析 │ │ ├── Auth/ # 认证相关 │ │ │ ├── Login.vue # 登录页面 │ │ │ ├── Register.vue # 注册页面 │ │ │ ├── ForgotPassword.vue # 忘记密码 │ │ │ └── Profile.vue # 个人资料 │ │ └── Error/ # 错误页面 │ │ ├── 403.vue # 无权限页面 │ │ ├── 404.vue # 页面不存在 │ │ └── 500.vue # 服务器错误 │ ├── router/ # 路由配置 │ │ ├── index.ts # 路由主文件 │ │ ├── routes.ts # 路由定义 │ │ ├── guards.ts # 路由守卫 │ │ └── modules/ # 路由模块 │ │ ├── dashboard.ts # 仪表盘路由 │ │ ├── user.ts # 用户管理路由 │ │ ├── property.ts # 房源管理路由 │ │ ├── order.ts # 订单管理路由 │ │ ├── finance.ts # 财务管理路由 │ │ ├── content.ts # 内容管理路由 │ │ ├── message.ts # 消息管理路由 │ │ ├── system.ts # 系统管理路由 │ │ └── statistics.ts # 统计分析路由 │ ├── store/ # 状态管理 │ │ ├── index.ts # Store主文件 │ │ ├── modules/ # Store模块 │ │ │ ├── auth.ts # 认证状态 │ │ │ ├── user.ts # 用户状态 │ │ │ ├── app.ts # 应用状态 │ │ │ ├── permission.ts # 权限状态 │ │ │ ├── settings.ts # 设置状态 │ │ │ └── cache.ts # 缓存状态 │ │ └── types.ts # 类型定义 │ ├── utils/ # 工具函数 │ │ ├── request.ts # HTTP请求工具 │ │ ├── auth.ts # 认证工具 │ │ ├── storage.ts # 存储工具 │ │ ├── format.ts # 格式化工具 │ │ ├── validate.ts # 验证工具 │ │ ├── permission.ts # 权限工具 │ │ ├── export.ts # 导出工具 │ │ ├── upload.ts # 上传工具 │ │ ├── chart.ts # 图表工具 │ │ ├── date.ts # 日期工具 │ │ ├── constants.ts # 常量定义 │ │ └── index.ts # 工具统一导出 │ ├── hooks/ # 组合式函数 │ │ ├── useAuth.ts # 认证Hook │ │ ├── usePermission.ts # 权限Hook │ │ ├── useTable.ts # 表格Hook │ │ ├── useForm.ts # 表单Hook │ │ ├── useChart.ts # 图表Hook │ │ ├── useUpload.ts # 上传Hook │ │ └── index.ts # Hook统一导出 │ ├── types/ # 类型定义 │ │ ├── api.ts # API类型 │ │ ├── user.ts # 用户类型 │ │ ├── property.ts # 房源类型 │ │ ├── order.ts # 订单类型 │ │ ├── finance.ts # 财务类型 │ │ ├── system.ts # 系统类型 │ │ ├── common.ts # 通用类型 │ │ └── index.ts # 类型统一导出 │ ├── directives/ # 自定义指令 │ │ ├── permission.ts # 权限指令 │ │ ├── loading.ts # 加载指令 │ │ ├── copy.ts # 复制指令 │ │ └── index.ts # 指令统一导出 │ ├── plugins/ # 插件配置 │ │ ├── element-plus.ts # Element Plus配置 │ │ ├── echarts.ts # ECharts配置 │ │ ├── axios.ts # Axios配置 │ │ └── index.ts # 插件统一导出 │ ├── App.vue # 根组件 │ └── main.ts # 应用入口 ├── tests/ # 测试文件 │ ├── unit/ # 单元测试 │ ├── integration/ # 集成测试 │ └── e2e/ # 端到端测试 ├── docs/ # 项目文档 │ ├── api.md # API文档 │ ├── components.md # 组件文档 │ ├── deployment.md # 部署文档 │ └── changelog.md # 更新日志 ├── .env # 环境变量 ├── .env.development # 开发环境变量 ├── .env.production # 生产环境变量 ├── .gitignore # Git忽略文件 ├── .eslintrc.js # ESLint配置 ├── .prettierrc # Prettier配置 ├── tsconfig.json # TypeScript配置 ├── vite.config.ts # Vite配置 ├── package.json # 项目依赖 └── README.md # 项目说明 ``` ## 核心功能 ### 仪表盘 - **数据概览**: 平台关键指标实时展示 - **统计图表**: 多维度数据可视化分析 - **快捷操作**: 常用功能快速访问入口 - **待办事项**: 需要处理的任务提醒 - **系统通知**: 重要消息和告警信息 ### 用户管理 - **用户列表**: 所有用户信息管理和查询 - **用户详情**: 用户详细信息和操作记录 - **角色分类**: 房东、租客、管理员分类管理 - **账户状态**: 用户状态控制和权限管理 - **实名认证**: 用户身份认证审核 ### 房源管理 - **房源审核**: 房源发布审核和质量控制 - **房源分类**: 房源类型和标签管理 - **区域管理**: 城市区域和商圈管理 - **推荐管理**: 房源推荐位和置顶管理 - **质量监控**: 房源质量评估和改进 ### 订单管理 - **订单监控**: 订单状态跟踪和异常处理 - **合同管理**: 租赁合同审核和归档 - **支付管理**: 支付流水和异常处理 - **退款处理**: 退款申请审核和处理 - **纠纷调解**: 租赁纠纷处理和仲裁 ### 财务管理 - **收入统计**: 平台收入来源和趋势分析 - **佣金管理**: 佣金计算和结算管理 - **对账管理**: 财务对账和差异处理 - **发票管理**: 发票开具和税务管理 - **财务报表**: 各类财务报表生成 ### 内容管理 - **文章管理**: 平台资讯和帮助文档 - **轮播图管理**: 首页轮播图和广告位 - **公告管理**: 系统公告和通知发布 - **模板管理**: 各类消息和合同模板 - **意见反馈**: 用户反馈收集和处理 ### 消息管理 - **消息发送**: 系统消息和通知推送 - **模板管理**: 消息模板创建和维护 - **推送统计**: 消息推送效果分析 - **用户订阅**: 用户消息订阅管理 - **黑名单管理**: 消息黑名单控制 ### 系统管理 - **权限管理**: 角色权限分配和控制 - **菜单管理**: 系统菜单配置和维护 - **参数配置**: 系统参数设置和调优 - **操作日志**: 管理员操作记录审计 - **系统监控**: 系统性能和健康监控 ### 数据统计 - **用户分析**: 用户增长和活跃度分析 - **房源分析**: 房源分布和热度分析 - **交易分析**: 交易量和成功率分析 - **收入分析**: 收入构成和趋势分析 - **区域分析**: 不同区域业务表现 ## 页面功能 ### 仪表盘页面 - **数据大屏**: 关键业务指标实时展示 - **图表分析**: 多维度数据可视化 - **趋势预测**: 基于历史数据的趋势分析 - **异常告警**: 业务异常自动告警 - **快捷导航**: 常用功能快速访问 ### 用户管理页面 - **用户列表**: 支持多条件筛选和搜索 - **批量操作**: 批量启用、禁用、删除用户 - **用户画像**: 用户行为和偏好分析 - **信用管理**: 用户信用评级和记录 - **沟通记录**: 客服沟通历史查看 ### 房源管理页面 - **房源审核**: 房源信息审核和质量把控 - **批量管理**: 房源批量操作和状态更新 - **地图展示**: 房源地理位置可视化 - **数据分析**: 房源热度和转化率分析 - **质量评估**: 房源质量评分和改进建议 ### 订单管理页面 - **订单跟踪**: 订单全生命周期跟踪 - **状态管理**: 订单状态批量更新 - **异常处理**: 异常订单识别和处理 - **数据导出**: 订单数据导出和报表 - **客服工具**: 订单相关客服支持 ### 财务管理页面 - **收支明细**: 详细的收支流水记录 - **对账工具**: 自动对账和差异分析 - **报表生成**: 各类财务报表自动生成 - **税务管理**: 税务计算和申报支持 - **风险控制**: 财务风险识别和预警 ### 内容管理页面 - **富文本编辑**: 支持富文本内容编辑 - **媒体管理**: 图片、视频等媒体资源管理 - **版本控制**: 内容版本管理和回滚 - **发布控制**: 内容发布时间和范围控制 - **SEO优化**: 内容SEO优化建议 ### 消息管理页面 - **消息编辑**: 可视化消息内容编辑 - **用户筛选**: 精准的用户群体筛选 - **发送控制**: 消息发送时间和频率控制 - **效果分析**: 消息推送效果实时分析 - **A/B测试**: 消息内容A/B测试支持 ### 系统管理页面 - **权限矩阵**: 可视化权限分配界面 - **配置管理**: 系统参数可视化配置 - **日志查询**: 强大的日志查询和分析 - **性能监控**: 系统性能实时监控 - **备份恢复**: 数据备份和恢复管理 ## 开发指南 ### 环境准备 ```bash # 安装Node.js (推荐v16+) # 安装pnpm npm install -g pnpm # 克隆项目 git clone cd admin-dashboard # 安装依赖 pnpm install # 启动开发服务器 pnpm dev ``` ### 开发规范 - 使用TypeScript进行类型安全开发 - 遵循Vue 3 Composition API最佳实践 - 使用ESLint和Prettier保证代码质量 - 组件命名采用PascalCase - 文件命名采用kebab-case - 使用Pinia进行状态管理 - API接口统一使用Axios封装 ### 组件开发 ```typescript // 组件示例 ``` ### 状态管理 ```typescript // store示例 import { defineStore } from 'pinia' import { userApi } from '@/api/user' import type { User, UserQuery } from '@/types/user' export const useUserStore = defineStore('user', { state: () => ({ userList: [] as User[], currentUser: null as User | null, total: 0 }), actions: { async getUserList(query: UserQuery) { const response = await userApi.getList(query) this.userList = response.data this.total = response.total return response }, async createUser(userData: Partial) { const response = await userApi.create(userData) this.userList.unshift(response.data) return response } } }) ``` ## 性能优化 ### 代码分割 - 路由级别的代码分割 - 组件按需加载 - 第三方库按需引入 - 图片懒加载 ### 缓存策略 - HTTP缓存配置 - 浏览器缓存利用 - 数据缓存机制 - 静态资源CDN ### 打包优化 - Tree Shaking优化 - 代码压缩和混淆 - 资源压缩和优化 - 构建产物分析 ## 部署配置 ### 开发环境 ```bash # 启动开发服务器 pnpm dev # 代码检查 pnpm lint # 类型检查 pnpm type-check # 单元测试 pnpm test ``` ### 生产环境 ```bash # 构建生产版本 pnpm build # 预览构建结果 pnpm preview # 部署到服务器 pnpm deploy ``` ### Docker部署 ```dockerfile FROM node:16-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build EXPOSE 3000 CMD ["npm", "run", "preview"] ``` ## 监控告警 ### 性能监控 - 页面加载时间监控 - API响应时间监控 - 错误率监控 - 用户行为监控 ### 业务监控 - 关键业务指标监控 - 异常数据告警 - 系统健康检查 - 用户反馈监控 ### 日志管理 - 操作日志记录 - 错误日志收集 - 性能日志分析 - 安全日志审计 ## 注意事项 1. 严格的权限控制和数据安全保护 2. 完善的操作日志和审计机制 3. 高可用性和容错处理 4. 用户体验和界面友好性 5. 数据备份和恢复策略 6. 系统性能优化和监控 7. 代码质量和安全规范 8. 文档维护和知识管理 9. 持续集成和部署流程 10. 团队协作和代码审查