From 4cc36629a8635f5b77aafea19a6595bccbe9fffb Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Tue, 15 Apr 2025 23:31:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83=E8=B0=83=E6=95=B4=E5=92=8C=E5=B7=B2=E7=9F=A5?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dict/DictLabel.vue             |  54 ++++-----
 src/components/Dict/index.vue                 |  46 ++++----
 src/styles/index.scss                         | 104 ++++++++++++------
 src/views/codegen/index.vue                   |  58 +++++-----
 src/views/system/config/index.vue             |  75 ++++++-------
 src/views/system/dept/index.vue               |  93 ++++++++--------
 src/views/system/dict/index.vue               |  55 ++++-----
 src/views/system/log/index.vue                |  72 ++++++------
 src/views/system/menu/index.vue               |  69 ++++++------
 .../system/notice/components/MyNotice.vue     |  65 ++++++-----
 src/views/system/notice/index.vue             | 100 ++++++++---------
 src/views/system/role/index.vue               |  55 ++++-----
 src/views/system/user/index.vue               |  97 ++++++++--------
 13 files changed, 474 insertions(+), 469 deletions(-)

diff --git a/src/components/Dict/DictLabel.vue b/src/components/Dict/DictLabel.vue
index c0a2cfba..b68ee155 100644
--- a/src/components/Dict/DictLabel.vue
+++ b/src/components/Dict/DictLabel.vue
@@ -1,18 +1,9 @@
 <template>
-  <template v-if="Array.isArray(modelValue)">
-    <el-tag
-      v-for="(tag, index) in tagList"
-      :key="index"
-      :type="tag.tagType"
-      :size="tagSize"
-      class="me-1"
-    >
-      {{ tag.label }}
-    </el-tag>
+  <template v-if="tagType">
+    <el-tag :type="tagType" :size="tagSize">{{ label }}</el-tag>
   </template>
   <template v-else>
-    <el-tag v-if="tagType" :type="tagType" :size="tagSize">{{ label }}</el-tag>
-    <span v-else>{{ label }}</span>
+    <span>{{ 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<TagType | undefined>(undefined);
+const tagType = ref<"success" | "warning" | "info" | "primary" | "danger" | 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),
-    tagType: dictItem?.tagType as TagType,
+    label: dictItem?.label || "",
+    tagType: dictItem?.tagType,
   };
 };
-
+/**
+ * 更新 label 和 tagType
+ */
 const updateLabelAndTag = async () => {
-  if (!props.code || props.modelValue === undefined || props.modelValue === null) return;
-
-  await dictStore.loadDictItems(props.code);
-
-  if (Array.isArray(props.modelValue)) {
-    const results = await Promise.all(
-      props.modelValue.map((val) => getLabelAndTagByValue(props.code!, val))
-    );
-    tagList.value = results;
-  } else {
-    const result = await getLabelAndTagByValue(props.code, props.modelValue);
-    label.value = result.label;
-    tagType.value = result.tagType as typeof tagType.value;
-  }
+  console.log("updateLabelAndTag", props.code, props.modelValue);
+  if (!props.code || props.modelValue === undefined) return;
+  const { label: newLabel, tagType: newTagType } = await getLabelAndTagByValue(
+    props.code,
+    props.modelValue
+  );
+  label.value = newLabel;
+  tagType.value = newTagType as typeof tagType.value;
 };
+
 watch([() => props.code, () => props.modelValue], updateLabelAndTag);
 
 onMounted(updateLabelAndTag);
diff --git a/src/components/Dict/index.vue b/src/components/Dict/index.vue
index 977d914a..14dbc9c7 100644
--- a/src/components/Dict/index.vue
+++ b/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) =>
-      ["select", "select-multiple", "radio", "checkbox"].includes(value),
+    validator: (value: string) => ["select", "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)
-    ? Array.isArray(props.modelValue)
+  typeof props.modelValue === "string" || typeof props.modelValue === "number"
+    ? props.modelValue
+    : Array.isArray(props.modelValue)
       ? props.modelValue
-      : []
-    : (props.modelValue ?? undefined)
+      : undefined
 );
 
