Skip to content

refactor(ui): 优化配置弹窗布局与暗色模式样式 #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jsrcode merged 1 commit into from
Jan 14, 2026
Merged

refactor(ui): 优化配置弹窗布局与暗色模式样式 #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions src/components/ToolAdvancedConfigDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,16 @@ export function ToolAdvancedConfigDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent
className="sm:max-w-[90vw] max-h-[90vh] overflow-y-auto"
className="sm:max-w-[90vw] max-h-[90vh] flex flex-col"
onInteractOutside={(e) => e.preventDefault()}
onEscapeKeyDown={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogHeader className="flex-shrink-0">
<DialogTitle className="flex items-center gap-2">
<img src={logoMap[toolId]} alt={toolName} className="w-5 h-5" />
<span>{toolName} 高级配置</span>
</DialogTitle>
</DialogHeader>
<div className="mt-4">
<div className="mt-4 flex-1 overflow-y-auto min-h-0">
{toolId === 'claude-code' && <ClaudeConfigManager />}
{toolId === 'codex' && <CodexConfigManager />}
{toolId === 'gemini-cli' && <GeminiConfigManager />}
Expand Down
17 changes: 7 additions & 10 deletions src/components/ToolConfigManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ export function ToolConfigManager({
const isCompound = isCompoundField(schema, currentValue);

return (
<Card key={key} className="border border-slate-200/80">
<Card key={key} className="border">
{isCompound ? (
<>
<CardHeader className="flex flex-row items-start justify-between space-y-0">
Expand Down Expand Up @@ -361,7 +361,7 @@ export function ToolConfigManager({
};

return (
<Card className="border border-slate-200/80 shadow-lg">
<Card className="border shadow-lg">
<CardHeader className="space-y-4">
<div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
<div>
Expand Down Expand Up @@ -391,7 +391,7 @@ export function ToolConfigManager({
</Button>
</div>
</div>
<div className="rounded-md border border-amber-200 bg-amber-50 p-3 text-xs text-amber-900">
<div className="rounded-md border border-amber-200 bg-amber-50 p-3 text-xs text-amber-900 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-200">
每个配置选项下方都会展示 JSON Schema 提供的描述信息，若显示「未提供描述」表示该子选项未在
schema 中定义或为自定义子选项。
</div>
Expand Down Expand Up @@ -495,15 +495,12 @@ export function ToolConfigManager({
</DialogHeader>
<div className="max-h-[420px] space-y-3 overflow-y-auto">
{diffEntries.length === 0 && (
<div className="rounded-md border border-slate-200 p-4 text-sm text-muted-foreground">
<div className="rounded-md border p-4 text-sm text-muted-foreground">
没有检测到差异
</div>
)}
{diffEntries.map((diff) => (
<div
key={diff.path + diff.type}
className="rounded-md border border-slate-200 bg-slate-50 p-3 text-xs"
>
<div key={diff.path + diff.type} className="rounded-md border bg-muted p-3 text-xs">
<div className="flex items-center justify-between font-semibold">
<span className="font-mono text-sm">{diff.path}</span>
<Badge variant={diff.type === 'changed' ? 'default' : 'secondary'}>
Expand All @@ -513,13 +510,13 @@ export function ToolConfigManager({
<div className="mt-2 grid gap-2 md:grid-cols-2">
<div>
<p className="text-[11px] text-muted-foreground">之前</p>
<pre className="mt-1 overflow-x-auto rounded-md bg-white p-2">
<pre className="mt-1 overflow-x-auto rounded-md bg-background p-2">
{formatJson(diff.before)}
</pre>
</div>
<div>
<p className="text-[11px] text-muted-foreground">之后</p>
<pre className="mt-1 overflow-x-auto rounded-md bg-white p-2">
<pre className="mt-1 overflow-x-auto rounded-md bg-background p-2">
{formatJson(diff.after)}
</pre>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/config-managers/ClaudeConfigManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ export function ClaudeConfigManager({ refreshSignal }: ClaudeConfigManagerProps)
computeExternalDiffs={computeExtraDiffs}
/>

<Card className="border border-slate-200/80">
<Card className="border">
<CardHeader>
<CardTitle>附属配置：config.json</CardTitle>
<CardDescription>可选文件，存在时将与 settings.json 一同保存。</CardDescription>
Expand Down Expand Up @@ -235,7 +235,7 @@ export function ClaudeConfigManager({ refreshSignal }: ClaudeConfigManagerProps)
{extraEntries.map((entry, idx) => (
<div
key={`${idx}-${entry.key}`}
className="flex flex-col gap-2 rounded-md border border-slate-200/80 p-3 md:flex-row md:items-center"
className="flex flex-col gap-2 rounded-md border p-3 md:flex-row md:items-center"
>
<div className="flex flex-1 items-center gap-2">
<div className="w-40 min-w-[140px]">
Expand Down
2 changes: 1 addition & 1 deletion src/components/config-managers/CodexConfigManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export function CodexConfigManager({ refreshSignal }: CodexConfigManagerProps) {
computeExternalDiffs={computeAuthDiffs}
/>

<Card className="border border-slate-200/80">
<Card className="border">
<CardHeader>
<CardTitle>Codex API Key</CardTitle>
<CardDescription>读取并编辑 auth.json，用于 Codex CLI 请求。</CardDescription>
Expand Down
2 changes: 1 addition & 1 deletion src/components/config-managers/GeminiConfigManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export function GeminiConfigManager({ refreshSignal }: GeminiConfigManagerProps)
computeExternalDiffs={computeEnvDiffs}
/>

<Card className="border border-slate-200/80">
<Card className="border">
<CardHeader>
<CardTitle>Gemini .env</CardTitle>
<CardDescription>读取并编辑 .env，管理 Base URL、API Key 与默认模型。</CardDescription>
Expand Down
6 changes: 3 additions & 3 deletions src/components/tool-config/Fields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -465,7 +465,7 @@ function SortableArrayItem({
<div
ref={setNodeRef}
style={style}
className={`flex items-center gap-3 rounded-md border border-slate-200 bg-white px-3 py-2 ${
className={`flex items-center gap-3 rounded-md border bg-card px-3 py-2 ${
isDragging ? 'opacity-70' : ''
}`}
>
Expand Down Expand Up @@ -579,7 +579,7 @@ function ObjectField({
return (
<div className="space-y-3">
<p className="text-xs text-muted-foreground">{description}</p>
<div className="space-y-4 rounded-md border border-slate-200/80 p-3">
<div className="space-y-4 rounded-md border p-3">
{keys.length === 0 && (
<div className="rounded border border-dashed p-3 text-center text-xs text-muted-foreground">
尚未设置任何子选项
Expand All @@ -592,7 +592,7 @@ function ObjectField({
const childIsCompound = isCompoundField(resolvedChildSchema, objectValue[key]);

return (
<div key={key} className="space-y-2 rounded-md bg-white p-3">
<div key={key} className="space-y-2 rounded-md bg-card p-3">
<div className="flex flex-col gap-3 md:flex-row md:items-center">
<div className="flex items-center gap-2 md:basis-1/2">
<span className="font-mono text-sm font-semibold">{key}</span>
Expand Down