feature: night theme for upload-image-dialog

src/assets/less/theme.less

@@ -65,7 +65,7 @@
             color: @nightWhiteColor;
         }
     }
-    .insert__dialog, .about__dialog, .reset__dialog {
+    .insert__dialog, .about__dialog, .reset__dialog, .upload__dialog {
         .el-dialog {
             background-color: @nightBgColor;
         }
@@ -75,6 +75,15 @@
         .el-dialog__title, .el-form-item__label {
             color: @nightWhiteColor;
         }
+        .el-tabs__item {
+            color: @nightActiveCodeMirrorColor;
+        }
+        .is-active {
+            color: @nightWhiteColor;
+        }
+        .el-upload-dragger {
+            background-color: @nightButtonBg;
+        }
     }
     /deep/ .el-icon-upload, .el-icon-download, .el-icon-refresh, .el-icon-s-grid {
         color: @nightWhiteColor;

src/components/CodemirrorEditor/uploadImgDialog.vue

@@ -1,26 +1,14 @@
 <template>
-  <el-dialog title="插入图片" class="dialog" :visible="value" @close="$emit('close')">
+    <el-dialog title="插入图片" class="upload__dialog" :visible="value" @close="$emit('close')">
         <el-tabs type="card" :value="'upload'">
             <el-tab-pane class="upload-panel" label="选择上传" name="upload">
                 <el-select v-model="imgHost" @change="changeImgHost" placeholder="请选择" size="small">
-          <el-option
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-            v-for="item in options"
+                    </el-option>
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          ></el-option>
                 </el-select>
-        <el-upload
+                <el-upload drag action :headers="{'Content-Type': 'multipart/form-data'}" :show-file-list="false"
-          drag
+                    :multiple="true" accept=".jpg, .jpeg, .png, .gif" name="file" :before-upload="beforeUpload"
-          action
+                    v-loading="uploadingImg">
-          :headers="{'Content-Type': 'multipart/form-data'}"
-          :show-file-list="false"
-          :multiple="true"
-          accept=".jpg, .jpeg, .png, .gif"
-          name="file"
-          :before-upload="beforeUpload"
-          v-loading="uploadingImg"
-        >
                     <i class="el-icon-upload"></i>
                     <div class="el-upload__text">
                         将文件拖到此处，或
@@ -29,19 +17,16 @@
                 </el-upload>
             </el-tab-pane>
             <el-tab-pane class="github-panel" label="GitHub 图床" name="github">
-        <el-form
+                <el-form class="setting-form" ref="form" :model="formGitHub" label-position="right" label-width="100px">
-          class="setting-form"
-          ref="form"
-          :model="formGitHub"
-          label-position="right"
-          label-width="100px"
-        >
                     <el-form-item label="GitHub 仓库">
                         <el-input v-model="formGitHub.repo" placeholder="如：github.com/yanglbme/resource"></el-input>
                     </el-form-item>
                     <el-form-item label="token">
-            <el-input v-model="formGitHub.accessToken" placeholder="如：cc1d0c1426d0fd0902bd2d7184b14da61b8abc46"></el-input>
+                        <el-input v-model="formGitHub.accessToken"
-            <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>
+                            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>
                         <el-button type="primary" @click="onSubmit">保存配置</el-button>
@@ -53,7 +38,9 @@
 </template>
 
 <script>
-import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
+import {
+    uploadImgFile
+} from "../../assets/scripts/uploadImageFile";
 
 export default {
     props: {
@@ -68,8 +55,7 @@ export default {
                 repo: "",
                 accessToken: "",
             },
-      options: [
+            options: [{
-        {
                     value: "default",
                     label: "默认图床",
                 },
@@ -137,7 +123,10 @@ export default {
         validateConfig() {
             switch (this.imgHost) {
                 case "github":
-          const { repo, accessToken } = this.formGitHub;
+                    const {
+                        repo, accessToken
+                    } = this.formGitHub;
+                    
                     if (!repo || !accessToken) {
                         this.$message.error("未配置 GitHub 参数");
                         return false;
@@ -156,21 +145,26 @@ export default {
     justify-content: center;
     align-items: center;
     text-align: center;
+
     .el-select {
         align-self: flex-end;
         margin: 0 67.75px 20px;
         width: 100px;
     }
 }
+
 .github-panel {
     display: flex;
     justify-content: center;
 }
+
 .setting-form {
     width: 70%;
+
     .el-form-item {
         margin: 15px;
     }
+
     .el-form-item:last-child {
         text-align: right;
     }