@wanglindoc/elpis 1.0.0

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

@@ -0,0 +1,141 @@
+<template>
+  <sider-container>
+    <template #menu-content>
+      <el-menu
+        mode="vertical"
+        :default-active="activeKey"
+        :ellipsis="false"
+        @select="onMenuSelect"
+      >
+        <template v-for="item in menuList">
+          <!-- group -->
+          <sub-menu
+            v-if="item.subMenu && item.subMenu.length > 0"
+            :menu-item="item"
+          >
+          </sub-menu>
+
+          <!-- module -->
+          <el-menu-item v-else :index="item.key"> {{ item.name }}</el-menu-item>
+        </template>
+      </el-menu>
+    </template>
+
+    <template #main-content>
+      <router-view></router-view>
+    </template>
+  </sider-container>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from "vue";
+import SiderContainer from "../../../widgets/sider-container/sider-container.vue";
+import SubMenu from "./complex-view/sub-menu.vue";
+import { RouterView, useRoute, useRouter } from "vue-router";
+import { useMenuStore } from "$elpisStore/menu.js";
+
+const route = useRoute();
+const router = useRouter();
+
+const menuStore = useMenuStore();
+
+const activeKey = ref("");
+const setActiveKey = function () {
+  let siderMenuItem = menuStore.findMenuItem({
+    key: "key",
+    value: route.query.sider_key,
+  });
+
+  // 如果首次加载 sider-view，用户未选中左侧菜单，需要默认选中第一个
+  if (!siderMenuItem) {
+    const headerMenuItem = menuStore.findMenuItem({
+      key: "key",
+      value: route.query.key,
+    });
+
+    if (
+      headerMenuItem &&
+      headerMenuItem.siderConfig &&
+      headerMenuItem.siderConfig.menu
+    ) {
+      const siderMenuList = headerMenuItem.siderConfig.menu;
+      // 找出左侧菜单中的第一项
+      siderMenuItem = menuStore.findFirstMenuItem(siderMenuList);
+
+      if (siderMenuItem) {
+        handleMenuSelect(siderMenuItem.key);
+      }
+    }
+  }
+
+  activeKey.value = siderMenuItem?.key;
+};
+
+const menuList = ref([]);
+const setMenuList = function () {
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: route.query.key,
+  });
+
+  if (menuItem && menuItem.siderConfig && menuItem.siderConfig.menu) {
+    menuList.value = menuItem.siderConfig.menu;
+  }
+};
+
+watch(
+  () => route.query.key,
+  () => {
+    setActiveKey();
+    setMenuList();
+  },
+);
+
+watch(
+  () => menuStore.menuList,
+  () => {
+    setActiveKey();
+    setMenuList();
+  },
+  {
+    deep: true,
+  },
+);
+
+const onMenuSelect = (menuKey) => handleMenuSelect(menuKey);
+
+const handleMenuSelect = function (menuKey) {
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: menuKey,
+  });
+
+  const { moduleType, key, customConfig } = menuItem;
+
+  if (key === route.query.sider_key) {
+    return;
+  }
+
+  const pathMap = {
+    iframe: "/iframe",
+    schema: "/schema",
+    custom: customConfig?.path,
+  };
+
+  router.push({
+    path: `/view/dashboard/sider${pathMap[moduleType]}`,
+    query: {
+      proj_key: route.query.proj_key,
+      key: route.query.key,
+      sider_key: key,
+    },
+  });
+};
+
+onMounted(() => {
+  setActiveKey();
+  setMenuList();
+});
+</script>
+
+<style scoped lang="less"></style>

