wuxu/codeg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设置窗口多语言处理

Browse Source
This commit is contained in:
xintaofei
2026-03-07 11:07:06 +08:00
parent 28babff52c
commit 5ca9fd0b2e
8 changed files with 1861 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

628
src/components/settings/acp-agent-settings.tsx
View File

File diff suppressed because it is too large Load Diff

249
src/components/settings/mcp-settings.tsx
View File

@@ -9,6 +9,7 @@ import {
ShieldCheck,
TerminalSquare,
} from "lucide-react"
import { useTranslations } from "next-intl"
import { toast } from "sonner"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
@@ -62,6 +63,11 @@ type Selection =
| { kind: "market"; id: string }
| null
type McpTranslator = (
key: string,
values?: Record<string, string | number>
) => string
const APP_OPTIONS: { value: McpAppType; label: string }[] = [
{ value: "claude_code", label: "Claude" },
{ value: "codex", label: "Codex" },
@@ -79,11 +85,11 @@ function readString(spec: Record<string, unknown>, key: string): string | null {
return trimmed ? trimmed : null
}
function specSummary(spec: Record<string, unknown>): string {
function specSummary(spec: Record<string, unknown>, t: McpTranslator): string {
const typ = readString(spec, "type") ?? "stdio"
if (typ === "stdio") {
const command = readString(spec, "command") ?? "(missing command)"
const command = readString(spec, "command") ?? t("summary.missingCommand")
const rawArgs = spec.args
const args = Array.isArray(rawArgs)
? rawArgs
@@ -93,12 +99,12 @@ function specSummary(spec: Record<string, unknown>): string {
return args.length > 0 ? `${command} ${args.join(" ")}` : command
}
const url = readString(spec, "url") ?? "(missing url)"
const url = readString(spec, "url") ?? t("summary.missingUrl")
return `${typ}: ${url}`
}
function protocolBadgeLabel(protocol: string): string {
if (protocol === "stdio") return "Stdio"
function protocolBadgeLabel(protocol: string, t: McpTranslator): string {
if (protocol === "stdio") return t("protocol.stdio")
if (protocol === "sse") return "SSE"
if (protocol === "http") return "HTTP"
return protocol
@@ -130,9 +136,10 @@ function defaultParamDraft(
function parseParameterValues(
option: McpMarketplaceInstallOption | null,
draft: Record<string, string>
draft: Record<string, string>,
t: McpTranslator
): { values: Record<string, unknown>; error: string | null } {
if (!option) return { values: {}, error: "请选择安装协议" }
if (!option) return { values: {}, error: t("errors.selectInstallProtocol") }
const values: Record<string, unknown> = {}
for (const field of option.parameters) {
@@ -140,7 +147,10 @@ function parseParameterValues(
if (!raw) {
if (field.required && field.default_value == null) {
return { values: {}, error: `${field.label} 为必填项` }
return {
values: {},
error: t("errors.fieldRequired", { field: field.label }),
}
}
continue
}
@@ -149,7 +159,7 @@ function parseParameterValues(
if (raw !== "true" && raw !== "false") {
return {
values: {},
error: `${field.label} 需要 true 或 false`,
error: t("errors.fieldNeedsBoolean", { field: field.label }),
}
}
values[field.key] = raw === "true"
@@ -159,7 +169,10 @@ function parseParameterValues(
if (field.kind === "number") {
const next = Number(raw)
if (!Number.isFinite(next)) {
return { values: {}, error: `${field.label} 需要数字` }
return {
values: {},
error: t("errors.fieldNeedsNumber", { field: field.label }),
}
}
values[field.key] = next
continue
@@ -168,7 +181,10 @@ function parseParameterValues(
if (field.kind === "integer") {
const next = Number(raw)
if (!Number.isInteger(next)) {
return { values: {}, error: `${field.label} 需要整数` }
return {
values: {},
error: t("errors.fieldNeedsInteger", { field: field.label }),
}
}
values[field.key] = next
continue
@@ -179,13 +195,22 @@ function parseParameterValues(
values[field.key] = JSON.parse(raw)
} catch (err) {
const message = err instanceof Error ? err.message : String(err)
return { values: {}, error: `${field.label} JSON 无效：${message}` }
return {
values: {},
error: t("errors.fieldInvalidJson", {
field: field.label,
message,
}),
}
}
continue
}
if (field.enum_values.length > 0 && !field.enum_values.includes(raw)) {
return { values: {}, error: `${field.label} 的值不在可选范围内` }
return {
values: {},
error: t("errors.fieldOutOfRange", { field: field.label }),
}
}
values[field.key] = raw
@@ -215,10 +240,14 @@ function selectedAppsFromDraft(
)
}
function parseJsonObject(text: string, name: string): Record<string, unknown> {
function parseJsonObject(
text: string,
name: string,
t: McpTranslator
): Record<string, unknown> {
const trimmed = text.trim()
if (!trimmed) {
throw new Error(`${name} 不能为空`)
throw new Error(t("errors.jsonEmpty", { name }))
}
let parsed: unknown
@@ -226,17 +255,19 @@ function parseJsonObject(text: string, name: string): Record<string, unknown> {
parsed = JSON.parse(trimmed)
} catch (err) {
const message = err instanceof Error ? err.message : String(err)
throw new Error(`${name} 不是合法 JSON：${message}`)
throw new Error(t("errors.jsonInvalid", { name, message }))
}
if (!isObject(parsed)) {
throw new Error(`${name} 必须是 JSON 对象`)
throw new Error(t("errors.jsonMustBeObject", { name }))
}
return parsed
}
export function McpSettings() {
const t = useTranslations("McpSettings")
const mcpT = t as unknown as McpTranslator
const [loading, setLoading] = useState(true)
const [loadingError, setLoadingError] = useState<string | null>(null)
@@ -306,9 +337,9 @@ export function McpSettings() {
return installedServers.filter((item) => {
if (item.id.toLowerCase().includes(q)) return true
const spec = isObject(item.spec) ? item.spec : {}
return specSummary(spec).toLowerCase().includes(q)
return specSummary(spec, mcpT).toLowerCase().includes(q)
})
}, [installedServers, localFilter])
}, [installedServers, localFilter, mcpT])
const refreshLocalServers = useCallback(async () => {
const servers = await mcpScanLocal()
@@ -464,7 +495,7 @@ export function McpSettings() {
try {
await mcpRemoveServer(serverId)
const next = await refreshLocalServers()
toast.success("已卸载 MCP")
toast.success(t("toasts.uninstalled"))
setSelection((current) => {
if (current?.kind !== "local" || current.id !== serverId)
@@ -474,12 +505,12 @@ export function McpSettings() {
})
} catch (err) {
const message = err instanceof Error ? err.message : String(err)
toast.error(`卸载失败：${message}`)
toast.error(t("toasts.uninstallFailed", { message }))
} finally {
setRunningAction(null)
}
},
[refreshLocalServers]
[refreshLocalServers, t]
)
const saveLocalServer = useCallback(async () => {
@@ -487,7 +518,11 @@ export function McpSettings() {
let parsedSpec: Record<string, unknown>
try {
parsedSpec = parseJsonObject(localSpecText, "MCP 配置")
parsedSpec = parseJsonObject(
localSpecText,
t("jsonNames.localConfig"),
mcpT
)
} catch (err) {
const message = err instanceof Error ? err.message : String(err)
toast.error(message)
@@ -496,7 +531,7 @@ export function McpSettings() {
const apps = normalizeApps(selectedAppsFromDraft(localAppsDraft))
if (apps.length === 0) {
toast.error("请至少选择一个目标应用")
toast.error(t("toasts.selectAtLeastOneApp"))
return
}
@@ -510,7 +545,7 @@ export function McpSettings() {
apps,
})
const next = await refreshLocalServers()
toast.success("保存成功")
toast.success(t("toasts.saveSuccess"))
const updated = next.find((item) => item.id === selectedLocal.id)
if (updated) {
@@ -520,11 +555,11 @@ export function McpSettings() {
}
} catch (err) {
const message = err instanceof Error ? err.message : String(err)
toast.error(`保存失败：${message}`)
toast.error(t("toasts.saveFailed", { message }))
} finally {
setRunningAction(null)
}
}, [localAppsDraft, localSpecText, refreshLocalServers, selectedLocal])
}, [localAppsDraft, localSpecText, refreshLocalServers, selectedLocal, t])
const switchInstallOption = useCallback(
(optionId: string) => {
@@ -562,7 +597,8 @@ export function McpSettings() {
const parsedParams = parseParameterValues(
selectedInstallOption,
installParamDraft
installParamDraft,
mcpT
)
if (parsedParams.error) {
toast.error(parsedParams.error)
@@ -578,7 +614,11 @@ export function McpSettings() {
const currentSpecText = marketSpecText.trim()
if (marketSpecDirty && currentSpecText !== baselineText) {
try {
specOverride = parseJsonObject(marketSpecText, "安装配置")
specOverride = parseJsonObject(
marketSpecText,
t("jsonNames.installConfig"),
mcpT
)
} catch (err) {
const message = err instanceof Error ? err.message : String(err)
toast.error(message)
@@ -588,7 +628,7 @@ export function McpSettings() {
const apps = normalizeApps(selectedAppsFromDraft(installAppsDraft))
if (apps.length === 0) {
toast.error("请至少选择一个目标应用")
toast.error(t("toasts.selectAtLeastOneApp"))
return
}
@@ -606,7 +646,7 @@ export function McpSettings() {
specOverride,
})
const nextLocal = await refreshLocalServers()
toast.success(`已安装 ${marketDetail.name}`)
toast.success(t("toasts.installed", { name: marketDetail.name }))
setInstallDialogOpen(false)
setLeftTab("local")
@@ -618,7 +658,7 @@ export function McpSettings() {
}
} catch (err) {
const message = err instanceof Error ? err.message : String(err)
toast.error(`安装失败：${message}`)
toast.error(t("toasts.installFailed", { message }))
} finally {
setRunningAction(null)
}
@@ -630,13 +670,14 @@ export function McpSettings() {
marketSpecText,
refreshLocalServers,
selectedInstallOption,
t,
])
if (loading) {
return (
<div className="h-full flex items-center justify-center gap-2 text-sm text-muted-foreground">
<Loader2 className="h-4 w-4 animate-spin" />
加载中...
{t("loading")}
</div>
)
}
@@ -646,28 +687,35 @@ export function McpSettings() {
<Dialog open={installDialogOpen} onOpenChange={setInstallDialogOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>确认安装 MCP</DialogTitle>
<DialogTitle>{t("installDialog.title")}</DialogTitle>
<DialogDescription>
{marketDetail
? `将 ${marketDetail.name} 安装到本地配置。`
: "选择安装目标应用。"}
? t("installDialog.descriptionWithName", {
name: marketDetail.name,
})
: t("installDialog.description")}
</DialogDescription>
</DialogHeader>
<div className="space-y-4 text-sm">
<div className="space-y-2">
<div className="text-xs text-muted-foreground">协议</div>
<div className="text-xs text-muted-foreground">
{t("installDialog.protocol")}
</div>
<Select
value={selectedInstallOption?.id ?? ""}
onValueChange={switchInstallOption}
>
<SelectTrigger>
<SelectValue placeholder="选择协议" />
<SelectValue
placeholder={t("installDialog.selectProtocol")}
/>
</SelectTrigger>
<SelectContent>
{(marketDetail?.install_options ?? []).map((option) => (
<SelectItem key={option.id} value={option.id}>
{protocolBadgeLabel(option.protocol)} · {option.label}
{protocolBadgeLabel(option.protocol, mcpT)} ·{" "}
{option.label}
</SelectItem>
))}
</SelectContent>
@@ -676,7 +724,9 @@ export function McpSettings() {
{selectedInstallOption?.parameters.length ? (
<div className="space-y-2">
<div className="text-xs text-muted-foreground">配置参数</div>
<div className="text-xs text-muted-foreground">
{t("installDialog.parameters")}
</div>
<div className="max-h-56 overflow-auto space-y-2 pr-1">
{selectedInstallOption.parameters.map((field) => {
const raw = installParamDraft[field.key] ?? ""
@@ -704,7 +754,11 @@ export function McpSettings() {
}
>
<SelectTrigger>
<SelectValue placeholder="请选择 true/false" />
<SelectValue
placeholder={t(
"installDialog.booleanPlaceholder"
)}
/>
</SelectTrigger>
<SelectContent>
<SelectItem value="true">true</SelectItem>
@@ -722,7 +776,9 @@ export function McpSettings() {
}
>
<SelectTrigger>
<SelectValue placeholder="选择一个值" />
<SelectValue
placeholder={t("installDialog.selectOneValue")}
/>
</SelectTrigger>
<SelectContent>
{field.enum_values.map((value) => (
@@ -770,7 +826,9 @@ export function McpSettings() {
) : null}
<div className="space-y-2">
<div className="text-xs text-muted-foreground">目标应用</div>
<div className="text-xs text-muted-foreground">
{t("installDialog.targetApps")}
</div>
{APP_OPTIONS.map((app) => (
<label
key={app.value}
@@ -798,7 +856,7 @@ export function McpSettings() {
onClick={() => setInstallDialogOpen(false)}
disabled={Boolean(runningAction?.startsWith("install:"))}
>
取消
{t("actions.cancel")}
</Button>
<Button
onClick={() => {
@@ -811,10 +869,10 @@ export function McpSettings() {
{runningAction?.startsWith("install:") ? (
<>
<Loader2 className="h-3.5 w-3.5 animate-spin" />
安装中
{t("actions.installing")}
</>
) : (
"确认安装"
t("actions.confirmInstall")
)}
</Button>
</DialogFooter>
@@ -830,10 +888,10 @@ export function McpSettings() {
>
<TabsList className="w-full">
<TabsTrigger value="local" className="flex-1">
本地 MCP
{t("tabs.local")}
</TabsTrigger>
<TabsTrigger value="market" className="flex-1">
MCP 市场
{t("tabs.market")}
</TabsTrigger>
</TabsList>
@@ -842,7 +900,7 @@ export function McpSettings() {
<Input
value={localFilter}
onChange={(event) => setLocalFilter(event.target.value)}
placeholder="筛选本地 MCP..."
placeholder={t("local.filterPlaceholder")}
/>
<Button
size="icon"
@@ -859,14 +917,14 @@ export function McpSettings() {
{loadingError ? (
<div className="rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2 text-xs text-red-400">
加载失败：{loadingError}
{t("local.loadFailed", { message: loadingError })}
</div>
) : null}
<div className="h-[calc(100%-48px)] overflow-auto space-y-1">
{filteredLocalServers.length === 0 ? (
<div className="rounded-md border border-dashed p-3 text-xs text-muted-foreground">
当前未检测到本地 MCP。
{t("local.empty")}
</div>
) : (
filteredLocalServers.map((server) => {
@@ -891,7 +949,7 @@ export function McpSettings() {
{server.id}
</div>
<div className="text-xs text-muted-foreground line-clamp-2 break-all">
{specSummary(spec)}
{specSummary(spec, mcpT)}
</div>
</button>
</ContextMenuTrigger>
@@ -907,7 +965,7 @@ export function McpSettings() {
})
}}
>
卸载
{t("actions.uninstall")}
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
@@ -924,7 +982,7 @@ export function McpSettings() {
onValueChange={setSelectedProvider}
>
<SelectTrigger>
<SelectValue placeholder="选择市场" />
<SelectValue placeholder={t("market.selectMarketplace")} />
</SelectTrigger>
<SelectContent>
{providers.map((provider) => (
@@ -939,7 +997,7 @@ export function McpSettings() {
<Input
value={marketQuery}
onChange={(event) => setMarketQuery(event.target.value)}
placeholder="搜索 MCP..."
placeholder={t("market.searchPlaceholder")}
onKeyDown={(event) => {
if (event.key !== "Enter") return
executeSearch({
@@ -978,7 +1036,7 @@ export function McpSettings() {
{searchError ? (
<div className="rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2 text-xs text-red-400">
搜索失败：{searchError}
{t("market.searchFailed", { message: searchError })}
</div>
) : null}
@@ -986,11 +1044,11 @@ export function McpSettings() {
{searching ? (
<div className="h-full min-h-24 rounded-md border border-dashed flex items-center justify-center gap-2 text-xs text-muted-foreground">
<Loader2 className="h-3.5 w-3.5 animate-spin" />
加载 MCP 列表...
{t("market.loadingList")}
</div>
) : searchResults.length === 0 ? (
<div className="rounded-md border border-dashed p-3 text-xs text-muted-foreground">
暂无 MCP 结果。
{t("market.empty")}
</div>
) : (
searchResults.map((item) => {
@@ -1048,7 +1106,7 @@ export function McpSettings() {
variant="secondary"
className="text-[10px]"
>
{protocolBadgeLabel(protocol)}
{protocolBadgeLabel(protocol, mcpT)}
</Badge>
))}
{item.latest_version ? (
@@ -1060,14 +1118,16 @@ export function McpSettings() {
</Badge>
) : null}
{item.verified ? (
<Badge className="text-[10px]">Verified</Badge>
<Badge className="text-[10px]">
{t("badges.verified")}
</Badge>
) : null}
{typeof item.downloads === "number" ? (
<Badge
variant="outline"
className="text-[10px]"
>
{item.downloads} uses
{t("badges.uses", { count: item.downloads })}
</Badge>
) : null}
</div>
@@ -1082,7 +1142,7 @@ export function McpSettings() {
})
}}
>
查看详情
{t("actions.viewDetails")}
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
@@ -1103,7 +1163,7 @@ export function McpSettings() {
{selectedLocal.id}
</h2>
<p className="text-xs text-muted-foreground mt-1">
本地 MCP 配置可直接编辑并保存。
{t("local.description")}
</p>
</div>
<Button
@@ -1118,16 +1178,18 @@ export function McpSettings() {
{runningAction === `uninstall:${selectedLocal.id}` ? (
<>
<Loader2 className="h-3.5 w-3.5 animate-spin" />
卸载中
{t("actions.uninstalling")}
</>
) : (
"卸载"
t("actions.uninstall")
)}
</Button>
</div>
<div className="space-y-2">
<div className="text-xs text-muted-foreground">启用应用</div>
<div className="text-xs text-muted-foreground">
{t("local.enabledApps")}
</div>
<div className="flex flex-wrap gap-2">
{APP_OPTIONS.map((app) => (
<label
@@ -1152,7 +1214,7 @@ export function McpSettings() {
<div className="space-y-2">
<div className="text-xs text-muted-foreground">
MCP 配置(JSON)
{t("local.configJson")}
</div>
<Textarea
value={localSpecText}
@@ -1173,10 +1235,10 @@ export function McpSettings() {
{runningAction === `save:${selectedLocal.id}` ? (
<>
<Loader2 className="h-3.5 w-3.5 animate-spin" />
保存中
{t("actions.saving")}
</>
) : (
"保存"
t("actions.save")
)}
</Button>
</div>
@@ -1188,11 +1250,11 @@ export function McpSettings() {
{marketDetailLoading ? (
<div className="h-40 flex items-center justify-center gap-2 text-sm text-muted-foreground">
<Loader2 className="h-4 w-4 animate-spin" />
加载市场详情...
{t("market.loadingDetail")}
</div>
) : marketDetailError ? (
<div className="rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2 text-xs text-red-400">
加载详情失败：{marketDetailError}
{t("market.detailLoadFailed", { message: marketDetailError })}
</div>
) : marketDetail ? (
<>
@@ -1221,20 +1283,24 @@ export function McpSettings() {
</p>
</div>
</div>
<Button onClick={openInstallDialog}>安装</Button>
<Button onClick={openInstallDialog}>
{t("actions.install")}
</Button>
</div>
<div className="flex flex-wrap gap-1.5">
{marketDetail.verified ? <Badge>Verified</Badge> : null}
{marketDetail.verified ? (
<Badge>{t("badges.verified")}</Badge>
) : null}
{marketDetail.remote ? (
<Badge variant="secondary">Remote</Badge>
<Badge variant="secondary">{t("badges.remote")}</Badge>
) : null}
{marketDetail.homepage ? (
<Badge variant="outline">Has Homepage</Badge>
<Badge variant="outline">{t("badges.hasHomepage")}</Badge>
) : null}
{marketDetail.protocols.map((protocol) => (
<Badge key={`detail-${protocol}`} variant="secondary">
{protocolBadgeLabel(protocol)}
{protocolBadgeLabel(protocol, mcpT)}
</Badge>
))}
{marketDetail.latest_version ? (
@@ -1244,7 +1310,7 @@ export function McpSettings() {
) : null}
{typeof marketDetail.downloads === "number" ? (
<Badge variant="outline">
{marketDetail.downloads} uses
{t("badges.uses", { count: marketDetail.downloads })}
</Badge>
) : null}
</div>
@@ -1268,52 +1334,59 @@ export function McpSettings() {
{marketDetail.owner ? (
<div className="inline-flex items-center gap-1.5">
<ShieldCheck className="h-3.5 w-3.5" />
Owner: {marketDetail.owner}
{t("market.owner", { owner: marketDetail.owner })}
</div>
) : null}
{marketDetail.namespace ? (
<div className="inline-flex items-center gap-1.5">
<TerminalSquare className="h-3.5 w-3.5" />
Namespace: {marketDetail.namespace}
{t("market.namespace", {
namespace: marketDetail.namespace,
})}
</div>
) : null}
{marketDetail.is_deployed != null ? (
<div className="inline-flex items-center gap-1.5">
<Globe className="h-3.5 w-3.5" />
{marketDetail.is_deployed ? "Deployed" : "Not Deployed"}
{marketDetail.is_deployed
? t("badges.deployed")
: t("badges.notDeployed")}
</div>
) : null}
</div>
<div className="space-y-2">
<div className="text-xs text-muted-foreground">
默认安装协议
{t("market.defaultInstallProtocol")}
</div>
<Select
value={selectedInstallOption?.id ?? ""}
onValueChange={switchInstallOption}
>
<SelectTrigger>
<SelectValue placeholder="选择协议" />
<SelectValue
placeholder={t("installDialog.selectProtocol")}
/>
</SelectTrigger>
<SelectContent>
{marketDetail.install_options.map((option) => (
<SelectItem key={option.id} value={option.id}>
{protocolBadgeLabel(option.protocol)} ·{" "}
{protocolBadgeLabel(option.protocol, mcpT)} ·{" "}
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
<div className="text-[11px] text-muted-foreground">
当前选项参数数：
{selectedInstallOption?.parameters.length ?? 0}
{t("market.currentOptionParameterCount", {
count: selectedInstallOption?.parameters.length ?? 0,
})}
</div>
</div>
<div className="space-y-2">
<div className="text-xs text-muted-foreground">
安装配置(JSON，可修改后安装；修改后将覆盖协议/参数表单)
{t("market.installConfigDescription")}
</div>
<Textarea
value={marketSpecText}
@@ -1327,7 +1400,7 @@ export function McpSettings() {
</>
) : (
<div className="rounded-md border border-dashed p-3 text-xs text-muted-foreground">
请选择左侧市场 MCP 查看详情。
{t("market.selectLeftToView")}
</div>
)}
</div>
@@ -1335,7 +1408,7 @@ export function McpSettings() {
{!selection ? (
<div className="h-full flex items-center justify-center text-sm text-muted-foreground">
请选择左侧 MCP。
{t("selectLeftMcp")}
</div>
) : null}
</section>

35
src/components/settings/shortcut-settings.tsx
View File

@@ -1,7 +1,8 @@
"use client"
import { useEffect, useMemo, useState } from "react"
import { useCallback, useEffect, useMemo, useState } from "react"
import { Keyboard, RotateCcw } from "lucide-react"
import { useTranslations } from "next-intl"
import { toast } from "sonner"
import { useIsMac } from "@/hooks/use-is-mac"
import { useShortcutSettings } from "@/hooks/use-shortcut-settings"
@@ -27,10 +28,19 @@ function canShareShortcut(a: ShortcutActionId, b: ShortcutActionId): boolean {
}
export function ShortcutSettings() {
const t = useTranslations("ShortcutSettings")
const { shortcuts, updateShortcut, resetShortcuts } = useShortcutSettings()
const isMac = useIsMac()
const [recordingAction, setRecordingAction] =
useState<ShortcutActionId | null>(null)
const actionTitle = useCallback(
(id: ShortcutActionId) => t(`actions.${id}.title`),
[t]
)
const actionDescription = useCallback(
(id: ShortcutActionId) => t(`actions.${id}.description`),
[t]
)
const isDefault = useMemo(
() =>
@@ -65,14 +75,14 @@ export function ShortcutSettings() {
)
if (conflict) {
toast.error(`快捷键已被「${conflict.title}」占用`)
toast.error(t("toasts.conflict", { title: actionTitle(conflict.id) }))
return
}
if (updateShortcut(recordingAction, shortcut)) {
toast.success("快捷键已更新")
toast.success(t("toasts.updated"))
} else {
toast.error("快捷键无效，请重试")
toast.error(t("toasts.invalid"))
}
setRecordingAction(null)
@@ -83,7 +93,7 @@ export function ShortcutSettings() {
return () => {
window.removeEventListener("keydown", onKeyDown, true)
}
}, [recordingAction, shortcuts, updateShortcut])
}, [actionTitle, recordingAction, shortcuts, t, updateShortcut])
return (
<div className="h-full overflow-auto">
@@ -92,7 +102,7 @@ export function ShortcutSettings() {
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<Keyboard className="h-4 w-4 text-muted-foreground" />
<h2 className="text-sm font-semibold">快捷键</h2>
<h2 className="text-sm font-semibold">{t("sectionTitle")}</h2>
</div>
<Button
variant="outline"
@@ -100,18 +110,17 @@ export function ShortcutSettings() {
onClick={() => {
resetShortcuts()
setRecordingAction(null)
toast.success("已恢复默认快捷键")
toast.success(t("toasts.reset"))
}}
disabled={isDefault}
>
<RotateCcw className="h-3.5 w-3.5" />
恢复默认
{t("resetDefault")}
</Button>
</div>
<p className="text-xs text-muted-foreground leading-5">
点击右侧按钮后按下组合键即可修改。建议使用 Ctrl/Cmd、Alt、Shift
的组合。按 Esc 可取消录制。
{t("recordInstruction")}
</p>
<div className="space-y-2">
@@ -125,10 +134,10 @@ export function ShortcutSettings() {
>
<div className="min-w-0">
<div className="text-sm font-medium">
{definition.title}
{actionTitle(definition.id)}
</div>
<p className="text-xs text-muted-foreground truncate">
{definition.description}
{actionDescription(definition.id)}
</p>
</div>
<Button
@@ -142,7 +151,7 @@ export function ShortcutSettings() {
}}
>
{isRecording
? "按下快捷键..."
? t("recording")
: formatShortcutLabel(shortcuts[definition.id], isMac)}
</Button>
</div>

190
src/components/settings/skills-settings.tsx
View File

@@ -11,6 +11,7 @@ import {
RotateCcw,
Save,
} from "lucide-react"
import { useTranslations } from "next-intl"
import ReactMarkdown from "react-markdown"
import remarkGfm from "remark-gfm"
import { toast } from "sonner"
@@ -63,71 +64,28 @@ import type {
AgentType,
} from "@/lib/types"
function defaultSkillContent(agentType: AgentType): string {
type SkillsTranslator = (
key: string,
values?: Record<string, string | number>
) => string
function defaultSkillContent(
agentType: AgentType,
t: SkillsTranslator
): string {
if (agentType === "gemini") {
return `---
name: example-skill
description: Describe when this skill should be used.
---
# Skill Name
Instructions for the agent when this skill is active.
## Workflow
1. Add actionable step one.
2. Add actionable step two.
`
return t("templates.gemini")
}
if (agentType === "open_code") {
return `---
name: example-skill
description: Describe when this skill should be used.
---
# Purpose
Describe what this skill helps with.
# Steps
1. Add actionable step one.
2. Add actionable step two.
`
return t("templates.openCode")
}
if (agentType === "open_claw") {
return `---
name: example-skill
description: Describe when this skill should be used.
user-invocable: true
disable-model-invocation: false
---
# Purpose
Describe what this skill helps with.
# Instructions
1. Add actionable instruction one.
2. Add actionable instruction two.
`
return t("templates.openClaw")
}
return `# Skill: example-skill
## When to use
- Describe trigger conditions.
## Instructions
1. Add actionable instruction one.
2. Add actionable instruction two.
`
return t("templates.default")
}
function defaultSkillLayoutForAgent(
@@ -245,6 +203,8 @@ function parseYamlFrontMatter(content: string): ParsedFrontMatter {
}
export function SkillsSettings() {
const t = useTranslations("SkillsSettings")
const skillsT = t as unknown as SkillsTranslator
const panelContainerRef = useRef<HTMLDivElement | null>(null)
const [panelContainerWidth, setPanelContainerWidth] = useState(0)
const [agents, setAgents] = useState<AcpAgentInfo[]>([])
@@ -349,10 +309,10 @@ export function SkillsSettings() {
(agentType: AgentType, contentEditing = false) => {
setSelectedSkillId(null)
setSkillDraftId("")
setSkillDraftContent(defaultSkillContent(agentType))
setSkillDraftContent(defaultSkillContent(agentType, skillsT))
setIsContentEditing(contentEditing)
},
[]
[skillsT]
)
const openSkill = useCallback(
@@ -374,12 +334,12 @@ export function SkillsSettings() {
setIsContentEditing(mode === "edit")
} catch (err) {
const message = err instanceof Error ? err.message : String(err)
toast.error("加载 Skill 失败", { description: message })
toast.error(t("toasts.loadFailed"), { description: message })
} finally {
setSkillReading(false)
}
},
[]
[t]
)
const loadSkills = useCallback(async (agentType: AgentType) => {
@@ -466,10 +426,10 @@ export function SkillsSettings() {
await openFolderWindow(dirPath)
} catch (err) {
const message = err instanceof Error ? err.message : String(err)
toast.error("打开目录失败", { description: message })
toast.error(t("toasts.openFolderFailed"), { description: message })
}
},
[]
[t]
)
const handleRequestDeleteSkill = useCallback((skill: AgentSkillItem) => {
@@ -502,13 +462,13 @@ export function SkillsSettings() {
const handleSaveSkill = useCallback(async () => {
if (!selectedAgent) return
if (!skillLocation) {
toast.error("当前 Agent 未找到可用的 Skills 目录")
toast.error(t("toasts.noSkillDirectory"))
return
}
const trimmedId = skillDraftId.trim()
if (!trimmedId) {
toast.error("Skill 名称不能为空")
toast.error(t("toasts.nameRequired"))
return
}
@@ -528,10 +488,12 @@ export function SkillsSettings() {
saved,
isContentEditing ? "edit" : "preview"
)
toast.success(isEditingExisting ? "Skill 已更新" : "Skill 已创建")
toast.success(
isEditingExisting ? t("toasts.updated") : t("toasts.created")
)
} catch (err) {
const message = err instanceof Error ? err.message : String(err)
toast.error("保存 Skill 失败", { description: message })
toast.error(t("toasts.saveFailed"), { description: message })
} finally {
setSkillSaving(false)
}
@@ -545,6 +507,7 @@ export function SkillsSettings() {
skillDraftId,
skillLocation,
isContentEditing,
t,
])
const handleDeleteSkill = useCallback(
@@ -562,7 +525,7 @@ export function SkillsSettings() {
})
const latest = await loadSkills(selectedAgent.agent_type)
toast.success("Skill 已删除")
toast.success(t("toasts.deleted"))
if (!deletingCurrent) return
@@ -574,14 +537,14 @@ export function SkillsSettings() {
}
} catch (err) {
const message = err instanceof Error ? err.message : String(err)
toast.error("删除 Skill 失败", { description: message })
toast.error(t("toasts.deleteFailed"), { description: message })
} finally {
setSkillDeletingId(null)
setDeleteDialogOpen(false)
setDeleteTargetSkill(null)
}
},
[loadSkills, openSkill, resetDraft, selectedAgent, selectedSkillId]
[loadSkills, openSkill, resetDraft, selectedAgent, selectedSkillId, t]
)
const handleConfirmDelete = useCallback(async () => {
@@ -692,7 +655,7 @@ export function SkillsSettings() {
return (
<div className="h-full flex items-center justify-center text-sm text-muted-foreground">
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
正在加载支持 Skills 的 Agent...
{t("loadingAgents")}
</div>
)
}
@@ -701,9 +664,9 @@ export function SkillsSettings() {
<div className="h-full flex flex-col">
<div className="flex items-center justify-between gap-3 pb-4">
<div>
<h2 className="text-base font-semibold">Skills</h2>
<h2 className="text-base font-semibold">{t("title")}</h2>
<p className="text-xs text-muted-foreground mt-1">
左侧选择 Skill，右侧默认预览 Markdown，点击编辑后可修改并保存。
{t("description")}
</p>
</div>
</div>
@@ -716,7 +679,7 @@ export function SkillsSettings() {
{sortedAgents.length === 0 ? (
<div className="h-full rounded-lg border bg-card flex items-center justify-center text-sm text-muted-foreground">
当前没有可管理 Skills 的 Agent。
{t("emptyNoManageableAgents")}
</div>
) : (
<div ref={panelContainerRef} className="flex-1 min-h-0 min-w-0">
@@ -732,7 +695,7 @@ export function SkillsSettings() {
<div className="min-h-0 h-full min-w-0 rounded-lg border bg-card flex flex-col overflow-hidden lg:rounded-r-none">
<div className="border-b p-3 space-y-2.5">
<div className="text-xs font-medium text-muted-foreground">
管理对象
{t("managedTarget")}
</div>
<Select
value={selectedAgentType ?? ""}
@@ -741,7 +704,7 @@ export function SkillsSettings() {
}}
>
<SelectTrigger>
<SelectValue placeholder="请选择 Agent" />
<SelectValue placeholder={t("selectAgentPlaceholder")} />
</SelectTrigger>
<SelectContent align="start">
{sortedAgents.map((agent) => (
@@ -760,12 +723,12 @@ export function SkillsSettings() {
onChange={(event) => {
setSearchQuery(event.target.value)
}}
placeholder="搜索名称 / ID / 路径..."
placeholder={t("searchPlaceholder")}
/>
</div>
<div className="border-b px-3 py-2 text-xs font-medium text-muted-foreground flex items-center justify-between gap-2">
<span>Skills 列表</span>
<span>{t("skillsList")}</span>
<span>{filteredSkills.length}</span>
</div>
@@ -773,7 +736,7 @@ export function SkillsSettings() {
{skillsLoading && (
<div className="text-xs text-muted-foreground flex items-center gap-1.5 p-1">
<Loader2 className="h-3.5 w-3.5 animate-spin" />
加载 Skills 中...
{t("loadingSkills")}
</div>
)}
@@ -785,7 +748,7 @@ export function SkillsSettings() {
{!skillsLoading && !skillsError && !skillsSupported && (
<div className="text-xs text-muted-foreground rounded-md border bg-muted/20 px-2.5 py-2">
当前 Agent 暂不支持 Skills 管理。
{t("agentNotSupported")}
</div>
)}
@@ -793,7 +756,7 @@ export function SkillsSettings() {
skillsSupported &&
filteredSkills.length === 0 && (
<div className="text-xs text-muted-foreground px-1">
暂无 Skill，可点击“新建 Skill”。
{t("emptySkills")}
</div>
)}
@@ -850,7 +813,7 @@ export function SkillsSettings() {
})
}}
>
预览
{t("actions.preview")}
</ContextMenuItem>
<ContextMenuItem
onSelect={() => {
@@ -862,7 +825,7 @@ export function SkillsSettings() {
})
}}
>
编辑
{t("actions.edit")}
</ContextMenuItem>
<ContextMenuItem
onSelect={() => {
@@ -874,7 +837,7 @@ export function SkillsSettings() {
})
}}
>
在新窗口打开
{t("actions.openInWindow")}
</ContextMenuItem>
<ContextMenuItem
disabled={skillSaving || skillReading || deleting}
@@ -883,7 +846,9 @@ export function SkillsSettings() {
}}
className="text-destructive focus:text-destructive"
>
{deleting ? "删除中..." : "删除"}
{deleting
? t("actions.deleting")
: t("actions.delete")}
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
@@ -912,7 +877,7 @@ export function SkillsSettings() {
) : (
<RefreshCw className="h-3.5 w-3.5" />
)}
刷新
{t("actions.refresh")}
</Button>
<Button
size="sm"
@@ -921,7 +886,7 @@ export function SkillsSettings() {
disabled={!selectedAgent}
>
<Plus className="h-3.5 w-3.5" />
新建 Skill
{t("actions.newSkill")}
</Button>
</div>
</div>
@@ -936,7 +901,7 @@ export function SkillsSettings() {
<div className="border-b px-4 py-3 flex items-center justify-between gap-3">
<div className="min-w-0">
<h3 className="text-sm font-semibold truncate">
{skillDraftId.trim() || "新建 Skill"}
{skillDraftId.trim() || t("newSkillTitle")}
</h3>
</div>
@@ -948,7 +913,7 @@ export function SkillsSettings() {
disabled={skillSaving || skillReading}
>
<RotateCcw className="h-3 w-3" />
重置
{t("actions.reset")}
</Button>
<Button
size="xs"
@@ -965,12 +930,12 @@ export function SkillsSettings() {
{skillSaving ? (
<>
<Loader2 className="h-3 w-3 animate-spin" />
保存中...
{t("actions.saving")}
</>
) : (
<>
<Save className="h-3 w-3" />
保存
{t("actions.save")}
</>
)}
</Button>
@@ -981,7 +946,7 @@ export function SkillsSettings() {
<div className="rounded-md border p-3 space-y-2.5">
<div className="text-[11px] text-muted-foreground flex items-center gap-1">
<BookOpenText className="h-3.5 w-3.5" />
Skill 信息
{t("skillInfo")}
</div>
<Input
@@ -989,26 +954,30 @@ export function SkillsSettings() {
onChange={(event) => {
setSkillDraftId(event.target.value)
}}
placeholder="skill-id (letters/numbers/-/_/.)"
placeholder={t("skillIdPlaceholder")}
/>
{draftPathPreview ? (
<div className="text-[11px] text-muted-foreground break-all">
Skills目录：{draftPathPreview}
{t("skillsDirectoryWithPath", {
path: draftPathPreview,
})}
</div>
) : (
<div className="text-[11px] text-muted-foreground break-all">
Skills目录：请输入 Skill ID 以生成完整路径
{t("skillsDirectoryNeedId")}
</div>
)}
</div>
<div className="rounded-md border p-3 space-y-2">
<div className="text-[11px] text-muted-foreground flex items-center justify-between gap-2">
<span>Markdown 内容</span>
<span>{t("markdownContent")}</span>
<div className="flex items-center gap-1.5">
<span>
{isContentEditing ? "编辑中" : "预览中"}
{isContentEditing
? t("editingStatus")
: t("previewStatus")}
</span>
<Button
size="xs"
@@ -1023,12 +992,12 @@ export function SkillsSettings() {
{isContentEditing ? (
<>
<Eye className="h-3 w-3" />
预览
{t("actions.preview")}
</>
) : (
<>
<Pencil className="h-3 w-3" />
编辑
{t("actions.edit")}
</>
)}
</Button>
@@ -1041,7 +1010,7 @@ export function SkillsSettings() {
onChange={(event) => {
setSkillDraftContent(event.target.value)
}}
placeholder="输入 Skill 文本内容..."
placeholder={t("contentPlaceholder")}
className="min-h-80 font-mono text-xs"
/>
) : (
@@ -1049,7 +1018,7 @@ export function SkillsSettings() {
{parsedPreviewContent.frontMatterRaw && (
<div className="rounded-md border bg-muted/10 p-3">
<div className="text-[11px] text-muted-foreground mb-2">
Skills 元信息
{t("metadataTitle")}
</div>
{parsedPreviewContent.fields.length > 0 ? (
<div className="grid gap-1.5">
@@ -1097,11 +1066,11 @@ export function SkillsSettings() {
</div>
) : parsedPreviewContent.frontMatterRaw ? (
<div className="text-xs text-muted-foreground py-3">
该 Skill 仅包含 YAML 元信息。
{t("onlyYamlMetadata")}
</div>
) : (
<div className="text-xs text-muted-foreground py-3">
暂无内容。点击“编辑”开始输入。
{t("emptyContentHint")}
</div>
)}
</div>
@@ -1110,7 +1079,7 @@ export function SkillsSettings() {
{skillReading && (
<div className="text-[11px] text-muted-foreground">
正在加载 Skill...
{t("loadingSkill")}
</div>
)}
</div>
@@ -1118,7 +1087,7 @@ export function SkillsSettings() {
</div>
) : (
<div className="h-full flex items-center justify-center text-xs text-muted-foreground">
暂无可用 Agent。
{t("emptyNoAgents")}
</div>
)}
</div>
@@ -1138,21 +1107,22 @@ export function SkillsSettings() {
>
<AlertDialogContent size="sm">
<AlertDialogHeader>
<AlertDialogTitle>删除 Skill</AlertDialogTitle>
<AlertDialogTitle>{t("deleteDialog.title")}</AlertDialogTitle>
<AlertDialogDescription>
{deleteTargetSkill ? (
<>
确认删除 Skill <code>{deleteTargetSkill.name}</code>{" "}
吗？该操作无法撤销。
{t("deleteDialog.confirmWithNamePrefix")}{" "}
<code>{deleteTargetSkill.name}</code>{" "}
{t("deleteDialog.confirmWithNameSuffix")}
</>
) : (
"确认删除当前 Skill 吗？该操作无法撤销。"
t("deleteDialog.confirm")
)}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={Boolean(skillDeletingId)}>
取消
{t("actions.cancel")}
</AlertDialogCancel>
<AlertDialogAction
variant="destructive"
@@ -1163,7 +1133,7 @@ export function SkillsSettings() {
})
}}
>
{skillDeletingId ? "删除中..." : "删除"}
{skillDeletingId ? t("actions.deleting") : t("actions.delete")}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>