myshell-react-lib 0.1.0

package/src/components/icon.tsx

@@ -0,0 +1,89 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const iconVariants = cva('inline-flex shrink-0', {
+  variants: {
+    /**
+     *
+     * 可用尺寸:
+     * - 2xs: 12px
+     * - xs: 14px
+     * - sm: 16px
+     * - md: 18px
+     * - lg: 20px
+     * - xl: 22px
+     * - 2xl: 24px
+     * - 3xl: 28px
+     * - 4xl: 32px
+     * - 5xl: 36px
+     * - 6xl: 40px
+     * - 7xl: 44px
+     * - 8xl: 48px
+     */
+    size: {
+      '2xs': 'w-3 h-3', // 12
+      xs: 'w-3.5 h-3.5', // 14
+      sm: 'w-4 h-4', // 16
+      md: 'w-[18px] h-[18px]', // 18
+      lg: 'w-5 h-5', // 20
+      xl: 'w-[22px] h-[22px]', // 22
+      '2xl': 'w-6 h-6', // 24
+      '3xl': 'w-7 h-7', // 28
+      '4xl': 'w-8 h-8', // 32
+      '5xl': 'w-9 h-9', // 36
+      '6xl': 'w-10 h-10', // 40
+      '7xl': 'w-11 h-11', // 44
+      '8xl': 'w-12 h-12', // 48
+    },
+    color: {
+      default: 'text-Colors-Foreground-Default',
+      subtle: 'text-Colors-Foreground-Subtle',
+      subtler: 'text-Colors-Foreground-Subtler',
+      subtlest: 'text-Colors-Foreground-Subtlest',
+      disabled: 'text-Colors-Foreground-Disabled',
+      bolder: 'text-Colors-Foreground-Bolder',
+      inverse: 'text-Colors-Foreground-Static-White',
+    },
+    rotate: {
+      '45': 'rotate-45',
+      '90': 'rotate-90',
+      '-45': '-rotate-45',
+      '-90': '-rotate-90',
+      '180': 'rotate-180',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+    color: 'default',
+  },
+});
+
+export type IconProps = React.HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof iconVariants> & {
+    /**
+     * icon 组件 优先heroicons
+     */
+    component?: React.ElementType;
+  };
+
+const Icon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  const { children, component, size, color, rotate, className, ...passProps } =
+    props;
+  const Com = component || 'span';
+
+  return (
+    <Com
+      ref={ref}
+      {...passProps}
+      className={cn(iconVariants({ size, color, rotate }), className)}
+    >
+      {children}
+    </Com>
+  );
+});
+Icon.displayName = 'Icon';
+
+export type IconComponent = React.ForwardRefExoticComponent<IconProps>;
+export { Icon };

package/src/components/icons/outline/DownIcon.tsx

@@ -0,0 +1,18 @@
+import { cn } from '@/lib/utils';
+
+function DownIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      className={cn('transition-all', className)}
+    >
+      <path d="M6.75593 8.8908C6.35716 9.35126 5.64284 9.35126 5.24407 8.8908L1.3708 4.41832C0.80992 3.77068 1.26997 2.76367 2.12673 2.76367L9.87328 2.76367C10.73 2.76367 11.1901 3.77068 10.6292 4.41833L6.75593 8.8908Z" />
+    </svg>
+  );
+}
+
+export default DownIcon;

package/src/components/icons/outline/FilterIcon.tsx

