@isxiaoyuan/elpis 1.0.0

package/app/middleware.js

@@ -0,0 +1,41 @@
+const path = require("path");
+
+module.exports = (app) => {
+  //配置静态跟目录
+  const koaStatic = require("koa-static");
+  app.use(koaStatic(path.resolve(process.cwd(), "./app/public")));
+  //模板渲染引擎 核心作用是让 Koa 能够高效地进行服务端模板渲染（SSR）
+  const koaNunjucks = require("koa-nunjucks-2");
+  app.use(
+    koaNunjucks({
+      ext: "tpl", // 模板文件后缀
+      //   path: path.resolve(app.businessPath, "public"), // 模板文件目录
+      path: path.resolve(process.cwd(), "./app/public"), // 模板文件目录
+      nunjucksConfig: {
+        trimBlocks: true, // 去除模板中的空格
+        noCache: true,
+        // lstripBlocks: true,
+      },
+    }),
+  );
+
+  //引入 ctx.body 解析中间件
+  const bodyParser = require("koa-bodyparser");
+  app.use(
+    bodyParser({
+      formLimit: "1000MB", //请求体大小限制
+      enableTypes: ["json", "form", "text"],
+    }),
+  );
+  // 引入运行时异常错误处理中间件
+  app.use(app.middlewares.errorHandler);
+
+  //签名合法性校验
+  app.use(app.middlewares.apiSignVerify);
+
+  //参数校验
+  app.use(app.middlewares.apiParamsVerify);
+
+  // 项目相关处理中间件
+  app.use(app.middlewares.projectHandle);
+};

package/app/pages/asserts/custom.css

@@ -0,0 +1,11 @@
+html, body {
+    height: 100%;
+}
+
+#root {
+    height: 100%;
+}
+
+input:-webkit-autofill{
+    -webkit-box-shadow: 0 0 0 1000px #121212 inset;
+}

package/app/pages/boot.js

@@ -0,0 +1,43 @@
+import { createApp } from "vue";
+// 引入 element-plus 组件库
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import "element-plus/theme-chalk/dark/css-vars.css";
+
+import "./asserts/custom.css";
+import pinia from "$elpisStore";
+import { createRouter, createWebHistory } from "vue-router";
+/**
+ *  vue 页面主入口 初始化vue
+ *  @params pageComponent vue 入口组件
+ */
+export default (pageComponent, { routes, libs } = {}) => {
+  const app = createApp(pageComponent);
+  app.use(ElementPlus);
+
+  app.use(pinia);
+
+  // 引入第三方包
+  if (libs && libs.length > 0) {
+    // libs.forEach((lib) => {
+    //   app.use(lib);
+    // });
+    for (let i = 0; i < libs.length; i++) {
+      app.use(libs[i]);
+    }
+  }
+
+  // 配置路由
+  if (routes && routes.length > 0) {
+    const router = createRouter({
+      history: createWebHistory(),
+      routes,
+    });
+    app.use(router);
+    router.isReady().then(() => {
+      app.mount("#root");
+    });
+  } else {
+    app.mount("#root");
+  }
+};

package/app/pages/common/curl.js