package/app/pages/dashboard/dashboard.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-config-provider :locale="zhCn">
+    <header-view :proj-name="projName" @menu-select="onMenuSelect">
+      <template #main-content>
+        <router-view></router-view>
+      </template>
+    </header-view>
+  </el-config-provider>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+import HeaderView from "./complex-view/header-view/header-view.vue";
+import $curl from "$elpisCommon/curl.js";
+import { useMenuStore } from "$elpisStore/menu";
+import { useProjectStore } from "$elpisStore/project";
+import { RouterView, useRoute, useRouter } from "vue-router";
+const route = useRoute();
+const router = useRouter();
+
+const menuStore = useMenuStore();
+const projectStore = useProjectStore();
+
+const projName = ref("");
+
+/**
+ * 请求 /api/project/list 接口 并缓存到 project-store 中
+ */
+async function getProjectList() {
+  const res = await $curl({
+    url: "/api/project/list",
+    method: "get",
+    query: {
+      proj_key: route.query.proj_key,
+    },
+  });
+
+  if (!res || !res.success || !res.data) {
+    return;
+  }
+
+  projectStore.setProjectList(res.data);
+}
+
+/**
+ * 请求 /api/project 接口 并缓存到 menu-store 中
+ */
+async function getProjectConfig() {
+  const res = await $curl({
+    url: "/api/project",
+    method: "get",
+    query: {
+      proj_key: route.query.proj_key,
+    },
+  });
+
+  if (!res || !res.success || !res.data) {
+    return;
+  }
+
+  const { name, menu } = res.data;
+
+  projName.value = name;
+
+  menuStore.setMenuList(menu);
+}
+
+const onMenuSelect = (menuItem) => {
+  const { moduleType, key, customConfig } = menuItem;
+
+  if (key === route.query.key) return;
+
+  const pathMap = {
+    iframe: "/iframe",
+    sider: "/sider",
+    schema: "/schema",
+    custom: customConfig?.path,
+  };
+
+  router.push({
+    path: `/view/dashboard${pathMap[moduleType]}`,
+    query: {
+      proj_key: route.query.proj_key,
+      key,
+    },
+  });
+};
+
+onMounted(() => {
+  getProjectList();
+  getProjectConfig();
+});
+</script>
+
+<style lang="less" scoped></style>

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

@@ -0,0 +1,53 @@
+import boot from "../boot";
+import dashboard from "./dashboard.vue";
+
+// 1.此方式如果 $businessDashboardRouterConfig 在使用方的项目目录下没找到文件，webpack 编译时就会报错
+import businessDashboardRouterConfig from "$businessDashboardRouterConfig"; // 3.所以仍然采用此方式导入，但需要在 webpack 中做文章
+
+// 2.try catch 依然无法避免，因为 webpack 是静态构建工具，并不是运行时构建，所以在构建时发现 alias 别名配置，就会去路径下找文件，找不到就抛出错误
+// let businessDashboardRouterConfig;
+// try {
+//   businessDashboardRouterConfig = require("$businessDashboardRouterConfig");
+// } catch (error) {}
+
+const routes = [];
+
+// 头部菜单路由
+routes.push({
+  path: "/view/dashboard/iframe",
+  component: () => import("./complex-view/iframe-view/iframe-view.vue"),
+});
+routes.push({
+  path: "/view/dashboard/schema",
+  component: () => import("./complex-view/schema-view/schema-view.vue"),
+});
+
+const siderRoutes = [
+  {
+    path: "iframe",
+    component: () => import("./complex-view/iframe-view/iframe-view.vue"),
+  },
+  {
+    path: "schema",
+    component: () => import("./complex-view/schema-view/schema-view.vue"),
+  },
+];
+
+if (typeof businessDashboardRouterConfig === "function") {
+  businessDashboardRouterConfig({ routes, siderRoutes });
+}
+
+// 侧边栏菜单路由
+routes.push({
+  path: "/view/dashboard/sider",
+  component: () => import("./complex-view/sider-view/sider-view.vue"),
+  children: siderRoutes,
+});
+
+// 侧边栏兜底策略
+routes.push({
+  path: "/view/dashboard/sider/:chapters+",
+  component: () => import("./complex-view/sider-view/sider-view.vue"),
+});
+
+boot(dashboard, { routes });

package/app/pages/dashboard/todo/todo.vue

@@ -0,0 +1,6 @@
+<template>
+  <h1>todo</h1>
+</template>
+
+<script setup></script>
+<style scoped lang="less"></style>

