ChuFix UI v0.2.1
开发预览 更新于 2026-05-10

Code 代码

InlineCode 行内代码 + CodeBlock 多行代码块；可加标题、语言标签、行号、复制按钮、滚动高度。

基础用法

<CfInlineCode> 用于句中嵌入小段代码（包名 / 命令）。<CfCodeBlock> 接收 code 字符串渲染多行代码块，可选 title / language / showLineNumbers / copyable。

内置轻量语法高亮、行号、复制、去缩进、暗色面板；也可以传 highlightedHtml 接入 shiki / highlight.js / prism 等外部高亮方案。

背景

用 npm i @chufix-design/vue 安装。

hello.tsxtsx
      
      import { CfButton } from '@chufix-design/vue';
 
export function Hello() {
  return <CfButton>Click me</CfButton>;
}
    
<script setup lang="ts">
import { CfInlineCode, CfCodeBlock } from '@chufix-design/vue';

const code = `import { CfButton } from '@chufix-design/vue';

export function Hello() {
  return <CfButton>Click me</CfButton>;
}`;
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 12px;">
    <p>用 <CfInlineCode>npm i @chufix-design/vue</CfInlineCode> 安装。</p>
    <CfCodeBlock :code="code" language="tsx" title="hello.tsx" />
  </div>
</template>
<script setup>
import { CfInlineCode, CfCodeBlock } from '@chufix-design/vue';

const code = `import { CfButton } from '@chufix-design/vue';

export function Hello() {
  return <CfButton>Click me</CfButton>;
}`;
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 12px;">
    <p>用 <CfInlineCode>npm i @chufix-design/vue</CfInlineCode> 安装。</p>
    <CfCodeBlock :code="code" language="tsx" title="hello.tsx" />
  </div>
</template>
<p>用 <CfInlineCode>npm i @chufix-design/react</CfInlineCode> 安装。</p>
<CfCodeBlock code={code} language="tsx" title="hello.tsx" />
<p>用 <CfInlineCode>npm i @chufix-design/react</CfInlineCode> 安装。</p>
<CfCodeBlock code={code} language="tsx" title="hello.tsx" />

行内代码

<CfInlineCode> 单独使用 — 把 <code> 包成等宽 + 浅色底 + 圆角的小标签。size="sm" 在密集文档里更小一档。

背景

常用包：@chufix-design/vue、@chufix-design/react、@chufix-design/tokens。

命令：pnpm dev 启动开发服务器。

小号：--config 是命令行参数。

 
<script setup lang="ts">
import { CfInlineCode } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 8px;">
    <p>常用包：<CfInlineCode>@chufix-design/vue</CfInlineCode>、<CfInlineCode>@chufix-design/react</CfInlineCode>、<CfInlineCode>@chufix-design/tokens</CfInlineCode>。</p>
    <p>命令：<CfInlineCode>pnpm dev</CfInlineCode> 启动开发服务器。</p>
    <p>小号：<CfInlineCode size="sm">--config</CfInlineCode> 是命令行参数。</p>
  </div>
</template>
<script setup>
import { CfInlineCode } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 8px;">
    <p>常用包：<CfInlineCode>@chufix-design/vue</CfInlineCode>、<CfInlineCode>@chufix-design/react</CfInlineCode>、<CfInlineCode>@chufix-design/tokens</CfInlineCode>。</p>
    <p>命令：<CfInlineCode>pnpm dev</CfInlineCode> 启动开发服务器。</p>
    <p>小号：<CfInlineCode size="sm">--config</CfInlineCode> 是命令行参数。</p>
  </div>
</template>
<p>常用包：<CfInlineCode>@chufix-design/vue</CfInlineCode>、<CfInlineCode>@chufix-design/react</CfInlineCode>。</p>
<p>命令：<CfInlineCode>pnpm dev</CfInlineCode>。</p>
<p>小号：<CfInlineCode size="sm">--config</CfInlineCode>。</p>
<p>常用包：<CfInlineCode>@chufix-design/vue</CfInlineCode>、<CfInlineCode>@chufix-design/react</CfInlineCode>。</p>
<p>命令：<CfInlineCode>pnpm dev</CfInlineCode>。</p>
<p>小号：<CfInlineCode size="sm">--config</CfInlineCode>。</p>