@@ -0,0 +1,21 @@
+function FilterIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.0278 2.84729C7.67712 2.84729 5.37221 3.04531 3.12895 3.42572C2.37055 3.55432 1.83336 4.2145 1.83336 4.96859V5.84598C1.83336 6.51468 2.099 7.15598 2.57185 7.62882L7.13715 12.1941C7.37358 12.4305 7.5064 12.7511 7.5064 13.0855V18.6055C7.5064 18.8239 7.61951 19.0268 7.80535 19.1417C7.99118 19.2565 8.22323 19.267 8.41863 19.1693L11.1553 17.8009C12.0095 17.3738 12.5491 16.5008 12.5491 15.5458V13.0855C12.5491 12.7511 12.6819 12.4305 12.9183 12.1941L17.4837 7.62882C17.9565 7.15598 18.2221 6.51468 18.2221 5.84598V4.96857C18.2221 4.21448 17.6849 3.5543 16.9265 3.4257C14.6833 3.0453 12.3784 2.84729 10.0278 2.84729ZM3.33973 4.66863C5.51363 4.29998 7.74805 4.10794 10.0278 4.10794C12.3075 4.10794 14.5419 4.29998 16.7158 4.66861C16.8531 4.69189 16.9615 4.8142 16.9615 4.96857V5.84598C16.9615 6.18033 16.8286 6.50098 16.5922 6.7374L12.0269 11.3026C11.5541 11.7755 11.2884 12.4168 11.2884 13.0855V15.5458C11.2884 16.0233 11.0186 16.4598 10.5915 16.6734L8.76707 17.5856V13.0855C8.76707 12.4168 8.50143 11.7755 8.02859 11.3026L3.46328 6.7374C3.22685 6.50098 3.09403 6.18033 3.09403 5.84598V4.96859C3.09403 4.81422 3.20244 4.69191 3.33973 4.66863ZM15.1424 12.0035C14.9222 11.7833 14.5651 11.7833 14.3448 12.0035C14.1246 12.2238 14.1246 12.5809 14.3448 12.8011L16.3756 14.8318L14.3448 16.8625C14.1246 17.0828 14.1246 17.4399 14.3448 17.6601C14.5651 17.8804 14.9222 17.8804 15.1424 17.6601L17.1732 15.6294L19.2039 17.6601C19.4242 17.8804 19.7813 17.8804 20.0015 17.6601C20.2218 17.4399 20.2218 17.0828 20.0015 16.8625L17.9708 14.8318L20.0015 12.8011C20.2218 12.5809 20.2218 12.2238 20.0015 12.0035C19.7813 11.7833 19.4242 11.7833 19.2039 12.0035L17.1732 14.0342L15.1424 12.0035Z"
+        fill="#3E5CFA"
+      />
+    </svg>
+  );
+}
+
+export default FilterIcon;

package/src/components/icons/outline/arrow-left.tsx

@@ -0,0 +1,16 @@
+
+
+import * as React from 'react';
+import { Icon, IconProps } from '../../icon';
+
+const ArrowLeft = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {  
+  return (
+    <Icon {...props}>
+      <svg ref={ref} className="w-full h-full" viewBox="0 0 24 24" fill="none" strokeWidth="1.5" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+      </svg>
+    </Icon>
+  )
+});
+
+export { ArrowLeft }

package/src/components/icons/outline/arrow-up-tray.tsx

@@ -0,0 +1,16 @@
+
+
+import * as React from 'react';
+import { Icon, IconProps } from '../../icon';
+
+const ArrowUpTray = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {  
+  return (
+    <Icon {...props}>
+      <svg ref={ref} className="w-full h-full" viewBox="0 0 24 24" fill="none" strokeWidth="1.5" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
+      </svg>
+    </Icon>
+  )
+});
+
+export { ArrowUpTray }

package/src/components/icons/outline/check-circle.tsx

@@ -0,0 +1,17 @@
+
+
+import * as React from 'react';
+import { Icon, IconProps } from '../../icon';
+
+const CheckCircle = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {  
+  return (
+    <Icon {...props}>
+      <svg ref={ref} className="w-full h-full" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.4359 9.1397C15.773 9.38046 15.8511 9.84887 15.6103 10.1859L11.8603 15.4359C11.7322 15.6153 11.5316 15.7293 11.3119 15.7474C11.0921 15.7656 10.8756 15.6862 10.7197 15.5303L8.46967 13.2803C8.17678 12.9874 8.17678 12.5126 8.46967 12.2197C8.76256 11.9268 9.23744 11.9268 9.53033 12.2197L11.1543 13.8436L14.3897 9.31407C14.6305 8.97701 15.0989 8.89894 15.4359 9.1397Z" />
+        <path fillRule="evenodd" clipRule="evenodd" d="M2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75Z" />
+      </svg>
+    </Icon>
+  )
+});
+
+export { CheckCircle }

