开发预览更新于 2026-05-10

Code 代码

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

基础用法

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

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

背景视口

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

      
      import { CfButton } from '@chufix-design/vue';

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

src/App.vue

<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>

import { CfCodeBlock, CfInlineCode } from '@chufix-design/react';

export default function Demo() {
  const code = `import { CfButton } from '@chufix-design/vue';

  export function Hello() {
    return <CfButton>Click me</CfButton>;
  }`;
  return (
    <>
      <p>用 <CfInlineCode>npm i @chufix-design/react</CfInlineCode> 安装。</p>
      <CfCodeBlock code={code} language="tsx" title="hello.tsx" />
    </>
  );
}

import { CfCodeBlock, CfInlineCode } from '@chufix-design/react';

export default function Demo() {
  const code = `import { CfButton } from '@chufix-design/vue';

  export function Hello() {
    return <CfButton>Click me</CfButton>;
  }`;
  return (
    <>
      <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 是命令行参数。

src/App.vue

<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>

import { CfInlineCode } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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>
    </>
  );
}

import { CfInlineCode } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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 在每行左侧显示行号 — 教程 / 教学场景中便于读者跟随。

背景视口

      
        
          12345678
        
      
      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;
}

src/App.vue

<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>

import { CfCodeBlock } from '@chufix-design/react';

export default function Demo() {
  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;
  }`;
  return (
    <>
      <CfCodeBlock code={code} language="js" title="fib.js" showLineNumbers />
    </>
  );
}

import { CfCodeBlock } from '@chufix-design/react';

export default function Demo() {
  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;
  }`;
  return (
    <>
      <CfCodeBlock code={code} language="js" title="fib.js" showLineNumbers />
    </>
  );
}

限制最大高度

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

背景视口

      
        
          123456789101112131415161718192021222324252627282930
        
      
      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');

src/App.vue

<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>

import { CfCodeBlock } from '@chufix-design/react';

export default function Demo() {
  const code = lines.join('\n');
  return (
    <>
      <CfCodeBlock code={code} language="js" title="long-output.js" showLineNumbers maxHeight={200} />
    </>
  );
}

import { CfCodeBlock } from '@chufix-design/react';

export default function Demo() {
  const code = lines.join('\n');
  return (
    <>
      <CfCodeBlock code={code} language="js" title="long-output.js" showLineNumbers maxHeight={200} />
    </>
  );
}

代码工作区

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

背景视口

src/components/StatusPanel.vuevue

12345678910111213

<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>

src/App.vue

<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: 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>

import { CfButton, CfEmpty } from '@chufix-design/react';

export default function Demo() {
  const files: CodeWorkspaceFile[] = [
    {
      name: 'src/components/StatusPanel.vue',
      language: 'vue',
      content: `<script setup lang="ts">

  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);
  }`,
    },
  ];
  return (
    <>
      <CfEmpty title={title} description="创建第一条记录后会显示在这里。">
            <CfButton variant="primary" size="sm">创建记录</CfButton>
    </>
  );
}

import { CfButton, CfEmpty } from '@chufix-design/react';

export default function Demo() {
  const files= [
    {
      name: 'src/components/StatusPanel.vue',
      language: 'vue',
      content: `<script setup>

  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);
  }`,
    },
  ];
  return (
    <>
      <CfEmpty title={title} description="创建第一条记录后会显示在这里。">
            <CfButton variant="primary" size="sm">创建记录</CfButton>
    </>
  );
}

多框架 / 多变体（bundles）

把同一份示例的多种实现塞到 bundles，CfCodeWorkspace 会在顶部自动出现「框架 tab + 变体 tab」。同一时刻只显示激活 bundle 的文件树与文件 tab。framework / variant 取值由你自己定义，‘neutral’ 表示该 bundle 不归任何框架组（适合放 CLI 命令、配置等）。

背景视口

src/Counter.vuevue

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