-// 同步 selectedValue 与 props.modelValue
+// 监听 modelValue 和 options 的变化
 watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (["select-multiple", "checkbox"].includes(props.type)) {
-      selectedValue.value = Array.isArray(newValue) ? newValue : [];
+  [() => props.modelValue, () => options.value],
+  ([newValue, newOptions]) => {
+    if (newOptions.length > 0 && newValue !== undefined) {
+      if (props.type === "checkbox") {
+        selectedValue.value = Array.isArray(newValue) ? newValue : [];
+      } else {
+        const matchedOption = newOptions.find(
+          (option) => String(option.value) === String(newValue)
+        );
+        selectedValue.value = matchedOption?.value;
+      }
     } else {
-      selectedValue.value = newValue ?? undefined;
+      selectedValue.value = undefined;
     }
   },
   { immediate: true }
 );
 
-// selectedValue 改变时回传给父组件
+// 监听 selectedValue 的变化并触发 update:modelValue
 function handleChange(val: any) {
   emit("update:modelValue", val);
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f4e8c579..bf6a3b3b 100644
--- a/src/styles/index.scss
+++ b/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;
+  }
+}
diff --git a/src/views/codegen/index.vue b/src/views/codegen/index.vue
index ad089bdc..b0bc3667 100644
--- a/src/views/codegen/index.vue
+++ b/src/views/codegen/index.vue
@@ -1,48 +1,42 @@
 <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"
-                placeholder="表名"
-                clearable
-                @keyup.enter="handleQuery"
-              />
-            </el-form-item>
-          </el-col>
+        <el-form-item prop="keywords" label="关键字">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="表名"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
 
-          <div class="search-form-btn-box">
-            <div class="search-form-btn-box-item">
-              <el-form-item>
-                <el-button type="primary" @click="handleQuery">
-                  <template #icon>
-                    <Search />
-                  </template>
-                  搜索
-                </el-button>
-                <el-button @click="handleResetQuery">
-                  <template #icon>
-                    <Refresh />
-                  </template>
-                  重置
-                </el-button>
-              </el-form-item>
-            </div>
-          </div>
-        </el-row>
+        <el-form-item class="search-buttons">
+          <el-button type="primary" @click="handleQuery">
+            <template #icon>
+              <Search />
+            </template>
+            搜索
+          </el-button>
+          <el-button @click="handleResetQuery">
+            <template #icon>
+              <Refresh />
+            </template>
+            重置
+          </el-button>
+        </el-form-item>
       </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" />
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
index 8d5b82cd..bbb4f7b8 100644
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -1,50 +1,45 @@
 <!-- 系统配置 -->
 <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"
-                placeholder="请输入配置键\配置名称"
-                clearable
-                @keyup.enter="handleQuery"
-              />
-            </el-form-item>
-          </el-col>
+        <el-form-item label="关键字" prop="keywords">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="请输入配置键\配置名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
 
-          <div class="search-form-btn-box">
-            <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-item class="search-buttons">
+          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+        </el-form-item>
       </el-form>
     </div>
 
-    <el-card shadow="never">
-      <div class="mb-10px">
-        <el-button
-          v-hasPerm="['sys:config:add']"
-          type="success"
-          icon="plus"
-          @click="handleOpenDialog()"
-        >
-          新增
-        </el-button>
-        <el-button
-          v-hasPerm="['sys:config:refresh']"
-          color="#626aef"
-          icon="RefreshLeft"
-          @click="handleRefreshCache"
-        >
-          刷新缓存
-        </el-button>
+    <el-card shadow="hover" class="data-table">
+      <div class="data-table__toolbar">
+        <div class="data-table__toolbar--actions">
+          <el-button
+            v-hasPerm="['sys:config:add']"
+            type="success"
+            icon="plus"
+            @click="handleOpenDialog()"
+          >
+            新增
+          </el-button>
+          <el-button
+            v-hasPerm="['sys:config:refresh']"
+            color="#626aef"
+            icon="RefreshLeft"
+            @click="handleRefreshCache"
+          >
+            刷新缓存
+          </el-button>
+        </div>
       </div>
 
       <el-table