package/src/components/icons/outline/config.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Icon, IconProps } from '../../icon';
+
+const Config = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {
+  return (
+    <Icon {...props}>
+      <svg
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="cursor-pointer"
+      >
+        <g id="wrapper">
+          <g id="Union">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M4.5 2.25C4.81066 2.25 5.0625 2.50184 5.0625 2.8125L5.0625 9.65852C5.71792 9.89018 6.1875 10.5153 6.1875 11.25C6.1875 11.9847 5.71792 12.6098 5.0625 12.8415V15.1875C5.0625 15.4982 4.81066 15.75 4.5 15.75C4.18934 15.75 3.9375 15.4982 3.9375 15.1875V12.8415C3.28208 12.6098 2.8125 11.9847 2.8125 11.25C2.8125 10.5153 3.28208 9.89018 3.9375 9.65852L3.9375 2.8125C3.9375 2.50184 4.18934 2.25 4.5 2.25ZM4.5 10.6875C4.18934 10.6875 3.9375 10.9393 3.9375 11.25C3.9375 11.5607 4.18934 11.8125 4.5 11.8125C4.81066 11.8125 5.0625 11.5607 5.0625 11.25C5.0625 10.9393 4.81066 10.6875 4.5 10.6875Z"
+              fill="#6D7175"
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M9 2.25C9.31066 2.25 9.5625 2.50184 9.5625 2.8125V5.15852C10.2179 5.39018 10.6875 6.01525 10.6875 6.75C10.6875 7.48475 10.2179 8.10982 9.5625 8.34148V15.1875C9.5625 15.4982 9.31066 15.75 9 15.75C8.68934 15.75 8.4375 15.4982 8.4375 15.1875V8.34148C7.78208 8.10982 7.3125 7.48475 7.3125 6.75C7.3125 6.01525 7.78208 5.39018 8.4375 5.15852V2.8125C8.4375 2.50184 8.68934 2.25 9 2.25ZM9 6.1875C8.68934 6.1875 8.4375 6.43934 8.4375 6.75C8.4375 7.06066 8.68934 7.3125 9 7.3125C9.31066 7.3125 9.5625 7.06066 9.5625 6.75C9.5625 6.43934 9.31066 6.1875 9 6.1875Z"
+              fill="#6D7175"
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M13.5 2.25C13.8107 2.25 14.0625 2.50184 14.0625 2.8125V9.65852C14.7179 9.89018 15.1875 10.5153 15.1875 11.25C15.1875 11.9847 14.7179 12.6098 14.0625 12.8415L14.0625 15.1875C14.0625 15.4982 13.8107 15.75 13.5 15.75C13.1893 15.75 12.9375 15.4982 12.9375 15.1875L12.9375 12.8415C12.2821 12.6098 11.8125 11.9847 11.8125 11.25C11.8125 10.5153 12.2821 9.89018 12.9375 9.65852V2.8125C12.9375 2.50184 13.1893 2.25 13.5 2.25ZM13.5 10.6875C13.1893 10.6875 12.9375 10.9393 12.9375 11.25C12.9375 11.5607 13.1893 11.8125 13.5 11.8125C13.8107 11.8125 14.0625 11.5607 14.0625 11.25C14.0625 10.9393 13.8107 10.6875 13.5 10.6875Z"
+              fill="#6D7175"
+            />
+          </g>
+        </g>
+      </svg>
+    </Icon>
+  );
+});
+
+export { Config };

package/src/components/icons/outline/pencil-square.tsx

@@ -0,0 +1,16 @@
+
+
+import * as React from 'react';
+import { Icon, IconProps } from '../../icon';
+
+const PencilSquare = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {  
+  return (
+    <Icon {...props}>
+      <svg ref={ref} className="w-full h-full" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+      </svg>
+    </Icon>
+  )
+});
+
+export { PencilSquare }

package/src/components/icons/outline/trash.tsx

@@ -0,0 +1,17 @@
+
+
+import * as React from 'react';
+import { Icon, IconProps } from '../../icon';
+
+const Trash = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {  
+  return (
+    <Icon {...props}>
+      <svg ref={ref} className="w-full h-full" viewBox="0 0 24 24" fill="none" troke-width="1.5" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+      </svg>
+
+    </Icon>
+  )
+});
+
+export { Trash }

package/src/components/icons/outline/window.tsx

