@open-dy/vibecoding-sdk-taro 0.0.1-beta.4 → 0.0.1-beta.6

package/src/ui/menubar.tsx

@@ -0,0 +1,835 @@
+import * as React from "react"
+import { ScrollView, View, type ViewProps } from "@tarojs/components"
+import { Check, ChevronRight } from "@open-dy/lucide-taro"
+
+import { Portal } from "./portal"
+import { computePosition, getRectById } from "../lib/measure"
+import { isH5 } from "../lib/platform"
+import { cn } from "../lib/utils"
+
+type MenuSide = "top" | "bottom" | "left" | "right"
+type MenuAlign = "start" | "center" | "end"
+
+const MenubarContext = React.createContext<{
+  openMenu?: string
+  setOpenMenu?: (id: string | undefined) => void
+} | null>(null)
+
+const MenubarMenuContext = React.createContext<{
+  id: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  triggerId: string
+} | null>(null)
+
+const MenubarRadioGroupContext = React.createContext<{
+  value?: string
+  onValueChange?: (value: string) => void
+} | null>(null)
+
+const MenubarSubContext = React.createContext<{
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  triggerId: string
+} | null>(null)
+
+/**
+ * @desc 菜单栏组件。
+ * @param {Parameters<typeof Menubar>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Menubar>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar />
+ * ```
+ */
+function Menubar({ className, ...props }: ViewProps) {
+  const [openMenu, setOpenMenu] = React.useState<string | undefined>()
+
+  return (
+    <MenubarContext.Provider value={{ openMenu, setOpenMenu }}>
+      <View
+        data-slot="menubar"
+        className={cn(
+          "relative z-[60] flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
+          className
+        )}
+        {...props}
+      />
+    </MenubarContext.Provider>
+  )
+}
+
+/**
+ * @desc 菜单栏Menu。
+ * @param {Parameters<typeof MenubarMenu>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarMenu>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarMenu /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarMenu({ children }: {
+  /** @desc 当前菜单的触发器和内容区；应放在 Menubar 内，同一 Menubar 同时只展开一个菜单。 */
+  children?: React.ReactNode }) {
+  const context = React.useContext(MenubarContext)
+  const id = React.useRef(`menubar-menu-${Math.random().toString(36).slice(2, 10)}`)
+  const triggerId = React.useRef(`${id.current}-trigger`)
+
+  const open = context?.openMenu === id.current
+  const onOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      context?.setOpenMenu?.(nextOpen ? id.current : undefined)
+    },
+    [context]
+  )
+
+  return (
+    <MenubarMenuContext.Provider
+      value={{ id: id.current, open, onOpenChange, triggerId: triggerId.current }}
+    >
+      {children}
+    </MenubarMenuContext.Provider>
+  )
+}
+
+/**
+ * @desc 菜单栏分组容器。
+ * @param {Parameters<typeof MenubarGroup>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarGroup>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu, MenubarGroup } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarGroup /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarGroup({ ...props }: ViewProps) {
+  return <View data-slot="menubar-group" {...props} />
+}
+
+/**
+ * @desc 菜单栏跨层级渲染入口。
+ * @param {Parameters<typeof MenubarPortal>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarPortal>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu, MenubarPortal } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarPortal /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarPortal({ children }: {
+  /** @desc 要渲染的子节点；该兼容包装只返回 Fragment，不额外创建原生容器或执行挂载迁移。 */
+  children?: React.ReactNode }) {
+  return <>{children}</>
+}
+
+/**
+ * @desc 菜单栏触发器。
+ * @param {Parameters<typeof MenubarTrigger>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarTrigger>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu, MenubarTrigger } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarTrigger /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarTrigger({
+  className,
+  onClick,
+  ...props
+}: ViewProps) {
+  const menu = React.useContext(MenubarMenuContext)
+
+  return (
+    <View
+      id={menu?.triggerId}
+      data-slot="menubar-trigger"
+      data-state={menu?.open ? "open" : "closed"}
+      aria-expanded={menu?.open}
+      className={cn(
+        "flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted",
+        menu?.open && "bg-muted",
+        className
+      )}
+      onClick={(event) => {
+        event.stopPropagation()
+        menu?.onOpenChange(!menu.open)
+        onClick?.(event)
+      }}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 菜单栏内容容器。
+ * @param {Parameters<typeof MenubarContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu, MenubarContent } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarContent /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarContent({
+  className,
+  align = "start",
+  side = "bottom",
+  sideOffset = 4,
+  children,
+  ...props
+}: ViewProps & {
+  /** @desc 相对触发器的对齐位置：start 起端、center 居中、end 末端；默认 start。 */
+  align?: MenuAlign
+  /** @desc 内容出现的方向：top、bottom、left 或 right；默认 bottom，定位时会结合视口边界调整。 */
+  side?: MenuSide
+  /** @desc 内容与触发器之间的间距，单位为像素，默认 4；参与测量后的浮层定位。 */
+  sideOffset?: number
+}) {
+  const menu = React.useContext(MenubarMenuContext)
+  const contentId = React.useRef(`menubar-content-${Math.random().toString(36).slice(2, 10)}`)
+  const [position, setPosition] = React.useState<{ left: number; top: number } | null>(null)
+
+  React.useEffect(() => {
+    if (!menu?.open) {
+      setPosition(null)
+      return
+    }
+
+    let cancelled = false
+
+    const updatePosition = async () => {
+      const [triggerRect, contentRect] = await Promise.all([
+        getRectById(menu.triggerId),
+        getRectById(contentId.current),
+      ])
+
+      if (cancelled || !triggerRect?.width || !contentRect?.width) return
+
+      setPosition(
+        computePosition({
+          triggerRect,
+          contentRect,
+          align,
+          side,
+          sideOffset,
+        })
+      )
+    }
+
+    const timer =
+      typeof requestAnimationFrame !== "undefined"
+        ? requestAnimationFrame(() => updatePosition())
+        : (setTimeout(() => updatePosition(), 0) as unknown as number)
+
+    return () => {
+      cancelled = true
+      if (typeof cancelAnimationFrame !== "undefined") {
+        cancelAnimationFrame(timer)
+      } else {
+        clearTimeout(timer)
+      }
+    }
+  }, [align, menu, side, sideOffset])
+
+  React.useEffect(() => {
+    if (!menu?.open || !isH5() || typeof document === "undefined") return
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        menu.onOpenChange(false)
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown)
+    return () => document.removeEventListener("keydown", onKeyDown)
+  }, [menu])
+
+  if (!menu?.open) return null
+
+  const overlayStyle =
+    position && side === "bottom"
+      ? ({ top: Math.max(position.top - sideOffset, 0) } as React.CSSProperties)
+      : undefined
+
+  return (
+    <Portal>
+      <View
+        className="fixed inset-0 z-40 bg-transparent"
+        style={overlayStyle}
+        onClick={() => menu.onOpenChange(false)}
+      />
+      <View
+        id={contentId.current}
+        data-slot="menubar-content"
+        data-state="open"
+        data-side={side}
+        className={cn(
+          "fixed z-50 min-w-36 overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10",
+          className
+        )}
+        style={
+          position
+            ? ({ left: position.left, top: position.top } as React.CSSProperties)
+            : ({
+                left: 0,
+                top: 0,
+                opacity: 0,
+                pointerEvents: "none",
+              } as React.CSSProperties)
+        }
+        onClick={(event) => event.stopPropagation()}
+        {...props}
+      >
+        <ScrollView scrollY className="max-h-[50vh] overflow-x-hidden overflow-y-auto">
+          {children}
+        </ScrollView>
+      </View>
+    </Portal>
+  )
+}
+
+/**
+ * @desc 菜单栏条目。
+ * @param {Parameters<typeof MenubarItem>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarItem>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu, MenubarItem } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarItem /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  disabled,
+  closeOnSelect = true,
+  onClick,
+  ...props
+}: ViewProps & {
+  /** @desc 是否使用左侧缩进以对齐选择指示，默认 false；为 true 时使用 pl-7。 */
+  inset?: boolean
+  /** @desc 项目视觉样式，默认 default；destructive 使用危险操作色，仅影响样式。 */
+  variant?: "default" | "destructive"
+  /** @desc 是否禁止当前项的内部点击操作；默认可操作，禁用后不触发内部选择或关闭逻辑。 */
+  disabled?: boolean
+  /** @desc 点击操作后是否关闭父菜单，默认 true；为 false 时保留展开状态。 */
+  closeOnSelect?: boolean
+}) {
+  const menu = React.useContext(MenubarMenuContext)
+
+  return (
+    <View
+      data-slot="menubar-item"
+      data-inset={inset ? "" : undefined}
+      data-variant={variant}
+      data-disabled={disabled ? "" : undefined}
+      className={cn(
+        "group/menubar-item relative flex cursor-default select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden transition-colors [&_svg:not([class*='size-'])]:size-4",
+        inset && "pl-7",
+        variant === "destructive" && "text-destructive",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
+      onClick={(event) => {
+        if (disabled) return
+        onClick?.(event)
+        if (closeOnSelect) menu?.onOpenChange(false)
+      }}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 菜单栏复选条目。
+ * @param {Parameters<typeof MenubarCheckboxItem>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarCheckboxItem>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu, MenubarCheckboxItem } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarCheckboxItem /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked: checkedProp,
+  defaultChecked = false,
+  onCheckedChange,
+  inset,
+  disabled,
+  closeOnSelect = false,
+  onClick,
+  ...props
+}: ViewProps & {
+  /** @desc 受控选中状态；传入后以该值为准，需在 onCheckedChange 中更新。省略时由内部状态管理。 */
+  checked?: boolean
+  /** @desc 非受控模式的初始选中状态，默认 false；仅初始化时读取，传入 checked 后不生效。 */
+  defaultChecked?: boolean
+  /** @desc 用户点击切换时调用，参数为下一选中状态；禁用时不触发，受控模式需同步 checked。 */
+  onCheckedChange?: (checked: boolean) => void
+  /** @desc 是否使用左侧缩进以对齐选择指示，默认 false；为 true 时使用 pl-7。 */
+  inset?: boolean
+  /** @desc 是否禁止当前项的内部点击操作；默认可操作，禁用后不触发内部选择或关闭逻辑。 */
+  disabled?: boolean
+  /** @desc 切换勾选后是否关闭父菜单，默认 false；可在菜单内连续勾选多项。 */
+  closeOnSelect?: boolean
+}) {
+  const menu = React.useContext(MenubarMenuContext)
+  const [checkedState, setCheckedState] = React.useState(defaultChecked)
+  const checked = checkedProp !== undefined ? checkedProp : checkedState
+
+  return (
+    <View
+      data-slot="menubar-checkbox-item"
+      data-inset={inset ? "" : undefined}
+      data-disabled={disabled ? "" : undefined}
+      data-state={checked ? "checked" : "unchecked"}
+      className={cn(
+        "relative flex cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden transition-colors",
+        inset && "pl-7",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
+      onClick={(event) => {
+        if (disabled) return
+        const nextChecked = !checked
+        if (checkedProp === undefined) {
+          setCheckedState(nextChecked)
+        }
+        onCheckedChange?.(nextChecked)
+        onClick?.(event)
+        if (closeOnSelect) menu?.onOpenChange(false)
+      }}
+      {...props}
+    >
+      <View className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center">
+        {checked ? <Check size={16} color="#666" /> : null}
+      </View>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 菜单栏单选分组。
+ * @param {Parameters<typeof MenubarRadioGroup>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarRadioGroup>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu, MenubarRadioGroup } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarRadioGroup /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarRadioGroup({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  ...props
+}: ViewProps & {
+  /** @desc 受控选中项的标识；传入后以该值为准，需在 onValueChange 中更新。省略时由内部状态管理。 */
+  value?: string
+  /** @desc 非受控模式的初始选中项；省略时没有选中项，传入 value 后不生效。 */
+  defaultValue?: string
+  /** @desc 用户选择项目时调用，参数为下一选中项标识；受控模式需由调用方同步 value。 */
+  onValueChange?: (value: string) => void
+}) {
+  const [valueState, setValueState] = React.useState<string | undefined>(defaultValue)
+  const value = valueProp !== undefined ? valueProp : valueState
+
+  const handleValueChange = React.useCallback(
+    (nextValue: string) => {
+      if (valueProp === undefined) {
+        setValueState(nextValue)
+      }
+      onValueChange?.(nextValue)
+    },
+    [onValueChange, valueProp]
+  )
+
+  return (
+    <MenubarRadioGroupContext.Provider value={{ value, onValueChange: handleValueChange }}>
+      <View data-slot="menubar-radio-group" {...props} />
+    </MenubarRadioGroupContext.Provider>
+  )
+}
+
+/**
+ * @desc 菜单栏单选条目。
+ * @param {Parameters<typeof MenubarRadioItem>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarRadioItem>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu, MenubarRadioItem } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarRadioItem value="one" /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarRadioItem({
+  className,
+  children,
+  value,
+  checked: checkedProp,
+  inset,
+  disabled,
+  closeOnSelect = false,
+  onClick,
+  ...props
+}: ViewProps & {
+  /** @desc 当前选项的唯一标识，点击时传给父 MenubarRadioGroup.onValueChange。 */
+  value: string
+  /** @desc 选中指示的可选覆盖值；省略时按父单选组 value 判断。传入后调用方需同步该值。 */
+  checked?: boolean
+  /** @desc 是否使用左侧缩进以对齐选择指示，默认 false；为 true 时使用 pl-7。 */
+  inset?: boolean
+  /** @desc 是否禁止当前项的内部点击操作；默认可操作，禁用后不触发内部选择或关闭逻辑。 */
+  disabled?: boolean
+  /** @desc 点击选择后是否关闭父菜单，默认 false；为 true 时请求关闭父菜单。 */
+  closeOnSelect?: boolean
+}) {
+  const menu = React.useContext(MenubarMenuContext)
+  const group = React.useContext(MenubarRadioGroupContext)
+  const checked = checkedProp !== undefined ? checkedProp : group?.value === value
+
+  return (
+    <View
+      data-slot="menubar-radio-item"
+      data-inset={inset ? "" : undefined}
+      data-disabled={disabled ? "" : undefined}
+      data-state={checked ? "checked" : "unchecked"}
+      className={cn(
+        "relative flex cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden transition-colors",
+        inset && "pl-7",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
+      onClick={(event) => {
+        console.log(event)
+        if (disabled) return
+        group?.onValueChange?.(value)
+        onClick?.(event)
+        if (closeOnSelect) menu?.onOpenChange(false)
+      }}
+      {...props}
+    >
+      <View className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center">
+        {checked ? <Check size={16} color="#666" /> : null}
+      </View>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 菜单栏标签文本。
+ * @param {Parameters<typeof MenubarLabel>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarLabel>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu, MenubarLabel } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarLabel /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: ViewProps & {
+  /** @desc 是否使用左侧缩进以对齐选择指示，默认 false；为 true 时使用 pl-7。 */
+  inset?: boolean
+}) {
+  return (
+    <View
+      data-slot="menubar-label"
+      data-inset={inset ? "" : undefined}
+      className={cn("px-1.5 py-1 text-sm font-medium", inset && "pl-7", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 菜单栏分隔线。
+ * @param {Parameters<typeof MenubarSeparator>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarSeparator>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu, MenubarSeparator } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarSeparator /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarSeparator({
+  className,
+  ...props
+}: ViewProps) {
+  return (
+    <View
+      data-slot="menubar-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 菜单栏快捷键说明。
+ * @param {Parameters<typeof MenubarShortcut>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarShortcut>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu, MenubarShortcut } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarShortcut /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarShortcut({
+  className,
+  ...props
+}: ViewProps) {
+  return (
+    <View
+      data-slot="menubar-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 菜单栏子菜单上下文。
+ * @param {Parameters<typeof MenubarSub>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarSub>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu, MenubarSub } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarSub /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarSub({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  children,
+}: {
+  /** @desc 受控展开状态；传入后以该值为准，需在 onOpenChange 中更新。省略时由组件内部管理。 */
+  open?: boolean
+  /** @desc 非受控模式的初始展开状态，默认 false；仅初始化时读取，传入 open 后不生效。 */
+  defaultOpen?: boolean
+  /** @desc 触发器或关闭操作请求改变展开状态时调用，参数为下一状态；受控模式需由调用方同步 open。 */
+  onOpenChange?: (open: boolean) => void
+  /** @desc 同一实例的触发器、内容区等组合子组件；省略时不显示内容，子组件通过上下文共享状态。 */
+  children?: React.ReactNode
+}) {
+  const menu = React.useContext(MenubarMenuContext)
+  const [openState, setOpenState] = React.useState(defaultOpen ?? false)
+  const open = openProp !== undefined ? openProp : openState
+  const triggerId = React.useRef(`menubar-sub-trigger-${Math.random().toString(36).slice(2, 10)}`)
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      if (openProp === undefined) {
+        setOpenState(nextOpen)
+      }
+      onOpenChange?.(nextOpen)
+    },
+    [onOpenChange, openProp]
+  )
+
+  React.useEffect(() => {
+    if (!menu?.open && open) {
+      handleOpenChange(false)
+    }
+  }, [handleOpenChange, menu?.open, open])
+
+  return (
+    <MenubarSubContext.Provider
+      value={{ open, onOpenChange: handleOpenChange, triggerId: triggerId.current }}
+    >
+      {children}
+    </MenubarSubContext.Provider>
+  )
+}
+
+/**
+ * @desc 菜单栏子菜单触发器。
+ * @param {Parameters<typeof MenubarSubTrigger>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarSubTrigger>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu, MenubarSubTrigger } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarSubTrigger /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarSubTrigger({
+  className,
+  inset,
+  disabled,
+  children,
+  onClick,
+  ...props
+}: ViewProps & {
+  /** @desc 是否使用左侧缩进以对齐选择指示，默认 false；为 true 时使用 pl-7。 */
+  inset?: boolean
+  /** @desc 是否禁止当前项的内部点击操作；默认可操作，禁用后不触发内部选择或关闭逻辑。 */
+  disabled?: boolean
+}) {
+  const sub = React.useContext(MenubarSubContext)
+
+  return (
+    <View
+      id={sub?.triggerId}
+      data-slot="menubar-sub-trigger"
+      data-inset={inset ? "" : undefined}
+      data-disabled={disabled ? "" : undefined}
+      data-state={sub?.open ? "open" : "closed"}
+      className={cn(
+        "relative flex cursor-default select-none items-center justify-between gap-1.5 rounded-md px-1.5 py-1 text-sm transition-colors",
+        inset && "pl-7",
+        sub?.open && "bg-accent text-accent-foreground",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
+      onClick={(event) => {
+        event.stopPropagation()
+        if (disabled) return
+        sub?.onOpenChange?.(!sub.open)
+        onClick?.(event)
+      }}
+      {...props}
+    >
+      <View>{children}</View>
+      <View className="flex items-center justify-center opacity-50">
+        <ChevronRight size={16} color="#666" />
+      </View>
+    </View>
+  )
+}
+
+/**
+ * @desc 菜单栏子菜单内容。
+ * @param {Parameters<typeof MenubarSubContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof MenubarSubContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Menubar, MenubarMenu, MenubarSubContent } from '@open-dy/vibecoding-sdk-taro/ui/menubar'
+ * <Menubar><MenubarMenu><MenubarSubContent /></MenubarMenu></Menubar>
+ * ```
+ */
+function MenubarSubContent({
+  className,
+  align = "start",
+  side = "right",
+  sideOffset = 4,
+  children,
+  ...props
+}: ViewProps & {
+  /** @desc 相对触发器的对齐位置：start 起端、center 居中、end 末端；默认 start。 */
+  align?: MenuAlign
+  /** @desc 内容出现的方向：top、bottom、left 或 right；默认 right，定位时会结合视口边界调整。 */
+  side?: MenuSide
+  /** @desc 内容与触发器之间的间距，单位为像素，默认 4；参与测量后的浮层定位。 */
+  sideOffset?: number
+}) {
+  const menu = React.useContext(MenubarMenuContext)
+  const sub = React.useContext(MenubarSubContext)
+  const contentId = React.useRef(`menubar-sub-content-${Math.random().toString(36).slice(2, 10)}`)
+  const [position, setPosition] = React.useState<{ left: number; top: number } | null>(null)
+
+  React.useEffect(() => {
+    if (!menu?.open || !sub?.open) {
+      setPosition(null)
+      return
+    }
+
+    let cancelled = false
+
+    const updatePosition = async () => {
+      const [triggerRect, contentRect] = await Promise.all([
+        getRectById(sub.triggerId),
+        getRectById(contentId.current),
+      ])
+
+      if (cancelled || !triggerRect?.width || !contentRect?.width) return
+
+      setPosition(
+        computePosition({
+          triggerRect,
+          contentRect,
+          align,
+          side,
+          sideOffset,
+        })
+      )
+    }
+
+    const timer =
+      typeof requestAnimationFrame !== "undefined"
+        ? requestAnimationFrame(() => updatePosition())
+        : (setTimeout(() => updatePosition(), 0) as unknown as number)
+
+    return () => {
+      cancelled = true
+      if (typeof cancelAnimationFrame !== "undefined") {
+        cancelAnimationFrame(timer)
+      } else {
+        clearTimeout(timer)
+      }
+    }
+  }, [align, menu?.open, side, sideOffset, sub])
+
+  if (!menu?.open || !sub?.open) return null
+
+  return (
+    <Portal>
+      <View
+        id={contentId.current}
+        data-slot="menubar-sub-content"
+        data-state="open"
+        data-side={side}
+        className={cn(
+          "fixed z-50 min-w-32 overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10",
+          className
+        )}
+        style={
+          position
+            ? ({ left: position.left, top: position.top } as React.CSSProperties)
+            : ({
+                left: 0,
+                top: 0,
+                opacity: 0,
+                pointerEvents: "none",
+              } as React.CSSProperties)
+        }
+        onClick={(event) => event.stopPropagation()}
+        {...props}
+      >
+        <ScrollView scrollY className="max-h-[50vh] overflow-x-hidden overflow-y-auto">
+          {children}
+        </ScrollView>
+      </View>
+    </Portal>
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}