package/app/pages/store/index.js

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

package/app/pages/store/menu.js

@@ -0,0 +1,73 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useMenuStore = defineStore("menu", () => {
+  const menuList = ref([]);
+
+  const setMenuList = function (list) {
+    menuList.value = list;
+  };
+
+  /**
+   * 找到菜单目录
+   * @param {*} param0
+   * @param {*} mList
+   */
+  const findMenuItem = function ({ key, value }, mList = menuList.value) {
+    for (let i = 0; i < mList.length; ++i) {
+      const menuItem = mList[i];
+
+      if (!menuItem) {
+        continue;
+      }
+
+      const { menuType, moduleType } = menuItem;
+
+      if (menuItem[key] === value) {
+        return menuItem;
+      }
+
+      if (menuType === "group" && menuItem.subMenu) {
+        const mItem = findMenuItem({ key, value }, menuItem.subMenu);
+        if (mItem) {
+          return mItem;
+        }
+      }
+
+      if (
+        moduleType === "sider" &&
+        menuItem.siderConfig &&
+        menuItem.siderConfig.menu
+      ) {
+        const mItem = findMenuItem({ key, value }, menuItem.siderConfig.menu);
+        if (mItem) {
+          return mItem;
+        }
+      }
+    }
+  };
+
+  /**
+   * 找出第一个菜单目录
+   * @param {*} mList 菜单列表
+   */
+  const findFirstMenuItem = function (mList = menuList.value) {
+    if (!mList || !mList[0]) {
+      return;
+    }
+
+    let firstMenuItem = mList[0];
+    if (firstMenuItem.subMenu) {
+      firstMenuItem = findFirstMenuItem(firstMenuItem.subMenu);
+    }
+
+    return firstMenuItem;
+  };
+
+  return {
+    menuList,
+    setMenuList,
+    findMenuItem,
+    findFirstMenuItem,
+  };
+});

package/app/pages/store/project.js

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

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

@@ -0,0 +1,106 @@
+<template>
+  <el-container class="header-container">
+    <el-header class="header">
+      <!-- logo & title -->
+      <el-row type="flex" align="middle" class="header-row">
+        <el-row type="flex" align="middle" class="title-panel">
+          <img src="./asserts/logo.png" alt="logo" class="logo" />
+          <el-row class="text">{{ title }}</el-row>
+        </el-row>
+
+        <!-- 插槽 菜单区域 -->
+        <slot name="nemu-content"></slot>
+
+        <!-- 设置区域 -->
+        <el-row type="flex" align="middle" justify="end" class="setting-panel">
+          <!-- 插槽 设置区域 -->
+          <slot name="setting-content"></slot>
+          <img src="./asserts/avatar.png" alt="avatar" class="avatar" />
+          <el-dropdown @command="handleUserCommand">
+            <span class="username">
+              {{ userName }}
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <template #dropdown>
+              <el-dropdown-item command="logout"> 退出登录 </el-dropdown-item>
+            </template>
+          </el-dropdown>
+        </el-row>
+      </el-row>
+    </el-header>
+
+    <el-main class="main-container">
+      <!-- 插槽 核心内容填充区域 -->
+      <slot name="main-content"></slot>
+    </el-main>
+  </el-container>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+defineProps({ title: String });
+
+const userName = ref("管理员");
+
+const handleUserCommand = () => {};
+</script>
+
+<style lang="less" scoped>
+.header-container {
+  height: 100%;
+  min-width: 1000px;
+  overflow: hidden;
+
+  .header {
+    max-height: 120px;
+    border-bottom: 1px solid #e8e8e8;
+
+    .header-row {
+      height: 60px;
+      padding: 0 20px;
+      .title-panel {
+        width: 180px;
+        min-width: 180px;
+        .logo {
+          margin-right: 10px;
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+        }
+        .text {
+          font-size: 16px;
+          font-weight: 500;
+        }
+      }
+    }
+
+    .setting-panel {
+      margin-left: auto;
+      min-width: 180px;
+      .avatar {
+        margin-right: 12px;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+      }
+
+      .username {
+        font-size: 16px;
+        font-weight: 500;
+        cursor: pointer;
+        height: 60px;
+        line-height: 60px;
+        outline: none;
+      }
+    }
+  }
+
+  .main-container {
+  }
+}
+
+:deep(.el-header) {
+  padding: 0;
+}
+</style>

