298 lines
6.1 KiB
Markdown
298 lines
6.1 KiB
Markdown
# 统一布局组件
|
||
|
||
为项目提供5种不同类型的布局组件，保持设计一致性和代码复用性。
|
||
|
||
## 布局组件类型
|
||
|
||
### 1. BasicLayout - 基础布局
|
||
最通用的布局组件，适用于大多数页面。
|
||
|
||
**特点：**
|
||
- 标准页面头部（标题 + 副标题）
|
||
- 灵活的内容区域
|
||
- 支持返回按钮和额外操作
|
||
|
||
**使用场景：**
|
||
- 列表页面
|
||
- 详情页面
|
||
- 数据统计页面
|
||
|
||
**示例：**
|
||
```vue
|
||
<template>
|
||
<BasicLayout
|
||
title="用户列表"
|
||
subtitle="管理系统中的所有用户"
|
||
:show-back="true"
|
||
@back="handleBack"
|
||
>
|
||
<template #extra>
|
||
<a-button type="primary">新增用户</a-button>
|
||
</template>
|
||
|
||
<a-table :columns="columns" :data-source="data" />
|
||
</BasicLayout>
|
||
</template>
|
||
```
|
||
|
||
### 2. CardLayout - 卡片布局
|
||
内容包装在卡片中，提供更好的视觉层次。
|
||
|
||
**特点：**
|
||
- Ant Design Card 容器
|
||
- 可配置的边距
|
||
- 灵活的标题栏
|
||
|
||
**使用场景：**
|
||
- 表单页面
|
||
- 配置页面
|
||
- 详情展示页面
|
||
|
||
**示例：**
|
||
```vue
|
||
<template>
|
||
<CardLayout
|
||
title="用户信息"
|
||
:show-back="true"
|
||
:show-padding="true"
|
||
>
|
||
<template #extra>
|
||
<a-button>编辑</a-button>
|
||
</template>
|
||
|
||
<a-form layout="vertical">
|
||
<a-form-item label="姓名">
|
||
<a-input v-model:value="form.name" />
|
||
</a-form-item>
|
||
</a-form>
|
||
</CardLayout>
|
||
</template>
|
||
```
|
||
|
||
### 3. TabLayout - 标签页布局
|
||
多标签页内容组织。
|
||
|
||
**特点：**
|
||
- 动态标签页
|
||
- 支持懒加载
|
||
- 自定义标签页内容
|
||
|
||
**使用场景：**
|
||
- 设置页面
|
||
- 数据对比
|
||
- 多模块内容
|
||
|
||
**示例：**
|
||
```vue
|
||
<template>
|
||
<TabLayout
|
||
:tabs="tabs"
|
||
v-model:active-key="activeKey"
|
||
@change="handleTabChange"
|
||
>
|
||
<template #tab1>
|
||
<div>标签页1内容</div>
|
||
</template>
|
||
|
||
<template #tab2>
|
||
<div>标签页2内容</div>
|
||
</template>
|
||
</TabLayout>
|
||
</template>
|
||
|
||
<script setup>
|
||
const tabs = ref([
|
||
{ key: 'tab1', tab: '基础信息', forceRender: true },
|
||
{ key: 'tab2', tab: '高级设置', forceRender: false }
|
||
])
|
||
</script>
|
||
```
|
||
|
||
### 4. FullWidthLayout - 全宽布局
|
||
充分利用屏幕宽度的布局。
|
||
|
||
**特点：**
|
||
- 全宽度内容
|
||
- 自定义头部
|
||
- 无卡片包装
|
||
|
||
**使用场景：**
|
||
- 数据可视化
|
||
- 宽屏内容展示
|
||
- 全屏应用
|
||
|
||
**示例：**
|
||
```vue
|
||
<template>
|
||
<FullWidthLayout :show-back="true">
|
||
<template #header>
|
||
<h2>数据分析仪表板</h2>
|
||
</template>
|
||
|
||
<template #extra>
|
||
<a-button-group>
|
||
<a-button>导出</a-button>
|
||
<a-button>刷新</a-button>
|
||
</a-button-group>
|
||
</template>
|
||
|
||
<div class="dashboard-grid">
|
||
<!-- 图表组件 -->
|
||
</div>
|
||
</FullWidthLayout>
|
||
</template>
|
||
```
|
||
|
||
### 5. FormLayout - 表单布局
|
||
专门用于表单页面。
|
||
|
||
**特点：**
|
||
- 居中的表单容器
|
||
- 内置提交/取消按钮
|
||
- 加载状态管理
|
||
|
||
**使用场景：**
|
||
- 创建/编辑页面
|
||
- 复杂表单
|
||
- 向导式表单
|
||
|
||
**示例：**
|
||
```vue
|
||
<template>
|
||
<FormLayout
|
||
title="创建用户"
|
||
:submit-loading="submitting"
|
||
@submit="handleSubmit"
|
||
@cancel="handleCancel"
|
||
>
|
||
<a-form layout="vertical">
|
||
<a-form-item label="姓名" required>
|
||
<a-input v-model:value="form.name" />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="邮箱" required>
|
||
<a-input v-model:value="form.email" />
|
||
</a-form-item>
|
||
</a-form>
|
||
</FormLayout>
|
||
</template>
|
||
```
|
||
|
||
## 设计特色
|
||
|
||
### 1. 统一的设计语言
|
||
- 使用项目的设计令牌（Design Tokens）
|
||
- 一致的颜色、字体、间距
|
||
- Notion 风格的标签页设计
|
||
|
||
### 2. 响应式设计
|
||
- 移动端友好
|
||
- 自适应布局
|
||
- 弹性内容区域
|
||
|
||
### 3. 可访问性
|
||
- 语义化 HTML
|
||
- 键盘导航支持
|
||
- 屏幕阅读器友好
|
||
|
||
### 4. 性能优化
|
||
- 懒加载支持
|
||
- keep-alive 兼容
|
||
- 轻量级实现
|
||
|
||
## 导入方式
|
||
|
||
```javascript
|
||
// 单独导入
|
||
import BasicLayout from '@/layouts/components/BasicLayout.vue'
|
||
import CardLayout from '@/layouts/components/CardLayout.vue'
|
||
import TabLayout from '@/layouts/components/TabLayout.vue'
|
||
import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
|
||
import FormLayout from '@/layouts/components/FormLayout.vue'
|
||
|
||
// 批量导入
|
||
import {
|
||
BasicLayout,
|
||
CardLayout,
|
||
TabLayout,
|
||
FullWidthLayout,
|
||
FormLayout
|
||
} from '@/layouts/components'
|
||
```
|
||
|
||
## Props 说明
|
||
|
||
### 通用 Props
|
||
|
||
| 属性 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| showBack | Boolean | false | 是否显示返回按钮 |
|
||
| title | String | '' | 页面标题 |
|
||
| subtitle | String | '' | 页面副标题 |
|
||
|
||
### TabLayout 特有 Props
|
||
|
||
| 属性 | 类型 | 必需 | 说明 |
|
||
|------|------|------|------|
|
||
| tabs | Array | 是 | 标签页配置数组 |
|
||
| activeKey | String | 否 | 当前激活的标签页 |
|
||
|
||
### FormLayout 特有 Props
|
||
|
||
| 属性 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| submitText | String | '提交' | 提交按钮文字 |
|
||
| cancelText | String | '取消' | 取消按钮文字 |
|
||
| showCancel | Boolean | true | 是否显示取消按钮 |
|
||
| submitLoading | Boolean | false | 提交按钮加载状态 |
|
||
|
||
## 插槽（Slots）
|
||
|
||
### 通用插槽
|
||
|
||
- `#extra` - 头部右侧额外操作区域
|
||
- `#header` - 自定义头部内容（某些布局）
|
||
|
||
### TabLayout 插槽
|
||
|
||
- `#tab1`, `#tab2`, ... - 标签页内容，名称为 tabs 中的 key
|
||
|
||
## 事件（Events）
|
||
|
||
### 通用事件
|
||
|
||
- `@back` - 点击返回按钮时触发
|
||
|
||
### TabLayout 事件
|
||
|
||
- `@change(key)` - 标签页切换时触发
|
||
|
||
### FormLayout 事件
|
||
|
||
- `@submit` - 点击提交按钮时触发
|
||
- `@cancel` - 点击取消按钮时触发
|
||
|
||
## 最佳实践
|
||
|
||
1. **选择合适的布局**
|
||
- 简单内容 → BasicLayout
|
||
- 需要卡片容器 → CardLayout
|
||
- 多标签内容 → TabLayout
|
||
- 宽屏内容 → FullWidthLayout
|
||
- 表单页面 → FormLayout
|
||
|
||
2. **保持一致性**
|
||
- 使用统一的设计令牌
|
||
- 遵循项目的设计规范
|
||
- 保持交互行为一致
|
||
|
||
3. **性能优化**
|
||
- 设置合适的 `forceRender` 属性
|
||
- 使用 `keep-alive` 缓存组件
|
||
- 避免不必要的重渲染
|
||
|
||
4. **可访问性**
|
||
- 为所有交互元素添加适当的标签
|
||
- 确保键盘导航正常工作
|
||
- 提供适当的焦点管理
|