feat:<printerMate> add printerMate

Author: always-o-zq

.umirc.ts

@@ -1,22 +1,48 @@
 import { defineConfig } from "umi";
-// import GetDirectoryContentPlugin from "./plugins/getDirectoryContent"; // 确保路径正确
+import ScriptWebpackPlugin from "./buildScript/scriptWebpackPlugin";
 
 const path = require("path");
 
 export default defineConfig({
-  outputPath: "docs", // 默认为 'dist'，您可以根据需要更改此路径。
+  /**
+   * github pages 里选不到dist目录，就把这里的输出目录改掉
+   * */
+  outputPath: "docs",
   alias: {
     //   "@": process.cwd() + "/src", // 定义 @ 别名指向 src 目录
     "@": path.resolve(__dirname, "src"), // 定义 @ 别名指向 src 目录
     "@public": path.resolve(__dirname, "public"), // 定义 @ 别名指向 src 目录
-    // "@public": "./public",
   },
   routes: [
-    { path: "/", component: "index" },
-    { path: "/docs", component: "docs" },
+    // 错误的路由
+    { path: "/*", component: "@/pages/index" },
+    // 没有layout（layout里是空的）包裹的路由
+    {
+      path: "/",
+      component: "@/layouts/index",
+      routes: [
+        { path: "/", component: "index" },
+        { path: "/docs", component: "@/pages/docs" },
+      ],
+    },
+    {
+      path: "/printerMate",
+      component: "@/layouts/index",
+      routes: [
+        {
+          path: "/printerMate",
+          component: "@/pages/printerMate/privacyAgreement",
+        },
+        {
+          path: "/printerMate/userAgreement",
+          component: "@/pages/printerMate/userAgreement",
+        },
+      ],
+    },
+    // layout包裹的带菜单的路由
     {
       path: "/article",
-      component: "@/pages/article",
+      component: "@/layouts/menuLayout",
       routes: [
         { path: "/article/index", redirect: "/article/index" },
         {
@@ -26,19 +52,21 @@ export default defineConfig({
       ],
     },
   ],
-  // copy: [{ from: "src/docs", to: "dist/docs" }],
+  /**
+   *
+   * umi框架下public目录中的资源会直接复制到构建输出目录，所以这里不用再复制资源文件了
+   */
+  // copy: [{ from: "src/xx", to: "dist/xxx" }],
   npmClient: "pnpm",
-  // import componentsList from '@/componentsList';
-  // console.log(componentsList); // 打印出所有组件文件的路径
-  // chainWebpack(memo, { env }) {
-  //   memo.resolve.alias.set("@", path.resolve(__dirname, "src"));
-
-  //   memo.plugin("get-directory-content").use(GetDirectoryContentPlugin, [
-  //     {
-  //       rootDir: process.cwd(),
-  //       directory: "src/components",
-  //       output: "dist/componentsList.js", // 输出结果到哪里
-  //     },
-  //   ]);
-  // },
+  chainWebpack: (memo) => {
+    memo.plugin("mdFloderGeneratorPlugin").use(ScriptWebpackPlugin, [
+      // { scriptPath: "./buildScript/generateDocsConfig.js" },
+      {
+        scriptPath: path.resolve(
+          __dirname,
+          "buildScript/generateDocsConfig.js"
+        ),
+      },
+    ]);
+  },
 });

buildScript/generatePublicDirTree.js renamed to buildScript/generateDocsConfig.js

@@ -0,0 +1,14 @@
+class ScriptWebpackPlugin {
+  constructor(options) {
+    this.scriptPath = options.scriptPath;
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap("ScriptWebpackPlugin", (compilation) => {
+      const scriptContent = require(this.scriptPath); // 假设这是一个模块化的脚本
+      // 运行脚本逻辑...
+    });
+  }
+}
+
+module.exports = ScriptWebpackPlugin;

src/config/getDirectoryContent.js renamed to buildScript/old-getDirectoryContent.js

@@ -0,0 +1 @@
+# 测试文件

buildScript/scriptWebpackPlugin.js

@@ -0,0 +1,37 @@
+# 特殊选择器::v-deep
+
+::v-deep 是 Vue.js 中用于深度选择子组件内部元素的一个特殊选择器。在 Vue.js 的单文件组件（Single File Components, SFCs）中，样式通常是局部化的，这意味着它们只应用于当前组件。但有时，你可能需要为子组件中的元素应用样式，而这些子组件的样式作用域是封闭的，因此无法从父组件直接访问。
+::v-deep 允许你穿透这种封闭的作用域，直接为子组件内部的元素应用样式。这在某些情况下是非常有用的，比如当你需要覆盖第三方库或子组件的默认样式时。
+使用方法
+在 Vue.js 的 <style> 标签中使用 ::v-deep 选择器，可以穿透当前组件的作用域，并选中子组件内部的元素。例如：
+
+```
+<template>
+  <div>
+    <ChildComponent />
+  </div>
+</template>
+
+<script>
+import ChildComponent from './ChildComponent.vue';
+
+export default {
+  components: {
+    ChildComponent
+  }
+};
+</script>
+
+<style scoped>
+::v-deep .child-class {
+  color: red;
+}
+</style>
+```
+
+在上面的例子中，::v-deep .child-class 选择器将选中 ChildComponent 内部类名为 child-class 的元素，并为其应用红色字体样式。
+注意事项
+
+使用 ::v-deep 时要谨慎，因为它会破坏组件的封装性。过度使用可能会导致样式难以管理和维护。
+::v-deep 是 Vue 3 中的新语法。在 Vue 2 中，你可以使用 >>> 或 /deep/ 来实现类似的功能。但请注意，这些老版本的语法在某些预处理器（如 Sass、Less）中可能无法正常工作。
+尽可能优先考虑通过组件的 props 和 events 来实现组件间的通信和样式定制，而不是直接使用 ::v-deep。这样更符合 Vue 的组件化设计原则。

docs/403.async.js

@@ -8,6 +8,11 @@ module.exports = [
         "key": "docs/business/profit_review.md",
         "label": "《盈利》作业",
         "type": "file"
+      },
+      {
+        "key": "docs/business/test.md",
+        "label": "测试文件",
+        "type": "file"
       }
     ]
   },
@@ -39,6 +44,18 @@ module.exports = [
         "label": "web",
         "type": "directory",
         "children": [
+          {
+            "key": "docs/develop/web/VUE",
+            "label": "VUE",
+            "type": "directory",
+            "children": [
+              {
+                "key": "docs/develop/web/VUE/::-v-deep.md",
+                "label": "特殊选择器::v-deep",
+                "type": "file"
+              }
+            ]
+          },
           {
             "key": "docs/develop/web/react_markdown.md",
             "label": "在react中解析markdown文件",