@tablestore/tablestore-agent-cli 0.2.8 → 0.2.10

package/dist/dashboard-runtime/dashboard/src/components/layout/theme-toggle.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import { Moon, Monitor, Sun } from "lucide-react";
 import { useTheme } from "@/providers/theme-provider";
+import { useI18n } from "@/i18n/i18n-context";
 import { cn } from "@/lib/utils";
 import {
   Tooltip,
@@ -14,170 +15,90 @@ import {
 type ThemeMode = "light" | "system" | "dark";
 
 const MODES: ThemeMode[] = ["light", "system", "dark"];
-const ICONS: Record<ThemeMode, React.ComponentType<{ className?: string }>> = {
-  light: Sun,
-  system: Monitor,
-  dark: Moon,
-};
-const LABELS: Record<ThemeMode, string> = {
-  light: "浅色",
-  system: "自动",
-  dark: "深色",
+const LABEL_KEYS: Record<
+  ThemeMode,
+  "theme.light" | "theme.system" | "theme.dark"
+> = {
+  light: "theme.light",
+  system: "theme.system",
+  dark: "theme.dark",
 };
 
 interface ThemeToggleProps {
-  /** When true, render the compact icon-only variant suitable for a
-   *  collapsed sidebar (32×32 button cycling through modes). */
   collapsed?: boolean;
 }
 
-/**
- * Three-state theme switcher (light / system / dark) inspired by the
- * segmented-control patterns used by Vercel, Linear, and GitHub. Exposes
- * the "system" option explicitly so users can opt into following their
- * OS preference instead of being forced to pick a manual override.
- *
- * Layout adapts to available space:
- *   - Expanded sidebar: full 3-button segmented track with icons +
- *     animated active thumb. Inset shadow on the track gives the
- *     recessed "well" look used by iOS / macOS toggle groups.
- *   - Collapsed sidebar: single icon button showing the *current* mode
- *     (resolves system → light/dark visually). Click cycles through
- *     light → system → dark; tooltip previews the next state so the
- *     compact UI is still discoverable.
- */
 export function ThemeToggle({ collapsed }: ThemeToggleProps) {
   const { theme, setTheme, resolvedTheme } = useTheme();
+  const { t } = useI18n();
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => setMounted(true), []);
 
-  // Reserve identical footprint during SSR to avoid layout shift / hydration
-  // warnings from next-themes.
   if (!mounted) {
-    return collapsed ? (
-      <div className="h-8 w-8" aria-hidden />
-    ) : (
-      <div className="h-8 w-[108px]" aria-hidden />
-    );
+    return <div className="h-8 w-8" aria-hidden />;
   }
 
   const current: ThemeMode = (theme as ThemeMode) ?? "system";
+  const nextIndex = (MODES.indexOf(current) + 1) % MODES.length;
+  const nextMode = MODES[nextIndex];
 
-  if (collapsed) {
-    // Collapsed: cycle through modes on click.
-    const nextIndex = (MODES.indexOf(current) + 1) % MODES.length;
-    const nextMode = MODES[nextIndex];
-    // Pick the icon to display: for `system`, show whichever the OS
-    // currently resolves to so the button always reflects the *visible*
-    // theme, not the abstract preference.
-    const displayMode: "light" | "dark" =
-      current === "system"
-        ? resolvedTheme === "dark"
-          ? "dark"
-          : "light"
-        : current;
-    const Icon = ICONS[displayMode];
+  const displayMode: "light" | "dark" =
+    current === "system"
+      ? resolvedTheme === "dark"
+        ? "dark"
+        : "light"
+      : current;
 
-    return (
-      <TooltipProvider delayDuration={200}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              type="button"
-              aria-label={`切换到 ${LABELS[nextMode]} 主题`}
-              data-mode={current}
-              onClick={() => setTheme(nextMode)}
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            aria-label={t("theme.switchTo", { name: t(LABEL_KEYS[nextMode]) })}
+            data-mode={current}
+            onClick={() => setTheme(nextMode)}
+            className={cn(
+              "group relative flex h-8 w-8 items-center justify-center rounded-md",
+              "text-[hsl(var(--muted-foreground))] transition-colors duration-150",
+              "hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--primary))]",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.3)]",
+            )}
+          >
+            <Sun
               className={cn(
-                "relative flex h-8 w-8 items-center justify-center rounded-md text-[hsl(var(--muted-foreground))] transition-colors",
-                "hover:bg-[hsl(var(--background))] hover:text-[hsl(var(--foreground))]",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.3)]",
+                "absolute h-[18px] w-[18px] transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]",
+                displayMode === "light"
+                  ? "rotate-0 scale-100 opacity-100"
+                  : "-rotate-90 scale-50 opacity-0",
               )}
-            >
-              {/* Icon morph: rotate + scale + opacity cross-fade between
-                  light and dark glyphs so the button itself becomes the
-                  affordance, not a text label. The `system` state inherits
-                  whichever glyph the OS resolves to. */}
-              <Sun
-                className={cn(
-                  "absolute h-[18px] w-[18px] transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]",
-                  displayMode === "light"
-                    ? "rotate-0 scale-100 opacity-100"
-                    : "-rotate-90 scale-50 opacity-0",
-                )}
-              />
-              <Moon
-                className={cn(
-                  "absolute h-[18px] w-[18px] transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]",
-                  displayMode === "dark"
-                    ? "rotate-0 scale-100 opacity-100"
-                    : "rotate-90 scale-50 opacity-0",
-                )}
-              />
-              {/* Tiny `system` indicator badge: a 6px monitor pip in the
-                  bottom-right corner when current === "system" so users
-                  can tell apart "explicitly light" from "system→light". */}
-              {current === "system" && (
-                <span
-                  aria-hidden
-                  className="absolute bottom-0.5 right-0.5 flex h-2.5 w-2.5 items-center justify-center rounded-full bg-[hsl(var(--card))] text-[hsl(var(--primary))] ring-1 ring-[hsl(var(--border))]"
-                >
-                  <Monitor className="h-1.5 w-1.5" strokeWidth={3} />
-                </span>
+            />
+            <Moon
+              className={cn(
+                "absolute h-[18px] w-[18px] transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]",
+                displayMode === "dark"
+                  ? "rotate-0 scale-100 opacity-100"
+                  : "rotate-90 scale-50 opacity-0",
               )}
-              <Icon aria-hidden className="hidden" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent side="right" sideOffset={8}>
-            主题：{LABELS[current]} · 点击切换至 {LABELS[nextMode]}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
-  }
-
-  // Expanded: full 3-button segmented control.
-  return (
-    <div
-      role="radiogroup"
-      aria-label="主题"
-      className={cn(
-        "inline-flex items-center gap-0.5 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--secondary))] p-0.5",
-        "shadow-[inset_0_1px_2px_rgba(15,23,42,0.04)]",
-      )}
-    >
-      {MODES.map((mode) => {
-        const Icon = ICONS[mode];
-        const active = current === mode;
-        return (
-          <TooltipProvider key={mode} delayDuration={300}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  role="radio"
-                  aria-checked={active}
-                  aria-label={LABELS[mode]}
-                  data-state={active ? "on" : "off"}
-                  onClick={() => setTheme(mode)}
-                  className={cn(
-                    "relative flex h-7 w-7 items-center justify-center rounded transition-all duration-200",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.3)]",
-                    active
-                      ? "bg-[hsl(var(--card))] text-[hsl(var(--primary))] shadow-sm"
-                      : "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]",
-                  )}
-                >
-                  <Icon className="h-3.5 w-3.5" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="top" sideOffset={6}>
-                {LABELS[mode]}
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        );
-      })}
-    </div>
+            />
+            {current === "system" && (
+              <span
+                aria-hidden
+                className="absolute -bottom-0.5 -right-0.5 flex h-3 w-3 items-center justify-center rounded-full bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] ring-2 ring-[hsl(var(--sidebar-bg))]"
+              >
+                <Monitor className="h-1.5 w-1.5" strokeWidth={3} />
+              </span>
+            )}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side={collapsed ? "right" : "top"} sideOffset={8}>
+          {t("theme.current", {
+            current: t(LABEL_KEYS[current]),
+            next: t(LABEL_KEYS[nextMode]),
+          })}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }

