@codertqy/elpis 1.0.0

package/app/pages/assets/custom.css

@@ -0,0 +1,14 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body,
+#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";
+
+// 引入 elementUI
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+// 引入暗黑模式
+import "element-plus/theme-chalk/dark/css-vars.css";
+// 引入基础样式
+import "./assets/custom.css";
+
+import pinia from "$elpisStore/index.js";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+import { createWebHistory, createRouter } from "vue-router";
+
+/**
+ * vue 页面的主入口，用于启动 vue
+ * @param {*} pageComponent vue 入口组件
+ * @param {*} routes 路由列表
+ * @param {*} libs 页面所依赖的第三方包
+ */
+export default (pageComponent, { routes, libs } = {}) => {
+  const app = createApp(pageComponent);
+
+  //   引入 ElementPlus
+  app.use(ElementPlus);
+
+  //   引入 pinia
+  app.use(pinia);
+
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component);
+  }
+  
+  //   引入第三方包 因为原生的比forEach这种性能要好一点点，可以忽略不计
+  //   为什么elpis-core可以使用forEach，因为服务器启动的，用户无感知，并且为了方便维护
+  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,84 @@
+import { ElMessage } from "element-plus";
+import axios from "axios";
+
+const md5 = require("md5");
+
+/**
+ * 前端封装 curl 方法
+ * @param {*} options 请求参数
+ */
+const curl = ({
+  url, // 请求地址
+  method = "post", //请求方法
+  headers = {}, // 请求头
+  query = {}, // url query
+  data = {}, // post body
+  responesType = "json", // 响应数据类型
+  timeout = 60000, // 超时时间
+  errorMessage = "网络异常", // 错误信息
+}) => {
+  // 接口签名处理（让接口变动态）
+  const signKey = "bgkjibal2kbhkc4vbakjl3sdvhja";
+  const st = Date.now();
+
+  // 构造请求头
+  const dtoHeaders = {
+    ...headers,
+    s_t: st,
+    s_sign: md5(`${signKey}_${st}`),
+  };
+  if (url.indexOf("/api/projk") > -1 && window.projKey) {
+    // 是请求 业务API接口，则将项目 key添加到请求头中
+    dtoHeaders.proj_key = window.projKey;
+  }
+  // 构造请求参数 (将参数转换为 axios 参数)
+  const ajaxSetting = {
+    url,
+    method,
+    params: query,
+    data,
+    timeout,
+    responesType,
+    headers: dtoHeaders,
+  };
+
+  return axios
+    .request(ajaxSetting)
+    .then((res) => {
+      const resData = res.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, code, message });
+      }
+      // 成功
+      const { data, metadata } = resData;
+      return Promise.resolve({ success, data, metadata });
+    })
+    .catch((err) => {
+      const { message } = err;
+      //   针对一些错误做处理
+      if (message.match(/timeout/)) {
+        return Promise.resolve({
+          message: " Request TimeOut",
+          code: 504,
+        });
+      }
+      return Promise.resolve(err);
+    });
+};
+
+export default curl;

package/app/pages/common/index.css

@@ -0,0 +1,3 @@
+body{
+    font-size: 16px;
+}

package/app/pages/common/utils.js

