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

package/src/components/collapsible-txt-msg.tsx

@@ -1,75 +1,75 @@
-import { ReactNode, useState } from 'react';
-import { cn } from '../lib/utils';
-import { transCls } from '../const/ui';
-import { AnalysisIcon, ChevronIcon } from './bs-icons';
-import classNames from 'classnames';
-
-export interface CollapsibleTxtMsgProps {
-  title: string;
-  content?: string;
-  icon?: ReactNode;
-  defaultOpen?: boolean;
-  children?: ReactNode;
-
-  ghost?: boolean;
-
-  disableExpand?: boolean;
-}
-
-export const CollapsibleTxtMsg = ({
-  title,
-  ghost,
-  content,
-  icon,
-  disableExpand,
-  children,
-  defaultOpen,
-}: CollapsibleTxtMsgProps) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-
-  const cls = classNames({
-    'bg-[#fafafa] border border-[#e0e0e0] border-solid p-2.5': !ghost
-  })
-
-  const isGhostOpen = isOpen && ghost;
-
-  const t = isGhostOpen ? '' : title;
-
-  return (
-    <div className={classNames("flex flex-col gap-2.5 rounded-lg w-full", cls)}>
-      <div
-        className={cn('flex items-center justify-between w-full', {
-          'cursor-pointer': !disableExpand,
-        })}
-        onClick={() => {
-          if (disableExpand) return;
-
-          setIsOpen(!isOpen);
-        }}
-      >
-        <div className="flex gap-2.5 items-center">
-          <div className="w-4 h-4 shrink-0 flex items-center">{icon || <AnalysisIcon />}</div>
-          <p className="text-[#666] text-[14px] leading-normal">{t}</p>
-        </div>
-        <button
-          onClick={() => {
-            if (disableExpand) return;
-            setIsOpen(!isOpen);
-          }}
-          className={cn(
-            'flex items-center justify-center w-5 h-5 rounded-[4px] cursor-pointer hover:bg-[#EFF0F6]',
-            transCls,
-            {
-              'pointer-events-none opacity-0': disableExpand,
-            }
-          )}
-        >
-          <ChevronIcon isOpen={isOpen} />
-        </button>
-      </div>
-      {isOpen && !disableExpand && (
-        <div className="text-[#121111] text-[14px] word-wrap">{content || children}</div>
-      )}
-    </div>
-  );
-};
+import { ReactNode, useState } from 'react';
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+import { AnalysisIcon, ChevronIcon } from './bs-icons';
+import classNames from 'classnames';
+
+export interface CollapsibleTxtMsgProps {
+  title: string;
+  content?: string;
+  icon?: ReactNode;
+  defaultOpen?: boolean;
+  children?: ReactNode;
+
+  ghost?: boolean;
+
+  disableExpand?: boolean;
+}
+
+export const CollapsibleTxtMsg = ({
+  title,
+  ghost,
+  content,
+  icon,
+  disableExpand,
+  children,
+  defaultOpen,
+}: CollapsibleTxtMsgProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const cls = classNames({
+    'bg-[#fafafa] border border-[#e0e0e0] border-solid p-2.5': !ghost
+  })
+
+  const isGhostOpen = isOpen && ghost;
+
+  const t = isGhostOpen ? '' : title;
+
+  return (
+    <div className={classNames("flex flex-col gap-2.5 rounded-lg w-full", cls)}>
+      <div
+        className={cn('flex items-center justify-between w-full gap-2.5', {
+          'cursor-pointer': !disableExpand,
+        })}
+        onClick={() => {
+          if (disableExpand) return;
+
+          setIsOpen(!isOpen);
+        }}
+      >
+        <div className="flex gap-2.5 items-center">
+          <div className="w-4 h-4 shrink-0 flex items-center">{icon || <AnalysisIcon />}</div>
+          <p className="text-[#666] text-[14px] leading-normal">{t}</p>
+        </div>
+        <button
+          onClick={() => {
+            if (disableExpand) return;
+            setIsOpen(!isOpen);
+          }}
+          className={cn(
+            'flex items-center justify-center w-5 h-5 rounded-[4px] cursor-pointer hover:bg-[#EFF0F6]',
+            transCls,
+            {
+              'pointer-events-none opacity-0': disableExpand,
+            }
+          )}
+        >
+          <ChevronIcon isOpen={isOpen} />
+        </button>
+      </div>
+      {isOpen && !disableExpand && (
+        <div className="text-[#121111] text-[14px] word-wrap break-all max-w-full">{content || children}</div>
+      )}
+    </div>
+  );
+};

