CharacterGuide 组件

CharacterGuide 组件

角色向导组件，提供可爱的 Promi 机器人角色和对话气泡。

导出内容

PromiCharacter

机器人角色展示组件。

SpeechBubble

对话气泡组件。

PromiWithMessage

带对话气泡的完整角色组件。

PromiCharacter Props

type PromiMood = "happy" | "thinking" | "excited" | "confused" | "celebrating";

interface PromiCharacterProps {
  mood?: PromiMood;      // 情绪状态，默认 "happy"
  size?: "sm" | "md" | "lg";  // 尺寸，默认 "md"
  className?: string;    // 额外的 CSS 类
  animate?: boolean;     // 是否启用浮动动画，默认 true
}

情绪类型

情绪Emoji用途
happy😊正常状态
thinking🤔思考状态
excited🤩兴奋状态
confused😵‍💫困惑状态
celebrating🎉庆祝状态

尺寸规格

尺寸宽高字体大小
sm48px24px
md80px36px
lg112px48px

SpeechBubble Props

interface SpeechBubbleProps {
  children: ReactNode;           // 气泡内容
  direction?: "left" | "right" | "bottom";  // 尾巴方向，默认 "right"
  className?: string;            // 额外的 CSS 类
}

PromiWithMessage Props

interface PromiWithMessageProps {
  message: string;           // 消息内容
  mood?: PromiMood;          // 情绪状态
  promiPosition?: "left" | "right";  // 角色位置，默认 "left"
}

使用示例

import {
  PromiCharacter,
  SpeechBubble,
  PromiWithMessage,
} from "@/components/kids/elements/character-guide";

// 单独使用角色
<PromiCharacter mood="happy" size="lg" />

// 单独使用气泡
<SpeechBubble direction="left">
  你好！我是 Promi！
</SpeechBubble>

// 完整消息组件
<PromiWithMessage
  message="欢迎来到 Prompt 学习之旅！"
  mood="excited"
  promiPosition="left"
/>

样式说明

PromiCharacter

  • 背景: 渐变 from-primary/20 to-purple-500/20
  • 边框: 4px 实线，主色 30% 透明度
  • 圆角: 完全圆形 (rounded-full)
  • 动画: 浮动动画 (animate-float)

SpeechBubble

  • 背景: 白色 / 深色模式卡片色
  • 边框: 2px 实线，主色 20% 透明度
  • 圆角: 16px (rounded-2xl)
  • 阴影: shadow-lg

注意事项

  • 所有组件使用 "use client" 指令
  • 支持深色模式
  • 动画使用 Tailwind CSS
  • 兼容所有现代浏览器
← 返回目录