Merge branch 'feat/add-provider-notes' into main

- Add provider notes field support - Add deeplink import functionality - Merge with environment variable conflict detection - Merge with Skills management feature - Combine tauri features: tray-icon and protocol-asset - Keep both env and deeplink modules in commands - Merge i18n translations for all new features
2025-11-19 01:10:59 +08:00
parent b9412ece0b a7f1461a33
commit f582bd58b1
28 changed files with 1697 additions and 39 deletions
--- a/src/components/DeepLinkImportDialog.tsx
+++ b/src/components/DeepLinkImportDialog.tsx
@@ -0,0 +1,204 @@
+import { useState, useEffect } from "react";
+import { listen } from "@tauri-apps/api/event";
+import { DeepLinkImportRequest, deeplinkApi } from "@/lib/api/deeplink";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useQueryClient } from "@tanstack/react-query";
+
+interface DeeplinkError {
+  url: string;
+  error: string;
+}
+
+export function DeepLinkImportDialog() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [request, setRequest] = useState<DeepLinkImportRequest | null>(null);
+  const [isImporting, setIsImporting] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    // Listen for deep link import events
+    const unlistenImport = listen<DeepLinkImportRequest>(
+      "deeplink-import",
+      (event) => {
+        console.log("Deep link import event received:", event.payload);
+        setRequest(event.payload);
+        setIsOpen(true);
+      },
+    );
+
+    // Listen for deep link error events
+    const unlistenError = listen<DeeplinkError>("deeplink-error", (event) => {
+      console.error("Deep link error:", event.payload);
+      toast.error(t("deeplink.parseError"), {
+        description: event.payload.error,
+      });
+    });
+
+    return () => {
+      unlistenImport.then((fn) => fn());
+      unlistenError.then((fn) => fn());
+    };
+  }, [t]);
+
+  const handleImport = async () => {
+    if (!request) return;
+
+    setIsImporting(true);
+
+    try {
+      await deeplinkApi.importFromDeeplink(request);
+
+      // Invalidate provider queries to refresh the list
+      await queryClient.invalidateQueries({
+        queryKey: ["providers", request.app],
+      });
+
+      toast.success(t("deeplink.importSuccess"), {
+        description: t("deeplink.importSuccessDescription", {
+          name: request.name,
+        }),
+      });
+
+      setIsOpen(false);
+      setRequest(null);
+    } catch (error) {
+      console.error("Failed to import provider from deep link:", error);
+      toast.error(t("deeplink.importError"), {
+        description: error instanceof Error ? error.message : String(error),
+      });
+    } finally {
+      setIsImporting(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setIsOpen(false);
+    setRequest(null);
+  };
+
+  if (!request) return null;
+
+  // Mask API key for display (show first 4 chars + ***)
+  const maskedApiKey =
+    request.apiKey.length > 4
+      ? `${request.apiKey.substring(0, 4)}${"*".repeat(20)}`
+      : "****";
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent className="sm:max-w-[500px]">
+        {/* 标题显式左对齐，避免默认居中样式影响 */}
+        <DialogHeader className="text-left sm:text-left">
+          <DialogTitle>{t("deeplink.confirmImport")}</DialogTitle>
+          <DialogDescription>
+            {t("deeplink.confirmImportDescription")}
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 主体内容整体右移，略大于标题内边距，让内容看起来不贴边 */}
+        <div className="space-y-4 px-8 py-4">
+          {/* App Type */}
+          <div className="grid grid-cols-3 items-center gap-4">
+            <div className="font-medium text-sm text-muted-foreground">
+              {t("deeplink.app")}
+            </div>
+            <div className="col-span-2 text-sm font-medium capitalize">
+              {request.app}
+            </div>
+          </div>
+
+          {/* Provider Name */}
+          <div className="grid grid-cols-3 items-center gap-4">
+            <div className="font-medium text-sm text-muted-foreground">
+              {t("deeplink.providerName")}
+            </div>
+            <div className="col-span-2 text-sm font-medium">{request.name}</div>
+          </div>
+
+          {/* Homepage */}
+          <div className="grid grid-cols-3 items-center gap-4">
+            <div className="font-medium text-sm text-muted-foreground">
+              {t("deeplink.homepage")}
+            </div>
+            <div className="col-span-2 text-sm break-all text-blue-600 dark:text-blue-400">
+              {request.homepage}
+            </div>
+          </div>
+
+          {/* API Endpoint */}
+          <div className="grid grid-cols-3 items-center gap-4">
+            <div className="font-medium text-sm text-muted-foreground">
+              {t("deeplink.endpoint")}
+            </div>
+            <div className="col-span-2 text-sm break-all">
+              {request.endpoint}
+            </div>
+          </div>
+
+          {/* API Key (masked) */}
+          <div className="grid grid-cols-3 items-center gap-4">
+            <div className="font-medium text-sm text-muted-foreground">
+              {t("deeplink.apiKey")}
+            </div>
+            <div className="col-span-2 text-sm font-mono text-muted-foreground">
+              {maskedApiKey}
+            </div>
+          </div>
+
+          {/* Model (if present) */}
+          {request.model && (
+            <div className="grid grid-cols-3 items-center gap-4">
+              <div className="font-medium text-sm text-muted-foreground">
+                {t("deeplink.model")}
+              </div>
+              <div className="col-span-2 text-sm font-mono">
+                {request.model}
+              </div>
+            </div>
+          )}
+
+          {/* Notes (if present) */}
+          {request.notes && (
+            <div className="grid grid-cols-3 items-start gap-4">
+              <div className="font-medium text-sm text-muted-foreground">
+                {t("deeplink.notes")}
+              </div>
+              <div className="col-span-2 text-sm text-muted-foreground">
+                {request.notes}
+              </div>
+            </div>
+          )}
+
+          {/* Warning */}
+          <div className="rounded-lg bg-yellow-50 dark:bg-yellow-900/20 p-3 text-sm text-yellow-800 dark:text-yellow-200">
+            {t("deeplink.warning")}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={handleCancel}
+            disabled={isImporting}
+          >
+            {t("common.cancel")}
+          </Button>
+          <Button onClick={handleImport} disabled={isImporting}>
+            {isImporting ? t("deeplink.importing") : t("deeplink.import")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/src/components/mcp/McpFormModal.tsx
+++ b/src/components/mcp/McpFormModal.tsx
@@ -1,7 +1,14 @@
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import { Save, Plus, AlertCircle, ChevronDown, ChevronUp, Wand2 } from "lucide-react";
+import {
+  Save,
+  Plus,
+  AlertCircle,
+  ChevronDown,
+  ChevronUp,
+  Wand2,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
--- a/src/components/mcp/McpWizardModal.tsx
+++ b/src/components/mcp/McpWizardModal.tsx
@@ -80,7 +80,9 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
  initialServer,
 }) => {
  const { t } = useTranslation();
-  const [wizardType, setWizardType] = useState<"stdio" | "http" | "sse">("stdio");
+  const [wizardType, setWizardType] = useState<"stdio" | "http" | "sse">(
+    "stdio",
+  );
  const [wizardTitle, setWizardTitle] = useState("");
  // stdio 字段
  const [wizardCommand, setWizardCommand] = useState("");
--- a/src/components/mcp/useMcpValidation.ts
+++ b/src/components/mcp/useMcpValidation.ts
@@ -76,10 +76,7 @@ export function useMcpValidation() {
          if (typ === "stdio" && !(obj as any)?.command?.trim()) {
            return t("mcp.error.commandRequired");
          }
-          if (
-            (typ === "http" || typ === "sse") &&
-            !(obj as any)?.url?.trim()
-          ) {
+          if ((typ === "http" || typ === "sse") && !(obj as any)?.url?.trim()) {
            return t("mcp.wizard.urlRequired");
          }
        }
--- a/src/components/providers/AddProviderDialog.tsx
+++ b/src/components/providers/AddProviderDialog.tsx
@@ -45,6 +45,7 @@ export function AddProviderDialog({
      // 构造基础提交数据
      const providerData: Omit<Provider, "id"> = {
        name: values.name.trim(),
+        notes: values.notes?.trim() || undefined,
        websiteUrl: values.websiteUrl?.trim() || undefined,
        settingsConfig: parsedConfig,
        ...(values.presetCategory ? { category: values.presetCategory } : {}),
--- a/src/components/providers/EditProviderDialog.tsx
+++ b/src/components/providers/EditProviderDialog.tsx
@@ -93,6 +93,7 @@ export function EditProviderDialog({
      const updatedProvider: Provider = {
        ...provider,
        name: values.name.trim(),
+        notes: values.notes?.trim() || undefined,
        websiteUrl: values.websiteUrl?.trim() || undefined,
        settingsConfig: parsedConfig,
        ...(values.presetCategory ? { category: values.presetCategory } : {}),
@@ -129,6 +130,7 @@ export function EditProviderDialog({
            onCancel={() => onOpenChange(false)}
            initialData={{
              name: provider.name,
+              notes: provider.notes,
              websiteUrl: provider.websiteUrl,
              // 若读取到实时配置则优先使用
              settingsConfig: initialSettingsConfig,
--- a/src/components/providers/ProviderCard.tsx
+++ b/src/components/providers/ProviderCard.tsx
@@ -33,10 +33,17 @@ interface ProviderCardProps {
 }

 const extractApiUrl = (provider: Provider, fallbackText: string) => {
+  // 优先级 1: 备注
+  if (provider.notes?.trim()) {
+    return provider.notes.trim();
+  }
+
+  // 优先级 2: 官网地址
  if (provider.websiteUrl) {
    return provider.websiteUrl;
  }

+  // 优先级 3: 从配置中提取请求地址
  const config = provider.settingsConfig;

  if (config && typeof config === "object") {
@@ -83,10 +90,24 @@ export function ProviderCard({
    return extractApiUrl(provider, fallbackUrlText);
  }, [provider, fallbackUrlText]);

+  // 判断是否为可点击的 URL（备注不可点击）
+  const isClickableUrl = useMemo(() => {
+    // 如果有备注，则不可点击
+    if (provider.notes?.trim()) {
+      return false;
+    }
+    // 如果显示的是回退文本，也不可点击
+    if (displayUrl === fallbackUrlText) {
+      return false;
+    }
+    // 其他情况（官网地址或请求地址）可点击
+    return true;
+  }, [provider.notes, displayUrl, fallbackUrlText]);
+
  const usageEnabled = provider.meta?.usage_script?.enabled ?? false;

  const handleOpenWebsite = () => {
-    if (!displayUrl || displayUrl === fallbackUrlText) {
+    if (!isClickableUrl) {
      return;
    }
    onOpenWebsite(displayUrl);
@@ -174,8 +195,14 @@ export function ProviderCard({
              <button
                type="button"
                onClick={handleOpenWebsite}
-                className="inline-flex items-center text-sm text-blue-500 transition-colors hover:underline dark:text-blue-400 max-w-[280px]"
+                className={cn(
+                  "inline-flex items-center text-sm max-w-[280px]",
+                  isClickableUrl
+                    ? "text-blue-500 transition-colors hover:underline dark:text-blue-400 cursor-pointer"
+                    : "text-muted-foreground cursor-default",
+                )}
                title={displayUrl}
+                disabled={!isClickableUrl}
              >
                <span className="truncate">{displayUrl}</span>
              </button>
--- a/src/components/providers/forms/BasicFormFields.tsx
+++ b/src/components/providers/forms/BasicFormFields.tsx
@@ -46,6 +46,20 @@ export function BasicFormFields({ form }: BasicFormFieldsProps) {
          </FormItem>
        )}
      />
+
+      <FormField
+        control={form.control}
+        name="notes"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t("provider.notes")}</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder={t("provider.notesPlaceholder")} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
    </>
  );
 }
--- a/src/components/providers/forms/ProviderForm.tsx
+++ b/src/components/providers/forms/ProviderForm.tsx
@@ -74,6 +74,7 @@ interface ProviderFormProps {
  initialData?: {
    name?: string;
    websiteUrl?: string;
+    notes?: string;
    settingsConfig?: Record<string, unknown>;
    category?: ProviderCategory;
    meta?: ProviderMeta;
@@ -138,6 +139,7 @@ export function ProviderForm({
    () => ({
      name: initialData?.name ?? "",
      websiteUrl: initialData?.websiteUrl ?? "",
+      notes: initialData?.notes ?? "",
      settingsConfig: initialData?.settingsConfig
        ? JSON.stringify(initialData.settingsConfig, null, 2)
        : appId === "codex"
@@ -621,7 +623,6 @@ export function ProviderForm({
            presetCategoryLabels={presetCategoryLabels}
            onPresetChange={handlePresetChange}
            category={category}
-            appId={appId}
          />
        )}

--- a/src/components/providers/forms/ProviderPresetSelector.tsx
+++ b/src/components/providers/forms/ProviderPresetSelector.tsx
@@ -6,7 +6,6 @@ import type { ProviderPreset } from "@/config/claudeProviderPresets";
 import type { CodexProviderPreset } from "@/config/codexProviderPresets";
 import type { GeminiProviderPreset } from "@/config/geminiProviderPresets";
 import type { ProviderCategory } from "@/types";
-import type { AppId } from "@/lib/api";

 type PresetEntry = {
  id: string;
@@ -20,7 +19,6 @@ interface ProviderPresetSelectorProps {
  presetCategoryLabels: Record<string, string>;
  onPresetChange: (value: string) => void;
  category?: ProviderCategory; // 当前选中的分类
-  appId?: AppId;
 }

 export function ProviderPresetSelector({
@@ -30,7 +28,6 @@ export function ProviderPresetSelector({
  presetCategoryLabels,
  onPresetChange,
  category,
-  appId,
 }: ProviderPresetSelectorProps) {
  const { t } = useTranslation();