From 3f450cefe70e1f1142307f245790196055704466 Mon Sep 17 00:00:00 2001
From: 97 <1240438805@qq.com>
Date: Sat, 26 Apr 2025 14:39:40 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=95=8C=E9=9D=A2=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E3=80=91=E4=BC=98=E5=8C=96=E9=A1=B6=E9=83=A8=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=92=8Ctag=E5=9B=BA=E5=AE=9A=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BCtable=E9=AB=98=E5=BA=A6=E5=9B=BA=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TopTags/index.vue    |   2 +-
 frontend/src/layouts/basicLayout.vue         | 447 ++++++++++---------
 frontend/src/views/monitor/online/index.vue  |  32 +-
 frontend/src/views/system/dept/index.vue     |  20 +-
 frontend/src/views/system/dict/data.vue      |  30 +-
 frontend/src/views/system/dict/index.vue     |  29 +-
 frontend/src/views/system/job/index.vue      |  22 +-
 frontend/src/views/system/log/index.vue      |  31 +-
 frontend/src/views/system/menu/index.vue     |  31 +-
 frontend/src/views/system/notice/index.vue   |  28 +-
 frontend/src/views/system/position/index.vue |  48 +-
 frontend/src/views/system/role/index.vue     |  32 +-
 frontend/src/views/system/user/index.vue     | 148 +++---
 13 files changed, 443 insertions(+), 457 deletions(-)

diff --git a/frontend/src/components/TopTags/index.vue b/frontend/src/components/TopTags/index.vue
index 86074d04..3ffbc75f 100644
--- a/frontend/src/components/TopTags/index.vue
+++ b/frontend/src/components/TopTags/index.vue
@@ -19,7 +19,6 @@
 <script lang="ts" setup>
 import { ref, onMounted, watch } from 'vue';
 import { useRoute, useRouter } from "vue-router";
