From 93634f323aa782131bf28a6ef0eaaabe2b7536b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=92=83=E7=99=BD?= <18511759309@163.com>
Date: Fri, 9 Jul 2021 18:52:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E8=AF=AD=E8=A8=80?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  5 +-
 .../header/components/language-list.vue       | 70 +++++++++++++++++++
 .../header/components/table-select.vue        | 58 +++++++++++++++
 .../header/{ => components}/tool-button.vue   | 52 +++++++++++++-
 src/components/header/md-header.vue           |  2 +-
 5 files changed, 182 insertions(+), 5 deletions(-)
 create mode 100644 src/components/header/components/language-list.vue
 create mode 100644 src/components/header/components/table-select.vue
 rename src/components/header/{ => components}/tool-button.vue (66%)

diff --git a/src/App.vue b/src/App.vue
index 3b0eaa6..fbabb8a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -69,6 +69,7 @@
       :can-attach-file="canAttachFile"
       v-if="!showPreview && canAttachFile"
     /> -->
+    <tableSelect />
   </div>
 </template>
 <script>
@@ -76,13 +77,15 @@ import markdownHeader from "./components/header/md-header";
 import markdownFooter from "./components/footer/md-footer";
 import markdownEditor from "./components/content/md-textarea";
 import markdownPreview from "./components/content/md-preview";
