fix: api hooks

This commit is contained in:
Gabe
2025-09-25 23:08:39 +08:00
parent 533a0e2d5b
commit 6b9a1a49bb
12 changed files with 523 additions and 444 deletions

View File

@@ -24,6 +24,7 @@ import { apiTranslate } from "../../apis";
import Box from "@mui/material/Box";
import { limitNumber, limitFloat } from "../../libs/utils";
import ReusableAutocomplete from "./ReusableAutocomplete";
import ShowMoreButton from "./ShowMoreButton";
import {
OPT_TRANS_DEEPLX,
OPT_TRANS_OLLAMA,
@@ -115,6 +116,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
const i18n = useI18n();
const [formData, setFormData] = useState({});
const [isModified, setIsModified] = useState(false);
const [showMore, setShowMore] = useState(false);
const confirm = useConfirm();
useEffect(() => {
@@ -282,7 +284,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
<>
<Box>
<Grid container spacing={2} columns={12}>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
{/* todo 改成 ReusableAutocomplete 可选择和填写模型 */}
<TextField
size="small"
@@ -293,7 +295,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<ReusableAutocomplete
freeSolo
size="small"
@@ -305,7 +307,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
size="small"
fullWidth
@@ -316,7 +318,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
size="small"
fullWidth
@@ -327,7 +329,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}></Grid>
<Grid item xs={12} sm={12} md={6} lg={3}></Grid>
</Grid>
</Box>
@@ -393,27 +395,6 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
</Grid>
</Grid>
</Box> */}
<TextField
size="small"
label={i18n("custom_header")}
name="customHeader"
value={customHeader}
onChange={handleChange}
multiline
maxRows={10}
helperText={i18n("custom_header_help")}
/>
<TextField
size="small"
label={i18n("custom_body")}
name="customBody"
value={customBody}
onChange={handleChange}
multiline
maxRows={10}
helperText={i18n("custom_body_help")}
/>
</>
)}
@@ -469,6 +450,14 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
onChange={handleChange}
multiline
maxRows={10}
FormHelperTextProps={{
component: "div",
}}
helperText={
<Box component="pre" sx={{ overflowX: "auto" }}>
{i18n("request_hook_helper")}
</Box>
}
/>
<TextField
size="small"
@@ -478,6 +467,14 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
onChange={handleChange}
multiline
maxRows={10}
FormHelperTextProps={{
component: "div",
}}
helperText={
<Box component="pre" sx={{ overflowX: "auto" }}>
{i18n("response_hook_helper")}
</Box>
}
/>
</>
)}
@@ -485,7 +482,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
{API_SPE_TYPES.batch.has(api.apiType) && (
<Box>
<Grid container spacing={2} columns={12}>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
fullWidth
@@ -499,7 +496,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
<MenuItem value={true}>{i18n("enable")}</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
size="small"
fullWidth
@@ -510,7 +507,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
size="small"
fullWidth
@@ -521,7 +518,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
size="small"
fullWidth
@@ -540,7 +537,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
<>
<Box>
<Grid container spacing={2} columns={12}>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
{" "}
<TextField
select
@@ -555,7 +552,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
<MenuItem value={true}>{i18n("enable")}</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
{" "}
<TextField
size="small"
@@ -574,7 +571,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
<Box>
<Grid container spacing={2} columns={12}>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
size="small"
fullWidth
@@ -585,7 +582,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
size="small"
fullWidth
@@ -596,7 +593,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
size="small"
fullWidth
@@ -607,10 +604,74 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}></Grid>
<Grid item xs={12} sm={12} md={6} lg={3}></Grid>
</Grid>
</Box>
{showMore && (
<>
<TextField
size="small"
label={i18n("custom_header")}
name="customHeader"
value={customHeader}
onChange={handleChange}
multiline
maxRows={10}
helperText={i18n("custom_header_help")}
/>
<TextField
size="small"
label={i18n("custom_body")}
name="customBody"
value={customBody}
onChange={handleChange}
multiline
maxRows={10}
helperText={i18n("custom_body_help")}
/>
{apiType !== OPT_TRANS_CUSTOMIZE && (
<>
<TextField
size="small"
label={"Request Hook"}
name="reqHook"
value={reqHook}
onChange={handleChange}
multiline
maxRows={10}
FormHelperTextProps={{
component: "div",
}}
helperText={
<Box component="pre" sx={{ overflowX: "auto" }}>
{i18n("request_hook_helper")}
</Box>
}
/>
<TextField
size="small"
label={"Response Hook"}
name="resHook"
value={resHook}
onChange={handleChange}
multiline
maxRows={10}
FormHelperTextProps={{
component: "div",
}}
helperText={
<Box component="pre" sx={{ overflowX: "auto" }}>
{i18n("response_hook_helper")}
</Box>
}
/>
</>
)}
</>
)}
<Stack
direction="row"
alignItems="center"
@@ -652,9 +713,11 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
}
label={i18n("is_disabled")}
/>
<ShowMoreButton showMore={showMore} onChange={setShowMore} />
</Stack>
{apiType === OPT_TRANS_CUSTOMIZE && <pre>{i18n("custom_api_help")}</pre>}
{/* {apiType === OPT_TRANS_CUSTOMIZE && <pre>{i18n("custom_api_help")}</pre>} */}
</Stack>
);
}

View File

