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

feat: style fix
2024-11-24 19:10:34 +08:00 · 2020-11-22 20:53:37 +08:00 · 2020-11-22 20:53:37 +08:00 · 3eb06bf852
commit 3eb06bf852
parent 20e0c4ffd6 eed30293d4
6 changed files with 102 additions and 47 deletions
--- a/src/assets/less/theme.less
+++ b/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;
  }
--- 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>
--- 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;
 }
--- 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;
 }
--- 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,23 +37,27 @@ export default {
    },
    data() {
        return {
-            list: [
-                {
-                    text: "上传图片",
-                    key: "insertPic",
-                },
-                {
-                    text: "插入表格",
-                    key: "insertTable",
-                },
-                {
-                    text: "页面重置",
-                    key: "pageReset",
-                },
-                {
-                    text: "下载MD文档",
-                    key: "downLoad",
-                },
+            menu: [
+                [
+                    {
+                        text: "上传图片",
+                        key: "insertPic",
+                    },
+                    {
+                        text: "插入表格",
+                        key: "insertTable",
+                    },
+                    {
+                        text: "页面重置",
+                        key: "pageReset",
+                    },
+                ],
+                [
+                    {
+                        text: "下载MD文档",
+                        key: "downLoad",
+                    },
+                ],
            ],
        };
    },
@ -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;
-    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 +109,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 {
--- 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;