@baishuyun/ai-design 1.0.0

package/src/components/previewer-header.tsx

@@ -0,0 +1,270 @@
+import { useState, useCallback } from 'react';
+import classNames from 'classnames';
+import { IconBtn } from './icon-btn';
+import { BackIcon, InfoIcon } from './bs-icons';
+import { LinearGradientColorBgAnimation } from './linear-gradient-color-bg-animation';
+import { ConfirmDialog } from './confirm-dialog';
+import { Spinner } from './ui/spinner';
+import { BaseButton } from './base-button';
+import { BrushIcon } from './bs-icons';
+import { cn } from '../lib/utils';
+
+export interface PreviewerHeaderProps {
+  title: string;
+  tips?: string;
+  active?: boolean;
+  className?: string;
+  onBackClick?: () => void;
+  onSave?: (isConfirm?: boolean) => void;
+  onCancel?: () => void;
+  onClear?: () => void;
+  style?: React.CSSProperties;
+
+  confirmTitle?: string;
+  confirmContent?: string;
+  dialogContainer?: HTMLElement;
+  variant?: 'fields-previewer' | 'data-previewer';
+  closeBtnLabel?: string;
+
+  disableConfirm?: boolean;
+
+  disableOperation?: boolean;
+
+  customOperationElement?: React.ReactNode;
+
+}
+
+export const PreviewerHeader = ({
+  title,
+  tips,
+  style,
+  confirmContent,
+  confirmTitle,
+  className,
+  active,
+  onBackClick,
+  onSave,
+  closeBtnLabel,
+  onCancel,
+  onClear,
+  variant = 'fields-previewer',
+  dialogContainer,
+  disableConfirm,
+  disableOperation,
+  customOperationElement,
+}: PreviewerHeaderProps) => {
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+
+  const [loading, setLoading] = useState(false);
+
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+
+  const setRootRef = useCallback((node: HTMLElement | null) => {
+    if (!node) {
+      setPortalContainer(null);
+      return;
+    }
+    const rootNode = node.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+      const existing = rootNode.querySelector<HTMLElement>('[data-bs-dialog-portal]');
+      if (existing) {
+        setPortalContainer(existing);
+        return;
+      }
+      const container = document.createElement('div');
+      container.setAttribute('data-bs-dialog-portal', 'true');
+      rootNode.appendChild(container);
+      setPortalContainer(container);
+    } else {
+      setPortalContainer(null);
+    }
+  }, []);
+
+  const btnResetStyle = classNames(
+    'w-[94px] h-[34px] flex items-center justify-center rounded-[4px]'
+  );
+
+  const isData = variant === 'data-previewer';
+  const isFields = variant === 'fields-previewer';
+
+  const titleCls = classNames('font-[700]', {
+    'text-[16px]': isFields,
+    'text-[18px]': isData,
+  });
+
+  const effectiveContainer = dialogContainer || portalContainer || undefined;
+
+  const operations = customOperationElement ? (
+    customOperationElement
+  ) : (
+      <div className="flex items-center gap-[10px]">
+        {onClear && (
+          <BaseButton
+            className={cn('w-[34px] h-[34px] text-[#8d8d8d] p-0 flex items-center justify-center hover:border-[#e0e0e0] hover:text-[#8d8d8d] border border-solid border-[#e0e0e0] ', {
+                'pointer-events-none opacity-50': disableOperation || loading,
+            })}
+            tooltip='清除全部'
+            icon={<BrushIcon />}
+            onClick={() => {
+              onClear?.();
+            }}
+          />
+        )}
+
+        {onSave && (
+          <button
+            onClick={async () => {
+              setLoading(true);
+              try {
+                await onSave();
+              } catch (error) {
+                console.error('Save failed:', error);
+              } finally {
+                setLoading(false);
+              }
+            }}
+            className={classNames(
+              btnResetStyle,
+              'flex items-center gap-[6px]',
+              'bg-[#0265FF] hover:opacity-90 text-white text-[14px]',
+              {
+                'w-[115px]': isData,
+                'pointer-events-none opacity-50': disableOperation || loading,
+              }
+            )}
+          >
+            {loading ? <Spinner /> : null}
+            {isFields ? '保存' : '添加到表单'}
+          </button>
+        )}
+        {onCancel && (
+          <button
+            onClick={() => {
+              // if (disableOperation) {
+              //   return;
+              // }
+
+              if (disableConfirm) {
+                onCancel?.();
+                onBackClick?.();
+                return;
+              }
+
+              setShowConfirmDialog(true);
+            }}
+            className={classNames(
+              btnResetStyle,
+              'text-[#121111] text-[14px] bg-[#fff] border border-solid border-[#e0e0e0] hover:bg-[#f0f0f0]',
+              {
+                'pointer-events-none opacity-50': loading,
+              }
+            )}
+          >
+            {closeBtnLabel || '取消'}
+          </button>
+        )}
+      </div>
+  )
+
+  const contentJsx = (
+    <>
+      <div className="flex items-center gap-3">
+        {isData ? null : (
+          <IconBtn
+            icon={<BackIcon />}
+            onClick={() => {
+              // if (disableOperation) {
+              //   return;
+              // }
+
+              if (disableConfirm) {
+                onCancel?.();
+                onBackClick?.();
+                return;
+              }
+
+              setShowConfirmDialog(true);
+            }}
+            className="text-[#0265FF] hover:text-[#0265FF]"
+          />
+        )}
+        <span className={titleCls}>{title}</span>
+        {tips && active && (
+          <div className="flex items-center gap-[6px] text-[#999999] text-[12px]">
+            <InfoIcon />
+            {tips}
+          </div>
+        )}
+      </div>
+      {operations}
+      <ConfirmDialog
+        container={effectiveContainer}
+        open={showConfirmDialog}
+        onOpenChange={setShowConfirmDialog}
+        title={confirmTitle || 'AI表单搭建有修改，是否保存？'}
+        description={confirmContent || '您修改了AI表单搭建但没有保存，是否需要保存并继续？'}
+        onLinkClick={() => setShowConfirmDialog(false)}
+        onCancel={() => {
+          setShowConfirmDialog(false);
+          onCancel?.();
+          onBackClick?.();
+        }}
+        onConfirm={async () => {
+          setShowConfirmDialog(false);
+          setLoading(true);
+          try {
+            await onSave?.(true);
+          } catch (error) {
+            console.error('Save failed:', error);
+          } finally {
+            setLoading(false);
+          }
+        }}
+      />
+    </>
+  );
+
+  const borderCls = classNames({
+    'border-b border-solid border-[#e0e0e0]': !active && isFields,
+    'border-none': isData,
+  });
+
+  if (active) {
+    return (
+      <div ref={setRootRef}>
+        <LinearGradientColorBgAnimation
+          height={52}
+          style={style}
+          childrenContainerStyle={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '0 20px',
+          }}
+        >
+          {contentJsx}
+        </LinearGradientColorBgAnimation>
+      </div>
+    );
+  }
+
+  const paddingCls = classNames({
+    'px-[20px]': isFields,
+    'px-[10px]': isData,
+  });
+
+  return (
+    <div
+      ref={setRootRef}
+      style={style}
+      className={classNames(
+        'w-full h-[52px] flex items-center justify-between',
+        paddingCls,
+        className,
+        borderCls
+      )}
+    >
+      {contentJsx}
+    </div>
+  );
+};

