From d45e556c20cae76709e6bf3381d61819f6786866 Mon Sep 17 00:00:00 2001
From: liqupan <liqupan@liqupan.cn>
Date: Tue, 4 Nov 2025 19:25:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BA=A4=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 AGENTS.md                       |  45 ++
 README.md                       |  55 ++
 logs/nginx.pid                  |   1 +
 project.config.json             |  19 +-
 project.private.config.json     |  26 +-
 src/pages.json                  |  32 +-
 src/pages/chat/chat.vue         | 989 ++++++++++++++++++++++++++------
 src/pages/create/create.vue     | 215 +++++--
 src/pages/drama/index.vue       | 387 +++++++++++++
 src/pages/index/index.vue       | 808 +++++++++++++++-----------
 src/pages/mine/mine.vue         | 304 +++++++---
 src/pages/recharge/history.vue  | 520 +++++++++++++++++
 src/pages/recharge/recharge.vue | 719 +++++++++++++++++++++++
 src/stores/user.js              |   6 +-
 src/utils/aiCharacters.js       |  51 +-
 src/utils/api.js                | 452 ++++++++++++++-
 前端交接文档.md                 | 211 +++++++
 背景/1.vue                      |  73 +++
 背景/2.vue                      | 141 +++++
 背景/3.vue                      |  64 +++
 20 files changed, 4441 insertions(+), 677 deletions(-)
 create mode 100644 AGENTS.md
 create mode 100644 README.md
 create mode 100644 logs/nginx.pid
 create mode 100644 src/pages/drama/index.vue
 create mode 100644 src/pages/recharge/history.vue
 create mode 100644 src/pages/recharge/recharge.vue
 create mode 100644 前端交接文档.md
 create mode 100644 背景/1.vue
 create mode 100644 背景/2.vue
 create mode 100644 背景/3.vue

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..beeeddf
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,45 @@
+# Repository Guidelines
+
+## Project Structure & Module Organization
+- Source: `src/` (entry `src/main.js`, app shell `src/App.vue`).
+- Pages: `src/pages/**` with Uni-App routing in `src/pages.json` (e.g., `pages/index/index.vue`).
+- UI Components: `src/components/` (reusable, app-agnostic).
+- State: `src/stores/` (Pinia stores).
+- Utilities: `src/utils/`; Styles: `src/styles/`, global `src/uni.scss`.
+- Assets: `src/static/`.
+- Build output: `dist/`; temp and logs: `temp/`, `logs/`.
+- Tooling: `vite.config.js`, `manifest.json`, `index.html`.
+
+## Build, Test, and Development Commands
+- Install: `npm install`
+- Dev (H5): `npm run dev:h5` — start Vite + Uni dev server.
+- Dev (Weixin Mini Program): `npm run dev:mp-weixin`
+- Build (H5): `npm run build:h5`
+- Build (Weixin Mini Program): `npm run build:mp-weixin`
+- Custom target: `npm run dev:custom -- -p <platform>` (e.g., `mp-alipay`).
+- Output is written to `dist/`.
+
+## Coding Style & Naming Conventions
+- Indentation: 2 spaces; trailing spaces trimmed.
+- Vue 3 SFCs: prefer `<script setup>` for new code; keep existing style consistent nearby.
+- Components: PascalCase filenames in `src/components/` (e.g., `UserCard.vue`).
+- Pages: lowercase directory + `index.vue` (e.g., `pages/chat/index.vue`).
+- JS naming: camelCase for variables/functions; PascalCase for classes; SCSS/CSS files kebab-case.
+- State: one Pinia store per domain in `src/stores/` (e.g., `useUserStore`).
+
+## Testing Guidelines
+- Automated tests are not configured. If adding, use `@dcloudio/uni-automator` and place specs under `tests/**/*.spec.{js,ts}`.
+- For changes, provide a manual test plan covering H5 and at least one mini-program target (e.g., Weixin).
+
+## Commit & Pull Request Guidelines
+- Commits: follow Conventional Commits where possible (e.g., `feat: add chat history panel`, `fix: debounce voice upload`).
+- PRs must include: purpose/summary, linked issues, screenshots or screen recordings for UI, test plan (platforms, steps), and any config changes.
+- Keep diffs focused; avoid noisy refactors in feature PRs.
+
+## Security & Configuration Tips
+- Do not commit secrets; prefer environment config via Vite (`import.meta.env`) and platform-specific secure storage.
+- `logs/` and `temp/` are ephemeral; keep them out of commits.
+
+## Agent-Specific Instructions
+- Respect structure and naming above; avoid file moves unless requested.
+- Scope changes to the smallest relevant area; update docs when paths or commands change.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..8f9a790
--- /dev/null
+++ b/README.md
@@ -0,0 +1,55 @@
+# 项目说明
+
+本项目是基于 Uni-App（Vue 3 + Vite）的多端前端应用，支持 H5 与多类小程序目标（如微信小程序）。项目采用 Pinia 管理状态，按“页面/组件/状态/工具”模块化组织，便于扩展与维护。
+
+## 架构概览
+- 技术栈：Vue 3、Pinia、Vite 5、Uni-App 3.x、vue-i18n。
+- 路由与页面：通过 `src/pages.json` 定义多端路由和 TabBar，页面文件位于 `src/pages/**`。
+- 状态管理：`src/stores/` 按领域拆分 Store（如 `useUserStore`）。
+- 样式与资源：全局样式 `src/uni.scss`，通用样式在 `src/styles/`，静态资源在 `src/static/`。
+- 关键入口：`src/main.js`（应用创建）、`src/App.vue`（全局生命周期与壳层）。
+- 构建配置：`vite.config.js`（插件/构建）、`manifest.json`（应用与平台配置）。
+
+目录结构示例：
+```
+src/
+  pages/ ...         # 业务页面（splash, index, mine, chat, recharge 等）
+  components/ ...    # 复用组件
+  stores/ ...        # Pinia stores
+  utils/ ...         # 工具函数
+  styles/ ...        # 通用样式
+  App.vue, main.js, pages.json, uni.scss
+```
+
+## 主要功能
+- 启动与协议：`pages/splash/splash`、`pages/agreement/agreement`。
+- 首页与我的：`pages/index/index`、`pages/mine/mine`。
+- 创作与脚本编辑：`pages/create/create`、`pages/script/editor`。
+- 语音与聊天：`pages/voice/clone`、`pages/chat/chat`。
+- 充值与记录：`pages/recharge/recharge`、`pages/recharge/history`。
+
+## 本地开发与构建
+- 安装依赖：
+```
+npm install
+```
+- 开发调试（H5）：
+```
+npm run dev:h5
+```
+- 开发调试（微信小程序）：
+```
+npm run dev:mp-weixin
+```
+- 生产构建（H5/微信小程序）：
+```
+npm run build:h5
+npm run build:mp-weixin
+```
+构建产物输出到 `dist/`。
+
+## 配置与环境
+- 平台与路由：`src/pages.json`；应用配置：`src/manifest.json`。
+- 环境变量：使用 `import.meta.env`（Vite），避免提交敏感信息。
+
+如需更详细的接口与需求，可参考仓库中的 `API接口文档.md` 与 `产品设计需求文档.md`。
diff --git a/logs/nginx.pid b/logs/nginx.pid
new file mode 100644
index 0000000..cc4d38a
--- /dev/null
+++ b/logs/nginx.pid
@@ -0,0 +1 @@
+34608
diff --git a/project.config.json b/project.config.json
index 12aa3a6..bbfdad4 100644
--- a/project.config.json
+++ b/project.config.json
@@ -1,5 +1,5 @@
 {
-    "appid": "wxff56c34ef9aceb62",
+    "appid": "wx7f35c6442d0694a9",
     "compileType": "miniprogram",
     "libVersion": "3.8.10",
     "packOptions": {
@@ -18,11 +18,24 @@
             "ignore": [],
             "disablePlugins": [],
             "outputPath": ""
-        }
+        },
+        "compileWorklet": false,
+        "uglifyFileName": false,
+        "uploadWithSourceMap": true,
+        "packNpmManually": false,
+        "minifyWXSS": true,
+        "minifyWXML": true,
+        "localPlugins": false,
+        "disableUseStrict": false,
+        "useCompilerPlugins": false,
+        "condition": false,
+        "swc": false,
+        "disableSWC": true
     },
     "condition": {},
     "editorSetting": {
         "tabIndent": "insertSpaces",
         "tabSize": 4
-    }
+    },
+    "simulatorPluginLibVersion": {}
 }
