Merge pull request #203 from Aqr-K/dev-user

fix(user)

src/components/dialog/UserAddEditDialog.vue

@@ -6,6 +6,7 @@ import api from '@/api'
 import { useDisplay } from 'vuetify'
 import avatar1 from '@images/avatars/avatar-1.png'
 import store from '@/store'
+import { debounce } from 'lodash'
 
 // 显示器宽度
 const display = useDisplay()
@@ -23,6 +24,9 @@ const props = defineProps({
   oper: String,
 })
 
+// 防抖时间
+const debounceTime = 500
+
 // 当前登录用户名称
 const currentLoginUser = store.state.auth.userName
 
@@ -115,7 +119,7 @@ async function fetchUserInfo() {
 }
 
 // 调用API 新增用户
-async function addUser() {
+const addUser = debounce(async () => {
   if (isAdding.value) {
     $toast.error(`正在创建【${userForm.value.name}】用户，请稍后`)
     return
@@ -154,10 +158,10 @@ async function addUser() {
   }
   doneNProgress()
   isAdding.value = false
-}
+}, debounceTime)
 
 // 调用API更新用户信息
-async function updateUser() {
+const updateUser = debounce(async () => {
   if (isUpdating.value) {
     $toast.error(`正在更新【${userForm.value.name}】用户，请稍后`)
     return
@@ -214,7 +218,7 @@ async function updateUser() {
   }
   doneNProgress()
   isUpdating.value = false
-}
+}, debounceTime)
 
 // 用户状态转换，true/false转换为1/0
 const userStatus = computed({

src/views/user/UserProfileView.vue

@@ -7,6 +7,7 @@ import type { User } from '@/api/types'
 import avatar1 from '@images/avatars/avatar-1.png'
 import { useDisplay } from 'vuetify'
 import store from '@/store'
+import { debounce } from 'lodash'
 
 // 显示器宽度
 const display = useDisplay()
@@ -21,6 +22,12 @@ const $toast = useToast()
 
 const refInputEl = ref<HTMLElement>()
 
+// 防抖时间
+const debounceTime = 500
+
+// 正在保存
+const isSaving = ref(false)
+
 // 开启双重验证窗口
 const otpDialog = ref(false)
 
@@ -59,9 +66,6 @@ const accountInfo = ref<User>({
   },
 })
 
-// 所有用户信息
-const allUsers = ref<User[]>([])
-
 // 二维码信息
 const qrCode = ref('')
 
@@ -110,7 +114,11 @@ async function loadAccountInfo() {
 }
 
 // 保存用户信息
-async function saveAccountInfo() {
+const saveAccountInfo = debounce(async () => {
+  if (isSaving.value) {
+    $toast.error('正在保存中，请稍后...')
+    return
+  }
   if (!currentUserName.value) {
     $toast.error('用户名不能为空')
     return
@@ -126,6 +134,7 @@ async function saveAccountInfo() {
   const oldAvatar = accountInfo.value.avatar
   accountInfo.value.avatar = currentAvatar.value
   accountInfo.value.name = currentUserName.value
+  isSaving.value = true
   try {
     const result: { [key: string]: any } = await api.put('user/', accountInfo.value)
     if (result.success) {
@@ -155,16 +164,8 @@ async function saveAccountInfo() {
   } catch (error) {
     console.log(error)
   }
-}
+  isSaving.value = false
-
+}, debounceTime)
-// 调用API，查询所有用户
-async function loadAllUsers() {
-  try {
-    allUsers.value = await api.get('/user/')
-  } catch (error) {
-    console.log(error)
-  }
-}
 
 // 为当前用户获取Otp Uri
 async function getOtpUri() {
@@ -225,7 +226,6 @@ async function judgeOtpPassword() {
 // 加载当前用户数据
 onMounted(() => {
   loadAccountInfo()
-  loadAllUsers()
 })
 
 // 监听 localStorage 中的用户头像变化
@@ -385,7 +385,13 @@ watch(
               <VRow>
                 <!-- 👉 Form Actions -->
                 <VCol cols="12" class="d-flex flex-wrap gap-4">
-                  <VBtn @click="saveAccountInfo"> 保存 </VBtn>
+                  <VBtn
+                    @click="saveAccountInfo"
+                    :disabled="isSaving"
+                  >
+                    <span v-if="isSaving">保存中...</span>
+                    <span v-else>保存</span>
+                  </VBtn>
                 </VCol>
               </VRow>
             </VForm>