Created SheetSetting component.

src/components/global.less

@@ -6,10 +6,12 @@
     height: 6px;
     background-color: #eee;
   }
+
   &::-webkit-scrollbar-thumb {
     background-color: #1890ff;
     cursor: pointer;
   }
+
   &::-webkit-scrollbar-track {
     background-color: #eee;
     cursor: pointer;
@@ -699,24 +701,26 @@ body {
   }
 }
 
-.post-thum {
+.post-thumb {
   .img {
     width: 100%;
     cursor: pointer;
     border-radius: 4px;
   }
-  .post-thum-remove {
+
+  .post-thumb-remove {
     margin-top: 16px;
   }
 }
 
-.sheet-thum {
+.sheet-thumb {
   .img {
     width: 100%;
     cursor: pointer;
     border-radius: 4px;
   }
-  .sheet-thum-remove {
+
+  .sheet-thumb-remove {
     margin-top: 16px;
   }
 }
@@ -724,3 +728,9 @@ body {
 .ant-calendar-picker {
   width: 100% !important;
 }
+
+#editor {
+  .v-note-wrapper {
+    min-height: 580px;
+  }
+}

src/views/post/PostEdit.vue

@@ -41,7 +41,7 @@
     <footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
       <a-button
         type="primary"
-        @click="handleShowPostSettings"
+        @click="handleShowPostSetting"
       >发布</a-button>
       <a-button
         type="dashed"
@@ -166,7 +166,7 @@ export default {
         }
       })
     },
-    handleShowPostSettings() {
+    handleShowPostSetting() {
       this.postSettingVisible = true
     },
     // 关闭文章设置抽屉
@@ -186,8 +186,5 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
-.v-note-wrapper {
-  min-height: 580px;
-}
 </style>

src/views/post/PostList.vue

@@ -149,7 +149,7 @@
             >
               <a-tooltip
                 placement="topLeft"
-                :title="'点击预览【'+text+'】'"
+                :title="'点击访问【'+text+'】'"
               >{{ text }}</a-tooltip>
             </a>
           </span>

src/views/post/components/PostSetting.vue

@@ -138,14 +138,14 @@
         <div :style="{ marginBottom: '16px' }">
           <h3 class="post-setting-drawer-title">缩略图</h3>
           <div class="post-setting-drawer-item">
-            <div class="post-thum">
+            <div class="post-thumb">
               <img
                 class="img"
                 :src="selectedPost.thumbnail || '//i.loli.net/2019/05/05/5ccf007c0a01d.png'"
-                @click="()=>this.thumDrawerVisible=true"
+                @click="()=>this.thumbDrawerVisible=true"
               >
               <a-button
-                class="post-thum-remove"
+                class="post-thumb-remove"
                 type="dashed"
                 @click="handlerRemoveThumb"
               >移除</a-button>
@@ -156,7 +156,7 @@
       </div>
     </a-skeleton>
     <AttachmentSelectDrawer
-      v-model="thumDrawerVisible"
+      v-model="thumbDrawerVisible"
       @listenToSelect="handleSelectPostThumb"
       :drawerWidth="460"
     />
@@ -200,7 +200,7 @@ export default {
   },
   data() {
     return {
-      thumDrawerVisible: false,
+      thumbDrawerVisible: false,
       categoryFormVisible: false,
       settingLoading: true,
       options: [],
@@ -313,7 +313,7 @@ export default {
     },
     handleSelectPostThumb(data) {
       this.selectedPost.thumbnail = encodeURI(data.path)
-      this.thumDrawerVisible = false
+      this.thumbDrawerVisible = false
     },
     handlerRemoveThumb() {
       this.selectedPost.thumbnail = null

src/views/sheet/SheetEdit.vue

@@ -18,115 +18,24 @@
             :toolbars="toolbars"
             :ishljs="true"
             :autofocus="false"
-            @imgAdd="pictureUploadHandle"
+            @imgAdd="handleAttachmentUpload"
           />
         </div>
       </a-col>
-
-      <a-col
-        :xl="24"
-        :lg="24"
-        :md="24"
-        :sm="24"
-        :xs="24"
-      >
-        <a-drawer
-          title="页面设置"
-          :width="isMobile()?'100%':'460'"
-          :closable="true"
-          @close="()=>this.sheetSettingVisible = false"
-          :visible="sheetSettingVisible"
-        >
-          <div class="post-setting-drawer-content">
-            <div :style="{ marginBottom: '16px' }">
-              <h3 class="post-setting-drawer-title">基本设置</h3>
-              <div class="post-setting-drawer-item">
-                <a-form layout="vertical">
-                  <a-form-item
-                    label="页面路径："
-                    :help="options.blog_url+'/s/'+ (sheetToStage.url ? sheetToStage.url : '{auto_generate}')"
-                  >
-                    <a-input v-model="sheetToStage.url" />
-                  </a-form-item>
-                  <a-form-item label="发表时间：">
-                    <a-date-picker
-                      showTime
-                      :defaultValue="pickerDefaultValue"
-                      format="YYYY-MM-DD HH:mm:ss"
-                      placeholder="Select Publish Time"
-                      @change="onChange"
-                      @ok="onOk"
-                    />
-                  </a-form-item>
-                  <a-form-item label="开启评论：">
-                    <a-radio-group
-                      v-model="sheetToStage.disallowComment"
-                      :defaultValue="false"
-                    >
-                      <a-radio :value="false">开启</a-radio>
-                      <a-radio :value="true">关闭</a-radio>
-                    </a-radio-group>
-                  </a-form-item>
-                  <a-form-item label="自定义模板：">
-                    <a-select v-model="sheetToStage.template">
-                      <a-select-option
-                        key=""
-                        value=""
-                      >无</a-select-option>
-                      <a-select-option
-                        v-for="tpl in customTpls"
-                        :key="tpl"
-                        :value="tpl"
-                      >{{ tpl }}</a-select-option>
-                    </a-select>
-                  </a-form-item>
-                </a-form>
-              </div>
-            </div>
-            <a-divider />
-
-            <div :style="{ marginBottom: '16px' }">
-              <h3 class="post-setting-drawer-title">缩略图</h3>
-              <div class="post-setting-drawer-item">
-                <div class="sheet-thum">
-                  <img
-                    class="img"
-                    :src="sheetToStage.thumbnail || '//i.loli.net/2019/05/05/5ccf007c0a01d.png'"
-                    @click="()=>this.thumDrawerVisible = true"
-                  >
-                  <a-button
-                    class="sheet-thum-remove"
-                    type="dashed"
-                    @click="handlerRemoveThumb"
-                  >移除</a-button>
-                </div>
-              </div>
-            </div>
-            <a-divider class="divider-transparent" />
-          </div>
-          <AttachmentSelectDrawer
-            v-model="thumDrawerVisible"
-            @listenToSelect="handleSelectSheetThumb"
-            :drawerWidth="460"
-          />
-          <div class="bottom-control">
-            <a-button
-              style="marginRight: 8px"
-              @click="handleDraftClick"
-            >保存草稿</a-button>
-            <a-button
-              type="primary"
-              @click="handlePublishClick"
-            >发布</a-button>
-          </div>
-        </a-drawer>
-      </a-col>
     </a-row>
+
+    <SheetSetting
+      :sheet="sheetToStage"
+      v-model="sheetSettingVisible"
+      @close="onSheetSettingsClose"
+      @onRefreshSheet="onRefreshSheetFromSetting"
+    />
+
     <AttachmentDrawer v-model="attachmentDrawerVisible" />
     <footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
       <a-button
         type="primary"
-        @click="()=>this.sheetSettingVisible = true"
+        @click="handleShowSheetSetting"
       >发布</a-button>
       <a-button
         type="dashed"
@@ -138,24 +47,21 @@
 </template>
 
 <script>
-import { haloEditor } from 'halo-editor'
-import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
-import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
-import FooterToolBar from '@/components/FooterToolbar'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import { toolbars } from '@/core/const'
+import SheetSetting from './components/SheetSetting'
+import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
+import FooterToolBar from '@/components/FooterToolbar'
+import { haloEditor } from 'halo-editor'
 import 'halo-editor/dist/css/index.css'
 import sheetApi from '@/api/sheet'
-import themeApi from '@/api/theme'
-import optionApi from '@/api/option'
 import attachmentApi from '@/api/attachment'
-import moment from 'moment'
 export default {
   components: {
     haloEditor,
     FooterToolBar,
     AttachmentDrawer,
-    AttachmentSelectDrawer
+    SheetSetting
   },
   mixins: [mixin, mixinDevice],
   data() {
@@ -167,18 +73,12 @@ export default {
         xs: { span: 24 }
       },
       attachmentDrawerVisible: false,
-      thumDrawerVisible: false,
       sheetSettingVisible: false,
-      customTpls: [],
       sheetToStage: {},
-      timer: null,
+      timer: null
-      options: [],
-      keys: ['blog_url']
     }
   },
   created() {
-    this.loadCustomTpls()
-    this.loadOptions()
     clearInterval(this.timer)
     this.timer = null
     this.autoSaveTimer()
@@ -208,37 +108,7 @@ export default {
       }
     })
   },
-  computed: {
-    pickerDefaultValue() {
-      if (this.sheetToStage.createTime) {
-        var date = new Date(this.sheetToStage.createTime)
-        return moment(date, 'YYYY-MM-DD HH:mm:ss')
-      }
-      return moment(new Date(), 'YYYY-MM-DD HH:mm:ss')
-    }
-  },
   methods: {
-    loadCustomTpls() {
-      themeApi.customTpls().then(response => {
-        this.customTpls = response.data.data
-      })
-    },
-    loadOptions() {
-      optionApi.listAll(this.keys).then(response => {
-        this.options = response.data.data
-      })
-    },
-    handlePublishClick() {
-      this.sheetToStage.status = 'PUBLISHED'
-      this.saveSheet()
-    },
-    handleDraftClick() {
-      this.sheetToStage.status = 'DRAFT'
-      this.saveSheet()
-    },
-    handlerRemoveThumb() {
-      this.sheetToStage.thumbnail = null
-    },
     createOrUpdateSheet(createSuccess, updateSuccess, autoSave) {
       if (this.sheetToStage.id) {
         sheetApi.update(this.sheetToStage.id, this.sheetToStage, autoSave).then(response => {
@@ -257,22 +127,11 @@ export default {
         })
       }
     },
-    saveSheet() {
-      this.createOrUpdateSheet(
-        () => this.$message.success('页面创建成功！'),
-        () => this.$message.success('页面更新成功！'),
-        false
-      )
-    },
     autoSaveSheet() {
       if (this.sheetToStage.title != null && this.sheetToStage.originalContent != null) {
         this.createOrUpdateSheet(null, null, true)
       }
     },
-    handleSelectSheetThumb(data) {
-      this.sheetToStage.thumbnail = encodeURI(data.path)
-      this.thumDrawerVisible = false
-    },
     autoSaveTimer() {
       if (this.timer == null) {
         this.timer = setInterval(() => {
@@ -280,7 +139,7 @@ export default {
         }, 15000)
       }
     },
-    pictureUploadHandle(pos, $file) {
+    handleAttachmentUpload(pos, $file) {
       var formdata = new FormData()
       formdata.append('file', $file)
       attachmentApi.upload(formdata).then(response => {
@@ -295,17 +154,17 @@ export default {
         }
       })
     },
-    onChange(value, dateString) {
+    handleShowSheetSetting() {
-      this.sheetToStage.createTime = value.valueOf()
+      this.sheetSettingVisible = true
     },
-    onOk(value) {
+    onSheetSettingsClose() {
-      this.sheetToStage.createTime = value.valueOf()
+      this.sheetSettingVisible = false
+    },
+    onRefreshSheetFromSetting(sheet) {
+      this.sheetToStage = sheet
     }
   }
 }
 </script>
-<style lang="less" scoped>
+<style lang="less">
-.v-note-wrapper {
-  min-height: 580px;
-}
 </style>

src/views/sheet/SheetList.vue

@@ -107,7 +107,7 @@
                   >
                     <a-tooltip
                       placement="topLeft"
-                      :title="'点击预览 '+text"
+                      :title="'点击访问【'+text+'】'"
                     >{{ text }}</a-tooltip>
                   </a>
                 </span>

src/views/sheet/components/SheetSetting.vue

@@ -0,0 +1,236 @@
+<template>
+  <a-drawer
+    title="页面设置"
+    :width="isMobile()?'100%':'460'"
+    placement="right"
+    closable
+    destroyOnClose
+    @close="onClose"
+    :visible="visiable"
+  >
+    <a-skeleton
+      active
+      :loading="settingLoading"
+      :paragraph="{ rows: 18 }"
+    >
+      <div class="post-setting-drawer-content">
+        <div :style="{ marginBottom: '16px' }">
+          <h3 class="post-setting-drawer-title">基本设置</h3>
+          <div class="post-setting-drawer-item">
+            <a-form layout="vertical">
+              <a-form-item
+                label="页面路径："
+                :help="options.blog_url+'/s/'+ (selectedSheet.url ? selectedSheet.url : '{auto_generate}')"
+              >
+                <a-input v-model="selectedSheet.url" />
+              </a-form-item>
+              <a-form-item label="发表时间：">
+                <a-date-picker
+                  showTime
+                  :defaultValue="pickerDefaultValue"
+                  format="YYYY-MM-DD HH:mm:ss"
+                  placeholder="Select Publish Time"
+                  @change="onSheetDateChange"
+                  @ok="onSheetDateOk"
+                />
+              </a-form-item>
+              <a-form-item label="开启评论：">
+                <a-radio-group
+                  v-model="selectedSheet.disallowComment"
+                  :defaultValue="false"
+                >
+                  <a-radio :value="false">开启</a-radio>
+                  <a-radio :value="true">关闭</a-radio>
+                </a-radio-group>
+              </a-form-item>
+              <a-form-item label="自定义模板：">
+                <a-select v-model="selectedSheet.template">
+                  <a-select-option
+                    key=""
+                    value=""
+                  >无</a-select-option>
+                  <a-select-option
+                    v-for="tpl in customTpls"
+                    :key="tpl"
+                    :value="tpl"
+                  >{{ tpl }}</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-form>
+          </div>
+        </div>
+        <a-divider />
+
+        <div :style="{ marginBottom: '16px' }">
+          <h3 class="post-setting-drawer-title">缩略图</h3>
+          <div class="post-setting-drawer-item">
+            <div class="sheet-thumb">
+              <img
+                class="img"
+                :src="selectedSheet.thumbnail || '//i.loli.net/2019/05/05/5ccf007c0a01d.png'"
+                @click="()=>this.thumbDrawerVisible = true"
+              >
+              <a-button
+                class="sheet-thumb-remove"
+                type="dashed"
+                @click="handlerRemoveThumb"
+              >移除</a-button>
+            </div>
+          </div>
+        </div>
+        <a-divider class="divider-transparent" />
+      </div>
+    </a-skeleton>
+    <AttachmentSelectDrawer
+      v-model="thumbDrawerVisible"
+      @listenToSelect="handleSelectSheetThumb"
+      :drawerWidth="460"
+    />
+    <div class="bottom-control">
+      <a-button
+        style="marginRight: 8px"
+        @click="handleDraftClick"
+      >保存草稿</a-button>
+      <a-button
+        type="primary"
+        @click="handlePublishClick"
+      >发布</a-button>
+    </div>
+  </a-drawer>
+</template>
+<script>
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+import moment from 'moment'
+import AttachmentSelectDrawer from '../../attachment/components/AttachmentSelectDrawer'
+import optionApi from '@/api/option'
+import themeApi from '@/api/theme'
+import sheetApi from '@/api/sheet'
+export default {
+  name: 'SheetSetting',
+  mixins: [mixin, mixinDevice],
+  components: {
+    AttachmentSelectDrawer
+  },
+  data() {
+    return {
+      thumbDrawerVisible: false,
+      settingLoading: true,
+      options: [],
+      keys: ['blog_url'],
+      selectedSheet: this.sheet,
+      customTpls: []
+    }
+  },
+  model: {
+    prop: 'visiable',
+    event: 'close'
+  },
+  props: {
+    sheet: {
+      type: Object,
+      required: true
+    },
+    visiable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  created() {
+    this.loadSkeleton()
+    this.loadOptions()
+    this.loadCustomTpls()
+  },
+  watch: {
+    sheet(val) {
+      this.selectedSheet = val
+    },
+    selectedSheet(val) {
+      this.$emit('onRefreshSheet', val)
+    },
+    visiable: function(newValue, oldValue) {
+      if (newValue) {
+        this.loadSkeleton()
+      }
+    }
+  },
+  computed: {
+    pickerDefaultValue() {
+      if (this.selectedSheet.createTime) {
+        var date = new Date(this.selectedSheet.createTime)
+        return moment(date, 'YYYY-MM-DD HH:mm:ss')
+      }
+      return moment(new Date(), 'YYYY-MM-DD HH:mm:ss')
+    }
+  },
+  methods: {
+    loadSkeleton() {
+      this.settingLoading = true
+      setTimeout(() => {
+        this.settingLoading = false
+      }, 500)
+    },
+    loadOptions() {
+      optionApi.listAll(this.keys).then(response => {
+        this.options = response.data.data
+      })
+    },
+    loadCustomTpls() {
+      themeApi.customTpls().then(response => {
+        this.customTpls = response.data.data
+      })
+    },
+    handleSelectSheetThumb(data) {
+      this.selectedSheet.thumbnail = encodeURI(data.path)
+      this.thumbDrawerVisible = false
+    },
+    handlerRemoveThumb() {
+      this.selectedSheet.thumbnail = null
+    },
+    handlePublishClick() {
+      this.selectedSheet.status = 'PUBLISHED'
+      this.saveSheet()
+    },
+    handleDraftClick() {
+      this.selectedSheet.status = 'DRAFT'
+      this.saveSheet()
+    },
+    saveSheet() {
+      this.createOrUpdateSheet(
+        () => this.$message.success('页面创建成功！'),
+        () => this.$message.success('页面更新成功！'),
+        false
+      )
+    },
+    createOrUpdateSheet(createSuccess, updateSuccess, autoSave) {
+      if (this.selectedSheet.id) {
+        sheetApi.update(this.selectedSheet.id, this.selectedSheet, autoSave).then(response => {
+          this.$log.debug('Updated sheet', response.data.data)
+          if (updateSuccess) {
+            updateSuccess()
+          }
+        })
+      } else {
+        sheetApi.create(this.selectedSheet, autoSave).then(response => {
+          this.$log.debug('Created sheet', response.data.data)
+          if (createSuccess) {
+            createSuccess()
+          }
+          this.selectedSheet = response.data.data
+        })
+      }
+    },
+    onClose() {
+      this.$emit('close', false)
+    },
+    onSheetDateChange(value, dateString) {
+      this.selectedSheet.createTime = value.valueOf()
+    },
+    onSheetDateOk(value) {
+      this.selectedSheet.createTime = value.valueOf()
+    }
+  }
+}
+</script>
+<style lang="less">
+</style>