# 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>`: 权限树展示与编辑
