完善图片视频添加预览功能

src/components/MarkdownEditor.vue

@@ -13,7 +13,7 @@ import remarkGfm from "remark-gfm";
 import remarkRehype from "remark-rehype";
 import rehypeStringify from "rehype-stringify";
 import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
-import { convertFileSrc, isTauri } from "@tauri-apps/api/core";
+import { convertFileSrc, invoke, isTauri } from "@tauri-apps/api/core";
 
 type DocumentMode = "preview" | "edit" | "mixed";
 const IMAGE_EXTENSIONS = new Set(["png", "jpg", "jpeg", "gif", "webp", "avif"]);
@@ -97,7 +97,16 @@ function getCurrentFileDirectory() {
   return props.filePath.slice(0, separatorIndex);
 }
 
+function isWindowsAbsolutePath(path: string) {
+  return /^[A-Za-z]:[\\/]/.test(path);
+}
+
+function isUncPath(path: string) {
+  return path.startsWith("\\\\");
+}
+
 function isExternalUrl(url: string) {
+  if (isWindowsAbsolutePath(url) || isUncPath(url)) return false;
   return /^[a-z][a-z\d+.-]*:/i.test(url) || url.startsWith("//") || url.startsWith("#");
 }
 
@@ -105,7 +114,7 @@ function normalizeLocalMediaPath(url: string) {
   const trimmed = url.trim();
   if (!trimmed || isExternalUrl(trimmed)) return trimmed;
 
-  if (/^[A-Za-z]:[\\/]/.test(trimmed) || trimmed.startsWith("\\\\")) {
+  if (isWindowsAbsolutePath(trimmed) || isUncPath(trimmed)) {
     return trimmed;
   }
 
@@ -120,8 +129,8 @@ function normalizeLocalMediaPath(url: string) {
 function toAssetSrc(path: string) {
   if (isExternalUrl(path)) return path;
   if (isTauri()) return convertFileSrc(path);
-  if (/^[A-Za-z]:[\\/]/.test(path)) return `file:///${path.replace(/\\/g, "/")}`;
-  if (path.startsWith("\\\\")) return `file:${path.replace(/\\/g, "/")}`;
+  if (isWindowsAbsolutePath(path)) return `file:///${path.replace(/\\/g, "/")}`;
+  if (isUncPath(path)) return `file:${path.replace(/\\/g, "/")}`;
 
   return path;
 }
@@ -679,6 +688,176 @@ onBeforeUnmount(() => {
   }
 });
 
+// ── Paste image / file handling ─────────────────────────────────
+
+function blobToBase64(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result as string;
+      // Strip the "data:xxx;base64," prefix
+      resolve(result.split(',')[1] || '');
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(blob);
+  });
+}
+
+function generateMediaFilename(ext: string): string {
+  const now = new Date();
+  const pad = (n: number) => String(n).padStart(2, '0');
+  const ts = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}_${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
+  const suffix = Math.random().toString(36).slice(2, 6);
+  return `${ts}_${suffix}.${ext}`;
+}
+
+function imageExtFromMime(mime: string): string {
+  const map: Record<string, string> = {
+    'image/png': 'png',
+    'image/jpeg': 'jpg',
+    'image/gif': 'gif',
+    'image/webp': 'webp',
+    'image/avif': 'avif',
+    'image/bmp': 'bmp',
+    'image/svg+xml': 'svg',
+  };
+  return map[mime] || 'png';
+}
+
+/**
+ * Core paste handler: detects images/files in clipboard, saves them to the
+ * hidden resources folder, and inserts markdown image syntax at the cursor.
+ */
+async function processPaste(
+  e: ClipboardEvent,
+  value: string,
+  selectionStart: number,
+  selectionEnd: number,
+  applyValue: (newValue: string, cursorPos: number) => void,
+) {
+  const items = e.clipboardData?.items;
+  if (!items || items.length === 0) return;
+
+  // Collect media items (images from screenshots, or files from file-manager copy)
+  const mediaItems: { item: DataTransferItem }[] = [];
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item.type.startsWith('image/') || item.type.startsWith('video/') || item.kind === 'file') {
+      mediaItems.push({ item });
+    }
+  }
+
+  if (mediaItems.length === 0) return; // No media — let default text paste happen
+
+  e.preventDefault();
+  e.stopPropagation();
+
+  if (!props.filePath) return; // No file open, nowhere to save
+
+  const dir = getCurrentFileDirectory();
+  if (!dir) return;
+
+  // Derive the hidden resources folder name from the current markdown file
+  const mdFileName = props.filePath.split(/[/\\]/).pop() || 'document';
+  const stem = mdFileName.replace(/\.md$/i, '');
+  const resourcesDir = `${dir}/.${stem}`;
+  const resourcesRelDir = `.${stem}`;
+
+  // Process each media item and build a replacement string
+  const insertParts: string[] = [];
+
+  for (const { item } of mediaItems) {
+    const file = item.getAsFile();
+    if (!file) continue;
+
+    let ext: string;
+    let blob: Blob;
+
+    if (item.type.startsWith('image/')) {
+      ext = imageExtFromMime(item.type);
+      blob = file;
+    } else if (item.type.startsWith('video/')) {
+      ext = item.type.split('/')[1] || 'mp4';
+      blob = file;
+    } else {
+      // File from file manager — derive extension from file name
+      const dot = file.name.lastIndexOf('.');
+      ext = dot >= 0 ? file.name.slice(dot + 1).toLowerCase() : 'bin';
+      blob = file;
+    }
+
+    const filename = generateMediaFilename(ext);
+    const assetPath = `${resourcesDir}/${filename}`;
+    const relativePath = `${resourcesRelDir}/${filename}`;
+
+    try {
+      const base64 = await blobToBase64(blob);
+      await invoke("save_media_file", { path: assetPath, data: base64 });
+    } catch (err) {
+      console.error("Failed to save pasted media:", err);
+      continue;
+    }
+
+    const alt = file.name || 'image';
+    // Separate multiple pasted images with a line break
+    if (insertParts.length > 0) insertParts.push('\n');
+    insertParts.push(`![${alt}](${relativePath})`);
+  }
+
+  if (insertParts.length === 0) return;
+
+  const insertText = insertParts.join('');
+  const newValue =
+    value.slice(0, selectionStart) + insertText + value.slice(selectionEnd);
+  const cursorPos = selectionStart + insertText.length;
+  applyValue(newValue, cursorPos);
+}
+
+async function onEditorPaste(e: ClipboardEvent) {
+  const ta = editorTextareaRef.value;
+  if (!ta) return;
+
+  await processPaste(
+    e,
+    props.modelValue,
+    ta.selectionStart,
+    ta.selectionEnd,
+    (newValue, cursorPos) => {
+      applyFullEditorValue(newValue);
+      void nextTick(() => {
+        const ta = editorTextareaRef.value;
+        if (ta) {
+          ta.selectionStart = ta.selectionEnd = cursorPos;
+          ta.focus();
+        }
+      });
+    },
+  );
+}
+
+async function onBlockPaste(e: ClipboardEvent) {
+  const ta = blockTextareaRef.value;
+  if (!ta) return;
+
+  await processPaste(
+    e,
+    editingSource.value,
+    ta.selectionStart,
+    ta.selectionEnd,
+    (newValue, cursorPos) => {
+      editingSource.value = newValue;
+      void nextTick(() => {
+        const ta = blockTextareaRef.value;
+        if (ta) {
+          ta.selectionStart = ta.selectionEnd = cursorPos;
+          ta.focus();
+          scheduleTextareaResize(ta);
+        }
+      });
+    },
+  );
+}
+
 defineExpose({
   flushPendingChanges,
 });
