refactor(ui): clean up component code and improve styling

- Refactored EmojiIcon, ExpandableText, and ProviderAvatar components for better readability and consistency.
- Simplified JSX structure and improved styling in ExpandableText and EmojiAvatar stories.
- Enhanced code formatting in various files for improved maintainability.

packages/ui/src/components/base/EmojiIcon/index.tsx

@@ -17,15 +17,13 @@ const EmojiIcon: FC<EmojiIconProps> = ({ emoji, className = '', size = 26, fontS
         height: `${size}px`,
         borderRadius: `${size / 2}px`,
         fontSize: `${fontSize}px`
-      }}
+      }}>
-    >
       <div
         className="absolute inset-0 flex items-center justify-center blur-sm opacity-40"
         style={{
           fontSize: '200%',
           transform: 'scale(1.5)'
-        }}
+        }}>
-      >
         {emoji || '⭐️'}
       </div>
       {emoji}

packages/ui/src/components/display/ExpandableText/index.tsx

@@ -21,38 +21,29 @@ const ExpandableText = ({
   lineClamp = 1,
   ref
 }: ExpandableTextProps) => {
-    const [isExpanded, setIsExpanded] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(false)
 
-    const toggleExpand = useCallback(() => {
+  const toggleExpand = useCallback(() => {
-      setIsExpanded((prev) => !prev)
+    setIsExpanded((prev) => !prev)
-    }, [])
+  }, [])
 
-    return (
+  return (
+    <div
+      ref={ref}
+      className={`flex ${isExpanded ? 'flex-col' : 'flex-row items-center'} gap-2 ${className}`}
+      style={style}>
       <div
-        ref={ref}
+        className={`overflow-hidden ${
-        className={`flex ${isExpanded ? 'flex-col' : 'flex-row items-center'} gap-2 ${className}`}
+          isExpanded ? '' : lineClamp === 1 ? 'text-ellipsis whitespace-nowrap' : `line-clamp-${lineClamp}`
-        style={style}>
+        } ${isExpanded ? '' : 'flex-1'}`}>
-        <div
+        {text}
-          className={`overflow-hidden ${
-            isExpanded
-              ? ''
-              : lineClamp === 1
-              ? 'text-ellipsis whitespace-nowrap'
-              : `line-clamp-${lineClamp}`
-          } ${isExpanded ? '' : 'flex-1'}`}>
-          {text}
-        </div>
-        <Button
-          size="sm"
-          variant="light"
-          color="primary"
-          onClick={toggleExpand}
-          className="min-w-fit px-2">
-          {isExpanded ? collapseText : expandText}
-        </Button>
       </div>
-    )
+      <Button size="sm" variant="light" color="primary" onClick={toggleExpand} className="min-w-fit px-2">
-  }
+        {isExpanded ? collapseText : expandText}
+      </Button>
+    </div>
+  )
+}
 
 ExpandableText.displayName = 'ExpandableText'
 

packages/ui/src/components/display/ProviderAvatar/index.tsx

@@ -53,9 +53,7 @@ export const ProviderAvatar: React.FC<ProviderAvatarProps> = ({
         <div
           className={`flex items-center justify-center rounded-full border border-gray-200 dark:border-gray-700 ${className || ''}`}
           style={getCustomStyle()}>
-          <div className="w-4/5 h-4/5 flex items-center justify-center">
+          <div className="w-4/5 h-4/5 flex items-center justify-center">{customLogo}</div>
-            {customLogo}
-          </div>
         </div>
       )
     }

packages/ui/stories/components/display/EmojiAvatar.stories.tsx

