# admin-web

**Repository Path**: lslands/admin-web

## Basic Information

- **Project Name**: admin-web
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-18
- **Last Updated**: 2026-05-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3

## README

<p align="center">
  <img alt="YOTI Admin logo" src="./public/icon.png" width="120">
</p>
<h1 align="center" style="margin: 30px 0 12px; font-weight: bold;">YOTI Admin Web</h1>
<h4 align="center">四川悠缇科技普拉提与康复养护业务后台管理前端</h4>
<p align="center">
  <img src="https://img.shields.io/badge/Vue-3.x-42b883" alt="Vue3">
  <img src="https://img.shields.io/badge/TypeScript-5.x-3178c6" alt="TypeScript">
  <img src="https://img.shields.io/badge/Vite-7.x-646cff" alt="Vite">
  <img src="https://img.shields.io/badge/Naive_UI-2.x-18a058" alt="Naive UI">
  <img src="https://img.shields.io/badge/UnoCSS-66.x-333333" alt="UnoCSS">
  <img src="https://img.shields.io/badge/Pinia-3.x-f7c02e" alt="Pinia">
</p>

## 平台简介

YOTI Admin Web 是四川悠缇科技围绕普拉提课程、康复养护、会员运营与门店经营场景打造的中后台管理前端项目，服务于 `YOTI` 小程序的门店运营、内容配置、订单处理、支付对账、财务分析与系统管理等业务环节。

项目基于 `Vue 3 + TypeScript + Vite` 构建，采用 `Naive UI` 作为后台组件体系，结合 `Pinia`、`Vue Router`、`UnoCSS` 与 `vue-i18n`，提供多布局、多主题、动态路由、权限挂载、Markdown 文档页与业务表单能力。

当前工程不仅覆盖传统后台管理模块，还包含面向普拉提与康复业务的门店中心、课程中心、康复中心、预约履约、会员体系、财务对账与通知中心等业务模块。

## 项目信息

| 项目项 | 说明 |
| :-- | :-- |
| 项目名称 | YOTI Admin Web |
| 项目主体 | 四川悠缇科技 |
| 服务品牌 | YOTI |
| 项目定位 | 普拉提与康复养护业务后台管理前端 |
| 面向角色 | 运营、店长、财务、客服、教练管理、系统管理员 |
| 配套用户端 | YOTI 小程序（`pilates-uniapp`） |

## 技术架构

| 层级 | 技术/方案 | 说明 |
| :-- | :-- | :-- |
| 前端框架 | `Vue 3` | 后台页面与组件开发 |
| 开发语言 | `TypeScript` | 类型约束与领域模型定义 |
| 构建工具 | `Vite 7` | 开发服务与构建打包 |
| 路由系统 | `Vue Router 4` | 静态路由、动态路由、标签导航 |
| 状态管理 | `Pinia` | 登录态、主题、布局、标签页、配置中心 |
| 组件体系 | `Naive UI` | 表格、表单、抽屉、对话框等后台能力 |
| 原子样式 | `UnoCSS` | 原子类、图标与轻量样式增强 |
| 国际化 | `vue-i18n` | 中英文界面切换 |
| 网络层 | `src/api/http.ts` | Axios 封装、请求拦截、统一响应处理 |
| 文档能力 | `vite-plugin-md` | Markdown 页面与内部文档展示 |

## 内置功能

