@shhhwm/elpis 1.0.0

package/app/pages/asserts/custom.css

@@ -0,0 +1,12 @@
+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,50 @@
+import { createApp } from "vue";
+
+// 引入 elementUI
+import ElementUI from "element-plus";
+import "element-plus/theme-chalk/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 入口组件
+ * @param routes 路由列表
+ * @param libs 页面依赖的第三方包
+ */
+export default (pageComponent, { routes, libs } = {}) => {
+  const app = createApp(pageComponent);
+
+  // 应用 ElementUI
+  app.use(ElementUI);
+
+  // 引入 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(), // 采用 history 模式
+      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 md5 = require("md5");
+import { ElMessage } from "element-plus";
+
+/**
+ * 前端封装的 curl 方法
+ * @param options 请求参数
+ */
+const curl = ({
+  url, // 请求地址
+  method = "post", // 请求方法
+  headers = {}, // 请求头
+  query = {}, // url query
+  data = {}, // post body
+  responseType = "json", // response data type
+  timeout = 60000, // timeout
+  errorMessage = "网络异常",
+}) => {
+  // 接口签名处理(让接口变动态)
+  const signKey = "95da0407-a7e2-2852-715e-2bbf48d89e99";
+  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,
+    responseType,
+    timeout,
+    headers: dtoHeaders,
+  };
+
+  return axios
+    .request(ajaxStting)
+    .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,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 :key="item.key" v-for="item in menuItem.subMenu">
+      <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>
+    </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,127 @@
+<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"
+          ></sub-menu>
+          <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="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.js';
+import { useProjectStore } from '$elpisStore/project.js';
+
+const route = useRoute()
+const menuStore = useMenuStore();
+const projectStore = useProjectStore();
+
+defineProps({
+  projName: String
+})
+
+const emit = defineEmits(['menu-select'])
+
+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
+  })
+  emit('menu-select', menuItem)
+}
+
+const handleProjectCommand = function (event) {
+  const projectItem = projectStore.projectList.find(item => item.key === event)
+  if (!projectItem || !projectItem.homePage) {
+    return
+  }
+
+  const { origin } = window.location;
+  window.location.replace(`${origin}/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
+  border-color: #e8e8e8
+}
+</style>

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

@@ -0,0 +1,44 @@
+<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.js'
+
+const route = useRoute();
+const menuStore = useMenuStore();
+
+watch([
+  () => route.query.key,
+  () => route.query.sider_key,
+  () => menuStore.menuList,
+], () => {
+  setPath()
+}, { deep: true });
+
+onMounted(() => {
+  setPath()
+})
+
+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 ?? '';
+}
+</script>
+
+<style lang="less" scoped>
+.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,41 @@
+<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 '$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 lang="less" scoped>
+.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,137 @@
+<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"
+      :apiParmas="apiParmas"
+      :buttons="tableConfig?.rowButtons ?? []"
+      @operate="operationHandler"
+    ></schema-table>
+  </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,
+  apiParmas,
+  tableSchema,
+  tableConfig
+} = inject('schemaViewData');
+
+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} 数据?`,
+    'Warning',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }
+  ).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({
+      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 {
+  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,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,102 @@
+<template>
+  <el-drawer
+    v-model="isShow"
+    direction="rtl"
+    :destroy-on-close="true"
+    :size="550"
+  >
+    <template #header>
+      <h3>{{ title }}</h3>
+    </template>
+    <template #default>
+      <schema-form
+        ref="schemaFormRef"
+        v-loading="loading"
+        :schema="components[name]?.schema"
+      ></schema-form>
+    </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 schemaFormRef = ref(null);
+const isShow = ref(false);
+const loading = ref(false);
+const title = ref('');
+const saveBtnText = ref('');
+
+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 lang="less" scoped></style>