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

FloatingInspector 浮动检查器

角落锚定的可折叠检查器面板，常用于性能监视、调试信息浮窗。

基础用法

锚定到屏幕四角，offset 控制与边缘距离。点击头部 caret 折叠 / 展开（保持标题可见）。

背景视口

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfFloatingInspector, CfButton } from '@chufix-design/vue';
const open = ref(false);
</script>
<template>
  <div class="demo-row">
    <CfButton @click="open = !open">{{ open ? '关闭' : '打开' }} 检查器</CfButton>
    <CfFloatingInspector
      :open="open"
      placement="bottom-right"
      title="Inspector"
      @update:open="(v) => open = v"
    >
      <ul style="margin: 0; padding-left: 16px; font-size: 12px; color: var(--fg-2);">
        <li>FPS: 60</li>
        <li>Render: 4.2ms</li>
        <li>Paint: 1.8ms</li>
        <li>Layout: 0.4ms</li>
      </ul>
    </CfFloatingInspector>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfFloatingInspector, CfButton } from '@chufix-design/vue';
const open = ref(false);
</script>
<template>
  <div class="demo-row">
    <CfButton @click="open = !open">{{ open ? '关闭' : '打开' }} 检查器</CfButton>
    <CfFloatingInspector
      :open="open"
      placement="bottom-right"
      title="Inspector"
      @update:open="(v) => open = v"
    >
      <ul style="margin: 0; padding-left: 16px; font-size: 12px; color: var(--fg-2);">
        <li>FPS: 60</li>
        <li>Render: 4.2ms</li>
        <li>Paint: 1.8ms</li>
        <li>Layout: 0.4ms</li>
      </ul>
    </CfFloatingInspector>
  </div>
</template>

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

export default function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <div className="demo-row">
          <CfButton onClick={() => setOpen(!open)}>{open ? '关闭' : '打开'} 检查器</CfButton>
          <CfFloatingInspector open={open} placement="bottom-right" title="Inspector" onOpenChange={setOpen} >
            <ul style={{ margin: 0, paddingLeft: 16, fontSize: 12, color: "var(--fg-2)" }}>
              <li>FPS: 60</li>
              <li>Render: 4.2ms</li>
              <li>Paint: 1.8ms</li>
              <li>Layout: 0.4ms</li>
            </ul>
          </CfFloatingInspector>
        </div>
    </>
  );
}

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

export default function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <div className="demo-row">
          <CfButton onClick={() => setOpen(!open)}>{open ? '关闭' : '打开'} 检查器</CfButton>
          <CfFloatingInspector open={open} placement="bottom-right" title="Inspector" onOpenChange={setOpen} >
            <ul style={{ margin: 0, paddingLeft: 16, fontSize: 12, color: "var(--fg-2)" }}>
              <li>FPS: 60</li>
              <li>Render: 4.2ms</li>
              <li>Paint: 1.8ms</li>
              <li>Layout: 0.4ms</li>
            </ul>
          </CfFloatingInspector>
        </div>
    </>
  );
}

4 个角落 + 关闭

4 种 placement 切换效果；点击”关闭”演示 onOpenChange。

背景视口

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfFloatingInspector, CfButton } from '@chufix-design/vue';
import type { InspectorPlacement } from '@chufix-design/vue';
const open = ref(true);
const placement = ref<InspectorPlacement>('bottom-right');
const placements: InspectorPlacement[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
</script>
<template>
  <div class="demo-row" style="flex-wrap: wrap;">
    <CfButton v-for="p in placements" :key="p" size="sm" @click="placement = p; open = true">{{ p }}</CfButton>
    <CfButton variant="tertiary" size="sm" @click="open = false">关闭</CfButton>
    <CfFloatingInspector
      :open="open"
      :placement="placement"
      :title="placement"
      @update:open="(v) => open = v"
    >
      <ul style="margin: 0; padding-left: 16px; font-size: 12px; color: var(--fg-2);">
        <li>FPS: 60</li>
        <li>Render: 4.2ms</li>
        <li>Paint: 1.8ms</li>
        <li>Layout: 0.4ms</li>
      </ul>
    </CfFloatingInspector>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfFloatingInspector, CfButton } from '@chufix-design/vue';
const open = ref(true);
const placement = ref<InspectorPlacement>('bottom-right');
const placements= ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
</script>
<template>
  <div class="demo-row" style="flex-wrap: wrap;">
    <CfButton v-for="p in placements" :key="p" size="sm" @click="placement = p; open = true">{{ p }}</CfButton>
    <CfButton variant="tertiary" size="sm" @click="open = false">关闭</CfButton>
    <CfFloatingInspector
      :open="open"
      :placement="placement"
      :title="placement"
      @update:open="(v) => open = v"
    >
      <ul style="margin: 0; padding-left: 16px; font-size: 12px; color: var(--fg-2);">
        <li>FPS: 60</li>
        <li>Render: 4.2ms</li>
        <li>Paint: 1.8ms</li>
        <li>Layout: 0.4ms</li>
      </ul>
    </CfFloatingInspector>
  </div>
</template>

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

export default function Demo() {
  const [open, setOpen] = useState(true);
  const [open, setOpen] = useState(true);
  const placement = 'bottom-right';
  return (
    <>
      <CfFloatingInspector open={open} onOpenChange={setOpen} placement="top-right" />
    </>
  );
}

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

export default function Demo() {
  const [open, setOpen] = useState(true);
  const [open, setOpen] = useState(true);
  const placement = 'bottom-right';
  return (
    <>
      <CfFloatingInspector open={open} onOpenChange={setOpen} placement="top-right" />
    </>
  );
}

API

属性	类型	默认值	说明
`open`	`boolean`	`true`
`collapsed`	`boolean`	`false`	折叠状态
`placement`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`'bottom-right'`
`title`	`string`	—
`width`	`number \| string`	`320`
`offset`	`number`	`24`	距视口边缘 px
`closable`	`boolean`	`true`