@james-zhang/elpis 1.0.0

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

@@ -0,0 +1,138 @@
+<template>
+  <sider-container>
+    <!-- 侧边菜单插槽 -->
+    <template #menu-content>
+      <el-menu
+        :default-active="activeKey"
+        :ellipsis="false"
+        @select="onMenuSelect"
+      >
+        <!-- 循环渲染菜单项 -->
+        <template v-for="item in menuList">
+          <sub-menu
+            v-if="item.subMenu && item.subMenu.length > 0"
+            :menu-item="item"
+            :key="'sub-' + item.key"
+          />
+          <el-menu-item v-else :key="'item-' + 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';
+import SubMenu from '$elpisPages/dashboard/complex-view/sider-view/complex-view/sub-menu/sub-menu.vue';
+
+const router = useRouter();
+const route = useRoute();
+const menuStore = useMenuStore();
+
+// 当前激活菜单key
+const activeKey = ref('');
+
+const setActiveKey = function () {
+  let siderMenuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: route.query.sider_key
+  });
+
+  // 如果首次加载 sider-view，用户未选中左侧菜单，默认高亮第一个菜单但不跳转
+  if (!siderMenuItem) {
+    const hMenuItem = menuStore.findMenuItem({
+      key: 'key',
+      value: route.query.key
+    });
+    if (hMenuItem && hMenuItem.siderConfig && hMenuItem.siderConfig.menu) {
+      const siderMenuList = hMenuItem.siderConfig.menu || [];
+      siderMenuItem = menuStore.findFirstMenu(siderMenuList);
+    }
+  }
+
+  if (siderMenuItem) {
+    activeKey.value = siderMenuItem.key;
+  }
+};
+
+// 菜单数据源
+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 || [];
+  } else {
+    menuList.value = [];
+  }
+};
+
+watch(() => route.query.key, () => {
+  setMenuList();
+  setActiveKey();
+});
+
+watch(() => menuStore.menuList, () => {
+  setMenuList();
+  setActiveKey();
+}, { deep: true });
+
+onMounted(() => {
+  setMenuList();
+  setActiveKey();
+});
+
+// 菜单选中跳转事件
+const onMenuSelect = (menuKey) => {
+  handleMenuSelect(menuKey);
+};
+
+const handleMenuSelect = function (menuKey) {
+  const menuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: menuKey
+  });
+  if (!menuItem) {
+    console.warn('未找到菜单项', menuKey);
+    return;
+  }
+
+  const { moduleType, key, customConfig } = menuItem;
+  // 如果是当前页面不处理
+  if (key === route.query.sider_key) {
+    return;
+  }
+
+  // 侧边栏菜单项只在 /sider 子路由下切换，避免跳转到不存在的外部 route
+  const pathMap = {
+    sider: '/sider',
+    iframe: '/sider/iframe',
+    schema: '/sider/schema',
+    custom: '/sider'
+  };
+
+  router.push({
+    path: '/view/dashboard'+pathMap[moduleType] || '/view/dashboard/sider',
+    query: {
+      key: route.query.key,
+      sider_key: key,
+      proj_key: route.query.proj_key,
+      ...(moduleType === 'custom' && customConfig?.path ? { custom_path: customConfig.path } : {})
+    }
+  });
+};
+</script>
+
+<style lang="less" scoped></style>

package/app/pages/dashboard/dashboard.vue

