feat: style fix

src/assets/less/theme.less

@@ -6,67 +6,84 @@
 @nightFontColor: gray;
 @nightLinkColor: #8e9eb9;
 @nightLinkTextColor: #84868b;
-@nightWhiteColor: #ffffff;
+@nightWhiteColor: #f0f0f0;
 @nightButtonBg: #1e1e1e;
 @nightButtonHoverColor: #84868b;
+@nightLineColor: #84868b;
+
 .container_night {
     background-color: @nightBgColor;
+
     .el-main {
         background-color: @nightBgColor;
     }
+
     .CodeMirror {
         caret-color: @nightFontColor;
         color: @nightFontColor;
         background-color: @nightCodeMirrorColor;
         box-shadow: inset 0 0 0 1px rgba(100, 37, 37, 0.102);
     }
+
     .output_night {
         .preview {
             background-color: @nightPreviewColor;
             box-shadow: 0 0 70px rgba(0, 0, 0, 0.3);
         }
+
         .preview-wrapper {
             background-color: @nightCodeMirrorColor;
             box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
         }
+
         .code-snippet__fix {
             background-color: rgb(238, 238, 238);
         }
     }
+
     .cm-s-style-mirror .CodeMirror-matchingbracket {
-    color: @nightWhiteColor!important;
+        color: @nightWhiteColor  !important;
         background: rgb(30, 30, 30) !important;
     }
+
     .cm-s-xq-light span.cm-variable-2,
     .cm-s-style-mirror span.cm-tag {
         color: @nightFontColor;
     }
+
     .cm-s-xq-light .CodeMirror-activeline-background {
         background-color: transparent;
     }
+
     .cm-s-xq-light span.cm-string {
         color: @nightLinkColor;
     }
+
     .cm-s-xq-light span.cm-link {
         color: @nightLinkTextColor;
     }
+
     .editor__header {
         background-color: @nightHeaderColor;
     }
+
     .el-button {
         color: @nightWhiteColor;
         background-color: @nightCodeMirrorColor;
         border: 1px solid transparent;
     }
+
     .el-button.is-plain:focus,
     .el-button.is-plain:hover {
         background: @nightButtonBg;
         color: @nightWhiteColor;
         border: 1px solid @nightWhiteColor;
+
         i {
             color: @nightWhiteColor;
         }
     }
+
     .insert__dialog,
     .about__dialog,
     .reset__dialog,
@@ -74,29 +91,40 @@
         .el-dialog {
             background-color: @nightBgColor;
         }
+
         .el-dialog__body {
             color: @nightWhiteColor;
         }
+
         .el-dialog__title,
         .el-form-item__label {
             color: @nightWhiteColor;
         }
+
         .el-tabs__item {
             color: @nightActiveCodeMirrorColor;
         }
+
+        .el-tabs__nav-wrap::after {
+            background-color: @nightLineColor;
+        }
+
         .is-active {
             color: @nightWhiteColor;
         }
+
         .el-upload-dragger {
             background-color: @nightButtonBg;
         }
     }
+
     ::v-deep .el-icon-upload,
     .el-icon-download,
     .el-icon-refresh,
     .el-icon-s-grid {
         color: @nightWhiteColor;
     }
+
     ::-webkit-scrollbar {
         background-color: @nightCodeMirrorColor;
     }

src/components/CodemirrorEditor/aboutDialog.vue

@@ -50,4 +50,8 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+/deep/ .el-dialog {
+    min-width: 420px;
+}
+</style>

src/components/CodemirrorEditor/insertForm.vue

@@ -105,6 +105,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
+/deep/ .el-dialog {
+    width: 55%;
+    min-height: 375px;
+    min-width: 440px;
+}
 .tb-options {
     margin-bottom: 20px;
 }

src/components/CodemirrorEditor/resetDialog.vue

@@ -40,6 +40,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+/deep/ .el-dialog {
+    min-width: 440px;
+}
 .reset__dialog {
     text-align: center;
 }

src/components/CodemirrorEditor/rightClickMenu.vue

@@ -5,14 +5,16 @@
         class="menu"
         :style="`left: ${left}px;top: ${top}px;`"
     >
+        <div class="menu__group" v-for="(menuItem, index) in menu" :key="index">
             <li
