fix: 升级v3

Author: rictt

components.d.ts

@@ -7,17 +7,18 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    copy: typeof import('./src/components/Login-Modal copy/index.vue')['default']
     ElImage: typeof import('element-plus/es')['ElImage']
     GroupModal: typeof import('./src/components/Group-Modal/index.vue')['default']
     Image: typeof import('./src/components/Image.vue')['default']
-    'Image copy': typeof import('./src/components/Image copy.vue')['default']
     Loading: typeof import('./src/components/Loading/index.vue')['default']
     LoginModal: typeof import('./src/components/Login-Modal/index.vue')['default']
     Modal: typeof import('./src/components/Modal/index.vue')['default']
     SettingsModal: typeof import('./src/components/Settings-Modal/index.vue')['default']
     Tag: typeof import('./src/components/Tag.vue')['default']
     Toast: typeof import('./src/components/Toast/index.vue')['default']
     UseModal: typeof import('./src/components/Use-Modal/index.vue')['default']
+    UserModal: typeof import('./src/components/User-Modal/index.vue')['default']
   }
   export interface ComponentCustomProperties {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']

src/DrawPanel.vue

@@ -14,6 +14,7 @@ import { useLimitHook } from '@/hooks/use-limit-hook';
 import { userStorage } from '@/utils/storage';
 import { useUser } from '@/hooks/use-user'
 import GroupModal from '@/components/Group-Modal/index.vue'
+import UserModal from '@/components/User-Modal/index.vue'
 
 
 const { isLogin, showLoginModal, userLogout } = useUser()
@@ -140,7 +141,8 @@ const onUpscale = async (msg: Message) => {
     prompt,
     index,
     msgHash,
-    msgId
+    msgId,
+    flags: msg.flags || 0
   }) as any;
   console.log("newId: ", newId);
   const newMsg: Message = {
@@ -208,6 +210,13 @@ const showGroupModal = () => {
   })
 }
 
