From bb6e90d50a663d982a78e6d2b871dd5a682568b8 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Wed, 6 Aug 2025 09:57:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E9=82=80=E8=AF=B7=E9=A1=B5=E9=9D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/handler/invite_handler.go                 | 132 ++-
 api/handler/power_log_handler.go              |  44 +
 api/store/vo/invite_log.go                    |   1 +
 api/store/vo/invite_stats.go                  |   9 +
 api/store/vo/reward_rule.go                   |  10 +
 web/src/components/LoginDialog.vue            |  65 +-
 web/src/components/ui/CustomTabs.vue          | 221 ++++-
 web/src/main.js                               |   4 +
 web/src/router.js                             |  42 +-
 web/src/views/ImageMj.vue                     |   4 +-
 web/src/views/Invitation.vue                  |   2 +-
 web/src/views/Login.vue                       |  36 +
 web/src/views/LoginCallback.vue               | 148 ---
 web/src/views/Register.vue                    |  51 ++
 web/src/views/mobile/Apps.vue                 | 333 ++++---
 web/src/views/mobile/ChatSession.vue          |  78 +-
 web/src/views/mobile/Create.vue               | 247 +----
 web/src/views/mobile/Discover.vue             |  22 +-
 web/src/views/mobile/Feedback.vue             | 174 ----
 web/src/views/mobile/Help.vue                 | 855 ------------------
 web/src/views/mobile/Index.vue                |  14 +-
 web/src/views/mobile/Invite.vue               | 447 +++------
 web/src/views/mobile/Member.vue               | 132 +--
 web/src/views/mobile/PowerLog.vue             | 346 +++----
 web/src/views/mobile/Settings.vue             |   2 +-
 web/src/views/mobile/Tools.vue                | 756 ----------------
 web/src/views/mobile/components/AppCard.vue   | 110 +++
 .../views/mobile/components/EmptyState.vue    |  74 ++
 web/src/views/mobile/pages/ImageDall.vue      |   2 +-
 web/src/views/mobile/pages/ImageMj.vue        |   4 +-
 web/src/views/mobile/pages/ImageSd.vue        |   2 +-
 web/src/views/mobile/pages/ImgWall.vue        |  27 +-
 web/src/views/mobile/pages/JimengCreate.vue   | 693 ++++++++++++++
 web/src/views/mobile/pages/SunoCreate.vue     | 689 ++++++++++++++
 web/src/views/mobile/pages/VideoCreate.vue    | 792 ++++++++++++++++
 35 files changed, 3335 insertions(+), 3233 deletions(-)
 create mode 100644 api/store/vo/invite_stats.go
 create mode 100644 api/store/vo/reward_rule.go
 delete mode 100644 web/src/views/LoginCallback.vue
 delete mode 100644 web/src/views/mobile/Feedback.vue
 delete mode 100644 web/src/views/mobile/Help.vue
 delete mode 100644 web/src/views/mobile/Tools.vue
 create mode 100644 web/src/views/mobile/components/AppCard.vue
 create mode 100644 web/src/views/mobile/components/EmptyState.vue
 create mode 100644 web/src/views/mobile/pages/JimengCreate.vue
 create mode 100644 web/src/views/mobile/pages/SunoCreate.vue
 create mode 100644 web/src/views/mobile/pages/VideoCreate.vue

diff --git a/api/handler/invite_handler.go b/api/handler/invite_handler.go
index 40477fed..14c51c5c 100644
--- a/api/handler/invite_handler.go
+++ b/api/handler/invite_handler.go
@@ -8,14 +8,17 @@ package handler
 // * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
 import (
+	"fmt"
 	"geekai/core"
 	"geekai/store/model"
 	"geekai/store/vo"
 	"geekai/utils"
 	"geekai/utils/resp"
+	"strings"
+	"time"
+
 	"github.com/gin-gonic/gin"
 	"gorm.io/gorm"
-	"strings"
 )
 
 // InviteHandler 用户邀请
@@ -33,6 +36,8 @@ func (h *InviteHandler) RegisterRoutes() {
 	group.GET("code", h.Code)
 	group.GET("list", h.List)
 	group.GET("hits", h.Hits)
+	group.GET("stats", h.Stats)
+	group.GET("rules", h.Rules)
 }
 
 // Code 获取当前用户邀请码