package/dist/dashboard-runtime/dashboard/src/components/llm-providers/llm-provider-card.tsx

@@ -26,12 +26,7 @@ import {
 import { RelativeTime } from "@/components/shared/relative-time";
 import { useTestLLMProvider } from "@/hooks/use-test-llm-provider";
 import type { ConnectivityResult, LLMProvider } from "@/types/llm-provider";
-
-const TYPE_LABEL: Record<LLMProvider["type"], string> = {
-  "openai-compatible": "OpenAI 兼容",
-  anthropic: "Anthropic",
-  bailian: "百炼",
-};
+import { useI18n } from "@/i18n/i18n-context";
 
 export interface LLMProviderCardProps {
   provider: LLMProvider;
@@ -41,8 +36,15 @@ export interface LLMProviderCardProps {
 export function LLMProviderCard({ provider, onDelete }: LLMProviderCardProps) {
   const router = useRouter();
   const test = useTestLLMProvider();
+  const { t } = useI18n();
   const [result, setResult] = useState<ConnectivityResult | null>(null);
 
+  const typeLabel: Record<LLMProvider["type"], string> = {
+    "openai-compatible": t("llmProviders.card.typeOpenAICompatible"),
+    anthropic: t("llmProviders.card.typeAnthropic"),
+    bailian: t("llmProviders.card.typeBailian"),
+  };
+
   const handleTest = async (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -50,12 +52,22 @@ export function LLMProviderCard({ provider, onDelete }: LLMProviderCardProps) {
       const res = await test.mutateAsync(provider.id);
       setResult(res);
       if (res.ok) {
-        toast.success(`连通成功 · ${res.latencyMs}ms`);
+        toast.success(
+          t("llmProviders.card.connectSuccessToast", {
+            latency: res.latencyMs ?? "?",
+          }),
+        );
       } else {
-        toast.error(res.error?.message ?? "连通失败");
+        toast.error(
+          res.error?.message ?? t("llmProviders.common.connectFailed"),
+        );
       }
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : "测试失败");
+      toast.error(
+        err instanceof Error
+          ? err.message
+          : t("llmProviders.common.testFailed"),
+      );
     }
   };
 
@@ -72,7 +84,7 @@ export function LLMProviderCard({ provider, onDelete }: LLMProviderCardProps) {
                 {provider.name}
               </h3>
               <span className="mt-1 text-xs text-muted-foreground">
-                {TYPE_LABEL[provider.type]}
+                {typeLabel[provider.type]}
               </span>
             </div>
 
@@ -95,14 +107,14 @@ export function LLMProviderCard({ provider, onDelete }: LLMProviderCardProps) {
                     }
                   >
                     <Pencil className="mr-2 h-4 w-4" />
-                    编辑
+                    {t("common.edit")}
                   </DropdownMenuItem>
                   <DropdownMenuItem
                     className="text-[hsl(var(--destructive))] focus:text-[hsl(var(--destructive))]"
                     onClick={() => onDelete?.(provider.id)}
                   >
                     <Trash2 className="mr-2 h-4 w-4" />
-                    删除
+                    {t("common.delete")}
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -111,20 +123,22 @@ export function LLMProviderCard({ provider, onDelete }: LLMProviderCardProps) {
 
           <div className="mt-3 space-y-1.5 text-xs text-muted-foreground">
             <div className="truncate">
-              <span className="text-[hsl(var(--muted-foreground))/0.8]">Base URL：</span>
+              <span className="text-[hsl(var(--muted-foreground))/0.8]">
+                {t("llmProviders.card.baseUrlLabel")}
+              </span>
               <code className="font-mono text-[11px] text-foreground/80">
                 {provider.baseUrl}
               </code>
             </div>
             <div>
-              <span>API Key：</span>
+              <span>{t("llmProviders.card.apiKeyLabel")}</span>
               <code className="font-mono text-[11px] text-foreground/80">
                 {provider.apiKeyMasked}
               </code>
             </div>
             {provider.defaultModel && (
               <div>
-                默认模型：
+                {t("llmProviders.card.defaultModelLabel")}
                 <Badge
                   variant="secondary"
                   className="ml-1 rounded-pill border-0 bg-[hsl(var(--primary-50))] text-primary text-[11px] font-normal"
@@ -137,7 +151,10 @@ export function LLMProviderCard({ provider, onDelete }: LLMProviderCardProps) {
 
           <div className="mt-auto flex items-center justify-between gap-3 pt-4 text-xs text-muted-foreground">
             <span>
-              更新于 <RelativeTime timestamp={new Date(provider.updatedAt).getTime()} />
+              {t("llmProviders.card.updatedPrefix")}
+              <RelativeTime
+                timestamp={new Date(provider.updatedAt).getTime()}
+              />
             </span>
             <div className="flex items-center gap-2">
               {result?.ok && (
@@ -149,7 +166,7 @@ export function LLMProviderCard({ provider, onDelete }: LLMProviderCardProps) {
               {result && !result.ok && (
                 <span className="inline-flex items-center gap-1 text-[hsl(var(--destructive))]">
                   <XCircle className="h-3 w-3" />
-                  失败
+                  {t("llmProviders.card.failed")}
                 </span>
               )}
               <Button
@@ -164,7 +181,7 @@ export function LLMProviderCard({ provider, onDelete }: LLMProviderCardProps) {
                 ) : (
                   <Zap className="mr-1 h-3 w-3" />
                 )}
-                测试
+                {t("llmProviders.card.test")}
               </Button>
             </div>
           </div>

package/dist/dashboard-runtime/dashboard/src/components/llm-providers/llm-provider-delete-dialog.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/components/ui/dialog";
 import { useDeleteLLMProvider } from "@/hooks/use-delete-llm-provider";
 import type { LLMProvider } from "@/types/llm-provider";
+import { useI18n } from "@/i18n/i18n-context";
 
 interface LLMProviderDeleteDialogProps {
   provider: LLMProvider | null;
@@ -26,15 +27,22 @@ export function LLMProviderDeleteDialog({
   onOpenChange,
 }: LLMProviderDeleteDialogProps) {
   const deleteProvider = useDeleteLLMProvider();
+  const { t } = useI18n();
 
   async function handleDelete() {
     if (!provider) return;
     try {
       await deleteProvider.mutateAsync(provider.id);
-      toast.success(`已删除 "${provider.name}"`);
+      toast.success(
+        t("llmProviders.delete.deleteSuccess", { name: provider.name }),
+      );
       onOpenChange(false);
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : "删除失败");
+      toast.error(
+        err instanceof Error
+          ? err.message
+          : t("llmProviders.delete.deleteFailed"),
+      );
     }
   }
 
@@ -42,28 +50,32 @@ export function LLMProviderDeleteDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle className="text-xl">删除大模型配置</DialogTitle>
+          <DialogTitle className="text-xl">
+            {t("llmProviders.delete.title")}
+          </DialogTitle>
         </DialogHeader>
 
         <div className="rounded-md border border-[hsl(var(--destructive))] bg-[hsl(var(--destructive))/0.06] px-4 py-3 text-sm leading-relaxed">
           <p>
             <AlertTriangle className="mr-1 -mt-0.5 inline h-4 w-4 text-destructive" />
-            此操作不可撤销。删除配置{" "}
-            <strong className="font-semibold">{provider?.name}</strong>{" "}
-            后，已在问答测试中使用该配置的会话将需要重新选择模型。
+            {t("llmProviders.delete.warningPrefix")}
+            <strong className="font-semibold">{provider?.name}</strong>
+            {t("llmProviders.delete.warningSuffix")}
           </p>
         </div>
 
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            取消
+            {t("common.cancel")}
           </Button>
           <Button
             variant="destructive"
             disabled={deleteProvider.isPending}
             onClick={handleDelete}
           >
-            {deleteProvider.isPending ? "删除中..." : "确认删除"}
+            {deleteProvider.isPending
+              ? t("common.deleting")
+              : t("common.confirmDelete")}
           </Button>
         </DialogFooter>
       </DialogContent>