feat: add plop

mock/asyncRoutes.ts

@@ -421,6 +421,8 @@ const earlyWarningTaskRouter = {
   ]
 };
 
+//新增的加到这个下面--addRouter--
+
 export default defineFakeRoute([
   {
     url: "/get-async-routes",

package.json

@@ -19,7 +19,8 @@
     "lint:stylelint": "stylelint --cache --fix \"**/*.{html,vue,css,scss}\" --cache-location node_modules/.cache/stylelint/",
     "lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint",
     "prepare": "husky",
-    "preinstall": "npx only-allow pnpm"
+    "preinstall": "npx only-allow pnpm",
+    "plop": "plop --plopfile ./plop-templates/plopfile.cjs"
   },
   "keywords": [
     "vue-pure-admin",
@@ -146,6 +147,7 @@
     "gradient-string": "^3.0.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.5.0",
+    "plop": "^4.0.1",
     "postcss": "^8.5.3",
     "postcss-html": "^1.8.0",
     "postcss-load-config": "^6.0.1",

plop-templates/api.hbs

+// 示例 API 调用
+export const get{{properCase name}}Data = async () => {
+try {
+const response = await fetch('/api/{{lowerCase name}}');
+return await response.json();
+} catch (error) {
+console.error('Error fetching data:', error);
+}
+};
\ No newline at end of file

plop-templates/asyncRouter.hbs

+//{{lowerCase name}}模块
+const {{lowerCase name}}Router = {
+  path: "/{{lowerCase name}}",
+  meta: {
+    icon: "ri:user-voice-line",
+    title: "{{lowerCase name}}",
+    rank: "{{lowerCase name}}"
+  },
+  children: [
+    {
+      path: "/{{lowerCase name}}/index",
+      component: "{{lowerCase name}}/index",
+      name: "{{lowerCase name}}",
+      meta: {
+        icon: "ri:user-voice-line",
+        title: "{{lowerCase name}}",
+        roles: ["admin"]
+      }
+    }
+  ]
+};
\ No newline at end of file

plop-templates/plopfile.cjs

+// const path = require("path");
+
+module.exports = function (plop) {
+  plop.setGenerator("page", {
+    description: "生成 Vue 页面、路由和 API",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "请输入页面名称:",
+        validate: name => {
+          if (!name) {
+            return "页面名称不能为空";
+          }
+          return true;
+        }
+      },
+      {
+        type: "confirm",
+        name: "hasRoute",
+        message: "是否生成路由配置?",
+        default: true
+      },
+      {
+        type: "confirm",
+        name: "hasAsyncRoute",
+        message: "是否生成动态路由配置?",
+        default: true
+      },
+      {
+        type: "input",
+        name: "title",
+        message: "请输入路由title名称:",
+        validate: title => {
+          if (!title) {
+            return "路由title名称不能为空";
+          }
+          return true;
+        }
+      },
+      {
+        type: "confirm",
+        name: "hasApi",
+        message: "是否生成 API 调用?",
+        default: true
+      }
+    ],
+    actions: data => {
+      const actions = [];
+
+      // 生成页面
+      actions.push({
+        type: "add",
+        path: `../src/views/{{lowerCase name}}/index.vue`,
+        templateFile: "./view.hbs"
+      });
+
+      // 生成路由配置
+      if (data.hasRoute) {
+        actions.push({
+          type: "add",
+          path: `../src/router/modules/{{lowerCase name}}.ts`,
+          templateFile: "./route.hbs"
+        });
+      }
+
+      // 生成动态路由配置
+      if (data.hasAsyncRoute) {
+        actions.push({
+          type: "append",
+          path: `../mock/asyncRoutes.ts`,
+          pattern: "--addRouter--",
+          templateFile: "./asyncRouter.hbs"
+        });
+        actions.push({
+          type: "append",
+          path: `../mock/asyncRoutes.ts`,
+          pattern: "data: [",
+          template: "          {{lowerCase name}}Router,"
+        });
+      }
+
+      // 生成 API 调用
+      if (data.hasApi) {
+        actions.push({
+          type: "add",
+          path: `../src/api/{{lowerCase name}}.ts`,
+          templateFile: "./api.hbs"
+        });
+      }
+
+      return actions;
+    }
+  });
+};

plop-templates/route.hbs

+
+export default {
+  path: "/{{lowerCase name}}",
+  redirect: "/{{lowerCase name}}/index",
+  meta: {
+    icon: "ri/file-info-line",
+    title: "{{title}}"
+  },
+  children: [
+    {
+      path: "/{{lowerCase name}}/index",
+      name: "{{properCase name}}",
+      component: () => import("@/views/{{lowerCase name}}/index.vue"),
+      meta: {
+        title: "{{title}}"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
\ No newline at end of file

plop-templates/view.hbs

+<template>
+  <div class="{{kebabCase name}}">
+    <h2>{{pascalCase name}}</h2>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // 组件逻辑部分
+  import { ref } from 'vue';
+
+  const count = ref(0);
+
+  const increment = () => {
+    count.value++;
+  };
+</script>
+
+<style scoped lang="scss">
+  .{{kebabCase name}}
+    {
+    padding: 20px;
+    border: 1px solid #ccc;
+  }
+</style>
\ No newline at end of file

src/router/index.ts

@@ -46,6 +46,8 @@ const modules: Record<string, any> = import.meta.glob(
 /** 原始静态路由（未做任何处理） */
 const routes = [];
 
+console.log("🚀 ~ file: index.ts:42 ~ routes:", modules);
+
 Object.keys(modules).forEach(key => {
   routes.push(modules[key].default);
 });

src/router/modules/fighting.ts

+export default {
+  path: "/fighting",
+  redirect: "/fighting/index",
+  meta: {
+    icon: "ri/file-info-line",
+    title: "加油"
+  },
+  children: [
+    {
+      path: "/fighting/index",
+      name: "Fighting",
+      component: () => import("@/views/fighting/index.vue"),
+      meta: {
+        title: "加油"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;

src/views/fighting/index.vue

+<template>
+  <div class="fighting">
+    <h2>Fighting</h2>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 组件逻辑部分
+import { ref } from "vue";
+
+const count = ref(0);
+
+const increment = () => {
+  count.value++;
+};
+</script>
+
+<style scoped lang="scss">
+.fighting {
+  padding: 20px;
+  border: 1px solid #ccc;
+}
+</style>