You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

3.7 KiB

Raw Blame History Unescape Escape

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

3.7 KiB Raw Blame History Unescape Escape