AncTe/HumanBreak
1
1
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-04-19 17:16:08 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 工具栏缩放

Browse Source
This commit is contained in:
unanmed 2024-04-19 18:02:16 +08:00
parent d0ce012160
commit 4c5c741a54
3 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/core/main/custom/toolbar.ts
View File

@ -116,6 +116,14 @@ export class CustomToolbar extends EventEmitter<CustomToolbarEvent> {
constructor(id: string) { constructor(id: string) {
super(); super();
this.id = id; 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(); this.show();
CustomToolbar.list.push(this); CustomToolbar.list.push(this);
} }
@ -188,11 +196,18 @@ export class CustomToolbar extends EventEmitter<CustomToolbarEvent> {
/** /**
* 强制刷新这个自定义工具栏的所有显示 * 强制刷新这个自定义工具栏的所有显示
*/ */
refresh() { refresh(reopen: boolean = false) {
const items = this.items.splice(0); if (reopen) {
nextTick(() => { this.closeAll();
this.items.push(...items); nextTick(() => {
}); this.show();
});
} else {
const items = this.items.splice(0);
nextTick(() => {
this.items.push(...items);
});
}
return this; return this;
} }
@ -301,8 +316,8 @@ export class CustomToolbar extends EventEmitter<CustomToolbarEvent> {
} }
} }
static refreshAll(): void { static refreshAll(reopen: boolean = false): void {
CustomToolbar.list.forEach(v => v.refresh()); CustomToolbar.list.forEach(v => v.refresh(reopen));
} }
static showAll(): number[] { static showAll(): number[] {

2
src/core/main/setting.ts
View File

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

12
src/ui/toolbar.vue
View File

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