feat: 自定义工具栏存储

src/core/main/custom/toolbar.ts

@@ -15,12 +15,14 @@ import {
 import { gameKey } from '../init/hotkey';
 import { unwarpBinary } from './hotkey';
 import { fixedUi } from '../init/ui';
+import { GameStorage } from '../storage';
 
 interface CustomToolbarEvent extends EmitableEvent {
     add: (item: ValueOf<ToolbarItemMap>) => void;
     delete: (item: ValueOf<ToolbarItemMap>) => void;
     set: (id: string, data: Partial<SettableItemData>) => void;
     emit: (id: string, item: ValueOf<ToolbarItemMap>) => void;
+    posChange: (bar: CustomToolbar) => void;
 }
 
 interface ToolbarItemBase<T extends ToolbarItemType> {
@@ -50,6 +52,14 @@ interface ToolbarItemMap {
     assistKey: AssistKeyToolbarItem;
 }
 
+interface ToolbarSaveData {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    items: ValueOf<ToolbarItemMap>[];
+}
+
 export type ToolbarItemType = keyof ToolbarItemMap;
 
 export type SettableItemData<T extends ToolbarItemType = ToolbarItemType> =
@@ -82,6 +92,10 @@ interface RegisteredCustomToolInfo {
 const COM = createToolbarComponents();
 const EDITOR = createToolbarEditorComponents();
 
+const toolbarStorage = new GameStorage<Record<string, ToolbarSaveData>>(
+    GameStorage.fromAuthor('AncTe', 'toolbar')
+);
+
 export class CustomToolbar extends EventEmitter<CustomToolbarEvent> {
     static num: number = 0;
     static list: CustomToolbar[] = shallowReactive([]);
@@ -215,6 +229,7 @@ export class CustomToolbar extends EventEmitter<CustomToolbarEvent> {
      */
     closeAll() {
         this.showIds.forEach(v => fixedUi.close(v));
+        this.showIds = [];
     }
 
     static get(id: string) {
@@ -251,6 +266,46 @@ export class CustomToolbar extends EventEmitter<CustomToolbarEvent> {
         };
         this.info[type] = info;
     }
+
+    static save() {
+        toolbarStorage.clear();
+        this.list.forEach(v => {
+            const toSave: ToolbarSaveData = {
+                x: v.x,
+                y: v.y,
+                w: v.width,
+                h: v.height,
+                items: []
+            };
+            v.items.forEach(v => {
+                toSave.items.push(v);
+            });
+            toolbarStorage.setValue(v.id, toSave);
+        });
+        toolbarStorage.write();
+    }
+
+    static load() {
+        toolbarStorage.read();
+        for (const [key, value] of Object.entries(toolbarStorage.data)) {
+            const bar = new CustomToolbar(key);
+            bar.x = value.x;
+            bar.y = value.y;
+            bar.width = value.w;
+            bar.height = value.h;
+            for (const item of value.items) {
+                bar.add(item);
+            }
+        }
+    }
+
+    static showAll(): number[] {
+        return CustomToolbar.list.map(v => v.show());
+    }
+
+    static closeAll() {
+        this.list.forEach(v => v.closeAll());
+    }
 }
 
 CustomToolbar.register(
@@ -320,3 +375,18 @@ CustomToolbar.register(
         };
     }
 );
+
+window.addEventListener('unload', () => {
+    CustomToolbar.save();
+});
+window.addEventListener('blur', () => {
+    CustomToolbar.save();
+});
+
+Mota.require('var', 'loading').once('coreInit', () => {
+    CustomToolbar.load();
+    CustomToolbar.closeAll();
+});
+Mota.require('var', 'hook').on('reset', () => {
+    CustomToolbar.showAll();
+});

src/core/main/storage.ts

@@ -1,4 +1,4 @@
-export class GameStorage<T> {
+export class GameStorage<T extends object = any> {
     static list: GameStorage<any>[] = [];
 
     key: string;
@@ -54,6 +54,23 @@ export class GameStorage<T> {
         return JSON.stringify(this.data);
     }
 
+    clear() {
+        // @ts-ignore
+        this.data = {};
+    }
+
+    keys() {
+        return Object.keys(this.data);
+    }
+
+    values() {
+        return Object.values(this.data);
+    }
+
+    entries() {
+        return Object.entries(this.data);
+    }
+
     /**
      * 获取本游戏的存储键
      * @param key 存储名称

src/ui/skillTree.vue

@@ -119,7 +119,7 @@ const mdef = ref(core.status.hero.mdef);
 
 const skill = computed(() => {
     update.value;
-    return skillTree.getSkillFromIndex(selected.value);
+    return skillTree.getSkillFromIndex(selected.value)!;
 });
 
 const skills = computed(() => {

src/ui/start.vue

@@ -72,6 +72,7 @@ import { isMobile } from '../plugin/use';
 import { GameUi } from '@/core/main/custom/ui';
 import { gameKey } from '@/core/main/init/hotkey';
 import { mainUi } from '@/core/main/init/ui';
+import { CustomToolbar } from '@/core/main/custom/toolbar';
 
 const props = defineProps<{
     num: number;
@@ -325,6 +326,8 @@ onMounted(async () => {
         showCursor();
         await sleep(1200);
     });
+
+    CustomToolbar.closeAll();
 });
 
 onUnmounted(() => {

src/ui/toolEditor.vue

@@ -170,7 +170,7 @@
 <script lang="ts" setup>
 import { CustomToolbar, ToolbarItemType } from '@/core/main/custom/toolbar';
 import { GameUi } from '@/core/main/custom/ui';
-import { computed, reactive, ref } from 'vue';
+import { computed, onUnmounted, reactive, ref } from 'vue';
 import {
     PlusOutlined,
     RightOutlined,
@@ -294,6 +294,10 @@ function addTool() {
     addingToolId.value = '';
     addingTool.value = false;
 }
+
+onUnmounted(() => {
+    CustomToolbar.save();
+});
 </script>
 
 <style lang="less" scoped>
@@ -402,7 +406,7 @@ function addTool() {
 
     .tool-item-list-item {
         border: 1px solid #ddd8;
-        margin-bottom: 5%;
+        margin-bottom: 3%;
         background-color: #222;
         padding-left: 2%;
     }

src/ui/toolbar.vue

@@ -28,7 +28,7 @@
 import Box from '@/components/box.vue';
 import { CustomToolbar } from '@/core/main/custom/toolbar';
 import { GameUi } from '@/core/main/custom/ui';
-import { reactive, watch } from 'vue';
+import { onUnmounted, reactive, watch } from 'vue';
 
 interface BoxData {
     x: number;
@@ -44,6 +44,7 @@ const props = defineProps<{
 }>();
 
 const bar = props.bar;
+
 const box = reactive<BoxData>({
     x: bar.x,
     y: bar.y,
@@ -61,6 +62,19 @@ watch(box, ({ x, y, width, height }) => {
 function click() {
     // pass
 }
+
+function posChange() {
+    box.x = bar.x;
+    box.y = bar.y;
+    box.width = bar.width;
+    box.height = bar.height;
+}
+
+bar.on('posChange', posChange);
+
+onUnmounted(() => {
+    bar.off('posChange', posChange);
+});
 </script>
 
 <style lang="less" scoped>