@@ -24,7 +24,6 @@ import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import { useRules } from "../../hooks/Rules";
import MenuItem from "@mui/material/MenuItem";
import Grid from "@mui/material/Grid";
@@ -62,6 +61,7 @@ import CancelIcon from "@mui/icons-material/Cancel";
import SaveIcon from "@mui/icons-material/Save";
import { kissLog } from "../../libs/log";
import { useApiList } from "../../hooks/Api";
import ShowMoreButton from "./ShowMoreButton";
function RuleFields({ rule, rules, setShow, setKeyword }) {
const initFormValues = useMemo(
@@ -209,30 +209,6 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
</MenuItem>
);
const ShowMoreButton = showMore ? (
<Button
size="small"
variant="text"
onClick={() => {
setShowMore(false);
}}
startIcon={<ExpandLessIcon />}
>
{i18n("less")}
</Button>
) : (
<Button
size="small"
variant="text"
onClick={() => {
setShowMore(true);
}}
startIcon={<ExpandMoreIcon />}
>
{i18n("more")}
</Button>
);
return (
<form onSubmit={handleSubmit}>
<Stack spacing={2}>
@@ -293,7 +269,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
<Box>
<Grid container spacing={2} columns={12}>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
size="small"
@@ -309,7 +285,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
<MenuItem value={"false"}>{i18n("default_disabled")}</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
size="small"
@@ -325,7 +301,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
<MenuItem value={"true"}>{i18n("enable")}</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
size="small"
@@ -341,7 +317,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
<MenuItem value={"true"}>{i18n("enable")}</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
size="small"
@@ -358,7 +334,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
size="small"
@@ -374,7 +350,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
<MenuItem value={"true"}>{i18n("enable")}</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
size="small"
@@ -390,7 +366,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
<MenuItem value={"true"}>{i18n("enable")}</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
size="small"
@@ -406,7 +382,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
<MenuItem value={"font"}>{`<font>`}</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
size="small"
@@ -423,7 +399,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
size="small"
@@ -442,7 +418,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
))}
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
size="small"
@@ -461,7 +437,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
))}
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
size="small"
@@ -480,7 +456,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
))}
</TextField>
</Grid>
{/* <Grid item xs={12} sm={6} md={6} lg={3}>
{/* <Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
size="small"
@@ -500,7 +476,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
</TextField>
</Grid> */}
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
size="small"
@@ -521,7 +497,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
<Box>
<Grid container spacing={2} columns={12}>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
size="small"
@@ -540,7 +516,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
))}
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
size="small"
fullWidth
@@ -714,7 +690,6 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
{i18n("delete")}
</Button>
)}
{ShowMoreButton}
</>
) : (
<>
@@ -742,9 +717,9 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
>
{i18n("restore_default")}
</Button>
{ShowMoreButton}
</>
)}
<ShowMoreButton showMore={showMore} onChange={setShowMore} />
</Stack>
) : (
// 添加
@@ -765,7 +740,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
>
{i18n("cancel")}
</Button>
{ShowMoreButton}
<ShowMoreButton showMore={showMore} onChange={setShowMore} />
</Stack>
))}
</Stack>
@@ -1078,7 +1053,7 @@ function SubRulesEdit({ subList, addSub, updateDataCache }) {
return;
}
if (subList.find((item) => item.url === url)) {
if (subList.some((item) => item.url === url)) {
setInputError(i18n("error_duplicate_values"));
return;
}

View File

@@ -149,7 +149,7 @@ export default function Settings() {
<Box>
<Grid container spacing={2} columns={12}>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
fullWidth
@@ -166,7 +166,7 @@ export default function Settings() {
))}
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
fullWidth
@@ -180,7 +180,7 @@ export default function Settings() {
<MenuItem value={false}>{i18n("disable")}</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
fullWidth
@@ -196,7 +196,7 @@ export default function Settings() {
<MenuItem value={true}>{i18n("hide")}</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
fullWidth
@@ -210,7 +210,7 @@ export default function Settings() {
<MenuItem value={1}>{i18n("fab_click_translate")}</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
fullWidth
size="small"
@@ -221,7 +221,7 @@ export default function Settings() {
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
fullWidth
size="small"
@@ -232,7 +232,7 @@ export default function Settings() {
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
fullWidth
size="small"
@@ -243,7 +243,7 @@ export default function Settings() {
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
fullWidth
size="small"
@@ -254,7 +254,7 @@ export default function Settings() {
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
fullWidth
size="small"
@@ -265,7 +265,7 @@ export default function Settings() {
onChange={handleChange}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
fullWidth
@@ -282,7 +282,7 @@ export default function Settings() {
))}
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
fullWidth
@@ -297,7 +297,7 @@ export default function Settings() {
<MenuItem value={2}>{i18n("secondary_context_menus")}</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<TextField
select
fullWidth
@@ -353,25 +353,25 @@ export default function Settings() {
<>
<Box>
<Grid container spacing={2} columns={12}>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<ShortcutItem
action={OPT_SHORTCUT_TRANSLATE}
label={i18n("toggle_translate_shortcut")}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<ShortcutItem
action={OPT_SHORTCUT_STYLE}
label={i18n("toggle_style_shortcut")}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<ShortcutItem
action={OPT_SHORTCUT_POPUP}
label={i18n("toggle_popup_shortcut")}
/>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={3}>
<Grid item xs={12} sm={12} md={6} lg={3}>
<ShortcutItem
action={OPT_SHORTCUT_SETTING}
label={i18n("open_setting_shortcut")}

View File

@@ -0,0 +1,35 @@
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import Button from "@mui/material/Button";
import { useI18n } from "../../hooks/I18n";
export default function ShowMoreButton({ onChange, showMore }) {
const i18n = useI18n();
const handleClick = () => {
onChange((prev) => !prev);
};
if (showMore) {
return (
<Button
size="small"
variant="text"
onClick={handleClick}
startIcon={<ExpandLessIcon />}
>
{i18n("less")}
</Button>
);
}
return (
<Button
size="small"
variant="text"
onClick={handleClick}
startIcon={<ExpandMoreIcon />}
>
{i18n("more")}
</Button>
);
}