@wanglindoc/elpis 1.0.0

package/app/middleware/error-handler.js

@@ -0,0 +1,41 @@
+/**
+ * 运行时异常错误处理，兜底所有异常
+ * @param {*} app
+ */
+module.exports = (app) => {
+  // 中间件通过app.use挂载，app.use需要传入一个函数，所以中间件需要返回一个函数
+  // 函数参数一个是ctx上下文。一个next函数，代表向下一个中间件传递
+  return async (ctx, next) => {
+    try {
+      await next();
+    } catch (error) {
+      // 异常处理
+      const { status, message, detail } = error;
+      app.logger.info(JSON.stringify(error));
+      app.logger.error("[-- exception --]:", error);
+      app.logger.error("[-- exception --]:", status, message, detail);
+
+      if (message && message.indexOf("template not found") > -1) {
+        // 页面重定向
+        // 301: 永久重定向
+        // 如果设置为 301，当用户访问到一个目前不存在的页面（page3）时，会重定向到设置的页面。
+        // 而且在后面如果用户的客户端没清缓存或服务端没重启的情况下，访问 page3 会一直被重定向到其他页面
+        // 但如果这个页面马上上线了且此用户拥有访问此页面的权限，用户访问却还是会重定向到其他页面，这不太现实。
+
+        // 302: 临时重定向
+        ctx.status = 302;
+        ctx.redirect(`${app.options?.homePage}`);
+        return;
+      }
+
+      const resBody = {
+        success: false,
+        code: 50000,
+        message: "网络异常 请稍候重试",
+      };
+
+      ctx.status = 200; // 逻辑异常，但 http 状态正常
+      ctx.body = resBody;
+    }
+  };
+};

package/app/middleware/project-handler.js

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

package/app/middleware.js

