feat: 工具栏缩放

src/core/main/custom/toolbar.ts

@@ -116,6 +116,14 @@ export class CustomToolbar extends EventEmitter<CustomToolbarEvent> {
     constructor(id: string) {
         super();
         this.id = id;
+        // 按比例设置初始大小
+        const setting = Mota.require('var', 'mainSetting');
+        const scale = setting.getValue('ui.toolbarScale', 100) / 100;
+        this.width *= scale;
+        this.height *= scale;
+        this.x *= scale;
+        this.y *= scale;
+
         this.show();
         CustomToolbar.list.push(this);
     }
@@ -188,11 +196,18 @@ export class CustomToolbar extends EventEmitter<CustomToolbarEvent> {
     /**
      * 强制刷新这个自定义工具栏的所有显示
      */
-    refresh() {
-        const items = this.items.splice(0);
-        nextTick(() => {
-            this.items.push(...items);
-        });
+    refresh(reopen: boolean = false) {
+        if (reopen) {
+            this.closeAll();
+            nextTick(() => {
+                this.show();
+            });
+        } else {
+            const items = this.items.splice(0);
+            nextTick(() => {
+                this.items.push(...items);
+            });
+        }
         return this;
     }
 
@@ -301,8 +316,8 @@ export class CustomToolbar extends EventEmitter<CustomToolbarEvent> {
         }
     }
 
-    static refreshAll(): void {
-        CustomToolbar.list.forEach(v => v.refresh());
+    static refreshAll(reopen: boolean = false): void {
+        CustomToolbar.list.forEach(v => v.refresh(reopen));
     }
 
     static showAll(): number[] {

src/core/main/setting.ts

@@ -427,7 +427,7 @@ function handleUiSetting<T extends number | boolean>(
         CustomToolbar.list.forEach(v => {
             v.setSize(v.width * scale, v.height * scale);
         })
-        CustomToolbar.refreshAll();
+        CustomToolbar.refreshAll(true);
     }
 }
 

src/ui/toolbar.vue

@@ -28,6 +28,7 @@
 import Box from '@/components/box.vue';
 import { CustomToolbar } from '@/core/main/custom/toolbar';
 import { GameUi } from '@/core/main/custom/ui';
+import { mainSetting } from '@/core/main/setting';
 import { onUnmounted, reactive, watch } from 'vue';
 
 interface BoxData {
@@ -44,6 +45,7 @@ const props = defineProps<{
 }>();
 
 const bar = props.bar;
+const scale = mainSetting.getValue('ui.toolbarScale', 100) / 100;
 
 const box = reactive<BoxData>({
     x: bar.x,
@@ -80,7 +82,7 @@ onUnmounted(() => {
 <style lang="less" scoped>
 .toolbar-container {
     background-color: #0009;
-    padding: 5px;
+    padding: v-bind('scale * 5 + "px"');
 }
 
 .toolbar {
@@ -93,9 +95,9 @@ onUnmounted(() => {
 
 .toolbar-item {
     display: flex;
-    margin: 5px;
-    min-width: 50px;
-    height: 50px;
+    margin: v-bind('scale * 5 + "px"');
+    min-width: v-bind('scale * 50 + "px"');
+    height: v-bind('scale * 50 + "px"');
     cursor: pointer;
     background-color: #222;
     border: 1.5px solid #ddd8;
@@ -106,7 +108,7 @@ onUnmounted(() => {
 
 .toolbar-item::v-deep(> *) {
     height: 100%;
-    min-width: 50px;
+    min-width: v-bind('scale * 50 + "px"');
     display: flex;
     justify-content: center;
     align-items: center;