@xujingquan/elpis 1.0.0

package/app/middleware/error-handler.js

@@ -0,0 +1,33 @@
+/**
+ * 运行时异常错误处理，兜底所有异常
+ * @param {[object]} app koa 实例
+ */
+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);
+      app.logger.error('[-- exception --]:', status, message, detail);
+
+      if (message && message.indexOf('template not found') > -1) {
+        // 页面重定向
+        ctx.status = 302; // 302临时重定向  301永久吃东西
+        ctx.redirect(`${app?.options?.homePage ?? '/'}`);
+        return;
+      }
+
+      const resBody = {
+        success: false,
+        code: 50000,
+        message: '网络异常，请稍后重试',
+      };
+      ctx.status = 200;
+      ctx.body = resBody;
+    }
+  };
+};

package/app/middleware/project-handler.js

@@ -0,0 +1,30 @@
+/**
+ * proejctHandler 相关项目处理内容
+ */
+
+module.exports = (app) => {
+  return async (ctx, next) => {
+    // 只对 业务 API 进行 proj_key 处理
+    if (ctx.path.indexOf('/api/proj/') < 0) {
+      return await next();
+    }
+
+    // 获取 projKey
+    const { proj_key: projKey } = ctx.request.headers;
+
+    if (!projKey) {
+      ctx.status = 200;
+      ctx.body = {
+        success: false,
+        message: 'proj_key is not found',
+        code: 446,
+      };
+
+      return;
+    }
+
+    ctx.projKey = projKey;
+
+    await next();
+  };
+};

package/app/middleware.js

@@ -0,0 +1,45 @@
+const path = require('path');
+/**
+ * 用户自定义的全局 middleware
+ * */
+module.exports = (app) => {
+  // 资源目录
+  const publicPath = path.resolve(process.cwd(), './app/public');
+  // 配置静态根目录
+  const KoaStatic = require('koa-static');
+  app.use(KoaStatic(publicPath, {}));
+
+  // 模版渲染引擎
+  const koaNunjucks = require('koa-nunjucks-2');
+  app.use(
+    koaNunjucks({
+      ext: 'tpl', // 后续需要变量注入，所以使用 tpl
+      path: publicPath,
+      nunjucksConfig: {
+        noCache: true,
+        trimBlocks: true, // 去掉多余行
+      },
+    })
+  );
+
+  // 引入 ctx.body 解析中间件
+  const bodyParser = require('koa-bodyparser');
+  app.use(
+    bodyParser({
+      formLimit: '1000mb',
+      enableTypes: ['form', 'json', 'text'],
+    })
+  );
+
+  // 引入异常捕获中间件
+  app.use(app.middlewares.errorHandler);
+
+  // 引入签名合法性校验
+  app.use(app.middlewares.apiSignVeriyf);
+
+  // 引入 API 参数校验
+  app.use(app.middlewares.apiParamsVerify);
+
+  // 引入项目处理中间件
+  app.use(app.middlewares.projectHandler);
+};

package/app/pages/asserts/custom.css

@@ -0,0 +1,13 @@
+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,56 @@
+import { createApp } from 'vue';
+
+import ElementPlus from 'element-plus';
+import 'element-plus/theme-chalk/index.css';
+import 'element-plus/theme-chalk/dark/css-vars.css';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+
+import './asserts/custom.css';
+
+import { createWebHistory, createRouter } from 'vue-router';
+
+import pinia from '$elpisStore/index';
+
+/**
+ * vue 页面主入口，用于启动 vue
+ * @param pageComponent vue 入口组件
+ * @param routes 路由列表
+ * @param libs 页面依赖的第三方包
+ */
+
+export default (pageComponent, { routes = [], libs = [] } = {}) => {
+  // 创建应用实例
+  const app = createApp(pageComponent);
+
+  // 应用element-ui
+  app.use(ElementPlus, {
+    locale: zhCn,
+  });
+
+  // 引入 pinia
+  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(),
+      routes,
+    });
+    app.use(router);
+
+    // 等待路由
+    router.isReady().then(() => {
+      // 挂载应用（需要放在最后）
+      app.mount('#root');
+    });
+  } else {
+    app.mount('#root');
+  }
+};

package/app/pages/common/api/business-api.js

@@ -0,0 +1,19 @@
+import { request } from '../request';
+
+export function tableDataPort(options) {
+  const {
+    method = 'get',
+    url = '',
+    params = undefined,
+    data = undefined,
+    errorMessage = '',
+  } = options;
+
+  return request({
+    method,
+    url,
+    params,
+    data,
+    errorMessage,
+  });
+}

