@yukihong/schema-admin-x 1.0.0

package/app/pages/widgets/schema-table/schema-table.vue

@@ -0,0 +1,248 @@
+<template>
+	<div class="schema-table">
+		<el-table
+			v-if="schema && schema.properties"
+			v-loading="loading"
+			:data="tableData"
+			class="table"
+		>
+			<template v-for="(schemaItem,key) in schema.properties">
+				<el-table-column
+					v-if="schemaItem.option.visible !== false"
+					:key="key"
+					:prop="key"
+					:label="schemaItem.label"
+					v-bind="schemaItem.option"
+				></el-table-column>
+			</template>
+			<el-table-column
+				v-if="buttons?.length > 0"
+				label="操作"
+				fixed="right"
+				:width="operationWidth"
+			>
+				<template #default="scope">
+					<el-button 
+						v-for="item in buttons"
+						link
+						v-bind="item"
+						@click="operationHandler({btnConfig: item, rowData: scope.row})"
+					>{{item.label}}</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+		<el-row justify="end" class="pagination">
+			<el-pagination
+				:current-page="currentPage"
+				:page-size="pageSize"
+				:page-sizes="[10,20,50,100,200]"
+				:total="total"
+				layout="total, sizes, prev, pager, next, jumper"
+				@size-change="onPageSizeChange"
+				@current-change="onCurrentPageChange"
+			/>
+		</el-row>
+	</div>
+</template>
+
+<script setup>
+import { 
+	ref, 
+	toRefs,
+	computed,
+	watch,
+	nextTick,
+	onMounted
+} from 'vue';
+import $curl from '$elpisCommon/curl.js';
+
+const props = defineProps({
+	
+	/**
+	 * schema 配置，结构如下：
+		{
+			type: 'object',
+			properties: {
+				key: {
+					...schema, // 标准 schema 配置
+					type: '', // 字段类型
+					label: '', // 字段的中文名
+					// 字段在 table 中的相关配置
+					option: {
+						...elTableColumnConfig, // 标准的 el-table-column 配置
+						visible: true, // 默认为 true （false 或 不配置时，表示不在表单中显示）
+					}
+				},
+				...
+			}
+		}
+	 */
+	schema: Object,
+	
+	/**
+	 * 表格数据源 api
+	 */
+	api: String,
+	
+	/**
+	 * api 请求参数，请求 API 时携带
+	 */
+	apiParams: Object,
+	
+	/**
+	 * buttons 操作按钮相关配置，结构如下
+		[{
+			label: '', // 按钮中文名
+			eventKey: '', // 按钮事件名
+			eventOption: {}, // 按钮事件具体配置
+			...elButtonConfig // 标准 el-button 配置
+		}, ...]
+	 */
+	buttons: Array
+});
+
+const { schema, api, apiParams, buttons } = toRefs(props);
+
+const emit = defineEmits(['operate']);
+
+// 计算操作栏宽度
+const operationWidth = computed(() => {
+	return buttons?.value?.length > 0 ? buttons.value.reduce((pre,cur) => {
+		return pre + cur.label.length * 18;
+	}, 50) : 50;
+})
+
+const loading = ref(false);
+const tableData = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(50);
+const total = ref(0);
+
+onMounted(() => {
+	initData();
+});
+
+watch(
+	[schema, api, apiParams],
+	() => {
+		initData();
+	}, 
+	{ deep: true},
+);
+
+const initData = () => {
+	currentPage.value = 1;
+	pageSize.value = 50;
+	nextTick(async() => {
+		await loadTableData();
+	});
+}
+
+// 节流，合并触发，最大限度解决重复请求的问题
+let timerId = null;
+const loadTableData = async () => {
+	clearTimeout(timerId);
+	timerId = setTimeout(async () => {
+		await fetchTableData();
+		timerId = null; // 理定时器引用，避免内存泄漏和逻辑异常
+	}, 100)
+}
+
+const fetchTableData = async () => {
+	if(!api.value) { return; }
+	
+	showLoading();
+	
+	// 请求 table 数据
+	const res = await $curl({
+		url: `${api.value}/list`,
+		method: 'get',
+		query: {
+			...apiParams.value,
+			page: currentPage.value,
+			size: pageSize.value
+		}
+	});
+	
+	hideLoading();
+	
+	if(!res || !res.success || !Array.isArray(res.data)) {
+		tableData.value = [];
+		total.value = 0;
+		return;
+	}
+	
+	tableData.value = buildTableData(res.data);
+	total.value = res.metadata.total;
+}
+
+/**
+ * 对后端返回的数据进行渲染前的预处理
+ * @param {object} listData 列表数据
+ */
+const buildTableData = (listData) => {
+	if(!schema.value?.properties) {
+		return listData;
+	}
+	
+	return listData.map(rowData => {
+		for(const dKey in rowData) {
+			const schemaItem = schema.value.properties[dKey];
+			
+			// 处理 toFixed
+			if(schemaItem?.option?.toFixed) {
+				rowData[dKey] = rowData[dKey].toFixed && rowData[dKey].toFixed(schemaItem.option.toFixed);
+			}
+		}
+		return rowData;
+	})
+}
+
+const showLoading = () => {
+	loading.value = true;
+}
+
+const hideLoading = () => {
+	loading.value = false;
+}
+
+const operationHandler = ({ btnConfig, rowData }) => {
+	emit('operate', { btnConfig, rowData })
+}
+
+const onPageSizeChange = async (value) => {
+	pageSize.value = value;
+	await loadTableData();
+}
+
+const onCurrentPageChange = async (value) => {
+	currentPage.value = value;
+	await loadTableData();
+}
+
+defineExpose({
+	initData,
+	loadTableData,
+	showLoading,
+	hideLoading
+})
+
+</script>
+
+<style lang="less" scoped>
+.schema-table {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
+	
+	.table {
+		flex: 1;
+	}
+	
+	.pagination {
+		margin: 10px 0;
+		text-align: right;
+	}
+}
+</style>

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

