From 23cab7323843e2b2e6660a6c0dc843d1268f0a84 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Mon, 28 Dec 2020 18:07:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/UploadImageInput.vue  | 59 +++++++++++++++-------
 src/views/markdown/index.vue               | 10 ++--
 src/views/setting/articles/blogManager.vue | 21 ++------
 3 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/src/components/input/UploadImageInput.vue b/src/components/input/UploadImageInput.vue
index d4417b3..dc0f84f 100644
--- a/src/components/input/UploadImageInput.vue
+++ b/src/components/input/UploadImageInput.vue
@@ -1,24 +1,28 @@
 <template>
   <div>
-    <el-upload
-      ref="uploadRef"
-      action="/api/upload-markdown-image"
-      :headers="headers"
-      :data="extraData"
-      name="files"
-      accept="image/*"
-      :show-file-list="false"
-      :file-list="fileList"
-      :limit="1"
-      :before-upload="handleBeforeUpload"
-      :on-success="handleSuccess"
-      :on-remove="handleFileListRemove"
-    >
-      <el-button size="small" type="text">点击上传</el-button><span>或者输入图片的url</span>
-      <div v-if="uploadState > 0" slot="tip">{{ uploadState === 1 ? '图片上传中' : '图片上传成功' }} <i :class="{'el-icon-loading': uploadState === 1, 'el-icon-check': uploadState === 2}"></i></div>
-    </el-upload>
+    <div class="upload">
+      <div class="url-desc url-desc-first">输入图片的url 或</div>
+      <el-upload
+        class="upload"
+        ref="uploadRef"
+        action="/api/upload-markdown-image"
+        :headers="headers"
+        :data="extraData"
+        name="files"
+        accept="image/*"
+        :show-file-list="false"
+        :file-list="fileList"
+        :limit="1"
+        :before-upload="handleBeforeUpload"
+        :on-success="handleSuccess"
+        :on-remove="handleFileListRemove"
+      >
+        <el-button size="small" type="text">点击上传</el-button>
+        <div class="url-desc" v-if="uploadState > 0" slot="tip">{{ uploadState === 1 ? ' 图片上传中' : ' 图片上传成功' }} <i :class="{'el-icon-loading': uploadState === 1, 'el-icon-check': uploadState === 2}"></i></div>
+      </el-upload>
+    </div>
     <el-tooltip class="item" effect="dark" placement="bottom">
-      <el-input :autosize="{ minRows: 1, maxRows: 4}" type="textarea" width="100%" v-model="currentValue" @change="change" @input="input" @focus="isLocked = true"></el-input>
+      <el-input :autosize="{ minRows: 1, maxRows: 6}" type="textarea" width="100%" v-model="currentValue" @change="change" @input="input" @focus="isLocked = true"></el-input>
       <div slot="content">
         <el-image style="width: 150px;" :src="currentValue" fit="contain" @load="loadSuccess"></el-image>
       </div>
@@ -53,7 +57,7 @@ export default {
       isLocked: false, // true表示输入框正在输入状态
       timer: null,
       uploadState: 0, // 文件上传状态, 0 没有文件上传, 1 正在上传, 2 上传成功
-      uploadTip: ''
+      uploadTip: '',
     }
   },
   watch: {
@@ -117,6 +121,23 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.upload {
+  display: flex;
+  .url-desc {
+    padding: 4px 10px;
+  }
+  .url-desc-first {
+    padding: 4px 10px 4px 0;
+  }
+}
+/deep/ .el-checkbox {
+  font-size: 13px;
+  padding: 0 10px;
+  .el-checkbox__label {
+    padding-left: 5px;
+    font-size: 13px;
+  }
+}
 /deep/ .el-upload-list--picture {
   .el-upload-list__item-thumbnail {
     width: unset;
diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue
index 8969aa4..b04aaaf 100644
--- a/src/views/markdown/index.vue
+++ b/src/views/markdown/index.vue
@@ -97,12 +97,7 @@
       <div class="more-setting">
         <h2>更多设置</h2>
         <p class="mark-setting-label">文章封面：</p>
-        <el-tooltip class="item" effect="dark" placement="bottom" :disabled="!file.cover || file.cover.length === 0">
-          <el-input autosize type="textarea" width="100%" v-model="file.cover"></el-input>
-          <div slot="content">
-            <el-image style="width: 150px;" :src="file.cover" fit="contain"></el-image>
-          </div>
-        </el-tooltip>
+        <upload-image-input v-model="file.cover"/>
       </div>
     </el-drawer>
   </div>
@@ -118,6 +113,7 @@
   import categoryApi from "@/api/category";
   import tagApi from "@/api/tag";
   import EditElement from "@/views/markdown/EditElement";
+  import UploadImageInput from "@/components/input/UploadImageInput";
 
   let toolbar = [
     'emoji',
@@ -162,7 +158,7 @@
     name: 'MarkdownEditor',
     components: {
       EditElement,
-      DirTree, Vditor
+      DirTree, Vditor, UploadImageInput
     },
     props: {
       hasChange: {
diff --git a/src/views/setting/articles/blogManager.vue b/src/views/setting/articles/blogManager.vue
index f351dee..e8d38a1 100644
--- a/src/views/setting/articles/blogManager.vue
+++ b/src/views/setting/articles/blogManager.vue
@@ -60,28 +60,13 @@
           <span class="instruction">选中项会显示在导航栏中</span>
 
           <div class="config-itme-label">归档界面背景大图：</div>
-          <el-tooltip class="item" effect="dark" placement="bottom" :disabled="!form.archiveBackground || form.archiveBackground.length === 0">
-            <el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" width="100%" v-model="form.archiveBackground"></el-input>
-            <div slot="content">
-              <el-image style="width: 150px;" :src="form.archiveBackground" fit="contain"></el-image>
-            </div>
-          </el-tooltip>
+          <upload-image-input v-model="form.archiveBackground"/>
           <span class="instruction">在这里填入图片的URL地址, 以在归档页面显示一个背景大图。</span>
           <div class="config-itme-label">分类界面背景大图：</div>
-          <el-tooltip class="item" effect="dark" placement="bottom" :disabled="!form.categoryBackground || form.categoryBackground.length === 0">
-            <el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" width="100%" v-model="form.categoryBackground"></el-input>
-            <div slot="content">
-              <el-image style="width: 150px;" :src="form.categoryBackground" fit="contain"></el-image>
-            </div>
-          </el-tooltip>
+          <upload-image-input v-model="form.categoryBackground"/>
           <span class="instruction">在这里填入图片的URL地址, 以在分类页面显示一个背景大图。</span>
           <div class="config-itme-label">标签界面背景大图：</div>
-          <el-tooltip class="item" effect="dark" placement="bottom" :disabled="!form.tagBackground || form.tagBackground.length === 0">
-            <el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" width="100%" v-model="form.tagBackground"></el-input>
-            <div slot="content">
-              <el-image style="width: 150px;" :src="form.tagBackground" fit="contain"></el-image>
-            </div>
-          </el-tooltip>
+          <upload-image-input v-model="form.tagBackground"/>
           <span class="instruction">在这里填入图片的URL地址, 以在分类页面显示一个背景大图。</span>
         </el-collapse-item>
         <el-collapse-item title="网站页脚" name="4">