@dmqweb/elpis 1.0.0

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

@@ -0,0 +1,35 @@
+<template>
+  <el-sub-menu :index="menuItem.key">
+    <template #title>
+      {{ menuItem.name }}
+    </template>
+    <div
+      v-for="item in menuItem.subMenu"
+      :key="item.key"
+    >
+      <sub-menu
+        v-if="item.subMenu && item.subMenu.length > 0"
+        :menu-item="item"
+      />
+      <el-menu-item
+        v-else
+        :index="item.key"
+      >
+        {{ item.name }}
+      </el-menu-item>
+    </div>
+  </el-sub-menu>
+</template>
+
+<script setup>
+const { menuItem } = defineProps({
+  menuItem: {
+    type: Object,
+    required: true
+  }
+})  
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,134 @@
+<template>
+  <sider-container>
+    <!-- 侧边栏 -->
+    <template #menu-content>
+      <el-menu
+        :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
+            :key="item.key"
+            :index="item.key"
+          >
+            {{ item.name }}
+          </el-menu-item>
+        </template>
+      </el-menu>
+    </template>
+    <!-- 主内容 -->
+    <template #main-content>
+      <router-view />
+    </template>
+  </sider-container>
+</template> 
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useMenuStore } from '$elpisStore/menu.js'
+import siderContainer from '$elpisWidgets/sider-container/sider-container.vue';
+import subMenu from './complex-view/sub-menu/sub-menu.vue';
+
+const router = useRouter();
+const route = useRoute();
+const menuStore = useMenuStore();
+
+ 
+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
+  }
+}
+
+const activeKey = ref('');
+// 设置 activeKey
+const setActiveKey = function() {
+  let siderMenuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: route.query.sider_key 
+  }) 
+  // 首次加载时，没有 sider_key ，用户没有选择侧边栏菜单，则默认选择第一个菜单
+  if (!siderMenuItem) {
+    const hMenuList = menuStore.findMenuItem({
+    key: 'key',
+    value: route.query.key
+  })
+  if (hMenuList && hMenuList.siderConfig && hMenuList.siderConfig.menu) {
+    const siderMenuList = hMenuList.siderConfig.menu
+    siderMenuItem = menuStore.findFirstMenuItem(siderMenuList) // 递归查找第一个菜单
+    if (siderMenuItem) {
+      handleMenuSelect(siderMenuItem.key)
+    }
+  }
+  }
+  activeKey.value = siderMenuItem?.key
+}
+
+// 监听路由变化，设置 activeKey
+watch( [
+  () => route.query.key,
+  () => menuStore.getMenuList
+], () => {
+  setActiveKey()
+  setMenuList()
+},{ deep: true })
+
+// 当页面加载完成并且该组件被挂载到DOM上时
+onMounted(() => {
+  setActiveKey()
+  setMenuList()
+})
+const onMenuSelect = function(menuKey) {
+  handleMenuSelect(menuKey)
+}
+
+// 菜单选择处理
+const handleMenuSelect = function(menuKey) {
+  const siderMenuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: menuKey
+  })
+  if (!siderMenuItem) {
+    return
+  }
+  const { key, moduleType, customConfig } = siderMenuItem
+
+  if (key === route.query.sider_key) {
+    return
+  }
+  const pathMap = {
+    schema: '/schema',
+    iframe: '/iframe',
+    custom: customConfig?.path
+  }
+  router.push({
+    path: `/view/dashboard/sider${pathMap[moduleType]}`,
+    query: {
+      key: route.query.key,
+      sider_key: key,
+      proj_key: route.query.proj_key
+    }
+  })
+}
+
+</script> 
+
+<style lang="scss" scoped>
+
+</style>

package/app/pages/dashboard/dashboard.vue

