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

package/src/components/form-info-editor.tsx

@@ -1,263 +1,263 @@
-import { cn } from '../lib/utils';
-import { FORM_ICON_OPTIONS, transCls } from '../const/ui';
-import { useState, memo, useEffect } from 'react';
-import { ChevronDownIcon } from './ui/icons';
-import { PrimaryConfirmBtn } from './primary-confirm-btn';
-import { EditIcon } from './bs-icons';
-import { FontIcon } from './font-icon';
-import { FormIconOption } from '../types';
-
-export type { FormIconOption };
-
-// Form icon component with blue background - dynamically shows selected icon
-const FormIcon = ({
-  size = 36,
-  code,
-  value,
-  style,
-  render,
-}: {
-  size?: number;
-  code?: string;
-  value?: number;
-  style?: React.CSSProperties;
-  render?: (icon: FormIconOption & { size: number}) => React.ReactNode; // Optional custom renderer for icons
-}) => {
-  const borderRadius = size * 0.238; // ~8.57px for 36px container
-  const fontSize = size * 0.6875; // Icon font size relative to container
-
-  return (
-    <div
-      className="relative flex items-center justify-center bg-[#0265ff] flex-shrink-0 text-white"
-      style={{
-        width: size,
-        height: size,
-        borderRadius,
-        fontSize: fontSize,
-        ...style,
-      }}
-    >
-      {render ? render({ id: (value ?? 0).toString(), value: value ?? 0, code: code || FORM_ICON_OPTIONS[0].code, label: '', size: fontSize }) : (
-        <FontIcon code={code || FORM_ICON_OPTIONS[0].code} style={{ fontSize }} />
-      )}
-    </div>
-  );
-};
-
-export interface FormInfoEditorProps {
-  /** Form name */
-  name: string;
-  /** Callback when name changes */
-  onNameChange?: (name: string) => void;
-  /** Currently selected icon option */
-  selectedIcon?: FormIconOption;
-  /** Available icon options */
-  iconOptions?: FormIconOption[];
-  /** Callback when icon changes */
-  onIconChange?: (icon: FormIconOption) => void;
-  /** Callback when confirm button is clicked */
-  onConfirm?: (name: string, iconVal: number) => void;
-  /** Whether the editor is in expanded mode */
-  expanded?: boolean;
-  /** Callback when expanded state changes */
-  onExpandedChange?: (expanded: boolean) => void;
-  /** Custom class name */
-  className?: string;
-  onMount?: () => void;
-  readonly?: boolean;
-  iconRenderer?: (icon: FormIconOption & { size: number}) => React.ReactNode; // Optional custom renderer for icons
-}
-
-/**
- * Form Info Editor Component
- * Displays form name and icon with an expandable editor interface
- */
-export const FormInfoEditor = memo(
-  ({
-    name,
-    onNameChange,
-    onMount,
-    selectedIcon = FORM_ICON_OPTIONS[0],
-    iconOptions = [],
-    onIconChange,
-    readonly,
-    onConfirm,
-    expanded: controlledExpanded,
-    onExpandedChange,
-    iconRenderer,
-    className,
-  }: FormInfoEditorProps) => {
-    const [internalExpanded, setInternalExpanded] = useState(false);
-    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-
-    const expanded = controlledExpanded ?? internalExpanded;
-    const setExpanded = (value: boolean) => {
-      setInternalExpanded(value);
-      onExpandedChange?.(value);
-    };
-
-    const [nameVal, setNameVal] = useState(name);
-    const [iconOpt, setIconOpt] = useState(selectedIcon);
-
-    useEffect(() => {
-      onMount?.();
-    }, []);
-
-    // Default Status (Collapsed)
-    if (!expanded || readonly) {
-      return (
-        <div
-          className={cn(
-            'bg-white hover:bg-[#fafafa] border border-[#e0e0e0] rounded-[10px] px-[10px] py-0 flex items-center justify-between h-[56px] cursor-pointer',
-            transCls,
-            className,
-            'duration-100'
-          )}
-          onClick={() => {
-            if (readonly) return;
-            setExpanded(true);
-          }}
-        >
-          {/* Left side: Form icon and name */}
-          <div className="flex items-center gap-[10px] min-w-0 flex-1 mr-[10px]">
-            <FormIcon size={36} code={iconOpt?.code} render={iconRenderer} value={iconOpt?.value} />
-            <p className="text-[14px] text-black leading-normal truncate">{nameVal}</p>
-          </div>
-
-          <button
-            onClick={() => {
-              if (readonly) return;
-              setExpanded(true);
-            }}
-            className={cn(
-              'w-[16px] h-[16px] flex items-center justify-center cursor-pointer hover:text-[#0265ff]',
-              transCls,
-              {
-                'pointer-events-none opacity-0': readonly,
-              }
-            )}
-          >
-            <EditIcon />
-          </button>
-        </div>
-      );
-    }
-
-    // Expanded Status (Edit mode)
-    return (
-      <div
-        className={cn(
-          'bg-[#fafafa] border border-[#e0e0e0] rounded-[10px] p-[12px] flex flex-col gap-[22px]',
-          transCls,
-          className,
-          'duration-100'
-        )}
-      >
-        {/* Name field */}
-        <div className="flex flex-col gap-[10px] w-full">
-          <p className="text-[14px] text-[#030303] font-bold leading-normal">名称</p>
-          <input
-            type="text"
-            value={nameVal}
-            onChange={(e) => {
-              setNameVal(e.target.value);
-            }}
-            onBlur={() => {
-              onNameChange?.(nameVal);
-            }}
-            className={cn(
-              'bg-white border border-[#e0e0e0] rounded-[4px] h-[34px] px-[10px] py-[7px] w-full',
-              'text-[14px] text-[#030303] leading-normal outline-none',
-              'focus:border-[#0265ff]',
-              'hover:border-[#0265ff]',
-              transCls
-            )}
-          />
-        </div>
-
-        {/* Icon field */}
-        <div className="flex flex-col gap-[10px] w-full">
-          <p className="text-[14px] text-[#030303] font-bold leading-normal">图标</p>
-          <div className="relative" style={{ zIndex: 10 }}>
-            <button
-              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-              className={cn(
-                'bg-white border border-[#e0e0e0] rounded-[4px] h-[34px] px-[10px] py-[7px] w-full',
-                'flex items-center justify-between cursor-pointer',
-                'hover:border-[#0265ff]',
-                transCls
-              )}
-            >
-              {/* Selected icon */}
-              <div className="flex items-center">
-                <FormIcon size={16} code={iconOpt?.code} render={iconRenderer} value={iconOpt?.value} />
-              </div>
-
-              {/* Dropdown arrow */}
-              <div className={cn('text-[#666]', transCls, isDropdownOpen && 'rotate-180')}>
-                <ChevronDownIcon size={16} />
-              </div>
-            </button>
-
-            {/* Dropdown menu - Grid layout matching Figma design */}
-            {isDropdownOpen && iconOptions.length > 0 && (
-              <div
-                className={cn(
-                  'absolute top-full left-0 mt-[4px] bg-white rounded-[10px] shadow-md z-10 p-[12px]',
-                  transCls
-                )}
-              >
-                <div className="grid grid-cols-6 gap-[8px]">
-                  {iconOptions.map((option) => (
-                    <button
-                      key={option.id}
-                      onClick={() => {
-                        onIconChange?.(option);
-                        setIconOpt(option);
-                        setIsDropdownOpen(false);
-                      }}
-                      className={cn(
-                        'aspect-square rounded-[9.5px] border flex items-center justify-center cursor-pointer overflow-hidden',
-                        iconOpt?.id === option.id
-                          ? 'border-[#0265ff] border-2'
-                          : 'border-[#e0e0e0] hover:bg-[#eff0f6]',
-                        transCls
-                      )}
-                      title={option.label}
-                    >
-                      <FormIcon
-                        code={option.code}
-                        style={{ background: 'transparent', color: '#0265ff' }}
-                        render={iconRenderer}
-                        value={option.value}
-                      />
-                    </button>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Confirm button */}
-        <PrimaryConfirmBtn
-          text="确认"
-          onClick={() => {
-            onConfirm?.(nameVal, iconOpt?.value || 25);
-            setExpanded(false);
-          }}
-        />
-      </div>
-    );
-  },
-  (p1, p2) => {
-    return (
-      p1.name === p2.name &&
-      p1.selectedIcon?.id === p2.selectedIcon?.id &&
-      p1.expanded === p2.expanded &&
-      p1.iconOptions === p2.iconOptions
-    );
-  }
-);
-
-export default FormInfoEditor;
+import { cn } from '../lib/utils';
+import { FORM_ICON_OPTIONS, transCls } from '../const/ui';
+import { useState, memo, useEffect } from 'react';
+import { ChevronDownIcon } from './ui/icons';
+import { PrimaryConfirmBtn } from './primary-confirm-btn';
+import { EditIcon } from './bs-icons';
+import { FontIcon } from './font-icon';
+import { FormIconOption } from '../types';
+
+export type { FormIconOption };
+
+// Form icon component with blue background - dynamically shows selected icon
+const FormIcon = ({
+  size = 36,
+  code,
+  value,
+  style,
+  render,
+}: {
+  size?: number;
+  code?: string;
+  value?: number;
+  style?: React.CSSProperties;
+  render?: (icon: FormIconOption & { size: number}) => React.ReactNode; // Optional custom renderer for icons
+}) => {
+  const borderRadius = size * 0.238; // ~8.57px for 36px container
+  const fontSize = size * 0.6875; // Icon font size relative to container
+
+  return (
+    <div
+      className="relative flex items-center justify-center bg-[#0265ff] flex-shrink-0 text-white"
+      style={{
+        width: size,
+        height: size,
+        borderRadius,
+        fontSize: fontSize,
+        ...style,
+      }}
+    >
+      {render ? render({ id: (value ?? 0).toString(), value: value ?? 0, code: code || FORM_ICON_OPTIONS[0].code, label: '', size: fontSize }) : (
+        <FontIcon code={code || FORM_ICON_OPTIONS[0].code} style={{ fontSize }} />
+      )}
+    </div>
+  );
+};
+
+export interface FormInfoEditorProps {
+  /** Form name */
+  name: string;
+  /** Callback when name changes */
+  onNameChange?: (name: string) => void;
+  /** Currently selected icon option */
+  selectedIcon?: FormIconOption;
+  /** Available icon options */
+  iconOptions?: FormIconOption[];
+  /** Callback when icon changes */
+  onIconChange?: (icon: FormIconOption) => void;
+  /** Callback when confirm button is clicked */
+  onConfirm?: (name: string, iconVal: number) => void;
+  /** Whether the editor is in expanded mode */
+  expanded?: boolean;
+  /** Callback when expanded state changes */
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Custom class name */
+  className?: string;
+  onMount?: () => void;
+  readonly?: boolean;
+  iconRenderer?: (icon: FormIconOption & { size: number}) => React.ReactNode; // Optional custom renderer for icons
+}
+
+/**
+ * Form Info Editor Component
+ * Displays form name and icon with an expandable editor interface
+ */
+export const FormInfoEditor = memo(
+  ({
+    name,
+    onNameChange,
+    onMount,
+    selectedIcon = FORM_ICON_OPTIONS[0],
+    iconOptions = [],
+    onIconChange,
+    readonly,
+    onConfirm,
+    expanded: controlledExpanded,
+    onExpandedChange,
+    iconRenderer,
+    className,
+  }: FormInfoEditorProps) => {
+    const [internalExpanded, setInternalExpanded] = useState(false);
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+    const expanded = controlledExpanded ?? internalExpanded;
+    const setExpanded = (value: boolean) => {
+      setInternalExpanded(value);
+      onExpandedChange?.(value);
+    };
+
+    const [nameVal, setNameVal] = useState(name);
+    const [iconOpt, setIconOpt] = useState(selectedIcon);
+
+    useEffect(() => {
+      onMount?.();
+    }, []);
+
+    // Default Status (Collapsed)
+    if (!expanded || readonly) {
+      return (
+        <div
+          className={cn(
+            'bg-white hover:bg-[#fafafa] border border-[#e0e0e0] rounded-[10px] px-[10px] py-0 flex items-center justify-between h-[56px] cursor-pointer',
+            transCls,
+            className,
+            'duration-100'
+          )}
+          onClick={() => {
+            if (readonly) return;
+            setExpanded(true);
+          }}
+        >
+          {/* Left side: Form icon and name */}
+          <div className="flex items-center gap-[10px] min-w-0 flex-1 mr-[10px]">
+            <FormIcon size={36} code={iconOpt?.code} render={iconRenderer} value={iconOpt?.value} />
+            <p className="text-[14px] text-black leading-normal truncate">{nameVal}</p>
+          </div>
+
+          <button
+            onClick={() => {
+              if (readonly) return;
+              setExpanded(true);
+            }}
+            className={cn(
+              'w-[16px] h-[16px] flex items-center justify-center cursor-pointer hover:text-[#0265ff]',
+              transCls,
+              {
+                'pointer-events-none opacity-0': readonly,
+              }
+            )}
+          >
+            <EditIcon />
+          </button>
+        </div>
+      );
+    }
+
+    // Expanded Status (Edit mode)
+    return (
+      <div
+        className={cn(
+          'bg-[#fafafa] border border-[#e0e0e0] rounded-[10px] p-[12px] flex flex-col gap-[22px]',
+          transCls,
+          className,
+          'duration-100'
+        )}
+      >
+        {/* Name field */}
+        <div className="flex flex-col gap-[10px] w-full">
+          <p className="text-[14px] text-[#030303] font-bold leading-normal">名称</p>
+          <input
+            type="text"
+            value={nameVal}
+            onChange={(e) => {
+              setNameVal(e.target.value);
+            }}
+            onBlur={() => {
+              onNameChange?.(nameVal);
+            }}
+            className={cn(
+              'bg-white border border-[#e0e0e0] rounded-[4px] h-[34px] px-[10px] py-[7px] w-full',
+              'text-[14px] text-[#030303] leading-normal outline-none',
+              'focus:border-[#0265ff]',
+              'hover:border-[#0265ff]',
+              transCls
+            )}
+          />
+        </div>
+
+        {/* Icon field */}
+        <div className="flex flex-col gap-[10px] w-full">
+          <p className="text-[14px] text-[#030303] font-bold leading-normal">图标</p>
+          <div className="relative" style={{ zIndex: 10 }}>
+            <button
+              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+              className={cn(
+                'bg-white border border-[#e0e0e0] rounded-[4px] h-[34px] px-[10px] py-[7px] w-full',
+                'flex items-center justify-between cursor-pointer',
+                'hover:border-[#0265ff]',
+                transCls
+              )}
+            >
+              {/* Selected icon */}
+              <div className="flex items-center">
+                <FormIcon size={16} code={iconOpt?.code} render={iconRenderer} value={iconOpt?.value} />
+              </div>
+
+              {/* Dropdown arrow */}
+              <div className={cn('text-[#666]', transCls, isDropdownOpen && 'rotate-180')}>
+                <ChevronDownIcon size={16} />
+              </div>
+            </button>
+
+            {/* Dropdown menu - Grid layout matching Figma design */}
+            {isDropdownOpen && iconOptions.length > 0 && (
+              <div
+                className={cn(
+                  'absolute top-full left-0 mt-[4px] bg-white rounded-[10px] shadow-md z-10 p-[12px]',
+                  transCls
+                )}
+              >
+                <div className="grid grid-cols-6 gap-[8px]">
+                  {iconOptions.map((option) => (
+                    <button
+                      key={option.id}
+                      onClick={() => {
+                        onIconChange?.(option);
+                        setIconOpt(option);
+                        setIsDropdownOpen(false);
+                      }}
+                      className={cn(
+                        'aspect-square rounded-[9.5px] border flex items-center justify-center cursor-pointer overflow-hidden',
+                        iconOpt?.id === option.id
+                          ? 'border-[#0265ff] border-2'
+                          : 'border-[#e0e0e0] hover:bg-[#eff0f6]',
+                        transCls
+                      )}
+                      title={option.label}
+                    >
+                      <FormIcon
+                        code={option.code}
+                        style={{ background: 'transparent', color: '#0265ff' }}
+                        render={iconRenderer}
+                        value={option.value}
+                      />
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Confirm button */}
+        <PrimaryConfirmBtn
+          text="确认"
+          onClick={() => {
+            onConfirm?.(nameVal, iconOpt?.value || 25);
+            setExpanded(false);
+          }}
+        />
+      </div>
+    );
+  },
+  (p1, p2) => {
+    return (
+      p1.name === p2.name &&
+      p1.selectedIcon?.id === p2.selectedIcon?.id &&
+      p1.expanded === p2.expanded &&
+      p1.iconOptions === p2.iconOptions
+    );
+  }
+);
+
+export default FormInfoEditor;

package/src/components/formula-tag.tsx

@@ -1,32 +1,32 @@
-import { cn } from '../lib/utils';
-import { type FormulaOp, FORMULA_OP_LABEL } from '@baishuyun/types';
-
-/** 统计方式 → 背景色 */
-const FORMULA_OP_COLOR: Record<FormulaOp, string> = {
-  sum: '#3767F1',
-  max: '#F06648',
-  min: '#4ACC8C',
-  average: '#4AC0EC',
-  count: '#9362CE',
-  countDistinct: '#F168B6',
-};
-
-export interface FormulaTagProps {
-  /** 统计方式 */
-  type: FormulaOp;
-  className?: string;
-}
-
-export const FormulaTag = ({ type, className }: FormulaTagProps) => {
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center justify-center rounded-[100px] px-[6px] text-[14px] leading-[20px] text-white',
-        className
-      )}
-      style={{ backgroundColor: FORMULA_OP_COLOR[type] }}
-    >
-      {FORMULA_OP_LABEL[type]}
-    </span>
-  );
-};
+import { cn } from '../lib/utils';
+import { type FormulaOp, FORMULA_OP_LABEL } from '@baishuyun/types';
+
+/** 统计方式 → 背景色 */
+const FORMULA_OP_COLOR: Record<FormulaOp, string> = {
+  sum: '#3767F1',
+  max: '#F06648',
+  min: '#4ACC8C',
+  average: '#4AC0EC',
+  count: '#9362CE',
+  countDistinct: '#F168B6',
+};
+
+export interface FormulaTagProps {
+  /** 统计方式 */
+  type: FormulaOp;
+  className?: string;
+}
+
+export const FormulaTag = ({ type, className }: FormulaTagProps) => {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center justify-center rounded-[100px] px-[6px] text-[14px] leading-[20px] text-white',
+        className
+      )}
+      style={{ backgroundColor: FORMULA_OP_COLOR[type] }}
+    >
+      {FORMULA_OP_LABEL[type]}
+    </span>
+  );
+};