Merge branch fix/app-version-batch

src/api/admin/appVersion.ts

@@ -0,0 +1,69 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+
+export interface AppVersionItem {
+  id: string
+  platform: 'ANDROID' | 'IOS'
+  platformText: string
+  versionCode: number
+  versionName: string
+  downloadUrl: string
+  updateContent?: string
+  forceUpdate: number
+  minSupportedCode: number
+  status: number
+  statusText: string
+  releasedAt?: string
+  createdAt?: string
+}
+
+export interface AppVersionSaveData {
+  platform: 'ANDROID' | 'IOS'
+  versionCode: number
+  versionName: string
+  downloadUrl: string
+  updateContent?: string
+  forceUpdate?: 0 | 1
+  minSupportedCode?: number
+}
+
+export const listAppVersionsApi = (params: {
+  pageIndex?: number
+  pageSize?: number
+  platform?: string
+  status?: number
+  keyword?: string
+}) => {
+  return request.get<{ total: number; list: AppVersionItem[] }>({
+    url: '/admin/app-versions/page',
+    params
+  })
+}
+
+export const getAppVersionApi = (id: string | number) => {
+  return request.get<AppVersionItem>({ url: `/admin/app-versions/${id}` })
+}
+
+export const createAppVersionApi = (data: AppVersionSaveData) => {
+  return request.post<string>({ url: '/admin/app-versions', data })
+}
+
+export const batchCreateAppVersionsApi = (data: AppVersionSaveData[]) => {
+  return request.post<string[]>({ url: '/admin/app-versions/batch', data })
+}
+
+export const updateAppVersionApi = (id: string | number, data: AppVersionSaveData) => {
+  return request.post<void>({ url: `/admin/app-versions/${id}`, data })
+}
+
+export const updateAppVersionStatusApi = (id: string | number, status: 0 | 1) => {
+  return request.post<void>({
+    url: `/admin/app-versions/${id}/status`,
+    params: { status }
+  })
+}
+
+export const deleteAppVersionApi = (id: string | number) => {
+  return request.delete<void>({ url: `/admin/app-versions/${id}` })
+}

src/api/admin/dashboard.ts

@@ -27,6 +27,28 @@ export interface TranscodeBoard {
   notes: string[]
 }
 
+/** 近 7 天每日趋势（给折线图用）。 */
+export interface DashboardTrend {
+  dates: string[]
+  newUsers: number[]
+  playEvents: number[]
+  newTranscodes: number[]
+  transcodeSuccess: number[]
+}
+
+/** 分布项（给饼图用）。 */
+export interface DistributionItem {
+  label: string
+  value: number
+}
+
+export interface DashboardDistribution {
+  dramaStatus: Record<string, number>
+  transcodeStatus: Record<string, number>
+  episodeMedia: Record<string, number>
+  pendingModeration: DistributionItem[]
+}
+
 export const getDashboardOverviewApi = () => {
   return request.get<DashboardOverview>({ url: '/admin/dashboard/overview' })
 }
@@ -34,3 +56,11 @@ export const getDashboardOverviewApi = () => {
 export const getTranscodeBoardApi = () => {
   return request.get<TranscodeBoard>({ url: '/admin/dashboard/transcode' })
 }
+
+export const getDashboardTrendApi = () => {
+  return request.get<DashboardTrend>({ url: '/admin/dashboard/trend' })
+}
+
+export const getDashboardDistributionApi = () => {
+  return request.get<DashboardDistribution>({ url: '/admin/dashboard/distribution' })
+}

src/api/admin/transcode.ts

@@ -1,7 +1,12 @@
 // Author: fruit.com.cn
 
 import request from '@/axios'
-import type { EpisodeTranscodeItem, MediaThumbnailResult, TranscodeTriggerResult } from './types'
+import type {
+  EpisodeTranscodeItem,
+  MediaThumbnailResult,
+  TranscodeBackfillResult,
+  TranscodeTriggerResult
+} from './types'
 
 /** 分集编辑页聚合查询转码任务、清晰度与帧图。 */
 export const getEpisodeTranscodeApi = (episodeId: number | string) => {
@@ -28,3 +33,11 @@ export const triggerMediaTranscodeApi = (mediaAssetId: string) => {
     url: `/admin/media/${mediaAssetId}/transcode`
   })
 }
+
+/** 手动补齐转码：扫描缺码率产物/帧图的分集并入队。 */
+export const runTranscodeBackfillApi = (batchSize?: number) => {
+  return request.post<TranscodeBackfillResult>({
+    url: '/admin/media/transcode/backfill',
+    params: batchSize ? { batchSize } : undefined
+  })
+}

src/api/admin/types.ts

@@ -321,6 +321,16 @@ export interface TranscodeTriggerResult {
   status: string
 }
 
