样式优化、代码优化、i18n优化、修复RequestBody、ResponseBody结构不更新的问题

src/components/common/data/magic-table.css

@@ -28,6 +28,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   width: 0px;
+  white-space: pre;
 }
 
 .magic-table .magic-table-column .magic-select{

src/components/common/data/magic-table.js

@@ -12,7 +12,10 @@ export default {
             type: Boolean,
             default: false
         },
-        align: String
+        align: {
+            type: Boolean,
+            default: 'center'
+        },
     },
     emits: ['clickRow', 'contextmenu', 'loadNext'],
     render() {
@@ -31,7 +34,7 @@ export default {
                 styles.push(`flex: ${prop.flex}`)
             }
             if (prop.align || this.align) {
-                styles.push(`justify-content: ${this.align || prop.align}`)
+                styles.push(`justify-content: ${this.align || prop.align};text-align: ${this.align || prop.align}`)
             }
             
             return styles.join(';')
@@ -39,7 +42,7 @@ export default {
         return h('div', {
             class: `magic-table` + (this.border ? ' magic-table__border' : '' )
         }, [
-            h('div', { class: 'magic-table-header none-select' }, slots.map(item => h('div', { class: 'magic-table-column', style: _getTableColumnStyle(item.props) }, item.props.title))),
+            h('div', { class: 'magic-table-header none-select' }, slots.map(item => h('div', { class: 'magic-table-column', title: item.props.title, style: _getTableColumnStyle(item.props) }, h('span', item.props.title)))),
             h('div',{ class: 'magic-table-body', onScroll: e => {
                 if(e.target.scrollTop + e.target.offsetHeight + 40 >= e.target.scrollHeight){
                     this.$emit('loadNext')

src/components/common/dialog/magic-confirm.vue

@@ -1,6 +1,6 @@
 <template>
     <magic-dialog v-model:value="show" :title="title" ref="dialog" @close="onClose()">
-        <pre v-html="message"></pre>
+        <pre v-html="message" style="white-space: pre-wrap;"></pre>
         <magic-button-group align="right" style="padding: 5px 0">
             <magic-button :value="ok" type="active" @onClick="() => { success(); $refs.dialog.close(); }"/>
             <magic-button :value="cancel" @onClick="$refs.dialog.close()"/>
@@ -37,9 +37,4 @@ defineProps({
     }
 })
 const show = ref(true)
-</script>
-<style scoped>
-.magic-dialog :deep(.magic-dialog-body > pre){
-    white-space: normal;
-}
-</style>
+</script>

src/components/common/dialog/magic-dialog.vue

@@ -184,7 +184,7 @@ defineExpose({ close })
 }
 .magic-dialog-body{
     text-align: left;
-    word-break: break-word;
+    word-break: break-all;
 }
 .magic-dialog :deep(.magic-loading){
     min-width: 200px;

src/components/common/magic-context-menu.vue

@@ -48,7 +48,7 @@ export default {
 <style scoped>
 .magic-context-menu{
     position: fixed;
-    z-index: 10;
+    z-index: 999999;
     background-color: var(--main-background-color);
     border: 1px solid var(--main-border-color);
 }

src/components/common/magic-monaco-editor.vue

@@ -8,7 +8,7 @@ import $i from '../../scripts/i18n.js'
 import { CommandsRegistry } from 'monaco-editor/esm/vs/platform/commands/common/commands'
 import { KeybindingsRegistry } from 'monaco-editor/esm/vs/platform/keybinding/common/keybindingsRegistry.js'
 import { ContextKeyExpr } from 'monaco-editor/esm/vs/platform/contextkey/common/contextkey.js'
-import { nextTick } from '@vue/runtime-core'
+import { nextTick } from 'vue'
 export default {
 	props: {
 		language: { type: String, required: true },
@@ -146,7 +146,7 @@ export default {
 						}])
 					}
                     this.updateDecoration()
-                    
+
 				}
             })
 		},
@@ -198,4 +198,4 @@ export default {
 .magic-monaco-editor :deep(.breakpoint-line) {
     background: var(--breakpoint-line-background-color);
 }
-</style>
+</style>

src/components/panel/api/magic-api-request-structure.vue

@@ -4,7 +4,7 @@
             <span :style="{paddingLeft: `${(row.level + (row.folder ? 0 : 1)) * 16}px`}" @click="doExpand(row)">
                 <magic-icon v-if="row.folder" :icon="row.expand ? 'arrow-bottom' : 'arrow-right'" />
             </span>
-            <span>{{ row.name || '-' }}</span>
+            <span :title="row.name || '-'">{{ row.name || '-' }}</span>
         </magic-table-column>
         <magic-table-column :title="$i('message.required')" #default="{ row }" width="65">
             <magic-checkbox v-model:value="row.node.required"/>
@@ -37,8 +37,14 @@
 <script setup>
 import { computed, inject} from 'vue'
 import $i from '../../../scripts/i18n.js'
+import { definition2TreeList } from '../../../scripts/utils.js'
 const opened = inject('opened')
-const filteredTreeList = computed(() => (opened.value.requestBodyTree || []) .filter(it => it.display))
+const filteredTreeList = computed(() => {
+    if(!opened.value.requestBodyTree && opened.value?.item?.requestBodyDefinition){
+        opened.value.requestBodyTree = definition2TreeList(opened.value.item.requestBodyDefinition)
+    }
+    return (opened.value.requestBodyTree || []).filter(it => it.display)
+})
 const doExpand = (item) => {
     const start = opened.value.requestBodyTree.findIndex(it => it === item)
     const startLevel = item.level
@@ -63,8 +69,8 @@ const doExpand = (item) => {
     text-align: center;
 }
 .magic-table :deep(.magic-table-column:first-child){
-    justify-content: unset;
-    text-align:unset;
+    justify-content: unset !important;
+    text-align:unset !important;
 }
 .magic-data-type{
     display: inline-block;

src/components/panel/api/magic-api-response-structure.vue

@@ -55,8 +55,8 @@ const filteredTreeList = computed(() => {
     text-align: center;
 }
 .magic-table :deep(.magic-table-column:first-child){
-    justify-content: unset;
-    text-align:unset;
+    justify-content: unset !important;
+    text-align:unset !important;
 }
 .magic-data-type{
     display: inline-block;

src/components/panel/api/magic-api-response.vue

@@ -10,7 +10,7 @@
     </div>
 </template>
 <script setup>
-import { resolveDynamicComponent } from "@vue/runtime-core"
+import { resolveDynamicComponent } from 'vue'
 import $i from '../../../scripts/i18n.js'
 defineProps({
     opened: Object
@@ -45,4 +45,4 @@ const navbars = [
 .magic-panel-api-response :deep(.magic-navbar .magic-navbar-item){
     display: flex;
 }
-</style>
+</style>

src/components/panel/footer/magic-log.vue

@@ -66,7 +66,7 @@ const _pushLog = items => {
 	}
 }
 bus.$event(Socket.LOGS, ([ rows ]) => _pushLog(rows))
-bus.$event(Socket.LOG, ([ row ]) => _pushLog([row]))
+bus.$event(Socket.LOG, ([ row ]) => _pushLog(row))
 
 </script>
 <style>

src/components/panel/main/magic-script-editor.vue

@@ -23,7 +23,9 @@
 				</template>
 			</magic-tab>
 			<magic-loading :loading="loading">
-				<magic-monaco-editor ref="editor" v-model:value="selectTab.item.script" v-model:decorations="selectTab.decorations" language="magicscript" :support-breakpoint="true"/>
+				<div class="magic-monaco-editor-wrapper">
+					<magic-monaco-editor ref="editor" v-model:value="selectTab.item.script" v-model:decorations="selectTab.decorations" language="magicscript" :support-breakpoint="true"/>
+				</div>
 			</magic-loading>
 		</template>
 	</div>
@@ -298,11 +300,16 @@ onMounted(() => emit('onLoad'))
 <style scoped>
 .magic-script-editor{
 	flex: 1;
-	display: flex;
-	flex-direction: column;
-	overflow: auto;
+	overflow: hidden;
 	position: relative;
 }
+.magic-script-editor .magic-monaco-editor-wrapper{
+    position: absolute;
+	top: 30px;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
 .magic-empty-container{
 	flex: 1;
 	position: relative;
@@ -331,10 +338,11 @@ onMounted(() => emit('onLoad'))
 }
 .magic-monaco-editor{
 	position: absolute;
-	top: 30px;
+	top: 0;
 	bottom: 0;
 	left:0;
 	right: 0;
+	overflow: visible !important;
 }
 .magic-script-editor :deep(.magic-avatar-group){
 	margin-left: 5px;

src/scripts/i18n/en.js

@@ -84,7 +84,7 @@ export default {
         changelog: 'CHANGELOG',
         versionConflict: 'Version does not matched frontend: {0}, backend: {1}, Please Check!',
         versionCheck: 'Version Check',
-
+        loadConfigError: 'Failed to load configuration',
         logout: 'Logout',
         logoutSuccess: 'Logout Success',
         logoutConfirm: 'Are you sure Logout {0} ?',
@@ -201,7 +201,14 @@ export default {
         validateType: 'Validate Type',
         expression: 'Expression or Regex Pattern',
         validate: 'Validate Description',
-        field: 'Field'
+        field: 'Field',
+        test: {
+            requestBodyError: 'RequestBody Has Error, please check!',
+            missPath: 'Please enter PathVariable',
+            requestError: 'Failed to send Request「{0}」',
+            success: '「{0}」Request finish, Status:<em>{1}</em> Size:<em>{2}</em> Time：<em>{3} ms</em>',
+            begin: 'Start Request For「{0}」'
+        }
     },
     datasource: {
         title: 'DataSource',
@@ -345,7 +352,7 @@ export default {
         '1029': 'Header validation failed',
         '1030': 'PathVariable validation failed',
         '1031': 'RequestBody validation failed',
-        '1032': '请上传文件',
+        '1032': 'Please Upload File',
         '1033': 'Failed to validate Signature. Please check whether the secret key is correct',
         '1034': 'Backup is not enabled and cannot be operated',
         '1035': 'Api Not Found'

src/scripts/i18n/zh-cn.js

@@ -202,7 +202,14 @@ export default {
         validateType: '验证方式',
         expression: '表达式或正则表达式',
         validate: '验证说明',
-        field: '字段'
+        field: '字段',
+        test: {
+            requestBodyError: 'RequestBody 参数有误，请检查！',
+            missPath: '请填写路径变量后在测试！',
+            requestError: '请求「{0}」出错',
+            success: '「{0}」测试完毕，状态：<em>{1}</em> 大小：<em>{2}</em> 耗时：<em>{3} ms</em>',
+            begin: '开始测试「{0}」'
+        }
     },
     datasource: {
         title: 'DataSource',

src/scripts/service/magic-api.js

@@ -6,7 +6,7 @@ import $i from '../i18n.js'
 import modal from '../../components/common/dialog/magic-modal.js'
 import { definition2TreeList, getSizeUnit } from '../utils.js'
 import { parseJson } from '../parsing/parser.js'
-import { nextTick } from '@vue/runtime-core'
+import { nextTick } from 'vue'
 function sendApiTestRequest(opened, requestConfig) {
 	bus.$emit(Message.SWITCH_TOOLBAR, 'log')
 	requestConfig.headers[constants.HEADER_REQUEST_CLIENT_ID] = constants.CLIENT_ID
@@ -35,12 +35,12 @@ function sendApiTestRequest(opened, requestConfig) {
 		})
 	}]
 	const fullName = opened.path()
-	bus.status(`开始测试「${fullName}」`)
+	bus.status('api.test.begin', true, fullName)
 	const start = new Date().getTime()
 	request.execute(requestConfig).then(res => res.data.then(data => {
-		bus.status(`「${fullName}」测试完毕，状态：<em>${res.status}</em> 大小：<em>${getSizeUnit(dataLen)}</em> 耗时：<em>${new Date().getTime() - start} ms</em>`)
+		bus.status('api.test.success', true, fullName, res.status, getSizeUnit(dataLen), new Date().getTime() - start)
 		opened.running = false
-		if(opened.responseBlob = data instanceof Blob){
+		if((opened.responseBlob = data instanceof Blob)){
 			opened.responseBlobValue = data
 			opened.item.responseBody = null
 			opened.item.responseBodyDefinition = null
@@ -54,7 +54,7 @@ function sendApiTestRequest(opened, requestConfig) {
 		opened.responseHeaders = res.headers
 		nextTick(() => bus.$emit(Message.SWITCH_TOOLBAR, 'response'))
 	})).catch(error => {
-		bus.status(`请求出错：「${fullName}」`, false)
+		bus.status('api.test.requestError', false, fullName)
 		opened.running = false
 		request.processError(error)
 	})
@@ -72,11 +72,11 @@ function doApiTest(opened) {
 		responseType: 'json',
 		withCredentials: true
 	}
-	const setPaths = paths => paths.filter(it => it.value && it.value.trim()).forEach(it => requestConfig.url = requestConfig.url.replace(new RegExp(`\{${it.name}\}`, "g"), it.value.trim()))
+	const setPaths = paths => paths.filter(it => it.value && it.value.trim()).forEach(it => requestConfig.url = requestConfig.url.replace(new RegExp(`\\{${it.name}\}`, "g"), it.value.trim()))
 	opened.getGroups().filter(it => it.paths && it.paths.length > 0).map(it => it.paths).forEach(paths => setPaths(paths))
 	setPaths(info.paths || [])
 	if (requestConfig.url.indexOf('{') > -1) {
-		modal.alert('请填写路径变量后在测试！')
+		modal.alert($i('api.test.missPath'))
 		opened.running = false
 		return;
 	}
@@ -118,7 +118,7 @@ function doApiTest(opened) {
 			}
 		} catch (e) {
 			opened.running = false
-			modal.alert('RequestBody 参数有误，请检查！')
+			modal.alert($i('api.test.requestBodyError'))
 		}
 
 	}
@@ -162,4 +162,4 @@ export default {
 			options: item.options.filter(it => it.name)
 		}
 	}
-}
+}

src/scripts/service/magic-datasource.js

@@ -3,11 +3,11 @@ import $i from '../i18n.js'
 import modal from '../../components/common/dialog/magic-modal.js'
 import JavaClass from '../editor/java-class.js'
 let findResources
-JavaClass.setExtensionAttribute('org.ssssssss.magicapi.modules.SQLModule', () => {
+JavaClass.setExtensionAttribute('org.ssssssss.magicapi.modules.db.SQLModule', () => {
 	return findResources && (findResources('datasource')[0]?.children || []).filter(it => it.key).map(it => {
 		return {
 			name: it.key,
-			type: 'org.ssssssss.magicapi.modules.SQLModule',
+			type: 'org.ssssssss.magicapi.modules.db.SQLModule',
 			comment: it.name
 		}
 	}) || []