# everwin-admin-prime

**Repository Path**: everwin-admin_1/everwin-admin-prime

## Basic Information

- **Project Name**: everwin-admin-prime
- **Description**: 基于 Vue 3 + Vite + PrimeVue + pnpm 的后台管理前端项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-24
- **Last Updated**: 2026-04-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# everwin-admin（Admin UI）

基于 **Vue 3.5 + TypeScript + Vite 8 + PrimeVue 4 + PrimeFlex** 的后台管理前端项目。  
包含用户管理、角色权限、流程管理、任务中心等基础模块，沉淀了可复用的查询区、表格区通用组件，并预留了 AI 智能助手对话入口，便于后续快速扩展。

## 技术栈

| 分类 | 技术 |
|------|------|
| 框架 | Vue 3.5 + TypeScript (strict) |
| 构建 | Vite 8 + vue-tsc |
| UI | PrimeVue 4 + PrimeFlex 4 + PrimeIcons 7 |
| 路由 | Vue Router 5 |
| 状态 | Pinia 3 |
| HTTP | Axios（已安装，待接入后端） |
| 流程 | bpmn-js 18 + camunda-bpmn-moddle |

## 快速开始

```bash
# 安装依赖
pnpm install

# 启动开发服务器（默认 http://localhost:5173）
pnpm dev

# 类型检查 + 生产构建
pnpm build

# 预览生产构建
pnpm preview
```

> 项目无额外的 lint / test 命令。TypeScript strict 模式（`noUnusedLocals`、`noUnusedParameters`）作为主要代码质量守卫——构建时会对未使用变量报错。

## 功能模块

### 布局与导航

- **左侧菜单** — `PanelMenu`，按分组折叠/展开，路由激活态自动高亮。
- **顶栏** — 面包屑、全局搜索（模糊匹配路由 `meta.title` / `path` / `name`）、快捷入口、通知中心、暗黑模式切换、智能助手、用户菜单。
- **多页签** — 路由切换自动追加页签；右键菜单支持：刷新、关闭当前、关闭左侧 / 右侧 / 其他 / 所有。菜单项根据页签位置动态 `disabled`，刷新使用 `contentRefreshKey` 做视图软重挂载，无整页 `location.reload`。

### 工作区

| 页面 | 路由 | 说明 |
|------|------|------|
| 工作台 | `/workbench` | 常用卡片入口 |
| 仪表盘 | `/dashboard` | 统计指标与图表 |
| 通知中心 | `/notifications` | 消息列表与已读标记 |

### 系统管理

| 页面 | 路由 | 说明 |
|------|------|------|
| 用户管理 | `/user-management` | CRUD + 批量删除 + 列设置持久化 |
| 角色权限 | `/role-permissions` | 角色列表 + 「配置权限」入口 |
| 系统设置 | `/settings` | 基础/外观/安全策略表单 |
| 菜单设置 | `/menu-settings` | 菜单树编辑 |
| 数据字典 | `/data-dictionary` | 字典与字典项 CRUD |

### 流程管理

| 页面 | 路由 | 说明 |
|------|------|------|
| 流程分类 | `/process-category` | 分类管理 |
| 流程定义 | `/process-definition` | BPMN 设计器（bpmn-js）+ 部署 / 版本管理 |
| 流程实例 | `/process-instance` | 运行中实例列表 |
| 历史流程 | `/process-history` | 已完成流程查询 |

### 任务管理

| 页面 | 路由 | 说明 |
|------|------|------|
| 待办任务 | `/todo-tasks` | 当前用户待办列表 |
| 已办任务 | `/done-tasks` | 当前用户已办列表 |

### 智能助手（AI Chat）

顶栏暗黑模式按钮右侧的 `pi-comments` 图标，点击弹出右侧悬浮卡片：

- 聊天气泡布局（助手 / 用户）分别带头像图标。
- 消息区 `MutationObserver` 监听 + `scrollIntoView` 锚点，适配后续 SSE 流式逐字输出自动滚到底。
- 弹窗可**拖动位置**（标题栏拖拽）+ **调整大小**（右下角手柄），`min 280×220`，卡片圆角阴影与全局一致。
- 当前为演示占位，后续可替换为真实 SSE/WebSocket 流式接口。

## 通用组件

### AppSearchForm

`src/components/AppSearchForm.vue` — 查询卡片容器，统一样式与间距，通过默认插槽传入筛选表单。

### AppDataTable

`src/components/AppDataTable.vue` — 表格卡片容器：

- 工具栏插槽（新增/导入等按钮）
- 内置「列设置」：勾选显示列、支持全选、`localStorage` 持久化（key: `appdatatable_columns_${columnSettingsKey}`）
- 行选择 + 批量删除支持

