feat: 更新 WelcomeV2 样式对齐和 ThemePicker 提示
This commit is contained in:
y574444354
parent
c7bfe22c22
commit
78505312f4
|
|
@ -4,6 +4,10 @@ import { env } from '../../utils/env.js';
|
|||
|
||||
const WELCOME_V2_WIDTH = 58;
|
||||
|
||||
const COSTRICT_ART_LINE1 = '█▀▀ █▀█ █▀ ▀█▀ █▀█ █ █▀▀ ▀█▀';
|
||||
const COSTRICT_ART_LINE2 = '█▄▄ █▄█ ▄█ █ █▀▄ █ █▄▄ █ ';
|
||||
const DIVIDER_PREFIX = '…………'; // 4个…，每个占2列，共8列
|
||||
|
||||
export function WelcomeV2(): React.ReactNode {
|
||||
const [theme] = useTheme();
|
||||
const welcomeMessage = 'Welcome to CoStrict';
|
||||
|
|
@ -14,102 +18,70 @@ export function WelcomeV2(): React.ReactNode {
|
|||
|
||||
if (['light', 'light-daltonized', 'light-ansi'].includes(theme)) {
|
||||
return (
|
||||
<Box width={WELCOME_V2_WIDTH}>
|
||||
<Box width={WELCOME_V2_WIDTH} flexDirection="column">
|
||||
<Text>
|
||||
<Text>
|
||||
<Text color="claude">{welcomeMessage} </Text>
|
||||
<Text dimColor>v{MACRO.VERSION} </Text>
|
||||
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">{welcomeMessage} </Text>
|
||||
<Text dimColor>v{MACRO.VERSION} </Text>
|
||||
</Text>
|
||||
<Text>{'…………………………………………………………………………………………………………………………………………………………'}</Text>
|
||||
<Text>{' ░░░░░░ '}</Text>
|
||||
<Text>{' ░░░ ░░░░░░░░░░ '}</Text>
|
||||
<Text>{' ░░░░░░░░░░░░░░░░░░░ '}</Text>
|
||||
<Text> </Text>
|
||||
<Text>
|
||||
{'…………'}
|
||||
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">
|
||||
{' '}
|
||||
{COSTRICT_ART_LINE1}
|
||||
</Text>
|
||||
<Text>{'…………………………………………………………………………………………………………………………………………………………'}</Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text>{' ░░░░░░ '}</Text>
|
||||
<Text>{' ░░░ ░░░░░░░░░░ '}</Text>
|
||||
<Text>{' ░░░░░░░░░░░░░░░░░░░ '}</Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text>
|
||||
<Text dimColor>{' ░░░░'}</Text>
|
||||
<Text>{' ██ '}</Text>
|
||||
</Text>
|
||||
<Text>
|
||||
<Text dimColor>{' ░░░░░░░░░░'}</Text>
|
||||
<Text>{' ██▒▒██ '}</Text>
|
||||
</Text>
|
||||
<Text>{' ▒▒ ██ ▒'}</Text>
|
||||
<Text>
|
||||
{' '}
|
||||
<Text color="clawd_body"> █████████ </Text>
|
||||
{' ▒▒░░▒▒ ▒ ▒▒'}
|
||||
</Text>
|
||||
<Text>
|
||||
{' '}
|
||||
<Text color="clawd_body" backgroundColor="clawd_background">
|
||||
██▄█████▄██
|
||||
</Text>
|
||||
{' ▒▒ ▒▒ '}
|
||||
</Text>
|
||||
<Text>
|
||||
{' '}
|
||||
<Text color="clawd_body"> █████████ </Text>
|
||||
{' ░ ▒ '}
|
||||
</Text>
|
||||
<Text>
|
||||
{'…………………'}
|
||||
<Text color="clawd_body">{'█ █ █ █'}</Text>
|
||||
{'……………………………………………………………………░…………………………▒…………'}
|
||||
</Text>
|
||||
<Text>
|
||||
{'…………'}
|
||||
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">
|
||||
{' '}
|
||||
{COSTRICT_ART_LINE2}
|
||||
</Text>
|
||||
{'…………………………………………'}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box width={WELCOME_V2_WIDTH}>
|
||||
<Box width={WELCOME_V2_WIDTH} flexDirection="column">
|
||||
<Text>
|
||||
<Text>
|
||||
<Text color="claude">{welcomeMessage} </Text>
|
||||
<Text dimColor>v{MACRO.VERSION} </Text>
|
||||
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">{welcomeMessage} </Text>
|
||||
<Text dimColor>v{MACRO.VERSION} </Text>
|
||||
</Text>
|
||||
<Text>{'…………………………………………………………………………………………………………………………………………………………'}</Text>
|
||||
<Text>{' * █████▓▓░ '}</Text>
|
||||
<Text>{' * ███▓░ ░░ '}</Text>
|
||||
<Text>{' ░░░░░░ ███▓░ '}</Text>
|
||||
<Text>{' ░░░ ░░░░░░░░░░ ███▓░ '}</Text>
|
||||
<Text>
|
||||
<Text>{' ░░░░░░░░░░░░░░░░░░░ '}</Text>
|
||||
<Text bold>*</Text>
|
||||
<Text>{' ██▓░░ ▓ '}</Text>
|
||||
</Text>
|
||||
<Text>{' ░▓▓███▓▓░ '}</Text>
|
||||
<Text dimColor>{' * ░░░░ '}</Text>
|
||||
<Text dimColor>{' ░░░░░░░░ '}</Text>
|
||||
<Text dimColor>{' * ░░░░░░░░░░░░░░░░ '}</Text>
|
||||
<Text dimColor>{' * '}</Text>
|
||||
<Text>
|
||||
{' '}
|
||||
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">
|
||||
{' '}
|
||||
{COSTRICT_ART_LINE1}
|
||||
</Text>
|
||||
<Text>{'…………………………………………………………………………………………………………………………………………………………'}</Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text>{' * █████▓▓░ '}</Text>
|
||||
<Text>{' * ███▓░ ░░ '}</Text>
|
||||
<Text>{' ░░░░░░ ███▓░ '}</Text>
|
||||
<Text>{' ░░░ ░░░░░░░░░░ ███▓░ '}</Text>
|
||||
<Text>
|
||||
<Text>{' ░░░░░░░░░░░░░░░░░░░ '}</Text>
|
||||
<Text bold>*</Text>
|
||||
<Text>{' ██▓░░ ▓ '}</Text>
|
||||
</Text>
|
||||
<Text>{' ░▓▓███▓▓░ '}</Text>
|
||||
<Text dimColor>{' * ░░░░ '}</Text>
|
||||
<Text dimColor>{' ░░░░░░░░ '}</Text>
|
||||
<Text dimColor>{' ░░░░░░░░░░░░░░░░ '}</Text>
|
||||
<Text>
|
||||
{' '}
|
||||
<Text color="clawd_body"> █████████ </Text>
|
||||
{' '}
|
||||
<Text dimColor>*</Text>
|
||||
<Text> </Text>
|
||||
</Text>
|
||||
<Text>
|
||||
{' '}
|
||||
<Text color="clawd_body">██▄█████▄██</Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text bold>*</Text>
|
||||
<Text>{' '}</Text>
|
||||
</Text>
|
||||
<Text>
|
||||
{' '}
|
||||
<Text color="clawd_body"> █████████ </Text>
|
||||
{' * '}
|
||||
</Text>
|
||||
<Text>
|
||||
{'…………………'}
|
||||
<Text color="clawd_body">{'█ █ █ █'}</Text>
|
||||
{'………………………………………………………………………………………………………………'}
|
||||
</Text>
|
||||
<Text>
|
||||
{'…………'}
|
||||
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">
|
||||
{' '}
|
||||
{COSTRICT_ART_LINE2}
|
||||
</Text>
|
||||
{'………………………………………………………………'}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
|
|
@ -125,116 +97,69 @@ function AppleTerminalWelcomeV2({ theme, welcomeMessage }: AppleTerminalWelcomeV
|
|||
|
||||
if (isLightTheme) {
|
||||
return (
|
||||
<Box width={WELCOME_V2_WIDTH}>
|
||||
<Box width={WELCOME_V2_WIDTH} flexDirection="column">
|
||||
<Text>
|
||||
<Text>
|
||||
<Text color="claude">{welcomeMessage} </Text>
|
||||
<Text dimColor>v{MACRO.VERSION} </Text>
|
||||
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">{welcomeMessage} </Text>
|
||||
<Text dimColor>v{MACRO.VERSION} </Text>
|
||||
</Text>
|
||||
<Text>{'…………………………………………………………………………………………………………………………………………………………'}</Text>
|
||||
<Text>{' ░░░░░░ '}</Text>
|
||||
<Text>{' ░░░ ░░░░░░░░░░ '}</Text>
|
||||
<Text>{' ░░░░░░░░░░░░░░░░░░░ '}</Text>
|
||||
<Text> </Text>
|
||||
<Text>
|
||||
{'…………'}
|
||||
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">
|
||||
{' '}
|
||||
{COSTRICT_ART_LINE1}
|
||||
</Text>
|
||||
<Text>{'…………………………………………………………………………………………………………………………………………………………'}</Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text>{' ░░░░░░ '}</Text>
|
||||
<Text>{' ░░░ ░░░░░░░░░░ '}</Text>
|
||||
<Text>{' ░░░░░░░░░░░░░░░░░░░ '}</Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text>
|
||||
<Text dimColor>{' ░░░░'}</Text>
|
||||
<Text>{' ██ '}</Text>
|
||||
</Text>
|
||||
<Text>
|
||||
<Text dimColor>{' ░░░░░░░░░░'}</Text>
|
||||
<Text>{' ██▒▒██ '}</Text>
|
||||
</Text>
|
||||
<Text>{' ▒▒ ██ ▒'}</Text>
|
||||
<Text>{' ▒▒░░▒▒ ▒ ▒▒'}</Text>
|
||||
<Text>
|
||||
{' '}
|
||||
<Text color="clawd_body">▗</Text>
|
||||
<Text color="clawd_background" backgroundColor="clawd_body">
|
||||
{' '}
|
||||
▗{' '}▖{' '}
|
||||
</Text>
|
||||
<Text color="clawd_body">▖</Text>
|
||||
{' ▒▒ ▒▒ '}
|
||||
</Text>
|
||||
<Text>
|
||||
{' '}
|
||||
<Text backgroundColor="clawd_body">{' '.repeat(9)}</Text>
|
||||
{' ░ ▒ '}
|
||||
</Text>
|
||||
<Text>
|
||||
{'…………………'}
|
||||
<Text backgroundColor="clawd_body"> </Text>
|
||||
<Text> </Text>
|
||||
<Text backgroundColor="clawd_body"> </Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text backgroundColor="clawd_body"> </Text>
|
||||
<Text> </Text>
|
||||
<Text backgroundColor="clawd_body"> </Text>
|
||||
{'……………………………………………………………………░…………………………▒…………'}
|
||||
</Text>
|
||||
<Text>
|
||||
{'…………'}
|
||||
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">
|
||||
{' '}
|
||||
{COSTRICT_ART_LINE2}
|
||||
</Text>
|
||||
{'…………………………………………'}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box width={WELCOME_V2_WIDTH}>
|
||||
<Box width={WELCOME_V2_WIDTH} flexDirection="column">
|
||||
<Text>
|
||||
<Text>
|
||||
<Text color="claude">{welcomeMessage} </Text>
|
||||
<Text dimColor>v{MACRO.VERSION} </Text>
|
||||
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">{welcomeMessage} </Text>
|
||||
<Text dimColor>v{MACRO.VERSION} </Text>
|
||||
</Text>
|
||||
<Text>{'…………………………………………………………………………………………………………………………………………………………'}</Text>
|
||||
<Text>{' * █████▓▓░ '}</Text>
|
||||
<Text>{' * ███▓░ ░░ '}</Text>
|
||||
<Text>{' ░░░░░░ ███▓░ '}</Text>
|
||||
<Text>{' ░░░ ░░░░░░░░░░ ███▓░ '}</Text>
|
||||
<Text>
|
||||
<Text>{' ░░░░░░░░░░░░░░░░░░░ '}</Text>
|
||||
<Text bold>*</Text>
|
||||
<Text>{' ██▓░░ ▓ '}</Text>
|
||||
</Text>
|
||||
<Text>{' ░▓▓███▓▓░ '}</Text>
|
||||
<Text dimColor>{' * ░░░░ '}</Text>
|
||||
<Text dimColor>{' ░░░░░░░░ '}</Text>
|
||||
<Text dimColor>{' ░░░░░░░░░░░░░░░░ '}</Text>
|
||||
<Text>
|
||||
{'…………'}
|
||||
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">
|
||||
{' '}
|
||||
{COSTRICT_ART_LINE1}
|
||||
</Text>
|
||||
<Text>{'…………………………………………………………………………………………………………………………………………………………'}</Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text>{' * █████▓▓░ '}</Text>
|
||||
<Text>{' * ███▓░ ░░ '}</Text>
|
||||
<Text>{' ░░░░░░ ███▓░ '}</Text>
|
||||
<Text>{' ░░░ ░░░░░░░░░░ ███▓░ '}</Text>
|
||||
<Text>
|
||||
<Text>{' ░░░░░░░░░░░░░░░░░░░ '}</Text>
|
||||
<Text bold>*</Text>
|
||||
<Text>{' ██▓░░ ▓ '}</Text>
|
||||
</Text>
|
||||
<Text>{' ░▓▓███▓▓░ '}</Text>
|
||||
<Text dimColor>{' * ░░░░ '}</Text>
|
||||
<Text dimColor>{' ░░░░░░░░ '}</Text>
|
||||
<Text dimColor>{' ░░░░░░░░░░░░░░░░ '}</Text>
|
||||
<Text>
|
||||
{' '}
|
||||
<Text dimColor>*</Text>
|
||||
<Text> </Text>
|
||||
</Text>
|
||||
<Text>
|
||||
{' '}
|
||||
<Text color="clawd_body">▗</Text>
|
||||
<Text color="clawd_background" backgroundColor="clawd_body">
|
||||
{' '}
|
||||
▗{' '}▖{' '}
|
||||
</Text>
|
||||
<Text color="clawd_body">▖</Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text bold>*</Text>
|
||||
<Text>{' '}</Text>
|
||||
</Text>
|
||||
<Text>
|
||||
{' '}
|
||||
<Text backgroundColor="clawd_body">{' '.repeat(9)}</Text>
|
||||
{' * '}
|
||||
</Text>
|
||||
<Text>
|
||||
{'…………………'}
|
||||
<Text backgroundColor="clawd_body"> </Text>
|
||||
<Text> </Text>
|
||||
<Text backgroundColor="clawd_body"> </Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text backgroundColor="clawd_body"> </Text>
|
||||
<Text> </Text>
|
||||
<Text backgroundColor="clawd_body"> </Text>
|
||||
{'………………………………………………………………………………………………………………'}
|
||||
</Text>
|
||||
<Text>
|
||||
{'…………'}
|
||||
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">
|
||||
{' '}
|
||||
{COSTRICT_ART_LINE2}
|
||||
</Text>
|
||||
{'…………………………………………'}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ export function ThemePicker({
|
|||
lines: [
|
||||
' function greet() {',
|
||||
'- console.log("Hello, World!");',
|
||||
'+ console.log("Hello, Claude!");',
|
||||
'+ console.log("Hello, CoStrict!");',
|
||||
' }',
|
||||
],
|
||||
}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user