From b782aee922366eb7d4db1f4b0acb98a232be4244 Mon Sep 17 00:00:00 2001 From: unanmed <1319491857@qq.com> Date: Sat, 11 Oct 2025 17:28:54 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=BE=93=E5=85=A5=E6=A1=86=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + .../src/render/components/input.tsx | 99 ++++++++++++++----- 2 files changed, 75 insertions(+), 25 deletions(-) diff --git a/.gitignore b/.gitignore index c3357ea..e96e974 100644 --- a/.gitignore +++ b/.gitignore @@ -53,3 +53,4 @@ docs/.vitepress/cache docs/.vitepress/dist docs/.vitepress/apiSidebar.ts _docs +template diff --git a/packages-user/client-modules/src/render/components/input.tsx b/packages-user/client-modules/src/render/components/input.tsx index 9f219b4..1dc4844 100644 --- a/packages-user/client-modules/src/render/components/input.tsx +++ b/packages-user/client-modules/src/render/components/input.tsx @@ -10,10 +10,11 @@ import { Transform } from '@motajs/render-core'; import { Font } from '@motajs/render-style'; -import { transitionedColor } from '../use'; +import { transitionedColor, useKey } from '../use'; import { linear } from 'mutate-animate'; import { Background, Selection } from './misc'; import { GameUI, IUIMountable, SetupComponentOptions } from '@motajs/system-ui'; +import { KeyCode } from '@motajs/client-base'; export interface InputProps extends DefaultProps, Partial { /** 输入框的提示内容 */ @@ -49,7 +50,16 @@ export type InputEmits = { }; const inputProps = { - props: ['placeholder', 'value', 'multiline'], + props: [ + 'loc', + 'placeholder', + 'value', + 'multiline', + 'border', + 'circle', + 'borderWidth', + 'pad' + ], emits: ['change', 'input', 'update:value'] } satisfies SetupComponentOptions; @@ -92,6 +102,10 @@ export const Input = defineComponent( width.value - padding.value * 2, height.value - padding.value * 2 ]); + const rectLoc = computed(() => { + const b = props.borderWidth ?? 1; + return [b, b, width.value - b * 2, height.value - b * 2]; + }); const borderColor = transitionedColor( props.border ?? '#ddd', @@ -112,6 +126,9 @@ export const Input = defineComponent( } }); ele.addEventListener('blur', () => { + if (ele) { + updateInput(ele.value); + } ele?.remove(); }); }; @@ -143,42 +160,52 @@ export const Input = defineComponent( if (!ele) createInput(props.multiline ?? false); if (!ele) return; // 计算当前绝对位置 - const renderer = MotaRenderer.get('render-main'); - const canvas = renderer?.getCanvas(); - if (!canvas) return; const chain: RenderItem[] = []; let now: RenderItem | undefined = root.value; + let renderer: MotaRenderer | undefined; if (!now) return; while (now) { chain.unshift(now); + if (now?.isRoot) { + renderer = now as MotaRenderer; + } now = now.parent; } - // 应用内边距偏移 - const { clientLeft, clientTop } = canvas; - const trans = new Transform(); - trans.translate(clientLeft, clientTop); - trans.scale(core.domStyle.scale); + const canvas = renderer?.getCanvas(); + if (!canvas) return; + + const w = width.value; + const h = height.value; + + const border = props.borderWidth ?? 1; + const inputWidth = w - border * 2; + const inputHeight = h - border * 2; + + // 应用根画布偏移 + const box = canvas.getBoundingClientRect(); + let trans = new Transform(); + trans.translate(box.x, box.y); + trans.scale(renderer?.getScale() ?? 1); for (const item of chain) { const { anchorX, anchorY, width, height } = item; trans.translate(-anchorX * width, -anchorY * height); - trans.multiply(item.transform); + trans = trans.multiply(item.transform); } - trans.translate(padding.value, padding.value); + trans.translate(border, border); // 构建CSS transform的matrix字符串 const [a, b, , c, d, , e, f] = trans.mat; const str = `matrix(${a},${b},${c},${d},${e},${f})`; - const w = width.value * core.domStyle.scale; - const h = height.value * core.domStyle.scale; const font = props.font ?? Font.defaults(); ele.style.transform = str; - ele.style.width = `${w - padding.value * 2}px`; - ele.style.height = `${h - padding.value * 2}px`; + ele.style.width = `${inputWidth}px`; + ele.style.height = `${inputHeight}px`; ele.style.font = font.string(); ele.style.color = String(props.fillStyle ?? 'white'); + ele.style.zIndex = '100'; document.body.appendChild(ele); ele.focus(); }; @@ -191,6 +218,14 @@ export const Input = defineComponent( borderColor.set(props.border ?? '#ddd'); }; + const [key] = useKey(); + key.realize('confirm', (_, code) => { + if (code === KeyCode.Enter) { + // 特判回车键 + ele?.blur(); + } + }); + watch( () => props.value, newValue => { @@ -214,6 +249,7 @@ export const Input = defineComponent( return () => ( ( onLeave={leave} > ( loc={textLoc.value} width={width.value - padding.value * 2} text={showText.value} + fillStyle="white" alpha={value.value.length === 0 ? 0.6 : 1} - zIndex={0} + zIndex={10} /> ); @@ -353,12 +393,12 @@ export const InputBox = defineComponent< const noText = computed(() => props.noText ?? '取消'); const text = computed(() => props.text ?? '请输入内容：'); const padding = computed(() => props.pad ?? 8); - const inputHeight = computed(() => props.inputHeight ?? 16); + const inputHeight = computed(() => props.inputHeight ?? 24); const inputLoc = computed(() => [ padding.value, padding.value * 2 + contentHeight.value, props.width - padding.value * 2, - inputHeight.value - padding.value * 2 + inputHeight.value ]); const yesLoc = computed(() => { const y = height.value - padding.value; @@ -379,10 +419,17 @@ export const InputBox = defineComponent< return [x, y + 4, width + 8, height + 8, 0.5, 1]; } }); + const boxLoc = computed(() => { + const [x = 0, y = 0, , , ax = 0, ay = 0] = props.loc; + return [x, y, props.width, height.value, ax, ay]; + }); const updateHeight = (h: number) => { contentHeight.value = h; - height.value = h + inputHeight.value + padding.value * 4; + const [, yh] = yesSize.value; + const [, nh] = noSize.value; + const buttonHeight = Math.max(yh, nh); + height.value = h + inputHeight.value + padding.value * 4 + buttonHeight; }; const change = (value: string) => { @@ -411,11 +458,11 @@ export const InputBox = defineComponent< }; return () => ( - + @@ -426,12 +473,14 @@ export const InputBox = defineComponent< width={props.width - padding.value * 2} zIndex={5} onUpdateHeight={updateHeight} + autoHeight />