Refactor post editor toolbars.

src/core/const.js

@@ -0,0 +1,25 @@
+const toolbars = {
+  bold: true, // 粗体
+  italic: true, // 斜体
+  header: true, // 标题
+  underline: true, // 下划线
+  strikethrough: true, // 中划线
+  quote: true, // 引用
+  ol: true, // 有序列表
+  ul: true, // 无序列表
+  link: true, // 链接
+  imagelink: true, // 图片链接
+  code: true, // code
+  table: true, // 表格
+  fullscreen: true, // 全屏编辑
+  readmodel: true, // 沉浸式阅读
+  htmlcode: true, // 展示html源码
+  undo: true, // 上一步
+  redo: true, // 下一步
+  trash: true, // 清空
+  navigation: true, // 导航目录
+  subfield: true, // 单双栏模式
+  preview: true // 预览
+}
+
+export { toolbars }

src/views/post/PostEdit.vue

@@ -116,6 +116,11 @@
                     :src="postToStage.thumbnail || 'https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png'"
                     @click="showThumbDrawer"
                   >
+                  <a-button
+                    class="post-thum-remove"
+                    type="dashed"
+                    @click="handlerRemoveThumb"
+                  >移除</a-button>
                 </div>
               </div>
             </div>
@@ -165,33 +170,11 @@ 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 'mavon-editor/dist/css/index.css'
 import tagApi from '@/api/tag'
 import categoryApi from '@/api/category'
 import postApi from '@/api/post'
-const toolbars = {
-  bold: true, // 粗体
-  italic: true, // 斜体
-  header: true, // 标题
-  underline: true, // 下划线
-  strikethrough: true, // 中划线
-  quote: true, // 引用
-  ol: true, // 有序列表
-  ul: true, // 无序列表
-  link: true, // 链接
-  imagelink: true, // 图片链接
-  code: true, // code
-  table: true, // 表格
-  fullscreen: true, // 全屏编辑
-  readmodel: true, // 沉浸式阅读
-  htmlcode: true, // 展示html源码
-  undo: true, // 上一步
-  redo: true, // 下一步
-  trash: true, // 清空
-  navigation: true, // 导航目录
-  subfield: true, // 单双栏模式
-  preview: true // 预览
-}
 export default {
   components: {
     TagSelect,
@@ -204,6 +187,7 @@ export default {
   mixins: [mixin, mixinDevice],
   data() {
     return {
+      toolbars,
       wrapperCol: {
         xl: { span: 24 },
         sm: { span: 24 },
@@ -216,7 +200,6 @@ export default {
       categories: [],
       selectedCategoryIds: [],
       selectedTagIds: [],
-      toolbars: toolbars,
       postToStage: {}
     }
   },
@@ -296,6 +279,9 @@ export default {
       this.postToStage.status = 'DRAFT'
       this.createOrUpdatePost()
     },
+    handlerRemoveThumb() {
+      this.postToStage.thumbnail = null
+    },
     onClose() {
       this.visible = false
     },
@@ -307,14 +293,20 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .v-note-wrapper {
   z-index: 1000;
   min-height: 580px;
 }
 
-.post-thum .img {
+.post-thum {
+  .img {
     width: 100%;
     cursor: pointer;
+    border-radius: 4px;
+  }
+  .post-thum-remove {
+    margin-top: 16px;
+  }
 }
 </style>

src/views/sheet/SheetEdit.vue

@@ -89,6 +89,11 @@
                     :src="sheetToStage.thumbnail || 'https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png'"
                     @click="showThumbDrawer"
                   >
+                  <a-button
+                    class="sheet-thum-remove"
+                    type="dashed"
+                    @click="handlerRemoveThumb"
+                  >移除</a-button>
                 </div>
               </div>
             </div>
@@ -99,7 +104,7 @@
             @listenToSelect="selectSheetThumb"
             :drawerWidth="460"
           />
-          <div class="sheetControl">
+          <div class="bottom-control">
             <a-button
               style="marginRight: 8px"
               @click="handleDraftClick"
@@ -133,32 +138,10 @@ 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 'mavon-editor/dist/css/index.css'
 import sheetApi from '@/api/sheet'
 import themeApi from '@/api/theme'
-const toolbars = {
-  bold: true, // 粗体
-  italic: true, // 斜体
-  header: true, // 标题
-  underline: true, // 下划线
-  strikethrough: true, // 中划线
-  quote: true, // 引用
-  ol: true, // 有序列表
-  ul: true, // 无序列表
-  link: true, // 链接
-  imagelink: true, // 图片链接
-  code: true, // code
-  table: true, // 表格
-  fullscreen: true, // 全屏编辑
-  readmodel: true, // 沉浸式阅读
-  htmlcode: true, // 展示html源码
-  undo: true, // 上一步
-  redo: true, // 下一步
-  trash: true, // 清空
-  navigation: true, // 导航目录
-  subfield: true, // 单双栏模式
-  preview: true // 预览
-}
 export default {
   components: {
     mavonEditor,
@@ -169,6 +152,7 @@ export default {
   mixins: [mixin, mixinDevice],
   data() {
     return {
+      toolbars,
       wrapperCol: {
         xl: { span: 24 },
         sm: { span: 24 },
@@ -176,9 +160,7 @@ export default {
       },
       attachmentDrawerVisible: false,
       thumDrawerVisible: false,
-      toolbars,
       visible: false,
-      sheetUrl: 'hello-world',
       customTpls: [],
       sheetToStage: {}
     }
@@ -230,6 +212,9 @@ export default {
       this.sheetToStage.status = 'DRAFT'
       this.createOrUpdateSheet()
     },
+    handlerRemoveThumb() {
+      this.sheetToStage.thumbnail = null
+    },
     createOrUpdateSheet() {
       if (this.sheetToStage.id) {
         sheetApi.update(this.sheetToStage.id, this.sheetToStage).then(response => {
@@ -254,25 +239,20 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style lang="less" scoped>
 .v-note-wrapper {
   z-index: 1000;
   min-height: 580px;
 }
 
-.sheetControl {
+.sheet-thum {
-  position: absolute;
+  .img {
-  bottom: 0px;
     width: 100%;
-  border-top: 1px solid rgb(232, 232, 232);
+    cursor: pointer;
-  padding: 10px 16px;
+    border-radius: 4px;
-  text-align: right;
+  }
-  left: 0px;
+  .sheet-thum-remove {
-  background: rgb(255, 255, 255);
+    margin-top: 16px;
-  border-radius: 0px 0px 4px 4px;
   }
-
-.sheet-thum .img {
-  width: 100%;
 }
 </style>

src/views/system/ToolList.vue

@@ -7,7 +7,6 @@
           :md="12"
           :lg="8"
         >
-          <div class="case">
           <a-card
             title="Markdown 导入"
             :bordered="false"
@@ -20,14 +19,12 @@
             >导入</a-button>
             <p>支持 Hexo/Jekyll 导入并解析元数据</p>
           </a-card>
-          </div>
         </a-col>
         <a-col
           :sm="24"
           :md="12"
           :lg="8"
         >
-          <div class="case">
           <a-card
             title="WordPress 导入"
             :bordered="false"
@@ -40,7 +37,6 @@
             >导入</a-button>
             <p>尽请期待</p>
           </a-card>
-          </div>
         </a-col>
       </a-row>
       <a-modal
@@ -97,10 +93,4 @@ export default {
 </script>
 
 <style scoped>
-.card-content {
-  padding: 11px;
-}
-.case {
-  padding: 5px;
-}
 </style>