package/app/pages/common/api/project-api.js

@@ -0,0 +1,27 @@
+import { request } from '../request';
+
+export function projectModelList() {
+  return request({
+    method: 'get',
+    url: '/project/model_list',
+    errorMessage: '获取项目列表失败',
+  });
+}
+
+export function projectList(params) {
+  return request({
+    method: 'get',
+    url: '/project/list',
+    params,
+    errorMessage: '获取项目列表失败',
+  });
+}
+
+export function project(params) {
+  return request({
+    method: 'get',
+    url: '/project',
+    params,
+    errorMessage: '获取项目列表失败',
+  });
+}

package/app/pages/common/request.js

@@ -0,0 +1,119 @@
+import { ElMessage } from 'element-plus';
+const md5 = require('md5');
+
+/**
+ * 前端封装的 curl 方法
+ * @param {object} config 请求参数
+ */
+
+let baseURL = '';
+if (process.env.NODE_ENV === 'development') {
+  // 测服
+  baseURL = '/api';
+} else {
+  // 正式服
+  baseURL = '/api';
+}
+
+export function request(config) {
+  const {
+    url = '', // 请求地址
+    method = 'post', // 请求方法
+    headers = {}, // 请求头
+    params = {}, // url query
+    data = {}, // post body
+    responseType = 'json', // response data type
+    timeout = 6000, // timeout
+    errorMessage = '网络异常',
+  } = config;
+
+  // 构造请求参数（把参数转换为 axios 参数）
+  const ajaxString = {
+    baseURL,
+    url,
+    method,
+    params,
+    data,
+    responseType,
+    timeout,
+    headers: {
+      ...headers,
+    },
+  };
+
+  // 1.创建axios的实例
+  const instance = axios.create(ajaxString);
+
+  // 2.1.请求拦截
+  instance.interceptors.request.use(
+    (config) => {
+      // 设置签名
+      const signKey = 'da98fc11-295c-a64f-5b31-d6dc4055dd06';
+      const st = Date.now();
+      const signature = md5(`${signKey}_${st}`);
+      config.headers['s_t'] = st;
+      config.headers['s_sign'] = signature;
+
+      // 只对路由存在 /api/proj 做处理
+      if (url.indexOf('/proj/') > -1 && window.projKey) {
+        // HTML 模版注入的参数
+        config.headers['proj_key'] = window.projKey;
+      }
+
+      return config;
+    },
+    (err) => {
+      return Promise.reject(err.message);
+    }
+  );
+
+  // 2.2.响应拦截
+  instance.interceptors.response.use(
+    (res) => {
+      const resData = res.data || {};
+      // 后端 API 返回格式
+      const { success } = resData;
+
+      // 失败
+      if (!success) {
+        const { message, code } = resData;
+        switch (code) {
+          case 442:
+            ElMessage.error('请求参数异常');
+            break;
+          case 445:
+            ElMessage.error('请求不合法');
+            break;
+          case 446:
+            ElMessage.error('缺少项目必要参数');
+            break;
+          case 50000:
+            ElMessage.error(message);
+            break;
+          default:
+            ElMessage.error(errorMessage);
+            break;
+        }
+        console.error(message, '[API] message');
+        return Promise.reject({ success, code, message });
+      }
+
+      // 成功
+      const { data, metadata } = resData;
+      return Promise.resolve({ success, data, metadata });
+    },
+    (err) => {
+      const { message } = err;
+      if (message.match(/timeout/)) {
+        return Promise.reject({
+          message: 'Request Timeout',
+          code: 504,
+        });
+      }
+
+      return Promise.reject(err);
+    }
+  );
+  // 3.发送真正的网络请求
+  return instance(config);
+}

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,20 @@
+<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>
+defineProps({
+  menuItem: Object,
+});
+</script>
+
+<style lang="less" scoped></style>

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