-
 interface Pane {
     title: string;
     path: string;
@@ -84,6 +83,7 @@ watch(() => route.path, getRoute);
 :deep(.ant-tabs-nav) {
     will-change: transform;
     backface-visibility: hidden;
+    margin: 0;
 }
 
 :deep(.ant-tabs-tab) {
diff --git a/frontend/src/layouts/basicLayout.vue b/frontend/src/layouts/basicLayout.vue
index 4107b236..463c0f6a 100644
--- a/frontend/src/layouts/basicLayout.vue
+++ b/frontend/src/layouts/basicLayout.vue
@@ -1,145 +1,134 @@
 <template>
   <a-layout class="basic-layout">
     <!-- 左侧导航 -->
-    <a-layout-sider class="layout-sider"
-      :collapsed="menuState.collapsed"
-      theme="light"
-      :trigger="null"
-      collapsible
-      :width="240"
-      :collapsedWidth="80"
-    >
+    <a-layout-sider class="layout-sider" :collapsed="menuState.collapsed" theme="light" :trigger="null" collapsible
+      :width="240" :collapsedWidth="80">
       <!-- Logo 区域 -->
       <div class="logo-container">
         <a-image :src="initConfigState.web_favicon" :preview="false" :width="28" :height="28" />
         <h1 class="logo-title" v-show="!menuState.collapsed">{{ initConfigState.web_title }}</h1>
       </div>
-      
-      <a-menu
-        class="side-menu"
-        mode="inline"
-        v-model:openKeys="menuState.openKeys"
-        v-model:selectedKeys="menuState.selectedKeys"
-        :items="menuState.menus"
-        @click="handleMenuClick"
-      />
+
+      <a-menu class="side-menu" mode="inline" v-model:openKeys="menuState.openKeys"
+        v-model:selectedKeys="menuState.selectedKeys" :items="menuState.menus" @click="handleMenuClick" />
     </a-layout-sider>
 
     <!-- 右侧布局 -->
     <a-layout class="layout-main" :class="{ collapsed: menuState.collapsed }">
       <!-- 顶部导航栏 -->
-      <a-layout-header class="layout-header" >
-          
-          <div class="header-left" >
-            <!-- 左侧折叠按钮 -->
-            <a-button 
-              type="link" 
-              class="collapse-btn"
-              @click="toggleCollapsed"
-            >
-              <MenuFoldOutlined v-if="menuState.collapsed" />
-              <MenuUnfoldOutlined v-else />
+      <a-layout-header class="layout-header">
+
+        <div class="header-left">
+          <!-- 左侧折叠按钮 -->
+          <a-button type="link" class="collapse-btn" @click="toggleCollapsed">
+            <MenuFoldOutlined v-if="menuState.collapsed" />
+            <MenuUnfoldOutlined v-else />
+          </a-button>
+          <topCrumb></topCrumb>
+        </div>
+
+        <!-- 右侧工具栏 -->
+        <div class="header-right">
+          <!-- 主题切换按钮 -->
+          <a-tooltip :title="isDarkMode ? '切换亮色主题' : '切换暗色主题'" placement="bottom">
+            <a-button type="link" @click="handleThemeChange" class="tool-btn">
+              <component :is="isDarkMode ? BulbFilled : BulbOutlined" />
             </a-button>
-            
-            <topCrumb></topCrumb>
-          </div>
+          </a-tooltip>
 
-          <!-- 右侧工具栏 -->
-          <div class="header-right">
-            <!-- 主题切换按钮 -->
-            <a-tooltip :title="isDarkMode ? '切换亮色主题' : '切换暗色主题'" placement="bottom">
-              <a-button type="link" @click="handleThemeChange" class="tool-btn">
-                <component :is="isDarkMode ? BulbFilled : BulbOutlined" />
-              </a-button>
-            </a-tooltip>
-            
-            <!-- 文档按钮 -->
-            <a-tooltip title="说明文档" placement="bottom">
-              <a-button type="link" @click="openDocumentation" class="tool-btn">
-                <QuestionCircleOutlined />
-              </a-button>
-            </a-tooltip>
+          <!-- 文档按钮 -->
+          <a-tooltip title="说明文档" placement="bottom">
+            <a-button type="link" @click="openDocumentation" class="tool-btn">
+              <QuestionCircleOutlined />
+            </a-button>
+          </a-tooltip>
 
-            <!-- 通知按钮 -->
-            <a-popover
-              placement="bottom"
-              trigger="hover"
-              :autoAdjustOverflow="true"
-            >
-              <template #content>
-                <div class="notice-popover">
-                  <a-list :data-source="noticeState.notices" size="small">
-                    <template #renderItem="{ item }">
-                      <a-list-item>
-                        <a-list-item-meta>
-                          <template #title>
-                            <span>
-                              <a-tag :color="item.notice_type === 1 ? 'blue' : 'orange'">
-                                {{ item.notice_type === 1 ? '通知' : '公告' }}
-                              </a-tag>
-                              {{ item.notice_title }}
-                            </span>
-                          </template>
-                          <template #description>
-                            <div class="notice-content">{{ item.notice_content }}</div>
-                          </template>
-                        </a-list-item-meta>
-                      </a-list-item>
-                    </template>
-                    <template #header>
-                      <div class="notice-header">
-                        <icons.WarningOutlined style="color: #faad14"/> 公告通知
-                      </div>
-                    </template>
-                  </a-list>
-                </div>
-              </template>
-              <a-badge :count="noticeState.total" :dot="noticeState.total > 99">
-                <a-button type="link" class="tool-btn">
-                  <BellOutlined />
-                </a-button>
-              </a-badge>
-            </a-popover>
-
-            <!-- 用户信息下拉菜单 -->
-            <a-dropdown>
-              <div class="user-dropdown">
-                <a-avatar v-if="userInfo.avatar" :src="userInfo.avatar" :size="32"/>
-                <a-avatar v-else :size="32">
-                  <template #icon><UserOutlined /></template>
-                </a-avatar>
-                <span class="username">{{ userInfo.username }}</span>
-                <DownOutlined />
+          <!-- 通知按钮 -->
+          <a-popover placement="bottom" trigger="hover" :autoAdjustOverflow="true">
+            <template #content>
+              <div class="notice-popover">
+                <a-list :data-source="noticeState.notices" size="small">
+                  <template #renderItem="{ item }">
+                    <a-list-item>
+                      <a-list-item-meta>
+                        <template #title>
+                          <span>
+                            <a-tag :color="item.notice_type === 1 ? 'blue' : 'orange'">
+                              {{ item.notice_type === 1 ? '通知' : '公告' }}
+                            </a-tag>
+                            {{ item.notice_title }}
+                          </span>
+                        </template>
+                        <template #description>
+                          <div class="notice-content">{{ item.notice_content }}</div>
+                        </template>
+                      </a-list-item-meta>
+                    </a-list-item>
+                  </template>
+                  <template #header>
+                    <div class="notice-header">
+                      <icons.WarningOutlined style="color: #faad14" /> 公告通知
+                    </div>
+                  </template>
+                </a-list>
               </div>
-              <template #overlay>
-                <a-menu @click="handleUserMenuClick">
-                  <a-menu-item key="profile">
-                    <template #icon><UserOutlined /></template>
-                    个人中心
-                  </a-menu-item>
-                  <a-menu-divider />
-                  <a-menu-item key="logout">
-                    <template #icon><LogoutOutlined /></template>
-                    退出登录
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
-          </div>
+            </template>
+            <a-badge :count="noticeState.total" :dot="noticeState.total > 99">
+              <a-button type="link" class="tool-btn">
+                <BellOutlined />
+              </a-button>
+            </a-badge>
+          </a-popover>
+
+          <!-- 用户信息下拉菜单 -->
+          <a-dropdown>
+            <div class="user-dropdown">
+              <a-avatar v-if="userInfo.avatar" :src="userInfo.avatar" :size="32" />
+              <a-avatar v-else :size="32">
+                <template #icon>
+                  <UserOutlined />
+                </template>
+              </a-avatar>
+              <span class="username">{{ userInfo.username }}</span>
+              <DownOutlined />
+            </div>
+            <template #overlay>
+              <a-menu @click="handleUserMenuClick">
+                <a-menu-item key="profile">
+                  <template #icon>
+                    <UserOutlined />
+                  </template>
+                  个人中心
+                </a-menu-item>
+                <a-menu-divider />
+                <a-menu-item key="logout">
+                  <template #icon>
+                    <LogoutOutlined />
+                  </template>
+                  退出登录
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+        </div>
       </a-layout-header>
-      <topTags></topTags>
       <!-- 主内容区 -->
       <a-layout-content class="layout-content">
-        <router-view v-slot="{ Component, route }">
-          <transition name="fade" mode="out-in">
-            <div :key="route.path">
-              <keep-alive v-if="route.meta.keepAlive">
-                <component :is="Component" />
-              </keep-alive>
-              <component :is="Component" v-else />
-            </div>
-          </transition>
-        </router-view>
+        <div class="header-tag">
+          <topTags></topTags>
+        </div>
+        <div class="header-centent">
+          <router-view v-slot="{ Component, route }">
+            <transition name="fade" mode="out-in">
+              <div :key="route.path">
+                <keep-alive v-if="route.meta.keepAlive">
+                  <component :is="Component" />
+                </keep-alive>
+                <component :is="Component" v-else />
+              </div>
+            </transition>
+          </router-view>
+        </div>
       </a-layout-content>
     </a-layout>
   </a-layout>
@@ -153,8 +142,11 @@ import storage from 'store';
 import * as icons from '@ant-design/icons-vue';
 import { h } from 'vue';
 import { listToTree } from '@/utils/util';
-import { 
-  QuestionCircleOutlined, 
+
+import topTags from '@/components/TopTags/index.vue';
+import topCrumb from '@/components/TopCrumb/index.vue';
+import {
+  QuestionCircleOutlined,
   BellOutlined,
   UserOutlined,
   LogoutOutlined,
@@ -168,10 +160,6 @@ import { useUserStore } from "@/store/index";
 import { logout } from '@/api/system/auth';
 import { useConfigStore, useNoticeStore } from "@/store/index";
 
-import topTags from '@/components/TopTags/index.vue';
-import topCrumb from '@/components/TopCrumb/index.vue';
-
-
 const userStore = useUserStore();
 
 // 路由相关
@@ -220,22 +208,6 @@ const handleLogout = async () => {
   }
 };
 
-  // 设置展开的菜单
-  const findParentPath = (menus: any[], targetPath: string, parentPath: string[] = []): string[] => {
-    for (const menu of menus) {
-      if (menu.key === targetPath) {
-        return parentPath;
-      }
-      if (menu.children?.length) {
-        const result = findParentPath(menu.children, targetPath, [...parentPath, menu.key]);
-        if (result.length) {
-          return result;
-        }
-      }
-    }
-    return [];
-  };
-  
 // 处理菜单点击
 const handleMenuClick: MenuProps['onClick'] = (menuInfo) => {
   menuState.openKeys = menuInfo.keyPath.slice(0, -1) as string[];
@@ -249,20 +221,19 @@ watch(() => route.path, (newPath) => {
     menuState.openKeys = [];
     menuState.selectedKeys = [];
   } else {
-  menuState.openKeys = findParentPath(menuState.menus, newPath);
-  menuState.selectedKeys = [newPath];
+    menuState.selectedKeys = [newPath];
   }
 });
 
 // 生成菜单项
 const generateMenuItem = (item: any): ItemType => {
   const icon = item.icon ? () => h(icons[item.icon]) : null;
-  const children = item.children?.length 
+  const children = item.children?.length
     ? item.children
-        .filter((child: any) => !child.hidden)
-        .map(generateMenuItem)
+      .filter((child: any) => !child.hidden)
+      .map(generateMenuItem)
     : undefined;
-  
+
   return {
     key: item.route_path,
     title: item.name,
@@ -284,11 +255,27 @@ const initMenu = () => {
     .filter(item => !item.hidden)
     .map(generateMenuItem)
     .filter(item => item !== null);
-  
+
   // 设置当前选中的菜单
   const currentPath = route.path;
   menuState.selectedKeys = [currentPath];
-  
+
+  // 设置展开的菜单
+  const findParentPath = (menus: any[], targetPath: string, parentPath: string[] = []): string[] => {
+    for (const menu of menus) {
+      if (menu.key === targetPath) {
+        return parentPath;
+      }
+      if (menu.children?.length) {
+        const result = findParentPath(menu.children, targetPath, [...parentPath, menu.key]);
+        if (result.length) {
+          return result;
+        }
+      }
+    }
+    return [];
+  };
+
   menuState.openKeys = findParentPath(menuState.menus, currentPath);
 };
 
@@ -319,7 +306,7 @@ const configStore = useConfigStore();
 
 const initConfigState = reactive({
   web_title: computed(() => configStore.getConfigValue("title")),
-  web_favicon:  computed(() => configStore.getConfigValue("logo")),
+  web_favicon: computed(() => configStore.getConfigValue("logo")),
 });
 
 // 在页面加载时获取通知列表
@@ -330,11 +317,22 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.header-centent {
+  height: calc(100vh - 146px); // 减去header高度
+}
+
+// 调整内容区域的上边距
+.layout-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 16px;
+}
+
 .basic-layout {
   // height: 100vh;
   // background-size: cover;
-  min-height: 100vh;
-  
+  // min-height: 100vh;
+
   .layout-sider {
     height: 100vh;
     position: fixed;
@@ -342,7 +340,7 @@ onMounted(() => {
     top: 0;
     bottom: 0;
     z-index: 99;
-    
+
     .logo-container {
       height: 64px;
       padding: 16px;
@@ -358,7 +356,7 @@ onMounted(() => {
         overflow: hidden;
       }
     }
-    
+
     .side-menu {
       height: calc(100vh - 64px);
       border-right: 0;
@@ -372,10 +370,35 @@ onMounted(() => {
     margin-left: 240px;
     transition: all 0.3s;
     width: calc(100% - 240px);
-    
+
+    padding-top: 108px; // 等于header高度
+
     &.collapsed {
       margin-left: 80px;
       width: calc(100% - 80px);
+
+      .layout-header {
+        transition: left 0.2s;
+        left: 80px; // 菜单折叠时调整头部左边距
+      }
+
+      .header-tag {
+        transition: left 0.2s;
+        left: 80px; // 菜单折叠时调整头部左边距
+      }
+    }
+
+    .header-tag {
+      background: var(--component-background);
+      padding: 0px;
+
+      // 新增样式，让头部固定在顶部
+      position: fixed;
+      top: 64px;
+      left: 240px;
+      right: 0;
+      z-index: 98;
+      transition: left 0.3s;
     }
 
     .layout-header {
@@ -383,56 +406,58 @@ onMounted(() => {
       padding: 6px;
       display: flex;
 
-      .header-left {
-        display: flex;
-        align-items: center;
-
-        .collapse-btn {
-          padding: 0 6px;
-          font-size: 18px;
-          cursor: pointer;
-          transition: color 0.3s;
-          
-          &:hover {
-            color: var(--primary-color);
-          }
-        }
-      }
-
-      .header-right {
-        display: flex;
-        align-items: center;
-        margin-left: auto;
-        
-        .tool-btn {
-          padding: 0 12px;
-          font-size: 16px;
-          cursor: pointer;
-          
-          &:hover {
-            color: var(--primary-color);
-          }
-        }
-        
-        .user-dropdown {
-          display: flex;
-          align-items: center;
-          padding: 0 12px;
-          cursor: pointer;
-          
-          .username {
-            margin: 0 8px;
-            color: var(--text-color);
-            white-space: nowrap;
-          }
-        }
-      }
-      
+      // 新增样式，让头部固定在顶部
+      position: fixed;
+      top: 0;
+      left: 240px;
+      right: 0;
+      z-index: 98;
+      transition: left 0.3s;
     }
 
-    .layout-content {
-      padding: 24px;
-      min-height: calc(100vh - var(--header-height));
+    .header-left {
+      display: flex;
+      align-items: center;
+
+      .collapse-btn {
+        padding: 0 6px;
+        font-size: 18px;
+        cursor: pointer;
+        transition: color 0.3s;
+
+        &:hover {
+          color: var(--primary-color);
+        }
+      }
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+
+      .tool-btn {
+        padding: 0 12px;
+        font-size: 16px;
+        cursor: pointer;
+
+        &:hover {
+          color: var(--primary-color);
+        }
+      }
+
+      .user-dropdown {
+        display: flex;
+        align-items: center;
+        padding: 0 12px;
+        cursor: pointer;
+
+        .username {
+          margin: 0 8px;
+          color: var(--text-color);
+          white-space: nowrap;
+        }
+      }
     }
   }
 }
@@ -466,13 +491,13 @@ onMounted(() => {
 .notice-popover {
   width: 240px;
   max-height: 400px;
-  
+
   .notice-header {
     font-size: 14px;
     font-weight: 500;
     padding: 4px 0;
   }
-  
+
   .notice-content {
     margin-top: 4px;
     font-size: 12px;
@@ -480,13 +505,13 @@ onMounted(() => {
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  
+
   :deep(.ant-list-item) {
     padding: 8px 0;
   }
-  
+
   :deep(.ant-list-item-meta-title) {
     margin-bottom: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/monitor/online/index.vue b/frontend/src/views/monitor/online/index.vue
index 93101f9e..78bab964 100644
--- a/frontend/src/views/monitor/online/index.vue
+++ b/frontend/src/views/monitor/online/index.vue
@@ -1,26 +1,23 @@
 <template>
 
+
   <!-- 搜索表单 -->
   <div class="table-search-wrapper">
     <a-card :bordered="false">
       <a-form :model="queryState" @finish="handleQuery">
-        <a-row>
-          <a-col flex="0 1 450px">
+        
+        <a-flex wrap="wrap" gap="small">
             <a-form-item name="ipaddr" label="主机" style="max-width: 300px;">
               <a-input v-model:value="queryState.ipaddr" placeholder="请输入主机地址" allowClear></a-input>
             </a-form-item>
-          </a-col>
-          <a-col flex="0 1 450px">
             <a-form-item name="user_name" label="用户名" style="max-width: 300px;">
               <a-input v-model:value="queryState.name" placeholder="请输入登陆用户名称" allowClear></a-input>
             </a-form-item>
-          </a-col>
-          <a-col flex="0 1 450px">
             <a-form-item name="login_location" label="登陆地点" style="max-width: 300px;">
               <a-input v-model:value="queryState.login_location" placeholder="请输入登陆地点" allowClear></a-input>
             </a-form-item>
-          </a-col>
-        </a-row>
+
+        </a-flex>
         <a-row>
           <a-col>
             <a-button type="primary" html-type="submit" :loading="loading">查询</a-button>
@@ -32,18 +29,19 @@
   </div>
 
   <div class="table-wrapper">
-    <a-card title="在线用户列表" 
-      :bordered="false" 
+    <a-card title="在线用户列表"
+      :bordered="false"
       :headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
-      :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 400px)' }">
-      <a-table 
-        :rowKey="record => record.session_id" 
-        :columns="columns" 
-        :data-source="tableData" 
+      :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 360px)' }">
+      <a-table
+        :rowKey="record => record.session_id"
+        :columns="columns"
+        :data-source="tableData"
         :loading="loading"
-        :scroll="{ x: 400 }" 
+        :scroll="{ x: 400 }"
         :pagination="pagination"
-        :style="{ minHeight: '420px' }">
+                    :style="{ minHeight: 'calc(100vh - 420px)' }"
+                    >
         <template #bodyCell="{ column, record, index }">
           <template v-if="column.dataIndex === 'index'">
             <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
diff --git a/frontend/src/views/system/dept/index.vue b/frontend/src/views/system/dept/index.vue
index e56ff1ad..f72162c3 100644
--- a/frontend/src/views/system/dept/index.vue
+++ b/frontend/src/views/system/dept/index.vue
@@ -1,25 +1,26 @@
 <template>
   <div>
 
+
     <!-- 搜索表单 -->
     <div class="tree-search-wrapper">
       <a-card :bordered="false">
         <a-form :model="queryState" @finish="onFinish">
-          <a-row>
-            <a-col flex="0 1 450px">
+          <a-flex wrap="wrap" gap="small">
+              <a-form-item name="name" label="名称" style="max-width: 300px;">
+                <a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear />
+              </a-form-item>
               <a-form-item name="name" label="名称" style="max-width: 300px;">
                 <a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear />
               </a-form-item>
-            </a-col>
-            <a-col flex="0 1 450px">
               <a-form-item name="available" label="状态" style="max-width: 300px;">
                 <a-select v-model:value="queryState.available" placeholder="全部" allowClear>
                   <a-select-option value="true">启用</a-select-option>
                   <a-select-option value="false">停用</a-select-option>
                 </a-select>
               </a-form-item>
-            </a-col>
-          </a-row>
+
+          </a-flex>
           <a-row>
             <a-col>
               <a-space>
@@ -34,12 +35,11 @@
 
     <!-- 表格区域 -->
     <div class="table-wrapper">
-      <a-card 
-        title="部门列表" 
+      <a-card
+        title="部门列表"
         :bordered="false"
         :headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
-        :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 400px)' }"
-      >
+      :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 360px)' }">
         <template #extra>
           <a-space>
             <a-button type="primary" :icon="h(PlusOutlined)" @click="modalHandle('create')">新建</a-button>
diff --git a/frontend/src/views/system/dict/data.vue b/frontend/src/views/system/dict/data.vue
index d2bc7658..27979a69 100644
--- a/frontend/src/views/system/dict/data.vue
+++ b/frontend/src/views/system/dict/data.vue
@@ -1,12 +1,13 @@
 <template>
     <div>
 
+
         <!-- 搜索表单 -->
         <div class="table-search-wrapper">
             <a-card :bordered="false">
                 <a-form :model="queryState" @finish="onFinish">
-                    <a-row>
-                        <a-col flex="0 1 450px">
+                    
+                    <a-flex wrap="wrap" gap="small">
                             <a-form-item name="dict_type" label="字典" style="max-width: 300px;">
                                 <a-select v-model:value="queryState.dict_type" placeholder="请选择字典名称" allowClear @click="loadDictTypes">
                                     <a-select-option v-for="item in dictTypeOptions" :key="item.dict_type" :value="item.dict_type">
@@ -14,22 +15,17 @@
                                     </a-select-option>
                                 </a-select>
                             </a-form-item>
-                        </a-col>
-                        <a-col flex="0 1 450px">
                             <a-form-item name="dict_name" label="标签" style="max-width: 300px;">
                                 <a-input v-model:value="queryState.dict_label" placeholder="请输入字典数据标签"
                                     allowClear></a-input>
                             </a-form-item>
-                        </a-col>
-                        <a-col flex="0 1 450px">
                             <a-form-item name="available" label="状态" style="max-width: 300px;">
                                 <a-select v-model:value="queryState.available" placeholder="全部" allowClear>
                                     <a-select-option value="true">启用</a-select-option>
                                     <a-select-option value="false">停用</a-select-option>
                                 </a-select>
                             </a-form-item>
-                        </a-col>
-                    </a-row>
+                    </a-flex>
                     <a-row>
                         <a-col>
                             <a-button type="primary" html-type="submit" :loading="tableLoading">查询</a-button>
@@ -42,10 +38,10 @@
 
         <!-- 表格区域 -->
         <div class="table-wrapper">
-            <a-card title="数据字典列表" 
-                :bordered="false" 
+            <a-card title="数据字典列表"
+                :bordered="false"
                 :headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
-                :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 400px)' }">
+      :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 360px)' }">
                 <template #extra>
                     <a-button type="primary" :icon="h(PlusOutlined)" @click="modalHandle('create')"
                         style="margin-right: 10px;">新建</a-button>
@@ -53,15 +49,15 @@
                         style="margin-right: 10px;">导出
                     </a-button>
                 </template>
-                <a-table :rowKey="record => record.id" 
-                    :columns="columns" 
+                <a-table :rowKey="record => record.id"
+                    :columns="columns"
                     :data-source="dataSource"
-                    :row-selection="rowSelection" 
-                    :loading="tableLoading" 
+                    :row-selection="rowSelection"
+                    :loading="tableLoading"
                     @change="handleTableChange"
-                    :scroll="{ x: 400 }" 
+                    :scroll="{ x: 400 }"
                     :pagination="pagination"
-                    :style="{ minHeight: '420px' }"
+                    :style="{ minHeight: 'calc(100vh - 420px)' }"
                     >
                     <template #bodyCell="{ column, record, index }">
                         <template v-if="column.dataIndex === 'index'">
diff --git a/frontend/src/views/system/dict/index.vue b/frontend/src/views/system/dict/index.vue
index 5e8e2c32..700acb11 100644
--- a/frontend/src/views/system/dict/index.vue
+++ b/frontend/src/views/system/dict/index.vue
@@ -1,32 +1,28 @@
 <template>
     <div>
 
+
         <!-- 搜索表单 -->
         <div class="table-search-wrapper">
             <a-card :bordered="false">
                 <a-form :model="queryState" @finish="onFinish">
-                    <a-row>
-                        <a-col flex="0 1 450px">
+                    
+                    <a-flex wrap="wrap" gap="small">
                             <a-form-item name="dict_name" label="名称" style="max-width: 300px;">
                                 <a-input v-model:value="queryState.dict_name" placeholder="请输入字典名称"
                                     allowClear></a-input>
                             </a-form-item>
-                        </a-col>
-                        <a-col flex="0 1 450px">
                             <a-form-item name="dict_type" label="类型" style="max-width: 300px;">
                                 <a-input v-model:value="queryState.dict_type" placeholder="请输入字典类型"
                                     allowClear></a-input>
                             </a-form-item>
-                        </a-col>
-                        <a-col flex="0 1 450px">
                             <a-form-item name="available" label="状态" style="max-width: 300px;">
                                 <a-select v-model:value="queryState.available" placeholder="全部" allowClear>
                                     <a-select-option value="true">启用</a-select-option>
                                     <a-select-option value="false">停用</a-select-option>
                                 </a-select>
                             </a-form-item>
-                        </a-col>
-                    </a-row>
+                    </a-flex>
                     <a-row>
                         <a-col>
                             <a-button type="primary" html-type="submit" :loading="tableLoading">查询</a-button>
@@ -39,10 +35,10 @@
 
         <!-- 表格区域 -->
         <div class="table-wrapper">
-            <a-card title="字典类型列表" 
-                :bordered="false" 
+            <a-card title="字典类型列表"
+                :bordered="false"
                 :headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
-                :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 400px)' }">
+      :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 360px)' }">
                 <template #extra>
                     <a-button type="primary" :icon="h(PlusOutlined)" @click="modalHandle('create')"
                         style="margin-right: 10px;">新建</a-button>
@@ -50,15 +46,14 @@
                         style="margin-right: 10px;">导出
                     </a-button>
                 </template>
-                <a-table :rowKey="record => record.id" 
-                    :columns="columns" 
+                <a-table :rowKey="record => record.id"
+                    :columns="columns"
                     :data-source="dataSource"
-                    :row-selection="rowSelection" 
-                    :loading="tableLoading" 
+                    :row-selection="rowSelection"
+                    :loading="tableLoading"
                     @change="handleTableChange"
-                    :scroll="{ x: 400, y: 370 }" 
                     :pagination="pagination"
-                    :style="{ minHeight: '400px' }"
+                    :style="{ minHeight: 'calc(100vh - 420px)' }"
                     >
                     <template #bodyCell="{ column, record, index }">
                         <template v-if="column.dataIndex === 'index'">
diff --git a/frontend/src/views/system/job/index.vue b/frontend/src/views/system/job/index.vue
index 3b6162c6..0738ad84 100644
--- a/frontend/src/views/system/job/index.vue
+++ b/frontend/src/views/system/job/index.vue
@@ -1,30 +1,25 @@
 <template>
     <div>
 
+
         <!-- 搜索表单 -->
         <div class="table-search-wrapper">
             <a-card :bordered="false">
                 <a-form :model="queryState" @finish="onFinish">
-                    <a-row>
-                        <a-col flex="0 1 450px">
+                    <a-flex wrap="wrap" gap="small">
                             <a-form-item name="name" label="名称" style="max-width: 300px;">
                                 <a-input v-model:value="queryState.name" placeholder="请输入任务名称" allowClear></a-input>
                             </a-form-item>
-                        </a-col>
-                        <a-col flex="0 1 450px">
                             <a-form-item name="status" label="状态" style="max-width: 300px;">
                                 <a-select v-model:value="queryState.status" placeholder="全部" allowClear>
-                                    <a-select-option value="true">启用</a-select-option>
-                                    <a-select-option value="false">停用</a-select-option>
+                                                    <a-select-option value="true">启用</a-select-option>
+                <a-select-option value="false">停用</a-select-option>
                                 </a-select>
                             </a-form-item>
-                        </a-col>
-                        <a-col flex="0 1 450px">
                             <a-form-item name="date-range-picker" label="创建日期" style="max-width: 350px;">
                                 <a-range-picker v-model:value="queryState.date_range" value-format="YYYY-MM-DD" />
                             </a-form-item>
-                        </a-col>
-                    </a-row>
+                    </a-flex>
                     <a-row>
                         <a-col>
                             <a-button type="primary" html-type="submit" :loading="tableLoading">查询</a-button>
@@ -38,7 +33,8 @@
         <!-- 表格区域 -->
         <div class="table-wrapper">
             <a-card title="定时任务列表" :bordered="false" :headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
-                :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 400px)' }">
+                
+      :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 360px)' }">
                 <template #extra>
                     <a-button type="primary" :icon="h(PlusOutlined)" @click="modalHandle('create')"
                         style="margin-right: 10px;">新建</a-button>
@@ -51,7 +47,9 @@
                 </template>
                 <a-table :rowKey="record => record.id" :columns="columns" :data-source="dataSource"
                     :row-selection="rowSelection" :loading="tableLoading" @change="handleTableChange"
-                    :scroll="{ x: 400 }" :pagination="pagination" :style="{ minHeight: '420px' }">
+                    :scroll="{ x: 400 }" :pagination="pagination" 
+                    :style="{ minHeight: 'calc(100vh - 420px)' }"
+                    >
                     <template #bodyCell="{ column, record, index }">
                         <template v-if="column.dataIndex === 'index'">
                             <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
diff --git a/frontend/src/views/system/log/index.vue b/frontend/src/views/system/log/index.vue
index 7a89d2ca..3bfccbd0 100644
--- a/frontend/src/views/system/log/index.vue
+++ b/frontend/src/views/system/log/index.vue
@@ -1,17 +1,15 @@
 <template>
   <div>
 
+
     <!-- 搜索表单 -->
     <div class="table-search-wrapper">
       <a-card :bordered="false">
         <a-form :model="queryState" @finish="onFinish">
-          <a-row>
-            <a-col flex="0 1 450px">
+          <a-flex wrap="wrap" gap="small">
               <a-form-item name="request_path" label="请求路径" style="max-width: 300px;">
                 <a-input v-model:value="queryState.request_path" placeholder="请输入请求路径" allowClear></a-input>
               </a-form-item>
-            </a-col>
-            <a-col flex="0 1 450px">
               <a-form-item name="creator" label="创建人" style="max-width: 300px;">
                 <a-select v-model:value="queryState.creator_name" placeholder="请选择创建人" :open="false"
                   @click="selectModalHandle">
@@ -20,13 +18,10 @@
                   </template>
                 </a-select>
               </a-form-item>
-            </a-col>
-            <a-col flex="0 1 450px">
               <a-form-item name="date-range-picker" label="创建日期" style="max-width: 350px;">
                 <a-range-picker v-model:value="queryState.date_range" value-format="YYYY-MM-DD" />
               </a-form-item>
-            </a-col>
-          </a-row>
+          </a-flex>
           <a-row>
             <a-col>
               <a-button type="primary" html-type="submit" :loading="tableLoading">查询</a-button>
@@ -39,26 +34,26 @@
 
     <!-- 表格区域 -->
     <div class="table-wrapper">
-      <a-card title="日志列表" 
-        :bordered="false" 
+      <a-card title="日志列表"
+        :bordered="false"
         :headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
-        :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 400px)' }">
+      :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 360px)' }">
         <template #extra>
           <a-button type="primary" :icon="h(DownOutlined)" @click="handleExport"
             style="margin-right: 10px;">
             导出
           </a-button>
         </template>
-        <a-table 
+        <a-table
           :rowKey="record => record.id"
-          :columns="columns" 
-          :data-source="dataSource" 
+          :columns="columns"
+          :data-source="dataSource"
           :loading="tableLoading"
-          @change="handleTableChange" 
-          :scroll="{ x: 400 }" 
+          @change="handleTableChange"
+          :scroll="{ x: 400 }"
           :pagination="pagination"
-          :style="{ minHeight: '420px'}"
-          >
+                    :style="{ minHeight: 'calc(100vh - 420px)' }"
+                    >
           <template #bodyCell="{ column, record, index }">
             <template v-if="column.dataIndex === 'index'">
               <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
diff --git a/frontend/src/views/system/menu/index.vue b/frontend/src/views/system/menu/index.vue
index 0d8ba3d2..f1010470 100644
--- a/frontend/src/views/system/menu/index.vue
+++ b/frontend/src/views/system/menu/index.vue
@@ -1,25 +1,22 @@
 <template>
   <div>
 
+
     <!-- 搜索表单 -->
     <div class="table-search-wrapper">
       <a-card :bordered="false">
         <a-form :model="queryState" @finish="onFinish">
-          <a-row>
-            <a-col flex="0 1 450px">
+          <a-flex wrap="wrap" gap="small">
               <a-form-item name="name" label="名称" style="max-width: 300px;">
                 <a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear></a-input>
               </a-form-item>
-            </a-col>
-            <a-col flex="0 1 450px">
               <a-form-item name="available" label="状态" style="max-width: 300px;">
                 <a-select v-model:value="queryState.available" placeholder="全部" allowClear>
                   <a-select-option value="true">启用</a-select-option>
                   <a-select-option value="false">停用</a-select-option>
                 </a-select>
               </a-form-item>
-            </a-col>
-          </a-row>
+          </a-flex>
           <a-row>
             <a-col>
               <a-button type="primary" html-type="submit" :loading="tableLoading">查询</a-button>
@@ -32,10 +29,10 @@
 
     <!-- 表格区域 -->
     <div class="table-wrapper">
-      <a-card title="菜单列表" 
-        :bordered="false" 
+      <a-card title="菜单列表"
+        :bordered="false"
         :headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
-        :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 400px)' }">
+      :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 360px)' }">
         <template #extra>
           <a-button type="primary" :icon="h(PlusOutlined)" @click="modalHandle('create')"
             style="margin-right: 10px;">新建</a-button>
@@ -56,16 +53,16 @@
           </a-dropdown>
         </template>
         <a-table v-if="dataSource"
-          :defaultExpandAllRows="true" 
-          :rowKey="record => record.id" 
-          :columns="columns" 
+          :defaultExpandAllRows="true"
+          :rowKey="record => record.id"
+          :columns="columns"
           :data-source="dataSource"
-          :loading="tableLoading" 
+          :loading="tableLoading"
           :scroll="{ x: 500, y: 'calc(100vh - 450px)' }"
-          :row-selection="rowSelection" 
-          :pagination="false" 
-          :style="{ minHeight: '420px' }"
-        >
+          :row-selection="rowSelection"
+          :pagination="false"
+                    :style="{ minHeight: 'calc(100vh - 420px)' }"
+                    >
           <template #bodyCell="{ column, record }">
             <template v-if="column.dataIndex === 'type'">
               <a-tag :color="record.type === 1 ? 'blue' : (record.type === 2 ? 'green' : 'orange')">
diff --git a/frontend/src/views/system/notice/index.vue b/frontend/src/views/system/notice/index.vue
index 134023c7..1c4cef17 100644
--- a/frontend/src/views/system/notice/index.vue
+++ b/frontend/src/views/system/notice/index.vue
@@ -1,26 +1,24 @@
 <template>
     <div>
 
+
         <!-- 搜索表单 -->
         <div class="table-search-wrapper">
             <a-card :bordered="false">
                 <a-form :model="queryState" @finish="onFinish">
-                    <a-row>
-                        <a-col flex="0 1 450px">
+                    <a-flex wrap="wrap" gap="small">
                             <a-form-item name="name" label="名称" style="max-width: 300px;">
                                 <a-input v-model:value="queryState.notice_title" placeholder="请输入标题"
                                     allowClear></a-input>
                             </a-form-item>
-                        </a-col>
-                        <a-col flex="0 1 450px">
                             <a-form-item name="available" label="状态" style="max-width: 300px;">
                                 <a-select v-model:value="queryState.available" placeholder="全部" allowClear>
                                     <a-select-option value="true">启用</a-select-option>
                                     <a-select-option value="false">停用</a-select-option>
                                 </a-select>
                             </a-form-item>
-                        </a-col>
-                    </a-row>
+                        
+                    </a-flex>
                     <a-row>
                         <a-col>
                             <a-button type="primary" html-type="submit" :loading="tableLoading">查询</a-button>
@@ -33,10 +31,10 @@
 
         <!-- 表格区域 -->
         <div class="table-wrapper">
-            <a-card title="公告通知列表" 
-                :bordered="false" 
+            <a-card title="公告通知列表"
+                :bordered="false"
                 :headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
-                :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 400px)' }">
+      :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 360px)' }">
                 <template #extra>
                     <a-button type="primary" :icon="h(PlusOutlined)" @click="modalHandle('create')"
                         style="margin-right: 10px;">新建</a-button>
@@ -60,15 +58,15 @@
                     </a-dropdown>
 
                 </template>
-                <a-table :rowKey="record => record.id" 
-                    :columns="columns" 
+                <a-table :rowKey="record => record.id"
+                    :columns="columns"
                     :data-source="dataSource"
-                    :row-selection="rowSelection" 
-                    :loading="tableLoading" 
+                    :row-selection="rowSelection"
+                    :loading="tableLoading"
                     @change="handleTableChange"
-                    :scroll="{ x: 400 }" 
+                    :scroll="{ x: 400 }"
                     :pagination="pagination"
-                    :style="{ minHeight: '420px' }"
+                    :style="{ minHeight: 'calc(100vh - 420px)' }"
                     >
                     <template #bodyCell="{ column, record, index }">
                         <template v-if="column.dataIndex === 'index'">
diff --git a/frontend/src/views/system/position/index.vue b/frontend/src/views/system/position/index.vue
index ced14b3c..7b33e2a9 100644
--- a/frontend/src/views/system/position/index.vue
+++ b/frontend/src/views/system/position/index.vue
@@ -1,25 +1,25 @@
 <template>
   <div>
 
+
     <!-- 搜索表单 -->
     <div class="table-search-wrapper">
       <a-card :bordered="false">
         <a-form :model="queryState" @finish="onFinish">
-          <a-row>
-            <a-col flex="0 1 450px">
+          <a-flex wrap="wrap" gap="small">
+              <a-form-item name="name" label="名称" style="max-width: 300px;">
+                <a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear></a-input>
+              </a-form-item>
               <a-form-item name="name" label="名称" style="max-width: 300px;">
                 <a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear></a-input>
               </a-form-item>
-            </a-col>
-            <a-col flex="0 1 450px">
               <a-form-item name="available" label="状态" style="max-width: 300px;">
                 <a-select v-model:value="queryState.available" placeholder="全部" allowClear>
                   <a-select-option value="true">启用</a-select-option>
                   <a-select-option value="false">停用</a-select-option>
                 </a-select>
               </a-form-item>
-            </a-col>
-          </a-row>
+          </a-flex>
           <a-row>
             <a-col>
               <a-button type="primary" html-type="submit" :loading="tableLoading">查询</a-button>
@@ -32,13 +32,13 @@
 
     <!-- 表格区域 -->
     <div class="table-wrapper">
-      <a-card title="岗位列表" 
-        :bordered="false" 
+      <a-card title="岗位列表"
+        :bordered="false"
         :headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
-        :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 400px)' }">
+      :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 360px)' }">
         <template #extra>
-          <a-button type="primary" 
-            :icon="h(PlusOutlined)" 
+          <a-button type="primary"
+            :icon="h(PlusOutlined)"
             @click="modalHandle('create')"
             style="margin-right: 10px;">
             新建
@@ -63,16 +63,16 @@
             </a-button>
           </a-dropdown>
         </template>
-        <a-table :rowKey="record => record.id" 
-          :columns="columns" 
+        <a-table :rowKey="record => record.id"
+          :columns="columns"
           :data-source="dataSource"
-          :row-selection="rowSelection" 
-          :loading="tableLoading" 
+          :row-selection="rowSelection"
+          :loading="tableLoading"
           @change="handleTableChange"
-          :scroll="{ x: 400 }" 
-          :pagination="pagination" 
-          :style="{ minHeight: '420px' }"
-          >
+          :scroll="{ x: 400 }"
+          :pagination="pagination"
+                    :style="{ minHeight: 'calc(100vh - 420px)' }"
+                    >
           <template #bodyCell="{ column, record, index }">
             <template v-if="column.dataIndex === 'index'">
               <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
@@ -98,12 +98,12 @@
 
     <!-- 弹窗区域 -->
     <div class="modal-wrapper">
-      <a-modal 
-        v-model:open="openModal" 
-        @ok="handleModalSumbit" 
-        :width="800" 
+      <a-modal
+        v-model:open="openModal"
+        @ok="handleModalSumbit"
+        :width="800"
         :destroyOnClose="true"
-        :confirmLoading="modalSubmitLoading" 
+        :confirmLoading="modalSubmitLoading"
         style="top: 30px"
       >
         <template #title>
diff --git a/frontend/src/views/system/role/index.vue b/frontend/src/views/system/role/index.vue
index 84fd85e1..c76f53c0 100644
--- a/frontend/src/views/system/role/index.vue
+++ b/frontend/src/views/system/role/index.vue
@@ -1,25 +1,23 @@
 <template>
   <div>
 
+
     <!-- 表格搜索 -->
     <div class="table-search-wrapper">
       <a-card :bordered="false">
         <a-form :model="queryState" @finish="onFinish">
-          <a-row>
-            <a-col flex="0 1 450px">
+          <a-flex wrap="wrap" gap="small">
               <a-form-item name="name" label="名称" style="max-width: 300px;">
                 <a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear></a-input>
               </a-form-item>
-            </a-col>
-            <a-col flex="0 1 450px">
               <a-form-item name="available" label="状态" style="max-width: 300px;">
                 <a-select v-model:value="queryState.available" placeholder="全部" allowClear>
                   <a-select-option value="true">启用</a-select-option>
                   <a-select-option value="false">停用</a-select-option>
                 </a-select>
               </a-form-item>
-            </a-col>
-          </a-row>
+
+          </a-flex>
           <a-row>
             <a-col>
               <a-button type="primary" html-type="submit" :loading="tableLoading">查询</a-button>
@@ -32,10 +30,10 @@
 
     <!-- 表格区域 -->
     <div class="table-wrapper">
-      <a-card title="角色列表" 
-        :bordered="false" 
+      <a-card title="角色列表"
+        :bordered="false"
         :headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
-        :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 400px)' }">
+      :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 360px)' }">
         <template #extra>
           <a-button type="primary" :icon="h(PlusOutlined)" @click="modalHandle('create')"
             style="margin-right: 10px;">
