feat: 解析md显示，js模块化

package.json

@@ -34,6 +34,7 @@
         "element-plus": "^2.8.0",
         "js-cookie": "^3.0.5",
         "localforage": "^1.10.0",
+        "marked": "^15.0.7",
         "mitt": "^3.0.1",
         "nprogress": "^0.2.0",
         "path": "^0.12.7",

pnpm-lock.yaml

@@ -47,6 +47,9 @@ importers:
       localforage:
         specifier: ^1.10.0
         version: 1.10.0
+      marked:
+        specifier: ^15.0.7
+        version: 15.0.7
       mitt:
         specifier: ^3.0.1
         version: 3.0.1
@@ -2206,6 +2209,11 @@ packages:
   magic-string@0.30.11:
     resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
 
+  marked@15.0.7:
+    resolution: {integrity: sha512-dgLIeKGLx5FwziAnsk4ONoGwHwGPJzselimvlVskE9XLN4Orv9u2VA3GWw/lYUqjfA0rUT/6fqKwfZJapP9BEg==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   mathml-tag-names@2.1.3:
     resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
 
@@ -5693,6 +5701,8 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  marked@15.0.7: {}
+
   mathml-tag-names@2.1.3: {}
 
   mdn-data@2.0.14: {}

public/summer.md

@@ -0,0 +1,36 @@
+CommonJS、AMD、CMD 和 ESM（ES6 Modules）是 JavaScript 中的不同模块化规范。它们之间有一定的关系和区别，以下是对它们的概述及相互关系的说明：
+
+### CommonJS
+- **定义**：主要用于服务器端的模块化，广泛应用于 Node.js。
+- **特点**：
+  - **同步加载**：模块是同步加载，适合服务器环境。
+  - **导入导出**：使用 `require()` 导入模块，使用 `module.exports` 导出模块。
+
+### AMD (Asynchronous Module Definition)
+- **定义**：主要用于浏览器端的模块化，支持异步加载。
+- **特点**：
+  - **异步加载**：模块可以异步加载，适合在浏览器中使用。
+  - **导入导出**：使用 `define()` 定义模块，使用 `require()` 加载模块。
+
+### CMD (Common Module Definition)
+- **定义**：对 AMD 的一种改进，主要由 SeaJS 提出。
+- **特点**：
+  - **按需加载**：支持动态依赖，模块可以在需要时才加载。
+  - **导入导出**：使用 `define()` 定义模块，依赖在使用时声明。
+
+### ESM (ECMAScript Modules)
+- **定义**：ES6 引入的模块化标准，现已成为 JavaScript 的官方模块系统。
+- **特点**：
+  - **静态解析**：在编译时解析模块依赖，支持树摇优化。
+  - **导入导出**：使用 `import` 导入模块，使用 `export` 导出模块。
+  - **异步加载**：通过 `<script type="module">` 标签支持异步加载。
+
+### 关系总结
+- **相似性**：所有这些规范的目的都是实现模块化，促进代码的组织和复用。
+- **差异性**：
+  - **加载方式**：CommonJS 是同步加载，AMD 和 CMD 支持异步加载，而 ESM 也支持异步加载且具有静态结构。
+  - **使用场景**：CommonJS 主要在服务器端，AMD 和 CMD 主要用于浏览器端，ESM 在浏览器和 Node.js 中都得到支持。
+- **发展顺序**：CommonJS 和 AMD 是较早的模块化方案，而 ESM 是现代 JavaScript 的标准模块化方式，逐渐取代了前者。
+
+### 结论
+在现代 JavaScript 开发中，ESM 是推荐的标准，能够提供更好的性能和兼容性。CommonJS、AMD 和 CMD 主要在旧项目和特定场景中被使用。

src/layout/components/lay-content/index.vue

@@ -189,5 +189,6 @@ const transitionMain = defineComponent({
 
 .main-content {
     margin: 0;
+    background: #fff;
 }
 </style>

src/router/modules/demo.ts

@@ -56,6 +56,10 @@ const titleArr = [
         key: 'cookie',
         title: '相同顶级域名不同子域名共享cookie',
     },
+    {
+        key: 'module',
+        title: 'CommonJS AMD CMD ESM总结',
+    },
 ];
 
 // @/views/demo/**/*.vue

src/style/reset.scss

@@ -25,8 +25,7 @@ body {
     width: 100%;
     height: 100%;
     margin: 0;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
     line-height: inherit;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
@@ -57,8 +56,7 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-    "Liberation Mono", "Courier New", monospace;
     font-size: 1em;
 }
 
@@ -107,9 +105,9 @@ select {
 }
 
 button,
-[type="button"],
+[type='button'],
-[type="reset"],
+[type='reset'],
-[type="submit"] {
+[type='submit'] {
     background-image: none;
 }
 
@@ -130,7 +128,7 @@ progress {
     height: auto;
 }
 
-[type="search"] {
+[type='search'] {
     outline-offset: -2px;
 }
 
@@ -186,7 +184,7 @@ textarea::placeholder {
 }
 
 button,
-[role="button"] {
+[role='button'] {
     cursor: pointer;
 }
 
@@ -252,6 +250,23 @@ div:focus {
         clear: both;
         font-size: 0;
         visibility: hidden;
-    content: " ";
+        content: ' ';
+    }
+}
+
+// markdown 解析格式美化
+.md-main {
+    p,
+    ul,
+    ol {
+        margin: 16px 0;
+    }
+    h3 {
+        margin: 18px 0;
+    }
+    ul,
+    ol {
+        padding-left: 40px;
+        list-style: disc;
     }
 }

src/views/demo/module/index.vue

@@ -0,0 +1,24 @@
+<template>
+    <el-card>
+        <img src="./img/1.png" />
+        <div
+            class="md-main"
+            v-html="htmlStr"
+        ></div>
+    </el-card>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { marked } from 'marked';
+
+const htmlStr = ref('');
+
+fetch('./summer.md', {
+    method: 'GET',
+}).then((result) => {
+    result.text().then((res) => {
+        htmlStr.value = marked(res);
+    });
+});
+</script>