@slice_cy/mint 1.2.0

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

@@ -0,0 +1,116 @@
+<template>
+  <sider-container>
+    <template #sider-content>
+      <a-menu
+        v-model:selected-keys="activeKey"
+        mode="vertical"
+        :items="menuList"
+        @click="onMenuSelect"
+      />
+    </template>
+    <template #main-content>
+      <router-view />
+    </template>
+  </sider-container>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from "vue";
+import SiderContainer from "$mintWidgets/sider-container/index.vue";
+import { useRoute, useRouter } from "vue-router";
+import { useMenuStore } from "$mintStore/menu";
+
+const route = useRoute();
+const router = useRouter();
+const menuStore = useMenuStore();
+
+const activeKey = ref("");
+const menuList = ref([]);
+
+watch(
+  [() => menuStore.menuList, () => route.query.key],
+  () => {
+    setMenuList();
+    setActiveKey();
+  },
+  { deep: true },
+);
+
+const setMenuList = () => {
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: route.query.key,
+  });
+
+  if (!menuItem) return;
+
+  if (menuItem?.siderConfig?.menu) {
+    menuList.value = menuStore.transfomMenuList(menuItem.siderConfig.menu);
+  }
+};
+
+const onMenuSelect = ({ item }) => {
+  handleMenuSelect(item.originItemValue);
+};
+
+const handleMenuSelect = (menuItem) => {
+  if (route.query.sider_key === menuItem.key) return;
+  const { key, moduleType, customConfig } = menuItem;
+  const pathMap = {
+    sider: "/sider",
+    schema: "/schema",
+    custom: customConfig?.path,
+    iframe: "/iframe",
+  };
+
+  router.push({
+    path: `/view/dashboard/sider${pathMap[moduleType]}`,
+    query: {
+      project_key: route.query.project_key,
+      key: route.query.key,
+      sider_key: key,
+    },
+  });
+};
+
+const setActiveKey = () => {
+  // 获取顶层子菜单
+  const topMenu = menuStore.findMenuItem({
+    key: "key",
+    value: route.query.key,
+  });
+  if (!topMenu) return;
+
+  if (!topMenu?.siderConfig?.menu) return;
+  // 获取sider侧边栏菜单
+  const siderMenuList = topMenu.siderConfig.menu;
+  // 获取到就直接设置
+  const siderMenuItem = menuStore.findMenuItem(
+    {
+      key: "key",
+      value: route.query.sider_key,
+    },
+    siderMenuList,
+  );
+  if (siderMenuItem) {
+    activeKey.value = siderMenuItem?.key ? [siderMenuItem.key] : [];
+    return;
+  }
+  // 获取不到就取第一项（考虑嵌套情况，递归）
+  const firstMenuItem = menuStore.findFirstMenuItem(siderMenuList);
+  activeKey.value = firstMenuItem?.key ? [firstMenuItem.key] : [];
+  // 兼容url没带sider_key，然后菜单自动高亮了第一项，也需要自动跳转到第一项的路由页面
+  handleMenuSelect(firstMenuItem);
+};
+
+onMounted(() => {
+  setMenuList();
+  setActiveKey();
+});
+</script>
+
+<style lang="less" scoped>
+.sider-view {
+  height: 100%;
+}
+</style>

package/app/pages/dashboard/entry.dashboard.js

@@ -0,0 +1,44 @@
+import App from "./index";
+import boot from "../boot";
+// import businessDashboardRouterConfig from "$businessDashboardRouterConfig";
+
+const siderRoutes = [
+  {
+    path: "iframe",
+    component: () => import("$mintPage/dashboard/complex-view/iframe-view/index.vue"),
+  },
+  {
+    path: "schema",
+    component: () => import("$mintPage/dashboard/complex-view/schema-view/index.vue"),
+  },
+];
+
+const routes = [
+  // 头部菜单路由
+  {
+    path: "/view/dashboard/iframe",
+    component: () => import("$mintPage/dashboard/complex-view/iframe-view/index.vue"),
+  },
+  {
+    path: "/view/dashboard/schema",
+    component: () => import("$mintPage/dashboard/complex-view/schema-view/index.vue"),
+  },
+
+  // 侧边栏菜单
+  {
+    path: "/view/dashboard/sider",
+    component: () => import("$mintPage/dashboard/complex-view/sider-view/index.vue"),
+    children: siderRoutes,
+  },
+  // 侧边栏兜底
+  {
+    path: "/view/dashboard/sider/:chapter",
+    component: () => import("$mintPage/dashboard/complex-view/sider-view/index.vue"),
+  },
+];
+
+// if (typeof businessDashboardRouterConfig === "function") {
+//   businessDashboardRouterConfig({ routes, siderRoutes });
+// }
+
+boot(App, { routes });