@@ -52,6 +47,8 @@
         v-loading="loading"
         :data="pageData"
         highlight-current-row
+        class="data-table__content"
+        border
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="index" label="序号" width="60" />
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 9e094f18..11197547 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,59 +1,53 @@
 <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"
-                placeholder="部门名称"
-                @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-option :value="1" label="正常" />
-                <el-option :value="0" label="禁用" />
-              </el-select>
-            </el-form-item>
-          </el-col>
+        <el-form-item label="关键字" prop="keywords">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="部门名称"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
 
-          <div class="search-form-btn-box">
-            <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-item label="部门状态" prop="status">
+          <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-form-item class="search-buttons">
+          <el-button class="filter-item" type="primary" icon="search" @click="handleQuery">
+            搜索
+          </el-button>
+          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+        </el-form-item>
       </el-form>
     </div>
 
-    <el-card shadow="never">
-      <div class="mb-10px">
-        <el-button
-          v-hasPerm="['sys:dept:add']"
-          type="success"
-          icon="plus"
-          @click="handleOpenDialog()"
-        >
-          新增
-        </el-button>
-        <el-button
-          v-hasPerm="['sys:dept:delete']"
-          type="danger"
-          :disabled="selectIds.length === 0"
-          icon="delete"
-          @click="handleDelete()"
-        >
-          删除
-        </el-button>
+    <el-card shadow="hover" class="data-table">
+      <div class="data-table__toolbar">
+        <div class="data-table__toolbar--actions">
+          <el-button
+            v-hasPerm="['sys:dept:add']"
+            type="success"
+            icon="plus"
+            @click="handleOpenDialog()"
+          >
+            新增
+          </el-button>
+          <el-button
+            v-hasPerm="['sys:dept:delete']"
+            type="danger"
+            :disabled="selectIds.length === 0"
+            icon="delete"
+            @click="handleDelete()"
+          >
+            删除
+          </el-button>
+        </div>
       </div>
 
       <el-table
@@ -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" />
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index e5be5296..8e90f54e 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,38 +1,38 @@
 <!-- 字典 -->
 <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"
-                placeholder="字典名称/编码"
-                clearable
-                @keyup.enter="handleQuery"
-              />
-            </el-form-item>
-          </el-col>
+        <el-form-item label="关键字" prop="keywords">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="字典名称/编码"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
 
-          <div class="search-form-btn-box">
-            <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-item class="search-buttons">
+          <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
+          <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
+        </el-form-item>
       </el-form>
     </div>
 
-    <el-card shadow="never">
-      <div class="mb-[10px]">
-        <el-button type="success" icon="plus" @click="handleAddClick()">新增</el-button>
-        <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
-          删除
-        </el-button>
+    <el-card shadow="hover" class="data-table">
+      <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>
+        </div>
       </div>
 
       <el-table
@@ -40,6 +40,7 @@
         highlight-current-row
         :data="tableData"
         border
+        class="data-table__content"
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" align="center" />
diff --git a/src/views/system/log/index.vue b/src/views/system/log/index.vue
index f76dc531..57555603 100644
--- a/src/views/system/log/index.vue
+++ b/src/views/system/log/index.vue
@@ -1,47 +1,45 @@
 <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"
-                placeholder="日志内容"
-                clearable
-                @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]"
-                type="daterange"
-                range-separator="~"
-                start-placeholder="开始时间"
-                end-placeholder="截止时间"
-                value-format="YYYY-MM-DD"
-              />
-            </el-form-item>
-          </el-col>
+        <el-form-item prop="keywords" label="关键字">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="日志内容"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
 
-          <div class="search-form-btn-box">
-            <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-item prop="createTime" label="操作时间">
+          <el-date-picker
+            v-model="queryParams.createTime"
+            :editable="false"
+            class="fixed-width-item-lg"
+            type="daterange"
+            range-separator="~"
+            start-placeholder="开始时间"
+            end-placeholder="截止时间"
+            value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+
+        <el-form-item class="search-buttons">
+          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+        </el-form-item>
       </el-form>
     </div>
 