@@ -0,0 +1,42 @@
+const path = require("path");
+const { sep } = path;
+
+module.exports = (app) => {
+  // 配置静态根目录
+  const KoaStatic = require("koa-static");
+  app.use(KoaStatic(path.join(process.cwd(), `.${sep}app${sep}public`)));
+
+  // 模版渲染引擎
+  const koaNunjucks = require("koa-nunjucks-2");
+  app.use(
+    koaNunjucks({
+      ext: "tpl", // 不渲染html，以tpl作为文件结尾
+      path: path.join(process.cwd(), `.${sep}app${sep}public`),
+      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);
+
+  // 引入API签名校验中间件
+  app.use(app.middlewares.apiSignVerify);
+
+  // 引入接口参数校验中间件
+  app.use(app.middlewares.apiParamsVerify);
+
+  // 引入项目处理中间件
+  app.use(app.middlewares.projectHandler);
+};

package/app/pages/assets/custom.css

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

package/app/pages/boot.js

@@ -0,0 +1,51 @@
+// 入口启动文件
+import { createApp } from "vue";
+
+import "./assets/custom.css";
+
+import ElementUI from "element-plus";
+import "element-plus/theme-chalk/index.css";
+
+import pinia from "$elpisStore";
+
+import { createRouter, createWebHistory } from "vue-router";
+
+/**
+ * vue 页面主入口，用于启动 Vue
+ * @param pageComponent vue 入口组件
+ * @param routes 路由列表
+ * @param libs 页面独有的第三方依赖
+ */
+export default (pageComponent, { routes, libs } = {}) => {
+  const app = createApp(pageComponent);
+
+  // 引入element-plus组件
+  app.use(ElementUI);
+
+  // 引入状态管理
+  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,91 @@
+const md5 = require("md5");
+import { ElMessage } from "element-plus";
+import Axios from "axios";
+
+/**
+ * 前端封装的 curl 方法
+ * @param {*} param options 请求参数
+ * @returns
+ */
+const curl = ({
+  url, //请求地址
+  method = "post", // 请求方法
+  headers = {}, // 请求头
+  query = {}, // url query
+  data = {}, // post body
+  responseType = "json", // response data type
+  timeout = 60000, // 超时时长
+  errorMessage = "网络异常",
+}) => {
+  // 接口签名处理
+  const signKey = "ajflskjflaskdjfqoiwefjlaskdjflka";
+  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 axiosParams = {
+    url,
+    method,
+    params: query,
+    data,
+    responseType,
+    timeout,
+    headers: dtoHeaders,
+  };
+
+  return Axios.request(axiosParams)
+    .then((response) => {
+      const resData = response.data || {};
+
+      // 后端 API 返回格式
+      const { success } = resData;
+
+      // 失败情况
+      if (!success) {
+        const { message, code } = resData;
+
+        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);
+        }
+
+        console.error(message);
+
+        return Promise.resolve({ success, code, message });
+      }
+
+      // 成功情况
+      const { data, metadata } = resData;
+      return Promise.resolve({ success, data, metadata });
+    })
+    .catch((error) => {
+      const { message } = error;
+
+      if (message.match(/timeout/)) {
+        return Promise.resolve({
+          message: "Request Timeout",
+          code: 504,
+        });
+      }
+
+      return Promise.resolve(error);
+    });
+};
+
+export default curl;

package/app/pages/common/utils.js

@@ -0,0 +1,7 @@
+const utils = {
+  add() {
+    console.log("I am a Function!");
+  },
+};
+
+export default utils;

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

@@ -0,0 +1,18 @@
+<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"> </sub-menu>
+
+      <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,154 @@
+<template>
+  <header-container :title="projName">
+    <template #nemu-content>
+      <!-- 根据 menu-store 的 menuList 渲染 -->
+      <el-menu
+        mode="horizontal"
+        :default-active="activeKey"
+        :ellipsis="false"
+        @select="onMenuSelect"
+      >
+        <template v-for="item in menuStore.menuList">
+          <sub-menu
+            v-if="item.subMenu && item.subMenu.length > 0"
+            :menu-item="item"
+          >
+          </sub-menu>
+          <el-menu-item v-else :index="item.key">{{ item.name }}</el-menu-item>
+        </template>
+      </el-menu>
+    </template>
+
+    <template #setting-content>
+      <!-- 根据 project-store 的 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 { useMenuStore } from "$elpisStore/menu";
+import { useProjectStore } from "$elpisStore/project";
+import HeaderContainer from "$elpisWidgets/header-container/header-container.vue";
+import SubMenu from "./complex-view/sub-menu/sub-menu.vue";
+import { ArrowDown } from "@element-plus/icons-vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+defineProps({
+  projName: String,
+});
+
+const emits = defineEmits(["menu-select"]);
+
+const menuStore = useMenuStore();
+const projectStore = useProjectStore();
+
+const activeKey = ref("");
+
+watch(
+  () => route.query.key,
+  (val) => {
+    setActiveKey();
+  },
+);
+
+watch(
+  () => menuStore.menuList,
+  () => {
+    setActiveKey();
+  },
+  {
+    deep: true,
+  },
+);
+
+onMounted(() => {
+  setActiveKey();
+});
+
+/**
+ * 添加寻找步骤、考虑权限问题
+ * 判断用户传入的 key 是否在 menuList 中
+ * 而不是直接赋值给 activeKey
+ */
+const setActiveKey = function () {
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: route.query.key,
+  });
+  activeKey.value = menuItem?.key;
+};
+
+/**
+ * 菜单 select 事件
+ * @param menuKey
+ */
+const onMenuSelect = (menuKey) => {
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: menuKey,
+  });
+
+  emits("menu-select", menuItem);
+};
+
+const handleProjectCommand = (event) => {
+  const projectItem = projectStore.projectList.find(
+    (item) => item.key === event,
+  );
+
+  if (!projectItem || !projectItem.homePage) {
+    return;
+  }
+
+  // const { origin, pathname } = window.location;
+  // window.location.replace(`${origin}${pathname}#${projectItem.homePage}`);
+  // window.location.reload();
+
+  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;
+}
+</style>

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

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

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

