JenkenB
ac180ecad9
新增画板底部生成音乐入口，支持游戏音效和游戏背景音乐生成面板。 接入编辑器音频生成前后端契约、VectorEngine 请求与 BFF 路由。 补齐音频结果图层、元数据、画布恢复和客户端提交流程。 统一生成类面板 Lovart 式参数浮层、参考素材入口与相关测试。 更新编辑器音乐生成设计文档和项目长期记忆。
76 lines
1.6 KiB
TypeScript
76 lines
1.6 KiB
TypeScript
import type { ButtonHTMLAttributes, CSSProperties, HTMLAttributes, ReactNode } from 'react';
|
|
|
|
type PlatformFloatingMenuProps = HTMLAttributes<HTMLDivElement> & {
|
|
children: ReactNode;
|
|
className?: string;
|
|
label?: string;
|
|
placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
|
|
style?: CSSProperties;
|
|
};
|
|
|
|
type PlatformFloatingMenuItemProps = Omit<
|
|
ButtonHTMLAttributes<HTMLButtonElement>,
|
|
'children'
|
|
> & {
|
|
icon?: ReactNode;
|
|
children: ReactNode;
|
|
};
|
|
|
|
/**
|
|
* 平台浮层菜单原语。
|
|
* 用于卡片角标、画布局部菜单等轻量动作集合，统一 role 与菜单项 chrome。
|
|
*/
|
|
export function PlatformFloatingMenu({
|
|
children,
|
|
className,
|
|
label,
|
|
placement = 'top-end',
|
|
style,
|
|
onPointerDown,
|
|
...divProps
|
|
}: PlatformFloatingMenuProps) {
|
|
return (
|
|
<div
|
|
{...divProps}
|
|
className={[
|
|
'platform-floating-menu',
|
|
`platform-floating-menu--${placement}`,
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
role="menu"
|
|
aria-label={label}
|
|
style={style}
|
|
onPointerDown={(event) => {
|
|
event.stopPropagation();
|
|
onPointerDown?.(event);
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function PlatformFloatingMenuItem({
|
|
icon,
|
|
children,
|
|
className,
|
|
type = 'button',
|
|
...buttonProps
|
|
}: PlatformFloatingMenuItemProps) {
|
|
return (
|
|
<button
|
|
{...buttonProps}
|
|
type={type}
|
|
className={['platform-floating-menu__item', className]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
role="menuitem"
|
|
>
|
|
{icon}
|
|
<span>{children}</span>
|
|
</button>
|
|
);
|
|
}
|