@jiangliffey/elpis 1.0.0

package/app/pages/dashboard/entry.dashboard.js

@@ -0,0 +1,45 @@
+import boot from '$elpisPages/boot.js';
+import dashboard from './dashboard.vue';
+import businessDashboardRouterConfig from '$businessDashboardRouterConfig'
+
+const routes = [];
+
+// 头部菜单路由
+routes.push({
+    path: '/iframe',
+    component: () => import('./complex-view/iframe-view/iframe-view.vue')
+});
+routes.push({
+    path: '/schema',
+    component: () => import('./complex-view/schema-view/schema-view.vue')
+});
+
+const siderRoutes = [
+    {
+        path: 'iframe',
+        component: () => import('./complex-view/iframe-view/iframe-view.vue')
+    },
+    {
+        path: 'schema',
+        component: () => import('./complex-view/schema-view/schema-view.vue')
+    },
+];
+// 侧边栏菜单路由
+routes.push({
+    path: '/sider',
+    component: () => import('./complex-view/sider-view/sider-view.vue'),
+    children: siderRoutes
+});
+
+// 业务拓展路由
+if(typeof businessDashboardRouterConfig === 'function') {
+    businessDashboardRouterConfig({ routes, siderRoutes });
+}
+
+// 侧边栏兜底策略
+routes.push({
+    path: '/sider/:chapters+',
+    component: () => import('./complex-view/sider-view/sider-view.vue')
+}) 
+
+boot(dashboard, { routes });

package/app/pages/dashboard/todo/todo.vue

@@ -0,0 +1,11 @@
+<template>
+    <h1>待开发</h1>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

package/app/pages/store/index.js

@@ -0,0 +1,4 @@
+import { createPinia } from "pinia";
+const pinia = createPinia();
+
+export default pinia;

package/app/pages/store/menu.js

@@ -0,0 +1,58 @@
+import { defineStore } from "pinia";
+import { ref } from 'vue';
+
+export const useMenuStore = defineStore('menu', () => {
+    // 菜单列表
+    const menuList = ref([]);
+
+    // 设置菜单列表
+    const setMenuList = function(list) {
+        menuList.value = list;
+    }
+
+    /**
+     * 找出菜单目录
+     * @param key 搜索字段
+     * @param value 搜索值
+     * @param mList 要搜索的菜单列表
+    */
+    const findMenuItem = ({ key, value }, mList = menuList.value) => {
+        for(let i = 0; i < mList.length; i++) {
+            const menuItem = mList[i];
+            if(!menuItem) { continue; }
+
+            const { menuType, moduleType, subMenu, siderConfig } = menuItem;
+
+            if(menuItem[key] === value) {
+                return menuItem;
+            }
+            // group 类型：递归查找 subMenu
+            if(menuType === 'group' && subMenu) {
+                const mItem = findMenuItem({ key, value }, subMenu);
+                if(mItem) { return mItem; }
+            }
+            // sider 类型：递归查找 siderConfig.menu
+            if(moduleType === 'sider' && siderConfig && siderConfig.menu) {
+                const mItem = findMenuItem({ key, value }, siderConfig.menu);
+                if(mItem) { return mItem; }
+            }
+        }
+
+        return undefined;
+    }
+
+    /**
+     * 找出第一个菜单目录
+     * @param mList 菜单列表
+    */
+    const findFirstMenuItem = (mList = menuList.value) => {
+        if(!mList || !mList[0]) { return; }
+        let firstMenuItem = mList[0];
+        if(firstMenuItem.subMenu) {
+            firstMenuItem = findMenuItem(firstMenuItem.subMenu);
+        }
+        return firstMenuItem;
+    }
+
+    return { menuList, setMenuList, findMenuItem, findFirstMenuItem };
+});

package/app/pages/store/project.js

@@ -0,0 +1,14 @@
+import { defineStore } from "pinia";
+import { ref } from 'vue';
+
+export const useProjectStore = defineStore('project', () => {
+    // 菜单列表
+    const projectList = ref([]);
+    
+    // 设置菜单列表
+    const setProjectList = function(list) {
+        projectList.value = list;
+    }
+
+    return { projectList, setProjectList };
+});

package/app/pages/widgets/header-container/header-container.vue

