编辑
2025-05-24
ai相关
0

目录

独立页面

方便以后使用和复制

独立页面

请协助开发一个Vue3+TS实现的Foxhole游戏中英术语词典组件,需满足以下核心需求:

  1. 可视化设计
  • 采用分栏式布局:左侧30%宽度为分类导航(载具/武器/建筑等),右侧70%为内容展示区
  • 每个词条采用卡片化设计,包含: • 优先加载的占位图(使用Tailwind的animate-pulse实现骨架屏) • 120x120px的游戏元素配图(需支持动态src) • 中英文名称(显眼字体层级) • 复制按钮(带hover效果)
  1. 交互规范
  • 预留事件发射器: @category-change(分类切换) @search(搜索触发) @copy(复制成功)
  • 点击复制按钮时需调用navigator.clipboard.writeText
  1. 数据规范
  • 定义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' } }
  1. 样式要求
  • 严格使用Tailwind CSS实现: • 响应式网格布局(md
    lg
    ) • 颜色使用slate色系(bg-slate-800/text-slate-100) • 交互状态(transition duration-300 hover
  • 图片加载错误处理:使用@error事件切换备用占位图
  1. 可访问性
  • 为所有图片添加alt属性
  • 支持键盘导航(tabindex属性)
  • ARIA角色标注(role="navigation"等)
  1. 组件规范
  • 导出为名为FoxholeGlossary的独立组件
  • 使用Vue3 Composition API
  • 类型定义独立存储在types/glossary.d.ts

请输出完整组件代码,保持代码整洁并符合Vue3最佳实践,注释中注明关键实现逻辑。

本文作者:宁骑

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!