From 9862f8bff8931ec02248c07f5866608f64dbde2b Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Wed, 28 May 2025 10:22:50 +0800
Subject: [PATCH] =?UTF-8?q?style(views):=20=E7=BB=9F=E4=B8=80=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E8=A1=A8=E5=8D=95=E6=A0=B7=E5=BC=8F=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为多个视图的搜索表单添加flex布局和一致的间距样式
- 调整表单内边距和元素间距，提升视觉一致性
- 移除部分视图中的重置按钮，简化搜索表单
- 为MQTT服务管理视图重构表格容器样式
---
 src/views/cabinet/mqtt-server/index.vue | 62 ++++++++++++-----
 src/views/cabinet/operation/index.vue   |  8 ++-
 src/views/shop/approval/index.vue       |  8 ++-
 src/views/shop/order/index.vue          |  9 ++-
 src/views/system/menu/index.vue         | 92 +++++--------------------
 src/views/user/ab98/index.vue           |  3 +-
 src/views/user/qy/index.vue             |  7 +-
 7 files changed, 88 insertions(+), 101 deletions(-)

diff --git a/src/views/cabinet/mqtt-server/index.vue b/src/views/cabinet/mqtt-server/index.vue
index 4c090e6..4a05f61 100644
--- a/src/views/cabinet/mqtt-server/index.vue
+++ b/src/views/cabinet/mqtt-server/index.vue
@@ -120,12 +120,12 @@ getList();
 <template>
   <div class="main">
     <el-form ref="formRef" :inline="true" :model="searchFormParams"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
-      <el-form-item label="服务地址：" prop="serverUrl">
+      class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
+      <el-form-item prop="serverUrl">
         <el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.serverUrl" placeholder="请输入服务地址" clearable
           class="!w-[200px]" />
       </el-form-item>
-      <el-form-item label="用户名：" prop="username">
+      <el-form-item prop="username">
         <el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.username" placeholder="请输入用户名" clearable
           class="!w-[200px]" />
       </el-form-item>
@@ -133,22 +133,17 @@ getList();
         <el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
           搜索
         </el-button>
-        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
-          重置
+      </el-form-item>
+      <el-form-item class="space-item">
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="modalVisible = true">
+          新增服务
         </el-button>
       </el-form-item>
     </el-form>
 
-    <PureTableBar title="MQTT服务管理" @refresh="getList">
-      <template #buttons>
-        <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="modalVisible = true">
-          新增服务
-        </el-button>
-        <el-button type="danger" :icon="useRenderIcon(Delete)" :disabled="multipleSelection.length === 0"
-          @click="handleBulkDelete">
-          批量删除
-        </el-button>
-      </template>
+    <div class="table-container">
       <el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="id"
         @selection-change="handleSelectionChange" border>
         <el-table-column type="selection" width="55" />
@@ -174,10 +169,41 @@ getList();
       </el-table>
       <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
         :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
