优化样式

src/assets/index.css

@@ -179,7 +179,7 @@
   --magic-header-height: 30px;
   --magic-header-icon-size: 24px;
 
-  --magic-panel-toolbar-width: 24px;
+  --magic-panel-toolbar-width: 28px;
   --magic-panel-toolbar-size: 18px;
   --tab-selected-border-color: #4083c9;
 

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

@@ -31,5 +31,6 @@ const toolbars = [
 	overflow: hidden;
 	position: relative;
 	height: 100%;
+    display: flex;
 }
 </style>

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

@@ -1,22 +1,25 @@
 <template>
     <ul class="magic-panel-toolbar">
-        <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 }">
+        <li v-for="(toolbar, key) in panelToolbars" :key="key" :data-title="toolbar.title" :data-tooltip-direction="tooltipDirection"
+        @click.stop="onClick(toolbar)" :class="{ disabled: toolbar.disabled, selected: toolbar.selected }" :title="'x' + toolbar.selected">
             <magic-icon :icon="toolbar.icon" />
         </li>
     </ul>
 </template>
 <script setup>
-const data = defineProps({ 
+import { ref } from 'vue'
+const props = defineProps({ 
     toolbars: Array, 
     tooltipDirection: {
         type: String,
         default: 'right'
     }
 })
+const panelToolbars = ref(props.toolbars)
 const onClick = toolbar => {
     if(toolbar.selectable){
         if(toolbar.disabled !== true) {
+            props.toolbars.filter(it => it.selectable).forEach(it => it.selected = false)
             toolbar.selected = toolbar.selected !== true
             toolbar.onSelect && toolbar.onSelect(toolbar.selected)
         }