@@ -0,0 +1,16 @@
+
+
+import * as React from 'react';
+import { Icon, IconProps } from '../../icon';
+
+const Window = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {  
+  return (
+    <Icon {...props}>
+      <svg ref={ref} className="w-full h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" strokeWidth="1.5" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3 8.25V18a2.25 2.25 0 0 0 2.25 2.25h13.5A2.25 2.25 0 0 0 21 18V8.25m-18 0V6a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 6v2.25m-18 0h18M5.25 6h.008v.008H5.25V6ZM7.5 6h.008v.008H7.5V6Zm2.25 0h.008v.008H9.75V6Z" />
+      </svg>
+    </Icon>
+  )
+});
+
+export { Window }

package/src/components/icons/outline/x-circle.tsx

@@ -0,0 +1,17 @@
+
+
+import * as React from 'react';
+import { Icon, IconProps } from '../../icon';
+
+const XCircle = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {  
+  return (
+    <Icon {...props}>
+      <svg ref={ref} className="w-full h-full" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9.21967 9.21967C9.51256 8.92678 9.98744 8.92678 10.2803 9.21967L12 10.9393L13.7197 9.21967C14.0126 8.92678 14.4874 8.92678 14.7803 9.21967C15.0732 9.51256 15.0732 9.98744 14.7803 10.2803L13.0607 12L14.7803 13.7197C15.0732 14.0126 15.0732 14.4874 14.7803 14.7803C14.4874 15.0732 14.0126 15.0732 13.7197 14.7803L12 13.0607L10.2803 14.7803C9.98744 15.0732 9.51256 15.0732 9.21967 14.7803C8.92678 14.4874 8.92678 14.0126 9.21967 13.7197L10.9393 12L9.21967 10.2803C8.92678 9.98744 8.92678 9.51256 9.21967 9.21967Z" />
+<path fillRule="evenodd" clipRule="evenodd" d="M2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75Z" />
+      </svg>
+    </Icon>
+  )
+});
+
+export { XCircle }

package/src/components/icons/outline/x-mark.tsx

@@ -0,0 +1,16 @@
+
+
+import * as React from 'react';
+import { Icon, IconProps } from '../../icon';
+
+const XMark = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {  
+  return (
+    <Icon {...props}>
+      <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+      </svg>
+    </Icon>
+  )
+});
+
+export { XMark }

package/src/components/icons/solid/audio-playing.tsx

@@ -0,0 +1,31 @@
+import Lottie from 'lottie-web';
+import { useEffect, useRef } from 'react';
+
+export interface Props {
+  bright?: boolean;
+}
+
+export default function AudioPlaying(props: Props) {
+  const playingRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const lRef = playingRef.current;
+    let animation: any;
+
+    if (lRef) {
+      // 在组件挂载后，执行Lottie动画初始化
+      animation = Lottie.loadAnimation({
+        container: playingRef.current,
+        renderer: 'svg', // 根据需要选择渲染器：svg / canvas / html
+        loop: true,
+        autoplay: true,
+        animationData: require('@/common/assets/audio-playing.json')
+      });
+    }
+
+    // 在组件卸载时，销毁Lottie动画实例
+    return () => animation.destroy();
+  }, []);
+
+  return <div ref={playingRef} className="size-3" />;
+}

package/src/components/icons/solid/caret-down.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Icon, IconProps } from '../../icon';
+
+const CaretDown = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {
+  return (
+    <Icon {...props}>
+      <svg ref={ref} className="w-full h-full" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path d="M13.5119 17.7818C12.7143 18.7028 11.2857 18.7028 10.4881 17.7818L2.74159 8.83689C1.61984 7.54161 2.53995 5.52759 4.25345 5.52759L19.7466 5.52759C21.4601 5.52759 22.3802 7.54161 21.2584 8.8369L13.5119 17.7818Z" />
+      </svg>
+    </Icon>
+  )
+});
+
+export { CaretDown };

package/src/components/icons/solid/code.tsx

@@ -0,0 +1,18 @@
+
+
+import * as React from 'react';
+import { Icon, IconProps } from '../../icon';
+
+const Code = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {  
+  return (
+    <Icon {...props}>
+      <svg ref={ref} className="w-full h-full" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.3995 7.375C15.6066 7.01628 15.4837 6.55759 15.125 6.35048C14.7663 6.14337 14.3076 6.26628 14.1005 6.625L8.35048 16.5843C8.14337 16.943 8.26628 17.4017 8.625 17.6088C8.98372 17.8159 9.44241 17.693 9.64952 17.3343L15.3995 7.375Z" />
+        <path fillRule="evenodd" clipRule="evenodd" d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM4.5 6C4.5 5.17157 5.17157 4.5 6 4.5H18C18.8284 4.5 19.5 5.17157 19.5 6V18C19.5 18.8284 18.8284 19.5 18 19.5H6C5.17157 19.5 4.5 18.8284 4.5 18V6Z" />
+      </svg>
+
+    </Icon>
+  )
+});
+
+export { Code }

