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