方便以后使用和复制

独立页面

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

1. 可视化设计

• 采用分栏式布局：左侧30%宽度为分类导航（载具/武器/建筑等），右侧70%为内容展示区
• 每个词条采用卡片化设计，包含： • 优先加载的占位图（使用Tailwind的animate-pulse实现骨架屏） • 120x120px的游戏元素配图（需支持动态src） • 中英文名称（显眼字体层级） • 复制按钮（带hover效果）

2. 交互规范

• 预留事件发射器： @category-change(分类切换) @search(搜索触发) @copy(复制成功)
• 点击复制按钮时需调用navigator.clipboard.writeText

3. 数据规范

• 定义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' } }

4. 样式要求

• 严格使用Tailwind CSS实现： • 响应式网格布局（md
  lg
  ） • 颜色使用slate色系（bg-slate-800/text-slate-100） • 交互状态（transition duration-300 hover
  ）
• 图片加载错误处理：使用@error事件切换备用占位图

5. 可访问性

• 为所有图片添加alt属性
• 支持键盘导航（tabindex属性）
• ARIA角色标注（role="navigation"等）

6. 组件规范

• 导出为名为FoxholeGlossary的独立组件
• 使用Vue3 Composition API
• 类型定义独立存储在types/glossary.d.ts

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