CommandPalette (命令面板)

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { KunCommandGroup, KunCommandItem } from '@kungal/ui-vue'

const open = ref(false)
const query = ref('')
const picked = ref('')

// Static commands. You compute the shown results from `query` — here a simple
// label filter, grouped by section. (Real apps plug in their own scoring.)
const COMMANDS: (KunCommandItem & { section: string })[] = [
  { value: 'home', label: '首页', section: '导航', icon: 'lucide:home' },
  { value: 'docs', label: '文档', section: '导航', icon: 'lucide:book-open' },
  { value: 'settings', label: '设置', section: '导航', icon: 'lucide:settings' },
  { value: 'new-file', label: '新建文件', section: '操作', icon: 'lucide:file-plus' },
  { value: 'copy-link', label: '复制链接', section: '操作', icon: 'lucide:link' },
  { value: 'delete', label: '删除', section: '操作', icon: 'lucide:trash-2' },
]
const groups = computed<KunCommandGroup[]>(() => {
  const q = query.value.trim().toLowerCase()
  const match = COMMANDS.filter((c) => !q || c.label.toLowerCase().includes(q))
  return ['导航', '操作']
    .map((s) => ({ label: s, items: match.filter((c) => c.section === s) }))
    .filter((g) => g.items.length)
})
</script>

<template>
  <div class="flex items-center gap-3">
    <!-- `:shortcut="false"` here only because this page already has a ⌘K palette
         (the header search). In a real app keep the default and open with ⌘K. -->
    <KunCommandPalette
      v-model:open="open"
      v-model:query="query"
      :items="groups"
      :shortcut="false"
      placeholder="输入命令…"
      @select="(i: KunCommandItem) => (picked = String(i.value))"
    >
      <template #trigger="{ open }">
        <KunButton variant="bordered" @click="open">命令面板</KunButton>
      </template>
    </KunCommandPalette>
    <span class="text-default-500 text-sm">选中:{{ picked || '—' }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { KunCommandItem } from '@kungal/ui-vue'

const open = ref(false)
const query = ref('')
const picked = ref('')
const items = ref<KunCommandItem[]>([])
const loading = ref(false)

// Pretend remote data — filter + delay to fake a network request.
const DB: KunCommandItem[] = [
  { value: 'tokyo', label: '東京 Tokyo', description: 'Japan · Kantō', icon: 'lucide:map-pin' },
  { value: 'osaka', label: '大阪 Osaka', description: 'Japan · Kansai', icon: 'lucide:map-pin' },
  { value: 'kyoto', label: '京都 Kyoto', description: 'Japan · Kansai', icon: 'lucide:map-pin' },
  { value: 'sapporo', label: '札幌 Sapporo', description: 'Japan · Hokkaidō', icon: 'lucide:map-pin' },
]

// A monotonic id so a slow response can't overwrite a newer query.
let reqId = 0
watch(query, async (q) => {
  const term = q.trim().toLowerCase()
  if (!term) {
    items.value = []
    loading.value = false
    return
  }
  const mine = ++reqId
  loading.value = true
  await new Promise((r) => setTimeout(r, 600)) // fake latency
  if (mine !== reqId) return // superseded
  items.value = DB.filter((c) => c.label.toLowerCase().includes(term))
  loading.value = false
})
</script>

<template>
  <div class="flex items-center gap-3">
    <KunCommandPalette
      v-model:open="open"
      v-model:query="query"
      :items="items"
      :loading="loading"
      :shortcut="false"
      placeholder="搜索城市…(远程)"
      empty-text="输入城市名开始搜索"
      @select="(i: KunCommandItem) => (picked = String(i.value))"
    >
      <template #trigger="{ open }">
        <KunButton variant="bordered" @click="open">远程搜索</KunButton>
      </template>
    </KunCommandPalette>
    <span class="text-default-500 text-sm">选中:{{ picked || '—' }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { KunCommandItem } from '@kungal/ui-vue'

const open = ref(false)
const query = ref('')
const last = ref('')

const PAGES: KunCommandItem[] = [
  {
    value: '/components/button',
    label: 'KunButton',
    section: '组件',
    description: '按钮:七种变体、五档尺寸、加载态与图标位',
    icon: 'lucide:book-open',
  },
  {
    value: '/components/modal',
    label: 'KunModal',
    section: '组件',
    description: '模态框:焦点陷阱、滚动锁、size 决定宽度',
    icon: 'lucide:book-open',
  },
  {
    value: '/guide/install',
    label: '安装与接入',
    section: '指南',
    description: 'Tailwind v4 @source 配置、Nuxt layer、按需引入',
    icon: 'lucide:file-plus',
  },
]

const items = computed(() => {
  const q = query.value.trim().toLowerCase()
  if (!q) return PAGES
  return PAGES.filter(
    (p) =>
      p.label.toLowerCase().includes(q) ||
      (p.description ?? '').toLowerCase().includes(q)
  )
})

// Fires only when Enter has nothing to select — no results, or every result
// disabled. Here it stands in for "go to the full search page".
const onSubmit = (q: string) => {
  last.value = q
  open.value = false
}
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <KunCommandPalette
      v-model:open="open"
      v-model:query="query"
      :items="items"
      :shortcut="false"
      placeholder="搜索文档…"
      @select="(i: KunCommandItem) => (last = String(i.value))"
      @submit="onSubmit"
    >
      <template #trigger="{ open }">
        <KunButton variant="bordered" @click="open">搜索文档</KunButton>
      </template>

      <!-- Give the fallback an affordance: the shell only emits, the wording is
           yours. Try a query that matches nothing, then press Enter. -->
      <template #no-result="{ query: q }">
        <div class="px-3 py-6 text-center">
          <p class="text-default-500 text-sm">没有匹配的页面</p>
          <p class="text-default-400 mt-1.5 text-xs">
            按 <kbd class="text-default-600">↵</kbd> 全站搜索「{{ q }}」
          </p>
        </div>
      </template>
    </KunCommandPalette>

    <span class="text-default-500 text-sm">最近一次:{{ last || '—' }}</span>
  </div>
</template>