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

src/views/system/config/components/BasicSetting.vue

@@ -1,6 +1,14 @@
 <template>
-  <a-form ref="formRef" :model="form" :rules="rules" size="large" layout="vertical" :disabled="!isUpdate" class="form">
+  <a-spin :loading="loading">
-    <a-list class="list-layout" :bordered="false" :loading="loading">
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      size="large"
+      layout="vertical"
+      :disabled="!isUpdate"
+      class="form"
+    >
       <a-form-item class="image-item" field="SITE_LOGO" hide-label>
         {{ siteConfig.SITE_LOGO.name }}
         <template #extra>
@@ -65,23 +73,23 @@
         </template>
       </a-form-item>
       <a-form-item class="input-item" field="SITE_TITLE" :label="siteConfig.SITE_TITLE.name">
-        <a-input v-model.trim="form.SITE_TITLE" placeholder="请输入系统标题" :max-length="18" show-word-limit />
+        <a-input v-model.trim="form.SITE_TITLE" class="input-width" placeholder="请输入系统标题" :max-length="18" show-word-limit />
       </a-form-item>
       <a-form-item class="input-item" field="SITE_DESCRIPTION" :label="siteConfig.SITE_DESCRIPTION.name">
         <a-textarea
           v-model.trim="form.SITE_DESCRIPTION"
+          class="input-width"
           placeholder="请输入系统描述"
           :auto-size="{ minRows: 1, maxRows: 3 }"
         />
       </a-form-item>
       <a-form-item class="input-item" field="SITE_COPYRIGHT" :label="siteConfig.SITE_COPYRIGHT.name">
-        <a-input v-model.trim="form.SITE_COPYRIGHT" placeholder="请输入版权信息" />
+        <a-input v-model.trim="form.SITE_COPYRIGHT" class="input-width" placeholder="请输入版权信息" />
       </a-form-item>
-      <a-form-item class="input-item" field="SITE_BEIAN" :label="siteConfig.SITE_BEIAN.name">
+      <a-form-item field="SITE_BEIAN" :label="siteConfig.SITE_BEIAN.name">
-        <a-input v-model.trim="form.SITE_BEIAN" placeholder="请输入备案号" :max-length="30" show-word-limit style="width: 100%;" />
+        <a-input v-model.trim="form.SITE_BEIAN" class="input-width" placeholder="请输入备案号" :max-length="30" show-word-limit />
       </a-form-item>
-      <div style="margin-top: 20px">
+      <a-space style="margin-bottom: 16px">
-        <a-space>
         <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
           <template #icon>
             <icon-edit />
@@ -108,9 +116,8 @@
           </template>取消
         </a-button>
       </a-space>
-      </div>
-    </a-list>
     </a-form>
+  </a-spin>
 </template>
 
 <script setup lang="ts">
