@slice_cy/mint 1.2.0

package/app/common/error-code.js

@@ -0,0 +1,22 @@
+module.exports = {
+  SUCCESS: {
+    code: 0,
+    message: "成功",
+  },
+  NOT_FOUND: {
+    code: 40400,
+    message: "资源不存在",
+  },
+  SYSTEM_ERROR: {
+    code: 50000,
+    message: "系统异常，请联系管理员",
+  },
+  PARAMS_VALIDATE_ERROR: {
+    code: 40000,
+    message: "参数校验失败",
+  },
+  SIGNATURE_ERROR: {
+    code: 44500,
+    message: "签名错误",
+  },
+};

package/app/common/return-utils.js

@@ -0,0 +1,40 @@
+const BaseResponse = require("./base-response");
+const BusinessError = require("./business-error");
+const ERROR_CODE = require("./error-code");
+
+const success = (data = {}, metaData = {}) => {
+  return new BaseResponse({
+    code: ERROR_CODE.SUCCESS.code,
+    message: ERROR_CODE.SUCCESS.message,
+    data,
+    metaData,
+  });
+};
+
+const error = (code, message, data = null) => {
+  return new BaseResponse({
+    code,
+    message,
+    data,
+  });
+};
+
+const businessError = (businessCode, options = {}) => {
+  const { code, message } = businessCode;
+  const { data = null, message: customMessage } = options;
+
+  return error(code, customMessage || message, data);
+};
+
+const throwIf = (bool, businessCode, message) => {
+  if (bool) {
+    throw new BusinessError(businessCode.code, message || businessCode.message);
+  }
+};
+
+module.exports = {
+  success,
+  error,
+  businessError,
+  throwIf,
+};

package/app/common/router-schema-validator.js

@@ -0,0 +1,25 @@
+const ERROR_CODE = require("./error-code");
+const { throwIf } = require("./return-utils");
+
+const formatZodIssues = (issues) => {
+  return (issues || [])
+    .map((issue) => {
+      const fieldPath = issue.path?.length ? issue.path.join(".") : "value";
+      return `${fieldPath}: ${issue.message}`;
+    })
+    .join("; ");
+};
+
+const validate = (schema, data) => {
+  const result = schema.safeParse(data);
+  throwIf(
+    !result.success,
+    ERROR_CODE.PARAMS_VALIDATE_ERROR,
+    formatZodIssues(result?.error?.issues),
+  );
+  return result.data;
+};
+
+module.exports = {
+  validate,
+};

package/app/controller/base.js

@@ -0,0 +1,24 @@
+module.exports = (app) => {
+  /**
+   * controller基类
+   * 统一收拢controller的通用方法
+   */
+  return class BaseController {
+    constructor() {
+      this.routerSchema = app.routerSchema;
+    }
+    /**
+     * API处理成功时统一返回结构
+     * @param {object} ctx 上下文
+     * @param {object} data 响应数据
+     */
+    success(ctx, data = {}, metaData = {}) {
+      ctx.status = 200;
+      ctx.body = app.returnUtils.success(data, metaData);
+    }
+
+    validateParams(schema, data) {
+      return app.paramsValid.validate(schema, data);
+    }
+  };
+};

package/app/controller/project.js

