@james-zhang/elpis 1.0.0

package/app/middleware/error-handler.js

@@ -0,0 +1,36 @@
+/**
+ * 运行时异常错误处理，兜底所有异常
+ * @param {object} app koa 应用实例
+ * @returns 中间件函数  
+ */
+module.exports=(app)=>{
+  return async (ctx,next)=>{
+    try{
+      await next()
+    }catch(err){
+      //异常处理
+      const {status,message,detail}=err
+
+      app.logger.info(JSON.stringify(err))
+      app.logger.error('[--exception--]:',err) //[--exception--]方便日志检索
+      app.logger.error('[--exception--]:',status,message,detail)
+
+      //用户访问一个目前不存在的页面
+      if(message && message.indexOf('template not found')>-1){
+        //页面重定向
+        ctx.status=302 //临时重定向，不用301因为用户可能会因为缓存即使页面上线依然重定向
+        ctx.redirect(`${app.options?.homePage || '/'}`)
+        return
+      }
+
+      const resBody={
+        code:50000,
+        message:"网络异常 请稍后重试",
+        success:false,
+      }
+
+      ctx.status=200
+      ctx.body=resBody
+    }
+  }
+}

package/app/middleware/project-handler.js

@@ -0,0 +1,26 @@
+/**
+ * 处理项目相关内容中间件
+ */
+module.exports=(app)=>{
+  return async (ctx,next)=>{
+      //只对业务API进行proj_key处理
+    if (!ctx.path.startsWith('/api/proj/')){
+      return await next();
+    }
+
+    //获取proj_key
+    const {proj_key:projKey} = ctx.request.headers;
+    if (!projKey){
+      ctx.status=200
+      ctx.body={
+        success:false,
+        code:446,
+        msg:'proj_key不能为空'
+      }
+      return
+    }
+
+    ctx.projKey=projKey;
+    await next();
+  }
+}

package/app/middleware.js

@@ -0,0 +1,69 @@
+const path=require('path')  
+const http=require('http')
+
+module.exports=(app)=>{
+  //开发环境代理
+  console.log('[dev-proxy] isLocal:',app.env.isLocal(),'_ENV:',JSON.stringify(process.env._ENV),'fn:',app.env.isLocal.toString())
+  if(app.env.isLocal()){
+    //主应用中添加代理中间件，将 /public/dist/dev/ 请求转发到 webpack dev server（端口9002）
+    app.use(async(ctx,next)=>{
+      if(ctx.path.startsWith('/public/dist/dev/')){
+        ctx.body=await new Promise((resolve,reject)=>{
+          const req=http.request({
+            hostname:'127.0.0.1',
+            port:9002,
+            path:ctx.path,
+            method:ctx.method,
+            headers:ctx.headers,
+          },(res)=>{
+            ctx.status=res.statusCode
+            Object.keys(res.headers).forEach(key=>{
+              ctx.set(key,res.headers[key])
+            })
+            let data=[]
+            res.on('data',chunk=>data.push(chunk))
+            res.on('end',()=>resolve(Buffer.concat(data)))
+          })
+          req.on('error',reject)
+          req.end()
+        })
+        return
+      }
+      await next()
+    })
+  }
+
+  //静态文件服务
+  const koaStatic=require('koa-static')
+  app.use(koaStatic(path.resolve(process.cwd(),'./app/public')))
+
+  //模版渲染引擎
+  const koaNunjucks=require('koa-nunjucks-2')
+  app.use(koaNunjucks({
+    ext:'tpl',
+    path:path.resolve(process.cwd(),'./app/public'),
+    nunjucksConfig:{
+      trimBlocks:true,
+      noCache:app.env.isLocal(),//本地开发禁用模板缓存，确保模板改动即时生效
+    }
+  }))
+
+  //引入ctx.body解析中间件
+  const bodyParser = require('koa-bodyparser')
+  app.use(bodyParser({
+    formLimit:'1000mb',
+    enableTypes:['json','form','text'],
+    methods:['POST','PUT','PATCH','DELETE'],
+  }))
+
+  //引入（异常捕获）错误处理中间件
+  app.use(app.middlewares.errorHandler)
+
+  //引入API签名验证中间件
+  app.use(app.middlewares.apiSignVerify)
+  //引入API参数验证中间件
+  app.use(app.middlewares.apiParamsVerify)
+  //引入项目处理中间件
+  app.use(app.middlewares.projectHandler)
+}
+

package/app/pages/asserts/custom.css

