🐛 fix: fix Icon display size

package.json

@@ -98,7 +98,7 @@
     "react-rnd": "^10",
     "remark-gfm": "^3",
     "shiki-es": "^0",
-    "styled-components": "beta",
+    "styled-components": "latest",
     "ts-md5": "^1",
     "use-merge-value": "^1",
     "zustand": "^4",

packages/dumi-theme-lobehub/package.json

@@ -15,20 +15,18 @@
     "prepare": "npm run build"
   },
   "dependencies": {
-    "@ant-design/icons": "^5",
     "@floating-ui/react": "^0",
     "@lobehub/ui": "latest",
     "ahooks": "^3",
     "antd": "^5",
     "antd-style": "^3",
     "chalk": "^4",
     "fast-deep-equal": "^3",
-    "leva": "^0",
     "lodash-es": "^4",
     "lucide-react": "latest",
     "polished": "^4",
     "react-layout-kit": "^1",
-    "styled-components": "beta",
+    "styled-components": "latest",
     "use-merge-value": "^1",
     "zustand": "^4"
   },

packages/dumi-theme-lobehub/src/components/ApiHeader/index.tsx

@@ -151,8 +151,8 @@ export const ApiHeader = memo<ApiTitleProps>(
               ))}
             </Space>
             <Space className={styles.meta} split={<Divider type={'vertical'} />}>
