From 0f8bb7fb67a95fb0846e15402ddadebda7925fea Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Wed, 19 Mar 2025 15:31:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20vite=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=EF=BC=8C=E5=AE=9E=E7=8E=B0=E5=A4=8D=E5=88=B6?=
 =?UTF-8?q?src=E4=B8=8B=E9=9D=A2=E7=9A=84md=E6=96=87=E4=BB=B6=E5=88=B0publ?=
 =?UTF-8?q?ic/md=E6=96=87=E4=BB=B6=E5=A4=B9=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/move-md-plugin.ts               | 47 +++++++++++++++++++++++
 build/plugins.ts                      |  3 ++
 public/md/css-module.md               | 55 +++++++++++++++++++++++++++
 public/md/prototype.md                |  1 +
 src/views/demo/prototype/index.vue    | 17 +++++++++
 src/views/demo/prototype/prototype.md |  1 +
 6 files changed, 124 insertions(+)
 create mode 100644 build/move-md-plugin.ts
 create mode 100644 public/md/css-module.md
 create mode 100644 public/md/prototype.md
 create mode 100644 src/views/demo/prototype/index.vue
 create mode 100644 src/views/demo/prototype/prototype.md

diff --git a/build/move-md-plugin.ts b/build/move-md-plugin.ts
new file mode 100644
index 0000000..1cff4d8
--- /dev/null
+++ b/build/move-md-plugin.ts
@@ -0,0 +1,47 @@
+import fs from 'fs';
+import path from 'path';
+const SRC_DIR = path.resolve(process.cwd(), 'src');
+const PUBLIC_MD_DIR = path.resolve(process.cwd(), 'public/md');
+
+const moveMarkdownFiles = (dir: string) => {
+    // 获取指定目录下的文件
+    const files = fs.readdirSync(dir);
+    // 遍历文件
+    files.forEach((file) => {
+        const filePath = path.join(dir, file);
+        const stat = fs.statSync(filePath);
+
+        if (stat.isDirectory()) {
+            // 如果是目录，递归调用
+            moveMarkdownFiles(filePath);
+        } else if (file.endsWith('.md')) {
+            // 如果是文件，且是.md文件，复制到public/md目录下
+            const distPath = path.join(PUBLIC_MD_DIR, path.basename(filePath));
+
+            // 检查目标文件是否存在
+            if (!fs.existsSync(distPath)) {
+                fs.copyFileSync(filePath, distPath);
+                console.log(`自定义vite插件，复制 ${filePath} 到 ${distPath}`);
+            }
+        }
+    });
+};
+
+export default function () {
+    // 确保public/md目标目录存在
+    if (!fs.existsSync(PUBLIC_MD_DIR)) {
+        fs.mkdirSync(PUBLIC_MD_DIR, { recursive: true });
+    }
+
+    return {
+        name: 'move-md-plugin',
+        // 开发服务器启动时执行
+        // configureServer: (server) => {
+        //     moveMarkdownFiles(SRC_DIR);
+        // },
+        // 打包时执行(开发模式下也会执行，所以不需要configureServer)
+        buildStart: () => {
+            moveMarkdownFiles(SRC_DIR);
+        },
+    };
+}
diff --git a/build/plugins.ts b/build/plugins.ts
index 2a089e1..7d2aa69 100644
--- a/build/plugins.ts
+++ b/build/plugins.ts
@@ -14,6 +14,7 @@ import removeConsole from 'vite-plugin-remove-console';
 import { themePreprocessorPlugin } from '@pureadmin/theme';
 import { genScssMultipleScopeVars } from '../src/layout/theme';
 import { vitePluginFakeServer } from 'vite-plugin-fake-server';
+import moveMdPlugin from './move-md-plugin';
 
 export function getPluginsList(VITE_CDN: boolean, VITE_COMPRESSION: ViteCompression): PluginOption[] {
     const lifecycle = process.env.npm_lifecycle_event;
@@ -53,5 +54,7 @@ export function getPluginsList(VITE_CDN: boolean, VITE_COMPRESSION: ViteCompress
         removeConsole({ external: ['src/assets/iconfont/iconfont.js'] }),
         // 打包分析
         lifecycle === 'report' ? visualizer({ open: true, brotliSize: true, filename: 'report.html' }) : (null as any),
+        // 移动src下的md文件到public/md目录
+        moveMdPlugin(),
     ];
 }
