feat(settings): add first-run confirmation dialogs for proxy and usage features

Prevent accidental activation of advanced features by showing a one-time
info dialog. Once confirmed, the flag is persisted in settings.json and
the dialog never appears again.

- Proxy: confirmation when toggling proxy server ON for the first time
- Usage: confirmation when enabling usage query inside UsageScriptModal
- Enhanced ConfirmDialog with "info" variant (blue icon + default button)
- Added i18n translations for zh, en, ja

src/components/UsageScriptModal.tsx

@@ -4,7 +4,8 @@ import { toast } from "sonner";
 import { useTranslation } from "react-i18next";
 import { useQueryClient } from "@tanstack/react-query";
 import { Provider, UsageScript, UsageData } from "@/types";
-import { usageApi, type AppId } from "@/lib/api";
+import { usageApi, settingsApi, type AppId } from "@/lib/api";
+import { useSettingsQuery } from "@/lib/query";
 import { extractCodexBaseUrl } from "@/utils/providerConfigUtils";
 import JsonEditor from "./JsonEditor";
 import * as prettier from "prettier/standalone";
@@ -15,6 +16,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { FullScreenPanel } from "@/components/common/FullScreenPanel";
+import { ConfirmDialog } from "@/components/ConfirmDialog";
 import { cn } from "@/lib/utils";
 
 interface UsageScriptModalProps {
@@ -112,6 +114,8 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
 }) => {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
+  const { data: settingsData } = useSettingsQuery();
+  const [showUsageConfirm, setShowUsageConfirm] = useState(false);
 
   // 生成带国际化的预设模板
   const PRESET_TEMPLATES = generatePresetTemplates(t);
@@ -247,6 +251,27 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
   const [showApiKey, setShowApiKey] = useState(false);
   const [showAccessToken, setShowAccessToken] = useState(false);
 
+  const handleEnableToggle = (checked: boolean) => {
+    if (checked && !settingsData?.usageConfirmed) {
+      setShowUsageConfirm(true);
+    } else {
+      setScript({ ...script, enabled: checked });
+    }
+  };
+
+  const handleUsageConfirm = async () => {
+    setShowUsageConfirm(false);
+    try {
+      if (settingsData) {
+        await settingsApi.save({ ...settingsData, usageConfirmed: true });
+        await queryClient.invalidateQueries({ queryKey: ["settings"] });
+      }
+    } catch (error) {
+      console.error("Failed to save usage confirmed:", error);
+    }
+    setScript({ ...script, enabled: true });
+  };
+
   const handleSave = () => {
     if (script.enabled && !script.code.trim()) {
       toast.error(t("usageScript.scriptEmpty"));
@@ -436,9 +461,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
         </p>
         <Switch
           checked={script.enabled}
-          onCheckedChange={(checked) =>
-            setScript({ ...script, enabled: checked })
-          }
+          onCheckedChange={handleEnableToggle}
           aria-label={t("usageScript.enableUsageQuery")}
         />
       </div>
@@ -844,6 +867,16 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
           </div>
         </div>
       )}
+
+      <ConfirmDialog
+        isOpen={showUsageConfirm}
+        variant="info"
+        title={t("confirm.usage.title")}
+        message={t("confirm.usage.message")}
+        confirmText={t("confirm.usage.confirm")}
+        onConfirm={() => void handleUsageConfirm()}
+        onCancel={() => setShowUsageConfirm(false)}
+      />
     </FullScreenPanel>
   );
 };