@jiangliffey/elpis 1.0.0

package/app/middleware/project-handler.js

@@ -0,0 +1,27 @@
+/**
+ * projectHandler 相关项目处理内容
+ */
+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 not found',
+                code: 446
+            };
+            return;
+        }
+
+        ctx.projKey = projKey;
+
+        await next();
+    }
+}

package/app/middleware.js

@@ -0,0 +1,37 @@
+const path = require('path');
+
+module.exports = (app) => {
+    //配置静态根目录
+    const koaStatic = require('koa-static');
+    app.use(koaStatic(path.resolve(process.cwd(), './app/public')));
+    
+    // 模板渲染引擎
+    const koaNunjucks = require('koa-nunjucks-2');
+    app.use(koaNunjucks({
+        ext: 'tpl',
+        path: path.resolve(process.cwd(), './app/public'),
+        nunjucksConfig: {
+            noCache: true,
+            trimBlocks: 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);
+
+    // 引入 API 参数校验
+    app.use(app.middlewares.apiParamsVerify);
+
+    // 引入 项目处理中间件
+    app.use(app.middlewares.projectHandler);
+}

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 ElementPlus 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 入口组件
+ * @params routes 路由列表
+ * @params libs 页面依赖的第三包
+ */
+export default (pageComponent, { routes, libs } = {}) => {
+    const app = createApp(pageComponent);
+    
+    // 应用elementUI
+    app.use(ElementPlus); //顺序不能反：先注册 再挂载
+
+    // 引入 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('/view/dashboard'), // 采用history模式
+            routes,
+        })
+        app.use(router);
+        router.isReady().then(() => {
+            app.mount('#root');
+        })
+    } else {
+        app.mount('#root');
+    }
+}

package/app/pages/common/curl.js

@@ -0,0 +1,89 @@
+const md5 = require('md5');
+import axios from 'axios';
+import { ElMessage } from 'element-plus'
+
+/**
+ * 前端封装的 curl 方法
+ * @params options 请求参数
+ */
+
+const curl = ({
+    url, // 请求地址
+    method = 'post', // 请求方法
+    headers = {}, // 请求头
+    query = {}, // 请求参数：query
+    data = {}, // post body
+    responseType = 'json', // response data type
+    timeout = 6000, 
+    errorMessage = '网络异常'
+}) => {
+
+    // 接口签名处理（让接口便动态）
+    const signKey = 'dftgyh84adsuh462wef46ef5s6d4fiop';
+    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,21 @@
+<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" 
+                :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,123 @@
+<template>
+    <header-container :title="projName">
+        <template #menu-content>
+            <!-- 根据menujStore.menuList 渲染 -->
+            <el-menu
+                :default-active="activeKey"
+                :ellipsis="false"
+                mode="horizontal"
+                @select="onMenuSelect"
+            >
+                <template v-for="item in menuStore.menuList" :key="item.key">
+                    <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>
+            <!-- 根据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 { ref, onMounted, watch } 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 = () => {
+    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();
+// })
+
+watch(
+    [() => route.query.key, () => menuStore.menuList],
+    () => {
+        setActiveKey();
+    },
+    {
+        immediate: true,
+        deep: true
+    }
+);
+
+const onMenuSelect = (menuKey) => {
+    const menuItem = menuStore.findMenuItem({
+        key: 'key',
+        value: menuKey
+    });
+    emit('menu-select', menuItem);
+}
+const handleProjectCommand = (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>
+:deep(.el-menu--horizontal.el-menu) {
+    border-bottom: 0;
+}
+:deep(.el-menu) {
+    background-color: unset;
+}
+.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,43 @@
+<template>
+    <iframe :src="path" class="iframe"></iframe>
+</template>
+
+<script setup>
+import { ref, watch } 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.key, () => route.query.sider_key, () => menuStore.menuList],
+    () => {
+        setPath();
+    },
+    {
+        immediate: true,
+        deep: true
+    }
+);
+</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,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 { ref, 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 = (searchValObj) => {
+    emit('search', searchValObj);
+}
+</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,124 @@
+<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"
+        >
+        </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, apiParams, 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
+            },
+            errorMessages: '删除失败'
+        });
+        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,87 @@
+<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 $curl from '$elpisCommon/curl.js';
+import { ElNotification } from 'element-plus';
+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?.success) {
+        ElNotification.success({
+            title: '创建成功',
+            message: '创建成功'
+        });
+        isShow.value = false;
+    } else {
+        ElNotification.error({
+            title: '创建失败',
+            message: '创建失败'
+        });
+    }
+    close();
+    emit('command', {event: 'loadTableData'});
+}
+
+defineExpose({ name, show })
+</script>
+
+<style lang="less" scoped>
+
+</style>