diff --git a/package.json b/package.json
index 727e25d..50ccd4d 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "vue-i18n": "^9.1.9"
   },
   "devDependencies": {
+    "@babel/plugin-transform-private-property-in-object": "^7.23.4",
     "@dcloudio/types": "^3.4.8",
     "@dcloudio/uni-automator": "3.0.0-4060420250429001",
     "@dcloudio/uni-cli-shared": "3.0.0-4060420250429001",
diff --git a/project.config.json b/project.config.json
new file mode 100644
index 0000000..12aa3a6
--- /dev/null
+++ b/project.config.json
@@ -0,0 +1,28 @@
+{
+    "appid": "wxff56c34ef9aceb62",
+    "compileType": "miniprogram",
+    "libVersion": "3.8.10",
+    "packOptions": {
+        "ignore": [],
+        "include": []
+    },
+    "setting": {
+        "coverView": true,
+        "es6": true,
+        "postcss": true,
+        "minified": true,
+        "enhance": true,
+        "showShadowRootInWxmlPanel": true,
+        "packNpmRelationList": [],
+        "babelSetting": {
+            "ignore": [],
+            "disablePlugins": [],
+            "outputPath": ""
+        }
+    },
+    "condition": {},
+    "editorSetting": {
+        "tabIndent": "insertSpaces",
+        "tabSize": 4
+    }
+}
\ No newline at end of file
diff --git a/project.private.config.json b/project.private.config.json
new file mode 100644
index 0000000..76ecff9
--- /dev/null
+++ b/project.private.config.json
@@ -0,0 +1,7 @@
+{
+    "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+    "projectname": "webUI",
+    "setting": {
+        "compileHotReLoad": true
+    }
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 3279daf..8b90be5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,21 +3,11 @@ export default {
   onLaunch: function () {
     console.log('App Launch');
     
-    // 检查本地存储中是否有同意协议的记录
-    try {
-      const hasAgreed = uni.getStorageSync('hasAgreedToTerms');
-      // 如果没有同意过，显示协议页面
-      if (hasAgreed !== 'true') {
-        // 使用setTimeout避免可能的导航冲突
-        setTimeout(() => {
-          uni.navigateTo({
-            url: '/pages/agreement/agreement'
-          });
-        }, 500);
-      }
-    } catch (e) {
-      console.error('Check agreement status error:', e);
-    }
+    // 应用启动时的全局初始化逻辑
+    // 启动页会自动处理倒计时和页面跳转
+    
+    // 可以在这里添加其他全局初始化逻辑
+    // 例如：设置全局变量、注册事件监听器等
   },
   
   onShow: function () {
diff --git a/src/components/UserAgreement.vue b/src/components/UserAgreement.vue
index bc34659..3d9136a 100644
--- a/src/components/UserAgreement.vue
+++ b/src/components/UserAgreement.vue
@@ -4,7 +4,9 @@
       <view class="agreement-header">
         <text class="agreement-title">用户须知</text>
       </view>
-      <scroll-view class="agreement-body" scroll-y show-scrollbar="true">
+      
+      <!-- 用普通view替代scroll-view -->
+      <view class="agreement-body">
         <view class="agreement-inner">
           <view class="agreement-section">
             <view class="section-title">1 年龄与身份</view>
@@ -29,17 +31,32 @@
             <text class="section-item">3.3 若不同意本须知，请立即退出并停止使用本平台及相关产品。</text>
           </view>
         </view>
-      </scroll-view>
+      </view>
+      
       <view class="agreement-footer">
-        <button class="btn-disagree" @click="handleDisagree">暂不进入</button>
-        <button class="btn-agree" @click="handleAgree">确定</button>
+        <view 
+          class="btn-disagree" 
+          :class="{ 'btn-disabled': isProcessing }"
+          @click.stop.prevent="handleDisagree" 
+          @tap.stop.prevent="handleDisagree"
+        >
+          {{ isProcessing ? '处理中...' : '暂不进入' }}
+        </view>
+        <view 
+          class="btn-agree" 
+          :class="{ 'btn-disabled': isProcessing }"
+          @click.stop.prevent="handleAgree" 
+          @tap.stop.prevent="handleAgree"
+        >
+          {{ isProcessing ? '处理中...' : '确定' }}
+        </view>
       </view>
     </view>
   </view>
 </template>
 
 <script setup>
-import { ref, defineEmits } from 'vue';
+import { ref, onMounted, nextTick } from 'vue';
 
 const props = defineProps({
   visible: {
@@ -50,15 +67,80 @@ const props = defineProps({
 
 const emit = defineEmits(['agree', 'disagree']);
 
-// 处理同意事件
-const handleAgree = () => {
-  emit('agree');
+// 防止重复点击的状态
+const isProcessing = ref(false);
+
+// 组件挂载时的调试信息
+onMounted(() => {
+  console.log('UserAgreement component mounted, visible:', props.visible);
+});
+
+// 防抖处理函数
+const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
 };
 
+// 处理同意事件
+const handleAgree = debounce(async () => {
+  if (isProcessing.value) {
+    console.log('UserAgreement: handleAgree already processing, skipping');
+    return;
+  }
+  
+  isProcessing.value = true;
+  console.log('UserAgreement: handleAgree clicked');
+  
+  try {
+    console.log('About to emit agree event');
+    emit('agree');
+    console.log('Agree event emitted');
+    
+    // 确保DOM更新完成
+    await nextTick();
+  } catch (error) {
+    console.error('Error in handleAgree:', error);
+  } finally {
+    // 延迟重置状态，避免快速连续点击
+    setTimeout(() => {
+      isProcessing.value = false;
+    }, 300);
+  }
+}, 300);
+
 // 处理不同意事件
-const handleDisagree = () => {
-  emit('disagree');
-};
+const handleDisagree = debounce(async () => {
+  if (isProcessing.value) {
+    console.log('UserAgreement: handleDisagree already processing, skipping');
+    return;
+  }
+  
+  isProcessing.value = true;
+  console.log('UserAgreement: handleDisagree clicked');
+  
+  try {
+    console.log('About to emit disagree event');
+    emit('disagree');
+    console.log('Disagree event emitted');
+    
+    // 确保DOM更新完成
+    await nextTick();
+  } catch (error) {
+    console.error('Error in handleDisagree:', error);
+  } finally {
+    // 延迟重置状态，避免快速连续点击
+    setTimeout(() => {
+      isProcessing.value = false;
+    }, 300);
+  }
+}, 300);
 </script>
 
 <style scoped>
@@ -72,7 +154,8 @@ const handleDisagree = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 9999;
+  z-index: 99999;
+  pointer-events: auto;
 }
 
 .agreement-content {
@@ -84,6 +167,7 @@ const handleDisagree = () => {
   display: flex;
   flex-direction: column;
   max-height: 88vh;
+  pointer-events: auto;
 }
 
 .agreement-header {
@@ -100,6 +184,7 @@ const handleDisagree = () => {
 
 .agreement-body {
   max-height: 70vh;
+  overflow-y: auto;
   box-sizing: border-box;
 }
 
@@ -153,6 +238,12 @@ const handleDisagree = () => {
   font-size: 30rpx;
   margin: 0;
   border-radius: 0;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  pointer-events: auto;
+  user-select: none;
+  transition: all 0.2s ease;
 }
 
 .btn-disagree {
@@ -161,8 +252,30 @@ const handleDisagree = () => {
   border-right: 1rpx solid #EEEEEE;
 }
 
+.btn-disagree:hover {
+  background: #f5f5f5;
+}
+
+.btn-disagree:active {
+  background: #eeeeee;
+}
+
 .btn-agree {
   background: #FF9800;
   color: #FFFFFF;
 }
+
+.btn-agree:hover {
+  background: #e68900;
+}
+
+.btn-agree:active {
+  background: #cc7700;
+}
+
+.btn-disabled {
+  background: #cccccc;
+  color: #999999;
+  cursor: not-allowed;
+}
 </style> 
\ No newline at end of file
diff --git a/src/manifest.json b/src/manifest.json
index 309b9ec..983bc05 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -12,7 +12,7 @@
         "compilerVersion" : 3,
         "splashscreen" : {
             "alwaysShowBeforeRender" : true,
-            "waiting" : true,
+            "waiting" : false,
             "autoclose" : true,
             "delay" : 0
         },
@@ -50,11 +50,20 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "",
+        "appid" : "wxff56c34ef9aceb62",
         "setting" : {
-            "urlCheck" : false
+            "urlCheck" : false,
+            "es6": true,
+            "postcss": true,
+            "minified": true
         },
-        "usingComponents" : true
+        "usingComponents" : true,
+        "permission": {
+            "scope.userLocation": {
+                "desc": "您的位置信息将用于小程序位置接口的效果展示"
+            }
+        },
+        "requiredPrivateInfos": []
     },
     "mp-alipay" : {
         "usingComponents" : true
diff --git a/src/pages.json b/src/pages.json
index dbb8896..99ebd05 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,5 +1,16 @@
 {
+	"lazyCodeLoading": "requiredComponents",
 	"pages": [ 
+		{
+			"path": "pages/splash/splash",
+			"style": {
+				"navigationStyle": "custom",
+				"disableScroll": true,
+				"app-plus": {
+					"popGesture": "none"
+				}
+			}
+		},
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -39,6 +50,12 @@
 					"popGesture": "none" 
 				}
 			}
+		},
+		{
+			"path": "pages/chat/chat",
+			"style": {
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {
@@ -55,14 +72,11 @@
 		"list": [
 			{
 				"pagePath": "pages/index/index",
-				"iconPath": "static/tabbar/home.png",
-				"selectedIconPath": "static/tabbar/home_selected.png",
+
 				"text": "首页"
 			},
 			{
 				"pagePath": "pages/mine/mine",
-				"iconPath": "static/tabbar/mine.png",
-				"selectedIconPath": "static/tabbar/mine_selected.png",
 				"text": "我的"
 			}
 		]
diff --git a/src/pages/agreement/agreement.vue b/src/pages/agreement/agreement.vue
index a156205..4f4fcac 100644
--- a/src/pages/agreement/agreement.vue
+++ b/src/pages/agreement/agreement.vue
@@ -17,19 +17,15 @@ const handleAgree = () => {
     // 保存到本地存储
     uni.setStorageSync('hasAgreedToTerms', 'true');
     
-    // 返回上一页或首页
-    uni.navigateBack({
-      fail: () => {
-        uni.switchTab({
-          url: '/pages/index/index'
-        });
-      }
+    // 跳转到"我的"页面
+    uni.switchTab({
+      url: '/pages/mine/mine'
     });
   } catch (e) {
     console.error('Save agreement status error:', e);
-    // 发生错误时也返回首页
+    // 发生错误时也跳转到"我的"页面
     uni.switchTab({
-      url: '/pages/index/index'
+      url: '/pages/mine/mine'
     });
   }
 };
diff --git a/src/pages/chat/chat.vue b/src/pages/chat/chat.vue
new file mode 100644
index 0000000..704bf16
--- /dev/null
+++ b/src/pages/chat/chat.vue
@@ -0,0 +1,1056 @@
+<template>
+  <view class="chat-container">
+    <!-- 自定义导航栏 -->
+    <view class="custom-navbar">
+      <view class="navbar-left" @click="goBack">
+        <text class="back-icon">←</text>
+      </view>
+      <view class="navbar-center">
+        <image class="character-avatar" :src="currentCharacter.avatar" mode="aspectFill" />
+        <text class="character-name">{{ currentCharacter.name }}</text>
+      </view>
+      <view class="navbar-right">
+        <text class="status-dot" :class="{'online': isOnline}"></text>
+        <text class="login-status" v-if="!isLoggedIn">未登录</text>
+      </view>
+    </view>
+
+    <!-- 聊天消息区域 -->
+    <scroll-view 
+      class="chat-messages" 
+      scroll-y="true" 
+      :scroll-top="scrollTop"
+      scroll-with-animation="true"
+    >
+      <view class="message-list">
+        <view 
+          v-for="(message, index) in messages" 
+          :key="index"
+          :class="['message-item', message.type]"
+        >
+          <!-- AI消息 -->
+          <template v-if="message.type === 'ai'">
+            <view class="message-avatar">
+              <image :src="currentCharacter.avatar" mode="aspectFill" />
+            </view>
+            <view class="message-content">
+              <view class="message-bubble" :class="message.type">
+                <text class="message-text">{{ message.content }}</text>
+                <view class="message-actions" v-if="isLoggedIn">
+                  <view class="play-voice-btn" @click="playVoiceResponse(message.content)">
+                    <text class="play-icon">🔊</text>
+                  </view>
+                </view>
+                <view class="message-time">{{ message.time }}</view>
+              </view>
+            </view>
+          </template>
+          
+          <!-- 用户消息 -->
+          <template v-else-if="message.type === 'user'">
+            <view class="message-content">
+              <view class="message-bubble" :class="message.type">
+                <text class="message-text">{{ message.content }}</text>
+                <view class="message-time">{{ message.time }}</view>
+              </view>
+            </view>
+            <view class="message-avatar">
+              <image :src="userAvatar" mode="aspectFill" />
+            </view>
+          </template>
+          
+          <!-- 系统消息 -->
+          <template v-else-if="message.type === 'system'">
+            <view class="system-message">
+              <text class="system-text">{{ message.content }}</text>
+            </view>
+          </template>
+        </view>
+        
+        <!-- 正在输入提示 -->
+        <view class="typing-indicator" v-if="isTyping">
+          <view class="message-avatar">
+            <image :src="currentCharacter.avatar" mode="aspectFill" />
+          </view>
+          <view class="message-content">
+            <view class="message-bubble ai typing">
+              <view class="typing-dots">
+                <view class="dot"></view>
+                <view class="dot"></view>
+                <view class="dot"></view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 输入区域 -->
+    <view class="input-area">
+      <view class="input-container">
+        <input 
+          class="text-input"
+          v-model="inputText"
+          placeholder="输入消息..."
+          :disabled="isRecording || isTyping"
+          @confirm="sendMessage"
+          confirm-type="send"
+        />
+        <view class="input-actions">
+          <!-- 语音按钮 -->
+          <view 
+            class="voice-btn"
+            :class="{'recording': isRecording}"
+            @touchstart="startRecording"
+            @touchend="stopRecording"
+            @touchcancel="cancelRecording"
+          >
+            <text class="voice-icon">{{ isRecording ? '🎤' : '🎙️' }}</text>
+          </view>
+          <!-- 发送按钮 -->
+          <view 
+            class="send-btn"
+            :class="{'active': inputText.trim()}"
+            @click="sendMessage"
+          >
+            <text class="send-icon">📤</text>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 录音状态提示 -->
+      <view class="recording-tip" v-if="isRecording">
+        <text class="recording-text">🎤 正在录音，松开结束</text>
+        <view class="recording-wave">
+          <view class="wave-bar" v-for="i in 5" :key="i"></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, nextTick } from 'vue';
+import { useUserStore } from '@/stores/user.js';
+import { getCharacterById, getSmartResponse } from '@/utils/aiCharacters.js';
+import { chatAPI, voiceAPI } from '@/utils/api.js';
+import { debugAPI } from '@/utils/debug.js';
+
+// 状态管理
+const userStore = useUserStore();
+
+// 响应式数据
+const messages = ref([]);
+const inputText = ref('');
+const isTyping = ref(false);
+const isRecording = ref(false);
+const isOnline = ref(true);
+const scrollTop = ref(0);
+const currentCharacter = ref({});
+const userAvatar = ref('/static/default-avatar.png');
+const conversationId = ref(null); // 对话ID
+const isLoading = ref(false); // API加载状态
+const isLoggedIn = ref(false); // 登录状态
+
+// 录音相关
+const recorderManager = ref(null);
+const audioContext = ref(null);
+
+// AI角色配置已移至 utils/aiCharacters.js
+
+// 生命周期
+onMounted(() => {
+  initPage();
+  initRecorder();
+});
+
+// 初始化页面
+const initPage = async () => {
+  // 检查登录状态
+  checkLoginStatus();
+  
+  // 获取传递的角色ID
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1];
+  const characterId = currentPage.options?.characterId || 5;
+  
+  // 设置当前角色
+  const character = getCharacterById(characterId);
+  if (character) {
+    currentCharacter.value = character;
+    
+    // 创建新对话
+    await createNewConversation(characterId);
+    
+    // 添加欢迎消息
+    addMessage('ai', character.greeting);
+    
+    // 如果未登录，添加提示消息
+    if (!isLoggedIn.value) {
+      addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
+    }
+  }
+  
+  // 设置用户头像
+  if (userStore.userInfo?.avatar) {
+    userAvatar.value = userStore.userInfo.avatar;
+  }
+};
+
+// 检查登录状态
+const checkLoginStatus = () => {
+  const customToken = uni.getStorageSync('custom_token');
+  const userToken = uni.getStorageSync('user_token');
+  const userInfo = uni.getStorageSync('userInfo');
+  
+  isLoggedIn.value = !!(userStore.token || customToken || userToken || userInfo);
+  
+  console.log('登录状态检查:', {
+    isLoggedIn: isLoggedIn.value,
+    hasUserStoreToken: !!userStore.token,
+    hasCustomToken: !!customToken,
+    hasUserToken: !!userToken,
+    hasUserInfo: !!userInfo
+  });
+};
+
+// 初始化录音器
+const initRecorder = () => {
+  // #ifdef MP-WEIXIN
+  recorderManager.value = uni.getRecorderManager();
+  
+  recorderManager.value.onStart(() => {
+    console.log('录音开始');
+  });
+  
+  recorderManager.value.onStop((res) => {
+    console.log('录音结束', res);
+    handleVoiceMessage(res.tempFilePath);
+  });
+  
+  recorderManager.value.onError((err) => {
+    console.error('录音错误', err);
+    uni.showToast({
+      title: '录音失败',
+      icon: 'none'
+    });
+    isRecording.value = false;
+  });
+  // #endif
+};
+
+// 添加消息
+const addMessage = (type, content) => {
+  const now = new Date();
+  const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
+  
+  messages.value.push({
+    type,
+    content,
+    time
+  });
+  
+  // 滚动到底部
+  nextTick(() => {
+    scrollToBottom();
+  });
+};
+
+// 滚动到底部
+const scrollToBottom = () => {
+  const query = uni.createSelectorQuery();
+  query.select('.message-list').boundingClientRect();
+  query.exec((res) => {
+    if (res[0]) {
+      scrollTop.value = res[0].height;
+    }
+  });
+};
+
+// 发送文本消息
+const sendMessage = async () => {
+  const text = inputText.value.trim();
+  if (!text || isTyping.value || isLoading.value) return;
+  
+  // 添加用户消息
+  addMessage('user', text);
+  inputText.value = '';
+  
+  // 显示正在输入
+  isTyping.value = true;
+  
+  try {
+    // 调用真实的AI API
+    await getAIResponse(text);
+  } catch (error) {
+    console.error('发送消息失败:', error);
+    uni.showToast({
+      title: '发送失败',
+      icon: 'none'
+    });
+  } finally {
+    isTyping.value = false;
+  }
+};
+
+// 创建新对话
+const createNewConversation = async (characterId) => {
+  try {
+    const result = await chatAPI.createConversation(characterId);
+    if (result.success) {
+      conversationId.value = result.data.conversationId;
+      console.log('创建对话成功:', conversationId.value);
+    } else {
+      console.error('创建对话失败:', result.error);
+      // 如果创建失败，使用本地模拟
+      conversationId.value = `local_${Date.now()}`;
+    }
+  } catch (error) {
+    console.error('创建对话异常:', error);
+    conversationId.value = `local_${Date.now()}`;
+  }
+};
+
+// 调用AI API获取回复
+const getAIResponse = async (userMessage) => {
+  try {
+    isLoading.value = true;
+    
+    const result = await chatAPI.syncChat({
+      message: userMessage,
+      characterId: currentCharacter.value.id,
+      conversationId: conversationId.value
+    });
+    
+    if (result.success) {
+      // API调用成功，直接使用处理后的数据
+      const aiResponse = result.data;
+      console.log('✅ 成功获取AI回复:', aiResponse);
+      
+      // 添加AI回复到聊天界面
+      addMessage('ai', aiResponse);
+      
+      // 更新对话ID（如果后端返回了新的）
+      if (result.originalResponse && result.originalResponse.conversationId) {
+        conversationId.value = result.originalResponse.conversationId;
+      }
+    } else {
+      // API调用失败，使用本地模拟回复
+      console.warn('AI API调用失败，使用本地模拟回复:', result.error);
+      const fallbackResponse = getSmartResponse(currentCharacter.value, userMessage);
+      addMessage('ai', fallbackResponse);
+      
+      // 根据是否匿名模式显示不同的提示
+      if (result.isAnonymous) {
+        // 未登录状态，不显示错误提示
+        console.log('未登录状态，使用本地模拟回复');
+      } else {
+        // 已登录但API失败
+        uni.showToast({
+          title: 'AI服务暂时不可用，使用本地回复',
+          icon: 'none',
+          duration: 2000
+        });
+      }
+    }
+  } catch (error) {
+    console.error('AI API调用异常:', error);
+    
+    // 异常情况，使用本地模拟回复
+    const fallbackResponse = getSmartResponse(currentCharacter.value, userMessage);
+    addMessage('ai', fallbackResponse);
+    
+    uni.showToast({
+      title: '网络异常，使用本地回复',
+      icon: 'none',
+      duration: 2000
+    });
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// 模拟AI回复（备用方案）
+const simulateAIResponse = (userMessage) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      // 使用智能回复系统
+      const response = getSmartResponse(currentCharacter.value, userMessage);
+      addMessage('ai', response);
+      resolve();
+    }, 1000 + Math.random() * 2000); // 1-3秒随机延迟
+  });
+};
+
+// 开始录音
+const startRecording = () => {
+  if (isTyping.value) return;
+  
+  // #ifdef MP-WEIXIN
+  // 先申请录音权限
+  uni.authorize({
+    scope: 'scope.record',
+    success: () => {
+      isRecording.value = true;
+      
+      recorderManager.value.start({
+        duration: 60000, // 最长60秒
+        sampleRate: 16000,
+        numberOfChannels: 1,
+        encodeBitRate: 96000,
+        format: 'mp3'
+      });
+    },
+    fail: () => {
+      uni.showModal({
+        title: '需要录音权限',
+        content: '请在设置中开启录音权限，以便使用语音功能',
+        showCancel: false
+      });
+    }
+  });
+  // #endif
+  
+  // #ifndef MP-WEIXIN
+  uni.showToast({
+    title: '语音功能仅支持微信小程序',
+    icon: 'none'
+  });
+  // #endif
+};
+
+// 停止录音
+const stopRecording = () => {
+  if (!isRecording.value) return;
+  
+  // #ifdef MP-WEIXIN
+  isRecording.value = false;
+  recorderManager.value.stop();
+  // #endif
+};
+
+// 取消录音
+const cancelRecording = () => {
+  if (!isRecording.value) return;
+  
+  // #ifdef MP-WEIXIN
+  isRecording.value = false;
+  recorderManager.value.stop();
+  // #endif
+};
+
+// 处理语音消息
+const handleVoiceMessage = async (filePath) => {
+  // 添加用户语音消息
+  addMessage('user', '[语音消息]');
+  
+  // 显示正在处理
+  isTyping.value = true;
+  
+  try {
+    // 使用新的语音对话API（完整流程：语音识别 -> AI回复 -> 语音合成）
+    const voiceChatResult = await voiceAPI.voiceChat(filePath, {
+      modelId: null, // 使用默认模型
+      templateId: null // 使用默认模板
+    });
+    
+    if (voiceChatResult.success) {
+      const { userText, aiResponse, audioUrl } = voiceChatResult.data;
+      console.log('语音对话结果:', voiceChatResult.data);
+      
+      // 更新用户消息显示
+      if (messages.value.length > 0) {
+        const lastMessage = messages.value[messages.value.length - 1];
+        if (lastMessage.type === 'user' && lastMessage.content === '[语音消息]') {
+          lastMessage.content = userText || '[语音消息]';
+        }
+      }
+      
+      // 添加AI回复消息
+      addMessage('ai', aiResponse);
+      
+      // 自动播放AI回复的语音
+      if (audioUrl) {
+        await playVoiceResponse(aiResponse, audioUrl);
+      }
+    } else {
+      console.warn('语音对话失败，尝试使用上传音频文件接口:', voiceChatResult.error);
+      
+      // 降级处理：使用上传音频文件接口
+      const uploadResult = await voiceAPI.uploadVoiceChat(filePath, {
+        modelId: null,
+        templateId: null
+      });
+      
+      if (uploadResult.success) {
+        const { userText, aiResponse, audioUrl } = uploadResult.data;
+        console.log('上传音频文件语音对话结果:', uploadResult.data);
+        
+        // 更新用户消息显示
+        if (messages.value.length > 0) {
+          const lastMessage = messages.value[messages.value.length - 1];
+          if (lastMessage.type === 'user' && lastMessage.content === '[语音消息]') {
+            lastMessage.content = userText || '[语音消息]';
+          }
+        }
+        
+        // 添加AI回复消息
+        addMessage('ai', aiResponse);
+        
+        // 播放AI语音回复
+        if (audioUrl) {
+          await playVoiceResponse(aiResponse, audioUrl);
+        }
+      } else {
+        console.error('上传音频文件语音对话也失败:', uploadResult.error);
+        
+        // 检查是否是token错误，如果是则提供更友好的提示
+        let errorMessage = '语音处理失败，使用本地回复';
+        let shouldShowLoginTip = false;
+        
+        if (uploadResult.error && uploadResult.error.message) {
+          if (uploadResult.error.message.includes('token错误') || uploadResult.error.message.includes('未登录')) {
+            errorMessage = '语音功能需要登录，请先登录后使用';
+            shouldShowLoginTip = true;
+          } else if (uploadResult.error.message.includes('网络')) {
+            errorMessage = '网络连接失败，使用本地回复';
+          }
+        }
+        
+        // 最终降级：使用本地模拟回复
+        const fallbackResponse = getSmartResponse(currentCharacter.value, '[语音消息]');
+        addMessage('ai', fallbackResponse);
+        
+        // 显示提示
+        if (shouldShowLoginTip) {
+          uni.showModal({
+            title: '语音功能需要登录',
+            content: '语音对话功能需要登录后才能使用，是否前往登录？',
+            success: (res) => {
+              if (res.confirm) {
+                // 跳转到登录页面
+                uni.navigateTo({
+                  url: '/pages/mine/mine'
+                });
+              }
+            }
+          });
+        } else {
+          uni.showToast({
+            title: errorMessage,
+            icon: 'none',
+            duration: 3000
+          });
+        }
+      }
+    }
+  } catch (error) {
+    console.error('处理语音消息失败:', error);
+    
+    // 异常情况，使用本地模拟回复
+    const fallbackResponse = getSmartResponse(currentCharacter.value, '[语音消息]');
+    addMessage('ai', fallbackResponse);
+    
+    uni.showToast({
+      title: '语音处理异常，使用本地回复',
+      icon: 'none',
+      duration: 2000
+    });
+  } finally {
+    isTyping.value = false;
+  }
+};
+
+// 播放语音回复
+const playVoiceResponse = async (text) => {
+  // #ifdef MP-WEIXIN
+  try {
+    // 调用文本转语音API
+    const ttsResult = await voiceAPI.textToSpeech(text, currentCharacter.value.voiceStyle);
+    
+    if (ttsResult.success) {
+      const audioUrl = ttsResult.data.audioUrl;
+      
+      if (audioContext.value) {
+        audioContext.value.destroy();
+      }
+      
+      // 创建音频上下文
+      audioContext.value = uni.createInnerAudioContext();
+      audioContext.value.src = audioUrl;
+      
+      // 设置事件监听
+      audioContext.value.onPlay(() => {
+        console.log('开始播放AI语音回复');
+        uni.showToast({
+          title: '正在播放语音',
+          icon: 'none',
+          duration: 1000
+        });
+      });
+      
+      audioContext.value.onEnded(() => {
+        console.log('AI语音播放结束');
+      });
+      
+      audioContext.value.onError((err) => {
+        console.error('语音播放错误:', err);
+        uni.showToast({
+          title: '语音播放失败',
+          icon: 'none'
+        });
+      });
+      
+      // 开始播放
+      audioContext.value.play();
+      
+    } else {
+      console.warn('文本转语音失败，使用本地提示:', ttsResult.error);
+      uni.showToast({
+        title: '语音合成失败',
+        icon: 'none'
+      });
+    }
+  } catch (error) {
+    console.error('语音播放异常:', error);
+    uni.showToast({
+      title: '语音播放异常',
+      icon: 'none'
+    });
+  }
+  // #endif
+  
+  // #ifndef MP-WEIXIN
+  console.log('语音播放功能仅支持微信小程序');
+  uni.showToast({
+    title: '语音功能仅支持微信小程序',
+    icon: 'none'
+  });
+  // #endif
+};
+
+// 返回上一页
+const goBack = () => {
+  uni.navigateBack();
+};
+</script>
+
+<style scoped>
+/* 聊天页面样式 */
+.chat-container {
+  width: 100vw;
+  height: 100vh;
+  background: #f8f6f0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 自定义导航栏 */
+.custom-navbar {
+  height: 88rpx;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-bottom: 1rpx solid rgba(255, 123, 123, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20rpx;
+  position: relative;
+  z-index: 100;
+}
+
+.navbar-left {
+  width: 100rpx;
+  height: 70rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12rpx;
+  transition: background-color 0.3s ease;
+}
+
+.navbar-left:hover {
+  background-color: rgba(255, 123, 123, 0.1);
+}
+
+.navbar-left:active {
+  background-color: rgba(255, 123, 123, 0.2);
+}
+
+.back-icon {
+  font-size: 32rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.navbar-center {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16rpx;
+}
+
+.character-avatar {
+  width: 50rpx;
+  height: 50rpx;
+  border-radius: 50%;
+  border: 2rpx solid rgba(255, 123, 123, 0.3);
+}
+
+.character-name {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.navbar-right {
+  width: 100rpx;
+  height: 70rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background: #ccc;
+}
+
+.status-dot.online {
+  background: #4CAF50;
+  box-shadow: 0 0 8rpx rgba(76, 175, 80, 0.5);
+}
+
+/* 聊天消息区域 */
+.chat-messages {
+  flex: 1;
+  padding: 16rpx 20rpx;
+  overflow-y: auto;
+}
+
+.message-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.message-item {
+  display: flex;
+  align-items: flex-end;
+  gap: 16rpx;
+}
+
+.message-item.user {
+  flex-direction: row-reverse;
+}
+
+.message-avatar {
+  width: 70rpx;
+  height: 70rpx;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.message-avatar image {
+  width: 100%;
+  height: 100%;
+}
+
+.message-content {
+  flex: 1;
+  max-width: 70%;
+}
+
+.message-bubble {
+  padding: 16rpx 20rpx;
+  border-radius: 20rpx;
+  position: relative;
+  word-wrap: break-word;
+}
+
+.message-bubble.user {
+  background: linear-gradient(135deg, #ff7b7b, #ffb7b7);
+  color: #fff;
+  border-bottom-right-radius: 8rpx;
+}
+
+.message-bubble.ai {
+  background: rgba(255, 255, 255, 0.9);
+  color: #333;
+  border: 2rpx solid rgba(255, 123, 123, 0.2);
+  border-bottom-left-radius: 8rpx;
+}
+
+.message-text {
+  font-size: 28rpx;
+  line-height: 1.5;
+  display: block;
+  margin-bottom: 8rpx;
+}
+
+.message-time {
+  font-size: 20rpx;
+  opacity: 0.7;
+  text-align: right;
+}
+
+.message-bubble.ai .message-time {
+  text-align: left;
+}
+
+/* 消息操作按钮 */
+.message-actions {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  margin: 8rpx 0;
+}
+
+.play-voice-btn {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  background: rgba(255, 123, 123, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.play-voice-btn:hover {
+  background: rgba(255, 123, 123, 0.2);
+  transform: scale(1.1);
+}
+
+.play-icon {
+  font-size: 20rpx;
+}
+
+/* 正在输入提示 */
+.typing-indicator {
+  display: flex;
+  align-items: flex-end;
+  gap: 16rpx;
+}
+
+.typing-dots {
+  display: flex;
+  gap: 8rpx;
+  align-items: center;
+}
+
+.dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: #ff7b7b;
+  animation: typing 1.4s infinite ease-in-out;
+}
+
+.dot:nth-child(1) { animation-delay: -0.32s; }
+.dot:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes typing {
+  0%, 80%, 100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* 输入区域 */
+.input-area {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-top: 1rpx solid rgba(255, 123, 123, 0.2);
+  padding: 16rpx 20rpx;
+  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
+}
+
+.input-container {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  background: rgba(248, 246, 240, 0.8);
+  border-radius: 25rpx;
+  padding: 10rpx 16rpx;
+  border: 2rpx solid rgba(255, 123, 123, 0.2);
+}
+
+.text-input {
+  flex: 1;
+  font-size: 28rpx;
+  color: #333;
+  background: transparent;
+  border: none;
+  outline: none;
+}
+
+.text-input::placeholder {
+  color: #999;
+}
+
+.input-actions {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.voice-btn {
+  width: 55rpx;
+  height: 55rpx;
+  border-radius: 50%;
+  background: rgba(255, 123, 123, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.voice-btn.recording {
+  background: linear-gradient(135deg, #ff7b7b, #ffb7b7);
+  animation: pulse 1s infinite;
+}
+
+.voice-icon {
+  font-size: 28rpx;
+}
+
+.send-btn {
+  width: 55rpx;
+  height: 55rpx;
+  border-radius: 50%;
+  background: rgba(255, 123, 123, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.send-btn.active {
+  background: linear-gradient(135deg, #ff7b7b, #ffb7b7);
+  transform: scale(1.1);
+}
+
+.send-icon {
+  font-size: 24rpx;
+}
+
+/* 系统消息样式 */
+.system-message {
+  display: flex;
+  justify-content: center;
+  margin: 20rpx 0;
+}
+
+.system-text {
+  background: rgba(0, 0, 0, 0.05);
+  color: #666;
+  padding: 12rpx 24rpx;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+  text-align: center;
+  max-width: 80%;
+  line-height: 1.4;
+}
+
+/* 登录状态提示 */
+.login-status {
+  font-size: 20rpx;
+  color: #ff7b7b;
+  margin-left: 8rpx;
+}
+
+/* 录音状态提示 */
+.recording-tip {
+  position: absolute;
+  top: -80rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(255, 123, 123, 0.9);
+  color: #fff;
+  padding: 16rpx 32rpx;
+  border-radius: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12rpx;
+  backdrop-filter: blur(10px);
+}
+
+.recording-text {
+  font-size: 24rpx;
+  font-weight: 500;
+}
+
+.recording-wave {
+  display: flex;
+  gap: 4rpx;
+  align-items: center;
+}
+
+.wave-bar {
+  width: 4rpx;
+  height: 20rpx;
+  background: #fff;
+  border-radius: 2rpx;
+  animation: wave 1s infinite ease-in-out;
+}
+
+.wave-bar:nth-child(1) { animation-delay: 0s; }
+.wave-bar:nth-child(2) { animation-delay: 0.1s; }
+.wave-bar:nth-child(3) { animation-delay: 0.2s; }
+.wave-bar:nth-child(4) { animation-delay: 0.3s; }
+.wave-bar:nth-child(5) { animation-delay: 0.4s; }
+
+@keyframes wave {
+  0%, 100% {
+    height: 20rpx;
+  }
+  50% {
+    height: 40rpx;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 375px) {
+  .custom-navbar {
+    padding: 0 16rpx;
+  }
+  
+  .character-name {
+    font-size: 28rpx;
+  }
+  
+  .message-bubble {
+    padding: 16rpx 20rpx;
+  }
+  
+  .message-text {
+    font-size: 26rpx;
+  }
+  
+  .input-area {
+    padding: 16rpx 20rpx;
+  }
+}
+</style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index ff15b65..8e285a3 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,54 +1,114 @@
 <template>
-  <view class="container">
+  <view class="floral-container">
+    <!-- 花卉装饰背景 -->
+    <view class="floral-decoration">
+      <!-- 右上角花朵 -->
+      <view class="flower flower-1">
+        <view class="petal"></view>
+        <view class="petal"></view>
+        <view class="petal"></view>
+        <view class="petal"></view>
+        <view class="center"></view>
+      </view>
+      
+      <!-- 左下角枝叶 -->
+      <view class="branch branch-1">
+        <view class="stem"></view>
+        <view class="leaf leaf-1"></view>
+        <view class="leaf leaf-2"></view>
+        <view class="leaf leaf-3"></view>
+      </view>
+    </view>
+    
     <!-- 顶部自定义导航栏，固定在最上方 -->
     <view class="custom-navbar fixed-navbar">
-      <text class="navbar-title">TEST玩具</text>
+      <text class="navbar-title">因为AI 所以爱</text>
     </view>
 
     <!-- 卡片区 -->
     <view class="card-row">
-      <view class="card create-card" @click="goToCreate">
-        <view class="card-icon create-icon">+</view>
+      <view class="floral-card create-card" @click="goToCreate">
+        <view class="card-icon create-icon">🌸</view>
         <text class="card-title">创建</text>
+        <text class="card-desc">开启创意之旅</text>
       </view>
-      <view class="card connect-card">
-        <view class="card-icon connect-icon">🌐</view>
-        <text class="card-title bold">连接设备</text>
-        <text class="card-sn">SN: xxxxxxxx</text>
+      <view class="floral-card connect-card">
+        <view class="card-icon connect-icon" :class="{'connected': deviceConnected}">{{ deviceConnected ? '🌟' : '⭕' }}</view>
+        <text class="card-title bold">{{ deviceConnected ? '设备已连接' : '设备未连接' }}</text>
+        <text class="card-sn">SN: {{ deviceSN }}</text>
+        <text class="card-id">ID: {{ deviceId }}</text>
+        <button class="floral-btn connect-btn" @click="connectDevice">{{ deviceConnected ? '断开连接' : '连接设备' }}</button>
       </view>
     </view>
 
     <!-- 二级Tab -->
     <view class="tab-row">
-      <view :class="['tab-btn', tabActive === 'drama' ? 'active' : '']" @tap="tabActive = 'drama'">剧情</view>
-      <view :class="['tab-btn', tabActive === 'chat' ? 'active' : '']" @tap="tabActive = 'chat'">聊天</view>
+      <view :class="['floral-tab-btn', tabActive === 'drama' ? 'active' : '']" @tap="tabActive = 'drama'">
+        <text class="tab-icon">🎭</text>
+        <text class="tab-text">剧情</text>
+      </view>
+      <view :class="['floral-tab-btn', tabActive === 'chat' ? 'active' : '']" @tap="tabActive = 'chat'">
+        <text class="tab-icon">💬</text>
+        <text class="tab-text">聊天</text>
+      </view>
     </view>
 
-    <!-- 瀑布流卡片区 -->
-    <view class="waterfall">
-      <block v-for="(item, idx) in currentList" :key="item.id">
-        <view class="waterfall-card">
-          <image class="cover" :src="item.cover" mode="aspectFill" />
-          <view class="tag">{{ item.tag }}</view>
-          <view class="content-area">
-            <view class="title">{{ item.title }}</view>
-            <view class="card-bottom">
-              <button v-if="userStore.isLoggedIn" class="use-btn" @click="handleUse(item)">去使用</button>
-              <button v-else class="use-btn login-required" @click="showLoginTip">去使用</button>
+    <!-- 两列可滚动卡片区 -->
+    <scroll-view 
+      class="scroll-container" 
+      scroll-y="true" 
+      enable-back-to-top="true"
+      refresher-enabled="true"
+      refresher-threshold="45"
+      refresher-default-style="black"
+      :show-scrollbar="false"
+    >
+      <view class="two-column-grid">
+        <view class="column column-left">
+          <block v-for="(item, idx) in leftColumnItems" :key="item.id">
+            <view class="floral-grid-card">
+              <image class="cover" :src="item.cover" mode="aspectFit" />
+              <view class="floral-tag">{{ item.tag }}</view>
+              <view class="content-area">
+                <view class="title">{{ item.title }}</view>
+                <view class="card-bottom">
+                  <button v-if="userStore.isLoggedIn" class="floral-btn use-btn" @click="handleUse(item)">💝 去使用</button>
+                  <button v-else class="floral-btn outline use-btn login-required" @click="showLoginTip">🔐 去使用</button>
+                </view>
+              </view>
             </view>
-          </view>
+          </block>
         </view>
-      </block>
-    </view>
+        
+        <view class="column column-right">
+          <block v-for="(item, idx) in rightColumnItems" :key="item.id">
+            <view class="floral-grid-card">
+              <image class="cover" :src="item.cover" mode="aspectFit" />
+              <view class="floral-tag">{{ item.tag }}</view>
+              <view class="content-area">
+                <view class="title">{{ item.title }}</view>
+                <view class="card-bottom">
+                  <button v-if="userStore.isLoggedIn" class="floral-btn use-btn" @click="handleUse(item)">💝 去使用</button>
+                  <button v-else class="floral-btn outline use-btn login-required" @click="showLoginTip">🔐 去使用</button>
+                </view>
+              </view>
+            </view>
+          </block>
+        </view>
+      </view>
+      
+      <!-- 底部留白，避免被tabbar遮挡 -->
+      <view class="bottom-spacing"></view>
+    </scroll-view>
     
     <!-- 登录提示弹窗 -->
-    <view class="login-modal" v-if="showLoginModal">
-      <view class="login-modal-content">
-        <view class="login-modal-title">提示</view>
-        <view class="login-modal-text">请先登录后再操作</view>
-        <view class="login-modal-btns">
-          <button class="modal-btn cancel" @click="showLoginModal = false">取消</button>
-          <button class="modal-btn confirm" @click="goToLogin">去登录</button>
+    <view class="floral-modal" v-if="showLoginModal">
+      <view class="floral-modal-content">
+        <view class="modal-title">💝 温馨提示</view>
+        <view class="modal-text">请先登录后再开始您的创意之旅</view>
+        <view class="modal-btns">
+          <button class="floral-btn outline modal-btn cancel" @click="showLoginModal = false">稍后再说</button>
+          <button class="floral-btn modal-btn confirm" @click="goToLogin">🌸 去登录</button>
         </view>
       </view>
     </view>
@@ -63,20 +123,31 @@ import { useUserStore } from '@/stores/user.js';
 const userStore = useUserStore();
 const tabActive = ref('drama');
 const showLoginModal = ref(false);
+const deviceConnected = ref(false);
+const deviceSN = ref('未连接');
+const deviceId = ref('30:ed:a0:12:99:60'); // 固定设备ID
 
 // 数据
 const dramaList = ref([
-  { id: 1, cover: '/static/drama1.jpg', tag: '台词腔', title: '白领女友的温柔早安' },
-  { id: 2, cover: '/static/drama2.jpg', tag: '人妻', title: '豪门女主的秘密生活' },
-  { id: 3, cover: '/static/drama3.jpg', tag: '外卖媛', title: '外卖小姐姐的贴心问候' },
-  { id: 4, cover: '/static/drama4.jpg', tag: '病娇', title: '因爱执仗的少女' },
+  { id: 1, cover: '/static/bailing.jpg', tag: '浪漫', title: '白领女友的温柔早安' },
+  { id: 2, cover: '/static/haomen.jpg', tag: '优雅', title: '豪门女主的秘密生活' },
+  { id: 3, cover: '/static/waimai.jpg', tag: '活泼', title: '外卖小姐姐的贴心问候' },
+  { id: 4, cover: '/static/tunvlang.jpg', tag: '深情', title: '因爱执著的少女' },
+  { id: 9, cover: '/static/logo.png', tag: '温暖', title: '邻家女孩的暖心故事' },
+  { id: 10, cover: '/static/logo.png', tag: '梦幻', title: '公主的浪漫邂逅' },
+  { id: 11, cover: '/static/logo.png', tag: '治愈', title: '咖啡店的午后时光' },
+  { id: 12, cover: '/static/logo.png', tag: '青春', title: '校园里的美好回忆' },
 ]);
 
 const chatList = ref([
-  { id: 5, cover: '/static/chat1.jpg', tag: '萌妹', title: '可爱萌妹陪你聊' },
-  { id: 6, cover: '/static/chat2.jpg', tag: '御姐', title: '知性御姐的温柔夜话' },
-  { id: 7, cover: '/static/chat3.jpg', tag: '萝莉', title: '萝莉的童真世界' },
-  { id: 8, cover: '/static/chat4.jpg', tag: '男友', title: '贴心男友的陪伴' },
+  { id: 5, cover: '/static/logo.png', tag: '可爱', title: '萌妹陪你聊天' },
+  { id: 6, cover: '/static/logo.png', tag: '知性', title: '御姐的温柔夜话' },
+  { id: 7, cover: '/static/logo.png', tag: '纯真', title: '童真世界探索' },
+  { id: 8, cover: '/static/logo.png', tag: '贴心', title: '温暖男友陪伴' },
+  { id: 13, cover: '/static/logo.png', tag: '幽默', title: '搞笑达人的日常' },
+  { id: 14, cover: '/static/logo.png', tag: '智慧', title: '博学者的深度对话' },
+  { id: 15, cover: '/static/logo.png', tag: '活力', title: '运动健将的正能量' },
+  { id: 16, cover: '/static/logo.png', tag: '艺术', title: '文艺青年的灵感分享' },
 ]);
 
 // 计算属性
@@ -84,19 +155,127 @@ const currentList = computed(() => {
   return tabActive.value === 'drama' ? dramaList.value : chatList.value;
 });
 
+// 左列数据（偶数索引：0, 2, 4...）
+const leftColumnItems = computed(() => {
+  return currentList.value.filter((item, index) => index % 2 === 0);
+});
+
+// 右列数据（奇数索引：1, 3, 5...）
+const rightColumnItems = computed(() => {
+  return currentList.value.filter((item, index) => index % 2 === 1);
+});
+
 // 生命周期
 onMounted(() => {
   userStore.init();
+  // 获取设备连接状态
+  checkDeviceStatus();
 });
 
+// 检查设备状态
+const checkDeviceStatus = () => {
+  // 如果用户已登录，则获取设备状态
+  if (userStore.isLoggedIn) {
+    uni.showLoading({
+      title: '获取设备状态...'
+    });
+    
+    uni.request({
+                url: 'http://8.145.52.111:8084/api/device/status',
+      method: 'GET',
+      header: {
+        'Authorization': userStore.token || ''
+      },
+      success: (res) => {
+        console.log('设备状态响应:', res);
+        if (res.statusCode === 200 && res.data.data) {
+          const data = res.data.data;
+          deviceConnected.value = data.connected || false;
+          deviceSN.value = data.sn || '未知SN';
+          // 不再从响应中获取设备ID，使用固定值
+        }
+      },
+      fail: (err) => {
+        console.error('获取设备状态失败:', err);
+      },
+      complete: () => {
+        uni.hideLoading();
+      }
+    });
+  }
+};
+
 // 方法
 const handleUse = (item) => {
   console.log('使用角色:', item);
-  uni.showToast({
-    title: `正在加载: ${item.title}`,
-    icon: 'none'
+  
+  // 显示加载提示
+  uni.showLoading({
+    title: `正在设置角色...`
+  });
+  
+  // 获取token
+  const token = userStore.token;
+  
+  // 根据角色id映射到roleId参数
+  let roleId = 0;
+  if (tabActive.value === 'drama') {
+    // 剧情角色映射
+    switch (item.id) {
+      case 1: roleId = 1; break; // 白领女友
+      case 2: roleId = 2; break; // 豪门女主
+      case 3: roleId = 3; break; // 外卖小姐姐
+      case 4: roleId = 4; break; // 病娇少女
+      default: roleId = 0;
+    }
+  } else {
+    // 聊天角色跳转到聊天页面
+    uni.hideLoading();
+    uni.navigateTo({
+      url: `/pages/chat/chat?characterId=${item.id}`
+    });
+    return;
+  }
+  
+  // 不再检查设备ID是否存在，直接使用固定值
+  
+  // 调用设备更新API - 使用form data格式
+  uni.request({
+            url: 'http://8.145.52.111:8084/api/device/update',
+    method: 'POST',
+    header: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      'Authorization': token || ''
+    },
+    data: {
+      roleId: roleId,
+      deviceId: deviceId.value // 使用固定的设备ID
+    },
+    success: (res) => {
+      console.log('设备更新成功:', res);
+      if (res.statusCode === 200) {
+        uni.showToast({
+          title: `角色设置成功`,
+          icon: 'success'
+        });
+      } else {
+        uni.showToast({
+          title: res.data?.message || '设备更新失败',
+          icon: 'none'
+        });
+      }
+    },
+    fail: (err) => {
+      console.error('设备更新失败:', err);
+      uni.showToast({
+        title: '设备更新失败',
+        icon: 'none'
+      });
+    },
+    complete: () => {
+      uni.hideLoading();
+    }
   });
-  // 这里添加跳转到详情页或使用页面的逻辑
 };
 
 const showLoginTip = () => {
@@ -115,9 +294,184 @@ const goToCreate = () => {
     url: '/pages/create/create'
   });
 };
+
+const connectDevice = () => {
+  // 显示加载提示
+  uni.showLoading({
+    title: deviceConnected.value ? '断开连接中...' : '连接设备中...'
+  });
+  
+  // 获取token
+  const token = userStore.token;
+  
+  // 准备请求数据 - 始终使用固定设备ID
+  const requestData = {
+    deviceId: deviceId.value // 固定设备ID
+  };
+  
+  // 调用设备连接/断开API
+  uni.request({
+            url: `http://8.145.52.111:8084/api/device/${deviceConnected.value ? 'disconnect' : 'connect'}`,
+    method: 'POST',
+    header: {
+      'Content-Type': 'application/json',
+      'Authorization': token || ''
+    },
+    data: requestData,
+    success: (res) => {
+      console.log('设备操作成功:', res);
+      if (res.statusCode === 200) {
+        // 更新设备状态
+        deviceConnected.value = !deviceConnected.value;
+        
+        if (deviceConnected.value) {
+          // 如果是连接成功，更新设备SN
+          if (res.data.data) {
+            deviceSN.value = res.data.data.sn || '未知SN';
+            // 不更新设备ID，保持固定值
+          }
+        } else {
+          // 如果是断开连接，重置设备SN
+          deviceSN.value = '未连接';
+          // 设备ID保持不变
+        }
+        
+        uni.showToast({
+          title: deviceConnected.value ? '设备已连接' : '设备已断开',
+          icon: 'success'
+        });
+      } else {
+        uni.showToast({
+          title: res.data?.message || '操作失败',
+          icon: 'none'
+        });
+      }
+    },
+    fail: (err) => {
+      console.error('设备操作失败:', err);
+      uni.showToast({
+        title: '设备操作失败',
+        icon: 'none'
+      });
+    },
+    complete: () => {
+      uni.hideLoading();
+    }
+  });
+};
 </script>
 
 <style scoped>
+/* 花卉主题首页样式 */
+.floral-container {
+  width: 100vw;
+  min-height: 100vh;
+  background: #f8f6f0;
+  position: relative;
+  overflow-x: hidden;
+  padding-bottom: 120rpx;
+  padding-top: 100rpx;
+}
+
+/* 花卉装饰背景 */
+.floral-decoration {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+}
+
+/* 花朵样式 */
+.flower {
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  animation: gentle-float 6s ease-in-out infinite;
+}
+
+.flower-1 {
+  top: 100px;
+  right: 30px;
+  animation-delay: 0s;
+}
+
+.petal {
+  position: absolute;
+  width: 16px;
+  height: 28px;
+  background: #ff7b7b;
+  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+  transform-origin: 50% 100%;
+}
+
+.petal:nth-child(1) { transform: rotate(0deg) translateY(-12px); }
+.petal:nth-child(2) { transform: rotate(90deg) translateY(-12px); }
+.petal:nth-child(3) { transform: rotate(180deg) translateY(-12px); }
+.petal:nth-child(4) { transform: rotate(270deg) translateY(-12px); }
+
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  background: #ffeb99;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* 枝叶样式 */
+.branch {
+  position: absolute;
+  bottom: 150px;
+  left: 20px;
+  width: 80px;
+  height: 100px;
+  animation: gentle-sway 8s ease-in-out infinite;
+}
+
+.stem {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 2px;
+  height: 70px;
+  background: #4a9b4a;
+  border-radius: 1px;
+  transform: translateX(-50%);
+}
+
+.leaf {
+  position: absolute;
+  width: 18px;
+  height: 28px;
+  background: #4a9b4a;
+  border-radius: 0 100% 0 100%;
+  transform-origin: 50% 100%;
+}
+
+.leaf-1 {
+  top: 15px;
+  left: 25px;
+  transform: rotate(-30deg);
+}
+
+.leaf-2 {
+  top: 35px;
+  right: 20px;
+  transform: rotate(45deg);
+}
+
+.leaf-3 {
+  top: 55px;
+  left: 28px;
+  transform: rotate(-15deg);
+}
+
+/* 导航栏样式 */
 .fixed-navbar {
   position: fixed;
   top: 0;
@@ -125,196 +479,395 @@ const goToCreate = () => {
   width: 100vw;
   z-index: 100;
 }
-.container {
-  background: #fff;
-  min-height: 100vh;
-  padding-bottom: 120rpx;
-  padding-top: 100rpx;
-}
+
 .custom-navbar {
   height: 100rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(90deg, #ffe5c2, #fff6e5);
+  background: rgba(248, 246, 240, 0.95);
+  backdrop-filter: blur(10px);
+  border-bottom: 1rpx solid rgba(255, 123, 123, 0.2);
   font-weight: bold;
-  font-size: 38rpx;
+  font-size: 32rpx;
   letter-spacing: 2rpx;
 }
+
 .navbar-title {
   color: #333;
 }
+/* 卡片区域样式 */
 .card-row {
   display: flex;
   justify-content: space-between;
   margin: 32rpx 24rpx 0 24rpx;
+  gap: 20rpx;
+  z-index: 2;
+  position: relative;
 }
-.card {
+
+.floral-card {
   flex: 1;
-  background: #fff;
-  border-radius: 18rpx;
-  box-shadow: 0 2rpx 12rpx #f5e6d6;
-  margin: 0 8rpx;
-  padding: 24rpx 0;
+  background: rgba(255, 255, 255, 0.9);
+  border: 2rpx solid rgba(255, 123, 123, 0.3);
+  border-radius: 25rpx;
+  box-shadow: 0 8rpx 30rpx rgba(255, 123, 123, 0.15);
+  padding: 30rpx 20rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
 }
-.create-icon {
+
+.floral-card:hover {
+  transform: translateY(-4rpx);
+  box-shadow: 0 12rpx 40rpx rgba(255, 123, 123, 0.2);
+  border-color: #ff7b7b;
+}
+
+.card-icon {
   font-size: 48rpx;
-  color: #ff9800;
-}
-.connect-icon {
-  font-size: 40rpx;
-  color: #ff9800;
+  margin-bottom: 12rpx;
+  filter: drop-shadow(0 2rpx 4rpx rgba(255, 123, 123, 0.3));
 }
+
 .card-title {
-  margin-top: 8rpx;
-  font-size: 30rpx;
-}
-.bold {
+  font-size: 28rpx;
   font-weight: bold;
+  color: #333;
+  margin-bottom: 8rpx;
+  text-align: center;
 }
-.card-sn {
+
+.card-desc {
   font-size: 22rpx;
-  color: #bbb;
-  margin-top: 4rpx;
+  color: #666;
+  text-align: center;
+  margin-bottom: 12rpx;
+  font-style: italic;
 }
+
+.card-sn, .card-id {
+  font-size: 20rpx;
+  color: #999;
+  margin-top: 4rpx;
+  text-align: center;
+}
+
+/* 花卉按钮样式 */
+.floral-btn {
+  background: linear-gradient(135deg, #ff7b7b, #ffb7b7);
+  color: #fff;
+  border: none;
+  border-radius: 25rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  padding: 12rpx 28rpx;
+  box-shadow: 0 4rpx 15rpx rgba(255, 123, 123, 0.3);
+  transition: all 0.3s ease;
+  margin-top: 12rpx;
+}
+
+.floral-btn:hover {
+  transform: translateY(-2rpx);
+  box-shadow: 0 6rpx 20rpx rgba(255, 123, 123, 0.4);
+}
+
+.floral-btn.outline {
+  background: transparent;
+  color: #ff7b7b;
+  border: 2rpx solid #ff7b7b;
+}
+
+.floral-btn.outline:hover {
+  background: #ff7b7b;
+  color: #fff;
+}
+/* Tab区域样式 */
 .tab-row {
   display: flex;
-  margin: 32rpx 24rpx 0 24rpx;
-  border-bottom: 2rpx solid #f5e6d6;
-}
-.tab-btn {
-  flex: 1;
-  text-align: center;
-  font-size: 32rpx;
-  padding: 18rpx 0;
-  color: #bbb;
-  font-weight: 500;
-  border-bottom: 4rpx solid transparent;
-}
-.tab-btn.active {
-  color: #ff9800;
-  border-bottom: 4rpx solid #ff9800;
-  font-weight: bold;
-}
-.waterfall {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 24rpx 12rpx 0 12rpx;
-}
-.waterfall-card {
-  width: 46%;
-  margin: 2%;
-  background: #fff;
-  border-radius: 18rpx;
-  box-shadow: 0 2rpx 12rpx #f5e6d6;
+  margin: 40rpx 24rpx 20rpx 24rpx;
+  gap: 16rpx;
+  z-index: 2;
   position: relative;
-  overflow: hidden;
-  margin-bottom: 24rpx;
+}
+
+.floral-tab-btn {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.8);
+  border: 2rpx solid rgba(255, 123, 123, 0.3);
+  border-radius: 20rpx;
+  padding: 20rpx 16rpx;
   display: flex;
   flex-direction: column;
+  align-items: center;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(5px);
 }
+
+.floral-tab-btn.active {
+  background: linear-gradient(135deg, #ff7b7b, #ffb7b7);
+  border-color: #ff7b7b;
+  transform: translateY(-2rpx);
+  box-shadow: 0 6rpx 20rpx rgba(255, 123, 123, 0.3);
+}
+
+.tab-icon {
+  font-size: 32rpx;
+  margin-bottom: 8rpx;
+  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
+}
+
+.tab-text {
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #333;
+}
+
+.floral-tab-btn.active .tab-text {
+  color: #fff;
+  font-weight: bold;
+}
+/* 两列可滚动样式 */
+.scroll-container {
+  height: calc(100vh - 280rpx);
+  margin: 24rpx 12rpx 0 12rpx;
+  z-index: 2;
+  position: relative;
+  border-radius: 20rpx;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(5px);
+}
+
+.two-column-grid {
+  display: flex;
+  gap: 16rpx;
+  padding: 20rpx 16rpx 0 16rpx;
+  min-height: 100%;
+}
+
+.column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.column-left {
+  padding-right: 8rpx;
+}
+
+.column-right {
+  padding-left: 8rpx;
+}
+
+.floral-grid-card {
+  background: rgba(255, 255, 255, 0.9);
+  border: 2rpx solid rgba(255, 123, 123, 0.2);
+  border-radius: 20rpx;
+  box-shadow: 0 6rpx 25rpx rgba(255, 123, 123, 0.15);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  backdrop-filter: blur(8px);
+  transition: all 0.3s ease;
+  margin-bottom: 4rpx;
+  animation: card-fade-in 0.6s ease-out;
+}
+
+.floral-grid-card:hover {
+  transform: translateY(-4rpx);
+  box-shadow: 0 10rpx 35rpx rgba(255, 123, 123, 0.2);
+  border-color: #ff7b7b;
+}
+
+.bottom-spacing {
+  height: 40rpx;
+}
+
 .cover {
   width: 100%;
   height: 220rpx;
-  object-fit: cover;
+  object-fit: contain;
   border-radius: 18rpx 18rpx 0 0;
+  background: rgba(248, 246, 240, 0.5);
 }
-.tag {
+
+.floral-tag {
   position: absolute;
   top: 12rpx;
   left: 12rpx;
-  background: #ff9800;
+  background: linear-gradient(135deg, #ff7b7b, #ffb7b7);
   color: #fff;
-  font-size: 22rpx;
-  border-radius: 8rpx;
-  padding: 4rpx 14rpx;
-  z-index: 2;
+  font-size: 20rpx;
+  font-weight: 500;
+  border-radius: 12rpx;
+  padding: 6rpx 16rpx;
+  z-index: 3;
+  box-shadow: 0 2rpx 8rpx rgba(255, 123, 123, 0.3);
 }
+
 .content-area {
-  padding: 16rpx;
+  padding: 20rpx;
   display: flex;
   flex-direction: column;
+  flex: 1;
 }
+
 .title {
   color: #333;
-  font-size: 28rpx;
-  margin-bottom: 12rpx;
-  line-height: 1.3;
-  font-weight: 500;
+  font-size: 26rpx;
+  margin-bottom: 16rpx;
+  line-height: 1.4;
+  font-weight: 600;
 }
+
 .card-bottom {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 8rpx;
-}
-.use-btn {
-  background: #ff9800;
-  color: #fff;
-  border-radius: 24rpx;
-  font-size: 28rpx;
-  padding: 8rpx 36rpx;
-  border: none;
-}
-.login-required {
-  opacity: 0.8;
+  margin-top: auto;
+  padding-top: 12rpx;
 }
 
-/* 登录提示弹窗 */
-.login-modal {
+.use-btn {
+  font-size: 24rpx;
+  padding: 10rpx 24rpx;
+  border-radius: 20rpx;
+  white-space: nowrap;
+}
+
+/* 花卉模态框样式 */
+.floral-modal {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.6);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 999;
+  backdrop-filter: blur(5px);
 }
-.login-modal-content {
-  width: 580rpx;
-  background: #fff;
-  border-radius: 20rpx;
+
+.floral-modal-content {
+  width: 560rpx;
+  background: rgba(255, 255, 255, 0.95);
+  border: 3rpx solid rgba(255, 123, 123, 0.3);
+  border-radius: 25rpx;
   overflow: hidden;
-  padding: 40rpx 0 0 0;
+  padding: 40rpx 30rpx 30rpx 30rpx;
+  backdrop-filter: blur(15px);
+  box-shadow: 0 20rpx 60rpx rgba(255, 123, 123, 0.2);
+  animation: modal-show 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
-.login-modal-title {
-  font-size: 34rpx;
+
+.modal-title {
+  font-size: 32rpx;
   font-weight: bold;
   text-align: center;
-  margin-bottom: 30rpx;
+  margin-bottom: 24rpx;
+  color: #333;
 }
-.login-modal-text {
-  font-size: 30rpx;
+
+.modal-text {
+  font-size: 28rpx;
   color: #666;
   text-align: center;
-  padding: 0 40rpx;
-  margin-bottom: 50rpx;
+  line-height: 1.5;
+  margin-bottom: 40rpx;
 }
-.login-modal-btns {
+
+.modal-btns {
   display: flex;
-  border-top: 1rpx solid #eee;
+  gap: 16rpx;
 }
+
 .modal-btn {
   flex: 1;
-  height: 90rpx;
-  line-height: 90rpx;
+  font-size: 26rpx;
+  padding: 16rpx 24rpx;
+  border-radius: 20rpx;
   text-align: center;
-  font-size: 32rpx;
-  background: #fff;
-  border-radius: 0;
 }
-.modal-btn.cancel {
-  color: #999;
-  border-right: 1rpx solid #eee;
+
+/* 动画效果 */
+@keyframes modal-show {
+  from {
+    opacity: 0;
+    transform: scale(0.8) translateY(40rpx);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
-.modal-btn.confirm {
-  color: #ff9800;
-  font-weight: bold;
+
+@keyframes gentle-float {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  33% {
+    transform: translateY(-10px) rotate(2deg);
+  }
+  66% {
+    transform: translateY(5px) rotate(-1deg);
+  }
+}
+
+@keyframes gentle-sway {
+  0%, 100% {
+    transform: rotate(-1deg);
+  }
+  50% {
+    transform: rotate(1deg);
+  }
+}
+
+@keyframes card-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 375px) {
+  .floral-card {
+    padding: 24rpx 16rpx;
+  }
+  
+  .floral-modal-content {
+    width: 90vw;
+    padding: 30rpx 20rpx 20rpx 20rpx;
+  }
+  
+  .card-title {
+    font-size: 26rpx;
+  }
+  
+  .custom-navbar {
+    font-size: 28rpx;
+  }
+  
+  .scroll-container {
+    height: calc(100vh - 250rpx);
+  }
+  
+  .two-column-grid {
+    gap: 12rpx;
+  }
+  
+  .column {
+    gap: 16rpx;
+  }
 }
 </style>
diff --git a/src/pages/mine/mine.vue b/src/pages/mine/mine.vue
index 3547502..5579a3e 100644
--- a/src/pages/mine/mine.vue
+++ b/src/pages/mine/mine.vue
@@ -51,8 +51,12 @@
     </view>
     
     <!-- 退出登录按钮，仅登录后显示 -->
-    <view class="logout-section" v-if="isLoggedIn">
+    <view class="logout-section">
       <button class="logout-btn" @click="handleLogout">退出登录</button>
+      <button class="logout-btn" style="margin-top: 20rpx; background-color: #ff9800; color: white;" @click="testDirectApiCall">直接测试API</button>
+      <text style="display: block; margin-top: 20rpx; text-align: center; color: #999;">
+        登录状态: {{ isLoggedIn ? '已登录' : '未登录' }}
+      </text>
     </view>
     
     <!-- 用户须知弹窗 -->
@@ -81,15 +85,7 @@ const avatarUrl = ref('/static/default-avatar.png');
 
 // 登录按钮文本
 const loginButtonText = computed(() => {
-  // #ifdef MP-WEIXIN
   return '微信一键登录';
-  // #endif
-  
-  // #ifdef H5
-  return '立即登录';
-  // #endif
-  
-  return '一键登录';
 });
 
 // 初始化函数
@@ -104,9 +100,22 @@ const initUserInfo = () => {
         avatarUrl.value = parsedInfo.avatarUrl || '/static/default-avatar.png';
         openid.value = parsedInfo.openid || '';
         isLoggedIn.value = !!parsedInfo.token;
+        
+        // 调试信息
+        uni.showToast({
+          title: `登录状态: ${isLoggedIn.value ? '已登录' : '未登录'}`,
+          icon: 'none',
+          duration: 2000
+        });
       } catch (e) {
         console.error('Parse user info error:', e);
       }
+    } else {
+      uni.showToast({
+        title: '没有找到用户信息',
+        icon: 'none',
+        duration: 2000
+      });
     }
   } catch (e) {
     console.error('Load user info error:', e);
@@ -115,102 +124,133 @@ const initUserInfo = () => {
 
 // 页面加载时初始化
 onMounted(() => {
-  // 初始化用户信息
+  // 初始化用户store
+  userStore.init();
+  // 初始化本地状态
   initUserInfo();
 });
 
 // 登录处理
-const handleLogin = () => {
-  // H5环境
-  // #ifdef H5
-  nickName.value = 'H5测试用户';
-  avatarUrl.value = '/static/default-avatar.png';
-  openid.value = 'h5-mock-openid';
-  isLoggedIn.value = true;
-  
-  // 保存到本地
-  const userInfo = {
-    token: 'h5-mock-token',
-    nickName: nickName.value,
-    avatarUrl: avatarUrl.value,
-    openid: openid.value
-  };
-  
+const handleLogin = async () => {
   try {
-    uni.setStorageSync('userInfo', JSON.stringify(userInfo));
-  } catch (e) {
-    console.error('Save user info error:', e);
-  }
-  
-  uni.showToast({
-    title: '登录成功',
-    icon: 'success'
-  });
-  return;
-  // #endif
-  
-  // 微信环境
-  // #ifdef MP-WEIXIN
-  uni.getUserProfile({
-    desc: '用于完善用户资料',
-    success: (res) => {
-      const userInfo = res.userInfo;
-      nickName.value = userInfo.nickName;
-      avatarUrl.value = userInfo.avatarUrl;
-      openid.value = 'wx-' + Date.now();
-      isLoggedIn.value = true;
-      
-      // 保存到本地
-      const storeInfo = {
-        token: 'wx-mock-token',
-        nickName: nickName.value,
-        avatarUrl: avatarUrl.value,
-        openid: openid.value
-      };
-      
-      try {
-        uni.setStorageSync('userInfo', JSON.stringify(storeInfo));
-      } catch (e) {
-        console.error('Save user info error:', e);
-      }
-      
-      uni.showToast({
-        title: '登录成功',
-        icon: 'success'
-      });
-    },
-    fail: (err) => {
-      console.error('Login failed:', err);
-      uni.showToast({
-        title: '登录失败',
-        icon: 'none'
-      });
+    // 先清理假登录数据
+    console.log('开始登录，先清理假登录数据...');
+    userStore.clearFakeLoginData();
+    
+    uni.showLoading({
+      title: '登录中...'
+    });
+    
+    // 使用store中的真实登录方法
+    await userStore.login();
+    
+    // 登录成功后更新本地状态
+    initUserInfo();
+    
+    uni.hideLoading();
+    uni.showToast({
+      title: '登录成功',
+      icon: 'success'
+    });
+  } catch (error) {
+    uni.hideLoading();
+    console.error('Login failed:', error);
+    
+    let errorMessage = '登录失败';
+    if (error.message) {
+      errorMessage = error.message;
+    } else if (typeof error === 'string') {
+      errorMessage = error;
     }
-  });
-  // #endif
+    
+    // 显示详细的错误信息
+    uni.showModal({
+      title: '登录失败',
+      content: `错误信息：${errorMessage}\n\n请检查：\n1. 网络连接是否正常\n2. 后端服务是否运行\n3. 微信小程序配置是否正确`,
+      showCancel: false
+    });
+  }
 };
 
 // 退出登录
-const handleLogout = () => {
+const handleLogout = async () => {
+  // 用弹窗显示调试信息，确保用户能看到
+  uni.showToast({
+    title: '点击了退出登录',
+    icon: 'none',
+    duration: 2000
+  });
+  
   uni.showModal({
     title: '提示',
     content: '确定要退出登录吗？',
-    success: (res) => {
+    success: async (res) => {
       if (res.confirm) {
-        try {
-          uni.removeStorageSync('userInfo');
-        } catch (e) {
-          console.error('Remove user info error:', e);
-        }
-        
-        nickName.value = '';
-        avatarUrl.value = '/static/default-avatar.png';
-        openid.value = '';
-        isLoggedIn.value = false;
-        
         uni.showToast({
-          title: '已退出登录',
-          icon: 'success'
+          title: '确认退出',
+          icon: 'none',
+          duration: 1000
+        });
+        
+        try {
+          uni.showLoading({
+            title: '退出中...'
+          });
+          
+          // 显示token信息
+          uni.showToast({
+            title: `Token: ${userStore.token ? '有' : '无'}`,
+            icon: 'none',
+            duration: 2000
+          });
+          
+          console.log('mine.vue: 开始调用userStore.logout()');
+          console.log('mine.vue: 当前store中的token:', userStore.token);
+          
+          // 使用store中的真实登出方法
+          await userStore.logout();
+          
+          uni.showToast({
+            title: 'logout执行完成',
+            icon: 'none',
+            duration: 1000
+          });
+          
+          // 清空本地状态
+          nickName.value = '';
+          avatarUrl.value = '/static/default-avatar.png';
+          openid.value = '';
+          isLoggedIn.value = false;
+          
+          uni.hideLoading();
+          uni.showToast({
+            title: '已退出登录',
+            icon: 'success'
+          });
+        } catch (error) {
+          uni.hideLoading();
+          uni.showToast({
+            title: '登出异常: ' + error.message,
+            icon: 'none',
+            duration: 3000
+          });
+          
+          // 即使后台退出失败，也要清空本地状态
+          nickName.value = '';
+          avatarUrl.value = '/static/default-avatar.png';
+          openid.value = '';
+          isLoggedIn.value = false;
+          
+          uni.showToast({
+            title: '已退出登录',
+            icon: 'success'
+          });
+        }
+      } else {
+        uni.showToast({
+          title: '取消退出',
+          icon: 'none',
+          duration: 1000
         });
       }
     }
@@ -219,25 +259,169 @@ const handleLogout = () => {
 
 // 显示用户须知
 const showAgreement = () => {
+  console.log('showAgreement clicked, current showAgreementModal:', showAgreementModal.value);
   showAgreementModal.value = true;
+  console.log('showAgreementModal set to:', showAgreementModal.value);
 };
 
 // 处理同意用户须知
-const handleAgreeTerms = () => {
-  showAgreementModal.value = false;
+const handleAgreeTerms = async () => {
+  console.log('mine.vue: handleAgreeTerms called');
   
   try {
+    // 先关闭弹窗
+    showAgreementModal.value = false;
+    
+    // 等待DOM更新
+    await uni.$nextTick?.() || Promise.resolve();
+    
     // 设置本地存储
     uni.setStorageSync('hasAgreedToTerms', 'true');
     uni.setStorageSync('hasVisitedMinePage', 'true');
+    
+    // 显示成功提示
+    uni.showToast({
+      title: '已确认用户须知',
+      icon: 'success',
+      duration: 2000
+    });
   } catch (e) {
     console.error('Save agreement status error:', e);
+    uni.showToast({
+      title: '操作失败，请重试',
+      icon: 'none',
+      duration: 2000
+    });
+    // 如果失败，重新显示弹窗
+    showAgreementModal.value = true;
   }
 };
 
 // 处理不同意用户须知
-const handleDisagreeTerms = () => {
-  showAgreementModal.value = false;
+const handleDisagreeTerms = async () => {
+  console.log('mine.vue: handleDisagreeTerms called');
+  
+  try {
+    // 先关闭弹窗
+    showAgreementModal.value = false;
+    
+    // 等待DOM更新
+    await uni.$nextTick?.() || Promise.resolve();
+    
+    // 显示提示
+    uni.showToast({
+      title: '您可随时查看用户须知',
+      icon: 'none',
+      duration: 2000
+    });
+  } catch (e) {
+    console.error('Handle disagree error:', e);
+    showAgreementModal.value = false;
+  }
+};
+
+// 直接测试API
+const testDirectApiCall = () => {
+  // 从store获取token
+  const currentToken = userStore.token;
+  
+  uni.showModal({
+    title: '选择测试方法',
+    content: '请选择要测试的API调用方式',
+    cancelText: '普通方法',
+    confirmText: '请求体方法',
+    success: (res1) => {
+      if (res1.confirm) {
+        // 尝试在请求体中发送token
+        uni.showModal({
+          title: '请求体方法',
+          content: '在请求体中发送token',
+          showCancel: false,
+          success: () => {
+            uni.request({
+              url: 'http://8.145.52.111:8084/app/logout',
+              method: 'POST',
+              header: {
+                'Content-Type': 'application/json'
+              },
+              data: {
+                token: currentToken || ''
+              },
+              complete: (res) => {
+                uni.showModal({
+                  title: '调用结果(请求体)',
+                  content: JSON.stringify(res),
+                  showCancel: false
+                });
+              }
+            });
+          }
+        });
+      } else {
+        // 普通方法: 选择URL方式
+        uni.showModal({
+          title: '普通方法',
+          content: '选择URL方式',
+          cancelText: '带参数URL',
+          confirmText: 'Header方式',
+          success: (res2) => {
+            if (res2.confirm) {
+              // Header方式
+              uni.showModal({
+                title: '调用信息',
+                content: `
+在Header中发送token
+Token: ${currentToken || '无'}
+                `,
+                showCancel: false,
+                success: () => {
+                  uni.request({
+                    url: 'http://8.145.52.111:8084/app/logout',
+                    method: 'POST',
+                    header: {
+                      'Content-Type': 'application/json',
+                      'Authorization': currentToken || ''
+                    },
+                    complete: (res) => {
+                      uni.showModal({
+                        title: '调用结果(Header)',
+                        content: JSON.stringify(res),
+                        showCancel: false
+                      });
+                    }
+                  });
+                }
+              });
+            } else {
+              // 带参数URL方式
+              uni.showModal({
+                title: '调用信息',
+                content: `尝试带token参数的URL`,
+                showCancel: false,
+                success: () => {
+                  const url = `http://8.145.52.111:8084/app/logout?token=${currentToken || ''}`;
+                  uni.request({
+                    url: url,
+                    method: 'POST',
+                    header: {
+                      'Content-Type': 'application/json'
+                    },
+                    complete: (res) => {
+                      uni.showModal({
+                        title: '调用结果(URL参数)',
+                        content: JSON.stringify(res),
+                        showCancel: false
+                      });
+                    }
+                  });
+                }
+              });
+            }
+          }
+        });
+      }
+    }
+  });
 };
 </script>
 
diff --git a/src/pages/splash/splash.vue b/src/pages/splash/splash.vue
new file mode 100644
index 0000000..b132716
--- /dev/null
+++ b/src/pages/splash/splash.vue
@@ -0,0 +1,783 @@
+<template>
+  <view class="splash-container">
+    <!-- 背景装饰层 -->
+    <view class="background-layer">
+      <!-- 渐变背景 -->
+      <view class="gradient-bg"></view>
+      
+      <!-- 右上角树枝装饰 -->
+      <view class="branch-decoration">
+        <view class="branch-stem"></view>
+        <view class="branch-leaf leaf-1"></view>
+        <view class="branch-leaf leaf-2"></view>
+        <view class="branch-leaf leaf-3"></view>
+        <view class="small-flower">
+          <view class="petal"></view>
+          <view class="petal"></view>
+          <view class="petal"></view>
+          <view class="petal"></view>
+          <view class="center"></view>
+        </view>
+      </view>
+      
+      <!-- 左上角优雅光环 -->
+      <view class="elegant-halo">
+        <view class="halo-ring ring-1"></view>
+        <view class="halo-ring ring-2"></view>
+        <view class="halo-ring ring-3"></view>
+        <view class="glow-orb"></view>
+        <view class="sparkle sparkle-1"></view>
+        <view class="sparkle sparkle-2"></view>
+        <view class="sparkle sparkle-3"></view>
+      </view>
+      
+      <!-- 左下角现代线条艺术 -->
+      <view class="modern-lines">
+        <view class="flow-line line-1"></view>
+        <view class="flow-line line-2"></view>
+        <view class="flow-line line-3"></view>
+        <view class="glow-node node-1"></view>
+        <view class="glow-node node-2"></view>
+        <view class="floating-orb"></view>
+      </view>
+      
+      <!-- 飘落的花瓣动画 -->
+      <view class="falling-petals">
+        <view class="falling-petal petal-1"></view>
+        <view class="falling-petal petal-2"></view>
+        <view class="falling-petal petal-3"></view>
+        <view class="falling-petal petal-4"></view>
+        <view class="falling-petal petal-5"></view>
+      </view>
+    </view>
+    
+    <!-- 主内容区 -->
+    <view class="content-area">
+      <!-- 标题区域 -->
+      <view class="title-section">
+        <!-- 主标题 -->
+        <view class="main-title-wrapper">
+          <text class="main-title">因为AI 所以爱</text>
+        </view>
+        
+        <!-- 装饰小花朵 -->
+        <view class="title-flower">
+          <view class="tiny-petal"></view>
+          <view class="tiny-petal"></view>
+          <view class="tiny-petal"></view>
+          <view class="tiny-petal"></view>
+          <view class="tiny-center"></view>
+        </view>
+        
+        <!-- 副标题 -->
+        <view class="sub-title-wrapper">
+          <text class="sub-title">让创意绽放</text>
+        </view>
+      </view>
+      
+      <!-- 装饰分隔线 -->
+      <view class="divider-line">
+        <view class="line-segment"></view>
+        <view class="center-flower">
+          <view class="mini-petal"></view>
+          <view class="mini-petal"></view>
+          <view class="mini-petal"></view>
+          <view class="mini-petal"></view>
+        </view>
+        <view class="line-segment"></view>
+      </view>
+      
+      <!-- 倒计时和跳过按钮 -->
+      <view class="bottom-section">
+        <view class="countdown-container" @click="skipToHome">
+          <text class="countdown-text">{{ countdown }}s</text>
+          <text class="skip-text">跳过</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+
+// 倒计时
+const countdown = ref(5);
+let timer = null;
+
+// 跳转到主页
+const skipToHome = () => {
+  if (timer) {
+    clearInterval(timer);
+  }
+  
+  // 尝试使用reLaunch跳转
+  uni.reLaunch({
+    url: '/pages/index/index',
+    fail: () => {
+      // 如果reLaunch失败，尝试switchTab
+      uni.switchTab({
+        url: '/pages/index/index',
+        fail: () => {
+          // 如果switchTab也失败，使用redirectTo
+          uni.redirectTo({
+            url: '/pages/index/index'
+          });
+        }
+      });
+    }
+  });
+};
+
+// 生命周期
+onMounted(() => {
+  // 启动倒计时
+  timer = setInterval(() => {
+    countdown.value--;
+    if (countdown.value <= 0) {
+      skipToHome();
+    }
+  }, 1000);
+});
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
+});
+</script>
+
+<style scoped>
+/* 容器样式 */
+.splash-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #f8f6f0;
+  overflow: hidden;
+}
+
+/* 背景装饰层 */
+.background-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+/* 渐变背景 */
+.gradient-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(ellipse at center top, rgba(255, 123, 123, 0.05) 0%, transparent 50%),
+              radial-gradient(ellipse at bottom left, rgba(74, 155, 74, 0.05) 0%, transparent 50%),
+              radial-gradient(ellipse at bottom right, rgba(255, 235, 153, 0.05) 0%, transparent 50%);
+}
+
+/* 右上角树枝装饰 */
+.branch-decoration {
+  position: absolute;
+  top: 60rpx;
+  right: 40rpx;
+  width: 120rpx;
+  height: 160rpx;
+  animation: gentle-sway 4s ease-in-out infinite;
+}
+
+.branch-stem {
+  position: absolute;
+  top: 20rpx;
+  left: 50%;
+  width: 3rpx;
+  height: 100rpx;
+  background: #4a9b4a;
+  transform: translateX(-50%) rotate(15deg);
+  border-radius: 2rpx;
+}
+
+.branch-leaf {
+  position: absolute;
+  width: 30rpx;
+  height: 45rpx;
+  background: #4a9b4a;
+  border-radius: 0 100% 0 100%;
+  opacity: 0.9;
+}
+
+.leaf-1 {
+  top: 35rpx;
+  left: 35rpx;
+  transform: rotate(-30deg);
+}
+
+.leaf-2 {
+  top: 60rpx;
+  right: 25rpx;
+  transform: rotate(45deg);
+}
+
+.leaf-3 {
+  top: 85rpx;
+  left: 40rpx;
+  transform: rotate(-15deg);
+  opacity: 0.8;
+}
+
+.small-flower {
+  position: absolute;
+  top: 15rpx;
+  right: 20rpx;
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.small-flower .petal {
+  position: absolute;
+  width: 10rpx;
+  height: 18rpx;
+  background: #ff7b7b;
+  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+  transform-origin: 50% 100%;
+  opacity: 0.9;
+}
+
+.small-flower .petal:nth-child(1) { transform: rotate(0deg) translateY(-8rpx); }
+.small-flower .petal:nth-child(2) { transform: rotate(90deg) translateY(-8rpx); }
+.small-flower .petal:nth-child(3) { transform: rotate(180deg) translateY(-8rpx); }
+.small-flower .petal:nth-child(4) { transform: rotate(270deg) translateY(-8rpx); }
+
+.small-flower .center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8rpx;
+  height: 8rpx;
+  background: #ffeb99;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* 左上角优雅光环 */
+.elegant-halo {
+  position: absolute;
+  top: 80rpx;
+  left: 60rpx;
+  width: 100rpx;
+  height: 100rpx;
+}
+
+.halo-ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border: 2rpx solid transparent;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.ring-1 {
+  width: 60rpx;
+  height: 60rpx;
+  border-color: rgba(255, 123, 123, 0.3);
+  animation: rotate-slow 8s linear infinite;
+}
+
+.ring-2 {
+  width: 80rpx;
+  height: 80rpx;
+  border-color: rgba(255, 235, 153, 0.3);
+  animation: rotate-reverse 10s linear infinite;
+}
+
+.ring-3 {
+  width: 100rpx;
+  height: 100rpx;
+  border-color: rgba(74, 155, 74, 0.2);
+  animation: rotate-slow 12s linear infinite;
+}
+
+.glow-orb {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20rpx;
+  height: 20rpx;
+  background: radial-gradient(circle, rgba(255, 123, 123, 0.6) 0%, transparent 70%);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+.sparkle {
+  position: absolute;
+  width: 4rpx;
+  height: 4rpx;
+  background: #ff7b7b;
+  border-radius: 50%;
+  animation: sparkle-twinkle 3s ease-in-out infinite;
+}
+
+.sparkle-1 {
+  top: 10rpx;
+  left: 30rpx;
+  animation-delay: 0s;
+}
+
+.sparkle-2 {
+  top: 40rpx;
+  right: 15rpx;
+  animation-delay: 1s;
+}
+
+.sparkle-3 {
+  bottom: 20rpx;
+  left: 15rpx;
+  animation-delay: 2s;
+}
+
+/* 左下角现代线条艺术 */
+.modern-lines {
+  position: absolute;
+  bottom: 100rpx;
+  left: 40rpx;
+  width: 150rpx;
+  height: 120rpx;
+}
+
+.flow-line {
+  position: absolute;
+  height: 2rpx;
+  background: linear-gradient(90deg, transparent 0%, rgba(255, 123, 123, 0.6) 50%, transparent 100%);
+  border-radius: 1rpx;
+  transform-origin: left center;
+}
+
+.line-1 {
+  top: 20rpx;
+  left: 0;
+  width: 100rpx;
+  transform: rotate(-15deg);
+  animation: flow-pulse 3s ease-in-out infinite;
+}
+
+.line-2 {
+  top: 50rpx;
+  left: 10rpx;
+  width: 120rpx;
+  transform: rotate(10deg);
+  animation: flow-pulse 3s ease-in-out infinite 0.5s;
+}
+
+.line-3 {
+  top: 80rpx;
+  left: 5rpx;
+  width: 90rpx;
+  transform: rotate(-25deg);
+  animation: flow-pulse 3s ease-in-out infinite 1s;
+}
+
+.glow-node {
+  position: absolute;
+  width: 8rpx;
+  height: 8rpx;
+  background: radial-gradient(circle, #ff7b7b 0%, transparent 70%);
+  border-radius: 50%;
+  animation: node-pulse 2s ease-in-out infinite;
+}
+
+.node-1 {
+  top: 45rpx;
+  left: 80rpx;
+}
+
+.node-2 {
+  top: 70rpx;
+  left: 40rpx;
+  animation-delay: 1s;
+}
+
+.floating-orb {
+  position: absolute;
+  top: 40rpx;
+  right: 10rpx;
+  width: 15rpx;
+  height: 15rpx;
+  background: radial-gradient(circle, rgba(255, 235, 153, 0.8) 0%, transparent 60%);
+  border-radius: 50%;
+  animation: float-around 6s ease-in-out infinite;
+}
+
+/* 飘落花瓣 */
+.falling-petals {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.falling-petal {
+  position: absolute;
+  width: 20rpx;
+  height: 25rpx;
+  background: rgba(255, 123, 123, 0.6);
+  border-radius: 0 100% 0 100%;
+  animation: petal-fall 8s linear infinite;
+}
+
+.petal-1 {
+  left: 10%;
+  animation-delay: 0s;
+  animation-duration: 7s;
+}
+
+.petal-2 {
+  left: 30%;
+  animation-delay: 2s;
+  animation-duration: 9s;
+}
+
+.petal-3 {
+  left: 50%;
+  animation-delay: 1s;
+  animation-duration: 8s;
+}
+
+.petal-4 {
+  left: 70%;
+  animation-delay: 3s;
+  animation-duration: 10s;
+}
+
+.petal-5 {
+  left: 90%;
+  animation-delay: 4s;
+  animation-duration: 7s;
+}
+
+/* 主内容区 */
+.content-area {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  padding: 0 60rpx;
+}
+
+/* 标题区域 */
+.title-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 80rpx;
+  animation: fade-in-up 1s ease-out;
+}
+
+/* 主标题 */
+.main-title-wrapper {
+  margin-bottom: 30rpx;
+  animation: fade-in-up 1s ease-out 0.2s both;
+}
+
+.main-title {
+  font-size: 60rpx;
+  font-weight: 900;
+  color: #333;
+  letter-spacing: 8rpx;
+  text-shadow: 3rpx 3rpx 8rpx rgba(0, 0, 0, 0.1);
+  display: block;
+  text-align: center;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+}
+
+/* 装饰小花朵 */
+.title-flower {
+  position: relative;
+  width: 40rpx;
+  height: 40rpx;
+  margin: 30rpx 0;
+  animation: fade-in-scale 1s ease-out 0.3s both;
+}
+
+.tiny-petal {
+  position: absolute;
+  width: 12rpx;
+  height: 20rpx;
+  background: rgba(255, 123, 123, 0.8);
+  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+  transform-origin: 50% 100%;
+}
+
+.tiny-petal:nth-child(1) { 
+  transform: rotate(0deg) translateY(-10rpx);
+}
+.tiny-petal:nth-child(2) { 
+  transform: rotate(90deg) translateY(-10rpx);
+}
+.tiny-petal:nth-child(3) { 
+  transform: rotate(180deg) translateY(-10rpx);
+}
+.tiny-petal:nth-child(4) { 
+  transform: rotate(270deg) translateY(-10rpx);
+}
+
+.tiny-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 10rpx;
+  height: 10rpx;
+  background: #ffeb99;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* 副标题 */
+.sub-title-wrapper {
+  position: relative;
+  animation: fade-in-up 1s ease-out 0.4s both;
+}
+
+.sub-title {
+  font-size: 32rpx;
+  color: #ff7b7b;
+  letter-spacing: 6rpx;
+  display: block;
+  text-align: center;
+  font-weight: 500;
+  position: relative;
+}
+
+/* 添加装饰星点 */
+.sub-title-wrapper::before,
+.sub-title-wrapper::after {
+  content: '✦';
+  position: absolute;
+  font-size: 20rpx;
+  color: rgba(255, 123, 123, 0.5);
+  animation: sparkle-twinkle 3s ease-in-out infinite;
+}
+
+.sub-title-wrapper::before {
+  left: -40rpx;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sub-title-wrapper::after {
+  right: -40rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  animation-delay: 1.5s;
+}
+
+/* 装饰分隔线 */
+.divider-line {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 80rpx;
+  animation: fade-in 1s ease-out 0.6s both;
+}
+
+.line-segment {
+  width: 60rpx;
+  height: 1rpx;
+  background: linear-gradient(90deg, transparent 0%, rgba(255, 123, 123, 0.5) 50%, transparent 100%);
+}
+
+.center-flower {
+  position: relative;
+  width: 30rpx;
+  height: 30rpx;
+  margin: 0 20rpx;
+}
+
+.mini-petal {
+  position: absolute;
+  width: 8rpx;
+  height: 12rpx;
+  background: rgba(255, 123, 123, 0.6);
+  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+  transform-origin: 50% 100%;
+}
+
+.mini-petal:nth-child(1) { transform: rotate(0deg) translateY(-6rpx); }
+.mini-petal:nth-child(2) { transform: rotate(90deg) translateY(-6rpx); }
+.mini-petal:nth-child(3) { transform: rotate(180deg) translateY(-6rpx); }
+.mini-petal:nth-child(4) { transform: rotate(270deg) translateY(-6rpx); }
+
+/* 底部区域 */
+.bottom-section {
+  position: absolute;
+  bottom: 80rpx;
+  right: 60rpx;
+  animation: fade-in 1s ease-out 0.9s both;
+}
+
+.countdown-container {
+  display: flex;
+  align-items: center;
+  padding: 15rpx 30rpx;
+  background: rgba(255, 255, 255, 0.9);
+  border: 2rpx solid rgba(255, 123, 123, 0.3);
+  border-radius: 50rpx;
+  backdrop-filter: blur(10rpx);
+  transition: all 0.3s ease;
+}
+
+.countdown-container:active {
+  transform: scale(0.95);
+  background: rgba(255, 123, 123, 0.1);
+}
+
+.countdown-text {
+  font-size: 24rpx;
+  color: #ff7b7b;
+  font-weight: bold;
+  margin-right: 10rpx;
+}
+
+.skip-text {
+  font-size: 24rpx;
+  color: #666;
+}
+
+/* 动画定义 */
+@keyframes gentle-sway {
+  0%, 100% { transform: rotate(-5deg); }
+  50% { transform: rotate(5deg); }
+}
+
+@keyframes rotate-slow {
+  from { transform: translate(-50%, -50%) rotate(0deg); }
+  to { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+@keyframes rotate-reverse {
+  from { transform: translate(-50%, -50%) rotate(360deg); }
+  to { transform: translate(-50%, -50%) rotate(0deg); }
+}
+
+@keyframes pulse-glow {
+  0%, 100% { 
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.8;
+  }
+  50% { 
+    transform: translate(-50%, -50%) scale(1.2);
+    opacity: 0.4;
+  }
+}
+
+@keyframes sparkle-twinkle {
+  0%, 100% { 
+    opacity: 0;
+    transform: scale(0);
+  }
+  50% { 
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes flow-pulse {
+  0%, 100% { 
+    opacity: 0.3;
+    transform: scaleX(0.8) rotate(var(--rotation, 0deg));
+  }
+  50% { 
+    opacity: 0.8;
+    transform: scaleX(1) rotate(var(--rotation, 0deg));
+  }
+}
+
+@keyframes node-pulse {
+  0%, 100% { 
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  50% { 
+    transform: scale(1.5);
+    opacity: 1;
+  }
+}
+
+@keyframes float-around {
+  0% { 
+    transform: translate(0, 0) scale(1);
+    opacity: 0.8;
+  }
+  25% { 
+    transform: translate(-20rpx, -10rpx) scale(1.1);
+    opacity: 0.6;
+  }
+  50% { 
+    transform: translate(-10rpx, -20rpx) scale(0.9);
+    opacity: 0.8;
+  }
+  75% { 
+    transform: translate(10rpx, -10rpx) scale(1.1);
+    opacity: 0.6;
+  }
+  100% { 
+    transform: translate(0, 0) scale(1);
+    opacity: 0.8;
+  }
+}
+
+@keyframes petal-fall {
+  0% {
+    transform: translateY(-100rpx) translateX(0) rotate(0deg);
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.6;
+  }
+  90% {
+    opacity: 0.6;
+  }
+  100% {
+    transform: translateY(calc(100vh + 100rpx)) translateX(100rpx) rotate(360deg);
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(30rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fade-in-scale {
+  from { 
+    opacity: 0;
+    transform: scale(0.5) rotate(180deg);
+  }
+  to { 
+    opacity: 1;
+    transform: scale(1) rotate(360deg);
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/static/bailing.jpg b/src/static/bailing.jpg
new file mode 100644
index 0000000..f2bf39b
Binary files /dev/null and b/src/static/bailing.jpg differ
diff --git a/src/static/haomen.jpg b/src/static/haomen.jpg
new file mode 100644
index 0000000..c7fff1d
Binary files /dev/null and b/src/static/haomen.jpg differ
diff --git a/src/static/tunvlang.jpg b/src/static/tunvlang.jpg
new file mode 100644
index 0000000..abcee22
Binary files /dev/null and b/src/static/tunvlang.jpg differ
diff --git a/src/static/waimai.jpg b/src/static/waimai.jpg
new file mode 100644
index 0000000..bb3f5d3
Binary files /dev/null and b/src/static/waimai.jpg differ
diff --git a/src/stores/user.js b/src/stores/user.js
index a7cb4c9..977379c 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -48,10 +48,10 @@ export const useUserStore = defineStore('user', () => {
       
       // 4. 保存用户信息
       setUserInfo({
-        token: loginData.token,
+        token: loginData.data.token,
         nickName: userProfileRes.userInfo.nickName,
         avatarUrl: userProfileRes.userInfo.avatarUrl,
-        openid: loginData.openid
+        openid: loginData.data.openid
       });
       
       return Promise.resolve(loginData);
@@ -63,20 +63,6 @@ export const useUserStore = defineStore('user', () => {
 
   // 获取用户信息
   function getUserProfile() {
-    // H5环境下模拟用户信息
-    // #ifdef H5
-    return new Promise((resolve) => {
-      resolve({
-        userInfo: {
-          nickName: 'H5测试用户',
-          avatarUrl: '/static/default-avatar.png'
-        }
-      });
-    });
-    // #endif
-
-    // 非H5环境下获取真实用户信息
-    // #ifndef H5
     return new Promise((resolve, reject) => {
       uni.getUserProfile({
         desc: '用于完善用户资料',
@@ -84,77 +70,61 @@ export const useUserStore = defineStore('user', () => {
           resolve(res);
         },
         fail: (err) => {
+          console.error('获取用户信息失败:', err);
           reject(err);
         }
       });
     });
-    // #endif
   }
 
   // 获取微信登录凭证
   function getWxLogin() {
-    // H5环境下模拟登录凭证
-    // #ifdef H5
-    return new Promise((resolve) => {
-      resolve({ code: 'mock-code-for-h5' });
-    });
-    // #endif
-
-    // 非H5环境下获取真实登录凭证
-    // #ifndef H5
     return new Promise((resolve, reject) => {
       uni.login({
         provider: 'weixin',
         success: (res) => {
-          resolve(res);
+          if (res.code) {
+            resolve(res);
+          } else {
+            reject(new Error('获取登录凭证失败'));
+          }
         },
         fail: (err) => {
+          console.error('微信登录失败:', err);
           reject(err);
         }
       });
     });
-    // #endif
   }
 
   // 调用后端登录接口
   function wxLogin(code, userInfo) {
-    // H5环境下模拟登录，避免API超时
-    // #ifdef H5
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve({
-          token: 'mock-token-for-h5',
-          openid: 'mock-openid-for-h5'
-        });
-      }, 300);
-    });
-    // #endif
-
-    // 非H5环境下调用实际接口
-    // #ifndef H5
     return new Promise((resolve, reject) => {
       uni.request({
-        url: 'https://your-api.com/api/login/wechat',
+        url: 'http://8.145.52.111:8091/app/login',
         method: 'POST',
         data: {
-          code,
-          userInfo
+          code
+        },
+        header: {
+          'Content-Type': 'application/json'
         },
         success: (res) => {
-          if (res.statusCode === 200 && res.data.token) {
-            resolve(res.data);
+          console.log('登录响应:', res);
+          const resData = res.data;
+          if (resData.code === 200 && resData.data && resData.data.token) {
+            resolve(resData);
           } else {
-            reject(new Error('Login failed: ' + JSON.stringify(res.data)));
+            reject(new Error('登录失败: ' + (resData.message || JSON.stringify(resData))));
           }
         },
         fail: (err) => {
+          console.error('登录请求失败:', err);
           reject(err);
         },
-        // 设置超时时间
-        timeout: 5000
+        timeout: 10000 // 增加超时时间到10秒
       });
     });
-    // #endif
   }
 
   // 保存用户信息
@@ -171,6 +141,53 @@ export const useUserStore = defineStore('user', () => {
 
   // 退出登录
   function logout() {
+    return new Promise((resolve, reject) => {
+      try {
+        // 获取token
+        const currentToken = token.value;
+        
+        // 尝试调用登出接口
+        uni.request({
+          url: 'http://8.145.52.111:8091/app/logout',
+          method: 'POST',
+          header: {
+            'Content-Type': 'application/json',
+            'Authorization': currentToken || ''
+          },
+          data: {
+            token: currentToken || ''
+          },
+          success: (res) => {
+            console.log('登出成功:', res);
+            uni.showToast({
+              title: '登出成功',
+              icon: 'success'
+            });
+          },
+          fail: (err) => {
+            console.error('登出失败:', err);
+            uni.showToast({
+              title: '登出接口调用失败',
+              icon: 'none'
+            });
+          },
+          complete: () => {
+            // 无论成功失败，都清除本地数据
+            clearUserData();
+            resolve();
+          }
+        });
+      } catch (error) {
+        console.error('登出过程发生异常:', error);
+        // 发生异常时也要清除本地数据
+        clearUserData();
+        resolve(); // 用resolve而不是reject，确保登出操作总是成功
+      }
+    });
+  }
+
+  // 清除用户数据的辅助函数
+  function clearUserData() {
     token.value = '';
     nickName.value = '';
     avatarUrl.value = '';
@@ -179,6 +196,43 @@ export const useUserStore = defineStore('user', () => {
     
     // 清除本地存储
     uni.removeStorageSync('userInfo');
+    uni.removeStorageSync('custom_token');
+    uni.removeStorageSync('user_token');
+  }
+
+  // 清理假登录数据
+  function clearFakeLoginData() {
+    console.log('清理假登录数据...');
+    
+    // 检查是否有无效的登录数据
+    const userInfo = uni.getStorageSync('userInfo');
+    if (userInfo) {
+      try {
+        const parsedInfo = JSON.parse(userInfo);
+        // 如果没有token或token为空，清除数据
+        if (!parsedInfo.token || parsedInfo.token.trim() === '') {
+          console.log('发现无效的userInfo，清除中...');
+          uni.removeStorageSync('userInfo');
+        }
+      } catch (e) {
+        console.log('userInfo格式错误，清除中...');
+        uni.removeStorageSync('userInfo');
+      }
+    }
+    
+    // 清除其他可能的假token
+    const customToken = uni.getStorageSync('custom_token');
+    if (customToken && customToken.trim() === '') {
+      uni.removeStorageSync('custom_token');
+    }
+    
+    const userToken = uni.getStorageSync('user_token');
+    if (userToken && userToken.trim() === '') {
+      uni.removeStorageSync('user_token');
+    }
+    
+    // 重新初始化状态
+    init();
   }
 
   // 新增：设置用户同意须知状态
@@ -209,6 +263,7 @@ export const useUserStore = defineStore('user', () => {
     setUserInfo,
     logout,
     setAgreedToTerms,
-    setVisitedMinePage
+    setVisitedMinePage,
+    clearFakeLoginData
   };
 }); 
\ No newline at end of file
diff --git a/src/utils/aiCharacters.js b/src/utils/aiCharacters.js
new file mode 100644
index 0000000..fda6c20
--- /dev/null
+++ b/src/utils/aiCharacters.js
@@ -0,0 +1,192 @@
+// AI角色配置文件
+export const aiCharacters = [
+  {
+    id: 5,
+    name: '萌妹小甜',
+    avatar: '/static/logo.png',
+    personality: '可爱活泼，喜欢撒娇',
+    greeting: '你好呀～我是小甜，今天想聊什么呢？',
+    voiceStyle: '甜美可爱',
+    responseStyle: '活泼俏皮，喜欢用表情符号',
+    interests: ['美食', '宠物', '音乐', '旅行'],
+    sampleResponses: [
+      '哇～听起来好有趣呢！✨',
+      '真的吗？我也好想试试看！😊',
+      '你真是太棒了！继续加油哦～💪',
+      '哈哈，你说话真有意思！😄',
+      '我也有同样的想法呢！🤔'
+    ]
+  },
+  {
+    id: 6,
+    name: '御姐温柔',
+    avatar: '/static/logo.png',
+    personality: '知性优雅，温柔体贴',
+    greeting: '你好，我是温柔，有什么心事可以和我分享。',
+    voiceStyle: '温柔知性',
+    responseStyle: '成熟稳重，善解人意',
+    interests: ['阅读', '艺术', '哲学', '心理学'],
+    sampleResponses: [
+      '我理解你的感受，这确实不容易。',
+      '从另一个角度来看，也许会有不同的收获。',
+      '你的想法很有深度，我很欣赏。',
+      '人生就是这样，有起有落，重要的是保持内心的平静。',
+      '我相信你有能力处理好这件事。'
+    ]
+  },
+  {
+    id: 7,
+    name: '童真小天使',
+    avatar: '/static/logo.png',
+    personality: '纯真可爱，充满好奇心',
+    greeting: '嗨！我是小天使，我们一起探索有趣的世界吧！',
+    voiceStyle: '天真烂漫',
+    responseStyle: '充满好奇，喜欢提问',
+    interests: ['游戏', '动画', '童话', '科学'],
+    sampleResponses: [
+      '哇！这是真的吗？好神奇呀！🌟',
+      '为什么为什么？能告诉我更多吗？🤔',
+      '我觉得这个世界真是太有趣了！',
+      '我们一起玩个游戏吧！🎮',
+      '你是我见过最有趣的人！'
+    ]
+  },
+  {
+    id: 8,
+    name: '贴心男友',
+    avatar: '/static/logo.png',
+    personality: '温暖体贴，善解人意',
+    greeting: '宝贝，今天过得怎么样？有什么想聊的吗？',
+    voiceStyle: '温暖磁性',
+    responseStyle: '关怀备至，充满爱意',
+    interests: ['运动', '电影', '音乐', '美食'],
+    sampleResponses: [
+      '宝贝，你辛苦了，要注意休息哦。',
+      '无论发生什么，我都会陪在你身边。',
+      '你笑起来真好看，要多笑笑。',
+      '今天想吃什么？我给你做。',
+      '我爱你，永远都是。'
+    ]
+  },
+  {
+    id: 13,
+    name: '搞笑达人',
+    avatar: '/static/logo.png',
+    personality: '幽默风趣，善于调节气氛',
+    greeting: '哈哈，我是搞笑达人！准备好笑到肚子疼了吗？',
+    voiceStyle: '幽默风趣',
+    responseStyle: '妙语连珠，逗人开心',
+    interests: ['喜剧', '段子', '脱口秀', '相声'],
+    sampleResponses: [
+      '哈哈，这个笑话我听过，但你的版本更好笑！😂',
+      '你知道吗？我刚才差点笑到从椅子上掉下来！',
+      '我觉得你可以去说相声了，太有天赋了！',
+      '生活就像一盒巧克力，有时候是苦的，但我们可以加点糖！',
+      '别担心，笑一笑十年少，你看起来永远18岁！'
+    ]
+  },
+  {
+    id: 14,
+    name: '博学智者',
+    avatar: '/static/logo.png',
+    personality: '知识渊博，思维深刻',
+    greeting: '你好，我是博学智者，让我们进行一场深度对话吧。',
+    voiceStyle: '沉稳睿智',
+    responseStyle: '引经据典，富有哲理',
+    interests: ['历史', '文学', '科学', '哲学'],
+    sampleResponses: [
+      '正如古人所说，学而时习之，不亦说乎。',
+      '这个问题让我想起了苏格拉底的一句话...',
+      '从历史的角度来看，这种现象有其必然性。',
+      '知识就像海洋，我们永远只能取一瓢饮。',
+      '思考是人类最宝贵的财富，你问得很好。'
+    ]
+  },
+  {
+    id: 15,
+    name: '活力健将',
+    avatar: '/static/logo.png',
+    personality: '充满活力，积极向上',
+    greeting: '嘿！我是活力健将，让我们一起充满正能量！',
+    voiceStyle: '充满活力',
+    responseStyle: '积极向上，充满正能量',
+    interests: ['运动', '健身', '户外', '挑战'],
+    sampleResponses: [
+      '太棒了！这就是我想要听到的！💪',
+      '让我们一起挑战不可能！',
+      '运动是最好的良药，要不要一起锻炼？',
+      '每一天都是新的开始，加油！',
+      '你的能量感染了我，让我们继续前进！'
+    ]
+  },
+  {
+    id: 16,
+    name: '文艺青年',
+    avatar: '/static/logo.png',
+    personality: '文艺浪漫，富有想象力',
+    greeting: '你好，我是文艺青年，让我们一起感受生活的美好。',
+    voiceStyle: '文艺浪漫',
+    responseStyle: '诗意盎然，富有想象力',
+    interests: ['诗歌', '音乐', '绘画', '摄影'],
+    sampleResponses: [
+      '生活就像一首诗，需要用心去品味。',
+      '你的话让我想起了那首美丽的诗...',
+      '艺术是心灵的窗户，让我们透过它看世界。',
+      '每一个瞬间都值得被记录，被珍藏。',
+      '你的想法很有诗意，我喜欢这样的交流。'
+    ]
+  }
+];
+
+// 根据角色ID获取角色信息
+export const getCharacterById = (id) => {
+  return aiCharacters.find(character => character.id == id);
+};
+
+// 根据角色性格生成回复
+export const generateResponse = (character, userMessage) => {
+  const responses = character.sampleResponses;
+  const randomIndex = Math.floor(Math.random() * responses.length);
+  return responses[randomIndex];
+};
+
+// 根据用户消息内容智能选择回复
+export const getSmartResponse = (character, userMessage) => {
+  const message = userMessage.toLowerCase();
+  
+  // 根据关键词匹配不同的回复风格
+  if (message.includes('你好') || message.includes('hi') || message.includes('hello')) {
+    return character.greeting;
+  }
+  
+  if (message.includes('谢谢') || message.includes('感谢')) {
+    const thanksResponses = {
+      5: '不用谢啦～能帮到你我很开心！😊',
+      6: '不用客气，这是我应该做的。',
+      7: '嘿嘿，不用谢！我们是好朋友嘛！',
+      8: '宝贝，为你做什么我都愿意。',
+      13: '哈哈，不用谢！能让你开心就是我的荣幸！',
+      14: '助人为乐，何须言谢。',
+      15: '不用谢！让我们一起变得更好！',
+      16: '帮助他人是人生最美的诗篇。'
+    };
+    return thanksResponses[character.id] || '不用谢！';
+  }
+  
+  if (message.includes('再见') || message.includes('拜拜')) {
+    const goodbyeResponses = {
+      5: '拜拜～记得想我哦！😘',
+      6: '再见，期待下次的深度交流。',
+      7: '再见！下次我们一起玩更多有趣的游戏！',
+      8: '宝贝，我会想你的，早点回来。',
+      13: '哈哈，再见！记得保持笑容哦！',
+      14: '再见，愿智慧与你同行。',
+      15: '再见！保持活力，我们下次见！',
+      16: '再见，愿美好与你相伴。'
+    };
+    return goodbyeResponses[character.id] || '再见！';
+  }
+  
+  // 默认返回随机回复
+  return generateResponse(character, userMessage);
+};
diff --git a/src/utils/api.js b/src/utils/api.js
new file mode 100644
index 0000000..83c1b9b
--- /dev/null
+++ b/src/utils/api.js
@@ -0,0 +1,554 @@
+// API服务文件
+import { useUserStore } from '@/stores/user.js';
+
+// 基础配置
+const BASE_URL = 'http://8.145.52.111:8091'; // 根据后端地址调整
+
+// 检查用户登录状态
+const checkLoginStatus = () => {
+  const userStore = useUserStore();
+  const customToken = uni.getStorageSync('custom_token');
+  const userToken = uni.getStorageSync('user_token');
+  const userInfo = uni.getStorageSync('userInfo');
+  
+  // 解析userInfo，检查是否有有效的token
+  let userInfoToken = '';
+  if (userInfo) {
+    try {
+      const parsedUserInfo = JSON.parse(userInfo);
+      userInfoToken = parsedUserInfo.token || '';
+    } catch (e) {
+      console.warn('解析userInfo失败:', e);
+    }
+  }
+  
+  // 只有存在有效token才认为已登录
+  const hasValidToken = !!(userStore.token || customToken || userToken || userInfoToken);
+  
+  return {
+    isLoggedIn: hasValidToken,
+    token: userStore.token || customToken || userToken || userInfoToken
+  };
+};
+
+// 请求拦截器
+const request = (options) => {
+  return new Promise((resolve, reject) => {
+    const userStore = useUserStore();
+    const loginStatus = checkLoginStatus();
+    
+    // 默认配置
+    const defaultOptions = {
+      url: BASE_URL + options.url,
+      method: options.method || 'GET',
+      header: {
+        'Content-Type': 'application/json',
+        'Authorization': loginStatus.token || '',
+        ...options.header
+      },
+      data: options.data || {},
+      timeout: options.timeout || 30000
+    };
+
+    // 发送请求
+    uni.request({
+      ...defaultOptions,
+      success: (res) => {
+        console.log('API请求成功:', res);
+        console.log('响应状态码:', res.statusCode);
+        console.log('响应数据:', res.data);
+        
+        // 处理响应
+        if (res.statusCode === 200) {
+          resolve(res.data);
+        } else {
+          reject({
+            code: res.statusCode,
+            message: res.data?.message || '请求失败',
+            data: res.data
+          });
+        }
+      },
+      fail: (err) => {
+        console.error('API请求失败:', err);
+        reject({
+          code: -1,
+          message: '网络请求失败',
+          error: err
+        });
+      }
+    });
+  });
+};
+
+// AI聊天API
+export const chatAPI = {
+  // 同步聊天接口
+  syncChat: async (params) => {
+    const loginStatus = checkLoginStatus();
+    
+    // 如果用户未登录，直接返回失败，让前端使用本地模拟
+    if (!loginStatus.isLoggedIn) {
+      console.log('用户未登录，跳过API调用，使用本地模拟');
+      return {
+        success: false,
+        error: { message: '用户未登录，使用本地模拟回复' },
+        isAnonymous: true
+      };
+    }
+    
+    try {
+      const response = await request({
+        url: '/api/chat/sync',
+        method: 'POST',
+        data: {
+          message: params.message,
+          useFunctionCall: false,
+          modelId: null,  // 使用默认模型
+          templateId: params.characterId  // 使用角色模板ID
+        }
+      });
+      
+      console.log('API原始响应:', response);
+      
+      // 处理不同的响应格式 - 参考chat.vue的实现
+      let processedResponse = null;
+      
+      // 如果响应是字符串，直接返回
+      if (typeof response === 'string') {
+        processedResponse = response;
+      }
+      // 如果响应是对象，尝试提取AI回复
+      else if (typeof response === 'object' && response !== null) {
+        // 优先处理嵌套结构：res.data.data.response
+        if (response.data && response.data.data && response.data.data.response) {
+          processedResponse = response.data.data.response;
+          console.log('从嵌套结构 data.data.response 提取回复:', processedResponse);
+        }
+        // 备用：直接使用 data.response
+        else if (response.data && response.data.response) {
+          processedResponse = response.data.response;
+          console.log('从字段 data.response 提取回复:', processedResponse);
+        }
+        // 检查是否为状态消息
+        else if (response.data && response.data.message) {
+          if (response.data.message === '对话成功') {
+            // 后端返回成功消息，使用默认回复
+            processedResponse = '我收到了你的消息，很高兴和你聊天！';
+            console.log('检测到对话成功状态，使用默认回复');
+          } else {
+            // 如果后端返回了错误信息，抛出错误
+            throw new Error(response.data.message);
+          }
+        }
+        // 尝试其他可能的字段名
+        else {
+          const possibleFields = ['message', 'response', 'content', 'reply', 'answer', 'text'];
+          
+          for (const field of possibleFields) {
+            if (response[field] && typeof response[field] === 'string') {
+              processedResponse = response[field];
+              console.log(`从字段 ${field} 提取回复:`, processedResponse);
+              break;
+            }
+          }
+          
+          // 如果还是没找到，尝试在data中查找
+          if (!processedResponse && response.data) {
+            for (const field of possibleFields) {
+              if (response.data[field] && typeof response.data[field] === 'string') {
+                processedResponse = response.data[field];
+                console.log(`从字段 data.${field} 提取回复:`, processedResponse);
+                break;
+              }
+            }
+          }
+        }
+      }
+      
+      // 如果仍然没有找到有效回复，使用默认回复
+      if (!processedResponse) {
+        processedResponse = '我收到了你的消息，很高兴和你聊天！';
+        console.log('未找到有效回复，使用默认回复');
+      }
+      
+      return {
+        success: true,
+        data: processedResponse,
+        originalResponse: response
+      };
+    } catch (error) {
+      console.error('AI聊天API调用失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 异步聊天接口（如果需要）
+  asyncChat: async (params) => {
+    try {
+      const response = await request({
+        url: '/api/chat/async',
+        method: 'POST',
+        data: {
+          message: params.message,
+          characterId: params.characterId,
+          conversationId: params.conversationId || null,
+          ...params
+        }
+      });
+      
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('AI异步聊天API调用失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 获取聊天历史
+  getChatHistory: async (conversationId) => {
+    try {
+      const response = await request({
+        url: `/api/chat/history/${conversationId}`,
+        method: 'GET'
+      });
+      
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('获取聊天历史失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 创建新对话
+  createConversation: async (characterId) => {
+    try {
+      const response = await request({
+        url: '/api/chat/conversation',
+        method: 'POST',
+        data: {
+          characterId: characterId
+        }
+      });
+      
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('创建对话失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  }
+};
+
+// 语音相关API
+export const voiceAPI = {
+  // 1. 文本转语音 - TTS功能
+  textToSpeech: async (text, options = {}) => {
+    try {
+      const loginStatus = checkLoginStatus();
+      
+      if (!loginStatus.isLoggedIn) {
+        return {
+          success: false,
+          error: { message: '用户未登录' }
+        };
+      }
+      
+      console.log('开始文本转语音:', text);
+      
+      const response = await request({
+        url: '/api/chat/tts',
+        method: 'POST',
+        data: {
+          text: text,
+          voiceStyle: options.voiceStyle || 'default',
+          modelId: options.modelId || null,
+          templateId: options.templateId || null
+        }
+      });
+      
+      console.log('文本转语音响应:', response);
+      
+      // 处理响应数据
+      let audioUrl = null;
+      if (response.data && response.data.audioUrl) {
+        audioUrl = response.data.audioUrl;
+      } else if (response.audioUrl) {
+        audioUrl = response.audioUrl;
+      } else if (response.data && response.data.url) {
+        audioUrl = response.data.url;
+      } else if (response.url) {
+        audioUrl = response.url;
+      }
+      
+      return {
+        success: true,
+        data: {
+          audioUrl: audioUrl,
+          originalResponse: response
+        }
+      };
+    } catch (error) {
+      console.error('文本转语音失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 2. 对话+语音合成 - 对话后转语音
+  chatWithTTS: async (message, options = {}) => {
+    try {
+      const loginStatus = checkLoginStatus();
+      
+      if (!loginStatus.isLoggedIn) {
+        return {
+          success: false,
+          error: { message: '用户未登录' }
+        };
+      }
+      
+      console.log('开始对话+语音合成:', message);
+      
+      const response = await request({
+        url: '/api/chat/answer-tts',
+        method: 'POST',
+        data: {
+          message: message,
+          modelId: options.modelId || null,
+          templateId: options.templateId || null,
+          voiceStyle: options.voiceStyle || 'default'
+        }
+      });
+      
+      console.log('对话+语音合成响应:', response);
+      
+      // 处理响应数据
+      let aiResponse = null;
+      let audioUrl = null;
+      
+      if (response.data) {
+        aiResponse = response.data.response || response.data.text || response.data.message;
+        audioUrl = response.data.audioUrl || response.data.url;
+      }
+      
+      return {
+        success: true,
+        data: {
+          aiResponse: aiResponse,
+          audioUrl: audioUrl,
+          originalResponse: response
+        }
+      };
+    } catch (error) {
+      console.error('对话+语音合成失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 3. 语音对话 - 完整语音交互流程
+  voiceChat: async (filePath, options = {}) => {
+    try {
+      const loginStatus = checkLoginStatus();
+      
+      // 如果用户未登录，直接返回失败，让前端使用降级处理
+      if (!loginStatus.isLoggedIn) {
+        console.log('用户未登录，语音对话跳过API调用');
+        return {
+          success: false,
+          error: { message: '用户未登录，使用降级处理' }
+        };
+      }
+      
+      console.log('开始语音对话，文件路径:', filePath);
+      
+      // 构建认证头
+      let authHeader = '';
+      if (loginStatus.token) {
+        authHeader = loginStatus.token.startsWith('Bearer ') ? loginStatus.token : 'Bearer ' + loginStatus.token;
+      }
+      
+      return new Promise((resolve) => {
+        uni.uploadFile({
+          url: BASE_URL + '/api/chat/voice-chat',
+          filePath: filePath,
+          name: 'audio',
+          header: authHeader ? {
+            'Authorization': authHeader
+          } : {},
+          formData: {
+            modelId: options.modelId || null,
+            templateId: options.templateId || null,
+            voiceStyle: options.voiceStyle || 'default'
+          },
+          success: (res) => {
+            console.log('语音对话上传成功:', res);
+            
+            try {
+              const data = JSON.parse(res.data);
+              console.log('语音对话响应数据:', data);
+              
+              if (data.code === 200 && data.data) {
+                resolve({
+                  success: true,
+                  data: {
+                    userText: data.data.userText || data.data.text,
+                    aiResponse: data.data.aiResponse || data.data.response,
+                    audioUrl: data.data.audioUrl || data.data.url
+                  }
+                });
+              } else {
+                resolve({
+                  success: false,
+                  error: { message: data.message || '语音对话失败' }
+                });
+              }
+            } catch (parseError) {
+              console.error('解析语音对话响应失败:', parseError);
+              resolve({
+                success: false,
+                error: { message: '解析响应失败' }
+              });
+            }
+          },
+          fail: (err) => {
+            console.error('语音对话上传失败:', err);
+            resolve({
+              success: false,
+              error: err
+            });
+          }
+        });
+      });
+    } catch (error) {
+      console.error('语音对话失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 4. 音频文件上传语音对话
+  uploadVoiceChat: async (filePath, options = {}) => {
+    try {
+      const loginStatus = checkLoginStatus();
+      
+      // 如果用户未登录，直接返回失败，让前端使用降级处理
+      if (!loginStatus.isLoggedIn) {
+        console.log('用户未登录，上传音频文件语音对话跳过API调用');
+        return {
+          success: false,
+          error: { message: '用户未登录，使用降级处理' }
+        };
+      }
+      
+      console.log('开始上传音频文件语音对话，文件路径:', filePath);
+      
+      // 构建认证头
+      let authHeader = '';
+      if (loginStatus.token) {
+        authHeader = loginStatus.token.startsWith('Bearer ') ? loginStatus.token : 'Bearer ' + loginStatus.token;
+      }
+      
+      return new Promise((resolve) => {
+        uni.uploadFile({
+          url: BASE_URL + '/api/chat/upload-voice-chat',
+          filePath: filePath,
+          name: 'audio',
+          header: authHeader ? {
+            'Authorization': authHeader
+          } : {},
+          formData: {
+            modelId: options.modelId || null,
+            templateId: options.templateId || null,
+            voiceStyle: options.voiceStyle || 'default'
+          },
+          success: (res) => {
+            console.log('上传音频文件语音对话成功:', res);
+            
+            try {
+              const data = JSON.parse(res.data);
+              console.log('上传音频文件语音对话响应数据:', data);
+              
+              if (data.code === 200 && data.data) {
+                resolve({
+                  success: true,
+                  data: {
+                    userText: data.data.userText || data.data.text,
+                    aiResponse: data.data.aiResponse || data.data.response,
+                    audioUrl: data.data.audioUrl || data.data.url
+                  }
+                });
+              } else {
+                resolve({
+                  success: false,
+                  error: { message: data.message || '上传音频文件语音对话失败' }
+                });
+              }
+            } catch (parseError) {
+              console.error('解析上传音频文件语音对话响应失败:', parseError);
+              resolve({
+                success: false,
+                error: { message: '解析响应失败' }
+              });
+            }
+          },
+          fail: (err) => {
+            console.error('上传音频文件语音对话失败:', err);
+            resolve({
+              success: false,
+              error: err
+            });
+          }
+        });
+      });
+    } catch (error) {
+      console.error('上传音频文件语音对话失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 兼容性方法：语音识别（降级处理）
+  speechToText: async (filePath) => {
+    console.warn('speechToText 方法已废弃，请使用 voiceChat 或 uploadVoiceChat');
+    // 降级处理：使用语音对话接口
+    const result = await voiceAPI.voiceChat(filePath);
+    if (result.success) {
+      return {
+        success: true,
+        data: result.data.userText
+      };
+    }
+    return result;
+  }
+};
+
+// 导出默认请求方法
+export default request;
diff --git a/src/utils/debug.js b/src/utils/debug.js
new file mode 100644
index 0000000..0c4377f
--- /dev/null
+++ b/src/utils/debug.js
@@ -0,0 +1,119 @@
+// 调试工具
+export const debugAPI = {
+  // 打印API请求详情
+  logRequest: (url, method, data) => {
+    console.log('=== API请求详情 ===');
+    console.log('URL:', url);
+    console.log('方法:', method);
+    console.log('请求数据:', data);
+    console.log('时间:', new Date().toLocaleString());
+    console.log('==================');
+  },
+
+  // 打印API响应详情
+  logResponse: (response) => {
+    console.log('=== API响应详情 ===');
+    console.log('完整响应:', response);
+    console.log('响应类型:', typeof response);
+    console.log('是否为对象:', typeof response === 'object');
+    
+    if (typeof response === 'object' && response !== null) {
+      console.log('响应键:', Object.keys(response));
+      console.log('响应值:', Object.values(response));
+    }
+    
+    console.log('时间:', new Date().toLocaleString());
+    console.log('==================');
+  },
+
+  // 分析响应数据结构
+  analyzeResponse: (response) => {
+    console.log('=== 响应数据分析 ===');
+    
+    if (typeof response === 'string') {
+      console.log('响应是字符串:', response);
+      return { type: 'string', value: response };
+    }
+    
+    if (typeof response === 'object' && response !== null) {
+      console.log('响应是对象');
+      console.log('对象结构:', JSON.stringify(response, null, 2));
+      
+      // 查找可能的AI回复字段
+      const possibleFields = ['response', 'message', 'content', 'reply', 'answer', 'text', 'data'];
+      const foundFields = {};
+      
+      possibleFields.forEach(field => {
+        if (response.hasOwnProperty(field)) {
+          foundFields[field] = response[field];
+          console.log(`找到字段 ${field}:`, response[field]);
+        }
+      });
+      
+      return { type: 'object', fields: foundFields, full: response };
+    }
+    
+    console.log('未知响应类型:', typeof response);
+    return { type: 'unknown', value: response };
+  },
+
+  // 测试API响应处理
+  testResponseHandling: (response) => {
+    console.log('=== 测试响应处理 ===');
+    
+    const analysis = debugAPI.analyzeResponse(response);
+    
+    // 尝试提取AI回复
+    let aiResponse = null;
+    
+    if (analysis.type === 'string') {
+      aiResponse = analysis.value;
+      console.log('从字符串提取回复:', aiResponse);
+    } else if (analysis.type === 'object') {
+      // 尝试多种字段
+      const fields = ['response', 'message', 'content', 'reply', 'answer', 'text'];
+      
+      for (const field of fields) {
+        if (response[field] && typeof response[field] === 'string') {
+          aiResponse = response[field];
+          console.log(`从字段 ${field} 提取回复:`, aiResponse);
+          break;
+        }
+      }
+      
+      // 如果没找到，尝试嵌套对象
+      if (!aiResponse && response.data) {
+        for (const field of fields) {
+          if (response.data[field] && typeof response.data[field] === 'string') {
+            aiResponse = response.data[field];
+            console.log(`从 data.${field} 提取回复:`, aiResponse);
+            break;
+          }
+        }
+      }
+    }
+    
+    console.log('最终提取的回复:', aiResponse);
+    console.log('回复是否有效:', aiResponse && typeof aiResponse === 'string' && aiResponse.trim());
+    
+    // 检测是否为状态信息而非实际AI回复
+    if (aiResponse && typeof aiResponse === 'string') {
+      const statusKeywords = ['对话成功', 'success', '请求成功', '成功', 'ok', '完成'];
+      const isStatusMessage = statusKeywords.some(keyword => 
+        aiResponse.toLowerCase().includes(keyword.toLowerCase())
+      );
+      
+      if (isStatusMessage) {
+        console.warn('⚠️ 检测到状态信息而非AI回复:', aiResponse);
+        console.log('建议使用本地模拟回复');
+      }
+    }
+    
+    console.log('==================');
+    
+    return aiResponse;
+  }
+};
+
+// 导出默认调试工具
+export default debugAPI;
diff --git a/test.md b/test.md
new file mode 100644
index 0000000..e69de29