-        @size-change="onSizeChange" @current-change="onCurrentChange" />
-    </PureTableBar>
+        @size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
+    </div>
     <MqttServerFormModal :visible="modalVisible" @update:visible="val => modalVisible = val" @refresh="handleRefresh" />
     <MqttServerFormModal :visible="editVisible" :row="currentRow" @update:visible="val => editVisible = val"
       @refresh="handleRefresh" />
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped lang="scss">
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+    margin-right: 12px;
+  }
+}
+.space-item {
+  flex: 1;
+  width: 100%;
+}
+.table-container {
+  margin-top: 8px;
+  background-color: var(--el-bg-color);
+  border-radius: 4px;
+  padding: 16px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+
+  .el-table {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .pagination {
+    margin-top: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/cabinet/operation/index.vue b/src/views/cabinet/operation/index.vue
index c9c114d..1d54db2 100644
--- a/src/views/cabinet/operation/index.vue
+++ b/src/views/cabinet/operation/index.vue
@@ -82,7 +82,7 @@ getList();
 <template>
   <div class="main">
     <el-form ref="formRef" :inline="true" :model="searchFormParams"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
+      class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
       <el-form-item prop="cellId">
         <el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.cellId" placeholder="请输入格口ID" clearable
           class="!w-[200px]" />
@@ -140,6 +140,12 @@ getList();
 </template>
 
 <style scoped lang="scss">
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+    margin-right: 12px;
+  }
+}
 .table-container {
   margin-top: 8px;
   background-color: var(--el-bg-color);
diff --git a/src/views/shop/approval/index.vue b/src/views/shop/approval/index.vue
index c2feefa..d8abef7 100644
--- a/src/views/shop/approval/index.vue
+++ b/src/views/shop/approval/index.vue
@@ -127,7 +127,7 @@ getList();
 <template>
   <div class="main">
     <el-form ref="formRef" :inline="true" :model="searchFormParams"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
+      class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
       <el-form-item>
         <el-date-picker v-model="searchFormParams.approvalTime" type="date" placeholder="选择审批时间"
           value-format="YYYY-MM-DD HH:mm:ss" class="!w-[200px]" />
@@ -274,6 +274,12 @@ getList();
 </template>
 
 <style scoped lang="scss">
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+    margin-right: 12px;
+  }
+}
 :deep(.el-image-viewer__wrapper) {
   z-index: 9999 !important;
 }
diff --git a/src/views/shop/order/index.vue b/src/views/shop/order/index.vue
index 1f6ce85..87f0629 100644
--- a/src/views/shop/order/index.vue
+++ b/src/views/shop/order/index.vue
@@ -129,7 +129,7 @@ getList();
     </div>
     <div class="flex-1">
       <el-form ref="formRef" :inline="true" :model="searchFormParams"
-        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
+        class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
         <!-- <el-form-item label="时间范围：">
         <el-date-picker v-model="searchFormParams.startTime" type="date" placeholder="开始时间"
           value-format="YYYY-MM-DD HH:mm:ss" class="!w-[200px]" />
@@ -253,6 +253,13 @@ getList();
 </template>
 
 <style scoped lang="scss">
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+    margin-right: 12px;
+  }
+}
+
 .right-btn {
   margin: 0;
 }
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 1ade801..6af3a37 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -30,103 +30,46 @@ const {
 
 <template>
   <div class="main">
-    <el-form
-      ref="formRef"
-      :inline="true"
-      :model="searchFormParams"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
-    >
-      <el-form-item label="菜单名称：" prop="menuName">
-        <el-input
-          v-model="searchFormParams.menuName"
-          placeholder="请输入菜单名称"
-          clearable
-          class="!w-[200px]"
-        />
+    <el-form ref="formRef" :inline="true" :model="searchFormParams"
+      class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
+      <el-form-item prop="menuName">
+        <el-input v-model="searchFormParams.menuName" placeholder="请输入菜单名称" clearable class="!w-[200px]" />
       </el-form-item>
-      <el-form-item label="状态：" prop="status">
-        <el-select
-          v-model="searchFormParams.status"
-          placeholder="请选择状态"
-          clearable
-          class="!w-[180px]"
-        >
+      <el-form-item prop="status">
+        <el-select v-model="searchFormParams.status" placeholder="请选择状态" clearable class="!w-[180px]">
           <el-option label="启用" :value="1" />
           <el-option label="停用" :value="0" />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button
-          type="primary"
-          :icon="useRenderIcon(Search)"
-          :loading="loading"
-          @click="onSearch"
-        >
+        <el-button type="primary" :icon="useRenderIcon(Search)" :loading="loading" @click="onSearch">
           搜索
         </el-button>
-        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
-          重置
-        </el-button>
       </el-form-item>
     </el-form>
 
-    <PureTableBar
-      title="菜单列表"
-      :columns="columns"
-      :tableRef="tableRef?.getTableRef()"
-      @refresh="onSearch"
-    >
+    <PureTableBar title="菜单列表" :columns="columns" :tableRef="tableRef?.getTableRef()" @refresh="onSearch">
       <template #buttons>
-        <el-button
-          type="primary"
-          :icon="useRenderIcon(AddFill)"
-          @click="openDialog()"
-        >
+        <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog()">
           新增菜单
         </el-button>
       </template>
       <template v-slot="{ size, dynamicColumns }">
-        <pure-table
-          ref="tableRef"
-          adaptive
-          :adaptiveConfig="{ offsetBottom: 32 }"
-          align-whole="center"
-          row-key="id"
-          showOverflowTooltip
-          table-layout="auto"
-          :loading="loading"
-          :size="size"
-          :data="dataList"
-          :columns="dynamicColumns"
-          :header-cell-style="{
+        <pure-table ref="tableRef" adaptive :adaptiveConfig="{ offsetBottom: 32 }" align-whole="center" row-key="id"
+          showOverflowTooltip table-layout="auto" :loading="loading" :size="size" :data="dataList"
+          :columns="dynamicColumns" :header-cell-style="{
             background: 'var(--el-table-row-hover-bg-color)',
             color: 'var(--el-text-color-primary)'
-          }"
-        >
+          }">
           <template #operation="{ row }">