@@ -0,0 +1,40 @@
+<template>
+  <el-card class="search-panel">
+    <schema-search-bar
+      :schema="searchSchema"
+      @load="onLoad"
+      @search="onSearch"
+      @reset="onReset"
+    ></schema-search-bar>
+  </el-card>
+</template>
+
+<script setup>
+import { inject } from 'vue'
+import SchemaSearchBar from '../../../../../widgets/schema-search-bar/schema-search-bar.vue'
+
+const { searchSchema } = inject('schemaViewData')
+
+const emits = defineEmits(['search'])
+
+const onLoad = (searchValueObj) => {
+  emits('search', searchValueObj)
+}
+
+const onSearch = (searchValueObj) => {
+  emits('search', searchValueObj)
+}
+
+const onReset = () => {
+  emits('search', {})
+}
+</script>
+
+<style scoped lang="less">
+.search-panel {
+  margin: 10px 10px 0 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,127 @@
+<template>
+  <el-card class="table-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="operationHander({ btnConfig: item })"
+      >
+        {{ item.label }}
+      </el-button>
+    </el-row>
+    <schema-table
+      ref="schemaTableRef"
+      :schema="tableSchema"
+      :api="api"
+      :apiParams="apiParams"
+      :buttons="tableConfig?.rowButtons ?? []"
+      @operate="operationHander"
+    ></schema-table>
+  </el-card>
+</template>
+
+<script setup>
+import { inject, useTemplateRef } from "vue";
+import $curl from "$elpisCommon/curl";
+import { ElMessageBox, ElNotification } from "element-plus";
+import SchemaTable from "../../../../../widgets/schema-table/schema-table.vue";
+
+const emits = defineEmits(["operate"]);
+
+const { api, apiParams, tableSchema, tableConfig } = inject("schemaViewData");
+
+const schemaTableInstance = useTemplateRef("schemaTableRef");
+
+const removeData = async ({ btnConfig, rowData }) => {
+  const {
+    eventOption: { params },
+  } = btnConfig;
+
+  if (!params) {
+    return;
+  }
+
+  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 () => {
+    schemaTableInstance.value.showLoading();
+
+    const res = await $curl({
+      method: "delete",
+      url: api.value,
+      data: {
+        [removeKey]: removeValue,
+      },
+      errorMessage: "删除失败",
+    });
+
+    schemaTableInstance.value.hideLoading();
+
+    if (!res || !res.success || !res.data) {
+      return;
+    }
+
+    ElNotification({
+      title: "删除成功",
+      message: "删除成功",
+      type: "success",
+    });
+
+    await initTableData();
+  });
+};
+
+const initTableData = async () => {
+  await schemaTableInstance.value.initData();
+};
+
+const loadTableData = async () => {
+  await schemaTableInstance.value.loadTableData();
+};
+
+const EventKeyMap = {
+  remove: removeData,
+};
+
+const operationHander = ({ btnConfig, rowData }) => {
+  const { eventKey } = btnConfig;
+  if (EventKeyMap[eventKey]) {
+    EventKeyMap[eventKey]({ btnConfig, rowData });
+  } else {
+    emits("operate", { btnConfig, rowData });
+  }
+};
+
+defineExpose({
+  initTableData,
+  loadTableData,
+});
+</script>
+
+<style scoped lang="less">
+.table-panel {
+  flex: 1;
+  margin: 10px;
+
+  .operation-panel {
+    margin-bottom: 10px;
+  }
+}
+</style>

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

@@ -0,0 +1,22 @@
+import CreateForm from "./create-form/create-form.vue";
+import EditForm from "./edit-form/edit-form.vue";
+import DetailPanel from "./detail-panel/detail-panel.vue";
+
+import BusinessComponentConfig from "$businessComponentConfig";
+
+const ComponentConfig = {
+  createForm: {
+    component: CreateForm,
+  },
+  editForm: {
+    component: EditForm,
+  },
+  detailPanel: {
+    component: DetailPanel,
+  },
+};
+
+export default {
+  ...ComponentConfig,
+  ...BusinessComponentConfig,
+};