From 2903f194c949c5ed0791cce534adbf06c842e112 Mon Sep 17 00:00:00 2001
From: gitee-bot <no-reply@git.oschina.net>
Date: Fri, 15 May 2026 16:02:32 +0000
Subject: [PATCH 1/5] feat: implement responsive design for global UI to adapt
 to browser sizes

- Remove Vite template constraints from style.css (max-width, text-align)
- Add responsive base styles with box-sizing and viewport units
- Add collapsible sidebar in MainLayout with toggle trigger icons
- Implement breakpoint-based auto-collapse for sidebar at lg breakpoint
- Add responsive media queries for header elements (1200px, 992px, 768px, 576px)
- Hide non-essential elements on smaller screens (version, 2FA, check-in)
- Adjust padding, margins, and font sizes for different screen sizes
- Use CSS classes instead of inline styles for better responsive control
---
 src/layouts/MainLayout.vue | 176 +++++++++++++++++++++++++++++++++++--
 src/style.css              |  74 +++++-----------
 2 files changed, 191 insertions(+), 59 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 97979cb..dbfde5a 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -2,17 +2,27 @@
   <a-layout>
     <a-layout-header class="main-layout-header">
       <div class="main-layout-brand">
+        <MenuUnfoldOutlined
+          v-if="siderCollapsed"
+          class="sider-trigger"
+          @click="toggleSider"
+        />
+        <MenuFoldOutlined
+          v-else
+          class="sider-trigger"
+          @click="toggleSider"
+        />
         <img
           src="../assets/logo.ico"
           alt="Logo"
-          style="height: 40px; margin-right: 10px"
+          class="main-layout-logo"
         />
         <span class="main-layout-brand-text">{{
           $t("message.systemName")
         }}</span>
       </div>
       <div class="main-layout-actions">
-        <a-button type="link">
+        <a-button type="link" class="version-button">
           {{ $t("message.serverVersion") }}: {{ serverVersion || "-" }}
         </a-button>
         <a-tooltip v-if="false" :title="themeSwitchTitle">
@@ -47,7 +57,7 @@
           </span>
           <a-button
             type="link"
-            style="margin-right: 10px"
+            class="username-button"
             @click="openProfileCenter"
             >{{ username }}</a-button
           >
@@ -68,14 +78,14 @@
           <a-button
             v-if="showTwoFactorEntry"
             type="link"
-            style="margin-right: 10px"
+            class="twofactor-button"
             @click="openTwoFactorModal"
           >
             {{ $t("message.twoFactor") }}
           </a-button>
           <a-button
             type="link"
-            style="margin-right: 10px"
+            class="logout-button"
             :disabled="favoriteBlockingSyncLoading"
             @click="logout"
             >{{ $t("message.logout") }}</a-button
@@ -83,14 +93,14 @@
         </template>
         <template v-else>
           <router-link to="/signin">
