CliCommand 组件

CLI 命令展示组件，提供交互式的命令行复制功能。

功能概述

• 打字机效果: 悬停时显示命令打字动画
• 一键复制: 点击复制命令到剪贴板
• 复制反馈: 显示复制成功提示
• LTR 强制: 确保命令始终从左到右显示

Props 接口

无 Props，使用翻译键获取文本。

交互行为

状态	显示
默认	"命令行" 标签 + 终端图标
悬停	$ npx prompts.chat 打字动画
复制成功	显示绿色 "已复制!" 提示

打字机效果

• 字符间隔: 40ms
• 命令内容: npx prompts.chat
• 光标闪烁: 使用 animate-pulse

依赖

• next-intl - 国际化
• lucide-react - Terminal 图标

使用示例

import { CliCommand } from "@/components/layout/cli-command";

<CliCommand />

翻译键

{
  "homepage": {
    "commandLine": "命令行"
  },
  "common": {
    "copied": "已复制!"
  }
}

样式说明

• 背景色: bg-zinc-900 (dark: bg-zinc-800)
• 边框: border-zinc-700 (dark: border-zinc-600)
• 圆角: rounded-lg
• 终端图标颜色: 绿色 (text-green-400)
• 复制提示: 绿色背景，绝对定位在按钮上方

无障碍

• 使用语义化 <button> 元素
• 支持键盘操作