@@ -0,0 +1,90 @@
+module.exports = (app) => {
+  const BaseController = require("./base")(app);
+  return class ProjectController extends BaseController {
+    /**
+     * 获取模型列表
+     * @returns
+     */
+    async getModelList(ctx) {
+      const { project: ProjectService } = app.service;
+      const result = await ProjectService.getModelList();
+      const modelList = result.reduce((pre, cur) => {
+        const { model, project } = cur;
+        const { key, name, desc } = model;
+        const item = {
+          key,
+          name,
+          desc,
+        };
+        item.project = Object.keys(project).reduce((preProj, proj) => {
+          const { name, desc, homePage, icon, key } = project[proj];
+          return {
+            ...preProj,
+            [proj]: {
+              name,
+              desc,
+              homePage,
+              icon,
+              key,
+            },
+          };
+        }, {});
+        return [...pre, item];
+      }, []);
+      return this.success(ctx, modelList);
+    }
+
+    /**
+     * 获取项目列表
+     * @param {string} project_key
+     */
+    async getProjectList(ctx) {
+      const { project: ProjectService } = app.service;
+      // 参数校验
+      const params = this.validateParams(
+        this.routerSchema.projectListQueryDTO.get,
+        ctx.request.query,
+      );
+      // 调用服务
+      const projectList = await ProjectService.getProjectList(params.project_key);
+
+      const projectListVo = projectList.map((i) => {
+        const { icon, homePage, name, desc, key, modelKey } = i;
+        return {
+          icon,
+          homePage,
+          name,
+          desc,
+          key,
+          modelKey,
+        };
+      });
+
+      // 返回数据
+      return this.success(ctx, projectListVo);
+    }
+
+    /**
+     * 获取项目详情
+     * @param {string} project_key
+     */
+    async getProject(ctx) {
+      const { project: ProjectService } = app.service;
+      // 参数校验
+      const params = this.validateParams(this.routerSchema.projectQueryDTO.get, ctx.request.query);
+      // 调用服务
+      const projectInfo = await ProjectService.getProject(params.project_key);
+      const { desc, key, modelKey, name, icon, homePage, menu } = projectInfo;
+      const projectVo = {
+        desc,
+        key,
+        modelKey,
+        name,
+        icon,
+        homePage,
+        menu,
+      };
+      return this.success(ctx, projectVo);
+    }
+  };
+};

package/app/controller/view.js

@@ -0,0 +1,13 @@
+module.exports = (app) => {
+  return class ViewController {
+    /**
+     * 返回模版页面
+     * @param {object} ctx 上下文
+     */
+    async render(ctx) {
+      await ctx.render(`dist/entry.${ctx.params.page}`, {
+        project_key: ctx.request.query.project_key,
+      });
+    }
+  };
+};

package/app/docs/dsl-doc.js

