Skip to content

feat(wallet): WalletMiniCard + WalletList 组件及彩虹水印优化 - #138

Merged
Gaubee merged 4 commits into
mainfrom
feat/wallet-mini-card-rainbow
Dec 28, 2025
Merged

Gaubee merged 4 commits into
mainfrom
feat/wallet-mini-card-rainbow

Conversation

@Gaubee

@Gaubee Gaubee commented Dec 28, 2025

Copy link
Copy Markdown
Contributor

概述

新增 WalletMiniCard 和 WalletList 组件,优化 monochrome-mask 算法实现彩虹水印效果。

主要更改

新增组件

  • WalletMiniCard: 小尺寸钱包卡片图标,支持三角形纹理和彩虹水印
  • WalletList: 可复用的钱包列表组件,带选择和添加功能

Monochrome-mask 算法优化

  • clip 裁剪: 基于亮度转换后的 alpha 值裁剪透明区域
  • 亮度锚定: targetBrightness 参数确保不同图标显示效果一致
  • 高清支持: 使用 devicePixelRatio 提升 canvas 清晰度
  • 核心算法抽取: applyMonochromeTransform() 函数复用

集成更新

  • WalletSelector 使用 WalletMiniCard 替代字母头像
  • WalletListJob 集成链图标彩虹水印
  • 新增 src/lib/canvas/ 工具库(canvas-pool, monochrome-mask)

测试

  • WalletMiniCard: 11 个测试用例
  • WalletList: 13 个测试用例
  • WalletSelector: 更新测试用例

Storybook

  • WalletMiniCard: 多个 stories 展示不同尺寸和效果
  • WalletList: 9 个 stories 展示各种场景
  • WalletSelector: 更新 stories 使用不同链图标

- 新增 WalletMiniCard 组件:小尺寸钱包卡片图标
- 新增 WalletList 组件:可复用的钱包列表
- 优化 monochrome-mask 算法:
  - 支持 clip 裁剪透明区域(基于亮度转换后的 alpha)
  - 支持 targetBrightness 亮度锚定
  - 使用 devicePixelRatio 提升清晰度
- WalletSelector 使用 WalletMiniCard 替代字母头像
- WalletListJob 集成链图标彩虹水印
- 新增 canvas-pool 和 monochrome-mask 工具库
@Gaubee
Gaubee merged commit c1738fe into main Dec 28, 2025
5 checks passed
@Gaubee
Gaubee deleted the feat/wallet-mini-card-rainbow branch December 28, 2025 08:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant