chore: 优化角色徽章相关代码与显示逻辑

Author: jiazengp

src/components/forum/ForumRoleBadge.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="inline-block align-middle mb-1" v-if="rule">
+  <div class="inline-block align-middle mb-1" v-if="role">
     <span
-      v-if="rule === 'official'"
+      v-if="role === 'official'"
       class="inline-flex items-center rounded-md px-1.5 pb-0.5 pt-0.75 align-middle text-xs font-semibold transition-colors bg-[#c9353f1a] c-[#d8111b] ml-0.5 scale-80"
     >
       {{ message.forum.topic.official }}
     </span>
     <span
-      v-if="rule === 'author'"
+      v-if="role === 'author'"
       class="inline-flex items-center rounded-md px-1.5 pb-0.5 pt-0.75 align-middle text-xs font-semibold transition-colors bg-[#2c71ff1a] c-[#0056e3] ml-0.5 scale-80"
     >
       {{ message.forum.topic.author }}
@@ -29,12 +29,12 @@ let { authorId = null, type = null } = defineProps<{
   authorId?: string | number | null
 }>()
 
-const userRule = computed(() => {
+const userRole = computed(() => {
   if (!authorId) return null
   if (isAuthor(authorId).value) return 'author'
   if (isOfficial(authorId).value) return 'official'
   return null
 })
 
-const rule = computed(() => type || userRule.value)
+const role = computed(() => type || userRole.value)
 </script>

src/components/forum/ForumTopic.vue

@@ -14,7 +14,7 @@
         >
           <p>
             {{ title }}
-            <ForumRoleBadge :type="rule" />
+            <ForumRoleBadge :type="role" />
           </p>
           <p class="mr-2" v-if="topic.type">
             <span
@@ -130,7 +130,7 @@ const renderText = computed(() => {
   if (isAnn.value) return contentSanitized
   return contentSanitized.slice(0, isExpanded.value ? undefined : 180)
 })
-const rule = computed(() => (isOfficial(author.id).value ? 'official' : null))
+const role = computed(() => (isOfficial(author.id).value ? 'official' : null))
 const hasOverflow = computed(
   () => topic.contentRaw.replace(/!\[.*?\]\(.*?\)/g, '').length > 180,
 )

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>
 
-        <ForumRoleBadge :type="rule" />
+        <ForumRoleBadge :type="role" />
       </div>
 
       <article
@@ -57,6 +57,7 @@ import { computed } from 'vue'
 import ForumRoleBadge from './ForumRoleBadge.vue'
 import { Image } from '@/components/ui/image'
 import ForumCommentMeta from './ForumCommentMeta.vue'
+import { useRuleChecks } from '~/composables/useRuleChecks'
 
 const {
   size = 'normal',
@@ -77,7 +78,13 @@ const {
   commentClickHandler: Function
 }>()
 
-const rule = computed(() => (topicAuthorId === author.id ? 'author' : null))
+const { isOfficial } = useRuleChecks()
+
+const role = computed(() => {
+  if (topicAuthorId === author.id) return 'author'
+  if (isOfficial(author.id).value) return 'official'
+  return null
+})
 
 const style = {
   small: {