refactor: apply Vue best practices across src

Author: 16th-admin

src/App.vue

@@ -1,25 +1,24 @@
 <template>
   <div id="app" @click="handleClick">
     <CookieNotice />
-    <router-view v-slot="{ Component }">
-      <!-- keep alive源自于vue-router的缓存 -->
-      <!-- keep alive comes from cach function from vue-router -->
+    <router-view v-slot="{ Component, route }">
       <keep-alive>
-        <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.fullPath" />
+        <component :is="Component" v-if="route.meta.keepAlive" :key="route.fullPath" />
       </keep-alive>
-      <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.fullPath" />
+      <component :is="Component" v-if="!route.meta.keepAlive" :key="route.fullPath" />
     </router-view>
   </div>
 </template>
 
 <script setup lang="ts">
 import showUserCard from '@popup/userProfileDialog.ts'
 import CookieNotice from './components/utils/CookieNotice.vue'
+
 function handleClick(event: MouseEvent) {
-  const target = event.target as HTMLElement
-  if (target.classList.contains('RUser')) {
-    showUserCard(target.dataset.user || '')
-  }
+  if (!(event.target instanceof Element)) return
+  const userElement = event.target.closest<HTMLElement>('.RUser')
+  const userId = userElement?.dataset.user
+  if (userId) showUserCard(userId)
 }
 </script>
 

src/components/friends/item.vue

@@ -16,20 +16,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { User } from '@services/../pl-serve-type-main/type/main'
 import showUserCard from '@popup/userProfileDialog.ts'
 import { getPath } from '@services/utils'
 import { getData } from '@services/api/getData'
 import { getUserUrl } from '@services/utils'
-const { user } = defineProps<{
+const props = defineProps<{
   user: User
 }>()
 const iconPath = ref(getPath('/@base/assets/user/Status-None.png'))
-const avararUrl = getUserUrl(user)
+const avararUrl = computed(() => getUserUrl(props.user))
 
 async function getIconPath() {
-  const re = await getData('/Users/GetUser', { ID: user.ID })
+  const re = await getData('/Users/GetUser', { ID: props.user.ID })
   if (!re.Data) return '/@base/assets/user/Status-None.png'
   return getIcon(Number(re.Data.Relation))
 }
@@ -47,10 +47,17 @@ function getIcon(relation: number) {
   }
 }
 
-onMounted(async () => {
-  const p = await getIconPath()
-  iconPath.value = getPath(p)
-})
+let iconRequestId = 0
+
+watch(
+  () => props.user.ID,
+  async () => {
+    const requestId = ++iconRequestId
+    const p = await getIconPath()
+    if (requestId === iconRequestId) iconPath.value = getPath(p)
+  },
+  { immediate: true },
+)
 </script>
 
 <style scoped>

src/components/friends/list.vue

@@ -1,7 +1,7 @@
 <template>
   <infiniteScroll :initial-items="items" :has-more="!noMore" :margin-top="-200" @load="handleLoad">
     <template #default="{ items }">
-      <n-grid :cols="cols || 2">
+      <n-grid :cols="props.cols || 2">
         <n-gi v-for="user in items as RelationList[]" :key="user.User?.ID">
           <UserItem v-if="user.User" :user="user.User" />
         </n-gi>
@@ -24,70 +24,72 @@ import { showMessage } from '@popup/naiveui'
 
 // cols需要在父组件传参，这可能会在好友界面和Profile界面（未实现）展现
 //  Props `cols` needs to be passed from the parent component, which may be displayed in the Friends page and Profile page (not implemented yet).
