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/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) {