✨ feat: Add ModelIcon and Provider Icon

bentwnghk · Aug 27, 2024 · 7e31862 · 7e31862
1 parent 9c348cb
commit 7e31862
Show file tree

Hide file tree

Showing 54 changed files with 1,091 additions and 92 deletions.
diff --git a/package.json b/package.json
@@ -71,33 +71,30 @@
     ]
   },
   "devDependencies": {
+    "@babel/runtime": "^7.25.4",
     "@commitlint/cli": "^18.6.1",
-    "@lobehub/lint": "latest",
-    "@lobehub/ui": "^1.146.9",
+    "@lobehub/lint": "^1.24.4",
     "@testing-library/react": "^14.3.1",
     "@types/lodash-es": "^4.17.12",
     "@types/pangu": "^4.0.2",
     "@types/query-string": "^6.3.0",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
-    "@vitest/coverage-v8": "latest",
-    "antd": "^5.19.3",
-    "antd-style": "^3.6.2",
-    "babel-plugin-antd-style": "latest",
+    "@vitest/coverage-v8": "~1.2.2",
+    "babel-plugin-antd-style": "^1.0.4",
     "commitlint": "^18.6.1",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "dumi": "2.2.17",
-    "dumi-theme-lobehub": "latest",
+    "dumi-theme-lobehub": "^1.8.1",
     "eslint": "^8.57.0",
-    "father": "^4.4.5",
+    "father": "^4.5.0",
     "glob": "^11.0.0",
     "gray-matter": "^4.0.3",
     "husky": "^8.0.3",
     "jsdom": "^23.2.0",
-    "lint-staged": "^15.2.7",
+    "lint-staged": "^15.2.9",
     "lodash-es": "^4.17.21",
-    "lucide-react": "latest",
     "markdown-table": "^3.0.3",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
@@ -107,12 +104,15 @@
     "semantic-release": "^21.1.2",
     "stylelint": "^15.11.0",
     "svgo-browser": "^1.3.8",
-    "tsx": "^4.16.2",
-    "typescript": "^5.5.3",
-    "vitest": "latest"
+    "tsx": "^4.18.0",
+    "typescript": "^5.5.4",
+    "vitest": "~1.2.2"
   },
   "peerDependencies": {
-    "@babel/runtime": ">=7",
+    "@lobehub/ui": ">=1",
+    "antd": ">=5",
+    "antd-style": ">=3",
+    "lucide-react": ">=0.396.0",
     "react": ">=18",
     "react-dom": ">=18",
     "react-layout-kit": ">=1"

diff --git a/src/Ai21/components/Combine.tsx b/src/Ai21/components/Combine.tsx
@@ -6,8 +6,13 @@ import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
 import Avatar from './Avatar';
 import Text from './Text';
 
-export type CombineProps = Omit<IconCombineProps, 'Icon' | 'Text'>;
-const Combine = memo<CombineProps>(({ iconProps, ...rest }) => {
+export interface CombineProps extends Omit<IconCombineProps, 'Icon' | 'Text'> {
+  type: 'mono' | 'color';
+}
+const Combine = memo<CombineProps>(({ type = 'mono', iconProps, ...rest }) => {
+  // @ts-ignore
+  if (type === 'mono') return <Text {...rest} />;
+
   return (
     <IconCombine
       Icon={Avatar}

diff --git a/src/Ai21/index.md b/src/Ai21/index.md
@@ -33,7 +33,12 @@ export default () => <Ai21.Text size={48} />;
 import { Ai21 } from '@lobehub/icons';
 import { Flexbox } from 'react-layout-kit';
 
-export default () => <Ai21.Combine size={64} />;
+export default () => (
+  <Flexbox gap={16}>
+    <Ai21.Combine size={64} />
+    <Ai21.Combine size={64} type={'color'} />
+  </Flexbox>
+);
 ```
 
 ## Brands

diff --git a/src/AiMass/style.ts b/src/AiMass/style.ts
@@ -1,4 +1,4 @@
 export const TITLE = '紫东太初';
-export const TEXT_MULTIPLE = 0.6;
+export const TEXT_MULTIPLE = 0.65;
 export const SPACE_MULTIPLE = 0.2;
 export const COLOR_PRIMARY = '#fff';
diff --git a/src/Azure/components/Avatar.tsx b/src/Azure/components/Avatar.tsx
@@ -9,13 +9,7 @@ export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
 const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
   return (
-    <IconAvatar
-      Icon={Mono}
-      aria-label={TITLE}
-      background={background || COLOR_PRIMARY}
-      iconMultiple={0.6}
-      {...rest}
-    />
+    <IconAvatar Icon={Mono} aria-label={TITLE} background={background || COLOR_PRIMARY} {...rest} />
   );
 });
 

diff --git a/src/Azure/components/Color.tsx b/src/Azure/components/Color.tsx
@@ -10,16 +10,16 @@ const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
       height={size}
       ref={ref}
       style={{ flex: 'none', lineHeight: 1, ...style }}
-      viewBox="0 0 26 25"
+      viewBox="0 0 24 24"
       width={size}
       xmlns="http://www.w3.org/2000/svg"
       {...rest}
     >
       <title>{TITLE}</title>
-      <path d="M12.57.982H.908v11.386h11.664V.982z" fill="#F25022"></path>
-      <path d="M25.462.982H13.8v11.386h11.663V.982z" fill="#7FBA00"></path>
-      <path d="M12.57 13.565H.908V24.95h11.664V13.565z" fill="#00A4EF"></path>
-      <path d="M25.463 13.565H13.8V24.95h11.663V13.565z" fill="#FFB900"></path>
+      <path d="M11.49 2H2v9.492h9.492V2h-.002z" fill="#F25022"></path>
+      <path d="M22 2h-9.492v9.492H22V2z" fill="#7FBA00"></path>
+      <path d="M11.49 12.508H2V22h9.492v-9.492h-.002z" fill="#00A4EF"></path>
+      <path d="M22 12.508h-9.492V22H22v-9.492z" fill="#FFB900"></path>
     </svg>
   );
 });

diff --git a/src/Azure/components/Mono.tsx b/src/Azure/components/Mono.tsx
@@ -12,16 +12,16 @@ const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
       height={size}
       ref={ref}
       style={{ flex: 'none', lineHeight: 1, ...style }}
-      viewBox="0 0 26 25"
+      viewBox="0 0 24 24"
       width={size}
       xmlns="http://www.w3.org/2000/svg"
       {...rest}
     >
       <title>{TITLE}</title>
-      <path d="M12.57.982H.908v11.386h11.664V.982z"></path>
-      <path d="M25.462.982H13.8v11.386h11.663V.982z"></path>
-      <path d="M12.57 13.565H.908V24.95h11.664V13.565z"></path>
-      <path d="M25.463 13.565H13.8V24.95h11.663V13.565z"></path>
+      <path d="M11.49 2H2v9.492h9.492V2h-.002z"></path>
+      <path d="M22 2h-9.492v9.492H22V2z"></path>
+      <path d="M11.49 12.508H2V22h9.492v-9.492h-.002z"></path>
+      <path d="M22 12.508h-9.492V22H22v-9.492z"></path>
     </svg>
   );
 });

diff --git a/src/Baichuan/components/Avatar.tsx b/src/Baichuan/components/Avatar.tsx
@@ -2,19 +2,14 @@ import { memo } from 'react';
 
 import IconAvatar, { type IconAvatarProps } from '@/IconAvatar';
 
-import { COLOR_GRADIENT, TITLE } from '../style';
+import { COLOR_PRIMARY, TITLE } from '../style';
 import Mono from './Mono';
 
 export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
 
 const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
   return (
-    <IconAvatar
-      Icon={Mono}
-      aria-label={TITLE}
-      background={background || COLOR_GRADIENT}
-      {...rest}
-    />
+    <IconAvatar Icon={Mono} aria-label={TITLE} background={background || COLOR_PRIMARY} {...rest} />
   );
 });
 

diff --git a/src/Baichuan/index.md b/src/Baichuan/index.md
@@ -51,7 +51,7 @@ import { Flexbox } from 'react-layout-kit';
 
 export default () => (
   <Flexbox gap={16} horizontal>
-    <Baichuan.Avatar size={64} background={Baichuan.colorPrimary} />
+    <Baichuan.Avatar size={64} background={Baichuan.colorGradient} />
     <Baichuan.Avatar size={64} />
     <Baichuan.Avatar size={64} shape={'square'} />
   </Flexbox>

diff --git a/src/Baichuan/index.ts b/src/Baichuan/index.ts
@@ -3,13 +3,14 @@ import Color from './components/Color';
 import Combine from './components/Combine';
 import Mono from './components/Mono';
 import Text from './components/Text';
-import { COLOR_PRIMARY, TITLE } from './style';
+import { COLOR_GRADIENT, COLOR_PRIMARY, TITLE } from './style';
 
 export type CompoundedIcon = typeof Mono & {
   Avatar: typeof Avatar;
   Color: typeof Color;
   Combine: typeof Combine;
   Text: typeof Text;
+  colorGradient: string;
   colorPrimary: string;
   title: string;
 };
@@ -20,6 +21,7 @@ Icons.Text = Text;
 Icons.Combine = Combine;
 Icons.Avatar = Avatar;
 Icons.colorPrimary = COLOR_PRIMARY;
+Icons.colorGradient = COLOR_GRADIENT;
 Icons.title = TITLE;
 
 export default Icons;
diff --git a/src/Google/components/Color.tsx b/src/Google/components/Color.tsx
@@ -16,24 +16,22 @@ const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
       {...rest}
     >
       <title>{TITLE}</title>
-      <g fill="none" fillRule="nonzero">
-        <path
-          d="M24 12.267c0-.987-.082-1.707-.258-2.454H12.245v4.454h6.748c-.136 1.106-.87 2.773-2.503 3.893l-.023.149 3.635 2.76.252.024C22.667 19 24 15.92 24 12.267"
-          fill="#4285F4"
-        ></path>
-        <path
-          d="M12.245 24c3.306 0 6.081-1.067 8.109-2.907L16.49 18.16c-1.034.707-2.422 1.2-4.245 1.2a7.358 7.358 0 01-6.966-4.987l-.144.012-3.78 2.867-.049.135C3.32 21.307 7.456 24 12.245 24"
-          fill="#34A853"
-        ></path>
-        <path
-          d="M5.279 14.373A7.254 7.254 0 014.87 12c0-.827.15-1.627.394-2.373l-.007-.16-3.827-2.912-.125.058A11.816 11.816 0 000 12c0 1.933.476 3.76 1.306 5.387l3.973-3.014"
-          fill="#FBBC05"
-        ></path>
-        <path
-          d="M12.245 4.64c2.3 0 3.85.973 4.735 1.787l3.455-3.307C18.313 1.187 15.551 0 12.245 0 7.455 0 3.32 2.693 1.306 6.613l3.96 3.014c.993-2.894 3.74-4.987 6.979-4.987"
-          fill="#EB4335"
-        ></path>
-      </g>
+      <path
+        d="M23 12.245c0-.905-.075-1.565-.236-2.25h-10.54v4.083h6.186c-.124 1.014-.797 2.542-2.294 3.569l-.021.136 3.332 2.53.23.022C21.779 18.417 23 15.593 23 12.245z"
+        fill="#4285F4"
+      ></path>
+      <path
+        d="M12.225 23c3.03 0 5.574-.978 7.433-2.665l-3.542-2.688c-.948.648-2.22 1.1-3.891 1.1a6.745 6.745 0 01-6.386-4.572l-.132.011-3.465 2.628-.045.124C4.043 20.531 7.835 23 12.225 23z"
+        fill="#34A853"
+      ></path>
+      <path
+        d="M5.84 14.175A6.65 6.65 0 015.463 12c0-.758.138-1.491.361-2.175l-.006-.147-3.508-2.67-.115.054A10.831 10.831 0 001 12c0 1.772.436 3.447 1.197 4.938l3.642-2.763z"
+        fill="#FBBC05"
+      ></path>
+      <path
+        d="M12.225 5.253c2.108 0 3.529.892 4.34 1.638l3.167-3.031C17.787 2.088 15.255 1 12.225 1 7.834 1 4.043 3.469 2.197 7.062l3.63 2.763a6.77 6.77 0 016.398-4.572z"
+        fill="#EB4335"
+      ></path>
     </svg>
   );
 });

diff --git a/src/Google/components/Mono.tsx b/src/Google/components/Mono.tsx
@@ -18,7 +18,10 @@ const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
       {...rest}
     >
       <title>{TITLE}</title>
-      <path d="M0 12c0-1.933.476-3.76 1.306-5.387l.144-.271C3.512 2.569 7.567 0 12.245 0c3.306 0 6.068 1.187 8.19 3.12L16.98 6.427c-.885-.814-2.436-1.787-4.735-1.787-3.238 0-5.986 2.093-6.98 4.987A7.622 7.622 0 004.871 12c0 .709.11 1.398.304 2.05l.104.323a7.358 7.358 0 006.966 4.987c1.823 0 3.21-.493 4.245-1.2l.238-.172c1.466-1.113 2.136-2.67 2.265-3.721h-6.748V9.813h11.497c.176.747.258 1.467.258 2.454 0 3.653-1.333 6.733-3.646 8.826C18.326 22.933 15.55 24 12.244 24c-4.788 0-8.924-2.693-10.938-6.613A11.816 11.816 0 010 12z"></path>
+      <path d="M23 12.245c0-.905-.075-1.565-.236-2.25h-10.54v4.083h6.186c-.124 1.014-.797 2.542-2.294 3.569l-.021.136 3.332 2.53.23.022C21.779 18.417 23 15.593 23 12.245z"></path>
+      <path d="M12.225 23c3.03 0 5.574-.978 7.433-2.665l-3.542-2.688c-.948.648-2.22 1.1-3.891 1.1a6.745 6.745 0 01-6.386-4.572l-.132.011-3.465 2.628-.045.124C4.043 20.531 7.835 23 12.225 23z"></path>
+      <path d="M5.84 14.175A6.65 6.65 0 015.463 12c0-.758.138-1.491.361-2.175l-.006-.147-3.508-2.67-.115.054A10.831 10.831 0 001 12c0 1.772.436 3.447 1.197 4.938l3.642-2.763z"></path>
+      <path d="M12.225 5.253c2.108 0 3.529.892 4.34 1.638l3.167-3.031C17.787 2.088 15.255 1 12.225 1 7.834 1 4.043 3.469 2.197 7.062l3.63 2.763a6.77 6.77 0 016.398-4.572z"></path>
     </svg>
   );
 });

diff --git a/src/Groq/components/Combine.tsx b/src/Groq/components/Combine.tsx
@@ -6,14 +6,17 @@ import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
 import Avatar from './Avatar';
 import Text from './Text';
 
-export type CombineProps = Omit<IconCombineProps, 'Icon' | 'Text'>;
+export interface CombineProps extends Omit<IconCombineProps, 'Icon' | 'Text'> {
+  type?: 'mono' | 'color';
+}
 
-const Combine = memo<CombineProps>(({ ...rest }) => {
+const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
   return (
     <IconCombine
       Icon={Avatar}
       Text={Text}
       aria-label={TITLE}
+      showLogo={type === 'color'}
       spaceMultiple={SPACE_MULTIPLE}
       textMultiple={TEXT_MULTIPLE}
       {...rest}

diff --git a/src/Groq/index.md b/src/Groq/index.md
@@ -32,6 +32,7 @@ import { Flexbox } from 'react-layout-kit';
 export default () => (
   <Flexbox gap={16}>
     <Groq.Combine size={64} />
+    <Groq.Combine size={64} type={'color'} />
   </Flexbox>
 );
 ```

diff --git a/src/IconAvatar/index.md b/src/IconAvatar/index.md
@@ -3,6 +3,7 @@ nav: Components
 group:
   title: Components
   order: 10
+title: IconAvatar
 ---
 
 ## Default

diff --git a/src/IconAvatar/index.tsx b/src/IconAvatar/index.tsx
@@ -1,5 +1,5 @@
 import { CSSProperties, forwardRef } from 'react';
-import { Flexbox, type FlexboxProps } from 'react-layout-kit';
+import { Center, type FlexboxProps } from 'react-layout-kit';
 
 import { IconType } from '@/types';
 
@@ -30,10 +30,8 @@ const IconAvatar = forwardRef<HTMLDivElement, IconAvatarProps>(
     ref,
   ) => {
     return (
-      <Flexbox
-        align={'center'}
+      <Center
         flex={'none'}
-        justify={'center'}
         ref={ref}
         style={{
           background,
@@ -45,7 +43,7 @@ const IconAvatar = forwardRef<HTMLDivElement, IconAvatarProps>(
         }}
       >
         {Icon && <Icon className={iconClassName} size={size * iconMultiple} style={iconStyle} />}
-      </Flexbox>
+      </Center>
     );
   },
 );

diff --git a/src/IconCombine/index.md b/src/IconCombine/index.md
@@ -3,6 +3,7 @@ nav: Components
 group:
   title: Components
   order: 10
+title: IconCombine
 ---
 
 ## Default

diff --git a/src/ModelIcon/DefaultAvatar.tsx b/src/ModelIcon/DefaultAvatar.tsx
@@ -0,0 +1,48 @@
+import { useTheme } from 'antd-style';
+import { forwardRef } from 'react';
+import { Center } from 'react-layout-kit';
+
+import { IconAvatarProps } from '@/IconAvatar';
+
+import DefaultIcon from './DefaultIcon';
+
+const DefaultAvatar = forwardRef<HTMLDivElement, Omit<IconAvatarProps, 'Icon'>>(
+  (
+    {
+      shape = 'circle',
+      color,
+      background,
+      size,
+      style,
+      iconMultiple = 0.6,
+      iconStyle,
+      iconClassName,
+    },
+    ref,
+  ) => {
+    const theme = useTheme();
+    return (
+      <Center
+        flex={'none'}
+        ref={ref}
+        style={{
+          background: background || theme.colorFillSecondary,
+          borderRadius: shape === 'circle' ? '50%' : Math.floor(size * 0.1),
+          color,
+          height: size,
+          width: size,
+          ...style,
+        }}
+      >
+        <DefaultIcon
+          className={iconClassName}
+          color={color}
+          size={size * iconMultiple}
+          style={iconStyle}
+        />
+      </Center>
+    );
+  },
+);
+
+export default DefaultAvatar;