Переглянути джерело

style(ui): 优化表格样式和布局宽度

- 调整表格列宽和最小宽度配置
- 修复固定列背景色问题
- 统一暗色模式表格头背景色
- 将布局宽度从100vw改为100%防止水平滚动
piks 5 днів тому
батько
коміт
30fe4371cc
4 змінених файлів з 40 додано та 13 видалено
  1. 1 1
      src/layout/index.vue
  2. 26 0
      src/styles/element.scss
  3. 2 1
      src/styles/theme.scss
  4. 11 11
      src/views/sdk/index.vue

+ 1 - 1
src/layout/index.vue

@@ -24,7 +24,7 @@ const sidebarWidth = computed(() => appStore.sidebarCollapsed ? '64px' : '300px'
 .app-wrapper {
   --sidebar-width: 300px;
   display: grid;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   grid-template-columns: var(--sidebar-width) 1fr;
   grid-template-rows: 88px 1fr;

+ 26 - 0
src/styles/element.scss

@@ -56,6 +56,32 @@
   .el-table__fixed-header-wrapper {
     th {
       background: var(--admin-table-header-bg);
+      white-space: nowrap;
+    }
+  }
+  
+  // 修复固定列背景色透明问题
+  .el-table__fixed,
+  .el-table__fixed-right {
+    background-color: var(--el-bg-color);
+    
+    // 固定列表头背景色
+    .el-table__fixed-header-wrapper {
+      th {
+        background: var(--admin-table-header-bg);
+      }
+    }
+    
+    // 固定列单元格背景色
+    .el-table__body-wrapper {
+      td {
+        background-color: var(--el-bg-color);
+      }
+      
+      // 条纹样式
+      .el-table__row--striped td {
+        background-color: var(--el-fill-color-light);
+      }
     }
   }
 }

+ 2 - 1
src/styles/theme.scss

@@ -31,6 +31,7 @@
   --admin-text-primary: #303133;
   --admin-text-secondary: #909399;
   --admin-border-color: #e4e7ed;
+  --admin-table-header-bg: #f5f7fa;
 }
 
 // ========== 暗色模式 ==========
@@ -65,7 +66,7 @@ html.dark {
   --admin-text-primary: #e5eaf3;
   --admin-text-secondary: #a3a6ad;
   --admin-border-color: rgba(255, 255, 255, 0.1);
-  --admin-table-header-bg: rgba(217, 217, 217, 0.1);
+  --admin-table-header-bg: #1d1e1f;
 }
 
 // 全局平滑过渡(主题切换时)

+ 11 - 11
src/views/sdk/index.vue

@@ -70,18 +70,18 @@ const options = [
 const columns = [
   { type: 'selection' as const, width: 55 },
   { prop: 'name', label: '实例唯一标识', minWidth: 120 },
-  { prop: 'userId', label: '所属用户', minWidth: 100 },
-  { prop: 'address', label: '实例名称', minWidth: 100 },
-  { prop: 'expireTime', label: '到期时间', minWidth: 120 },
-  { prop: 'instanceType', label: '实例类型', minWidth: 100 },
-  { prop: 'status', label: '状态', minWidth: 80 },
-  { prop: 'noHeartbeat', label: '无心跳通讯', minWidth: 100 },
-  { prop: 'noDataTimeout', label: '无数据超时时间', minWidth: 120 },
-  { prop: 'enableLTS', label: '是否启用LTS', minWidth: 110 },
-  { prop: 'autoReconnect', label: '断线自动重连', minWidth: 110 },
-  { prop: 'maxConcurrent', label: '客户端最大并发数', minWidth: 130 },
+  { prop: 'userId', label: '所属用户', },
+  { prop: 'address', label: '实例名称', },
+  { prop: 'expireTime', label: '到期时间', },
+  { prop: 'instanceType', label: '实例类型', },
+  { prop: 'status', label: '状态', },
+  { prop: 'noHeartbeat', label: '无心跳通讯', minWidth: 120 },
+  { prop: 'noDataTimeout', label: '无数据超时时间', minWidth: 130 },
+  { prop: 'enableLTS', label: '是否启用LTS', minWidth: 120 },
+  { prop: 'autoReconnect', label: '断线自动重连', minWidth: 120 },
+  { prop: 'maxConcurrent', label: '客户端最大并发数', minWidth: 150 },
   { prop: 'createTime', label: '创建时间', minWidth: 150 },
-  { prop: 'operation', label: '操作', minWidth: 240, isAction: true }
+  { prop: 'operation', label: '操作', minWidth: 280, isAction: true }
 ]
 
 const tableData = ref([