@@ -0,0 +1,88 @@
+const axios = require("axios");
+const md5 = require("md5");
+import { ElMessage } from "element-plus";
+
+/**
+ * 前端封装的 curl 方法
+ *
+ */
+const curl = ({
+  url,
+  method = "post",
+  headers = {}, //请求头
+  query = {}, //查询参数url
+  data = {}, //请求体参数body
+  responseType = "json", //响应体类型
+  timeout = 60000, //超时时间
+  errorMessage = "网络异常",
+}) => {
+  // 接口签名处理(让接口变动态)
+  const signKey = "isyuankkkkkll123kasd2444";
+  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 ajaxStting = {
+    url,
+    method,
+    params: query,
+    data, //请求体参数body
+    responseType, //响应体类型
+    timeout, //超时时间
+    headers: dtoHeaders,
+  };
+  return axios
+    .request(ajaxStting)
+    .then((response) => {
+      const resData = response.data || {};
+
+      //后端api返回格式
+      const { success } = resData;
+      //失败
+      if (!success) {
+        const { code, message } = 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);
+        }
+
+        return Promise.resolve({
+          success,
+          message,
+          code,
+        });
+      }
+      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,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
+        :menu-item="item"
+        v-if="item.subMenu && item.subMenu.length > 0"
+      />
+      <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,138 @@
+<template>
+  <header-container :title="projName">
+    <template #menu-content>
+      <el-menu
+        :default-active="activeKey"
+        :ellipsis="false"
+        mode="horizontal"
+        @select="handleSelect"
+      >
+        <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>
+      <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 "./complex-view/sub-menu/sub-menu.vue";
+import { useMenuStore } from "$elpisStore/menu";
+import { useProjectStore } from "$elpisStore/project";
+
+const route = useRoute();
+const menuStore = useMenuStore();
+const projectStore = useProjectStore();
+
+const emit = defineEmits(["menu-select"]);
+
+defineProps({
+  projName: {
+    type: String,
+  },
+});
+
+const activeKey = ref("");
+
+const setActiveKey = () => {
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: route.query.key,
+  });
+  activeKey.value = menuItem?.key || "";
+};
+
+const handleSelect = (menuKey) => {
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: menuKey,
+  });
+  emit("menu-select", menuItem);
+};
+
+const handleProjectCommand = (command) => {
+  const projectItem = projectStore.projectList.find(
+    (item) => item.key === command,
+  );
+  if (!projectItem || !projectItem.homePage) return;
+  // hash 模式
+  // const { origin, pathname } = window.location;
+  // window.location.replace(`${origin}${pathname}#${projectItem.homePage}`);
+  // window.location.reload();
+  // history模式
+  const { host } = window.location;
+  window.location.replace(
+    `https://${host}/view/dashboard${projectItem.homePage}`,
+  );
+};
+
+watch(
+  () => route.query.key,
+  () => {
+    setActiveKey();
+  },
+);
+
+watch(
+  () => menuStore.menuList,
+  () => {
+    setActiveKey();
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  setActiveKey();
+});
+</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;
+  background-color: transparent;
+}
+</style>

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

