feature: 添加Markdown解析器

index.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
+
     <title>Vite App</title>
   </head>
 

package.json

@@ -34,6 +34,7 @@
     "i18next": "^21.6.7",
     "intro.js": "^4.3.0",
     "lodash-es": "^4.17.21",
+    "marked": "^4.0.10",
     "mockjs": "^1.1.0",
     "pinia": "^2.0.9",
     "sortablejs": "^1.14.0",
@@ -51,6 +52,7 @@
     "@types/core-js": "^2.5.5",
     "@types/intro.js": "^3.0.2",
     "@types/lodash-es": "^4.17.5",
+    "@types/marked": "^4.0.1",
     "@types/node": "^17.0.10",
     "@types/sortablejs": "^1.10.7",
     "@typescript-eslint/eslint-plugin": "^5.10.0",

src/locales/en/modules/route.ts

@@ -12,6 +12,7 @@ const route = {
     editor: 'Editor',
     editor_logicFlow: 'LogicFlow',
     editor_richText: 'RichText Editor',
+    editor_markdown: 'Markdown',
     userInfo: 'UserInfo',
     userList: 'UserList',
     userDateil: 'UserDateil',

src/locales/zh-ch/modules/route.ts

@@ -10,8 +10,9 @@ const route = {
     echarts_bar: '柱状图',
     echarts_map: '地图',
     editor: '编辑器',
-    editor_logicFlow: '流程图',
+    editor_logicFlow: '流程图编辑器',
     editor_richText: '富文本编辑器',
+    editor_markdown: 'Markdown',
     userInfo: '用户管理',
     userList: '用户列表',
     userDateil: '用户详情',

src/router/modules/otherRoute/otherRoute.ts

@@ -94,6 +94,12 @@ const safeManagerRoutes: Array<AppRouteRecordRaw> = [
         component: () => import('@/views/editor/richText/index.vue'),
         meta: { title: t('route.pathName.editor_richText') },
       },
+      {
+        path: 'markdown',
+        name: 'RtMarkdown',
+        component: () => import('@/views/editor/markdown/index.vue'),
+        meta: { title: t('route.pathName.editor_markdown') },
+      },
       {
         path: 'logic-flow',
         name: 'RtLogicFlow',

src/styles/mycolor.module.scss

@@ -0,0 +1,6 @@
+$-fagfa: red;
+
+:export {
+  // 主题背景颜色
+  mainBgColor: #{$main-bg-color}; // 首选背景颜色
+}

src/views/editor/markdown/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="page-container">
+    <el-input v-model="inputText" class="input" type="textarea"></el-input>
+    <div class="marked" :innerHTML="html"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { marked } from 'marked';
+
+  const inputText = ref<string>('# Marked in Node.js\n\nRendered by **marked**.');
+
+  const html = computed(() => marked.parse(inputText.value));
+</script>
+
+<style lang="scss">
+  .page-container {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    .input {
+      width: 49%;
+      height: 100%;
+      .el-textarea__inner {
+        height: 100% !important;
+      }
+    }
+    .marked {
+      width: 49%;
+      height: 100%;
+      padding: 0 20px;
+      border: 1px solid #{$text-color-placeholder};
+    }
+  }
+</style>

src/views/editor/richText/index.vue

@@ -9,17 +9,20 @@
   import wangeDitor from 'wangeditor';
   import i18next from 'i18next';
   import { useI18n } from '@/hooks/web/useI18n';
+  import ment from '@/styles/mycolor.module.scss';
 
+  console.log(ment.mainBgColor);
   const editorELRef = ref<HTMLElement>({} as HTMLElement);
   const editor = ref<wangeDitor>({} as wangeDitor);
   const html = ref<string>('');
   const { locale } = useI18n();
 
   function init() {
     editor.value = new wangeDitor(unref(editorELRef));
+    console.log(editor.value.config);
     editor.value.config.lang = locale.value === 'zh-ch' ? 'zh-ch' : 'en';
-    editor.value.i18next = i18next;
     editor.value.config.height = 500;
+    editor.value.i18next = i18next;
     Object.assign(editor.value.config, {
       onchange() {
         html.value = editor.value.txt.html() as string;

src/views/useradmin/userlist/index.vue

@@ -16,6 +16,8 @@
 
 <script setup lang="ts">
   import TsComponents from '@/components/tscomponents';
+  import packagepath from '../../../../package.json';
+  console.log(packagepath);
 
   // import SvgIcon from '@/components/SvgIcon/index.vue'
   // import { getCurrentInstance } from 'vue'

types/index.d.ts

@@ -6,3 +6,5 @@ declare interface Fn<T = any, R = T> {
 
 // vite-plugin-theme-preprocessor不支持ts,默认导出一个d.ts解决报错
 declare module '@zougt/*';
+
+declare module 'editor.md/*';