const count = ref<number>(0);
</script>

<template>
  <div>
    <CfButton @click="count++">count = {{ count }}</CfButton>
  </div>
</template>

src/App.vue

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

// 同一个最小应用的 Vue × TS / Vue × JS / React × TS / React × JS 四种实现，
// 通过 bundles[] 一起塞进 CfCodeWorkspace。组件顶部会自动出现「框架 tab + 变体 tab」。

const vueTs = `<script setup lang="ts">
import { ref } from 'vue';
import { CfButton } from '@chufix-design/vue';

const count = ref<number>(0);
<\/script>
<template>
  <div>
    <CfButton @click="count++">count = {{ count }}</CfButton>
  </div>
</template>`;

const vueJs = `<script setup>
import { ref } from 'vue';
import { CfButton } from '@chufix-design/vue';

const count = ref(0);
<\/script>
<template>
  <div>
    <CfButton @click="count++">count = {{ count }}</CfButton>
  </div>
</template>`;

const reactTs = `import { useState } from 'react';
import { CfButton } from '@chufix-design/react';

export default function Counter() {
  const [count, setCount] = useState<number>(0);
  return (
    <div>
      <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
    </div>
  );
}`;

const reactJs = `import { useState } from 'react';
import { CfButton } from '@chufix-design/react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
    </div>
  );
}`;

const bundles: CodeWorkspaceBundle[] = [
  {
    id: 'vue-ts',
    framework: 'vue',
    variant: 'ts',
    frameworkLabel: 'Vue',
    variantLabel: 'TypeScript',
    files: [{ name: 'src/Counter.vue', content: vueTs, language: 'vue' }],
  },
  {
    id: 'vue-js',
    framework: 'vue',
    variant: 'js',
    frameworkLabel: 'Vue',
    variantLabel: 'JavaScript',
    files: [{ name: 'src/Counter.vue', content: vueJs, language: 'vue' }],
  },
  {
    id: 'react-ts',
    framework: 'react',
    variant: 'ts',
    frameworkLabel: 'React',
    variantLabel: 'TypeScript',
    files: [{ name: 'src/Counter.tsx', content: reactTs, language: 'tsx' }],
  },
  {
    id: 'react-js',
    framework: 'react',
    variant: 'js',
    frameworkLabel: 'React',
    variantLabel: 'JavaScript',
    files: [{ name: 'src/Counter.jsx', content: reactJs, language: 'jsx' }],
  },
];
</script>
<template>
  <CfCodeWorkspace
    title="counter · source"
    root-label="counter"
    :bundles="bundles"
    tone="dark"
    :height="380"
  />
</template>

<script setup>
import { CfCodeWorkspace } from '@chufix-design/vue';

// 同一个最小应用的 Vue × TS / Vue × JS / React × TS / React × JS 四种实现，
// 通过 bundles[] 一起塞进 CfCodeWorkspace。组件顶部会自动出现「框架 tab + 变体 tab」。

const vueTs = `<script setup>
import { ref } from 'vue';
import { CfButton } from '@chufix-design/vue';

const count = ref<number>(0);
<\/script>
<template>
  <div>
    <CfButton @click="count++">count = {{ count }}</CfButton>
  </div>
</template>`;

const vueJs = `<script setup>
import { ref } from 'vue';
import { CfButton } from '@chufix-design/vue';

const count = ref(0);
<\/script>
<template>
  <div>
    <CfButton @click="count++">count = {{ count }}</CfButton>
  </div>
</template>`;

const reactTs = `import { useState } from 'react';
import { CfButton } from '@chufix-design/react';

export default function Counter() {
  const [count, setCount] = useState<number>(0);
  return (
    <div>
      <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
    </div>
  );
}`;

const reactJs = `import { useState } from 'react';
import { CfButton } from '@chufix-design/react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
    </div>
  );
}`;

