diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..3b33e38
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,12 @@
+{
+  "permissions": {
+    "allow": [
+      "WebFetch(domain:x.ant.design)",
+      "WebSearch",
+      "WebFetch(domain:antd-design-x-vue.netlify.app)",
+      "Bash(npm install:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..68a4a8a
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,221 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a **小智AI (Xiaozhi AI)** voice assistant front-end application built with **uni-app (Vue 3)** targeting multiple platforms (H5, WeChat Mini Program, and other mini-program platforms). The app provides AI conversation, voice interaction, script management, voice cloning, and IoT device configuration capabilities.
+
+**Core Technologies:**
+- uni-app 3.x with Vue 3 Composition API
+- Vite 5.2.8 for build tooling
+- Pinia 2.1.7 for state management
+- vue-i18n 9.1.9 for internationalization
+
+**Backend Integration:**
+- Java Spring Boot backend at `http://localhost:8091` (configurable in `src/utils/api.js`)
+- Alibaba Cloud voice services for TTS/ASR/voice cloning
+- WeChat OAuth 2.0 for user authentication
+
+## Development Commands
+
+```bash
+# Install dependencies
+npm install
+
+# H5 development (web browser)
+npm run dev:h5
+
+# WeChat Mini Program development
+npm run dev:mp-weixin
+
+# Build for H5 production
+npm run build:h5
+
+# Build for WeChat Mini Program
+npm run build:mp-weixin
+
+# Other platforms (Alipay, Baidu, etc.)
+npm run dev:mp-[platform]    # development
+npm run build:mp-[platform]   # production
+```
+
+Build outputs go to `dist/build/h5/` or `dist/build/mp-weixin/` respectively.
+
+## Architecture & Code Structure
+
+### Entry Points
+- **`src/main.js`**: Application bootstrap, creates SSR app and registers Pinia
+- **`src/App.vue`**: Root component with global lifecycle hooks
+- **`src/pages.json`**: Page routing, tabBar configuration, and navigation styles (all pages use custom navigation)
+- **`src/manifest.json`**: Platform-specific configurations (WeChat AppID: `wxff56c34ef9aceb62`)
+
+### State Management (Pinia)
+- **`src/stores/user.js`**: User authentication state
+  - Manages `token`, `nickName`, `avatarUrl`, `openid`, `isLoggedIn`, `hasAgreedToTerms`, `hasVisitedMinePage`
+  - Provides `login()`, `logout()`, `setUserInfo()`, `clearFakeLoginData()` methods
+  - Persists state to uni-app local storage (`userInfo`, `custom_token`, `user_token`)
+  - **Important**: Token is checked from multiple sources (store, `custom_token`, `user_token`, `userInfo.token`)
+
+### API Layer (`src/utils/api.js`)
+- **Request interceptor**: Automatically adds `Authorization: Bearer <token>` header from multiple token sources
+- **Response handling**: Smart extraction of backend responses from various nested structures
+- **Text cleaning**: `cleanText()` function strips HTML/Markdown and keeps only text and punctuation
+
+**API Modules:**
+- **`chatAPI`**:
+  - `syncChat()` - Synchronous chat with fallback for anonymous users
+  - `asyncChat()` - Asynchronous chat (if needed)
+  - `getChatHistory()`, `createConversation()` - Conversation management
+  - **Note**: When user is not logged in, returns `isAnonymous: true` to trigger local simulation
+- **`voiceAPI`**:
+  - `textToSpeech()` - TTS (Text-to-Speech)
+  - `chatWithTTS()` - AI chat + voice synthesis
+  - `voiceChat()` - Complete voice interaction (uploads AAC, backend converts to WAV)
+  - `uploadVoiceChat()` - Audio file upload for voice chat
+  - **Important**: Frontend sends AAC format, backend must convert to WAV for processing
+  - Response parsing handles complex nested structures: `data.llmResult.response`, `data.sttResult.text`, `data.ttsResult.audioPath`
+- **`rechargeAPI`**: `getUserBalance()`, `createRechargeOrder()`, `getOrderStatus()`, `getRechargeHistory()`
+- **`roleAPI`**: `getRoles()`, `getRoleById()` - AI character management
+- **`configAPI`**: `getAllConfigs()`, `getModels()`, `getSTTConfigs()`, `getTemplates()`, `getTTSConfigs()`
+
+### Page Structure
+Pages are organized by feature under `src/pages/`:
+
+**Core Pages:**
+- `splash/splash` - Launch screen with agreement flow
+- `index/index` - Homepage with drama characters and AI voices (has tabBar)
+- `mine/mine` - User profile and settings (has tabBar)
+- `chat/chat` - AI conversation with text and voice input
+- `create/create` - Script creation entry
+- `script/editor` - Script editing interface
+- `drama/index` - Drama character details
+- `voice/clone` - Voice cloning feature
+- `agreement/agreement` - User agreement display
+- `recharge/recharge` - Recharge/payment
+- `recharge/history` - Recharge history (with pull-down refresh enabled)
+
+All pages use `navigationStyle: "custom"` for custom navigation bars.
+
+### Global Styles
+- **`src/uni.scss`**: Global SCSS variables and mixins
+- **`src/styles/`**: Common stylesheets
+- **`src/static/`**: Static assets (images, icons, etc.)
+
+### Components
+- **`src/components/UserAgreement.vue`**: User agreement component
+- **`src/components/UserAuth.vue`**: User authentication component
+
+## Key Architectural Patterns
+
+### Authentication Flow
+1. User triggers login from UI
+2. `useUserStore.login()` orchestrates:
+   - Call `uni.getUserProfile()` for WeChat user info
+   - Call `uni.login()` to get WeChat `code`
+   - POST to `/app/login` with `code`
+   - Save `token`, `nickName`, `avatarUrl`, `openid` to store and local storage
+3. All subsequent API calls auto-inject token from store/storage via request interceptor
+
+### Anonymous User Handling
+- When not logged in, `chatAPI.syncChat()` returns `isAnonymous: true`
+- UI layer should implement local simulation/fallback responses
+- Voice APIs skip backend calls and use degradation handling
+
+### Voice Interaction Flow
+1. **Record**: User records voice (AAC format) using `uni.getRecorderManager()`
+2. **Upload**: Frontend uploads AAC to backend via `voiceAPI.voiceChat()` or `uploadVoiceChat()`
+3. **Backend Processing**:
+   - Convert AAC to WAV
+   - STT (Speech-to-Text) via Alibaba Cloud ASR
+   - LLM processing for AI response
+   - TTS (Text-to-Speech) via Alibaba Cloud TTS
+4. **Response**: Backend returns structured response with `sttResult.text`, `llmResult.response`, `ttsResult.audioPath`
+5. **Playback**: Frontend plays audio using `uni.createInnerAudioContext()`
+
+### Response Data Extraction Pattern
+The API layer uses a flexible extraction strategy to handle varying backend response structures:
+- Try multiple field names: `response`, `message`, `content`, `reply`, `answer`, `text`
+- Check nested paths: `data.data.response`, `data.response`, root-level `response`
+- For voice APIs, specifically look for: `data.llmResult.response`, `data.sttResult.text`, `data.ttsResult.audioPath`
+- Always clean responses with `cleanText()` to remove markup
+
+## Important Configuration Files
+
+### `src/pages.json`
+Defines all pages, tabBar, and global styles. Key settings:
+- All pages have `navigationStyle: "custom"` (custom nav bars)
+- TabBar: Homepage (`pages/index/index`) and Mine (`pages/mine/mine`)
+- `lazyCodeLoading: "requiredComponents"` for performance
+- Splash and agreement pages have `disableScroll: true` and `popGesture: "none"` (prevent back gesture)
+
+### `src/manifest.json`
+Platform-specific configurations:
+- WeChat Mini Program AppID: `wxff56c34ef9aceb62`
+- App permissions and capabilities
+- Platform-specific optimizations
+
+### `vite.config.js`
+Minimal Vite config using `@dcloudio/vite-plugin-uni` plugin.
+
+## Documentation References
+
+Refer to these files for detailed specifications:
+- **`API接口文档.md`**: Complete backend API documentation with request/response examples
+- **`产品设计需求文档.md`**: Product requirements, functional specifications, AI service integration details, IoT device configuration requirements
+- **`前端交接文档.md`**: Project handoff document with module descriptions and development notes
+
+## Development Best Practices
+
+### Working with uni-app
+- Use `uni.*` APIs for cross-platform compatibility (e.g., `uni.request`, `uni.showToast`, `uni.navigateTo`)
+- Test on both H5 and WeChat Mini Program to ensure compatibility
+- WeChat Mini Program has stricter restrictions (e.g., requires HTTPS for production, domain whitelist)
+
+### State Management
+- Always use Pinia store for shared state
+- Persist critical state (user info, tokens) to local storage via `uni.setStorageSync()`
+- Initialize stores on app launch by calling store's `init()` method
+
+### API Integration
+- Never hardcode API endpoints; use `BASE_URL` in `src/utils/api.js`
+- Handle both logged-in and anonymous states gracefully
+- Always check for multiple possible response structures when parsing backend data
+- Use `cleanText()` for AI-generated text to strip formatting
+
+### Audio Handling
+- Record audio using `uni.getRecorderManager()` with AAC format
+- Play audio using `uni.createInnerAudioContext()`
+- Always inform backend that AAC will be sent and needs WAV conversion
+- Cache frequently used audio responses for better performance
+
+### Error Handling
+- Display user-friendly error messages using `uni.showToast()`
+- Log errors to console for debugging
+- Implement fallback mechanisms for non-critical features when backend is unavailable
+
+### Performance
+- Use `lazyCodeLoading: "requiredComponents"` (already configured)
+- Optimize images and static assets
+- Implement code splitting for large pages
+- Cache API responses where appropriate (e.g., config data, role lists)
+
+## Platform-Specific Notes
+
+### WeChat Mini Program
+- Requires domain whitelist configuration in WeChat Developer Console
+- OAuth login flow uses `uni.login({ provider: 'weixin' })`
+- Recording and playback permissions must be requested from user
+- Payment integration uses WeChat Pay API
+
+### H5 (Web)
+- Can be deployed to any web server
+- Use browser DevTools for debugging
+- May need CORS configuration on backend for local development
+
+## Git Workflow
+
+Main branch: `master`
+Current branch: `test`
+
+When creating PRs, target the `master` branch.
diff --git a/package.json b/package.json
index 50ccd4d..1934906 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,8 @@
     "@dcloudio/uni-mp-weixin": "3.0.0-4060420250429001",
     "@dcloudio/uni-mp-xhs": "3.0.0-4060420250429001",
     "@dcloudio/uni-quickapp-webview": "3.0.0-4060420250429001",
+    "ant-design-vue": "^4.2.6",
+    "ant-design-x-vue": "^1.3.2",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
     "vue-i18n": "^9.1.9"
diff --git a/src/App.vue b/src/App.vue
index 8b90be5..533c3c0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,18 +2,26 @@
 export default {
   onLaunch: function () {
     console.log('App Launch');
-    
-    // 应用启动时的全局初始化逻辑
-    // 启动页会自动处理倒计时和页面跳转
-    
-    // 可以在这里添加其他全局初始化逻辑
-    // 例如：设置全局变量、注册事件监听器等
+
+    // 检查是否是首次启动或需要显示启动页
+    const hasShownSplash = uni.getStorageSync('hasShownSplash');
+    const hasAgreedToTerms = uni.getStorageSync('hasAgreedToTerms');
+
+    // 如果未显示过启动页或未同意协议，则跳转到启动页
+    if (!hasShownSplash || hasAgreedToTerms !== 'true') {
+      // 延迟一下确保页面已加载
+      setTimeout(() => {
+        uni.redirectTo({
+          url: '/pages/splash/splash'
+        });
+      }, 100);
+    }
   },
-  
+
   onShow: function () {
     console.log('App Show')
   },
-  
+
   onHide: function () {
     console.log('App Hide')
   }
diff --git a/src/pages.json b/src/pages.json
index 1c447ba..155158e 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,6 +1,29 @@
 {
-	"lazyCodeLoading": "requiredComponents",
-	"pages": [ 
+	"pages": [
+		{
+			"path": "pages/drama/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/device/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/chat/chat",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/mine/mine",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/splash/splash",
 			"style": {
@@ -19,12 +42,6 @@
 				"disableScroll": false
 			}
 		},
-		{
-			"path": "pages/mine/mine",
-			"style": {
-				"navigationStyle": "custom"
-			}
-		},
 		{
 			"path": "pages/create/create",
 			"style": {
@@ -37,12 +54,6 @@
 				"navigationStyle": "custom"
 			}
 		},
-		{
-			"path": "pages/drama/index",
-			"style": {
-				"navigationStyle": "custom"
-			}
-		},
 		{
 			"path": "pages/voice/clone",
 			"style": {
@@ -55,16 +66,10 @@
 				"navigationStyle": "custom",
 				"disableScroll": true,
 				"app-plus": {
-					"popGesture": "none" 
+					"popGesture": "none"
 				}
 			}
 		},
-		{
-			"path": "pages/chat/chat",
-			"style": {
-				"navigationStyle": "custom"
-			}
-		},
 		{
 			"path": "pages/recharge/recharge",
 			"style": {
@@ -92,8 +97,16 @@
 		"borderStyle": "white",
 		"list": [
 			{
-				"pagePath": "pages/index/index",
-				"text": "首页"
+				"pagePath": "pages/drama/index",
+				"text": "发现"
+			},
+			{
+				"pagePath": "pages/device/index",
+				"text": "设备"
+			},
+			{
+				"pagePath": "pages/chat/chat",
+				"text": "专属"
 			},
 			{
 				"pagePath": "pages/mine/mine",
diff --git a/src/pages/chat/chat.vue b/src/pages/chat/chat.vue
index df9f6d8..825be08 100644
--- a/src/pages/chat/chat.vue
+++ b/src/pages/chat/chat.vue
@@ -1,9 +1,24 @@
 <template>
   <view class="chat-container">
+    <!-- 夜空装饰背景 -->
+    <view class="night-sky-decoration">
+      <view class="star star-1"></view>
+      <view class="star star-2"></view>
+      <view class="star star-3"></view>
+      <view class="star star-4"></view>
+      <view class="star star-5"></view>
+      <view class="star star-6"></view>
+      <view class="star star-7"></view>
+      <view class="star star-8"></view>
+    </view>
+
     <!-- 自定义导航栏 -->
     <view class="custom-navbar">
-      <view class="navbar-left" @tap="goBack">← 返回</view>
-      <view class="navbar-center">
+      <view class="navbar-left" @tap="goBack" v-if="showBackButton">
+        <text class="back-icon">←</text>
+        <text class="back-text">返回</text>
+      </view>
+      <view class="navbar-center" :class="{'centered': !showBackButton}">
         <image class="character-avatar" :src="currentCharacter.avatar" mode="aspectFill" />
         <text class="character-name">{{ currentCharacter.name }}</text>
       </view>
@@ -12,158 +27,151 @@
       </view>
     </view>
 
-    <!-- 聊天消息区域 -->
-    <scroll-view 
-      class="chat-messages" 
-      scroll-y="true" 
+    <!-- 聊天消息区域 - 使用 Ant Design X Bubble.List -->
+    <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" 
+        <!-- 使用 Bubble 组件展示消息 -->
+        <view
+          v-for="(message, index) in messages"
           :key="index"
-          :class="['message-item', message.type]"
+          class="message-wrapper"
         >
-          <!-- AI消息 -->
-          <template v-if="message.type === 'ai'">
-            <view class="message-avatar">
+          <!-- 系统消息 -->
+          <view v-if="message.type === 'system'" class="system-message">
+            <text class="system-text">{{ message.content }}</text>
+          </view>
+
+          <!-- AI/用户消息 -->
+          <view v-else class="bubble-container" :class="[message.type]">
+            <view class="bubble-avatar" v-if="message.type === 'ai'">
               <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 class="bubble-content">
+              <view class="bubble" :class="[message.type]">
+                <text class="bubble-text">{{ message.content }}</text>
+
+                <!-- AI 消息操作按钮 - 已隐藏播放按钮 -->
+                <!-- <view class="bubble-actions" v-if="message.type === 'ai' && isLoggedIn">
+                  <view class="action-btn" @click="() => playVoiceResponse(message.content)">
+                    <text class="action-icon">🔊</text>
                   </view>
-                </view>
-                <view class="message-time">{{ message.time }}</view>
+                </view> -->
+
+                <view class="bubble-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">
+
+            <view class="bubble-avatar" v-if="message.type === 'user'">
               <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>
-        
-        <!-- 正在输入提示 -->
+
+        <!-- 正在输入指示器 -->
         <view class="typing-indicator" v-if="isTyping">
-          <view class="message-avatar">
+          <view class="bubble-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 class="typing-bubble">
+            <view class="typing-dots">
+              <view class="dot"></view>
+              <view class="dot"></view>
+              <view class="dot"></view>
             </view>
           </view>
         </view>
       </view>
     </scroll-view>
   </view>
-  
-  <!-- 输入区域 - 移出主容器 -->
+
+  <!-- 输入区域 - 使用 Ant Design X Sender 风格 -->
   <view class="input-area">
-    <view class="input-container">
-      <!-- AI模板选择按钮 - 放在输入框左边 -->
-      <view 
-        class="template-btn"
-        @click="handleTemplateClick"
-        @tap="handleTemplateClick"
-      >
+    <!-- 智能体选择按钮 -->
+    <!-- <view class="action-bar" v-if="availableTemplates.length > 0">
+      <view class="template-selector-btn" @click="showTemplateSelector">
         <text class="template-icon">🤖</text>
+        <text class="template-name">{{ currentTemplateName }}</text>
+        <text class="arrow-icon">›</text>
       </view>
-      <!-- 输入框或录音提示 -->
-      <view 
-        class="input-field"
-        :class="{'recording-mode': isRecordingMode}"
-      >
-        <input 
-          v-if="!isRecordingMode"
+    </view> -->
+
+    <view class="sender-container">
+      <!-- 文本输入模式 -->
+      <view v-if="!isRecordingMode" class="text-input-mode">
+        <input
           class="text-input"
           v-model="inputText"
           placeholder="输入消息..."
           :disabled="isTyping || isLoading"
           @confirm="sendMessage"
           confirm-type="send"
-          @input="handleInput"
           @focus="handleInputFocus"
         />
-        <view v-else class="recording-input">
-          <view 
-            class="hold-to-speak-btn"
-            :class="{'recording': isActuallyRecording}"
-            @touchstart="startActualRecording"
-            @touchend="stopActualRecording"
-            @touchcancel="cancelActualRecording"
-            @touchmove="handleRecordingMove"
+
+        <view class="input-actions">
+          <!-- 麦克风按钮已隐藏 -->
+          <!-- <view class="action-icon-btn" @click="toggleRecordingMode">
+            <text class="icon">🎙️</text>
+          </view> -->
+          <view
+            class="send-btn"
+            :class="{'active': inputText.trim()}"
+            @click="sendMessage"
           >
-            <text class="hold-text">按住说话</text>
+            <text class="send-icon">发送</text>
           </view>
         </view>
       </view>
-      
-      <view class="input-actions">
-        <!-- 语音按钮 -->
-        <view 
-          class="voice-btn"
-          :class="{'recording': isRecordingMode}"
-          @click="toggleRecordingMode"
+
+      <!-- 语音输入模式 -->
+      <view v-else class="voice-input-mode">
+        <view
+          class="hold-to-speak"
+          :class="{'recording': isActuallyRecording}"
+          @touchstart="startActualRecording"
+          @touchend="stopActualRecording"
+          @touchcancel="cancelActualRecording"
+          @touchmove="handleRecordingMove"
         >
-          <text class="voice-icon">{{ isRecordingMode ? '🎤' : '🎙️' }}</text>
-        </view>
-        <!-- 发送按钮 -->
-        <view 
-          class="send-btn"
-          :class="{'active': inputText.trim() && !isRecordingMode}"
-          @click="sendMessage"
-        >
-          <text class="send-icon">📤</text>
+          <text class="speak-text">{{ isActuallyRecording ? '松手发送...' : '按住说话' }}</text>
         </view>
+
+        <!-- 键盘按钮已隐藏 -->
+        <!-- <view class="action-icon-btn" @click="toggleRecordingMode">
+          <text class="icon">⌨️</text>
+        </view> -->
       </view>
     </view>
-    
+
     <!-- 录音状态提示 -->
-    <view class="recording-tip" v-if="isActuallyRecording">
-      <text class="recording-text">{{ recordingTipText }}</text>
-      <view class="recording-wave" v-if="!isRecordingCancelled">
-        <view class="wave-bar" v-for="i in 5" :key="i"></view>
+    <view class="recording-overlay" v-if="isActuallyRecording">
+      <view class="recording-modal">
+        <text class="recording-tip">{{ recordingTipText }}</text>
+        <view class="recording-animation" v-if="!isRecordingCancelled">
+          <view class="wave" v-for="i in 5" :key="i"></view>
+        </view>
       </view>
     </view>
   </view>
-  
-  <!-- AI模板选择弹窗 -->
-  <view class="template-selector" v-if="showTemplateModal" @click="hideTemplateSelector">
-    <view class="template-modal" @click.stop>
-      <view class="template-header">
-        <text class="template-title">智能体选择</text>
+
+  <!-- 智能体选择弹窗 -->
+  <!-- <view class="modal-overlay" v-if="showTemplateModal" @click="hideTemplateSelector">
+    <view class="modal-content" @click.stop>
+      <view class="modal-header">
+        <text class="modal-title">选择智能体</text>
         <view class="close-btn" @click="hideTemplateSelector">
           <text class="close-icon">✕</text>
         </view>
       </view>
+
       <view class="template-list">
-        <view 
+        <view
           class="template-item"
           :class="{'active': currentTemplateId === template.templateId}"
           v-for="template in availableTemplates"
@@ -174,13 +182,13 @@
             <text class="template-name">{{ template.templateName }}</text>
             <text class="template-desc">{{ template.templateDesc }}</text>
           </view>
-          <view class="template-check" v-if="currentTemplateId === template.templateId">
+          <view class="check-mark" v-if="currentTemplateId === template.templateId">
             <text class="check-icon">✓</text>
           </view>
         </view>
       </view>
     </view>
-  </view>
+  </view> -->
 </template>
 
 <script setup>
@@ -188,7 +196,6 @@ import { ref, computed, onMounted, nextTick } from 'vue';
 import { useUserStore } from '@/stores/user.js';
 import { getCharacterById, getSmartResponse } from '@/utils/aiCharacters.js';
 import { chatAPI, voiceAPI, cleanText, configAPI } from '@/utils/api.js';
-import { debugAPI } from '@/utils/debug.js';
 
 // 状态管理
 const userStore = useUserStore();
@@ -197,37 +204,35 @@ 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 isRecordingCancelled = ref(false); // 录音是否被取消
-const recordingTipText = ref('松手发送，上移取消'); // 录音提示文本
-const touchStartY = ref(0); // 触摸开始时的Y坐标
-const isTouchMoving = ref(false); // 是否正在移动
-const isRecordingMode = ref(false); // 是否进入录音模式（第一步）
-const isActuallyRecording = ref(false); // 是否真正在录音（第二步）
-
-// AI模型配置
-const availableModels = ref([]); // 可用的AI模型列表
-const availableTemplates = ref([]); // 可用的模板列表
-const currentModelId = ref(null); // 当前选择的模型ID
-const currentTemplateId = ref(null); // 当前选择的模板ID
-
-// 模板选择弹窗
-const showTemplateModal = ref(false); // 是否显示模板选择弹窗
+const conversationId = ref(null);
+const isLoading = ref(false);
+const isLoggedIn = ref(false);
+const showBackButton = ref(true);
 
 // 录音相关
+const isRecordingMode = ref(false);
+const isActuallyRecording = ref(false);
+const isRecordingCancelled = ref(false);
+const recordingTipText = ref('松手发送，上移取消');
+const touchStartY = ref(0);
 const recorderManager = ref(null);
 const audioContext = ref(null);
 
-// AI角色配置已移至 utils/aiCharacters.js
+// AI配置
+const availableTemplates = ref([]);
+const currentModelId = ref(null);
+const currentTemplateId = ref(null);
+const showTemplateModal = ref(false);
+
+// 当前模板名称
+const currentTemplateName = computed(() => {
+  const template = availableTemplates.value.find(t => t.templateId === currentTemplateId.value);
+  return template?.templateName || '默认智能体';
+});
 
 // 生命周期
 onMounted(() => {
@@ -237,85 +242,82 @@ onMounted(() => {
 
 // 初始化页面
 const initPage = async () => {
-  // 检查登录状态
   checkLoginStatus();
-  
-  // 获取传递的参数
+
   const pages = getCurrentPages();
   const currentPage = pages[pages.length - 1];
   const options = currentPage.options || {};
-  
-  // 检查是否是蔚AI
-  if (options.characterId === 'wei-ai') {
-    // 设置蔚AI角色信息
+
+  if (!options.characterId && !options.roleId) {
+    showBackButton.value = false;
+  }
+
+  // 蔚AI
+  if (options.characterId === 'wei-ai' || !options.characterId) {
     currentCharacter.value = {
       id: 'wei-ai',
       name: options.characterName || '蔚AI',
       avatar: options.characterAvatar || '/static/logo.png',
       greeting: decodeURIComponent(options.introMessage || '你好！我是蔚AI，很高兴为您服务！')
     };
-    
-    // 获取AI模型配置
+
     await loadAIConfigs();
-    
-    // 创建新对话
     await createNewConversation('wei-ai');
-    
-    // 添加蔚AI的欢迎消息
     addMessage('ai', currentCharacter.value.greeting);
-    
-    // 如果未登录，添加提示消息
+
     if (!isLoggedIn.value) {
       addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
     }
-  } else if (options.roleId) {
-    // 处理从首页传递过来的AI角色信息
+  }
+  // AI角色
+  else if (options.roleId) {
     currentCharacter.value = {
       id: options.characterId,
       roleId: options.roleId,
       name: decodeURIComponent(options.roleName || 'AI角色'),
       avatar: decodeURIComponent(options.avatar || '/static/logo.png'),
       greeting: decodeURIComponent(options.greeting || '你好！很高兴认识你！'),
-      roleDesc: decodeURIComponent(options.roleDesc || '')
+      roleDesc: decodeURIComponent(options.roleDesc || ''),
+      modelId: options.modelId || null,
+      templateId: options.templateId || null,
+      ttsId: options.ttsId || null,
+      sttId: options.sttId || null,
+      temperature: options.temperature || null,
+      topP: options.topP || null
     };
-    
-    // 获取AI模型配置
+
     await loadAIConfigs();
-    
-    // 创建新对话，使用roleId作为会话标识
+
+    if (options.modelId) {
+      currentModelId.value = parseInt(options.modelId);
+    }
+    if (options.templateId) {
+      currentTemplateId.value = parseInt(options.templateId);
+    }
+
     await createNewConversation(options.roleId);
-    
-    // 添加角色的欢迎消息
     addMessage('ai', currentCharacter.value.greeting);
-    
-    // 如果未登录，添加提示消息
+
     if (!isLoggedIn.value) {
       addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
     }
-  } else {
-    // 原有的角色处理逻辑
+  }
+  // 默认角色
+  else {
     const characterId = options.characterId || 5;
     const character = getCharacterById(characterId);
     if (character) {
       currentCharacter.value = character;
-      
-      // 获取AI模型配置
       await loadAIConfigs();
-      
-      // 创建新对话
       await createNewConversation(characterId);
-      
-      // 添加欢迎消息
       addMessage('ai', character.greeting);
-      
-      // 如果未登录，添加提示消息
+
       if (!isLoggedIn.value) {
         addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
       }
     }
   }
-  
-  // 设置用户头像
+
   if (userStore.userInfo?.avatar) {
     userAvatar.value = userStore.userInfo.avatar;
   }
@@ -324,80 +326,28 @@ const initPage = async () => {
 // 加载AI配置
 const loadAIConfigs = async () => {
   try {
-    console.log('开始加载AI配置...');
-    
-    // 获取LLM模型配置
-    console.log('正在获取AI模型配置...');
-    const modelsResult = await configAPI.getModels();
-    console.log('模型配置API响应:', modelsResult);
-    
-    if (modelsResult.success) {
-      availableModels.value = modelsResult.data.data || modelsResult.data;
-      console.log('获取到AI模型配置:', availableModels.value);
-      
-      // 设置默认模型（如果有的话）
-      if (availableModels.value.length > 0) {
-        currentModelId.value = availableModels.value[0].configId;
-        console.log('设置默认模型ID:', currentModelId.value);
-      }
-    } else {
-      console.warn('获取AI模型配置失败:', modelsResult.error);
-      // 添加模拟数据用于测试
-      availableModels.value = [
-        { configId: 7, configName: 'GPT-4', configDesc: 'OpenAI GPT-4模型' },
-        { configId: 8, configName: 'GPT-3.5', configDesc: 'OpenAI GPT-3.5模型' }
-      ];
-      currentModelId.value = 10;
-      console.log('使用模拟AI模型配置');
-    }
-
-    // 获取模板配置
-    console.log('正在获取模板配置...');
     const templatesResult = await configAPI.getTemplates();
-    console.log('模板配置API响应:', templatesResult);
-    
+
     if (templatesResult.success) {
       availableTemplates.value = templatesResult.data.data?.list || templatesResult.data.data || templatesResult.data;
-      console.log('获取到模板配置:', availableTemplates.value);
-      
-      // 设置默认模板（如果有的话）
-      if (availableTemplates.value.length > 0) {
+
+      if (availableTemplates.value.length > 0 && !currentTemplateId.value) {
         currentTemplateId.value = availableTemplates.value[0].templateId;
-        console.log('设置默认模板ID:', currentTemplateId.value);
       }
     } else {
-      console.warn('获取模板配置失败:', templatesResult.error);
-      // 添加模拟数据用于测试
+      // 模拟数据
       availableTemplates.value = [
-        { templateId: 1, templateName: '默认AI模型', templateDesc: '在用户与AI角色对话时，这个智能体会记住用户的言语习惯，学习用户的表达方式，并逐渐适应个性化的交流风格，让每一次对话都更加自然流畅。' },
-        { templateId: 2, templateName: '1号AI模型', templateDesc: '在用户与AI角色对话时，这个智能体会记住用户的言语习惯，学习用户的表达方式，并逐渐适应个性化的交流风格，让每一次对话都更加自然流畅。' },
-        { templateId: 3, templateName: '2号AI模型', templateDesc: '在用户与AI角色对话时，这个智能体会记住用户的言语习惯，学习用户的表达方式，并逐渐适应个性化的交流风格，让每一次对话都更加自然流畅。' },
-        { templateId: 4, templateName: '3号AI模型', templateDesc: '在用户与AI角色对话时，这个智能体会记住用户的言语习惯，学习用户的表达方式，并逐渐适应个性化的交流风格，让每一次对话都更加自然流畅。' },
-        { templateId: 5, templateName: '4号AI模型', templateDesc: '在用户与AI角色对话时，这个智能体会记住用户的言语习惯，学习用户的表达方式，并逐渐适应个性化的交流风格，让每一次对话都更加自然流畅。' }
+        { templateId: 1, templateName: '默认AI模型', templateDesc: '在用户与AI角色对话时，这个智能体会记住用户的言语习惯。' },
+        { templateId: 2, templateName: '1号AI模型', templateDesc: '学习用户的表达方式，并逐渐适应个性化的交流风格。' }
       ];
-      currentTemplateId.value = 6;
-      console.log('使用模拟模板配置');
+      currentTemplateId.value = 1;
     }
-    
-    console.log('AI配置加载完成:', {
-      models: availableModels.value,
-      templates: availableTemplates.value,
-      currentModelId: currentModelId.value,
-      currentTemplateId: currentTemplateId.value
-    });
   } catch (error) {
     console.error('加载AI配置异常:', error);
-    // 添加模拟数据作为备用
-    availableModels.value = [
-      { configId: 7, configName: 'GPT-4', configDesc: 'OpenAI GPT-4模型' }
-    ];
     availableTemplates.value = [
-      { templateId: 1, templateName: '默认AI模型', templateDesc: '默认AI模型' },
-      { templateId: 2, templateName: '1号AI模型', templateDesc: '1号AI模型' }
+      { templateId: 1, templateName: '默认AI模型', templateDesc: '默认AI模型' }
     ];
-    currentModelId.value = 7;
     currentTemplateId.value = 1;
-    console.log('使用备用模拟配置');
   }
 };
 
@@ -406,44 +356,33 @@ 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);
-    // 只有在录音没有被取消的情况下才处理语音消息
     if (!isRecordingCancelled.value) {
       handleVoiceMessage(res.tempFilePath);
-    } else {
-      console.log('录音被取消，不处理语音消息');
     }
   });
-  
+
   recorderManager.value.onError((err) => {
     console.error('录音错误', err);
     uni.showToast({
       title: '录音失败',
       icon: 'none'
     });
-    isRecording.value = false;
+    isActuallyRecording.value = false;
   });
   // #endif
 };
@@ -452,14 +391,13 @@ const initRecorder = () => {
 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();
   });
@@ -476,20 +414,41 @@ const scrollToBottom = () => {
   });
 };
 
-// 发送文本消息
+// 延时工具
+const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+// 根据 & 分段，逐条展示 AI 回复
+const addSegmentedAIResponse = async (text) => {
+  if (!text || typeof text !== 'string') return;
+  // 使用 & 作为分隔符，按段落逐条展示
+  const segments = text
+    .split('&')
+    .map(s => s.trim())
+    .filter(Boolean);
+
+  if (segments.length === 0) {
+    addMessage('ai', text.trim());
+    return;
+  }
+
+  for (const seg of segments) {
+    addMessage('ai', seg);
+    // 简单的节奏控制：与长度相关，介于300-1200ms
+    const delay = Math.min(1200, Math.max(300, seg.length * 30));
+    await sleep(delay);
+  }
+};
+
+// 发送消息
 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);
@@ -505,73 +464,56 @@ const sendMessage = async () => {
 // 创建新对话
 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获取回复
+// 获取AI回复
 const getAIResponse = async (userMessage) => {
   try {
     isLoading.value = true;
-    
-    // 构建请求参数
+
     const requestParams = {
       message: userMessage,
       characterId: currentCharacter.value.id,
       conversationId: conversationId.value,
-      modelId: currentModelId.value, // 传入当前选择的模型ID
-      templateId: currentTemplateId.value // 传入当前选择的模板ID
+      modelId: 10,
+      templateId: 6
     };
-    
-    // 如果有roleId，使用roleId作为templateId
+
     if (currentCharacter.value.roleId) {
-      requestParams.templateId = currentCharacter.value.roleId;
-      console.log('使用AI角色ID:', currentCharacter.value.roleId);
-      console.log('当前角色信息:', currentCharacter.value);
-      console.log('请求参数:', requestParams);
+      if (currentCharacter.value.modelId) {
+        requestParams.modelId = currentCharacter.value.modelId;
+      }
+      if (currentCharacter.value.templateId) {
+        requestParams.templateId = currentCharacter.value.templateId;
+      } else {
+        requestParams.templateId = currentCharacter.value.roleId;
+      }
     }
-    
+
     const result = await chatAPI.syncChat(requestParams);
-    
+
     if (result.success) {
-      // API调用成功，直接使用处理后的数据
       const aiResponse = result.data;
-      console.log('✅ 成功获取AI回复:', aiResponse);
-      
-      // 添加AI回复到聊天界面
-      addMessage('ai', aiResponse);
-      
-      // 更新对话ID（如果后端返回了新的）
+      await addSegmentedAIResponse(aiResponse);
+
       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);
       const cleanedResponse = cleanText(fallbackResponse);
-      console.log('本地模拟原始回复:', fallbackResponse);
-      console.log('本地模拟清理后回复:', cleanedResponse);
-      addMessage('ai', cleanedResponse);
-      
-      // 根据是否匿名模式显示不同的提示
-      if (result.isAnonymous) {
-        // 未登录状态，不显示错误提示
-        console.log('未登录状态，使用本地模拟回复');
-      } else {
-        // 已登录但API失败
+      await addSegmentedAIResponse(cleanedResponse);
+
+      if (!result.isAnonymous) {
         uni.showToast({
           title: 'AI服务暂时不可用，使用本地回复',
           icon: 'none',
@@ -581,14 +523,10 @@ const getAIResponse = async (userMessage) => {
     }
   } catch (error) {
     console.error('AI API调用异常:', error);
-    
-    // 异常情况，使用本地模拟回复
     const fallbackResponse = getSmartResponse(currentCharacter.value, userMessage);
     const cleanedResponse = cleanText(fallbackResponse);
-    console.log('异常情况原始回复:', fallbackResponse);
-    console.log('异常情况清理后回复:', cleanedResponse);
-    addMessage('ai', cleanedResponse);
-    
+    await addSegmentedAIResponse(cleanedResponse);
+
     uni.showToast({
       title: '网络异常，使用本地回复',
       icon: 'none',
@@ -599,72 +537,47 @@ const getAIResponse = async (userMessage) => {
   }
 };
 
-// 模拟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 toggleRecordingMode = () => {
   if (isTyping.value) return;
-  
   isRecordingMode.value = !isRecordingMode.value;
-  
-  if (isRecordingMode.value) {
-    console.log('进入录音模式');
-    // 清空输入框
-    inputText.value = '';
-  } else {
-    console.log('退出录音模式');
-    // 如果正在录音，先停止
-    if (isActuallyRecording.value) {
-      stopActualRecording();
-    }
+
+  if (!isRecordingMode.value && isActuallyRecording.value) {
+    stopActualRecording();
   }
 };
 
-// 开始真正录音（第二步：按住说话）
+// 开始录音
 const startActualRecording = (e) => {
   if (isTyping.value || !isRecordingMode.value) return;
-  
-  console.log('开始真正录音');
+
   touchStartY.value = e.touches[0].clientY;
-  isTouchMoving.value = false;
   isRecordingCancelled.value = false;
   recordingTipText.value = '松手发送，上移取消';
-  
+
   // #ifdef MP-WEIXIN
-  // 先申请录音权限
   uni.authorize({
     scope: 'scope.record',
     success: () => {
       isActuallyRecording.value = true;
-      
       recorderManager.value.start({
-        duration: 60000, // 最长60秒
+        duration: 60000,
         sampleRate: 16000,
         numberOfChannels: 1,
         encodeBitRate: 96000,
-        format: 'aac'  // 微信小程序支持aac格式，后端会转换为wav
+        format: 'aac'
       });
     },
     fail: () => {
       uni.showModal({
         title: '需要录音权限',
-        content: '请在设置中开启录音权限，以便使用语音功能',
+        content: '请在设置中开启录音权限',
         showCancel: false
       });
     }
   });
   // #endif
-  
+
   // #ifndef MP-WEIXIN
   uni.showToast({
     title: '语音功能仅支持微信小程序',
@@ -673,33 +586,26 @@ const startActualRecording = (e) => {
   // #endif
 };
 
-// 停止真正录音
+// 停止录音
 const stopActualRecording = () => {
   if (!isActuallyRecording.value) return;
-  
-  console.log('停止真正录音');
-  
+
   // #ifdef MP-WEIXIN
   isActuallyRecording.value = false;
   isRecordingCancelled.value = false;
-  isTouchMoving.value = false;
   recorderManager.value.stop();
   // #endif
 };
 
-// 取消真正录音
+// 取消录音
 const cancelActualRecording = () => {
   if (!isActuallyRecording.value) return;
-  
-  console.log('取消真正录音');
-  
+
   // #ifdef MP-WEIXIN
   isActuallyRecording.value = false;
   isRecordingCancelled.value = true;
-  isTouchMoving.value = false;
   recorderManager.value.stop();
-  
-  // 显示取消提示
+
   uni.showToast({
     title: '录音已取消',
     icon: 'none',
@@ -713,9 +619,7 @@ const handleRecordingMove = (e) => {
   if (isActuallyRecording.value) {
     const currentY = e.touches[0].clientY;
     const deltaY = touchStartY.value - currentY;
-    isTouchMoving.value = true;
-    
-    // 如果向上移动超过50px，显示取消提示
+
     if (deltaY > 50) {
       isRecordingCancelled.value = true;
       recordingTipText.value = '松开取消录音';
@@ -723,135 +627,90 @@ const handleRecordingMove = (e) => {
       isRecordingCancelled.value = false;
       recordingTipText.value = '松手发送，上移取消';
     }
-    
-    console.log('录音中触摸移动，Y坐标:', currentY, '移动距离:', deltaY, '是否取消:', isRecordingCancelled.value);
   }
 };
 
 // 处理语音消息
 const handleVoiceMessage = async (filePath) => {
-  // 如果录音被取消，不处理语音消息
-  if (isRecordingCancelled.value) {
-    console.log('录音被取消，不处理语音消息');
-    return;
-  }
-  
-  // 添加用户语音消息
+  if (isRecordingCancelled.value) return;
+
   addMessage('user', '[语音消息]');
-  
-  // 显示正在处理
   isTyping.value = true;
-  
+
   try {
-    // 使用新的语音对话API（完整流程：语音识别 -> AI回复 -> 语音合成）
+    let effectiveModelId = currentModelId.value;
+    let effectiveTemplateId = currentTemplateId.value;
+
+    if (currentCharacter.value.roleId) {
+      if (currentCharacter.value.modelId) {
+        effectiveModelId = currentCharacter.value.modelId;
+      }
+      if (currentCharacter.value.templateId) {
+        effectiveTemplateId = currentCharacter.value.templateId;
+      } else {
+        effectiveTemplateId = currentCharacter.value.roleId;
+      }
+    }
+
     const voiceChatResult = await voiceAPI.voiceChat(filePath, {
-      modelId: currentModelId.value, // 使用当前选择的模型
-      templateId: currentTemplateId.value // 使用当前选择的模板
+      modelId: effectiveModelId,
+      templateId: effectiveTemplateId
     });
-    
+
     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回复的语音
+
+      await addSegmentedAIResponse(aiResponse);
+
       if (audioUrl) {
         await playVoiceResponse(aiResponse, audioUrl);
       }
     } else {
-      console.warn('语音对话失败，尝试使用上传音频文件接口:', voiceChatResult.error);
-      
-      // 降级处理：使用上传音频文件接口
       const uploadResult = await voiceAPI.uploadVoiceChat(filePath, {
-        modelId: undefined,
-        templateId: undefined
+        modelId: effectiveModelId,
+        templateId: effectiveTemplateId
       });
-      
+
       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语音回复
+
+        await addSegmentedAIResponse(aiResponse);
+
         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, '[语音消息]');
         const cleanedResponse = cleanText(fallbackResponse);
-        console.log('语音降级原始回复:', fallbackResponse);
-        console.log('语音降级清理后回复:', cleanedResponse);
-        addMessage('ai', cleanedResponse);
-        
-        // 显示提示
-        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
-          });
-        }
+        await addSegmentedAIResponse(cleanedResponse);
+
+        uni.showToast({
+          title: '语音处理失败，使用本地回复',
+          icon: 'none',
+          duration: 2000
+        });
       }
     }
   } catch (error) {
     console.error('处理语音消息失败:', error);
-    
-    // 异常情况，使用本地模拟回复
     const fallbackResponse = getSmartResponse(currentCharacter.value, '[语音消息]');
     const cleanedResponse = cleanText(fallbackResponse);
-    console.log('语音异常原始回复:', fallbackResponse);
-    console.log('语音异常清理后回复:', cleanedResponse);
-    addMessage('ai', cleanedResponse);
-    
+    await addSegmentedAIResponse(cleanedResponse);
+
     uni.showToast({
       title: '语音处理异常，使用本地回复',
       icon: 'none',
@@ -862,54 +721,41 @@ const handleVoiceMessage = async (filePath) => {
   }
 };
 
-// 播放语音回复
+// 播放语音
 const playVoiceResponse = async (text, audioUrl = null) => {
   // #ifdef MP-WEIXIN
   try {
     let finalAudioUrl = audioUrl;
-    
-    // 如果没有提供音频URL，则调用TTS API生成
+
     if (!finalAudioUrl) {
-      console.log('没有提供音频URL，调用TTS API生成');
       const ttsResult = await voiceAPI.textToSpeech(text, currentCharacter.value.voiceStyle);
-      
+
       if (ttsResult.success) {
         finalAudioUrl = ttsResult.data.audioUrl;
       } else {
-        console.warn('文本转语音失败:', ttsResult.error);
         uni.showToast({
           title: '语音合成失败',
           icon: 'none'
         });
         return;
       }
-    } else {
-      console.log('使用提供的音频URL:', finalAudioUrl);
     }
-    
-    // 销毁之前的音频实例
+
     if (audioContext.value) {
       audioContext.value.destroy();
     }
-    
-    // 创建音频上下文
+
     audioContext.value = uni.createInnerAudioContext();
     audioContext.value.src = finalAudioUrl;
-    
-    // 设置事件监听
+
     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({
@@ -917,10 +763,8 @@ const playVoiceResponse = async (text, audioUrl = null) => {
         icon: 'none'
       });
     });
-    
-    // 开始播放
+
     audioContext.value.play();
-    
   } catch (error) {
     console.error('语音播放异常:', error);
     uni.showToast({
@@ -929,9 +773,8 @@ const playVoiceResponse = async (text, audioUrl = null) => {
     });
   }
   // #endif
-  
+
   // #ifndef MP-WEIXIN
-  console.log('语音播放功能仅支持微信小程序');
   uni.showToast({
     title: '语音功能仅支持微信小程序',
     icon: 'none'
@@ -952,283 +795,322 @@ const hideTemplateSelector = () => {
 // 选择模板
 const selectTemplate = (template) => {
   currentTemplateId.value = template.templateId;
-  console.log('选择模板:', template.templateName, 'ID:', template.templateId);
-  
-  // 显示切换提示
+
   uni.showToast({
     title: `已切换到${template.templateName}`,
     icon: 'none',
     duration: 1500
   });
-  
-  // 关闭弹窗
+
   hideTemplateSelector();
 };
 
-// 处理输入框输入事件
-const handleInput = (e) => {
-  // 确保输入框可以正常输入
-  console.log('输入框输入:', e.detail.value);
-};
-
-// 处理输入框聚焦事件
+// 处理输入框聚焦
 const handleInputFocus = () => {
   console.log('输入框获得焦点');
 };
 
-
-
-// 处理模板按钮点击事件
-const handleTemplateClick = () => {
-  console.log('模板按钮被点击');
-  console.log('当前可用模板:', availableTemplates.value);
-  console.log('当前模板数量:', availableTemplates.value.length);
-  
-  if (availableTemplates.value.length === 0) {
-    console.log('没有可用模板，尝试重新加载配置...');
-    loadAIConfigs().then(() => {
-      if (availableTemplates.value.length > 0) {
-        showTemplateSelector();
-      } else {
-        uni.showToast({
-          title: '暂无可用模板',
-          icon: 'none'
-        });
-      }
-    });
-  } else {
-    showTemplateSelector();
-  }
-};
-
-// 返回上一页
+// 返回
 const goBack = () => {
   uni.navigateBack();
 };
 </script>
 
 <style scoped>
-/* 页面根元素样式 - 禁用页面滚动 */
+/* 页面容器 */
 page {
   height: 100vh;
   overflow: hidden;
+  background: linear-gradient(180deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);
 }
 
-/* 聊天页面样式 */
 .chat-container {
   width: 100vw;
   height: 100vh;
-  background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
-  position: fixed; /* 固定定位，防止页面滚动 */
+  background: linear-gradient(180deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  overflow: hidden; /* 禁用页面滚动 */
-  padding-top: calc(100rpx + env(safe-area-inset-top)); /* 为固定导航栏和状态栏留出空间 */
-  padding-bottom: 120rpx; /* 为固定输入区域留出空间 */
+  overflow: hidden;
+  padding-top: calc(100rpx + env(safe-area-inset-top));
+  padding-bottom: 200rpx;
 }
 
-/* 自定义导航栏 */
+/* 夜空装饰 */
+.night-sky-decoration {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.star {
+  position: absolute;
+  width: 6rpx;
+  height: 6rpx;
+  background: #f9e076;
+  border-radius: 50%;
+  animation: twinkle 2s infinite;
+  box-shadow: 0 0 10rpx #f9e076;
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
+}
+
+.star-1 { top: 10%; left: 15%; animation-delay: 0s; }
+.star-2 { top: 20%; left: 80%; animation-delay: 0.3s; }
+.star-3 { top: 30%; left: 45%; animation-delay: 0.6s; }
+.star-4 { top: 50%; left: 25%; animation-delay: 0.9s; }
+.star-5 { top: 60%; left: 70%; animation-delay: 1.2s; }
+.star-6 { top: 70%; left: 40%; animation-delay: 1.5s; }
+.star-7 { top: 15%; left: 60%; animation-delay: 0.4s; }
+.star-8 { top: 85%; left: 55%; animation-delay: 1.8s; }
+
+/* 导航栏 */
 .custom-navbar {
   height: 100rpx;
-  background: linear-gradient(135deg, rgba(26, 11, 46, 0.95) 0%, rgba(74, 30, 109, 0.95) 25%, rgba(107, 44, 156, 0.95) 50%, rgba(138, 43, 226, 0.95) 75%, rgba(75, 0, 130, 0.95) 100%);
-  backdrop-filter: blur(10px);
-  border-bottom: 1rpx solid rgba(251, 191, 36, 0.3);
+  background: rgba(26, 11, 46, 0.95);
+  backdrop-filter: blur(20rpx);
+  box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.3);
+  border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 24rpx;
+  padding: 0 32rpx;
   padding-top: env(safe-area-inset-top);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
-  font-weight: bold;
-  font-size: 32rpx;
-  letter-spacing: 2rpx;
 }
 
 .navbar-left {
   position: absolute;
   left: 24rpx;
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
   color: #f9e076;
   font-size: 28rpx;
   font-weight: 500;
-  transition: opacity 0.3s ease;
+  text-shadow: 0 0 10rpx rgba(249, 224, 118, 0.3);
 }
 
-.navbar-left:active {
-  opacity: 0.7;
+.back-icon {
+  font-size: 32rpx;
 }
 
 .navbar-center {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 12rpx;
+  gap: 16rpx;
+}
+
+.navbar-center.centered {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .character-avatar {
-  width: 56rpx;
-  height: 56rpx;
+  width: 64rpx;
+  height: 64rpx;
   border-radius: 50%;
-  border: 2rpx solid rgba(249, 224, 118, 0.4);
-  box-shadow: 0 0 8rpx rgba(249, 224, 118, 0.3);
+  border: 3rpx solid rgba(249, 224, 118, 0.3);
+  box-shadow: 0 4rpx 12rpx rgba(249, 224, 118, 0.2);
 }
 
 .character-name {
   font-size: 32rpx;
-  font-weight: bold;
-  color: #ffffff;
-  text-shadow: 0 0 10px rgba(249, 224, 118, 0.5);
+  font-weight: 600;
+  color: #f9e076;
+  text-shadow: 0 0 15rpx rgba(249, 224, 118, 0.4);
 }
 
 .navbar-right {
   position: absolute;
-  right: 24rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  right: 32rpx;
 }
 
 .status-dot {
-  width: 12rpx;
-  height: 12rpx;
+  width: 16rpx;
+  height: 16rpx;
   border-radius: 50%;
-  background: #94a3b8;
-  box-shadow: 0 0 4rpx rgba(148, 163, 184, 0.5);
+  background: rgba(249, 224, 118, 0.3);
 }
 
 .status-dot.online {
-  background: #10b981;
-  box-shadow: 0 0 8rpx rgba(16, 185, 129, 0.8);
-  animation: pulse-dot 2s infinite;
+  background: #4caf50;
+  box-shadow: 0 0 12rpx rgba(76, 175, 80, 0.8);
+  animation: pulse 2s infinite;
 }
 
-@keyframes pulse-dot {
+@keyframes pulse {
   0%, 100% {
     opacity: 1;
   }
   50% {
-    opacity: 0.5;
+    opacity: 0.6;
   }
 }
 
 /* 聊天消息区域 */
 .chat-messages {
-  height: calc(100vh - 100rpx - 120rpx - env(safe-area-inset-top)); /* 减去导航栏和底部输入区域的高度 */
-  padding: 16rpx 20rpx;
+  height: calc(100vh - 100rpx - 200rpx - env(safe-area-inset-top));
+  padding: 24rpx;
   overflow-y: auto;
 }
 
 .message-list {
   display: flex;
   flex-direction: column;
-  gap: 20rpx;
+  gap: 24rpx;
 }
 
-.message-item {
+.message-wrapper {
+  width: 100%;
+}
+
+/* 系统消息 */
+.system-message {
+  display: flex;
+  justify-content: center;
+  margin: 16rpx 0;
+}
+
+.system-text {
+  background: rgba(249, 224, 118, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1rpx solid rgba(249, 224, 118, 0.2);
+  color: rgba(249, 224, 118, 0.8);
+  padding: 12rpx 24rpx;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+  text-align: center;
+  max-width: 80%;
+  line-height: 1.5;
+}
+
+/* Bubble 样式 */
+.bubble-container {
   display: flex;
   align-items: flex-end;
   gap: 16rpx;
+  width: 100%;
 }
 
-.message-item.user {
+.bubble-container.user {
   flex-direction: row-reverse;
 }
 
-.message-avatar {
-  width: 70rpx;
-  height: 70rpx;
+.bubble-avatar {
+  width: 72rpx;
+  height: 72rpx;
   border-radius: 50%;
   overflow: hidden;
   flex-shrink: 0;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
 }
 
-.message-avatar image {
+.bubble-avatar image {
   width: 100%;
   height: 100%;
 }
 
-.message-content {
+.bubble-content {
   flex: 1;
   max-width: 70%;
 }
 
-.message-bubble {
-  padding: 16rpx 20rpx;
-  border-radius: 20rpx;
+.bubble {
+  padding: 20rpx 24rpx;
+  border-radius: 24rpx;
   position: relative;
   word-wrap: break-word;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
 }
 
-.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);
+.bubble.ai {
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.15) 0%, rgba(249, 224, 118, 0.08) 100%);
+  border: 1rpx solid rgba(249, 224, 118, 0.3);
+  color: #f9e076;
   border-bottom-left-radius: 8rpx;
 }
 
-.message-text {
+.bubble.user {
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  color: #1a0b2e;
+  border-bottom-right-radius: 8rpx;
+  box-shadow: 0 8rpx 24rpx rgba(249, 224, 118, 0.3);
+}
+
+.bubble-text {
   font-size: 28rpx;
-  line-height: 1.5;
+  line-height: 1.6;
   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 {
+.bubble-actions {
   display: flex;
-  align-items: center;
-  gap: 8rpx;
-  margin: 8rpx 0;
+  gap: 12rpx;
+  margin: 12rpx 0 8rpx 0;
 }
 
-.play-voice-btn {
-  width: 40rpx;
-  height: 40rpx;
+.action-btn {
+  width: 48rpx;
+  height: 48rpx;
   border-radius: 50%;
-  background: rgba(255, 123, 123, 0.1);
+  background: rgba(249, 224, 118, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s ease;
+  transition: all 0.3s;
 }
 
-.play-voice-btn:hover {
-  background: rgba(255, 123, 123, 0.2);
-  transform: scale(1.1);
+.action-btn:active {
+  background: rgba(249, 224, 118, 0.4);
+  transform: scale(0.95);
 }
 
-.play-icon {
+.action-icon {
+  font-size: 24rpx;
+}
+
+.bubble-time {
   font-size: 20rpx;
+  opacity: 0.6;
+  text-align: right;
 }
 
-/* 正在输入提示 */
+.bubble.ai .bubble-time {
+  text-align: left;
+}
+
+/* 正在输入 */
 .typing-indicator {
   display: flex;
   align-items: flex-end;
   gap: 16rpx;
 }
 
+.typing-bubble {
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.15) 0%, rgba(249, 224, 118, 0.08) 100%);
+  border: 1rpx solid rgba(249, 224, 118, 0.3);
+  padding: 20rpx 24rpx;
+  border-radius: 24rpx;
+  border-bottom-left-radius: 8rpx;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
+}
+
 .typing-dots {
   display: flex;
   gap: 8rpx;
@@ -1239,7 +1121,8 @@ page {
   width: 12rpx;
   height: 12rpx;
   border-radius: 50%;
-  background: #ff7b7b;
+  background: #f9e076;
+  box-shadow: 0 0 8rpx rgba(249, 224, 118, 0.5);
   animation: typing 1.4s infinite ease-in-out;
 }
 
@@ -1259,97 +1142,83 @@ page {
 
 /* 输入区域 */
 .input-area {
-  background: linear-gradient(135deg, rgba(26, 11, 46, 0.95) 0%, rgba(74, 30, 109, 0.95) 25%, rgba(107, 44, 156, 0.95) 50%, rgba(138, 43, 226, 0.95) 75%, rgba(75, 0, 130, 0.95) 100%);
-  backdrop-filter: blur(10px);
-  border-top: 1rpx solid rgba(251, 191, 36, 0.3);
-  padding: 16rpx 20rpx;
-  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
+  background: rgba(26, 11, 46, 0.95);
+  backdrop-filter: blur(20rpx);
+  border-top: 1rpx solid rgba(249, 224, 118, 0.1);
+  padding: 16rpx 24rpx;
+  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.3);
   z-index: 1000;
 }
 
-.input-container {
+.action-bar {
+  margin-bottom: 12rpx;
+}
+
+.template-selector-btn {
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
+  border: 2rpx solid rgba(249, 224, 118, 0.3);
+  border-radius: 16rpx;
+  padding: 12rpx 20rpx;
   display: flex;
   align-items: center;
   gap: 12rpx;
-  background: rgba(15, 23, 42, 0.8);
-  border-radius: 25rpx;
-  padding: 10rpx 16rpx;
-  border: 2rpx solid rgba(251, 191, 36, 0.3);
+  transition: all 0.3s;
 }
 
-/* 输入框容器 */
-.input-field {
-  flex: 1;
-  position: relative;
-  transition: all 0.3s ease;
-}
-
-.input-field.recording-mode {
-  background: rgba(251, 191, 36, 0.1);
-  border-radius: 20rpx;
-  border: 2rpx solid rgba(251, 191, 36, 0.3);
-}
-
-.text-input {
-  width: 100%;
-  font-size: 28rpx;
-  color: #ffffff;
-  background: transparent;
-  border: none;
-  outline: none;
-  padding: 12rpx 16rpx;
-}
-
-.text-input::placeholder {
-  color: #cbd5e1;
-}
-
-/* 录音模式输入框 */
-.recording-input {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 12rpx 16rpx;
-  min-height: 60rpx;
-}
-
-/* 按住说话按钮 */
-.hold-to-speak-btn {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(251, 191, 36, 0.1);
-  border: 2rpx solid rgba(251, 191, 36, 0.3);
-  border-radius: 20rpx;
-  transition: all 0.3s ease;
-  cursor: pointer;
-  user-select: none;
-}
-
-.hold-to-speak-btn.recording {
-  background: rgba(251, 191, 36, 0.2);
-  border-color: #fbbf24;
-  animation: pulse 1s infinite;
-}
-
-.hold-to-speak-btn:active {
-  background: rgba(251, 191, 36, 0.3);
+.template-selector-btn:active {
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.2) 0%, rgba(249, 224, 118, 0.1) 100%);
   transform: scale(0.98);
 }
 
-.hold-text {
+.template-icon {
   font-size: 28rpx;
-  color: #fbbf24;
-  font-weight: bold;
-  text-align: center;
+}
+
+.template-name {
+  flex: 1;
+  font-size: 26rpx;
+  color: #f9e076;
+  font-weight: 500;
+}
+
+.arrow-icon {
+  font-size: 32rpx;
+  color: #f9e076;
+}
+
+/* Sender 样式 */
+.sender-container {
+  background: rgba(249, 224, 118, 0.08);
+  border: 1rpx solid rgba(249, 224, 118, 0.2);
+  border-radius: 24rpx;
+  overflow: hidden;
+}
+
+.text-input-mode {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  padding: 8rpx 16rpx;
+}
+
+.text-input {
+  flex: 1;
+  font-size: 28rpx;
+  color: #f9e076;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 12rpx 0;
+  min-height: 48rpx;
+}
+
+.text-input::placeholder {
+  color: rgba(249, 224, 118, 0.5);
 }
 
 .input-actions {
@@ -1358,216 +1227,221 @@ page {
   gap: 12rpx;
 }
 
-.template-btn {
-  width: 55rpx;
-  height: 55rpx;
+.action-icon-btn {
+  width: 56rpx;
+  height: 56rpx;
   border-radius: 50%;
-  background: rgba(251, 191, 36, 0.2);
+  background: rgba(249, 224, 118, 0.15);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s ease;
-  flex-shrink: 0; /* 防止按钮被压缩 */
-  cursor: pointer;
-  user-select: none;
+  transition: all 0.3s;
 }
 
-.template-btn:active {
-  background: linear-gradient(135deg, #fbbf24, #f59e0b);
-  transform: scale(1.05);
-}
-
-.template-icon {
-  font-size: 24rpx;
-}
-
-.voice-btn {
-  width: 55rpx;
-  height: 55rpx;
-  border-radius: 50%;
-  background: rgba(251, 191, 36, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  z-index: 10;
-}
-
-.voice-btn.recording {
-  background: linear-gradient(135deg, #fbbf24, #f59e0b);
-  animation: pulse 1s infinite;
-}
-
-.voice-btn:active {
-  background: linear-gradient(135deg, #f59e0b, #d97706);
+.action-icon-btn:active {
+  background: rgba(249, 224, 118, 0.3);
   transform: scale(0.95);
 }
 
-.voice-icon {
+.icon {
   font-size: 28rpx;
 }
 
 .send-btn {
-  width: 55rpx;
-  height: 55rpx;
-  border-radius: 50%;
-  background: rgba(251, 191, 36, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease;
-  cursor: pointer;
-  user-select: none;
+  padding: 12rpx 24rpx;
+  border-radius: 20rpx;
+  background: rgba(249, 224, 118, 0.2);
+  font-size: 26rpx;
+  color: rgba(249, 224, 118, 0.6);
+  font-weight: 500;
+  transition: all 0.3s;
 }
 
 .send-btn.active {
-  background: linear-gradient(135deg, #fbbf24, #f59e0b);
-  transform: scale(1.1);
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  color: #1a0b2e;
+  box-shadow: 0 4rpx 12rpx rgba(249, 224, 118, 0.4);
+}
+
+.send-btn.active:active {
+  transform: scale(0.95);
 }
 
 .send-icon {
-  font-size: 24rpx;
-}
-
-/* 录音状态提示 */
-.recording-tip {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(0, 0, 0, 0.8);
-  color: #ffffff;
-  padding: 20rpx 40rpx;
-  border-radius: 20rpx;
-  text-align: center;
-  z-index: 2000;
-  backdrop-filter: blur(10px);
-  border: 2rpx solid rgba(251, 191, 36, 0.3);
-}
-
-.recording-text {
-  font-size: 28rpx;
-  font-weight: bold;
-  margin-bottom: 16rpx;
   display: block;
 }
 
-.recording-wave {
+/* 语音输入模式 */
+.voice-input-mode {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  padding: 12rpx 16rpx;
+}
+
+.hold-to-speak {
+  flex: 1;
+  background: rgba(249, 224, 118, 0.1);
+  border: 2rpx dashed rgba(249, 224, 118, 0.3);
+  border-radius: 16rpx;
+  padding: 20rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8rpx;
+  transition: all 0.3s;
 }
 
-.wave-bar {
-  width: 8rpx;
-  height: 20rpx;
-  background: linear-gradient(135deg, #fbbf24, #f59e0b);
-  border-radius: 4rpx;
-  animation: wave 1.2s infinite ease-in-out;
+.hold-to-speak.recording {
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  border-color: transparent;
+  animation: pulse-recording 1s infinite;
 }
 
-.wave-bar:nth-child(1) { animation-delay: -0.4s; }
-.wave-bar:nth-child(2) { animation-delay: -0.3s; }
-.wave-bar:nth-child(3) { animation-delay: -0.2s; }
-.wave-bar:nth-child(4) { animation-delay: -0.1s; }
-.wave-bar:nth-child(5) { animation-delay: 0s; }
+.speak-text {
+  font-size: 28rpx;
+  color: #f9e076;
+  font-weight: 500;
+}
 
-@keyframes wave {
-  0%, 40%, 100% {
-    transform: scaleY(0.4);
+.hold-to-speak.recording .speak-text {
+  color: #1a0b2e;
+}
+
+@keyframes pulse-recording {
+  0%, 100% {
+    transform: scale(1);
   }
-  20% {
-    transform: scaleY(1);
+  50% {
+    transform: scale(1.02);
   }
 }
 
-/* 系统消息样式 */
-.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: #fbbf24;
-  text-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
-}
-
-/* AI模板选择弹窗 */
-.template-selector {
+/* 录音提示 */
+.recording-overlay {
   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: 2000;
+  backdrop-filter: blur(4rpx);
 }
 
-.template-modal {
-  width: 80%;
-  max-width: 600rpx;
-  max-height: 80vh;
-  background: white;
-  border-radius: 20rpx;
-  overflow: hidden;
-  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
-}
-
-.template-header {
+.recording-modal {
+  background: rgba(26, 11, 46, 0.95);
+  backdrop-filter: blur(20rpx);
+  border: 2rpx solid rgba(249, 224, 118, 0.3);
+  padding: 48rpx;
+  border-radius: 32rpx;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  padding: 30rpx;
-  border-bottom: 1rpx solid #eee;
-  background: #f8f9fa;
+  gap: 24rpx;
+  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.5);
 }
 
-.template-title {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #333;
+.recording-tip {
+  font-size: 28rpx;
+  color: #f9e076;
+  font-weight: 500;
+  text-shadow: 0 0 10rpx rgba(249, 224, 118, 0.5);
 }
 
-.close-btn {
-  width: 50rpx;
-  height: 50rpx;
-  border-radius: 50%;
-  background: #f0f0f0;
+.recording-animation {
+  display: flex;
+  gap: 8rpx;
+  align-items: center;
+}
+
+.wave {
+  width: 6rpx;
+  height: 40rpx;
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  border-radius: 3rpx;
+  animation: wave 1.2s infinite ease-in-out;
+  box-shadow: 0 0 8rpx rgba(249, 224, 118, 0.5);
+}
+
+.wave:nth-child(1) { animation-delay: 0s; }
+.wave:nth-child(2) { animation-delay: 0.1s; }
+.wave:nth-child(3) { animation-delay: 0.2s; }
+.wave:nth-child(4) { animation-delay: 0.3s; }
+.wave:nth-child(5) { animation-delay: 0.4s; }
+
+@keyframes wave {
+  0%, 100% {
+    height: 40rpx;
+  }
+  50% {
+    height: 80rpx;
+  }
+}
+
+/* 模态框 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s ease;
+  z-index: 2000;
+  backdrop-filter: blur(8rpx);
+}
+
+.modal-content {
+  width: 86%;
+  max-width: 640rpx;
+  max-height: 80vh;
+  background: linear-gradient(135deg, rgba(26, 11, 46, 0.98) 0%, rgba(45, 27, 78, 0.98) 100%);
+  border: 2rpx solid rgba(249, 224, 118, 0.3);
+  border-radius: 32rpx;
+  overflow: hidden;
+  box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx;
+  border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.08) 0%, rgba(249, 224, 118, 0.03) 100%);
+}
+
+.modal-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #f9e076;
+  text-shadow: 0 0 15rpx rgba(249, 224, 118, 0.5);
+}
+
+.close-btn {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  background: rgba(249, 224, 118, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
 }
 
 .close-btn:active {
-  background: #e0e0e0;
+  background: rgba(249, 224, 118, 0.2);
   transform: scale(0.95);
 }
 
 .close-icon {
-  font-size: 24rpx;
-  color: #666;
+  font-size: 28rpx;
+  color: #f9e076;
 }
 
 .template-list {
@@ -1579,17 +1453,17 @@ page {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 30rpx;
-  border-bottom: 1rpx solid #f0f0f0;
-  transition: all 0.3s ease;
+  padding: 32rpx;
+  border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
+  transition: all 0.3s;
 }
 
 .template-item:active {
-  background: #f8f9fa;
+  background: rgba(249, 224, 118, 0.05);
 }
 
 .template-item.active {
-  background: rgba(255, 123, 123, 0.1);
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.15) 0%, rgba(249, 224, 118, 0.08) 100%);
 }
 
 .template-info {
@@ -1597,129 +1471,37 @@ page {
   display: flex;
   flex-direction: column;
   gap: 8rpx;
+  padding-right: 16rpx;
 }
 
-.template-name {
+.template-item .template-name {
   font-size: 28rpx;
-  font-weight: bold;
-  color: #333;
+  font-weight: 600;
+  color: #f9e076;
+  margin-bottom: 4rpx;
 }
 
 .template-desc {
   font-size: 24rpx;
-  color: #666;
-  line-height: 1.4;
+  color: rgba(249, 224, 118, 0.7);
+  line-height: 1.5;
 }
 
-.template-check {
-  width: 40rpx;
-  height: 40rpx;
+.check-mark {
+  width: 48rpx;
+  height: 48rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #ff7b7b, #ffb7b7);
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  box-shadow: 0 4rpx 12rpx rgba(249, 224, 118, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 
 .check-icon {
-  font-size: 20rpx;
-  color: white;
-  font-weight: bold;
-  margin-left: 8rpx;
-}
-
-/* 录音状态提示 */
-.recording-tip {
-  position: absolute;
-  top: -80rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(251, 191, 36, 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);
-  }
-}
-
-@keyframes star-rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* 响应式设计 */
-@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;
-  }
+  color: #1a0b2e;
+  font-weight: bold;
 }
 </style>
diff --git a/src/pages/chat/chat.vue.backup b/src/pages/chat/chat.vue.backup
new file mode 100644
index 0000000..635deac
--- /dev/null
+++ b/src/pages/chat/chat.vue.backup
@@ -0,0 +1,1790 @@
+<template>
+  <view class="chat-container">
+    <!-- 自定义导航栏 -->
+    <view class="custom-navbar">
+      <view class="navbar-left" @tap="goBack" v-if="showBackButton">← 返回</view>
+      <view class="navbar-center" :class="{'centered': !showBackButton}">
+        <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>
+      </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>
+  
+  <!-- 输入区域 - 移出主容器 -->
+  <view class="input-area">
+    <view class="input-container">
+      <!-- AI模板选择按钮 - 放在输入框左边 -->
+      <view 
+        class="template-btn"
+        @click="handleTemplateClick"
+        @tap="handleTemplateClick"
+      >
+        <text class="template-icon">🤖</text>
+      </view>
+      <!-- 输入框或录音提示 -->
+      <view 
+        class="input-field"
+        :class="{'recording-mode': isRecordingMode}"
+      >
+        <input 
+          v-if="!isRecordingMode"
+          class="text-input"
+          v-model="inputText"
+          placeholder="输入消息..."
+          :disabled="isTyping || isLoading"
+          @confirm="sendMessage"
+          confirm-type="send"
+          @input="handleInput"
+          @focus="handleInputFocus"
+        />
+        <view v-else class="recording-input">
+          <view 
+            class="hold-to-speak-btn"
+            :class="{'recording': isActuallyRecording}"
+            @touchstart="startActualRecording"
+            @touchend="stopActualRecording"
+            @touchcancel="cancelActualRecording"
+            @touchmove="handleRecordingMove"
+          >
+            <text class="hold-text">按住说话</text>
+          </view>
+        </view>
+      </view>
+      
+      <view class="input-actions">
+        <!-- 语音按钮 -->
+        <view 
+          class="voice-btn"
+          :class="{'recording': isRecordingMode}"
+          @click="toggleRecordingMode"
+        >
+          <text class="voice-icon">{{ isRecordingMode ? '🎤' : '🎙️' }}</text>
+        </view>
+        <!-- 发送按钮 -->
+        <view 
+          class="send-btn"
+          :class="{'active': inputText.trim() && !isRecordingMode}"
+          @click="sendMessage"
+        >
+          <text class="send-icon">📤</text>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 录音状态提示 -->
+    <view class="recording-tip" v-if="isActuallyRecording">
+      <text class="recording-text">{{ recordingTipText }}</text>
+      <view class="recording-wave" v-if="!isRecordingCancelled">
+        <view class="wave-bar" v-for="i in 5" :key="i"></view>
+      </view>
+    </view>
+  </view>
+  
+  <!-- AI模板选择弹窗 -->
+  <view class="template-selector" v-if="showTemplateModal" @click="hideTemplateSelector">
+    <view class="template-modal" @click.stop>
+      <view class="template-header">
+        <text class="template-title">智能体选择</text>
+        <view class="close-btn" @click="hideTemplateSelector">
+          <text class="close-icon">✕</text>
+        </view>
+      </view>
+      <view class="template-list">
+        <view 
+          class="template-item"
+          :class="{'active': currentTemplateId === template.templateId}"
+          v-for="template in availableTemplates"
+          :key="template.templateId"
+          @click="() => selectTemplate(template)"
+        >
+          <view class="template-info">
+            <text class="template-name">{{ template.templateName }}</text>
+            <text class="template-desc">{{ template.templateDesc }}</text>
+          </view>
+          <view class="template-check" v-if="currentTemplateId === template.templateId">
+            <text class="check-icon">✓</text>
+          </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, cleanText, configAPI } 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 showBackButton = ref(true); // 是否显示返回按钮
+
+// 录音相关状态
+const isRecordingCancelled = ref(false); // 录音是否被取消
+const recordingTipText = ref('松手发送，上移取消'); // 录音提示文本
+const touchStartY = ref(0); // 触摸开始时的Y坐标
+const isTouchMoving = ref(false); // 是否正在移动
+const isRecordingMode = ref(false); // 是否进入录音模式（第一步）
+const isActuallyRecording = ref(false); // 是否真正在录音（第二步）
+
+// AI模型配置
+const availableModels = ref([]); // 可用的AI模型列表
+const availableTemplates = ref([]); // 可用的模板列表
+const currentModelId = ref(null); // 当前选择的模型ID
+const currentTemplateId = ref(null); // 当前选择的模板ID
+
+// 模板选择弹窗
+const showTemplateModal = ref(false); // 是否显示模板选择弹窗
+
+// 录音相关
+const recorderManager = ref(null);
+const audioContext = ref(null);
+
+// AI角色配置已移至 utils/aiCharacters.js
+
+// 生命周期
+onMounted(() => {
+  initPage();
+  initRecorder();
+});
+
+// 初始化页面
+const initPage = async () => {
+  // 检查登录状态
+  checkLoginStatus();
+  
+  // 获取传递的参数
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1];
+  const options = currentPage.options || {};
+
+  // 如果没有任何参数，说明是从 tabBar 访问，不显示返回按钮
+  if (!options.characterId && !options.roleId) {
+    showBackButton.value = false;
+  }
+
+  // 检查是否是蔚AI（包括没有参数的情况，默认使用蔚AI）
+  if (options.characterId === 'wei-ai' || !options.characterId) {
+    // 设置蔚AI角色信息
+    currentCharacter.value = {
+      id: 'wei-ai',
+      name: options.characterName || '蔚AI',
+      avatar: options.characterAvatar || '/static/logo.png',
+      greeting: decodeURIComponent(options.introMessage || '你好！我是蔚AI，很高兴为您服务！')
+    };
+    
+    // 获取AI模型配置
+    await loadAIConfigs();
+    
+    // 创建新对话
+    await createNewConversation('wei-ai');
+    
+    // 添加蔚AI的欢迎消息
+    addMessage('ai', currentCharacter.value.greeting);
+    
+    // 如果未登录，添加提示消息
+    if (!isLoggedIn.value) {
+      addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
+    }
+  } else if (options.roleId) {
+    // 处理从首页传递过来的AI角色信息
+    currentCharacter.value = {
+      id: options.characterId,
+      roleId: options.roleId,
+      name: decodeURIComponent(options.roleName || 'AI角色'),
+      avatar: decodeURIComponent(options.avatar || '/static/logo.png'),
+      greeting: decodeURIComponent(options.greeting || '你好！很高兴认识你！'),
+      roleDesc: decodeURIComponent(options.roleDesc || ''),
+      // 保存角色的模型和模板配置
+      modelId: options.modelId || null,
+      templateId: options.templateId || null,
+      ttsId: options.ttsId || null,
+      sttId: options.sttId || null,
+      temperature: options.temperature || null,
+      topP: options.topP || null
+    };
+    
+    // 获取AI模型配置
+    await loadAIConfigs();
+    
+    // 如果角色有指定的模型和模板ID，使用角色的配置
+    if (options.modelId) {
+      currentModelId.value = parseInt(options.modelId);
+      console.log('使用角色指定的模型ID:', currentModelId.value);
+    }
+    if (options.templateId) {
+      currentTemplateId.value = parseInt(options.templateId);
+      console.log('使用角色指定的模板ID:', currentTemplateId.value);
+    }
+    
+    // 创建新对话，使用roleId作为会话标识
+    await createNewConversation(options.roleId);
+    
+    // 添加角色的欢迎消息
+    addMessage('ai', currentCharacter.value.greeting);
+    
+    // 如果未登录，添加提示消息
+    if (!isLoggedIn.value) {
+      addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
+    }
+  } else {
+    // 原有的角色处理逻辑
+    const characterId = options.characterId || 5;
+    const character = getCharacterById(characterId);
+    if (character) {
+      currentCharacter.value = character;
+      
+      // 获取AI模型配置
+      await loadAIConfigs();
+      
+      // 创建新对话
+      await createNewConversation(characterId);
+      
+      // 添加欢迎消息
+      addMessage('ai', character.greeting);
+      
+      // 如果未登录，添加提示消息
+      if (!isLoggedIn.value) {
+        addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
+      }
+    }
+  }
+  
+  // 设置用户头像
+  if (userStore.userInfo?.avatar) {
+    userAvatar.value = userStore.userInfo.avatar;
+  }
+};
+
+// 加载AI配置
+const loadAIConfigs = async () => {
+  try {
+    console.log('开始加载AI配置...');
+    
+    // 获取LLM模型配置
+    console.log('正在获取AI模型配置...');
+    const modelsResult = await configAPI.getModels();
+    console.log('模型配置API响应:', modelsResult);
+    
+    if (modelsResult.success) {
+      availableModels.value = modelsResult.data.data || modelsResult.data;
+      console.log('获取到AI模型配置:', availableModels.value);
+      
+      // 设置默认模型（如果有的话）
+      if (availableModels.value.length > 0) {
+        currentModelId.value = availableModels.value[0].configId;
+        console.log('设置默认模型ID:', currentModelId.value);
+      }
+    } else {
+      console.warn('获取AI模型配置失败:', modelsResult.error);
+      // 添加模拟数据用于测试
+      availableModels.value = [
+        { configId: 7, configName: 'GPT-4', configDesc: 'OpenAI GPT-4模型' },
+        { configId: 8, configName: 'GPT-3.5', configDesc: 'OpenAI GPT-3.5模型' }
+      ];
+      currentModelId.value = 10;
+      console.log('使用模拟AI模型配置');
+    }
+
+    // 获取模板配置
+    console.log('正在获取模板配置...');
+    const templatesResult = await configAPI.getTemplates();
+    console.log('模板配置API响应:', templatesResult);
+    
+    if (templatesResult.success) {
+      availableTemplates.value = templatesResult.data.data?.list || templatesResult.data.data || templatesResult.data;
+      console.log('获取到模板配置:', availableTemplates.value);
+      
+      // 设置默认模板（如果有的话）
+      if (availableTemplates.value.length > 0) {
+        currentTemplateId.value = availableTemplates.value[0].templateId;
+        console.log('设置默认模板ID:', currentTemplateId.value);
+      }
+    } else {
+      console.warn('获取模板配置失败:', templatesResult.error);
+      // 添加模拟数据用于测试
+      availableTemplates.value = [
+        { templateId: 1, templateName: '默认AI模型', templateDesc: '在用户与AI角色对话时，这个智能体会记住用户的言语习惯，学习用户的表达方式，并逐渐适应个性化的交流风格，让每一次对话都更加自然流畅。' },
+        { templateId: 2, templateName: '1号AI模型', templateDesc: '在用户与AI角色对话时，这个智能体会记住用户的言语习惯，学习用户的表达方式，并逐渐适应个性化的交流风格，让每一次对话都更加自然流畅。' },
+        { templateId: 3, templateName: '2号AI模型', templateDesc: '在用户与AI角色对话时，这个智能体会记住用户的言语习惯，学习用户的表达方式，并逐渐适应个性化的交流风格，让每一次对话都更加自然流畅。' },
+        { templateId: 4, templateName: '3号AI模型', templateDesc: '在用户与AI角色对话时，这个智能体会记住用户的言语习惯，学习用户的表达方式，并逐渐适应个性化的交流风格，让每一次对话都更加自然流畅。' },
+        { templateId: 5, templateName: '4号AI模型', templateDesc: '在用户与AI角色对话时，这个智能体会记住用户的言语习惯，学习用户的表达方式，并逐渐适应个性化的交流风格，让每一次对话都更加自然流畅。' }
+      ];
+      currentTemplateId.value = 6;
+      console.log('使用模拟模板配置');
+    }
+    
+    console.log('AI配置加载完成:', {
+      models: availableModels.value,
+      templates: availableTemplates.value,
+      currentModelId: currentModelId.value,
+      currentTemplateId: currentTemplateId.value
+    });
+  } catch (error) {
+    console.error('加载AI配置异常:', error);
+    // 添加模拟数据作为备用
+    availableModels.value = [
+      { configId: 7, configName: 'GPT-4', configDesc: 'OpenAI GPT-4模型' }
+    ];
+    availableTemplates.value = [
+      { templateId: 1, templateName: '默认AI模型', templateDesc: '默认AI模型' },
+      { templateId: 2, templateName: '1号AI模型', templateDesc: '1号AI模型' }
+    ];
+    currentModelId.value = 7;
+    currentTemplateId.value = 1;
+    console.log('使用备用模拟配置');
+  }
+};
+
+// 检查登录状态
+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);
+    // 只有在录音没有被取消的情况下才处理语音消息
+    if (!isRecordingCancelled.value) {
+      handleVoiceMessage(res.tempFilePath);
+    } else {
+      console.log('录音被取消，不处理语音消息');
+    }
+  });
+  
+  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 requestParams = {
+      message: userMessage,
+      characterId: currentCharacter.value.id,
+      conversationId: conversationId.value,
+      modelId: currentModelId.value, // 传入当前选择的模型ID
+      templateId: currentTemplateId.value // 传入当前选择的模板ID
+    };
+    
+    // 如果角色有roleId（从剧情页面传递过来的角色）
+    if (currentCharacter.value.roleId) {
+      // 优先使用角色指定的模型和模板ID
+      if (currentCharacter.value.modelId) {
+        requestParams.modelId = currentCharacter.value.modelId;
+      }
+      if (currentCharacter.value.templateId) {
+        requestParams.templateId = currentCharacter.value.templateId;
+      } else {
+        // 如果没有指定templateId，使用roleId作为templateId
+        requestParams.templateId = currentCharacter.value.roleId;
+      }
+      console.log('使用AI角色配置:', {
+        roleId: currentCharacter.value.roleId,
+        roleName: currentCharacter.value.name,
+        modelId: requestParams.modelId,
+        templateId: requestParams.templateId
+      });
+    }
+    
+    console.log('发送AI对话请求，参数:', requestParams);
+    
+    const result = await chatAPI.syncChat(requestParams);
+    
+    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);
+      const cleanedResponse = cleanText(fallbackResponse);
+      console.log('本地模拟原始回复:', fallbackResponse);
+      console.log('本地模拟清理后回复:', cleanedResponse);
+      addMessage('ai', cleanedResponse);
+      
+      // 根据是否匿名模式显示不同的提示
+      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);
+    const cleanedResponse = cleanText(fallbackResponse);
+    console.log('异常情况原始回复:', fallbackResponse);
+    console.log('异常情况清理后回复:', cleanedResponse);
+    addMessage('ai', cleanedResponse);
+    
+    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 toggleRecordingMode = () => {
+  if (isTyping.value) return;
+  
+  isRecordingMode.value = !isRecordingMode.value;
+  
+  if (isRecordingMode.value) {
+    console.log('进入录音模式');
+    // 清空输入框
+    inputText.value = '';
+  } else {
+    console.log('退出录音模式');
+    // 如果正在录音，先停止
+    if (isActuallyRecording.value) {
+      stopActualRecording();
+    }
+  }
+};
+
+// 开始真正录音（第二步：按住说话）
+const startActualRecording = (e) => {
+  if (isTyping.value || !isRecordingMode.value) return;
+  
+  console.log('开始真正录音');
+  touchStartY.value = e.touches[0].clientY;
+  isTouchMoving.value = false;
+  isRecordingCancelled.value = false;
+  recordingTipText.value = '松手发送，上移取消';
+  
+  // #ifdef MP-WEIXIN
+  // 先申请录音权限
+  uni.authorize({
+    scope: 'scope.record',
+    success: () => {
+      isActuallyRecording.value = true;
+      
+      recorderManager.value.start({
+        duration: 60000, // 最长60秒
+        sampleRate: 16000,
+        numberOfChannels: 1,
+        encodeBitRate: 96000,
+        format: 'aac'  // 微信小程序支持aac格式，后端会转换为wav
+      });
+    },
+    fail: () => {
+      uni.showModal({
+        title: '需要录音权限',
+        content: '请在设置中开启录音权限，以便使用语音功能',
+        showCancel: false
+      });
+    }
+  });
+  // #endif
+  
+  // #ifndef MP-WEIXIN
+  uni.showToast({
+    title: '语音功能仅支持微信小程序',
+    icon: 'none'
+  });
+  // #endif
+};
+
+// 停止真正录音
+const stopActualRecording = () => {
+  if (!isActuallyRecording.value) return;
+  
+  console.log('停止真正录音');
+  
+  // #ifdef MP-WEIXIN
+  isActuallyRecording.value = false;
+  isRecordingCancelled.value = false;
+  isTouchMoving.value = false;
+  recorderManager.value.stop();
+  // #endif
+};
+
+// 取消真正录音
+const cancelActualRecording = () => {
+  if (!isActuallyRecording.value) return;
+  
+  console.log('取消真正录音');
+  
+  // #ifdef MP-WEIXIN
+  isActuallyRecording.value = false;
+  isRecordingCancelled.value = true;
+  isTouchMoving.value = false;
+  recorderManager.value.stop();
+  
+  // 显示取消提示
+  uni.showToast({
+    title: '录音已取消',
+    icon: 'none',
+    duration: 1000
+  });
+  // #endif
+};
+
+// 处理录音移动
+const handleRecordingMove = (e) => {
+  if (isActuallyRecording.value) {
+    const currentY = e.touches[0].clientY;
+    const deltaY = touchStartY.value - currentY;
+    isTouchMoving.value = true;
+    
+    // 如果向上移动超过50px，显示取消提示
+    if (deltaY > 50) {
+      isRecordingCancelled.value = true;
+      recordingTipText.value = '松开取消录音';
+    } else {
+      isRecordingCancelled.value = false;
+      recordingTipText.value = '松手发送，上移取消';
+    }
+    
+    console.log('录音中触摸移动，Y坐标:', currentY, '移动距离:', deltaY, '是否取消:', isRecordingCancelled.value);
+  }
+};
+
+// 处理语音消息
+const handleVoiceMessage = async (filePath) => {
+  // 如果录音被取消，不处理语音消息
+  if (isRecordingCancelled.value) {
+    console.log('录音被取消，不处理语音消息');
+    return;
+  }
+  
+  // 添加用户语音消息
+  addMessage('user', '[语音消息]');
+  
+  // 显示正在处理
+  isTyping.value = true;
+  
+  try {
+    // 确定使用的模型和模板ID（优先使用角色配置）
+    let effectiveModelId = currentModelId.value;
+    let effectiveTemplateId = currentTemplateId.value;
+    
+    if (currentCharacter.value.roleId) {
+      // 如果是从剧情页面传递的角色，优先使用角色的配置
+      if (currentCharacter.value.modelId) {
+        effectiveModelId = currentCharacter.value.modelId;
+      }
+      if (currentCharacter.value.templateId) {
+        effectiveTemplateId = currentCharacter.value.templateId;
+      } else {
+        effectiveTemplateId = currentCharacter.value.roleId;
+      }
+    }
+    
+    console.log('语音对话使用的配置:', {
+      modelId: effectiveModelId,
+      templateId: effectiveTemplateId,
+      roleName: currentCharacter.value.name
+    });
+    
+    // 使用新的语音对话API（完整流程：语音识别 -> AI回复 -> 语音合成）
+    const voiceChatResult = await voiceAPI.voiceChat(filePath, {
+      modelId: effectiveModelId,
+      templateId: effectiveTemplateId
+    });
+    
+    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: effectiveModelId,
+        templateId: effectiveTemplateId
+      });
+      
+      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, '[语音消息]');
+        const cleanedResponse = cleanText(fallbackResponse);
+        console.log('语音降级原始回复:', fallbackResponse);
+        console.log('语音降级清理后回复:', cleanedResponse);
+        addMessage('ai', cleanedResponse);
+        
+        // 显示提示
+        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, '[语音消息]');
+    const cleanedResponse = cleanText(fallbackResponse);
+    console.log('语音异常原始回复:', fallbackResponse);
+    console.log('语音异常清理后回复:', cleanedResponse);
+    addMessage('ai', cleanedResponse);
+    
+    uni.showToast({
+      title: '语音处理异常，使用本地回复',
+      icon: 'none',
+      duration: 2000
+    });
+  } finally {
+    isTyping.value = false;
+  }
+};
+
+// 播放语音回复
+const playVoiceResponse = async (text, audioUrl = null) => {
+  // #ifdef MP-WEIXIN
+  try {
+    let finalAudioUrl = audioUrl;
+    
+    // 如果没有提供音频URL，则调用TTS API生成
+    if (!finalAudioUrl) {
+      console.log('没有提供音频URL，调用TTS API生成');
+      const ttsResult = await voiceAPI.textToSpeech(text, currentCharacter.value.voiceStyle);
+      
+      if (ttsResult.success) {
+        finalAudioUrl = ttsResult.data.audioUrl;
+      } else {
+        console.warn('文本转语音失败:', ttsResult.error);
+        uni.showToast({
+          title: '语音合成失败',
+          icon: 'none'
+        });
+        return;
+      }
+    } else {
+      console.log('使用提供的音频URL:', finalAudioUrl);
+    }
+    
+    // 销毁之前的音频实例
+    if (audioContext.value) {
+      audioContext.value.destroy();
+    }
+    
+    // 创建音频上下文
+    audioContext.value = uni.createInnerAudioContext();
+    audioContext.value.src = finalAudioUrl;
+    
+    // 设置事件监听
+    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();
+    
+  } catch (error) {
+    console.error('语音播放异常:', error);
+    uni.showToast({
+      title: '语音播放异常',
+      icon: 'none'
+    });
+  }
+  // #endif
+  
+  // #ifndef MP-WEIXIN
+  console.log('语音播放功能仅支持微信小程序');
+  uni.showToast({
+    title: '语音功能仅支持微信小程序',
+    icon: 'none'
+  });
+  // #endif
+};
+
+// 显示模板选择器
+const showTemplateSelector = () => {
+  showTemplateModal.value = true;
+};
+
+// 隐藏模板选择器
+const hideTemplateSelector = () => {
+  showTemplateModal.value = false;
+};
+
+// 选择模板
+const selectTemplate = (template) => {
+  currentTemplateId.value = template.templateId;
+  console.log('选择模板:', template.templateName, 'ID:', template.templateId);
+  
+  // 显示切换提示
+  uni.showToast({
+    title: `已切换到${template.templateName}`,
+    icon: 'none',
+    duration: 1500
+  });
+  
+  // 关闭弹窗
+  hideTemplateSelector();
+};
+
+// 处理输入框输入事件
+const handleInput = (e) => {
+  // 确保输入框可以正常输入
+  console.log('输入框输入:', e.detail.value);
+};
+
+// 处理输入框聚焦事件
+const handleInputFocus = () => {
+  console.log('输入框获得焦点');
+};
+
+
+
+// 处理模板按钮点击事件
+const handleTemplateClick = () => {
+  console.log('模板按钮被点击');
+  console.log('当前可用模板:', availableTemplates.value);
+  console.log('当前模板数量:', availableTemplates.value.length);
+  
+  if (availableTemplates.value.length === 0) {
+    console.log('没有可用模板，尝试重新加载配置...');
+    loadAIConfigs().then(() => {
+      if (availableTemplates.value.length > 0) {
+        showTemplateSelector();
+      } else {
+        uni.showToast({
+          title: '暂无可用模板',
+          icon: 'none'
+        });
+      }
+    });
+  } else {
+    showTemplateSelector();
+  }
+};
+
+// 返回上一页
+const goBack = () => {
+  uni.navigateBack();
+};
+</script>
+
+<style scoped>
+/* 页面根元素样式 - 禁用页面滚动 */
+page {
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* 聊天页面样式 */
+.chat-container {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
+  position: fixed; /* 固定定位，防止页面滚动 */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden; /* 禁用页面滚动 */
+  padding-top: calc(100rpx + env(safe-area-inset-top)); /* 为固定导航栏和状态栏留出空间 */
+  padding-bottom: 120rpx; /* 为固定输入区域留出空间 */
+}
+
+/* 自定义导航栏 */
+.custom-navbar {
+  height: 100rpx;
+  background: linear-gradient(135deg, rgba(26, 11, 46, 0.95) 0%, rgba(74, 30, 109, 0.95) 25%, rgba(107, 44, 156, 0.95) 50%, rgba(138, 43, 226, 0.95) 75%, rgba(75, 0, 130, 0.95) 100%);
+  backdrop-filter: blur(10px);
+  border-bottom: 1rpx solid rgba(251, 191, 36, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 24rpx;
+  padding-top: env(safe-area-inset-top);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  font-weight: bold;
+  font-size: 32rpx;
+  letter-spacing: 2rpx;
+}
+
+.navbar-left {
+  position: absolute;
+  left: 24rpx;
+  color: #f9e076;
+  font-size: 28rpx;
+  font-weight: 500;
+  transition: opacity 0.3s ease;
+}
+
+.navbar-left:active {
+  opacity: 0.7;
+}
+
+.navbar-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+}
+
+.navbar-center.centered {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.character-avatar {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  border: 2rpx solid rgba(249, 224, 118, 0.4);
+  box-shadow: 0 0 8rpx rgba(249, 224, 118, 0.3);
+}
+
+.character-name {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(249, 224, 118, 0.5);
+}
+
+.navbar-right {
+  position: absolute;
+  right: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: #94a3b8;
+  box-shadow: 0 0 4rpx rgba(148, 163, 184, 0.5);
+}
+
+.status-dot.online {
+  background: #10b981;
+  box-shadow: 0 0 8rpx rgba(16, 185, 129, 0.8);
+  animation: pulse-dot 2s infinite;
+}
+
+@keyframes pulse-dot {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* 聊天消息区域 */
+.chat-messages {
+  height: calc(100vh - 100rpx - 120rpx - env(safe-area-inset-top)); /* 减去导航栏和底部输入区域的高度 */
+  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: linear-gradient(135deg, rgba(26, 11, 46, 0.95) 0%, rgba(74, 30, 109, 0.95) 25%, rgba(107, 44, 156, 0.95) 50%, rgba(138, 43, 226, 0.95) 75%, rgba(75, 0, 130, 0.95) 100%);
+  backdrop-filter: blur(10px);
+  border-top: 1rpx solid rgba(251, 191, 36, 0.3);
+  padding: 16rpx 20rpx;
+  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}
+
+.input-container {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  background: rgba(15, 23, 42, 0.8);
+  border-radius: 25rpx;
+  padding: 10rpx 16rpx;
+  border: 2rpx solid rgba(251, 191, 36, 0.3);
+}
+
+/* 输入框容器 */
+.input-field {
+  flex: 1;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.input-field.recording-mode {
+  background: rgba(251, 191, 36, 0.1);
+  border-radius: 20rpx;
+  border: 2rpx solid rgba(251, 191, 36, 0.3);
+}
+
+.text-input {
+  width: 100%;
+  font-size: 28rpx;
+  color: #ffffff;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 12rpx 16rpx;
+}
+
+.text-input::placeholder {
+  color: #cbd5e1;
+}
+
+/* 录音模式输入框 */
+.recording-input {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12rpx 16rpx;
+  min-height: 60rpx;
+}
+
+/* 按住说话按钮 */
+.hold-to-speak-btn {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(251, 191, 36, 0.1);
+  border: 2rpx solid rgba(251, 191, 36, 0.3);
+  border-radius: 20rpx;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  user-select: none;
+}
+
+.hold-to-speak-btn.recording {
+  background: rgba(251, 191, 36, 0.2);
+  border-color: #fbbf24;
+  animation: pulse 1s infinite;
+}
+
+.hold-to-speak-btn:active {
+  background: rgba(251, 191, 36, 0.3);
+  transform: scale(0.98);
+}
+
+.hold-text {
+  font-size: 28rpx;
+  color: #fbbf24;
+  font-weight: bold;
+  text-align: center;
+}
+
+.input-actions {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.template-btn {
+  width: 55rpx;
+  height: 55rpx;
+  border-radius: 50%;
+  background: rgba(251, 191, 36, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  flex-shrink: 0; /* 防止按钮被压缩 */
+  cursor: pointer;
+  user-select: none;
+}
+
+.template-btn:active {
+  background: linear-gradient(135deg, #fbbf24, #f59e0b);
+  transform: scale(1.05);
+}
+
+.template-icon {
+  font-size: 24rpx;
+}
+
+.voice-btn {
+  width: 55rpx;
+  height: 55rpx;
+  border-radius: 50%;
+  background: rgba(251, 191, 36, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  z-index: 10;
+}
+
+.voice-btn.recording {
+  background: linear-gradient(135deg, #fbbf24, #f59e0b);
+  animation: pulse 1s infinite;
+}
+
+.voice-btn:active {
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+  transform: scale(0.95);
+}
+
+.voice-icon {
+  font-size: 28rpx;
+}
+
+.send-btn {
+  width: 55rpx;
+  height: 55rpx;
+  border-radius: 50%;
+  background: rgba(251, 191, 36, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  user-select: none;
+}
+
+.send-btn.active {
+  background: linear-gradient(135deg, #fbbf24, #f59e0b);
+  transform: scale(1.1);
+}
+
+.send-icon {
+  font-size: 24rpx;
+}
+
+/* 录音状态提示 */
+.recording-tip {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.8);
+  color: #ffffff;
+  padding: 20rpx 40rpx;
+  border-radius: 20rpx;
+  text-align: center;
+  z-index: 2000;
+  backdrop-filter: blur(10px);
+  border: 2rpx solid rgba(251, 191, 36, 0.3);
+}
+
+.recording-text {
+  font-size: 28rpx;
+  font-weight: bold;
+  margin-bottom: 16rpx;
+  display: block;
+}
+
+.recording-wave {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+}
+
+.wave-bar {
+  width: 8rpx;
+  height: 20rpx;
+  background: linear-gradient(135deg, #fbbf24, #f59e0b);
+  border-radius: 4rpx;
+  animation: wave 1.2s infinite ease-in-out;
+}
+
+.wave-bar:nth-child(1) { animation-delay: -0.4s; }
+.wave-bar:nth-child(2) { animation-delay: -0.3s; }
+.wave-bar:nth-child(3) { animation-delay: -0.2s; }
+.wave-bar:nth-child(4) { animation-delay: -0.1s; }
+.wave-bar:nth-child(5) { animation-delay: 0s; }
+
+@keyframes wave {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1);
+  }
+}
+
+/* 系统消息样式 */
+.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: #fbbf24;
+  text-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
+}
+
+/* AI模板选择弹窗 */
+.template-selector {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.template-modal {
+  width: 80%;
+  max-width: 600rpx;
+  max-height: 80vh;
+  background: white;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
+}
+
+.template-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #eee;
+  background: #f8f9fa;
+}
+
+.template-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.close-btn {
+  width: 50rpx;
+  height: 50rpx;
+  border-radius: 50%;
+  background: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.close-btn:active {
+  background: #e0e0e0;
+  transform: scale(0.95);
+}
+
+.close-icon {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.template-list {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.template-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  transition: all 0.3s ease;
+}
+
+.template-item:active {
+  background: #f8f9fa;
+}
+
+.template-item.active {
+  background: rgba(255, 123, 123, 0.1);
+}
+
+.template-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.template-name {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.template-desc {
+  font-size: 24rpx;
+  color: #666;
+  line-height: 1.4;
+}
+
+.template-check {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #ff7b7b, #ffb7b7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.check-icon {
+  font-size: 20rpx;
+  color: white;
+  font-weight: bold;
+  margin-left: 8rpx;
+}
+
+/* 录音状态提示 */
+.recording-tip {
+  position: absolute;
+  top: -80rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(251, 191, 36, 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);
+  }
+}
+
+@keyframes star-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* 响应式设计 */
+@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/device/index.vue b/src/pages/device/index.vue
new file mode 100644
index 0000000..aff083a
--- /dev/null
+++ b/src/pages/device/index.vue
@@ -0,0 +1,584 @@
+<template>
+  <view class="floral-container">
+    <!-- 夜空装饰背景 -->
+    <view class="night-sky-decoration">
+      <view class="star star-1"></view>
+      <view class="star star-2"></view>
+      <view class="star star-3"></view>
+      <view class="star star-4"></view>
+      <view class="star star-5"></view>
+      <view class="star star-6"></view>
+      <view class="star star-7"></view>
+      <view class="star star-8"></view>
+    </view>
+
+    <!-- 顶部自定义导航栏 -->
+    <view class="custom-navbar fixed-navbar">
+      <view class="navbar-stars">
+        <view class="navbar-star star-left"></view>
+        <view class="navbar-star star-right"></view>
+      </view>
+      <text class="navbar-title">我的设备</text>
+    </view>
+
+    <!-- 设备信息卡片 -->
+    <view class="device-card">
+      <view class="device-header">
+        <view class="device-icon" :class="{'connected': deviceConnected}">
+          {{ deviceConnected ? '🌟' : '⭕' }}
+        </view>
+        <view class="device-status">
+          <text class="status-text">{{ deviceConnected ? '已连接' : '未连接' }}</text>
+          <text class="status-indicator" :class="{'active': deviceConnected}"></text>
+        </view>
+      </view>
+
+      <view class="device-info">
+        <view class="info-row">
+          <text class="info-label">设备名称</text>
+          <text class="info-value">{{ deviceName }}</text>
+        </view>
+        <view class="info-row">
+          <text class="info-label">设备ID</text>
+          <text class="info-value">{{ deviceId }}</text>
+        </view>
+        <view class="info-row">
+          <text class="info-label">设备SN</text>
+          <text class="info-value">{{ deviceSN }}</text>
+        </view>
+        <view class="info-row" v-if="deviceConnected">
+          <text class="info-label">连接时间</text>
+          <text class="info-value">{{ connectTime }}</text>
+        </view>
+      </view>
+
+      <view class="device-actions">
+        <button
+          class="floral-btn"
+          :class="{'disconnect-btn': deviceConnected}"
+          @click="toggleConnection"
+        >
+          {{ deviceConnected ? '断开连接' : '连接设备' }}
+        </button>
+        <button
+          class="floral-btn outline refresh-btn"
+          @click="refreshDeviceStatus"
+        >
+          🔄 刷新状态
+        </button>
+      </view>
+    </view>
+
+    <!-- 未登录提示 -->
+    <view class="login-tip" v-if="!userStore.isLoggedIn">
+      <view class="tip-icon">🔐</view>
+      <text class="tip-text">请先登录以查看设备信息</text>
+      <button class="floral-btn small-btn" @click="goToLogin">去登录</button>
+    </view>
+
+    <!-- 设备功能列表 -->
+    <view class="feature-list" v-if="deviceConnected && userStore.isLoggedIn">
+      <view class="feature-title">设备功能</view>
+      <view class="feature-item">
+        <view class="feature-icon">📡</view>
+        <view class="feature-content">
+          <text class="feature-name">远程控制</text>
+          <text class="feature-desc">通过小程序远程控制设备</text>
+        </view>
+      </view>
+      <view class="feature-item">
+        <view class="feature-icon">🎤</view>
+        <view class="feature-content">
+          <text class="feature-name">语音交互</text>
+          <text class="feature-desc">与AI语音助手对话</text>
+        </view>
+      </view>
+      <view class="feature-item">
+        <view class="feature-icon">🔔</view>
+        <view class="feature-content">
+          <text class="feature-name">消息通知</text>
+          <text class="feature-desc">接收设备状态通知</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useUserStore } from '@/stores/user.js';
+
+// 状态管理
+const userStore = useUserStore();
+const deviceConnected = ref(false);
+const deviceName = ref('小智AI设备');
+const deviceSN = ref('未连接');
+const deviceId = ref('30:ed:a0:12:99:60');
+const connectTime = ref('');
+
+// 生命周期
+onMounted(() => {
+  userStore.init();
+  // refreshDeviceStatus(); // API已注释，不需要自动刷新
+});
+
+// 刷新设备状态
+const refreshDeviceStatus = () => {
+  if (!userStore.isLoggedIn) {
+    uni.showToast({
+      title: '请先登录',
+      icon: 'none'
+    });
+    return;
+  }
+
+  // 暂时注释掉API请求，使用本地模拟数据
+  uni.showToast({
+    title: '刷新成功（本地模拟）',
+    icon: 'success'
+  });
+
+  /* API请求已注释
+  uni.showLoading({
+    title: '获取设备状态...'
+  });
+
+  uni.request({
+    url: 'https://www.aixsy.com.cn/api/device/status',
+    method: 'GET',
+    header: {
+      'Authorization': userStore.token ? (userStore.token.startsWith('Bearer ') ? userStore.token : 'Bearer ' + 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';
+        if (deviceConnected.value) {
+          connectTime.value = data.connectTime || new Date().toLocaleString();
+        }
+        uni.showToast({
+          title: '刷新成功',
+          icon: 'success'
+        });
+      }
+    },
+    fail: (err) => {
+      console.error('获取设备状态失败:', err);
+      uni.showToast({
+        title: '刷新失败',
+        icon: 'none'
+      });
+    },
+    complete: () => {
+      uni.hideLoading();
+    }
+  });
+  */
+};
+
+// 连接/断开设备
+const toggleConnection = () => {
+  if (!userStore.isLoggedIn) {
+    uni.showToast({
+      title: '请先登录',
+      icon: 'none'
+    });
+    return;
+  }
+
+  // 暂时注释掉API请求，使用本地模拟数据
+  deviceConnected.value = !deviceConnected.value;
+
+  if (deviceConnected.value) {
+    connectTime.value = new Date().toLocaleString();
+    deviceSN.value = 'XZ' + Math.random().toString(36).substr(2, 8).toUpperCase();
+    uni.showToast({
+      title: '连接成功（本地模拟）',
+      icon: 'success'
+    });
+  } else {
+    connectTime.value = '';
+    deviceSN.value = '未连接';
+    uni.showToast({
+      title: '已断开连接（本地模拟）',
+      icon: 'success'
+    });
+  }
+
+  /* API请求已注释
+  uni.showLoading({
+    title: deviceConnected.value ? '断开连接中...' : '连接设备中...'
+  });
+
+  const token = userStore.token;
+  const requestData = {
+    deviceId: deviceId.value
+  };
+
+  uni.request({
+    url: `https://www.aixsy.com.cn/api/device/${deviceConnected.value ? 'disconnect' : 'connect'}`,
+    method: 'POST',
+    header: {
+      'Content-Type': 'application/json',
+      'Authorization': token ? (token.startsWith('Bearer ') ? token : 'Bearer ' + token) : ''
+    },
+    data: requestData,
+    success: (res) => {
+      console.log('设备操作成功:', res);
+      if (res.statusCode === 200) {
+        deviceConnected.value = !deviceConnected.value;
+
+        if (deviceConnected.value) {
+          connectTime.value = new Date().toLocaleString();
+          deviceSN.value = res.data.data?.sn || 'XZ' + Math.random().toString(36).substr(2, 8).toUpperCase();
+          uni.showToast({
+            title: '连接成功',
+            icon: 'success'
+          });
+        } else {
+          connectTime.value = '';
+          deviceSN.value = '未连接';
+          uni.showToast({
+            title: '已断开连接',
+            icon: 'success'
+          });
+        }
+      }
+    },
+    fail: (err) => {
+      console.error('设备操作失败:', err);
+      uni.showToast({
+        title: deviceConnected.value ? '断开失败' : '连接失败',
+        icon: 'none'
+      });
+    },
+    complete: () => {
+      uni.hideLoading();
+    }
+  });
+  */
+};
+
+// 去登录
+const goToLogin = () => {
+  uni.switchTab({
+    url: '/pages/mine/mine'
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.floral-container {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);
+  padding-bottom: 100rpx;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 夜空装饰 */
+.night-sky-decoration {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.star {
+  position: absolute;
+  width: 6rpx;
+  height: 6rpx;
+  background: #f9e076;
+  border-radius: 50%;
+  animation: twinkle 2s infinite;
+  box-shadow: 0 0 10rpx #f9e076;
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
+}
+
+.star-1 { top: 10%; left: 15%; animation-delay: 0s; }
+.star-2 { top: 20%; left: 80%; animation-delay: 0.3s; }
+.star-3 { top: 30%; left: 45%; animation-delay: 0.6s; }
+.star-4 { top: 50%; left: 25%; animation-delay: 0.9s; }
+.star-5 { top: 60%; left: 70%; animation-delay: 1.2s; }
+.star-6 { top: 70%; left: 40%; animation-delay: 1.5s; }
+.star-7 { top: 15%; left: 60%; animation-delay: 0.4s; }
+.star-8 { top: 85%; left: 55%; animation-delay: 1.8s; }
+
+/* 导航栏 */
+.custom-navbar {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 88rpx;
+  background: rgba(26, 11, 46, 0.95);
+  backdrop-filter: blur(20rpx);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 30rpx;
+  z-index: 1000;
+  border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
+}
+
+.navbar-stars {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.navbar-star {
+  position: absolute;
+  width: 8rpx;
+  height: 8rpx;
+  background: #f9e076;
+  border-radius: 50%;
+  box-shadow: 0 0 15rpx #f9e076;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.5; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.2); }
+}
+
+.star-left {
+  top: 50%;
+  left: 30rpx;
+  transform: translateY(-50%);
+}
+
+.star-right {
+  top: 50%;
+  right: 30rpx;
+  transform: translateY(-50%);
+}
+
+.navbar-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #f9e076;
+  text-shadow: 0 0 20rpx rgba(249, 224, 118, 0.5);
+}
+
+/* 设备卡片 */
+.device-card {
+  margin: 40rpx 30rpx;
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
+  border-radius: 30rpx;
+  padding: 40rpx;
+  border: 2rpx solid rgba(249, 224, 118, 0.2);
+  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
+  position: relative;
+  z-index: 1;
+}
+
+.device-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30rpx;
+  padding-bottom: 30rpx;
+  border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
+}
+
+.device-icon {
+  font-size: 80rpx;
+  margin-right: 30rpx;
+  transition: all 0.3s;
+}
+
+.device-icon.connected {
+  animation: rotate 2s infinite linear;
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.device-status {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+}
+
+.status-text {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #f9e076;
+}
+
+.status-indicator {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background: rgba(249, 224, 118, 0.3);
+}
+
+.status-indicator.active {
+  background: #4caf50;
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+.device-info {
+  margin-bottom: 30rpx;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid rgba(249, 224, 118, 0.05);
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  font-size: 28rpx;
+  color: rgba(249, 224, 118, 0.6);
+}
+
+.info-value {
+  font-size: 28rpx;
+  color: #f9e076;
+  font-weight: 500;
+}
+
+.device-actions {
+  display: flex;
+  gap: 20rpx;
+}
+
+.floral-btn {
+  flex: 1;
+  height: 80rpx;
+  line-height: 80rpx;
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  color: #1a0b2e;
+  font-weight: bold;
+  font-size: 28rpx;
+  border-radius: 40rpx;
+  border: none;
+  box-shadow: 0 8rpx 20rpx rgba(249, 224, 118, 0.3);
+  transition: all 0.3s;
+}
+
+.floral-btn:active {
+  transform: scale(0.95);
+  box-shadow: 0 4rpx 10rpx rgba(249, 224, 118, 0.3);
+}
+
+.disconnect-btn {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+  color: white;
+  box-shadow: 0 8rpx 20rpx rgba(255, 107, 107, 0.3);
+}
+
+.outline {
+  background: transparent;
+  color: #f9e076;
+  border: 2rpx solid #f9e076;
+  box-shadow: none;
+}
+
+.refresh-btn {
+  flex: 0 0 auto;
+  width: 180rpx;
+}
+
+/* 未登录提示 */
+.login-tip {
+  margin: 40rpx 30rpx;
+  padding: 60rpx 40rpx;
+  background: rgba(249, 224, 118, 0.05);
+  border-radius: 30rpx;
+  border: 2rpx dashed rgba(249, 224, 118, 0.3);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20rpx;
+  position: relative;
+  z-index: 1;
+}
+
+.tip-icon {
+  font-size: 80rpx;
+}
+
+.tip-text {
+  font-size: 28rpx;
+  color: rgba(249, 224, 118, 0.8);
+}
+
+.small-btn {
+  width: 200rpx;
+  margin-top: 20rpx;
+}
+
+/* 功能列表 */
+.feature-list {
+  margin: 40rpx 30rpx;
+  position: relative;
+  z-index: 1;
+}
+
+.feature-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #f9e076;
+  margin-bottom: 30rpx;
+  padding-left: 20rpx;
+  border-left: 6rpx solid #f9e076;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  gap: 30rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.08) 0%, rgba(249, 224, 118, 0.03) 100%);
+  border-radius: 20rpx;
+  border: 1rpx solid rgba(249, 224, 118, 0.1);
+}
+
+.feature-icon {
+  font-size: 60rpx;
+}
+
+.feature-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10rpx;
+}
+
+.feature-name {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #f9e076;
+}
+
+.feature-desc {
+  font-size: 24rpx;
+  color: rgba(249, 224, 118, 0.6);
+}
+</style>
diff --git a/src/pages/drama/index.vue b/src/pages/drama/index.vue
index d29eae3..2e3fc2e 100644
--- a/src/pages/drama/index.vue
+++ b/src/pages/drama/index.vue
@@ -1,14 +1,16 @@
 <template>
   <view class="floral-container">
-    <!-- 顶部自定义导航栏 -->
-    <view class="custom-navbar fixed-navbar">
-      <view class="navbar-left" @tap="goBack">← 返回</view>
-      <text class="navbar-title">选择剧情</text>
+    <!-- 自定义导航栏 -->
+    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
+      <view class="navbar-content">
+        <view class="navbar-title">剧情角色</view>
+      </view>
     </view>
 
     <!-- 可滚动的两列卡片区 -->
     <scroll-view
       class="scroll-container"
+      :style="{ marginTop: navBarHeight + 'px' }"
       scroll-y="true"
       :show-scrollbar="false"
     >
@@ -94,6 +96,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import { useUserStore } from '@/stores/user.js';
+import { roleAPI } from '@/utils/api.js';
 
 const userStore = useUserStore();
 const showLoginModal = ref(false);
@@ -102,84 +105,283 @@ const showLoginModal = ref(false);
 const showDetailModal = ref(false);
 const selectedItem = ref(null);
 
-// 数据：剧情列表
+// 状态栏高度适配
+const statusBarHeight = ref(0);
+const navBarHeight = ref(0);
+
+// 获取系统状态栏高度
+const getSystemInfo = () => {
+  const systemInfo = uni.getSystemInfoSync();
+  statusBarHeight.value = systemInfo.statusBarHeight || 0;
+  // 导航栏总高度 = 状态栏高度 + 导航栏内容高度（44px）
+  navBarHeight.value = statusBarHeight.value + 44;
+  console.log('状态栏高度:', statusBarHeight.value, '导航栏总高度:', navBarHeight.value);
+};
+
+// 数据：剧情列表（使用API请求获取真实数据）
+const dramaList = ref([]);
+
+/* ====== 以下为假数据（已注释，保留作为参考） ======
 const dramaList = ref([
-  { 
-    id: 1, 
-    cover: '/static/bailing.jpg', 
-    tag: '浪漫', 
-    title: '白领女友的温柔早安',
+  {
+    id: 1,
     roleId: 1,
-    roleName: '小何',
-    roleDesc: '台湾女孩，高情商智能助手',
-    avatar: '/static/bailing.jpg',
-    greeting: '你好～我是小何，一个高情商的台湾女孩，很高兴认识你！有什么想聊的吗？'
+    cover: '/static/characters/xiaozhi.png',
+    avatar: '/static/characters/xiaozhi.png',
+    tag: '浪漫',
+    title: '小智AI助手',
+    roleName: '小智AI助手',
+    roleDesc: '你好！我是小智，你的专属AI助手。我可以帮你解答问题、提供建议、陪你聊天。',
+    greeting: '你好！我是小智，很高兴认识你！',
+    modelId: 'gpt-3.5-turbo',
+    templateId: 'template-1',
+    ttsId: 'tts-1',
+    sttId: 'stt-1',
+    temperature: 0.7,
+    topP: 0.9
   },
-  { 
-    id: 2, 
-    cover: '/static/haomen.jpg', 
-    tag: '优雅', 
-    title: '豪门女主的秘密生活',
+  {
+    id: 2,
     roleId: 2,
-    roleName: '小于',
-    roleDesc: '咖啡店兼职店员，热情友好',
-    avatar: '/static/haomen.jpg',
-    greeting: '你好！我是小于，咖啡店的新店员，今天想喝点什么吗？'
+    cover: '/static/characters/sakura.png',
+    avatar: '/static/characters/sakura.png',
+    tag: '优雅',
+    title: '元气少女小樱',
+    roleName: '元气少女小樱',
+    roleDesc: '嘿！我是小樱，超级喜欢和大家聊天的元气少女！每天都充满活力。',
+    greeting: '你好！我是小樱，很高兴认识你！',
+    modelId: 'gpt-3.5-turbo',
+    templateId: 'template-2',
+    ttsId: 'tts-2',
+    sttId: 'stt-1',
+    temperature: 0.8,
+    topP: 0.9
   },
-  { 
-    id: 3, 
-    cover: '/static/waimai.jpg', 
-    tag: '活泼', 
-    title: '外卖小姐姐的贴心问候',
+  {
+    id: 3,
     roleId: 3,
-    roleName: '李老师',
-    roleDesc: '中学图书馆管理员，温文尔雅',
-    avatar: '/static/waimai.jpg',
-    greeting: '你好，我是李老师，图书馆管理员。有什么想了解的书吗？'
+    cover: '/static/characters/lina.png',
+    avatar: '/static/characters/lina.png',
+    tag: '活泼',
+    title: '温柔大姐姐琳娜',
+    roleName: '温柔大姐姐琳娜',
+    roleDesc: '你好呀，我是琳娜。如果你需要倾诉或者想要一些温暖的陪伴，随时都可以找我。',
+    greeting: '你好！我是琳娜，很高兴认识你！',
+    modelId: 'gpt-3.5-turbo',
+    templateId: 'template-3',
+    ttsId: 'tts-3',
+    sttId: 'stt-1',
+    temperature: 0.7,
+    topP: 0.9
   },
-  { 
-    id: 4, 
-    cover: '/static/tunvlang.jpg', 
-    tag: '深情', 
-    title: '因爱执著的少女',
+  {
+    id: 4,
     roleId: 4,
-    roleName: '小何',
-    roleDesc: '另一个小何角色',
-    avatar: '/static/tunvlang.jpg',
-    greeting: '你好～我是小何，很高兴为你服务！'
+    cover: '/static/characters/allen.png',
+    avatar: '/static/characters/allen.png',
+    tag: '深情',
+    title: '知识博士艾伦',
+    roleName: '知识博士艾伦',
+    roleDesc: '大家好，我是艾伦博士。拥有丰富的知识储备，擅长科学、历史、文学等各个领域。',
+    greeting: '你好！我是艾伦博士，很高兴认识你！',
+    modelId: 'gpt-3.5-turbo',
+    templateId: 'template-4',
+    ttsId: 'tts-4',
+    sttId: 'stt-1',
+    temperature: 0.6,
+    topP: 0.9
   },
-  // { 
-  //   id: 5, 
-  //   cover: '/static/logo.png', 
-  //   tag: '温暖', 
-  //   title: '邻家女孩的暖心故事',
-  //   roleId: 5,
-  //   roleName: '温衡',
-  //   roleDesc: '职场女上司，成熟强势',
-  //   avatar: '/static/logo.png',
-  //   greeting: '我是温衡，你的上司。今天的工作完成了吗？'
-  // },
-  // { 
-  //   id: 6, 
-  //   cover: '/static/logo.png', 
-  //   tag: '梦幻', 
-  //   title: '公主的浪漫邂逅',
-  //   roleId: 6,
-  //   roleName: '职场上司',
-  //   roleDesc: '另一个温衡角色',
-  //   avatar: '/static/logo.png',
-  //   greeting: '我是你的上司，有什么需要汇报的吗？'
-  // },
-  // { id: 7, cover: '/static/logo.png', tag: '治愈', title: '咖啡店的午后时光' },
-  // { id: 8, cover: '/static/logo.png', tag: '青春', title: '校园里的美好回忆' },
+  {
+    id: 5,
+    roleId: 5,
+    cover: '/static/characters/ajie.png',
+    avatar: '/static/characters/ajie.png',
+    tag: '温暖',
+    title: '搞笑达人阿杰',
+    roleName: '搞笑达人阿杰',
+    roleDesc: '哈喽！我是阿杰，专业逗乐20年！生活已经够累了，让我用段子和笑话给你的一天增添点乐趣吧。',
+    greeting: '你好！我是阿杰，很高兴认识你！',
+    modelId: 'gpt-3.5-turbo',
+    templateId: 'template-5',
+    ttsId: 'tts-5',
+    sttId: 'stt-1',
+    temperature: 0.9,
+    topP: 0.95
+  },
+  {
+    id: 6,
+    roleId: 6,
+    cover: '/static/characters/mike.png',
+    avatar: '/static/characters/mike.png',
+    tag: '梦幻',
+    title: '运动教练米克',
+    roleName: '运动教练米克',
+    roleDesc: '嘿！我是米克，你的私人运动教练。想要保持健康、塑造好身材吗？',
+    greeting: '你好！我是米克，很高兴认识你！',
+    modelId: 'gpt-3.5-turbo',
+    templateId: 'template-6',
+    ttsId: 'tts-6',
+    sttId: 'stt-1',
+    temperature: 0.7,
+    topP: 0.9
+  },
+  {
+    id: 7,
+    roleId: 7,
+    cover: '/static/characters/lily.png',
+    avatar: '/static/characters/lily.png',
+    tag: '治愈',
+    title: '心理咨询师莉莉',
+    roleName: '心理咨询师莉莉',
+    roleDesc: '你好，我是莉莉。作为一名心理咨询师，我擅长倾听和理解你的内心世界。',
+    greeting: '你好！我是莉莉，很高兴认识你！',
+    modelId: 'gpt-3.5-turbo',
+    templateId: 'template-7',
+    ttsId: 'tts-7',
+    sttId: 'stt-1',
+    temperature: 0.7,
+    topP: 0.9
+  },
+  {
+    id: 8,
+    roleId: 8,
+    cover: '/static/characters/meimei.png',
+    avatar: '/static/characters/meimei.png',
+    tag: '青春',
+    title: '美食家小美',
+    roleName: '美食家小美',
+    roleDesc: '嗨！我是小美，一个热爱美食的吃货！从家常菜到高级料理，从中餐到西餐，我都很在行哦。',
+    greeting: '你好！我是小美，很高兴认识你！',
+    modelId: 'gpt-3.5-turbo',
+    templateId: 'template-8',
+    ttsId: 'tts-8',
+    sttId: 'stt-1',
+    temperature: 0.8,
+    topP: 0.9
+  },
+  {
+    id: 9,
+    roleId: 9,
+    cover: '/static/characters/andy.png',
+    avatar: '/static/characters/andy.png',
+    tag: '浪漫',
+    title: '旅行达人安迪',
+    roleName: '旅行达人安迪',
+    roleDesc: '你好！我是安迪，走遍世界各地的旅行达人。我可以为你推荐最美的风景。',
+    greeting: '你好！我是安迪，很高兴认识你！',
+    modelId: 'gpt-3.5-turbo',
+    templateId: 'template-9',
+    ttsId: 'tts-9',
+    sttId: 'stt-1',
+    temperature: 0.7,
+    topP: 0.9
+  },
+  {
+    id: 10,
+    roleId: 10,
+    cover: '/static/characters/code.png',
+    avatar: '/static/characters/code.png',
+    tag: '优雅',
+    title: '程序员小码',
+    roleName: '程序员小码',
+    roleDesc: 'Hello World！我是小码，一名资深程序员。擅长各种编程语言和技术栈。',
+    greeting: 'Hello！我是小码，很高兴认识你！',
+    modelId: 'gpt-3.5-turbo',
+    templateId: 'template-10',
+    ttsId: 'tts-10',
+    sttId: 'stt-1',
+    temperature: 0.6,
+    topP: 0.9
+  }
 ]);
+====== 假数据结束 ====== */
 
 // 列数据拆分
 const leftColumnItems = computed(() => dramaList.value.filter((_, index) => index % 2 === 0));
 const rightColumnItems = computed(() => dramaList.value.filter((_, index) => index % 2 === 1));
 
+// 加载角色列表数据
+const loadDramaList = async () => {
+  try {
+    uni.showLoading({ title: '加载中...' });
+    console.log('开始加载角色列表...');
+
+    const result = await roleAPI.getRoles();
+    console.log('API返回结果:', result);
+
+    if (result.success) {
+      // 处理响应数据，兼容多种返回格式
+      let roles = [];
+
+      // 尝试从不同的路径提取角色列表数据
+      if (result.data && result.data.data && result.data.data.list) {
+        // 格式：{ data: { data: { list: [...] } } }
+        roles = result.data.data.list;
+      } else if (result.data && result.data.list) {
+        // 格式：{ data: { list: [...] } }
+        roles = result.data.list;
+      } else if (Array.isArray(result.data)) {
+        // 格式：{ data: [...] }
+        roles = result.data;
+      } else if (result.data && result.data.data && Array.isArray(result.data.data)) {
+        // 格式：{ data: { data: [...] } }
+        roles = result.data.data;
+      }
+
+      console.log('提取的角色数据:', roles);
+
+      // 映射数据到前端需要的格式
+      dramaList.value = roles.map(role => ({
+        id: role.roleId,
+        roleId: role.roleId,
+        cover: role.avatar || '/static/default-avatar.png',
+        avatar: role.avatar || '/static/default-avatar.png',
+        tag: role.tag || '角色',
+        title: role.roleName || '未命名角色',
+        roleName: role.roleName || '未命名角色',
+        roleDesc: role.roleDesc || '',
+        greeting: role.greeting || '你好！很高兴认识你！',
+        modelId: role.modelId || 'gpt-3.5-turbo',
+        modelName: role.modelName || '',
+        modelProvider: role.modelProvider || '',
+        templateId: role.templateId || role.roleId,
+        ttsId: role.ttsId || '',
+        ttsProvider: role.ttsProvider || '',
+        sttId: role.sttId || '',
+        temperature: role.temperature || 0.7,
+        topP: role.topP || 0.9,
+        voiceName: role.voiceName || '',
+        vadEnergyTh: role.vadEnergyTh || 0.01,
+        vadSilenceMs: role.vadSilenceMs || 1200,
+        vadSilenceTh: role.vadSilenceTh || 0.3,
+        vadSpeechTh: role.vadSpeechTh || 0.5
+      }));
+
+      console.log('角色列表加载成功，共', dramaList.value.length, '个角色');
+    } else {
+      console.error('获取角色列表失败:', result.error);
+      uni.showToast({
+        title: '加载失败，请重试',
+        icon: 'none'
+      });
+    }
+  } catch (error) {
+    console.error('加载角色列表异常:', error);
+    uni.showToast({
+      title: '加载异常，请重试',
+      icon: 'none'
+    });
+  } finally {
+    uni.hideLoading();
+  }
+};
+
 onMounted(() => {
+  getSystemInfo(); // 获取系统信息
   userStore.init();
+
+  // 调用 API 加载角色列表
+  loadDramaList();
 });
 
 // 方法
@@ -189,22 +391,29 @@ const handleUse = (item) => {
     return;
   }
   uni.showLoading({ title: '正在设置角色...' });
-  if (item.roleId) {
-    uni.hideLoading();
-    const params = {
-      characterId: item.id,
-      roleId: item.roleId,
-      roleName: item.roleName || item.title,
-      roleDesc: item.roleDesc,
-      avatar: item.avatar || item.cover,
-      greeting: item.greeting
-    };
-    const queryString = Object.keys(params).map(key => `${key}=${encodeURIComponent(params[key] || '')}`).join('&');
-    uni.navigateTo({ url: `/pages/chat/chat?${queryString}` });
-  } else {
-    uni.hideLoading();
-    uni.navigateTo({ url: `/pages/chat/chat?characterId=${item.id}` });
-  }
+  
+  // 构建完整的角色参数，包括模型和模板信息
+  const params = {
+    characterId: item.id,
+    roleId: item.roleId,
+    roleName: item.roleName || item.title,
+    roleDesc: item.roleDesc,
+    avatar: item.avatar || item.cover,
+    greeting: item.greeting,
+    modelId: item.modelId || '',        // 模型ID
+    templateId: item.templateId || '',  // 模板ID（使用roleId作为templateId）
+    ttsId: item.ttsId || '',            // TTS服务ID
+    sttId: item.sttId || '',            // STT服务ID
+    temperature: item.temperature || '',
+    topP: item.topP || ''
+  };
+  
+  const queryString = Object.keys(params)
+    .map(key => `${key}=${encodeURIComponent(params[key] || '')}`)
+    .join('&');
+    
+  uni.hideLoading();
+  uni.navigateTo({ url: `/pages/chat/chat?${queryString}` });
 };
 
 const showLoginTip = () => { showLoginModal.value = true; };
@@ -212,7 +421,6 @@ const showDetail = (item) => { selectedItem.value = item; showDetailModal.value
 const closeDetail = () => { showDetailModal.value = false; selectedItem.value = null; };
 const useFromDetail = () => { if (selectedItem.value) { const v = selectedItem.value; closeDetail(); handleUse(v); } };
 const goToLogin = () => { showLoginModal.value = false; uni.switchTab({ url: '/pages/mine/mine' }); };
-const goBack = () => { uni.navigateBack(); };
 </script>
 
 <style scoped>
@@ -223,47 +431,41 @@ const goBack = () => { uni.navigateBack(); };
   position: relative;
   overflow-x: hidden;
   padding-bottom: 120rpx;
-  padding-top: 100rpx;
   display: flex;
   flex-direction: column;
 }
 
-.fixed-navbar {
+/* 自定义导航栏 */
+.custom-navbar {
   position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
-  z-index: 1002;
+  width: 100%;
+  background: linear-gradient(135deg, rgba(26, 11, 46, 0.95) 0%, rgba(74, 30, 109, 0.95) 25%, rgba(107, 44, 156, 0.95) 50%, rgba(138, 43, 226, 0.95) 75%, rgba(75, 0, 130, 0.95) 100%);
+  backdrop-filter: blur(10px);
+  border-bottom: 1rpx solid rgba(251, 191, 36, 0.3);
+  z-index: 1000;
 }
 
-.custom-navbar {
-  height: 100rpx;
+.navbar-content {
+  height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, rgba(26, 11, 46, 0.95) 0%, rgba(74, 30, 109, 0.95) 25%, rgba(107, 44, 156, 0.95) 50%, rgba(138, 43, 226, 0.95) 75%, rgba(75, 0, 130, 0.95) 100%);
-  border-bottom: 1rpx solid rgba(251, 191, 36, 0.3);
-  font-weight: bold;
-  font-size: 32rpx;
-  position: relative;
-  color: #fff;
-}
-
-.navbar-left {
-  position: absolute;
-  left: 24rpx;
-  color: #f9e076;
-  font-size: 28rpx;
+  padding: 0 24rpx;
 }
 
 .navbar-title {
   color: #ffffff;
+  font-weight: bold;
+  font-size: 32rpx;
+  text-shadow: 0 0 10px rgba(249, 224, 118, 0.5);
 }
 
 .scroll-container {
   flex: 1;
   min-height: 0;
-  margin: 24rpx;
+  padding: 24rpx;
   border-radius: 20rpx;
 }
 
diff --git a/src/pages/splash/splash.vue b/src/pages/splash/splash.vue
index b132716..3fa6484 100644
--- a/src/pages/splash/splash.vue
+++ b/src/pages/splash/splash.vue
@@ -110,20 +110,17 @@ const skipToHome = () => {
   if (timer) {
     clearInterval(timer);
   }
-  
-  // 尝试使用reLaunch跳转
-  uni.reLaunch({
-    url: '/pages/index/index',
+
+  // 标记已显示过启动页
+  uni.setStorageSync('hasShownSplash', 'true');
+
+  // 跳转到 tabBar 首页（发现页）
+  uni.switchTab({
+    url: '/pages/drama/index',
     fail: () => {
-      // 如果reLaunch失败，尝试switchTab
-      uni.switchTab({
-        url: '/pages/index/index',
-        fail: () => {
-          // 如果switchTab也失败，使用redirectTo
-          uni.redirectTo({
-            url: '/pages/index/index'
-          });
-        }
+      // 如果 switchTab 失败，使用 reLaunch
+      uni.reLaunch({
+        url: '/pages/drama/index'
       });
     }
   });
diff --git a/src/utils/api.js b/src/utils/api.js
index df866c3..1fbc293 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -42,14 +42,14 @@ export const cleanText = (text) => {
     // 去除行首行尾空格
     .trim();
   
-  // 去除特殊字符（保留中文、英文、数字、标点符号）
-  cleaned = cleaned.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\s\.,;:!?()（）【】""''""''、，。！？；：]/g, '');
+  // 去除特殊字符（保留中文、英文、数字、标点符号，以及分隔符 &）
+  cleaned = cleaned.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\s\.,;:!?()（）【】""''""''、，。！？；：&]/g, '');
   
   return cleaned;
 };
 
 // 基础配置
-const BASE_URL = 'http://localhost:8091'; // 根据后端地址调整
+const BASE_URL = 'http://192.168.3.243:8091'; // 根据后端地址调整
 
 // 检查用户登录状态
 const checkLoginStatus = () => {
@@ -813,7 +813,7 @@ export const roleAPI = {
   getRoles: async () => {
     try {
       const response = await request({
-        url: '/api/role/query',
+        url: '/app/role/query',
         method: 'GET'
       });