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-list class="list-layout" :bordered="false" :loading="loading">
+  <a-spin :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,52 +73,51 @@
         </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-input v-model.trim="form.SITE_BEIAN" placeholder="请输入备案号" :max-length="30" show-word-limit style="width: 100%;" />
+      <a-form-item field="SITE_BEIAN" :label="siteConfig.SITE_BEIAN.name">
+        <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>
-          <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
-            <template #icon>
-              <icon-edit />
-            </template>修改
-          </a-button>
-          <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
-            <template #icon>
-              <icon-undo />
-            </template>恢复默认
-          </a-button>
-          <a-button v-if="isUpdate" type="primary" @click="handleSave">
-            <template #icon>
-              <icon-save />
-            </template>保存
-          </a-button>
-          <a-button v-if="isUpdate" @click="reset">
-            <template #icon>
-              <icon-refresh />
-            </template>重置
-          </a-button>
-          <a-button v-if="isUpdate" @click="handleCancel">
-            <template #icon>
-              <icon-undo />
-            </template>取消
-          </a-button>
-        </a-space>
-      </div>
-    </a-list>
-  </a-form>
+      <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>
+        <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
+          <template #icon>
+            <icon-undo />
+          </template>恢复默认
+        </a-button>
+        <a-button v-if="isUpdate" type="primary" @click="handleSave">
+          <template #icon>
+            <icon-save />
+          </template>保存
+        </a-button>
+        <a-button v-if="isUpdate" @click="reset">
+          <template #icon>
+            <icon-refresh />
+          </template>重置
+        </a-button>
+        <a-button v-if="isUpdate" @click="handleCancel">
+          <template #icon>
+            <icon-undo />
+          </template>取消
+        </a-button>
+      </a-space>
+    </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) {
-  padding: 13px;
-  border-bottom: 1px solid var(--color-fill-3);
-}
-
-:deep(.arco-form-item-wrapper-col) {
-  width: 100%;
-  max-width: 500px;
+// responsive
+.mobile {
+  .input-width {
+    width: 100%;
+  }
 }
 </style>

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

@@ -1,59 +1,62 @@
 <template>
-  <a-space wrap :size="30">
+  <a-spin :loading="loading">
     <a-form
-      ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left"
-      :layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error
+      ref="formRef"
+      :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-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-form-item>
-        <a-form-item field="MAIL_USERNAME" :label="mailConfig.MAIL_USERNAME.name" hide-asterisk>
-          <a-input v-model.trim="form.MAIL_USERNAME" />
-        </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-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">
-            <a-radio value="1">启用</a-radio>
-            <a-radio value="0">禁用</a-radio>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item
-          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-form-item>
-        <a-space>
-          <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
-            <template #icon><icon-edit /></template>修改
-          </a-button>
-          <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
-            <template #icon><icon-undo /></template>恢复默认
-          </a-button>
-          <a-button v-if="isUpdate" type="primary" @click="handleSave">
-            <template #icon><icon-save /></template>保存
-          </a-button>
-          <a-button v-if="isUpdate" @click="reset">
-            <template #icon><icon-refresh /></template>重置
-          </a-button>
-          <a-button v-if="isUpdate" @click="handleCancel">
-            <template #icon><icon-undo /></template>取消
-          </a-button>
-        </a-space>
-      </a-list>
+      <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" 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" 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" 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" 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">
+          <a-radio value="1">启用</a-radio>
+          <a-radio value="0">禁用</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item
+        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" class="input-width" :min="0" />
+      </a-form-item>
+      <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>
+        <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
+          <template #icon><icon-undo /></template>恢复默认
+        </a-button>
+        <a-button v-if="isUpdate" type="primary" @click="handleSave">
+          <template #icon><icon-save /></template>保存
+        </a-button>
+        <a-button v-if="isUpdate" @click="reset">
+          <template #icon><icon-refresh /></template>重置
+        </a-button>
+        <a-button v-if="isUpdate" @click="handleCancel">
+          <template #icon><icon-undo /></template>取消
+        </a-button>
+      </a-space>
     </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,107 +1,111 @@
 <template>
-  <a-space wrap :size="30">
+  <a-spin :loading="loading">
     <a-form
-      ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left"
-      :layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error
+      ref="formRef"
+      :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
+      <a-form-item
+        field="PASSWORD_ERROR_LOCK_COUNT" :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name"
+        :help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description" hide-asterisk
+      >
+        <a-input-number
+          v-model="form.PASSWORD_ERROR_LOCK_COUNT" class="input-width" :default-value="0" :precision="0"
+          :min="0" :max="10"
         >
-          <a-input-number
-            v-model="form.PASSWORD_ERROR_LOCK_COUNT" class="input-width" :default-value="0" :precision="0"
-            :min="0" :max="10"
-          >
-            <template #append>次</template>
-          </a-input-number>
-        </a-form-item>
-        <a-form-item
-          field="PASSWORD_ERROR_LOCK_MINUTES" :label="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.name"
-          :help="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.description" hide-asterisk
+          <template #append>次</template>
+        </a-input-number>
+      </a-form-item>
+      <a-form-item
+        field="PASSWORD_ERROR_LOCK_MINUTES" :label="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.name"
+        :help="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.description" hide-asterisk
+      >
+        <a-input-number
+          v-model="form.PASSWORD_ERROR_LOCK_MINUTES" class="input-width" :precision="0" :min="1"
+          :max="1440"
         >
-          <a-input-number
-            v-model="form.PASSWORD_ERROR_LOCK_MINUTES" class="input-width" :precision="0" :min="1"
-            :max="1440"
-          >
-            <template #append>分钟</template>
-          </a-input-number>
-        </a-form-item>
-        <a-form-item
-          field="PASSWORD_EXPIRATION_DAYS" :label="securityConfig.PASSWORD_EXPIRATION_DAYS.name"
-          :help="securityConfig.PASSWORD_EXPIRATION_DAYS.description" hide-asterisk
+          <template #append>分钟</template>
+        </a-input-number>
+      </a-form-item>
+      <a-form-item
+        field="PASSWORD_EXPIRATION_DAYS" :label="securityConfig.PASSWORD_EXPIRATION_DAYS.name"
+        :help="securityConfig.PASSWORD_EXPIRATION_DAYS.description" hide-asterisk
+      >
+        <a-input-number
+          v-model="form.PASSWORD_EXPIRATION_DAYS" class="input-width" :precision="0" :min="0"
+          :max="999"
         >
-          <a-input-number
-            v-model="form.PASSWORD_EXPIRATION_DAYS" class="input-width" :precision="0" :min="0"
-            :max="999"
-          >
-            <template #append>天</template>
-          </a-input-number>
-        </a-form-item>
-        <a-form-item
-          :label="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.name"
-          field="PASSWORD_EXPIRATION_WARNING_DAYS" :help="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.description"
-          hide-asterisk
+          <template #append>天</template>
+        </a-input-number>
+      </a-form-item>
+      <a-form-item
+        :label="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.name"
+        field="PASSWORD_EXPIRATION_WARNING_DAYS" :help="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.description"
+        hide-asterisk
+      >
+        <a-input-number
+          v-model="form.PASSWORD_EXPIRATION_WARNING_DAYS" class="input-width" :precision="0" :min="0"
+          :max="998"
         >
-          <a-input-number
-            v-model="form.PASSWORD_EXPIRATION_WARNING_DAYS" class="input-width" :precision="0" :min="0"
-            :max="998"
-          >
-            <template #append>天</template>
-          </a-input-number>
-        </a-form-item>
-        <a-form-item
-          field="PASSWORD_REPETITION_TIMES" :label="securityConfig.PASSWORD_REPETITION_TIMES.name"
-          :help="securityConfig.PASSWORD_REPETITION_TIMES.description" hide-asterisk
+          <template #append>天</template>
+        </a-input-number>
+      </a-form-item>
+      <a-form-item
+        field="PASSWORD_REPETITION_TIMES" :label="securityConfig.PASSWORD_REPETITION_TIMES.name"
+        :help="securityConfig.PASSWORD_REPETITION_TIMES.description" hide-asterisk
+      >
+        <a-input-number
+          v-model="form.PASSWORD_REPETITION_TIMES" class="input-width" :precision="0" :min="3"
+          :max="32"
         >
-          <a-input-number
-            v-model="form.PASSWORD_REPETITION_TIMES" class="input-width" :precision="0" :min="3"
-            :max="32"
-          >
-            <template #append>次</template>
-          </a-input-number>
-        </a-form-item>
-        <a-form-item
-          field="PASSWORD_MIN_LENGTH" :label="securityConfig.PASSWORD_MIN_LENGTH.name"
-          :help="securityConfig.PASSWORD_MIN_LENGTH.description" hide-asterisk
-        >
-          <a-input-number v-model="form.PASSWORD_MIN_LENGTH" class="input-width" :precision="0" :min="8" :max="32" />
-        </a-form-item>
-        <a-form-item
-          field="PASSWORD_ALLOW_CONTAIN_USERNAME"
-          :label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name"
-        >
-          <a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME" type="round" :checked-value="1" :unchecked-value="0">
-            <template #checked>是</template>
-            <template #unchecked>否</template>
-          </a-switch>
-        </a-form-item>
-        <a-form-item field="PASSWORD_REQUIRE_SYMBOLS" :label="securityConfig.PASSWORD_REQUIRE_SYMBOLS.name">
-          <a-switch v-model="form.PASSWORD_REQUIRE_SYMBOLS" type="round" :checked-value="1" :unchecked-value="0">
-            <template #checked>是</template>
-            <template #unchecked>否</template>
-          </a-switch>
-        </a-form-item>
-        <a-space>
-          <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
-            <template #icon><icon-edit /></template>修改
-          </a-button>
-          <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
-            <template #icon><icon-undo /></template>恢复默认
-          </a-button>
-          <a-button v-if="isUpdate" type="primary" @click="handleSave">
-            <template #icon><icon-save /></template>保存
-          </a-button>
-          <a-button v-if="isUpdate" @click="reset">
-            <template #icon><icon-refresh /></template>重置
-          </a-button>
-          <a-button v-if="isUpdate" @click="handleCancel">
-            <template #icon><icon-undo /></template>取消
-          </a-button>
-        </a-space>
-      </a-list>
+          <template #append>次</template>
+        </a-input-number>
+      </a-form-item>
+      <a-form-item
+        field="PASSWORD_MIN_LENGTH" :label="securityConfig.PASSWORD_MIN_LENGTH.name"
+        :help="securityConfig.PASSWORD_MIN_LENGTH.description" hide-asterisk
+      >
+        <a-input-number v-model="form.PASSWORD_MIN_LENGTH" class="input-width" :precision="0" :min="8" :max="32" />
+      </a-form-item>
+      <a-form-item
+        field="PASSWORD_ALLOW_CONTAIN_USERNAME"
+        :label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name"
+      >
+        <a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME" type="round" :checked-value="1" :unchecked-value="0">
+          <template #checked>是</template>
+          <template #unchecked>否</template>
+        </a-switch>
+      </a-form-item>
+      <a-form-item field="PASSWORD_REQUIRE_SYMBOLS" :label="securityConfig.PASSWORD_REQUIRE_SYMBOLS.name">
+        <a-switch v-model="form.PASSWORD_REQUIRE_SYMBOLS" type="round" :checked-value="1" :unchecked-value="0">
+          <template #checked>是</template>
+          <template #unchecked>否</template>
+        </a-switch>
+      </a-form-item>
+      <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>
+        <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
+          <template #icon><icon-undo /></template>恢复默认
+        </a-button>
+        <a-button v-if="isUpdate" type="primary" @click="handleSave">
+          <template #icon><icon-save /></template>保存
+        </a-button>
+        <a-button v-if="isUpdate" @click="reset">
+          <template #icon><icon-refresh /></template>重置
+        </a-button>
+        <a-button v-if="isUpdate" @click="handleCancel">
+          <template #icon><icon-undo /></template>取消
+        </a-button>
+      </a-space>
     </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">
-    <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>