@yukihong/schema-admin-x 1.0.0

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

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

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,61 @@
+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 = function({key, value}, mList = menuList.value) {
+		for(let i = 0; i < mList.length; ++i) {
+			const menuItem = mList[i];
+			if(!menuItem) { continue; }
+			
+			const { menuType, moduleType } = menuItem;
+			
+			if(menuItem[key] === value) {
+				return menuItem;
+			}
+			
+			if(menuType === 'group' && menuItem.subMenu) {
+				const mItem = findMenuItem({key, value}, menuItem.subMenu);
+				if(mItem) { return mItem; }
+			}
+			
+			if(moduleType === 'sider' && menuItem.siderConfig && menuItem.siderConfig.menu) {
+				const mItem = findMenuItem({key, value}, menuItem.siderConfig.menu);
+				if(mItem) { return mItem; }
+			}
+		}
+	}
+	
+	/**
+	 * 找出第一个菜单目录
+	 * @param mList 菜单列表
+	 */
+	const findFirstMenuItem = function(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,17 @@
+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,109 @@
+<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" 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" 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 = function(event) {
+	console.log(event)
+}
+	
+</script>
+
+<style lang="less" scoped>
+.header-container {
+	height: 100%;
+	min-width: 1000px;
+	overflow: hidden;
+	
+	.header {
+		max-height: 120px;
+		border-bottom: 2px 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,146 @@
+<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"
+			></el-input>
+		</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');
+
+let 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.log(validate.errors[0]);
+			}
+			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,140 @@
+<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"
+			></el-input-number>
+		</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('inputNumber');
+
+let 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(minimum !== undefined) {
+		ruleList.push(`最小值:${minimum}`);
+	}
+	if(maximum !== undefined) {
+		ruleList.push(`最大值:${maximum}`);
+	}
+	
+	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 === 'minimum') {
+				validTips.value = `最小值应为${params.limit}`;
+			} else if (keyword === 'maximum') {
+				validTips.value = `最大值应为${params.limit}`;
+			} else {
+				console.log(validate.errors[0]);
+			}
+			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,121 @@
+<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');
+
+let 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.log(validate.errors[0]);
+			}
+			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
+};