@@ -0,0 +1,148 @@
+/**
+ * 个人对DSL的理解
+ * visible字段的必要性：对于通用的模块，比如user，大概率会在领域模型中定义，项目模型继承领域模型定义的用户模块的schema。
+ * 但是项目模型对于同业务模块下的字段显示隐藏的需求也许会不一致，因此visible可以作为一个渲染的子开关由项目模型自行覆盖，是有必要定义的
+ * 整份DSL的设计：
+ * 1. 由数据驱动菜单，菜单驱动业务板块
+ * 2. 业务板块核心的本质都是处理数据源，因此要从数据维度出发可以得出：obj的value的顶层是对数据的本质描述(约束)，
+ *    拓展其他xxxOption作为一个数据字段在任意场景中的描述，从而得出schema的设计
+ * 3. 业务板块的数据来源，通过api字段定义好一个业务模块的前缀实现
+ * 4. 业务板块的UI渲染展示，就可以从页面子版块维度出发，分为search，table 以及 component动态组件
+ * 总结：要从站点维度，业务板块维度以及单个板块的操作板块维度，数据维度进行分析
+ */
+
+/**
+ * 领域模型开发过程中的反思：
+ * 组件封装思路：核心考虑接受的参数，暴露的api、抛出什么事件
+ * 开发前端功能时，要考虑对后端资源的合理利用，避免滥用
+ * 通用组件的封装尽量保持纯粹性，如果要与业务强相关需要新增一层组件桥梁进行数据转发通信
+ * 目录规范，组件引入规范，模版编写规范
+ * 对复合数据需要考虑纯粹性和去噪音提取
+ * 组件需要拿到众多子组件的数据时，要考虑load问题
+ * 核心重复使用的方法要落地到pina等共享状态管理中
+ * 熟悉了递归的思路写法
+ * 尽可能使用reduce / Object + reduce实现数据高内聚低耦合的写法，避免数据处理散乱在多行中
+ * 从安全性考虑，SSR注入，数据隔离的思想
+ */
+
+/**
+ * 动态组件的思路：
+ * 业务板块下，无论在哪里交互触发，最终抛出的事件都会直达schema版块，由schema版块进行事件处理，完成调度各种动态组件实现各种联动拓展
+ * 动态组件处理好抛出事件，再由schema板块进行分发到具体的子组件行为
+ */
+module.exports = {
+  model: "", // 不同DSL模版标识，用于匹配对应页面渲染模版
+  name: "", // 站点标题
+  desc: "", // 站点描述
+  icon: "", // 站点图标
+  homePage: "", // 站点首页
+  // 菜单数组，承载分组/功能模块菜单
+  menu: [
+    {
+      key: "", // 菜单唯一标识，全局不可重复
+      name: "", // 当前菜单展示名称
+      menuType: "", // 菜单类型枚举：group(分组菜单) | module(功能模块菜单)
+      moduleType: "", // 模块渲染类型枚举：custom(自定义页面) | schema(标准CRUD页面) | iframe(内嵌页面) | sider(侧边子菜单容器)
+      subMenu: [], // 如果menuType === group时必填；分组下嵌套子菜单数组，结构同当前menu
+      // menuType === module && moduleType === custom 时必传
+      customConfig: {
+        path: "", // 自定义页面前端路由地址
+      },
+      // menuType === module && moduleType === iframe 时必传
+      iframeConfig: {
+        path: "", // iframe跳转外部页面完整URL地址
+      },
+      // menuType === module && moduleType === sider 时必传
+      siderConfig: {
+        menu: [], // 侧边栏子菜单数组，结构同外层menu单项；子菜单禁止再次配置moduleType: sider
+      },
+      // menuType === module && moduleType === schema 时必传
+      schemeConfig: {
+        /**
+         * 遵循RESTful API规范，接口约定：
+         * 【GET】 /xxx/list 列表查询
+         * 【GET】 /xxx/:id 单条详情
+         * 【POST】 /xxx 新增数据
+         * 【PUT】 /xxx/:id 编辑修改
+         * 【DELETE】 /xxx/:id 删除数据
+         */
+        api: "", // CRUD接口基础路由前缀
+        // 表单/表格/搜索通用数据字段描述schema
+        schema: {
+          type: "object",
+          properties: {
+            ["key"]: {
+              type: "", // 字段类型
+              label: "", // 字段名称
+              // ...标准schema配置
+
+              // 字段在表格中的表现，不配置tableOption代表字段不在表格中渲染
+              tableOption: {
+                uiTableColumnConfig: {}, // ui组件的表格列props配置
+                visible: true, // 字段是否在表格中渲染显示；仅显式配置false时隐藏（定义该开关的意义是考虑到DSL继承覆盖的问题）
+                toFixed: 2, // 数字字段小数保留位数，仅数字类型生效
+              },
+              // 搜索栏表单配置，缺失该节点则此字段不渲染到搜索区
+              searchOption: {
+                uiComponentConfig: {}, // 表单控件配置
+                comType: "", // 搜索组件类型枚举：input | select | dynamicSelect | dateRangePicker
+                enumList: [], // 如果comType === select时，需要传enumList
+                visible: true, // 字段是否在表格中渲染显示；仅显式配置false时隐藏（定义该开关的意义是考虑到DSL集成覆盖的问题）
+                default: "", // 默认值
+                api: "", // comType === dynamicSelect时必填，下拉选项数据请求接口
+              },
+              "[comName]Option": {
+                uiComponentConfig: {}, // 表单控件配置
+                comType: "", // 搜索组件类型枚举：input | select | dynamicSelect | dateRangePicker
+                enumList: [], // 如果comType === select时，需要传enumList
+                visible: true, // 字段是否在表格中渲染显示；仅显式配置false时隐藏（定义该开关的意义是考虑到DSL集成覆盖的问题）
+                default: "", // 默认值
+                disabled: true, // 是否禁用
+                api: "", // comType === dynamicSelect时必填，下拉选项数据请求接口
+              },
+              ...{}, // schema扩展自定义字段属性，按需拓展
+            },
+            ...{},
+          },
+          required: [], // 会注入到多option中： required： true/false
+        },
+        // 表格区域整体UI渲染配置
+        tableConfig: {
+          headerButtons: [
+            // 表格顶部操作按钮组
+            {
+              label: "", // 按钮展示文字
+              eventKey: "", // 按钮绑定事件唯一标识，前端匹配对应事件逻辑
+              eventOption: {
+                // 当eventKey === remove时，必传
+                params: {
+                  paramsKey: "固定值 | schema::[tableKey]", // 参数取值规则，固定格式schema::字段名，代表取当前行schema字段值
+                },
+                // 当eventKey === showComponent时，需要传
+                comName: "",
+              },
+              uiButtonConfig: {}, // 透传Button组件属性
+            },
+            ...{},
+          ],
+          rowButtons: [
+            // 表格每行右侧操作按钮组
+            {
+              label: "", // 按钮展示文字
+              eventKey: "", // 按钮绑定事件唯一标识
+              eventOption: {}, // 行按钮事件参数配置，格式同headerButtons.eventOption
+              uiButtonConfig: {}, // 透传Button组件属性
+            },
+            ...{},
+          ],
+        },
+        searchConfig: {}, // 搜索栏全局拓展配置，可自定义搜索按钮、布局、默认查询参数等
+        componentConfig: {
+          ["comName"]: {
+            // 组件的配置项,支持用户自定义拓展
+          },
+        }, // 动态组件配置
+      },
+    },
+  ],
+};