+const showUserModal = () => {
+  showModal(UserModal, {
+    closeOnClickModal: true,
+    closeOnPressEscape: true
+  })
+}
+
 onMounted(() => {
   getList({ pageNum: 1, pageSize: data.pageSize }).finally(() => {
     data.initLoading = false
@@ -239,18 +248,23 @@ onMounted(() => {
         class="absolute left-10 right-10 max-sm:left-2 max-sm:right-2 bottom-4 max-sm:bottom-2 flex-row items-center justify-between px-2 py-2 bg-gray-100 border-gray-400 rounded-[4px]">
         <!-- 快捷/帮助区域 -->
         <div class="flex w-full px-2 pb-2 pt-1 text-md select-none flex-wrap">
-          <p class="underline text-orange-400 pr-4 cursor-pointer max-sm:text-sm" @click.stop="helpThink">想一个</p>
-          <p class="underline text-orange-400 pr-4 cursor-pointer max-sm:text-sm" @click.stop="showSettingsModal">设置</p>
-          <!-- <p class="underline text-orange-400 pr-4 cursor-pointer" @click.stop="showSettingsModal">设置风格</p> -->
-          <p class="underline text-orange-400 cursor-pointer max-sm:text-sm" @click.stop="showUseModal">使用说明</p>
-          <p class="underline text-orange-400 pr-4 ml-4 max-sm:text-sm" @click.stop="onlyForMe">
-            <input id="onlyMe" v-model="data.onlyCurrentUser" type="checkbox" class="cursor-pointer">
+          <p class="underline text-orange-400 pr-4 cursor-pointer max-sm:text-sm max-sm:pr-1" @click.stop="helpThink">想一个
+          </p>
+          <p class="underline text-orange-400 pr-4 cursor-pointer max-sm:text-sm max-sm:pr-1"
+            @click.stop="showSettingsModal">设置</p>
+          <p class="underline text-orange-400 cursor-pointer max-sm:text-sm max-sm:pr-1" @click.stop="showUseModal">使用说明
+          </p>
+          <p class="underline text-orange-400 pr-4 ml-4 max-sm:text-sm max-sm:pr-1 max-sm:ml-1" @click.stop="onlyForMe">
+            <input id="onlyMe" v-model="data.onlyCurrentUser" type="checkbox" class="cursor-pointer max-sm:pl-1">
             <label for="onlyMe" class="cursor-pointer">只看自己</label>
           </p>
           <p class="flex-1"></p>
-          <p class="underline text-orange-400 pr-4 cursor-pointer max-sm:text-sm" @click="showGroupModal">交流群</p>
-          <p v-if="!isLogin" class="underline text-orange-400 pr-4 cursor-pointer font-bold max-sm:text-sm" @click.stop="showLoginModal">登录/注册</p>
-          <p v-if="isLogin" class="underline text-orange-400 pr-4 cursor-pointer max-sm:text-sm" @click.stop="userLogout">退出</p>
+          <p class="underline text-orange-400 pr-4 cursor-pointer max-sm:text-sm max-sm:pr-1" @click="showGroupModal">交流群
+          </p>
+          <p v-if="!isLogin" class="underline text-orange-400 pr-4 cursor-pointer font-bold max-sm:text-sm max-sm:pr-1"
+            @click.stop="showLoginModal">我的</p>
+          <p v-if="isLogin" class="underline text-orange-400 pr-4 cursor-pointer max-sm:text-sm max-sm:pr-1"
+            @click.stop="showUserModal">我的</p>
         </div>
         <!-- 输入框 -->
         <div class="w-full bg-white flex items-center">
@@ -263,4 +277,8 @@ onMounted(() => {
       </div>
     </div>
   </div>
-</template>
+</template>
+
+<style>#contentWrap .el-loading-mask {
+  background-color: transparent;
+}</style>

src/Message.vue

@@ -6,8 +6,9 @@ import Image from './components/Image.vue';
 import { useDebounceFn } from '@vueuse/core'
 import { onMounted, ref, computed } from 'vue'
 import Toast from './components/Toast';
+import { useUser } from '@/hooks/use-user'
 
-const itemWidth = ref(0)
+const { isLogin, userInfo } = useUser()
 const imageRef = ref<any>()
 const props = defineProps({
   message: {
@@ -71,7 +72,10 @@ const getMessageStatus = (status: number) => {
       <Image v-if="message.uri" ref="imageRef" loadText="排队生成中" :url="message.uri" />
 
       <!-- upscale area 升级区域 -->
-      <div v-if="message?.status == MessageStatus.DONE && !message.index">
+      <div v-if="!isLogin && message?.status == MessageStatus.DONE && !message.index">
+        <p class=" text-gray-400 text-sm leading-6">请登录进行Upscale升级</p>
+      </div>
+      <div v-else-if="isLogin && userInfo.username === message?.creator && message?.status == MessageStatus.DONE && !message.index">
         <Tag text="U1" @click="onClickUV(1)" />
         <Tag text="U2" @click="onClickUV(2)" />
         <Tag text="U3" @click="onClickUV(3)" />

src/api/midjourney.ts

@@ -4,6 +4,7 @@ interface IUpscaleAPI {
   msgHash: string
   msgId: string
   index: number
+  flags?: number
 }
 
 export const getMessagesAPI = (params?: any) => {

src/api/user.ts

@@ -1,4 +1,5 @@
 import { $http } from '../utils/axios'
+import { userStorage } from '@/utils/storage';
 
 interface IUser {
   username: string;
@@ -13,3 +14,7 @@ export const registerUserAPI = (data: IUser) => {
 export const loginUserAPI = (data: IUser) => {
   return $http.post('/user/login', data)
 }
+
+export const getUserInfo = () => {
+  return $http.post('/user/' + userStorage.get().id)
+}

src/components/Group-Modal/index.vue

@@ -12,7 +12,7 @@ const onClickCancel = () => {
 </script>
 
 <template> 
-  <div class="">
-    <img src="/src/assets/group.jpg" alt="">
+  <div class="max-w-[400px]">
+    <img class="w-full" src="/src/assets/group.jpg" alt="">
   </div>
 </template>

src/components/Image copy.vue

@@ -88,19 +88,19 @@ const onClickCancel = () => {
 </script>
 
 <template>
-  <div class="max-w-[600px] px-8 py-4 min-w-[420px]" todayUsed="form.loading">
+  <div class="max-w-[600px] px-8 py-4 min-w-[420px] max-sm:min-w-[auto]" todayUsed="form.loading">
     <img class="block m-auto pb-4" src="/src/assets/coffee.png" alt="">
     <p class="py-1 pb-4 text-center text-orange-100 font-bold">欢迎使用</p>
     <div class="flex justify-between items-center py-2 text-sm mb-2" >
-      <div class="pr-2 text-sm min-w-[80px]">账号：</div>
+      <div class="pr-2 text-sm min-w-[80px] max-sm:min-w-[auto]">账号：</div>
       <input v-model.trim="form.username" type="text" class="flex-1 outline-none rounded text-gray-500 px-3 py-1.5">
     </div>
     <div class="flex justify-between items-center py-2 text-sm">
-      <div class="pr-2 text-sm min-w-[80px]">密码：</div>
+      <div class="pr-2 text-sm min-w-[80px] max-sm:min-w-[auto]">密码：</div>
       <input autocomplete="off" v-model.trim="form.password" type="password" style="-webkit-text-security: disc;" class="flex-1 outline-none rounded text-gray-500 px-3 py-1.5">
     </div>
-    <div class="flex justify-between items-center py-2 text-sm mt-2" v-if="form.type === FORM_TYPE.REGISTER">
-      <div class="pr-2 text-sm min-w-[80px]">输入密码：</div>
+    <div class="flex justify-between items-center py-2 text-sm mt-2 whitespace-nowrap" v-if="form.type === FORM_TYPE.REGISTER">
+      <div class="pr-2 text-sm min-w-[80px] max-sm:min-w-[auto]">输入密码：</div>
       <input autocomplete="off" v-model.trim="form.rePassword" type="password" class="flex-1 outline-none rounded text-gray-500 px-3 py-1.5">
     </div>
 

src/components/Login-Modal/index.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue';
+import { useUser } from '@/hooks/use-user'
+import { getUserInfo } from '@/api/user'
+
+const { userInfo, isLogin } = useUser();
+
+const props = defineProps({
+  close: {
+    type: Function
+  }
+})
+
+const data = reactive({
+  loading: false,
+  times: 0
+})
+
+const onClickCancel = () => {
+  props.close?.()
+}
+
+onMounted(() => {
+  data.loading = true
+  getUserInfo().then((res: any) => {
+    data.times = res.times
+  }).finally(() => {
+    data.loading = false;
+  })
+})
+
+</script>
+
+<template>
+  <div class="max-w-[600px] px-8 py-4 min-w-[420px] max-sm:min-w-[auto]" todayUsed="form.loading" v-loading="data.loading">
+    <img class="block m-auto pb-4" src="/src/assets/coffee.png" alt="">
+    <p class="py-1 pb-4 text-center text-orange-100 font-bold">你好，{{ userInfo.username }}</p>
+
+    <div class="py-2 text-white">
+      <div class="flex justify-between items-center">
+        <div class="text-sm">剩余绘画次数：</div>
+        <div class="flex-1 text-center text-orange-200 font-bold">{{ data.times }}</div>
+      </div>
+    </div>
+
+    <div class="flex flex-col justify-center text-center pt-6 text-sm">
+      <!-- <div class="px-4 py-2 cursor-pointer rounded text-gray bg-orange-500 hover:bg-orange-600 mb-4" @click="onClickSave">保存</div>
+      <div class="px-4 py-2 cursor-pointer rounded text-gray border border-orange-500 text-orange-400" @click="onClickCancel">取消</div> -->
+      <div class="px-4 py-2 cursor-pointer rounded text-gray border border-orange-500 text-orange-400"
+        @click="onClickCancel">关闭</div>
+    </div>
+  </div>
+</template>

src/components/User-Modal/index.vue

@@ -6,9 +6,11 @@ export const useUser = () => {
 
   userStorage.addChangeListener((newUserValue) => {
     isLogin.value = !!newUserValue && !!tokenStorage.get()
+    userInfo.value = newUserValue;
   })
 
   const isLogin = ref(!!userStorage.get())
+  const userInfo = ref(userStorage.get())
 
   const userLogout = () => {
     userStorage.remove()
@@ -18,6 +20,7 @@ export const useUser = () => {
 
   return {
     isLogin,
+    userInfo,
     showLoginModal,
     userLogout
   }

src/hooks/use-user.ts

@@ -10,6 +10,8 @@ export interface Message {
   createTime?: string | number
   // 生成描述，比如我是upscale第四张
   generateText?: string
+  creator?: string
+  flags?: number
 }
 
 export enum MessageStatus {

src/interfaces/message.ts

@@ -4,6 +4,7 @@ import { tokenStorage, userStorage } from '@/utils/storage'
 import { showLoginModal } from '@/utils/index';
 
 export const host = import.meta.env.VITE_APP_API_URL;
+// export const host = "http://43.153.50.34:8999";
 
 export const $http = axios.create({
   baseURL: host