🎉 🎉 🎉 v5.0 新里程碑

🎉 🎉 🎉 v5.0 新里程碑

package-lock.json

@@ -1,12 +1,12 @@
 {
-	"name": "pigx-ui-pro",
+	"name": "pigx-ui",
-	"version": "1.0.0",
+	"version": "5.0.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "pigx-ui-pro",
+			"name": "pigx-ui",
-			"version": "1.0.0",
+			"version": "5.0.0",
 			"license": "不对外分发 pig4cloud 版权所有，请购买商业版权",
 			"dependencies": {
 				"@chenfengyuan/vue-qrcode": "^2.0.0",
@@ -19,7 +19,7 @@
 				"driver.js": "^0.9.8",
 				"echarts": "^5.4.1",
 				"element-plus": "2.3.1",
-				"form-designer": "^0.0.3",
+				"form-designer-plus": "^0.0.1",
 				"highlight.js": "^11.7.0",
 				"js-cookie": "^3.0.1",
 				"mitt": "^3.0.0",
@@ -34,6 +34,7 @@
 				"vue-clipboard3": "^2.0.0",
 				"vue-i18n": "^9.2.2",
 				"vue-router": "^4.1.6",
+				"vue3-ts-jsoneditor": "^2.8.6",
 				"vxe-table": "^4.3.5",
 				"xe-utils": "^3.5.4"
 			},
@@ -2279,10 +2280,10 @@
 				"node": ">= 6"
 			}
 		},
-		"node_modules/form-designer": {
+		"node_modules/form-designer-plus": {
-			"version": "0.0.3",
+			"version": "0.0.1",
-			"resolved": "https://packages.aliyun.com/61a630ff97fb514e99e0db31/npm/npm-registry/form-designer/-/form-designer-0.0.3.tgz",
+			"resolved": "https://registry.npmjs.org/form-designer-plus/-/form-designer-plus-0.0.1.tgz",
-			"integrity": "sha512-xQYrTN51ry+ZCux7lJBZqR/U7N2EqfiCj7VvMPaZ+oHTXJRW8zbP6hnAsWdKM208t6tsQjKhhhK55d+EMhJDAA=="
+			"integrity": "sha512-TKDJKQmwKjWi1sxHZIw4vQ8vP5WAy7pbI2ci0umE5QJi/yXGytzTrPHHboJGAMKVa8+8aIKmA6TSixrIcJjcOQ=="
 		},
 		"node_modules/fs-extra": {
 			"version": "10.1.0",
@@ -4051,6 +4052,11 @@
 				"uuid": "dist/bin/uuid"
 			}
 		},
+		"node_modules/vanilla-jsoneditor": {
+			"version": "0.16.1",
+			"resolved": "https://registry.npmjs.org/vanilla-jsoneditor/-/vanilla-jsoneditor-0.16.1.tgz",
+			"integrity": "sha512-Wirg6DoCrJpYwMHxkwyvgQ16gr4kgH9zzueHSSSovzQDvlg/XSqpY/stVsI5lz1vqJW1RAtr0Ilyyg1AbokRXA=="
+		},
 		"node_modules/vite": {
 			"version": "4.1.4",
 			"resolved": "https://registry.npmmirror.com/vite/-/vite-4.1.4.tgz",
@@ -4247,6 +4253,27 @@
 				"@vue/devtools-api": "^6.4.5"
 			}
 		},
+		"node_modules/vue3-ts-jsoneditor": {
+			"version": "2.8.6",
+			"resolved": "https://registry.npmjs.org/vue3-ts-jsoneditor/-/vue3-ts-jsoneditor-2.8.6.tgz",
+			"integrity": "sha512-sWH15XPppsfadM9KcvKpe4tVsu/DURQodjNeuktKXBXbtYPjDHt01UXUfBy4d8nUmKuRIrldpn+MOw1APRa22g==",
+			"funding": [
+				"https://uahelp.monobank.ua/",
+				"https://bank.gov.ua/en/news/all/natsionalniy-bank-vidkriv-spetsrahunok-dlya-zboru-koshtiv-na-potrebi-armiyi",
+				"https://www.comebackalive.in.ua/",
+				"https://armysos.com.ua/donate/",
+				"http://wings-phoenix.org.ua/en/about-fund/",
+				"https://novaposhta.ua/eng/",
+				"https://voices.org.ua/en/donat/",
+				"https://www.unicef.org.uk/donate/donate-now-to-protect-children-in-ukraine/",
+				"https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=FYFZPVQN8J7YC&source=url",
+				"https://novaukraine.org/"
+			],
+			"dependencies": {
+				"vanilla-jsoneditor": "^0.16.0",
+				"vue": "^3.2.37"
+			}
+		},
 		"node_modules/vxe-table": {
 			"version": "4.3.9",
 			"resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-4.3.9.tgz",
@@ -6152,10 +6179,10 @@
 				"mime-types": "^2.1.12"
 			}
 		},