@@ -0,0 +1,106 @@
+<template>
+     <el-container class="header-container">
+      <el-header class="header">
+        <el-row type="flex" align="middle" class="header-row">
+            <!-- 左上方title -->
+            <el-row type="flex" align="middle" class="title-panel">
+                <img src="./asserts/logo.png" alt="logo.png" class="logo">
+                <el-row class="text">{{ title }}</el-row>
+            </el-row>
+            <!-- 插槽: 菜单区域 -->
+            <slot name="menu-content"></slot>
+            <!-- 右上方区域 -->
+            <el-row type="flex" align="middle" justify="end" class="setting-panel">
+                <!-- 插槽: 设置区域 -->
+                <slot name="setting-content"></slot>
+                <img src="./asserts/avatar.png" alt="avatar.png" class="avatar">
+                <el-dropdown @command="handleUserCommand">
+                    <span class="username">
+                        {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
+                    </span>
+                    <template #dropdown>
+                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+                    </template>
+                </el-dropdown>
+            </el-row>
+        </el-row>
+      </el-header>
+      <el-main class="main-container">
+        <!-- 插槽: 核心内容填充区域 -->
+        <slot name="main-content"></slot>
+      </el-main>
+    </el-container>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+defineProps({
+    title: String
+});
+
+const userName = ref('小江');
+const handleUserCommand = (event) => {
+    console.log(event);
+};
+</script>
+
+<style lang="less" scoped>
+.header-container {
+    height: 100%;
+    min-width: 1000px;
+    overflow: hidden;
+
+    .header {
+        max-height: 120px;
+        border-bottom: 1px solid #E8E8E8;
+
+        .header-row {
+            height: 60px;
+            padding: 0 20px;
+            .title-panel {
+                width: 180px;
+                min-width: 180px;
+
+                .logo {
+                    margin-right: 10px;
+                    width: 25px;
+                    height: 25px;
+                    border-radius: 50%;
+                }
+                .text {
+                    font-size: 15px;
+                    font-weight: 500;
+                }
+            }
+            
+            .setting-panel {
+                margin-left: auto;
+                min-width: 180px;
+
+                .avatar {
+                    margin-right: 12px;
+                    width: 30px;
+                    height: 30px;
+                    border-radius: 50%;
+                }
+                .username {
+                    font-size: 16px;
+                    font-weight: 500;
+                    cursor: pointer;
+                    height: 60px;
+                    line-height: 60px;
+                    outline: none;
+                }
+            }
+            
+        }
+    }
+
+    .main-container {}
+}
+
+:deep(.el-header) {
+    padding: 0;
+}
+</style>

package/app/pages/widgets/schema-form/complex-view/input/input.vue

@@ -0,0 +1,134 @@
+<template>
+    <el-row type="flex" align="middle" class="form-item">
+        <!-- label -->
+        <el-row class="item-label" justify="end">
+            <el-row
+                v-if="schema.option?.required"
+                type="flex"
+                class="required"
+            >*</el-row>
+            {{ schema.label }}
+        </el-row>
+        <!-- value -->
+        <el-row class="item-value">
+            <el-input 
+                v-model="dtoValue" 
+                v-bind="schema.option"
+                :placeholder="placeholder"
+                class="component" 
+                :class="validTips ? 'valid-border' : ''" 
+                @focus="onFocus"
+                @blur="onBlur"
+                :disabled="schema.option?.disable" />
+        </el-row>
+        <!-- 错误信息 -->
+        <el-row v-if="validTips" class="valid-tips">
+            {{ validTips }}
+        </el-row>
+    </el-row>
+</template>
+
+<script setup>
+import { ref, toRefs, watch, inject, onMounted } from 'vue';
+const ajv = inject('ajv');
+
+const props = defineProps({
+    schemaKey: String,
+    schema: Object,
+    model: String,
+})
+
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+
+const name = ref('input');
+const dtoValue = ref();
+const placeholder = ref('');
+const validTips = ref(null);
+
+const initData = () => {
+    dtoValue.value = model.value ?? schema.option?.default;
+    validTips.value = null;
+
+    const { minLength, maxLength, pattern } = schema;
+    const ruleList = [];
+    if(schema.option?.placeholder) {
+        ruleList.push(schema.option.placeholder);
+    }
+    if(minLength) {
+        ruleList.push(`最小长度 ${minLength}`);
+    }
+    if(maxLength) {
+        ruleList.push(`最大长度 ${maxLength}`);
+    }
+    if(pattern) {
+        ruleList.push(`格式: ${pattern}`);
+    }
+    placeholder.value = ruleList.join('|');
+}
+
+onMounted(() => {
+    initData();
+});
+
+watch([ model, schema ], () => {
+    initData();
+}, { deep: true });
+
+const validate = () => {
+    validTips.value = null;
+
+    const { type } = schema;
+
+    // 校验是否必填
+    if (schema.option?.required && !dtoValue.value) {
+        validTips.value = '不能为空';
+        return false;
+    }
+
+    // ajv 校验 schema
+    if(dtoValue.value) {
+        const validate = ajv.compile(schema);
+        const valid = validate(dtoValue.value);
+        if (!valid && validate.errors && validate.errors[0]) {
+            const { keyword, params } = validate.errors[0];
+            if(keyword === 'type') {
+                validTips.value = `类型必须为 ${type}`;
+            } else if (keyword === 'maxLength') {
+                validTips.value = `最大长度应为 ${params.limit}`;
+            } else if (keyword === 'minLength') {
+                validTips.value = `最小长度应为 ${params.limit}`;
+            } else if (keyword === 'pattern') {
+                validTips.value = '格式不正确';
+            } else {
+                console.warn('未处理的校验错误', validate.errors[0]);
+                validTips.value = '不符合要求';
+            }
+            return false;
+        }
+    }
+    return true;
+};
+
+const getValue = () => {
+    return dtoValue.value !== undefined ? { [schemaKey]: dtoValue.value } : {};
+};
+
+const onFocus = () => {
+    validTips.value = null;
+}
+
+const onBlur = () => {
+    validate();
+}
+
+defineExpose({
+    name,
+    validate,
+    getValue,
+});
+</script>
+
+<style lang="less" scoped>
+
+</style>

package/app/pages/widgets/schema-form/complex-view/input-number/input-number.vue

@@ -0,0 +1,136 @@
+<template>
+    <el-row type="flex" align="middle" class="form-item">
+        <!-- label -->
+        <el-row class="item-label" justify="end">
+            <el-row
+                v-if="schema.option?.required"
+                type="flex"
+                class="required"
+            >*</el-row>
+            {{ schema.label }}
+        </el-row>
+        <!-- value -->
+        <el-row class="item-value">
+            <el-input-number
+                v-model="dtoValue" 
+                v-bind="schema.option"
+                :controls="false"
+                :placeholder="placeholder"
+                class="component" 
+                :class="validTips ? 'valid-border' : ''" 
+                @focus="onFocus"
+                @blur="onBlur"
+                :disabled="schema.option?.disable" />
+        </el-row>
+        <!-- 错误信息 -->
+        <el-row v-if="validTips" class="valid-tips">
+            {{ validTips }}
+        </el-row>
+    </el-row>
+</template>
+
+<script setup>
+import { ref, toRefs, watch, inject, onMounted } from 'vue';
+const ajv = inject('ajv');
+
+const props = defineProps({
+    schemaKey: String,
+    schema: Object,
+    model: Number,
+})
+
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+
+const name = ref('inputNumber');
+const dtoValue = ref();
+const placeholder = ref('');
+const validTips = ref(null);
+
+const initData = () => {
+    dtoValue.value = model.value ?? schema.option?.default;
+    validTips.value = null;
+
+    const { minimum, maximum } = schema;
+    const ruleList = [];
+    if(schema.option?.placeholder) {
+        ruleList.push(schema.option.placeholder);
+    }
+    if(minimum !== undefined) {
+        ruleList.push(`最小值 ${minimum}`);
+    }
+    if(maximum !== undefined) {
+        ruleList.push(`最大值 ${maximum}`);
+    }
+    placeholder.value = ruleList.join('|');
+}
+
+onMounted(() => {
+    initData();
+});
+
+watch([ model, schema ], () => {
+    initData();
+}, { deep: true });
+
+const isEmptyValue = (value) => {
+    return value === undefined || value === null || value === '';
+}
+
+const validate = () => {
+    validTips.value = null;
+
+    const { type } = schema;
+
+    // 校验是否必填
+    if (schema.option?.required && isEmptyValue(dtoValue.value)) {
+        validTips.value = '不能为空';
+        return false;
+    }
+
+    // ajv 校验 schema
+    if(!isEmptyValue(dtoValue.value)) {
+        const validate = ajv.compile(schema);
+        const valid = validate(dtoValue.value);
+        if (!valid && validate.errors && validate.errors[0]) {
+            const { keyword, params } = validate.errors[0];
+            if(keyword === 'type') {
+                validTips.value = `类型必须为 ${type}`;
+            } else if (keyword === 'maximum') {
+                validTips.value = `最大值应为 ${params.limit}`;
+            } else if (keyword === 'minimum') {
+                validTips.value = `最小值应为 ${params.limit}`;
+            } else {
+                console.warn('未处理的校验错误', validate.errors[0]);
+                validTips.value = '不符合要求';
+            }
+            return false;
+        }
+    }
+    return true;
+};
+
+const getValue = () => {
+    return dtoValue.value !== undefined ? { [schemaKey]: dtoValue.value } : {};
+};
+
+const onFocus = () => {
+    validTips.value = null;
+}
+
+const onBlur = () => {
+    validate();
+}
+
+defineExpose({
+    name,
+    validate,
+    getValue,
+});
+</script>
+
+<style lang="less" scoped>
+:deep(.el-input-number .el-input__inner) {
+    text-align: left;
+}
+</style>

package/app/pages/widgets/schema-form/complex-view/select/select.vue

@@ -0,0 +1,116 @@
+<template>
+    <el-row type="flex" align="middle" class="form-item">
+        <!-- label -->
+        <el-row class="item-label" justify="end">
+            <el-row
+                v-if="schema.option?.required"
+                type="flex"
+                class="required"
+            >*</el-row>
+            {{ schema.label }}
+        </el-row>
+        <!-- value -->
+        <el-row class="item-value">
+            <el-select
+                v-model="dtoValue" 
+                v-bind="schema.option"
+                class="component" 
+                :class="validTips ? 'valid-border' : ''" 
+                @change="onChange"
+            >
+                <el-option
+                    v-for="item in schema.option?.enumList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                ></el-option>
+            </el-select>
+        </el-row>
+        <!-- 错误信息 -->
+        <el-row v-if="validTips" class="valid-tips">
+            {{ validTips }}
+        </el-row>
+    </el-row>
+</template>
+
+<script setup>
+import { ref, toRefs, watch, inject, onMounted } from 'vue';
+const ajv = inject('ajv');
+
+const props = defineProps({
+    schemaKey: String,
+    schema: Object,
+    model: null, // 任意类型
+})
+
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+
+const name = ref('select');
+const dtoValue = ref();
+const validTips = ref(null);
+
+const initData = () => {
+    dtoValue.value = model.value ?? schema.option?.default;
+    validTips.value = null;
+}
+
+onMounted(() => {
+    initData();
+});
+
+watch([ model, schema ], () => {
+    initData();
+}, { deep: true });
+
+const validate = () => {
+    validTips.value = null;
+
+    // 校验是否必填
+    if (schema.option?.required && !dtoValue.value) {
+        validTips.value = '不能为空';
+        return false;
+    }
+
+    // ajv 校验 schema
+    if(dtoValue.value) {
+        let dtoEnum = [];
+        if(schema.option?.enumList) {
+            dtoEnum = schema.option?.enumList.map(item => item.value);
+        }
+        const validate = ajv.compile({ 
+            schema,
+            ...{ enum: dtoEnum },
+        });
+        const valid = validate(dtoValue.value);
+        if (!valid && validate.errors && validate.errors[0]) {
+            if(validate.errors[0].keyword === 'enum') {
+                validTips.value = '取值超出枚举范围';
+            } else {
+                console.warn('未处理的校验错误', validate.errors[0]);
+                validTips.value = '不符合要求';
+            }
+            return false;
+        }
+    }
+    return true;
+};
+
+const getValue = () => {
+    return dtoValue.value !== undefined ? { [schemaKey]: dtoValue.value } : {};
+};
+
+const onChange = () => {
+    validate();
+}
+
+defineExpose({
+    name,
+    validate,
+    getValue,
+});
+</script>
+
+<style lang="less" scoped>
+
+</style>

package/app/pages/widgets/schema-form/form-item-config.js

@@ -0,0 +1,23 @@
+import input from "./complex-view/input/input.vue";
+import inputNumber from "./complex-view/input-number/input-number.vue";
+import select from "./complex-view/select/select.vue";
+
+//  业务拓展 form-item 配置
+import BusinessFormItemConfig from '$businessFormItemConfig';
+
+const FormItemConfig = {
+    input: {
+        component: input
+    },
+    inputNumber: {
+        component: inputNumber
+    },
+    select: {
+        component: select
+    }
+};
+
+export default {
+    ...FormItemConfig,
+    ...BusinessFormItemConfig
+};