@@ -61,16 +59,16 @@
             </a-button>
           </a-dropdown>
         </template>
-        <a-table :rowKey="record => record.id" 
-          :columns="columns" 
+        <a-table :rowKey="record => record.id"
+          :columns="columns"
           :data-source="dataSource"
-          :row-selection="rowSelection" 
-          :loading="tableLoading" 
+          :row-selection="rowSelection"
+          :loading="tableLoading"
           @change="handleTableChange"
-          :scroll="{ x: 400 }" 
-          :pagination="pagination" 
-          :style="{ minHeight: '420px' }"
-          >
+          :scroll="{ x: 400 }"
+          :pagination="pagination"
+                    :style="{ minHeight: 'calc(100vh - 420px)' }"
+                    >
           <template #bodyCell="{ column, record, index }">
             <template v-if="column.dataIndex === 'index'">
               <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index 3df65044..7bbcf75c 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -1,30 +1,25 @@
 <template>
   <div>
 
+
     <!-- 表格搜索区域 -->
     <div class="table-search-wrapper">
       <a-card :bordered="false">
         <a-form :model="queryState" @finish="onFinish">
-          <a-row>
-            <a-col flex="0 1 450px">
-              <a-form-item name="username" label="用户名" style="max-width: 300px;">
-                <a-input v-model:value="queryState['username']" placeholder="请输入用户名" allowClear></a-input>
-              </a-form-item>
-            </a-col>
-            <a-col flex="0 1 450px">
-              <a-form-item name="name" label="姓名" style="max-width: 300px;">
-                <a-input v-model:value="queryState['name']" placeholder="请输入姓名" allowClear></a-input>
-              </a-form-item>
-            </a-col>
-            <a-col flex="0 1 450px">
-              <a-form-item name="available" label="状态" style="max-width: 300px;">
-                <a-select v-model:value="queryState['available']" placeholder="全部" allowClear>
-                  <a-select-option value="true">启用</a-select-option>
-                  <a-select-option value="false">停用</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
+          <a-flex wrap="wrap" gap="small">
+            <a-form-item name="username" label="用户名" style="max-width: 300px;">
+              <a-input v-model:value="queryState['username']" placeholder="请输入用户名" allowClear></a-input>
+            </a-form-item>
+            <a-form-item name="name" label="姓名" style="max-width: 300px;">
+              <a-input v-model:value="queryState['name']" placeholder="请输入姓名" allowClear></a-input>
+            </a-form-item>
+            <a-form-item name="available" label="状态" style="max-width: 300px;">
+              <a-select v-model:value="queryState['available']" placeholder="全部" allowClear>
+                <a-select-option value="1">启用</a-select-option>
+                <a-select-option value="0">停用</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-flex>
           <a-row>
             <a-col>
               <a-button type="primary" html-type="submit" :loading="tableLoading">查询</a-button>
