From 6c35c69ed79f2c1e759abc83888ddd7f71b8bab2 Mon Sep 17 00:00:00 2001
From: GeekMaster <yangjian102621@gmail.com>
Date: Mon, 4 Aug 2025 15:04:06 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=95=B4=E5=90=88=E5=AE=8C=E6=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/router.js                        |    6 +-
 web/src/views/ChatExport.vue             |  268 ++---
 web/src/views/mobile/ChatExport.vue      |  182 ----
 web/src/views/mobile/ChatSession.vue     | 1262 +++++++++++-----------
 web/src/views/mobile/Create.vue          |    2 +-
 web/src/views/mobile/Discover.vue        |  599 +++++-----
 web/src/views/mobile/Index.vue           |    6 +-
 web/src/views/mobile/Member.vue          | 1004 +++++++++--------
 web/src/views/mobile/Profile.vue         |  112 +-
 web/src/views/mobile/pages/ImageDall.vue |    4 +-
 web/src/views/mobile/pages/ImageMj.vue   |    6 +-
 web/src/views/mobile/pages/ImageSd.vue   |    4 +-
 12 files changed, 1686 insertions(+), 1769 deletions(-)
 delete mode 100644 web/src/views/mobile/ChatExport.vue

diff --git a/web/src/router.js b/web/src/router.js
index aa3a2bf3..db6231a6 100644
--- a/web/src/router.js
+++ b/web/src/router.js
@@ -324,11 +324,7 @@ const routes = [
         name: 'mobile-chat-session',
         component: () => import('@/views/mobile/ChatSession.vue'),
       },
