Merge pull request #39 from doocs/feature-style-update

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;
     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,7 +37,8 @@ export default {
     },
     data() {
         return {
-            list: [
+            menu: [
+                [
                     {
                         text: "上传图片",
                         key: "insertPic",
@@ -48,11 +51,14 @@ export default {
                         text: "页面重置",
                         key: "pageReset",
                     },
+                ],
+                [
                     {
                         text: "下载MD文档",
                         key: "downLoad",
                     },
                 ],
+            ],
         };
     },
     methods: {
@@ -70,32 +76,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, 0.12), 0 2px 4px 0 rgba(0, 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 +109,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;