Răsfoiți Sursa

✨ feat(components): 创建TDesign Icon组件

- 实现Icon组件基础结构,支持name、size、color等属性
- 定义图标名称到Heroicons类名的映射关系,覆盖搜索、导航、操作等多类图标
- 添加点击事件处理和样式控制功能

📝 docs(stories): 更新任务清单状态

- 将"创建Icon组件"任务标记为已完成
yourname 1 lună în urmă
părinte
comite
dd7b0e413b

+ 1 - 1
docs/stories/001.004.homepage-ui-refactor.md

@@ -18,7 +18,7 @@ Draft
 ## Tasks / Subtasks
 - [ ] 创建TDesign组件库 (AC: 1, 5)
   - [ ] 创建Taro React版本的TDesign组件
-    - [ ] 创建 `mini/src/components/tdesign/icon/index.tsx` - Icon组件 (对照: `mini/tdesign/icon/`)
+    - [x] 创建 `mini/src/components/tdesign/icon/index.tsx` - Icon组件 (对照: `mini/tdesign/icon/`)
     - [x] 创建 `mini/src/components/tdesign/search/index.tsx` - Search组件 (对照: `mini/tdesign/search/`)
     - [ ] 创建 `mini/src/components/tdesign/swiper/index.tsx` - Swiper组件 (对照: `mini/tdesign/swiper/`)
     - [ ] 创建 `mini/src/components/tdesign/toast/index.tsx` - Toast组件 (对照: `mini/tdesign/toast/`)

+ 85 - 0
mini/src/components/tdesign/icon/index.tsx

@@ -0,0 +1,85 @@
+import { View } from '@tarojs/components'
+
+interface IconProps {
+  name: string
+  size?: string
+  color?: string
+  className?: string
+  onClick?: () => void
+}
+
+// 图标名称到 Heroicons 类名的映射
+const iconClassMap: Record<string, string> = {
+  // 搜索相关
+  'search': 'i-heroicons-magnifying-glass-20-solid',
+  'close-circle-filled': 'i-heroicons-x-circle-20-solid',
+
+  // 导航相关
+  'home': 'i-heroicons-home-20-solid',
+  'user': 'i-heroicons-user-20-solid',
+  'shopping-cart': 'i-heroicons-shopping-cart-20-solid',
+  'heart': 'i-heroicons-heart-20-solid',
+
+  // 操作相关
+  'add': 'i-heroicons-plus-20-solid',
+  'minus': 'i-heroicons-minus-20-solid',
+  'close': 'i-heroicons-x-mark-20-solid',
+  'check': 'i-heroicons-check-20-solid',
+  'loading': 'i-heroicons-arrow-path-20-solid',
+
+  // 方向相关
+  'arrow-up': 'i-heroicons-chevron-up-20-solid',
+  'arrow-down': 'i-heroicons-chevron-down-20-solid',
+  'arrow-left': 'i-heroicons-chevron-left-20-solid',
+  'arrow-right': 'i-heroicons-chevron-right-20-solid',
+  'caret-up': 'i-heroicons-chevron-up-down-20-solid',
+  'caret-down': 'i-heroicons-chevron-up-down-20-solid',
+  'caret-left': 'i-heroicons-chevron-left-right-20-solid',
+  'caret-right': 'i-heroicons-chevron-left-right-20-solid',
+
+  // 状态相关
+  'success': 'i-heroicons-check-circle-20-solid',
+  'error': 'i-heroicons-exclamation-circle-20-solid',
+  'warning': 'i-heroicons-exclamation-triangle-20-solid',
+  'info': 'i-heroicons-information-circle-20-solid',
+  'question': 'i-heroicons-question-mark-circle-20-solid',
+
+  // 文件相关
+  'file': 'i-heroicons-document-20-solid',
+  'folder': 'i-heroicons-folder-20-solid',
+  'image': 'i-heroicons-photo-20-solid',
+
+  // 其他常用
+  'star': 'i-heroicons-star-20-solid',
+  'heart-filled': 'i-heroicons-heart-20-solid',
+  'setting': 'i-heroicons-cog-6-tooth-20-solid',
+  'filter': 'i-heroicons-funnel-20-solid',
+  'share': 'i-heroicons-share-20-solid',
+  'more': 'i-heroicons-ellipsis-horizontal-20-solid',
+  'ellipsis': 'i-heroicons-ellipsis-horizontal-20-solid',
+}
+
+export default function TDesignIcon({
+  name,
+  size = '32rpx',
+  color = '#fa550f',
+  className = '',
+  onClick
+}: IconProps) {
+  const iconClass = iconClassMap[name] || `i-heroicons-question-mark-circle-20-solid`
+
+  return (
+    <View
+      className={`${iconClass} tdesign-icon tdesign-icon--${name} ${className}`}
+      style={{
+        fontSize: size,
+        color,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        lineHeight: '1'
+      }}
+      onClick={onClick}
+    />
+  )
+}