feat: 优化提交表单标签处理 (#261)

kongying-tavern · Jan 16, 2025 · 7e28df6 · 7e28df6
2 parents 4ea2a12 + c8d9a76
commit 7e28df6
Show file tree

Hide file tree

Showing 12 changed files with 137 additions and 24 deletions.
diff --git a/.vitepress/locales/zh/forum.ts b/.vitepress/locales/zh/forum.ts
@@ -10,7 +10,7 @@ const forum: CustomConfig['forum'] = {
     showMore: '显示更多',
     backToFeedbackForum: '返回反馈',
     menu: {
-      giteeLink: 'Gitee链接',
+      giteeLink: '在Gitee查看',
       toOriginal: '转到原文',
       hideFeedback: {
         text: '隐藏反馈',
@@ -154,7 +154,7 @@ const forum: CustomConfig['forum'] = {
         client: '客户端问题',
       },
     },
-    title: '发布反馈',
+    title: '提交反馈',
     type: {
       sug: '提建议',
       bug: '提缺陷',

diff --git a/.vitepress/theme/apis/forum/gitee/index.ts b/.vitepress/theme/apis/forum/gitee/index.ts
@@ -25,13 +25,13 @@ export const STATE_TAGS = new Set([
   'CLOSED',
   'WEB-FEEDBACK',
   'GOOD-ISSUE',
-  'FEAT',
-  'SUG',
-  'BUG',
-  'ANN',
-  'ZH',
-  'EN',
-  'JA',
+  'TYP-FEAT',
+  'TYP-SUG',
+  'TYP-BUG',
+  'TYP-ANN',
+  'LC-ZH',
+  'LC-EN',
+  'LC-JA',
 ])
 
 export const fetcher = ky.create({

diff --git a/.vitepress/theme/apis/forum/gitee/issues.ts b/.vitepress/theme/apis/forum/gitee/issues.ts
@@ -72,7 +72,7 @@ export const getAnnouncementList = async (): Promise<ForumAPI.Topic[]> => {
     {
       params: {
         state: 'open',
-        labels: ['ANN'],
+        labels: ['TYP-ANN'],
       },
       useCache: true,
     },

diff --git a/src/components/forum/ForumContentInputBox.vue b/src/components/forum/ForumContentInputBox.vue
@@ -2,7 +2,8 @@
   <div class="flex">
     <div class="comment-area w-full">
       <div
-        class="body border-color-[var(--vp-c-gutter)] border-style-solid border rounded-md px-2 py-1"
+        class="body border-style-solid border rounded-md px-2 py-1"
+        :class="class"
       >
         <div class="editor">
           <textarea

diff --git a/src/components/forum/ForumPublishTopicForm.vue b/src/components/forum/ForumPublishTopicForm.vue
@@ -264,7 +264,7 @@ watch(
             id="Title"
             type="text"
             :placeholder="tab.fields.title.placeholder"
-            class="vp-border-input"
+            class="vp-border-input border-color-[var(--vp-c-text-2)]"
             :maxlength="tab.fields.title.maxLength"
             autocomplete="off"
             v-model="title"
@@ -283,6 +283,7 @@ watch(
           <ForumTagsInput
             v-if="tab.fields.type.show"
             id="label"
+            class="border-color-[var(--vp-c-text-2)]"
             :placeholder="tab.fields.type.placeholder"
             v-model="tags"
           />
@@ -300,6 +301,7 @@ watch(
           <ForumContentInputBox
             v-if="tab.fields.content.show"
             v-model="body"
+            class="border-color-[var(--vp-c-text-2)]"
             :file-limit="3"
             :max-file-size="3"
             :auto-upload="true"

diff --git a/src/components/forum/ForumTagList.vue b/src/components/forum/ForumTagList.vue
@@ -1,20 +1,23 @@
 <script setup lang="ts">
 import { getTopicTagMap } from '~/composables/getTopicTagMap'
+import { getTopicTagLabelGetter } from '~/composables/getTopicTagLabelGetter'
 
 defineProps<{
   data: string[]
 }>()
 
 const topicTagMap = getTopicTagMap()
+const topicLabelGetter = getTopicTagLabelGetter()
 </script>
 
 <template>
   <div v-if="data.length > 0">
     <span
-      v-for="tag in data"
-      :key="tag"
+      v-for="label in data"
+      :key="label"
       class="px-2.5 font-size-3 inline-flex pointer-events-auto bg-[--vp-c-bg-soft] mr-2 rounded-full color-[--vp-c-text-2]"
-      >#{{ topicTagMap.get(tag) }}</span
     >
+      #{{ topicTagMap.get(topicLabelGetter.getTag(label) ?? '') }}
+    </span>
   </div>
 </template>
diff --git a/src/components/forum/ForumTagsInput.vue b/src/components/forum/ForumTagsInput.vue
@@ -3,6 +3,7 @@
     <PopoverTrigger>
       <TagsInput
         class="px-0 gap-0 w-full border vp-border-input"
+        :class="class"
         :model-value="modelValue"
       >
         <div class="flex gap-2 flex-wrap items-center px-3">

diff --git a/src/components/forum/ForumTopicMeta.vue b/src/components/forum/ForumTopicMeta.vue
@@ -32,7 +32,7 @@
             v-if="hasPermission(authorId)"
             @click="handleCloseTopic"
           >
-            <span class="i-lucide:trash-2 icon-btn"></span>
+            <span class="i-lucide:x icon-btn"></span>
             <span>{{ menuLabels.closeFeedback.text }}</span>
           </DropdownMenuItem>
           <DropdownMenuItem

diff --git a/src/composables/getForumLocaleGetter.ts b/src/composables/getForumLocaleGetter.ts
@@ -0,0 +1,16 @@
+export const getForumLocaleLabelGetter = () => {
+  const getLabel = (locale?: string | null | undefined) =>
+    locale ? `LC-${locale}` : null
+
+  const getLocale = (label?: string | null | undefined) =>
+    label ? String(label).replace(/^LC-/g, '') : null
+
+  const isLabel = (label?: string | null | undefined) =>
+    label && String(label).startsWith('LC-')
+
+  return {
+    getLabel,
+    getLocale,
+    isLabel,
+  }
+}
diff --git a/src/composables/getTopicTagLabelGetter.ts b/src/composables/getTopicTagLabelGetter.ts
@@ -0,0 +1,45 @@
+export const getTopicTagLabelGetter = () => {
+  const constructList: [string, string][] = [
+    ['DOCS-ISSUE', 'CATA-DOCS-ISSUE'],
+    ['TYPOS-ISSUE', 'CATA-TYPOS-ISSUE'],
+    ['DISPLAY-ISSUE', 'CATA-DISPLAY-ISSUE'],
+    ['LOGIN-ISSUE', 'CATA-LOGIN-ISSUE'],
+    ['PERFORMANCE-ISSUE', 'CATA-PERFORMANCE-ISSUE'],
+    ['TRANSLATION-ISSUE', 'CATA-TRANSLATION-ISSUE'],
+    ['OTHER-ISSUE', 'CATA-OTHER-ISSUE'],
+    ['PIN-ISSUE', 'CATA-PIN-ISSUE'],
+    ['ALL-PLATFORM', 'CATA-ALL-PLATFORM'],
+    ['WEB-PLATFORM', 'CATA-WEB-PLATFORM'],
+    ['CLIENT-PLATFORM', 'CATA-CLIENT-PLATFORM'],
+  ]
+
+  const forwardMap = new Map(constructList)
+
+  const reverseMap = new Map(constructList.map(([key, value]) => [value, key]))
+
+  const getTag = (label?: string | null | undefined) =>
+    reverseMap.get(label ?? '')
+
+  const getLabel = (tag?: string | null | undefined) =>
+    forwardMap.get(tag ?? '')
+
+  const isTag = (tag?: string | null | undefined) => forwardMap.has(tag ?? '')
+
+  const isLabel = (label?: string | null | undefined) =>
+    reverseMap.has(label ?? '')
+
+  const toTags = (labels?: string[] | null | undefined) =>
+    labels ? labels.map((label) => getTag(label)) : []
+
+  const toLabels = (tags?: string[] | null | undefined) =>
+    tags ? tags.map((tag) => getLabel(tag)) : []
+
+  return {
+    getTag,
+    getLabel,
+    isTag,
+    isLabel,
+    toTags,
+    toLabels,
+  }
+}
diff --git a/src/composables/getTopicTypeLabelGetter.ts b/src/composables/getTopicTypeLabelGetter.ts
@@ -0,0 +1,31 @@
+export const getTopicTypeLabelGetter = () => {
+  const constructList: [string, string][] = [
+    ['FEAT', 'TYP-FEAT'],
+    ['ANN', 'TYP-ANN'],
+    ['BUG', 'TYP-BUG'],
+    ['SUG', 'TYP-SUG'],
+  ]
+
+  const forwardMap = new Map(constructList)
+
+  const reverseMap = new Map(constructList.map(([key, value]) => [value, key]))
+
+  const getType = (label?: string | null | undefined) =>
+    reverseMap.get(label ?? '')
+
+  const getLabel = (type?: string | null | undefined) =>
+    forwardMap.get(type ?? '')
+
+  const isType = (type?: string | null | undefined) =>
+    forwardMap.has(type ?? '')
+
+  const isLabel = (label?: string | null | undefined) =>
+    reverseMap.has(label ?? '')
+
+  return {
+    getType,
+    getLabel,
+    isType,
+    isLabel,
+  }
+}
diff --git a/src/stores/useForumData.ts b/src/stores/useForumData.ts
@@ -4,7 +4,7 @@ import { useLoadMore } from '@/hooks/useLoadMore'
 import { useData } from 'vitepress'
 import { toast } from 'vue-sonner'
 import { defineStore } from 'pinia'
-import { isArray, uniqBy } from 'lodash-es'
+import { chain, isArray, uniqBy } from 'lodash-es'
 import { useRequest } from 'vue-request'
 import { watchOnce } from '@vueuse/core'
 import { useLocalized } from '@/hooks/useLocalized'
@@ -13,6 +13,13 @@ import { useUserAuthStore } from '@/stores/useUserAuth'
 
 import type ForumAPI from '@/apis/forum/api'
 import { executeWithAuth } from '~/composables/executeWithAuth'
+import { getTopicTypeLabelGetter } from '~/composables/getTopicTypeLabelGetter'
+import { getForumLocaleLabelGetter } from '~/composables/getForumLocaleGetter'
+import { getTopicTagLabelGetter } from '~/composables/getTopicTagLabelGetter'
+
+const typeLabelGetter = getTopicTypeLabelGetter()
+const localeLabelGetter = getForumLocaleLabelGetter()
+const topicLabelGetter = getTopicTagLabelGetter()
 
 const filterSet = new Set(['FEAT', 'BUG', 'ALL', 'SUG', 'CLOSED'])
 
@@ -66,10 +73,17 @@ export const useForumData = defineStore('forum-data', () => {
         current: pagination.page,
         sort: pagination.sort,
         pageSize: defaultPageSize,
-        filter: [
-          pagination.filter === 'ALL' ? 'WEB-FEEDBACK' : pagination.filter,
-          pagination.filter === 'CLOSED' ? 'WEB-FEEDBACK' : pagination.filter,
-        ],
+        filter: chain([
+          pagination.filter === 'ALL'
+            ? 'WEB-FEEDBACK'
+            : (typeLabelGetter.getLabel(pagination.filter) ?? ''),
+          pagination.filter === 'CLOSED'
+            ? 'WEB-FEEDBACK'
+            : (typeLabelGetter.getLabel(pagination.filter) ?? ''),
+        ])
+          .filter((v) => v !== '')
+          .uniq()
+          .value(),
       },
       pagination.filter === 'CLOSED' ? 'progressing' : 'open',
       q ? encodeURIComponent(String(q)) : undefined,
@@ -157,9 +171,9 @@ export const useForumData = defineStore('forum-data', () => {
         title: `${type}:${body.title}`,
         labels: [
           'WEB-FEEDBACK',
-          type,
-          lang.value.substring(0, 2).toUpperCase(),
-          ...body.tags,
+          typeLabelGetter.getLabel(type),
+          localeLabelGetter.getLabel(lang.value.substring(0, 2).toUpperCase()),
+          ...topicLabelGetter.toLabels(body.tags),
         ].join(','),
       })
     }