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

@@ -1,91 +1,89 @@
 *,
 ::before,
 ::after {
-  box-sizing: border-box;
+    box-sizing: border-box;
-  border-color: currentColor;
+    border-color: currentColor;
-  border-style: solid;
+    border-style: solid;
-  border-width: 0;
+    border-width: 0;
 }
 
 #app {
-  width: 100%;
+    width: 100%;
-  height: 100%;
+    height: 100%;
 }
 
 html {
-  box-sizing: border-box;
+    box-sizing: border-box;
-  width: 100%;
+    width: 100%;
-  height: 100%;
+    height: 100%;
-  line-height: 1.5;
+    line-height: 1.5;
-  tab-size: 4;
+    tab-size: 4;
-  text-size-adjust: 100%;
+    text-size-adjust: 100%;
 }
 
 body {
-  width: 100%;
+    width: 100%;
-  height: 100%;
+    height: 100%;
-  margin: 0;
+    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;
-  line-height: inherit;
+    -moz-osx-font-smoothing: grayscale;
-  -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
-  -webkit-font-smoothing: antialiased;
+    text-rendering: optimizelegibility;
-  text-rendering: optimizelegibility;
 }
 
 hr {
-  height: 0;
+    height: 0;
-  color: inherit;
+    color: inherit;
-  border-top-width: 1px;
+    border-top-width: 1px;
 }
 
 abbr:where([title]) {
-  text-decoration: underline dotted;
+    text-decoration: underline dotted;
 }
 
 a {
-  color: inherit;
+    color: inherit;
-  text-decoration: inherit;
+    text-decoration: inherit;
 }
 
 b,
 strong {
-  font-weight: bolder;
+    font-weight: bolder;
 }
 
 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;
-  font-size: 1em;
 }
 
 small {
-  font-size: 80%;
+    font-size: 80%;
 }
 
 sub,
 sup {
-  position: relative;
+    position: relative;
-  font-size: 75%;
+    font-size: 75%;
-  line-height: 0;
+    line-height: 0;
-  vertical-align: baseline;
+    vertical-align: baseline;
 }
 
 sub {
-  bottom: -0.25em;
+    bottom: -0.25em;
 }
 
 sup {
-  top: -0.5em;
+    top: -0.5em;
 }
 
 table {
-  text-indent: 0;
+    text-indent: 0;
-  border-collapse: collapse;
+    border-collapse: collapse;
-  border-color: inherit;
+    border-color: inherit;
 }
 
 button,
@@ -93,53 +91,53 @@ input,
 optgroup,
 select,
 textarea {
-  padding: 0;
+    padding: 0;
-  margin: 0;
+    margin: 0;
-  font-family: inherit;
+    font-family: inherit;
-  font-size: 100%;
+    font-size: 100%;
-  line-height: inherit;
+    line-height: inherit;
-  color: inherit;
+    color: inherit;
 }
 
 button,
 select {
-  text-transform: none;
+    text-transform: none;
 }
 
 button,
-[type="button"],
+[type='button'],
-[type="reset"],
+[type='reset'],
-[type="submit"] {
+[type='submit'] {
-  background-image: none;
+    background-image: none;
 }
 
 :-moz-focusring {
-  outline: auto;
+    outline: auto;
 }
 
 :-moz-ui-invalid {
-  box-shadow: none;
+    box-shadow: none;
 }
 
 progress {
-  vertical-align: baseline;
+    vertical-align: baseline;
 }
 
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
-  height: auto;
+    height: auto;
 }
 
-[type="search"] {
+[type='search'] {
-  outline-offset: -2px;
+    outline-offset: -2px;
 }
 
 ::-webkit-file-upload-button {
-  font: inherit;
+    font: inherit;
 }
 
 summary {
-  display: list-item;
+    display: list-item;
 }
 
 blockquote,
@@ -155,43 +153,43 @@ hr,
 figure,
 p,
 pre {
-  margin: 0;
+    margin: 0;
 }
 
 fieldset {
-  padding: 0;
+    padding: 0;
-  margin: 0;
+    margin: 0;
 }
 
 legend {
-  padding: 0;
+    padding: 0;
 }
 
 ol,
 ul,
 menu {
-  padding: 0;
+    padding: 0;
-  margin: 0;
+    margin: 0;
-  list-style: none;
+    list-style: none;
 }
 
 textarea {
-  resize: vertical;
+    resize: vertical;
 }
 
 input::placeholder,
 textarea::placeholder {
-  color: #9ca3af;
+    color: #9ca3af;
-  opacity: 1;
+    opacity: 1;
 }
 
 button,
-[role="button"] {
+[role='button'] {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 :disabled {
-  cursor: default;
+    cursor: default;
 }
 
 svg,
@@ -201,57 +199,74 @@ audio,
 iframe,
 embed,
 object {
-  display: block;
+    display: block;
 }
 
 img,
 video {
-  max-width: 100%;
+    max-width: 100%;
-  height: auto;
+    height: auto;
 }
 
 [hidden] {
-  display: none;
+    display: none;
 }
 
 .dark {
-  color-scheme: dark;
+    color-scheme: dark;
 }
 
 label {
-  font-weight: 700;
+    font-weight: 700;
 }
 
 *,
 *::before,
 *::after {
-  box-sizing: inherit;
+    box-sizing: inherit;
 }
 
 a:focus,
 a:active {
-  outline: none;
+    outline: none;
 }
 
 a,
 a:focus,
 a:hover {
-  color: inherit;
+    color: inherit;
-  text-decoration: none;
+    text-decoration: none;
-  cursor: pointer;
+    cursor: pointer;
 }
 
 div:focus {
-  outline: none;
+    outline: none;
 }
 
 .clearfix {
-  &::after {
+    &::after {
-    display: block;
+        display: block;
-    height: 0;
+        height: 0;
-    clear: both;
+        clear: both;
-    font-size: 0;
+        font-size: 0;
-    visibility: hidden;
+        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>