feat(common): 抽取通用 Badge 和 ArrowRight 组件并统一替换内联角标

- 新增 Badge 组件,替代项目内多处重复数字角标代码,支持 count、max、颜色、尺寸等配置
- 新增 ArrowRight 组件,替代项目内多处 '>' 文本箭头,采用 CSS 绘制,支持颜色和尺寸配置
- user、index 和 store页面相关角标已改用 Badge 组件,简化代码和统一样式
- user 页面箭头符号替换为 ArrowRight 组件,提升图标一致性和样式可控性
- app.config.ts 调整 tabbar 配置,将“订单”页替换为“购物车”页
This commit is contained in:
2026-07-15 23:29:20 +08:00
parent b8fca7bed2
commit c12bba66eb
9 changed files with 177 additions and 26 deletions

View File

@@ -286,3 +286,47 @@
1. 角标位置 `top-0 right-2``-top-1 -right-1`:让小红点紧贴 cell 右上角外缘,更像标准徽标
2. 角标尺寸 `text-xs` + 自由拉伸 → `min-w-[16px] h-4` + 10px/12px 字体:单数字也保持圆形,多位数字自动变椭圆
3. 0 判断 `item.count && item.count > 0``item.count && Number(item.count) > 0`:用 `Number()` 包一层,防止后端返回字符串 "0" 时 `> 0` 误判
## 抽取通用 Badge 组件2026-07-15 23:10
- 新文件:`src/components/common/Badge/index.tsx`
- 用途:替代项目里多处复制粘贴的内联角标 Viewuser.tsx / index/index.tsx / store/center/index.tsx 都有 `min-w-[16px] h-4 px-1 bg-red-500 rounded-full` 这种重复写法)
- API
```ts
interface BadgeProps {
count?: number | null // 0 / null / undefined / 负数 → 不渲染
max?: number // 默认 99超过显示 `${max}+`
className?: string // 外层定位 className如 'absolute -top-1 -right-1'
color?: string // 默认 #ef4444red-500
fontSize?: number // 默认 10px
}
```
- user.tsx 已替换:内联 `{Number(item.count) > 0 && <View ...>}` → `<Badge count={item.count} className='absolute -top-1 -right-1' />`
- 风格遵循项目 common 组件约定:函数式组件 + 默认导出 + Taro View/Text + Tailwind className
- 待办(未做):首页 `src/pages/index/index.tsx:248` 和门店中心 `src/pages/store/center/index.tsx:218` 也有相同内联角标写法,后续可统一替换为 Badge
## 抽取通用 ArrowRight 组件2026-07-15 23:13
- 新文件:`src/components/common/ArrowRight/index.tsx`
- 用途:替代项目里到处可见的 `{'>'}` / `'>'` 文本箭头
- 实现CSS V 形border-top + border-right + rotate(45deg)),颜色用 `currentColor` 跟父级 `text-*` 类走
- API
```ts
interface ArrowRightProps {
className?: string // 颜色用 text-* 类(如 'text-gray-400'),间距用 ml-1 等
size?: number // V 形边长 px默认 6
thickness?: number // 描边粗细 px默认 1.5
}
```
- user.tsx 已替换 3 处 `{'>'}`
1. 用户卡片头部箭头(白色 60% 透明)→ `<ArrowRight className='text-white text-opacity-60' />`
2. 「全部订单 >」→ 拆成 `<View className='flex items-center text-xs text-gray-400'><Text>全部订单</Text><ArrowRight className='ml-1' /></View>`
3. 菜单项末尾箭头amber-700 / gray-300→ `<ArrowRight className={...} />`
- 关键点Tailwind 的 `text-opacity-60` 会通过 `--tw-text-opacity` 影响 colorcurrentColor 会继承这个带 opacity 的 color所以 ArrowRight 的透明度也会跟随
- 待办(未做):其它页面也有 `{'>'}` 文本箭头,后续可统一替换
## 统一替换 index/index.tsx 和 store/center 的内联角标为 Badge2026-07-15 23:17
- Badge 组件 API 扩展:新增 `size`(默认 16和 `fontWeight`(默认 'normal'参数padding 从 className 的 `px-1` 改为 inline style 根据 size 自动计算16→2px20→3px避免与调用方 className 冲突
- `src/pages/index/index.tsx:248`数字角标16x16/10px→ `<Badge count={newOrderCount} className='absolute -top-1 -right-1' />`
- 注意:保留了 `isClerk && newOrderCount > 0` 外层判断(虽然 Badge 内部 0 不渲染,但下面还有 `newOrderCount === 0` 的小红点逻辑,保留判断让语义更明确)
- `src/pages/store/center/index.tsx:218`数字角标20x20/11px/加粗)→ `<Badge count={getBadgeCount(card.key)} className='absolute -top-1 -right-1' size={20} fontSize={11} fontWeight='bold' />`
- 简化了外层判断:`card.showBadge && getBadgeCount > 0` → `card.showBadge`Badge 内部已处理 0 不渲染)
- 项目内联角标已全部统一为 Badge 组件,共 3 处user.tsx / index/index.tsx / store/center/index.tsx