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 WELCOME_V2_WIDTH = 58;
|
||||||
|
|
||||||
|
const COSTRICT_ART_LINE1 = '█▀▀ █▀█ █▀ ▀█▀ █▀█ █ █▀▀ ▀█▀';
|
||||||
|
const COSTRICT_ART_LINE2 = '█▄▄ █▄█ ▄█ █ █▀▄ █ █▄▄ █ ';
|
||||||
|
const DIVIDER_PREFIX = '…………'; // 4个…，每个占2列，共8列
|
||||||
|
|
||||||
export function WelcomeV2(): React.ReactNode {
|
export function WelcomeV2(): React.ReactNode {
|
||||||
const [theme] = useTheme();
|
const [theme] = useTheme();
|
||||||
const welcomeMessage = 'Welcome to CoStrict';
|
const welcomeMessage = 'Welcome to CoStrict';
|
||||||
|
|
@ -14,102 +18,70 @@ export function WelcomeV2(): React.ReactNode {
|
||||||
|
|
||||||
if (['light', 'light-daltonized', 'light-ansi'].includes(theme)) {
|
if (['light', 'light-daltonized', 'light-ansi'].includes(theme)) {
|
||||||
return (
|
return (
|
||||||
<Box width={WELCOME_V2_WIDTH}>
|
<Box width={WELCOME_V2_WIDTH} flexDirection="column">
|
||||||
<Text>
|
<Text>
|
||||||
<Text>
|
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">{welcomeMessage} </Text>
|
||||||
<Text color="claude">{welcomeMessage} </Text>
|
<Text dimColor>v{MACRO.VERSION} </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 color="claudeBlue_FOR_SYSTEM_SPINNER">
|
||||||
<Text>{' ░░░░░░ '}</Text>
|
{' '}
|
||||||
<Text>{' ░░░ ░░░░░░░░░░ '}</Text>
|
{COSTRICT_ART_LINE2}
|
||||||
<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>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box width={WELCOME_V2_WIDTH}>
|
<Box width={WELCOME_V2_WIDTH} flexDirection="column">
|
||||||
<Text>
|
<Text>
|
||||||
<Text>
|
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">{welcomeMessage} </Text>
|
||||||
<Text color="claude">{welcomeMessage} </Text>
|
<Text dimColor>v{MACRO.VERSION} </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 color="claudeBlue_FOR_SYSTEM_SPINNER">
|
||||||
<Text>{' ░░░░░░ ███▓░ '}</Text>
|
{' '}
|
||||||
<Text>{' ░░░ ░░░░░░░░░░ ███▓░ '}</Text>
|
{COSTRICT_ART_LINE2}
|
||||||
<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>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
@ -125,116 +97,69 @@ function AppleTerminalWelcomeV2({ theme, welcomeMessage }: AppleTerminalWelcomeV
|
||||||
|
|
||||||
if (isLightTheme) {
|
if (isLightTheme) {
|
||||||
return (
|
return (
|
||||||
<Box width={WELCOME_V2_WIDTH}>
|
<Box width={WELCOME_V2_WIDTH} flexDirection="column">
|
||||||
<Text>
|
<Text>
|
||||||
<Text>
|
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">{welcomeMessage} </Text>
|
||||||
<Text color="claude">{welcomeMessage} </Text>
|
<Text dimColor>v{MACRO.VERSION} </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 color="claudeBlue_FOR_SYSTEM_SPINNER">
|
||||||
<Text>{' ░░░░░░ '}</Text>
|
{' '}
|
||||||
<Text>{' ░░░ ░░░░░░░░░░ '}</Text>
|
{COSTRICT_ART_LINE2}
|
||||||
<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>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box width={WELCOME_V2_WIDTH}>
|
<Box width={WELCOME_V2_WIDTH} flexDirection="column">
|
||||||
<Text>
|
<Text>
|
||||||
<Text>
|
<Text color="claudeBlue_FOR_SYSTEM_SPINNER">{welcomeMessage} </Text>
|
||||||
<Text color="claude">{welcomeMessage} </Text>
|
<Text dimColor>v{MACRO.VERSION} </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 color="claudeBlue_FOR_SYSTEM_SPINNER">
|
||||||
<Text>{' ░░░░░░ ███▓░ '}</Text>
|
{' '}
|
||||||
<Text>{' ░░░ ░░░░░░░░░░ ███▓░ '}</Text>
|
{COSTRICT_ART_LINE2}
|
||||||
<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>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -164,7 +164,7 @@ export function ThemePicker({
|
||||||
lines: [
|
lines: [
|
||||||
' function greet() {',
|
' function greet() {',
|
||||||
'- console.log("Hello, World!");',
|
'- console.log("Hello, World!");',
|
||||||
'+ console.log("Hello, Claude!");',
|
'+ console.log("Hello, CoStrict!");',
|
||||||
' }',
|
' }',
|
||||||
],
|
],
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user