perf: optimize the layout of some forms on mobile (#565)

Signed-off-by: Ryan Wang <i@ryanc.cc> Co-authored-by: Ryan Wang <i@ryanc.cc>
halo-dev · May 9, 2022 · 607a9d3 · 607a9d3
1 parent f17fb44
commit 607a9d3
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 14 deletions.
diff --git a/src/components/Category/CategoryCreateModal.vue b/src/components/Category/CategoryCreateModal.vue
@@ -2,10 +2,10 @@
   <a-modal v-model="modalVisible" :afterClose="onClose" :width="512" destroyOnClose title="新建分类">
     <a-form-model
       ref="categoryForm"
-      :label-col="{ span: 4 }"
+      :label-col="form.labelCol"
       :model="form.model"
       :rules="form.rules"
-      :wrapper-col="{ span: 20 }"
+      :wrapper-col="form.wrapperCol"
       labelAlign="left"
     >
       <a-form-model-item help="* 页面上所显示的名称" label="名称：" prop="name">
@@ -76,7 +76,9 @@ export default {
           slug: [{ max: 255, message: '* 分类别名的字符长度不能超过 255', trigger: ['change'] }],
           thumbnail: [{ max: 1023, message: '* 封面图链接的字符长度不能超过 1023', trigger: ['change'] }],
           description: [{ max: 100, message: '* 分类描述的字符长度不能超过 100', trigger: ['change'] }]
-        }
+        },
+        labelCol: { sm: { span: 4 }, xs: { span: 24 } },
+        wrapperCol: { sm: { span: 20 }, xs: { span: 24 } }
       }
     }
   },

diff --git a/src/components/Post/PostSettingModal.vue b/src/components/Post/PostSettingModal.vue
@@ -15,7 +15,7 @@
     <div class="card-container">
       <a-tabs type="card">
         <a-tab-pane key="normal" tab="常规">
-          <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" labelAlign="left">
+          <a-form :label-col="form.labelCol" :wrapper-col="form.wrapperCol" labelAlign="left">
             <a-form-item label="文章标题">
               <a-input v-model="form.model.title" />
             </a-form-item>
@@ -54,7 +54,7 @@
           </a-form>
         </a-tab-pane>
         <a-tab-pane key="advanced" tab="高级">
-          <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" labelAlign="left">
+          <a-form :label-col="form.labelCol" :wrapper-col="form.wrapperCol" labelAlign="left">
             <a-form-item label="禁止评论">
               <a-switch v-model="form.model.disallowComment" />
             </a-form-item>
@@ -101,7 +101,7 @@
           </a-form>
         </a-tab-pane>
         <a-tab-pane key="seo" tab="SEO">
-          <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" labelAlign="left">
+          <a-form :label-col="form.labelCol" :wrapper-col="form.wrapperCol" labelAlign="left">
             <a-form-item label="自定义关键词">
               <a-input
                 v-model="form.model.metaKeywords"
@@ -221,7 +221,9 @@ export default {
         draftSaving: false,
         draftSaveErrored: false,
         publishing: false,
-        publishErrored: false
+        publishErrored: false,
+        labelCol: { sm: { span: 4 }, xs: { span: 24 } },
+        wrapperCol: { sm: { span: 20 }, xs: { span: 24 } }
       },
 
       templates: [],

diff --git a/src/views/sheet/components/SheetSettingModal.vue b/src/views/sheet/components/SheetSettingModal.vue
@@ -15,7 +15,7 @@
     <div class="card-container">
       <a-tabs type="card">
         <a-tab-pane key="normal" tab="常规">
-          <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" labelAlign="left">
+          <a-form :label-col="form.labelCol" :wrapper-col="form.wrapperCol" labelAlign="left">
             <a-form-item label="页面标题">
               <a-input v-model="form.model.title" />
             </a-form-item>
@@ -45,7 +45,7 @@
           </a-form>
         </a-tab-pane>
         <a-tab-pane key="advanced" tab="高级">
-          <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" labelAlign="left">
+          <a-form :label-col="form.labelCol" :wrapper-col="form.wrapperCol" labelAlign="left">
             <a-form-item label="禁止评论">
               <a-switch v-model="form.model.disallowComment" />
             </a-form-item>
@@ -86,7 +86,7 @@
           </a-form>
         </a-tab-pane>
         <a-tab-pane key="seo" tab="SEO">
-          <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" labelAlign="left">
+          <a-form :label-col="form.labelCol" :wrapper-col="form.wrapperCol" labelAlign="left">
             <a-form-item label="自定义关键词">
               <a-input
                 v-model="form.model.metaKeywords"
@@ -199,7 +199,9 @@ export default {
         draftSaving: false,
         draftSaveErrored: false,
         publishing: false,
-        publishErrored: false
+        publishErrored: false,
+        labelCol: { sm: { span: 4 }, xs: { span: 24 } },
+        wrapperCol: { sm: { span: 20 }, xs: { span: 24 } }
       },
       templates: [],
       attachmentSelectVisible: false

diff --git a/src/views/sheet/independent/components/PhotoFormModal.vue b/src/views/sheet/independent/components/PhotoFormModal.vue
@@ -7,10 +7,10 @@
 
     <a-form-model
       ref="photoForm"
-      :label-col="{ span: 4 }"
+      :label-col="form.labelCol"
       :model="form.model"
       :rules="form.rules"
-      :wrapper-col="{ span: 20 }"
+      :wrapper-col="form.wrapperCol"
       labelAlign="left"
     >
       <a-form-model-item label="图片地址：" prop="url">
@@ -106,7 +106,9 @@ export default {
           name: [{ required: true, message: '* 图片名称不能为空', trigger: ['change'] }]
         },
         saving: false,
-        saveErrored: false
+        saveErrored: false,
+        labelCol: { sm: { span: 4 }, xs: { span: 24 } },
+        wrapperCol: { sm: { span: 20 }, xs: { span: 24 } }
       },
       attachmentSelectModal: {
         visible: false