@xujingquan/elpis 1.0.0

package/app/pages/dashboard/dashboard.vue

@@ -0,0 +1,93 @@
+<template>
+  <header-view :proj-name="projName" @menu-select="onMenuSelect">
+    <template #main-content>
+      <!-- 路由展示 -->
+      <router-view />
+    </template>
+  </header-view>
+</template>
+
+<script setup>
+import HeaderView from './complex-view/header-view/header-view.vue';
+
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useMenuStore } from '$elpisStore/menu';
+import { useProjectStore } from '$elpisStore/project';
+import { projectList, project } from '$elpisCommon/api/project-api';
+
+const route = useRoute();
+const router = useRouter();
+const menuStore = useMenuStore();
+const projectStore = useProjectStore();
+
+const projName = ref('');
+
+// 请求 project/list 接口，并记录到 project-store 中
+async function getProjectList() {
+  try {
+    const params = { proj_key: route.query.proj_key };
+    const res = await projectList(params);
+    if (!res || !res.success || !res.data) {
+      return;
+    }
+
+    projectStore.setProjectList(res.data);
+  } finally {
+  }
+}
+
+// 请求 project  接口，并缓存到 menu-store 中
+async function getProject() {
+  try {
+    const params = { proj_key: route.query.proj_key };
+    const res = await project(params);
+    if (!res || !res.success || !res.data) {
+      return;
+    }
+
+    const { name, menu } = res.data;
+    projName.value = name;
+    menuStore.setMenuList(menu);
+  } finally {
+  }
+}
+
+// 点击菜单回调
+const onMenuSelect = function (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,
+    },
+  });
+};
+
+onMounted(() => {
+  getProjectList();
+  getProject();
+});
+</script>
+
+<style lang="less" scoped>
+:deep(.el-main) {
+  padding: 0;
+}
+
+:deep(.el-container) {
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,45 @@
+/**
+ * 这个 webpack 打包的入口之一
+ * 创建vue实例
+ */
+
+import boot from '$elpisPages/boot.js';
+import dashboard from './dashboard.vue';
+import businessDashboardRoutreConfig from '$businessDashboardRoutreConfig';
+
+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 siderRouters = [
+  { 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: siderRouters,
+});
+
+// 支持业务拓展路由
+if (typeof businessDashboardRoutreConfig === 'function') {
+  businessDashboardRoutreConfig({ routes, siderRouters });
+}
+
+// 侧边栏兜底策略
+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,4 @@
+import { createPinia } from 'pinia';
+const pinia = createPinia();
+
+export default pinia;

package/app/pages/store/menu.js

@@ -0,0 +1,61 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useMenuStore = defineStore('menu', () => {
+  // 菜单列表
+  const menuList = ref([]);
+
+  // 设置菜单列表
+  const setMenuList = function (list) {
+    menuList.value = list;
+  };
+
+  /**
+   * 找出菜单目录
+   * @param key 搜索字段
+   * @param value 搜索值
+   * @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?.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,17 @@
+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,111 @@
+<template>
+  <el-container class="header-container">
+    <el-header class="header">
+      <el-row type="flex" align="middle" class="header-row">
+        <!-- 左上方 title -->
+        <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" />
+          <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 = () => {
+  console.log('handleUserCommand');
+};
+</script>
+
+<style lang="less" scoped>
+.header-container {
+  min-width: 1000px;
+  height: 100%;
+  overflow: hidden;
+
+  .header {
+    max-height: 120px;
+    border-bottom: 1px solid #e8e8e8;
+
+    &-row {
+      height: 60px;
+      padding: 0 20px;
+
+      .title-panel {
+        width: 180px;
+        min-width: 180px;
+
+        .logo {
+          width: 25px;
+          height: 25px;
+          margin-right: 10px;
+          border-radius: 50%;
+        }
+
+        .text {
+          font-weight: 500;
+          font-size: 15px;
+        }
+      }
+
+      .setting-panel {
+        min-width: 180px;
+        margin-left: auto;
+
+        .avatar {
+          width: 30px;
+          height: 30px;
+          margin-right: 12px;
+          border-radius: 50%;
+        }
+
+        .username {
+          height: 60px;
+          font-weight: 500;
+          font-size: 16px;
+          line-height: 60px;
+          outline: none;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .main-container {
+    height: 100%;
+  }
+}
+
+:deep(.el-header) {
+  padding: 0;
+}
+</style>

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

@@ -0,0 +1,141 @@
+<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"
+        :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: [Number, String],
+});
+
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+
+const name = ref('input');
+const dtoValue = ref(undefined);
+const placeholder = ref('');
+const validTips = ref(null);
+
+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;
+  }
+
+  // ajv 校验 schema
+  if (dtoValue.value) {
+    const validate = ajv.compile(schema);
+    const valid = validate(dtoValue.value);
+    if (!valid && validate.errors?.[0]) {
+      const { keyword, params } = validate.errors[0];
+      switch (keyword) {
+        case 'type':
+          validTips.value = `类型必须为 ${type}`;
+          break;
+        case 'maxLength':
+          validTips.value = `最大长度应为 ${params.limit}`;
+          break;
+        case 'minLength':
+          validTips.value = `最小长度应为 ${params.limit}`;
+          break;
+        case 'pattern':
+          validTips.value = '格式不正确';
+          break;
+        default:
+          console.error(validate.errors[0]);
+          validTips.value = '不符合要求';
+          break;
+      }
+      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 lang="less" scoped></style>

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

@@ -0,0 +1,142 @@
+<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: Number,
+});
+
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+
+const name = ref('inputNumber');
+const dtoValue = ref(undefined);
+const placeholder = ref('');
+const validTips = ref(null);
+
+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 !== undefined) {
+    ruleList.push(`最小值: ${minium}`);
+  }
+  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;
+  }
+
+  // ajv 校验 schema
+  if (dtoValue.value) {
+    const validate = ajv.compile(schema);
+    const valid = validate(dtoValue.value);
+    if (!valid && validate.errors?.[0]) {
+      const { keyword, params } = validate.errors[0];
+      switch (keyword) {
+        case 'type':
+          validTips.value = `类型必须为 ${type}`;
+          break;
+        case 'minium':
+          validTips.value = `最小值为 ${params.limit}`;
+          break;
+        case 'maximum':
+          validTips.value = `最大值为 ${params.limit}`;
+          break;
+        default:
+          console.error(validate.errors[0]);
+          validTips.value = '不符合要求';
+          break;
+      }
+      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 lang="less" scoped>
+:deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+</style>