vrr/qwen-code
2
0
Fork 0
mirror of https://github.com/QwenLM/qwen-code.git synced 2026-05-05 23:42:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 11

feat: Redesign CLI welcome screen and improve visual consistency

Browse source
This commit is contained in:
tanzhenxin 2026-01-16 11:48:31 +08:00
parent ff5ea3c6d7
commit b804b1f48a
81 changed files with 1474 additions and 1342 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/cli/src/ui/utils/MarkdownDisplay.test.tsx
View file

@ -12,7 +12,7 @@ import { renderWithProviders } from '../../test-utils/render.js';
describe('<MarkdownDisplay />', () => {
const baseProps = {
isPending: false,
terminalWidth: 80,
contentWidth: 80,
availableTerminalHeight: 40,
};

28
packages/cli/src/ui/utils/MarkdownDisplay.tsx
View file

@ -16,7 +16,7 @@ interface MarkdownDisplayProps {
text: string;
isPending: boolean;
availableTerminalHeight?: number;
terminalWidth: number;
contentWidth: number;
textColor?: string;
}
@ -31,7 +31,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
text,
isPending,
availableTerminalHeight,
terminalWidth,
contentWidth,
textColor = theme.text.primary,
}) => {
if (!text) return <></>;
@ -79,7 +79,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
lang={codeBlockLang}
isPending={isPending}
availableTerminalHeight={availableTerminalHeight}
terminalWidth={terminalWidth}
contentWidth={contentWidth}
/>,
);
inCodeBlock = false;
@ -144,7 +144,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
key={`table-${contentBlocks.length}`}
headers={tableHeaders}
rows={tableRows}
terminalWidth={terminalWidth}
contentWidth={contentWidth}
/>,
);
}
@ -266,7 +266,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
lang={codeBlockLang}
isPending={isPending}
availableTerminalHeight={availableTerminalHeight}
terminalWidth={terminalWidth}
contentWidth={contentWidth}
/>,
);
}
@ -278,7 +278,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
key={`table-${contentBlocks.length}`}
headers={tableHeaders}
rows={tableRows}
terminalWidth={terminalWidth}
contentWidth={contentWidth}
/>,
);
}
@ -293,7 +293,7 @@ interface RenderCodeBlockProps {
lang: string | null;
isPending: boolean;
availableTerminalHeight?: number;
terminalWidth: number;
contentWidth: number;
}
const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
@ -301,7 +301,7 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
lang,
isPending,
availableTerminalHeight,
terminalWidth,
contentWidth,
}) => {
const settings = useSettings();
const MIN_LINES_FOR_MESSAGE = 1; // Minimum lines to show before the "generating more" message
@ -329,7 +329,7 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
truncatedContent.join('\n'),
lang,
availableTerminalHeight,
terminalWidth - CODE_BLOCK_PREFIX_PADDING,
contentWidth - CODE_BLOCK_PREFIX_PADDING,
undefined,
settings,
);
@ -347,7 +347,7 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
fullContent,
lang,
availableTerminalHeight,
terminalWidth - CODE_BLOCK_PREFIX_PADDING,
contentWidth - CODE_BLOCK_PREFIX_PADDING,
undefined,
settings,
);
@ -356,7 +356,7 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
<Box
paddingLeft={CODE_BLOCK_PREFIX_PADDING}
flexDirection="column"
width={terminalWidth}
width={contentWidth}
flexShrink={0}
>
{colorizedCode}
@ -407,15 +407,15 @@ const RenderListItem = React.memo(RenderListItemInternal);
interface RenderTableProps {
headers: string[];
rows: string[][];
terminalWidth: number;
contentWidth: number;
}
const RenderTableInternal: React.FC<RenderTableProps> = ({
headers,
rows,
terminalWidth,
contentWidth,
}) => (
<TableRenderer headers={headers} rows={rows} terminalWidth={terminalWidth} />
<TableRenderer headers={headers} rows={rows} contentWidth={contentWidth} />
);
const RenderTable = React.memo(RenderTableInternal);

7
packages/cli/src/ui/utils/TableRenderer.tsx
View file

@ -12,7 +12,7 @@ import { RenderInline, getPlainTextLength } from './InlineMarkdownRenderer.js';
interface TableRendererProps {
headers: string[];
rows: string[][];
terminalWidth: number;
contentWidth: number;
}
/**
@ -22,7 +22,7 @@ interface TableRendererProps {
export const TableRenderer: React.FC<TableRendererProps> = ({
headers,
rows,
terminalWidth,
contentWidth,
}) => {
// Calculate column widths using actual display width after markdown processing
const columnWidths = headers.map((header, index) => {
@ -35,8 +35,7 @@ export const TableRenderer: React.FC<TableRendererProps> = ({
// Ensure table fits within terminal width
const totalWidth = columnWidths.reduce((sum, width) => sum + width + 1, 1);
const scaleFactor =
totalWidth > terminalWidth ? terminalWidth / totalWidth : 1;
const scaleFactor = totalWidth > contentWidth ? contentWidth / totalWidth : 1;
const adjustedWidths = columnWidths.map((width) =>
Math.floor(width * scaleFactor),
);