Skip to content

Commit 46af069

Browse files
MarkShawn2020claude
andcommitted
fix(PanelGrid): 优化 slash command 菜单交互
- 菜单替换 Start 按钮区域而非绝对定位浮动 - Terminal 模式下显示不支持提示 - 切换 terminal 类型时菜单内容实时响应 - 修复布局 shift 问题 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 6162b02 commit 46af069

1 file changed

Lines changed: 30 additions & 22 deletions

File tree

src/components/PanelGrid/PanelGrid.tsx

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,11 @@ export function PanelGrid({
337337
onClick={() => {
338338
setSelectedTerminalType(opt);
339339
localStorage.setItem("lovcode:terminalType", opt.type);
340+
// Update menu state based on input
341+
if (inputCommand.startsWith("/")) {
342+
setShowSlashMenu(true);
343+
setSlashSelectedIndex(0);
344+
}
340345
}}
341346
>
342347
<span className={opt.type === selectedTerminalType.type ? "font-medium" : ""}>
@@ -358,17 +363,14 @@ export function PanelGrid({
358363
const value = e.target.value;
359364
setInputCommand(value);
360365

361-
// Only show command menu in claude/codex mode (both use / trigger)
362-
if (selectedTerminalType.type === "claude" || selectedTerminalType.type === "codex") {
363-
// Check if we're typing a command at the start of input
364-
if (value.startsWith("/")) {
365-
const filter = value.slice(1); // Remove leading /
366-
setSlashFilter(filter);
367-
setSlashSelectedIndex(0); // Reset selection on filter change
368-
setShowSlashMenu(true);
369-
} else {
370-
setShowSlashMenu(false);
371-
}
366+
// Show command menu when typing / (all modes, but terminal shows hint)
367+
if (value.startsWith("/")) {
368+
const filter = value.slice(1); // Remove leading /
369+
setSlashFilter(filter);
370+
setSlashSelectedIndex(0); // Reset selection on filter change
371+
setShowSlashMenu(true);
372+
} else {
373+
setShowSlashMenu(false);
372374
}
373375
}}
374376
placeholder={
@@ -429,18 +431,24 @@ export function PanelGrid({
429431
}
430432
}}
431433
/>
432-
{/* Bottom area: commands or start button */}
434+
{/* Bottom area: command menu or start button */}
433435
{showSlashMenu ? (
434-
<SlashCommandMenu
435-
commands={commandItems}
436-
filter={slashFilter}
437-
selectedIndex={slashSelectedIndex}
438-
onSelect={(cmd) => {
439-
setInputCommand(cmd.name + " ");
440-
setShowSlashMenu(false);
441-
textareaRef.current?.focus();
442-
}}
443-
/>
436+
selectedTerminalType.type === "terminal" ? (
437+
<div className="px-3 py-2.5 border-t border-border bg-muted/30 text-sm text-muted-foreground">
438+
Slash commands not supported in Terminal. Switch to Claude Code or Codex.
439+
</div>
440+
) : (
441+
<SlashCommandMenu
442+
commands={commandItems}
443+
filter={slashFilter}
444+
selectedIndex={slashSelectedIndex}
445+
onSelect={(cmd) => {
446+
setInputCommand(cmd.name + " ");
447+
setShowSlashMenu(false);
448+
textareaRef.current?.focus();
449+
}}
450+
/>
451+
)
444452
) : (
445453
<div className="flex items-center justify-end px-3 py-2.5 border-t border-border bg-muted/30">
446454
<button

0 commit comments

Comments
 (0)