mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-04-14 16:39:54 +08:00
feat: improve empty state guidance for first-run experience
Show detailed import instructions and conditionally display common config snippet hint for Claude/Codex/Gemini (not OpenCode/OpenClaw).
This commit is contained in:
@@ -1,17 +1,22 @@
|
|||||||
import { Download, Users } from "lucide-react";
|
import { Download, Users } from "lucide-react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
import type { AppId } from "@/lib/api/types";
|
||||||
|
|
||||||
interface ProviderEmptyStateProps {
|
interface ProviderEmptyStateProps {
|
||||||
|
appId: AppId;
|
||||||
onCreate?: () => void;
|
onCreate?: () => void;
|
||||||
onImport?: () => void;
|
onImport?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ProviderEmptyState({
|
export function ProviderEmptyState({
|
||||||
|
appId,
|
||||||
onCreate,
|
onCreate,
|
||||||
onImport,
|
onImport,
|
||||||
}: ProviderEmptyStateProps) {
|
}: ProviderEmptyStateProps) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
const showSnippetHint =
|
||||||
|
appId === "claude" || appId === "codex" || appId === "gemini";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-border p-10 text-center">
|
<div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-border p-10 text-center">
|
||||||
@@ -19,9 +24,14 @@ export function ProviderEmptyState({
|
|||||||
<Users className="h-7 w-7 text-muted-foreground" />
|
<Users className="h-7 w-7 text-muted-foreground" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg font-semibold">{t("provider.noProviders")}</h3>
|
<h3 className="text-lg font-semibold">{t("provider.noProviders")}</h3>
|
||||||
<p className="mt-2 max-w-sm text-sm text-muted-foreground">
|
<p className="mt-2 max-w-lg text-sm text-muted-foreground">
|
||||||
{t("provider.noProvidersDescription")}
|
{t("provider.noProvidersDescription")}
|
||||||
</p>
|
</p>
|
||||||
|
{showSnippetHint && (
|
||||||
|
<p className="mt-1 max-w-lg text-sm text-muted-foreground">
|
||||||
|
{t("provider.noProvidersDescriptionSnippet")}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
<div className="mt-6 flex flex-col gap-2">
|
<div className="mt-6 flex flex-col gap-2">
|
||||||
{onImport && (
|
{onImport && (
|
||||||
<Button onClick={onImport}>
|
<Button onClick={onImport}>
|
||||||
|
|||||||
@@ -298,6 +298,7 @@ export function ProviderList({
|
|||||||
if (sortedProviders.length === 0) {
|
if (sortedProviders.length === 0) {
|
||||||
return (
|
return (
|
||||||
<ProviderEmptyState
|
<ProviderEmptyState
|
||||||
|
appId={appId}
|
||||||
onCreate={onCreate}
|
onCreate={onCreate}
|
||||||
onImport={() => importMutation.mutate()}
|
onImport={() => importMutation.mutate()}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -80,7 +80,8 @@
|
|||||||
"tabProvider": "Provider",
|
"tabProvider": "Provider",
|
||||||
"tabUniversal": "Universal",
|
"tabUniversal": "Universal",
|
||||||
"noProviders": "No providers added yet",
|
"noProviders": "No providers added yet",
|
||||||
"noProvidersDescription": "Import your current live config below, or manually add a new provider",
|
"noProvidersDescription": "If you already have a config, click \"Import Current Config\" — all data will be safely saved in a default provider",
|
||||||
|
"noProvidersDescriptionSnippet": "Settings other than API key and endpoint (e.g. plugins) will be saved to a common config snippet for sharing across providers",
|
||||||
"importCurrent": "Import Current Config",
|
"importCurrent": "Import Current Config",
|
||||||
"importCurrentDescription": "Import current live config as default provider",
|
"importCurrentDescription": "Import current live config as default provider",
|
||||||
"currentlyUsing": "Currently Using",
|
"currentlyUsing": "Currently Using",
|
||||||
|
|||||||
@@ -80,7 +80,8 @@
|
|||||||
"tabProvider": "プロバイダー",
|
"tabProvider": "プロバイダー",
|
||||||
"tabUniversal": "統一プロバイダー",
|
"tabUniversal": "統一プロバイダー",
|
||||||
"noProviders": "まだプロバイダーがありません",
|
"noProviders": "まだプロバイダーがありません",
|
||||||
"noProvidersDescription": "下の「現在の設定をインポート」ボタンで既存の設定を取り込むか、新しいプロバイダーを手動で追加してください",
|
"noProvidersDescription": "既存の設定がある場合は「現在の設定をインポート」をクリックしてください。すべてのデータが default プロバイダーに安全に保存されます",
|
||||||
|
"noProvidersDescriptionSnippet": "API キーとリクエスト URL 以外のデータ(プラグインなど)は共通設定スニペットに保存され、プロバイダー間で共有できます",
|
||||||
"importCurrent": "現在の設定をインポート",
|
"importCurrent": "現在の設定をインポート",
|
||||||
"importCurrentDescription": "現在使用中の設定をデフォルトプロバイダーとしてインポート",
|
"importCurrentDescription": "現在使用中の設定をデフォルトプロバイダーとしてインポート",
|
||||||
"currentlyUsing": "現在使用中",
|
"currentlyUsing": "現在使用中",
|
||||||
|
|||||||
@@ -80,7 +80,8 @@
|
|||||||
"tabProvider": "供应商",
|
"tabProvider": "供应商",
|
||||||
"tabUniversal": "统一供应商",
|
"tabUniversal": "统一供应商",
|
||||||
"noProviders": "还没有添加任何供应商",
|
"noProviders": "还没有添加任何供应商",
|
||||||
"noProvidersDescription": "点击下方的\"导入当前配置\"按钮导入已有配置,或手动添加新的供应商",
|
"noProvidersDescription": "如果你已有配置,请点击\"导入当前配置\",所有数据将安全保存在 default 供应商中",
|
||||||
|
"noProvidersDescriptionSnippet": "除 Key 和请求地址外的数据(如插件配置)会被保存到通用配置片段,用于在不同供应商之间共享",
|
||||||
"importCurrent": "导入当前配置",
|
"importCurrent": "导入当前配置",
|
||||||
"importCurrentDescription": "将当前正在使用的配置导入为默认供应商",
|
"importCurrentDescription": "将当前正在使用的配置导入为默认供应商",
|
||||||
"currentlyUsing": "当前使用",
|
"currentlyUsing": "当前使用",
|
||||||
|
|||||||
Reference in New Issue
Block a user