mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-23 08:45:50 +00:00
feat: 第一个可以用的 ink 组件抽象 (#158)
This commit is contained in:
claude-code-best
307
packages/@ant/ink/src/core/Ansi.tsx
Normal file
307
packages/@ant/ink/src/core/Ansi.tsx
Normal file
@@ -0,0 +1,307 @@
|
||||
import React from 'react'
|
||||
import Link from '../components/Link.js'
|
||||
import Text from '../components/Text.js'
|
||||
import type { Color } from './styles.js'
|
||||
import {
|
||||
type NamedColor,
|
||||
Parser,
|
||||
type Color as TermioColor,
|
||||
type TextStyle,
|
||||
} from './termio.js'
|
||||
|
||||
type Props = {
|
||||
children: string
|
||||
/** When true, force all text to be rendered with dim styling */
|
||||
dimColor?: boolean
|
||||
}
|
||||
|
||||
type SpanProps = {
|
||||
color?: Color
|
||||
backgroundColor?: Color
|
||||
dim?: boolean
|
||||
bold?: boolean
|
||||
italic?: boolean
|
||||
underline?: boolean
|
||||
strikethrough?: boolean
|
||||
inverse?: boolean
|
||||
hyperlink?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Component that parses ANSI escape codes and renders them using Text components.
|
||||
*
|
||||
* Use this as an escape hatch when you have pre-formatted ANSI strings from
|
||||
* external tools (like cli-highlight) that need to be rendered in Ink.
|
||||
*
|
||||
* Memoized to prevent re-renders when parent changes but children string is the same.
|
||||
*/
|
||||
export const Ansi = React.memo(function Ansi({
|
||||
children,
|
||||
dimColor,
|
||||
}: Props): React.ReactNode {
|
||||
if (typeof children !== 'string') {
|
||||
return dimColor ? (
|
||||
<Text dim>{String(children)}</Text>
|
||||
) : (
|
||||
<Text>{String(children)}</Text>
|
||||
)
|
||||
}
|
||||
|
||||
if (children === '') {
|
||||
return null
|
||||
}
|
||||
|
||||
const spans = parseToSpans(children)
|
||||
|
||||
if (spans.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (spans.length === 1 && !hasAnyProps(spans[0]!.props)) {
|
||||
return dimColor ? (
|
||||
<Text dim>{spans[0]!.text}</Text>
|
||||
) : (
|
||||
<Text>{spans[0]!.text}</Text>
|
||||
)
|
||||
}
|
||||
|
||||
const content = spans.map((span, i) => {
|
||||
const hyperlink = span.props.hyperlink
|
||||
// When dimColor is forced, override the span's dim prop
|
||||
if (dimColor) {
|
||||
span.props.dim = true
|
||||
}
|
||||
const hasTextProps = hasAnyTextProps(span.props)
|
||||
|
||||
if (hyperlink) {
|
||||
return hasTextProps ? (
|
||||
<Link key={i} url={hyperlink}>
|
||||
<StyledText
|
||||
color={span.props.color}
|
||||
backgroundColor={span.props.backgroundColor}
|
||||
dim={span.props.dim}
|
||||
bold={span.props.bold}
|
||||
italic={span.props.italic}
|
||||
underline={span.props.underline}
|
||||
strikethrough={span.props.strikethrough}
|
||||
inverse={span.props.inverse}
|
||||
>
|
||||
{span.text}
|
||||
</StyledText>
|
||||
</Link>
|
||||
) : (
|
||||
<Link key={i} url={hyperlink}>
|
||||
{span.text}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
return hasTextProps ? (
|
||||
<StyledText
|
||||
key={i}
|
||||
color={span.props.color}
|
||||
backgroundColor={span.props.backgroundColor}
|
||||
dim={span.props.dim}
|
||||
bold={span.props.bold}
|
||||
italic={span.props.italic}
|
||||
underline={span.props.underline}
|
||||
strikethrough={span.props.strikethrough}
|
||||
inverse={span.props.inverse}
|
||||
>
|
||||
{span.text}
|
||||
</StyledText>
|
||||
) : (
|
||||
span.text
|
||||
)
|
||||
})
|
||||
|
||||
return dimColor ? <Text dim>{content}</Text> : <Text>{content}</Text>
|
||||
})
|
||||
|
||||
type Span = {
|
||||
text: string
|
||||
props: SpanProps
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse an ANSI string into spans using the termio parser.
|
||||
*/
|
||||
function parseToSpans(input: string): Span[] {
|
||||
const parser = new Parser()
|
||||
const actions = parser.feed(input)
|
||||
const spans: Span[] = []
|
||||
|
||||
let currentHyperlink: string | undefined
|
||||
|
||||
for (const action of actions) {
|
||||
if (action.type === 'link') {
|
||||
if (action.action.type === 'start') {
|
||||
currentHyperlink = action.action.url
|
||||
} else {
|
||||
currentHyperlink = undefined
|
||||
}
|
||||
continue
|
||||
}
|
||||
|
||||
if (action.type === 'text') {
|
||||
const text = action.graphemes.map(g => g.value).join('')
|
||||
if (!text) continue
|
||||
|
||||
const props = textStyleToSpanProps(action.style)
|
||||
if (currentHyperlink) {
|
||||
props.hyperlink = currentHyperlink
|
||||
}
|
||||
|
||||
// Try to merge with previous span if props match
|
||||
const lastSpan = spans[spans.length - 1]
|
||||
if (lastSpan && propsEqual(lastSpan.props, props)) {
|
||||
lastSpan.text += text
|
||||
} else {
|
||||
spans.push({ text, props })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return spans
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert termio's TextStyle to SpanProps.
|
||||
*/
|
||||
function textStyleToSpanProps(style: TextStyle): SpanProps {
|
||||
const props: SpanProps = {}
|
||||
|
||||
if (style.bold) props.bold = true
|
||||
if (style.dim) props.dim = true
|
||||
if (style.italic) props.italic = true
|
||||
if (style.underline !== 'none') props.underline = true
|
||||
if (style.strikethrough) props.strikethrough = true
|
||||
if (style.inverse) props.inverse = true
|
||||
|
||||
const fgColor = colorToString(style.fg)
|
||||
if (fgColor) props.color = fgColor
|
||||
|
||||
const bgColor = colorToString(style.bg)
|
||||
if (bgColor) props.backgroundColor = bgColor
|
||||
|
||||
return props
|
||||
}
|
||||
|
||||
// Map termio named colors to the ansi: format
|
||||
const NAMED_COLOR_MAP: Record<NamedColor, string> = {
|
||||
black: 'ansi:black',
|
||||
red: 'ansi:red',
|
||||
green: 'ansi:green',
|
||||
yellow: 'ansi:yellow',
|
||||
blue: 'ansi:blue',
|
||||
magenta: 'ansi:magenta',
|
||||
cyan: 'ansi:cyan',
|
||||
white: 'ansi:white',
|
||||
brightBlack: 'ansi:blackBright',
|
||||
brightRed: 'ansi:redBright',
|
||||
brightGreen: 'ansi:greenBright',
|
||||
brightYellow: 'ansi:yellowBright',
|
||||
brightBlue: 'ansi:blueBright',
|
||||
brightMagenta: 'ansi:magentaBright',
|
||||
brightCyan: 'ansi:cyanBright',
|
||||
brightWhite: 'ansi:whiteBright',
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert termio's Color to the string format used by Ink.
|
||||
*/
|
||||
function colorToString(color: TermioColor): Color | undefined {
|
||||
switch (color.type) {
|
||||
case 'named':
|
||||
return NAMED_COLOR_MAP[color.name] as Color
|
||||
case 'indexed':
|
||||
return `ansi256(${color.index})` as Color
|
||||
case 'rgb':
|
||||
return `rgb(${color.r},${color.g},${color.b})` as Color
|
||||
case 'default':
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if two SpanProps are equal for merging.
|
||||
*/
|
||||
function propsEqual(a: SpanProps, b: SpanProps): boolean {
|
||||
return (
|
||||
a.color === b.color &&
|
||||
a.backgroundColor === b.backgroundColor &&
|
||||
a.bold === b.bold &&
|
||||
a.dim === b.dim &&
|
||||
a.italic === b.italic &&
|
||||
a.underline === b.underline &&
|
||||
a.strikethrough === b.strikethrough &&
|
||||
a.inverse === b.inverse &&
|
||||
a.hyperlink === b.hyperlink
|
||||
)
|
||||
}
|
||||
|
||||
function hasAnyProps(props: SpanProps): boolean {
|
||||
return (
|
||||
props.color !== undefined ||
|
||||
props.backgroundColor !== undefined ||
|
||||
props.dim === true ||
|
||||
props.bold === true ||
|
||||
props.italic === true ||
|
||||
props.underline === true ||
|
||||
props.strikethrough === true ||
|
||||
props.inverse === true ||
|
||||
props.hyperlink !== undefined
|
||||
)
|
||||
}
|
||||
|
||||
function hasAnyTextProps(props: SpanProps): boolean {
|
||||
return (
|
||||
props.color !== undefined ||
|
||||
props.backgroundColor !== undefined ||
|
||||
props.dim === true ||
|
||||
props.bold === true ||
|
||||
props.italic === true ||
|
||||
props.underline === true ||
|
||||
props.strikethrough === true ||
|
||||
props.inverse === true
|
||||
)
|
||||
}
|
||||
|
||||
// Text style props without weight (bold/dim) - these are handled separately
|
||||
type BaseTextStyleProps = {
|
||||
color?: Color
|
||||
backgroundColor?: Color
|
||||
italic?: boolean
|
||||
underline?: boolean
|
||||
strikethrough?: boolean
|
||||
inverse?: boolean
|
||||
}
|
||||
|
||||
// Wrapper component that handles bold/dim mutual exclusivity for Text
|
||||
function StyledText({
|
||||
bold,
|
||||
dim,
|
||||
children,
|
||||
...rest
|
||||
}: BaseTextStyleProps & {
|
||||
bold?: boolean
|
||||
dim?: boolean
|
||||
children: string
|
||||
}): React.ReactNode {
|
||||
// dim takes precedence over bold when both are set (terminals treat them as mutually exclusive)
|
||||
if (dim) {
|
||||
return (
|
||||
<Text {...rest} dim>
|
||||
{children}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
if (bold) {
|
||||
return (
|
||||
<Text {...rest} bold>
|
||||
{children}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
return <Text {...rest}>{children}</Text>
|
||||
}
|
||||
Reference in New Issue
Block a user