@@ -0,0 +1,10 @@
+html,body{
+  height: 100%;
+}
+#root{
+  height: 100%;
+}
+input:-webkit-autofill{
+  /*覆盖自动填充背景颜色*/
+  -webkit-box-shadow: 0 0 0px 1000px #121212 inset
+}

package/app/pages/boot.js

@@ -0,0 +1,44 @@
+import { createApp } from "vue";
+
+//引入element-plus组件库
+import ElementPlus from 'element-plus'
+import 'element-plus/theme-chalk/index.css'
+  
+import './asserts/custom.css'
+import pinia from '$elpisStore'
+import {createRouter,createWebHistory} from 'vue-router'
+/*
+ * Vue 页面主入口，用于启动vue
+ * @param pageComponent vue入口组件
+ * @param routes 路由列表
+ * @param libs 页面依赖的第三方包
+ */
+export default (pageComponent, options = {})=>{
+    const {routes, libs}=options
+    const app=createApp(pageComponent)
+    app.use(ElementPlus)
+    app.use(pinia)
+
+    //引入页面依赖的第三方包
+    if(libs && libs.length){
+      for(let i=0;i<libs.length;++i){
+        app.use(libs[i])
+      }
+    }
+
+    if(routes && routes.length){
+      //页面路由
+      const router=createRouter({
+        history:createWebHistory(), //采用history模式
+        routes,
+      })
+      app.use(router)
+      router.isReady().then(()=>{
+        app.mount('#root')
+      })
+    } else {
+      //没有路由时直接挂载
+      app.mount('#root')
+    }
+
+}

package/app/pages/common/curl.js

@@ -0,0 +1,76 @@
+import Axios from "axios";
+import md5 from "md5"; 
+import { ElMessage } from "element-plus";
+
+/**
+ * 前端封装curl命令
+ * @param options 请求参数
+ */
+const curl=({
+  url,
+  method = 'post',
+  headers = {},
+  query = {},
+  data = {},
+  responseType = 'json',
+  timeout = 60000,
+  errorMessage="网络异常",
+})=>{
+  //接口签名处理（根据实际情况添加）
+  const signKey ='fai3ihihfi43go53gjo53g53'
+  const st = Date.now()
+
+  const dtoHeaders = {
+    ...headers,
+    s_t:st,
+    s_sign: md5(`${signKey}_${st}`)
+  }
+  if(url.indexOf('/api/proj/')>-1 && window.projKey){
+    dtoHeaders.proj_key = window.projKey
+  }
+
+  //构造请求参数（把参数转换为 axios 参数）
+  const ajaxSetting = {
+    url,
+    method,
+    params:query,
+    data,
+    responseType,
+    timeout,
+    headers:dtoHeaders
+  }
+  return Axios.request(ajaxSetting).then(res=>{
+    const resData = res.data
+
+    //后端API返回格式
+    const {success,message,code} = resData
+    if(!success){
+      if(code===442){
+        ElMessage.error("请求参数错误")
+      }else if(code===445){
+        ElMessage.error("请求不合法")
+      }else if(code===446){
+        ElMessage.error("缺少项目必要参数")
+      }else if(code === 50000){
+        ElMessage.error(message)
+      }else{
+        ElMessage.error(errorMessage)
+      }
+      return Promise.resolve({success,message,code})
+    }
+
+    //成功
+    const {data,metadata} = resData
+    return Promise.resolve({success,data,metaData:metadata})
+  }).catch(err=>{
+    const {message} = err
+    if(message.match(/timeout/)){
+      return Promise.resolve({
+        message:'请求超时',
+        code:504,
+      })
+    }
+    return Promise.resolve (errorMessage)
+  })
+}
+export default curl

package/app/pages/common/utils.js

@@ -0,0 +1,2 @@
+const utils={}
+export default utils

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

