1

pages/ai-assistant/ai-assistant.js

@@ -0,0 +1,288 @@
+// pages/ai-assistant/ai-assistant.js
+const aiService = require('../../utils/aiService.js')
+const learningTracker = require('../../utils/learningTracker.js')
+const util = require('../../utils/util');
+
+Page({
+  data: {
+    // 场景列表
+    scenarios: [],
+    currentScenario: null,
+    
+    // 消息列表
+    messages: [],
+    
+    // 输入框
+    inputValue: '',
+    inputPlaceholder: '输入你的问题...',
+    
+    // 状态
+    isThinking: false,
+    scrollIntoView: '',
+    
+    // 打字机效果
+    typewriterTimer: null,
+    currentTypingMessage: ''
+  },
+
+  onLoad(options) {
+    // 加载场景列表
+    const scenarios = aiService.getScenarios();
+    this.setData({ scenarios });
+    
+    // 从存储加载历史对话
+    this.loadHistory();
+    
+    // 如果从其他页面传入场景
+    if (options.scenario) {
+      this.selectScenario({ currentTarget: { dataset: { id: options.scenario } } });
+    }
+  },
+
+  onShow() {
+    // 开始跟踪学习时间
+    learningTracker.onPageShow('ai')
+  },
+
+  onHide() {
+    // 停止跟踪学习时间
+    learningTracker.onPageHide()
+  },
+
+  onUnload() {
+    // 记录学习时长
+    learningTracker.onPageUnload()
+    
+    // 清理打字机定时器
+    if (this.data.typewriterTimer) {
+      clearTimeout(this.data.typewriterTimer);
+    }
+    
+    // 保存对话历史
+    this.saveHistory();
+  },
+
+  /**
+   * 选择场景
+   */
+  selectScenario(e) {
+    const scenarioId = e.currentTarget.dataset.id;
+    const scenario = this.data.scenarios.find(s => s.id === scenarioId);
+    
+    if (!scenario) return;
+    
+    // 触觉反馈
+    wx.vibrateShort({ type: 'light' });
+    
+    // 设置当前场景
+    this.setData({
+      currentScenario: scenarioId,
+      inputPlaceholder: `${scenario.name} - 输入你的问题...`
+    });
+    
+    // 如果有预设提示词,自动发送
+    if (scenario.prompt && this.data.messages.length === 0) {
+      this.setData({ inputValue: scenario.prompt });
+      // 延迟发送,让用户看到输入
+      setTimeout(() => {
+        this.sendMessage();
+      }, 500);
+    }
+  },
+
+  /**
+   * 输入框变化
+   */
+  onInput(e) {
+    this.setData({
+      inputValue: e.detail.value
+    });
+  },
+
+  /**
+   * 发送消息
+   */
+  async sendMessage() {
+    const content = this.data.inputValue.trim();
+    
+    if (!content || this.data.isThinking) return;
+    
+    // 触觉反馈
+    wx.vibrateShort({ type: 'medium' });
+    
+    // 添加用户消息
+    const userMessage = {
+      role: 'user',
+      content: content,
+      time: util.formatTime(new Date(), 'hh:mm')
+    };
+    
+    const messages = [...this.data.messages, userMessage];
+    
+    this.setData({
+      messages,
+      inputValue: '',
+      isThinking: true
+    });
+    
+    // 滚动到底部
+    this.scrollToBottom();
+    
+    try {
+      // 调用AI服务
+      const reply = await aiService.chat(
+        messages.map(m => ({ role: m.role, content: m.content })),
+        this.data.currentScenario
+      );
+      
+      // 添加AI回复(带打字机效果)
+      const assistantMessage = {
+        role: 'assistant',
+        content: '', // 初始为空,打字机逐步显示
+        time: util.formatTime(new Date(), 'hh:mm')
+      };
+      
+      this.setData({
+        messages: [...this.data.messages, assistantMessage],
+        isThinking: false
+      });
+      
+      // 启动打字机效果
+      this.typewriterEffect(reply, this.data.messages.length - 1);
+      
+    } catch (error) {
+      // 错误处理
+      const errorMessage = {
+        role: 'assistant',
+        content: aiService.getErrorMessage(error),
+        time: util.formatTime(new Date(), 'hh:mm')
+      };
+      
+      this.setData({
+        messages: [...this.data.messages, errorMessage],
+        isThinking: false
+      });
+      
+      this.scrollToBottom();
+      
+      wx.showToast({
+        title: '发送失败',
+        icon: 'error'
+      });
+    }
+  },
+
+  /**
+   * 打字机效果
+   */
+  typewriterEffect(text, messageIndex, currentIndex = 0) {
+    if (currentIndex >= text.length) {
+      // 打字完成,保存历史
+      this.saveHistory();
+      return;
+    }
+    
+    // 每次显示2-3个字符(中文)或5-8个字符(英文)
+    const charsToAdd = text[currentIndex].match(/[\u4e00-\u9fa5]/) ? 
+      Math.min(2, text.length - currentIndex) : 
+      Math.min(6, text.length - currentIndex);
+    
+    const newText = text.substring(0, currentIndex + charsToAdd);
+    
+    // 更新消息内容
+    const messages = this.data.messages;
+    messages[messageIndex].content = newText;
+    
+    this.setData({ messages });
+    this.scrollToBottom();
+    
+    // 继续打字
+    const delay = text[currentIndex].match(/[,。!?;:,.]/) ? 150 : 50;
+    this.data.typewriterTimer = setTimeout(() => {
+      this.typewriterEffect(text, messageIndex, currentIndex + charsToAdd);
+    }, delay);
+  },
+
+  /**
+   * 清空对话
+   */
+  clearMessages() {
+    wx.showModal({
+      title: '确认清空',
+      content: '确定要清空所有对话记录吗?',
+      confirmColor: '#FF3B30',
+      success: (res) => {
+        if (res.confirm) {
+          this.setData({
+            messages: [],
+            currentScenario: null,
+            inputPlaceholder: '输入你的问题...'
+          });
+          
+          // 清除存储
+          wx.removeStorageSync('ai_chat_history');
+          
+          wx.showToast({
+            title: '已清空',
+            icon: 'success'
+          });
+        }
+      }
+    });
+  },
+
+  /**
+   * 滚动到底部
+   */
+  scrollToBottom() {
+    const query = wx.createSelectorQuery();
+    query.select('.message-list').boundingClientRect();
+    query.selectViewport().scrollOffset();
+    
+    setTimeout(() => {
+      this.setData({
+        scrollIntoView: `msg-${this.data.messages.length - 1}`
+      });
+    }, 100);
+  },
+
+  /**
+   * 保存对话历史
+   */
+  saveHistory() {
+    try {
+      wx.setStorageSync('ai_chat_history', {
+        messages: this.data.messages,
+        scenario: this.data.currentScenario,
+        timestamp: Date.now()
+      });
+    } catch (error) {
+      console.error('保存历史失败:', error);
+    }
+  },
+
+  /**
+   * 加载对话历史
+   */
+  loadHistory() {
+    try {
+      const history = wx.getStorageSync('ai_chat_history');
+      
+      if (history && history.messages) {
+        // 只加载24小时内的历史
+        const hoursPassed = (Date.now() - history.timestamp) / (1000 * 60 * 60);
+        
+        if (hoursPassed < 24) {
+          this.setData({
+            messages: history.messages,
+            currentScenario: history.scenario
+          });
+          
+          setTimeout(() => this.scrollToBottom(), 300);
+        }
+      }
+    } catch (error) {
+      console.error('加载历史失败:', error);
+    }
+  }
+});