package/src/components/primary-confirm-btn.tsx

@@ -0,0 +1,58 @@
+import { Button, ButtonProps } from './ui/button';
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+
+export interface PrimaryConfirmBtnProps extends ButtonProps {
+  text?: string;
+  prefixDesc?: string;
+  icon?: React.ReactNode;
+  disabledWithInfo?: boolean;
+  light?: boolean;
+}
+
+export const PrimaryConfirmBtn = ({
+  text = '确认',
+  prefixDesc,
+  className,
+  disabled,
+  light,
+  icon,
+  children,
+  ...rest
+}: PrimaryConfirmBtnProps) => {
+  const btn = (
+    <Button
+      {...rest}
+      variant="default"
+      disabled={disabled}
+      className={cn(
+        'px-[10px] py-0 rounded-[100px] text-[14px] leading-normal h-[34px] min-w-[100px] cursor-pointer w-full disabled:opacity-100 gap-[6px] shadow-none',
+        disabled
+          ? 'bg-[#f0f0f0] text-[#999] cursor-not-allowed shadow-none'
+          : light
+            ? 'bg-[#F0F6FF] text-[#0265FF] hover:bg-[#0265FF] hover:text-white'
+            : 'bg-[#0265ff] text-white hover:bg-[#0265ff]/80',
+
+        transCls,
+        {
+          '!bg-[#E5E6EB] !text-[#121111] shadow-none font-[400]': rest.disabledWithInfo,
+        },
+        className
+      )}
+    >
+      {icon}
+      {children || text}
+    </Button>
+  );
+
+  if (!prefixDesc) {
+    return btn;
+  }
+
+  return (
+    <div className="flex flex-col items-start gap-2.5">
+      <p className="text-[#4D609F]">{prefixDesc}</p>
+      {btn}
+    </div>
+  );
+};

