🔧 style: update base flow

Author: canisminor1990

package.json

@@ -72,14 +72,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7",
-    "@lobehub/ui": "^1",
     "polished": "^4",
-    "react-layout-kit": "^1",
-    "svgo-browser": "^1"
+    "react-layout-kit": "^1"
   },
   "devDependencies": {
     "@commitlint/cli": "^18",
     "@lobehub/lint": "latest",
+    "@lobehub/ui": "^1",
     "@testing-library/react": "^14",
     "@types/pangu": "^4",
     "@types/query-string": "^6",
@@ -105,15 +104,15 @@
     "remark-cli": "^11",
     "semantic-release": "^21",
     "stylelint": "^15",
+    "svgo-browser": "^1",
     "typescript": "^5",
     "vitest": "latest"
   },
   "peerDependencies": {
-    "@lobehub/ui": ">=1",
-    "antd-style": ">=3",
     "polished": ">=4",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "react-layout-kit": ">=1"
   },
   "publishConfig": {
     "access": "public",

src/Editor/Preview.tsx

@@ -6,4 +6,4 @@ group:
 title: Edtior
 ---
 
-<code src="./index.tsx" nopadding></code>
+<code src="../components/Editor/index.tsx" inline></code>

src/Editor/index.md

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+import { Flexbox, type FlexboxProps } from 'react-layout-kit';
+
+export interface IconAvatarProps extends FlexboxProps {
+  background: string;
+  shape?: 'circle' | 'square';
+  size: number;
+}
+
+const IconAvatar = memo<IconAvatarProps>(
+  ({ shape = 'circle', background, size, style, children }) => {
+    return (
+      <Flexbox
+        align={'center'}
+        flex={'none'}
+        justify={'center'}
+        style={{
+          background,
+          borderRadius: shape === 'circle' ? '50%' : Math.floor(size * 0.1),
+          height: size,
+          width: size,
+          ...style,
+        }}
+      >
+        {children}
+      </Flexbox>
+    );
+  },
+);
+
+export default IconAvatar;

src/Editor/index.tsx

@@ -1,19 +1,22 @@
-import { Avatar as A, type AvatarProps } from '@lobehub/ui';
 import { readableColor } from 'polished';
 import { memo } from 'react';
 
+import IconAvatar, { type IconAvatarProps } from '@/IconAvatar';
+
 import { COLOR_PRIMARY } from '../style';
 import Mono from './Mono';
 
-const Avatar = memo<AvatarProps>(({ size = 64, style, ...rest }) => {
+const Avatar = memo<IconAvatarProps>(({ size = 64, style, background, ...rest }) => {
+  const bg = background || COLOR_PRIMARY;
   return (
-    <A
-      avatar={<Mono size={size * 0.75} />}
-      background={COLOR_PRIMARY}
+    <IconAvatar
+      background={bg}
       size={size}
-      style={{ color: readableColor(COLOR_PRIMARY), ...style }}
+      style={{ color: readableColor(bg), ...style }}
       {...rest}
-    />
+    >
+      <Mono size={size * 0.75} />
+    </IconAvatar>
   );
 });
 

src/IconAvatar/index.tsx

@@ -9,7 +9,7 @@ const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
       fillRule="evenodd"
       height={size}
       ref={ref}
-      style={{ flex: 'none', lineHeight: 1, ...style }}
+      style={{ flex: 'none', lineHeight: 1, width: 'fit-content', ...style }}
       viewBox="0 0 86 24"
       xmlns="http://www.w3.org/2000/svg"
       {...rest}

src/IconShowcase/index.tsx

@@ -3,4 +3,65 @@ nav: Components
 group: Icons
 ---
 
-<code src="./demos/index.tsx"></code>
+## Icons
+
+```tsx
+import { Zhipu } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Zhipu size={64} />
+    <Zhipu.Color size={64} />
+  </Flexbox>
+);
+```
+
+## Text
+
+```tsx
+import { Zhipu } from '@lobehub/icons';
+
+export default () => <Zhipu.Text size={64} />;
+```
+
+## Combine
+
+```tsx
+import { Zhipu } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16}>
+    <Zhipu.Combine size={64} type={'mono'} />
+    <Zhipu.Combine size={64} />
+  </Flexbox>
+);
+```
+
+## Avatars
+
+```tsx
+import { Zhipu } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Zhipu.Avatar size={64} />
+    <Zhipu.Avatar size={64} shape={'square'} />
+  </Flexbox>
+);
+```
+
+## Colors
+
+```tsx
+/**
+ * inline: true
+ */
+import { Zhipu } from '@lobehub/icons';
+
+import ColorPreview from '../components/ColorPreview';
+
+export default () => <ColorPreview color={Zhipu.colorPrimary} />;
+```