feat: search

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

components/search.vue

@@ -0,0 +1,94 @@
+<template>
+  <Button variant="outline" class="md:w-48 justify-start gap-2" @click="open = !open">
+    <Icon name="lucide:search" />
+    <span class="hidden md:block">
+      搜索...
+    </span>
+  </Button>
+
+  <Dialog v-model:open="open">
+    <DialogContent class="p-0">
+      <VisuallyHidden as-child>
+        <DialogTitle />
+      </VisuallyHidden>
+      <VisuallyHidden as-child>
+        <DialogDescription aria-describedby="undefined" />
+      </VisuallyHidden>
+      <Command v-model:search-term="input" class="h-svh sm:h-[350px]">
+        <CommandInput placeholder="搜索指南..." />
+        <CommandList>
+          <template v-for="post in processedListData" :key="post.id">
+            <CardHeader>
+              <CardTitle class="text-lg">
+                {{ categoryMap.find(x => x.value === post.primaryCategory)?.name }}
+                <Icon name="lucide:chevron-right" class="mb-1.5" />
+                {{ categoryMap.find(x => x.value === post.primaryCategory)?.secondary.find(x => x.value === post.secondaryCategory)?.name }}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <TiptapViewer :content="post.content" />
+            </CardContent>
+            <CommandSeparator />
+          </template>
+        </CommandList>
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { generateHTML } from '@tiptap/html';
+import { useFuse } from '@vueuse/integrations/useFuse';
+import { VisuallyHidden } from 'radix-vue';
+import { tipTapExtensions } from './tiptap/extensions';
+import { categoryMap } from '~/constants';
+
+const { $api } = useNuxtApp();
+
+const open = ref(false);
+
+const { Meta_K, Ctrl_K } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.key === 'k' && (e.metaKey || e.ctrlKey))
+      e.preventDefault();
+  },
+});
+
+watch([Meta_K, Ctrl_K], (v) => {
+  if (v[0] || v[1])
+    open.value = true;
+});
+
+const input = ref('');
+
+const { data: list } = await $api.guideList.useQuery({});
+
+const preprocessedList = computed(() => list.value?.map((x) => {
+  const { content, ...rest } = x;
+  let json = {};
+  try {
+    json = JSON.parse(content);
+  } catch {}
+  const html = generateHTML(json, tipTapExtensions);
+
+  return {
+    content,
+    searchPrompt: html.replaceAll(/<([^>]+)>/g, '').replaceAll(' ', ''),
+    ...rest,
+  };
+}));
+
+const fuse = useFuse(input, ref(preprocessedList.value ?? []), {
+  fuseOptions: {
+    keys: ['searchPrompt'],
+    shouldSort: true,
+  },
+  matchAllWhenSearchEmpty: true,
+});
+
+const processedListData = computed(
+  () => fuse.results.value
+    .map(e => e.item),
+);
+</script>

components/ui/command/Command.vue

@@ -0,0 +1,30 @@
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ComboboxRoot>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue';
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: '',
+});
+
+const emits = defineEmits<ComboboxRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>

components/ui/command/CommandDialog.vue

@@ -0,0 +1,21 @@
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { useForwardPropsEmits } from 'radix-vue';
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
+import Command from './Command.vue';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>

components/ui/command/CommandEmpty.vue

@@ -0,0 +1,20 @@
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import type { ComboboxEmptyProps } from 'radix-vue';
+import { ComboboxEmpty } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>

components/ui/command/CommandGroup.vue

@@ -0,0 +1,29 @@
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import type { ComboboxGroupProps } from 'radix-vue';
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class'];
+  heading?: string;
+}>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>

components/ui/command/CommandInput.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      auto-focus
+      :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import { MagnifyingGlassIcon } from '@radix-icons/vue';
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>

components/ui/command/CommandItem.vue

@@ -0,0 +1,26 @@
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue';
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<ComboboxItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>

components/ui/command/CommandList.vue

@@ -0,0 +1,27 @@
+<template>
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue';
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  dismissable: false,
+});
+const emits = defineEmits<ComboboxContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>

components/ui/command/CommandSeparator.vue

@@ -0,0 +1,23 @@
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import type { ComboboxSeparatorProps } from 'radix-vue';
+import { ComboboxSeparator } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>

components/ui/command/CommandShortcut.vue

@@ -0,0 +1,14 @@
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>

components/ui/command/index.ts

@@ -0,0 +1,9 @@
+export { default as Command } from './Command.vue';
+export { default as CommandDialog } from './CommandDialog.vue';
+export { default as CommandEmpty } from './CommandEmpty.vue';
+export { default as CommandGroup } from './CommandGroup.vue';
+export { default as CommandInput } from './CommandInput.vue';
+export { default as CommandItem } from './CommandItem.vue';
+export { default as CommandList } from './CommandList.vue';
+export { default as CommandSeparator } from './CommandSeparator.vue';
+export { default as CommandShortcut } from './CommandShortcut.vue';

components/ui/dialog/Dialog.vue

@@ -0,0 +1,14 @@
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
+
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>

components/ui/dialog/DialogClose.vue

@@ -0,0 +1,11 @@
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
+
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'radix-vue';
+
+const props = defineProps<DialogCloseProps>();
+</script>