package/src/components/icons/solid/drag.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Icon, IconProps } from '../../icon';
+
+const Drag = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {
+  return (
+    <Icon {...props}>
+      <svg ref={ref} className="w-full h-full" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clipRule="evenodd" d="M7.5 5C7.5 4.17157 8.17157 3.5 9 3.5C9.82843 3.5 10.5 4.17157 10.5 5C10.5 5.82843 9.82843 6.5 9 6.5C8.17157 6.5 7.5 5.82843 7.5 5ZM13.5 5C13.5 4.17157 14.1716 3.5 15 3.5C15.8284 3.5 16.5 4.17157 16.5 5C16.5 5.82843 15.8284 6.5 15 6.5C14.1716 6.5 13.5 5.82843 13.5 5ZM7.5 12C7.5 11.1716 8.17157 10.5 9 10.5C9.82843 10.5 10.5 11.1716 10.5 12C10.5 12.8284 9.82843 13.5 9 13.5C8.17157 13.5 7.5 12.8284 7.5 12ZM13.5 12C13.5 11.1716 14.1716 10.5 15 10.5C15.8284 10.5 16.5 11.1716 16.5 12C16.5 12.8284 15.8284 13.5 15 13.5C14.1716 13.5 13.5 12.8284 13.5 12ZM7.5 19C7.5 18.1716 8.17157 17.5 9 17.5C9.82843 17.5 10.5 18.1716 10.5 19C10.5 19.8284 9.82843 20.5 9 20.5C8.17157 20.5 7.5 19.8284 7.5 19ZM13.5 19C13.5 18.1716 14.1716 17.5 15 17.5C15.8284 17.5 16.5 18.1716 16.5 19C16.5 19.8284 15.8284 20.5 15 20.5C14.1716 20.5 13.5 19.8284 13.5 19Z" />
+      </svg>
+    </Icon>
+  )
+});
+
+export { Drag };

package/src/components/icons/solid/phone.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Icon, IconProps } from '../../icon';
+
+const Phone = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {
+  return (
+    <Icon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+          d="M8.75 15.625C8.40482 15.625 8.125 15.9048 8.125 16.25C8.125 16.5952 8.40482 16.875 8.75 16.875H11.25C11.5952 16.875 11.875 16.5952 11.875 16.25C11.875 15.9048 11.5952 15.625 11.25 15.625H8.75Z"
+          fill="#3E5CFA"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.1875 0.625C5.6342 0.625 4.375 1.8842 4.375 3.4375V16.5625C4.375 18.1158 5.6342 19.375 7.1875 19.375H12.8125C14.3658 19.375 15.625 18.1158 15.625 16.5625V3.4375C15.625 1.8842 14.3658 0.625 12.8125 0.625H7.1875ZM6.25 3.4375C6.25 2.91973 6.66973 2.5 7.1875 2.5H8.125V2.8125C8.125 3.33027 8.54473 3.75 9.0625 3.75H10.9375C11.4553 3.75 11.875 3.33027 11.875 2.8125V2.5H12.8125C13.3303 2.5 13.75 2.91973 13.75 3.4375V16.5625C13.75 17.0803 13.3303 17.5 12.8125 17.5H7.1875C6.66973 17.5 6.25 17.0803 6.25 16.5625V3.4375Z"
+          fill="#3E5CFA"
+        />
+      </svg>
+    </Icon>
+  );
+});
+
+export { Phone };