package/src/components/primary-entry-btn.tsx

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { Button, ButtonProps } from './ui/button';
+import { BotIcon } from './bot-icon';
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+
+export interface PrimaryEntryBtnProps extends ButtonProps {
+  minimal?: boolean;
+  entryVariant?: 'default' | 'ghost' | 'selected' | 'light';
+  icon?: ReactNode;
+}
+
+export const PrimaryEntryBtn = ({
+  children,
+  className,
+  minimal,
+  entryVariant = 'default',
+  icon,
+  ...rest
+}: PrimaryEntryBtnProps) => {
+  const variantStyles = {
+    // background: linear-gradient(180deg, #267AFF 0%, #B2EEFF 100%);
+    default:
+      "relative overflow-hidden bg-[linear-gradient(180deg,#DBE9FF_0%,#E9FFFD_100%)] h-[30px] hover:text-white before:content-[''] before:absolute before:inset-0 before:z-0 before:bg-[linear-gradient(180deg,#267AFF_0%,#B2EEFF_100%)] before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-200 before:ease-out font-[500] text-[#0265ff]",
+    ghost: 'bg-transparent text-[#030303] font-[400] px-[10px] hover:bg-[#EFF0F6] h-[34px]',
+    light: 'text-[#030303] font-[400] px-[10px] bg-[#F0F6FF] hover:bg-[#d8dde5] h-[34px]',
+    selected: 'bg-[#EFF0F6] text-[#030303] font-[400] px-[10px]',
+  };
+
+  return (
+    <Button
+      {...rest}
+      variant="entry"
+      size="entry"
+      className={cn(
+        'rounded-[4px] cursor-pointer',
+        transCls,
+        variantStyles[entryVariant],
+        className
+      )}
+    >
+      <span className="relative z-10 inline-flex items-center gap-1.5">
+        {icon ?? <BotIcon />}
+        {minimal ? null : children}
+      </span>
+    </Button>
+  );
+};

package/src/components/scroll-to-bottom-btn.tsx

@@ -0,0 +1,28 @@
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+import { ScrollArrowDownIcon } from './bs-icons';
+
+export interface ScrollToBottomProps {
+  onClick?: () => void;
+  className?: string;
+}
+
+export const ScrollToBottomBtn = ({ onClick, className }: ScrollToBottomProps) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'inline-flex items-center justify-center',
+        'w-[36px] h-[36px] rounded-full',
+        'bg-white text-[#666] shadow-[0px_0px_14px_0px_rgba(0,0,0,0.1)]',
+        'hover:shadow-[0px_14px_14px_0px_rgba(0,0,0,0.14)]',
+        'cursor-pointer hover:text-[#333] aspect-square',
+        transCls,
+        className
+      )}
+    >
+      <ScrollArrowDownIcon />
+    </button>
+  );
+};

package/src/components/split-line.tsx

@@ -0,0 +1,9 @@
+import { cn } from '../lib/utils';
+
+export interface SplitLineProps {
+  className?: string;
+}
+
+export const SplitLine = ({ className }: SplitLineProps) => {
+  return <div className={cn('h-[1px] w-full bg-[#E0E0E0]', className)} />;
+};

package/src/components/square-checker.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cn } from '../lib/utils';
+import { CheckerInBoxIcon } from './bs-icons';
+
+const SquareInBoxIcon = () => {
+  // size 8, border 1px svg
+  return (
+    <svg
+      width="8"
+      height="8"
+      viewBox="0 0 8 8"
+      // fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="0.5" y="0.5" width="7" height="7" rx="1" fill="#0265ff" />
+    </svg>
+  );
+};
+
+export type SquareCheckerProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+  /** Optional label rendered beside the checkbox */
+  children?: React.ReactNode;
+  readonly?: boolean;
+  intermediate?: boolean;
+};
+
+export const SquareChecker = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  SquareCheckerProps
+>(({ className, children, id, readonly, disabled, intermediate, ...props }, ref) => {
+  const generatedId = React.useId();
+  const checkboxId = id ?? generatedId;
+
+  return (
+    <label
+      htmlFor={checkboxId}
+      className={cn(
+        'inline-flex items-center gap-[6px] select-none text-[#121111] text-[14px]',
+        disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+        {
+          'pointer-events-none': readonly,
+        }
+      )}
+    >
+      <CheckboxPrimitive.Root
+        ref={ref}
+        id={checkboxId}
+        disabled={disabled}
+        className={cn(
+          // base layout
+          'inline-flex shrink-0 items-center justify-center',
+          'w-[16px] h-[16px] rounded-[2px] box-border border',
+          'transition-colors duration-200',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0265FF] focus-visible:ring-offset-1',
+          // normal: gray border, white bg
+          'border-[#E0E0E0] bg-white',
+          // hover: blue border (browsers suppress hover on disabled <button>)
+          'hover:border-[#0265FF]',
+          // checked: blue fill
+          'data-[state=checked]:bg-[#0265FF] data-[state=checked]:border-[#0265FF]',
+          // disabled unchecked: gray bg + gray border
+          'disabled:cursor-not-allowed disabled:bg-[#F0F0F0] disabled:border-[#C2C2C2]',
+          // disabled checked: use muted gray fill
+          'disabled:data-[state=checked]:bg-[#C2C2C2] disabled:data-[state=checked]:border-[#C2C2C2]',
+          // indeterminate: blue fill
+          intermediate && 'bg-white border-[#0265FF] text-[#0265FF]',
+          className,
+          {
+            'opacity-50': readonly,
+          }
+        )}
+        {...props}
+      >
+        <CheckboxPrimitive.Indicator className="text-white" forceMount={intermediate || undefined}>
+          {intermediate ? <SquareInBoxIcon /> : <CheckerInBoxIcon />}
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+
+      {children != null && (
+        <span className={cn('text-sm leading-none', disabled && 'text-[#C2C2C2]')}>{children}</span>
+      )}
+    </label>
+  );
+});
+
+SquareChecker.displayName = 'SquareChecker';

