@isxiaoyuan/elpis 1.0.0

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",
+  //   name: "iframe-view",
+  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: "schema",
+    component: () => import("./complex-view/schema-view/schema-view.vue"),
+  },
+  {
+    path: "iframe",
+    component: () => import("./complex-view/iframe-view/iframe-view.vue"),
+  },
+];
+
+// 侧边栏路由
+routes.push({
+  path: "/view/dashboard/sider",
+  component: () => import("./complex-view/silder-view/silder-view.vue"),
+  children: siderRoutes,
+});
+
+// 业务扩展路由
+if (typeof businessDashboardRouterConfig === "function") {
+  businessDashboardRouterConfig({ routes, siderRoutes });
+}
+
+// 侧边栏兜底策略
+routes.push({
+  path: "/view/dashboard/sider/:chapters+",
+  component: () => import("./complex-view/silder-view/silder-view.vue"),
+});
+
+boot(dashboard, { routes });

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,70 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useMenuStore = defineStore("menu", () => {
+  // 菜单列表
+  const menuList = ref([]);
+
+  // 设置菜单列表
+  const setMenuList = (list) => {
+    menuList.value = list;
+  };
+
+  /**
+   * 找出菜单目录
+   * @param key 搜索字段
+   * @param 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 mList 要搜索的菜单列表
+   */
+
+  const findFirstMemuItem = (mList = menuList.value) => {
+    if (!mList || !mList[0]) {
+      return;
+    }
+    let firstMenuItem = mList[0];
+    if (firstMenuItem.subMenu) {
+      firstMenuItem = findFirstMemuItem(firstMenuItem.subMenu);
+    }
+    return firstMenuItem;
+  };
+
+  return {
+    menuList,
+    setMenuList,
+    findMenuItem,
+    findFirstMemuItem,
+  };
+});

package/app/pages/store/project.js

@@ -0,0 +1,17 @@
+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,102 @@
+<template>
+  <div class="header-container">
+    <el-header class="header">
+      <el-row type="flex" align="middle" class="header-row">
+        <el-row type="flex" align="middle" class="title-panel">
+          <img src="./asserts/logo.png" alt="" class="logo" />
+          <el-row class="title">{{ 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" alt="" class="avatar" />
+          <div>{{ username }}</div>
+          <!-- <el-dropdown @command="handleUserCommand">
+            <template #reference>
+              <el-button type="primary" size="small"> 更多操作 </el-button>
+            </template>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item type="danger">退出登录</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>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+defineProps({
+  title: {
+    type: String,
+    default: "Elpis",
+  },
+});
+
+const username = ref("isYuan");
+</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 {
+          width: 25px;
+          height: 25px;
+          margin-right: 10px;
+          border-radius: 50%;
+        }
+        .title {
+          font-size: 15px;
+          font-weight: 500;
+        }
+      }
+      .setting-panel {
+        margin-left: auto;
+        min-width: 180px;
+        .user-name {
+          font-size: 16px;
+          font-weight: 500;
+          cursor: pointer;
+          height: auto;
+          line-height: 60px;
+          outline: none;
+        }
+        .avatar {
+          width: 30px;
+          height: 30px;
+          margin-right: 12px;
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+  .main-container {
+    // height: calc(100vh - 60px);
+  }
+
+  :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">
+    <!-- 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-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: [Object, Number, String],
+});
+
+const { schemaKey, schema } = 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("|");
+};
+
+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();
+};
+
+onMounted(() => {
+  initData();
+});
+
+watch(
+  [model, schema],
+  () => {
+    initData();
+  },
+  { deep: true },
+);
+
+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,136 @@
+<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
+        v-model="dtoValue"
+        v-bind="schema.option"
+        :controls="false"
+        :placeholder="placeholder"
+        class="component"
+        :class="validTips ? 'valid-border' : ''"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+    </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: [Object, Number, String],
+});
+
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+
+const name = ref("input-number");
+
+const dtoValue = ref();
+const validTips = ref(null);
+const placeholder = ref("");
+
+const initData = () => {
+  dtoValue.value = model.value ?? schema.option?.default;
+  validTips.value = null;
+
+  const { minium, maximum } = schema;
+
+  const ruleList = [];
+  if (schema.option?.placeholder) {
+    ruleList.push(schema.option.placeholder);
+  }
+  if (minium) {
+    ruleList.push(`值不能小于${minium}`);
+  }
+  if (maximum) {
+    ruleList.push(`值不能超过${maximum}`);
+  }
+  placeholder.value = ruleList.join("|");
+};
+
+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 === "maximum") {
+        validTips.value = `值不能超过${params.limit}`;
+      } else if (keyword === "minimum") {
+        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();
+};
+
+onMounted(() => {
+  initData();
+});
+
+watch(
+  [model, schema],
+  () => {
+    initData();
+  },
+  { deep: true },
+);
+
+defineExpose({
+  name,
+  validate,
+  getValue,
+});
+</script>
+
+<style scoped lang="less">
+:deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+</style>

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