-const { userid, type } = defineProps<{
+const props = defineProps<{
   userid?: string
   type?: string
   cols?: number
 }>()
 
-let loading = ref(false)
-let skip = ref(0)
-let noMore = ref(false)
-let hasInformed = ref(false)
+const loading = ref(false)
+const skip = ref(0)
+const noMore = ref(false)
+const hasInformed = ref(false)
 const items = ref<RelationList[]>([])
 const { t } = useI18n()
 // Vue对于Ref会自动处理数据竞争问题
 // Vue automatically handles data race issues with Ref.
 
 async function handleLoad() {
-  if (!userid) return
+  if (!props.userid) return
   if (loading.value) return // Serves as a "lock"
-  loading.value = true
   if (noMore.value) {
     if (!hasInformed.value) showMessage('info', t('ui.messages.noMore'))
     hasInformed.value = true
     return
   }
-  const getRelationsRes = await getData('/Users/GetRelations', {
-    UserID: userid,
-    DisplayType: type ? Number(type) : 0,
-    Skip: skip.value,
-    Take: 24,
-    Query: '',
-  })
-  if (getRelationsRes.Status !== 200) {
-    showAPiError(t('errors.apiErrorTitle'), t('errors.apiErrorMessage'), handleLoad)
-    const _req = removeToken({
-      UserID: userid,
-      DisplayType: type,
+  loading.value = true
+  try {
+    const getRelationsRes = await getData('/Users/GetRelations', {
+      UserID: props.userid,
+      DisplayType: props.type ? Number(props.type) : 0,
       Skip: skip.value,
       Take: 24,
       Query: '',
     })
-    const _res = removeToken(getRelationsRes)
-    window.$ErrorLogger.captureApiError(
-      'POST',
-      '/Users/GetRelations',
-      getRelationsRes.Status,
-      _res,
-      _req,
-    )
-    console.error(`/Users/GetRelations returned ${getRelationsRes.Status}`, _res)
-    loading.value = false
-    return
-  }
+    if (getRelationsRes.Status !== 200) {
+      showAPiError(t('errors.apiErrorTitle'), t('errors.apiErrorMessage'), handleLoad)
+      const request = removeToken({
+        UserID: props.userid,
+        DisplayType: props.type,
+        Skip: skip.value,
+        Take: 24,
+        Query: '',
+      })
+      const result = removeToken(getRelationsRes)
+      window.$ErrorLogger.captureApiError(
+        'POST',
+        '/Users/GetRelations',
+        getRelationsRes.Status,
+        result,
+        request,
+      )
+      console.error(`/Users/GetRelations returned ${getRelationsRes.Status}`, result)
+      return
+    }
   // 在某些地方用的skip传入的是时间戳，但是这里找不到可能与时间戳有关的逻辑，skip为整数也能work
   // In some places, the 'skip' is a timestamp, but here there doesn't seem to be any logic related to the timestamp; 'skip' as an integer also works.
-  noMore.value = (getRelationsRes.Data?.$values?.length ?? 0) < 24
-  loading.value = false
-  skip.value += 24
-  if (getRelationsRes.Data?.$values) {
-    items.value = [...items.value, ...getRelationsRes.Data.$values]
+    noMore.value = (getRelationsRes.Data?.$values?.length ?? 0) < 24
+    skip.value += 24
+    if (getRelationsRes.Data?.$values) {
+      items.value.push(...getRelationsRes.Data.$values)
+    }
+  } finally {
+    loading.value = false
   }
 }
 
 window.$Logger.logPageView({
-  pageLink: `/Social/Friends/${Number(type)}/`,
+  pageLink: `/Social/Friends/${Number(props.type)}/`,
   timeStamp: Date.now(),
 })
 

src/components/messages/MessageItem.vue

@@ -1,19 +1,18 @@
 <template>
-  <div id="notification_container" @click="handleReply">
+  <div class="notification_container" @click="handleReply">
     <div class="img">
-      <img id="avatar" :src="avatarUrl" @click.stop="showUserCard(message.UserID)" />
+      <img class="avatar" :src="avatarUrl" alt="" @click.stop="showUserCard(message.UserID)" />
     </div>
-    <div id="notification" class="notification">
-      <div id="notification_title" class="notification_title">
+    <div class="notification">
+      <div class="notification_title">
         <div class="name">{{ message.Nickname }}</div>
         <div class="time">{{ formatDate(message.ID, true) }}</div>
         <div v-if="currentUserId === message.UserID" class="delete" @click.stop="deleteMsg">
           {{ t('messagesI18n.delete') }}
         </div>
       </div>
-      <div id="notification_message" class="notification_message">
+      <div class="notification_message">
         <div
-          id="notification_text"
           v-richText="
             () =>
               parse(message.Content, {
@@ -29,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, watch } from 'vue'
 import parse from '@services/pltxt2htm/advancedParser'
 import showUserCard from '@popup/userProfileDialog.ts'
 import { getAvatarUrl } from '@services/getUserCurentAvatarByID'
@@ -43,26 +42,36 @@ const props = defineProps<{
   message: CommentResult
 }>()
 
-const emit = defineEmits(['msgClick', 'deleteMsg'])
+const emit = defineEmits<{
+  msgClick: [message: CommentResult]
+  deleteMsg: [message: CommentResult]
+}>()
 const currentUserId = storageManager.getObj('userInfo')?.value?.ID || ''
 const avatarUrl = ref(getPath('/@base/assets/user/default-avatar.png'))
 
+let avatarRequestId = 0
+
 const setCurrentAvatar = async () => {
+  const requestId = ++avatarRequestId
   const isAnonymous = props.message.Flags?.includes('Anonymous')
+  let nextAvatar = getPath('/@base/assets/user/default-avatar.png')
 
   if (!isAnonymous && props.message.UserID !== '') {
     // 有些地方是匿名的，所以userID为空，不设置心得头像就会沿用默认头像
     // Some places are anonymous, so if userID is empty, the default avatar will be used.
-    avatarUrl.value = await getAvatarUrl(props.message.UserID)
+    nextAvatar = await getAvatarUrl(props.message.UserID)
   } else if (/^\d{4}$/.test(props.message.Nickname)) {
-    avatarUrl.value = getAnonymousAvatarByNickname(props.message.Nickname)
-  } else {
-    avatarUrl.value = getPath('/@base/assets/user/default-avatar.png')
+    nextAvatar = getAnonymousAvatarByNickname(props.message.Nickname)
   }
+
+  if (requestId === avatarRequestId) avatarUrl.value = nextAvatar
 }
 
-onMounted(setCurrentAvatar)
-watch(() => [props.message.UserID, props.message.Nickname, props.message.Flags], setCurrentAvatar)
+watch(
+  () => [props.message.UserID, props.message.Nickname, props.message.Flags],
+  setCurrentAvatar,
+  { immediate: true },
+)
 
 function handleReply() {
   emit('msgClick', props.message)
@@ -76,7 +85,7 @@ function deleteMsg() {
 </script>
 
 <style scoped>
-#notification_container {
+.notification_container {
   height: fit-content;
   width: calc(100% - 5px);
   margin-left: 5px;
@@ -90,37 +99,29 @@ function deleteMsg() {
   word-break: break-all;
 }
 
-#notification_container:hover {
+.notification_container:hover {
   background-color: #f0f0f0;
 }
 
-#avatar {
+.avatar {
   height: 60px;
   width: 60px;
   border-radius: 50%;
 }
 
-#avatar::after {
+.avatar::after {
   content: '';
   mix-blend-mode: luminosity;
 }
 
-#notification {
+.notification {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 5px;
 }
 
-#notification_icon {
-  width: 20px;
-  height: 20px;
-  top: 2px;
-  background-color: transparent;
-  display: flex;
-}
-
-#notification_title {
+.notification_title {
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -137,15 +138,15 @@ function deleteMsg() {
   font-weight: lighter;
 }
 
-#notification_message {
+.notification_message {
   width: 100%;
   height: fit-content;
   display: flex;
   flex-direction: row;
   gap: 5px;
 }
 
-#notification_text {
+.notification_text {
   font-size: 1em;
   text-align: left;
   height: fit-content;
@@ -156,15 +157,6 @@ function deleteMsg() {
   text-overflow: hidden;
 }
 
-#icon {
-  height: 16px;
-  width: 16px;
-}
-
-#notification_container:hover {
-  background-color: #f0f0f0;
-}
-
 .time {
   margin-left: 5px;
   font-weight: normal;
@@ -175,7 +167,7 @@ div {
   box-sizing: border-box;
 }
 
-#notification_message :deep(img) {
+.notification_message :deep(img) {
   max-width: 90%;
   height: auto;
 }