diff --git a/chat-refactor-plan.md b/chat-refactor-plan.md
new file mode 100644
index 0000000..afc7ba6
--- /dev/null
+++ b/chat-refactor-plan.md
@@ -0,0 +1,747 @@
+# 聊天页面组件化重构方案
+
+## 📋 需求分析
+
+### 当前问题
+
+1. **chat.vue 在 tabBar 中**
+   - 位于 pages.json 的 tabBar 列表中，作为"专属" tab
+   - 从 drama 页面跳转到 chat.vue 时，底部会显示 tabBar
+   - "专属" tab 会处于选中状态，用户体验不佳
+
+2. **代码重复维护问题**
+   - 如果为角色聊天单独创建页面，会与 chat.vue 产生大量重复代码
+   - 聊天逻辑复杂（800+ 行），不便于维护
+
+### 解决方案
+
+将聊天核心逻辑提取为 **ChatBox.vue 组件**，实现代码复用：
+
+- **chat.vue**：保留在 tabBar 中，固定显示蔚AI，参数写死
+- **role-chat.vue**：新建独立页面，不在 tabBar 中，从 API 获取角色参数
+- **ChatBox.vue**：核心聊天组件，两个页面共用
+
+---
+
+## 🎯 方案设计
+
+### 架构图
+
+```
+┌─────────────────────────────────────────────┐
+│         ChatBox.vue (核心聊天组件)            │
+│         src/components/ChatBox.vue          │
+│  - 消息管理（发送、接收、显示）                │
+│  - API 调用（chatAPI、voiceAPI）             │
+│  - 语音交互（录音、播放）                     │
+│  - 会话管理（sessionId、历史加载）            │
+│  - UI 渲染（消息气泡、输入框、导航栏）          │
+└─────────────────────────────────────────────┘
+            ▲                       ▲
+            │                       │
+    ┌───────┴────────┐      ┌──────┴─────────┐
+    │                │      │                 │
+┌───────────────────┐│  ┌──────────────────────┐
+│ chat.vue          ││  │ role-chat.vue        │
+│ (tabBar页面)      ││  │ (独立页面)            │
+│─────────────────  ││  │──────────────────────│
+│ ✓ 在 tabBar 中    ││  │ ✓ 不在 tabBar 中     │
+│ ✓ 固定蔚AI        ││  │ ✓ 动态角色参数       │
+│ ✓ 参数写死        ││  │ ✓ 从 URL 解析参数    │
+│ ✓ 无返回按钮      ││  │ ✓ 显示返回按钮       │
+│ ✓ 有底部导航      ││  │ ✓ 全屏沉浸式         │
+└───────────────────┘│  └──────────────────────┘
+        ▲            │           ▲
+        │            │           │
+  点击"专属" tab     │    drama/index.vue
+                     │      跳转到此
+                     │
+                     └─────────共用组件────────┘
+```
+
+---
+
+## 📁 文件结构
+
+```
+src/
+├── components/
+│   └── ChatBox.vue                    # ✅ 新建：核心聊天组件
+├── pages/
+    ├── chat/
+    │   └── chat.vue                   # ✅ 改造：tabBar 页面（"专属"）
+    ├── role-chat/
+    │   └── role-chat.vue              # ✅ 新建：角色聊天页面
+    └── drama/
+        └── index.vue                  # ✅ 修改：跳转路径
+```
+
+---
+
+## 🔧 详细实施步骤
+
+### 步骤 1：创建 ChatBox.vue 核心聊天组件
+
+**文件路径：** `src/components/ChatBox.vue`
+
+#### 任务清单
+
+- [ ] 从 `src/pages/chat/chat.vue` 复制所有代码
+- [ ] 移除 `initPage()` 中的 URL 参数解析逻辑（第 252-348 行）
+- [ ] 定义 Props 接收配置参数
+- [ ] 添加 `watch` 监听 `characterConfig` 变化
+- [ ] 保留所有其他逻辑不变
+
+#### Props 定义
+
+```javascript
+const props = defineProps({
+  // 角色配置
+  characterConfig: {
+    type: Object,
+    required: true,
+    default: () => ({
+      id: 'wei-ai',
+      roleId: null,
+      name: '蔚AI',
+      avatar: '/static/avatar/icon_hushi.jpg',
+      greeting: '你好！我是蔚AI',
+      roleDesc: ''
+    })
+  },
+
+  // AI 模型配置
+  aiConfig: {
+    type: Object,
+    default: () => ({
+      modelId: 10,
+      templateId: 6,
+      ttsId: null,
+      sttId: null,
+      temperature: 0.7,
+      topP: 0.9
+    })
+  },
+
+  // UI 配置
+  uiConfig: {
+    type: Object,
+    default: () => ({
+      showBackButton: true  // 是否显示返回按钮
+    })
+  }
+});
+```
+
+#### 初始化逻辑改造
+
+**原逻辑（chat.vue）：**
+```javascript
+onMounted(() => {
+  initPage();      // 解析 URL 参数、初始化角色
+  initRecorder();  // 初始化录音器
+});
+```
+
+**新逻辑（ChatBox.vue）：**
+```javascript
+// 监听角色配置变化，触发初始化
+watch(() => props.characterConfig, async (newConfig) => {
+  if (!newConfig || !newConfig.id) return;
+
+  // 设置当前角色
+  currentCharacter.value = {
+    id: newConfig.id,
+    roleId: newConfig.roleId,
+    name: newConfig.name,
+    avatar: newConfig.avatar,
+    greeting: newConfig.greeting,
+    roleDesc: newConfig.roleDesc,
+    // 合并 AI 配置
+    modelId: props.aiConfig.modelId,
+    templateId: props.aiConfig.templateId,
+    ttsId: props.aiConfig.ttsId,
+    sttId: props.aiConfig.sttId,
+    temperature: props.aiConfig.temperature,
+    topP: props.aiConfig.topP
+  };
+
+  // 加载 AI 配置
+  await loadAIConfigs();
+
+  // 创建/获取会话
+  createNewConversation(newConfig.id || newConfig.roleId);
+
+  // 加载历史消息
+  await loadHistoryMessages();
+
+  // 如果没有历史消息，显示欢迎消息
+  if (messages.value.length === 0) {
+    addMessage('ai', currentCharacter.value.greeting);
+    if (!isLoggedIn.value) {
+      addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
+    }
+  }
+}, { immediate: true, deep: true });
+
+onMounted(() => {
+  checkLoginStatus();  // 检查登录状态
+  initRecorder();      // 初始化录音器
+});
+```
+
+#### 关键改动点
+
+1. **移除 getCurrentPages() 逻辑**
+   ```javascript
+   // ❌ 删除这部分代码（第 250-256 行）
+   const pages = getCurrentPages();
+   const currentPage = pages[pages.length - 1];
+   const options = currentPage.options || {};
+   ```
+
+2. **移除 URL 参数判断逻辑**
+   ```javascript
+   // ❌ 删除这部分代码（第 254-343 行）
+   if (!options.characterId && !options.roleId) { ... }
+   if (options.characterId === 'wei-ai' || !options.characterId) { ... }
+   else if (options.roleId) { ... }
+   else { ... }
+   ```
+
+3. **保留所有业务逻辑**
+   - ✅ 消息管理（messages、addMessage、addSegmentedAIResponse）
+   - ✅ API 调用（chatAPI.syncChat、voiceAPI.voiceChat）
+   - ✅ 录音功能（recorderManager、语音处理）
+   - ✅ 会话管理（conversationId、createNewConversation、loadHistoryMessages）
+   - ✅ UI 状态（isTyping、isLoading、scrollTop）
+
+4. **showBackButton 改为从 props 获取**
+   ```javascript
+   // 原代码（第 217 行）
+   const showBackButton = ref(true);
+
+   // 改为
+   const showBackButton = computed(() => props.uiConfig.showBackButton);
+   ```
+
+---
+
+### 步骤 2：创建 role-chat.vue 角色聊天页面
+
+**文件路径：** `src/pages/role-chat/role-chat.vue`
+
+#### 完整代码
+
+```vue
+<template>
+  <ChatBox
+    :character-config="characterConfig"
+    :ai-config="aiConfig"
+    :ui-config="uiConfig"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import ChatBox from '@/components/ChatBox.vue';
+
+// 角色配置
+const characterConfig = ref({});
+
+// AI 配置
+const aiConfig = ref({
+  modelId: 10,
+  templateId: 6
+});
+
+// UI 配置
+const uiConfig = ref({
+  showBackButton: true  // 角色聊天页面显示返回按钮
+});
+
+// 初始化：解析 URL 参数
+onMounted(() => {
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1];
+  const options = currentPage.options || {};
+
+  // 组装角色配置
+  characterConfig.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 配置
+  aiConfig.value = {
+    modelId: options.modelId ? parseInt(options.modelId) : 10,
+    templateId: options.templateId ? parseInt(options.templateId) : (options.roleId ? parseInt(options.roleId) : 6),
+    ttsId: options.ttsId || null,
+    sttId: options.sttId || null,
+    temperature: options.temperature ? parseFloat(options.temperature) : 0.7,
+    topP: options.topP ? parseFloat(options.topP) : 0.9
+  };
+});
+</script>
+
+<style scoped>
+/* 无需额外样式，所有样式在 ChatBox 组件中 */
+</style>
+```
+
+#### 参数来源
+
+这些参数来自 `drama/index.vue` 的 `handleUse()` 方法：
+
+```javascript
+// drama/index.vue 第 389-418 行
+const params = {
+  characterId: item.id,
+  roleId: item.roleId,
+  roleName: item.roleName || item.title,
+  roleDesc: item.roleDesc,
+  avatar: item.avatar || item.cover,
+  greeting: item.greeting,
+  modelId: item.modelId || '',
+  templateId: item.templateId || '',
+  ttsId: item.ttsId || '',
+  sttId: item.sttId || '',
+  temperature: item.temperature || '',
+  topP: item.topP || ''
+};
+```
+
+---
+
+### 步骤 3：改造 chat.vue 为蔚AI专属页面
+
+**文件路径：** `src/pages/chat/chat.vue`
+
+#### 完整代码
+
+```vue
+<template>
+  <ChatBox
+    :character-config="characterConfig"
+    :ai-config="aiConfig"
+    :ui-config="uiConfig"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import ChatBox from '@/components/ChatBox.vue';
+
+// 固定配置：蔚AI
+const characterConfig = ref({
+  id: 'wei-ai',
+  roleId: null,
+  name: '蔚AI',
+  avatar: '/static/avatar/icon_hushi.jpg',
+  greeting: '你好！我是蔚AI，很高兴为您服务！',
+  roleDesc: ''
+});
+
+// 固定配置：AI 模型
+const aiConfig = ref({
+  modelId: 10,
+  templateId: 6,
+  ttsId: null,
+  sttId: null,
+  temperature: 0.7,
+  topP: 0.9
+});
+
+// UI 配置
+const uiConfig = ref({
+  showBackButton: false  // tabBar 页面不显示返回按钮
+});
+</script>
+
+<style scoped>
+/* 无需额外样式，所有样式在 ChatBox 组件中 */
+</style>
+```
+
+#### 说明
+
+- ✅ 所有参数写死，不做任何 URL 解析
+- ✅ `showBackButton: false`（因为是 tabBar 页面）
+- ✅ 固定显示蔚AI
+- ✅ 代码极简（仅 40 行）
+
+---
+
+### 步骤 4：修改 drama/index.vue 跳转路径
+
+**文件路径：** `src/pages/drama/index.vue`
+
+#### 修改位置
+
+第 417 行，`handleUse()` 方法中的跳转路径：
+
+```javascript
+// 原代码
+uni.navigateTo({ url: `/pages/chat/chat?${queryString}` });
+
+// 改为
+uni.navigateTo({ url: `/pages/role-chat/role-chat?${queryString}` });
+```
+
+#### 完整的 handleUse 方法
+
+```javascript
+const handleUse = (item) => {
+  if (!item || !item.id) {
+    uni.showToast({ title: '角色信息无效', icon: 'none' });
+    return;
+  }
+  uni.showLoading({ title: '正在设置角色...' });
+
+  // 构建完整的角色参数，包括模型和模板信息
+  const params = {
+    characterId: item.id,
+    roleId: item.roleId,
+    roleName: item.roleName || item.title,
+    roleDesc: item.roleDesc,
+    avatar: item.avatar || item.cover,
+    greeting: item.greeting,
+    modelId: item.modelId || '',
+    templateId: item.templateId || '',
+    ttsId: item.ttsId || '',
+    sttId: item.sttId || '',
+    temperature: item.temperature || '',
+    topP: item.topP || ''
+  };
+
+  const queryString = Object.keys(params)
+    .map(key => `${key}=${encodeURIComponent(params[key] || '')}`)
+    .join('&');
+
+  uni.hideLoading();
+  // ✅ 修改跳转路径
+  uni.navigateTo({ url: `/pages/role-chat/role-chat?${queryString}` });
+};
+```
+
+---
+
+### 步骤 5：更新 pages.json 路由配置
+
+**文件路径：** `src/pages.json`
+
+#### 添加路由配置
+
+在 `pages` 数组中添加 role-chat 页面配置，建议放在 `pages/chat/chat` 后面：
+
+```json
+{
+  "pages": [
+    // ... 其他页面 ...
+    {
+      "path": "pages/chat/chat",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/role-chat/role-chat",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    // ... 其他页面 ...
+  ],
+  // tabBar 配置保持不变
+  "tabBar": {
+    "list": [
+      { "pagePath": "pages/drama/index", "text": "发现" },
+      { "pagePath": "pages/device/index", "text": "设备" },
+      { "pagePath": "pages/chat/chat", "text": "专属" },  // ✅ 保持不变
+      { "pagePath": "pages/mine/mine", "text": "我的" }
+    ]
+  }
+}
+```
+
+---
+
+## 🔍 技术细节
+
+### 1. 会话 ID 管理
+
+ChatBox 组件继续使用原有的会话 ID 管理逻辑：
+
+```javascript
+const createNewConversation = (characterId) => {
+  let storageKey = '';
+  if (characterId === 'wei-ai' || !currentCharacter.value.roleId) {
+    // 蔚AI 或默认角色
+    storageKey = `session_weiai`;
+  } else {
+    // 剧情角色
+    storageKey = `session_role_${currentCharacter.value.roleId}`;
+  }
+
+  let existingSessionId = uni.getStorageSync(storageKey);
+  if (existingSessionId) {
+    conversationId.value = existingSessionId;
+  } else {
+    const userId = userStore.userInfo?.openid || userStore.userInfo?.userId || 'guest';
+    const timestamp = Date.now();
+    const newSessionId = `session_${characterId}_${userId}_${timestamp}`;
+    uni.setStorageSync(storageKey, newSessionId);
+    conversationId.value = newSessionId;
+  }
+};
+```
+
+**说明：**
+- 蔚AI 的会话存储在 `session_weiai`
+- 每个角色的会话存储在 `session_role_${roleId}`
+- 不同页面使用同一角色时会共享会话历史
+
+---
+
+### 2. 参数编码/解码
+
+#### drama/index.vue 编码
+
+```javascript
+const queryString = Object.keys(params)
+  .map(key => `${key}=${encodeURIComponent(params[key] || '')}`)
+  .join('&');
+```
+
+#### role-chat.vue 解码
+
+```javascript
+characterConfig.value = {
+  name: decodeURIComponent(options.roleName || 'AI角色'),
+  avatar: decodeURIComponent(options.avatar || '/static/logo.png'),
+  greeting: decodeURIComponent(options.greeting || '你好！很高兴认识你！'),
+  roleDesc: decodeURIComponent(options.roleDesc || '')
+};
+```
+
+---
+
+### 3. AI 配置优先级
+
+在 ChatBox 组件中，AI 配置的优先级：
+
+```javascript
+const requestParams = {
+  message: userMessage,
+  characterId: currentCharacter.value.id,
+  conversationId: conversationId.value,
+  modelId: 10,      // 默认值
+  templateId: 6     // 默认值
+};
+
+// 如果角色有自定义配置，则覆盖默认值
+if (currentCharacter.value.roleId) {
+  if (currentCharacter.value.modelId) {
+    requestParams.modelId = currentCharacter.value.modelId;
+  }
+  if (currentCharacter.value.templateId) {
+    requestParams.templateId = currentCharacter.value.templateId;
+  } else {
+    requestParams.templateId = currentCharacter.value.roleId;
+  }
+}
+```
+
+---
+
+## ✅ 测试验证
+
+### 测试场景
+
+#### 场景 1：点击"专属" tab
+
+**步骤：**
+1. 启动应用
+2. 点击底部"专属" tab
+
+**预期结果：**
+- ✅ 显示蔚AI聊天界面
+- ✅ 底部显示 tabBar，"专属"选中
+- ✅ 顶部导航栏不显示返回按钮
+- ✅ 显示欢迎消息："你好！我是蔚AI，很高兴为您服务！"
+- ✅ 可以正常发送消息、接收回复
+
+---
+
+#### 场景 2：从 drama 页面选择角色
+
+**步骤：**
+1. 点击底部"发现" tab
+2. 选择任意角色
+3. 点击"去使用"
+
+**预期结果：**
+- ✅ 跳转到 role-chat 页面
+- ✅ 底部不显示 tabBar（全屏）
+- ✅ 顶部导航栏显示返回按钮
+- ✅ 显示角色头像、名称
+- ✅ 显示角色的欢迎消息
+- ✅ 可以正常发送消息、接收回复
+
+---
+
+#### 场景 3：会话持久化
+
+**步骤：**
+1. 从 drama 选择角色 A，发送消息
+2. 返回，再次选择角色 A
+
+**预期结果：**
+- ✅ 加载之前的聊天历史
+- ✅ 消息顺序正确
+- ✅ 时间戳正确
+
+---
+
+#### 场景 4：清空对话
+
+**步骤：**
+1. 在聊天页面点击"清空"按钮
+2. 确认清空
+
+**预期结果：**
+- ✅ 历史消息清空
+- ✅ 重新显示欢迎消息
+- ✅ 生成新的 sessionId
+
+---
+
+#### 场景 5：语音交互（如果启用）
+
+**步骤：**
+1. 在聊天页面按住录音按钮
+2. 说话后松开
+
+**预期结果：**
+- ✅ 显示录音动画
+- ✅ 识别语音内容
+- ✅ 显示 AI 回复
+- ✅ 播放语音（如果角色配置了 TTS）
+
+---
+
+#### 场景 6：多角色会话隔离
+
+**步骤：**
+1. 选择角色 A，发送消息
+2. 返回，选择角色 B，发送消息
+3. 返回，再次选择角色 A
+
+**预期结果：**
+- ✅ 角色 A 和角色 B 的会话独立
+- ✅ 重新进入角色 A 时，显示之前的消息
+- ✅ sessionId 不同（`session_role_A` vs `session_role_B`）
+
+---
+
+## 📊 代码变更统计
+
+| 文件 | 类型 | 行数变化 | 说明 |
+|------|------|----------|------|
+| `src/components/ChatBox.vue` | 新建 | +850 | 核心聊天组件 |
+| `src/pages/role-chat/role-chat.vue` | 新建 | +60 | 角色聊天页面 |
+| `src/pages/chat/chat.vue` | 改造 | -960 / +40 | 简化为容器页面 |
+| `src/pages/drama/index.vue` | 修改 | ~1 | 修改跳转路径 |
+| `src/pages.json` | 修改 | +6 | 添加路由配置 |
+| **总计** | - | **约 -1000 行** | 代码复用显著 |
+
+---
+
+## 🎯 方案优势
+
+### 1. 代码复用
+- ✅ 聊天逻辑只维护一份（ChatBox 组件）
+- ✅ 减少约 1000 行重复代码
+- ✅ bug 修复和功能增强只需改组件
+
+### 2. 职责清晰
+- ✅ chat.vue → "专属" tab，固定蔚AI
+- ✅ role-chat.vue → 角色聊天，动态参数
+- ✅ ChatBox.vue → 核心逻辑，通用组件
+
+### 3. 用户体验优化
+- ✅ 角色聊天全屏沉浸式（无 tabBar）
+- ✅ "专属" tab 不受干扰
+- ✅ 清晰的导航层级（返回按钮控制）
+
+### 4. 可扩展性
+- ✅ 未来新增聊天场景，只需创建页面使用 ChatBox
+- ✅ 组件化后易于添加新功能（如多模态、附件等）
+
+---
+
+## ⚠️ 注意事项
+
+### 1. 兼容性测试
+- 确保在 H5 和微信小程序平台都正常工作
+- 测试录音功能（仅微信小程序支持）
+
+### 2. 数据迁移
+- 如果用户已有聊天记录，确保 sessionId 逻辑不变
+- 蔚AI 的 sessionId 保持为 `session_weiai`
+
+### 3. 性能优化
+- ChatBox 组件较大（800+ 行），注意内存管理
+- 考虑按需加载语音模块（条件编译）
+
+### 4. 错误处理
+- 确保 URL 参数缺失时有合理的降级处理
+- API 失败时显示友好的错误提示
+
+---
+
+## 🚀 后续优化建议
+
+### 短期优化（可选）
+
+1. **添加加载状态**
+   - 组件初始化时显示 loading
+   - 避免短暂的空白页面
+
+2. **优化参数传递**
+   - 考虑使用 Vuex/Pinia 传递复杂参数
+   - 避免 URL 过长（目前约 10 个参数）
+
+3. **添加错误边界**
+   - 组件内部捕获异常
+   - 防止整个页面崩溃
+
+### 长期优化（未来规划）
+
+1. **消息组件化**
+   - 将消息气泡提取为独立组件
+   - 支持更多消息类型（图片、文件等）
+
+2. **语音模块拆分**
+   - 将录音、播放逻辑提取为 hooks
+   - 方便在其他页面复用
+
+3. **性能监控**
+   - 添加页面加载耗时监控
+   - 优化首屏渲染速度
+
+---
+
+## 📞 联系与支持
+
+如有问题或建议，请联系开发团队。
+
+---
+
+**文档版本：** v1.0
+**最后更新：** 2025-11-08
+**编写人员：** Claude Code
diff --git a/package.json b/package.json
index 1934906..7459470 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,6 @@
     "@dcloudio/uni-mp-xhs": "3.0.0-4060420250429001",
     "@dcloudio/uni-quickapp-webview": "3.0.0-4060420250429001",
     "ant-design-vue": "^4.2.6",
