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

package/src/components/line-checker.tsx

@@ -1,168 +1,168 @@
-import React, { CSSProperties, useEffect, useState } from 'react';
-import classNames from 'classnames';
-import { cn } from '../lib/utils';
-import { CheckerIcon } from './bs-icons';
-import { SquareChecker } from './square-checker';
-
-export interface LineCheckerProps {
-  defaultChecked?: boolean;
-  checked?: boolean;
-  disabled?: boolean;
-  onCheckedChange?: (checked: boolean) => void;
-
-  icon?: React.ReactNode;
-  title: string;
-  shortDesc?: string;
-  className?: string;
-  extra?: React.ReactNode;
-
-  style?: CSSProperties;
-  streaming?: boolean;
-  confirmed?: boolean;
-  readonly?: boolean;
-  /** 字段更新类型：new 淡绿色背景（新增），removed 置灰+中横线（删除） */
-  updateType?: 'new' | 'removed';
-}
-
-export const LineChecker: React.FC<LineCheckerProps> = ({
-  defaultChecked = false,
-  checked: checkedProp,
-  disabled = false,
-  onCheckedChange,
-  icon,
-  className,
-  title,
-  extra,
-  style,
-  streaming,
-  confirmed,
-  readonly,
-  shortDesc,
-  updateType,
-}) => {
-  const [checked, setChecked] = useState(defaultChecked);
-
-  useEffect(() => {
-    if (checkedProp !== undefined) {
-      setChecked(checkedProp);
-    }
-  }, [checkedProp]);
-
-  const handleClick = () => {
-    if (streaming || disabled) return;
-
-    const newChecked = !checked;
-    setChecked(newChecked);
-    onCheckedChange?.(newChecked);
-  };
-
-  const hasExtra = Boolean(extra);
-
-  const checker =
-    confirmed && checked ? (
-      <CheckerIcon className="grow-0 shrink-0 text-[#0265ff]" />
-    ) : (
-      <SquareChecker
-        className={classNames('outline-none grow-0 shrink-0 cursor-pointer', {
-          'mt-[2px]': hasExtra,
-          'opacity-80 cursor-not-allowed': disabled,
-          'opacity-50': streaming,
-          'pointer-events-none': streaming,
-        })}
-        id={title}
-        checked={checked}
-        disabled={disabled || confirmed}
-        onCheckedChange={handleClick}
-      />
-    );
-
-  return (
-    <div
-      className={cn(
-        'flex items-center gap-[10px] px-4 py-[10px] rounded-[4px]',
-        'w-full transition-colors cursor-pointer',
-        {
-          'cursor-not-allowed': disabled,
-          'hover:bg-[#EFF0F6]': !disabled && !updateType,
-          'items-start': hasExtra,
-          'items-center': !hasExtra,
-          'pointer-events-none': streaming || disabled || readonly || confirmed,
-          // 字段更新视觉：新增淡绿背景，删除置灰
-          'bg-[#F0FDF4]': updateType === 'new',
-          'bg-[#F5F5F5]': updateType === 'removed',
-        },
-        className
-      )}
-      style={style}
-      onClick={() => {
-        handleClick();
-      }}
-    >
-      {readonly ? null : checker}
-
-      <div
-        className={classNames('flex flex-col flex-1 min-w-0', {
-          'gap-2.5': hasExtra,
-        })}
-      >
-        <div
-          className={classNames('flex items-center justify-between w-full', {
-            'gap-1.5': !!icon,
-            'gap-2.5': !icon,
-          })}
-        >
-          <div
-            className={classNames('flex items-center gap-[6px] min-w-0', {
-              'flex-1': !!icon,
-              'w-[100px] flex-shrink-0': !icon,
-            })}
-          >
-            {/* Icon */}
-            {icon && (
-              <div className="w-4 h-4 flex-shrink-0 text-[#6F829E] leading-[16px]">{icon}</div>
-            )}
-
-            {/* Title - truncates；removed 时置灰并加中横线 */}
-            <p
-              className={classNames(' min-w-0 text-sm text-[#121111] truncate text-[12px]', {
-                'flex-1': !!icon,
-                'flex-grow-1 flex-shrink-0': !icon,
-                '!text-[#666]': readonly,
-                'line-through !text-[#999]': updateType === 'removed',
-              })}
-            >
-              {title}
-            </p>
-          </div>
-
-          {shortDesc && (
-            <p
-              className={classNames('text-sm text-[#666] text-[12px]', {
-                'whitespace-nowrap flex-shrink-0': !!icon,
-                anywhere: !icon,
-                '!text-[#121111]': readonly,
-                'line-through !text-[#999]': updateType === 'removed',
-              })}
-            >
-              {shortDesc}
-            </p>
-          )}
-        </div>
-        {hasExtra ? (
-          <div
-            className={cn(
-              'overflow-x-auto whitespace-nowrap no-scrollbar flex items-center gap-2',
-              {
-                '!overflow-x-hidden': disabled || readonly || confirmed,
-              }
-            )}
-          >
-            {extra}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-};
-
-export default LineChecker;
+import React, { CSSProperties, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { cn } from '../lib/utils';
+import { CheckerIcon } from './bs-icons';
+import { SquareChecker } from './square-checker';
+
+export interface LineCheckerProps {
+  defaultChecked?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+
+  icon?: React.ReactNode;
+  title: string;
+  shortDesc?: string;
+  className?: string;
+  extra?: React.ReactNode;
+
+  style?: CSSProperties;
+  streaming?: boolean;
+  confirmed?: boolean;
+  readonly?: boolean;
+  /** 字段更新类型：new 淡绿色背景（新增），removed 置灰+中横线（删除） */
+  updateType?: 'new' | 'removed';
+}
+
+export const LineChecker: React.FC<LineCheckerProps> = ({
+  defaultChecked = false,
+  checked: checkedProp,
+  disabled = false,
+  onCheckedChange,
+  icon,
+  className,
+  title,
+  extra,
+  style,
+  streaming,
+  confirmed,
+  readonly,
+  shortDesc,
+  updateType,
+}) => {
+  const [checked, setChecked] = useState(defaultChecked);
+
+  useEffect(() => {
+    if (checkedProp !== undefined) {
+      setChecked(checkedProp);
+    }
+  }, [checkedProp]);
+
+  const handleClick = () => {
+    if (streaming || disabled) return;
+
+    const newChecked = !checked;
+    setChecked(newChecked);
+    onCheckedChange?.(newChecked);
+  };
+
+  const hasExtra = Boolean(extra);
+
+  const checker =
+    confirmed && checked ? (
+      <CheckerIcon className="grow-0 shrink-0 text-[#0265ff]" />
+    ) : (
+      <SquareChecker
+        className={classNames('outline-none grow-0 shrink-0 cursor-pointer', {
+          'mt-[2px]': hasExtra,
+          'opacity-80 cursor-not-allowed': disabled,
+          'opacity-50': streaming,
+          'pointer-events-none': streaming,
+        })}
+        id={title}
+        checked={checked}
+        disabled={disabled || confirmed}
+        onCheckedChange={handleClick}
+      />
+    );
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-[10px] px-4 py-[10px] rounded-[4px]',
+        'w-full transition-colors cursor-pointer',
+        {
+          'cursor-not-allowed': disabled,
+          'hover:bg-[#EFF0F6]': !disabled && !updateType,
+          'items-start': hasExtra,
+          'items-center': !hasExtra,
+          'pointer-events-none': streaming || disabled || readonly || confirmed,
+          // 字段更新视觉：新增淡绿背景，删除置灰
+          'bg-[#F0FDF4]': updateType === 'new',
+          'bg-[#F5F5F5]': updateType === 'removed',
+        },
+        className
+      )}
+      style={style}
+      onClick={() => {
+        handleClick();
+      }}
+    >
+      {readonly ? null : checker}
+
+      <div
+        className={classNames('flex flex-col flex-1 min-w-0', {
+          'gap-2.5': hasExtra,
+        })}
+      >
+        <div
+          className={classNames('flex items-center justify-between w-full', {
+            'gap-1.5': !!icon,
+            'gap-2.5': !icon,
+          })}
+        >
+          <div
+            className={classNames('flex items-center gap-[6px] min-w-0', {
+              'flex-1': !!icon,
+              'w-[100px] flex-shrink-0': !icon,
+            })}
+          >
+            {/* Icon */}
+            {icon && (
+              <div className="w-4 h-4 flex-shrink-0 text-[#6F829E] leading-[16px]">{icon}</div>
+            )}
+
+            {/* Title - truncates；removed 时置灰并加中横线 */}
+            <p
+              className={classNames(' min-w-0 text-sm text-[#121111] truncate text-[12px]', {
+                'flex-1': !!icon,
+                'flex-grow-1 flex-shrink-0': !icon,
+                '!text-[#666]': readonly,
+                'line-through !text-[#999]': updateType === 'removed',
+              })}
+            >
+              {title}
+            </p>
+          </div>
+
+          {shortDesc && (
+            <p
+              className={classNames('text-sm text-[#666] text-[12px]', {
+                'whitespace-nowrap flex-shrink-0': !!icon,
+                anywhere: !icon,
+                '!text-[#121111]': readonly,
+                'line-through !text-[#999]': updateType === 'removed',
+              })}
+            >
+              {shortDesc}
+            </p>
+          )}
+        </div>
+        {hasExtra ? (
+          <div
+            className={cn(
+              'overflow-x-auto whitespace-nowrap no-scrollbar flex items-center gap-2',
+              {
+                '!overflow-x-hidden': disabled || readonly || confirmed,
+              }
+            )}
+          >
+            {extra}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default LineChecker;

package/src/components/linear-gradient-border-btn.tsx

@@ -1,48 +1,48 @@
-import React from 'react';
-import { cn } from '../lib/utils';
-
-export interface LinearGradientBorderBtnProps {
-    children?: React.ReactNode;
-    onClick?: () => void;
-    disabled?: boolean;
-    className?: string;
-}
-
-export const LinearGradientBorderBtn: React.FC<LinearGradientBorderBtnProps> = ({
-    children,
-    onClick,
-    disabled = false,
-    className,
-}) => {
-    return (
-        <div
-            className={cn(
-                "relative rounded-[6px] p-[1px] cursor-pointer h-[34px] flex items-center justify-center",
-                "bg-gradient-to-b from-[#84B4FF] to-[#B1FAFF]",
-                className
-            )}
-            style={{
-                background: 'linear-gradient(180deg, #84B4FF 0%, #B1FAFF 100%)',
-            }}
-        >
-            <button
-                className={cn(
-                    "w-full h-[32px] px-[10px]",
-                    "bg-white rounded-[5px]",
-                    "flex items-center justify-center",
-                    "text-[#0265ff] text-[14px]",
-                    "cursor-pointer",
-                    "transition-all duration-200",
-                    "hover:bg-[#f5f9ff]",
-                    "disabled:opacity-95 disabled:cursor-not-allowed"
-                )}
-                onClick={onClick}
-                disabled={disabled}
-            >
-                {children}
-            </button>
-        </div>
-    );
-};
-
-export default LinearGradientBorderBtn;
+import React from 'react';
+import { cn } from '../lib/utils';
+
+export interface LinearGradientBorderBtnProps {
+    children?: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+
+export const LinearGradientBorderBtn: React.FC<LinearGradientBorderBtnProps> = ({
+    children,
+    onClick,
+    disabled = false,
+    className,
+}) => {
+    return (
+        <div
+            className={cn(
+                "relative rounded-[6px] p-[1px] cursor-pointer h-[34px] flex items-center justify-center",
+                "bg-gradient-to-b from-[#84B4FF] to-[#B1FAFF]",
+                className
+            )}
+            style={{
+                background: 'linear-gradient(180deg, #84B4FF 0%, #B1FAFF 100%)',
+            }}
+        >
+            <button
+                className={cn(
+                    "w-full h-[32px] px-[10px]",
+                    "bg-white rounded-[5px]",
+                    "flex items-center justify-center",
+                    "text-[#0265ff] text-[14px]",
+                    "cursor-pointer",
+                    "transition-all duration-200",
+                    "hover:bg-[#f5f9ff]",
+                    "disabled:opacity-95 disabled:cursor-not-allowed"
+                )}
+                onClick={onClick}
+                disabled={disabled}
+            >
+                {children}
+            </button>
+        </div>
+    );
+};
+
+export default LinearGradientBorderBtn;

package/src/components/linear-gradient-color-bg-animation.tsx

@@ -1,103 +1,103 @@
-export const LinearGradientColorBgAnimation = ({ 
-  children,
-  width,
-  height,
-  style,
-  childrenContainerStyle,
-}: { 
-  children?: React.ReactNode;
-  width?: string | number;
-  height?: string | number;
-  style?: React.CSSProperties;
-  childrenContainerStyle?: React.CSSProperties;
-}) => {
-  return (
-    <div
-      style={{
-        position: 'relative',
-        width: width ?? '100%',
-        height: height ?? '100%',
-        overflow: 'hidden',
-        borderRadius: '10px 10px 0 0',
-        ...style,
-      }}
-    >
-      <div
-        style={{
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          top: 0,
-          left: 0,
-          background: '#F4FFFC',
-        }}
-      />
-      <div
-        style={{
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          top: 0,
-          left: 0,
-          background: 'radial-gradient(circle at 25% -15%, #EEFFCE 0%, transparent 55%)',
-          filter: 'blur(70px)',
-          animation: 'floatCircle1 4s ease-in-out infinite',
-        }}
-      />
-      <div
-        style={{
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          top: 0,
-          left: 0,
-          background: 'radial-gradient(circle at 80% 200%, #CEFFFB 0%, transparent 45%)',
-          filter: 'blur(70px)',
-          animation: 'floatCircle2 5s ease-in-out infinite 0.5s',
-        }}
-      />
-      <div style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%', ...childrenContainerStyle }}>
-        {children}
-      </div>
-      <style>{`
-        @keyframes floatCircle1 {
-          0%, 100% {
-            transform: translate(0%, 0%) scale(1.2);
-            opacity: 1;
-          }
-          25% {
-            transform: translate(-15%, 20%) scale(1.6);
-            opacity: 0.95;
-          }
-          50% {
-            transform: translate(12%, -15%) scale(0.9);
-            opacity: 1;
-          }
-          75% {
-            transform: translate(-10%, 10%) scale(1.4);
-            opacity: 0.9;
-          }
-        }
-        
-        @keyframes floatCircle2 {
-          0%, 100% {
-            transform: translate(0%, 0%) scale(1.1);
-            opacity: 1;
-          }
-          30% {
-            transform: translate(18%, -12%) scale(1.5);
-            opacity: 1;
-          }
-          60% {
-            transform: translate(-12%, 15%) scale(0.85);
-            opacity: 0.95;
-          }
-          85% {
-            transform: translate(14%, -8%) scale(1.3);
-            opacity: 0.9;
-          }
-        }
-      `}</style>
-    </div>
-  );
-};
+export const LinearGradientColorBgAnimation = ({ 
+  children,
+  width,
+  height,
+  style,
+  childrenContainerStyle,
+}: { 
+  children?: React.ReactNode;
+  width?: string | number;
+  height?: string | number;
+  style?: React.CSSProperties;
+  childrenContainerStyle?: React.CSSProperties;
+}) => {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: width ?? '100%',
+        height: height ?? '100%',
+        overflow: 'hidden',
+        borderRadius: '10px 10px 0 0',
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          top: 0,
+          left: 0,
+          background: '#F4FFFC',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          top: 0,
+          left: 0,
+          background: 'radial-gradient(circle at 25% -15%, #EEFFCE 0%, transparent 55%)',
+          filter: 'blur(70px)',
+          animation: 'floatCircle1 4s ease-in-out infinite',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          top: 0,
+          left: 0,
+          background: 'radial-gradient(circle at 80% 200%, #CEFFFB 0%, transparent 45%)',
+          filter: 'blur(70px)',
+          animation: 'floatCircle2 5s ease-in-out infinite 0.5s',
+        }}
+      />
+      <div style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%', ...childrenContainerStyle }}>
+        {children}
+      </div>
+      <style>{`
+        @keyframes floatCircle1 {
+          0%, 100% {
+            transform: translate(0%, 0%) scale(1.2);
+            opacity: 1;
+          }
+          25% {
+            transform: translate(-15%, 20%) scale(1.6);
+            opacity: 0.95;
+          }
+          50% {
+            transform: translate(12%, -15%) scale(0.9);
+            opacity: 1;
+          }
+          75% {
+            transform: translate(-10%, 10%) scale(1.4);
+            opacity: 0.9;
+          }
+        }
+        
+        @keyframes floatCircle2 {
+          0%, 100% {
+            transform: translate(0%, 0%) scale(1.1);
+            opacity: 1;
+          }
+          30% {
+            transform: translate(18%, -12%) scale(1.5);
+            opacity: 1;
+          }
+          60% {
+            transform: translate(-12%, 15%) scale(0.85);
+            opacity: 0.95;
+          }
+          85% {
+            transform: translate(14%, -8%) scale(1.3);
+            opacity: 0.9;
+          }
+        }
+      `}</style>
+    </div>
+  );
+};