perf: optimize the SheetSettingModel component style (halo-dev/console#471)

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/views/sheet/SheetEdit.vue

@@ -27,7 +27,7 @@
     </a-row>
 
     <SheetSettingModal
-      :post="sheetToStage"
+      :sheet="sheetToStage"
       :savedCallback="onSheetSavedCallback"
       :visible.sync="sheetSettingVisible"
       @onUpdate="onUpdateFromSetting"

src/views/sheet/components/CustomSheetList.vue

@@ -244,7 +244,7 @@
     </div>
     <SheetSettingModal
       :loading="sheetSettingLoading"
-      :post="selectedSheet"
+      :sheet="selectedSheet"
       :savedCallback="onSheetSavedCallback"
       :visible.sync="sheetSettingVisible"
       @onClose="selectedSheet = {}"

src/views/sheet/components/SheetSettingModal.vue

@@ -68,21 +68,20 @@
               </a-select>
             </a-form-item>
             <a-form-item label="封面图：">
-              <div class="post-thumb">
+              <a-space direction="vertical">
-                <a-space direction="vertical">
+                <img
-                  <img
+                  :src="form.model.thumbnail || '/images/placeholder.jpg'"
-                    :src="form.model.thumbnail || '/images/placeholder.jpg'"
+                  alt="Sheet cover thumbnail"
-                    alt="Post cover thumbnail"
+                  class="w-1/2 cursor-pointer"
-                    class="img"
+                  style="border-radius: 4px"
-                    @click="attachmentSelectVisible = true"
+                  @click="attachmentSelectVisible = true"
-                  />
+                />
-                  <a-input
+                <a-input
-                    v-model="form.model.thumbnail"
+                  v-model="form.model.thumbnail"
-                    allow-clear
+                  allow-clear
-                    placeholder="点击封面图选择图片，或者输入外部链接"
+                  placeholder="点击封面图选择图片，或者输入外部链接"
-                  ></a-input>
+                ></a-input>
-                </a-space>
+              </a-space>
-              </div>
             </a-form-item>
           </a-form>
         </a-tab-pane>
@@ -113,7 +112,6 @@
     </div>
     <template slot="footer">
       <slot name="extraFooter" />
-      <a-button :disabled="loading" @click="modalVisible = false"> 关闭</a-button>
       <ReactiveButton
         v-if="!form.model.id"
         :errored="form.draftSaveErrored"
@@ -134,6 +132,7 @@
         @callback="handleSavedCallback"
         @click="handleCreateOrUpdate()"
       ></ReactiveButton>
+      <a-button :disabled="loading" @click="modalVisible = false">关闭</a-button>
     </template>
     <AttachmentSelectModal
       :multiSelect="false"
@@ -168,7 +167,7 @@ export default {
       type: Boolean,
       default: false
     },
-    post: {
+    sheet: {
       type: Object,
       default: () => ({})
     },
@@ -229,13 +228,13 @@ export default {
   watch: {
     modalVisible(value) {
       if (value) {
-        this.form.model = Object.assign({}, this.post)
+        this.form.model = Object.assign({}, this.sheet)
         if (!this.form.model.slug && !this.form.model.id) {
           this.handleGenerateSlug()
         }
       }
     },
-    post: {
+    sheet: {
       deep: true,
       handler(value) {
         this.form.model = Object.assign({}, value)
@@ -247,7 +246,7 @@ export default {
   },
   methods: {
     /**
-     * Creates or updates a post
+     * Creates or updates a sheet
      */
     async handleCreateOrUpdate(preStatus = 'PUBLISHED') {
       if (!this.form.model.title) {