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

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" />