package/app/extend/logger.js

@@ -0,0 +1,30 @@
+const log4js = require("log4js");
+module.exports = (app) => {
+  let logger;
+  const { isDevelopment } = app.$env;
+  if (isDevelopment()) {
+    logger = console;
+  } else {
+    log4js.configure({
+      appenders: {
+        console: {
+          type: "console",
+        },
+        dateFile: {
+          type: "dateFile",
+          filename: "logs/application.log",
+          pattern: ".yyyy-MM-dd",
+          alwaysIncludePattern: true,
+        },
+      },
+      categories: {
+        default: {
+          appenders: ["console", "dateFile"],
+          level: "info",
+        },
+      },
+    });
+    logger = log4js.getLogger();
+  }
+  return logger;
+};

package/app/extend/params-valid.js

@@ -0,0 +1,6 @@
+const { validate } = require("../common/router-schema-validator");
+module.exports = (app) => {
+  return {
+    validate,
+  };
+};

package/app/extend/return-utils.js

@@ -0,0 +1,9 @@
+const { success, error, businessError, throwIf } = require("../common/return-utils");
+module.exports = (app) => {
+  return {
+    success,
+    error,
+    businessError,
+    throwIf,
+  };
+};

package/app/middleware/api-sign-verify.js

@@ -0,0 +1,25 @@
+const md5 = require("md5");
+const ERROR_CODE = require("../common/error-code");
+
+const API_EXPIRE = 1000 * 60 * 5;
+
+module.exports = (app) => {
+  return async (ctx, next) => {
+    const { method, path } = ctx;
+    // 只对api请求做验签
+    if (!/^\/api/g.test(ctx.path)) {
+      return await next();
+    }
+
+    const { s_sign: sSign, s_t: st } = ctx.request.headers;
+    const signKey = "mint";
+    const signature = md5(`${signKey}_${st}`);
+    app.logger.info(`[${method}]${path} ${signature}`);
+    if (!sSign || !st || signature !== sSign || Date.now() - st > API_EXPIRE) {
+      ctx.status = 200;
+      ctx.body = app.returnUtils.businessError(ERROR_CODE.SIGNATURE_ERROR);
+      return;
+    }
+    await next();
+  };
+};

package/app/middleware/err-handler.js

@@ -0,0 +1,18 @@
+const BusinessError = require("../common/business-error");
+const ERROR_CODE = require("../common/error-code");
+
+module.exports = (app) => {
+  return async (ctx, next) => {
+    try {
+      await next();
+    } catch (err) {
+      console.log("-----------err-----------", err);
+      app.logger.error(err.message);
+      ctx.status = 200;
+      ctx.body =
+        err instanceof BusinessError
+          ? app.returnUtils.error(err.code, err.message)
+          : app.returnUtils.businessError(ERROR_CODE.SYSTEM_ERROR);
+    }
+  };
+};

package/app/middleware/project-handler.js

@@ -0,0 +1,25 @@
+const { SYSTEM_ERROR } = require("../common/error-code");
+/**
+ * 项目维度的中间件
+ * @param {*} app
+ * @returns
+ */
+module.exports = (app) => {
+  return async function (ctx, next) {
+    // 只对api请求做验签
+    if (!/^\/api\/proj\//i.test(ctx.url)) {
+      await next();
+      return;
+    }
+
+    const { project_key } = ctx.request.headers;
+    if (!project_key) {
+      ctx.status = 200;
+      ctx.body = app.returnUtils.businessError(SYSTEM_ERROR, { message: "获取项目异常" });
+      return;
+    }
+    ctx.projectKey = project_key;
+
+    await next();
+  };
+};

package/app/pages/boot.js