1. 登录认证：支持密码登录、验证码登录、第三方登录入口与会话维持。
2. 经营看板：支持首页经营概览、预约履约趋势、营收趋势与快捷工作台。
3. 用户权限：支持用户、角色、菜单、权限、应用维度的后台管理。
4. 门店中心：支持门店、教练、房间、设备、设施等门店资源管理。
5. 课程中心：支持课程信息、课程配置与训练服务内容维护。
6. 康复中心：支持康复项目、康复评估、项目步骤与展示内容配置。
7. 预约履约：支持预约订单、到店签到、履约记录与评估记录管理。
8. 会员中心：支持会员等级、会员权益、会员方案、赠送、续费、记录与风控名单。
9. 订单中心：支持业务订单、会员订单、自动续费计划、扣款记录、关单记录等处理。
10. 支付中心：支持支付交易、退款管理、通知异常、支付配置等支付链路管理。
11. 财务中心：支持渠道对账、结算记录、开票记录、财务日报与渠道资金报表。
12. 系统管理：支持系统配置、协议配置、字典、白名单、版本发布、反馈与安全内容管理。
13. 日志中心：支持系统日志、操作日志、登录日志等审计能力。
14. 通知与协作：支持通知中心、工作台工具入口、流程审批相关入口与内部协作能力。
15. 布局与主题：支持多布局切换、深浅色模式、业务主题方案与标签导航配置。
16. 文档与组件演示：支持 Markdown 文档页与组件/表单测试页面，方便规范沉淀与二次开发。

## 演示图

<table>
  <tr>
    <td>
      <img src="./docs/v1.0/image/QQ20260518-190143.png" alt="登录页">
      <p align="center">登录页</p>
    </td>
    <td>
      <img src="./docs/v1.0/image/QQ20260518-190218.png" alt="经营看板首页">
      <p align="center">经营看板首页</p>
    </td>
  </tr>
  <tr>
    <td>
      <img src="./docs/v1.0/image/QQ20260518-190234.png" alt="工作台快捷入口">
      <p align="center">工作台快捷入口</p>
    </td>
    <td>
      <img src="./docs/v1.0/image/QQ20260518-190303.png" alt="渠道对账单">
      <p align="center">渠道对账单</p>
    </td>
  </tr>
  <tr>
    <td>
      <img src="./docs/v1.0/image/QQ20260518-190314.png" alt="渠道资金报表">
      <p align="center">渠道资金报表</p>
    </td>
    <td>
      <img src="./docs/v1.0/image/QQ20260518-190323.png" alt="支付交易管理">
      <p align="center">支付交易管理</p>
    </td>
  </tr>
  <tr>
    <td>
      <img src="./docs/v1.0/image/QQ20260518-190335.png" alt="业务订单管理">
      <p align="center">业务订单管理</p>
    </td>
    <td>
      <img src="./docs/v1.0/image/QQ20260518-190403.png" alt="门店管理">
      <p align="center">门店管理</p>
    </td>
  </tr>
  <tr>
    <td>
      <img src="./docs/v1.0/image/QQ20260518-190411.png" alt="康复项目管理">
      <p align="center">康复项目管理</p>
    </td>
    <td>
      <img src="./docs/v1.0/image/QQ20260518-190423.png" alt="设备管理与移动端预览">
      <p align="center">设备管理与移动端预览</p>
    </td>
  </tr>
  <tr>
    <td>
      <img src="./docs/v1.0/image/QQ20260518-190448.png" alt="登录日志与系统主题设置">
      <p align="center">登录日志与系统主题设置</p>
    </td>
    <td>
      <img src="./docs/v1.0/image/QQ20260518-191010.png" alt="通知中心">
      <p align="center">通知中心</p>
    </td>
  </tr>
</table>

## 快速开始

### 1. 环境建议

- 推荐使用 `Node.js 20+`
- 推荐使用 `yarn`

### 2. 安装依赖

```bash
yarn install
```

### 3. 配置环境变量

根据实际环境检查以下文件：

- `.env.development`
- `.env.production`

重点变量说明：

| 变量名 | 说明 |
| :-- | :-- |
| `VITE_API_BASE_URL` | 接口前缀或代理前缀 |
| `VITE_PROXY_TARGET` | 本地开发代理目标地址 |
| `VITE_CHAT_WS_URL` | 聊天 WebSocket 地址 |
| `VITE_DEV_HOST` | 本地开发 Host |
| `VITE_DEV_PORT` | 本地开发端口 |
| `VITE_ROUTE_MODE` | 路由模式配置 |

当 `VITE_PROXY_TARGET` 存在时，`vite.config.ts` 会对 `VITE_API_BASE_URL` 对应前缀启用本地代理。