@@ -60,10 +60,32 @@ export const Sizes: Story = {
 export const VariousEmojis: Story = {
   render: (args) => (
     <div className="grid grid-cols-6 gap-4">
-      {['😀', '😎', '🥳', '🤔', '😴', '🤯',
+      {[
-        '❤️', '🔥', '✨', '🎉', '🎯', '🚀',
+        '😀',
-        '🌟', '🌈', '☀️', '🌸', '🍕', '🎨',
+        '😎',
-        '📚', '💡', '🔧', '🎮', '🎵', '🏆'].map((emoji) => (
+        '🥳',
+        '🤔',
+        '😴',
+        '🤯',
+        '❤️',
+        '🔥',
+        '✨',
+        '🎉',
+        '🎯',
+        '🚀',
+        '🌟',
+        '🌈',
+        '☀️',
+        '🌸',
+        '🍕',
+        '🎨',
+        '📚',
+        '💡',
+        '🔧',
+        '🎮',
+        '🎵',
+        '🏆'
+      ].map((emoji) => (
         <EmojiAvatar key={emoji} {...args} children={emoji} size={40} />
       ))}
     </div>
@@ -103,30 +125,10 @@ export const Interactive: Story = {
 export const CustomStyles: Story = {
   render: (args) => (
     <div className="flex items-center gap-4">
-      <EmojiAvatar
+      <EmojiAvatar {...args} children="🎨" size={50} style={{ backgroundColor: '#ffe4e1' }} />
-        {...args}
+      <EmojiAvatar {...args} children="🌊" size={50} style={{ backgroundColor: '#e0f2ff' }} />
-        children="🎨"
+      <EmojiAvatar {...args} children="🌿" size={50} style={{ backgroundColor: '#e8f5e9' }} />
-        size={50}
+      <EmojiAvatar {...args} children="☀️" size={50} style={{ backgroundColor: '#fff8e1' }} />
-        style={{ backgroundColor: '#ffe4e1' }}
-      />
-      <EmojiAvatar
-        {...args}
-        children="🌊"
-        size={50}
-        style={{ backgroundColor: '#e0f2ff' }}
-      />
-      <EmojiAvatar
-        {...args}
-        children="🌿"
-        size={50}
-        style={{ backgroundColor: '#e8f5e9' }}
-      />
-      <EmojiAvatar
-        {...args}
-        children="☀️"
-        size={50}
-        style={{ backgroundColor: '#fff8e1' }}
-      />
     </div>
   )
 }
@@ -156,9 +158,32 @@ export const Grid: Story = {
     <div className="w-96">
       <h3 className="mb-4 text-lg font-semibold">选择你的心情</h3>
       <div className="grid grid-cols-8 gap-2">
-        {['😊', '😂', '😍', '🤔', '😎', '😴', '😭', '😡',
+        {[
-          '🤗', '😏', '😅', '😌', '🙄', '😮', '😐', '😯',
+          '😊',
-          '😪', '😫', '🥱', '😤', '😢', '😥', '😰', '🤯'].map((emoji) => (
+          '😂',
+          '😍',
+          '🤔',
+          '😎',
+          '😴',
+          '😭',
+          '😡',
+          '🤗',
+          '😏',
+          '😅',
+          '😌',
+          '🙄',
+          '😮',
+          '😐',
+          '😯',
+          '😪',
+          '😫',
+          '🥱',
+          '😤',
+          '😢',
+          '😥',
+          '😰',
+          '🤯'
+        ].map((emoji) => (
           <EmojiAvatar
             key={emoji}
             {...args}
@@ -170,4 +195,4 @@ export const Grid: Story = {
       </div>
     </div>
   )
-}
+}

packages/ui/stories/components/display/ExpandableText.stories.tsx

@@ -39,9 +39,11 @@ const meta: Meta<typeof ExpandableText> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+const longText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
 
-const chineseText = '这是一段很长的中文文本内容，用于测试文本展开和收起功能。当文本内容超过指定的行数限制时，会显示省略号，用户可以点击展开按钮查看完整内容，也可以点击收起按钮将文本重新收起。这个组件在显示长文本内容时非常有用。'
+const chineseText =
+  '这是一段很长的中文文本内容，用于测试文本展开和收起功能。当文本内容超过指定的行数限制时，会显示省略号，用户可以点击展开按钮查看完整内容，也可以点击收起按钮将文本重新收起。这个组件在显示长文本内容时非常有用。'
 
 // 基础用法
 export const Default: Story = {
@@ -196,4 +198,4 @@ export const CustomStyle: Story = {
     className: 'bg-blue-50 p-4 rounded-lg',
     style: { fontStyle: 'italic' }
   }
-}
+}