From 99df028237a02ed9f1488449dccea0a788852b22 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Sun, 28 Apr 2024 19:09:26 +0800
Subject: [PATCH] feat: add index page for mobile

---
 CHANGELOG.md                                 |   2 +
 api/handler/chatimpl/chat_item_handler.go    |  10 +-
 api/store/vo/chat_item.go                    |  15 +-
 web/.env.development                         |   2 +-
 web/.env.production                          |   2 +-
 web/src/App.vue                              |   1 -
 web/src/assets/css/mobile/chat-list.styl     |   3 +
 web/src/assets/css/mobile/chat-session.styl  |  25 +-
 web/src/components/SendMsg.vue               |   9 +-
 web/src/components/admin/AdminHeader.vue     |  31 +-
 web/src/components/admin/AdminSidebar.vue    |  12 +-
 web/src/components/admin/AdminTags.vue       | 116 ++++----
 web/src/components/mobile/ChatPrompt.vue     |   1 +
 web/src/main.js                              |   6 +-
 web/src/router.js                            |  31 +-
 web/src/utils/libs.js                        |  14 +
 web/src/views/ChatPlus.vue                   |   9 -
 web/src/views/Index.vue                      |   6 +-
 web/src/views/mobile/ChatExport.vue          |  59 ++--
 web/src/views/mobile/ChatList.vue            |  77 +++--
 web/src/views/mobile/ChatSession.vue         | 282 +++++++++++--------
 web/src/views/mobile/Home.vue                |  19 +-
 web/src/views/mobile/Image.vue               |   4 +-
 web/src/views/mobile/Index.vue               | 234 +++++++++++++++
 web/src/views/mobile/Profile.vue             |   5 +-
 web/src/views/mobile/{ => pages}/ImageMj.vue |   0
 web/src/views/mobile/{ => pages}/ImageSd.vue |   0
 web/src/views/mobile/{ => pages}/ImgWall.vue |  14 +-
 28 files changed, 640 insertions(+), 349 deletions(-)
 create mode 100644 web/src/views/mobile/Index.vue
 rename web/src/views/mobile/{ => pages}/ImageMj.vue (100%)
 rename web/src/views/mobile/{ => pages}/ImageSd.vue (100%)
 rename web/src/views/mobile/{ => pages}/ImgWall.vue (90%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43553bf3..d0689b25 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,8 @@
 * 功能优化：优化首页登录注册页面的 UI
 * BUG修复：修复License验证的逻辑漏洞
 * Bug修复：后台添加用户的时候密码规则限制跟前台注册保持一致
+* 功能新增：管理后台支持切换主题，支持 light 和 dark 模式
+* 功能新增：移动端新增 DALL-E 绘画功能
 
 ## v4.0.4
 
diff --git a/api/handler/chatimpl/chat_item_handler.go b/api/handler/chatimpl/chat_item_handler.go
index b9337556..c04dab19 100644
--- a/api/handler/chatimpl/chat_item_handler.go
+++ b/api/handler/chatimpl/chat_item_handler.go
@@ -187,12 +187,20 @@ func (h *ChatHandler) Detail(c *gin.Context) {
 		return
 	}
 
+	// 填充角色名称
+	var role model.ChatRole
+	res = h.DB.Where("id", chatItem.RoleId).First(&role)
+	if res.Error != nil {
+		resp.ERROR(c, "Role not found")
+		return
+	}
+
 	var chatItemVo vo.ChatItem
 	err := utils.CopyObject(chatItem, &chatItemVo)
 	if err != nil {
 		resp.ERROR(c, err.Error())
 		return
 	}
-
+	chatItemVo.RoleName = role.Name
 	resp.SUCCESS(c, chatItemVo)
 }
diff --git a/api/store/vo/chat_item.go b/api/store/vo/chat_item.go
index ec43c320..4ac66fcc 100644
--- a/api/store/vo/chat_item.go
+++ b/api/store/vo/chat_item.go
@@ -2,11 +2,12 @@ package vo
 
 type ChatItem struct {
 	BaseVo
-	UserId  uint   `json:"user_id"`
-	Icon    string `json:"icon"`
-	RoleId  uint   `json:"role_id"`
-	ChatId  string `json:"chat_id"`
-	ModelId uint   `json:"model_id"`
-	Model   string `json:"model"`
-	Title   string `json:"title"`
+	UserId   uint   `json:"user_id"`
+	Icon     string `json:"icon"`
+	RoleId   uint   `json:"role_id"`
+	RoleName string `json:"role_name"`
+	ChatId   string `json:"chat_id"`
+	ModelId  uint   `json:"model_id"`
+	Model    string `json:"model"`
+	Title    string `json:"title"`
 }
diff --git a/web/.env.development b/web/.env.development
index 86a41a45..5aa2e256 100644
--- a/web/.env.development
+++ b/web/.env.development
@@ -6,4 +6,4 @@ VUE_APP_ADMIN_USER=admin
 VUE_APP_ADMIN_PASS=admin123
 VUE_APP_KEY_PREFIX=ChatPLUS_DEV_
 VUE_APP_TITLE="Geek-AI 创作系统"
-VUE_APP_VERSION=v4.0.4
+VUE_APP_VERSION=v4.0.5
diff --git a/web/.env.production b/web/.env.production
index 06285be4..44521618 100644
--- a/web/.env.production
+++ b/web/.env.production
@@ -2,4 +2,4 @@ VUE_APP_API_HOST=
 VUE_APP_WS_HOST=
 VUE_APP_KEY_PREFIX=ChatPLUS_
 VUE_APP_TITLE="Geek-AI 创作系统"
-VUE_APP_VERSION=v4.0.4
+VUE_APP_VERSION=v4.0.5
diff --git a/web/src/App.vue b/web/src/App.vue
index f743f393..ae0a0856 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -32,7 +32,6 @@ window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
 
 <style lang="stylus">
 html, body {
-  height: 100%;
   margin: 0;
   padding: 0;
 }
