From 51a8f42d89a1e03f054b1b8ed73979a6070a9b5e Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Mon, 29 Apr 2024 19:22:00 +0800
Subject: [PATCH] feat: mobile page refactor is finished

---
 api/service/dalle/service.go            |   4 +-
 web/src/assets/css/mobile/image-mj.styl |   4 +
 web/src/assets/css/mobile/image-sd.styl |   2 +-
 web/src/components/ResetPass.vue        |  22 ++--
 web/src/utils/libs.js                   |   3 +-
 web/src/views/Login.vue                 |  14 ++-
 web/src/views/mobile/ChatList.vue       |  66 +++++++++---
 web/src/views/mobile/Index.vue          |   2 +-
 web/src/views/mobile/Profile.vue        | 128 +++++++++++++++---------
 web/src/views/mobile/pages/ImageMj.vue  |  12 ++-
 web/src/views/mobile/pages/ImageSd.vue  |  11 +-
 11 files changed, 181 insertions(+), 87 deletions(-)

diff --git a/api/service/dalle/service.go b/api/service/dalle/service.go
index f3929e84..76d7e72e 100644
--- a/api/service/dalle/service.go
+++ b/api/service/dalle/service.go
@@ -263,7 +263,7 @@ func (s *Service) CheckTaskStatus() {
 	go func() {
 		logger.Info("Running Stable-Diffusion task status checking ...")
 		for {
-			var jobs []model.SdJob
+			var jobs []model.DallJob
 			res := s.db.Where("progress < ?", 100).Find(&jobs)
 			if res.Error != nil {
 				time.Sleep(5 * time.Second)
@@ -287,7 +287,7 @@ func (s *Service) CheckTaskStatus() {
 							Balance:   user.Power + job.Power,
 							Mark:      types.PowerAdd,
 							Model:     "dall-e-3",
-							Remark:    fmt.Sprintf("任务失败，退回算力。任务ID：%s", job.TaskId),
+							Remark: fmt.Sprintf("任务失败，退回算力。任务ID：%d", job.Id),
 							CreatedAt: time.Now(),
 						})
 					}
diff --git a/web/src/assets/css/mobile/image-mj.styl b/web/src/assets/css/mobile/image-mj.styl
index 76022f0f..694d0f0f 100644
--- a/web/src/assets/css/mobile/image-mj.styl
+++ b/web/src/assets/css/mobile/image-mj.styl
@@ -74,6 +74,10 @@
   }
 
 
+  .pt-6 {
+    padding 15px 10px
+  }
+
   .tip-text {
     padding 10px
     line-height 1.5
diff --git a/web/src/assets/css/mobile/image-sd.styl b/web/src/assets/css/mobile/image-sd.styl
index d5c1a1b8..60d5fcc1 100644
--- a/web/src/assets/css/mobile/image-sd.styl
+++ b/web/src/assets/css/mobile/image-sd.styl
@@ -81,7 +81,7 @@
 
 
   .pt-6 {
-    padding 10px
+    padding 15px 10px
   }
 
   .tip-text {
diff --git a/web/src/components/ResetPass.vue b/web/src/components/ResetPass.vue
index c5e8fcd8..992bb025 100644
--- a/web/src/components/ResetPass.vue
+++ b/web/src/components/ResetPass.vue
@@ -9,17 +9,21 @@
     >
       <div class="form">
 
-        <el-form :model="form" label-width="120px" label-position="left">
+        <el-form :model="form" label-width="80px" label-position="left">
           <el-form-item label="用户名">
             <el-input v-model="form.username" placeholder="手机号/邮箱地址"/>
           </el-form-item>
           <el-form-item label="验证码">
+            <div class="code-box">
+              <el-input v-model="form.code" maxlength="6"/>
+              <send-msg size="" :receiver="form.username" style="margin-left: 10px; min-width: 100px"/>
+            </div>
             <el-row :gutter="20">
-              <el-col :span="16">
-                <el-input v-model="form.code" maxlength="6"/>
+              <el-col :span="12">
+
               </el-col>
-              <el-col :span="8">
-                <send-msg size="" :receiver="form.username"/>
+              <el-col :span="12" style="justify-content: right">
+
               </el-col>
             </el-row>
           </el-form-item>
@@ -97,9 +101,13 @@ const close = function () {
 <style lang="stylus">
 .reset-pass {
   .form {
-    padding 10px 40px
+    padding 10px 20px
+  }
+  .code-box {
+    display: flex;
+    justify-content: space-between;
+    width: 100%
   }
-
   .el-dialog__footer {
     text-align center
   }
diff --git a/web/src/utils/libs.js b/web/src/utils/libs.js
index 0a989f1a..49817593 100644
--- a/web/src/utils/libs.js
+++ b/web/src/utils/libs.js
@@ -2,7 +2,6 @@
  * Util lib functions
  */
 import {showConfirmDialog} from "vant";
-import {useRouter} from "vue-router";
 
 // generate a random string
 export function randString(length) {
@@ -231,7 +230,7 @@ export function showLoginDialog(router) {
     showConfirmDialog({
         title: '登录',
         message:
-            '当前操作需要登录才能进行，前往登录？',
+            '此操作需要登录才能进行，前往登录？',
     }).then(() => {
         router.push("/login")
     }).catch(() => {
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 0fcf0ccc..ddffa5bf 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -34,9 +34,10 @@
             <el-button class="login-btn" size="large" type="primary" @click="login">登录</el-button>
           </el-row>
 
-          <el-row class="text-line" :gutter="20">
-            <el-button type="primary" @click="router.push('/register')" size="small" plain>注册新账号</el-button>
-            <el-button type="success" @click="showResetPass = true" size="small" plain>重置密码</el-button>
+          <el-row class="opt" :gutter="20">
+            <el-col :span="8"><el-link type="primary" @click="router.push('/register')">注册</el-link></el-col>
+            <el-col :span="8"><el-link @click="showResetPass = true">重置密码</el-link></el-col>
+            <el-col :span="8"><el-link @click="router.push('/')">首页</el-link></el-col>
           </el-row>
         </div>
       </div>
@@ -196,6 +197,13 @@ const login = function () {
         padding-top 10px;
         font-size 14px;
       }
+
+      .opt {
+        padding 15px
+        .el-col {
+          text-align center
+        }
+      }
     }
   }
 
diff --git a/web/src/views/mobile/ChatList.vue b/web/src/views/mobile/ChatList.vue
index e2ac214e..f31d0c27 100644
--- a/web/src/views/mobile/ChatList.vue
+++ b/web/src/views/mobile/ChatList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-background">
-    <div v-if="isLogin" class="container mobile-chat-list">
+    <div class="container mobile-chat-list">
       <van-nav-bar
           :title="title"
           left-text="新建会话"
@@ -82,7 +82,7 @@ import {httpGet, httpPost} from "@/utils/http";
 import {showConfirmDialog, showFailToast, showSuccessToast} from "vant";
 import {checkSession} from "@/action/session";
 import {router} from "@/router";
-import {removeArrayItem} from "@/utils/libs";
+import {removeArrayItem, showLoginDialog} from "@/utils/libs";
 
 const title = ref("会话列表")
 const chatName = ref("")
@@ -135,20 +135,53 @@ checkSession().then((user) => {
   })
 
 }).catch(() => {
-  router.push("/login")
+  loading.value = false
+  finished.value = true
+
+  // 加载角色列表
+  httpGet('/api/role/list').then((res) => {
+    if (res.data) {
+      const items = res.data
+      for (let i = 0; i < items.length; i++) {
+        // console.log(items[i])
+        roles.value.push({
+          text: items[i].name,
+          value: items[i].id,
+          icon: items[i].icon,
+          helloMsg: items[i].hello_msg
+        })
+      }
+    }
+  }).catch(() => {
+    showFailToast("加载聊天角色失败")
+  })
+
+  // 加载模型
+  httpGet('/api/model/list').then(res => {
+    if (res.data) {
+      const items = res.data
+      for (let i = 0; i < items.length; i++) {
+        models.value.push({text: items[i].name, value: items[i].id})
+      }
+    }
+  }).catch(e => {
+    showFailToast("加载模型失败: " + e.message)
+  })
 })
 
 const onLoad = () => {
-  httpGet("/api/chat/list?user_id=" + loginUser.value.id).then((res) => {
-    if (res.data) {
-      chats.value = res.data;
-      allChats.value = res.data;
-      finished.value = true
-    }
-    loading.value = false;
-  }).catch(() => {
-    error.value = true
-    showFailToast("加载会话列表失败")
+  checkSession().then(() => {
+    httpGet("/api/chat/list?user_id=" + loginUser.value.id).then((res) => {
+      if (res.data) {
+        chats.value = res.data;
+        allChats.value = res.data;
+        finished.value = true
+      }
+      loading.value = false;
+    }).catch(() => {
+      error.value = true
+      showFailToast("加载会话列表失败")
+    })
   })
 };
 
@@ -167,6 +200,10 @@ const search = () => {
 }
 
 const clearAllChatHistory = () => {
+  if (!isLogin.value) {
+    return showLoginDialog(router)
+  }
+
   showConfirmDialog({
     title: '操作提示',
     message: '确定要删除所有的会话记录吗？'
@@ -183,6 +220,9 @@ const clearAllChatHistory = () => {
 }
 
 const newChat = (item) => {
+  if (!isLogin.value) {
+    return showLoginDialog(router)
+  }
   showPicker.value = false
   const options = item.selectedOptions
   // setChatConfig({
diff --git a/web/src/views/mobile/Index.vue b/web/src/views/mobile/Index.vue
index a3e0e78c..f40d0130 100644
--- a/web/src/views/mobile/Index.vue
+++ b/web/src/views/mobile/Index.vue
@@ -50,7 +50,7 @@
                   <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-title">{{item.name}}</div>
                   <div class="info-text">{{item.hello_msg}}</div>
                 </div>
               </div>
diff --git a/web/src/views/mobile/Profile.vue b/web/src/views/mobile/Profile.vue
index 8d363560..d7ab3835 100644
--- a/web/src/views/mobile/Profile.vue
+++ b/web/src/views/mobile/Profile.vue
@@ -1,33 +1,34 @@
 <template>
   <div class="mobile-user-profile container">
-    <van-nav-bar :title="title"/>
-
     <div class="content">
       <van-form>
+        <div class="avatar">
+          <van-uploader v-model="fileList"
+                        reupload max-count="1"
+                        :deletable="false"
+                        :after-read="afterRead"/>
+        </div>
         <van-cell-group inset v-model="form">
           <van-field
               v-model="form.username"
-              name="账号"
               label="账号"
               readonly
               disabled
           />
-          <van-field label="头像">
-            <template #input>
-              <van-uploader v-model="fileList"
-                            reupload max-count="1"
-                            :deletable="false"
-                            :after-read="afterRead"/>
-            </template>
-          </van-field>
+          <van-field
+              v-model="form.nickname"
+              label="昵称"
+              readonly
+              disabled
+          />
 
-          <van-field label="剩余算力">
+          <van-field label="算力">
             <template #input>
               <van-tag type="primary">{{ form.power }}</van-tag>
             </template>
           </van-field>
 
-          <van-field label="会员有效期" 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>
@@ -36,8 +37,15 @@
         </van-cell-group>
       </van-form>
 
-      <div class="modify-pass">
-        <van-button round block type="primary" @click="showPasswordDialog = true">修改密码</van-button>
+      <div class="opt" v-if="isLogin">
+        <van-row :gutter="10">
+          <van-col :span="12">
+            <van-button round block type="primary" @click="showPasswordDialog = true">修改密码</van-button>
+          </van-col>
+          <van-col :span="12">
+            <van-button round block @click="logout">退出登录</van-button>
+          </van-col>
+        </van-row>
       </div>
 
       <div class="product-list">
@@ -114,23 +122,22 @@ import {onMounted, ref} from "vue";
 import {showFailToast, showNotify, showSuccessToast} from "vant";
 import {httpGet, httpPost} from "@/utils/http";
 import Compressor from 'compressorjs';
-import {dateFormat} from "@/utils/libs";
+import {dateFormat, showLoginDialog} from "@/utils/libs";
 import {ElMessage} from "element-plus";
 import {checkSession} from "@/action/session";
 import {useRouter} from "vue-router";
+import {removeUserToken} from "@/store/session";
 
-const title = ref('用户设置')
 const form = ref({
-  username: '',
-  nickname: '',
-  mobile: '',
+  username: 'GeekMaster',
+  nickname: '极客学长@001',
+  mobile: '1300000000',
   avatar: '',
-  calls: 0,
-  tokens: 0
+  power: 0,
 })
 const fileList = ref([
   {
-    url: '',
+    url: '/images/user-info.png',
     message: '上传中...',
   }
 ]);
@@ -139,11 +146,13 @@ const products = ref([])
 const vipMonthPower = ref(0)
 const payWays = ref({})
 const router = useRouter()
-const loginUser = ref(null)
+const userId = ref(0)
+const isLogin = ref(false)
 
 onMounted(() => {
   checkSession().then(user => {
-    loginUser.value = user
+    userId.value = user.id
+    isLogin.value = true
     httpGet('/api/user/profile').then(res => {
       form.value = res.data
       fileList.value[0].url = form.value.avatar
@@ -151,28 +160,27 @@ onMounted(() => {
       console.log(e.message)
       showFailToast('获取用户信息失败')
     });
-
-    // 获取产品列表
-    httpGet("/api/product/list").then((res) => {
-      products.value = res.data
-    }).catch(e => {
-      showFailToast("获取产品套餐失败：" + e.message)
-    })
-
-    httpGet("/api/config/get?key=system").then(res => {
-      vipMonthPower.value = res.data['vip_month_power']
-    }).catch(e => {
-      showFailToast("获取系统配置失败：" + e.message)
-    })
-
-    httpGet("/api/payment/payWays").then(res => {
-      payWays.value = res.data
-    }).catch(e => {
-      ElMessage.error("获取支付方式失败：" + e.message)
-    })
-
   }).catch(() => {
-    router.push("/login")
+
+  })
+
+  // 获取产品列表
+  httpGet("/api/product/list").then((res) => {
+    products.value = res.data
+  }).catch(e => {
+    showFailToast("获取产品套餐失败：" + e.message)
+  })
+
+  httpGet("/api/config/get?key=system").then(res => {
+    vipMonthPower.value = res.data['vip_month_power']
+  }).catch(e => {
+    showFailToast("获取系统配置失败：" + e.message)
+  })
+
+  httpGet("/api/payment/payWays").then(res => {
+    payWays.value = res.data
+  }).catch(e => {
+    ElMessage.error("获取支付方式失败：" + e.message)
   })
 
 })
@@ -244,10 +252,14 @@ const updatePass = () => {
 }
 
 const pay = (payWay, item) => {
+  if (!isLogin.value) {
+    return showLoginDialog(router)
+  }
+
   httpPost("/api/payment/mobile", {
     pay_way: payWay,
     product_id: item.id,
-    user_id: loginUser.value.id
+    user_id: userId.value
   }).then(res => {
     // console.log(res.data)
     location.href = res.data
@@ -255,20 +267,38 @@ const pay = (payWay, item) => {
     showFailToast("生成支付订单失败：" + e.message)
   })
 }
+
+const logout = function () {
+  httpGet('/api/user/logout').then(() => {
+    removeUserToken();
+    router.push('/');
+  }).catch(() => {
+    showFailToast('注销失败！');
+  })
+}
 </script>
 
 <style lang="stylus">
 .mobile-user-profile {
   .content {
-    padding-top 46px
+    padding-top 15px
     padding-bottom 60px
 
+    .avatar {
+      display flex
+      justify-content center
+
+      .van-image {
+        border-radius 50%
+      }
+    }
+
     .van-field__label {
       width 100px
       text-align right
     }
 
-    .modify-pass {
+    .opt {
       padding 10px 15px
     }
 
diff --git a/web/src/views/mobile/pages/ImageMj.vue b/web/src/views/mobile/pages/ImageMj.vue
index bd08e494..fe44d9e2 100644
--- a/web/src/views/mobile/pages/ImageMj.vue
+++ b/web/src/views/mobile/pages/ImageMj.vue
@@ -161,7 +161,7 @@
         </van-collapse>
       </div>
 
-      <div class="text-line">
+      <div class="text-line pt-6">
         <el-tag>绘图消耗{{ mjPower }}算力，U/V 操作消耗{{ mjActionPower }}算力，当前算力：{{ power }}</el-tag>
       </div>
 
@@ -290,6 +290,7 @@ import {getSessionId} from "@/store/session";
 import {checkSession} from "@/action/session";
 import {useRouter} from "vue-router";
 import {Delete} from "@element-plus/icons-vue";
+import {showLoginDialog} from "@/utils/libs";
 
 const activeColspan = ref([""])
 
@@ -335,18 +336,19 @@ const finishedJobs = ref([])
 const socket = ref(null)
 const power = ref(0)
 const activeName = ref("txt2img")
+const isLogin = ref(false)
 
 onMounted(() => {
   checkSession().then(user => {
     power.value = user['power']
     userId.value = user.id
-
+    isLogin.value = true
     fetchRunningJobs()
     fetchFinishJobs(1)
     connect()
 
   }).catch(() => {
-    router.push('/login')
+    // router.push('/login')
   });
 })
 
@@ -564,6 +566,10 @@ const variation = (index, item) => {
 }
 
 const generate = () => {
+  if (!isLogin.value) {
+    return showLoginDialog(router)
+  }
+
   if (params.value.prompt === '' && params.value.task_type === "image") {
     return showFailToast("请输入绘画提示词！")
   }
diff --git a/web/src/views/mobile/pages/ImageSd.vue b/web/src/views/mobile/pages/ImageSd.vue
index b310a0a1..407cb3f1 100644
--- a/web/src/views/mobile/pages/ImageSd.vue
+++ b/web/src/views/mobile/pages/ImageSd.vue
@@ -228,12 +228,12 @@ import {
   showSuccessToast,
   showToast
 } from "vant";
+import {showLoginDialog} from "@/utils/libs";
 
 const listBoxHeight = ref(window.innerHeight - 40)
 const mjBoxHeight = ref(window.innerHeight - 150)
 const showTaskDialog = ref(false)
 const item = ref({})
-const showLoginDialog = ref(false)
 const isLogin = ref(false)
 const activeColspan = ref([""])
 
@@ -429,16 +429,15 @@ const onLoad = () => {
 // 创建绘图任务
 const promptRef = ref(null)
 const generate = () => {
+  if (!isLogin.value) {
+    return showLoginDialog(router)
+  }
+
   if (params.value.prompt === '') {
     promptRef.value.focus()
     return showToast("请输入绘画提示词！")
   }
 
-  if (!isLogin.value) {
-    showLoginDialog.value = true
-    return
-  }
-
   if (params.value.seed === '') {
     params.value.seed = -1
   }