+import tableSelect from "./components/header/components/table-select";
 import { formatText, checktUrl } from "@/assets/js/utils";
 export default {
   components: {
     markdownHeader,
     markdownFooter,
     markdownEditor,
-    markdownPreview
+    markdownPreview,
+    tableSelect
   },
   props: {
     placeholder: {
diff --git a/src/components/header/components/language-list.vue b/src/components/header/components/language-list.vue
new file mode 100644
index 0000000..79f8253
--- /dev/null
+++ b/src/components/header/components/language-list.vue
@@ -0,0 +1,70 @@
+<template>
+  <ul>
+    <li
+      @click="$emit('select', item)"
+      v-for="(item, index) in list"
+      :key="index"
+    >
+      {{ item }}
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        "Bash",
+        "C",
+        "C++",
+        "C#",
+        "CLike",
+        "CSS",
+        "Go",
+        "Html",
+        "Java",
+        "JavaScript",
+        "TypeScript",
+        "Kotlin",
+        "Markup",
+        "Objective-C",
+        "Peri",
+        "PHP",
+        "Shell",
+        "Python",
+        "Ruby",
+        "SQL",
+        "Swift",
+        "VB.Net",
+        "YAML",
+        "Erlang",
+        "Scala",
+        "Clojure",
+        "Cobol",
+        "CoffeeScript",
+        "CommonLisp",
+        "R",
+        "XML"
+      ]
+    };
+  }
+};
+</script>
+<style lang="less" scoped>
+ul {
+  max-height: 160px;
+  overflow-y: auto;
+  margin-top: 2px;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  li {
+    cursor: pointer;
+    height: 24px;
+    line-height: 24px;
+    &:hover {
+      color: var(--md-editor-border-color-active);
+    }
+  }
+}
+</style>
diff --git a/src/components/header/components/table-select.vue b/src/components/header/components/table-select.vue
new file mode 100644
index 0000000..25fb926
--- /dev/null
+++ b/src/components/header/components/table-select.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="block_container" ref="block_container">
+    <div
+      @mousemove.stop="getCursorPoint"
+      :class="['block', { active: item.active }]"
+      v-for="(item, index) in list"
+      :key="index"
+    ></div>
+  </div>
+</template>
+<script>
+import { throttle as throttleFn } from "@/assets/js/utils";
+export default {
+  data() {
+    return {
+      list: new Array(40).fill({
+        index: 0,
+        active: false
+      })
+    };
+  },
+  computed: {},
+  methods: {
+    getCursorPoint(e) {
+      console.log(e.clientX, e.clientY);
+      const target = e.target;
+
+      const { offsetLeft, offsetTop } = target;
+      if (e.clientX > offsetLeft) {
+        target.className = "block active";
+      }
+      // console.log(offsetLeft, offsetTop);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+@block-size: 16px;
+@block-margin: 2px;
+.block_container {
+  width: (@block-size+ @block-margin*2) * 10;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  .block {
+    cursor: pointer;
+    width: @block-size;
+    height: @block-size;
+    box-sizing: border-box;
+    margin: @block-margin;
+    border: 1px solid var(--md-editor-border-color);
+    &:hover,
+    &.active {
+      border: 1px solid var(--md-editor-border-color-active);
+    }
+  }
+}
+</style>
diff --git a/src/components/header/tool-button.vue b/src/components/header/components/tool-button.vue
similarity index 66%
rename from src/components/header/tool-button.vue
rename to src/components/header/components/tool-button.vue
index ff3b622..57c37ee 100644
--- a/src/components/header/tool-button.vue
+++ b/src/components/header/components/tool-button.vue
@@ -6,6 +6,22 @@
   >
     <span :class="['icon iconfont', `icon-${info.icon}`]"></span>
   </div>
+  <div
+    v-else-if="info.name === 'code'"
+    @click="handleTool(info.name, info.startStr, info.endStr)"
+    v-tip.bottom="codeOptions"
+    class="tool_button"
+  >
+    <span :class="['icon iconfont', `icon-${info.icon}`]"></span>
+  </div>
+  <div
+    v-else-if="info.name === 'table'"
+    @click="handleTool(info.name, info.startStr, info.endStr)"
+    v-tip.bottom="tableOptions"
+    class="tool_button"
+  >
+    <span :class="['icon iconfont', `icon-${info.icon}`]"></span>
+  </div>
   <div
     v-else
     v-tip.bottom="options"
@@ -17,7 +33,10 @@
 </template>
 <script>
 import { formatText, checkBoswer } from "@/assets/js/utils";
+import languageList from "./language-list";
+import tableSelect from "./table-select";
 export default {
+  components: { languageList, tableSelect },
   props: {
     info: {
       type: Object,
@@ -67,12 +86,39 @@ export default {
         zIndex: parseInt(this.zIndex) + 1,
         theme: this.darkMode ? "dark" : "light"
       };
+    },
+    codeOptions() {
+      return {
+        content: this.info.tip,
+        customComponent: languageList,
+        customListeners: {
+          select: val => {
+            console.log(val);
+            const lang = val.toLowerCase().replace(/-/, "");
+            this.handleTool("code", "\n```" + lang, "\n\n\n```");
+          }
+        },
+        zIndex: parseInt(this.zIndex) + 1,
+        theme: this.darkMode ? "dark" : "light"
+      };
+    },
+    tableOptions() {
+      return {
+        content: this.info.tip,
+        customComponent: tableSelect,
+        customListeners: {
+          select: val => {
+            console.log(val);
+            const lang = val.toLowerCase().replace(/-/, "");
+            this.handleTool("code", "\n```" + lang, "\n\n\n```");
+          }
+        },
+        zIndex: parseInt(this.zIndex) + 1,
+        theme: this.darkMode ? "dark" : "light"
+      };
     }
   },
   methods: {
-    // resetUlNum() {
-    //   this.ulNum = 1;
-    // },
     handleTool(type, startStr, endStr) {
       switch (type) {
         case "bold":
diff --git a/src/components/header/md-header.vue b/src/components/header/md-header.vue
index b0c6ba6..a353299 100644
--- a/src/components/header/md-header.vue
+++ b/src/components/header/md-header.vue
@@ -41,7 +41,7 @@ import {
   getPosition,
   removeBlankLine
 } from "@/assets/js/utils";
-import toolButton from "./tool-button";
+import toolButton from "./components/tool-button";
 export default {
   components: { toolButton },
   props: {
-- 
GitLab