Skip to content

Commit 5d16571

Browse files
sdcbsdcb
committed
Extract env variable management as a individual tab in session manage window
1 parent 3867f45 commit 5d16571

3 files changed

Lines changed: 61 additions & 60 deletions

File tree

‎src/FE/components/ChatSessionManager/ChatSessionManagerWindow.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
IconBolt,
1818
IconFolder,
1919
IconEdit,
20+
IconSettings,
2021
} from '@/components/Icons';
2122

2223
import {
@@ -45,10 +46,11 @@ import SessionCommandRunner from './SessionCommandRunner';
4546
import SessionFileManager, { FileManagerHandle } from './SessionFileManager';
4647
import SessionFileEditor from './SessionFileEditor';
4748
import SessionInfoCard from './SessionInfoCard';
49+
import SessionEnvVarEditor from './SessionEnvVarEditor';
4850
import { cn } from '@/lib/utils';
4951

5052
type Mode = 'view' | 'create';
51-
type TabType = 'info' | 'command' | 'files' | 'editor';
53+
type TabType = 'info' | 'env' | 'command' | 'files' | 'editor';
5254

5355
type Props = {
5456
chatId: string;
@@ -196,6 +198,7 @@ export default function ChatSessionManagerWindow({
196198

197199
const tabs = useMemo(() => [
198200
{ id: 'info' as TabType, label: t('Basic Info'), icon: <IconInfo size={18} />, disabled: false },
201+
{ id: 'env' as TabType, label: t('Environment Variables'), icon: <IconSettings size={18} />, disabled: false },
199202
{ id: 'command' as TabType, label: t('Run command'), icon: <IconBolt size={18} />, disabled: false },
200203
{ id: 'files' as TabType, label: t('File manager'), icon: <IconFolder size={18} />, disabled: false },
201204
{ id: 'editor' as TabType, label: t('File editor'), icon: <IconEdit size={18} />, disabled: !isEditorTabEnabled },
@@ -333,7 +336,20 @@ export default function ChatSessionManagerWindow({
333336
activeTab === 'info' ? 'visible' : 'invisible pointer-events-none',
334337
)}
335338
>
336-
<SessionInfoCard chatId={chatId} session={selectedSession} />
339+
<SessionInfoCard session={selectedSession} />
340+
</div>
341+
342+
{/* Environment variables tab */}
343+
<div
344+
className={cn(
345+
'h-full overflow-auto p-3 absolute inset-0',
346+
activeTab === 'env' ? 'visible' : 'invisible pointer-events-none',
347+
)}
348+
>
349+
<SessionEnvVarEditor
350+
chatId={chatId}
351+
encryptedSessionId={selectedSession.encryptedSessionId}
352+
/>
337353
</div>
338354

339355
{/* Command tab - 保持挂载以保留状态 */}

‎src/FE/components/ChatSessionManager/SessionEnvVarEditor.tsx‎

Lines changed: 42 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -133,53 +133,7 @@ export default function SessionEnvVarEditor({
133133

134134
return (
135135
<div className="space-y-4">
136-
{/* Header */}
137-
<h3 className="text-sm font-medium text-muted-foreground">
138-
{t('Environment Variables')}
139-
</h3>
140-
141-
{/* System variables */}
142-
{systemVars.length > 0 && (
143-
<div className="space-y-2">
144-
<h4 className="text-xs font-medium text-muted-foreground/70 uppercase tracking-wide">
145-
{t('System Variables')}
146-
</h4>
147-
<div className="rounded-md border overflow-hidden">
148-
<table className="w-full text-sm">
149-
<thead>
150-
<tr className="bg-muted/50 border-b">
151-
<th className="text-left px-3 py-2 font-medium w-1/3">
152-
{t('Key')}
153-
</th>
154-
<th className="text-left px-3 py-2 font-medium">
155-
{t('Value')}
156-
</th>
157-
</tr>
158-
</thead>
159-
<tbody>
160-
{systemVars.map((v, idx) => (
161-
<tr
162-
key={`sys-${idx}`}
163-
className={cn(
164-
'border-b last:border-b-0',
165-
idx % 2 === 0 ? 'bg-background' : 'bg-muted/20',
166-
)}
167-
>
168-
<td className="px-3 py-2 font-mono text-xs break-all">
169-
{v.key}
170-
</td>
171-
<td className="px-3 py-2 font-mono text-xs break-all text-muted-foreground">
172-
{v.value}
173-
</td>
174-
</tr>
175-
))}
176-
</tbody>
177-
</table>
178-
</div>
179-
</div>
180-
)}
181-
182-
{/* User variables */}
136+
{/* User variables - 放在上面 */}
183137
<div className="space-y-2">
184138
<div className="flex items-center justify-between">
185139
<div className="flex items-center gap-2">
@@ -285,6 +239,47 @@ export default function SessionEnvVarEditor({
285239
</div>
286240
)}
287241
</div>
242+
243+
{/* System variables - 放在下面 */}
244+
{systemVars.length > 0 && (
245+
<div className="space-y-2">
246+
<h4 className="text-xs font-medium text-muted-foreground/70 uppercase tracking-wide">
247+
{t('System Variables')}
248+
</h4>
249+
<div className="rounded-md border overflow-hidden">
250+
<table className="w-full text-sm">
251+
<thead>
252+
<tr className="bg-muted/50 border-b">
253+
<th className="text-left px-3 py-2 font-medium w-1/3">
254+
{t('Key')}
255+
</th>
256+
<th className="text-left px-3 py-2 font-medium">
257+
{t('Value')}
258+
</th>
259+
</tr>
260+
</thead>
261+
<tbody>
262+
{systemVars.map((v, idx) => (
263+
<tr
264+
key={`sys-${idx}`}
265+
className={cn(
266+
'border-b last:border-b-0',
267+
idx % 2 === 0 ? 'bg-background' : 'bg-muted/20',
268+
)}
269+
>
270+
<td className="px-3 py-2 font-mono text-xs break-all">
271+
{v.key}
272+
</td>
273+
<td className="px-3 py-2 font-mono text-xs break-all text-muted-foreground">
274+
{v.value}
275+
</td>
276+
</tr>
277+
))}
278+
</tbody>
279+
</table>
280+
</div>
281+
</div>
282+
)}
288283
</div>
289284
);
290285
}

‎src/FE/components/ChatSessionManager/SessionInfoCard.tsx‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,8 @@ import {
1010
TooltipTrigger,
1111
} from '@/components/ui/tooltip';
1212
import { cn } from '@/lib/utils';
13-
import SessionEnvVarEditor from './SessionEnvVarEditor';
1413

1514
type Props = {
16-
chatId: string;
1715
session: DockerSessionDto;
1816
};
1917

@@ -35,7 +33,7 @@ const cardColors = [
3533
'bg-pink-500/10 border-pink-500/30 text-pink-600 dark:text-pink-400',
3634
];
3735

38-
export default function SessionInfoCard({ chatId, session }: Props) {
36+
export default function SessionInfoCard({ session }: Props) {
3937
const { t } = useTranslation();
4038
const [copied, setCopied] = useState(false);
4139

@@ -138,14 +136,6 @@ export default function SessionInfoCard({ chatId, session }: Props) {
138136
</div>
139137
))}
140138
</div>
141-
142-
{/* 环境变量管理 */}
143-
<div className="mt-6">
144-
<SessionEnvVarEditor
145-
chatId={chatId}
146-
encryptedSessionId={session.encryptedSessionId}
147-
/>
148-
</div>
149139
</div>
150140
);
151141
}

0 commit comments

Comments
 (0)