|
|
# VBase 前端界面设计文档
|
|
|
|
|
|
本文档基于 `vigo`/`vhtml` 框架，根据后端设计 (`docs/design.md`) 规划前端界面架构与组件设计。
|
|
|
|
|
|
## 1. 目录结构规范
|
|
|
|
|
|
遵循 `vhtml` 框架约定，建议采用以下目录结构：
|
|
|
|
|
|
```
|
|
|
/ui/
|
|
|
├── assets/ # 静态资源
|
|
|
│ ├── global.css # 全局样式 (Color vars, Reset)
|
|
|
│ └── ...
|
|
|
├── c/ # 业务特定组件 (尽量复用 vhtml-ui，仅存放业务强相关组件)
|
|
|
├── layout/ # 页面布局及局部组件
|
|
|
│ ├── default.html # 后台管理布局 (Sidebar + Header)
|
|
|
│ ├── public.html # 公共布局 (Login/Register, Center aligned)
|
|
|
│ ├── header.html # <layout-header>
|
|
|
│ └── sidebar.html # <layout-sidebar>
|
|
|
├── page/ # 页面路由组件
|
|
|
│ ├── auth/ # 认证模块
|
|
|
│ │ ├── login.html
|
|
|
│ │ └── register.html
|
|
|
│ ├── dashboard/ # 仪表盘
|
|
|
│ │ └── index.html
|
|
|
│ ├── sys/ # 系统管理 (User, OAuth)
|
|
|
│ │ ├── user/
|
|
|
│ │ │ ├── index.html # 用户列表
|
|
|
│ │ │ └── form.html # 用户创建/编辑
|
|
|
│ │ ├── oauth/
|
|
|
│ │ ├── index.html # 应用列表
|
|
|
│ │ └── form.html # 应用注册
|
|
|
│ ├── user/ # 个人中心
|
|
|
│ │ └── profile.html
|
|
|
│ ├── 404.html
|
|
|
│ └── 403.html
|
|
|
├── env.js # 全局环境配置 (Axios, Router guard)
|
|
|
├── routes.js # 路由定义
|
|
|
└── root.html # 根入口
|
|
|
```
|
|
|
|
|
|
## 2. 布局设计 (Layouts)
|
|
|
|
|
|
### 2.1 Public Layout (`layout/public.html`)
|
|
|
- **用途**: 登录、注册、404、403 等无需鉴权的页面。
|
|
|
- **结构**: 居中容器，背景简约，包含 Logo 和主体内容插槽。
|
|
|
|
|
|
### 2.2 Default Layout (`layout/default.html`)
|
|
|
- **用途**: 系统核心业务页面。
|
|
|
- **结构**:
|
|
|
- **Sidebar (Left)**: 导航菜单 (Dashboard, User, OAuth, Settings)。支持折叠。
|
|
|
- **Header (Top)**: 面包屑导航, 用户头像/下拉菜单 (Profile, Logout)。
|
|
|
- **Main Content**: 路由视图插槽 (`<router-view>`)。
|
|
|
|
|
|
## 3. 核心模块界面规划与权限
|
|
|
|
|
|
### 3.1 认证模块 (Auth)
|
|
|
- **权限**: 公开访问 (Guest)
|
|
|
- **登录页 (`/login`)**: 用户名/邮箱 + 密码。集成 OAuth2 第三方登录按钮。
|
|
|
- **注册页 (`/register`)**: 基本信息填写。
|
|
|
|
|
|
### 3.2 仪表盘 (Dashboard)
|
|
|
- **权限**: 登录用户 (Authenticated)
|
|
|
- **概览页 (`/`)**: 展示核心指标。
|
|
|
- **普通用户**: 可见个人相关数据概览。
|
|
|
- **管理员**: 可见整个系统的宏观数据。
|
|
|
|
|
|
### 3.3 用户管理 (User Module)
|
|
|
- **用户列表 (`/sys/user`)**:
|
|
|
- **权限**: 系统管理员 (System Admin Only)
|
|
|
- 全局用户管理表格，包含搜索、分页、禁用/启用用户功能。
|
|
|
- **个人资料 (`/profile`)**:
|
|
|
- **权限**: 登录用户 (Authenticated)
|
|
|
- 基本信息修改 (头像, 昵称)、账号安全 (修改密码, 绑定第三方账号)。
|
|
|
|
|
|
### 3.4 OAuth2 Provider (OAuth Module)
|
|
|
- **应用管理 (`/sys/oauth`)**:
|
|
|
- **权限**: 登录用户 (Authenticated)
|
|
|
- 开发者注册的 OAuth 应用列表。
|
|
|
- **创建/编辑应用**: 用户仅可管理自己创建的应用。
|
|
|
- **系统级应用**: 仅 **System Admin** 可见或管理系统预置应用。
|
|
|
|
|
|
## 4. 组件策略
|
|
|
|
|
|
### 4.1 基础组件库
|
|
|
使用 `vhtml-ui` 提供的基础组件：
|
|
|
- Button, Input, Select, Checkbox
|
|
|
- Table, Pagination
|
|
|
- Modal, Toast, Confirm
|
|
|
- Card, Badge, Tag
|
|
|
|
|
|
### 4.2 业务组件 (`ui/c/`)
|
|
|
- `<c-user-select>`: 用户选择器 (支持搜索)
|
|
|
- `<c-perm-tree>`: 权限树展示与编辑
|