更新版本号、新皮肤

package.json

@@ -1,6 +1,6 @@
 {
   "name": "magic-editor",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build"

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

@@ -32,12 +32,17 @@
   flex-direction: column;
   align-items: center;
   overflow: hidden;
-  padding: 8px 3px;
+  
+  padding: var(--magic-navbar-vertical-header-padding);
+  margin: var(--magic-navbar-vertical-header-margin);
   cursor: pointer;
-  border-bottom: 1px solid var(--main-border-color);
+  border-bottom-color: var(--main-border-color);
+  border-bottom-style: solid;
+  border-bottom-width: var(--magic-navbar-vertical-header-border-width);
+  border-radius: var(--magic-navbar-vertical-header-border-radius)
 }
 .magic-navbar__vertical .magic-navbar-header {
-  width: 22px;
+  width: var(--magic-navbar-vertical-width);
   height: 100%;
   letter-spacing: 2px;
   text-align: center;
@@ -77,8 +82,8 @@
   display: inline-flex;
   flex-direction: row-reverse;
   padding: 0 8px;
-  height: 24px;
-  line-height: 24px;
+  height: var(--magic-navbar-horizontal-height);
+  line-height: var(--magic-navbar-horizontal-height);
   cursor: pointer;
   color: var(--main-color);
 }
@@ -91,8 +96,14 @@
 }
 .magic-navbar.magic-navbar__vertical .magic-navbar-title{
   padding-bottom: 4px;
+  display: var(--magic-navbar-vertical-title-display)
+}
+.magic-navbar.magic-navbar__vertical > ul li svg.magic-icon{
+  width: var(--magic-navbar-vertical-icon-size);
+  height: var(--magic-navbar-vertical-icon-size);
 }
 .magic-navbar.magic-navbar__vertical.reverse .magic-navbar-title{
   padding-top: 4px;
   padding-bottom: 0px;
+  display: var(--magic-navbar-vertical-title-display)
 }

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

@@ -19,6 +19,10 @@ export default {
             type: Boolean,
             default: true
         },
+        tooltipDirection: {
+            type: String,
+            default: 'right'
+        },
         spliter: Boolean,
         value: Array,
         to: HTMLElement