@@ -37,10 +32,9 @@
 
     <!-- 表格区域 -->
     <div class="table-wrapper">
-      <a-card title="用户管理" 
-        :bordered="false" 
-        :headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
-        :bodyStyle="{ padding: '0px 24px', minHeight: 'calc(100vh - 400px)' }">
+      <a-card title="用户管理" :bordered="false" :headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
+        
+      :bodyStyle="{ padding: '0 24px', minHeight: 'calc(100vh - 360px)' }">
         <template #extra>
           <a-button type="primary" :icon="h(PlusOutlined)" @click="modalHandle('create')" style="margin-right: 10px;">
             新建
@@ -72,68 +66,60 @@
         <a-row :gutter="16">
           <!-- 左侧部门树 -->
           <a-col :span="4">
-              <a-tree ref="deptTree" v-if="deptTreeData.length" 
-                :tree-data="deptTreeData" 
-                :show-line="true"
-                :defaultExpandAll="true" 
-                :field-names="{ children: 'children', title: 'name', key: 'id' }"
-                :selected-keys="selectedKeys" 
-                @select="onSelectDept">
-              </a-tree>
+            <a-tree ref="deptTree" v-if="deptTreeData.length" :tree-data="deptTreeData" :show-line="true"
+              :defaultExpandAll="true" :field-names="{ children: 'children', title: 'name', key: 'id' }"
+              :selected-keys="selectedKeys" @select="onSelectDept">
+            </a-tree>
           </a-col>
 
           <!-- 右侧用户列表 -->
           <a-col :span="20">
