示例
直接操作示例，查看组件在具体任务中的状态与反馈。
行内代码
从 components/base 公开子路径导入组件，并显式加载 styles.css。
块级代码
长命令保持原始字符，不撑开外层页面。
yarn --cwd website api:generate --check安装命令
npm install @inf-monkeys-tech/monkeys-designimport { BaseButton } from '@inf-monkeys-tech/monkeys-design/components/base';使用建议
短标识使用行内模式
属性名、文件名和短命令适合 inline，保持与句子共同换行和阅读。
保留格式使用块级模式
完整命令或多行片段使用 block；窄屏中的长行在组件自身范围内横向滚动。
源码必须经过脱敏
公开示例只展示确定性本地内容，不包含凭据、内部地址、生产标识或业务数据。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseCode } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Code 不提供语法高亮、行号、复制按钮或自动换行策略；复杂源码展示与语言标注需要宿主另行组合。
- Automated axe checks and deterministic browser visual evidence are pending T17/T23.
API
查看组件源码export interface BaseCodeProps
extends Omit<
HTMLAttributes<HTMLElement>,
'children' | 'className' | 'style'
> {
children?: ReactNode;
display?: BaseCodeDisplay;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseCodeClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 在 BaseCode 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
display | 代码内容以内联还是块级方式呈现。 | BaseCodeDisplay | 'inline' |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseCodeClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |