ChuFix UI v0.2.1
Preview Updated 2026-05-10

Code

InlineCode for inline snippets + CodeBlock for multi-line blocks — with optional title, language tag, line numbers, copy button, and max scroll height.

Basic usage

<CfInlineCode> embeds small inline snippets (package names, commands). <CfCodeBlock> takes a code string and renders a multi-line block, with optional title / language / showLineNumbers / copyable.

It includes lightweight syntax highlighting, line numbers, copy, dedent, and a dark code surface. You can also pass highlightedHtml from 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>Install with <CfInlineCode>npm i @chufix-design/react</CfInlineCode>.</p>
<CfCodeBlock code={code} language="tsx" title="hello.tsx" />
<p>Install with <CfInlineCode>npm i @chufix-design/react</CfInlineCode>.</p>
<CfCodeBlock code={code} language="tsx" title="hello.tsx" />

Inline code

<CfInlineCode> on its own — wraps <code> as a monospace pill with a tinted background and rounded corners. size="sm" gives a smaller variant for dense docs.

背景

常用包：@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>Common packages: <CfInlineCode>@chufix-design/vue</CfInlineCode>, <CfInlineCode>@chufix-design/react</CfInlineCode>.</p>
<p>Command: <CfInlineCode>pnpm dev</CfInlineCode>.</p>
<p>Small: <CfInlineCode size="sm">--config</CfInlineCode>.</p>
<p>Common packages: <CfInlineCode>@chufix-design/vue</CfInlineCode>, <CfInlineCode>@chufix-design/react</CfInlineCode>.</p>
<p>Command: <CfInlineCode>pnpm dev</CfInlineCode>.</p>
<p>Small: <CfInlineCode size="sm">--config</CfInlineCode>.</p>

Line numbers

showLineNumbers shows line numbers on the left — handy for tutorials and walkthroughs.

背景
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 />

Limit max height

maxHeight enables vertical scrolling so long blocks don’t take over the page.

背景
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} />

Code workspace

CfCodeWorkspace combines a project tree with a code surface. Use it for docs snippets, icon source, Blocks recipes, and multi-file examples. With editable, the right side becomes an editor-like textarea while keeping the tree, tabs, copy, and line numbers.

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

PropTypeDefaultDescription
size'sm' | 'md''md'Size, relative to the parent font size

API · CodeBlock

PropTypeDefaultDescription
codestringrequiredCode content (use \n for line breaks)
languagestring—Language label on the right of the header
titlestring | ReactNode—Title on the left of the header — typically a file name
size'sm' | 'md' | 'lg''md'Font size
showLineNumbersbooleanfalseWhether to show line numbers
copyablebooleantrueShow the copy button in the header
maxHeightnumber | string—Max height to enable vertical scrolling
startLinenumber1First line number
wrapbooleanfalseSoft-wrap long lines
tone'light' | 'dark''light'Code surface tone
trimIndentbooleanfalseRemove common indentation
highlightbooleantrueEnable built-in lightweight highlighting
highlightedHtmlstring—Safe HTML from an external highlighter

API · CodeWorkspace

PropTypeDefaultDescription
filesCodeWorkspaceFile[]requiredMulti-file source list
titlestring | ReactNode—Header title
rootLabel / root-labelstring'project'Tree root label
defaultFile / activeFilestringfirst fileDefault / controlled active file id
editablebooleanfalseEditor mode
readOnly / read-onlybooleanfalseDisable editing
showLineNumbers / show-line-numbersbooleantrueLine numbers
copyablebooleantrueCopy current file
heightnumber | string—Fixed workspace height
wrapbooleanfalseSoft-wrap long lines
tone'light' | 'dark''light'Surface tone
trimIndent / trim-indentbooleanfalseDedent in display mode
highlightedHtmlCodeWorkspaceFile field—Per-file external highlighted HTML

反馈与讨论

Code · Discussion

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