@@ -73,21 +78,34 @@ func (h *InviteHandler) List(c *gin.Context) {
 	var total int64
 	session.Model(&model.InviteLog{}).Count(&total)
 	var items []model.InviteLog
-	var list = make([]vo.InviteLog, 0)
 	offset := (page - 1) * pageSize
-	res := session.Order("id DESC").Offset(offset).Limit(pageSize).Find(&items)
-	if res.Error == nil {
-		for _, item := range items {
-			var v vo.InviteLog
-			err := utils.CopyObject(item, &v)
-			if err == nil {
-				v.Id = item.Id
-				v.CreatedAt = item.CreatedAt.Unix()
-				list = append(list, v)
-			} else {
-				logger.Error(err)
-			}
+	err := session.Order("id DESC").Offset(offset).Limit(pageSize).Find(&items).Error
+	if err != nil {
+		resp.ERROR(c, err.Error())
+		return
+	}
+
+	userIds := make([]uint, 0)
+	for _, item := range items {
+		userIds = append(userIds, item.UserId)
+	}
+	userMap := make(map[uint]model.User)
+	var users []model.User
+	h.DB.Model(&model.User{}).Where("id IN (?)", userIds).Find(&users)
+	for _, user := range users {
+		userMap[user.Id] = user
+	}
+
+	var list = make([]vo.InviteLog, 0)
+	for _, item := range items {
+		var v vo.InviteLog
+		err := utils.CopyObject(item, &v)
+		if err != nil {
+			continue
 		}
+		v.CreatedAt = item.CreatedAt.Unix()
+		v.Avatar = userMap[item.UserId].Avatar
+		list = append(list, v)
 	}
 	resp.SUCCESS(c, vo.NewPage(total, page, pageSize, list))
 }
@@ -98,3 +116,89 @@ func (h *InviteHandler) Hits(c *gin.Context) {
 	h.DB.Model(&model.InviteCode{}).Where("code = ?", code).UpdateColumn("hits", gorm.Expr("hits + ?", 1))
 	resp.SUCCESS(c)
 }
+
+// Stats 获取邀请统计
+func (h *InviteHandler) Stats(c *gin.Context) {
+	userId := h.GetLoginUserId(c)
+
+	// 获取邀请码
+	var inviteCode model.InviteCode
+	res := h.DB.Where("user_id = ?", userId).First(&inviteCode)
+	if res.Error != nil {
+		resp.ERROR(c, "邀请码不存在")
+		return
+	}
+
+	// 统计累计邀请数
+	var totalInvite int64
+	h.DB.Model(&model.InviteLog{}).Where("inviter_id = ?", userId).Count(&totalInvite)
+
+	// 统计今日邀请数
+	today := time.Now().Format("2006-01-02")
+	var todayInvite int64
+	h.DB.Model(&model.InviteLog{}).Where("inviter_id = ? AND DATE(created_at) = ?", userId, today).Count(&todayInvite)
+
+	// 获取系统配置中的邀请奖励
+	var config model.Config
+	var invitePower int = 200 // 默认值
+	if h.DB.Where("name = ?", "system").First(&config).Error == nil {
+		var configMap map[string]any
+		if utils.JsonDecode(config.Value, &configMap) == nil {
+			if power, ok := configMap["invite_power"].(float64); ok {
+				invitePower = int(power)
+			}
+		}
+	}
+
+	// 计算获得奖励总数
+	rewardTotal := int(totalInvite) * invitePower
+
+	// 构建邀请链接
+	inviteLink := fmt.Sprintf("%s/register?invite=%s", h.App.Config.StaticUrl, inviteCode.Code)
+
+	stats := vo.InviteStats{
+		InviteCount: int(totalInvite),
+		RewardTotal: rewardTotal,
+		TodayInvite: int(todayInvite),
+		InviteCode:  inviteCode.Code,
+		InviteLink:  inviteLink,
+	}
+
+	resp.SUCCESS(c, stats)
+}
+
+// Rules 获取奖励规则
+func (h *InviteHandler) Rules(c *gin.Context) {
+	// 获取系统配置中的邀请奖励
+	var config model.Config
+	var invitePower int = 200 // 默认值
+	if h.DB.Where("name = ?", "system").First(&config).Error == nil {
+		var configMap map[string]interface{}
+		if utils.JsonDecode(config.Value, &configMap) == nil {
+			if power, ok := configMap["invite_power"].(float64); ok {
+				invitePower = int(power)
+			}
+		}
+	}
+
+	rules := []vo.RewardRule{
+		{
+			Id:     1,
+			Title:  "好友注册",
+			Desc:   "好友通过邀请链接成功注册",
+			Icon:   "icon-user-fill",
+			Color:  "#1989fa",
+			Reward: invitePower,
+		},
+		{
+			Id:     2,
+			Title:  "好友首次充值",
+			Desc:   "好友首次充值任意金额",
+			Icon:   "icon-money",
+			Color:  "#07c160",
+			Reward: invitePower * 2, // 假设首次充值奖励是注册奖励的2倍
+		},
+	}
+
+	resp.SUCCESS(c, rules)
+}
diff --git a/api/handler/power_log_handler.go b/api/handler/power_log_handler.go
index d4c1f418..a74389fd 100644
--- a/api/handler/power_log_handler.go
+++ b/api/handler/power_log_handler.go
@@ -14,6 +14,7 @@ import (
 	"geekai/store/vo"
 	"geekai/utils"
 	"geekai/utils/resp"
+	"time"
 
 	"github.com/gin-gonic/gin"
 	"gorm.io/gorm"
@@ -31,6 +32,7 @@ func NewPowerLogHandler(app *core.AppServer, db *gorm.DB) *PowerLogHandler {
 func (h *PowerLogHandler) RegisterRoutes() {
 	group := h.App.Engine.Group("/api/powerLog/")
 	group.POST("list", h.List)
+	group.GET("stats", h.Stats)
 }
 
 func (h *PowerLogHandler) List(c *gin.Context) {
@@ -78,3 +80,45 @@ func (h *PowerLogHandler) List(c *gin.Context) {
 	}
 	resp.SUCCESS(c, vo.NewPage(total, data.Page, data.PageSize, list))
 }
+
+// Stats 获取用户算力统计
+func (h *PowerLogHandler) Stats(c *gin.Context) {
+	userId := h.GetLoginUserId(c)
+	if userId == 0 {
+		resp.NotAuth(c)
+		return
+	}
+
+	// 获取用户信息（包含余额）
+	var user model.User
+	if err := h.DB.Where("id", userId).First(&user).Error; err != nil {
+		resp.ERROR(c, "用户不存在")
+		return
+	}
+
+	// 计算总消费（所有支出记录）
+	var totalConsume int64
+	h.DB.Model(&model.PowerLog{}).
+		Where("user_id", userId).
+		Where("mark", types.PowerSub).
+		Select("COALESCE(SUM(amount), 0)").
+		Scan(&totalConsume)
+
+	// 计算今日消费
+	today := time.Now().Format("2006-01-02")
+	var todayConsume int64
+	h.DB.Model(&model.PowerLog{}).
+		Where("user_id", userId).
+		Where("mark", types.PowerSub).
+		Where("DATE(created_at) = ?", today).
+		Select("COALESCE(SUM(amount), 0)").
+		Scan(&todayConsume)
+
+	stats := map[string]interface{}{
+		"total":   totalConsume,
+		"today":   todayConsume,
+		"balance": user.Power,
+	}
+
+	resp.SUCCESS(c, stats)
+}
diff --git a/api/store/vo/invite_log.go b/api/store/vo/invite_log.go
index 3be80c32..4a17f6d3 100644
--- a/api/store/vo/invite_log.go
+++ b/api/store/vo/invite_log.go
@@ -5,6 +5,7 @@ type InviteLog struct {
 	InviterId  uint   `json:"inviter_id"`
 	UserId     uint   `json:"user_id"`
 	Username   string `json:"username"`
+	Avatar     string `json:"avatar"`
 	InviteCode string `json:"invite_code"`
 	Remark     string `json:"remark"`
 	CreatedAt  int64  `json:"created_at"`
diff --git a/api/store/vo/invite_stats.go b/api/store/vo/invite_stats.go
new file mode 100644
index 00000000..ce372c3c
--- /dev/null
+++ b/api/store/vo/invite_stats.go
@@ -0,0 +1,9 @@
+package vo
+
+type InviteStats struct {
+	InviteCount int    `json:"invite_count"` // 累计邀请数
+	RewardTotal int    `json:"reward_total"` // 获得奖励总数
+	TodayInvite int    `json:"today_invite"` // 今日邀请数
+	InviteCode  string `json:"invite_code"`  // 邀请码
+	InviteLink  string `json:"invite_link"`  // 邀请链接
+}
diff --git a/api/store/vo/reward_rule.go b/api/store/vo/reward_rule.go
new file mode 100644
index 00000000..b932c3a4
--- /dev/null
+++ b/api/store/vo/reward_rule.go
@@ -0,0 +1,10 @@
+package vo
+
+type RewardRule struct {
+	Id     int    `json:"id"`     // 规则ID
+	Title  string `json:"title"`  // 规则标题
+	Desc   string `json:"desc"`   // 规则描述
+	Icon   string `json:"icon"`   // 图标类名
+	Color  string `json:"color"`  // 图标颜色
+	Reward int    `json:"reward"` // 奖励算力
+}
diff --git a/web/src/components/LoginDialog.vue b/web/src/components/LoginDialog.vue
index 2c705920..e183895a 100644
--- a/web/src/components/LoginDialog.vue
+++ b/web/src/components/LoginDialog.vue
@@ -46,24 +46,6 @@
               >忘记密码？</el-button
             >
           </div>
-          <div v-if="wechatLoginURL !== ''">
-            <el-divider>
-              <div class="text-center">其他登录方式</div>
-            </el-divider>
-            <div class="c-login flex justify-center">
-              <div class="p-2 w-full">
-                <a :href="wechatLoginURL">
-                  <el-button
-                    type="success"
-                    class="w-full"
-                    size="large"
-                    @click="setRoute(router.currentRoute.value.path)"
-                    ><i class="iconfont icon-wechat mr-2"></i> 微信登录
-                  </el-button>
-                </a>
-              </div>
-            </div>
-          </div>
         </div>
       </el-form>
     </div>
@@ -265,6 +247,14 @@ import { useRouter } from 'vue-router'
 // eslint-disable-next-line no-undef
 const props = defineProps({
   show: Boolean,
+  active: {
+    type: String,
+    default: 'login',
+  },
+  inviteCode: {
+    type: String,
+    default: '',
+  },
 })
 const showDialog = ref(false)
 watch(
@@ -274,7 +264,7 @@ watch(
   }
 )
 
-const login = ref(true)
+const login = ref(props.active === 'login')
 const data = ref({
   username: import.meta.env.VITE_USER,
   password: import.meta.env.VITE_PASS,
@@ -282,13 +272,13 @@ const data = ref({
   email: '',
   repass: '',
   code: '',
-  invite_code: '',
+  invite_code: props.inviteCode,
 })
 const enableMobile = ref(false)
 const enableEmail = ref(false)
 const enableUser = ref(false)
 const enableRegister = ref(true)
-const wechatLoginURL = ref('')
+
 const activeName = ref('')
 const wxImg = ref('/images/wx.png')
 const captchaRef = ref(null)
@@ -301,15 +291,6 @@ const router = useRouter()
 const store = useSharedStore()
 
 onMounted(() => {
-  const returnURL = `${location.protocol}//${location.host}/login/callback?action=login`
-  httpGet('/api/user/clogin?return_url=' + returnURL)
-    .then((res) => {
-      wechatLoginURL.value = res.data.url
-    })
-    .catch((e) => {
-      console.log(e.message)
-    })
-
   getSystemInfo()
     .then((res) => {
       if (res.data) {
@@ -472,30 +453,6 @@ const doRegister = (verifyData) => {
       }
     }
 
-    .c-login {
-      display: flex;
-      .text {
-        font-size: 16px;
-        color: #a1a1a1;
-        display: flex;
-        align-items: center;
-      }
-      .login-type {
-        display: flex;
-        justify-content: center;
-
-        .iconfont {
-          font-size: 18px;
-          background: #e9f1f6;
-          padding: 8px;
-          border-radius: 50%;
-        }
-        .iconfont.icon-wechat {
-          color: #0bc15f;
-        }
-      }
-    }
-
     .text {
       color: var(--el-text-color-primary);
     }
diff --git a/web/src/components/ui/CustomTabs.vue b/web/src/components/ui/CustomTabs.vue
index a34b0636..11d7c813 100644
--- a/web/src/components/ui/CustomTabs.vue
+++ b/web/src/components/ui/CustomTabs.vue
@@ -1,12 +1,61 @@
 <template>
   <div class="w-full">
-    <div class="relative bg-gray-100 rounded-lg py-1 mb-2.5 overflow-hidden" ref="tabsHeader">
-      <div class="flex whitespace-nowrap overflow-x-auto scrollbar-hide" ref="tabsContainer">
+    <div class="relative bg-gray-100 rounded-lg py-1.5 mb-3 px-2 overflow-hidden" ref="tabsHeader">
+      <!-- 左滑动指示器 -->
+      <div
+        v-show="canScrollLeft"
+        class="absolute left-1 top-1/2 -translate-y-1/2 z-30 w-6 h-6 bg-white/95 backdrop-blur-sm rounded-full shadow-sm border border-gray-200/50 flex items-center justify-center cursor-pointer hover:bg-white hover:shadow-md hover:scale-105 transition-all duration-200 group"
+        @click="scrollLeft"
+      >
+        <svg
+          class="w-3 h-3 text-gray-500 group-hover:text-purple-600 transition-colors duration-200"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2.5"
+            d="M15 19l-7-7 7-7"
+          ></path>
+        </svg>
+      </div>
+
+      <!-- 右滑动指示器 -->
+      <div
+        v-show="canScrollRight"
+        class="absolute right-1 top-1/2 -translate-y-1/2 z-30 w-6 h-6 bg-white/95 backdrop-blur-sm rounded-full shadow-sm border border-gray-200/50 flex items-center justify-center cursor-pointer hover:bg-white hover:shadow-md hover:scale-105 transition-all duration-200 group"
+        @click="scrollRight"
+      >
+        <svg
+          class="w-3 h-3 text-gray-500 group-hover:text-purple-600 transition-colors duration-200"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2.5"
+            d="M9 5l7 7-7 7"
+          ></path>
+        </svg>
+      </div>
+
+      <div
+        class="flex whitespace-nowrap overflow-x-auto scrollbar-hide"
+        ref="tabsContainer"
+        @scroll="checkScrollPosition"
+      >
         <div
-          class="flex-shrink-0 text-center py-1.5 px-3 font-medium text-gray-700 cursor-pointer transition-colors duration-300 rounded-md relative z-20 hover:text-purple-600"
+          class="flex-shrink-0 text-center py-1 px-2 font-medium text-gray-700 cursor-pointer transition-all duration-300 rounded-md relative z-20 hover:text-purple-600"
           v-for="(tab, index) in panes"
           :key="tab.name"
-          :class="{ '!text-purple-600': modelValue === tab.name }"
+          :class="{
+            '!text-purple-600 bg-white shadow-sm': modelValue === tab.name,
+            'hover:bg-gray-50': modelValue !== tab.name,
+          }"
           @click="handleTabClick(tab.name, index)"
           ref="tabItems"
         >
@@ -16,11 +65,6 @@
           </template>
         </div>
       </div>
-      <div
-        class="absolute top-1 bottom-1 bg-white rounded-md shadow-sm transition-all duration-300 ease-out z-10"
-        :style="indicatorStyle"
-        ref="indicator"
-      ></div>
     </div>
     <div>
       <slot></slot>
@@ -43,13 +87,11 @@ const emit = defineEmits(['update:modelValue', 'tab-click'])
 const tabsHeader = ref(null)
 const tabsContainer = ref(null)
 const tabItems = ref([])
-const indicator = ref(null)
 const panes = ref([])
 
-const indicatorStyle = ref({
-  transform: 'translateX(0px)',
-  width: '0px',
-})
+// 滑动状态
+const canScrollLeft = ref(false)
+const canScrollRight = ref(false)
 
 // 提供当前激活的 tab 给子组件
 provide(
@@ -70,50 +112,151 @@ provide('registerPane', (pane) => {
   }
 })
 
+// 检查滑动位置状态
+const checkScrollPosition = () => {
+  if (!tabsContainer.value) return
+
+  const container = tabsContainer.value
+  canScrollLeft.value = container.scrollLeft > 0
+  canScrollRight.value = container.scrollLeft < container.scrollWidth - container.clientWidth
+}
+
+// 向左滑动
+const scrollLeft = () => {
+  if (!tabsContainer.value) return
+
+  const container = tabsContainer.value
+  const scrollAmount = Math.min(200, container.scrollLeft) // 每次滑动200px或剩余距离
+
+  container.scrollTo({
+    left: container.scrollLeft - scrollAmount,
+    behavior: 'smooth',
+  })
+}
+
+// 向右滑动
+const scrollRight = () => {
+  if (!tabsContainer.value) return
+
+  const container = tabsContainer.value
+  const maxScroll = container.scrollWidth - container.clientWidth
+  const scrollAmount = Math.min(200, maxScroll - container.scrollLeft) // 每次滑动200px或剩余距离
+
+  container.scrollTo({
+    left: container.scrollLeft + scrollAmount,
+    behavior: 'smooth',
+  })
+}
+
 const handleTabClick = (tabName, index) => {
   emit('update:modelValue', tabName)
   emit('tab-click', tabName, index)
-  updateIndicator(index)
+  scrollToTab(index)
 }
 
-const updateIndicator = async (activeIndex) => {
+// 简化后的滚动到指定tab的函数
+const scrollToTab = async (activeIndex) => {
   await nextTick()
-  if (tabItems.value && tabItems.value.length > 0 && tabsHeader.value) {
-    const activeTab = tabItems.value[activeIndex]
-    if (activeTab) {
-      const tabRect = activeTab.getBoundingClientRect()
-      const containerRect = tabsHeader.value.getBoundingClientRect()
-
-      const leftPosition = tabRect.left - containerRect.left
-      const tabWidth = tabRect.width
-
-      indicatorStyle.value = {
-        transform: `translateX(${leftPosition}px)`,
-        width: `${tabWidth}px`,
-      }
-    }
+  if (!tabsContainer.value || !tabItems.value || tabItems.value.length === 0) {
+    return
   }
+
+  const activeTab = tabItems.value[activeIndex]
+  if (!activeTab) {
+    return
+  }
+
+  const container = tabsContainer.value
+  const tabRect = activeTab.getBoundingClientRect()
+  const containerRect = container.getBoundingClientRect()
+
+  // 计算tab相对于容器的位置
+  const tabLeft = tabRect.left - containerRect.left
+  const tabRight = tabLeft + tabRect.width
+  const containerWidth = containerRect.width
+
+  // 检查tab是否在可视区域内（增加一些容错空间）
+  const tolerance = 4 // 4px的容错空间
+  const isVisible = tabLeft >= -tolerance && tabRight <= containerWidth + tolerance
+
+  if (!isVisible) {
+    let scrollLeft = container.scrollLeft
+
+    if (tabLeft < -tolerance) {
+      // tab在左侧不可见，滚动到tab的起始位置
+      scrollLeft += tabLeft - 12 // 留出12px的边距
+    } else if (tabRight > containerWidth + tolerance) {
+      // tab在右侧不可见，滚动到tab的结束位置
+      scrollLeft += tabRight - containerWidth + 12 // 留出12px的边距
+    }
+
+    // 确保滚动位置不超出边界
+    scrollLeft = Math.max(0, Math.min(scrollLeft, container.scrollWidth - containerWidth))
+
+    // 平滑滚动到目标位置
+    container.scrollTo({
+      left: scrollLeft,
+      behavior: 'smooth',
+    })
+  }
+
+  // 更新滑动状态
+  setTimeout(checkScrollPosition, 300)
 }
 
-// 监听 modelValue 变化，更新指示器位置
+// 监听 modelValue 变化，滚动到tab
 watch(
   () => props.modelValue,
   (newValue) => {
     const activeIndex = panes.value.findIndex((pane) => pane.name === newValue)
     if (activeIndex !== -1) {
-      updateIndicator(activeIndex)
+      scrollToTab(activeIndex)
     }
   }
 )
 
+// 监听 panes 变化，当tab数量变化时重新计算
+watch(
+  () => panes.value.length,
+  () => {
+    nextTick(() => {
+      const activeIndex = panes.value.findIndex((pane) => pane.name === props.modelValue)
+      if (activeIndex !== -1) {
+        scrollToTab(activeIndex)
+      }
+      // 检查滑动状态
+      setTimeout(checkScrollPosition, 100)
+    })
+  }
+)
+
 onMounted(() => {
-  // 初始化指示器位置
+  // 初始化时滚动到选中tab
   nextTick(() => {
     const activeIndex = panes.value.findIndex((pane) => pane.name === props.modelValue)
     if (activeIndex !== -1) {
-      updateIndicator(activeIndex)
+      scrollToTab(activeIndex)
     }
+    // 检查初始滑动状态
+    setTimeout(checkScrollPosition, 100)
   })
+
+  // 监听窗口大小变化，重新计算滚动
+  const handleResize = () => {
+    const activeIndex = panes.value.findIndex((pane) => pane.name === props.modelValue)
+    if (activeIndex !== -1) {
+      scrollToTab(activeIndex)
+    }
+    // 检查滑动状态
+    setTimeout(checkScrollPosition, 100)
+  }
+
+  window.addEventListener('resize', handleResize)
+
+  // 清理事件监听器
+  return () => {
+    window.removeEventListener('resize', handleResize)
+  }
 })
 </script>
 
@@ -140,4 +283,14 @@ onMounted(() => {
 .flex-shrink-0:last-child {
   margin-right: 0;
 }
+
+/* 添加平滑滚动效果 */
+.overflow-x-auto {
+  scroll-behavior: smooth;
+}
+
+/* 滑动指示器样式 */
+.absolute {
+  transition: opacity 0.2s ease-in-out;
+}
 </style>
diff --git a/web/src/main.js b/web/src/main.js
index 3ef007e3..2cd6fe53 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -24,6 +24,7 @@ import {
   ActionSheet,
   Badge,
   Button,
+  Calendar,
   Cell,
   CellGroup,
   Circle,
@@ -52,6 +53,7 @@ import {
   Overlay,
   Picker,
   Popup,
+  PullRefresh,
   Radio,
   RadioGroup,
   Row,
@@ -130,5 +132,7 @@ app.use(Tabs)
 app.use(Divider)
 app.use(NoticeBar)
 app.use(ActionSheet)
+app.use(PullRefresh)
+app.use(Calendar)
 app.use(Toast)
 app.use(router).use(ElementPlus).mount('#app')
diff --git a/web/src/router.js b/web/src/router.js
index c1b648b1..4c1b006d 100644
--- a/web/src/router.js
+++ b/web/src/router.js
@@ -123,12 +123,7 @@ const routes = [
     meta: { title: '导出会话记录' },
     component: () => import('@/views/ChatExport.vue'),
   },
-  {
-    name: 'login-callback',
-    path: '/login/callback',
-    meta: { title: '用户登录' },
-    component: () => import('@/views/LoginCallback.vue'),
-  },
+
   {
     name: 'login',
     path: '/login',
@@ -296,31 +291,37 @@ const routes = [
         component: () => import('@/views/mobile/Index.vue'),
       },
       {
+        meta: { title: 'AI对话' },
         path: '/mobile/chat',
         name: 'mobile-chat',
         component: () => import('@/views/mobile/ChatList.vue'),
       },
       {
+        meta: { title: '创作中心' },
         path: '/mobile/create',
         name: 'mobile-create',
         component: () => import('@/views/mobile/Create.vue'),
       },
       {
+        meta: { title: '发现' },
         path: '/mobile/discover',
         name: 'mobile-discover',
         component: () => import('@/views/mobile/Discover.vue'),
       },
       {
+        meta: { title: '个人中心' },
         path: '/mobile/profile',
         name: 'mobile-profile',
         component: () => import('@/views/mobile/Profile.vue'),
       },
       {
+        meta: { title: '会员充值' },
         path: '/mobile/member',
         name: 'mobile-member',
         component: () => import('@/views/mobile/Member.vue'),
       },
       {
+        meta: { title: '作品展示' },
         path: '/mobile/imgWall',
         name: 'mobile-img-wall',
         component: () => import('@/views/mobile/pages/ImgWall.vue'),
@@ -332,40 +333,47 @@ const routes = [
       },
 
       {
+        meta: { title: '应用中心' },
         path: '/mobile/apps',
         name: 'mobile-apps',
         component: () => import('@/views/mobile/Apps.vue'),
       },
       // 新增的功能页面路由
       {
+        meta: { title: '消费日志' },
         path: '/mobile/power-log',
         name: 'mobile-power-log',
         component: () => import('@/views/mobile/PowerLog.vue'),
       },
       {
+        meta: { title: '推广计划' },
         path: '/mobile/invite',
         name: 'mobile-invite',
         component: () => import('@/views/mobile/Invite.vue'),
       },
       {
-        path: '/mobile/tools',
-        name: 'mobile-tools',
-        component: () => import('@/views/mobile/Tools.vue'),
-      },
-      {
+        meta: { title: '设置' },
         path: '/mobile/settings',
         name: 'mobile-settings',
         component: () => import('@/views/mobile/Settings.vue'),
       },
       {
-        path: '/mobile/help',
-        name: 'mobile-help',
-        component: () => import('@/views/mobile/Help.vue'),
+        meta: { title: 'Suno音乐创作' },
+        path: '/mobile/suno-create',
+        name: 'mobile-suno-create',
+        component: () => import('@/views/mobile/pages/SunoCreate.vue'),
       },
       {
-        path: '/mobile/feedback',
-        name: 'mobile-feedback',
-        component: () => import('@/views/mobile/Feedback.vue'),
+        meta: { title: '视频生成' },
+        path: '/mobile/video-create',
+        name: 'mobile-video-create',
+        component: () => import('@/views/mobile/pages/VideoCreate.vue'),
+      },
+      {
+        meta: { title: '即梦AI' },
+        path: '/mobile/jimeng-create',
+        name: 'mobile-jimeng-create',
+        component: () => import('@/views/mobile/pages/JimengCreate.vue'),
       },
     ],
   },
diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue
index e005464b..ccd27013 100644
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -915,10 +915,10 @@ const initParams = {
   model: models[0].value,
   chaos: 0,
   stylize: 0,
-  seed: 0,
+  seed: -1,
   img_arr: [],
   raw: false,
-  iw: 0,
+  iw: 0.7,
   prompt: router.currentRoute.value.params['prompt'] ?? '',
   neg_prompt: '',
   tile: false,
diff --git a/web/src/views/Invitation.vue b/web/src/views/Invitation.vue
index 8b775f7e..cbfe996d 100644
--- a/web/src/views/Invitation.vue
+++ b/web/src/views/Invitation.vue
@@ -60,7 +60,7 @@
               </div>
             </el-col>
             <el-col :span="8">
-              <div class="item-box green">
+              <div class="item-box bg-green-500">
                 <el-row :gutter="10">
                   <el-col :span="10">
                     <div class="item-icon">
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index b580ad67..56fd7190 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="login-page">
+    <router-link to="/" class="back-home-btn" title="返回首页">
+      <i class="iconfont icon-home"></i>
+    </router-link>
     <div class="login-container">
       <div class="login-card">
         <div class="login-header">
@@ -58,6 +61,39 @@ onMounted(() => {
   justify-content: center;
   padding: 20px;
 
+  .back-home-btn {
+    position: absolute;
+    top: 24px;
+    left: 24px;
+    z-index: 10;
+    font-size: 22px;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s;
+  }
+  .back-home-btn:hover {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  @media (max-width: 768px) {
+    .back-home-btn {
+      top: 12px;
+      left: 12px;
+      font-size: 20px;
+      width: 36px;
+      height: 36px;
+    }
+  }
+  :deep(.van-theme-dark) .back-home-btn {
+    color: #fff;
+    background: rgba(0, 0, 0, 0.35);
+  }
+
   .login-container {
     width: 100%;
     max-width: 480px;
diff --git a/web/src/views/LoginCallback.vue b/web/src/views/LoginCallback.vue
deleted file mode 100644
index 8c5c7002..00000000
--- a/web/src/views/LoginCallback.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <div
-    class="login-callback"
-    v-loading="loading"
-    element-loading-text="正在同步登录信息..."
-    :style="{ height: winHeight + 'px' }"
-  >
-    <el-dialog
-      v-model="show"
-      :close-on-click-modal="false"
-      :show-close="false"
-      style="width: 360px"
-    >
-      <el-result icon="success" title="登录成功" style="--el-result-padding: 10px">
-        <template #sub-title>
-          <div class="user-info">
-            <div class="line">您的初始账户信息如下：</div>
-            <div class="line"><span>用户名：</span>{{ username }}</div>
-            <div class="line"><span>密码：</span>{{ password }}</div>
-            <div class="line">您后期也可以通过此账号和密码登录</div>
-          </div>
-        </template>
-        <template #extra>
-          <el-button
-            type="primary"
-            class="copy-user-info"
-            :data-clipboard-text="'用户名：' + username + ' 密码：' + password"
-            >复制</el-button
-          >
-          <el-button type="danger" @click="finishLogin">关闭</el-button>
-        </template>
-      </el-result>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import { checkSession } from '@/store/cache'
-import { setUserToken } from '@/store/session'
-import { getRoute } from '@/store/system'
-import { showMessageError, showMessageOK } from '@/utils/dialog'
-import { httpGet } from '@/utils/http'
-import Clipboard from 'clipboard'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { onMounted, onUnmounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const winHeight = ref(window.innerHeight)
-const loading = ref(true)
-const router = useRouter()
-const show = ref(false)
-const username = ref('')
-const password = ref('')
-
-const code = router.currentRoute.value.query.code
-const action = router.currentRoute.value.query.action
-if (code === '') {
-  ElMessage.error({
-    message: '登录失败：code 参数不能为空',
-    duration: 2000,
-    onClose: () => router.push('/'),
-  })
-} else {
-  checkSession()
-    .then((user) => {
-      // bind user
-      doLogin(user.id)
-    })
-    .catch(() => {
-      doLogin(0)
-    })
-}
-
-const doLogin = (userId) => {
-  // 发送请求获取用户信息
-  httpGet('/api/user/clogin/callback', {
-    login_type: 'wx',
-    code: code,
-    action: action,
-    user_id: userId,
-  })
-    .then((res) => {
-      if (res.data.token) {
-        setUserToken(res.data.token)
-      }
-      if (res.data.username) {
-        username.value = res.data.username
-        password.value = res.data.password
-        show.value = true
-        loading.value = false
-      } else {
-        finishLogin()
-      }
-    })
-    .catch((e) => {
-      ElMessageBox.alert(e.message, {
-        confirmButtonText: '重新登录',
-        type: 'error',
-        title: '登录失败',
-        callback: () => {
-          router.push('/')
-        },
-      })
-    })
-}
-
-const clipboard = ref(null)
-onMounted(() => {
-  clipboard.value = new Clipboard('.copy-user-info')
-  clipboard.value.on('success', () => {
-    showMessageOK('复制成功！')
-  })
-
-  clipboard.value.on('error', () => {
-    showMessageError('复制失败！')
-  })
-})
-
-onUnmounted(() => {
-  clipboard.value.destroy()
-})
-
-const finishLogin = () => {
-  show.value = false
-  router.push(getRoute())
-}
-</script>
-
-<style lang="scss" scoped>
-.login-callback {
-  .user-info {
-    display: flex;
-    flex-direction: column;
-    padding: 10px;
-    border: 1px dashed #e1e1e1;
-    border-radius: 10px;
-    .line {
-      text-align: left;
-      font-size: 14px;
-      line-height: 1.5;
-
-      span {
-        font-weight: bold;
-      }
-    }
-  }
-}
-</style>
diff --git a/web/src/views/Register.vue b/web/src/views/Register.vue
index 2242f35d..60d59539 100644
--- a/web/src/views/Register.vue
+++ b/web/src/views/Register.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="register-page">
+    <router-link to="/" class="back-home-btn" title="返回首页">
+      <i class="iconfont icon-home"></i>
+    </router-link>
     <div class="register-container">
       <div class="register-card">
         <div class="register-header">
@@ -10,6 +13,8 @@
         <div class="register-content">
           <login-dialog
             :show="true"
+            active="register"
+            :inviteCode="inviteCode"
             @hide="handleRegisterHide"
             @success="handleRegisterSuccess"
             ref="loginDialogRef"
@@ -28,6 +33,7 @@ import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const loginDialogRef = ref(null)
+const inviteCode = ref(router.currentRoute.value.query.invite_code || '')
 
 // 处理注册弹窗隐藏
 const handleRegisterHide = () => {
@@ -58,6 +64,39 @@ onMounted(() => {
   justify-content: center;
   padding: 20px;
 
+  .back-home-btn {
+    position: absolute;
+    top: 24px;
+    left: 24px;
+    z-index: 10;
+    font-size: 22px;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s;
+  }
+  .back-home-btn:hover {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  @media (max-width: 768px) {
+    .back-home-btn {
+      top: 12px;
+      left: 12px;
+      font-size: 20px;
+      width: 36px;
+      height: 36px;
+    }
+  }
+  :deep(.van-theme-dark) .back-home-btn {
+    color: #fff;
+    background: rgba(0, 0, 0, 0.35);
+  }
+
   .register-container {
     width: 100%;
     max-width: 480px;
@@ -110,6 +149,12 @@ onMounted(() => {
     padding: 16px;
     background: var(--van-background);
 
+    .back-home-btn {
+      top: 16px;
+      left: 16px;
+      font-size: 20px;
+    }
+
     .register-container {
       max-width: 100%;
 
@@ -143,6 +188,12 @@ onMounted(() => {
   .register-page {
     padding: 12px;
 
+    .back-home-btn {
+      top: 12px;
+      left: 12px;
+      font-size: 18px;
+    }
+
     .register-container {
       .register-card {
         .register-header {
diff --git a/web/src/views/mobile/Apps.vue b/web/src/views/mobile/Apps.vue
index 1670340f..4ae982f7 100644
--- a/web/src/views/mobile/Apps.vue
+++ b/web/src/views/mobile/Apps.vue
@@ -1,83 +1,69 @@
 <template>
-  <div class="apps-page">
-    <div class="apps-filter mb-8 px-3">
-      <CustomTabs :model-value="activeTab" @update:model-value="activeTab = $event">
+  <div class="apps-page p-3">
+    <div class="apps-filter mb-8">
+      <CustomTabs :model-value="activeTab" @update:model-value="handleTabChange">
         <CustomTabPane name="all" label="全部分类">
           <div class="app-list">
-            <van-list v-model="loading" :finished="true" finished-text="" @load="fetchApps()">
-              <van-cell v-for="item in apps" :key="item.id" class="app-cell">
-                <div class="app-card">
-                  <div class="app-info">
-                    <div class="app-image">
-                      <van-image :src="item.icon" round />
-                    </div>
-                    <div class="app-detail">
-                      <div class="app-title">{{ item.name }}</div>
-                      <div class="app-desc">{{ item.hello_msg }}</div>
-                    </div>
-                  </div>
-
-                  <div class="app-actions">
-                    <van-button
-                      size="small"
-                      type="primary"
-                      class="action-btn"
-                      @click="useRole(item.id)"
-                      >对话</van-button
-                    >
-                    <van-button
-                      size="small"
-                      :type="hasRole(item.key) ? 'danger' : 'success'"
-                      class="action-btn"
-                      @click="updateRole(item, hasRole(item.key) ? 'remove' : 'add')"
-                    >
-                      {{ hasRole(item.key) ? '移除' : '添加' }}
-                    </van-button>
-                  </div>
+            <van-list v-model="loading" :finished="!loading" finished-text="" @load="() => {}">
+              <template v-if="!loading && currentApps.length > 0">
+                <AppCard
+                  v-for="item in currentApps"
+                  :key="item.id"
+                  :app="item"
+                  :has-role="hasRole(item.key)"
+                  @use-role="useRole"
+                  @update-role="updateRole"
+                />
+              </template>
+              <template v-else-if="!loading && currentApps.length === 0">
+                <EmptyState
+                  type="search"
+                  description="暂无应用"
+                  :show-action="true"
+                  action-text="刷新"
+                  @action="refreshData"
+                />
+              </template>
+              <template v-else>
+                <div class="loading-state">
+                  <van-loading type="spinner" size="24px">加载中...</van-loading>
                 </div>
-              </van-cell>
+              </template>
             </van-list>
           </div>
         </CustomTabPane>
-        <CustomTabPane v-for="type in appTypes" :key="type.id" :name="type.id" :label="type.name">
+        <CustomTabPane
+          v-for="type in appTypes"
+          :key="type.id"
+          :name="type.id.toString()"
+          :label="type.name"
+        >
           <div class="app-list">
-            <van-list
-              v-model="loading"
-              :finished="true"
-              finished-text=""
-              @load="fetchApps(type.id)"
-            >
-              <van-cell v-for="item in typeApps" :key="item.id" class="app-cell">
-                <div class="app-card">
-                  <div class="app-info">
-                    <div class="app-image">
-                      <van-image :src="item.icon" round />
-                    </div>
-                    <div class="app-detail">
-                      <div class="app-title">{{ item.name }}</div>
-                      <div class="app-desc">{{ item.hello_msg }}</div>
-                    </div>
-                  </div>
-
-                  <div class="app-actions">
-                    <van-button
-                      size="small"
-                      type="primary"
-                      class="action-btn"
-                      @click="useRole(item.id)"
-                      >对话</van-button
-                    >
-                    <van-button
-                      size="small"
-                      :type="hasRole(item.key) ? 'danger' : 'success'"
-                      class="action-btn"
-                      @click="updateRole(item, hasRole(item.key) ? 'remove' : 'add')"
-                    >
-                      {{ hasRole(item.key) ? '移除' : '添加' }}
-                    </van-button>
-                  </div>
+            <van-list v-model="loading" :finished="!loading" finished-text="" @load="() => {}">
+              <template v-if="!loading && getAppsByType(type.id).length > 0">
+                <AppCard
+                  v-for="item in getAppsByType(type.id)"
+                  :key="item.id"
+                  :app="item"
+                  :has-role="hasRole(item.key)"
+                  @use-role="useRole"
+                  @update-role="updateRole"
+                />
+              </template>
+              <template v-else-if="!loading && getAppsByType(type.id).length === 0">
+                <EmptyState
+                  type="search"
+                  :description="`${type.name}分类暂无应用`"
+                  :show-action="true"
+                  action-text="刷新"
+                  @action="refreshData"
+                />
+              </template>
+              <template v-else>
+                <div class="loading-state">
+                  <van-loading type="spinner" size="24px">加载中...</van-loading>
                 </div>
-              </van-cell>
+              </template>
             </van-list>
           </div>
         </CustomTabPane>
@@ -89,64 +75,105 @@
 <script setup>
 import CustomTabPane from '@/components/ui/CustomTabPane.vue'
 import CustomTabs from '@/components/ui/CustomTabs.vue'
+import AppCard from './components/AppCard.vue'
+import EmptyState from './components/EmptyState.vue'
 import { checkSession } from '@/store/cache'
 import { httpGet, httpPost } from '@/utils/http'
 import { arrayContains, removeArrayItem, showLoginDialog, substr } from '@/utils/libs'
 import { showNotify } from 'vant'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, computed, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const isLogin = ref(false)
-const apps = ref([])
-const typeApps = ref([])
+const allApps = ref([]) // 存储所有应用数据
 const appTypes = ref([])
 const loading = ref(false)
 const roles = ref([])
-const activeTab = ref(0)
+const activeTab = ref('all')
+const initialized = ref(false)
 
-onMounted(() => {
-  checkSession()
-    .then((user) => {
-      isLogin.value = true
-      roles.value = user.chat_roles
-    })
-    .catch(() => {})
-  fetchAppTypes()
-  fetchApps()
+// 按分类分组的应用数据
+const appsByType = computed(() => {
+  const grouped = {}
+  allApps.value.forEach((app) => {
+    const tid = app.tid || 0
+    if (!grouped[tid]) {
+      grouped[tid] = []
+    }
+    grouped[tid].push(app)
+  })
+  return grouped
 })
 
-const fetchAppTypes = () => {
-  httpGet('/api/app/type/list')
-    .then((res) => {
-      appTypes.value = res.data
-    })
-    .catch((e) => {
-      showNotify({ type: 'danger', message: '获取应用分类失败：' + e.message })
-    })
+// 获取当前tab显示的应用列表
+const currentApps = computed(() => {
+  if (activeTab.value === 'all') {
+    return allApps.value
+  }
+  return getAppsByType(parseInt(activeTab.value)) || []
+})
+
+onMounted(async () => {
+  try {
+    const user = await checkSession()
+    isLogin.value = true
+    roles.value = user.chat_roles
+  } catch (error) {
+    // 用户未登录，继续执行
+  }
+
+  await Promise.all([fetchAppTypes(), fetchAllApps()])
+
+  initialized.value = true
+})
+
+const fetchAppTypes = async () => {
+  try {
+    const res = await httpGet('/api/app/type/list')
+    appTypes.value = res.data
+  } catch (e) {
+    showNotify({ type: 'danger', message: '获取应用分类失败：' + e.message })
+  }
 }
 
-const fetchApps = (typeId = '') => {
-  httpGet('/api/app/list', { tid: typeId })
-    .then((res) => {
-      const items = res.data
-      // 处理 hello message
-      for (let i = 0; i < items.length; i++) {
-        items[i].intro = substr(items[i].hello_msg, 80)
-      }
-
-      if (typeId) {
-        typeApps.value = items
-      } else {
-        apps.value = items
-      }
-    })
-    .catch((e) => {
-      showNotify({ type: 'danger', message: '获取应用失败：' + e.message })
-    })
+// 一次性获取所有应用数据
+const fetchAllApps = async () => {
+  loading.value = true
+  try {
+    const res = await httpGet('/api/app/list')
+    const items = res.data
+    // 处理 hello message
+    for (let i = 0; i < items.length; i++) {
+      items[i].intro = substr(items[i].hello_msg, 80)
+    }
+    allApps.value = items
+  } catch (e) {
+    showNotify({ type: 'danger', message: '获取应用失败：' + e.message })
+  } finally {
+    loading.value = false
+  }
 }
 
-const updateRole = (row, opt) => {
+// 刷新数据
+const refreshData = async () => {
+  await Promise.all([fetchAppTypes(), fetchAllApps()])
+  showNotify({ type: 'success', message: '数据已刷新' })
+}
+
+// 根据分类ID获取对应的应用列表
+const getAppsByType = (typeId) => {
+  return appsByType.value[typeId] || []
+}
+
+// 处理tab切换
+const handleTabChange = async (tabName) => {
+  activeTab.value = tabName
+  // 等待DOM更新完成
+  await nextTick()
+}
+
+const updateRole = async (app, opt) => {
   if (!isLogin.value) {
     return showLoginDialog(router)
   }
@@ -154,26 +181,26 @@ const updateRole = (row, opt) => {
   let actionTitle = ''
   if (opt === 'add') {
     actionTitle = '添加应用'
-    const exists = arrayContains(roles.value, row.key)
+    const exists = arrayContains(roles.value, app.key)
     if (exists) {
       return
     }
-    roles.value.push(row.key)
+    roles.value.push(app.key)
   } else {
     actionTitle = '移除应用'
-    const exists = arrayContains(roles.value, row.key)
+    const exists = arrayContains(roles.value, app.key)
     if (!exists) {
       return
     }
-    roles.value = removeArrayItem(roles.value, row.key)
+    roles.value = removeArrayItem(roles.value, app.key)
+  }
+
+  try {
+    await httpPost('/api/app/update', { keys: roles.value })
+    showNotify({ type: 'success', message: actionTitle + '成功！' })
+  } catch (e) {
+    showNotify({ type: 'danger', message: actionTitle + '失败：' + e.message })
   }
-  httpPost('/api/app/update', { keys: roles.value })
-    .then(() => {
-      showNotify({ type: 'success', message: actionTitle + '成功！' })
-    })
-    .catch((e) => {
-      showNotify({ type: 'danger', message: actionTitle + '失败：' + e.message })
-    })
 }
 
 const hasRole = (roleKey) => {
@@ -202,64 +229,10 @@ const useRole = (roleId) => {
   .app-list {
     padding: 0;
 
-    .app-cell {
-      padding: 0;
-      margin-bottom: 15px;
-
-      .app-card {
-        background: var(--van-cell-background);
-        border-radius: 12px;
-        padding: 15px;
-        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-
-        .app-info {
-          display: flex;
-          align-items: center;
-          margin-bottom: 15px;
-
-          .app-image {
-            width: 60px;
-            height: 60px;
-            margin-right: 15px;
-
-            :deep(.van-image) {
-              width: 100%;
-              height: 100%;
-            }
-          }
-
-          .app-detail {
-            flex: 1;
-
-            .app-title {
-              font-size: 16px;
-              font-weight: 600;
-              margin-bottom: 5px;
-              color: var(--van-text-color);
-            }
-
-            .app-desc {
-              font-size: 13px;
-              color: var(--van-gray-6);
-              display: -webkit-box;
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 2;
-              overflow: hidden;
-            }
-          }
-        }
-
-        .app-actions {
-          display: flex;
-          gap: 10px;
-
-          .action-btn {
-            flex: 1;
-            border-radius: 20px;
-            padding: 0 10px;
-          }
-        }
-      }
+    .loading-state {
+      padding: 40px 0;
+      text-align: center;
+      color: var(--van-gray-6);
     }
   }
 }
diff --git a/web/src/views/mobile/ChatSession.vue b/web/src/views/mobile/ChatSession.vue
index 1cd7f9d8..825c0b16 100644
--- a/web/src/views/mobile/ChatSession.vue
+++ b/web/src/views/mobile/ChatSession.vue
@@ -16,16 +16,11 @@
           </span>
         </template>
         <template #right>
-          <van-icon name="share-o" @click="showShare = true" />
+          <van-icon name="share-o" @click="copyShareUrl" />
         </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">
@@ -80,10 +75,6 @@
       </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">-->
@@ -127,7 +118,7 @@ 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'
+// 移除 Clipboard.js 相关内容
 import hl from 'highlight.js'
 import 'highlight.js/styles/a11y-dark.css'
 import MarkdownIt from 'markdown-it'
@@ -260,14 +251,7 @@ 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 })
-  })
+  // 移除 Clipboard.js 相关内容
 })
 
 onUnmounted(() => {
@@ -545,23 +529,7 @@ const reGenerate = () => {
   })
 }
 
-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()
-  }
-}
+// 移除 showShare、shareOptions、shareChat 相关内容
 
 const getRoleById = function (rid) {
   for (let i = 0; i < roles.value.length; i++) {
@@ -581,32 +549,6 @@ const getModelName = (model_id) => {
   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) {
@@ -619,6 +561,16 @@ const onChange = (item) => {
     }
   }
 }
+
+// 新增复制分享链接方法
+const copyShareUrl = async () => {
+  try {
+    await navigator.clipboard.writeText(url.value)
+    showNotify({ type: 'success', message: '复制成功，请把链接发送给好友', duration: 3000 })
+  } catch (e) {
+    showNotify({ type: 'danger', message: '复制失败', duration: 2000 })
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/views/mobile/Create.vue b/web/src/views/mobile/Create.vue
index 15451fce..d93a4b73 100644
--- a/web/src/views/mobile/Create.vue
+++ b/web/src/views/mobile/Create.vue
@@ -52,240 +52,11 @@ import { Button, Field, Image, showNotify } from 'vant'
 import { h, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-// 创建缺失的移动端组件
-const SunoCreate = {
-  name: 'SunoCreate',
-  setup() {
-    const prompt = ref('')
-    const duration = ref(30)
-    const loading = ref(false)
-    const result = ref('')
-
-    const generateMusic = () => {
-      if (!prompt.value.trim()) {
-        showNotify({ type: 'warning', message: '请输入音乐描述' })
-        return
-      }
-      loading.value = true
-      // TODO: 调用Suno API
-      setTimeout(() => {
-        loading.value = false
-        showNotify({ type: 'success', message: '音乐生成功能开发中' })
-      }, 2000)
-    }
-
-    const downloadMusic = () => {
-      // TODO: 实现下载功能
-      showNotify({ type: 'primary', message: '下载功能开发中' })
-    }
-
-    return () =>
-      h('div', { class: 'suno-create' }, [
-        h('div', { class: 'create-header' }, [h('h3', '音乐创作'), h('p', 'AI驱动的音乐生成工具')]),
-        h('div', { class: 'create-form' }, [
-          h(Field, {
-            value: prompt.value,
-            onInput: (val) => {
-              prompt.value = val
-            },
-            type: 'textarea',
-            placeholder: '描述您想要的音乐风格、情感或主题...',
-            rows: 4,
-            maxlength: 500,
-            'show-word-limit': true,
-          }),
-          h(Field, {
-            value: duration.value,
-            onInput: (val) => {
-              duration.value = val
-            },
-            label: '时长',
-            type: 'number',
-            placeholder: '音乐时长（秒）',
-          }),
-          h(
-            Button,
-            {
-              type: 'primary',
-              size: 'large',
-              block: true,
-              loading: loading.value,
-              onClick: generateMusic,
-            },
-            '生成音乐'
-          ),
-        ]),
-        result.value
-          ? h('div', { class: 'result-area' }, [
-              h('h4', '生成结果'),
-              h('audio', { src: result.value, controls: true }),
-              h(Button, { size: 'small', onClick: downloadMusic }, '下载'),
-            ])
-          : null,
-      ])
-  },
-}
-
-const VideoCreate = {
-  name: 'VideoCreate',
-  setup() {
-    const prompt = ref('')
-    const duration = ref(10)
-    const loading = ref(false)
-    const result = ref('')
-
-    const generateVideo = () => {
-      if (!prompt.value.trim()) {
-        showNotify({ type: 'warning', message: '请输入视频描述' })
-        return
-      }
-      loading.value = true
-      // TODO: 调用视频生成API
-      setTimeout(() => {
-        loading.value = false
-        showNotify({ type: 'success', message: '视频生成功能开发中' })
-      }, 2000)
-    }
-
-    const downloadVideo = () => {
-      // TODO: 实现下载功能
-      showNotify({ type: 'primary', message: '下载功能开发中' })
-    }
-
-    return () =>
-      h('div', { class: 'video-create' }, [
-        h('div', { class: 'create-header' }, [h('h3', '视频生成'), h('p', 'AI驱动的视频创作工具')]),
-        h('div', { class: 'create-form' }, [
-          h(Field, {
-            value: prompt.value,
-            onInput: (val) => {
-              prompt.value = val
-            },
-            type: 'textarea',
-            placeholder: '描述您想要的视频内容、风格或场景...',
-            rows: 4,
-            maxlength: 500,
-            'show-word-limit': true,
-          }),
-          h(Field, {
-            value: duration.value,
-            onInput: (val) => {
-              duration.value = val
-            },
-            label: '时长',
-            type: 'number',
-            placeholder: '视频时长（秒）',
-          }),
-          h(
-            Button,
-            {
-              type: 'primary',
-              size: 'large',
-              block: true,
-              loading: loading.value,
-              onClick: generateVideo,
-            },
-            '生成视频'
-          ),
-        ]),
-        result.value
-          ? h('div', { class: 'result-area' }, [
-              h('h4', '生成结果'),
-              h('video', { src: result.value, controls: true }),
-              h(Button, { size: 'small', onClick: downloadVideo }, '下载'),
-            ])
-          : null,
-      ])
-  },
-}
-
-const JimengCreate = {
-  name: 'JimengCreate',
-  setup() {
-    const prompt = ref('')
-    const negativePrompt = ref('')
-    const steps = ref(20)
-    const loading = ref(false)
-    const result = ref('')
-
-    const generateImage = () => {
-      if (!prompt.value.trim()) {
-        showNotify({ type: 'warning', message: '请输入图像描述' })
-        return
-      }
-      loading.value = true
-      // TODO: 调用即梦AI API
-      setTimeout(() => {
-        loading.value = false
-        showNotify({ type: 'success', message: '即梦AI功能开发中' })
-      }, 2000)
-    }
-
-    const downloadImage = () => {
-      // TODO: 实现下载功能
-      showNotify({ type: 'primary', message: '下载功能开发中' })
-    }
-
-    return () =>
-      h('div', { class: 'jimeng-create' }, [
-        h('div', { class: 'create-header' }, [h('h3', '即梦AI'), h('p', '专业的AI图像生成工具')]),
-        h('div', { class: 'create-form' }, [
-          h(Field, {
-            value: prompt.value,
-            onInput: (val) => {
-              prompt.value = val
-            },
-            type: 'textarea',
-            placeholder: '描述您想要的图像内容...',
-            rows: 4,
-            maxlength: 500,
-            'show-word-limit': true,
-          }),
-          h(Field, {
-            value: negativePrompt.value,
-            onInput: (val) => {
-              negativePrompt.value = val
-            },
-            type: 'textarea',
-            placeholder: '负面提示词（可选）',
-            rows: 2,
-            maxlength: 200,
-          }),
-          h(Field, {
-            value: steps.value,
-            onInput: (val) => {
-              steps.value = val
-            },
-            label: '步数',
-            type: 'number',
-            placeholder: '生成步数',
-          }),
-          h(
-            Button,
-            {
-              type: 'primary',
-              size: 'large',
-              block: true,
-              loading: loading.value,
-              onClick: generateImage,
-            },
-            '生成图像'
-          ),
-        ]),
-        result.value
-          ? h('div', { class: 'result-area' }, [
-              h('h4', '生成结果'),
-              h(Image, { src: result.value, fit: 'cover' }),
-              h(Button, { size: 'small', onClick: downloadImage }, '下载'),
-            ])
-          : null,
-      ])
-  },
-}
+// 删除 SunoCreate、VideoCreate、JimengCreate 相关 setup 代码和渲染逻辑
 
 const route = useRoute()
 const router = useRouter()
-const activeTab = ref('mj')
+const activeTab = ref(route.query.tab || 'mj')
 const menus = ref([])
 const activeMenu = ref({
   mj: false,
@@ -322,8 +93,6 @@ onMounted(() => {
 const fetchMenus = () => {
   httpGet('/api/menu/list')
     .then((res) => {
-      console.log(res)
-
       menus.value = res.data
       activeMenu.value = {
         mj: menus.value.some((item) => item.url === '/mj'),
@@ -340,6 +109,18 @@ const fetchMenus = () => {
         if (firstAvailable) {
           activeTab.value = firstAvailable
         }
+      } else {
+        // 如果当前选中的tab不可用，选择第一个可用的
+        if (!activeMenu.value[route.query.tab]) {
+          const firstAvailable = Object.keys(activeMenu.value).find((key) => activeMenu.value[key])
+          if (firstAvailable) {
+            activeTab.value = firstAvailable
+            router.replace({
+              path: route.path,
+              query: { ...route.query, tab: firstAvailable },
+            })
+          }
+        }
       }
     })
     .catch((e) => {
diff --git a/web/src/views/mobile/Discover.vue b/web/src/views/mobile/Discover.vue
index fcce56d1..cea4de95 100644
--- a/web/src/views/mobile/Discover.vue
+++ b/web/src/views/mobile/Discover.vue
@@ -87,13 +87,13 @@ const aiTools = ref([
     key: 'suno',
     name: '音乐创作',
     desc: 'AI音乐生成与编辑',
-    icon: 'icon-music',
+    icon: 'icon-mp3',
     gradient: 'linear-gradient(135deg, #EF4444, #DC2626)',
     badge: '新功能',
     tag: 'AI音乐',
     status: 'active',
     statusText: '可用',
-    url: '/mobile/create?tab=suno',
+    url: '/mobile/suno-create',
   },
   {
     key: 'video',
@@ -104,7 +104,7 @@ const aiTools = ref([
     tag: 'AI视频',
     status: 'beta',
     statusText: '测试版',
-    url: '/mobile/create?tab=video',
+    url: '/mobile/video-create',
   },
   {
     key: 'jimeng',
@@ -115,24 +115,24 @@ const aiTools = ref([
     tag: 'AI绘画',
     status: 'active',
     statusText: '可用',
-    url: '/mobile/create?tab=jimeng',
+    url: '/mobile/jimeng-create',
   },
   {
-    key: 'xmind',
-    name: '思维导图',
-    desc: 'AI思维导图生成',
-    icon: 'icon-mind',
+    key: 'imgWall',
+    name: 'AI画廊',
+    desc: 'AI绘画作品展示',
+    icon: 'icon-image-list',
     gradient: 'linear-gradient(135deg, #3B82F6, #2563EB)',
-    tag: 'AI工具',
+    tag: 'AI展示',
     status: 'active',
     statusText: '可用',
-    url: '/mobile/tools?tab=xmind',
+    url: '/mobile/imgWall',
   },
   {
     key: 'apps',
     name: '应用中心',
     desc: '更多AI应用工具',
-    icon: 'icon-apps',
+    icon: 'icon-app',
     gradient: 'linear-gradient(135deg, #EC4899, #DB2777)',
     tag: '应用',
     status: 'active',
diff --git a/web/src/views/mobile/Feedback.vue b/web/src/views/mobile/Feedback.vue
deleted file mode 100644
index 38a3e001..00000000
--- a/web/src/views/mobile/Feedback.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<template>
-  <div class="mobile-feedback">
-    <!-- 反馈表单 -->
-    <div class="feedback-content">
-      <!-- 反馈类型 -->
-      <van-cell-group title="反馈类型">
-        <van-radio-group v-model="feedbackType" direction="horizontal">
-          <van-radio name="bug">问题反馈</van-radio>
-          <van-radio name="feature">功能建议</van-radio>
-          <van-radio name="other">其他</van-radio>
-        </van-radio-group>
-      </van-cell-group>
-
-      <!-- 反馈内容 -->
-      <van-cell-group title="反馈内容">
-        <van-field
-          v-model="feedbackContent"
-          type="textarea"
-          placeholder="请详细描述您遇到的问题或建议..."
-          :rows="6"
-          maxlength="500"
-          show-word-limit
-          autosize
-        />
-      </van-cell-group>
-
-      <!-- 联系方式 -->
-      <van-cell-group title="联系方式（选填）">
-        <van-field v-model="contactInfo" placeholder="邮箱或手机号，方便我们回复您" clearable />
-      </van-cell-group>
-
-      <!-- 图片上传 -->
-      <van-cell-group title="上传截图（选填）">
-        <van-uploader
-          v-model="fileList"
-          :max-count="3"
-          :after-read="afterRead"
-          :before-delete="beforeDelete"
-          upload-text="上传图片"
-        />
-      </van-cell-group>
-
-      <!-- 提交按钮 -->
-      <div class="submit-section">
-        <van-button type="primary" block :loading="submitting" @click="submitFeedback">
-          提交反馈
-        </van-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { showSuccessToast, showToast } from 'vant'
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
-// 响应式数据
-const feedbackType = ref('bug')
-const feedbackContent = ref('')
-const contactInfo = ref('')
-const fileList = ref([])
-const submitting = ref(false)
-
-// 上传图片后的处理
-const afterRead = (file) => {
-  // 这里可以处理图片上传逻辑
-  console.log('上传文件:', file)
-}
-
-// 删除图片前的处理
-const beforeDelete = (file, detail) => {
-  // 这里可以处理图片删除逻辑
-  console.log('删除文件:', file)
-  return true
-}
-
-// 提交反馈
-const submitFeedback = async () => {
-  if (!feedbackContent.value.trim()) {
-    showToast('请输入反馈内容')
-    return
-  }
-
-  submitting.value = true
-
-  try {
-    const feedbackData = {
-      type: feedbackType.value,
-      content: feedbackContent.value,
-      contact: contactInfo.value,
-      images: fileList.value.map((file) => file.url || file.content),
-      timestamp: new Date().toISOString(),
-    }
-
-    // 暂时使用本地存储保存反馈数据
-    // 后续可以对接后端API
-    const existingFeedback = JSON.parse(localStorage.getItem('userFeedback') || '[]')
-    existingFeedback.push(feedbackData)
-    localStorage.setItem('userFeedback', JSON.stringify(existingFeedback))
-
-    showSuccessToast('反馈提交成功，感谢您的建议！')
-
-    // 清空表单
-    feedbackContent.value = ''
-    contactInfo.value = ''
-    fileList.value = []
-
-    // 返回上一页
-    setTimeout(() => {
-      router.back()
-    }, 1500)
-  } catch (error) {
-    console.error('提交反馈失败:', error)
-    showToast('提交失败，请稍后重试')
-  } finally {
-    submitting.value = false
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.mobile-feedback {
-  min-height: 100vh;
-  background-color: #f7f8fa;
-}
-
-.feedback-content {
-  padding: 16px;
-}
-
-.van-cell-group {
-  margin-bottom: 16px;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.van-radio-group {
-  padding: 16px;
-  display: flex;
-  gap: 24px;
-}
-
-.van-field {
-  padding: 16px;
-}
-
-.submit-section {
-  margin-top: 32px;
-  padding: 0 16px;
-}
-
-.van-uploader {
-  padding: 16px;
-}
-
-// 自定义样式
-:deep(.van-cell-group__title) {
-  padding: 16px 16px 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #323233;
-}
-
-:deep(.van-field__control) {
-  min-height: 120px;
-}
-
-:deep(.van-radio__label) {
-  font-size: 14px;
-}
-</style>
diff --git a/web/src/views/mobile/Help.vue b/web/src/views/mobile/Help.vue
deleted file mode 100644
index 2a3808ce..00000000
--- a/web/src/views/mobile/Help.vue
+++ /dev/null
@@ -1,855 +0,0 @@
-<template>
-  <div class="help-page">
-    <div class="help-content">
-      <!-- 搜索框 -->
-      <div class="search-section" v-if="showSearch">
-        <van-search
-          v-model="searchKeyword"
-          placeholder="搜索帮助内容"
-          @search="onSearch"
-          @cancel="showSearch = false"
-          show-action
-        />
-      </div>
-
-      <!-- 常见问题 -->
-      <div class="faq-section" v-if="!showSearch">
-        <h3 class="section-title">常见问题</h3>
-        <van-collapse v-model="activeNames" accordion>
-          <van-collapse-item
-            v-for="faq in frequentFAQs"
-            :key="faq.id"
-            :title="faq.question"
-            :name="faq.id"
-            class="faq-item"
-          >
-            <div class="faq-answer" v-html="faq.answer"></div>
-          </van-collapse-item>
-        </van-collapse>
-      </div>
-
-      <!-- 功能指南 -->
-      <div class="guide-section" v-if="!showSearch">
-        <h3 class="section-title">功能指南</h3>
-        <van-grid :column-num="2" :gutter="12" :border="false">
-          <van-grid-item
-            v-for="guide in guides"
-            :key="guide.id"
-            @click="openGuide(guide)"
-            class="guide-item"
-          >
-            <div class="guide-card">
-              <div class="guide-icon" :style="{ backgroundColor: guide.color }">
-                <i class="iconfont" :class="guide.icon"></i>
-              </div>
-              <div class="guide-title">{{ guide.title }}</div>
-              <div class="guide-desc">{{ guide.desc }}</div>
-            </div>
-          </van-grid-item>
-        </van-grid>
-      </div>
-
-      <!-- 问题分类 -->
-      <div class="category-section" v-if="!showSearch">
-        <h3 class="section-title">问题分类</h3>
-        <van-cell-group inset>
-          <van-cell
-            v-for="category in categories"
-            :key="category.id"
-            :title="category.name"
-            :value="`${category.count}个问题`"
-            is-link
-            @click="openCategory(category)"
-          >
-            <template #icon>
-              <i class="iconfont" :class="category.icon" class="category-icon"></i>
-            </template>
-          </van-cell>
-        </van-cell-group>
-      </div>
-
-      <!-- 搜索结果 -->
-      <div class="search-results" v-if="showSearch && searchResults.length > 0">
-        <h3 class="section-title">搜索结果</h3>
-        <van-list>
-          <van-cell
-            v-for="result in searchResults"
-            :key="result.id"
-            :title="result.title"
-            @click="openSearchResult(result)"
-            is-link
-          >
-            <template #label>
-              <div class="search-snippet" v-html="result.snippet"></div>
-            </template>
-          </van-cell>
-        </van-list>
-      </div>
-
-      <!-- 空搜索结果 -->
-      <van-empty
-        v-if="showSearch && searchKeyword && searchResults.length === 0"
-        description="没有找到相关内容"
-      />
-
-      <!-- 联系客服 -->
-      <div class="contact-section" v-if="!showSearch">
-        <h3 class="section-title">联系我们</h3>
-        <van-cell-group inset>
-          <van-cell title="在线客服" icon="service-o" is-link @click="openCustomerService">
-            <template #value>
-              <span class="online-status">在线</span>
-            </template>
-          </van-cell>
-          <van-cell
-            title="意见反馈"
-            icon="chat-o"
-            is-link
-            @click="router.push('/mobile/feedback')"
-          />
-          <van-cell title="官方QQ群" icon="friends-o" is-link @click="joinQQGroup">
-            <template #value>
-              <span class="qq-number">123456789</span>
-            </template>
-          </van-cell>
-          <van-cell title="官方微信" icon="wechat" is-link @click="showWeChatQR = true" />
-        </van-cell-group>
-      </div>
-
-      <!-- 使用提示 -->
-      <div class="tips-section" v-if="!showSearch">
-        <h3 class="section-title">使用提示</h3>
-        <van-swipe :autoplay="5000" class="tips-swipe">
-          <van-swipe-item v-for="tip in tips" :key="tip.id">
-            <div class="tip-card">
-              <div class="tip-icon">
-                <i class="iconfont" :class="tip.icon"></i>
-              </div>
-              <h4 class="tip-title">{{ tip.title }}</h4>
-              <p class="tip-content">{{ tip.content }}</p>
-            </div>
-          </van-swipe-item>
-        </van-swipe>
-      </div>
-    </div>
-
-    <!-- 帮助详情弹窗 -->
-    <van-action-sheet v-model:show="showHelpDetail" :title="selectedHelp?.title">
-      <div class="help-detail" v-if="selectedHelp">
-        <div class="detail-content" v-html="selectedHelp.content"></div>
-        <div class="detail-actions">
-          <van-button @click="likeHelp(selectedHelp)">
-            <van-icon name="good-job-o" /> 有用
-          </van-button>
-          <van-button @click="shareHelp(selectedHelp)">
-            <van-icon name="share-o" /> 分享
-          </van-button>
-        </div>
-      </div>
-    </van-action-sheet>
-
-    <!-- 微信二维码弹窗 -->
-    <van-dialog v-model:show="showWeChatQR" title="官方微信" :show-cancel-button="false">
-      <div class="wechat-qr">
-        <div class="qr-code">
-          <img src="/images/wechat-qr.png" alt="微信二维码" @error="onQRError" />
-        </div>
-        <p class="qr-tip">扫描二维码添加官方微信</p>
-      </div>
-    </van-dialog>
-
-    <!-- 客服聊天 -->
-    <van-action-sheet
-      v-model:show="showCustomerChat"
-      title="在线客服"
-      :close-on-click-overlay="false"
-    >
-      <div class="customer-chat">
-        <div class="chat-header">
-          <div class="customer-info">
-            <van-image src="/images/customer-service.png" round width="40" height="40" />
-            <div class="customer-detail">
-              <div class="customer-name">智能客服</div>
-              <div class="customer-status online">在线</div>
-            </div>
-          </div>
-          <van-button size="small" @click="showCustomerChat = false">结束</van-button>
-        </div>
-
-        <div class="chat-messages" ref="chatMessages">
-          <div
-            v-for="message in customerMessages"
-            :key="message.id"
-            class="message-item"
-            :class="{ 'user-message': message.isUser }"
-          >
-            <div class="message-content">{{ message.content }}</div>
-            <div class="message-time">{{ formatTime(message.time) }}</div>
-          </div>
-        </div>
-
-        <div class="chat-input">
-          <van-field
-            v-model="customerMessage"
-            placeholder="请输入您的问题..."
-            @keyup.enter="sendCustomerMessage"
-          >
-            <template #button>
-              <van-button size="small" type="primary" @click="sendCustomerMessage">
-                发送
-              </van-button>
-            </template>
-          </van-field>
-        </div>
-      </div>
-    </van-action-sheet>
-  </div>
-</template>
-
-<script setup>
-import { showNotify, showSuccessToast } from 'vant'
-import { nextTick, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const showSearch = ref(false)
-const searchKeyword = ref('')
-const searchResults = ref([])
-const activeNames = ref([])
-const selectedHelp = ref(null)
-const showHelpDetail = ref(false)
-const showWeChatQR = ref(false)
-const showCustomerChat = ref(false)
-const customerMessage = ref('')
-const customerMessages = ref([])
-const chatMessages = ref()
-
-// 常见问题
-const frequentFAQs = ref([
-  {
-    id: 1,
-    question: '如何获得算力？',
-    answer:
-      '<p>您可以通过以下方式获得算力：</p><ul><li>注册即送算力</li><li>购买充值套餐</li><li>邀请好友注册</li><li>参与活动获得</li></ul>',
-  },
-  {
-    id: 2,
-    question: '如何使用AI绘画功能？',
-    answer:
-      '<p>使用AI绘画功能很简单：</p><ol><li>进入创作中心</li><li>选择绘画工具（MJ、SD、DALL-E）</li><li>输入描述文字</li><li>点击生成即可</li></ol>',
-  },
-  {
-    id: 3,
-    question: '为什么生成失败？',
-    answer:
-      '<p>生成失败可能的原因：</p><ul><li>算力不足</li><li>内容违规</li><li>网络不稳定</li><li>服务器繁忙</li></ul><p>请检查算力余额并重试。</p>',
-  },
-  {
-    id: 4,
-    question: '如何成为VIP会员？',
-    answer:
-      '<p>成为VIP会员的方式：</p><ol><li>进入会员中心</li><li>选择合适的套餐</li><li>完成支付</li><li>自动开通VIP权限</li></ol>',
-  },
-  {
-    id: 5,
-    question: '如何导出聊天记录？',
-    answer:
-      '<p>导出聊天记录步骤：</p><ol><li>进入对话页面</li><li>点击右上角菜单</li><li>选择"导出记录"</li><li>选择导出格式</li><li>确认导出</li></ol>',
-  },
-])
-
-// 功能指南
-const guides = ref([
-  {
-    id: 1,
-    title: 'AI对话',
-    desc: '与AI智能对话',
-    icon: 'icon-chat',
-    color: '#1989fa',
-    content: 'AI对话使用指南详细内容...',
-  },
-  {
-    id: 2,
-    title: 'AI绘画',
-    desc: '生成精美图片',
-    icon: 'icon-mj',
-    color: '#8B5CF6',
-    content: 'AI绘画使用指南详细内容...',
-  },
-  {
-    id: 3,
-    title: 'AI音乐',
-    desc: '创作美妙音乐',
-    icon: 'icon-music',
-    color: '#ee0a24',
-    content: 'AI音乐创作指南详细内容...',
-  },
-  {
-    id: 4,
-    title: 'AI视频',
-    desc: '制作精彩视频',
-    icon: 'icon-video',
-    color: '#07c160',
-    content: 'AI视频制作指南详细内容...',
-  },
-])
-
-// 问题分类
-const categories = ref([
-  { id: 1, name: '账户问题', icon: 'icon-user', count: 15 },
-  { id: 2, name: '功能使用', icon: 'icon-apps', count: 23 },
-  { id: 3, name: '充值支付', icon: 'icon-money', count: 12 },
-  { id: 4, name: '技术问题', icon: 'icon-setting', count: 18 },
-  { id: 5, name: '其他问题', icon: 'icon-help', count: 8 },
-])
-
-// 使用提示
-const tips = ref([
-  {
-    id: 1,
-    title: '提高绘画质量',
-    content: '使用详细的描述词可以获得更好的绘画效果，建议加入风格、色彩、构图等关键词。',
-    icon: 'icon-bulb',
-  },
-  {
-    id: 2,
-    title: '节省算力',
-    content: '合理使用不同模型，简单问题使用GPT-3.5，复杂任务使用GPT-4。',
-    icon: 'icon-flash',
-  },
-  {
-    id: 3,
-    title: '快速上手',
-    content: '查看应用中心的预设角色，可以快速体验不同类型的AI对话。',
-    icon: 'icon-star',
-  },
-])
-
-onMounted(() => {
-  // 初始化客服消息
-  customerMessages.value = [
-    {
-      id: 1,
-      content: '您好！欢迎使用我们的AI创作平台，有什么可以帮助您的吗？',
-      isUser: false,
-      time: new Date(),
-    },
-  ]
-})
-
-// 搜索
-const onSearch = (keyword) => {
-  if (!keyword.trim()) {
-    searchResults.value = []
-    return
-  }
-
-  // 模拟搜索结果
-  const allContent = [
-    ...frequentFAQs.value.map((faq) => ({
-      id: faq.id,
-      title: faq.question,
-      content: faq.answer,
-      type: 'faq',
-    })),
-    ...guides.value.map((guide) => ({
-      id: guide.id,
-      title: guide.title,
-      content: guide.content,
-      type: 'guide',
-    })),
-  ]
-
-  searchResults.value = allContent
-    .filter((item) => item.title.includes(keyword) || item.content.includes(keyword))
-    .map((item) => ({
-      ...item,
-      snippet: getSearchSnippet(item.content, keyword),
-    }))
-}
-
-// 获取搜索摘要
-const getSearchSnippet = (content, keyword) => {
-  const cleanContent = content.replace(/<[^>]*>/g, '')
-  const index = cleanContent.toLowerCase().indexOf(keyword.toLowerCase())
-  if (index === -1) return cleanContent.substr(0, 100) + '...'
-
-  const start = Math.max(0, index - 50)
-  const end = Math.min(cleanContent.length, index + keyword.length + 50)
-  let snippet = cleanContent.substr(start, end - start)
-
-  // 高亮关键词
-  const regex = new RegExp(`(${keyword})`, 'gi')
-  snippet = snippet.replace(regex, '<mark>$1</mark>')
-
-  return (start > 0 ? '...' : '') + snippet + (end < cleanContent.length ? '...' : '')
-}
-
-// 打开指南
-const openGuide = (guide) => {
-  selectedHelp.value = {
-    title: guide.title,
-    content: guide.content || '<p>该指南内容正在完善中，敬请期待。</p>',
-  }
-  showHelpDetail.value = true
-}
-
-// 打开分类
-const openCategory = (category) => {
-  showNotify({ type: 'primary', message: `正在加载${category.name}...` })
-  // 这里可以跳转到分类详情页
-}
-
-// 打开搜索结果
-const openSearchResult = (result) => {
-  selectedHelp.value = {
-    title: result.title,
-    content: result.content,
-  }
-  showHelpDetail.value = true
-}
-
-// 点赞帮助
-const likeHelp = (help) => {
-  showSuccessToast('感谢您的反馈！')
-}
-
-// 分享帮助
-const shareHelp = (help) => {
-  if (navigator.share) {
-    navigator.share({
-      title: help.title,
-      text: help.content.replace(/<[^>]*>/g, ''),
-      url: window.location.href,
-    })
-  } else {
-    showNotify({ type: 'primary', message: '该功能暂不支持' })
-  }
-}
-
-// 打开客服
-const openCustomerService = () => {
-  showCustomerChat.value = true
-}
-
-// 发送客服消息
-const sendCustomerMessage = () => {
-  if (!customerMessage.value.trim()) return
-
-  // 添加用户消息
-  customerMessages.value.push({
-    id: Date.now(),
-    content: customerMessage.value,
-    isUser: true,
-    time: new Date(),
-  })
-
-  const userMessage = customerMessage.value
-  customerMessage.value = ''
-
-  // 滚动到底部
-  nextTick(() => {
-    if (chatMessages.value) {
-      chatMessages.value.scrollTop = chatMessages.value.scrollHeight
-    }
-  })
-
-  // 模拟客服回复
-  setTimeout(() => {
-    let reply = '感谢您的问题，我们会尽快为您处理。'
-
-    if (userMessage.includes('算力')) {
-      reply = '关于算力问题，您可以在会员中心购买算力套餐，或者通过邀请好友获得免费算力。'
-    } else if (userMessage.includes('绘画')) {
-      reply = '关于AI绘画，建议您使用详细的描述词，这样可以获得更好的效果。'
-    } else if (userMessage.includes('充值')) {
-      reply = '充值问题请您检查支付方式是否正确，如有问题可以联系技术客服。'
-    }
-
-    customerMessages.value.push({
-      id: Date.now(),
-      content: reply,
-      isUser: false,
-      time: new Date(),
-    })
-
-    nextTick(() => {
-      if (chatMessages.value) {
-        chatMessages.value.scrollTop = chatMessages.value.scrollHeight
-      }
-    })
-  }, 1000)
-}
-
-// 加入QQ群
-const joinQQGroup = () => {
-  // 尝试打开QQ群链接
-  const qqGroupUrl =
-    'mqqopensdkapi://bizAgent/qm/qr?url=http%3A%2F%2Fqm.qq.com%2Fcgi-bin%2Fqm%2Fqr%3Ffrom%3Dapp%26p%3Dandroid%26k%3D123456789'
-  window.location.href = qqGroupUrl
-
-  setTimeout(() => {
-    showNotify({ type: 'primary', message: '请在QQ中搜索群号：123456789' })
-  }, 1000)
-}
-
-// 格式化时间
-const formatTime = (time) => {
-  return time.toLocaleTimeString('zh-CN', {
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-
-// 二维码加载错误
-const onQRError = (e) => {
-  e.target.src = '/images/default-qr.png'
-}
-</script>
-
-<style lang="scss" scoped>
-.help-page {
-  min-height: 100vh;
-  background: var(--van-background);
-
-  .help-content {
-    padding: 54px 16px 20px;
-
-    .search-section {
-      margin-bottom: 20px;
-    }
-
-    .section-title {
-      font-size: 18px;
-      font-weight: 600;
-      color: var(--van-text-color);
-      margin: 0 0 16px 4px;
-    }
-
-    .faq-section {
-      margin-bottom: 24px;
-
-      :deep(.van-collapse-item) {
-        background: var(--van-cell-background);
-        border-radius: 12px;
-        margin-bottom: 8px;
-        overflow: hidden;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-
-        .van-collapse-item__title {
-          padding: 16px;
-          font-weight: 500;
-        }
-
-        .van-collapse-item__content {
-          padding: 0 16px 16px;
-
-          .faq-answer {
-            color: var(--van-gray-7);
-            line-height: 1.6;
-
-            :deep(ul),
-            :deep(ol) {
-              padding-left: 20px;
-              margin: 8px 0;
-            }
-
-            :deep(li) {
-              margin: 4px 0;
-            }
-
-            :deep(p) {
-              margin: 8px 0;
-            }
-          }
-        }
-      }
-    }
-
-    .guide-section {
-      margin-bottom: 24px;
-
-      .guide-item {
-        .guide-card {
-          background: var(--van-cell-background);
-          border-radius: 12px;
-          padding: 20px 16px;
-          text-align: center;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-          cursor: pointer;
-          transition: all 0.3s ease;
-
-          &:active {
-            transform: scale(0.98);
-          }
-
-          .guide-icon {
-            width: 50px;
-            height: 50px;
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 auto 12px;
-
-            .iconfont {
-              font-size: 24px;
-              color: white;
-            }
-          }
-
-          .guide-title {
-            font-size: 16px;
-            font-weight: 600;
-            color: var(--van-text-color);
-            margin-bottom: 8px;
-          }
-
-          .guide-desc {
-            font-size: 13px;
-            color: var(--van-gray-6);
-          }
-        }
-      }
-    }
-
-    .category-section,
-    .contact-section {
-      margin-bottom: 24px;
-
-      :deep(.van-cell-group) {
-        border-radius: 12px;
-        overflow: hidden;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-
-        .van-cell {
-          padding: 16px;
-
-          .category-icon {
-            font-size: 18px;
-            color: var(--van-primary-color);
-            margin-right: 12px;
-          }
-
-          .van-cell__title {
-            font-size: 15px;
-            font-weight: 500;
-          }
-
-          .online-status {
-            color: #07c160;
-            font-size: 12px;
-          }
-
-          .qq-number {
-            color: var(--van-gray-6);
-            font-size: 13px;
-          }
-        }
-      }
-    }
-
-    .search-results {
-      .search-snippet {
-        margin-top: 4px;
-        color: var(--van-gray-6);
-        font-size: 13px;
-        line-height: 1.4;
-
-        :deep(mark) {
-          background: var(--van-primary-color);
-          color: white;
-          padding: 1px 2px;
-          border-radius: 2px;
-        }
-      }
-    }
-
-    .tips-section {
-      .tips-swipe {
-        height: 140px;
-        border-radius: 12px;
-        overflow: hidden;
-
-        .tip-card {
-          background: linear-gradient(135deg, var(--van-primary-color), #8b5cf6);
-          color: white;
-          padding: 20px;
-          text-align: center;
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-
-          .tip-icon {
-            margin-bottom: 12px;
-
-            .iconfont {
-              font-size: 28px;
-              opacity: 0.9;
-            }
-          }
-
-          .tip-title {
-            font-size: 16px;
-            font-weight: 600;
-            margin: 0 0 8px 0;
-          }
-
-          .tip-content {
-            font-size: 13px;
-            opacity: 0.9;
-            line-height: 1.4;
-            margin: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .help-detail {
-    padding: 20px;
-    max-height: 60vh;
-    overflow-y: auto;
-
-    .detail-content {
-      color: var(--van-text-color);
-      line-height: 1.6;
-      margin-bottom: 20px;
-
-      :deep(p) {
-        margin: 8px 0;
-      }
-
-      :deep(ul),
-      :deep(ol) {
-        padding-left: 20px;
-        margin: 8px 0;
-      }
-    }
-
-    .detail-actions {
-      display: flex;
-      gap: 12px;
-
-      .van-button {
-        flex: 1;
-      }
-    }
-  }
-
-  .wechat-qr {
-    text-align: center;
-    padding: 20px;
-
-    .qr-code {
-      width: 200px;
-      height: 200px;
-      margin: 0 auto 16px;
-      border: 1px solid var(--van-border-color);
-      border-radius: 8px;
-      overflow: hidden;
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    .qr-tip {
-      font-size: 14px;
-      color: var(--van-gray-6);
-      margin: 0;
-    }
-  }
-
-  .customer-chat {
-    height: 500px;
-    display: flex;
-    flex-direction: column;
-
-    .chat-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 16px;
-      border-bottom: 1px solid var(--van-border-color);
-
-      .customer-info {
-        display: flex;
-        align-items: center;
-
-        .customer-detail {
-          margin-left: 12px;
-
-          .customer-name {
-            font-size: 15px;
-            font-weight: 500;
-            color: var(--van-text-color);
-          }
-
-          .customer-status {
-            font-size: 12px;
-
-            &.online {
-              color: #07c160;
-            }
-          }
-        }
-      }
-    }
-
-    .chat-messages {
-      flex: 1;
-      overflow-y: auto;
-      padding: 16px;
-
-      .message-item {
-        margin-bottom: 16px;
-
-        &.user-message {
-          text-align: right;
-
-          .message-content {
-            background: var(--van-primary-color);
-            color: white;
-          }
-        }
-
-        .message-content {
-          display: inline-block;
-          max-width: 80%;
-          padding: 10px 12px;
-          background: var(--van-gray-1);
-          border-radius: 8px;
-          font-size: 14px;
-          line-height: 1.4;
-        }
-
-        .message-time {
-          font-size: 11px;
-          color: var(--van-gray-5);
-          margin-top: 4px;
-        }
-      }
-    }
-
-    .chat-input {
-      padding: 16px;
-      border-top: 1px solid var(--van-border-color);
-    }
-  }
-}
-
-// 深色主题优化
-:deep(.van-theme-dark) {
-  .help-page {
-    .van-collapse-item,
-    .guide-card,
-    .van-cell-group {
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-    }
-  }
-}
-</style>
diff --git a/web/src/views/mobile/Index.vue b/web/src/views/mobile/Index.vue
index fb2d3a1d..56c70ae5 100644
--- a/web/src/views/mobile/Index.vue
+++ b/web/src/views/mobile/Index.vue
@@ -151,29 +151,23 @@ const features = ref([
     name: '音乐创作',
     icon: 'icon-mp3',
     color: '#EF4444',
-    url: '/mobile/create?tab=suno',
+    url: '/mobile/suno-create',
   },
   {
     key: 'video',
     name: '视频生成',
     icon: 'icon-video',
     color: '#10B981',
-    url: '/mobile/create?tab=video',
+    url: '/mobile/video-create',
   },
   {
     key: 'jimeng',
     name: '即梦AI',
     icon: 'icon-jimeng',
     color: '#F97316',
-    url: '/mobile/create?tab=jimeng',
-  },
-  {
-    key: 'agent',
-    name: '智能体',
-    icon: 'icon-app',
-    color: '#3B82F6',
-    url: '/mobile/apps',
+    url: '/mobile/jimeng-create',
   },
+  { key: 'agent', name: '智能体', icon: 'icon-app', color: '#3B82F6', url: '/mobile/apps' },
   {
     key: 'imgWall',
     name: '作品展示',
diff --git a/web/src/views/mobile/Invite.vue b/web/src/views/mobile/Invite.vue
index 92059fb2..52f21dbd 100644
--- a/web/src/views/mobile/Invite.vue
+++ b/web/src/views/mobile/Invite.vue
@@ -56,43 +56,18 @@
         </div>
       </div>
 
-      <!-- 邀请方式 -->
-      <div class="invite-methods">
-        <h3 class="section-title">邀请方式</h3>
-        <div class="methods-grid">
-          <div class="method-item" @click="shareToWeChat">
-            <div class="method-icon wechat">
-              <i class="iconfont icon-wechat"></i>
-            </div>
-            <div class="method-name">微信分享</div>
-          </div>
-          <div class="method-item" @click="copyInviteLink">
-            <div class="method-icon link">
-              <i class="iconfont icon-link"></i>
-            </div>
-            <div class="method-name">复制链接</div>
-          </div>
-          <div class="method-item" @click="shareQRCode">
-            <div class="method-icon qr">
-              <i class="iconfont icon-qrcode"></i>
-            </div>
-            <div class="method-name">二维码</div>
-          </div>
-          <div class="method-item" @click="shareToFriends">
-            <div class="method-icon more">
-              <i class="iconfont icon-share"></i>
-            </div>
-            <div class="method-name">更多</div>
-          </div>
-        </div>
-      </div>
-
       <!-- 邀请码 -->
       <div class="invite-code-section">
         <div class="code-card">
           <div class="code-header">
             <span class="code-label">我的邀请码</span>
-            <van-button size="small" type="primary" plain @click="copyInviteCode">
+            <van-button
+              size="small"
+              type="primary"
+              plain
+              class="copy-invite-code"
+              :data-clipboard-text="inviteCode"
+            >
               复制
             </van-button>
           </div>
@@ -100,7 +75,12 @@
           <div class="code-link">
             <van-field v-model="inviteLink" readonly placeholder="邀请链接">
               <template #button>
-                <van-button size="small" type="primary" @click="copyInviteLink">
+                <van-button
+                  size="small"
+                  type="primary"
+                  class="copy-invite-link"
+                  :data-clipboard-text="inviteLink"
+                >
                   复制链接
                 </van-button>
               </template>
@@ -113,70 +93,45 @@
       <div class="invite-records">
         <div class="records-header">
           <h3 class="section-title">邀请记录</h3>
-          <van-button size="small" type="primary" plain @click="showAllRecords = !showAllRecords">
-            {{ showAllRecords ? '收起' : '查看全部' }}
-          </van-button>
         </div>
 
         <div class="records-list">
-          <van-list
-            v-model:loading="recordsLoading"
-            :finished="recordsFinished"
-            finished-text="没有更多记录"
-            @load="loadInviteRecords"
-          >
-            <div v-for="record in displayRecords" :key="record.id" class="record-item">
+          <div v-if="inviteRecords.length > 0">
+            <div v-for="record in inviteRecords" :key="record.id" class="record-item">
               <div class="record-avatar">
-                <van-image :src="record.avatar" round width="40" height="40" />
+                <van-image
+                  :src="record.avatar || '/images/avatar/default.jpg'"
+                  round
+                  width="40"
+                  height="40"
+                  @error="onAvatarError"
+                />
               </div>
               <div class="record-info">
                 <div class="record-name">{{ record.username }}</div>
                 <div class="record-time">{{ formatTime(record.created_at) }}</div>
               </div>
               <div class="record-status">
-                <van-tag :type="record.status === 'completed' ? 'success' : 'warning'">
-                  {{ record.status === 'completed' ? '已获得奖励' : '待获得奖励' }}
-                </van-tag>
+                <van-tag type="success">已获得奖励</van-tag>
               </div>
             </div>
+          </div>
 
-            <van-empty
-              v-if="!recordsLoading && inviteRecords.length === 0"
-              description="暂无邀请记录"
-            />
-          </van-list>
+          <van-empty v-else description="暂无邀请记录" />
         </div>
       </div>
     </div>
-
-    <!-- 二维码弹窗 -->
-    <van-dialog
-      v-model:show="showQRDialog"
-      title="邀请二维码"
-      :show-cancel-button="false"
-      confirm-button-text="保存图片"
-      @confirm="saveQRCode"
-    >
-      <div class="qr-content">
-        <div ref="qrCodeRef" class="qr-code">
-          <!-- 这里应该生成实际的二维码 -->
-          <div class="qr-placeholder">
-            <i class="iconfont icon-qrcode"></i>
-            <p>邀请二维码</p>
-          </div>
-        </div>
-        <p class="qr-tip">扫描二维码或长按保存分享给好友</p>
-      </div>
-    </van-dialog>
   </div>
 </template>
 
 <script setup>
 import { checkSession } from '@/store/cache'
 import { showLoginDialog } from '@/utils/libs'
+import { httpGet } from '@/utils/http'
 import { showNotify, showSuccessToast } from 'vant'
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import Clipboard from 'clipboard'
 
 const router = useRouter()
 const userStats = ref({
@@ -187,204 +142,126 @@ const userStats = ref({
 const inviteCode = ref('')
 const inviteLink = ref('')
 const inviteRecords = ref([])
-const recordsLoading = ref(false)
-const recordsFinished = ref(false)
-const showAllRecords = ref(false)
-const showQRDialog = ref(false)
-const qrCodeRef = ref()
 
 // 奖励规则配置
-const rewardRules = ref([
-  {
-    id: 1,
-    title: '好友注册',
-    desc: '好友通过邀请链接成功注册',
-    icon: 'icon-user-plus',
-    color: '#1989fa',
-    reward: 50,
-  },
-  {
-    id: 2,
-    title: '好友首次充值',
-    desc: '好友首次充值任意金额',
-    icon: 'icon-money',
-    color: '#07c160',
-    reward: 100,
-  },
-  {
-    id: 3,
-    title: '好友活跃使用',
-    desc: '好友连续使用7天',
-    icon: 'icon-star',
-    color: '#ff9500',
-    reward: 200,
-  },
-])
+const rewardRules = ref([])
 
-// 显示的记录（根据showAllRecords决定）
-const displayRecords = computed(() => {
-  return showAllRecords.value ? inviteRecords.value : inviteRecords.value.slice(0, 5)
-})
+// clipboard实例
+const clipboard = ref(null)
 
 onMounted(() => {
   initPage()
 })
 
+onUnmounted(() => {
+  // 清理clipboard实例
+  if (clipboard.value) {
+    clipboard.value.destroy()
+  }
+})
+
 const initPage = async () => {
   try {
     const user = await checkSession()
 
-    // 生成邀请码和链接
-    inviteCode.value = user.invite_code || generateInviteCode()
-    inviteLink.value = `${location.origin}/register?invite=${inviteCode.value}`
-
-    // 获取用户邀请统计
+    // 获取邀请统计（包含邀请码和链接）
     fetchInviteStats()
 
-    // 加载邀请记录
-    loadInviteRecords()
+    // 获取奖励规则
+    fetchRewardRules()
+
+    // 一次性加载邀请记录
+    await loadInviteRecords()
+
+    // 初始化clipboard
+    initClipboard()
   } catch (error) {
     showLoginDialog(router)
   }
 }
 
-const generateInviteCode = () => {
-  return Math.random().toString(36).substr(2, 8).toUpperCase()
-}
-
-const fetchInviteStats = () => {
-  // 这里应该调用实际的API
-  // httpGet('/api/user/invite/stats').then(res => {
-  //   userStats.value = res.data
-  // })
-
-  // 临时使用模拟数据
-  userStats.value = {
-    inviteCount: Math.floor(Math.random() * 50),
-    rewardTotal: Math.floor(Math.random() * 5000),
-    todayInvite: Math.floor(Math.random() * 5),
-  }
-}
-
-const loadInviteRecords = () => {
-  if (recordsFinished.value) return
-
-  recordsLoading.value = true
-
-  // 模拟API调用
-  setTimeout(() => {
-    const mockRecords = generateMockRecords()
-    inviteRecords.value.push(...mockRecords)
-
-    recordsLoading.value = false
-
-    // 模拟数据加载完成
-    if (inviteRecords.value.length >= 20) {
-      recordsFinished.value = true
+const fetchInviteStats = async () => {
+  try {
+    const res = await httpGet('/api/invite/stats')
+    userStats.value = {
+      inviteCount: res.data.invite_count,
+      rewardTotal: res.data.reward_total,
+      todayInvite: res.data.today_invite,
+    }
+    inviteCode.value = res.data.invite_code
+    inviteLink.value = res.data.invite_link
+  } catch (error) {
+    console.error('获取邀请统计失败:', error)
+    // 使用默认值
+    userStats.value = {
+      inviteCount: 0,
+      rewardTotal: 0,
+      todayInvite: 0,
     }
-  }, 1000)
-}
-
-const generateMockRecords = () => {
-  const records = []
-  const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十']
-
-  for (let i = 0; i < 10; i++) {
-    records.push({
-      id: Date.now() + i,
-      username: names[i % names.length] + (i + 1),
-      avatar: '/images/avatar/default.jpg',
-      status: Math.random() > 0.3 ? 'completed' : 'pending',
-      created_at: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString(),
-    })
   }
-
-  return records
 }
 
-const formatTime = (timeStr) => {
-  const date = new Date(timeStr)
+const fetchRewardRules = async () => {
+  try {
+    const res = await httpGet('/api/invite/rules')
+    rewardRules.value = res.data
+  } catch (error) {
+    console.error('获取奖励规则失败:', error)
+  }
+}
+
+const loadInviteRecords = async () => {
+  try {
+    const res = await httpGet('/api/invite/list', {
+      page: 1, // 加载第一页
+      page_size: 20,
+    })
+    console.log('邀请记录API返回:', res.data) // 调试日志
+    inviteRecords.value = res.data.items || []
+    console.log('设置邀请记录:', inviteRecords.value) // 调试日志
+
+    // 调试头像信息
+    if (inviteRecords.value.length > 0) {
+      console.log('第一条记录头像:', inviteRecords.value[0].avatar)
+    }
+  } catch (error) {
+    console.error('获取邀请记录失败:', error)
+  }
+}
+
+const formatTime = (timestamp) => {
+  const date = new Date(timestamp * 1000) // 转换为毫秒
   return date.toLocaleDateString()
 }
 
-// 分享到微信
-const shareToWeChat = () => {
-  if (typeof WeixinJSBridge !== 'undefined') {
-    // 在微信中分享
-    WeixinJSBridge.invoke('sendAppMessage', {
-      title: '邀请你使用AI创作平台',
-      desc: '强大的AI工具，让创作更简单',
-      link: inviteLink.value,
-      imgUrl: `${location.origin}/images/share-logo.png`,
-    })
-  } else {
-    // 复制链接提示
-    copyInviteLink()
-    showNotify({ type: 'primary', message: '请在微信中打开链接进行分享' })
+// 初始化clipboard
+const initClipboard = () => {
+  // 销毁之前的实例
+  if (clipboard.value) {
+    clipboard.value.destroy()
   }
-}
 
-// 复制邀请码
-const copyInviteCode = async () => {
-  try {
-    await navigator.clipboard.writeText(inviteCode.value)
-    showSuccessToast('邀请码已复制')
-  } catch (err) {
-    // 降级方案
-    const textArea = document.createElement('textarea')
-    textArea.value = inviteCode.value
-    document.body.appendChild(textArea)
-    textArea.select()
-    document.execCommand('copy')
-    document.body.removeChild(textArea)
-    showSuccessToast('邀请码已复制')
-  }
-}
+  // 创建新的clipboard实例
+  clipboard.value = new Clipboard('.copy-invite-code, .copy-invite-link')
 
-// 复制邀请链接
-const copyInviteLink = async () => {
-  try {
-    await navigator.clipboard.writeText(inviteLink.value)
-    showSuccessToast('邀请链接已复制')
-  } catch (err) {
-    // 降级方案
-    const textArea = document.createElement('textarea')
-    textArea.value = inviteLink.value
-    document.body.appendChild(textArea)
-    textArea.select()
-    document.execCommand('copy')
-    document.body.removeChild(textArea)
-    showSuccessToast('邀请链接已复制')
-  }
-}
+  clipboard.value.on('success', () => {
+    showSuccessToast('复制成功')
+  })
 
-// 显示二维码
-const shareQRCode = () => {
-  showQRDialog.value = true
-}
-
-// 保存二维码
-const saveQRCode = () => {
-  showNotify({ type: 'primary', message: '请长按二维码保存到相册' })
-}
-
-// 更多分享方式
-const shareToFriends = () => {
-  if (navigator.share) {
-    navigator.share({
-      title: '邀请你使用AI创作平台',
-      text: '强大的AI工具，让创作更简单',
-      url: inviteLink.value,
-    })
-  } else {
-    copyInviteLink()
-  }
+  clipboard.value.on('error', () => {
+    showNotify({ type: 'danger', message: '复制失败' })
+  })
 }
 
 // 图片加载错误处理
 const onImageError = (e) => {
   e.target.src = '/images/img-holder.png'
 }
+
+// 头像加载错误处理
+const onAvatarError = (e) => {
+  e.target.src = '/images/avatar/default.jpg'
+}
 </script>
 
 <style lang="scss" scoped>
@@ -393,8 +270,6 @@ const onImageError = (e) => {
   background: var(--van-background);
 
   .invite-content {
-    padding-top: 46px;
-
     .invite-header {
       position: relative;
       height: 200px;
@@ -469,7 +344,6 @@ const onImageError = (e) => {
     }
 
     .rules-section,
-    .invite-methods,
     .invite-code-section,
     .invite-records {
       padding: 0 16px 16px;
@@ -541,65 +415,6 @@ const onImageError = (e) => {
       }
     }
 
-    .methods-grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 16px;
-
-      .method-item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 20px 16px;
-        background: var(--van-cell-background);
-        border-radius: 12px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-        cursor: pointer;
-        transition: all 0.3s ease;
-
-        &:active {
-          transform: scale(0.95);
-        }
-
-        .method-icon {
-          width: 44px;
-          height: 44px;
-          border-radius: 12px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-bottom: 8px;
-
-          &.wechat {
-            background: #07c160;
-          }
-
-          &.link {
-            background: #1989fa;
-          }
-
-          &.qr {
-            background: #8b5cf6;
-          }
-
-          &.more {
-            background: #ff9500;
-          }
-
-          .iconfont {
-            font-size: 20px;
-            color: white;
-          }
-        }
-
-        .method-name {
-          font-size: 12px;
-          color: var(--van-text-color);
-          text-align: center;
-        }
-      }
-    }
-
     .invite-code-section {
       .code-card {
         background: var(--van-cell-background);
@@ -675,44 +490,6 @@ const onImageError = (e) => {
       }
     }
   }
-
-  .qr-content {
-    text-align: center;
-    padding: 20px;
-
-    .qr-code {
-      width: 200px;
-      height: 200px;
-      margin: 0 auto 16px;
-      border: 1px solid var(--van-border-color);
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--van-background-2);
-
-      .qr-placeholder {
-        text-align: center;
-        color: var(--van-gray-6);
-
-        .iconfont {
-          font-size: 48px;
-          margin-bottom: 8px;
-        }
-
-        p {
-          margin: 0;
-          font-size: 14px;
-        }
-      }
-    }
-
-    .qr-tip {
-      font-size: 13px;
-      color: var(--van-gray-6);
-      margin: 0;
-    }
-  }
 }
 
 // 深色主题优化
diff --git a/web/src/views/mobile/Member.vue b/web/src/views/mobile/Member.vue
index c8148939..c94e1af4 100644
--- a/web/src/views/mobile/Member.vue
+++ b/web/src/views/mobile/Member.vue
@@ -1,36 +1,9 @@
 <template>
   <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-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-item">
-            <div class="stat-value">{{ userInfo.invite_count || 0 }}</div>
-            <div class="stat-label">邀请人数</div>
-          </div>
-        </div>
-      </div>
-
       <!-- 产品套餐 -->
       <div class="products-section">
-        <h3 class="section-title">充值套餐</h3>
+        <div class="text-center bg-[#7c3aed] text-white rounded-lg p-3 mb-4">充值套餐</div>
         <!-- <div class="info-alert" v-if="vipInfoText">
           <van-notice-bar
             :text="vipInfoText"
@@ -73,7 +46,6 @@
               </div>
 
               <div class="payment-methods">
-                <div class="methods-title">支付方式：</div>
                 <div class="methods-grid">
                   <van-button
                     v-for="payWay in payWays"
@@ -167,7 +139,6 @@ import { computed, onMounted, ref } from 'vue'
 // 响应式数据
 const list = ref([])
 const vipImg = ref('/images/menu/member.png')
-const userInfo = ref({})
 const isLogin = ref(false)
 const loading = ref(true)
 const loadingText = ref('加载中...')
@@ -187,24 +158,6 @@ 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
-  return expiredTime > now
-})
-
-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 userAvatar = computed(() => {
-  return userInfo.value.avatar || '/images/avatar/default.jpg'
-})
-
 // 支付按钮颜色
 const getPayButtonColor = (payType) => {
   const colors = {
@@ -248,7 +201,6 @@ const getPayButtonText = (payType) => {
 onMounted(() => {
   checkSession()
     .then((user) => {
-      userInfo.value = user
       isLogin.value = true
     })
     .catch(() => {
@@ -310,7 +262,7 @@ const pay = (product, payWay) => {
     product_id: product.id,
     pay_way: payWay.pay_way,
     pay_type: payWay.pay_type,
-    user_id: userInfo.value.id,
+    user_id: 0, // 移除用户ID依赖
     host: host,
     device: 'mobile',
   })
@@ -343,10 +295,6 @@ const payCallback = (success) => {
   if (success) {
     showSuccessToast('支付成功！')
     userOrderKey.value += 1
-    // 刷新用户信息
-    checkSession().then((user) => {
-      userInfo.value = user
-    })
   }
 }
 
@@ -356,10 +304,6 @@ const redeemCallback = (success) => {
 
   if (success) {
     showSuccessToast('卡密兑换成功！')
-    // 刷新用户信息
-    checkSession().then((user) => {
-      userInfo.value = user
-    })
   }
 }
 </script>
@@ -372,66 +316,6 @@ const redeemCallback = (success) => {
   .member-content {
     padding: 20px 16px;
 
-    .user-card {
-      background: linear-gradient(135deg, var(--van-primary-color), #8b5cf6);
-      border-radius: 16px;
-      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: 20px;
-
-        .user-avatar {
-          margin-right: 16px;
-        }
-
-        .user-info {
-          flex: 1;
-
-          .username {
-            font-size: 20px;
-            font-weight: 600;
-            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;
-        justify-content: space-around;
-
-        .stat-item {
-          text-align: center;
-
-          .stat-value {
-            font-size: 24px;
-            font-weight: 700;
-            margin-bottom: 4px;
-          }
-
-          .stat-label {
-            font-size: 12px;
-            opacity: 0.8;
-          }
-        }
-      }
-    }
-
     .section-title {
       font-size: 18px;
       font-weight: 600;
@@ -653,18 +537,6 @@ const redeemCallback = (success) => {
     .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;
 
diff --git a/web/src/views/mobile/PowerLog.vue b/web/src/views/mobile/PowerLog.vue
index 16a6580c..662a2f61 100644
--- a/web/src/views/mobile/PowerLog.vue
+++ b/web/src/views/mobile/PowerLog.vue
@@ -28,19 +28,7 @@
       </div>
 
       <!-- 筛选栏 -->
-      <div class="filter-bar">
-        <CustomTabs
-          :model-value="activeType"
-          @update:model-value="activeType = $event"
-          @tab-click="onTypeChange"
-        >
-          <CustomTabPane name="all" label="全部" />
-          <CustomTabPane name="chat" label="对话" />
-          <CustomTabPane name="image" label="绘画" />
-          <CustomTabPane name="music" label="音乐" />
-          <CustomTabPane name="video" label="视频" />
-        </CustomTabs>
-      </div>
+      <div class="filter-bar" style="display: none"></div>
 
       <!-- 日志列表 -->
       <div class="log-list">
@@ -62,17 +50,26 @@
                   <i class="iconfont" :class="getTypeIcon(item.type)"></i>
                 </div>
                 <div class="log-info">
-                  <div class="log-title">{{ item.title }}</div>
+                  <div class="log-title">
+                    {{ item.model || getTypeTitle(item.type) }}
+                    <van-tag type="primary" class="ml-2">{{ item.type_str }}</van-tag>
+                  </div>
                   <div class="log-time">{{ formatTime(item.created_at) }}</div>
                 </div>
                 <div class="log-cost">
-                  <span class="cost-value">-{{ item.cost }}</span>
+                  <span class="cost-value" :class="{ income: item.mark === 1 }">
+                    {{ item.mark === 1 ? '+' : '-' }}{{ item.amount }}
+                  </span>
                   <span class="cost-unit">算力</span>
                 </div>
               </div>
               <div class="log-detail" v-if="item.remark">
                 <van-text-ellipsis :content="item.remark" expand-text="展开" collapse-text="收起" />
               </div>
+              <div class="log-balance" v-if="item.balance !== undefined">
+                <span class="balance-label">余额：</span>
+                <span class="balance-value">{{ item.balance }}</span>
+              </div>
             </div>
 
             <!-- 空状态 -->
@@ -81,74 +78,21 @@
         </van-pull-refresh>
       </div>
     </div>
-
-    <!-- 筛选弹窗 -->
-    <van-action-sheet
-      :model-value="showFilter"
-      @update:model-value="showFilter = $event"
-      title="筛选条件"
-    >
-      <div class="filter-content">
-        <van-form>
-          <van-field label="时间范围">
-            <template #input>
-              <van-button size="small" @click="showDatePicker = true">
-                {{
-                  dateRange.start && dateRange.end
-                    ? `${dateRange.start} 至 ${dateRange.end}`
-                    : '选择时间'
-                }}
-              </van-button>
-            </template>
-          </van-field>
-          <van-field label="消费类型">
-            <template #input>
-              <van-radio-group v-model="filterType" direction="horizontal">
-                <van-radio name="all">全部</van-radio>
-                <van-radio name="chat">对话</van-radio>
-                <van-radio name="image">绘画</van-radio>
-                <van-radio name="music">音乐</van-radio>
-              </van-radio-group>
-            </template>
-          </van-field>
-        </van-form>
-        <div class="filter-actions">
-          <van-button @click="resetFilter">重置</van-button>
-          <van-button type="primary" @click="applyFilter">确定</van-button>
-        </div>
-      </div>
-    </van-action-sheet>
-
-    <!-- 日期选择器 -->
-    <van-calendar
-      :model-value="showDatePicker"
-      @update:model-value="showDatePicker = $event"
-      type="range"
-      @confirm="onDateConfirm"
-      :max-date="new Date()"
-    />
   </div>
 </template>
 
 <script setup>
-import CustomTabPane from '@/components/ui/CustomTabPane.vue'
-import CustomTabs from '@/components/ui/CustomTabs.vue'
 import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { httpPost, httpGet } from '@/utils/http'
+import { checkSession } from '@/store/cache'
+import { ElMessage } from 'element-plus'
 
 const router = useRouter()
 const loading = ref(false)
 const finished = ref(false)
 const refreshing = ref(false)
 const logList = ref([])
-const activeType = ref('all')
-const showFilter = ref(false)
-const showDatePicker = ref(false)
-const filterType = ref('all')
-const dateRange = ref({
-  start: '',
-  end: '',
-})
 
 // 统计数据
 const stats = ref({
@@ -158,123 +102,105 @@ const stats = ref({
 })
 
 // 分页参数
-const pageParams = ref({
-  page: 1,
-  limit: 20,
-  type: 'all',
-})
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(10)
 
 onMounted(() => {
-  fetchStats()
-  onLoad()
+  checkSession()
+    .then(() => {
+      fetchStats()
+      fetchData()
+    })
+    .catch(() => {})
 })
 
 // 获取统计数据
 const fetchStats = () => {
-  // 这里应该调用实际的API
-  // httpGet('/api/user/power/stats').then(res => {
-  //   stats.value = res.data
-  // })
-
-  // 临时使用模拟数据
-  stats.value = {
-    total: Math.floor(Math.random() * 10000),
-    today: Math.floor(Math.random() * 100),
-    balance: Math.floor(Math.random() * 1000),
-  }
+  // 调用后端统计API
+  httpGet('/api/powerLog/stats')
+    .then((res) => {
+      if (res.data) {
+        stats.value = {
+          total: res.data.total || 0,
+          today: res.data.today || 0,
+          balance: res.data.balance || 0,
+        }
+      }
+    })
+    .catch((e) => {
+      console.error('获取统计数据失败:', e)
+      // 使用默认值
+      stats.value = {
+        total: 0,
+        today: 0,
+        balance: 0,
+      }
+    })
 }
 
-// 加载日志列表
+// 获取数据
+const fetchData = () => {
+  loading.value = true
+  httpPost('/api/powerLog/list', {
+    model: '', // 移除筛选参数
+    date: [], // 移除筛选参数
+    page: page.value,
+    page_size: pageSize.value,
+  })
+    .then((res) => {
+      const items = res.data.items || []
+      if (items.length === 0) {
+        finished.value = true
+        return
+      }
+      if (page.value === 1) {
+        logList.value = items
+      } else {
+        logList.value.push(...res.data.items)
+      }
+      total.value = res.data.total
+      // 判断是否加载完成
+      if (logList.value.length >= total.value) {
+        finished.value = true
+      }
+    })
+    .catch((e) => {
+      loading.value = false
+      refreshing.value = false
+      ElMessage.error('获取数据失败：' + e.message)
+    })
+    .finally(() => {
+      loading.value = false
+      refreshing.value = false
+    })
+}
+
+// 加载更多
 const onLoad = () => {
   if (finished.value) return
-
-  loading.value = true
-
-  // 模拟API调用
-  setTimeout(() => {
-    const mockData = generateMockData(pageParams.value.page, pageParams.value.limit)
-
-    if (pageParams.value.page === 1) {
-      logList.value = mockData
-    } else {
-      logList.value.push(...mockData)
-    }
-
-    loading.value = false
-    pageParams.value.page++
-
-    // 模拟数据加载完成
-    if (pageParams.value.page > 5) {
-      finished.value = true
-    }
-  }, 1000)
+  page.value++
+  fetchData()
 }
 
 // 下拉刷新
 const onRefresh = () => {
   finished.value = false
-  pageParams.value.page = 1
+  page.value = 1
   refreshing.value = true
-
-  setTimeout(() => {
-    logList.value = generateMockData(1, pageParams.value.limit)
-    refreshing.value = false
-    pageParams.value.page = 2
-  }, 1000)
-}
-
-// 类型切换
-const onTypeChange = (type) => {
-  pageParams.value.type = type
-  pageParams.value.page = 1
-  finished.value = false
-  logList.value = []
-  onLoad()
-}
-
-// 生成模拟数据
-const generateMockData = (page, limit) => {
-  const types = ['chat', 'image', 'music', 'video']
-  const titles = {
-    chat: ['GPT-4对话', 'Claude对话', '智能助手'],
-    image: ['MidJourney生成', 'Stable Diffusion', 'DALL-E创作'],
-    music: ['Suno音乐创作', '音频生成'],
-    video: ['视频生成', 'Luma创作'],
-  }
-
-  const data = []
-  const startIndex = (page - 1) * limit
-
-  for (let i = 0; i < limit; i++) {
-    const id = startIndex + i + 1
-    const type = types[Math.floor(Math.random() * types.length)]
-    const title = titles[type][Math.floor(Math.random() * titles[type].length)]
-
-    // 如果有类型筛选且不匹配，跳过
-    if (pageParams.value.type !== 'all' && type !== pageParams.value.type) {
-      continue
-    }
-
-    data.push({
-      id,
-      type,
-      title,
-      cost: Math.floor(Math.random() * 50) + 1,
-      remark: Math.random() > 0.5 ? '消费详情：使用高级模型进行AI创作，效果优质' : '',
-      created_at: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString(),
-    })
-  }
-
-  return data
+  fetchData()
 }
 
 // 获取类型图标
 const getTypeIcon = (type) => {
   const icons = {
-    chat: 'icon-chat',
-    image: 'icon-mj',
-    music: 'icon-music',
-    video: 'icon-video',
+    1: 'icon-recharge', // 充值
+    2: 'icon-chat', // 消费
+    3: 'icon-withdraw-log', // 退款
+    4: 'icon-yaoqm', // 邀请
+    5: 'icon-redeem', // 兑换
+    6: 'icon-present', // 赠送
+    7: 'icon-linggan', // 签到
   }
   return icons[type] || 'icon-chat'
 }
@@ -282,17 +208,34 @@ const getTypeIcon = (type) => {
 // 获取类型颜色
 const getTypeColor = (type) => {
   const colors = {
-    chat: '#1989fa',
-    image: '#8B5CF6',
-    music: '#ee0a24',
-    video: '#07c160',
+    1: '#07c160', // 充值 - 绿色
+    2: '#1989fa', // 消费 - 蓝色
+    3: '#ff976a', // 退款 - 橙色
+    4: '#8B5CF6', // 邀请 - 紫色
+    5: '#ee0a24', // 兑换 - 红色
+    6: '#07c160', // 赠送 - 绿色
+    7: '#1989fa', // 签到 - 蓝色
   }
   return colors[type] || '#1989fa'
 }
 
+// 获取类型标题
+const getTypeTitle = (type) => {
+  const titles = {
+    1: '充值',
+    2: '消费',
+    3: '退款',
+    4: '邀请奖励',
+    5: '兑换',
+    6: '系统赠送',
+    7: '每日签到',
+  }
+  return titles[type] || '其他'
+}
+
 // 格式化时间
-const formatTime = (timeStr) => {
-  const date = new Date(timeStr)
+const formatTime = (timestamp) => {
+  const date = new Date(timestamp * 1000)
   const now = new Date()
   const diff = now - date
 
@@ -310,32 +253,7 @@ const formatTime = (timeStr) => {
   }
 }
 
-// 日期选择确认
-const onDateConfirm = (values) => {
-  const [start, end] = values
-  dateRange.value = {
-    start: start.toLocaleDateString(),
-    end: end.toLocaleDateString(),
-  }
-  showDatePicker.value = false
-}
-
-// 重置筛选
-const resetFilter = () => {
-  filterType.value = 'all'
-  dateRange.value = { start: '', end: '' }
-}
-
-// 应用筛选
-const applyFilter = () => {
-  activeType.value = filterType.value
-  pageParams.value.type = filterType.value
-  pageParams.value.page = 1
-  finished.value = false
-  logList.value = []
-  showFilter.value = false
-  onLoad()
-}
+// 移除 showFilter, showDatePicker, query.date, onDateButtonClick, onDateConfirm, resetFilter, applyFilter 相关逻辑
 </script>
 
 <style lang="scss" scoped>
@@ -344,8 +262,6 @@ const applyFilter = () => {
   background: var(--van-background);
 
   .power-content {
-    padding-top: 46px;
-
     .stats-overview {
       padding: 16px;
       background: linear-gradient(135deg, var(--van-primary-color), #8b5cf6);
@@ -377,9 +293,16 @@ const applyFilter = () => {
     .filter-bar {
       background: var(--van-background);
       border-bottom: 1px solid var(--van-border-color);
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+
+      .filter-actions {
+        margin-left: 12px;
+      }
 
       :deep(.van-tabs__nav) {
-        padding: 0 16px;
+        padding: 0;
       }
 
       :deep(.van-tab) {
@@ -439,6 +362,10 @@ const applyFilter = () => {
               font-size: 16px;
               font-weight: 600;
               color: #ee0a24;
+
+              &.income {
+                color: #07c160;
+              }
             }
 
             .cost-unit {
@@ -460,6 +387,21 @@ const applyFilter = () => {
             line-height: 1.4;
           }
         }
+
+        .log-balance {
+          margin-top: 8px;
+          font-size: 12px;
+          color: var(--van-gray-6);
+
+          .balance-label {
+            margin-right: 4px;
+          }
+
+          .balance-value {
+            font-weight: 500;
+            color: var(--van-text-color);
+          }
+        }
       }
     }
   }
diff --git a/web/src/views/mobile/Settings.vue b/web/src/views/mobile/Settings.vue
index f6a937f9..4dc8f37c 100644
--- a/web/src/views/mobile/Settings.vue
+++ b/web/src/views/mobile/Settings.vue
@@ -148,7 +148,7 @@
               <span class="setting-value">v{{ appVersion }}</span>
             </template>
           </van-cell>
-          <van-cell title="帮助中心" is-link @click="router.push('/mobile/help')">
+          <van-cell title="帮助中心" is-link @click="showAbout = true">
             <template #icon>
               <i class="iconfont icon-help setting-icon"></i>
             </template>
diff --git a/web/src/views/mobile/Tools.vue b/web/src/views/mobile/Tools.vue
deleted file mode 100644
index 90b13309..00000000
--- a/web/src/views/mobile/Tools.vue
+++ /dev/null
@@ -1,756 +0,0 @@
-<template>
-  <div class="tools-page">
-    <div class="tools-content">
-      <!-- 工具分类 -->
-      <CustomTabs
-        :model-value="activeCategory"
-        @update:model-value="activeCategory = $event"
-        @tab-click="onCategoryChange"
-      >
-        <CustomTabPane name="all" label="全部" />
-        <CustomTabPane name="office" label="办公工具" />
-        <CustomTabPane name="creative" label="创意工具" />
-        <CustomTabPane name="study" label="学习工具" />
-        <CustomTabPane name="life" label="生活工具" />
-      </CustomTabs>
-
-      <!-- 工具列表 -->
-      <div class="tools-list">
-        <div
-          v-for="tool in filteredTools"
-          :key="tool.key"
-          class="tool-item"
-          @click="openTool(tool)"
-        >
-          <div class="tool-header">
-            <div class="tool-icon" :style="{ backgroundColor: tool.color }">
-              <i class="iconfont" :class="tool.icon"></i>
-            </div>
-            <div class="tool-info">
-              <div class="tool-name">{{ tool.name }}</div>
-              <div class="tool-desc">{{ tool.desc }}</div>
-            </div>
-            <div class="tool-status">
-              <van-tag :type="tool.status === 'available' ? 'success' : 'warning'" size="medium">
-                {{ tool.status === 'available' ? '可用' : '开发中' }}
-              </van-tag>
-            </div>
-          </div>
-
-          <div class="tool-features" v-if="tool.features">
-            <van-tag
-              v-for="feature in tool.features"
-              :key="feature"
-              size="small"
-              plain
-              class="feature-tag"
-            >
-              {{ feature }}
-            </van-tag>
-          </div>
-
-          <div class="tool-stats" v-if="tool.stats">
-            <div class="stat-item">
-              <span class="stat-label">使用次数：</span>
-              <span class="stat-value">{{ tool.stats.usageCount }}次</span>
-            </div>
-            <div class="stat-item">
-              <span class="stat-label">好评率：</span>
-              <span class="stat-value">{{ tool.stats.rating }}%</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 空状态 -->
-        <van-empty v-if="filteredTools.length === 0" description="该分类暂无工具" />
-      </div>
-
-      <!-- 推荐工具 -->
-      <div class="recommend-section" v-if="activeCategory === 'all'">
-        <h3 class="section-title">推荐工具</h3>
-        <van-swipe :autoplay="3000" class="recommend-swipe">
-          <van-swipe-item v-for="tool in recommendTools" :key="tool.key">
-            <div class="recommend-card" @click="openTool(tool)">
-              <div class="recommend-bg" :style="{ backgroundColor: tool.color }">
-                <i class="iconfont" :class="tool.icon"></i>
-              </div>
-              <div class="recommend-content">
-                <h4 class="recommend-title">{{ tool.name }}</h4>
-                <p class="recommend-desc">{{ tool.desc }}</p>
-                <van-button size="small" type="primary" plain round> 立即使用 </van-button>
-              </div>
-            </div>
-          </van-swipe-item>
-        </van-swipe>
-      </div>
-    </div>
-
-    <!-- 工具详情弹窗 -->
-    <van-action-sheet
-      :model-value="showToolDetail"
-      @update:model-value="showToolDetail = $event"
-      :title="selectedTool && selectedTool.name"
-    >
-      <div class="tool-detail" v-if="selectedTool">
-        <div class="detail-header">
-          <div class="detail-icon" :style="{ backgroundColor: selectedTool.color }">
-            <i class="iconfont" :class="selectedTool.icon"></i>
-          </div>
-          <div class="detail-info">
-            <h3 class="detail-name">{{ selectedTool.name }}</h3>
-            <p class="detail-desc">{{ selectedTool.fullDesc || selectedTool.desc }}</p>
-          </div>
-        </div>
-
-        <div class="detail-features" v-if="selectedTool.detailFeatures">
-          <h4 class="features-title">功能特点</h4>
-          <ul class="features-list">
-            <li v-for="feature in selectedTool.detailFeatures" :key="feature">
-              <van-icon name="checked" color="#07c160" />
-              {{ feature }}
-            </li>
-          </ul>
-        </div>
-
-        <div class="detail-usage" v-if="selectedTool.usage">
-          <h4 class="usage-title">使用说明</h4>
-          <p class="usage-text">{{ selectedTool.usage }}</p>
-        </div>
-
-        <div class="detail-actions">
-          <van-button
-            type="primary"
-            size="large"
-            round
-            block
-            :disabled="selectedTool.status !== 'available'"
-            @click="useTool(selectedTool)"
-          >
-            {{ selectedTool.status === 'available' ? '开始使用' : '开发中' }}
-          </van-button>
-        </div>
-      </div>
-    </van-action-sheet>
-
-    <!-- 思维导图工具 -->
-    <van-action-sheet
-      :model-value="showMindMap"
-      @update:model-value="showMindMap = $event"
-      title="思维导图"
-      :close-on-click-overlay="false"
-    >
-      <div class="mindmap-container">
-        <div class="mindmap-toolbar">
-          <van-button size="small" @click="createNewMap">新建</van-button>
-          <van-button size="small" @click="saveMap">保存</van-button>
-          <van-button size="small" @click="exportMap">导出</van-button>
-          <van-button size="small" @click="closeMindMap">关闭</van-button>
-        </div>
-        <div class="mindmap-canvas" ref="mindmapCanvas">
-          <!-- 这里会渲染思维导图 -->
-          <div class="canvas-placeholder">
-            <i class="iconfont icon-mind"></i>
-            <p>思维导图工具</p>
-            <p class="placeholder-desc">功能开发中，敬请期待</p>
-          </div>
-        </div>
-      </div>
-    </van-action-sheet>
-  </div>
-</template>
-
-<script setup>
-import CustomTabPane from '@/components/ui/CustomTabPane.vue'
-import CustomTabs from '@/components/ui/CustomTabs.vue'
-import { showNotify } from 'vant'
-import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const activeCategory = ref('all')
-const selectedTool = ref(null)
-const showToolDetail = ref(false)
-const showMindMap = ref(false)
-const mindmapCanvas = ref()
-
-// 工具列表配置
-const tools = ref([
-  {
-    key: 'mindmap',
-    name: '思维导图',
-    desc: '智能生成思维导图，整理思路更清晰',
-    fullDesc:
-      '基于AI技术的智能思维导图生成工具，可以根据文本内容自动生成结构化的思维导图，支持多种导出格式。',
-    icon: 'icon-mind',
-    color: '#3B82F6',
-    category: 'office',
-    status: 'available',
-    features: ['自动生成', '多种模板', '智能布局'],
-    detailFeatures: [
-      '支持文本自动转思维导图',
-      '提供多种精美模板',
-      '智能节点布局算法',
-      '支持导出多种格式',
-      '支持在线协作编辑',
-    ],
-    usage:
-      '输入您的文本内容，AI会自动分析并生成对应的思维导图结构。您可以对生成的导图进行编辑、美化和导出。',
-    stats: {
-      usageCount: 1256,
-      rating: 96,
-    },
-  },
-  {
-    key: 'summary',
-    name: '文档总结',
-    desc: '快速提取文档要点，生成精准摘要',
-    fullDesc: '智能文档总结工具，能够快速分析长文档并提取关键信息，生成简洁明了的摘要。',
-    icon: 'icon-doc',
-    color: '#10B981',
-    category: 'office',
-    status: 'available',
-    features: ['关键词提取', '智能摘要', '多语言支持'],
-    detailFeatures: [
-      '支持多种文档格式',
-      '智能关键词提取',
-      '可控制摘要长度',
-      '支持批量处理',
-      '多语言文档支持',
-    ],
-    usage: '上传或粘贴文档内容，选择摘要长度和类型，AI会自动生成文档摘要。',
-    stats: {
-      usageCount: 2341,
-      rating: 94,
-    },
-  },
-  {
-    key: 'translation',
-    name: '智能翻译',
-    desc: '高质量多语言翻译，支持专业术语',
-    fullDesc: '基于先进AI模型的多语言翻译工具，支持100+语言互译，特别适合专业文档翻译。',
-    icon: 'icon-translate',
-    color: '#8B5CF6',
-    category: 'office',
-    status: 'available',
-    features: ['100+语言', '专业术语', '上下文理解'],
-    detailFeatures: [
-      '支持100多种语言互译',
-      '专业术语库支持',
-      '上下文语境理解',
-      '批量文档翻译',
-      '翻译质量评估',
-    ],
-    usage: '选择源语言和目标语言，输入需要翻译的内容，AI会提供高质量的翻译结果。',
-    stats: {
-      usageCount: 5678,
-      rating: 98,
-    },
-  },
-  {
-    key: 'poster',
-    name: '海报设计',
-    desc: '一键生成专业海报，多种风格可选',
-    fullDesc: 'AI驱动的海报设计工具，提供丰富的模板和素材，轻松制作专业级海报。',
-    icon: 'icon-design',
-    color: '#F59E0B',
-    category: 'creative',
-    status: 'available',
-    features: ['模板丰富', '一键生成', '高清输出'],
-    detailFeatures: [
-      '500+精美模板',
-      '智能配色方案',
-      '自动排版布局',
-      '高清无水印导出',
-      '支持自定义尺寸',
-    ],
-    usage: '选择海报类型和风格，输入文案内容，AI会自动生成专业海报设计。',
-    stats: {
-      usageCount: 3456,
-      rating: 95,
-    },
-  },
-  {
-    key: 'logo',
-    name: 'Logo 设计',
-    desc: 'AI 生成独特Logo，商用级品质',
-    fullDesc: '专业的AI Logo设计工具，根据您的品牌理念生成独特的Logo设计方案。',
-    icon: 'icon-logo',
-    color: '#EF4444',
-    category: 'creative',
-    status: 'available',
-    features: ['品牌风格', '矢量格式', '商用授权'],
-    detailFeatures: [
-      '多种设计风格选择',
-      '矢量格式输出',
-      '商用版权授权',
-      '配色方案推荐',
-      '标准化尺寸规范',
-    ],
-    usage: '描述您的品牌特点和期望风格，AI会生成多个Logo设计方案供您选择。',
-    stats: {
-      usageCount: 2234,
-      rating: 93,
-    },
-  },
-  {
-    key: 'study-plan',
-    name: '学习计划',
-    desc: '个性化学习路径规划，提升学习效率',
-    fullDesc: '基于AI的个性化学习计划制定工具，根据您的学习目标和时间安排制定最优学习路径。',
-    icon: 'icon-study',
-    color: '#06B6D4',
-    category: 'study',
-    status: 'available',
-    features: ['个性化', '进度跟踪', '智能调整'],
-    detailFeatures: [
-      '个性化学习路径',
-      '学习进度跟踪',
-      '智能计划调整',
-      '学习效果评估',
-      '多领域知识覆盖',
-    ],
-    usage: '输入您的学习目标、可用时间和当前水平，AI会为您制定详细的学习计划。',
-    stats: {
-      usageCount: 1890,
-      rating: 97,
-    },
-  },
-  {
-    key: 'recipe',
-    name: '智能食谱',
-    desc: '根据食材推荐美食，营养搭配建议',
-    fullDesc: '智能食谱推荐系统，根据现有食材推荐美食制作方法，提供营养搭配建议。',
-    icon: 'icon-food',
-    color: '#F97316',
-    category: 'life',
-    status: 'development',
-    features: ['食材识别', '营养分析', '制作指导'],
-    detailFeatures: [
-      '食材智能识别',
-      '营养成分分析',
-      '详细制作步骤',
-      '口味偏好适配',
-      '热量控制建议',
-    ],
-    usage: '拍照或输入现有食材，AI会推荐适合的菜谱并提供详细制作指导。',
-    stats: {
-      usageCount: 567,
-      rating: 89,
-    },
-  },
-  {
-    key: 'workout',
-    name: '运动计划',
-    desc: '定制化健身方案，科学训练指导',
-    fullDesc: '个性化运动健身计划制定工具，根据身体状况和目标制定科学的训练方案。',
-    icon: 'icon-sport',
-    color: '#EC4899',
-    category: 'life',
-    status: 'development',
-    features: ['个性定制', '科学指导', '进度跟踪'],
-    detailFeatures: [
-      '个性化训练计划',
-      '科学运动指导',
-      '训练进度跟踪',
-      '饮食建议搭配',
-      '健康数据分析',
-    ],
-    usage: '输入您的身体状况、运动目标和时间安排，AI会制定适合的运动计划。',
-    stats: {
-      usageCount: 234,
-      rating: 91,
-    },
-  },
-])
-
-// 推荐工具（取前3个可用的）
-const recommendTools = computed(() => {
-  return tools.value.filter((tool) => tool.status === 'available').slice(0, 3)
-})
-
-// 根据分类筛选工具
-const filteredTools = computed(() => {
-  if (activeCategory.value === 'all') {
-    return tools.value
-  }
-  return tools.value.filter((tool) => tool.category === activeCategory.value)
-})
-
-onMounted(() => {
-  // 检查URL参数，如果有指定工具则直接打开
-  const urlParams = new URLSearchParams(window.location.search)
-  const toolKey = urlParams.get('tool')
-  if (toolKey) {
-    const tool = tools.value.find((t) => t.key === toolKey)
-    if (tool) {
-      openTool(tool)
-    }
-  }
-})
-
-// 分类切换
-const onCategoryChange = (category) => {
-  // 可以在这里添加数据加载逻辑
-}
-
-// 打开工具
-const openTool = (tool) => {
-  selectedTool.value = tool
-
-  // 特殊工具直接打开对应界面
-  if (tool.key === 'mindmap') {
-    showMindMap.value = true
-  } else {
-    showToolDetail.value = true
-  }
-}
-
-// 使用工具
-const useTool = (tool) => {
-  showToolDetail.value = false
-
-  if (tool.status !== 'available') {
-    showNotify({ type: 'warning', message: '该工具还在开发中，敬请期待' })
-    return
-  }
-
-  // 根据工具类型跳转到对应页面或打开功能界面
-  switch (tool.key) {
-    case 'mindmap':
-      showMindMap.value = true
-      break
-    case 'summary':
-    case 'translation':
-    case 'poster':
-    case 'logo':
-    case 'study-plan':
-      showNotify({ type: 'primary', message: `正在启动${tool.name}工具...` })
-      // 这里可以跳转到具体的工具页面
-      break
-    default:
-      showNotify({ type: 'warning', message: '功能开发中' })
-  }
-}
-
-// 思维导图相关方法
-const createNewMap = () => {
-  showNotify({ type: 'primary', message: '创建新的思维导图' })
-}
-
-const saveMap = () => {
-  showNotify({ type: 'success', message: '思维导图已保存' })
-}
-
-const exportMap = () => {
-  showNotify({ type: 'primary', message: '导出思维导图' })
-}
-
-const closeMindMap = () => {
-  showMindMap.value = false
-}
-</script>
-
-<style lang="scss" scoped>
-.tools-page {
-  min-height: 100vh;
-  background: var(--van-background);
-
-  .tools-content {
-    padding-top: 46px;
-
-    :deep(.van-tabs__nav) {
-      background: var(--van-background);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-    }
-
-    .tools-list {
-      padding: 16px;
-
-      .tool-item {
-        background: var(--van-cell-background);
-        border-radius: 12px;
-        padding: 16px;
-        margin-bottom: 16px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-        cursor: pointer;
-        transition: all 0.3s ease;
-
-        &:active {
-          transform: scale(0.98);
-        }
-
-        .tool-header {
-          display: flex;
-          align-items: center;
-          margin-bottom: 12px;
-
-          .tool-icon {
-            width: 44px;
-            height: 44px;
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-right: 12px;
-
-            .iconfont {
-              font-size: 22px;
-              color: white;
-            }
-          }
-
-          .tool-info {
-            flex: 1;
-
-            .tool-name {
-              font-size: 16px;
-              font-weight: 600;
-              color: var(--van-text-color);
-              margin-bottom: 4px;
-            }
-
-            .tool-desc {
-              font-size: 13px;
-              color: var(--van-gray-6);
-              line-height: 1.4;
-            }
-          }
-
-          .tool-status {
-            margin-left: 8px;
-          }
-        }
-
-        .tool-features {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 8px;
-          margin-bottom: 12px;
-
-          .feature-tag {
-            font-size: 11px;
-          }
-        }
-
-        .tool-stats {
-          display: flex;
-          gap: 16px;
-          font-size: 12px;
-          color: var(--van-gray-6);
-
-          .stat-label {
-            margin-right: 4px;
-          }
-
-          .stat-value {
-            color: var(--van-text-color);
-            font-weight: 500;
-          }
-        }
-      }
-    }
-
-    .recommend-section {
-      padding: 0 16px 16px;
-
-      .section-title {
-        font-size: 18px;
-        font-weight: 600;
-        color: var(--van-text-color);
-        margin: 0 0 16px 0;
-      }
-
-      .recommend-swipe {
-        height: 160px;
-        border-radius: 12px;
-        overflow: hidden;
-
-        .recommend-card {
-          height: 100%;
-          position: relative;
-          display: flex;
-          align-items: center;
-          padding: 20px;
-          background: linear-gradient(135deg, var(--van-primary-color), #8b5cf6);
-          cursor: pointer;
-
-          .recommend-bg {
-            position: absolute;
-            top: 16px;
-            right: 16px;
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: rgba(255, 255, 255, 0.2);
-
-            .iconfont {
-              font-size: 40px;
-              color: rgba(255, 255, 255, 0.8);
-            }
-          }
-
-          .recommend-content {
-            flex: 1;
-            color: white;
-
-            .recommend-title {
-              font-size: 20px;
-              font-weight: 700;
-              margin: 0 0 8px 0;
-            }
-
-            .recommend-desc {
-              font-size: 14px;
-              opacity: 0.9;
-              margin: 0 0 16px 0;
-              line-height: 1.4;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .tool-detail {
-    padding: 20px;
-
-    .detail-header {
-      display: flex;
-      margin-bottom: 20px;
-
-      .detail-icon {
-        width: 60px;
-        height: 60px;
-        border-radius: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-right: 16px;
-        flex-shrink: 0;
-
-        .iconfont {
-          font-size: 28px;
-          color: white;
-        }
-      }
-
-      .detail-info {
-        flex: 1;
-
-        .detail-name {
-          font-size: 20px;
-          font-weight: 600;
-          color: var(--van-text-color);
-          margin: 0 0 8px 0;
-        }
-
-        .detail-desc {
-          font-size: 14px;
-          color: var(--van-gray-6);
-          line-height: 1.5;
-          margin: 0;
-        }
-      }
-    }
-
-    .detail-features,
-    .detail-usage {
-      margin-bottom: 20px;
-
-      .features-title,
-      .usage-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: var(--van-text-color);
-        margin: 0 0 12px 0;
-      }
-
-      .features-list {
-        padding: 0;
-        margin: 0;
-        list-style: none;
-
-        li {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          color: var(--van-text-color);
-          margin-bottom: 8px;
-
-          .van-icon {
-            margin-right: 8px;
-          }
-        }
-      }
-
-      .usage-text {
-        font-size: 14px;
-        color: var(--van-gray-6);
-        line-height: 1.5;
-        margin: 0;
-      }
-    }
-
-    .detail-actions {
-      margin-top: 20px;
-    }
-  }
-
-  .mindmap-container {
-    height: 80vh;
-    display: flex;
-    flex-direction: column;
-
-    .mindmap-toolbar {
-      display: flex;
-      gap: 8px;
-      padding: 12px 16px;
-      background: var(--van-background-2);
-      border-bottom: 1px solid var(--van-border-color);
-    }
-
-    .mindmap-canvas {
-      flex: 1;
-      position: relative;
-      background: var(--van-background);
-
-      .canvas-placeholder {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        text-align: center;
-        color: var(--van-gray-6);
-
-        .iconfont {
-          font-size: 48px;
-          margin-bottom: 16px;
-          color: var(--van-gray-5);
-        }
-
-        p {
-          margin: 0 0 8px 0;
-          font-size: 16px;
-
-          &.placeholder-desc {
-            font-size: 14px;
-            opacity: 0.8;
-          }
-        }
-      }
-    }
-  }
-}
-
-// 深色主题优化
-:deep(.van-theme-dark) {
-  .tools-page {
-    .tool-item {
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-    }
-  }
-}
-</style>
diff --git a/web/src/views/mobile/components/AppCard.vue b/web/src/views/mobile/components/AppCard.vue
new file mode 100644
index 00000000..010354a8
--- /dev/null
+++ b/web/src/views/mobile/components/AppCard.vue
@@ -0,0 +1,110 @@
+<template>
+  <van-cell class="app-cell">
+    <div class="app-card">
+      <div class="app-info">
+        <div class="app-image">
+          <van-image :src="app.icon" round />
+        </div>
+        <div class="app-detail">
+          <div class="app-title">{{ app.name }}</div>
+          <div class="app-desc">{{ app.hello_msg }}</div>
+        </div>
+      </div>
+
+      <div class="app-actions">
+        <van-button
+          size="small"
+          type="primary"
+          class="action-btn"
+          @click="$emit('use-role', app.id)"
+          >开始对话</van-button
+        >
+        <van-button
+          size="small"
+          :type="hasRole ? 'danger' : 'success'"
+          class="action-btn"
+          @click="$emit('update-role', app, hasRole ? 'remove' : 'add')"
+        >
+          {{ hasRole ? '移出工作台' : '添加到工作台' }}
+        </van-button>
+      </div>
+    </div>
+  </van-cell>
+</template>
+
+<script setup>
+defineProps({
+  app: {
+    type: Object,
+    required: true,
+  },
+  hasRole: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+defineEmits(['use-role', 'update-role'])
+</script>
+
+<style scoped lang="scss">
+.app-cell {
+  padding: 0;
+  margin-bottom: 15px;
+
+  .app-card {
+    background: var(--van-cell-background);
+    border-radius: 12px;
+    padding: 15px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+
+    .app-info {
+      display: flex;
+      align-items: center;
+      margin-bottom: 15px;
+
+      .app-image {
+        width: 60px;
+        height: 60px;
+        margin-right: 15px;
+
+        :deep(.van-image) {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .app-detail {
+        flex: 1;
+
+        .app-title {
+          font-size: 16px;
+          font-weight: 600;
+          margin-bottom: 5px;
+          color: var(--van-text-color);
+        }
+
+        .app-desc {
+          font-size: 13px;
+          color: var(--van-gray-6);
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+        }
+      }
+    }
+
+    .app-actions {
+      display: flex;
+      gap: 10px;
+
+      .action-btn {
+        flex: 1;
+        border-radius: 20px;
+        padding: 0 10px;
+      }
+    }
+  }
+}
+</style>
diff --git a/web/src/views/mobile/components/EmptyState.vue b/web/src/views/mobile/components/EmptyState.vue
new file mode 100644
index 00000000..f4930c37
--- /dev/null
+++ b/web/src/views/mobile/components/EmptyState.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="empty-state">
+    <van-empty :image="getImage()" :description="description" :image-size="imageSize">
+      <template #bottom>
+        <slot name="action">
+          <van-button
+            v-if="showAction"
+            round
+            type="primary"
+            class="action-btn"
+            @click="$emit('action')"
+          >
+            {{ actionText }}
+          </van-button>
+        </slot>
+      </template>
+    </van-empty>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'search', // search, error, network, default
+    validator: (value) => ['search', 'error', 'network', 'default'].includes(value),
+  },
+  description: {
+    type: String,
+    default: '暂无数据',
+  },
+  imageSize: {
+    type: [String, Number],
+    default: 120,
+  },
+  showAction: {
+    type: Boolean,
+    default: false,
+  },
+  actionText: {
+    type: String,
+    default: '刷新',
+  },
+})
+
+defineEmits(['action'])
+
+// 根据类型获取对应的图标
+const getImage = () => {
+  const imageMap = {
+    search: 'search',
+    error: 'error',
+    network: 'network',
+    default: 'default',
+  }
+  return imageMap[props.type] || 'search'
+}
+</script>
+
+<style scoped lang="scss">
+.empty-state {
+  padding: 40px 20px;
+  text-align: center;
+
+  .action-btn {
+    margin-top: 16px;
+    min-width: 120px;
+    height: 36px;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/web/src/views/mobile/pages/ImageDall.vue b/web/src/views/mobile/pages/ImageDall.vue
index fb7f5a27..becaec95 100644
--- a/web/src/views/mobile/pages/ImageDall.vue
+++ b/web/src/views/mobile/pages/ImageDall.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mobile-sd">
     <van-form @submit="generate">
-      <van-cell-group inset>
+      <van-cell-group class="px-3 pt-3 pb-4">
         <div>
           <van-field
             v-model="selectedModel"
diff --git a/web/src/views/mobile/pages/ImageMj.vue b/web/src/views/mobile/pages/ImageMj.vue
index 95d4e6a1..0a0dba66 100644
--- a/web/src/views/mobile/pages/ImageMj.vue
+++ b/web/src/views/mobile/pages/ImageMj.vue
@@ -376,10 +376,10 @@ const params = ref({
   model: models[0].value,
   chaos: 0,
   stylize: 0,
-  seed: 0,
+  seed: -1,
   img_arr: [],
   raw: false,
-  iw: 0,
+  iw: 0.7,
   prompt: '',
   neg_prompt: '',
   tile: false,
diff --git a/web/src/views/mobile/pages/ImageSd.vue b/web/src/views/mobile/pages/ImageSd.vue
index a4f518b4..6c6e565c 100644
--- a/web/src/views/mobile/pages/ImageSd.vue
+++ b/web/src/views/mobile/pages/ImageSd.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mobile-sd">
     <van-form @submit="generate">
-      <van-cell-group inset>
+      <van-cell-group class="px-3 pt-3 pb-4">
         <div>
           <van-field
             v-model="params.sampler"
diff --git a/web/src/views/mobile/pages/ImgWall.vue b/web/src/views/mobile/pages/ImgWall.vue
index c636a55d..8e2cf31b 100644
--- a/web/src/views/mobile/pages/ImgWall.vue
+++ b/web/src/views/mobile/pages/ImgWall.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="img-wall container">
+  <div class="img-wall p-3">
     <div class="content">
-      <van-tabs v-model:active="activeName" animated sticky>
-        <van-tab title="MJ" name="mj">
+      <CustomTabs v-model="activeName" @tab-click="handleTabClick">
+        <TabPane name="mj" label="Midjourney">
           <van-list
             v-model:error="data['mj'].error"
             v-model:loading="data['mj'].loading"
@@ -22,8 +22,8 @@
               </div>
             </van-cell>
           </van-list>
-        </van-tab>
-        <van-tab title="SD" name="sd">
+        </TabPane>
+        <TabPane name="sd" label="Stable Diffusion">
           <van-list
             v-model:error="data['sd'].error"
             v-model:loading="data['sd'].loading"
@@ -42,8 +42,8 @@
               </div>
             </van-cell>
           </van-list>
-        </van-tab>
-        <van-tab title="DALL" name="dall">
+        </TabPane>
+        <TabPane name="dall" label="DALL">
           <van-list
             v-model:error="data['dall'].error"
             v-model:loading="data['dall'].loading"
@@ -62,8 +62,8 @@
               </div>
             </van-cell>
           </van-list>
-        </van-tab>
-      </van-tabs>
+        </TabPane>
+      </CustomTabs>
     </div>
 
     <button
@@ -83,6 +83,8 @@ import Clipboard from 'clipboard'
 import { ElMessage } from 'element-plus'
 import { showConfirmDialog, showFailToast, showImagePreview, showNotify } from 'vant'
 import { onMounted, onUnmounted, ref } from 'vue'
+import CustomTabs from '@/components/ui/CustomTabs.vue'
+import TabPane from '@/components/ui/CustomTabPane.vue'
 
 const activeName = ref('mj')
 const data = ref({
@@ -117,6 +119,13 @@ const data = ref({
 
 const prompt = ref('')
 const clipboard = ref(null)
+
+// 处理 tab 点击事件
+const handleTabClick = (tabName, index) => {
+  // 可以在这里添加额外的 tab 切换逻辑
+  console.log('Tab clicked:', tabName, index)
+}
+
 onMounted(() => {
   clipboard.value = new Clipboard('.copy-prompt-wall')
   clipboard.value.on('success', () => {
diff --git a/web/src/views/mobile/pages/JimengCreate.vue b/web/src/views/mobile/pages/JimengCreate.vue
new file mode 100644
index 00000000..7fe8acd8
--- /dev/null
+++ b/web/src/views/mobile/pages/JimengCreate.vue
@@ -0,0 +1,693 @@
+<template>
+  <div class="mobile-jimeng-create">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <van-nav-bar title="即梦AI" left-arrow @click-left="goBack" fixed placeholder />
+    </div>
+
+    <!-- 功能分类选择 -->
+    <div class="category-section">
+      <van-tabs v-model="activeCategory" @change="onCategoryChange">
+        <van-tab title="图像生成" name="image_generation">
+          <div class="tab-content">
+            <!-- 生成模式切换 -->
+            <van-cell title="生成模式">
+              <template #value>
+                <van-switch v-model="useImageInput" size="24" @change="onInputModeChange" />
+              </template>
+            </van-cell>
+            <van-cell title="图生图人像写真" :value="useImageInput ? '开启' : '关闭'" />
+
+            <!-- 文生图 -->
+            <div v-if="activeFunction === 'text_to_image'" class="function-panel">
+              <van-field
+                v-model="currentPrompt"
+                label="提示词"
+                type="textarea"
+                placeholder="请输入图片描述，越详细越好"
+                rows="4"
+                maxlength="2000"
+                show-word-limit
+              />
+
+              <van-field
+                v-model="textToImageParams.size"
+                label="图片尺寸"
+                readonly
+                is-link
+                @click="showSizePicker = true"
+              />
+
+              <van-cell title="创意度">
+                <template #value>
+                  <van-slider
+                    v-model="textToImageParams.scale"
+                    :min="1"
+                    :max="10"
+                    :step="0.5"
+                    style="width: 200px"
+                  />
+                </template>
+              </van-cell>
+
+              <van-cell title="智能优化提示词">
+                <template #right-icon>
+                  <van-switch v-model="textToImageParams.use_pre_llm" size="24" />
+                </template>
+              </van-cell>
+            </div>
+
+            <!-- 图生图 -->
+            <div v-if="activeFunction === 'image_to_image'" class="function-panel">
+              <van-uploader
+                v-model="imageToImageParams.image_input"
+                :max-count="1"
+                :after-read="onImageUpload"
+                accept=".jpg,.png,.jpeg"
+              >
+                <van-button icon="plus" type="primary" block> 上传图片 </van-button>
+              </van-uploader>
+
+              <van-field
+                v-model="currentPrompt"
+                label="提示词"
+                type="textarea"
+                placeholder="描述你想要的图片效果"
+                rows="4"
+                maxlength="2000"
+                show-word-limit
+              />
+
+              <van-field
+                v-model="imageToImageParams.size"
+                label="图片尺寸"
+                readonly
+                is-link
+                @click="showSizePicker = true"
+              />
+            </div>
+          </div>
+        </van-tab>
+
+        <van-tab title="图像编辑" name="image_editing">
+          <div class="tab-content">
+            <!-- 图像编辑 -->
+            <div v-if="activeFunction === 'image_edit'" class="function-panel">
+              <van-uploader
+                v-model="imageEditParams.image_urls"
+                :max-count="1"
+                :after-read="onImageUpload"
+                accept=".jpg,.png,.jpeg"
+              >
+                <van-button icon="plus" type="primary" block> 上传图片 </van-button>
+              </van-uploader>
+
+              <van-field
+                v-model="currentPrompt"
+                label="编辑提示词"
+                type="textarea"
+                placeholder="描述你想要的编辑效果"
+                rows="4"
+                maxlength="2000"
+                show-word-limit
+              />
+
+              <van-cell title="编辑强度">
+                <template #value>
+                  <van-slider
+                    v-model="imageEditParams.scale"
+                    :min="0"
+                    :max="1"
+                    :step="0.1"
+                    style="width: 200px"
+                  />
+                </template>
+              </van-cell>
+            </div>
+
+            <!-- 图像特效 -->
+            <div v-if="activeFunction === 'image_effects'" class="function-panel">
+              <van-uploader
+                v-model="imageEffectsParams.image_input1"
+                :max-count="1"
+                :after-read="onImageUpload"
+                accept=".jpg,.png,.jpeg"
+              >
+                <van-button icon="plus" type="primary" block> 上传图片 </van-button>
+              </van-uploader>
+
+              <van-field
+                v-model="imageEffectsParams.template_id"
+                label="特效模板"
+                readonly
+                is-link
+                @click="showTemplatePicker = true"
+              />
+
+              <van-field
+                v-model="imageEffectsParams.size"
+                label="输出尺寸"
+                readonly
+                is-link
+                @click="showSizePicker = true"
+              />
+            </div>
+          </div>
+        </van-tab>
+
+        <van-tab title="视频生成" name="video_generation">
+          <div class="tab-content">
+            <!-- 生成模式切换 -->
+            <van-cell title="生成模式">
+              <template #value>
+                <van-switch v-model="useImageInput" size="24" @change="onInputModeChange" />
+              </template>
+            </van-cell>
+            <van-cell title="图生视频" :value="useImageInput ? '开启' : '关闭'" />
+
+            <!-- 文生视频 -->
+            <div v-if="activeFunction === 'text_to_video'" class="function-panel">
+              <van-field
+                v-model="currentPrompt"
+                label="提示词"
+                type="textarea"
+                placeholder="描述你想要的视频内容"
+                rows="4"
+                maxlength="2000"
+                show-word-limit
+              />
+
+              <van-field
+                v-model="textToVideoParams.aspect_ratio"
+                label="视频比例"
+                readonly
+                is-link
+                @click="showAspectRatioPicker = true"
+              />
+            </div>
+
+            <!-- 图生视频 -->
+            <div v-if="activeFunction === 'image_to_video'" class="function-panel">
+              <van-uploader
+                v-model="imageToVideoParams.image_urls"
+                :max-count="2"
+                :after-read="onImageUpload"
+                accept=".jpg,.png,.jpeg"
+                multiple
+              >
+                <van-button icon="plus" type="primary" block> 上传图片 </van-button>
+              </van-uploader>
+
+              <van-field
+                v-model="currentPrompt"
+                label="提示词"
+                type="textarea"
+                placeholder="描述你想要的视频效果"
+                rows="4"
+                maxlength="2000"
+                show-word-limit
+              />
+
+              <van-field
+                v-model="imageToVideoParams.aspect_ratio"
+                label="视频比例"
+                readonly
+                is-link
+                @click="showAspectRatioPicker = true"
+              />
+            </div>
+          </div>
+        </van-tab>
+      </van-tabs>
+    </div>
+
+    <!-- 生成按钮 -->
+    <div class="submit-section">
+      <van-button type="primary" size="large" @click="submitTask" :loading="submitting" block>
+        立即生成 ({{ currentPowerCost }}算力)
+      </van-button>
+    </div>
+
+    <!-- 作品列表 -->
+    <div class="works-list">
+      <van-list
+        v-model:loading="listLoading"
+        :finished="listFinished"
+        finished-text="没有更多了"
+        @load="loadMore"
+      >
+        <div v-for="item in currentList" :key="item.id" class="work-item">
+          <van-card
+            :title="getFunctionName(item.type)"
+            :desc="item.prompt"
+            :thumb="item.img_url || item.video_url"
+          >
+            <template #tags>
+              <van-tag :type="getTaskType(item.type)" size="small">
+                {{ getFunctionName(item.type) }}
+              </van-tag>
+              <van-tag v-if="item.power" type="warning" size="small">
+                {{ item.power }}算力
+              </van-tag>
+            </template>
+            <template #footer>
+              <van-button v-if="item.status === 'completed'" size="small" @click="playMedia(item)">
+                {{ item.type.includes('video') ? '播放' : '查看' }}
+              </van-button>
+              <van-button
+                v-if="item.status === 'completed'"
+                size="small"
+                @click="downloadFile(item)"
+                :loading="item.downloading"
+              >
+                下载
+              </van-button>
+              <van-button v-if="item.status === 'failed'" size="small" @click="retryTask(item.id)">
+                重试
+              </van-button>
+              <van-button size="small" type="danger" @click="removeJob(item)"> 删除 </van-button>
+            </template>
+          </van-card>
+        </div>
+      </van-list>
+    </div>
+
+    <!-- 各种选择器弹窗 -->
+    <van-popup v-model:show="showSizePicker" position="bottom">
+      <van-picker
+        :columns="imageSizeOptions"
+        @confirm="onSizeConfirm"
+        @cancel="showSizePicker = false"
+      />
+    </van-popup>
+
+    <van-popup v-model:show="showAspectRatioPicker" position="bottom">
+      <van-picker
+        :columns="videoAspectRatioOptions"
+        @confirm="onAspectRatioConfirm"
+        @cancel="showAspectRatioPicker = false"
+      />
+    </van-popup>
+
+    <van-popup v-model:show="showTemplatePicker" position="bottom">
+      <van-picker
+        :columns="imageEffectsTemplateOptions"
+        @confirm="onTemplateConfirm"
+        @cancel="showTemplatePicker = false"
+      />
+    </van-popup>
+
+    <!-- 媒体预览弹窗 -->
+    <van-popup
+      v-model:show="showMediaDialog"
+      position="center"
+      :style="{ width: '90%', height: '60%' }"
+    >
+      <div class="media-preview">
+        <img
+          v-if="currentMediaUrl && !currentMediaUrl.includes('video')"
+          :src="currentMediaUrl"
+          style="width: 100%; height: 100%; object-fit: contain"
+        />
+        <video
+          v-else-if="currentMediaUrl"
+          :src="currentMediaUrl"
+          controls
+          autoplay
+          style="width: 100%; height: 100%"
+        >
+          您的浏览器不支持视频播放
+        </video>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast, showDialog } from 'vant'
+import { httpGet, httpPost } from '@/utils/http'
+import { checkSession } from '@/store/cache'
+
+const router = useRouter()
+
+// 响应式数据
+const activeCategory = ref('image_generation')
+const useImageInput = ref(false)
+const submitting = ref(false)
+const listLoading = ref(false)
+const listFinished = ref(false)
+const currentList = ref([])
+const showMediaDialog = ref(false)
+const currentMediaUrl = ref('')
+
+// 选择器相关
+const showSizePicker = ref(false)
+const showAspectRatioPicker = ref(false)
+const showTemplatePicker = ref(false)
+
+// 当前提示词
+const currentPrompt = ref('')
+
+// 功能参数
+const textToImageParams = ref({
+  size: '1024x1024',
+  scale: 7.5,
+  use_pre_llm: false,
+})
+
+const imageToImageParams = ref({
+  image_input: [],
+  size: '1024x1024',
+})
+
+const imageEditParams = ref({
+  image_urls: [],
+  scale: 0.5,
+})
+
+const imageEffectsParams = ref({
+  image_input1: [],
+  template_id: '',
+  size: '1024x1024',
+})
+
+const textToVideoParams = ref({
+  aspect_ratio: '16:9',
+})
+
+const imageToVideoParams = ref({
+  image_urls: [],
+  aspect_ratio: '16:9',
+})
+
+// 选项数据
+const imageSizeOptions = ['512x512', '768x768', '1024x1024', '1024x1536', '1536x1024']
+
+const videoAspectRatioOptions = ['16:9', '9:16', '1:1', '4:3']
+
+const imageEffectsTemplateOptions = [
+  'acrylic_ornaments',
+  'angel_figurine',
+  'felt_3d_polaroid',
+  'watercolor_illustration',
+]
+
+// 页面数据
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const currentPowerCost = ref(0)
+const taskPulling = ref(true)
+const tastPullHandler = ref(null)
+
+// 计算属性
+const activeFunction = computed(() => {
+  if (activeCategory.value === 'image_generation') {
+    return useImageInput.value ? 'image_to_image' : 'text_to_image'
+  } else if (activeCategory.value === 'image_editing') {
+    return 'image_edit' // 可以根据需要添加更多编辑功能
+  } else if (activeCategory.value === 'video_generation') {
+    return useImageInput.value ? 'image_to_video' : 'text_to_video'
+  }
+  return 'text_to_image'
+})
+
+// 生命周期
+onMounted(() => {
+  checkSession()
+    .then(() => {
+      fetchData(1)
+      tastPullHandler.value = setInterval(() => {
+        if (taskPulling.value) {
+          fetchData(1)
+        }
+      }, 5000)
+    })
+    .catch(() => {})
+})
+
+onUnmounted(() => {
+  if (tastPullHandler.value) {
+    clearInterval(tastPullHandler.value)
+  }
+})
+
+// 方法
+const goBack = () => {
+  router.back()
+}
+
+const onCategoryChange = (name) => {
+  activeCategory.value = name
+  useImageInput.value = false
+}
+
+const onInputModeChange = () => {
+  // 重置相关参数
+  currentPrompt.value = ''
+}
+
+const onImageUpload = (file) => {
+  const formData = new FormData()
+  formData.append('file', file.file, file.name)
+  showToast({ message: '正在上传图片...', duration: 0 })
+
+  httpPost('/api/upload', formData)
+    .then((res) => {
+      showToast('图片上传成功')
+      return res.data.url
+    })
+    .catch((e) => {
+      showToast('图片上传失败:' + e.message)
+    })
+}
+
+const submitTask = () => {
+  if (!currentPrompt.value.trim()) {
+    showToast('请输入提示词')
+    return
+  }
+
+  submitting.value = true
+  const params = {
+    type: activeFunction.value,
+    prompt: currentPrompt.value,
+  }
+
+  // 根据功能类型添加相应参数
+  if (activeFunction.value === 'text_to_image') {
+    Object.assign(params, textToImageParams.value)
+  } else if (activeFunction.value === 'image_to_image') {
+    Object.assign(params, imageToImageParams.value)
+  } else if (activeFunction.value === 'image_edit') {
+    Object.assign(params, imageEditParams.value)
+  } else if (activeFunction.value === 'image_effects') {
+    Object.assign(params, imageEffectsParams.value)
+  } else if (activeFunction.value === 'text_to_video') {
+    Object.assign(params, textToVideoParams.value)
+  } else if (activeFunction.value === 'image_to_video') {
+    Object.assign(params, imageToVideoParams.value)
+  }
+
+  httpPost('/api/jimeng/create', params)
+    .then(() => {
+      fetchData(1)
+      taskPulling.value = true
+      showToast('创建任务成功')
+      currentPrompt.value = ''
+    })
+    .catch((e) => {
+      showToast('创建任务失败：' + e.message)
+    })
+    .finally(() => {
+      submitting.value = false
+    })
+}
+
+const fetchData = (_page) => {
+  if (_page) {
+    page.value = _page
+  }
+  listLoading.value = true
+  httpGet('/api/jimeng/list', { page: page.value, page_size: pageSize.value })
+    .then((res) => {
+      total.value = res.data.total
+      let needPull = false
+      const items = []
+      for (let v of res.data.items) {
+        if (v.status === 'in_queue' || v.status === 'generating') {
+          needPull = true
+        }
+        items.push(v)
+      }
+      listLoading.value = false
+      taskPulling.value = needPull
+
+      if (page.value === 1) {
+        currentList.value = items
+      } else {
+        currentList.value.push(...items)
+      }
+
+      if (items.length < pageSize.value) {
+        listFinished.value = true
+      }
+    })
+    .catch((e) => {
+      listLoading.value = false
+      showToast('获取作品列表失败：' + e.message)
+    })
+}
+
+const loadMore = () => {
+  page.value++
+  fetchData()
+}
+
+const playMedia = (item) => {
+  currentMediaUrl.value = item.img_url || item.video_url
+  showMediaDialog.value = true
+}
+
+const downloadFile = (item) => {
+  item.downloading = true
+  const link = document.createElement('a')
+  link.href = item.img_url || item.video_url
+  link.download = item.title || 'file'
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  item.downloading = false
+  showToast('开始下载')
+}
+
+const retryTask = (id) => {
+  httpPost('/api/jimeng/retry', { id })
+    .then(() => {
+      showToast('重试任务成功')
+      fetchData(1)
+    })
+    .catch((e) => {
+      showToast('重试任务失败：' + e.message)
+    })
+}
+
+const removeJob = (item) => {
+  showDialog({
+    title: '确认删除',
+    message: '此操作将会删除任务相关文件，继续操作吗?',
+    showCancelButton: true,
+  })
+    .then(() => {
+      httpGet('/api/jimeng/remove', { id: item.id })
+        .then(() => {
+          showToast('任务删除成功')
+          fetchData(1)
+        })
+        .catch((e) => {
+          showToast('任务删除失败：' + e.message)
+        })
+    })
+    .catch(() => {})
+}
+
+// 工具方法
+const getFunctionName = (type) => {
+  const nameMap = {
+    text_to_image: '文生图',
+    image_to_image: '图生图',
+    image_edit: '图像编辑',
+    image_effects: '图像特效',
+    text_to_video: '文生视频',
+    image_to_video: '图生视频',
+  }
+  return nameMap[type] || type
+}
+
+const getTaskType = (type) => {
+  return type.includes('video') ? 'warning' : 'primary'
+}
+
+// 选择器确认方法
+const onSizeConfirm = (value) => {
+  if (activeFunction.value === 'text_to_image') {
+    textToImageParams.value.size = value
+  } else if (activeFunction.value === 'image_to_image') {
+    imageToImageParams.value.size = value
+  } else if (activeFunction.value === 'image_effects') {
+    imageEffectsParams.value.size = value
+  }
+  showSizePicker.value = false
+}
+
+const onAspectRatioConfirm = (value) => {
+  if (activeFunction.value === 'text_to_video') {
+    textToVideoParams.value.aspect_ratio = value
+  } else if (activeFunction.value === 'image_to_video') {
+    imageToVideoParams.value.aspect_ratio = value
+  }
+  showAspectRatioPicker.value = false
+}
+
+const onTemplateConfirm = (value) => {
+  imageEffectsParams.value.template_id = value
+  showTemplatePicker.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.mobile-jimeng-create {
+  min-height: 100vh;
+  background: #f7f8fa;
+  padding-bottom: 20px;
+
+  .page-header {
+    background: #fff;
+  }
+
+  .category-section {
+    background: #fff;
+    margin: 12px;
+    border-radius: 8px;
+    overflow: hidden;
+
+    .tab-content {
+      padding: 16px;
+
+      .function-panel {
+        .van-uploader {
+          margin-bottom: 16px;
+        }
+      }
+    }
+  }
+
+  .submit-section {
+    margin: 12px;
+    padding: 16px;
+    background: #fff;
+    border-radius: 8px;
+  }
+
+  .works-list {
+    margin: 12px;
+
+    .work-item {
+      margin-bottom: 12px;
+      background: #fff;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+  }
+
+  .media-preview {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/web/src/views/mobile/pages/SunoCreate.vue b/web/src/views/mobile/pages/SunoCreate.vue
new file mode 100644
index 00000000..9999d141
--- /dev/null
+++ b/web/src/views/mobile/pages/SunoCreate.vue
@@ -0,0 +1,689 @@
+<template>
+  <div class="mobile-suno-create">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <van-nav-bar title="音乐创作" left-arrow @click-left="goBack" fixed placeholder />
+    </div>
+
+    <!-- 创作表单 -->
+    <div class="create-form">
+      <!-- 模式切换 -->
+      <div class="mode-switch">
+        <van-cell-group>
+          <van-cell title="创作模式">
+            <template #right-icon>
+              <van-switch v-model="custom" size="24" @change="onModeChange" />
+            </template>
+          </van-cell>
+          <van-cell title="自定义模式" :value="custom ? '开启' : '关闭'" />
+        </van-cell-group>
+      </div>
+
+      <!-- 模型选择 -->
+      <div class="model-select">
+        <van-field
+          v-model="selectedModelLabel"
+          label="模型"
+          readonly
+          is-link
+          @click="showModelPicker = true"
+          placeholder="请选择模型"
+        />
+      </div>
+
+      <!-- 纯音乐开关 -->
+      <div class="pure-music">
+        <van-cell title="纯音乐">
+          <template #right-icon>
+            <van-switch v-model="data.instrumental" size="24" />
+          </template>
+        </van-cell>
+      </div>
+
+      <!-- 自定义模式内容 -->
+      <div v-if="custom">
+        <!-- 歌词输入 -->
+        <div v-if="!data.instrumental" class="lyrics-section">
+          <van-field
+            v-model="data.lyrics"
+            label="歌词"
+            type="textarea"
+            placeholder="请在这里输入你自己写的歌词..."
+            rows="6"
+            maxlength="2000"
+            show-word-limit
+          />
+          <van-button
+            type="primary"
+            size="small"
+            @click="createLyric"
+            :loading="isGenerating"
+            block
+            class="mt-2"
+          >
+            生成歌词
+          </van-button>
+        </div>
+
+        <!-- 音乐风格 -->
+        <div class="style-section">
+          <van-field
+            v-model="data.tags"
+            label="音乐风格"
+            type="textarea"
+            placeholder="请输入音乐风格，多个风格之间用英文逗号隔开..."
+            rows="3"
+            maxlength="120"
+            show-word-limit
+          />
+          <!-- 风格标签选择 -->
+          <div class="style-tags">
+            <van-tag
+              v-for="tag in tags"
+              :key="tag.value"
+              type="primary"
+              plain
+              size="medium"
+              @click="selectTag(tag)"
+              class="mr-2 mb-2"
+            >
+              {{ tag.label }}
+            </van-tag>
+          </div>
+        </div>
+
+        <!-- 歌曲名称 -->
+        <div class="title-section">
+          <van-field
+            v-model="data.title"
+            label="歌曲名称"
+            placeholder="请输入歌曲名称..."
+            maxlength="100"
+            show-word-limit
+          />
+        </div>
+      </div>
+
+      <!-- 简单模式内容 -->
+      <div v-else>
+        <van-field
+          v-model="data.prompt"
+          label="歌曲描述"
+          type="textarea"
+          placeholder="例如：一首关于爱情的摇滚歌曲..."
+          rows="6"
+          maxlength="1000"
+          show-word-limit
+        />
+      </div>
+
+      <!-- 续写歌曲 -->
+      <div v-if="refSong" class="ref-song">
+        <van-cell title="续写歌曲">
+          <template #value>
+            <van-button type="danger" size="small" @click="removeRefSong"> 移除 </van-button>
+          </template>
+        </van-cell>
+        <van-cell title="歌曲名称" :value="refSong.title" />
+        <van-field
+          v-model="refSong.extend_secs"
+          label="续写开始时间(秒)"
+          type="number"
+          placeholder="从第几秒开始续写"
+        />
+      </div>
+
+      <!-- 上传音乐 -->
+      <div class="upload-section">
+        <div class="upload-area">
+          <van-uploader
+            v-model="uploadFiles"
+            :max-count="1"
+            :after-read="uploadAudio"
+            accept=".wav,.mp3"
+            :preview-size="80"
+            :preview-image="false"
+          >
+            <div class="upload-placeholder">
+              <van-icon name="plus" size="24" />
+              <span>上传音乐文件</span>
+              <small>支持 .wav, .mp3 格式</small>
+            </div>
+          </van-uploader>
+        </div>
+      </div>
+
+      <!-- 生成按钮 -->
+      <div class="submit-section">
+        <van-button type="primary" size="large" @click="create" :loading="loading" block>
+          {{ btnText }}
+        </van-button>
+      </div>
+    </div>
+
+    <!-- 作品列表 -->
+    <div class="works-list">
+      <van-list
+        v-model:loading="listLoading"
+        :finished="listFinished"
+        finished-text="没有更多了"
+        @load="loadMore"
+      >
+        <div v-for="item in list" :key="item.id" class="work-item">
+          <van-card
+            :title="item.title || '未命名歌曲'"
+            :desc="item.tags || item.prompt"
+            :thumb="item.cover_url"
+          >
+            <template #tags>
+              <van-tag v-if="item.major_model_version" type="primary">
+                {{ item.major_model_version }}
+              </van-tag>
+              <van-tag v-if="item.type === 4" type="success">用户上传</van-tag>
+              <van-tag v-if="item.type === 3" type="warning">完整歌曲</van-tag>
+            </template>
+            <template #footer>
+              <van-button v-if="item.progress === 100" size="small" @click="play(item)">
+                播放
+              </van-button>
+              <van-button
+                v-if="item.progress === 100"
+                size="small"
+                @click="download(item)"
+                :loading="item.downloading"
+              >
+                下载
+              </van-button>
+              <van-button size="small" type="danger" @click="removeJob(item)"> 删除 </van-button>
+            </template>
+          </van-card>
+        </div>
+      </van-list>
+    </div>
+
+    <!-- 模型选择弹窗 -->
+    <van-popup v-model:show="showModelPicker" position="bottom" round>
+      <van-picker
+        :columns="modelOptions"
+        @confirm="onModelConfirm"
+        @cancel="showModelPicker = false"
+        title="选择模型"
+      />
+    </van-popup>
+
+    <!-- 音乐播放器 -->
+    <van-popup v-model:show="showPlayer" position="bottom" round :style="{ height: '40%' }">
+      <div class="player-content">
+        <div class="player-header">
+          <h3>正在播放</h3>
+          <van-icon name="cross" @click="showPlayer = false" />
+        </div>
+        <audio v-if="currentAudio" :src="currentAudio" controls autoplay class="w-full" />
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast, showDialog } from 'vant'
+import { httpGet, httpPost } from '@/utils/http'
+import { checkSession } from '@/store/cache'
+
+const router = useRouter()
+
+// 响应式数据
+const custom = ref(false)
+const data = ref({
+  model: 'chirp-auk',
+  tags: '',
+  lyrics: '',
+  prompt: '',
+  title: '',
+  instrumental: false,
+  ref_task_id: '',
+  extend_secs: 0,
+  ref_song_id: '',
+})
+const loading = ref(false)
+const list = ref([])
+const listLoading = ref(false)
+const listFinished = ref(false)
+const btnText = ref('开始创作')
+const refSong = ref(null)
+const showModelPicker = ref(false)
+const showPlayer = ref(false)
+const currentAudio = ref('')
+const uploadFiles = ref([])
+const isGenerating = ref(false)
+
+// 模型选项
+const models = ref([
+  { label: 'v3.0', value: 'chirp-v3-0' },
+  { label: 'v3.5', value: 'chirp-v3-5' },
+  { label: 'v4.0', value: 'chirp-v4' },
+  { label: 'v4.5', value: 'chirp-auk' },
+])
+
+const modelOptions = models.value.map((item) => item.label)
+
+// 计算当前选中的模型标签
+const selectedModelLabel = computed(() => {
+  const selectedModel = models.value.find((item) => item.value === data.value.model)
+  return selectedModel ? selectedModel.label : ''
+})
+
+// 风格标签
+const tags = ref([
+  { label: '女声', value: 'female vocals' },
+  { label: '男声', value: 'male vocals' },
+  { label: '流行', value: 'pop' },
+  { label: '摇滚', value: 'rock' },
+  { label: '电音', value: 'electronic' },
+  { label: '钢琴', value: 'piano' },
+  { label: '吉他', value: 'guitar' },
+  { label: '嘻哈', value: 'hip hop' },
+])
+
+// 页面数据
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const taskPulling = ref(true)
+const tastPullHandler = ref(null)
+
+// 生命周期
+onMounted(() => {
+  checkSession()
+    .then(() => {
+      fetchData(1)
+      tastPullHandler.value = setInterval(() => {
+        if (taskPulling.value) {
+          fetchData(1)
+        }
+      }, 5000)
+    })
+    .catch(() => {})
+})
+
+onUnmounted(() => {
+  if (tastPullHandler.value) {
+    clearInterval(tastPullHandler.value)
+  }
+})
+
+// 方法
+const goBack = () => {
+  router.back()
+}
+
+const onModeChange = () => {
+  if (!custom.value) {
+    removeRefSong()
+  }
+}
+
+const onModelConfirm = (value) => {
+  const selectedModel = models.value.find((item) => item.label === value)
+  if (selectedModel) {
+    data.value.model = selectedModel.value
+  }
+  showModelPicker.value = false
+}
+
+const selectTag = (tag) => {
+  if (data.value.tags.length + tag.value.length >= 119) {
+    showToast('标签长度超出限制')
+    return
+  }
+  const currentTags = data.value.tags.split(',').filter((t) => t.trim())
+  if (!currentTags.includes(tag.value)) {
+    currentTags.push(tag.value)
+    data.value.tags = currentTags.join(',')
+  }
+}
+
+const createLyric = () => {
+  if (data.value.lyrics === '') {
+    showToast('请输入歌词描述')
+    return
+  }
+  isGenerating.value = true
+  httpPost('/api/prompt/lyric', { prompt: data.value.lyrics })
+    .then((res) => {
+      const lines = res.data.split('\n')
+      data.value.title = lines.shift().replace(/\*/g, '')
+      lines.shift()
+      data.value.lyrics = lines.join('\n')
+      showToast('歌词生成成功')
+    })
+    .catch((e) => {
+      showToast('歌词生成失败：' + e.message)
+    })
+    .finally(() => {
+      isGenerating.value = false
+    })
+}
+
+const uploadAudio = (file) => {
+  const formData = new FormData()
+  formData.append('file', file.file, file.name)
+  showToast({ message: '正在上传文件...', duration: 0 })
+
+  httpPost('/api/upload', formData)
+    .then((res) => {
+      httpPost('/api/suno/create', {
+        audio_url: res.data.url,
+        title: res.data.name,
+        type: 4,
+      })
+        .then(() => {
+          fetchData(1)
+          showToast('歌曲上传成功')
+          removeRefSong()
+        })
+        .catch((e) => {
+          showToast('歌曲上传失败：' + e.message)
+        })
+    })
+    .catch((e) => {
+      showToast('文件上传失败:' + e.message)
+    })
+}
+
+const create = () => {
+  data.value.type = custom.value ? 2 : 1
+  data.value.ref_task_id = refSong.value ? refSong.value.task_id : ''
+  data.value.ref_song_id = refSong.value ? refSong.value.song_id : ''
+  data.value.extend_secs = refSong.value ? refSong.value.extend_secs : 0
+
+  if (refSong.value) {
+    if (data.value.extend_secs > refSong.value.duration) {
+      showToast('续写开始时间不能超过原歌曲长度')
+      return
+    }
+  } else if (custom.value) {
+    if (data.value.lyrics === '') {
+      showToast('请输入歌词')
+      return
+    }
+    if (data.value.title === '') {
+      showToast('请输入歌曲标题')
+      return
+    }
+  } else {
+    if (data.value.prompt === '') {
+      showToast('请输入歌曲描述')
+      return
+    }
+  }
+
+  loading.value = true
+  httpPost('/api/suno/create', data.value)
+    .then(() => {
+      fetchData(1)
+      taskPulling.value = true
+      showToast('创建任务成功')
+    })
+    .catch((e) => {
+      showToast('创建任务失败：' + e.message)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+const fetchData = (_page) => {
+  if (_page) {
+    page.value = _page
+  }
+  listLoading.value = true
+  httpGet('/api/suno/list', { page: page.value, page_size: pageSize.value })
+    .then((res) => {
+      total.value = res.data.total
+      let needPull = false
+      const items = []
+      for (let v of res.data.items) {
+        if (v.progress === 100) {
+          v.major_model_version = v['raw_data']['major_model_version']
+        }
+        if (v.progress === 0 || v.progress === 102) {
+          needPull = true
+        }
+        items.push(v)
+      }
+      listLoading.value = false
+      taskPulling.value = needPull
+
+      if (page.value === 1) {
+        list.value = items
+      } else {
+        list.value.push(...items)
+      }
+
+      if (items.length < pageSize.value) {
+        listFinished.value = true
+      }
+    })
+    .catch((e) => {
+      listLoading.value = false
+      showToast('获取作品列表失败：' + e.message)
+    })
+}
+
+const loadMore = () => {
+  page.value++
+  fetchData()
+}
+
+const play = (item) => {
+  currentAudio.value = item.audio_url
+  showPlayer.value = true
+}
+
+const download = (item) => {
+  item.downloading = true
+  const link = document.createElement('a')
+  link.href = item.audio_url
+  link.download = item.title || 'song.mp3'
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  item.downloading = false
+  showToast('开始下载')
+}
+
+const removeJob = (item) => {
+  showDialog({
+    title: '确认删除',
+    message: '此操作将会删除任务相关文件，继续操作吗?',
+    showCancelButton: true,
+  })
+    .then(() => {
+      httpGet('/api/suno/remove', { id: item.id })
+        .then(() => {
+          showToast('任务删除成功')
+          fetchData(1)
+        })
+        .catch((e) => {
+          showToast('任务删除失败：' + e.message)
+        })
+    })
+    .catch(() => {})
+}
+
+const removeRefSong = () => {
+  refSong.value = null
+  btnText.value = '开始创作'
+}
+</script>
+
+<style lang="scss" scoped>
+.mobile-suno-create {
+  min-height: 100vh;
+  background: #f7f8fa;
+  padding-bottom: 20px;
+
+  .page-header {
+    background: #fff;
+  }
+
+  .create-form {
+    background: #fff;
+    margin: 12px;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+
+    .mode-switch {
+      margin-bottom: 20px;
+    }
+
+    .model-select {
+      margin-bottom: 20px;
+    }
+
+    .pure-music {
+      margin-bottom: 20px;
+    }
+
+    .lyrics-section,
+    .style-section,
+    .title-section {
+      margin-bottom: 20px;
+    }
+
+    .style-tags {
+      margin-top: 12px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .ref-song {
+      margin-bottom: 20px;
+      padding: 16px;
+      background: #f8f9fa;
+      border-radius: 8px;
+      border: 1px solid #e9ecef;
+    }
+
+    .upload-section {
+      margin-bottom: 20px;
+
+      .upload-area {
+        .upload-placeholder {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 120px;
+          background: #f8f9fa;
+          border: 2px dashed #dee2e6;
+          border-radius: 12px;
+          color: #6c757d;
+          transition: all 0.3s ease;
+
+          &:hover {
+            border-color: var(--van-primary-color);
+            background: #f0f8ff;
+          }
+
+          .van-icon {
+            margin-bottom: 8px;
+            color: var(--van-primary-color);
+          }
+
+          span {
+            font-size: 16px;
+            font-weight: 500;
+            margin-bottom: 4px;
+          }
+
+          small {
+            font-size: 12px;
+            opacity: 0.7;
+          }
+        }
+      }
+    }
+
+    .submit-section {
+      margin-top: 24px;
+    }
+  }
+
+  .works-list {
+    margin: 12px;
+
+    .work-item {
+      margin-bottom: 12px;
+      background: #fff;
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    }
+  }
+
+  .player-content {
+    padding: 20px;
+
+    .player-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+
+      h3 {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+      }
+
+      .van-icon {
+        font-size: 20px;
+        cursor: pointer;
+        color: #999;
+      }
+    }
+
+    audio {
+      width: 100%;
+      border-radius: 8px;
+    }
+  }
+}
+
+// 深色主题适配
+:deep(.van-theme-dark) {
+  .mobile-suno-create {
+    background: #1a1a1a;
+
+    .create-form {
+      background: #2a2a2a;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+
+      .ref-song {
+        background: #333;
+        border-color: #444;
+      }
+
+      .upload-area .upload-placeholder {
+        background: #333;
+        border-color: #555;
+
+        &:hover {
+          background: #2a2a2a;
+          border-color: var(--van-primary-color);
+        }
+      }
+    }
+
+    .works-list .work-item {
+      background: #2a2a2a;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    }
+  }
+}
+</style>
diff --git a/web/src/views/mobile/pages/VideoCreate.vue b/web/src/views/mobile/pages/VideoCreate.vue
new file mode 100644
index 00000000..8033a49b
--- /dev/null
+++ b/web/src/views/mobile/pages/VideoCreate.vue
@@ -0,0 +1,792 @@
+<template>
+  <div class="mobile-video-create">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <van-nav-bar title="视频生成" left-arrow @click-left="goBack" fixed placeholder />
+    </div>
+
+    <!-- 视频类型切换 -->
+    <div class="video-type-tabs">
+      <van-tabs v-model="activeVideoType" @change="onVideoTypeChange">
+        <van-tab title="Luma视频" name="luma">
+          <div class="tab-content">
+            <!-- Luma 视频参数 -->
+            <div class="params-container">
+              <!-- 提示词输入 -->
+              <van-field
+                v-model="lumaParams.prompt"
+                label="提示词"
+                type="textarea"
+                placeholder="请在此输入视频提示词，用逗号分割"
+                rows="4"
+                maxlength="2000"
+                show-word-limit
+              />
+
+              <!-- 提示词生成按钮 -->
+              <van-button
+                type="primary"
+                size="small"
+                @click="generatePrompt"
+                :loading="isGenerating"
+                block
+                class="mt-2"
+              >
+                生成AI视频提示词
+              </van-button>
+
+              <!-- 图片辅助生成开关 -->
+              <van-cell title="使用图片辅助生成">
+                <template #right-icon>
+                  <van-switch v-model="lumaUseImageMode" size="24" @change="toggleLumaImageMode" />
+                </template>
+              </van-cell>
+
+              <!-- 图片上传区域 -->
+              <div v-if="lumaUseImageMode" class="image-upload-section">
+                <div class="image-upload-row">
+                  <div class="image-upload-item">
+                    <van-uploader
+                      v-model="lumaStartImage"
+                      :max-count="1"
+                      :after-read="uploadLumaStartImage"
+                      accept=".jpg,.png,.jpeg"
+                    >
+                      <div class="upload-placeholder">
+                        <van-icon name="plus" />
+                        <span>起始帧</span>
+                      </div>
+                    </van-uploader>
+                  </div>
+                  <div class="image-upload-item">
+                    <van-uploader
+                      v-model="lumaEndImage"
+                      :max-count="1"
+                      :after-read="uploadLumaEndImage"
+                      accept=".jpg,.png,.jpeg"
+                    >
+                      <div class="upload-placeholder">
+                        <van-icon name="plus" />
+                        <span>结束帧</span>
+                      </div>
+                    </van-uploader>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Luma 特有参数 -->
+              <van-cell title="循环参考图">
+                <template #right-icon>
+                  <van-switch v-model="lumaParams.loop" size="24" />
+                </template>
+              </van-cell>
+
+              <van-cell title="提示词优化">
+                <template #right-icon>
+                  <van-switch v-model="lumaParams.expand_prompt" size="24" />
+                </template>
+              </van-cell>
+
+              <!-- 算力显示 -->
+              <van-cell title="当前可用算力" :value="`${availablePower}`" />
+
+              <!-- 生成按钮 -->
+              <van-button
+                type="primary"
+                size="large"
+                @click="createLumaVideo"
+                :loading="generating"
+                block
+                class="mt-4"
+              >
+                立即生成 ({{ lumaPowerCost }}算力)
+              </van-button>
+            </div>
+          </div>
+        </van-tab>
+
+        <van-tab title="可灵视频" name="keling">
+          <div class="tab-content">
+            <!-- KeLing 视频参数 -->
+            <div class="params-container">
+              <!-- 画面比例 -->
+              <van-field
+                v-model="kelingParams.aspect_ratio"
+                label="画面比例"
+                readonly
+                is-link
+                @click="showAspectRatioPicker = true"
+              />
+
+              <!-- 模型选择 -->
+              <van-field
+                v-model="kelingParams.model"
+                label="模型选择"
+                readonly
+                is-link
+                @click="showModelPicker = true"
+              />
+
+              <!-- 视频时长 -->
+              <van-field
+                v-model="kelingParams.duration"
+                label="视频时长"
+                readonly
+                is-link
+                @click="showDurationPicker = true"
+              />
+
+              <!-- 生成模式 -->
+              <van-field
+                v-model="kelingParams.mode"
+                label="生成模式"
+                readonly
+                is-link
+                @click="showModePicker = true"
+              />
+
+              <!-- 创意程度 -->
+              <van-cell title="创意程度">
+                <template #value>
+                  <van-slider
+                    v-model="kelingParams.cfg_scale"
+                    :min="0"
+                    :max="1"
+                    :step="0.1"
+                    style="width: 200px"
+                  />
+                </template>
+              </van-cell>
+
+              <!-- 运镜控制 -->
+              <van-field
+                v-model="kelingParams.camera_control.type"
+                label="运镜控制"
+                readonly
+                is-link
+                @click="showCameraControlPicker = true"
+              />
+
+              <!-- 图片辅助生成开关 -->
+              <van-cell title="使用图片辅助生成">
+                <template #right-icon>
+                  <van-switch
+                    v-model="kelingUseImageMode"
+                    size="24"
+                    @change="toggleKelingImageMode"
+                  />
+                </template>
+              </van-cell>
+
+              <!-- 图片上传区域 -->
+              <div v-if="kelingUseImageMode" class="image-upload-section">
+                <div class="image-upload-row">
+                  <div class="image-upload-item">
+                    <van-uploader
+                      v-model="kelingStartImage"
+                      :max-count="1"
+                      :after-read="uploadKelingStartImage"
+                      accept=".jpg,.png,.jpeg"
+                    >
+                      <div class="upload-placeholder">
+                        <van-icon name="plus" />
+                        <span>起始帧</span>
+                      </div>
+                    </van-uploader>
+                  </div>
+                  <div class="image-upload-item">
+                    <van-uploader
+                      v-model="kelingEndImage"
+                      :max-count="1"
+                      :after-read="uploadKelingEndImage"
+                      accept=".jpg,.png,.jpeg"
+                    >
+                      <div class="upload-placeholder">
+                        <van-icon name="plus" />
+                        <span>结束帧</span>
+                      </div>
+                    </van-uploader>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 提示词输入 -->
+              <van-field
+                v-model="kelingParams.prompt"
+                label="提示词"
+                type="textarea"
+                :placeholder="kelingUseImageMode ? '描述视频画面细节' : '请在此输入视频提示词'"
+                rows="4"
+                maxlength="500"
+                show-word-limit
+              />
+
+              <!-- 提示词生成按钮 -->
+              <van-button
+                type="primary"
+                size="small"
+                @click="generatePrompt"
+                :loading="isGenerating"
+                block
+                class="mt-2"
+              >
+                生成专业视频提示词
+              </van-button>
+
+              <!-- 排除内容 -->
+              <van-field
+                v-model="kelingParams.negative_prompt"
+                label="不希望出现的内容"
+                type="textarea"
+                placeholder="请在此输入你不希望出现在视频上的内容"
+                rows="3"
+                maxlength="500"
+                show-word-limit
+              />
+
+              <!-- 算力显示 -->
+              <van-cell title="当前可用算力" :value="`${availablePower}`" />
+
+              <!-- 生成按钮 -->
+              <van-button
+                type="primary"
+                size="large"
+                @click="createKelingVideo"
+                :loading="generating"
+                block
+                class="mt-4"
+              >
+                立即生成 ({{ kelingPowerCost }}算力)
+              </van-button>
+            </div>
+          </div>
+        </van-tab>
+      </van-tabs>
+    </div>
+
+    <!-- 作品列表 -->
+    <div class="works-list">
+      <van-list
+        v-model:loading="listLoading"
+        :finished="listFinished"
+        finished-text="没有更多了"
+        @load="loadMore"
+      >
+        <div v-for="item in currentList" :key="item.id" class="work-item">
+          <van-card :title="item.title || '未命名视频'" :desc="item.prompt" :thumb="item.cover_url">
+            <template #tags>
+              <van-tag v-if="item.raw_data?.task_type" type="primary">
+                {{ item.raw_data.task_type }}
+              </van-tag>
+              <van-tag v-if="item.raw_data?.model" type="success">
+                {{ item.raw_data.model }}
+              </van-tag>
+              <van-tag v-if="item.raw_data?.duration" type="warning">
+                {{ item.raw_data.duration }}秒
+              </van-tag>
+            </template>
+            <template #footer>
+              <van-button v-if="item.progress === 100" size="small" @click="playVideo(item)">
+                播放
+              </van-button>
+              <van-button
+                v-if="item.progress === 100"
+                size="small"
+                @click="downloadVideo(item)"
+                :loading="item.downloading"
+              >
+                下载
+              </van-button>
+              <van-button size="small" type="danger" @click="removeJob(item)"> 删除 </van-button>
+            </template>
+          </van-card>
+        </div>
+      </van-list>
+    </div>
+
+    <!-- 各种选择器弹窗 -->
+    <van-popup v-model:show="showAspectRatioPicker" position="bottom">
+      <van-picker
+        :columns="aspectRatioOptions"
+        @confirm="onAspectRatioConfirm"
+        @cancel="showAspectRatioPicker = false"
+      />
+    </van-popup>
+
+    <van-popup v-model:show="showModelPicker" position="bottom">
+      <van-picker
+        :columns="modelOptions"
+        @confirm="onModelConfirm"
+        @cancel="showModelPicker = false"
+      />
+    </van-popup>
+
+    <van-popup v-model:show="showDurationPicker" position="bottom">
+      <van-picker
+        :columns="durationOptions"
+        @confirm="onDurationConfirm"
+        @cancel="showDurationPicker = false"
+      />
+    </van-popup>
+
+    <van-popup v-model:show="showModePicker" position="bottom">
+      <van-picker
+        :columns="modeOptions"
+        @confirm="onModeConfirm"
+        @cancel="showModePicker = false"
+      />
+    </van-popup>
+
+    <van-popup v-model:show="showCameraControlPicker" position="bottom">
+      <van-picker
+        :columns="cameraControlOptions"
+        @confirm="onCameraControlConfirm"
+        @cancel="showCameraControlPicker = false"
+      />
+    </van-popup>
+
+    <!-- 视频预览弹窗 -->
+    <van-popup
+      v-model:show="showVideoDialog"
+      position="center"
+      :style="{ width: '90%', height: '60%' }"
+    >
+      <div class="video-preview">
+        <video
+          v-if="currentVideoUrl"
+          :src="currentVideoUrl"
+          controls
+          autoplay
+          style="width: 100%; height: 100%"
+        >
+          您的浏览器不支持视频播放
+        </video>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast, showDialog } from 'vant'
+import { httpGet, httpPost } from '@/utils/http'
+import { checkSession } from '@/store/cache'
+
+const router = useRouter()
+
+// 响应式数据
+const activeVideoType = ref('luma')
+const loading = ref(false)
+const generating = ref(false)
+const isGenerating = ref(false)
+const listLoading = ref(false)
+const listFinished = ref(false)
+const currentList = ref([])
+const showVideoDialog = ref(false)
+const currentVideoUrl = ref('')
+
+// Luma 参数
+const lumaParams = ref({
+  prompt: '',
+  image: '',
+  image_tail: '',
+  loop: false,
+  expand_prompt: false,
+})
+const lumaUseImageMode = ref(false)
+const lumaStartImage = ref([])
+const lumaEndImage = ref([])
+
+// KeLing 参数
+const kelingParams = ref({
+  aspect_ratio: '16:9',
+  model: 'v1.5',
+  duration: '5',
+  mode: 'std',
+  cfg_scale: 0.5,
+  prompt: '',
+  negative_prompt: '',
+  image: '',
+  image_tail: '',
+  camera_control: {
+    type: '',
+    config: {
+      horizontal: 0,
+      vertical: 0,
+      pan: 0,
+      tilt: 0,
+      roll: 0,
+      zoom: 0,
+    },
+  },
+})
+const kelingUseImageMode = ref(false)
+const kelingStartImage = ref([])
+const kelingEndImage = ref([])
+
+// 选择器相关
+const showAspectRatioPicker = ref(false)
+const showModelPicker = ref(false)
+const showDurationPicker = ref(false)
+const showModePicker = ref(false)
+const showCameraControlPicker = ref(false)
+
+// 选项数据
+const aspectRatioOptions = ['16:9', '9:16', '1:1', '4:3']
+const modelOptions = ['v1.0', 'v1.5']
+const durationOptions = ['5', '10']
+const modeOptions = ['std', 'pro']
+const cameraControlOptions = [
+  '',
+  'simple',
+  'down_back',
+  'forward_up',
+  'right_turn_forward',
+  'left_turn_forward',
+]
+
+// 页面数据
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const availablePower = ref(0)
+const lumaPowerCost = ref(0)
+const kelingPowerCost = ref(0)
+const taskPulling = ref(true)
+const tastPullHandler = ref(null)
+
+// 生命周期
+onMounted(() => {
+  checkSession()
+    .then(() => {
+      fetchData(1)
+      fetchUserPower()
+      tastPullHandler.value = setInterval(() => {
+        if (taskPulling.value) {
+          fetchData(1)
+        }
+      }, 5000)
+    })
+    .catch(() => {})
+})
+
+onUnmounted(() => {
+  if (tastPullHandler.value) {
+    clearInterval(tastPullHandler.value)
+  }
+})
+
+// 方法
+const goBack = () => {
+  router.back()
+}
+
+const onVideoTypeChange = (name) => {
+  activeVideoType.value = name
+}
+
+const generatePrompt = () => {
+  isGenerating.value = true
+  // TODO: 实现提示词生成逻辑
+  setTimeout(() => {
+    isGenerating.value = false
+    showToast('提示词生成功能开发中')
+  }, 2000)
+}
+
+const toggleLumaImageMode = () => {
+  if (!lumaUseImageMode.value) {
+    lumaParams.value.image = ''
+    lumaParams.value.image_tail = ''
+    lumaStartImage.value = []
+    lumaEndImage.value = []
+  }
+}
+
+const toggleKelingImageMode = () => {
+  if (!kelingUseImageMode.value) {
+    kelingParams.value.image = ''
+    kelingParams.value.image_tail = ''
+    kelingStartImage.value = []
+    kelingEndImage.value = []
+  }
+}
+
+const uploadLumaStartImage = (file) => {
+  uploadImage(file, (url) => {
+    lumaParams.value.image = url
+  })
+}
+
+const uploadLumaEndImage = (file) => {
+  uploadImage(file, (url) => {
+    lumaParams.value.image_tail = url
+  })
+}
+
+const uploadKelingStartImage = (file) => {
+  uploadImage(file, (url) => {
+    kelingParams.value.image = url
+  })
+}
+
+const uploadKelingEndImage = (file) => {
+  uploadImage(file, (url) => {
+    kelingParams.value.image_tail = url
+  })
+}
+
+const uploadImage = (file, callback) => {
+  const formData = new FormData()
+  formData.append('file', file.file, file.name)
+  showToast({ message: '正在上传图片...', duration: 0 })
+
+  httpPost('/api/upload', formData)
+    .then((res) => {
+      callback(res.data.url)
+      showToast('图片上传成功')
+    })
+    .catch((e) => {
+      showToast('图片上传失败:' + e.message)
+    })
+}
+
+const createLumaVideo = () => {
+  if (!lumaParams.value.prompt.trim()) {
+    showToast('请输入视频提示词')
+    return
+  }
+
+  generating.value = true
+  const params = {
+    ...lumaParams.value,
+    task_type: 'luma',
+  }
+
+  httpPost('/api/video/create', params)
+    .then(() => {
+      fetchData(1)
+      taskPulling.value = true
+      showToast('创建任务成功')
+    })
+    .catch((e) => {
+      showToast('创建任务失败：' + e.message)
+    })
+    .finally(() => {
+      generating.value = false
+    })
+}
+
+const createKelingVideo = () => {
+  if (!kelingParams.value.prompt.trim()) {
+    showToast('请输入视频提示词')
+    return
+  }
+
+  generating.value = true
+  const params = {
+    ...kelingParams.value,
+    task_type: 'keling',
+  }
+
+  httpPost('/api/video/create', params)
+    .then(() => {
+      fetchData(1)
+      taskPulling.value = true
+      showToast('创建任务成功')
+    })
+    .catch((e) => {
+      showToast('创建任务失败：' + e.message)
+    })
+    .finally(() => {
+      generating.value = false
+    })
+}
+
+const fetchData = (_page) => {
+  if (_page) {
+    page.value = _page
+  }
+  listLoading.value = true
+  httpGet('/api/video/list', { page: page.value, page_size: pageSize.value })
+    .then((res) => {
+      total.value = res.data.total
+      let needPull = false
+      const items = []
+      for (let v of res.data.items) {
+        if (v.progress === 0 || v.progress === 102) {
+          needPull = true
+        }
+        items.push(v)
+      }
+      listLoading.value = false
+      taskPulling.value = needPull
+
+      if (page.value === 1) {
+        currentList.value = items
+      } else {
+        currentList.value.push(...items)
+      }
+
+      if (items.length < pageSize.value) {
+        listFinished.value = true
+      }
+    })
+    .catch((e) => {
+      listLoading.value = false
+      showToast('获取作品列表失败：' + e.message)
+    })
+}
+
+const fetchUserPower = () => {
+  httpGet('/api/user/power')
+    .then((res) => {
+      availablePower.value = res.data.power || 0
+      lumaPowerCost.value = 10 // 示例值
+      kelingPowerCost.value = 15 // 示例值
+    })
+    .catch(() => {})
+}
+
+const loadMore = () => {
+  page.value++
+  fetchData()
+}
+
+const playVideo = (item) => {
+  currentVideoUrl.value = item.video_url
+  showVideoDialog.value = true
+}
+
+const downloadVideo = (item) => {
+  item.downloading = true
+  const link = document.createElement('a')
+  link.href = item.video_url
+  link.download = item.title || 'video.mp4'
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  item.downloading = false
+  showToast('开始下载')
+}
+
+const removeJob = (item) => {
+  showDialog({
+    title: '确认删除',
+    message: '此操作将会删除任务相关文件，继续操作吗?',
+    showCancelButton: true,
+  })
+    .then(() => {
+      httpGet('/api/video/remove', { id: item.id })
+        .then(() => {
+          showToast('任务删除成功')
+          fetchData(1)
+        })
+        .catch((e) => {
+          showToast('任务删除失败：' + e.message)
+        })
+    })
+    .catch(() => {})
+}
+
+// 选择器确认方法
+const onAspectRatioConfirm = (value) => {
+  kelingParams.value.aspect_ratio = value
+  showAspectRatioPicker.value = false
+}
+
+const onModelConfirm = (value) => {
+  kelingParams.value.model = value
+  showModelPicker.value = false
+}
+
+const onDurationConfirm = (value) => {
+  kelingParams.value.duration = value
+  showDurationPicker.value = false
+}
+
+const onModeConfirm = (value) => {
+  kelingParams.value.mode = value
+  showModePicker.value = false
+}
+
+const onCameraControlConfirm = (value) => {
+  kelingParams.value.camera_control.type = value
+  showCameraControlPicker.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.mobile-video-create {
+  min-height: 100vh;
+  background: #f7f8fa;
+  padding-bottom: 20px;
+
+  .page-header {
+    background: #fff;
+  }
+
+  .video-type-tabs {
+    background: #fff;
+    margin: 12px;
+    border-radius: 8px;
+    overflow: hidden;
+
+    .tab-content {
+      padding: 16px;
+    }
+
+    .params-container {
+      .image-upload-section {
+        margin: 16px 0;
+
+        .image-upload-row {
+          display: flex;
+          gap: 12px;
+
+          .image-upload-item {
+            flex: 1;
+
+            .upload-placeholder {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              height: 100px;
+              background: #f5f5f5;
+              border: 2px dashed #ddd;
+              border-radius: 8px;
+              color: #999;
+
+              .van-icon {
+                font-size: 24px;
+                margin-bottom: 8px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .works-list {
+    margin: 12px;
+
+    .work-item {
+      margin-bottom: 12px;
+      background: #fff;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+  }
+
+  .video-preview {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>