# 移动端智能助手实施计划

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

## 技术架构

### 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. 动画效果

#### 窗口动画
```css
.slide-up {
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

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

#### 图标动画
```css
.icon-rotate {
  transition: transform 0.3s ease;
}

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

#### 消息动画
```css
.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. 主组件结构
```typescript
// 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. 样式定义
```css
/* 水墨画风格 */
.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. 消息气泡样式
```css
.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中添加：
```typescript
const [isAssistantOpen, setIsAssistantOpen] = useState(false);

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

### 2. 样式文件引入
在NewHomePage.tsx顶部添加：
```typescript
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. **多语言支持**：国际化处理