refactor: ♻️ 代码规范调整和已知问题修复

src/components/Dict/DictLabel.vue

@@ -1,18 +1,9 @@
 <template>
-  <template v-if="Array.isArray(modelValue)">
+  <template v-if="tagType">
-    <el-tag
+    <el-tag :type="tagType" :size="tagSize">{{ label }}</el-tag>
-      v-for="(tag, index) in tagList"
-      :key="index"
-      :type="tag.tagType"
-      :size="tagSize"
-      class="me-1"
-    >
-      {{ tag.label }}
-    </el-tag>
   </template>
   <template v-else>
-    <el-tag v-if="tagType" :type="tagType" :size="tagSize">{{ label }}</el-tag>
+    <span>{{ label }}</span>
-    <span v-else>{{ label }}</span>
   </template>
 </template>
 <script setup lang="ts">
@@ -20,20 +11,16 @@ import { useDictStore } from "@/store";
 
 const props = defineProps({
   code: String, // 字典编码
-  modelValue: [String, Number, Array], // 字典项的值
+  modelValue: [String, Number], // 字典项的值
   size: {
     type: String,
     default: "default", // 标签大小
   },
 });
 const label = ref("");
-type TagType = "success" | "info" | "warning" | "danger" | "primary";
+const tagType = ref<"success" | "warning" | "info" | "primary" | "danger" | undefined>(); // 标签类型
-const tagType = ref<TagType | undefined>(undefined);
 const tagSize = ref<"default" | "large" | "small">(props.size as "default" | "large" | "small"); // 标签大小
 
