@baishuyun/ai-design 2.0.37 → 2.1.0-alpha.0

package/src/components/attachments-previewer.tsx

@@ -1,272 +1,272 @@
-import { cn } from '../lib/utils';
-import { transCls } from '../const/ui';
-import { useRef, useState, useEffect, useCallback } from 'react';
-import { RemoveCircleIcon } from './bs-icons';
-import { LoaderIcon } from './ui/icons';
-import { getFileConfig, isImageType } from './attachment-part';
-
-export interface AttachmentItem {
-  id: string;
-  url: string;
-  alt?: string;
-  isLoading?: boolean;
-  /** MIME type, used to decide whether to show image or icon */
-  contentType?: string;
-}
-
-export interface AttachmentsPreviewerProps {
-  attachments: AttachmentItem[];
-  className?: string;
-  imageSize?: number;
-  gap?: number;
-  onImageClick?: (attachment: AttachmentItem, index: number) => void;
-  onImageRemove?: (attachment: AttachmentItem, index: number) => void;
-}
-
-const ChevronRightIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <path
-      d="M9 6L15 12L9 18"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const ChevronLeftIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <path
-      d="M15 6L9 12L15 18"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const NavButton = ({
-  direction,
-  onClick,
-  className,
-}: {
-  direction: 'left' | 'right';
-  onClick: () => void;
-  className?: string;
-}) => {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={cn(
-        'flex items-center justify-center',
-        'size-9 p-1 rounded-[18px]',
-        'bg-white shadow-[0px_0px_10px_0px_rgba(0,0,0,0.06)]',
-        'cursor-pointer',
-        'hover:bg-gray-50',
-        'text-gray-600',
-        transCls,
-        className
-      )}
-    >
-      {direction === 'left' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
-    </button>
-  );
-};
-
-const GradientOverlay = ({
-  direction,
-  height,
-  visible,
-}: {
-  direction: 'left' | 'right';
-  height: number;
-  visible: boolean;
-}) => {
-  const isLeft = direction === 'left';
-  return (
-    <div
-      className={cn(
-        'absolute top-2 pointer-events-none z-5',
-        isLeft ? 'left-0' : 'right-0',
-        transCls,
-        visible ? 'opacity-100' : 'opacity-0'
-      )}
-      style={{ height: `${height}px`, width: '46px' }}
-    >
-      {/* Gradient layer - from white via white@63.57% to transparent */}
-      <div
-        className={cn(
-          'absolute inset-0',
-          isLeft
-            ? 'bg-linear-to-r from-white via-white via-[63.57%] to-transparent'
-            : 'bg-linear-to-l from-white via-white via-[63.57%] to-transparent'
-        )}
-      />
-      {/* Blur layer */}
-      <div className="absolute inset-0 bg-white blur-[7px]" />
-    </div>
-  );
-};
-
-export const AttachmentsPreviewer = ({
-  attachments,
-  className,
-  imageSize = 53,
-  gap = 10,
-  onImageClick,
-  onImageRemove,
-}: AttachmentsPreviewerProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const [showLeftNav, setShowLeftNav] = useState(false);
-  const [showRightNav, setShowRightNav] = useState(false);
-
-  const checkScroll = useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-
-    const { scrollLeft, scrollWidth, clientWidth } = el;
-    setShowLeftNav(scrollLeft > 0);
-    setShowRightNav(scrollLeft + clientWidth < scrollWidth - 1);
-  }, []);
-
-  useEffect(() => {
-    checkScroll();
-    const el = scrollRef.current;
-    if (!el) return;
-
-    el.addEventListener('scroll', checkScroll);
-    window.addEventListener('resize', checkScroll);
-
-    return () => {
-      el.removeEventListener('scroll', checkScroll);
-      window.removeEventListener('resize', checkScroll);
-    };
-  }, [checkScroll, attachments]);
-
-  const scroll = (direction: 'left' | 'right') => {
-    const el = scrollRef.current;
-    if (!el) return;
-
-    const scrollAmount = imageSize + gap;
-    const newScrollLeft =
-      direction === 'left' ? el.scrollLeft - scrollAmount * 2 : el.scrollLeft + scrollAmount * 2;
-
-    el.scrollTo({
-      left: newScrollLeft,
-      behavior: 'smooth',
-    });
-  };
-
-  if (!attachments.length) {
-    return null;
-  }
-
-  return (
-    <div
-      ref={containerRef}
-      className={cn('relative w-full', className)}
-      style={{ height: imageSize + 16 }}
-    >
-      {/* Scrollable images container */}
-      <div
-        ref={scrollRef}
-        className="flex overflow-x-auto scrollbar-hide py-2"
-        style={{ gap, height: imageSize + 16 }}
-      >
-        {attachments.map((attachment, index) => {
-          const isImage = isImageType(attachment.contentType);
-          const { icon: Icon, iconSize, color } = getFileConfig(attachment.contentType, attachment.alt);
-          const scaledIconSize = (52 / 102) * imageSize;
-          const iconScale = scaledIconSize / iconSize;
-
-          return (
-            <div
-              key={attachment.id}
-              className={cn(
-                'relative shrink-0 cursor-pointer group border border-[#e0e0e0] rounded-lg',
-                transCls
-              )}
-              style={{ width: imageSize, height: imageSize }}
-              onClick={() => onImageClick?.(attachment, index)}
-            >
-              {isImage && attachment.url ? (
-                <img
-                  src={attachment.url}
-                  alt={attachment.alt || `Attachment ${index + 1}`}
-                  className="absolute inset-0 h-full w-full rounded-lg object-cover"
-                />
-              ) : (
-                <div className="absolute inset-0 flex h-full w-full items-center justify-center rounded-lg bg-[#EFF0F6]">
-                  <div
-                    className="shrink-0 flex items-center justify-center"
-                    style={{ width: scaledIconSize, height: scaledIconSize, color }}
-                  >
-                    <div
-                      style={{
-                        transform: iconScale !== 1 ? `scale(${iconScale})` : undefined,
-                        transformOrigin: 'center',
-                      }}
-                    >
-                      <Icon color={color} />
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              {attachment.isLoading && (
-                <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-black/50 pointer-events-none">
-                  <div className="inline-flex animate-spin items-center justify-center">
-                    <LoaderIcon size={16} />
-                  </div>
-                </div>
-              )}
-
-              {onImageRemove /* && !attachment.isLoading*/ && (
-                <button
-                  className={cn(
-                    'absolute -top-1.5 -right-1.5',
-                    'flex items-center justify-center',
-                    'opacity-0 group-hover:opacity-100 cursor-pointer',
-                    transCls
-                  )}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onImageRemove(attachment, index);
-                  }}
-                >
-                  <RemoveCircleIcon />
-                </button>
-              )}
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Left navigation */}
-      <GradientOverlay direction="left" height={imageSize} visible={showLeftNav} />
-      <NavButton
-        direction="left"
-        onClick={() => scroll('left')}
-        className={cn(
-          'absolute left-0 top-1/2 -translate-y-1/2 z-10',
-          showLeftNav ? 'opacity-100' : 'opacity-0 pointer-events-none'
-        )}
-      />
-
-      {/* Right navigation */}
-      <GradientOverlay direction="right" height={imageSize} visible={showRightNav} />
-      <NavButton
-        direction="right"
-        onClick={() => scroll('right')}
-        className={cn(
-          'absolute right-0 top-1/2 -translate-y-1/2 z-10',
-          showRightNav ? 'opacity-100' : 'opacity-0 pointer-events-none'
-        )}
-      />
-    </div>
-  );
-};
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { RemoveCircleIcon } from './bs-icons';
+import { LoaderIcon } from './ui/icons';
+import { getFileConfig, isImageType } from './attachment-part';
+
+export interface AttachmentItem {
+  id: string;
+  url: string;
+  alt?: string;
+  isLoading?: boolean;
+  /** MIME type, used to decide whether to show image or icon */
+  contentType?: string;
+}
+
+export interface AttachmentsPreviewerProps {
+  attachments: AttachmentItem[];
+  className?: string;
+  imageSize?: number;
+  gap?: number;
+  onImageClick?: (attachment: AttachmentItem, index: number) => void;
+  onImageRemove?: (attachment: AttachmentItem, index: number) => void;
+}
+
+const ChevronRightIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M9 6L15 12L9 18"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const ChevronLeftIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M15 6L9 12L15 18"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const NavButton = ({
+  direction,
+  onClick,
+  className,
+}: {
+  direction: 'left' | 'right';
+  onClick: () => void;
+  className?: string;
+}) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'flex items-center justify-center',
+        'size-9 p-1 rounded-[18px]',
+        'bg-white shadow-[0px_0px_10px_0px_rgba(0,0,0,0.06)]',
+        'cursor-pointer',
+        'hover:bg-gray-50',
+        'text-gray-600',
+        transCls,
+        className
+      )}
+    >
+      {direction === 'left' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+    </button>
+  );
+};
+
+const GradientOverlay = ({
+  direction,
+  height,
+  visible,
+}: {
+  direction: 'left' | 'right';
+  height: number;
+  visible: boolean;
+}) => {
+  const isLeft = direction === 'left';
+  return (
+    <div
+      className={cn(
+        'absolute top-2 pointer-events-none z-5',
+        isLeft ? 'left-0' : 'right-0',
+        transCls,
+        visible ? 'opacity-100' : 'opacity-0'
+      )}
+      style={{ height: `${height}px`, width: '46px' }}
+    >
+      {/* Gradient layer - from white via white@63.57% to transparent */}
+      <div
+        className={cn(
+          'absolute inset-0',
+          isLeft
+            ? 'bg-linear-to-r from-white via-white via-[63.57%] to-transparent'
+            : 'bg-linear-to-l from-white via-white via-[63.57%] to-transparent'
+        )}
+      />
+      {/* Blur layer */}
+      <div className="absolute inset-0 bg-white blur-[7px]" />
+    </div>
+  );
+};
+
+export const AttachmentsPreviewer = ({
+  attachments,
+  className,
+  imageSize = 53,
+  gap = 10,
+  onImageClick,
+  onImageRemove,
+}: AttachmentsPreviewerProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [showLeftNav, setShowLeftNav] = useState(false);
+  const [showRightNav, setShowRightNav] = useState(false);
+
+  const checkScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    setShowLeftNav(scrollLeft > 0);
+    setShowRightNav(scrollLeft + clientWidth < scrollWidth - 1);
+  }, []);
+
+  useEffect(() => {
+    checkScroll();
+    const el = scrollRef.current;
+    if (!el) return;
+
+    el.addEventListener('scroll', checkScroll);
+    window.addEventListener('resize', checkScroll);
+
+    return () => {
+      el.removeEventListener('scroll', checkScroll);
+      window.removeEventListener('resize', checkScroll);
+    };
+  }, [checkScroll, attachments]);
+
+  const scroll = (direction: 'left' | 'right') => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    const scrollAmount = imageSize + gap;
+    const newScrollLeft =
+      direction === 'left' ? el.scrollLeft - scrollAmount * 2 : el.scrollLeft + scrollAmount * 2;
+
+    el.scrollTo({
+      left: newScrollLeft,
+      behavior: 'smooth',
+    });
+  };
+
+  if (!attachments.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn('relative w-full', className)}
+      style={{ height: imageSize + 16 }}
+    >
+      {/* Scrollable images container */}
+      <div
+        ref={scrollRef}
+        className="flex overflow-x-auto scrollbar-hide py-2"
+        style={{ gap, height: imageSize + 16 }}
+      >
+        {attachments.map((attachment, index) => {
+          const isImage = isImageType(attachment.contentType);
+          const { icon: Icon, iconSize, color } = getFileConfig(attachment.contentType, attachment.alt);
+          const scaledIconSize = (52 / 102) * imageSize;
+          const iconScale = scaledIconSize / iconSize;
+
+          return (
+            <div
+              key={attachment.id}
+              className={cn(
+                'relative shrink-0 cursor-pointer group border border-[#e0e0e0] rounded-lg',
+                transCls
+              )}
+              style={{ width: imageSize, height: imageSize }}
+              onClick={() => onImageClick?.(attachment, index)}
+            >
+              {isImage && attachment.url ? (
+                <img
+                  src={attachment.url}
+                  alt={attachment.alt || `Attachment ${index + 1}`}
+                  className="absolute inset-0 h-full w-full rounded-lg object-cover"
+                />
+              ) : (
+                <div className="absolute inset-0 flex h-full w-full items-center justify-center rounded-lg bg-[#EFF0F6]">
+                  <div
+                    className="shrink-0 flex items-center justify-center"
+                    style={{ width: scaledIconSize, height: scaledIconSize, color }}
+                  >
+                    <div
+                      style={{
+                        transform: iconScale !== 1 ? `scale(${iconScale})` : undefined,
+                        transformOrigin: 'center',
+                      }}
+                    >
+                      <Icon color={color} />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {attachment.isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-black/50 pointer-events-none">
+                  <div className="inline-flex animate-spin items-center justify-center">
+                    <LoaderIcon size={16} />
+                  </div>
+                </div>
+              )}
+
+              {onImageRemove /* && !attachment.isLoading*/ && (
+                <button
+                  className={cn(
+                    'absolute -top-1.5 -right-1.5',
+                    'flex items-center justify-center',
+                    'opacity-0 group-hover:opacity-100 cursor-pointer',
+                    transCls
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onImageRemove(attachment, index);
+                  }}
+                >
+                  <RemoveCircleIcon />
+                </button>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Left navigation */}
+      <GradientOverlay direction="left" height={imageSize} visible={showLeftNav} />
+      <NavButton
+        direction="left"
+        onClick={() => scroll('left')}
+        className={cn(
+          'absolute left-0 top-1/2 -translate-y-1/2 z-10',
+          showLeftNav ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}
+      />
+
+      {/* Right navigation */}
+      <GradientOverlay direction="right" height={imageSize} visible={showRightNav} />
+      <NavButton
+        direction="right"
+        onClick={() => scroll('right')}
+        className={cn(
+          'absolute right-0 top-1/2 -translate-y-1/2 z-10',
+          showRightNav ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}
+      />
+    </div>
+  );
+};

package/src/components/base-button.tsx

@@ -1,49 +1,49 @@
-import { forwardRef } from 'react';
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-import { cn } from '../lib/utils';
-import { transCls } from '../const/ui';
-import { BsTooltip } from './tooltip';
-
-export interface BaseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  icon?: ReactNode;
-  tooltip?: string;
-  hoverTextCls?: string;
-}
-
-export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
-  ({ className, children, hoverTextCls, tooltip, icon, type, ...rest }, ref) => {
-    const btn = (
-      <button
-        ref={ref}
-        type={type ?? 'button'}
-        className={cn(
-          'group inline-flex items-center gap-[6px] px-[16px] rounded-[4px] h-[34px]',
-          'border border-solid border-[#E0E0E0] bg-transparent',
-          'text-[14px] font-[400] leading-[normal] text-[#030303]',
-          'hover:bg-[#EFF0F6] hover:border-transparent',
-          'cursor-pointer',
-          {
-            'hover:text-[#0265FF]': !hoverTextCls,
-            [`hover:${hoverTextCls}`]: hoverTextCls,
-          },
-          transCls,
-          className
-        )}
-        {...rest}
-      >
-        {icon ? <span className="shrink-0">{icon}</span> : null}
-        {children ? (
-          <span className="whitespace-nowrap">{children}</span>
-        ) : null}
-      </button>
-    );
-
-    if (tooltip) {
-      return <BsTooltip content={tooltip}>{btn}</BsTooltip>;
-    }
-
-    return btn;
-  }
-);
-
-BaseButton.displayName = 'BaseButton';
+import { forwardRef } from 'react';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+import { BsTooltip } from './tooltip';
+
+export interface BaseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: ReactNode;
+  tooltip?: string;
+  hoverTextCls?: string;
+}
+
+export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
+  ({ className, children, hoverTextCls, tooltip, icon, type, ...rest }, ref) => {
+    const btn = (
+      <button
+        ref={ref}
+        type={type ?? 'button'}
+        className={cn(
+          'group inline-flex items-center gap-[6px] px-[16px] rounded-[4px] h-[34px]',
+          'border border-solid border-[#E0E0E0] bg-transparent',
+          'text-[14px] font-[400] leading-[normal] text-[#030303]',
+          'hover:bg-[#EFF0F6] hover:border-transparent',
+          'cursor-pointer',
+          {
+            'hover:text-[#0265FF]': !hoverTextCls,
+            [`hover:${hoverTextCls}`]: hoverTextCls,
+          },
+          transCls,
+          className
+        )}
+        {...rest}
+      >
+        {icon ? <span className="shrink-0">{icon}</span> : null}
+        {children ? (
+          <span className="whitespace-nowrap">{children}</span>
+        ) : null}
+      </button>
+    );
+
+    if (tooltip) {
+      return <BsTooltip content={tooltip}>{btn}</BsTooltip>;
+    }
+
+    return btn;
+  }
+);
+
+BaseButton.displayName = 'BaseButton';