调整图标显示

magic-editor/src/console/src/assets/index.css

@@ -251,27 +251,6 @@
     background: var(--dialog-button-hover-background);
     border-color: var(--dialog-button-hover-border-color);
 }
-.ma-svg-icon{
-    display: inline-block;
-    width: 30px;
-    height: 12px;
-    background-repeat: no-repeat;
-}
-.ma-svg-icon.request-method-GET{
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjI4IiBoZWlnaHQ9IjEyIiBmb250LXNpemU9IjEwIiBmb250LXdlaWdodD0iYm9sZCI+PHRleHQgeD0iMTQiIHk9IjgiIGZpbGw9IiMyNDlDNDciIHN0eWxlPSJkb21pbmFudC1iYXNlbGluZTogbWlkZGxlO3RleHQtYW5jaG9yOm1pZGRsZTsiID5HRVQ8L3RleHQ+PC9zdmc+');
-}
-.ma-svg-icon.request-method-POST{
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjI4IiBoZWlnaHQ9IjEyIiBmb250LXNpemU9IjEwIiBmb250LXdlaWdodD0iYm9sZCI+PHRleHQgeD0iMTQiIHk9IjgiIGZpbGw9IiNGRkI0MDAiIHN0eWxlPSJkb21pbmFudC1iYXNlbGluZTogbWlkZGxlO3RleHQtYW5jaG9yOm1pZGRsZTsiID5QT1NUPC90ZXh0Pjwvc3ZnPg==');
-}
-.ma-svg-icon.request-method-PUT{
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjI4IiBoZWlnaHQ9IjEyIiBmb250LXNpemU9IjEwIiBmb250LXdlaWdodD0iYm9sZCI+PHRleHQgeD0iMTQiIHk9IjgiIGZpbGw9IiMwOTdCRUQiIHN0eWxlPSJkb21pbmFudC1iYXNlbGluZTogbWlkZGxlO3RleHQtYW5jaG9yOm1pZGRsZTsiID5QVVQ8L3RleHQ+PC9zdmc+');
-}
-.ma-svg-icon.request-method-DELETE{
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjI4IiBoZWlnaHQ9IjEyIiBmb250LXNpemU9IjEwIiBmb250LXdlaWdodD0iYm9sZCI+PHRleHQgeD0iMTQiIHk9IjgiIGZpbGw9IiNFQjIwMTMiIHN0eWxlPSJkb21pbmFudC1iYXNlbGluZTogbWlkZGxlO3RleHQtYW5jaG9yOm1pZGRsZTsiID5ERUw8L3RleHQ+PC9zdmc+');
-}
-.ma-svg-icon.icon-function{
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjI4IiBoZWlnaHQ9IjEyIiBmb250LXNpemU9IjEwIiBmb250LXdlaWdodD0iYm9sZCI+PHRleHQgeD0iMTQiIHk9IjgiIGZpbGw9IiM5MDEyRkUiIHN0eWxlPSJkb21pbmFudC1iYXNlbGluZTogbWlkZGxlO3RleHQtYW5jaG9yOm1pZGRsZTsiID5GbjwvdGV4dD48L3N2Zz4=');
-}
 
 .ma-request-wrapper {
     background: var(--background);

magic-editor/src/console/src/components/common/magic-text-icon.vue

@@ -0,0 +1,44 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="36" height="12" font-size="10" font-weight="bold">
+    <text x="16" y="8" :fill="color" style="dominant-baseline: middle;text-anchor:middle;" >{{ text }}</text>
+  </svg>
+</template>
+<script>
+export default {
+  name: 'MagicTextIcon',
+  props: {
+    value: String
+  },
+  data(){
+    return {
+      colors: {
+        GET: '#249C47',
+        POST: '#FFB400',
+        DELETE: ['DEL', '#EB2013'],
+        PUT: '#097BED',
+        'function': ['Fn', '#9012FE']
+      }
+    }
+  },
+  computed: {
+    text: function() {
+      let color = this.colors[this.value]
+      let text = this.value
+      if(color !== undefined && Array.isArray(color)) {
+        text = color[0]
+      }
+      return text
+    },
+    color: function() {
+      let color = this.colors[this.value]
+      if(color !== undefined && Array.isArray(color)) {
+        return color[1]
+      }
+      return color || 'var(--icon-color)'
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>

magic-editor/src/console/src/components/editor/magic-script-editor.vue

@@ -16,8 +16,8 @@
             @dragend.stop="e => tabDraggable(item, e, 'dragend')"
             @dragover.prevent
         >
-          <i class="ma-svg-icon" v-if="item._type === 'api'" :class="['request-method-' + item.method]" />
-          <i class="ma-svg-icon" v-if="item._type !== 'api'" :class="['icon-function']" />
+          <magic-text-icon v-if="item._type === 'api'" v-model="item.method" style="margin-top: -4px"/>
+          <magic-text-icon v-if="item._type !== 'api'" value="function" style="margin-top: -4px"/>
           {{item.displayName || item.name}}<i class="ma-icon ma-icon-lock" v-if="item.lock === '1'" />
           <span v-show="!item.id || item.script !== item.ext.tmpScript">*</span>
           <i class="ma-icon ma-icon-close" @click.stop="close(item.id || item.tmp_id)"/>
@@ -81,10 +81,12 @@ import RequestParameter from '@/scripts/editor/request-parameter.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 MagicTextIcon from "@/components/common/magic-text-icon";
 
 export default {
   name: 'MagicScriptEditor',
   components: {
+    MagicTextIcon,
     MagicDialog,
     MagicHistory
   },
@@ -968,11 +970,6 @@ export default {
   font-size: 16px;
   padding-right: 3px;
 }
-.ma-wrapper .ma-tab .ma-svg-icon{
-  height: 16px;
-  margin-left: 0;
-}
-
 .ma-hot-key {
   position: absolute;
   top: 50%;

magic-editor/src/console/src/components/layout/magic-todo.vue

@@ -12,8 +12,8 @@
         <div class="ma-content">
           <div v-for="(item, key) in todoList" :key="'todo_' + key" class="ma-table-row content-bg" @click="openItem(item)">
             <div>
-              <i class="ma-svg-icon" v-if="item.type === 1" :class="['request-method-' + item.cache.method]" />
-              <i class="ma-svg-icon" v-if="item.type === 2" :class="['icon-function']" />
+              <magic-text-icon v-if="item.type === 1" v-model="item.cache.method"/>
+              <magic-text-icon v-if="item.type === 2" value="function"/>
               <label>{{ item.cache.name }}</label>
               <span>({{ item.cache.path }})</span>
             </div>
@@ -38,8 +38,10 @@
 <script>
 import request from '@/api/request.js'
 import bus from '@/scripts/bus.js'
+import MagicTextIcon from "@/components/common/magic-text-icon";
 export default {
   name: 'MagicTodo',
+  components: {MagicTextIcon},
   data() {
     return {
       todoList: [],

magic-editor/src/console/src/components/resources/magic-api-list.vue

@@ -63,7 +63,7 @@
             @dragend.stop="e => draggable(item, e, 'dragend')"
             @dragover.prevent
         >
-          <i class="ma-svg-icon" :class="['request-method-' + item.method]" />
+          <magic-text-icon v-model="item.method"/>
           <label>{{ item.name }}</label>
           <span>({{ item.path }})</span>
           <i class="ma-icon ma-icon-lock" v-if="item.lock === '1'"></i>
@@ -117,6 +117,7 @@ import { replaceURL, download as downloadFile, requestGroup, goToAnchor, deepClo
 import contants from '@/scripts/contants.js'
 import Key from '@/scripts/hotkey.js'
 import JavaClass from "@/scripts/editor/java-class.js"
+import MagicTextIcon from "@/components/common/magic-text-icon";
 
 export default {
   name: 'MagicApiList',
@@ -124,6 +125,7 @@ export default {
     apis: Array
   },
   components: {
+    MagicTextIcon,
     MagicTree,
     MagicDialog,
     MagicInput,

magic-editor/src/console/src/components/resources/magic-function-list.vue

@@ -62,7 +62,7 @@
             @dragend.stop="e => draggable(item, e, 'dragend')"
             @dragover.prevent
         >
-          <i class="ma-svg-icon icon-function" />
+          <magic-text-icon value="function"/>
           <label>{{ item.name }}</label>
           <span>({{ item.path }})</span>
           <i class="ma-icon ma-icon-lock" v-if="item.lock === '1'"></i>
@@ -108,6 +108,7 @@ import { replaceURL, requestGroup, goToAnchor, deepClone } from '@/scripts/utils
 import JavaClass from '@/scripts/editor/java-class.js'
 import Key from '@/scripts/hotkey.js'
 import contants from '@/scripts/contants.js'
+import MagicTextIcon from "@/components/common/magic-text-icon";
 
 export default {
   name: 'MagicFunctionList',
@@ -115,6 +116,7 @@ export default {
     groups: Array
   },
   components: {
+    MagicTextIcon,
     MagicTree,
     MagicDialog,
     MagicInput,

magic-editor/src/console/src/components/resources/magic-recent-opened.vue

@@ -5,8 +5,8 @@
       <div style="height: 380px; overflow: auto">
         <div v-for="(it, i) in fullScripts" :key="i" @click="open(it)" class="ma-tree-item">
           <div class="ma-tree-hover" style="padding-left: 5px;">
-            <i v-if="it._type === 'api'" :class="'ma-svg-icon request-method-' + it.method"></i>
-            <i v-if="it._type === 'function'" class="ma-svg-icon icon-function"></i>
+            <magic-text-icon v-if="it._type === 'api'" v-model="it.method"/>
+            <magic-text-icon v-if="it._type === 'function'" value="function"/>
             <label>{{ displayText(it.groupName + '/' + it.name) }}({{ displayText(it.groupPath + '/' + it.path) }})</label>
           </div>
         </div>
@@ -23,10 +23,11 @@ import Key from '@/scripts/hotkey.js'
 import MagicDialog from '@/components/common/modal/magic-dialog.vue'
 import store from '@/scripts/store.js'
 import contants from "@/scripts/contants.js"
+import MagicTextIcon from "@/components/common/magic-text-icon";
 
 export default {
   name: 'MagicRecentOpened',
-  components: {MagicDialog},
+  components: {MagicTextIcon, MagicDialog},
   data() {
     return {
       visible: false,

magic-editor/src/console/src/components/resources/magic-resource-choose.vue

@@ -22,8 +22,8 @@
             @click.stop="doSelected(item,item.selected = !item.selected)"
         >
           <magic-checkbox v-model="item.selected" @change="e => doSelected(item,e)"/>
-          <i v-if="item._type === 'api'" class="ma-svg-icon" :class="['request-method-' + item.method]" />
-          <i v-if="item._type === 'function'" class="ma-svg-icon icon-function" />
+          <magic-text-icon v-if="item._type === 'api'" v-model="item.method"/>
+          <magic-text-icon v-if="item._type === 'function'" value="function"/>
           <i v-if="item._type === 'datasource'" class="ma-icon ma-icon-datasource" />
           <label>{{ item.name }}</label>
           <span>({{ item.path }})</span>
@@ -38,6 +38,7 @@ import MagicTree from '../common/magic-tree.vue'
 import request from '@/api/request.js'
 import contants from '@/scripts/contants.js'
 import MagicCheckbox from "@/components/common/magic-checkbox";
+import MagicTextIcon from "@/components/common/magic-text-icon";
 
 export default {
   name: 'MagicResourceChoose',
@@ -53,6 +54,7 @@ export default {
     refreshData: Boolean
   },
   components: {
+    MagicTextIcon,
     MagicCheckbox,
     MagicTree
   },