package/app/pages/widgets/schema-form/complex-view/input/input.vue

@@ -0,0 +1,137 @@
+<template>
+  <el-row type="flex" align="middle" class="form-item">
+    <el-row class="item-label" justify="end">
+      <el-row
+        v-if="schema && schema.option?.required"
+        type="flex"
+        class="required"
+      >
+        *
+      </el-row>
+      {{ schema.label }}
+    </el-row>
+
+    <el-row class="item-value">
+      <el-input
+        v-model="dtoValue"
+        v-bind="schema.option"
+        :placeholder="placeholder"
+        class="component"
+        :class="validTips ? 'valid-border' : ''"
+        @focus="onFocus"
+        @blur="onBlur"
+      ></el-input>
+    </el-row>
+
+    <!-- 错误信息 -->
+    <el-row v-if="validTips" class="valid-tips">
+      {{ validTips }}
+    </el-row>
+  </el-row>
+</template>
+
+<script setup>
+import { ref, toRefs, watch, inject, onMounted } from "vue";
+const ajv = inject("ajv");
+
+const props = defineProps({
+  schemaKey: String,
+  schema: Object,
+  model: String,
+});
+
+const { schema, schemaKey } = props;
+const { model } = toRefs(props);
+
+const name = ref("input");
+const dtoValue = ref();
+const validTips = ref(null);
+const placeholder = ref("");
+const initData = () => {
+  dtoValue.value = model.value ?? schema.option?.default;
+  validTips.value = null;
+
+  const { minLength, maxLength, pattern } = schema;
+  const ruleList = [];
+  if (schema.option?.placeholder) {
+    ruleList.push(schema.option.placeholder);
+  }
+
+  if (minLength) {
+    ruleList.push(`最小长度：${minLength}`);
+  }
+
+  if (maxLength) {
+    ruleList.push(`最大长度：${maxLength}`);
+  }
+
+  if (pattern) {
+    ruleList.push(`格式：${pattern}`);
+  }
+
+  placeholder.value = ruleList.join["|"];
+};
+
+onMounted(() => {
+  initData();
+});
+
+watch(
+  [model, schema],
+  () => {
+    initData();
+  },
+  { deep: true },
+);
+
+const validate = () => {
+  validTips.value = null;
+  const { type } = schema;
+
+  if (schema.option?.required && !dtoValue.value) {
+    validTips.value = "不能为空";
+    return false;
+  }
+
+  if (dtoValue.value) {
+    const validate = ajv.compile(schema);
+    const valid = validate(dtoValue.value);
+
+    if (!valid && validate.errors && validate.errors[0]) {
+      const { keyword, params } = validate.errors[0];
+      if (keyword === "type") {
+        validTips.value = `类型必须为 ${type}`;
+      } else if (keyword === "maxLength") {
+        validTips.value = `最大长度应为 ${params.limit}`;
+      } else if (keyword === "minLength") {
+        validTips.value = `最小长度应为 ${params.limit}`;
+      } else if (keyword === "pattern") {
+        validTips.value = "格式不正确";
+      } else {
+        console.log(validate.errors[0]);
+        validTips.value = "不符合要求";
+      }
+
+      return false;
+    }
+  }
+
+  return true;
+};
+
+const getValue = () => {
+  return dtoValue.value !== undefined ? { [schemaKey]: dtoValue.value } : {};
+};
+
+const onFocus = () => (validTips.value = null);
+
+const onBlur = () => validate();
+
+defineExpose({
+  name,
+  validate,
+  getValue,
+});
+</script>
+
+<style scoped lang="less"></style>