feat(web): 08 后台四个页面落地（内容治理 / 订单与权益 / 创作者审核 / 数据看板）

为什么：08 运营后台的接口在前几轮已经实现，但运营在界面上点不到——
评论审核、举报工单、敏感词维护、订单补发/退款、权益回收、金币补发、对账、
创作者入驻与内容提交审核、运营大盘，都只能靠 curl。本轮把这四个页面补齐，
08 才算真正闭环。

- 内容治理：评论审核（通过/驳回/删除）、举报工单处理（可联动封禁）、敏感词库增删改查
- 订单与权益：订单检索与流水、补发、退款、权益检索/人工补发/回收、金币流水与人工补币、对账运行与历史
- 创作者审核：入驻审核（通过/驳回原因码/冻结）+ 资质抽屉；内容提交审核（通过/驳回）
- 数据看板：overview 五组指标 + transcode 队列与失败任务，只读；取不到的指标显示「暂无数据源」而不是 0
- 新增 console.css（工具条/抽屉/看板卡片，含深色模式），四个页面共用；时间列统一 yyyy-MM-dd HH:mm:ss
- 按钮按权限点显隐（没有 *:update / *:audit 的角色看到的是只读态），表格列与后端字段一一对应

src/views/commerce/OrderManagementView.vue

@@ -0,0 +1,679 @@
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import PageHeading from '@/views/components/PageHeading.vue'
+import { useRbac } from '@/stores/rbac'
+import { dateCell } from '@/utils/format'
+import {
+  adjustCoinsApi,
+  compensateOrderApi,
+  grantEntitlementApi,
+  listOrderEventsApi,
+  listWalletLedgerApi,
+  pageEntitlementsApi,
+  pageOrdersApi,
+  pageReconcileApi,
+  refundOrderApi,
+  revokeEntitlementApi,
+  runReconcileApi
+} from '@/api/admin/commerce'
+
+const { can } = useRbac()
+const canOrderUpdate = can('order:update')
+const canEntitlementUpdate = can('entitlement:update')
+const canWalletUpdate = can('wallet:update')
+const canReconcile = can('reconcile:run')
+
+const ORDER_STATUS = [
+  { value: 'CREATED', label: '待支付', tag: 'info' },
+  { value: 'PAID', label: '已支付', tag: 'warning' },
+  { value: 'DELIVERED', label: '已交付', tag: 'success' },
+  { value: 'REFUNDED', label: '已退款', tag: 'danger' },
+  { value: 'CLOSED', label: '已关闭', tag: 'info' }
+]
+const ENTITLEMENT_STATUS = [
+  { value: 'ACTIVE', label: '有效', tag: 'success' },
+  { value: 'REVOKED', label: '已回收', tag: 'danger' },
+  { value: 'EXPIRED', label: '已过期', tag: 'info' }
+]
+
+function meta(list, value) {
+  return list.find((item) => item.value === value) || { label: value || '-', tag: 'info' }
+}
+
+const activeTab = ref('orders')
+
+const orders = reactive({
+  rows: [],
+  total: 0,
+  loading: false,
+  page: 1,
+  size: 10,
+  status: undefined,
+  orderNo: '',
+  userId: undefined
+})
+async function loadOrders() {
+  orders.loading = true
+  try {
+    const res = await pageOrdersApi({
+      pageIndex: orders.page,
+      pageSize: orders.size,
+      status: orders.status || undefined,
+      orderNo: orders.orderNo.trim() || undefined,
+      userId: orders.userId || undefined
+    })
+    orders.rows = res.data?.list || []
+    orders.total = res.data?.total || 0
+  } finally {
+    orders.loading = false
+  }
+}
+function queryOrders() {
+  orders.page = 1
+  loadOrders()
+}
+async function compensate(row) {
+  try {
+    await ElMessageBox.confirm(
+      `对订单 ${row.orderNo} 执行补发？已交付的订单会幂等返回。`,
+      '补发订单',
+      {
+        confirmButtonText: '确认补发',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+  } catch {
+    return
+  }
+  await compensateOrderApi(row.orderNo)
+  ElMessage.success('补发完成')
+  await loadOrders()
+}
+async function refund(row) {
+  let reason = ''
+  try {
+    const { value } = await ElMessageBox.prompt(
+      '退款会回收权益并扣回金币，请填写原因',
+      '订单退款',
+      {
+        confirmButtonText: '确认退款',
+        cancelButtonText: '取消',
+        inputValidator: (val) => (val && val.trim() ? true : '退款原因不能为空')
+      }
+    )
+    reason = value
+  } catch {
+    return
+  }
+  await refundOrderApi(row.orderNo, reason.trim())
+  ElMessage.success('已退款并回收权益')
+  await loadOrders()
+}
+
+const eventsVisible = ref(false)
+const eventsLoading = ref(false)
+const events = ref([])
+const eventsOrderNo = ref('')
+async function openEvents(row) {
+  eventsVisible.value = true
+  eventsOrderNo.value = row.orderNo
+  eventsLoading.value = true
+  events.value = []
+  try {
+    events.value = (await listOrderEventsApi(row.orderNo)).data || []
+  } finally {
+    eventsLoading.value = false
+  }
+}
+
+const entitlements = reactive({
+  rows: [],
+  total: 0,
+  loading: false,
+  page: 1,
+  size: 10,
+  userId: undefined,
+  status: 'ACTIVE'
+})
+async function loadEntitlements() {
+  entitlements.loading = true
+  try {
+    const res = await pageEntitlementsApi({
+      pageIndex: entitlements.page,
+      pageSize: entitlements.size,
+      userId: entitlements.userId || undefined,
+      status: entitlements.status || undefined
+    })
+    entitlements.rows = res.data?.list || []
+    entitlements.total = res.data?.total || 0
+  } finally {
+    entitlements.loading = false
+  }
+}
+function queryEntitlements() {
+  entitlements.page = 1
+  loadEntitlements()
+}
+async function revokeEntitlement(row) {
+  try {
+    await ElMessageBox.confirm(
+      '回收后该用户立即失去这一集的播放权限（已下载的授权不受影响），确认？',
+      '回收权益',
+      {
+        confirmButtonText: '确认回收',
+        cancelButtonText: '取消',
+        type: 'warning',
+        confirmButtonClass: 'el-button--danger'
+      }
+    )
+  } catch {
+    return
+  }
+  await revokeEntitlementApi(row.id, '后台回收')
+  ElMessage.success('权益已回收')
+  await loadEntitlements()
+}
+const grantVisible = ref(false)
+const grantSaving = ref(false)
+const grantForm = reactive({
+  userId: undefined,
+  dramaId: undefined,
+  episodeId: undefined,
+  type: 'EPISODE',
+  reason: ''
+})
+function openGrant() {
+  Object.assign(grantForm, {
+    userId: undefined,
+    dramaId: undefined,
+    episodeId: undefined,
+    type: 'EPISODE',
+    reason: ''
+  })
+  grantVisible.value = true
+}
+async function confirmGrant() {
+  if (!grantForm.userId || !grantForm.dramaId) return ElMessage.warning('请填写用户 ID 与短剧 ID')
+  grantSaving.value = true
+  try {
+    await grantEntitlementApi({
+      userId: grantForm.userId,
+      dramaId: grantForm.dramaId,
+      episodeId: grantForm.episodeId || 0,
+      type: grantForm.type
+    })
+    ElMessage.success('权益已补发')
+    grantVisible.value = false
+    await loadEntitlements()
+  } finally {
+    grantSaving.value = false
+  }
+}
+
+const ledger = reactive({ rows: [], loading: false, userId: undefined })
+async function loadLedger() {
+  if (!ledger.userId) return ElMessage.warning('请先填写用户 ID')
+  ledger.loading = true
+  try {
+    ledger.rows = (await listWalletLedgerApi(ledger.userId, 50)).data || []
+  } finally {
+    ledger.loading = false
+  }
+}
+const coinVisible = ref(false)
+const coinSaving = ref(false)
+const coinForm = reactive({ userId: undefined, amount: 100, remark: '', idempotentKey: '' })
+function openCoin() {
+  Object.assign(coinForm, { userId: ledger.userId, amount: 100, remark: '', idempotentKey: '' })
+  coinVisible.value = true
+}
+async function confirmCoin() {
+  if (!coinForm.userId || !coinForm.amount) return ElMessage.warning('请填写用户 ID 与变动金额')
+  coinSaving.value = true
+  try {
+    await adjustCoinsApi({
+      userId: coinForm.userId,
+      amount: coinForm.amount,
+      remark: coinForm.remark.trim() || '人工调整',
+      idempotentKey: coinForm.idempotentKey.trim() || undefined
+    })
+    ElMessage.success('已入流水，重复提交同一幂等键不会重复加币')
+    coinVisible.value = false
+    await loadLedger()
+  } finally {
+    coinSaving.value = false
+  }
+}
+
+const reconcile = reactive({ rows: [], total: 0, loading: false, page: 1, size: 10 })
+async function loadReconcile() {
+  reconcile.loading = true
+  try {
+    const res = await pageReconcileApi({ pageIndex: reconcile.page, pageSize: reconcile.size })
+    reconcile.rows = res.data?.list || []
+    reconcile.total = res.data?.total || 0
+  } finally {
+    reconcile.loading = false
+  }
+}
+async function runReconcile() {
+  try {
+    await ElMessageBox.confirm(
+      '默认对账前一天；商店未接入时差异属预期，接入后必须归零。',
+      '手动对账',
+      {
+        confirmButtonText: '开始对账',
+        cancelButtonText: '取消'
+      }
+    )
+  } catch {
+    return
+  }
+  const res = await runReconcileApi({})
+  const data = res.data
+  ElMessage.success(`对账完成：差异 ${data?.diffCount ?? 0} 笔`)
+  await loadReconcile()
+}
+
+const tabLoaded = {}
+onMounted(() => {
+  loadOrders()
+  tabLoaded.orders = true
+})
+function onTabChange(name) {
+  if (tabLoaded[name]) return
+  tabLoaded[name] = true
+  if (name === 'entitlements') loadEntitlements()
+  if (name === 'reconcile') loadReconcile()
+}
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="订单与权益"
+    title="订单管理"
+    description="订单补发与退款、权益回收与补发、金币流水与对账。"
+  />
+
+  <section class="panel">
+    <el-tabs v-model="activeTab" @tab-change="onTabChange">
+      <el-tab-pane label="订单" name="orders">
+        <div class="console-toolbar">
+          <el-select
+            v-model="orders.status"
+            class="console-select"
+            clearable
+            placeholder="全部状态"
+            @change="queryOrders"
+          >
+            <el-option
+              v-for="item in ORDER_STATUS"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-input
+            v-model="orders.orderNo"
+            class="console-keyword"
+            clearable
+            placeholder="订单号"
+            @keyup.enter="queryOrders"
+          />
+          <el-input
+            v-model="orders.userId"
+            class="console-user"
+            clearable
+            placeholder="用户ID"
+            @keyup.enter="queryOrders"
+          />
+          <el-button type="primary" @click="queryOrders">查询</el-button>
+          <span class="console-count">共 {{ orders.total }} 笔订单</span>
+        </div>
+        <el-table
+          v-loading="orders.loading"
+          :data="orders.rows"
+          row-key="id"
+          border
+          class="drama-el-table"
+          empty-text="没有符合条件的订单"
+        >
+          <el-table-column prop="orderNo" label="订单号" min-width="200" show-overflow-tooltip />
+          <el-table-column prop="userId" label="用户ID" width="90" />
+          <el-table-column prop="productName" label="商品" min-width="140" show-overflow-tooltip />
+          <el-table-column prop="platform" label="渠道" width="90" />
+          <el-table-column prop="amount" label="金额" width="100" />
+          <el-table-column prop="coinAmount" label="金币" width="90" />
+          <el-table-column label="状态" width="100">
+            <template #default="{ row }">
+              <el-tag :type="meta(ORDER_STATUS, row.status).tag" effect="light">{{
+                meta(ORDER_STATUS, row.status).label
+              }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="createdAt"
+            label="创建时间"
+            min-width="165"
+            show-overflow-tooltip
+            :formatter="dateCell"
+          />
+          <el-table-column label="操作" width="230" fixed="right">
+            <template #default="{ row }">
+              <div class="table-actions">
+                <el-button size="small" @click="openEvents(row)">流水</el-button>
+                <el-button
+                  v-if="canOrderUpdate && row.status === 'PAID'"
+                  type="primary"
+                  size="small"
+                  @click="compensate(row)"
+                  >补发</el-button
+                >
+                <el-button
+                  v-if="canOrderUpdate && (row.status === 'PAID' || row.status === 'DELIVERED')"
+                  size="small"
+                  class="danger-action"
+                  @click="refund(row)"
+                  >退款</el-button
+                >
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination
+            v-model:current-page="orders.page"
+            v-model:page-size="orders.size"
+            :page-sizes="[10, 20, 50]"
+            :total="orders.total"
+            layout="total, prev, pager, next, sizes"
+            background
+            @current-change="loadOrders"
+            @size-change="queryOrders"
+          />
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="权益" name="entitlements">
+        <div class="console-toolbar">
+          <el-input
+            v-model="entitlements.userId"
+            class="console-user"
+            clearable
+            placeholder="用户ID"
+            @keyup.enter="queryEntitlements"
+          />
+          <el-select
+            v-model="entitlements.status"
+            class="console-select"
+            clearable
+            placeholder="全部状态"
+            @change="queryEntitlements"
+          >
+            <el-option
+              v-for="item in ENTITLEMENT_STATUS"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-button type="primary" @click="queryEntitlements">查询</el-button>
+          <el-button v-if="canEntitlementUpdate" type="primary" @click="openGrant"
+            >人工补发权益</el-button
+          >
+          <span class="console-count">共 {{ entitlements.total }} 条权益</span>
+        </div>
+        <el-table
+          v-loading="entitlements.loading"
+          :data="entitlements.rows"
+          row-key="id"
+          border
+          class="drama-el-table"
+          empty-text="没有符合条件的权益"
+        >
+          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column prop="userId" label="用户ID" width="90" />
+          <el-table-column prop="dramaId" label="短剧ID" width="90" />
+          <el-table-column prop="episodeId" label="剧集ID" width="90" />
+          <el-table-column prop="type" label="类型" width="100" />
+          <el-table-column prop="source" label="来源" width="100" />
+          <el-table-column prop="orderNo" label="关联订单" min-width="160" show-overflow-tooltip />
+          <el-table-column label="状态" width="100">
+            <template #default="{ row }">
+              <el-tag :type="meta(ENTITLEMENT_STATUS, row.status).tag" effect="light">{{
+                meta(ENTITLEMENT_STATUS, row.status).label
+              }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="startAt"
+            label="生效时间"
+            min-width="165"
+            show-overflow-tooltip
+            :formatter="dateCell"
+          />
+          <el-table-column label="操作" width="130" fixed="right">
+            <template #default="{ row }">
+              <div class="table-actions">
+                <el-button
+                  v-if="canEntitlementUpdate && row.status === 'ACTIVE'"
+                  size="small"
+                  class="danger-action"
+                  @click="revokeEntitlement(row)"
+                  >回收</el-button
+                >
+                <span v-else class="console-muted">—</span>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination
+            v-model:current-page="entitlements.page"
+            v-model:page-size="entitlements.size"
+            :page-sizes="[10, 20, 50]"
+            :total="entitlements.total"
+            layout="total, prev, pager, next, sizes"
+            background
+            @current-change="loadEntitlements"
+            @size-change="queryEntitlements"
+          />
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="金币流水" name="ledger">
+        <div class="console-toolbar">
+          <el-input
+            v-model="ledger.userId"
+            class="console-user"
+            clearable
+            placeholder="用户ID"
+            @keyup.enter="loadLedger"
+          />
+          <el-button type="primary" @click="loadLedger">查询流水</el-button>
+          <el-button v-if="canWalletUpdate" type="primary" @click="openCoin">人工补币</el-button>
+          <span class="console-count">{{
+            ledger.rows.length ? `最近 ${ledger.rows.length} 条` : '按用户查询'
+          }}</span>
+        </div>
+        <el-table
+          v-loading="ledger.loading"
+          :data="ledger.rows"
+          row-key="id"
+          border
+          class="drama-el-table"
+          empty-text="输入用户 ID 后查询金币流水"
+        >
+          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column label="变动" width="110">
+            <template #default="{ row }">
+              <span :class="row.changeAmount >= 0 ? 'console-credit' : 'console-debit'">
+                {{ row.changeAmount > 0 ? '+' : '' }}{{ row.changeAmount }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="balanceAfter" label="变动后余额" width="120" />
+          <el-table-column prop="bizType" label="业务类型" width="120" />
+          <el-table-column prop="bizId" label="业务单号" min-width="160" show-overflow-tooltip />
+          <el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
+          <el-table-column prop="operatorId" label="操作人" width="90" />
+          <el-table-column
+            prop="createdAt"
+            label="时间"
+            min-width="165"
+            show-overflow-tooltip
+            :formatter="dateCell"
+          />
+        </el-table>
+      </el-tab-pane>
+
+      <el-tab-pane label="对账" name="reconcile">
+        <div class="console-toolbar">
+          <el-button v-if="canReconcile" type="primary" @click="runReconcile">手动对账</el-button>
+          <el-button @click="loadReconcile">刷新</el-button>
+          <span class="console-count">共 {{ reconcile.total }} 次对账</span>
+        </div>
+        <el-alert
+          class="console-hint"
+          type="info"
+          :closable="false"
+          show-icon
+          title="默认核对前一天：本地订单与商店票据逐笔比对，差异必须归零；商店未接入前差异属预期。"
+        />
+        <el-table
+          v-loading="reconcile.loading"
+          :data="reconcile.rows"
+          row-key="id"
+          border
+          class="drama-el-table"
+          empty-text="还没有对账记录"
+        >
+          <el-table-column prop="bizDate" label="对账日期" width="130" />
+          <el-table-column prop="platform" label="渠道" width="100" />
+          <el-table-column prop="totalCount" label="核对笔数" width="100" />
+          <el-table-column prop="matchedCount" label="一致笔数" width="100" />
+          <el-table-column label="差异笔数" width="100">
+            <template #default="{ row }">
+              <span :class="row.diffCount > 0 ? 'console-debit' : 'console-credit'">{{
+                row.diffCount
+              }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="amountSum" label="金额合计" width="110" />
+          <el-table-column prop="status" label="状态" width="100" />
+          <el-table-column prop="detail" label="明细" min-width="240" show-overflow-tooltip />
+          <el-table-column
+            prop="finishedAt"
+            label="完成时间"
+            min-width="165"
+            show-overflow-tooltip
+            :formatter="dateCell"
+          />
+        </el-table>
+        <div class="pagination">
+          <el-pagination
+            v-model:current-page="reconcile.page"
+            v-model:page-size="reconcile.size"
+            :page-sizes="[10, 20, 50]"
+            :total="reconcile.total"
+            layout="total, prev, pager, next, sizes"
+            background
+            @current-change="loadReconcile"
+            @size-change="loadReconcile"
+          />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </section>
+
+  <el-drawer
+    v-model="eventsVisible"
+    :title="`订单流水 · ${eventsOrderNo}`"
+    size="640px"
+    class="console-drawer"
+  >
+    <el-table
+      v-loading="eventsLoading"
+      :data="events"
+      size="small"
+      border
+      empty-text="该订单暂无状态流转记录"
+    >
+      <el-table-column prop="id" label="ID" width="70" />
+      <el-table-column prop="event" label="事件" width="130" />
+      <el-table-column label="状态流转" width="190">
+        <template #default="{ row }"
+          >{{ row.fromStatus || '-' }} → {{ row.toStatus || '-' }}</template
+        >
+      </el-table-column>
+      <el-table-column prop="source" label="来源" width="100" />
+      <el-table-column prop="operatorId" label="操作人" width="90" />
+      <el-table-column prop="createdAt" label="时间" width="165" :formatter="dateCell" />
+      <el-table-column prop="payload" label="载荷" min-width="220" show-overflow-tooltip />
+    </el-table>
+  </el-drawer>
+
+  <el-dialog v-model="coinVisible" title="人工补币" width="480px">
+    <el-form label-position="top">
+      <el-form-item label="用户 ID" required>
+        <el-input v-model="coinForm.userId" placeholder="仅支持已存在的 App 用户" />
+      </el-form-item>
+      <el-form-item label="变动金额" required>
+        <el-input-number v-model="coinForm.amount" :step="10" class="console-number" />
+        <span class="console-muted">正数补发、负数扣回，单位为金币</span>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="coinForm.remark" maxlength="60" placeholder="例如：客服补偿" />
+      </el-form-item>
+      <el-form-item label="幂等键">
+        <el-input
+          v-model="coinForm.idempotentKey"
+          maxlength="64"
+          placeholder="可留空；同一工单重复提交请填同一个键"
+        />
+      </el-form-item>
+      <el-alert
+        type="info"
+        :closable="false"
+        show-icon
+        title="补币会写入金币流水，请注意重复提交同一幂等键不会重复加币"
+      />
+    </el-form>
+    <template #footer>
+      <el-button @click="coinVisible = false">取消</el-button>
+      <el-button type="primary" :loading="coinSaving" @click="confirmCoin">提交</el-button>
+    </template>
+  </el-dialog>
+
+  <el-dialog v-model="grantVisible" title="人工补发权益" width="480px">
+    <el-form label-position="top">
+      <el-form-item label="用户 ID" required>
+        <el-input v-model="grantForm.userId" />
+      </el-form-item>
+      <el-form-item label="短剧 ID" required>
+        <el-input v-model="grantForm.dramaId" />
+      </el-form-item>
+      <el-form-item label="剧集 ID">
+        <el-input v-model="grantForm.episodeId" placeholder="留空或填 0 表示整剧权益" />
+      </el-form-item>
+      <el-form-item label="权益类型">
+        <el-radio-group v-model="grantForm.type">
+          <el-radio value="EPISODE">单集</el-radio>
+          <el-radio value="DRAMA">整剧</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-alert
+        type="warning"
+        :closable="false"
+        show-icon
+        title="权益补发即时生效，用户下次取播放票据即可直接观看；补发动作与操作人记入后台操作日志"
+      />
+    </el-form>
+    <template #footer>
+      <el-button @click="grantVisible = false">取消</el-button>
+      <el-button type="primary" :loading="grantSaving" @click="confirmGrant">提交</el-button>
+    </template>
+  </el-dialog>
+</template>

src/views/creator/CreatorAuditView.vue

@@ -0,0 +1,234 @@
+<script setup>
+import { Search } from '@element-plus/icons-vue'
+import PageHeading from '@/views/components/PageHeading.vue'
+import { useRbac } from '@/stores/rbac'
+import { dateCell } from '@/utils/format'
+import {
+  CREATOR_STATUS,
+  CREATOR_TYPE,
+  creatorStatusMeta,
+  creatorTypeText,
+  useCreatorAudit
+} from './composables/useCreatorAudit'
+
+const { can } = useRbac()
+const canAudit = can('creator:audit')
+
+const {
+  rows,
+  total,
+  loading,
+  keyword,
+  statusFilter,
+  typeFilter,
+  currentPage,
+  pageSize,
+  auditVisible,
+  auditSaving,
+  auditTarget,
+  auditForm,
+  documentsVisible,
+  documentsLoading,
+  documents,
+  documentsTarget,
+  load,
+  query,
+  reset,
+  handleSizeChange,
+  openDocuments,
+  openAudit,
+  confirmAudit,
+  freeze
+} = useCreatorAudit()
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="创作者管理"
+    title="创作者入驻"
+    description="审核创作者主体与资质，通过后创作者才能提交内容。"
+  />
+
+  <section class="panel">
+    <div class="console-toolbar">
+      <el-input
+        v-model="keyword"
+        class="console-keyword"
+        :prefix-icon="Search"
+        clearable
+        placeholder="搜索名称 / 编号 / 联系人 / 联系方式"
+        @keyup.enter="query"
+        @clear="query"
+      />
+      <el-select
+        v-model="statusFilter"
+        class="console-select"
+        clearable
+        placeholder="全部状态"
+        @change="query"
+      >
+        <el-option
+          v-for="item in CREATOR_STATUS"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-select
+        v-model="typeFilter"
+        class="console-select"
+        clearable
+        placeholder="全部类型"
+        @change="query"
+      >
+        <el-option
+          v-for="item in CREATOR_TYPE"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-button type="primary" @click="query">查询</el-button>
+      <el-button @click="reset">重置</el-button>
+      <span class="console-count">共 {{ total }} 位创作者</span>
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="rows"
+      row-key="id"
+      border
+      class="drama-el-table"
+      empty-text="没有符合条件的创作者"
+    >
+      <el-table-column
+        type="index"
+        label="序号"
+        width="70"
+        :index="(currentPage - 1) * pageSize + 1"
+      />
+      <el-table-column prop="code" label="编号" min-width="120" show-overflow-tooltip />
+      <el-table-column prop="name" label="名称" min-width="160" show-overflow-tooltip />
+      <el-table-column label="类型" width="90">
+        <template #default="{ row }">{{ creatorTypeText(row.type) }}</template>
+      </el-table-column>
+      <el-table-column prop="contactName" label="联系人" min-width="110" show-overflow-tooltip />
+      <el-table-column
+        prop="contactMobile"
+        label="联系方式"
+        min-width="140"
+        show-overflow-tooltip
+      />
+      <el-table-column prop="countryCode" label="国家" width="80" />
+      <el-table-column label="状态" width="90">
+        <template #default="{ row }">
+          <el-tag :type="creatorStatusMeta(row.status).tag" effect="light">
+            {{ creatorStatusMeta(row.status).label }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="auditAt"
+        label="审核时间"
+        min-width="165"
+        show-overflow-tooltip
+        :formatter="dateCell"
+      />
+      <el-table-column
+        prop="createdAt"
+        label="入驻时间"
+        min-width="165"
+        show-overflow-tooltip
+        :formatter="dateCell"
+      />
+      <el-table-column label="操作" width="230" fixed="right">
+        <template #default="{ row }">
+          <div class="table-actions">
+            <el-button type="primary" size="small" @click="openDocuments(row)">资质</el-button>
+            <el-button v-if="canAudit" size="small" @click="openAudit(row, 'APPROVE')"
+              >审核</el-button
+            >
+            <el-button
+              v-if="canAudit && row.status === 'approved'"
+              size="small"
+              class="danger-action"
+              @click="freeze(row)"
+              >冻结</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="total"
+        layout="total, prev, pager, next, sizes, jumper"
+        background
+        @current-change="load"
+        @size-change="handleSizeChange"
+      />
+    </div>
+  </section>
+
+  <el-drawer v-model="documentsVisible" title="创作者资质" size="520px" class="console-drawer">
+    <p class="console-hint">
+      {{ documentsTarget ? `${documentsTarget.name}（${documentsTarget.code}）` : '' }}
+    </p>
+    <el-table
+      v-loading="documentsLoading"
+      :data="documents"
+      size="small"
+      border
+      empty-text="没有上传资质"
+    >
+      <el-table-column prop="type" label="证件类型" width="140" />
+      <el-table-column label="文件" min-width="200">
+        <template #default="{ row }">
+          <el-link type="primary" :href="row.fileUrl" target="_blank">{{ row.fileUrl }}</el-link>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="100" />
+    </el-table>
+  </el-drawer>
+
+  <el-dialog v-model="auditVisible" title="创作者入驻审核" width="480px">
+    <el-form label-position="top">
+      <el-form-item label="目标创作者">
+        <el-input
+          :model-value="auditTarget ? `${auditTarget.name}（${auditTarget.code}）` : ''"
+          disabled
+        />
+      </el-form-item>
+      <el-form-item label="审核动作">
+        <el-radio-group v-model="auditForm.action">
+          <el-radio value="APPROVE">通过</el-radio>
+          <el-radio value="REJECT">驳回</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="auditForm.action === 'REJECT'" label="驳回原因码">
+        <el-input
+          v-model="auditForm.rejectCode"
+          placeholder="例如：DOC_INCOMPLETE"
+          maxlength="32"
+        />
+      </el-form-item>
+      <el-form-item :label="auditForm.action === 'REJECT' ? '驳回原因（必填）' : '备注（可选）'">
+        <el-input
+          v-model="auditForm.reason"
+          type="textarea"
+          :rows="3"
+          maxlength="200"
+          show-word-limit
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="auditVisible = false">取消</el-button>
+      <el-button type="primary" :loading="auditSaving" @click="confirmAudit">提交</el-button>
+    </template>
+  </el-dialog>
+</template>

src/views/creator/SubmissionAuditView.vue

@@ -0,0 +1,201 @@
+<script setup>
+import PageHeading from '@/views/components/PageHeading.vue'
+import { useRbac } from '@/stores/rbac'
+import { dateCell } from '@/utils/format'
+import {
+  SUBMISSION_STATUS,
+  SUBMISSION_TYPE,
+  submissionStatusMeta,
+  submissionTypeText,
+  useSubmissionAudit
+} from './composables/useSubmissionAudit'
+
+const { can } = useRbac()
+const canAudit = can('submission:audit')
+
+const {
+  rows,
+  total,
+  loading,
+  statusFilter,
+  typeFilter,
+  dramaId,
+  currentPage,
+  pageSize,
+  auditVisible,
+  auditSaving,
+  auditTarget,
+  auditForm,
+  load,
+  query,
+  reset,
+  handleSizeChange,
+  openAudit,
+  confirmAudit
+} = useSubmissionAudit()
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="创作者管理"
+    title="内容审核"
+    description="审核创作者提交的内容；通过后按提交类型落到短剧状态机（上线 / 下线）。"
+  />
+
+  <section class="panel">
+    <div class="console-toolbar">
+      <el-select
+        v-model="statusFilter"
+        class="console-select"
+        clearable
+        placeholder="全部状态"
+        @change="query"
+      >
+        <el-option
+          v-for="item in SUBMISSION_STATUS"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-select
+        v-model="typeFilter"
+        class="console-select"
+        clearable
+        placeholder="全部类型"
+        @change="query"
+      >
+        <el-option
+          v-for="item in SUBMISSION_TYPE"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-input
+        v-model="dramaId"
+        class="console-drama"
+        placeholder="按短剧 ID 过滤"
+        clearable
+        @keyup.enter="query"
+      />
+      <el-button type="primary" @click="query">查询</el-button>
+      <el-button @click="reset">重置</el-button>
+      <span class="console-count">共 {{ total }} 条提交</span>
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="rows"
+      row-key="id"
+      border
+      class="drama-el-table"
+      empty-text="没有符合条件的提交记录"
+    >
+      <el-table-column prop="id" label="提交ID" width="90" />
+      <el-table-column prop="dramaId" label="短剧ID" width="90" />
+      <el-table-column prop="creatorId" label="创作者ID" width="100" />
+      <el-table-column label="提交类型" width="110">
+        <template #default="{ row }">{{ submissionTypeText(row.type) }}</template>
+      </el-table-column>
+      <el-table-column label="状态" width="100">
+        <template #default="{ row }">
+          <el-tag :type="submissionStatusMeta(row.status).tag" effect="light">
+            {{ submissionStatusMeta(row.status).label }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="version" label="版本" width="80" />
+      <el-table-column
+        prop="submitAt"
+        label="提交时间"
+        min-width="165"
+        show-overflow-tooltip
+        :formatter="dateCell"
+      />
+      <el-table-column
+        prop="reviewAt"
+        label="审核时间"
+        min-width="165"
+        show-overflow-tooltip
+        :formatter="dateCell"
+      />
+      <el-table-column prop="reviewNote" label="审核说明" min-width="180" show-overflow-tooltip />
+      <el-table-column label="操作" width="140" fixed="right">
+        <template #default="{ row }">
+          <div class="table-actions">
+            <el-button
+              v-if="canAudit"
+              type="primary"
+              size="small"
+              @click="openAudit(row, 'APPROVE')"
+              >审核</el-button
+            >
+            <el-button v-else size="small" disabled>只读</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="total"
+        layout="total, prev, pager, next, sizes, jumper"
+        background
+        @current-change="load"
+        @size-change="handleSizeChange"
+      />
+    </div>
+  </section>
+
+  <el-dialog v-model="auditVisible" title="内容提交审核" width="480px">
+    <el-form label-position="top">
+      <el-form-item label="提交信息">
+        <el-input
+          :model-value="
+            auditTarget
+              ? `提交 #${auditTarget.id} · 短剧 ${auditTarget.dramaId} · ${submissionTypeText(auditTarget.type)}`
+              : ''
+          "
+          disabled
+        />
+      </el-form-item>
+      <el-form-item label="审核结果">
+        <el-radio-group v-model="auditForm.action">
+          <el-radio value="APPROVE">通过</el-radio>
+          <el-radio value="REJECT">驳回</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="auditForm.action === 'REJECT'" label="驳回原因码">
+        <el-input
+          v-model="auditForm.rejectCode"
+          placeholder="例如：CONTENT_VIOLATION"
+          maxlength="32"
+        />
+      </el-form-item>
+      <el-form-item :label="auditForm.action === 'REJECT' ? '驳回原因（必填）' : '备注（可选）'">
+        <el-input
+          v-model="auditForm.reason"
+          type="textarea"
+          :rows="3"
+          maxlength="200"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-alert
+        v-if="auditForm.action === 'APPROVE'"
+        type="info"
+        :closable="false"
+        show-icon
+        title="通过后按提交类型落到短剧状态机：申请上线会顺推至已上线，申请下线会下线"
+      />
+    </el-form>
+    <template #footer>
+      <el-button @click="auditVisible = false">取消</el-button>
+      <el-button type="primary" :loading="auditSaving" @click="confirmAudit">提交</el-button>
+    </template>
+  </el-dialog>
+</template>

src/views/creator/composables/useCreatorAudit.js

@@ -0,0 +1,167 @@
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { auditCreatorApi, listCreatorDocumentsApi, pageCreatorsApi } from '@/api/admin/creator'
+
+/** 与后端 CreatorService 的状态取值保持一致 */
+export const CREATOR_STATUS = [
+  { value: 'pending', label: '待审核', tag: 'warning' },
+  { value: 'approved', label: '已通过', tag: 'success' },
+  { value: 'rejected', label: '已驳回', tag: 'danger' },
+  { value: 'frozen', label: '已冻结', tag: 'info' }
+]
+
+export const CREATOR_TYPE = [
+  { value: 'INDIVIDUAL', label: '个人' },
+  { value: 'COMPANY', label: '机构' }
+]
+
+export function creatorStatusMeta(status) {
+  return (
+    CREATOR_STATUS.find((item) => item.value === status) || { label: status || '-', tag: 'info' }
+  )
+}
+
+export function creatorTypeText(type) {
+  return CREATOR_TYPE.find((item) => item.value === type)?.label || type || '-'
+}
+
+export function useCreatorAudit() {
+  const rows = ref([])
+  const total = ref(0)
+  const loading = ref(false)
+  const keyword = ref('')
+  const statusFilter = ref(undefined)
+  const typeFilter = ref(undefined)
+  const currentPage = ref(1)
+  const pageSize = ref(10)
+
+  const auditVisible = ref(false)
+  const auditSaving = ref(false)
+  const auditTarget = ref(null)
+  const auditForm = reactive({ action: 'APPROVE', reason: '', rejectCode: '' })
+
+  const documentsVisible = ref(false)
+  const documentsLoading = ref(false)
+  const documents = ref([])
+  const documentsTarget = ref(null)
+
+  async function load() {
+    loading.value = true
+    try {
+      const res = await pageCreatorsApi({
+        pageIndex: currentPage.value,
+        pageSize: pageSize.value,
+        keyword: keyword.value.trim() || undefined,
+        status: statusFilter.value,
+        type: typeFilter.value
+      })
+      rows.value = res.data?.list || []
+      total.value = res.data?.total || 0
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function query() {
+    currentPage.value = 1
+    load()
+  }
+
+  function reset() {
+    keyword.value = ''
+    statusFilter.value = undefined
+    typeFilter.value = undefined
+    query()
+  }
+
+  function handleSizeChange() {
+    currentPage.value = 1
+    load()
+  }
+
+  async function openDocuments(row) {
+    documentsTarget.value = row
+    documentsVisible.value = true
+    documentsLoading.value = true
+    documents.value = []
+    try {
+      documents.value = (await listCreatorDocumentsApi(row.id)).data || []
+    } finally {
+      documentsLoading.value = false
+    }
+  }
+
+  function openAudit(row, action = 'APPROVE') {
+    auditTarget.value = row
+    auditForm.action = action
+    auditForm.reason = ''
+    auditForm.rejectCode = ''
+    auditVisible.value = true
+  }
+
+  async function confirmAudit() {
+    const row = auditTarget.value
+    if (!row) return
+    if (auditForm.action === 'REJECT' && !auditForm.reason.trim()) {
+      return ElMessage.warning('驳回必须填写原因')
+    }
+    auditSaving.value = true
+    try {
+      await auditCreatorApi(row.id, {
+        action: auditForm.action,
+        reason: auditForm.reason.trim(),
+        rejectCode: auditForm.rejectCode.trim()
+      })
+      ElMessage.success('审核已提交')
+      auditVisible.value = false
+      await load()
+    } finally {
+      auditSaving.value = false
+    }
+  }
+
+  /** 冻结是不可逆的运营动作，单独二次确认 */
+  async function freeze(row) {
+    try {
+      await ElMessageBox.confirm(`冻结后「${row.name}」将无法提交内容，确认冻结？`, '冻结创作者', {
+        confirmButtonText: '确认冻结',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+    } catch {
+      return
+    }
+    await auditCreatorApi(row.id, { action: 'FREEZE', reason: '运营冻结' })
+    ElMessage.success('已冻结')
+    await load()
+  }
+
+  onMounted(load)
+
+  return {
+    rows,
+    total,
+    loading,
+    keyword,
+    statusFilter,
+    typeFilter,
+    currentPage,
+    pageSize,
+    auditVisible,
+    auditSaving,
+    auditTarget,
+    auditForm,
+    documentsVisible,
+    documentsLoading,
+    documents,
+    documentsTarget,
+    load,
+    query,
+    reset,
+    handleSizeChange,
+    openDocuments,
+    openAudit,
+    confirmAudit,
+    freeze
+  }
+}

src/views/creator/composables/useSubmissionAudit.js

@@ -0,0 +1,136 @@
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { auditSubmissionApi, pageSubmissionsApi } from '@/api/admin/creator'
+
+export const SUBMISSION_STATUS = [
+  { value: 'DRAFT', label: '草稿', tag: 'info' },
+  { value: 'SUBMITTED', label: '已提交', tag: 'warning' },
+  { value: 'REVIEWING', label: '审核中', tag: 'warning' },
+  { value: 'APPROVED', label: '已通过', tag: 'success' },
+  { value: 'REJECTED', label: '已驳回', tag: 'danger' },
+  { value: 'WITHDRAWN', label: '已撤回', tag: 'info' }
+]
+
+export const SUBMISSION_TYPE = [
+  { value: 'CREATE', label: '新建' },
+  { value: 'UPDATE', label: '更新' },
+  { value: 'PUBLISH', label: '申请上线' },
+  { value: 'OFFLINE', label: '申请下线' }
+]
+
+export function submissionStatusMeta(status) {
+  return (
+    SUBMISSION_STATUS.find((item) => item.value === status) || {
+      label: status || '-',
+      tag: 'info'
+    }
+  )
+}
+
+export function submissionTypeText(type) {
+  return SUBMISSION_TYPE.find((item) => item.value === type)?.label || type || '-'
+}
+
+export function useSubmissionAudit() {
+  const rows = ref([])
+  const total = ref(0)
+  const loading = ref(false)
+  const statusFilter = ref('SUBMITTED')
+  const typeFilter = ref(undefined)
+  const dramaId = ref(undefined)
+  const currentPage = ref(1)
+  const pageSize = ref(10)
+
+  const auditVisible = ref(false)
+  const auditSaving = ref(false)
+  const auditTarget = ref(null)
+  const auditForm = reactive({ action: 'APPROVE', reason: '', rejectCode: '' })
+
+  async function load() {
+    loading.value = true
+    try {
+      const res = await pageSubmissionsApi({
+        pageIndex: currentPage.value,
+        pageSize: pageSize.value,
+        status: statusFilter.value,
+        type: typeFilter.value,
+        dramaId: dramaId.value || undefined
+      })
+      rows.value = res.data?.list || []
+      total.value = res.data?.total || 0
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function query() {
+    currentPage.value = 1
+    load()
+  }
+
+  function reset() {
+    statusFilter.value = 'SUBMITTED'
+    typeFilter.value = undefined
+    dramaId.value = undefined
+    query()
+  }
+
+  function handleSizeChange() {
+    currentPage.value = 1
+    load()
+  }
+
+  function openAudit(row, action = 'APPROVE') {
+    auditTarget.value = row
+    auditForm.action = action
+    auditForm.reason = ''
+    auditForm.rejectCode = ''
+    auditVisible.value = true
+  }
+
+  async function confirmAudit() {
+    const row = auditTarget.value
+    if (!row) return
+    if (auditForm.action === 'REJECT' && !auditForm.reason.trim()) {
+      return ElMessage.warning('驳回必须填写原因')
+    }
+    auditSaving.value = true
+    try {
+      await auditSubmissionApi(row.id, {
+        action: auditForm.action,
+        reason: auditForm.reason.trim(),
+        rejectCode: auditForm.rejectCode.trim()
+      })
+      ElMessage.success(
+        auditForm.action === 'APPROVE' ? '审核通过，已按类型落到短剧状态' : '审核结果已保存'
+      )
+      auditVisible.value = false
+      await load()
+    } finally {
+      auditSaving.value = false
+    }
+  }
+
+  onMounted(load)
+
+  return {
+    rows,
+    total,
+    loading,
+    statusFilter,
+    typeFilter,
+    dramaId,
+    currentPage,
+    pageSize,
+    auditVisible,
+    auditSaving,
+    auditTarget,
+    auditForm,
+    load,
+    query,
+    reset,
+    handleSizeChange,
+    openAudit,
+    confirmAudit
+  }
+}

src/views/dashboard/BusinessDashboardView.vue

@@ -0,0 +1,180 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import PageHeading from '@/views/components/PageHeading.vue'
+import { getDashboardOverviewApi, getTranscodeBoardApi } from '@/api/admin/dashboard'
+import { dateCell } from '@/utils/format'
+
+/**
+ * 指标展示配置：key 与后端 /admin/dashboard/overview 返回的字段一一对应，
+ * 不在前端编字段；口径说明见后端 DashboardService 注释与 docs/api-phase1.md「2.8」。
+ */
+const GROUPS = [
+  {
+    key: 'user',
+    title: '用户',
+    metrics: [
+      { key: 'total', label: '总用户数' },
+      { key: 'newToday', label: '今日新增' },
+      { key: 'new7d', label: '近 7 天新增' },
+      { key: 'active7d', label: '近 7 天活跃' },
+      { key: 'banned', label: '封禁' },
+      { key: 'limited', label: '受限' },
+      { key: 'deactivated', label: '已注销' }
+    ]
+  },
+  {
+    key: 'content',
+    title: '内容',
+    metrics: [
+      { key: 'dramaTotal', label: '短剧总数' },
+      { key: 'dramaPublished', label: '已上线短剧' },
+      { key: 'dramaReviewing', label: '待审短剧' },
+      { key: 'dramaDraft', label: '草稿短剧' },
+      { key: 'dramaOffline', label: '已下线短剧' },
+      { key: 'episodeTotal', label: '剧集总数' },
+      { key: 'episodePublished', label: '已上线剧集' },
+      { key: 'episodeWithMedia', label: '有片源剧集' },
+      { key: 'commentPending', label: '待审评论' },
+      { key: 'reportPending', label: '待处理举报' }
+    ]
+  },
+  {
+    key: 'playback',
+    title: '播放',
+    metrics: [
+      { key: 'viewTotal', label: '累计观看' },
+      { key: 'playTotal', label: '累计播放' },
+      { key: 'watchedDramas', label: '看过的剧（去重）' },
+      { key: 'finishedDramas', label: '看过且完播' },
+      { key: 'finishRate', label: '完播率' },
+      { key: 'playEvents7d', label: '近 7 天播放流水' },
+      { key: 'playEventsTotal', label: '播放流水总量' }
+    ]
+  },
+  {
+    key: 'revenue',
+    title: '收入',
+    metrics: [
+      { key: 'orderTotal', label: '订单总数' },
+      { key: 'orderDelivered', label: '已交付订单' },
+      { key: 'orderRefunded', label: '已退款订单' },
+      { key: 'paidAmount', label: '已支付金额' },
+      { key: 'coinRecharged', label: '金币充值' },
+      { key: 'coinConsumed', label: '金币消耗' },
+      { key: 'coinBalance', label: '金币余额' },
+      { key: 'entitlementActive', label: '有效权益' }
+    ]
+  },
+  {
+    key: 'cost',
+    title: '成本',
+    metrics: [
+      { key: 'transcodeQueued', label: '转码排队' },
+      { key: 'transcodeRunning', label: '转码中' },
+      { key: 'transcodeFailed', label: '转码失败' },
+      { key: 'transcodeSuccess', label: '转码成功' },
+      { key: 'renditions', label: '多码率产物' },
+      { key: 'otpSent7d', label: '近 7 天验证码' },
+      { key: 'cdnTrafficBytes', label: 'CDN 流量' }
+    ]
+  }
+]
+
+const loading = ref(false)
+const overview = ref(null)
+const transcode = ref(null)
+const lastUpdated = ref('')
+
+async function load() {
+  loading.value = true
+  try {
+    const [board, queue] = await Promise.all([getDashboardOverviewApi(), getTranscodeBoardApi()])
+    overview.value = board.data || null
+    transcode.value = queue.data || null
+    lastUpdated.value = new Date().toLocaleString()
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 取不到的指标后端返回 null，这里显示「暂无数据源」而不是 0 */
+function display(value) {
+  if (value === null || value === undefined) return '暂无数据源'
+  if (typeof value === 'number' && !Number.isInteger(value)) return value.toFixed(3)
+  return value
+}
+
+function groupValue(groupKey, metricKey) {
+  return overview.value?.[groupKey]?.[metricKey]
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="数据看板"
+    title="运营大盘"
+    description="用户、内容、播放、收入与成本总览，以及转码队列。"
+  >
+    <el-button :loading="loading" @click="load">刷新</el-button>
+  </PageHeading>
+
+  <section v-loading="loading" class="panel">
+    <p class="console-hint"
+      >数据时间：{{ lastUpdated }}（口径见每组的后端定义，缺数据源显示「暂无数据源」）</p
+    >
+    <div v-for="group in GROUPS" :key="group.key" class="board-group">
+      <h3 class="board-title">{{ group.title }}</h3>
+      <div class="board-grid">
+        <div v-for="metric in group.metrics" :key="metric.key" class="board-card">
+          <span class="board-label">{{ metric.label }}</span>
+          <span
+            class="board-value"
+            :class="{ 'board-value-empty': groupValue(group.key, metric.key) === null }"
+          >
+            {{ display(groupValue(group.key, metric.key)) }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <el-alert
+      v-if="overview?.notes?.length"
+      class="board-notes"
+      type="info"
+      :closable="false"
+      show-icon
+      title="口径与缺失数据源说明"
+    >
+      <ul>
+        <li v-for="note in overview.notes" :key="note">{{ note }}</li>
+      </ul>
+    </el-alert>
+  </section>
+
+  <section class="panel board-transcode">
+    <h3 class="board-title">转码看板</h3>
+    <p class="console-hint">
+      {{ transcode?.notes?.join('；') || '' }}
+    </p>
+    <el-table
+      :data="transcode?.failedTasks || []"
+      border
+      class="drama-el-table"
+      empty-text="当前没有失败的转码任务"
+    >
+      <el-table-column prop="id" label="任务ID" width="90" />
+      <el-table-column prop="episodeId" label="剧集ID" width="90" />
+      <el-table-column prop="status" label="状态" width="110" />
+      <el-table-column prop="retryCount" label="重试次数" width="100" />
+      <el-table-column prop="errorMsg" label="失败原因" min-width="240" show-overflow-tooltip />
+      <el-table-column
+        prop="createdAt"
+        label="创建时间"
+        min-width="165"
+        show-overflow-tooltip
+        :formatter="dateCell"
+      />
+    </el-table>
+  </section>
+</template>

src/views/governance/ContentGovernanceView.vue

@@ -0,0 +1,630 @@
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import PageHeading from '@/views/components/PageHeading.vue'
+import { useRbac } from '@/stores/rbac'
+import { dateCell } from '@/utils/format'
+import {
+  auditCommentApi,
+  createSensitiveWordApi,
+  deleteCommentApi,
+  deleteSensitiveWordApi,
+  handleReportApi,
+  pageCommentsApi,
+  pageReportsApi,
+  pageSensitiveWordsApi,
+  updateSensitiveWordApi
+} from '@/api/admin/governance'
+
+const { can } = useRbac()
+const canCommentAudit = can('comment:audit')
+const canReportHandle = can('report:handle')
+const canWordUpdate = can('sensitive-word:update')
+
+const activeTab = ref('comments')
+
+const COMMENT_STATUS = [
+  { value: 'pending', label: '待审核', tag: 'warning' },
+  { value: 'published', label: '已发布', tag: 'success' },
+  { value: 'rejected', label: '已驳回', tag: 'danger' },
+  { value: 'deleted', label: '已删除', tag: 'info' }
+]
+const REPORT_STATUS = [
+  { value: 'pending', label: '待处理', tag: 'warning' },
+  { value: 'handled', label: '已处理', tag: 'success' },
+  { value: 'rejected', label: '已驳回', tag: 'info' }
+]
+const WORD_LEVELS = [
+  { value: 'BLOCK', label: '禁止发布' },
+  { value: 'REVIEW', label: '转人工审核' },
+  { value: 'REPLACE', label: '替换后放行' }
+]
+
+function meta(list, value) {
+  return list.find((item) => item.value === value) || { label: value || '-', tag: 'info' }
+}
+function levelText(level) {
+  return WORD_LEVELS.find((item) => item.value === level)?.label || level
+}
+
+const comments = reactive({
+  rows: [],
+  total: 0,
+  loading: false,
+  page: 1,
+  size: 10,
+  status: 'pending',
+  keyword: ''
+})
+async function loadComments() {
+  comments.loading = true
+  try {
+    const res = await pageCommentsApi({
+      pageIndex: comments.page,
+      pageSize: comments.size,
+      status: comments.status || undefined,
+      keyword: comments.keyword.trim() || undefined
+    })
+    comments.rows = res.data?.list || []
+    comments.total = res.data?.total || 0
+  } finally {
+    comments.loading = false
+  }
+}
+function queryComments() {
+  comments.page = 1
+  loadComments()
+}
+async function auditComment(row, result) {
+  if (result === 'REJECT') {
+    let reason = ''
+    try {
+      const { value } = await ElMessageBox.prompt('请填写驳回原因（会进入审核留证）', '驳回评论', {
+        confirmButtonText: '确认驳回',
+        cancelButtonText: '取消',
+        inputValidator: (val) => (val && val.trim() ? true : '驳回原因不能为空')
+      })
+      reason = value
+    } catch {
+      return
+    }
+    await auditCommentApi(row.id, {
+      result: 'REJECT',
+      reasonText: reason.trim(),
+      reasonCode: 'VIOLATION'
+    })
+  } else {
+    await auditCommentApi(row.id, { result: 'PASS' })
+  }
+  ElMessage.success(result === 'PASS' ? '评论已通过' : '评论已驳回')
+  await loadComments()
+}
+async function removeComment(row) {
+  try {
+    await ElMessageBox.confirm('删除后该评论对用户不可见，确认删除？', '删除评论', {
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+      confirmButtonClass: 'el-button--danger'
+    })
+  } catch {
+    return
+  }
+  await deleteCommentApi(row.id)
+  ElMessage.success('评论已删除')
+  await loadComments()
+}
+
+const reports = reactive({
+  rows: [],
+  total: 0,
+  loading: false,
+  page: 1,
+  size: 10,
+  status: 'pending'
+})
+async function loadReports() {
+  reports.loading = true
+  try {
+    const res = await pageReportsApi({
+      pageIndex: reports.page,
+      pageSize: reports.size,
+      status: reports.status || undefined
+    })
+    reports.rows = res.data?.list || []
+    reports.total = res.data?.total || 0
+  } finally {
+    reports.loading = false
+  }
+}
+function queryReports() {
+  reports.page = 1
+  loadReports()
+}
+const handleVisible = ref(false)
+const handleSaving = ref(false)
+const handleTarget = ref(null)
+const handleForm = reactive({ status: 'handled', note: '', banTarget: false })
+function openHandle(row) {
+  handleTarget.value = row
+  handleForm.status = 'handled'
+  handleForm.note = ''
+  handleForm.banTarget = false
+  handleVisible.value = true
+}
+async function confirmHandle() {
+  const row = handleTarget.value
+  if (!row) return
+  if (handleForm.status === 'handled' && !handleForm.note.trim()) {
+    return ElMessage.warning('结论成立时请填写处理说明')
+  }
+  handleSaving.value = true
+  try {
+    await handleReportApi(row.id, {
+      status: handleForm.status,
+      note: handleForm.note.trim(),
+      banTarget: handleForm.banTarget,
+      banReason: handleForm.note.trim()
+    })
+    ElMessage.success(handleForm.status === 'handled' ? '工单已处理' : '工单已驳回')
+    handleVisible.value = false
+    await loadReports()
+  } finally {
+    handleSaving.value = false
+  }
+}
+
+const words = reactive({
+  rows: [],
+  total: 0,
+  loading: false,
+  page: 1,
+  size: 10,
+  keyword: '',
+  level: undefined
+})
+async function loadWords() {
+  words.loading = true
+  try {
+    const res = await pageSensitiveWordsApi({
+      pageIndex: words.page,
+      pageSize: words.size,
+      keyword: words.keyword.trim() || undefined,
+      level: words.level || undefined
+    })
+    words.rows = res.data?.list || []
+    words.total = res.data?.total || 0
+  } finally {
+    words.loading = false
+  }
+}
+function queryWords() {
+  words.page = 1
+  loadWords()
+}
+const wordVisible = ref(false)
+const wordSaving = ref(false)
+const wordEditingId = ref(null)
+const wordForm = reactive({
+  word: '',
+  category: '',
+  level: 'REVIEW',
+  replaceText: '*',
+  language: 'id-ID',
+  status: 1
+})
+function openWord(row) {
+  wordEditingId.value = row?.id ?? null
+  Object.assign(wordForm, {
+    word: row?.word ?? '',
+    category: row?.category ?? '',
+    level: row?.level ?? 'REVIEW',
+    replaceText: row?.replaceText ?? '*',
+    language: row?.language ?? 'id-ID',
+    status: row?.status ?? 1
+  })
+  wordVisible.value = true
+}
+async function saveWord() {
+  if (!wordForm.word.trim()) return ElMessage.warning('请输入敏感词')
+  wordSaving.value = true
+  try {
+    const payload = { ...wordForm, word: wordForm.word.trim() }
+    if (wordEditingId.value) {
+      await updateSensitiveWordApi(wordEditingId.value, payload)
+    } else {
+      await createSensitiveWordApi(payload)
+    }
+    ElMessage.success('已保存，词库即时生效')
+    wordVisible.value = false
+    await loadWords()
+  } finally {
+    wordSaving.value = false
+  }
+}
+async function removeWord(row) {
+  try {
+    await ElMessageBox.confirm(`确认从词库删除「${row.word}」？`, '删除敏感词', {
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+      confirmButtonClass: 'el-button--danger'
+    })
+  } catch {
+    return
+  }
+  await deleteSensitiveWordApi(row.id)
+  ElMessage.success('已删除')
+  await loadWords()
+}
+
+const tabLoaded = {}
+onMounted(() => {
+  loadComments()
+  tabLoaded.comments = true
+})
+function onTabChange(name) {
+  if (tabLoaded[name]) return
+  tabLoaded[name] = true
+  if (name === 'reports') loadReports()
+  if (name === 'words') loadWords()
+}
+
+const handleTargetText = computed(() => {
+  const row = handleTarget.value
+  return row ? `${row.targetType} #${row.targetId}` : ''
+})
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="内容治理"
+    title="评论与举报"
+    description="审核评论、处理举报工单、维护敏感词库。"
+  />
+
+  <section class="panel">
+    <el-tabs v-model="activeTab" @tab-change="onTabChange">
+      <el-tab-pane label="评论审核" name="comments">
+        <div class="console-toolbar">
+          <el-input
+            v-model="comments.keyword"
+            class="console-keyword"
+            clearable
+            placeholder="搜索评论内容"
+            @keyup.enter="queryComments"
+            @clear="queryComments"
+          />
+          <el-select
+            v-model="comments.status"
+            class="console-select"
+            clearable
+            placeholder="全部状态"
+            @change="queryComments"
+          >
+            <el-option
+              v-for="item in COMMENT_STATUS"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-button type="primary" @click="queryComments">查询</el-button>
+          <span class="console-count">共 {{ comments.total }} 条</span>
+        </div>
+        <el-table
+          v-loading="comments.loading"
+          :data="comments.rows"
+          row-key="id"
+          border
+          class="drama-el-table"
+          empty-text="没有符合条件的评论"
+        >
+          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column prop="nickname" label="用户" min-width="120" show-overflow-tooltip />
+          <el-table-column prop="content" label="内容" min-width="220" show-overflow-tooltip />
+          <el-table-column prop="dramaId" label="短剧ID" width="90" />
+          <el-table-column label="状态" width="100">
+            <template #default="{ row }">
+              <el-tag :type="meta(COMMENT_STATUS, row.status).tag" effect="light">{{
+                meta(COMMENT_STATUS, row.status).label
+              }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="likeCount" label="点赞" width="80" />
+          <el-table-column prop="replyCount" label="回复" width="80" />
+          <el-table-column prop="reportCount" label="举报" width="80" />
+          <el-table-column
+            prop="createdAt"
+            label="时间"
+            min-width="165"
+            show-overflow-tooltip
+            :formatter="dateCell"
+          />
+          <el-table-column label="操作" width="200" fixed="right">
+            <template #default="{ row }">
+              <div class="table-actions">
+                <el-button
+                  v-if="canCommentAudit"
+                  type="primary"
+                  size="small"
+                  @click="auditComment(row, 'PASS')"
+                  >通过</el-button
+                >
+                <el-button v-if="canCommentAudit" size="small" @click="auditComment(row, 'REJECT')"
+                  >驳回</el-button
+                >
+                <el-button
+                  v-if="canCommentAudit"
+                  size="small"
+                  class="danger-action"
+                  @click="removeComment(row)"
+                  >删除</el-button
+                >
+                <el-button v-if="!canCommentAudit" size="small" disabled>只读</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination
+            v-model:current-page="comments.page"
+            v-model:page-size="comments.size"
+            :page-sizes="[10, 20, 50]"
+            :total="comments.total"
+            layout="total, prev, pager, next, sizes"
+            background
+            @current-change="loadComments"
+            @size-change="queryComments"
+          />
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="举报工单" name="reports">
+        <div class="console-toolbar">
+          <el-select
+            v-model="reports.status"
+            class="console-select"
+            clearable
+            placeholder="全部状态"
+            @change="queryReports"
+          >
+            <el-option
+              v-for="item in REPORT_STATUS"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-button type="primary" @click="queryReports">查询</el-button>
+          <span class="console-count">共 {{ reports.total }} 条</span>
+        </div>
+        <el-table
+          v-loading="reports.loading"
+          :data="reports.rows"
+          row-key="id"
+          border
+          class="drama-el-table"
+          empty-text="没有符合条件的工单"
+        >
+          <el-table-column prop="id" label="工单ID" width="90" />
+          <el-table-column prop="targetType" label="对象" width="100" />
+          <el-table-column prop="targetId" label="对象ID" width="90" />
+          <el-table-column prop="reasonCode" label="原因码" width="120" />
+          <el-table-column
+            prop="description"
+            label="补充说明"
+            min-width="180"
+            show-overflow-tooltip
+          />
+          <el-table-column prop="reporterId" label="举报人" width="90" />
+          <el-table-column label="状态" width="100">
+            <template #default="{ row }">
+              <el-tag :type="meta(REPORT_STATUS, row.status).tag" effect="light">{{
+                meta(REPORT_STATUS, row.status).label
+              }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="createdAt"
+            label="时间"
+            min-width="165"
+            show-overflow-tooltip
+            :formatter="dateCell"
+          />
+          <el-table-column label="操作" width="130" fixed="right">
+            <template #default="{ row }">
+              <div class="table-actions">
+                <el-button
+                  v-if="canReportHandle && row.status === 'pending'"
+                  type="primary"
+                  size="small"
+                  @click="openHandle(row)"
+                  >处理</el-button
+                >
+                <span v-else class="console-muted">{{
+                  row.status === 'pending' ? '只读' : '已处理'
+                }}</span>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination
+            v-model:current-page="reports.page"
+            v-model:page-size="reports.size"
+            :page-sizes="[10, 20, 50]"
+            :total="reports.total"
+            layout="total, prev, pager, next, sizes"
+            background
+            @current-change="loadReports"
+            @size-change="queryReports"
+          />
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="敏感词库" name="words">
+        <div class="console-toolbar">
+          <el-input
+            v-model="words.keyword"
+            class="console-keyword"
+            clearable
+            placeholder="搜索敏感词"
+            @keyup.enter="queryWords"
+            @clear="queryWords"
+          />
+          <el-select
+            v-model="words.level"
+            class="console-select"
+            clearable
+            placeholder="全部级别"
+            @change="queryWords"
+          >
+            <el-option
+              v-for="item in WORD_LEVELS"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-button type="primary" @click="queryWords">查询</el-button>
+          <el-button v-if="canWordUpdate" type="primary" @click="openWord(null)"
+            >新增敏感词</el-button
+          >
+          <span class="console-count">共 {{ words.total }} 个词</span>
+        </div>
+        <el-table
+          v-loading="words.loading"
+          :data="words.rows"
+          row-key="id"
+          border
+          class="drama-el-table"
+          empty-text="词库为空"
+        >
+          <el-table-column prop="word" label="敏感词" min-width="160" show-overflow-tooltip />
+          <el-table-column prop="category" label="分类" width="120" />
+          <el-table-column label="处置级别" width="140">
+            <template #default="{ row }">{{ levelText(row.level) }}</template>
+          </el-table-column>
+          <el-table-column prop="replaceText" label="替换为" width="100" />
+          <el-table-column prop="language" label="语言" width="100" />
+          <el-table-column label="启用" width="90">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 1 ? 'success' : 'info'" effect="light">{{
+                row.status === 1 ? '启用' : '停用'
+              }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="150" fixed="right">
+            <template #default="{ row }">
+              <div class="table-actions">
+                <el-button v-if="canWordUpdate" type="primary" size="small" @click="openWord(row)"
+                  >编辑</el-button
+                >
+                <el-button
+                  v-if="canWordUpdate"
+                  size="small"
+                  class="danger-action"
+                  @click="removeWord(row)"
+                  >删除</el-button
+                >
+                <span v-if="!canWordUpdate" class="console-muted">只读</span>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination">
+          <el-pagination
+            v-model:current-page="words.page"
+            v-model:page-size="words.size"
+            :page-sizes="[10, 20, 50]"
+            :total="words.total"
+            layout="total, prev, pager, next, sizes"
+            background
+            @current-change="loadWords"
+            @size-change="queryWords"
+          />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </section>
+
+  <el-dialog v-model="handleVisible" title="处理举报工单" width="480px">
+    <el-form label-position="top">
+      <el-form-item label="工单对象">
+        <el-input :model-value="handleTargetText" disabled />
+      </el-form-item>
+      <el-form-item label="处理结论">
+        <el-radio-group v-model="handleForm.status">
+          <el-radio value="handled">举报成立</el-radio>
+          <el-radio value="rejected">举报不成立</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="处理说明">
+        <el-input
+          v-model="handleForm.note"
+          type="textarea"
+          :rows="3"
+          maxlength="200"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item v-if="handleForm.status === 'handled'">
+        <el-checkbox v-model="handleForm.banTarget">同时封禁被举报用户</el-checkbox>
+      </el-form-item>
+      <el-alert
+        v-if="handleForm.status === 'handled'"
+        type="warning"
+        :closable="false"
+        show-icon
+        title="结论成立会联动驳回被举报评论；勾选封禁会立即使该用户所有会话失效"
+      />
+    </el-form>
+    <template #footer>
+      <el-button @click="handleVisible = false">取消</el-button>
+      <el-button type="primary" :loading="handleSaving" @click="confirmHandle">提交</el-button>
+    </template>
+  </el-dialog>
+
+  <el-dialog
+    v-model="wordVisible"
+    :title="wordEditingId ? '编辑敏感词' : '新增敏感词'"
+    width="460px"
+  >
+    <el-form label-position="top">
+      <el-form-item label="敏感词" required>
+        <el-input v-model="wordForm.word" maxlength="64" placeholder="例如：赌博" />
+      </el-form-item>
+      <el-form-item label="分类">
+        <el-input
+          v-model="wordForm.category"
+          maxlength="32"
+          placeholder="例如：AD / PORN / ABUSE"
+        />
+      </el-form-item>
+      <el-form-item label="处置级别">
+        <el-select v-model="wordForm.level" class="console-full">
+          <el-option
+            v-for="item in WORD_LEVELS"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="wordForm.level === 'REPLACE'" label="替换为">
+        <el-input v-model="wordForm.replaceText" maxlength="16" />
+      </el-form-item>
+      <el-form-item label="语言">
+        <el-input v-model="wordForm.language" maxlength="16" placeholder="id-ID" />
+      </el-form-item>
+      <el-form-item label="启用">
+        <el-switch v-model="wordForm.status" :active-value="1" :inactive-value="0" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="wordVisible = false">取消</el-button>
+      <el-button type="primary" :loading="wordSaving" @click="saveWord">保存</el-button>
+    </template>
+  </el-dialog>
+</template>