Function UserConfigPanel

src/pages/components/UserConfigPanel/index.tsx:31–212

({ script, userConfig, values })

  userConfig: UserConfig;
  values: { [key: string]: any };
}> = ({ script, userConfig, values }) => {
  const formRefs = useRef<{ [key: string]: FormInstance }>({});
  const [visible, setVisible] = React.useState(true);
  const [tab, setTab] = React.useState("");
  useEffect(() => {
    setTab(userConfig["#options"]?.sort[0] || Object.keys(userConfig)[0]);
    setVisible(true);
  }, [script, userConfig]);

  // 过滤掉 #options
  const filteredConfig = useMemo(() => {
    return (userConfig["#options"]?.sort || Object.keys(userConfig)).reduce((acc, key) => {
      if (key === "#options") {
        return acc;
      }
      acc[key] = userConfig[key] as ConfigGroup;
      return acc;
    }, {} as UserConfigWithoutOptions);
  }, [userConfig]);

  const { t } = useTranslation();

  return (
    <Modal
      visible={visible}
      className={"modal-config"}
      title={`${script.name} ${t("config")}`} // 替换为键值对应的英文文本
      okText={<Popover content={t("save_only_current_group")}>{t("save")}</Popover>}
      cancelText={t("close")} // 替换为键值对应的英文文本
      onOk={() => {
        if (formRefs.current[tab]) {
          const saveValues = formRefs.current[tab].getFieldsValue();
          // 更新value
          const valueClient = new ValueClient(message);
          const uuid = script.uuid;
          const keyValuePairs = [] as TKeyValuePair[];
          for (const key of Object.keys(saveValues)) {
            for (const valueKey of Object.keys(saveValues[key])) {
              if (saveValues[key][valueKey] === undefined) {
                continue;
              }
              keyValuePairs.push([`${key}.${valueKey}`, encodeRValue(saveValues[key][valueKey])]);
            }
          }
          valueClient.setScriptValues({
            uuid: uuid,
            keyValuePairs: keyValuePairs,
            isReplace: false,
            ts: Date.now(),
          });
          Message.success(t("save_success")!); // 替换为键值对应的英文文本
          setVisible(false);
        }
      }}
      onCancel={() => {
        setVisible(false);
      }}
    >