仪表盘搜索 - Nuxt UI Pro

用法

使用 groups 道具来提供命令，就像普通的命令面板一样。

您可以通过按下 K 或使用仪表盘搜索按钮组件来打开命令面板。您也可以使用 const { toggleDashboardSearch } = useUIState() 手动执行此操作。

您通常会在您的 app.vue 或布局中使用此组件

layouts/default.vue

<script setup lang="ts">
const links = [{
  id: 'home',
  label: 'Home',
  icon: 'i-heroicons-home',
  to: '/',
  tooltip: {
    text: 'Home',
    shortcuts: ['G', 'H']
  }
}, {
  id: 'inbox',
  label: 'Inbox',
  icon: 'i-heroicons-inbox',
  to: '/inbox',
  badge: '4',
  tooltip: {
    text: 'Inbox',
    shortcuts: ['G', 'I']
  }
}, {
  id: 'users',
  label: 'Users',
  icon: 'i-heroicons-user-group',
  to: '/users',
  tooltip: {
    text: 'Users',
    shortcuts: ['G', 'U']
  }
}, {
  id: 'settings',
  label: 'Settings',
  to: '/settings',
  icon: 'i-heroicons-cog-8-tooth',
  children: [{
    label: 'General',
    to: '/settings',
    exact: true
  }, {
    label: 'Members',
    to: '/settings/members'
  }, {
    label: 'Notifications',
    to: '/settings/notifications'
  }],
  tooltip: {
    text: 'Settings',
    shortcuts: ['G', 'S']
  }
}]

const groups = [{
  key: 'links',
  label: 'Go to',
  commands: links.map(link => ({ ...link, shortcuts: link.tooltip?.shortcuts }))
}]
</script>

<template>
  <UDashboardLayout>
    <UDashboardPanel>
      <UDashboardNavbar />

      <UDashboardSidebar>
        <UDashboardSidebarLinks :links="links" />
      </UDashboardSidebar>
    </UDashboardPanel>

    <slot />

    <ClientOnly>
      <LazyUDashboardSearch :groups="groups" />
    </ClientOnly>
  </UDashboardLayout>
</template>

建议将 DashboardSearch 组件包装在 ClientOnly 组件中，这样它就不会在服务器上呈现。

颜色模式

默认情况下，将向命令面板添加一组命令，以便您可以在亮色模式和暗色模式之间切换。这仅在 colorMode 未在特定页面强制的情况下才会生效，可以通过 definePageMeta 来实现

pages/index.vue

<script setup lang="ts">
definePageMeta({
  colorMode: 'dark'
})
</script>

您还可以通过设置 hide-color-mode 道具来手动禁用此行为：<UDashboardSearch hide-color-mode />。当您在 nuxt.config.ts 中为整个应用程序强制颜色模式时，这会非常有用

nuxt.config.ts

export default defineNuxtConfig({
  colorMode: {
    preference: 'light'
  }
})

道具

any

{}

groups

Group[]

[]

fuse

UseFuseOptions<Command>

{}

modelValue

boolean

undefined

hideColorMode

boolean

false

配置

{
  padding: 'p-0 sm:p-4',
  rounded: 'rounded-none sm:rounded-lg',
  width: 'sm:max-w-3xl',
  height: 'h-dvh sm:h-[28rem]',
  commandPalette: {
    input: {
      height: 'h-[--header-height] sm:h-12',
      icon: {
        size: 'h-5 w-5',
        padding: 'ps-11'
      }
    },
    group: {
      command: {
        prefix: `!text-foreground after:content-['_>']`
      }
    },
    container: 'scroll-py-10'
  },
  fileIcon: {
    name: 'i-heroicons-document-text'
  },
  default: {
    closeButton: {
      icon: 'i-heroicons-x-mark-20-solid',
      color: 'gray',
      variant: 'ghost',
      size: 'sm'
    }
  }
}

仪表盘面板手柄

在可调整大小的仪表盘面板中使用的手柄。

仪表盘搜索按钮

用于打开仪表盘搜索模态框的预先设置的按钮。