-		"form-designer": {
+		"form-designer-plus": {
-			"version": "0.0.3",
+			"version": "0.0.1",
-			"resolved": "https://packages.aliyun.com/61a630ff97fb514e99e0db31/npm/npm-registry/form-designer/-/form-designer-0.0.3.tgz",
+			"resolved": "https://registry.npmjs.org/form-designer-plus/-/form-designer-plus-0.0.1.tgz",
-			"integrity": "sha512-xQYrTN51ry+ZCux7lJBZqR/U7N2EqfiCj7VvMPaZ+oHTXJRW8zbP6hnAsWdKM208t6tsQjKhhhK55d+EMhJDAA=="
+			"integrity": "sha512-TKDJKQmwKjWi1sxHZIw4vQ8vP5WAy7pbI2ci0umE5QJi/yXGytzTrPHHboJGAMKVa8+8aIKmA6TSixrIcJjcOQ=="
 		},
 		"fs-extra": {
 			"version": "10.1.0",
@@ -7460,6 +7487,11 @@
 			"integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
 			"dev": true
 		},
+		"vanilla-jsoneditor": {
+			"version": "0.16.1",
+			"resolved": "https://registry.npmjs.org/vanilla-jsoneditor/-/vanilla-jsoneditor-0.16.1.tgz",
+			"integrity": "sha512-Wirg6DoCrJpYwMHxkwyvgQ16gr4kgH9zzueHSSSovzQDvlg/XSqpY/stVsI5lz1vqJW1RAtr0Ilyyg1AbokRXA=="
+		},
 		"vite": {
 			"version": "4.1.4",
 			"resolved": "https://registry.npmmirror.com/vite/-/vite-4.1.4.tgz",
@@ -7614,6 +7646,15 @@
 				"@vue/devtools-api": "^6.4.5"
 			}
 		},
+		"vue3-ts-jsoneditor": {
+			"version": "2.8.6",
+			"resolved": "https://registry.npmjs.org/vue3-ts-jsoneditor/-/vue3-ts-jsoneditor-2.8.6.tgz",
+			"integrity": "sha512-sWH15XPppsfadM9KcvKpe4tVsu/DURQodjNeuktKXBXbtYPjDHt01UXUfBy4d8nUmKuRIrldpn+MOw1APRa22g==",
+			"requires": {
+				"vanilla-jsoneditor": "^0.16.0",
+				"vue": "^3.2.37"
+			}
+		},
 		"vxe-table": {
 			"version": "4.3.9",
 			"resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-4.3.9.tgz",

package.json

@@ -1,6 +1,6 @@
 {
-	"name": "pigx-ui-pro",
+	"name": "pigx-ui",
-	"version": "1.0.0",
+	"version": "5.0.0",
 	"description": "PIGCLOUD微服务开发平台",
 	"author": "pig4cloud",
 	"license": "不对外分发 pig4cloud 版权所有，请购买商业版权",
@@ -19,11 +19,11 @@
 		"@wangeditor/editor-for-vue": "5.1.12",
 		"axios": "^1.3.3",
 		"crypto-js": "^3.1.9-1",
+		"driver.js": "^0.9.8",
 		"echarts": "^5.4.1",
 		"element-plus": "2.3.1",
 		"form-designer-plus": "^0.0.1",
 		"highlight.js": "^11.7.0",
-		"driver.js": "^0.9.8",
 		"js-cookie": "^3.0.1",
 		"mitt": "^3.0.0",
 		"nprogress": "^0.2.0",
@@ -37,6 +37,7 @@
 		"vue-clipboard3": "^2.0.0",
 		"vue-i18n": "^9.2.2",
 		"vue-router": "^4.1.6",
+		"vue3-ts-jsoneditor": "2.8.6",
 		"vxe-table": "^4.3.5",
 		"xe-utils": "^3.5.4"
 	},

src/api/admin/route.ts

@@ -0,0 +1,24 @@
+import request from '/@/utils/request';
+
+export const fetchList = (query?: Object) => {
+	return request({
+		url: '/admin/route',
+		method: 'get',
+		params: query,
+	});
+};
+
+export const putObj = (obj?: object) => {
+	return request({
+		url: '/admin/route',
+		method: 'put',
+		data: obj,
+	});
+};
+
+export const refreshObj = () => {
+	return request({
+		url: '/actuator/gateway/refresh',
+		method: 'post',
+	});
+};

src/views/ext/route.vue

@@ -0,0 +1,73 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<el-alert title="路由配置是非常专业的事情，不建议非工程师操作" type="warning" />
+
+			<el-scrollbar class="mt10">
+				<vue-jsoneditor mode="table" :queryLanguagesIds="queryLanguages" v-model:json="jsonData" v-loading="loading" />
+				<div align="center" class="copy_btn">
+					<el-button type="primary" @click="edit()" :disabled="loading">更新</el-button>
+				</div>
+				<div align="center">
+					<el-button type="primary" @click="edit()" :disabled="loading">更新</el-button>
+				</div>
+			</el-scrollbar>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" name="routeConfig" setup>
+import VueJsoneditor from 'vue3-ts-jsoneditor';
+import { fetchList, putObj, refreshObj } from '/@/api/admin/route';
+import type { QueryLanguageId } from 'vue3-ts-jsoneditor';
+import { useMessage } from '/@/hooks/message';
+import { useI18n } from 'vue-i18n';
+import { renderValue } from 'vanilla-jsoneditor';
+
+const { t } = useI18n();
+const jsonData = ref({});
+const loading = ref(false);
+const queryLanguages = ref<QueryLanguageId[]>(['javascript', 'lodash', 'jmespath']);
+
+const edit = async () => {
+	loading.value = true;
+
+	try {
+		await putObj(jsonData.value);
+		await refreshObj();
+		useMessage().success(t('common.optSuccessText'));
+	} catch (err: any) {
+		useMessage().error(err.msg);
+	} finally {
+		loading.value = false;
+	}
+};
+
+onMounted(() => {
+	fetchList().then((response) => {
+		const result = response.data;
+		for (var i = 0; i < result.length; i++) {
+			const route = result[i];
+			if (route.predicates) {
+				const predicates = route.predicates;
+				route.predicates = JSON.parse(predicates);
+			}
+			if (route.filters) {
+				const filters = route.filters;
+				route.filters = JSON.parse(filters);
+			}
+		}
+		jsonData.value = result;
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+.copy_btn {
+	position: absolute;
+	top: 60px;
+	right: 20px;
+	z-index: 9;
+	color: rgb(255, 255, 255);
+}
+</style>