fix: Adjust popup UI

This commit is contained in:
Gabe
2025-11-15 14:39:03 +08:00
parent abcf2baad6
commit 4f00492e49

View File

@@ -342,73 +342,81 @@ export default function PopupCont({
</Grid> </Grid>
</Grid> </Grid>
<TextField <Stack direction="row" spacing={2}>
select <TextField
SelectProps={{ MenuProps: { disablePortal: true } }} select
size="small" SelectProps={{ MenuProps: { disablePortal: true } }}
value={apiSlug} size="small"
name="apiSlug" value={fromLang}
label={i18n("translate_service")} name="fromLang"
onChange={handleChange} label={i18n("from_lang")}
> onChange={handleChange}
{optApis.map(({ key, name }) => ( fullWidth
<MenuItem key={key} value={key}> >
{name} {OPT_LANGS_FROM.map(([lang, name]) => (
</MenuItem> <MenuItem key={lang} value={lang}>
))} {name}
</TextField> </MenuItem>
))}
</TextField>
<TextField <TextField
select select
SelectProps={{ MenuProps: { disablePortal: true } }} SelectProps={{ MenuProps: { disablePortal: true } }}
size="small" size="small"
value={fromLang} value={toLang}
name="fromLang" name="toLang"
label={i18n("from_lang")} label={i18n("to_lang")}
onChange={handleChange} onChange={handleChange}
> fullWidth
{OPT_LANGS_FROM.map(([lang, name]) => ( >
<MenuItem key={lang} value={lang}> {OPT_LANGS_TO.map(([lang, name]) => (
{name} <MenuItem key={lang} value={lang}>
</MenuItem> {name}
))} </MenuItem>
</TextField> ))}
</TextField>
</Stack>
<TextField <Stack direction="row" spacing={2}>
select <TextField
SelectProps={{ MenuProps: { disablePortal: true } }} select
size="small" SelectProps={{ MenuProps: { disablePortal: true } }}
value={toLang} size="small"
name="toLang" value={apiSlug}
label={i18n("to_lang")} name="apiSlug"
onChange={handleChange} label={i18n("translate_service")}
> onChange={handleChange}
{OPT_LANGS_TO.map(([lang, name]) => ( fullWidth
<MenuItem key={lang} value={lang}> >
{name} {optApis.map(({ key, name }) => (
</MenuItem> <MenuItem key={key} value={key}>
))} {name}
</TextField> </MenuItem>
))}
</TextField>
<TextField <TextField
select select
SelectProps={{ MenuProps: { disablePortal: true } }} SelectProps={{ MenuProps: { disablePortal: true } }}
size="small" size="small"
value={textStyle} value={textStyle}
name="textStyle" name="textStyle"
label={ label={
commands["toggleStyle"] commands["toggleStyle"]
? `${i18n("text_style_alt")}(${commands["toggleStyle"]})` ? `${i18n("text_style_alt")}(${commands["toggleStyle"]})`
: i18n("text_style_alt") : i18n("text_style_alt")
} }
onChange={handleChange} onChange={handleChange}
> fullWidth
{allTextStyles.map((item) => ( >
<MenuItem key={item.styleSlug} value={item.styleSlug}> {allTextStyles.map((item) => (
{item.styleName} <MenuItem key={item.styleSlug} value={item.styleSlug}>
</MenuItem> {item.styleName}
))} </MenuItem>
</TextField> ))}
</TextField>
</Stack>
<Stack <Stack
direction="row" direction="row"