样式重塑：从手机风格全面迁移到 Chrome 桌面插件风格（emerald + zinc）#2
Merged
Conversation
- 全新设计 token：emerald 翡翠绿 + zinc 深色基底，符合 SCASH 金融工具气质 - 窗口尺寸由 400x600 改为 360x600（业内主流：MetaMask/Phantom 同尺寸） - 删除桌面端 768px 媒体查询（插件 popup 永远定宽，不需要） - 修复 viewport meta：去掉 maximum-scale 与 user-scalable=no（违反桌面无障碍） - 默认字号收紧到 14px，更适合 popup 信息密度 - 滚动条改为幽灵款（hover 时才显形），告别移动端常显风格 - 删除手机端 -webkit-tap-highlight-color / -webkit-overflow-scrolling: touch - 加载指示器改用 emerald 主色环，去掉硬编码 bg-gray-900
Button: - 新增 success 变体（emerald 实色），用于发送/确认/解锁等高肯定性 CTA - 新增 subtle 变体（zinc-800/60），用于次级操作 - 新增 xs 尺寸（h-7）和 icon-sm 尺寸（size-7），适配工具栏小图标 - 优化 focus-visible：ring 主色 + offset，键盘可用性符合桌面规范 - outline 变体改为透明背景 + hover 时边框高亮，桌面感更强 Card: - 默认 padding 由 py-6/px-6 收紧到 py-4/px-4，gap-6 改为 gap-3 - 适配 360px 插件窗口的信息密度，避免卡片显得空旷 - CardTitle 改为 text-base，CardDescription 改为 text-xs
视觉重塑: - 删除滚动驱动的 header 缩放动画与浮出的余额条（手机沉浸式设计，桌面工具栏应稳定） - header 改为 48px 固定高度，简洁的 logo+品牌名+区块高度+设置 布局 - 余额卡片去渐变，改用 zinc-900 卡片 + 顶部节点状态带 + 底部三联余额细分 - 大余额数字从 text-4xl 缩到 text-2xl，加 tabular-nums，配 USD 估值次行 - 4 个动作按钮统一中性 zinc 风格，唯一 Send 用 emerald 主色突出主 CTA - 抽出 ActionButton 子组件去除重复 - 交易列表项收紧到 28px 头像 + 10-12px 字号，信息密度提升 40% - DAP 消息卡片从过重的 purple 换为更内敛的 indigo 代码精简: - buildSignal 统一节点/浏览器信号强度推导（去重 60+ 行） - 删除 isScrolled / handleScroll / scroll listener 等约 40 行手机端动画代码 - 加入空状态占位 无障碍: - 所有可点击元素 focus-visible: emerald ring - 设置图标按钮加 aria-label
wallet-dashboard: - 外层从 min-h-screen 改为 h-full，适配 popup 600px 固定高度 - 顶部统一 header 由 80px 收紧到 48px，与 home 工具栏视觉对齐 - 标题去掉紫色渐变，改用普通 zinc-100，简洁稳重 - '功能即将上线' 占位页换为 emerald 圆环 + Sparkles 图标的桌面化提示 - 使用 viewTitle 工具函数集中管理标题映射，去掉行内三元判断 - pt-20 改为 pt-12，content-area 改为 flex-1 min-h-0 让 home 内 absolute 定位有相对参照 language-selector: - 触发器收紧为 xs 尺寸，仅显示语言代码缩写（EN/ZH/RU），节省横向空间 - 弹层颜色改用主题 token（bg-popover），不再硬编码 gray-800 - 当前选中项加 emerald 勾选标记，符合桌面应用的明确反馈惯例
wallet-send (业务逻辑全部保留): - 紫粉绿混色 -> 统一 emerald 主色 + zinc 中性 - 主 CTA 用 success 变体（emerald 实色、zinc-950 文字） - 字号收紧（标题 sm、信息 xs/[11px]/[10px]），适配 360x600 - 抽出 Spinner 与 Row 工具组件，去重 - 成功页换为简洁的 emerald CheckCircle2 hero + 信息卡列表 - '添加另一位收款人' 改为虚线边框按钮，桌面感更强 - MAX 改为 emerald 小标签按钮，从悬空文字改为可点击块 wallet-receive (重要行为变更): - 删除 'FIO Request' 占位按钮（mock 设计，对桌面用户无价值） - 删除 navigator.share() 入口（桌面 Chrome 不支持 + popup 弹分享面板体验差） → 主操作专注于'复制地址'，复制后按钮态 2s 内显示 Check 反馈 - 二维码框简化，新增可选金额输入用于生成带金额的收款二维码 - 卡片配色统一改 zinc 系 wallet-engrave (业务逻辑全部保留): - 紫粉渐变全部移除 -> emerald 主色 + indigo 标记'链上信息' - 删除手机风格的大圆形渐变图标，换为 32px 方形 emerald 图标块 - 留言预览卡用 indigo-500/5 背景 + indigo-500/30 边框，与紫色区别明显但仍有'链上数据'语义 - 抽出 Spinner / Row 工具组件
wallet-settings (业务逻辑全部保留): - 主页设置项改为 button + ChevronRight 形式，hover 反馈更明显 - RPC 节点入口加 emerald 边框高亮（业务上是新功能、最常配置） - 锁仓 / 重置改为 outline 警示色（amber / red），不再用满色按钮 - 各子视图（changePassword / backup / security / help）统一用 SubHeader 组件 替代之前的'大紫色居中图标头'，节省纵向空间 - 备份页助记词卡片紧凑化，9px 序号字号 + 11px 词汇字号 - 捐赠区抽出 DonateRow 组件，加 zinc-950 浅底，复制按钮固定 icon-sm - 重置 dialog 文案三段式排版（说明 + 红色警示 + 灰色保留说明） rpc-nodes-settings: - 紫色 5/20 标签 -> zinc-800 中性标签 - active 节点徽章用 emerald-500/15 + CheckCircle2，更专业 - 删除按钮用 red-500/30 边框 outline，不再是单独 destructive 全染色 - 操作按钮全部缩到 size='xs'，整体密度提升 rpc-node-edit-dialog: - 弹窗宽度 sm:max-w-[340px]，适配 popup 宽度 - 输入框字号 11-12px，密码字段也是 - 测试结果横幅 emerald/red 主题色，不再 green-900/30 + red-900/30 硬编码 - 三个 footer 按钮统一 size='sm'，gap 1.5 explorer-settings: - 三个 URL 字段抽出 FieldGroup 组件去重 - 标题区由大圆图标改为 SubHeader 紧凑样式 - '重置 / 保存' 按钮收紧为 size='sm'，并排显示
业务逻辑全部保留:
- BIP39 助记词生成/校验、AES 加密、P2WPKH 地址派生 m/84'/0'/0'/0/0 全部原样
- 9 步流程：welcome → create → verify → password → download
↘ restore-method → mnemonic/file → restore-password
视觉重塑:
- 远程 logo URL（hebbkx1anhila5yf.public.blob.vercel-storage.com）替换为本地 /logo.png
解决离线/弱网下首屏空白的体验问题
- 紫色 purple-600 按钮 → emerald success 变体（与全局主色统一）
- 顶部加 48px 品牌栏 + 语言切换器，与其他页面视觉对齐
- 字号 text-2xl/xl 收紧到 sm/base，间距 p-4/space-y-4 收紧到 p-3/space-y-3
- 助记词卡片 grid-cols-3 紧凑化，9px 序号 + 11px 词汇
- 文件上传 file 按钮颜色从 purple-600 改为 emerald-500/15 主题色
- 'AlertTriangle' 警示头改用 32px 紧凑标题块（替代大居中黄色图标）
代码组织:
- 9 个步骤抽出为独立的 Step 子组件（WelcomeStep / CreateMnemonicStep / 等），
主组件只负责状态管理与流转，可读性显著提升
可访问性:
- 密码字段 onKeyDown Enter 提交（restore-password）
- show/hide 按钮 aria-label
- autoFocus 在第一个密码输入框
业务行为完全保留: - 任意长度密码都尝试解锁（由密码学校验层判定） - 异常统一视为密码错误，避免泄露内部错误信息 视觉重塑: - 远程 vercel-storage logo URL 替换为本地 /logo.png（离线可用） - 紫色 purple-600 按钮 → emerald success 变体 - logo 右下加 amber Lock 徽章，强化'已锁定'语义 - max-w-md 移除（popup 永远定宽，不需要居中限制宽度） - 输入框收紧到 h-10，与解锁按钮高度一致 - 错误信息居中显示并加 role='alert'，符合无障碍规范 - aria-invalid 在错误时高亮输入框边框 - 解锁中的 spinner 用 zinc-950 作为边色（emerald 实色按钮上更清晰）
ui/toast.tsx (重要 - 全局通知样式): - 旧：紫粉渐变 + 紫色阴影（手机 App 风格） - 新：zinc-900 实色背景 + 左侧 2px 主题色强调线（emerald/red/amber） - Viewport 收紧到 max-w-[320px]，适配 360px popup 不会贴边 ui/custom-switch.tsx: - 蓝色 bg-blue-600 → emerald-500，关 bg-gray-300 → zinc-700 - focus ring 改 emerald dap-message-display.tsx (高频组件): - 短文本预览换 zinc-950/60 背景 + zinc-800 描边 - 交互预览 hover 用 indigo-500/40 描边（DAP=链上信息语义） - 全屏对话框去掉 bg-gray-950，走主题 popover 颜色 price-chart-card.tsx: - text-gray-400/500 → text-zinc-400/500 - recharts tooltip 颜色 #0f172a/334155 → zinc-900/zinc-700 - 周期涨跌色 green-* → emerald-* markdown-renderer.tsx (DAP 内容渲染): - 链接、强调、代码内联高亮 purple → emerald - 引用块边框 purple → emerald - 表格 / hr / 标题边框 gray → zinc - 外链确认对话框走主题 token wallet-assets.tsx (mock 资产页): - 整页改用 emerald + zinc，列表项收紧到 28px 头像 - 状态点 yellow-400 → amber-400，与全局警示色统一 - 卡片改为 button + focus-visible ring，无障碍合规 transaction-details.tsx: - 抽出 Field 内部组件，规整成 key/value 行 - 标签色 green-400 → emerald-400 - 详情字号收紧到 11-13px，适配 popup 阅读 qr-scanner.tsx: - 浮层不再 max-w-md 居中，直接占满 inset，符合 popup 体验 - 扫描框 green-400 → emerald-400 + glow 阴影 - 紫色按钮 → success 变体；底部按钮统一 sm 尺寸 toast-demo.tsx (开发演示，当前未被引用): - 跟随 token 整体重塑，不再硬编码颜色
之前误把品牌色识别成 emerald 翡翠绿，实际上 SCASH logo 是紫色圆形+白色 $ 符号。 现在重新规划配色语义，分清"品牌色"与"功能色"： 品牌色（purple-600，与 logo 一致）： - 主 CTA 按钮（发送、确认、解锁、保存、创建钱包等所有 default variant） - 表单 label（to / amount / message / fee / engrave text 等） - 链接型操作（Open Explorer / View Details / 外链确认等） - SubHeader 子设置页头部图标块 - Settings 主页 RPC 节点 highlight 边框 - Language Selector 选中项 - 首页 Send 主操作按钮的高亮（其他三个保持 zinc 中性） - MAX 标签按钮、添加另一位收款人虚线按钮 - QR 扫描框角标 + 扫描线（品牌识别色） - Markdown 链接 / 强调 / 引用线 / 行内代码 - Toast default variant 强调线 - CustomSwitch 开启状态 - selection 文本高亮 + ring 焦点环 - 所有 "成功" 语义之外的按钮 hover/active 功能色 emerald（保留作为"正向状态"语义）： - 收款图标背景 + 文字（ArrowDown 箭头与金额） - 节点连接成功 / 信号强度满格 - logo 角标在线绿点 - 可用余额标签（Available） - 价格上涨 +% - 安全状态 CheckCircle2（已加密 / 助记词隔离） - 成功页 hero CheckCircle2（交易广播成功 / 刻字成功） - 测试连接成功反馈 - RPC 节点 "已激活 / Active" 徽章 - 文件上传成功反馈 - Toast success variant - Button success variant（保留，仅用于成功语义场景） 其他功能色保持不变： - amber 警示（锁仓 / 待确认 / 警告） - red 危险（错误 / 支出 / 价格下跌 / 删除） - indigo 链上信息（DAP 留言） - sky mempool 余额 技术变更： - globals.css: --primary 从 emerald-500 改为 purple-600 (#9333ea)， --primary-foreground 从 zinc-950 改为 white（purple 上对比度更佳）， --ring 改 purple-600，selection 高亮改 purple，brand-gradient 改 purple→fuchsia - layout.tsx: theme-color #10b981 → #9333ea - 所有 'variant="success"' 改为 'variant="default"'（让主 CTA 走 primary 自动变 purple） toast-demo.tsx 里演示成功 toast 的按钮保留 success - AlertDialogAction confirm 按钮 bg-emerald-500/text-zinc-950 改 bg-purple-600/text-white 构建验证：pnpm build 通过，4 个静态页面 + post-build 脚本正常。 Co-authored-by: Hysanalde <177504070+Forlingham@users.noreply.github.com>
Owner
|
ok |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request was created by @kiro-agent on behalf of @Forlingham 👻
Comment with /kiro fix to address specific feedback or /kiro all to address everything.
Learn about Kiro autonomous agent
概览
把整个 Chrome 钱包插件从"手机网页风格"全面重塑为"桌面插件工具风格"，统一采用 emerald 翡翠绿 + zinc 深石墨配色方案，与 SCASH 黑色简约 logo 契合。
构建已通过
pnpm build（仅 tiny-secp256k1 wasm 的依赖警告，与本次改动无关）。改动 9 个 commit（按层级分阶段）
关键决策
验证
pnpm tsc --noEmit全量类型检查通过pnpm build完整生产构建通过（4 个静态页面、243 kB 主页 / 628 kB First Load JS）业务行为
所有业务逻辑 100% 保留，包括：
已知限制
pnpm build后加载out/目录验证实机效果推荐后续
pnpm build后将out/加载到 Chrome（chrome://extensions → 加载已解压的扩展程序），实机检查每个页面app/globals.css里width: 360px一处即可