# erverwin-admin-daisy

**Repository Path**: everwin-admin_1/erverwin-admin-daisy

## Basic Information

- **Project Name**: erverwin-admin-daisy
- **Description**: 
基于 **Vue 3 + DaisyUI5 + TypeScript + Vite** 的后台管理壳与演示页面，使用 **Tailwind CSS v4**、**DaisyUI 5**、**Pinia**、**Vue Router**、**Axios**。侧重布局、多页签、侧栏导航
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-29
- **Last Updated**: 2026-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Everwin Admin（DaisyUI）

基于 **Vue 3 + TypeScript + Vite** 的后台管理壳与演示页面，使用 **Tailwind CSS v4**、**DaisyUI 5**、**Pinia**、**Vue Router**、**Axios**。侧重布局、多页签、侧栏导航与常见系统管理页的交互演示，便于在此基础上对接真实接口。

## 技术栈

| 类别 | 说明 |
|------|------|
| 框架 | [Vue 3](https://vuejs.org/)（`<script setup>` + Composition API） |
| 构建 | [Vite](https://vite.dev/) |
| 语言 | [TypeScript](https://www.typescriptlang.org/) |
| 样式 | [Tailwind CSS v4](https://tailwindcss.com/) + [@tailwindcss/vite](https://tailwindcss.com/docs/installation/using-vite) |
| 组件主题 | [DaisyUI 5](https://daisyui.com/) |
| 状态 | [Pinia](https://pinia.vuejs.org/) |
| 路由 | [Vue Router](https://router.vuejs.org/) |
| HTTP | [Axios](https://axios-http.com/) |
| 包管理 | 建议使用 [pnpm](https://pnpm.io/) |

## 功能概览

- **布局**：抽屉式侧栏（`AdminLayout`）、顶栏、面包屑、多页签（`KeepAlive` + Pinia `pageTabs`）。
- **认证**：登录页；未接后端时为**演示登录**（任意账号密码均可进入，见 `src/api/auth.ts`）；配置 `VITE_API_BASE_URL` 后走真实 `login` 接口。
- **控制台**：指标卡、系统管理快捷入口、近期动态（演示数据）。
- **系统管理**（侧栏分组）：用户、角色、菜单、字典；列表页含查询区、表格、弹窗 CRUD（当前多为前端演示数据）。
- **菜单管理**：树形列表、路由名 / 图标 / 权限、目录下「子项」快捷新建等。
- **页签**：右键菜单（刷新、关闭当前 / 左 / 右 / 其它 / 全部）；与 `src/config/nav.ts` 中的叶子路由对齐。

## 环境要求

- **Node.js**：**20+**（与 `package.json` 中 `engines` 一致）。
- **pnpm**：`corepack enable pnpm` 或全局安装。

## 快速开始

```bash
pnpm install
cp .env.example .env
pnpm dev
```

浏览器访问终端提示的本地地址（默认多为 `http://localhost:5173`）。路由进入 `/login`，演示登录成功后进入控制台。

## 脚本

| 命令 | 说明 |
|------|------|
| `pnpm dev` | 开发服务器（HMR） |
| `pnpm build` | 解决方案级 `vue-tsc -b` + 生产构建 |
| `pnpm typecheck` | 仅对 `src` 做类型检查（不产出文件，适合 CI / 提交前） |
| `pnpm preview` | 本地预览 `dist`（需先 `pnpm build`） |

## 环境变量

复制 [`.env.example`](./.env.example) 为 `.env`：

| 变量 | 说明 |
|------|------|
| `VITE_API_BASE_URL` | **留空**：Axios `baseURL` 为 `/api`，开发时由 Vite 代理；登录走演示逻辑。**填写**完整 URL（如 `https://api.example.com`）时请求直达该域名（注意生产 CORS 与 HTTPS）。 |

开发代理见 [`vite.config.ts`](./vite.config.ts)：将 `/api` 转发到 `http://localhost:3000` 并去掉路径前缀 `/api`，便于本地后端监听根路径。**生产环境无此代理**，需 Nginx / 网关同源转发或正确配置跨域。

## 目录结构（摘要）

```
src/
├── api/              # http 实例、登录等
├── components/
│   ├── app/          # AppSearchForm、AppDataTable、DatePicker（单选/多选/范围）
│   ├── icons/        # IconOutline
│   └── layout/       # 侧栏、顶栏、页签、面包屑
├── config/nav.ts     # 侧栏树 + adminNavFlatLeaves（页签 / KeepAlive）
├── constants/        # 本地存储键等
├── layouts/          # AdminLayout
├── router/
├── stores/           # auth、pageTabs
├── style.css
├── views/
│   └── system/       # 角色、菜单、字典
└── main.ts
```

## 页面与路由关系（简图）

```mermaid
flowchart LR
  subgraph shell [AdminLayout]
    TB[顶栏 + 面包屑]
    PT[页签栏]
    RV[RouterView + KeepAlive]
  end
  Login[LoginView] -->|鉴权通过| shell
  shell --> Dash[控制台]
  shell --> Users[用户管理]
  shell --> Sys[系统管理子页]
```

## DatePicker（`src/components/app/DatePicker.vue`）

不依赖 PrimeVue，交互对齐其 **selectionMode** 思路：

| `selection-mode` | `v-model` 类型 | 说明 |
|------------------|----------------|------|
| `single`（默认） | `string \| null` | `YYYY-MM-DD`，选后默认关闭面板（可用 `auto-close-on-single` 关闭） |
| `multiple` | `string[]` | 多天，点击切换选中；面板保持打开 |
| `range` | `{ start, end } \| null` | 两次点击定界，自动按日期排序；再点一天可重新选范围 |

可选：`min-date` / `max-date`（`YYYY-MM-DD`）、`placeholder`、`disabled`、`invalid`、`show-icon`。日历工具函数见 [`src/utils/calendar.ts`](./src/utils/calendar.ts)。专页演示：路由 `/demo/date-picker`（侧栏 **系统管理 → DatePicker 测试**），源码 [`src/views/DatePickerDemoView.vue`](./src/views/DatePickerDemoView.vue)。

## 定制与扩展

1. **导航与页签**：改 [`src/config/nav.ts`](./src/config/nav.ts)；新增叶子菜单需在 [`src/router/index.ts`](./src/router/index.ts) 注册路由。
2. **KeepAlive**：页面组件使用 `defineOptions({ name: 'XxxView' })`，并在 [`src/stores/pageTabs.ts`](./src/stores/pageTabs.ts) 的 `routeNameToKeepAliveName` 中建立 `路由 name → 组件 name` 映射。
3. **主题**：`index.html` 根节点 `data-theme`（如 `light`）；深色可在布局层切换并同步 `data-theme`，表单聚焦等见 [`src/style.css`](./src/style.css)。
4. **HTTP**：统一使用 [`src/api/http.ts`](./src/api/http.ts) 的 `http`；响应 401 会清理 token 并跳转登录。

## 常见问题

| 现象 | 处理 |
|------|------|
| 登录后接口 404 | 开发环境确认后端是否在 `localhost:3000`，或修改 `vite.config.ts` 的 `proxy`。 |
| 生产环境调不通 API | 设置 `VITE_API_BASE_URL` 为实际网关地址，并配置 CORS 或同源反代。 |
| 新页面不出现在页签 | 路由 `name` 须出现在 `nav.ts` 的 `adminNavFlatLeaves()` 结果中。 |
| `pnpm build` 类型报错 | 先执行 `pnpm typecheck` 定位文件；注意未使用的变量/参数（`tsconfig` 中已开启严格检查）。 |

## 推荐开发体验

- 编辑器安装 [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar)（原 Volar），禁用旧版 Vetur。
- 提交前：`pnpm typecheck` 与 `pnpm build` 至少跑其一。

## 生产部署

1. 设置环境变量并执行 `pnpm build`，产物在 `dist/`。
2. 将 `dist` 作为静态资源由 Nginx / OSS / CDN 托管；**所有前端路由**需回退到 `index.html`（SPA `try_files` 或等价配置）。
3. 若接口与站点不同源，配置反向代理或 CORS，勿把密钥写进仓库（`.env` 已列入 [`.gitignore`](./.gitignore)）。

## 许可证

本项目为私有演示工程（`package.json` 中 `"private": true`），未附带开源许可证。对外分发前请自行补充协议与合规说明。