d8d-vite-starter/mobile-smart-assistant-implementation-plan.md

移动端智能助手实施计划

项目概述

在移动端首页实现一个现代化的水墨画风格智能助手，包含浮动按钮和对话界面。

技术架构

1. 组件结构

src/client/mobile/components/SmartAssistant/
├── FloatingButton.tsx          # 浮动按钮组件
├── ChatWindow.tsx              # 对话窗口组件
├── MessageBubble.tsx           # 消息气泡组件
├── ChatInput.tsx               # 输入区域组件
├── SmartAssistant.tsx          # 主组件整合
└── styles/                     # 样式文件
    ├── ink-styles.css         # 水墨画风格样式
    └── animations.css         # 动画定义

2. 功能特性

浮动按钮

• 位置：页面中部右侧下方
• 样式：圆形按钮，水墨画风格
• 动画：点击时图标切换动画
• 阴影：柔和阴影效果

对话窗口

• 显示方式：从底部平滑滑入
• 结构：头部标题栏 + 消息区域 + 输入区域
• 关闭方式：点击按钮或窗口内关闭按钮
• 背景点击：可选的外部点击关闭

消息系统

• 用户消息：右侧显示，蓝色主题
• 客服回复：左侧显示，灰色主题
• 自动滚动：发送后自动滚动到底部
• 模拟回复：2-3秒后自动回复

水墨画风格

• 色彩方案：宣纸背景色 (#f5f3f0) + 淡墨 (#d4c4a8) + 浓墨 (#8b7355)
• 字体：衬线体标题 + 无衬线体正文
• 阴影：柔和水墨阴影效果
• 圆角：6px圆角设计

3. 动画效果

窗口动画

.slide-up {
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

.slide-up.active {
  transform: translateY(0);
}

图标动画

.icon-rotate {
  transition: transform 0.3s ease;
}

.icon-rotate.active {
  transform: rotate(45deg);
}

消息动画

.message-enter {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
}

.message-enter-active {
  opacity: 1;
  transform: translateY(0);
}

实现步骤

阶段1：基础组件开发

1. 创建浮动按钮组件
2. 创建对话窗口容器
3. 实现基础样式和布局

阶段2：交互功能

1. 实现窗口打开/关闭动画
2. 添加消息发送功能
3. 实现自动回复机制

阶段3：样式优化

1. 应用水墨画风格
2. 添加响应式布局
3. 优化动画效果

阶段4：集成测试

1. 集成到NewHomePage
2. 测试所有交互
3. 性能优化

代码实现

1. 主组件结构

// SmartAssistant.tsx
interface Message {
  id: string;
  text: string;
  sender: 'user' | 'bot';
  timestamp: Date;
}

interface SmartAssistantProps {
  isOpen: boolean;
  onToggle: () => void;
}

const SmartAssistant: React.FC<SmartAssistantProps> = ({ isOpen, onToggle }) => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [inputText, setInputText] = useState('');
  const messagesEndRef = useRef<HTMLDivElement>(null);

  // 自动滚动到底部
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  // 发送消息
  const handleSend = async (text: string) => {
    if (!text.trim()) return;

    const newMessage: Message = {
      id: Date.now().toString(),
      text,
      sender: 'user',
      timestamp: new Date()
    };

    setMessages(prev => [...prev, newMessage]);
    setInputText('');

    // 模拟自动回复
    setTimeout(() => {
      const botReply: Message = {
        id: (Date.now() + 1).toString(),
        text: generateBotReply(text),
        sender: 'bot',
        timestamp: new Date()
      };
      setMessages(prev => [...prev, botReply]);
    }, 1500);
  };

  return (
    <>
      <FloatingButton isOpen={isOpen} onClick={onToggle} />
      <ChatWindow
        isOpen={isOpen}
        messages={messages}
        inputText={inputText}
        onSend={handleSend}
        onClose={onToggle}
        onInputChange={setInputText}
        messagesEndRef={messagesEndRef}
      />
    </>
  );
};

2. 样式定义

/* 水墨画风格 */
.ink-floating-button {
  position: fixed;
  bottom: 120px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(245, 243, 240, 0.9);
  border: 1px solid #d4c4a8;
  box-shadow: 0 4px 12px rgba(139, 115, 85, 0.15);
  backdrop-filter: blur(8px);
  z-index: 1000;
  transition: all 0.3s ease;
}

.ink-floating-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(139, 115, 85, 0.25);
}

.ink-chat-window {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70vh;
  background: rgba(245, 243, 240, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px 20px 0 0;
  border: 1px solid #d4c4a8;
  box-shadow: 0 -4px 20px rgba(139, 115, 85, 0.1);
  z-index: 999;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

.ink-chat-window.open {
  transform: translateY(0);
}

3. 消息气泡样式

.message-bubble {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 18px;
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}

.message-bubble.user {
  background: #4a6b7c;
  color: white;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}

.message-bubble.bot {
  background: #d4c4a8;
  color: #2f1f0f;
  margin-right: auto;
  border-bottom-left-radius: 4px;
}

集成步骤

1. 添加到NewHomePage

在NewHomePage.tsx中添加：

const [isAssistantOpen, setIsAssistantOpen] = useState(false);

// 在return中添加
<SmartAssistant 
  isOpen={isAssistantOpen} 
  onToggle={() => setIsAssistantOpen(!isAssistantOpen)} 
/>

2. 样式文件引入

在NewHomePage.tsx顶部添加：

import SmartAssistant from '../components/SmartAssistant/SmartAssistant';
import '../components/SmartAssistant/styles/ink-styles.css';

测试要点

1. 功能测试

• 浮动按钮显示和隐藏
• 窗口打开/关闭动画
• 消息发送和接收
• 自动滚动功能
• 外部点击关闭

2. 样式测试

• 水墨画风格一致性
• 响应式布局适配
• 动画流畅度
• 阴影和圆角效果

3. 性能测试

• 动画性能优化
• 内存泄漏检查
• 滚动性能

注意事项

1. Z-index管理：确保智能助手在所有内容之上
2. 触摸事件：移动端触摸交互优化
3. 键盘适配：输入框在键盘弹出时的位置调整
4. 性能优化：使用React.memo和useCallback优化重渲染
5. 无障碍支持：添加适当的ARIA属性

后续扩展

1. AI集成：接入真实的AI对话API
2. 历史记录：保存对话历史
3. 快捷回复：预设常用回复
4. 语音输入：添加语音识别功能
5. 多语言支持：国际化处理