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.
2025-12-28 21:42:27 +08:00 · 2025-09-16 17:21:01 +08:00 · 2025-09-16 17:21:01 +08:00 · f48674b2c7
commit f48674b2c7
parent 56af6f43c0
5 changed files with 84 additions and 70 deletions
--- a/packages/ui/src/components/base/EmojiIcon/index.tsx
+++ b/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}
--- a/packages/ui/src/components/display/ExpandableText/index.tsx
+++ b/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(() => {
-      setIsExpanded((prev) => !prev)
-    }, [])
+  const toggleExpand = useCallback(() => {
+    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={`flex ${isExpanded ? 'flex-col' : 'flex-row items-center'} gap-2 ${className}`}
-        style={style}>
-        <div
-          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>
+        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>
+  )
+}

 ExpandableText.displayName = 'ExpandableText'

--- a/packages/ui/src/components/display/ProviderAvatar/index.tsx
+++ b/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">
-            {customLogo}
-          </div>
+          <div className="w-4/5 h-4/5 flex items-center justify-center">{customLogo}</div>
        </div>
      )
    }
--- a/packages/ui/stories/components/display/EmojiAvatar.stories.tsx
+++ b/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
-        {...args}
-        children="🎨"
-        size={50}
-        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' }}
-      />
+      <EmojiAvatar {...args} children="🎨" size={50} 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>
  )
-}
+}
--- a/packages/ui/stories/components/display/ExpandableText.stories.tsx
+++ b/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' }
  }
-}
+}