From a108af2ebef5f99a96c08fadad88f3c4f02a1390 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=92=83=E7=99=BD?= <18511759309@163.com>
Date: Mon, 19 Jul 2021 17:12:42 +0800
Subject: [PATCH] feat

---
 package.json                                  |  2 +-
 src/App.vue                                   |  2 +-
 src/assets/js/utils.js                        | 10 ++++-
 src/assets/style/variable.less                |  3 +-
 src/components/content/help-doc.vue           | 42 +++++++++++++++----
 .../header/components/code-select.vue         | 34 +++++++++++----
 .../header/components/markdown-doc.vue        |  2 +-
 src/components/header/md-header.vue           | 16 +++----
 8 files changed, 82 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 08d7dc2..d7e7aac 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "markdown-editor",
   "description": " A open source markdown editor of csdn codechina team contributed",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "publisher": "guoweijia",
   "scripts": {
     "start": "webpack serve --mode=development",
diff --git a/src/App.vue b/src/App.vue
index 594f596..8b81df3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -315,7 +315,7 @@ export default {
             const newText = formatText(
               originalText,
               selectionInfo,
-              "\n\n![img](",
+              "\n![img](",
               `${url})\n`
             );
             _this.text = newText;
diff --git a/src/assets/js/utils.js b/src/assets/js/utils.js
index af9e1e9..fc2eb1a 100644
--- a/src/assets/js/utils.js
+++ b/src/assets/js/utils.js
@@ -74,7 +74,8 @@ export function initStyle({
   frameBgColor,
   contentBgColor,
   codeBgColor,
-  codeTheme
+  codeTheme,
+  helpdocColor
 }) {
   // 夜晚模式
   if (dark) {
@@ -86,6 +87,7 @@ export function initStyle({
     frameBgColor = "#222226";
     codeBgColor = "#777888";
     contentBgColor = "#222226";
+    helpdocColor = "#CCCCD8";
   }
   if (frameBgColor) {
     document.documentElement.style.setProperty(
@@ -125,6 +127,12 @@ export function initStyle({
       textColor
     );
   }
+  if (helpdocColor) {
+    document.documentElement.style.setProperty(
+      "--md-editor-helpdoc-color",
+      helpdocColor
+    );
+  }
   if (textColorActive) {
     document.documentElement.style.setProperty(
       "--md-editor-text-color-active",
diff --git a/src/assets/style/variable.less b/src/assets/style/variable.less
index 792f049..f0229ea 100644
--- a/src/assets/style/variable.less
+++ b/src/assets/style/variable.less
@@ -2,9 +2,10 @@
   --md-editor-border-color: #dbdbdb;
   --md-editor-border-color-active: #409eff;
   --md-editor-text-color: #303030;
-  --md-editor-text-color-active: #000;
+  --md-editor-text-color-active: #333;
   --md-editor-frame-bg-color: #fff;
   --md-editor-content-bg-color: #fff;
+  --md-editor-helpdoc-color: #666666;
   --md-editor-code-bg-color: #f3f4f5;
   --md-editor-fullScrren-zIndex: 2000;
 }
diff --git a/src/components/content/help-doc.vue b/src/components/content/help-doc.vue
index 62b7cdd..54208f6 100644
--- a/src/components/content/help-doc.vue
+++ b/src/components/content/help-doc.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="help_doc">
-    <div class="container">
+    <div class="doc_container">
       <h2>
         Markdown 语法
         <span
@@ -124,7 +124,35 @@ export default {
   padding-right: 0;
   // border-radius: 4px;
   z-index: 9;
-  .container {
+  &::before {
+    content: "";
+    position: absolute;
+    top: 4px;
+    left: 0;
+    width: 100%;
+    height: 24px;
+    pointer-events: none;
+    background: linear-gradient(
+      to bottom,
+      var(--md-editor-content-bg-color),
+      transparent
+    );
+  }
+  &::after {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    bottom: 12px;
+    left: 0;
+    width: 100%;
+    height: 24px;
+    background: linear-gradient(
+      to top,
+      var(--md-editor-content-bg-color),
+      transparent
+    );
+  }
+  .doc_container {
     overflow-y: auto;
     padding-right: 14px;
     height: 100%;
@@ -133,20 +161,20 @@ export default {
       display: none;
     }
     h2 {
-      font-size: 18px;
-       color: #333;
+      font-size: 16px;
+      color: var(--md-editor-text-color-active);
       .icon {
         float: right;
-        margin-top: 4px;
+        margin-top: 3px;
         cursor: pointer;
         font-weight: 400;
       }
     }
     ul.list {
-      margin-top: 10px;
+      margin-top: 14px;
       li {
         font-size: 14px;
-        color: #666;
+        color: var(--md-editor-helpdoc-color);
         margin-bottom: 10px;
         .icon {
           display: inline-block;
diff --git a/src/components/header/components/code-select.vue b/src/components/header/components/code-select.vue
index b0abba2..932c574 100644
--- a/src/components/header/components/code-select.vue
+++ b/src/components/header/components/code-select.vue
@@ -1,13 +1,15 @@
 <template>
-  <ul>
-    <li
-      @click="$emit('select', item)"
-      v-for="(item, index) in list"
-      :key="index"
-    >
-      {{ item }}
-    </li>
-  </ul>
+  <div class="code_select_container">
+    <ul>
+      <li
+        @click="$emit('select', item)"
+        v-for="(item, index) in list"
+        :key="index"
+      >
+        {{ item }}
+      </li>
+    </ul>
+  </div>
 </template>
 <script>
 export default {
@@ -51,6 +53,19 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.code_select_container {
+  position: relative;
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 18px;
+    pointer-events: none;
+    background: linear-gradient(to top, #fff, transparent);
+  }
+}
 ul {
   max-height: 142px;
   overflow-y: auto;
@@ -62,6 +77,7 @@ ul {
   scrollbar-color: transparent transparent;
   // scrollbar-track-color: transparent;
   // -ms-scrollbar-track-color: transparent;
+
   &::-webkit-scrollbar {
     display: none;
     width: 2px;
diff --git a/src/components/header/components/markdown-doc.vue b/src/components/header/components/markdown-doc.vue
index 99c3873..a34cc7a 100644
--- a/src/components/header/components/markdown-doc.vue
+++ b/src/components/header/components/markdown-doc.vue
@@ -25,7 +25,7 @@ export default {
 .tips {
   text-align: center;
   .doc {
-    color: #666;
+    color: var(--md-editor-text-color-active);
   }
 }
 </style>
diff --git a/src/components/header/md-header.vue b/src/components/header/md-header.vue
index 82766e8..b951562 100644
--- a/src/components/header/md-header.vue
+++ b/src/components/header/md-header.vue
@@ -5,16 +5,16 @@
         :class="['tab_item', { active: canPreview && !showPreview }]"
         @click="setShowPreview(false)"
       >
-        <span :class="['icon iconfont', `icon-bianji`]"></span>
-        <span v-if="!isMobile">编辑</span>
+        <!-- <span :class="['icon iconfont', `icon-bianji`]"></span> -->
+        <span>编辑</span>
       </div>
       <div
         v-if="canPreview"
         :class="['tab_item', { active: showPreview }]"
         @click="setShowPreview(true)"
       >
-        <span :class="['icon iconfont', `icon-yulan`]"></span>
-        <span v-if="!isMobile">预览</span>
+        <!-- <span :class="['icon iconfont', `icon-yulan`]"></span> -->
+        <span>预览</span>
       </div>
     </div>
     <div class="header_tools" v-if="!showPreview">
@@ -178,7 +178,7 @@ export default {
           name: "quote",
           icon: "yinyong",
           tip: "插入引用",
-          doc: "> 空格",
+          doc: "> 内容",
           startStr: "\n> ",
           endStr: ""
         },
@@ -214,7 +214,7 @@ export default {
           name: "ol",
           icon: "youxuliebiao",
           tip: "添加有序列表",
-          doc: "1. 空格",
+          doc: "1. 内容",
           startStr: "",
           endStr: ""
         },
@@ -229,7 +229,7 @@ export default {
           name: "task",
           icon: "renwu",
           tip: "添加任务列表",
-          doc: "- [空格]",
+          doc: "- [空格] 内容",
           startStr: "\n- [ ] ",
           endStr: ""
         },
@@ -244,7 +244,7 @@ export default {
         {
           name: "help",
           icon: "help",
-          tip: "帮助"
+          tip: "Markdown语法"
         },
         {
           name: "fullScreen",
-- 
GitLab