@@ -0,0 +1,122 @@
+<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-select
+        v-model="dtoValue"
+        v-bind="schema.option"
+        class="component"
+        :class="validTips ? 'valid-border' : ''"
+        @change="onChange"
+      >
+        <el-option
+          v-for="item in schema.option?.enumList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </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: [Object, Number, String],
+});
+
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+
+const name = ref("select");
+
+const dtoValue = ref();
+const validTips = ref(null);
+
+const initData = () => {
+  dtoValue.value = model.value ?? schema.option?.default;
+  validTips.value = null;
+};
+
+const validate = () => {
+  validTips.value = null;
+  // const { type } = schema;
+
+  // 校验是否必填
+  if (schema.option?.required && !dtoValue.value) {
+    validTips.value = "不能为空";
+    return false;
+  }
+
+  // 校验 schema
+  if (dtoValue.value) {
+    let dtoEnum = [];
+    if (schema.option?.enumList) {
+      // 校验 enumList 中的 value 是否与 dtoValue 匹配
+      dtoEnum = schema.option?.enumList.map((item) => item.value);
+    }
+    const validate = ajv.compile({
+      schema,
+      ...{ enum: dtoEnum },
+    });
+
+    const valid = validate(dtoValue.value);
+    if (!valid && validate.errors && validate.errors[0]) {
+      const { keyword } = validate.errors[0];
+      if (keyword === "enum") {
+        validTips.value = `取值超出枚举范围`;
+      } else {
+        console.log(validate.errors[0]);
+        validTips.value = "不符合要求";
+      }
+      return false;
+    }
+  }
+  return true;
+};
+
+const getValue = () => {
+  return dtoValue.value !== undefined ? { [schemaKey]: dtoValue.value } : {};
+};
+
+const onChange = () => {
+  validate();
+};
+
+onMounted(() => {
+  initData();
+});
+
+watch(
+  [model, schema],
+  () => {
+    initData();
+  },
+  { deep: true },
+);
+
+defineExpose({
+  name,
+  validate,
+  getValue,
+});
+</script>
+
+<style scoped lang="less"></style>

package/app/pages/widgets/schema-form/form-item-config.js

@@ -0,0 +1,20 @@
+import input from "./complex-view/input/input.vue";
+import inputNumber from "./complex-view/input-number/input-number.vue";
+import select from "./complex-view/select/select.vue";
+
+// 业务拓展 component 配置
+import BusinessFormItemConfig from "$businessFormItemConfig";
+
+const FormItemConfig = {
+  input: {
+    component: input,
+  },
+  inputNumber: {
+    component: inputNumber,
+  },
+  select: {
+    component: select,
+  },
+};
+
+export default { ...FormItemConfig, ...BusinessFormItemConfig };