Merge pull request #29 from doocs/feat_custom_img_host

feat: update configuration

src/api/file.js

@@ -1,5 +1,7 @@
 import fetch from './fetch';
-import { v4 as uuidv4 } from 'uuid';
+import {
+    v4 as uuidv4
+} from 'uuid';
 const fileUploadConfig = {
     username: 'filess',
     repo: 'images',
@@ -15,32 +17,41 @@ const fileUploadConfig = {
     ]
 }
 
+function getConfiguration() {
+    const imgHost = localStorage.getItem("ImgHost") || 'default'
+
+    // default
+    let token = fileUploadConfig.accessToken[Math.floor(Math.random() * fileUploadConfig.accessToken.length)].replace('doocsmd', '')
+    let username = fileUploadConfig.username
+    let repo = fileUploadConfig.repo
+
+    // GitHub
+    if (imgHost === 'github' && localStorage.getItem("GitHubConfig")) {
+        const githubConfg = JSON.parse(localStorage.getItem("GitHubConfig"))
+        const repoUrl = githubConfg.repo.replace("https://github.com/", "").replace("http://github.com/", "").replace("github.com/", "").split("/")
+        token = githubConfg.accessToken
+        username = repoUrl[0]
+        repo = repoUrl[1]
+    }
+    return {
+        username,
+        repo,
+        token
+    }
+}
+
 
 function fileUpload(content, filename) {
     const date = new Date();
     const dir = date.getFullYear() + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0');
     const uuid = uuidv4();
     const dateFilename = new Date().getTime() + '-' + uuid + '.' + filename.split('.')[1];
-    const imgHost = localStorage.getItem("ImgHost") || 'default'
+    const {
-
+        username,
-    let token = ''
+        repo,
-    let username = ''
+        token
-    let repo = ''
+    } = getConfiguration()
-
+    const url = `https://api.github.com/repos/${username}/${repo}/contents/${dir}/${dateFilename}`
-    if (imgHost === 'default') {
-        token = fileUploadConfig.accessToken[Math.floor(Math.random() * fileUploadConfig.accessToken.length)].replace('doocsmd', '');
-        username = fileUploadConfig.username
-        repo = fileUploadConfig.repo
-    }
-
-    if (imgHost === 'github' && localStorage.getItem("GitHubConfig")) {
-        const githubConfg = JSON.parse(localStorage.getItem("GitHubConfig"));
-        token = githubConfg.accessToken
-        username = githubConfg.username
-        repo = githubConfg.repo
-    }
-
-    const url = `https://api.github.com/repos/${username}/${repo}/contents/${dir}/${dateFilename}`;
 
     return fetch({
         url,
@@ -58,4 +69,4 @@ function fileUpload(content, filename) {
 
 export default {
     fileUpload
-};
+};

src/assets/scripts/util.js

@@ -179,7 +179,6 @@ export function css2json(css) {
  */
 export function saveEditorContent(editor, name) {
     const content = editor.getValue(0)
-
     if (content) {
         localStorage.setItem(name, content)
     } else {
@@ -198,7 +197,6 @@ export function formatDoc(content) {
 
 export function fixCodeWhiteSpace(value = 'pre') {
     const preDomList = document.getElementsByClassName('code__pre');
-
     if (preDomList.length > 0) {
         preDomList.forEach(pre => {
             pre.style.whiteSpace = value;
@@ -217,4 +215,4 @@ export function downLoadMD(doc) {
     document.body.appendChild(downLink);
     downLink.click();
     document.body.removeChild(downLink);
-}
+}

src/components/CodemirrorEditor/uploadImgDialog.vue

@@ -26,7 +26,6 @@
             将文件拖到此处，或
             <em>点击上传</em>
           </div>
-          <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
         </el-upload>
       </el-tab-pane>
       <el-tab-pane class="github-panel" label="GitHub 图床" name="github">
@@ -35,21 +34,15 @@
           ref="form"
           :model="formGitHub"
           label-position="right"
-          label-width="80px"
+          label-width="100px"
         >
-          <el-form-item label="用户名">
+          <el-form-item label="GitHub 仓库">
-            <el-input v-model="formGitHub.username" placeholder="如：yanglbme"></el-input>
+            <el-input v-model="formGitHub.repo" placeholder="如：github.com/yanglbme/resource"></el-input>
-          </el-form-item>
-          <el-form-item label="仓库名">
-            <el-input v-model="formGitHub.repo" placeholder="如：resource"></el-input>
           </el-form-item>
           <el-form-item label="token">
             <el-input v-model="formGitHub.accessToken" placeholder="如：cc1d0c1426d0fd0902bd2d7184b14da61b8abc46"></el-input>
             <el-link type="primary" href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token" target="_blank">如何获取 GitHub token？</el-link>
           </el-form-item>
-          <!-- <el-form-item label="jsDelivr CDN:">
-            <el-checkbox v-model="formGitHub.useCDN"></el-checkbox>
-          </el-form-item>-->
           <el-form-item>
             <el-button type="primary" @click="onSubmit">保存配置</el-button>
           </el-form-item>
@@ -72,10 +65,8 @@ export default {
   data() {
     return {
       formGitHub: {
-        username: "",
         repo: "",
         accessToken: "",
-        // useCDN: true,
       },
       options: [
         {
@@ -105,8 +96,17 @@ export default {
       localStorage.setItem("ImgHost", this.imgHost);
     },
     onSubmit() {
-      console.log("submit github params:", this.formGitHub);
+      if (!(this.formGitHub.repo && this.formGitHub.accessToken)) {
+        const blankElement = this.formGitHub.repo ? "token" : "GitHub 仓库"
+        this.$message({
+          showClose: true,
+          message: `参数「​${blankElement}」不能为空`,
+          type: "error",
+        });
+        return;
+      }
       localStorage.setItem("GitHubConfig", JSON.stringify(this.formGitHub));
+      console.log("submit github params:", this.formGitHub);
       this.$message({
         message: "保存成功",
         type: "success",
@@ -137,8 +137,8 @@ export default {
     validateConfig() {
       switch (this.imgHost) {
         case "github":
-          const { username, repo, accessToken } = this.formGitHub;
+          const { repo, accessToken } = this.formGitHub;
-          if (!username || !repo || !accessToken) {
+          if (!repo || !accessToken) {
             this.$message.error("未配置 GitHub 参数");
             return false;
           }