const bundles= [
  {
    id: 'vue-ts',
    framework: 'vue',
    variant: 'ts',
    frameworkLabel: 'Vue',
    variantLabel: 'TypeScript',
    files: [{ name: 'src/Counter.vue', content, language: 'vue' }],
  },
  {
    id: 'vue-js',
    framework: 'vue',
    variant: 'js',
    frameworkLabel: 'Vue',
    variantLabel: 'JavaScript',
    files: [{ name: 'src/Counter.vue', content, language: 'vue' }],
  },
  {
    id: 'react-ts',
    framework: 'react',
    variant: 'ts',
    frameworkLabel: 'React',
    variantLabel: 'TypeScript',
    files: [{ name: 'src/Counter.tsx', content, language: 'tsx' }],
  },
  {
    id: 'react-js',
    framework: 'react',
    variant: 'js',
    frameworkLabel: 'React',
    variantLabel: 'JavaScript',
    files: [{ name: 'src/Counter.jsx', content, language: 'jsx' }],
  },
];
</script>
<template>
  <CfCodeWorkspace
    title="counter · source"
    root-label="counter"
    :bundles="bundles"
    tone="dark"
    :height="380"
  />
</template>

import { useState } from 'react';
import { CfButton } from '@chufix-design/react';

export default function Demo() {
  const [count, setCount] = useState(0);
  <\/script>
  <template>
    <div>
      <CfButton @click="count++">count = {{ count }}</CfButton>
    </div>
  </template>`;

  const reactTs = `import { useState } from 'react';

  export default function Counter() {
    const [count, setCount] = useState<number>(0);
    return (
      <div>
        <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
      </div>
    );
  }`;

  const reactJs = `import { useState } from 'react';

  export default function Counter() {
    const [count, setCount] = useState(0);
    return (
      <div>
        <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
      </div>
    );
  }`;

  const bundles: CodeWorkspaceBundle[] = [
    {
      id: 'vue-ts',
      framework: 'vue',
      variant: 'ts',
      frameworkLabel: 'Vue',
      variantLabel: 'TypeScript',
      files: [{ name: 'src/Counter.vue', content: vueTs, language: 'vue' }],
    },
    {
      id: 'vue-js',
      framework: 'vue',
      variant: 'js',
      frameworkLabel: 'Vue',
      variantLabel: 'JavaScript',
      files: [{ name: 'src/Counter.vue', content: vueJs, language: 'vue' }],
    },
    {
      id: 'react-ts',
      framework: 'react',
      variant: 'ts',
      frameworkLabel: 'React',
      variantLabel: 'TypeScript',
      files: [{ name: 'src/Counter.tsx', content: reactTs, language: 'tsx' }],
    },
    {
      id: 'react-js',
      framework: 'react',
      variant: 'js',
      frameworkLabel: 'React',
      variantLabel: 'JavaScript',
      files: [{ name: 'src/Counter.jsx', content: reactJs, language: 'jsx' }],
    },
  ];
  return (
    <>
      <div>
          <CfButton onClick={() => count++}>count = {count}</CfButton>
        </div>
    </>
  );
}

import { useState } from 'react';
import { CfButton } from '@chufix-design/react';

export default function Demo() {
  const [count, setCount] = useState(0);
  <\/script>
  <template>
    <div>
      <CfButton @click="count++">count = {{ count }}</CfButton>
    </div>
  </template>`;

  const reactTs = `import { useState } from 'react';

  export default function Counter() {
    const [count, setCount] = useState<number>(0);
    return (
      <div>
        <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
      </div>
    );
  }`;

  const reactJs = `import { useState } from 'react';

  export default function Counter() {
    const [count, setCount] = useState(0);
    return (
      <div>
        <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
      </div>
    );
  }`;

  const bundles: CodeWorkspaceBundle[] = [
    {
      id: 'vue-ts',
      framework: 'vue',
      variant: 'ts',
      frameworkLabel: 'Vue',
      variantLabel: 'TypeScript',
      files: [{ name: 'src/Counter.vue', content: vueTs, language: 'vue' }],
    },
    {
      id: 'vue-js',
      framework: 'vue',
      variant: 'js',
      frameworkLabel: 'Vue',
      variantLabel: 'JavaScript',
      files: [{ name: 'src/Counter.vue', content: vueJs, language: 'vue' }],
    },
    {
      id: 'react-ts',
      framework: 'react',
      variant: 'ts',
      frameworkLabel: 'React',
      variantLabel: 'TypeScript',
      files: [{ name: 'src/Counter.tsx', content: reactTs, language: 'tsx' }],
    },
    {
      id: 'react-js',
      framework: 'react',
      variant: 'js',
      frameworkLabel: 'React',
      variantLabel: 'JavaScript',
      files: [{ name: 'src/Counter.jsx', content: reactJs, language: 'jsx' }],
    },
  ];
  return (
    <>
      <div>
          <CfButton onClick={() => count++}>count = {count}</CfButton>
        </div>
    </>
  );
}

