From 4c5c741a5401ef7c3e13d5b8fa9cc161ad0de526 Mon Sep 17 00:00:00 2001
From: unanmed <1319491857@qq.com>
Date: Fri, 19 Apr 2024 18:02:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E5=85=B7=E6=A0=8F=E7=BC=A9?=
 =?UTF-8?q?=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/main/custom/toolbar.ts | 29 ++++++++++++++++++++++-------
 src/core/main/setting.ts        |  2 +-
 src/ui/toolbar.vue              | 12 +++++++-----
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/core/main/custom/toolbar.ts b/src/core/main/custom/toolbar.ts
index 2202378..abdfa94 100644
--- a/src/core/main/custom/toolbar.ts
+++ b/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[] {
diff --git a/src/core/main/setting.ts b/src/core/main/setting.ts
index 8b5f7f5..1e47f52 100644
--- a/src/core/main/setting.ts
+++ b/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);
     }
 }
 
diff --git a/src/ui/toolbar.vue b/src/ui/toolbar.vue
index 184e46a..eee84b9 100644
--- a/src/ui/toolbar.vue
+++ b/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;