package/src/components/icons/solid/rectangle-group.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Icon, IconProps } from '../../icon';
+
+const RectangleGroup = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {
+  return (
+    <Icon {...props}>
+      <svg ref={ref} className="w-full h-full" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clipRule="evenodd" d="M1.5 7.125C1.5 6.08947 2.33947 5.25 3.375 5.25H9.375C10.4105 5.25 11.25 6.08947 11.25 7.125V10.875C11.25 11.9105 10.4105 12.75 9.375 12.75H3.375C2.33947 12.75 1.5 11.9105 1.5 10.875V7.125ZM13.5 8.625C13.5 7.58947 14.3395 6.75 15.375 6.75H20.625C21.6605 6.75 22.5 7.58947 22.5 8.625V16.875C22.5 17.9105 21.6605 18.75 20.625 18.75H15.375C14.3395 18.75 13.5 17.9105 13.5 16.875V8.625ZM3 16.125C3 15.0895 3.83947 14.25 4.875 14.25H10.125C11.1605 14.25 12 15.0895 12 16.125V18.375C12 19.4105 11.1605 20.25 10.125 20.25H4.875C3.83947 20.25 3 19.4105 3 18.375V16.125Z" />
+      </svg>
+    </Icon>
+  )
+});
+
+export { RectangleGroup };

package/src/components/image.tsx

@@ -0,0 +1,151 @@
+import { cva } from 'class-variance-authority';
+import RCImage, { ImagePreviewType } from 'rc-image';
+import { ReactElement, SyntheticEvent } from 'react';
+
+import { cn } from '@/lib/utils';
+
+const imageVariants = cva('', {
+  variants: {
+    rounded: {
+      none: 'rounded-none',
+      sm: 'rounded-sm',
+      default: 'rounded',
+      md: 'rounded-md',
+      lg: 'rounded-lg',
+      xl: 'rounded-xl',
+      '2xl': 'rounded-2xl',
+      '3xl': 'rounded-3xl',
+      full: 'rounded-full',
+    },
+    object: {
+      contain: 'object-contain',
+      cover: 'object-cover',
+      fill: 'object-fill',
+      none: 'object-none',
+    },
+  },
+  defaultVariants: {
+    rounded: 'none',
+  },
+});
+
+export interface ImageProps {
+  /**
+   * 图片地址
+   */
+  src: string;
+  /**
+   * 图像宽度
+   * string | number
+   */
+  width?: string | number;
+  /**
+   * 图像高度
+   * string | number
+   */
+  height?: string | number;
+  /**
+   * 加载占位，为 true 时使用默认占位
+   */
+  placeholder?: boolean | ReactElement;
+  /**
+   * 加载失败容错地址
+   */
+  fallback?: string;
+  /**
+   * 预览参数，为 false 时禁用
+   */
+  // preview?: boolean;
+  /**
+   * 圆角，默认为 none
+   */
+  rounded?:
+    | 'none'
+    | 'sm'
+    | 'default'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | 'full';
+  /**
+   * 填充类型
+   */
+  object?: 'contain' | 'cover' | 'fill' | 'none';
+  /**
+   * 图像描述
+   */
+  alt?: string;
+  /**
+   * image样式覆盖
+   */
+  className?: string;
+  /**
+   * image样式覆盖
+   */
+  imgClassName?: string;
+  /**
+   * 是否是背景图
+   */
+  isBackgroud?: boolean;
+
+  preview?: boolean | ImagePreviewType;
+  /**
+   * 加载优先级
+   *
+   * @default auto
+   */
+  fetchPriority?: 'auto' | 'high' | 'low' | 'low';
+
+  loading?: 'eager' | 'lazy';
+
+  style?: React.CSSProperties;
+  /**
+   * 加载错误回调
+   */
+  onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
+}
+
+export function Image({
+  className,
+  imgClassName,
+  placeholder = true,
+  width = '100%',
+  height = '100%',
+  src,
+  rounded = 'none',
+  fallback = '',
+  object = 'cover',
+  isBackgroud = false,
+  preview = false,
+  fetchPriority = 'auto',
+  loading = 'eager',
+  ...otherProps
+}: ImageProps) {
+  return (
+    <RCImage
+      fetchPriority={fetchPriority}
+      placeholder={placeholder}
+      width={width}
+      height={height}
+      src={src}
+      fallback={
+        fallback ||
+        'data:image/png;base64,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'
+      }
+      preview={preview}
+      loading={loading}
+      rootClassName={cn(
+        isBackgroud && 'absolute top-0 left-0 z-0 w-full h-full',
+        className
+      )}
+      className={cn(
+        imageVariants({ rounded, object }),
+        isBackgroud && 'object-cover',
+        imgClassName
+      )}
+      {...otherProps}
+    />
+  );
+}