From b2ed41b562effd18071b40f3d86e959f4d2dc0c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=85=E5=87=A4?= <qingf622@outlook.com>
Date: Mon, 14 Sep 2026 18:57:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E8=A1=A5=E9=BD=90=E7=B4=A7?=
 =?UTF-8?q?=E5=87=91=E9=80=89=E6=8B=A9=E5=BC=B9=E7=AA=97=E4=B8=8E=E7=94=A8?=
 =?UTF-8?q?=E9=87=8F=E8=8F=9C=E5=8D=95=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/command/CommandDialog.vue      | 40 ++++++++++++++-----
 .../dropdown-menu/DropdownMenuSubContent.vue  | 10 +++--
 .../dropdown-menu/DropdownMenuSummary.vue     | 31 ++++++++++++++
 src/components/dropdown-menu/index.ts         |  1 +
 src/lib/useSubmenuAlignment.ts                | 14 ++++++-
 5 files changed, 83 insertions(+), 13 deletions(-)
 create mode 100644 src/components/dropdown-menu/DropdownMenuSummary.vue

diff --git a/src/components/command/CommandDialog.vue b/src/components/command/CommandDialog.vue
index 026a1f6..54d6192 100644
--- a/src/components/command/CommandDialog.vue
+++ b/src/components/command/CommandDialog.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
 import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { reactiveOmit } from '@vueuse/core'
 import { useForwardPropsEmits } from 'reka-ui'
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '#/components/dialog'
+import { Dialog, DialogCloseButton, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '#/components/dialog'
 import Command from './Command.vue'
 
 const props = withDefaults(defineProps<DialogRootProps & {
+  /** A compact, titled chooser; palette callers keep their search-first layout. */
+  variant?: 'palette' | 'picker'
   title?: string
   description?: string
 }>(), {
+  variant: 'palette',
   title: 'Command Palette',
   description: 'Search for a command to run...',
 })
 const emits = defineEmits<DialogRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(reactiveOmit(props, 'variant', 'title', 'description'), emits)
 </script>
 
 <template>
@@ -30,16 +34,19 @@ const forwarded = useForwardPropsEmits(props, emits)
       menu-shell, card vs popover, shadow-2xl vs dropdown). The backdrop scrim AND the
       open/close motion (100ms fade + 2% zoom) are inherited from DialogContent itself —
       we ONLY strip chrome here, so the palette shares the one modal scrim + motion
-      language instead of re-declaring its own. The close X is dropped
-      (show-close-button=false): a palette dismisses on Esc / outside-click / selection,
-      and a corner X both clashed with the search row and skipped the icon-button
-      contract. Width is held to a palette-friendly max-w-md.
+      language instead of re-declaring its own. A palette dismisses on Esc,
+      outside-click or selection. The compact picker instead owns a visible
+      title and the shared close button, with one narrower width rung.
     -->
     <DialogContent
       :show-close-button="false"
-      class="gap-0 border-0 bg-transparent p-0 shadow-none rounded-none sm:max-w-md"
+      class="gap-0 border-0 bg-transparent p-0 shadow-none rounded-none"
+      :class="variant === 'picker' ? 'sm:max-w-sm' : 'sm:max-w-md'"
     >
-      <DialogHeader class="sr-only">
+      <DialogHeader
+        v-if="variant === 'palette'"
+        class="sr-only"
+      >
         <DialogTitle>{{ title }}</DialogTitle>
         <DialogDescription>{{ description }}</DialogDescription>
       </DialogHeader>
@@ -49,7 +56,22 @@ const forwarded = useForwardPropsEmits(props, emits)
            hairline in dark mode, and NONE in light mode — a white palette already
            separates from the dark scrim by luminance, so a dark hairline there would
            just muddy the edge instead of sharpening it. -->
-      <Command class="border-[color:var(--border-menu-elevated)] shadow-[var(--shadow-modal)]">
+      <Command
+        class="border-[color:var(--border-menu-elevated)] shadow-[var(--shadow-modal)]"
+        :class="variant === 'picker' ? 'gap-3 p-4 [&_[data-slot=command-group]]:p-0' : undefined"
+      >
+        <DialogHeader
+          v-if="variant === 'picker'"
+          class="relative min-h-8 justify-center px-3 pr-10 text-left"
+        >
+          <DialogTitle class="text-control leading-5">
+            {{ title }}
+          </DialogTitle>
+          <DialogDescription v-if="description">
+            {{ description }}
+          </DialogDescription>
+          <DialogCloseButton class="top-0 right-0" />
+        </DialogHeader>
         <slot v-bind="slotProps" />
       </Command>
     </DialogContent>