-    "ant-design-x-vue": "^1.3.2",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
     "vue-i18n": "^9.1.9"
@@ -66,6 +65,7 @@
     "@dcloudio/uni-stacktracey": "3.0.0-4060420250429001",
     "@dcloudio/vite-plugin-uni": "3.0.0-4060420250429001",
     "@vue/runtime-core": "^3.4.21",
+    "sass": "^1.93.3",
     "vite": "5.2.8"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 533c3c0..79be953 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,19 +3,23 @@ export default {
   onLaunch: function () {
     console.log('App Launch');
 
+    // 暂时跳过欢迎页面 - 直接标记为已显示过启动页和已同意协议
+    uni.setStorageSync('hasShownSplash', 'true');
+    uni.setStorageSync('hasAgreedToTerms', 'true');
+
     // 检查是否是首次启动或需要显示启动页
-    const hasShownSplash = uni.getStorageSync('hasShownSplash');
-    const hasAgreedToTerms = uni.getStorageSync('hasAgreedToTerms');
+    // const hasShownSplash = uni.getStorageSync('hasShownSplash');
+    // const hasAgreedToTerms = uni.getStorageSync('hasAgreedToTerms');
 
     // 如果未显示过启动页或未同意协议，则跳转到启动页
-    if (!hasShownSplash || hasAgreedToTerms !== 'true') {
-      // 延迟一下确保页面已加载
-      setTimeout(() => {
-        uni.redirectTo({
-          url: '/pages/splash/splash'
-        });
-      }, 100);
-    }
+    // if (!hasShownSplash || hasAgreedToTerms !== 'true') {
+    //   // 延迟一下确保页面已加载
+    //   setTimeout(() => {
+    //     uni.redirectTo({
+    //       url: '/pages/splash/splash'
+    //     });
+    //   }, 100);
+    // }
   },
 
   onShow: function () {
diff --git a/src/components/ChatBox.vue b/src/components/ChatBox.vue
new file mode 100644
index 0000000..a034a5d
--- /dev/null
+++ b/src/components/ChatBox.vue
@@ -0,0 +1,1683 @@
+<template>
+  <view class="chat-container">
+    <!-- 夜空装饰背景 -->
+    <view class="night-sky-decoration">
+      <view class="star star-1"></view>
+      <view class="star star-2"></view>
+      <view class="star star-3"></view>
+      <view class="star star-4"></view>
+      <view class="star star-5"></view>
+      <view class="star star-6"></view>
+      <view class="star star-7"></view>
+      <view class="star star-8"></view>
+    </view>
+
+    <!-- 自定义导航栏 -->
+    <view class="custom-navbar">
+      <view class="navbar-left">
+        <view v-if="showBackButton" @tap="goBack" class="left-btn">
+          <text class="back-icon">←</text>
+          <text class="back-text">返回</text>
+        </view>
+        <text class="clear-btn" @tap="clearContext">清空</text>
+      </view>
+      <view class="navbar-center" :class="{'centered': !showBackButton}">
+        <image class="character-avatar" :src="processedAvatar" mode="aspectFill" />
+        <text class="character-name">{{ currentCharacter.name }}</text>
+      </view>
+      <view class="navbar-right">
+      </view>
+    </view>
+
+
+    <!-- 聊天消息区域 - 使用 Ant Design X Bubble.List -->
+    <scroll-view
+      class="chat-messages"
+      scroll-y="true"
+      :scroll-top="scrollTop"
+      scroll-with-animation="true"
+    >
+      <view class="message-list">
+        <!-- 使用 Bubble 组件展示消息 -->
+        <view
+          v-for="(message, index) in messages"
+          :key="index"
+          class="message-wrapper"
+        >
+          <!-- 系统消息 -->
+          <view v-if="message.type === 'system'" class="system-message">
+            <text class="system-text">{{ message.content }}</text>
+          </view>
+
+          <!-- AI/用户消息 -->
+          <view v-else class="bubble-container" :class="[message.type]">
+            <view class="bubble-avatar" v-if="message.type === 'ai'">
+              <image :src="processedAvatar" mode="aspectFill" />
+            </view>
+
+            <view class="bubble-content">
+              <view class="bubble" :class="[message.type]">
+                <text class="bubble-text">{{ message.content }}</text>
+
+                <!-- AI 消息操作按钮 - 已隐藏播放按钮 -->
+                <!-- <view class="bubble-actions" v-if="message.type === 'ai' && isLoggedIn">
+                  <view class="action-btn" @click="() => playVoiceResponse(message.content)">
+                    <text class="action-icon">🔊</text>
+                  </view>
+                </view> -->
+
+                <view class="bubble-time">{{ message.time }}</view>
+              </view>
+            </view>
+
+            <view class="bubble-avatar" v-if="message.type === 'user'">
+              <image :src="processedUserAvatar" mode="aspectFill" />
+            </view>
+          </view>
+        </view>
+
+        <!-- 正在输入指示器 -->
+        <view class="typing-indicator" v-if="isTyping">
+          <view class="bubble-avatar">
+            <image :src="processedAvatar" mode="aspectFill" />
+          </view>
+          <view class="typing-bubble">
+            <view class="typing-dots">
+              <view class="dot"></view>
+              <view class="dot"></view>
+              <view class="dot"></view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+
+  <!-- 输入区域 - 使用 Ant Design X Sender 风格 -->
+  <view class="input-area">
+    <!-- 智能体选择按钮 -->
+    <!-- <view class="action-bar" v-if="availableTemplates.length > 0">
+      <view class="template-selector-btn" @click="showTemplateSelector">
+        <text class="template-icon">🤖</text>
+        <text class="template-name">{{ currentTemplateName }}</text>
+        <text class="arrow-icon">›</text>
+      </view>
+    </view> -->
+
+    <view class="sender-container">
+      <!-- 文本输入模式 -->
+      <view v-if="!isRecordingMode" class="text-input-mode">
+        <input
+          class="text-input"
+          v-model="inputText"
+          placeholder="输入消息..."
+          :disabled="isTyping || isLoading"
+          @confirm="sendMessage"
+          confirm-type="send"
+          @focus="handleInputFocus"
+        />
+
+        <view class="input-actions">
+          <!-- 麦克风按钮已隐藏 -->
+          <!-- <view class="action-icon-btn" @click="toggleRecordingMode">
+            <text class="icon">🎙️</text>
+          </view> -->
+          <view
+            class="send-btn"
+            :class="{'active': inputText.trim()}"
+            @click="sendMessage"
+          >
+            <text class="send-icon">发送</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 语音输入模式 -->
+      <view v-else class="voice-input-mode">
+        <view
+          class="hold-to-speak"
+          :class="{'recording': isActuallyRecording}"
+          @touchstart="startActualRecording"
+          @touchend="stopActualRecording"
+          @touchcancel="cancelActualRecording"
+          @touchmove="handleRecordingMove"
+        >
+          <text class="speak-text">{{ isActuallyRecording ? '松手发送...' : '按住说话' }}</text>
+        </view>
+
+        <!-- 键盘按钮已隐藏 -->
+        <!-- <view class="action-icon-btn" @click="toggleRecordingMode">
+          <text class="icon">⌨️</text>
+        </view> -->
+      </view>
+    </view>
+
+    <!-- 录音状态提示 -->
+    <view class="recording-overlay" v-if="isActuallyRecording">
+      <view class="recording-modal">
+        <text class="recording-tip">{{ recordingTipText }}</text>
+        <view class="recording-animation" v-if="!isRecordingCancelled">
+          <view class="wave" v-for="i in 5" :key="i"></view>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 智能体选择弹窗 -->
+  <!-- <view class="modal-overlay" v-if="showTemplateModal" @click="hideTemplateSelector">
+    <view class="modal-content" @click.stop>
+      <view class="modal-header">
+        <text class="modal-title">选择智能体</text>
+        <view class="close-btn" @click="hideTemplateSelector">
+          <text class="close-icon">✕</text>
+        </view>
+      </view>
+
+      <view class="template-list">
+        <view
+          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="check-mark" v-if="currentTemplateId === template.templateId">
+            <text class="check-icon">✓</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view> -->
+</template>
+
+<script setup>
+import { ref, computed, onMounted, nextTick, watch } from 'vue';
+import { useUserStore } from '@/stores/user.js';
+import { getCharacterById, getSmartResponse } from '@/utils/aiCharacters.js';
+import { chatAPI, voiceAPI, cleanText, configAPI, getResourceUrl } from '@/utils/api.js';
+
+// 定义 Props
+const props = defineProps({
+  // 角色配置
+  characterConfig: {
+    type: Object,
+    required: true,
+    default: () => ({
+      id: 'wei-ai',
+      roleId: null,
+      name: '蔚AI',
+      avatar: '/static/avatar/icon_hushi.jpg',
+      greeting: '你好！我是蔚AI',
+      roleDesc: ''
+    })
+  },
+
+  // AI 模型配置
+  aiConfig: {
+    type: Object,
+    default: () => ({
+      modelId: 10,
+      templateId: 6,
+      ttsId: null,
+      sttId: null,
+      temperature: 0.7,
+      topP: 0.9
+    })
+  },
+
+  // UI 配置
+  uiConfig: {
+    type: Object,
+    default: () => ({
+      showBackButton: true  // 是否显示返回按钮
+    })
+  }
+});
+
+// 状态管理
+const userStore = useUserStore();
+
+// 响应式数据
+const messages = ref([]);
+const inputText = ref('');
+const isTyping = ref(false);
+const isOnline = ref(true);
+const scrollTop = ref(0);
+const currentCharacter = ref({});
+const userAvatar = ref('/static/default-avatar.png');
+const conversationId = ref(null);
+const isLoading = ref(false);
+const isLoggedIn = ref(false);
+const showBackButton = computed(() => props.uiConfig.showBackButton);
+
+// 录音相关
+const isRecordingMode = ref(false);
+const isActuallyRecording = ref(false);
+const isRecordingCancelled = ref(false);
+const recordingTipText = ref('松手发送，上移取消');
+const touchStartY = ref(0);
+const recorderManager = ref(null);
+const audioContext = ref(null);
+
+// AI配置
+const availableTemplates = ref([]);
+const currentModelId = ref(null);
+const currentTemplateId = ref(null);
+const showTemplateModal = ref(false);
+
+// 当前模板名称
+const currentTemplateName = computed(() => {
+  const template = availableTemplates.value.find(t => t.templateId === currentTemplateId.value);
+  return template?.templateName || '默认智能体';
+});
+
+// 处理头像URL
+const processedAvatar = computed(() => {
+  return getResourceUrl(currentCharacter.value.avatar);
+});
+
+const processedUserAvatar = computed(() => {
+  return getResourceUrl(userAvatar.value);
+});
+
+// 监听角色配置变化，触发初始化
+watch(() => props.characterConfig, async (newConfig) => {
+  if (!newConfig || !newConfig.id) return;
+
+  // 设置当前角色
+  currentCharacter.value = {
+    id: newConfig.id,
+    roleId: newConfig.roleId,
+    name: newConfig.name,
+    avatar: newConfig.avatar,
+    greeting: newConfig.greeting,
+    roleDesc: newConfig.roleDesc,
+    // 合并 AI 配置
+    modelId: props.aiConfig.modelId,
+    templateId: props.aiConfig.templateId,
+    ttsId: props.aiConfig.ttsId,
+    sttId: props.aiConfig.sttId,
+    temperature: props.aiConfig.temperature,
+    topP: props.aiConfig.topP
+  };
+
+  // 加载 AI 配置
+  // await loadAIConfigs();
+
+  // 创建/获取会话
+  createNewConversation(newConfig.id || newConfig.roleId);
+
+  // 加载历史消息
+  await loadHistoryMessages();
+
+  // 如果没有历史消息，显示欢迎消息
+  if (messages.value.length === 0) {
+    addMessage('ai', currentCharacter.value.greeting);
+    if (!isLoggedIn.value) {
+      addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
+    }
+  }
+}, { immediate: true, deep: true });
+
+onMounted(() => {
+  checkLoginStatus();  // 检查登录状态
+  initRecorder();      // 初始化录音器
+});
+
+// 加载AI配置
+const loadAIConfigs = async () => {
+  try {
+    const templatesResult = await configAPI.getTemplates();
+
+    if (templatesResult.success) {
+      availableTemplates.value = templatesResult.data.data?.list || templatesResult.data.data || templatesResult.data;
+
+      if (availableTemplates.value.length > 0 && !currentTemplateId.value) {
+        currentTemplateId.value = availableTemplates.value[0].templateId;
+      }
+    } else {
+      // 模拟数据
+      availableTemplates.value = [
+        { templateId: 1, templateName: '默认AI模型', templateDesc: '在用户与AI角色对话时，这个智能体会记住用户的言语习惯。' },
+        { templateId: 2, templateName: '1号AI模型', templateDesc: '学习用户的表达方式，并逐渐适应个性化的交流风格。' }
+      ];
+      currentTemplateId.value = 1;
+    }
+  } catch (error) {
+    console.error('加载AI配置异常:', error);
+    availableTemplates.value = [
+      { templateId: 1, templateName: '默认AI模型', templateDesc: '默认AI模型' }
+    ];
+    currentTemplateId.value = 1;
+  }
+};
+
+// 检查登录状态
+const checkLoginStatus = () => {
+  const customToken = uni.getStorageSync('custom_token');
+  const userToken = uni.getStorageSync('user_token');
+  const userInfo = uni.getStorageSync('userInfo');
+
+  isLoggedIn.value = !!(userStore.token || customToken || userToken || userInfo);
+};
+
+// 初始化录音器
+const initRecorder = () => {
+  // #ifdef MP-WEIXIN
+  recorderManager.value = uni.getRecorderManager();
+
+  recorderManager.value.onStart(() => {
+    console.log('录音开始');
+  });
+
+  recorderManager.value.onStop((res) => {
+    console.log('录音结束', res);
+    if (!isRecordingCancelled.value) {
+      handleVoiceMessage(res.tempFilePath);
+    }
+  });
+
+  recorderManager.value.onError((err) => {
+    console.error('录音错误', err);
+    uni.showToast({
+      title: '录音失败',
+      icon: 'none'
+    });
+    isActuallyRecording.value = false;
+  });
+  // #endif
+};
+
+// 添加消息
+const addMessage = (type, content) => {
+  const now = new Date();
+  const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
+
+  messages.value.push({
+    type,
+    content,
+    time
+  });
+
+  nextTick(() => {
+    scrollToBottom();
+  });
+};
+
+// 滚动到底部
+const scrollToBottom = () => {
+  const query = uni.createSelectorQuery();
+  query.select('.message-list').boundingClientRect();
+  query.exec((res) => {
+    if (res[0]) {
+      scrollTop.value = res[0].height;
+    }
+  });
+};
+
+// 延时工具
+const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+// 根据 & 分段，逐条展示 AI 回复
+const addSegmentedAIResponse = async (text) => {
+  if (!text || typeof text !== 'string') return;
+  // 使用 & 作为分隔符，按段落逐条展示
+  const segments = text
+    .split('&')
+    .map(s => s.trim())
+    .filter(Boolean);
+
+  if (segments.length === 0) {
+    addMessage('ai', text.trim());
+    return;
+  }
+
+  for (const seg of segments) {
+    addMessage('ai', seg);
+    // 简单的节奏控制：与长度相关，介于300-1200ms
+    const delay = Math.min(1200, Math.max(300, seg.length * 30));
+    await sleep(delay);
+  }
+};
+
+// 发送消息
+const sendMessage = async () => {
+  const text = inputText.value.trim();
+  if (!text || isTyping.value || isLoading.value) return;
+
+  addMessage('user', text);
+  inputText.value = '';
+  isTyping.value = true;
+
+  try {
+    await getAIResponse(text);
+  } catch (error) {
+    console.error('发送消息失败:', error);
+    uni.showToast({
+      title: '发送失败',
+      icon: 'none'
+    });
+  } finally {
+    isTyping.value = false;
+  }
+};
+
+// 创建或获取会话ID（基于角色持久化存储）
+const createNewConversation = (characterId) => {
+  // 生成存储key：根据角色类型区分
+  let storageKey = '';
+  if (characterId === 'wei-ai' || !currentCharacter.value.roleId) {
+    // 蔚AI或默认角色
+    storageKey = `session_weiai`;
+  } else {
+    // 剧情角色
+    storageKey = `session_role_${currentCharacter.value.roleId}`;
+  }
+
+  // 尝试从本地存储获取已有的sessionId
+  let existingSessionId = uni.getStorageSync(storageKey);
+
+  if (existingSessionId) {
+    // 已有sessionId，直接使用（保持上下文）
+    conversationId.value = existingSessionId;
+    console.log('使用已有sessionId:', existingSessionId, 'storageKey:', storageKey);
+  } else {
+    // 生成新的sessionId
+    const userId = userStore.userInfo?.openid || userStore.userInfo?.userId || 'guest';
+    const timestamp = Date.now();
+    const newSessionId = `session_${characterId}_${userId}_${timestamp}`;
+
+    // 存储到本地
+    uni.setStorageSync(storageKey, newSessionId);
+    conversationId.value = newSessionId;
+    console.log('创建新sessionId:', newSessionId, 'storageKey:', storageKey);
+  }
+};
+
+// 加载历史消息
+const loadHistoryMessages = async () => {
+  if (!conversationId.value || !isLoggedIn.value) {
+    console.log('没有sessionId或用户未登录，跳过加载历史消息');
+    return;
+  }
+
+  try {
+    console.log('开始加载历史消息，sessionId:', conversationId.value);
+    const result = await chatAPI.getHistoryMessages(conversationId.value);
+
+    if (result.success && result.data && result.data.length > 0) {
+      console.log('获取到历史消息:', result.data.length, '条');
+
+      // 将后端消息格式转换为前端格式，保持与API回复一致的"清理后回复"逻辑
+      const historyMessages = [];
+
+      result.data.forEach(msg => {
+        // 格式化时间
+        let timeStr = '';
+        if (msg.createTime) {
+          const date = new Date(msg.createTime);
+          const hours = String(date.getHours()).padStart(2, '0');
+          const minutes = String(date.getMinutes()).padStart(2, '0');
+          timeStr = `${hours}:${minutes}`;
+        }
+
+        const messageType = msg.sender === 'assistant' ? 'ai' : (msg.sender === 'user' ? 'user' : 'system');
+        const rawContent = msg.message || '';
+
+        // 与API一致：先清理文本，再根据 & 分段
+        const cleanedContent = cleanText(rawContent);
+
+        if (messageType === 'ai' && cleanedContent.includes('&')) {
+          const segments = cleanedContent
+            .split('&')
+            .map(s => s.trim())
+            .filter(Boolean);
+
+          segments.forEach(segment => {
+            historyMessages.push({
+              type: messageType,
+              content: segment,
+              time: timeStr
+            });
+          });
+        } else {
+          // 非 AI 或无分隔符，直接使用清理后的内容
+          const content = cleanedContent.trim();
+          if (content) {
+            historyMessages.push({
+              type: messageType,
+              content,
+              time: timeStr
+            });
+          }
+        }
+      });
+
+      // 按时间排序（从旧到新）
+      historyMessages.sort((a, b) => {
+        if (!a.time || !b.time) return 0;
+        return a.time.localeCompare(b.time);
+      });
+
+      // 清空当前消息列表，加载历史消息
+      messages.value = historyMessages;
+      console.log('历史消息加载完成，共', messages.value.length, '条');
+
+      // 滚动到底部
+      await nextTick();
+      scrollToBottom();
+    } else {
+      console.log('没有历史消息或获取失败');
+    }
+  } catch (error) {
+    console.error('加载历史消息失败:', error);
+  }
+};
+
+// 获取AI回复
+const getAIResponse = async (userMessage) => {
+  try {
+    isLoading.value = true;
+
+    const requestParams = {
+      message: userMessage,
+      characterId: currentCharacter.value.id,
+      conversationId: conversationId.value,
+      modelId: 10,
+      templateId: 6
+    };
+
+    if (currentCharacter.value.roleId) {
+      if (currentCharacter.value.modelId) {
+        requestParams.modelId = currentCharacter.value.modelId;
+      }
+      if (currentCharacter.value.templateId) {
+        requestParams.templateId = currentCharacter.value.templateId;
+      } else {
+        requestParams.templateId = currentCharacter.value.roleId;
+      }
+    }
+
+    const result = await chatAPI.syncChat(requestParams);
+
+    if (result.success) {
+      const aiResponse = result.data;
+      await addSegmentedAIResponse(aiResponse);
+
+      if (result.originalResponse && result.originalResponse.conversationId) {
+        conversationId.value = result.originalResponse.conversationId;
+      }
+    } else {
+      const fallbackResponse = getSmartResponse(currentCharacter.value, userMessage);
+      const cleanedResponse = cleanText(fallbackResponse);
+      await addSegmentedAIResponse(cleanedResponse);
+
+      if (!result.isAnonymous) {
+        uni.showToast({
+          title: 'AI服务暂时不可用，使用本地回复',
+          icon: 'none',
+          duration: 2000
+        });
+      }
+    }
+  } catch (error) {
+    console.error('AI API调用异常:', error);
+    const fallbackResponse = getSmartResponse(currentCharacter.value, userMessage);
+    const cleanedResponse = cleanText(fallbackResponse);
+    await addSegmentedAIResponse(cleanedResponse);
+
+    uni.showToast({
+      title: '网络异常，使用本地回复',
+      icon: 'none',
+      duration: 2000
+    });
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// 切换录音模式
+const toggleRecordingMode = () => {
+  if (isTyping.value) return;
+  isRecordingMode.value = !isRecordingMode.value;
+
+  if (!isRecordingMode.value && isActuallyRecording.value) {
+    stopActualRecording();
+  }
+};
+
+// 开始录音
+const startActualRecording = (e) => {
+  if (isTyping.value || !isRecordingMode.value) return;
+
+  touchStartY.value = e.touches[0].clientY;
+  isRecordingCancelled.value = false;
+  recordingTipText.value = '松手发送，上移取消';
+
+  // #ifdef MP-WEIXIN
+  uni.authorize({
+    scope: 'scope.record',
+    success: () => {
+      isActuallyRecording.value = true;
+      recorderManager.value.start({
+        duration: 60000,
+        sampleRate: 16000,
+        numberOfChannels: 1,
+        encodeBitRate: 96000,
+        format: 'aac'
+      });
+    },
+    fail: () => {
+      uni.showModal({
+        title: '需要录音权限',
+        content: '请在设置中开启录音权限',
+        showCancel: false
+      });
+    }
+  });
+  // #endif
+
+  // #ifndef MP-WEIXIN
+  uni.showToast({
+    title: '语音功能仅支持微信小程序',
+    icon: 'none'
+  });
+  // #endif
+};
+
+// 停止录音
+const stopActualRecording = () => {
+  if (!isActuallyRecording.value) return;
+
+  // #ifdef MP-WEIXIN
+  isActuallyRecording.value = false;
+  isRecordingCancelled.value = false;
+  recorderManager.value.stop();
+  // #endif
+};
+
+// 取消录音
+const cancelActualRecording = () => {
+  if (!isActuallyRecording.value) return;
+
+  // #ifdef MP-WEIXIN
+  isActuallyRecording.value = false;
+  isRecordingCancelled.value = true;
+  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;
+
+    if (deltaY > 50) {
+      isRecordingCancelled.value = true;
+      recordingTipText.value = '松开取消录音';
+    } else {
+      isRecordingCancelled.value = false;
+      recordingTipText.value = '松手发送，上移取消';
+    }
+  }
+};
+
+// 处理语音消息
+const handleVoiceMessage = async (filePath) => {
+  if (isRecordingCancelled.value) return;
+
+  addMessage('user', '[语音消息]');
+  isTyping.value = true;
+
+  try {
+    let effectiveModelId = currentModelId.value;
+    let effectiveTemplateId = currentTemplateId.value;
+
+    if (currentCharacter.value.roleId) {
+      if (currentCharacter.value.modelId) {
+        effectiveModelId = currentCharacter.value.modelId;
+      }
+      if (currentCharacter.value.templateId) {
+        effectiveTemplateId = currentCharacter.value.templateId;
+      } else {
+        effectiveTemplateId = currentCharacter.value.roleId;
+      }
+    }
+
+    const voiceChatResult = await voiceAPI.voiceChat(filePath, {
+      modelId: effectiveModelId,
+      templateId: effectiveTemplateId
+    });
+
+    if (voiceChatResult.success) {
+      const { userText, aiResponse, audioUrl } = voiceChatResult.data;
+
+      if (messages.value.length > 0) {
+        const lastMessage = messages.value[messages.value.length - 1];
+        if (lastMessage.type === 'user' && lastMessage.content === '[语音消息]') {
+          lastMessage.content = userText || '[语音消息]';
+        }
+      }
+
+      await addSegmentedAIResponse(aiResponse);
+
+      if (audioUrl) {
+        await playVoiceResponse(aiResponse, audioUrl);
+      }
+    } else {
+      const uploadResult = await voiceAPI.uploadVoiceChat(filePath, {
+        modelId: effectiveModelId,
+        templateId: effectiveTemplateId
+      });
+
+      if (uploadResult.success) {
+        const { userText, aiResponse, audioUrl } = uploadResult.data;
+
+        if (messages.value.length > 0) {
+          const lastMessage = messages.value[messages.value.length - 1];
+          if (lastMessage.type === 'user' && lastMessage.content === '[语音消息]') {
+            lastMessage.content = userText || '[语音消息]';
+          }
+        }
+
+        await addSegmentedAIResponse(aiResponse);
+
+        if (audioUrl) {
+          await playVoiceResponse(aiResponse, audioUrl);
+        }
+      } else {
+        const fallbackResponse = getSmartResponse(currentCharacter.value, '[语音消息]');
+        const cleanedResponse = cleanText(fallbackResponse);
+        await addSegmentedAIResponse(cleanedResponse);
+
+        uni.showToast({
+          title: '语音处理失败，使用本地回复',
+          icon: 'none',
+          duration: 2000
+        });
+      }
+    }
+  } catch (error) {
+    console.error('处理语音消息失败:', error);
+    const fallbackResponse = getSmartResponse(currentCharacter.value, '[语音消息]');
+    const cleanedResponse = cleanText(fallbackResponse);
+    await addSegmentedAIResponse(cleanedResponse);
+
+    uni.showToast({
+      title: '语音处理异常，使用本地回复',
+      icon: 'none',
+      duration: 2000
+    });
+  } finally {
+    isTyping.value = false;
+  }
+};
+
+// 播放语音
+const playVoiceResponse = async (text, audioUrl = null) => {
+  // #ifdef MP-WEIXIN
+  try {
+    let finalAudioUrl = audioUrl;
+
+    if (!finalAudioUrl) {
+      const ttsResult = await voiceAPI.textToSpeech(text, currentCharacter.value.voiceStyle);
+
+      if (ttsResult.success) {
+        finalAudioUrl = ttsResult.data.audioUrl;
+      } else {
+        uni.showToast({
+          title: '语音合成失败',
+          icon: 'none'
+        });
+        return;
+      }
+    }
+
+    if (audioContext.value) {
+      audioContext.value.destroy();
+    }
+
+    audioContext.value = uni.createInnerAudioContext();
+    audioContext.value.src = finalAudioUrl;
+
+    audioContext.value.onPlay(() => {
+      uni.showToast({
+        title: '正在播放语音',
+        icon: 'none',
+        duration: 1000
+      });
+    });
+
+    audioContext.value.onError((err) => {
+      console.error('语音播放错误:', err);
+      uni.showToast({
+        title: '语音播放失败',
+        icon: 'none'
+      });
+    });
+
+    audioContext.value.play();
+  } catch (error) {
+    console.error('语音播放异常:', error);
+    uni.showToast({
+      title: '语音播放异常',
+      icon: 'none'
+    });
+  }
+  // #endif
+
+  // #ifndef MP-WEIXIN
+  uni.showToast({
+    title: '语音功能仅支持微信小程序',
+    icon: 'none'
+  });
+  // #endif
+};
+
+// 显示模板选择器
+const showTemplateSelector = () => {
+  showTemplateModal.value = true;
+};
+
+// 隐藏模板选择器
+const hideTemplateSelector = () => {
+  showTemplateModal.value = false;
+};
+
+// 选择模板
+const selectTemplate = (template) => {
+  currentTemplateId.value = template.templateId;
+
+  uni.showToast({
+    title: `已切换到${template.templateName}`,
+    icon: 'none',
+    duration: 1500
+  });
+
+  hideTemplateSelector();
+};
+
+// 处理输入框聚焦
+const handleInputFocus = () => {
+  console.log('输入框获得焦点');
+};
+
+// 返回
+const goBack = () => {
+  uni.navigateBack();
+};
+
+// 清空对话上下文
+const clearContext = async () => {
+  uni.showModal({
+    title: '清空对话',
+    content: '确定要清空与该角色的所有对话记录吗？此操作不可恢复。',
+    confirmText: '确定清空',
+    cancelText: '取消',
+    success: async (res) => {
+      if (res.confirm) {
+        try {
+          uni.showLoading({ title: '清空中...' });
+
+          // 1. 调用后端清除session（如果用户已登录）
+          if (conversationId.value && isLoggedIn.value) {
+            try {
+              const result = await chatAPI.clearSession(conversationId.value);
+              console.log('后端清除会话结果:', result);
+            } catch (error) {
+              console.log('后端清除失败，继续本地清除:', error);
+            }
+          }
+
+          // 2. 删除本地存储的sessionId
+          let storageKey = '';
+          if (currentCharacter.value.id === 'wei-ai' || !currentCharacter.value.roleId) {
+            storageKey = `session_weiai`;
+          } else {
+            storageKey = `session_role_${currentCharacter.value.roleId}`;
+          }
+          uni.removeStorageSync(storageKey);
+          console.log('删除本地sessionId:', storageKey);
+
+          // 3. 生成新的sessionId
+          const characterIdForSession = currentCharacter.value.id || currentCharacter.value.roleId || 'default';
+          createNewConversation(characterIdForSession);
+
+          // 4. 清空消息列表（保留欢迎消息）
+          messages.value = [];
+          addMessage('ai', currentCharacter.value.greeting || '你好！很高兴再次见到你！');
+
+          uni.hideLoading();
+          uni.showToast({
+            title: '对话已清空',
+            icon: 'success'
+          });
+        } catch (error) {
+          console.error('清空对话失败:', error);
+          uni.hideLoading();
+          uni.showToast({
+            title: '清空失败',
+            icon: 'none'
+          });
+        }
+      }
+    }
+  });
+};
+</script>
+
+<style scoped>
+/* 页面容器 */
+page {
+  height: 100vh;
+  overflow: hidden;
+  background: linear-gradient(180deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);
+}
+
+.chat-container {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(180deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  padding-top: calc(100rpx + env(safe-area-inset-top));
+  padding-bottom: 200rpx;
+}
+
+/* 夜空装饰 */
+.night-sky-decoration {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.star {
+  position: absolute;
+  width: 6rpx;
+  height: 6rpx;
+  background: #f9e076;
+  border-radius: 50%;
+  animation: twinkle 2s infinite;
+  box-shadow: 0 0 10rpx #f9e076;
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
+}
+
+.star-1 { top: 10%; left: 15%; animation-delay: 0s; }
+.star-2 { top: 20%; left: 80%; animation-delay: 0.3s; }
+.star-3 { top: 30%; left: 45%; animation-delay: 0.6s; }
+.star-4 { top: 50%; left: 25%; animation-delay: 0.9s; }
+.star-5 { top: 60%; left: 70%; animation-delay: 1.2s; }
+.star-6 { top: 70%; left: 40%; animation-delay: 1.5s; }
+.star-7 { top: 15%; left: 60%; animation-delay: 0.4s; }
+.star-8 { top: 85%; left: 55%; animation-delay: 1.8s; }
+
+/* 导航栏 */
+.custom-navbar {
+  height: 100rpx;
+  background: rgba(26, 11, 46, 0.95);
+  backdrop-filter: blur(20rpx);
+  box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.3);
+  border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 32rpx;
+  padding-top: env(safe-area-inset-top);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}
+
+.navbar-left {
+  position: absolute;
+  left: 24rpx;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  color: #f9e076;
+  font-size: 28rpx;
+  font-weight: 500;
+  text-shadow: 0 0 10rpx rgba(249, 224, 118, 0.3);
+}
+
+.left-btn {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.back-icon {
+  font-size: 32rpx;
+}
+
+.navbar-center {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.navbar-center.centered {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.character-avatar {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  border: 3rpx solid rgba(249, 224, 118, 0.3);
+  box-shadow: 0 4rpx 12rpx rgba(249, 224, 118, 0.2);
+}
+
+.character-name {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #f9e076;
+  text-shadow: 0 0 15rpx rgba(249, 224, 118, 0.4);
+}
+
+.navbar-right {
+  position: absolute;
+  right: 32rpx;
+  display: flex;
+  align-items: center;
+}
+
+.clear-btn {
+  font-size: 28rpx;
+  color: #f9e076;
+  font-weight: 500;
+  text-shadow: 0 0 8rpx rgba(249, 224, 118, 0.3);
+  padding: 8rpx 16rpx;
+  transition: all 0.3s;
+}
+
+.clear-btn:active {
+  opacity: 0.7;
+  transform: scale(0.95);
+}
+
+.status-dot.online {
+  background: #4caf50;
+  box-shadow: 0 0 12rpx rgba(76, 175, 80, 0.8);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+/* 聊天消息区域 */
+.chat-messages {
+  height: calc(100vh - 100rpx - 200rpx - env(safe-area-inset-top));
+  padding: 24rpx;
+  overflow-y: auto;
+}
+
+.message-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
+
+.message-wrapper {
+  width: 100%;
+}
+
+/* 系统消息 */
+.system-message {
+  display: flex;
+  justify-content: center;
+  margin: 16rpx 0;
+}
+
+.system-text {
+  background: rgba(249, 224, 118, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1rpx solid rgba(249, 224, 118, 0.2);
+  color: rgba(249, 224, 118, 0.8);
+  padding: 12rpx 24rpx;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+  text-align: center;
+  max-width: 80%;
+  line-height: 1.5;
+}
+
+/* Bubble 样式 */
+.bubble-container {
+  display: flex;
+  align-items: flex-end;
+  gap: 16rpx;
+  width: 100%;
+}
+
+.bubble-container.user {
+  flex-direction: row-reverse;
+}
+
+.bubble-avatar {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.bubble-avatar image {
+  width: 100%;
+  height: 100%;
+}
+
+.bubble-content {
+  flex: 1;
+  max-width: 70%;
+}
+
+.bubble {
+  padding: 20rpx 24rpx;
+  border-radius: 24rpx;
+  position: relative;
+  word-wrap: break-word;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
+}
+
+.bubble.ai {
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.15) 0%, rgba(249, 224, 118, 0.08) 100%);
+  border: 1rpx solid rgba(249, 224, 118, 0.3);
+  color: #f9e076;
+  border-bottom-left-radius: 8rpx;
+}
+
+.bubble.user {
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  color: #1a0b2e;
+  border-bottom-right-radius: 8rpx;
+  box-shadow: 0 8rpx 24rpx rgba(249, 224, 118, 0.3);
+}
+
+.bubble-text {
+  font-size: 28rpx;
+  line-height: 1.6;
+  display: block;
+  margin-bottom: 8rpx;
+}
+
+.bubble-actions {
+  display: flex;
+  gap: 12rpx;
+  margin: 12rpx 0 8rpx 0;
+}
+
+.action-btn {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  background: rgba(249, 224, 118, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+
+.action-btn:active {
+  background: rgba(249, 224, 118, 0.4);
+  transform: scale(0.95);
+}
+
+.action-icon {
+  font-size: 24rpx;
+}
+
+.bubble-time {
+  font-size: 20rpx;
+  opacity: 0.6;
+  text-align: right;
+}
+
+.bubble.ai .bubble-time {
+  text-align: left;
+}
+
+/* 正在输入 */
+.typing-indicator {
+  display: flex;
+  align-items: flex-end;
+  gap: 16rpx;
+}
+
+.typing-bubble {
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.15) 0%, rgba(249, 224, 118, 0.08) 100%);
+  border: 1rpx solid rgba(249, 224, 118, 0.3);
+  padding: 20rpx 24rpx;
+  border-radius: 24rpx;
+  border-bottom-left-radius: 8rpx;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
+}
+
+.typing-dots {
+  display: flex;
+  gap: 8rpx;
+  align-items: center;
+}
+
+.dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: #f9e076;
+  box-shadow: 0 0 8rpx rgba(249, 224, 118, 0.5);
+  animation: typing 1.4s infinite ease-in-out;
+}
+
+.dot:nth-child(1) { animation-delay: -0.32s; }
+.dot:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes typing {
+  0%, 80%, 100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* 输入区域 */
+.input-area {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(26, 11, 46, 0.95);
+  backdrop-filter: blur(20rpx);
+  border-top: 1rpx solid rgba(249, 224, 118, 0.1);
+  padding: 16rpx 24rpx;
+  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+}
+
+.action-bar {
+  margin-bottom: 12rpx;
+}
+
+.template-selector-btn {
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
+  border: 2rpx solid rgba(249, 224, 118, 0.3);
+  border-radius: 16rpx;
+  padding: 12rpx 20rpx;
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  transition: all 0.3s;
+}
+
+.template-selector-btn:active {
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.2) 0%, rgba(249, 224, 118, 0.1) 100%);
+  transform: scale(0.98);
+}
+
+.template-icon {
+  font-size: 28rpx;
+}
+
+.template-name {
+  flex: 1;
+  font-size: 26rpx;
+  color: #f9e076;
+  font-weight: 500;
+}
+
+.arrow-icon {
+  font-size: 32rpx;
+  color: #f9e076;
+}
+
+/* Sender 样式 */
+.sender-container {
+  background: rgba(249, 224, 118, 0.08);
+  border: 1rpx solid rgba(249, 224, 118, 0.2);
+  border-radius: 24rpx;
+  overflow: hidden;
+}
+
+.text-input-mode {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  padding: 8rpx 16rpx;
+}
+
+.text-input {
+  flex: 1;
+  font-size: 28rpx;
+  color: #f9e076;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 12rpx 0;
+  min-height: 48rpx;
+}
+
+.text-input::placeholder {
+  color: rgba(249, 224, 118, 0.5);
+}
+
+.input-actions {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.action-icon-btn {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  background: rgba(249, 224, 118, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+
+.action-icon-btn:active {
+  background: rgba(249, 224, 118, 0.3);
+  transform: scale(0.95);
+}
+
+.icon {
+  font-size: 28rpx;
+}
+
+.send-btn {
+  padding: 12rpx 24rpx;
+  border-radius: 20rpx;
+  background: rgba(249, 224, 118, 0.2);
+  font-size: 26rpx;
+  color: rgba(249, 224, 118, 0.6);
+  font-weight: 500;
+  transition: all 0.3s;
+}
+
+.send-btn.active {
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  color: #1a0b2e;
+  box-shadow: 0 4rpx 12rpx rgba(249, 224, 118, 0.4);
+}
+
+.send-btn.active:active {
+  transform: scale(0.95);
+}
+
+.send-icon {
+  display: block;
+}
+
+/* 语音输入模式 */
+.voice-input-mode {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  padding: 12rpx 16rpx;
+}
+
+.hold-to-speak {
+  flex: 1;
+  background: rgba(249, 224, 118, 0.1);
+  border: 2rpx dashed rgba(249, 224, 118, 0.3);
+  border-radius: 16rpx;
+  padding: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+
+.hold-to-speak.recording {
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  border-color: transparent;
+  animation: pulse-recording 1s infinite;
+}
+
+.speak-text {
+  font-size: 28rpx;
+  color: #f9e076;
+  font-weight: 500;
+}
+
+.hold-to-speak.recording .speak-text {
+  color: #1a0b2e;
+}
+
+@keyframes pulse-recording {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+}
+
+/* 录音提示 */
+.recording-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  backdrop-filter: blur(4rpx);
+}
+
+.recording-modal {
+  background: rgba(26, 11, 46, 0.95);
+  backdrop-filter: blur(20rpx);
+  border: 2rpx solid rgba(249, 224, 118, 0.3);
+  padding: 48rpx;
+  border-radius: 32rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24rpx;
+  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.5);
+}
+
+.recording-tip {
+  font-size: 28rpx;
+  color: #f9e076;
+  font-weight: 500;
+  text-shadow: 0 0 10rpx rgba(249, 224, 118, 0.5);
+}
+
+.recording-animation {
+  display: flex;
+  gap: 8rpx;
+  align-items: center;
+}
+
+.wave {
+  width: 6rpx;
+  height: 40rpx;
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  border-radius: 3rpx;
+  animation: wave 1.2s infinite ease-in-out;
+  box-shadow: 0 0 8rpx rgba(249, 224, 118, 0.5);
+}
+
+.wave:nth-child(1) { animation-delay: 0s; }
+.wave:nth-child(2) { animation-delay: 0.1s; }
+.wave:nth-child(3) { animation-delay: 0.2s; }
+.wave:nth-child(4) { animation-delay: 0.3s; }
+.wave:nth-child(5) { animation-delay: 0.4s; }
+
+@keyframes wave {
+  0%, 100% {
+    height: 40rpx;
+  }
+  50% {
+    height: 80rpx;
+  }
+}
+
+/* 模态框 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  backdrop-filter: blur(8rpx);
+}
+
+.modal-content {
+  width: 86%;
+  max-width: 640rpx;
+  max-height: 80vh;
+  background: linear-gradient(135deg, rgba(26, 11, 46, 0.98) 0%, rgba(45, 27, 78, 0.98) 100%);
+  border: 2rpx solid rgba(249, 224, 118, 0.3);
+  border-radius: 32rpx;
+  overflow: hidden;
+  box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx;
+  border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.08) 0%, rgba(249, 224, 118, 0.03) 100%);
+}
+
+.modal-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #f9e076;
+  text-shadow: 0 0 15rpx rgba(249, 224, 118, 0.5);
+}
+
+.close-btn {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  background: rgba(249, 224, 118, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+
+.close-btn:active {
+  background: rgba(249, 224, 118, 0.2);
+  transform: scale(0.95);
+}
+
+.close-icon {
+  font-size: 28rpx;
+  color: #f9e076;
+}
+
+.template-list {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.template-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx;
+  border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
+  transition: all 0.3s;
+}
+
+.template-item:active {
+  background: rgba(249, 224, 118, 0.05);
+}
+
+.template-item.active {
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.15) 0%, rgba(249, 224, 118, 0.08) 100%);
+}
+
+.template-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+  padding-right: 16rpx;
+}
+
+.template-item .template-name {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #f9e076;
+  margin-bottom: 4rpx;
+}
+
+.template-desc {
+  font-size: 24rpx;
+  color: rgba(249, 224, 118, 0.7);
+  line-height: 1.5;
+}
+
+.check-mark {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  box-shadow: 0 4rpx 12rpx rgba(249, 224, 118, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.check-icon {
+  font-size: 24rpx;
+  color: #1a0b2e;
+  font-weight: bold;
+}
+</style>
diff --git a/src/pages.json b/src/pages.json
index 155158e..63970ee 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -18,6 +18,12 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/role-chat/role-chat",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/mine/mine",
 			"style": {
diff --git a/src/pages/chat/chat.vue b/src/pages/chat/chat.vue
index 825be08..ac68197 100644
--- a/src/pages/chat/chat.vue
+++ b/src/pages/chat/chat.vue
@@ -14,19 +14,22 @@
 
     <!-- 自定义导航栏 -->
     <view class="custom-navbar">
-      <view class="navbar-left" @tap="goBack" v-if="showBackButton">
-        <text class="back-icon">←</text>
-        <text class="back-text">返回</text>
+      <view class="navbar-left">
+        <view v-if="showBackButton" @tap="goBack" class="left-btn">
+          <text class="back-icon">←</text>
+          <text class="back-text">返回</text>
+        </view>
+        <text class="clear-btn" @tap="clearContext">清空</text>
       </view>
       <view class="navbar-center" :class="{'centered': !showBackButton}">
         <image class="character-avatar" :src="currentCharacter.avatar" mode="aspectFill" />
         <text class="character-name">{{ currentCharacter.name }}</text>
       </view>
       <view class="navbar-right">
-        <text class="status-dot" :class="{'online': isOnline}"></text>
       </view>
     </view>
 
+
     <!-- 聊天消息区域 - 使用 Ant Design X Bubble.List -->
     <scroll-view
       class="chat-messages"
@@ -257,16 +260,23 @@ const initPage = async () => {
     currentCharacter.value = {
       id: 'wei-ai',
       name: options.characterName || '蔚AI',
-      avatar: options.characterAvatar || '/static/logo.png',
+      avatar: options.characterAvatar || '/static/avatar/icon_hushi.jpg',
       greeting: decodeURIComponent(options.introMessage || '你好！我是蔚AI，很高兴为您服务！')
     };
 
     await loadAIConfigs();
-    await createNewConversation('wei-ai');
-    addMessage('ai', currentCharacter.value.greeting);
+    createNewConversation('wei-ai');
 
-    if (!isLoggedIn.value) {
-      addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
+    // 尝试加载历史消息
+    await loadHistoryMessages();
+
+    // 如果没有历史消息，显示欢迎消息
+    if (messages.value.length === 0) {
+      addMessage('ai', currentCharacter.value.greeting);
+
+      if (!isLoggedIn.value) {
+        addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
+      }
     }
   }
   // AI角色
@@ -295,11 +305,18 @@ const initPage = async () => {
       currentTemplateId.value = parseInt(options.templateId);
     }
 
-    await createNewConversation(options.roleId);
-    addMessage('ai', currentCharacter.value.greeting);
+    createNewConversation(options.roleId);
 
-    if (!isLoggedIn.value) {
-      addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
+    // 尝试加载历史消息
+    await loadHistoryMessages();
+
+    // 如果没有历史消息，显示欢迎消息
+    if (messages.value.length === 0) {
+      addMessage('ai', currentCharacter.value.greeting);
+
+      if (!isLoggedIn.value) {
+        addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
+      }
     }
   }
   // 默认角色
@@ -309,11 +326,18 @@ const initPage = async () => {
     if (character) {
       currentCharacter.value = character;
       await loadAIConfigs();
-      await createNewConversation(characterId);
-      addMessage('ai', character.greeting);
+      createNewConversation(characterId);
 
-      if (!isLoggedIn.value) {
-        addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
+      // 尝试加载历史消息
+      await loadHistoryMessages();
+
+      // 如果没有历史消息，显示欢迎消息
+      if (messages.value.length === 0) {
+        addMessage('ai', character.greeting);
+
+        if (!isLoggedIn.value) {
+          addMessage('system', '您当前处于未登录状态，将使用本地模拟回复。登录后可享受完整的AI对话功能。');
+        }
       }
     }
   }
@@ -461,17 +485,115 @@ const sendMessage = async () => {
   }
 };
 
-// 创建新对话
-const createNewConversation = async (characterId) => {
+// 创建或获取会话ID（基于角色持久化存储）
+const createNewConversation = (characterId) => {
+  // 生成存储key：根据角色类型区分
+  let storageKey = '';
+  if (characterId === 'wei-ai' || !currentCharacter.value.roleId) {
+    // 蔚AI或默认角色
+    storageKey = `session_weiai`;
+  } else {
+    // 剧情角色
+    storageKey = `session_role_${currentCharacter.value.roleId}`;
+  }
+
+  // 尝试从本地存储获取已有的sessionId
+  let existingSessionId = uni.getStorageSync(storageKey);
+
+  if (existingSessionId) {
+    // 已有sessionId，直接使用（保持上下文）
+    conversationId.value = existingSessionId;
+    console.log('使用已有sessionId:', existingSessionId, 'storageKey:', storageKey);
+  } else {
+    // 生成新的sessionId
+    const userId = userStore.userInfo?.openid || userStore.userInfo?.userId || 'guest';
+    const timestamp = Date.now();
+    const newSessionId = `session_${characterId}_${userId}_${timestamp}`;
+
+    // 存储到本地
+    uni.setStorageSync(storageKey, newSessionId);
+    conversationId.value = newSessionId;
+    console.log('创建新sessionId:', newSessionId, 'storageKey:', storageKey);
+  }
+};
+
+// 加载历史消息
+const loadHistoryMessages = async () => {
+  if (!conversationId.value || !isLoggedIn.value) {
+    console.log('没有sessionId或用户未登录，跳过加载历史消息');
+    return;
+  }
+
   try {
-    const result = await chatAPI.createConversation(characterId);
-    if (result.success) {
-      conversationId.value = result.data.conversationId;
+    console.log('开始加载历史消息，sessionId:', conversationId.value);
+    const result = await chatAPI.getHistoryMessages(conversationId.value);
+
+    if (result.success && result.data && result.data.length > 0) {
+      console.log('获取到历史消息:', result.data.length, '条');
+
+      // 将后端消息格式转换为前端格式，保持与API回复一致的“清理后回复”逻辑
+      const historyMessages = [];
+
+      result.data.forEach(msg => {
+        // 格式化时间
+        let timeStr = '';
+        if (msg.createTime) {
+          const date = new Date(msg.createTime);
+          const hours = String(date.getHours()).padStart(2, '0');
+          const minutes = String(date.getMinutes()).padStart(2, '0');
+          timeStr = `${hours}:${minutes}`;
+        }
+
+        const messageType = msg.sender === 'assistant' ? 'ai' : (msg.sender === 'user' ? 'user' : 'system');
+        const rawContent = msg.message || '';
+
+        // 与API一致：先清理文本，再根据 & 分段
+        const cleanedContent = cleanText(rawContent);
+
+        if (messageType === 'ai' && cleanedContent.includes('&')) {
+          const segments = cleanedContent
+            .split('&')
+            .map(s => s.trim())
+            .filter(Boolean);
+
+          segments.forEach(segment => {
+            historyMessages.push({
+              type: messageType,
+              content: segment,
+              time: timeStr
+            });
+          });
+        } else {
+          // 非 AI 或无分隔符，直接使用清理后的内容
+          const content = cleanedContent.trim();
+          if (content) {
+            historyMessages.push({
+              type: messageType,
+              content,
+              time: timeStr
+            });
+          }
+        }
+      });
+
+      // 按时间排序（从旧到新）
+      historyMessages.sort((a, b) => {
+        if (!a.time || !b.time) return 0;
+        return a.time.localeCompare(b.time);
+      });
+
+      // 清空当前消息列表，加载历史消息
+      messages.value = historyMessages;
+      console.log('历史消息加载完成，共', messages.value.length, '条');
+
+      // 滚动到底部
+      await nextTick();
+      scrollToBottom();
     } else {
-      conversationId.value = `local_${Date.now()}`;
+      console.log('没有历史消息或获取失败');
     }
   } catch (error) {
-    conversationId.value = `local_${Date.now()}`;
+    console.error('加载历史消息失败:', error);
   }
 };
 
@@ -814,6 +936,65 @@ const handleInputFocus = () => {
 const goBack = () => {
   uni.navigateBack();
 };
+
+
+// 清空对话上下文
+const clearContext = async () => {
+  uni.showModal({
+    title: '清空对话',
+    content: '确定要清空与该角色的所有对话记录吗？此操作不可恢复。',
+    confirmText: '确定清空',
+    cancelText: '取消',
+    success: async (res) => {
+      if (res.confirm) {
+        try {
+          uni.showLoading({ title: '清空中...' });
+
+          // 1. 调用后端清除session（如果用户已登录）
+          if (conversationId.value && isLoggedIn.value) {
+            try {
+              const result = await chatAPI.clearSession(conversationId.value);
+              console.log('后端清除会话结果:', result);
+            } catch (error) {
+              console.log('后端清除失败，继续本地清除:', error);
+            }
+          }
+
+          // 2. 删除本地存储的sessionId
+          let storageKey = '';
+          if (currentCharacter.value.id === 'wei-ai' || !currentCharacter.value.roleId) {
+            storageKey = `session_weiai`;
+          } else {
+            storageKey = `session_role_${currentCharacter.value.roleId}`;
+          }
+          uni.removeStorageSync(storageKey);
+          console.log('删除本地sessionId:', storageKey);
+
+          // 3. 生成新的sessionId
+          const characterIdForSession = currentCharacter.value.id || currentCharacter.value.roleId || 'default';
+          createNewConversation(characterIdForSession);
+
+          // 4. 清空消息列表（保留欢迎消息）
+          messages.value = [];
+          addMessage('ai', currentCharacter.value.greeting || '你好！很高兴再次见到你！');
+
+          uni.hideLoading();
+          uni.showToast({
+            title: '对话已清空',
+            icon: 'success'
+          });
+        } catch (error) {
+          console.error('清空对话失败:', error);
+          uni.hideLoading();
+          uni.showToast({
+            title: '清空失败',
+            icon: 'none'
+          });
+        }
+      }
+    }
+  });
+};
 </script>
 
 <style scoped>
@@ -897,13 +1078,19 @@ page {
   left: 24rpx;
   display: flex;
   align-items: center;
-  gap: 8rpx;
+  gap: 16rpx;
   color: #f9e076;
   font-size: 28rpx;
   font-weight: 500;
   text-shadow: 0 0 10rpx rgba(249, 224, 118, 0.3);
 }
 
+.left-btn {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
 .back-icon {
   font-size: 32rpx;
 }
@@ -938,13 +1125,22 @@ page {
 .navbar-right {
   position: absolute;
   right: 32rpx;
+  display: flex;
+  align-items: center;
 }
 
-.status-dot {
-  width: 16rpx;
-  height: 16rpx;
-  border-radius: 50%;
-  background: rgba(249, 224, 118, 0.3);
+.clear-btn {
+  font-size: 28rpx;
+  color: #f9e076;
+  font-weight: 500;
+  text-shadow: 0 0 8rpx rgba(249, 224, 118, 0.3);
+  padding: 8rpx 16rpx;
+  transition: all 0.3s;
+}
+
+.clear-btn:active {
+  opacity: 0.7;
+  transform: scale(0.95);
 }
 
 .status-dot.online {
@@ -962,6 +1158,7 @@ page {
   }
 }
 
+
 /* 聊天消息区域 */
 .chat-messages {
   height: calc(100vh - 100rpx - 200rpx - env(safe-area-inset-top));
diff --git a/src/pages/drama/index.vue b/src/pages/drama/index.vue
index 2e3fc2e..8d90e4b 100644
--- a/src/pages/drama/index.vue
+++ b/src/pages/drama/index.vue
@@ -1,8 +1,24 @@
 <template>
   <view class="floral-container">
+    <!-- 夜空装饰背景 -->
+    <view class="night-sky-decoration">
+      <view class="star star-1"></view>
+      <view class="star star-2"></view>
+      <view class="star star-3"></view>
+      <view class="star star-4"></view>
+      <view class="star star-5"></view>
+      <view class="star star-6"></view>
+      <view class="star star-7"></view>
+      <view class="star star-8"></view>
+    </view>
+
     <!-- 自定义导航栏 -->
     <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
       <view class="navbar-content">
+        <view class="navbar-stars">
+          <view class="navbar-star star-left"></view>
+          <view class="navbar-star star-right"></view>
+        </view>
         <view class="navbar-title">剧情角色</view>
       </view>
     </view>
@@ -18,7 +34,9 @@
         <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="cover-container">
+                <image class="cover" :src="getResourceUrl(item.cover)" mode="aspectFill" />
+              </view>
               <view class="floral-tag">{{ item.tag }}</view>
               <view class="content-area">
                 <view class="title">{{ item.title }}</view>
@@ -34,7 +52,9 @@
         <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="cover-container">
+                <image class="cover" :src="getResourceUrl(item.cover)" mode="aspectFill" />
+              </view>
               <view class="floral-tag">{{ item.tag }}</view>
               <view class="content-area">
                 <view class="title">{{ item.title }}</view>
@@ -69,8 +89,8 @@
         <view class="detail-cover-container">
           <image
             class="detail-cover"
-            :src="selectedItem?.cover"
-            mode="aspectFit"
+            :src="getResourceUrl(selectedItem?.cover)"
+            mode="aspectFill"
             :class="{'cover-zoomed': showDetailModal}"
           />
         </view>
@@ -85,7 +105,7 @@
           </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>
+            <button class="floral-btn detail-btn confirm" @click="useFromDetail">✨ 去使用</button>
           </view>
         </view>
       </view>
@@ -96,7 +116,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import { useUserStore } from '@/stores/user.js';
-import { roleAPI } from '@/utils/api.js';
+import { roleAPI, getResourceUrl } from '@/utils/api.js';
 
 const userStore = useUserStore();
 const showLoginModal = ref(false);
@@ -334,8 +354,9 @@ const loadDramaList = async () => {
       dramaList.value = roles.map(role => ({
         id: role.roleId,
         roleId: role.roleId,
-        cover: role.avatar || '/static/default-avatar.png',
+        cover: role.backgroundImage || role.avatar || '/static/default-avatar.png', // 使用背景图片作为封面，如果没有则使用头像
         avatar: role.avatar || '/static/default-avatar.png',
+        backgroundImage: role.backgroundImage || '', // 背景图片字段
         tag: role.tag || '角色',
         title: role.roleName || '未命名角色',
         roleName: role.roleName || '未命名角色',
@@ -413,7 +434,7 @@ const handleUse = (item) => {
     .join('&');
     
   uni.hideLoading();
-  uni.navigateTo({ url: `/pages/chat/chat?${queryString}` });
+  uni.navigateTo({ url: `/pages/role-chat/role-chat?${queryString}` });
 };
 
 const showLoginTip = () => { showLoginModal.value = true; };
@@ -423,27 +444,62 @@ const useFromDetail = () => { if (selectedItem.value) { const v = selectedItem.v
 const goToLogin = () => { showLoginModal.value = false; uni.switchTab({ url: '/pages/mine/mine' }); };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .floral-container {
   width: 100vw;
   min-height: 100vh;
-  background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
+  background: linear-gradient(180deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);
   position: relative;
-  overflow-x: hidden;
-  padding-bottom: 120rpx;
+  overflow: hidden;
+  padding-bottom: 100rpx;
   display: flex;
   flex-direction: column;
 }
 
+/* 夜空装饰 */
+.night-sky-decoration {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.star {
+  position: absolute;
+  width: 6rpx;
+  height: 6rpx;
+  background: #f9e076;
+  border-radius: 50%;
+  animation: twinkle 2s infinite;
+  box-shadow: 0 0 10rpx #f9e076;
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
+}
+
+.star-1 { top: 10%; left: 15%; animation-delay: 0s; }
+.star-2 { top: 20%; left: 80%; animation-delay: 0.3s; }
+.star-3 { top: 30%; left: 45%; animation-delay: 0.6s; }
+.star-4 { top: 50%; left: 25%; animation-delay: 0.9s; }
+.star-5 { top: 60%; left: 70%; animation-delay: 1.2s; }
+.star-6 { top: 70%; left: 40%; animation-delay: 1.5s; }
+.star-7 { top: 15%; left: 60%; animation-delay: 0.4s; }
+.star-8 { top: 85%; left: 55%; animation-delay: 1.8s; }
+
 /* 自定义导航栏 */
 .custom-navbar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
-  background: linear-gradient(135deg, rgba(26, 11, 46, 0.95) 0%, rgba(74, 30, 109, 0.95) 25%, rgba(107, 44, 156, 0.95) 50%, rgba(138, 43, 226, 0.95) 75%, rgba(75, 0, 130, 0.95) 100%);
-  backdrop-filter: blur(10px);
-  border-bottom: 1rpx solid rgba(251, 191, 36, 0.3);
+  background: rgba(26, 11, 46, 0.95);
+  backdrop-filter: blur(20rpx);
+  border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
   z-index: 1000;
 }
 
@@ -452,40 +508,81 @@ const goToLogin = () => { showLoginModal.value = false; uni.switchTab({ url: '/p
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 24rpx;
+  padding: 0 30rpx;
+  position: relative;
+}
+
+.navbar-stars {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.navbar-star {
+  position: absolute;
+  width: 8rpx;
+  height: 8rpx;
+  background: #f9e076;
+  border-radius: 50%;
+  box-shadow: 0 0 15rpx #f9e076;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.5; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.2); }
+}
+
+.star-left {
+  top: 50%;
+  left: 30rpx;
+  transform: translateY(-50%);
+}
+
+.star-right {
+  top: 50%;
+  right: 30rpx;
+  transform: translateY(-50%);
 }
 
 .navbar-title {
-  color: #ffffff;
+  color: #f9e076;
   font-weight: bold;
-  font-size: 32rpx;
-  text-shadow: 0 0 10px rgba(249, 224, 118, 0.5);
+  font-size: 36rpx;
+  text-shadow: 0 0 20rpx rgba(249, 224, 118, 0.5);
+  z-index: 1;
 }
 
 .scroll-container {
   flex: 1;
   min-height: 0;
-  padding: 24rpx;
-  border-radius: 20rpx;
+  padding: 20rpx 16rpx; 
+  position: relative;
+  box-sizing: border-box; 
+  z-index: 1;
 }
 
 .two-column-grid {
   display: flex;
-  gap: 20rpx;
+  gap: 12rpx;
+  width: 100%;
+  box-sizing: border-box;  
 }
 
 .column {
-  flex: 1;
+  width: calc(50% - 8rpx);
   display: flex;
   flex-direction: column;
   gap: 20rpx;
+  flex-shrink: 0;
 }
 
 .floral-grid-card {
-  background: rgba(255, 255, 255, 0.9);
-  border: 2rpx solid rgba(138, 43, 226, 0.3);
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
+  border: 2rpx solid rgba(249, 224, 118, 0.2);
   border-radius: 25rpx;
-  box-shadow: 0 8rpx 30rpx rgba(138, 43, 226, 0.15);
+  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -493,97 +590,244 @@ const goToLogin = () => { showLoginModal.value = false; uni.switchTab({ url: '/p
   transition: all 0.3s ease;
 }
 
+.floral-grid-card:active {
+  transform: translateY(-4rpx);
+  box-shadow: 0 15rpx 50rpx rgba(249, 224, 118, 0.2);
+  border-color: rgba(249, 224, 118, 0.4);
+}
+
+.cover-container {
+  width: 100%;
+  height: 280rpx;
+  overflow: hidden;
+  position: relative;
+}
+
 .cover {
   width: 100%;
-  height: 320rpx;
+  height: 100%;
   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);
+  top: 12rpx;
+  left: 12rpx;
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  color: #1a0b2e;
+  padding: 8rpx 16rpx;
+  border-radius: 20rpx;
+  font-size: 22rpx;
+  font-weight: bold;
+  box-shadow: 0 4rpx 12rpx rgba(249, 224, 118, 0.4);
+  z-index: 2;
 }
 
-.content-area { padding: 16rpx; }
-.title { font-size: 28rpx; color: #333; font-weight: bold; }
-.card-bottom { margin-top: 8rpx; display: flex; justify-content: flex-end; }
+.content-area {
+  padding: 20rpx;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  font-size: 28rpx;
+  color: #f9e076;
+  font-weight: bold;
+  line-height: 1.4;
+  margin-bottom: 12rpx;
+}
+
+.card-bottom {
+  margin-top: auto;
+  display: flex;
+  justify-content: flex-end;
+}
 
 .floral-btn {
-  background: linear-gradient(135deg, #8a2be2, #6b2c9c);
-  color: #fff;
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  color: #1a0b2e;
   border: none;
   border-radius: 25rpx;
-  font-size: 26rpx;
-  padding: 12rpx 28rpx;
-  box-shadow: 0 4rpx 15rpx rgba(138, 43, 226, 0.3);
+  font-size: 24rpx;
+  font-weight: bold;
+  padding: 12rpx 24rpx;
+  box-shadow: 0 6rpx 16rpx rgba(249, 224, 118, 0.3);
   transition: all 0.3s ease;
 }
 
+.floral-btn:active {
+  transform: scale(0.95);
+  box-shadow: 0 3rpx 8rpx rgba(249, 224, 118, 0.3);
+}
+
 .floral-btn.outline {
   background: transparent;
-  color: #8a2be2;
-  border: 2rpx solid #8a2be2;
+  color: #f9e076;
+  border: 2rpx solid #f9e076;
+  box-shadow: none;
 }
 
-.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;
 }
 
-.use-btn { font-size: 24rpx; }
-.bottom-spacing { height: 40rpx; }
+.bottom-spacing {
+  height: 40rpx;
+}
 
 /* 登录弹窗 */
 .floral-modal {
   position: fixed;
-  left: 0; right: 0; top: 0; bottom: 0;
-  background: rgba(0,0,0,0.3);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
   z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 .floral-modal-content {
   width: 80vw;
-  background: #fff;
-  border-radius: 20rpx;
-  padding: 24rpx;
+  background: linear-gradient(135deg, rgba(26, 11, 46, 0.98) 0%, rgba(45, 27, 78, 0.98) 100%);
+  border: 2rpx solid rgba(249, 224, 118, 0.3);
+  border-radius: 30rpx;
+  padding: 40rpx;
+  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
+}
+
+.modal-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #f9e076;
+  margin-bottom: 20rpx;
+  text-align: center;
+}
+
+.modal-text {
+  font-size: 26rpx;
+  color: rgba(249, 224, 118, 0.8);
+  margin-bottom: 30rpx;
+  text-align: center;
+  line-height: 1.6;
+}
+
+.modal-btns {
+  display: flex;
+  gap: 20rpx;
+  justify-content: center;
+}
+
+.modal-btn {
+  flex: 1;
+  padding: 16rpx 32rpx;
+}
+
+.cancel {
+  background: transparent;
+  color: rgba(249, 224, 118, 0.6);
+  border: 2rpx solid rgba(249, 224, 118, 0.3);
+}
+
+.confirm {
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  color: #1a0b2e;
 }
-.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);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
   z-index: 2100;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 .detail-modal-content {
   width: 86vw;
   max-height: 80vh;
-  background: #ffffff;
-  border-radius: 16rpx;
+  background: linear-gradient(135deg, rgba(26, 11, 46, 0.98) 0%, rgba(45, 27, 78, 0.98) 100%);
+  border: 2rpx solid rgba(249, 224, 118, 0.3);
+  border-radius: 30rpx;
   overflow: hidden;
+  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
+}
+
+.detail-cover-container {
+  width: 100%;
+  height: 320rpx;
+  overflow: hidden;
+  position: relative;
+}
+
+.detail-cover {
+  width: 100%;
+  height: 100%;
+  transition: transform 0.3s ease;
+}
+
+.cover-zoomed {
+  transform: scale(1.05);
+}
+
+.detail-info {
+  padding: 30rpx;
+  opacity: 0;
+  transform: translateY(20rpx);
+  transition: all 0.3s ease 0.1s;
+}
+
+.info-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.detail-tag {
+  display: inline-block;
+  font-size: 22rpx;
+  color: #1a0b2e;
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
+  padding: 6rpx 16rpx;
+  border-radius: 16rpx;
+  margin-bottom: 16rpx;
+  font-weight: bold;
+}
+
+.detail-title {
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #f9e076;
+  margin-bottom: 20rpx;
+}
+
+.detail-description {
+  max-height: 200rpx;
+  margin-bottom: 30rpx;
+  overflow-y: auto;
+}
+
+.description-text {
+  font-size: 26rpx;
+  color: rgba(249, 224, 118, 0.8);
+  line-height: 1.8;
+}
+
+.detail-actions {
+  display: flex;
+  justify-content: center;
+  gap: 20rpx;
+}
+
+.detail-btn {
+  flex: 1;
+  padding: 16rpx 32rpx;
 }
-.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/role-chat/role-chat.vue b/src/pages/role-chat/role-chat.vue
new file mode 100644
index 0000000..4099488
--- /dev/null
+++ b/src/pages/role-chat/role-chat.vue
@@ -0,0 +1,57 @@
+<template>
+  <ChatBox
+    :character-config="characterConfig"
+    :ai-config="aiConfig"
+    :ui-config="uiConfig"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import ChatBox from '@/components/ChatBox.vue';
+
+// 角色配置
+const characterConfig = ref({});
+
+// AI 配置
+const aiConfig = ref({
+  modelId: 10,
+  templateId: 6
+});
+
+// UI 配置
+const uiConfig = ref({
+  showBackButton: true  // 角色聊天页面显示返回按钮
+});
+
+// 初始化：解析 URL 参数
+onMounted(() => {
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1];
+  const options = currentPage.options || {};
+
+  // 组装角色配置
+  characterConfig.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 配置
+  aiConfig.value = {
+    modelId: options.modelId ? parseInt(options.modelId) : 10,
+    templateId: options.templateId ? parseInt(options.templateId) : (options.roleId ? parseInt(options.roleId) : 6),
+    ttsId: options.ttsId || null,
+    sttId: options.sttId || null,
+    temperature: options.temperature ? parseFloat(options.temperature) : 0.7,
+    topP: options.topP ? parseFloat(options.topP) : 0.9
+  };
+});
+</script>
+
+<style scoped>
+/* 无需额外样式，所有样式在 ChatBox 组件中 */
+</style>
diff --git a/src/static/avatar/icon_hushi.jpg b/src/static/avatar/icon_hushi.jpg
new file mode 100644
index 0000000..5581656
Binary files /dev/null and b/src/static/avatar/icon_hushi.jpg differ
diff --git a/src/stores/user.js b/src/stores/user.js
index 8054df4..4c668a9 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://localhost:8091/app/login', 
+        url: 'http://192.168.1.2:8091/app/login', 
         method: 'POST',
         data: {
           code
diff --git a/src/utils/api.js b/src/utils/api.js
index 1fbc293..62b5aa6 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -1,6 +1,31 @@
 // API服务文件
 import { useUserStore } from '@/stores/user.js';
 
+// 图片URL处理函数 - 处理小程序中图片路径问题
+export const getResourceUrl = (url) => {
+  if (!url || typeof url !== 'string') {
+    return '/static/default-avatar.png';
+  }
+
+  // 如果是完整的http/https URL，直接返回
+  if (url.startsWith('http://') || url.startsWith('https://')) {
+    return url;
+  }
+
+  // 如果是相对路径，拼接完整的服务器地址
+  if (url.startsWith('/file/')) {
+    return BASE_URL + url;
+  }
+
+  // 如果是其他相对路径，也拼接服务器地址
+  if (url.startsWith('/')) {
+    return BASE_URL + url;
+  }
+
+  // 默认返回原路径
+  return url;
+};
+
 // 文本清理函数 - 只保留文字和标点符号
 export const cleanText = (text) => {
   if (!text || typeof text !== 'string') {
@@ -49,7 +74,7 @@ export const cleanText = (text) => {
 };
 
 // 基础配置
-const BASE_URL = 'http://192.168.3.243:8091'; // 根据后端地址调整
+const BASE_URL = 'http://192.168.1.2:8091'; // 根据后端地址调整
 
 // 检查用户登录状态
 const checkLoginStatus = () => {
@@ -150,7 +175,7 @@ export const chatAPI = {
         useFunctionCall: false,
         modelId: params.modelId || null,  // 支持传入modelId，默认为null使用后端默认
         templateId: params.templateId || params.characterId,  // 支持templateId参数
-        sessionId: params.sessionId || null  // 支持sessionId参数
+        sessionId: params.sessionId || params.conversationId || null  // 支持sessionId参数，conversationId作为备选
       };
       
       console.log('发送AI聊天请求，参数:', requestData);
@@ -317,7 +342,7 @@ export const chatAPI = {
           characterId: characterId
         }
       });
-      
+
       return {
         success: true,
         data: response
@@ -329,6 +354,83 @@ export const chatAPI = {
         error: error
       };
     }
+  },
+
+  // 清空会话上下文
+  clearSession: async (sessionId) => {
+    try {
+      const response = await request({
+        url: `/api/chat/session/${sessionId}`,
+        method: 'DELETE'
+      });
+
+      return {
+        success: true,
+        data: response
+      };
+    } catch (error) {
+      console.error('清空会话API调用失败:', error);
+      return {
+        success: false,
+        error: error
+      };
+    }
+  },
+
+  // 获取历史消息（根据sessionId查询全部）
+  getHistoryMessages: async (sessionId) => {
+    const loginStatus = checkLoginStatus();
+
+    // 如果用户未登录，直接返回空数组
+    if (!loginStatus.isLoggedIn) {
+      console.log('用户未登录，无法获取历史消息');
+      return {
+        success: true,
+        data: [],
+        isAnonymous: true
+      };
+    }
+
+    try {
+      const response = await request({
+        url: '/app/message/history',
+        method: 'GET',
+        data: {
+          sessionId: sessionId
+        }
+      });
+
+      console.log('历史消息API响应:', response);
+
+      // 处理响应数据
+      let messageList = [];
+      if (response && response.data) {
+        // 直接是数组
+        if (Array.isArray(response.data)) {
+          messageList = response.data;
+        }
+        // 可能嵌套在data字段中
+        else if (response.data.data && Array.isArray(response.data.data)) {
+          messageList = response.data.data;
+        }
+      } else if (Array.isArray(response)) {
+        messageList = response;
+      }
+
+      console.log('解析后的历史消息数量:', messageList.length);
+
+      return {
+        success: true,
+        data: messageList
+      };
+    } catch (error) {
+      console.error('获取历史消息失败:', error);
+      return {
+        success: false,
+        error: error,
+        data: []
+      };
+    }
   }
 };