# Sass管理平台 **Repository Path**: yyoti/admin-manage ## Basic Information - **Project Name**: Sass管理平台 - **Description**: 🎯 YOTI SaaS 管理系统 - 基于 Vue 3 + Element Plus 的多租户企业级中后台解决方案。适用于连锁门店、区域代理等 SaaS 运营场景。 - **Primary Language**: HTML - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: https://admin.yyoti.com - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2026-06-05 - **Last Updated**: 2026-08-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: vue3, element-plus, Sass, ERP, CRM ## README

logo

SaaS 管理平台 v1.0.1

四川悠缇科技 · 多租户企业级中后台前端（Vue 3 + Vite + TypeScript）

[English](./README.en.md) | **简体中文** ## 平台简介 **admin-manage** 是 [四川悠缇科技](https://gitee.com/yyoti/admin-manage) 自研的 **SaaS 多租户管理后台**前端工程，面向连锁门店、区域代理、集团总部等需要「一套系统、多组织隔离」的运营场景。项目在通用中后台能力之上，内置租户切换、RBAC 动态路由、可配置布局与主题、国际化等企业级特性，可与自研或第三方 Java / Node 等后端 API 对接。 ### 系统预览 ![登录页面](docs/images/login-page.png) ![仪表板](docs/images/dashboard.png) ![多租户切换](docs/images/tenant-overview.png) ![用户管理](docs/images/user-management.png) ### 在线演示 **项目地址**: [https://admin.yyoti.com](https://admin.yyoti.com) **登录信息**: - 企业选择：游客 - 账号：`admin` - 密码：`yoti123` **典型业务场景** | 场景 | 说明 | |------|------| | 多门店运营 | 顶栏 `TenantSwitcher` 切换门店/租户，数据按当前租户隔离（对接后端后生效） | | 权限与菜单 | 后端下发菜单树，前端 `permission` Store 动态注册路由与侧栏 | | 运营看板 | 首页统计卡片、ECharts 趋势图、Gitee 提交动态（Git Graph） | | 系统配置 | 布局模式、暗色主题、标签栏/面包屑、侧栏菜单风格等可视化配置 | 本项目基于 [Apache License 2.0](./LICENSE) 开源，个人与企业均可免费使用。 ## 业务模块详解 ### CRM 模块 - **线索管理**：公共线索池分配、我的线索跟进、线索转化客户 - **客户管理**：客户档案、联系人管理、跟进记录、客户标签 - **商机管理**：商机跟进、产品关联、商机转化、失效处理 - **合同管理**：合同创建、分期管理、合同详情、合同打印 - **应收账款**：应收账单管理、账单状态跟踪 - **CRM 报表**：销售漏斗分析、业绩统计、客户画像 ![客户管理](docs/images/crm-customers.png) ![线索管理](docs/images/crm-leads.png) ![商机管理](docs/images/crm-opportunities.png) ### 财务模块 - **财务科目**：科目树管理、辅助核算、科目详情 - **凭证管理**：凭证创建、凭证审核、凭证打印、发票票据 - **渠道对账**：对账单生成、对账明细、对账打印、对账审核 - **结算管理**：结算单生成、支付管理、结算审核 - **财务报表**：资产负债表、利润表、现金流量表、多维度分析 - **应收核销**：核销管理、核销记录 ![财务科目](docs/images/finance-accounts.png) ![凭证管理](docs/images/finance-vouchers.png) ![财务报表](docs/images/finance-reports.png) ### 日志模块 - **登录日志**：用户登录时间、IP地址、设备信息 - **操作日志**：用户操作记录、模块访问、数据变更 ### 系统设置 - **布局设置**：三种布局模式切换、响应式配置 - **主题设置**：亮色/暗色主题、主题色自定义 - **标签页设置**：标签页样式、持久化配置 - **菜单设置**：侧栏菜单风格、折叠配置 ![系统设置](docs/images/system-settings.png) ### 协议管理 - **服务协议**：Markdown 格式服务协议，支持水印效果 - **隐私政策**：隐私政策文档，滚动浏览体验 ![协议对话框](docs/images/agreement-dialog.png) ## 文档导航 | 文档 | 说明 | |------|------| | [docs/v1 开发文档](./docs/v1/README.md) | 完整开发与接入指南（推荐） | | [快速开始](./docs/v1/01-快速开始.md) | 安装、启动、构建 | | [业务介绍](./docs/v1/07-业务介绍.md) | 业务模块、数据流、对接说明 | | [部署指南](./docs/v1/08-部署指南.md) | 生产构建、Nginx、环境变量 | | [动态路由与权限](./docs/v1/09-动态路由与权限.md) | Mock/后端菜单、路由注册 | | [在线组件文档](http://localhost:3000/docs) | 本地启动后访问 `/docs` | ## 技术栈 | 分类 | 技术 | 说明 | |------|------|------| | 核心框架 | Vue 3.2、TypeScript 4.9 | 组合式 API + 严格类型 | | 构建 | Vite 5 | 多环境、HMR、按需编译 | | UI | Element Plus 2.x | 按需自动导入 + Sass 主题变量 | | 状态 / 路由 | Pinia 3、Vue Router 4 | 模块化 Store；动态路由 + 标签页 | | 网络 | Axios 1.x | 统一拦截器与业务 `code` 约定 | | 样式 | UnoCSS 0.58、Sass | 原子类 + 布局/主题 SCSS | | 国际化 | Vue I18n 9 | 6 种语言，含 RTL（阿拉伯语） | | 图表 | ECharts 6 | 首页看板，`useEcharts` 封装 | | 图标 | Font Awesome、Lucide、iconfont | 统一 `` 组件 | | 文档站 | markdown-it | 运行时 `/docs` 组件演示 | | 电子签名 | CryptoJS | 签名加密与验证 | | 图片处理 | CropperJS | 图片裁剪功能 | | 二维码 | qrcode.vue | 二维码生成 | | 富文本 | wangEditor | 富文本编辑器 | 工程化：`unplugin-auto-import`、`unplugin-vue-components`、`vue-tsc` 构建前类型检查。 ## 核心能力 1. **三种后台布局**：经典侧栏、顶栏通栏、顶部横向菜单；`LayoutSwitcher` / 系统设置面板切换并持久化。 2. **响应式布局**：`useLayoutResponsive` 在 <768px 抽屉侧栏、<992px 自动折叠。 3. **动态路由与 RBAC**：`permission` Store 拉取菜单 → `router.addRoute`；开发阶段使用 `public/mock/routes.json`。 4. **多标签 / 面包屑**：`TagsView` 六种视觉风格；可切换面包屑导航。 5. **多租户切换**：`TenantSwitcher` + `tenant` Store（当前为演示数据，预留 `fetchTenants` / `switchTenant`）。 6. **主题系统**：亮/暗色、多套主题色、语义色、页脚高度、侧栏菜单风格。 7. **国际化**：6 语言懒加载；`LocaleSwitcher` + `useLocale`。 8. **HTTP 封装**：开发环境 `/api` 代理；生产使用 `VITE_API_BASE_URL`。 9. **首页看板**：用户统计、ECharts、Gitee 仓库提交时间线（`GitGraph`）。 10. **组件文档站**：`http://localhost:3000/docs` 可交互演示。 11. **业务组件库**： - **DataTable**：支持分页、排序、筛选的数据表格（V1/V2） - **FormDialog**：表单对话框，支持动态表单配置 - **Assign**：权限分配组件，支持树形结构 - **Upload**：上传组件，支持图片裁剪 - **Signature**：电子签名组件 - **AgreementDialog**：协议对话框，支持 Markdown 渲染和水印 12. **CRM 模块**： - 线索管理：公共线索池、我的线索、线索跟进 - 客户管理：客户档案、联系人管理、跟进记录 - 商机管理：商机跟进、产品管理、转化客户 - 合同管理：合同创建、分期管理、合同详情 - 应收账款：应收账单管理 - CRM 报表：销售数据分析 13. **财务模块**： - 财务科目：科目树管理、辅助核算 - 凭证管理：凭证创建、审核、打印 - 渠道对账：对账单生成、对账打印 - 结算管理：结算单生成、支付管理 - 财务报表：多维度财务分析图表 - 应收核销：核销管理 14. **日志模块**： - 登录日志：用户登录记录 - 操作日志：用户操作审计 > v1 阶段**未内置**完整登录鉴权、Refresh Token；请求拦截器已预留 Token 注入 TODO，见 [API 请求](./docs/v1/05-API请求.md)。 ## 运行环境 | 环境 | 说明 | 命令 | |------|------|------| | development | 本地开发，API 代理至本地后端 | `npm run dev` | | test | 连接测试服务器联调 | `npm run dev:test` | | production | 生产构建与部署 | `npm run build` | 测试环境构建：`npm run build:test` 本地预览构建产物：`npm run preview` **环境要求**：Node.js >= 16，npm >= 8（或 pnpm / yarn） ## 快速开始 ```bash # 安装依赖 npm install # 启动开发服务器（默认 http://localhost:3000） npm run dev ``` 开发代理默认将 `/api` 转发至 `.env.development` 中的 `PROXY_TARGET`（如 `http://127.0.0.1:9527`）。生产 API 在 `.env.production` 配置 `VITE_API_BASE_URL`。 详细步骤见 [docs/v1/01-快速开始.md](./docs/v1/01-快速开始.md)。 ## 部署概要 前端为 **纯静态 SPA**，构建产物位于 `dist/`： ```bash npm run build ``` 将 `dist` 部署至 Nginx / OSS / CDN，并配置： - `try_files` 回退到 `index.html`（History 模式） - `/api` 反向代理至后端网关 - 注入生产环境变量（构建时写入，非运行时） 完整 Nginx 示例、环境变量说明见 **[docs/v1/08-部署指南.md](./docs/v1/08-部署指南.md)**。 当前团队生产域名示例：`https://admin.hexinyu.cn`（以实际运维为准）。 ## 项目结构 ``` admin-manage/ ├── docs/v1/ # Markdown 开发文档 ├── public/ │ ├── mock/routes.json # 开发阶段动态菜单 Mock │ └── favicon.ico # 网站图标 ├── src/ │ ├── api/ # API 接口层 │ │ ├── auth.ts # 认证相关接口 │ │ ├── base/ # 基础 CRUD 接口 │ │ ├── gitee.ts # Gitee API 代理 │ │ ├── request.ts # Axios 实例与拦截器 │ │ ├── route.ts # 动态路由接口 │ │ └── views/ # 业务模块接口 │ ├── assets/ # 静态资源 │ │ ├── agreements/ # 协议文档（服务协议、隐私政策） │ │ └── logo/ # Logo 资源 │ ├── components/ # 通用组件 │ │ ├── AgreementDialog/ # 协议对话框（支持水印、Markdown 渲染） │ │ ├── DetailProductTable/ # 产品详情表格 │ │ ├── GitGraph/ # Gitee 提交时间线 │ │ ├── Icon/ # 图标组件 │ │ ├── IconPicker/ # 图标选择器 │ │ ├── LayoutSwitcher/ # 布局切换器 │ │ ├── LocaleSwitcher/ # 语言切换器 │ │ ├── Signature/ # 电子签名 │ │ ├── TenantScopeSelect/ # 租户范围选择 │ │ ├── TenantSwitcher/ # 租户切换器 │ │ ├── TenantTag/ # 租户标签 │ │ └── biz-report/ # 业务报表组件 │ ├── docs/site/ # 在线组件文档站 (/docs) │ ├── hooks/ # 组合式函数 │ │ ├── chart/ # 图表相关 hooks │ │ ├── crud/ # CRUD 相关 hooks │ │ ├── layout/ # 布局相关 hooks │ │ └── locale/ # 国际化 hooks │ ├── layouts/ # 布局系统 │ │ ├── app/ # 后台主布局 │ │ └── components/ # 布局业务组件 │ │ ├── Assign/ # 权限分配 │ │ ├── BatchDeleteButton/ # 批量删除按钮 │ │ ├── DataTable/ # 数据表格（V1/V2） │ │ ├── DeleteButton/ # 删除按钮 │ │ ├── DetailDialog/ # 详情对话框 │ │ ├── ExportButton/ # 导出按钮 │ │ ├── FormDialog/ # 表单对话框 │ │ ├── FuzzySearch/ # 模糊搜索 │ │ ├── ImportButton/ # 导入按钮 │ │ ├── NavTree/ # 导航树 │ │ ├── PageBreadcrumb/ # 页面面包屑 │ │ ├── ReturnReceipt/ # 回执单 │ │ ├── StatsOverview/ # 统计概览 │ │ └── Upload/ # 上传组件（支持裁剪） │ ├── locales/ # 国际化语言包 │ │ ├── langs/ # 6 种语言：zh-CN, en-US, fr-FR, ar, ms-MY, sw │ │ ├── config.ts # 国际化配置 │ │ └── helper.ts # 国际化辅助函数 │ ├── router/ # 路由配置 │ ├── stores/modules/ # Pinia 状态管理 │ │ ├── app.ts # 应用状态 │ │ ├── locale.ts # 语言状态 │ │ ├── permission.ts # 权限状态 │ │ ├── tags.ts # 标签页状态 │ │ ├── tenant.ts # 租户状态 │ │ └── user.ts # 用户状态 │ ├── utils/ # 工具函数 │ ├── views/ # 业务页面 │ │ ├── conceal/ # 隐私模块（我的账户、通知） │ │ ├── crm/ # CRM 模块 │ │ │ ├── business/ # 商机管理 │ │ │ ├── contract/ # 合同管理 │ │ │ ├── customer/ # 客户管理 │ │ │ ├── lead/ # 线索管理 │ │ │ ├── receivable/ # 应收账款 │ │ │ └── report/ # CRM 报表 │ │ ├── dashboard/ # 仪表板 │ │ ├── error/ # 错误页面 │ │ ├── finance/ # 财务模块 │ │ │ ├── accounting-periods/ # 会计期间 │ │ │ ├── channel-reconciliation/ # 渠道对账 │ │ │ ├── financial-accounts/ # 财务科目 │ │ │ ├── receivable-writeoff/ # 应收核销 │ │ │ ├── reports/ # 财务报表 │ │ │ ├── settlement/ # 结算管理 │ │ │ └── vouchers/ # 凭证管理 │ │ ├── log/ # 日志模块 │ │ │ ├── login/ # 登录日志 │ │ │ └── operation/ # 操作日志 │ │ ├── login/ # 登录页面 │ │ │ ├── components/ # 登录组件 │ │ │ │ ├── captcha/ # 验证码（图形、短信） │ │ │ │ └── common/ # 通用组件（协议复选框等） │ │ │ └── theme/ # 登录主题 │ │ └── _fallback/ # 页面占位 │ ├── constant/ # 常量定义 │ ├── directives/ # 自定义指令 │ └── types/ # TypeScript 类型定义 ├── .env.development # 开发环境变量 ├── .env.test # 测试环境变量 ├── .env.production # 生产环境变量 ├── vite.config.ts # Vite 配置 ├── uno.config.ts # UnoCSS 配置 └── package.json # 项目依赖 ``` ## 环境变量（常用） | 变量名 | 说明 | |--------|------| | `VITE_APP_TITLE` | 应用/企业名称（浏览器标题、品牌区） | | `VITE_APP_ICP` | ICP 备案号（页脚） | | `VITE_API_BASE_URL` | 生产/测试构建的 API 根路径 | | `PROXY_TARGET` | 开发代理目标（仅 Vite，不注入前端） | | `PROXY_WS_PATH` | WebSocket 独立代理路径（可选） | | `VITE_GITEE_REPO` | 首页 Git Graph 仓库 `owner/repo` | | `VITE_GITEE_REPO_URL` | 仓库主页链接 | | `GITEE_ACCESS_TOKEN` | 开发环境 Gitee 代理令牌（仅 vite.config，不注入前端） | 完整列表见 [docs/v1/01-快速开始.md](./docs/v1/01-快速开始.md) 与 [部署指南](./docs/v1/08-部署指南.md)。 ## 开发指南 ### 推荐开发环境 - **IDE**：VS Code + [Vue - Official (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - **Node.js**：>= 16.x - **包管理器**：npm >= 8.x（或 pnpm / yarn） ### 代码规范 - 使用 TypeScript 严格模式 - 遵循 Vue 3 Composition API 最佳实践 - 组件命名采用 PascalCase - 样式使用 SCSS，遵循 BEM 命名规范 ### 组件开发 - 通用组件放在 `src/components/` 目录 - 布局组件放在 `src/layouts/components/` 目录 - 业务组件放在对应 `src/views/` 模块目录下 - 组件自动注册，无需手动导入 ### 路由与权限 - 动态路由配置文件：`public/mock/routes.json` - 权限指令：`v-permission`，详见 `src/directives/permission.ts` - 路由守卫：`src/router/index.ts` ### API 接口 - API 定义：`src/api/` 目录 - 请求拦截：`src/api/request.ts` - 业务接口按模块分组：`src/api/views/` ## 常见问题 ### 1. 如何新增业务模块？ 在 `src/views/` 下创建模块目录，参考现有 CRM 或财务模块结构。 ### 2. 如何修改主题色？ 在系统设置面板中调整，或修改 `src/utils/theme.ts` 中的主题配置。 ### 3. 如何添加新的语言？ 在 `src/locales/langs/` 下添加新的语言目录，并在 `src/locales/config.ts` 中注册。 ### 4. 协议文档如何修改？ 协议文档位于 `src/assets/agreements/` 目录，支持 Markdown 格式。 ### 5. 如何对接后端 API？ 修改 `.env.development` 中的 `PROXY_TARGET`，生产环境配置 `VITE_API_BASE_URL`。 ## 更新日志 ### v1.0.1 (2026-08-05) - 新增协议对话框组件，支持 Markdown 渲染和水印效果 - 完善 CRM 模块：线索、客户、商机、合同管理 - 新增财务模块：科目、凭证、对账、报表功能 - 优化登录页面，增加验证码和协议确认 - 新增日志模块：登录日志和操作日志 - 改进业务组件库：DataTable V2、Upload、Signature 等 ## 国际化（i18n） 默认 **简体中文（zh-CN）**，支持 `en-US`、`ms-MY`、`fr-FR`、`ar`（RTL）、`sw`。业务代码请使用 `useLocale` Hook，禁止硬编码用户可见文案。 扩展语言、新增文案模块的完整步骤见 README 历史章节及 [docs/v1/04-国际化.md](./docs/v1/04-国际化.md)。 ## 推荐 IDE - [VS Code](https://code.visualstudio.com/) + [Vue - Official (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) ## 开源协议 本项目基于 [Apache License 2.0](./LICENSE) 开源。 ## 参与贡献 1. Fork 本仓库 2. 新建功能分支（`git checkout -b feat/xxx`） 3. 提交代码（`git commit -m 'feat: 添加 xxx 功能'`） 4. 推送分支（`git push origin feat/xxx`） 5. 新建 Pull Request