-    <el-card shadow="never">
-      <el-table v-loading="loading" :data="pageData" highlight-current-row border>
+    <el-card shadow="hover" class="data-table">
+      <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" />
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 6841593a..4ef98d45 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,51 +1,48 @@
 <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"
-                placeholder="菜单名称"
-                clearable
-                @keyup.enter="handleQuery"
-              />
-            </el-form-item>
-          </el-col>
-          <div class="search-form-btn-box">
-            <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-item label="关键字" prop="keywords">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="菜单名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+
+        <el-form-item class="search-buttons">
+          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+        </el-form-item>
       </el-form>
     </div>
 
-    <el-card shadow="never">
-      <div class="mb-10px">
-        <el-button
-          v-hasPerm="['sys:menu:add']"
-          type="success"
-          icon="plus"
-          @click="handleOpenDialog('0')"
-        >
-          新增
-        </el-button>
+    <el-card shadow="hover" class="data-table">
+      <div class="data-table__toolbar">
+        <div class="data-table__toolbar--actions">
+          <el-button
+            v-hasPerm="['sys:menu:add']"
+            type="success"
+            icon="plus"
+            @click="handleOpenDialog('0')"
+          >
+            新增
+          </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 />
diff --git a/src/views/system/notice/components/MyNotice.vue b/src/views/system/notice/components/MyNotice.vue
index b877b6b5..a9cf7105 100644
--- a/src/views/system/notice/components/MyNotice.vue
+++ b/src/views/system/notice/components/MyNotice.vue
@@ -1,43 +1,42 @@
 <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"
-                placeholder="关键字"
-                clearable
-                @keyup.enter="handleQuery()"
-              />
-            </el-form-item>
-          </el-col>
+        <el-form-item label="通知标题" prop="title">
+          <el-input
+            v-model="queryParams.title"
+            placeholder="关键字"
+            clearable
+            @keyup.enter="handleQuery()"
+          />
+        </el-form-item>
 
-          <div class="search-form-btn-box">
-            <div class="search-form-btn-box-item">
-              <el-form-item>
-                <el-button type="primary" @click="handleQuery()">
-                  <template #icon>
-                    <Search />
-                  </template>
-                  搜索
-                </el-button>
-                <el-button @click="handleResetQuery()">
-                  <template #icon>
-                    <Refresh />
-                  </template>
-                  重置
-                </el-button>
-              </el-form-item>
-            </div>
-          </div>
-        </el-row>
+        <el-form-item class="search-buttons">
+          <el-button type="primary" @click="handleQuery()">
+            <template #icon>
+              <Search />
+            </template>
+            搜索
+          </el-button>
+          <el-button @click="handleResetQuery()">
+            <template #icon>
+              <Refresh />
+            </template>
+            重置
+          </el-button>
+        </el-form-item>
       </el-form>
     </div>
 
-    <el-card shadow="never">
-      <el-table ref="dataTableRef" v-loading="loading" :data="pageData" highlight-current-row>
+    <el-card shadow="hover" class="data-table">
+      <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">
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index dc53dd52..81cbc3de 100644
--- a/src/views/system/notice/index.vue
+++ b/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,65 +9,64 @@
         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"
-                placeholder="标题"
-                clearable
-                @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-option :value="0" label="未发布" />
-                <el-option :value="1" label="已发布" />
-                <el-option :value="-1" label="已撤回" />
-              </el-select>
-            </el-form-item>
-          </el-col>
+        <el-form-item label="标题" prop="title">
+          <el-input
+            v-model="queryParams.title"
+            placeholder="标题"
+            clearable
+            @keyup.enter="handleQuery()"
+          />
+        </el-form-item>
 
-          <div class="search-form-btn-box">
-            <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-item label="发布状态" prop="publishStatus">
+          <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-form-item class="search-buttons">
+          <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
+          <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
+        </el-form-item>
       </el-form>
     </div>
 
