fix(ui): 修复粘贴创建器5个UI/UX问题

[dnslin]

概述

修复粘贴创建器 Epic (#5) 完成后发现的5个UI/UX问题，提升用户体验和视觉一致性。

问题与修复

1. 语言选择器重复Key错误 ❌→✅

问题: 点击语言选择器时控制台报错 Encountered two children with the same key

原因: lib/languages.ts 中 apex 和 bicep 各出现两次

• apex: 行82 和 行212
• bicep: 行106 和 行216

修复: 删除重复条目 (行212, 216)

---

2. 滚动条样式优化 🎨

问题: Select下拉框和编辑器的滚动条使用浏览器默认样式，与暗色主题不协调

修复: 在 globals.css 添加自定义滚动条样式

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #52525b; }

---

3. 选项面板重新设计 📝

问题: 密码、过期时间、阅后即焚选项缺乏上下文，用户不理解其含义

修复:

• 布局改为三列网格 (grid-cols-3)
• 每个选项添加图标 (Lock/Clock/Flame)
• 添加中文标签 ("密码保护"、"过期时间"、"阅后即焚")
• 添加说明文字 ("访问时需要输入密码"、"到期后自动删除"、"达到次数后自动删除")

Before:

[Optional password] [1天 ▼] [关闭 ▼]

After:

🔒 密码保护          🕐 过期时间         🔥 阅后即焚
[留空则不设密码]     [1天 ▼]            [关闭 ▼]
访问时需要输入密码    到期后自动删除       达到次数后自动删除

---

4. 编辑器滚动条样式 🎨

问题: 编辑器区域滚动条同样使用默认样式

修复: 通过全局滚动条样式统一解决

---

5. 页面布局优化 📐

问题:

• 长代码导致页面级滚动条出现
• Preview模式同时出现页面和容器双滚动条
• 创建按钮被推到页面底部，需要滚动才能看到

修复:

• 编辑器容器改为固定高度 h-[300px] sm:h-[350px] max-h-[50vh]
• 页面改为 h-screen overflow-hidden
• 编辑器内部滚动，创建按钮始终可见

修改文件

文件	改动
lib/languages.ts	删除重复的 apex, bicep 条目
app/globals.css	添加自定义滚动条样式 (+30行)
app/page.tsx	优化页面布局结构
components/paste/code-editor.tsx	固定编辑器高度
components/paste/options-panel.tsx	重新设计选项面板 (+55行)

测试

• pnpm build 构建通过
• 语言选择器无重复key警告
• 滚动条样式与暗色主题一致
• 选项面板清晰易懂
• 长代码不会导致页面滚动
• 创建按钮始终可见

相关Issue

• Related to [Epic] 粘贴创建器 #5 (粘贴创建器 Epic)