chore(merge): 合并后台多语言工作台和登录页

2026-10-24 17:32:51 +08:00
commit d661b808d1
@@ -22,6 +22,7 @@ appStore.initTheme()
 <template>
  <ConfigGlobal :size="currentSize">
    <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
+    <footer class="app-copyright">© FruitShorts</footer>
  </ConfigGlobal>
 </template>

@@ -48,4 +49,15 @@ body {
 .@{prefix-cls}-grey-mode {
  filter: grayscale(100%);
 }
+
+.app-copyright {
+  position: fixed;
+  right: 20px;
+  bottom: 10px;
+  z-index: 5;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--el-text-color-secondary, #909399);
+  pointer-events: none;
+}
 </style>
@@ -0,0 +1,41 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+
+export interface ContentTagItem {
+  id: number
+  name: string
+  nameEn: string
+  nameId: string
+  locales?: Record<string, string>
+  bgColor?: string
+  sort: number
+  status: number
+}
+
+export interface ContentTagSaveData {
+  name: string
+  locales: Record<string, string>
+  bgColor?: string
+  sort?: number
+  status?: number
+}
+
+export const listContentTagsApi = (enabledOnly = false) => {
+  return request.get<ContentTagItem[]>({
+    url: '/admin/content-tags',
+    params: enabledOnly ? { enabledOnly: true } : undefined
+  })
+}
+
+export const createContentTagApi = (data: ContentTagSaveData) => {
+  return request.post<number>({ url: '/admin/content-tags', data })
+}
+
+export const updateContentTagApi = (id: number, data: ContentTagSaveData) => {
+  return request.put<void>({ url: `/admin/content-tags/${id}`, data })
+}
+
+export const deleteContentTagApi = (id: number) => {
+  return request.delete<void>({ url: `/admin/content-tags/${id}` })
+}
@@ -52,6 +52,7 @@ export const listDramaCategoryOptionsApi = () => {

 export interface DramaCategorySaveData {
  name: string
+  locales: Record<string, string>
  sort?: number
  status?: number
 }
@@ -6,6 +6,9 @@ import type { PageResult } from './types'
 export interface DramaClassificationItem {
  id: number
  name: string
+  nameEn: string
+  nameId: string
+  locales?: Record<string, string>
  sort: number
  status: number
  dramaCount: number
@@ -14,6 +17,7 @@ export interface DramaClassificationItem {

 export interface DramaClassificationSaveData {
  name: string
+  locales: Record<string, string>
  sort?: number
  status?: number
 }
@@ -7,7 +7,13 @@ import type { ClassificationDramaItem } from './dramaClassification'
 export interface DramaPlaylistCategoryItem {
  id: number
  name: string
+  nameEn: string
+  nameId: string
  description: string
+  descriptionEn: string
+  descriptionId: string
+  locales?: Record<string, string>
+  descriptionLocales?: Record<string, string>
  sort: number
  status: number
  dramaCount: number
@@ -15,7 +21,8 @@ export interface DramaPlaylistCategoryItem {

 export interface DramaPlaylistCategorySaveData {
  name: string
-  description?: string
+  locales: Record<string, string>
+  descriptionLocales?: Record<string, string>
  sort?: number
  status?: number
 }
@@ -0,0 +1,27 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+
+export interface TranscodeNoticeItem {
+  id: number
+  status: string
+  dramaTitle: string
+  episodeNo?: number
+  episodeTitle?: string
+  progress?: number
+  errorMsg?: string
+  updatedAt?: string
+}
+
+export interface TranscodeNotice {
+  running: number
+  success: number
+  failed: number
+  runningList: TranscodeNoticeItem[]
+  successList: TranscodeNoticeItem[]
+  failedList: TranscodeNoticeItem[]
+}
+
+export const getTranscodeNoticesApi = () => {
+  return request.get<TranscodeNotice>({ url: '/admin/notifications/transcode' })
+}
@@ -8,6 +8,9 @@ export interface PageResult<T> {
 export interface DramaCategory {
  id: number
  name: string
+  nameEn?: string
+  nameId?: string
+  locales?: Record<string, string>
  sort?: number
  status?: number
  /** 该类型下的短剧数量，管理列表才有 */
@@ -0,0 +1,46 @@
+// Author: fruit.com.cn
+
+export interface ContentLanguage {
+  code: string
+  label: string
+}
+
+export const CONTENT_LANGUAGES: ContentLanguage[] = [
+  { code: 'zh', label: '中文' },
+  { code: 'en', label: '英文' },
+  { code: 'id', label: '印尼语' }
+]
+
+export function languageLabel(code: string) {
+  return CONTENT_LANGUAGES.find((item) => item.code === code)?.label || code
+}
+
+export function languageCodes(locales?: Record<string, string> | null) {
+  const source = locales || {}
+  return CONTENT_LANGUAGES.map((item) => item.code).filter((code) => source[code])
+}
+
+export function localesFromColumns(
+  locales: Record<string, string> | null | undefined,
+  zh?: string,
+  en?: string,
+  id?: string
+) {
+  if (locales && Object.keys(locales).length) {
+    return { ...locales }
+  }
+  const result: Record<string, string> = {}
+  if (zh) result.zh = zh
+  if (en) result.en = en
+  if (id) result.id = id
+  if (!result.zh) result.zh = ''
+  return result
+}
+
+export function payloadLocales(locales: Record<string, string>, codes: string[]) {
+  const result: Record<string, string> = {}
+  codes.forEach((code) => {
+    result[code] = String(locales[code] || '').trim()
+  })
+  return result
+}
@@ -6,6 +6,7 @@ import { Collapse } from '@/components/Collapse'
 import { LocaleDropdown } from '@/components/LocaleDropdown'
 import { SizeDropdown } from '@/components/SizeDropdown'
 import { UserInfo } from '@/components/UserInfo'
+import TranscodeNoticeButton from './TranscodeNoticeButton.vue'
 import { Screenfull } from '@/components/Screenfull'
 import { Breadcrumb } from '@/components/Breadcrumb'
 import { useAppStore } from '@/store/modules/app'
@@ -73,6 +74,7 @@ export default defineComponent({
              color="var(--top-header-text-color)"
            ></LocaleDropdown>
          ) : undefined}
+          <TranscodeNoticeButton color="var(--top-header-text-color)"></TranscodeNoticeButton>
          <UserInfo></UserInfo>
        </div>
      </div>
@@ -95,7 +97,7 @@ export default defineComponent({
  }
 }

-@media (max-width: 768px) {
+@media (width <= 768px) {
  .@{prefix-cls} {
    padding-right: 8px;
    padding-left: 8px;
@@ -0,0 +1,89 @@
+<!-- Author: fruit.com.cn -->
+<!-- 顶栏转码通知：角标汇总转码中、成功、失败，点击进入通知页。 -->
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Bell } from '@element-plus/icons-vue'
+import { getTranscodeNoticesApi } from '@/api/admin/transcodeNotice'
+import { TRANSCODE_NOTICE_SEEN, unreadCounts } from '@/utils/transcodeNoticeSeen'
+
+const POLL_MS = 30000
+const BADGE_MAX = 99
+
+defineProps<{ color?: string }>()
+const router = useRouter()
+const running = ref(0)
+const success = ref(0)
+const failed = ref(0)
+const seenTick = ref(0)
+let timer = 0
+
+const total = computed(() => {
+  seenTick.value
+  const unread = unreadCounts({
+    running: running.value,
+    success: success.value,
+    failed: failed.value
+  })
+  return unread.running + unread.success + unread.failed
+})
+
+async function refresh() {
+  const res = await getTranscodeNoticesApi()
+  running.value = Number(res.data?.running || 0)
+  success.value = Number(res.data?.success || 0)
+  failed.value = Number(res.data?.failed || 0)
+}
+
+function open() {
+  router.push({ name: 'transcode-notices' })
+}
+
+function onSeen() {
+  seenTick.value += 1
+}
+
+onMounted(() => {
+  refresh().catch(() => undefined)
+  window.addEventListener(TRANSCODE_NOTICE_SEEN, onSeen)
+  timer = window.setInterval(() => {
+    refresh().catch(() => undefined)
+  }, POLL_MS)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener(TRANSCODE_NOTICE_SEEN, onSeen)
+  window.clearInterval(timer)
+})
+</script>
+
+<template>
+  <el-badge :value="total" :max="BADGE_MAX" :hidden="total === 0" class="notice-badge">
+    <div class="notice-button" :style="{ color }" @click="open">
+      <el-icon :size="18"><Bell /></el-icon>
+    </div>
+  </el-badge>
+</template>
+
+<style scoped>
+.notice-badge {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.notice-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 100%;
+  cursor: pointer;
+}
+
+.notice-badge :deep(.el-badge__content.is-fixed) {
+  top: 8px;
+  right: 2px;
+}
+</style>
@@ -96,7 +96,12 @@ router.beforeEach(async (to, from, next) => {

      const redirectPath = from.query.redirect || to.path
      const redirect = decodeURIComponent(redirectPath as string)
-      const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect }
+      // 只按路径重进。刷新时动态路由还没注册，先被兜底路由接住；
+      // 若把当时匹配到的 name 带回去，会一直停在 404。
+      const nextData =
+        to.path === redirect
+          ? { path: to.path, query: to.query, hash: to.hash, replace: true }
+          : { path: redirect, replace: true }
      permissionStore.setIsAddRouters(true)
      next(nextData)
    }
@@ -52,6 +52,35 @@ export const constantRouterMap: AppRouteRecordRaw[] = [
      title: '404',
      noTagsView: true
    }
+  },
+  {
+    path: '/notifications',
+    component: Layout,
+    name: 'Notifications',
+    meta: {
+      hidden: true,
+      title: '通知'
+    },
+    children: [
+      {
+        path: 'transcode',
+        name: 'transcode-notices',
+        component: () => import('@/views/common/TranscodeNoticeView.vue'),
+        meta: {
+          title: '转码通知'
+        }
+      }
+    ]
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'UnresolvedPath',
+    component: () => import('@/views/Error/404.vue'),
+    meta: {
+      hidden: true,
+      title: '404',
+      noTagsView: true
+    }
  }
 ]

@@ -232,7 +261,14 @@ const router = createRouter({
 })

 export const resetRouter = (): void => {
-  const resetWhiteNameList = ['Redirect', 'RedirectParent', 'Login', 'NoFind', 'Root']
+  const resetWhiteNameList = [
+    'Redirect',
+    'RedirectParent',
+    'Login',
+    'NoFind',
+    'Root',
+    'UnresolvedPath'
+  ]
  router.getRoutes().forEach((route) => {
    const { name } = route
    if (name && !resetWhiteNameList.includes(name as string)) {
@@ -0,0 +1,51 @@
+// Author: fruit.com.cn
+
+const SEEN_KEY = 'transcode-notice-seen'
+
+export const TRANSCODE_NOTICE_SEEN = 'transcode-notice-seen'
+
+export interface NoticeCounts {
+  running: number
+  success: number
+  failed: number
+}
+
+/** 上次打开通知页时已经看过的数量。 */
+export function readSeen(): NoticeCounts {
+  try {
+    const raw = localStorage.getItem(SEEN_KEY)
+    if (!raw) return { running: 0, success: 0, failed: 0 }
+    const data = JSON.parse(raw) as NoticeCounts
+    return {
+      running: Number(data.running || 0),
+      success: Number(data.success || 0),
+      failed: Number(data.failed || 0)
+    }
+  } catch {
+    return { running: 0, success: 0, failed: 0 }
+  }
+}
+
+/** 比上次查看多出来的数量，看过的不再计入角标。 */
+export function unreadCounts(current: NoticeCounts): NoticeCounts {
+  const seen = readSeen()
+  return {
+    running: Math.max(0, current.running - seen.running),
+    success: Math.max(0, current.success - seen.success),
+    failed: Math.max(0, current.failed - seen.failed)
+  }
+}
+
+/** 把当前数量记为已读，并通知顶栏收起角标。 */
+export function markTranscodeNoticeSeen(current: NoticeCounts) {
+  const seen = readSeen()
+  localStorage.setItem(
+    SEEN_KEY,
+    JSON.stringify({
+      running: Math.max(seen.running, current.running),
+      success: Math.max(seen.success, current.success),
+      failed: Math.max(seen.failed, current.failed)
+    })
+  )
+  window.dispatchEvent(new Event(TRANSCODE_NOTICE_SEEN))
+}
@@ -31,6 +31,94 @@ const themeChange = () => {
            <img src="@/assets/imgs/brand-mark.png" alt="" />
            <span>{{ underlineToHump(appStore.getTitle) }}</span>
          </div>
+          <div class="hero-fruits" aria-hidden="true">
+            <svg class="fruit cherry" viewBox="0 0 120 140">
+              <path
+                d="M62 38c8-16 24-24 36-22"
+                fill="none"
+                stroke="#7d9a62"
+                stroke-width="3"
+                stroke-linecap="round"
+              />
+              <path
+                d="M58 40c2-18-8-30-6-36"
+                fill="none"
+                stroke="#6d8a55"
+                stroke-width="3"
+                stroke-linecap="round"
+              />
+              <ellipse
+                cx="34"
+                cy="28"
+                rx="14"
+                ry="7"
+                fill="#8fb56f"
+                transform="rotate(-28 34 28)"
+              />
+              <circle cx="42" cy="78" r="28" fill="#c4322a" />
+              <circle cx="78" cy="86" r="26" fill="#a82822" />
+              <circle cx="32" cy="68" r="8" fill="#fff" opacity=".28" />
+            </svg>
+            <svg class="fruit mango" viewBox="0 0 150 170">
+              <path d="M78 28c18 2 28 8 34 16-22 4-36 2-48-8 4-4 8-8 14-8z" fill="#6d8a55" />
+              <path
+                d="M86 36c6-16 2-24-2-28"
+                fill="none"
+                stroke="#5f7a4c"
+                stroke-width="3"
+                stroke-linecap="round"
+              />
+              <path
+                d="M46 58c-18 28-16 62 8 84 28 24 62 10 74-16 14-30 4-62-16-80-18-16-46-10-66 12z"
+                fill="#f0b429"
+              />
+              <path
+                d="M58 78c8 22 10 40 4 58"
+                fill="none"
+                stroke="#ffe08a"
+                stroke-width="8"
+                stroke-linecap="round"
+                opacity=".55"
+              />
+              <ellipse
+                cx="62"
+                cy="86"
+                rx="14"
+                ry="22"
+                fill="#fff"
+                opacity=".2"
+                transform="rotate(-24 62 86)"
+              />
+            </svg>
+            <svg class="fruit banana" viewBox="0 0 160 150">
+              <path
+                d="M28 108c18-46 48-74 92-86 8 10 10 22 4 34-28 10-50 28-66 58-6 12-16 16-30 12-8-2-12-10 0-18z"
+                fill="#f2d34b"
+              />
+              <path
+                d="M36 102c16-38 42-62 80-74"
+                fill="none"
+                stroke="#ffe98a"
+                stroke-width="7"
+                stroke-linecap="round"
+                opacity=".7"
+              />
+              <path
+                d="M118 24c8 2 14 10 12 16"
+                fill="none"
+                stroke="#6d8a55"
+                stroke-width="4"
+                stroke-linecap="round"
+              />
+              <path
+                d="M30 112c-6 8-4 16 4 16"
+                fill="none"
+                stroke="#c9a227"
+                stroke-width="4"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
          <div class="hero-copy">
            <p class="hero-kicker">{{ t('login.consoleLabel') }}</p>
            <h1>{{ t('login.welcome') }}</h1>
@@ -81,16 +169,58 @@ const themeChange = () => {
  flex-direction: column;
  justify-content: space-between;

+  &::before,
  &::after {
    position: absolute;
-    right: -80px;
-    bottom: -120px;
-    width: 360px;
-    height: 360px;
-    border: 1px solid rgb(255 255 255 / 16%);
+    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 50%;
    content: '';
  }
+
+  &::before {
+    top: -140px;
+    left: -80px;
+    width: 420px;
+    height: 420px;
+  }
+
+  &::after {
+    right: -120px;
+    bottom: -160px;
+    width: 460px;
+    height: 460px;
+  }
+}
+
+.hero-fruits {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.fruit {
+  position: absolute;
+  filter: drop-shadow(0 18px 24px rgb(0 0 0 / 28%));
+}
+
+.cherry {
+  top: 16%;
+  right: 14%;
+  width: 150px;
+}
+
+.mango {
+  top: 30%;
+  left: 38%;
+  width: 210px;
+}
+
+.banana {
+  top: 54%;
+  left: 12%;
+  width: 200px;
+  transform: rotate(-8deg);
 }

 .hero-brand {
@@ -113,13 +243,14 @@ const themeChange = () => {
 .hero-copy {
  position: relative;
  z-index: 1;
-  max-width: 460px;
+  max-width: 420px;

  h1 {
-    margin: 10px 0 12px;
-    font-size: 40px;
-    font-weight: 700;
-    line-height: 1.2;
+    margin: 12px 0 0;
+    font-size: 44px;
+    font-weight: 600;
+    line-height: 1.15;
+    letter-spacing: -0.03em;
    color: #fff;
  }
 }
@@ -191,8 +322,12 @@ const themeChange = () => {
    padding: 16px 24px 20px;
  }

+  .hero-fruits {
+    display: none;
+  }
+
  .hero-copy h1 {
-    margin: 6px 0 8px;
+    margin: 6px 0 0;
    font-size: 28px;
  }

@@ -5,6 +5,8 @@ import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { AppIcons } from '@/constants/icons'
 import { pageDramasApi } from '@/api/admin/drama'
+import { getDashboardOverviewApi, getDashboardTrendApi } from '@/api/admin/dashboard'
+import DashboardMetricWall from '@/views/dashboard/DashboardMetricWall.vue'
 import { useRbac } from '@/stores/rbac'
 import { formatCount } from '@/utils/format'
 import { statusClass } from '@/utils/status'
@@ -15,6 +17,8 @@ const { can } = useRbac()
 const loading = ref(false)
 const dramas = ref([])
 const total = ref(0)
+const overview = ref(null)
+const trend = ref(null)

 const totalViews = computed(() =>
  dramas.value.reduce((sum, item) => sum + Number(item.views || 0), 0)
@@ -25,6 +29,12 @@ const reviewingCount = computed(
 const publishedCount = computed(
  () => dramas.value.filter((item) => item.status === 'published').length
 )
+const metricFallback = computed(() => ({
+  'content.dramaTotal': total.value,
+  'content.dramaReviewing': reviewingCount.value,
+  'content.dramaPublished': publishedCount.value,
+  'playback.viewTotal': totalViews.value
+}))
 const recentDramas = computed(() =>
  [...dramas.value]
    .sort((a, b) => String(b.updatedAt || '').localeCompare(String(a.updatedAt || '')))
@@ -34,10 +44,16 @@ const recentDramas = computed(() =>
 onMounted(async () => {
  loading.value = true
  try {
-    const res = await pageDramasApi({ pageIndex: 1, pageSize: 200 })
+    const [res, board, trendRes] = await Promise.all([
+      pageDramasApi({ pageIndex: 1, pageSize: 200 }),
+      getDashboardOverviewApi().catch(() => null),
+      getDashboardTrendApi().catch(() => null)
+    ])
    // 接口失败时 axios 拦截器会把业务错误吞成 undefined，这里不能让页面跟着崩
    dramas.value = res?.data?.list || []
    total.value = res?.data?.total || 0
+    overview.value = board?.data || null
+    trend.value = trendRes?.data || null
  } finally {
    loading.value = false
  }
@@ -45,72 +61,83 @@ onMounted(async () => {
 </script>

 <template>
-  <div class="page-heading"
-    ><div><div class="eyebrow">内容概览</div><h1>工作台</h1><p>查看短剧内容与近期处理事项。</p></div
-    ><el-button
-      v-if="can('drama:create')"
-      type="primary"
-      class="primary-button"
-      @click="router.push({ name: 'dramas' })"
-      ><AppIcon :icon="AppIcons.add" />上传新短剧</el-button
-    ></div
-  >
-  <div v-loading="loading" class="stats-grid">
-    <div class="stat-card"
-      ><div class="stat-top"
-        ><span>短剧总数</span
-        ><span class="stat-icon"><AppIcon :icon="AppIcons.content" /></span></div
-      ><div class="stat-value">{{ total }} <small>部</small></div></div
-    >
-    <div class="stat-card"
-      ><div class="stat-top"
-        ><span>累计播放量</span
-        ><span class="stat-icon"><AppIcon :icon="AppIcons.videoPlay" /></span></div
-      ><div class="stat-value">{{ formatCount(totalViews) }}</div></div
-    >
-    <div class="stat-card"
-      ><div class="stat-top"
-        ><span>待审核内容</span
-        ><span class="stat-icon"><AppIcon :icon="AppIcons.clock" /></span></div
-      ><div class="stat-value">{{ reviewingCount }} <small>项</small></div></div
-    >
-    <div class="stat-card"
-      ><div class="stat-top"
-        ><span>已上线</span
-        ><span class="stat-icon"><AppIcon :icon="AppIcons.checkCircle" /></span></div
-      ><div class="stat-value">{{ publishedCount }} <small>部</small></div></div
-    >
-  </div>
-  <section class="panel recent-panel"
-    ><div class="panel-heading"
-      ><div><h2>最近更新</h2><p>短剧内容与发布状态</p></div
-      ><el-button text class="view-all" @click="router.push({ name: 'dramas' })"
-        >短剧管理</el-button
+  <div class="workbench">
+    <div class="page-heading"
+      ><div
+        ><div class="eyebrow">内容概览</div><h1>工作台</h1
+        ><p>用户、设备、留存与短剧内容总览。</p></div
+      ><el-button
+        v-if="can('drama:create')"
+        type="primary"
+        class="primary-button"
+        @click="router.push({ name: 'dramas' })"
+        ><AppIcon :icon="AppIcons.add" />上传新短剧</el-button
      ></div
    >
-    <el-table
+    <DashboardMetricWall
      v-loading="loading"
-      :data="recentDramas"
-      row-key="id"
-      empty-text="暂无短剧数据"
-      class="dashboard-el-table"
-      ><el-table-column prop="title" label="短剧名称" min-width="280" /><el-table-column
-        prop="genre"
-        label="类型"
-        width="150" /><el-table-column label="集数" width="120"
-        ><template #default="scope">{{ scope?.row?.episodes }} 集</template></el-table-column
-      ><el-table-column label="播放量" width="140"
-        ><template #default="scope">{{ formatCount(scope?.row?.views) }}</template></el-table-column
-      ><el-table-column label="状态" width="130"
-        ><template #default="scope"
-          ><el-tag
-            v-if="scope?.row"
-            :class="['status-badge', statusClass(scope.row.status)]"
-            effect="light"
-            >{{ scope.row.statusText }}</el-tag
-          ></template
-        ></el-table-column
-      ><el-table-column prop="updatedAt" label="更新时间" width="180"
-    /></el-table>
-  </section>
+      :overview="overview"
+      :trend="trend"
+      :fallback="metricFallback"
+    />
+    <section class="panel recent-panel"
+      ><div class="panel-heading"
+        ><div><h2>最近更新</h2><p>短剧内容与发布状态</p></div
+        ><el-button text class="view-all" @click="router.push({ name: 'dramas' })"
+          >短剧管理</el-button
+        ></div
+      >
+      <el-table
+        v-loading="loading"
+        :data="recentDramas"
+        row-key="id"
+        empty-text="暂无短剧数据"
+        class="dashboard-el-table"
+        ><el-table-column prop="title" label="短剧名称" min-width="280" /><el-table-column
+          prop="genre"
+          label="类型"
+          width="150" /><el-table-column label="集数" width="120"
+          ><template #default="scope">{{ scope?.row?.episodes }} 集</template></el-table-column
+        ><el-table-column label="播放量" width="140"
+          ><template #default="scope">{{
+            formatCount(scope?.row?.views)
+          }}</template></el-table-column
+        ><el-table-column label="状态" width="130"
+          ><template #default="scope"
+            ><el-tag
+              v-if="scope?.row"
+              :class="['status-badge', statusClass(scope.row.status)]"
+              effect="light"
+              >{{ scope.row.statusText }}</el-tag
+            ></template
+          ></el-table-column
+        ><el-table-column prop="updatedAt" label="更新时间" width="180"
+      /></el-table>
+    </section>
+  </div>
 </template>
+
+<style scoped>
+.workbench {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.workbench .page-heading {
+  flex: none;
+  margin-bottom: 12px;
+}
+
+.workbench :deep(.screen) {
+  flex: 1;
+  min-height: 0;
+}
+
+.recent-panel {
+  flex: none;
+  max-height: 220px;
+  margin-top: 12px;
+  overflow: auto;
+}
+</style>
@@ -0,0 +1,100 @@
+<!-- Author: fruit.com.cn -->
+<!-- 转码通知页：按转码中、成功、失败查看短剧和集数。 -->
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import PageHeading from '@/views/components/PageHeading.vue'
+import {
+  getTranscodeNoticesApi,
+  type TranscodeNotice,
+  type TranscodeNoticeItem
+} from '@/api/admin/transcodeNotice'
+import { formatDateTime } from '@/utils/format'
+import { markTranscodeNoticeSeen } from '@/utils/transcodeNoticeSeen'
+
+const loading = ref(false)
+const tab = ref('RUNNING')
+const notice = ref<TranscodeNotice | null>(null)
+
+const rows = computed<TranscodeNoticeItem[]>(() => {
+  if (tab.value === 'SUCCESS') return notice.value?.successList || []
+  if (tab.value === 'FAILED') return notice.value?.failedList || []
+  return notice.value?.runningList || []
+})
+
+function episodeText(row: TranscodeNoticeItem) {
+  const no = row.episodeNo ? `第${row.episodeNo}集` : ''
+  if (!row.episodeTitle || row.episodeTitle === no) return no || '集数未知'
+  return no ? `${no} ${row.episodeTitle}` : row.episodeTitle
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const res = await getTranscodeNoticesApi()
+    notice.value = res.data || null
+    if (notice.value) {
+      markTranscodeNoticeSeen({
+        running: Number(notice.value.running || 0),
+        success: Number(notice.value.success || 0),
+        failed: Number(notice.value.failed || 0)
+      })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="通知"
+    title="转码通知"
+    description="查看转码中、转码成功和转码失败的短剧与集数。"
+  >
+    <el-button :loading="loading" @click="load">刷新</el-button>
+  </PageHeading>
+
+  <section class="panel notice-panel">
+    <el-tabs v-model="tab">
+      <el-tab-pane label="转码中" name="RUNNING" />
+      <el-tab-pane label="转码成功" name="SUCCESS" />
+      <el-tab-pane label="转码失败" name="FAILED" />
+    </el-tabs>
+
+    <el-table
+      v-loading="loading"
+      :data="rows"
+      row-key="id"
+      border
+      class="drama-el-table"
+      empty-text="暂无通知"
+    >
+      <el-table-column prop="dramaTitle" label="短剧" min-width="220" show-overflow-tooltip />
+      <el-table-column label="集数" min-width="180" show-overflow-tooltip>
+        <template #default="{ row }">{{ episodeText(row) }}</template>
+      </el-table-column>
+      <el-table-column label="进度" width="100">
+        <template #default="{ row }">{{ row.progress ?? 0 }}%</template>
+      </el-table-column>
+      <el-table-column
+        v-if="tab === 'FAILED'"
+        prop="errorMsg"
+        label="失败原因"
+        min-width="220"
+        show-overflow-tooltip
+      />
+      <el-table-column label="更新时间" width="180">
+        <template #default="{ row }">{{ formatDateTime(row.updatedAt) }}</template>
+      </el-table-column>
+    </el-table>
+  </section>
+</template>
+
+<style scoped>
+.notice-panel {
+  padding: 8px 16px 16px;
+}
+</style>
@@ -0,0 +1,67 @@
+<!-- Author: fruit.com.cn -->
+<!-- 先勾选语言，再填写对应文案。中文始终保留。 -->
+
+<script setup>
+import { CONTENT_LANGUAGES, languageLabel } from '@/constants/contentLanguages'
+
+const props = defineProps({
+  languages: { type: Array, required: true },
+  locales: { type: Object, required: true },
+  label: { type: String, default: '名称' },
+  maxlength: { type: Number, default: 64 },
+  multiline: { type: Boolean, default: false },
+  showLanguages: { type: Boolean, default: true },
+  required: { type: Boolean, default: true }
+})
+const emit = defineEmits(['update:languages'])
+
+function changeLanguages(codes) {
+  const next = codes.includes('zh') ? codes : ['zh', ...codes]
+  next.forEach((code) => {
+    if (props.locales[code] == null) props.locales[code] = ''
+  })
+  emit('update:languages', next)
+}
+</script>
+
+<template>
+  <el-form-item v-if="showLanguages" label="语言" required>
+    <el-select
+      :model-value="languages"
+      multiple
+      placeholder="选择语言"
+      style="width: 100%"
+      @change="changeLanguages"
+    >
+      <el-option
+        v-for="item in CONTENT_LANGUAGES"
+        :key="item.code"
+        :label="item.label"
+        :value="item.code"
+        :disabled="item.code === 'zh'"
+      />
+    </el-select>
+  </el-form-item>
+  <el-form-item
+    v-for="code in languages"
+    :key="label + code"
+    :label="languageLabel(code) + label"
+    :required="required"
+  >
+    <el-input
+      v-if="!multiline"
+      v-model="locales[code]"
+      :maxlength="maxlength"
+      :placeholder="'请填写' + languageLabel(code) + label"
+    />
+    <el-input
+      v-else
+      v-model="locales[code]"
+      type="textarea"
+      :rows="2"
+      :maxlength="maxlength"
+      show-word-limit
+      :placeholder="'请填写' + languageLabel(code) + label"
+    />
+  </el-form-item>
+</template>
@@ -6,6 +6,12 @@ import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcon } from '@/components/AppIcon'
 import { AppIcons } from '@/constants/icons'
+import {
+  languageCodes,
+  languageLabel,
+  localesFromColumns,
+  payloadLocales
+} from '@/constants/contentLanguages'
 import {
  bindClassificationDramasApi,
  createClassificationApi,
@@ -18,6 +24,8 @@ import {
 } from '@/api/admin/dramaClassification'
 import { statusClass } from '@/utils/status'
 import { useRbac } from '@/stores/rbac'
+import ClassificationDramaDialogs from './ClassificationDramaDialogs.vue'
+import ClassificationSideList from './ClassificationSideList.vue'
 import PageHeading from '@/views/components/PageHeading.vue'

 const { can } = useRbac()
@@ -46,7 +54,9 @@ const keyword = ref('')
 const dialogVisible = ref(false)
 const saving = ref(false)
 const editingId = ref(null)
-const form = reactive({ name: '', sort: 1, status: 1 })
+const languages = ref(['zh'])
+const emptyForm = () => ({ locales: { zh: '' }, sort: 1, status: 1 })
+const form = reactive(emptyForm())

 const candidateVisible = ref(false)
 const candidateLoading = ref(false)
@@ -110,25 +120,39 @@ function changePage(value) {

 function openCreate() {
  editingId.value = null
+  languages.value = ['zh']
  const maxSort = classifications.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
-  Object.assign(form, { name: '', sort: maxSort + 1, status: 1 })
+  Object.assign(form, emptyForm(), { sort: maxSort + 1 })
  dialogVisible.value = true
 }

 function openEdit(row) {
  editingId.value = row.id
-  Object.assign(form, { name: row.name, sort: row.sort ?? 0, status: row.status ?? 1 })
+  const locales = localesFromColumns(row.locales, row.name, row.nameEn, row.nameId)
+  languages.value = languageCodes(locales)
+  Object.assign(form, {
+    locales,
+    sort: row.sort ?? 0,
+    status: row.status ?? 1
+  })
  dialogVisible.value = true
 }

 async function saveClassification() {
-  if (!form.name.trim()) {
-    ElMessage.warning('请填写分类名称')
+  const locales = payloadLocales(form.locales, languages.value)
+  const missing = languages.value.find((code) => !locales[code])
+  if (!locales.zh || missing) {
+    ElMessage.warning(missing ? `请填写${languageLabel(missing)}名称` : '请填写中文名称')
    return
  }
  saving.value = true
  try {
-    const payload = { name: form.name.trim(), sort: form.sort, status: form.status }
+    const payload = {
+      name: locales.zh,
+      locales,
+      sort: form.sort,
+      status: form.status
+    }
    if (editingId.value) {
      await updateClassificationApi(editingId.value, payload)
      ElMessage.success('分类已更新')
@@ -256,48 +280,13 @@ onMounted(loadClassifications)
  </PageHeading>

  <div class="classification-layout">
-    <aside class="panel classification-layout__side">
-      <div class="classification-layout__side-title">全部分类</div>
-      <el-scrollbar height="560px">
-        <ul class="classification-list">
-          <li
-            v-for="item in classifications"
-            :key="item.id"
-            class="classification-list__item"
-            :class="{ 'is-active': item.id === activeId }"
-            @click="selectClassification(item)"
-          >
-            <div class="classification-list__main">
-              <span class="classification-list__name">{{ item.name }}</span>
-              <span class="classification-list__count">{{ item.dramaCount || 0 }}</span>
-            </div>
-            <div class="classification-list__actions" @click.stop>
-              <el-button
-                v-if="can('drama:update')"
-                text
-                circle
-                size="small"
-                @click="openEdit(item)"
-              >
-                <AppIcon :icon="AppIcons.edit" :size="15" />
-              </el-button>
-              <el-button
-                v-if="can('drama:delete')"
-                text
-                circle
-                size="small"
-                @click="confirmDelete(item)"
-              >
-                <AppIcon :icon="AppIcons.delete" :size="15" />
-              </el-button>
-            </div>
-          </li>
-          <li v-if="!classifications.length" class="classification-list__empty">
-            还没有分类，点右上角「新建分类」开始
-          </li>
-        </ul>
-      </el-scrollbar>
-    </aside>
+    <ClassificationSideList
+      :classifications="classifications"
+      :active-id="activeId"
+      @select="selectClassification"
+      @edit="openEdit"
+      @remove="confirmDelete"
+    />

    <section class="panel classification-layout__main">
      <div class="classification-toolbar">
@@ -376,77 +365,27 @@ onMounted(loadClassifications)
    </section>
  </div>

-  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑分类' : '新建分类'" width="460px">
-    <el-form label-position="top">
-      <el-form-item label="分类名称" required>
-        <el-input v-model="form.name" maxlength="20" placeholder="例如：本周必看" />
-      </el-form-item>
-      <div class="classification-form-row">
-        <el-form-item label="排序">
-          <el-input-number v-model="form.sort" :min="0" :max="999" />
-        </el-form-item>
-        <el-form-item label="状态">
-          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
-        </el-form-item>
-      </div>
-    </el-form>
-    <template #footer>
-      <el-button @click="dialogVisible = false">取消</el-button>
-      <el-button type="primary" :loading="saving" @click="saveClassification">保存</el-button>
-    </template>
-  </el-dialog>
-
-  <el-dialog v-model="candidateVisible" title="添加关联短剧" width="760px">
-    <div class="classification-toolbar__search" style="margin-bottom: 12px">
-      <el-input
-        v-model="candidateKeyword"
-        placeholder="搜索短剧名称"
-        clearable
-        style="width: 220px"
-        @keyup.enter="candidateSearch"
-        @clear="candidateSearch"
-      />
-      <el-button type="primary" plain @click="candidateSearch">查询</el-button>
-    </div>
-    <el-table
-      v-loading="candidateLoading"
-      :data="candidates"
-      row-key="id"
-      border
-      max-height="380"
-      empty-text="没有可关联的短剧"
-      @selection-change="onSelectionChange"
-    >
-      <el-table-column type="selection" width="48" />
-      <el-table-column prop="title" label="短剧名称" min-width="220" />
-      <el-table-column label="集数" width="90">
-        <template #default="{ row }">{{ row.totalEpisodes || 0 }}</template>
-      </el-table-column>
-      <el-table-column label="状态" width="110">
-        <template #default="{ row }">
-          <span class="status-dot" :class="statusClass(row.status)">
-            {{ STATUS_TEXT[row.status] || row.status }}
-          </span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="sort" label="排序" width="90" />
-    </el-table>
-    <div class="classification-pagination">
-      <el-pagination
-        :current-page="candidatePage"
-        :page-size="candidatePageSize"
-        :total="candidateTotal"
-        layout="total, prev, pager, next"
-        @current-change="changeCandidatePage"
-      />
-    </div>
-    <template #footer>
-      <el-button @click="candidateVisible = false">取消</el-button>
-      <el-button type="primary" :loading="binding" @click="confirmBind">
-        确定关联{{ selectedDramas.length ? `（${selectedDramas.length}）` : '' }}
-      </el-button>
-    </template>
-  </el-dialog>
+  <ClassificationDramaDialogs
+    v-model:editor-visible="dialogVisible"
+    v-model:languages="languages"
+    v-model:candidate-visible="candidateVisible"
+    v-model:candidate-keyword="candidateKeyword"
+    :editing-id="editingId"
+    :form="form"
+    :saving="saving"
+    :candidate-loading="candidateLoading"
+    :candidates="candidates"
+    :candidate-page="candidatePage"
+    :candidate-page-size="candidatePageSize"
+    :candidate-total="candidateTotal"
+    :binding="binding"
+    :selected-count="selectedDramas.length"
+    @save="saveClassification"
+    @search="candidateSearch"
+    @page="changeCandidatePage"
+    @selection="onSelectionChange"
+    @confirm="confirmBind"
+  />
 </template>

 <style scoped>
@@ -457,83 +396,6 @@ onMounted(loadClassifications)
  align-items: start;
 }

-.classification-layout__side {
-  padding: 12px 0 8px;
-}
-
-.classification-layout__side-title {
-  padding: 0 16px 10px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-}
-
-.classification-list {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.classification-list__item {
-  display: flex;
-  padding: 8px 12px 8px 16px;
-  color: var(--el-text-color-regular);
-  cursor: pointer;
-  border-left: 3px solid transparent;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.classification-list__item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.classification-list__item.is-active {
-  font-weight: 600;
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-  border-left-color: var(--el-color-primary);
-}
-
-.classification-list__main {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.classification-list__name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.classification-list__count {
-  min-width: 24px;
-  padding: 0 6px;
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--el-text-color-secondary);
-  text-align: center;
-  background: var(--el-fill-color);
-  border-radius: 9px;
-}
-
-.classification-list__actions {
-  display: none;
-  gap: 2px;
-}
-
-.classification-list__item:hover .classification-list__actions {
-  display: flex;
-}
-
-.classification-list__empty {
-  padding: 16px;
-  line-height: 1.6;
-  color: var(--el-text-color-secondary);
-}
-
 .classification-layout__main {
  padding: 16px;
 }
@@ -585,10 +447,4 @@ onMounted(loadClassifications)
  justify-content: flex-end;
  margin-top: 14px;
 }
-
-.classification-form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-}
 </style>
@@ -4,6 +4,12 @@
 import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
+import {
+  languageCodes,
+  languageLabel,
+  localesFromColumns,
+  payloadLocales
+} from '@/constants/contentLanguages'
 import {
  createDramaCategoryApi,
  deleteDramaCategoryApi,
@@ -11,6 +17,7 @@ import {
  updateDramaCategoryApi
 } from '@/api/admin/drama'
 import { useRbac } from '@/stores/rbac'
+import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
 import PageHeading from '@/views/components/PageHeading.vue'

 const { can } = useRbac()
@@ -20,7 +27,8 @@ const list = ref([])
 const dialogVisible = ref(false)
 const saving = ref(false)
 const editingId = ref(null)
-const form = reactive({ name: '', sort: 1, status: 1 })
+const languages = ref(['zh'])
+const form = reactive({ locales: { zh: '' }, sort: 1, status: 1 })

 async function load() {
  loading.value = true
@@ -38,21 +46,29 @@ function nextSort() {

 function openCreate() {
  editingId.value = null
-  Object.assign(form, { name: '', sort: nextSort(), status: 1 })
+  languages.value = ['zh']
+  Object.assign(form, { locales: { zh: '' }, sort: nextSort(), status: 1 })
  dialogVisible.value = true
 }

 function openEdit(row) {
  editingId.value = row.id
-  Object.assign(form, { name: row.name, sort: row.sort ?? 0, status: row.status ?? 1 })
+  const locales = localesFromColumns(row.locales, row.name, row.nameEn, row.nameId)
+  languages.value = languageCodes(locales)
+  Object.assign(form, { locales, sort: row.sort ?? 0, status: row.status ?? 1 })
  dialogVisible.value = true
 }

 async function saveCategory() {
-  if (!form.name.trim()) return ElMessage.warning('请填写类型名称')
+  const locales = payloadLocales(form.locales, languages.value)
+  const missing = languages.value.find((code) => !locales[code])
+  if (!locales.zh || missing) {
+    ElMessage.warning(missing ? `请填写${languageLabel(missing)}名称` : '请填写中文名称')
+    return
+  }
  saving.value = true
  try {
-    const payload = { name: form.name.trim(), sort: form.sort, status: form.status }
+    const payload = { name: locales.zh, locales, sort: form.sort, status: form.status }
    if (editingId.value) {
      await updateDramaCategoryApi(editingId.value, payload)
      ElMessage.success('类型已更新')
@@ -115,7 +131,20 @@ onMounted(load)
      empty-text="还没有短剧类型"
    >
      <el-table-column type="index" label="序号" width="80" />
-      <el-table-column prop="name" label="类型名称" min-width="200" />
+      <el-table-column prop="name" label="类型名称" min-width="160" />
+      <el-table-column label="语言" min-width="180">
+        <template #default="{ row }">
+          <el-tag
+            v-for="code in languageCodes(
+              row.locales || localesFromColumns(null, row.name, row.nameEn, row.nameId)
+            )"
+            :key="code"
+            effect="light"
+            class="locale-tag"
+            >{{ languageLabel(code) }}</el-tag
+          >
+        </template>
+      </el-table-column>
      <el-table-column label="短剧数" width="110">
        <template #default="{ row }">{{ row.dramaCount || 0 }} 部</template>
      </el-table-column>
@@ -146,11 +175,14 @@ onMounted(load)
    </el-table>
  </section>

-  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑类型' : '新建类型'" width="460px">
+  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑类型' : '新建类型'" width="560px">
    <el-form label-position="top">
-      <el-form-item label="类型名称" required>
-        <el-input v-model="form.name" maxlength="20" placeholder="例如：都市情感" />
-      </el-form-item>
+      <LocaleTextFields
+        v-model:languages="languages"
+        :locales="form.locales"
+        label="名称"
+        :maxlength="64"
+      />
      <div class="form-row">
        <el-form-item label="排序">
          <el-input-number v-model="form.sort" :min="0" :max="999" />
@@ -166,3 +198,9 @@ onMounted(load)
    </template>
  </el-dialog>
 </template>
+
+<style scoped>
+.locale-tag + .locale-tag {
+  margin-left: 6px;
+}
+</style>
@@ -0,0 +1,158 @@
+<!-- Author: fruit.com.cn -->
+<!-- 分类管理弹窗：编辑分类，以及把短剧关联进分类。 -->
+
+<script setup>
+import { statusClass } from '@/utils/status'
+import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+
+const SORT_MAX = 9999
+
+const STATUS_TEXT = {
+  draft: '草稿',
+  reviewing: '审核中',
+  approved: '待发布',
+  published: '已上线',
+  offline: '已下线'
+}
+
+defineProps({
+  editorVisible: { type: Boolean, default: false },
+  editingId: { type: [String, Number], default: null },
+  languages: { type: Array, default: () => ['zh'] },
+  form: { type: Object, required: true },
+  saving: { type: Boolean, default: false },
+  candidateVisible: { type: Boolean, default: false },
+  candidateLoading: { type: Boolean, default: false },
+  candidates: { type: Array, default: () => [] },
+  candidateKeyword: { type: String, default: '' },
+  candidatePage: { type: Number, default: 1 },
+  candidatePageSize: { type: Number, default: 10 },
+  candidateTotal: { type: Number, default: 0 },
+  binding: { type: Boolean, default: false },
+  selectedCount: { type: Number, default: 0 }
+})
+
+const emit = defineEmits([
+  'update:editorVisible',
+  'update:languages',
+  'update:candidateVisible',
+  'update:candidateKeyword',
+  'save',
+  'search',
+  'page',
+  'selection',
+  'confirm'
+])
+</script>
+
+<template>
+  <el-dialog
+    :model-value="editorVisible"
+    :title="editingId ? '编辑分类' : '新建分类'"
+    width="560px"
+    @update:model-value="emit('update:editorVisible', $event)"
+  >
+    <el-form label-position="top">
+      <LocaleTextFields
+        :languages="languages"
+        :locales="form.locales"
+        label="名称"
+        :maxlength="64"
+        @update:languages="emit('update:languages', $event)"
+      />
+      <div class="classification-form-row">
+        <el-form-item label="排序">
+          <el-input-number v-model="form.sort" :min="0" :max="SORT_MAX" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+      </div>
+    </el-form>
+    <template #footer>
+      <el-button @click="emit('update:editorVisible', false)">取消</el-button>
+      <el-button type="primary" :loading="saving" @click="emit('save')">保存</el-button>
+    </template>
+  </el-dialog>
+
+  <el-dialog
+    :model-value="candidateVisible"
+    title="添加关联短剧"
+    width="760px"
+    @update:model-value="emit('update:candidateVisible', $event)"
+  >
+    <div class="classification-toolbar__search">
+      <el-input
+        :model-value="candidateKeyword"
+        placeholder="搜索短剧名称"
+        clearable
+        style="width: 220px"
+        @update:model-value="emit('update:candidateKeyword', $event)"
+        @keyup.enter="emit('search')"
+        @clear="emit('search')"
+      />
+      <el-button type="primary" plain @click="emit('search')">查询</el-button>
+    </div>
+    <el-table
+      v-loading="candidateLoading"
+      :data="candidates"
+      row-key="id"
+      border
+      max-height="380"
+      empty-text="没有可关联的短剧"
+      @selection-change="emit('selection', $event)"
+    >
+      <el-table-column type="selection" width="48" />
+      <el-table-column prop="title" label="短剧名称" min-width="220" />
+      <el-table-column label="集数" width="90">
+        <template #default="{ row }">{{ row.totalEpisodes || 0 }}</template>
+      </el-table-column>
+      <el-table-column label="状态" width="110">
+        <template #default="{ row }">
+          <span class="status-dot" :class="statusClass(row.status)">
+            {{ STATUS_TEXT[row.status] || row.status }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sort" label="排序" width="90" />
+    </el-table>
+    <div class="classification-pagination">
+      <el-pagination
+        :current-page="candidatePage"
+        :page-size="candidatePageSize"
+        :total="candidateTotal"
+        layout="total, prev, pager, next"
+        @current-change="emit('page', $event)"
+      />
+    </div>
+    <template #footer>
+      <el-button @click="emit('update:candidateVisible', false)">取消</el-button>
+      <el-button type="primary" :loading="binding" @click="emit('confirm')">
+        确定关联{{ selectedCount ? `（${selectedCount}）` : '' }}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.classification-form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.classification-toolbar__search {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.classification-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+</style>
@@ -0,0 +1,140 @@
+<!-- Author: fruit.com.cn -->
+<!-- 分类管理左侧列表：切换、编辑、删除。 -->
+
+<script setup>
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+import { useRbac } from '@/stores/rbac'
+
+defineProps({
+  classifications: { type: Array, default: () => [] },
+  activeId: { type: [String, Number], default: null }
+})
+
+const emit = defineEmits(['select', 'edit', 'remove'])
+const { can } = useRbac()
+</script>
+
+<template>
+  <aside class="panel classification-layout__side">
+    <div class="classification-layout__side-title">全部分类</div>
+    <el-scrollbar height="560px">
+      <ul class="classification-list">
+        <li
+          v-for="item in classifications"
+          :key="item.id"
+          class="classification-list__item"
+          :class="{ 'is-active': item.id === activeId }"
+          @click="emit('select', item)"
+        >
+          <div class="classification-list__main">
+            <span class="classification-list__name">{{ item.name }}</span>
+            <span class="classification-list__count">{{ item.dramaCount || 0 }}</span>
+          </div>
+          <div class="classification-list__actions" @click.stop>
+            <el-button
+              v-if="can('drama:update')"
+              text
+              circle
+              size="small"
+              @click="emit('edit', item)"
+            >
+              <AppIcon :icon="AppIcons.edit" :size="15" />
+            </el-button>
+            <el-button
+              v-if="can('drama:delete')"
+              text
+              circle
+              size="small"
+              @click="emit('remove', item)"
+            >
+              <AppIcon :icon="AppIcons.delete" :size="15" />
+            </el-button>
+          </div>
+        </li>
+        <li v-if="!classifications.length" class="classification-list__empty">
+          还没有分类，点右上角「新建分类」开始
+        </li>
+      </ul>
+    </el-scrollbar>
+  </aside>
+</template>
+
+<style scoped>
+.classification-layout__side {
+  padding: 12px 0 8px;
+}
+
+.classification-layout__side-title {
+  padding: 0 16px 10px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.classification-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.classification-list__item {
+  display: flex;
+  padding: 8px 12px 8px 16px;
+  color: var(--el-text-color-regular);
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.classification-list__item:hover {
+  background: var(--el-fill-color-light);
+}
+
+.classification-list__item.is-active {
+  font-weight: 600;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  border-left-color: var(--el-color-primary);
+}
+
+.classification-list__main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.classification-list__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.classification-list__count {
+  min-width: 24px;
+  padding: 0 6px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--el-text-color-secondary);
+  text-align: center;
+  background: var(--el-fill-color);
+  border-radius: 9px;
+}
+
+.classification-list__actions {
+  display: none;
+  gap: 2px;
+}
+
+.classification-list__item:hover .classification-list__actions {
+  display: flex;
+}
+
+.classification-list__empty {
+  padding: 16px;
+  line-height: 1.6;
+  color: var(--el-text-color-secondary);
+}
+</style>
@@ -5,6 +5,13 @@ import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
+import {
+  languageLabel,
+  languageCodes,
+  localesFromColumns,
+  payloadLocales
+} from '@/constants/contentLanguages'
+import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
 import { AppImage } from '@/components/AppImage'
 import {
  changeDramaStatusApi,
@@ -16,6 +23,7 @@ import {
 } from '@/api/admin/drama'
 import { useRbac } from '@/stores/rbac'
 import { formatCount } from '@/utils/format'
+import { listContentTagsApi } from '@/api/admin/contentTag'
 import { statusClass } from '@/utils/status'
 import { uploadFile } from '@/utils/uploader'

@@ -30,8 +38,7 @@ const categories = ref([])
 const keyword = ref('')
 const statusFilter = ref(undefined)
 const categoryIds = ref([])
-const dramaTypes = ref([])
-const hotFilter = ref(undefined)
+const tags = ref([])
 const pageIndex = ref(1)
 const pageSize = ref(10)

@@ -45,11 +52,14 @@ const editingId = ref(null)
 const editingCommentCount = ref(0)
 const editingLikeCount = ref(0)
 const formRef = ref()
+const textLanguages = ref(['zh'])
 const form = reactive({
  title: '',
+  titleLocales: { zh: '' },
  categoryIds: [],
-  dramaTypes: ['LIVE'],
+  tagId: null,
  description: '',
+  synopsisLocales: { zh: '' },
  freeEpisodes: 3,
  unlockCoin: 0,
  favoriteCount: 0,
@@ -62,16 +72,6 @@ const form = reactive({
 const MAX_COVER_SIZE = 5 * 1024 * 1024
 const COVER_TYPES = ['image/jpeg', 'image/png', 'image/webp']

-const formRules = {
-  title: [{ required: true, message: '请输入短剧名称', trigger: 'blur' }],
-  categoryIds: [
-    { type: 'array', required: true, min: 1, message: '请至少选择一个类型', trigger: 'change' }
-  ],
-  dramaTypes: [
-    { type: 'array', required: true, min: 1, message: '请至少选择一个内容类型', trigger: 'change' }
-  ]
-}
-
 const coverDisplayName = computed(
  () => coverFileName.value || (form.cover ? coverBasename(form.cover) : '尚未选择封面')
 )
@@ -90,11 +90,6 @@ const statusOptions = [
  { code: 'offline', text: '已下线' }
 ]

-const dramaTypeOptions = [
-  { value: 'ANIME', label: '漫剧' },
-  { value: 'LIVE', label: '真人剧' }
-]
-
 const actionMeta = {
  submit: { label: '提交审核', done: '已提交审核' },
  approve: { label: '审核通过', done: '已通过审核' },
@@ -111,9 +106,7 @@ async function load() {
      pageSize: pageSize.value,
      keyword: keyword.value.trim() || undefined,
      status: statusFilter.value || undefined,
-      categoryIds: categoryIds.value.length ? categoryIds.value : undefined,
-      dramaTypes: dramaTypes.value.length ? dramaTypes.value : undefined,
-      isHot: hotFilter.value
+      categoryIds: categoryIds.value.length ? categoryIds.value : undefined
    })
    list.value = res.data?.list || []
    total.value = res.data?.total || 0
@@ -127,6 +120,11 @@ async function loadCategories() {
  categories.value = res.data || []
 }

+async function loadTags() {
+  const res = await listContentTagsApi(true)
+  tags.value = res.data || []
+}
+
 function search() {
  pageIndex.value = 1
  load()
@@ -136,8 +134,6 @@ function resetFilters() {
  keyword.value = ''
  statusFilter.value = undefined
  categoryIds.value = []
-  dramaTypes.value = []
-  hotFilter.value = undefined
  search()
 }

@@ -146,24 +142,50 @@ function handleSizeChange() {
  load()
 }

+function selectedCategoryIds(row) {
+  const values =
+    Array.isArray(row.categoryIds) && row.categoryIds.length
+      ? row.categoryIds
+      : row.categoryId
+        ? [row.categoryId]
+        : []
+  return values.filter((id) => Number(id) > 0)
+}
+
 function coverBasename(path) {
  if (!path) return ''
  const clean = path.split('?')[0].split('#')[0]
  return decodeURIComponent(clean.split('/').pop() || clean)
 }

+/** 长整型计数字段在接口里是字符串，数字输入框只接受 number。 */
+function toCount(value) {
+  const count = Number(value)
+  return Number.isFinite(count) ? count : 0
+}
+
 async function resetValidation() {
  await nextTick()
  formRef.value?.clearValidate()
 }

+function changeTextLanguages(codes) {
+  textLanguages.value = codes
+  codes.forEach((code) => {
+    if (form.synopsisLocales[code] == null) form.synopsisLocales[code] = ''
+  })
+}
+
 function openCreate() {
  editingId.value = null
+  textLanguages.value = ['zh']
  Object.assign(form, {
    title: '',
+    titleLocales: { zh: '' },
    categoryIds: [],
-    dramaTypes: ['LIVE'],
+    tagId: null,
    description: '',
+    synopsisLocales: { zh: '' },
    freeEpisodes: 3,
    unlockCoin: 0,
    favoriteCount: 0,
@@ -182,41 +204,35 @@ function openCreate() {

 function openEdit(row) {
  editingId.value = row.id
+  const titleLocales = localesFromColumns(row.titleLocales, row.title)
+  const synopsisLocales = localesFromColumns(row.synopsisLocales, row.description)
+  textLanguages.value = languageCodes(titleLocales)
+  textLanguages.value.forEach((code) => {
+    if (synopsisLocales[code] == null) synopsisLocales[code] = ''
+  })
  Object.assign(form, {
    title: row.title,
-    categoryIds:
-      Array.isArray(row.categoryIds) && row.categoryIds.length
-        ? row.categoryIds
-        : row.categoryId
-          ? [row.categoryId]
-          : [],
-    dramaTypes:
-      Array.isArray(row.dramaTypes) && row.dramaTypes.length
-        ? row.dramaTypes
-        : row.dramaType
-          ? [row.dramaType]
-          : ['LIVE'],
+    titleLocales,
+    categoryIds: selectedCategoryIds(row),
+    tagId: Number(row.tagId) > 0 ? row.tagId : null,
    description: row.description || '',
-    freeEpisodes: row.freeEpisodes ?? 3,
-    unlockCoin: row.unlockCoin ?? 0,
-    favoriteCount: row.favoriteCount ?? 0,
-    heat: row.views ?? 0,
+    synopsisLocales,
+    freeEpisodes: toCount(row.freeEpisodes ?? 3),
+    unlockCoin: toCount(row.unlockCoin),
+    favoriteCount: toCount(row.favoriteCount),
+    heat: toCount(row.views),
    isHot: !!row.isHot,
-    sort: row.sort ?? 0,
+    sort: toCount(row.sort),
    cover: row.cover || ''
  })
  coverFileName.value = row.cover ? coverBasename(row.cover) : ''
  coverError.value = ''
-  editingCommentCount.value = row.commentCount ?? 0
-  editingLikeCount.value = row.likeCount ?? 0
+  editingCommentCount.value = toCount(row.commentCount)
+  editingLikeCount.value = toCount(row.likeCount)
  dialogVisible.value = true
  resetValidation()
 }

-function dramaTypeLabel(value) {
-  return dramaTypeOptions.find((item) => item.value === value)?.label || '真人剧'
-}
-
 function rowCategoryList(row) {
  if (Array.isArray(row.categoryNames) && row.categoryNames.length) {
    return row.categoryNames.filter(Boolean)
@@ -228,25 +244,26 @@ function rowCategoryList(row) {
    .filter(Boolean)
 }

-function rowDramaTypes(row) {
-  if (Array.isArray(row.dramaTypes) && row.dramaTypes.length) return row.dramaTypes
-  return row.dramaType ? [row.dramaType] : []
-}
-
 async function saveDrama() {
  if (saving.value || uploadingCover.value) return
-  try {
-    await formRef.value?.validate()
-  } catch {
+  const titles = payloadLocales(form.titleLocales, textLanguages.value)
+  const missing = textLanguages.value.find((code) => !titles[code])
+  if (!titles.zh || missing) {
+    ElMessage.warning(missing ? `请填写${languageLabel(missing)}名称` : '请输入短剧名称')
    return
  }
+  const synopses = payloadLocales(form.synopsisLocales, textLanguages.value)
  const categoryNames = form.categoryIds
    .map((id) => categories.value.find((item) => item.id === id)?.name)
    .filter(Boolean)
  const payload = {
    ...form,
-    title: form.title.trim(),
-    genre: categoryNames.join(' / ')
+    title: titles.zh,
+    titleLocales: titles,
+    description: synopses.zh || '',
+    synopsisLocales: synopses,
+    genre: categoryNames.join(' / '),
+    tagId: form.tagId || 0
  }
  saving.value = true
  try {
@@ -370,7 +387,7 @@ function reviewActions(row) {
 }

 onMounted(async () => {
-  await loadCategories()
+  await Promise.all([loadCategories(), loadTags()])
  await load()
 })
 </script>
@@ -413,22 +430,6 @@ onMounted(async () => {
            :key="item.id"
            :label="item.name"
            :value="item.id" /></el-select
-        ><el-select
-          v-model="dramaTypes"
-          class="drama-multi-select"
-          multiple
-          clearable
-          placeholder="全部内容类型"
-          @change="search"
-          ><el-option
-            v-for="item in dramaTypeOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value" /></el-select
-        ><el-select v-model="hotFilter" clearable placeholder="全部热度" @change="search"
-          ><el-option label="仅热门" :value="true" /><el-option
-            label="非热门"
-            :value="false" /></el-select
        ><el-button @click="resetFilters">重置</el-button></div
      ><span class="table-result-count">共 {{ total }} 部短剧</span></div
    >
@@ -465,24 +466,17 @@ onMounted(async () => {
      >
      <el-table-column label="类型" min-width="200"
        ><template #default="{ row }"
-          ><div class="tag-wrap"
+          ><div v-if="rowCategoryList(row).length" class="tag-wrap"
            ><el-tag v-for="name in rowCategoryList(row)" :key="name" type="info" effect="light">{{
              name
            }}</el-tag></div
-          ></template
+          ><span v-else class="table-empty-text">—</span></template
        >
      </el-table-column>
-      <el-table-column label="内容类型" min-width="180"
+      <el-table-column label="标签" min-width="120"
        ><template #default="{ row }"
-          ><div class="tag-wrap"
-            ><el-tag
-              v-for="type in rowDramaTypes(row)"
-              :key="type"
-              :type="type === 'ANIME' ? 'warning' : 'info'"
-              effect="light"
-              >{{ dramaTypeLabel(type) }}</el-tag
-            ></div
-          ></template
+          ><span v-if="row.tagName">{{ row.tagName }}</span
+          ><span v-else class="table-empty-text">—</span></template
        ></el-table-column
      >
      <el-table-column label="集数" width="90"
@@ -513,12 +507,6 @@ onMounted(async () => {
          }}</el-tag></template
        ></el-table-column
      >
-      <el-table-column label="热门" width="90"
-        ><template #default="{ row }"
-          ><el-tag v-if="row.isHot" type="danger" effect="light">热门</el-tag
-          ><span v-else class="table-empty-text">—</span></template
-        ></el-table-column
-      >
      <el-table-column prop="updatedAt" label="更新时间" width="160" />
      <el-table-column label="审核" width="140"
        ><template #default="{ row }"
@@ -576,141 +564,12 @@ onMounted(async () => {
  <el-dialog
    v-model="dialogVisible"
    :title="editingId ? '编辑短剧' : '新建短剧'"
-    width="680px"
+    width="760px"
    class="drama-editor-dialog"
    :close-on-click-modal="false"
    :before-close="beforeDialogClose"
  >
-    <el-form
-      ref="formRef"
-      :model="form"
-      :rules="formRules"
-      label-position="top"
-      class="drama-editor-form"
-    >
-      <section class="editor-section">
-        <h3 class="editor-section-title">基础信息</h3>
-        <div class="editor-grid editor-grid--two">
-          <el-form-item label="短剧名称" prop="title">
-            <el-input v-model="form.title" maxlength="80" placeholder="请输入短剧名称" />
-          </el-form-item>
-          <el-form-item label="类型" prop="categoryIds">
-            <el-select
-              v-model="form.categoryIds"
-              class="drama-multi-select"
-              multiple
-              filterable
-              placeholder="请选择类型"
-            >
-              <el-option
-                v-for="item in categories"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="内容类型" prop="dramaTypes">
-            <el-select
-              v-model="form.dramaTypes"
-              class="drama-multi-select"
-              multiple
-              filterable
-              placeholder="请选择内容类型"
-            >
-              <el-option
-                v-for="item in dramaTypeOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </div>
-        <el-form-item label="简介">
-          <el-input
-            v-model="form.description"
-            type="textarea"
-            :rows="3"
-            maxlength="1000"
-            show-word-limit
-            placeholder="简要介绍剧情"
-          />
-        </el-form-item>
-      </section>
-
-      <section class="editor-section">
-        <h3 class="editor-section-title">付费设置</h3>
-        <div class="editor-grid editor-grid--two">
-          <el-form-item label="免费集数">
-            <el-input-number
-              v-model="form.freeEpisodes"
-              class="editor-number"
-              controls-position="right"
-              :min="0"
-              :max="200"
-            />
-          </el-form-item>
-          <el-form-item label="单集解锁金币">
-            <el-input-number
-              v-model="form.unlockCoin"
-              class="editor-number"
-              controls-position="right"
-              :min="0"
-              :max="9999"
-            />
-          </el-form-item>
-        </div>
-        <div class="editor-grid editor-grid--two">
-          <el-form-item label="是否热门">
-            <el-switch v-model="form.isHot" />
-          </el-form-item>
-          <el-form-item label="排序权重">
-            <el-input-number
-              v-model="form.sort"
-              class="editor-number"
-              controls-position="right"
-              :min="0"
-              :max="99999"
-              :precision="0"
-            />
-            <p class="readonly-stat-hint">数值越大越靠前，相同权重按 ID 倒序</p>
-          </el-form-item>
-        </div>
-      </section>
-
-      <section class="editor-section">
-        <h3 class="editor-section-title">互动数据</h3>
-        <div class="editor-grid editor-grid--two">
-          <el-form-item label="收藏数">
-            <el-input-number
-              v-model="form.favoriteCount"
-              class="editor-number"
-              controls-position="right"
-              :min="0"
-              :precision="0"
-            />
-          </el-form-item>
-          <el-form-item label="点赞数">
-            <div class="readonly-stat">{{ formatCount(editingLikeCount) }}</div>
-            <p class="readonly-stat-hint">全剧分集汇总，只读</p>
-          </el-form-item>
-          <el-form-item label="热度">
-            <el-input-number
-              v-model="form.heat"
-              class="editor-number"
-              controls-position="right"
-              :min="0"
-              :precision="0"
-            />
-          </el-form-item>
-          <el-form-item label="评论数">
-            <div class="readonly-stat">{{ formatCount(editingCommentCount) }}</div>
-            <p class="readonly-stat-hint">全剧汇总，实时统计，只读</p>
-          </el-form-item>
-        </div>
-      </section>
-
+    <el-form ref="formRef" :model="form" label-position="top" class="drama-editor-form">
      <section class="editor-section">
        <h3 class="editor-section-title">封面</h3>
        <div class="cover-editor">
@@ -776,6 +635,117 @@ onMounted(async () => {
          </div>
        </div>
      </section>
+
+      <section class="editor-section">
+        <h3 class="editor-section-title">基础信息</h3>
+        <LocaleTextFields
+          :languages="textLanguages"
+          :locales="form.titleLocales"
+          label="名称"
+          :maxlength="80"
+          @update:languages="changeTextLanguages"
+        />
+        <div class="editor-grid editor-grid--two">
+          <el-form-item label="类型">
+            <el-select
+              v-model="form.categoryIds"
+              class="drama-multi-select"
+              multiple
+              filterable
+              clearable
+              placeholder="可不选"
+            >
+              <el-option
+                v-for="item in categories"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="标签">
+            <el-select v-model="form.tagId" clearable filterable placeholder="可不选">
+              <el-option v-for="item in tags" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+        </div>
+        <LocaleTextFields
+          :languages="textLanguages"
+          :locales="form.synopsisLocales"
+          label="简介"
+          :maxlength="1000"
+          multiline
+          :show-languages="false"
+          :required="false"
+        />
+      </section>
+
+      <section class="editor-section">
+        <h3 class="editor-section-title">付费设置</h3>
+        <div class="editor-grid editor-grid--two">
+          <el-form-item label="免费集数">
+            <el-input-number
+              v-model="form.freeEpisodes"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :max="200"
+            />
+          </el-form-item>
+          <el-form-item label="单集解锁金币">
+            <el-input-number
+              v-model="form.unlockCoin"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :max="9999"
+            />
+          </el-form-item>
+          <el-form-item label="排序">
+            <el-input-number
+              v-model="form.sort"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :max="99999"
+              :precision="0"
+            />
+            <p class="readonly-stat-hint">数值越大越靠前，相同权重按 ID 倒序</p>
+          </el-form-item>
+        </div>
+      </section>
+
+      <section class="editor-section">
+        <h3 class="editor-section-title">互动数据</h3>
+        <div class="editor-grid editor-grid--two">
+          <el-form-item label="收藏数">
+            <el-input-number
+              v-model="form.favoriteCount"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :precision="0"
+            />
+          </el-form-item>
+          <el-form-item label="点赞数">
+            <div class="readonly-stat">{{ formatCount(editingLikeCount) }}</div>
+            <p class="readonly-stat-hint">全剧分集汇总，只读</p>
+          </el-form-item>
+          <el-form-item label="热度">
+            <el-input-number
+              v-model="form.heat"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :precision="0"
+            />
+          </el-form-item>
+          <el-form-item label="评论数">
+            <div class="readonly-stat">{{ formatCount(editingCommentCount) }}</div>
+            <p class="readonly-stat-hint">全剧汇总，实时统计，只读</p>
+          </el-form-item>
+        </div>
+      </section>
    </el-form>

    <template #footer>
@@ -816,6 +786,20 @@ onMounted(async () => {
  min-width: 0;
 }

+.drama-editor-form :deep(.el-form-item) {
+  margin-right: 0;
+}
+
+.drama-editor-form :deep(.el-form-item__content) {
+  min-width: 0;
+}
+
+.drama-editor-form :deep(.el-input),
+.drama-editor-form :deep(.el-textarea),
+.drama-editor-form :deep(.el-select) {
+  width: 100%;
+}
+
 .tag-wrap {
  display: flex;
  flex-wrap: wrap;
@@ -6,6 +6,12 @@ import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcon } from '@/components/AppIcon'
 import { AppIcons } from '@/constants/icons'
+import {
+  languageCodes,
+  languageLabel,
+  localesFromColumns,
+  payloadLocales
+} from '@/constants/contentLanguages'
 import {
  bindPlaylistCategoryDramasApi,
  createPlaylistCategoryApi,
@@ -18,6 +24,7 @@ import {
 } from '@/api/admin/dramaPlaylistCategory'
 import { statusClass } from '@/utils/status'
 import { useRbac } from '@/stores/rbac'
+import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
 import PageHeading from '@/views/components/PageHeading.vue'

 const { can } = useRbac()
@@ -46,7 +53,14 @@ const keyword = ref('')
 const dialogVisible = ref(false)
 const saving = ref(false)
 const editingId = ref(null)
-const form = reactive({ name: '', description: '', sort: 1, status: 1 })
+const languages = ref(['zh'])
+const emptyForm = () => ({
+  locales: { zh: '' },
+  descriptionLocales: { zh: '' },
+  sort: 1,
+  status: 1
+})
+const form = reactive(emptyForm())

 const candidateVisible = ref(false)
 const candidateLoading = ref(false)
@@ -108,18 +122,37 @@ function changePage(value) {
  loadDramas()
 }

+function changeLanguages(codes) {
+  languages.value = codes
+  codes.forEach((code) => {
+    if (form.descriptionLocales[code] == null) form.descriptionLocales[code] = ''
+  })
+}
+
 function openCreate() {
  editingId.value = null
+  languages.value = ['zh']
  const maxSort = categories.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
-  Object.assign(form, { name: '', description: '', sort: maxSort + 1, status: 1 })
+  Object.assign(form, emptyForm(), { sort: maxSort + 1 })
  dialogVisible.value = true
 }

 function openEdit(row) {
  editingId.value = row.id
+  const locales = localesFromColumns(row.locales, row.name, row.nameEn, row.nameId)
+  languages.value = languageCodes(locales)
+  const descriptionLocales = localesFromColumns(
+    row.descriptionLocales,
+    row.description,
+    row.descriptionEn,
+    row.descriptionId
+  )
+  languages.value.forEach((code) => {
+    if (descriptionLocales[code] == null) descriptionLocales[code] = ''
+  })
  Object.assign(form, {
-    name: row.name,
-    description: row.description || '',
+    locales,
+    descriptionLocales,
    sort: row.sort ?? 0,
    status: row.status ?? 1
  })
@@ -127,15 +160,18 @@ function openEdit(row) {
 }

 async function saveCategory() {
-  if (!form.name.trim()) {
-    ElMessage.warning('请填写剧单分类名称')
+  const locales = payloadLocales(form.locales, languages.value)
+  const missing = languages.value.find((code) => !locales[code])
+  if (!locales.zh || missing) {
+    ElMessage.warning(missing ? `请填写${languageLabel(missing)}名称` : '请填写中文名称')
    return
  }
  saving.value = true
  try {
    const payload = {
-      name: form.name.trim(),
-      description: form.description.trim(),
+      name: locales.zh,
+      locales,
+      descriptionLocales: payloadLocales(form.descriptionLocales, languages.value),
      sort: form.sort,
      status: form.status
    }
@@ -390,22 +426,25 @@ onMounted(loadCategories)
  <el-dialog
    v-model="dialogVisible"
    :title="editingId ? '编辑剧单分类' : '新建剧单分类'"
-    width="460px"
+    width="640px"
  >
    <el-form label-position="top">
-      <el-form-item label="分类名称" required>
-        <el-input v-model="form.name" maxlength="20" placeholder="例如：本周必看" />
-      </el-form-item>
-      <el-form-item label="描述">
-        <el-input
-          v-model="form.description"
-          type="textarea"
-          :rows="2"
-          maxlength="255"
-          show-word-limit
-          placeholder="分类用途说明"
-        />
-      </el-form-item>
+      <LocaleTextFields
+        :languages="languages"
+        :locales="form.locales"
+        label="名称"
+        :maxlength="64"
+        @update:languages="changeLanguages"
+      />
+      <LocaleTextFields
+        :languages="languages"
+        :locales="form.descriptionLocales"
+        label="描述"
+        :maxlength="255"
+        multiline
+        :show-languages="false"
+        :required="false"
+      />
      <div class="playlist-form-row">
        <el-form-item label="排序">
          <el-input-number v-model="form.sort" :min="0" :max="999" />
@@ -0,0 +1,238 @@
+<!-- Author: fruit.com.cn -->
+<!-- 标签管理：名称分中文、英文、印尼语。短剧编辑时单选一个标签。 -->
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { AppIcons } from '@/constants/icons'
+import {
+  languageCodes,
+  languageLabel,
+  localesFromColumns,
+  payloadLocales
+} from '@/constants/contentLanguages'
+import {
+  createContentTagApi,
+  deleteContentTagApi,
+  listContentTagsApi,
+  updateContentTagApi
+} from '@/api/admin/contentTag'
+import { useRbac } from '@/stores/rbac'
+import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
+import PageHeading from '@/views/components/PageHeading.vue'
+
+const { can } = useRbac()
+
+const tags = ref([])
+const loading = ref(false)
+const saving = ref(false)
+const dialogVisible = ref(false)
+const editingId = ref(null)
+const languages = ref(['zh'])
+const DEFAULT_TAG_COLOR = '#E5484D'
+const emptyForm = () => ({
+  locales: { zh: '' },
+  bgColor: DEFAULT_TAG_COLOR,
+  sort: 1,
+  status: 1
+})
+const form = reactive(emptyForm())
+
+async function load() {
+  loading.value = true
+  try {
+    const res = await listContentTagsApi()
+    tags.value = res.data || []
+  } finally {
+    loading.value = false
+  }
+}
+
+function nextSort() {
+  return tags.value.reduce((max, item) => Math.max(max, item.sort || 0), 0) + 1
+}
+
+function openCreate() {
+  editingId.value = null
+  languages.value = ['zh']
+  Object.assign(form, emptyForm(), { sort: nextSort() })
+  dialogVisible.value = true
+}
+
+function openEdit(row) {
+  editingId.value = row.id
+  const locales = localesFromColumns(row.locales, row.name, row.nameEn, row.nameId)
+  languages.value = languageCodes(locales)
+  Object.assign(form, {
+    locales,
+    bgColor: row.bgColor || DEFAULT_TAG_COLOR,
+    sort: row.sort ?? 0,
+    status: row.status ?? 1
+  })
+  dialogVisible.value = true
+}
+
+async function save() {
+  const locales = payloadLocales(form.locales, languages.value)
+  if (!locales.zh) {
+    ElMessage.warning('请填写中文名称')
+    return
+  }
+  const missing = languages.value.find((code) => !locales[code])
+  if (missing) {
+    ElMessage.warning(`请填写${languageLabel(missing)}名称`)
+    return
+  }
+  saving.value = true
+  try {
+    const payload = {
+      name: locales.zh,
+      locales,
+      bgColor: form.bgColor || DEFAULT_TAG_COLOR,
+      sort: form.sort,
+      status: form.status
+    }
+    if (editingId.value) {
+      await updateContentTagApi(editingId.value, payload)
+      ElMessage.success('标签已更新')
+    } else {
+      await createContentTagApi(payload)
+      ElMessage.success('标签已创建')
+    }
+    dialogVisible.value = false
+    await load()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function confirmDelete(row) {
+  try {
+    await ElMessageBox.confirm(
+      `确定删除标签「${row.name}」吗？已选该标签的短剧会取消选择。`,
+      '删除确认',
+      {
+        confirmButtonText: '确认删除',
+        cancelButtonText: '取消',
+        type: 'warning',
+        confirmButtonClass: 'el-button--danger'
+      }
+    )
+  } catch {
+    return
+  }
+  await deleteContentTagApi(row.id)
+  ElMessage.success('标签已删除')
+  await load()
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="内容管理"
+    title="标签管理"
+    description="维护短剧标签。名称分中文、英文、印尼语，短剧编辑时单选一个。"
+  >
+    <el-button v-if="can('drama:create')" type="primary" class="primary-button" @click="openCreate">
+      <AppIcon :icon="AppIcons.add" />
+      新建标签
+    </el-button>
+  </PageHeading>
+
+  <section class="panel">
+    <el-table
+      v-loading="loading"
+      :data="tags"
+      row-key="id"
+      border
+      class="drama-el-table"
+      empty-text="还没有标签"
+    >
+      <el-table-column type="index" label="序号" width="80" />
+      <el-table-column prop="name" label="中文名称" min-width="160" />
+      <el-table-column label="语言" min-width="220">
+        <template #default="{ row }">
+          <el-tag
+            v-for="code in languageCodes(
+              row.locales || localesFromColumns(null, row.name, row.nameEn, row.nameId)
+            )"
+            :key="code"
+            effect="light"
+            class="locale-tag"
+            >{{ languageLabel(code) }}</el-tag
+          >
+        </template>
+      </el-table-column>
+      <el-table-column label="背景色" width="100">
+        <template #default="{ row }">
+          <span class="tag-color" :style="{ background: row.bgColor || DEFAULT_TAG_COLOR }"></span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sort" label="排序" width="100" />
+      <el-table-column label="状态" width="110">
+        <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="200" fixed="right">
+        <template #default="{ row }">
+          <div class="table-actions">
+            <el-button v-if="can('drama:update')" type="primary" size="small" @click="openEdit(row)"
+              >编辑</el-button
+            >
+            <el-button
+              v-if="can('drama:delete')"
+              type="danger"
+              size="small"
+              @click="confirmDelete(row)"
+              >删除</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </section>
+
+  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑标签' : '新建标签'" width="560px">
+    <el-form label-position="top">
+      <LocaleTextFields
+        v-model:languages="languages"
+        :locales="form.locales"
+        label="名称"
+        :maxlength="64"
+      />
+      <el-form-item label="背景色">
+        <el-color-picker v-model="form.bgColor" color-format="hex" />
+      </el-form-item>
+      <div class="form-row">
+        <el-form-item label="排序">
+          <el-input-number v-model="form.sort" :min="0" :max="999" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+      </div>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" :loading="saving" @click="save">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.locale-tag + .locale-tag {
+  margin-left: 6px;
+}
+
+.tag-color {
+  display: inline-block;
+  width: 28px;
+  height: 16px;
+  border-radius: 4px;
+}
+</style>
@@ -1,8 +1,9 @@
 <!-- Author: fruit.com.cn -->

 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import PageHeading from '@/views/components/PageHeading.vue'
+import DashboardMetricWall from '@/views/dashboard/DashboardMetricWall.vue'
 import echarts from '@/plugins/echarts'
 import {
  getDashboardDistributionApi,
@@ -16,22 +17,7 @@ import type {
  DashboardTrend,
  TranscodeBoard
 } from '@/api/admin/dashboard'
-import { dateCell, formatCount } from '@/utils/format'
-
-/**
- * 指标展示配置：key 与后端 /admin/dashboard/overview 返回的字段一一对应，
- * 不在前端编字段；口径说明见后端 DashboardService 注释与 docs/api-phase1.md「2.8」。
- */
-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' }
-]
+import { dateCell } from '@/utils/format'

 const loading = ref(false)
 const overview = ref<DashboardOverview | null>(null)
@@ -62,40 +48,6 @@ const transcodeStatusLabel = {
  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, 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 renderCharts() {
  disposeAll()
  renderTrend()
@@ -280,26 +232,13 @@ onBeforeUnmount(() => {
  <PageHeading
    eyebrow="数据看板"
    title="运营大盘"
-    description="用户、内容、播放与成本总览，以及近 7 天趋势。"
+    description="用户、设备、留存、内容、播放与成本总览，以及近 7 天趋势。"
  >
    <el-button :loading="loading" @click="loadAndRender">刷新</el-button>
  </PageHeading>

  <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>
+    <DashboardMetricWall :overview="overview" :trend="trend" />

    <!-- 趋势折线图（双 Y 轴 + 柱） -->
    <section class="panel chart-panel">
@@ -403,10 +342,10 @@ onBeforeUnmount(() => {
 }

 .panel {
-  background: var(--el-bg-color);
-  border-radius: 8px;
  padding: 20px 24px;
+  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
 }

 .panel-heading {
@@ -434,41 +373,8 @@ onBeforeUnmount(() => {
  }

  .muted {
+    font-size: 12px;
    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;
-    }
  }
 }

@@ -514,8 +420,8 @@ onBeforeUnmount(() => {

 .board-notes {
  :deep(ul) {
-    margin: 4px 0 0;
    padding-left: 18px;
+    margin: 4px 0 0;
    font-size: 12px;
  }
 }
@@ -0,0 +1,445 @@
+<!-- Author: fruit.com.cn -->
+<!-- 工作台可视化大屏：用户、设备、留存与内容趋势。 -->
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import echarts from '@/plugins/echarts'
+import type { DashboardOverview, DashboardTrend } from '@/api/admin/dashboard'
+import { formatCount } from '@/utils/format'
+
+const props = defineProps<{
+  overview: DashboardOverview | null
+  trend?: DashboardTrend | null
+  fallback?: Record<string, number>
+}>()
+
+const trendRef = ref<HTMLElement>()
+const deviceRef = ref<HTMLElement>()
+const clock = ref('')
+let trendChart: echarts.ECharts | null = null
+let deviceChart: echarts.ECharts | null = null
+let timer = 0
+
+const AXIS = '#909399'
+const SPLIT = '#e6e8eb'
+const BRAND = '#c4322a'
+const AMBER = '#e9aa4b'
+
+const kpis = computed(() => [
+  { label: '总用户数', value: text('user', 'total'), accent: BRAND },
+  { label: '今日新增', value: text('user', 'newToday'), accent: '#55b987' },
+  { label: '近 7 天新增', value: text('user', 'new7d'), accent: AMBER },
+  { label: '近 7 天活跃', value: text('user', 'active7d'), accent: '#d3615b' },
+  { label: '累计播放', value: text('playback', 'viewTotal'), accent: BRAND },
+  { label: '已上线短剧', value: text('content', 'dramaPublished'), accent: '#55b987' }
+])
+
+const rails = computed(() => [
+  { label: '短剧总数', value: text('content', 'dramaTotal') },
+  { label: '待审核', value: text('content', 'dramaReviewing') },
+  { label: '有片源', value: text('content', 'episodeWithMedia') },
+  { label: '近 7 天播放', value: text('playback', 'playEvents7d') },
+  { label: '完播率', value: rate('playback', 'finishRate') },
+  { label: '金币消耗', value: text('revenue', 'coinConsumed') },
+  { label: '转码中', value: text('cost', 'transcodeRunning') },
+  { label: '转码排队', value: text('cost', 'transcodeQueued') }
+])
+
+const retentionDay = computed(() => percent('user', 'retention1d'))
+const retentionWeek = computed(() => percent('user', 'retention7d'))
+
+function metric(group: string, key: string) {
+  const source = props.overview?.[group as keyof DashboardOverview]
+  if (source && typeof source === 'object') {
+    const value = (source as Record<string, number | null>)[key]
+    if (value !== undefined && value !== null) return Number(value)
+  }
+  const fallback = props.fallback?.[`${group}.${key}`]
+  return fallback == null ? null : Number(fallback)
+}
+
+function text(group: string, key: string) {
+  const value = metric(group, key)
+  return value == null || Number.isNaN(value) ? '--' : formatCount(value)
+}
+
+function percent(group: string, key: string) {
+  const value = metric(group, key)
+  if (value == null || Number.isNaN(value)) return null
+  return Math.max(0, Math.min(100, Math.round(value * 1000) / 10))
+}
+
+function rate(group: string, key: string) {
+  const value = percent(group, key)
+  return value == null ? '--' : `${value.toFixed(1)}%`
+}
+
+function tick() {
+  clock.value = new Date().toLocaleString('zh-CN', { hour12: false })
+}
+
+function renderCharts() {
+  renderTrend()
+  renderDevices()
+}
+
+function renderTrend() {
+  if (!trendRef.value) return
+  trendChart = trendChart ?? echarts.init(trendRef.value)
+  const trend = props.trend
+  trendChart.setOption({
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: '#fff',
+      borderColor: '#e6e8eb',
+      textStyle: { color: '#303640' }
+    },
+    legend: { top: 0, left: 0, textStyle: { color: AXIS }, itemWidth: 12, itemHeight: 8 },
+    grid: { left: 42, right: 16, top: 32, bottom: 24 },
+    xAxis: {
+      type: 'category',
+      data: trend?.dates ?? [],
+      axisLine: { lineStyle: { color: 'rgba(255,255,255,.16)' } },
+      axisLabel: { color: AXIS, fontSize: 11 }
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { color: SPLIT, type: 'dashed' } },
+      axisLabel: { color: AXIS, fontSize: 11 }
+    },
+    series: [
+      {
+        name: '新增用户',
+        type: 'line',
+        smooth: true,
+        showSymbol: false,
+        data: trend?.newUsers ?? [],
+        lineStyle: { width: 2, color: BRAND },
+        areaStyle: { color: 'rgba(196, 50, 42, 0.12)' }
+      },
+      {
+        name: '播放事件',
+        type: 'line',
+        smooth: true,
+        showSymbol: false,
+        data: trend?.playEvents ?? [],
+        lineStyle: { width: 2, color: AMBER }
+      }
+    ]
+  })
+}
+
+function renderDevices() {
+  if (!deviceRef.value) return
+  deviceChart = deviceChart ?? echarts.init(deviceRef.value)
+  const android = metric('user', 'androidActive7d') ?? 0
+  const ios = metric('user', 'iosActive7d') ?? 0
+  deviceChart.setOption({
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: '#fff',
+      borderColor: '#e6e8eb',
+      textStyle: { color: '#303640' }
+    },
+    legend: { bottom: 0, textStyle: { color: AXIS }, itemWidth: 10, itemHeight: 10 },
+    title: {
+      text: formatCount(android + ios),
+      subtext: '活跃设备',
+      left: 'center',
+      top: '38%',
+      textStyle: { color: '#303640', fontSize: 22, fontWeight: 700 },
+      subtextStyle: { color: AXIS, fontSize: 12 }
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['58%', '76%'],
+        center: ['50%', '46%'],
+        label: { show: false },
+        data: [
+          { name: 'Android', value: android, itemStyle: { color: '#55b987' } },
+          { name: 'iOS', value: ios, itemStyle: { color: BRAND } }
+        ]
+      }
+    ]
+  })
+}
+
+function onResize() {
+  trendChart?.resize()
+  deviceChart?.resize()
+}
+
+watch(
+  () => [props.overview, props.trend],
+  () => nextTick(renderCharts),
+  { deep: true }
+)
+
+onMounted(() => {
+  tick()
+  timer = window.setInterval(tick, 1000)
+  window.addEventListener('resize', onResize)
+  nextTick(renderCharts)
+})
+
+onBeforeUnmount(() => {
+  window.clearInterval(timer)
+  window.removeEventListener('resize', onResize)
+  trendChart?.dispose()
+  deviceChart?.dispose()
+})
+</script>
+
+<template>
+  <section class="screen">
+    <header class="screen-head">
+      <h2>运营概览</h2>
+      <time>{{ clock }}</time>
+    </header>
+
+    <div class="kpi-row">
+      <article v-for="item in kpis" :key="item.label" class="kpi">
+        <i :style="{ background: item.accent }"></i>
+        <div>
+          <strong>{{ item.value }}</strong>
+          <span>{{ item.label }}</span>
+        </div>
+      </article>
+    </div>
+
+    <div class="viz-row">
+      <article class="panel trend-panel">
+        <h3>近 7 日新增与播放</h3>
+        <div ref="trendRef" class="chart"></div>
+      </article>
+      <article class="panel">
+        <h3>活跃设备占比</h3>
+        <div ref="deviceRef" class="chart"></div>
+      </article>
+      <article class="panel retain">
+        <h3>用户留存</h3>
+        <div class="rings">
+          <div class="ring" :style="{ '--p': `${retentionDay ?? 0}%` }">
+            <strong>{{ retentionDay == null ? '--' : `${retentionDay.toFixed(1)}%` }}</strong>
+            <span>次日留存</span>
+          </div>
+          <div class="ring week" :style="{ '--p': `${retentionWeek ?? 0}%` }">
+            <strong>{{ retentionWeek == null ? '--' : `${retentionWeek.toFixed(1)}%` }}</strong>
+            <span>7 日留存</span>
+          </div>
+        </div>
+      </article>
+    </div>
+
+    <div class="rail">
+      <div v-for="item in rails" :key="item.label">
+        <strong>{{ item.value }}</strong>
+        <span>{{ item.label }}</span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="less">
+.screen {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  min-height: 0;
+  color: #303640;
+}
+
+.screen-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  h2 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #2f343c;
+  }
+}
+
+time {
+  font-size: 12px;
+  color: #909399;
+  font-variant-numeric: tabular-nums;
+}
+
+.kpi-row,
+.viz-row,
+.rail {
+  min-width: 0;
+}
+
+.kpi-row {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.kpi {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-width: 0;
+  min-height: 72px;
+  padding: 12px 14px;
+  background: #fff;
+  border: 1px solid #e6e8eb;
+  border-radius: 6px;
+
+  i {
+    width: 3px;
+    height: 32px;
+    border-radius: 3px;
+    flex: none;
+  }
+
+  strong {
+    display: block;
+    overflow: hidden;
+    font-size: 22px;
+    line-height: 1.1;
+    color: #303640;
+    font-variant-numeric: tabular-nums;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  span {
+    display: block;
+    margin-top: 4px;
+    font-size: 12px;
+    color: #909399;
+  }
+}
+
+.viz-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.7fr);
+  gap: 12px;
+  flex: 1;
+  min-height: 220px;
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  padding: 12px 14px 8px;
+  background: #fff;
+  border: 1px solid #e6e8eb;
+  border-radius: 6px;
+
+  h3 {
+    margin: 0;
+    font-size: 13px;
+    font-weight: 600;
+    color: #2f343c;
+  }
+}
+
+.chart {
+  width: 100%;
+  height: 240px;
+}
+
+.rings {
+  display: flex;
+  flex: 1;
+  justify-content: space-around;
+  align-items: center;
+  min-height: 180px;
+}
+
+.ring {
+  --p: 0%;
+
+  display: grid;
+  width: 112px;
+  height: 112px;
+  background: conic-gradient(#c4322a var(--p), #f5d9d8 0);
+  border-radius: 50%;
+  place-items: center;
+
+  &::after {
+    width: 82px;
+    height: 82px;
+    background: #fff;
+    border-radius: 50%;
+    content: '';
+    grid-area: 1 / 1;
+  }
+
+  strong,
+  span {
+    grid-area: 1 / 1;
+    z-index: 1;
+  }
+
+  strong {
+    margin-top: -12px;
+    font-size: 16px;
+    color: #303640;
+  }
+
+  span {
+    margin-top: 24px;
+    font-size: 12px;
+    color: #909399;
+  }
+}
+
+.week {
+  background: conic-gradient(#e9aa4b var(--p), #fff5e7 0);
+}
+
+.rail {
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 12px;
+
+  div {
+    min-width: 0;
+    padding: 10px 8px;
+    text-align: center;
+    background: #fff;
+    border: 1px solid #e6e8eb;
+    border-radius: 6px;
+  }
+
+  strong {
+    display: block;
+    overflow: hidden;
+    font-size: 16px;
+    color: #303640;
+    font-variant-numeric: tabular-nums;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  span {
+    font-size: 12px;
+    color: #909399;
+  }
+}
+
+@media (width <= 760px) {
+  .kpi-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .viz-row,
+  .rail {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+</style>
@@ -3,13 +3,12 @@
 <script setup lang="ts">
 import type { FormInstance, FormRules } from 'element-plus'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { computed, h, ref } from 'vue'
+import { computed, 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,
@@ -112,7 +111,7 @@ function openEdit(row: AppVersionItem) {
    versionName: row.versionName,
    downloadUrl: row.downloadUrl,
    updateContent: row.updateContent ?? '',
-    forceUpdate: row.forceUpdate,
+    forceUpdate: row.forceUpdate === 1 ? 1 : 0,
    minSupportedCode: row.minSupportedCode
  }
  dialogOpen.value = true
@@ -195,7 +194,7 @@ const forceText = computed(() => (v: number) => (v === 1 ? '强制' : '可选升
      </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-button plain @click="openCreate" :icon="AppIcons.add">新建版本</el-button>
      </el-form-item>
    </el-form>
  </section>
@@ -480,35 +479,41 @@ const forceText = computed(() => (v: number) => (v === 1 ? '强制' : '可选升
 .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);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+
  header {
    display: flex;
+    padding-bottom: 8px;
+    margin-bottom: 6px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
    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;
+    font-weight: 600;
  }
+
  &.disabled {
-    opacity: 0.5;
    border-style: dashed;
+    opacity: 0.5;
  }
 }
 </style>