@@ -84,6 +88,8 @@ export default {
             }
             return h('li', {
                 class: this.selectIndex === index ? 'selected' : '',
+                'data-title': navbar.title,
+                'data-tooltip-direction': this.tooltipDirection,
                 style,
                 onClick: ()=> {
                     if(this.selectIndex === index && this.allowClose){

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

@@ -32,6 +32,6 @@
   border-bottom: 3px solid transparent;
 }
 .magic-tab.magic-script-tab ul li.selected {
-  border-bottom-color: #4083c9;
+  border-bottom-color: var(--tab-selected-border-color);
   background-color: var(--tab-selected-background-color);
 }

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

@@ -11,8 +11,8 @@
 .magic-table .magic-table-header,
 .magic-table .magic-table-body .magic-table-row {
   display: flex;
-  height: 24px;
-  line-height: 24px;
+  height: var(--magic-table-row-height);
+  line-height: var(--magic-table-row-height);
   border-bottom: 1px solid var(--main-border-color);
 }
 .magic-table .magic-table-body .magic-table-row:hover{

src/components/common/form/magic-button.vue

@@ -9,8 +9,8 @@ const props = defineProps({
 </script>
 <style scoped>
 .magic-button{
-    height: 22px;
-    line-height: 22px;
+    height: var(--button-height);
+    line-height: var(--button-height);
     background-color: var(--button-background-color);
     text-align: center;
     padding: 0 15px;
@@ -29,5 +29,7 @@ const props = defineProps({
 .magic-button:hover:not(.link){
     background-color: var(--button-hover-background-color);
     border-color: var(--button-hover-border-color);
+    color: var(--button-hover-color);
+    border-color: var(--button-border-hover-color)
 }
 </style>

src/components/common/form/magic-checkbox.vue

@@ -33,9 +33,9 @@ const cboId = new Date().getTime() + '' + Math.floor(Math.random() * 1000)
     position: relative;
     color: #c9c9c9;
     font-size: 12px;
-    height: 24px;
-    line-height: 24px;
-    width: 24px;
+    height: var(--magic-input-height);
+    line-height: var(--magic-input-height);
+    width: var(--magic-input-height);
     user-select: none;
     display: inline-block;
 }
@@ -45,12 +45,12 @@ const cboId = new Date().getTime() + '' + Math.floor(Math.random() * 1000)
     background-color: var(--checkbox-background-color);
     border: 1px solid var(--checkbox-border-color);
     content: '';
-    width: 16px;
-    height: 16px;
-    line-height: 16px;
+    width: calc(var(--magic-input-height) - 8px);
+    height: calc(var(--magic-input-height) - 8px);
+    line-height: calc(var(--magic-input-height) - 8px);
     position: absolute;
-    top: 2px;
-    left: 3px;
+    top: 4px;
+    left: 4px;
     text-align: center;
     font-size: 12px;
     color: var(--checkbox-text-color);

src/components/common/form/magic-input.vue

@@ -43,11 +43,12 @@ const style = {
 <style scoped>
 .magic-input{
 	outline: 0;
-	height: 22px;
-	line-height: 22px;
+	height: var(--magic-input-height);
+	line-height: var(--magic-input-height);
 	border-radius: 0;
 	outline: 0;
 	border: 1px solid transparent;
+	border-radius: var(--input-border-radius);
 	padding:0;
 	margin:0;
 	padding-left: 5px;
@@ -66,6 +67,7 @@ const style = {
 }
 .magic-input:focus{
 	border-color: var(--input-focus-color);
+	border-width: var(--input-focus-border-width);
 }
 .magic-input__border{
 	border-color: var(--input-border-color);

src/components/common/form/magic-select.vue

@@ -72,8 +72,8 @@ const showList = (container, selectList) => {
 	position: relative;
 	display: inline-block;
 	background: var(--select-background-color);
-	height: 22px;
-	line-height: 22px;
+	height: var(--magic-input-height);
+	line-height: var(--magic-input-height);;
 	width: 80px;
 	font-size: 12px;
 	text-align: left;
@@ -90,8 +90,8 @@ const showList = (container, selectList) => {
 .magic-select input {
 	background: none;
 	border: none;
-	height: 22px;
-	line-height: 22px;
+	height: var(--magic-input-height);;
+	line-height: var(--magic-input-height);;
 	border-radius: 0;
 	outline: 0;
 	padding-left: 5px;
@@ -100,8 +100,8 @@ const showList = (container, selectList) => {
 }
 
 .magic-select span {
-	height: 22px;
-	line-height: 22px;
+	height: var(--magic-input-height);;
+	line-height: var(--magic-input-height);;
 	border-radius: 0;
 	outline: 0;
 	padding-left: 5px;
@@ -133,7 +133,7 @@ const showList = (container, selectList) => {
 	padding: 0 5px;
 	text-align: left;
 	width: 100% !important;
-	height: 22px;
+	height: var(--magic-input-height);;
 	text-overflow: ellipsis;
 	word-break: keep-all;
 	text-align: left;

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

@@ -61,8 +61,9 @@ export default {
 .magic-context-menu{
     position: absolute;
     z-index: 999999;
-    background-color: var(--main-background-color);
+    background-color: var(--context-menu-background);
     border: 1px solid var(--main-border-color);
+    padding: var(--context-menu-padding)
 }
 .magic-context-menu li{
     height: 24px;
@@ -70,6 +71,7 @@ export default {
     padding:0 10px;
     cursor: pointer;
     display: flex;
+    border-radius: var(--context-menu-item-border-radius);
 }
 .magic-context-menu li > span,
 .magic-context-menu li > label {
@@ -77,7 +79,18 @@ export default {
 	white-space: pre;
 }
 .magic-context-menu li.divided{
+    margin-bottom: 5px;
+    position: relative;
+}
+.magic-context-menu li.divided::after{
+    content: '';
+    height: 2px;
+    width: 100%;
     border-bottom: 1px solid var(--main-border-color);
+    margin-bottom: 2px;
+    position: absolute;
+    left: 0;
+    top: 100%;
 }
 .magic-context-menu .magic-context-menu-icon{
     display: inline-block;

src/components/magic-editor.vue

@@ -18,6 +18,8 @@ import constants from '../scripts/constants.js'
 import HotKey from '../scripts/hotkey.js'
 import defaultTheme from '../scripts/editor/default-theme.js'
 import darkTheme from '../scripts/editor/dark-theme.js'
+import grayNewTheme from '../scripts/editor/gray-new-theme.js'
+import darkNewTheme from '../scripts/editor/dark-new-theme.js'
 import { defineTheme } from '../scripts/theme.js'
 import bus from '../scripts/bus.js'
 import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
@@ -251,6 +253,8 @@ onUnmounted(() => HotKey.unbind())
 const themeStyle = reactive({})
 defineTheme('default', defaultTheme)
 defineTheme('dark', darkTheme)
+defineTheme('gray-new', grayNewTheme)
+defineTheme('dark-new', darkNewTheme)
 Object.keys(config.themes || {}).forEach(themeKey => {
 	defineTheme(themeKey, config.themes[themeKey])
 })

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

@@ -1,35 +1,35 @@
 <template>
-    <magic-navbar :spliter="true" direction="vertical" :allow-close="false">
-        <magic-navbar-item v-for="(navbar, index) in navbars" :key="index" v-bind="navbar">
-            <component :is="navbar.component"/>
-        </magic-navbar-item>
-    </magic-navbar>
+    <div class="magic-api-body">
+        <magic-panel-toolbar :toolbars="toolbars" />
+        <div>
+            <component :is="component"/>
+        </div>
+    </div>
+    
 </template>
 <script setup>
-import { resolveDynamicComponent } from 'vue'
+import { ref, resolveDynamicComponent } from 'vue'
 import $i from '../../../scripts/i18n.js'
 const props = defineProps({
     opened: Object
 })
-const navbars = [
-    { title: 'Json', icon: 'json', component: resolveDynamicComponent('magic-api-request-body') },
-    { title: $i('message.view'), icon: 'structure', component: resolveDynamicComponent('magic-api-request-structure') }
+const component = ref(resolveDynamicComponent('magic-api-request-body'))
+const toolbars = [
+    { title: 'Json', selected: true, selectable: true, icon: 'json', onSelect:() => component.value = resolveDynamicComponent('magic-api-request-body')  },
+    { title: $i('message.view'), selectable: true, icon: 'structure', onSelect:() => component.value = resolveDynamicComponent('magic-api-request-structure') }
 ]
 </script>
 <style scoped>
-.magic-navbar{
-    width: 100%;
-    height: 100%;
-}
-.magic-navbar :deep(.magic-navbar-body){
-    border-right: none;
-    width: 100%;
-    height: 100%;
+.magic-api-body {
     display: flex;
-    position: relative;
+	flex: 1;
+	height: 100%;
 }
-.magic-navbar :deep(.magic-navbar-item > *){
-    width: 100%;
-    height: 100%;
+.magic-api-body > div{
+	background-color: var(--navbar-body-background-color);
+	flex: 1;
+	overflow: hidden;
+	position: relative;
+	height: 100%;
 }
 </style>

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

@@ -9,7 +9,7 @@
 			<magic-input v-model:value="info.path" :placeholder="$i('api.form.placeholder.path')" width="auto" style="flex:1"/>
 		</form>
 	</div>
-	<magic-navbar direction="horizontal" ref="navbar" style="flex:1" :allow-close="false">
+	<magic-navbar direction="horizontal" ref="navbar" style="flex:1" :allow-close="false" tooltip-direction="bottom">
 		<magic-navbar-item v-for="(navbar, key) in navbars" :key="key" v-bind="navbar">
 			<component :is="navbar.component"/>
 		</magic-navbar-item>
@@ -51,8 +51,8 @@ const navbars = [{
 .magic-api-info form label{
 	display: inline-block;
 	width: 75px;
-	height: 22px;
-	line-height: 22px;
+	height: var(--magic-input-height);
+  	line-height: var(--magic-input-height);
 	font-weight: 400;
 	text-align: right;
 	padding: 0 5px;

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

@@ -1,6 +1,6 @@
 <template>
     <div class="magic-panel-api-response">
-        <magic-navbar direction="horizontal" ref="navbar" style="flex:1" :allow-close="false">
+        <magic-navbar direction="horizontal" ref="navbar" style="flex:1" :allow-close="false" tooltip-direction="bottom">
             <magic-navbar-item v-for="(navbar, key) in navbars" :key="key" :title="navbar.title">
                 <keep-alive>
                     <component :is="navbar.component" :opened="opened"/>

src/components/panel/common/magic-panel-toolbar.vue

@@ -1,12 +1,19 @@
 <template>
     <ul class="magic-panel-toolbar">
-        <li v-for="(toolbar, key) in toolbars" :key="key" :title="toolbar.title" @click.stop="onClick(toolbar)" :class="{ disabled: toolbar.disabled, selected: toolbar.selected }">
+        <li v-for="(toolbar, key) in toolbars" :key="key" :data-title="toolbar.title" :data-tooltip-direction="tooltipDirection"
+        @click.stop="onClick(toolbar)" :class="{ disabled: toolbar.disabled, selected: toolbar.selected }">
             <magic-icon :icon="toolbar.icon" />
         </li>
     </ul>
 </template>
 <script setup>
-const data = defineProps({ toolbars: Array})
+const data = defineProps({ 
+    toolbars: Array, 
+    tooltipDirection: {
+        type: String,
+        default: 'right'
+    }
+})
 const onClick = toolbar => {
     if(toolbar.selectable){
         if(toolbar.disabled !== true) {
@@ -20,7 +27,7 @@ const onClick = toolbar => {
 </script>
 <style scoped>
 .magic-panel-toolbar{
-    width: 24px;
+    width: var(--magic-panel-toolbar-width);
     border-right: 1px solid var(--main-border-color);
     height: 100%;
     text-align: center;
@@ -28,11 +35,11 @@ const onClick = toolbar => {
 .magic-panel-toolbar li{
     cursor: pointer;
     border-radius: 2px;
-    width: 18px;
-    height: 18px;
-    line-height: 18px;
-    margin:3px;
-    font-size: 0.95em;
+    width: var(--magic-panel-toolbar-size);
+    height: var(--magic-panel-toolbar-size);
+    line-height: var(--magic-panel-toolbar-size);
+    margin:3px auto;
+    font-size: 1em;
 }
 .magic-panel-toolbar li:not(.disabled):hover,
 .magic-panel-toolbar li:not(.disabled).selected{

src/components/panel/footer/magic-status-bar.vue

@@ -3,7 +3,7 @@
         <div class="message" v-html="content"></div>
         <magic-online />
         <ul>
-            <li v-for="(item, key) in navs" :title="item.title" :key="key" @click.stop="item.onClick">
+            <li v-for="(item, key) in navs" :data-title="item.title" data-tooltip-direction="left-top" :key="key" @click.stop="item.onClick">
                 <magic-icon :icon="item.icon"/>
             </li>
         </ul>

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

@@ -1,6 +1,6 @@
 <template>
     <div class="magic-toolbar">
-        <magic-navbar direction="horizontal" ref="navbar">
+        <magic-navbar direction="horizontal" ref="navbar" tooltip-direction="bottom">
             <magic-navbar-item v-for="(toolbar, key) in toolbars" :key="key" v-bind="toolbar">
                 <magic-resizer direction="y" :max="700" :min="150"  :value="250">
                     <div class="magic-toolbar-header">

src/components/panel/header/magic-header.vue

@@ -6,7 +6,7 @@
         </div>
         <div class="magic-header-title">{{ pageTitle }}</div>
         <ul>
-            <li v-for="(button, index) in buttons" :key="index" :title="button.name" 
+            <li v-for="(button, index) in buttons" :key="index" :data-title="button.name" data-tooltip-direction="left-bottom"
                 @click.stop="button.disabled !== true && button.onClick()" 
                 :class="{ disabled: button.disabled && button.disabled() === true }">
                 <magic-icon :icon="button.icon"></magic-icon>
@@ -109,8 +109,8 @@ const switchLocale = ({ id, name }) => {
 </script>
 <style scoped>
 .magic-header{
-    height: 30px;
-    line-height: 30px;
+    height: var(--magic-header-height);
+    line-height: var(--magic-header-height);;
     background-color: var(--main-background-color);
     border-bottom: 1px solid var(--main-border-color);
     display: flex;
@@ -122,8 +122,9 @@ const switchLocale = ({ id, name }) => {
     font-size: 0;
     letter-spacing: 0;
     background-repeat: no-repeat;
-    background-position: 4px 7px;
-    padding-left: 25px;
+    background-position: var(--magic-header-logo-background-position);
+    background-size: var(--magic-header-logo-background-size);
+    padding-left: var(--magic-header-logo-padding);
     color: var(--header-title-color);
 }
 .magic-header .magic-logo label {
@@ -141,15 +142,15 @@ const switchLocale = ({ id, name }) => {
 }
 .magic-header ul li{
     cursor: pointer;
-    height: 30px;
+    height: var(--magic-header-height);
     text-align: center;
     display: inline-flex;
     align-items: center;
 }
 .magic-header ul li svg{
     padding: 0 4px;
-    height: 24px;
-    width: 24px;
+    height: var(--magic-header-icon-size);
+    width: var(--magic-header-icon-size);
     border-radius: 4px;
 }
 .magic-header ul li.disabled svg{
@@ -173,7 +174,7 @@ const switchLocale = ({ id, name }) => {
 
 .magic-skin-selector,.magic-locale-selector {
     position: absolute;
-    top: 30px;
+    top: var(--magic-header-height);
     right: 24px;
     z-index: 20;
     background-color: var(--main-background-color);
@@ -197,6 +198,7 @@ const switchLocale = ({ id, name }) => {
 }
 .magic-skin-selector ul li:hover,
 .magic-locale-selector ul li:hover{
-    background-color: var(--main-hover-background-color);
+    background-color: var(--select-option-hover-background-color);
+    color: var(--select-option-hover-color);
 }
 </style>

src/components/panel/header/magic-push.vue

@@ -75,6 +75,8 @@ const doPush = (mode) => {
   width: 80px;
   text-align: right;
   display: inline-block;
+  height: var(--magic-input-height);
+  line-height: var(--magic-input-height);
 }
 .magic-push-form :deep(.magic-input){
 	width: auto !important;

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

@@ -281,8 +281,8 @@ const onContextMenu = (item, event) => {
 	display: inline-block;
 	width: 70px;
 	text-align: right;
-	height: 22px;
-	line-height: 22px;
+	height: var(--magic-input-height);
+	line-height: var(--magic-input-height);
 }
 .magic-editor .magic-form-row > input,
 .magic-editor .magic-form-row > .magic-select{

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

@@ -5,7 +5,7 @@
 			<magic-navbar-item v-for="(navbar, index) in leftNavbars" :key="index" v-bind="navbar">
 				<magic-resizer :max="750" :min="270" direction='x'>
 					<magic-loading :loading="loading">
-						<magic-resource v-bind="navbar" :data="resources[navbar.type]" @close="$refs.mnl.select(-1)" @onLoad="resourceOnLoad"/>
+						<magic-resource v-bind="navbar" :data="resources[navbar.type]" @close="$refs.mnl.select(-1)" @onLoad="resourceOnLoad" tooltip-direction="left-bottom"/>
 					</magic-loading>
 				</magic-resizer>
 			</magic-navbar-item>
@@ -20,7 +20,7 @@
 			<magic-toolbar />
 		</div>
 		<!-- 右侧导航条 -->
-		<magic-navbar  :reverse="true" :default-select="-1" direction="vertical" :to="$refs.mrr" :spliter="true">
+		<magic-navbar  :reverse="true" :default-select="-1" direction="vertical" :to="$refs.mrr" :spliter="true" tooltip-direction="left">
 			<magic-navbar-item v-for="(navbar, index) in rightNavbars" :key="index" :title="navbar.title" :icon="navbar.icon">
 				<magic-resizer :max="420" :min="140" :value="200" direction='x' :reverse="true" v-if="nextRender">
 					<magic-loading :loading="loading">

src/components/panel/main/magic-resource.vue

@@ -5,7 +5,8 @@
 			<magic-input v-model:value="keyword" :placeholder="$i('message.searchText')" width="100%"/>
 			<ul>
 				<template v-for="(button, index) in buttons" :key="index" >
-					<li v-if="!button.show || button.show()" :title="button.name || ''" @click="button.onClick&&button.onClick()" :class="{ separator: button.separator}">
+					<li v-if="!button.show || button.show()" :data-title="button.name || ''" :data-tooltip-direction="tooltipDirection"
+					@click="button.onClick&&button.onClick()" :class="{ separator: button.separator}">
 						<magic-icon v-if="!button.separator" :icon="button.icon"/>
 					</li>
 				</template>
@@ -69,7 +70,8 @@ const props = defineProps({
 	 * 名称，接口、函数、资源、定时任务、WebSocket
 	 */
 	title: String,
-	data: Array
+	data: Array,
+	tooltipDirection: String
 })
 const config = inject('service')[props.type]
 const requirePath = config.requirePath
@@ -572,10 +574,13 @@ onMounted(() => emits('onLoad'))
 	line-height: 24px;
 }
 .magic-resource .magic-resource-header ul {
-	display: inline-flex;
+	display: var(--magic-resource-header-icon-display);
 	align-items: center;
 
 }
+.magic-resource:hover .magic-resource-header ul{
+	display: inline-flex;
+}
 .magic-resource .magic-resource-header ul li{
 	display: inline-block;
 	cursor: pointer;
@@ -617,6 +622,9 @@ onMounted(() => emits('onLoad'))
 	height: 26px;
 	line-height: 26px;
 }
+.magic-create-group li:not(:first-child){
+	margin-top: 4px;
+}	
 .magic-create-group li input{
 	flex: 1
 }

src/icons/collapse-all.svg

@@ -1 +1,5 @@
-<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M128 448h768v128H128zM512 352L736 128h-448zM512 672l224 224h-448z" /></svg>
+<!-- Copyright 2000-2021 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE file. -->
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.85355 2.14645C4.65829 1.95118 4.34171 1.95118 4.14645 2.14645C3.95118 2.34171 3.95118 2.65829 4.14645 2.85355L4.85355 2.14645ZM8 6L7.64645 6.35355L8 6.70711L8.35355 6.35355L8 6ZM11.8536 2.85355C12.0488 2.65829 12.0488 2.34171 11.8536 2.14645C11.6583 1.95118 11.3417 1.95118 11.1464 2.14645L11.8536 2.85355ZM4.14645 2.85355L7.64645 6.35355L8.35355 5.64645L4.85355 2.14645L4.14645 2.85355ZM8.35355 6.35355L11.8536 2.85355L11.1464 2.14645L7.64645 5.64645L8.35355 6.35355Z" fill="currentColor"/>
+<path d="M4.85355 12.8536C4.65829 13.0488 4.34171 13.0488 4.14645 12.8536C3.95118 12.6583 3.95118 12.3417 4.14645 12.1464L4.85355 12.8536ZM8 9L7.64645 8.64645L8 8.29289L8.35355 8.64645L8 9ZM11.8536 12.1464C12.0488 12.3417 12.0488 12.6583 11.8536 12.8536C11.6583 13.0488 11.3417 13.0488 11.1464 12.8536L11.8536 12.1464ZM4.14645 12.1464L7.64645 8.64645L8.35355 9.35355L4.85355 12.8536L4.14645 12.1464ZM8.35355 8.64645L11.8536 12.1464L11.1464 12.8536L7.64645 9.35355L8.35355 8.64645Z" fill="currentColor"/>
+</svg>

src/icons/expand-all.svg

@@ -1 +1,4 @@
-<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M128 64h768v128H128zM128 832h768v128H128zM512 768l224-192h-448zM512 256l224 192h-448z" /></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.85355 6.35355C4.65829 6.54882 4.34171 6.54882 4.14645 6.35355C3.95118 6.15829 3.95118 5.84171 4.14645 5.64645L4.85355 6.35355ZM8 2.5L7.64645 2.14645L8 1.79289L8.35355 2.14645L8 2.5ZM11.8536 5.64645C12.0488 5.84171 12.0488 6.15829 11.8536 6.35355C11.6583 6.54882 11.3417 6.54882 11.1464 6.35355L11.8536 5.64645ZM4.14645 5.64645L7.64645 2.14645L8.35355 2.85355L4.85355 6.35355L4.14645 5.64645ZM8.35355 2.14645L11.8536 5.64645L11.1464 6.35355L7.64645 2.85355L8.35355 2.14645Z" fill="currentColor"/>
+<path d="M4.85355 8.64645C4.65829 8.45118 4.34171 8.45118 4.14645 8.64645C3.95118 8.84171 3.95118 9.15829 4.14645 9.35355L4.85355 8.64645ZM8 12.5L7.64645 12.8536L8 13.2071L8.35355 12.8536L8 12.5ZM11.8536 9.35355C12.0488 9.15829 12.0488 8.84171 11.8536 8.64645C11.6583 8.45118 11.3417 8.45118 11.1464 8.64645L11.8536 9.35355ZM4.14645 9.35355L7.64645 12.8536L8.35355 12.1464L4.85355 8.64645L4.14645 9.35355ZM8.35355 12.8536L11.8536 9.35355L11.1464 8.64645L7.64645 12.1464L8.35355 12.8536Z" fill="currentColor"/>
+</svg>

src/icons/minimize.svg

@@ -1 +1,3 @@
-<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M176 428h672c46.40625 0 84 37.59375 84 84 0 46.40625-37.59375 84-84 84H176c-46.40625 0-84-37.59375-84-84 0-46.40625 37.59375-84 84-84z" /></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="8" width="10" height="1"/>
+</svg>

src/icons/run.svg

@@ -1 +1,3 @@
-<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M805.01428584 470.02142832c37.92857168 24.42857168 37.92857168 59.46428584 0 83.95714336l-546.17142832 332.55c-37.92857168 24.42857168-68.27142832 7.00714248-68.27142919-35.03571416V172.57142832c0-42.04285752 30.34285752-59.52857168 68.27142919-35.03571416l546.17142832 332.55z" /></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 7.13397C14.1667 7.51888 14.1667 8.48113 13.5 8.86603L4.5 14.0622C3.83333 14.4471 3 13.966 3 13.1962L3 2.80385C3 2.03405 3.83333 1.55292 4.5 1.93782L13.5 7.13397Z" stroke="white" stroke-width="1.5"/>
+</svg>

src/icons/search.svg

@@ -1 +1,4 @@
-<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M940.94525629 910.34965332L725.67163259 689.77246814c58.18140445-66.5311763 93.43734518-153.60910222 93.43734518-248.92757333 0-208.95061333-169.38628741-378.33690075-378.33690075-378.33690074-208.95061333 0-378.33690075 169.38628741-378.33690073 378.33690074s169.38628741 378.33690075 378.33690073 378.33690074c96.15587555 0 183.91343408-35.88702815 250.66306372-94.97865481l214.77603555 220.05532444c4.75742815 4.87879111 11.05616592 7.31818667 17.36704 7.31818667 6.11669333 0 12.23338667-2.29376 16.95440593-6.9055526 9.58767408-9.36922075 9.78185482-24.73377185 0.41263407-34.32144593zM440.77207702 770.63661036c-44.54020741 0-87.73328592-8.71386075-128.35346962-25.89885629-39.26091852-16.60245333-74.54113185-40.38959408-104.84546371-70.69392593s-54.09147259-65.57240889-70.69392592-104.8454637c-17.18499555-40.63232-25.8988563-83.81326222-25.8988563-128.35346963s8.71386075-87.73328592 25.8988563-128.35346963c16.60245333-39.26091852 40.38959408-74.54113185 70.69392592-104.84546371s65.57240889-54.09147259 104.84546371-70.69392592c40.63232-17.18499555 83.81326222-25.8988563 128.35346962-25.8988563s87.73328592 8.71386075 128.35346964 25.8988563c39.26091852 16.60245333 74.54113185 40.38959408 104.8454637 70.69392592s54.09147259 65.57240889 70.69392593 104.84546371c17.18499555 40.63232 25.8988563 83.81326222 25.8988563 128.35346963s-8.71386075 87.73328592-25.8988563 128.35346963c-16.60245333 39.26091852-40.38959408 74.54113185-70.69392593 104.8454637s-65.57240889 54.09147259-104.8454637 70.69392593c-40.63232 17.19713185-83.81326222 25.8988563-128.35346964 25.89885629z" /></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="4.5" stroke="currentColor"/>
+<path d="M10.1992 10.2L13.4992 13.4959" stroke="currentColor" stroke-linecap="round"/>
+</svg>

src/scripts/editor/dark-new-theme.js

@@ -0,0 +1,183 @@
+export default {
+	editor: {
+        base: 'vs-dark',
+        rules: [
+            { foreground: 'A9B7C6' },
+            { token: 'keywords', foreground: 'CC7832', fontStyle: 'bold' },
+            { token: 'keyword', foreground: 'CC7832', fontStyle: 'bold' },
+            { token: 'number', foreground: '6897BB' },
+            { token: 'string', foreground: '6A8759', fontStyle: 'bold' },
+            { token: 'string.sql', foreground: '6A8759' },
+            { token: 'tag.sql', foreground: 'E8BF6A' },
+            { token: 'attribute.name.sql', foreground: 'BABABA' },
+            { token: 'attribute.value.sql', foreground: '6A8759' },
+            { token: 'predefined.sql', foreground: 'A9B7C6', fontStyle: 'italic' },
+            { token: 'predefined.magicscript', foreground: 'A9B7C6', fontStyle: 'italic' },
+            { token: 'key', foreground: '9876AA' },
+            { token: 'string.key.json', foreground: '9876AA' },
+            { token: 'string.value.json', foreground: '6A8759' },
+            { token: 'keyword.json', foreground: '6897BB' },
+            { token: 'operator.sql', foreground: 'CC7832', fontStyle: 'bold' },
+            { token: 'string.invalid', foreground: '008000', background: 'FFCCCC' },
+            { token: 'string.escape.invalid', foreground: '008000', background: 'FFCCCC' },
+            { token: 'string.escape', foreground: '000080', fontStyle: 'bold' },
+            { token: 'comment', foreground: '808080', fontStyle: 'italic' },
+            { token: 'comment.doc', foreground: '629755', fontStyle: 'italic' },
+            { token: 'comment.todo', foreground: 'A8C023', fontStyle: 'italic' },
+            { token: 'string.escape', foreground: 'CC7832' }
+        ],
+        colors: {
+            'editor.background': '#2B2B2B',
+            'editorLineNumber.foreground': '#999999',	//行号的颜色
+            'editorGutter.background': '#313335',	//行号背景色
+            'editor.lineHighlightBackground': '#323232',	//光标所在行的颜色
+            'dropdown.background': '#3C3F41',	//右键菜单
+            'dropdown.foreground': '#BBBBBB',	//右键菜单文字颜色
+            'list.activeSelectionBackground': '#4B6EAF',	//右键菜单悬浮背景色
+            'list.activeSelectionForeground': '#FFFFFF',	//右键菜单悬浮文字颜色
+            'editorSuggestWidget.selectedBackground': '#113A5C' //代码提示选中行的背景色
+        }
+    },
+    styles: {
+		'magic-navbar-vertical-width': '42px',
+		'magic-navbar-vertical-title-display': 'none',
+		'magic-navbar-vertical-icon-size': '1.8em',
+		'magic-navbar-vertical-header-padding': '5.5px 3px',
+		'magic-navbar-vertical-header-margin': '5px',
+		'magic-navbar-vertical-header-border-radius': '2px',
+		'magic-navbar-vertical-header-border-width': '0px',
+		'magic-resource-header-icon-display': 'none',
+		'magic-header-height': '40px',
+		'magic-header-icon-size': '28px',
+		'magic-panel-toolbar-width': '32px',
+		'magic-panel-toolbar-size': '24px',
+		'magic-navbar-horizontal-height': '30px',
+		'magic-input-height': '28px',
+		'magic-table-row-height': '30px',
+		'input-focus-border-width': '2px',
+		'input-border-radius': '3px',
+		'button-height': '24px',
+		'magic-header-logo-background-size': '24px',
+		'magic-header-logo-background-position': '10px 7px',
+		'magic-header-logo-padding': '40px',
+		'context-menu-padding': '4px',
+		'context-menu-item-border-radius': '4px',
+		'main-background-color': '#3C3F41',
+        'main-border-color': '#515151',
+        'main-color': '#bbb',
+        'main-selected-background-color': '#27292A',
+        'main-hover-background-color': '#353739',
+        'main-hover-icon-background-color': '#4C5052',
+        'main-selected-color': '#fff',
+        'main-icon-color': '#AFB1B3',
+
+        'header-title-color': '#bbb',
+        'header-version-color': '#999',
+        'header-default-color': '#AFB1B3',
+
+        'empty-background-color': '#282828',
+        'empty-key-color': '#489DF6',
+        'empty-color': '#A0A0A0',
+
+        'button-hover-background-color': '#365880',
+        'button-hover-border-color': '#43688C',
+        'button-background-color': '#4C5052',
+        'button-border-color': '#5E6060',
+        'button-disabled-color': '#5a5a5a',
+
+        'navbar-body-background-color': '#3C3F41',
+        'navbar-body-border-color': '#555555',
+        'resource-label-color': '#bbb',
+        'resource-span-color': '#787878',
+
+        'tree-hover-background-color': '#0d293e',
+        'tree-icon-color': '#aeb9c0',
+
+        'table-border-color': '#646464',
+
+        'input-border-color': '#646464',
+        'input-foucs-color': '#3D6185',
+        'input-background-color': '#45494A',
+
+        'select-background-color': '#3C3F41',
+        'select-hover-background-color': '#3C3F41',
+        'select-option-background-color': '#3C3F41',
+        'select-option-hover-background-color': '#4B6EAF',
+        'select-option-border-color': '#808080',
+
+        'data-type-default-color': '#a9b7c6',
+        'data-type-string-color': '#6a8759',
+        'data-type-integer-color': '#6897bb',
+        'data-type-byte-color': '#6897bb',
+        'data-type-long-color': '#6897bb',
+        'data-type-float-color': '#6897bb',
+        'data-type-double-color': '#6897bb',
+        'data-type-short-color': '#6897bb',
+        'data-type-number-color': '#6897bb',
+        'data-type-boolean-color': '#cc7832',
+        'data-type-class-color': '#9876aa',
+        'data-type-key-color': '#FF8E8E',
+
+
+        'run-log-background-color': '#2b2b2b',
+        'log-level-info': '#ABC023',
+        'log-level-error': '#CC666E',
+        'log-level-debug': '#299999',
+        'log-level-warn': 'unset',
+        'log-level-trace': '#5394EC',
+        'log-color-cyan': '#009191',
+        'log-color-link': '#287BDE',
+
+        'todo-color': '#A8C023',
+
+        'debug-line-background-color': '#2D6099',
+        'breakpoints-background-color': '#C75450',
+        'breakpoint-line-background-color': '#3a2323',
+
+        'select-inputable-background-color': '#45494a',
+        'select-inputable-border': 'transparent',
+
+        'tab-selected-background-color': '#4E5254',
+
+        'message-em-color': '#68dd9a',
+
+        'checkbox-background-color': '#43494A',
+        'checkbox-border-color': '#6B6B6B',
+        'checkbox-text-color': '#bbb',
+        'checkbox-selected-background-color': '#43494A',
+        'checkbox-selected-border-color': '#6B6B6B',
+
+        'toolbox-list-label-color': '#bbb',
+        'toolbox-list-span-color': '#787878',
+        'toolbox-border-color': '#323232',
+        'toolbox-list-hover-background': '#0D293E',
+        'toolbox-border-right-color': '#555555',
+        'footer-border-color': '#323232',
+        'tab-bar-border-color': '#323232',
+        'dialog-border-color': '#282828',
+        'dialog-shadow-color': '#151515',
+        'table-col-border-color': '#333638',
+        'table-row-border-color': '#333638',
+        'table-hover-background': '#4B6EAF',
+        'debug-line-background': '#2D6099',
+        'breakpoints-background': '#C75450',
+        'breakpoint-line-background': '#3a2323',
+        'table-even-background': '#414547',
+        'button-disabled-background': '#5A5A5A',
+        'toolbox-list-header-icon-color': '#AFB1B3',
+        'log-error-color': '#CC666E',
+        'text-string-color': '#6A8759',
+        'text-number-color': '#6897BB',
+        'text-boolean-color': '#CC7832',
+        'text-property-color': '#9876aa',
+        'text-key-color': '#9876aa',
+        'suggest-hover-background': '#113A5C',
+        'suggest-hover-color': '#fff',
+        'statusbar-em-color': '#68dd9a',
+
+		'tab-selected-border-color': '#4A88C7',
+		'tooltip-background-color': '#4B4D4D',
+		'tooltip-color': '#bbb',
+		'tooltip-border-color': '#636569'
+	}
+};

src/scripts/editor/dark-theme.js

@@ -151,5 +151,9 @@ export default {
         'suggest-hover-background': '#113A5C',
         'suggest-hover-color': '#fff',
         'statusbar-em-color': '#68dd9a',
+
+        'tooltip-background-color': '#4B4D4D',
+		'tooltip-color': '#bbb',
+		'tooltip-border-color': '#636569'
     }
 };

src/scripts/editor/gray-new-theme.js

@@ -0,0 +1,84 @@
+export default {
+	editor: {
+		base: 'vs',
+		rules: [
+			{ background: '#ffffff' },
+			{ token: 'keywords', foreground: '000080', fontStyle: 'bold' },
+			{ token: 'number', foreground: '0000FF' },
+			{ token: 'keyword', foreground: '000080', fontStyle: 'bold' },
+			{ token: 'string.sql', foreground: '008000' },
+			{ token: 'tag.sql', foreground: '0033B3' },
+			{ token: 'attribute.name.sql', foreground: '174AD4' },
+			{ token: 'attribute.value.sql', foreground: '067D17' },
+			{ token: 'predefined', foreground: '000000', fontStyle: 'italic' },
+			{ token: 'operator.sql', foreground: '000080', fontStyle: 'bold' },
+			{ token: 'key', foreground: '660E7A' },
+			{ token: 'string.key.json', foreground: '660E7A' },
+			{ token: 'string.value.json', foreground: '008000' },
+			{ token: 'keyword.json', foreground: '0000FF' },
+			{ token: 'string', foreground: '008000', fontStyle: 'bold' },
+			{ token: 'string.invalid', foreground: '008000', background: 'FFCCCC' },
+			{ token: 'string.escape.invalid', foreground: '008000', background: 'FFCCCC' },
+			{ token: 'string.escape', foreground: '000080', fontStyle: 'bold' },
+			{ token: 'comment', foreground: '808080', fontStyle: 'italic' },
+			{ token: 'comment.doc', foreground: '808080', fontStyle: 'italic' },
+			{ token: 'comment.todo', foreground: '008DDE', fontStyle: 'italic' },
+			{ token: 'string.escape', foreground: '000080' }
+		],
+		colors: {
+			'editor.foreground': '#000000',
+			'editor.background': '#ffffff',
+			'editorLineNumber.foreground': '#999999',	//行号的颜色
+			'editorGutter.background': '#F7F8FA',	//行号背景色
+			'editor.lineHighlightBackground': '#F5F8FE',	//光标所在行的颜色
+			'dropdown.background': '#F2F2F2',	//右键菜单
+			'dropdown.foreground': '#000000',	//右键菜单文字颜色
+			'list.activeSelectionBackground': '#1A7DC4',	//右键菜单悬浮背景色
+			'list.activeSelectionForeground': '#ffffff',	//右键菜单悬浮文字颜色
+		}
+	},
+	styles: {
+		'magic-navbar-vertical-width': '42px',
+		'magic-navbar-vertical-title-display': 'none',
+		'magic-navbar-vertical-icon-size': '1.8em',
+		'magic-navbar-vertical-header-padding': '5.5px 3px',
+		'magic-navbar-vertical-header-margin': '5px',
+		'magic-navbar-vertical-header-border-radius': '2px',
+		'magic-navbar-vertical-header-border-width': '0px',
+		'magic-resource-header-icon-display': 'none',
+		'magic-header-height': '40px',
+		'magic-header-icon-size': '28px',
+		'main-hover-icon-background-color': '#EBECF0',
+		'main-background-color': '#F7F8FA',
+		'main-selected-background-color': '#DFE1E5',
+		'main-hover-background-color': '#EBECF0',
+		'magic-panel-toolbar-width': '32px',
+		'magic-panel-toolbar-size': '24px',
+		'tab-selected-border-color': '#3574F0',
+		'magic-navbar-horizontal-height': '30px',
+		'magic-input-height': '28px',
+		'magic-table-row-height': '30px',
+		'input-focus-color': '#3574F0',
+		'input-focus-border-width': '2px',
+		'input-border-radius': '3px',
+		'select-background-color': '#fff',
+		'select-hover-background-color': '#fff',
+		'select-option-hover-background-color': '#CFDEFC',
+		'select-option-hover-color': '#000',
+		'tree-hover-background-color': '#CFDEFC',
+		'button-hover-background-color': '#3574F0',
+		'button-hover-color': '#fff',
+		'button-border-hover-color': '#3574F0',
+		'button-background-color': '#fff',
+		'button-height': '24px',
+		'checkbox-selected-background-color':'#3574F0',
+		'empty-background-color':'#F7F8FA',
+		'navbar-body-background-color':'#F7F8FA',
+		'magic-header-logo-background-size': '24px',
+		'magic-header-logo-background-position': '10px 7px',
+		'magic-header-logo-padding': '40px',
+		'context-menu-background': '#fff',
+		'context-menu-padding': '4px',
+		'context-menu-item-border-radius': '4px'
+	}
+};