docs: add wallet/favorites UI redesign requirements brief

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.unipi/docs/generated/2026-06-01-wallet-favorites-ui-redesign-requirements.md

@@ -0,0 +1,556 @@
+---
+title: "钱包登录与收藏功能 UI 设计需求（极简版）"
+type: design-brief
+date: 2026-06-01
+scope: 登录弹窗、钱包入口、收藏按钮、我的收藏页面
+---
+
+# 钱包登录与收藏功能 UI 设计需求（极简版）
+
+## 1. 设计目标
+
+这份文档给 UI 设计师使用，目的是重新设计 Arkie Library 的「钱包登录」和「我的收藏」体验。
+
+核心原则：**不要给用户太多选择。**
+
+用户只需要理解：
+
+1. 连接钱包。
+2. 签名验证地址。
+3. 收藏资源。
+4. 在「我的收藏」里管理收藏。
+
+钱包登录只用于验证地址：
+
+- 不会发起交易。
+- 不会产生 gas。
+- 不会读取资产。
+- 不需要切换链。
+
+## 2. 最重要的设计决策
+
+### 桌面端只显示「浏览器钱包」
+
+桌面端登录弹窗只需要一个主要操作：
+
+```text
+使用浏览器钱包登录
+```
+
+适用：
+
+- MetaMask 浏览器插件
+- 其他浏览器注入钱包
+
+原因：
+
+- 电脑端用户主要使用浏览器插件钱包。
+- 不要在桌面端同时展示 TokenPocket、MetaMask、imToken、扫码备用等多个入口。
+- 过多选择会让用户觉得重复和困惑。
+
+### 手机端显示「打开钱包 App」
+
+手机端可以跳转钱包 App，因此手机端可以显示：
+
+```text
+打开 TokenPocket
+打开 MetaMask
+打开 imToken
+```
+
+如果用户已经在钱包内置浏览器中打开网站，则显示：
+
+```text
+使用当前钱包登录
+```
+
+### QR / Reown 不作为主设计
+
+TokenPocket QR、Reown / WalletConnect QR 可以作为技术备用方案存在，但**不要作为默认主 UI 平铺展示**。
+
+如果必须保留，可以放在：
+
+```text
+其他登录方式
+```
+
+或折叠项中。
+
+默认设计不要同时展示：
+
+- 浏览器钱包
+- TokenPocket QR
+- 打开 TokenPocket
+- 打开 MetaMask
+- 打开 imToken
+- MetaMask / imToken QR 备用
+
+这样会显得重复。
+
+## 3. 需要设计的页面/组件
+
+1. Header 钱包入口
+2. Mobile menu 钱包入口
+3. 钱包登录弹窗：桌面版
+4. 钱包登录弹窗：手机版
+5. 收藏按钮
+6. 资源卡片上的收藏按钮位置
+7. 我的收藏页面：未登录状态
+8. 我的收藏页面：已登录列表状态
+9. 我的收藏页面：空状态
+10. 我的收藏页面：加载状态
+11. 我的收藏页面：错误状态
+12. 我的收藏页面：资源不可用状态
+
+## 4. Header 钱包入口
+
+### 未登录
+
+显示：
+
+```text
+Connect Wallet
+连接钱包
+```
+
+桌面端：
+
+- 放在 Header 右侧。
+- 是一个清楚的主按钮。
+- 不需要在 Header 展示钱包品牌。
+
+移动端：
+
+- 放在 menu 中。
+- 点击后关闭 menu，再打开登录弹窗。
+
+### 已登录
+
+显示短地址：
+
+```text
+0x12...ab34
+```
+
+点击后显示 dropdown：
+
+- 完整钱包地址
+- Disconnect / 断开连接
+
+## 5. 钱包登录弹窗：桌面版
+
+### 5.1 桌面版目标
+
+桌面版只服务一个主要场景：
+
+> 用户用浏览器插件钱包登录。
+
+### 5.2 桌面版结构
+
+建议结构：
+
+1. 标题：连接钱包
+2. 简短说明：签名仅用于验证地址，不会产生交易或 gas
+3. 一个主按钮：使用浏览器钱包登录
+4. 辅助说明：请确认浏览器已安装钱包插件
+5. 关闭按钮
+
+### 5.3 桌面版不要展示
+
+默认不要展示：
+
+- TokenPocket QR 登录
+- Open TokenPocket
+- Open MetaMask
+- Open imToken
+- MetaMask / imToken QR fallback
+- WalletConnect / Reown 说明
+
+这些对桌面用户来说会造成选择过多。
+
+### 5.4 桌面版文案建议
+
+标题：
+
+```text
+连接钱包
+```
+
+说明：
+
+```text
+签名验证钱包地址，不会发起交易，也不需要 Gas。
+```
+
+按钮：
+
+```text
+使用浏览器钱包登录
+```
+
+辅助说明：
+
+```text
+请使用已安装钱包插件的浏览器，例如 MetaMask。
+```
+
+## 6. 钱包登录弹窗：手机版
+
+### 6.1 手机版目标
+
+手机版主要服务两个场景：
+
+1. 用户在普通手机浏览器打开网站，需要跳转钱包 App。
+2. 用户已经在钱包内置浏览器打开网站，可以直接使用当前钱包。
+
+### 6.2 手机版结构
+
+建议结构：
+
+1. 标题：连接钱包
+2. 简短说明：签名仅用于验证地址，不会产生交易或 gas
+3. 如果检测到当前浏览器已有钱包：显示「使用当前钱包登录」
+4. 否则显示「选择钱包 App 打开」
+5. 钱包 App 按钮列表
+6. 关闭按钮
+
+### 6.3 手机版钱包按钮
+
+显示三个按钮：
+
+- TokenPocket
+- MetaMask
+- imToken
+
+设计建议：
+
+- 使用列表或大按钮。
+- 每个按钮只展示钱包名称和图标。
+- 不需要额外解释每个钱包的技术路径。
+
+### 6.4 手机版文案建议
+
+标题：
+
+```text
+连接钱包
+```
+
+说明：
+
+```text
+请在钱包 App 中打开本站并签名登录。
+```
+
+当前钱包按钮：
+
+```text
+使用当前钱包登录
+```
+
+钱包 App 分组标题：
+
+```text
+打开钱包 App
+```
+
+按钮：
+
+```text
+TokenPocket
+MetaMask
+imToken
+```
+
+## 7. QR / 备用方式处理
+
+如果产品仍希望保留 QR 备用能力，设计上应弱化处理。
+
+建议：
+
+- 不默认展开。
+- 放在底部小字链接：`其他登录方式`。
+- 点击后才显示 QR / WalletConnect 相关内容。
+
+但第一版 UI redesign 可以不设计 QR 主流程。
+
+如果必须设计，注意：
+
+- TokenPocket QR 是中国用户较稳定路径。
+- MetaMask / imToken QR 依赖 Reown / WalletConnect，在部分中国网络可能不稳定。
+- 这些说明不应占据主弹窗视觉中心。
+
+## 8. 收藏按钮设计
+
+### 状态
+
+收藏按钮需要这些状态：
+
+1. 未收藏
+2. 已收藏
+3. 加载中
+4. 禁用/请求中
+
+### 视觉建议
+
+未收藏：
+
+- 空心心形
+- 低对比背景
+
+已收藏：
+
+- 实心心形
+- 品牌金色
+
+加载中：
+
+- spinner 或轻量 loading
+
+### 行为
+
+未登录用户点击收藏：
+
+- 打开钱包登录弹窗。
+- 登录成功后自动完成收藏。
+
+已登录用户点击收藏：
+
+- 立即反馈状态变化。
+- 失败时恢复原状态并提示。
+
+### 摆放要求
+
+收藏按钮会出现在：
+
+- 推荐资源卡片
+- 最新资源卡片
+- 热门列表
+- 资源内容流
+- 我的收藏页面卡片
+
+设计上需要避免：
+
+- 挡住主要内容。
+- 和下载/预览按钮混淆。
+- 点击收藏时误触进入详情页。
+
+## 9. 我的收藏页面
+
+页面路径：
+
+```text
+/favorites
+```
+
+### 9.1 未登录状态
+
+用户未连接钱包时，页面显示引导。
+
+需要包含：
+
+- 收藏图标或插画
+- 标题：我的收藏 / My Favorites
+- 说明：连接钱包后可以查看和管理收藏资源
+- 主按钮：Connect Wallet / 连接钱包
+
+### 9.2 已登录状态
+
+页面需要包含：
+
+1. 页面标题
+2. 搜索框
+3. 排序
+4. 分类筛选
+5. 收藏资源列表
+6. 分页
+7. 清除筛选按钮
+
+### 9.3 搜索/筛选区
+
+支持：
+
+- 搜索收藏内容
+- 按分类筛选
+- 排序
+
+排序选项：
+
+- 最近收藏
+- 最近发布
+- 热门
+
+桌面端：
+
+- 搜索、排序、分类可以一行展示。
+
+移动端：
+
+- 纵向堆叠。
+- 不要太密。
+
+### 9.4 收藏资源卡片
+
+每个收藏资源卡片建议展示：
+
+- 封面图
+- 标题
+- 简短描述
+- 分类
+- 类型
+- 更新时间
+- 收藏数
+- 收藏按钮
+
+点击行为：
+
+- 可用资源：点击卡片进入详情。
+- 不可用资源：不能进入详情，但可以移除收藏。
+
+### 9.5 不可用资源状态
+
+用户收藏过的资源可能之后被下架或隐藏。
+
+这种资源仍然要显示在收藏列表里。
+
+设计要求：
+
+- 显示 unavailable / 不可用标签。
+- 降低视觉权重。
+- 不显示可点击详情行为。
+- 保留移除收藏按钮。
+
+### 9.6 空状态
+
+空状态包括：
+
+1. 用户还没有收藏。
+2. 搜索/筛选没有结果。
+
+需要显示：
+
+- 空状态图标
+- 简短说明
+- 如果是筛选无结果，需要提供清除筛选入口
+
+### 9.7 加载状态
+
+需要设计：
+
+- skeleton card
+- 或列表 loading placeholder
+
+要求：
+
+- 不要让布局大幅跳动。
+
+### 9.8 错误状态
+
+需要设计：
+
+- 加载失败提示
+- 重试或刷新建议
+
+## 10. 响应式要求
+
+### Desktop
+
+- Header 显示完整导航。
+- 钱包入口在右侧。
+- 登录弹窗只显示浏览器钱包登录。
+- 我的收藏页面内容宽度适中。
+- 搜索/筛选尽量横向排列。
+
+### Mobile
+
+- Header 使用 menu。
+- 钱包入口在 menu 中。
+- 登录弹窗显示当前钱包登录或钱包 App 跳转。
+- 我的收藏页面单列展示。
+- 搜索/筛选纵向排列。
+- 收藏按钮容易点击。
+
+## 11. 视觉方向
+
+当前网站视觉基调：
+
+- 深色背景
+- 金色品牌色
+- 圆角卡片
+- 半透明/轻玻璃质感
+- 移动端偏 App 化体验
+
+UI redesign 可以优化：
+
+- 登录弹窗更简单
+- 桌面端只给一个主操作
+- 手机端强调打开钱包 App
+- 收藏按钮更清楚
+- 我的收藏页面筛选区更轻量
+- 空状态更友好
+
+## 12. 多语言注意事项
+
+UI 需要支持：
+
+- 繁体中文
+- 简体中文
+- 英文
+- 韩文
+- 日文
+- 越南文
+- 印尼文
+- 马来文
+
+设计时需要预留文字长度差异。
+
+尤其注意：
+
+- 英文按钮可能较长。
+- 越南文/印尼文/马来文文本可能比中文长。
+- 移动端按钮不要因为文本过长而溢出。
+
+## 13. 设计验收清单
+
+### 钱包登录
+
+- [ ] 桌面 Header 有 Connect Wallet。
+- [ ] 手机 menu 有 Connect Wallet。
+- [ ] 桌面登录弹窗只有一个主操作：使用浏览器钱包登录。
+- [ ] 手机登录弹窗可以打开 TokenPocket / MetaMask / imToken。
+- [ ] 签名无交易、无 gas 的说明清楚。
+- [ ] 已登录状态能显示短地址。
+- [ ] 用户可以断开连接。
+
+### 收藏功能
+
+- [ ] 收藏按钮状态清楚。
+- [ ] 未收藏和已收藏容易区分。
+- [ ] loading 状态明确。
+- [ ] 收藏按钮不会和卡片点击冲突。
+- [ ] 未登录点击收藏会引导连接钱包。
+
+### 我的收藏页面
+
+- [ ] 未登录状态有明确 CTA。
+- [ ] 已登录页面有搜索、排序、分类筛选。
+- [ ] 收藏资源卡片信息足够。
+- [ ] 不可用资源状态清楚且可移除。
+- [ ] 空状态、加载状态、错误状态完整。
+- [ ] Desktop 和 mobile 都有设计稿。
+
+## 14. 设计交付建议
+
+建议 UI 交付这些画面：
+
+1. Desktop Header：未登录
+2. Desktop Header：已登录 dropdown
+3. Mobile menu：未登录
+4. Desktop wallet modal：只显示浏览器钱包登录
+5. Mobile wallet modal：打开钱包 App
+6. Favorites page：未登录状态
+7. Favorites page：已登录有列表
+8. Favorites page：空状态
+9. Favorites page：不可用资源卡片
+10. Mobile Favorites page
+11. Favorite button 状态组件