-    <el-card shadow="never" class="table-wrapper">
-      <template #header>
-        <el-button
-          v-hasPerm="['sys:notice:add']"
-          type="success"
-          icon="plus"
-          @click="handleOpenDialog()"
-        >
-          新增通知
-        </el-button>
-        <el-button
-          v-hasPerm="['sys:notice:delete']"
-          type="danger"
-          :disabled="selectIds.length === 0"
-          icon="delete"
-          @click="handleDelete()"
-        >
-          删除
-        </el-button>
-      </template>
+    <el-card shadow="hover" class="data-table">
+      <div class="data-table__toolbar">
+        <div class="data-table__toolbar--actions">
+          <el-button
+            v-hasPerm="['sys:notice:add']"
+            type="success"
+            icon="plus"
+            @click="handleOpenDialog()"
+          >
+            新增通知
+          </el-button>
+          <el-button
+            v-hasPerm="['sys:notice:delete']"
+            type="danger"
+            :disabled="selectIds.length === 0"
+            icon="delete"
+            @click="handleDelete()"
+          >
+            删除
+          </el-button>
+        </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" />
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index c64038d7..6a294113 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,37 +1,37 @@
 <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"
-                placeholder="角色名称"
-                clearable
-                @keyup.enter="handleQuery"
-              />
-            </el-form-item>
-          </el-col>
+        <el-form-item prop="keywords" label="关键字">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="角色名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
 
-          <div class="search-form-btn-box">
-            <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-item class="search-buttons">
+          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+        </el-form-item>
       </el-form>
     </div>
 
-    <el-card shadow="never">
-      <div class="mb-10px">
-        <el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
-        <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
-          删除
-        </el-button>
+    <el-card shadow="hover" class="data-table">
+      <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>
+        </div>
       </div>
 
       <el-table
@@ -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" />
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index f07fbd4d..fa77a297 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -9,58 +9,52 @@
 
       <!-- 用户列表 -->
       <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"
-                    placeholder="用户名/昵称/手机号"
-                    clearable
-                    @keyup.enter="handleQuery"
-                  />
-                </el-form-item>
-              </el-col>
+            <el-form-item label="关键字" prop="keywords">
+              <el-input
+                v-model="queryParams.keywords"
+                placeholder="用户名/昵称/手机号"
+                clearable
+                @keyup.enter="handleQuery"
+              />
+            </el-form-item>
 
-              <el-col :span="24" :md="12" :lg="6">
-                <el-form-item label="状态" prop="status">
-                  <el-select v-model="queryParams.status" placeholder="全部" clearable>
-                    <el-option label="正常" :value="1" />
-                    <el-option label="禁用" :value="0" />
-                  </el-select>
-                </el-form-item>
-              </el-col>
+            <el-form-item label="状态" prop="status">
+              <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 :span="24" :md="12" :lg="6">
-                <el-form-item label="创建时间">
-                  <el-date-picker
-                    v-model="queryParams.createTime"
-                    :editable="false"
-                    type="daterange"
-                    range-separator="~"
-                    start-placeholder="开始时间"
-                    end-placeholder="截止时间"
-                    value-format="YYYY-MM-DD"
-                  />
-                </el-form-item>
-              </el-col>
+            <el-form-item label="创建时间">
+              <el-date-picker
+                v-model="queryParams.createTime"
+                :editable="false"
+                type="daterange"
+                range-separator="~"
+                start-placeholder="开始时间"
+                end-placeholder="截止时间"
+                value-format="YYYY-MM-DD"
+              />
+            </el-form-item>
 
-              <div class="search-form-btn-box">
-                <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-item class="search-buttons">
+              <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+              <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+            </el-form-item>
           </el-form>
         </div>
 
-        <el-card shadow="never">
-          <div class="flex-x-between mb-10px">
-            <div>
+        <el-card shadow="hover" class="data-table">
+          <div class="data-table__toolbar">
+            <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>