@@ -0,0 +1,127 @@
+<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 zhCn from 'element-plus/es/locale/lang/zh-cn'
+import HeaderView from './complex-view/header-view/header-view.vue'
+import { ref, onMounted } from 'vue'
+import { useProjectStore } from '$elpisStore/project.js'
+import { useMenuStore } from '$elpisStore/menu.js'
+import $curl from '$elpisCommon/curl.js'
+import { useRouter, useRoute } from 'vue-router'
+
+const projectStore = useProjectStore()
+const menuStore = useMenuStore()
+const projName = ref('')
+const route = useRoute()
+const router = useRouter()
+const isLoading = ref(true)
+
+onMounted( async () => {
+  try {
+    await getProjectList()
+    const configLoaded = await getProjectConfig()
+    
+    if (configLoaded) {
+      // 等待一小段时间确保菜单数据完全设置
+      setTimeout(() => {
+        isLoading.value = false
+      }, 200)
+    } else {
+      console.error('项目配置加载失败')
+      isLoading.value = false
+    }
+  } catch (error) {
+    console.error('初始化失败:', error)
+    isLoading.value = false
+  }
+})
+
+// 请求 /api/project/list 并缓存到 project-store
+async function getProjectList() {
+  const res = await $curl({
+    method: 'get',
+    url: '/api/project/list',
+    params: {
+      // todo 动态获取
+      proj_key: route.query.proj_key,
+    }
+  });
+  if (!res || !res.data || !res.success) {
+    return
+  }
+
+  projectStore.setProjectList(res.data)
+}
+// 请求 /api/project 并缓存到 menu-store
+async function getProjectConfig() {
+  try {
+    const res = await $curl({
+      method: 'get',
+      url: '/api/project',
+      params: {
+        proj_key: route.query.proj_key,
+      },
+    });
+
+    if (!res || !res.data || !res.success) {
+      return false; // 返回失败状态
+    }
+
+    const { name, menu} = res.data
+    projName.value = name
+    menuStore.setMenuList(menu)
+
+    return true; // 返回成功状态
+  } catch (error) {
+    console.error('获取项目配置失败:', error)
+    return false; // 返回失败状态
+  }
+}
+
+// 点击菜单回调方法
+const onMenuSelect = function(menuItem) {
+  const { moduleType, key, customConfig} = menuItem
+
+  if (key === route.query.key) {
+    return
+  }
+  // 菜单项的 moduleType 映射到对应的路由
+  const pathMap = {
+    sider: '/sider',
+    schema: '/schema',
+    iframe: '/iframe',
+    custom: customConfig?.path
+  }
+  router.push({
+    path: `/view/dashboard${pathMap[moduleType]}`,
+    query: {
+      key,
+      proj_key: route.query.proj_key
+    }
+  })
+}
+
+</script>
+
+<style scoped lang="less">
+.global-loading {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+}
+:depp(el-main) {
+  padding: 0%;
+}
+</style>

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

@@ -0,0 +1,46 @@
+import boot from '$elpisPage/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 siderRouters = [
+  {
+    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/sider-view/sider-view.vue'),
+  children: siderRouters
+})
+
+// 业务扩展路由
+if(typeof businessDashboardRouterConfig === "function"){
+  businessDashboardRouterConfig({ 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,5 @@
+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 = (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;
+      // 如果菜单项的 key 对应的值等于搜索值，返回该菜单项
+      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.subMenu.length > 0) {
+      firstMenuItem = findFirstMenuItem(firstMenuItem.subMenu);
+    }
+    return firstMenuItem; 
+  }
+
+
+  return { menuList, setMenuList, findMenuItem, findFirstMenuItem }
+})

package/app/pages/store/project.js

@@ -0,0 +1,13 @@
+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,144 @@
+<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" />
+        <!-- 右上方 设置区域 -->
+        <el-row
+          type="flex"
+          align="middle"
+          justify="end"
+          class="setting-panel"
+        >
+          <!-- 插槽： 设置区域 -->
+          <slot name="setting-content" />
+          <img 
+            src="./asserts/avatar.png"
+            class="avatar"
+          >
+          <el-dropdown @command="handleUserCommand">
+            <span class="username">
+              {{ 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-container">
+      <!-- 插槽: 外部扩展区域 -->
+      <slot name="main-content" />
+    </el-main>
+  </el-container>
+</template>
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
+const userName = ref('小吴')
+const handleUserCommand = function(event) {
+  console.log(event)
+ }
+</script>
+
+<style lang="less">
+// 外层容器
+.header-container {
+  height: 100%;
+  min-width: 1000px;
+  overflow: hidden;
+
+  // 顶栏容器
+  .header {
+    max-height: 120px;
+    border-bottom: 1px solid #e8e8e8;
+    // background-color: #e8e8e8;
+    // 左上方title
+    .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;
+      width: 180px;
+      min-width: 180px;
+      
+      .avatar {
+        margin-right: 10px;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+      }
+      
+      .username {
+        font-size: 15px;
+        font-weight: 500;
+        cursor: pointer;
+        height: 60px;
+        line-height: 60px;
+        outline: none;
+      }
+    }
+  }
+  
+  // 主要区域容器
+  // .main-container{}
+}
+
+:deep(.el-header) {
+  padding: 0;
+}
+</style>