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

feat: 楼层选择组件翻转操作，符合 2.x 操作习惯

Browse Source
This commit is contained in:
unanmed 2025-08-19 13:54:30 +08:00
parent b7c7cdeca0
commit 51166b1041
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages-user/client-modules/src/render/components/floorSelect.tsx
View File

@ -1,7 +1,7 @@
import { DefaultProps } from '@motajs/render-vue'; import { DefaultProps } from '@motajs/render-vue';
import { SetupComponentOptions } from '@motajs/system-ui'; import { SetupComponentOptions } from '@motajs/system-ui';
import { clamp, isNil } from 'lodash-es'; import { clamp, isNil } from 'lodash-es';
import { computed, defineComponent, ref, watch } from 'vue'; import { computed, defineComponent, onMounted, ref, watch } from 'vue';
import { Scroll, ScrollExpose } from './scroll'; import { Scroll, ScrollExpose } from './scroll';
import { Font } from '@motajs/render-style'; import { Font } from '@motajs/render-style';
import { MotaOffscreenCanvas2D } from '@motajs/render-core'; import { MotaOffscreenCanvas2D } from '@motajs/render-core';
@ -48,13 +48,16 @@ export const FloorSelector = defineComponent<
const scrollRef = ref<ScrollExpose>(); const scrollRef = ref<ScrollExpose>();
const floorId = computed(() => props.floors[now.value]); const floors = computed(() => props.floors.toReversed());
const floorId = computed(() => floors.value[now.value]);
const floorName = computed(() => core.floors[floorId.value].title); const floorName = computed(() => core.floors[floorId.value].title);
watch( watch(
() => props.now, () => props.now,
value => { value => {
if (!isNil(value)) now.value = value; if (!isNil(value)) {
changeTo(value);
}
} }
); );
@ -77,12 +80,14 @@ export const FloorSelector = defineComponent<
ctx.fillRect(0, 0, 144, 200); ctx.fillRect(0, 0, 144, 200);
}; };
const changeTo = (index: number) => { const changeTo = (index: number, time: number = 500) => {
const res = clamp(index, 0, props.floors.length - 1); // 取反是为了符合 2.x 的操作习惯
const res = clamp(index, 0, floors.value.length - 1);
const reversed = floors.value.length - res - 1;
now.value = res; now.value = res;
selList.value = res; selList.value = res;
const y = res * 24; const y = reversed * 24;
scrollRef.value?.scrollTo(y, 500); scrollRef.value?.scrollTo(y, time);
emit('update', now.value, floorId.value); emit('update', now.value, floorId.value);
emit('update:now', now.value); emit('update:now', now.value);
}; };
@ -99,6 +104,10 @@ export const FloorSelector = defineComponent<
emit('close'); emit('close');
}; };
onMounted(() => {
changeTo(now.value, 0);
});
return () => ( return () => (
<container> <container>
<text text={floorName.value} loc={[90, 24]} anc={[0.5, 0.5]} /> <text text={floorName.value} loc={[90, 24]} anc={[0.5, 0.5]} />
@ -116,28 +125,28 @@ export const FloorSelector = defineComponent<
loc={[90, 70]} loc={[90, 70]}
anc={[0.5, 0.5]} anc={[0.5, 0.5]}
cursor="pointer" cursor="pointer"
onClick={() => changeFloor(-10)} onClick={() => changeFloor(10)}
/> />
<text <text
text="「 上移一层 」" text="「 上移一层 」"
loc={[90, 110]} loc={[90, 110]}
anc={[0.5, 0.5]} anc={[0.5, 0.5]}
cursor="pointer" cursor="pointer"
onClick={() => changeFloor(-1)} onClick={() => changeFloor(1)}
/> />
<text <text
text="「 下移一层 」" text="「 下移一层 」"
loc={[90, 370]} loc={[90, 370]}
anc={[0.5, 0.5]} anc={[0.5, 0.5]}
cursor="pointer" cursor="pointer"
onClick={() => changeFloor(1)} onClick={() => changeFloor(-1)}
/> />
<text <text
text="「 下移十层 」" text="「 下移十层 」"
loc={[90, 410]} loc={[90, 410]}
anc={[0.5, 0.5]} anc={[0.5, 0.5]}
cursor="pointer" cursor="pointer"
onClick={() => changeFloor(10)} onClick={() => changeFloor(-10)}
/> />
<container loc={[0, 140, 144, 200]}> <container loc={[0, 140, 144, 200]}>
<Scroll <Scroll
@ -147,10 +156,11 @@ export const FloorSelector = defineComponent<
zIndex={10} zIndex={10}
padEnd={88} padEnd={88}
> >
{props.floors.map((v, i) => { {floors.value.map((v, i, a) => {
const floor = core.floors[v]; const floor = core.floors[v];
const highlight = const nowFloor = a.length - now.value - 1;
now.value === i || selList.value === i; const sel = a.length - selList.value - 1;
const highlight = nowFloor === i || sel === i;
const color = highlight ? '#fff' : '#aaa'; const color = highlight ? '#fff' : '#aaa';
const fill = highlight ? '#fff' : '#000'; const fill = highlight ? '#fff' : '#000';
return ( return (
@ -176,7 +186,7 @@ export const FloorSelector = defineComponent<
lineWidth={1} lineWidth={1}
circle={[130, 12, 3]} circle={[130, 12, 3]}
strokeStyle={color} strokeStyle={color}
fillStyle={now.value === i ? fill : '#000'} fillStyle={nowFloor === i ? fill : '#000'}
/> />
</container> </container>
); );