perf: 一些手机端适配优化

packages/ui/certd-client/src/views/sys/settings/index.vue

@@ -3,7 +3,7 @@
     <!--    <template #header>-->
     <!--      <div class="title">系统设置</div>-->
     <!--    </template>-->
-    <div class="sys-settings-body">
+    <div class="sys-settings-body md:p-5">
       <a-tabs :active-key="activeKey" type="card" class="sys-settings-tabs" @update:active-key="onChange">
         <a-tab-pane key="" tab="基本设置">
           <SettingBase v-if="activeKey === ''" />
@@ -53,13 +53,13 @@ function onChange(value: string) {
 .page-sys-settings {
   .sys-settings-form {
     width: 500px;
-    margin: 20px;
+    max-width: 100%;
+    padding: 20px;
   }
 
   .sys-settings-body {
     height: 100%;
     padding-top: 20px;
-    padding-left: 20px;
     .sys-settings-tabs {
       height: 100%;
       display: flex;

packages/ui/certd-client/src/views/sys/settings/tabs/base.vue

@@ -1,14 +1,6 @@
 <template>
   <div class="sys-settings-form sys-settings-base">
-    <a-form
-      :model="formState"
-      name="basic"
-      :label-col="{ span: 8 }"
-      :wrapper-col="{ span: 16 }"
-      autocomplete="off"
-      @finish="onFinish"
-      @finish-failed="onFinishFailed"
-    >
+    <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish" @finish-failed="onFinishFailed">
       <a-form-item label="ICP备案号" :name="['public', 'icpNo']">
         <a-input v-model:value="formState.public.icpNo" placeholder="粤ICP备xxxxxxx号" />
       </a-form-item>
@@ -41,12 +33,10 @@
 
       <a-form-item label="启用公共CNAME服务" :name="['private', 'commonCnameEnabled']">
         <a-switch v-model:checked="formState.private.commonCnameEnabled" />
-        <div class="helper">
-          是否可以使用公共CNAME服务，如果禁用，且没有设置<router-link to="/sys/cname/provider">自定义CNAME服务</router-link>，则无法使用CNAME代理方式申请证书
-        </div>
+        <div class="helper">是否可以使用公共CNAME服务，如果禁用，且没有设置<router-link to="/sys/cname/provider">自定义CNAME服务</router-link>，则无法使用CNAME代理方式申请证书</div>
       </a-form-item>
 
-      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
+      <a-form-item label=" " :colon="false" :wrapper-col="{ span: 8 }">
         <a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
       </a-form-item>
     </a-form>

packages/ui/certd-client/src/views/sys/settings/tabs/payment.vue

@@ -28,7 +28,7 @@
         <div class="helper">需要开通Native支付， <a href="https://certd.docmirror.cn/comm/payments/wxpay.html">微信配置帮助文档</a></div>
       </a-form-item>
 
-      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
+      <a-form-item label=" " :colon="false" :wrapper-col="{ span: 16 }">
         <loading-button type="primary" html-type="button" :click="onClick">保存</loading-button>
       </a-form-item>
     </a-form>

packages/ui/certd-client/src/views/sys/settings/tabs/register.vue

@@ -50,7 +50,7 @@
         </template>
       </template>
 
-      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
+      <a-form-item label=" " :colon="false" :wrapper-col="{ span: 16 }">
         <a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
       </a-form-item>
     </a-form>

packages/ui/certd-client/src/views/sys/site/index.vue

@@ -1,18 +1,10 @@
 <template>
-  <fs-page class="page-sys-site">
+  <fs-page class="page-sys-settings page-sys-site">
     <template #header>
       <div class="title">站点个性化设置</div>
     </template>
-    <div class="sys-site-form">
-      <a-form
-        :model="formState"
-        name="basic"
-        :label-col="{ span: 8 }"
-        :wrapper-col="{ span: 16 }"
-        autocomplete="off"
-        @finish="onFinish"
-        @finish-failed="onFinishFailed"
-      >
+    <div class="sys-settings-form">
+      <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish" @finish-failed="onFinishFailed">
         <a-form-item label="站点名称" name="title">
           <a-input v-model:value="formState.title" />
         </a-form-item>
@@ -20,22 +12,10 @@
           <a-input v-model:value="formState.slogan" />
         </a-form-item>
         <a-form-item label="Logo" name="logo">
-          <fs-cropper-uploader
-            v-model:model-value="formState.logo"
-            :cropper="cropperOptions"
-            value-type="key"
-            :uploader="uploaderConfig"
-            :build-url="buildUrl"
-          />
+          <fs-cropper-uploader v-model:model-value="formState.logo" :cropper="cropperOptions" value-type="key" :uploader="uploaderConfig" :build-url="buildUrl" />
         </a-form-item>
         <a-form-item label="登录页Logo" name="loginLogo">
-          <fs-cropper-uploader
-            v-model:model-value="formState.loginLogo"
-            :cropper="loginLogoCropperOptions"
-            value-type="key"
-            :uploader="uploaderConfig"
-            :build-url="buildUrl"
-          />
+          <fs-cropper-uploader v-model:model-value="formState.loginLogo" :cropper="loginLogoCropperOptions" value-type="key" :uploader="uploaderConfig" :build-url="buildUrl" />
         </a-form-item>
         <a-form-item label="你的主体名称" name="licenseTo">
           <a-input v-model:value="formState.licenseTo" />
@@ -44,7 +24,7 @@
         <a-form-item label="你的主体URL" name="licenseToUrl">
           <a-input v-model:value="formState.licenseToUrl" />
         </a-form-item>
-        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
+        <a-form-item label=" " :colon="false" :wrapper-col="{ span: 8 }">
           <a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
         </a-form-item>
       </a-form>
@@ -122,7 +102,7 @@ function buildUrl(key: string) {
   return `/api/basic/file/download?&key=` + key;
 }
 
-function onFinishFailed(err) {
+function onFinishFailed(err: any) {
   console.log(err);
 }
 
@@ -139,12 +119,6 @@ const loginLogoCropperOptions = ref({
 </script>
 
 <style lang="less">
-.page-sys-site {
-  .sys-site-form {
-    width: 500px;
-    margin: 20px;
-  }
-}
 .fs-cropper-dialog__preview img {
   border-radius: 0 !important;
   margin-top: 0 !important;