diff --git a/packages-user/client-modules/src/render/ui/save.tsx b/packages-user/client-modules/src/render/ui/save.tsx index da39ce5..54d1350 100644 --- a/packages-user/client-modules/src/render/ui/save.tsx +++ b/packages-user/client-modules/src/render/ui/save.tsx @@ -16,10 +16,9 @@ export interface SaveProps extends UIComponentProps, DefaultProps { loc: ElementLocator; } -interface SaveBtnProps { +export interface SaveBtnProps extends DefaultProps { loc: ElementLocator; index: number; - emit: (index: number) => void; isDelete: boolean; } @@ -38,19 +37,19 @@ const saveProps = { } satisfies SetupComponentOptions; const saveBtnProps = { - props: ['loc', 'index', 'emit', 'isDelete'] + props: ['loc', 'index', 'isDelete'] } satisfies SetupComponentOptions; -const SaveBtn = defineComponent(props => { - const w = props.loc[2]; +export const SaveBtn = defineComponent(props => { + const w = props.loc[2] ?? 200; + const text = props.index === -1 ? '自动存档' : `存档${props.index + 1}`; + const font = new Font('normal', 18); return () => ( (props => { stroke fillStyle="gray" strokeStyle={props.isDelete ? 'red' : 'white'} - onClick={() => props.emit(props.index)} /> ); @@ -84,35 +76,42 @@ export const Save = defineComponent( // onEmit 事件在点击存档或按键确认时触发 // 存读档执行函数在 ../../utils/saves.ts + /** 除自动存档外,每一页容纳的存档数量 */ + const pageCap = 5; + const font = new Font('normal', 18); + + const isDelete = ref(false); + const pageRef = ref(); + // 参考 ../../action/hotkey.ts 中的按键定义 const [key] = useKey(); key.realize('confirm', () => {}); key.realize('exit', () => {}); // 其他按键自定义,需要新开一个 save 的 group - /** 除自动存档外,每一页容纳的存档数量 */ - const pageRef = ref(); - const pageCap = 5; - - const isDelete = ref(false); - const emitSave = (index: number) => { - if (index === -1) { - core.drawTip('不能覆盖自动存档!'); - return; - } if (isDelete.value) emit('delete', index); else emit('emit', index); }; const wheel = (ev: IWheelEvent) => { - if (ev.wheelY < 0) { - pageRef.value?.movePage(-(ev.ctrlKey ? 10 : 1)); - } else if (ev.wheelY > 0) { - pageRef.value?.movePage(ev.ctrlKey ? 10 : 1); + const delta = Math.sign(ev.wheelY); + if (ev.ctrlKey) { + pageRef.value?.movePage(delta * 10); + } else { + pageRef.value?.movePage(delta); } }; + const toggleDelete = () => { + isDelete.value = !isDelete.value; + }; + + const exit = () => { + emit('exit'); + props.controller.close(props.instance); + }; + return () => ( @@ -127,58 +126,62 @@ export const Save = defineComponent( emitSave(-1)} + cursor="pointer" /> emitSave(page * pageCap)} + cursor="pointer" /> emitSave(page * pageCap + 1)} + cursor="pointer" /> emitSave(page * pageCap + 2)} + cursor="pointer" /> emitSave(page * pageCap + 3)} + cursor="pointer" /> emitSave(page * pageCap + 4)} + cursor="pointer" /> )} { - isDelete.value = !isDelete.value; - }} + onClick={toggleDelete} /> emit('exit')} + zIndex={10} + onClick={exit} /> ); @@ -238,7 +241,6 @@ export function selectSave( } }, onExit: () => { - controller.close(instance); res(-2); } });