-      {
-        path: '/mobile/chat/export',
-        name: 'mobile-chat-export',
-        component: () => import('@/views/mobile/ChatExport.vue'),
-      },
+
       {
         path: '/mobile/apps',
         name: 'mobile-apps',
diff --git a/web/src/views/ChatExport.vue b/web/src/views/ChatExport.vue
index 5215d8ec..2fbe53bd 100644
--- a/web/src/views/ChatExport.vue
+++ b/web/src/views/ChatExport.vue
@@ -1,124 +1,144 @@
-<template>
-  <div class="chat-export" v-loading="loading">
-    <div class="chat-box" id="chat-box">
-      <div class="title pt-4">
-        <h2>{{ chatTitle }}</h2>
-      </div>
-
-      <div v-for="item in chatData" :key="item.id">
-        <chat-prompt v-if="item.type === 'prompt'" :data="item" list-style="list" />
-        <chat-reply
-          v-else-if="item.type === 'reply'"
-          :data="item"
-          :read-only="true"
-          list-style="list"
-        />
-      </div>
-    </div>
-    <!-- end chat box -->
-  </div>
-</template>
-<script setup>
-import ChatPrompt from '@/components/ChatPrompt.vue'
-import ChatReply from '@/components/ChatReply.vue'
-import { httpGet } from '@/utils/http'
-import Clipboard from 'clipboard'
-import { ElMessage } from 'element-plus'
-import hl from 'highlight.js'
-import 'highlight.js/styles/a11y-dark.css'
-import { nextTick, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const chatData = ref([])
-const router = useRouter()
-const chatId = router.currentRoute.value.query['chat_id']
-const loading = ref(true)
-const chatTitle = ref('')
-
-httpGet('/api/chat/history?chat_id=' + chatId)
-  .then((res) => {
-    const data = res.data
-    if (!data) {
-      loading.value = false
-      return
-    }
-
-    for (let i = 0; i < data.length; i++) {
-      if (data[i].type === 'prompt') {
-        chatData.value.push(data[i])
-        continue
-      } else if (data[i].type === 'mj') {
-        data[i].content = JSON.parse(data[i].content)
-        data[i].content.content = data[i].content?.content
-        chatData.value.push(data[i])
-        continue
-      }
-
-      data[i].orgContent = data[i].content
-      data[i].content = data[i].content
-      chatData.value.push(data[i])
-    }
-
-    nextTick(() => {
-      hl.configure({ ignoreUnescapedHTML: true })
-      const blocks = document.querySelector('#chat-box').querySelectorAll('pre code')
-      blocks.forEach((block) => {
-        hl.highlightElement(block)
-      })
-    })
-    loading.value = false
-  })
-  .catch((e) => {
-    ElMessage.error('加载聊天记录失败：' + e.message)
-  })
-
-httpGet('/api/chat/detail?chat_id=' + chatId)
-  .then((res) => {
-    chatTitle.value = res.data.title
-  })
-  .catch((e) => {
-    ElMessage.error('加载会失败： ' + e.message)
-  })
-
-onMounted(() => {
-  const clipboard = new Clipboard('.copy-reply')
-  clipboard.on('success', () => {
-    ElMessage.success('复制成功！')
-  })
-
-  clipboard.on('error', () => {
-    ElMessage.error('复制失败！')
-  })
-})
-</script>
-<style lang="scss">
-.chat-export {
-  display: flex;
-  justify-content: center;
-  padding: 0 20px;
-
-  .chat-box {
-    width: 100%;
-    // 变量定义
-    --content-font-size: 16px;
-    --content-color: #c1c1c1;
-
-    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-    padding: 0 0 50px 0;
-
-    .title {
-      text-align: center;
-    }
-
-    .chat-line {
-      font-size: 14px;
-      display: flex;
-      align-items: center;
-
-      .chat-line-inner {
-        max-width: 800px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="chat-export" v-loading="loading">
+    <div class="chat-box" id="chat-box">
+      <div class="title pt-4">
+        <h2>{{ chatTitle }}</h2>
+      </div>
+
+      <div v-for="item in chatData" :key="item.id">
+        <chat-prompt v-if="item.type === 'prompt'" :data="item" list-style="list" />
+        <chat-reply
+          v-else-if="item.type === 'reply'"
+          :data="item"
+          :read-only="true"
+          list-style="list"
+        />
+      </div>
+    </div>
+    <!-- end chat box -->
+  </div>
+</template>
+<script setup>
+import ChatPrompt from '@/components/ChatPrompt.vue'
+import ChatReply from '@/components/ChatReply.vue'
+import { httpGet } from '@/utils/http'
+import Clipboard from 'clipboard'
+import { ElMessage } from 'element-plus'
+import hl from 'highlight.js'
+import 'highlight.js/styles/a11y-dark.css'
+import { nextTick, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const chatData = ref([])
+const router = useRouter()
+const chatId = router.currentRoute.value.query['chat_id']
+const loading = ref(true)
+const chatTitle = ref('')
+
+httpGet('/api/chat/history?chat_id=' + chatId)
+  .then((res) => {
+    const data = res.data
+    if (!data) {
+      loading.value = false
+      return
+    }
+
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].type === 'prompt') {
+        chatData.value.push(data[i])
+        continue
+      } else if (data[i].type === 'mj') {
+        data[i].content = JSON.parse(data[i].content)
+        data[i].content.content = data[i].content?.content
+        chatData.value.push(data[i])
+        continue
+      }
+
+      data[i].orgContent = data[i].content
+      data[i].content = data[i].content
+      chatData.value.push(data[i])
+    }
+
+    nextTick(() => {
+      hl.configure({ ignoreUnescapedHTML: true })
+      const blocks = document.querySelector('#chat-box').querySelectorAll('pre code')
+      blocks.forEach((block) => {
+        hl.highlightElement(block)
+      })
+    })
+    loading.value = false
+  })
+  .catch((e) => {
+    ElMessage.error('加载聊天记录失败：' + e.message)
+  })
+
+httpGet('/api/chat/detail?chat_id=' + chatId)
+  .then((res) => {
+    chatTitle.value = res.data.title
+  })
+  .catch((e) => {
+    ElMessage.error('加载会失败： ' + e.message)
+  })
+
+onMounted(() => {
+  const clipboard = new Clipboard('.copy-reply')
+  clipboard.on('success', () => {
+    ElMessage.success('复制成功！')
+  })
+
+  clipboard.on('error', () => {
+    ElMessage.error('复制失败！')
+  })
+})
+</script>
+<style lang="scss">
+.chat-export {
+  display: flex;
+  justify-content: center;
+  padding: 0 20px;
+
+  .chat-box {
+    width: 100%;
+    max-width: 800px;
+    // 变量定义
+    --content-font-size: 16px;
+    --content-color: #c1c1c1;
+
+    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+    padding: 0 0 50px 0;
+
+    .title {
+      text-align: center;
+    }
+
+    .chat-line {
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+
+      .chat-line-inner {
+        max-width: 800px;
+      }
+    }
+  }
+}
+
+// 移动端适配
+@media (max-width: 768px) {
+  .chat-export {
+    padding: 0 10px;
+
+    .chat-box {
+      padding: 0 0 30px 0;
+
+      .title h2 {
+        font-size: 18px;
+      }
+
+      .chat-line {
+        font-size: 13px;
+      }
+    }
+  }
+}
+</style>
diff --git a/web/src/views/mobile/ChatExport.vue b/web/src/views/mobile/ChatExport.vue
deleted file mode 100644
index 78504221..00000000
--- a/web/src/views/mobile/ChatExport.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<template>
-  <div class="chat-export-mobile">
-    <div class="chat-box">
-      <van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
-        <template #title>
-          <van-dropdown-menu>
-            <van-dropdown-item :title="title">
-              <van-cell center title="角色"> {{ role }}</van-cell>
-              <van-cell center title="模型">{{ model }}</van-cell>
-            </van-dropdown-item>
-          </van-dropdown-menu>
-        </template>
-      </van-nav-bar>
-
-      <div class="chat-list-wrapper">
-        <div id="message-list-box" class="message-list-box">
-          <van-list
-            v-model:error="error"
-            :finished="finished"
-            error-text="请求失败，点击重新加载"
-            @load="onLoad"
-          >
-            <van-cell v-for="item in chatData" :key="item" :border="false" class="message-line">
-              <chat-prompt
-                v-if="item.type === 'prompt'"
-                :content="item.content"
-                :created-at="dateFormat(item['created_at'])"
-                :icon="item.icon"
-                :tokens="item['tokens']"
-              />
-              <chat-reply
-                v-else-if="item.type === 'reply'"
-                :content="item.content"
-                :created-at="dateFormat(item['created_at'])"
-                :icon="item.icon"
-                :org-content="item.orgContent"
-                :tokens="item['tokens']"
-              />
-            </van-cell>
-          </van-list>
-        </div>
-      </div>
-    </div>
-    <!-- end chat box -->
-  </div>
-</template>
-<script setup>
-import ChatPrompt from '@/components/mobile/ChatPrompt.vue'
-import ChatReply from '@/components/mobile/ChatReply.vue'
-import { httpGet } from '@/utils/http'
-import { dateFormat, processContent } from '@/utils/libs'
-import hl from 'highlight.js'
-import 'highlight.js/styles/a11y-dark.css'
-import MarkdownIt from 'markdown-it'
-import mathjaxPlugin from 'markdown-it-mathjax3'
-import { showFailToast } from 'vant'
-import { nextTick, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const chatData = ref([])
-const router = useRouter()
-const chatId = router.currentRoute.value.query['chat_id']
-const title = ref('')
-const role = ref('')
-const model = ref('')
-const finished = ref(false)
-const error = ref(false)
-
-const md = new MarkdownIt({
-  breaks: true,
-  html: true,
-  linkify: true,
-  typographer: true,
-  highlight: function (str, lang) {
-    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
-    // 显示复制代码按钮
-    const copyBtn = `<span class="copy-code-mobile" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
-<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(
-      /<\/textarea>/g,
-      '&lt;/textarea>'
-    )}</textarea>`
-    if (lang && hl.getLanguage(lang)) {
-      const langHtml = `<span class="lang-name">${lang}</span>`
-      // 处理代码高亮
-      const preCode = hl.highlight(str, { language: lang }).value
-      // 将代码包裹在 pre 中
-      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
-    }
-
-    // 处理代码高亮
-    const preCode = md.utils.escapeHtml(str)
-    // 将代码包裹在 pre 中
-    return `<pre class="code-container">${code}${copyBtn}</pre>`
-  },
-})
-md.use(mathjaxPlugin)
-
-const onLoad = () => {
-  httpGet('/api/chat/history?chat_id=' + chatId)
-    .then((res) => {
-      // 加载状态结束
-      finished.value = true
-      const data = res.data
-      if (data && data.length > 0) {
-        for (let i = 0; i < data.length; i++) {
-          if (data[i].type === 'prompt') {
-            chatData.value.push(data[i])
-            continue
-          }
-
-          data[i].orgContent = data[i].content
-          data[i].content = md.render(processContent(data[i].content))
-          chatData.value.push(data[i])
-        }
-
-        nextTick(() => {
-          hl.configure({ ignoreUnescapedHTML: true })
-          const blocks = document.querySelector('#message-list-box').querySelectorAll('pre code')
-          blocks.forEach((block) => {
-            hl.highlightElement(block)
-          })
-        })
-      }
-    })
-    .catch(() => {
-      error.value = true
-    })
-
-  httpGet(`/api/chat/detail?chat_id=${chatId}`)
-    .then((res) => {
-      title.value = res.data.title
-      model.value = res.data.model
-      role.value = res.data.role_name
-    })
-    .catch((e) => {
-      showFailToast('加载对话失败：' + e.message)
-    })
-}
-</script>
-<style scoped lang="scss">
-.chat-export-mobile {
-  height: 100vh;
-
-  .van-nav-bar {
-    position: static;
-  }
-
-  .chat-box {
-    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-    background: #f5f5f5;
-
-    .chat-list-wrapper {
-      padding: 10px 0 10px 0;
-
-      .message-list-box {
-        background: #f5f5f5;
-        padding-bottom: 50px;
-
-        .van-cell {
-          background: none;
-        }
-      }
-    }
-
-    .van-nav-bar__title {
-      .van-dropdown-menu__title {
-        margin-right: 10px;
-      }
-
-      .van-cell__title {
-        text-align: left;
-      }
-    }
-
-    .van-nav-bar__right {
-      .van-icon {
-        font-size: 20px;
-      }
-    }
-  }
-}
-</style>
diff --git a/web/src/views/mobile/ChatSession.vue b/web/src/views/mobile/ChatSession.vue
index d3519cbf..1cd7f9d8 100644
--- a/web/src/views/mobile/ChatSession.vue
+++ b/web/src/views/mobile/ChatSession.vue
@@ -1,636 +1,626 @@
-<template>
-  <div class="app-background">
-    <div class="mobile-chat" v-loading="loading" element-loading-text="正在连接会话...">
-      <van-nav-bar ref="navBarRef">
-        <template #title>
-          <van-dropdown-menu>
-            <van-dropdown-item :title="title">
-              <van-cell center title="角色"> {{ role.name }}</van-cell>
-              <van-cell center title="模型">{{ modelValue }}</van-cell>
-            </van-dropdown-item>
-          </van-dropdown-menu>
-        </template>
-        <template #left>
-          <span class="setting">
-            <van-icon name="add-o" @click="showPicker = true" />
-          </span>
-        </template>
-        <template #right>
-          <van-icon name="share-o" @click="showShare = true" />
-        </template>
-      </van-nav-bar>
-
-      <van-share-sheet
-        v-model:show="showShare"
-        title="立即分享给好友"
-        :options="shareOptions"
-        @select="shareChat"
-      />
-
-      <div class="chat-list-wrapper">
-        <div id="message-list-box" :style="{ height: winHeight + 'px' }" class="message-list-box">
-          <van-list
-            v-model:error="error"
-            :finished="finished"
-            error-text="请求失败，点击重新加载"
-            @load="onLoad"
-          >
-            <van-cell v-for="item in chatData" :key="item" :border="false" class="message-line">
-              <chat-prompt
-                v-if="item.type === 'prompt'"
-                :content="item.content"
-                :icon="item.icon"
-              />
-              <chat-reply
-                v-else-if="item.type === 'reply'"
-                :content="item.content"
-                :icon="item.icon"
-                :org-content="item.orgContent"
-              />
-            </van-cell>
-          </van-list>
-        </div>
-      </div>
-
-      <div class="chat-box-wrapper">
-        <van-sticky ref="bottomBarRef" :offset-bottom="0" position="bottom">
-          <van-cell-group inset style="--van-cell-background: var(--van-cell-background-light)">
-            <!-- <div class="flex flex-row p-2">
-              <file-list :files="[{ url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', name: 'test.png', ext: 'png', size: 1024 }]" />
-            </div> -->
-            <van-field v-model="prompt" center clearable placeholder="输入你的问题">
-              <template #left-icon>
-                <!-- <div class="flex flex-row">
-                  <span class="rounded-full size-6 flex items-center justify-center"><i class="iconfont icon-attachment-cl"></i></span>
-                </div> -->
-              </template>
-
-              <template #button>
-                <van-button size="small" type="primary" @click="sendMessage">发送</van-button>
-              </template>
-              <template #extra>
-                <div class="icon-box">
-                  <van-icon v-if="showStopGenerate" name="stop-circle-o" @click="stopGenerate" />
-                  <van-icon v-if="showReGenerate" name="play-circle-o" @click="reGenerate" />
-                </div>
-              </template>
-            </van-field>
-          </van-cell-group>
-        </van-sticky>
-      </div>
-    </div>
-
-    <button id="copy-link-btn" style="display: none" :data-clipboard-text="url">
-      复制链接地址
-    </button>
-
-    <!--    <van-overlay :show="showMic" z-index="100">-->
-    <!--      <div class="mic-wrapper">-->
-    <!--        <div class="image">-->
-    <!--          <van-image-->
-    <!--              width="100"-->
-    <!--              height="100"-->
-    <!--              src="/images/mic.gif"-->
-    <!--          />-->
-    <!--        </div>-->
-    <!--        <van-button type="success" @click="stopVoice">说完了</van-button>-->
-    <!--      </div>-->
-    <!--    </van-overlay>-->
-  </div>
-
-  <van-popup v-model:show="showPicker" position="bottom" class="popup">
-    <van-picker
-      :columns="columns"
-      v-model="selectedValues"
-      title="选择模型和角色"
-      @change="onChange"
-      @cancel="showPicker = false"
-      @confirm="newChat"
-    >
-      <template #option="item">
-        <div class="picker-option">
-          <van-image v-if="item.icon" :src="item.icon" fit="cover" round />
-          <span>{{ item.text }}</span>
-        </div>
-      </template>
-    </van-picker>
-  </van-popup>
-</template>
-
-<script setup>
-import ChatPrompt from '@/components/mobile/ChatPrompt.vue'
-import ChatReply from '@/components/mobile/ChatReply.vue'
-import { checkSession } from '@/store/cache'
-import { getUserToken } from '@/store/session'
-import { useSharedStore } from '@/store/sharedata'
-import { showMessageError } from '@/utils/dialog'
-import { httpGet } from '@/utils/http'
-import { processContent, randString, renderInputText, UUID } from '@/utils/libs'
-import { fetchEventSource } from '@microsoft/fetch-event-source'
-import Clipboard from 'clipboard'
-import hl from 'highlight.js'
-import 'highlight.js/styles/a11y-dark.css'
-import MarkdownIt from 'markdown-it'
-import emoji from 'markdown-it-emoji'
-import mathjaxPlugin from 'markdown-it-mathjax3'
-import { showImagePreview, showNotify, showToast } from 'vant'
-import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-
-const winHeight = ref(0)
-const navBarRef = ref(null)
-const bottomBarRef = ref(null)
-const router = useRouter()
-
-const roles = ref([])
-const roleId = ref(parseInt(router.currentRoute.value.query['role_id']))
-const role = ref({})
-const models = ref([])
-const modelId = ref(parseInt(router.currentRoute.value.query['model_id']))
-const modelValue = ref('')
-const title = ref(router.currentRoute.value.query['title'])
-const chatId = ref(router.currentRoute.value.query['chat_id'])
-const loginUser = ref(null)
-// const showMic = ref(false)
-const showPicker = ref(false)
-const columns = ref([roles.value, models.value])
-const selectedValues = ref([roleId.value, modelId.value])
-
-checkSession()
-  .then((user) => {
-    loginUser.value = user
-  })
-  .catch(() => {
-    router.push('/mobile/login')
-  })
-
-const loadModels = () => {
-  // 加载模型
-  httpGet('/api/model/list')
-    .then((res) => {
-      models.value = res.data
-      if (!modelId.value) {
-        modelId.value = models.value[0].id
-      }
-      for (let i = 0; i < models.value.length; i++) {
-        models.value[i].text = models.value[i].name
-        models.value[i].mValue = models.value[i].value
-        models.value[i].value = models.value[i].id
-      }
-      modelValue.value = getModelName(modelId.value)
-      // 加载角色列表
-      httpGet(`/api/app/list/user`, { id: roleId.value })
-        .then((res) => {
-          roles.value = res.data
-          if (!roleId.value) {
-            roleId.value = roles.value[0]['id']
-          }
-          // build data for role picker
-          for (let i = 0; i < roles.value.length; i++) {
-            roles.value[i].text = roles.value[i].name
-            roles.value[i].value = roles.value[i].id
-            roles.value[i].helloMsg = roles.value[i].hello_msg
-          }
-          role.value = getRoleById(roleId.value)
-          columns.value = [roles.value, models.value]
-          selectedValues.value = [roleId.value, modelId.value]
-          loadChatHistory()
-        })
-        .catch((e) => {
-          showNotify({ type: 'danger', message: '获取聊天角色失败: ' + e.messages })
-        })
-    })
-    .catch((e) => {
-      showNotify({ type: 'danger', message: '加载模型失败: ' + e.message })
-    })
-}
-if (chatId.value) {
-  httpGet(`/api/chat/detail?chat_id=${chatId.value}`)
-    .then((res) => {
-      title.value = res.data.title
-      modelId.value = res.data.model_id
-      roleId.value = res.data.role_id
-      loadModels()
-    })
-    .catch(() => {
-      loadModels()
-    })
-} else {
-  title.value = '新建对话'
-  chatId.value = UUID()
-  loadModels()
-}
-
-const chatData = ref([])
-const loading = ref(false)
-const finished = ref(false)
-const error = ref(false)
-const store = useSharedStore()
-const url = ref(
-  location.protocol + '//' + location.host + '/mobile/chat/export?chat_id=' + chatId.value
-)
-const md = new MarkdownIt({
-  breaks: true,
-  html: true,
-  linkify: true,
-  typographer: true,
-  highlight: function (str, lang) {
-    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
-    // 显示复制代码按钮
-    const copyBtn = `<span class="copy-code-mobile" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
-<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(
-      /<\/textarea>/g,
-      '&lt;/textarea>'
-    )}</textarea>`
-    if (lang && hl.getLanguage(lang)) {
-      const langHtml = `<span class="lang-name">${lang}</span>`
-      // 处理代码高亮
-      const preCode = hl.highlight(lang, str, true).value
-      // 将代码包裹在 pre 中
-      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
-    }
-
-    // 处理代码高亮
-    const preCode = md.utils.escapeHtml(str)
-    // 将代码包裹在 pre 中
-    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`
-  },
-})
-md.use(mathjaxPlugin)
-md.use(emoji)
-onMounted(() => {
-  winHeight.value =
-    window.innerHeight - navBarRef.value.$el.offsetHeight - bottomBarRef.value.$el.offsetHeight - 70
-
-  const clipboard = new Clipboard('.content-mobile,.copy-code-mobile,#copy-link-btn')
-  clipboard.on('success', (e) => {
-    e.clearSelection()
-    showNotify({ type: 'success', message: '复制成功', duration: 1000 })
-  })
-  clipboard.on('error', () => {
-    showNotify({ type: 'danger', message: '复制失败', duration: 2000 })
-  })
-})
-
-onUnmounted(() => {
-  // Remove WebSocket handler cleanup
-})
-
-const newChat = (item) => {
-  showPicker.value = false
-  const options = item.selectedOptions
-  roleId.value = options[0].value
-  modelId.value = options[1].value
-  modelValue.value = getModelName(modelId.value)
-  chatId.value = UUID()
-  chatData.value = []
-  role.value = getRoleById(roleId.value)
-  title.value = '新建对话'
-  loadChatHistory()
-}
-
-const onLoad = () => {
-  // checkSession().then(() => {
-  //   connect()
-  // }).catch(() => {
-  // })
-}
-
-const loadChatHistory = () => {
-  httpGet('/api/chat/history?chat_id=' + chatId.value)
-    .then((res) => {
-      const role = getRoleById(roleId.value)
-      // 加载状态结束
-      finished.value = true
-      const data = res.data
-      if (data.length === 0) {
-        chatData.value.push({
-          type: 'reply',
-          id: randString(32),
-          icon: role.icon,
-          content: {
-            text: role.hello_msg,
-          },
-          orgContent: role.hello_msg,
-        })
-        return
-      }
-
-      for (let i = 0; i < data.length; i++) {
-        if (data[i].type === 'prompt') {
-          chatData.value.push(data[i])
-          continue
-        }
-
-        data[i].orgContent = data[i].content
-        data[i].content.text = md.render(processContent(data[i].content.text))
-        chatData.value.push(data[i])
-      }
-
-      nextTick(() => {
-        hl.configure({ ignoreUnescapedHTML: true })
-        const blocks = document.querySelector('#message-list-box').querySelectorAll('pre code')
-        blocks.forEach((block) => {
-          hl.highlightElement(block)
-        })
-
-        scrollListBox()
-      })
-    })
-    .catch(() => {
-      error.value = true
-    })
-}
-
-// 创建 socket 连接
-const prompt = ref('')
-const showStopGenerate = ref(false) // 停止生成
-const showReGenerate = ref(false) // 重新生成
-const previousText = ref('') // 上一次提问
-const lineBuffer = ref('') // 输出缓冲行
-const canSend = ref(true)
-const isNewMsg = ref(true)
-const stream = ref(store.chatStream)
-watch(
-  () => store.chatStream,
-  (newValue) => {
-    stream.value = newValue
-  }
-)
-
-const disableInput = (force) => {
-  canSend.value = false
-  showReGenerate.value = false
-  showStopGenerate.value = !force
-}
-
-const enableInput = () => {
-  canSend.value = true
-  showReGenerate.value = previousText.value !== ''
-  showStopGenerate.value = false
-}
-
-// 将聊天框的滚动条滑动到最底部
-const scrollListBox = () => {
-  document
-    .getElementById('message-list-box')
-    .scrollTo(0, document.getElementById('message-list-box').scrollHeight + 46)
-}
-
-// 发送 SSE 请求
-const sendSSERequest = async (message) => {
-  try {
-    await fetchEventSource('/api/chat/message', {
-      method: 'POST',
-      headers: {
-        Authorization: getUserToken(),
-      },
-      body: JSON.stringify(message),
-      openWhenHidden: true,
-      onopen(response) {
-        if (response.ok && response.status === 200) {
-          console.log('SSE connection opened')
-        } else {
-          throw new Error(`Failed to open SSE connection: ${response.status}`)
-        }
-      },
-      onmessage(msg) {
-        try {
-          const data = JSON.parse(msg.data)
-          if (data.type === 'error') {
-            showMessageError(data.body)
-            enableInput()
-            return
-          }
-
-          if (data.type === 'end') {
-            enableInput()
-            lineBuffer.value = '' // 清空缓冲
-            isNewMsg.value = true
-            return
-          }
-
-          if (data.type === 'text') {
-            if (isNewMsg.value) {
-              isNewMsg.value = false
-              lineBuffer.value = data.body
-              const reply = chatData.value[chatData.value.length - 1]
-              if (reply) {
-                reply['content']['text'] = lineBuffer.value
-              }
-            } else {
-              lineBuffer.value += data.body
-              const reply = chatData.value[chatData.value.length - 1]
-              reply['orgContent'] = lineBuffer.value
-              reply['content']['text'] = md.render(processContent(lineBuffer.value))
-
-              nextTick(() => {
-                hl.configure({ ignoreUnescapedHTML: true })
-                const lines = document.querySelectorAll('.message-line')
-                const blocks = lines[lines.length - 1].querySelectorAll('pre code')
-                blocks.forEach((block) => {
-                  hl.highlightElement(block)
-                })
-                scrollListBox()
-
-                const items = document.querySelectorAll('.message-line')
-                const imgs = items[items.length - 1].querySelectorAll('img')
-                for (let i = 0; i < imgs.length; i++) {
-                  if (!imgs[i].src) {
-                    continue
-                  }
-                  imgs[i].addEventListener('click', (e) => {
-                    e.stopPropagation()
-                    showImagePreview([imgs[i].src])
-                  })
-                }
-              })
-            }
-          }
-        } catch (error) {
-          console.error('Error processing message:', error)
-          enableInput()
-          showMessageError('消息处理出错，请重试')
-        }
-      },
-      onerror(err) {
-        console.error('SSE Error:', err)
-        enableInput()
-        showMessageError('连接已断开，请重试')
-      },
-      onclose() {
-        console.log('SSE connection closed')
-        enableInput()
-      },
-    })
-  } catch (error) {
-    console.error('Failed to send message:', error)
-    enableInput()
-    showMessageError('发送消息失败，请重试')
-  }
-}
-
-// 发送消息
-const sendMessage = () => {
-  if (canSend.value === false) {
-    showToast('AI 正在作答中，请稍后...')
-    return
-  }
-
-  if (prompt.value.trim().length === 0) {
-    showToast('请输入需要 AI 回答的问题')
-    return false
-  }
-
-  // 追加消息
-  chatData.value.push({
-    type: 'prompt',
-    id: randString(32),
-    icon: loginUser.value.avatar,
-    content: { text: renderInputText(prompt.value) },
-    created_at: new Date().getTime(),
-  })
-  // 添加空回复消息
-  const _role = getRoleById(roleId.value)
-  chatData.value.push({
-    chat_id: chatId,
-    role_id: roleId.value,
-    type: 'reply',
-    id: randString(32),
-    icon: _role['icon'],
-    content: {
-      text: '',
-    },
-  })
-
-  nextTick(() => {
-    scrollListBox()
-  })
-
-  disableInput(false)
-
-  // 发送 SSE 请求
-  sendSSERequest({
-    user_id: loginUser.value.id,
-    role_id: roleId.value,
-    model_id: modelId.value,
-    chat_id: chatId.value,
-    prompt: prompt.value,
-    stream: stream.value,
-  })
-
-  previousText.value = prompt.value
-  prompt.value = ''
-  return true
-}
-
-// 重新生成
-const reGenerate = () => {
-  disableInput(false)
-  const text = '重新生成上述问题的答案：' + previousText.value
-  // 追加消息
-  chatData.value.push({
-    type: 'prompt',
-    id: randString(32),
-    icon: loginUser.value.avatar,
-    content: renderInputText(text),
-  })
-
-  // 发送 SSE 请求
-  sendSSERequest({
-    user_id: loginUser.value.id,
-    role_id: roleId.value,
-    model_id: modelId.value,
-    chat_id: chatId.value,
-    prompt: previousText.value,
-    stream: stream.value,
-  })
-}
-
-const showShare = ref(false)
-const shareOptions = [
-  { name: '微信', icon: 'wechat' },
-  { name: '复制链接', icon: 'link' },
-]
-const shareChat = (option) => {
-  showShare.value = false
-  if (option.icon === 'wechat') {
-    showToast({
-      message: '当前会话已经导出，请通过浏览器或者微信的自带分享功能分享给好友',
-      duration: 5000,
-    })
-    router.push({
-      path: '/mobile/chat/export',
-      query: {
-        title: title.value,
-        chat_id: chatId.value,
-        role: role.value.name,
-        model: modelValue.value,
-      },
-    })
-  } else if (option.icon === 'link') {
-    document.getElementById('copy-link-btn').click()
-  }
-}
-
-const getRoleById = function (rid) {
-  for (let i = 0; i < roles.value.length; i++) {
-    if (roles.value[i]['id'] === rid) {
-      return roles.value[i]
-    }
-  }
-  return null
-}
-
-const getModelName = (model_id) => {
-  for (let i = 0; i < models.value.length; i++) {
-    if (models.value[i].id === model_id) {
-      return models.value[i].text
-    }
-  }
-  return ''
-}
-
-// // eslint-disable-next-line no-undef
-// const recognition = new webkitSpeechRecognition() || SpeechRecognition();
-// //recognition.lang = 'zh-CN' // 设置语音识别语言
-// recognition.onresult = function (event) {
-//   prompt.value = event.results[0][0].transcript
-// };
-//
-// recognition.onerror = function (event) {
-//   showMic.value = false
-//   recognition.stop()
-//   showNotify({type: 'danger', message: '语音识别错误:' + event.error})
-// };
-//
-// recognition.onend = function () {
-//   console.log('语音识别结束');
-// };
-// const inputVoice = () => {
-//   showMic.value = true
-//   recognition.start();
-// }
-//
-// const stopVoice = () => {
-//   showMic.value = false
-//   recognition.stop()
-// }
-
-const onChange = (item) => {
-  const selectedValues = item.selectedOptions
-  if (selectedValues[0].model_id) {
-    for (let i = 0; i < columns.value[1].length; i++) {
-      columns.value[1][i].disabled = columns.value[1][i].value !== selectedValues[0].model_id
-    }
-  } else {
-    for (let i = 0; i < columns.value[1].length; i++) {
-      columns.value[1][i].disabled = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@use '../../assets/css/mobile/chat-session.scss' as *;
-</style>
+<template>
+  <div class="app-background">
+    <div class="mobile-chat" v-loading="loading" element-loading-text="正在连接会话...">
+      <van-nav-bar ref="navBarRef">
+        <template #title>
+          <van-dropdown-menu>
+            <van-dropdown-item :title="title">
+              <van-cell center title="角色"> {{ role.name }}</van-cell>
+              <van-cell center title="模型">{{ modelValue }}</van-cell>
+            </van-dropdown-item>
+          </van-dropdown-menu>
+        </template>
+        <template #left>
+          <span class="setting">
+            <van-icon name="add-o" @click="showPicker = true" />
+          </span>
+        </template>
+        <template #right>
+          <van-icon name="share-o" @click="showShare = true" />
+        </template>
+      </van-nav-bar>
+
+      <van-share-sheet
+        v-model:show="showShare"
+        title="立即分享给好友"
+        :options="shareOptions"
+        @select="shareChat"
+      />
+
+      <div class="chat-list-wrapper">
+        <div id="message-list-box" :style="{ height: winHeight + 'px' }" class="message-list-box">
+          <van-list
+            v-model:error="error"
+            :finished="finished"
+            error-text="请求失败，点击重新加载"
+            @load="onLoad"
+          >
+            <van-cell v-for="item in chatData" :key="item" :border="false" class="message-line">
+              <chat-prompt
+                v-if="item.type === 'prompt'"
+                :content="item.content"
+                :icon="item.icon"
+              />
+              <chat-reply
+                v-else-if="item.type === 'reply'"
+                :content="item.content"
+                :icon="item.icon"
+                :org-content="item.orgContent"
+              />
+            </van-cell>
+          </van-list>
+        </div>
+      </div>
+
+      <div class="chat-box-wrapper">
+        <van-sticky ref="bottomBarRef" :offset-bottom="0" position="bottom">
+          <van-cell-group inset style="--van-cell-background: var(--van-cell-background-light)">
+            <!-- <div class="flex flex-row p-2">
+              <file-list :files="[{ url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', name: 'test.png', ext: 'png', size: 1024 }]" />
+            </div> -->
+            <van-field v-model="prompt" center clearable placeholder="输入你的问题">
+              <template #left-icon>
+                <!-- <div class="flex flex-row">
+                  <span class="rounded-full size-6 flex items-center justify-center"><i class="iconfont icon-attachment-cl"></i></span>
+                </div> -->
+              </template>
+
+              <template #button>
+                <van-button size="small" type="primary" @click="sendMessage">发送</van-button>
+              </template>
+              <template #extra>
+                <div class="icon-box">
+                  <van-icon v-if="showStopGenerate" name="stop-circle-o" @click="stopGenerate" />
+                  <van-icon v-if="showReGenerate" name="play-circle-o" @click="reGenerate" />
+                </div>
+              </template>
+            </van-field>
+          </van-cell-group>
+        </van-sticky>
+      </div>
+    </div>
+
+    <button id="copy-link-btn" style="display: none" :data-clipboard-text="url">
+      复制链接地址
+    </button>
+
+    <!--    <van-overlay :show="showMic" z-index="100">-->
+    <!--      <div class="mic-wrapper">-->
+    <!--        <div class="image">-->
+    <!--          <van-image-->
+    <!--              width="100"-->
+    <!--              height="100"-->
+    <!--              src="/images/mic.gif"-->
+    <!--          />-->
+    <!--        </div>-->
+    <!--        <van-button type="success" @click="stopVoice">说完了</van-button>-->
+    <!--      </div>-->
+    <!--    </van-overlay>-->
+  </div>
+
+  <van-popup v-model:show="showPicker" position="bottom" class="popup">
+    <van-picker
+      :columns="columns"
+      v-model="selectedValues"
+      title="选择模型和角色"
+      @change="onChange"
+      @cancel="showPicker = false"
+      @confirm="newChat"
+    >
+      <template #option="item">
+        <div class="picker-option">
+          <van-image v-if="item.icon" :src="item.icon" fit="cover" round />
+          <span>{{ item.text }}</span>
+        </div>
+      </template>
+    </van-picker>
+  </van-popup>
+</template>
+
+<script setup>
+import ChatPrompt from '@/components/mobile/ChatPrompt.vue'
+import ChatReply from '@/components/mobile/ChatReply.vue'
+import { checkSession } from '@/store/cache'
+import { getUserToken } from '@/store/session'
+import { useSharedStore } from '@/store/sharedata'
+import { showMessageError } from '@/utils/dialog'
+import { httpGet } from '@/utils/http'
+import { processContent, randString, renderInputText, UUID } from '@/utils/libs'
+import { fetchEventSource } from '@microsoft/fetch-event-source'
+import Clipboard from 'clipboard'
+import hl from 'highlight.js'
+import 'highlight.js/styles/a11y-dark.css'
+import MarkdownIt from 'markdown-it'
+import emoji from 'markdown-it-emoji'
+import mathjaxPlugin from 'markdown-it-mathjax3'
+import { showImagePreview, showNotify, showToast } from 'vant'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+const winHeight = ref(0)
+const navBarRef = ref(null)
+const bottomBarRef = ref(null)
+const router = useRouter()
+
+const roles = ref([])
+const roleId = ref(parseInt(router.currentRoute.value.query['role_id']))
+const role = ref({})
+const models = ref([])
+const modelId = ref(parseInt(router.currentRoute.value.query['model_id']))
+const modelValue = ref('')
+const title = ref(router.currentRoute.value.query['title'])
+const chatId = ref(router.currentRoute.value.query['chat_id'])
+const loginUser = ref(null)
+// const showMic = ref(false)
+const showPicker = ref(false)
+const columns = ref([roles.value, models.value])
+const selectedValues = ref([roleId.value, modelId.value])
+
+checkSession()
+  .then((user) => {
+    loginUser.value = user
+  })
+  .catch(() => {
+    router.push('/mobile/login')
+  })
+
+const loadModels = () => {
+  // 加载模型
+  httpGet('/api/model/list')
+    .then((res) => {
+      models.value = res.data
+      if (!modelId.value) {
+        modelId.value = models.value[0].id
+      }
+      for (let i = 0; i < models.value.length; i++) {
+        models.value[i].text = models.value[i].name
+        models.value[i].mValue = models.value[i].value
+        models.value[i].value = models.value[i].id
+      }
+      modelValue.value = getModelName(modelId.value)
+      // 加载角色列表
+      httpGet(`/api/app/list/user`, { id: roleId.value })
+        .then((res) => {
+          roles.value = res.data
+          if (!roleId.value) {
+            roleId.value = roles.value[0]['id']
+          }
+          // build data for role picker
+          for (let i = 0; i < roles.value.length; i++) {
+            roles.value[i].text = roles.value[i].name
+            roles.value[i].value = roles.value[i].id
+            roles.value[i].helloMsg = roles.value[i].hello_msg
+          }
+          role.value = getRoleById(roleId.value)
+          columns.value = [roles.value, models.value]
+          selectedValues.value = [roleId.value, modelId.value]
+          loadChatHistory()
+        })
+        .catch((e) => {
+          showNotify({ type: 'danger', message: '获取聊天角色失败: ' + e.messages })
+        })
+    })
+    .catch((e) => {
+      showNotify({ type: 'danger', message: '加载模型失败: ' + e.message })
+    })
+}
+if (chatId.value) {
+  httpGet(`/api/chat/detail?chat_id=${chatId.value}`)
+    .then((res) => {
+      title.value = res.data.title
+      modelId.value = res.data.model_id
+      roleId.value = res.data.role_id
+      loadModels()
+    })
+    .catch(() => {
+      loadModels()
+    })
+} else {
+  title.value = '新建对话'
+  chatId.value = UUID()
+  loadModels()
+}
+
+const chatData = ref([])
+const loading = ref(false)
+const finished = ref(false)
+const error = ref(false)
+const store = useSharedStore()
+const url = ref(location.protocol + '//' + location.host + '/chat/export?chat_id=' + chatId.value)
+const md = new MarkdownIt({
+  breaks: true,
+  html: true,
+  linkify: true,
+  typographer: true,
+  highlight: function (str, lang) {
+    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
+    // 显示复制代码按钮
+    const copyBtn = `<span class="copy-code-mobile" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
+<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(
+      /<\/textarea>/g,
+      '&lt;/textarea>'
+    )}</textarea>`
+    if (lang && hl.getLanguage(lang)) {
+      const langHtml = `<span class="lang-name">${lang}</span>`
+      // 处理代码高亮
+      const preCode = hl.highlight(lang, str, true).value
+      // 将代码包裹在 pre 中
+      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
+    }
+
+    // 处理代码高亮
+    const preCode = md.utils.escapeHtml(str)
+    // 将代码包裹在 pre 中
+    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`
+  },
+})
+md.use(mathjaxPlugin)
+md.use(emoji)
+onMounted(() => {
+  winHeight.value =
+    window.innerHeight - navBarRef.value.$el.offsetHeight - bottomBarRef.value.$el.offsetHeight - 70
+
+  const clipboard = new Clipboard('.content-mobile,.copy-code-mobile,#copy-link-btn')
+  clipboard.on('success', (e) => {
+    e.clearSelection()
+    showNotify({ type: 'success', message: '复制成功', duration: 1000 })
+  })
+  clipboard.on('error', () => {
+    showNotify({ type: 'danger', message: '复制失败', duration: 2000 })
+  })
+})
+
+onUnmounted(() => {
+  // Remove WebSocket handler cleanup
+})
+
+const newChat = (item) => {
+  showPicker.value = false
+  const options = item.selectedOptions
+  roleId.value = options[0].value
+  modelId.value = options[1].value
+  modelValue.value = getModelName(modelId.value)
+  chatId.value = UUID()
+  chatData.value = []
+  role.value = getRoleById(roleId.value)
+  title.value = '新建对话'
+  loadChatHistory()
+}
+
+const onLoad = () => {
+  // checkSession().then(() => {
+  //   connect()
+  // }).catch(() => {
+  // })
+}
+
+const loadChatHistory = () => {
+  httpGet('/api/chat/history?chat_id=' + chatId.value)
+    .then((res) => {
+      const role = getRoleById(roleId.value)
+      // 加载状态结束
+      finished.value = true
+      const data = res.data
+      if (data.length === 0) {
+        chatData.value.push({
+          type: 'reply',
+          id: randString(32),
+          icon: role.icon,
+          content: {
+            text: role.hello_msg,
+          },
+          orgContent: role.hello_msg,
+        })
+        return
+      }
+
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].type === 'prompt') {
+          chatData.value.push(data[i])
+          continue
+        }
+
+        data[i].orgContent = data[i].content
+        data[i].content.text = md.render(processContent(data[i].content.text))
+        chatData.value.push(data[i])
+      }
+
+      nextTick(() => {
+        hl.configure({ ignoreUnescapedHTML: true })
+        const blocks = document.querySelector('#message-list-box').querySelectorAll('pre code')
+        blocks.forEach((block) => {
+          hl.highlightElement(block)
+        })
+
+        scrollListBox()
+      })
+    })
+    .catch(() => {
+      error.value = true
+    })
+}
+
+// 创建 socket 连接
+const prompt = ref('')
+const showStopGenerate = ref(false) // 停止生成
+const showReGenerate = ref(false) // 重新生成
+const previousText = ref('') // 上一次提问
+const lineBuffer = ref('') // 输出缓冲行
+const canSend = ref(true)
+const isNewMsg = ref(true)
+const stream = ref(store.chatStream)
+watch(
+  () => store.chatStream,
+  (newValue) => {
+    stream.value = newValue
+  }
+)
+
+const disableInput = (force) => {
+  canSend.value = false
+  showReGenerate.value = false
+  showStopGenerate.value = !force
+}
+
+const enableInput = () => {
+  canSend.value = true
+  showReGenerate.value = previousText.value !== ''
+  showStopGenerate.value = false
+}
+
+// 将聊天框的滚动条滑动到最底部
+const scrollListBox = () => {
+  document
+    .getElementById('message-list-box')
+    .scrollTo(0, document.getElementById('message-list-box').scrollHeight + 46)
+}
+
+// 发送 SSE 请求
+const sendSSERequest = async (message) => {
+  try {
+    await fetchEventSource('/api/chat/message', {
+      method: 'POST',
+      headers: {
+        Authorization: getUserToken(),
+      },
+      body: JSON.stringify(message),
+      openWhenHidden: true,
+      onopen(response) {
+        if (response.ok && response.status === 200) {
+          console.log('SSE connection opened')
+        } else {
+          throw new Error(`Failed to open SSE connection: ${response.status}`)
+        }
+      },
+      onmessage(msg) {
+        try {
+          const data = JSON.parse(msg.data)
+          if (data.type === 'error') {
+            showMessageError(data.body)
+            enableInput()
+            return
+          }
+
+          if (data.type === 'end') {
+            enableInput()
+            lineBuffer.value = '' // 清空缓冲
+            isNewMsg.value = true
+            return
+          }
+
+          if (data.type === 'text') {
+            if (isNewMsg.value) {
+              isNewMsg.value = false
+              lineBuffer.value = data.body
+              const reply = chatData.value[chatData.value.length - 1]
+              if (reply) {
+                reply['content']['text'] = lineBuffer.value
+              }
+            } else {
+              lineBuffer.value += data.body
+              const reply = chatData.value[chatData.value.length - 1]
+              reply['orgContent'] = lineBuffer.value
+              reply['content']['text'] = md.render(processContent(lineBuffer.value))
+
+              nextTick(() => {
+                hl.configure({ ignoreUnescapedHTML: true })
+                const lines = document.querySelectorAll('.message-line')
+                const blocks = lines[lines.length - 1].querySelectorAll('pre code')
+                blocks.forEach((block) => {
+                  hl.highlightElement(block)
+                })
+                scrollListBox()
+
+                const items = document.querySelectorAll('.message-line')
+                const imgs = items[items.length - 1].querySelectorAll('img')
+                for (let i = 0; i < imgs.length; i++) {
+                  if (!imgs[i].src) {
+                    continue
+                  }
+                  imgs[i].addEventListener('click', (e) => {
+                    e.stopPropagation()
+                    showImagePreview([imgs[i].src])
+                  })
+                }
+              })
+            }
+          }
+        } catch (error) {
+          console.error('Error processing message:', error)
+          enableInput()
+          showMessageError('消息处理出错，请重试')
+        }
+      },
+      onerror(err) {
+        console.error('SSE Error:', err)
+        enableInput()
+        showMessageError('连接已断开，请重试')
+      },
+      onclose() {
+        console.log('SSE connection closed')
+        enableInput()
+      },
+    })
+  } catch (error) {
+    console.error('Failed to send message:', error)
+    enableInput()
+    showMessageError('发送消息失败，请重试')
+  }
+}
+
+// 发送消息
+const sendMessage = () => {
+  if (canSend.value === false) {
+    showToast('AI 正在作答中，请稍后...')
+    return
+  }
+
+  if (prompt.value.trim().length === 0) {
+    showToast('请输入需要 AI 回答的问题')
+    return false
+  }
+
+  // 追加消息
+  chatData.value.push({
+    type: 'prompt',
+    id: randString(32),
+    icon: loginUser.value.avatar,
+    content: { text: renderInputText(prompt.value) },
+    created_at: new Date().getTime(),
+  })
+  // 添加空回复消息
+  const _role = getRoleById(roleId.value)
+  chatData.value.push({
+    chat_id: chatId,
+    role_id: roleId.value,
+    type: 'reply',
+    id: randString(32),
+    icon: _role['icon'],
+    content: {
+      text: '',
+    },
+  })
+
+  nextTick(() => {
+    scrollListBox()
+  })
+
+  disableInput(false)
+
+  // 发送 SSE 请求
+  sendSSERequest({
+    user_id: loginUser.value.id,
+    role_id: roleId.value,
+    model_id: modelId.value,
+    chat_id: chatId.value,
+    prompt: prompt.value,
+    stream: stream.value,
+  })
+
+  previousText.value = prompt.value
+  prompt.value = ''
+  return true
+}
+
+// 重新生成
+const reGenerate = () => {
+  disableInput(false)
+  const text = '重新生成上述问题的答案：' + previousText.value
+  // 追加消息
+  chatData.value.push({
+    type: 'prompt',
+    id: randString(32),
+    icon: loginUser.value.avatar,
+    content: renderInputText(text),
+  })
+
+  // 发送 SSE 请求
+  sendSSERequest({
+    user_id: loginUser.value.id,
+    role_id: roleId.value,
+    model_id: modelId.value,
+    chat_id: chatId.value,
+    prompt: previousText.value,
+    stream: stream.value,
+  })
+}
+
+const showShare = ref(false)
+const shareOptions = [
+  { name: '微信', icon: 'wechat' },
+  { name: '复制链接', icon: 'link' },
+]
+const shareChat = (option) => {
+  showShare.value = false
+  if (option.icon === 'wechat') {
+    showToast({
+      message: '链接已复制，请通过微信分享给好友',
+      duration: 3000,
+    })
+    document.getElementById('copy-link-btn').click()
+  } else if (option.icon === 'link') {
+    document.getElementById('copy-link-btn').click()
+  }
+}
+
+const getRoleById = function (rid) {
+  for (let i = 0; i < roles.value.length; i++) {
+    if (roles.value[i]['id'] === rid) {
+      return roles.value[i]
+    }
+  }
+  return null
+}
+
+const getModelName = (model_id) => {
+  for (let i = 0; i < models.value.length; i++) {
+    if (models.value[i].id === model_id) {
+      return models.value[i].text
+    }
+  }
+  return ''
+}
+
+// // eslint-disable-next-line no-undef
+// const recognition = new webkitSpeechRecognition() || SpeechRecognition();
+// //recognition.lang = 'zh-CN' // 设置语音识别语言
+// recognition.onresult = function (event) {
+//   prompt.value = event.results[0][0].transcript
+// };
+//
+// recognition.onerror = function (event) {
+//   showMic.value = false
+//   recognition.stop()
+//   showNotify({type: 'danger', message: '语音识别错误:' + event.error})
+// };
+//
+// recognition.onend = function () {
+//   console.log('语音识别结束');
+// };
+// const inputVoice = () => {
+//   showMic.value = true
+//   recognition.start();
+// }
+//
+// const stopVoice = () => {
+//   showMic.value = false
+//   recognition.stop()
+// }
+
+const onChange = (item) => {
+  const selectedValues = item.selectedOptions
+  if (selectedValues[0].model_id) {
+    for (let i = 0; i < columns.value[1].length; i++) {
+      columns.value[1][i].disabled = columns.value[1][i].value !== selectedValues[0].model_id
+    }
+  } else {
+    for (let i = 0; i < columns.value[1].length; i++) {
+      columns.value[1][i].disabled = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../assets/css/mobile/chat-session.scss' as *;
+</style>
diff --git a/web/src/views/mobile/Create.vue b/web/src/views/mobile/Create.vue
index c573e535..15451fce 100644
--- a/web/src/views/mobile/Create.vue
+++ b/web/src/views/mobile/Create.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="create-center">
-    <div class="create-content px-3">
+    <div class="create-content p-3">
       <CustomTabs
         :model-value="activeTab"
         @update:model-value="activeTab = $event"
diff --git a/web/src/views/mobile/Discover.vue b/web/src/views/mobile/Discover.vue
index d83d2c5d..fcce56d1 100644
--- a/web/src/views/mobile/Discover.vue
+++ b/web/src/views/mobile/Discover.vue
@@ -1,81 +1,41 @@
 <template>
   <div class="discover-page">
     <div class="discover-content">
-      <!-- 功能分类 -->
-      <div class="category-section">
-        <h3 class="category-title">AI 工具</h3>
-        <van-row :gutter="12">
-          <van-col :span="6" v-for="tool in aiTools" :key="tool.key">
-            <div class="tool-card" @click="navigateTo(tool.url)">
-              <div class="tool-icon" :style="{ backgroundColor: tool.color }">
-                <i class="iconfont" :class="tool.icon"></i>
+      <!-- AI工具列表 -->
+      <div class="tools-section">
+        <div class="section-header">
+          <h2 class="section-title">AI 创作工具</h2>
+          <p class="section-subtitle">探索强大的AI创作能力</p>
+        </div>
+
+        <div class="tools-grid">
+          <div
+            v-for="tool in aiTools"
+            :key="tool.key"
+            class="tool-item"
+            @click="navigateTo(tool.url)"
+          >
+            <div class="tool-card">
+              <div class="tool-icon-wrapper">
+                <div class="tool-icon" :style="{ background: tool.gradient }">
+                  <i class="iconfont" :class="tool.icon"></i>
+                </div>
+                <div class="tool-badge" v-if="tool.badge">{{ tool.badge }}</div>
               </div>
-              <div class="tool-name">{{ tool.name }}</div>
-            </div>
-          </van-col>
-        </van-row>
-      </div>
-
-      <!-- 用户服务 -->
-      <div class="category-section">
-        <h3 class="category-title">我的服务</h3>
-        <van-cell-group inset>
-          <van-cell
-            v-for="service in userServices"
-            :key="service.key"
-            :title="service.name"
-            :value="service.desc"
-            :icon="service.icon"
-            is-link
-            @click="navigateTo(service.url)"
-          >
-            <template #icon>
-              <i class="iconfont" :class="service.icon" :style="{ color: service.color }"></i>
-            </template>
-          </van-cell>
-        </van-cell-group>
-      </div>
-
-      <!-- 实用功能 -->
-      <div class="category-section">
-        <h3 class="category-title">实用功能</h3>
-        <van-cell-group inset>
-          <van-cell
-            v-for="utility in utilities"
-            :key="utility.key"
-            :title="utility.name"
-            :value="utility.desc"
-            is-link
-            @click="navigateTo(utility.url)"
-          >
-            <template #icon>
-              <i class="iconfont" :class="utility.icon" :style="{ color: utility.color }"></i>
-            </template>
-          </van-cell>
-        </van-cell-group>
-      </div>
-
-      <!-- 推荐内容 -->
-      <div class="category-section">
-        <h3 class="category-title">精选推荐</h3>
-        <van-grid :column-num="2" :gutter="12" :border="false">
-          <van-grid-item
-            v-for="item in recommendations"
-            :key="item.key"
-            @click="navigateTo(item.url)"
-            class="recommend-item"
-          >
-            <div class="recommend-card">
-              <div class="recommend-image">
-                <van-image :src="item.image" fit="cover" />
+              <div class="tool-content">
+                <h3 class="tool-name">{{ tool.name }}</h3>
+                <p class="tool-desc">{{ tool.desc }}</p>
+                <div class="tool-meta">
+                  <span class="tool-tag" v-if="tool.tag">{{ tool.tag }}</span>
+                  <span class="tool-status" :class="tool.status">{{ tool.statusText }}</span>
+                </div>
               </div>
-              <div class="recommend-info">
-                <div class="recommend-title">{{ item.title }}</div>
-                <div class="recommend-desc">{{ item.desc }}</div>
+              <div class="tool-arrow">
+                <van-icon name="arrow" />
               </div>
             </div>
-          </van-grid-item>
-        </van-grid>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -89,147 +49,95 @@ const router = useRouter()
 
 // AI工具配置
 const aiTools = ref([
-  { key: 'mj', name: 'MJ绘画', icon: 'icon-mj', color: '#8B5CF6', url: '/mobile/create?tab=mj' },
-  { key: 'sd', name: 'SD绘画', icon: 'icon-sd', color: '#06B6D4', url: '/mobile/create?tab=sd' },
+  {
+    key: 'mj',
+    name: 'MJ绘画',
+    desc: 'Midjourney AI绘画创作',
+    icon: 'icon-mj',
+    gradient: 'linear-gradient(135deg, #8B5CF6, #A855F7)',
+    badge: '热门',
+    tag: 'AI绘画',
+    status: 'active',
+    statusText: '可用',
+    url: '/mobile/create?tab=mj',
+  },
+  {
+    key: 'sd',
+    name: 'SD绘画',
+    desc: 'Stable Diffusion本地化',
+    icon: 'icon-sd',
+    gradient: 'linear-gradient(135deg, #06B6D4, #0891B2)',
+    tag: 'AI绘画',
+    status: 'active',
+    statusText: '可用',
+    url: '/mobile/create?tab=sd',
+  },
   {
     key: 'dalle',
     name: 'DALL·E',
+    desc: 'OpenAI图像生成',
     icon: 'icon-dalle',
-    color: '#F59E0B',
+    gradient: 'linear-gradient(135deg, #F59E0B, #D97706)',
+    tag: 'AI绘画',
+    status: 'active',
+    statusText: '可用',
     url: '/mobile/create?tab=dalle',
   },
   {
     key: 'suno',
     name: '音乐创作',
+    desc: 'AI音乐生成与编辑',
     icon: 'icon-music',
-    color: '#EF4444',
+    gradient: 'linear-gradient(135deg, #EF4444, #DC2626)',
+    badge: '新功能',
+    tag: 'AI音乐',
+    status: 'active',
+    statusText: '可用',
     url: '/mobile/create?tab=suno',
   },
   {
     key: 'video',
     name: '视频生成',
+    desc: 'AI视频创作工具',
     icon: 'icon-video',
-    color: '#10B981',
+    gradient: 'linear-gradient(135deg, #10B981, #059669)',
+    tag: 'AI视频',
+    status: 'beta',
+    statusText: '测试版',
     url: '/mobile/create?tab=video',
   },
   {
     key: 'jimeng',
     name: '即梦AI',
+    desc: '即梦AI绘画平台',
     icon: 'icon-jimeng',
-    color: '#F97316',
+    gradient: 'linear-gradient(135deg, #F97316, #EA580C)',
+    tag: 'AI绘画',
+    status: 'active',
+    statusText: '可用',
     url: '/mobile/create?tab=jimeng',
   },
   {
     key: 'xmind',
     name: '思维导图',
+    desc: 'AI思维导图生成',
     icon: 'icon-mind',
-    color: '#3B82F6',
+    gradient: 'linear-gradient(135deg, #3B82F6, #2563EB)',
+    tag: 'AI工具',
+    status: 'active',
+    statusText: '可用',
     url: '/mobile/tools?tab=xmind',
   },
-  { key: 'apps', name: '应用中心', icon: 'icon-apps', color: '#EC4899', url: '/mobile/apps' },
-])
-
-// 用户服务
-const userServices = ref([
   {
-    key: 'member',
-    name: '会员中心',
-    desc: '充值升级享受更多权益',
-    icon: 'icon-vip',
-    color: '#FFD700',
-    url: '/mobile/member',
-  },
-  {
-    key: 'powerLog',
-    name: '消费记录',
-    desc: '查看算力使用详情',
-    icon: 'icon-history',
-    color: '#10B981',
-    url: '/mobile/power-log',
-  },
-  {
-    key: 'invite',
-    name: '邀请好友',
-    desc: '推广获取奖励',
-    icon: 'icon-user-plus',
-    color: '#F59E0B',
-    url: '/mobile/invite',
-  },
-  {
-    key: 'export',
-    name: '导出对话',
-    desc: '保存聊天记录',
-    icon: 'icon-download',
-    color: '#06B6D4',
-    url: '/mobile/chat/export',
-  },
-])
-
-// 实用功能
-const utilities = ref([
-  {
-    key: 'imgWall',
-    name: '作品展示',
-    desc: '浏览精美AI作品',
-    icon: 'icon-gallery',
-    color: '#EC4899',
-    url: '/mobile/imgWall',
-  },
-  {
-    key: 'settings',
-    name: '设置中心',
-    desc: '个性化配置',
-    icon: 'icon-setting',
-    color: '#6B7280',
-    url: '/mobile/settings',
-  },
-  {
-    key: 'help',
-    name: '帮助中心',
-    desc: '使用指南和常见问题',
-    icon: 'icon-help',
-    color: '#8B5CF6',
-    url: '/mobile/help',
-  },
-  {
-    key: 'feedback',
-    name: '意见反馈',
-    desc: '提出建议和问题',
-    icon: 'icon-message',
-    color: '#EF4444',
-    url: '/mobile/feedback',
-  },
-])
-
-// 推荐内容
-const recommendations = ref([
-  {
-    key: 'new-features',
-    title: '新功能发布',
-    desc: '体验最新AI创作工具',
-    image: '/images/recommend/new-features.jpg',
-    url: '/mobile/news',
-  },
-  {
-    key: 'tutorials',
-    title: '使用教程',
-    desc: '快速上手AI创作',
-    image: '/images/recommend/tutorials.jpg',
-    url: '/mobile/tutorials',
-  },
-  {
-    key: 'gallery',
-    title: '精选作品',
-    desc: '欣赏优秀AI作品',
-    image: '/images/recommend/gallery.jpg',
-    url: '/mobile/imgWall',
-  },
-  {
-    key: 'community',
-    title: '用户社区',
-    desc: '交流创作心得',
-    image: '/images/recommend/community.jpg',
-    url: '/mobile/community',
+    key: 'apps',
+    name: '应用中心',
+    desc: '更多AI应用工具',
+    icon: 'icon-apps',
+    gradient: 'linear-gradient(135deg, #EC4899, #DB2777)',
+    tag: '应用',
+    status: 'active',
+    statusText: '可用',
+    url: '/mobile/apps',
   },
 ])
 
@@ -248,132 +156,185 @@ const navigateTo = (url) => {
   min-height: 100vh;
   background: var(--van-background);
 
-  .nav-left {
-    display: flex;
-    align-items: center;
-
-    .iconfont {
-      font-size: 20px;
-      color: var(--van-primary-color);
-    }
-  }
-
   .discover-content {
-    .category-section {
-      margin-bottom: 24px;
+    padding: 20px 16px;
 
-      .category-title {
-        font-size: 18px;
-        font-weight: 600;
-        color: var(--van-text-color);
-        margin: 0 0 16px 0;
-        padding-left: 4px;
-      }
-    }
-
-    // AI工具卡片
-    .tool-card {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 16px 8px;
-      background: var(--van-cell-background);
-      border-radius: 12px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-      transition: all 0.3s ease;
-      cursor: pointer;
-
-      &:active {
-        transform: scale(0.95);
-      }
-
-      .tool-icon {
-        width: 44px;
-        height: 44px;
-        border-radius: 12px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 8px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-
-        .iconfont {
-          font-size: 22px;
-          color: white;
-        }
-      }
-
-      .tool-name {
-        font-size: 12px;
-        font-weight: 500;
-        color: var(--van-text-color);
+    .tools-section {
+      .section-header {
         text-align: center;
-      }
-    }
+        margin-bottom: 32px;
 
-    // 服务列表
-    :deep(.van-cell-group) {
-      border-radius: 12px;
-      overflow: hidden;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-
-      .van-cell {
-        padding: 16px;
-
-        .van-cell__title {
-          font-weight: 500;
+        .section-title {
+          font-size: 24px;
+          font-weight: 700;
+          color: var(--van-text-color);
+          margin: 0 0 8px 0;
+          background: linear-gradient(135deg, var(--van-primary-color), #8b5cf6);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
         }
 
-        .van-cell__value {
+        .section-subtitle {
+          font-size: 14px;
           color: var(--van-gray-6);
-          font-size: 13px;
-        }
-
-        .iconfont {
-          font-size: 20px;
-          margin-right: 12px;
+          margin: 0;
         }
       }
-    }
 
-    // 推荐内容
-    .recommend-item {
-      .recommend-card {
-        background: var(--van-cell-background);
-        border-radius: 12px;
-        overflow: hidden;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-        transition: all 0.3s ease;
-        cursor: pointer;
+      .tools-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
 
-        &:active {
-          transform: scale(0.98);
-        }
+        .tool-item {
+          .tool-card {
+            background: var(--van-cell-background);
+            border-radius: 16px;
+            padding: 20px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
 
-        .recommend-image {
-          height: 120px;
-          overflow: hidden;
+            &::before {
+              content: '';
+              position: absolute;
+              top: 0;
+              left: 0;
+              right: 0;
+              height: 3px;
+              background: linear-gradient(90deg, var(--van-primary-color), #8b5cf6);
+              transform: scaleX(0);
+              transition: transform 0.3s ease;
+            }
 
-          :deep(.van-image) {
-            width: 100%;
-            height: 100%;
-          }
-        }
+            &:hover {
+              transform: translateY(-4px);
+              box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
 
-        .recommend-info {
-          padding: 12px;
+              &::before {
+                transform: scaleX(1);
+              }
 
-          .recommend-title {
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--van-text-color);
-            margin-bottom: 4px;
-          }
+              .tool-icon {
+                transform: scale(1.1);
+              }
+            }
 
-          .recommend-desc {
-            font-size: 12px;
-            color: var(--van-gray-6);
-            line-height: 1.4;
+            &:active {
+              transform: translateY(-2px);
+            }
+
+            .tool-icon-wrapper {
+              position: relative;
+              margin-bottom: 16px;
+
+              .tool-icon {
+                width: 56px;
+                height: 56px;
+                border-radius: 16px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin: 0 auto;
+                transition: transform 0.3s ease;
+                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+
+                .iconfont {
+                  font-size: 28px;
+                  color: white;
+                }
+              }
+
+              .tool-badge {
+                position: absolute;
+                top: -8px;
+                right: -8px;
+                background: linear-gradient(135deg, #ef4444, #dc2626);
+                color: white;
+                font-size: 10px;
+                font-weight: 600;
+                padding: 4px 8px;
+                border-radius: 12px;
+                box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+              }
+            }
+
+            .tool-content {
+              text-align: center;
+              margin-bottom: 16px;
+
+              .tool-name {
+                font-size: 16px;
+                font-weight: 600;
+                color: var(--van-text-color);
+                margin: 0 0 6px 0;
+              }
+
+              .tool-desc {
+                font-size: 12px;
+                color: var(--van-gray-6);
+                margin: 0 0 12px 0;
+                line-height: 1.4;
+              }
+
+              .tool-meta {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 8px;
+
+                .tool-tag {
+                  background: var(--van-primary-color);
+                  color: white;
+                  font-size: 10px;
+                  font-weight: 500;
+                  padding: 2px 8px;
+                  border-radius: 10px;
+                }
+
+                .tool-status {
+                  font-size: 10px;
+                  font-weight: 500;
+                  padding: 2px 8px;
+                  border-radius: 10px;
+
+                  &.active {
+                    background: #10b981;
+                    color: white;
+                  }
+
+                  &.beta {
+                    background: #f59e0b;
+                    color: white;
+                  }
+
+                  &.maintenance {
+                    background: #6b7280;
+                    color: white;
+                  }
+                }
+              }
+            }
+
+            .tool-arrow {
+              position: absolute;
+              top: 20px;
+              right: 20px;
+              color: var(--van-gray-4);
+              transition: all 0.3s ease;
+
+              .van-icon {
+                font-size: 16px;
+              }
+            }
+
+            &:hover .tool-arrow {
+              color: var(--van-primary-color);
+              transform: translateX(2px);
+            }
           }
         }
       }
@@ -385,19 +346,61 @@ const navigateTo = (url) => {
 :deep(.van-theme-dark) {
   .discover-page {
     .tool-card {
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+
+      &:hover {
+        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+      }
 
       .tool-icon {
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
       }
     }
+  }
+}
 
-    .van-cell-group {
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-    }
+// 响应式优化
+@media (max-width: 375px) {
+  .discover-page {
+    .discover-content {
+      padding: 16px 12px;
 
-    .recommend-item .recommend-card {
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+      .tools-section {
+        .section-header {
+          margin-bottom: 24px;
+
+          .section-title {
+            font-size: 22px;
+          }
+        }
+
+        .tools-grid {
+          gap: 12px;
+
+          .tool-item .tool-card {
+            padding: 16px;
+
+            .tool-icon-wrapper .tool-icon {
+              width: 48px;
+              height: 48px;
+
+              .iconfont {
+                font-size: 24px;
+              }
+            }
+
+            .tool-content {
+              .tool-name {
+                font-size: 15px;
+              }
+
+              .tool-desc {
+                font-size: 11px;
+              }
+            }
+          }
+        }
+      }
     }
   }
 }
diff --git a/web/src/views/mobile/Index.vue b/web/src/views/mobile/Index.vue
index 81eb1c63..a67a9c0a 100644
--- a/web/src/views/mobile/Index.vue
+++ b/web/src/views/mobile/Index.vue
@@ -149,7 +149,7 @@ const features = ref([
   {
     key: 'suno',
     name: '音乐创作',
-    icon: 'icon-music',
+    icon: 'icon-mp3',
     color: '#EF4444',
     url: '/mobile/create?tab=suno',
   },
@@ -170,14 +170,14 @@ const features = ref([
   {
     key: 'xmind',
     name: '思维导图',
-    icon: 'icon-mind',
+    icon: 'icon-xmind',
     color: '#3B82F6',
     url: '/mobile/tools?tab=xmind',
   },
   {
     key: 'imgWall',
     name: '作品展示',
-    icon: 'icon-gallery',
+    icon: 'icon-image-list',
     color: '#EC4899',
     url: '/mobile/imgWall',
   },
diff --git a/web/src/views/mobile/Member.vue b/web/src/views/mobile/Member.vue
index 925e8ac3..03cfd782 100644
--- a/web/src/views/mobile/Member.vue
+++ b/web/src/views/mobile/Member.vue
@@ -1,602 +1,670 @@
 <template>
-  <div class="member-center">
-    <div class="member-content">
+  <div class="member-page">
+    <div class="member-content" v-loading="loading" :element-loading-text="loadingText">
       <!-- 用户信息卡片 -->
       <div class="user-card" v-if="isLogin">
-        <div class="user-info">
-          <van-image :src="userInfo.avatar" round width="60" height="60" />
-          <div class="user-detail">
-            <div class="user-name">{{ userInfo.nickname || userInfo.username }}</div>
-            <div class="user-level">
-              <van-tag :type="vipInfo.isVip ? 'primary' : 'default'" size="medium">
-                {{ vipInfo.isVip ? 'VIP会员' : '普通用户' }}
-              </van-tag>
+        <div class="user-header">
+          <div class="user-avatar">
+            <van-image :src="userAvatar" round width="60" height="60" />
+          </div>
+          <div class="user-info">
+            <h3 class="username">{{ userInfo.nickname || userInfo.username }}</h3>
+            <div class="user-meta">
+              <van-tag type="primary" v-if="isVip">VIP会员</van-tag>
+              <van-tag type="default" v-else>普通用户</van-tag>
+              <span class="user-id">ID: {{ userInfo.id }}</span>
             </div>
           </div>
         </div>
-        
         <div class="user-stats">
           <div class="stat-item">
             <div class="stat-value">{{ userInfo.power || 0 }}</div>
             <div class="stat-label">剩余算力</div>
           </div>
-          <div class="stat-divider"></div>
-          <div class="stat-item" v-if="vipInfo.isVip">
-            <div class="stat-value">{{ vipInfo.daysLeft }}天</div>
-            <div class="stat-label">VIP剩余</div>
-          </div>
-          <div class="stat-item" v-else>
-            <div class="stat-value">--</div>
-            <div class="stat-label">VIP到期</div>
+          <div class="stat-item">
+            <div class="stat-value">{{ vipDays }}</div>
+            <div class="stat-label">VIP天数</div>
           </div>
         </div>
       </div>
 
-      <!-- 会员特权 -->
-      <div class="privileges-section">
-        <h3 class="section-title">会员特权</h3>
-        <div class="privileges-grid">
-          <div 
-            v-for="privilege in privileges" 
-            :key="privilege.key"
-            class="privilege-item"
-            :class="{ active: vipInfo.isVip }"
-          >
-            <div class="privilege-icon" :style="{ backgroundColor: privilege.color }">
-              <i class="iconfont" :class="privilege.icon"></i>
-            </div>
-            <div class="privilege-info">
-              <div class="privilege-title">{{ privilege.title }}</div>
-              <div class="privilege-desc">{{ privilege.desc }}</div>
-            </div>
-            <div class="privilege-status">
-              <van-icon 
-                :name="vipInfo.isVip ? 'success' : 'cross'" 
-                :color="vipInfo.isVip ? '#07c160' : '#ee0a24'"
-              />
-            </div>
-          </div>
+      <!-- 产品套餐 -->
+      <div class="products-section">
+        <h3 class="section-title">会员套餐</h3>
+        <div class="info-alert" v-if="vipInfoText">
+          <van-notice-bar
+            :text="vipInfoText"
+            color="#1989fa"
+            background="#ecf9ff"
+            :scrollable="false"
+          />
         </div>
-      </div>
 
-      <!-- 充值套餐 -->
-      <div class="packages-section">
-        <h3 class="section-title">充值套餐</h3>
-        <div class="packages-list">
-          <div 
-            v-for="pkg in packages" 
-            :key="pkg.id"
-            class="package-item"
-            :class="{ recommended: pkg.recommended }"
-            @click="selectPackage(pkg)"
-          >
-            <div class="package-tag" v-if="pkg.recommended">推荐</div>
-            <div class="package-header">
-              <div class="package-name">{{ pkg.name }}</div>
-              <div class="package-price">
-                <span class="current-price">￥{{ pkg.discount || pkg.price }}</span>
-                <span class="original-price" v-if="pkg.discount">￥{{ pkg.price }}</span>
+        <div class="products-grid" v-if="list.length > 0">
+          <div v-for="item in list" :key="item.id" class="product-card">
+            <div class="product-header">
+              <div class="product-image">
+                <van-image :src="vipImg" fit="cover" />
               </div>
+              <div class="product-title">{{ item.name }}</div>
             </div>
-            <div class="package-features">
-              <div class="feature-item">
-                <van-icon name="checked" color="#07c160" />
-                <span>{{ pkg.power }}算力值</span>
-              </div>
-              <div class="feature-item" v-if="pkg.days > 0">
-                <van-icon name="checked" color="#07c160" />
-                <span>{{ pkg.days }}天有效期</span>
-              </div>
-              <div class="feature-item" v-else>
-                <van-icon name="checked" color="#07c160" />
-                <span>长期有效</span>
-              </div>
-              <div class="feature-item" v-if="pkg.features">
-                <van-icon name="checked" color="#07c160" />
-                <span>{{ pkg.features }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
 
-      <!-- 支付方式 -->
-      <div class="payment-section" v-if="selectedPackage">
-        <h3 class="section-title">支付方式</h3>
-        <van-radio-group v-model="selectedPayment">
-          <van-cell-group inset>
-            <van-cell 
-              v-for="payment in paymentMethods" 
-              :key="payment.type"
-              clickable 
-              @click="selectedPayment = payment.type"
-            >
-              <template #title>
-                <div class="payment-info">
-                  <i class="iconfont" :class="payment.icon" :style="{ color: payment.color }"></i>
-                  <span>{{ payment.name }}</span>
+            <div class="product-info">
+              <div class="price-info">
+                <div class="original-price">
+                  <span class="label">原价：</span>
+                  <span class="price">￥{{ item.price }}</span>
                 </div>
-              </template>
-              <template #right-icon>
-                <van-radio :name="payment.type" />
-              </template>
-            </van-cell>
-          </van-radio-group>
-        </van-radio-group>
+                <div class="discount-price">
+                  <span class="label">优惠价：</span>
+                  <span class="price">￥{{ item.discount }}</span>
+                </div>
+              </div>
+
+              <div class="product-details">
+                <div class="detail-item">
+                  <span class="label">有效期：</span>
+                  <span class="value">{{ item.days > 0 ? item.days + '天' : '长期有效' }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">算力值：</span>
+                  <span class="value">{{ item.power }}</span>
+                </div>
+              </div>
+
+              <div class="payment-methods">
+                <div class="methods-title">支付方式：</div>
+                <div class="methods-grid">
+                  <van-button
+                    v-for="payWay in payWays"
+                    :key="payWay.pay_type"
+                    size="small"
+                    :color="getPayButtonColor(payWay.pay_type)"
+                    @click="pay(item, payWay)"
+                    class="pay-button"
+                  >
+                    <i class="iconfont" :class="getPayIcon(payWay.pay_type)"></i>
+                    {{ getPayButtonText(payWay.pay_type) }}
+                  </van-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <van-empty v-else description="暂无套餐" />
       </div>
 
-      <!-- 支付按钮 -->
-      <div class="pay-button" v-if="selectedPackage">
-        <van-button 
-          type="primary" 
-          size="large" 
-          round 
-          block
-          :loading="payLoading"
-          @click="processPay"
-        >
-          立即支付 ￥{{ selectedPackage.discount || selectedPackage.price }}
-        </van-button>
+      <!-- 卡密兑换 -->
+      <div class="redeem-section" v-if="isLogin">
+        <h3 class="section-title">卡密兑换</h3>
+        <van-cell-group inset>
+          <van-cell title="卡密兑换" is-link @click="showRedeemVerifyDialog = true">
+            <template #icon>
+              <i class="iconfont icon-redeem menu-icon"></i>
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </div>
+
+      <!-- 消费账单 -->
+      <div class="bills-section" v-if="isLogin">
+        <h3 class="section-title">消费账单</h3>
+        <div class="bills-content">
+          <user-order :key="userOrderKey" />
+        </div>
       </div>
     </div>
 
-    <!-- 帮助弹窗 -->
-    <van-action-sheet v-model:show="showHelp" title="会员帮助">
-      <div class="help-content">
-        <div class="help-item">
-          <h4>什么是算力？</h4>
-          <p>算力是使用AI功能时消耗的虚拟货币，不同功能消耗的算力不同。</p>
+    <!-- 支付弹窗 -->
+    <van-dialog
+      v-model="showPayDialog"
+      title="支付确认"
+      :show-cancel-button="false"
+      :close-on-click-overlay="false"
+    >
+      <div class="pay-dialog-content">
+        <div v-if="qrImg" class="qr-section">
+          <p class="pay-tip">请使用微信扫码支付：</p>
+          <div class="qr-container">
+            <van-image :src="qrImg" width="200" height="200" />
+          </div>
+          <p class="pay-amount">￥{{ currentPrice }}</p>
         </div>
-        <div class="help-item">
-          <h4>如何获得算力？</h4>
-          <p>通过充值套餐可以获得算力，会员用户还可享受每月赠送的算力。</p>
-        </div>
-        <div class="help-item">
-          <h4>VIP特权说明</h4>
-          <p>VIP会员享有更多功能权限、优先处理、专属客服等特权服务。</p>
+        <div class="pay-actions">
+          <van-button type="success" @click="payCallback(true)">支付成功</van-button>
+          <van-button type="danger" @click="payCallback(false)">支付失败</van-button>
         </div>
       </div>
-    </van-action-sheet>
+    </van-dialog>
+
+    <!-- 组件弹窗 -->
+    <redeem-verify v-if="isLogin" :show="showRedeemVerifyDialog" @hide="redeemCallback" />
   </div>
 </template>
 
 <script setup>
-import { checkSession } from '@/store/cache'
+import RedeemVerify from '@/components/RedeemVerify.vue'
+import UserOrder from '@/components/UserOrder.vue'
+import { checkSession, getSystemInfo } from '@/store/cache'
+import { useSharedStore } from '@/store/sharedata'
 import { httpGet, httpPost } from '@/utils/http'
-import { showLoginDialog } from '@/utils/libs'
-import { showFailToast, showLoadingToast, showNotify } from 'vant'
+import QRCode from 'qrcode'
+import { showFailToast, showLoadingToast, showSuccessToast } from 'vant'
 import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
 
-const router = useRouter()
-const isLogin = ref(false)
+// 响应式数据
+const list = ref([])
+const vipImg = ref('/images/menu/member.png')
 const userInfo = ref({})
-const packages = ref([])
-const paymentMethods = ref([])
-const selectedPackage = ref(null)
-const selectedPayment = ref('alipay')
-const payLoading = ref(false)
-const showHelp = ref(false)
+const isLogin = ref(false)
+const loading = ref(true)
+const loadingText = ref('加载中...')
+const vipInfoText = ref('')
+const payWays = ref([])
+const userOrderKey = ref(0)
 
-// VIP信息计算
-const vipInfo = computed(() => {
+// 弹窗控制
+const showRedeemVerifyDialog = ref(false)
+const showPayDialog = ref(false)
+
+// 支付相关
+const qrImg = ref('')
+const currentPrice = ref(0)
+const currentProduct = ref(null)
+const currentPayWay = ref(null)
+
+const store = useSharedStore()
+
+// 计算属性
+const isVip = computed(() => {
   const now = Date.now()
   const expiredTime = userInfo.value.expired_time ? userInfo.value.expired_time * 1000 : 0
-  const isVip = expiredTime > now
-  const daysLeft = isVip ? Math.ceil((expiredTime - now) / (24 * 60 * 60 * 1000)) : 0
-  
-  return { isVip, daysLeft }
+  return expiredTime > now
 })
 
-// 会员特权配置
-const privileges = ref([
-  {
-    key: 'unlimited',
-    title: '无限对话',
-    desc: '不限制对话次数',
-    icon: 'icon-chat',
-    color: '#07c160'
-  },
-  {
-    key: 'priority',
-    title: '优先处理',
-    desc: '请求优先处理',
-    icon: 'icon-flash',
-    color: '#ff9500'
-  },
-  {
-    key: 'models',
-    title: '高级模型',
-    desc: '使用最新AI模型',
-    icon: 'icon-star',
-    color: '#ffd700'
-  },
-  {
-    key: 'support',
-    title: '专属客服',
-    desc: '7×24小时客服支持',
-    icon: 'icon-service',
-    color: '#1989fa'
-  }
-])
-
-onMounted(() => {
-  initPage()
+const vipDays = computed(() => {
+  if (!isVip.value) return 0
+  const now = Date.now()
+  const expiredTime = userInfo.value.expired_time * 1000
+  return Math.ceil((expiredTime - now) / (24 * 60 * 60 * 1000))
 })
 
-const initPage = async () => {
-  try {
-    const user = await checkSession()
-    isLogin.value = true
-    userInfo.value = user
-    
-    // 获取用户详细信息
-    const profileRes = await httpGet('/api/user/profile')
-    userInfo.value = { ...userInfo.value, ...profileRes.data }
-    
-  } catch (error) {
-    showLoginDialog(router)
-    return
-  }
+const userAvatar = computed(() => {
+  return userInfo.value.avatar || '/images/avatar/default.jpg'
+})
 
-  // 获取充值套餐
-  fetchPackages()
-  // 获取支付方式
-  fetchPaymentMethods()
+// 支付按钮颜色
+const getPayButtonColor = (payType) => {
+  const colors = {
+    alipay: '#15A6E8',
+    wxpay: '#07C160',
+    qqpay: '#12B7F5',
+    paypal: '#0070BA',
+    jdpay: '#E1251B',
+    douyin: '#000000',
+  }
+  return colors[payType] || '#1989fa'
 }
 
-const fetchPackages = () => {
+// 支付按钮图标
+const getPayIcon = (payType) => {
+  const icons = {
+    alipay: 'icon-alipay',
+    wxpay: 'icon-wechat-pay',
+    qqpay: 'icon-qq',
+    paypal: 'icon-paypal',
+    jdpay: 'icon-jd-pay',
+    douyin: 'icon-douyin',
+  }
+  return icons[payType] || 'icon-money'
+}
+
+// 支付按钮文本
+const getPayButtonText = (payType) => {
+  const texts = {
+    alipay: '支付宝',
+    wechat: '微信支付',
+    qqpay: 'QQ钱包',
+    paypal: 'PayPal',
+    jdpay: '京东支付',
+    douyin: '抖音支付',
+  }
+  return texts[payType] || '支付'
+}
+
+// 初始化
+onMounted(() => {
+  checkSession()
+    .then((user) => {
+      userInfo.value = user
+      isLogin.value = true
+    })
+    .catch(() => {
+      store.setShowLoginDialog(true)
+    })
+
+  // 获取产品列表
   httpGet('/api/product/list')
     .then((res) => {
-      // 添加推荐标签和特权描述
-      packages.value = res.data.map((pkg, index) => ({
-        ...pkg,
-        recommended: index === 1, // 第二个套餐设为推荐
-        features: pkg.days > 30 ? 'VIP专属权益' : null
-      }))
+      list.value = res.data
+      loading.value = false
     })
     .catch((e) => {
-      showFailToast('获取套餐失败：' + e.message)
+      showFailToast('获取产品套餐失败：' + e.message)
+      loading.value = false
     })
-}
 
-const fetchPaymentMethods = () => {
+  // 获取系统配置
+  getSystemInfo()
+    .then((res) => {
+      vipInfoText.value = res.data['vip_info_text']
+    })
+    .catch((e) => {
+      console.error('获取系统配置失败：', e.message)
+    })
+
+  // 获取支付方式
   httpGet('/api/payment/payWays')
     .then((res) => {
-      paymentMethods.value = res.data.map(item => ({
-        type: item.pay_type,
-        name: item.pay_type === 'alipay' ? '支付宝' : '微信支付',
-        icon: item.pay_type === 'alipay' ? 'icon-alipay' : 'icon-wechat-pay',
-        color: item.pay_type === 'alipay' ? '#1677ff' : '#07c160',
-        payWay: item.pay_way
-      }))
-      
-      if (paymentMethods.value.length > 0) {
-        selectedPayment.value = paymentMethods.value[0].type
-      }
+      payWays.value = res.data
     })
     .catch((e) => {
       showFailToast('获取支付方式失败：' + e.message)
     })
-}
+})
 
-const selectPackage = (pkg) => {
-  selectedPackage.value = pkg
-}
-
-const processPay = () => {
-  if (!selectedPackage.value || !selectedPayment.value) {
-    showNotify({ type: 'warning', message: '请选择套餐和支付方式' })
+// 支付处理
+const pay = (product, payWay) => {
+  if (!isLogin.value) {
+    store.setShowLoginDialog(true)
     return
   }
 
-  const paymentMethod = paymentMethods.value.find(p => p.type === selectedPayment.value)
-  if (!paymentMethod) {
-    showNotify({ type: 'danger', message: '支付方式无效' })
-    return
-  }
+  currentProduct.value = product
+  currentPayWay.value = payWay
+  currentPrice.value = Number(product.discount)
 
-  payLoading.value = true
   showLoadingToast({
-    message: '正在创建订单...',
+    message: '正在生成支付订单...',
     forbidClick: true,
   })
 
-  const host = `${location.protocol}//${location.host}`
-  
-  httpPost('/api/payment/doPay', {
-    product_id: selectedPackage.value.id,
-    pay_way: paymentMethod.payWay,
-    pay_type: paymentMethod.type,
+  let host = import.meta.env.VITE_API_HOST
+  if (host === '') {
+    host = `${location.protocol}//${location.host}`
+  }
+
+  httpPost(`${import.meta.env.VITE_API_HOST}/api/payment/doPay`, {
+    product_id: product.id,
+    pay_way: payWay.pay_way,
+    pay_type: payWay.pay_type,
     user_id: userInfo.value.id,
     host: host,
     device: 'mobile',
   })
     .then((res) => {
-      location.href = res.data
+      if (payWay.pay_way === 'wechat') {
+        // 生成二维码
+        QRCode.toDataURL(res.data, { width: 200, height: 200, margin: 2 }, (error, url) => {
+          if (error) {
+            showFailToast('生成二维码失败')
+          } else {
+            qrImg.value = url
+            showPayDialog.value = true
+          }
+        })
+      } else {
+        // 跳转支付
+        window.open(res.data, '_blank')
+      }
     })
     .catch((e) => {
-      payLoading.value = false
-      showFailToast('创建订单失败：' + e.message)
+      showFailToast('生成支付订单失败：' + e.message)
     })
 }
+
+// 支付回调
+const payCallback = (success) => {
+  showPayDialog.value = false
+  qrImg.value = ''
+
+  if (success) {
+    showSuccessToast('支付成功！')
+    userOrderKey.value += 1
+    // 刷新用户信息
+    checkSession().then((user) => {
+      userInfo.value = user
+    })
+  }
+}
+
+// 卡密兑换回调
+const redeemCallback = () => {
+  showRedeemVerifyDialog.value = false
+  showSuccessToast('卡密兑换成功！')
+  // 刷新用户信息
+  checkSession().then((user) => {
+    userInfo.value = user
+  })
+}
 </script>
 
 <style lang="scss" scoped>
-.member-center {
+.member-page {
   min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  
+  background: var(--van-background);
+
   .member-content {
-    padding: 54px 16px 20px;
-    
+    padding: 20px 16px;
+
     .user-card {
-      background: rgba(255, 255, 255, 0.95);
+      background: linear-gradient(135deg, var(--van-primary-color), #8b5cf6);
       border-radius: 16px;
-      padding: 20px;
-      margin-bottom: 20px;
-      backdrop-filter: blur(10px);
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-      
-      .user-info {
+      padding: 24px;
+      margin-bottom: 24px;
+      color: white;
+      box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3);
+
+      .user-header {
         display: flex;
         align-items: center;
-        margin-bottom: 16px;
-        
-        .user-detail {
-          margin-left: 16px;
-          
-          .user-name {
-            font-size: 18px;
+        margin-bottom: 20px;
+
+        .user-avatar {
+          margin-right: 16px;
+        }
+
+        .user-info {
+          flex: 1;
+
+          .username {
+            font-size: 20px;
             font-weight: 600;
-            color: #333;
-            margin-bottom: 8px;
+            margin: 0 0 8px 0;
+          }
+
+          .user-meta {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+
+            .user-id {
+              font-size: 12px;
+              opacity: 0.8;
+            }
           }
         }
       }
-      
+
       .user-stats {
         display: flex;
-        align-items: center;
         justify-content: space-around;
-        
+
         .stat-item {
           text-align: center;
-          
+
           .stat-value {
-            font-size: 20px;
+            font-size: 24px;
             font-weight: 700;
-            color: var(--van-primary-color);
             margin-bottom: 4px;
           }
-          
+
           .stat-label {
             font-size: 12px;
-            color: #666;
+            opacity: 0.8;
           }
         }
-        
-        .stat-divider {
-          width: 1px;
-          height: 30px;
-          background: #e5e5e5;
-        }
       }
     }
-    
+
     .section-title {
       font-size: 18px;
       font-weight: 600;
-      color: white;
+      color: var(--van-text-color);
       margin: 0 0 16px 4px;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     }
-    
-    .privileges-section {
+
+    .redeem-section {
       margin-bottom: 24px;
-      
-      .privileges-grid {
-        background: rgba(255, 255, 255, 0.95);
-        border-radius: 12px;
-        padding: 16px;
-        backdrop-filter: blur(10px);
-        
-        .privilege-item {
-          display: flex;
-          align-items: center;
-          padding: 12px 0;
-          border-bottom: 1px solid #f5f5f5;
-          
-          &:last-child {
-            border-bottom: none;
-          }
-          
-          &.active {
-            .privilege-icon {
-              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            }
-          }
-          
-          .privilege-icon {
-            width: 40px;
-            height: 40px;
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-right: 12px;
-            transition: all 0.3s ease;
-            
-            .iconfont {
-              font-size: 20px;
-              color: white;
-            }
-          }
-          
-          .privilege-info {
-            flex: 1;
-            
-            .privilege-title {
-              font-size: 15px;
-              font-weight: 600;
-              color: #333;
-              margin-bottom: 4px;
-            }
-            
-            .privilege-desc {
-              font-size: 13px;
-              color: #666;
-            }
-          }
-          
-          .privilege-status {
-            margin-left: 8px;
-          }
-        }
-      }
-    }
-    
-    .packages-section {
-      margin-bottom: 24px;
-      
-      .packages-list {
-        .package-item {
-          background: rgba(255, 255, 255, 0.95);
-          border-radius: 12px;
-          padding: 16px;
-          margin-bottom: 12px;
-          backdrop-filter: blur(10px);
-          position: relative;
-          cursor: pointer;
-          transition: all 0.3s ease;
-          border: 2px solid transparent;
-          
-          &:active {
-            transform: scale(0.98);
-          }
-          
-          &.recommended {
-            border-color: var(--van-primary-color);
-            box-shadow: 0 8px 24px rgba(25, 137, 250, 0.3);
-          }
-          
-          .package-tag {
-            position: absolute;
-            top: -1px;
-            right: 16px;
-            background: var(--van-primary-color);
-            color: white;
-            font-size: 12px;
-            padding: 4px 12px;
-            border-radius: 0 0 8px 8px;
-          }
-          
-          .package-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 12px;
-            
-            .package-name {
-              font-size: 16px;
-              font-weight: 600;
-              color: #333;
-            }
-            
-            .package-price {
-              text-align: right;
-              
-              .current-price {
-                font-size: 18px;
-                font-weight: 700;
-                color: var(--van-primary-color);
-              }
-              
-              .original-price {
-                font-size: 14px;
-                color: #999;
-                text-decoration: line-through;
-                margin-left: 8px;
-              }
-            }
-          }
-          
-          .package-features {
-            .feature-item {
-              display: flex;
-              align-items: center;
-              margin-bottom: 8px;
-              font-size: 14px;
-              color: #666;
-              
-              &:last-child {
-                margin-bottom: 0;
-              }
-              
-              .van-icon {
-                margin-right: 8px;
-              }
-            }
-          }
-        }
-      }
-    }
-    
-    .payment-section {
-      margin-bottom: 24px;
-      
+
       :deep(.van-cell-group) {
         border-radius: 12px;
         overflow: hidden;
-        backdrop-filter: blur(10px);
-        
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
         .van-cell {
-          background: rgba(255, 255, 255, 0.95);
-          
-          .payment-info {
+          padding: 16px;
+
+          .menu-icon {
+            font-size: 18px;
+            margin-right: 12px;
+            color: var(--van-primary-color);
+          }
+
+          .van-cell__title {
+            font-size: 15px;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+
+    .products-section {
+      margin-bottom: 24px;
+
+      .info-alert {
+        margin-bottom: 16px;
+      }
+
+      .products-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+
+        .product-card {
+          background: var(--van-cell-background);
+          border-radius: 16px;
+          padding: 20px;
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+          transition: all 0.3s ease;
+
+          &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+          }
+
+          .product-header {
             display: flex;
             align-items: center;
-            
-            .iconfont {
-              font-size: 20px;
+            margin-bottom: 16px;
+
+            .product-image {
+              width: 48px;
+              height: 48px;
               margin-right: 12px;
+              border-radius: 8px;
+              overflow: hidden;
+            }
+
+            .product-title {
+              font-size: 18px;
+              font-weight: 600;
+              color: var(--van-text-color);
+            }
+          }
+
+          .product-info {
+            .price-info {
+              margin-bottom: 16px;
+
+              .original-price,
+              .discount-price {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 8px;
+
+                .label {
+                  font-size: 14px;
+                  color: var(--van-gray-6);
+                }
+
+                .price {
+                  font-weight: 600;
+                }
+              }
+
+              .original-price .price {
+                color: var(--van-gray-5);
+                text-decoration: line-through;
+              }
+
+              .discount-price .price {
+                color: #ff6b35;
+                font-size: 18px;
+              }
+            }
+
+            .product-details {
+              margin-bottom: 20px;
+
+              .detail-item {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 8px;
+
+                .label {
+                  font-size: 14px;
+                  color: var(--van-gray-6);
+                }
+
+                .value {
+                  font-size: 14px;
+                  color: var(--van-text-color);
+                  font-weight: 500;
+                }
+              }
+            }
+
+            .payment-methods {
+              .methods-title {
+                font-size: 14px;
+                color: var(--van-gray-6);
+                margin-bottom: 12px;
+              }
+
+              .methods-grid {
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 8px;
+
+                .pay-button {
+                  height: 36px;
+                  font-size: 12px;
+
+                  .iconfont {
+                    margin-right: 4px;
+                  }
+                }
+              }
             }
           }
         }
       }
     }
-    
-    .pay-button {
-      position: sticky;
-      bottom: 20px;
-      z-index: 100;
+
+    .bills-section {
+      .bills-content {
+        background: var(--van-cell-background);
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      }
     }
   }
-  
-  .help-content {
+
+  // 支付弹窗样式
+  .pay-dialog-content {
     padding: 20px;
-    
-    .help-item {
+
+    .qr-section {
+      text-align: center;
       margin-bottom: 20px;
-      
-      &:last-child {
-        margin-bottom: 0;
-      }
-      
-      h4 {
+
+      .pay-tip {
         font-size: 16px;
-        font-weight: 600;
         color: var(--van-text-color);
-        margin: 0 0 8px 0;
+        margin-bottom: 16px;
       }
-      
-      p {
-        font-size: 14px;
-        color: var(--van-gray-6);
-        line-height: 1.5;
-        margin: 0;
+
+      .qr-container {
+        margin-bottom: 12px;
+      }
+
+      .pay-amount {
+        font-size: 20px;
+        font-weight: 600;
+        color: #ff6b35;
+      }
+    }
+
+    .pay-actions {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+    }
+  }
+}
+
+// 深色主题优化
+:deep(.van-theme-dark) {
+  .member-page {
+    .product-card {
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+
+      &:hover {
+        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    .van-cell-group {
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    }
+  }
+}
+
+// 响应式优化
+@media (max-width: 375px) {
+  .member-page {
+    .member-content {
+      padding: 16px 12px;
+
+      .user-card {
+        padding: 20px;
+
+        .user-header .user-info .username {
+          font-size: 18px;
+        }
+
+        .user-stats .stat-item .stat-value {
+          font-size: 20px;
+        }
+      }
+
+      .products-section .products-grid .product-card {
+        padding: 16px;
+
+        .product-header .product-title {
+          font-size: 16px;
+        }
+
+        .payment-methods .methods-grid {
+          grid-template-columns: 1fr;
+        }
       }
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/mobile/Profile.vue b/web/src/views/mobile/Profile.vue
index 30639fc9..d1eb624f 100644
--- a/web/src/views/mobile/Profile.vue
+++ b/web/src/views/mobile/Profile.vue
@@ -31,7 +31,7 @@
       <!-- 用户状态卡片 -->
       <div class="status-cards" v-if="isLogin">
         <van-row :gutter="12">
-          <van-col :span="8">
+          <van-col :span="12">
             <div class="status-card" @click="router.push('/mobile/power-log')">
               <div class="card-icon power">
                 <i class="iconfont icon-flash"></i>
@@ -40,16 +40,7 @@
               <div class="card-label">剩余算力</div>
             </div>
           </van-col>
-          <van-col :span="8">
-            <div class="status-card" @click="router.push('/mobile/member')">
-              <div class="card-icon member">
-                <i class="iconfont icon-vip"></i>
-              </div>
-              <div class="card-value">{{ vipDays }}</div>
-              <div class="card-label">VIP天数</div>
-            </div>
-          </van-col>
-          <van-col :span="8">
+          <van-col :span="12">
             <div class="status-card" @click="router.push('/mobile/invite')">
               <div class="card-icon invite">
                 <i class="iconfont icon-user-plus"></i>
@@ -68,9 +59,9 @@
           <van-col :span="6">
             <div class="action-item" @click="router.push('/mobile/member')">
               <div class="action-icon recharge">
-                <i class="iconfont icon-money"></i>
+                <i class="iconfont icon-vip"></i>
               </div>
-              <div class="action-label">充值</div>
+              <div class="action-label">会员中心</div>
             </div>
           </van-col>
           <van-col :span="6">
@@ -100,6 +91,28 @@
         </van-row>
       </div>
 
+      <!-- 账户管理 -->
+      <div class="menu-section" v-if="isLogin">
+        <h3 class="section-title">账户管理</h3>
+        <van-cell-group inset>
+          <van-cell title="绑定邮箱" is-link @click="showBindEmailDialog = true">
+            <template #icon>
+              <i class="iconfont icon-email menu-icon"></i>
+            </template>
+          </van-cell>
+          <van-cell title="绑定手机" is-link @click="showBindMobileDialog = true">
+            <template #icon>
+              <i class="iconfont icon-mobile menu-icon"></i>
+            </template>
+          </van-cell>
+          <van-cell title="第三方登录" is-link @click="showThirdLoginDialog = true">
+            <template #icon>
+              <i class="iconfont icon-login menu-icon"></i>
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </div>
+
       <!-- 功能菜单 -->
       <div class="menu-section">
         <h3 class="section-title">我的服务</h3>
@@ -114,16 +127,6 @@
               <i class="iconfont icon-history menu-icon"></i>
             </template>
           </van-cell>
-          <van-cell
-            title="会员中心"
-            icon="diamond-o"
-            is-link
-            @click="router.push('/mobile/member')"
-          >
-            <template #icon>
-              <i class="iconfont icon-vip menu-icon"></i>
-            </template>
-          </van-cell>
           <van-cell
             title="邀请好友"
             icon="friends-o"
@@ -134,12 +137,7 @@
               <i class="iconfont icon-user-plus menu-icon"></i>
             </template>
           </van-cell>
-          <van-cell
-            title="聊天导出"
-            icon="down"
-            is-link
-            @click="router.push('/mobile/chat/export')"
-          >
+          <van-cell title="聊天导出" icon="down" is-link @click="copyChatExportLink">
             <template #icon>
               <i class="iconfont icon-download menu-icon"></i>
             </template>
@@ -294,6 +292,11 @@
       </div>
     </van-dialog>
 
+    <!-- 组件弹窗 -->
+    <bind-email v-if="isLogin" :show="showBindEmailDialog" @hide="showBindEmailDialog = false" />
+    <bind-mobile v-if="isLogin" :show="showBindMobileDialog" @hide="showBindMobileDialog = false" />
+    <third-login v-if="isLogin" :show="showThirdLoginDialog" @hide="showThirdLoginDialog = false" />
+
     <!-- 退出登录确认 -->
     <van-dialog
       :model-value="showLogoutConfirm"
@@ -303,15 +306,24 @@
       show-cancel-button
       @confirm="logout"
     />
+
+    <!-- 隐藏的复制链接按钮 -->
+    <button id="copy-chat-export-btn" style="display: none" :data-clipboard-text="chatExportUrl">
+      复制聊天导出链接
+    </button>
   </div>
 </template>
 
 <script setup>
+import BindEmail from '@/components/BindEmail.vue'
+import BindMobile from '@/components/BindMobile.vue'
+import ThirdLogin from '@/components/ThirdLogin.vue'
 import { checkSession, getSystemInfo } from '@/store/cache'
 import { removeUserToken } from '@/store/session'
 import { useSharedStore } from '@/store/sharedata'
 import { httpGet, httpPost } from '@/utils/http'
 import { showLoginDialog } from '@/utils/libs'
+import Clipboard from 'clipboard'
 import { showFailToast, showLoadingToast, showNotify, showSuccessToast } from 'vant'
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -337,6 +349,9 @@ const router = useRouter()
 const isLogin = ref(false)
 const showSettings = ref(false)
 const showPasswordDialog = ref(false)
+const showBindEmailDialog = ref(false)
+const showBindMobileDialog = ref(false)
+const showThirdLoginDialog = ref(false)
 const showAvatarOptions = ref(false)
 const showAbout = ref(false)
 const showLogoutConfirm = ref(false)
@@ -346,6 +361,9 @@ const dark = ref(store.theme === 'dark')
 const title = ref(import.meta.env.VITE_TITLE)
 const appVersion = ref('2.1.0')
 
+// 聊天导出链接
+const chatExportUrl = ref(location.protocol + '//' + location.host + '/chat/export')
+
 // 新增状态
 const notifications = ref(true)
 const autoSave = ref(true)
@@ -372,13 +390,6 @@ const isVip = computed(() => {
   return expiredTime > now
 })
 
-const vipDays = computed(() => {
-  if (!isVip.value) return 0
-  const now = Date.now()
-  const expiredTime = form.value.expired_time * 1000
-  return Math.ceil((expiredTime - now) / (24 * 60 * 60 * 1000))
-})
-
 onMounted(() => {
   getSystemInfo()
     .then((res) => {
@@ -401,6 +412,16 @@ onMounted(() => {
     .catch(() => {
       isLogin.value = false
     })
+
+  // 初始化复制功能
+  const clipboard = new Clipboard('#copy-chat-export-btn')
+  clipboard.on('success', (e) => {
+    e.clearSelection()
+    showNotify({ type: 'success', message: '链接已复制到剪贴板', duration: 2000 })
+  })
+  clipboard.on('error', () => {
+    showNotify({ type: 'danger', message: '复制失败', duration: 2000 })
+  })
 })
 
 // 获取用户详细信息
@@ -421,6 +442,11 @@ const fetchUserStats = () => {
   inviteCount.value = Math.floor(Math.random() * 20)
 }
 
+// 复制聊天导出链接
+const copyChatExportLink = () => {
+  document.getElementById('copy-chat-export-btn').click()
+}
+
 // 确认密码验证
 const validateConfirmPassword = (value) => {
   if (value !== pass.value.new) {
@@ -670,9 +696,9 @@ const logout = function () {
         }
 
         .card-icon {
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
+          width: 48px;
+          height: 48px;
+          border-radius: 12px;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -682,16 +708,12 @@ const logout = function () {
             background: linear-gradient(135deg, #ff9500, #ff6b35);
           }
 
-          &.member {
-            background: linear-gradient(135deg, #ffd700, #ffb300);
-          }
-
           &.invite {
             background: linear-gradient(135deg, #1989fa, #0d7dff);
           }
 
           .iconfont {
-            font-size: 20px;
+            font-size: 24px;
             color: white;
           }
         }
@@ -748,7 +770,7 @@ const logout = function () {
           margin-bottom: 8px;
 
           &.recharge {
-            background: linear-gradient(135deg, #07c160, #00a550);
+            background: linear-gradient(135deg, #ffd700, #ffb300);
           }
 
           &.password {
diff --git a/web/src/views/mobile/pages/ImageDall.vue b/web/src/views/mobile/pages/ImageDall.vue
index a635f62b..fb7f5a27 100644
--- a/web/src/views/mobile/pages/ImageDall.vue
+++ b/web/src/views/mobile/pages/ImageDall.vue
@@ -84,7 +84,7 @@
       </van-cell-group>
     </van-form>
 
-    <h3>任务列表</h3>
+    <h3 class="m-3">任务列表</h3>
     <div class="running-job-list pt-3 pb-3">
       <van-empty
         v-if="runningJobs.length === 0"
@@ -116,7 +116,7 @@
       </van-grid>
     </div>
 
-    <h3>创作记录</h3>
+    <h3 class="m-3">创作记录</h3>
     <div class="finish-job-list">
       <van-empty
         v-if="finishedJobs.length === 0"
diff --git a/web/src/views/mobile/pages/ImageMj.vue b/web/src/views/mobile/pages/ImageMj.vue
index e829b052..95d4e6a1 100644
--- a/web/src/views/mobile/pages/ImageMj.vue
+++ b/web/src/views/mobile/pages/ImageMj.vue
@@ -204,7 +204,7 @@
       </div>
     </van-form>
 
-    <h3>任务列表</h3>
+    <h3 class="m-3">任务列表</h3>
     <div class="running-job-list pt-3 pb-3">
       <van-empty
         v-if="runningJobs.length === 0"
@@ -236,7 +236,7 @@
       </van-grid>
     </div>
 
-    <h3>创作记录</h3>
+    <h3 class="m-3">创作记录</h3>
     <div class="finish-job-list">
       <van-empty
         v-if="finishedJobs.length === 0"
@@ -255,7 +255,7 @@
         @load="onLoad"
       >
         <van-grid :gutter="10" :column-num="2">
-          <van-grid-item v-for="item in finishedJobs" :key="item.id">
+          <van-grid-item v-for="item in finishedJobs" :key="item.id" class="min-h-[270px]">
             <div class="failed" v-if="item.progress === 101">
               <div class="title">任务失败</div>
               <div class="opt">
diff --git a/web/src/views/mobile/pages/ImageSd.vue b/web/src/views/mobile/pages/ImageSd.vue
index 351eb921..a4f518b4 100644
--- a/web/src/views/mobile/pages/ImageSd.vue
+++ b/web/src/views/mobile/pages/ImageSd.vue
@@ -140,7 +140,7 @@
       </van-cell-group>
     </van-form>
 
-    <h3>任务列表</h3>
+    <h3 class="m-3">任务列表</h3>
     <div class="running-job-list pt-3 pb-3">
       <van-empty
         v-if="runningJobs.length === 0"
@@ -172,7 +172,7 @@
       </van-grid>
     </div>
 
-    <h3>创作记录</h3>
+    <h3 class="m-3">创作记录</h3>
     <div class="finish-job-list">
       <van-empty
         v-if="finishedJobs.length === 0"