package/app/pages/dashboard/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <header-view
+    :project-name="projectName"
+    username="管理员"
+    @menu-select="onMenuSelect"
+  >
+    <template #main-content>
+      <router-view />
+    </template>
+  </header-view>
+</template>
+
+<script setup>
+import HeaderView from "$mintPage/dashboard/complex-view/header-view/index.vue";
+import { onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { httpGet } from "$mintService";
+import { useProjectStore } from "$mintStore/project";
+import { useMenuStore } from "$mintStore/menu";
+
+const route = useRoute();
+const router = useRouter();
+const projectStore = useProjectStore();
+const menuStore = useMenuStore();
+const projectKey = route.query.project_key;
+const projectName = ref("");
+const loadProject = async () => {
+  const { data } = await httpGet("/api/project", { project_key: projectKey });
+  projectName.value = data.name;
+  menuStore.setMenuList(data.menu);
+};
+
+const loadProjectList = async () => {
+  const { data } = await httpGet("/api/project/list", { project_key: projectKey });
+  projectStore.setProjectList(data);
+};
+
+const onMenuSelect = (menuItem) => {
+  const { key, moduleType, customConfig } = menuItem;
+  if (key === route.query.key) return;
+  const pathMap = {
+    sider: "/sider",
+    schema: "/schema",
+    custom: customConfig?.path,
+    iframe: "/iframe",
+  };
+  router.push({
+    path: `/view/dashboard${pathMap[moduleType]}`,
+    query: {
+      project_key: projectKey,
+      key,
+    },
+  });
+};
+
+onMounted(() => {
+  loadProject();
+  loadProjectList();
+});
+</script>

package/app/pages/service/index.js

@@ -0,0 +1,70 @@
+import axios from "axios";
+import { message } from "ant-design-vue";
+const md5 = require("md5");
+
+const signKey = "mint";
+
+// 创建实例
+const service = axios.create({
+  baseURL: "", // 环境地址
+  timeout: 15000, // 15秒超时
+  headers: {
+    "Content-Type": "application/json;charset=utf-8",
+  },
+});
+
+// 请求拦截器
+service.interceptors.request.use(
+  (config) => {
+    // 请求头添加签名
+    const st = new Date().getTime();
+    const signature = md5(`${signKey}_${st}`);
+    config.headers = {
+      ...config.headers,
+      s_sign: signature,
+      s_t: st,
+    };
+    if (config.url.indexOf("/api/proj/") > -1 && window.projectKey) {
+      config.headers.project_key = window.projectKey;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+  (response) => {
+    const { data } = response;
+    if (data.code === 200 || data.code === 0) {
+      return data;
+    }
+    message.error(data.message);
+    return Promise.reject(data);
+  },
+  (error) => {
+    message.error(error.message || "请求失败，请稍后重试");
+    return Promise.reject(error);
+  },
+);
+
+// 导出简写请求方法
+export function httpGet(url, params, config = {}) {
+  return service.get(url, { params, ...config });
+}
+
+export function httpPost(url, data, config = {}) {
+  return service.post(url, data, config);
+}
+
+export function httpPut(url, data) {
+  return service.put(url, data);
+}
+
+export function httpDelete(url, params) {
+  return service.delete(url, { params });
+}
+
+export default service;

package/app/pages/store/index.js

@@ -0,0 +1,4 @@
+import { createPinia } from "pinia";
+
+const pinia = createPinia();
+export default pinia;

package/app/pages/store/menu.js

@@ -0,0 +1,86 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import cloneDeep from "lodash/cloneDeep";
+export const useMenuStore = defineStore("menu", () => {
+  const menuList = ref([]);
+  const setMenuList = (list) => {
+    menuList.value = list;
+  };
+
+  /**
+   * 递归从菜单树中获取查询菜单项
+   * @param {object} param
+   * @param {array} mList
+   * @returns
+   */
+  const findMenuItem = ({ key, value }, mList = menuList.value) => {
+    for (let i = 0; i < mList.length; i++) {
+      const menuItem = cloneDeep(mList[i]);
+      if (!menuItem) continue;
+
+      if (menuItem[key] === value) {
+        return menuItem;
+      }
+
+      const { menuType, moduleType, siderConfig } = menuItem;
+
+      if (menuType === "group") {
+        const findItem = findMenuItem({ key, value }, menuItem.subMenu);
+        if (findItem) return findItem;
+      }
+
+      if (menuType === "module" && moduleType === "sider" && siderConfig?.menu) {
+        const findItem = findMenuItem({ key, value }, siderConfig.menu);
+        if (findItem) return findItem;
+      }
+    }
+    return null;
+  };
+
+  /**
+   * 获取第一个菜单项
+   * @param {array} mList
+   * @returns
+   */
+  const findFirstMenuItem = (mList = menuList.value) => {
+    const firstMenuItem = cloneDeep(mList[0]);
+    const { menuType, subMenu } = firstMenuItem;
+    if (menuType === "group" && subMenu) {
+      const findItem = findFirstMenuItem(subMenu);
+      if (findItem) return findItem;
+    }
+    return firstMenuItem;
+  };
+
+  /**
+   * 负责递归菜单树结构，新增{ label , disabled,children 字段}
+   * @param {array} menuList
+   * @param {object} options
+   * @param {function} options.disabledCallback
+   */
+  const transfomMenuList = (mList = menuList.value, options = {}) => {
+    return cloneDeep(mList).map((item) => {
+      const { subMenu, menuType, moduleType, siderConfig } = item;
+      const obj = {
+        ...item,
+        label: item.name,
+        disabled: options?.disabledCallback && options.disabledCallback(item),
+      };
+      if (menuType === "group" && subMenu && subMenu.length) {
+        obj.children = transfomMenuList(subMenu, options);
+      }
+      if (
+        menuType === "module" &&
+        moduleType === "sider" &&
+        siderConfig?.menu &&
+        siderConfig?.menu?.length
+      ) {
+        obj.siderConfig.menu = transfomMenuList(siderConfig.menu, options);
+      }
+
+      return obj;
+    });
+  };
+
+  return { menuList, setMenuList, findMenuItem, findFirstMenuItem, transfomMenuList };
+});

package/app/pages/store/project.js

@@ -0,0 +1,9 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+export const useProjectStore = defineStore("project", () => {
+  const projectList = ref([]);
+  const setProjectList = (list) => {
+    projectList.value = list;
+  };
+  return { projectList, setProjectList };
+});

package/app/pages/utils/index.js

@@ -0,0 +1,26 @@
+/**
+ * 过滤配置了 [key]: false 的属性
+ * @param {*} schema
+ * @param {*} fieldName
+ * @returns
+ */
+export const filterNotRenderData = (schema, fieldName) => {
+  if (!schema?.properties) return schema;
+  return Object.entries(schema.properties).reduce(
+    (acc, [key, value]) => {
+      if (
+        value?.option &&
+        Object.hasOwnProperty.call(value.option, fieldName) &&
+        !value.option[fieldName]
+      ) {
+        return acc;
+      }
+      acc.properties[key] = value;
+      return acc;
+    },
+    {
+      type: "object",
+      properties: {},
+    },
+  );
+};

package/app/pages/widgets/header-container/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <a-layout>
+    <a-layout-header class="header">
+      <!-- 头部容器 -->
+      <div class="header-panel">
+        <!-- 左侧 -->
+        <div class="left-panel">
+          <a-flex
+            align="center"
+            class="title-panel"
+          >
+            <img src="./assets/avatar.png" />
+            <h2 class="title">{{ projectName }}</h2>
+          </a-flex>
+        </div>
+
+        <!-- 中间侧 -->
+        <div class="middle-panel">
+          <slot name="menu-content" />
+        </div>
+        <!-- 右侧 -->
+        <div class="right-panel">
+          <slot name="setting-content" />
+          <div class="avatar-wrap">
+            <img src="./assets/avatar.png" />
+            <a-dropdown>
+              <a>
+                {{ username }}
+                <DownOutlined />
+              </a>
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item>
+                    <a href="javascript:;">退出登录</a>
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </div>
+        </div>
+      </div>
+    </a-layout-header>
+    <a-layout-content class="content">
+      <slot name="main-content" />
+    </a-layout-content>
+  </a-layout>
+</template>
+
+<script setup>
+defineProps({
+  projectName: {
+    type: String,
+    default: "",
+  },
+  username: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style scoped lang="less">
+.header {
+  background: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.content {
+  // padding: 48px;
+  background: #fff;
+  height: calc(100vh - 64px);
+  overflow-y: auto;
+}
+
+img {
+  width: 32px;
+  height: 32px;
+  margin-right: 16px;
+}
+
+.header-panel {
+  display: flex;
+  align-items: center;
+  height: 64px;
+  .title-panel {
+    .title {
+      margin: 0 20px 0 0;
+    }
+  }
+
+  .left-panel {
+    min-width: 120px;
+    display: flex;
+    align-items: center;
+  }
+
+  .middle-panel {
+    flex: 1;
+  }
+
+  .right-panel {
+    min-width: 120px;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+}
+</style>

package/app/pages/widgets/schema-form/components/input/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="form-item">
+    <div class="item-label">
+      <a-flex
+        :gap="5"
+        align-items="center"
+      >
+        <span
+          v-if="schema?.option?.required"
+          class="required"
+        >
+          *
+        </span>
+        <span>{{ schema.label }}</span>
+      </a-flex>
+    </div>
+    <a-input
+      v-model:value="dtoValue"
+      :class="[validTip.length ? 'validate-border-error' : '']"
+      v-bind="componentAttrs"
+      @blur="onBlur"
+      @focus="onFocus"
+    ></a-input>
+
+    <div
+      v-if="validTip.length"
+      class="validate-tip-error"
+    >
+      {{ validTip }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { watch, onMounted, ref, computed, inject } from "vue";
+const props = defineProps({
+  schema: {
+    type: Object,
+    default: () => ({}),
+  },
+  schemaKey: {
+    type: String,
+    default: "",
+  },
+  model: {
+    type: String,
+    default: "",
+  },
+});
+
+const name = "input";
+
+const componentAttrs = computed(() => {
+  const { minLength, maxLength, pattern } = props.schema;
+  const { placeholder: pValue } = props.schema.option?.uiComponentConfig || {};
+  const ruleList = [];
+  if (minLength) {
+    ruleList.push(`最小长度：${minLength}`);
+  }
+  if (maxLength) {
+    ruleList.push(`最大长度：${maxLength}`);
+  }
+  if (pattern) {
+    ruleList.push(`格式要求：${pattern}`);
+  }
+  ruleList.push(pValue || "请输入");
+  return {
+    allowClear: true,
+    ...(props.schema.option?.uiComponentConfig || {}),
+    placeholder: ruleList.join(" | "),
+    disabled: props.schema.option?.disabled,
+  };
+});
+
+watch(
+  [() => props.schema, () => props.model, () => props.schemaKey],
+  () => {
+    initData();
+  },
+  { deep: true },
+);
+
+const dtoValue = ref();
+const getValue = () => {
+  return dtoValue.value
+    ? {
+        [props.schemaKey]: dtoValue.value,
+      }
+    : {};
+};
+
+const getAjv = inject("getAjv");
+const validTip = ref("");
+
+const validate = async () => {
+  validTip.value = "";
+  if (props.schema.option?.required && !dtoValue.value) {
+    validTip.value = `${props.schema.label}必填`;
+    return false;
+  }
+  if (dtoValue.value) {
+    const ajv = await getAjv();
+    const validate = ajv.compile(props.schema);
+    const valid = validate(dtoValue.value);
+    if (!valid && validate.errors && validate.errors[0]) {
+      const { keyword, params } = validate.errors[0];
+      switch (keyword) {
+        case "type":
+          validTip.value = `${props.schema.label}类型错误`;
+          break;
+        case "minLength":
+          validTip.value = `${props.schema.label}长度不能小于${params.limit}`;
+          break;
+        case "maxLength":
+          validTip.value = `${props.schema.label}长度不能大于${params.limit}`;
+          break;
+        case "pattern":
+          validTip.value = `${props.schema.label}格式错误`;
+          break;
+        default:
+          validTip.value = `${props.schema.label}不符合要求`;
+          break;
+      }
+      return false;
+    }
+  }
+
+  return true;
+};
+
+const onFocus = () => {
+  validTip.value = "";
+};
+
+const onBlur = () => {
+  void validate();
+};
+
+function initData() {
+  dtoValue.value = props.model || props.schema.option?.default || undefined;
+  validTip.value = "";
+}
+
+onMounted(() => {
+  initData();
+});
+
+defineExpose({
+  getValue,
+  validate,
+  name,
+});
+</script>
+
+<style scoped lang="less"></style>