@@ -0,0 +1,51 @@
+<template>
+  <iframe
+    :src="path"
+    class="iframe"
+    sandbox="allow-scripts allow-same-origin allow-forms"
+  ></iframe>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { useMenuStore } from "$elpisStore/menu.js";
+
+const route = useRoute();
+const menuStore = useMenuStore();
+
+const path = ref("");
+const setPath = () => {
+  const { key, sider_key: siderKey } = route.query;
+
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: siderKey ?? key,
+  });
+  path.value = menuItem?.iframeConfig?.path ?? "";
+};
+
+watch(
+  [
+    () => route.query.sider_key,
+    () => route.query.key,
+    () => menuStore.menuList,
+  ],
+  () => {
+    setPath();
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  setPath();
+});
+</script>
+
+<style scoped lang="less">
+.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,41 @@
+<template>
+  <el-card class="search-panel">
+    <schema-search-bar
+      ref="SchemaSearchBarRef"
+      :schema="searchSchema"
+      @load="onLoad"
+      @search="onSearch"
+      @reset="onReset"
+    />
+  </el-card>
+</template>
+
+<script setup>
+import { inject } from "vue";
+import SchemaSearchBar from "$elpisWidgets/schema-search-bar/schema-search-bar.vue";
+
+const { searchSchema } = inject("schemaViewData");
+
+const emit = defineEmits(["search"]);
+
+const onLoad = (searchValObj) => {
+  emit("search", searchValObj);
+};
+
+const onSearch = (searchValObj) => {
+  emit("search", searchValObj);
+};
+
+const onReset = () => {
+  emit("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,128 @@
+<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="operationHandle({ 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="operationHandle"
+    />
+  </el-card>
+</template>
+
+<script setup>
+import { ref, inject } 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 { api, tableSchema, tableConfig, apiParams } = inject("schemaViewData");
+
+const schemaTableRef = ref(null);
+
+const 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();
+      try {
+        await $curl({
+          url: api.value,
+          method: "delete",
+          data: {
+            [removeKey]: removeValue,
+          },
+          errorMessage: "删除失败",
+        });
+        schemaTableRef.value?.hideLoading();
+        ElNotification.success({
+          title: "删除成功",
+          message: `删除了 ${removeKey}为: ${removeValue}数据`,
+          type: "success",
+        });
+        await initData();
+      } catch (err) {
+        schemaTableRef.value?.hideLoading();
+      }
+    })
+    .catch(() => {});
+};
+
+const EventHandleMap = {
+  remove: removeData,
+};
+// 点击事件处理
+const operationHandle = ({ btnConfig, rowData }) => {
+  const { eventKey } = btnConfig;
+  if (EventHandleMap[eventKey]) {
+    EventHandleMap[eventKey]({ btnConfig, rowData });
+  } else {
+    emit("operate", { btnConfig, rowData });
+  }
+};
+
+const initData = async () => {
+  await schemaTableRef.value?.initData();
+};
+
+const loadTableData = async () => {
+  await schemaTableRef.value?.loadTableData();
+};
+
+defineExpose({
+  loadTableData,
+});
+</script>
+
+<style scoped lang="less">
+.table-panel {
+  flex: 1;
+  margin: 10px;
+  .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,20 @@
+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 "$businessComponentConfig";
+
+const ComponentConfig = {
+  createForm: {
+    component: createForm,
+  },
+  editForm: {
+    component: editForm,
+  },
+  detailPanel: {
+    component: detailPanel,
+  },
+};
+
+export default { ...ComponentConfig, ...BusinessComponentConfig };

package/app/pages/dashboard/complex-view/schema-view/components/create-form/create-form.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-drawer
+    v-model="isShow"
+    direction="rtl"
+    :destroy-on-close="true"
+    :size="550"
+  >
+    <template #header>
+      <h3 class="title">{{ title }}</h3>
+    </template>
+    <template #default>
+      <schema-form
+        v-loading="loading"
+        ref="schemaFormRef"
+        :schema="components[name]?.schema"
+      />
+    </template>
+    <template #footer>
+      <el-button type="primary" @click="save">{{ saveBtnText }}</el-button>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup>
+import { ref, inject } from "vue";
+import { ElNotification } from "element-plus";
+import $curl from "$elpisCommon/curl.js";
+import SchemaForm from "$elpisWidgets/schema-form/schema-form.vue";
+
+const { api, components } = inject("schemaViewData");
+
+const emit = defineEmits(["command"]);
+
+const name = ref("createForm");
+// const { components } = inject("schemaViewData");
+
+const schemaFormRef = ref(null);
+const isShow = ref(false);
+const loading = ref(false);
+const title = ref("");
+const saveBtnText = ref("");
+
+const show = (rowData) => {
+  const { config } = components.value[name.value];
+
+  title.value = config.title;
+  saveBtnText.value = config.saveBtnText;
+
+  isShow.value = true;
+};
+
+const close = () => {
+  isShow.value = false;
+};
+
+const save = async () => {
+  if (loading.value) {
+    return;
+  }
+  // 校验表单
+  if (!schemaFormRef.value.validate()) {
+    return;
+  }
+  loading.value = true;
+  // 提交表单
+  // const formData = schemaFormRef.value.getFormData();
+  try {
+    await $curl({
+      url: api.value,
+      method: "post",
+      data: { ...schemaFormRef.value.getValue() },
+    });
+
+    ElNotification({
+      title: "创建成功",
+      message: "创建成功",
+      type: "success",
+    });
+    close();
+    emit("command", {
+      event: "loadTableData",
+    });
+    loading.value = false;
+  } catch (error) {
+    loading.value = false;
+  }
+};
+
+defineExpose({
+  name,
+  show,
+});
+</script>
+
+<style scoped lang="less"></style>