浏览代码

样式优化,提示优化

mxd 3 年之前
父节点
当前提交
a97a5c55fe

+ 18 - 10
src/components/common/magic-context-menu.vue

@@ -1,5 +1,5 @@
 <template>
-    <ul class="magic-context-menu none-select" :style="style">
+    <ul class="magic-context-menu none-select" :style="style" ref="element">
         <li v-for="(menu, key) in menus" :key="key" :class="{ divided: menu.divided }" @click.stop="() => {onMouseup(); menu.onClick && menu.onClick()}">
             <span v-if="hasIcon" class="magic-context-menu-icon"><magic-icon :icon="menu.icon" v-if="menu.icon" size="12px"/></span>
             <label>{{ menu.label }}</label>
@@ -7,6 +7,8 @@
     </ul>
 </template>
 <script>
+import {ref} from 'vue'
+
 export default {
     props: {
         menus: Array,
@@ -17,18 +19,24 @@ export default {
         return {
             style: {
                 left: this.position.x + 'px',
-                top: this.position.y + 'px'
+                top: this.position.y + 'px',
+				element: ref(null)
             }
         }
     },
     mounted(){
         document.addEventListener('click', this.onMouseup)
-        const max = this.position.x + this.$root.$el.offsetWidth
-        const rect = document.querySelector('.magic-editor').getBoundingClientRect()
-        if(rect.x + rect.width < max){
-            this.style.left = `${rect.x + rect.width - this.$root.$el.offsetWidth}px`
+		const rootRect = document.querySelector('.magic-editor').getBoundingClientRect()
+        const xMax = rootRect.x + rootRect.width
+		const yMax = rootRect.y + rootRect.height
+        const rect = this.$el.getBoundingClientRect()
+        if(rect.x + rect.width > xMax){
+            this.style.left = `${xMax - rect.width}px`
         }
-        
+		if(rect.y + rect.height > yMax){
+			this.style.top = `${yMax - rect.height}px`
+		}
+
     },
     unmounted(){
         document.removeEventListener('click', this.onMouseup)
@@ -47,7 +55,7 @@ export default {
 </script>
 <style scoped>
 .magic-context-menu{
-    position: fixed;
+    position: absolute;
     z-index: 999999;
     background-color: var(--main-background-color);
     border: 1px solid var(--main-border-color);
@@ -61,7 +69,7 @@ export default {
 }
 .magic-context-menu li > * {
     cursor: pointer;
-    word-break: keep-all;
+	white-space: pre;
 }
 .magic-context-menu li.divided{
     border-bottom: 1px solid var(--main-border-color);
@@ -79,4 +87,4 @@ export default {
 .magic-context-menu li:hover :deep(.magic-icon){
     color: var(--select-option-hover-color);
 }
-</style>
+</style>

+ 1 - 1
src/components/magic-editor.vue

@@ -96,7 +96,7 @@ const checkUpdate = () => {
 							bus.$emit(Message.NOTIFY, {
 								title: $i('message.tips'),
 								icon: 'warning',
-								content: $i('message.versionUpdate', true, json.value),
+								content: $i('message.versionUpdate', json.value),
 								buttons: [{
 									title: $i('message.changelog'),
 									onClick: () => {

+ 1 - 0
src/components/panel/api/magic-api-body.vue

@@ -26,6 +26,7 @@ const navbars = [
     width: 100%;
     height: 100%;
     display: flex;
+    position: relative;
 }
 .magic-navbar :deep(.magic-navbar-item > *){
     width: 100%;

+ 9 - 0
src/components/panel/api/magic-api-request-body.vue

@@ -15,3 +15,12 @@ const onChange = ()=>{
     }
 }
 </script>
+<style scoped>
+.magic-monaco-editor{
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+}
+</style>

+ 7 - 0
src/components/panel/api/magic-api-response-body.vue

@@ -41,4 +41,11 @@ iframe{
     height: 100%;
     border: 0;
 }
+.magic-monaco-editor{
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+}
 </style>

+ 1 - 0
src/components/panel/api/magic-api-response.vue

@@ -44,5 +44,6 @@ const navbars = [
 }
 .magic-panel-api-response :deep(.magic-navbar .magic-navbar-item){
     display: flex;
+    position: relative;
 }
 </style>

+ 2 - 2
src/components/panel/main/magic-data-resource.vue

@@ -116,7 +116,7 @@ const deleteNode = item => {
 }
 const onContextMenu = (item, event) => {
 	const menus = [{
-		label: $i('message.updateTips', props.title),
+		label: $i('message.update'),
 		icon: 'update',
 		divided: true,
 		onClick: () => {
@@ -147,7 +147,7 @@ const onContextMenu = (item, event) => {
 			})
 		}
 	}, {
-		label: $i('resource.contextmenu.copy', props.title),
+		label: $i('message.copy'),
 		icon: 'copy',
 		divided: true,
 		onClick: () => {

+ 1 - 1
src/scripts/i18n/zh-cn.js

@@ -82,7 +82,7 @@ export default {
         versionLastest: '版本检测完毕,当前已是最新版',
         versionUpdate: '检测到已有新版本{0},是否更新?',
         changelog: '更新日志',
-        versionConflict: '检测到前后端版本不一致(前端:${0} 后端:{1}),请检查',
+        versionConflict: '检测到前后端版本不一致(前端:{0} 后端:{1}),请检查',
         versionCheck: '版本检测',
         loadConfigError: '加载配置失败',
         logout: '注销登录',