-            v-for="item of list"
+                v-for="item of menuItem"
                 :key="item.key"
                 class="menu_item"
                 @mousedown="onMouseDown(item.key)"
             >
                 <span>{{ item.text }}</span>
             </li>
+        </div>
     </ul>
 </template>
 
@@ -35,8 +37,8 @@ export default {
     },
     data() {
         return {
-            list: [
+            menu: [
-                {
+                [{
                     text: "上传图片",
                     key: "insertPic",
                 },
@@ -47,12 +49,12 @@ export default {
                 {
                     text: "页面重置",
                     key: "pageReset",
-                },
+                }],
-                {
+                [{
                     text: "下载MD文档",
                     key: "downLoad",
-                },
+                }]
-            ],
+            ]
         };
     },
     methods: {
@@ -70,32 +72,30 @@ export default {
 <style lang="less" scoped>
 .menu {
     position: absolute;
-    padding: 6px 0;
     border-radius: 4px;
-    border: 1px solid #aaaaaa;
     background-color: #ffffff;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
     z-index: 9999;
 }
 
 .menu_item {
     margin-top: 10px;
-    min-width: 125px;
+    min-width: 200px;
-    font-size: 14px;
+    font-size: 12px;
     line-height: 20px;
-    color: #303133;
+    color: #333333;
     cursor: pointer;
     &:first-of-type {
         margin-top: 0;
     }
     &:hover {
-        color: white;
+        background: #f0f0f0;
-        background: rgb(139, 146, 148);
     }
     span,
     .btn-upload {
-        text-align: center;
         display: inline-block;
         padding: 4px 0;
+        padding-left: 24px;
         width: 100%;
     }
     .btn-upload {
@@ -105,17 +105,24 @@ export default {
         background: transparent;
     }
     .btn-upload:hover {
-        color: white;
+        background: #aaaaaa;
-        background: rgb(139, 146, 148);
     }
     ::v-deep .el-upload {
         width: 100%;
     }
 }
 
+.menu__group {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #eeeeee;
+    &:last-of-type {
+        border-bottom: none;
+    }
+}
+
 li:hover {
     background-color: #1790ff;
-    color: white;
 }
 
 li {

src/components/CodemirrorEditor/uploadImgDialog.vue

@@ -5,7 +5,7 @@
         :visible="value"
         @close="$emit('close')"
     >
-        <el-tabs type="card" :value="'upload'">
+        <el-tabs type="activeName" :value="'upload'">
             <el-tab-pane class="upload-panel" label="选择上传" name="upload">
                 <el-select
                     v-model="imgHost"
@@ -42,7 +42,6 @@
             <el-tab-pane class="github-panel" label="Gitee 图床" name="gitee">
                 <el-form
                     class="setting-form"
-                    ref="form"
                     :model="formGitee"
                     label-position="right"
                     label-width="140px"
@@ -85,7 +84,6 @@
             <el-tab-pane class="github-panel" label="GitHub 图床" name="github">
                 <el-form
                     class="setting-form"
-                    ref="form"
                     :model="formGitHub"
                     label-position="right"
                     label-width="140px"
@@ -127,7 +125,6 @@
             <el-tab-pane class="github-panel" label="阿里云 OSS" name="aliOSS">
                 <el-form
                     class="setting-form"
-                    ref="form"
                     :model="formAliOSS"
                     label-position="right"
                     label-width="140px"
@@ -187,7 +184,6 @@
             <el-tab-pane class="github-panel" label="腾讯云 COS" name="txCOS">
                 <el-form
                     class="setting-form"
-                    ref="form"
                     :model="formTxCOS"
                     label-position="right"
                     label-width="140px"
@@ -247,7 +243,6 @@
             <el-tab-pane class="github-panel" label="七牛云 Kodo" name="qiniu">
                 <el-form
                     class="setting-form"
-                    ref="form"
                     :model="formQiniu"
                     label-position="right"
                     label-width="140px"
@@ -593,10 +588,19 @@ export default {
 
 <style lang="less" scoped>
 /deep/ .el-dialog {
-    width: 40%;
+    width: 55%;
+    min-height: 615px;
+    min-width: 640px;
 }
 /deep/ .el-upload-dragger {
-    width: 335px;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    width: 500px;
+    height: 360px;
+    .el-icon-upload {
+        margin-top: 0;
+    }
 }
 /deep/ .el-dialog__body {
     padding-bottom: 50px;