@@ -0,0 +1 @@
+export default {}

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 :key="item.key" v-for="item in menuItem.subMenu">
+      <SubMenu
+        v-if="item.subMenu && item.subMenu.length > 0"
+        :menuItem="item"
+      ></SubMenu>
+      <el-menu-item v-else :index="item.key">
+        {{ item.name }}
+      </el-menu-item>
+    </div>
+  </el-sub-menu>
+</template>
+<script setup>
+defineProps(["menuItem"]);
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,126 @@
+<template>
+  <HeaderContainer :title="projName">
+    <template #menu-content>
+      <!-- 根据 menuStore.menuList 渲染 -->
+      <el-menu
+        :default-active="activeKey"
+        :ellipsis="false"
+        mode="horizontal"
+        class=""
+        @select="onMenuSelect"
+      >
+        <template v-for="item in menuStore.menuList">
+          <SubMenu
+            v-if="item.subMenu && item.subMenu.length > 0"
+            :menuItem="item"
+          ></SubMenu>
+          <el-menu-item v-else :index="item.key">
+            {{ item.name }}
+          </el-menu-item>
+        </template>
+      </el-menu>
+    </template>
+    <template #setting-content>
+      <!-- 根据 projectStore.projectList 渲染 -->
+      <el-dropdown @command="handlProjectCommand">
+        <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>
+  </HeaderContainer>
+</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 { useMenuStore } from "$elpisStore/menu.js";
+import { useProjectStore } from "$elpisStore/project.js";
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+const route = useRoute();
+const menuStore = useMenuStore();
+const projectStore = useProjectStore();
+
+defineProps({ projName: String });
+const emit = defineEmits(["menu-select"]);
+
+const activeKey = ref("");
+
+// 监听变化
+watch(
+  () => route.query.key,
+  (key) => {
+    setActiveKey(key);
+  },
+);
+// 数据获取到之后
+watch(
+  () => menuStore.menuList,
+  (key) => {
+    setActiveKey(key);
+  },
+);
+onMounted(() => {
+  setActiveKey();
+});
+const setActiveKey = () => {
+  // 权限搜索的
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: route.query.key,
+  });
+  activeKey.value = menuItem?.key;
+};
+const onMenuSelect = (menuKey) => {
+  const menuItem = menuStore.findMenuItem({
+    key: "key",
+    value: menuKey,
+  });
+  emit("menu-select", menuItem);
+};
+
+// 同一模块切换，比如 b站 切换 抖音
+const handlProjectCommand = (e) => {
+  const projectItem = projectStore.projectList.find((item) => item.key === e);
+  if (!projectItem || !projectItem.homePage) {
+    return;
+  }
+  const { host } = window.location;
+  window.location.replace(`http://${host}/view/dashboard${projectItem.homePage}`);
+};
+</script>
+
+<style scoped lang="less">
+:deep(.el-menu--horizontal.el-menu) {
+  border-bottom: 1px solid #e8e8e8;
+}
+.project-list {
+  margin-right: 20px;
+  cursor: pointer;
+  color: var(--el-color-primary);
+  outline: none;
+  display: flex;
+  align-items: center;
+}
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+  <iframe :src="path" class="iframe"></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 = () => {
+  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,
+    () => menuStore.menuList,
+  ],
+  () => {
+    setPath();
+  },
+  { deep: true },
+);
+onMounted(() => {
+  setPath();
+});
+</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,35 @@
+<template>
+  <el-card class="search-panel">
+    <SchemaSearchBar
+      :schema="searchSchema"
+      @load="onLoad"
+      @search="onSearch"
+      @reset="onReset"
+    ></SchemaSearchBar>
+  </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,120 @@
+<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） -->
+    <SchemaTable
+      ref="schemaTableRef"
+      :schema="tableSchema"
+      :api="api"
+      :apiParams="apiParams"
+      :buttons="tableConfig?.rowButtons ?? []"
+      @operate="operationHandler"
+    ></SchemaTable>
+  </el-card>
+</template>
+<script setup>
+import SchemaTable from "$elpisWidgets/schema-table/schema-table.vue";
+import { ref, inject } from "vue";
+import $curl from "$elpisCommon/curl";
+import { ElMessageBox, ElNotification } from "element-plus";
+
+const emit = defineEmits(["operate"]);
+const schemaTableRef = ref(null);
+const { api, tableSchema, apiParams, tableConfig } = inject("schemaViewData");
+
+const operationHandler = ({ btnConfig, rowData }) => {
+  const { eventKey } = btnConfig;
+  // 如果有该事件，透传下去
+  if (EventHandlerMap[eventKey]) {
+    EventHandlerMap[eventKey]({ btnConfig, rowData });
+  } else {
+    emit("operate", { btnConfig, rowData });
+  }
+};
+const removeData = async ({ btnConfig, rowData }) => {
+  const { eventOption } = btnConfig;
+  if (!eventOption?.params) {
+    return;
+  }
+  const { params } = eventOption;
+  // 参数键
+  const removeKey = Object.keys(params)[0];
+  // 拿到 参数值
+  let removeValue = params[removeKey];
+
+  const removeValueList = removeValue.split("::");
+  if (removeValueList[0] === "schema" && removeValueList[1]) {
+    removeValue = rowData[removeValueList[1]];
+  }
+
+  ElMessageBox.confirm(
+    `确认删除${removeKey}为：${removeValue}的数据吗？`,
+    "warning",
+    {
+      confirmButtonText: "确认",
+      cancelButtonText: "取消",
+    },
+  ).then(async () => {
+    schemaTableRef.value.showLoading();
+    const res = await $curl({
+      method: "delete",
+      url: api.value,
+      data: { [removeKey]: removeValue },
+      errorMessage: "删除失败",
+    });
+    schemaTableRef.value.hideLoading();
+    if (!res || !res.success || !res.data) {
+      return;
+    }
+
+    ElNotification.success({
+      title: "删除成功",
+      message: "删除成功",
+    });
+
+    // 重新调用子组件身上的方法进行加载数据
+    await initTableData();
+  });
+};
+
+const EventHandlerMap = {
+  remove: removeData,
+};
+
+const initTableData = async () => {
+  await schemaTableRef.value.initData();
+};
+const loadTableData = async () => {
+  await schemaTableRef.value.loadTableData();
+};
+defineExpose({
+  loadTableData,
+});
+</script>
+
+<style scoped lang="less">
+.table-panel {
+  flex: 1;
+  margin-top: 10px;
+  .operation-panel {
+    margin-bottom: 10px;
+  }
+}
+:deep(.el-card__body) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>

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

@@ -0,0 +1,23 @@
+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,87 @@
+<template>
+  <el-drawer
+    v-model="isShow"
+    direction="rtl"
+    :destroy-on-close="true"
+    :size="550"
+  >
+    <template #header>
+      <h3>{{ title }}</h3>
+    </template>
+    <template #default>
+      <SchemaForm
+        ref="schemaFormRef"
+        v-loading="loading"
+        :schema="components[name]?.schema"
+      ></SchemaForm>
+    </template>
+    <template #footer>
+      <el-button type="primary" @click="save">{{ saveBtnText }}</el-button>
+    </template>
+  </el-drawer>
+</template>
+<script setup>
+import { ref, inject } from "vue";
+import SchemaForm from "$elpisWidgets/schema-form/schema-form.vue";
+import $curl from "$elpisCommon/curl.js";
+import { ElNotification } from "element-plus";
+
+const { api, components } = inject("schemaViewData");
+
+
+const emit = defineEmits(["command"]);
+const name = ref("createForm");
+const isShow = ref(false);
+const title = ref("");
+const saveBtnText = ref("");
+const schemaFormRef = ref();
+const loading = ref(false);
+const show = () => {
+  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 res = await $curl({
+    method: "post",
+    url: api.value,
+    data: {
+      ...schemaFormRef.value.getValue(),
+    },
+  });
+  loading.value = false;
+  if (!res || !res.success) {
+    return;
+  }
+  ElNotification({
+    title: "创建成功",
+    message: "创建成功",
+    type: "success",
+  });
+  close();
+
+  emit("command", {
+    event: "loadTableData",
+  });
+};
+defineExpose({
+  name,
+  show,
+});
+</script>
+
+<style scoped lang="less"></style>