-              <a-table :rowKey="record => record.id" 
-                :columns="columns" 
-                :data-source="dataSource"
-                :row-selection="rowSelection" 
-                :loading="tableLoading" 
-                @change="handleTableChange" 
-                :scroll="{ x: 400 }"
-                :pagination="pagination" 
-                :style="{ minHeight: '420px' }">
-                <template #bodyCell="{ column, record, index }">
-                  <template v-if="column.dataIndex === 'index'">
-                    <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
-                  </template>
-                  <template v-if="column.dataIndex === 'dept'">
-                    <span>{{ record.dept_name }}</span>
-                  </template>
-                  <template v-if="column.dataIndex === 'roles'">
-                    <span>{{ record.roleNames }}</span>
-                  </template>
-                  <template v-if="column.dataIndex === 'positions'">
-                    <span>{{ record.positionNames }}</span>
-                  </template>
-                  <template v-if="column.dataIndex === 'gender'">
-                    <a-tag :color="dictStore.getDictLabel(DictDataStore['sys_user_sex'],record.gender).css_class">
-                      {{ dictStore.getDictLabel(DictDataStore['sys_user_sex'],record.gender).dict_label }}
-                    </a-tag>
-                  </template>
-                  <template v-if="column.dataIndex === 'available'">
-                    <span>
-                      <a-badge :status="record.available ? 'processing' : 'error'"
-                        :text="record.available ? '启用' : '停用'" />
-                    </span>
-                  </template>
-                  <template v-if="column.dataIndex === 'is_superuser'">
-                    <span>
-                      <a-badge :status="record.is_superuser ? 'processing' : 'error'"
-                        :text="record.is_superuser ? '是' : '否'" />
-                    </span>
-                  </template>
-                  <template v-if="column.dataIndex === 'operation'">
-                    <a-space size="middle">
-                      <a v-on:click="modalHandle('view', index)">查看</a>
-                      <a v-on:click="modalHandle('update', index)">修改</a>
-                      <a-popconfirm title="确定删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteRow(record)">
-                        <a style="color: red;">删除</a>
-                      </a-popconfirm>
-                    </a-space>
-                  </template>
+            <a-table :rowKey="record => record.id" :columns="columns" :data-source="dataSource"
+              :row-selection="rowSelection" :loading="tableLoading" @change="handleTableChange" :scroll="{ x: 400 }"
+              :pagination="pagination" 
+                    :style="{ minHeight: 'calc(100vh - 420px)' }"
+                    >
+              <template #bodyCell="{ column, record, index }">
+                <template v-if="column.dataIndex === 'index'">
+                  <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
                 </template>