package/src/components/collapsible.tsx

@@ -1,9 +1,9 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-
-const Collapsible = CollapsiblePrimitive.Root
-
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
-
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/components/confirm-dialog.tsx

@@ -1,139 +1,139 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from './ui/dialog';
-import { QuestionIcon } from './bs-icons';
-import { cn } from '../lib/utils';
-import { BaseButton } from './base-button';
-
-export interface ConfirmDialogProps {
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  title: string;
-  description?: string;
-  /** Text for the left link button */
-  linkText?: string;
-  /** Callback when link button is clicked */
-  onLinkClick?: () => void;
-  /** Text for the cancel button */
-  cancelText?: string;
-  /** Callback when cancel button is clicked */
-  onCancel?: () => void;
-  /** Text for the confirm button */
-  confirmText?: string;
-  /** Callback when confirm button is clicked */
-  onConfirm?: () => void;
-  /** Whether to show the link button */
-  showLink?: boolean;
-  /** Whether to show the cancel button */
-  showCancel?: boolean;
-  /** Container element for the dialog portal */
-  container?: HTMLElement;
-}
-
-export function ConfirmDialog({
-  open,
-  onOpenChange,
-  title,
-  description,
-  linkText = '留在此页',
-  onLinkClick,
-  cancelText = '不保存',
-  onCancel,
-  confirmText = '保存并继续',
-  onConfirm,
-  container,
-  showLink = true,
-  showCancel = true,
-}: ConfirmDialogProps) {
-  const btnStyle = {
-    borderRadius: 4,
-    padding: '6px 20px',
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        container={container}
-        className={cn(
-          'w-[480px] max-w-[480px] p-0 gap-0 rounded-[10px] border-none',
-          'shadow-[0px_0px_10px_0px_rgba(0,0,0,0.04)]',
-          '[&>button]:hidden'
-        )}
-      >
-        <DialogHeader className="flex flex-row items-start gap-[10px] p-9 pb-0">
-          <div className="size-[30px] shrink-0 text-[#0265FF]">
-            <QuestionIcon />
-          </div>
-          <div className="flex flex-col gap-2">
-            <DialogTitle className="text-[16px] font-[700] text-[#030303] leading-normal">
-              {title}
-            </DialogTitle>
-            {description && (
-              <DialogDescription className="text-[14px] text-[#666] leading-normal">
-                {description}
-              </DialogDescription>
-            )}
-          </div>
-        </DialogHeader>
-
-        <DialogFooter className="flex flex-row items-center !justify-between p-9 pt-6">
-          {showLink ? (
-            <button
-              type="button"
-              className="text-[14px] text-[#0265ff] hover:text-[#0265ff]/80 bg-transparent border-none cursor-pointer"
-              onClick={onLinkClick || (() => {
-                console.log('Link clicked');
-
-                onOpenChange?.(false);
-              })}
-            >
-              {linkText}
-            </button>
-          ) : (
-            <div />
-          )}
-
-          <div className="flex items-center gap-3">
-            {showCancel && (
-              <BaseButton
-                className="hover:text-[#121111]"
-                onClick={onCancel}
-              >
-                {cancelText}
-              </BaseButton>
-              // <button
-              //   type="button"
-              //   onClick={onCancel}
-              //   style={btnStyle}
-              //   className={cn(
-              //     'h-8 px-5 py-1.5 rounded border border-[#e0e0e0]',
-              //     'text-[14px] text-[#030303] bg-white',
-              //     'hover:bg-gray-50 cursor-pointer'
-              //   )}
-              // >
-              //   {cancelText}
-              // </button>
-            )}
-            <button
-              type="button"
-              onClick={onConfirm}
-              style={btnStyle}
-              className={cn(
-                // 'h-8 px-5 py-1.5 rounded',
-                'text-[14px] text-white bg-[#0265ff]',
-                'hover:bg-[#0265ff]/80 cursor-pointer border-none'
-              )}
-            >
-              {confirmText}
-            </button>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { QuestionIcon } from './bs-icons';
+import { cn } from '../lib/utils';
+import { BaseButton } from './base-button';
+
+export interface ConfirmDialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title: string;
+  description?: string;
+  /** Text for the left link button */
+  linkText?: string;
+  /** Callback when link button is clicked */
+  onLinkClick?: () => void;
+  /** Text for the cancel button */
+  cancelText?: string;
+  /** Callback when cancel button is clicked */
+  onCancel?: () => void;
+  /** Text for the confirm button */
+  confirmText?: string;
+  /** Callback when confirm button is clicked */
+  onConfirm?: () => void;
+  /** Whether to show the link button */
+  showLink?: boolean;
+  /** Whether to show the cancel button */
+  showCancel?: boolean;
+  /** Container element for the dialog portal */
+  container?: HTMLElement;
+}
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  linkText = '留在此页',
+  onLinkClick,
+  cancelText = '不保存',
+  onCancel,
+  confirmText = '保存并继续',
+  onConfirm,
+  container,
+  showLink = true,
+  showCancel = true,
+}: ConfirmDialogProps) {
+  const btnStyle = {
+    borderRadius: 4,
+    padding: '6px 20px',
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        container={container}
+        className={cn(
+          'w-[480px] max-w-[480px] p-0 gap-0 rounded-[10px] border-none',
+          'shadow-[0px_0px_10px_0px_rgba(0,0,0,0.04)]',
+          '[&>button]:hidden'
+        )}
+      >
+        <DialogHeader className="flex flex-row items-start gap-[10px] p-9 pb-0">
+          <div className="size-[30px] shrink-0 text-[#0265FF]">
+            <QuestionIcon />
+          </div>
+          <div className="flex flex-col gap-2">
+            <DialogTitle className="text-[16px] font-[700] text-[#030303] leading-normal">
+              {title}
+            </DialogTitle>
+            {description && (
+              <DialogDescription className="text-[14px] text-[#666] leading-normal">
+                {description}
+              </DialogDescription>
+            )}
+          </div>
+        </DialogHeader>
+
+        <DialogFooter className="flex flex-row items-center !justify-between p-9 pt-6">
+          {showLink ? (
+            <button
+              type="button"
+              className="text-[14px] text-[#0265ff] hover:text-[#0265ff]/80 bg-transparent border-none cursor-pointer"
+              onClick={onLinkClick || (() => {
+                console.log('Link clicked');
+
+                onOpenChange?.(false);
+              })}
+            >
+              {linkText}
+            </button>
+          ) : (
+            <div />
+          )}
+
+          <div className="flex items-center gap-3">
+            {showCancel && (
+              <BaseButton
+                className="hover:text-[#121111]"
+                onClick={onCancel}
+              >
+                {cancelText}
+              </BaseButton>
+              // <button
+              //   type="button"
+              //   onClick={onCancel}
+              //   style={btnStyle}
+              //   className={cn(
+              //     'h-8 px-5 py-1.5 rounded border border-[#e0e0e0]',
+              //     'text-[14px] text-[#030303] bg-white',
+              //     'hover:bg-gray-50 cursor-pointer'
+              //   )}
+              // >
+              //   {cancelText}
+              // </button>
+            )}
+            <button
+              type="button"
+              onClick={onConfirm}
+              style={btnStyle}
+              className={cn(
+                // 'h-8 px-5 py-1.5 rounded',
+                'text-[14px] text-white bg-[#0265ff]',
+                'hover:bg-[#0265ff]/80 cursor-pointer border-none'
+              )}
+            >
+              {confirmText}
+            </button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/date-range-picker.tsx

@@ -1,91 +1,91 @@
-import { useState, useCallback } from 'react';
-import { format } from 'date-fns';
-import { cn } from '../lib/utils';
-import { CalendarIcon } from './icons/calendar-icon';
-import { Popover, PopoverTrigger, PopoverContent } from './ui/popover';
-import { Calendar } from './ui/calendar';
-import type { DateRange } from 'react-day-picker';
-
-export interface DateRangePickerProps {
-  value?: DateRange;
-  onChange?: (range: DateRange | undefined) => void;
-  className?: string;
-}
-
-export function DateRangePicker({
-  value,
-  onChange,
-  className,
-}: DateRangePickerProps) {
-  const [open, setOpen] = useState(false);
-
-  const handleSelect = useCallback(
-    (range: DateRange | undefined) => {
-      onChange?.(range);
-      if (range?.from && range?.to) {
-        setOpen(false);
-      }
-    },
-    [onChange]
-  );
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <div
-          className={cn(
-            'flex items-center h-[34px] rounded-[4px] bg-white border border-[#e0e0e0] pl-[2px] pr-[10px] py-[2px] cursor-pointer',
-            'hover:border-[#0265FF]',
-            open && 'border-[#0265FF]',
-            className
-          )}
-        >
-          <div className="flex flex-1 items-center min-w-0">
-            <div className="flex-1 flex items-center justify-center h-[30px] px-[10px] py-[7px] rounded-[4px] min-w-0">
-              <span
-                className={cn(
-                  'flex-1 text-[14px] leading-[normal] truncate',
-                  value?.from
-                    ? 'text-[#030303]'
-                    : 'text-[#999999]'
-                )}
-              >
-                {value?.from
-                  ? format(value.from, 'yyyy-MM-dd')
-                  : '开始日期'}
-              </span>
-            </div>
-            <div className="shrink-0 flex items-center justify-center w-[12px] h-[30px]">
-              <span className="text-[14px] text-[#030303] whitespace-nowrap leading-[normal]">
-                ~
-              </span>
-            </div>
-            <div className="flex-1 flex items-center justify-center h-[30px] px-[10px] py-[7px] rounded-[4px] min-w-0">
-              <span
-                className={cn(
-                  'flex-1 text-[14px] leading-[normal] truncate',
-                  value?.to
-                    ? 'text-[#030303]'
-                    : 'text-[#999999]'
-                )}
-              >
-                {value?.to
-                  ? format(value.to, 'yyyy-MM-dd')
-                  : '结束日期'}
-              </span>
-            </div>
-          </div>
-          <CalendarIcon className="shrink-0 size-[16px] text-[#999999]" />
-        </div>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto min-w-[300px] p-0" align="start">
-        <Calendar
-          mode="range"
-          selected={value}
-          onSelect={handleSelect}
-          numberOfMonths={2}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}
+import { useState, useCallback } from 'react';
+import { format } from 'date-fns';
+import { cn } from '../lib/utils';
+import { CalendarIcon } from './icons/calendar-icon';
+import { Popover, PopoverTrigger, PopoverContent } from './ui/popover';
+import { Calendar } from './ui/calendar';
+import type { DateRange } from 'react-day-picker';
+
+export interface DateRangePickerProps {
+  value?: DateRange;
+  onChange?: (range: DateRange | undefined) => void;
+  className?: string;
+}
+
+export function DateRangePicker({
+  value,
+  onChange,
+  className,
+}: DateRangePickerProps) {
+  const [open, setOpen] = useState(false);
+
+  const handleSelect = useCallback(
+    (range: DateRange | undefined) => {
+      onChange?.(range);
+      if (range?.from && range?.to) {
+        setOpen(false);
+      }
+    },
+    [onChange]
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <div
+          className={cn(
+            'flex items-center h-[34px] rounded-[4px] bg-white border border-[#e0e0e0] pl-[2px] pr-[10px] py-[2px] cursor-pointer',
+            'hover:border-[#0265FF]',
+            open && 'border-[#0265FF]',
+            className
+          )}
+        >
+          <div className="flex flex-1 items-center min-w-0">
+            <div className="flex-1 flex items-center justify-center h-[30px] px-[10px] py-[7px] rounded-[4px] min-w-0">
+              <span
+                className={cn(
+                  'flex-1 text-[14px] leading-[normal] truncate',
+                  value?.from
+                    ? 'text-[#030303]'
+                    : 'text-[#999999]'
+                )}
+              >
+                {value?.from
+                  ? format(value.from, 'yyyy-MM-dd')
+                  : '开始日期'}
+              </span>
+            </div>
+            <div className="shrink-0 flex items-center justify-center w-[12px] h-[30px]">
+              <span className="text-[14px] text-[#030303] whitespace-nowrap leading-[normal]">
+                ~
+              </span>
+            </div>
+            <div className="flex-1 flex items-center justify-center h-[30px] px-[10px] py-[7px] rounded-[4px] min-w-0">
+              <span
+                className={cn(
+                  'flex-1 text-[14px] leading-[normal] truncate',
+                  value?.to
+                    ? 'text-[#030303]'
+                    : 'text-[#999999]'
+                )}
+              >
+                {value?.to
+                  ? format(value.to, 'yyyy-MM-dd')
+                  : '结束日期'}
+              </span>
+            </div>
+          </div>
+          <CalendarIcon className="shrink-0 size-[16px] text-[#999999]" />
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto min-w-[300px] p-0" align="start">
+        <Calendar
+          mode="range"
+          selected={value}
+          onSelect={handleSelect}
+          numberOfMonths={2}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}