### 4. 本地开发

```bash
yarn dev
```

### 5. 预览与校验

```bash
yarn preview
yarn typecheck
yarn check:i18n
yarn check:structure
yarn prop
```

## 常用命令

| 命令 | 说明 |
| :-- | :-- |
| `yarn dev` | 启动本地开发环境 |
| `yarn preview` | 启动预览服务 |
| `yarn typecheck` | 执行 TypeScript 类型检查 |
| `yarn check:i18n` | 校验国际化模块与 locale JSON 结构一致性 |
| `yarn check:structure` | 校验核心目录与 feature 基本结构 |
| `yarn prop` | 以 production 模式启动 Vite |
| `yarn build` | 执行类型检查、i18n 校验并构建生产包 |

## 项目结构

```text
admin-web
├─ docs
│  └─ v1.0
│     └─ image                 # README 演示截图集
├─ public
│  ├─ mock                     # 本地 mock 数据
│  ├─ icon.png
│  └─ image.png
├─ scripts
│  ├─ check-component-structure.mjs
│  └─ check-i18n.mjs
├─ src
│  ├─ api                      # HTTP 封装、系统服务、业务服务
│  ├─ assets                   # 图片、图标、主题、样式资源
│  ├─ components               # 通用组件与 Naive UI 扩展组件
│  ├─ features                 # 领域表单、功能 UI、业务能力
│  ├─ hooks                    # 组合式逻辑与通用 hooks
│  ├─ i18n                     # 国际化资源与语言包
│  ├─ layouts                  # 登录布局、后台布局、大屏布局、浮动工具
│  ├─ router                   # 静态路由、动态路由、导航配置
│  ├─ stores                   # auth / config / tabs / theme / chat 等状态
│  ├─ styles                   # 全局样式与主题样式
│  ├─ theme                    # 主题 token 与主题入口
│  ├─ types                    # 类型定义
│  ├─ utils                    # 工具方法
│  └─ views                    # 页面视图层
├─ .env.development
├─ .env.production
├─ DockerFile
├─ package.json
├─ uno.config.ts
└─ vite.config.ts
```

## 主要业务域

| 业务域 | 说明 |
| :-- | :-- |
| `authority` | 用户、角色、菜单、权限、应用管理 |
| `vip` | 会员等级、权益、方案、规则、赠送、续费、记录 |
| `order` | 业务订单、会员订单、自动续费、扣款、关单 |
| `pay` | 支付交易、退款、通知异常、支付配置 |
| `finance` | 对账、结算、开票、日报、渠道资金报表 |
| `pilates` | 门店、教练、房间、设备、课程、康复、评估、预约、内容运营 |
| `system` | 系统配置、协议配置、字典、白名单、反馈、版本发布、安全治理 |
| `log` | 系统日志、操作日志、登录日志 |
| `notice-center` | 通知中心与消息提醒 |
| `flowable / company / chat` | 审批流、企业信息、协作与聊天能力 |

## 开发说明

1. 项目内置 `@` 指向 `src`，`@p` 指向 `public`，便于资源与模块引用。
2. `src/router/module/routes.static.ts` 与 `routes.dynamic.ts` 负责路由分层与动态挂载。
3. `src/layouts/AdminLayout`、`LoginLayout`、`LargeScreen` 提供多形态布局支持。
4. `src/features/**/forms` 集中沉淀业务表单与详情组件，适合复用到抽屉、弹窗、步骤表单等场景。
5. `src/views/docs` 与 `vite-plugin-md` 共同承担内部开发文档展示能力。
6. `src/layouts/AdminLayout/components/Header/config` 提供主题、布局、NavTabs 与深浅色联动配置。
7. `public/mock` 存放本地 mock 数据，适合接口未联通阶段的页面调试。
8. `docs/v1.0/image` 为当前版本截图集，可持续补充后台功能演示图。

## 版权说明

本项目为四川悠缇科技 `YOTI` 后台管理前端工程，用于普拉提课程、康复养护、会员运营与门店经营等业务场景的数字化后台建设。