4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T2918,import React from 'react'; import { Slot } from '@radix-ui/react-slot'; import { attachmentStyleKeys, getAttachmentFileKind, getAttachmentMediaStyleKeys, getAttachmentStyleKeys, formatAttachmentSize, isAttachmentActionable, truncateAttachmentName, } from '../lib/core'; import type { AttachmentFileKind, AttachmentMediaVariant, AttachmentOrientation, AttachmentSize, AttachmentState } from '../lib/core'; import styles from './attachment.module.scss'; import { Button } from '../button/button'; /** * 按文件类型渲染对应的内联 SVG 图标 */ export function AttachmentFileIcon({ kind, className }: { kind: AttachmentFileKind; className?: string }) { const iconProps = { className, xmlns: 'http://www.w3.org/2000/svg', width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, 'aria-hidden': 'true' as const, }; switch (kind) { case 'image': return ( ); case 'video': return ( ); case 'audio': return ( ); case 'pdf': return ( ); case 'spreadsheet': return ( ); case 'presentation': return ( ); case 'archive': return ( ); case 'code': return ( ); default: return ( ); } } /** * 下载 / 删除图标的辅助函数 */ function DownloadIcon() { return ( ); } function TrashIcon() { return ( ); } export interface AttachmentProps extends React.HTMLAttributes { state?: AttachmentState; size?: AttachmentSize; orientation?: AttachmentOrientation; } const Attachment = React.forwardRef( ({ className = '', state = 'done', size = 'default', orientation = 'horizontal', children, ...props }, ref) => { const styleKeys = getAttachmentStyleKeys(size, orientation); return (

{children}

); }, ); Attachment.displayName = 'Attachment'; export interface AttachmentGroupProps extends React.HTMLAttributes {} const AttachmentGroup = React.forwardRef(({ className = '', children, ...props }, ref) => { return (

{children}

); }); AttachmentGroup.displayName = 'AttachmentGroup'; export interface AttachmentMediaProps extends React.HTMLAttributes { variant?: AttachmentMediaVariant; } const AttachmentMedia = React.forwardRef(({ className = '', variant = 'icon', children, ...props }, ref) => { const styleKeys = getAttachmentMediaStyleKeys(variant); return (

{children}

); }); AttachmentMedia.displayName = 'AttachmentMedia'; export interface AttachmentContentProps extends React.HTMLAttributes {} const AttachmentContent = React.forwardRef(({ className = '', children, ...props }, ref) => { return (

{children}

); }); AttachmentContent.displayName = 'AttachmentContent'; export interface AttachmentTitleProps extends React.HTMLAttributes {} const AttachmentTitle = React.forwardRef(({ className = '', children, ...props }, ref) => { return ( {children} ); }); AttachmentTitle.displayName = 'AttachmentTitle'; export interface AttachmentDescriptionProps extends React.HTMLAttributes {} const AttachmentDescription = React.forwardRef(({ className = '', children, ...props }, ref) => { return ( {children} ); }); AttachmentDescription.displayName = 'AttachmentDescription'; export interface AttachmentActionsProps extends React.HTMLAttributes {} const AttachmentActions = React.forwardRef(({ className = '', children, ...props }, ref) => { return (

{children}

); }); AttachmentActions.displayName = 'AttachmentActions'; export interface AttachmentActionProps extends React.ComponentProps {} const AttachmentAction = React.forwardRef(({ className = '', variant, size = 'icon-xs', children, ...props }, ref) => { return ( ); }); AttachmentAction.displayName = 'AttachmentAction'; export interface AttachmentTriggerProps extends React.ButtonHTMLAttributes { asChild?: boolean; } const AttachmentTrigger = React.forwardRef(({ className = '', asChild = false, type, children, ...props }, ref) => { const Comp = asChild ? Slot : 'button'; return ( {children} ); }); AttachmentTrigger.displayName = 'AttachmentTrigger'; export interface AttachmentCardProps extends Omit, 'children'> { name?: string; size?: number; file?: File; state?: AttachmentState; orientation?: AttachmentOrientation; downloading?: boolean; action?: React.ReactNode; onRemove?: (event: React.MouseEvent) => void; onDownload?: (event: React.MouseEvent) => void; onPreview?: (event: React.MouseEvent) => void; } const AttachmentCard = React.forwardRef( ({ className = '', name, size, file, state = 'done', orientation = 'horizontal', downloading = false, action, onRemove, onDownload, onPreview, onClick, ...props }, ref) => { const kind = getAttachmentFileKind(name, file?.type); const actionable = isAttachmentActionable(state); const displayName = name ? truncateAttachmentName(name) : ''; const description = size !== undefined ? formatAttachmentSize(size) : state; return ( ) => { onClick?.(event); onPreview?.(event); }} {...props}> {displayName && {displayName}} {description && {description}} {onDownload && ( )} {action ?? (onRemove && ( ))} ); }, ); AttachmentCard.displayName = 'AttachmentCard'; export { Attachment, AttachmentGroup, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentActions, AttachmentAction, AttachmentTrigger, AttachmentCard, }; export default Attachment; 4f:T1346,@use '../../../styles/variables/colors' as *; // 附件根容器 .attachment { position: relative; display: flex; width: fit-content; max-width: 100%; min-width: 0; flex-shrink: 0; flex-wrap: wrap; border: 1px solid $border; border-radius: $radius; background-color: $card; color: $card-foreground; transition: background-color $transition-fast, border-color $transition-fast; &:focus-within { outline: none; box-shadow: 0 0 0 1px color-mix(in srgb, $ring 50%, transparent); } // 尺寸 &[data-size='default'] { gap: $spacing-2; padding-inline: $spacing-2_5; .content { padding: $spacing-2 0; } .media { padding: $spacing-2 0; } } &[data-size='sm'] { gap: $spacing-2_5; padding-inline: $spacing-2; .content { padding: $spacing-1_5 0; } .media { padding: $spacing-1_5 0; } } &[data-size='xs'] { gap: $spacing-1_5; padding-inline: $spacing-1_5; border-radius: $radius-md; .content { padding: $spacing-1 0; } .media { padding: $spacing-1 0; } } // 排版方向 &[data-orientation='horizontal'] { min-width: 10rem; align-items: center; } &[data-orientation='vertical'] { width: 6rem; flex-direction: column; .content { width: 100%; } } // 状态 &[data-state='idle'] { border-style: dashed; } &[data-state='error'] { border-color: color-mix(in srgb, $destructive 30%, transparent); } &:has(> a, > button):hover { background-color: color-mix(in srgb, $muted 50%, transparent); } } // 附件卡片（AttachmentCard 组合根） .card { position: relative; display: flex; width: 100%; min-width: 0; align-items: center; gap: $spacing-2; border-radius: $radius; background-color: $card; color: $card-foreground; transition: background-color $transition-fast, border-color $transition-fast; &[data-orientation='vertical'] { flex-direction: column; align-items: flex-start; } &[data-state='idle'] { border: 1px dashed $border; } &[data-state='error'] { border-color: color-mix(in srgb, $destructive 30%, transparent); } } // 媒体区 .media { position: relative; display: flex; width: 2.5rem; height: 2.5rem; flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; border-radius: $radius; background-color: $muted; color: $foreground; svg { pointer-events: none; flex-shrink: 0; width: $spacing-4; height: $spacing-4; } // 变体 &.variantIcon { [data-size='xs'] & { width: 1.75rem; height: 1.75rem; border-radius: $radius-md; svg { width: 0.875rem; height: 0.875rem; } } [data-orientation='vertical'] & { width: 100%; svg { width: $spacing-6; height: $spacing-6; } } } &.variantImage { opacity: 0.6; img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; } [data-state='done'] &, [data-state='idle'] & { opacity: 1; } } // 状态 [data-state='error'] & { background-color: color-mix(in srgb, $destructive 10%, transparent); color: $destructive; } } // 内容区 .content { display: flex; min-width: 0; flex: 1; flex-direction: column; line-height: $leading-tight; } // 标题 .title { display: block; max-width: 100%; min-width: 0; overflow: hidden; font-weight: $font-medium; text-overflow: ellipsis; white-space: nowrap; [data-state='processing'] &, [data-state='uploading'] & { color: $muted-foreground; } } // 描述 .description { display: block; margin-top: 0.125rem; min-width: 0; overflow: hidden; font-size: $text-xs; color: $muted-foreground; text-overflow: ellipsis; white-space: nowrap; [data-state='error'] & { color: color-mix(in srgb, $destructive 80%, transparent); } } // 操作区 .actions { position: relative; z-index: 20; display: flex; flex-shrink: 0; align-items: center; gap: $spacing-1; [data-orientation='vertical'] & { position: absolute; top: $spacing-3; right: $spacing-3; } } // 单个操作按钮 .action { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; border: none; border-radius: $radius; background-color: transparent; color: $muted-foreground; cursor: pointer; transition: background-color $transition-fast, color $transition-fast; &:hover { background-color: $muted; color: $foreground; } &:focus-visible { outline: none; box-shadow: 0 0 0 1px $ring; } &:disabled { pointer-events: none; opacity: 0.5; } svg { width: $spacing-4; height: $spacing-4; } } // 触发层（覆盖整个附件，点击跳转/选择） .trigger { position: absolute; inset: 0; z-index: 10; outline: none; cursor: pointer; } // 附件组（横向滚动容器） .group { display: flex; min-width: 0; gap: $spacing-3; overflow-x: auto; overscroll-behavior-x: contain; padding-block: $spacing-1; > [data-slot='attachment'], > .attachment { flex: none; } } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slot"}]]}]}]]}],["$","$L4c",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","button","@tile-ui/styles"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"packages/react/src/components/attachment/attachment.tsx","content":"$4e","type":"registry:ui","target":"components/ui/attachment/attachment.tsx"},{"path":"packages/styles/scss/components/attachment.module.scss","content":"$4f","type":"registry:file","target":"components/ui/attachment/attachment.module.scss"},{"path":"packages/react/src/components/attachment/index.ts","content":"export {\n\tAttachment,\n\tAttachmentGroup,\n\tAttachmentMedia,\n\tAttachmentContent,\n\tAttachmentTitle,\n\tAttachmentDescription,\n\tAttachmentActions,\n\tAttachmentAction,\n\tAttachmentTrigger,\n\tAttachmentCard,\n\tAttachmentFileIcon,\n\ttype AttachmentProps,\n\ttype AttachmentGroupProps,\n\ttype AttachmentMediaProps,\n\ttype AttachmentContentProps,\n\ttype AttachmentTitleProps,\n\ttype AttachmentDescriptionProps,\n\ttype AttachmentActionsProps,\n\ttype AttachmentActionProps,\n\ttype AttachmentTriggerProps,\n\ttype AttachmentCardProps,\n} from './attachment';\n","type":"registry:ui","target":"components/ui/attachment/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]