+export interface TranscodeBackfillItem {
+  episodeId: string
+  taskId: string
+}
+
+export interface TranscodeBackfillResult {
+  triggered: number
+  items: TranscodeBackfillItem[]
+}
+
 export interface BannerItem {
   id: number
   imageUrl: string

src/locales/en.ts

@@ -657,6 +657,11 @@ export default {
     saveFailed: 'Failed to save transcode settings',
     loadFailed: 'Failed to load transcode settings',
     noPermission: 'This account cannot manage transcode settings',
+    backfill: 'Backfill transcodes',
+    backfillTip: 'Scan episodes missing renditions or thumbnails and enqueue them for transcoding',
+    backfillDone: 'Enqueued {count} episodes into the transcode queue',
+    backfillEmpty: 'No episodes need transcoding',
+    backfillFailed: 'Failed to run transcode backfill',
     enabled: 'Enable transcode profile',
     enabledDescription:
       'Marks whether this transcode profile is enabled; the quality ladder is still validated when saved.',

src/locales/zh-CN.ts

@@ -648,6 +648,11 @@ export default {
     saveFailed: '转码设置保存失败',
     loadFailed: '转码设置加载失败',
     noPermission: '当前账号没有转码设置权限',
+    backfill: '立即补齐转码',
+    backfillTip: '扫描缺少清晰度产物或帧图的分集并自动入队转码',
+    backfillDone: '本轮已补入 {count} 个分集进入转码队列',
+    backfillEmpty: '没有需要补转的分集',
+    backfillFailed: '补齐转码执行失败',
     enabled: '启用转码配置',
     enabledDescription: '标记当前转码配置是否启用；保存时仍会校验下方档位。',
     segmentSeconds: 'HLS 分片时长（秒）',

src/store/modules/app.ts

@@ -47,7 +47,7 @@ export const useAppStore = defineStore('app', {
       breadcrumb: true, // 面包屑
       breadcrumbIcon: true, // 面包屑图标
       collapse: false, // 折叠菜单
-      uniqueOpened: false, // 是否只保持一个子菜单的展开
+      uniqueOpened: true, // 是否只保持一个子菜单的展开（菜单手风琴）
       hamburger: true, // 折叠图标
       screenfull: true, // 全屏图标
       size: true, // 尺寸图标
@@ -71,9 +71,9 @@ export const useAppStore = defineStore('app', {
         // 左侧菜单边框颜色
         leftMenuBorderColor: 'inherit',
         // 左侧菜单背景颜色
-        leftMenuBgColor: '#001529',
+        leftMenuBgColor: '#fff',
         // 左侧菜单浅色背景颜色
-        leftMenuBgLightColor: '#0f2438',
+        leftMenuBgLightColor: '#fff',
         // 左侧菜单选中背景颜色
         leftMenuBgActiveColor: 'var(--app-primary-strong)',
         // 左侧菜单收起选中背景颜色
@@ -346,8 +346,10 @@ export const useAppStore = defineStore('app', {
       if (context.store.theme?.elColorPrimary !== '#c4322a') {
         context.store.setTheme({ elColorPrimary: '#c4322a' })
       }
-      context.store.setMenuTheme(context.store.theme.leftMenuBgColor)
-      context.store.setHeaderTheme(context.store.theme.topHeaderBgColor)
+      // 头部主题默认强制为白色、菜单主题也强制为白色
+      // 避免老用户浏览器残留其他主题色，清缓存也能恢复到项目品牌配色
+      context.store.setHeaderTheme('#fff')
+      context.store.setMenuTheme('#fff')
     }
   }
 })

src/styles/var.css

@@ -6,23 +6,25 @@
 
   --left-menu-min-width: 64px;
 
-  --left-menu-bg-color: #17110f;
+  --left-menu-bg-color: #fff;
 
-  --left-menu-bg-light-color: #221815;
+  --left-menu-bg-light-color: #fff;
 
-  --left-menu-bg-active-color: var(--app-primary-strong);
+  --left-menu-bg-active-color: rgba(196, 50, 42, 0.1);
 
-  --left-menu-text-color: #d7cbc4;
+  --left-menu-text-color: #333;
 
-  --left-menu-text-active-color: #fff;
+  --left-menu-text-active-color: var(--el-color-primary);
 
-  --left-menu-collapse-bg-active-color: var(--app-primary-strong);
+  --left-menu-border-color: #eee;
+
+  --left-menu-collapse-bg-active-color: rgba(196, 50, 42, 0.1);
   /* left menu end */
 
   /* logo start */
   --logo-height: 50px;
 
-  --logo-title-text-color: #fff;
+  --logo-title-text-color: #303133;
   /* logo end */
 
   /* header start */

src/views/contentManagement/upload/BatchUploadDialog.vue

@@ -326,17 +326,17 @@ function onEpisodesCreated(): void {
 
 .batch-upload-hint {
   margin: 0 0 12px;
-  font-size: 13px;
   color: var(--el-text-color-secondary);
+  font-size: 13px;
 }
 
 .batch-upload-rejected {
-  padding: 8px 12px;
   margin-bottom: 12px;
-  font-size: 12px;
-  color: var(--el-color-danger);
-  background: color-mix(in srgb, var(--el-color-danger) 8%, transparent);
+  padding: 8px 12px;
   border-radius: 6px;
+  background: color-mix(in srgb, var(--el-color-danger) 8%, transparent);
+  color: var(--el-color-danger);
+  font-size: 12px;
 }
 
 .batch-upload-rejected p {
@@ -348,12 +348,12 @@ function onEpisodesCreated(): void {
 }
 
 .batch-upload-summary {
-  padding: 8px 12px;
   margin: 0 0 12px;
-  font-size: 13px;
-  color: var(--el-text-color-primary);
-  background: color-mix(in srgb, var(--el-color-success) 10%, transparent);
+  padding: 8px 12px;
   border-radius: 6px;
+  background: color-mix(in srgb, var(--el-color-success) 10%, transparent);
+  color: var(--el-text-color-primary);
+  font-size: 13px;
 }
 
 .batch-upload-list {

src/views/contentManagement/upload/CreateEpisodesDialog.vue

@@ -202,9 +202,9 @@ function hasFailed(): boolean {
 <style scoped>
 .create-episode-hint {
   margin: 0 0 12px;
+  color: var(--el-text-color-secondary);
   font-size: 13px;
   line-height: 1.5;
-  color: var(--el-text-color-secondary);
 }
 
 .create-episode-head,
@@ -229,8 +229,8 @@ function hasFailed(): boolean {
 
 .create-episode-head {
   margin-bottom: 8px;
-  font-size: 12px;
   color: var(--el-text-color-secondary);
+  font-size: 12px;
 }
 
 .create-episode-list {
@@ -253,8 +253,8 @@ function hasFailed(): boolean {
 }
 
 .create-episode-result {
-  font-size: 12px;
   color: var(--el-text-color-secondary);
+  font-size: 12px;
 }
 
 .create-episode-row.is-saved .create-episode-result {

src/views/contentManagement/upload/UploadTaskRow.vue

@@ -100,10 +100,10 @@ const canRetry = computed(() => props.item.status === 'failed')
 }
 
 .upload-task-row__index {
-  min-width: 1.5em;
-  font-size: 13px;
-  color: var(--el-text-color-secondary);
   flex: 0 0 auto;
+  min-width: 1.5em;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
   font-variant-numeric: tabular-nums;
 }
 
@@ -116,22 +116,22 @@ const canRetry = computed(() => props.item.status === 'failed')
 
 .upload-task-row__error {
   margin: 6px 0 0;
-  font-size: 12px;
   color: var(--el-color-danger);
+  font-size: 12px;
 }
 
 .upload-task-row__actions {
-  display: flex;
   margin-top: 8px;
-  margin-left: auto;
+  display: flex;
   gap: 8px;
   justify-content: flex-end;
+  margin-left: auto;
 }
 
 .upload-task-row.is-failed {
-  padding-right: 8px;
-  padding-left: 8px;
   background: color-mix(in srgb, var(--el-color-danger) 6%, transparent);
   border-radius: 6px;
+  padding-left: 8px;
+  padding-right: 8px;
 }
 </style>

src/views/dashboard/BusinessDashboardView.vue

@@ -1,145 +1,385 @@
 <!-- Author: fruit.com.cn -->
 
-<script setup>
-import { onMounted, ref } from 'vue'
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import PageHeading from '@/views/components/PageHeading.vue'
-import { getDashboardOverviewApi, getTranscodeBoardApi } from '@/api/admin/dashboard'
-import { dateCell } from '@/utils/format'
+import echarts from '@/plugins/echarts'
+import {
+  getDashboardDistributionApi,
+  getDashboardOverviewApi,
+  getDashboardTrendApi,
+  getTranscodeBoardApi
+} from '@/api/admin/dashboard'
+import type {
+  DashboardDistribution,
+  DashboardOverview,
+  DashboardTrend,
+  TranscodeBoard
+} from '@/api/admin/dashboard'
+import { dateCell, formatCount } 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 HIGHLIGHT_CARDS = [
+  { group: 'user', key: 'total', label: '总用户数', color: '#5B8FF9' },
+  { group: 'user', key: 'newToday', label: '今日新增', color: '#5AD8A6' },
+  { group: 'content', key: 'dramaPublished', label: '已上线短剧', color: '#F6BD16' },
+  { group: 'content', key: 'episodeWithMedia', label: '有片源剧集', color: '#E86452' },
+  { group: 'playback', key: 'playTotal', label: '累计播放', color: '#6DC8EC' },
+  { group: 'playback', key: 'playEvents7d', label: '近 7 天播放', color: '#945FB9' },
+  { group: 'cost', key: 'transcodeRunning', label: '转码中', color: '#FF9845' },
+  { group: 'cost', key: 'transcodeQueued', label: '转码排队', color: '#1E9493' }
 ]
 
 const loading = ref(false)
-const overview = ref(null)
-const transcode = ref(null)
+const overview = ref<DashboardOverview | null>(null)
+const trend = ref<DashboardTrend | null>(null)
+const distribution = ref<DashboardDistribution | null>(null)
+const transcode = ref<TranscodeBoard | null>(null)
 const lastUpdated = ref('')
 
+/** ECharts 容器 ref 与实例，统一管理 resize / dispose。 */
+const trendRef = ref<HTMLElement>()
+const dramaPieRef = ref<HTMLElement>()
+const transcodePieRef = ref<HTMLElement>()
+const episodePieRef = ref<HTMLElement>()
+const chartInstances: echarts.ECharts[] = []
+
+const statusLabel = {
+  reviewing: '待审',
+  published: '已上线',
+  draft: '草稿',
+  offline: '已下线'
+} as const
+
+const transcodeStatusLabel = {
+  QUEUED: '排队中',
+  RUNNING: '执行中',
+  SUCCESS: '成功',
+  FAILED: '失败',
+  CANCELED: '已取消'
+} as const
+
+function groupValue(groupKey: string, metricKey: string) {
+  const g = overview.value?.[groupKey as keyof DashboardOverview] as
+    | Record<string, number>
+    | undefined
+  return g?.[metricKey]
+}
+
+function display(value: unknown) {
+  if (value === null || value === undefined) return '暂无数据源'
+  if (typeof value === 'number' && !Number.isInteger(value)) return value.toFixed(3)
+  return String(value)
+}
+
 async function load() {
   loading.value = true
   try {
-    const [board, queue] = await Promise.all([getDashboardOverviewApi(), getTranscodeBoardApi()])
+    const [board, t, dist, queue] = await Promise.all([
+      getDashboardOverviewApi(),
+      getDashboardTrendApi(),
+      getDashboardDistributionApi(),
+      getTranscodeBoardApi()
+    ])
     overview.value = board.data || null
+    trend.value = t.data || null
+    distribution.value = dist.data || null
     transcode.value = queue.data || null
     lastUpdated.value = new Date().toLocaleString()
+    await nextTick()
+    renderCharts()
   } 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 renderCharts() {
+  disposeAll()
+  renderTrend()
+  renderDramaPie()
+  renderTranscodePie()
+  renderEpisodePie()
+  renderQueueBar()
 }
 
-function groupValue(groupKey, metricKey) {
-  return overview.value?.[groupKey]?.[metricKey]
+const queueBarRef = ref<HTMLElement>()
+function renderQueueBar() {
+  if (!queueBarRef.value || !transcode.value) return
+  const q = transcode.value.queue || {}
+  const chart = echarts.init(queueBarRef.value)
+  chartInstances.push(chart)
+  chart.setOption({
+    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+    grid: { left: 80, right: 24, top: 16, bottom: 24 },
+    xAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
+    yAxis: { type: 'category', data: ['排队', '执行中', '成功', '失败'] },
+    series: [
+      {
+        type: 'bar',
+        data: [q.queued || 0, q.running || 0, q.success || 0, q.failed || 0],
+        itemStyle: {
+          borderRadius: [0, 4, 4, 0],
+          color: (p: { dataIndex: number }) =>
+            ['#F6BD16', '#5B8FF9', '#5AD8A6', '#E86452'][p.dataIndex]
+        },
+        label: { show: true, position: 'right' }
+      }
+    ]
+  })
 }
 
-onMounted(load)
+async function loadAndRender() {
+  loading.value = true
+  try {
+    const [board, t, dist, queue] = await Promise.all([
+      getDashboardOverviewApi(),
+      getDashboardTrendApi(),
+      getDashboardDistributionApi(),
+      getTranscodeBoardApi()
+    ])
+    overview.value = board.data || null
+    trend.value = t.data || null
+    distribution.value = dist.data || null
+    transcode.value = queue.data || null
+    lastUpdated.value = new Date().toLocaleString()
+    await nextTick()
+    renderCharts()
+  } finally {
+    loading.value = false
+  }
+}
+
+function disposeAll() {
+  chartInstances.forEach((c) => c.dispose())
+  chartInstances.length = 0
+}
+
+const basePieSeriesOption = {
+  type: 'pie' as const,
+  radius: ['40%', '70%'],
+  avoidLabelOverlap: true,
+  itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
+  label: { show: false, position: 'center' },
+  emphasis: {
+    label: { show: true, fontSize: 16, fontWeight: 'bold' }
+  }
+}
+
+function renderTrend() {
+  if (!trendRef.value || !trend.value) return
+  const chart = echarts.init(trendRef.value)
+  chartInstances.push(chart)
+  chart.setOption({
+    tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
+    legend: { top: 0, textStyle: { fontSize: 12 } },
+    grid: { left: 48, right: 48, top: 40, bottom: 28 },
+    xAxis: { type: 'category', data: trend.value.dates, boundaryGap: false },
+    yAxis: [
+      { type: 'value', name: '用户/播放', splitLine: { lineStyle: { type: 'dashed' } } },
+      { type: 'value', name: '转码任务', splitLine: { show: false } }
+    ],
+    series: [
+      {
+        name: '新增用户',
+        type: 'line',
+        smooth: true,
+        yAxisIndex: 0,
+        data: trend.value.newUsers,
+        itemStyle: { color: '#5B8FF9' }
+      },
+      {
+        name: '播放事件',
+        type: 'line',
+        smooth: true,
+        yAxisIndex: 0,
+        data: trend.value.playEvents,
+        itemStyle: { color: '#5AD8A6' }
+      },
+      {
+        name: '新增转码',
+        type: 'bar',
+        yAxisIndex: 1,
+        data: trend.value.newTranscodes,
+        itemStyle: { color: '#F6BD16', borderRadius: [3, 3, 0, 0] }
+      },
+      {
+        name: '转码成功',
+        type: 'bar',
+        yAxisIndex: 1,
+        data: trend.value.transcodeSuccess,
+        itemStyle: { color: '#945FB9', borderRadius: [3, 3, 0, 0] }
+      }
+    ]
+  })
+}
+
+function renderDramaPie() {
+  if (!dramaPieRef.value || !distribution.value) return
+  const data = Object.entries(distribution.value.dramaStatus || {}).map(([k, v]) => ({
+    name: (statusLabel as Record<string, string>)[k] || k,
+    value: v
+  }))
+  const chart = echarts.init(dramaPieRef.value)
+  chartInstances.push(chart)
+  chart.setOption({
+    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+    legend: { bottom: 0, itemWidth: 12, itemHeight: 12, textStyle: { fontSize: 12 } },
+    color: ['#F6BD16', '#5AD8A6', '#5B8FF9', '#E86452'],
+    series: [{ ...basePieSeriesOption, name: '短剧状态', data }]
+  })
+}
+
+function renderTranscodePie() {
+  if (!transcodePieRef.value || !distribution.value) return
+  const data = Object.entries(distribution.value.transcodeStatus || {}).map(([k, v]) => ({
+    name: (transcodeStatusLabel as Record<string, string>)[k] || k,
+    value: v
+  }))
+  const chart = echarts.init(transcodePieRef.value)
+  chartInstances.push(chart)
+  chart.setOption({
+    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+    legend: { bottom: 0, itemWidth: 12, itemHeight: 12, textStyle: { fontSize: 12 } },
+    color: ['#F6BD16', '#5B8FF9', '#5AD8A6', '#E86452', '#C9C9C9'],
+    series: [{ ...basePieSeriesOption, name: '转码状态', data }]
+  })
+}
+
+function renderEpisodePie() {
+  if (!episodePieRef.value || !distribution.value) return
+  const data = Object.entries(distribution.value.episodeMedia || {}).map(([k, v]) => ({
+    name: k,
+    value: v
+  }))
+  const chart = echarts.init(episodePieRef.value)
+  chartInstances.push(chart)
+  chart.setOption({
+    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+    legend: { bottom: 0, itemWidth: 12, itemHeight: 12, textStyle: { fontSize: 12 } },
+    color: ['#5AD8A6', '#E86452'],
+    series: [{ ...basePieSeriesOption, name: '片源覆盖', data }]
+  })
+}
+
+function onResize() {
+  chartInstances.forEach((c) => c.resize())
+}
+
+onMounted(loadAndRender)
+window.addEventListener('resize', onResize)
+onBeforeUnmount(() => {
+  disposeAll()
+  window.removeEventListener('resize', onResize)
+})
 </script>
 
 <template>
   <PageHeading
     eyebrow="数据看板"
     title="运营大盘"
-    description="用户、内容、播放、收入与成本总览，以及转码队列。"
+    description="用户、内容、播放与成本总览，以及近 7 天趋势。"
   >
-    <el-button :loading="loading" @click="load">刷新</el-button>
+    <el-button :loading="loading" @click="loadAndRender">刷新</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 v-loading="loading" class="board-wrap">
+    <!-- 顶部关键指标卡 -->
+    <div class="highlight-grid">
+      <div
+        v-for="card in HIGHLIGHT_CARDS"
+        :key="card.group + card.key"
+        class="highlight-card"
+        :style="{ borderTopColor: card.color }"
+      >
+        <div class="highlight-label">{{ card.label }}</div>
+        <div class="highlight-value" :class="{ empty: groupValue(card.group, card.key) === null }">
+          {{ display(formatCount(groupValue(card.group, card.key))) }}
         </div>
       </div>
     </div>
+
+    <!-- 趋势折线图（双 Y 轴 + 柱） -->
+    <section class="panel chart-panel">
+      <div class="panel-heading">
+        <div>
+          <h2>近 7 天趋势</h2>
+          <p>每日新增用户 / 播放事件 / 转码任务</p>
+        </div>
+        <span class="muted">数据时间：{{ lastUpdated }}</span>
+      </div>
+      <div ref="trendRef" class="chart chart-lg"></div>
+    </section>
+
+    <!-- 分布饼图组 -->
+    <section class="panel">
+      <div class="panel-heading">
+        <div>
+          <h2>状态分布</h2>
+          <p>短剧状态 / 转码状态 / 片源覆盖</p>
+        </div>
+      </div>
+      <div class="pie-row">
+        <div class="pie-cell">
+          <div class="pie-title">短剧状态</div>
+          <div ref="dramaPieRef" class="chart chart-pie"></div>
+        </div>
+        <div class="pie-cell">
+          <div class="pie-title">转码状态</div>
+          <div ref="transcodePieRef" class="chart chart-pie"></div>
+        </div>
+        <div class="pie-cell">
+          <div class="pie-title">片源覆盖</div>
+          <div ref="episodePieRef" class="chart chart-pie"></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 转码队列 + 失败明细 -->
+    <section class="panel transcode-panel">
+      <div class="panel-heading">
+        <div>
+          <h2>转码看板</h2>
+          <p>队列积压与失败任务明细</p>
+        </div>
+        <p class="muted">{{ transcode?.notes?.join('；') || '' }}</p>
+      </div>
+      <div class="transcode-grid">
+        <div ref="queueBarRef" class="chart chart-bar"></div>
+        <div class="transcode-fail">
+          <h3>失败任务（最近 20 条）</h3>
+          <el-table
+            :data="transcode?.failedTasks || []"
+            border
+            class="drama-el-table"
+            empty-text="当前没有失败的转码任务"
+            size="small"
+          >
+            <el-table-column prop="id" label="任务ID" width="100" />
+            <el-table-column prop="episodeId" label="剧集" width="100" />
+            <el-table-column prop="status" label="状态" width="90" />
+            <el-table-column prop="retryCount" label="重试" width="70" />
+            <el-table-column
+              prop="errorMsg"
+              label="失败原因"
+              min-width="220"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              prop="createdAt"
+              label="创建时间"
+              min-width="160"
+              show-overflow-tooltip
+              :formatter="dateCell"
+            />
+          </el-table>
+        </div>
+      </div>
+    </section>
+
+    <!-- 口径说明 -->
     <el-alert
       v-if="overview?.notes?.length"
       class="board-notes"
@@ -152,31 +392,138 @@ onMounted(load)
         <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>
+  </div>
 </template>
+
+<style scoped lang="less">
+.board-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.panel {
+  background: var(--el-bg-color);
+  border-radius: 8px;
+  padding: 20px 24px;
+  border: 1px solid var(--el-border-color-lighter);
+}
+
+.panel-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+
+  h2 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  h3 {
+    margin: 0 0 8px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  p {
+    margin: 4px 0 0;
+    font-size: 13px;
+    color: var(--el-text-color-secondary);
+  }
+
+  .muted {
+    color: var(--el-text-color-placeholder);
+    font-size: 12px;
+  }
+}
+
+.highlight-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+}
+
+.highlight-card {
+  background: var(--el-bg-color);
+  border-radius: 8px;
+  padding: 14px 18px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-top: 3px solid transparent;
+
+  .highlight-label {
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+  }
+
+  .highlight-value {
+    margin-top: 6px;
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--el-text-color-primary);
+    font-variant-numeric: tabular-nums;
+
+    &.empty {
+      font-size: 14px;
+      color: var(--el-text-color-placeholder);
+      font-weight: 400;
+    }
+  }
+}
+
+.chart {
+  width: 100%;
+}
+
+.chart-lg {
+  height: 320px;
+}
+
+.chart-pie {
+  height: 220px;
+}
+
+.chart-bar {
+  height: 220px;
+}
+
+.pie-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.pie-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .pie-title {
+    margin-bottom: 4px;
+    font-size: 13px;
+    color: var(--el-text-color-secondary);
+  }
+}
+
+.transcode-grid {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 20px;
+}
+
+.board-notes {
+  :deep(ul) {
+    margin: 4px 0 0;
+    padding-left: 18px;
+    font-size: 12px;
+  }
+}
+
+@media (width <= 900px) {
+  .pie-row,
+  .transcode-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/views/systemManagement/AppVersionView.vue

@@ -0,0 +1,514 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { computed, h, ref } from 'vue'
+import PageHeading from '@/views/components/PageHeading.vue'
+import { AppIcons } from '@/constants/icons'
+import { dateCell } from '@/utils/format'
+import {
+  batchCreateAppVersionsApi,
+  createAppVersionApi,
+  deleteAppVersionApi,
+  listAppVersionsApi,
+  updateAppVersionApi,
+  updateAppVersionStatusApi
+} from '@/api/admin/appVersion'
+import type { AppVersionItem, AppVersionSaveData } from '@/api/admin/appVersion'
+
+const platformOptions = [
+  { label: 'Android', value: 'ANDROID' },
+  { label: 'iOS', value: 'IOS' }
+]
+const statusOptions = [
+  { label: '已发布', value: 1 },
+  { label: '已下架', value: 0 }
+]
+
+interface FilterState {
+  platform: string
+  status: number | undefined
+  keyword: string
+}
+
+const loading = ref(false)
+const list = ref<AppVersionItem[]>([])
+const total = ref(0)
+const pageIndex = ref(1)
+const pageSize = ref(20)
+const filter = ref<FilterState>({ platform: '', status: undefined, keyword: '' })
+
+const dialogOpen = ref(false)
+const formLoading = ref(false)
+const editingId = ref<string | null>(null)
+const formRef = ref<FormInstance>()
+
+/** 新建时两个平台一起配（各自可启停），编辑时用单份。 */
+interface PlatformBlock {
+  enabled: boolean
+  data: AppVersionSaveData
+}
+const emptyPlatform = (platform: 'ANDROID' | 'IOS'): AppVersionSaveData => ({
+  platform,
+  versionCode: 0,
+  versionName: '',
+  downloadUrl: '',
+  updateContent: '',
+  forceUpdate: 0,
+  minSupportedCode: 0
+})
+const androidBlock = ref<PlatformBlock>({ enabled: true, data: emptyPlatform('ANDROID') })
+const iosBlock = ref<PlatformBlock>({ enabled: true, data: emptyPlatform('IOS') })
+const editForm = ref<AppVersionSaveData>(emptyPlatform('ANDROID'))
+
+const rules: FormRules = {
+  platform: [{ required: true, message: '请选择平台', trigger: 'change' }],
+  versionCode: [
+    { required: true, message: '请填写整数版本号', trigger: 'blur' },
+    { type: 'number', min: 1, max: 999999, message: '范围 1~999999', trigger: 'blur' }
+  ],
+  versionName: [
+    { required: true, message: '请填写展示版本号', trigger: 'blur' },
+    { max: 32, message: '最长 32 字符', trigger: 'blur' }
+  ],
+  downloadUrl: [
+    { required: true, message: '请填写下载地址', trigger: 'blur' },
+    { max: 512, message: '最长 512 字符', trigger: 'blur' }
+  ]
+}
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await listAppVersionsApi({
+      pageIndex: pageIndex.value,
+      pageSize: pageSize.value,
+      platform: filter.value.platform || undefined,
+      status: filter.value.status,
+      keyword: filter.value.keyword.trim() || undefined
+    })
+    list.value = res.data?.list ?? []
+    total.value = res.data?.total ?? 0
+  } catch {
+    /* axios interceptor 已弹消息 */
+  } finally {
+    loading.value = false
+  }
+}
+
+function openCreate() {
+  editingId.value = null
+  androidBlock.value = { enabled: true, data: emptyPlatform('ANDROID') }
+  iosBlock.value = { enabled: true, data: emptyPlatform('IOS') }
+  dialogOpen.value = true
+}
+
+function openEdit(row: AppVersionItem) {
+  editingId.value = row.id
+  editForm.value = {
+    platform: row.platform,
+    versionCode: row.versionCode,
+    versionName: row.versionName,
+    downloadUrl: row.downloadUrl,
+    updateContent: row.updateContent ?? '',
+    forceUpdate: row.forceUpdate,
+    minSupportedCode: row.minSupportedCode
+  }
+  dialogOpen.value = true
+}
+
+async function submit() {
+  formLoading.value = true
+  try {
+    if (editingId.value) {
+      await updateAppVersionApi(editingId.value, editForm.value)
+      ElMessage.success('已更新')
+    } else {
+      const toCreate: AppVersionSaveData[] = []
+      if (androidBlock.value.enabled) toCreate.push(androidBlock.value.data)
+      if (iosBlock.value.enabled) toCreate.push(iosBlock.value.data)
+      if (toCreate.length === 0) {
+        ElMessage.warning('至少启用一个平台')
+        return
+      }
+      await batchCreateAppVersionsApi(toCreate)
+      ElMessage.success(`已创建 ${toCreate.length} 条版本`)
+    }
+    dialogOpen.value = false
+    await fetchList()
+  } catch {
+    /* axios interceptor 已弹消息 */
+  } finally {
+    formLoading.value = false
+  }
+}
+
+async function toggleStatus(row: AppVersionItem) {
+  const next = row.status === 1 ? 0 : 1
+  await updateAppVersionStatusApi(row.id, next as 0 | 1)
+  ElMessage.success(next === 1 ? '已发布' : '已下架')
+  await fetchList()
+}
+
+async function remove(row: AppVersionItem) {
+  await ElMessageBox.confirm(
+    `确认删除 ${row.platformText} ${row.versionName}（${row.versionCode}）？`,
+    '删除版本',
+    { type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' }
+  )
+  await deleteAppVersionApi(row.id)
+  ElMessage.success('已删除')
+  await fetchList()
+}
+
+const forceText = computed(() => (v: number) => (v === 1 ? '强制' : '可选升级'))
+</script>
+
+<template>
+  <PageHeading eyebrow="后台管理" title="版本管理" description="App 版本发布、上下架与删除。" />
+
+  <section class="toolbar">
+    <el-form :inline="true" :model="filter" @submit.prevent="fetchList">
+      <el-form-item label="平台">
+        <el-select v-model="filter.platform" clearable placeholder="全部" style="width: 120px">
+          <el-option
+            v-for="o in platformOptions"
+            :key="o.value"
+            :label="o.label"
+            :value="o.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-select v-model="filter.status" clearable placeholder="全部" style="width: 120px">
+          <el-option v-for="o in statusOptions" :key="o.value" :label="o.label" :value="o.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="关键字">
+        <el-input
+          v-model="filter.keyword"
+          placeholder="匹配 versionName"
+          clearable
+          style="width: 180px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :icon="AppIcons.search" @click="fetchList">查询</el-button>
+        <el-button plain @click="openCreate" :icon="AppIcons.plus">新建版本</el-button>
+      </el-form-item>
+    </el-form>
+  </section>
+
+  <el-table :data="list" v-loading="loading" border stripe>
+    <el-table-column prop="platformText" label="平台" width="100" />
+    <el-table-column prop="versionCode" label="版本码" width="90" />
+    <el-table-column prop="versionName" label="展示版本" width="120" />
+    <el-table-column prop="downloadUrl" label="下载地址" show-overflow-tooltip min-width="220">
+      <template #default="{ row }">
+        <el-link :href="row.downloadUrl" target="_blank" type="primary" :underline="false">
+          {{ row.downloadUrl }}
+        </el-link>
+      </template>
+    </el-table-column>
+    <el-table-column prop="forceUpdate" label="升级" width="80">
+      <template #default="{ row }">
+        <el-tag :type="row.forceUpdate === 1 ? 'danger' : 'info'" size="small">
+          {{ forceText(row.forceUpdate) }}
+        </el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column prop="minSupportedCode" label="兜底最低" width="100" />
+    <el-table-column prop="status" label="状态" width="90">
+      <template #default="{ row }">
+        <el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">
+          {{ row.statusText }}
+        </el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column prop="releasedAt" label="发布时间" width="160" :formatter="dateCell" />
+    <el-table-column prop="createdAt" label="创建时间" width="160" :formatter="dateCell" />
+    <el-table-column label="操作" width="240" fixed="right">
+      <template #default="{ row }">
+        <el-button size="small" link type="primary" @click="openEdit(row)">编辑</el-button>
+        <el-button size="small" link type="warning" @click="toggleStatus(row)">
+          {{ row.status === 1 ? '下架' : '发布' }}
+        </el-button>
+        <el-button size="small" link type="danger" @click="remove(row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <el-pagination
+    class="pagination"
+    v-model:current-page="pageIndex"
+    v-model:page-size="pageSize"
+    :total="total"
+    layout="total, sizes, prev, pager, next"
+    :page-sizes="[10, 20, 50]"
+    @current-change="fetchList"
+    @size-change="fetchList"
+  />
+
+  <el-dialog
+    v-model="dialogOpen"
+    :title="editingId ? '编辑版本' : '新建版本'"
+    width="820px"
+    @close="() => formRef?.resetFields()"
+  >
+    <!-- 编辑模式：单平台 -->
+    <el-form
+      v-if="editingId"
+      ref="formRef"
+      :model="editForm"
+      :rules="rules"
+      label-width="120px"
+      v-loading="formLoading"
+    >
+      <el-row :gutter="12">
+        <el-col :span="8">
+          <el-form-item label="整数版本" prop="versionCode">
+            <el-input-number
+              v-model="editForm.versionCode"
+              :min="1"
+              :max="999999"
+              controls-position="right"
+              class="w-full"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="16">
+          <el-form-item label="展示版本" prop="versionName">
+            <el-input v-model="editForm.versionName" placeholder="如 1.2.0" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="下载地址" prop="downloadUrl">
+        <el-input v-model="editForm.downloadUrl" placeholder="Android apk / iOS App Store 链接" />
+      </el-form-item>
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <el-form-item label="强制升级">
+            <el-switch
+              v-model="editForm.forceUpdate"
+              :active-value="1"
+              :inactive-value="0"
+              active-text="强制"
+              inactive-text="可选"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="兜底最低版本">
+            <el-input-number
+              v-model="editForm.minSupportedCode"
+              :min="0"
+              controls-position="right"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="更新说明">
+        <el-input
+          v-model="editForm.updateContent"
+          type="textarea"
+          :rows="3"
+          placeholder="换行分隔多条更新内容"
+          maxlength="2000"
+          show-word-limit
+        />
+      </el-form-item>
+    </el-form>
+
+    <!-- 新建模式：Android + iOS 两块 -->
+    <div v-else class="dual-blocks" v-loading="formLoading">
+      <div class="platform-block" :class="{ disabled: !androidBlock.enabled }">
+        <header>
+          <span class="platform-title">Android</span>
+          <el-switch
+            v-model="androidBlock.enabled"
+            active-text="启用"
+            inactive-text="跳过"
+            inline-prompt
+          />
+        </header>
+        <el-form
+          :model="androidBlock.data"
+          :rules="rules"
+          label-width="120px"
+          :disabled="!androidBlock.enabled"
+        >
+          <el-row :gutter="12">
+            <el-col :span="8">
+              <el-form-item label="整数版本" prop="versionCode">
+                <el-input-number
+                  v-model="androidBlock.data.versionCode"
+                  :min="1"
+                  :max="999999"
+                  controls-position="right"
+                  class="w-full"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="展示版本" prop="versionName">
+                <el-input v-model="androidBlock.data.versionName" placeholder="如 1.2.0" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="下载地址" prop="downloadUrl">
+            <el-input v-model="androidBlock.data.downloadUrl" placeholder="apk 下载链接" />
+          </el-form-item>
+          <el-row :gutter="12">
+            <el-col :span="12">
+              <el-form-item label="强制升级">
+                <el-switch
+                  v-model="androidBlock.data.forceUpdate"
+                  :active-value="1"
+                  :inactive-value="0"
+                  active-text="强制"
+                  inactive-text="可选"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="兜底最低">
+                <el-input-number
+                  v-model="androidBlock.data.minSupportedCode"
+                  :min="0"
+                  controls-position="right"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="更新说明">
+            <el-input
+              v-model="androidBlock.data.updateContent"
+              type="textarea"
+              :rows="3"
+              placeholder="换行分隔多条"
+              maxlength="2000"
+              show-word-limit
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="platform-block" :class="{ disabled: !iosBlock.enabled }">
+        <header>
+          <span class="platform-title">iOS</span>
+          <el-switch
+            v-model="iosBlock.enabled"
+            active-text="启用"
+            inactive-text="跳过"
+            inline-prompt
+          />
+        </header>
+        <el-form
+          :model="iosBlock.data"
+          :rules="rules"
+          label-width="120px"
+          :disabled="!iosBlock.enabled"
+        >
+          <el-row :gutter="12">
+            <el-col :span="8">
+              <el-form-item label="整数版本" prop="versionCode">
+                <el-input-number
+                  v-model="iosBlock.data.versionCode"
+                  :min="1"
+                  :max="999999"
+                  controls-position="right"
+                  class="w-full"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="展示版本" prop="versionName">
+                <el-input v-model="iosBlock.data.versionName" placeholder="如 1.2.0" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="下载地址" prop="downloadUrl">
+            <el-input v-model="iosBlock.data.downloadUrl" placeholder="App Store 链接" />
+          </el-form-item>
+          <el-row :gutter="12">
+            <el-col :span="12">
+              <el-form-item label="强制升级">
+                <el-switch
+                  v-model="iosBlock.data.forceUpdate"
+                  :active-value="1"
+                  :inactive-value="0"
+                  active-text="强制"
+                  inactive-text="可选"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="兜底最低">
+                <el-input-number
+                  v-model="iosBlock.data.minSupportedCode"
+                  :min="0"
+                  controls-position="right"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="更新说明">
+            <el-input
+              v-model="iosBlock.data.updateContent"
+              type="textarea"
+              :rows="3"
+              placeholder="换行分隔多条"
+              maxlength="2000"
+              show-word-limit
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+
+    <template #footer>
+      <el-button @click="dialogOpen = false">取消</el-button>
+      <el-button type="primary" :loading="formLoading" @click="submit">
+        {{ editingId ? '保存' : '创建并发布' }}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="less">
+.toolbar {
+  margin-bottom: 12px;
+}
+.pagination {
+  margin-top: 12px;
+  justify-content: flex-end;
+}
+.dual-blocks {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.platform-block {
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  padding: 14px 16px 4px;
+  background: var(--el-fill-color-blank);
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 6px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+  .platform-title {
+    font-weight: 600;
+    font-size: 15px;
+  }
+  &.disabled {
+    opacity: 0.5;
+    border-style: dashed;
+  }
+}
+</style>

src/views/systemManagement/TranscodeSettingsView.vue

@@ -14,6 +14,7 @@ const {
   rules,
   loading,
   saving,
+  backfilling,
   loadError,
   canManage,
   qualityRules,
@@ -23,7 +24,8 @@ const {
   loadProfile,
   addRung,
   deleteRung,
-  saveProfile
+  saveProfile,
+  runBackfill
 } = useTranscodeSettings()
 </script>
 
@@ -33,6 +35,18 @@ const {
     :title="t('transcodeSettings.title')"
     :description="t('transcodeSettings.description')"
   >
+    <el-tooltip :content="t('transcodeSettings.backfillTip')" placement="top">
+      <el-button
+        type="success"
+        plain
+        :loading="backfilling"
+        :disabled="!canManage || loading"
+        @click="runBackfill"
+      >
+        <AppIcon v-if="!backfilling" :icon="AppIcons.videoPlay" />
+        {{ t('transcodeSettings.backfill') }}
+      </el-button>
+    </el-tooltip>
     <el-button :disabled="loading" @click="loadProfile">
       <AppIcon :icon="AppIcons.refresh" />
       {{ t('transcodeSettings.reload') }}

src/views/systemManagement/composables/transcodeSettingsActions.ts

@@ -5,6 +5,7 @@ import type { ComputedRef, Ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import type { FormInstance } from 'element-plus'
 import { getMediaTranscodeProfileApi, saveMediaTranscodeProfileApi } from '@/api/admin/media'
+import { runTranscodeBackfillApi } from '@/api/admin/transcode'
 import type { MediaTranscodeProfile } from '@/api/admin/types'
 import { applyProfileToForm, buildProfilePayload } from './transcodeProfileModel'
 
@@ -15,6 +16,7 @@ interface SettingsContext {
   formRef: Ref<FormInstance | undefined>
   loading: Ref<boolean>
   saving: Ref<boolean>
+  backfilling: Ref<boolean>
   loadError: Ref<string>
   canManage: ComputedRef<boolean>
   t: Translate
@@ -77,3 +79,28 @@ export const saveTranscodeProfile = async (context: SettingsContext): Promise<vo
     context.saving.value = false
   }
 }
+
+/** 手动补齐转码：扫一遍缺码率产物/帧图的分集并入队。 */
+export const runTranscodeBackfill = async (context: SettingsContext): Promise<void> => {
+  if (!context.canManage.value || context.backfilling.value) {
+    return
+  }
+  context.backfilling.value = true
+  try {
+    const response = await runTranscodeBackfillApi()
+    if (response.code !== 0) {
+      ElMessage.error(response.message || context.t('transcodeSettings.backfillFailed'))
+      return
+    }
+    const triggered = response.data?.triggered ?? 0
+    if (triggered > 0) {
+      ElMessage.success(context.t('transcodeSettings.backfillDone', { count: triggered }))
+    } else {
+      ElMessage.info(context.t('transcodeSettings.backfillEmpty'))
+    }
+  } catch {
+    ElMessage.error(context.t('transcodeSettings.backfillFailed'))
+  } finally {
+    context.backfilling.value = false
+  }
+}

src/views/systemManagement/composables/useTranscodeSettings.ts

@@ -13,7 +13,11 @@ import {
   positiveEvenRule,
   positiveIntegerRule
 } from './transcodeProfileRules'
-import { loadTranscodeProfile, saveTranscodeProfile } from './transcodeSettingsActions'
+import {
+  loadTranscodeProfile,
+  runTranscodeBackfill,
+  saveTranscodeProfile
+} from './transcodeSettingsActions'
 
 /** 转码设置页的响应式状态与动作装配。 */
 export function useTranscodeSettings() {
@@ -22,10 +26,11 @@ export function useTranscodeSettings() {
   const formRef = ref<FormInstance>()
   const loading = ref(false)
   const saving = ref(false)
+  const backfilling = ref(false)
   const loadError = ref('')
   const form = reactive<MediaTranscodeProfile>(defaultProfile())
   const canManage = computed(() => can('episode:upload'))
-  const context = { form, formRef, loading, saving, loadError, canManage, t }
+  const context = { form, formRef, loading, saving, backfilling, loadError, canManage, t }
   const rules = computed(() => createProfileRules(t))
   const enabledRules = computed(() => createEnabledRules(form, t))
   const qualityRules = (index: number) => createQualityRules(form, index, t)
@@ -50,6 +55,7 @@ export function useTranscodeSettings() {
     rules,
     loading,
     saving,
+    backfilling,
     loadError,
     canManage,
     qualityRules,
@@ -59,6 +65,7 @@ export function useTranscodeSettings() {
     loadProfile,
     addRung,
     deleteRung,
-    saveProfile
+    saveProfile,
+    runBackfill: () => runTranscodeBackfill(context)
   }
 }