### AppDataTableRowActions

`src/components/AppDataTableRowActions.vue` — 表格行级「编辑 / 删除」按钮对。

### AppConfirmDialog + useAppConfirm

- 组件 `src/components/AppConfirmDialog.vue`（`App.vue` 全局挂载一次）
- 调用：

```typescript
const { openConfirm } = useAppConfirm()
openConfirm({
  mode: 'danger',  // 'danger' 红色删除 | 'info' 蓝色确认
  message: '确认要删除该记录吗？',
  onConfirm: () => { /* ... */ }
})
```

### BpmnDesigner + BpmnPropertiesPanel

`src/components/BpmnDesigner.vue` / `BpmnPropertiesPanel.vue` — 基于 bpmn-js 的流程设计器与属性面板。

## 主题系统

`src/theme/theme.ts` 定义 **10 种明亮色彩预设**（冰川青、靛蓝、晴空蓝、薄荷青、新芽绿、奶油黄、杏子橙、蜜桃粉、丁香紫、薰衣草）。  
应用启动时调用 `applyThemeTokens()` + `initAccentFromStorage()` 读取用户上次选择。

关键 CSS 变量：

| 变量 | 用途 |
|------|------|
| `--app-primary` | 主色（按钮高亮、侧栏激活态等） |
| `--app-danger` | 危险色（删除） |
| `--app-warn` | 警告色 |
| `--app-info` | 信息色 |
| `--app-disable` | 禁用色 |

语义 CSS 类：`.app-btn-primary`、`.app-btn-danger`、`.app-text-primary` 等。

## 状态管理

| Store | 文件 | 用途 |
|-------|------|------|
| `useTabStore` | `src/store/tabs.ts` | 多页签（`visitedTabs`）+ 页面刷新键（`contentRefreshKey`） |

## 路由约定

- 所有路由定义在 `src/router/index.ts`，视图组件均懒加载。
- **`meta.title`**（必填）— 用于面包屑、页签标题、全局搜索。
- **`meta.icon`** — 用于面包屑图标。
- **`meta.requiresAuth`** — 已预留，鉴权守卫待后续实现。

## 目录结构

```
src/
├── components/            # 通用组件
│   ├── AppSearchForm.vue
│   ├── AppDataTable.vue
│   ├── AppDataTableRowActions.vue
│   ├── AppConfirmDialog.vue
│   ├── BpmnDesigner.vue
│   └── BpmnPropertiesPanel.vue
├── composables/           # 组合式函数
│   └── useAppConfirm.ts
├── layout/components/     # 布局壳
│   ├── Sidebar.vue
│   ├── Topbar.vue         # 含全局搜索、通知、AI 助手弹窗
│   ├── TabsView.vue       # 多页签 + 右键菜单
│   └── AppMain.vue        # router-view（:key 支持页签刷新）
├── router/                # 路由定义
├── services/              # 业务服务（processDefinitionService 等）
├── store/                 # Pinia Store（tabs）
├── theme/                 # 主题令牌与色彩预设
├── utils/                 # 工具（bpmnZhCN、flowableModdle 等）
├── views/                 # 页面级组件
│   ├── Layout.vue         # 主布局壳
│   ├── Login.vue
│   ├── Workbench.vue
│   ├── Dashboard.vue
│   ├── Notifications.vue
│   ├── UserManagement.vue
│   ├── RolePermissions.vue
│   ├── Settings.vue
│   ├── MenuSettings.vue
│   ├── DataDictionary.vue
│   ├── Profile.vue
│   ├── ProcessCategory.vue
│   ├── ProcessDefinition.vue
│   ├── ProcessInstance.vue
│   ├── ProcessHistory.vue
│   ├── TodoTasks.vue
│   └── DoneTasks.vue
├── style.css              # 全局样式与视觉 token
├── App.vue
└── main.ts
```

## 命名约定

| 前缀/位置 | 含义 |
|-----------|------|
| `App*` | 全局可复用组件 |
| `src/layout/components/` | 布局壳组件 |
| `src/views/` | 页面级组件，按功能命名 |
| `src/composables/use*` | 组合式函数 |
| `src/services/` | 业务 API 服务层 |

## UI 语言

所有界面文案、菜单标签均为**简体中文**。

## 备注

- 当前各页面数据以组件内 mock 为主，后续替换为真实 API 时推荐在 `src/services/` 下按模块抽离。
- PrimeVue v4 对部分旧组件会输出 deprecation 提示（如 `OverlayPanel`），不影响功能使用，可后续统一升级替换。
- Axios 已安装但尚未配置拦截器/基础 URL，接入后端时再补充。