行号

showLineNumbers 在每行左侧显示行号 — 教程 / 教学场景中便于读者跟随。

背景
fib.jsjs
      
        
      
      function fib(n) {
  if (n <= 1) return n;
  let [a, b] = [0, 1];
  for (let i = 2; i <= n; i++) {
    [a, b] = [b, a + b];
  }
  return b;
}
    
<script setup lang="ts">
import { CfCodeBlock } from '@chufix-design/vue';

const code = `function fib(n) {
  if (n <= 1) return n;
  let [a, b] = [0, 1];
  for (let i = 2; i <= n; i++) {
    [a, b] = [b, a + b];
  }
  return b;
}`;
</script>

<template>
  <CfCodeBlock :code="code" language="js" title="fib.js" show-line-numbers />
</template>
<script setup>
import { CfCodeBlock } from '@chufix-design/vue';

const code = `function fib(n) {
  if (n <= 1) return n;
  let [a, b] = [0, 1];
  for (let i = 2; i <= n; i++) {
    [a, b] = [b, a + b];
  }
  return b;
}`;
</script>

<template>
  <CfCodeBlock :code="code" language="js" title="fib.js" show-line-numbers />
</template>
<CfCodeBlock code={code} language="js" title="fib.js" showLineNumbers />
<CfCodeBlock code={code} language="js" title="fib.js" showLineNumbers />

限制最大高度

maxHeight 启用纵向滚动 — 长代码块在文档里不至于把屏幕占满。

背景
long-output.jsjs
      
        
      
      console.log('行 1');
console.log('行 2');
console.log('行 3');
console.log('行 4');
console.log('行 5');
console.log('行 6');
console.log('行 7');
console.log('行 8');
console.log('行 9');
console.log('行 10');
console.log('行 11');
console.log('行 12');
console.log('行 13');
console.log('行 14');
console.log('行 15');
console.log('行 16');
console.log('行 17');
console.log('行 18');
console.log('行 19');
console.log('行 20');
console.log('行 21');
console.log('行 22');
console.log('行 23');
console.log('行 24');
console.log('行 25');
console.log('行 26');
console.log('行 27');
console.log('行 28');
console.log('行 29');
console.log('行 30');
    
<script setup lang="ts">
import { CfCodeBlock } from '@chufix-design/vue';

const lines = Array.from({ length: 30 }, (_, i) => `console.log('行 ${i + 1}');`);
const code = lines.join('\n');
</script>

<template>
  <CfCodeBlock :code="code" language="js" title="long-output.js" show-line-numbers :max-height="200" />
</template>
<script setup>
import { CfCodeBlock } from '@chufix-design/vue';

const lines = Array.from({ length: 30 }, (_, i) => `console.log('行 ${i + 1}');`);
const code = lines.join('\n');
</script>

<template>
  <CfCodeBlock :code="code" language="js" title="long-output.js" show-line-numbers :max-height="200" />
</template>
<CfCodeBlock code={code} language="js" title="long-output.js" showLineNumbers maxHeight={200} />
<CfCodeBlock code={code} language="js" title="long-output.js" showLineNumbers maxHeight={200} />

代码工作区

CfCodeWorkspace 是左侧项目树 + 右侧代码区的组合组件，可用于 docs 代码展示、图标源码、Blocks 页面方案、多文件示例。开启 editable 后右侧会切换成类编辑器输入区，仍保留文件树、tab、复制和行号。

背景
status-panel
src/components/StatusPanel.vuevue
12345678910111213
 
<script setup lang="ts">
import { CfCodeWorkspace, type CodeWorkspaceFile } from '@chufix-design/vue';

const files: CodeWorkspaceFile[] = [
  {
    name: 'src/components/StatusPanel.vue',
    language: 'vue',
    content: `<script setup lang="ts">
import { CfEmpty, CfButton } from '@chufix-design/vue';

const title = '还没有发布记录';
<\/script>

<template>
  <CfEmpty :title="title" description="创建第一条记录后会显示在这里。">
    <template #action>
      <CfButton variant="primary" size="sm">创建记录</CfButton>
    </template>
  </CfEmpty>
</template>`,
  },
  {
    name: 'src/components/status-panel.ts',
    language: 'typescript',
    content: `export interface StatusPanelAction {
  id: string;
  label: string;
  tone?: 'primary' | 'secondary';
}

export const actions: StatusPanelAction[] = [
  { id: 'create', label: '创建记录', tone: 'primary' },
  { id: 'import', label: '导入数据', tone: 'secondary' },
];`,
  },
  {
    name: 'src/styles/status-panel.css',
    language: 'css',
    content: `.status-panel {
  min-height: 320px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-1);
  border-radius: var(--r-6);
}`,
  },
];
</script>

