mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-15 12:55:51 +00:00
fix(effort): 面板对齐与配色修复
- 对齐:用 Box width={SEGMENT} + justifyContent="center" 让 ▲ 与档位名严格居中对齐,
替代之前 string padEnd(11) 与 SEGMENT=12 不一致导致的 1 列偏移
- 配色:所有面板文字改用 theme.claude(Claude Orange rgb(215,119,87)),
替代终端默认紫;分隔线/副标签/底栏用 theme.subtle;env 警告用 theme.warning
- 光标档位的档位名也加粗,强化视觉焦点
Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>
This commit is contained in:
@@ -15,8 +15,9 @@ import { executeEffort } from '../../commands/effort/effort.js';
|
||||
import { useMainLoopModel } from '../../hooks/useMainLoopModel.js';
|
||||
import { useSetAppState } from '../../state/AppState.js';
|
||||
|
||||
// 终端 ≥ 80 cols 时使用;窄屏适配第二阶段处理
|
||||
const PANEL_WIDTH = 76;
|
||||
// 每档固定宽度,Ink Box 自动对齐。PANEL_WIDTH = SEGMENT * 6。
|
||||
const SEGMENT = 12;
|
||||
const PANEL_WIDTH = SEGMENT * PANEL_POSITIONS.length;
|
||||
const SUBLABEL_ULTRACODE = 'xhigh + workflows';
|
||||
|
||||
type Props = {
|
||||
@@ -24,19 +25,6 @@ type Props = {
|
||||
onDone: (message: string) => void;
|
||||
};
|
||||
|
||||
// ▲ 落在每档中心列:均匀分布
|
||||
function cursorColumn(cursor: PanelPosition): number {
|
||||
const segment = Math.floor(PANEL_WIDTH / PANEL_POSITIONS.length);
|
||||
const idx = PANEL_POSITIONS.indexOf(cursor);
|
||||
return segment * idx + Math.floor(segment / 2);
|
||||
}
|
||||
|
||||
function renderPaddedLine(cursor: PanelPosition): string {
|
||||
const col = cursorColumn(cursor);
|
||||
// ▲ 上方的"分隔线 + 光标"行:左侧 ─,到列处 ▲,右侧继续 ─
|
||||
return `${'─'.repeat(col)}▲${'─'.repeat(Math.max(0, PANEL_WIDTH - col - 1))}`;
|
||||
}
|
||||
|
||||
export function EffortPanel({ appStateEffort, onDone }: Props): React.ReactNode {
|
||||
const setAppState = useSetAppState();
|
||||
const model = useMainLoopModel();
|
||||
@@ -82,28 +70,47 @@ export function EffortPanel({ appStateEffort, onDone }: Props): React.ReactNode
|
||||
const envActive = envOverride !== null && envOverride !== undefined;
|
||||
const envRaw = process.env.CLAUDE_CODE_EFFORT_LEVEL;
|
||||
|
||||
// 两极文字行:左 Faster + 中间空格 + 右 Smarter
|
||||
const fasterLen = 'Faster'.length;
|
||||
const smarterLen = 'Smarter'.length;
|
||||
const gap = Math.max(0, PANEL_WIDTH - fasterLen - smarterLen);
|
||||
const poleLine = `Faster${' '.repeat(gap)}Smarter`;
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" paddingX={1}>
|
||||
<Text bold>Effort</Text>
|
||||
{envActive && <Text color="ansi:yellow">{`⚠ CLAUDE_CODE_EFFORT_LEVEL=${envRaw} overrides this session`}</Text>}
|
||||
<Box marginTop={1}>
|
||||
<Text>{poleLine}</Text>
|
||||
</Box>
|
||||
<Text>{renderPaddedLine(cursor)}</Text>
|
||||
<Text>
|
||||
{PANEL_POSITIONS.map(p => (p as string).padEnd(11))
|
||||
.join('')
|
||||
.trimEnd()}
|
||||
<Box flexDirection="column" paddingX={1} width={PANEL_WIDTH + 2}>
|
||||
<Text bold color="claude">
|
||||
Effort
|
||||
</Text>
|
||||
<Text dimColor>{`${' '.repeat(Math.max(0, PANEL_WIDTH - SUBLABEL_ULTRACODE.length))}${SUBLABEL_ULTRACODE}`}</Text>
|
||||
{envActive && <Text color="warning">{`⚠ CLAUDE_CODE_EFFORT_LEVEL=${envRaw} overrides this session`}</Text>}
|
||||
<Box marginTop={1} flexDirection="row" justifyContent="space-between">
|
||||
<Text color="claude">Faster</Text>
|
||||
<Text color="claude">Smarter</Text>
|
||||
</Box>
|
||||
{/* 分隔线 */}
|
||||
<Text color="subtle">{'─'.repeat(PANEL_WIDTH)}</Text>
|
||||
{/* ▲ 行:每段独立居中,与下方档位文字严格对齐 */}
|
||||
<Box flexDirection="row">
|
||||
{PANEL_POSITIONS.map(p => (
|
||||
<Box key={`cursor-${p}`} width={SEGMENT} justifyContent="center">
|
||||
<Text bold color="claude">
|
||||
{cursor === p ? '▲' : ' '}
|
||||
</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
{/* 档位名 */}
|
||||
<Box flexDirection="row">
|
||||
{PANEL_POSITIONS.map(p => (
|
||||
<Box key={`label-${p}`} width={SEGMENT} justifyContent="center">
|
||||
<Text bold={cursor === p} color="claude">
|
||||
{p}
|
||||
</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
{/* ultracode 副标签:右对齐到最末段 */}
|
||||
<Box flexDirection="row">
|
||||
<Box width={SEGMENT * (PANEL_POSITIONS.length - 1)} />
|
||||
<Box width={SEGMENT} justifyContent="center">
|
||||
<Text color="subtle">{SUBLABEL_ULTRACODE}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box marginTop={1}>
|
||||
<Text dimColor>←/→ adjust · Enter confirm · Esc cancel</Text>
|
||||
<Text color="subtle">←/→ adjust · Enter confirm · Esc cancel</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user