完善楼传，完善ui按键

src/components/colomn.vue

@@ -23,11 +23,13 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUpdated, ref } from 'vue';
+import { onMounted, onUnmounted, onUpdated, ref } from 'vue';
 import { LeftOutlined } from '@ant-design/icons-vue';
 import Scroll from './scroll.vue';
 import { isMobile } from '../plugin/use';
-import { has } from '../plugin/utils';
+import { has, keycode } from '../plugin/utils';
+import { sleep } from 'mutate-animate';
+import { KeyCode } from '../plugin/keyCodes';
 
 const emits = defineEmits<{
     (e: 'close'): void;
@@ -57,8 +59,23 @@ function resize() {
     if (has(props.right)) right.style.flexBasis = `${props.right}%`;
 }
 
-onMounted(resize);
+function key(e: KeyboardEvent) {
+    const c = keycode(e.keyCode);
+    if (c === KeyCode.Escape || c === KeyCode.KeyX) emits('close');
+}
+
+onMounted(async () => {
+    resize();
+
+    await sleep(50);
+    if (core.plugin.transition.value) await sleep(600);
+    document.addEventListener('keyup', key);
+});
 onUpdated(resize);
+
+onUnmounted(() => {
+    document.removeEventListener('keyup', key);
+});
 </script>
 
 <style lang="less" scoped>

src/data/desc.json

@@ -154,6 +154,33 @@
             "<span style=\"color: gold\">按下回车（Enter）键</span>会回到怪物手册界面。"
         ]
     },
+    "fly": {
+        "text": "楼层传送器",
+        "condition": "true",
+        "desc": [
+            "楼传界面打开时会有一个0.6秒的动画，如果不想要可以在开头捡的系统设置里面关闭。（默认关闭）",
+            "<br>",
+            "<br>",
+            "本塔的楼层传送器是一个集<span style=\"color: gold\">分区、小地图、楼层传送</span>于一体的多功能楼传。",
+            "下面是楼传的具体说明：",
+            "<br>",
+            "<br>",
+            "首先，对于电脑端，最左侧显示区域信息，手机端则在上方的左侧。",
+            "<br>",
+            "<br>",
+            "然后，区域的右侧是小地图栏，这一栏会显示楼层的屏幕结构。你可以拖动，也可以使用滚轮或者双指放缩，当放缩到一定大小时，",
+            "会显示地图的缩略图。直接点击地图也可以选中地图，再次点击会传送至目标地图",
+            "<br>",
+            "<br>",
+            "对于电脑端，最右侧是当前选中的地图的缩略图，手机则在下方，点击缩略图也可以传送。缩略图的下方是当前选中的地图名，",
+            "左右各有两个按钮，表示后退10层、后退1层、前进1层、前进10层，与样板的楼传的按钮功能类似。",
+            "<br>",
+            "<br>",
+            "最下方是设置按钮，可以切换无边框模式，电脑端还可以切换传统按键模式，传统按键模式下按键遵循样板的楼传按键方式。",
+            "对于非传统模式，<span style=\"color: gold\">上下左右</span>可以移动地图，",
+            "<span style=\"color: gold\">PageUp和PageDown</span>可以前进1层或后退1层。"
+        ]
+    },
     "tools": {
         "text": "道具栏与装备栏",
         "condition": "true",

src/ui/fly.vue

@@ -105,6 +105,9 @@ let oy = 0;
 let drawedThumbnail: Partial<Record<FloorIds, boolean>> = {};
 let thumbnailLoc: Partial<Record<FloorIds, Loc2>> = {};
 
+noBorder.value = core.getLocalStorage('noBorder') ?? false;
+tradition.value = core.getLocalStorage('flyTradition') ?? false;
+
 const floor = computed(() => {
     return core.status.maps[nowFloor.value];
 });
@@ -120,9 +123,13 @@ watch(nowArea, n => {
             area[n].find(v => v === core.status.floorId) ?? area[n][0];
 });
 watch(noBorder, n => {
+    core.setLocalStorage('noBorder', n);
     drawedThumbnail = {};
     drawMap();
 });
+watch(tradition, n => {
+    core.setLocalStorage('flyTradition', n);
+});
 
 const temp = document.createElement('canvas');
 const tempCtx = temp.getContext('2d')!;

src/ui/skillTree.vue

@@ -68,11 +68,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
 import Scroll from '../components/scroll.vue';
-import { has, splitText, tip } from '../plugin/utils';
+import { has, keycode, splitText, tip } from '../plugin/utils';
 import { isMobile } from '../plugin/use';
+import { sleep } from 'mutate-animate';
+import { KeyCode } from '../plugin/keyCodes';
 
 let canvas: HTMLCanvasElement;
 let ctx: CanvasRenderingContext2D;
@@ -228,22 +230,42 @@ function click(e: MouseEvent) {
     if (!skill) return;
     if (selected.value !== skill.index) selected.value = skill.index;
     else {
-        const success = core.upgradeSkill(skill.index);
+        upgrade(skill.index);
-        if (!success) tip('error', '升级失败！');
-        else {
-            tip('success', '升级成功！');
-            update.value = !update.value;
-            core.status.route.push(`skill:${selected.value}`);
-        }
     }
 }
 
-onMounted(() => {
+function upgrade(index: number) {
+    const success = core.upgradeSkill(index);
+    if (!success) tip('error', '升级失败！');
+    else {
+        tip('success', '升级成功！');
+        update.value = !update.value;
+        core.status.route.push(`skill:${selected.value}`);
+    }
+}
+
+function key(e: KeyboardEvent) {
+    const c = keycode(e.keyCode);
+    if (c === KeyCode.Escape || c === KeyCode.KeyX) exit();
+    if (c === KeyCode.Space || c === KeyCode.Enter || c === KeyCode.KeyC) {
+        upgrade(selected.value);
+    }
+}
+
+onMounted(async () => {
     canvas = document.getElementById('skill-canvas') as HTMLCanvasElement;
     ctx = canvas.getContext('2d')!;
     resize();
     draw();
+
+    await sleep(50);
+    if (core.plugin.transition.value) await sleep(600);
     canvas.addEventListener('click', click);
+    document.addEventListener('keyup', key);
+});
+
+onUnmounted(() => {
+    document.removeEventListener('keyup', key);
 });
 
 function selectChapter(delta: number) {

src/ui/toolbox.vue

@@ -37,7 +37,7 @@
                         dashed
                         style="margin: 1vh 0 1vh 0; border-color: #ddd4"
                     ></a-divider>
-                    <Scroll class="item-list" :width="10">
+                    <Scroll class="item-list">
                         <div
                             class="item selectable"
                             v-for="[id, num] of items[cls]"
@@ -327,7 +327,7 @@ onUnmounted(() => {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    margin: 1vh 1vw 0 0.5vw;
+    margin: 1vh 0 0 0;
     padding: 0.5vh 0.5vw 0.5vh 0.5vw;
     border: #0000 0.5px solid;
     white-space: nowrap;