-// 多个标签时使用
-const tagList = ref<Array<{ label: string; tagType?: TagType }>>([]);
-
 const dictStore = useDictStore();
 /**
  * 根据字典项的值获取对应的 label 和 tagType
@@ -49,27 +36,24 @@ const getLabelAndTagByValue = async (dictCode: string, value: any) => {
   // 查找对应的字典项
   const dictItem = dictItems.find((item) => item.value == value);
   return {
-    label: dictItem?.label || String(value),
+    label: dictItem?.label || "",
-    tagType: dictItem?.tagType as TagType,
+    tagType: dictItem?.tagType,
   };
 };
-
+/**
+ * 更新 label 和 tagType
+ */
 const updateLabelAndTag = async () => {
-  if (!props.code || props.modelValue === undefined || props.modelValue === null) return;
+  console.log("updateLabelAndTag", props.code, props.modelValue);
-
+  if (!props.code || props.modelValue === undefined) return;
-  await dictStore.loadDictItems(props.code);
+  const { label: newLabel, tagType: newTagType } = await getLabelAndTagByValue(
-
+    props.code,
-  if (Array.isArray(props.modelValue)) {
+    props.modelValue
-    const results = await Promise.all(
-      props.modelValue.map((val) => getLabelAndTagByValue(props.code!, val))
   );
-    tagList.value = results;
+  label.value = newLabel;
-  } else {
+  tagType.value = newTagType as typeof tagType.value;
-    const result = await getLabelAndTagByValue(props.code, props.modelValue);
-    label.value = result.label;
-    tagType.value = result.tagType as typeof tagType.value;
-  }
 };
+
 watch([() => props.code, () => props.modelValue], updateLabelAndTag);
 
 onMounted(updateLabelAndTag);

src/components/Dict/index.vue

@@ -1,11 +1,9 @@
 <template>
-  <!-- Select / Select-Multiple -->
   <el-select
-    v-if="['select', 'select-multiple'].includes(type)"
+    v-if="type === 'select'"
     v-model="selectedValue"
     :placeholder="placeholder"
     :disabled="disabled"
-    :multiple="type === 'select-multiple'"
     clearable
     :style="style"
     @change="handleChange"
@@ -18,7 +16,6 @@
     />
   </el-select>
 
-  <!-- Radio -->
   <el-radio-group
     v-else-if="type === 'radio'"
     v-model="selectedValue"
@@ -36,7 +33,6 @@
     </el-radio>
   </el-radio-group>
 
-  <!-- Checkbox -->
   <el-checkbox-group
     v-else-if="type === 'checkbox'"
     v-model="selectedValue"
@@ -56,7 +52,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
 import { useDictStore } from "@/store";
 
 const dictStore = useDictStore();
@@ -73,8 +68,7 @@ const props = defineProps({
   type: {
     type: String,
     default: "select",
-    validator: (value: string) =>
+    validator: (value: string) => ["select", "radio", "checkbox"].includes(value),
-      ["select", "select-multiple", "radio", "checkbox"].includes(value),
   },
   placeholder: {
     type: String,
@@ -86,7 +80,11 @@ const props = defineProps({
   },
   style: {
     type: Object,
-    default: () => ({ width: "300px" }),
+    default: () => {
+      return {
+        width: "300px",
+      };
+    },
   },
 });
 
@@ -94,29 +92,35 @@ const emit = defineEmits(["update:modelValue"]);
 
 const options = ref<Array<{ label: string; value: string | number }>>([]);
 
-// 动态初始化 selectedValue
 const selectedValue = ref<any>(
-  ["select-multiple", "checkbox"].includes(props.type)
+  typeof props.modelValue === "string" || typeof props.modelValue === "number"
-    ? Array.isArray(props.modelValue)
     ? props.modelValue
-      : []
+    : Array.isArray(props.modelValue)
-    : (props.modelValue ?? undefined)
+      ? props.modelValue
+      : undefined
 );
 
-// 同步 selectedValue 与 props.modelValue
+// 监听 modelValue 和 options 的变化
 watch(
-  () => props.modelValue,
+  [() => props.modelValue, () => options.value],
-  (newValue) => {
+  ([newValue, newOptions]) => {
-    if (["select-multiple", "checkbox"].includes(props.type)) {
+    if (newOptions.length > 0 && newValue !== undefined) {
+      if (props.type === "checkbox") {
         selectedValue.value = Array.isArray(newValue) ? newValue : [];
       } else {
-      selectedValue.value = newValue ?? undefined;
+        const matchedOption = newOptions.find(
+          (option) => String(option.value) === String(newValue)
+        );
+        selectedValue.value = matchedOption?.value;
+      }
+    } else {
+      selectedValue.value = undefined;
     }
   },
   { immediate: true }
 );
 
-// selectedValue 改变时回传给父组件
+// 监听 selectedValue 的变化并触发 update:modelValue
 function handleChange(val: any) {
   emit("update:modelValue", val);
 }

src/styles/index.scss

@@ -4,42 +4,76 @@
   padding: 15px;
 }
 
-.search-bar {
-  padding: 18px 18px 0;
-  margin-bottom: 15px;
-  background-color: var(--el-bg-color-overlay);
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 4px;
-  box-shadow: var(--el-box-shadow-light);
-
-  //搜索表单按钮组全局样式
-  .search-form-btn-box {
-    flex: 1;
-    padding-right: 13px;
-
-    .search-form-btn-box-item {
-      display: flex;
-      align-items: center;
-      justify-content: end;
-      width: 100%;
-    }
-  }
-
-  :deep(.el-form-item) {
-    width: 100% !important;
-  }
-
-  .el-form--inline .el-form-item {
-    display: flex !important;
-    margin-right: 0px !important;
-  }
-}
-
-.table-container > .el-card__header {
-  padding: calc(var(--el-card-padding) - 8px) var(--el-card-padding);
-}
-
 // 进度条颜色
 #nprogress .bar {
   background-color: var(--el-color-primary);
 }
+
+// 全局搜索区域样式
+.search-container {
+  padding: 18px 16px 0;
+  margin-bottom: 16px;
+  background-color: var(--el-bg-color-overlay);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 4px;
+
+  .search-buttons {
+    margin-right: 0;
+  }
+
+  .el-form-item {
+    margin-bottom: 18px;
+  }
+}
+
+// 表格区域样式 (BEM规范)
+.data-table {
+  margin-bottom: 16px;
+
+  // 表格工具栏区域
+  &__toolbar {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    &--actions,
+    &--tools {
+      display: flex;
+      gap: 8px;
+    }
+  }
+
+  // 表格内容区域
+  &__content {
+    margin: 8px 0;
+  }
+
+  // 分页区域
+  .el-pagination {
+    justify-content: flex-end;
+    margin-top: 16px;
+  }
+}
+
+// 抽屉和对话框底部按钮区域
+.dialog-footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding-top: 16px;
+}
+
+// 搜索表单固定宽度项
+.fixed-width-item {
+  &-sm {
+    width: 100px !important;
+  }
+
+  &-md {
+    width: 150px !important;
+  }
+
+  &-lg {
+    width: 200px !important;
+  }
+}

src/views/codegen/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="app-container">
-    <div class="search-bar">
+    <!-- 搜索区域 -->
+    <div class="search-container">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
-        <el-row :gutter="22">
-          <el-col :span="24" :md="12" :lg="6">
         <el-form-item prop="keywords" label="关键字">
           <el-input
             v-model="queryParams.keywords"
@@ -12,11 +11,8 @@
             @keyup.enter="handleQuery"
           />
         </el-form-item>
-          </el-col>
 
-          <div class="search-form-btn-box">
+        <el-form-item class="search-buttons">
-            <div class="search-form-btn-box-item">
-              <el-form-item>
           <el-button type="primary" @click="handleQuery">
             <template #icon>
               <Search />
@@ -30,19 +26,17 @@
             重置
           </el-button>
         </el-form-item>
-            </div>
-          </div>
-        </el-row>
       </el-form>
     </div>
 
-    <el-card shadow="never" class="table-container">
+    <el-card shadow="hover" class="table-card">
       <el-table
         ref="dataTableRef"
         v-loading="loading"
         :data="pageData"
         highlight-current-row
         border
+        class="data-table__content"
       >
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="表名" prop="tableName" min-width="100" />

src/views/system/config/index.vue

@@ -1,10 +1,9 @@
 <!-- 系统配置 -->
 <template>
   <div class="app-container">
-    <div class="search-bar">
+    <!-- 搜索区域 -->
+    <div class="search-container">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
-        <el-row :gutter="22">
-          <el-col :span="24" :md="12" :lg="6">
         <el-form-item label="关键字" prop="keywords">
           <el-input
             v-model="queryParams.keywords"
@@ -13,22 +12,17 @@
             @keyup.enter="handleQuery"
           />
         </el-form-item>
-          </el-col>
 
-          <div class="search-form-btn-box">
+        <el-form-item class="search-buttons">
-            <div class="search-form-btn-box-item">
-              <el-form-item>
           <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
           <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
         </el-form-item>
-            </div>
-          </div>
-        </el-row>
       </el-form>
     </div>
 
-    <el-card shadow="never">
+    <el-card shadow="hover" class="data-table">
-      <div class="mb-10px">
+      <div class="data-table__toolbar">
+        <div class="data-table__toolbar--actions">
           <el-button
             v-hasPerm="['sys:config:add']"
             type="success"
@@ -46,12 +40,15 @@
             刷新缓存
           </el-button>
         </div>
+      </div>
 
       <el-table
         ref="dataTableRef"
         v-loading="loading"
         :data="pageData"
         highlight-current-row
+        class="data-table__content"
+        border
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="index" label="序号" width="60" />

src/views/system/dept/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="app-container">
-    <div class="search-bar">
+    <!-- 搜索区域 -->
+    <div class="search-container">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
-        <el-row :gutter="22">
-          <el-col :span="24" :md="12" :lg="6">
         <el-form-item label="关键字" prop="keywords">
           <el-input
             v-model="queryParams.keywords"
@@ -11,32 +10,26 @@
             @keyup.enter="handleQuery"
           />
         </el-form-item>
-          </el-col>
+
-          <el-col :span="24" :md="12" :lg="6">
         <el-form-item label="部门状态" prop="status">
-              <el-select v-model="queryParams.status" placeholder="全部" clearable>
+          <el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 100px">
             <el-option :value="1" label="正常" />
             <el-option :value="0" label="禁用" />
           </el-select>
         </el-form-item>
-          </el-col>
 
-          <div class="search-form-btn-box">
+        <el-form-item class="search-buttons">
-            <div class="search-form-btn-box-item">
-              <el-form-item>
           <el-button class="filter-item" type="primary" icon="search" @click="handleQuery">
             搜索
           </el-button>
           <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
         </el-form-item>
-            </div>
-          </div>
-        </el-row>
       </el-form>
     </div>
 
-    <el-card shadow="never">
+    <el-card shadow="hover" class="data-table">
-      <div class="mb-10px">
+      <div class="data-table__toolbar">
+        <div class="data-table__toolbar--actions">
           <el-button
             v-hasPerm="['sys:dept:add']"
             type="success"
@@ -55,6 +48,7 @@
             删除
           </el-button>
         </div>
+      </div>
 
       <el-table
         v-loading="loading"
@@ -62,6 +56,7 @@
         row-key="id"
         default-expand-all
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        class="data-table__content"
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" align="center" />

src/views/system/dict/index.vue

@@ -1,10 +1,9 @@
 <!-- 字典 -->
 <template>
   <div class="app-container">
-    <div class="search-bar">
+    <!-- 搜索区域 -->
+    <div class="search-container">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-        <el-row :gutter="20">
-          <el-col :span="24" :md="12" :lg="6">
         <el-form-item label="关键字" prop="keywords">
           <el-input
             v-model="queryParams.keywords"
@@ -13,33 +12,35 @@
             @keyup.enter="handleQuery"
           />
         </el-form-item>
-          </el-col>
 
-          <div class="search-form-btn-box">
+        <el-form-item class="search-buttons">
-            <div class="search-form-btn-box-item">
-              <el-form-item>
           <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
           <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
         </el-form-item>
-            </div>
-          </div>
-        </el-row>
       </el-form>
     </div>
 
-    <el-card shadow="never">
+    <el-card shadow="hover" class="data-table">
-      <div class="mb-[10px]">
+      <div class="data-table__toolbar">
+        <div class="data-table__toolbar--actions">
           <el-button type="success" icon="plus" @click="handleAddClick()">新增</el-button>
-        <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
+          <el-button
+            type="danger"
+            :disabled="ids.length === 0"
+            icon="delete"
+            @click="handleDelete()"
+          >
             删除
           </el-button>
         </div>
+      </div>
 
       <el-table
         v-loading="loading"
         highlight-current-row
         :data="tableData"
         border
+        class="data-table__content"
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" align="center" />

src/views/system/log/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="app-container">
-    <div class="search-bar">
+    <!-- 搜索区域 -->
+    <div class="search-container">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-        <el-row :gutter="22">
-          <el-col :span="24" :md="12" :lg="6">
         <el-form-item prop="keywords" label="关键字">
           <el-input
             v-model="queryParams.keywords"
@@ -12,13 +11,12 @@
             @keyup.enter="handleQuery"
           />
         </el-form-item>
-          </el-col>
+
-          <el-col :span="24" :md="12" :lg="6">
         <el-form-item prop="createTime" label="操作时间">
           <el-date-picker
             v-model="queryParams.createTime"
             :editable="false"
-                class="!w-[240px]"
+            class="fixed-width-item-lg"
             type="daterange"
             range-separator="~"
             start-placeholder="开始时间"
@@ -26,22 +24,22 @@
             value-format="YYYY-MM-DD"
           />
         </el-form-item>
-          </el-col>
 
-          <div class="search-form-btn-box">
+        <el-form-item class="search-buttons">
-            <div class="search-form-btn-box-item">
-              <el-form-item>
           <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
           <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
         </el-form-item>
-            </div>
-          </div>
-        </el-row>
       </el-form>
     </div>
 
-    <el-card shadow="never">
+    <el-card shadow="hover" class="data-table">
-      <el-table v-loading="loading" :data="pageData" highlight-current-row border>
+      <el-table
+        v-loading="loading"
+        :data="pageData"
+        highlight-current-row
+        border
+        class="data-table__content"
+      >
         <el-table-column label="操作时间" prop="createTime" width="180" />
         <el-table-column label="操作人" prop="operator" width="120" />
         <el-table-column label="日志模块" prop="module" width="100" />

src/views/system/menu/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="app-container">
-    <div class="search-bar">
+    <!-- 搜索区域 -->
+    <div class="search-container">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
-        <el-row :gutter="22">
-          <el-col :span="24" :md="12" :lg="6">
         <el-form-item label="关键字" prop="keywords">
           <el-input
             v-model="queryParams.keywords"
@@ -12,21 +11,17 @@
             @keyup.enter="handleQuery"
           />
         </el-form-item>
-          </el-col>
+
-          <div class="search-form-btn-box">
+        <el-form-item class="search-buttons">
-            <div class="search-form-btn-box-item">
-              <el-form-item>
           <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
           <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
         </el-form-item>
-            </div>
-          </div>
-        </el-row>
       </el-form>
     </div>
 
-    <el-card shadow="never">
+    <el-card shadow="hover" class="data-table">
-      <div class="mb-10px">
+      <div class="data-table__toolbar">
+        <div class="data-table__toolbar--actions">
           <el-button
             v-hasPerm="['sys:menu:add']"
             type="success"
@@ -36,16 +31,18 @@
             新增
           </el-button>
         </div>
+      </div>
 
       <el-table
+        ref="dataTableRef"
         v-loading="loading"
-        :data="menuTableData"
-        highlight-current-row
         row-key="id"
+        :data="menuTableData"
         :tree-props="{
           children: 'children',
           hasChildren: 'hasChildren',
         }"
+        class="data-table__content"
         @row-click="handleRowClick"
       >
         <el-table-column label="菜单名称" min-width="200">
@@ -282,11 +279,11 @@
               始终显示
               <el-tooltip placement="bottom" effect="light">
                 <template #content>
-                  选择“是”，即使目录或菜单下只有一个子节点，也会显示父节点。
+                  选择"是"，即使目录或菜单下只有一个子节点，也会显示父节点。
                   <br />
-                  选择“否”，如果目录或菜单下只有一个子节点，则只显示该子节点，隐藏父节点。
+                  选择"否"，如果目录或菜单下只有一个子节点，则只显示该子节点，隐藏父节点。
                   <br />
-                  如果是叶子节点，请选择“否”。
+                  如果是叶子节点，请选择"否"。
                 </template>
                 <el-icon class="ml-1 cursor-pointer">
                   <QuestionFilled />

src/views/system/notice/components/MyNotice.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="app-container">
-    <div class="search-bar">
+    <!-- 搜索区域 -->
+    <div class="search-container">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-        <el-row :gutter="22">
-          <el-col :span="24" :md="12" :lg="6">
         <el-form-item label="通知标题" prop="title">
           <el-input
             v-model="queryParams.title"
@@ -12,11 +11,8 @@
             @keyup.enter="handleQuery()"
           />
         </el-form-item>
-          </el-col>
 
-          <div class="search-form-btn-box">
+        <el-form-item class="search-buttons">
-            <div class="search-form-btn-box-item">
-              <el-form-item>
           <el-button type="primary" @click="handleQuery()">
             <template #icon>
               <Search />
@@ -30,14 +26,17 @@
             重置
           </el-button>
         </el-form-item>
-            </div>
-          </div>
-        </el-row>
       </el-form>
     </div>
 
-    <el-card shadow="never">
+    <el-card shadow="hover" class="data-table">
-      <el-table ref="dataTableRef" v-loading="loading" :data="pageData" highlight-current-row>
+      <el-table
+        ref="dataTableRef"
+        v-loading="loading"
+        :data="pageData"
+        highlight-current-row
+        class="data-table__content"
+      >
         <el-table-column type="index" label="序号" width="60" />
         <el-table-column label="通知标题" prop="title" min-width="200" />
         <el-table-column align="center" label="通知类型" width="150">

src/views/system/notice/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="app-container">
-    <div class="search-bar">
+    <!-- 搜索区域 -->
+    <div class="search-container">
       <el-form
         ref="queryFormRef"
         :model="queryParams"
@@ -8,8 +9,6 @@
         label-suffix=":"
         label-width="auto"
       >
-        <el-row :gutter="22">
-          <el-col :span="24" :md="12" :lg="6">
         <el-form-item label="标题" prop="title">
           <el-input
             v-model="queryParams.title"
@@ -18,31 +17,30 @@
             @keyup.enter="handleQuery()"
           />
         </el-form-item>
-          </el-col>
+
-          <el-col :span="24" :md="12" :lg="6">
         <el-form-item label="发布状态" prop="publishStatus">
-              <el-select v-model="queryParams.publishStatus" clearable placeholder="全部">
+          <el-select
+            v-model="queryParams.publishStatus"
+            clearable
+            placeholder="全部"
+            style="width: 100px"
+          >
             <el-option :value="0" label="未发布" />
             <el-option :value="1" label="已发布" />
             <el-option :value="-1" label="已撤回" />
           </el-select>
         </el-form-item>
-          </el-col>
 
-          <div class="search-form-btn-box">
+        <el-form-item class="search-buttons">
-            <div class="search-form-btn-box-item">
-              <el-form-item>
           <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
           <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
         </el-form-item>
-            </div>
-          </div>
-        </el-row>
       </el-form>
     </div>
 
-    <el-card shadow="never" class="table-wrapper">
+    <el-card shadow="hover" class="data-table">
-      <template #header>
+      <div class="data-table__toolbar">
+        <div class="data-table__toolbar--actions">
           <el-button
             v-hasPerm="['sys:notice:add']"
             type="success"
@@ -60,13 +58,15 @@
           >
             删除
           </el-button>
-      </template>
+        </div>
+      </div>
 
       <el-table
         ref="dataTableRef"
         v-loading="loading"
         :data="pageData"
         highlight-current-row
+        class="data-table__content"
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" align="center" />

src/views/system/role/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="app-container">
-    <div class="search-bar">
+    <!-- 搜索区域 -->
+    <div class="search-container">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
-        <el-row :gutter="22">
-          <el-col :span="24" :md="12" :lg="6">
         <el-form-item prop="keywords" label="关键字">
           <el-input
             v-model="queryParams.keywords"
@@ -12,27 +11,28 @@
             @keyup.enter="handleQuery"
           />
         </el-form-item>
-          </el-col>
 
-          <div class="search-form-btn-box">
+        <el-form-item class="search-buttons">
-            <div class="search-form-btn-box-item">
-              <el-form-item>
           <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
           <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
         </el-form-item>
-            </div>
-          </div>
-        </el-row>
       </el-form>
     </div>
 
-    <el-card shadow="never">
+    <el-card shadow="hover" class="data-table">
-      <div class="mb-10px">
+      <div class="data-table__toolbar">
+        <div class="data-table__toolbar--actions">
           <el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
-        <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
+          <el-button
+            type="danger"
+            :disabled="ids.length === 0"
+            icon="delete"
+            @click="handleDelete()"
+          >
             删除
           </el-button>
         </div>
+      </div>
 
       <el-table
         ref="dataTableRef"
@@ -40,6 +40,7 @@
         :data="roleList"
         highlight-current-row
         border
+        class="data-table__content"
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" align="center" />

src/views/system/user/index.vue

@@ -9,10 +9,9 @@
 
       <!-- 用户列表 -->
       <el-col :lg="20" :xs="24">
-        <div class="search-bar">
+        <!-- 搜索区域 -->
+        <div class="search-container">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
-            <el-row :gutter="22">
-              <el-col :span="24" :md="12" :lg="6">
             <el-form-item label="关键字" prop="keywords">
               <el-input
                 v-model="queryParams.keywords"
@@ -21,18 +20,19 @@
                 @keyup.enter="handleQuery"
               />
             </el-form-item>
-              </el-col>
 
-              <el-col :span="24" :md="12" :lg="6">
             <el-form-item label="状态" prop="status">
-                  <el-select v-model="queryParams.status" placeholder="全部" clearable>
+              <el-select
+                v-model="queryParams.status"
+                placeholder="全部"
+                clearable
+                style="width: 100px"
+              >
                 <el-option label="正常" :value="1" />
                 <el-option label="禁用" :value="0" />
               </el-select>
             </el-form-item>
-              </el-col>
 
-              <el-col :span="24" :md="12" :lg="6">
             <el-form-item label="创建时间">
               <el-date-picker
                 v-model="queryParams.createTime"
@@ -44,23 +44,17 @@
                 value-format="YYYY-MM-DD"
               />
             </el-form-item>
-              </el-col>
 
-              <div class="search-form-btn-box">
+            <el-form-item class="search-buttons">
-                <div class="search-form-btn-box-item">
-                  <el-form-item>
               <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
               <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
             </el-form-item>
-                </div>
-              </div>
-            </el-row>
           </el-form>
         </div>
 
-        <el-card shadow="never">
+        <el-card shadow="hover" class="data-table">
-          <div class="flex-x-between mb-10px">
+          <div class="data-table__toolbar">
-            <div>
+            <div class="data-table__toolbar--actions">
               <el-button
                 v-hasPerm="['sys:user:add']"
                 type="success"
@@ -79,7 +73,7 @@
                 删除
               </el-button>
             </div>
-            <div>
+            <div class="data-table__toolbar--tools">
               <el-button
                 v-hasPerm="'sys:user:import'"
                 icon="upload"
@@ -94,13 +88,20 @@
             </div>
           </div>
 
-          <el-table v-loading="loading" :data="pageData" @selection-change="handleSelectionChange">
+          <el-table
+            v-loading="loading"
+            :data="pageData"
+            border
+            stripe
+            highlight-current-row
+            class="data-table__content"
+            @selection-change="handleSelectionChange"
+          >
             <el-table-column type="selection" width="50" align="center" />
             <el-table-column label="用户名" prop="username" />
             <el-table-column label="昵称" width="150" align="center" prop="nickname" />
             <el-table-column label="性别" width="100" align="center">
               <template #default="scope">
-                <!-- 性别字典翻译 -->
                 <DictLabel v-model="scope.row.gender" code="gender" />
               </template>
             </el-table-column>