@@ -0,0 +1,28 @@
+<template>
+	<el-container class="sider-container">
+		<el-aside width="200px" class="aside">
+			<slot name="menu-content"></slot>
+		</el-aside>
+		<el-main class="main">
+			<slot name="main-content"></slot>
+		</el-main>
+	</el-container>
+</template>
+
+<script setup>
+</script>
+
+<style lang="less" scoped>
+	.sider-container {
+		height: 100%;
+	}
+	.aside {
+		border-right: 1px solid #e8e8e8;
+	}
+	.main {
+		overflow: scroll;
+	}
+	:deep(.el-menu) {
+		border-right: 0;
+	}
+</style>

package/app/public/static/normalize.css

@@ -0,0 +1,239 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */    
+html,body,span,div,p,a,table,tbody,td,h1,h2,h3,img,form,font,strong,b,i,dl,dt,dd,ol,ul,li,dl,dd,dt,iframe,label,blockquote,input,button
+{
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+html {
+    font-family: "Open Sans","Helvetica Neue","Microsoft Yahei",sans-serif;/* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+    background-color: transparent;
+    text-decoration: none;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+    border: 0;
+}
+
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+    margin: 1em 40px;
+}
+
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+a *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    color: inherit; /* 1 */
+    font: inherit; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+    overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+    line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+td,
+th {
+    padding: 0;
+}

package/app/router/project.js

@@ -0,0 +1,7 @@
+module.exports = (app,router) => {
+	// controll loader 处理后 可用 app.controller.view 获取内容
+	const { project: projectController } = app.controller;
+	router.get('/api/project', projectController.get.bind(projectController));
+	router.get('/api/project/list', projectController.getList.bind(projectController));
+	router.get('/api/project/model_list', projectController.getModelList.bind(projectController));
+}

package/app/router/view.js

@@ -0,0 +1,10 @@
+module.exports = (app,router) => {
+	// controll loader 处理后 可用 app.controller.view 获取内容
+	const { view: viewController } = app.controller;
+	
+	// 用户输入 http://ip:port/view/page1 就能渲染出对应的页面
+	// Koa Router 动态路由参数,:page 匹配到 page1 并将其挂载到 ctx.params.page 上
+	router.get('/view/:page', viewController.renderPage.bind(viewController));
+	// 用户输入 http://ip:port/view/xx/xx/xx/* 就能渲染出对应的页面
+	router.get('/view/:page/*', viewController.renderPage.bind(viewController));
+}

package/app/router-schema/project.js

@@ -0,0 +1,30 @@
+module.exports = {
+	'/api/project': {
+		get: {
+			query: {
+				type: 'object',
+				projecties: {
+					proj_key: {
+						type: 'string'
+					}
+				},
+				required: ['proj_key']
+			}
+		}
+	},
+	'/api/project/list': {
+		get: {
+			query: {
+				type: 'object',
+				properties: {
+					proj_key: {
+						type: 'string'
+					}
+				}
+			}
+		}
+	},
+	'/api/project/model_list': {
+		get: {}
+	}
+}

package/app/service/base.js

@@ -0,0 +1,13 @@
+const superagent = require('superagent');
+
+module.exports = (app) => class BaseService {
+	/**
+	 * service 基类
+	 * 统一收拢 service 相关的公共方法
+	 */
+	constructor() {
+		this.app = app;
+		this.config = app.config;
+		this.curl = superagent;
+	}
+}

package/app/service/project.js

@@ -0,0 +1,50 @@
+module.exports = (app) => {
+	const BaseService = require('./base.js')(app);
+	const modelList = require('../../model/index.js')(app);
+	
+	return class ProjectService extends BaseService {
+		
+		/**
+		 * 根据 projKey 获取项目配置
+		 */
+		get(projKey) {
+			let projConfig;
+			
+			modelList.forEach(modelItem => {
+				if(modelItem.project[projKey]) {
+					projConfig = modelItem.project[projKey];   
+				}
+			})
+			
+			return projConfig;
+		}
+		
+		/**
+		 * 获取统一模型下的项目列表（如果无 projKey，取全量）
+		 */
+		getList({projKey}) {
+			return modelList.reduce((preList, modelItem) => {
+				const { project } = modelItem;
+				
+				// 如果有传 projKey 则只取当前同模型下的项目，不传的情况下则取全量
+				if(projKey && !project[projKey]) { 
+					return preList; 
+				}
+				
+				for( const pKey in project) {
+					preList.push(project[pKey]);
+				}
+				
+				return preList;
+			}, []);
+			
+		}
+		
+		/**
+		 * 获取所有模型与项目的结构化数据
+		 */
+		async getModelList() {
+			return modelList;
+		}
+	}
+}

package/app/view/entry.tpl

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="dark">
+	<head>
+		<meta charset="utf-8">
+		<title>{{ name }}</title>
+		<link rel="stylesheet" href="/static/normalize.css" />
+		<link rel="icon" href="/static/logo.png" type="image/x-icon" />
+	</head>
+	<body style="color:blue;">
+		<div id="root"></div>
+		<input id="projKey" value="{{ projKey }}" style="display: none;"/>
+		<input id="env" value="{{ env }}" style="display: none;"/>
+		<input id="options" value="{{ options }}"  style="display: none;"/>
+	</body>
+	<script type="text/javascript">
+		try {
+			window.projKey = document.getElementById('projKey').value;
+			window.env = document.getElementById('env').value;
+			const options = document.getElementById('options').value;
+			window.options = JSON.parse(options)
+		} catch (e) {
+			console.log(e)
+		}
+	</script>
+</html>