@@ -0,0 +1,121 @@
+<template>
+  <el-container class="dashboard-wrapper" :locale="zhCn"> 
+    <header-view :proj-name="projName" @menu-select="onMenuSelect">
+      <template #main-content>
+        <router-view></router-view>
+      </template>
+    </header-view>
+  </el-container>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } 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';
+import { useProjectStore } from '$elpisStore/project';
+
+
+const router = useRouter();
+const route = useRoute();
+const projectStore = useProjectStore();
+const menuStore = useMenuStore();
+const projName = ref('');
+
+//组件挂载时，请求项目列表和菜单列表
+onMounted(async () => {
+  // 如果 URL 没有 proj_key，先加载项目列表，取第一个项目作为默认值
+  if (!route.query.proj_key) {
+    await getProjectList();
+    if (projectStore.projectList.length > 0) {
+      const defaultProject = projectStore.projectList[0];
+      const homePage = defaultProject.homePage || '/todo';
+      const [homePath, queryStr = ''] = homePage.split('?');
+      const params = new URLSearchParams(queryStr);
+      params.set('proj_key', defaultProject.key);
+      await router.replace({
+        path: homePath,
+        query: Object.fromEntries(params)
+      });
+    } else {
+      console.warn('未获取到项目列表，无法加载 dashboard');
+      return;
+    }
+  }
+  await getProjectList();
+  await getProjectConfig();
+})
+
+//请求 /api/project/list接口，并缓存到 projectStore中
+async function getProjectList() {
+  const res = await $curl({
+    method: 'get', 
+    url: '/api/project/list',
+    query:{
+      //动态获取当前项目key，暂时写死
+      proj_key:route.query.proj_key
+    }
+  });
+  if(!res || !res.success || !res.data) {
+    return;
+  }
+  projectStore.setProjectList(res.data);
+}
+//请求 /api/project接口，并缓存到 menuStore中
+async function getProjectConfig() {
+  const res = await $curl({
+    method: 'get', 
+    url: '/api/project',
+    query:{
+      //动态获取当前项目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=function(menuItem) {
+  if(!menuItem){
+    return;
+  }
+  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: key,
+      proj_key:route.query.proj_key
+    }
+  })
+}
+  
+
+
+</script>
+
+<style lang="less" scoped>
+.dashboard-wrapper {
+  height: 100%;
+}
+:deep(.el-main){
+  padding: 0;
+}
+</style> 
+ 

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

@@ -0,0 +1,52 @@
+import boot from "$elpisPages/boot";
+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')
+    },
+    //custom 自定义路由
+    {
+      path: 'todo',
+      component: () => import('./todo/todo.vue')
+    }
+]
+
+//业务拓展路由
+if(typeof businessDashboardRouterConfig === 'function'){
+  businessDashboardRouterConfig({routes,siderRoutes})
+}
+
+
+//侧边栏菜单路由
+routes.push({
+  path: '/view/dashboard/sider',
+  component: () => import('./complex-view/sider-view/sider-view.vue'),
+  children: siderRoutes
+})
+//侧边栏兜底策略·默认路由
+routes.push({
+  path: '/view/dashboard/sider/:chapters+',
+  component: () => import('./complex-view/iframe-view/iframe-view.vue')
+})
+
+boot(Dashboard, {
+  routes
+})

package/app/pages/dashboard/router.js

@@ -0,0 +1,3 @@
+module.exports = () => {
+  // 默认空实现：业务项目未提供 dashboard 路由扩展时不注入额外路由
+}

package/app/pages/dashboard/todo/todo.vue

@@ -0,0 +1,10 @@
+<template>
+  <h1>待开发</h1> 
+</template>
+<script>
+
+</script>
+
+<style lang="less" scoped> 
+
+</style>

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,71 @@
+ 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[key]){
+        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 findFirstMenu=function(mList=menuList.value){
+    if(!mList || !mList[0]){
+      return
+    }
+    let firstMenuItem=mList[0]
+    if(firstMenuItem.subMenu){
+      firstMenuItem=findFirstMenu(firstMenuItem.subMenu)
+    }
+    return firstMenuItem
+  }
+
+
+  return {
+    menuList,
+    setMenuList,
+    findMenuItem,
+    findFirstMenu
+  }
+ })

package/app/pages/store/project.js

