方便以后使用和复制
独立页面
请协助开发一个Vue3+TS实现的Foxhole游戏中英术语词典组件,需满足以下核心需求:
- 可视化设计
- 采用分栏式布局:左侧30%宽度为分类导航(载具/武器/建筑等),右侧70%为内容展示区
- 每个词条采用卡片化设计,包含:
• 优先加载的占位图(使用Tailwind的animate-pulse实现骨架屏)
• 120x120px的游戏元素配图(需支持动态src)
• 中英文名称(显眼字体层级)
• 复制按钮(带hover效果)
- 交互规范
- 预留事件发射器:
@category-change(分类切换)
@search(搜索触发)
@copy(复制成功)
- 点击复制按钮时需调用navigator.clipboard.writeText
- 数据规范
- 定义TypeScript接口:
interface TermItem {
id: string
en: string
zh: string
category: 'vehicles' | 'weapons' | 'buildings'
imgUrl?: string
}
- 通过props接收数据:
props: {
terms: { type: Array as PropType<TermItem[]>, required: true }
activeCategory: { type: String, default: 'vehicles' }
}
- 样式要求
- 严格使用Tailwind CSS实现:
• 响应式网格布局(md lg)
• 颜色使用slate色系(bg-slate-800/text-slate-100)
• 交互状态(transition duration-300 hover)
- 图片加载错误处理:使用@error事件切换备用占位图
- 可访问性
- 为所有图片添加alt属性
- 支持键盘导航(tabindex属性)
- ARIA角色标注(role="navigation"等)
- 组件规范
- 导出为名为FoxholeGlossary的独立组件
- 使用Vue3 Composition API
- 类型定义独立存储在types/glossary.d.ts
请输出完整组件代码,保持代码整洁并符合Vue3最佳实践,注释中注明关键实现逻辑。
本文作者:宁骑
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 MIT
许可协议。转载请注明出处!