fix(forum): 修复反馈论坛角色徽章显示异常的问题

Author: jiazengp

src/components/forum/ForumRuleBadge.vue src/components/forum/ForumRoleBadge.vuesrc/components/forum/ForumRuleBadge.vue renamed to src/components/forum/ForumRoleBadge.vue

@@ -17,11 +17,12 @@
 
 <script setup lang="ts">
 import { useLocalized } from '@/hooks/useLocalized'
-import { isOfficial } from '~/composables/isOfficial'
+import { useRuleChecks } from '~/composables/useRuleChecks'
 import { isAuthor } from '~/composables/isAuthor'
 import { computed } from 'vue'
 
 const { message } = useLocalized()
+const { isOfficial } = useRuleChecks()
 
 let { authorId = null, type = null } = defineProps<{
   type?: 'official' | 'author' | null

src/components/forum/ForumTopic.vue

@@ -14,7 +14,7 @@
         >
           <p>
             {{ title }}
-            <ForumRuleBadge :type="rule" />
+            <ForumRoleBadge :type="rule" />
           </p>
           <p class="mr-2" v-if="topic.type">
             <span
@@ -95,7 +95,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import ForumRuleBadge from './ForumRuleBadge.vue'
+import ForumRoleBadge from './ForumRoleBadge.vue'
 import ForumTagList from './ForumTagList.vue'
 import ForumTopicComment from './ForumTopicComment.vue'
 import ForumTopicMeta from './ForumTopicMeta.vue'
@@ -106,7 +106,7 @@ import { useToggle } from '@vueuse/core'
 import { useLocalized } from '@/hooks/useLocalized'
 import { sessionCacheRedirect } from '~/composables/sessionCacheRedirect'
 import { sanitizeMarkdown } from '~/composables/sanitizeMarkdown'
-import { isOfficial } from '~/composables/isOfficial'
+import { useRuleChecks } from '~/composables/useRuleChecks'
 
 import type ForumAPI from '@/apis/forum/api'
 
@@ -123,6 +123,7 @@ const topicTypeMap = getTopicTypeMap()
 const { message } = useLocalized()
 
 const [isExpanded, toggleExpand] = useToggle()
+const { isOfficial } = useRuleChecks()
 
 const renderText = computed(() => {
   const contentSanitized = sanitizeMarkdown(topic.contentRaw)

src/components/forum/ForumTopicComment.vue

@@ -17,7 +17,7 @@
       <div class="title flex" :class="style[size].header">
         <p class="font-size-3.5">{{ author.username }}</p>
 
-        <ForumRuleBadge :author-id="author.id" />
+        <ForumRoleBadge :type="rule" />
       </div>
 
       <article
@@ -54,13 +54,15 @@
 <script setup lang="ts">
 import type ForumAPI from '@/apis/forum/api'
 import { computed } from 'vue'
-import ForumRuleBadge from './ForumRuleBadge.vue'
+import ForumRoleBadge from './ForumRoleBadge.vue'
 import { Image } from '@/components/ui/image'
 import ForumCommentMeta from './ForumCommentMeta.vue'
 
 const {
   size = 'normal',
   repo = 'Feedback',
+  topicAuthorId,
+  author,
   ...props
 } = defineProps<{
   repo: string
@@ -75,6 +77,8 @@ const {
   commentClickHandler: Function
 }>()
 
+const rule = computed(() => (topicAuthorId === author.id ? 'author' : null))
+
 const style = {
   small: {
     container: 'py-3',

src/components/forum/topic/ForumTopicPage.vue

@@ -19,7 +19,7 @@
             <p class="mx-2 font-size-3.5 font-[var(--vp-font-family-subtitle)]">
               {{ data?.user.username }}
             </p>
-            <ForumRuleBadge :author-id="data.user.id" />
+            <ForumRoleBadge :author-id="data.user.id" />
 
             <span class="color-[--vp-c-text-3]">·</span>
 
@@ -85,7 +85,7 @@ import { computed, watchEffect } from 'vue'
 import { useRequest } from 'vue-request'
 import { toast } from 'vue-sonner'
 import ForumAside from '../ForumAside.vue'
-import ForumRuleBadge from '../ForumRuleBadge.vue'
+import ForumRoleBadge from '../ForumRoleBadge.vue'
 import ForumTagList from '../ForumTagList.vue'
 import { getTopicNumber, setPageTitle } from '../utils'
 import ForumCommentArea from '../ForumCommentArea.vue'

src/composables/isOfficial.ts

@@ -20,7 +20,7 @@ const userRolesMap = {
 type Role = keyof typeof rolesPermissions
 type Permission = (typeof rolesPermissions)[Role][number]
 
-export const useRuleChecks = (inputId?: string | number) => {
+export const useRuleChecks = (inputId: string | number = '') => {
   const userInfo = useUserInfoStore()
   const id = computed(() => userInfo.info?.id || 0)
 
@@ -31,7 +31,7 @@ export const useRuleChecks = (inputId?: string | number) => {
   })
 
   const userRoles = computed((): Array<Role> => {
-    return id.value === String(userInfo.info?.id)
+    return String(inputId) === String(userInfo.info?.id)
       ? [...staticRoles.value, 'author']
       : staticRoles.value
   })
@@ -62,10 +62,21 @@ export const useRuleChecks = (inputId?: string | number) => {
   const hasAllRoles = (...roles: Role[]) =>
     computed(() => roles.every((role) => userRoles.value.includes(role)))
 
+  const isOfficial = (userId: string | number) => {
+    return computed(() => {
+      userId ??= id.value
+      return (
+        userRolesMap.feedbackMember.has(Number(userId)) ||
+        userRolesMap.teamMember.has(Number(userId))
+      )
+    })
+  }
+
   return {
     hasAnyPermissions,
     hasAllPermissions,
     hasAnyRoles,
     hasAllRoles,
+    isOfficial,
   }
 }