package/src/components/tab-radio-group.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+import { cn } from '../lib/utils';
+import { BsTooltip } from './tooltip';
+
+export interface TabRadioOption {
+  value: string;
+  label: React.ReactNode;
+  tooltips?: string;
+  className?: string;
+}
+
+export interface TabRadioGroupProps extends Omit<
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,
+  'children'
+> {
+  options: TabRadioOption[];
+}
+
+const TabRadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  TabRadioGroupProps
+>(({ className, options, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      ref={ref}
+      className={cn(
+        'flex flex-col items-start justify-center p-[2px] rounded-[4px] bg-[#EFF0F6]',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex gap-[2px] items-center w-full">
+        {options.map((option) => (
+          <TabRadioItem
+            key={option.value}
+            value={option.value}
+            tooltips={option.tooltips}
+            className={option.className}
+          >
+            {option.label}
+          </TabRadioItem>
+        ))}
+      </div>
+    </RadioGroupPrimitive.Root>
+  );
+});
+TabRadioGroup.displayName = 'TabRadioGroup';
+
+interface TabRadioItemProps extends React.ComponentPropsWithoutRef<
+  typeof RadioGroupPrimitive.Item
+> {
+  children: React.ReactNode;
+  tooltips?: string;
+  className?: string;
+}
+
+const TabRadioItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  TabRadioItemProps
+>(({ className, children, tooltips, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'flex-1 h-[30px] flex items-center justify-center px-[10px] py-[7px] rounded-[4px] text-[14px] text-[#121111] cursor-pointer',
+        'border border-solid border-[#EFF0F6] bg-transparent',
+        'transition-all ease-out duration-200',
+        'outline-none',
+        'hover:text-[#121111] hover:border-[#E0E0E0] hover:bg-white',
+        'data-[state=checked]:text-[#0265FF] data-[state=checked]:border-[#E0E0E0] data-[state=checked]:bg-white',
+        className
+      )}
+      {...props}
+    >
+      {tooltips ? <BsTooltip content={tooltips}>{children}</BsTooltip> : children}
+    </RadioGroupPrimitive.Item>
+  );
+});
+TabRadioItem.displayName = 'TabRadioItem';
+
+export { TabRadioGroup, TabRadioItem };

package/src/components/tooltip.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+
+export const BsTooltip = ({
+  children,
+  content,
+}: {
+  children: React.ReactNode;
+  content: React.ReactNode;
+}) => {
+  const triggerRef = useRef<HTMLSpanElement | null>(null);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const triggerEl = triggerRef.current;
+    if (!triggerEl) {
+      return;
+    }
+
+    const rootNode = triggerEl.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+      const existing = rootNode.querySelector<HTMLElement>('[data-bs-tooltip-portal]');
+      if (existing) {
+        setPortalContainer(existing);
+        return;
+      }
+
+      const container = document.createElement('div');
+      container.setAttribute('data-bs-tooltip-portal', 'true');
+      rootNode.appendChild(container);
+      setPortalContainer(container);
+      return;
+    }
+
+    setPortalContainer(null);
+  }, []);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span ref={triggerRef} className="inline-flex">
+          {children}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent
+        portalContainer={portalContainer}
+        className="rounded-[4px] bg-[#525867] px-[12px] !py-[7px] text-[12px] text-white leading-normal max-w-[288px] animate-in fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 duration-200"
+      >
+        {content}
+      </TooltipContent>
+    </Tooltip>
+  );
+};

package/src/components/ui/button.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        entry: '',
+      },
+      size: {
+        default: 'h-[34px] px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-[24px] w-[24px]',
+        entry: 'h-[30px] px-1.5 py-0 gap-1.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };