整合登录注册页面

web/src/components/BindEmail.vue

@@ -1,37 +1,26 @@
 <template>
-  <el-dialog
+  <div class="form">
-    v-model="showDialog"
+    <div class="text-center" v-if="email !== ''">当前已绑定邮箱：{{ email }}</div>
-    :close-on-click-modal="true"
+    <el-form label-position="top">
-    style="max-width: 400px"
+      <el-form-item label="邮箱地址">
-    @close="close"
+        <el-input v-model="form.email" />
-    :title="title"
+      </el-form-item>
-  >
+      <el-form-item label="验证码">
-    <div class="form">
+        <el-row :gutter="0">
-      <div class="text-center" v-if="email !== ''">当前已绑定邮箱：{{ email }}</div>
+          <el-col :span="16">
-
+            <el-input v-model="form.code" maxlength="6" />
-      <el-form label-position="top">
+          </el-col>
-        <el-form-item label="邮箱地址">
+          <el-col :span="8" style="padding-left: 10px">
-          <el-input v-model="form.email" />
+            <send-msg :receiver="form.email" type="email" />
-        </el-form-item>
+          </el-col>
-        <el-form-item label="验证码">
+        </el-row>
-          <el-row :gutter="0">
+      </el-form-item>
-            <el-col :span="16">
+    </el-form>
-              <el-input v-model="form.code" maxlength="6" />
+    <div class="dialog-footer text-center">
-            </el-col>
+      <el-button type="primary" @click="save"> 保存 </el-button>
-            <el-col :span="8" style="padding-left: 10px">
+      <el-button @click="emits('hide')"> 取消 </el-button>
-              <send-msg :receiver="form.email" type="email" />
-            </el-col>
-          </el-row>
-        </el-form-item>
-      </el-form>
     </div>
-
+  </div>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button type="primary" @click="save"> 提交绑定 </el-button>
-      </span>
-    </template>
-  </el-dialog>
 </template>
 
 <script setup>
@@ -39,31 +28,18 @@ import SendMsg from '@/components/SendMsg.vue'
 import { checkSession } from '@/store/cache'
 import { httpPost } from '@/utils/http'
 import { ElMessage } from 'element-plus'
