refactor(system/config): 重构系统配置页面

src/views/system/config/index.vue

@@ -1,21 +1,18 @@
 <template>
-  <div class="gi_page">
-    <a-card class="general-card" title="系统配置">
-      <a-tabs v-model:active-key="activeKey" position="right" @change="change">
-        <a-tab-pane key="1" title="基础配置">
-          <BasicSetting />
-        </a-tab-pane>
-        <a-tab-pane key="2" title="邮件配置">
-          <MailSetting />
-        </a-tab-pane>
-        <a-tab-pane key="3" title="安全配置">
-          <SecuritySetting />
-        </a-tab-pane>
-      </a-tabs>
-      <!-- <keep-alive>
-        <component :is="PanMap[activeKey]" />
-      </keep-alive> -->
-    </a-card>
+  <div class="table-page">
+    <a-row justify="space-between" align="center" class="header page_header">
+      <a-space wrap>
+        <div class="title">系统配置</div>
+      </a-space>
+    </a-row>
+    <a-tabs v-model:active-key="activeKey" type="card-gutter" size="large" @change="change">
+      <a-tab-pane key="1" title="基础配置" />
+      <a-tab-pane key="2" title="邮件配置" />
+      <a-tab-pane key="3" title="安全配置" />
+    </a-tabs>
+    <keep-alive>
+      <component :is="PanMap[activeKey]" />
+    </keep-alive>
   </div>
 </template>
 
@@ -26,11 +23,13 @@ import MailSetting from './components/MailSetting.vue'
 import SecuritySetting from './components/SecuritySetting.vue'
 
 defineOptions({ name: 'SystemConfig' })
-// const PanMap: Record<string, Component> = {
-//   1: BasicSetting,
-//   2: MailSetting,
-//   3: SecuritySetting
-// }
+
+const PanMap: Record<string, Component> = {
+  1: BasicSetting,
+  2: MailSetting,
+  3: SecuritySetting,
+}
+
 const route = useRoute()
 const router = useRouter()
 const activeKey = ref('1')
@@ -49,12 +48,34 @@ const change = (key: string | number) => {
 }
 </script>
 
-<style scoped lang="less">
-:deep(.arco-tabs-content) {
-  padding-top: 5px;
+<style scoped lang="scss">
+.table-page {
+  overflow-y: auto;
+}
+:deep(.arco-tabs .arco-tabs-nav-type-card-gutter .arco-tabs-tab-active) {
+  box-shadow: inset 0 2px 0 rgb(var(--primary-6)), inset -1px 0 0 var(--color-border-2),
+  inset 1px 0 0 var(--color-border-2);
+  position: relative;
 }
 
-:deep(.arco-tabs-tab) {
-  background-color: var(--color-fill-2);
+:deep(.arco-tabs-nav-type-card-gutter .arco-tabs-tab) {
+  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
+}
+
+:deep(.arco-tabs-type-card-gutter > .arco-tabs-content) {
+  border: none;
+}
+
+:deep(.arco-tabs-nav::before) {
+  left: -20px;
+  right: -20px;
+}
+
+:deep(.arco-tabs) {
+  overflow: visible;
+}
+
+:deep(.arco-tabs-nav) {
+  overflow: visible;
 }
 </style>