@@ -0,0 +1,15 @@
+ 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,118 @@
+<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'
+
+const userName = ref('张三')
+
+const handleUserCommand = (command) => {
+  if (command === 'logout') {
+    // 退出登录逻辑
+  }
+}
+ 
+defineProps({
+  title: {
+    type: String,
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.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 {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+:deep(.el-header) {
+  padding: 0;
+}
+</style>

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

@@ -0,0 +1,165 @@
+<template>
+  <!-- 整行容器：标签 + 输入框左右布局 -->
+  <el-row
+    type="flex"
+    align="middle"
+    class="form-item"
+  >
+    <!-- 左侧标签区域 -->
+    <el-row
+      class="item-label"
+      justify="end"
+    >
+      <!-- 必填红色星号：schema里required为true才展示 -->
+      <el-row
+        v-if="schema.option?.required"
+        type="flex"
+        class="required"
+      >
+        *
+      </el-row>
+      <!-- 字段中文名称 -->
+      {{ schema.label }}
+    </el-row>
+
+    <!-- 右侧输入框区域 -->
+    <el-row class="item-value">
+      <el-input
+        v-bind="schema.option"
+        v-model="dtoValue"
+        :placeholder="placeholder"
+        class="component"
+        :class="validTips?'valid-border':''"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+      <div
+        v-if="validTips"
+        class="valid-tips"
+      >
+        {{ validTips }}
+      </div>
+    </el-row>
+  </el-row>
+</template>
+<script setup>
+import { ref, toRefs, watch, inject, onMounted } from 'vue'
+const ajv = inject('ajv')
+
+// 接收父组件传入参数
+const props = defineProps({
+  schemaKey: String,   // 当前字段key（属性名，如productName）
+  schema: Object,      // 当前字段完整schema配置
+  model: Object,       // 当前字段的表单值
+})
+
+// 解构props，toRefs保证响应式不丢失
+const schemaKey = props.schemaKey
+const { schema, model } = toRefs(props)
+
+const name=ref('input')
+const dtoValue=ref()
+const placeholder=ref('')
+const validTips=ref(null) // 校验错误信息
+
+const initData=()=>{
+  dtoValue.value=model.value ?? schema.value.option?.default
+  validTips.value=null
+
+  const {
+    minLength,
+    maxLength,
+    pattern,
+  }=schema.value
+
+  const ruleList=[]
+  if(schema.value.option?.placeholder){
+    ruleList.push(schema.value.option.placeholder)
+  }else if(minLength){
+    ruleList.push(`最小长度应为 ${minLength}`)
+  }
+  if(maxLength){
+    ruleList.push(`最大长度应为 ${maxLength}`)
+  }
+  if(pattern){
+    ruleList.push(`格式不正确；${pattern}`)
+  }
+  placeholder.value=ruleList.join('|')
+}
+onMounted(()=>{
+  initData()
+})
+watch([schema,model],()=>{
+  initData()
+})
+// 对外暴露：表单校验方法
+const validate = () => {
+  // 清空上一轮校验错误提示
+  validTips.value = null;
+  // 解构取出schema里的type字段
+  const { type } = schema.value;
+
+  // 1、必填项校验
+  if (schema.value.option?.required && !dtoValue.value) {
+    validTips.value = '不能为空';
+    return false; // 校验失败，终止后续逻辑
+  }
+
+  // 2、输入有内容时，使用AJV库校验JSON Schema规则
+  if (dtoValue.value) {
+    // 编译当前字段的schema校验规则，生成校验函数
+    const validate = ajv.compile(schema.value);
+    // 执行校验：传入当前输入值
+    const valid = validate(dtoValue.value);
+
+    // 校验不通过 并且 存在错误详情
+    if (!valid && validate.errors && validate.errors[0]) {
+      // 取出第一条错误的关键字、参数
+      const { keyword, params } = validate.errors[0];
+
+      // 根据不同错误类型，自定义中文提示文案（把AJV默认英文提示转为中文）
+      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 onFocus = () => {
+  validTips.value = null;
+}
+// 失去焦点时，校验当前输入值
+const onBlur = () => {
+  validate()
+}
+// 对外暴露：获取当前组件表单值
+const getValue = () => {
+  return dtoValue.value !== undefined ? {
+    [schemaKey]:dtoValue.value
+  }:{}
+}
+
+// 暴露方法给上层表单组件调用（全局表单提交校验、取值）
+defineExpose({
+  name,
+  validate,
+  getValue
+})
+</script>
+
+<style lang="less">
+</style>