# everwin-admin-ui

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

## Basic Information

- **Project Name**: everwin-admin-ui
- **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-03-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# everwin-admin（Admin UI）

基于 Vue 3 + Vite + PrimeVue 的后台管理前端项目，包含「用户管理 / 角色权限 / 个人中心 / 系统设置」等基础模块，并沉淀了查询区与表格区的通用组件，便于后续快速扩展页面能力。

## 技术栈

- Vue 3 + TypeScript
- Vite
- Vue Router
- Pinia
- PrimeVue + PrimeFlex + PrimeIcons

## 本地启动

项目目前仅包含前端 `admin-ui`。

```bash
cd admin-ui
pnpm install
pnpm dev
```

默认访问：`http://localhost:5173/`

## 构建

```bash
cd admin-ui
pnpm build
pnpm preview
```

## 功能概览

- **布局与导航**
  - 左侧菜单 + 顶栏（面包屑、通知、快捷入口、用户菜单）
  - 多页签（Tabs）导航：路由切换自动记录页签，支持关闭/右键菜单
  - 顶栏全局搜索：输入菜单/路由名称或路径可快速定位并跳转页面
- **用户管理**
  - 查询条件区 + 数据表格区
  - 新增/编辑用户弹窗
  - 单条删除/批量删除确认弹窗
  - 列设置：勾选控制表格列显示（可全选，支持持久化）
- **角色权限**
  - 与用户管理一致的查询与表格风格，提供「配置权限」入口按钮（占位）
- **个人中心**
  - 基本信息表单、修改密码弹窗、安全信息展示
- **系统设置**
  - 基础设置/外观设置/安全策略等表单模块（可作为后续对接后端的壳）

## 通用组件与约定

### AppSearchForm（查询卡片）

- 位置：`admin-ui/src/components/AppSearchForm.vue`
- 用法：用于包裹查询条件区域，统一卡片样式与间距；表单内容通过默认插槽传入。

### AppDataTable（表格卡片）

- 位置：`admin-ui/src/components/AppDataTable.vue`
- 能力：
  - 统一表格卡片的标题区/工具栏区
  - 内置「列设置」：可勾选显示列、支持全选、支持 localStorage 持久化
- 关键参数：
  - `columnSettingsKey`：用于区分不同页面的列设置持久化 key（建议每页唯一）
  - `v-model:selection`：透传并维护 DataTable selection

### AppConfirmDialog + useAppConfirm（系统确认弹窗）

- 组件：`admin-ui/src/components/AppConfirmDialog.vue`（在 `App.vue` 全局挂载）
- Composable：`admin-ui/src/composables/useAppConfirm.ts`
- 调用方式：
  - `mode: 'danger'`：删除场景（红色图标/按钮，Header=删除）
  - `mode: 'info'`：确认场景（cyan 风格，Header=确认）

### 路由 meta.title 约定

路由 `meta.title` 用于：

- 顶栏面包屑展示
- 页签标题展示
- 全局搜索的匹配与展示

## 目录结构（核心）

```
trae-demo/
  admin-ui/
    src/
      components/        # 通用组件（AppSearchForm/AppDataTable/AppConfirmDialog）
      composables/       # 通用 hooks（useAppConfirm）
      layout/components/ # 布局组件（Sidebar/Topbar/TabsView/AppMain）
      router/            # 路由
      store/             # Pinia（tabs 等）
      views/             # 页面（用户管理/角色权限/个人中心/系统设置等）
      style.css          # 全局样式与基础视觉 token
```

## 说明

- 当前数据以页面内 mock 数据为主，后续可替换为真实 API 请求（推荐在 `views` 内抽离为 `services`/`api` 层）。
- PrimeVue v4 对部分旧组件会输出 deprecations 提示（如 OverlayPanel），不影响当前功能使用，可在后续统一升级替换。