@@ -692,7 +871,7 @@ defineExpose({
     @keydown.capture="onRootKeydown"
   >
     <div
-      class="mx-auto px-8 py-8 h-full"
+      class="mx-auto px-8 py-4 h-full"
       :style="{
         maxWidth: `calc(700px * var(--editor-zoom, 1))`,
         fontSize: `calc(1rem * var(--editor-zoom, 1))`,
@@ -711,6 +890,7 @@ defineExpose({
         "
         @input="onEditorInput"
         @keydown="onEditorKeydown"
+        @paste="onEditorPaste"
       />
 
       <!-- Preview mode -->
@@ -718,7 +898,7 @@ defineExpose({
         <div v-if="renderError" class="text-red-500 text-sm">
           ⚠ Markdown 解析错误
         </div>
-        <div v-else class="markdown-preview" v-html="renderedHtml" />
+        <div v-else class="markdown-preview py-2" v-html="renderedHtml" />
       </div>
 
       <!-- Mixed mode -->
@@ -736,6 +916,7 @@ defineExpose({
           @input="onBlockInput"
           @keydown="onBlockKeydown"
           @blur="finalizeBlockEdit"
+          @paste="onBlockPaste"
         />
         <div
           v-else-if="!props.modelValue.trim()"
@@ -764,6 +945,7 @@ defineExpose({
               @input="onBlockInput"
               @keydown="onBlockKeydown"
               @blur="finalizeBlockEdit"
+              @paste="onBlockPaste"
             />
             <div
               v-else

src/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui"
+import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot
+    v-slot="slotProps"
+    data-slot="dropdown-menu"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DropdownMenuRoot>
+</template>

src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { CheckIcon } from '@lucide/vue';
+
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+      props.class,
+    )"
+  >
+    <span
+      class="absolute right-2 flex items-center justify-center pointer-events-none"
+      data-slot="dropdown-menu-checkbox-item-indicator"
+    >
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <CheckIcon />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "start",
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-translucent z-50 max-h-(--reka-dropdown-menu-content-available-height) w-(--reka-dropdown-menu-trigger-width) origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

src/components/ui/dropdown-menu/DropdownMenuGroup.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from "reka-ui"
+import { DropdownMenuGroup } from "reka-ui"
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup
+    data-slot="dropdown-menu-group"
+    v-bind="props"
+  >
+    <slot />
+  </DropdownMenuGroup>
+</template>

src/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DropdownMenuItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<DropdownMenuItemProps & {
+  class?: HTMLAttributes["class"]
+  inset?: boolean
+  variant?: "default" | "destructive"
+}>(), {
+  variant: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "inset", "variant", "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwardedProps"
+    :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', props.class)"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

src/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuLabel, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class", "inset")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    data-slot="dropdown-menu-label"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "reka-ui"
+import {
+  DropdownMenuRadioGroup,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioGroup
+    data-slot="dropdown-menu-radio-group"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>

src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { CheckIcon } from '@lucide/vue';
+
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-item"
+    v-bind="forwarded"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+      props.class,
+    )"
+  >
+    <span
+      class="absolute right-2 flex items-center justify-center pointer-events-none"
+      data-slot="dropdown-menu-radio-item-indicator"
+    >
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <CheckIcon />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>

src/components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuSeparator,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    data-slot="dropdown-menu-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
+  />
+</template>

src/components/ui/dropdown-menu/DropdownMenuShortcut.vue

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

src/components/ui/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "reka-ui"
+import {
+  DropdownMenuSub,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub v-slot="slotProps" data-slot="dropdown-menu-sub" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DropdownMenuSub>
+</template>

src/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuSubContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    data-slot="dropdown-menu-sub-content"
+    v-bind="forwarded"
+    :class="cn('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 cn-menu-translucent z-50 origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>

src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ChevronRightIcon } from '@lucide/vue';
+
+import type { DropdownMenuSubTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuSubTrigger,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class", "inset")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    data-slot="dropdown-menu-sub-trigger"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRightIcon class="cn-rtl-flip ml-auto" />
+  </DropdownMenuSubTrigger>
+</template>

src/components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from "reka-ui"
+import { DropdownMenuTrigger, useForwardProps } from "reka-ui"
+
+const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuTrigger
+    data-slot="dropdown-menu-trigger"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </DropdownMenuTrigger>
+</template>

src/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,16 @@
+export { default as DropdownMenu } from "./DropdownMenu.vue"
+
+export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue"
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue"
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue"
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue"
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue"
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue"
+export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue"
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue"
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue"
+export { default as DropdownMenuSub } from "./DropdownMenuSub.vue"
+export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue"
+export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue"
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue"
+export { DropdownMenuPortal } from "reka-ui"

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}