@@ -306,18 +313,23 @@ onMounted(() => {
   line-height: 46px;
 }
 
+.input-width {
+  width: 500px;
+}
+
 .arco-form .image-item,
 .input-item {
+  margin-bottom: 5px;
+}
+
+:deep(.arco-form-item-layout-vertical > .arco-form-item-label-col) {
   margin-bottom: 0;
 }
 
-:deep(.arco-list-medium .arco-list-content-wrapper .arco-list-content > .arco-list-item) {
+// responsive
-  padding: 13px;
+.mobile {
-  border-bottom: 1px solid var(--color-fill-3);
+  .input-width {
-}
-
-:deep(.arco-form-item-wrapper-col) {
     width: 100%;
-  max-width: 500px;
+  }
 }
 </style>

src/views/system/config/components/MailSetting.vue

@@ -1,26 +1,30 @@
 <template>
-  <a-space wrap :size="30">
+  <a-spin :loading="loading">
     <a-form
-      ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left"
+      ref="formRef"
-      :layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error
+      :model="form"
+      :rules="rules"
+      auto-label-width
+      label-align="left"
+      :layout="width >= 500 ? 'horizontal' : 'vertical'"
+      :disabled="!isUpdate" scroll-to-first-error
     >
-      <a-list :bordered="false" :loading="loading">
       <a-form-item field="MAIL_PROTOCOL" :label="mailConfig.MAIL_PROTOCOL.name" hide-asterisk>
         <a-select v-model.trim="form.MAIL_PROTOCOL">
           <a-option label="SMTP" value="smtp" />
         </a-select>
       </a-form-item>
       <a-form-item field="MAIL_HOST" :label="mailConfig.MAIL_HOST.name" hide-asterisk>
-          <a-input v-model.trim="form.MAIL_HOST" />
+        <a-input v-model.trim="form.MAIL_HOST" class="input-width" />
       </a-form-item>
       <a-form-item field="MAIL_PORT" :label="mailConfig.MAIL_PORT.name" hide-asterisk>
-          <a-input-number v-model="form.MAIL_PORT" :min="0" />
+        <a-input-number v-model="form.MAIL_PORT" class="input-width" :min="0" />
       </a-form-item>
       <a-form-item field="MAIL_USERNAME" :label="mailConfig.MAIL_USERNAME.name" hide-asterisk>
-          <a-input v-model.trim="form.MAIL_USERNAME" />
+        <a-input v-model.trim="form.MAIL_USERNAME" class="input-width" />
       </a-form-item>
       <a-form-item field="MAIL_PASSWORD" :label="mailConfig.MAIL_PASSWORD?.name" hide-asterisk>
-          <a-input-password v-model.trim="form.MAIL_PASSWORD" />
+        <a-input-password v-model.trim="form.MAIL_PASSWORD" class="input-width" />
       </a-form-item>
       <a-form-item field="MAIL_SSL_ENABLED" :label="mailConfig.MAIL_SSL_ENABLED?.name" hide-asterisk>
         <a-radio-group v-model:model-value="form.MAIL_SSL_ENABLED">
@@ -32,9 +36,9 @@
         v-if="form.MAIL_SSL_ENABLED === '1'" field="MAIL_SSL_PORT" :label="mailConfig.MAIL_SSL_PORT.name"
         hide-asterisk
       >
-          <a-input-number v-model="form.MAIL_SSL_PORT" :min="0" />
+        <a-input-number v-model="form.MAIL_SSL_PORT" class="input-width" :min="0" />
       </a-form-item>
-        <a-space>
+      <a-space style="margin-bottom: 16px">
         <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
           <template #icon><icon-edit /></template>修改
         </a-button>
@@ -51,9 +55,8 @@
           <template #icon><icon-undo /></template>取消
         </a-button>
       </a-space>
-      </a-list>
     </a-form>
-  </a-space>
+  </a-spin>
 </template>
 
 <script setup lang="ts">
@@ -176,4 +179,8 @@ onMounted(() => {
 :deep(.arco-form-item.arco-form-item-has-help) {
   margin-bottom: 5px;
 }
+
+.input-width, :deep(.arco-select-view-single) {
+  width: 220px;
+}
 </style>

src/views/system/config/components/SecuritySetting.vue

@@ -1,10 +1,15 @@
 <template>
-  <a-space wrap :size="30">
+  <a-spin :loading="loading">
     <a-form
-      ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left"
+      ref="formRef"
-      :layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error
+      :model="form"
+      :rules="rules"
+      auto-label-width
+      label-align="left"
+      :layout="width >= 500 ? 'horizontal' : 'vertical'"
+      :disabled="!isUpdate"
+      scroll-to-first-error
     >
-      <a-list :bordered="false" :loading="loading">
       <a-form-item
         field="PASSWORD_ERROR_LOCK_COUNT" :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name"
         :help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description" hide-asterisk
@@ -82,7 +87,7 @@
           <template #unchecked>否</template>
         </a-switch>
       </a-form-item>
-        <a-space>
+      <a-space style="margin-bottom: 16px">
         <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
           <template #icon><icon-edit /></template>修改
         </a-button>
@@ -99,9 +104,8 @@
           <template #icon><icon-undo /></template>取消
         </a-button>
       </a-space>
-      </a-list>
     </a-form>
-  </a-space>
+  </a-spin>
 </template>
 
 <script setup lang="ts">
@@ -230,11 +234,11 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.input-width {
-  width: 196px;
-}
-
 :deep(.arco-form-item.arco-form-item-has-help) {
   margin-bottom: 5px;
 }
+
+.input-width {
+  width: 200px;
+}
 </style>

src/views/system/config/index.vue

@@ -1,21 +1,18 @@
 <template>
-  <div class="gi_page">
+  <div class="table-page">
-    <a-card class="general-card" title="系统配置">
+    <a-row justify="space-between" align="center" class="header page_header">
-      <a-tabs v-model:active-key="activeKey" position="right" @change="change">
+      <a-space wrap>
-        <a-tab-pane key="1" title="基础配置">
+        <div class="title">系统配置</div>
-          <BasicSetting />
+      </a-space>
-        </a-tab-pane>
+    </a-row>
-        <a-tab-pane key="2" title="邮件配置">
+    <a-tabs v-model:active-key="activeKey" type="card-gutter" size="large" @change="change">
-          <MailSetting />
+      <a-tab-pane key="1" title="基础配置" />
-        </a-tab-pane>
+      <a-tab-pane key="2" title="邮件配置" />
-        <a-tab-pane key="3" title="安全配置">
+      <a-tab-pane key="3" title="安全配置" />
-          <SecuritySetting />
-        </a-tab-pane>
     </a-tabs>
-      <!-- <keep-alive>
+    <keep-alive>
       <component :is="PanMap[activeKey]" />
-      </keep-alive> -->
+    </keep-alive>
-    </a-card>
   </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,
+const PanMap: Record<string, Component> = {
-//   2: MailSetting,
+  1: BasicSetting,
-//   3: SecuritySetting
+  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">
+<style scoped lang="scss">
-:deep(.arco-tabs-content) {
+.table-page {
-  padding-top: 5px;
+  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) {
+:deep(.arco-tabs-nav-type-card-gutter .arco-tabs-tab) {
-  background-color: var(--color-fill-2);
+  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>