\ No newline at end of file
diff --git a/project.private.config.json b/project.private.config.json
index 76ecff9..6500624 100644
--- a/project.private.config.json
+++ b/project.private.config.json
@@ -1,7 +1,23 @@
 {
-    "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-    "projectname": "webUI",
-    "setting": {
-        "compileHotReLoad": true
-    }
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "webUI",
+  "setting": {
+    "compileHotReLoad": true,
+    "urlCheck": true,
+    "coverView": true,
+    "lazyloadPlaceholderEnable": false,
+    "skylineRenderEnable": false,
+    "preloadBackgroundData": false,
+    "autoAudits": false,
+    "useApiHook": true,
+    "showShadowRootInWxmlPanel": true,
+    "useStaticServer": false,
+    "useLanDebug": false,
+    "showES6CompileOption": false,
+    "checkInvalidKey": true,
+    "ignoreDevUnusedFiles": true,
+    "bigPackageSizeSupport": false
+  },
+  "libVersion": "3.8.10",
+  "condition": {}
 }
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index 99ebd05..1c447ba 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -14,7 +14,9 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationStyle": "custom"
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": false,
+				"disableScroll": false
 			}
 		},
 		{
@@ -35,6 +37,12 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/drama/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/voice/clone",
 			"style": {
@@ -56,6 +64,19 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/recharge/recharge",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/recharge/history",
+			"style": {
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": true
+			}
 		}
 	],
 	"globalStyle": {
@@ -65,14 +86,13 @@
 		"backgroundColor": "#F8F8F8"
 	},
 	"tabBar": {
-		"color": "#999999",
-		"selectedColor": "#ff9800",
-		"backgroundColor": "#ffffff",
-		"borderStyle": "black",
+		"color": "rgba(255, 255, 255, 0.5)",
+		"selectedColor": "#f9e076",
+		"backgroundColor": "rgba(26, 11, 46, 0.95)",
+		"borderStyle": "white",
 		"list": [
 			{
 				"pagePath": "pages/index/index",
-
 				"text": "首页"
 			},
 			{
diff --git a/src/pages/chat/chat.vue b/src/pages/chat/chat.vue
index 704bf16..df9f6d8 100644
--- a/src/pages/chat/chat.vue
+++ b/src/pages/chat/chat.vue
@@ -2,16 +2,13 @@
   <view class="chat-container">
     <!-- 自定义导航栏 -->
     <view class="custom-navbar">
-      <view class="navbar-left" @click="goBack">
-        <text class="back-icon">←</text>
-      </view>
+      <view class="navbar-left" @tap="goBack">← 返回</view>
       <view class="navbar-center">
         <image class="character-avatar" :src="currentCharacter.avatar" mode="aspectFill" />
         <text class="character-name">{{ currentCharacter.name }}</text>
       </view>
       <view class="navbar-right">
         <text class="status-dot" :class="{'online': isOnline}"></text>
-        <text class="login-status" v-if="!isLoggedIn">未登录</text>
       </view>
     </view>
 
@@ -37,7 +34,7 @@
               <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)">
+                  <view class="play-voice-btn" @click="() => playVoiceResponse(message.content)">
                     <text class="play-icon">🔊</text>
                   </view>
                 </view>
@@ -84,45 +81,102 @@
         </view>
       </view>
     </scroll-view>
-
-    <!-- 输入区域 -->
-    <view class="input-area">
-      <view class="input-container">
+  </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="isRecording || isTyping"
+          :disabled="isTyping || isLoading"
           @confirm="sendMessage"
           confirm-type="send"
+          @input="handleInput"
+          @focus="handleInputFocus"
         />
-        <view class="input-actions">
-          <!-- 语音按钮 -->
+        <view v-else class="recording-input">
           <view 
-            class="voice-btn"
-            :class="{'recording': isRecording}"
-            @touchstart="startRecording"
-            @touchend="stopRecording"
-            @touchcancel="cancelRecording"
+            class="hold-to-speak-btn"
+            :class="{'recording': isActuallyRecording}"
+            @touchstart="startActualRecording"
+            @touchend="stopActualRecording"
+            @touchcancel="cancelActualRecording"
+            @touchmove="handleRecordingMove"
           >
-            <text class="voice-icon">{{ isRecording ? '🎤' : '🎙️' }}</text>
-          </view>
-          <!-- 发送按钮 -->
-          <view 
-            class="send-btn"
-            :class="{'active': inputText.trim()}"
-            @click="sendMessage"
-          >
-            <text class="send-icon">📤</text>
+            <text class="hold-text">按住说话</text>
           </view>
         </view>
       </view>
       
-      <!-- 录音状态提示 -->
-      <view class="recording-tip" v-if="isRecording">
-        <text class="recording-text">🎤 正在录音，松开结束</text>
-        <view class="recording-wave">
-          <view class="wave-bar" v-for="i in 5" :key="i"></view>
+      <view 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>
@@ -133,7 +187,7 @@
 import { ref, computed, onMounted, nextTick } from 'vue';
 import { useUserStore } from '@/stores/user.js';
 import { getCharacterById, getSmartResponse } from '@/utils/aiCharacters.js';
-import { chatAPI, voiceAPI } from '@/utils/api.js';
+import { chatAPI, voiceAPI, cleanText, configAPI } from '@/utils/api.js';
 import { debugAPI } from '@/utils/debug.js';
 
 // 状态管理
@@ -152,6 +206,23 @@ 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 recorderManager = ref(null);
 const audioContext = ref(null);
@@ -169,26 +240,79 @@ const initPage = async () => {
   // 检查登录状态
   checkLoginStatus();
   
-  // 获取传递的角色ID
+  // 获取传递的参数
   const pages = getCurrentPages();
   const currentPage = pages[pages.length - 1];
-  const characterId = currentPage.options?.characterId || 5;
+  const options = currentPage.options || {};
   
-  // 设置当前角色
-  const character = getCharacterById(characterId);
-  if (character) {
-    currentCharacter.value = character;
+  // 检查是否是蔚AI
+  if (options.characterId === 'wei-ai') {
+    // 设置蔚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(characterId);
+    await createNewConversation('wei-ai');
     
-    // 添加欢迎消息
-    addMessage('ai', character.greeting);
+    // 添加蔚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 || '')
+    };
+    
+    // 获取AI模型配置
+    await loadAIConfigs();
+    
+    // 创建新对话，使用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对话功能。');
+      }
+    }
   }
   
   // 设置用户头像
@@ -197,6 +321,86 @@ 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) {
+        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');
@@ -225,7 +429,12 @@ const initRecorder = () => {
   
   recorderManager.value.onStop((res) => {
     console.log('录音结束', res);
-    handleVoiceMessage(res.tempFilePath);
+    // 只有在录音没有被取消的情况下才处理语音消息
+    if (!isRecordingCancelled.value) {
+      handleVoiceMessage(res.tempFilePath);
+    } else {
+      console.log('录音被取消，不处理语音消息');
+    }
   });
   
   recorderManager.value.onError((err) => {
@@ -296,6 +505,7 @@ const sendMessage = async () => {
 // 创建新对话
 const createNewConversation = async (characterId) => {
   try {
+    
     const result = await chatAPI.createConversation(characterId);
     if (result.success) {
       conversationId.value = result.data.conversationId;
@@ -316,11 +526,24 @@ const getAIResponse = async (userMessage) => {
   try {
     isLoading.value = true;
     
-    const result = await chatAPI.syncChat({
+    // 构建请求参数
+    const requestParams = {
       message: userMessage,
       characterId: currentCharacter.value.id,
-      conversationId: conversationId.value
-    });
+      conversationId: conversationId.value,
+      modelId: currentModelId.value, // 传入当前选择的模型ID
+      templateId: currentTemplateId.value // 传入当前选择的模板ID
+    };
+    
+    // 如果有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);
+    }
+    
+    const result = await chatAPI.syncChat(requestParams);
     
     if (result.success) {
       // API调用成功，直接使用处理后的数据
@@ -338,7 +561,10 @@ const getAIResponse = async (userMessage) => {
       // API调用失败，使用本地模拟回复
       console.warn('AI API调用失败，使用本地模拟回复:', result.error);
       const fallbackResponse = getSmartResponse(currentCharacter.value, userMessage);
-      addMessage('ai', fallbackResponse);
+      const cleanedResponse = cleanText(fallbackResponse);
+      console.log('本地模拟原始回复:', fallbackResponse);
+      console.log('本地模拟清理后回复:', cleanedResponse);
+      addMessage('ai', cleanedResponse);
       
       // 根据是否匿名模式显示不同的提示
       if (result.isAnonymous) {
@@ -358,7 +584,10 @@ const getAIResponse = async (userMessage) => {
     
     // 异常情况，使用本地模拟回复
     const fallbackResponse = getSmartResponse(currentCharacter.value, userMessage);
-    addMessage('ai', fallbackResponse);
+    const cleanedResponse = cleanText(fallbackResponse);
+    console.log('异常情况原始回复:', fallbackResponse);
+    console.log('异常情况清理后回复:', cleanedResponse);
+    addMessage('ai', cleanedResponse);
     
     uni.showToast({
       title: '网络异常，使用本地回复',
@@ -382,23 +611,48 @@ const simulateAIResponse = (userMessage) => {
   });
 };
 
-// 开始录音
-const startRecording = () => {
+// 切换录音模式（第一步：进入录音模式）
+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: () => {
-      isRecording.value = true;
+      isActuallyRecording.value = true;
       
       recorderManager.value.start({
         duration: 60000, // 最长60秒
         sampleRate: 16000,
         numberOfChannels: 1,
         encodeBitRate: 96000,
-        format: 'mp3'
+        format: 'aac'  // 微信小程序支持aac格式，后端会转换为wav
       });
     },
     fail: () => {
@@ -419,28 +673,69 @@ const startRecording = () => {
   // #endif
 };
 
-// 停止录音
-const stopRecording = () => {
-  if (!isRecording.value) return;
+// 停止真正录音
+const stopActualRecording = () => {
+  if (!isActuallyRecording.value) return;
+  
+  console.log('停止真正录音');
   
   // #ifdef MP-WEIXIN
-  isRecording.value = false;
+  isActuallyRecording.value = false;
+  isRecordingCancelled.value = false;
+  isTouchMoving.value = false;
   recorderManager.value.stop();
   // #endif
 };
 
-// 取消录音
-const cancelRecording = () => {
-  if (!isRecording.value) return;
+// 取消真正录音
+const cancelActualRecording = () => {
+  if (!isActuallyRecording.value) return;
+  
+  console.log('取消真正录音');
   
   // #ifdef MP-WEIXIN
-  isRecording.value = false;
+  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', '[语音消息]');
   
@@ -450,8 +745,8 @@ const handleVoiceMessage = async (filePath) => {
   try {
     // 使用新的语音对话API（完整流程：语音识别 -> AI回复 -> 语音合成）
     const voiceChatResult = await voiceAPI.voiceChat(filePath, {
-      modelId: null, // 使用默认模型
-      templateId: null // 使用默认模板
+      modelId: currentModelId.value, // 使用当前选择的模型
+      templateId: currentTemplateId.value // 使用当前选择的模板
     });
     
     if (voiceChatResult.success) {
@@ -478,8 +773,8 @@ const handleVoiceMessage = async (filePath) => {
       
       // 降级处理：使用上传音频文件接口
       const uploadResult = await voiceAPI.uploadVoiceChat(filePath, {
-        modelId: null,
-        templateId: null
+        modelId: undefined,
+        templateId: undefined
       });
       
       if (uploadResult.success) {
@@ -519,7 +814,10 @@ const handleVoiceMessage = async (filePath) => {
         
         // 最终降级：使用本地模拟回复
         const fallbackResponse = getSmartResponse(currentCharacter.value, '[语音消息]');
-        addMessage('ai', fallbackResponse);
+        const cleanedResponse = cleanText(fallbackResponse);
+        console.log('语音降级原始回复:', fallbackResponse);
+        console.log('语音降级清理后回复:', cleanedResponse);
+        addMessage('ai', cleanedResponse);
         
         // 显示提示
         if (shouldShowLoginTip) {
@@ -549,7 +847,10 @@ const handleVoiceMessage = async (filePath) => {
     
     // 异常情况，使用本地模拟回复
     const fallbackResponse = getSmartResponse(currentCharacter.value, '[语音消息]');
-    addMessage('ai', fallbackResponse);
+    const cleanedResponse = cleanText(fallbackResponse);
+    console.log('语音异常原始回复:', fallbackResponse);
+    console.log('语音异常清理后回复:', cleanedResponse);
+    addMessage('ai', cleanedResponse);
     
     uni.showToast({
       title: '语音处理异常，使用本地回复',
@@ -562,55 +863,64 @@ const handleVoiceMessage = async (filePath) => {
 };
 
 // 播放语音回复
-const playVoiceResponse = async (text) => {
+const playVoiceResponse = async (text, audioUrl = null) => {
   // #ifdef MP-WEIXIN
   try {
-    // 调用文本转语音API
-    const ttsResult = await voiceAPI.textToSpeech(text, currentCharacter.value.voiceStyle);
+    let finalAudioUrl = audioUrl;
     
-    if (ttsResult.success) {
-      const audioUrl = ttsResult.data.audioUrl;
+    // 如果没有提供音频URL，则调用TTS API生成
+    if (!finalAudioUrl) {
+      console.log('没有提供音频URL，调用TTS API生成');
+      const ttsResult = await voiceAPI.textToSpeech(text, currentCharacter.value.voiceStyle);
       
-      if (audioContext.value) {
-        audioContext.value.destroy();
-      }
-      
-      // 创建音频上下文
-      audioContext.value = uni.createInnerAudioContext();
-      audioContext.value.src = audioUrl;
-      
-      // 设置事件监听
-      audioContext.value.onPlay(() => {
-        console.log('开始播放AI语音回复');
+      if (ttsResult.success) {
+        finalAudioUrl = ttsResult.data.audioUrl;
+      } else {
+        console.warn('文本转语音失败:', ttsResult.error);
         uni.showToast({
-          title: '正在播放语音',
-          icon: 'none',
-          duration: 1000
-        });
-      });
-      
-      audioContext.value.onEnded(() => {
-        console.log('AI语音播放结束');
-      });
-      
-      audioContext.value.onError((err) => {
-        console.error('语音播放错误:', err);
-        uni.showToast({
-          title: '语音播放失败',
+          title: '语音合成失败',
           icon: 'none'
         });
-      });
-      
-      // 开始播放
-      audioContext.value.play();
-      
+        return;
+      }
     } else {
-      console.warn('文本转语音失败，使用本地提示:', ttsResult.error);
+      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: '语音合成失败',
+        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({
@@ -629,6 +939,68 @@ const playVoiceResponse = async (text) => {
   // #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();
@@ -636,97 +1008,117 @@ const goBack = () => {
 </script>
 
 <style scoped>
+/* 页面根元素样式 - 禁用页面滚动 */
+page {
+  height: 100vh;
+  overflow: hidden;
+}
+
 /* 聊天页面样式 */
 .chat-container {
   width: 100vw;
   height: 100vh;
-  background: #f8f6f0;
-  display: flex;
-  flex-direction: column;
+  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: 88rpx;
-  background: rgba(255, 255, 255, 0.95);
+  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(255, 123, 123, 0.2);
+  border-bottom: 1rpx solid rgba(251, 191, 36, 0.3);
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 0 20rpx;
-  position: relative;
-  z-index: 100;
+  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 {
-  width: 100rpx;
-  height: 70rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 12rpx;
-  transition: background-color 0.3s ease;
-}
-
-.navbar-left:hover {
-  background-color: rgba(255, 123, 123, 0.1);
+  position: absolute;
+  left: 24rpx;
+  color: #f9e076;
+  font-size: 28rpx;
+  font-weight: 500;
+  transition: opacity 0.3s ease;
 }
 
 .navbar-left:active {
-  background-color: rgba(255, 123, 123, 0.2);
-}
-
-.back-icon {
-  font-size: 32rpx;
-  color: #333;
-  font-weight: bold;
+  opacity: 0.7;
 }
 
 .navbar-center {
-  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 16rpx;
+  gap: 12rpx;
 }
 
 .character-avatar {
-  width: 50rpx;
-  height: 50rpx;
+  width: 56rpx;
+  height: 56rpx;
   border-radius: 50%;
-  border: 2rpx solid rgba(255, 123, 123, 0.3);
+  border: 2rpx solid rgba(249, 224, 118, 0.4);
+  box-shadow: 0 0 8rpx rgba(249, 224, 118, 0.3);
 }
 
 .character-name {
-  font-size: 28rpx;
+  font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(249, 224, 118, 0.5);
 }
 
 .navbar-right {
-  width: 100rpx;
-  height: 70rpx;
+  position: absolute;
+  right: 24rpx;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .status-dot {
-  width: 16rpx;
-  height: 16rpx;
+  width: 12rpx;
+  height: 12rpx;
   border-radius: 50%;
-  background: #ccc;
+  background: #94a3b8;
+  box-shadow: 0 0 4rpx rgba(148, 163, 184, 0.5);
 }
 
 .status-dot.online {
-  background: #4CAF50;
-  box-shadow: 0 0 8rpx rgba(76, 175, 80, 0.5);
+  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 {
-  flex: 1;
+  height: calc(100vh - 100rpx - 120rpx - env(safe-area-inset-top)); /* 减去导航栏和底部输入区域的高度 */
   padding: 16rpx 20rpx;
   overflow-y: auto;
 }
@@ -867,34 +1259,97 @@ const goBack = () => {
 
 /* 输入区域 */
 .input-area {
-  background: rgba(255, 255, 255, 0.95);
+  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(255, 123, 123, 0.2);
+  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(248, 246, 240, 0.8);
+  background: rgba(15, 23, 42, 0.8);
   border-radius: 25rpx;
   padding: 10rpx 16rpx;
-  border: 2rpx solid rgba(255, 123, 123, 0.2);
+  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 {
-  flex: 1;
+  width: 100%;
   font-size: 28rpx;
-  color: #333;
+  color: #ffffff;
   background: transparent;
   border: none;
   outline: none;
+  padding: 12rpx 16rpx;
 }
 
 .text-input::placeholder {
-  color: #999;
+  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 {
@@ -903,22 +1358,54 @@ const goBack = () => {
   gap: 12rpx;
 }
 
-.voice-btn {
+.template-btn {
   width: 55rpx;
   height: 55rpx;
   border-radius: 50%;
-  background: rgba(255, 123, 123, 0.1);
+  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, #ff7b7b, #ffb7b7);
+  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;
 }
@@ -927,15 +1414,17 @@ const goBack = () => {
   width: 55rpx;
   height: 55rpx;
   border-radius: 50%;
-  background: rgba(255, 123, 123, 0.1);
+  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, #ff7b7b, #ffb7b7);
+  background: linear-gradient(135deg, #fbbf24, #f59e0b);
   transform: scale(1.1);
 }
 
@@ -943,6 +1432,59 @@ const goBack = () => {
   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;
@@ -964,7 +1506,125 @@ const goBack = () => {
 /* 登录状态提示 */
 .login-status {
   font-size: 20rpx;
-  color: #ff7b7b;
+  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;
 }
 
@@ -974,7 +1634,7 @@ const goBack = () => {
   top: -80rpx;
   left: 50%;
   transform: translateX(-50%);
-  background: rgba(255, 123, 123, 0.9);
+  background: rgba(251, 191, 36, 0.9);
   color: #fff;
   padding: 16rpx 32rpx;
   border-radius: 20rpx;
@@ -1031,6 +1691,15 @@ const goBack = () => {
   }
 }
 
+@keyframes star-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /* 响应式设计 */
 @media screen and (max-width: 375px) {
   .custom-navbar {
diff --git a/src/pages/create/create.vue b/src/pages/create/create.vue
index 2e8f92a..9f74075 100644
--- a/src/pages/create/create.vue
+++ b/src/pages/create/create.vue
@@ -1,12 +1,24 @@
 <template>
-  <view class="container">
+  <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 class="star star-9"></view>
+      <view class="star star-10"></view>
+    </view>
+    
     <!-- 顶部自定义导航栏 -->
     <view class="custom-navbar fixed-navbar">
-      <view class="navbar-left" @click="goBack">
-        <text class="back-icon">〈</text>
-      </view>
+      <view class="navbar-left" @tap="goBack">← 返回</view>
       <text class="navbar-title">创建</text>
-      <view class="navbar-right"></view>
     </view>
     
     <!-- 创建选项区域 -->
@@ -85,71 +97,208 @@ const showLoginTip = () => {
 </script>
 
 <style scoped>
+/* 夜空主题容器 */
+.floral-container {
+  width: 100vw;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
+  position: relative;
+  overflow-x: hidden;
+  padding-bottom: 120rpx;
+  padding-top: 100rpx;
+  display: flex;
+  flex-direction: column;
+}
+
 .fixed-navbar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
-  z-index: 100;
-}
-.container {
-  background: #fff9f2;
-  min-height: 100vh;
-  padding-top: 100rpx;
-  padding-bottom: 40rpx;
+  z-index: 1002;
 }
+
 .custom-navbar {
   height: 100rpx;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  background: linear-gradient(90deg, #ffe5c2, #fff6e5);
-  padding: 0 30rpx;
-}
-.navbar-left, .navbar-right {
-  width: 60rpx;
-  display: flex;
-  align-items: center;
-}
-.back-icon {
-  font-size: 36rpx;
+  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%);
+  backdrop-filter: blur(10px);
+  border-bottom: 1rpx solid rgba(251, 191, 36, 0.3);
   font-weight: bold;
-  color: #333;
-}
-.navbar-title {
-  color: #333;
-  font-weight: bold;
-  font-size: 38rpx;
+  font-size: 32rpx;
   letter-spacing: 2rpx;
+  position: relative;
+}
+
+.navbar-left {
+  position: absolute;
+  left: 24rpx;
+  color: #f9e076;
+  font-size: 28rpx;
+  font-weight: 500;
+}
+
+.navbar-title {
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(249, 224, 118, 0.5);
 }
 
 /* 创建选项区域 */
 .create-options {
   padding: 40rpx 30rpx;
+  z-index: 2;
+  position: relative;
 }
+
 .option-card {
   display: flex;
   align-items: center;
-  background: #fff;
-  border-radius: 20rpx;
+  background: rgba(255, 255, 255, 0.9);
+  border: 2rpx solid rgba(138, 43, 226, 0.3);
+  border-radius: 25rpx;
+  box-shadow: 0 8rpx 30rpx rgba(138, 43, 226, 0.15);
   padding: 40rpx 30rpx;
   margin-bottom: 30rpx;
-  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
 }
+
+.option-card:hover {
+  transform: translateY(-4rpx);
+  box-shadow: 0 12rpx 40rpx rgba(138, 43, 226, 0.2);
+  border-color: #8a2be2;
+}
+
 .option-icon {
   font-size: 60rpx;
   margin-right: 30rpx;
+  filter: drop-shadow(0 2rpx 4rpx rgba(138, 43, 226, 0.3));
 }
+
 .option-content {
   flex: 1;
+  display: flex;
+  flex-direction: column;
 }
+
 .option-title {
   font-size: 34rpx;
   font-weight: bold;
   margin-bottom: 10rpx;
+  color: #333;
 }
+
 .option-desc {
   font-size: 28rpx;
-  color: #999;
+  color: #666;
+  font-style: italic;
+}
+
+/* 夜空装饰背景 */
+.night-sky-decoration {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+}
+
+/* 星星样式 - 小黄点 */
+.star {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: #f9e076;
+  border-radius: 50%;
+  animation: star-twinkle 3s ease-in-out infinite;
+  box-shadow: 0 0 8px rgba(249, 224, 118, 0.8);
+}
+
+.star-1 {
+  top: 80px;
+  right: 40px;
+  animation-delay: 0s;
+}
+
+.star-2 {
+  top: 120px;
+  right: 80px;
+  animation-delay: 0.5s;
+}
+
+.star-3 {
+  top: 200px;
+  right: 20px;
+  animation-delay: 1s;
+}
+
+.star-4 {
+  top: 300px;
+  right: 60px;
+  animation-delay: 1.5s;
+}
+
+.star-5 {
+  top: 150px;
+  left: 30px;
+  animation-delay: 2s;
+}
+
+.star-6 {
+  top: 250px;
+  left: 60px;
+  animation-delay: 2.5s;
+}
+
+.star-7 {
+  top: 350px;
+  left: 20px;
+  animation-delay: 3s;
+}
+
+.star-8 {
+  top: 400px;
+  right: 100px;
+  animation-delay: 3.5s;
+}
+
+.star-9 {
+  top: 60px;
+  left: 80px;
+  animation-delay: 4s;
+}
+
+.star-10 {
+  top: 180px;
+  right: 120px;
+  animation-delay: 4.5s;
+}
+
+/* 动画效果 */
+@keyframes star-twinkle {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+    box-shadow: 0 0 4px rgba(249, 224, 118, 0.4);
+  }
+  25% {
+    opacity: 0.7;
+    transform: scale(1.1);
+    box-shadow: 0 0 8px rgba(249, 224, 118, 0.7);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.3);
+    box-shadow: 0 0 12px rgba(249, 224, 118, 1);
+  }
+  75% {
+    opacity: 0.8;
+    transform: scale(1.1);
+    box-shadow: 0 0 8px rgba(249, 224, 118, 0.8);
+  }
 }
 </style> 
\ No newline at end of file
diff --git a/src/pages/drama/index.vue b/src/pages/drama/index.vue
new file mode 100644
index 0000000..d29eae3
--- /dev/null
+++ b/src/pages/drama/index.vue
@@ -0,0 +1,387 @@
+<template>
+  <view class="floral-container">
+    <!-- 顶部自定义导航栏 -->
+    <view class="custom-navbar fixed-navbar">
+      <view class="navbar-left" @tap="goBack">← 返回</view>
+      <text class="navbar-title">选择剧情</text>
+    </view>
+
+    <!-- 可滚动的两列卡片区 -->
+    <scroll-view
+      class="scroll-container"
+      scroll-y="true"
+      :show-scrollbar="false"
+    >
+      <view class="two-column-grid">
+        <view class="column column-left">
+          <block v-for="(item, idx) in leftColumnItems" :key="item ? item.id : idx">
+            <view class="floral-grid-card" v-if="item">
+              <image class="cover" :src="item.cover" mode="aspectFit" />
+              <view class="floral-tag">{{ item.tag }}</view>
+              <view class="content-area">
+                <view class="title">{{ item.title }}</view>
+                <view class="card-bottom">
+                  <button v-if="userStore.isLoggedIn" class="floral-btn use-btn" @click="showDetail(item)">🔍 查看详情</button>
+                  <button v-else class="floral-btn outline use-btn login-required" @click="showLoginTip">🔐 查看详情</button>
+                </view>
+              </view>
+            </view>
+          </block>
+        </view>
+
+        <view class="column column-right">
+          <block v-for="(item, idx) in rightColumnItems" :key="item ? item.id : idx">
+            <view class="floral-grid-card" v-if="item">
+              <image class="cover" :src="item.cover" mode="aspectFit" />
+              <view class="floral-tag">{{ item.tag }}</view>
+              <view class="content-area">
+                <view class="title">{{ item.title }}</view>
+                <view class="card-bottom">
+                  <button v-if="userStore.isLoggedIn" class="floral-btn use-btn" @click="showDetail(item)">🔍 查看详情</button>
+                  <button v-else class="floral-btn outline use-btn login-required" @click="showLoginTip">🔐 查看详情</button>
+                </view>
+              </view>
+            </view>
+          </block>
+        </view>
+      </view>
+
+      <view class="bottom-spacing"></view>
+    </scroll-view>
+
+    <!-- 登录提示弹窗 -->
+    <view class="floral-modal" v-if="showLoginModal">
+      <view class="floral-modal-content">
+        <view class="modal-title">💝 温馨提示</view>
+        <view class="modal-text">请先登录后再开始您的创意之旅</view>
+        <view class="modal-btns">
+          <button class="floral-btn outline modal-btn cancel" @click="showLoginModal = false">稍后再说</button>
+          <button class="floral-btn modal-btn confirm" @click="goToLogin">🌸 去登录</button>
+        </view>
+      </view>
+    </view>
+
+    <!-- 角色详情弹窗 -->
+    <view class="detail-modal" v-if="showDetailModal" @click="closeDetail">
+      <view class="detail-modal-content" @click.stop>
+        <view class="detail-cover-container">
+          <image
+            class="detail-cover"
+            :src="selectedItem?.cover"
+            mode="aspectFit"
+            :class="{'cover-zoomed': showDetailModal}"
+          />
+        </view>
+
+        <view class="detail-info" :class="{'info-visible': showDetailModal}">
+          <view class="detail-tag">{{ selectedItem?.tag }}</view>
+          <view class="detail-title">{{ selectedItem?.title }}</view>
+          <scroll-view class="detail-description" scroll-y="true">
+            <view class="description-text">
+              {{ selectedItem?.title }} - 这是一个充满魅力的角色，拥有独特的个性和丰富的故事背景。在这里，您可以与这个角色进行深入的对话，体验不同的情感交流。
+            </view>
+          </scroll-view>
+          <view class="detail-actions">
+            <button class="floral-btn outline detail-btn cancel" @click="closeDetail">取消</button>
+            <button class="floral-btn detail-btn confirm" @click="useFromDetail">💝 去使用</button>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useUserStore } from '@/stores/user.js';
+
+const userStore = useUserStore();
+const showLoginModal = ref(false);
+
+// 详情弹窗相关
+const showDetailModal = ref(false);
+const selectedItem = ref(null);
+
+// 数据：剧情列表
+const dramaList = ref([
+  { 
+    id: 1, 
+    cover: '/static/bailing.jpg', 
+    tag: '浪漫', 
+    title: '白领女友的温柔早安',
+    roleId: 1,
+    roleName: '小何',
+    roleDesc: '台湾女孩，高情商智能助手',
+    avatar: '/static/bailing.jpg',
+    greeting: '你好～我是小何，一个高情商的台湾女孩，很高兴认识你！有什么想聊的吗？'
+  },
+  { 
+    id: 2, 
+    cover: '/static/haomen.jpg', 
+    tag: '优雅', 
+    title: '豪门女主的秘密生活',
+    roleId: 2,
+    roleName: '小于',
+    roleDesc: '咖啡店兼职店员，热情友好',
+    avatar: '/static/haomen.jpg',
+    greeting: '你好！我是小于，咖啡店的新店员，今天想喝点什么吗？'
+  },
+  { 
+    id: 3, 
+    cover: '/static/waimai.jpg', 
+    tag: '活泼', 
+    title: '外卖小姐姐的贴心问候',
+    roleId: 3,
+    roleName: '李老师',
+    roleDesc: '中学图书馆管理员，温文尔雅',
+    avatar: '/static/waimai.jpg',
+    greeting: '你好，我是李老师，图书馆管理员。有什么想了解的书吗？'
+  },
+  { 
+    id: 4, 
+    cover: '/static/tunvlang.jpg', 
+    tag: '深情', 
+    title: '因爱执著的少女',
+    roleId: 4,
+    roleName: '小何',
+    roleDesc: '另一个小何角色',
+    avatar: '/static/tunvlang.jpg',
+    greeting: '你好～我是小何，很高兴为你服务！'
+  },
+  // { 
+  //   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: '校园里的美好回忆' },
+]);
+
+// 列数据拆分
+const leftColumnItems = computed(() => dramaList.value.filter((_, index) => index % 2 === 0));
+const rightColumnItems = computed(() => dramaList.value.filter((_, index) => index % 2 === 1));
+
+onMounted(() => {
+  userStore.init();
+});
+
+// 方法
+const handleUse = (item) => {
+  if (!item || !item.id) {
+    uni.showToast({ title: '角色信息无效', icon: 'none' });
+    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 showLoginTip = () => { showLoginModal.value = true; };
+const showDetail = (item) => { selectedItem.value = item; showDetailModal.value = true; };
+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>
+.floral-container {
+  width: 100vw;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
+  position: relative;
+  overflow-x: hidden;
+  padding-bottom: 120rpx;
+  padding-top: 100rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.fixed-navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  z-index: 1002;
+}
+
+.custom-navbar {
+  height: 100rpx;
+  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;
+}
+
+.navbar-title {
+  color: #ffffff;
+}
+
+.scroll-container {
+  flex: 1;
+  min-height: 0;
+  margin: 24rpx;
+  border-radius: 20rpx;
+}
+
+.two-column-grid {
+  display: flex;
+  gap: 20rpx;
+}
+
+.column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.floral-grid-card {
+  background: rgba(255, 255, 255, 0.9);
+  border: 2rpx solid rgba(138, 43, 226, 0.3);
+  border-radius: 25rpx;
+  box-shadow: 0 8rpx 30rpx rgba(138, 43, 226, 0.15);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+
+.cover {
+  width: 100%;
+  height: 320rpx;
+  display: block;
+}
+
+.floral-tag {
+  position: absolute;
+  margin: 12rpx;
+  background: linear-gradient(135deg, #f9e076, #f59e0b);
+  color: #4b0082;
+  padding: 6rpx 12rpx;
+  border-radius: 16rpx;
+  font-size: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.3);
+}
+
+.content-area { padding: 16rpx; }
+.title { font-size: 28rpx; color: #333; font-weight: bold; }
+.card-bottom { margin-top: 8rpx; display: flex; justify-content: flex-end; }
+
+.floral-btn {
+  background: linear-gradient(135deg, #8a2be2, #6b2c9c);
+  color: #fff;
+  border: none;
+  border-radius: 25rpx;
+  font-size: 26rpx;
+  padding: 12rpx 28rpx;
+  box-shadow: 0 4rpx 15rpx rgba(138, 43, 226, 0.3);
+  transition: all 0.3s ease;
+}
+
+.floral-btn.outline {
+  background: transparent;
+  color: #8a2be2;
+  border: 2rpx solid #8a2be2;
+}
+
+.floral-grid-card:hover {
+  transform: translateY(-4rpx);
+  box-shadow: 0 12rpx 40rpx rgba(138, 43, 226, 0.2);
+  border-color: #8a2be2;
+}
+
+.use-btn { font-size: 24rpx; }
+.bottom-spacing { height: 40rpx; }
+
+/* 登录弹窗 */
+.floral-modal {
+  position: fixed;
+  left: 0; right: 0; top: 0; bottom: 0;
+  background: rgba(0,0,0,0.3);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.floral-modal-content {
+  width: 80vw;
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 24rpx;
+}
+.modal-title { font-size: 30rpx; font-weight: bold; margin-bottom: 12rpx; }
+.modal-text { font-size: 24rpx; color: #666; margin-bottom: 16rpx; }
+.modal-btns { display: flex; gap: 20rpx; justify-content: flex-end; }
+
+/* 详情弹窗 */
+.detail-modal {
+  position: fixed;
+  left: 0; right: 0; top: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 2100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.detail-modal-content {
+  width: 86vw;
+  max-height: 80vh;
+  background: #ffffff;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+.detail-cover-container { width: 100%; height: 320rpx; overflow: hidden; }
+.detail-cover { width: 100%; height: 100%; }
+.detail-info { padding: 20rpx; }
+.detail-tag { font-size: 22rpx; color: #8a2be2; margin-bottom: 8rpx; }
+.detail-title { font-size: 32rpx; font-weight: 700; color: #333; margin-bottom: 12rpx; }
+.detail-description { max-height: 200rpx; }
+.description-text { font-size: 24rpx; color: #555; line-height: 1.6; }
+.detail-actions { margin-top: 12rpx; display: flex; justify-content: flex-end; gap: 20rpx; }
+.detail-btn { padding: 10rpx 22rpx; }
+</style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 8e285a3..ad2fff1 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,27 +1,39 @@
 <template>
   <view class="floral-container">
-    <!-- 花卉装饰背景 -->
-    <view class="floral-decoration">
-      <!-- 右上角花朵 -->
-      <view class="flower flower-1">
-        <view class="petal"></view>
-        <view class="petal"></view>
-        <view class="petal"></view>
-        <view class="petal"></view>
-        <view class="center"></view>
-      </view>
-      
-      <!-- 左下角枝叶 -->
-      <view class="branch branch-1">
-        <view class="stem"></view>
-        <view class="leaf leaf-1"></view>
-        <view class="leaf leaf-2"></view>
-        <view class="leaf leaf-3"></view>
-      </view>
+    <!-- 头部以上背景区域 -->
+    <view class="top-background"></view>
+    
+    <!-- 夜空装饰背景 -->
+    <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 class="star star-9"></view>
+      <view class="star star-10"></view>
+      <view class="star star-11"></view>
+      <view class="star star-12"></view>
+      <view class="star star-13"></view>
+      <view class="star star-14"></view>
+      <view class="star star-15"></view>
+      <view class="star star-16"></view>
+      <view class="star star-17"></view>
+      <view class="star star-18"></view>
+      <view class="star star-19"></view>
+      <view class="star star-20"></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">因为AI 所以爱</text>
     </view>
 
@@ -41,65 +53,20 @@
       </view>
     </view>
 
-    <!-- 二级Tab -->
-    <view class="tab-row">
-      <view :class="['floral-tab-btn', tabActive === 'drama' ? 'active' : '']" @tap="tabActive = 'drama'">
-        <text class="tab-icon">🎭</text>
-        <text class="tab-text">剧情</text>
+    <!-- 功能区 -->
+    <view class="card-row">
+      <view class="floral-card" @tap="goToDrama">
+        <view class="card-icon">🎭</view>
+        <text class="card-title">剧情</text>
+        <text class="card-desc">探索精彩故事</text>
       </view>
-      <view :class="['floral-tab-btn', tabActive === 'chat' ? 'active' : '']" @tap="tabActive = 'chat'">
-        <text class="tab-icon">💬</text>
-        <text class="tab-text">聊天</text>
+      <view class="floral-card" @tap="goToWeiAI">
+        <view class="card-icon">🤖</view>
+        <text class="card-title">智能体</text>
+        <text class="card-desc">智能助手服务</text>
       </view>
     </view>
 
-    <!-- 两列可滚动卡片区 -->
-    <scroll-view 
-      class="scroll-container" 
-      scroll-y="true" 
-      enable-back-to-top="true"
-      refresher-enabled="true"
-      refresher-threshold="45"
-      refresher-default-style="black"
-      :show-scrollbar="false"
-    >
-      <view class="two-column-grid">
-        <view class="column column-left">
-          <block v-for="(item, idx) in leftColumnItems" :key="item.id">
-            <view class="floral-grid-card">
-              <image class="cover" :src="item.cover" mode="aspectFit" />
-              <view class="floral-tag">{{ item.tag }}</view>
-              <view class="content-area">
-                <view class="title">{{ item.title }}</view>
-                <view class="card-bottom">
-                  <button v-if="userStore.isLoggedIn" class="floral-btn use-btn" @click="handleUse(item)">💝 去使用</button>
-                  <button v-else class="floral-btn outline use-btn login-required" @click="showLoginTip">🔐 去使用</button>
-                </view>
-              </view>
-            </view>
-          </block>
-        </view>
-        
-        <view class="column column-right">
-          <block v-for="(item, idx) in rightColumnItems" :key="item.id">
-            <view class="floral-grid-card">
-              <image class="cover" :src="item.cover" mode="aspectFit" />
-              <view class="floral-tag">{{ item.tag }}</view>
-              <view class="content-area">
-                <view class="title">{{ item.title }}</view>
-                <view class="card-bottom">
-                  <button v-if="userStore.isLoggedIn" class="floral-btn use-btn" @click="handleUse(item)">💝 去使用</button>
-                  <button v-else class="floral-btn outline use-btn login-required" @click="showLoginTip">🔐 去使用</button>
-                </view>
-              </view>
-            </view>
-          </block>
-        </view>
-      </view>
-      
-      <!-- 底部留白，避免被tabbar遮挡 -->
-      <view class="bottom-spacing"></view>
-    </scroll-view>
     
     <!-- 登录提示弹窗 -->
     <view class="floral-modal" v-if="showLoginModal">
@@ -121,50 +88,11 @@ import { useUserStore } from '@/stores/user.js';
 
 // 状态管理
 const userStore = useUserStore();
-const tabActive = ref('drama');
 const showLoginModal = ref(false);
 const deviceConnected = ref(false);
 const deviceSN = ref('未连接');
 const deviceId = ref('30:ed:a0:12:99:60'); // 固定设备ID
 
-// 数据
-const dramaList = ref([
-  { id: 1, cover: '/static/bailing.jpg', tag: '浪漫', title: '白领女友的温柔早安' },
-  { id: 2, cover: '/static/haomen.jpg', tag: '优雅', title: '豪门女主的秘密生活' },
-  { id: 3, cover: '/static/waimai.jpg', tag: '活泼', title: '外卖小姐姐的贴心问候' },
-  { id: 4, cover: '/static/tunvlang.jpg', tag: '深情', title: '因爱执著的少女' },
-  { id: 9, cover: '/static/logo.png', tag: '温暖', title: '邻家女孩的暖心故事' },
-  { id: 10, cover: '/static/logo.png', tag: '梦幻', title: '公主的浪漫邂逅' },
-  { id: 11, cover: '/static/logo.png', tag: '治愈', title: '咖啡店的午后时光' },
-  { id: 12, cover: '/static/logo.png', tag: '青春', title: '校园里的美好回忆' },
-]);
-
-const chatList = ref([
-  { id: 5, cover: '/static/logo.png', tag: '可爱', title: '萌妹陪你聊天' },
-  { id: 6, cover: '/static/logo.png', tag: '知性', title: '御姐的温柔夜话' },
-  { id: 7, cover: '/static/logo.png', tag: '纯真', title: '童真世界探索' },
-  { id: 8, cover: '/static/logo.png', tag: '贴心', title: '温暖男友陪伴' },
-  { id: 13, cover: '/static/logo.png', tag: '幽默', title: '搞笑达人的日常' },
-  { id: 14, cover: '/static/logo.png', tag: '智慧', title: '博学者的深度对话' },
-  { id: 15, cover: '/static/logo.png', tag: '活力', title: '运动健将的正能量' },
-  { id: 16, cover: '/static/logo.png', tag: '艺术', title: '文艺青年的灵感分享' },
-]);
-
-// 计算属性
-const currentList = computed(() => {
-  return tabActive.value === 'drama' ? dramaList.value : chatList.value;
-});
-
-// 左列数据（偶数索引：0, 2, 4...）
-const leftColumnItems = computed(() => {
-  return currentList.value.filter((item, index) => index % 2 === 0);
-});
-
-// 右列数据（奇数索引：1, 3, 5...）
-const rightColumnItems = computed(() => {
-  return currentList.value.filter((item, index) => index % 2 === 1);
-});
-
 // 生命周期
 onMounted(() => {
   userStore.init();
@@ -181,10 +109,10 @@ const checkDeviceStatus = () => {
     });
     
     uni.request({
-                url: 'http://8.145.52.111:8084/api/device/status',
+                url: 'https://www.aixsy.com.cn/api/device/status',
       method: 'GET',
       header: {
-        'Authorization': userStore.token || ''
+        'Authorization': userStore.token ? (userStore.token.startsWith('Bearer ') ? userStore.token : 'Bearer ' + userStore.token) : ''
       },
       success: (res) => {
         console.log('设备状态响应:', res);
@@ -206,78 +134,6 @@ const checkDeviceStatus = () => {
 };
 
 // 方法
-const handleUse = (item) => {
-  console.log('使用角色:', item);
-  
-  // 显示加载提示
-  uni.showLoading({
-    title: `正在设置角色...`
-  });
-  
-  // 获取token
-  const token = userStore.token;
-  
-  // 根据角色id映射到roleId参数
-  let roleId = 0;
-  if (tabActive.value === 'drama') {
-    // 剧情角色映射
-    switch (item.id) {
-      case 1: roleId = 1; break; // 白领女友
-      case 2: roleId = 2; break; // 豪门女主
-      case 3: roleId = 3; break; // 外卖小姐姐
-      case 4: roleId = 4; break; // 病娇少女
-      default: roleId = 0;
-    }
-  } else {
-    // 聊天角色跳转到聊天页面
-    uni.hideLoading();
-    uni.navigateTo({
-      url: `/pages/chat/chat?characterId=${item.id}`
-    });
-    return;
-  }
-  
-  // 不再检查设备ID是否存在，直接使用固定值
-  
-  // 调用设备更新API - 使用form data格式
-  uni.request({
-            url: 'http://8.145.52.111:8084/api/device/update',
-    method: 'POST',
-    header: {
-      'Content-Type': 'application/x-www-form-urlencoded',
-      'Authorization': token || ''
-    },
-    data: {
-      roleId: roleId,
-      deviceId: deviceId.value // 使用固定的设备ID
-    },
-    success: (res) => {
-      console.log('设备更新成功:', res);
-      if (res.statusCode === 200) {
-        uni.showToast({
-          title: `角色设置成功`,
-          icon: 'success'
-        });
-      } else {
-        uni.showToast({
-          title: res.data?.message || '设备更新失败',
-          icon: 'none'
-        });
-      }
-    },
-    fail: (err) => {
-      console.error('设备更新失败:', err);
-      uni.showToast({
-        title: '设备更新失败',
-        icon: 'none'
-      });
-    },
-    complete: () => {
-      uni.hideLoading();
-    }
-  });
-};
-
 const showLoginTip = () => {
   showLoginModal.value = true;
 };
@@ -295,6 +151,22 @@ const goToCreate = () => {
   });
 };
 
+const goToDrama = () => {
+  // 跳转到剧情页面
+  uni.navigateTo({
+    url: '/pages/drama/index'
+  });
+};
+
+const goToWeiAI = () => {
+  // 跳转到蔚AI的聊天页面
+  const introMessage = '你好！我是蔚AI，很高兴为您服务！🌟\n\n我是您的专属AI智能助手，在这里您可以：\n\n✨ 了解我们最新的AI技术和产品\n💡 获取创意灵感和解决方案\n🎯 获得个性化的建议和指导\n🚀 探索AI在各个领域的应用\n\n无论您有什么问题或想法，我都会尽力帮助您。让我们一起开启这段精彩的AI之旅吧！\n\n有什么想了解的吗？';
+  
+  uni.navigateTo({
+    url: '/pages/chat/chat?characterId=wei-ai&characterName=蔚AI&characterAvatar=/static/logo.png&introMessage=' + encodeURIComponent(introMessage)
+  });
+};
+
 const connectDevice = () => {
   // 显示加载提示
   uni.showLoading({
@@ -311,11 +183,11 @@ const connectDevice = () => {
   
   // 调用设备连接/断开API
   uni.request({
-            url: `http://8.145.52.111:8084/api/device/${deviceConnected.value ? 'disconnect' : 'connect'}`,
+            url: `https://www.aixsy.com.cn/api/device/${deviceConnected.value ? 'disconnect' : 'connect'}`,
     method: 'POST',
     header: {
       'Content-Type': 'application/json',
-      'Authorization': token || ''
+      'Authorization': token ? (token.startsWith('Bearer ') ? token : 'Bearer ' + token) : ''
     },
     data: requestData,
     success: (res) => {
@@ -362,19 +234,30 @@ const connectDevice = () => {
 </script>
 
 <style scoped>
-/* 花卉主题首页样式 */
+/* 夜空主题首页样式 */
 .floral-container {
   width: 100vw;
   min-height: 100vh;
-  background: #f8f6f0;
+  background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
   position: relative;
   overflow-x: hidden;
   padding-bottom: 120rpx;
   padding-top: 100rpx;
 }
 
-/* 花卉装饰背景 */
-.floral-decoration {
+/* 头部以上背景区域 */
+.top-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100rpx;
+  background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
+  z-index: 99;
+}
+
+/* 夜空装饰背景 */
+.night-sky-decoration {
   position: fixed;
   top: 0;
   left: 0;
@@ -384,91 +267,135 @@ const connectDevice = () => {
   pointer-events: none;
 }
 
-/* 花朵样式 */
-.flower {
+/* 星星样式 - 小黄点 */
+.star {
   position: absolute;
-  width: 60px;
-  height: 60px;
-  animation: gentle-float 6s ease-in-out infinite;
+  width: 6px;
+  height: 6px;
+  background: #f9e076;
+  border-radius: 50%;
+  animation: star-twinkle 3s ease-in-out infinite;
+  box-shadow: 0 0 8px rgba(249, 224, 118, 0.8);
 }
 
-.flower-1 {
-  top: 100px;
-  right: 30px;
+.star-1 {
+  top: 80px;
+  right: 40px;
   animation-delay: 0s;
 }
 
-.petal {
-  position: absolute;
-  width: 16px;
-  height: 28px;
-  background: #ff7b7b;
-  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-  transform-origin: 50% 100%;
+.star-2 {
+  top: 120px;
+  right: 80px;
+  animation-delay: 0.5s;
 }
 
-.petal:nth-child(1) { transform: rotate(0deg) translateY(-12px); }
-.petal:nth-child(2) { transform: rotate(90deg) translateY(-12px); }
-.petal:nth-child(3) { transform: rotate(180deg) translateY(-12px); }
-.petal:nth-child(4) { transform: rotate(270deg) translateY(-12px); }
-
-.center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 12px;
-  height: 12px;
-  background: #ffeb99;
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-}
-
-/* 枝叶样式 */
-.branch {
-  position: absolute;
-  bottom: 150px;
-  left: 20px;
-  width: 80px;
-  height: 100px;
-  animation: gentle-sway 8s ease-in-out infinite;
-}
-
-.stem {
-  position: absolute;
-  left: 50%;
-  top: 0;
-  width: 2px;
-  height: 70px;
-  background: #4a9b4a;
-  border-radius: 1px;
-  transform: translateX(-50%);
-}
-
-.leaf {
-  position: absolute;
-  width: 18px;
-  height: 28px;
-  background: #4a9b4a;
-  border-radius: 0 100% 0 100%;
-  transform-origin: 50% 100%;
-}
-
-.leaf-1 {
-  top: 15px;
-  left: 25px;
-  transform: rotate(-30deg);
-}
-
-.leaf-2 {
-  top: 35px;
+.star-3 {
+  top: 200px;
   right: 20px;
-  transform: rotate(45deg);
+  animation-delay: 1s;
 }
 
-.leaf-3 {
-  top: 55px;
-  left: 28px;
-  transform: rotate(-15deg);
+.star-4 {
+  top: 300px;
+  right: 60px;
+  animation-delay: 1.5s;
+}
+
+.star-5 {
+  top: 150px;
+  left: 30px;
+  animation-delay: 2s;
+}
+
+.star-6 {
+  top: 250px;
+  left: 60px;
+  animation-delay: 2.5s;
+}
+
+.star-7 {
+  top: 350px;
+  left: 20px;
+  animation-delay: 3s;
+}
+
+.star-8 {
+  top: 400px;
+  right: 100px;
+  animation-delay: 3.5s;
+}
+
+.star-9 {
+  top: 60px;
+  left: 80px;
+  animation-delay: 4s;
+}
+
+.star-10 {
+  top: 180px;
+  right: 120px;
+  animation-delay: 4.5s;
+}
+
+.star-11 {
+  top: 320px;
+  left: 40px;
+  animation-delay: 5s;
+}
+
+.star-12 {
+  top: 450px;
+  left: 100px;
+  animation-delay: 5.5s;
+}
+
+.star-13 {
+  top: 100px;
+  right: 160px;
+  animation-delay: 6s;
+}
+
+.star-14 {
+  top: 240px;
+  left: 120px;
+  animation-delay: 6.5s;
+}
+
+.star-15 {
+  top: 380px;
+  right: 40px;
+  animation-delay: 7s;
+}
+
+.star-16 {
+  top: 50px;
+  left: 160px;
+  animation-delay: 7.5s;
+}
+
+.star-17 {
+  top: 280px;
+  right: 180px;
+  animation-delay: 8s;
+}
+
+.star-18 {
+  top: 420px;
+  left: 80px;
+  animation-delay: 8.5s;
+}
+
+.star-19 {
+  top: 140px;
+  left: 200px;
+  animation-delay: 9s;
+}
+
+.star-20 {
+  top: 360px;
+  right: 200px;
+  animation-delay: 9.5s;
 }
 
 /* 导航栏样式 */
@@ -477,7 +404,7 @@ const connectDevice = () => {
   top: 0;
   left: 0;
   width: 100vw;
-  z-index: 100;
+  z-index: 1002;
 }
 
 .custom-navbar {
@@ -485,16 +412,49 @@ const connectDevice = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(248, 246, 240, 0.95);
+  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(255, 123, 123, 0.2);
+  border-bottom: 1rpx solid rgba(251, 191, 36, 0.3);
   font-weight: bold;
   font-size: 32rpx;
   letter-spacing: 2rpx;
+  position: relative;
+}
+
+.navbar-stars {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.navbar-star {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background: #f9e076;
+  border-radius: 50%;
+  animation: star-twinkle 2.5s ease-in-out infinite;
+  box-shadow: 0 0 6px rgba(249, 224, 118, 0.9);
+}
+
+.star-left {
+  top: 20rpx;
+  left: 40rpx;
+  animation-delay: 0s;
+}
+
+.star-right {
+  top: 20rpx;
+  right: 40rpx;
+  animation-delay: 2s;
 }
 
 .navbar-title {
-  color: #333;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(249, 224, 118, 0.5);
 }
 /* 卡片区域样式 */
 .card-row {
@@ -509,9 +469,9 @@ const connectDevice = () => {
 .floral-card {
   flex: 1;
   background: rgba(255, 255, 255, 0.9);
-  border: 2rpx solid rgba(255, 123, 123, 0.3);
+  border: 2rpx solid rgba(138, 43, 226, 0.3);
   border-radius: 25rpx;
-  box-shadow: 0 8rpx 30rpx rgba(255, 123, 123, 0.15);
+  box-shadow: 0 8rpx 30rpx rgba(138, 43, 226, 0.15);
   padding: 30rpx 20rpx;
   display: flex;
   flex-direction: column;
@@ -522,14 +482,14 @@ const connectDevice = () => {
 
 .floral-card:hover {
   transform: translateY(-4rpx);
-  box-shadow: 0 12rpx 40rpx rgba(255, 123, 123, 0.2);
-  border-color: #ff7b7b;
+  box-shadow: 0 12rpx 40rpx rgba(138, 43, 226, 0.2);
+  border-color: #8a2be2;
 }
 
 .card-icon {
   font-size: 48rpx;
   margin-bottom: 12rpx;
-  filter: drop-shadow(0 2rpx 4rpx rgba(255, 123, 123, 0.3));
+  filter: drop-shadow(0 2rpx 4rpx rgba(59, 130, 246, 0.3));
 }
 
 .card-title {
@@ -557,93 +517,51 @@ const connectDevice = () => {
 
 /* 花卉按钮样式 */
 .floral-btn {
-  background: linear-gradient(135deg, #ff7b7b, #ffb7b7);
+  background: linear-gradient(135deg, #8a2be2, #6b2c9c);
   color: #fff;
   border: none;
   border-radius: 25rpx;
   font-size: 26rpx;
   font-weight: 500;
   padding: 12rpx 28rpx;
-  box-shadow: 0 4rpx 15rpx rgba(255, 123, 123, 0.3);
+  box-shadow: 0 4rpx 15rpx rgba(138, 43, 226, 0.3);
   transition: all 0.3s ease;
   margin-top: 12rpx;
 }
 
 .floral-btn:hover {
   transform: translateY(-2rpx);
-  box-shadow: 0 6rpx 20rpx rgba(255, 123, 123, 0.4);
+  box-shadow: 0 6rpx 20rpx rgba(138, 43, 226, 0.4);
 }
 
 .floral-btn.outline {
   background: transparent;
-  color: #ff7b7b;
-  border: 2rpx solid #ff7b7b;
+  color: #8a2be2;
+  border: 2rpx solid #8a2be2;
 }
 
 .floral-btn.outline:hover {
-  background: #ff7b7b;
+  background: #8a2be2;
   color: #fff;
 }
-/* Tab区域样式 */
-.tab-row {
-  display: flex;
-  margin: 40rpx 24rpx 20rpx 24rpx;
-  gap: 16rpx;
-  z-index: 2;
-  position: relative;
-}
-
-.floral-tab-btn {
-  flex: 1;
-  background: rgba(255, 255, 255, 0.8);
-  border: 2rpx solid rgba(255, 123, 123, 0.3);
-  border-radius: 20rpx;
-  padding: 20rpx 16rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  transition: all 0.3s ease;
-  backdrop-filter: blur(5px);
-}
-
-.floral-tab-btn.active {
-  background: linear-gradient(135deg, #ff7b7b, #ffb7b7);
-  border-color: #ff7b7b;
-  transform: translateY(-2rpx);
-  box-shadow: 0 6rpx 20rpx rgba(255, 123, 123, 0.3);
-}
-
-.tab-icon {
-  font-size: 32rpx;
-  margin-bottom: 8rpx;
-  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
-}
-
-.tab-text {
-  font-size: 24rpx;
-  font-weight: 500;
-  color: #333;
-}
-
-.floral-tab-btn.active .tab-text {
-  color: #fff;
-  font-weight: bold;
-}
 /* 两列可滚动样式 */
 .scroll-container {
-  height: calc(100vh - 280rpx);
-  margin: 24rpx 12rpx 0 12rpx;
+  height: calc(100vh - 480rpx);
+  margin: 0 12rpx 0 12rpx;
   z-index: 2;
   position: relative;
-  border-radius: 20rpx;
+  border-radius: 0 0 20rpx 20rpx;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(5px);
+  overflow: hidden;
+  border: 2rpx solid rgba(138, 43, 226, 0.3);
+  border-top: none;
 }
 
 .two-column-grid {
   display: flex;
   gap: 16rpx;
-  padding: 20rpx 16rpx 0 16rpx;
+  padding: 20rpx 16rpx 20rpx 16rpx;
   min-height: 100%;
 }
 
@@ -664,9 +582,9 @@ const connectDevice = () => {
 
 .floral-grid-card {
   background: rgba(255, 255, 255, 0.9);
-  border: 2rpx solid rgba(255, 123, 123, 0.2);
+  border: 2rpx solid rgba(59, 130, 246, 0.2);
   border-radius: 20rpx;
-  box-shadow: 0 6rpx 25rpx rgba(255, 123, 123, 0.15);
+  box-shadow: 0 6rpx 25rpx rgba(59, 130, 246, 0.15);
   position: relative;
   overflow: hidden;
   display: flex;
@@ -679,8 +597,8 @@ const connectDevice = () => {
 
 .floral-grid-card:hover {
   transform: translateY(-4rpx);
-  box-shadow: 0 10rpx 35rpx rgba(255, 123, 123, 0.2);
-  border-color: #ff7b7b;
+  box-shadow: 0 10rpx 35rpx rgba(59, 130, 246, 0.2);
+  border-color: #3b82f6;
 }
 
 .bottom-spacing {
@@ -699,14 +617,14 @@ const connectDevice = () => {
   position: absolute;
   top: 12rpx;
   left: 12rpx;
-  background: linear-gradient(135deg, #ff7b7b, #ffb7b7);
+  background: linear-gradient(135deg, #8a2be2, #6b2c9c);
   color: #fff;
   font-size: 20rpx;
   font-weight: 500;
   border-radius: 12rpx;
   padding: 6rpx 16rpx;
   z-index: 3;
-  box-shadow: 0 2rpx 8rpx rgba(255, 123, 123, 0.3);
+  box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.3);
 }
 
 .content-area {
@@ -757,12 +675,12 @@ const connectDevice = () => {
 .floral-modal-content {
   width: 560rpx;
   background: rgba(255, 255, 255, 0.95);
-  border: 3rpx solid rgba(255, 123, 123, 0.3);
+  border: 3rpx solid rgba(59, 130, 246, 0.3);
   border-radius: 25rpx;
   overflow: hidden;
   padding: 40rpx 30rpx 30rpx 30rpx;
   backdrop-filter: blur(15px);
-  box-shadow: 0 20rpx 60rpx rgba(255, 123, 123, 0.2);
+  box-shadow: 0 20rpx 60rpx rgba(59, 130, 246, 0.2);
   animation: modal-show 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
@@ -807,24 +725,35 @@ const connectDevice = () => {
   }
 }
 
-@keyframes gentle-float {
+@keyframes star-twinkle {
   0%, 100% {
-    transform: translateY(0) rotate(0deg);
+    opacity: 0.3;
+    transform: scale(0.8);
+    box-shadow: 0 0 4px rgba(249, 224, 118, 0.4);
   }
-  33% {
-    transform: translateY(-10px) rotate(2deg);
+  25% {
+    opacity: 0.7;
+    transform: scale(1.1);
+    box-shadow: 0 0 8px rgba(249, 224, 118, 0.7);
   }
-  66% {
-    transform: translateY(5px) rotate(-1deg);
+  50% {
+    opacity: 1;
+    transform: scale(1.3);
+    box-shadow: 0 0 12px rgba(249, 224, 118, 1);
+  }
+  75% {
+    opacity: 0.8;
+    transform: scale(1.1);
+    box-shadow: 0 0 8px rgba(249, 224, 118, 0.8);
   }
 }
 
-@keyframes gentle-sway {
-  0%, 100% {
-    transform: rotate(-1deg);
+@keyframes star-rotate {
+  0% {
+    transform: rotate(0deg);
   }
-  50% {
-    transform: rotate(1deg);
+  100% {
+    transform: rotate(360deg);
   }
 }
 
@@ -870,4 +799,185 @@ const connectDevice = () => {
     gap: 16rpx;
   }
 }
+
+
+/* 详情弹窗样式 */
+.detail-modal {
+  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;
+  z-index: 1000;
+  backdrop-filter: blur(10px);
+  animation: fade-in 0.3s ease-out;
+}
+
+.detail-modal-content {
+  width: 90%;
+  max-width: 600rpx;
+  max-height: 80vh;
+  background: rgba(255, 255, 255, 0.95);
+  border: 3rpx solid rgba(59, 130, 246, 0.3);
+  border-radius: 25rpx;
+  overflow: hidden;
+  backdrop-filter: blur(15px);
+  box-shadow: 0 20rpx 60rpx rgba(59, 130, 246, 0.2);
+  display: flex;
+  flex-direction: column;
+  animation: detail-show 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.detail-cover-container {
+  width: 100%;
+  height: 300rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.1));
+  overflow: hidden;
+  position: relative;
+}
+
+.detail-cover {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 20rpx;
+  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transform: scale(0.8);
+  opacity: 0;
+}
+
+.detail-cover.cover-zoomed {
+  transform: scale(1.2);
+  opacity: 1;
+  animation: cover-zoom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.detail-info {
+  padding: 30rpx;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  transform: translateY(100rpx);
+  opacity: 0;
+  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition-delay: 0.3s;
+}
+
+.detail-info.info-visible {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.detail-tag {
+  background: linear-gradient(135deg, #8a2be2, #6b2c9c);
+  color: #fff;
+  padding: 8rpx 20rpx;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+  font-weight: bold;
+  text-align: center;
+  align-self: flex-start;
+  margin-bottom: 20rpx;
+}
+
+.detail-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  margin-bottom: 20rpx;
+  line-height: 1.4;
+}
+
+.detail-description {
+  flex: 1;
+  max-height: 200rpx;
+  margin-bottom: 30rpx;
+}
+
+.description-text {
+  font-size: 26rpx;
+  color: #666;
+  line-height: 1.6;
+  padding: 20rpx;
+  background: rgba(248, 246, 240, 0.8);
+  border-radius: 15rpx;
+  border: 1rpx solid rgba(59, 130, 246, 0.2);
+}
+
+.detail-actions {
+  display: flex;
+  gap: 20rpx;
+  justify-content: center;
+  padding-top: 20rpx;
+  border-top: 1rpx solid rgba(59, 130, 246, 0.2);
+}
+
+.detail-btn {
+  flex: 1;
+  padding: 16rpx 32rpx;
+  border-radius: 25rpx;
+  font-size: 28rpx;
+  font-weight: bold;
+  transition: all 0.3s ease;
+}
+
+.detail-btn.cancel {
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+  border: 2rpx solid rgba(138, 43, 226, 0.3);
+}
+
+.detail-btn.confirm {
+  background: linear-gradient(135deg, #8a2be2, #6b2c9c);
+  color: #fff;
+  border: none;
+}
+
+.detail-btn:hover {
+  transform: translateY(-2rpx);
+  box-shadow: 0 8rpx 20rpx rgba(59, 130, 246, 0.3);
+}
+
+/* 动画效果 */
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes detail-show {
+  0% {
+    transform: scale(0.8) translateY(100rpx);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes cover-zoom {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.3);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}
 </style>
diff --git a/src/pages/mine/mine.vue b/src/pages/mine/mine.vue
index 5579a3e..0ac6344 100644
--- a/src/pages/mine/mine.vue
+++ b/src/pages/mine/mine.vue
@@ -1,63 +1,100 @@
 <template>
   <view class="container">
+    <!-- 头部以上背景区域 -->
+    <view class="top-background"></view>
+    
     <!-- 顶部自定义导航栏 -->
     <view class="custom-navbar fixed-navbar">
       <text class="navbar-title">我的</text>
     </view>
     
-    <!-- 用户信息区域 -->
-    <view class="user-info">
-      <image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
-      <view class="user-details" v-if="isLoggedIn">
-        <text class="login-text">{{ nickName }}</text>
-        <text class="user-id">ID: {{ openid }}</text>
-      </view>
-      <view class="user-details" v-else>
-        <text class="login-text">请登录</text>
-        <text class="user-id">ID:</text>
-        <button class="login-btn" @click="handleLogin">{{ loginButtonText }}</button>
-      </view>
-    </view>
-    
-    <!-- 菜单卡片 -->
-    <view class="menu-cards">
-      <!-- 用户须知 -->
-      <view class="menu-card" @click="showAgreement">
-        <view class="card-icon notice-icon">🔊</view>
-        <text class="card-title">用户须知</text>
+    <!-- 可滚动内容区域 -->
+    <scroll-view 
+      class="scroll-container" 
+      scroll-y="true" 
+      enable-back-to-top="false"
+      refresher-enabled="false"
+      :refresher-triggered="false"
+      :refresher-threshold="0"
+      :show-scrollbar="false"
+      :scroll-with-animation="false"
+      :bounces="false"
+      :always-bounce-vertical="false"
+      :scroll-top="0"
+      :upper-threshold="0"
+      :lower-threshold="0"
+    >
+      <!-- 用户信息区域 -->
+      <view class="user-info">
+        <image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
+        <view class="user-details" v-if="isLoggedIn">
+          <text class="login-text">{{ nickName }}</text>
+          <text class="user-id">ID: {{ openid }}</text>
+        </view>
+        <view class="user-details" v-else>
+          <text class="login-text">请登录</text>
+          <text class="user-id">ID:</text>
+          <button class="login-btn" @click="handleLogin">{{ loginButtonText }}</button>
+        </view>
       </view>
       
-      <!-- 用户设备 -->
-      <view class="menu-card">
-        <view class="card-icon device-icon">📦</view>
-        <text class="card-title">用户设备</text>
+      <!-- 余额显示 -->
+      <view class="balance-section" v-if="isLoggedIn">
+        <view class="balance-card">
+          <view class="balance-info">
+            <view class="balance-label">账户余额</view>
+            <view class="balance-amount">¥{{ userBalance }}</view>
+          </view>
+          <view class="balance-actions">
+            <button class="recharge-btn" @click="goToRecharge">充值</button>
+            <button class="history-btn" @click="goToHistory">记录</button>
+          </view>
+        </view>
       </view>
-    </view>
-    
-    <!-- 剧情角色区块 -->
-    <view class="section-block">
-      <view class="section-header">
-        <text class="section-title">剧情角色</text>
-        <text class="view-all">查看全部</text>
+
+      <!-- 菜单卡片 -->
+      <view class="menu-cards">
+        <!-- 用户须知 -->
+        <view class="menu-card" @click="showAgreement">
+          <view class="card-icon notice-icon">🔊</view>
+          <text class="card-title">用户须知</text>
+        </view>
+        
+        <!-- 用户设备 -->
+        <view class="menu-card">
+          <view class="card-icon device-icon">📦</view>
+          <text class="card-title">用户设备</text>
+        </view>
       </view>
-    </view>
-    
-    <!-- 克隆声音区块 -->
-    <view class="section-block">
-      <view class="section-header">
-        <text class="section-title">克隆声音</text>
-        <text class="view-all">查看全部</text>
+      
+      <!-- 剧情角色区块 -->
+      <view class="section-block">
+        <view class="section-header">
+          <text class="section-title">剧情角色</text>
+          <text class="view-all">查看全部</text>
+        </view>
       </view>
-    </view>
-    
-    <!-- 退出登录按钮，仅登录后显示 -->
-    <view class="logout-section">
-      <button class="logout-btn" @click="handleLogout">退出登录</button>
-      <button class="logout-btn" style="margin-top: 20rpx; background-color: #ff9800; color: white;" @click="testDirectApiCall">直接测试API</button>
-      <text style="display: block; margin-top: 20rpx; text-align: center; color: #999;">
-        登录状态: {{ isLoggedIn ? '已登录' : '未登录' }}
-      </text>
-    </view>
+      
+      <!-- 克隆声音区块 -->
+      <view class="section-block">
+        <view class="section-header">
+          <text class="section-title">克隆声音</text>
+          <text class="view-all">查看全部</text>
+        </view>
+      </view>
+      
+      <!-- 退出登录按钮，仅登录后显示 -->
+      <view class="logout-section">
+        <button class="logout-btn" @click="handleLogout">退出登录</button>
+        <button class="logout-btn" style="margin-top: 20rpx; background-color: #ff9800; color: white;" @click="testDirectApiCall">直接测试API</button>
+        <text style="display: block; margin-top: 20rpx; text-align: center; color: #999;">
+          登录状态: {{ isLoggedIn ? '已登录' : '未登录' }}
+        </text>
+      </view>
+      
+      <!-- 底部留白，避免被tabbar遮挡 -->
+      <view class="bottom-spacing"></view>
+    </scroll-view>
     
     <!-- 用户须知弹窗 -->
     <user-agreement 
@@ -71,6 +108,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import { useUserStore } from '@/stores/user.js';
+import { rechargeAPI } from '@/utils/api.js';
 import UserAgreement from '@/components/UserAgreement.vue';
 
 // 状态管理 - 避免直接依赖store的响应式
@@ -82,6 +120,7 @@ const isLoggedIn = ref(false);
 const nickName = ref('');
 const openid = ref('');
 const avatarUrl = ref('/static/default-avatar.png');
+const userBalance = ref(0.00);
 
 // 登录按钮文本
 const loginButtonText = computed(() => {
@@ -128,15 +167,13 @@ onMounted(() => {
   userStore.init();
   // 初始化本地状态
   initUserInfo();
+  // 加载用户余额
+  loadUserBalance();
 });
 
 // 登录处理
 const handleLogin = async () => {
   try {
-    // 先清理假登录数据
-    console.log('开始登录，先清理假登录数据...');
-    userStore.clearFakeLoginData();
-    
     uni.showLoading({
       title: '登录中...'
     });
@@ -156,18 +193,11 @@ const handleLogin = async () => {
     uni.hideLoading();
     console.error('Login failed:', error);
     
-    let errorMessage = '登录失败';
-    if (error.message) {
-      errorMessage = error.message;
-    } else if (typeof error === 'string') {
-      errorMessage = error;
-    }
-    
-    // 显示详细的错误信息
-    uni.showModal({
+    // 登录失败
+    uni.showToast({
       title: '登录失败',
-      content: `错误信息：${errorMessage}\n\n请检查：\n1. 网络连接是否正常\n2. 后端服务是否运行\n3. 微信小程序配置是否正确`,
-      showCancel: false
+      icon: 'none',
+      duration: 2000
     });
   }
 };
@@ -339,7 +369,7 @@ const testDirectApiCall = () => {
           showCancel: false,
           success: () => {
             uni.request({
-              url: 'http://8.145.52.111:8084/app/logout',
+              url: 'https://www.aixsy.com.cn/app/logout',
               method: 'POST',
               header: {
                 'Content-Type': 'application/json'
@@ -376,11 +406,11 @@ Token: ${currentToken || '无'}
                 showCancel: false,
                 success: () => {
                   uni.request({
-                    url: 'http://8.145.52.111:8084/app/logout',
+                    url: 'https://www.aixsy.com.cn/app/logout',
                     method: 'POST',
                     header: {
                       'Content-Type': 'application/json',
-                      'Authorization': currentToken || ''
+                      'Authorization': currentToken ? (currentToken.startsWith('Bearer ') ? currentToken : 'Bearer ' + currentToken) : ''
                     },
                     complete: (res) => {
                       uni.showModal({
@@ -399,7 +429,7 @@ Token: ${currentToken || '无'}
                 content: `尝试带token参数的URL`,
                 showCancel: false,
                 success: () => {
-                  const url = `http://8.145.52.111:8084/app/logout?token=${currentToken || ''}`;
+                  const url = `https://www.aixsy.com.cn/app/logout?token=${currentToken || ''}`;  
                   uni.request({
                     url: url,
                     method: 'POST',
@@ -423,34 +453,86 @@ Token: ${currentToken || '无'}
     }
   });
 };
+
+// 加载用户余额
+const loadUserBalance = async () => {
+  if (!isLoggedIn.value) return;
+  
+  try {
+    const result = await rechargeAPI.getUserBalance();
+    if (result.success) {
+      userBalance.value = result.data.balance || 0;
+    }
+  } catch (error) {
+    console.error('获取用户余额失败:', error);
+  }
+};
+
+// 跳转到充值页面
+const goToRecharge = () => {
+  uni.navigateTo({
+    url: '/pages/recharge/recharge'
+  });
+};
+
+// 跳转到充值记录页面
+const goToHistory = () => {
+  uni.navigateTo({
+    url: '/pages/recharge/history'
+  });
+};
 </script>
 
 <style scoped>
 .fixed-navbar {
   position: fixed;
-  top: 0;
+  top: 100rpx;
   left: 0;
   width: 100vw;
   z-index: 100;
 }
 .container {
-  background: #fff9f2;
+  background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
   min-height: 100vh;
-  padding-top: 100rpx;
+  padding-top: 200rpx;
   padding-bottom: 120rpx;
 }
+
+/* 滚动容器样式 */
+.scroll-container {
+  height: calc(100vh - 200rpx);
+  z-index: 2;
+  position: relative;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(5px);
+  overflow: hidden;
+}
+
+/* 头部以上背景区域 */
+.top-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100rpx;
+  background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
+  z-index: 99;
+}
 .custom-navbar {
   height: 100rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #fff9f2;
+  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);
   font-weight: bold;
   font-size: 38rpx;
   letter-spacing: 2rpx;
 }
 .navbar-title {
-  color: #333;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
 }
 
 /* 用户信息区域 */
@@ -458,7 +540,55 @@ Token: ${currentToken || '无'}
   display: flex;
   align-items: center;
   padding: 32rpx;
-  background: #fff9f2;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+}
+
+/* 余额区域 */
+.balance-section {
+  padding: 0 24rpx 24rpx;
+}
+
+.balance-card {
+  background: linear-gradient(135deg, #8a2be2 0%, #6b2c9c 100%);
+  border-radius: 20rpx;
+  padding: 30rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #fff;
+  box-shadow: 0 8rpx 30rpx rgba(138, 43, 226, 0.3);
+}
+
+.balance-info .balance-label {
+  font-size: 28rpx;
+  opacity: 0.9;
+  margin-bottom: 8rpx;
+}
+
+.balance-info .balance-amount {
+  font-size: 48rpx;
+  font-weight: bold;
+}
+
+.balance-actions {
+  display: flex;
+  gap: 20rpx;
+}
+
+.balance-actions .recharge-btn,
+.balance-actions .history-btn {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+  border: 1rpx solid rgba(255, 255, 255, 0.3);
+  border-radius: 30rpx;
+  padding: 16rpx 24rpx;
+  font-size: 26rpx;
+  min-width: 100rpx;
+}
+
+.balance-actions .recharge-btn {
+  background: rgba(255, 255, 255, 0.3);
 }
 .avatar {
   width: 140rpx;
@@ -501,15 +631,18 @@ Token: ${currentToken || '无'}
   display: flex;
   align-items: center;
   padding: 40rpx 30rpx;
-  background: #fff;
+  background: rgba(255, 255, 255, 0.9);
+  border: 2rpx solid rgba(138, 43, 226, 0.3);
   border-radius: 20rpx;
   margin-bottom: 24rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+  box-shadow: 0 6rpx 25rpx rgba(138, 43, 226, 0.15);
+  backdrop-filter: blur(8px);
 }
 .card-icon {
   font-size: 48rpx;
-  color: #ff9800;
+  color: #8a2be2;
   margin-right: 24rpx;
+  filter: drop-shadow(0 2rpx 4rpx rgba(138, 43, 226, 0.3));
 }
 .card-title {
   font-size: 32rpx;
@@ -518,11 +651,14 @@ Token: ${currentToken || '无'}
 
 /* 区块样式 */
 .section-block {
-  background: #fff;
+  background: rgba(255, 255, 255, 0.9);
+  border: 2rpx solid rgba(138, 43, 226, 0.3);
   border-radius: 20rpx;
   margin: 24rpx;
   padding: 30rpx;
   margin-bottom: 24rpx;
+  box-shadow: 0 6rpx 25rpx rgba(138, 43, 226, 0.15);
+  backdrop-filter: blur(8px);
 }
 .section-header {
   display: flex;
@@ -544,9 +680,17 @@ Token: ${currentToken || '无'}
 }
 .logout-btn {
   width: 100%;
-  background-color: #f5f5f5;
-  color: #666;
+  background: rgba(255, 255, 255, 0.9);
+  color: #8a2be2;
   font-size: 30rpx;
-  border-radius: 8rpx;
+  border: 2rpx solid rgba(138, 43, 226, 0.3);
+  border-radius: 20rpx;
+  box-shadow: 0 4rpx 15rpx rgba(138, 43, 226, 0.2);
+  backdrop-filter: blur(8px);
+}
+
+/* 底部留白 */
+.bottom-spacing {
+  height: 40rpx;
 }
 </style> 
\ No newline at end of file
diff --git a/src/pages/recharge/history.vue b/src/pages/recharge/history.vue
new file mode 100644
index 0000000..ad0ffda
--- /dev/null
+++ b/src/pages/recharge/history.vue
@@ -0,0 +1,520 @@
+<template>
+  <view class="history-container">
+    <!-- 顶部导航 -->
+    <view class="nav-bar">
+      <view class="nav-content">
+        <view class="nav-left" @click="goBack">
+          <text class="nav-icon">‹</text>
+        </view>
+        <view class="nav-title">充值记录</view>
+        <view class="nav-right"></view>
+      </view>
+    </view>
+
+    <!-- 筛选条件 -->
+    <view class="filter-section">
+      <view class="filter-tabs">
+        <view 
+          v-for="(tab, index) in filterTabs" 
+          :key="index"
+          class="filter-tab"
+          :class="{ active: currentFilter === tab.value }"
+          @click="selectFilter(tab.value)"
+        >
+          {{ tab.label }}
+        </view>
+      </view>
+    </view>
+
+    <!-- 记录列表 -->
+    <view class="record-list">
+      <view v-if="isLoading && recordList.length === 0" class="loading-state">
+        <view class="loading-spinner"></view>
+        <text class="loading-text">加载中...</text>
+      </view>
+      
+      <view v-else-if="recordList.length === 0" class="empty-state">
+        <view class="empty-icon">📝</view>
+        <text class="empty-text">暂无充值记录</text>
+        <button class="recharge-btn" @click="goToRecharge">立即充值</button>
+      </view>
+      
+      <view v-else>
+        <view 
+          v-for="(record, index) in recordList" 
+          :key="index"
+          class="record-item"
+        >
+          <view class="record-header">
+            <view class="record-amount">
+              <text class="amount-symbol">+</text>
+              <text class="amount-value">¥{{ record.amount }}</text>
+            </view>
+            <view class="record-status" :class="record.status">
+              {{ getStatusText(record.status) }}
+            </view>
+          </view>
+          
+          <view class="record-details">
+            <view class="detail-item">
+              <text class="detail-label">订单号：</text>
+              <text class="detail-value">{{ record.orderId }}</text>
+            </view>
+            <view class="detail-item">
+              <text class="detail-label">支付方式：</text>
+              <text class="detail-value">{{ getPaymentMethodText(record.paymentMethod) }}</text>
+            </view>
+            <view class="detail-item">
+              <text class="detail-label">充值时间：</text>
+              <text class="detail-value">{{ formatTime(record.createTime) }}</text>
+            </view>
+            <view class="detail-item" v-if="record.bonusAmount > 0">
+              <text class="detail-label">赠送金额：</text>
+              <text class="detail-value bonus">+¥{{ record.bonusAmount }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 加载更多 -->
+    <view v-if="hasMore && !isLoading" class="load-more" @click="loadMore">
+      <text class="load-more-text">加载更多</text>
+    </view>
+    
+    <view v-if="isLoading && recordList.length > 0" class="loading-more">
+      <view class="loading-spinner small"></view>
+      <text class="loading-text">加载中...</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import { rechargeAPI } from '@/utils/api.js'
+
+export default {
+  name: 'RechargeHistoryPage',
+  data() {
+    return {
+      recordList: [], // 充值记录列表
+      currentFilter: 'all', // 当前筛选条件
+      isLoading: false, // 是否正在加载
+      hasMore: true, // 是否还有更多数据
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      
+      // 筛选选项
+      filterTabs: [
+        { label: '全部', value: 'all' },
+        { label: '成功', value: 'success' },
+        { label: '失败', value: 'failed' },
+        { label: '处理中', value: 'pending' }
+      ]
+    }
+  },
+  
+  onLoad() {
+    this.loadRecordList()
+  },
+  
+  onPullDownRefresh() {
+    this.refreshData()
+  },
+  
+  onReachBottom() {
+    if (this.hasMore && !this.isLoading) {
+      this.loadMore()
+    }
+  },
+  
+  methods: {
+    // 返回上一页
+    goBack() {
+      uni.navigateBack()
+    },
+    
+    // 跳转到充值页面
+    goToRecharge() {
+      uni.navigateTo({
+        url: '/pages/recharge/recharge'
+      })
+    },
+    
+    // 选择筛选条件
+    selectFilter(filter) {
+      if (this.currentFilter === filter) return
+      
+      this.currentFilter = filter
+      this.refreshData()
+    },
+    
+    // 刷新数据
+    async refreshData() {
+      this.currentPage = 1
+      this.hasMore = true
+      this.recordList = []
+      await this.loadRecordList()
+      
+      // 停止下拉刷新
+      uni.stopPullDownRefresh()
+    },
+    
+    // 加载更多
+    async loadMore() {
+      if (!this.hasMore || this.isLoading) return
+      
+      this.currentPage++
+      await this.loadRecordList()
+    },
+    
+    // 加载充值记录列表
+    async loadRecordList() {
+      if (this.isLoading) return
+      
+      this.isLoading = true
+      
+      try {
+        const params = {
+          page: this.currentPage,
+          pageSize: this.pageSize
+        }
+        
+        // 添加状态筛选
+        if (this.currentFilter !== 'all') {
+          params.status = this.currentFilter
+        }
+        
+        const result = await rechargeAPI.getRechargeHistory(params)
+        
+        if (result.success) {
+          const newRecords = result.data.records || []
+          
+          if (this.currentPage === 1) {
+            this.recordList = newRecords
+          } else {
+            this.recordList = [...this.recordList, ...newRecords]
+          }
+          
+          // 判断是否还有更多数据
+          this.hasMore = newRecords.length === this.pageSize
+        } else {
+          uni.showToast({
+            title: result.error?.message || '加载失败',
+            icon: 'none'
+          })
+        }
+      } catch (error) {
+        console.error('加载充值记录失败:', error)
+        uni.showToast({
+          title: '加载失败，请重试',
+          icon: 'none'
+        })
+      } finally {
+        this.isLoading = false
+      }
+    },
+    
+    // 获取状态文本
+    getStatusText(status) {
+      const statusMap = {
+        'success': '充值成功',
+        'failed': '充值失败',
+        'pending': '处理中',
+        'cancelled': '已取消'
+      }
+      return statusMap[status] || '未知状态'
+    },
+    
+    // 获取支付方式文本
+    getPaymentMethodText(method) {
+      const methodMap = {
+        'wechat': '微信支付',
+        'alipay': '支付宝',
+        'bank': '银行卡'
+      }
+      return methodMap[method] || '未知方式'
+    },
+    
+    // 格式化时间
+    formatTime(timestamp) {
+      if (!timestamp) return ''
+      
+      const date = new Date(timestamp)
+      const now = new Date()
+      const diff = now - date
+      
+      // 小于1分钟
+      if (diff < 60000) {
+        return '刚刚'
+      }
+      
+      // 小于1小时
+      if (diff < 3600000) {
+        return Math.floor(diff / 60000) + '分钟前'
+      }
+      
+      // 小于1天
+      if (diff < 86400000) {
+        return Math.floor(diff / 3600000) + '小时前'
+      }
+      
+      // 超过1天，显示具体日期
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hour = String(date.getHours()).padStart(2, '0')
+      const minute = String(date.getMinutes()).padStart(2, '0')
+      
+      return `${year}-${month}-${day} ${hour}:${minute}`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.history-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+// 导航栏
+.nav-bar {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding-top: var(--status-bar-height);
+  
+  .nav-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 88rpx;
+    padding: 0 30rpx;
+    
+    .nav-left {
+      width: 60rpx;
+      height: 60rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      .nav-icon {
+        font-size: 40rpx;
+        color: #fff;
+        font-weight: bold;
+      }
+    }
+    
+    .nav-title {
+      font-size: 36rpx;
+      font-weight: 600;
+      color: #fff;
+    }
+    
+    .nav-right {
+      width: 60rpx;
+    }
+  }
+}
+
+// 筛选条件
+.filter-section {
+  background: #fff;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #e5e5e5;
+  
+  .filter-tabs {
+    display: flex;
+    gap: 20rpx;
+    
+    .filter-tab {
+      padding: 16rpx 32rpx;
+      background: #f5f5f5;
+      border-radius: 40rpx;
+      font-size: 28rpx;
+      color: #666;
+      transition: all 0.3s ease;
+      
+      &.active {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #fff;
+      }
+    }
+  }
+}
+
+// 记录列表
+.record-list {
+  padding: 30rpx;
+  
+  .loading-state,
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 100rpx 0;
+    
+    .loading-spinner {
+      width: 60rpx;
+      height: 60rpx;
+      border: 4rpx solid #e5e5e5;
+      border-top: 4rpx solid #667eea;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: 20rpx;
+    }
+    
+    .loading-text {
+      font-size: 28rpx;
+      color: #999;
+    }
+  }
+  
+  .empty-state {
+    .empty-icon {
+      font-size: 120rpx;
+      margin-bottom: 30rpx;
+    }
+    
+    .empty-text {
+      font-size: 32rpx;
+      color: #999;
+      margin-bottom: 40rpx;
+    }
+    
+    .recharge-btn {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: #fff;
+      border: none;
+      border-radius: 40rpx;
+      padding: 20rpx 40rpx;
+      font-size: 28rpx;
+    }
+  }
+  
+  .record-item {
+    background: #fff;
+    border-radius: 16rpx;
+    padding: 30rpx;
+    margin-bottom: 20rpx;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+    
+    .record-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20rpx;
+      
+      .record-amount {
+        display: flex;
+        align-items: baseline;
+        
+        .amount-symbol {
+          font-size: 32rpx;
+          color: #07c160;
+          font-weight: bold;
+          margin-right: 4rpx;
+        }
+        
+        .amount-value {
+          font-size: 40rpx;
+          color: #07c160;
+          font-weight: bold;
+        }
+      }
+      
+      .record-status {
+        padding: 8rpx 16rpx;
+        border-radius: 20rpx;
+        font-size: 24rpx;
+        
+        &.success {
+          background: #e8f5e8;
+          color: #07c160;
+        }
+        
+        &.failed {
+          background: #ffe8e8;
+          color: #ff4757;
+        }
+        
+        &.pending {
+          background: #fff3cd;
+          color: #ffc107;
+        }
+      }
+    }
+    
+    .record-details {
+      .detail-item {
+        display: flex;
+        margin-bottom: 12rpx;
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
+        
+        .detail-label {
+          font-size: 26rpx;
+          color: #999;
+          width: 140rpx;
+          flex-shrink: 0;
+        }
+        
+        .detail-value {
+          font-size: 26rpx;
+          color: #333;
+          flex: 1;
+          
+          &.bonus {
+            color: #ff6b6b;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 加载更多
+.load-more {
+  text-align: center;
+  padding: 30rpx;
+  
+  .load-more-text {
+    font-size: 28rpx;
+    color: #667eea;
+  }
+}
+
+.loading-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30rpx;
+  
+  .loading-spinner {
+    width: 40rpx;
+    height: 40rpx;
+    border: 3rpx solid #e5e5e5;
+    border-top: 3rpx solid #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-right: 20rpx;
+    
+    &.small {
+      width: 30rpx;
+      height: 30rpx;
+      border-width: 2rpx;
+    }
+  }
+  
+  .loading-text {
+    font-size: 26rpx;
+    color: #999;
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>
diff --git a/src/pages/recharge/recharge.vue b/src/pages/recharge/recharge.vue
new file mode 100644
index 0000000..ecc5e34
--- /dev/null
+++ b/src/pages/recharge/recharge.vue
@@ -0,0 +1,719 @@
+<template>
+  <view class="recharge-container">
+    <!-- 顶部导航 -->
+    <view class="nav-bar">
+      <view class="nav-content">
+        <view class="nav-left" @click="goBack">
+          <text class="nav-icon">‹</text>
+        </view>
+        <view class="nav-title">会员充值</view>
+        <view class="nav-right"></view>
+      </view>
+    </view>
+
+    <!-- 用户余额显示 -->
+    <view class="balance-section">
+      <view class="balance-card">
+        <view class="balance-label">当前余额</view>
+        <view class="balance-amount">¥{{ userBalance }}</view>
+        <view class="balance-tip">充值后余额可用于AI对话和语音服务</view>
+      </view>
+    </view>
+
+    <!-- 充值金额选择 -->
+    <view class="amount-section">
+      <view class="section-title">选择充值金额</view>
+      <view class="amount-grid">
+        <view 
+          v-for="(amount, index) in rechargeAmounts" 
+          :key="index"
+          class="amount-item"
+          :class="{ active: selectedAmount === amount.value }"
+          @click="selectAmount(amount.value)"
+        >
+          <view class="amount-value">¥{{ amount.value }}</view>
+        </view>
+      </view>
+      
+      <!-- 自定义金额输入 -->
+      <view class="custom-amount">
+        <view class="custom-label">自定义金额</view>
+        <view class="custom-input-wrapper">
+          <text class="currency-symbol">¥</text>
+          <input 
+            class="custom-input"
+            type="digit"
+            placeholder="请输入金额"
+            v-model="customAmount"
+            @input="onCustomAmountInput"
+            @focus="onCustomAmountFocus"
+          />
+        </view>
+        <view class="amount-tips">
+          <text class="tip-item">最低充值：¥1</text>
+          <text class="tip-item">最高充值：¥1000</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 支付方式选择 -->
+    <view class="payment-section">
+      <view class="section-title">支付方式</view>
+      <view class="payment-methods">
+        <view 
+          class="payment-item"
+          :class="{ active: selectedPayment === 'wechat' }"
+          @click="selectPayment('wechat')"
+        >
+          <view class="payment-icon wechat-icon">💳</view>
+          <view class="payment-info">
+            <view class="payment-name">微信支付</view>
+            <view class="payment-desc">安全便捷，支持免密支付</view>
+          </view>
+          <view class="payment-radio">
+            <view class="radio-dot" v-if="selectedPayment === 'wechat'"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 充值说明 -->
+    <view class="notice-section">
+      <view class="notice-title">充值说明</view>
+      <view class="notice-content">
+        <view class="notice-item">• 充值金额实时到账，可用于AI对话服务</view>
+        <view class="notice-item">• 余额永久有效，无使用期限</view>
+        <view class="notice-item">• 充值成功后不支持退款，请谨慎操作</view>
+        <view class="notice-item">• 如有问题请联系客服</view>
+      </view>
+    </view>
+
+    <!-- 底部充值按钮 -->
+    <view class="bottom-section">
+      <view class="recharge-summary">
+        <view class="summary-item">
+          <text class="summary-label">充值金额：</text>
+          <text class="summary-value">¥{{ finalAmount }}</text>
+        </view>
+        <view class="summary-item total">
+          <text class="summary-label">到账金额：</text>
+          <text class="summary-value">¥{{ finalAmount }}</text>
+        </view>
+      </view>
+      
+      <button 
+        class="recharge-btn"
+        :class="{ disabled: !canRecharge }"
+        :disabled="!canRecharge"
+        @click="handleRecharge"
+      >
+        <text class="btn-text">立即充值 ¥{{ finalAmount }}</text>
+      </button>
+    </view>
+
+    <!-- 加载遮罩 -->
+    <view class="loading-mask" v-if="isLoading">
+      <view class="loading-content">
+        <view class="loading-spinner"></view>
+        <view class="loading-text">{{ loadingText }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { rechargeAPI } from '@/utils/api.js'
+
+export default {
+  name: 'RechargePage',
+  data() {
+    return {
+      userBalance: 0.00, // 用户当前余额
+      selectedAmount: 0, // 选中的充值金额
+      customAmount: '', // 自定义金额
+      selectedPayment: 'wechat', // 选中的支付方式
+      isLoading: false, // 是否正在加载
+      loadingText: '处理中...', // 加载文本
+      
+      // 充值金额选项
+      rechargeAmounts: [
+        { value: 10, bonus: 0 },
+        { value: 20, bonus: 0 },
+        { value: 50, bonus: 0 },
+        { value: 100, bonus: 0 },
+        { value: 200, bonus: 0 },
+        { value: 500, bonus: 0 }
+      ]
+    }
+  },
+  
+  computed: {
+    // 最终充值金额
+    finalAmount() {
+      if (this.customAmount && parseFloat(this.customAmount) > 0) {
+        return parseFloat(this.customAmount)
+      }
+      return this.selectedAmount
+    },
+    
+    // 赠送金额（已取消赠送服务）
+    bonusAmount() {
+      return 0 // 所有充值金额都不赠送
+    },
+    
+    // 是否可以充值
+    canRecharge() {
+      return this.finalAmount >= 1 && this.finalAmount <= 1000 && this.selectedPayment
+    }
+  },
+  
+  onLoad() {
+    this.loadUserBalance()
+  },
+  
+  methods: {
+    // 返回上一页
+    goBack() {
+      uni.navigateBack()
+    },
+    
+    // 加载用户余额
+    async loadUserBalance() {
+      try {
+        const result = await rechargeAPI.getUserBalance()
+        if (result.success) {
+          this.userBalance = result.data.balance || 0
+        }
+      } catch (error) {
+        console.error('获取用户余额失败:', error)
+        uni.showToast({
+          title: '获取余额失败',
+          icon: 'none'
+        })
+      }
+    },
+    
+    // 选择充值金额
+    selectAmount(amount) {
+      this.selectedAmount = amount
+      this.customAmount = '' // 清空自定义金额
+    },
+    
+    // 自定义金额输入
+    onCustomAmountInput(e) {
+      const value = e.detail.value
+      // 只允许数字和小数点
+      if (!/^\d*\.?\d*$/.test(value)) {
+        this.customAmount = this.customAmount.replace(/[^\d.]/g, '')
+        return
+      }
+      
+      // 限制小数点后最多两位
+      if (value.includes('.')) {
+        const parts = value.split('.')
+        if (parts[1] && parts[1].length > 2) {
+          this.customAmount = parts[0] + '.' + parts[1].substring(0, 2)
+          return
+        }
+      }
+      
+      this.customAmount = value
+      this.selectedAmount = 0 // 清空预设金额选择
+    },
+    
+    // 自定义金额获得焦点
+    onCustomAmountFocus() {
+      this.selectedAmount = 0
+    },
+    
+    // 选择支付方式
+    selectPayment(payment) {
+      this.selectedPayment = payment
+    },
+    
+    // 处理充值
+    async handleRecharge() {
+      if (!this.canRecharge) {
+        uni.showToast({
+          title: '请选择充值金额',
+          icon: 'none'
+        })
+        return
+      }
+      
+      // 检查金额范围
+      if (this.finalAmount < 1) {
+        uni.showToast({
+          title: '充值金额不能少于1元',
+          icon: 'none'
+        })
+        return
+      }
+      
+      if (this.finalAmount > 1000) {
+        uni.showToast({
+          title: '充值金额不能超过1000元',
+          icon: 'none'
+        })
+        return
+      }
+      
+      this.isLoading = true
+      this.loadingText = '创建订单中...'
+      
+      try {
+        // 1. 创建充值订单
+        const orderResult = await rechargeAPI.createRechargeOrder({
+          amount: this.finalAmount,
+          paymentMethod: this.selectedPayment
+        })
+        
+        if (!orderResult.success) {
+          throw new Error(orderResult.error?.message || '创建订单失败')
+        }
+        
+        this.loadingText = '调起支付中...'
+        
+        // 2. 调起微信支付
+        const paymentResult = await this.requestPayment(orderResult.data.paymentParams)
+        
+        if (paymentResult.success) {
+          // 3. 支付成功，更新余额
+          this.loadingText = '更新余额中...'
+          await this.loadUserBalance()
+          
+          uni.showToast({
+            title: '充值成功',
+            icon: 'success'
+          })
+          
+          // 延迟返回上一页
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 1500)
+        } else {
+          throw new Error(paymentResult.error?.message || '支付失败')
+        }
+        
+      } catch (error) {
+        console.error('充值失败:', error)
+        uni.showToast({
+          title: error.message || '充值失败，请重试',
+          icon: 'none'
+        })
+      } finally {
+        this.isLoading = false
+      }
+    },
+    
+    // 调起微信支付
+    requestPayment(paymentParams) {
+      return new Promise((resolve) => {
+        uni.requestPayment({
+          ...paymentParams,
+          success: (res) => {
+            console.log('支付成功:', res)
+            resolve({ success: true, data: res })
+          },
+          fail: (err) => {
+            console.error('支付失败:', err)
+            if (err.errMsg && err.errMsg.includes('cancel')) {
+              resolve({ success: false, error: { message: '用户取消支付' } })
+            } else {
+              resolve({ success: false, error: err })
+            }
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.recharge-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: 120rpx;
+}
+
+// 导航栏
+.nav-bar {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding-top: var(--status-bar-height);
+  
+  .nav-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 88rpx;
+    padding: 0 30rpx;
+    
+    .nav-left {
+      width: 60rpx;
+      height: 60rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      .nav-icon {
+        font-size: 40rpx;
+        color: #fff;
+        font-weight: bold;
+      }
+    }
+    
+    .nav-title {
+      font-size: 36rpx;
+      font-weight: 600;
+      color: #fff;
+    }
+    
+    .nav-right {
+      width: 60rpx;
+    }
+  }
+}
+
+// 余额卡片
+.balance-section {
+  padding: 30rpx;
+  
+  .balance-card {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 20rpx;
+    padding: 40rpx;
+    text-align: center;
+    color: #fff;
+    
+    .balance-label {
+      font-size: 28rpx;
+      opacity: 0.9;
+      margin-bottom: 10rpx;
+    }
+    
+    .balance-amount {
+      font-size: 60rpx;
+      font-weight: bold;
+      margin-bottom: 15rpx;
+    }
+    
+    .balance-tip {
+      font-size: 24rpx;
+      opacity: 0.8;
+    }
+  }
+}
+
+// 金额选择
+.amount-section {
+  padding: 30rpx;
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 30rpx;
+  }
+  
+  .amount-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20rpx;
+    margin-bottom: 40rpx;
+    
+    .amount-item {
+      background: #fff;
+      border: 2rpx solid #e5e5e5;
+      border-radius: 16rpx;
+      padding: 30rpx 20rpx;
+      text-align: center;
+      transition: all 0.3s ease;
+      
+      &.active {
+        border-color: #667eea;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #fff;
+        
+        .amount-bonus {
+          color: rgba(255, 255, 255, 0.9);
+        }
+      }
+      
+      .amount-value {
+        font-size: 32rpx;
+        font-weight: 600;
+        margin-bottom: 8rpx;
+      }
+      
+      .amount-bonus {
+        font-size: 24rpx;
+        color: #ff6b6b;
+      }
+    }
+  }
+  
+  .custom-amount {
+    background: #fff;
+    border-radius: 16rpx;
+    padding: 30rpx;
+    
+    .custom-label {
+      font-size: 28rpx;
+      color: #333;
+      margin-bottom: 20rpx;
+    }
+    
+    .custom-input-wrapper {
+      display: flex;
+      align-items: center;
+      border: 2rpx solid #e5e5e5;
+      border-radius: 12rpx;
+      padding: 0 20rpx;
+      margin-bottom: 20rpx;
+      
+      .currency-symbol {
+        font-size: 32rpx;
+        color: #666;
+        margin-right: 10rpx;
+      }
+      
+      .custom-input {
+        flex: 1;
+        height: 80rpx;
+        font-size: 32rpx;
+        color: #333;
+      }
+    }
+    
+    .amount-tips {
+      display: flex;
+      justify-content: space-between;
+      
+      .tip-item {
+        font-size: 24rpx;
+        color: #999;
+      }
+    }
+  }
+}
+
+// 支付方式
+.payment-section {
+  padding: 0 30rpx 30rpx;
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 30rpx;
+  }
+  
+  .payment-methods {
+    .payment-item {
+      background: #fff;
+      border-radius: 16rpx;
+      padding: 30rpx;
+      display: flex;
+      align-items: center;
+      border: 2rpx solid #e5e5e5;
+      transition: all 0.3s ease;
+      
+      &.active {
+        border-color: #667eea;
+        background: #f8f9ff;
+      }
+      
+      .payment-icon {
+        width: 80rpx;
+        height: 80rpx;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 40rpx;
+        margin-right: 20rpx;
+        
+        &.wechat-icon {
+          background: #07c160;
+          color: #fff;
+        }
+      }
+      
+      .payment-info {
+        flex: 1;
+        
+        .payment-name {
+          font-size: 32rpx;
+          font-weight: 600;
+          color: #333;
+          margin-bottom: 8rpx;
+        }
+        
+        .payment-desc {
+          font-size: 24rpx;
+          color: #999;
+        }
+      }
+      
+      .payment-radio {
+        width: 40rpx;
+        height: 40rpx;
+        border: 2rpx solid #e5e5e5;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        .radio-dot {
+          width: 20rpx;
+          height: 20rpx;
+          background: #667eea;
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+}
+
+// 充值说明
+.notice-section {
+  padding: 0 30rpx 30rpx;
+  
+  .notice-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 20rpx;
+  }
+  
+  .notice-content {
+    background: #fff;
+    border-radius: 16rpx;
+    padding: 30rpx;
+    
+    .notice-item {
+      font-size: 26rpx;
+      color: #666;
+      line-height: 1.6;
+      margin-bottom: 15rpx;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+// 底部区域
+.bottom-section {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  padding: 30rpx;
+  border-top: 1rpx solid #e5e5e5;
+  
+  .recharge-summary {
+    margin-bottom: 30rpx;
+    
+    .summary-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 15rpx;
+      
+      &.total {
+        border-top: 1rpx solid #e5e5e5;
+        padding-top: 15rpx;
+        margin-top: 15rpx;
+        
+        .summary-label,
+        .summary-value {
+          font-size: 32rpx;
+          font-weight: 600;
+          color: #333;
+        }
+      }
+      
+      .summary-label {
+        font-size: 28rpx;
+        color: #666;
+      }
+      
+      .summary-value {
+        font-size: 28rpx;
+        color: #333;
+        font-weight: 600;
+        
+        &.bonus {
+          color: #ff6b6b;
+        }
+      }
+    }
+  }
+  
+  .recharge-btn {
+    width: 100%;
+    height: 88rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 44rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    
+    &.disabled {
+      background: #ccc;
+    }
+    
+    .btn-text {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #fff;
+    }
+  }
+}
+
+// 加载遮罩
+.loading-mask {
+  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: 9999;
+  
+  .loading-content {
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 60rpx 40rpx;
+    text-align: center;
+    
+    .loading-spinner {
+      width: 60rpx;
+      height: 60rpx;
+      border: 4rpx solid #e5e5e5;
+      border-top: 4rpx solid #667eea;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin: 0 auto 20rpx;
+    }
+    
+    .loading-text {
+      font-size: 28rpx;
+      color: #333;
+    }
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>
diff --git a/src/stores/user.js b/src/stores/user.js
index 977379c..8054df4 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -101,7 +101,7 @@ export const useUserStore = defineStore('user', () => {
   function wxLogin(code, userInfo) {
     return new Promise((resolve, reject) => {
       uni.request({
-        url: 'http://8.145.52.111:8091/app/login',
+        url: 'http://localhost:8091/app/login', 
         method: 'POST',
         data: {
           code
@@ -148,11 +148,11 @@ export const useUserStore = defineStore('user', () => {
         
         // 尝试调用登出接口
         uni.request({
-          url: 'http://8.145.52.111:8091/app/logout',
+          url: 'https://www.aixsy.com.cn/app/logout',
           method: 'POST',
           header: {
             'Content-Type': 'application/json',
-            'Authorization': currentToken || ''
+            'Authorization': currentToken ? (currentToken.startsWith('Bearer ') ? currentToken : 'Bearer ' + currentToken) : ''
           },
           data: {
             token: currentToken || ''
diff --git a/src/utils/aiCharacters.js b/src/utils/aiCharacters.js
index fda6c20..efc70a9 100644
--- a/src/utils/aiCharacters.js
+++ b/src/utils/aiCharacters.js
@@ -1,11 +1,11 @@
 // AI角色配置文件
 export const aiCharacters = [
   {
-    id: 5,
-    name: '萌妹小甜',
+    id: 9,
+    name: '萌妹陪你聊天',
     avatar: '/static/logo.png',
     personality: '可爱活泼，喜欢撒娇',
-    greeting: '你好呀～我是小甜，今天想聊什么呢？',
+    greeting: '你好呀～我是萌妹，今天想聊什么呢？',
     voiceStyle: '甜美可爱',
     responseStyle: '活泼俏皮，喜欢用表情符号',
     interests: ['美食', '宠物', '音乐', '旅行'],
@@ -18,11 +18,11 @@ export const aiCharacters = [
     ]
   },
   {
-    id: 6,
-    name: '御姐温柔',
+    id: 10,
+    name: '御姐的温柔夜话',
     avatar: '/static/logo.png',
     personality: '知性优雅，温柔体贴',
-    greeting: '你好，我是温柔，有什么心事可以和我分享。',
+    greeting: '你好，我是御姐，有什么心事可以和我分享。',
     voiceStyle: '温柔知性',
     responseStyle: '成熟稳重，善解人意',
     interests: ['阅读', '艺术', '哲学', '心理学'],
@@ -35,11 +35,11 @@ export const aiCharacters = [
     ]
   },
   {
-    id: 7,
-    name: '童真小天使',
+    id: 11,
+    name: '童真世界探索',
     avatar: '/static/logo.png',
     personality: '纯真可爱，充满好奇心',
-    greeting: '嗨！我是小天使，我们一起探索有趣的世界吧！',
+    greeting: '嗨！我是童真小天使，我们一起探索有趣的世界吧！',
     voiceStyle: '天真烂漫',
     responseStyle: '充满好奇，喜欢提问',
     interests: ['游戏', '动画', '童话', '科学'],
@@ -52,8 +52,8 @@ export const aiCharacters = [
     ]
   },
   {
-    id: 8,
-    name: '贴心男友',
+    id: 12,
+    name: '温暖男友陪伴',
     avatar: '/static/logo.png',
     personality: '温暖体贴，善解人意',
     greeting: '宝贝，今天过得怎么样？有什么想聊的吗？',
@@ -70,7 +70,7 @@ export const aiCharacters = [
   },
   {
     id: 13,
-    name: '搞笑达人',
+    name: '搞笑达人的日常',
     avatar: '/static/logo.png',
     personality: '幽默风趣，善于调节气氛',
     greeting: '哈哈，我是搞笑达人！准备好笑到肚子疼了吗？',
@@ -87,10 +87,10 @@ export const aiCharacters = [
   },
   {
     id: 14,
-    name: '博学智者',
+    name: '博学者的深度对话',
     avatar: '/static/logo.png',
     personality: '知识渊博，思维深刻',
-    greeting: '你好，我是博学智者，让我们进行一场深度对话吧。',
+    greeting: '你好，我是博学者，让我们进行一场深度对话吧。',
     voiceStyle: '沉稳睿智',
     responseStyle: '引经据典，富有哲理',
     interests: ['历史', '文学', '科学', '哲学'],
@@ -104,10 +104,10 @@ export const aiCharacters = [
   },
   {
     id: 15,
-    name: '活力健将',
+    name: '运动健将的正能量',
     avatar: '/static/logo.png',
     personality: '充满活力，积极向上',
-    greeting: '嘿！我是活力健将，让我们一起充满正能量！',
+    greeting: '嘿！我是运动健将，让我们一起充满正能量！',
     voiceStyle: '充满活力',
     responseStyle: '积极向上，充满正能量',
     interests: ['运动', '健身', '户外', '挑战'],
@@ -121,7 +121,7 @@ export const aiCharacters = [
   },
   {
     id: 16,
-    name: '文艺青年',
+    name: '文艺青年的灵感分享',
     avatar: '/static/logo.png',
     personality: '文艺浪漫，富有想象力',
     greeting: '你好，我是文艺青年，让我们一起感受生活的美好。',
@@ -145,6 +145,12 @@ export const getCharacterById = (id) => {
 
 // 根据角色性格生成回复
 export const generateResponse = (character, userMessage) => {
+  // 检查character和sampleResponses是否存在
+  if (!character || !character.sampleResponses || !Array.isArray(character.sampleResponses)) {
+    console.warn('角色信息不完整，使用默认回复');
+    return '抱歉，我现在有点困惑，能再说一遍吗？';
+  }
+  
   const responses = character.sampleResponses;
   const randomIndex = Math.floor(Math.random() * responses.length);
   return responses[randomIndex];
@@ -152,6 +158,17 @@ export const generateResponse = (character, userMessage) => {
 
 // 根据用户消息内容智能选择回复
 export const getSmartResponse = (character, userMessage) => {
+  // 检查参数有效性
+  if (!character) {
+    console.warn('角色信息为空，使用默认回复');
+    return '抱歉，我现在有点困惑，能再说一遍吗？';
+  }
+  
+  if (!userMessage || typeof userMessage !== 'string') {
+    console.warn('用户消息无效，使用默认回复');
+    return '抱歉，我没有听清楚，能再说一遍吗？';
+  }
+  
   const message = userMessage.toLowerCase();
   
   // 根据关键词匹配不同的回复风格
diff --git a/src/utils/api.js b/src/utils/api.js
index 83c1b9b..df866c3 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -1,8 +1,55 @@
 // API服务文件
 import { useUserStore } from '@/stores/user.js';
 
+// 文本清理函数 - 只保留文字和标点符号
+export const cleanText = (text) => {
+  if (!text || typeof text !== 'string') {
+    return '';
+  }
+  
+  // 去除所有HTML标签
+  let cleaned = text.replace(/<[^>]*>/g, '');
+  
+  // 去除Markdown格式标记
+  cleaned = cleaned
+    // 去除粗体标记 **text** 或 __text__
+    .replace(/\*\*([^*]+)\*\*/g, '$1')
+    .replace(/__([^_]+)__/g, '$1')
+    // 去除斜体标记 *text* 或 _text_
+    .replace(/\*([^*]+)\*/g, '$1')
+    .replace(/_([^_]+)_/g, '$1')
+    // 去除删除线标记 ~~text~~
+    .replace(/~~([^~]+)~~/g, '$1')
+    // 去除代码标记 `code`
+    .replace(/`([^`]+)`/g, '$1')
+    // 去除链接标记 [text](url)
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+    // 去除图片标记 ![alt](url)
+    .replace(/!\[([^\]]*)\]\([^)]+\)/g, '$1')
+    // 去除标题标记 # ## ###
+    .replace(/^#{1,6}\s*/gm, '')
+    // 去除列表标记 - * +
+    .replace(/^[\s]*[-*+]\s*/gm, '')
+    // 去除引用标记 >
+    .replace(/^>\s*/gm, '')
+    // 去除水平线标记 --- 或 ***
+    .replace(/^[-*]{3,}$/gm, '');
+  
+  // 去除多余的空白字符和换行
+  cleaned = cleaned
+    // 将多个连续空格和换行替换为单个空格
+    .replace(/\s+/g, ' ')
+    // 去除行首行尾空格
+    .trim();
+  
+  // 去除特殊字符（保留中文、英文、数字、标点符号）
+  cleaned = cleaned.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\s\.,;:!?()（）【】""''""''、，。！？；：]/g, '');
+  
+  return cleaned;
+};
+
 // 基础配置
-const BASE_URL = 'http://8.145.52.111:8091'; // 根据后端地址调整
+const BASE_URL = 'http://localhost:8091'; // 根据后端地址调整
 
 // 检查用户登录状态
 const checkLoginStatus = () => {
@@ -43,7 +90,7 @@ const request = (options) => {
       method: options.method || 'GET',
       header: {
         'Content-Type': 'application/json',
-        'Authorization': loginStatus.token || '',
+        'Authorization': loginStatus.token ? (loginStatus.token.startsWith('Bearer ') ? loginStatus.token : 'Bearer ' + loginStatus.token) : '',
         ...options.header
       },
       data: options.data || {},
@@ -98,15 +145,20 @@ export const chatAPI = {
     }
     
     try {
+      const requestData = {
+        message: params.message,
+        useFunctionCall: false,
+        modelId: params.modelId || null,  // 支持传入modelId，默认为null使用后端默认
+        templateId: params.templateId || params.characterId,  // 支持templateId参数
+        sessionId: params.sessionId || null  // 支持sessionId参数
+      };
+      
+      console.log('发送AI聊天请求，参数:', requestData);
+      
       const response = await request({
         url: '/api/chat/sync',
         method: 'POST',
-        data: {
-          message: params.message,
-          useFunctionCall: false,
-          modelId: null,  // 使用默认模型
-          templateId: params.characterId  // 使用角色模板ID
-        }
+        data: requestData
       });
       
       console.log('API原始响应:', response);
@@ -120,8 +172,13 @@ export const chatAPI = {
       }
       // 如果响应是对象，尝试提取AI回复
       else if (typeof response === 'object' && response !== null) {
-        // 优先处理嵌套结构：res.data.data.response
-        if (response.data && response.data.data && response.data.data.response) {
+        // 优先处理根级别的response字段（根据实际后端响应结构）
+        if (response.response && typeof response.response === 'string') {
+          processedResponse = response.response;
+          console.log('从根级别字段 response 提取回复:', processedResponse);
+        }
+        // 备用：处理嵌套结构：res.data.data.response
+        else if (response.data && response.data.data && response.data.data.response) {
           processedResponse = response.data.data.response;
           console.log('从嵌套结构 data.data.response 提取回复:', processedResponse);
         }
@@ -131,6 +188,17 @@ export const chatAPI = {
           console.log('从字段 data.response 提取回复:', processedResponse);
         }
         // 检查是否为状态消息
+        else if (response.message) {
+          if (response.message === '对话成功') {
+            // 后端返回成功消息，使用默认回复
+            processedResponse = '我收到了你的消息，很高兴和你聊天！';
+            console.log('检测到对话成功状态，使用默认回复');
+          } else {
+            // 如果后端返回了错误信息，抛出错误
+            throw new Error(response.message);
+          }
+        }
+        // 检查data中的message字段
         else if (response.data && response.data.message) {
           if (response.data.message === '对话成功') {
             // 后端返回成功消息，使用默认回复
@@ -172,9 +240,14 @@ export const chatAPI = {
         console.log('未找到有效回复，使用默认回复');
       }
       
+      // 清理文本，只保留文字和标点符号
+      const cleanedResponse = cleanText(processedResponse);
+      console.log('原始回复:', processedResponse);
+      console.log('清理后回复:', cleanedResponse);
+      
       return {
         success: true,
-        data: processedResponse,
+        data: cleanedResponse,
         originalResponse: response
       };
     } catch (error) {
@@ -369,7 +442,7 @@ export const voiceAPI = {
     }
   },
 
-  // 3. 语音对话 - 完整语音交互流程
+  // 3. 语音对话 - 完整语音交互流程（前端发送aac格式，后端转换为wav处理）
   voiceChat: async (filePath, options = {}) => {
     try {
       const loginStatus = checkLoginStatus();
@@ -384,6 +457,7 @@ export const voiceAPI = {
       }
       
       console.log('开始语音对话，文件路径:', filePath);
+      console.log('注意：前端发送aac格式音频，后端需要转换为wav格式进行处理');
       
       // 构建认证头
       let authHeader = '';
@@ -411,13 +485,55 @@ export const voiceAPI = {
               const data = JSON.parse(res.data);
               console.log('语音对话响应数据:', data);
               
-              if (data.code === 200 && data.data) {
+              if (data.code === 200) {
+                // 根据后端实际返回结构提取字段
+                let aiResponse = null;
+                let userText = null;
+                let audioUrl = null;
+                
+                // 从 data.llmResult.response 提取AI回复
+                if (data.data && data.data.llmResult && data.data.llmResult.response) {
+                  aiResponse = data.data.llmResult.response;
+                }
+                
+                // 从 data.sttResult.text 提取用户文本（语音转文字）
+                if (data.data && data.data.sttResult && data.data.sttResult.text) {
+                  userText = data.data.sttResult.text;
+                }
+                
+                // 从 data.ttsResult.audioPath 提取音频路径
+                if (data.data && data.data.ttsResult && data.data.ttsResult.audioPath) {
+                  audioUrl = data.data.ttsResult.audioPath;
+                }
+                
+                // 备用字段提取（保持向后兼容）
+                if (!aiResponse) {
+                  if (data.response && typeof data.response === 'string') {
+                    aiResponse = data.response;
+                  } else if (data.data && data.data.response) {
+                    aiResponse = data.data.response;
+                  }
+                }
+                
+                if (!userText) {
+                  userText = data.userText || data.data?.userText || data.data?.text || data.data?.user_text || data.data?.recognizedText || data.data?.transcription;
+                }
+                
+                if (!audioUrl) {
+                  audioUrl = data.audioPath || data.audioUrl || data.data?.audioUrl || data.data?.url || data.data?.audio_url || data.data?.speechUrl || data.data?.ttsUrl || data.data?.audioPath;
+                }
+                
+                // 清理AI回复文本
+                const cleanedAiResponse = cleanText(aiResponse);
+                console.log('原始AI回复:', aiResponse);
+                console.log('清理后AI回复:', cleanedAiResponse);
+                
                 resolve({
                   success: true,
                   data: {
-                    userText: data.data.userText || data.data.text,
-                    aiResponse: data.data.aiResponse || data.data.response,
-                    audioUrl: data.data.audioUrl || data.data.url
+                    userText: userText,
+                    aiResponse: cleanedAiResponse,
+                    audioUrl: audioUrl
                   }
                 });
               } else {
@@ -452,7 +568,7 @@ export const voiceAPI = {
     }
   },
 
-  // 4. 音频文件上传语音对话
+  // 4. 音频文件上传语音对话（前端发送aac格式，后端转换为wav处理）
   uploadVoiceChat: async (filePath, options = {}) => {
     try {
       const loginStatus = checkLoginStatus();
@@ -467,6 +583,7 @@ export const voiceAPI = {
       }
       
       console.log('开始上传音频文件语音对话，文件路径:', filePath);
+      console.log('注意：前端发送aac格式音频，后端需要转换为wav格式进行处理');
       
       // 构建认证头
       let authHeader = '';
@@ -494,13 +611,55 @@ export const voiceAPI = {
               const data = JSON.parse(res.data);
               console.log('上传音频文件语音对话响应数据:', data);
               
-              if (data.code === 200 && data.data) {
+              if (data.code === 200) {
+                // 根据后端实际返回结构提取字段
+                let aiResponse = null;
+                let userText = null;
+                let audioUrl = null;
+                
+                // 从 data.llmResult.response 提取AI回复
+                if (data.data && data.data.llmResult && data.data.llmResult.response) {
+                  aiResponse = data.data.llmResult.response;
+                }
+                
+                // 从 data.sttResult.text 提取用户文本（语音转文字）
+                if (data.data && data.data.sttResult && data.data.sttResult.text) {
+                  userText = data.data.sttResult.text;
+                }
+                
+                // 从 data.ttsResult.audioPath 提取音频路径
+                if (data.data && data.data.ttsResult && data.data.ttsResult.audioPath) {
+                  audioUrl = data.data.ttsResult.audioPath;
+                }
+                
+                // 备用字段提取（保持向后兼容）
+                if (!aiResponse) {
+                  if (data.response && typeof data.response === 'string') {
+                    aiResponse = data.response;
+                  } else if (data.data && data.data.response) {
+                    aiResponse = data.data.response;
+                  }
+                }
+                
+                if (!userText) {
+                  userText = data.userText || data.data?.userText || data.data?.text || data.data?.user_text || data.data?.recognizedText || data.data?.transcription;
+                }
+                
+                if (!audioUrl) {
+                  audioUrl = data.audioPath || data.audioUrl || data.data?.audioUrl || data.data?.url || data.data?.audio_url || data.data?.speechUrl || data.data?.ttsUrl || data.data?.audioPath;
+                }
+                
+                // 清理AI回复文本
+                const cleanedAiResponse = cleanText(aiResponse);
+                console.log('原始AI回复:', aiResponse);
+                console.log('清理后AI回复:', cleanedAiResponse);
+                
                 resolve({
                   success: true,
                   data: {
-                    userText: data.data.userText || data.data.text,
-                    aiResponse: data.data.aiResponse || data.data.response,
-                    audioUrl: data.data.audioUrl || data.data.url
+                    userText: userText,
+                    aiResponse: cleanedAiResponse,
+                    audioUrl: audioUrl
                   }
                 });
               } else {
@@ -550,5 +709,256 @@ export const voiceAPI = {
   }
 };
 
+// 充值相关API
+export const rechargeAPI = {
+  // 获取用户余额
+  getUserBalance: async () => {
+    try {
+      const response = await request({
+        url: '/api/recharge/balance',
+        method: 'GET'
+      });
+      
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('获取用户余额失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 创建充值订单
+  createRechargeOrder: async (orderData) => {
+    try {
+      const response = await request({
+        url: '/api/recharge/create-order',
+        method: 'POST',
+        data: {
+          amount: orderData.amount,
+          paymentMethod: orderData.paymentMethod || 'wechat',
+          bonusAmount: 0 // 已取消赠送服务
+        }
+      });
+      
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('创建充值订单失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 查询订单状态
+  getOrderStatus: async (orderId) => {
+    try {
+      const response = await request({
+        url: `/api/recharge/order-status/${orderId}`,
+        method: 'GET'
+      });
+      
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('查询订单状态失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 获取充值记录
+  getRechargeHistory: async (params = {}) => {
+    try {
+      const response = await request({
+        url: '/api/recharge/history',
+        method: 'GET',
+        data: {
+          page: params.page || 1,
+          pageSize: params.pageSize || 10,
+          startDate: params.startDate,
+          endDate: params.endDate
+        }
+      });
+      
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('获取充值记录失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  }
+};
+
+// 角色相关API
+export const roleAPI = {
+  // 获取角色列表
+  getRoles: async () => {
+    try {
+      const response = await request({
+        url: '/api/role/query',
+        method: 'GET'
+      });
+      
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('获取角色列表失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 获取角色详情
+  getRoleById: async (roleId) => {
+    try {
+      const response = await request({
+        url: `/api/role/query?roleId=${roleId}`,
+        method: 'GET'
+      });
+      
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('获取角色详情失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  }
+};
+
+// 配置相关API
+export const configAPI = {
+  // 获取所有配置
+  getAllConfigs: async () => {
+    try {
+      const response = await request({
+        url: '/app/config/query',
+        method: 'GET'
+      });
+      
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('获取所有配置失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 获取LLM模型配置
+  getModels: async () => {
+    try {
+      const response = await request({
+        url: '/app/config/models',
+        method: 'GET'
+      });
+      
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('获取LLM模型配置失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 获取STT配置
+  getSTTConfigs: async () => {
+    try {
+      const response = await request({
+        url: '/app/config/stt',
+        method: 'GET'
+      });
+      
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('获取STT配置失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 获取模板配置
+  getTemplates: async () => {
+    try {
+      const response = await request({
+        url: '/app/config/templates',
+        method: 'GET'
+      });
+      
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('获取模板配置失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 获取TTS配置
+  getTTSConfigs: async () => {
+    try {
+      const response = await request({
+        url: '/app/config/tts',
+        method: 'GET'
+      });
+      
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('获取TTS配置失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  }
+};
+
 // 导出默认请求方法
 export default request;
diff --git a/前端交接文档.md b/前端交接文档.md
new file mode 100644
index 0000000..51f4a3f
--- /dev/null
+++ b/前端交接文档.md
@@ -0,0 +1,211 @@
+# 前端项目交接文档
+
+## 项目概述
+
+### 项目名称
+小智AI语音助手前端项目
+
+### 技术栈
+- **框架**: uni-app (Vue 3)
+- **构建工具**: Vite 5.2.8
+- **状态管理**: Pinia 2.1.7
+- **国际化**: Vue-i18n 9.1.9
+- **开发语言**: JavaScript/TypeScript
+
+### 项目结构
+```
+webUI/
+├── src/                    # 源代码目录
+│   ├── App.vue            # 应用入口组件
+│   ├── main.js            # 应用入口文件
+│   ├── manifest.json      # 应用配置文件
+│   ├── pages.json         # 页面路由配置
+│   ├── uni.scss          # 全局样式文件
+│   ├── components/        # 公共组件
+│   │   ├── UserAgreement.vue  # 用户协议组件
+│   │   └── UserAuth.vue       # 用户认证组件
+│   ├── pages/             # 页面目录
+│   │   ├── splash/        # 启动页
+│   │   ├── index/         # 首页
+│   │   ├── mine/          # 我的页面
+│   │   ├── create/        # 创建页面
+│   │   ├── script/        # 剧本编辑
+│   │   ├── voice/         # 声音克隆
+│   │   ├── agreement/     # 协议页面
+│   │   ├── chat/          # 聊天页面
+│   │   └── recharge/       # 充值相关
+│   ├── stores/            # 状态管理
+│   │   └── user.js        # 用户状态
+│   ├── utils/             # 工具函数
+│   │   ├── api.js         # API接口
+│   │   ├── aiCharacters.js # AI角色配置
+│   │   └── debug.js       # 调试工具
+│   └── static/            # 静态资源
+├── dist/                  # 构建输出目录
+├── package.json          # 项目依赖配置
+├── vite.config.js        # Vite配置文件
+└── API接口文档.md        # 后端API接口文档
+```
+
+## 核心功能模块
+
+### 1. 用户认证模块
+- **文件位置**: `src/components/UserAuth.vue`
+- **功能**: 微信小程序登录、用户信息管理
+- **相关API**: `/api/login/wechat`, `/api/user/info`
+
+### 2. 首页模块
+- **文件位置**: `src/pages/index/index.vue`
+- **功能**: 展示剧情角色、AI声音列表
+- **相关API**: `/api/home/drama`, `/api/home/voice`
+
+### 3. 剧本管理模块
+- **文件位置**: `src/pages/script/editor.vue`
+- **功能**: 创建、编辑、管理用户剧本
+- **相关API**: `/api/script/save`, `/api/script/list`, `/api/script/detail`
+
+### 4. 声音克隆模块
+- **文件位置**: `src/pages/voice/clone.vue`
+- **功能**: 上传声音样本、声音克隆、克隆状态查询
+- **相关API**: `/api/voice/upload`, `/api/voice/clone`, `/api/voice/status`
+
+### 5. 聊天模块
+- **文件位置**: `src/pages/chat/chat.vue`
+- **功能**: 与AI角色进行对话交互
+- **特点**: 支持实时语音交互、角色切换
+
+### 6. 充值模块
+- **文件位置**: `src/pages/recharge/`
+- **功能**: 用户充值、充值历史查询
+- **相关API**: 微信支付相关接口
+
+## 开发环境配置
+
+### 环境要求
+- Node.js >= 16.0.0
+- npm >= 8.0.0 或 yarn >= 1.22.0
+
+### 安装依赖
+```bash
+cd webUI
+npm install
+# 或
+yarn install
+```
+
+### 开发命令
+```bash
+# H5开发
+npm run dev:h5
+
+# 微信小程序开发
+npm run dev:mp-weixin
+
+# 构建H5
+npm run build:h5
+
+# 构建微信小程序
+npm run build:mp-weixin
+```
+
+## 重要配置文件
+
+### 1. pages.json
+- **作用**: 配置页面路由、tabBar、全局样式等
+- **关键配置**:
+  - 页面路由配置
+  - 底部导航栏配置
+  - 页面样式配置
+
+### 2. manifest.json
+- **作用**: 应用配置，包括小程序AppID、权限等
+- **关键配置**:
+  - 微信小程序AppID: `wxff56c34ef9aceb62`
+  - 应用权限配置
+  - 平台特定配置
+
+### 3. vite.config.js
+- **作用**: Vite构建配置
+- **当前配置**: 使用uni-app插件
+
+## 状态管理
+
+### Pinia Store
+- **用户状态**: `src/stores/user.js`
+- **功能**: 管理用户登录状态、用户信息、token等
+
+## API接口管理
+
+### 接口配置
+- **文件位置**: `src/utils/api.js`
+- **功能**: 统一管理API请求、响应拦截、错误处理
+
+### 接口文档
+- **文件位置**: `API接口文档.md`
+- **内容**: 详细的后端API接口说明
+
+## 构建和部署
+
+### 构建输出
+- **H5版本**: `dist/build/h5/`
+- **微信小程序**: `dist/build/mp-weixin/`
+
+### 部署说明
+1. H5版本可直接部署到Web服务器
+2. 微信小程序需要上传到微信开发者工具
+
+## 开发注意事项
+
+### 1. 跨平台兼容性
+- 使用uni-app框架，需要注意不同平台的API差异
+- 微信小程序有特殊的API调用方式
+
+### 2. 权限配置
+- 小程序需要配置相应的权限
+- 录音、定位等敏感权限需要用户授权
+
+### 3. 性能优化
+- 图片资源优化
+- 代码分包加载
+- 缓存策略
+
+### 4. 调试工具
+- 使用`src/utils/debug.js`进行调试
+- 微信开发者工具调试
+- H5浏览器调试
+
+## 常见问题
+
+### 1. 构建问题
+- 确保Node.js版本符合要求
+- 检查依赖版本兼容性
+- 清理缓存重新安装依赖
+
+### 2. 微信小程序问题
+- 检查AppID配置
+- 确认域名白名单配置
+- 检查权限配置
+
+### 3. API接口问题
+- 检查接口地址配置
+- 确认请求头设置
+- 检查跨域配置
+
+## 联系方式
+
+如有技术问题，请联系：
+- 项目负责人：[待填写]
+- 技术文档：参考项目根目录下的技术文档
+- API文档：参考`API接口文档.md`
+
+## 更新日志
+
+### 最新版本功能
+- 支持微信小程序登录
+- 实现声音克隆功能
+- 集成AI角色对话
+- 支持剧本编辑管理
+
+---
+
+**注意**: 本文档基于当前项目状态编写，如有更新请及时同步文档内容。
diff --git a/背景/1.vue b/背景/1.vue
new file mode 100644
index 0000000..54e01a8
--- /dev/null
+++ b/背景/1.vue
@@ -0,0 +1,73 @@
+<template>
+    <div class="starry-bg">
+      <!-- 星空层 -->
+      <div class="stars"></div>
+      <div class="twinkling"></div>
+      <div class="gradient-overlay"></div>
+    </div>
+  </template>
+  
+  <script setup>
+  // 无需脚本逻辑，这个是纯背景效果
+  </script>
+  
+  <style scoped>
+  /* 全屏容器 */
+  .starry-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+  
+  /* 背景渐变层（以紫色为主） */
+  .gradient-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at center, #a48cf2 0%, #5b34b1 50%, #1a093f 100%);
+    z-index: 1;
+  }
+  
+  /* 星星层（淡黄色点点） */
+  .stars {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    background-image: radial-gradient(#fff7b3 1px, transparent 1px),
+                      radial-gradient(#fff7b3 1px, transparent 1px);
+    background-size: 2px 2px, 3px 3px;
+    background-position: 0 0, 50px 50px;
+    animation: moveStars 200s linear infinite;
+    z-index: 0;
+    opacity: 0.7;
+  }
+  
+  /* 闪烁层 */
+  .twinkling {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    background-image: radial-gradient(#fff9c4 1px, transparent 1px),
+                      radial-gradient(#fff7b3 1px, transparent 1px);
+    background-size: 3px 3px, 2px 2px;
+    animation: twinkle 3s infinite ease-in-out alternate;
+    z-index: 2;
+    opacity: 0.5;
+  }
+  
+  /* 星星轻微移动模拟流动的感觉 */
+  @keyframes moveStars {
+    from { background-position: 0 0, 50px 50px; }
+    to { background-position: 10000px 10000px, 10050px 10050px; }
+  }
+  
+  /* 闪烁动画 */
+  @keyframes twinkle {
+    from { opacity: 0.3; }
+    to { opacity: 0.7; }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/背景/2.vue b/背景/2.vue
new file mode 100644
index 0000000..a95ea3f
--- /dev/null
+++ b/背景/2.vue
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>紫色星空渐变背景</title>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    
+    body {
+      overflow: hidden;
+      font-family: 'Arial', sans-serif;
+    }
+    
+    .starry-sky {
+      position: relative;
+      width: 100vw;
+      height: 100vh;
+      background: linear-gradient(135deg, #1a0b2e, #4a1e6d, #6b2c9c);
+      overflow: hidden;
+    }
+    
+    .star {
+      position: absolute;
+      background-color: #f9e076;
+      border-radius: 50%;
+      animation: twinkle 4s infinite ease-in-out;
+    }
+    
+    .star.small {
+      width: 2px;
+      height: 2px;
+    }
+    
+    .star.medium {
+      width: 3px;
+      height: 3px;
+    }
+    
+    .star.large {
+      width: 4px;
+      height: 4px;
+    }
+    
+    .star.x-large {
+      width: 5px;
+      height: 5px;
+      box-shadow: 0 0 10px 2px rgba(249, 224, 118, 0.7);
+    }
+    
+    @keyframes twinkle {
+      0%, 100% {
+        opacity: 0.3;
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+    
+    .content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: white;
+      text-align: center;
+      z-index: 10;
+      text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    }
+    
+    .content h1 {
+      font-size: 3rem;
+      margin-bottom: 1rem;
+      color: #f9e076;
+    }
+    
+    .content p {
+      font-size: 1.2rem;
+      max-width: 600px;
+      line-height: 1.6;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <div class="starry-sky">
+      <div 
+        v-for="(star, index) in stars" 
+        :key="index"
+        class="star"
+        :class="star.size"
+        :style="{
+          left: star.x + 'vw',
+          top: star.y + 'vh',
+          animationDelay: star.delay + 's'
+        }"
+      ></div>
+      
+      <div class="content">
+        <h1>紫色星空</h1>
+        <p>这是一个使用Vue实现的紫色渐变星空背景，带有闪烁的淡黄色星光点缀。</p>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const { createApp } = Vue;
+    
+    createApp({
+      data() {
+        return {
+          stars: []
+        }
+      },
+      mounted() {
+        this.generateStars();
+      },
+      methods: {
+        generateStars() {
+          const starCount = 150;
+          const sizes = ['small', 'medium', 'large', 'x-large'];
+          
+          for (let i = 0; i < starCount; i++) {
+            this.stars.push({
+              x: Math.random() * 100,
+              y: Math.random() * 100,
+              size: sizes[Math.floor(Math.random() * sizes.length)],
+              delay: Math.random() * 4
+            });
+          }
+        }
+      }
+    }).mount('#app');
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/背景/3.vue b/背景/3.vue
new file mode 100644
index 0000000..1add405
--- /dev/null
+++ b/背景/3.vue
@@ -0,0 +1,64 @@
+<template>
+    <div class="background" ref="background">
+      <div v-for="star in stars" :key="star.id" class="star" :style="{ left: star.x + 'vw', top: star.y + 'vh', width: star.size + 'px', height: star.size + 'px' }"></div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'BackgroundUI',
+    data() {
+      return {
+        stars: []
+      };
+    },
+    mounted() {
+      this.generateStars();
+    },
+    methods: {
+      generateStars() {
+        const numberOfStars = 100;
+        for (let i = 0; i < numberOfStars; i++) {
+          this.stars.push({
+            id: i,
+            x: Math.random() * 100,
+            y: Math.random() * 100,
+            size: Math.random() * 2 + 1
+          });
+        }
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: linear-gradient(to bottom, #4b0082, #8a2be2, #483d8b);
+    overflow: hidden;
+    z-index: -1;
+  }
+  
+  .star {
+    position: absolute;
+    background-color: #ffff99;
+    border-radius: 50%;
+    opacity: 0.7;
+    animation: twinkle 2s infinite alternate, move 5s infinite ease-in-out;
+  }
+  
+  @keyframes twinkle {
+    from { opacity: 0.7; }
+    to { opacity: 0.3; }
+  }
+  
+  @keyframes move {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+    100% { transform: translateY(0); }
+  }
+  </style>
\ No newline at end of file