-              </a-table>
+                <template v-if="column.dataIndex === 'dept'">
+                  <span>{{ record.dept_name }}</span>
+                </template>
+                <template v-if="column.dataIndex === 'roles'">
+                  <span>{{ record.roleNames }}</span>
+                </template>
+                <template v-if="column.dataIndex === 'positions'">
+                  <span>{{ record.positionNames }}</span>
+                </template>
+                <template v-if="column.dataIndex === 'gender'">
+                  <a-tag :color="dictStore.getDictLabel(DictDataStore['sys_user_sex'], record.gender).css_class">
+                    {{ dictStore.getDictLabel(DictDataStore['sys_user_sex'], record.gender).dict_label }}
+                  </a-tag>
+                </template>
+                <template v-if="column.dataIndex === 'available'">
+                  <span>
+                    <a-badge :status="record.available ? 'processing' : 'error'"
+                      :text="record.available ? '启用' : '停用'" />
+                  </span>
+                </template>
+                <template v-if="column.dataIndex === 'is_superuser'">
+                  <span>
+                    <a-badge :status="record.is_superuser ? 'processing' : 'error'"
+                      :text="record.is_superuser ? '是' : '否'" />
+                  </span>
+                </template>
+                <template v-if="column.dataIndex === 'operation'">
+                  <a-space size="middle">
+                    <a v-on:click="modalHandle('view', index)">查看</a>
+                    <a v-on:click="modalHandle('update', index)">修改</a>
+                    <a-popconfirm title="确定删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteRow(record)">
+                      <a style="color: red;">删除</a>
+                    </a-popconfirm>
+                  </a-space>
+                </template>
+              </template>
+            </a-table>
           </a-col>
         </a-row>
       </a-card>