-            <el-button
-              class="reset-margin"
-              link
-              type="primary"
-              :size="size"
-              :icon="useRenderIcon(EditPen)"
-              @click="openDialog('编辑', row)"
-            >
+            <el-button class="reset-margin" link type="primary" :size="size" :icon="useRenderIcon(EditPen)"
+              @click="openDialog('编辑', row)">
               编辑
             </el-button>
 
-            <el-popconfirm
-              :title="`是否确认删除菜单名称为${row.menuName}的这条数据`"
-              @confirm="handleDelete(row)"
-            >
+            <el-popconfirm :title="`是否确认删除菜单名称为${row.menuName}的这条数据`" @confirm="handleDelete(row)">
               <template #reference>
-                <el-button
-                  class="reset-margin"
-                  link
-                  type="danger"
-                  :size="size"
-                  :icon="useRenderIcon(Delete)"
-                >
+                <el-button class="reset-margin" link type="danger" :size="size" :icon="useRenderIcon(Delete)">
                   删除
                 </el-button>
               </template>
@@ -142,6 +85,7 @@ const {
 .search-form {
   :deep(.el-form-item) {
     margin-bottom: 12px;
+    margin-right: 12px;
   }
 }
 </style>
diff --git a/src/views/user/ab98/index.vue b/src/views/user/ab98/index.vue
index dc520ab..6296419 100644
--- a/src/views/user/ab98/index.vue
+++ b/src/views/user/ab98/index.vue
@@ -114,7 +114,7 @@ onMounted(() => {
   <div class="main">
     <div class="float-right w-full">
       <el-form ref="formRef" :inline="true" :model="searchFormParams"
-        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
+        class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
         <el-form-item prop="search">
           <el-input v-model="searchFormParams.search" placeholder="请输入姓名/手机号/身份证" clearable class="!w-[300px]"
             @keydown.enter.prevent="onSearch" @change="handleSearchInput" />
@@ -181,6 +181,7 @@ onMounted(() => {
 .search-form {
   :deep(.el-form-item) {
     margin-bottom: 12px;
+    margin-right: 12px;
   }
 }
 
diff --git a/src/views/user/qy/index.vue b/src/views/user/qy/index.vue
index 3ec61ce..c519848 100644
--- a/src/views/user/qy/index.vue
+++ b/src/views/user/qy/index.vue
@@ -50,17 +50,14 @@ watch(
       <div class="search-form-container">
         <el-form ref="formRef" :inline="true" :model="searchFormParams"
           class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
-          <el-form-item label="姓名：" prop="name">
-            <el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.name" placeholder="请输入" clearable
+          <el-form-item prop="name">
+            <el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.name" placeholder="请输入姓名" clearable
               class="!w-[160px]" />
           </el-form-item>
           <el-form-item>
             <el-button type="primary" :icon="useRenderIcon(Search)" :loading="pageLoading" @click="onSearch">
               搜索
             </el-button>
-            <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
-              重置
-            </el-button>
           </el-form-item>
         </el-form>