fix(usage): add fallback to provider config for usage credentials (#360)

- Make usage script credential fields optional with provider config fallback
- Optimize multi-plan card display: show plan count by default, expandable for details
- Add hint text to explain credential fallback mechanism

src/components/UsageScriptModal.tsx

@@ -400,15 +400,25 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
             {/* 凭证配置 */}
             {shouldShowCredentialsConfig && (
               <div className="space-y-4">
-                <h4 className="text-sm font-medium text-foreground">
-                  {t("usageScript.credentialsConfig")}
-                </h4>
+                <div className="flex items-start justify-between">
+                  <h4 className="text-sm font-medium text-foreground">
+                    {t("usageScript.credentialsConfig")}
+                  </h4>
+                  <p className="text-xs text-muted-foreground">
+                    {t("usageScript.credentialsHint")}
+                  </p>
+                </div>
 
                 <div className="grid gap-4 md:grid-cols-2">
                   {selectedTemplate === TEMPLATE_KEYS.GENERAL && (
                     <>
                       <div className="space-y-2">
-                        <Label htmlFor="usage-api-key">API Key</Label>
+                        <Label htmlFor="usage-api-key">
+                          API Key{" "}
+                          <span className="text-xs text-muted-foreground font-normal">
+                            ({t("usageScript.optional")})
+                          </span>
+                        </Label>
                         <div className="relative">
                           <Input
                             id="usage-api-key"
@@ -417,7 +427,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                             onChange={(e) =>
                               setScript({ ...script, apiKey: e.target.value })
                             }
-                            placeholder="sk-xxxxx"
+                            placeholder={t("usageScript.apiKeyPlaceholder")}
                             autoComplete="off"
                             className="border-white/10"
                           />
@@ -444,7 +454,10 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
 
                       <div className="space-y-2">
                         <Label htmlFor="usage-base-url">
-                          {t("usageScript.baseUrl")}
+                          {t("usageScript.baseUrl")}{" "}
+                          <span className="text-xs text-muted-foreground font-normal">
+                            ({t("usageScript.optional")})
+                          </span>
                         </Label>
                         <Input
                           id="usage-base-url"
@@ -453,7 +466,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                           onChange={(e) =>
                             setScript({ ...script, baseUrl: e.target.value })
                           }
-                          placeholder="https://api.example.com"
+                          placeholder={t("usageScript.baseUrlPlaceholder")}
                           autoComplete="off"
                           className="border-white/10"
                         />

src/components/providers/ProviderCard.tsx

@@ -1,5 +1,5 @@
-import { useMemo } from "react";
-import { GripVertical } from "lucide-react";
+import { useMemo, useState, useEffect } from "react";
+import { GripVertical, ChevronDown, ChevronUp } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import type {
   DraggableAttributes,
@@ -17,6 +17,7 @@ import {
   useResetCircuitBreaker,
 } from "@/lib/query/failover";
 import { toast } from "sonner";
+import { useUsageQuery } from "@/lib/query/queries";
 
 interface DragHandleProps {
   attributes: DraggableAttributes;
@@ -146,6 +147,29 @@ export function ProviderCard({
 
   const usageEnabled = provider.meta?.usage_script?.enabled ?? false;
 
+  // 获取用量数据以判断是否有多套餐
+  const autoQueryInterval = isCurrent
+    ? provider.meta?.usage_script?.autoQueryInterval || 0
+    : 0;
+
+  const { data: usage } = useUsageQuery(provider.id, appId, {
+    enabled: usageEnabled,
+    autoQueryInterval,
+  });
+
+  const hasMultiplePlans =
+    usage?.success && usage.data && usage.data.length > 1;
+
+  // 多套餐默认展开
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // 当检测到多套餐时自动展开
+  useEffect(() => {
+    if (hasMultiplePlans) {
+      setIsExpanded(true);
+    }
+  }, [hasMultiplePlans]);
+
   const handleOpenWebsite = () => {
     if (!isClickableUrl) {
       return;
@@ -247,19 +271,56 @@ export function ProviderCard({
           </div>
         </div>
 
-        <div className="relative flex items-center ml-auto">
-          <div className="ml-auto transition-transform duration-300 ease-out group-hover:-translate-x-[14.5rem] group-focus-within:-translate-x-[14.5rem] sm:group-hover:-translate-x-[16.5rem] sm:group-focus-within:-translate-x-[16.5rem]">
-            <UsageFooter
-              provider={provider}
-              providerId={provider.id}
-              appId={appId}
-              usageEnabled={usageEnabled}
-              isCurrent={isCurrent}
-              inline={true}
-            />
+        <div className="relative flex items-center ml-auto min-w-0">
+          {/* 用量信息区域 - hover 时向左移动，为操作按钮腾出空间 */}
+          <div className="ml-auto transition-transform duration-200 group-hover:-translate-x-[14.5rem] group-focus-within:-translate-x-[14.5rem] sm:group-hover:-translate-x-[16rem] sm:group-focus-within:-translate-x-[16rem]">
+            <div className="flex items-center gap-1">
+              {/* 多套餐时显示套餐数量，单套餐时显示详细信息 */}
+              {hasMultiplePlans ? (
+                <div className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
+                  <span className="font-medium">
+                    {t("usage.multiplePlans", {
+                      count: usage?.data?.length || 0,
+                      defaultValue: `${usage?.data?.length || 0} 个套餐`,
+                    })}
+                  </span>
+                </div>
+              ) : (
+                <UsageFooter
+                  provider={provider}
+                  providerId={provider.id}
+                  appId={appId}
+                  usageEnabled={usageEnabled}
+                  isCurrent={isCurrent}
+                  inline={true}
+                />
+              )}
+              {/* 展开/折叠按钮 - 仅在有多套餐时显示 */}
+              {hasMultiplePlans && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setIsExpanded(!isExpanded);
+                  }}
+                  className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-500 dark:text-gray-400 flex-shrink-0"
+                  title={
+                    isExpanded
+                      ? t("usage.collapse", { defaultValue: "收起" })
+                      : t("usage.expand", { defaultValue: "展开" })
+                  }
+                >
+                  {isExpanded ? (
+                    <ChevronUp size={14} />
+                  ) : (
+                    <ChevronDown size={14} />
+                  )}
+                </button>
+              )}
+            </div>
           </div>
 
-          <div className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1.5 opacity-0 pointer-events-none group-hover:opacity-100 group-focus-within:opacity-100 group-hover:pointer-events-auto group-focus-within:pointer-events-auto transition-all duration-300 ease-out translate-x-2 group-hover:translate-x-0 group-focus-within:translate-x-0">
+          {/* 操作按钮区域 - 绝对定位在右侧，hover 时滑入 */}
+          <div className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1.5 opacity-0 pointer-events-none group-hover:opacity-100 group-focus-within:opacity-100 group-hover:pointer-events-auto group-focus-within:pointer-events-auto transition-all duration-200 translate-x-2 group-hover:translate-x-0 group-focus-within:translate-x-0">
             <ProviderActions
               isCurrent={isCurrent}
               isTesting={isTesting}
@@ -281,6 +342,20 @@ export function ProviderCard({
           </div>
         </div>
       </div>
+
+      {/* 展开的完整套餐列表 */}
+      {isExpanded && hasMultiplePlans && (
+        <div className="mt-4 pt-4 border-t border-border-default">
+          <UsageFooter
+            provider={provider}
+            providerId={provider.id}
+            appId={appId}
+            usageEnabled={usageEnabled}
+            isCurrent={isCurrent}
+            inline={false}
+          />
+        </div>
+      )}
     </div>
   );
 }