Preview Updated 2026-05-10

Global search

Full-screen application-level search overlay with category chips, grouped lists, and path / badge / shortcut display.

Basic usage

Differences from CommandPalette: this component is a full-screen overlay (paddingTop 8vh) with built-in category filter chips and a three-column title/path/badge layout. Use it for “application spotlight” use cases; the command palette is for “Cmd+K command search”.

背景

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfGlobalSearch, CfButton } from '@chufix-design/vue';
const open = ref(false);
const results = [
  { id: '1', title: '/v1/orders', description: 'GET 列表所有订单', category: 'API', badge: 'GET', path: 'payments / orders' },
  { id: '2', title: '/v1/orders/{id}', description: 'PUT 更新订单', category: 'API', badge: 'PUT', path: 'payments / orders' },
  { id: '3', title: 'jane.l@example.com', description: 'Backend · Payments', category: '人员', path: 'org / payments' },
  { id: '4', title: 'preview.protoforge.io', description: '上次部署 12m 前', category: '环境', path: 'envs / preview' },
  { id: '5', title: 'Reset onboarding', description: '清空所有引导提示', category: '设置', path: 'settings / onboarding' },
  { id: '6', title: 'Export collection', description: '导出为 OpenAPI 3.1', category: '操作', shortcut: '⌘E' },
];
</script>
<template>
  <div class="demo-row">
    <CfButton @click="open = true">⌘⇧K 打开</CfButton>
    <CfGlobalSearch
      :open="open"
      :results="results"
      @update:open="(v) => open = v"
      @select="(id) => alert(`Selected: ${id}`)"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfGlobalSearch, CfButton } from '@chufix-design/vue';
const open = ref(false);
const results = [
  { id: '1', title: '/v1/orders', description: 'GET 列表所有订单', category: 'API', badge: 'GET', path: 'payments / orders' },
  { id: '2', title: '/v1/orders/{id}', description: 'PUT 更新订单', category: 'API', badge: 'PUT', path: 'payments / orders' },
  { id: '3', title: 'jane.l@example.com', description: 'Backend · Payments', category: '人员', path: 'org / payments' },
  { id: '4', title: 'preview.protoforge.io', description: '上次部署 12m 前', category: '环境', path: 'envs / preview' },
  { id: '5', title: 'Reset onboarding', description: '清空所有引导提示', category: '设置', path: 'settings / onboarding' },
  { id: '6', title: 'Export collection', description: '导出为 OpenAPI 3.1', category: '操作', shortcut: '⌘E' },
];
</script>
<template>
  <div class="demo-row">
    <CfButton @click="open = true">⌘⇧K 打开</CfButton>
    <CfGlobalSearch
      :open="open"
      :results="results"
      @update:open="(v) => open = v"
      @select="(id) => alert(`Selected: ${id}`)"
    />
  </div>
</template>

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

export default function Demo() {
  const [open, setOpen] = useState(false);
  const results = [
    { id: '1', title: '/v1/orders', description: 'GET 列表所有订单', category: 'API', badge: 'GET', path: 'payments / orders' },
    { id: '2', title: '/v1/orders/{id}', description: 'PUT 更新订单', category: 'API', badge: 'PUT', path: 'payments / orders' },
    { id: '3', title: 'jane.l@example.com', description: 'Backend · Payments', category: '人员', path: 'org / payments' },
    { id: '4', title: 'preview.protoforge.io', description: '上次部署 12m 前', category: '环境', path: 'envs / preview' },
    { id: '5', title: 'Reset onboarding', description: '清空所有引导提示', category: '设置', path: 'settings / onboarding' },
    { id: '6', title: 'Export collection', description: '导出为 OpenAPI 3.1', category: '操作', shortcut: '⌘E' },
  ];
  return (
    <>
      <CfGlobalSearch
      open={open}
      onOpenChange={setOpen}
      results={results}
      onSelect={onSelect}
      />
    </>
  );
}

18 results across 5 categories. Click a top chip to filter; the chip row is hidden automatically when there is at most one category.

背景

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfGlobalSearch, CfButton } from '@chufix-design/vue';
const open = ref(false);
const results = Array.from({ length: 18 }, (_, i) => ({
  id: String(i),
  title: ['/v1/orders', '/v1/login', 'jane.l', 'preview env', 'reset onboarding', 'export collection'][i % 6],
  description: 'desc ' + i,
  category: ['API', '人员', '环境', '设置', '操作'][i % 5],
  badge: ['GET', 'POST', '', '', 'env'][i % 5],
  path: 'path/' + i,
  shortcut: i % 4 === 0 ? '⌘E' : undefined,
}));
</script>
<template>
  <div class="demo-row">
    <CfButton @click="open = true">类目过滤搜索</CfButton>
    <CfGlobalSearch
      :open="open"
      :results="results"
      @update:open="(v) => open = v"
      @select="(id) => alert(`Selected: ${id}`)"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfGlobalSearch, CfButton } from '@chufix-design/vue';
const open = ref(false);
const results = Array.from({ length: 18 }, (_, i) => ({
  id: String(i),
  title: ['/v1/orders', '/v1/login', 'jane.l', 'preview env', 'reset onboarding', 'export collection'][i % 6],
  description: 'desc ' + i,
  category: ['API', '人员', '环境', '设置', '操作'][i % 5],
  badge: ['GET', 'POST', '', '', 'env'][i % 5],
  path: 'path/' + i,
  shortcut: i % 4 === 0 ? '⌘E' : undefined,
}));
</script>
<template>
  <div class="demo-row">
    <CfButton @click="open = true">类目过滤搜索</CfButton>
    <CfGlobalSearch
      :open="open"
      :results="results"
      @update:open="(v) => open = v"
      @select="(id) => alert(`Selected: ${id}`)"
    />
  </div>
</template>

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

export default function Demo() {
  return (
    <>
      <CfGlobalSearch ... showCategories />
    </>
  );
}

API

Prop	Type	Default	Description
`open` / `v-model:open`	`boolean`	—
`results`	`GlobalSearchResult[]`	—	`{ id, title, description?, category, badge?, path?, shortcut?, keywords?, disabled? }`
`placeholder` / `emptyText`
`showCategories`	`boolean`	`true`	Top category chips
`closeOnSelect`	`boolean`	`true`

Keyboard: up/down navigate, enter select, Esc close.

Global search

Basic usage

Category filter

API

Global search · Discussion