146 lines
3.0 KiB
Markdown
146 lines
3.0 KiB
Markdown
# 页面布局优化指南
|
|
|
|
## 已优化的页面
|
|
- CIDList.vue ✓
|
|
- UserList.vue ✓
|
|
- DeviceList.vue ✓
|
|
|
|
## 优化模式
|
|
|
|
所有页面都应该遵循以下布局模式：
|
|
|
|
### 1. 导入图标组件
|
|
```javascript
|
|
import { Refresh, Plus, Edit, Delete } from "@element-plus/icons-vue";
|
|
|
|
export default {
|
|
components: {
|
|
Refresh,
|
|
Plus,
|
|
Edit,
|
|
Delete
|
|
}
|
|
}
|
|
```
|
|
|
|
### 2. 模板结构
|
|
```vue
|
|
<template>
|
|
<div class="page-container">
|
|
<el-card class="page-card" shadow="never">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<div class="header-left">
|
|
<span class="page-title">页面标题</span>
|
|
</div>
|
|
<div class="header-actions">
|
|
<el-button type="primary" @click="addDialogVisible = true" :icon="Plus">
|
|
添加
|
|
</el-button>
|
|
<el-button @click="getData()" :icon="Refresh">
|
|
刷新
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="table-wrapper">
|
|
<el-table :data="tableData" style="width: 100%" stripe>
|
|
<el-table-column prop="ID" label="ID" width="80"></el-table-column>
|
|
<el-table-column prop="Name" label="名称" min-width="150"></el-table-column>
|
|
<!-- 更多列... -->
|
|
<el-table-column label="操作" width="280" fixed="right">
|
|
<template #default="scope">
|
|
<el-button type="primary" size="small" @click="edit(scope.$index)" :icon="Edit">
|
|
编辑
|
|
</el-button>
|
|
<el-button type="danger" size="small" @click="delete(scope.$index)" :icon="Delete">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</el-card>
|
|
|
|
<!-- 对话框... -->
|
|
</div>
|
|
</template>
|
|
```
|
|
|
|
### 3. 样式
|
|
```vue
|
|
<style scoped>
|
|
.page-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.page-card {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: none;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.page-card :deep(.el-card__body) {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding: 20px;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.table-wrapper {
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.table-wrapper :deep(.el-table) {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
## 待优化的页面列表
|
|
- VideoList.vue
|
|
- FileList.vue
|
|
- ShellList.vue
|
|
- CIDLog.vue
|
|
- Group.vue
|
|
- Chat.vue
|
|
- Im.vue
|
|
- 其他 views/ 目录下的页面
|
|
|
|
## 优化要点
|
|
1. ✅ 使用 el-card 包裹整个页面
|
|
2. ✅ 标题和操作按钮放在卡片头部
|
|
3. ✅ 表格使用 min-width 自适应宽度
|
|
4. ✅ 操作按钮添加图标
|
|
5. ✅ 对话框样式优化
|
|
6. ✅ 移除旧的 Menu 组件引用
|
|
7. ✅ 充分利用页面空间，消除右侧空白
|