fix: toolbar

docs/api/class/custom-toolbar.md

@@ -33,6 +33,7 @@
     -   [`register`](#register)
     -   [`save`](#save)
     -   [`load`](#load)
+    -   [`refreshAll`](#refreshall)
     -   [`showAll`](#showall)
     -   [`closeAll`](#static-closeall)
 -   实例事件
@@ -431,6 +432,16 @@ declare function load(): void
 
     从本地存储读取自定义工具栏状态
 
+## refreshAll()
+
+```ts
+declare function refreshAll(): void
+```
+
+-   静态方法说明
+
+    更新所有自定义工具栏
+
 ## showAll()
 
 ```ts

idea.md

@@ -35,6 +35,7 @@
 
 [] 自定义工具的大小问题
 [] 优化 ui 布局
+[] 设置条目中添加 switch 开关
 
 ## V2.A.1
 
@@ -68,3 +69,4 @@
 [] 弹幕系统
 [] 优化 Scroll 组件
 [] 重构装备系统
+[] 报错系统，每个错误都进行标号

src/core/main/custom/toolbar.ts

@@ -301,6 +301,10 @@ export class CustomToolbar extends EventEmitter<CustomToolbarEvent> {
         }
     }
 
+    static refreshAll(): void {
+        CustomToolbar.list.forEach(v => v.refresh());
+    }
+
     static showAll(): number[] {
         return CustomToolbar.list.map(v => v.show());
     }

src/core/main/init/settings.tsx

@@ -65,7 +65,7 @@ function NumberSetting(props: SettingComponentProps) {
         if (value < (item.step?.[0] ?? 0) || value > (item.step?.[1] ?? 100)) {
             return;
         }
-        setting.setValue(displayer.selectStack.join('.'), value);
+        setting.setValue(displayer.selectStack.join('.'), Math.round(value));
         displayer.update();
     };
 

src/core/main/init/toolbar.tsx

@@ -8,6 +8,7 @@ import { checkAssist } from '../custom/hotkey';
 import { getVitualKeyOnce } from '@/plugin/utils';
 import { cloneDeep } from 'lodash-es';
 import { Select, SelectOption } from 'ant-design-vue';
+import { mainSetting } from '../setting';
 
 // todo: 新增更改设置的ToolItem
 
@@ -53,15 +54,18 @@ function KeyTool(props: CustomToolbarProps<'hotkey'>) {
 
 function ItemTool(props: CustomToolbarProps<'item'>) {
     const { item, toolbar } = props;
+    const scale = mainSetting.getValue('ui.toolbarScale', 100) / 100;
     return (
         <div
-            style="display: flex; justify-content: center; width: 50px"
+            style={`display: flex; justify-content: center; width: ${
+                50 * scale
+            }px`}
             onClick={() => toolbar.emitTool(item.id)}
         >
             <BoxAnimate
                 noborder={true}
-                width={50}
+                width={50 * scale}
-                height={50}
+                height={50 * scale}
                 id={item.item}
             ></BoxAnimate>
         </div>

src/core/main/setting.ts

@@ -9,6 +9,7 @@ import settingsText from '@/data/settings.json';
 import { isMobile } from '@/plugin/use';
 import { fontSize } from '@/plugin/ui/statusBar';
 import { show as showFrame, hide as hideFrame } from '@/plugin/frame';
+import { CustomToolbar } from './custom/toolbar';
 
 export interface SettingComponentProps {
     item: MotaSettingItem;
@@ -341,6 +342,8 @@ mainSetting.on('valueChange', (key, n, o) => {
         handleAudioSetting(setting, n, o);
     } else if (root === 'debug') {
         handleDebugSetting(setting, n, o)
+    } else if (root === 'ui') {
+        handleUiSetting(setting, n, o);
     }
 });
 
@@ -414,6 +417,20 @@ function handleDebugSetting<T extends number | boolean>(
     }
 }
 
+function handleUiSetting<T extends number | boolean>(
+    key: string,
+    n: T,
+    o: T
+) {
+    if (key === 'toolbarScale') {
+        const scale = (n as number) / (o as number)
+        CustomToolbar.list.forEach(v => {
+            v.setSize(v.width * scale, v.height * scale);
+        })
+        CustomToolbar.refreshAll();
+    }
+}
+
 // ----- 游戏的所有设置项
 // todo: 虚拟键盘缩放，小地图楼传缩放
 mainSetting
@@ -468,6 +485,8 @@ mainSetting
         new MotaSetting()
             .register('mapScale', '小地图缩放', 100, COM.Number, [50, 1000, 50])
             .setDisplayFunc('mapScale', value => `${value}%`)
+            .register('toolbarScale', '工具栏缩放', 100, COM.Number, [10, 500, 10])
+            .setDisplayFunc('toolbarScale', value => `${value}%`)
     )
     .register(
         'debug', 
@@ -501,6 +520,10 @@ loading.once('coreInit', () => {
             'ui.mapScale',
             isMobile ? 300 : Math.floor(window.innerWidth / 600) * 50
         ),
+        'ui.toolbarScale': storage.getValue(
+            'ui.toolbarScale', 
+            isMobile ? 40 : Math.floor(window.innerWidth / 1700 * 10) * 10
+        ),
         'debug.frame': !!storage.getValue('debug.frame', false),
     });
 });

src/plugin/frame.ts

@@ -13,6 +13,8 @@ const realSpan = document.createElement('span');
     v.style.color = 'lightgreen';
     v.style.padding = '0 5px';
     v.style.textAlign = 'right';
+    v.style.width = '300px';
+    v.style.height = '20px';
 });
 
 div.style.position = 'fixed';
@@ -20,6 +22,9 @@ div.style.right = '0';
 div.style.top = '0';
 div.style.display = 'flex';
 div.style.flexDirection = 'column';
+div.style.alignItems = 'end';
+div.style.width = '300px';
+div.style.height = '60px';
 
 div.appendChild(frameSpan);
 div.appendChild(innerSpan);
@@ -106,7 +111,7 @@ export function init() {
             }
         }
         frameList.push();
-        frameSpan.innerText = frame.toFixed(1);
+        frameSpan.textContent = frame.toFixed(1);
         if (!marked) {
             frameList.push({
                 time,
@@ -151,8 +156,8 @@ export function isPaused() {
 }
 
 function setSizeText() {
-    innerSpan.innerText = `innerSize: ${window.innerWidth} x ${window.innerHeight}`;
+    innerSpan.textContent = `innerSize: ${window.innerWidth} x ${window.innerHeight}`;
-    realSpan.innerText = `realSize: ${Math.floor(
+    realSpan.textContent = `realSize: ${Math.floor(
         window.innerWidth * devicePixelRatio
     )} x ${Math.floor(window.innerHeight * devicePixelRatio)}`;
 }