diff --git a/public/md/css-module.md b/public/md/css-module.md
new file mode 100644
index 0000000..aac5e5f
--- /dev/null
+++ b/public/md/css-module.md
@@ -0,0 +1,55 @@
+CSS Modules 是一种局部样式的解决方案，确保样式只作用于特定组件，而不会影响全局。这是通过以下机制和原理来实现的：
+
+### 1. 局部样式的概念
+
+CSS Modules 的设计目的是将 CSS 类名局部化，从而避免样式冲突。在使用 CSS Modules 时，类名会被自动生成唯一的标识符，以确保它们只在定义它们的组件中有效。
+
+### 2. 如何实现局部样式
+
+#### 生成唯一类名
+
+当您使用 CSS Modules 时，每个类名都会被编译成一个唯一的名称。例如，如果您在 `styles.module.css` 中定义了一个类 `.item`，在编译后，它可能会被转换为类似 `styles_item__1A2B3` 的名称。这样，其他组件中相同的类名不会产生冲突。
+
+#### 使用方式
+
+在 Vue 3 中使用 CSS Modules 时，您需要通过 `import` 语句导入 CSS Module 文件，并通过导入的对象引用样式。这确保了样式只与特定组件关联。
+
+```javascript
+import styles from './styles.module.css'; // 导入 CSS Module
+
+<div class={styles.item}>内容</div>  // 使用局部样式
+```
+
+### 3. 原理
+
+- **编译阶段**：在构建过程中，构建工具（如 Vite 或 Webpack）会处理 CSS Modules，将类名转换为唯一的标识符。这意味着即使在多个组件中使用相同的类名，最终生成的类名也会不同。
+- **作用域限制**：由于生成的类名是唯一的，因此它们只在相应的组件范围内有效，从而避免了全局样式的污染。
+
+### 4. 使用示例
+
+假设我们有一个样式文件 `styles.module.css`：
+
+```css
+/* styles.module.css */
+.item {
+  color: blue;
+}
+```
+
+在组件中使用：
+
+```javascript
+<template>
+  <div class={styles.item}>Hello, World!</div>
+</template>
+
+<script setup>
+import styles from './styles.module.css';
+</script>
+```
+
+在构建后，`.item` 类可能会被转换为 `.styles_item__3A1B2`，并且只在该组件中有效。
+
+### 总结
+
+CSS Modules 是局部样式的解决方案，通过生成唯一的类名来确保样式只在定义它们的组件中生效。这样可以避免全局样式冲突，保持样式的模块化和可维护性。
\ No newline at end of file
diff --git a/public/md/prototype.md b/public/md/prototype.md
new file mode 100644
index 0000000..ac4e321
--- /dev/null
+++ b/public/md/prototype.md
@@ -0,0 +1 @@
+## 测试
\ No newline at end of file
diff --git a/src/views/demo/prototype/index.vue b/src/views/demo/prototype/index.vue
new file mode 100644
index 0000000..b64b83f
--- /dev/null
+++ b/src/views/demo/prototype/index.vue
@@ -0,0 +1,17 @@
+<template>
+    <div
+        class="markdown-body"
+        v-html="htmlStr"
+    ></div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { marked } from 'marked';
+import { getMarkdownContent } from '@/utils/tools';
+
+const htmlStr = ref('');
+getMarkdownContent('./md/prototype.md').then((res) => {
+    htmlStr.value = marked(res);
+});
+</script>
diff --git a/src/views/demo/prototype/prototype.md b/src/views/demo/prototype/prototype.md
new file mode 100644
index 0000000..ac4e321
--- /dev/null
+++ b/src/views/demo/prototype/prototype.md
@@ -0,0 +1 @@
+## 测试
\ No newline at end of file