From a70a6374dc77ea0c6e69bbd1e7b2c0a50f9a49c6 Mon Sep 17 00:00:00 2001
From: jimqing <jimqing@yeah.net>
Date: Sun, 22 Nov 2020 20:33:04 +0800
Subject: [PATCH] feat: style fix

---
 src/assets/less/theme.less                    | 190 ++++++++++--------
 .../CodemirrorEditor/aboutDialog.vue          |   6 +-
 .../CodemirrorEditor/insertForm.vue           |   5 +
 .../CodemirrorEditor/resetDialog.vue          |   3 +
 .../CodemirrorEditor/rightClickMenu.vue       |  57 +++---
 .../CodemirrorEditor/uploadImgDialog.vue      |  20 +-
 6 files changed, 166 insertions(+), 115 deletions(-)

diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index 640363a..24e62ce 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -6,98 +6,126 @@
 @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);
+
+    .el-main {
+        background-color: @nightBgColor;
     }
-    .preview-wrapper {
-      background-color: @nightCodeMirrorColor;
-      box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
+
+    .CodeMirror {
+        caret-color: @nightFontColor;
+        color: @nightFontColor;
+        background-color: @nightCodeMirrorColor;
+        box-shadow: inset 0 0 0 1px rgba(100, 37, 37, 0.102);
     }
-    .code-snippet__fix {
-      background-color: rgb(238, 238, 238);
+
+    .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;
-    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;
+
+    .cm-s-style-mirror .CodeMirror-matchingbracket {
+        color: @nightWhiteColor  !important;
+        background: rgb(30, 30, 30) !important;
     }
-  }
-  .insert__dialog,
-  .about__dialog,
-  .reset__dialog,
-  .upload__dialog {
-    .el-dialog {
-      background-color: @nightBgColor;
+
+    .cm-s-xq-light span.cm-variable-2,
+    .cm-s-style-mirror span.cm-tag {
+        color: @nightFontColor;
     }
-    .el-dialog__body {
-      color: @nightWhiteColor;
+
+    .cm-s-xq-light .CodeMirror-activeline-background {
+        background-color: transparent;
     }
-    .el-dialog__title,
-    .el-form-item__label {
-      color: @nightWhiteColor;
+
+    .cm-s-xq-light span.cm-string {
+        color: @nightLinkColor;
     }
-    .el-tabs__item {
-      color: @nightActiveCodeMirrorColor;
+
+    .cm-s-xq-light span.cm-link {
+        color: @nightLinkTextColor;
     }
-    .is-active {
-      color: @nightWhiteColor;
+
+    .editor__header {
+        background-color: @nightHeaderColor;
     }
-    .el-upload-dragger {
-      background-color: @nightButtonBg;
+
+    .el-button {
+        color: @nightWhiteColor;
+        background-color: @nightCodeMirrorColor;
+        border: 1px solid transparent;
     }
-  }
-  ::v-deep .el-icon-upload,
-  .el-icon-download,
-  .el-icon-refresh,
-  .el-icon-s-grid {
-    color: @nightWhiteColor;
-  }
-  ::-webkit-scrollbar {
-    background-color: @nightCodeMirrorColor;
-  }
-}
+
+    .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,
+    .upload__dialog {
+        .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;
+    }
+}
\ No newline at end of file
diff --git a/src/components/CodemirrorEditor/aboutDialog.vue b/src/components/CodemirrorEditor/aboutDialog.vue
index de16e94..bb35cb1 100644
--- a/src/components/CodemirrorEditor/aboutDialog.vue
+++ b/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>
diff --git a/src/components/CodemirrorEditor/insertForm.vue b/src/components/CodemirrorEditor/insertForm.vue
index 7cd74fc..7a80556 100644
--- a/src/components/CodemirrorEditor/insertForm.vue
+++ b/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;
 }
diff --git a/src/components/CodemirrorEditor/resetDialog.vue b/src/components/CodemirrorEditor/resetDialog.vue
index 0331aba..298ff4d 100644
--- a/src/components/CodemirrorEditor/resetDialog.vue
+++ b/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;
 }
diff --git a/src/components/CodemirrorEditor/rightClickMenu.vue b/src/components/CodemirrorEditor/rightClickMenu.vue
index efba36b..0223161 100644
--- a/src/components/CodemirrorEditor/rightClickMenu.vue
+++ b/src/components/CodemirrorEditor/rightClickMenu.vue
@@ -5,14 +5,16 @@
         class="menu"
         :style="`left: ${left}px;top: ${top}px;`"
     >
-        <li
-            v-for="item of list"
-            :key="item.key"
-            class="menu_item"
-            @mousedown="onMouseDown(item.key)"
-        >
-            <span>{{ item.text }}</span>
-        </li>
+        <div class="menu__group" v-for="(menuItem, index) in menu" :key="index">
+            <li
+                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;
-    font-size: 14px;
+    min-width: 200px;
+    font-size: 12px;
     line-height: 20px;
-    color: #303133;
+    color: #333333;
     cursor: pointer;
     &:first-of-type {
         margin-top: 0;
     }
     &:hover {
-        color: white;
-        background: rgb(139, 146, 148);
+        background: #f0f0f0;
     }
     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: rgb(139, 146, 148);
+        background: #aaaaaa;
     }
     ::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 {
diff --git a/src/components/CodemirrorEditor/uploadImgDialog.vue b/src/components/CodemirrorEditor/uploadImgDialog.vue
index 55fe3ad..11cc3e9 100644
--- a/src/components/CodemirrorEditor/uploadImgDialog.vue
+++ b/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;