@codertqy/elpis 1.0.0

package/app/pages/dashboard/dashboard.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-config-provider :locale="zhCn">
+    <HeaderView :projName="projName" @menu-select="onMenuSelect">
+      <!-- 将内容传递给 header-view  并且header-view是一个过渡的，又通过slot透传给 header-container-->
+      <template #main-content>
+        <router-view></router-view>
+      </template>
+    </HeaderView>
+  </el-config-provider>
+</template>
+<script setup>
+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";
+import { useMenuStore } from "$elpisStore/menu.js";
+import { useProjectStore } from "$elpisStore/project.js";
+import { onMounted, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
+const route = useRoute();
+const menuStore = useMenuStore();
+const projectStore = useProjectStore();
+
+const projName = ref("");
+
+onMounted(() => {
+  getProjectList();
+  getProject();
+});
+// 请求 /api/project/list 接口, 并缓存到 project-store 中
+const getProjectList = async () => {
+  const res = await $curl({
+    method: "get",
+    url: "/api/project/list",
+    query: {
+      proj_key: route.query.proj_key,
+    },
+  });
+  if (!res || !res.success || !res.data) {
+    return;
+  }
+  projectStore.setProjectList(res.data);
+};
+// 请求 /api/project 接口, 并缓存到 menu-store 中
+const getProject = async () => {
+  const res = await $curl({
+    method: "get",
+    url: "/api/project",
+    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 = {
+    sider: "/sider",
+    iframe: "/iframe",
+    schema: "/schema",
+    custom: customConfig?.path,
+  };
+  router.push({
+    path: `/view/dashboard${pathMap[moduleType]}`,
+    query: {
+      key,
+      proj_key: route.query.proj_key,
+    },
+  });
+};
+</script>
+
+<style scoped lang="less"></style>

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

@@ -0,0 +1,48 @@
+import boot from "$elpisPages//boot.js";
+import dashboard from "./dashboard.vue";
+import businessDashboardRouterConfig from "$businessDashboardRouterConfig";
+// 初始化路由
+const routes = [];
+
+// 头部菜单路由
+routes.push(
+  {
+    path: "/view/dashboard/iframe",
+    component: () => import("./complex-view/iframe-view/iframe-view.vue"),
+  },
+  {
+    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"),
+  },
+];
+
+// 侧边栏菜单路由
+routes.push({
+  path: "/view/dashboard/sider",
+  component: () => import("./complex-view/sider-view/sider-view.vue"),
+  children: siderRoutes,
+});
+
+// 业务扩展路由
+if(typeof businessDashboardRouterConfig === "function"){
+  businessDashboardRouterConfig({ routes, siderRoutes });
+}
+
+// 侧边栏 兜底 路由策略
+routes.push({
+  path: "/view/dashboard/sider/:chapters*",
+  component: () => import("./complex-view/sider-view/sider-view.vue"),
+});
+
+boot(dashboard, { routes });

package/app/pages/store/index.js

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

package/app/pages/store/menu.js

@@ -0,0 +1,68 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useMenuStore = defineStore("menu", () => {
+  // 菜单列表
+  const menuList = ref([]);
+  //   设置菜单列表
+  const setMenuList = (list) => {
+    menuList.value = list;
+  };
+  /**
+   * 找出菜单目录
+   * @param {*} key 搜索字段与 value搜索值
+   * @param {*} mList  要搜索的菜单列表
+   */
+  const findMenuItem = ({ 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 {Array} mList 菜单列表
+   * @returns
+   */
+  const findFirstMenuItem = (mList = menuList.value) => {
+    // 不存在直接return
+    if (!mList || !mList[0]) {
+      return;
+    }
+    // 存在，并且第一项存在subMenu数组，则继续进行递归获取里面数据的第一项
+    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,12 @@
+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/widgets/header-container/header-container.vue

@@ -0,0 +1,107 @@
+<template>
+  <el-container class="header-container">
+    <el-header class="header">
+      <el-row type="flex" align="middle" class="header-row">
+        <!-- 左上方 标题与logo -->
+        <el-row type="flex" align="middle" class="title-panel">
+          <img src="./asserts//logo.png" class="logo" />
+          <el-row class="text">{{ title }}</el-row>
+        </el-row>
+        <!-- 插槽 菜单区域 -->
+        <slot name="menu-content"></slot>
+        <!-- 右上方 操作区 -->
+        <el-row type="flex" align="middle" justify="end" class="setting-panel">
+          <!-- 插槽 设置区域 -->
+          <slot name="setting-content"></slot>
+          <img src="./asserts/avatar.png" class="avatar" alt="" />
+          <el-dropdown @command="handlUserCommand">
+            <span class="username">
+              {{ userName }}
+              <el-icon class="el-icon--right">
+                <arrow-down />
+              </el-icon>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item class="logout">退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </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("codertqy");
+const handlUserCommand = (command) => {
+  if (command === "logout") {
+    console.log("logout");
+  }
+};
+</script>
+
+<style scoped lang="less">
+.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: 25px;
+          height: 25px;
+          border-radius: 50%;
+        }
+        .text {
+          font-size: 15px;
+          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,138 @@
+<template>
+  <el-row type="flex" align="middle" class="form-item">
+    <!-- label -->
+    <el-row class="item-label" justify="end">
+      <el-row v-if="schema.option?.required" type="flex" class="required"
+        >*</el-row
+      >
+      {{ schema.label }}
+    </el-row>
+    <!-- value -->
+    <el-row class="item-value">
+      <el-input
+        v-model="dtoValue"
+        v-bind="schema.option"
+        class="component"
+        :placeholder="placeholder"
+        :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: {
+    type: String,
+  },
+  schema: {
+    type: Object,
+  },
+  model: {
+    type: String,
+  },
+});
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+
+const dtoValue = ref();
+const validTips = ref(null);
+const placeholder = ref("");
+const name = ref("input");
+const initData = () => {
+  dtoValue.value = model.value ?? schema.option.default;
+  validTips.value = null;
+
+  //   将规则中相关的字段提取出来
+  const { minLength, maxLength, pattern } = schema;
+  const ruleList = [];
+  //   用户自定义placeholder传递过来的
+  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;
+  }
+  // 校验 schema
+  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>

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

@@ -0,0 +1,140 @@
+<template>
+  <el-row type="flex" align="middle" class="form-item">
+    <!-- label -->
+    <el-row class="item-label" justify="end">
+      <el-row v-if="schema.option?.required" type="flex" class="required"
+        >*</el-row
+      >
+      {{ schema.label }}
+    </el-row>
+    <!-- value -->
+    <el-row class="item-value">
+      <el-input-number
+        :controls="false"
+        v-model="dtoValue"
+        v-bind="schema.option"
+        class="component"
+        :placeholder="placeholder"
+        :class="validTips ? 'valid-border' : ''"
+        @focus="onFocus"
+        @blur="onBlur"
+      ></el-input-number>
+    </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: {
+    type: String,
+  },
+  schema: {
+    type: Object,
+  },
+  model: {
+    type: Number,
+  },
+});
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+
+const dtoValue = ref();
+const validTips = ref(null);
+const placeholder = ref("");
+const name = ref("inputNumber");
+
+const initData = () => {
+  dtoValue.value = model.value ?? schema.option.default;
+  validTips.value = null;
+
+  //   将规则中相关的字段提取出来
+  const { minimum, maximum } = schema;
+  const ruleList = [];
+  //   用户自定义placeholder传递过来的
+  if (schema.option?.placeholder) {
+    ruleList.push(schema.option.placeholder);
+  }
+  if (minimum !== undefined) {
+    ruleList.push(`最小值：${minimum}`);
+  }
+  if (maximum !== undefined) {
+    ruleList.push(`最大值：${maximum}`);
+  }
+
+  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;
+  }
+  // 校验 schema
+  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 === "minimum") {
+        validTips.value = `最小值应为${params.limit}`;
+      } else if (keyword === "maximum") {
+        validTips.value = `最大值应为${params.limit}`;
+      } 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">
+:deep(.el-input-number .el-input__inner) {
+  text-align: center;
+}
+</style>