@raingor/pi-web-switch 0.2.0

package/src/lib/translations/zh-TW.ts

@@ -0,0 +1,158 @@
+// ─── Traditional Chinese Translations ───────────────────
+
+const zhTW: Record<string, string> = {
+  "nav.dashboard": "儀表板",
+  "nav.models": "模型",
+  "nav.providers": "提供商",
+  "nav.sessions": "會話",
+  "nav.memory": "記憶",
+  "nav.settings": "設定",
+  "app.subtitle": "設定管理器",
+  "app.version": "pi-switch v0.1.0",
+
+  "dashboard.title": "使用統計",
+  "dashboard.requests_count": "{0} 次請求 · 總成本 {1}",
+  "dashboard.range.today": "當天",
+  "dashboard.range.7d": "7天",
+  "dashboard.range.30d": "30天",
+  "dashboard.range.custom": "自訂",
+  "dashboard.to": "至",
+  "dashboard.total_tokens": "消耗 Tokens",
+  "dashboard.total_requests": "總請求數",
+  "dashboard.total_cost": "總成本",
+  "dashboard.cache_hit_rate": "快取命中率",
+  "dashboard.input": "新增輸入",
+  "dashboard.output": "Output",
+  "dashboard.cache_create": "建立",
+  "dashboard.cache_hit": "命中",
+  "dashboard.api_calls": "API 呼叫次數",
+  "dashboard.usd": "USD",
+  "dashboard.usage_trend": "使用趨勢",
+  "dashboard.tokens_k": "Tokens (K)",
+  "dashboard.cost_label": "成本 ($)",
+  "dashboard.request_log": "請求日誌",
+  "dashboard.provider_stats": "Provider 統計",
+  "dashboard.model_stats": "Model 統計",
+  "dashboard.time": "時間",
+  "dashboard.provider": "供應商",
+  "dashboard.model": "計費模型",
+  "dashboard.cost": "總成本",
+  "dashboard.requests": "請求數",
+  "dashboard.status": "狀態",
+  "dashboard.no_data": "該時間範圍內無請求資料",
+  "dashboard.provider_stats_desc": "按供應商聚合的統計資料",
+  "dashboard.model_stats_desc": "按模型聚合的統計資料",
+
+  "models.title": "模型管理",
+  "models.search_placeholder": "搜尋模型...",
+  "models.filter_all": "全部提供商",
+  "models.add_model": "新增模型",
+  "models.edit_model": "編輯模型",
+  "models.delete_model": "刪除模型",
+  "models.no_models": "未找到模型",
+  "models.enabled": "已啟用",
+  "models.disabled": "已停用",
+  "models.enable": "啟用",
+  "models.disable": "停用",
+  "models.capabilities": "能力",
+  "models.reasoning": "推理",
+  "models.image_input": "圖片輸入",
+  "models.context_window": "上下文視窗",
+  "models.max_tokens": "最大 Token",
+  "models.cost_input": "輸入",
+  "models.cost_output": "輸出",
+  "models.cost_cache_read": "快取讀取",
+  "models.cost_cache_write": "快取寫入",
+  "models.save": "儲存",
+  "models.cancel": "取消",
+  "models.delete_confirm": "確定要刪除此模型嗎？",
+
+  "providers.title": "提供商管理",
+  "providers.add_provider": "新增提供商",
+  "providers.edit_provider": "編輯提供商",
+  "providers.delete_provider": "刪除提供商",
+  "providers.custom": "自訂",
+  "providers.builtin": "內建",
+  "providers.no_auth": "未設定",
+  "providers.configured": "已設定",
+  "providers.api_key": "API Key",
+  "providers.base_url": "基礎位址",
+  "providers.api_type": "API 類型",
+  "providers.headers": "請求頭",
+  "providers.auth_method": "認證方式",
+  "providers.save": "儲存",
+  "providers.cancel": "取消",
+  "providers.delete_confirm": "確定要刪除此提供商嗎？",
+  "providers.set_api_key": "設定 API Key",
+  "providers.remove_api_key": "移除 API Key",
+  "providers.models_count": "{0} 個模型",
+
+  "sessions.title": "會話列表",
+  "sessions.summary": "共 {0} 個會話，分佈在 {1} 個專案",
+  "sessions.filter_placeholder": "按專案名稱搜尋...",
+  "sessions.no_sessions": "未找到會話",
+  "sessions.last_active": "最近活躍 {0}",
+  "sessions.sessions_count": "{0} 個會話",
+  "sessions.messages": "{0} 條訊息",
+  "sessions.delete_title": "刪除會話",
+  "sessions.delete_confirm": "確定要刪除此會話嗎？",
+  "sessions.delete_permanent": "這將永久刪除磁碟上的會話檔案。",
+  "sessions.cancel": "取消",
+  "sessions.delete": "刪除",
+  "sessions.deleting": "刪除中...",
+  "sessions.protected": "近 3 天有更新，無法刪除",
+  "sessions.delete_failed": "刪除會話檔案失敗",
+  "sessions.delete_error": "刪除時發生錯誤",
+
+  "memory.title": "記憶檢視",
+  "memory.summary": "pi-hermes-memory · 共 {0} 行，{1} 個檔案",
+  "memory.no_memory": "未找到記憶檔案",
+  "memory.no_memory_desc": "未安裝 pi-hermes-memory 擴充功能",
+  "memory.project_memories": "專案記憶",
+  "memory.user_profile": "使用者輪廓",
+  "memory.failure_records": "故障記錄",
+  "memory.lines": "{0} 行",
+  "memory.updated": "更新於 {0}",
+
+  "settings.title": "設定",
+  "settings.defaults": "預設值",
+  "settings.default_provider": "預設提供商",
+  "settings.default_model": "預設模型",
+  "settings.default_thinking": "預設思考層級",
+  "settings.project_trust": "專案信任",
+  "settings.none": "— 無 —",
+  "settings.appearance": "外觀",
+  "settings.light": "淺色",
+  "settings.dark": "深色",
+  "settings.system": "跟隨系統",
+  "settings.hide_thinking": "隱藏思考過程",
+  "settings.enabled_models": "已啟用模型",
+  "settings.no_models_enabled": "暫無已啟用模型。請在「模型」頁面啟用。",
+  "settings.packages": "擴充功能與套件",
+  "settings.package_placeholder": "npm:package-name",
+  "settings.add": "新增",
+  "settings.no_packages": "未安裝任何套件",
+  "settings.import_export": "匯入與匯出",
+  "settings.export": "匯出設定",
+  "settings.import": "匯入設定",
+  "settings.import_error": "無效的設定檔案格式",
+  "settings.danger_zone": "危險區域",
+  "settings.reset": "重設為預設",
+  "settings.reset_title": "重設設定？",
+  "settings.reset_confirm": "此操作將重設所有設定、認證金鑰和自訂提供商為預設值。變更將直接寫入你的 pi 設定檔 (~/.pi/agent/)。此操作不可撤銷。",
+  "settings.cancel": "取消",
+  "settings.reset_action": "重設",
+
+  "loading.config": "正在載入 pi 設定...",
+  "loading.initializing": "正在初始化...",
+  "loading.error_title": "載入設定失敗",
+  "loading.retry": "重試",
+
+  "language.label": "語言",
+  "language.en": "English",
+  "language.zh-CN": "简体中文",
+  "language.zh-TW": "繁體中文",
+  "language.ja": "日本語",
+};
+
+export default zhTW;