<template>
  <CfCodeWorkspace
    title="status-panel"
    root-label="app"
    :files="files"
    tone="dark"
    editable
    :height="430"
    trim-indent
  />
</template>
<script setup>
import { CfCodeWorkspace } from '@chufix-design/vue';

const files= [
  {
    name: 'src/components/StatusPanel.vue',
    language: 'vue',
    content: `<script setup>
import { CfEmpty, CfButton } from '@chufix-design/vue';

const title = '还没有发布记录';
<\/script>

<template>
  <CfEmpty :title="title" description="创建第一条记录后会显示在这里。">
    <template #action>
      <CfButton variant="primary" size="sm">创建记录</CfButton>
    </template>
  </CfEmpty>
</template>`,
  },
  {
    name: 'src/components/status-panel.ts',
    language: 'typescript',
    content: `export interface StatusPanelAction {
  id: string;
  label: string;
  tone?: 'primary' | 'secondary';
}

export const actions= [
  { id: 'create', label: '创建记录', tone: 'primary' },
  { id: 'import', label: '导入数据', tone: 'secondary' },
];`,
  },
  {
    name: 'src/styles/status-panel.css',
    language: 'css',
    content: `.status-panel {
  min-height: 320px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-1);
  border-radius: var(--r-6);
}`,
  },
];
</script>

<template>
  <CfCodeWorkspace
    title="status-panel"
    root-label="app"
    :files="files"
    tone="dark"
    editable
    :height="430"
    trim-indent
  />
</template>
<CfCodeWorkspace
title="status-panel"
rootLabel="app"
files={files}
tone="dark"
editable
height={430}
trimIndent
/>
<CfCodeWorkspace
title="status-panel"
rootLabel="app"
files={files}
tone="dark"
editable
height={430}
trimIndent
/>

API · InlineCode

属性类型默认值说明
size'sm' | 'md''md'大小，相对父字号

API · CodeBlock

属性类型默认值说明
codestring必填代码内容（多行用 \n 分隔）
languagestring—头部右侧的语言标签
titlestring | ReactNode—头部左侧标题，常用作文件名
size'sm' | 'md' | 'lg''md'字号
showLineNumbersbooleanfalse是否显示行号
copyablebooleantrue头部显示复制按钮
maxHeightnumber | string—启用纵向滚动的最大高度
startLinenumber1行号起始
wrapbooleanfalse长行换行
tone'light' | 'dark''light'代码面板色调
trimIndentbooleanfalse去掉多行代码的公共缩进
highlightbooleantrue是否启用内置轻量高亮
highlightedHtmlstring—外部高亮后的安全 HTML

API · CodeWorkspace

属性类型默认值说明
filesCodeWorkspaceFile[]必填多文件列表
titlestring | ReactNode—顶部标题
rootLabel / root-labelstring'project'左侧树根节点
defaultFile / activeFilestring首个文件默认 / 受控激活文件 id
editablebooleanfalse编辑器模式
readOnly / read-onlybooleanfalse禁止编辑
showLineNumbers / show-line-numbersbooleantrue行号
copyablebooleantrue顶部复制当前文件
heightnumber | string—固定工作区高度
wrapbooleanfalse长行换行
tone'light' | 'dark''light'面板色调
trimIndent / trim-indentbooleanfalse展示模式下去公共缩进
highlightedHtmlCodeWorkspaceFile 字段—单文件外部高亮 HTML
interface CodeWorkspaceFile {
  id?: string;
  name: string;
  content: string;
  language?: string;
  highlightedHtml?: string;
  readonly?: boolean;
}

反馈与讨论

Code 代码 的讨论

0
0 / 600
一键发送
正在加载评论...