pages/ai-assistant/ai-assistant.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "启思AI",
+  "navigationBarBackgroundColor": "#6C5CE7",
+  "navigationBarTextStyle": "white",
+  "enablePullDownRefresh": false,
+  "backgroundColor": "#F5F6FA"
+}

pages/ai-assistant/ai-assistant.wxml

@@ -0,0 +1,88 @@
+<!--pages/ai-assistant/ai-assistant.wxml-->
+<view class="ai-container">
+  <!-- 智能场景选择 -->
+  <view class="scenario-bar" wx:if="{{messages.length === 0}}">
+    <scroll-view class="scenario-scroll" scroll-x="{{true}}" show-scrollbar="{{false}}">
+      <view class="scenario-item" 
+            wx:for="{{scenarios}}" 
+            wx:key="id"
+            data-id="{{item.id}}"
+            bindtap="selectScenario">
+        <view class="scenario-icon">{{item.icon}}</view>
+        <view class="scenario-name">{{item.name}}</view>
+      </view>
+    </scroll-view>
+  </view>
+
+  <!-- 欢迎界面 -->
+  <view class="welcome-section" wx:if="{{messages.length === 0}}">
+    <view class="welcome-icon">🤖</view>
+    <view class="welcome-title">启思AI</view>
+    <view class="welcome-subtitle">启迪思维·智慧学习·与你同行</view>
+    <view class="welcome-tips">
+      <view class="tip-item">💡 智能解答学习疑问</view>
+      <view class="tip-item">📚 个性化学习建议</view>
+      <view class="tip-item">🎯 高效学习计划</view>
+    </view>
+  </view>
+
+  <!-- 聊天消息列表 -->
+  <scroll-view class="message-list" 
+               scroll-y="{{true}}" 
+               scroll-into-view="{{scrollIntoView}}"
+               scroll-with-animation="{{true}}"
+               wx:if="{{messages.length > 0}}">
+    <view class="message-item {{item.role}}" 
+          wx:for="{{messages}}" 
+          wx:key="index"
+          id="msg-{{index}}">
+      <view class="avatar">
+        <view wx:if="{{item.role === 'user'}}" class="user-avatar">👤</view>
+        <view wx:else class="ai-avatar">🤖</view>
+      </view>
+      <view class="message-content">
+        <view class="message-text">{{item.content}}</view>
+        <view class="message-time">{{item.time}}</view>
+      </view>
+    </view>
+
+    <!-- AI思考中 -->
+    <view class="message-item assistant thinking" wx:if="{{isThinking}}">
+      <view class="avatar">
+        <view class="ai-avatar">🤖</view>
+      </view>
+      <view class="message-content">
+        <view class="thinking-dots">
+          <view class="dot"></view>
+          <view class="dot"></view>
+          <view class="dot"></view>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+
+  <!-- 输入区域 -->
+  <view class="input-bar">
+    <view class="input-wrapper">
+      <textarea class="message-input" 
+                placeholder="{{inputPlaceholder}}" 
+                value="{{inputValue}}"
+                bindinput="onInput"
+                auto-height
+                maxlength="500"
+                adjust-position="{{true}}"></textarea>
+      <view class="char-count">{{inputValue.length}}/500</view>
+    </view>
+    <button class="send-btn {{inputValue.length > 0 ? 'active' : ''}}" 
+            bindtap="sendMessage"
+            disabled="{{isThinking || inputValue.length === 0}}">
+      <text wx:if="{{!isThinking}}">发送</text>
+      <text wx:else>...</text>
+    </button>
+  </view>
+
+  <!-- 清空对话按钮 -->
+  <view class="clear-btn" wx:if="{{messages.length > 0}}" bindtap="clearMessages">
+    <text>🗑️ 清空对话</text>
+  </view>
+</view>

