109 lines
3.5 KiB
TypeScript
109 lines
3.5 KiB
TypeScript
import { useEffect, useMemo } from "react";
|
|
import { useAccessStore, useAppConfig } from "@/app/store";
|
|
import Locale from "@/app/locales";
|
|
|
|
import { Path } from "@/app/constant";
|
|
import List from "@/app/components/List";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { getClientConfig } from "@/app/config/client";
|
|
import Card from "@/app/components/Card";
|
|
import SettingHeader from "./SettingHeader";
|
|
import { MenuWrapperInspectProps } from "@/app/components/MenuLayout";
|
|
import SyncItems from "./SyncItems";
|
|
import DangerItems from "./DangerItems";
|
|
import AppSetting from "./AppSetting";
|
|
import MaskSetting from "./MaskSetting";
|
|
import PromptSetting from "./PromptSetting";
|
|
import ProviderSetting from "./ProviderSetting";
|
|
import ModelConfigList from "./ModelSetting";
|
|
|
|
export default function Settings(props: MenuWrapperInspectProps) {
|
|
const { setShowPanel } = props;
|
|
|
|
const navigate = useNavigate();
|
|
const accessStore = useAccessStore();
|
|
const config = useAppConfig();
|
|
|
|
const { isMobileScreen } = config;
|
|
|
|
useEffect(() => {
|
|
const keydownEvent = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") {
|
|
navigate(Path.Home);
|
|
}
|
|
};
|
|
if (clientConfig?.isApp) {
|
|
// Force to set custom endpoint to true if it's app
|
|
accessStore.update((state) => {
|
|
state.useCustomConfig = true;
|
|
});
|
|
}
|
|
document.addEventListener("keydown", keydownEvent);
|
|
return () => {
|
|
document.removeEventListener("keydown", keydownEvent);
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
const clientConfig = useMemo(() => getClientConfig(), []);
|
|
|
|
let containerClassName =
|
|
"h-[calc(100%-1.25rem)] my-2.5 ml-1 mr-2.5 rounded-md";
|
|
let listBodyClassName = "px-6 py-8";
|
|
let cardClassName = "max-w-setting-list mb-8";
|
|
|
|
if (isMobileScreen) {
|
|
containerClassName = "h-setting-panel-mobile";
|
|
listBodyClassName = "gap-5 w-[100%] px-4 py-5";
|
|
cardClassName = "mb-6";
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`flex flex-col overflow-hidden bg-settings-panel ${containerClassName}`}
|
|
>
|
|
<SettingHeader
|
|
isMobileScreen={isMobileScreen}
|
|
goback={() => setShowPanel?.(false)}
|
|
/>
|
|
<div className={`!overflow-x-hidden ${listBodyClassName}`}>
|
|
<Card className={cardClassName} title={Locale.Settings.Basic.Title}>
|
|
<AppSetting />
|
|
</Card>
|
|
<Card className={cardClassName} title={Locale.Settings.Sync.Title}>
|
|
<SyncItems />
|
|
</Card>
|
|
<Card className={cardClassName} title={Locale.Settings.Mask.Title}>
|
|
<MaskSetting />
|
|
</Card>
|
|
<Card className={cardClassName} title={Locale.Settings.Prompt.Title}>
|
|
<PromptSetting />
|
|
</Card>
|
|
<Card className={cardClassName}>
|
|
<ProviderSetting />
|
|
</Card>
|
|
<Card className={cardClassName} title={Locale.Settings.Models.Title}>
|
|
<List
|
|
widgetStyle={{
|
|
selectClassName: "min-w-select-mobile-lg",
|
|
rangeNextLine: isMobileScreen,
|
|
}}
|
|
>
|
|
<ModelConfigList
|
|
modelConfig={config.modelConfig}
|
|
updateConfig={(updater) => {
|
|
const modelConfig = { ...config.modelConfig };
|
|
updater(modelConfig);
|
|
config.update((config) => (config.modelConfig = modelConfig));
|
|
}}
|
|
/>
|
|
</List>
|
|
</Card>
|
|
<Card className={cardClassName} title={Locale.Settings.Danger.Title}>
|
|
<DangerItems />
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|