fix: improve question selection handling and user interaction feedback

apps/admin-web/src/views/TrackingView.vue

@@ -128,13 +128,21 @@ let questionSelectionSeq = 0
 selectedPlatformId.value = normalizeMonitoringPlatformFilter(selectedPlatformId.value)
 selectedCitationWindowDays.value = normalizeCitationWindowDays(selectedCitationWindowDays.value)
 
-const selectedQuestionSetOptionValue = computed<string | number>({
-  get: () => selectedQuestionId.value ?? allQuestionOptionValue,
-  set: (value) => {
-    selectedQuestionId.value =
+const isUserQuestionSelectionPending = ref(false)
+const selectedQuestionSetOptionValue = computed<string | number>(
+  () => selectedQuestionId.value ?? allQuestionOptionValue,
+)
+
+function handleQuestionSetChange(value: string | number): void {
+  const nextQuestionId =
     typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : null
-  },
-})
+  if (selectedQuestionId.value === nextQuestionId) {
+    return
+  }
+  questionSelectionSeq += 1
+  isUserQuestionSelectionPending.value = true
+  selectedQuestionId.value = nextQuestionId
+}
 
 const selectedBrandId = computed(() => companyStore.currentBrandId)
 const selectedBrand = computed(() => companyStore.currentBrand)
@@ -147,11 +155,11 @@ const questionList = usePaginatedBrandQuestions(selectedBrandId, {
 const questionSetOptions = computed(() => questionList.options.value)
 
 watch(
-  [selectedBrandId, () => route.query.question_id, selectedQuestionId],
-  async ([brandId, requestedQuestionValue, questionId]) => {
+  [selectedBrandId, () => route.query.question_id],
+  async ([brandId, requestedQuestionValue]) => {
     const requestedQuestionId = parseNumericQuery(requestedQuestionValue)
-    const targetQuestionId = requestedQuestionId ?? questionId
-    if (!brandId || !targetQuestionId) {
+    if (!brandId || !requestedQuestionId) {
+      questionSelectionSeq += 1
       missingRequestedQuestionId.value = null
       return
     }
@@ -165,20 +173,47 @@ watch(
       missingRequestedQuestionId.value = null
     }
 
-    const question = await questionList.ensureQuestionLoadedById(targetQuestionId)
+    const question = await questionList.ensureQuestionLoadedById(requestedQuestionId)
     if (seq !== questionSelectionSeq || brandId !== selectedBrandId.value) {
       return
     }
 
     if (question) {
-      selectedQuestionId.value = targetQuestionId
+      selectedQuestionId.value = requestedQuestionId
       return
     }
 
-    if (requestedQuestionId === targetQuestionId) {
-      missingRequestedQuestionId.value = targetQuestionId
+    missingRequestedQuestionId.value = requestedQuestionId
+    if (selectedQuestionId.value === requestedQuestionId) {
+      selectedQuestionId.value = null
     }
-    if (selectedQuestionId.value === targetQuestionId) {
+  },
+  { immediate: true },
+)
+
+watch(
+  [selectedBrandId, selectedQuestionId],
+  async ([brandId, questionId]) => {
+    if (!brandId || !questionId) {
+      return
+    }
+
+    const requestedQuestionId = parseNumericQuery(route.query.question_id)
+    if (requestedQuestionId && requestedQuestionId !== questionId) {
+      return
+    }
+
+    const seq = ++questionSelectionSeq
+    const question = await questionList.ensureQuestionLoadedById(questionId)
+    if (
+      seq !== questionSelectionSeq ||
+      brandId !== selectedBrandId.value ||
+      selectedQuestionId.value !== questionId
+    ) {
+      return
+    }
+
+    if (!question) {
       selectedQuestionId.value = null
     }
   },
@@ -238,7 +273,8 @@ watch(
     if (
       requestedQuestionId &&
       questionId !== requestedQuestionId &&
-      missingQuestionId !== requestedQuestionId
+      missingQuestionId !== requestedQuestionId &&
+      !isUserQuestionSelectionPending.value
     ) {
       return
     }
@@ -261,10 +297,12 @@ watch(
       currentBusinessDate === nextBusinessDate &&
       !hasLegacyCitationDaysQuery
     ) {
+      isUserQuestionSelectionPending.value = false
       return
     }
 
-    void router.replace({
+    void router
+      .replace({
         name: 'tracking',
         query: {
           ...(nextBrandId ? { brand_id: nextBrandId } : {}),
@@ -273,6 +311,9 @@ watch(
           business_date: nextBusinessDate,
         },
       })
+      .finally(() => {
+        isUserQuestionSelectionPending.value = false
+      })
   },
 )
 
@@ -936,7 +977,7 @@ function disableTrackingDate(current: dayjs.Dayjs): boolean {
           <div class="tracking-action-item">
             <span class="tracking-action-label">关键词库（搜索词）</span>
             <a-select
-              v-model:value="selectedQuestionSetOptionValue"
+              :value="selectedQuestionSetOptionValue"
               show-search
               class="tracking-select tracking-keyword-select"
               popup-class-name="tracking-keyword-select-dropdown"
@@ -948,6 +989,7 @@ function disableTrackingDate(current: dayjs.Dayjs): boolean {
               "
               :placeholder="t('tracking.keywordPlaceholder')"
               :options="questionSetOptions"
+              @change="handleQuestionSetChange"
               @search="questionList.search"
               @popup-scroll="questionList.handlePopupScroll"
             />