API · InlineCode

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

API · CodeBlock

属性	类型	默认值	说明
`code`	`string`	必填	代码内容（多行用 `\n` 分隔）
`language`	`string`	`—`	头部右侧的语言标签
`title`	`string \| ReactNode`	`—`	头部左侧标题，常用作文件名
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	字号
`showLineNumbers`	`boolean`	`false`	是否显示行号
`copyable`	`boolean`	`true`	头部显示复制按钮
`maxHeight`	`number \| string`	`—`	启用纵向滚动的最大高度
`startLine`	`number`	`1`	行号起始
`wrap`	`boolean`	`false`	长行换行
`tone`	`'auto' \| 'light' \| 'dark'`	`'auto'`	代码面板色调；`auto` 跟随全局主题
`trimIndent`	`boolean`	`false`	去掉多行代码的公共缩进
`highlight`	`boolean`	`true`	是否启用内置轻量高亮
`highlightedHtml`	`string`	—	外部高亮后的安全 HTML

API · CodeWorkspace

属性	类型	默认值	说明
`files`	`CodeWorkspaceFile[]`	—	单 bundle 模式的文件数组；与 `bundles` 二选一
`bundles`	`CodeWorkspaceBundle[]`	—	多 bundle 模式；提供后自动渲染框架 / 变体 tab
`title`	`string \| ReactNode`	—	顶部标题
`rootLabel` / `root-label`	`string`	`'project'`	左侧树根节点
`defaultFile` / `activeFile`	`string`	首个文件	默认 / 受控激活文件 id
`defaultBundle` / `activeBundle`	`string`	首个 bundle	默认 / 受控激活 bundle id
`editable`	`boolean`	`false`	编辑器模式
`readOnly` / `read-only`	`boolean`	`false`	禁止编辑
`showLineNumbers` / `show-line-numbers`	`boolean`	`true`	行号
`copyable`	`boolean`	`true`	顶部复制当前文件
`height`	`number \| string`	—	固定工作区高度
`wrap`	`boolean`	`false`	长行换行
`tone`	`'auto' \| 'light' \| 'dark'`	`'auto'`	面板色调；`auto` 跟随全局主题
`trimIndent` / `trim-indent`	`boolean`	`false`	展示模式下去公共缩进
`highlightedHtml`	`CodeWorkspaceFile` 字段	—	单文件外部高亮 HTML

interface CodeWorkspaceFile {
  id?: string;
  name: string;
  content: string;
  language?: string;
  highlightedHtml?: string;
  readonly?: boolean;
}

interface CodeWorkspaceBundle {
  id: string;
  framework: 'vue' | 'react' | 'neutral' | string;
  variant: 'ts' | 'js' | 'shell' | string;
  frameworkLabel: string;
  variantLabel: string;
  label?: string;
  files: CodeWorkspaceFile[];
}