feat: 用户模块

Author: rictt

package.json

@@ -11,10 +11,12 @@
   "dependencies": {
     "@vueuse/core": "^10.1.2",
     "clipboard": "^2.0.11",
+    "crypto-js": "^4.1.1",
     "vue": "^3.2.47",
     "vue3-lazy": "^1.0.0-alpha.1"
   },
   "devDependencies": {
+    "@types/node": "^20.3.0",
     "@types/uuid": "^9.0.1",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",

src/DrawPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted } from 'vue';
+import { reactive, ref, onMounted, defineAsyncComponent } from 'vue';
 import { Message, MessageStatus } from './interfaces/message'
 import MessageItem from './Message.vue'
 import { getMessagesAPI, createMessageAPI, upscaleMessageAPI } from './api/midjourney'
@@ -9,15 +9,19 @@ import Toast from './components/Toast/index'
 import UseModal from './components/Use-Modal/index.vue'
 import SettingsModal from './components/Settings-Modal/index.vue'
 import { showModal } from './components/Modal';
-import { drawStyles, randomPrompt, getJointPrompt } from './utils/index'
-
+import { drawStyles, randomPrompt, getJointPrompt, showLoginModal } from './utils/index'
+import { useLimitHook } from '@/hooks/use-limit-hook';
 
 const showUseModal = () => {
-  showModal(UseModal)
+  showModal(UseModal, {
+    title: "使用说明"
+  })
 }
 
 const showSettingsModal = () => {
-  showModal(SettingsModal)
+  showModal(SettingsModal, {
+    title: "设置"
+  })
 }
 createWebsocket({
   onMessage(data) {
@@ -64,12 +68,6 @@ const onClickSend = () => {
 }
 
 const onKeyDown = useDebounceFn((event: Event) => {
-  if (!data.prompt) {
-    Toast({
-      value: '描述不能为空'
-    })
-    return
-  }
   event.stopPropagation()
   event.preventDefault()
   sendPrompt()
@@ -95,7 +93,21 @@ const getList = (params: any) => {
 
 const sendPrompt = async () => {
   data.prompt = data.prompt.trim()
-  if (!data.prompt) return
+  if (!data.prompt) {
+    Toast({
+      value: '描述不能为空'
+    })
+    return
+  }
+
+  const { isExceedFreeTimesByDay, recordTimeUse } = useLimitHook()
+  if (isExceedFreeTimesByDay()) {
+    Toast({ value: "今日免费次数已用尽，请先登录" })
+    setTimeout(() => {
+      showLoginModal()
+    }, 2000)
+    return
+  }
   const newPmt = getJointPrompt(data.prompt)
   const msgId = await createMessageAPI(newPmt) as any;
   console.log("msgId: ", msgId)
@@ -107,9 +119,9 @@ const sendPrompt = async () => {
     status: MessageStatus.INIT
   }
   
-  // data.messages.push(msgObj)
   data.messages.unshift(msgObj)
   data.prompt = ''
+  recordTimeUse()
   scrollToBottom()
 }
 
@@ -174,6 +186,7 @@ onMounted(() => {
 </script>
 
 <template>
+  <!-- <div class="h-full w-full max-sm:py-0 bg-gray-600" v-loading:[title]="true"> -->
   <div class="h-full w-full max-sm:py-0 bg-gray-600">
     <div class="relative h-full max-w-[980px] bg-gray-700 m-auto text-white px-10 py-4 sm:py-0 max-sm:py-2 max-sm:px-4 rounded-none">
       <div id="contentWrap" ref="contentWrap" class="h-[calc(100%-150px)]  overflow-auto m-auto flex flex-col-reverse">

src/api/midjourney.ts

@@ -7,19 +7,19 @@ interface IUpscaleAPI {
 }
 
 export const getMessagesAPI = (params?: any) => {
-  return $http.get('/list', {
+  return $http.get('/messages', {
     params
   })
 }
 
 export const createMessageAPI = (prompt: string) => {
-  return $http.post('/imagine', {
+  return $http.post('/mj/imagine', {
     prompt
   })
 }
 
 export const upscaleMessageAPI = (body: IUpscaleAPI) => {
-  return $http.post('/upscale', body)
+  return $http.post('/mj/upscale', body)
 }
 
 

src/api/user.ts

@@ -0,0 +1,15 @@
+import { $http } from '../utils/axios'
+
+interface IUser {
+  username: string;
+  password?: string;
+  rePassword?: string;
+}
+
+export const registerUserAPI = (data: IUser) => {
+  return $http.post('/user/register', data)
+}
+
+export const loginUserAPI = (data: IUser) => {
+  return $http.post('/user/login', data)
+}

src/assets/coffee.png

@@ -0,0 +1,52 @@
+import Loading from './index.vue'
+import { ComponentPublicInstance, createApp } from 'vue'
+
+type LoadingElementType = HTMLElement & {
+  instance: ComponentPublicInstance
+}
+
+const append = (el: LoadingElementType) => {
+  const style = getComputedStyle(el)
+  if (['absolute', 'relative', 'fixed'].indexOf(style.position) === -1) {
+    el.classList.add('relative')
+  }
+  el.appendChild(el.instance.$el)
+}
+const remove = (el: LoadingElementType) => {
+  el.removeChild(el.instance.$el)
+  el.classList.remove('relative')
+}
+
+export const loadingDirective = {
+  mounted(el: any, binding: any) {
+    const app = createApp(Loading)
+    const container = document.createElement('div')
+    const instance = app.mount(container);
+    instance.$el
+
+    el.instance = instance
+
+    if (binding.value) {
+      append(el)
+    }
+    if (binding.arg !== 'undefined') {
+      el.instance.setTitle(binding.arg)
+    }
+  },
+  updated(el: any, binding: any) {
+
+    if (binding.arg !== 'undefined') {
+      // setTitle 使我们在loading组件中定义的⽅法
+       el.instance.setTitle(binding.arg)  
+     }
+
+    if (binding.value !== binding.oldValue) {
+      // 三元表达式 true 插入 false 移除
+      binding.value ? append(el) : remove(el)
+    }
+  }
+}
+
+export const useLoading = () => {
+  return { ...loadingDirective }
+}

src/components/Loading/index.ts

@@ -0,0 +1,149 @@
+<template>
+  <div class="loading-mask">
+    <div class="loading-loader">
+      <div>
+        <div class="loading-dot"></div>
+        <div class="loading-dot"></div>
+        <div class="loading-dot"></div>
+        <div class="loading-dot"></div>
+        <div class="loading-dot"></div>
+      </div>
+      <div class="loading-tip-text">{{ title }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let title = ref('') // 加载提示文字
+// 更改加载提示文字
+const setTitle = (val) => {
+  title.value = val
+}
+
+// 暴露出去
+defineExpose({
+  title,
+  setTitle
+})
+</script>
+
+<style scoped>
+.loading-mask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  /* background-color: rgba(0, 0, 0, 0.3); */
+  z-index: 99;
+  cursor: wait;
+}
+
+.loading-mask .loading-loader {
+  position: absolute;
+  top: 50%;
+  left: 40%;
+  margin-left: 10%;
+  transform: translate3d(-50%, -50%, 0);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.loading-tip-text {
+  color: #3793ff;
+  padding-top: 10px;
+}
+
+.loading-dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 100%;
+  display: inline-block;
+  animation: slide 1s infinite;
+}
+
+.loading-dot:nth-child(1) {
+  animation-delay: 0.1s;
+  background: #1fbfff;
+}
+.loading-dot:nth-child(2) {
+  animation-delay: 0.2s;
+  background: #2ea4ff;
+}
+.loading-dot:nth-child(3) {
+  animation-delay: 0.3s;
+  background: #3793ff;
+}
+.loading-dot:nth-child(4) {
+  animation-delay: 0.4s;
+  background: #3b89ff;
+}
+.loading-dot:nth-child(5) {
+  animation-delay: 0.5s;
+  background: #4577ff;
+}
+
+@-moz-keyframes slide {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.3;
+    transform: scale(2);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@-webkit-keyframes slide {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.3;
+    transform: scale(2);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@-o-keyframes slide {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.3;
+    transform: scale(2);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes slide {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.3;
+    transform: scale(2);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+</style>
+