pages/ai-assistant/ai-assistant.wxss

@@ -0,0 +1,356 @@
+/* pages/ai-assistant/ai-assistant.wxss */
+@import "/styles/design-tokens.wxss";
+@import "/styles/premium-animations.wxss";
+
+.ai-container {
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+/* 场景选择栏 */
+.scenario-bar {
+  padding: 20rpx 0;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20rpx);
+  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
+}
+
+.scenario-scroll {
+  white-space: nowrap;
+  padding: 0 20rpx;
+}
+
+.scenario-item {
+  display: inline-block;
+  padding: 20rpx 30rpx;
+  margin-right: 20rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 20rpx;
+  text-align: center;
+  transition: all 0.3s ease;
+  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+}
+
+.scenario-item:active {
+  transform: scale(0.95);
+  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+}
+
+.scenario-icon {
+  font-size: 48rpx;
+  margin-bottom: 8rpx;
+}
+
+.scenario-name {
+  font-size: 24rpx;
+  color: #FFFFFF;
+  font-weight: 500;
+}
+
+/* 欢迎界面 */
+.welcome-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60rpx 40rpx;
+  animation: fadeInUp 0.6s ease;
+}
+
+.welcome-icon {
+  font-size: 120rpx;
+  margin-bottom: 30rpx;
+  animation: float 3s ease-in-out infinite;
+}
+
+.welcome-title {
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #FFFFFF;
+  margin-bottom: 20rpx;
+  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.welcome-subtitle {
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 60rpx;
+  text-align: center;
+}
+
+.welcome-tips {
+  width: 100%;
+}
+
+.tip-item {
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(20rpx);
+  border-radius: 16rpx;
+  color: #FFFFFF;
+  font-size: 28rpx;
+  border: 1rpx solid rgba(255, 255, 255, 0.3);
+}
+
+/* 消息列表 */
+.message-list {
+  flex: 1;
+  padding: 30rpx;
+  overflow-y: auto;
+}
+
+.message-item {
+  display: flex;
+  margin-bottom: 30rpx;
+  animation: messageSlideIn 0.3s ease;
+}
+
+.message-item.user {
+  flex-direction: row-reverse;
+}
+
+.avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  margin: 0 20rpx;
+}
+
+.avatar image {
+  width: 100%;
+  height: 100%;
+}
+
+.user-avatar {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40rpx;
+  box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);
+}
+
+.ai-avatar {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40rpx;
+  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+}
+
+.message-content {
+  max-width: 500rpx;
+  animation: fadeIn 0.3s ease;
+}
+
+.message-text {
+  padding: 24rpx 28rpx;
+  border-radius: 20rpx;
+  font-size: 28rpx;
+  line-height: 1.6;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.message-item.user .message-text {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #FFFFFF;
+  border-bottom-right-radius: 4rpx;
+  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+}
+
+.message-item.assistant .message-text {
+  background: rgba(255, 255, 255, 0.95);
+  color: #2D3436;
+  border-bottom-left-radius: 4rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.message-time {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.7);
+  margin-top: 8rpx;
+  text-align: right;
+}
+
+.message-item.assistant .message-time {
+  text-align: left;
+}
+
+/* AI思考中 */
+.thinking-dots {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 28rpx;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20rpx;
+  border-bottom-left-radius: 4rpx;
+}
+
+.dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: #667eea;
+  margin: 0 6rpx;
+  animation: thinking 1.4s infinite;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+/* 输入区域 */
+.input-bar {
+  display: flex;
+  align-items: flex-end;
+  padding: 20rpx;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20rpx);
+  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
+  safe-area-inset-bottom: constant(safe-area-inset-bottom);
+  safe-area-inset-bottom: env(safe-area-inset-bottom);
+}
+
+.input-wrapper {
+  flex: 1;
+  position: relative;
+  margin-right: 20rpx;
+}
+
+.message-input {
+  width: 100%;
+  min-height: 80rpx;
+  max-height: 200rpx;
+  padding: 20rpx 24rpx;
+  background: #F5F6FA;
+  border-radius: 16rpx;
+  font-size: 28rpx;
+  line-height: 1.5;
+  box-sizing: border-box;
+}
+
+.char-count {
+  position: absolute;
+  right: 24rpx;
+  bottom: 8rpx;
+  font-size: 20rpx;
+  color: #999999;
+}
+
+.send-btn {
+  width: 120rpx;
+  height: 80rpx;
+  background: #CCCCCC;
+  color: #FFFFFF;
+  border-radius: 16rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.send-btn.active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4);
+}
+
+.send-btn:active {
+  transform: scale(0.95);
+}
+
+.send-btn::after {
+  border: none;
+}
+
+/* 清空按钮 */
+.clear-btn {
+  position: absolute;
+  top: 20rpx;
+  right: 20rpx;
+  padding: 16rpx 24rpx;
+  background: rgba(255, 59, 48, 0.9);
+  color: #FFFFFF;
+  border-radius: 30rpx;
+  font-size: 24rpx;
+  box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.3);
+  z-index: 100;
+}
+
+.clear-btn:active {
+  transform: scale(0.95);
+}
+
+/* 动画 */
+@keyframes messageSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes thinking {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.7;
+  }
+  30% {
+    transform: translateY(-10rpx);
+    opacity: 1;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20rpx);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(40rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}