-import { computed, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 
-const props = defineProps({
-  show: Boolean,
-})
-
-const showDialog = computed(() => {
-  return props.show
-})
-
-const title = ref('绑定邮箱')
 const email = ref('')
 const form = ref({
   email: '',
   code: '',
 })
 
-watch(showDialog, (val) => {
+onMounted(() => {
-  if (val) {
+  checkSession().then((user) => {
-    form.value.code = ''
+    email.value = user.email
-    form.value.email = ''
+  })
-    checkSession().then((user) => {
-      email.value = user.email
-    })
-  }
 })
 
 const emits = defineEmits(['hide'])
@@ -82,10 +58,6 @@ const save = () => {
       ElMessage.error('绑定失败：' + e.message)
     })
 }
-
-const close = function () {
-  emits('hide')
-}
 </script>
 
 <style lang="scss" scoped>

web/src/components/BindMobile.vue

@@ -1,37 +1,26 @@
 <template>
-  <el-dialog
+  <div class="form">
-    v-model="showDialog"
+    <div class="text-center" v-if="mobile !== ''">当前已绑手机号：{{ mobile }}</div>
-    :close-on-click-modal="true"
+    <el-form label-position="top">
-    style="max-width: 400px"
+      <el-form-item label="手机号">
-    @close="close"
+        <el-input v-model="form.mobile" />
-    :title="title"
+      </el-form-item>
-  >
+      <el-form-item label="验证码">
-    <div class="form">
+        <el-row :gutter="0">
-      <div class="text-center" v-if="mobile !== ''">当前已绑手机号：{{ mobile }}</div>
+          <el-col :span="16">
-
+            <el-input v-model="form.code" maxlength="6" />
-      <el-form label-position="top">
+          </el-col>
-        <el-form-item label="手机号">
+          <el-col :span="8" style="padding-left: 10px">
-          <el-input v-model="form.mobile" />
+            <send-msg :receiver="form.mobile" size="default" type="mobile" />
-        </el-form-item>
+          </el-col>
-        <el-form-item label="验证码">
+        </el-row>
-          <el-row :gutter="0">
+      </el-form-item>
-            <el-col :span="16">
+    </el-form>
-              <el-input v-model="form.code" maxlength="6" />
+    <div class="dialog-footer text-center">
-            </el-col>
+      <el-button type="primary" @click="save"> 保存 </el-button>
-            <el-col :span="8" style="padding-left: 10px">
+      <el-button @click="emits('hide')"> 取消 </el-button>
-              <send-msg :receiver="form.mobile" size="default" type="mobile" />
-            </el-col>
-          </el-row>
-        </el-form-item>
-      </el-form>
     </div>
-
+  </div>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button type="primary" @click="save"> 提交绑定 </el-button>
-      </span>
-    </template>
-  </el-dialog>
 </template>
 
 <script setup>
@@ -39,34 +28,18 @@ import SendMsg from '@/components/SendMsg.vue'
 import { checkSession } from '@/store/cache'
 import { httpPost } from '@/utils/http'
 import { ElMessage } from 'element-plus'
-import { computed, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 
-const props = defineProps({
-  show: Boolean,
-})
-
-const showDialog = computed(() => {
-  return props.show
-})
-
-const title = ref('绑定手机')
 const mobile = ref('')
 const form = ref({
   mobile: '',
   code: '',
 })
 
-watch(showDialog, (val) => {
+onMounted(() => {
-  if (val) {
+  checkSession().then((user) => {
-    form.value = {
+    mobile.value = user.mobile
-      mobile: '',
+  })
-      code: '',
-    }
-
-    checkSession().then((user) => {
-      mobile.value = user.mobile
-    })
-  }
 })
 
 const emits = defineEmits(['hide'])
@@ -85,10 +58,6 @@ const save = () => {
       ElMessage.error('绑定失败：' + e.message)
     })
 }
-
-const close = function () {
-  emits('hide')
-}
 </script>
 
 <style lang="scss" scoped>

web/src/components/RedeemVerify.vue

@@ -1,42 +1,22 @@
 <template>
-  <el-dialog
+  <div class="form" id="redeem-form">
-    v-model="showDialog"
+    <el-form :model="form">
-    :close-on-click-modal="true"
+      <el-form-item>
-    :before-close="close"
+        <el-input v-model="form.code" placeholder="请输入兑换码" />
-    :width="450"
+      </el-form-item>
-    :title="title"
+    </el-form>
-  >
+    <div class="dialog-footer">
-    <div class="form" id="bind-mobile-form">
+      <el-button type="primary" @click="save">兑换</el-button>
-      <el-form :model="form">
+      <el-button @click="emits('hide')">取消</el-button>
-        <el-form-item>
-          <el-input v-model="form.code" />
-        </el-form-item>
-      </el-form>
     </div>
-
+  </div>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button type="primary" @click="save"> 立即兑换 </el-button>
-      </span>
-    </template>
-  </el-dialog>
 </template>
 
 <script setup>
-import { showMessageError, showMessageOK } from '@/utils/dialog'
+import { showMessageError, showMessageInfo, showMessageOK } from '@/utils/dialog'
 import { httpPost } from '@/utils/http'
-import { ElMessage } from 'element-plus'
+import { ref } from 'vue'
-import { computed, ref } from 'vue'
 
-const props = defineProps({
-  show: Boolean,
-})
-
-const showDialog = computed(() => {
-  return props.show
-})
-
-const title = ref('兑换码核销')
 const form = ref({
   code: '',
 })
@@ -45,7 +25,7 @@ const emits = defineEmits(['hide'])
 
 const save = () => {
   if (form.value.code === '') {
-    return ElMessage.error({ message: '请输入兑换码' })
+    return showMessageInfo('请输入兑换码')
   }
 
   httpPost('/api/redeem/verify', form.value)
@@ -57,10 +37,23 @@ const save = () => {
       showMessageError('兑换失败：' + e.message)
     })
 }
-
-const close = function () {
-  emits('hide', false)
-}
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.form {
+  padding: 20px;
+
+  .form-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  .dialog-footer {
+    text-align: center;
+    margin-top: 20px;
+  }
+}
+</style>

web/src/components/ThirdLogin.vue

@@ -1,94 +0,0 @@
-<template>
-  <el-dialog
-    v-model="showDialog"
-    :close-on-click-modal="true"
-    style="max-width: 400px"
-    @close="close"
-    :title="title"
-  >
-    <div class="third-login" v-loading="loading">
-      <div class="item" v-if="wechatBindURL !== ''">
-        <a class="link" :href="wechatBindURL"><i class="iconfont icon-wechat"></i></a>
-        <span class="text ok" v-if="openid !== ''">已绑定</span>
-        <span class="text" v-else>未绑定</span>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<script setup>
-import { checkSession } from '@/store/cache'
-import { showMessageError } from '@/utils/dialog'
-import { httpGet } from '@/utils/http'
-import { computed, ref, watch } from 'vue'
-
-const props = defineProps({
-  show: Boolean,
-})
-const emits = defineEmits(['hide'])
-
-const showDialog = computed(() => {
-  return props.show
-})
-
-const title = ref('绑定第三方登录')
-const openid = ref('')
-const wechatBindURL = ref('')
-const loading = ref(true)
-
-watch(showDialog, (val) => {
-  if (val) {
-    checkSession().then((user) => {
-      openid.value = user.openid
-    })
-    const returnURL = `${location.protocol}//${location.host}/login/callback?action=bind`
-    httpGet('/api/user/clogin?return_url=' + returnURL)
-      .then((res) => {
-        wechatBindURL.value = res.data.url
-        loading.value = false
-      })
-      .catch((e) => {
-        showMessageError(e.message)
-      })
-  }
-})
-
-const close = function () {
-  emits('hide')
-}
-</script>
-
-<style lang="scss" scoped>
-.third-login {
-  display: flex;
-  justify-content: center;
-  min-height: 100px;
-
-  .item {
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-
-    .link {
-      display: flex;
-      .iconfont {
-        font-size: 30px;
-        cursor: pointer;
-        background: #e9f1f6;
-        padding: 10px;
-        border-radius: 50%;
-      }
-      margin-bottom: 10px;
-    }
-
-    .text {
-      font-size: 14px;
-    }
-
-    .icon-wechat,
-    .ok {
-      color: #0bc15f;
-    }
-  }
-}
-</style>

web/src/components/UserOrder.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="user-bill" v-loading="loading" element-loading-background="rgba(255,255,255,.3)">
-    <el-row v-if="items.length > 0">
+    <!-- PC端表格 -->
+    <div class="desktop-table" v-if="items.length > 0">
       <el-table :data="items" :row-key="(row) => row.id" table-layout="auto" border>
         <el-table-column prop="order_no" label="订单号">
           <template #default="scope">
@@ -14,7 +15,7 @@
         <el-table-column prop="amount" label="订单金额" />
         <el-table-column label="订单算力">
           <template #default="scope">
-            <span>{{ scope.row.remark?.power }}</span>
+            <span>{{ scope.row.remark && scope.row.remark.power }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="pay_method" label="支付渠道" />
@@ -26,17 +27,61 @@
           </template>
         </el-table-column>
       </el-table>
-    </el-row>
+    </div>
+
+    <!-- 移动端卡片列表 -->
+    <div class="mobile-cards" v-if="items.length > 0">
+      <div v-for="item in items" :key="item.id" class="order-card">
+        <div class="card-header">
+          <div class="order-no">
+            <span class="label">订单号：</span>
+            <span class="value">{{ item.order_no }}</span>
+            <el-icon class="copy-icon" :data-clipboard-text="item.order_no">
+              <DocumentCopy />
+            </el-icon>
+          </div>
+        </div>
+
+        <div class="card-content">
+          <div class="info-row">
+            <span class="label">产品名称：</span>
+            <span class="value">{{ item.subject }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">订单金额：</span>
+            <span class="value amount">￥{{ item.amount }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">订单算力：</span>
+            <span class="value">{{ (item.remark && item.remark.power) || '-' }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">支付渠道：</span>
+            <span class="value">{{ item.pay_method }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">支付名称：</span>
+            <span class="value">{{ item.pay_name }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">支付时间：</span>
+            <span class="value">{{ item['pay_time'] ? dateFormat(item['pay_time']) : '-' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <el-empty :image-size="100" v-else :image="nodata" description="暂无数据" />
+
     <div class="pagination pb-5">
       <el-pagination
         v-if="total > 0"
         background
         layout="total,prev, pager, next"
         :hide-on-single-page="true"
-        v-model:current-page="page"
+        :current-page="page"
-        v-model:page-size="pageSize"
+        :page-size="pageSize"
-        @current-change="fetchData()"
+        @current-change="handlePageChange"
         style="--el-pagination-button-bg-color: rgba(86, 86, 95, 0.2)"
         :total="total"
       />
@@ -46,7 +91,6 @@
 
 <script setup>
 import nodata from '@/assets/img/no-data.png'
-
 import { httpGet } from '@/utils/http'
 import { dateFormat } from '@/utils/libs'
 import { DocumentCopy } from '@element-plus/icons-vue'
@@ -62,7 +106,7 @@ const loading = ref(true)
 
 onMounted(() => {
   fetchData()
-  const clipboard = new Clipboard('.copy-order-no')
+  const clipboard = new Clipboard('.copy-order-no, .copy-icon')
   clipboard.on('success', () => {
     ElMessage.success('复制成功！')
   })
@@ -88,11 +132,17 @@ const fetchData = () => {
       ElMessage.error('获取数据失败：' + e.message)
     })
 }
+
+// 处理分页变化
+const handlePageChange = (newPage) => {
+  page.value = newPage
+  fetchData()
+}
 </script>
 
 <style scoped lang="scss">
 .user-bill {
-  background-color: var(--chat-bg);
+  // background-color: var(--el-bg-color);
 
   .pagination {
     margin: 20px 0 0 0;
@@ -108,5 +158,132 @@ const fetchData = () => {
     top: 2px;
     color: #20a0ff;
   }
+
+  // 移动端卡片样式
+  .mobile-cards {
+    display: none;
+
+    .order-card {
+      background: transparent;
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 16px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      border: 1px solid var(--el-border-color-light);
+      background: var(--van-cell-background);
+
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+        padding-bottom: 12px;
+        border-bottom: 1px solid var(--el-border-color-lighter);
+
+        .order-no {
+          display: flex;
+          align-items: center;
+          flex: 1;
+          margin-right: 12px;
+
+          .label {
+            font-size: 14px;
+            color: var(--el-text-color-regular);
+            margin-right: 4px;
+          }
+
+          .value {
+            font-size: 14px;
+            color: var(--el-text-color-primary);
+            font-weight: 500;
+            margin-right: 8px;
+          }
+
+          .copy-icon {
+            cursor: pointer;
+            color: #20a0ff;
+            font-size: 16px;
+          }
+        }
+
+        .order-status {
+          flex-shrink: 0;
+        }
+      }
+
+      .card-content {
+        .info-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 8px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .label {
+            font-size: 14px;
+            color: var(--el-text-color-regular);
+            flex-shrink: 0;
+            margin-right: 8px;
+          }
+
+          .value {
+            font-size: 14px;
+            color: var(--el-text-color-primary);
+            text-align: right;
+            word-break: break-all;
+
+            &.amount {
+              font-weight: 600;
+              color: #ff6b35;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .user-bill {
+    .desktop-table {
+      display: none;
+    }
+
+    .mobile-cards {
+      display: block;
+    }
+
+    .pagination {
+      :deep(.el-pagination) {
+        .el-pagination__total {
+          display: none;
+        }
+
+        .el-pager {
+          li {
+            min-width: 32px;
+            height: 32px;
+            line-height: 32px;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 深色主题适配
+:deep(.van-theme-dark) {
+  .user-bill {
+    .mobile-cards .order-card {
+      background: transparent;
+      border-color: var(--el-border-color);
+      box-shadow: none;
+    }
+  }
 }
 </style>

web/src/router.js

@@ -129,6 +129,18 @@ const routes = [
     meta: { title: '用户登录' },
     component: () => import('@/views/LoginCallback.vue'),
   },
+  {
+    name: 'login',
+    path: '/login',
+    meta: { title: '用户登录' },
+    component: () => import('@/views/Login.vue'),
+  },
+  {
+    name: 'register',
+    path: '/register',
+    meta: { title: '用户注册' },
+    component: () => import('@/views/Register.vue'),
+  },
   {
     name: 'resetpassword',
     path: '/resetpassword',
@@ -271,12 +283,6 @@ const routes = [
     ],
   },
 
-  {
-    name: 'mobile-login',
-    path: '/mobile/login',
-    meta: { title: '用户登录' },
-    component: () => import('@/views/mobile/Login.vue'),
-  },
   {
     name: 'mobile',
     path: '/mobile',

web/src/utils/device.js

@@ -0,0 +1,133 @@
+/**
+ * 设备检测工具函数
+ * 用于判断当前设备类型，支持PC端和移动端的智能识别
+ */
+
+/**
+ * 检测设备类型
+ * @returns {string} 'mobile' | 'desktop'
+ */
+export const detectDevice = () => {
+  const userAgent = navigator.userAgent.toLowerCase()
+
+  // 移动设备关键词检测
+  const mobileKeywords = [
+    'mobile',
+    'android',
+    'iphone',
+    'ipad',
+    'phone',
+    'blackberry',
+    'opera mini',
+    'windows phone',
+    'iemobile',
+  ]
+
+  // 平板设备关键词检测
+  const tabletKeywords = ['tablet', 'ipad', 'playbook', 'silk', 'kindle']
+
+  // 检查是否为移动设备
+  const isMobile = mobileKeywords.some((keyword) => userAgent.includes(keyword))
+
+  // 检查是否为平板设备
+  const isTablet = tabletKeywords.some((keyword) => userAgent.includes(keyword))
+
+  // 检查屏幕尺寸
+  const screenWidth = window.innerWidth
+  const screenHeight = window.innerHeight
+
+  // 移动设备判断逻辑
+  if (isMobile || isTablet || screenWidth <= 768) {
+    return 'mobile'
+  }
+
+  return 'desktop'
+}
+
+/**
+ * 检测是否为移动设备
+ * @returns {boolean}
+ */
+export const isMobileDevice = () => {
+  return detectDevice() === 'mobile'
+}
+
+/**
+ * 检测是否为桌面设备
+ * @returns {boolean}
+ */
+export const isDesktopDevice = () => {
+  return detectDevice() === 'desktop'
+}
+
+/**
+ * 获取设备跳转路径
+ * @param {string} deviceType - 设备类型
+ * @param {string} defaultPath - 默认路径
+ * @returns {string} 跳转路径
+ */
+export const getDeviceRedirectPath = (deviceType, defaultPath = '/') => {
+  if (deviceType === 'mobile') {
+    return '/mobile'
+  }
+  return defaultPath
+}
+
+/**
+ * 根据当前设备获取跳转路径
+ * @param {string} defaultPath - 默认路径
+ * @returns {string} 跳转路径
+ */
+export const getCurrentDeviceRedirectPath = (defaultPath = '/') => {
+  const deviceType = detectDevice()
+  return getDeviceRedirectPath(deviceType, defaultPath)
+}
+
+/**
+ * 检测屏幕尺寸
+ * @returns {object} { width, height, isSmall, isMedium, isLarge }
+ */
+export const getScreenInfo = () => {
+  const width = window.innerWidth
+  const height = window.innerHeight
+
+  return {
+    width,
+    height,
+    isSmall: width <= 768,
+    isMedium: width > 768 && width <= 1024,
+    isLarge: width > 1024,
+  }
+}
+
+/**
+ * 检测浏览器类型
+ * @returns {string} 浏览器类型
+ */
+export const detectBrowser = () => {
+  const userAgent = navigator.userAgent.toLowerCase()
+
+  if (userAgent.includes('chrome')) return 'chrome'
+  if (userAgent.includes('firefox')) return 'firefox'
+  if (userAgent.includes('safari') && !userAgent.includes('chrome')) return 'safari'
+  if (userAgent.includes('edge')) return 'edge'
+  if (userAgent.includes('opera')) return 'opera'
+
+  return 'unknown'
+}
+
+/**
+ * 检测操作系统
+ * @returns {string} 操作系统类型
+ */
+export const detectOS = () => {
+  const userAgent = navigator.userAgent.toLowerCase()
+
+  if (userAgent.includes('windows')) return 'windows'
+  if (userAgent.includes('mac')) return 'macos'
+  if (userAgent.includes('linux')) return 'linux'
+  if (userAgent.includes('android')) return 'android'
+  if (userAgent.includes('ios')) return 'ios'
+
+  return 'unknown'
+}

web/src/utils/dialog.js

@@ -1,51 +1,58 @@
 /**
  * Util lib functions
  */
-import {closeToast, showConfirmDialog, showFailToast, showLoadingToast, showSuccessToast, showToast} from "vant";
+import { isMobile } from '@/utils/libs'
-import {isMobile} from "@/utils/libs";
+import { ElMessage } from 'element-plus'
-import {ElMessage} from "element-plus";
+import {
+  closeToast,
+  showConfirmDialog,
+  showFailToast,
+  showLoadingToast,
+  showSuccessToast,
+  showToast,
+} from 'vant'
 
 export function showLoginDialog(router) {
   showConfirmDialog({
-    title: "登录",
+    title: '登录',
-    message: "此操作需要登录才能进行，前往登录？",
+    message: '此操作需要登录才能进行，前往登录？',
   })
-      .then(() => {
+    .then(() => {
-        router.push("/login");
+      router.push('/login')
-      })
+    })
-      .catch(() => {
+    .catch(() => {
-        // on cancel
+      // on cancel
-    });
+    })
 }
 
 export function showMessageOK(message) {
   if (isMobile()) {
-    showSuccessToast(message);
+    showSuccessToast(message)
   } else {
-    ElMessage.success(message);
+    ElMessage.success(message)
   }
 }
 
 export function showMessageInfo(message) {
   if (isMobile()) {
-    showToast(message);
+    showToast(message)
   } else {
-    ElMessage.info(message);
+    ElMessage.info(message)
   }
 }
 
 export function showMessageError(message) {
   if (isMobile()) {
-    showFailToast({message: message, duration: 0});
+    showFailToast({ message: message })
   } else {
-    ElMessage.error(message);
+    ElMessage.error(message)
   }
 }
 
-export function showLoading(message = "正在处理...") {
+export function showLoading(message = '正在处理...') {
-  showLoadingToast({message: message, forbidClick: true, duration: 0});
+  showLoadingToast({ message: message, forbidClick: true, duration: 0 })
 }
 
 export function closeLoading() {
-  closeToast();
+  closeToast()
 }

web/src/views/Login.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="login-page">
+    <div class="login-container">
+      <div class="login-card">
+        <div class="login-header">
+          <h1 class="login-title">欢迎登录</h1>
+          <p class="login-subtitle">登录您的账户以继续使用服务</p>
+        </div>
+
+        <div class="login-content">
+          <login-dialog
+            :show="true"
+            @hide="handleLoginHide"
+            @success="handleLoginSuccess"
+            ref="loginDialogRef"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import LoginDialog from '@/components/LoginDialog.vue'
+import { getCurrentDeviceRedirectPath } from '@/utils/device'
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const loginDialogRef = ref(null)
+
+// 处理登录弹窗隐藏
+const handleLoginHide = () => {
+  const redirectPath = getCurrentDeviceRedirectPath()
+  router.push(redirectPath)
+}
+
+// 处理登录成功
+const handleLoginSuccess = () => {
+  const redirectPath = getCurrentDeviceRedirectPath()
+  router.push(redirectPath)
+}
+
+onMounted(() => {
+  // 确保默认显示登录状态
+  if (loginDialogRef.value) {
+    loginDialogRef.value.login = true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.login-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+
+  .login-container {
+    width: 100%;
+    max-width: 480px;
+
+    .login-card {
+      background: var(--el-bg-color);
+      border-radius: 16px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+
+      .login-header {
+        background: linear-gradient(135deg, var(--el-color-primary), #8b5cf6);
+        color: white;
+        padding: 40px 30px;
+        text-align: center;
+
+        .login-title {
+          font-size: 28px;
+          font-weight: 600;
+          margin: 0 0 8px 0;
+        }
+
+        .login-subtitle {
+          font-size: 16px;
+          opacity: 0.9;
+          margin: 0;
+        }
+      }
+
+      .login-content {
+        padding: 40px 30px;
+      }
+    }
+  }
+}
+
+// 深色主题适配
+:deep(.van-theme-dark) {
+  .login-page {
+    .login-card {
+      background: var(--el-bg-color-overlay);
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+
+// 移动端响应式设计
+@media (max-width: 768px) {
+  .login-page {
+    padding: 16px;
+    background: var(--van-background);
+
+    .login-container {
+      max-width: 100%;
+
+      .login-card {
+        border-radius: 20px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+
+        .login-header {
+          padding: 30px 20px;
+          background: linear-gradient(135deg, var(--van-primary-color), #8b5cf6);
+
+          .login-title {
+            font-size: 24px;
+          }
+
+          .login-subtitle {
+            font-size: 14px;
+          }
+        }
+
+        .login-content {
+          padding: 30px 20px;
+        }
+      }
+    }
+  }
+}
+
+// 小屏幕移动端优化
+@media (max-width: 375px) {
+  .login-page {
+    padding: 12px;
+
+    .login-container {
+      .login-card {
+        .login-header {
+          padding: 24px 16px;
+
+          .login-title {
+            font-size: 22px;
+          }
+
+          .login-subtitle {
+            font-size: 13px;
+          }
+        }
+
+        .login-content {
+          padding: 24px 16px;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/Member.vue

@@ -19,11 +19,6 @@
                 <i class="iconfont icon-mobile"></i> 绑定手机
               </el-button>
             </el-col>
-            <el-col :span="24">
-              <el-button class="profile-btn third" @click="showThirdLoginDialog = true">
-                <i class="iconfont icon-login"></i> 第三方登录
-              </el-button>
-            </el-col>
             <el-col :span="24">
               <el-button class="profile-btn password" @click="showPasswordDialog = true">
                 <i class="iconfont icon-password"></i> 修改密码
@@ -40,11 +35,11 @@
         <div class="profile-bg"></div>
 
         <div class="product-box">
-          <div class="info" v-if="orderPayInfoText !== ''">
+          <!-- <div class="info" v-if="orderPayInfoText !== ''">
             <el-alert type="success" show-icon :closable="false" effect="dark">
               <strong>说明:</strong> {{ vipInfoText }}
             </el-alert>
-          </div>
+          </div> -->
 
           <el-row v-if="list.length > 0" :gutter="20" class="list-box">
             <el-col v-for="item in list" :key="item" :span="6">
@@ -124,18 +119,39 @@
         :show="showPasswordDialog"
         @hide="showPasswordDialog = false"
       />
-      <bind-mobile
+
-        v-if="isLogin"
+      <!-- 绑定手机弹窗 -->
-        :show="showBindMobileDialog"
+      <el-dialog
-        @hide="showBindMobileDialog = false"
+        v-model="showBindMobileDialog"
-      />
+        title="绑定手机"
-      <bind-email v-if="isLogin" :show="showBindEmailDialog" @hide="showBindEmailDialog = false" />
+        width="400px"
-      <third-login
+        :close-on-click-modal="true"
-        v-if="isLogin"
+        @close="showBindMobileDialog = false"
-        :show="showThirdLoginDialog"
+      >
-        @hide="showThirdLoginDialog = false"
+        <bind-mobile @hide="showBindMobileDialog = false" />
-      />
+      </el-dialog>
-      <redeem-verify v-if="isLogin" :show="showRedeemVerifyDialog" @hide="redeemCallback" />
+
+      <!-- 绑定邮箱弹窗 -->
+      <el-dialog
+        v-model="showBindEmailDialog"
+        title="绑定邮箱"
+        width="400px"
+        :close-on-click-modal="true"
+        @close="showBindEmailDialog = false"
+      >
+        <bind-email @hide="showBindEmailDialog = false" />
+      </el-dialog>
+
+      <!-- 卡密兑换弹窗 -->
+      <el-dialog
+        v-model="showRedeemVerifyDialog"
+        title="卡密兑换"
+        width="450px"
+        :close-on-click-modal="true"
+        @close="showRedeemVerifyDialog = false"
+      >
+        <redeem-verify @hide="redeemCallback" />
+      </el-dialog>
     </div>
 
     <el-dialog
@@ -166,7 +182,6 @@ import BindEmail from '@/components/BindEmail.vue'
 import BindMobile from '@/components/BindMobile.vue'
 import PasswordDialog from '@/components/PasswordDialog.vue'
 import RedeemVerify from '@/components/RedeemVerify.vue'
-import ThirdLogin from '@/components/ThirdLogin.vue'
 import UserOrder from '@/components/UserOrder.vue'
 import { checkSession, getSystemInfo } from '@/store/cache'
 import { useSharedStore } from '@/store/sharedata'
@@ -183,7 +198,6 @@ const showPasswordDialog = ref(false)
 const showBindMobileDialog = ref(false)
 const showBindEmailDialog = ref(false)
 const showRedeemVerifyDialog = ref(false)
-const showThirdLoginDialog = ref(false)
 const user = ref(null)
 const isLogin = ref(false)
 const orderTimeout = ref(1800)
@@ -284,8 +298,12 @@ const pay = (product, payWay) => {
     })
 }
 
-const redeemCallback = () => {
+const redeemCallback = (success) => {
   showRedeemVerifyDialog.value = false
+
+  if (success) {
+    userOrderKey.value += 1
+  }
 }
 
 const payCallback = (success) => {

web/src/views/Register.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="register-page">
+    <div class="register-container">
+      <div class="register-card">
+        <div class="register-header">
+          <h1 class="register-title">用户注册</h1>
+          <p class="register-subtitle">创建您的账户以开始使用服务</p>
+        </div>
+
+        <div class="register-content">
+          <login-dialog
+            :show="true"
+            @hide="handleRegisterHide"
+            @success="handleRegisterSuccess"
+            ref="loginDialogRef"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import LoginDialog from '@/components/LoginDialog.vue'
+import { getCurrentDeviceRedirectPath } from '@/utils/device'
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const loginDialogRef = ref(null)
+
+// 处理注册弹窗隐藏
+const handleRegisterHide = () => {
+  const redirectPath = getCurrentDeviceRedirectPath()
+  router.push(redirectPath)
+}
+
+// 处理注册成功
+const handleRegisterSuccess = () => {
+  const redirectPath = getCurrentDeviceRedirectPath()
+  router.push(redirectPath)
+}
+
+onMounted(() => {
+  // 确保默认显示注册状态
+  if (loginDialogRef.value) {
+    loginDialogRef.value.login = false
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.register-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+
+  .register-container {
+    width: 100%;
+    max-width: 480px;
+
+    .register-card {
+      background: var(--el-bg-color);
+      border-radius: 16px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+
+      .register-header {
+        background: linear-gradient(135deg, #10b981, #059669);
+        color: white;
+        padding: 40px 30px;
+        text-align: center;
+
+        .register-title {
+          font-size: 28px;
+          font-weight: 600;
+          margin: 0 0 8px 0;
+        }
+
+        .register-subtitle {
+          font-size: 16px;
+          opacity: 0.9;
+          margin: 0;
+        }
+      }
+
+      .register-content {
+        padding: 40px 30px;
+      }
+    }
+  }
+}
+
+// 深色主题适配
+:deep(.van-theme-dark) {
+  .register-page {
+    .register-card {
+      background: var(--el-bg-color-overlay);
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+
+// 移动端响应式设计
+@media (max-width: 768px) {
+  .register-page {
+    padding: 16px;
+    background: var(--van-background);
+
+    .register-container {
+      max-width: 100%;
+
+      .register-card {
+        border-radius: 20px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+
+        .register-header {
+          padding: 30px 20px;
+          background: linear-gradient(135deg, #10b981, #059669);
+
+          .register-title {
+            font-size: 24px;
+          }
+
+          .register-subtitle {
+            font-size: 14px;
+          }
+        }
+
+        .register-content {
+          padding: 30px 20px;
+        }
+      }
+    }
+  }
+}
+
+// 小屏幕移动端优化
+@media (max-width: 375px) {
+  .register-page {
+    padding: 12px;
+
+    .register-container {
+      .register-card {
+        .register-header {
+          padding: 24px 16px;
+
+          .register-title {
+            font-size: 22px;
+          }
+
+          .register-subtitle {
+            font-size: 13px;
+          }
+        }
+
+        .register-content {
+          padding: 24px 16px;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/mobile/Index.vue

@@ -168,11 +168,11 @@ const features = ref([
     url: '/mobile/create?tab=jimeng',
   },
   {
-    key: 'xmind',
+    key: 'agent',
-    name: '思维导图',
+    name: '智能体',
-    icon: 'icon-xmind',
+    icon: 'icon-app',
     color: '#3B82F6',
-    url: '/mobile/tools?tab=xmind',
+    url: '/mobile/apps',
   },
   {
     key: 'imgWall',

web/src/views/mobile/Invite.vue

@@ -4,7 +4,7 @@
       <!-- 邀请头图 -->
       <div class="invite-header">
         <div class="header-bg">
-          <img src="/images/invite-bg.png" alt="邀请背景" @error="onImageError" />
+          <img src="/images/logo.png" alt="邀请背景" @error="onImageError" />
         </div>
         <div class="header-content">
           <h2 class="invite-title">邀请好友获得奖励</h2>
@@ -383,7 +383,7 @@ const shareToFriends = () => {
 
 // 图片加载错误处理
 const onImageError = (e) => {
-  e.target.src = '/images/default-bg.png'
+  e.target.src = '/images/img-holder.png'
 }
 </script>
 

web/src/views/mobile/Member.vue

@@ -22,23 +22,23 @@
             <div class="stat-label">剩余算力</div>
           </div>
           <div class="stat-item">
-            <div class="stat-value">{{ vipDays }}</div>
+            <div class="stat-value">{{ userInfo.invite_count || 0 }}</div>
-            <div class="stat-label">VIP天数</div>
+            <div class="stat-label">邀请人数</div>
           </div>
         </div>
       </div>
 
       <!-- 产品套餐 -->
       <div class="products-section">
-        <h3 class="section-title">会员套餐</h3>
+        <h3 class="section-title">充值套餐</h3>
-        <div class="info-alert" v-if="vipInfoText">
+        <!-- <div class="info-alert" v-if="vipInfoText">
           <van-notice-bar
             :text="vipInfoText"
             color="#1989fa"
             background="#ecf9ff"
             :scrollable="false"
           />
-        </div>
+        </div> -->
 
         <div class="products-grid" v-if="list.length > 0">
           <div v-for="item in list" :key="item.id" class="product-card">
@@ -98,7 +98,7 @@
       <!-- 卡密兑换 -->
       <div class="redeem-section" v-if="isLogin">
         <h3 class="section-title">卡密兑换</h3>
-        <van-cell-group inset>
+        <van-cell-group>
           <van-cell title="卡密兑换" is-link @click="showRedeemVerifyDialog = true">
             <template #icon>
               <i class="iconfont icon-redeem menu-icon"></i>
@@ -138,8 +138,19 @@
       </div>
     </van-dialog>
 
-    <!-- 组件弹窗 -->
+    <!-- 卡密兑换弹窗 -->
-    <redeem-verify v-if="isLogin" :show="showRedeemVerifyDialog" @hide="redeemCallback" />
+    <van-dialog
+      v-model:show="showRedeemVerifyDialog"
+      title="卡密兑换"
+      :show-cancel-button="false"
+      :show-confirm-button="false"
+      width="90%"
+      :close-on-click-overlay="true"
+    >
+      <div class="p-4">
+        <redeem-verify @hide="redeemCallback" />
+      </div>
+    </van-dialog>
   </div>
 </template>
 
@@ -224,7 +235,7 @@ const getPayIcon = (payType) => {
 const getPayButtonText = (payType) => {
   const texts = {
     alipay: '支付宝',
-    wechat: '微信支付',
+    wxpay: '微信支付',
     qqpay: 'QQ钱包',
     paypal: 'PayPal',
     jdpay: '京东支付',
@@ -340,13 +351,16 @@ const payCallback = (success) => {
 }
 
 // 卡密兑换回调
-const redeemCallback = () => {
+const redeemCallback = (success) => {
   showRedeemVerifyDialog.value = false
-  showSuccessToast('卡密兑换成功！')
+
-  // 刷新用户信息
+  if (success) {
-  checkSession().then((user) => {
+    showSuccessToast('卡密兑换成功！')
-    userInfo.value = user
+    // 刷新用户信息
-  })
+    checkSession().then((user) => {
+      userInfo.value = user
+    })
+  }
 }
 </script>
 
@@ -577,10 +591,8 @@ const redeemCallback = () => {
 
     .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);
       }
     }
   }

web/src/views/mobile/Profile.vue

@@ -4,17 +4,13 @@
       <div class="header-bg"></div>
       <div class="header-content">
         <div class="user-info" v-if="isLogin">
-          <div class="avatar-container" @click="showAvatarOptions = true">
+          <div class="avatar-container">
             <van-image :src="fileList[0].url" round width="80" height="80" />
-            <div class="avatar-badge">
-              <van-icon name="photograph" />
-            </div>
           </div>
           <div class="user-details">
             <h2 class="username">{{ form.nickname || form.username }}</h2>
             <div class="user-meta">
-              <van-tag type="primary" v-if="isVip">VIP会员</van-tag>
+              <van-tag type="info">剩余算力：{{ form.power || 0 }}</van-tag>
-              <van-tag type="default" v-else>普通用户</van-tag>
               <span class="user-id">ID: {{ form.id }}</span>
             </div>
           </div>
@@ -28,35 +24,11 @@
     </div>
 
     <div class="profile-content">
-      <!-- 用户状态卡片 -->
-      <div class="status-cards" v-if="isLogin">
-        <van-row :gutter="12">
-          <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>
-              </div>
-              <div class="card-value">{{ form.power || 0 }}</div>
-              <div class="card-label">剩余算力</div>
-            </div>
-          </van-col>
-          <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>
-              </div>
-              <div class="card-value">{{ inviteCount }}</div>
-              <div class="card-label">邀请好友</div>
-            </div>
-          </van-col>
-        </van-row>
-      </div>
-
       <!-- 快捷操作 -->
       <div class="quick-actions" v-if="isLogin">
         <h3 class="section-title">快捷操作</h3>
         <van-row :gutter="12">
-          <van-col :span="6">
+          <van-col :span="8">
             <div class="action-item" @click="router.push('/mobile/member')">
               <div class="action-icon recharge">
                 <i class="iconfont icon-vip"></i>
@@ -64,15 +36,7 @@
               <div class="action-label">会员中心</div>
             </div>
           </van-col>
-          <van-col :span="6">
+          <van-col :span="8">
-            <div class="action-item" @click="showPasswordDialog = true">
-              <div class="action-icon password">
-                <i class="iconfont icon-lock"></i>
-              </div>
-              <div class="action-label">改密码</div>
-            </div>
-          </van-col>
-          <van-col :span="6">
             <div class="action-item" @click="router.push('/mobile/invite')">
               <div class="action-icon share">
                 <i class="iconfont icon-share"></i>
@@ -80,10 +44,10 @@
               <div class="action-label">邀请</div>
             </div>
           </van-col>
-          <van-col :span="6">
+          <van-col :span="8">
             <div class="action-item" @click="showSettings = true">
               <div class="action-icon settings">
-                <i class="iconfont icon-setting"></i>
+                <i class="iconfont icon-config"></i>
               </div>
               <div class="action-label">设置</div>
             </div>
@@ -91,10 +55,10 @@
         </van-row>
       </div>
 
-      <!-- 账户管理 -->
+      <!-- 我的服务 -->
       <div class="menu-section" v-if="isLogin">
-        <h3 class="section-title">账户管理</h3>
+        <h3 class="section-title">我的服务</h3>
-        <van-cell-group inset>
+        <van-cell-group>
           <van-cell title="绑定邮箱" is-link @click="showBindEmailDialog = true">
             <template #icon>
               <i class="iconfont icon-email menu-icon"></i>
@@ -105,18 +69,11 @@
               <i class="iconfont icon-mobile menu-icon"></i>
             </template>
           </van-cell>
-          <van-cell title="第三方登录" is-link @click="showThirdLoginDialog = true">
+          <van-cell title="修改密码" is-link @click="showPasswordDialog = true">
             <template #icon>
-              <i class="iconfont icon-login menu-icon"></i>
+              <i class="iconfont icon-password menu-icon"></i>
             </template>
           </van-cell>
-        </van-cell-group>
-      </div>
-
-      <!-- 功能菜单 -->
-      <div class="menu-section">
-        <h3 class="section-title">我的服务</h3>
-        <van-cell-group inset>
           <van-cell
             title="消费记录"
             icon="notes-o"
@@ -124,40 +81,7 @@
             @click="router.push('/mobile/power-log')"
           >
             <template #icon>
-              <i class="iconfont icon-history menu-icon"></i>
+              <i class="iconfont icon-log menu-icon"></i>
-            </template>
-          </van-cell>
-          <van-cell
-            title="邀请好友"
-            icon="friends-o"
-            is-link
-            @click="router.push('/mobile/invite')"
-          >
-            <template #icon>
-              <i class="iconfont icon-user-plus menu-icon"></i>
-            </template>
-          </van-cell>
-          <van-cell title="聊天导出" icon="down" is-link @click="copyChatExportLink">
-            <template #icon>
-              <i class="iconfont icon-download menu-icon"></i>
-            </template>
-          </van-cell>
-        </van-cell-group>
-
-        <van-cell-group inset>
-          <van-cell title="帮助中心" icon="question-o" is-link @click="router.push('/mobile/help')">
-            <template #icon>
-              <i class="iconfont icon-help menu-icon"></i>
-            </template>
-          </van-cell>
-          <van-cell title="意见反馈" icon="chat-o" is-link @click="router.push('/mobile/feedback')">
-            <template #icon>
-              <i class="iconfont icon-message menu-icon"></i>
-            </template>
-          </van-cell>
-          <van-cell title="关于我们" icon="info-o" is-link @click="showAbout = true">
-            <template #icon>
-              <i class="iconfont icon-info menu-icon"></i>
             </template>
           </van-cell>
         </van-cell-group>
@@ -169,21 +93,11 @@
           退出登录
         </van-button>
       </div>
-
-      <!-- 版本信息 -->
-      <div class="version-info">
-        <p class="app-version">版本 v{{ appVersion }}</p>
-        <p class="copyright">© 2024 {{ title }}. All rights reserved.</p>
-      </div>
-
-      <!-- 底部安全间距 -->
-      <div class="bottom-safe-area"></div>
     </div>
 
     <!-- 修改密码弹窗 -->
     <van-dialog
-      :model-value="showPasswordDialog"
+      v-model:show="showPasswordDialog"
-      @update:model-value="showPasswordDialog = $event"
       title="修改密码"
       show-cancel-button
       @confirm="updatePass"
@@ -223,11 +137,7 @@
     </van-dialog>
 
     <!-- 设置弹窗 -->
-    <van-action-sheet
+    <van-action-sheet v-model:show="showSettings" title="设置">
-      :model-value="showSettings"
-      @update:model-value="showSettings = $event"
-      title="设置"
-    >
       <div class="settings-content">
         <van-cell-group>
           <van-cell title="暗黑主题">
@@ -243,88 +153,58 @@
               <van-switch v-model="stream" @change="(val) => store.setChatStream(val)" />
             </template>
           </van-cell>
-          <van-cell title="消息通知">
-            <template #right-icon>
-              <van-switch v-model="notifications" />
-            </template>
-          </van-cell>
-          <van-cell title="自动保存">
-            <template #right-icon>
-              <van-switch v-model="autoSave" />
-            </template>
-          </van-cell>
         </van-cell-group>
       </div>
     </van-action-sheet>
 
-    <!-- 头像选择弹窗 -->
+    <!-- 绑定邮箱弹窗 -->
-    <van-action-sheet
-      :model-value="showAvatarOptions"
-      @update:model-value="showAvatarOptions = $event"
-      title="更换头像"
-    >
-      <div class="avatar-options">
-        <van-cell title="拍照" icon="photograph" @click="selectAvatar('camera')" />
-        <van-cell title="从相册选择" icon="photo-o" @click="selectAvatar('album')" />
-        <van-cell title="默认头像" icon="user-o" @click="selectAvatar('default')" />
-      </div>
-    </van-action-sheet>
-
-    <!-- 关于我们弹窗 -->
     <van-dialog
-      :model-value="showAbout"
+      v-model:show="showBindEmailDialog"
-      @update:model-value="showAbout = $event"
+      title="绑定邮箱"
-      title="关于我们"
       :show-cancel-button="false"
+      :show-confirm-button="false"
+      width="90%"
+      :close-on-click-overlay="true"
     >
-      <div class="about-content">
+      <div class="p-4">
-        <div class="about-logo">
+        <bind-email @hide="showBindEmailDialog = false" />
-          <img src="/images/logo.png" alt="Logo" />
-        </div>
-        <h3>{{ title }}</h3>
-        <p class="about-desc">
-          专业的AI创作平台，提供对话、绘画、音乐、视频等多种AI服务，让创作更简单、更高效。
-        </p>
-        <div class="about-info">
-          <p>版本：v{{ appVersion }}</p>
-          <p>更新时间：2024-01-01</p>
-        </div>
       </div>
     </van-dialog>
 
-    <!-- 组件弹窗 -->
+    <!-- 绑定手机弹窗 -->
-    <bind-email v-if="isLogin" :show="showBindEmailDialog" @hide="showBindEmailDialog = false" />
+    <van-dialog
-    <bind-mobile v-if="isLogin" :show="showBindMobileDialog" @hide="showBindMobileDialog = false" />
+      v-model:show="showBindMobileDialog"
-    <third-login v-if="isLogin" :show="showThirdLoginDialog" @hide="showThirdLoginDialog = false" />
+      title="绑定手机"
+      :show-cancel-button="false"
+      :show-confirm-button="false"
+      width="90%"
+      :close-on-click-overlay="true"
+    >
+      <div class="p-4">
+        <bind-mobile @hide="showBindMobileDialog = false" />
+      </div>
+    </van-dialog>
 
     <!-- 退出登录确认 -->
     <van-dialog
-      :model-value="showLogoutConfirm"
+      v-model:show="showLogoutConfirm"
-      @update:model-value="showLogoutConfirm = $event"
       title="退出登录"
       message="确定要退出登录吗？"
       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, showSuccessToast } from 'vant'
-import { showFailToast, showLoadingToast, showNotify, showSuccessToast } from 'vant'
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -351,9 +231,6 @@ 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)
 const store = useSharedStore()
 const stream = ref(store.chatStream)
@@ -361,15 +238,6 @@ 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)
-const inviteCount = ref(0)
-const passwordForm = ref()
-
 // 密码相关
 const pass = ref({
   old: '',
@@ -407,21 +275,10 @@ onMounted(() => {
 
       // 获取用户详细信息
       fetchUserProfile()
-      fetchUserStats()
     })
     .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 })
-  })
 })
 
 // 获取用户详细信息
@@ -436,17 +293,6 @@ const fetchUserProfile = () => {
     })
 }
 
-// 获取用户统计信息
-const fetchUserStats = () => {
-  // 模拟数据，实际项目中应调用API
-  inviteCount.value = Math.floor(Math.random() * 20)
-}
-
-// 复制聊天导出链接
-const copyChatExportLink = () => {
-  document.getElementById('copy-chat-export-btn').click()
-}
-
 // 确认密码验证
 const validateConfirmPassword = (value) => {
   if (value !== pass.value.new) {
@@ -462,37 +308,18 @@ const resetPasswordForm = () => {
     new: '',
     renew: '',
   }
-  if (passwordForm.value) {
-    passwordForm.value.resetValidation()
-  }
 }
 
 // 提交修改密码
 const updatePass = () => {
-  if (!passwordForm.value) {
-    updatePasswordAPI()
-    return
-  }
-
-  passwordForm.value
-    .validate()
-    .then(() => {
-      updatePasswordAPI()
-    })
-    .catch((errors) => {
-      console.log('表单验证失败:', errors)
-    })
-}
-
-const updatePasswordAPI = () => {
   if (!pass.value.old) {
-    return showNotify({ type: 'danger', message: '请输入旧密码' })
+    return showFailToast('请输入旧密码')
   }
   if (!pass.value.new || pass.value.new.length < 8) {
-    return showNotify({ type: 'danger', message: '密码长度为8-16个字符' })
+    return showFailToast('密码长度为8-16个字符')
   }
   if (pass.value.renew !== pass.value.new) {
-    return showNotify({ type: 'danger', message: '两次输入密码不一致' })
+    return showFailToast('两次输入密码不一致')
   }
 
   showLoadingToast({
@@ -515,46 +342,6 @@ const updatePasswordAPI = () => {
     })
 }
 
-// 头像选择
-const selectAvatar = (type) => {
-  showAvatarOptions.value = false
-
-  switch (type) {
-    case 'camera':
-      // 调用相机
-      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-        showNotify({ type: 'primary', message: '正在启动相机...' })
-      } else {
-        showNotify({ type: 'warning', message: '您的设备不支持相机功能' })
-      }
-      break
-    case 'album':
-      // 从相册选择
-      const input = document.createElement('input')
-      input.type = 'file'
-      input.accept = 'image/*'
-      input.onchange = (e) => {
-        const file = e.target.files[0]
-        if (file) {
-          // 这里应该上传到服务器
-          const reader = new FileReader()
-          reader.onload = (e) => {
-            fileList.value[0].url = e.target.result
-            showSuccessToast('头像更新成功')
-          }
-          reader.readAsDataURL(file)
-        }
-      }
-      input.click()
-      break
-    case 'default':
-      // 使用默认头像
-      fileList.value[0].url = '/images/avatar/default.jpg'
-      showSuccessToast('已设置为默认头像')
-      break
-  }
-}
-
 // 退出登录
 const logout = function () {
   showLoadingToast({
@@ -590,9 +377,8 @@ const logout = function () {
 
 <style lang="scss" scoped>
 .profile-page {
-  min-height: 100vh;
+  min-height: calc(100vh - 60px);
   background: var(--van-background);
-  padding-bottom: 60px;
 
   .profile-header {
     position: relative;
@@ -628,22 +414,6 @@ const logout = function () {
           position: relative;
           display: inline-block;
           margin-bottom: 16px;
-          cursor: pointer;
-
-          .avatar-badge {
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            width: 24px;
-            height: 24px;
-            background: rgba(255, 255, 255, 0.9);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--van-primary-color);
-            font-size: 12px;
-          }
         }
 
         .user-details {
@@ -679,59 +449,6 @@ const logout = function () {
     z-index: 3;
     padding: 0 16px 20px;
 
-    .status-cards {
-      margin-bottom: 24px;
-
-      .status-card {
-        background: var(--van-cell-background);
-        border-radius: 12px;
-        padding: 16px;
-        text-align: center;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        cursor: pointer;
-        transition: all 0.3s ease;
-
-        &:active {
-          transform: scale(0.95);
-        }
-
-        .card-icon {
-          width: 48px;
-          height: 48px;
-          border-radius: 12px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin: 0 auto 8px;
-
-          &.power {
-            background: linear-gradient(135deg, #ff9500, #ff6b35);
-          }
-
-          &.invite {
-            background: linear-gradient(135deg, #1989fa, #0d7dff);
-          }
-
-          .iconfont {
-            font-size: 24px;
-            color: white;
-          }
-        }
-
-        .card-value {
-          font-size: 18px;
-          font-weight: 700;
-          color: var(--van-text-color);
-          margin-bottom: 4px;
-        }
-
-        .card-label {
-          font-size: 12px;
-          color: var(--van-gray-6);
-        }
-      }
-    }
-
     .quick-actions,
     .menu-section {
       margin-bottom: 24px;
@@ -773,10 +490,6 @@ const logout = function () {
             background: linear-gradient(135deg, #ffd700, #ffb300);
           }
 
-          &.password {
-            background: linear-gradient(135deg, #ee0a24, #d60a21);
-          }
-
           &.share {
             background: linear-gradient(135deg, #8b5cf6, #7c3aed);
           }
@@ -826,27 +539,6 @@ const logout = function () {
     .logout-section {
       margin-bottom: 24px;
     }
-
-    .version-info {
-      text-align: center;
-      padding: 20px 0;
-
-      .app-version,
-      .copyright {
-        font-size: 12px;
-        color: var(--van-gray-6);
-        margin: 0 0 4px 0;
-      }
-
-      .copyright {
-        margin: 0;
-      }
-    }
-
-    .bottom-safe-area {
-      height: 20px;
-      width: 100%;
-    }
   }
 
   // 弹窗样式
@@ -864,66 +556,11 @@ const logout = function () {
       }
     }
   }
-
-  .avatar-options {
-    padding: 0;
-
-    :deep(.van-cell) {
-      padding: 16px 20px;
-
-      .van-cell__title {
-        font-size: 15px;
-        font-weight: 500;
-      }
-    }
-  }
-
-  .about-content {
-    text-align: center;
-    padding: 20px;
-
-    .about-logo {
-      margin-bottom: 16px;
-
-      img {
-        width: 60px;
-        height: 60px;
-        border-radius: 12px;
-      }
-    }
-
-    h3 {
-      font-size: 20px;
-      font-weight: 600;
-      color: var(--van-text-color);
-      margin: 0 0 12px 0;
-    }
-
-    .about-desc {
-      font-size: 14px;
-      color: var(--van-gray-6);
-      line-height: 1.5;
-      margin: 0 0 20px 0;
-    }
-
-    .about-info {
-      p {
-        font-size: 13px;
-        color: var(--van-gray-7);
-        margin: 0 0 4px 0;
-
-        &:last-child {
-          margin: 0;
-        }
-      }
-    }
-  }
 }
 
 // 深色主题优化
 :deep(.van-theme-dark) {
   .profile-page {
-    .status-card,
     .action-item {
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     }
@@ -948,14 +585,6 @@ const logout = function () {
     .profile-content {
       padding: 0 12px 20px;
 
-      .status-cards .status-card {
-        padding: 12px;
-
-        .card-value {
-          font-size: 16px;
-        }
-      }
-
       .quick-actions .action-item {
         padding: 12px 6px;