package/src/lib/utils.ts

@@ -0,0 +1,51 @@
+export function formatTokens(tokens: number): string {
+  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(2)}M`;
+  if (tokens >= 1_000) return `${(tokens / 1_000).toFixed(1)}K`;
+  return tokens.toString();
+}
+
+export const USD_TO_CNY = 7.2;
+
+export function formatCost(cost: number, currency: "USD" | "CNY" = "USD"): string {
+  if (currency === "CNY") {
+    const cny = cost * USD_TO_CNY;
+    if (cny >= 100) return `¥${cny.toFixed(2)}`;
+    if (cny >= 1) return `¥${cny.toFixed(3)}`;
+    return `¥${cny.toFixed(4)}`;
+  }
+  if (cost >= 100) return `$${cost.toFixed(2)}`;
+  if (cost >= 1) return `$${cost.toFixed(3)}`;
+  if (cost >= 0.01) return `¢${(cost * 100).toFixed(1)}`;
+  return `$${cost.toFixed(4)}`;
+}
+
+export function formatDate(dateStr: string): string {
+  const d = new Date(dateStr + "T00:00:00");
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+
+export function formatDateFull(dateStr: string): string {
+  const d = new Date(dateStr + "T00:00:00");
+  return d.toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export function formatNumber(n: number): string {
+  return n.toLocaleString("en-US");
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function cn(...classes: (string | boolean | undefined | null)[]): string {
+  return classes.filter(Boolean).join(" ");
+}
+
+export function generateId(): string {
+  return Math.random().toString(36).substring(2, 10);
+}

package/src/main.tsx

@@ -0,0 +1,106 @@
+import { StrictMode, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import { useConfigStore } from "@/store/config-store";
+import { I18nProvider } from "@/lib/i18n";
+import { useTranslation } from "@/lib/i18n";
+import translations from "@/lib/translations";
+import App from "@/App";
+import "@/index.css";
+
+// ─── Theme Sync ─────────────────────────────────────────
+function useThemeSync(initialized: boolean) {
+  const theme = useConfigStore((s) => s.settings?.theme);
+
+  useEffect(() => {
+    if (!initialized) return;
+    const root = document.documentElement;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    function applyTheme() {
+      root.classList.remove("dark", "light");
+      if (theme === "dark") {
+        root.classList.add("dark");
+      } else if (theme === "light") {
+        root.classList.add("light");
+      } else {
+        root.classList.add(mediaQuery.matches ? "dark" : "light");
+      }
+    }
+    applyTheme();
+
+    if (theme !== "light" && theme !== "dark") {
+      const handler = () => applyTheme();
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    }
+  }, [initialized, theme]);
+}
+
+function LoadingScreen() {
+  const { t } = useTranslation();
+  return (
+    <div className="flex h-screen items-center justify-center bg-gray-950">
+      <div className="flex flex-col items-center gap-4">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-gray-600 border-t-blue-500" />
+        <p className="text-sm text-gray-500">{t("loading.config")}</p>
+      </div>
+    </div>
+  );
+}
+
+function ErrorScreen({ error, onRetry }: { error: string; onRetry: () => void }) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex h-screen items-center justify-center bg-gray-950">
+      <div className="flex flex-col items-center gap-4 max-w-md text-center">
+        <p className="text-lg font-semibold text-red-400">{t("loading.error_title")}</p>
+        <p className="text-sm text-gray-400">{error}</p>
+        <button
+          onClick={onRetry}
+          className="mt-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-500"
+        >
+          {t("loading.retry")}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function InitGate({ children }: { children: React.ReactNode }) {
+  const initialized = useConfigStore((s) => s.initialized);
+  const loading = useConfigStore((s) => s.loading);
+  const error = useConfigStore((s) => s.error);
+  const init = useConfigStore((s) => s.init);
+
+  useThemeSync(initialized);
+
+  useEffect(() => {
+    init();
+  }, [init]);
+
+  if (!initialized || loading) {
+    return <LoadingScreen />;
+  }
+
+  if (error) {
+    return <ErrorScreen error={error} onRetry={init} />;
+  }
+
+  return <>{children}</>;
+}
+
+function Root() {
+  return (
+    <I18nProvider translations={translations}>
+      <InitGate>
+        <App />
+      </InitGate>
+    </I18nProvider>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <Root />
+  </StrictMode>
+);