@@ -0,0 +1,116 @@
+<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" />
+          <el-menu-item v-else :index="item.key">{{ item.name }}</el-menu-item>
+        </template>
+      </el-menu>
+    </template>
+    <template #setting-content>
+      <!-- 根据 projStore.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 { ArrowDown } from '@element-plus/icons-vue';
+import HeaderContainer from '$elpisWidgets/header-container/header-container.vue';
+import SubMenu from './complex-view/sub-menu/sub-menu.vue';
+
+import { ref, watch, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMenuStore } from '$elpisStore/menu';
+import { useProjectStore } from '$elpisStore/project';
+
+const emit = defineEmits(['menu-select']);
+defineProps({
+  projName: String,
+});
+
+const route = useRoute();
+const menuStore = useMenuStore();
+const projectStore = useProjectStore();
+
+const activeKey = ref('');
+watch(
+  [() => route.query.key, () => menuStore.menuList],
+  () => {
+    setActiveKey();
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  setActiveKey();
+});
+
+const setActiveKey = function () {
+  const menuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: route.query.key,
+  });
+  activeKey.value = menuItem?.key;
+};
+
+const onMenuSelect = function (menuKey) {
+  const menuItem = menuStore.findMenuItem({
+    key: 'key',
+    value: menuKey,
+  });
+  emit('menu-select', menuItem);
+};
+
+const handleProjectCommand = function (event) {
+  const projItem = projectStore.projectList?.find((item) => item.key === event);
+  if (!projItem || !projItem.homePage) return;
+  const { host } = window.location;
+
+  window.location.replace(`http://${host}/view/dashboard${projItem.homePage}`);
+};
+</script>
+
+<style lang="less" scoped>
+.project-list {
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  color: var(--el-color-primary);
+  outline: none;
+  cursor: pointer;
+}
+
+:deep(.el-menu--horizontal.el-menu) {
+  border-bottom: 1px solid #e8e8e8;
+}
+</style>

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

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

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

@@ -0,0 +1,37 @@
+<template>
+  <el-card class="search-panel">
+    <schema-search-bar :schema="searchSchema" @load="load" @search="search" @reset="reset" />
+  </el-card>
+</template>
+
+<script setup>
+import SchemaSearchBar from '$elpisWidgets/schema-search-bar/schema-search-bar.vue';
+
+import { inject } from 'vue';
+
+const { searchSchema } = inject('schemaViewData');
+
+const emits = defineEmits(['search']);
+
+const load = function (searchValObj) {
+  emits('search', searchValObj);
+};
+
+const search = function (searchValObj) {
+  emits('search', searchValObj);
+};
+
+const reset = function () {
+  emits('search', {});
+};
+</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-panel/table-panel.vue

@@ -0,0 +1,122 @@
+<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"
+        @click="operationHandler({ btnConfig: item })"
+        >{{ item.label }}</el-button
+      >
+    </el-row>
+    <!-- schema-table (组件 widget) -->
+    <schema-table
+      ref="schemaTableRef"
+      :schema="tableSchema"
+      :api="api"
+      :apiParams="apiParams"
+      :buttons="tableConfig?.rowButtons ?? []"
+      @operate="operationHandler"
+    />
+  </el-card>
+</template>
+
+<script setup>
+import SchemaTable from '$elpisWidgets/schema-table/schema-table.vue';
+
+import { ref, inject } from 'vue';
+import { tableDataPort } from '$elpisCommon/api/business-api';
+import { ElMessageBox, ElNotification } from 'element-plus';
+
+const emits = defineEmits(['operate']);
+
+const { api, apiParams, tableSchema, tableConfig } = inject('schemaViewData');
+const schemaTableRef = ref(null);
+
+const removeData = async function ({ 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} 的数据吗？`, 'Warning', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(async () => {
+      schemaTableRef.value.showLoading();
+
+      const res = await tableDataPort({
+        method: 'delete',
+        url: api.value,
+        data: {
+          [removeKey]: removeValue,
+        },
+        errorMessage: '删除失败',
+      });
+
+      if (!res || !res.success || !res.data) return;
+
+      ElNotification({
+        title: '删除成功',
+        message: '删除成功',
+        type: 'success',
+      });
+
+      await schemaTableRef.value.loadTableData();
+    })
+    .finally(() => {
+      schemaTableRef.value.hideLoading();
+    });
+};
+
+const eventHandlerMap = {
+  remove: removeData,
+};
+const operationHandler = function ({ btnConfig, rowData }) {
+  const { eventKey } = btnConfig;
+  if (eventHandlerMap[eventKey]) {
+    eventHandlerMap[eventKey]({ btnConfig, rowData });
+  } else {
+    emits('operate', { btnConfig, rowData });
+  }
+};
+
+const initTableData = async function () {
+  await schemaTableRef.value.initData();
+};
+
+const loadTableData = async function () {
+  await schemaTableRef.value.loadTableData();
+};
+
+defineExpose({
+  initTableData,
+  loadTableData,
+});
+</script>
+
+<style lang="less" scoped>
+.table-panel {
+  flex: 1;
+  margin: 10px;
+
+  .operation-panel {
+    margin-bottom: 10px;
+  }
+}
+
+:deep(.el-card__body) {
+  display: flex;
+  flex-direction: column;
+  height: 98%;
+}
+</style>