@@ -0,0 +1,34 @@
+import { createApp } from "vue";
+import { createRouter, createWebHistory } from "vue-router";
+import store from "$mintStore/index";
+import "ant-design-vue/dist/reset.css";
+
+/**
+ * 启动器
+ * @param {*} App 根组件
+ * @param {object} options 配置项
+ * @param {array} options.routes 路由配置项
+ * @param {function(app)} callback 可通用callback的vue实例app自行挂载
+ */
+export default (App, options = {}, callback) => {
+  const { routes = [] } = options;
+  const app = createApp(App);
+  // 挂载store
+  app.use(store);
+  // 对外提供自定义挂载拓展
+  callback && callback(app);
+  // 挂载路由
+  if (routes && routes.length) {
+    const router = createRouter({
+      history: createWebHistory(),
+      routes,
+    });
+    app.use(router);
+    router.isReady().then(() => {
+      // 挂载完成
+      app.mount("#app");
+    });
+  } else {
+    app.mount("#app");
+  }
+};

package/app/pages/dashboard/complex-view/header-view/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <header-container v-bind="$props">
+    <template #menu-content>
+      <a-menu
+        v-model:selected-keys="avtiveKey"
+        mode="horizontal"
+        :items="menuList"
+        @click="onMenuSelect"
+      />
+    </template>
+    <template #setting-content>
+      <a-dropdown>
+        <a
+          class="ant-dropdown-link"
+          @click.prevent
+        >
+          切换项目
+          <DownOutlined />
+        </a>
+        <template #overlay>
+          <a-menu
+            :items="proejectOption"
+            @click="handleProjectSelect"
+          ></a-menu>
+        </template>
+      </a-dropdown>
+    </template>
+    <template #main-content>
+      <slot name="main-content"></slot>
+    </template>
+  </header-container>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, watch } from "vue";
+import { useRoute } from "vue-router";
+import HeaderContainer from "$mintWidgets/header-container/index.vue";
+import { useProjectStore } from "$mintStore/project";
+import { useMenuStore } from "$mintStore/menu";
+
+const emit = defineEmits(["menu-select"]);
+
+const route = useRoute();
+
+const projectStore = useProjectStore();
+const menuStore = useMenuStore();
+
+const menuList = ref([]);
+
+const proejectOption = computed(() => {
+  return projectStore.projectList.map((i) => ({
+    key: i.key,
+    label: i.name,
+    disabled: i.key === route.query.project_key,
+  }));
+});
+
+const avtiveKey = ref([]);
+const setActiveKey = () => {
+  const key = route.query.key;
+  if (!key) {
+    return;
+  }
+  const item = menuStore.findMenuItem({
+    key: "key",
+    value: route.query.key,
+  });
+
+  avtiveKey.value = item?.key ? [item.key] : [];
+};
+
+const setMenuList = () => {
+  menuList.value = menuStore.transfomMenuList();
+};
+
+watch(
+  [() => menuStore.menuList, () => route.query.key],
+  () => {
+    setActiveKey();
+    setMenuList();
+  },
+  { deep: true },
+);
+
+const onMenuSelect = ({ key }) => {
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: key,
+  });
+  if (menuItem) {
+    emit("menu-select", menuItem);
+  }
+};
+
+const handleProjectSelect = ({ key }) => {
+  const project = projectStore.projectList.find((i) => i.key === key);
+  if (project && project.homePage) {
+    window.location.replace(`${location.origin}/view/dashboard${project.homePage}`);
+  }
+};
+
+onMounted(() => {
+  setActiveKey();
+  setMenuList();
+});
+</script>
+
+<style lang="less" scoped></style>

package/app/pages/dashboard/complex-view/iframe-view/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <iframe
+    width="100%"
+    height="100%"
+    :src="path"
+  ></iframe>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from "vue";
+import { useMenuStore } from "$mintStore/menu";
+import { useRoute } from "vue-router";
+const route = useRoute();
+const menuStore = useMenuStore();
+
+const path = ref("");
+const setPath = () => {
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: route.query.sider_key || route.query.key,
+  });
+  if (!menuItem) return;
+  path.value = menuItem?.iframeConfig?.path ?? "";
+};
+
+watch(
+  [() => route.query.key, () => route.query.sider_key, () => menuStore.menuList],
+  () => {
+    setPath();
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  setPath();
+});
+</script>