@@ -0,0 +1,19 @@
+<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" :menuItem="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'])
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,131 @@
+<template>
+  <header-container :title="projName">
+    <template #menu-content>
+     <!-- 根据menuStore.menuList渲染菜单 -->
+      <el-menu
+      :default-active="activeKey"
+      :ellipsis="false"
+      mode="horizontal"
+      @select="onMenuSelect"
+      >
+        <template v-for="item in menuStore.menuList" >
+          <sub-menu v-if="item.subMenu && item.subMenu.length > 0" :menu-item="item" :key="'sub-menu-'+item.key" />
+          <el-menu-item v-else :index="item.key" :key="'menu-item-'+item.key">{{ item.name }}</el-menu-item>
+        </template>
+      </el-menu>
+    </template>
+      
+    <template #setting-content>
+      <!-- 根据projectStore.projectList渲染项目列表  -->
+       <el-dropdown @command="handleProjectCommand">
+        <span class="project-list">
+          {{ projName }}
+          <el-icon v-if="projectStore.projectList.length>1" class="el-icon-right">
+            <ArrowDown />
+          </el-icon>
+        </span>
+        <template v-if="projectStore.projectList.length >  1" #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item
+              v-for="item in projectStore.projectList"
+              :key="item.key"
+              :command="item.key"
+              :disabled="item.name === projName"
+            >
+              {{ item.name }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+       </el-dropdown>
+    </template>
+    <template #main-content>
+      <slot name="main-content" ></slot>
+    </template>
+   </header-container>
+</template>
+
+<script setup>
+import { ref,watch,onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { ArrowDown } from '@element-plus/icons-vue';
+import HeaderContainer from '$elpisWidgets/header-container/header-container.vue';
+import SubMenu from '$elpisPages/dashboard/complex-view/header-view/complex-view/sub-menu/sub-menu.vue';
+import { useMenuStore } from '$elpisStore/menu';
+import { useProjectStore } from '$elpisStore/project';
+
+const route = useRoute();
+const projectStore = useProjectStore();
+const menuStore = useMenuStore();
+
+
+const emit = defineEmits(['menu-select'])
+
+defineProps({
+  projName: String
+})
+
+const activeKey = ref('');
+
+const setActiveKey=function(){
+  const menuItem=menuStore.findMenuItem({
+    key:'key',
+    value:route.query.key
+  })
+  activeKey.value=menuItem?.key
+}
+
+watch(()=>route.query.key,()=>{
+  setActiveKey()
+})
+watch(()=>menuStore.menuList,()=>{
+  setActiveKey()
+},{deep:true})
+onMounted(()=>{
+  setActiveKey()
+})
+
+
+
+//菜单点击事件
+const onMenuSelect=function(menuKey) { 
+  const menuItem=menuStore.findMenuItem({
+    key:'key',
+    value:menuKey
+  })
+  if(!menuItem){
+    console.warn('未找到菜单项', menuKey)
+    return
+  }
+  emit('menu-select',menuItem)
+}
+
+const handleProjectCommand=function(event) {
+  const projectItem=projectStore.projectList.find(item=>{
+    return item.key === event
+  })
+  if(!projectItem || !projectItem.homePage){
+    return
+  }
+  const {host} = window.location
+  window.location.replace(`http://${host}/view/dashboard${projectItem.homePage}`)
+}
+
+
+
+
+</script>
+
+<style lang="less" scoped>
+.project-list {
+  margin-right: 20px;
+  cursor: pointer;
+  color:var(--el-color-primary);
+  display: flex;
+  align-items: center;
+  outline: none;
+}
+:deep(.el-menu-horizontal .el-menu) {
+  border-bottom: 0;
+}
+</style>
+  

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

@@ -0,0 +1,29 @@
+<template>
+  <iframe :src="path" class="iframe"></iframe>
+</template>
+<script setup>
+import { ref, watchEffect } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMenuStore } from '$elpisStore/menu';
+
+const route = useRoute();
+const menuStore = useMenuStore();
+const path = ref('');
+
+watchEffect(() => {
+  const { key, sider_key: siderKey } = route.query;
+  const menuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: key ?? siderKey,
+  });
+  path.value = menuItem?.iframeConfig?.path || '';
+});
+</script>
+
+<style lang="less" scoped>
+.iframe{
+  border:0;
+  width: 100%;
+  height: 100%;
+}
+</style>

package/app/pages/dashboard/complex-view/schema-view/complex-view/search-pannel/search-pannel.vue

@@ -0,0 +1,36 @@
+<template>
+  <el-card class="search-panel">
+    <SchemaSearchBar
+      :schema="SearchSchema"
+      @search="onSearch"
+      @reset="onReset"
+      @load="onLoad"
+    />
+  </el-card>
+</template>
+<script setup>
+import {inject,ref,computed} from 'vue'
+import SchemaSearchBar from '$elpisWidgets/schema-search-bar/schema-search-bar.vue'
+const schemaViewData=inject('schemaViewData',{})
+const SearchSchema = computed(() => schemaViewData.SearchSchema?.value ?? {})
+
+const emit=defineEmits(['search','reset','load'])
+
+const onSearch=(SearchValObj)=>{
+  emit('search',SearchValObj)
+}
+const onReset=()=>{
+  emit('reset')
+}
+const onLoad=(SearchValObj)=>{
+  emit('load',SearchValObj)
+}
+</script>
+<style lang="less" scoped>
+.search-panel{
+  margin:10px;
+}
+:deep(.el-card__body){
+  padding-bottom: 2px;
+}
+</style>

