feat(media-supply): add media resource supply marketplace

Introduce an end-to-end media-supply feature: tenant-side resource sync
service/worker backed by a Meijiequan supplier client, ops-side management
APIs, and admin/ops web views for resources, orders, favorites and
submission. Adds a shared digitocr helper, MediaSupply config blocks for
tenant and ops, shared types, and migrations for supplier media resources,
price overrides, customer visibility and order refunds.

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

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

@@ -108,14 +108,19 @@ import {
   type RichImageAlign,
 } from '@/lib/milkdown/richImageBlock'
 
-const props = defineProps<{
-  articleId: number
+const props = withDefaults(defineProps<{
+  articleId?: number | null
   title: string
   modelValue: string
   disabled?: boolean
+  toolbar?: boolean
+  aiOptimizeEnabled?: boolean
   complianceViolations?: ComplianceViolation[]
   uploadImage?: (file: File) => Promise<string>
-}>()
+}>(), {
+  toolbar: true,
+  aiOptimizeEnabled: true,
+})
 
 const emit = defineEmits<{
   'update:title': [value: string]
@@ -532,6 +537,9 @@ function createCrepe(root: HTMLElement): Crepe {
     featureConfigs: {
       [CrepeFeature.Toolbar]: {
         buildToolbar: (builder) => {
+          if (!canUseAiOptimize.value) {
+            return
+          }
           builder.addGroup('ai-optimize', 'AI Optimize').addItem('ai-optimize', {
             icon: AI_OPTIMIZE_TOOLBAR_ICON,
             active: () => false,
@@ -604,6 +612,13 @@ let aiOptimizeIgnoreNextWindowPointerDown = false
 const EDITOR_ACTION_MENU_DROPDOWN_SELECTOR = '.editor-action-menu__dropdown-overlay'
 
 const tableContextHeaderRow = computed(() => tableContextMenu.value.rowIndex === 0)
+const showEditorToolbar = computed(() => props.toolbar !== false)
+const canUseAiOptimize = computed(
+  () =>
+    props.aiOptimizeEnabled !== false &&
+    Number.isInteger(props.articleId) &&
+    Number(props.articleId) > 0,
+)
 const aiOptimizeStreaming = computed(() => aiOptimizeStatus.value === 'generating')
 const aiOptimizeHasPreview = computed(() => aiOptimizePreview.value.trim().length > 0)
 const aiOptimizeUiText = computed(() => ({
@@ -1354,7 +1369,7 @@ function resolveAiOptimizePanelFrame(anchorRect: DOMRect): {
 }
 
 function openAiOptimizePanel(ctx: Ctx): void {
-  if (editorDisabled.value) {
+  if (editorDisabled.value || !canUseAiOptimize.value) {
     return
   }
 
@@ -1434,7 +1449,7 @@ function handleAiOptimizeStreamEvent(event: ArticleSelectionOptimizeStreamEvent)
 }
 
 async function generateAiOptimizePreview(): Promise<void> {
-  if (!aiOptimizePanel.value.open || editorDisabled.value) {
+  if (!canUseAiOptimize.value || !aiOptimizePanel.value.open || editorDisabled.value) {
     return
   }
 
@@ -1454,7 +1469,7 @@ async function generateAiOptimizePreview(): Promise<void> {
 
   try {
     await streamArticleSelectionOptimize(
-      props.articleId,
+      Number(props.articleId),
       {
         title: props.title,
         markdown_content: props.modelValue,
@@ -2259,7 +2274,7 @@ function runTableContextAction(action: TableContextMenuAction): void {
       'article-editor-canvas--ai-optimize-open': aiOptimizePanel.open,
     }"
   >
-    <div class="article-editor-canvas__toolbar">
+    <div v-if="showEditorToolbar" class="article-editor-canvas__toolbar">
       <a-button size="small" type="text" @click="runCommand(undoCommand)">
         <template #icon><IconFont type="icon-Undo" /></template>
       </a-button>
@@ -2385,7 +2400,7 @@ function runTableContextAction(action: TableContextMenuAction): void {
     />
 
     <EditorAiAssistPanel
-      v-if="aiOptimizePanel.open"
+      v-if="canUseAiOptimize && aiOptimizePanel.open"
       v-model:prompt="aiOptimizeInstruction"
       :x="aiOptimizePanel.x"
       :y="aiOptimizePanel.y"
@@ -2417,7 +2432,7 @@ function runTableContextAction(action: TableContextMenuAction): void {
 
     <CoverPickerModal
       v-model:open="imagePickerOpen"
-      :article-id="articleId"
+      :article-id="articleId ?? null"
       :platform-ids="[]"
       :current-url="imagePickerCurrentUrl"
       :current-asset-id="imagePickerCurrentAssetId"

apps/admin-web/src/i18n/messages/en-US.ts

@@ -90,6 +90,10 @@ const enUS = {
     kolManage: 'Prompt Management',
     kolDashboard: 'Dashboard',
     kolProfile: 'Profile',
+    authorityMedia: 'Authority News Media',
+    mediaSupplyResources: 'Single Submission Media',
+    mediaSupplyOrders: 'Submission Records',
+    mediaSupplyFavorites: 'Frequent Media',
     personalCenter: 'Personal Center',
     aiPointUsage: 'AI Point Usage',
   },
@@ -230,6 +234,22 @@ const enUS = {
       description:
         'Review desktop publish tasks, external links, account workbench entry points, and retry state.',
     },
+    mediaSupplyResources: {
+      title: 'Single Submission Media',
+      description: 'Filter authority news media resources and submit articles.',
+    },
+    mediaSupplySubmit: {
+      title: 'Submit Article',
+      description: 'Confirm media resources, choose article content, and queue the submission.',
+    },
+    mediaSupplyOrders: {
+      title: 'Submission Records',
+      description: 'Review submission orders and billing state for the current account.',
+    },
+    mediaSupplyFavorites: {
+      title: 'Frequent Media Groups',
+      description: 'Group the media resources you submit to most often.',
+    },
     brands: {
       title: 'Company & Lexicon',
       description: 'Manage the keyword library (search terms) and competitors around each brand.',

apps/admin-web/src/i18n/messages/zh-CN.ts

@@ -91,6 +91,10 @@ const zhCN = {
     kolManage: "提示词管理",
     kolDashboard: "数据看板",
     kolProfile: "个人主页",
+    authorityMedia: "权威新闻媒体",
+    mediaSupplyResources: "单条发布媒体",
+    mediaSupplyOrders: "投稿记录",
+    mediaSupplyFavorites: "常发媒体",
     personalCenter: "个人中心",
     aiPointUsage: "AI 点数明细",
   },
@@ -221,6 +225,22 @@ const zhCN = {
       title: "发文管理",
       description: "查看桌面端发布任务、外链、账号工作台入口和发布结果。",
     },
+    mediaSupplyResources: {
+      title: "单条发布媒体",
+      description: "筛选权威新闻媒体资源并提交稿件。",
+    },
+    mediaSupplySubmit: {
+      title: "提交投稿",
+      description: "确认投稿媒体、选择稿件并提交到投稿队列。",
+    },
+    mediaSupplyOrders: {
+      title: "投稿记录",
+      description: "查看当前账号提交的媒体投稿订单和扣款状态。",
+    },
+    mediaSupplyFavorites: {
+      title: "常发媒体分组",
+      description: "把经常投稿的媒体放到这里分组管理。",
+    },
     brands: {
       title: "品牌和词库",
       description: "围绕品牌维护关键词库（搜索词）和竞品信息。",

apps/admin-web/src/layouts/AppShell.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
   AppstoreOutlined,
+  BankOutlined,
   BarChartOutlined,
   CopyOutlined,
   DatabaseOutlined,
@@ -384,6 +385,15 @@ const navSections = computed<NavSection[]>(() => {
         { key: '/images', label: t('nav.images'), icon: PictureOutlined },
       ],
     },
+    {
+      key: 'authorityMedia',
+      title: t('nav.authorityMedia'),
+      items: [
+        { key: '/media-supply/resources', label: t('nav.mediaSupplyResources'), icon: BankOutlined },
+        { key: '/media-supply/orders', label: t('nav.mediaSupplyOrders'), icon: SendOutlined },
+        { key: '/media-supply/favorites', label: t('nav.mediaSupplyFavorites'), icon: TagsOutlined },
+      ],
+    },
     {
       key: 'kolMarket',
       title: t('nav.kolMarket'),

apps/admin-web/src/lib/api.ts

@@ -12,6 +12,8 @@ import type {
   BrandLibrarySummary,
   BrandRequest,
   ChangePasswordRequest,
+  ClassifiedQuestion,
+  ClassifyQuestionsRequest,
   Competitor,
   CompetitorRequest,
   ComplianceAckRecord,
@@ -24,6 +26,8 @@ import type {
   CreateArticleRequest,
   CreateKolPackageRequest,
   CreateKolPromptRequest,
+  CreateMediaSupplyOrderRequest,
+  CreateMediaSupplyOrderResponse,
   CreatePluginSessionRequest,
   CreatePluginSessionResponse,
   CreatePublishBatchRequest,
@@ -70,18 +74,28 @@ import type {
   KolSubscriptionPromptCard,
   KolSubscriptionPromptSchema,
   KolWorkspaceCard,
+  ListCustomerSupplierMediaResourcesResponse,
   ListDesktopPublishTasksParams,
+  ListMediaSupplyOrdersParams,
+  ListMediaSupplyOrdersResponse,
+  ListMediaSupplyWalletLedgersParams,
+  ListMediaSupplyWalletLedgersResponse,
+  ListSupplierMediaResourcesParams,
   LoginRequest,
   LoginResponse,
   MaterializeQuestionsRequest,
   MaterializeQuestionsResult,
   MediaPlatform,
+  MediaSupplyOrderDetail,
+  MediaSupplySearchOptionsResponse,
+  MediaSupplySessionStatus,
+  MediaSupplyWalletStatus,
   MonitoringCitationSummaryResponse,
   MonitoringCollectNowResponse,
   MonitoringDashboardCompositeResponse,
   MonitoringQuestionDetailResponse,
-  PlatformAccount,
   PasswordPublicKeyResponse,
+  PlatformAccount,
   PromptRule,
   PromptRuleGroup,
   PromptRuleGroupRequest,
@@ -110,6 +124,7 @@ import type {
   ScheduleTaskListResponse,
   ScheduleTaskRequest,
   ScheduleTaskStatusRequest,
+  SyncMediaSupplyBacklinksResponse,
   TemplateAnalyzeTaskRequest,
   TemplateAnalyzeTaskResultResponse,
   TemplateAssistTaskCreateResponse,
@@ -131,10 +146,9 @@ import type {
   UpdateQuestionRequest,
   UserInfo,
   WorkspaceOverview,
-  ClassifyQuestionsRequest,
-  ClassifiedQuestion,
 } from '@geo/shared-types'
 
+import { readStoredCurrentBrandId } from './current-brand'
 import {
   convertImageFileToWebp,
   markImageUploadRequestFailed,
@@ -149,7 +163,6 @@ import {
   readStoredSession,
   setStoredTokens,
 } from './session'
-import { readStoredCurrentBrandId } from './current-brand'
 
 const rawBaseURL = import.meta.env.VITE_API_BASE_URL ?? ''
 const baseURL = normalizeApiBaseURL(rawBaseURL)
@@ -323,6 +336,7 @@ const currentBrandScopedPathPatterns = [
   /^\/api\/tenant\/instant-tasks(?:\/|$)/,
   /^\/api\/tenant\/publish-jobs(?:\/|$)/,
   /^\/api\/tenant\/publish-tasks\/[^/]+\/retry(?:\/|$)/,
+  /^\/api\/tenant\/media-supply\/orders(?:\/|$)/,
   /^\/api\/tenant\/prompt-rules(?:\/|$)/,
 ]
 
@@ -1204,6 +1218,61 @@ export const mediaApi = {
   },
 }
 
+export const mediaSupplyApi = {
+  listResources(params: ListSupplierMediaResourcesParams = {}) {
+    return apiClient.get<ListCustomerSupplierMediaResourcesResponse>(
+      '/api/tenant/media-supply/resources',
+      {
+        params,
+      },
+    )
+  },
+  listResourcesByIds(ids: number[], modelId?: number) {
+    return apiClient.get<ListCustomerSupplierMediaResourcesResponse>(
+      '/api/tenant/media-supply/resources/by-ids',
+      { params: { ids: ids.join(','), model_id: modelId } },
+    )
+  },
+  searchOptions(modelId?: number) {
+    return apiClient.get<MediaSupplySearchOptionsResponse>(
+      '/api/tenant/media-supply/resources/search-options',
+      { params: { model_id: modelId } },
+    )
+  },
+  createOrder(payload: CreateMediaSupplyOrderRequest) {
+    return apiClient.post<CreateMediaSupplyOrderResponse, CreateMediaSupplyOrderRequest>(
+      '/api/tenant/media-supply/orders',
+      payload,
+    )
+  },
+  listOrders(params: ListMediaSupplyOrdersParams = {}) {
+    return apiClient.get<ListMediaSupplyOrdersResponse>('/api/tenant/media-supply/orders', {
+      params,
+    })
+  },
+  getOrder(id: number) {
+    return apiClient.get<MediaSupplyOrderDetail>(`/api/tenant/media-supply/orders/${id}`)
+  },
+  syncBacklinks() {
+    return apiClient.post<SyncMediaSupplyBacklinksResponse, Record<string, never>>(
+      '/api/tenant/media-supply/orders/sync-backlinks',
+      {},
+    )
+  },
+  wallet() {
+    return apiClient.get<MediaSupplyWalletStatus>('/api/tenant/media-supply/wallet')
+  },
+  listWalletLedgers(params: ListMediaSupplyWalletLedgersParams = {}) {
+    return apiClient.get<ListMediaSupplyWalletLedgersResponse>(
+      '/api/tenant/media-supply/wallet/ledgers',
+      { params },
+    )
+  },
+  sessionStatus() {
+    return apiClient.get<MediaSupplySessionStatus>('/api/tenant/media-supply/supplier-session')
+  },
+}
+
 export const tenantAccountsApi = {
   list() {
     return apiClient.get<DesktopAccountInfo[]>('/api/tenant/accounts')

apps/admin-web/src/lib/errors.ts

@@ -35,6 +35,53 @@ const errorMessageMap: Record<string, string> = {
   quota_insufficient: '生成额度不足',
   ai_points_insufficient: 'AI 点数余额不足',
   ai_points_unavailable: 'AI 点数服务暂不可用，请稍后重试',
+  invalid_media_supply_model: '不支持的媒体资源类型',
+  invalid_media_supply_price: '媒体售价参数不正确',
+  invalid_media_supply_resource: '媒体资源参数不正确',
+  media_supply_balance_insufficient: '媒体投稿余额不足',
+  media_supply_admin_required: '需要管理员权限',
+  media_supply_store_unavailable: '媒体投稿服务暂不可用',
+  media_supply_resource_count_failed: '媒体资源统计失败',
+  media_supply_resource_query_failed: '媒体资源读取失败',
+  media_supply_resource_scan_failed: '媒体资源解析失败',
+  media_supply_resource_lookup_failed: '媒体资源读取失败',
+  media_supply_resource_not_found: '媒体资源不存在或已下架',
+  media_supply_sync_queue_failed: '媒体资源同步排队失败',
+  media_supply_price_update_failed: '媒体价格更新失败',
+  media_supply_price_below_cost: '媒体售价不能低于成本价',
+  media_supply_visibility_update_failed: '媒体展示状态更新失败',
+  media_supply_order_items_required: '请至少选择一个媒体资源',
+  media_supply_order_items_too_many: '一次投稿选择的媒体资源过多',
+  media_supply_order_title_required: '请输入投稿标题',
+  media_supply_order_content_required: '请输入投稿内容',
+  media_supply_order_begin_failed: '媒体投稿创建失败',
+  media_supply_order_create_failed: '媒体投稿创建失败',
+  media_supply_order_item_create_failed: '媒体投稿明细创建失败',
+  media_supply_order_commit_failed: '媒体投稿创建失败',
+  media_supply_order_count_failed: '媒体投稿订单统计失败',
+  media_supply_order_query_failed: '媒体投稿订单读取失败',
+  media_supply_order_scan_failed: '媒体投稿订单解析失败',
+  media_supply_order_not_found: '媒体投稿订单不存在',
+  media_supply_order_item_query_failed: '媒体投稿明细读取失败',
+  media_supply_order_item_scan_failed: '媒体投稿明细解析失败',
+  media_supply_cost_missing: '部分媒体资源成本价缺失，请联系管理员处理',
+  media_supply_wallet_prepare_failed: '媒体投稿余额初始化失败',
+  media_supply_wallet_lookup_failed: '媒体投稿余额读取失败',
+  media_supply_wallet_update_failed: '媒体投稿余额更新失败',
+  media_supply_wallet_begin_failed: '媒体投稿余额调整失败',
+  media_supply_wallet_commit_failed: '媒体投稿余额调整失败',
+  media_supply_wallet_ledger_count_failed: '媒体投稿账单统计失败',
+  media_supply_wallet_ledger_query_failed: '媒体投稿账单读取失败',
+  media_supply_wallet_ledger_scan_failed: '媒体投稿账单解析失败',
+  media_supply_wallet_ledger_create_failed: '媒体投稿账单创建失败',
+  media_supply_wallet_user_lookup_failed: '媒体投稿余额用户校验失败',
+  media_supply_wallet_user_not_found: '用户不存在或不属于当前租户',
+  invalid_media_supply_wallet_user: '用户参数不正确',
+  invalid_media_supply_wallet_delta: '调整金额不能为 0',
+  media_supply_credentials_required: '媒体供应商账号未配置，请联系管理员处理',
+  media_supply_session_required: '媒体供应商登录状态已失效，请联系管理员处理',
+  media_supply_challenge_required: '媒体供应商登录验证失败，请联系管理员处理',
+  media_supply_request_failed: '媒体供应商请求失败，请稍后重试或联系管理员',
   trial_plan_expired: '免费试用已到期，请联系管理员开通',
   subscription_required: '当前租户尚未开通有效套餐，请联系管理员',
   subscription_inactive: '当前租户套餐已失效，请联系管理员',
@@ -144,17 +191,44 @@ const TIMEOUT_MESSAGE_PATTERN = /^timeout of \d+ms exceeded$/i
 const VALIDATION_MIN_SEED_TOPIC_PATTERN =
   /QuestionDistillRequest\.SeedTopic|seed_topic.*min|SeedTopic.*min/i
 
+const LEGACY_MEDIA_SUPPLY_REFRESH_PATTERN =
+  /^failed to refresh supplier price(?: for \d+ selected resources?)?$/i
+const LEGACY_MEDIA_SUPPLY_LOCKED_COST_PATTERN =
+  /^supplier cost increased above locked sell price/i
+
 function translateRawErrorMessage(raw: string): string | null {
-  const mapped = errorMessageMap[raw]
+  const normalized = raw.trim()
+  const mapped = errorMessageMap[normalized]
   if (mapped) {
     return mapped
   }
-  if (TIMEOUT_MESSAGE_PATTERN.test(raw)) {
+  if (TIMEOUT_MESSAGE_PATTERN.test(normalized)) {
     return errorMessageMap.request_timeout
   }
+  if (LEGACY_MEDIA_SUPPLY_REFRESH_PATTERN.test(normalized)) {
+    return '媒体资源价格刷新失败，请稍后重试或重新选择媒体'
+  }
+  if (LEGACY_MEDIA_SUPPLY_LOCKED_COST_PATTERN.test(normalized)) {
+    return '媒体成本价已变化，当前锁定价格低于成本，请重新提交'
+  }
+  const lower = normalized.toLowerCase()
+  const hiddenSupplierToken = ['mei', 'jie', 'quan'].join('')
+  if (lower.includes(hiddenSupplierToken)) {
+    return '媒体供应商请求失败，请稍后重试或联系管理员'
+  }
+  if (lower.includes('supplier') || lower.includes('failed to')) {
+    return '媒体投稿失败，请稍后重试或联系管理员'
+  }
   return null
 }
 
+export function formatStoredErrorMessage(message?: string | null): string {
+  if (!message) {
+    return ''
+  }
+  return translateRawErrorMessage(message) ?? message
+}
+
 export function formatError(error: unknown): string {
   if (isHandledAuthError(error)) {
     return '登录已过期，请重新登录'

apps/admin-web/src/lib/media-supply-favorites.ts

@@ -0,0 +1,246 @@
+export interface MediaSupplyFavoriteResourceSnapshot {
+  id: number
+  supplier_resource_id?: string | null
+  name: string
+  status?: string | null
+  sell_price_cents?: number | null
+  resource_url?: string | null
+  baidu_weight?: number | null
+  resource_remark?: string | null
+  channel_type?: string | null
+  region?: string | null
+  inclusion_effect?: string | null
+  link_type?: string | null
+  publish_rate?: string | null
+  delivery_speed?: string | null
+  last_synced_at?: string | null
+}
+
+export type MediaSupplyFavoriteResourceInput = Partial<MediaSupplyFavoriteResourceSnapshot> & {
+  id: number
+}
+
+export interface MediaSupplyFavoriteGroup {
+  id: string
+  name: string
+  resourceIds: number[]
+  resources: MediaSupplyFavoriteResourceSnapshot[]
+  updatedAt: string
+}
+
+function storageKey(userId?: number | null): string {
+  return `media_supply_favorite_groups:${userId || 'anonymous'}`
+}
+
+function defaultGroup(): MediaSupplyFavoriteGroup {
+  return {
+    id: 'default',
+    name: '默认分组',
+    resourceIds: [],
+    resources: [],
+    updatedAt: new Date().toISOString(),
+  }
+}
+
+export function loadMediaSupplyFavoriteGroups(userId?: number | null): MediaSupplyFavoriteGroup[] {
+  if (typeof window === 'undefined') {
+    return [defaultGroup()]
+  }
+  try {
+    const parsed = JSON.parse(window.localStorage.getItem(storageKey(userId)) || '[]') as unknown
+    if (!Array.isArray(parsed)) {
+      return [defaultGroup()]
+    }
+    const groups = parsed
+      .map((item) => normalizeGroup(item))
+      .filter((item): item is MediaSupplyFavoriteGroup => Boolean(item))
+    return groups.length > 0 ? groups : [defaultGroup()]
+  } catch {
+    return [defaultGroup()]
+  }
+}
+
+export function saveMediaSupplyFavoriteGroups(
+  userId: number | null | undefined,
+  groups: MediaSupplyFavoriteGroup[],
+): void {
+  if (typeof window === 'undefined') {
+    return
+  }
+  window.localStorage.setItem(storageKey(userId), JSON.stringify(groups))
+}
+
+export function toggleMediaSupplyFavorite(
+  groups: MediaSupplyFavoriteGroup[],
+  resourceId: number,
+  groupId = 'default',
+  resource?: MediaSupplyFavoriteResourceInput,
+): MediaSupplyFavoriteGroup[] {
+  const now = new Date().toISOString()
+  const next = groups.length > 0 ? [...groups] : [defaultGroup()]
+  const index = next.findIndex((group) => group.id === groupId)
+  if (index < 0) {
+    next.push({
+      id: groupId,
+      name: '默认分组',
+      resourceIds: [resourceId],
+      resources: compactResourceSnapshots(
+        [],
+        resource ? { ...resource, id: resourceId } : undefined,
+      ),
+      updatedAt: now,
+    })
+    return next
+  }
+  const group = next[index]
+  const exists = group.resourceIds.includes(resourceId)
+  next[index] = {
+    ...group,
+    resourceIds: exists
+      ? group.resourceIds.filter((id) => id !== resourceId)
+      : [...group.resourceIds, resourceId],
+    resources: exists
+      ? group.resources.filter((item) => item.id !== resourceId)
+      : compactResourceSnapshots(
+          group.resources,
+          resource ? { ...resource, id: resourceId } : undefined,
+        ),
+    updatedAt: now,
+  }
+  return next
+}
+
+export function removeMediaSupplyFavorite(
+  groups: MediaSupplyFavoriteGroup[],
+  resourceId: number,
+): MediaSupplyFavoriteGroup[] {
+  const now = new Date().toISOString()
+  return (groups.length > 0 ? groups : [defaultGroup()]).map((group) => {
+    if (!group.resourceIds.includes(resourceId)) {
+      return group
+    }
+    return {
+      ...group,
+      resourceIds: group.resourceIds.filter((id) => id !== resourceId),
+      resources: group.resources.filter((item) => item.id !== resourceId),
+      updatedAt: now,
+    }
+  })
+}
+
+export function mergeMediaSupplyFavoriteResourceSnapshots(
+  groups: MediaSupplyFavoriteGroup[],
+  resources: MediaSupplyFavoriteResourceInput[],
+): MediaSupplyFavoriteGroup[] {
+  const snapshots = resources
+    .map((resource) => normalizeResourceSnapshot(resource))
+    .filter((resource): resource is MediaSupplyFavoriteResourceSnapshot => Boolean(resource))
+  if (snapshots.length === 0) {
+    return groups
+  }
+  const snapshotById = new Map(snapshots.map((resource) => [resource.id, resource]))
+  return groups.map((group) => {
+    let changed = false
+    const resources = group.resourceIds
+      .map((resourceId) => {
+        const fresh = snapshotById.get(resourceId)
+        if (fresh) {
+          changed = true
+          return fresh
+        }
+        return group.resources.find((resource) => resource.id === resourceId)
+      })
+      .filter((resource): resource is MediaSupplyFavoriteResourceSnapshot => Boolean(resource))
+
+    if (!changed) {
+      return group
+    }
+
+    return {
+      ...group,
+      resources,
+    }
+  })
+}
+
+function normalizeGroup(value: unknown): MediaSupplyFavoriteGroup | null {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return null
+  }
+  const record = value as Record<string, unknown>
+  const id = typeof record.id === 'string' && record.id.trim() ? record.id.trim() : ''
+  const name = typeof record.name === 'string' && record.name.trim() ? record.name.trim() : ''
+  if (!id || !name) {
+    return null
+  }
+  const normalizedResources = Array.isArray(record.resources)
+    ? record.resources
+        .map((item) => normalizeResourceSnapshot(item))
+        .filter((item): item is MediaSupplyFavoriteResourceSnapshot => Boolean(item))
+    : []
+  const resourceIds = Array.isArray(record.resourceIds)
+    ? record.resourceIds
+        .map((item) => (typeof item === 'number' ? item : Number(item)))
+        .filter((item) => Number.isFinite(item) && item > 0)
+    : []
+  const mergedResourceIds = [
+    ...new Set([...resourceIds, ...normalizedResources.map((resource) => resource.id)]),
+  ]
+  const resources = normalizedResources.filter((resource) =>
+    mergedResourceIds.includes(resource.id),
+  )
+  const updatedAt =
+    typeof record.updatedAt === 'string' && record.updatedAt.trim()
+      ? record.updatedAt
+      : new Date().toISOString()
+  return { id, name, resourceIds: mergedResourceIds, resources, updatedAt }
+}
+
+function compactResourceSnapshots(
+  resources: MediaSupplyFavoriteResourceSnapshot[],
+  resource?: MediaSupplyFavoriteResourceInput,
+): MediaSupplyFavoriteResourceSnapshot[] {
+  const snapshot = resource ? normalizeResourceSnapshot(resource) : null
+  if (!snapshot) {
+    return resources
+  }
+  return [...resources.filter((item) => item.id !== snapshot.id), snapshot]
+}
+
+function normalizeResourceSnapshot(value: unknown): MediaSupplyFavoriteResourceSnapshot | null {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return null
+  }
+  const record = value as Record<string, unknown>
+  const id = typeof record.id === 'number' ? record.id : Number(record.id)
+  if (!Number.isInteger(id) || id <= 0) {
+    return null
+  }
+  const name = textValue(record.name) || `媒体 #${id}`
+  return {
+    id,
+    supplier_resource_id: textValue(record.supplier_resource_id),
+    name,
+    status: textValue(record.status),
+    sell_price_cents: numberValue(record.sell_price_cents),
+    resource_url: textValue(record.resource_url),
+    baidu_weight: numberValue(record.baidu_weight),
+    resource_remark: textValue(record.resource_remark),
+    channel_type: textValue(record.channel_type),
+    region: textValue(record.region),
+    inclusion_effect: textValue(record.inclusion_effect),
+    link_type: textValue(record.link_type),
+    publish_rate: textValue(record.publish_rate),
+    delivery_speed: textValue(record.delivery_speed),
+    last_synced_at: textValue(record.last_synced_at),
+  }
+}
+
+function textValue(value: unknown): string | null {
+  return typeof value === 'string' && value.trim() ? value.trim() : null
+}
+
+function numberValue(value: unknown): number | null {
+  const numeric = typeof value === 'number' ? value : Number(value)
+  return Number.isFinite(numeric) ? numeric : null
+}

apps/admin-web/src/lib/media-supply-submit-selection.ts

@@ -0,0 +1,90 @@
+const STORAGE_KEY = 'geo:media-supply:submit-selection:v1'
+const STORAGE_TTL_MS = 1000 * 60 * 60 * 6
+
+export interface MediaSupplySubmitResourceSnapshot {
+  id: number
+  supplier_resource_id: string
+  name: string
+  sell_price_cents: number
+  resource_url?: string | null
+  baidu_weight?: number | null
+  resource_remark?: string | null
+  channel_type?: string | null
+  region?: string | null
+  inclusion_effect?: string | null
+  link_type?: string | null
+  publish_rate?: string | null
+  delivery_speed?: string | null
+}
+
+interface MediaSupplySubmitSelectionEnvelope {
+  createdAt: number
+  resources: MediaSupplySubmitResourceSnapshot[]
+}
+
+export function saveMediaSupplySubmitSelection(
+  resources: MediaSupplySubmitResourceSnapshot[],
+): void {
+  if (typeof window === 'undefined') {
+    return
+  }
+  const normalized = resources
+    .map((resource) => ({
+      ...resource,
+      id: Number(resource.id),
+      sell_price_cents: Number(resource.sell_price_cents),
+    }))
+    .filter(
+      (resource) =>
+        Number.isInteger(resource.id) &&
+        resource.id > 0 &&
+        Number.isFinite(resource.sell_price_cents),
+    )
+
+  window.sessionStorage.setItem(
+    STORAGE_KEY,
+    JSON.stringify({
+      createdAt: Date.now(),
+      resources: normalized,
+    } satisfies MediaSupplySubmitSelectionEnvelope),
+  )
+}
+
+export function loadMediaSupplySubmitSelection(): MediaSupplySubmitResourceSnapshot[] {
+  if (typeof window === 'undefined') {
+    return []
+  }
+
+  const raw = window.sessionStorage.getItem(STORAGE_KEY)
+  if (!raw) {
+    return []
+  }
+
+  try {
+    const envelope = JSON.parse(raw) as Partial<MediaSupplySubmitSelectionEnvelope>
+    const createdAt = Number(envelope.createdAt)
+    if (!Number.isFinite(createdAt) || Date.now() - createdAt > STORAGE_TTL_MS) {
+      clearMediaSupplySubmitSelection()
+      return []
+    }
+    if (!Array.isArray(envelope.resources)) {
+      return []
+    }
+    return envelope.resources.filter(
+      (resource) =>
+        Number.isInteger(resource.id) &&
+        resource.id > 0 &&
+        Number.isFinite(resource.sell_price_cents),
+    )
+  } catch {
+    clearMediaSupplySubmitSelection()
+    return []
+  }
+}
+
+export function clearMediaSupplySubmitSelection(): void {
+  if (typeof window === 'undefined') {
+    return
+  }
+  window.sessionStorage.removeItem(STORAGE_KEY)
+}

apps/admin-web/src/main.ts

@@ -32,6 +32,7 @@ import {
   Result,
   Row,
   Select,
+  Segmented,
   Skeleton,
   Slider,
   Space,
@@ -140,6 +141,7 @@ app.component('IconFont', IconFont)
   Result,
   Row,
   Select,
+  Segmented,
   Skeleton,
   Space,
   Spin,

apps/admin-web/src/router/index.ts

@@ -169,6 +169,46 @@ const router = createRouter({
             navKey: '/publish-management',
           },
         },
+        {
+          path: 'media-supply/resources',
+          name: 'media-supply-resources',
+          component: () => import('@/views/MediaSupplyResourcesView.vue'),
+          meta: {
+            titleKey: 'route.mediaSupplyResources.title',
+            descriptionKey: 'route.mediaSupplyResources.description',
+            navKey: '/media-supply/resources',
+          },
+        },
+        {
+          path: 'media-supply/submit',
+          name: 'media-supply-submit',
+          component: () => import('@/views/MediaSupplySubmitView.vue'),
+          meta: {
+            titleKey: 'route.mediaSupplySubmit.title',
+            descriptionKey: 'route.mediaSupplySubmit.description',
+            navKey: '/media-supply/resources',
+          },
+        },
+        {
+          path: 'media-supply/orders',
+          name: 'media-supply-orders',
+          component: () => import('@/views/MediaSupplyOrdersView.vue'),
+          meta: {
+            titleKey: 'route.mediaSupplyOrders.title',
+            descriptionKey: 'route.mediaSupplyOrders.description',
+            navKey: '/media-supply/orders',
+          },
+        },
+        {
+          path: 'media-supply/favorites',
+          name: 'media-supply-favorites',
+          component: () => import('@/views/MediaSupplyFavoritesView.vue'),
+          meta: {
+            titleKey: 'route.mediaSupplyFavorites.title',
+            descriptionKey: 'route.mediaSupplyFavorites.description',
+            navKey: '/media-supply/favorites',
+          },
+        },
         {
           path: 'brands',
           name: 'brands',

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

@@ -0,0 +1,972 @@
+<script setup lang="ts">
+import {
+  BankOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  SendOutlined,
+} from '@ant-design/icons-vue'
+import { useQuery } from '@tanstack/vue-query'
+import { message } from 'ant-design-vue'
+import { computed, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { mediaSupplyApi } from '@/lib/api'
+import { formatDateTime } from '@/lib/display'
+import {
+  loadMediaSupplyFavoriteGroups,
+  mergeMediaSupplyFavoriteResourceSnapshots,
+  removeMediaSupplyFavorite,
+  saveMediaSupplyFavoriteGroups,
+  type MediaSupplyFavoriteGroup,
+  type MediaSupplyFavoriteResourceSnapshot,
+} from '@/lib/media-supply-favorites'
+import { saveMediaSupplySubmitSelection } from '@/lib/media-supply-submit-selection'
+import { useAuthStore } from '@/stores/auth'
+
+const MODEL_ID_AUTHORITY_NEWS = 1
+
+const authStore = useAuthStore()
+const router = useRouter()
+const groups = ref<MediaSupplyFavoriteGroup[]>(loadMediaSupplyFavoriteGroups(authStore.user?.id))
+const groupName = ref('')
+const createGroupModalOpen = ref(false)
+const activeGroupId = ref(groups.value[0]?.id || 'default')
+
+const totalResources = computed(() =>
+  groups.value.reduce((sum, group) => sum + group.resourceIds.length, 0),
+)
+const allResourceIds = computed(() => [
+  ...new Set(groups.value.flatMap((group) => group.resourceIds)),
+])
+const activeGroup = computed(
+  () => groups.value.find((group) => group.id === activeGroupId.value) || groups.value[0],
+)
+const resourcesById = computed(() => {
+  const map = new Map<number, MediaSupplyFavoriteResourceSnapshot>()
+  for (const group of groups.value) {
+    for (const resource of group.resources) {
+      map.set(resource.id, resource)
+    }
+  }
+  return map
+})
+const activeResources = computed(() => {
+  const group = activeGroup.value
+  if (!group) {
+    return []
+  }
+  return group.resourceIds.map((resourceId) => resourceForId(group, resourceId))
+})
+
+const resourceDetailsQuery = useQuery({
+  queryKey: computed(() => ['media-supply', 'favorite-resources', allResourceIds.value.join(',')]),
+  queryFn: () => mediaSupplyApi.listResourcesByIds(allResourceIds.value, MODEL_ID_AUTHORITY_NEWS),
+  enabled: computed(() => allResourceIds.value.length > 0),
+})
+
+const walletQuery = useQuery({
+  queryKey: ['media-supply', 'wallet'],
+  queryFn: () => mediaSupplyApi.wallet(),
+})
+
+watch(
+  () => authStore.user?.id,
+  (userId) => {
+    groups.value = loadMediaSupplyFavoriteGroups(userId)
+    activeGroupId.value = groups.value[0]?.id || 'default'
+  },
+)
+
+watch(
+  () => resourceDetailsQuery.data.value?.items,
+  (items) => {
+    if (!items?.length) {
+      return
+    }
+    groups.value = mergeMediaSupplyFavoriteResourceSnapshots(groups.value, items)
+    persist()
+  },
+)
+
+function refresh(): void {
+  groups.value = loadMediaSupplyFavoriteGroups(authStore.user?.id)
+  if (!groups.value.some((group) => group.id === activeGroupId.value)) {
+    activeGroupId.value = groups.value[0]?.id || 'default'
+  }
+  void resourceDetailsQuery.refetch()
+}
+
+function persist(): void {
+  saveMediaSupplyFavoriteGroups(authStore.user?.id, groups.value)
+}
+
+function openCreateGroup(): void {
+  if (groupName.value.trim()) {
+    createGroup()
+    return
+  }
+  createGroupModalOpen.value = true
+}
+
+function createGroup(): void {
+  const name = groupName.value.trim()
+  if (!name) {
+    message.warning('请输入分组名称')
+    return
+  }
+  if (groups.value.some((group) => group.name.trim() === name)) {
+    message.warning('分组名称已存在')
+    return
+  }
+  const id = `group_${Date.now()}`
+  groups.value = [
+    ...groups.value,
+    {
+      id,
+      name,
+      resourceIds: [],
+      resources: [],
+      updatedAt: new Date().toISOString(),
+    },
+  ]
+  activeGroupId.value = id
+  groupName.value = ''
+  createGroupModalOpen.value = false
+  persist()
+  message.success('常发分组已创建')
+}
+
+function removeGroup(groupId: string): void {
+  groups.value = groups.value.filter((group) => group.id !== groupId)
+  if (groups.value.length === 0) {
+    groups.value = loadMediaSupplyFavoriteGroups(authStore.user?.id)
+  }
+  activeGroupId.value = groups.value[0]?.id || 'default'
+  persist()
+}
+
+function removeResource(groupId: string, resourceId: number): void {
+  groups.value = removeMediaSupplyFavoriteForGroup(groups.value, groupId, resourceId)
+  persist()
+  message.success('已移出常发分组')
+}
+
+async function goSubmitPage(resource: MediaSupplyFavoriteResourceSnapshot): Promise<void> {
+  if (!resource.sell_price_cents && resource.sell_price_cents !== 0) {
+    message.warning('媒体详情未同步，请刷新后再投稿')
+    return
+  }
+  const refreshedWallet = await walletQuery.refetch()
+  const latestBalance =
+    refreshedWallet.data?.balance_cents ?? walletQuery.data.value?.balance_cents ?? 0
+  if (latestBalance < resource.sell_price_cents) {
+    message.warning('媒体投稿余额不足')
+    return
+  }
+  saveMediaSupplySubmitSelection([
+    {
+      id: resource.id,
+      supplier_resource_id: resource.supplier_resource_id || '',
+      name: resource.name,
+      sell_price_cents: resource.sell_price_cents,
+      resource_url: resource.resource_url,
+      baidu_weight: resource.baidu_weight,
+      resource_remark: resource.resource_remark,
+      channel_type: resource.channel_type,
+      region: resource.region,
+      inclusion_effect: resource.inclusion_effect,
+      link_type: resource.link_type,
+      publish_rate: resource.publish_rate,
+      delivery_speed: resource.delivery_speed,
+    },
+  ])
+  void router.push({ name: 'media-supply-submit' })
+}
+
+function removeMediaSupplyFavoriteForGroup(
+  currentGroups: MediaSupplyFavoriteGroup[],
+  groupId: string,
+  resourceId: number,
+): MediaSupplyFavoriteGroup[] {
+  return currentGroups.map((group) =>
+    group.id === groupId ? removeMediaSupplyFavorite([group], resourceId)[0] || group : group,
+  )
+}
+
+function resourceForId(
+  group: MediaSupplyFavoriteGroup,
+  resourceId: number,
+): MediaSupplyFavoriteResourceSnapshot {
+  return (
+    group.resources.find((resource) => resource.id === resourceId) ||
+    resourcesById.value.get(resourceId) || {
+      id: resourceId,
+      name: `媒体 #${resourceId}`,
+    }
+  )
+}
+
+function formatMoney(cents?: number | null): string {
+  if (typeof cents !== 'number' || !Number.isFinite(cents)) {
+    return '--'
+  }
+  return `￥${(cents / 100).toFixed(2)}`
+}
+
+function formatSellPrice(cents?: number | null): string {
+  if (typeof cents !== 'number' || !Number.isFinite(cents)) {
+    return '--'
+  }
+  return `￥${Math.ceil(cents / 100)}`
+}
+
+function displayValue(value?: string | number | null): string {
+  if (typeof value === 'number') {
+    return String(value)
+  }
+  return value?.trim() || '--'
+}
+
+function isValidUrl(value?: string | null): boolean {
+  if (!value) {
+    return false
+  }
+  return /^https?:\/\//i.test(value.trim())
+}
+</script>
+
+<template>
+  <div class="frequent-page">
+    <section class="frequent-toolbar">
+      <div class="frequent-toolbar__summary">
+        <div class="summary-metric-card">
+          <span>分组</span>
+          <strong>{{ groups.length }}</strong>
+        </div>
+        <div class="summary-metric-card">
+          <span>常发媒体</span>
+          <strong>{{ totalResources }}</strong>
+        </div>
+      </div>
+
+      <div class="frequent-toolbar__actions">
+        <a-input
+          v-model:value="groupName"
+          placeholder="新建常发分组名称"
+          class="frequent-toolbar__input"
+          @press-enter="createGroup"
+        >
+          <template #prefix><PlusOutlined style="color: #98a2b3" /></template>
+        </a-input>
+        <button type="button" class="toolbar-btn-ok" @click="openCreateGroup">新建分组</button>
+        <button type="button" class="toolbar-btn-refresh" @click="refresh">
+          <ReloadOutlined :class="{ 'refresh-spinning': resourceDetailsQuery.isFetching.value }" />
+          刷新
+        </button>
+      </div>
+    </section>
+
+    <section class="frequent-layout">
+      <aside class="group-list">
+        <button
+          v-for="group in groups"
+          :key="group.id"
+          type="button"
+          class="group-item"
+          :class="{ 'group-item--active': activeGroup?.id === group.id }"
+          @click="activeGroupId = group.id"
+        >
+          <span>{{ group.name }}</span>
+          <strong>{{ group.resourceIds.length }}</strong>
+        </button>
+      </aside>
+
+      <section class="group-panel">
+        <header v-if="activeGroup" class="group-panel__header">
+          <div>
+            <p>常发媒体分组</p>
+            <h2>{{ activeGroup.name }}</h2>
+            <span>
+              {{ activeGroup.resourceIds.length }} 个媒体 ·
+              {{ formatDateTime(activeGroup.updatedAt) }}
+            </span>
+          </div>
+          <button
+            v-if="activeGroup.id !== 'default'"
+            type="button"
+            class="delete-group-btn"
+            @click="removeGroup(activeGroup.id)"
+          >
+            <DeleteOutlined />
+            删除分组
+          </button>
+        </header>
+
+        <div v-if="activeResources.length > 0" class="resource-list">
+          <article v-for="resource in activeResources" :key="resource.id" class="resource-card">
+            <div class="resource-card__main">
+              <span class="resource-icon"><BankOutlined /></span>
+              <div class="resource-card__content">
+                <a
+                  v-if="isValidUrl(resource.resource_url)"
+                  :href="resource.resource_url || undefined"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="resource-name"
+                >
+                  {{ resource.name }}
+                </a>
+                <strong v-else class="resource-name">{{ resource.name }}</strong>
+                <div class="resource-meta">
+                  <span>{{ displayValue(resource.channel_type) }}</span>
+                  <span>{{ displayValue(resource.region) }}</span>
+                  <span
+                    class="resource-meta--weight"
+                    v-if="resource.baidu_weight !== null && resource.baidu_weight !== undefined"
+                  >
+                    百度 {{ displayValue(resource.baidu_weight) }}
+                  </span>
+                  <span>{{ displayValue(resource.delivery_speed) }}</span>
+                </div>
+                <p>{{ displayValue(resource.resource_remark) }}</p>
+              </div>
+            </div>
+
+            <div class="resource-card__side">
+              <strong>{{ formatSellPrice(resource.sell_price_cents) }}</strong>
+              <span class="resource-id-text">
+                ID: {{ resource.supplier_resource_id || `#${resource.id}` }}
+              </span>
+              <div>
+                <button type="button" class="card-btn-submit" @click="goSubmitPage(resource)">
+                  <SendOutlined />
+                  投稿
+                </button>
+                <button
+                  type="button"
+                  class="card-btn-remove"
+                  @click="activeGroup && removeResource(activeGroup.id, resource.id)"
+                >
+                  移出
+                </button>
+              </div>
+            </div>
+          </article>
+        </div>
+        <a-empty v-else description="还没有常发媒体" />
+      </section>
+    </section>
+
+    <a-modal v-model:open="createGroupModalOpen" title="新建常发分组" width="400px">
+      <div class="create-group-modal-body">
+        <label class="create-group-modal-label">分组名称</label>
+        <a-input
+          v-model:value="groupName"
+          placeholder="请输入分组名称"
+          autofocus
+          @press-enter="createGroup"
+        />
+      </div>
+      <template #footer>
+        <div class="favorite-modal-footer">
+          <button type="button" class="modal-btn-cancel" @click="createGroupModalOpen = false">
+            取消
+          </button>
+          <button type="button" class="modal-btn-ok" @click="createGroup">确认创建</button>
+        </div>
+      </template>
+    </a-modal>
+  </div>
+</template>
+
+<style scoped>
+.frequent-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.frequent-toolbar,
+.group-list,
+.group-panel {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+}
+
+.frequent-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
+}
+
+.frequent-toolbar__summary {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.summary-metric-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 130px;
+  height: 60px;
+  padding: 0 16px;
+  background: linear-gradient(180deg, #fcfdff 0%, #f8fafc 100%);
+  border: 1px solid #e2e8f0;
+  border-left: 4px solid #ff1831;
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+}
+
+.summary-metric-card span {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.summary-metric-card strong {
+  color: #0f172a;
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 1.2;
+  font-variant-numeric: tabular-nums;
+}
+
+.frequent-toolbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.frequent-toolbar__input {
+  width: 240px;
+}
+
+.frequent-toolbar__input :deep(.ant-input-affine-wrapper) {
+  border-radius: 6px !important;
+  border-color: #d0d5dd !important;
+  height: 36px !important;
+  padding: 4px 11px !important;
+  transition: all 0.2s ease !important;
+}
+
+.frequent-toolbar__input :deep(.ant-input-affine-wrapper:hover),
+.frequent-toolbar__input :deep(.ant-input-affine-wrapper-focused) {
+  border-color: #ff1831 !important;
+}
+
+.frequent-toolbar__input :deep(.ant-input-affine-wrapper-focused) {
+  box-shadow: 0 0 0 3px rgba(255, 24, 49, 0.12) !important;
+}
+
+.toolbar-btn-ok {
+  height: 36px;
+  padding: 0 16px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, #ff1831, #ff5c6e);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 2px rgba(255, 24, 49, 0.05);
+}
+
+.toolbar-btn-ok:hover {
+  background: linear-gradient(135deg, #e5152b, #e55256);
+  transform: translateY(-0.5px);
+  box-shadow: 0 4px 8px rgba(255, 24, 49, 0.15);
+}
+
+.toolbar-btn-ok:active {
+  transform: translateY(0);
+}
+
+.toolbar-btn-refresh {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 14px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #475467;
+  background: #fff;
+  border: 1px solid #d0d5dd;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.toolbar-btn-refresh:hover {
+  background: #f9fafb;
+  color: #1d2939;
+  border-color: #98a2b3;
+}
+
+.refresh-spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.frequent-layout {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 16px;
+}
+
+.group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  align-self: start;
+}
+
+.group-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  min-height: 40px;
+  padding: 0 12px;
+  color: #475467;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+  font-weight: 500;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.group-item:hover {
+  background: #f8fafc;
+  color: #0f172a;
+}
+
+.group-item--active {
+  color: #ff1831 !important;
+  background: #fff4f4 !important;
+  font-weight: 700 !important;
+}
+
+.group-item--active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 4px;
+  background: #ff1831;
+  border-radius: 0 4px 4px 0;
+}
+
+.group-item span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.group-item strong {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748b;
+  background: #f1f5f9;
+  border-radius: 10px;
+  font-variant-numeric: tabular-nums;
+  transition: all 0.2s ease;
+}
+
+.group-item--active strong {
+  color: #ff1831;
+  background: #ffebeb;
+}
+
+.group-panel {
+  min-width: 0;
+  padding: 20px;
+}
+
+.group-panel__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.group-panel__header p {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  background: #fff4f4;
+  color: #ff1831;
+  font-size: 11px;
+  font-weight: 700;
+  border-radius: 4px;
+  margin: 0 0 6px;
+  letter-spacing: 0.5px;
+}
+
+.group-panel__header h2 {
+  margin: 0 0 4px;
+  color: #0f172a;
+  font-size: 22px;
+  font-weight: 800;
+}
+
+.group-panel__header span {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.delete-group-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #64748b;
+  background: transparent;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.delete-group-btn:hover {
+  color: #ef4444;
+  border-color: #fecaca;
+  background: #fef2f2;
+}
+
+.resource-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.resource-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 188px;
+  gap: 16px;
+  padding: 16px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+  transition: all 0.2s ease;
+}
+
+.resource-card:hover {
+  border-color: #ffccd1;
+  box-shadow: 0 4px 12px rgba(255, 24, 49, 0.05);
+  transform: translateY(-1px);
+}
+
+.resource-card__main {
+  display: flex;
+  gap: 14px;
+  min-width: 0;
+}
+
+.resource-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 36px;
+  height: 36px;
+  color: #ff1831;
+  background: #fff4f4;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.resource-card__content {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.resource-name {
+  display: block;
+  overflow: hidden;
+  color: #1e293b;
+  font-size: 16px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.4;
+}
+
+a.resource-name {
+  color: #ff1831;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+a.resource-name:hover {
+  color: #d41327;
+  text-decoration: underline;
+}
+
+.resource-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.resource-meta span {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  color: #475467;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.resource-meta .resource-meta--weight {
+  color: #2f8fff;
+  background: #eef6ff;
+  border-color: #d0e5ff;
+}
+
+.resource-card p {
+  margin: 10px 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.resource-card__side {
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+}
+
+.resource-card__side strong {
+  color: #ff1831;
+  font-size: 20px;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+}
+
+.resource-id-text {
+  color: #64748b;
+  font-size: 11px;
+  font-family: monospace;
+}
+
+.resource-card__side div {
+  display: flex;
+  gap: 8px;
+}
+
+.card-btn-submit {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, #ff1831, #ff5c6e);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.card-btn-submit:hover {
+  background: linear-gradient(135deg, #e5152b, #e55256);
+  transform: translateY(-0.5px);
+  box-shadow: 0 2px 6px rgba(255, 24, 49, 0.15);
+}
+
+.card-btn-submit:active {
+  transform: translateY(0);
+}
+
+.card-btn-remove {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #ef4444;
+  background: #fff;
+  border: 1px solid #fecaca;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.card-btn-remove:hover {
+  color: #dc2626;
+  background: #fef2f2;
+  border-color: #fee2e2;
+}
+
+/* Modal styling overrides */
+.create-group-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 0 4px;
+}
+
+.create-group-modal-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #344054;
+}
+
+.create-group-modal-body :deep(.ant-input) {
+  border-radius: 6px !important;
+  border-color: #d0d5dd !important;
+  height: 36px !important;
+  transition: all 0.2s ease !important;
+}
+
+.create-group-modal-body :deep(.ant-input:hover),
+.create-group-modal-body :deep(.ant-input:focus) {
+  border-color: #ff1831 !important;
+}
+
+.create-group-modal-body :deep(.ant-input:focus) {
+  box-shadow: 0 0 0 3px rgba(255, 24, 49, 0.12) !important;
+}
+
+.favorite-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.modal-btn-cancel {
+  min-height: 32px;
+  padding: 0 16px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #475467;
+  background: #fff;
+  border: 1px solid #d0d5dd;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.modal-btn-cancel:hover {
+  background: #f9fafb;
+  color: #1d2939;
+  border-color: #98a2b3;
+}
+
+.modal-btn-ok {
+  min-height: 32px;
+  padding: 0 18px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, #ff1831, #ff5c6e);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 2px rgba(255, 24, 49, 0.05);
+}
+
+.modal-btn-ok:hover {
+  background: linear-gradient(135deg, #e5152b, #e55256);
+  transform: translateY(-0.5px);
+  box-shadow: 0 4px 8px rgba(255, 24, 49, 0.15);
+}
+
+.modal-btn-ok:active {
+  transform: translateY(0);
+}
+
+@media (max-width: 960px) {
+  .frequent-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .group-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .frequent-toolbar,
+  .frequent-toolbar__actions,
+  .group-panel__header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .frequent-toolbar__summary {
+    justify-content: space-between;
+  }
+
+  .frequent-toolbar__input {
+    width: 100%;
+  }
+
+  .resource-card {
+    grid-template-columns: 1fr;
+  }
+
+  .resource-card__side {
+    align-items: flex-start;
+  }
+}
+</style>

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

@@ -0,0 +1,662 @@
+<script setup lang="ts">
+import { CopyOutlined, ReloadOutlined } from '@ant-design/icons-vue'
+import type { MediaSupplyOrderDetail } from '@geo/shared-types'
+import { useMutation, useQuery } from '@tanstack/vue-query'
+import { message, type TableColumnsType } from 'ant-design-vue'
+import { computed, ref } from 'vue'
+
+import { mediaSupplyApi } from '@/lib/api'
+import { formatDateTime } from '@/lib/display'
+import { formatStoredErrorMessage } from '@/lib/errors'
+
+const page = ref(1)
+const pageSize = ref(10)
+const status = ref('')
+
+function copyToClipboard(text?: string | null): void {
+  const url = String(text ?? '').trim()
+  if (!url) {
+    message.warning('链接为空，无法复制')
+    return
+  }
+  void navigator.clipboard.writeText(url).then(() => {
+    message.success('已复制到剪贴板')
+  }).catch(() => {
+    message.error('复制失败，请手动复制')
+  })
+}
+
+const ordersQuery = useQuery({
+  queryKey: computed(() => ['media-supply', 'orders', page.value, pageSize.value, status.value]),
+  queryFn: () =>
+    mediaSupplyApi.listOrders({
+      page: page.value,
+      page_size: pageSize.value,
+      status: status.value || undefined,
+    }),
+})
+
+const syncBacklinksMutation = useMutation({
+  mutationFn: () => mediaSupplyApi.syncBacklinks(),
+  onSuccess: async (result) => {
+    await ordersQuery.refetch()
+    if (result.refunded_orders > 0) {
+      message.warning(`已同步 ${result.refunded_orders} 个退稿并退款`)
+      return
+    }
+    if (result.links_updated > 0) {
+      message.success(`已同步 ${result.links_updated} 条回链`)
+      return
+    }
+    if (result.order_codes_updated > 0) {
+      message.success(`已同步 ${result.order_codes_updated} 个外部单号`)
+      return
+    }
+    message.info(
+      result.published_fetched > 0
+        ? '已检查已发表记录，暂未发现新的回链'
+        : result.problem_fetched > 0
+          ? '已检查退稿记录，暂未发现需要退款的订单'
+          : result.pending_fetched > 0
+            ? '已检查发表中记录，暂未发现新的外部单号'
+            : '暂未读取到投稿记录',
+    )
+  },
+  onError: () => message.error('同步回链失败，请稍后重试'),
+})
+
+const orders = computed(() => ordersQuery.data.value?.items ?? [])
+const total = computed(() => ordersQuery.data.value?.total ?? 0)
+
+const columns = computed<TableColumnsType<MediaSupplyOrderDetail>>(() => [
+  { title: '标题', key: 'title', dataIndex: 'title', width: 300, fixed: 'left' },
+  { title: '状态', key: 'status', dataIndex: 'status', width: 120 },
+  {
+    title: '金额',
+    key: 'sell_total_cents',
+    dataIndex: 'sell_total_cents',
+    width: 130,
+    align: 'right',
+  },
+  { title: '扣款', key: 'wallet', width: 150 },
+  { title: '媒体', key: 'items', width: 110, align: 'right' },
+  { title: '回链', key: 'backlinks', width: 220 },
+  { title: '外部单号', key: 'external_order_code', dataIndex: 'external_order_code', width: 170 },
+  { title: '创建时间', key: 'created_at', dataIndex: 'created_at', width: 170 },
+  { title: '错误', key: 'error_message', dataIndex: 'error_message', width: 260 },
+])
+
+function refresh(): void {
+  void ordersQuery.refetch()
+}
+
+function syncBacklinks(): void {
+  void syncBacklinksMutation.mutateAsync()
+}
+
+function handleTableChange(nextPage: number, nextPageSize: number): void {
+  page.value = nextPage
+  pageSize.value = nextPageSize
+}
+
+function applyStatus(nextStatus: string): void {
+  status.value = nextStatus
+  page.value = 1
+}
+
+function handleStatusChange(value: string | number): void {
+  applyStatus(String(value))
+}
+
+function orderStatusMeta(order: MediaSupplyOrderDetail): { label: string; color: string } {
+  switch (order.status) {
+    case 'queued':
+      return { label: '排队中', color: 'processing' }
+    case 'submitting':
+      return { label: '投稿中', color: 'processing' }
+    case 'submitted':
+      return hasPublishedBacklink(order)
+        ? { label: '已发表', color: 'success' }
+        : { label: '发表中', color: 'processing' }
+    case 'failed':
+      return order.wallet_refunded_at
+        ? { label: '已退稿', color: 'default' }
+        : { label: '投稿失败', color: 'error' }
+    default:
+      return { label: order.status || '--', color: 'default' }
+  }
+}
+
+function walletMeta(order: MediaSupplyOrderDetail): { label: string; color: string } {
+  if (order.wallet_refunded_at) {
+    return { label: '已退款', color: 'default' }
+  }
+  if (order.wallet_debited_at) {
+    return { label: '已扣款', color: 'success' }
+  }
+  return { label: '未扣款', color: 'warning' }
+}
+
+function backlinkItems(order: MediaSupplyOrderDetail) {
+  return (order.items ?? []).filter((item) => Boolean(item.external_article_url))
+}
+
+function hasPublishedBacklink(order: MediaSupplyOrderDetail): boolean {
+  return backlinkItems(order).length > 0
+}
+
+function pendingBacklinkCount(order: MediaSupplyOrderDetail): number {
+  return (order.items ?? []).filter((item) => !item.external_article_url).length
+}
+
+function mediaNames(order: MediaSupplyOrderDetail): string[] {
+  const seen = new Set<string>()
+  const names: string[] = []
+  for (const item of order.items ?? []) {
+    const name = String(item.resource_name_snapshot ?? '').trim()
+    if (!name || seen.has(name)) {
+      continue
+    }
+    seen.add(name)
+    names.push(name)
+  }
+  return names
+}
+
+function mediaSummary(order: MediaSupplyOrderDetail): string {
+  const names = mediaNames(order)
+  if (names.length === 0) {
+    return '--'
+  }
+  return names.join('、')
+}
+
+function backlinkSummary(order: MediaSupplyOrderDetail): string {
+  const ready = backlinkItems(order).length
+  const totalItems = order.items?.length ?? 0
+  if (!totalItems) {
+    return '--'
+  }
+  if (ready <= 0) {
+    return '待回传'
+  }
+  return `${ready}/${totalItems} 已回传`
+}
+
+function safeURL(value?: string | null): string {
+  const raw = String(value ?? '').trim()
+  if (/^https?:\/\//i.test(raw)) {
+    return raw
+  }
+  return ''
+}
+
+function backlinkURLText(value?: string | null): string {
+  return safeURL(value) || '--'
+}
+
+function formatMoney(cents?: number | null): string {
+  if (typeof cents !== 'number' || !Number.isFinite(cents)) {
+    return '--'
+  }
+  return `￥${(cents / 100).toFixed(2)}`
+}
+
+function formatSellPrice(cents?: number | null): string {
+  if (typeof cents !== 'number' || !Number.isFinite(cents)) {
+    return '--'
+  }
+  return `￥${Math.ceil(cents / 100)}`
+}
+
+function formatOrderError(message?: string | null): string {
+  return formatStoredErrorMessage(message) || '--'
+}
+</script>
+
+<template>
+  <div class="media-supply-orders">
+    <section class="orders-toolbar">
+      <a-segmented
+        :value="status"
+        :options="[
+          { label: '全部', value: '' },
+          { label: '排队中', value: 'queued' },
+          { label: '投稿中', value: 'submitting' },
+          { label: '发表中/已发表', value: 'submitted' },
+          { label: '退稿/失败', value: 'failed' },
+        ]"
+        @change="handleStatusChange"
+      />
+      <div class="orders-toolbar-actions">
+        <button type="button" class="toolbar-btn-refresh" @click="refresh">
+          <ReloadOutlined :class="{ 'refresh-spinning': ordersQuery.isFetching.value }" />
+          刷新
+        </button>
+        <button
+          type="button"
+          class="toolbar-btn-sync"
+          :disabled="syncBacklinksMutation.isPending.value"
+          @click="syncBacklinks"
+        >
+          <ReloadOutlined v-if="syncBacklinksMutation.isPending.value" class="refresh-spinning" />
+          同步状态/回链
+        </button>
+      </div>
+    </section>
+
+    <section class="orders-table-wrap">
+      <a-table
+        :columns="columns"
+        :data-source="orders"
+        :loading="ordersQuery.isPending.value"
+        :pagination="{
+          current: page,
+          pageSize,
+          total,
+          showSizeChanger: true,
+          showTotal: (value: number) => `共 ${value} 条`,
+          onChange: handleTableChange,
+          onShowSizeChange: handleTableChange,
+        }"
+        row-key="id"
+        :scroll="{ x: 1580 }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'title'">
+            <div class="title-cell">
+              <a-tooltip :title="record.title">
+                <strong>{{ record.title }}</strong>
+              </a-tooltip>
+              <a-tooltip :title="record.order_brand || record.remark || '--'">
+                <span>{{ record.order_brand || record.remark || '--' }}</span>
+              </a-tooltip>
+            </div>
+          </template>
+          <template v-else-if="column.key === 'status'">
+            <a-tag :color="orderStatusMeta(record).color">
+              {{ orderStatusMeta(record).label }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'sell_total_cents'">
+            <strong>{{ formatSellPrice(record.sell_total_cents) }}</strong>
+          </template>
+          <template v-else-if="column.key === 'wallet'">
+            <a-tag :color="walletMeta(record).color">{{ walletMeta(record).label }}</a-tag>
+            <span class="muted">{{ formatMoney(record.wallet_debit_cents) }}</span>
+          </template>
+          <template v-else-if="column.key === 'items'">
+            <a-tooltip :title="mediaSummary(record)">
+              <span class="media-cell">{{ mediaSummary(record) }}</span>
+            </a-tooltip>
+          </template>
+          <template v-else-if="column.key === 'backlinks'">
+            <div v-if="backlinkItems(record).length" class="backlinks-cell">
+              <div v-for="item in backlinkItems(record)" :key="item.id" class="backlink-item-row">
+                <a-tooltip :title="item.external_article_url">
+                  <a
+                    :href="safeURL(item.external_article_url)"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="backlink-anchor"
+                  >
+                    {{ backlinkURLText(item.external_article_url) }}
+                  </a>
+                </a-tooltip>
+                <a-tooltip title="复制链接">
+                  <button
+                    type="button"
+                    class="copy-link-btn"
+                    @click.stop="copyToClipboard(item.external_article_url)"
+                  >
+                    <CopyOutlined />
+                  </button>
+                </a-tooltip>
+              </div>
+              <span v-if="pendingBacklinkCount(record)" class="muted">
+                {{ pendingBacklinkCount(record) }} 个待回传
+              </span>
+            </div>
+            <span v-else>{{ backlinkSummary(record) }}</span>
+          </template>
+          <template v-else-if="column.key === 'external_order_code'">
+            {{ record.external_order_code || record.external_order_id || '--' }}
+          </template>
+          <template v-else-if="column.key === 'created_at'">
+            {{ formatDateTime(record.created_at) }}
+          </template>
+          <template v-else-if="column.key === 'error_message'">
+            <a-tooltip v-if="record.error_message" :title="formatOrderError(record.error_message)">
+              <span class="error-text">{{ formatOrderError(record.error_message) }}</span>
+            </a-tooltip>
+            <span v-else>--</span>
+          </template>
+        </template>
+      </a-table>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.media-supply-orders {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.orders-toolbar,
+.orders-table-wrap {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+}
+
+.orders-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 20px;
+}
+
+/* Custom segmented control styling */
+.orders-toolbar :deep(.ant-segmented) {
+  background: #f1f5f9;
+  border-radius: 8px;
+  padding: 3px;
+}
+
+.orders-toolbar :deep(.ant-segmented-item-selected) {
+  background: #fff !important;
+  color: #ff1831 !important;
+  font-weight: 700;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.orders-toolbar :deep(.ant-segmented-item:hover) {
+  color: #ff1831 !important;
+}
+
+.orders-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toolbar-btn-refresh {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 14px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #475467;
+  background: #fff;
+  border: 1px solid #d0d5dd;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.toolbar-btn-refresh:hover {
+  background: #f9fafb;
+  color: #1d2939;
+  border-color: #98a2b3;
+}
+
+.toolbar-btn-sync {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 16px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, #ff1831, #ff5c6e);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 2px rgba(255, 24, 49, 0.05);
+}
+
+.toolbar-btn-sync:hover:not(:disabled) {
+  background: linear-gradient(135deg, #e5152b, #e55256);
+  transform: translateY(-0.5px);
+  box-shadow: 0 4px 8px rgba(255, 24, 49, 0.15);
+}
+
+.toolbar-btn-sync:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.toolbar-btn-sync:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.refresh-spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.orders-table-wrap {
+  overflow: hidden;
+  padding-top: 8px;
+}
+
+/* Custom table styling */
+.orders-table-wrap :deep(.ant-table) {
+  color: #344054;
+  font-size: 13px;
+}
+
+.orders-table-wrap :deep(.ant-table-thead > tr > th) {
+  background: #f8fafc !important;
+  color: #475467 !important;
+  font-weight: 600 !important;
+  border-bottom: 1px solid #e2e8f0 !important;
+  text-align: center;
+}
+
+.orders-table-wrap :deep(.ant-table-tbody > tr > td) {
+  border-bottom: 1px solid #f1f5f9 !important;
+  padding: 12px 16px !important;
+}
+
+/* Status and Wallet tag customized overrides */
+.orders-table-wrap :deep(.ant-tag) {
+  border-radius: 6px !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  padding: 2px 8px !important;
+  border: 1px solid transparent !important;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.orders-table-wrap :deep(.ant-tag-processing) {
+  background: #eef2ff !important;
+  border-color: #e0e7ff !important;
+  color: #4f46e5 !important;
+}
+
+.orders-table-wrap :deep(.ant-tag-success) {
+  background: #ecfdf5 !important;
+  border-color: #d1fae5 !important;
+  color: #059669 !important;
+}
+
+.orders-table-wrap :deep(.ant-tag-error) {
+  background: #fff1f2 !important;
+  border-color: #ffe4e6 !important;
+  color: #e11d48 !important;
+}
+
+.orders-table-wrap :deep(.ant-tag-default) {
+  background: #f8fafc !important;
+  border-color: #e2e8f0 !important;
+  color: #64748b !important;
+}
+
+.orders-table-wrap :deep(.ant-tag-warning) {
+  background: #fffbeb !important;
+  border-color: #fde68a !important;
+  color: #d97706 !important;
+}
+
+/* Custom pagination overrides in crimson */
+.orders-table-wrap :deep(.ant-pagination-item-active) {
+  border-color: #ff1831 !important;
+  background: #fff !important;
+}
+
+.orders-table-wrap :deep(.ant-pagination-item-active a) {
+  color: #ff1831 !important;
+}
+
+.orders-table-wrap :deep(.ant-pagination-item:hover a) {
+  color: #ff1831 !important;
+}
+
+.orders-table-wrap :deep(.ant-pagination-item:hover) {
+  border-color: #ff1831 !important;
+}
+
+.orders-table-wrap :deep(.ant-pagination-prev:hover .ant-pagination-item-link),
+.orders-table-wrap :deep(.ant-pagination-next:hover .ant-pagination-item-link) {
+  border-color: #ff1831 !important;
+  color: #ff1831 !important;
+}
+
+.orders-table-wrap :deep(.ant-select:hover .ant-select-selector),
+.orders-table-wrap :deep(.ant-select-focused .ant-select-selector) {
+  border-color: #ff1831 !important;
+}
+
+.orders-table-wrap :deep(.ant-select-dropdown .ant-select-item-option-selected) {
+  background-color: #fff4f4 !important;
+  color: #ff1831 !important;
+}
+
+.title-cell {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.title-cell strong {
+  color: #0f172a;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: help;
+}
+
+.backlinks-cell {
+  display: flex;
+  max-width: 240px;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.backlink-item-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+}
+
+.title-cell strong,
+.title-cell span,
+.media-cell,
+.backlink-anchor,
+.error-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.media-cell {
+  display: block;
+  max-width: 96px;
+}
+
+.backlink-anchor {
+  flex: 1;
+  color: #ff1831;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.backlink-anchor:hover {
+  color: #d41327;
+  text-decoration: underline;
+}
+
+.copy-link-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #94a3b8;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.copy-link-btn:hover {
+  color: #ff1831;
+  background: #fff4f4;
+}
+
+.title-cell span {
+  cursor: help;
+}
+
+.title-cell span,
+.muted {
+  color: #667085;
+  font-size: 12px;
+}
+
+.error-text {
+  display: block;
+  max-width: 240px;
+  color: #e11d48;
+  font-weight: 500;
+}
+
+@media (max-width: 720px) {
+  .orders-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .orders-toolbar-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
+</style>

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

@@ -0,0 +1,761 @@
+<script setup lang="ts">
+import {
+  CheckCircleOutlined,
+  CloseOutlined,
+  EditOutlined,
+  FileTextOutlined,
+  LeftOutlined,
+  SearchOutlined,
+  SendOutlined,
+  WalletOutlined,
+} from '@ant-design/icons-vue'
+import type {
+  ArticleDetail,
+  ArticleListItem,
+  ArticleListParams,
+  CreateMediaSupplyOrderRequest,
+} from '@geo/shared-types'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { message } from 'ant-design-vue'
+import { computed, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import ArticleEditorCanvas from '@/components/ArticleEditorCanvas.vue'
+import { articlesApi, mediaSupplyApi } from '@/lib/api'
+import {
+  clearMediaSupplySubmitSelection,
+  loadMediaSupplySubmitSelection,
+  type MediaSupplySubmitResourceSnapshot,
+} from '@/lib/media-supply-submit-selection'
+import {
+  formatDateTime,
+  getGenerateStatusMeta,
+  getSourceTypeLabel,
+} from '@/lib/display'
+import { formatError } from '@/lib/errors'
+import { useCompanyStore } from '@/stores/company'
+
+const MODEL_ID_AUTHORITY_NEWS = 1
+const ARTICLE_SOURCE_ALL = 'template,kol,custom_generation,imitation,free_create'
+
+type SubmitMode = 'manual' | 'article'
+
+const router = useRouter()
+const queryClient = useQueryClient()
+const companyStore = useCompanyStore()
+
+const resources = ref<MediaSupplySubmitResourceSnapshot[]>(loadMediaSupplySubmitSelection())
+const mode = ref<SubmitMode>('article')
+const articlePage = ref(1)
+const articlePageSize = ref(8)
+const articleKeyword = ref('')
+const articleSourceType = ref(ARTICLE_SOURCE_ALL)
+const selectedArticleId = ref<number | null>(null)
+const selectedArticleLoading = ref(false)
+const form = reactive({
+  title: '',
+  content: '',
+})
+
+const sourceOptions = [
+  { label: '全部来源', value: ARTICLE_SOURCE_ALL },
+  { label: '模版生成', value: 'template,kol' },
+  { label: '自定义生成', value: 'custom_generation' },
+  { label: '仿写创作', value: 'imitation' },
+  { label: '自由创作', value: 'free_create' },
+]
+
+const walletQuery = useQuery({
+  queryKey: ['media-supply', 'wallet'],
+  queryFn: () => mediaSupplyApi.wallet(),
+})
+
+const articleParams = computed<ArticleListParams>(() => {
+  const params: ArticleListParams = {
+    page: articlePage.value,
+    page_size: articlePageSize.value,
+    generate_status: 'completed',
+    source_type: articleSourceType.value,
+  }
+  if (articleKeyword.value.trim()) {
+    params.keyword = articleKeyword.value.trim()
+  }
+  return params
+})
+
+const articlesQuery = useQuery({
+  queryKey: computed(() => [
+    'articles',
+    'media-supply-submit',
+    companyStore.currentBrandId,
+    articleParams.value,
+  ]),
+  enabled: computed(() => mode.value === 'article' && Boolean(companyStore.currentBrandId)),
+  queryFn: () => articlesApi.list(articleParams.value),
+})
+
+const selectedTotal = computed(() =>
+  resources.value.reduce((sum, resource) => sum + resource.sell_price_cents, 0),
+)
+const walletBalance = computed(() => walletQuery.data.value?.balance_cents ?? 0)
+const balanceEnough = computed(() => walletBalance.value >= selectedTotal.value)
+const articleRows = computed(() => articlesQuery.data.value?.items ?? [])
+const articleTotal = computed(() => articlesQuery.data.value?.total ?? 0)
+const canSubmit = computed(
+  () =>
+    resources.value.length > 0 &&
+    form.title.trim() !== '' &&
+    form.content.trim() !== '' &&
+    balanceEnough.value,
+)
+
+const createOrderMutation = useMutation({
+  mutationFn: () => mediaSupplyApi.createOrder(buildCreateOrderPayload()),
+  onSuccess: async () => {
+    message.success('投稿已进入队列')
+    clearMediaSupplySubmitSelection()
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: ['media-supply', 'orders'] }),
+      queryClient.invalidateQueries({ queryKey: ['media-supply', 'wallet'] }),
+      queryClient.invalidateQueries({ queryKey: ['media-supply', 'wallet-ledgers'] }),
+    ])
+    void router.replace({ name: 'media-supply-orders' })
+  },
+  onError: (error) => message.error(formatError(error)),
+})
+
+function buildCreateOrderPayload(): CreateMediaSupplyOrderRequest {
+  return {
+    article_id: mode.value === 'article' ? selectedArticleId.value : undefined,
+    model_id: MODEL_ID_AUTHORITY_NEWS,
+    title: form.title.trim(),
+    content: form.content.trim(),
+    items: resources.value.map((resource) => ({
+      resource_id: resource.id,
+      price_type: 'price',
+    })),
+  }
+}
+
+function setMode(nextMode: SubmitMode): void {
+  mode.value = nextMode
+  if (nextMode === 'manual') {
+    selectedArticleId.value = null
+  }
+}
+
+function applyArticleSearch(): void {
+  articlePage.value = 1
+  void articlesQuery.refetch()
+}
+
+function handleArticlePageChange(nextPage: number, nextPageSize: number): void {
+  articlePage.value = nextPage
+  articlePageSize.value = nextPageSize
+}
+
+async function selectArticle(article: ArticleListItem): Promise<void> {
+  if (selectedArticleLoading.value) {
+    return
+  }
+  selectedArticleLoading.value = true
+  try {
+    const detail = await articlesApi.detail(article.id)
+    selectedArticleId.value = detail.id
+    form.title = detail.title?.trim() || article.title?.trim() || ''
+    form.content = stripLeadingTitleHeading(form.title, detail.markdown_content?.trim() || '')
+    if (!form.content.trim()) {
+      message.warning('这篇文章暂无正文内容')
+    }
+  } catch (error) {
+    message.error(formatError(error))
+  } finally {
+    selectedArticleLoading.value = false
+  }
+}
+
+async function submitOrder(): Promise<void> {
+  if (resources.value.length === 0) {
+    message.warning('请选择媒体')
+    return
+  }
+  if (!form.title.trim() || !form.content.trim()) {
+    message.warning('请填写标题和正文')
+    return
+  }
+
+  const refreshedWallet = await walletQuery.refetch()
+  const latestBalance = refreshedWallet.data?.balance_cents ?? walletBalance.value
+  if (latestBalance < selectedTotal.value) {
+    message.warning('媒体投稿余额不足')
+    return
+  }
+
+  await createOrderMutation.mutateAsync()
+}
+
+function cancelSubmit(): void {
+  void router.push({ name: 'media-supply-resources' })
+}
+
+function articleTitle(article: ArticleListItem): string {
+  return article.title?.trim() || '未命名文章'
+}
+
+function formatMoney(cents?: number | null): string {
+  if (typeof cents !== 'number' || !Number.isFinite(cents)) {
+    return '--'
+  }
+  return `￥${(cents / 100).toFixed(2)}`
+}
+
+function formatSellPrice(cents?: number | null): string {
+  if (typeof cents !== 'number' || !Number.isFinite(cents)) {
+    return '--'
+  }
+  return `￥${Math.ceil(cents / 100)}`
+}
+
+function displayValue(value?: string | null): string {
+  return value?.trim() || '--'
+}
+
+function sourceLabel(article: Pick<ArticleDetail | ArticleListItem, 'source_type' | 'generation_mode'>): string {
+  return getSourceTypeLabel(article.source_type, article.generation_mode)
+}
+
+function stripLeadingTitleHeading(titleValue: string, markdownValue: string): string {
+  const normalizedTitle = titleValue.trim()
+  if (!normalizedTitle) {
+    return markdownValue
+  }
+
+  const normalizedMarkdown = markdownValue.replace(/^\uFEFF/, '')
+  const match = normalizedMarkdown.match(/^#\s+(.+?)\s*(\r?\n|$)/)
+  if (!match || match[1].trim() !== normalizedTitle) {
+    return markdownValue
+  }
+
+  return normalizedMarkdown.slice(match[0].length).replace(/^\s*\r?\n/, '')
+}
+</script>
+
+<template>
+  <div class="media-supply-submit-page">
+    <header class="submit-topbar">
+      <button type="button" class="back-button" @click="cancelSubmit">
+        <LeftOutlined />
+        <span>提交投稿</span>
+      </button>
+      <button type="button" class="close-button" aria-label="关闭" @click="cancelSubmit">
+        <CloseOutlined />
+      </button>
+    </header>
+
+    <a-empty v-if="resources.length === 0" description="还没有选择媒体">
+      <template #extra>
+        <a-button type="primary" @click="cancelSubmit">返回选择媒体</a-button>
+      </template>
+    </a-empty>
+
+    <template v-else>
+      <section class="summary-grid">
+        <article class="summary-tile">
+          <span>媒体数量</span>
+          <strong>{{ resources.length }}</strong>
+        </article>
+        <article class="summary-tile">
+          <span>投稿金额</span>
+          <strong>{{ formatSellPrice(selectedTotal) }}</strong>
+        </article>
+        <article class="summary-tile" :class="{ 'summary-tile--danger': !balanceEnough }">
+          <span>投稿余额</span>
+          <strong>{{ formatMoney(walletBalance) }}</strong>
+        </article>
+      </section>
+
+      <div class="submit-layout">
+        <aside class="submit-sidebar">
+          <section class="selected-media">
+            <div class="section-head">
+              <h2>已选媒体</h2>
+              <a-tag :color="balanceEnough ? 'green' : 'red'">
+                {{ balanceEnough ? '余额通过' : '余额不足' }}
+              </a-tag>
+            </div>
+            <div class="media-list">
+              <article v-for="resource in resources" :key="resource.id" class="media-row">
+                <div>
+                  <strong>{{ resource.name }}</strong>
+                  <span>{{ displayValue(resource.channel_type) }} · {{ displayValue(resource.region) }}</span>
+                </div>
+                <em>{{ formatSellPrice(resource.sell_price_cents) }}</em>
+                <p v-if="resource.resource_remark">{{ resource.resource_remark }}</p>
+              </article>
+            </div>
+          </section>
+
+          <section class="article-picker">
+            <div class="section-head">
+              <h2>稿件来源</h2>
+            </div>
+            <div class="mode-switch" role="tablist" aria-label="稿件来源">
+              <button
+                type="button"
+                :class="{ 'mode-switch__item--active': mode === 'article' }"
+                class="mode-switch__item"
+                @click="setMode('article')"
+              >
+                <FileTextOutlined />
+                选择文章
+              </button>
+              <button
+                type="button"
+                :class="{ 'mode-switch__item--active': mode === 'manual' }"
+                class="mode-switch__item"
+                @click="setMode('manual')"
+              >
+                <EditOutlined />
+                手写稿件
+              </button>
+            </div>
+
+            <div v-if="mode === 'article'" class="article-picker__body">
+              <div class="article-filters">
+                <a-input
+                  v-model:value="articleKeyword"
+                  allow-clear
+                  placeholder="搜索文章"
+                  @press-enter="applyArticleSearch"
+                >
+                  <template #prefix><SearchOutlined /></template>
+                </a-input>
+                <a-select v-model:value="articleSourceType" :options="sourceOptions" @change="applyArticleSearch" />
+              </div>
+              <a-spin :spinning="articlesQuery.isPending.value || selectedArticleLoading">
+                <div v-if="articleRows.length" class="article-list">
+                  <button
+                    v-for="article in articleRows"
+                    :key="article.id"
+                    type="button"
+                    class="article-row"
+                    :class="{ 'article-row--active': selectedArticleId === article.id }"
+                    @click="selectArticle(article)"
+                  >
+                    <span class="article-row__title">{{ articleTitle(article) }}</span>
+                    <span class="article-row__meta">
+                      {{ sourceLabel(article) }} · {{ formatDateTime(article.created_at) }}
+                    </span>
+                    <span class="article-row__foot">
+                      <a-tag :color="getGenerateStatusMeta(article.generate_status).color">
+                        {{ getGenerateStatusMeta(article.generate_status).label }}
+                      </a-tag>
+                      <span>{{ article.word_count }} 字</span>
+                      <CheckCircleOutlined v-if="selectedArticleId === article.id" />
+                    </span>
+                  </button>
+                </div>
+                <a-empty v-else description="暂无可选文章" />
+              </a-spin>
+              <a-pagination
+                size="small"
+                :current="articlePage"
+                :page-size="articlePageSize"
+                :total="articleTotal"
+                :show-size-changer="false"
+                @change="handleArticlePageChange"
+              />
+            </div>
+          </section>
+        </aside>
+
+        <main class="submit-main">
+          <section class="editor-shell">
+            <div class="editor-canvas-wrap">
+              <ArticleEditorCanvas
+                v-model:title="form.title"
+                v-model="form.content"
+                :article-id="null"
+                :ai-optimize-enabled="false"
+                :upload-image="undefined"
+              />
+            </div>
+          </section>
+
+        </main>
+      </div>
+
+      <footer class="submit-footer">
+        <div class="footer-balance" :class="{ 'footer-balance--danger': !balanceEnough }">
+          <WalletOutlined />
+          <span>合计 {{ formatSellPrice(selectedTotal) }}，余额 {{ formatMoney(walletBalance) }}</span>
+        </div>
+        <div class="footer-actions">
+          <a-button @click="cancelSubmit">取消</a-button>
+          <a-button
+            type="primary"
+            :disabled="!canSubmit"
+            :loading="createOrderMutation.isPending.value"
+            @click="submitOrder"
+          >
+            <template #icon><SendOutlined /></template>
+            确认投稿
+          </a-button>
+        </div>
+      </footer>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.media-supply-submit-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: calc(100vh - 132px);
+  color: #1f2937;
+}
+
+.submit-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.back-button,
+.close-button,
+.mode-switch__item,
+.article-row {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0;
+  color: #111827;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.back-button :deep(.anticon) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  border: 1px solid rgba(144, 157, 181, 0.24);
+  background: #fff;
+}
+
+.close-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  color: #475467;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.summary-tile {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 92px;
+  padding: 18px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.summary-tile span {
+  color: #667085;
+  font-size: 13px;
+}
+
+.summary-tile strong {
+  color: #101828;
+  font-size: 28px;
+  line-height: 1;
+}
+
+.summary-tile--danger strong {
+  color: #d4380d;
+}
+
+.submit-layout {
+  display: grid;
+  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.submit-sidebar,
+.submit-main {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+
+.selected-media,
+.article-picker {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid #eef2f7;
+}
+
+.section-head h2 {
+  margin: 0;
+  color: #111827;
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.media-list {
+  display: flex;
+  flex-direction: column;
+  max-height: 360px;
+  overflow-y: auto;
+}
+
+.media-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px 12px;
+  padding: 13px 16px;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.media-row:last-child {
+  border-bottom: 0;
+}
+
+.media-row strong,
+.article-row__title {
+  display: block;
+  overflow: hidden;
+  color: #111827;
+  font-size: 14px;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.media-row span,
+.article-row__meta,
+.article-row__foot {
+  color: #667085;
+  font-size: 12px;
+}
+
+.media-row em {
+  color: #e9232f;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.media-row p {
+  grid-column: 1 / -1;
+  margin: 0;
+  overflow: hidden;
+  color: #667085;
+  font-size: 12px;
+  line-height: 1.55;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mode-switch {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  padding: 12px;
+}
+
+.mode-switch__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 36px;
+  color: #475467;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-weight: 700;
+}
+
+.mode-switch__item--active {
+  color: #e9232f;
+  border-color: #ffb3ba;
+  background: #fff4f4;
+}
+
+.article-picker__body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 12px 14px;
+}
+
+.article-filters {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 132px;
+  gap: 8px;
+}
+
+.article-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.article-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  padding: 12px;
+  text-align: left;
+  border: 1px solid #edf1f7;
+  border-radius: 8px;
+  background: #fbfcff;
+}
+
+.article-row--active {
+  border-color: #ff9ca7;
+  background: #fff7f7;
+}
+
+.article-row__foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.article-row__foot :deep(.anticon) {
+  margin-left: auto;
+  color: #16a34a;
+}
+
+.editor-shell {
+  display: flex;
+  flex-direction: column;
+  min-height: 720px;
+  overflow: hidden;
+  background: transparent;
+}
+
+.editor-canvas-wrap {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  background: #fff;
+}
+
+.editor-canvas-wrap :deep(.article-editor-canvas) {
+  flex: 1;
+}
+
+.editor-canvas-wrap :deep(.article-editor-canvas__surface .ProseMirror) {
+  min-height: 560px;
+}
+
+.submit-footer {
+  position: sticky;
+  bottom: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: auto;
+  padding: 14px 16px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(10px);
+}
+
+.footer-balance {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #1554ad;
+  font-weight: 800;
+}
+
+.footer-balance--danger {
+  color: #d4380d;
+}
+
+.footer-actions {
+  display: flex;
+  gap: 10px;
+}
+
+@media (max-width: 1120px) {
+  .submit-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .media-list {
+    max-height: 260px;
+  }
+}
+
+@media (max-width: 720px) {
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .submit-footer {
+    position: static;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .footer-actions {
+    width: 100%;
+  }
+
+  .footer-actions :deep(.ant-btn) {
+    flex: 1;
+  }
+
+  .article-filters {
+    grid-template-columns: 1fr;
+  }
+
+  .editor-shell {
+    min-height: 620px;
+  }
+
+  .editor-canvas-wrap :deep(.article-editor-canvas__title-row .ant-input) {
+    font-size: 24px;
+  }
+}
+</style>

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

@@ -214,12 +214,12 @@ function summaryForTask(
         ? '文章已保存到草稿箱，需在平台后台完成发表。'
         : '文章已成功发送到目标平台。'
     case 'failed':
-      return '本次发送失败，请检查账号状态或平台提示后重新创建发布。'
+      return '本次发送失败，请检查账号状态或平台提示后重新提交发布。'
     case 'aborted':
-      return '任务已被取消，请检查原因后重新创建发布。'
+      return '任务已被取消，请检查原因后重新提交发布。'
     case 'unknown':
     default:
-      return '发送结果异常，已按失败处理，请检查平台侧结果后重新创建发布。'
+      return '发送结果异常，已按失败处理，请检查平台侧结果后重新提交发布。'
   }
 }
 
@@ -490,8 +490,11 @@ async function retryTask(record: PublishTaskItem): Promise<void> {
     const result = await publishTasksApi.retry(record.id)
     const created = result.created_task_ids.length
     const existing = result.existing_task_ids.length
+    const requeued = result.requeued_task_ids?.length ?? 0
     if (created > 0) {
-      message.success(created === 1 ? '已重新创建发布任务' : `已重新创建 ${created} 个发布任务`)
+      message.success(created === 1 ? '已创建新的发布任务' : `已创建 ${created} 个新的发布任务`)
+    } else if (requeued > 0) {
+      message.success(requeued === 1 ? '已重新提交发布任务' : `已重新提交 ${requeued} 个发布任务`)
     } else if (existing > 0) {
       if (record.status === 'unknown') {
         message.warning('原任务结果未知且已有发布记录，可能已成功，请先核实平台侧结果。')
@@ -725,12 +728,12 @@ async function copyErrorMessage(record: PublishTaskItem): Promise<void> {
                   <template #icon><DesktopOutlined /></template>
                 </a-button>
               </a-tooltip>
-              <a-tooltip v-if="canRetryTask(record)" title="重新创建发布任务" placement="top">
+              <a-tooltip v-if="canRetryTask(record)" title="重新提交发布任务" placement="top">
                 <a-button
                   type="text"
                   class="publish-action-btn"
                   :loading="retryingTaskId === record.id"
-                  :aria-label="`重新创建发布任务：${record.title}`"
+                  :aria-label="`重新提交发布任务：${record.title}`"
                   @click.stop="retryTask(record)"
                 >
                   <template #icon><RetweetOutlined /></template>