diff --git a/src/components/dropdown-menu/DropdownMenuSubContent.vue b/src/components/dropdown-menu/DropdownMenuSubContent.vue
index a52d660..f42578c 100644
--- a/src/components/dropdown-menu/DropdownMenuSubContent.vue
+++ b/src/components/dropdown-menu/DropdownMenuSubContent.vue
@@ -12,15 +12,19 @@ import MenuScrollArea from '../menu-scroll-area/MenuScrollArea.vue'
 import { useSubmenuAlignment } from '../../lib/useSubmenuAlignment'
 import { cn } from '#/lib/utils'
 
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuSubContentProps & {
+  class?: HTMLAttributes['class']
+  /** Information panels can align their top edge with the parent menu. */
+  alignment?: 'first-item' | 'parent-start'
+}>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, 'class', 'alignment')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 const menuArea = ref<InstanceType<typeof MenuScrollArea>>()
 const currentElement = computed(() => menuArea.value?.viewportElement?.closest<HTMLElement>('[data-slot="dropdown-menu-sub-content"]') ?? undefined)
-const { alignOffset, ready } = useSubmenuAlignment(currentElement)
+const { alignOffset, ready } = useSubmenuAlignment(currentElement, () => props.alignment ?? 'first-item')
 // Start the entrance on a fresh frame after mounting and placement have settled.
 // Otherwise a long list can consume the animation before its first visible paint.
 const motionReady = ref(false)
diff --git a/src/components/dropdown-menu/DropdownMenuSummary.vue b/src/components/dropdown-menu/DropdownMenuSummary.vue
new file mode 100644
index 0000000..0f3cd45
--- /dev/null
+++ b/src/components/dropdown-menu/DropdownMenuSummary.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+// Non-interactive menu information uses the same inset and title size as rows.
+// Keep the value beside the title and the description beneath it; callers supply
+// content rather than rebuilding this hierarchy with a group label.
+defineProps<{
+  title: string
+  value?: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="dropdown-menu-summary"
+    class="cursor-default select-none px-3 py-2"
+  >
+    <div class="flex items-baseline justify-between gap-4 text-control font-normal text-popover-foreground">
+      <span class="min-w-0">{{ title }}</span>
+      <span
+        v-if="value"
+        class="shrink-0"
+      >{{ value }}</span>
+    </div>
+    <p
+      v-if="description"
+      class="mt-0.5 text-body text-muted-foreground"
+    >
+      {{ description }}
+    </p>
+  </div>
+</template>
diff --git a/src/components/dropdown-menu/index.ts b/src/components/dropdown-menu/index.ts
index 7565776..eb6b38d 100644
--- a/src/components/dropdown-menu/index.ts
+++ b/src/components/dropdown-menu/index.ts
@@ -4,6 +4,7 @@ export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.
 export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
 export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
 export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuSummary } from './DropdownMenuSummary.vue'
 export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
 export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
 export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
diff --git a/src/lib/useSubmenuAlignment.ts b/src/lib/useSubmenuAlignment.ts
index 13b5bb5..7ee9f19 100644
--- a/src/lib/useSubmenuAlignment.ts
+++ b/src/lib/useSubmenuAlignment.ts
@@ -1,7 +1,10 @@
 import { ref, watchPostEffect, type Ref } from 'vue'
 
 /** Align the first row with its trigger, leaving collision handling to Reka. */
-export function useSubmenuAlignment(content: Readonly<Ref<HTMLElement | undefined>>) {
+export function useSubmenuAlignment(
+  content: Readonly<Ref<HTMLElement | undefined>>,
+  alignment: () => 'first-item' | 'parent-start' = () => 'first-item',
+) {
   const alignOffset = ref(0)
   const ready = ref(false)
   watchPostEffect((cleanup) => {
@@ -10,7 +13,16 @@ export function useSubmenuAlignment(content: Readonly<Ref<HTMLElement | undefine
     if (!element) return
     const trigger = document.getElementById(element.getAttribute('aria-labelledby') ?? '')
     if (!trigger) { ready.value = true; return }
+    const mode = alignment()
     const measure = () => {
+      if (mode === 'parent-start') {
+        const parent = trigger.closest<HTMLElement>('[role="menu"]')
+        alignOffset.value = parent
+          ? parent.getBoundingClientRect().top - trigger.getBoundingClientRect().top
+          : 0
+        ready.value = true
+        return
+      }
       const first = element.querySelector<HTMLElement>('[role^="menuitem"]')
       if (first && element.offsetWidth) {
         const bounds = element.getBoundingClientRect()