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>

apps/admin-web/src/lib/kol-platform-options.ts

@@ -1,13 +1,51 @@
-import { aiPlatformCatalog } from '@geo/shared-types'
+import type { MediaPlatform } from '@geo/shared-types'
 
 export interface KolPlatformOption {
   label: string
   value: string
+  disabled?: boolean
 }
 
-export function buildKolPlatformOptions(defaultLabel: string): KolPlatformOption[] {
-  return [
+export const KOL_PLATFORM_HINT_DEFAULT = '通用'
+
+export function buildKolPlatformOptions(
+  defaultLabel: string,
+  platforms: MediaPlatform[] = [],
+  selectedValues: string[] = [],
+): KolPlatformOption[] {
+  const defaultSelected = selectedValues.includes(KOL_PLATFORM_HINT_DEFAULT)
+  const options = [
     { label: defaultLabel, value: '通用' },
-    ...aiPlatformCatalog.map((item) => ({ label: item.label, value: item.id })),
+    ...platforms.map((item) => ({
+      label: item.name,
+      value: item.name,
+      disabled: defaultSelected,
+    })),
   ]
+  const knownValues = new Set(options.map((item) => item.value))
+  const customOptions = normalizeKolPlatformHints(selectedValues)
+    .filter((value) => !knownValues.has(value))
+    .map((value) => ({ label: value, value }))
+
+  return [...customOptions, ...options]
+}
+
+export function parseKolPlatformHints(value?: string | null): string[] {
+  return normalizeKolPlatformHints(String(value ?? '').split(/[、,，;\n]+/))
+}
+
+export function normalizeKolPlatformHints(values?: Array<string | null | undefined>): string[] {
+  const next = Array.from(
+    new Set((values ?? []).map((item) => String(item ?? '').trim()).filter(Boolean)),
+  )
+
+  if (next.includes(KOL_PLATFORM_HINT_DEFAULT)) {
+    return [KOL_PLATFORM_HINT_DEFAULT]
+  }
+
+  return next
+}
+
+export function serializeKolPlatformHints(values?: Array<string | null | undefined>): string {
+  return normalizeKolPlatformHints(values).join('、')
 }

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import KnowledgeGroupSelect from '@/components/KnowledgeGroupSelect.vue'
 import KolDynamicForm from '@/components/kol/KolDynamicForm.vue'
+import KolPlatformTags from '@/components/kol/KolPlatformTags.vue'
 import { kolGenerateApi } from '@/lib/api'
 import { formatError } from '@/lib/errors'
 import { parseKolCardConfig } from '@/lib/kol-card-config'
@@ -150,10 +151,14 @@ function handleSubmit() {
               {{ schema.package_name }}
               <span class="divider">/</span>
               {{ schema.prompt_name }}
-              <a-tag v-if="schema.platform_hint" color="cyan" class="platform-badge">
-                {{ schema.platform_hint }}
-              </a-tag>
             </h2>
+            <KolPlatformTags
+              v-if="schema.platform_hint"
+              :value="schema.platform_hint"
+              size="small"
+              :truncate="false"
+              class="platform-badge"
+            />
             <p class="header-eyebrow">{{ t('kol.generate.fillVariables') }}</p>
           </div>
         </div>
@@ -268,7 +273,7 @@ function handleSubmit() {
 }
 
 .platform-badge {
-  margin-left: 8px;
+  margin-top: 2px;
 }
 
 .header-eyebrow {

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

@@ -16,6 +16,7 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import KolPackageFormModal from '@/components/kol/KolPackageFormModal.vue'
+import KolPlatformTags from '@/components/kol/KolPlatformTags.vue'
 import KolPromptEditor from '@/components/kol/KolPromptEditor.vue'
 import KolPromptFormModal from '@/components/kol/KolPromptFormModal.vue'
 import { kolManageApi } from '@/lib/api'
@@ -400,9 +401,11 @@ function canCancelSelfSubscription(pkg: KolPackageSummary) {
           >
             <template #bodyCell="{ column, record }">
               <template v-if="column.key === 'platform_hint'">
-                <a-tag color="blue">
-                  {{ record.platform_hint || t('kol.manage.platformHintDefault') }}
-                </a-tag>
+                <KolPlatformTags
+                  :value="record.platform_hint || t('kol.manage.platformHintDefault')"
+                  :max="3"
+                  size="small"
+                />
               </template>
               <template v-else-if="column.key === 'status'">
                 <a-tag

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import KolPlatformTags from '@/components/kol/KolPlatformTags.vue'
 import { kolMarketplaceApi, resolveApiURL } from '@/lib/api'
 import { formatError } from '@/lib/errors'
 import {
@@ -158,9 +159,12 @@ function goBack() {
               <div v-for="prompt in pkg.prompts" :key="prompt.id" class="prompt-item">
                 <div class="prompt-info">
                   <span class="prompt-name">{{ prompt.name }}</span>
-                  <a-tag v-if="prompt.platform_hint" color="cyan" size="small">
-                    {{ prompt.platform_hint }}
-                  </a-tag>
+                  <KolPlatformTags
+                    v-if="prompt.platform_hint"
+                    :value="prompt.platform_hint"
+                    :max="4"
+                    size="small"
+                  />
                 </div>
                 <div class="prompt-action">
                   <a-tooltip :title="subscription?.status !== 'active' ? '订阅后可用' : ''">

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

@@ -30,6 +30,7 @@ import ArticleDetailDrawer from '@/components/ArticleDetailDrawer.vue'
 import ArticleGenerateStatus from '@/components/ArticleGenerateStatus.vue'
 import ArticlePublishStatus from '@/components/ArticlePublishStatus.vue'
 import ArticleSourceMeta from '@/components/ArticleSourceMeta.vue'
+import KolPlatformTags from '@/components/kol/KolPlatformTags.vue'
 import PublishArticleModal from '@/components/PublishArticleModal.vue'
 import { articlesApi, templatesApi, workspaceApi } from '@/lib/api'
 import { buildArticleClipboardContent, resolveArticleActionState } from '@/lib/article-list-actions'
@@ -826,9 +827,14 @@ function refreshRecords(): void {
                   </div>
                   <span>{{ card.kol_display_name }}</span>
                 </div>
-                <div v-if="card.platform_hint" class="templates-view__kol-platform">
-                  {{ card.platform_hint }}
-                </div>
+                <KolPlatformTags
+                  v-if="card.platform_hint"
+                  :value="card.platform_hint"
+                  :max="2"
+                  size="small"
+                  :wrap="false"
+                  class="templates-view__kol-platform"
+                />
               </div>
             </div>
           </article>
@@ -1457,6 +1463,7 @@ function refreshRecords(): void {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 12px;
   margin-top: 16px;
   padding-top: 12px;
   border-top: 1px solid #f3f4f6;
@@ -1466,12 +1473,22 @@ function refreshRecords(): void {
   display: flex;
   align-items: center;
   gap: 6px;
+  min-width: 0;
+  flex: 1 1 auto;
   font-size: 12px;
   color: #374151;
   font-weight: 500;
 }
 
+.templates-view__kol-author span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .templates-view__author-avatar {
+  flex: 0 0 auto;
   width: 20px;
   height: 20px;
   border-radius: 50%;
@@ -1485,13 +1502,9 @@ function refreshRecords(): void {
 }
 
 .templates-view__kol-platform {
-  background: #eff6ff;
-  color: #2563eb;
-  font-size: 11px;
-  font-weight: 500;
-  padding: 2px 8px;
-  border-radius: 6px;
-  white-space: nowrap;
+  flex: 0 1 auto;
+  max-width: 54%;
+  justify-content: flex-end;
 }
 
 @media (max-width: 1200px) {

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

@@ -25,6 +25,7 @@ import ArticleDetailDrawer from '@/components/ArticleDetailDrawer.vue'
 import ArticleGenerateStatus from '@/components/ArticleGenerateStatus.vue'
 import ArticlePublishStatus from '@/components/ArticlePublishStatus.vue'
 import ArticleSourceMeta from '@/components/ArticleSourceMeta.vue'
+import KolPlatformTags from '@/components/kol/KolPlatformTags.vue'
 import PublishArticleModal from '@/components/PublishArticleModal.vue'
 import { articlesApi, tenantAccountsApi, workspaceApi } from '@/lib/api'
 import { buildArticleClipboardContent, resolveArticleActionState } from '@/lib/article-list-actions'
@@ -440,9 +441,14 @@ function stopRecentArticlesPolling(): void {
                 </div>
                 <span>{{ card.kol_display_name }}</span>
               </div>
-              <div v-if="card.platform_hint" class="kol-card-platform">
-                {{ card.platform_hint }}
-              </div>
+              <KolPlatformTags
+                v-if="card.platform_hint"
+                :value="card.platform_hint"
+                :max="2"
+                size="small"
+                :wrap="false"
+                class="kol-card-platform"
+              />
             </div>
           </div>
         </div>
@@ -952,6 +958,7 @@ function stopRecentArticlesPolling(): void {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 12px;
   margin-top: 16px;
   padding-top: 12px;
   border-top: 1px solid #f3f4f6;
@@ -961,12 +968,22 @@ function stopRecentArticlesPolling(): void {
   display: flex;
   align-items: center;
   gap: 6px;
+  min-width: 0;
+  flex: 1 1 auto;
   font-size: 12px;
   color: #374151;
   font-weight: 500;
 }
 
+.kol-card-author span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .author-avatar {
+  flex: 0 0 auto;
   width: 20px;
   height: 20px;
   border-radius: 50%;
@@ -980,13 +997,9 @@ function stopRecentArticlesPolling(): void {
 }
 
 .kol-card-platform {
-  background: #eff6ff;
-  color: #2563eb;
-  font-size: 11px;
-  font-weight: 500;
-  padding: 2px 8px;
-  border-radius: 6px;
-  white-space: nowrap;
+  flex: 0 1 auto;
+  max-width: 54%;
+  justify-content: flex-end;
 }
 
 @media (max-width: 1200px) {