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

CrashPane 崩溃面板

Crash Dialog / Stack Trace / Dump Uploader / Safe Mode 4 个 tab 的崩溃报告面板。

基础用法

预定义 4 个 tab（id：dialog、stack、uploader、safemode），每个 tab 内容由消费方通过 named slot #panel-{tabId}（Vue）/ slots["panel-{tabId}"]（React）填入。也可通过 tabs prop 覆盖默认列表。

来源：crash.html。

背景

崩溃确认对话框（CfModal + 红色确认）。

src/App.vue

<script setup lang="ts">
import { CfCrashPane, CfDropzone } from '@chufix-design/vue';
</script>
<template>
  <div style="height: 280px;">
    <CfCrashPane>
      <template #panel-dialog><p style="color: var(--fg-2);">崩溃确认对话框（CfModal + 红色确认）。</p></template>
      <template #panel-stack><pre style="font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);">at fetchOrders (orders.ts:42)
at handleSubmit (form.ts:18)
at click (button.ts:7)</pre></template>
      <template #panel-uploader>
        <CfDropzone />
      </template>
      <template #panel-safemode><p style="color: var(--fg-2);">安全模式启动入口。</p></template>
    </CfCrashPane>
  </div>
</template>

<script setup>
import { CfCrashPane, CfDropzone } from '@chufix-design/vue';
</script>
<template>
  <div style="height: 280px;">
    <CfCrashPane>
      <template #panel-dialog><p style="color: var(--fg-2);">崩溃确认对话框（CfModal + 红色确认）。</p></template>
      <template #panel-stack><pre style="font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);">at fetchOrders (orders.ts:42)
at handleSubmit (form.ts:18)
at click (button.ts:7)</pre></template>
      <template #panel-uploader>
        <CfDropzone />
      </template>
      <template #panel-safemode><p style="color: var(--fg-2);">安全模式启动入口。</p></template>
    </CfCrashPane>
  </div>
</template>

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

export default function Demo() {
  return (
    <>
      <CfCrashPane slots={{
      'panel-dialog': <PanelA />,
      'panel-stack': <PanelB />,
      }} />
    </>
  );
}

真实内容拼装

4 个 tab 各放一个原子：Banner 错误概要 / pre 堆栈追踪 / Dropzone dump 上传 / 安全模式入口。

背景

src/App.vue

<script setup lang="ts">
import { CfCrashPane, CfDropzone, CfBanner, CfButton } from '@chufix-design/vue';
</script>
<template>
  <div style="height: 320px;">
    <CfCrashPane>
      <template #panel-dialog>
        <CfBanner tone="error" title="应用意外崩溃" description="UncaughtTypeError: cannot read property 'foo' of undefined">
          <template #actions>
            <CfButton variant="danger" size="sm">重启</CfButton>
          </template>
        </CfBanner>
      </template>
      <template #panel-stack>
        <pre style="margin: 0; padding: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--fg-1); background: var(--bg-2); border-radius: var(--r-3); overflow-x: auto;">TypeError: Cannot read property 'foo' of undefined
  at fetchOrders (orders.ts:42:18)
  at handleSubmit (form.ts:18:7)
  at Object.click (button.ts:7:23)
  at HTMLButtonElement.&lt;anonymous&gt; (event.ts:14:9)</pre>
      </template>
      <template #panel-uploader>
        <CfDropzone />
      </template>
      <template #panel-safemode>
        <CfBanner tone="warning" title="进入安全模式将禁用所有插件" description="只保留核心组件，便于排查冲突。" />
        <div style="margin-top: 12px;">
          <CfButton variant="secondary">进入安全模式</CfButton>
        </div>
      </template>
    </CfCrashPane>
  </div>
</template>

<script setup>
import { CfCrashPane, CfDropzone, CfBanner, CfButton } from '@chufix-design/vue';
</script>
<template>
  <div style="height: 320px;">
    <CfCrashPane>
      <template #panel-dialog>
        <CfBanner tone="error" title="应用意外崩溃" description="UncaughtTypeError: cannot read property 'foo' of undefined">
          <template #actions>
            <CfButton variant="danger" size="sm">重启</CfButton>
          </template>
        </CfBanner>
      </template>
      <template #panel-stack>
        <pre style="margin: 0; padding: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--fg-1); background: var(--bg-2); border-radius: var(--r-3); overflow-x: auto;">TypeError: Cannot read property 'foo' of undefined
  at fetchOrders (orders.ts:42:18)
  at handleSubmit (form.ts:18:7)
  at Object.click (button.ts:7:23)
  at HTMLButtonElement.&lt;anonymous&gt; (event.ts:14:9)</pre>
      </template>
      <template #panel-uploader>
        <CfDropzone />
      </template>
      <template #panel-safemode>
        <CfBanner tone="warning" title="进入安全模式将禁用所有插件" description="只保留核心组件，便于排查冲突。" />
        <div style="margin-top: 12px;">
          <CfButton variant="secondary">进入安全模式</CfButton>
        </div>
      </template>
    </CfCrashPane>
  </div>
</template>

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

export default function Demo() {
  return (
    <>
      <CfCrashPane slots={{...}} />
    </>
  );
}

API

属性	类型	默认值	说明
`modelValue` / `value`	`string`	第一个 tab id	活动 tab
`tabs`	`TemplatePaneTab[]`	预设	自定义 tab 列表
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

预设的 tab id 列表导出为 PROTOCOL_TABS / NETWORK_TABS / SQL_TABS 等常量，可在自定义 tabs 时直接拿来用。

模版组件本质是 CfTabs 的语义薄壳。如果你不需要一组预定义 tab，直接用 CfTabs 即可。