🎈 perf: 优化配置页面展示效果

src/pages/admin/systemConfig/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="admin-config-page">
+  <div class="store-page admin-config-page">
     <Breadcrumb />
 
     <a-card title="基础配置" class="config-card">
@@ -18,7 +18,14 @@
         <a-tab-pane v-for="item in configTypes" :key="item.key" :title="item.label" />
       </a-tabs>
 
-      <a-table :data="currentList" :loading="loading" :pagination="false" row-key="config_name">
+      <a-table
+        class="config-table"
+        :data="currentList"
+        :loading="loading"
+        :pagination="false"
+        :scroll="{ x: 760 }"
+        row-key="config_name"
+      >
         <template #columns>
           <a-table-column title="方案名称" data-index="config_name" :width="180" />
           <a-table-column title="配置摘要">
@@ -527,10 +534,6 @@ onMounted(load)
 </script>
 
 <style scoped>
-.admin-config-page {
-  padding-bottom: 24px;
-}
-
 .config-card {
   border-radius: 8px;
 }
@@ -544,8 +547,12 @@ onMounted(load)
 }
 
 .summary {
+  display: block;
   color: var(--color-text-2);
-  word-break: break-all;
+  line-height: 1.6;
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .switch-row {
@@ -603,6 +610,26 @@ onMounted(load)
 }
 
 @media (max-width: 640px) {
+  :deep(.arco-card-body) {
+    padding: 14px 12px;
+  }
+
+  :deep(.arco-card-header) {
+    padding: 12px;
+  }
+
+  .hint {
+    line-height: 1.6;
+  }
+
+  .config-tabs {
+    overflow-x: auto;
+  }
+
+  .config-table {
+    width: 100%;
+  }
+
   .editable-row {
     grid-template-columns: 1fr;
   }