diff --git a/web/src/assets/css/mobile/chat-list.styl b/web/src/assets/css/mobile/chat-list.styl
index 5976c1f7..50517900 100644
--- a/web/src/assets/css/mobile/chat-list.styl
+++ b/web/src/assets/css/mobile/chat-list.styl
@@ -1,5 +1,8 @@
 .mobile-chat-list {
   .content {
+    padding-top 46px
+    padding-bottom 60px
+
     .van-list {
       .van-cell__value {
         .chat-list-item {
diff --git a/web/src/assets/css/mobile/chat-session.styl b/web/src/assets/css/mobile/chat-session.styl
index a8cb91da..c39983be 100644
--- a/web/src/assets/css/mobile/chat-session.styl
+++ b/web/src/assets/css/mobile/chat-session.styl
@@ -1,14 +1,23 @@
 .mobile-chat {
-  .message-list-box {
-    //padding-top 50px
-    padding-bottom 10px
-    overflow-x auto
-    background #F5F5F5;
+  .van-nav-bar {
+    position static
+  }
 
-    .van-cell {
-      background none
-      font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  .chat-list-wrapper {
+    padding 10px 0 10px 0
+    background #F5F5F5;
+    overflow hidden
+
+
+    .message-list-box {
+      overflow auto
+
+      .van-cell {
+        background none
+        font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+      }
     }
+
   }
 
   .chat-box-wrapper {
diff --git a/web/src/components/SendMsg.vue b/web/src/components/SendMsg.vue
index d419bd2a..19364531 100644
--- a/web/src/components/SendMsg.vue
+++ b/web/src/components/SendMsg.vue
@@ -11,7 +11,7 @@
         style="width:90%;max-width: 360px;"
     >
       <slide-captcha
-          v-if="isIphone()"
+          v-if="isMobile()"
           :bg-img="bgImg"
           :bk-img="bkImg"
           :result="result"
@@ -42,8 +42,9 @@ import {ElMessage} from "element-plus";
 import {httpGet, httpPost} from "@/utils/http";
 import CaptchaPlus from "@/components/CaptchaPlus.vue";
 import SlideCaptcha from "@/components/SlideCaptcha.vue";
-import {isIphone} from "@/utils/libs";
+import {isMobile} from "@/utils/libs";
 
+// eslint-disable-next-line no-undef
 const props = defineProps({
   receiver: String,
   size: String,
@@ -98,8 +99,8 @@ const loadCaptcha = () => {
   }
 
   showCaptcha.value = true
-  // iphone 手机用滑动验证码
-  if (isIphone()) {
+  // 手机用滑动验证码
+  if (isMobile()) {
     getSlideCaptcha()
   } else {
     handleRequestCaptCode()
diff --git a/web/src/components/admin/AdminHeader.vue b/web/src/components/admin/AdminHeader.vue
index 666efa41..bd2a468d 100644
--- a/web/src/components/admin/AdminHeader.vue
+++ b/web/src/components/admin/AdminHeader.vue
@@ -36,20 +36,9 @@
 					</span>
           <template #dropdown>
             <el-dropdown-menu>
-
-              <a href="https://github.com/yangjian102621/chatgpt-plus" target="_blank">
-                <el-dropdown-item>
-                  <i class="iconfont icon-github"></i>
-                  <span>{{ sysTitle }}</span>
-                </el-dropdown-item>
-              </a>
               <el-dropdown-item>
                 <i class="iconfont icon-version"></i> 当前版本：{{ version }}
               </el-dropdown-item>
-              <el-dropdown-item @click="showDialog = true">
-                <i class="iconfont icon-reward"></i>
-                <span>打赏作者</span>
-              </el-dropdown-item>
               <el-dropdown-item divided @click="logout">
                 <i class="iconfont icon-logout"></i>
                 <span>退出登录</span>
@@ -60,36 +49,19 @@
       </div>
     </div>
 
-    <el-dialog
-        v-model="showDialog"
-        :show-close="true"
-        class="donate-dialog"
-        width="400px"
-        title="请作者喝杯咖啡"
-    >
-      <el-alert type="info" :closable="false">
-        <p>如果你觉得这个项目对你有帮助，并且情况允许的话，可以请作者喝杯咖啡，非常感谢你的支持～</p>
-      </el-alert>
-      <p>
-        <el-image :src="donateImg"/>
-      </p>
-    </el-dialog>
   </div>
 </template>
 <script setup>
 import {computed, onMounted, ref} from 'vue';
 import {getMenuItems, useSidebarStore} from '@/store/sidebar';
-import {useRouter} from 'vue-router';
+import {useRouter} from "vue-router";
 import {ArrowDown, ArrowRight, Expand, Fold, Moon, Sunny} from "@element-plus/icons-vue";
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {removeAdminToken} from "@/store/session";
 
-const sysTitle = ref(process.env.VUE_APP_TITLE)
 const version = ref(process.env.VUE_APP_VERSION)
 const avatar = ref('/images/user-info.jpg')
-const donateImg = ref('/images/wechat-pay.png')
-const showDialog = ref(false)
 const sidebar = useSidebarStore();
 const router = useRouter();
 const breadcrumb = ref([])
@@ -187,7 +159,6 @@ const logout = function () {
   font-size: 22px;
   color: #303133;
   background-color #ffffff
-  border-bottom 1px solid #eaecef
 
   .collapse-btn {
     display: flex;
diff --git a/web/src/components/admin/AdminSidebar.vue b/web/src/components/admin/AdminSidebar.vue
index 400f40f6..df24ddc8 100644
--- a/web/src/components/admin/AdminSidebar.vue
+++ b/web/src/components/admin/AdminSidebar.vue
@@ -1,9 +1,9 @@
 <template>
   <div :class="'sidebar '+theme">
-    <div class="logo">
+    <a class="logo" href="/" target="_blank">
       <el-image :src="logo"/>
       <span class="text" v-show="!sidebar.collapse">{{ title }}</span>
-    </div>
+    </a>
 
     <el-menu
         class="sidebar-el-menu"
@@ -54,9 +54,9 @@
 <script setup>
 import {computed, ref} from 'vue';
 import {setMenuItems, useSidebarStore} from '@/store/sidebar';
-import {useRoute} from 'vue-router';
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
+import {useRoute} from "vue-router";
 
 const title = ref('Chat-Plus-Admin')
 const logo = ref('/images/logo.png')
@@ -199,6 +199,7 @@ setMenuItems(items)
     width 219px
     background-color #324157
     padding 6px 15px;
+    cursor pointer
 
     .el-image {
       width 36px;
@@ -248,6 +249,7 @@ setMenuItems(items)
 
   .logo {
     background var(--el-bg-color)
+    border-right 1px solid var(--el-border-color)
 
     .text {
       color var(--el-text-color-regular)
@@ -269,6 +271,10 @@ setMenuItems(items)
   .sidebar-el-menu:not(.el-menu--collapse) {
     width: 250px;
   }
+
+  .el-menu {
+    border-color var(--el-border-color)
+  }
 }
 
 </style>
diff --git a/web/src/components/admin/AdminTags.vue b/web/src/components/admin/AdminTags.vue
index fcacc5d6..2fb757e4 100644
--- a/web/src/components/admin/AdminTags.vue
+++ b/web/src/components/admin/AdminTags.vue
@@ -118,71 +118,75 @@ const handleTags = (command) => {
 // });
 </script>
 
-<style>
+<style scoped lang="stylus">
 .tags {
   position: relative;
   height: 30px;
   overflow: hidden;
   background: #fff;
-  padding-right: 120px;
+  padding 5px 120px 5px 10px
   -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
   box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+
+  ul {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+
+    .tags-li {
+      display: flex;
+      align-items: center;
+      float: left;
+      margin: 3px 5px 2px 3px;
+      border-radius: 3px;
+      font-size: 12px;
+      overflow: hidden;
+      cursor: pointer;
+      height: 23px;
+      border: 1px solid var(--el-border-color);
+      background: var(--el-bg-color);
+      padding: 0 5px 0 12px;
+      color: var(--el-text-color);
+      -webkit-transition: all 0.3s ease-in;
+      -moz-transition: all 0.3s ease-in;
+      transition: all 0.3s ease-in;
+
+      &:hover {
+        background: var(--el-menu-bg-color-dark);
+      }
+    }
+
+    .tags-li-title {
+      float: left;
+      max-width: 80px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-right: 5px;
+      color: #666;
+    }
+
+    .tags-li.active .tags-li-title {
+      color: var(--el-color-primary)
+    }
+  }
+
+  .tags-close-box {
+    position: absolute;
+    right: 0;
+    top: 7px;
+    box-sizing: border-box;
+    padding-top: 1px;
+    text-align: center;
+    width: 110px;
+    height: 30px;
+    background: var(--el-bg-color);
+    z-index: 10;
+  }
 }
 
-.tags ul {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
+.tags.dark {
+  border-bottom 1px solid var(--el-border-color)
 }
 
-.tags-li {
-  display: flex;
-  align-items: center;
-  float: left;
-  margin: 3px 5px 2px 3px;
-  border-radius: 3px;
-  font-size: 12px;
-  overflow: hidden;
-  cursor: pointer;
-  height: 23px;
-  border: 1px solid var(--el-border-color);
-  background: var(--el-bg-color);
-  padding: 0 5px 0 12px;
-  color: var(--el-text-color);
-  -webkit-transition: all 0.3s ease-in;
-  -moz-transition: all 0.3s ease-in;
-  transition: all 0.3s ease-in;
-}
-
-.tags-li:hover {
-  background: var(--el-menu-bg-color-dark);
-}
-
-.tags-li-title {
-  float: left;
-  max-width: 80px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  margin-right: 5px;
-  color: #666;
-}
-
-.tags-li.active .tags-li-title {
-  color: var(--el-color-primary)
-}
-
-.tags-close-box {
-  position: absolute;
-  right: 0;
-  top: 2px;
-  box-sizing: border-box;
-  padding-top: 1px;
-  text-align: center;
-  width: 110px;
-  height: 30px;
-  background: var(--el-bg-color);
-  box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
-  z-index: 10;
-}
 </style>
diff --git a/web/src/components/mobile/ChatPrompt.vue b/web/src/components/mobile/ChatPrompt.vue
index c56b29be..8d9a464e 100644
--- a/web/src/components/mobile/ChatPrompt.vue
+++ b/web/src/components/mobile/ChatPrompt.vue
@@ -16,6 +16,7 @@ import {onMounted, ref} from "vue";
 import Clipboard from "clipboard";
 import {showNotify} from "vant";
 
+// eslint-disable-next-line no-unused-vars,no-undef
 const props = defineProps({
   content: {
     type: String,
diff --git a/web/src/main.js b/web/src/main.js
index 64227b94..0e2bd740 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -14,7 +14,7 @@ import {
     Collapse,
     CollapseItem,
     ConfigProvider,
-    Dialog,
+    Dialog, Divider,
     DropdownItem,
     DropdownMenu,
     Empty,
@@ -28,7 +28,7 @@ import {
     Lazyload,
     List,
     Loading,
-    NavBar,
+    NavBar, NoticeBar,
     Notify,
     Overlay,
     Picker,
@@ -97,6 +97,8 @@ app.use(Lazyload);
 app.use(ImagePreview);
 app.use(Tab);
 app.use(Tabs);
+app.use(Divider);
+app.use(NoticeBar);
 app.use(router).use(ElementPlus).mount('#app')
 
 
diff --git a/web/src/router.js b/web/src/router.js
index 2454a974..538fc9eb 100644
--- a/web/src/router.js
+++ b/web/src/router.js
@@ -201,8 +201,13 @@ const routes = [
         path: '/mobile',
         meta: {title: 'Geek-AI v4.0'},
         component: () => import('@/views/mobile/Home.vue'),
-        redirect: '/mobile/chat',
+        redirect: '/mobile/index',
         children: [
+            {
+                path: '/mobile/index',
+                name: 'mobile-index',
+                component: () => import('@/views/mobile/Index.vue'),
+            },
             {
                 path: '/mobile/chat',
                 name: 'mobile-chat',
@@ -219,22 +224,22 @@ const routes = [
                 component: () => import('@/views/mobile/Profile.vue'),
             },
             {
-                path: '/mobile/img-wall',
+                path: '/mobile/imgWall',
                 name: 'mobile-img-wall',
-                component: () => import('@/views/mobile/ImgWall.vue'),
+                component: () => import('@/views/mobile/pages/ImgWall.vue'),
+            },
+            {
+                path: '/mobile/chat/session',
+                name: 'mobile-chat-session',
+                component: () => import('@/views/mobile/ChatSession.vue'),
+            },
+            {
+                path: '/mobile/chat/export',
+                name: 'mobile-chat-export',
+                component: () => import('@/views/mobile/ChatExport.vue'),
             },
         ]
     },
-    {
-        path: '/mobile/chat/session',
-        name: 'mobile-chat-session',
-        component: () => import('@/views/mobile/ChatSession.vue'),
-    },
-    {
-        path: '/mobile/chat/export',
-        name: 'mobile-chat-export',
-        component: () => import('@/views/mobile/ChatExport.vue'),
-    },
 
     {
         name: 'test',
diff --git a/web/src/utils/libs.js b/web/src/utils/libs.js
index 646608e6..0a989f1a 100644
--- a/web/src/utils/libs.js
+++ b/web/src/utils/libs.js
@@ -1,6 +1,8 @@
 /**
  * Util lib functions
  */
+import {showConfirmDialog} from "vant";
+import {useRouter} from "vue-router";
 
 // generate a random string
 export function randString(length) {
@@ -224,3 +226,15 @@ export function escapeHTML(html) {
 export function isIphone() {
     return /iPhone/i.test(navigator.userAgent) && !/iPad/i.test(navigator.userAgent);
 }
+
+export function showLoginDialog(router) {
+    showConfirmDialog({
+        title: '登录',
+        message:
+            '当前操作需要登录才能进行，前往登录？',
+    }).then(() => {
+        router.push("/login")
+    }).catch(() => {
+        // on cancel
+    });
+}
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index b5fb3c71..b0bcc7c7 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -355,7 +355,6 @@ const initData = () => {
         // 加载角色列表
         httpGet(`/api/role/list`).then((res) => {
           roles.value = res.data;
-          console.log()
           if (router.currentRoute.value.params.role_id) {
             roleId.value = parseInt(router.currentRoute.value.params["role_id"])
           } else {
@@ -901,14 +900,6 @@ const exportChat = () => {
   window.open(url, '_blank');
 }
 
-const getChatById = (chatId) => {
-  for (let index in chatList.value) {
-    if (chatList.value[index].chat_id === chatId) {
-      return chatList.value[index]
-    }
-  }
-  return null
-}
 
 const getModelValue = (model_id) => {
   for (let i = 0; i < models.value.length; i++) {
diff --git a/web/src/views/Index.vue b/web/src/views/Index.vue
index 559795c8..fb60766e 100644
--- a/web/src/views/Index.vue
+++ b/web/src/views/Index.vue
@@ -34,16 +34,16 @@
       <p>{{ slogan }}</p>
       <el-button @click="router.push('/chat')" color="#ffffff" style="color:#007bff" :dark="false">
         <i class="iconfont icon-chat"></i>
-        <span>AI聊天</span>
+        <span>AI 对话</span>
       </el-button>
       <el-button @click="router.push('/mj')" color="#C4CCFD" style="color:#424282" :dark="false">
         <i class="iconfont icon-mj"></i>
-        <span>AI-MJ绘画</span>
+        <span>MJ 绘画</span>
       </el-button>
 
       <el-button @click="router.push('/sd')" color="#4AE6DF" style="color:#424282" :dark="false">
         <i class="iconfont icon-sd"></i>
-        <span>AI-SD绘画</span>
+        <span>SD 绘画</span>
       </el-button>
       <el-button @click="router.push('/xmind')" color="#FFFD55" style="color:#424282" :dark="false">
         <i class="iconfont icon-xmind"></i>
diff --git a/web/src/views/mobile/ChatExport.vue b/web/src/views/mobile/ChatExport.vue
index 507c476c..a3059d7c 100644
--- a/web/src/views/mobile/ChatExport.vue
+++ b/web/src/views/mobile/ChatExport.vue
@@ -1,18 +1,16 @@
 <template>
   <div class="chat-export-mobile">
     <div class="chat-box">
-      <van-sticky :offset-top="0" position="top">
-        <van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
-          <template #title>
-            <van-dropdown-menu>
-              <van-dropdown-item :title="title">
-                <van-cell center title="角色"> {{ role }}</van-cell>
-                <van-cell center title="模型">{{ model }}</van-cell>
-              </van-dropdown-item>
-            </van-dropdown-menu>
-          </template>
-        </van-nav-bar>
-      </van-sticky>
+      <van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
+        <template #title>
+          <van-dropdown-menu>
+            <van-dropdown-item :title="title">
+              <van-cell center title="角色"> {{ role }}</van-cell>
+              <van-cell center title="模型">{{ model }}</van-cell>
+            </van-dropdown-item>
+          </van-dropdown-menu>
+        </template>
+      </van-nav-bar>
 
       <div class="chat-list-wrapper">
         <div id="message-list-box" class="message-list-box">
@@ -53,13 +51,14 @@ import {useRouter} from "vue-router";
 import {httpGet} from "@/utils/http";
 import 'highlight.js/styles/a11y-dark.css'
 import hl from "highlight.js";
+import {showFailToast} from "vant";
 
 const chatData = ref([])
 const router = useRouter()
 const chatId = router.currentRoute.value.query['chat_id']
-const title = router.currentRoute.value.query['title']
-const role = router.currentRoute.value.query['role']
-const model = router.currentRoute.value.query['model']
+const title = ref('')
+const role = ref('')
+const model = ref('')
 const finished = ref(false)
 const error = ref(false)
 
@@ -117,28 +116,42 @@ const onLoad = () => {
     error.value = true
   })
 
+  httpGet(`/api/chat/detail?chat_id=${chatId}`).then(res => {
+    title.value = res.data.title
+    model.value = res.data.model
+    role.value = res.data.role_name
+  }).catch(e => {
+    showFailToast('加载对话失败：' + e.message)
+  })
+
 };
 
 </script>
 <style lang="stylus">
 .chat-export-mobile {
-  background #F5F5F5;
   height 100vh
 
+  .van-nav-bar {
+    position static
+  }
+
   .chat-box {
     font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+    background #F5F5F5;
 
-    .message-list-box {
-      background #F5F5F5;
-      padding-top 50px
-      padding-bottom: 10px
+    .chat-list-wrapper {
+      padding 10px 0 10px 0
 
-      .van-cell {
-        background none
+      .message-list-box {
+        background #F5F5F5;
+        padding-bottom: 10px
+
+        .van-cell {
+          background none
+        }
       }
     }
 
-
     .van-nav-bar__title {
       .van-dropdown-menu__title {
         margin-right 10px
diff --git a/web/src/views/mobile/ChatList.vue b/web/src/views/mobile/ChatList.vue
index 61ca3a4d..e2ac214e 100644
--- a/web/src/views/mobile/ChatList.vue
+++ b/web/src/views/mobile/ChatList.vue
@@ -82,7 +82,6 @@ import {httpGet, httpPost} from "@/utils/http";
 import {showConfirmDialog, showFailToast, showSuccessToast} from "vant";
 import {checkSession} from "@/action/session";
 import {router} from "@/router";
-import {setChatConfig} from "@/store/chat";
 import {removeArrayItem} from "@/utils/libs";
 
 const title = ref("会话列表")
@@ -153,15 +152,6 @@ const onLoad = () => {
   })
 };
 
-const getModelValue = (model_id) => {
-  for (let i = 0; i < models.value.length; i++) {
-    if (models.value[i].value === model_id) {
-      return models.value[i].text
-    }
-  }
-  return ""
-}
-
 const search = () => {
   if (chatName.value === '') {
     chats.value = allChats.value
@@ -195,42 +185,45 @@ const clearAllChatHistory = () => {
 const newChat = (item) => {
   showPicker.value = false
   const options = item.selectedOptions
-  setChatConfig({
-    role: {
-      id: options[0].value,
-      name: options[0].text,
-      icon: options[0].icon,
-      helloMsg: options[0].helloMsg
-    },
-    model: options[1].value,
-    modelValue: getModelValue(options[1].value),
-    title: '新建会话',
-    chatId: 0
+  // setChatConfig({
+  //   role: {
+  //     id: options[0].value,
+  //     name: options[0].text,
+  //     icon: options[0].icon,
+  //     helloMsg: options[0].helloMsg
+  //   },
+  //   model: options[1].value,
+  //   modelValue: getModelValue(options[1].value),
+  //   title: '新建会话',
+  //   chatId: 0
+  // })
+  router.push({
+    name: "mobile-chat-session",
+    params: {role_id: options[0].value, model_id: options[1].value, title: '新建会话', chat_id: 0}
   })
-  router.push('/mobile/chat/session')
 }
 
 const changeChat = (chat) => {
-  let role = {}
-  for (let i = 0; i < roles.value.length; i++) {
-    if (roles.value[i].value === chat.role_id) {
-      role = roles.value[i]
-      break
-    }
-  }
-  setChatConfig({
-    role: {
-      id: chat.role_id,
-      name: role.text,
-      icon: role.icon
-    },
-    model: chat.model_id,
-    modelValue: getModelValue(chat.model_id),
-    title: chat.title,
-    chatId: chat.chat_id,
-    helloMsg: chat.hello_msg,
-  })
-  router.push('/mobile/chat/session')
+  // let role = {}
+  // for (let i = 0; i < roles.value.length; i++) {
+  //   if (roles.value[i].value === chat.role_id) {
+  //     role = roles.value[i]
+  //     break
+  //   }
+  // }
+  // setChatConfig({
+  //   role: {
+  //     id: chat.role_id,
+  //     name: role.text,
+  //     icon: role.icon
+  //   },
+  //   model: chat.model_id,
+  //   modelValue: getModelValue(chat.model_id),
+  //   title: chat.title,
+  //   chatId: chat.chat_id,
+  //   helloMsg: chat.hello_msg,
+  // })
+  router.push(`/mobile/chat/session?chat_id=${chat.chat_id}`)
 }
 
 const editChat = (row) => {
diff --git a/web/src/views/mobile/ChatSession.vue b/web/src/views/mobile/ChatSession.vue
index e79cdd0d..0c78e6df 100644
--- a/web/src/views/mobile/ChatSession.vue
+++ b/web/src/views/mobile/ChatSession.vue
@@ -1,23 +1,21 @@
 <template>
   <div class="app-background">
     <div class="mobile-chat" v-loading="loading" element-loading-text="正在连接会话...">
-      <van-sticky ref="navBarRef" :offset-top="0" position="top">
-        <van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
-          <template #title>
-            <van-dropdown-menu>
-              <van-dropdown-item :title="title">
-                <van-cell center title="角色"> {{ role.name }}</van-cell>
-                <van-cell center title="模型">{{ modelValue }}</van-cell>
-              </van-dropdown-item>
-            </van-dropdown-menu>
-          </template>
+      <van-nav-bar left-arrow left-text="返回" @click-left="router.back()" ref="navBarRef">
+        <template #title>
+          <van-dropdown-menu>
+            <van-dropdown-item :title="title">
+              <van-cell center title="角色"> {{ role.name }}</van-cell>
+              <van-cell center title="模型">{{ modelValue }}</van-cell>
+            </van-dropdown-item>
+          </van-dropdown-menu>
+        </template>
 
-          <template #right>
-            <van-icon name="share-o" @click="showShare = true"/>
-          </template>
+        <template #right>
+          <van-icon name="share-o" @click="showShare = true"/>
+        </template>
 
-        </van-nav-bar>
-      </van-sticky>
+      </van-nav-bar>
 
       <van-share-sheet
           v-model:show="showShare"
@@ -38,23 +36,19 @@
               <chat-prompt
                   v-if="item.type==='prompt'"
                   :content="item.content"
-                  :created-at="dateFormat(item['created_at'])"
-                  :icon="item.icon"
-                  :model="model"
-                  :tokens="item['tokens']"/>
+                  :icon="item.icon"/>
               <chat-reply v-else-if="item.type==='reply'"
                           :content="item.content"
-                          :created-at="dateFormat(item['created_at'])"
                           :icon="item.icon"
-                          :org-content="item.orgContent"
-                          :tokens="item['tokens']"/>
+                          :org-content="item.orgContent"/>
             </van-cell>
           </van-list>
         </div>
       </div>
+
+
       <div class="chat-box-wrapper">
         <van-sticky ref="bottomBarRef" :offset-bottom="0" position="bottom">
-
           <van-cell-group inset>
             <van-field
                 v-model="prompt"
@@ -62,13 +56,13 @@
                 clearable
                 placeholder="输入你的问题"
             >
-              <template #left-icon>
-                <van-button round type="success" class="button-voice" @click="inputVoice">
-                  <el-icon>
-                    <Microphone/>
-                  </el-icon>
-                </van-button>
-              </template>
+              <!--              <template #left-icon>-->
+              <!--                <van-button round type="success" class="button-voice" @click="inputVoice">-->
+              <!--                  <el-icon>-->
+              <!--                    <Microphone/>-->
+              <!--                  </el-icon>-->
+              <!--                </van-button>-->
+              <!--              </template>-->
 
               <template #button>
                 <van-button size="small" type="primary" @click="sendMessage">发送</van-button>
@@ -87,18 +81,18 @@
 
     <button id="copy-link-btn" style="display: none;" :data-clipboard-text="url">复制链接地址</button>
 
-    <van-overlay :show="showMic" z-index="100">
-      <div class="mic-wrapper">
-        <div class="image">
-          <van-image
-              width="100"
-              height="100"
-              src="/images/mic.gif"
-          />
-        </div>
-        <van-button type="success" @click="stopVoice">说完了</van-button>
-      </div>
-    </van-overlay>
+    <!--    <van-overlay :show="showMic" z-index="100">-->
+    <!--      <div class="mic-wrapper">-->
+    <!--        <div class="image">-->
+    <!--          <van-image-->
+    <!--              width="100"-->
+    <!--              height="100"-->
+    <!--              src="/images/mic.gif"-->
+    <!--          />-->
+    <!--        </div>-->
+    <!--        <van-button type="success" @click="stopVoice">说完了</van-button>-->
+    <!--      </div>-->
+    <!--    </van-overlay>-->
   </div>
 </template>
 
@@ -106,8 +100,7 @@
 import {nextTick, onMounted, onUnmounted, ref} from "vue";
 import {showImagePreview, showNotify, showToast} from "vant";
 import {onBeforeRouteLeave, useRouter} from "vue-router";
-import {dateFormat, processContent, randString, renderInputText, UUID} from "@/utils/libs";
-import {getChatConfig} from "@/store/chat";
+import {processContent, randString, renderInputText, UUID} from "@/utils/libs";
 import {httpGet} from "@/utils/http";
 import hl from "highlight.js";
 import 'highlight.js/styles/a11y-dark.css'
@@ -116,26 +109,66 @@ import ChatReply from "@/components/mobile/ChatReply.vue";
 import {getSessionId, getUserToken} from "@/store/session";
 import {checkSession} from "@/action/session";
 import Clipboard from "clipboard";
-import {Microphone} from "@element-plus/icons-vue";
 
 const winHeight = ref(0)
 const navBarRef = ref(null)
 const bottomBarRef = ref(null)
 const router = useRouter()
 
-const chatConfig = getChatConfig()
-const role = chatConfig.role
-const model = chatConfig.model
-const modelValue = chatConfig.modelValue
-const title = chatConfig.title
-const chatId = chatConfig.chatId
+const roles = ref([])
+const roleId = ref(parseInt(router.currentRoute.value.query["role_id"]))
+const role = ref({})
+const models = ref([])
+const modelId = ref(parseInt(router.currentRoute.value.query["model_id"]))
+const modelValue = ref("")
+const title = ref(router.currentRoute.value.query["title"])
+const chatId = ref(router.currentRoute.value.query["chat_id"])
 const loginUser = ref(null)
-const showMic = ref(false)
+// const showMic = ref(false)
 
-const url = location.protocol + '//' + location.host + '/mobile/chat/export?chat_id=' + chatId
+checkSession().then(user => {
+  loginUser.value = user
+}).catch(() => {
+  router.push('/login')
+})
+
+if (chatId.value) {
+  httpGet(`/api/chat/detail?chat_id=${chatId.value}`).then(res => {
+    title.value = res.data.title
+    modelId.value = res.data.model_id
+    roleId.value = res.data.role_id
+  }).catch(() => {
+  })
+} else {
+  title.value = "新建对话"
+}
+
+// 加载模型
+httpGet('/api/model/list').then(res => {
+  models.value = res.data
+  if (!modelId.value) {
+    modelId.value = models.value[0].id
+  }
+  modelValue.value = getModelValue(modelId.value)
+  // 加载角色列表
+  httpGet(`/api/role/list`).then((res) => {
+    roles.value = res.data;
+    if (!roleId.value) {
+      roleId.value = roles.value[0]['id']
+    }
+    role.value = getRoleById(roleId.value)
+    connect(chatId.value, roleId.value, modelId.value)
+  }).catch((e) => {
+    showNotify({type: "danger", message: '获取聊天角色失败: ' + e.messages})
+  })
+}).catch(e => {
+  showNotify({type: "danger", message: "加载模型失败: " + e.message})
+})
+
+const url = ref(location.protocol + '//' + location.host + '/mobile/chat/export?chat_id=' + chatId.value)
 
 onMounted(() => {
-  winHeight.value = document.body.offsetHeight - navBarRef.value.$el.offsetHeight - bottomBarRef.value.$el.offsetHeight
+  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) => {
@@ -156,12 +189,6 @@ const loading = ref(false)
 const finished = ref(false)
 const error = ref(false)
 
-checkSession().then(user => {
-  loginUser.value = user
-}).catch(() => {
-  router.push('/login')
-})
-
 const latexPlugin = require('markdown-it-latex2img')
 const mathjaxPlugin = require('markdown-it-mathjax')
 const md = require('markdown-it')({
@@ -193,39 +220,38 @@ md.use(mathjaxPlugin)
 
 
 const onLoad = () => {
-  httpGet('/api/chat/history?chat_id=' + chatId).then(res => {
-    // 加载状态结束
-    finished.value = true;
-    const data = res.data
-    if (data && data.length > 0) {
-      for (let i = 0; i < data.length; i++) {
-        if (data[i].type === "prompt") {
+  if (chatId.value) {
+    httpGet('/api/chat/history?chat_id=' + chatId.value).then(res => {
+      // 加载状态结束
+      finished.value = true;
+      const data = res.data
+      if (data && data.length > 0) {
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].type === "prompt") {
+            chatData.value.push(data[i]);
+            continue;
+          }
+
+          data[i].orgContent = data[i].content;
+          data[i].content = md.render(processContent(data[i].content))
           chatData.value.push(data[i]);
-          continue;
         }
 
-        data[i].orgContent = data[i].content;
-        data[i].content = md.render(processContent(data[i].content))
-        chatData.value.push(data[i]);
-      }
+        nextTick(() => {
+          hl.configure({ignoreUnescapedHTML: true})
+          const blocks = document.querySelector("#message-list-box").querySelectorAll('pre code');
+          blocks.forEach((block) => {
+            hl.highlightElement(block)
+          })
 
-      nextTick(() => {
-        hl.configure({ignoreUnescapedHTML: true})
-        const blocks = document.querySelector("#message-list-box").querySelectorAll('pre code');
-        blocks.forEach((block) => {
-          hl.highlightElement(block)
+          scrollListBox()
         })
-
-        scrollListBox()
-      })
-    }
-
-    // 连接会话
-    connect(chatId, role.id);
-  }).catch(() => {
-    error.value = true
-  })
-
+      }
+      connect(chatId.value, roleId.value, modelId.value);
+    }).catch(() => {
+      error.value = true
+    })
+  }
 };
 
 // 离开页面时主动关闭 websocket 连接，节省网络资源
@@ -248,7 +274,7 @@ const socket = ref(null);
 const activelyClose = ref(false); // 主动关闭
 const canSend = ref(true);
 const heartbeatHandle = ref(null)
-const connect = function (chat_id, role_id) {
+const connect = function (chat_id, role_id, model_id) {
   let isNewChat = false;
   if (!chat_id) {
     isNewChat = true;
@@ -278,7 +304,7 @@ const connect = function (chat_id, role_id) {
     }
   }
 
-  const _socket = new WebSocket(host + `/api/chat/new?session_id=${_sessionId}&role_id=${role_id}&chat_id=${chat_id}&model_id=${model}&token=${getUserToken()}`);
+  const _socket = new WebSocket(host + `/api/chat/new?session_id=${_sessionId}&role_id=${role_id}&chat_id=${chat_id}&model_id=${model_id}&token=${getUserToken()}`);
   _socket.addEventListener('open', () => {
     loading.value = false
     previousText.value = '';
@@ -289,9 +315,9 @@ const connect = function (chat_id, role_id) {
       chatData.value.push({
         type: "reply",
         id: randString(32),
-        icon: role.icon,
-        content: role.helloMsg,
-        orgContent: role.helloMsg,
+        icon: role.value.icon,
+        content: role.value.hello_msg,
+        orgContent: role.value.hello_msg,
       })
     }
 
@@ -309,7 +335,7 @@ const connect = function (chat_id, role_id) {
           chatData.value.push({
             type: "reply",
             id: randString(32),
-            icon: role.icon,
+            icon: role.value.icon,
             content: ""
           });
         } else if (data.type === 'end') { // 消息接收完毕
@@ -358,10 +384,10 @@ const connect = function (chat_id, role_id) {
     canSend.value = true;
     // 重连
     checkSession().then(() => {
-      connect(chat_id, role_id)
+      connect(chat_id, role_id, model_id)
     }).catch(() => {
       loading.value = true
-      setTimeout(() => connect(chat_id, role_id), 3000)
+      setTimeout(() => connect(chat_id, role_id, model_id), 3000)
     });
   });
 
@@ -447,38 +473,56 @@ const shareChat = (option) => {
     showToast({message: "当前会话已经导出，请通过浏览器或者微信的自带分享功能分享给好友", duration: 5000})
     router.push({
       path: "/mobile/chat/export",
-      query: {title: title, chat_id: chatId, role: role.name, model: modelValue}
+      query: {title: title, chat_id: chatId, role: role.value.name, model: modelValue}
     })
   } else if (option.icon === "link") {
     document.getElementById('copy-link-btn').click();
   }
 }
 
-// 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 getRoleById = function (rid) {
+  for (let i = 0; i < roles.value.length; i++) {
+    if (roles.value[i]['id'] === rid) {
+      return roles.value[i];
+    }
+  }
+  return null;
 }
 
-const stopVoice = () => {
-  showMic.value = false
-  recognition.stop()
+const getModelValue = (model_id) => {
+  for (let i = 0; i < models.value.length; i++) {
+    if (models.value[i].id === model_id) {
+      return models.value[i].value
+    }
+  }
+  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()
+// }
 </script>
 
 <style lang="stylus">
diff --git a/web/src/views/mobile/Home.vue b/web/src/views/mobile/Home.vue
index f500a301..8be8f3f1 100644
--- a/web/src/views/mobile/Home.vue
+++ b/web/src/views/mobile/Home.vue
@@ -4,9 +4,9 @@
       <router-view/>
 
       <van-tabbar route v-model="active" @change="onChange">
-        <van-tabbar-item to="/mobile/chat" name="home" icon="chat-o">对话</van-tabbar-item>
+        <van-tabbar-item to="/mobile/index" name="home" icon="home-o">首页</van-tabbar-item>
+        <van-tabbar-item to="/mobile/chat" name="chat" icon="chat-o">对话</van-tabbar-item>
         <van-tabbar-item to="/mobile/image" name="image" icon="photo-o">绘图</van-tabbar-item>
-        <van-tabbar-item to="/mobile/img-wall" name="apps" icon="apps-o">广场</van-tabbar-item>
         <van-tabbar-item to="/mobile/profile" name="profile" icon="user-o">我的</van-tabbar-item>
       </van-tabbar>
 
@@ -20,16 +20,11 @@ import {ref} from "vue";
 import {getMobileTheme} from "@/store/system";
 import {useRouter} from "vue-router";
 import {isMobile} from "@/utils/libs";
-import {checkSession} from "@/action/session";
 
 const router = useRouter()
-checkSession().then(() => {
-  if (!isMobile()) {
-    router.replace('/chat')
-  }
-}).catch(() => {
-  router.push('/login')
-})
+if (!isMobile()) {
+  router.replace('/')
+}
 
 const active = ref('home')
 const onChange = (index) => {
@@ -47,9 +42,7 @@ const onChange = (index) => {
       width 100%
     }
 
-    .content {
-      padding 46px 10px 60px 10px
-    }
+    padding 0 10px
   }
 
 }
diff --git a/web/src/views/mobile/Image.vue b/web/src/views/mobile/Image.vue
index 2e4be3a6..74e69a02 100644
--- a/web/src/views/mobile/Image.vue
+++ b/web/src/views/mobile/Image.vue
@@ -16,8 +16,8 @@
 
 <script setup>
 import {ref} from "vue";
-import ImageMj from "@/views/mobile/ImageMj.vue";
-import ImageSd from "@/views/mobile/ImageSd.vue";
+import ImageMj from "@/views/mobile/pages/ImageMj.vue";
+import ImageSd from "@/views/mobile/pages/ImageSd.vue";
 
 const activeName = ref("mj")
 </script>
diff --git a/web/src/views/mobile/Index.vue b/web/src/views/mobile/Index.vue
new file mode 100644
index 00000000..a3e0e78c
--- /dev/null
+++ b/web/src/views/mobile/Index.vue
@@ -0,0 +1,234 @@
+<template>
+  <div class="index container">
+    <h2 class="title">{{title}}</h2>
+    <van-notice-bar  left-icon="info-o" :scrollable="true">
+      你有多少想象力，AI就有多大创造力。我辈之人，先干为敬，陪您先把 AI 用起来。
+    </van-notice-bar>
+
+    <div class="content">
+      <van-grid :column-num="3" :gutter="10" border>
+        <van-grid-item @click="router.push('chat')">
+          <template #icon>
+            <i class="iconfont icon-chat"></i>
+          </template>
+          <template #text>
+            <div class="text">AI 对话</div>
+
+          </template>
+        </van-grid-item>
+
+        <van-grid-item @click="router.push('image')">
+          <template #icon>
+            <i class="iconfont icon-mj"></i>
+          </template>
+          <template #text>
+            <div class="text">AI 绘画</div>
+          </template>
+        </van-grid-item>
+
+        <van-grid-item @click="router.push('imgWall')">
+          <template #icon>
+            <van-icon name="photo-o" />
+          </template>
+          <template #text>
+            <div class="text">AI 画廊</div>
+          </template>
+        </van-grid-item>
+      </van-grid>
+
+      <div class="app-list">
+        <van-list
+            v-model:loading="loading"
+            :finished="true"
+            finished-text=""
+            @load="fetchApps"
+        >
+          <van-cell v-for="item in apps" :key="item.id">
+            <div>
+              <div class="item">
+                <div class="image">
+                  <van-image :src="item.icon" />
+                </div>
+                <div class="info">
+                  <div class="info-title">{{item.name}}{{item.name}}{{item.name}}{{item.name}}</div>
+                  <div class="info-text">{{item.hello_msg}}</div>
+                </div>
+              </div>
+
+              <div class="btn">
+                <div v-if="hasRole(item.key)">
+                  <van-button size="small" type="success" @click="useRole(item.id)">使用</van-button>
+                  <van-button size="small" type="danger" @click="updateRole(item,'remove')">移除</van-button>
+                </div>
+                <van-button v-else size="small"
+                           style="--el-color-primary:#009999"
+                           @click="updateRole(item, 'add')">
+                  <van-icon name="add-o" />
+                  <span>添加应用</span>
+                </van-button>
+              </div>
+            </div>
+          </van-cell>
+        </van-list>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue";
+import {useRouter} from "vue-router";
+import {checkSession} from "@/action/session";
+import {httpGet, httpPost} from "@/utils/http";
+import {arrayContains, removeArrayItem, showLoginDialog, substr} from "@/utils/libs";
+import {showNotify} from "vant";
+import {ElMessage} from "element-plus";
+
+const title = ref(process.env.VUE_APP_TITLE)
+const router = useRouter()
+const isLogin = ref(false)
+const apps = ref([])
+const loading = ref(false)
+const roles = ref([])
+
+onMounted(() => {
+  checkSession().then((user) => {
+    isLogin.value = true
+    roles.value = user.chat_roles
+  })
+  fetchApps()
+})
+
+const fetchApps = () => {
+  httpGet("/api/role/list?all=true").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)
+    }
+    apps.value = items
+  }).catch(e => {
+    showNotify({type:"danger", message:"获取应用失败：" + e.message})
+  })
+}
+
+const updateRole = (row, opt) => {
+  if (!isLogin.value) {
+    return showLoginDialog(router)
+  }
+
+  const title = ref("")
+  if (opt === "add") {
+    title.value = "添加应用"
+    const exists = arrayContains(roles.value, row.key)
+    if (exists) {
+      return
+    }
+    roles.value.push(row.key)
+  } else {
+    title.value = "移除应用"
+    const exists = arrayContains(roles.value, row.key)
+    if (!exists) {
+      return
+    }
+    roles.value = removeArrayItem(roles.value, row.key)
+  }
+  httpPost("/api/role/update", {keys: roles.value}).then(() => {
+    ElMessage.success({message: title.value + "成功！", duration: 1000})
+  }).catch(e => {
+    ElMessage.error(title.value + "失败：" + e.message)
+  })
+}
+
+const hasRole = (roleKey) => {
+  return arrayContains(roles.value, roleKey, (v1, v2) => v1 === v2)
+}
+
+const useRole = (roleId) => {
+  if (!isLogin.value) {
+    return showLoginDialog(router)
+  }
+  router.push(`/mobile/chat/session?role_id=${roleId}`)
+}
+</script>
+
+<style scoped lang="stylus">
+.index {
+  color var(--van-text-color)
+  .title {
+    display flex
+    justify-content center
+
+  }
+  --van-notice-bar-font-size: 16px
+
+  .content {
+    padding 15px 0 60px 0
+    .van-grid-item {
+      .iconfont {
+        font-size 20px
+      }
+      .text {
+        display flex
+        width 100%
+        padding 10px
+        justify-content center
+        font-size 14px
+      }
+    }
+
+    .app-list {
+      padding-top 10px
+
+      .item {
+        display flex
+        .image {
+          width 80px
+          height 80px
+          min-width 80px
+          border-radius 5px
+          overflow hidden
+        }
+
+        .info {
+          text-align left
+          padding 0 10px
+          .info-title {
+            color var(--van-text-color)
+            font-size 1.25rem
+            line-height 1.75rem
+            letter-spacing: .025em;
+            font-weight: 600;
+            word-break: break-all;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+          }
+
+          .info-text {
+            padding 5px 0
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            word-break: break-all;
+            font-size: .875rem;
+          }
+        }
+      }
+
+      .btn {
+        padding 5px 0
+        .van-button {
+          margin-right 10px
+
+          .van-icon {
+            margin-right 5px
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/web/src/views/mobile/Profile.vue b/web/src/views/mobile/Profile.vue
index 3a22a2aa..8d363560 100644
--- a/web/src/views/mobile/Profile.vue
+++ b/web/src/views/mobile/Profile.vue
@@ -27,7 +27,7 @@
             </template>
           </van-field>
 
-          <van-field label="VIP到期时间" v-if="form.expired_time > 0">
+          <van-field label="会员有效期" v-if="form.expired_time > 0">
             <template #input>
               <van-tag type="warning">{{ dateFormat(form.expired_time) }}</van-tag>
             </template>
@@ -260,6 +260,9 @@ const pay = (payWay, item) => {
 <style lang="stylus">
 .mobile-user-profile {
   .content {
+    padding-top 46px
+    padding-bottom 60px
+
     .van-field__label {
       width 100px
       text-align right
diff --git a/web/src/views/mobile/ImageMj.vue b/web/src/views/mobile/pages/ImageMj.vue
similarity index 100%
rename from web/src/views/mobile/ImageMj.vue
rename to web/src/views/mobile/pages/ImageMj.vue
diff --git a/web/src/views/mobile/ImageSd.vue b/web/src/views/mobile/pages/ImageSd.vue
similarity index 100%
rename from web/src/views/mobile/ImageSd.vue
rename to web/src/views/mobile/pages/ImageSd.vue
diff --git a/web/src/views/mobile/ImgWall.vue b/web/src/views/mobile/pages/ImgWall.vue
similarity index 90%
rename from web/src/views/mobile/ImgWall.vue
rename to web/src/views/mobile/pages/ImgWall.vue
index 8d33a9dd..5e8121f1 100644
--- a/web/src/views/mobile/ImgWall.vue
+++ b/web/src/views/mobile/pages/ImgWall.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="img-wall container">
-    <van-nav-bar :title="title"/>
-
     <div class="content">
-      <van-tabs v-model:active="activeName">
+      <van-tabs v-model:active="activeName" animated sticky>
         <van-tab title="MidJourney" name="mj">
           <van-list
               v-model:error="data['mj'].error"
@@ -42,12 +40,10 @@
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
-import {httpGet, httpPost} from "@/utils/http";
-import {showDialog, showFailToast, showSuccessToast} from "vant";
-import {ElMessage} from "element-plus";
+import {ref} from "vue";
+import {httpGet} from "@/utils/http";
+import {showDialog, showFailToast} from "vant";
 
-const title = ref('图片创作广场')
 const activeName = ref("mj")
 const data = ref({
   "mj": {
@@ -121,8 +117,6 @@ const showPrompt = (item) => {
 <style lang="stylus">
 .img-wall {
   .content {
-    padding-top 60px
-
     .van-cell__value {
       .van-image {
         width 100%