feat(kol): support multiple platform hints with shared tag renderer

Turn the KOL prompt platform hint into a multi-select backed by the
media platforms API, persist hints as a 、-joined string, and add a
reusable KolPlatformTags component so manage/generate/package/template/
workspace views and the generate-task drawer all render the hints
consistently with truncation and overflow handling.

Also auto-select the first available subscription prompt in
GenerateTaskDrawer when switching to the subscription-prompt target so
users land on a usable option without an extra click.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/admin-web/src/components/GenerateTaskDrawer.vue

@@ -22,6 +22,7 @@ import { useI18n } from 'vue-i18n'
 import CoverPickerModal from '@/components/CoverPickerModal.vue'
 import KnowledgeGroupSelect from '@/components/KnowledgeGroupSelect.vue'
 import KolDynamicForm from '@/components/kol/KolDynamicForm.vue'
+import KolPlatformTags from '@/components/kol/KolPlatformTags.vue'
 import PromptRuleModal from '@/components/PromptRuleModal.vue'
 import {
   generateApi,
@@ -254,10 +255,15 @@ watch(
       form.kolKnowledgeGroupIds = []
     } else {
       form.promptRuleId = undefined
+      selectDefaultSubscriptionPrompt()
     }
   },
 )
 
+watch(subscriptionPromptOptions, () => {
+  selectDefaultSubscriptionPrompt()
+})
+
 watch(
   () => form.scheduleKind,
   (kind) => {
@@ -372,6 +378,23 @@ function hydrateForm(): void {
     ? (parseCronTime(task.cron_expr) ??
       normalizeClock(task.random_window_start, randomDefaultScheduleTime()))
     : randomDefaultScheduleTime()
+  selectDefaultSubscriptionPrompt()
+}
+
+function selectDefaultSubscriptionPrompt(): void {
+  if (
+    !props.open ||
+    !isSchedule.value ||
+    props.task?.id ||
+    form.targetType !== 'kol_subscription_prompt' ||
+    form.subscriptionPromptId
+  ) {
+    return
+  }
+  const firstOption = subscriptionPromptOptions.value[0]
+  if (firstOption) {
+    form.subscriptionPromptId = firstOption.value
+  }
 }
 
 function buildSchedulePayload() {
@@ -824,9 +847,14 @@ function normalizeJsonRecord(value: Record<string, unknown>): Record<string, Jso
                 {{ selectedSubscriptionPrompt.kol_display_name }}
               </span>
             </div>
-            <a-tag v-if="selectedSubscriptionPrompt.platform_hint" color="cyan">
-              {{ selectedSubscriptionPrompt.platform_hint }}
-            </a-tag>
+            <KolPlatformTags
+              v-if="selectedSubscriptionPrompt.platform_hint"
+              :value="selectedSubscriptionPrompt.platform_hint"
+              :max="2"
+              size="small"
+              :wrap="false"
+              class="generate-task-drawer__target-platform"
+            />
           </div>
 
           <div
@@ -1281,6 +1309,11 @@ function normalizeJsonRecord(value: Record<string, unknown>): Record<string, Jso
   background: #fbfcff;
 }
 
+.generate-task-drawer__target-platform {
+  max-width: 180px;
+  justify-content: flex-end;
+}
+
 .generate-task-drawer__target-icon {
   display: inline-flex;
   align-items: center;

apps/admin-web/src/components/kol/KolPlatformTags.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { parseKolPlatformHints } from '@/lib/kol-platform-options'
+
+const props = withDefaults(
+  defineProps<{
+    value?: string | null
+    max?: number
+    size?: 'small' | 'default'
+    wrap?: boolean
+    truncate?: boolean
+  }>(),
+  {
+    max: 0,
+    size: 'default',
+    wrap: true,
+    truncate: true,
+  },
+)
+
+const labels = computed(() => parseKolPlatformHints(props.value))
+const visibleLabels = computed(() =>
+  props.max > 0 ? labels.value.slice(0, props.max) : labels.value,
+)
+const hiddenCount = computed(() => Math.max(labels.value.length - visibleLabels.value.length, 0))
+const title = computed(() => labels.value.join('、'))
+</script>
+
+<template>
+  <div
+    v-if="labels.length"
+    class="kol-platform-tags"
+    :class="[
+      `kol-platform-tags--${size}`,
+      {
+        'kol-platform-tags--nowrap': !wrap,
+        'kol-platform-tags--full': !truncate,
+      },
+    ]"
+    :title="title"
+  >
+    <span v-for="label in visibleLabels" :key="label" class="kol-platform-tags__item">
+      {{ label }}
+    </span>
+    <span v-if="hiddenCount" class="kol-platform-tags__item kol-platform-tags__item--more">
+      +{{ hiddenCount }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.kol-platform-tags {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-width: 0;
+  max-width: 100%;
+  line-height: 1;
+}
+
+.kol-platform-tags--nowrap {
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+
+.kol-platform-tags__item {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 108px;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid #bfdbfe;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #1d4ed8;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kol-platform-tags--small .kol-platform-tags__item {
+  max-width: 76px;
+  height: 20px;
+  padding: 0 6px;
+  line-height: 18px;
+}
+
+.kol-platform-tags--full .kol-platform-tags__item {
+  max-width: none;
+}
+
+.kol-platform-tags__item--more {
+  flex: 0 0 auto;
+  max-width: none;
+  border-color: #d1d5db;
+  background: #f9fafb;
+  color: #4b5563;
+}
+</style>

apps/admin-web/src/components/kol/KolPromptEditor.vue

@@ -12,7 +12,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch }
 import { useI18n } from 'vue-i18n'
 
 import EditorAiAssistPanel from '@/components/editor-common/EditorAiAssistPanel.vue'
-import { kolManageApi } from '@/lib/api'
+import { kolManageApi, mediaApi } from '@/lib/api'
 import { formatError } from '@/lib/errors'
 import { mergeKolCardConfig, parseKolCardConfig } from '@/lib/kol-card-config'
 import {
@@ -20,7 +20,13 @@ import {
   normalizeKolVariableDefinition,
   syncKolVariablesWithContent,
 } from '@/lib/kol-placeholders'
-import { buildKolPlatformOptions } from '@/lib/kol-platform-options'
+import {
+  buildKolPlatformOptions,
+  KOL_PLATFORM_HINT_DEFAULT,
+  normalizeKolPlatformHints,
+  parseKolPlatformHints,
+  serializeKolPlatformHints,
+} from '@/lib/kol-platform-options'
 import type {
   KolAssistRequest,
   KolAssistStreamEvent,
@@ -99,7 +105,7 @@ const variableConfigRef = ref<{
 } | null>(null)
 const metadataForm = reactive({
   name: '',
-  platform_hint: '通用',
+  platform_hints: [KOL_PLATFORM_HINT_DEFAULT] as string[],
   allow_web_search: false,
   allow_user_knowledge: true,
 })
@@ -113,14 +119,17 @@ const { data: promptDetail } = useQuery({
   queryFn: () => kolManageApi.getPrompt(props.promptId),
 })
 
-const platformOptions = computed(() => {
-  const options = buildKolPlatformOptions(t('kol.manage.platformHintDefault'))
-  const currentValue = metadataForm.platform_hint.trim()
-  if (currentValue && !options.some((option) => option.value === currentValue)) {
-    return [{ label: currentValue, value: currentValue }, ...options]
-  }
-  return options
+const platformsQuery = useQuery({
+  queryKey: ['media', 'platforms', 'kol-prompt-editor'],
+  queryFn: () => mediaApi.platforms(),
 })
+const platformOptions = computed(() =>
+  buildKolPlatformOptions(
+    t('kol.manage.platformHintDefault'),
+    platformsQuery.data.value ?? [],
+    metadataForm.platform_hints,
+  ),
+)
 const selectionAiStreaming = computed(() => selectionAiStatus.value === 'generating')
 const selectionAiHasPreview = computed(() => selectionAiPreview.value.trim().length > 0)
 const selectionAiUiText = computed(() => ({
@@ -142,7 +151,9 @@ watch(
       const parsedCardConfig = parseKolCardConfig(nextCardConfig)
 
       metadataForm.name = detail.name
-      metadataForm.platform_hint = detail.platform_hint || '通用'
+      metadataForm.platform_hints = parseKolPlatformHints(
+        detail.platform_hint || KOL_PLATFORM_HINT_DEFAULT,
+      )
       metadataForm.allow_web_search = parsedCardConfig.allow_web_search
       metadataForm.allow_user_knowledge = parsedCardConfig.allow_user_knowledge
       content.value = detail.latest_prompt_content ?? ''
@@ -442,7 +453,7 @@ function applySelectionAiReplacement() {
 function buildPromptPayload(nextVariables: KolVariableDefinition[] = variables.value) {
   return {
     name: metadataForm.name.trim(),
-    platform_hint: metadataForm.platform_hint,
+    platform_hint: serializeKolPlatformHints(metadataForm.platform_hints),
     sort_order: promptDetail.value?.sort_order,
     content: content.value,
     schema: { variables: nextVariables },
@@ -526,6 +537,10 @@ function handlePreview() {
   previewOpen.value = true
 }
 
+function handlePlatformHintChange(values: string[]) {
+  metadataForm.platform_hints = normalizeKolPlatformHints(values)
+}
+
 async function handleFocusVariable(key: string) {
   syncVariablesFromContent()
   await nextTick()
@@ -642,11 +657,14 @@ onBeforeUnmount(() => {
 
         <a-form-item :label="t('kol.manage.platformHint')">
           <a-select
-            v-model:value="metadataForm.platform_hint"
+            :value="metadataForm.platform_hints"
             :options="platformOptions"
             option-filter-prop="label"
+            mode="multiple"
             show-search
+            :loading="platformsQuery.isPending.value"
             :get-popup-container="getSelectPopupContainer"
+            @change="handlePlatformHintChange"
           />
         </a-form-item>
 

apps/admin-web/src/components/kol/KolPromptFormModal.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import { buildKolPlatformOptions } from '@/lib/kol-platform-options'
+import { useQuery } from '@tanstack/vue-query'
 import type { CreateKolPromptRequest } from '@geo/shared-types'
 import { computed, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { mediaApi } from '@/lib/api'
+import {
+  buildKolPlatformOptions,
+  KOL_PLATFORM_HINT_DEFAULT,
+  normalizeKolPlatformHints,
+  serializeKolPlatformHints,
+} from '@/lib/kol-platform-options'
+
 const props = defineProps<{
   open: boolean
   packageId: number
@@ -18,24 +26,47 @@ const { t } = useI18n()
 
 const formState = reactive<CreateKolPromptRequest>({
   name: '',
-  platform_hint: '通用',
+  platform_hint: KOL_PLATFORM_HINT_DEFAULT,
+})
+const platformHints = reactive<{ values: string[] }>({
+  values: [KOL_PLATFORM_HINT_DEFAULT],
 })
 
-const platformOptions = computed(() => buildKolPlatformOptions(t('kol.manage.platformHintDefault')))
+const platformsQuery = useQuery({
+  queryKey: ['media', 'platforms', 'kol-prompt-form'],
+  enabled: computed(() => props.open),
+  queryFn: () => mediaApi.platforms(),
+})
+
+const platformOptions = computed(() =>
+  buildKolPlatformOptions(
+    t('kol.manage.platformHintDefault'),
+    platformsQuery.data.value ?? [],
+    platformHints.values,
+  ),
+)
 
 watch(
   () => props.open,
   (isOpen) => {
     if (isOpen) {
       formState.name = ''
-      formState.platform_hint = '通用'
+      formState.platform_hint = KOL_PLATFORM_HINT_DEFAULT
+      platformHints.values = [KOL_PLATFORM_HINT_DEFAULT]
     }
   },
 )
 
+function handlePlatformChange(values: string[]) {
+  platformHints.values = normalizeKolPlatformHints(values)
+}
+
 function handleOk() {
   if (!formState.name.trim()) return
-  emit('submit', { ...formState })
+  emit('submit', {
+    ...formState,
+    platform_hint: serializeKolPlatformHints(platformHints.values),
+  })
   emit('update:open', false)
 }
 
@@ -57,12 +88,14 @@ function getSelectPopupContainer(triggerNode: HTMLElement) {
 
       <a-form-item :label="t('kol.manage.platformHint')">
         <a-select
-          v-model:value="formState.platform_hint"
+          :value="platformHints.values"
           :options="platformOptions"
           option-filter-prop="label"
+          mode="multiple"
           show-search
+          :loading="platformsQuery.isPending.value"
           :get-popup-container="getSelectPopupContainer"
-          @change="(val: string) => (formState.platform_hint = val)"
+          @change="handlePlatformChange"
         />
       </a-form-item>
     </a-form>