package/app/pages/dashboard/complex-view/schema-view/complex-view/table-pannel/table-pannel.vue

@@ -0,0 +1,125 @@
+<template>
+  <el-card class="table-panel">
+    <!-- operation-panel -->
+     <el-row
+      v-if="tableConfig?.headerButtons?.length > 0"
+      justify="end"
+      class="operation-panel"
+     >
+       <el-button
+        v-for="item in tableConfig?.headerButtons"
+        v-bind="item"
+        :key="item.eventKey"
+        @click="operationHandler({btnConfig:item})"
+       >
+        {{item.label}}
+       </el-button>
+     </el-row>
+
+     <!-- schema-table(组件widget) -->
+     <schema-table
+     ref="schemaTableRef"
+      :schema="tableSchema"
+      :api="api"
+      :apiParams="apiParamsRef"
+      :buttons="tableConfig?.rowButtons ?? []"
+      @operate="operationHandler"
+    />
+   </el-card>
+</template>
+<script setup>
+import { ref, onMounted, watch,inject,computed } from 'vue'
+import {ElMessageBox,ElNotification} from 'element-plus'
+import $curl from '$elpisCommon/curl.js'
+import SchemaTable from '$elpisWidgets/schema-table/schema-table.vue'
+
+const emit = defineEmits(['operate'])
+
+const schemaViewData=inject('schemaViewData',{})
+
+const api = computed(() => schemaViewData.api?.value ?? '')
+const apiParamsRef = schemaViewData.apiParams ?? ref({})
+const tableSchema = computed(() => schemaViewData.tableSchema?.value ?? {})
+const tableConfig = computed(() => schemaViewData.tableConfig?.value)
+
+const schemaTableRef = ref(null)
+
+const EventHandlerMap={
+  remove:removeData,
+}
+const operationHandler=({btnConfig,rowData})=>{
+  const {eventKey}=btnConfig
+  if(EventHandlerMap[eventKey]){
+    EventHandlerMap[eventKey]({btnConfig,rowData})
+  }else{
+    emit('operate',{btnConfig,rowData})
+  }
+}
+function removeData({btnConfig,rowData}){
+  const {eventOption}=btnConfig
+  if(!eventOption?.params){
+    return
+  }
+  const {params}=eventOption
+  const removeKey=Object.keys(params)[0]
+
+  let removeValue
+  const removeValueList = params[removeKey].split('::')
+  if(removeValueList[0]==='schema' && removeValueList[1]){
+    removeValue=rowData[removeValueList[1]]
+  }
+  ElMessageBox.confirm(`确认删除${removeKey} 为:${removeValue} 数据吗？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    schemaTableRef.value.showLoading()
+    const res=await $curl({
+      url:api.value,
+      method:'delete',
+      data:{
+        [removeKey]:removeValue,
+      },
+      errorMessages:'删除失败'
+    })
+    schemaTableRef.value.hideLoading()
+
+    if(!res || !res.data || !res.success){
+      return
+    }
+    ElNotification({
+      title:'删除成功',
+      message:'删除成功',
+      type:'success',
+    })
+    await initTableData()
+  });
+
+}
+
+const initTableData=async ()=>{
+  await schemaTableRef.value.initData()
+}
+
+const loadTableData=async ()=>{
+  await schemaTableRef.value.loadTableData()
+}
+
+defineExpose({
+  loadTableData,
+})
+</script>
+<style lang="less" scoped>
+.table-panel{
+  height: 100%;
+  width: 100%;
+  .operation-panel{
+    margin-bottom: 10px;
+  }
+}
+:deep(.el-card__body){
+  height: 98%;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/app/pages/dashboard/complex-view/schema-view/components/component-config.js

@@ -0,0 +1,19 @@
+import CreateForm from './create-form/create-form.vue'
+import EditForm from './edit-form/edit-form.vue'
+import DetailPanel from './detail-panel/detail-panel.vue'
+
+//业务扩展component配置
+import BusinessComponentConfig from '$businessSchemaViewComponentConfig'
+
+const ComponentConfig={
+  createForm:{
+    component:CreateForm
+  },
+  editForm:{
+    component:EditForm
+  },
+  detailPanel:{
+    component:DetailPanel
+  }
+}
+export default {...ComponentConfig,...BusinessComponentConfig}