video_ca/PAGE_OPTIMIZATION_GUIDE.md

页面布局优化指南

已优化的页面

• CIDList.vue ✓
• UserList.vue ✓
• DeviceList.vue ✓

优化模式

所有页面都应该遵循以下布局模式：

1. 导入图标组件

import { Refresh, Plus, Edit, Delete } from "@element-plus/icons-vue";

export default {
  components: {
    Refresh,
    Plus,
    Edit,
    Delete
  }
}

2. 模板结构

<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. 样式

<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. ✅ 充分利用页面空间，消除右侧空白