@siven-li/elpis 1.0.0

package/app/pages/dashboard/dashboard.vue

@@ -0,0 +1,94 @@
+<template>
+  <el-config-provider :locale="zhCn">
+    <header-view
+      :proj-name="projName"
+      @menu-select="onMenuSelect"
+    >
+      <template #main-content>
+        <router-view />
+      </template>
+    </header-view>
+  </el-config-provider>
+</template>
+<script setup>
+import{ ref, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+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.js'
+import { useProjectStore } from '$elpisStore/project.js'
+
+const router = useRouter();
+const route = useRoute();
+const projectStore = useProjectStore();
+const menuStore = useMenuStore();
+
+onMounted(() => {
+  getProjectList();
+  getProjectConfig();
+})
+
+const projName = ref('');
+
+// 请求 /api/project/list 接口，并缓存到 project-store 中
+async function getProjectList() {
+  const res = await $curl({
+    method: 'get',
+    url: '/api/project/list',
+    query: {
+      // TODO: 这里需要动态获取当前项目的key
+      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({
+    method: 'get',
+    url: '/api/project',
+    query: {
+      // TODO: 这里需要动态获取当前项目的key
+      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: {
+      key,
+      proj_key: route.query.proj_key
+    }
+  })
+}
+</script>
+<style lang="less" scoped>
+:deep(.el-main) {
+  padding: 0;
+}
+</style>

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

@@ -0,0 +1,43 @@
+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')
+});
+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')
+}]
+// 侧边栏菜单路由
+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,59 @@
+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 = 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 = (list) => {
+    projectList.value = list;
+  }
+
+  return {
+    projectList,
+    setProjectList
+  }
+})

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

@@ -0,0 +1,124 @@
+<template>
+  <el-container 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="./assets/logo.png"
+            alt=""
+            class="logo"
+          >
+          <el-row class="text">
+            {{ title }}
+          </el-row>
+        </el-row>
+        <!-- 插槽：菜单区域 -->
+        <slot name="menu-panel" />
+        <!-- 右上方操作区域 -->
+        <el-row
+          type="flex"
+          align="middle"
+          justify="end"
+          class="setting-panel"
+        >
+          <slot name="setting-content" />
+          <img
+            src="./assets/avatar.png"
+            alt=""
+            class="avatar"
+          >
+          <el-dropdown @command="handleUserCommand">
+            <span class="user-name">
+              {{ userName }}<i class="el-icon-arrow-down el-icon--right" />
+            </span>
+            <template #dropdown>
+              <el-dropdown-item command="logout">
+                退出
+              </el-dropdown-item>
+            </template>
+          </el-dropdown>
+        </el-row>
+      </el-row>
+    </el-header>
+    <el-main class="main-caontainer">
+      <!-- 插槽：核心内容填充区域 -->
+      <slot name="main-content" />
+    </el-main>
+  </el-container>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+defineProps({
+  title: {
+    type: String,
+    default: ''
+  }
+});
+
+const userName = ref('admin');
+const handleUserCommand = (command) => {
+  console.log(command);
+}
+</script>
+<style lang="less" scoped>
+.header-container {
+  height: 100%;
+  min-width: 1000px;
+  overflow: hidden;
+  .header{
+    box-sizing: content-box;
+    max-height: 120px;
+    border-bottom: 1px solid #e8e8e8;
+    .header-row {
+      height: 60px;
+      padding: 0px 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%;
+        }
+        .user-name {
+          font-size: 16px;
+          font-weight: 500;
+          cursor: pointer;
+          height: 60px;
+          line-height: 60px;
+          outline: none;
+        }
+      }
+    }
+  }
+  .main-container {}
+}
+:deep(.el-header) {
+  padding: 0px;
+}
+</style>

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

@@ -0,0 +1,143 @@
+<template>
+  <el-row
+    type="flex"
+    align="middle"
+    class="form-item"
+  >
+    <!-- label -->
+    <el-row
+      justify="end"
+      class="item-label"
+    >
+      <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"
+        :class="{'valid-border': validTips}"
+        :placeholder="placeholder"
+        @input="validate"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+    </el-row>
+    <el-row
+      v-if="validTips"
+      class="valid-tips"
+    >
+      {{ validTips }}
+    </el-row>
+  </el-row>
+</template>
+<script setup>
+import { ref, onMounted, watch, inject, toRefs } from 'vue';
+
+const ajv = inject('ajv');
+
+const props = defineProps({
+  schemaKey: String,
+  schema: Object,
+  model: String
+});
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+
+const name = ref('input');
+
+const dtoValue = ref();
+const placeholder = ref('');
+const validTips = ref(null);
+const initData = () => {
+  validTips.value = null;
+  dtoValue.value = model.value ?? schema.option?.default;
+
+  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;
+  }
+  // 校验 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(valid.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 lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,141 @@
+<template>
+  <el-row
+    type="flex"
+    align="middle"
+    class="form-item"
+  >
+    <!-- label -->
+    <el-row
+      justify="end"
+      class="item-label"
+    >
+      <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"
+        class="component"
+        :class="{'valid-border': validTips}"
+        :controls="false"
+        :placeholder="placeholder"
+        @input="validate"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+    </el-row>
+    <el-row
+      v-if="validTips"
+      class="valid-tips"
+    >
+      {{ validTips }}
+    </el-row>
+  </el-row>
+</template>
+<script setup>
+import { ref, onMounted, watch, inject, toRefs } 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();
+const placeholder = ref('');
+const validTips = ref(null);
+const initData = () => {
+  validTips.value = null;
+  dtoValue.value = model.value ?? schema.option?.default;
+
+  const { minimum, maximum } = schema;
+
+  const ruleList = [];
+  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(valid.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 lang="less" scoped>
+:deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+</style>