-              {items.map((item) => (
-                <a href={item.url} key={item.url} rel="noreferrer" target={'_blank'}>
+              {items.map((item, index) => (
+                <a href={item.url} key={index} rel="noreferrer" target={'_blank'}>
                   <Flexbox align={'center'} className={styles.text} gap={8} horizontal>
                     {item.icon}
                     {item.children}

packages/dumi-theme-lobehub/src/layouts/DocLayout/index.tsx

@@ -78,6 +78,10 @@ const DocLayout = memo(() => {
     }, 1);
   }, [loading, hash]);
 
+  useEffect(() => {
+    document.body.scrollTo(0, 0);
+  }, [window.location.pathname]);
+
   let Page;
 
   if (isHomePage) {

packages/dumi-theme-lobehub/src/pages/Changelog/index.tsx

@@ -1,6 +1,6 @@
 import { useResponsive } from 'antd-style';
 import { useOutlet } from 'dumi';
-import { memo, useEffect } from 'react';
+import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
@@ -22,10 +22,6 @@ const Changelog = memo(() => {
 
   const { styles } = useStyles();
 
-  useEffect(() => {
-    scrollTo(0, 0);
-  }, []);
-
   return (
     <>
       <div className={styles.background} />

packages/dumi-theme-lobehub/src/pages/Docs/index.tsx

@@ -1,6 +1,6 @@
 import { useResponsive } from 'antd-style';
 import { useOutlet } from 'dumi';
-import { memo, useEffect } from 'react';
+import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
@@ -21,10 +21,6 @@ const Docs = memo(() => {
   );
   const { styles } = useStyles();
 
-  useEffect(() => {
-    scrollTo(0, 0);
-  }, []);
-
   return (
     <>
       <div className={styles.background} />

packages/dumi-theme-lobehub/src/pages/Home/index.tsx

@@ -1,5 +1,5 @@
 import { useOutlet } from 'dumi';
-import { memo, useEffect } from 'react';
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import Features from '@/slots/Features';
@@ -8,10 +8,6 @@ import Hero from '@/slots/Hero';
 const Home = memo(() => {
   const outlet = useOutlet();
 
-  useEffect(() => {
-    scrollTo(0, 0);
-  }, []);
-
   return (
     <Flexbox align={'center'} gap={64} style={{ minHeight: '64vh', padding: '64px 24px' }}>
       <Hero />

src/ChatItem/demos/Alert.tsx

@@ -1,6 +1,3 @@
-/**
- * iframe: 600
- */
 import { ChatItem, ChatItemProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
 
 import { avatar } from './data';

src/ChatItem/demos/index.tsx

@@ -1,6 +1,3 @@
-/**
- * iframe: 600
- */
 import {
   ActionIconGroup,
   ChatItem,

src/ChatList/demos/index.tsx

@@ -1,6 +1,3 @@
-/**
- * iframe: 600
- */
 import { ChatList, ChatListProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
 
 import { data } from './data';

src/EditableMessageList/index.tsx

@@ -1,13 +1,12 @@
-import { PlusOutlined } from '@ant-design/icons';
 import { Button, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { TrashIcon } from 'lucide-react';
+import { Plus, Trash } from 'lucide-react';
 import { memo, useEffect, useReducer } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import IconAction from '@/ActionIcon';
 import { ChatMessage, messagesReducer } from '@/Chat';
 import { ControlInput } from '@/components/ControlInput';
+import { ActionIcon, Icon } from '@/index';
 
 export interface EditableMessageListProps {
   /**
@@ -53,9 +52,9 @@ export const EditableMessageList = memo<EditableMessageListProps>(
                 dispatch({ type: 'updateMessageRole', index, role: value });
               }}
               options={[
-                { value: 'system', label: '系统' },
-                { value: 'user', label: '输入' },
-                { value: 'assistant', label: '输出' },
+                { value: 'system', label: 'System' },
+                { value: 'user', label: 'Input' },
+                { value: 'assistant', label: 'Output' },
               ]}
               style={{ width: 120 }}
               value={item.role}
@@ -68,12 +67,13 @@ export const EditableMessageList = memo<EditableMessageListProps>(
               placeholder={item.role === 'user' ? '请填入输入的样例内容' : '请填入输出的样例'}
               value={item.content}
             />
-            <IconAction
-              icon={TrashIcon}
+            <ActionIcon
+              icon={Trash}
               onClick={() => {
                 dispatch({ type: 'deleteMessage', index });
               }}
               placement="right"
+              size={{ fontSize: 16 }}
               title="Delete"
             />
           </Flexbox>
@@ -82,7 +82,7 @@ export const EditableMessageList = memo<EditableMessageListProps>(
         <Button
           block
           disabled={disabled}
-          icon={<PlusOutlined />}
+          icon={<Icon icon={Plus} />}
           onClick={() => {
             const lastMeg = chatMessages.at(-1);
 
@@ -92,7 +92,7 @@ export const EditableMessageList = memo<EditableMessageListProps>(
             });
           }}
         >
-          添加一项
+          Add Props
         </Button>
       </Flexbox>
     );

src/Hero/index.tsx

@@ -41,17 +41,21 @@ const Hero = memo<HeroProps>(({ title, description, actions }) => {
                 target={openExternal ? '_blank' : undefined}
               >
                 {type === 'primary' ? (
-                  <GradientButton key={index} size="large">
+                  <GradientButton
+                    icon={ButtonIcon && <Icon icon={ButtonIcon} />}
+                    key={index}
+                    size="large"
+                  >
                     {text}
                   </GradientButton>
                 ) : (
-                  <Button key={index} size="large" type="primary">
-                    <Space align="center">
-                      {ButtonIcon && (
-                        <Icon icon={ButtonIcon} size={{ fontSize: 18, strokeWidth: 2 }} />
-                      )}
-                      {text}
-                    </Space>
+                  <Button
+                    icon={ButtonIcon && <Icon icon={ButtonIcon} />}
+                    key={index}
+                    size="large"
+                    type="primary"
+                  >
+                    {text}
                   </Button>
                 )}
               </a>

src/Highlighter/SyntaxHighlighter/index.tsx

@@ -1,18 +1,19 @@
-import { Loading3QuartersOutlined as Loading } from '@ant-design/icons';
 import { useThemeMode } from 'antd-style';
+import { Loader2 } from 'lucide-react';
 import { memo, useEffect } from 'react';
 import { Center } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import { useHighlight } from '@/hooks/useHighlight';
+import { Icon } from '@/index';
 
 import type { HighlighterProps } from '../index';
 import { useStyles } from './style';
 
 export type SyntaxHighlighterProps = Pick<HighlighterProps, 'language' | 'children' | 'theme'>;
 
 const SyntaxHighlighter = memo<SyntaxHighlighterProps>(({ children, language }) => {
-  const { styles, theme } = useStyles();
+  const { styles } = useStyles();
   const { isDarkMode } = useThemeMode();
   const [codeToHtml, isLoading] = useHighlight((s) => [s.codeToHtml, !s.highlighter], shallow);
 
@@ -39,7 +40,7 @@ const SyntaxHighlighter = memo<SyntaxHighlighterProps>(({ children, language })
 
       {isLoading && (
         <Center className={styles.loading} gap={8} horizontal>
-          <Loading spin style={{ color: theme.colorTextTertiary }} />
+          <Icon icon={Loader2} spin />
           Highlighting...
         </Center>
       )}

src/Icon/index.tsx

@@ -62,20 +62,22 @@ export interface IconProps extends DivProps {
   spin?: boolean;
 }
 
-const Icon = memo<IconProps>(({ icon, size, style, className, spin, ...props }) => {
+const Icon = memo<IconProps>(({ icon, size, className, spin, ...props }) => {
   const { styles, cx } = useStyles();
   const SvgIcon = icon;
 
   const { fontSize, strokeWidth } = useMemo(() => calcSize(size), [size]);
 
   return (
-    <div
-      className={cx(styles.icon, spin && styles.spin, className)}
-      style={{ width: fontSize, height: fontSize, ...style }}
-      {...props}
-    >
-      <SvgIcon size={fontSize} strokeWidth={strokeWidth} />
-    </div>
+    <span className={cx('anticon', spin && styles.spin, className)} role="img" {...props}>
+      <SvgIcon
+        focusable={false}
+        height={fontSize}
+        size={fontSize}
+        strokeWidth={strokeWidth}
+        width={fontSize}
+      />
+    </span>
   );
 });
 

src/Icon/style.ts

@@ -10,11 +10,6 @@ export const useStyles = createStyles(({ css }) => {
   }
   `;
   return {
-    icon: css`
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    `,
     spin: css`
       animation: ${spin} 1s linear infinite;
     `,

src/MessageModal/index.tsx

@@ -1,11 +1,10 @@
-import { AimOutlined } from '@ant-design/icons';
 import { Modal } from 'antd';
+import { X } from 'lucide-react';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
 
-import Markdown from '@/Markdown';
-import MessageInput from '@/MessageInput';
+import { Icon, Markdown, MessageInput } from '@/index';
 
 import { useStyles } from './style';
 
@@ -54,19 +53,19 @@ const MessageModal = memo<MessageModalProps>(
 
     return (
       <Modal
-        cancelText={'关闭'}
+        cancelText={'Cancel'}
         className={styles.modal}
+        closeIcon={<Icon icon={X} />}
         footer={isEdit ? null : undefined}
-        okText={'编辑'}
+        okText={'Edit'}
         onCancel={() => setExpand(false)}
         onOk={() => {
           setTyping(true);
         }}
         open={expand}
         title={
           <Flexbox align={'center'} gap={4} horizontal>
-            <AimOutlined />
-            提示词
+            Prompt
           </Flexbox>
         }
         width={800}