-            <a-button type="link" style="margin-right: 10px">{{
+            <a-button type="link" class="signin-button">{{
               $t("message.signin")
             }}</a-button>
           </router-link>
         </template>
         <a-select
           v-model:value="currentLocale"
-          style="width: 120px"
+          class="language-select"
           @change="handleLanguageChange"
         >
           <a-select-option value="zh-CN">简体中文</a-select-option>
@@ -99,7 +109,16 @@
       </div>
     </a-layout-header>
     <a-layout>
-      <a-layout-sider width="280" class="main-layout-sider">
+      <a-layout-sider
+        :width="280"
+        :collapsed-width="0"
+        v-model:collapsed="siderCollapsed"
+        :trigger="null"
+        collapsible
+        class="main-layout-sider"
+        :breakpoint="'lg'"
+        @breakpoint="handleBreakpoint"
+      >
         <a-menu
           :theme="isDarkMode ? 'dark' : 'light'"
           mode="inline"
@@ -376,6 +395,7 @@ import {
 import { THEME_CONTEXT_KEY, THEME_MODES } from "@/utils/theme";
 
 const serverVersion = ref("");
+const siderCollapsed = ref(false);
 const themeContext = inject(THEME_CONTEXT_KEY, null);
 const isDarkMode = computed(() => themeContext?.isDarkMode?.value === true);
 
@@ -1856,6 +1876,14 @@ const handleOpenChange = (keys) => {
   openKeys.value = keys;
 };
 
+const toggleSider = () => {
+  siderCollapsed.value = !siderCollapsed.value;
+};
+
+const handleBreakpoint = (broken) => {
+  siderCollapsed.value = broken;
+};
+
 watch(
   () => route.path,
   async (newPath) => {
@@ -2003,4 +2031,136 @@ watch(
   color: var(--app-text-secondary);
   text-align: center;
 }
+
+.sider-trigger {
+  font-size: 18px;
+  line-height: 64px;
+  cursor: pointer;
+  transition: color 0.3s;
+  color: var(--app-text-color);
+  margin-right: 10px;
+}
+
+.sider-trigger:hover {
+  color: var(--app-primary-color, #1890ff);
+}
+
+.main-layout-logo {
+  height: 40px;
+  margin-right: 10px;
+}
+
+.version-button {
+  white-space: nowrap;
+}
+
+.username-button,
+.twofactor-button,
+.logout-button,
+.signin-button {
+  margin-right: 10px;
+}
+
+.language-select {
+  min-width: 120px;
+}
+
+@media (max-width: 1200px) {
+  .version-button {
+    display: none;
+  }
+}
+
+@media (max-width: 992px) {
+  .main-layout-brand-text {
+    display: none;
+  }
+
+  .twofactor-button {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .main-layout-header {
+    padding: 0 12px;
+    flex-wrap: wrap;
+  }
+
+  .main-layout-actions {
+    gap: 4px;
+  }
+
+  .username-button {
+    margin-right: 4px;
+  }
+
+  .logout-button {
+    margin-right: 4px;
+  }
+
+  .signin-button {
+    margin-right: 4px;
+  }
+
+  .main-layout-content {
+    padding: 12px;
+    min-height: 400px;
+  }
+
+  .language-select {
+    min-width: 100px;
+  }
+}
+
+@media (max-width: 576px) {
+  .main-layout-header {
+    padding: 0 8px;
+  }
+
+  .main-layout-brand {
+    gap: 6px;
+  }
+
+  .sider-trigger {
+    margin-right: 6px;
+  }
+
+  .main-layout-logo {
+    height: 32px;
+    margin-right: 6px;
+  }
+
+  .main-layout-actions {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+
+  .employee-check-in-button {
+    display: none;
+  }
+
+  .employee-check-in-day-count {
+    display: none;
+  }
+
+  .favorite-route-button {
+    margin-right: 4px;
+  }
+
+  .language-select {
+    min-width: 90px;
+    font-size: 12px;
+  }
+
+  .main-layout-content {
+    padding: 8px;
+  }
+
+  .main-layout-sider {
+    position: fixed !important;
+    z-index: 1000;
+    height: 100vh;
+  }
+}
 </style>
diff --git a/src/style.css b/src/style.css
index bb131d6..11d0c3d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -3,77 +3,49 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+* {
+  box-sizing: border-box;
 }
-a:hover {
-  color: #535bf2;
+
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  overflow-x: hidden;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+#app {
+  width: 100%;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
+a {
   font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
+  text-decoration: inherit;
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+@media (max-width: 768px) {
+  body {
+    font-size: 14px;
+  }
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
+@media (max-width: 576px) {
+  body {
+    font-size: 13px;
   }
 }
-- 
Gitee


From 50877cefc6de080b0e42f91dd31302ba1b872514 Mon Sep 17 00:00:00 2001
From: ck_yeun9 <jackson@oscode.top>
Date: Sat, 16 May 2026 14:24:01 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=98=BB=E6=96=AD?=
 =?UTF-8?q?=E9=A1=B9=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts    | 2 ++
 src/utils/icons.js | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/components.d.ts b/components.d.ts
index 5c08725..408f2db 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -93,6 +93,8 @@ declare module 'vue' {
     LinkOutlined: typeof import('@ant-design/icons-vue')['LinkOutlined']
     ListFilter: typeof import('./src/components/common/ListFilter.vue')['default']
     LoadingOutlined: typeof import('@ant-design/icons-vue')['LoadingOutlined']
+    MenuFoldOutlined: typeof import('@ant-design/icons-vue')['MenuFoldOutlined']
+    MenuUnfoldOutlined: typeof import('@ant-design/icons-vue')['MenuUnfoldOutlined']
     MoneyCollectOutlined: typeof import('@ant-design/icons-vue')['MoneyCollectOutlined']
     MoonOutlined: typeof import('@ant-design/icons-vue')['MoonOutlined']
     PlusOutlined: typeof import('@ant-design/icons-vue')['PlusOutlined']
diff --git a/src/utils/icons.js b/src/utils/icons.js
index 1f74a4a..d36b571 100644
--- a/src/utils/icons.js
+++ b/src/utils/icons.js
@@ -58,6 +58,8 @@ import {
   StarOutlined,
   StarFilled,
   CheckCircleOutlined,
+  MenuUnfoldOutlined,
+  MenuFoldOutlined,
 } from "@ant-design/icons-vue";
 
 export function registerAntdIcons(app) {
@@ -119,4 +121,6 @@ export function registerAntdIcons(app) {
   app.component("StarOutlined", StarOutlined);
   app.component("StarFilled", StarFilled);
   app.component("CheckCircleOutlined", CheckCircleOutlined);
+  app.component("MenuUnfoldOutlined", MenuUnfoldOutlined);
+  app.component("MenuFoldOutlined", MenuFoldOutlined);
 }
-- 
Gitee


From cb236da6755d1c5b3b450daa5e3c755e99ca715a Mon Sep 17 00:00:00 2001
From: ck_yeun9 <jackson@oscode.top>
Date: Sat, 16 May 2026 14:33:36 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=98=BB=E6=96=AD?=
 =?UTF-8?q?=E9=A1=B9=E3=80=82by=20Gemini?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/MainLayout.vue | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index dbfde5a..6c9c6d9 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -134,6 +134,14 @@
           </template>
         </a-menu>
       </a-layout-sider>
+
+      <!-- 遮罩层 -->
+      <div 
+        v-if="isMobile && !siderCollapsed" 
+        class="sider-mask" 
+        @click="toggleSider"
+      />
+
       <a-layout-content class="main-layout-content">
         <router-view />
       </a-layout-content>
@@ -313,7 +321,7 @@ import {
   watch,
   nextTick,
 } from "vue";
-import { useStorage } from "@vueuse/core";
+import { useStorage, useMediaQuery } from "@vueuse/core";
 import { useRoute, useRouter } from "vue-router";
 import {
   formatDateTime,
@@ -396,6 +404,7 @@ import { THEME_CONTEXT_KEY, THEME_MODES } from "@/utils/theme";
 
 const serverVersion = ref("");
 const siderCollapsed = ref(false);
+const isMobile = useMediaQuery('(max-width: 576px)');
 const themeContext = inject(THEME_CONTEXT_KEY, null);
 const isDarkMode = computed(() => themeContext?.isDarkMode?.value === true);
 
@@ -1881,7 +1890,9 @@ const toggleSider = () => {
 };
 
 const handleBreakpoint = (broken) => {
-  siderCollapsed.value = broken;
+  if (broken) {
+    siderCollapsed.value = true;
+  }
 };
 
 watch(
@@ -2163,4 +2174,14 @@ watch(
     height: 100vh;
   }
 }
+
+.sider-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.45);
+  z-index: 999;
+}
 </style>
-- 
Gitee


From ae5d4d3ad32757acfcf9edebe15db885ab0bcd92 Mon Sep 17 00:00:00 2001
From: ck_yeun9 <jackson@oscode.top>
Date: Sat, 16 May 2026 14:49:00 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E5=B1=95=E5=BC=80=E9=80=BB=E8=BE=91=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/MainLayout.vue | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 6c9c6d9..efa5306 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-layout>
+  <a-layout class="app-container">
     <a-layout-header class="main-layout-header">
       <div class="main-layout-brand">
         <MenuUnfoldOutlined
@@ -111,7 +111,7 @@
     <a-layout>
       <a-layout-sider
         :width="280"
-        :collapsed-width="0"
+        :collapsed-width="isMobile ? 0 : 80"
         v-model:collapsed="siderCollapsed"
         :trigger="null"
         collapsible
@@ -121,9 +121,9 @@
       >
         <a-menu
           :theme="isDarkMode ? 'dark' : 'light'"
-          mode="inline"
+          :mode="siderCollapsed ? 'vertical' : 'inline'"
           :selected-keys="selectedKeys"
-          :open-keys="openKeys"
+          :open-keys="siderCollapsed ? verticalOpenKeys : openKeys"
           @open-change="handleOpenChange"
         >
           <template
@@ -1881,10 +1881,22 @@ onUnmounted(() => {
   emitter.off("refresh-menu", eventHandler);
 });
 
+const verticalOpenKeys = ref([]);
+
 const handleOpenChange = (keys) => {
-  openKeys.value = keys;
+  if (siderCollapsed.value) {
+    verticalOpenKeys.value = keys;
+  } else {
+    openKeys.value = keys;
+  }
 };
 
+watch(siderCollapsed, (val) => {
+  if (val) {
+    verticalOpenKeys.value = [];
+  }
+});
+
 const toggleSider = () => {
   siderCollapsed.value = !siderCollapsed.value;
 };
@@ -1921,6 +1933,10 @@ watch(
 </script>
 
 <style>
+.app-container {
+  min-height: 100vh;
+}
+
 .main-layout-header {
   background: var(--app-header-bg) !important;
   backdrop-filter: blur(16px);
-- 
Gitee


From 8fc44165bf34cce322c4c0064e471e42b333c04f Mon Sep 17 00:00:00 2001
From: ck_yeun9 <jackson@oscode.top>
Date: Sat, 16 May 2026 15:20:48 +0800
Subject: [PATCH 5/5] add auto-scroll for table.

---
 fix_tables.cjs                                | 53 +++++++++++++++++++
 src/views/base/DepartmentView.vue             |  1 +
 src/views/base/NationView.vue                 |  1 +
 src/views/base/NoticeTypeView.vue             |  1 +
 src/views/base/PassportView.vue               |  1 +
 src/views/base/PositionView.vue               |  1 +
 src/views/base/PromotionContentView.vue       |  1 +
 src/views/base/QualificationView.vue          |  1 +
 .../customermanagement/CustomerSpendView.vue  |  1 +
 .../customermanagement/CustomerTypeView.vue   |  1 +
 src/views/customermanagement/CustomerView.vue |  6 ++-
 src/views/customermanagement/VipLevelView.vue |  1 +
 src/views/finance/InternalFinanceView.vue     |  1 +
 src/views/home/ProfileCenterView.vue          |  3 ++
 .../EmployeeDetailView.vue                    |  7 ++-
 .../StaffManagementView.vue                   |  1 +
 .../HydroelectricityInfoView.vue              |  1 +
 .../GoodsmanagementView.vue                   | 16 +++---
 .../operationmanagement/OperationLogView.vue  |  2 +-
 .../operationmanagement/RequestLogView.vue    |  2 +-
 src/views/roominformation/CheckoutForm.vue    |  2 +-
 .../roominformation/ReserManagementView.vue   |  1 +
 src/views/roominformation/RoomConfigView.vue  |  1 +
 .../RoomGoodsConsumptionDialog.vue            |  4 +-
 .../roominformation/RoomManagementView.vue    |  1 +
 src/views/supervision/SupervisionView.vue     |  1 +
 .../AdminTypeManagementView.vue               | 36 +++++++++----
 .../AdministratorManagementView.vue           | 28 +++++++---
 .../systemmanagement/MenuManagementView.vue   | 16 +++---
 .../systemmanagement/QuartzJobListView.vue    |  2 +-
 .../systemmanagement/RoleManagementView.vue   | 22 ++++----
 .../UnifiedAccountPermissionView.vue          |  2 +
 32 files changed, 171 insertions(+), 47 deletions(-)
 create mode 100644 fix_tables.cjs

diff --git a/fix_tables.cjs b/fix_tables.cjs
new file mode 100644
index 0000000..2407f16
--- /dev/null
+++ b/fix_tables.cjs
@@ -0,0 +1,53 @@
+const fs = require("fs");
+const path = require("path");
+
+function walk(dir) {
+  let results = [];
+  const list = fs.readdirSync(dir);
+  list.forEach((file) => {
+    file = path.join(dir, file);
+    const stat = fs.statSync(file);
+    if (stat && stat.isDirectory()) {
+      results = results.concat(walk(file));
+    } else if (file.endsWith(".vue")) {
+      results.push(file);
+    }
+  });
+  return results;
+}
+
+const files = walk("./src/views");
+files.forEach((file) => {
+  let content = fs.readFileSync(file, "utf8");
+  let originalContent = content;
+
+  content = content.replace(/<a-table([\s\S]*?)>/g, (match, p1) => {
+    let scrollStr = "";
+
+    let stripped = p1.replace(/:scroll\s*=\s*"\{([\s\S]*?)\}"/g, (m, inner) => {
+      scrollStr += inner + ", ";
+      return "";
+    });
+    stripped = stripped.replace(
+      /:scroll\s*=\s*'\{([\s\S]*?)\}'/g,
+      (m, inner) => {
+        scrollStr += inner + ", ";
+        return "";
+      },
+    );
+
+    let newScrollProps = "x: 'max-content'";
+    if (scrollStr) {
+      if (scrollStr.includes("y:")) {
+        const yMatch = scrollStr.match(/y:\s*\d+/);
+        if (yMatch) newScrollProps += ", " + yMatch[0];
+      }
+    }
+
+    return `<a-table :scroll="{ ${newScrollProps} }"${stripped}>`;
+  });
+
+  if (content !== originalContent) {
+    fs.writeFileSync(file, content, "utf8");
+  }
+});
diff --git a/src/views/base/DepartmentView.vue b/src/views/base/DepartmentView.vue
index 6715683..923f1fa 100644
--- a/src/views/base/DepartmentView.vue
+++ b/src/views/base/DepartmentView.vue
@@ -90,6 +90,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[DepartmentFields.ID]"
       :columns="columns"
       :data-source="departments"
diff --git a/src/views/base/NationView.vue b/src/views/base/NationView.vue
index c657d8d..238ca57 100644
--- a/src/views/base/NationView.vue
+++ b/src/views/base/NationView.vue
@@ -91,6 +91,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[NationFields.ID]"
       :columns="columns"
       :data-source="nations"
diff --git a/src/views/base/NoticeTypeView.vue b/src/views/base/NoticeTypeView.vue
index 787b408..bd04428 100644
--- a/src/views/base/NoticeTypeView.vue
+++ b/src/views/base/NoticeTypeView.vue
@@ -90,6 +90,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[NoticeTypeFields.ID]"
       :columns="columns"
       :data-source="notices"
diff --git a/src/views/base/PassportView.vue b/src/views/base/PassportView.vue
index 6c2ca24..1c9be5e 100644
--- a/src/views/base/PassportView.vue
+++ b/src/views/base/PassportView.vue
@@ -90,6 +90,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[PassportFields.ID]"
       :columns="columns"
       :data-source="passports"
diff --git a/src/views/base/PositionView.vue b/src/views/base/PositionView.vue
index 9b734e5..585a8ac 100644
--- a/src/views/base/PositionView.vue
+++ b/src/views/base/PositionView.vue
@@ -90,6 +90,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[PositionFields.ID]"
       :columns="columns"
       :data-source="positions"
diff --git a/src/views/base/PromotionContentView.vue b/src/views/base/PromotionContentView.vue
index 9870c29..7d3a0ff 100644
--- a/src/views/base/PromotionContentView.vue
+++ b/src/views/base/PromotionContentView.vue
@@ -90,6 +90,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[PromotionContentFields.ID]"
       :columns="columns"
       :data-source="promotionContents"
diff --git a/src/views/base/QualificationView.vue b/src/views/base/QualificationView.vue
index b3d7039..28df24a 100644
--- a/src/views/base/QualificationView.vue
+++ b/src/views/base/QualificationView.vue
@@ -90,6 +90,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[EducationFields.ID]"
       :columns="columns"
       :data-source="qualifications"
diff --git a/src/views/customermanagement/CustomerSpendView.vue b/src/views/customermanagement/CustomerSpendView.vue
index 4741ffd..425106b 100644
--- a/src/views/customermanagement/CustomerSpendView.vue
+++ b/src/views/customermanagement/CustomerSpendView.vue
@@ -66,6 +66,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[SpendInfoFields.ID]"
       :columns="filteredColumns"
       :data-source="spends"
diff --git a/src/views/customermanagement/CustomerTypeView.vue b/src/views/customermanagement/CustomerTypeView.vue
index 5259f9d..cf67d72 100644
--- a/src/views/customermanagement/CustomerTypeView.vue
+++ b/src/views/customermanagement/CustomerTypeView.vue
@@ -91,6 +91,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[CustomerTypeFields.ID]"
       :columns="columns"
       :data-source="customerTypes"
diff --git a/src/views/customermanagement/CustomerView.vue b/src/views/customermanagement/CustomerView.vue
index c231aae..0d617c6 100644
--- a/src/views/customermanagement/CustomerView.vue
+++ b/src/views/customermanagement/CustomerView.vue
@@ -91,6 +91,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[CustomerFields.ID]"
       :columns="filteredColumns"
       :data-source="customers"
@@ -215,7 +216,10 @@
           :label="customerBirthdayLabel"
           :name="CustomerFields.BIRTH_DATE"
         >
-          <a-date-picker v-model:value="form[CustomerFields.BIRTH_DATE]" :placeholder="t('message.pleaseSelectDate')" />
+          <a-date-picker
+            v-model:value="form[CustomerFields.BIRTH_DATE]"
+            :placeholder="t('message.pleaseSelectDate')"
+          />
         </a-form-item>
 
         <a-form-item :label="customerTypeLabel" :name="CustomerFields.TYPE">
diff --git a/src/views/customermanagement/VipLevelView.vue b/src/views/customermanagement/VipLevelView.vue
index 1a0ce94..f919238 100644
--- a/src/views/customermanagement/VipLevelView.vue
+++ b/src/views/customermanagement/VipLevelView.vue
@@ -90,6 +90,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[VipRuleFields.ID]"
       :columns="filteredColumns"
       :data-source="viprules"
diff --git a/src/views/finance/InternalFinanceView.vue b/src/views/finance/InternalFinanceView.vue
index cfccba2..1883ace 100644
--- a/src/views/finance/InternalFinanceView.vue
+++ b/src/views/finance/InternalFinanceView.vue
@@ -89,6 +89,7 @@
       </a-collapse-panel>
     </a-collapse>
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[InternalFinanceFields.ID]"
       :columns="filteredColumns"
       :data-source="cashs"
diff --git a/src/views/home/ProfileCenterView.vue b/src/views/home/ProfileCenterView.vue
index 2b373f5..2a45976 100644
--- a/src/views/home/ProfileCenterView.vue
+++ b/src/views/home/ProfileCenterView.vue
@@ -698,6 +698,7 @@
                 class="profile-panel-card"
               >
                 <a-table
+                  :scroll="{ x: 'max-content' }"
                   :columns="rolePermissionColumns"
                   :data-source="rolePermissions"
                   :pagination="{ pageSize: 8 }"
@@ -713,6 +714,7 @@
                 class="profile-panel-card"
               >
                 <a-table
+                  :scroll="{ x: 'max-content' }"
                   :columns="directPermissionColumns"
                   :data-source="directPermissions"
                   :pagination="{ pageSize: 8 }"
@@ -728,6 +730,7 @@
                 class="profile-panel-card"
               >
                 <a-table
+                  :scroll="{ x: 'max-content' }"
                   :columns="effectivePermissionColumns"
                   :data-source="effectivePermissions"
                   :pagination="{ pageSize: 10 }"
diff --git a/src/views/humanresourcemanagement/EmployeeDetailView.vue b/src/views/humanresourcemanagement/EmployeeDetailView.vue
index 4844a5f..2f75ad5 100644
--- a/src/views/humanresourcemanagement/EmployeeDetailView.vue
+++ b/src/views/humanresourcemanagement/EmployeeDetailView.vue
@@ -132,6 +132,7 @@
             >
           </template>
           <a-table
+            :scroll="{ x: 'max-content' }"
             :data-source="workRewardPunishment"
             :columns="rewardPunishmentFilterColumns"
             :row-key="(record) => record.Id"
@@ -168,6 +169,7 @@
             >
           </template>
           <a-table
+            :scroll="{ x: 'max-content' }"
             :data-source="workCheckInfo"
             :columns="checkFilterColumns"
             :row-key="(record) => record.Id"
@@ -208,6 +210,7 @@
             </a-button>
           </template>
           <a-table
+            :scroll="{ x: 'max-content' }"
             :data-source="workHistory"
             :columns="historyFilterColumns"
             :row-key="(record) => record.Id"
@@ -252,6 +255,7 @@
         >
           <a-spin :spinning="modalLoading">
             <a-table
+              :scroll="{ x: 'max-content' }"
               :columns="modalColumns"
               :data-source="modalData"
               :row-key="(record) => record.Id"
@@ -865,6 +869,7 @@ onMounted(loadData);
 .info-card {
   border-radius: 8px;
   box-shadow: var(--app-shadow-soft);
+  min-width: 0;
 }
 
 .tag {
@@ -878,7 +883,7 @@ onMounted(loadData);
 
 @media (min-width: 768px) {
   .info-sections {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr));
   }
 
   .info-card:last-child {
diff --git a/src/views/humanresourcemanagement/StaffManagementView.vue b/src/views/humanresourcemanagement/StaffManagementView.vue
index 6e6daf9..97511e2 100644
--- a/src/views/humanresourcemanagement/StaffManagementView.vue
+++ b/src/views/humanresourcemanagement/StaffManagementView.vue
@@ -70,6 +70,7 @@
       </a-collapse-panel>
     </a-collapse>
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[EmployeeFields.ID]"
       :columns="filteredColumns"
       :data-source="staffs"
diff --git a/src/views/hydroelectricity/HydroelectricityInfoView.vue b/src/views/hydroelectricity/HydroelectricityInfoView.vue
index f70fd28..a0b180a 100644
--- a/src/views/hydroelectricity/HydroelectricityInfoView.vue
+++ b/src/views/hydroelectricity/HydroelectricityInfoView.vue
@@ -66,6 +66,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[EnergyManagementFields.ID]"
       :columns="columns"
       :data-source="hydroelectricitys"
diff --git a/src/views/materialmanagement/GoodsmanagementView.vue b/src/views/materialmanagement/GoodsmanagementView.vue
index 77e24f6..8dbe4cf 100644
--- a/src/views/materialmanagement/GoodsmanagementView.vue
+++ b/src/views/materialmanagement/GoodsmanagementView.vue
@@ -90,6 +90,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[GoodsFields.ID]"
       :columns="columns"
       :data-source="goodss"
@@ -220,9 +221,7 @@
             {{ selectedRecord?.[GoodsFields.DATA_INS_USER] }}
           </a-descriptions-item>
           <a-descriptions-item :label="createdTimeLabel">
-            {{
-              formatDateTime(selectedRecord?.[GoodsFields.DATA_INS_DATE])
-            }}
+            {{ formatDateTime(selectedRecord?.[GoodsFields.DATA_INS_DATE]) }}
           </a-descriptions-item>
         </template>
         <template v-if="selectedRecord?.[GoodsFields.DATA_CHG_USER]">
@@ -230,9 +229,7 @@
             {{ selectedRecord?.[GoodsFields.DATA_CHG_USER] }}
           </a-descriptions-item>
           <a-descriptions-item :label="lastUpdatedTimeLabel">
-            {{
-              formatDateTime(selectedRecord?.[GoodsFields.DATA_CHG_DATE])
-            }}
+            {{ formatDateTime(selectedRecord?.[GoodsFields.DATA_CHG_DATE]) }}
           </a-descriptions-item>
         </template>
       </a-descriptions>
@@ -259,7 +256,12 @@ import {
   updateGoods,
   deleteGoods,
 } from "@/api/materialmanagement/goodsapi";
-import { showErrorNotification, showSuccessNotification, formatDateTime, exportTableToCsv } from "@/utils/index";
+import {
+  showErrorNotification,
+  showSuccessNotification,
+  formatDateTime,
+  exportTableToCsv,
+} from "@/utils/index";
 import generateUniqueId from "@/utils/uniquecode";
 import ListFilter from "@/components/common/ListFilter.vue";
 import { getGoodsFilterConfig } from "@/filters/materialmanagement/goods.filter.config";
diff --git a/src/views/operationmanagement/OperationLogView.vue b/src/views/operationmanagement/OperationLogView.vue
index f308dd9..57e84b3 100644
--- a/src/views/operationmanagement/OperationLogView.vue
+++ b/src/views/operationmanagement/OperationLogView.vue
@@ -82,6 +82,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[LogFields.ID]"
       :columns="columns"
       :data-source="logs"
@@ -89,7 +90,6 @@
       :pagination="pagination"
       :row-selection="rowSelection"
       :custom-row="customRow"
-      :scroll="{ x: 1500 }"
       bordered
       @change="handleTableChange"
     >
diff --git a/src/views/operationmanagement/RequestLogView.vue b/src/views/operationmanagement/RequestLogView.vue
index ad42351..e12a8e9 100644
--- a/src/views/operationmanagement/RequestLogView.vue
+++ b/src/views/operationmanagement/RequestLogView.vue
@@ -57,11 +57,11 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :columns="columns"
       :data-source="logs"
       :loading="loading"
       :pagination="pagination"
-      :scroll="{ x: 1500 }"
       bordered
       @change="handleTableChange"
     >
diff --git a/src/views/roominformation/CheckoutForm.vue b/src/views/roominformation/CheckoutForm.vue
index 5a0ceaf..a0bb0bc 100644
--- a/src/views/roominformation/CheckoutForm.vue
+++ b/src/views/roominformation/CheckoutForm.vue
@@ -73,12 +73,12 @@
     <div class="history-title">{{ t("message.customerspend") }}</div>
     <a-table
       :key="spendTableRenderKey"
+      :scroll="{ x: 'max-content', y: 180 }"
       :columns="spendColumns"
       :data-source="spendRows"
       :loading="spendLoading"
       :pagination="spendPagination"
       :row-key="(record) => record[SpendInfoFields.ID] || record.key"
-      :scroll="{ y: 180 }"
       size="small"
       bordered
       @change="handleSpendTableChange"
diff --git a/src/views/roominformation/ReserManagementView.vue b/src/views/roominformation/ReserManagementView.vue
index e902abd..099a09d 100644
--- a/src/views/roominformation/ReserManagementView.vue
+++ b/src/views/roominformation/ReserManagementView.vue
@@ -89,6 +89,7 @@
       </a-collapse-panel>
     </a-collapse>
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[ReserFields.ID]"
       :columns="filteredColumns"
       :data-source="displayResers"
diff --git a/src/views/roominformation/RoomConfigView.vue b/src/views/roominformation/RoomConfigView.vue
index 212f8f5..c9bd38e 100644
--- a/src/views/roominformation/RoomConfigView.vue
+++ b/src/views/roominformation/RoomConfigView.vue
@@ -90,6 +90,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[RoomConfigFields.ID]"
       :columns="columns"
       :data-source="roomconfigs"
diff --git a/src/views/roominformation/RoomGoodsConsumptionDialog.vue b/src/views/roominformation/RoomGoodsConsumptionDialog.vue
index 933e56c..ea2aa13 100644
--- a/src/views/roominformation/RoomGoodsConsumptionDialog.vue
+++ b/src/views/roominformation/RoomGoodsConsumptionDialog.vue
@@ -4,6 +4,7 @@
       <section class="goods-panel">
         <div class="panel-title">商品列表</div>
         <a-table
+          :scroll="{ x: 'max-content' }"
           :columns="goodsColumns"
           :data-source="goodsRows"
           :loading="goodsLoading"
@@ -11,7 +12,6 @@
           :row-key="(record) => record[GoodsFields.ID]"
           :custom-row="getGoodsRowProps"
           :row-class-name="getGoodsRowClassName"
-          :scroll="{ x: 520 }"
           size="small"
           bordered
           @change="handleGoodsTableChange"
@@ -88,6 +88,7 @@
 
         <div class="panel-title">房间消费列表</div>
         <a-table
+          :scroll="{ x: 'max-content' }"
           :columns="spendColumns"
           :data-source="spendRows"
           :loading="spendLoading"
@@ -96,7 +97,6 @@
           :row-selection="spendRowSelection"
           :custom-row="getSpendRowProps"
           :row-class-name="getSpendRowClassName"
-          :scroll="{ x: 760 }"
           size="small"
           bordered
           @change="handleSpendTableChange"
diff --git a/src/views/roominformation/RoomManagementView.vue b/src/views/roominformation/RoomManagementView.vue
index 12980b3..ab355ed 100644
--- a/src/views/roominformation/RoomManagementView.vue
+++ b/src/views/roominformation/RoomManagementView.vue
@@ -90,6 +90,7 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[RoomFields.ID]"
       :columns="filteredColumns"
       :data-source="rooms"
diff --git a/src/views/supervision/SupervisionView.vue b/src/views/supervision/SupervisionView.vue
index 7c52ae3..06228e6 100644
--- a/src/views/supervision/SupervisionView.vue
+++ b/src/views/supervision/SupervisionView.vue
@@ -89,6 +89,7 @@
       </a-collapse-panel>
     </a-collapse>
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[SupervisionFields.ID]"
       :columns="filteredColumns"
       :data-source="supervisioninfos"
diff --git a/src/views/systemmanagement/AdminTypeManagementView.vue b/src/views/systemmanagement/AdminTypeManagementView.vue
index 14d9ff5..1a56589 100644
--- a/src/views/systemmanagement/AdminTypeManagementView.vue
+++ b/src/views/systemmanagement/AdminTypeManagementView.vue
@@ -89,6 +89,7 @@
       </a-collapse-panel>
     </a-collapse>
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[AdministratorTypeFields.ID]"
       :columns="columns"
       :data-source="admintypes"
@@ -182,23 +183,31 @@
         <a-descriptions-item :label="typeNameLabel">
           {{ selectedRecord?.[AdministratorTypeFields.NAME] }}
         </a-descriptions-item>
-        <template v-if="selectedRecord?.[AdministratorTypeFields.DATA_INS_USER]">
+        <template
+          v-if="selectedRecord?.[AdministratorTypeFields.DATA_INS_USER]"
+        >
           <a-descriptions-item :label="createdByLabel">
             {{ selectedRecord?.[AdministratorTypeFields.DATA_INS_USER] }}
           </a-descriptions-item>
           <a-descriptions-item :label="createdTimeLabel">
             {{
-              formatDateTime(selectedRecord?.[AdministratorTypeFields.DATA_INS_DATE])
+              formatDateTime(
+                selectedRecord?.[AdministratorTypeFields.DATA_INS_DATE],
+              )
             }}
           </a-descriptions-item>
         </template>
-        <template v-if="selectedRecord?.[AdministratorTypeFields.DATA_CHG_USER]">
+        <template
+          v-if="selectedRecord?.[AdministratorTypeFields.DATA_CHG_USER]"
+        >
           <a-descriptions-item :label="lastUpdatedByLabel">
             {{ selectedRecord?.[AdministratorTypeFields.DATA_CHG_USER] }}
           </a-descriptions-item>
           <a-descriptions-item :label="lastUpdatedTimeLabel">
             {{
-              formatDateTime(selectedRecord?.[AdministratorTypeFields.DATA_CHG_DATE])
+              formatDateTime(
+                selectedRecord?.[AdministratorTypeFields.DATA_CHG_DATE],
+              )
             }}
           </a-descriptions-item>
         </template>
@@ -211,7 +220,12 @@
 import { ref, onMounted, computed, reactive } from "vue";
 import { useRoute } from "vue-router";
 import { getPageTitle } from "@/utils/pageTitle";
-import { showErrorNotification, showSuccessNotification, exportTableToCsv, formatDateTime } from "@/utils/index";
+import {
+  showErrorNotification,
+  showSuccessNotification,
+  exportTableToCsv,
+  formatDateTime,
+} from "@/utils/index";
 import {
   fetchAdminTypes,
   addAdminType,
@@ -509,10 +523,14 @@ const fetchAdminTypeData = async (ignorePaging = false) => {
         [AdministratorTypeFields.NUMBER]: item[AdministratorTypeFields.NUMBER],
         [AdministratorTypeFields.NAME]: item[AdministratorTypeFields.NAME],
         [BaseFields.IS_DELETED]: item[BaseFields.IS_DELETED] ?? 0,
-        [AdministratorTypeFields.DATA_INS_USER]: item[AdministratorTypeFields.DATA_INS_USER],
-        [AdministratorTypeFields.DATA_INS_DATE]: item[AdministratorTypeFields.DATA_INS_DATE],
-        [AdministratorTypeFields.DATA_CHG_USER]: item[AdministratorTypeFields.DATA_CHG_USER],
-        [AdministratorTypeFields.DATA_CHG_DATE]: item[AdministratorTypeFields.DATA_CHG_DATE],
+        [AdministratorTypeFields.DATA_INS_USER]:
+          item[AdministratorTypeFields.DATA_INS_USER],
+        [AdministratorTypeFields.DATA_INS_DATE]:
+          item[AdministratorTypeFields.DATA_INS_DATE],
+        [AdministratorTypeFields.DATA_CHG_USER]:
+          item[AdministratorTypeFields.DATA_CHG_USER],
+        [AdministratorTypeFields.DATA_CHG_DATE]:
+          item[AdministratorTypeFields.DATA_CHG_DATE],
         [AdministratorTypeFields.SELECTED]: false,
       }));
       pagination.total = result.TotalCount;
diff --git a/src/views/systemmanagement/AdministratorManagementView.vue b/src/views/systemmanagement/AdministratorManagementView.vue
index c9f0eae..2840318 100644
--- a/src/views/systemmanagement/AdministratorManagementView.vue
+++ b/src/views/systemmanagement/AdministratorManagementView.vue
@@ -89,6 +89,7 @@
       </a-collapse-panel>
     </a-collapse>
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[AdministratorFields.ID]"
       :columns="filteredColumns"
       :data-source="admins"
@@ -248,7 +249,9 @@
           </a-descriptions-item>
           <a-descriptions-item :label="createdTimeLabel">
             {{
-              formatDateTime(selectedRecord?.[AdministratorFields.DATA_INS_DATE])
+              formatDateTime(
+                selectedRecord?.[AdministratorFields.DATA_INS_DATE],
+              )
             }}
           </a-descriptions-item>
         </template>
@@ -258,7 +261,9 @@
           </a-descriptions-item>
           <a-descriptions-item :label="lastUpdatedTimeLabel">
             {{
-              formatDateTime(selectedRecord?.[AdministratorFields.DATA_CHG_DATE])
+              formatDateTime(
+                selectedRecord?.[AdministratorFields.DATA_CHG_DATE],
+              )
             }}
           </a-descriptions-item>
         </template>
@@ -271,7 +276,12 @@
 import { ref, onMounted, computed, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { getPageTitle } from "@/utils/pageTitle";
-import { showErrorNotification, showSuccessNotification, formatDateTime, exportTableToCsv } from "@/utils/index";
+import {
+  showErrorNotification,
+  showSuccessNotification,
+  formatDateTime,
+  exportTableToCsv,
+} from "@/utils/index";
 import {
   fetchAdmins,
   addAdmin,
@@ -589,10 +599,14 @@ const fetchAdministratorData = async (ignorePaging = false) => {
         [AdministratorFields.ISSUPERADMINDESCRIPTION]:
           item[AdministratorFields.ISSUPERADMINDESCRIPTION],
         [BaseFields.IS_DELETED]: item[BaseFields.IS_DELETED] ?? 0,
-        [AdministratorFields.DATA_INS_USER]: item[AdministratorFields.DATA_INS_USER],
-        [AdministratorFields.DATA_INS_DATE]: item[AdministratorFields.DATA_INS_DATE],
-        [AdministratorFields.DATA_CHG_USER]: item[AdministratorFields.DATA_CHG_USER],
-        [AdministratorFields.DATA_CHG_DATE]: item[AdministratorFields.DATA_CHG_DATE],
+        [AdministratorFields.DATA_INS_USER]:
+          item[AdministratorFields.DATA_INS_USER],
+        [AdministratorFields.DATA_INS_DATE]:
+          item[AdministratorFields.DATA_INS_DATE],
+        [AdministratorFields.DATA_CHG_USER]:
+          item[AdministratorFields.DATA_CHG_USER],
+        [AdministratorFields.DATA_CHG_DATE]:
+          item[AdministratorFields.DATA_CHG_DATE],
         [AdministratorFields.SELECTED]: false,
       }));
       pagination.total = result.TotalCount;
diff --git a/src/views/systemmanagement/MenuManagementView.vue b/src/views/systemmanagement/MenuManagementView.vue
index 6b7efab..b421532 100644
--- a/src/views/systemmanagement/MenuManagementView.vue
+++ b/src/views/systemmanagement/MenuManagementView.vue
@@ -89,6 +89,7 @@
       </a-collapse-panel>
     </a-collapse>
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[MenuFields.ID]"
       :columns="columns"
       :data-source="menus"
@@ -211,9 +212,7 @@
             {{ selectedRecord?.[MenuFields.DATA_INS_USER] }}
           </a-descriptions-item>
           <a-descriptions-item :label="createdTimeLabel">
-            {{
-              formatDateTime(selectedRecord?.[MenuFields.DATA_INS_DATE])
-            }}
+            {{ formatDateTime(selectedRecord?.[MenuFields.DATA_INS_DATE]) }}
           </a-descriptions-item>
         </template>
         <template v-if="selectedRecord?.[MenuFields.DATA_CHG_USER]">
@@ -221,9 +220,7 @@
             {{ selectedRecord?.[MenuFields.DATA_CHG_USER] }}
           </a-descriptions-item>
           <a-descriptions-item :label="lastUpdatedTimeLabel">
-            {{
-              formatDateTime(selectedRecord?.[MenuFields.DATA_CHG_DATE])
-            }}
+            {{ formatDateTime(selectedRecord?.[MenuFields.DATA_CHG_DATE]) }}
           </a-descriptions-item>
         </template>
       </a-descriptions>
@@ -235,7 +232,12 @@
 import { ref, onMounted, computed, reactive } from "vue";
 import { useRoute } from "vue-router";
 import { getPageTitle } from "@/utils/pageTitle";
-import { showErrorNotification, showSuccessNotification, exportTableToCsv, formatDateTime } from "@/utils/index";
+import {
+  showErrorNotification,
+  showSuccessNotification,
+  exportTableToCsv,
+  formatDateTime,
+} from "@/utils/index";
 import {
   fetchMenus,
   addMenu,
diff --git a/src/views/systemmanagement/QuartzJobListView.vue b/src/views/systemmanagement/QuartzJobListView.vue
index 4cdcb84..ffdd963 100644
--- a/src/views/systemmanagement/QuartzJobListView.vue
+++ b/src/views/systemmanagement/QuartzJobListView.vue
@@ -57,12 +57,12 @@
     </a-collapse>
 
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record.__rowKey"
       :columns="columns"
       :data-source="filteredJobs"
       :loading="loading"
       :pagination="pagination"
-      :scroll="{ x: 1600 }"
       bordered
       @change="handleTableChange"
     >
diff --git a/src/views/systemmanagement/RoleManagementView.vue b/src/views/systemmanagement/RoleManagementView.vue
index 2ea8772..ebe050f 100644
--- a/src/views/systemmanagement/RoleManagementView.vue
+++ b/src/views/systemmanagement/RoleManagementView.vue
@@ -89,6 +89,7 @@
       </a-collapse-panel>
     </a-collapse>
     <a-table
+      :scroll="{ x: 'max-content' }"
       :row-key="(record) => record[RoleFields.ID]"
       :columns="columns"
       :data-source="roles"
@@ -116,7 +117,8 @@
           >
             <EyeOutlined style="font-size: 16px" />
           </a-button>
-          <a-button v-if="record[BaseFields.IS_DELETED] != 1"
+          <a-button
+            v-if="record[BaseFields.IS_DELETED] != 1"
             v-perm="RoleManagementPermissions.GRANT"
             type="link"
             size="small"
@@ -124,7 +126,8 @@
             @click="openRoleGrantPage(record)"
             ><SafetyOutlined style="font-size: 16px"
           /></a-button>
-          <a-button v-if="record[BaseFields.IS_DELETED] != 1"
+          <a-button
+            v-if="record[BaseFields.IS_DELETED] != 1"
             v-perm="RoleManagementPermissions.SYSTEM_ROLE_GRANT"
             type="link"
             size="small"
@@ -206,9 +209,7 @@
             {{ selectedRecord?.[RoleFields.DATA_INS_USER] }}
           </a-descriptions-item>
           <a-descriptions-item :label="createdTimeLabel">
-            {{
-              formatDateTime(selectedRecord?.[RoleFields.DATA_INS_DATE])
-            }}
+            {{ formatDateTime(selectedRecord?.[RoleFields.DATA_INS_DATE]) }}
           </a-descriptions-item>
         </template>
         <template v-if="selectedRecord?.[RoleFields.DATA_CHG_USER]">
@@ -216,9 +217,7 @@
             {{ selectedRecord?.[RoleFields.DATA_CHG_USER] }}
           </a-descriptions-item>
           <a-descriptions-item :label="lastUpdatedTimeLabel">
-            {{
-              formatDateTime(selectedRecord?.[RoleFields.DATA_CHG_DATE])
-            }}
+            {{ formatDateTime(selectedRecord?.[RoleFields.DATA_CHG_DATE]) }}
           </a-descriptions-item>
         </template>
       </a-descriptions>
@@ -266,7 +265,12 @@
 import { ref, onMounted, computed, reactive, onBeforeUnmount } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { getPageTitle } from "@/utils/pageTitle";
-import { showErrorNotification, showSuccessNotification, exportTableToCsv, formatDateTime } from "@/utils/index";
+import {
+  showErrorNotification,
+  showSuccessNotification,
+  exportTableToCsv,
+  formatDateTime,
+} from "@/utils/index";
 import {
   fetchRoles,
   addRole,
diff --git a/src/views/systemmanagement/UnifiedAccountPermissionView.vue b/src/views/systemmanagement/UnifiedAccountPermissionView.vue
index 3cfc0d7..100bb6e 100644
--- a/src/views/systemmanagement/UnifiedAccountPermissionView.vue
+++ b/src/views/systemmanagement/UnifiedAccountPermissionView.vue
@@ -12,6 +12,7 @@
           </div>
 
           <a-table
+            :scroll="{ x: 'max-content' }"
             :row-key="rowKeyComputed"
             :columns="userColumns"
             :data-source="users"
@@ -43,6 +44,7 @@
           </div>
 
           <a-table
+            :scroll="{ x: 'max-content' }"
             :columns="rolePermColumns"
             :data-source="userRolePermissions"
             :row-key="rpRowKey"
-- 
Gitee