From db313f4aa65d5dca664a58be72ffd677f95bb259 Mon Sep 17 00:00:00 2001
From: Vicky <10212746+haifeng-jiang@user.noreply.gitee.com>
Date: Fri, 16 Oct 2026 16:33:22 +0800
Subject: [PATCH 01/59] =?UTF-8?q?feat(admin):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E9=85=8D=E7=BD=AE=E4=B8=8E=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E5=85=AC=E5=91=8A=E4=B8=A4=E4=B8=AA=E5=90=8E=E5=8F=B0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- src/api/admin/product.ts、src/api/admin/notice.ts 对齐后端新接口
- ProductManagementView：列表/筛选/新建编辑/上下架/删除，新建默认下架有提示
- NoticeManagementView：列表/筛选/新建编辑/发布下架/删除
- 状态列一律用接口返回的 statusText，不在前端写死中文
- id 按字符串处理（雪花 id 超过 JS 安全整数范围，数字会被四舍五入）
---
 src/api/admin/notice.ts                      |  66 +++
 src/api/admin/product.ts                     |  85 ++++
 src/views/commerce/ProductManagementView.vue | 463 +++++++++++++++++++
 src/views/operation/NoticeManagementView.vue | 354 ++++++++++++++
 4 files changed, 968 insertions(+)
 create mode 100644 src/api/admin/notice.ts
 create mode 100644 src/api/admin/product.ts
 create mode 100644 src/views/commerce/ProductManagementView.vue
 create mode 100644 src/views/operation/NoticeManagementView.vue

diff --git a/src/api/admin/notice.ts b/src/api/admin/notice.ts
new file mode 100644
index 0000000..d95d23d
--- /dev/null
+++ b/src/api/admin/notice.ts
@@ -0,0 +1,66 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type { PageResult } from './types'
+
+/** 系统公告：字段与 /admin/notices 的响应一一对应 */
+export interface NoticeItem {
+  /** 雪花 id，后端以字符串下发（超过 JS 安全整数范围），原样回传即可 */
+  id: string
+  title: string
+  content: string
+  /** ALL / USER / CREATOR */
+  target: string
+  targetText: string
+  /** SYSTEM / AUDIT / PAYMENT / ACTIVITY */
+  type: string
+  typeText: string
+  /** 1 已发布 / 0 已下架 */
+  status: number
+  statusText: string
+  publishAt?: string
+  expireAt?: string
+  createdAt?: string
+}
+
+export interface NoticePageParams {
+  pageIndex?: number
+  pageSize?: number
+  status?: number
+  target?: string
+  type?: string
+  keyword?: string
+}
+
+export interface NoticeSaveData {
+  title: string
+  content: string
+  target: string
+  type: string
+  publishAt?: string | null
+  expireAt?: string | null
+}
+
+export const pageNoticesApi = (params: NoticePageParams) => {
+  return request.get<PageResult<NoticeItem>>({ url: '/admin/notices/page', params })
+}
+
+export const getNoticeApi = (id: string | number) => {
+  return request.get<NoticeItem>({ url: `/admin/notices/${id}` })
+}
+
+export const createNoticeApi = (data: NoticeSaveData) => {
+  return request.post<string>({ url: '/admin/notices', data })
+}
+
+export const updateNoticeApi = (id: string | number, data: NoticeSaveData) => {
+  return request.put<void>({ url: `/admin/notices/${id}`, data })
+}
+
+export const updateNoticeStatusApi = (id: string | number, status: number) => {
+  return request.put<void>({ url: `/admin/notices/${id}/status`, params: { status } })
+}
+
+export const deleteNoticeApi = (id: string | number) => {
+  return request.delete<void>({ url: `/admin/notices/${id}` })
+}
diff --git a/src/api/admin/product.ts b/src/api/admin/product.ts
new file mode 100644
index 0000000..391bcea
--- /dev/null
+++ b/src/api/admin/product.ts
@@ -0,0 +1,85 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type { PageResult } from './types'
+
+/** 商品（金币包）：字段与 /admin/products 的响应一一对应 */
+export interface ProductItem {
+  /** 雪花 id，后端以字符串下发（超过 JS 安全整数范围），原样回传即可 */
+  id: string
+  code: string
+  name: string
+  /** COIN_PACK / VIP */
+  type: string
+  typeText: string
+  /** ALL / GOOGLE / APPLE */
+  platform: string
+  storeProductId: string
+  coinAmount: number
+  bonusCoin: number
+  /** coinAmount + bonusCoin，服务端算好，前端不再自己加 */
+  totalCoin: number
+  priceAmount: number
+  currency: string
+  displayPrice: string
+  regionCodes: string
+  vipDays: number
+  sort: number
+  /** 1 已上架 / 0 已下架 */
+  status: number
+  statusText: string
+  effectiveAt?: string
+  expireAt?: string
+  createdAt?: string
+}
+
+export interface ProductPageParams {
+  pageIndex?: number
+  pageSize?: number
+  type?: string
+  status?: number
+  platform?: string
+  keyword?: string
+}
+
+export interface ProductSaveData {
+  code: string
+  name: string
+  type: string
+  platform: string
+  storeProductId: string
+  coinAmount: number
+  bonusCoin: number
+  priceAmount: number
+  currency: string
+  displayPrice: string
+  regionCodes: string
+  vipDays: number
+  sort: number
+  effectiveAt?: string | null
+  expireAt?: string | null
+}
+
+export const pageProductsApi = (params: ProductPageParams) => {
+  return request.get<PageResult<ProductItem>>({ url: '/admin/products/page', params })
+}
+
+export const getProductApi = (id: string | number) => {
+  return request.get<ProductItem>({ url: `/admin/products/${id}` })
+}
+
+export const createProductApi = (data: ProductSaveData) => {
+  return request.post<string>({ url: '/admin/products', data })
+}
+
+export const updateProductApi = (id: string | number, data: ProductSaveData) => {
+  return request.put<void>({ url: `/admin/products/${id}`, data })
+}
+
+export const updateProductStatusApi = (id: string | number, status: number) => {
+  return request.put<void>({ url: `/admin/products/${id}/status`, params: { status } })
+}
+
+export const deleteProductApi = (id: string | number) => {
+  return request.delete<void>({ url: `/admin/products/${id}` })
+}
diff --git a/src/views/commerce/ProductManagementView.vue b/src/views/commerce/ProductManagementView.vue
new file mode 100644
index 0000000..26ba5e6
--- /dev/null
+++ b/src/views/commerce/ProductManagementView.vue
@@ -0,0 +1,463 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import {
+  createProductApi,
+  deleteProductApi,
+  pageProductsApi,
+  updateProductApi,
+  updateProductStatusApi
+} from '@/api/admin/product'
+import { useRbac } from '@/stores/rbac'
+import { dateCell, formatCount } from '@/utils/format'
+import PageHeading from '@/views/components/PageHeading.vue'
+
+const { can } = useRbac()
+
+const loading = ref(false)
+const list = ref([])
+const total = ref(0)
+const pageIndex = ref(1)
+const pageSize = ref(10)
+const typeFilter = ref(undefined)
+const statusFilter = ref(undefined)
+const platformFilter = ref(undefined)
+const keyword = ref('')
+
+const dialogVisible = ref(false)
+const saving = ref(false)
+const editingId = ref(null)
+const form = reactive({
+  code: '',
+  name: '',
+  type: 'COIN_PACK',
+  platform: 'ALL',
+  storeProductId: '',
+  coinAmount: 0,
+  bonusCoin: 0,
+  priceAmount: 0,
+  currency: 'IDR',
+  displayPrice: '',
+  regionCodes: 'ID',
+  vipDays: 0,
+  sort: 0,
+  effectiveAt: null,
+  expireAt: null
+})
+
+const typeOptions = [
+  { value: 'COIN_PACK', label: '金币包' },
+  { value: 'VIP', label: '会员（第二阶段）' }
+]
+
+const platformOptions = [
+  { value: 'ALL', label: '全平台通用' },
+  { value: 'GOOGLE', label: 'Google Play' },
+  { value: 'APPLE', label: 'App Store' }
+]
+
+const currencyOptions = ['IDR', 'USD']
+
+function platformLabel(value) {
+  return platformOptions.find((item) => item.value === value)?.label || value || '-'
+}
+
+function priceText(row) {
+  if (row.displayPrice) return row.displayPrice
+  if (row.priceAmount === null || row.priceAmount === undefined) return '-'
+  return `${row.priceAmount} ${row.currency || ''}`.trim()
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const res = await pageProductsApi({
+      pageIndex: pageIndex.value,
+      pageSize: pageSize.value,
+      type: typeFilter.value,
+      status: statusFilter.value,
+      platform: platformFilter.value,
+      keyword: keyword.value.trim() || undefined
+    })
+    list.value = res?.data?.list || []
+    total.value = res?.data?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() {
+  pageIndex.value = 1
+  load()
+}
+
+function resetFilters() {
+  typeFilter.value = undefined
+  statusFilter.value = undefined
+  platformFilter.value = undefined
+  keyword.value = ''
+  search()
+}
+
+function handleSizeChange() {
+  pageIndex.value = 1
+  load()
+}
+
+function nextSort() {
+  return list.value.reduce((max, item) => Math.max(max, item.sort || 0), 0) + 1
+}
+
+function openCreate() {
+  editingId.value = null
+  Object.assign(form, {
+    code: '',
+    name: '',
+    type: 'COIN_PACK',
+    platform: 'ALL',
+    storeProductId: '',
+    coinAmount: 0,
+    bonusCoin: 0,
+    priceAmount: 0,
+    currency: 'IDR',
+    displayPrice: '',
+    regionCodes: 'ID',
+    vipDays: 0,
+    sort: nextSort(),
+    effectiveAt: null,
+    expireAt: null
+  })
+  dialogVisible.value = true
+}
+
+function openEdit(row) {
+  editingId.value = row.id
+  Object.assign(form, {
+    code: row.code,
+    name: row.name,
+    type: row.type,
+    platform: row.platform,
+    storeProductId: row.storeProductId || '',
+    coinAmount: row.coinAmount ?? 0,
+    bonusCoin: row.bonusCoin ?? 0,
+    priceAmount: row.priceAmount ?? 0,
+    currency: row.currency || 'IDR',
+    displayPrice: row.displayPrice || '',
+    regionCodes: row.regionCodes || '',
+    vipDays: row.vipDays ?? 0,
+    sort: row.sort ?? 0,
+    effectiveAt: row.effectiveAt || null,
+    expireAt: row.expireAt || null
+  })
+  dialogVisible.value = true
+}
+
+function validateForm() {
+  if (!form.code.trim()) return '请填写商品编码'
+  if (!form.name.trim()) return '请填写商品名称'
+  if (form.storeProductId.trim() && !['GOOGLE', 'APPLE'].includes(form.platform)) {
+    return '填写了商店商品 id 时，平台要选 Google Play 或 App Store，否则客户端认不出来'
+  }
+  if (form.type === 'VIP') {
+    if (!form.vipDays || form.vipDays <= 0) return '会员商品的会员天数必须大于 0'
+  } else if (!form.coinAmount || form.coinAmount <= 0) {
+    return '金币包的金币数量必须大于 0'
+  }
+  return ''
+}
+
+async function saveProduct() {
+  const invalid = validateForm()
+  if (invalid) return ElMessage.warning(invalid)
+
+  const payload = {
+    code: form.code.trim(),
+    name: form.name.trim(),
+    type: form.type,
+    platform: form.platform,
+    storeProductId: form.storeProductId.trim(),
+    coinAmount: form.coinAmount || 0,
+    bonusCoin: form.bonusCoin || 0,
+    priceAmount: form.priceAmount || 0,
+    currency: form.currency,
+    displayPrice: form.displayPrice.trim(),
+    regionCodes: form.regionCodes.trim(),
+    vipDays: form.vipDays || 0,
+    sort: form.sort || 0,
+    effectiveAt: form.effectiveAt || null,
+    expireAt: form.expireAt || null
+  }
+  saving.value = true
+  try {
+    if (editingId.value) {
+      await updateProductApi(editingId.value, payload)
+      ElMessage.success('商品已更新')
+    } else {
+      await createProductApi(payload)
+      ElMessage.success('商品已创建（默认下架，请确认后再上架）')
+      pageIndex.value = 1
+    }
+    dialogVisible.value = false
+    await load()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function toggleStatus(row) {
+  const next = row.status === 1 ? 0 : 1
+  await updateProductStatusApi(row.id, next)
+  await load()
+}
+
+async function confirmDelete(row) {
+  try {
+    await ElMessageBox.confirm(`确定删除商品「${row.name}」吗？`, '删除确认', {
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+      confirmButtonClass: 'el-button--danger'
+    })
+  } catch {
+    return
+  }
+  await deleteProductApi(row.id)
+  ElMessage.success('商品已删除')
+  if (list.value.length === 1 && pageIndex.value > 1) pageIndex.value -= 1
+  await load()
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="订单与权益"
+    title="商品配置"
+    description="维护金币包与商店商品 id，客户端按商店商品 id 对齐发币口径。"
+  >
+    <el-button
+      v-if="can('product:update')"
+      type="primary"
+      class="primary-button"
+      @click="openCreate"
+    >
+      <el-icon><Plus /></el-icon>
+      新建商品
+    </el-button>
+  </PageHeading>
+
+  <section class="panel library-panel">
+    <div class="library-toolbar">
+      <div class="drama-filters">
+        <el-input
+          v-model="keyword"
+          clearable
+          placeholder="商品编码 / 名称"
+          @keyup.enter="search"
+          @clear="search"
+        />
+        <el-select v-model="typeFilter" clearable placeholder="全部类型" @change="search">
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select v-model="platformFilter" clearable placeholder="全部平台" @change="search">
+          <el-option
+            v-for="item in platformOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select v-model="statusFilter" clearable placeholder="全部状态" @change="search">
+          <el-option label="已上架" :value="1" />
+          <el-option label="已下架" :value="0" />
+        </el-select>
+        <el-button @click="search">查询</el-button>
+        <el-button @click="resetFilters">重置</el-button>
+      </div>
+      <span class="table-result-count">共 {{ total }} 个商品</span>
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="list"
+      row-key="id"
+      empty-text="还没有配置商品"
+      class="drama-el-table"
+    >
+      <el-table-column prop="code" label="商品编码" min-width="150" />
+      <el-table-column prop="name" label="名称" min-width="160" />
+      <el-table-column prop="typeText" label="类型" width="140" />
+      <el-table-column label="平台" width="130">
+        <template #default="{ row }">{{ platformLabel(row.platform) }}</template>
+      </el-table-column>
+      <el-table-column label="商店商品 id" min-width="170">
+        <template #default="{ row }">
+          <span v-if="row.storeProductId">{{ row.storeProductId }}</span>
+          <span v-else class="table-empty-text">未配置</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="到账金币" width="110">
+        <template #default="{ row }">
+          <span v-if="row.type === 'COIN_PACK'">{{ formatCount(row.totalCoin) }}</span>
+          <span v-else class="table-empty-text">-</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="价格" width="140">
+        <template #default="{ row }">{{ priceText(row) }}</template>
+      </el-table-column>
+      <el-table-column prop="sort" label="排序" width="80" />
+      <el-table-column label="状态" width="100">
+        <template #default="{ row }">
+          <el-button
+            v-if="can('product:update')"
+            link
+            :type="row.status === 1 ? 'primary' : 'info'"
+            @click="toggleStatus(row)"
+            >{{ row.statusText }}</el-button
+          >
+          <el-tag v-else :type="row.status === 1 ? 'success' : 'info'" effect="light">{{
+            row.statusText
+          }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createdAt" label="创建时间" width="170" :formatter="dateCell" />
+      <el-table-column label="操作" width="150" fixed="right">
+        <template #default="{ row }">
+          <div class="table-actions">
+            <el-button
+              v-if="can('product:update')"
+              type="primary"
+              size="small"
+              @click="openEdit(row)"
+              >编辑</el-button
+            >
+            <el-button
+              v-if="can('product:update')"
+              type="danger"
+              size="small"
+              @click="confirmDelete(row)"
+              >删除</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="pageIndex"
+        v-model:page-size="pageSize"
+        :page-sizes="[5, 10, 20, 50]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="load"
+        @size-change="handleSizeChange"
+      />
+    </div>
+  </section>
+
+  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑商品' : '新建商品'" width="720px">
+    <el-form label-position="top">
+      <div class="form-row">
+        <el-form-item label="商品编码" required>
+          <el-input v-model="form.code" placeholder="全局唯一，例如 coin_500_id" />
+        </el-form-item>
+        <el-form-item label="商品名称" required>
+          <el-input v-model="form.name" placeholder="展示给用户的名字" />
+        </el-form-item>
+      </div>
+      <div class="form-row">
+        <el-form-item label="类型">
+          <el-select v-model="form.type">
+            <el-option
+              v-for="item in typeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="平台">
+          <el-select v-model="form.platform">
+            <el-option
+              v-for="item in platformOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商店商品 id">
+          <el-input v-model="form.storeProductId" placeholder="Google Play / App Store 的商品 id" />
+        </el-form-item>
+      </div>
+      <div class="form-row">
+        <el-form-item v-if="form.type === 'COIN_PACK'" label="金币数量" required>
+          <el-input-number v-model="form.coinAmount" :min="0" :max="1000000" />
+        </el-form-item>
+        <el-form-item v-if="form.type === 'COIN_PACK'" label="赠送金币">
+          <el-input-number v-model="form.bonusCoin" :min="0" :max="1000000" />
+        </el-form-item>
+        <el-form-item v-if="form.type === 'VIP'" label="会员天数" required>
+          <el-input-number v-model="form.vipDays" :min="0" :max="3650" />
+        </el-form-item>
+      </div>
+      <div class="form-row">
+        <el-form-item label="价格">
+          <el-input-number v-model="form.priceAmount" :min="0" :precision="2" />
+        </el-form-item>
+        <el-form-item label="币种">
+          <el-select v-model="form.currency">
+            <el-option v-for="item in currencyOptions" :key="item" :label="item" :value="item" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="展示价">
+          <el-input v-model="form.displayPrice" placeholder="例如 Rp 9.900" />
+        </el-form-item>
+      </div>
+      <div class="form-row">
+        <el-form-item label="生效区域">
+          <el-input v-model="form.regionCodes" placeholder="多个区域用逗号分隔，例如 ID,MY" />
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number v-model="form.sort" :min="0" :max="9999" />
+        </el-form-item>
+      </div>
+      <div class="form-row">
+        <el-form-item label="生效时间">
+          <el-date-picker
+            v-model="form.effectiveAt"
+            type="datetime"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+            placeholder="留空表示立即生效"
+          />
+        </el-form-item>
+        <el-form-item label="失效时间">
+          <el-date-picker
+            v-model="form.expireAt"
+            type="datetime"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+            placeholder="留空表示长期有效"
+          />
+        </el-form-item>
+      </div>
+      <p class="console-hint">
+        新建商品默认下架，确认无误后再上架；会员商品可以建档，但订阅功能上线前不能上架。
+      </p>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" :loading="saving" @click="saveProduct">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/operation/NoticeManagementView.vue b/src/views/operation/NoticeManagementView.vue
new file mode 100644
index 0000000..6b775a1
--- /dev/null
+++ b/src/views/operation/NoticeManagementView.vue
@@ -0,0 +1,354 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import {
+  createNoticeApi,
+  deleteNoticeApi,
+  pageNoticesApi,
+  updateNoticeApi,
+  updateNoticeStatusApi
+} from '@/api/admin/notice'
+import { useRbac } from '@/stores/rbac'
+import { dateCell } from '@/utils/format'
+import PageHeading from '@/views/components/PageHeading.vue'
+
+const { can } = useRbac()
+
+const loading = ref(false)
+const list = ref([])
+const total = ref(0)
+const pageIndex = ref(1)
+const pageSize = ref(10)
+const statusFilter = ref(undefined)
+const targetFilter = ref(undefined)
+const typeFilter = ref(undefined)
+const keyword = ref('')
+
+const dialogVisible = ref(false)
+const saving = ref(false)
+const editingId = ref(null)
+const form = reactive({
+  title: '',
+  content: '',
+  target: 'ALL',
+  type: 'SYSTEM',
+  publishAt: null,
+  expireAt: null
+})
+
+/** 取值与后端 ops_notice 的枚举一致；显示文案由接口的 targetText / typeText 给 */
+const targetOptions = [
+  { value: 'ALL', label: '全部用户' },
+  { value: 'USER', label: '普通用户' },
+  { value: 'CREATOR', label: '创作者（C 端公告位不展示）' }
+]
+
+const typeOptions = [
+  { value: 'SYSTEM', label: '系统' },
+  { value: 'AUDIT', label: '审核' },
+  { value: 'PAYMENT', label: '支付' },
+  { value: 'ACTIVITY', label: '活动' }
+]
+
+async function load() {
+  loading.value = true
+  try {
+    const res = await pageNoticesApi({
+      pageIndex: pageIndex.value,
+      pageSize: pageSize.value,
+      status: statusFilter.value,
+      target: targetFilter.value,
+      type: typeFilter.value,
+      keyword: keyword.value.trim() || undefined
+    })
+    list.value = res?.data?.list || []
+    total.value = res?.data?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() {
+  pageIndex.value = 1
+  load()
+}
+
+function resetFilters() {
+  statusFilter.value = undefined
+  targetFilter.value = undefined
+  typeFilter.value = undefined
+  keyword.value = ''
+  search()
+}
+
+function handleSizeChange() {
+  pageIndex.value = 1
+  load()
+}
+
+function openCreate() {
+  editingId.value = null
+  Object.assign(form, {
+    title: '',
+    content: '',
+    target: 'ALL',
+    type: 'SYSTEM',
+    publishAt: null,
+    expireAt: null
+  })
+  dialogVisible.value = true
+}
+
+function openEdit(row) {
+  editingId.value = row.id
+  Object.assign(form, {
+    title: row.title,
+    content: row.content || '',
+    target: row.target,
+    type: row.type,
+    publishAt: row.publishAt || null,
+    expireAt: row.expireAt || null
+  })
+  dialogVisible.value = true
+}
+
+async function saveNotice() {
+  if (!form.title.trim()) return ElMessage.warning('请填写公告标题')
+  if (form.publishAt && form.expireAt && form.expireAt <= form.publishAt) {
+    return ElMessage.warning('失效时间必须晚于发布时间')
+  }
+  const payload = {
+    title: form.title.trim(),
+    content: form.content,
+    target: form.target,
+    type: form.type,
+    publishAt: form.publishAt || null,
+    expireAt: form.expireAt || null
+  }
+  saving.value = true
+  try {
+    if (editingId.value) {
+      await updateNoticeApi(editingId.value, payload)
+      ElMessage.success('公告已更新')
+    } else {
+      await createNoticeApi(payload)
+      ElMessage.success('公告已发布')
+      pageIndex.value = 1
+    }
+    dialogVisible.value = false
+    await load()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function toggleStatus(row) {
+  const next = row.status === 1 ? 0 : 1
+  await updateNoticeStatusApi(row.id, next)
+  ElMessage.success(next === 1 ? '公告已发布' : '公告已下架')
+  await load()
+}
+
+async function confirmDelete(row) {
+  try {
+    await ElMessageBox.confirm(`确定删除公告「${row.title}」吗？`, '删除确认', {
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+      confirmButtonClass: 'el-button--danger'
+    })
+  } catch {
+    return
+  }
+  await deleteNoticeApi(row.id)
+  ElMessage.success('公告已删除')
+  if (list.value.length === 1 && pageIndex.value > 1) pageIndex.value -= 1
+  await load()
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="运营管理"
+    title="系统公告"
+    description="发布后客户端公告位立即可见；下架或到期后立即消失。"
+  >
+    <el-button
+      v-if="can('notice:update')"
+      type="primary"
+      class="primary-button"
+      @click="openCreate"
+    >
+      <el-icon><Plus /></el-icon>
+      新建公告
+    </el-button>
+  </PageHeading>
+
+  <section class="panel library-panel">
+    <div class="library-toolbar">
+      <div class="drama-filters">
+        <el-input
+          v-model="keyword"
+          clearable
+          placeholder="公告标题"
+          @keyup.enter="search"
+          @clear="search"
+        />
+        <el-select v-model="targetFilter" clearable placeholder="全部目标" @change="search">
+          <el-option
+            v-for="item in targetOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select v-model="typeFilter" clearable placeholder="全部类型" @change="search">
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select v-model="statusFilter" clearable placeholder="全部状态" @change="search">
+          <el-option label="已发布" :value="1" />
+          <el-option label="已下架" :value="0" />
+        </el-select>
+        <el-button @click="search">查询</el-button>
+        <el-button @click="resetFilters">重置</el-button>
+      </div>
+      <span class="table-result-count">共 {{ total }} 条公告</span>
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="list"
+      row-key="id"
+      empty-text="还没有发布公告"
+      class="drama-el-table"
+    >
+      <el-table-column prop="title" label="标题" min-width="220" />
+      <el-table-column prop="typeText" label="类型" width="100" />
+      <el-table-column prop="targetText" label="目标" width="120" />
+      <el-table-column prop="content" label="内容" min-width="240" show-overflow-tooltip />
+      <el-table-column prop="publishAt" label="发布时间" width="170" :formatter="dateCell" />
+      <el-table-column prop="expireAt" label="失效时间" width="170" :formatter="dateCell" />
+      <el-table-column label="状态" width="100">
+        <template #default="{ row }">
+          <el-button
+            v-if="can('notice:update')"
+            link
+            :type="row.status === 1 ? 'primary' : 'info'"
+            @click="toggleStatus(row)"
+            >{{ row.statusText }}</el-button
+          >
+          <el-tag v-else :type="row.status === 1 ? 'success' : 'info'" effect="light">{{
+            row.statusText
+          }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="150" fixed="right">
+        <template #default="{ row }">
+          <div class="table-actions">
+            <el-button
+              v-if="can('notice:update')"
+              type="primary"
+              size="small"
+              @click="openEdit(row)"
+              >编辑</el-button
+            >
+            <el-button
+              v-if="can('notice:update')"
+              type="danger"
+              size="small"
+              @click="confirmDelete(row)"
+              >删除</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="pageIndex"
+        v-model:page-size="pageSize"
+        :page-sizes="[5, 10, 20, 50]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="load"
+        @size-change="handleSizeChange"
+      />
+    </div>
+  </section>
+
+  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑公告' : '新建公告'" width="680px">
+    <el-form label-position="top">
+      <el-form-item label="公告标题" required>
+        <el-input v-model="form.title" maxlength="128" show-word-limit />
+      </el-form-item>
+      <el-form-item label="公告正文">
+        <el-input
+          v-model="form.content"
+          type="textarea"
+          :rows="4"
+          maxlength="2000"
+          show-word-limit
+        />
+      </el-form-item>
+      <div class="form-row">
+        <el-form-item label="投放目标">
+          <el-select v-model="form.target">
+            <el-option
+              v-for="item in targetOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="公告类型">
+          <el-select v-model="form.type">
+            <el-option
+              v-for="item in typeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </div>
+      <div class="form-row">
+        <el-form-item label="发布时间">
+          <el-date-picker
+            v-model="form.publishAt"
+            type="datetime"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+            placeholder="留空表示立即发布"
+          />
+        </el-form-item>
+        <el-form-item label="失效时间">
+          <el-date-picker
+            v-model="form.expireAt"
+            type="datetime"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+            placeholder="留空表示长期有效"
+          />
+        </el-form-item>
+      </div>
+      <p class="console-hint">
+        投放目标选「创作者」的公告只在后台留档，客户端公告位不返回；新建即发布，下架后客户端立即不可见。
+      </p>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" :loading="saving" @click="saveNotice">保存</el-button>
+    </template>
+  </el-dialog>
+</template>

From 3ec9ea6717846fe0ae73a0ed5f93751f00cbd0c4 Mon Sep 17 00:00:00 2001
From: Vicky <10212746+haifeng-jiang@user.noreply.gitee.com>
Date: Fri, 16 Oct 2026 16:44:19 +0800
Subject: [PATCH 02/59] =?UTF-8?q?fix(web):=20=E9=80=82=E9=85=8D=E5=90=8E?=
 =?UTF-8?q?=E7=AB=AF=20ID=20=E5=AD=97=E7=AC=A6=E4=B8=B2=E5=8C=96=EF=BC=88?=
 =?UTF-8?q?=E9=9B=AA=E8=8A=B1=20id=20=E4=B8=8D=E8=83=BD=E8=BF=87=20Number?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

后端 J1 起所有 Long id 以字符串下发，审计出 4 处把 id 当数字用的地方：

- utils/creatorImpersonation.ts：代看创作者 id 曾 Number(raw) 存 localStorage，
  19 位 id 会被四舍五入导致 X-Creator-Id 头带错 id；改为全程字符串
- contentManagement/EpisodeManagementView.vue：Number(route.query.drama) 与 item.id 比较，
  从短剧管理带 ?drama= 跳过来会选不中；改为字符串比较
- creator-center/composables/useDramaEdit.js：Number(route.params.id) 同上，作品编辑打不开
- permission/composables/useMenuManagement.js：顶级菜单哨兵 0 与接口的 "0" 类型不一致，
  下拉回显会变裸 0；统一成字符串 '0'

核过不需要改：分页 total 后端保持数字；role.id === selectedRoleId 等两侧都来自接口；
formatCount 内部 Number() 吃字符串；全局无 id 算术/下标/a.id-b.id。
---
 src/utils/creatorImpersonation.ts             | 19 ++++++++++++-------
 .../EpisodeManagementView.vue                 |  3 ++-
 .../composables/useDramaEdit.js               |  3 ++-
 .../composables/useMenuManagement.js          | 10 ++++++----
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/utils/creatorImpersonation.ts b/src/utils/creatorImpersonation.ts
index f3f9955..b6d698a 100644
--- a/src/utils/creatorImpersonation.ts
+++ b/src/utils/creatorImpersonation.ts
@@ -11,17 +11,22 @@ import { ref } from 'vue'
  */
 const STORAGE_KEY = 'creator-center:impersonate-id'
 
-function readStored(): number | null {
+/**
+ * 代看目标按**字符串**存：创作者 id 是雪花 id（19 位），
+ * 用 Number 过一遍会被 JS 四舍五入，请求头就会带一个不存在的 id（见 api-phase1.md §0）。
+ */
+function readStored(): string | null {
   const raw = localStorage.getItem(STORAGE_KEY)
-  const value = raw ? Number(raw) : NaN
-  return Number.isFinite(value) && value > 0 ? value : null
+  const value = (raw || '').trim()
+  return value && value !== '0' ? value : null
 }
 
-export const impersonateCreatorId = ref<number | null>(readStored())
+export const impersonateCreatorId = ref<string | null>(readStored())
 
-export function setImpersonateCreatorId(id: number | null) {
-  impersonateCreatorId.value = id
-  if (id) localStorage.setItem(STORAGE_KEY, String(id))
+export function setImpersonateCreatorId(id: string | number | null) {
+  const value = id === null || id === undefined || id === '' ? null : String(id)
+  impersonateCreatorId.value = value
+  if (value) localStorage.setItem(STORAGE_KEY, value)
   else localStorage.removeItem(STORAGE_KEY)
 }
 
diff --git a/src/views/contentManagement/EpisodeManagementView.vue b/src/views/contentManagement/EpisodeManagementView.vue
index fb67003..5db5f08 100644
--- a/src/views/contentManagement/EpisodeManagementView.vue
+++ b/src/views/contentManagement/EpisodeManagementView.vue
@@ -55,7 +55,8 @@ const selectedDrama = computed(() => dramas.value.find((item) => item.id === sel
 async function loadDramas() {
   const res = await pageDramasApi({ pageIndex: 1, pageSize: 200 })
   dramas.value = res.data?.list || []
-  const fromQuery = Number(route.query.drama)
+  // 剧 id 是字符串（雪花 id 过 Number 会被四舍五入），这里按字符串比较
+  const fromQuery = route.query.drama ? String(route.query.drama) : ''
   if (fromQuery && dramas.value.some((item) => item.id === fromQuery)) {
     selectedDramaId.value = fromQuery
   } else if (!selectedDramaId.value && dramas.value.length) {
diff --git a/src/views/creator-center/composables/useDramaEdit.js b/src/views/creator-center/composables/useDramaEdit.js
index efe7b08..9dbcbb4 100644
--- a/src/views/creator-center/composables/useDramaEdit.js
+++ b/src/views/creator-center/composables/useDramaEdit.js
@@ -42,7 +42,8 @@ function writeSession(key, value) {
 export function useDramaEdit() {
   const { ensureAccess, impersonating } = useCreatorAccess()
   const route = useRoute()
-  const dramaId = Number(route.params.id)
+  // 作品 id 是字符串（雪花 id 过 Number 会被四舍五入），按字符串比对
+  const dramaId = route.params.id ? String(route.params.id) : ''
 
   const loading = ref(false)
   const drama = ref(null)
diff --git a/src/views/permission/composables/useMenuManagement.js b/src/views/permission/composables/useMenuManagement.js
index 1bf197d..f45b3bd 100644
--- a/src/views/permission/composables/useMenuManagement.js
+++ b/src/views/permission/composables/useMenuManagement.js
@@ -47,7 +47,9 @@ export function useMenuManagement() {
   const treeData = computed(() => mapNodes(menuTree.value))
 
   const parentOptions = computed(() => {
-    const options = [{ id: 0, label: '顶级菜单' }]
+    // 顶级菜单哨兵跟接口的 parentId 一样用字符串 "0"：菜单 id 是字符串，
+    // 数字 0 会在下拉里对不上、回显成裸 "0"
+    const options = [{ id: '0', label: '顶级菜单' }]
     const walk = (nodes, depth) => {
       ;(nodes || []).forEach((node) => {
         if (node.type !== 'BUTTON') {
@@ -73,7 +75,7 @@ export function useMenuManagement() {
     }
   }
 
-  function resetForm(parentId = 0) {
+  function resetForm(parentId = '0') {
     Object.assign(form, {
       id: null,
       parentId,
@@ -94,7 +96,7 @@ export function useMenuManagement() {
     const raw = node.raw || {}
     Object.assign(form, {
       id: raw.id,
-      parentId: raw.parentId ?? 0,
+      parentId: raw.parentId ?? '0',
       title: raw.meta?.title || '',
       routePath: raw.path || '',
       routeName: raw.name || '',
@@ -114,7 +116,7 @@ export function useMenuManagement() {
       return ElMessage.warning('请填写对应路由')
     }
     const payload = {
-      parentId: form.parentId || 0,
+      parentId: form.parentId || '0',
       title: form.title.trim(),
       routePath: form.routePath.trim(),
       routeName: form.routeName.trim(),

From 54db082ffb66833f9d091b232cd294d818f413bf Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Sat, 17 Oct 2026 23:28:40 +0800
Subject: [PATCH 03/59] =?UTF-8?q?feat(admin):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=B3=A8=E5=86=8C=E9=99=90=E6=B5=81=E9=85=8D=E7=BD=AE=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/systemManagement/SettingsView.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/views/systemManagement/SettingsView.vue b/src/views/systemManagement/SettingsView.vue
index 15d6892..fac6141 100644
--- a/src/views/systemManagement/SettingsView.vue
+++ b/src/views/systemManagement/SettingsView.vue
@@ -12,12 +12,19 @@ const loading = ref(false)
 const saving = ref(false)
 const workspaceName = ref('')
 const defaultStatus = ref('draft')
+const registerMaxPerIp = ref(5)
+const registerMaxPerDevice = ref(3)
 
 const statusOptions = [
   { code: 'draft', text: '草稿' },
   { code: 'reviewing', text: '待审核' }
 ]
 
+const parseRegisterLimit = (value, fallback) => {
+  const parsed = Number.parseInt(value ?? '', 10)
+  return Number.isFinite(parsed) ? parsed : fallback
+}
+
 async function load() {
   loading.value = true
   try {
@@ -25,6 +32,8 @@ async function load() {
     const map = Object.fromEntries((res.data || []).map((item) => [item.key, item.value]))
     workspaceName.value = map['workspace.name'] || ''
     defaultStatus.value = map['content.default-status'] || 'draft'
+    registerMaxPerIp.value = parseRegisterLimit(map['app.register.max-per-ip-per-day'], 5)
+    registerMaxPerDevice.value = parseRegisterLimit(map['app.register.max-per-device-per-day'], 3)
   } finally {
     loading.value = false
   }
@@ -35,7 +44,9 @@ async function save() {
   try {
     await updateConfigsApi({
       'workspace.name': workspaceName.value,
-      'content.default-status': defaultStatus.value
+      'content.default-status': defaultStatus.value,
+      'app.register.max-per-ip-per-day': String(registerMaxPerIp.value),
+      'app.register.max-per-device-per-day': String(registerMaxPerDevice.value)
     })
     ElMessage.success('设置已保存')
   } finally {
@@ -62,6 +73,11 @@ onMounted(load)
             :key="item.code"
             :label="item.text"
             :value="item.code" /></el-select></el-form-item
+      ><el-divider content-position="left">注册频控</el-divider
+      ><el-form-item label="单 IP 24 小时注册上限（0 或负数表示不限制）"
+        ><el-input-number v-model="registerMaxPerIp" :step="1" :precision="0" /></el-form-item
+      ><el-form-item label="单设备 24 小时注册上限（0 或负数表示不限制）"
+        ><el-input-number v-model="registerMaxPerDevice" :step="1" :precision="0" /></el-form-item
       ><el-button type="primary" :loading="saving" :disabled="!can('system:role')" @click="save"
         >保存设置</el-button
       ></el-form

From 97fbeda508427aeb2edfe5c37863f8581278f217 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 11:12:28 +0800
Subject: [PATCH 04/59] =?UTF-8?q?style(web):=20=E7=BB=9F=E4=B8=80=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=E5=9B=BE=E6=A0=87=E4=B8=8E=E5=85=A8=E5=B1=80=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/login/types.ts                        |   1 -
 src/assets/imgs/brand-mark.png                | Bin 0 -> 6007 bytes
 src/components/AppIcon/index.ts               |   5 +
 src/components/AppIcon/src/AppIcon.vue        |  40 ++
 src/components/Breadcrumb/src/Breadcrumb.vue  |   8 +-
 src/components/Collapse/src/Collapse.vue      |   5 +-
 .../ContentWrap/src/ContentWrap.vue           |   3 +-
 .../ContextMenu/src/ContextMenu.vue           |   2 +-
 .../Descriptions/src/Descriptions.vue         |   9 +-
 src/components/Dialog/src/Dialog.vue          |   9 +-
 src/components/Icon/src/Icon.vue              |   8 +-
 .../LocaleDropdown/src/LocaleDropdown.vue     |   5 +-
 src/components/Logo/src/Logo.vue              |   4 +-
 .../src/components/useRenderMenuTitle.tsx     |   6 +-
 src/components/Screenfull/src/Screenfull.vue  |   7 +-
 .../Search/src/components/ActionButton.vue    |   7 +-
 src/components/Setting/src/Setting.vue        |  22 +-
 .../src/components/ColorRadioPicker.vue       |   3 +-
 .../src/components/LayoutRadioPicker.vue      |  22 +-
 .../SizeDropdown/src/SizeDropdown.vue         |   3 +-
 src/components/TabMenu/src/TabMenu.vue        |   7 +-
 src/components/Table/src/Table.vue            |   5 +-
 .../Table/src/components/ColumnSetting.vue    |  11 +-
 .../Table/src/components/TableActions.vue     |  15 +-
 src/components/TagsView/src/TagsView.vue      |  59 ++-
 .../ThemeSwitch/src/ThemeSwitch.vue           |  28 +-
 src/components/UserInfo/src/UserInfo.vue      |  21 +-
 .../UserInfo/src/components/LockDialog.vue    |  23 +-
 .../UserInfo/src/components/LockPage.vue      |  30 +-
 .../src/VideoPlayerViewer.vue                 |   5 +-
 src/components/index.ts                       |   2 +
 src/constants/icons.ts                        | 103 ++++
 src/hooks/web/useIcon.ts                      |   5 +-
 src/layout/components/ToolHeader.vue          |  26 +-
 src/locales/en.ts                             |   2 +
 src/locales/zh-CN.ts                          |   2 +
 src/store/modules/app.ts                      |   8 +-
 src/store/modules/user.ts                     |  16 +-
 src/styles/business/banner-management.css     |   6 +-
 src/styles/business/console.css               |   2 +-
 src/styles/business/creator-center.css        |   8 +-
 src/styles/business/dark.css                  |  41 +-
 src/styles/business/drama-management.css      |  22 +-
 src/styles/business/operation-log.css         |   2 +-
 src/styles/business/style.css                 | 463 ++++--------------
 src/styles/business/theme.css                 | 160 ++----
 src/styles/business/typography.css            |   2 +-
 src/styles/var.css                            |  17 +-
 src/views/Login/Login.vue                     |  89 +++-
 src/views/Login/components/LoginForm.vue      |  14 +-
 src/views/commerce/ProductManagementView.vue  |   4 +-
 src/views/common/DashboardView.vue            |  16 +-
 .../BannerManagementView.vue                  |   4 +-
 .../CategoryManagementView.vue                |   4 +-
 .../contentManagement/DramaManagementView.vue |   9 +-
 .../EpisodeManagementView.vue                 |   4 +-
 src/views/creator-center/DramaEditView.vue    |   8 +-
 src/views/creator-center/WorkspaceView.vue    |   7 +-
 src/views/creator/CreatorAuditView.vue        |   7 +-
 src/views/operation/NoticeManagementView.vue  |   4 +-
 src/views/permission/MenuManagementView.vue   |   4 +-
 src/views/permission/RoleCategoriesView.vue   |   4 +-
 src/views/permission/RoleManagementView.vue   |   4 +-
 .../composables/useMenuManagement.js          |  16 +-
 .../systemManagement/OperationLogView.vue     |   7 +-
 src/views/userManagement/AdminUsersView.vue   |   9 +-
 src/views/userManagement/AppUsersView.vue     |   7 +-
 67 files changed, 737 insertions(+), 744 deletions(-)
 create mode 100644 src/assets/imgs/brand-mark.png
 create mode 100644 src/components/AppIcon/index.ts
 create mode 100644 src/components/AppIcon/src/AppIcon.vue
 create mode 100644 src/constants/icons.ts

diff --git a/src/api/login/types.ts b/src/api/login/types.ts
index 0584f6e..6c26ed6 100644
--- a/src/api/login/types.ts
+++ b/src/api/login/types.ts
@@ -2,7 +2,6 @@
 
 export type UserLoginType = {
   username: string
-  password: string
 }
 
 export type UserType = {
diff --git a/src/assets/imgs/brand-mark.png b/src/assets/imgs/brand-mark.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6f5dc1428f6699146c6a85cdb811e683e9d27cb
GIT binary patch
literal 6007
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
Q33cF#w!T&|-sbUt0nW?M#sB~S

literal 0
HcmV?d00001

diff --git a/src/components/AppIcon/index.ts b/src/components/AppIcon/index.ts
new file mode 100644
index 0000000..dca3e15
--- /dev/null
+++ b/src/components/AppIcon/index.ts
@@ -0,0 +1,5 @@
+// Author: fruit.com.cn
+
+import AppIcon from './src/AppIcon.vue'
+
+export { AppIcon }
diff --git a/src/components/AppIcon/src/AppIcon.vue b/src/components/AppIcon/src/AppIcon.vue
new file mode 100644
index 0000000..9b67c80
--- /dev/null
+++ b/src/components/AppIcon/src/AppIcon.vue
@@ -0,0 +1,40 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Icon } from '@/components/Icon'
+import { normalizeAppIcon } from '@/constants/icons'
+import { propTypes } from '@/utils/propTypes'
+
+/**
+ * 后台统一图标入口：默认使用 Material Symbols Rounded。
+ */
+const props = defineProps({
+  icon: propTypes.string,
+  color: propTypes.string,
+  size: propTypes.number.def(18),
+  hoverColor: propTypes.string
+})
+
+const resolvedIcon = computed(() => normalizeAppIcon(props.icon))
+</script>
+
+<template>
+  <Icon
+    :icon="resolvedIcon"
+    :color="color"
+    :size="size"
+    :hover-color="hoverColor"
+    class="app-icon"
+  />
+</template>
+
+<style scoped>
+.app-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  vertical-align: middle;
+}
+</style>
diff --git a/src/components/Breadcrumb/src/Breadcrumb.vue b/src/components/Breadcrumb/src/Breadcrumb.vue
index 307574b..fe2f78a 100644
--- a/src/components/Breadcrumb/src/Breadcrumb.vue
+++ b/src/components/Breadcrumb/src/Breadcrumb.vue
@@ -9,7 +9,7 @@ import { filterBreadcrumb } from './helper'
 import { filter, treeToList } from '@/utils/tree'
 import type { RouteLocationNormalizedLoaded, RouteMeta } from 'vue-router'
 import { useI18n } from '@/hooks/web/useI18n'
-import { Icon } from '@/components/Icon'
+import { AppIcon } from '@/components/AppIcon'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 
@@ -54,7 +54,7 @@ export default defineComponent({
           <ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}>
             {meta?.icon && breadcrumbIcon.value ? (
               <>
-                <Icon icon={meta.icon} class="mr-[5px]"></Icon> {t(v?.meta?.title)}
+                <AppIcon icon={meta.icon} class="mr-[5px]"></AppIcon> {t(v?.meta?.title)}
               </>
             ) : (
               t(v?.meta?.title)
@@ -117,10 +117,10 @@ export default defineComponent({
 
   :deep(&__item):last-child {
     .@{prefix-cls}__inner {
-      color: var(--el-text-color-placeholder);
+      color: var(--el-text-color-regular);
 
       &:hover {
-        color: var(--el-text-color-placeholder);
+        color: var(--el-color-primary);
       }
     }
   }
diff --git a/src/components/Collapse/src/Collapse.vue b/src/components/Collapse/src/Collapse.vue
index a07a348..3f655ea 100644
--- a/src/components/Collapse/src/Collapse.vue
+++ b/src/components/Collapse/src/Collapse.vue
@@ -5,6 +5,7 @@ import { computed, unref } from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
+import { AppIcons } from '@/constants/icons'
 
 const { getPrefixCls } = useDesign()
 
@@ -26,9 +27,9 @@ const toggleCollapse = () => {
 
 <template>
   <div :class="prefixCls" @click="toggleCollapse">
-    <Icon
+    <AppIcon
       :size="18"
-      :icon="collapse ? 'ant-design:menu-unfold-outlined' : 'ant-design:menu-fold-outlined'"
+      :icon="collapse ? AppIcons.menuOpen : AppIcons.menu"
       :color="color"
       class="cursor-pointer"
     />
diff --git a/src/components/ContentWrap/src/ContentWrap.vue b/src/components/ContentWrap/src/ContentWrap.vue
index 380ac37..293df95 100644
--- a/src/components/ContentWrap/src/ContentWrap.vue
+++ b/src/components/ContentWrap/src/ContentWrap.vue
@@ -4,6 +4,7 @@
 import { ElCard, ElTooltip } from 'element-plus'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
+import { AppIcons } from '@/constants/icons'
 
 const { getPrefixCls } = useDesign()
 
@@ -24,7 +25,7 @@ defineProps({
           <template #content>
             <div class="max-w-200px">{{ message }}</div>
           </template>
-          <Icon class="ml-5px" icon="bi:question-circle-fill" :size="14" />
+          <AppIcon class="ml-5px" :icon="AppIcons.help" :size="14" />
         </ElTooltip>
       </div>
     </template>
diff --git a/src/components/ContextMenu/src/ContextMenu.vue b/src/components/ContextMenu/src/ContextMenu.vue
index 144f8f6..c40e137 100644
--- a/src/components/ContextMenu/src/ContextMenu.vue
+++ b/src/components/ContextMenu/src/ContextMenu.vue
@@ -66,7 +66,7 @@ defineExpose({
           :disabled="item.disabled"
           :command="item"
         >
-          <Icon :icon="item.icon" /> {{ t(item.label) }}
+          <AppIcon :icon="item.icon" /> {{ t(item.label) }}
         </ElDropdownItem>
       </ElDropdownMenu>
     </template>
diff --git a/src/components/Descriptions/src/Descriptions.vue b/src/components/Descriptions/src/Descriptions.vue
index 33bc95d..e1d3c83 100644
--- a/src/components/Descriptions/src/Descriptions.vue
+++ b/src/components/Descriptions/src/Descriptions.vue
@@ -7,8 +7,9 @@ import { propTypes } from '@/utils/propTypes'
 import { ref, unref, PropType, computed, defineComponent } from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { DescriptionsSchema } from './types'
-import { Icon } from '@/components/Icon'
+import { AppIcon } from '@/components/AppIcon'
 import { get } from 'lodash-es'
+import { AppIcons } from '@/constants/icons'
 
 const appStore = useAppStore()
 
@@ -94,12 +95,14 @@ export default defineComponent({
                   {props.title}
                   {props.message ? (
                     <ElTooltip content={props.message} placement="right">
-                      <Icon icon="bi:question-circle-fill" class="ml-5px" size={14} />
+                      <AppIcon icon={AppIcons.help} class="ml-5px" size={14} />
                     </ElTooltip>
                   ) : null}
                 </div>
               </div>
-              {props.collapse ? <Icon icon={show.value ? 'ep:arrow-down' : 'ep:arrow-up'} /> : null}
+              {props.collapse ? (
+                <AppIcon icon={show.value ? AppIcons.chevronDown : AppIcons.chevronUp} />
+              ) : null}
             </div>
           ) : null}
 
diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue
index 0de4ca9..5d5c7ba 100644
--- a/src/components/Dialog/src/Dialog.vue
+++ b/src/components/Dialog/src/Dialog.vue
@@ -5,6 +5,7 @@ import { ElDialog, ElScrollbar } from 'element-plus'
 import { propTypes } from '@/utils/propTypes'
 import { computed, useAttrs, ref, unref, useSlots, watch, nextTick } from 'vue'
 import { isNumber } from '@/utils/is'
+import { AppIcons } from '@/constants/icons'
 
 const slots = useSlots()
 
@@ -77,17 +78,17 @@ const dialogStyle = computed(() => {
         <div
           class="h-54px flex justify-between items-center absolute top-[50%] right-15px translate-y-[-50%]"
         >
-          <Icon
+          <AppIcon
             v-if="fullscreen"
             class="cursor-pointer is-hover !h-54px mr-10px"
-            :icon="isFullscreen ? 'radix-icons:exit-full-screen' : 'radix-icons:enter-full-screen'"
+            :icon="isFullscreen ? AppIcons.fullscreenExit : AppIcons.fullscreen"
             color="var(--el-color-info)"
             hover-color="var(--el-color-primary)"
             @click="toggleFull"
           />
-          <Icon
+          <AppIcon
             class="cursor-pointer is-hover !h-54px"
-            icon="ep:close"
+            :icon="AppIcons.close"
             hover-color="var(--el-color-primary)"
             color="var(--el-color-info)"
             @click="close"
diff --git a/src/components/Icon/src/Icon.vue b/src/components/Icon/src/Icon.vue
index 6bbc8ac..ecc7af5 100644
--- a/src/components/Icon/src/Icon.vue
+++ b/src/components/Icon/src/Icon.vue
@@ -6,6 +6,7 @@ import { ElIcon } from 'element-plus'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
 import { Icon } from '@iconify/vue'
+import { normalizeAppIcon } from '@/constants/icons'
 
 const { getPrefixCls } = useDesign()
 
@@ -22,9 +23,10 @@ const props = defineProps({
 })
 
 const isLocal = computed(() => props.icon.startsWith('svg-icon:'))
+const normalizedIcon = computed(() => normalizeAppIcon(props.icon))
 
 const symbolId = computed(() => {
-  return unref(isLocal) ? `#icon-${props.icon.split('svg-icon:')[1]}` : props.icon
+  return unref(isLocal) ? `#icon-${props.icon.split('svg-icon:')[1]}` : unref(normalizedIcon)
 })
 
 // 是否使用在线图标
@@ -48,8 +50,8 @@ const getIconifyStyle = computed(() => {
     </svg>
 
     <template v-else>
-      <Icon v-if="isUseOnline" :icon="icon" :style="getIconifyStyle" />
-      <div v-else :class="`${icon} iconify`" :style="getIconifyStyle"></div>
+      <Icon v-if="isUseOnline" :icon="normalizedIcon" :style="getIconifyStyle" />
+      <div v-else :class="`${normalizedIcon} iconify`" :style="getIconifyStyle"></div>
     </template>
   </ElIcon>
 </template>
diff --git a/src/components/LocaleDropdown/src/LocaleDropdown.vue b/src/components/LocaleDropdown/src/LocaleDropdown.vue
index b64d649..a219e4c 100644
--- a/src/components/LocaleDropdown/src/LocaleDropdown.vue
+++ b/src/components/LocaleDropdown/src/LocaleDropdown.vue
@@ -7,6 +7,7 @@ import { useLocaleStore } from '@/store/modules/locale'
 import { useLocale } from '@/hooks/web/useLocale'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
+import { AppIcons } from '@/constants/icons'
 
 const { getPrefixCls } = useDesign()
 
@@ -36,9 +37,9 @@ const setLang = (lang: LocaleType) => {
 
 <template>
   <ElDropdown :class="prefixCls" trigger="click" @command="setLang">
-    <Icon
+    <AppIcon
       :size="18"
-      icon="ion:language-sharp"
+      :icon="AppIcons.language"
       class="cursor-pointer !p-0"
       :class="$attrs.class"
       :color="color"
diff --git a/src/components/Logo/src/Logo.vue b/src/components/Logo/src/Logo.vue
index 25e6fd5..a0d4212 100644
--- a/src/components/Logo/src/Logo.vue
+++ b/src/components/Logo/src/Logo.vue
@@ -67,8 +67,8 @@ watch(
       to="/"
     >
       <img
-        src="@/assets/imgs/logo.png"
-        class="w-[calc(var(--logo-height)-10px)] h-[calc(var(--logo-height)-10px)]"
+        src="@/assets/imgs/brand-mark.png"
+        class="w-[var(--brand-mark-size)] h-[var(--brand-mark-size)] rounded-[var(--brand-mark-radius)] object-cover"
       />
       <div
         v-if="show"
diff --git a/src/components/Menu/src/components/useRenderMenuTitle.tsx b/src/components/Menu/src/components/useRenderMenuTitle.tsx
index 8941d9d..5c3dde8 100644
--- a/src/components/Menu/src/components/useRenderMenuTitle.tsx
+++ b/src/components/Menu/src/components/useRenderMenuTitle.tsx
@@ -1,5 +1,7 @@
+// Author: fruit.com.cn
+
 import type { RouteMeta } from 'vue-router'
-import { Icon } from '@/components/Icon'
+import { AppIcon } from '@/components/AppIcon'
 import { useI18n } from '@/hooks/web/useI18n'
 
 export const useRenderMenuTitle = () => {
@@ -9,7 +11,7 @@ export const useRenderMenuTitle = () => {
 
     return icon ? (
       <>
-        <Icon icon={meta.icon}></Icon>
+        <AppIcon icon={meta.icon}></AppIcon>
         <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">
           {t(title as string)}
         </span>
diff --git a/src/components/Screenfull/src/Screenfull.vue b/src/components/Screenfull/src/Screenfull.vue
index 8d02ef4..93a3bed 100644
--- a/src/components/Screenfull/src/Screenfull.vue
+++ b/src/components/Screenfull/src/Screenfull.vue
@@ -1,10 +1,11 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup lang="ts">
-import { Icon } from '@/components/Icon'
+import { AppIcon } from '@/components/AppIcon'
 import { useFullscreen } from '@vueuse/core'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
+import { AppIcons } from '@/constants/icons'
 
 const { getPrefixCls } = useDesign()
 
@@ -23,9 +24,9 @@ const toggleFullscreen = () => {
 
 <template>
   <div :class="prefixCls" @click="toggleFullscreen">
-    <Icon
+    <AppIcon
       :size="18"
-      :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
+      :icon="isFullscreen ? AppIcons.fullscreenExit : AppIcons.fullscreen"
       :color="color"
     />
   </div>
diff --git a/src/components/Search/src/components/ActionButton.vue b/src/components/Search/src/components/ActionButton.vue
index d1a32c5..b50b36b 100644
--- a/src/components/Search/src/components/ActionButton.vue
+++ b/src/components/Search/src/components/ActionButton.vue
@@ -5,6 +5,7 @@ import { ElButton } from 'element-plus'
 import { useIcon } from '@/hooks/web/useIcon'
 import { propTypes } from '@/utils/propTypes'
 import { useI18n } from '@/hooks/web/useI18n'
+import { AppIcons } from '@/constants/icons'
 
 const emit = defineEmits(['search', 'reset', 'expand'])
 
@@ -37,7 +38,7 @@ const onExpand = () => {
     v-if="showSearch"
     type="primary"
     :loading="searchLoading"
-    :icon="useIcon({ icon: 'ep:search' })"
+    :icon="useIcon({ icon: AppIcons.search })"
     @click="onSearch"
   >
     {{ t('common.query') }}
@@ -45,14 +46,14 @@ const onExpand = () => {
   <ElButton
     v-if="showReset"
     :loading="resetLoading"
-    :icon="useIcon({ icon: 'ep:refresh-right' })"
+    :icon="useIcon({ icon: AppIcons.refresh })"
     @click="onReset"
   >
     {{ t('common.reset') }}
   </ElButton>
   <ElButton
     v-if="showExpand"
-    :icon="useIcon({ icon: visible ? 'ep:arrow-down' : 'ep:arrow-up' })"
+    :icon="useIcon({ icon: visible ? AppIcons.chevronDown : AppIcons.chevronUp })"
     text
     @click="onExpand"
   >
diff --git a/src/components/Setting/src/Setting.vue b/src/components/Setting/src/Setting.vue
index b1914b3..6f25ee1 100644
--- a/src/components/Setting/src/Setting.vue
+++ b/src/components/Setting/src/Setting.vue
@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup lang="ts">
-import { ElDrawer, ElDivider, ElMessage } from 'element-plus'
+import { ElDrawer, ElDivider, ElMessage, ElMessageBox } from 'element-plus'
 import { ref, unref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
@@ -14,6 +14,7 @@ import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
 import { useStorage } from '@/hooks/web/useStorage'
 import { useClipboard } from '@vueuse/core'
 import { useDesign } from '@/hooks/web/useDesign'
+import { AppIcons } from '@/constants/icons'
 
 const { clear: storageClear } = useStorage('localStorage')
 
@@ -145,9 +146,18 @@ const copyConfig = async () => {
 }
 
 // 清空缓存
-const clear = () => {
-  storageClear()
-  window.location.reload()
+const clear = async () => {
+  try {
+    await ElMessageBox.confirm(t('setting.clearCacheMessage'), t('setting.clearAndReset'), {
+      confirmButtonText: t('common.ok'),
+      cancelButtonText: t('common.cancel'),
+      type: 'warning'
+    })
+    storageClear()
+    window.location.reload()
+  } catch {
+    // 取消清除时保持当前状态
+  }
 }
 
 const themeChange = () => {
@@ -163,7 +173,7 @@ const themeChange = () => {
     class="fixed top-[45%] right-0 w-40px h-40px flex items-center justify-center bg-[var(--el-color-primary)] cursor-pointer z-10"
     @click="drawer = true"
   >
-    <Icon icon="ant-design:setting-outlined" color="#fff" />
+    <AppIcon :icon="AppIcons.settings" color="#fff" />
   </div>
 
   <ElDrawer v-model="drawer" direction="rtl" size="350px" :z-index="4000">
@@ -254,6 +264,6 @@ const themeChange = () => {
 @prefix-cls: ~'@{namespace}-setting';
 
 .@{prefix-cls} {
-  border-radius: 6px 0 0 6px;
+  border-radius: var(--app-radius-md) 0 0 6px;
 }
 </style>
diff --git a/src/components/Setting/src/components/ColorRadioPicker.vue b/src/components/Setting/src/components/ColorRadioPicker.vue
index fe42c44..69f937f 100644
--- a/src/components/Setting/src/components/ColorRadioPicker.vue
+++ b/src/components/Setting/src/components/ColorRadioPicker.vue
@@ -4,6 +4,7 @@
 import { PropType, watch, unref, ref } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
+import { AppIcons } from '@/constants/icons'
 
 const { getPrefixCls } = useDesign()
 
@@ -51,7 +52,7 @@ watch(
       }"
       @click="colorVal = item"
     >
-      <Icon v-if="colorVal === item" color="#fff" icon="ep:check" :size="16" />
+      <AppIcon v-if="colorVal === item" color="#fff" :icon="AppIcons.check" :size="16" />
     </span>
   </div>
 </template>
diff --git a/src/components/Setting/src/components/LayoutRadioPicker.vue b/src/components/Setting/src/components/LayoutRadioPicker.vue
index 480ae95..22b5888 100644
--- a/src/components/Setting/src/components/LayoutRadioPicker.vue
+++ b/src/components/Setting/src/components/LayoutRadioPicker.vue
@@ -67,7 +67,7 @@ const layout = computed(() => appStore.getLayout)
 .@{prefix-cls} {
   &__classic {
     border: 2px solid #e5e7eb;
-    border-radius: 4px;
+    border-radius: var(--app-radius-sm);
 
     &::before {
       position: absolute;
@@ -77,7 +77,7 @@ const layout = computed(() => appStore.getLayout)
       width: 33%;
       height: 100%;
       background-color: #273352;
-      border-radius: 4px 0 0 4px;
+      border-radius: var(--app-radius-sm) 0 0 4px;
       content: '';
     }
 
@@ -88,14 +88,14 @@ const layout = computed(() => appStore.getLayout)
       width: 100%;
       height: 25%;
       background-color: #fff;
-      border-radius: 4px 4px 0;
+      border-radius: var(--app-radius-sm) 4px 0;
       content: '';
     }
   }
 
   &__top-left {
     border: 2px solid #e5e7eb;
-    border-radius: 4px;
+    border-radius: var(--app-radius-sm);
 
     &::before {
       position: absolute;
@@ -105,7 +105,7 @@ const layout = computed(() => appStore.getLayout)
       width: 100%;
       height: 33%;
       background-color: #273352;
-      border-radius: 4px 4px 0 0;
+      border-radius: var(--app-radius-sm) 4px 0 0;
       content: '';
     }
 
@@ -116,14 +116,14 @@ const layout = computed(() => appStore.getLayout)
       width: 33%;
       height: 100%;
       background-color: #fff;
-      border-radius: 4px 0 0 4px;
+      border-radius: var(--app-radius-sm) 0 0 4px;
       content: '';
     }
   }
 
   &__top {
     border: 2px solid #e5e7eb;
-    border-radius: 4px;
+    border-radius: var(--app-radius-sm);
 
     &::before {
       position: absolute;
@@ -133,14 +133,14 @@ const layout = computed(() => appStore.getLayout)
       width: 100%;
       height: 33%;
       background-color: #273352;
-      border-radius: 4px 4px 0 0;
+      border-radius: var(--app-radius-sm) 4px 0 0;
       content: '';
     }
   }
 
   &__cut-menu {
     border: 2px solid #e5e7eb;
-    border-radius: 4px;
+    border-radius: var(--app-radius-sm);
 
     &::before {
       position: absolute;
@@ -150,7 +150,7 @@ const layout = computed(() => appStore.getLayout)
       width: 100%;
       height: 33%;
       background-color: #273352;
-      border-radius: 4px 4px 0 0;
+      border-radius: var(--app-radius-sm) 4px 0 0;
       content: '';
     }
 
@@ -161,7 +161,7 @@ const layout = computed(() => appStore.getLayout)
       width: 10%;
       height: 100%;
       background-color: #fff;
-      border-radius: 4px 0 0 4px;
+      border-radius: var(--app-radius-sm) 0 0 4px;
       content: '';
     }
   }
diff --git a/src/components/SizeDropdown/src/SizeDropdown.vue b/src/components/SizeDropdown/src/SizeDropdown.vue
index 141f34e..fc748b8 100644
--- a/src/components/SizeDropdown/src/SizeDropdown.vue
+++ b/src/components/SizeDropdown/src/SizeDropdown.vue
@@ -7,6 +7,7 @@ import { useAppStore } from '@/store/modules/app'
 import { useI18n } from '@/hooks/web/useI18n'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
+import { AppIcons } from '@/constants/icons'
 
 const { getPrefixCls } = useDesign()
 
@@ -29,7 +30,7 @@ const setCurrentSize = (size: ComponentSize) => {
 
 <template>
   <ElDropdown :class="prefixCls" trigger="click" @command="setCurrentSize">
-    <Icon :size="18" icon="mdi:format-size" :color="color" class="cursor-pointer" />
+    <AppIcon :size="18" :icon="AppIcons.formatSize" :color="color" class="cursor-pointer" />
     <template #dropdown>
       <ElDropdownMenu>
         <ElDropdownItem v-for="item in sizeMap" :key="item" :command="item">
diff --git a/src/components/TabMenu/src/TabMenu.vue b/src/components/TabMenu/src/TabMenu.vue
index bcde5c5..0b3aa37 100644
--- a/src/components/TabMenu/src/TabMenu.vue
+++ b/src/components/TabMenu/src/TabMenu.vue
@@ -6,7 +6,7 @@ import { useAppStore } from '@/store/modules/app'
 import { computed, unref, defineComponent, watch, ref, onMounted } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElScrollbar } from 'element-plus'
-import { Icon } from '@/components/Icon'
+import { AppIcon } from '@/components/AppIcon'
 import { Menu } from '@/components/Menu'
 import { useRouter } from 'vue-router'
 import { pathResolve } from '@/utils/routerHelper'
@@ -14,6 +14,7 @@ import { cloneDeep } from 'lodash-es'
 import { filterMenusPath, initTabMap, tabPathMap } from './helper'
 import { useDesign } from '@/hooks/web/useDesign'
 import { isUrl } from '@/utils/is'
+import { AppIcons } from '@/constants/icons'
 
 const { getPrefixCls, variables } = useDesign()
 
@@ -180,7 +181,7 @@ export default defineComponent({
                     }}
                   >
                     <div>
-                      <Icon icon={item?.meta?.icon}></Icon>
+                      <AppIcon icon={item?.meta?.icon}></AppIcon>
                     </div>
                     {!unref(showTitle) ? undefined : (
                       <p class="break-words mt-5px px-2px">{t(item.meta?.title)}</p>
@@ -198,7 +199,7 @@ export default defineComponent({
           ]}
           onClick={setCollapse}
         >
-          <Icon icon={unref(collapse) ? 'ep:d-arrow-right' : 'ep:d-arrow-left'}></Icon>
+          <AppIcon icon={unref(collapse) ? AppIcons.chevronRight : AppIcons.chevronLeft}></AppIcon>
         </div>
         <Menu
           class={[
diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue
index fc213e3..f270c97 100644
--- a/src/components/Table/src/Table.vue
+++ b/src/components/Table/src/Table.vue
@@ -20,8 +20,9 @@ import { CSSProperties } from 'vue'
 import { getSlot } from '@/utils/tsxHelper'
 import TableActions from './components/TableActions.vue'
 import { createVideoViewer } from '@/components/VideoPlayer'
-import { Icon } from '@/components/Icon'
+import { AppIcon } from '@/components/AppIcon'
 import { BaseButton } from '@/components/Button'
+import { AppIcons } from '@/constants/icons'
 
 export default defineComponent({
   name: 'Table',
@@ -408,7 +409,7 @@ export default defineComponent({
           ) : videoPreview.includes(field) ? (
             <BaseButton
               type="primary"
-              icon={<Icon icon="ep:video-play" />}
+              icon={<AppIcon icon={AppIcons.videoPlay} />}
               onClick={() => {
                 createVideoViewer({
                   url
diff --git a/src/components/Table/src/components/ColumnSetting.vue b/src/components/Table/src/components/ColumnSetting.vue
index e7bd4e9..f0f4582 100644
--- a/src/components/Table/src/components/ColumnSetting.vue
+++ b/src/components/Table/src/components/ColumnSetting.vue
@@ -13,6 +13,7 @@ import { TableColumn } from '../types'
 import { PropType, ref, watch, unref } from 'vue'
 import { cloneDeep } from 'lodash-es'
 import { DEFAULT_FILTER_COLUMN } from '@/constants'
+import { AppIcons } from '@/constants/icons'
 import { VueDraggable } from 'vue-draggable-plus'
 
 const modelValue = defineModel<boolean>()
@@ -141,17 +142,19 @@ watch(
               <div class="flex items-center">
                 <ElRadioGroup size="small" v-model="item.fixed">
                   <ElRadioButton label="left">
-                    <Icon icon="ep:arrow-left" />
+                    <AppIcon :icon="AppIcons.chevronLeft" />
                   </ElRadioButton>
                   <ElRadioButton :label="undefined">
-                    <Icon icon="ep:close" />
+                    <AppIcon :icon="AppIcons.close" />
                   </ElRadioButton>
                   <ElRadioButton label="right">
-                    <Icon icon="ep:arrow-right" />
+                    <AppIcon :icon="AppIcons.chevronRight" />
                   </ElRadioButton>
                 </ElRadioGroup>
 
-                <div class="ml-12px cursor-move handle"><Icon icon="ep:rank" /></div>
+                <div class="ml-12px cursor-move handle">
+                  <AppIcon :icon="AppIcons.drag" />
+                </div>
               </div>
             </div>
           </ElCheckboxGroup>
diff --git a/src/components/Table/src/components/TableActions.vue b/src/components/Table/src/components/TableActions.vue
index 39e434e..390d53c 100644
--- a/src/components/Table/src/components/TableActions.vue
+++ b/src/components/Table/src/components/TableActions.vue
@@ -3,11 +3,12 @@
 <script lang="tsx">
 import { defineComponent, unref, computed, PropType, ref } from 'vue'
 import { ElDropdown, ElDropdownMenu, ElDropdownItem, ComponentSize } from 'element-plus'
-import { Icon } from '@/components/Icon'
+import { AppIcon } from '@/components/AppIcon'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useAppStore } from '@/store/modules/app'
 import { TableColumn } from '../types'
 import ColumnSetting from './ColumnSetting.vue'
+import { AppIcons } from '@/constants/icons'
 
 export default defineComponent({
   name: 'TableActions',
@@ -47,8 +48,8 @@ export default defineComponent({
       <>
         <div class="text-right h-28px flex items-center justify-end">
           <div title="刷新" class="w-30px h-20px flex items-center justify-end" onClick={refresh}>
-            <Icon
-              icon="ant-design:sync-outlined"
+            <AppIcon
+              icon={AppIcons.refresh}
               class="cursor-pointer"
               hover-color="var(--el-color-primary)"
             />
@@ -59,8 +60,8 @@ export default defineComponent({
               default: () => {
                 return (
                   <div title="尺寸" class="w-30px h-20px flex items-center justify-end">
-                    <Icon
-                      icon="ant-design:column-height-outlined"
+                    <AppIcon
+                      icon={AppIcons.viewColumn}
                       class="cursor-pointer"
                       hover-color="var(--el-color-primary)"
                     />
@@ -92,8 +93,8 @@ export default defineComponent({
             class="w-30px h-20px flex items-center justify-end"
             onClick={showColumnSetting}
           >
-            <Icon
-              icon="ant-design:setting-outlined"
+            <AppIcon
+              icon={AppIcons.settings}
               class="cursor-pointer"
               hover-color="var(--el-color-primary)"
             />
diff --git a/src/components/TagsView/src/TagsView.vue b/src/components/TagsView/src/TagsView.vue
index 684bc11..2fac7d7 100644
--- a/src/components/TagsView/src/TagsView.vue
+++ b/src/components/TagsView/src/TagsView.vue
@@ -16,6 +16,7 @@ import { ElScrollbar } from 'element-plus'
 import { useScrollTo } from '@/hooks/event/useScrollTo'
 import { useTagsView } from '@/hooks/web/useTagsView'
 import { cloneDeep } from 'lodash-es'
+import { AppIcons } from '@/constants/icons'
 
 const { getPrefixCls } = useDesign()
 
@@ -262,18 +263,14 @@ watch(
 </script>
 
 <template>
-  <div
-    :id="prefixCls"
-    :class="prefixCls"
-    class="flex w-full relative bg-[#fff] dark:bg-[var(--el-bg-color)]"
-  >
+  <div :id="prefixCls" :class="prefixCls" class="flex w-full relative bg-[var(--el-bg-color)]">
     <span
       :class="`${prefixCls}__tool ${prefixCls}__tool--first`"
       class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer"
       @click="move(-200)"
     >
-      <Icon
-        icon="ep:d-arrow-left"
+      <AppIcon
+        :icon="AppIcons.chevronLeft"
         color="var(--el-text-color-placeholder)"
         :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
       />
@@ -285,7 +282,7 @@ watch(
             :ref="itemRefs.set"
             :schema="[
               {
-                icon: 'ant-design:sync-outlined',
+                icon: AppIcons.refresh,
                 label: t('common.reload'),
                 disabled: selectedTag?.fullPath !== item.fullPath,
                 command: () => {
@@ -293,7 +290,7 @@ watch(
                 }
               },
               {
-                icon: 'ant-design:close-outlined',
+                icon: AppIcons.close,
                 label: t('common.closeTab'),
                 disabled: !!visitedViews?.length && selectedTag?.meta.affix,
                 command: () => {
@@ -302,7 +299,7 @@ watch(
               },
               {
                 divided: true,
-                icon: 'ant-design:vertical-right-outlined',
+                icon: AppIcons.splitRight,
                 label: t('common.closeTheLeftTab'),
                 disabled:
                   !!visitedViews?.length &&
@@ -313,7 +310,7 @@ watch(
                 }
               },
               {
-                icon: 'ant-design:vertical-left-outlined',
+                icon: AppIcons.splitLeft,
                 label: t('common.closeTheRightTab'),
                 disabled:
                   !!visitedViews?.length &&
@@ -325,7 +322,7 @@ watch(
               },
               {
                 divided: true,
-                icon: 'ant-design:tag-outlined',
+                icon: AppIcons.tag,
                 label: t('common.closeOther'),
                 disabled: selectedTag?.fullPath !== item.fullPath,
                 command: () => {
@@ -333,7 +330,7 @@ watch(
                 }
               },
               {
-                icon: 'ant-design:line-outlined',
+                icon: AppIcons.line,
                 label: t('common.closeAll'),
                 command: () => {
                   closeAllTags()
@@ -358,7 +355,7 @@ watch(
                   @click="navigate"
                   class="h-full flex justify-center items-center whitespace-nowrap pl-15px"
                 >
-                  <Icon
+                  <AppIcon
                     v-if="
                       item?.matched &&
                       item?.matched[1] &&
@@ -370,10 +367,10 @@ watch(
                     class="mr-5px"
                   />
                   {{ t(item?.meta?.title as string) }}
-                  <Icon
+                  <AppIcon
                     :class="`${prefixCls}__item--close`"
-                    color="#333"
-                    icon="ant-design:close-outlined"
+                    color="var(--el-text-color-secondary)"
+                    :icon="AppIcons.close"
                     :size="12"
                     @click.prevent.stop="closeSelectedTag(item)"
                   />
@@ -389,8 +386,8 @@ watch(
       class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer"
       @click="move(200)"
     >
-      <Icon
-        icon="ep:d-arrow-right"
+      <AppIcon
+        :icon="AppIcons.chevronRight"
         color="var(--el-text-color-placeholder)"
         :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
       />
@@ -400,8 +397,8 @@ watch(
       class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer"
       @click="refreshSelectedTag(selectedTag)"
     >
-      <Icon
-        icon="ant-design:reload-outlined"
+      <AppIcon
+        :icon="AppIcons.refresh"
         color="var(--el-text-color-placeholder)"
         :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
       />
@@ -410,14 +407,14 @@ watch(
       trigger="click"
       :schema="[
         {
-          icon: 'ant-design:sync-outlined',
+          icon: AppIcons.refresh,
           label: t('common.reload'),
           command: () => {
             refreshSelectedTag(selectedTag)
           }
         },
         {
-          icon: 'ant-design:close-outlined',
+          icon: AppIcons.close,
           label: t('common.closeTab'),
           disabled: !!visitedViews?.length && selectedTag?.meta.affix,
           command: () => {
@@ -426,7 +423,7 @@ watch(
         },
         {
           divided: true,
-          icon: 'ant-design:vertical-right-outlined',
+          icon: AppIcons.splitRight,
           label: t('common.closeTheLeftTab'),
           disabled: !!visitedViews?.length && selectedTag?.fullPath === visitedViews[0].fullPath,
           command: () => {
@@ -434,7 +431,7 @@ watch(
           }
         },
         {
-          icon: 'ant-design:vertical-left-outlined',
+          icon: AppIcons.splitLeft,
           label: t('common.closeTheRightTab'),
           disabled:
             !!visitedViews?.length &&
@@ -445,14 +442,14 @@ watch(
         },
         {
           divided: true,
-          icon: 'ant-design:tag-outlined',
+          icon: AppIcons.tag,
           label: t('common.closeOther'),
           command: () => {
             closeOthersTags()
           }
         },
         {
-          icon: 'ant-design:line-outlined',
+          icon: AppIcons.line,
           label: t('common.closeAll'),
           command: () => {
             closeAllTags()
@@ -464,8 +461,8 @@ watch(
         :class="`${prefixCls}__tool`"
         class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer block"
       >
-        <Icon
-          icon="ant-design:setting-outlined"
+        <AppIcon
+          :icon="AppIcons.settings"
           color="var(--el-text-color-placeholder)"
           :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
         />
@@ -542,8 +539,8 @@ watch(
 
   &__item.is-active {
     color: var(--el-color-white);
-    background-color: var(--el-color-primary);
-    border: 1px solid var(--el-color-primary);
+    background-color: var(--app-primary-strong);
+    border: 1px solid var(--app-primary-strong);
     .@{prefix-cls}__item--close {
       :deep(svg) {
         color: var(--el-color-white) !important;
diff --git a/src/components/ThemeSwitch/src/ThemeSwitch.vue b/src/components/ThemeSwitch/src/ThemeSwitch.vue
index 5fdfb68..267effe 100644
--- a/src/components/ThemeSwitch/src/ThemeSwitch.vue
+++ b/src/components/ThemeSwitch/src/ThemeSwitch.vue
@@ -6,6 +6,7 @@ import { useAppStore } from '@/store/modules/app'
 import { ElSwitch } from 'element-plus'
 import { useIcon } from '@/hooks/web/useIcon'
 import { useDesign } from '@/hooks/web/useDesign'
+import { AppIcons } from '@/constants/icons'
 
 const { getPrefixCls } = useDesign()
 
@@ -13,18 +14,15 @@ const emit = defineEmits(['change'])
 
 const prefixCls = getPrefixCls('theme-switch')
 
-const Sun = useIcon({ icon: 'emojione-monotone:sun', color: '#fde047' })
+const Sun = useIcon({ icon: AppIcons.lightMode, color: '#fde047' })
 
-const CrescentMoon = useIcon({ icon: 'emojione-monotone:crescent-moon', color: '#fde047' })
+const CrescentMoon = useIcon({ icon: AppIcons.darkMode, color: '#fde047' })
 
 const appStore = useAppStore()
 
 // 初始化获取是否是暗黑主题
 const isDark = ref(appStore.getIsDark)
 
-// 设置switch的背景颜色
-const blackColor = 'var(--el-color-black)'
-
 const themeChange = (val: boolean) => {
   appStore.setIsDark(val)
   emit('change', val)
@@ -36,9 +34,6 @@ const themeChange = (val: boolean) => {
     :class="prefixCls"
     v-model="isDark"
     inline-prompt
-    :border-color="blackColor"
-    :inactive-color="blackColor"
-    :active-color="blackColor"
     :active-icon="Sun"
     :inactive-icon="CrescentMoon"
     @change="themeChange"
@@ -46,7 +41,20 @@ const themeChange = (val: boolean) => {
 </template>
 
 <style lang="less" scoped>
-:deep(.el-switch__core .el-switch__inner .is-icon) {
-  overflow: visible;
+.v-theme-switch {
+  :deep(.el-switch__core .el-switch__inner .is-icon) {
+    overflow: visible;
+  }
+
+  :deep(.el-switch__core) {
+    min-width: 44px;
+    background: var(--el-fill-color-darker);
+    border-color: var(--el-text-color-secondary);
+  }
+}
+
+.v-theme-switch.is-checked :deep(.el-switch__core) {
+  background: var(--app-primary-strong) !important;
+  border-color: var(--app-primary-strong) !important;
 }
 </style>
diff --git a/src/components/UserInfo/src/UserInfo.vue b/src/components/UserInfo/src/UserInfo.vue
index 8902785..f0a8ecc 100644
--- a/src/components/UserInfo/src/UserInfo.vue
+++ b/src/components/UserInfo/src/UserInfo.vue
@@ -9,6 +9,8 @@ import { ref, computed } from 'vue'
 import LockPage from './components/LockPage.vue'
 import { useLockStore } from '@/store/modules/lock'
 import { useUserStore } from '@/store/modules/user'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
 
 const userStore = useUserStore()
 
@@ -22,6 +24,12 @@ const prefixCls = getPrefixCls('user-info')
 
 const { t } = useI18n()
 
+const displayName = computed(
+  () => userStore.getUserInfo?.name || userStore.getUserInfo?.username || '-'
+)
+
+const avatarUrl = computed(() => userStore.getUserInfo?.avatar || '')
+
 const loginOut = () => {
   userStore.logoutConfirm()
 }
@@ -38,12 +46,19 @@ const lockScreen = () => {
   <ElDropdown class="custom-hover" :class="prefixCls" trigger="click">
     <div class="flex items-center">
       <img
-        src="@/assets/imgs/avatar.jpg"
+        v-if="avatarUrl"
+        :src="avatarUrl"
         alt=""
-        class="w-[calc(var(--logo-height)-25px)] rounded-[50%]"
+        class="w-[calc(var(--logo-height)-25px)] h-[calc(var(--logo-height)-25px)] rounded-[50%] object-cover"
       />
+      <span
+        v-else
+        class="w-[calc(var(--logo-height)-25px)] h-[calc(var(--logo-height)-25px)] rounded-[50%] flex items-center justify-center bg-[var(--el-fill-color)]"
+      >
+        <AppIcon :icon="AppIcons.person" />
+      </span>
       <span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]">{{
-        userStore.getUserInfo?.username
+        displayName
       }}</span>
     </div>
     <template #dropdown>
diff --git a/src/components/UserInfo/src/components/LockDialog.vue b/src/components/UserInfo/src/components/LockDialog.vue
index ed3606e..2aa2d51 100644
--- a/src/components/UserInfo/src/components/LockDialog.vue
+++ b/src/components/UserInfo/src/components/LockDialog.vue
@@ -12,6 +12,9 @@ import { FormSchema } from '@/components/Form'
 import { ElButton } from 'element-plus'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useLockStore } from '@/store/modules/lock'
+import { useUserStore } from '@/store/modules/user'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
 
 const { getPrefixCls } = useDesign()
 const prefixCls = getPrefixCls('lock-dialog')
@@ -21,6 +24,12 @@ const { required } = useValidator()
 const { t } = useI18n()
 
 const lockStore = useLockStore()
+const userStore = useUserStore()
+
+const displayName = computed(
+  () => userStore.getUserInfo?.name || userStore.getUserInfo?.username || '-'
+)
+const avatarUrl = computed(() => userStore.getUserInfo?.avatar || '')
 
 const props = defineProps({
   modelValue: {
@@ -84,8 +93,18 @@ const handleLock = async () => {
     :title="dialogTitle"
   >
     <div class="flex flex-col items-center">
-      <img src="@/assets/imgs/avatar.jpg" alt="" class="w-70px h-70px rounded-[50%]" />
-      <span class="text-14px my-10px text-[var(--top-header-text-color)]">Archer</span>
+      <img
+        v-if="avatarUrl"
+        :src="avatarUrl"
+        alt=""
+        class="w-70px h-70px rounded-[50%] object-cover"
+      />
+      <span
+        v-else
+        class="w-70px h-70px rounded-[50%] flex items-center justify-center bg-[var(--el-fill-color)]"
+        ><AppIcon :icon="AppIcons.person" :size="30"
+      /></span>
+      <span class="text-14px my-10px text-[var(--top-header-text-color)]">{{ displayName }}</span>
     </div>
     <Form :is-col="false" :schema="schema" :rules="rules" @register="formRegister" />
     <template #footer>
diff --git a/src/components/UserInfo/src/components/LockPage.vue b/src/components/UserInfo/src/components/LockPage.vue
index bc3d14f..c1722eb 100644
--- a/src/components/UserInfo/src/components/LockPage.vue
+++ b/src/components/UserInfo/src/components/LockPage.vue
@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { ElInput, ElButton } from 'element-plus'
 import { resetRouter } from '@/router'
 import { useRouter } from 'vue-router'
@@ -10,11 +10,14 @@ import { useLockStore } from '@/store/modules/lock'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useNow } from '@/hooks/web/useNow'
 import { useDesign } from '@/hooks/web/useDesign'
-import { Icon } from '@/components/Icon'
+import { AppIcon } from '@/components/AppIcon'
 import { loginOutApi } from '@/api/login'
 import { useTagsViewStore } from '@/store/modules/tagsView'
+import { AppIcons } from '@/constants/icons'
+import { useUserStore } from '@/store/modules/user'
 
 const tagsViewStore = useTagsViewStore()
+const userStore = useUserStore()
 
 const { clear } = useStorage()
 
@@ -34,6 +37,11 @@ const { hour, month, minute, meridiem, year, day, week } = useNow(true)
 
 const { t } = useI18n()
 
+const displayName = computed(
+  () => userStore.getUserInfo?.name || userStore.getUserInfo?.username || '-'
+)
+const avatarUrl = computed(() => userStore.getUserInfo?.avatar || '')
+
 // 解锁
 async function unLock() {
   if (!password.value) {
@@ -77,7 +85,7 @@ function handleShowForm(show = false) {
       @click="handleShowForm(false)"
       v-show="showDate"
     >
-      <Icon icon="ep:lock" />
+      <AppIcon :icon="AppIcons.lock" />
       <span>{{ t('lock.unlock') }}</span>
     </div>
 
@@ -96,8 +104,20 @@ function handleShowForm(show = false) {
       <div :class="`${prefixCls}-entry`" v-show="!showDate">
         <div :class="`${prefixCls}-entry-content`">
           <div class="flex flex-col items-center">
-            <img src="@/assets/imgs/avatar.jpg" alt="" class="w-70px h-70px rounded-[50%]" />
-            <span class="text-14px my-10px text-[var(--logo-title-text-color)]">Archer</span>
+            <img
+              v-if="avatarUrl"
+              :src="avatarUrl"
+              alt=""
+              class="w-70px h-70px rounded-[50%] object-cover"
+            />
+            <span
+              v-else
+              class="w-70px h-70px rounded-[50%] flex items-center justify-center bg-[var(--el-fill-color)]"
+              ><AppIcon :icon="AppIcons.person" :size="30"
+            /></span>
+            <span class="text-14px my-10px text-[var(--logo-title-text-color)]">{{
+              displayName
+            }}</span>
           </div>
           <ElInput
             type="password"
diff --git a/src/components/VideoPlayerViewer/src/VideoPlayerViewer.vue b/src/components/VideoPlayerViewer/src/VideoPlayerViewer.vue
index dd14313..926d3ae 100644
--- a/src/components/VideoPlayerViewer/src/VideoPlayerViewer.vue
+++ b/src/components/VideoPlayerViewer/src/VideoPlayerViewer.vue
@@ -4,7 +4,8 @@
 import { VideoPlayer } from '@/components/VideoPlayer'
 import { ElOverlay } from 'element-plus'
 import { ref, nextTick } from 'vue'
-import { Icon } from '@/components/Icon'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
 
 const props = defineProps({
   show: {
@@ -43,7 +44,7 @@ const close = async () => {
         class="w-44px h-44px color-[#fff] bg-[var(--el-text-color-regular)] rounded-full border-[#fff] flex justify-center items-center cursor-pointer absolute top-40px right-40px"
         @click="close"
       >
-        <Icon icon="ep:close" :size="24" />
+        <AppIcon :icon="AppIcons.close" :size="24" />
       </div>
       <VideoPlayer :url="url" :poster="poster" />
     </div>
diff --git a/src/components/index.ts b/src/components/index.ts
index 29af216..414e576 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,9 +2,11 @@
 
 import type { App } from 'vue'
 import { Icon } from './Icon'
+import { AppIcon } from './AppIcon'
 import { BaseButton } from './Button'
 
 export const setupGlobCom = (app: App<Element>): void => {
   app.component('Icon', Icon)
+  app.component('AppIcon', AppIcon)
   app.component('BaseButton', BaseButton)
 }
diff --git a/src/constants/icons.ts b/src/constants/icons.ts
new file mode 100644
index 0000000..e1b530c
--- /dev/null
+++ b/src/constants/icons.ts
@@ -0,0 +1,103 @@
+// Author: fruit.com.cn
+
+/**
+ * 后台统一图标语义表。所有值都来自 material-symbols-rounded。
+ */
+export const AppIcons = {
+  menu: 'material-symbols:menu-rounded',
+  menuOpen: 'material-symbols:menu-open-rounded',
+  dashboard: 'material-symbols:dashboard-rounded',
+  content: 'material-symbols:video-library-rounded',
+  settings: 'material-symbols:settings-rounded',
+  group: 'material-symbols:group-rounded',
+  movieEdit: 'material-symbols:movie-edit-rounded',
+  policy: 'material-symbols:policy-rounded',
+  payments: 'material-symbols:payments-rounded',
+  monitoring: 'material-symbols:monitoring-rounded',
+  videoCameraFront: 'material-symbols:video-camera-front-rounded',
+  campaign: 'material-symbols:campaign-rounded',
+  fullscreen: 'material-symbols:fullscreen-rounded',
+  fullscreenExit: 'material-symbols:fullscreen-exit-rounded',
+  formatSize: 'material-symbols:format-size-rounded',
+  language: 'material-symbols:translate-rounded',
+  darkMode: 'material-symbols:dark-mode-rounded',
+  lightMode: 'material-symbols:light-mode-rounded',
+  refresh: 'material-symbols:refresh-rounded',
+  restart: 'material-symbols:restart-alt-rounded',
+  close: 'material-symbols:close-rounded',
+  chevronLeft: 'material-symbols:chevron-left-rounded',
+  chevronRight: 'material-symbols:chevron-right-rounded',
+  chevronDown: 'material-symbols:keyboard-arrow-down-rounded',
+  chevronUp: 'material-symbols:keyboard-arrow-up-rounded',
+  search: 'material-symbols:search-rounded',
+  viewColumn: 'material-symbols:combine-columns-rounded',
+  help: 'material-symbols:help-rounded',
+  add: 'material-symbols:add-rounded',
+  edit: 'material-symbols:edit-rounded',
+  delete: 'material-symbols:delete-rounded',
+  upload: 'material-symbols:upload-rounded',
+  download: 'material-symbols:download-rounded',
+  visibility: 'material-symbols:visibility-rounded',
+  arrowUp: 'material-symbols:arrow-upward-rounded',
+  arrowDown: 'material-symbols:arrow-downward-rounded',
+  arrowBack: 'material-symbols:arrow-back-rounded',
+  arrowForward: 'material-symbols:arrow-forward-rounded',
+  check: 'material-symbols:check-rounded',
+  checkCircle: 'material-symbols:check-circle-rounded',
+  cancel: 'material-symbols:cancel-rounded',
+  lock: 'material-symbols:lock-person-rounded',
+  logout: 'material-symbols:logout-rounded',
+  person: 'material-symbols:person-rounded',
+  clock: 'material-symbols:schedule-rounded',
+  videoPlay: 'material-symbols:smart-display-rounded',
+  drag: 'material-symbols:drag-handle-rounded',
+  tag: 'material-symbols:label-rounded',
+  line: 'material-symbols:horizontal-rule-rounded',
+  splitLeft: 'material-symbols:split-scene-left-rounded',
+  splitRight: 'material-symbols:split-scene-right-rounded',
+  warning: 'material-symbols:warning-rounded',
+  error: 'material-symbols:error-rounded',
+  info: 'material-symbols:info-rounded'
+} as const
+
+/** 菜单管理提供的合法图标候选。 */
+export const MenuIconOptions = [
+  AppIcons.dashboard,
+  AppIcons.content,
+  AppIcons.settings,
+  AppIcons.group,
+  AppIcons.movieEdit,
+  AppIcons.policy,
+  AppIcons.payments,
+  AppIcons.monitoring,
+  AppIcons.videoCameraFront,
+  AppIcons.campaign
+] as const
+
+const legacyIconAliases: Record<string, string> = {
+  Document: AppIcons.content,
+  DataAnalysis: AppIcons.monitoring,
+  Picture: AppIcons.content,
+  User: AppIcons.group,
+  Setting: AppIcons.settings,
+  VideoCamera: AppIcons.content,
+  Menu: AppIcons.menu,
+  Grid: AppIcons.dashboard,
+  'ep:setting': AppIcons.settings,
+  'ep:user': AppIcons.group,
+  'ep:user-filled': AppIcons.group,
+  'ep:chat-dot-round': AppIcons.policy,
+  'ep:coin': AppIcons.payments,
+  'ep:data-line': AppIcons.monitoring,
+  'ep:film': AppIcons.videoCameraFront,
+  'ep:bell': AppIcons.campaign,
+  'ep:video-camera': AppIcons.content,
+  'ant-design:dashboard-filled': AppIcons.dashboard
+}
+
+/** 兼容历史短名与旧 Iconify 名，统一返回 Material Symbols Rounded。 */
+export function normalizeAppIcon(icon?: string): string {
+  if (!icon) return AppIcons.menu
+  if (icon.startsWith('material-symbols:') || icon.startsWith('svg-icon:')) return icon
+  return legacyIconAliases[icon] || AppIcons.menu
+}
diff --git a/src/hooks/web/useIcon.ts b/src/hooks/web/useIcon.ts
index a8f6eb4..ba0a7c5 100644
--- a/src/hooks/web/useIcon.ts
+++ b/src/hooks/web/useIcon.ts
@@ -2,8 +2,9 @@
 
 import { h } from 'vue'
 import type { VNode } from 'vue'
-import { Icon, IconTypes } from '@/components/Icon'
+import { AppIcon } from '@/components/AppIcon'
+import type { IconTypes } from '@/components/Icon'
 
 export const useIcon = (props: IconTypes): VNode => {
-  return h(Icon, props)
+  return h(AppIcon, props)
 }
diff --git a/src/layout/components/ToolHeader.vue b/src/layout/components/ToolHeader.vue
index 78106fb..44ee8c8 100644
--- a/src/layout/components/ToolHeader.vue
+++ b/src/layout/components/ToolHeader.vue
@@ -56,14 +56,20 @@ export default defineComponent({
         ) : undefined}
         <div class="h-full flex items-center">
           {screenfull.value ? (
-            <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
+            <Screenfull
+              class="<md:hidden custom-hover"
+              color="var(--top-header-text-color)"
+            ></Screenfull>
           ) : undefined}
           {size.value ? (
-            <SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
+            <SizeDropdown
+              class="<md:hidden custom-hover"
+              color="var(--top-header-text-color)"
+            ></SizeDropdown>
           ) : undefined}
           {locale.value ? (
             <LocaleDropdown
-              class="custom-hover"
+              class="<sm:hidden custom-hover"
               color="var(--top-header-text-color)"
             ></LocaleDropdown>
           ) : undefined}
@@ -79,6 +85,20 @@ export default defineComponent({
 @prefix-cls: ~'@{namespace}-tool-header';
 
 .@{prefix-cls} {
+  min-width: 0;
+  gap: 8px;
   transition: left var(--transition-time-02);
+
+  :deep(.el-dropdown),
+  :deep(.v-user-info) {
+    flex-shrink: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .@{prefix-cls} {
+    padding-right: 8px;
+    padding-left: 8px;
+  }
 }
 </style>
diff --git a/src/locales/en.ts b/src/locales/en.ts
index fc9c28d..08800b5 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -86,6 +86,7 @@ export default {
     cutMenu: 'Cut Menu',
     copy: 'Copy',
     clearAndReset: 'Clear cache and reset',
+    clearCacheMessage: 'Clear local cache and reload the admin console?',
     copySuccess: 'Copy success',
     copyFailed: 'Copy failed',
     footer: 'Footer',
@@ -103,6 +104,7 @@ export default {
   },
   login: {
     welcome: 'Short-drama workspace',
+    consoleLabel: 'Content Operations',
     message: 'Manage dramas, episodes, publishing, and access.',
     hint: 'Sign in with an admin account',
     noAccount: 'No account yet?',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 6db251d..1c8b3f7 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -86,6 +86,7 @@ export default {
     cutMenu: '切割菜单',
     copy: '拷贝',
     clearAndReset: '清除缓存并且重置',
+    clearCacheMessage: '确认清除本地缓存并重新加载后台吗？',
     copySuccess: '拷贝成功',
     copyFailed: '拷贝失败',
     footer: '页脚',
@@ -103,6 +104,7 @@ export default {
   },
   login: {
     welcome: '短剧内容管理',
+    consoleLabel: '内容运营后台',
     message: '管理短剧、剧集、发布状态和后台权限。',
     hint: '使用管理员账号进入工作台',
     noAccount: '还没有账号？',
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 56b0df6..51c8778 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -75,9 +75,9 @@ export const useAppStore = defineStore('app', {
         // 左侧菜单浅色背景颜色
         leftMenuBgLightColor: '#0f2438',
         // 左侧菜单选中背景颜色
-        leftMenuBgActiveColor: 'var(--el-color-primary)',
+        leftMenuBgActiveColor: 'var(--app-primary-strong)',
         // 左侧菜单收起选中背景颜色
-        leftMenuCollapseBgActiveColor: 'var(--el-color-primary)',
+        leftMenuCollapseBgActiveColor: 'var(--app-primary-strong)',
         // 左侧菜单字体颜色
         leftMenuTextColor: '#bfcbd9',
         // 左侧菜单选中字体颜色
@@ -288,11 +288,11 @@ export const useAppStore = defineStore('app', {
         leftMenuBgLightColor: isDarkColor ? lighten(color!, 6) : color,
         // 左侧菜单选中背景颜色
         leftMenuBgActiveColor: isDarkColor
-          ? 'var(--el-color-primary)'
+          ? 'var(--app-primary-strong)'
           : hexToRGB(unref(primaryColor), 0.1),
         // 左侧菜单收起选中背景颜色
         leftMenuCollapseBgActiveColor: isDarkColor
-          ? 'var(--el-color-primary)'
+          ? 'var(--app-primary-strong)'
           : hexToRGB(unref(primaryColor), 0.1),
         // 左侧菜单字体颜色
         leftMenuTextColor: isDarkColor ? '#bfcbd9' : '#333',
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index c8512f0..43590d1 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -27,7 +27,7 @@ export const useUserStore = defineStore('user', {
       token: '',
       roleRouters: undefined,
       // 记住我
-      rememberMe: true,
+      rememberMe: false,
       loginInfo: undefined
     }
   },
@@ -87,6 +87,8 @@ export const useUserStore = defineStore('user', {
       this.setToken('')
       this.setUserInfo(undefined)
       this.setRoleRouters([])
+      this.setLoginInfo(undefined)
+      this.setRememberMe(false)
       tagsViewStore.delAllViews()
       // 菜单/路由一起清：否则换账号后 permissionStore 里还是上一个账号的路由表
       permissionStore.clearRoutes()
@@ -102,7 +104,17 @@ export const useUserStore = defineStore('user', {
       this.loginInfo = loginInfo
     }
   },
-  persist: true
+  persist: {
+    afterRestore: (context) => {
+      const loginInfo = context.store.loginInfo as
+        (UserLoginType & { password?: string }) | undefined
+      if (loginInfo?.password !== undefined) {
+        context.store.setLoginInfo(
+          loginInfo.username ? { username: loginInfo.username } : undefined
+        )
+      }
+    }
+  }
 })
 
 export const useUserStoreWithOut = () => {
diff --git a/src/styles/business/banner-management.css b/src/styles/business/banner-management.css
index fb5bf08..e1178ba 100644
--- a/src/styles/business/banner-management.css
+++ b/src/styles/business/banner-management.css
@@ -4,7 +4,7 @@
   height: 90px;
   object-fit: cover;
   border: 1px solid var(--el-border-color-lighter);
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
   background: #f0f2f4 !important;
 }
 
@@ -13,7 +13,7 @@
   place-content: center;
   width: 160px;
   height: 90px;
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
   background: #f0f2f4 !important;
   color: #7e8791;
   font-size: 12px;
@@ -37,7 +37,7 @@
   flex: 0 0 200px;
   object-fit: contain;
   border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
+  border-radius: var(--app-radius-md);
   background: #f0f2f4 !important;
 }
 
diff --git a/src/styles/business/console.css b/src/styles/business/console.css
index 1352abb..d243597 100644
--- a/src/styles/business/console.css
+++ b/src/styles/business/console.css
@@ -116,7 +116,7 @@ section .console-hint.el-alert {
   min-height: 74px;
   padding: 12px 14px;
   border: 1px solid #e6e8eb;
-  border-radius: 6px;
+  border-radius: var(--app-radius-md);
   background: #fff;
 }
 
diff --git a/src/styles/business/creator-center.css b/src/styles/business/creator-center.css
index 0f0b3af..7691cb6 100644
--- a/src/styles/business/creator-center.css
+++ b/src/styles/business/creator-center.css
@@ -51,7 +51,7 @@
   width: 34px;
   height: 46px;
   overflow: hidden;
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
   background: #eef0f5;
   color: #9a97a8;
   font-size: 14px;
@@ -193,7 +193,7 @@
   height: 76px;
   overflow: hidden;
   border: 1px solid #e6e8eb;
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
   background: #fafbfc;
   color: #9a97a8;
   font-size: 12px;
@@ -205,7 +205,7 @@
   width: 48px;
   height: 30px;
   overflow: hidden;
-  border-radius: 3px;
+  border-radius: var(--app-radius-sm);
   background: #eef0f5;
   color: #9a97a8;
   font-size: 12px;
@@ -226,7 +226,7 @@
   padding: 10px 14px;
   margin-bottom: 14px;
   border: 1px solid #f0e6cf;
-  border-radius: 6px;
+  border-radius: var(--app-radius-md);
   background: #fdf9ef;
 }
 
diff --git a/src/styles/business/dark.css b/src/styles/business/dark.css
index 8d213a9..c1c3f6a 100644
--- a/src/styles/business/dark.css
+++ b/src/styles/business/dark.css
@@ -3,7 +3,6 @@ html.dark .panel-heading h2,
 html.dark .episode-toolbar h2,
 html.dark .stat-value,
 html.dark .drama-cell b,
-html.dark .brand b,
 html.dark .role-card,
 html.dark .cover-card-info b {
   color: var(--el-text-color-primary);
@@ -22,19 +21,13 @@ html.dark .table-result-count {
 
 html.dark .stat-card,
 html.dark .panel,
-html.dark .role-card,
-html.dark .topbar,
-html.dark .sidebar {
+html.dark .role-card {
   background: var(--el-bg-color-overlay);
   border-color: var(--el-border-color-light);
 }
 
 html.dark .stat-icon,
-html.dark .role-icon,
-html.dark .help-icon,
-html.dark .workspace-avatar,
-html.dark .profile-avatar,
-html.dark .top-avatar {
+html.dark .role-icon {
   background: rgb(64 158 255 / 16%) !important;
   color: var(--el-color-primary) !important;
 }
@@ -128,3 +121,33 @@ html.dark .el-tag.status-badge.is-offline {
   border-color: rgba(245, 108, 108, 0.45) !important;
   color: #f3a6a6 !important;
 }
+
+.v-tool-header {
+  color: var(--top-header-text-color);
+}
+
+.v-tags-view {
+  background: var(--el-bg-color);
+  border-color: var(--el-border-color-lighter);
+}
+
+.v-tags-view__item--close {
+  color: var(--el-text-color-secondary) !important;
+}
+
+html.dark .v-tool-header,
+html.dark .v-tags-view {
+  background: var(--el-bg-color-overlay);
+  border-color: var(--el-border-color);
+}
+
+html.dark .v-tags-view__item {
+  color: var(--el-text-color-regular);
+}
+
+html.dark #v-menu .el-menu-item.is-active,
+html.dark #v-menu .el-sub-menu.is-active > .el-sub-menu__title,
+html.dark .v-tags-view__item.is-active {
+  background-color: var(--app-primary-strong) !important;
+  border-color: var(--app-primary-strong) !important;
+}
diff --git a/src/styles/business/drama-management.css b/src/styles/business/drama-management.css
index e1cf3ea..7363c62 100644
--- a/src/styles/business/drama-management.css
+++ b/src/styles/business/drama-management.css
@@ -46,7 +46,7 @@
   padding: 0 10px !important;
   font-size: 13px !important;
   font-weight: 500 !important;
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
 }
 
 /* Element Plus 默认给相邻按钮加 12px 外边距，会和这里的 gap 叠加导致换行 */
@@ -64,7 +64,7 @@
   width: 44px;
   height: 56px;
   flex: 0 0 44px;
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
   object-fit: cover;
 }
 .drama-cell .drama-cover {
@@ -109,7 +109,7 @@
   flex: 0 0 84px;
   object-fit: cover;
   border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
+  border-radius: var(--app-radius-md);
   background: #f0f2f4 !important;
 }
 .dark .form-cover-preview {
@@ -134,7 +134,7 @@
   flex: 0 0 200px;
   object-fit: contain;
   border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
+  border-radius: var(--app-radius-md);
   background: #000 !important;
 }
 
@@ -144,7 +144,7 @@
   width: 100%;
   max-height: 60vh;
   object-fit: contain;
-  border-radius: 8px;
+  border-radius: var(--app-radius-md);
   background: #000 !important;
 }
 
@@ -156,7 +156,7 @@
   object-fit: contain;
   cursor: pointer;
   border: 1px solid var(--el-border-color-lighter);
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
   background: #000 !important;
 }
 
@@ -231,10 +231,10 @@
   color: #c0c6cf;
 }
 .table-actions .el-button--primary {
-  --el-button-bg-color: #409eff;
-  --el-button-border-color: #409eff;
-  --el-button-hover-bg-color: #79bbff;
-  --el-button-hover-border-color: #79bbff;
+  --el-button-bg-color: var(--el-color-primary);
+  --el-button-border-color: var(--el-color-primary);
+  --el-button-hover-bg-color: var(--el-color-primary-light-3);
+  --el-button-hover-border-color: var(--el-color-primary-light-3);
 }
 .table-actions .el-button--success {
   --el-button-bg-color: #4d866a;
@@ -259,7 +259,7 @@
   font-size: 13px !important;
   --el-pagination-font-size: 13px;
   --el-pagination-button-bg-color: #f1f3f6;
-  --el-pagination-hover-color: #409eff;
+  --el-pagination-hover-color: var(--el-color-primary);
   --el-pagination-button-color: #4c5561;
   gap: 5px;
 }
diff --git a/src/styles/business/operation-log.css b/src/styles/business/operation-log.css
index e3bd0c8..ac51f95 100644
--- a/src/styles/business/operation-log.css
+++ b/src/styles/business/operation-log.css
@@ -24,7 +24,7 @@
   word-break: break-all;
   background: #f6f7f9 !important;
   border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
+  border-radius: var(--app-radius-md);
 }
 
 .dark .log-json {
diff --git a/src/styles/business/style.css b/src/styles/business/style.css
index 471fa01..9418b25 100644
--- a/src/styles/business/style.css
+++ b/src/styles/business/style.css
@@ -1,316 +1,12 @@
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
-:root {
-  font-family: 'DM Sans', 'Noto Sans SC', sans-serif;
-  color: var(--el-text-color-primary);
-  background: var(--el-bg-color-page);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  font-optical-sizing: auto;
-  font-weight: 400;
-  --purple: #409eff;
-  --muted: #9695a8;
-  --line: #eeedf3;
-}
 * {
   box-sizing: border-box;
 }
 body {
   margin: 0;
-  min-width: 980px;
+  min-width: 0;
   min-height: 100vh;
 }
-.app-shell {
-  min-height: 100vh;
-}
-.sidebar {
-  width: 250px;
-  position: fixed;
-  inset: 0 auto 0 0;
-  background: #fff;
-  border-right: 1px solid #eeedf4;
-  padding: 27px 17px 16px;
-  display: flex;
-  flex-direction: column;
-  z-index: 4;
-}
-.brand {
-  display: flex;
-  align-items: center;
-  gap: 11px;
-  padding: 0 9px 28px;
-}
-.brand-mark {
-  width: 32px;
-  height: 32px;
-  border-radius: 10px;
-  background: #409eff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 2px;
-  transform: rotate(-8deg);
-}
-.brand-mark span {
-  width: 4px;
-  background: white;
-  border-radius: 4px;
-  transform: skew(-15deg);
-}
-.brand-mark span:nth-child(1) {
-  height: 11px;
-  opacity: 0.72;
-}
-.brand-mark span:nth-child(2) {
-  height: 18px;
-}
-.brand-mark span:nth-child(3) {
-  height: 13px;
-  opacity: 0.85;
-}
-.brand b {
-  display: block;
-  font:
-    800 18px Manrope,
-    sans-serif;
-  letter-spacing: -0.8px;
-  color: #242139;
-}
-.brand small {
-  font-size: 8px;
-  letter-spacing: 1.5px;
-  color: #a3a1b1;
-  display: block;
-  margin-top: 1px;
-}
-.workspace {
-  height: 58px;
-  border: 1px solid #efedf4;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  padding: 0 10px;
-  margin-bottom: 27px;
-  gap: 10px;
-}
-.workspace-avatar,
-.profile-avatar,
-.top-avatar {
-  display: grid;
-  place-items: center;
-  background: #ecf5ff;
-  color: #409eff;
-  font-weight: 700;
-}
-.workspace-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-}
-.workspace-copy {
-  flex: 1;
-}
-.workspace-copy b,
-.workspace-copy small {
-  display: block;
-}
-.workspace-copy b {
-  font-size: 11px;
-}
-.workspace-copy small {
-  color: #a09eae;
-  font-size: 10px;
-  margin-top: 3px;
-}
-.workspace > .el-icon {
-  color: #aaa8b7;
-  font-size: 13px;
-}
-.nav-label {
-  padding: 0 11px 10px;
-  color: #aaa8b7;
-  font-size: 10px;
-  letter-spacing: 0.5px;
-}
-.side-menu {
-  border: 0 !important;
-}
-.side-menu .el-menu-item {
-  height: 43px;
-  line-height: 43px;
-  border-radius: 8px;
-  margin: 2px 0;
-  color: #777589;
-  font-size: 12px;
-  padding: 0 11px !important;
-}
-.side-menu .el-menu-item .el-icon {
-  font-size: 16px;
-  margin-right: 12px;
-}
-.side-menu .el-menu-item:hover {
-  background: #ecf5ff;
-  color: #409eff;
-}
-.side-menu .el-menu-item.is-active {
-  background: #ecf5ff;
-  color: #409eff;
-  font-weight: 600;
-}
-.menu-count {
-  margin-left: auto;
-  border-radius: 10px;
-  background: #ecf5ff;
-  color: #79bbff;
-  padding: 2px 7px;
-  font-size: 10px;
-}
-.access-label {
-  margin-top: 27px;
-}
-.sidebar-bottom {
-  margin-top: auto;
-}
-.help-card {
-  background: #ecf5ff;
-  border: 1px solid #ecf5ff;
-  border-radius: 10px;
-  padding: 13px 13px 14px;
-  margin: 0 2px 17px;
-}
-.help-icon {
-  width: 23px;
-  height: 23px;
-  display: grid;
-  place-items: center;
-  background: #d9ecff;
-  border-radius: 7px;
-  color: #409eff;
-  margin-bottom: 9px;
-  font-size: 13px;
-}
-.help-card b {
-  font-size: 11px;
-}
-.help-card p {
-  font-size: 10px;
-  line-height: 1.6;
-  color: #9290a2;
-  margin: 5px 0 9px;
-}
-.help-card a {
-  font-size: 10px;
-  color: #409eff;
-  font-weight: 600;
-}
-.help-card a span {
-  margin-left: 4px;
-}
-.user-profile {
-  border-top: 1px solid #f0eff4;
-  padding: 15px 4px 0;
-  display: flex;
-  align-items: center;
-  gap: 9px;
-}
-.profile-avatar {
-  width: 33px;
-  height: 33px;
-  border-radius: 50%;
-  font-size: 12px;
-}
-.profile-info {
-  flex: 1;
-}
-.profile-info b,
-.profile-info small {
-  display: block;
-}
-.profile-info b {
-  font-size: 11px;
-}
-.profile-info small {
-  font-size: 10px;
-  color: #a09eae;
-  margin-top: 3px;
-}
-.user-profile > .el-icon {
-  color: #aaa8b7;
-  transform: rotate(90deg);
-}
-.main-area {
-  margin-left: 250px;
-  min-height: 100vh;
-}
-.topbar {
-  height: 64px;
-  background: rgba(255, 255, 255, 0.92);
-  border-bottom: 1px solid #eeedf4;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 39px;
-  position: sticky;
-  top: 0;
-  z-index: 3;
-}
-.breadcrumb {
-  font-size: 11px;
-  color: #aaa8b6;
-}
-.breadcrumb .slash {
-  padding: 0 10px;
-  color: #d4d2dd;
-}
-.breadcrumb b {
-  font-weight: 600;
-  color: #555367;
-}
-.top-actions {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-}
-.environment {
-  border: 1px solid #eeedf2;
-  border-radius: 15px;
-  padding: 6px 10px;
-  font-size: 10px;
-  color: #777589;
-}
-.environment i {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #62c491;
-  margin-right: 6px;
-}
-.icon-button {
-  position: relative;
-  color: #777589;
-}
-.notification-dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: #ef7d85;
-  position: absolute;
-  right: 6px;
-  top: 5px;
-  border: 1px solid white;
-}
-.top-avatar {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  font-size: 11px;
-}
-.page-content {
-  max-width: 1440px;
-  margin: 0 auto;
-  padding: 35px 40px 46px;
-}
-.page-heading {
+ .page-heading {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -323,7 +19,7 @@ body {
   font-weight: 600;
 }
 .eyebrow span {
-  color: #79bbff;
+  color: var(--el-color-primary-light-3);
   margin-left: 5px;
 }
 .page-heading h1 {
@@ -344,17 +40,17 @@ body {
   font-size: 20px;
 }
 .primary-button {
-  background: #409eff !important;
-  border-color: #409eff !important;
-  border-radius: 7px !important;
+  background: var(--el-color-primary) !important;
+  border-color: var(--el-color-primary) !important;
+  border-radius: var(--app-radius-md) !important;
   font-size: 11px !important;
   font-weight: 600 !important;
   height: 37px !important;
   padding: 0 15px !important;
-  box-shadow: 0 4px 10px #409eff22;
+  box-shadow: 0 4px 10px color-mix(in srgb, var(--el-color-primary) 13%, transparent);
 }
 .primary-button:hover {
-  background: #337ecc !important;
+  background: var(--el-color-primary-dark-2) !important;
 }
 .primary-button .el-icon {
   margin-right: 6px;
@@ -369,7 +65,7 @@ body {
 .panel {
   background: #fff;
   border: 1px solid #efedf3;
-  border-radius: 10px;
+  border-radius: var(--app-radius-md);
 }
 .stat-card {
   padding: 16px 17px 13px;
@@ -387,12 +83,12 @@ body {
   height: 27px;
   display: grid;
   place-items: center;
-  border-radius: 8px;
+  border-radius: var(--app-radius-md);
   font-size: 13px;
 }
 .lilac {
-  background: #ecf5ff;
-  color: #409eff;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
 }
 .blush {
   background: #fff0f2;
@@ -435,7 +131,7 @@ body {
   color: #49b786;
   background: #eef9f4;
   padding: 3px 5px;
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
 }
 .neutral {
   color: #aaa8b6;
@@ -565,9 +261,9 @@ body {
 .muted-count {
   display: inline-grid;
   place-items: center;
-  border-radius: 10px;
-  background: #ecf5ff;
-  color: #409eff;
+  border-radius: var(--app-radius-md);
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
   font:
     600 9px 'DM Sans',
     sans-serif;
@@ -578,7 +274,7 @@ body {
 }
 .view-all {
   font-size: 10px !important;
-  color: #409eff !important;
+  color: var(--el-color-primary) !important;
 }
 .view-all span {
   margin-left: 5px;
@@ -599,7 +295,7 @@ body {
 .review-art {
   width: 34px;
   height: 37px;
-  border-radius: 6px;
+  border-radius: var(--app-radius-md);
   display: grid;
   place-items: center;
   font-size: 17px;
@@ -608,7 +304,7 @@ body {
   background: #fff0ed;
 }
 .art-two {
-  background: #ecf5ff;
+  background: var(--el-color-primary-light-9);
 }
 .art-three {
   background: #eaf6f7;
@@ -661,7 +357,7 @@ body {
   padding: 10px 11px;
 }
 .drama-table th:first-child {
-  border-radius: 5px 0 0 5px;
+  border-radius: var(--app-radius-sm) 0 0 5px;
   padding-left: 12px;
 }
 .drama-table th:last-child {
@@ -689,7 +385,7 @@ body {
 .drama-cover {
   width: 31px;
   height: 38px;
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
   display: grid;
   place-items: center;
   font-size: 16px;
@@ -700,7 +396,7 @@ body {
   background: linear-gradient(145deg, #f8d6d7, #ffece4);
 }
 .purple {
-  background: linear-gradient(145deg, #d9ecff, #ecf5ff);
+  background: linear-gradient(145deg, var(--el-color-primary-light-8), var(--el-color-primary-light-9));
 }
 .peach {
   background: linear-gradient(145deg, #ffd6bd, #fff0d7);
@@ -713,7 +409,7 @@ body {
 }
 .row-action {
   font-size: 9px !important;
-  color: #409eff !important;
+  color: var(--el-color-primary) !important;
 }
 .inner-heading {
   margin-bottom: 24px;
@@ -744,11 +440,11 @@ body {
 }
 .library-toolbar .el-tabs__item.is-active,
 .cover-toolbar .el-tabs__item.is-active {
-  color: #409eff;
+  color: var(--el-color-primary);
 }
 .library-toolbar .el-tabs__active-bar,
 .cover-toolbar .el-tabs__active-bar {
-  background: #409eff;
+  background: var(--el-color-primary);
 }
 .toolbar-filters {
   display: flex;
@@ -795,7 +491,7 @@ body {
 }
 .pagination .el-pagination {
   --el-pagination-button-bg-color: #fff;
-  --el-pagination-hover-color: #409eff;
+  --el-pagination-hover-color: var(--el-color-primary);
 }
 .pagination .el-pager li {
   font-size: 10px;
@@ -818,7 +514,7 @@ body {
   width: 48px;
   height: 58px;
   font-size: 22px;
-  border-radius: 6px;
+  border-radius: var(--app-radius-md);
 }
 .episode-context-copy {
   margin-left: 12px;
@@ -854,7 +550,7 @@ body {
   padding: 20px 0 14px;
 }
 .secondary-button {
-  border-radius: 6px !important;
+  border-radius: var(--app-radius-md) !important;
   border-color: #eae8f0 !important;
   color: #6e6c80 !important;
   font-size: 10px !important;
@@ -866,7 +562,7 @@ body {
 .episode-row {
   height: 69px;
   border: 1px solid #efedf4;
-  border-radius: 7px;
+  border-radius: var(--app-radius-md);
   display: flex;
   align-items: center;
   gap: 12px;
@@ -881,7 +577,7 @@ body {
 .episode-thumb {
   width: 62px;
   height: 45px;
-  border-radius: 5px;
+  border-radius: var(--app-radius-sm);
   background: linear-gradient(135deg, #29273b, #55516e);
   display: grid;
   place-items: center;
@@ -946,7 +642,7 @@ body {
 .add-cover {
   background: white;
   border: 1px solid #eeedf3;
-  border-radius: 9px;
+  border-radius: var(--app-radius-md);
   overflow: hidden;
 }
 .poster-art {
@@ -1023,7 +719,7 @@ body {
   border: 1px solid #ffffff8a;
   padding: 4px 6px;
   font-size: 8px;
-  border-radius: 3px;
+  border-radius: var(--app-radius-sm);
 }
 .cover-card-info {
   padding: 10px;
@@ -1063,8 +759,8 @@ body {
   border-radius: 50%;
   display: grid;
   place-items: center;
-  background: #ecf5ff;
-  color: #409eff;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
   font-size: 17px;
   margin-bottom: 11px;
 }
@@ -1096,7 +792,7 @@ body {
   width: 100%;
   border: 1px solid #efedf4;
   background: #fff;
-  border-radius: 8px;
+  border-radius: var(--app-radius-md);
   display: flex;
   align-items: center;
   text-align: left;
@@ -1106,10 +802,10 @@ body {
   font: inherit;
 }
 .role-card:hover {
-  border-color: #c6e2ff;
+  border-color: var(--el-color-primary-light-7);
 }
 .role-active {
-  border-color: #a0cfff;
+  border-color: var(--el-color-primary-light-5);
   background: #f5faff;
 }
 .role-icon {
@@ -1117,7 +813,7 @@ body {
   height: 34px;
   display: grid;
   place-items: center;
-  border-radius: 8px;
+  border-radius: var(--app-radius-md);
   font-size: 15px;
 }
 .role-icon.red {
@@ -1125,12 +821,12 @@ body {
   color: #e47b79;
 }
 .role-icon.purple {
-  background: #ecf5ff;
-  color: #409eff;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
 }
 .role-icon.blue {
   background: #edf5ff;
-  color: #409eff;
+  color: var(--el-color-primary);
 }
 .role-icon.green {
   background: #eaf8f0;
@@ -1165,9 +861,9 @@ body {
 }
 .role-badge {
   font-size: 8px;
-  color: #409eff;
-  background: #ecf5ff;
-  border-radius: 10px;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  border-radius: var(--app-radius-md);
   padding: 4px 7px;
   vertical-align: 2px;
   margin-left: 5px;
@@ -1193,7 +889,7 @@ body {
   font-size: 12px;
   vertical-align: middle;
   margin-right: 5px;
-  color: #409eff;
+  color: var(--el-color-primary);
 }
 .permission-group .el-checkbox {
   height: auto;
@@ -1204,13 +900,13 @@ body {
   color: #858397;
 }
 .permission-group .el-checkbox__input.is-checked .el-checkbox__inner {
-  background: #409eff;
-  border-color: #409eff;
+  background: var(--el-color-primary);
+  border-color: var(--el-color-primary);
 }
 .permission-note {
   padding: 10px;
   background: #f8f7fc;
-  border-radius: 6px;
+  border-radius: var(--app-radius-md);
   font-size: 8px;
   color: #9997a8;
   display: flex;
@@ -1218,7 +914,7 @@ body {
   gap: 7px;
 }
 .permission-note .el-icon {
-  color: #79bbff;
+  color: var(--el-color-primary-light-3);
 }
 .placeholder-panel {
   text-align: center;
@@ -1229,10 +925,10 @@ body {
   place-items: center;
   width: 45px;
   height: 45px;
-  border-radius: 12px;
+  border-radius: var(--app-radius-lg);
   margin: auto;
-  background: #ecf5ff;
-  color: #409eff;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
   font-size: 20px;
 }
 .placeholder-panel h2 {
@@ -1244,7 +940,7 @@ body {
   color: #a09eae;
 }
 .el-dialog {
-  border-radius: 11px !important;
+  border-radius: var(--app-radius-md) !important;
 }
 .el-dialog__header {
   padding: 20px 22px 12px !important;
@@ -1296,13 +992,13 @@ body {
 .upload-area .el-upload-dragger {
   height: 112px;
   padding: 14px;
-  border-radius: 7px;
+  border-radius: var(--app-radius-md);
   border-color: #e8e5ef;
   background: #fcfbfe;
 }
 .upload-icon {
   font-size: 20px;
-  color: #409eff;
+  color: var(--el-color-primary);
   margin-bottom: 6px;
 }
 .upload-area .el-upload__text {
@@ -1311,7 +1007,7 @@ body {
 }
 .upload-area .el-upload__text em {
   font-style: normal;
-  color: #409eff;
+  color: var(--el-color-primary);
 }
 .upload-hint {
   font-size: 8px;
@@ -1325,10 +1021,6 @@ body {
   width: 100%;
 }
 @media (min-width: 1500px) {
-  .page-content {
-    padding-left: 48px;
-    padding-right: 48px;
-  }
   .stats-grid {
     gap: 18px;
   }
@@ -1341,17 +1033,15 @@ body {
   }
 }
 @media (max-width: 1200px) {
-  .sidebar {
-    width: 220px;
+  .page-heading {
+    gap: 14px;
   }
-  .main-area {
-    margin-left: 220px;
-  }
-  .page-content {
-    padding: 30px 26px;
-  }
-  .topbar {
-    padding: 0 26px;
+  .library-toolbar,
+  .admin-user-toolbar,
+  .app-user-toolbar,
+  .console-toolbar {
+    flex-wrap: wrap;
+    gap: 10px;
   }
   .stats-grid {
     gap: 10px;
@@ -1367,3 +1057,28 @@ body {
     grid-template-columns: repeat(4, minmax(130px, 1fr));
   }
 }
+
+@media (max-width: 768px) {
+  .page-heading {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .page-heading h1 {
+    font-size: 20px;
+  }
+  .panel {
+    padding: 14px;
+  }
+  .library-toolbar > .el-input,
+  .library-toolbar > .el-select,
+  .admin-user-toolbar > .el-input,
+  .admin-user-toolbar > .el-select,
+  .app-user-toolbar > .el-input,
+  .app-user-toolbar > .el-select {
+    width: 100%;
+  }
+  .stats-grid,
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/styles/business/theme.css b/src/styles/business/theme.css
index 96439a3..3d54de4 100644
--- a/src/styles/business/theme.css
+++ b/src/styles/business/theme.css
@@ -1,5 +1,18 @@
 :root {
-  font-family: Arial, 'Noto Sans SC', sans-serif;
+  --font-display: 'Manrope', 'Noto Sans SC', sans-serif;
+  --font-body: 'DM Sans', 'Noto Sans SC', sans-serif;
+  --app-radius-sm: 4px;
+  --app-radius-md: 6px;
+  --app-radius-lg: 12px;
+  --app-brand: #c4322a;
+  --app-brand-pressed: #8e221c;
+  --app-brand-soft: #ff8a72;
+  --app-primary-strong: color-mix(in srgb, var(--el-color-primary) 72%, #000 28%);
+  --brand-mark-size: 38px;
+  --brand-mark-radius: var(--app-radius-lg);
+  --el-border-radius-base: var(--app-radius-md);
+  --el-border-radius-small: var(--app-radius-sm);
+  font-family: var(--font-body);
   color: var(--el-text-color-primary);
   background: var(--el-bg-color-page);
   --el-color-primary: #409eff;
@@ -17,83 +30,6 @@ body {
   background: var(--el-bg-color-page);
   color: var(--el-text-color-primary);
 }
-.sidebar {
-  background: #fff;
-  border-right-color: #e7e9ec;
-  padding-top: 22px;
-}
-.brand {
-  padding-bottom: 23px;
-}
-.brand-mark {
-  background: #409eff;
-  border-radius: 7px;
-  transform: none;
-}
-.brand b {
-  font:
-    700 16px Arial,
-    sans-serif;
-  letter-spacing: -0.4px;
-  color: #29313b;
-}
-.brand small {
-  letter-spacing: 0.9px;
-}
-.workspace {
-  border-radius: 5px;
-  border-color: #e5e7eb;
-  margin-bottom: 22px;
-}
-.workspace-avatar,
-.profile-avatar,
-.top-avatar {
-  background: #ecf5ff;
-  color: #409eff;
-  border-radius: 5px;
-}
-.nav-label {
-  color: #9298a1;
-  font-size: 10px;
-}
-.side-menu .el-menu-item {
-  border-radius: 5px;
-  color: #616873;
-}
-.side-menu .el-menu-item:hover {
-  background: #ecf5ff;
-  color: #409eff;
-}
-.side-menu .el-menu-item.is-active {
-  background: #ecf5ff;
-  color: #409eff;
-}
-.menu-count {
-  background: #eef1f4;
-  color: #747d88;
-}
-.help-card {
-  background: #f7f8fa;
-  border-color: #eceef0;
-  border-radius: 5px;
-}
-.help-icon {
-  background: #ecf5ff;
-  color: #409eff;
-  border-radius: 5px;
-}
-.help-card a {
-  color: #409eff;
-}
-.topbar {
-  background: #fff;
-}
-.environment {
-  border-radius: 4px;
-}
-.page-content {
-  padding-top: 30px;
-}
 .eyebrow {
   letter-spacing: 0.7px;
   color: #9298a1;
@@ -110,14 +46,14 @@ body {
   color: #818791;
 }
 .primary-button {
-  background: #409eff !important;
-  border-color: #409eff !important;
-  border-radius: 5px !important;
+  background: var(--el-color-primary) !important;
+  border-color: var(--el-color-primary) !important;
+  border-radius: var(--app-radius-sm) !important;
   box-shadow: none !important;
 }
 .primary-button:hover {
-  background: #79bbff !important;
-  border-color: #79bbff !important;
+  background: var(--el-color-primary-light-3) !important;
+  border-color: var(--el-color-primary-light-3) !important;
 }
 .stats-grid {
   gap: 12px;
@@ -125,7 +61,7 @@ body {
 .stat-card,
 .panel {
   border-color: #e6e8eb;
-  border-radius: 6px;
+  border-radius: var(--app-radius-md);
   box-shadow: none;
 }
 .stat-card {
@@ -136,12 +72,12 @@ body {
   color: #727983;
 }
 .stat-icon {
-  border-radius: 5px;
+  border-radius: var(--app-radius-sm);
   background: #ecf5ff !important;
-  color: #409eff !important;
+  color: var(--el-color-primary) !important;
 }
 .stat-value {
-  font-family: Arial, sans-serif;
+  font-family: var(--font-display);
   color: #303640;
 }
 .stat-foot .positive {
@@ -164,15 +100,15 @@ body {
   fill: #d9ecff;
 }
 .chart-svg path:last-of-type {
-  stroke: #409eff;
+  stroke: var(--el-color-primary);
 }
 .view-all,
 .row-action {
-  color: #409eff !important;
+  color: var(--el-color-primary) !important;
 }
 .review-art {
   background: #f1f3f5 !important;
-  border-radius: 5px;
+  border-radius: var(--app-radius-sm);
   font-size: 0;
 }
 .review-art:after {
@@ -183,12 +119,12 @@ body {
 .review-row .el-tag,
 .drama-table .el-tag,
 .episode-row .el-tag {
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
   background: #f0f2f4 !important;
   color: #606b78 !important;
 }
 .drama-cover {
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
   box-shadow: none;
   font-size: 14px;
   background: #eceff2 !important;
@@ -220,16 +156,16 @@ body {
 }
 .library-toolbar .el-tabs__item.is-active,
 .cover-toolbar .el-tabs__item.is-active {
-  color: #409eff;
+  color: var(--el-color-primary);
 }
 .library-toolbar .el-tabs__active-bar,
 .cover-toolbar .el-tabs__active-bar {
-  background: #409eff;
+  background: var(--el-color-primary);
 }
 .toolbar-filters .el-input__wrapper,
 .toolbar-filters .el-select__wrapper,
 .drama-select .el-input__wrapper {
-  border-radius: 5px;
+  border-radius: var(--app-radius-sm);
 }
 .episode-panel {
   padding-left: 20px;
@@ -237,10 +173,10 @@ body {
 }
 .episode-row {
   border-color: #e7e9ec;
-  border-radius: 5px;
+  border-radius: var(--app-radius-sm);
 }
 .episode-thumb {
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
   background: #e9ecef;
   color: #7d8792;
 }
@@ -256,7 +192,7 @@ body {
 .cover-card,
 .add-cover {
   border-color: #e6e8eb;
-  border-radius: 5px;
+  border-radius: var(--app-radius-sm);
 }
 .poster-art {
   background: #e9ecef !important;
@@ -296,12 +232,12 @@ body {
   color: #656d77;
 }
 .add-cover > span {
-  border-radius: 5px;
+  border-radius: var(--app-radius-sm);
   background: #edf0f3;
   color: #68798d;
 }
 .role-card {
-  border-radius: 5px;
+  border-radius: var(--app-radius-sm);
   border-color: #e7e9ec;
 }
 .role-active {
@@ -309,48 +245,48 @@ body {
   background: #ecf5ff;
 }
 .role-icon {
-  border-radius: 5px;
+  border-radius: var(--app-radius-sm);
   background: #ecf5ff !important;
-  color: #409eff !important;
+  color: var(--el-color-primary) !important;
 }
 .role-badge {
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
   background: #eef1f4;
   color: #65758a;
 }
 .permission-group h3 .el-icon {
-  color: #409eff;
+  color: var(--el-color-primary);
 }
 .permission-group .el-checkbox__input.is-checked .el-checkbox__inner {
-  background: #409eff;
-  border-color: #409eff;
+  background: var(--el-color-primary);
+  border-color: var(--el-color-primary);
 }
 .permission-note {
   background: #f6f7f8;
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
 }
 .el-dialog {
-  border-radius: 6px !important;
+  border-radius: var(--app-radius-md) !important;
 }
 .el-dialog__header,
 .el-dialog__footer {
   border-color: #e8eaed;
 }
 .upload-area .el-upload-dragger {
-  border-radius: 5px;
+  border-radius: var(--app-radius-sm);
   background: #fafbfc;
 }
 .upload-icon,
 .upload-area .el-upload__text em {
-  color: #409eff;
+  color: var(--el-color-primary);
 }
 .el-tabs__item,
 .el-input__inner,
 .el-select__placeholder {
-  font-family: Arial, 'Noto Sans SC', sans-serif;
+  font-family: var(--font-body);
 }
 .el-tag.status-badge {
-  border-radius: 4px;
+  border-radius: var(--app-radius-sm);
   font-weight: 500;
 }
 .el-tag.status-badge.is-online {
diff --git a/src/styles/business/typography.css b/src/styles/business/typography.css
index 04e9a71..464fd3f 100644
--- a/src/styles/business/typography.css
+++ b/src/styles/business/typography.css
@@ -4,7 +4,7 @@
   flex: 0 0 30px;
   display: grid;
   place-items: center;
-  border-radius: 5px;
+  border-radius: var(--app-radius-sm);
 }
 .stat-top > .stat-icon .el-icon {
   font-size: 16px;
diff --git a/src/styles/var.css b/src/styles/var.css
index 15e206e..3313921 100644
--- a/src/styles/var.css
+++ b/src/styles/var.css
@@ -6,17 +6,17 @@
 
   --left-menu-min-width: 64px;
 
-  --left-menu-bg-color: #001529;
+  --left-menu-bg-color: #17110f;
 
-  --left-menu-bg-light-color: #0f2438;
+  --left-menu-bg-light-color: #221815;
 
-  --left-menu-bg-active-color: var(--el-color-primary);
+  --left-menu-bg-active-color: var(--app-primary-strong);
 
-  --left-menu-text-color: #bfcbd9;
+  --left-menu-text-color: #d7cbc4;
 
   --left-menu-text-active-color: #fff;
 
-  --left-menu-collapse-bg-active-color: var(--el-color-primary);
+  --left-menu-collapse-bg-active-color: var(--app-primary-strong);
   /* left menu end */
 
   /* logo start */
@@ -26,9 +26,9 @@
   /* logo end */
 
   /* header start */
-  --top-header-bg-color: '#fff';
+  --top-header-bg-color: #fff;
 
-  --top-header-text-color: 'inherit';
+  --top-header-text-color: #303133;
 
   --top-header-hover-color: #f6f6f6;
 
@@ -58,4 +58,7 @@
 
 .dark {
   --app-content-bg-color: var(--el-bg-color);
+  --top-header-bg-color: var(--el-bg-color-overlay);
+  --top-header-text-color: var(--el-text-color-primary);
+  --top-header-hover-color: var(--el-fill-color);
 }
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 1903eac..8d444e7 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -29,11 +29,11 @@ const themeChange = () => {
       <div class="login-shell">
         <section class="login-hero">
           <div class="hero-brand">
-            <img src="@/assets/imgs/logo.png" alt="" />
+            <img src="@/assets/imgs/brand-mark.png" alt="" />
             <span>{{ underlineToHump(appStore.getTitle) }}</span>
           </div>
           <div class="hero-copy">
-            <p class="hero-kicker">FruitShorts Studio</p>
+            <p class="hero-kicker">{{ t('login.consoleLabel') }}</p>
             <h1>{{ t('login.welcome') }}</h1>
             <p>{{ t('login.message') }}</p>
             <ul>
@@ -63,7 +63,7 @@ const themeChange = () => {
 .login-page {
   height: 100%;
   color: var(--el-text-color-primary);
-  background: #eef3f9;
+  background: var(--el-bg-color-page);
 }
 
 .login-scroll {
@@ -82,9 +82,9 @@ const themeChange = () => {
   overflow: hidden;
   color: #fff;
   background:
-    radial-gradient(circle at 18% 18%, rgb(255 255 255 / 16%), transparent 28%),
-    radial-gradient(circle at 82% 78%, rgb(64 158 255 / 45%), transparent 32%),
-    linear-gradient(155deg, #0d2344 0%, #1a4f96 52%, #409eff 100%);
+    radial-gradient(circle at 18% 18%, rgb(255 255 255 / 10%), transparent 28%),
+    radial-gradient(circle at 82% 78%, rgb(196 50 42 / 34%), transparent 34%),
+    linear-gradient(155deg, #17100f 0%, #241714 55%, #3b1d19 100%);
   flex: 1.05;
   flex-direction: column;
   justify-content: space-between;
@@ -111,8 +111,10 @@ const themeChange = () => {
   font-weight: 700;
 
   img {
-    width: 42px;
-    height: 42px;
+    width: var(--brand-mark-size);
+    height: var(--brand-mark-size);
+    border-radius: var(--brand-mark-radius);
+    box-shadow: 0 10px 24px rgb(196 50 42 / 28%);
   }
 }
 
@@ -169,7 +171,7 @@ const themeChange = () => {
   align-items: center;
   justify-content: center;
   padding: 88px 32px 48px;
-  background: #f4f7fb;
+  background: var(--el-bg-color-page);
 }
 
 .login-tools {
@@ -184,28 +186,28 @@ const themeChange = () => {
 .login-card {
   width: min(420px, 100%);
   padding: 36px 32px 28px;
-  background: #fff;
-  border: 1px solid #e6edf5;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-light);
   border-radius: 18px;
-  box-shadow: 0 18px 50px rgb(15 39 68 / 8%);
+  box-shadow: 0 18px 50px rgb(42 24 16 / 10%);
 }
 
 .is-dark {
-  background: #0e1116;
+  background: var(--el-bg-color-page);
 
   .login-hero {
     background:
-      radial-gradient(circle at 18% 18%, rgb(64 158 255 / 18%), transparent 30%),
-      linear-gradient(155deg, #07111f 0%, #0e2744 58%, #163e73 100%);
+      radial-gradient(circle at 18% 18%, rgb(255 255 255 / 8%), transparent 30%),
+      linear-gradient(155deg, #0e0a09 0%, #1a1110 58%, #2c1513 100%);
   }
 
   .login-panel {
-    background: #0e1116;
+    background: var(--el-bg-color-page);
   }
 
   .login-card {
-    background: #161b22;
-    border-color: #2a313c;
+    background: var(--el-bg-color-overlay);
+    border-color: var(--el-border-color);
     box-shadow: none;
   }
 }
@@ -217,16 +219,46 @@ const themeChange = () => {
 
   .login-hero {
     flex: none;
-    min-height: 280px;
-    padding: 28px 24px 32px;
+    min-height: 132px;
+    padding: 16px 24px 20px;
   }
 
   .hero-copy h1 {
-    font-size: 30px;
+    margin: 6px 0 8px;
+    font-size: 28px;
+  }
+
+  .hero-copy ul {
+    display: none;
   }
 
   .login-panel {
-    padding: 72px 16px 32px;
+    padding: 44px 16px 12px;
+  }
+
+  .login-card {
+    padding-top: 28px;
+    padding-bottom: 20px;
+  }
+
+  .login-tools {
+    top: 8px;
+    right: 16px;
+  }
+}
+
+@media (width <= 600px) {
+  .login-hero {
+    min-height: 118px;
+    padding: 16px 18px 18px;
+  }
+
+  .hero-copy p {
+    font-size: 13px;
+  }
+
+  .login-card {
+    padding: 28px 20px 24px;
   }
 }
 </style>
@@ -269,6 +301,19 @@ const themeChange = () => {
   }
 }
 
+.login-card :deep(.el-button--primary) {
+  --el-button-bg-color: var(--app-brand);
+  --el-button-border-color: var(--app-brand);
+  --el-button-hover-bg-color: var(--app-brand-pressed);
+  --el-button-hover-border-color: var(--app-brand-pressed);
+  --el-button-active-bg-color: var(--app-brand-pressed);
+  --el-button-active-border-color: var(--app-brand-pressed);
+}
+
+.login-card :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px var(--app-brand) inset;
+}
+
 body:has(.login-page) {
   min-width: 0;
   background: transparent;
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index 1754d69..2aad1fe 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -64,7 +64,7 @@ const schema = reactive<FormSchema[]>([
       span: 24
     },
     componentProps: {
-      placeholder: 'admin'
+      placeholder: t('login.usernamePlaceholder')
     }
   },
   {
@@ -79,7 +79,7 @@ const schema = reactive<FormSchema[]>([
       style: {
         width: '100%'
       },
-      placeholder: 'admin123'
+      placeholder: t('login.passwordPlaceholder')
     }
   },
   {
@@ -143,8 +143,7 @@ const remember = ref(userStore.getRememberMe)
 const initLoginInfo = () => {
   const loginInfo = userStore.getLoginInfo
   if (loginInfo) {
-    const { username, password } = loginInfo
-    setValues({ username, password })
+    setValues({ username: loginInfo.username })
   }
 }
 onMounted(() => {
@@ -170,6 +169,7 @@ watch(
 
 // 登录
 const signIn = async () => {
+  if (loading.value) return
   const formRef = await getElFormExpose()
   await formRef?.validate(async (isValid) => {
     if (isValid) {
@@ -183,8 +183,7 @@ const signIn = async () => {
           // 是否记住我
           if (unref(remember)) {
             userStore.setLoginInfo({
-              username: formData.username,
-              password: formData.password
+              username: formData.username
             })
           } else {
             userStore.setLoginInfo(undefined)
@@ -196,7 +195,7 @@ const signIn = async () => {
           }
           // 是否使用动态路由
           if (appStore.getDynamicRouter) {
-            getRole()
+            await getRole()
           } else {
             await permissionStore.generateRoutes('static').catch(() => {})
             permissionStore.getAddRouters.forEach((route) => {
@@ -254,6 +253,7 @@ const toRegister = () => {
     hide-required-asterisk
     size="large"
     class="login-form"
+    @keyup.enter="signIn"
     @register="formRegister"
   />
 </template>
diff --git a/src/views/commerce/ProductManagementView.vue b/src/views/commerce/ProductManagementView.vue
index 26ba5e6..cbf22f5 100644
--- a/src/views/commerce/ProductManagementView.vue
+++ b/src/views/commerce/ProductManagementView.vue
@@ -3,7 +3,7 @@
 <script setup>
 import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import {
   createProductApi,
   deleteProductApi,
@@ -245,7 +245,7 @@ onMounted(load)
       class="primary-button"
       @click="openCreate"
     >
-      <el-icon><Plus /></el-icon>
+      <AppIcon :icon="AppIcons.add" />
       新建商品
     </el-button>
   </PageHeading>
diff --git a/src/views/common/DashboardView.vue b/src/views/common/DashboardView.vue
index 481fe2a..c7e4bfa 100644
--- a/src/views/common/DashboardView.vue
+++ b/src/views/common/DashboardView.vue
@@ -3,7 +3,7 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { VideoCamera, CaretRight, Clock, CircleCheck, Plus } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import { pageDramasApi } from '@/api/admin/drama'
 import { useRbac } from '@/stores/rbac'
 import { formatCount } from '@/utils/format'
@@ -52,36 +52,32 @@ onMounted(async () => {
       type="primary"
       class="primary-button"
       @click="router.push({ name: 'dramas' })"
-      ><el-icon><Plus /></el-icon>上传新短剧</el-button
+      ><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"
-          ><el-icon><VideoCamera /></el-icon></span></div
+        ><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"
-          ><el-icon><CaretRight /></el-icon></span></div
+        ><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"
-          ><el-icon><Clock /></el-icon></span></div
+        ><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"
-          ><el-icon><CircleCheck /></el-icon></span></div
+        ><span class="stat-icon"><AppIcon :icon="AppIcons.checkCircle" /></span></div
       ><div class="stat-value">{{ publishedCount }} <small>部</small></div></div
     >
   </div>
diff --git a/src/views/contentManagement/BannerManagementView.vue b/src/views/contentManagement/BannerManagementView.vue
index 2099e4e..056ff97 100644
--- a/src/views/contentManagement/BannerManagementView.vue
+++ b/src/views/contentManagement/BannerManagementView.vue
@@ -3,7 +3,7 @@
 <script setup>
 import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import {
   createBannerApi,
   deleteBannerApi,
@@ -219,7 +219,7 @@ onMounted(async () => {
       class="primary-button"
       @click="openCreate"
     >
-      <el-icon><Plus /></el-icon>
+      <AppIcon :icon="AppIcons.add" />
       新建轮播图
     </el-button>
   </PageHeading>
diff --git a/src/views/contentManagement/CategoryManagementView.vue b/src/views/contentManagement/CategoryManagementView.vue
index 2f717ab..ea00632 100644
--- a/src/views/contentManagement/CategoryManagementView.vue
+++ b/src/views/contentManagement/CategoryManagementView.vue
@@ -3,7 +3,7 @@
 <script setup>
 import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import {
   createDramaCategoryApi,
   deleteDramaCategoryApi,
@@ -100,7 +100,7 @@ onMounted(load)
     description="维护短剧类型，供新建短剧选择，也作为客户端分类筛选的依据。"
   >
     <el-button v-if="can('drama:create')" type="primary" class="primary-button" @click="openCreate">
-      <el-icon><Plus /></el-icon>
+      <AppIcon :icon="AppIcons.add" />
       新建类型
     </el-button>
   </PageHeading>
diff --git a/src/views/contentManagement/DramaManagementView.vue b/src/views/contentManagement/DramaManagementView.vue
index 16fa571..6b9db63 100644
--- a/src/views/contentManagement/DramaManagementView.vue
+++ b/src/views/contentManagement/DramaManagementView.vue
@@ -4,7 +4,7 @@
 import { onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Search } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import {
   changeDramaStatusApi,
   createDramaApi,
@@ -242,7 +242,7 @@ onMounted(async () => {
       ><div class="eyebrow">内容管理</div><h1>短剧管理</h1
       ><p>管理短剧信息、封面、剧集和发布状态。</p></div
     ><el-button v-if="can('drama:create')" type="primary" class="primary-button" @click="openCreate"
-      ><el-icon><Plus /></el-icon>新建短剧</el-button
+      ><AppIcon :icon="AppIcons.add" />新建短剧</el-button
     ></div
   >
   <section class="panel library-panel">
@@ -251,11 +251,12 @@ onMounted(async () => {
         ><el-input
           v-model="keyword"
           placeholder="搜索短剧名称"
-          :prefix-icon="Search"
           clearable
           @keyup.enter="search"
           @clear="search"
-        /><el-select v-model="statusFilter" clearable placeholder="全部状态" @change="search"
+        >
+          <template #prefix><AppIcon :icon="AppIcons.search" /></template> </el-input
+        ><el-select v-model="statusFilter" clearable placeholder="全部状态" @change="search"
           ><el-option
             v-for="item in statusOptions"
             :key="item.code"
diff --git a/src/views/contentManagement/EpisodeManagementView.vue b/src/views/contentManagement/EpisodeManagementView.vue
index 5db5f08..7e04cf5 100644
--- a/src/views/contentManagement/EpisodeManagementView.vue
+++ b/src/views/contentManagement/EpisodeManagementView.vue
@@ -4,7 +4,7 @@
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import { pageDramasApi } from '@/api/admin/drama'
 import {
   createEpisodeApi,
@@ -232,7 +232,7 @@ onMounted(async () => {
       class="primary-button"
       :disabled="!selectedDramaId"
       @click="openCreate"
-      ><el-icon><Plus /></el-icon>新增剧集</el-button
+      ><AppIcon :icon="AppIcons.add" />新增剧集</el-button
     ></div
   >
   <section class="panel episode-panel">
diff --git a/src/views/creator-center/DramaEditView.vue b/src/views/creator-center/DramaEditView.vue
index 3b68148..08384f9 100644
--- a/src/views/creator-center/DramaEditView.vue
+++ b/src/views/creator-center/DramaEditView.vue
@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { ArrowLeft, Upload } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import PageHeading from '@/views/components/PageHeading.vue'
 import CreatorCenterPage from './components/CreatorCenterPage.vue'
 import { useRbac } from '@/stores/rbac'
@@ -72,7 +72,7 @@ function requestDramaCover(options) {
       title="作品编辑"
       :description="drama ? `${drama.title}（${drama.code}）` : ''"
     >
-      <el-button :icon="ArrowLeft" @click="back">返回</el-button>
+      <el-button @click="back"><AppIcon :icon="AppIcons.arrowBack" />返回</el-button>
     </PageHeading>
 
     <section v-loading="loading" class="panel">
@@ -145,7 +145,7 @@ function requestDramaCover(options) {
                 :http-request="requestDramaCover"
                 :disabled="uploadingId !== null"
               >
-                <el-button size="small" :icon="Upload">上传封面</el-button>
+                <el-button size="small"> <AppIcon :icon="AppIcons.upload" />上传封面 </el-button>
               </el-upload>
             </div>
           </el-form-item>
@@ -341,7 +341,7 @@ function requestDramaCover(options) {
               accept="image/*"
               :http-request="(options) => requestEpisodeCover({ id: episodeEditingId }, options)"
             >
-              <el-button size="small" :icon="Upload">上传封面</el-button>
+              <el-button size="small"> <AppIcon :icon="AppIcons.upload" />上传封面 </el-button>
             </el-upload>
           </div>
         </el-form-item>
diff --git a/src/views/creator-center/WorkspaceView.vue b/src/views/creator-center/WorkspaceView.vue
index 0f76c50..c329593 100644
--- a/src/views/creator-center/WorkspaceView.vue
+++ b/src/views/creator-center/WorkspaceView.vue
@@ -3,7 +3,7 @@
 <script setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { Search } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import PageHeading from '@/views/components/PageHeading.vue'
 import CreatorCenterPage from './components/CreatorCenterPage.vue'
 import { useCreatorAccess } from './composables/useCreatorAccess'
@@ -112,12 +112,13 @@ function openEdit(row) {
             <el-input
               v-model="dramas.keyword"
               class="console-keyword"
-              :prefix-icon="Search"
               clearable
               placeholder="搜索作品名称"
               @keyup.enter="queryDramas"
               @clear="queryDramas"
-            />
+            >
+              <template #prefix><AppIcon :icon="AppIcons.search" /></template>
+            </el-input>
             <el-select
               v-model="dramas.status"
               class="console-select"
diff --git a/src/views/creator/CreatorAuditView.vue b/src/views/creator/CreatorAuditView.vue
index d8e7303..3cb81b7 100644
--- a/src/views/creator/CreatorAuditView.vue
+++ b/src/views/creator/CreatorAuditView.vue
@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { Search } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import PageHeading from '@/views/components/PageHeading.vue'
 import { useRbac } from '@/stores/rbac'
 import { dateCell } from '@/utils/format'
@@ -72,12 +72,13 @@ const {
       <el-input
         v-model="keyword"
         class="console-keyword"
-        :prefix-icon="Search"
         clearable
         placeholder="搜索名称 / 编号 / 联系人 / 联系方式"
         @keyup.enter="query"
         @clear="query"
-      />
+      >
+        <template #prefix><AppIcon :icon="AppIcons.search" /></template>
+      </el-input>
       <el-select
         v-model="statusFilter"
         class="console-select"
diff --git a/src/views/operation/NoticeManagementView.vue b/src/views/operation/NoticeManagementView.vue
index 6b775a1..55455a3 100644
--- a/src/views/operation/NoticeManagementView.vue
+++ b/src/views/operation/NoticeManagementView.vue
@@ -3,7 +3,7 @@
 <script setup>
 import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import {
   createNoticeApi,
   deleteNoticeApi,
@@ -184,7 +184,7 @@ onMounted(load)
       class="primary-button"
       @click="openCreate"
     >
-      <el-icon><Plus /></el-icon>
+      <AppIcon :icon="AppIcons.add" />
       新建公告
     </el-button>
   </PageHeading>
diff --git a/src/views/permission/MenuManagementView.vue b/src/views/permission/MenuManagementView.vue
index a1a772d..24d5c11 100644
--- a/src/views/permission/MenuManagementView.vue
+++ b/src/views/permission/MenuManagementView.vue
@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { Plus } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import { menuIconNames, useMenuManagement } from '@/views/permission/composables/useMenuManagement'
 import PageHeading from '@/views/components/PageHeading.vue'
 
@@ -12,7 +12,7 @@ const { treeData, loading, form, parentOptions, resetForm, selectNode, saveMenu,
 <template>
   <PageHeading eyebrow="后台管理" title="菜单管理" description="维护系统菜单结构、路由与按钮权限。">
     <el-button type="primary" @click="resetForm(0)">
-      <el-icon><Plus /></el-icon>
+      <AppIcon :icon="AppIcons.add" />
       新增菜单
     </el-button>
   </PageHeading>
diff --git a/src/views/permission/RoleCategoriesView.vue b/src/views/permission/RoleCategoriesView.vue
index 21df1a2..30f47ad 100644
--- a/src/views/permission/RoleCategoriesView.vue
+++ b/src/views/permission/RoleCategoriesView.vue
@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { Plus } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import { useRoleCategories } from '@/views/permission/composables/useRoleCategories'
 import PageHeading from '@/views/components/PageHeading.vue'
 
@@ -25,7 +25,7 @@ const {
     description="维护角色分类，方便按职责整理权限角色。"
   >
     <el-button type="primary" class="primary-button" @click="openCreateDialog">
-      <el-icon><Plus /></el-icon>
+      <AppIcon :icon="AppIcons.add" />
       新增分类
     </el-button>
   </PageHeading>
diff --git a/src/views/permission/RoleManagementView.vue b/src/views/permission/RoleManagementView.vue
index 99f3dc9..01f74c8 100644
--- a/src/views/permission/RoleManagementView.vue
+++ b/src/views/permission/RoleManagementView.vue
@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { Plus } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import { useRolePermissionEditor } from '@/views/permission/composables/useRolePermissionEditor'
 import PageHeading from '@/views/components/PageHeading.vue'
 
@@ -36,7 +36,7 @@ function removeRoleRow(row) {
     description="角色等级数字越小权限越高，低等级角色不能修改高等级角色。"
   >
     <el-button type="primary" class="primary-button" @click="dialogVisible = true">
-      <el-icon><Plus /></el-icon>
+      <AppIcon :icon="AppIcons.add" />
       新增角色
     </el-button>
   </PageHeading>
diff --git a/src/views/permission/composables/useMenuManagement.js b/src/views/permission/composables/useMenuManagement.js
index f45b3bd..0d91b28 100644
--- a/src/views/permission/composables/useMenuManagement.js
+++ b/src/views/permission/composables/useMenuManagement.js
@@ -3,17 +3,9 @@
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { createMenuApi, deleteMenuApi, getMenuTreeApi, updateMenuApi } from '@/api/admin/role'
+import { MenuIconOptions, normalizeAppIcon } from '@/constants/icons'
 
-export const menuIconNames = [
-  'Document',
-  'DataAnalysis',
-  'Picture',
-  'User',
-  'Setting',
-  'VideoCamera',
-  'Menu',
-  'Grid'
-]
+export const menuIconNames = MenuIconOptions
 
 /** 菜单管理：直接读写后端 sys_menu，变更后重新登录生效。 */
 export function useMenuManagement() {
@@ -101,7 +93,7 @@ export function useMenuManagement() {
       routePath: raw.path || '',
       routeName: raw.name || '',
       component: raw.component === '#' ? '' : raw.component || '',
-      icon: raw.icon || '',
+      icon: normalizeAppIcon(raw.icon),
       permissionCode: raw.permissionCode || '',
       type: raw.type || 'MENU',
       sort: raw.sort ?? 1,
@@ -121,7 +113,7 @@ export function useMenuManagement() {
       routePath: form.routePath.trim(),
       routeName: form.routeName.trim(),
       component: form.type === 'CATALOG' ? '#' : form.component.trim(),
-      icon: form.icon,
+      icon: form.type === 'BUTTON' ? '' : normalizeAppIcon(form.icon),
       permissionCode: form.permissionCode.trim(),
       type: form.type,
       sort: Number(form.sort) || 1,
diff --git a/src/views/systemManagement/OperationLogView.vue b/src/views/systemManagement/OperationLogView.vue
index 5b4e4c7..4f8faf4 100644
--- a/src/views/systemManagement/OperationLogView.vue
+++ b/src/views/systemManagement/OperationLogView.vue
@@ -2,7 +2,7 @@
 
 <script setup>
 import { onMounted, reactive, ref } from 'vue'
-import { Search } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import { getOperationLogApi, pageOperationLogsApi } from '@/api/admin/log'
 import PageHeading from '@/views/components/PageHeading.vue'
 
@@ -103,12 +103,13 @@ onMounted(load)
       <div class="drama-filters">
         <el-input
           v-model="filters.username"
-          :prefix-icon="Search"
           clearable
           placeholder="操作人"
           @keyup.enter="search"
           @clear="search"
-        />
+        >
+          <template #prefix><AppIcon :icon="AppIcons.search" /></template>
+        </el-input>
         <el-select v-model="filters.module" clearable placeholder="全部模块" @change="search">
           <el-option
             v-for="item in moduleOptions"
diff --git a/src/views/userManagement/AdminUsersView.vue b/src/views/userManagement/AdminUsersView.vue
index e908022..aacad67 100644
--- a/src/views/userManagement/AdminUsersView.vue
+++ b/src/views/userManagement/AdminUsersView.vue
@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { Plus, Search } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import { useAdminUsers } from '@/views/userManagement/composables/useAdminUsers'
 import { useRbac } from '@/stores/rbac'
 import PageHeading from '@/views/components/PageHeading.vue'
@@ -44,18 +44,19 @@ const {
     <div class="admin-user-toolbar">
       <el-input
         v-model="keyword"
-        :prefix-icon="Search"
         clearable
         placeholder="搜索登录账号"
         @keyup.enter="queryUsers"
         @clear="queryUsers"
-      />
+      >
+        <template #prefix><AppIcon :icon="AppIcons.search" /></template>
+      </el-input>
       <el-select v-model="roleFilter" clearable placeholder="全部角色" @change="queryUsers">
         <el-option v-for="role in roles" :key="role.id" :label="role.name" :value="role.id" />
       </el-select>
       <el-button type="primary" @click="queryUsers">查询</el-button>
       <el-button v-if="can('system:admin-user')" type="primary" @click="openCreate">
-        <el-icon><Plus /></el-icon>
+        <AppIcon :icon="AppIcons.add" />
         添加用户
       </el-button>
     </div>
diff --git a/src/views/userManagement/AppUsersView.vue b/src/views/userManagement/AppUsersView.vue
index 32ded21..82ad0a4 100644
--- a/src/views/userManagement/AppUsersView.vue
+++ b/src/views/userManagement/AppUsersView.vue
@@ -2,7 +2,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import { Search } from '@element-plus/icons-vue'
+import { AppIcons } from '@/constants/icons'
 import PageHeading from '@/views/components/PageHeading.vue'
 import { useRbac } from '@/stores/rbac'
 import {
@@ -87,12 +87,13 @@ function canBeBanned(row) {
       <el-input
         v-model="keyword"
         class="app-user-keyword"
-        :prefix-icon="Search"
         clearable
         placeholder="搜索 uid / 昵称 / 手机号 / 邮箱"
         @keyup.enter="queryUsers"
         @clear="queryUsers"
-      />
+      >
+        <template #prefix><AppIcon :icon="AppIcons.search" /></template>
+      </el-input>
       <el-select
         v-model="statusFilter"
         class="app-user-status"

From 29465ab4edbd1d0756c46c3381003f0d710deb66 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 11:18:11 +0800
Subject: [PATCH 05/59] =?UTF-8?q?fix(web):=20=E7=BB=9F=E4=B8=80=E9=9D=99?=
 =?UTF-8?q?=E6=80=81=E8=B7=AF=E7=94=B1=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index 017c553..d4bd294 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -4,6 +4,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
 import type { App } from 'vue'
 import { Layout } from '@/utils/routerHelper'
+import { AppIcons } from '@/constants/icons'
 
 export const constantRouterMap: AppRouteRecordRaw[] = [
   {
@@ -62,7 +63,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
     name: 'Dashboard',
     meta: {
       title: '工作台',
-      icon: 'ant-design:dashboard-filled'
+      icon: AppIcons.dashboard
     },
     children: [
       {
@@ -71,7 +72,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         component: () => import('@/views/common/DashboardView.vue'),
         meta: {
           title: '工作台',
-          icon: 'ant-design:dashboard-filled',
+          icon: AppIcons.dashboard,
           affix: true
         }
       }
@@ -84,7 +85,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
     name: 'Content',
     meta: {
       title: '内容管理',
-      icon: 'ep:video-camera',
+      icon: AppIcons.content,
       alwaysShow: true
     },
     children: [
@@ -129,7 +130,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
     name: 'UserCenter',
     meta: {
       title: '用户管理',
-      icon: 'ep:user',
+      icon: AppIcons.group,
       alwaysShow: true
     },
     children: [
@@ -150,7 +151,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
     name: 'System',
     meta: {
       title: '后台管理',
-      icon: 'ep:setting',
+      icon: AppIcons.settings,
       alwaysShow: true
     },
     children: [

From ada741f53d3220fe3b8f1dcc48633e9d0d68bae3 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 11:31:55 +0800
Subject: [PATCH 06/59] =?UTF-8?q?style(web):=20=E7=B2=BE=E7=AE=80=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E5=93=81=E7=89=8C=E4=B8=8E=E6=B3=A8=E5=86=8C=E5=85=A5?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/en.ts                           |  13 +-
 src/locales/zh-CN.ts                        |  13 +-
 src/views/Login/Login.vue                   |  67 +-------
 src/views/Login/components/LoginForm.vue    |  41 +----
 src/views/Login/components/RegisterForm.vue | 172 --------------------
 src/views/Login/components/index.ts         |   3 +-
 6 files changed, 15 insertions(+), 294 deletions(-)
 delete mode 100644 src/views/Login/components/RegisterForm.vue

diff --git a/src/locales/en.ts b/src/locales/en.ts
index 08800b5..15ff3d6 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -105,25 +105,14 @@ export default {
   login: {
     welcome: 'Short-drama workspace',
     consoleLabel: 'Content Operations',
-    message: 'Manage dramas, episodes, publishing, and access.',
     hint: 'Sign in with an admin account',
-    noAccount: 'No account yet?',
-    pointDrama: 'Dramas and episodes',
-    pointPublish: 'Publishing',
-    pointAccess: 'Access',
     username: 'Username',
     password: 'Password',
-    register: 'Register',
-    checkPassword: 'Confirm password',
     login: 'Sign in',
-    otherLogin: 'Sign in with',
     remember: 'Remember me',
-    hasUser: 'Existing account? Go to login',
     forgetPassword: 'Forget password',
     usernamePlaceholder: 'Please input username',
-    passwordPlaceholder: 'Please input password',
-    code: 'Verification code',
-    codePlaceholder: 'Please input verification code'
+    passwordPlaceholder: 'Please input password'
   },
   router: {
     login: 'Login',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 1c8b3f7..9825d3a 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -105,25 +105,14 @@ export default {
   login: {
     welcome: '短剧内容管理',
     consoleLabel: '内容运营后台',
-    message: '管理短剧、剧集、发布状态和后台权限。',
     hint: '使用管理员账号进入工作台',
-    noAccount: '还没有账号？',
-    pointDrama: '短剧与剧集',
-    pointPublish: '发布状态',
-    pointAccess: '角色权限',
     username: '用户名',
     password: '密码',
-    register: '注册',
-    checkPassword: '确认密码',
     login: '登录',
-    otherLogin: '其它登录方式',
     remember: '记住我',
-    hasUser: '已有账号？去登录',
     forgetPassword: '忘记密码',
     usernamePlaceholder: '请输入用户名',
-    passwordPlaceholder: '请输入密码',
-    code: '验证码',
-    codePlaceholder: '请输入验证码'
+    passwordPlaceholder: '请输入密码'
   },
   router: {
     login: '登录',
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 8d444e7..ad10cc4 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -1,18 +1,17 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup lang="ts">
-import { LoginForm, RegisterForm } from './components'
+import { LoginForm } from './components'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { LocaleDropdown } from '@/components/LocaleDropdown'
 import { useI18n } from '@/hooks/web/useI18n'
 import { getCssVar, underlineToHump } from '@/utils'
 import { useAppStore } from '@/store/modules/app'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { ElScrollbar } from 'element-plus'
 
 const appStore = useAppStore()
 const { t } = useI18n()
-const isLogin = ref(true)
 const isDark = computed(() => appStore.getIsDark)
 const toolColor = computed(() => (isDark.value ? '#e5eaf3' : '#303133'))
 
@@ -35,12 +34,6 @@ const themeChange = () => {
           <div class="hero-copy">
             <p class="hero-kicker">{{ t('login.consoleLabel') }}</p>
             <h1>{{ t('login.welcome') }}</h1>
-            <p>{{ t('login.message') }}</p>
-            <ul>
-              <li>{{ t('login.pointDrama') }}</li>
-              <li>{{ t('login.pointPublish') }}</li>
-              <li>{{ t('login.pointAccess') }}</li>
-            </ul>
           </div>
         </section>
 
@@ -50,8 +43,7 @@ const themeChange = () => {
             <LocaleDropdown :color="toolColor" />
           </div>
           <div class="login-card">
-            <LoginForm v-if="isLogin" @to-register="isLogin = false" />
-            <RegisterForm v-else @to-login="isLogin = true" />
+            <LoginForm />
           </div>
         </section>
       </div>
@@ -130,40 +122,16 @@ const themeChange = () => {
     line-height: 1.2;
     color: #fff;
   }
-
-  p {
-    margin: 0;
-    font-size: 15px;
-    line-height: 1.7;
-    color: rgb(255 255 255 / 82%);
-  }
 }
 
 .hero-kicker {
+  margin: 0;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.08em;
   color: #d9ecff !important;
 }
 
-.hero-copy ul {
-  display: flex;
-  padding: 0;
-  margin: 28px 0 0;
-  list-style: none;
-  flex-wrap: wrap;
-  gap: 10px;
-
-  li {
-    padding: 8px 14px;
-    font-size: 13px;
-    color: #fff;
-    background: rgb(255 255 255 / 12%);
-    border: 1px solid rgb(255 255 255 / 18%);
-    border-radius: 999px;
-  }
-}
-
 .login-panel {
   position: relative;
   display: flex;
@@ -228,10 +196,6 @@ const themeChange = () => {
     font-size: 28px;
   }
 
-  .hero-copy ul {
-    display: none;
-  }
-
   .login-panel {
     padding: 44px 16px 12px;
   }
@@ -253,10 +217,6 @@ const themeChange = () => {
     padding: 16px 18px 18px;
   }
 
-  .hero-copy p {
-    font-size: 13px;
-  }
-
   .login-card {
     padding: 28px 20px 24px;
   }
@@ -282,25 +242,6 @@ const themeChange = () => {
   }
 }
 
-.login-register {
-  display: flex;
-  margin-top: 16px;
-  font-size: 14px;
-  color: var(--el-text-color-secondary);
-  gap: 6px;
-  align-items: center;
-  justify-content: center;
-
-  button {
-    padding: 0;
-    font: inherit;
-    color: var(--el-color-primary);
-    cursor: pointer;
-    background: none;
-    border: 0;
-  }
-}
-
 .login-card :deep(.el-button--primary) {
   --el-button-bg-color: var(--app-brand);
   --el-button-border-color: var(--app-brand);
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index 2aad1fe..ec583b9 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -6,7 +6,7 @@ import { Form, FormSchema } from '@/components/Form'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElCheckbox, ElLink } from 'element-plus'
 import { useForm } from '@/hooks/web/useForm'
-import { loginApi, getTestRoleApi, getAdminRoleApi } from '@/api/login'
+import { loginApi, getAdminRoleApi } from '@/api/login'
 import { useAppStore } from '@/store/modules/app'
 import { usePermissionStore } from '@/store/modules/permission'
 import { landingPath } from '@/utils/landing'
@@ -19,8 +19,6 @@ import { BaseButton } from '@/components/Button'
 
 const { required } = useValidator()
 
-const emit = defineEmits(['to-register'])
-
 const appStore = useAppStore()
 
 const userStore = useUserStore()
@@ -113,24 +111,11 @@ const schema = reactive<FormSchema[]>([
       slots: {
         default: () => {
           return (
-            <>
-              <div class="w-[100%]">
-                <BaseButton
-                  loading={loading.value}
-                  type="primary"
-                  class="w-[100%]"
-                  onClick={signIn}
-                >
-                  {t('login.login')}
-                </BaseButton>
-              </div>
-              <div class="login-register">
-                <span>{t('login.noAccount')}</span>
-                <button type="button" onClick={toRegister}>
-                  {t('login.register')}
-                </button>
-              </div>
-            </>
+            <div class="w-[100%]">
+              <BaseButton loading={loading.value} type="primary" class="w-[100%]" onClick={signIn}>
+                {t('login.login')}
+              </BaseButton>
+            </div>
           )
         }
       }
@@ -218,16 +203,11 @@ const getRole = async () => {
   const params = {
     roleName: formData.username
   }
-  const res =
-    appStore.getDynamicRouter && appStore.getServerDynamicRouter
-      ? await getAdminRoleApi(params)
-      : await getTestRoleApi(params)
+  const res = await getAdminRoleApi(params)
   if (res) {
     const routers = res.data || []
     userStore.setRoleRouters(routers)
-    appStore.getDynamicRouter && appStore.getServerDynamicRouter
-      ? await permissionStore.generateRoutes('server', routers).catch(() => {})
-      : await permissionStore.generateRoutes('frontEnd', routers).catch(() => {})
+    await permissionStore.generateRoutes('server', routers).catch(() => {})
 
     permissionStore.getAddRouters.forEach((route) => {
       addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
@@ -238,11 +218,6 @@ const getRole = async () => {
     push({ path: redirect.value || landingPath() })
   }
 }
-
-// 去注册页面
-const toRegister = () => {
-  emit('to-register')
-}
 </script>
 
 <template>
diff --git a/src/views/Login/components/RegisterForm.vue b/src/views/Login/components/RegisterForm.vue
deleted file mode 100644
index ad514d2..0000000
--- a/src/views/Login/components/RegisterForm.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<!-- Author: fruit.com.cn -->
-
-<script setup lang="tsx">
-import { Form, FormSchema } from '@/components/Form'
-import { reactive, ref } from 'vue'
-import { useI18n } from '@/hooks/web/useI18n'
-import { useForm } from '@/hooks/web/useForm'
-import { ElButton, ElInput, FormRules } from 'element-plus'
-import { useValidator } from '@/hooks/web/useValidator'
-
-const emit = defineEmits(['to-login'])
-
-const { formRegister, formMethods } = useForm()
-const { getElFormExpose } = formMethods
-
-const { t } = useI18n()
-
-const { required } = useValidator()
-
-const schema = reactive<FormSchema[]>([
-  {
-    field: 'title',
-    colProps: {
-      span: 24
-    },
-    formItemProps: {
-      slots: {
-        default: () => {
-          return (
-            <div class="login-heading">
-              <h2>{t('login.register')}</h2>
-              <p>{t('login.message')}</p>
-            </div>
-          )
-        }
-      }
-    }
-  },
-  {
-    field: 'username',
-    label: t('login.username'),
-    value: '',
-    component: 'Input',
-    colProps: {
-      span: 24
-    },
-    componentProps: {
-      placeholder: t('login.usernamePlaceholder')
-    }
-  },
-  {
-    field: 'password',
-    label: t('login.password'),
-    value: '',
-    component: 'InputPassword',
-    colProps: {
-      span: 24
-    },
-    componentProps: {
-      style: {
-        width: '100%'
-      },
-      strength: true,
-      placeholder: t('login.passwordPlaceholder')
-    }
-  },
-  {
-    field: 'check_password',
-    label: t('login.checkPassword'),
-    value: '',
-    component: 'InputPassword',
-    colProps: {
-      span: 24
-    },
-    componentProps: {
-      style: {
-        width: '100%'
-      },
-      strength: true,
-      placeholder: t('login.passwordPlaceholder')
-    }
-  },
-  {
-    field: 'code',
-    label: t('login.code'),
-    colProps: {
-      span: 24
-    },
-    formItemProps: {
-      slots: {
-        default: (formData) => {
-          return (
-            <div class="w-[100%] flex">
-              <ElInput v-model={formData.code} placeholder={t('login.codePlaceholder')} />
-            </div>
-          )
-        }
-      }
-    }
-  },
-  {
-    field: 'register',
-    colProps: {
-      span: 24
-    },
-    formItemProps: {
-      slots: {
-        default: () => {
-          return (
-            <>
-              <div class="w-[100%]">
-                <ElButton
-                  type="primary"
-                  class="w-[100%]"
-                  loading={loading.value}
-                  onClick={loginRegister}
-                >
-                  {t('login.register')}
-                </ElButton>
-              </div>
-              <div class="w-[100%] mt-15px">
-                <ElButton class="w-[100%]" onClick={toLogin}>
-                  {t('login.hasUser')}
-                </ElButton>
-              </div>
-            </>
-          )
-        }
-      }
-    }
-  }
-])
-
-const rules: FormRules = {
-  username: [required()],
-  password: [required()],
-  check_password: [required()],
-  code: [required()]
-}
-
-const toLogin = () => {
-  emit('to-login')
-}
-
-const loading = ref(false)
-
-const loginRegister = async () => {
-  const formRef = await getElFormExpose()
-  formRef?.validate(async (valid) => {
-    if (valid) {
-      try {
-        loading.value = true
-        toLogin()
-      } finally {
-        loading.value = false
-      }
-    }
-  })
-}
-</script>
-
-<template>
-  <Form
-    :schema="schema"
-    :rules="rules"
-    label-position="top"
-    hide-required-asterisk
-    size="large"
-    class="login-form"
-    @register="formRegister"
-  />
-</template>
diff --git a/src/views/Login/components/index.ts b/src/views/Login/components/index.ts
index c905ad5..564db9d 100644
--- a/src/views/Login/components/index.ts
+++ b/src/views/Login/components/index.ts
@@ -1,6 +1,5 @@
 // Author: fruit.com.cn
 
 import LoginForm from './LoginForm.vue'
-import RegisterForm from './RegisterForm.vue'
 
-export { LoginForm, RegisterForm }
+export { LoginForm }

From 87970487af1a14589e4c28a78ab6061b66c736f2 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 11:32:00 +0800
Subject: [PATCH 07/59] =?UTF-8?q?chore(web):=20=E6=B8=85=E7=90=86=20mock?=
 =?UTF-8?q?=20=E4=B8=8E=E6=97=A7=E5=93=81=E7=89=8C=E8=B5=84=E6=BA=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.base                               |   2 +-
 .env.dev                                |   4 +-
 .env.pro                                |   4 +-
 .env.test                               |   4 +-
 index.html                              |  33 ++----
 mock/_createProductionServer.ts         |  20 ----
 mock/role/index.mock.ts                 | 131 ------------------------
 mock/user/index.mock.ts                 |  92 -----------------
 package.json                            |   3 -
 public/brand-mark.png                   | Bin 0 -> 6007 bytes
 public/favicon.ico                      | Bin 4286 -> 0 bytes
 public/logo.png                         | Bin 9193 -> 0 bytes
 src/api/login/index.ts                  |   4 -
 src/assets/imgs/avatar.jpg              | Bin 6264 -> 0 bytes
 src/assets/imgs/logo.png                | Bin 9193 -> 0 bytes
 src/components/Logo/src/Logo.vue        |   7 +-
 src/views/permission/CustomMenuView.vue |  19 ----
 tsconfig.json                           |   2 +-
 uno.config.ts                           |  14 +--
 vite.config.mts                         |  14 ---
 20 files changed, 29 insertions(+), 324 deletions(-)
 delete mode 100644 mock/_createProductionServer.ts
 delete mode 100644 mock/role/index.mock.ts
 delete mode 100644 mock/user/index.mock.ts
 create mode 100644 public/brand-mark.png
 delete mode 100644 public/favicon.ico
 delete mode 100644 public/logo.png
 delete mode 100644 src/assets/imgs/avatar.jpg
 delete mode 100644 src/assets/imgs/logo.png
 delete mode 100644 src/views/permission/CustomMenuView.vue

diff --git a/.env.base b/.env.base
index 6357a92..a7ed28d 100644
--- a/.env.base
+++ b/.env.base
@@ -17,4 +17,4 @@ VITE_USE_ALL_ELEMENT_PLUS_STYLE=true
 VITE_USE_MOCK=false
 
 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=false
diff --git a/.env.dev b/.env.dev
index 7de1c6f..f239e31 100644
--- a/.env.dev
+++ b/.env.dev
@@ -29,10 +29,10 @@ VITE_USE_BUNDLE_ANALYZER=false
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 
 # 是否开启mock
-VITE_USE_MOCK=true
+VITE_USE_MOCK=false
 
 # 是否切割css
 VITE_USE_CSS_SPLIT=true
 
 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=false
diff --git a/.env.pro b/.env.pro
index bf5d37d..935057a 100644
--- a/.env.pro
+++ b/.env.pro
@@ -29,10 +29,10 @@ VITE_USE_BUNDLE_ANALYZER=true
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 
 # 是否开启mock
-VITE_USE_MOCK=true
+VITE_USE_MOCK=false
 
 # 是否切割css
 VITE_USE_CSS_SPLIT=true
 
 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=false
diff --git a/.env.test b/.env.test
index be7aae9..56fdea5 100644
--- a/.env.test
+++ b/.env.test
@@ -29,10 +29,10 @@ VITE_USE_BUNDLE_ANALYZER=false
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 
 # 是否开启mock
-VITE_USE_MOCK=true
+VITE_USE_MOCK=false
 
 # 是否切割css
 VITE_USE_CSS_SPLIT=false
 
 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=false
diff --git a/index.html b/index.html
index 60f5b87..0f748a0 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" href="/brand-mark.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= title %></title>
   </head>
@@ -16,7 +16,8 @@
           justify-content: center;
           align-items: center;
           flex-direction: column;
-          background: #f0f2f5;
+          color: #f5eee9;
+          background: #100c0a;
         }
 
         .app-loading .app-loading-wrap {
@@ -38,8 +39,9 @@
         }
 
         .app-loading .app-loading-logo {
-          width: 100px;
+          width: 72px;
           margin: 0 auto 15px;
+          border-radius: 12px;
         }
 
         .app-loading .app-loading-item {
@@ -55,7 +57,7 @@
           position: absolute;
           width: 100%;
           height: 100%;
-          border: 4px solid #2d8cf0;
+          border: 4px solid #c4322a;
           border-bottom: 0;
           border-left-color: transparent;
           border-radius: 50%;
@@ -68,7 +70,7 @@
           left: calc(50% - 20px);
           width: 40px;
           height: 40px;
-          border: 4px solid #87bdff;
+          border: 4px solid #ff8a72;
           border-right: 0;
           border-top-color: transparent;
           border-radius: 50%;
@@ -85,16 +87,6 @@
           }
         }
 
-        @keyframes loader-outter {
-          0% {
-            transform: rotate(0deg);
-          }
-
-          100% {
-            transform: rotate(360deg);
-          }
-        }
-
         @keyframes loader-inner {
           0% {
             transform: rotate(0deg);
@@ -105,20 +97,11 @@
           }
         }
 
-        @keyframes loader-inner {
-          0% {
-            transform: rotate(0deg);
-          }
-
-          100% {
-            transform: rotate(-360deg);
-          }
-        }
       </style>
       <div class="app-loading">
         <div class="app-loading-wrap">
           <div class="app-loading-title">
-            <img src="/logo.png" class="app-loading-logo" alt="Logo" />
+            <img src="/brand-mark.png" class="app-loading-logo" alt="Logo" />
             <div class="app-loading-title"><%= title %></div>
           </div>
           <div class="app-loading-item">
diff --git a/mock/_createProductionServer.ts b/mock/_createProductionServer.ts
deleted file mode 100644
index c289b03..0000000
--- a/mock/_createProductionServer.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Author: fruit.com.cn
-
-import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
-
-const modules = import.meta.glob('./**/*.mock.ts', {
-  import: 'default',
-  eager: true
-})
-
-const mockModules: any[] = []
-Object.keys(modules).forEach(async (key) => {
-  if (key.includes('_')) {
-    return
-  }
-  mockModules.push(...(modules[key] as any))
-})
-
-export function setupProdMockServer() {
-  createProdMockServer(mockModules)
-}
diff --git a/mock/role/index.mock.ts b/mock/role/index.mock.ts
deleted file mode 100644
index a483d96..0000000
--- a/mock/role/index.mock.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-// Author: fruit.com.cn
-
-import { MockMethod } from 'vite-plugin-mock'
-import { SUCCESS_CODE } from '@/constants'
-
-const timeout = 1000
-
-const adminList = [
-  {
-    path: '/dashboard',
-    component: '#',
-    redirect: '/dashboard/index',
-    name: 'Dashboard',
-    meta: {
-      title: '工作台',
-      icon: 'ant-design:dashboard-filled'
-    },
-    children: [
-      {
-        path: 'index',
-        name: 'dashboard',
-        component: 'views/common/DashboardView',
-        meta: {
-          title: '工作台',
-          icon: 'ant-design:dashboard-filled',
-          affix: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/content',
-    component: '#',
-    redirect: '/content/dramas',
-    name: 'Content',
-    meta: {
-      title: '内容管理',
-      icon: 'ep:video-camera',
-      alwaysShow: true
-    },
-    children: [
-      {
-        path: 'dramas',
-        name: 'dramas',
-        component: 'views/contentManagement/DramaManagementView',
-        meta: {
-          title: '短剧管理'
-        }
-      },
-      {
-        path: 'episodes',
-        name: 'episodes',
-        component: 'views/contentManagement/EpisodeManagementView',
-        meta: {
-          title: '剧集管理'
-        }
-      }
-    ]
-  },
-  {
-    path: '/system',
-    component: '#',
-    redirect: '/system/access',
-    name: 'System',
-    meta: {
-      title: '后台管理',
-      icon: 'ep:setting',
-      alwaysShow: true
-    },
-    children: [
-      {
-        path: 'access',
-        name: 'access',
-        component: 'views/permission/RoleManagementView',
-        meta: {
-          title: '角色权限配置'
-        }
-      },
-      {
-        path: 'admin-users',
-        name: 'admin-users',
-        component: 'views/userManagement/AdminUsersView',
-        meta: {
-          title: '管理员用户列表'
-        }
-      },
-      {
-        path: 'menus',
-        name: 'menus',
-        component: 'views/permission/MenuManagementView',
-        meta: {
-          title: '菜单管理'
-        }
-      },
-      {
-        path: 'role-categories',
-        name: 'role-categories',
-        component: 'views/permission/RoleCategoriesView',
-        meta: {
-          title: '角色分类'
-        }
-      },
-      {
-        path: 'settings',
-        name: 'settings',
-        component: 'views/systemManagement/SettingsView',
-        meta: {
-          title: '系统设置'
-        }
-      }
-    ]
-  }
-]
-
-const testList = adminList.filter((route) => route.path !== '/system')
-
-export default [
-  // 列表接口
-  {
-    url: '/mock/role/list',
-    method: 'get',
-    timeout,
-    response: ({ query }) => {
-      const { roleName } = query
-      return {
-        code: SUCCESS_CODE,
-        data: roleName === 'admin' ? adminList : testList
-      }
-    }
-  }
-] as MockMethod[]
diff --git a/mock/user/index.mock.ts b/mock/user/index.mock.ts
deleted file mode 100644
index 4595f34..0000000
--- a/mock/user/index.mock.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-// Author: fruit.com.cn
-
-import { SUCCESS_CODE } from '@/constants'
-
-const timeout = 1000
-
-const List: {
-  username: string
-  password: string
-  role: string
-  roleId: string
-  permissions: string | string[]
-}[] = [
-  {
-    username: 'admin',
-    password: 'admin123',
-    role: 'admin',
-    roleId: '1',
-    permissions: ['*.*.*']
-  },
-  {
-    username: 'test',
-    password: 'test',
-    role: 'test',
-    roleId: '2',
-    permissions: ['example:dialog:create', 'example:dialog:delete']
-  }
-]
-
-export default [
-  // 列表接口
-  {
-    url: '/mock/user/list',
-    method: 'get',
-    response: ({ query }) => {
-      const { username, pageIndex, pageSize } = query
-
-      const mockList = List.filter((item) => {
-        if (username && item.username.indexOf(username) < 0) return false
-        return true
-      })
-      const pageList = mockList.filter(
-        (_, index) => index < pageSize * pageIndex && index >= pageSize * (pageIndex - 1)
-      )
-
-      return {
-        code: SUCCESS_CODE,
-        data: {
-          total: mockList.length,
-          list: pageList
-        }
-      }
-    }
-  },
-  // 登录接口
-  {
-    url: '/mock/user/login',
-    method: 'post',
-    timeout,
-    response: ({ body }) => {
-      const data = body
-      let hasUser = false
-      for (const user of List) {
-        if (user.username === data.username && user.password === data.password) {
-          hasUser = true
-          return {
-            code: SUCCESS_CODE,
-            data: user
-          }
-        }
-      }
-      if (!hasUser) {
-        return {
-          code: 500,
-          message: '账号或密码错误'
-        }
-      }
-    }
-  },
-  // 退出接口
-  {
-    url: '/mock/user/loginOut',
-    method: 'get',
-    timeout,
-    response: () => {
-      return {
-        code: SUCCESS_CODE,
-        data: null
-      }
-    }
-  }
-]
diff --git a/package.json b/package.json
index e441b28..0c3f7e6 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,6 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.3.2",
-    "@faker-js/faker": "^8.4.0",
     "@iconify/iconify": "^3.1.1",
     "@iconify/vue": "^4.1.1",
     "@vueuse/core": "^10.7.2",
@@ -103,7 +101,6 @@
     "vite": "5.0.12",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-mock": "2.9.6",
     "vite-plugin-progress": "^0.0.7",
     "vite-plugin-purge-icons": "^0.10.0",
     "vite-plugin-style-import": "2.0.0",
diff --git a/public/brand-mark.png b/public/brand-mark.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6f5dc1428f6699146c6a85cdb811e683e9d27cb
GIT binary patch
literal 6007
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
Q33cF#w!T&|-sbUt0nW?M#sB~S

literal 0
HcmV?d00001

diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 5a7de08267811feb034bb0c54ab38ca417731aab..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4286
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
L_}7DgzT)vecywrn

diff --git a/public/logo.png b/public/logo.png
deleted file mode 100644
index b76c71b6ba9a0f73203fbf745fe93d240a3c7802..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9193
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
X5_)J=A58xJn+`(LK;w&=?YsX2HuGA3

diff --git a/src/api/login/index.ts b/src/api/login/index.ts
index 5cff93a..68ca033 100644
--- a/src/api/login/index.ts
+++ b/src/api/login/index.ts
@@ -26,10 +26,6 @@ export const getAdminRoleApi = (
   return request.get({ url: '/admin/auth/menus', params })
 }
 
-export const getTestRoleApi = (params: RoleParams): Promise<IResponse<string[]>> => {
-  return request.get({ url: '/mock/role/list2', params })
-}
-
 /** 自助改密（首登强制改密也走这个接口） */
 export const changePasswordApi = (data: { oldPassword: string; newPassword: string }) => {
   return request.post<void>({ url: '/admin/auth/password', data })
diff --git a/src/assets/imgs/avatar.jpg b/src/assets/imgs/avatar.jpg
deleted file mode 100644
index d46a70a46430e31744420865138cc7eedb8b77e1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6264
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
BLq7lj

diff --git a/src/assets/imgs/logo.png b/src/assets/imgs/logo.png
deleted file mode 100644
index b76c71b6ba9a0f73203fbf745fe93d240a3c7802..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9193
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
X5_)J=A58xJn+`(LK;w&=?YsX2HuGA3

diff --git a/src/components/Logo/src/Logo.vue b/src/components/Logo/src/Logo.vue
index a0d4212..6a7c88d 100644
--- a/src/components/Logo/src/Logo.vue
+++ b/src/components/Logo/src/Logo.vue
@@ -68,7 +68,12 @@ watch(
     >
       <img
         src="@/assets/imgs/brand-mark.png"
-        class="w-[var(--brand-mark-size)] h-[var(--brand-mark-size)] rounded-[var(--brand-mark-radius)] object-cover"
+        class="object-cover"
+        style="
+          width: var(--brand-mark-size);
+          height: var(--brand-mark-size);
+          border-radius: var(--brand-mark-radius);
+        "
       />
       <div
         v-if="show"
diff --git a/src/views/permission/CustomMenuView.vue b/src/views/permission/CustomMenuView.vue
deleted file mode 100644
index ddd12d1..0000000
--- a/src/views/permission/CustomMenuView.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- Author: fruit.com.cn -->
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-
-const route = useRoute()
-const title = computed(() => (route.meta?.title as string) || '菜单页面')
-</script>
-
-<template>
-  <div class="page-heading"
-    ><div
-      ><div class="eyebrow">自定义菜单</div><h1>{{ title }}</h1
-      ><p>该菜单已注册，可在菜单管理中把组件路径指向已有页面。</p></div
-    ></div
-  >
-  <section class="panel"><el-empty description="菜单已创建，可以继续配置页面内容。" /></section>
-</template>
diff --git a/tsconfig.json b/tsconfig.json
index 966aba7..ec64a3f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -31,6 +31,6 @@
       "@types/qrcode"
     ]
   },
-  "include": ["src", "types/**/*.d.ts", "mock/**/*.ts"]
+  "include": ["src", "types/**/*.d.ts"]
   // "exclude": ["dist", "node_modules"]
 }
diff --git a/uno.config.ts b/uno.config.ts
index d9fcd52..64de5b2 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -3,6 +3,7 @@
 import { defineConfig, toEscapedSelector as e, presetUno, presetIcons } from 'unocss'
 import transformerVariantGroup from '@unocss/transformer-variant-group'
 import { loadEnv } from 'vite'
+import { AppIcons } from './src/constants/icons'
 
 const root = process.cwd()
 
@@ -20,13 +21,11 @@ const createPresetIcons = () => {
   } else {
     return [
       presetIcons({
-        prefix: ''
-        // 由于默认加载的是所有的图标，启动会非常慢，可以在这里去加载需要的图标，确保启动速度
-        // collections: {
-        //   carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
-        //   mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default),
-        //   logos: () => import('@iconify-json/logos/icons.json').then(i => i.default),
-        // }
+        prefix: '',
+        collections: {
+          'material-symbols': () =>
+            import('@iconify/json/json/material-symbols.json').then((i) => i.default)
+        }
       })
     ]
   }
@@ -142,6 +141,7 @@ ${selector}:after {
       }
     ]
   ],
+  safelist: Object.values(AppIcons),
   presets: [presetUno({ dark: 'class', attributify: false }), ...createPresetIcons()],
   transformers: [transformerVariantGroup()],
   content: {
diff --git a/vite.config.mts b/vite.config.mts
index 05a50a5..fa5bcbc 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -5,7 +5,6 @@ import Vue from '@vitejs/plugin-vue'
 import VueJsx from '@vitejs/plugin-vue-jsx'
 import progress from 'vite-plugin-progress'
 import { ViteEjsPlugin } from "vite-plugin-ejs"
-import { viteMockServe } from 'vite-plugin-mock'
 import PurgeIcons from 'vite-plugin-purge-icons'
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite"
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
@@ -67,19 +66,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         svgoOptions: true
       }),
       PurgeIcons(),
-      env.VITE_USE_MOCK === 'true'
-        ? viteMockServe({
-            ignore: /^\_/,
-            mockPath: 'mock',
-            localEnabled: !isBuild,
-            prodEnabled: isBuild,
-            injectCode: `
-          import { setupProdMockServer } from '../mock/_createProductionServer'
-
-          setupProdMockServer()
-          `
-          })
-        : undefined,
       ViteEjsPlugin({
         title: env.VITE_APP_TITLE
       }),

From a97b8cc026196c15872e392f7f268d39a11853cf Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 11:34:15 +0800
Subject: [PATCH 08/59] =?UTF-8?q?fix(web):=20=E4=BF=AE=E6=AD=A3=E9=A6=96?=
 =?UTF-8?q?=E5=B1=8F=20loading=20=E6=96=87=E5=AD=97=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 0f748a0..14fed37 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
           justify-content: center;
           align-items: center;
           flex-direction: column;
-          color: #f5eee9;
+          color: #f8f1ea;
           background: #100c0a;
         }
 

From ba90bf9bfbcddc10f543bcb63f0e07f84ca393ec Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 12:00:21 +0800
Subject: [PATCH 09/59] =?UTF-8?q?style(web):=20=E7=BB=9F=E4=B8=80=E8=BE=A3?=
 =?UTF-8?q?=E6=A4=92=E7=BA=A2=E4=B8=BB=E8=89=B2=E4=B8=8E=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=B1=82=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Menu/src/components/useRenderMenuItem.tsx |   9 +-
 .../src/components/useRenderMenuTitle.tsx     |   4 +-
 src/components/Setting/src/Setting.vue        |   2 +-
 src/store/modules/app.ts                      |   6 +-
 src/styles/business/dark.css                  |  16 +--
 src/styles/business/index.css                 |   1 +
 src/styles/business/menu.css                  | 131 ++++++++++++++++++
 src/styles/business/theme.css                 |  48 ++++---
 src/views/Login/Login.vue                     |   2 +-
 src/views/permission/MenuManagementView.vue   |   2 +-
 .../composables/useMenuManagement.js          |   4 +-
 11 files changed, 185 insertions(+), 40 deletions(-)
 create mode 100644 src/styles/business/menu.css

diff --git a/src/components/Menu/src/components/useRenderMenuItem.tsx b/src/components/Menu/src/components/useRenderMenuItem.tsx
index 301313f..0132652 100644
--- a/src/components/Menu/src/components/useRenderMenuItem.tsx
+++ b/src/components/Menu/src/components/useRenderMenuItem.tsx
@@ -9,7 +9,7 @@ const { renderMenuTitle } = useRenderMenuTitle()
 export const useRenderMenuItem = () =>
   // allRouters: AppRouteRecordRaw[] = [],
   {
-    const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
+    const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/', nested = false) => {
       return routers
         .filter((v) => !v.meta?.hidden)
         .map((v) => {
@@ -27,7 +27,8 @@ export const useRenderMenuItem = () =>
                 index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
               >
                 {{
-                  default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
+                  default: () =>
+                    renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta, !nested)
                 }}
               </ElMenuItem>
             )
@@ -35,8 +36,8 @@ export const useRenderMenuItem = () =>
             return (
               <ElSubMenu index={fullPath}>
                 {{
-                  title: () => renderMenuTitle(meta),
-                  default: () => renderMenuItem(v.children!, fullPath)
+                  title: () => renderMenuTitle(meta, !nested),
+                  default: () => renderMenuItem(v.children!, fullPath, true)
                 }}
               </ElSubMenu>
             )
diff --git a/src/components/Menu/src/components/useRenderMenuTitle.tsx b/src/components/Menu/src/components/useRenderMenuTitle.tsx
index 5c3dde8..838423e 100644
--- a/src/components/Menu/src/components/useRenderMenuTitle.tsx
+++ b/src/components/Menu/src/components/useRenderMenuTitle.tsx
@@ -5,11 +5,11 @@ import { AppIcon } from '@/components/AppIcon'
 import { useI18n } from '@/hooks/web/useI18n'
 
 export const useRenderMenuTitle = () => {
-  const renderMenuTitle = (meta: RouteMeta) => {
+  const renderMenuTitle = (meta: RouteMeta, showIcon = true) => {
     const { t } = useI18n()
     const { title = 'Please set title', icon } = meta
 
-    return icon ? (
+    return icon && showIcon ? (
       <>
         <AppIcon icon={meta.icon}></AppIcon>
         <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">
diff --git a/src/components/Setting/src/Setting.vue b/src/components/Setting/src/Setting.vue
index 6f25ee1..e60cf2d 100644
--- a/src/components/Setting/src/Setting.vue
+++ b/src/components/Setting/src/Setting.vue
@@ -195,7 +195,7 @@ const themeChange = () => {
       <ColorRadioPicker
         v-model="systemTheme"
         :schema="[
-          '#409eff',
+          '#c4322a',
           '#009688',
           '#536dfe',
           '#ff5c93',
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 51c8778..e11ca33 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -67,7 +67,7 @@ export const useAppStore = defineStore('app', {
       currentSize: 'default', // 组件尺寸
       theme: {
         // 主题色
-        elColorPrimary: '#409eff',
+        elColorPrimary: '#c4322a',
         // 左侧菜单边框颜色
         leftMenuBorderColor: 'inherit',
         // 左侧菜单背景颜色
@@ -343,6 +343,10 @@ export const useAppStore = defineStore('app', {
   persist: {
     afterRestore: (context) => {
       context.store.title = import.meta.env.VITE_APP_TITLE
+      if (context.store.theme?.elColorPrimary !== '#c4322a') {
+        context.store.setTheme({ elColorPrimary: '#c4322a' })
+        context.store.setCssVarTheme()
+      }
     }
   }
 })
diff --git a/src/styles/business/dark.css b/src/styles/business/dark.css
index c1c3f6a..51a7640 100644
--- a/src/styles/business/dark.css
+++ b/src/styles/business/dark.css
@@ -28,12 +28,12 @@ html.dark .role-card {
 
 html.dark .stat-icon,
 html.dark .role-icon {
-  background: rgb(64 158 255 / 16%) !important;
+  background: color-mix(in srgb, var(--el-color-primary) 18%, transparent) !important;
   color: var(--el-color-primary) !important;
 }
 
 html.dark .role-active {
-  background: rgb(64 158 255 / 12%);
+  background: color-mix(in srgb, var(--el-color-primary) 14%, transparent);
   border-color: var(--el-color-primary);
 }
 
@@ -106,12 +106,12 @@ html.dark .el-tag.status-badge.is-draft {
   color: #c0c4cc !important;
 }
 html.dark .el-tag.status-badge.is-pending {
-  --el-tag-bg-color: rgba(64, 158, 255, 0.18);
-  --el-tag-border-color: rgba(121, 187, 255, 0.45);
-  --el-tag-text-color: #8cc5ff;
-  background: rgba(64, 158, 255, 0.18) !important;
-  border-color: rgba(121, 187, 255, 0.45) !important;
-  color: #8cc5ff !important;
+  --el-tag-bg-color: color-mix(in srgb, var(--el-color-primary) 18%, transparent);
+  --el-tag-border-color: color-mix(in srgb, var(--el-color-primary) 45%, transparent);
+  --el-tag-text-color: var(--el-color-primary-light-5);
+  background: color-mix(in srgb, var(--el-color-primary) 18%, transparent) !important;
+  border-color: color-mix(in srgb, var(--el-color-primary) 45%, transparent) !important;
+  color: var(--el-color-primary-light-5) !important;
 }
 html.dark .el-tag.status-badge.is-offline {
   --el-tag-bg-color: rgba(245, 108, 108, 0.18);
diff --git a/src/styles/business/index.css b/src/styles/business/index.css
index 3e58968..415def2 100644
--- a/src/styles/business/index.css
+++ b/src/styles/business/index.css
@@ -8,4 +8,5 @@
 @import './console.css';
 @import './creator-center.css';
 @import './layout.css';
+@import './menu.css';
 @import './dark.css';
diff --git a/src/styles/business/menu.css b/src/styles/business/menu.css
new file mode 100644
index 0000000..de29fdd
--- /dev/null
+++ b/src/styles/business/menu.css
@@ -0,0 +1,131 @@
+/* 左侧菜单：统一行高、缩进、图标和选中态。 */
+#v-menu .el-menu {
+  padding: 4px 0;
+  background: transparent;
+}
+
+#v-menu .el-menu-item,
+#v-menu .el-sub-menu__title {
+  height: 44px;
+  padding-left: 8px !important;
+  margin: 4px 8px;
+  overflow: hidden;
+  color: var(--left-menu-text-color);
+  font-size: 14px;
+  line-height: 44px;
+  border-radius: 8px;
+  transition:
+    color var(--transition-time-02),
+    background-color var(--transition-time-02);
+}
+
+#v-menu .el-menu--inline {
+  padding-left: 0 !important;
+}
+
+#v-menu .el-menu--inline .el-menu-item,
+#v-menu .el-menu--inline .el-sub-menu__title {
+  height: 40px;
+  padding-left: 0 !important;
+  margin: 3px 8px 3px 42px;
+  line-height: 40px;
+}
+
+#v-menu .el-menu--inline .app-icon {
+  display: none;
+}
+
+#v-menu .el-menu-item .app-icon,
+#v-menu .el-sub-menu__title .app-icon {
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+
+#v-menu .el-menu-item:hover,
+#v-menu .el-sub-menu__title:hover,
+#v-menu .el-sub-menu.is-opened > .el-sub-menu__title,
+#v-menu .el-sub-menu.is-active > .el-sub-menu__title,
+#v-menu .el-menu-item.is-active {
+  color: var(--el-color-primary) !important;
+  background-color: var(--el-color-primary-light-9) !important;
+}
+
+#v-menu .el-menu .el-menu {
+  background: transparent;
+}
+
+#v-menu .el-menu--collapse .el-menu-item,
+#v-menu .el-menu--collapse .el-sub-menu__title {
+  justify-content: center;
+  padding: 0 !important;
+  margin: 4px 6px;
+}
+
+#v-menu .el-menu--collapse .app-icon {
+  margin-right: 0;
+}
+
+html.dark #v-menu .el-menu-item:hover,
+html.dark #v-menu .el-sub-menu__title:hover {
+  color: #fff !important;
+  background-color: color-mix(in srgb, var(--el-color-primary) 72%, transparent) !important;
+}
+
+html.dark #v-menu .el-sub-menu.is-opened > .el-sub-menu__title,
+html.dark #v-menu .el-sub-menu.is-active > .el-sub-menu__title,
+html.dark #v-menu .el-menu-item.is-active {
+  color: #fff !important;
+  background-color: var(--app-primary-strong) !important;
+}
+
+.v-menu-popper--vertical,
+.v-menu-popper--horizontal {
+  padding: 4px;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 8px;
+  background: var(--el-bg-color-overlay);
+}
+
+.v-menu-popper--vertical .el-menu-item,
+.v-menu-popper--vertical .el-sub-menu__title,
+.v-menu-popper--horizontal .el-menu-item,
+.v-menu-popper--horizontal .el-sub-menu__title {
+  height: 40px;
+  padding-left: 16px !important;
+  margin: 2px 4px;
+  color: var(--el-text-color-regular);
+  font-size: 14px;
+  line-height: 40px;
+  border-radius: 8px;
+}
+
+.v-menu-popper--vertical .app-icon,
+.v-menu-popper--horizontal .app-icon {
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+
+.v-menu-popper--vertical .el-menu-item:hover,
+.v-menu-popper--horizontal .el-menu-item:hover,
+.v-menu-popper--vertical .el-menu-item.is-active,
+.v-menu-popper--horizontal .el-menu-item.is-active {
+  color: var(--el-color-primary) !important;
+  background-color: var(--el-color-primary-light-9) !important;
+}
+
+html.dark .v-menu-popper--vertical,
+html.dark .v-menu-popper--horizontal {
+  border-color: var(--el-border-color);
+}
+
+html.dark .v-menu-popper--vertical .el-menu-item:hover,
+html.dark .v-menu-popper--horizontal .el-menu-item:hover,
+html.dark .v-menu-popper--vertical .el-menu-item.is-active,
+html.dark .v-menu-popper--horizontal .el-menu-item.is-active {
+  color: #fff !important;
+  background-color: var(--app-primary-strong) !important;
+}
diff --git a/src/styles/business/theme.css b/src/styles/business/theme.css
index 3d54de4..6831643 100644
--- a/src/styles/business/theme.css
+++ b/src/styles/business/theme.css
@@ -15,13 +15,13 @@
   font-family: var(--font-body);
   color: var(--el-text-color-primary);
   background: var(--el-bg-color-page);
-  --el-color-primary: #409eff;
-  --el-color-primary-light-3: #79bbff;
-  --el-color-primary-light-5: #a0cfff;
-  --el-color-primary-light-7: #c6e2ff;
-  --el-color-primary-light-8: #d9ecff;
-  --el-color-primary-light-9: #ecf5ff;
-  --el-color-primary-dark-2: #337ecc;
+  --el-color-primary: #c4322a;
+  --el-color-primary-light-3: #d3615b;
+  --el-color-primary-light-5: #e19995;
+  --el-color-primary-light-7: #f0c2c0;
+  --el-color-primary-light-8: #f5d9d8;
+  --el-color-primary-light-9: #faeeed;
+  --el-color-primary-dark-2: #9d2822;
   --purple: var(--el-color-primary);
   --muted: #909399;
   --line: #e4e7ed;
@@ -30,6 +30,14 @@ body {
   background: var(--el-bg-color-page);
   color: var(--el-text-color-primary);
 }
+.el-button--primary {
+  --el-button-bg-color: var(--el-color-primary);
+  --el-button-border-color: var(--el-color-primary);
+  --el-button-hover-bg-color: var(--el-color-primary-dark-2);
+  --el-button-hover-border-color: var(--el-color-primary-dark-2);
+  --el-button-active-bg-color: var(--el-color-primary-dark-2);
+  --el-button-active-border-color: var(--el-color-primary-dark-2);
+}
 .eyebrow {
   letter-spacing: 0.7px;
   color: #9298a1;
@@ -52,8 +60,8 @@ body {
   box-shadow: none !important;
 }
 .primary-button:hover {
-  background: var(--el-color-primary-light-3) !important;
-  border-color: var(--el-color-primary-light-3) !important;
+  background: var(--el-color-primary-dark-2) !important;
+  border-color: var(--el-color-primary-dark-2) !important;
 }
 .stats-grid {
   gap: 12px;
@@ -73,7 +81,7 @@ body {
 }
 .stat-icon {
   border-radius: var(--app-radius-sm);
-  background: #ecf5ff !important;
+  background: var(--el-color-primary-light-9) !important;
   color: var(--el-color-primary) !important;
 }
 .stat-value {
@@ -97,7 +105,7 @@ body {
   color: #61738a;
 }
 .chart-svg path:first-of-type {
-  fill: #d9ecff;
+  fill: var(--el-color-primary-light-8);
 }
 .chart-svg path:last-of-type {
   stroke: var(--el-color-primary);
@@ -241,12 +249,12 @@ body {
   border-color: #e7e9ec;
 }
 .role-active {
-  border-color: #a0cfff;
-  background: #ecf5ff;
+  border-color: var(--el-color-primary-light-5);
+  background: var(--el-color-primary-light-9);
 }
 .role-icon {
   border-radius: var(--app-radius-sm);
-  background: #ecf5ff !important;
+  background: var(--el-color-primary-light-9) !important;
   color: var(--el-color-primary) !important;
 }
 .role-badge {
@@ -314,12 +322,12 @@ body {
   color: #6b7280 !important;
 }
 .el-tag.status-badge.is-pending {
-  --el-tag-bg-color: #ecf5ff;
-  --el-tag-border-color: #c6e2ff;
-  --el-tag-text-color: #2b7de9;
-  background: #ecf5ff !important;
-  border-color: #c6e2ff !important;
-  color: #2b7de9 !important;
+  --el-tag-bg-color: var(--el-color-primary-light-9);
+  --el-tag-border-color: var(--el-color-primary-light-7);
+  --el-tag-text-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9) !important;
+  border-color: var(--el-color-primary-light-7) !important;
+  color: var(--el-color-primary) !important;
 }
 .el-tag.status-badge.is-offline {
   --el-tag-bg-color: #fdecec;
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index ad10cc4..f98d12b 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -129,7 +129,7 @@ const themeChange = () => {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.08em;
-  color: #d9ecff !important;
+  color: var(--el-color-primary-light-8) !important;
 }
 
 .login-panel {
diff --git a/src/views/permission/MenuManagementView.vue b/src/views/permission/MenuManagementView.vue
index 24d5c11..43bab91 100644
--- a/src/views/permission/MenuManagementView.vue
+++ b/src/views/permission/MenuManagementView.vue
@@ -75,7 +75,7 @@ const { treeData, loading, form, parentOptions, resetForm, selectNode, saveMenu,
         <el-form-item label="权限标识">
           <el-input v-model="form.permissionCode" placeholder="例如 drama:list" />
         </el-form-item>
-        <el-form-item v-if="form.type !== 'BUTTON'" label="菜单图标">
+        <el-form-item v-if="form.type === 'CATALOG'" label="菜单图标">
           <el-select v-model="form.icon" clearable placeholder="请选择">
             <el-option v-for="icon in menuIconNames" :key="icon" :label="icon" :value="icon" />
           </el-select>
diff --git a/src/views/permission/composables/useMenuManagement.js b/src/views/permission/composables/useMenuManagement.js
index 0d91b28..a5d8156 100644
--- a/src/views/permission/composables/useMenuManagement.js
+++ b/src/views/permission/composables/useMenuManagement.js
@@ -93,7 +93,7 @@ export function useMenuManagement() {
       routePath: raw.path || '',
       routeName: raw.name || '',
       component: raw.component === '#' ? '' : raw.component || '',
-      icon: normalizeAppIcon(raw.icon),
+      icon: raw.type === 'CATALOG' ? normalizeAppIcon(raw.icon) : '',
       permissionCode: raw.permissionCode || '',
       type: raw.type || 'MENU',
       sort: raw.sort ?? 1,
@@ -113,7 +113,7 @@ export function useMenuManagement() {
       routePath: form.routePath.trim(),
       routeName: form.routeName.trim(),
       component: form.type === 'CATALOG' ? '#' : form.component.trim(),
-      icon: form.type === 'BUTTON' ? '' : normalizeAppIcon(form.icon),
+      icon: form.type === 'CATALOG' ? normalizeAppIcon(form.icon) : '',
       permissionCode: form.permissionCode.trim(),
       type: form.type,
       sort: Number(form.sort) || 1,

From 805d7ddc5277687a3d1692a3f2989209b66271c8 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 12:00:26 +0800
Subject: [PATCH 10/59] =?UTF-8?q?feat(web):=20=E9=87=8D=E5=81=9A=E7=9F=AD?=
 =?UTF-8?q?=E5=89=A7=E7=BC=96=E8=BE=91=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/business/drama-management.css      | 203 +++++++++++--
 .../contentManagement/DramaManagementView.vue | 276 ++++++++++++++----
 2 files changed, 405 insertions(+), 74 deletions(-)

diff --git a/src/styles/business/drama-management.css b/src/styles/business/drama-management.css
index 7363c62..8fcd3ff 100644
--- a/src/styles/business/drama-management.css
+++ b/src/styles/business/drama-management.css
@@ -91,29 +91,192 @@
   font-size: 13px;
 }
 
-/* 编辑弹窗里的封面预览：固定竖版尺寸，和上传控件并排，避免弹窗过高 */
-.cover-field {
+/* 短剧编辑弹窗：固定宽度、内容区滚动、底部操作固定。 */
+.drama-editor-dialog {
   display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  width: 100%;
+  max-height: calc(100vh - 40px);
+  overflow: hidden;
+  flex-direction: column;
+  border-radius: var(--app-radius-lg) !important;
 }
-.cover-field-actions {
+
+.drama-editor-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  padding: 8px 24px 0;
+  overflow-y: auto;
+}
+
+.drama-editor-dialog .el-dialog__footer {
+  flex: 0 0 auto;
+  padding: 14px 24px;
+  background: var(--el-bg-color-overlay);
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.drama-editor-dialog .el-dialog__footer .el-button {
+  min-width: 88px;
+  height: 36px;
+}
+
+.editor-section {
+  padding: 4px 0 18px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.editor-section + .editor-section {
+  padding-top: 18px;
+}
+
+.editor-section:last-child {
+  padding-bottom: 4px;
+  border-bottom: 0;
+}
+
+.editor-section-title {
+  margin: 0 0 14px;
+  color: var(--el-text-color-primary);
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.editor-grid {
+  display: grid;
+  gap: 0 16px;
+}
+
+.editor-grid--two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.editor-number {
+  width: 180px !important;
+}
+
+.cover-editor {
+  display: flex;
+  gap: 18px;
+  align-items: flex-start;
+}
+
+.cover-preview-card {
+  position: relative;
+  display: grid;
+  flex: 0 0 96px;
+  width: 96px;
+  height: 128px;
+  overflow: hidden;
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  background: var(--el-fill-color-lighter);
+}
+
+.cover-preview-card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cover-preview-empty {
+  display: flex;
+  height: 100%;
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 8px;
+}
+
+.cover-upload-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  color: #fff;
+  font-size: 12px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  background: color-mix(in srgb, var(--el-color-primary) 78%, transparent);
+}
+
+.cover-upload-mask b {
+  font-size: 16px;
+}
+
+.cover-editor-meta {
+  display: flex;
   flex: 1 1 auto;
   min-width: 0;
+  flex-direction: column;
+  gap: 10px;
 }
-.form-cover-preview {
-  display: block;
-  width: 84px;
-  height: 112px;
-  flex: 0 0 84px;
-  object-fit: cover;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--app-radius-md);
-  background: #f0f2f4 !important;
+
+.cover-status-line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
 }
-.dark .form-cover-preview {
-  background: #353b45 !important;
+
+.cover-filename {
+  overflow: hidden;
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cover-hint {
+  margin: 0;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.cover-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.cover-actions .el-button {
+  height: 36px;
+}
+
+.cover-original-link {
+  color: var(--el-color-primary);
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.cover-original-link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 600px) {
+  .drama-editor-dialog {
+    width: calc(100vw - 24px) !important;
+    margin: 12px auto !important;
+  }
+
+  .drama-editor-dialog .el-dialog__body {
+    padding-right: 18px;
+    padding-left: 18px;
+  }
+
+  .editor-grid--two {
+    grid-template-columns: 1fr;
+  }
+
+}
+
+html.dark .cover-preview-card,
+html.dark .cover-preview-empty {
+  background: var(--el-fill-color-light);
 }
 
 /* 编辑弹窗里的视频预览 */
@@ -163,7 +326,7 @@
 /* 列表里点视频即放大播放，给个悬停反馈 */
 .episode-video-thumb:hover {
   border-color: var(--el-color-primary);
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--el-color-primary) 25%, transparent);
 }
 .dark .table-result-count {
   color: #a6aeb9;
@@ -233,8 +396,8 @@
 .table-actions .el-button--primary {
   --el-button-bg-color: var(--el-color-primary);
   --el-button-border-color: var(--el-color-primary);
-  --el-button-hover-bg-color: var(--el-color-primary-light-3);
-  --el-button-hover-border-color: var(--el-color-primary-light-3);
+  --el-button-hover-bg-color: var(--el-color-primary-dark-2);
+  --el-button-hover-border-color: var(--el-color-primary-dark-2);
 }
 .table-actions .el-button--success {
   --el-button-bg-color: #4d866a;
diff --git a/src/views/contentManagement/DramaManagementView.vue b/src/views/contentManagement/DramaManagementView.vue
index 6b9db63..2dcbb1b 100644
--- a/src/views/contentManagement/DramaManagementView.vue
+++ b/src/views/contentManagement/DramaManagementView.vue
@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
@@ -37,16 +37,32 @@ const dialogVisible = ref(false)
 const saving = ref(false)
 const uploadingCover = ref(false)
 const coverPercent = ref(0)
+const coverError = ref('')
+const coverFileName = ref('')
 const editingId = ref(null)
+const formRef = ref()
 const form = reactive({
   title: '',
   categoryId: undefined,
   description: '',
   freeEpisodes: 3,
   unlockCoin: 0,
+  isHot: false,
   cover: ''
 })
 
+const MAX_COVER_SIZE = 5 * 1024 * 1024
+const COVER_TYPES = ['image/jpeg', 'image/png', 'image/webp']
+
+const formRules = {
+  title: [{ required: true, message: '请输入短剧名称', trigger: 'blur' }],
+  categoryId: [{ required: true, message: '请选择短剧类型', trigger: 'change' }]
+}
+
+const coverDisplayName = computed(
+  () => coverFileName.value || (form.cover ? coverBasename(form.cover) : '尚未选择封面')
+)
+
 const statusOptions = [
   { code: 'draft', text: '草稿' },
   { code: 'reviewing', text: '审核中' },
@@ -104,6 +120,17 @@ function handleSizeChange() {
   load()
 }
 
+function coverBasename(path) {
+  if (!path) return ''
+  const clean = path.split('?')[0].split('#')[0]
+  return decodeURIComponent(clean.split('/').pop() || clean)
+}
+
+async function resetValidation() {
+  await nextTick()
+  formRef.value?.clearValidate()
+}
+
 function openCreate() {
   editingId.value = null
   Object.assign(form, {
@@ -115,7 +142,10 @@ function openCreate() {
     isHot: false,
     cover: ''
   })
+  coverFileName.value = ''
+  coverError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 function openEdit(row) {
@@ -129,12 +159,19 @@ function openEdit(row) {
     isHot: !!row.isHot,
     cover: row.cover || ''
   })
+  coverFileName.value = row.cover ? coverBasename(row.cover) : ''
+  coverError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 async function saveDrama() {
-  if (!form.title.trim()) return ElMessage.warning('请填写短剧名称')
-  if (!form.categoryId) return ElMessage.warning('请选择短剧类型')
+  if (saving.value || uploadingCover.value) return
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
+  }
   const category = categories.value.find((item) => item.id === form.categoryId)
   const payload = {
     ...form,
@@ -158,22 +195,54 @@ async function saveDrama() {
   }
 }
 
+function beforeCoverUpload(file) {
+  coverError.value = ''
+  if (!COVER_TYPES.includes(file.type)) {
+    coverError.value = '封面仅支持 JPG、PNG 或 WebP 格式'
+    return false
+  }
+  if (file.size > MAX_COVER_SIZE) {
+    coverError.value = '封面大小不能超过 5MB'
+    return false
+  }
+  return true
+}
+
 /** 封面走分片上传（图片只有一个分片），成功后回填地址。 */
 async function uploadCover(options) {
   uploadingCover.value = true
   coverPercent.value = 0
+  coverError.value = ''
   try {
     const asset = await uploadFile(options.file, {
       bizType: 'DRAMA_COVER',
       onProgress: (percent) => (coverPercent.value = percent)
     })
     form.cover = asset.url
+    coverFileName.value = options.file.name
     ElMessage.success('封面已上传')
+  } catch {
+    coverError.value = '封面上传失败，请检查网络后重试'
   } finally {
     uploadingCover.value = false
   }
 }
 
+function removeCover() {
+  if (uploadingCover.value) return
+  form.cover = ''
+  coverFileName.value = ''
+  coverError.value = ''
+}
+
+function beforeDialogClose(done) {
+  if (saving.value || uploadingCover.value) {
+    ElMessage.warning(saving.value ? '正在保存，请稍候' : '封面正在上传，请稍候')
+    return
+  }
+  done()
+}
+
 async function confirmDelete(row) {
   try {
     await ElMessageBox.confirm(`确定删除短剧「${row.title}」吗？删除后无法恢复。`, '删除确认', {
@@ -375,56 +444,155 @@ onMounted(async () => {
         @size-change="handleSizeChange"
     /></div>
   </section>
-  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑短剧' : '新建短剧'" width="600px"
-    ><el-form label-position="top"
-      ><div class="form-row"
-        ><el-form-item label="短剧名称" required
-          ><el-input v-model="form.title" placeholder="请输入短剧名称" /></el-form-item
-        ><el-form-item label="类型" required
-          ><el-select v-model="form.categoryId" placeholder="请选择"
-            ><el-option
-              v-for="item in categories"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id" /></el-select></el-form-item></div
-      ><el-form-item label="简介"
-        ><el-input
-          v-model="form.description"
-          type="textarea"
-          :rows="2"
-          maxlength="200"
-          show-word-limit /></el-form-item
-      ><div class="form-row"
-        ><el-form-item label="免费集数"
-          ><el-input-number v-model="form.freeEpisodes" :min="0" :max="200" /></el-form-item
-        ><el-form-item label="单集解锁金币"
-          ><el-input-number v-model="form.unlockCoin" :min="0" :max="9999" /></el-form-item
-      ></div>
-      <el-form-item label="是否热门"><el-switch v-model="form.isHot" /></el-form-item>
-      <el-form-item label="短剧封面"
-        ><div class="cover-field"
-          ><div class="cover-field-actions"
-            ><el-upload
-              v-if="can('cover:upload')"
-              :show-file-list="false"
-              accept="image/*"
-              :http-request="uploadCover"
-              :disabled="uploadingCover"
-              ><el-button :loading="uploadingCover">{{
-                form.cover ? '更换封面' : '选择封面'
-              }}</el-button></el-upload
-            ><p v-if="uploadingCover" class="selected-file">上传中 {{ coverPercent }}%</p
-            ><p v-else-if="form.cover" class="selected-file">封面已上传</p
-            ><el-input v-model="form.cover" placeholder="也可以直接填写图片地址" /></div
-          ><img
-            v-if="form.cover"
-            :src="form.cover"
-            class="form-cover-preview" /></div></el-form-item></el-form
-    ><template #footer
-      ><el-button @click="dialogVisible = false">取消</el-button
-      ><el-button type="primary" :loading="saving" @click="saveDrama">{{
-        editingId ? '保存修改' : '保存草稿'
-      }}</el-button></template
-    ></el-dialog
+  <el-dialog
+    v-model="dialogVisible"
+    :title="editingId ? '编辑短剧' : '新建短剧'"
+    width="680px"
+    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="categoryId">
+            <el-select v-model="form.categoryId" placeholder="请选择类型">
+              <el-option
+                v-for="item in categories"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </div>
+        <el-form-item label="简介">
+          <el-input
+            v-model="form.description"
+            type="textarea"
+            :rows="3"
+            maxlength="200"
+            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>
+        <el-form-item label="是否热门">
+          <el-switch v-model="form.isHot" />
+        </el-form-item>
+      </section>
+
+      <section class="editor-section">
+        <h3 class="editor-section-title">封面</h3>
+        <div class="cover-editor">
+          <div class="cover-preview-card">
+            <img v-if="form.cover" :src="form.cover" alt="短剧封面" />
+            <div v-else class="cover-preview-empty">
+              <AppIcon :icon="AppIcons.content" :size="28" />
+              <span>暂无封面</span>
+            </div>
+            <div v-if="uploadingCover" class="cover-upload-mask">
+              <span>上传中</span>
+              <b>{{ coverPercent }}%</b>
+            </div>
+          </div>
+
+          <div class="cover-editor-meta">
+            <div class="cover-status-line">
+              <el-tag :type="form.cover ? 'success' : 'info'" effect="light">
+                {{ form.cover ? '已上传' : '未上传' }}
+              </el-tag>
+              <span class="cover-filename" :title="coverDisplayName">{{ coverDisplayName }}</span>
+            </div>
+            <p class="cover-hint">支持 JPG、PNG、WebP，单张不超过 5MB。</p>
+            <el-alert
+              v-if="coverError"
+              :title="coverError"
+              type="error"
+              :closable="false"
+              show-icon
+            />
+            <div class="cover-actions">
+              <el-upload
+                v-if="can('cover:upload')"
+                :show-file-list="false"
+                accept="image/jpeg,image/png,image/webp"
+                :before-upload="beforeCoverUpload"
+                :http-request="uploadCover"
+                :disabled="uploadingCover"
+              >
+                <el-button :loading="uploadingCover" :disabled="uploadingCover">
+                  <AppIcon :icon="AppIcons.upload" />
+                  {{ form.cover ? '更换封面' : '选择封面' }}
+                </el-button>
+              </el-upload>
+              <el-button
+                v-if="can('cover:upload') && form.cover"
+                :disabled="uploadingCover"
+                @click="removeCover"
+              >
+                移除
+              </el-button>
+              <a
+                v-if="form.cover"
+                class="cover-original-link"
+                :href="form.cover"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                查看原图
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+    </el-form>
+
+    <template #footer>
+      <el-button :disabled="saving || uploadingCover" @click="dialogVisible = false"
+        >取消</el-button
+      >
+      <el-button
+        type="primary"
+        :loading="saving"
+        :disabled="saving || uploadingCover"
+        @click="saveDrama"
+      >
+        {{ editingId ? '保存修改' : '保存草稿' }}
+      </el-button>
+    </template>
+  </el-dialog>
 </template>

From 898e439b84265415c0b98e644f40e727a1facb1e Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 12:00:30 +0800
Subject: [PATCH 11/59] =?UTF-8?q?fix(web):=20=E4=BC=98=E5=8C=96=E9=94=81?=
 =?UTF-8?q?=E5=B1=8F=E5=BC=B9=E7=AA=97=E5=B8=83=E5=B1=80=E4=B8=8E=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../UserInfo/src/components/LockDialog.vue    | 173 +++++++++++++++---
 src/locales/en.ts                             |   1 +
 src/locales/zh-CN.ts                          |   1 +
 3 files changed, 149 insertions(+), 26 deletions(-)

diff --git a/src/components/UserInfo/src/components/LockDialog.vue b/src/components/UserInfo/src/components/LockDialog.vue
index 2aa2d51..54c4015 100644
--- a/src/components/UserInfo/src/components/LockDialog.vue
+++ b/src/components/UserInfo/src/components/LockDialog.vue
@@ -2,11 +2,10 @@
 
 <script setup lang="ts">
 import { useI18n } from '@/hooks/web/useI18n'
-import { ref } from 'vue'
+import { computed, reactive } from 'vue'
 import { Dialog } from '@/components/Dialog'
 import { Form } from '@/components/Form'
 import { useForm } from '@/hooks/web/useForm'
-import { reactive, computed } from 'vue'
 import { useValidator } from '@/hooks/web/useValidator'
 import { FormSchema } from '@/components/Form'
 import { ElButton } from 'element-plus'
@@ -41,13 +40,10 @@ const emit = defineEmits(['update:modelValue'])
 
 const dialogVisible = computed({
   get: () => props.modelValue,
-  set: (val) => {
-    console.log('set: ', val)
-    emit('update:modelValue', val)
-  }
+  set: (val) => emit('update:modelValue', val)
 })
 
-const dialogTitle = ref(t('lock.lockScreen'))
+const dialogTitle = computed(() => t('lock.lockScreen'))
 
 const rules = reactive({
   password: [required()]
@@ -60,7 +56,10 @@ const schema: FormSchema[] = reactive([
     component: 'Input',
     componentProps: {
       type: 'password',
-      showPassword: true
+      showPassword: true,
+      style: {
+        width: '100%'
+      }
     }
   }
 ])
@@ -82,41 +81,163 @@ const handleLock = async () => {
     }
   })
 }
+
+const cancel = () => {
+  dialogVisible.value = false
+}
 </script>
 
 <template>
   <Dialog
     v-model="dialogVisible"
-    width="500px"
-    max-height="170px"
+    width="440px"
+    max-height="220px"
     :class="prefixCls"
     :title="dialogTitle"
+    :fullscreen="false"
   >
-    <div class="flex flex-col items-center">
-      <img
-        v-if="avatarUrl"
-        :src="avatarUrl"
-        alt=""
-        class="w-70px h-70px rounded-[50%] object-cover"
-      />
-      <span
-        v-else
-        class="w-70px h-70px rounded-[50%] flex items-center justify-center bg-[var(--el-fill-color)]"
-        ><AppIcon :icon="AppIcons.person" :size="30"
-      /></span>
-      <span class="text-14px my-10px text-[var(--top-header-text-color)]">{{ displayName }}</span>
+    <template #title>
+      <div class="lock-dialog-heading">
+        <AppIcon :icon="AppIcons.lock" :size="20" />
+        <div>
+          <h2>{{ dialogTitle }}</h2>
+          <p>{{ t('lock.description') }}</p>
+        </div>
+      </div>
+    </template>
+
+    <div class="lock-dialog-body">
+      <div class="lock-dialog-user">
+        <img v-if="avatarUrl" :src="avatarUrl" alt="" class="lock-dialog-avatar" />
+        <span v-else class="lock-dialog-avatar lock-dialog-avatar--empty">
+          <AppIcon :icon="AppIcons.person" :size="28" />
+        </span>
+        <span class="lock-dialog-name">{{ displayName }}</span>
+      </div>
+      <div class="lock-password-field" @keyup.enter.prevent.stop="handleLock">
+        <Form
+          :is-col="false"
+          :schema="schema"
+          :rules="rules"
+          label-position="top"
+          @register="formRegister"
+        />
+      </div>
     </div>
-    <Form :is-col="false" :schema="schema" :rules="rules" @register="formRegister" />
+
     <template #footer>
-      <ElButton type="primary" @click="handleLock">{{ t('lock.lock') }}</ElButton>
+      <ElButton class="lock-dialog-cancel" @click="cancel">{{ t('common.cancel') }}</ElButton>
+      <ElButton type="primary" class="lock-dialog-submit" @click="handleLock">
+        {{ t('lock.lock') }}
+      </ElButton>
     </template>
   </Dialog>
 </template>
 
 <style lang="less" scoped>
 :global(.v-lock-dialog) {
-  @media (width <= 767px) {
+  width: 440px !important;
+  max-width: calc(100vw - 24px);
+  max-height: 360px;
+}
+
+:global(.v-lock-dialog .el-dialog__header) {
+  height: auto;
+  min-height: 64px;
+  padding: 14px 20px 8px !important;
+  border-bottom: 0;
+}
+
+:global(.v-lock-dialog .el-dialog__body) {
+  padding: 4px 20px 8px !important;
+}
+
+:global(.v-lock-dialog .el-dialog__footer) {
+  padding: 10px 20px 16px;
+}
+
+:global(.v-lock-dialog .el-dialog__footer .el-button) {
+  min-width: 96px;
+  height: 36px;
+}
+
+:global(.v-lock-dialog .el-dialog__header .absolute) {
+  right: -14px !important;
+}
+
+@media (width <= 767px) {
+  :global(.v-lock-dialog) {
     max-width: calc(100vw - 16px);
   }
 }
+
+.lock-dialog-heading {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding-right: 40px;
+  color: var(--el-text-color-primary);
+
+  .app-icon {
+    margin-top: 2px;
+    color: var(--el-color-primary);
+  }
+
+  h2 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 650;
+    line-height: 1.4;
+  }
+
+  p {
+    margin: 3px 0 0;
+    color: var(--el-text-color-secondary);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.4;
+  }
+}
+
+.lock-dialog-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.lock-dialog-user {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.lock-dialog-avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.lock-dialog-avatar--empty {
+  display: flex;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  align-items: center;
+  justify-content: center;
+}
+
+.lock-dialog-name {
+  color: var(--el-text-color-regular);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.lock-password-field {
+  width: 100%;
+}
+
+.lock-dialog-submit {
+  min-width: 96px;
+}
 </style>
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 15ff3d6..3e35f06 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -52,6 +52,7 @@ export default {
     lockScreen: 'Lock screen',
     lock: 'Lock',
     lockPassword: 'Lock screen password',
+    description: 'Enter your password to unlock this session.',
     unlock: 'Click to unlock',
     backToLogin: 'Back to login',
     entrySystem: 'Entry the system',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 9825d3a..1961130 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -52,6 +52,7 @@ export default {
     lockScreen: '锁定屏幕',
     lock: '锁定',
     lockPassword: '锁屏密码',
+    description: '输入密码解锁当前会话。',
     unlock: '点击解锁',
     backToLogin: '返回登录',
     entrySystem: '进入系统',

From 40fbd6ec7b535b56b5a255a3a1045f65c5a4c861 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 12:04:18 +0800
Subject: [PATCH 12/59] =?UTF-8?q?fix(web):=20=E5=AF=B9=E9=BD=90=E7=88=B6?=
 =?UTF-8?q?=E5=AD=90=E8=8F=9C=E5=8D=95=E6=96=87=E5=AD=97=E5=9F=BA=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/business/menu.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/styles/business/menu.css b/src/styles/business/menu.css
index de29fdd..b037da7 100644
--- a/src/styles/business/menu.css
+++ b/src/styles/business/menu.css
@@ -6,9 +6,10 @@
 
 #v-menu .el-menu-item,
 #v-menu .el-sub-menu__title {
+  /* 42px = 16px padding + 18px icon + 8px gap，父子菜单文字共用该基线。 */
   height: 44px;
-  padding-left: 8px !important;
-  margin: 4px 8px;
+  padding-left: 16px !important;
+  margin: 4px 8px 4px 0;
   overflow: hidden;
   color: var(--left-menu-text-color);
   font-size: 14px;

From e77db702781db2b32c0a4b7bb3c3a697256f3245 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 12:32:01 +0800
Subject: [PATCH 13/59] =?UTF-8?q?fix(web):=20=E4=BF=AE=E6=AD=A3=E6=B5=85?=
 =?UTF-8?q?=E8=89=B2=E5=93=81=E7=89=8C=E6=96=87=E5=AD=97=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/app.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index e11ca33..5533fbf 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -89,7 +89,7 @@ export const useAppStore = defineStore('app', {
         // 头部背景颜色
         topHeaderBgColor: '#fff',
         // 头部字体颜色
-        topHeaderTextColor: 'inherit',
+        topHeaderTextColor: '#303133',
         // 头部悬停颜色
         topHeaderHoverColor: '#f6f6f6',
         // 头部边框颜色
@@ -299,7 +299,7 @@ export const useAppStore = defineStore('app', {
         // 左侧菜单选中字体颜色
         leftMenuTextActiveColor: isDarkColor ? '#fff' : 'var(--el-color-primary)',
         // logo字体颜色
-        logoTitleTextColor: isDarkColor ? '#fff' : 'inherit',
+        logoTitleTextColor: isDarkColor ? '#fff' : '#303133',
         // logo边框颜色
         logoBorderColor: isDarkColor ? color : '#eee'
       }
@@ -308,7 +308,7 @@ export const useAppStore = defineStore('app', {
     },
     setHeaderTheme(color: string) {
       const isDarkColor = colorIsDark(color)
-      const textColor = isDarkColor ? '#fff' : 'inherit'
+      const textColor = isDarkColor ? '#fff' : '#303133'
       const textHoverColor = isDarkColor ? lighten(color!, 6) : '#f6f6f6'
       const topToolBorderColor = isDarkColor ? color : '#eee'
       setCssVar('--top-header-bg-color', color)
@@ -345,8 +345,9 @@ export const useAppStore = defineStore('app', {
       context.store.title = import.meta.env.VITE_APP_TITLE
       if (context.store.theme?.elColorPrimary !== '#c4322a') {
         context.store.setTheme({ elColorPrimary: '#c4322a' })
-        context.store.setCssVarTheme()
       }
+      context.store.setMenuTheme(context.store.theme.leftMenuBgColor)
+      context.store.setHeaderTheme(context.store.theme.topHeaderBgColor)
     }
   }
 })

From f5b399a52f95500c28f9b277821228ec7d55dfeb Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 12:32:23 +0800
Subject: [PATCH 14/59] =?UTF-8?q?fix(web):=20=E7=BB=9F=E4=B8=80=E5=8D=B1?=
 =?UTF-8?q?=E9=99=A9=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/business/drama-management.css      | 17 +++++------------
 src/styles/business/style.css                 | 11 ++++++-----
 src/styles/business/theme.css                 | 19 +++++++++++++++++++
 src/views/commerce/OrderManagementView.vue    |  5 +++--
 .../contentManagement/DramaManagementView.vue |  1 +
 src/views/creator-center/DramaEditView.vue    |  4 ++--
 src/views/creator-center/WorkspaceView.vue    |  2 +-
 .../composables/useCreatorWorkspace.js        |  3 ++-
 src/views/creator/CreatorAuditView.vue        |  2 +-
 .../creator/composables/useCreatorAudit.js    |  3 ++-
 .../governance/ContentGovernanceView.vue      | 10 +++-------
 src/views/permission/MenuManagementView.vue   |  2 +-
 src/views/permission/RoleCategoriesView.vue   |  4 ++--
 src/views/permission/RoleManagementView.vue   |  8 ++++++--
 14 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/src/styles/business/drama-management.css b/src/styles/business/drama-management.css
index 8fcd3ff..aa498c4 100644
--- a/src/styles/business/drama-management.css
+++ b/src/styles/business/drama-management.css
@@ -37,7 +37,7 @@
   align-items: center;
   gap: 8px;
   white-space: nowrap;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
 }
 .table-actions .el-button {
   /* 统一尺寸：高度固定、水平内边距，靠行高垂直居中，避免文字被压扁 */
@@ -53,12 +53,6 @@
 .table-actions .el-button + .el-button {
   margin-left: 0 !important;
 }
-.table-actions .danger-action {
-  color: #a66a6a !important;
-}
-.table-actions .danger-action:hover {
-  color: #b54848 !important;
-}
 .drama-cell .drama-cover,
 .drama-cell .drama-cover-image {
   width: 44px;
@@ -271,7 +265,6 @@
   .editor-grid--two {
     grid-template-columns: 1fr;
   }
-
 }
 
 html.dark .cover-preview-card,
@@ -406,10 +399,10 @@ html.dark .cover-preview-empty {
   --el-button-hover-border-color: #3c7358;
 }
 .table-actions .el-button--danger {
-  --el-button-bg-color: #bd5b5b;
-  --el-button-border-color: #bd5b5b;
-  --el-button-hover-bg-color: #a94b4b;
-  --el-button-hover-border-color: #a94b4b;
+  --el-button-bg-color: var(--el-color-danger);
+  --el-button-border-color: var(--el-color-danger);
+  --el-button-hover-bg-color: var(--el-color-danger-dark-2);
+  --el-button-hover-border-color: var(--el-color-danger-dark-2);
 }
 .pagination {
   display: flex;
diff --git a/src/styles/business/style.css b/src/styles/business/style.css
index 9418b25..d883473 100644
--- a/src/styles/business/style.css
+++ b/src/styles/business/style.css
@@ -6,7 +6,7 @@ body {
   min-width: 0;
   min-height: 100vh;
 }
- .page-heading {
+.page-heading {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -396,7 +396,11 @@ body {
   background: linear-gradient(145deg, #f8d6d7, #ffece4);
 }
 .purple {
-  background: linear-gradient(145deg, var(--el-color-primary-light-8), var(--el-color-primary-light-9));
+  background: linear-gradient(
+    145deg,
+    var(--el-color-primary-light-8),
+    var(--el-color-primary-light-9)
+  );
 }
 .peach {
   background: linear-gradient(145deg, #ffd6bd, #fff0d7);
@@ -615,9 +619,6 @@ body {
   padding: 5px;
   color: #9997a7;
 }
-.episode-actions .danger-action:hover {
-  color: #e77680;
-}
 .episode-footer {
   display: flex;
   justify-content: space-between;
diff --git a/src/styles/business/theme.css b/src/styles/business/theme.css
index 6831643..54ef210 100644
--- a/src/styles/business/theme.css
+++ b/src/styles/business/theme.css
@@ -38,6 +38,25 @@ body {
   --el-button-active-bg-color: var(--el-color-primary-dark-2);
   --el-button-active-border-color: var(--el-color-primary-dark-2);
 }
+.el-button--danger {
+  --el-button-text-color: #fff;
+  --el-button-bg-color: var(--el-color-danger);
+  --el-button-border-color: var(--el-color-danger);
+  --el-button-hover-bg-color: var(--el-color-danger-dark-2);
+  --el-button-hover-border-color: var(--el-color-danger-dark-2);
+  color: #fff !important;
+  background: var(--el-color-danger) !important;
+  border-color: var(--el-color-danger) !important;
+}
+.el-button--danger:hover {
+  background: var(--el-color-danger-dark-2) !important;
+  border-color: var(--el-color-danger-dark-2) !important;
+}
+.el-message-box__btns .el-button--danger {
+  color: #fff !important;
+  background: var(--el-color-danger) !important;
+  border-color: var(--el-color-danger) !important;
+}
 .eyebrow {
   letter-spacing: 0.7px;
   color: #9298a1;
diff --git a/src/views/commerce/OrderManagementView.vue b/src/views/commerce/OrderManagementView.vue
index d2f2656..0959915 100644
--- a/src/views/commerce/OrderManagementView.vue
+++ b/src/views/commerce/OrderManagementView.vue
@@ -102,6 +102,7 @@ async function refund(row) {
       {
         confirmButtonText: '确认退款',
         cancelButtonText: '取消',
+        confirmButtonClass: 'el-button--danger',
         inputValidator: (val) => (val && val.trim() ? true : '退款原因不能为空')
       }
     )
@@ -375,8 +376,8 @@ function onTabChange(name) {
                 >
                 <el-button
                   v-if="canOrderUpdate && (row.status === 'PAID' || row.status === 'DELIVERED')"
+                  type="danger"
                   size="small"
-                  class="danger-action"
                   @click="refund(row)"
                   >退款</el-button
                 >
@@ -461,8 +462,8 @@ function onTabChange(name) {
               <div class="table-actions">
                 <el-button
                   v-if="canEntitlementUpdate && row.status === 'ACTIVE'"
+                  type="danger"
                   size="small"
-                  class="danger-action"
                   @click="revokeEntitlement(row)"
                   >回收</el-button
                 >
diff --git a/src/views/contentManagement/DramaManagementView.vue b/src/views/contentManagement/DramaManagementView.vue
index 2dcbb1b..80e438c 100644
--- a/src/views/contentManagement/DramaManagementView.vue
+++ b/src/views/contentManagement/DramaManagementView.vue
@@ -561,6 +561,7 @@ onMounted(async () => {
               </el-upload>
               <el-button
                 v-if="can('cover:upload') && form.cover"
+                type="danger"
                 :disabled="uploadingCover"
                 @click="removeCover"
               >
diff --git a/src/views/creator-center/DramaEditView.vue b/src/views/creator-center/DramaEditView.vue
index 08384f9..74c45cf 100644
--- a/src/views/creator-center/DramaEditView.vue
+++ b/src/views/creator-center/DramaEditView.vue
@@ -244,8 +244,8 @@ function requestDramaCover(options) {
                 <el-button size="small">{{ hasResumeSession ? '继续上传' : '上传视频' }}</el-button>
               </el-upload>
               <el-button
+                type="danger"
                 size="small"
-                class="danger-action"
                 :disabled="!editable"
                 @click="removeEpisode(row)"
                 >删除</el-button
@@ -299,8 +299,8 @@ function requestDramaCover(options) {
             <div class="table-actions">
               <el-button
                 v-if="canEdit && ['SUBMITTED', 'REVIEWING'].includes(row.status)"
+                type="danger"
                 size="small"
-                class="danger-action"
                 @click="withdraw(row.id)"
                 >撤回</el-button
               >
diff --git a/src/views/creator-center/WorkspaceView.vue b/src/views/creator-center/WorkspaceView.vue
index c329593..0efaac7 100644
--- a/src/views/creator-center/WorkspaceView.vue
+++ b/src/views/creator-center/WorkspaceView.vue
@@ -229,8 +229,8 @@ function openEdit(row) {
                       row.submissionId &&
                       ['SUBMITTED', 'REVIEWING'].includes(row.submissionStatus)
                     "
+                    type="danger"
                     size="small"
-                    class="danger-action"
                     @click="withdraw(row)"
                     >撤回</el-button
                   >
diff --git a/src/views/creator-center/composables/useCreatorWorkspace.js b/src/views/creator-center/composables/useCreatorWorkspace.js
index 2d2405b..88f612c 100644
--- a/src/views/creator-center/composables/useCreatorWorkspace.js
+++ b/src/views/creator-center/composables/useCreatorWorkspace.js
@@ -156,7 +156,8 @@ export function useCreatorWorkspace() {
         '撤回提交',
         {
           confirmButtonText: '确认撤回',
-          cancelButtonText: '取消'
+          cancelButtonText: '取消',
+          confirmButtonClass: 'el-button--danger'
         }
       )
     } catch {
diff --git a/src/views/creator/CreatorAuditView.vue b/src/views/creator/CreatorAuditView.vue
index 3cb81b7..3880050 100644
--- a/src/views/creator/CreatorAuditView.vue
+++ b/src/views/creator/CreatorAuditView.vue
@@ -180,8 +180,8 @@ const {
             >
             <el-button
               v-if="canAudit && row.status === 'approved'"
+              type="danger"
               size="small"
-              class="danger-action"
               @click="freeze(row)"
               >冻结</el-button
             >
diff --git a/src/views/creator/composables/useCreatorAudit.js b/src/views/creator/composables/useCreatorAudit.js
index c3f9dc8..9c24c9c 100644
--- a/src/views/creator/composables/useCreatorAudit.js
+++ b/src/views/creator/composables/useCreatorAudit.js
@@ -135,7 +135,8 @@ export function useCreatorAudit() {
       await ElMessageBox.confirm(`冻结后「${row.name}」将无法提交内容，确认冻结？`, '冻结创作者', {
         confirmButtonText: '确认冻结',
         cancelButtonText: '取消',
-        type: 'warning'
+        type: 'warning',
+        confirmButtonClass: 'el-button--danger'
       })
     } catch {
       return
diff --git a/src/views/governance/ContentGovernanceView.vue b/src/views/governance/ContentGovernanceView.vue
index 9a8e493..d49d567 100644
--- a/src/views/governance/ContentGovernanceView.vue
+++ b/src/views/governance/ContentGovernanceView.vue
@@ -343,7 +343,7 @@ const handleTargetText = computed(() => {
             show-overflow-tooltip
             :formatter="dateCell"
           />
-          <el-table-column label="操作" width="200" fixed="right">
+          <el-table-column label="操作" width="230" fixed="right">
             <template #default="{ row }">
               <div class="table-actions">
                 <el-button
@@ -358,8 +358,8 @@ const handleTargetText = computed(() => {
                 >
                 <el-button
                   v-if="canCommentAudit"
+                  type="danger"
                   size="small"
-                  class="danger-action"
                   @click="removeComment(row)"
                   >删除</el-button
                 >
@@ -523,11 +523,7 @@ const handleTargetText = computed(() => {
                 <el-button v-if="canWordUpdate" type="primary" size="small" @click="openWord(row)"
                   >编辑</el-button
                 >
-                <el-button
-                  v-if="canWordUpdate"
-                  size="small"
-                  class="danger-action"
-                  @click="removeWord(row)"
+                <el-button v-if="canWordUpdate" type="danger" size="small" @click="removeWord(row)"
                   >删除</el-button
                 >
                 <span v-if="!canWordUpdate" class="console-muted">只读</span>
diff --git a/src/views/permission/MenuManagementView.vue b/src/views/permission/MenuManagementView.vue
index 43bab91..5c99a0f 100644
--- a/src/views/permission/MenuManagementView.vue
+++ b/src/views/permission/MenuManagementView.vue
@@ -37,7 +37,7 @@ const { treeData, loading, form, parentOptions, resetForm, selectNode, saveMenu,
         <div
           ><h2>{{ form.id ? '编辑菜单' : '新增菜单' }}</h2></div
         >
-        <el-button v-if="form.id" type="danger" plain @click="deleteMenu">删除菜单</el-button>
+        <el-button v-if="form.id" type="danger" @click="deleteMenu">删除菜单</el-button>
       </div>
       <el-form label-width="110px" label-position="right" class="menu-editor-form">
         <el-form-item label="菜单名称" required>
diff --git a/src/views/permission/RoleCategoriesView.vue b/src/views/permission/RoleCategoriesView.vue
index 30f47ad..5a3c49a 100644
--- a/src/views/permission/RoleCategoriesView.vue
+++ b/src/views/permission/RoleCategoriesView.vue
@@ -45,8 +45,8 @@ const {
       <el-table-column prop="roleCount" label="角色数" width="100" />
       <el-table-column label="操作" width="200">
         <template #default="{ row }">
-          <el-button type="primary" @click="editCategory(row)">编辑</el-button>
-          <el-button type="danger" @click="deleteCategory(row)">删除</el-button>
+          <el-button type="primary" size="small" @click="editCategory(row)">编辑</el-button>
+          <el-button type="danger" size="small" @click="deleteCategory(row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
diff --git a/src/views/permission/RoleManagementView.vue b/src/views/permission/RoleManagementView.vue
index 01f74c8..3811026 100644
--- a/src/views/permission/RoleManagementView.vue
+++ b/src/views/permission/RoleManagementView.vue
@@ -73,9 +73,13 @@ function removeRoleRow(row) {
             }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="90" fixed="right">
+        <el-table-column label="操作" width="100" fixed="right">
           <template #default="{ row }">
-            <el-button type="danger" link :disabled="row.builtin" @click="removeRoleRow(row)"
+            <el-button
+              type="danger"
+              size="small"
+              :disabled="row.builtin"
+              @click="removeRoleRow(row)"
               >删除</el-button
             >
           </template>

From c8bf4a8fd4e5e9aaba705806a3f85fb427292339 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 12:56:07 +0800
Subject: [PATCH 15/59] =?UTF-8?q?fix(web):=20=E4=BF=AE=E5=A4=8D=E7=A6=81?=
 =?UTF-8?q?=E7=94=A8=E6=8C=89=E9=92=AE=E4=B8=8E=E5=BC=B9=E7=AA=97=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../UserInfo/src/components/LockDialog.vue    | 22 ++++++++++++-------
 src/styles/business/drama-management.css      | 17 ++++++++++++++
 src/styles/business/theme.css                 |  8 +++++++
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/UserInfo/src/components/LockDialog.vue b/src/components/UserInfo/src/components/LockDialog.vue
index 54c4015..a2bab50 100644
--- a/src/components/UserInfo/src/components/LockDialog.vue
+++ b/src/components/UserInfo/src/components/LockDialog.vue
@@ -91,7 +91,7 @@ const cancel = () => {
   <Dialog
     v-model="dialogVisible"
     width="440px"
-    max-height="220px"
+    max-height="320px"
     :class="prefixCls"
     :title="dialogTitle"
     :fullscreen="false"
@@ -136,29 +136,35 @@ const cancel = () => {
 
 <style lang="less" scoped>
 :global(.v-lock-dialog) {
+  display: flex;
   width: 440px !important;
+  height: auto !important;
   max-width: calc(100vw - 24px);
-  max-height: 360px;
+  max-height: 440px;
+  overflow: hidden;
+  flex-direction: column;
 }
 
 :global(.v-lock-dialog .el-dialog__header) {
   height: auto;
-  min-height: 64px;
-  padding: 14px 20px 8px !important;
+  min-height: 56px;
+  padding: 8px 20px 4px !important;
   border-bottom: 0;
 }
 
 :global(.v-lock-dialog .el-dialog__body) {
+  min-height: 0;
   padding: 4px 20px 8px !important;
+  overflow: hidden;
 }
 
 :global(.v-lock-dialog .el-dialog__footer) {
-  padding: 10px 20px 16px;
+  padding: 6px 20px 10px;
 }
 
 :global(.v-lock-dialog .el-dialog__footer .el-button) {
-  min-width: 96px;
   height: 36px;
+  min-width: 96px;
 }
 
 :global(.v-lock-dialog .el-dialog__header .absolute) {
@@ -192,10 +198,10 @@ const cancel = () => {
 
   p {
     margin: 3px 0 0;
-    color: var(--el-text-color-secondary);
     font-size: 12px;
     font-weight: 400;
     line-height: 1.4;
+    color: var(--el-text-color-secondary);
   }
 }
 
@@ -228,9 +234,9 @@ const cancel = () => {
 }
 
 .lock-dialog-name {
-  color: var(--el-text-color-regular);
   font-size: 14px;
   font-weight: 600;
+  color: var(--el-text-color-regular);
 }
 
 .lock-password-field {
diff --git a/src/styles/business/drama-management.css b/src/styles/business/drama-management.css
index aa498c4..8f2e401 100644
--- a/src/styles/business/drama-management.css
+++ b/src/styles/business/drama-management.css
@@ -166,8 +166,12 @@
 }
 
 .cover-preview-card img {
+  position: absolute;
+  inset: 0;
+  display: block;
   width: 100%;
   height: 100%;
+  max-height: 100%;
   object-fit: cover;
 }
 
@@ -265,6 +269,19 @@
   .editor-grid--two {
     grid-template-columns: 1fr;
   }
+
+  .cover-editor {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .cover-preview-card {
+    flex-basis: 128px;
+  }
+
+  .cover-editor-meta {
+    width: 100%;
+  }
 }
 
 html.dark .cover-preview-card,
diff --git a/src/styles/business/theme.css b/src/styles/business/theme.css
index 54ef210..871a20a 100644
--- a/src/styles/business/theme.css
+++ b/src/styles/business/theme.css
@@ -52,6 +52,14 @@ body {
   background: var(--el-color-danger-dark-2) !important;
   border-color: var(--el-color-danger-dark-2) !important;
 }
+.el-button--danger.is-disabled,
+.el-button--danger.is-disabled:hover {
+  color: var(--el-text-color-placeholder) !important;
+  background: var(--el-fill-color-light) !important;
+  border-color: var(--el-border-color-lighter) !important;
+  cursor: not-allowed;
+  opacity: 1;
+}
 .el-message-box__btns .el-button--danger {
   color: #fff !important;
   background: var(--el-color-danger) !important;

From bb03a5ad84c4679ec48135e3d08c0d5b337ce6b8 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 13:21:09 +0800
Subject: [PATCH 16/59] =?UTF-8?q?fix(web):=20=E4=BF=AE=E5=A4=8D=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E5=8F=B0=E8=8F=9C=E5=8D=95=E5=9B=BE=E6=A0=87=E7=BB=A7?=
 =?UTF-8?q?=E6=89=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Menu/src/components/useRenderMenuItem.tsx         | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Menu/src/components/useRenderMenuItem.tsx b/src/components/Menu/src/components/useRenderMenuItem.tsx
index 0132652..a256571 100644
--- a/src/components/Menu/src/components/useRenderMenuItem.tsx
+++ b/src/components/Menu/src/components/useRenderMenuItem.tsx
@@ -22,14 +22,17 @@ export const useRenderMenuItem = () =>
             (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
             !meta?.alwaysShow
           ) {
+            const leafMeta = onlyOneChild?.meta
+              ? {
+                  ...onlyOneChild.meta,
+                  icon: onlyOneChild.meta.icon || meta.icon
+                }
+              : meta
             return (
               <ElMenuItem
                 index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
               >
-                {{
-                  default: () =>
-                    renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta, !nested)
-                }}
+                {{ default: () => renderMenuTitle(leafMeta, !nested) }}
               </ElMenuItem>
             )
           } else {

From f6f4d264eeac1c02f550810922fbbffdcdb3ee9b Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 13:27:44 +0800
Subject: [PATCH 17/59] =?UTF-8?q?fix(web):=20=E8=B0=83=E6=95=B4=E4=BA=8C?=
 =?UTF-8?q?=E7=BA=A7=E8=8F=9C=E5=8D=95=E8=83=8C=E6=99=AF=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/business/menu.css | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/styles/business/menu.css b/src/styles/business/menu.css
index b037da7..bf3c3de 100644
--- a/src/styles/business/menu.css
+++ b/src/styles/business/menu.css
@@ -53,6 +53,12 @@
   background-color: var(--el-color-primary-light-9) !important;
 }
 
+#v-menu .el-menu--inline .el-menu-item:hover,
+#v-menu .el-menu--inline .el-menu-item.is-active {
+  color: var(--el-color-primary) !important;
+  background-color: transparent !important;
+}
+
 #v-menu .el-menu .el-menu {
   background: transparent;
 }
@@ -81,6 +87,12 @@ html.dark #v-menu .el-menu-item.is-active {
   background-color: var(--app-primary-strong) !important;
 }
 
+html.dark #v-menu .el-menu--inline .el-menu-item:hover,
+html.dark #v-menu .el-menu--inline .el-menu-item.is-active {
+  color: #fff !important;
+  background-color: transparent !important;
+}
+
 .v-menu-popper--vertical,
 .v-menu-popper--horizontal {
   padding: 4px;
@@ -110,12 +122,12 @@ html.dark #v-menu .el-menu-item.is-active {
   margin-right: 8px;
 }
 
-.v-menu-popper--vertical .el-menu-item:hover,
-.v-menu-popper--horizontal .el-menu-item:hover,
-.v-menu-popper--vertical .el-menu-item.is-active,
-.v-menu-popper--horizontal .el-menu-item.is-active {
+html .v-menu-popper--vertical .el-menu-item:hover,
+html .v-menu-popper--horizontal .el-menu-item:hover,
+html .v-menu-popper--vertical .el-menu-item.is-active,
+html .v-menu-popper--horizontal .el-menu-item.is-active {
   color: var(--el-color-primary) !important;
-  background-color: var(--el-color-primary-light-9) !important;
+  background-color: transparent !important;
 }
 
 html.dark .v-menu-popper--vertical,
@@ -128,5 +140,5 @@ html.dark .v-menu-popper--horizontal .el-menu-item:hover,
 html.dark .v-menu-popper--vertical .el-menu-item.is-active,
 html.dark .v-menu-popper--horizontal .el-menu-item.is-active {
   color: #fff !important;
-  background-color: var(--app-primary-strong) !important;
+  background-color: transparent !important;
 }

From 122aa21323b040584ed52b08d1ace11d52b813f4 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 13:30:29 +0800
Subject: [PATCH 18/59] =?UTF-8?q?fix(web):=20=E9=87=8D=E5=81=9A=E5=89=A7?=
 =?UTF-8?q?=E9=9B=86=E7=AE=A1=E7=90=86=E9=A1=B6=E9=83=A8=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/business/style.css                 | 61 +++++++++++++++----
 .../EpisodeManagementView.vue                 | 35 ++++++++---
 2 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/src/styles/business/style.css b/src/styles/business/style.css
index d883473..d08deb0 100644
--- a/src/styles/business/style.css
+++ b/src/styles/business/style.css
@@ -511,6 +511,8 @@ body {
 .episode-context {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 24px;
   padding: 20px 0;
   border-bottom: 1px solid #f0eff4;
 }
@@ -520,32 +522,65 @@ body {
   font-size: 22px;
   border-radius: var(--app-radius-md);
 }
-.episode-context-copy {
-  margin-left: 12px;
+.episode-context-info {
   display: flex;
+  min-width: 0;
   flex-direction: column;
   gap: 4px;
 }
-.episode-context-copy > span {
-  font-size: 9px;
-  color: #a7a5b3;
+
+.episode-context-label {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  line-height: 1.4;
 }
-.episode-context-copy b {
-  font-size: 13px;
+
+.episode-context-title {
+  overflow: hidden;
+  color: var(--el-text-color-primary);
+  font-size: 16px;
+  font-weight: 650;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.episode-context-copy small {
-  font-size: 9px;
-  color: #aaa8b6;
+
+.episode-context-count {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  line-height: 1.4;
 }
+
+.episode-switcher {
+  display: flex;
+  flex: 0 0 clamp(320px, 32vw, 360px);
+  width: clamp(320px, 32vw, 360px);
+  min-width: 0;
+  flex-direction: column;
+  gap: 6px;
+}
+
 .drama-select {
-  margin-left: auto;
-  width: 215px;
+  width: 100%;
 }
 .drama-select .el-input__wrapper {
   box-shadow: 0 0 0 1px #efedf3 inset !important;
 }
 .drama-select .el-input__inner {
-  font-size: 10px;
+  font-size: 13px;
+}
+
+@media (max-width: 768px) {
+  .episode-context {
+    align-items: stretch;
+    gap: 14px;
+    flex-direction: column;
+  }
+
+  .episode-switcher {
+    flex-basis: auto;
+    width: 100%;
+  }
 }
 .episode-toolbar {
   display: flex;
diff --git a/src/views/contentManagement/EpisodeManagementView.vue b/src/views/contentManagement/EpisodeManagementView.vue
index 7e04cf5..8c6864e 100644
--- a/src/views/contentManagement/EpisodeManagementView.vue
+++ b/src/views/contentManagement/EpisodeManagementView.vue
@@ -236,16 +236,31 @@ onMounted(async () => {
     ></div
   >
   <section class="panel episode-panel">
-    <div class="episode-context"
-      ><div class="episode-context-copy"
-        ><span>选择短剧</span><b>{{ selectedDrama?.title || '暂无短剧' }}</b></div
-      ><el-select v-model="selectedDramaId" class="drama-select" @change="onDramaChange"
-        ><el-option
-          v-for="item in dramas"
-          :key="item.id"
-          :label="`${item.title}（${item.episodes} 集）`"
-          :value="item.id" /></el-select
-    ></div>
+    <div class="episode-context">
+      <div class="episode-context-info">
+        <span class="episode-context-label">当前短剧</span>
+        <b class="episode-context-title">{{ selectedDrama?.title || '暂无短剧' }}</b>
+        <small class="episode-context-count"
+          >共 {{ selectedDrama?.episodes ?? episodes.length }} 集</small
+        >
+      </div>
+      <div class="episode-switcher">
+        <span class="episode-context-label">切换短剧</span>
+        <el-select
+          v-model="selectedDramaId"
+          class="drama-select"
+          placeholder="请选择短剧"
+          @change="onDramaChange"
+        >
+          <el-option
+            v-for="item in dramas"
+            :key="item.id"
+            :label="`${item.title}（${item.episodes} 集）`"
+            :value="item.id"
+          />
+        </el-select>
+      </div>
+    </div>
     <div class="episode-toolbar"
       ><div
         ><h2>剧集列表（{{ episodes.length }}）</h2><p>按列表顺序播放</p></div

From 8a84f24baf5c7730633fe66f832eba397f52c0f9 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 13:42:28 +0800
Subject: [PATCH 19/59] =?UTF-8?q?feat(web):=20=E6=94=AF=E6=8C=81=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=E5=88=97=E8=A1=A8=E5=9B=BE=E7=89=87=E5=A4=A7=E5=9B=BE?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppImage/index.ts              |  5 +
 src/components/AppImage/src/AppImage.vue      | 94 +++++++++++++++++++
 src/components/index.ts                       |  2 +
 src/styles/business/app-user-management.css   |  3 +-
 src/styles/business/creator-center.css        |  4 +-
 .../BannerManagementView.vue                  | 19 +++-
 .../contentManagement/DramaManagementView.vue | 20 +++-
 src/views/creator-center/DramaEditView.vue    | 20 +++-
 src/views/creator-center/WorkspaceView.vue    | 21 ++++-
 src/views/userManagement/AppUsersView.vue     | 27 +++++-
 10 files changed, 202 insertions(+), 13 deletions(-)
 create mode 100644 src/components/AppImage/index.ts
 create mode 100644 src/components/AppImage/src/AppImage.vue

diff --git a/src/components/AppImage/index.ts b/src/components/AppImage/index.ts
new file mode 100644
index 0000000..e05ab0e
--- /dev/null
+++ b/src/components/AppImage/index.ts
@@ -0,0 +1,5 @@
+// Author: fruit.com.cn
+
+import AppImage from './src/AppImage.vue'
+
+export { AppImage }
diff --git a/src/components/AppImage/src/AppImage.vue b/src/components/AppImage/src/AppImage.vue
new file mode 100644
index 0000000..9a63e9e
--- /dev/null
+++ b/src/components/AppImage/src/AppImage.vue
@@ -0,0 +1,94 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PropType } from 'vue'
+import { ElImage } from 'element-plus'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  previewList: {
+    type: Array as () => string[],
+    default: () => []
+  },
+  initialIndex: {
+    type: Number,
+    default: 0
+  },
+  fit: {
+    type: String as PropType<'fill' | 'contain' | 'cover' | 'none' | 'scale-down'>,
+    default: 'cover'
+  },
+  class: {
+    type: [String, Array, Object],
+    default: ''
+  },
+  style: {
+    type: [String, Array, Object],
+    default: undefined
+  },
+  alt: {
+    type: String,
+    default: ''
+  }
+})
+
+const resolvedPreviewList = computed(() => {
+  const images = (props.previewList || []).filter(Boolean)
+  return images.length ? images : [props.src]
+})
+
+const resolvedInitialIndex = computed(() =>
+  Math.max(0, Math.min(props.initialIndex, resolvedPreviewList.value.length - 1))
+)
+</script>
+
+<template>
+  <ElImage
+    v-bind="$attrs"
+    :src="src"
+    :alt="alt"
+    :fit="fit"
+    :preview-src-list="resolvedPreviewList"
+    :initial-index="resolvedInitialIndex"
+    :preview-teleported="true"
+    :hide-on-click-modal="true"
+    :class="['app-image', props.class]"
+    :style="style"
+  >
+    <template #error>
+      <div class="app-image-error">
+        <AppIcon :icon="AppIcons.error" :size="20" />
+      </div>
+    </template>
+  </ElImage>
+</template>
+
+<style scoped>
+.app-image {
+  cursor: zoom-in;
+}
+
+.app-image :deep(.el-image__inner) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.app-image-error {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  color: var(--el-text-color-placeholder);
+  background: var(--el-fill-color-lighter);
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index 414e576..884b5a8 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,10 +3,12 @@
 import type { App } from 'vue'
 import { Icon } from './Icon'
 import { AppIcon } from './AppIcon'
+import { AppImage } from './AppImage'
 import { BaseButton } from './Button'
 
 export const setupGlobCom = (app: App<Element>): void => {
   app.component('Icon', Icon)
   app.component('AppIcon', AppIcon)
+  app.component('AppImage', AppImage)
   app.component('BaseButton', BaseButton)
 }
diff --git a/src/styles/business/app-user-management.css b/src/styles/business/app-user-management.css
index 9640d79..a126314 100644
--- a/src/styles/business/app-user-management.css
+++ b/src/styles/business/app-user-management.css
@@ -53,7 +53,8 @@
   line-height: 1;
 }
 
-.app-user-avatar img {
+.app-user-avatar img,
+.app-user-avatar .app-user-avatar-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
diff --git a/src/styles/business/creator-center.css b/src/styles/business/creator-center.css
index 7691cb6..b274f9f 100644
--- a/src/styles/business/creator-center.css
+++ b/src/styles/business/creator-center.css
@@ -59,8 +59,10 @@
 }
 
 .creator-drama-cover img,
+.creator-drama-cover .creator-drama-image,
 .creator-cover-preview img,
-.creator-episode-cover img {
+.creator-episode-cover img,
+.creator-episode-cover .creator-episode-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
diff --git a/src/views/contentManagement/BannerManagementView.vue b/src/views/contentManagement/BannerManagementView.vue
index 056ff97..f5a96ad 100644
--- a/src/views/contentManagement/BannerManagementView.vue
+++ b/src/views/contentManagement/BannerManagementView.vue
@@ -1,9 +1,10 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
+import { AppImage } from '@/components/AppImage'
 import {
   createBannerApi,
   deleteBannerApi,
@@ -53,6 +54,12 @@ const linkTypeOptions = [
   { code: 'URL', text: '打开链接' }
 ]
 
+const bannerPreviewList = computed(() => list.value.map((item) => item.imageUrl).filter(Boolean))
+
+function bannerPreviewIndex(row) {
+  return Math.max(0, bannerPreviewList.value.indexOf(row.imageUrl))
+}
+
 async function load() {
   loading.value = true
   try {
@@ -253,7 +260,15 @@ onMounted(async () => {
     >
       <el-table-column label="预览" width="190">
         <template #default="{ row }">
-          <img v-if="row.imageUrl" :src="row.imageUrl" class="banner-thumb" />
+          <AppImage
+            v-if="row.imageUrl"
+            :src="row.imageUrl"
+            :preview-list="bannerPreviewList"
+            :initial-index="bannerPreviewIndex(row)"
+            fit="cover"
+            class="banner-thumb"
+            :alt="row.title"
+          />
           <div v-else class="banner-thumb-empty">暂无图片</div>
         </template>
       </el-table-column>
diff --git a/src/views/contentManagement/DramaManagementView.vue b/src/views/contentManagement/DramaManagementView.vue
index 80e438c..9941efe 100644
--- a/src/views/contentManagement/DramaManagementView.vue
+++ b/src/views/contentManagement/DramaManagementView.vue
@@ -5,6 +5,7 @@ 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 { AppImage } from '@/components/AppImage'
 import {
   changeDramaStatusApi,
   createDramaApi,
@@ -63,6 +64,12 @@ const coverDisplayName = computed(
   () => coverFileName.value || (form.cover ? coverBasename(form.cover) : '尚未选择封面')
 )
 
+const pageCoverPreviewList = computed(() => list.value.map((item) => item.cover).filter(Boolean))
+
+function coverPreviewIndex(row) {
+  return Math.max(0, pageCoverPreviewList.value.indexOf(row.cover))
+}
+
 const statusOptions = [
   { code: 'draft', text: '草稿' },
   { code: 'reviewing', text: '审核中' },
@@ -354,10 +361,15 @@ onMounted(async () => {
       <el-table-column label="短剧名称" min-width="220"
         ><template #default="{ row }"
           ><div class="drama-cell"
-            ><img v-if="row.cover" :src="row.cover" class="drama-cover-image" /><div
-              v-else
-              class="drama-cover"
-              >暂无封面</div
+            ><AppImage
+              v-if="row.cover"
+              :src="row.cover"
+              :preview-list="pageCoverPreviewList"
+              :initial-index="coverPreviewIndex(row)"
+              fit="cover"
+              class="drama-cover-image"
+              :alt="row.title"
+            /><div v-else class="drama-cover">暂无封面</div
             ><div
               ><b>{{ row.title }}</b></div
             ></div
diff --git a/src/views/creator-center/DramaEditView.vue b/src/views/creator-center/DramaEditView.vue
index 74c45cf..e5e08e3 100644
--- a/src/views/creator-center/DramaEditView.vue
+++ b/src/views/creator-center/DramaEditView.vue
@@ -1,7 +1,9 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
+import { computed } from 'vue'
 import { AppIcons } from '@/constants/icons'
+import { AppImage } from '@/components/AppImage'
 import PageHeading from '@/views/components/PageHeading.vue'
 import CreatorCenterPage from './components/CreatorCenterPage.vue'
 import { useRbac } from '@/stores/rbac'
@@ -47,6 +49,14 @@ const {
   withdraw
 } = useDramaEdit()
 
+const episodeCoverPreviewList = computed(() =>
+  episodes.value.map((row) => row.cover).filter(Boolean)
+)
+
+function episodeCoverPreviewIndex(row) {
+  return Math.max(0, episodeCoverPreviewList.value.indexOf(row.cover))
+}
+
 function back() {
   window.history.back()
 }
@@ -193,7 +203,15 @@ function requestDramaCover(options) {
         <el-table-column label="封面" width="88">
           <template #default="{ row }">
             <div class="creator-episode-cover">
-              <img v-if="row.cover" :src="row.cover" alt="" />
+              <AppImage
+                v-if="row.cover"
+                :src="row.cover"
+                :preview-list="episodeCoverPreviewList"
+                :initial-index="episodeCoverPreviewIndex(row)"
+                fit="cover"
+                class="creator-episode-image"
+                :alt="row.title"
+              />
               <span v-else>无</span>
             </div>
           </template>
diff --git a/src/views/creator-center/WorkspaceView.vue b/src/views/creator-center/WorkspaceView.vue
index 0efaac7..c37852a 100644
--- a/src/views/creator-center/WorkspaceView.vue
+++ b/src/views/creator-center/WorkspaceView.vue
@@ -1,9 +1,10 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { AppIcons } from '@/constants/icons'
+import { AppImage } from '@/components/AppImage'
 import PageHeading from '@/views/components/PageHeading.vue'
 import CreatorCenterPage from './components/CreatorCenterPage.vue'
 import { useCreatorAccess } from './composables/useCreatorAccess'
@@ -43,6 +44,14 @@ const {
 
 const activeTab = ref('dramas')
 
+const workspaceCoverPreviewList = computed(() =>
+  (dramas.rows || []).map((row) => row.cover).filter(Boolean)
+)
+
+function workspaceCoverPreviewIndex(row) {
+  return Math.max(0, workspaceCoverPreviewList.value.indexOf(row.cover))
+}
+
 function onTabChange(name) {
   if (name === 'notices' && !notices.loaded) loadNotices()
 }
@@ -149,7 +158,15 @@ function openEdit(row) {
               <template #default="{ row }">
                 <div class="creator-drama-cell">
                   <div class="creator-drama-cover">
-                    <img v-if="row.cover" :src="row.cover" alt="" />
+                    <AppImage
+                      v-if="row.cover"
+                      :src="row.cover"
+                      :preview-list="workspaceCoverPreviewList"
+                      :initial-index="workspaceCoverPreviewIndex(row)"
+                      fit="cover"
+                      class="creator-drama-image"
+                      :alt="row.title"
+                    />
                     <span v-else>{{ (row.title || '?').slice(0, 1) }}</span>
                   </div>
                   <div class="creator-drama-meta">
diff --git a/src/views/userManagement/AppUsersView.vue b/src/views/userManagement/AppUsersView.vue
index 82ad0a4..5b39fe1 100644
--- a/src/views/userManagement/AppUsersView.vue
+++ b/src/views/userManagement/AppUsersView.vue
@@ -3,6 +3,7 @@
 <script setup>
 import { computed } from 'vue'
 import { AppIcons } from '@/constants/icons'
+import { AppImage } from '@/components/AppImage'
 import PageHeading from '@/views/components/PageHeading.vue'
 import { useRbac } from '@/stores/rbac'
 import {
@@ -70,6 +71,12 @@ function avatarText(row) {
   return name.slice(0, 1).toUpperCase()
 }
 
+const avatarPreviewList = computed(() => users.value.map((row) => row.avatarUrl).filter(Boolean))
+
+function avatarPreviewIndex(row) {
+  return Math.max(0, avatarPreviewList.value.indexOf(row.avatarUrl))
+}
+
 function canBeBanned(row) {
   return row.status !== 'banned' && row.status !== 'deactivated'
 }
@@ -145,7 +152,15 @@ function canBeBanned(row) {
         <template #default="{ row }">
           <div class="app-user-cell">
             <span class="app-user-avatar">
-              <img v-if="row.avatarUrl" :src="row.avatarUrl" alt="" />
+              <AppImage
+                v-if="row.avatarUrl"
+                :src="row.avatarUrl"
+                :preview-list="avatarPreviewList"
+                :initial-index="avatarPreviewIndex(row)"
+                fit="cover"
+                class="app-user-avatar-image"
+                :alt="row.nickname || row.uid"
+              />
               <template v-else>{{ avatarText(row) }}</template>
             </span>
             <div class="app-user-meta">
@@ -217,7 +232,15 @@ function canBeBanned(row) {
       <template v-if="detail">
         <div class="app-user-summary">
           <span class="app-user-avatar">
-            <img v-if="detail.avatarUrl" :src="detail.avatarUrl" alt="" />
+            <AppImage
+              v-if="detail.avatarUrl"
+              :src="detail.avatarUrl"
+              :preview-list="avatarPreviewList"
+              :initial-index="avatarPreviewIndex(detail)"
+              fit="cover"
+              class="app-user-avatar-image"
+              :alt="detail.nickname || detail.uid"
+            />
             <template v-else>{{ avatarText(detail) }}</template>
           </span>
           <div class="app-user-meta">

From f281dcf1b389a49d86f9cbe4204e5629435e108a Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 13:47:42 +0800
Subject: [PATCH 20/59] =?UTF-8?q?feat(web):=20=E9=87=8D=E5=81=9A=E8=BD=AE?=
 =?UTF-8?q?=E6=92=AD=E5=9B=BE=E7=BC=96=E8=BE=91=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/business/banner-management.css     | 207 +++++++++++-
 .../BannerManagementView.vue                  | 296 ++++++++++++++----
 2 files changed, 420 insertions(+), 83 deletions(-)

diff --git a/src/styles/business/banner-management.css b/src/styles/business/banner-management.css
index e1178ba..7ada252 100644
--- a/src/styles/business/banner-management.css
+++ b/src/styles/business/banner-management.css
@@ -19,31 +19,206 @@
   font-size: 12px;
 }
 
-.banner-field {
+.banner-editor-dialog {
   display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  width: 100%;
+  max-height: calc(100vh - 40px);
+  overflow: hidden;
+  flex-direction: column;
+  border-radius: var(--app-radius-lg) !important;
 }
-.banner-field-actions {
+
+.banner-editor-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  padding: 8px 24px 0;
+  overflow-y: auto;
+}
+
+.banner-editor-dialog .el-dialog__footer {
+  flex: 0 0 auto;
+  padding: 14px 24px;
+  background: var(--el-bg-color-overlay);
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.banner-editor-dialog .el-dialog__footer .el-button {
+  min-width: 88px;
+  height: 36px;
+}
+
+.banner-editor-section {
+  padding: 4px 0 18px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.banner-editor-section + .banner-editor-section {
+  padding-top: 18px;
+}
+
+.banner-editor-section:last-child {
+  padding-bottom: 4px;
+  border-bottom: 0;
+}
+
+.banner-editor-section-title {
+  margin: 0 0 14px;
+  color: var(--el-text-color-primary);
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.banner-editor-grid {
+  display: grid;
+  gap: 0 16px;
+}
+
+.banner-editor-grid--two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.banner-editor-number {
+  width: 180px !important;
+}
+
+.banner-image-editor {
+  display: flex;
+  gap: 18px;
+  width: 100%;
+  align-items: flex-start;
+}
+
+.banner-image-preview-card {
+  position: relative;
+  flex: 0 0 240px;
+  width: 240px;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  background: var(--el-fill-color-lighter);
+}
+
+.banner-image-preview-card > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.banner-image-empty {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 8px;
+}
+
+.banner-image-upload-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  color: #fff;
+  font-size: 12px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  background: color-mix(in srgb, var(--el-color-primary) 78%, transparent);
+}
+
+.banner-image-upload-mask b {
+  font-size: 16px;
+}
+
+.banner-image-meta {
+  display: flex;
   flex: 1 1 auto;
   min-width: 0;
+  flex-direction: column;
+  gap: 10px;
 }
-/* 编辑弹窗里的轮播图预览：和上传控件并排，控制弹窗高度 */
-.form-banner-preview {
-  display: block;
-  width: 200px;
-  height: 112px;
-  flex: 0 0 200px;
-  object-fit: contain;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--app-radius-md);
-  background: #f0f2f4 !important;
+
+.banner-image-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.banner-image-filename {
+  overflow: hidden;
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.banner-image-hint {
+  margin: 0;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.banner-image-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.banner-image-actions .el-button {
+  height: 36px;
+}
+
+.banner-original-link {
+  color: var(--el-color-primary);
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.banner-original-link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 600px) {
+  .banner-editor-dialog {
+    width: calc(100vw - 24px) !important;
+    margin: 12px auto !important;
+  }
+
+  .banner-editor-dialog .el-dialog__body {
+    padding-right: 18px;
+    padding-left: 18px;
+  }
+
+  .banner-editor-grid--two {
+    grid-template-columns: 1fr;
+  }
+
+  .banner-image-editor {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .banner-image-preview-card {
+    flex-basis: 135px;
+  }
+
+  .banner-image-meta {
+    width: 100%;
+  }
 }
 
 .dark .banner-thumb,
 .dark .banner-thumb-empty,
-.dark .form-banner-preview {
+.dark .banner-image-preview-card,
+.dark .banner-image-empty {
   background: #353b45 !important;
   color: #b9c1cb;
 }
diff --git a/src/views/contentManagement/BannerManagementView.vue b/src/views/contentManagement/BannerManagementView.vue
index f5a96ad..01a414a 100644
--- a/src/views/contentManagement/BannerManagementView.vue
+++ b/src/views/contentManagement/BannerManagementView.vue
@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
 import { AppImage } from '@/components/AppImage'
@@ -33,7 +33,10 @@ const dialogVisible = ref(false)
 const saving = ref(false)
 const uploadingImage = ref(false)
 const imagePercent = ref(0)
+const imageError = ref('')
+const imageFileName = ref('')
 const editingId = ref(null)
+const formRef = ref()
 const form = reactive({
   imageUrl: '',
   position: 'HOME_TOP',
@@ -54,12 +57,47 @@ const linkTypeOptions = [
   { code: 'URL', text: '打开链接' }
 ]
 
+const MAX_BANNER_IMAGE_SIZE = 5 * 1024 * 1024
+const BANNER_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/webp']
+const formRules = {
+  imageUrl: [{ required: true, message: '请上传轮播图片', trigger: 'change' }],
+  position: [{ required: true, message: '请选择展示位置', trigger: 'change' }],
+  linkValue: [
+    {
+      validator: (_rule, value, callback) => {
+        if (form.linkType === 'DRAMA' && !value) {
+          callback(new Error('请选择要跳转的短剧'))
+        } else if (form.linkType === 'URL' && !String(value || '').trim()) {
+          callback(new Error('请填写跳转地址'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'change'
+    }
+  ]
+}
+
 const bannerPreviewList = computed(() => list.value.map((item) => item.imageUrl).filter(Boolean))
+const imageDisplayName = computed(
+  () => imageFileName.value || (form.imageUrl ? bannerBasename(form.imageUrl) : '尚未选择图片')
+)
 
 function bannerPreviewIndex(row) {
   return Math.max(0, bannerPreviewList.value.indexOf(row.imageUrl))
 }
 
+function bannerBasename(path) {
+  if (!path) return ''
+  const clean = path.split('?')[0].split('#')[0]
+  return decodeURIComponent(clean.split('/').pop() || clean)
+}
+
+async function resetValidation() {
+  await nextTick()
+  formRef.value?.clearValidate()
+}
+
 async function load() {
   loading.value = true
   try {
@@ -107,7 +145,10 @@ function openCreate() {
     sort: nextSort(),
     status: 1
   })
+  imageFileName.value = ''
+  imageError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 function openEdit(row) {
@@ -120,7 +161,10 @@ function openEdit(row) {
     sort: row.sort ?? 0,
     status: row.status
   })
+  imageFileName.value = row.imageUrl ? bannerBasename(row.imageUrl) : ''
+  imageError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 function nextSort() {
@@ -128,12 +172,11 @@ function nextSort() {
 }
 
 async function saveBanner() {
-  if (!form.imageUrl.trim()) return ElMessage.warning('请上传轮播图片')
-  if (form.linkType === 'DRAMA' && !form.linkValue) {
-    return ElMessage.warning('请选择要跳转的短剧')
-  }
-  if (form.linkType === 'URL' && !form.linkValue.trim()) {
-    return ElMessage.warning('请填写跳转地址')
+  if (saving.value || uploadingImage.value) return
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
   }
   const payload = {
     ...form,
@@ -157,21 +200,55 @@ async function saveBanner() {
   }
 }
 
+function beforeImageUpload(file) {
+  imageError.value = ''
+  if (!BANNER_IMAGE_TYPES.includes(file.type)) {
+    imageError.value = '图片仅支持 JPG、PNG 或 WebP 格式'
+    return false
+  }
+  if (file.size > MAX_BANNER_IMAGE_SIZE) {
+    imageError.value = '图片大小不能超过 5MB'
+    return false
+  }
+  return true
+}
+
 async function uploadImage(options) {
   uploadingImage.value = true
   imagePercent.value = 0
+  imageError.value = ''
   try {
     const asset = await uploadFile(options.file, {
       bizType: 'BANNER',
       onProgress: (percent) => (imagePercent.value = percent)
     })
     form.imageUrl = asset.url
+    imageFileName.value = options.file.name
+    await resetValidation()
     ElMessage.success('图片已上传')
+  } catch {
+    imageError.value = '图片上传失败，请检查网络后重试'
   } finally {
     uploadingImage.value = false
   }
 }
 
+function removeImage() {
+  if (uploadingImage.value) return
+  form.imageUrl = ''
+  imageFileName.value = ''
+  imageError.value = ''
+  resetValidation()
+}
+
+function beforeDialogClose(done) {
+  if (saving.value || uploadingImage.value) {
+    ElMessage.warning(saving.value ? '正在保存，请稍候' : '图片正在上传，请稍候')
+    return
+  }
+  done()
+}
+
 async function toggleStatus(row) {
   const next = row.status === 1 ? 0 : 1
   await updateBannerStatusApi(row.id, next)
@@ -350,75 +427,160 @@ onMounted(async () => {
     </div>
   </section>
 
-  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑轮播图' : '新建轮播图'" width="620px">
-    <el-form label-position="top">
-      <el-form-item label="轮播图片" required>
-        <div class="banner-field">
-          <div class="banner-field-actions">
-            <el-upload
-              :show-file-list="false"
-              accept="image/*"
-              :http-request="uploadImage"
-              :disabled="uploadingImage"
-            >
-              <el-button :loading="uploadingImage">{{
-                form.imageUrl ? '更换图片' : '选择图片'
-              }}</el-button>
-            </el-upload>
-            <p v-if="uploadingImage" class="selected-file">上传中 {{ imagePercent }}%</p>
-            <p v-else-if="form.imageUrl" class="selected-file">图片已上传</p>
-            <el-input v-model="form.imageUrl" placeholder="也可以直接填写图片地址" />
+  <el-dialog
+    v-model="dialogVisible"
+    :title="editingId ? '编辑轮播图' : '新建轮播图'"
+    width="680px"
+    class="banner-editor-dialog"
+    :close-on-click-modal="false"
+    :before-close="beforeDialogClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="formRules"
+      label-position="top"
+      class="banner-editor-form"
+    >
+      <section class="banner-editor-section">
+        <h3 class="banner-editor-section-title">轮播图片</h3>
+        <el-form-item prop="imageUrl">
+          <div class="banner-image-editor">
+            <div class="banner-image-preview-card">
+              <img v-if="form.imageUrl" :src="form.imageUrl" alt="轮播图预览" />
+              <div v-else class="banner-image-empty">
+                <AppIcon :icon="AppIcons.content" :size="28" />
+                <span>暂无图片</span>
+              </div>
+              <div v-if="uploadingImage" class="banner-image-upload-mask">
+                <span>上传中</span>
+                <b>{{ imagePercent }}%</b>
+              </div>
+            </div>
+
+            <div class="banner-image-meta">
+              <div class="banner-image-status">
+                <el-tag :type="form.imageUrl ? 'success' : 'info'" effect="light">
+                  {{ form.imageUrl ? '已上传' : '未上传' }}
+                </el-tag>
+                <span class="banner-image-filename" :title="imageDisplayName">
+                  {{ imageDisplayName }}
+                </span>
+              </div>
+              <p class="banner-image-hint">支持 JPG、PNG、WebP，单张不超过 5MB。</p>
+              <el-alert
+                v-if="imageError"
+                :title="imageError"
+                type="error"
+                :closable="false"
+                show-icon
+              />
+              <div class="banner-image-actions">
+                <el-upload
+                  :show-file-list="false"
+                  accept="image/jpeg,image/png,image/webp"
+                  :before-upload="beforeImageUpload"
+                  :http-request="uploadImage"
+                  :disabled="uploadingImage"
+                >
+                  <el-button :loading="uploadingImage" :disabled="uploadingImage">
+                    <AppIcon :icon="AppIcons.upload" />
+                    {{ form.imageUrl ? '更换图片' : '选择图片' }}
+                  </el-button>
+                </el-upload>
+                <el-button
+                  v-if="form.imageUrl"
+                  type="danger"
+                  :disabled="uploadingImage"
+                  @click="removeImage"
+                >
+                  移除
+                </el-button>
+                <a
+                  v-if="form.imageUrl"
+                  class="banner-original-link"
+                  :href="form.imageUrl"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  查看原图
+                </a>
+              </div>
+            </div>
           </div>
-          <img v-if="form.imageUrl" :src="form.imageUrl" class="form-banner-preview" />
+        </el-form-item>
+      </section>
+
+      <section class="banner-editor-section">
+        <h3 class="banner-editor-section-title">跳转配置</h3>
+        <div class="banner-editor-grid banner-editor-grid--two">
+          <el-form-item label="展示位置" prop="position">
+            <el-select v-model="form.position" placeholder="请选择展示位置">
+              <el-option
+                v-for="item in positionOptions"
+                :key="item.code"
+                :label="item.text"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="跳转类型">
+            <el-select v-model="form.linkType">
+              <el-option
+                v-for="item in linkTypeOptions"
+                :key="item.code"
+                :label="item.text"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
         </div>
-      </el-form-item>
-      <div class="form-row">
-        <el-form-item label="展示位置" required>
-          <el-select v-model="form.position">
+        <el-form-item v-if="form.linkType === 'DRAMA'" label="跳转短剧" prop="linkValue">
+          <el-select v-model="form.linkValue" filterable placeholder="搜索短剧">
             <el-option
-              v-for="item in positionOptions"
-              :key="item.code"
-              :label="item.text"
-              :value="item.code"
+              v-for="item in dramas"
+              :key="item.id"
+              :label="`${item.title}（${item.statusText}）`"
+              :value="String(item.id)"
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="跳转类型">
-          <el-select v-model="form.linkType">
-            <el-option
-              v-for="item in linkTypeOptions"
-              :key="item.code"
-              :label="item.text"
-              :value="item.code"
+        <el-form-item v-if="form.linkType === 'URL'" label="跳转地址" prop="linkValue">
+          <el-input v-model="form.linkValue" placeholder="https://..." />
+        </el-form-item>
+      </section>
+
+      <section class="banner-editor-section">
+        <h3 class="banner-editor-section-title">排序与状态</h3>
+        <div class="banner-editor-grid banner-editor-grid--two">
+          <el-form-item label="排序">
+            <el-input-number
+              v-model="form.sort"
+              class="banner-editor-number"
+              controls-position="right"
+              :min="0"
+              :max="999"
             />
-          </el-select>
-        </el-form-item>
-      </div>
-      <el-form-item v-if="form.linkType === 'DRAMA'" label="跳转短剧" required>
-        <el-select v-model="form.linkValue" filterable placeholder="搜索短剧">
-          <el-option
-            v-for="item in dramas"
-            :key="item.id"
-            :label="`${item.title}（${item.statusText}）`"
-            :value="String(item.id)"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item v-if="form.linkType === 'URL'" label="跳转地址" required>
-        <el-input v-model="form.linkValue" placeholder="https://..." />
-      </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-item>
+          <el-form-item label="状态">
+            <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
+          </el-form-item>
+        </div>
+      </section>
     </el-form>
+
     <template #footer>
-      <el-button @click="dialogVisible = false">取消</el-button>
-      <el-button type="primary" :loading="saving" @click="saveBanner">保存</el-button>
+      <el-button :disabled="saving || uploadingImage" @click="dialogVisible = false">
+        取消
+      </el-button>
+      <el-button
+        type="primary"
+        :loading="saving"
+        :disabled="saving || uploadingImage"
+        @click="saveBanner"
+      >
+        保存
+      </el-button>
     </template>
   </el-dialog>
 </template>

From 2b5dda7c71ed10ae07c51966f6e5c3cfec348f23 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 13:53:57 +0800
Subject: [PATCH 21/59] =?UTF-8?q?feat(web):=20=E9=87=8D=E5=81=9A=E5=89=A7?=
 =?UTF-8?q?=E9=9B=86=E7=BC=96=E8=BE=91=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/business/drama-management.css      | 243 +++++++++++++-
 .../EpisodeManagementView.vue                 | 308 +++++++++++++++---
 2 files changed, 487 insertions(+), 64 deletions(-)

diff --git a/src/styles/business/drama-management.css b/src/styles/business/drama-management.css
index 8f2e401..da70d90 100644
--- a/src/styles/business/drama-management.css
+++ b/src/styles/business/drama-management.css
@@ -289,26 +289,239 @@ html.dark .cover-preview-empty {
   background: var(--el-fill-color-light);
 }
 
-/* 编辑弹窗里的视频预览 */
-.video-field {
+/* 剧集编辑弹窗 */
+.episode-editor-dialog {
   display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  width: 100%;
+  max-height: calc(100vh - 40px);
+  overflow: hidden;
+  flex-direction: column;
+  border-radius: var(--app-radius-lg) !important;
 }
-.video-field-actions {
+
+.episode-editor-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  padding: 8px 24px 0;
+  overflow-y: auto;
+}
+
+.episode-editor-dialog .el-dialog__footer {
+  flex: 0 0 auto;
+  padding: 14px 24px;
+  background: var(--el-bg-color-overlay);
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.episode-editor-dialog .el-dialog__footer .el-button {
+  min-width: 88px;
+  height: 36px;
+}
+
+.episode-editor-section {
+  padding: 4px 0 18px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.episode-editor-section + .episode-editor-section {
+  padding-top: 18px;
+}
+
+.episode-editor-section:last-child {
+  padding-bottom: 4px;
+  border-bottom: 0;
+}
+
+.episode-editor-section-title {
+  margin: 0 0 14px;
+  color: var(--el-text-color-primary);
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.episode-editor-grid {
+  display: grid;
+  gap: 0 16px;
+}
+
+.episode-editor-grid--two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.episode-editor-grid--three {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.episode-editor-number {
+  width: 180px !important;
+}
+
+.episode-video-editor {
+  display: flex;
+  gap: 18px;
+  width: 100%;
+  align-items: flex-start;
+}
+
+.episode-video-preview-card {
+  position: relative;
+  flex: 0 0 240px;
+  width: 240px;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border: 1px solid var(--el-border-color);
+  border-radius: 10px;
+  background: #000;
+}
+
+.episode-editor-video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: #000;
+}
+
+.episode-video-empty-upload,
+.episode-video-empty-upload .el-upload {
+  width: 100%;
+  height: 100%;
+}
+
+.episode-video-empty-upload .el-upload-dragger {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  color: var(--el-text-color-secondary);
+  background: var(--el-fill-color-lighter);
+  border: 1px dashed var(--el-border-color);
+  border-radius: 9px;
+  align-items: center;
+  justify-content: center;
+}
+
+.episode-video-empty-copy {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  color: var(--el-text-color-secondary);
+}
+
+.episode-video-empty-copy b {
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+}
+
+.episode-video-empty-copy span {
+  font-size: 11px;
+}
+
+.episode-video-upload-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  color: #fff;
+  font-size: 12px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  background: color-mix(in srgb, var(--el-color-primary) 78%, transparent);
+}
+
+.episode-video-upload-mask b {
+  font-size: 16px;
+}
+
+.episode-video-meta {
+  display: flex;
   flex: 1 1 auto;
   min-width: 0;
+  flex-direction: column;
+  gap: 10px;
 }
-.form-video-preview {
-  display: block;
-  width: 200px;
-  height: 112px;
-  flex: 0 0 200px;
-  object-fit: contain;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--app-radius-md);
-  background: #000 !important;
+
+.episode-video-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.episode-video-filename {
+  overflow: hidden;
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.episode-video-hint {
+  margin: 0;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.episode-video-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.episode-video-actions .el-button {
+  height: 36px;
+}
+
+.episode-video-link {
+  color: var(--el-color-primary);
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.episode-video-link:hover {
+  text-decoration: underline;
+}
+
+.episode-video-empty-upload {
+  cursor: pointer;
+}
+
+@media (max-width: 600px) {
+  .episode-editor-dialog {
+    width: calc(100vw - 24px) !important;
+    margin: 12px auto !important;
+  }
+
+  .episode-editor-dialog .el-dialog__body {
+    padding-right: 18px;
+    padding-left: 18px;
+  }
+
+  .episode-editor-grid--two,
+  .episode-editor-grid--three {
+    grid-template-columns: 1fr;
+  }
+
+  .episode-video-editor {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .episode-video-preview-card {
+    flex-basis: 135px;
+  }
+
+  .episode-video-meta {
+    width: 100%;
+  }
+}
+
+html.dark .episode-video-preview-card,
+html.dark .episode-video-empty-upload .el-upload-dragger {
+  background: var(--el-fill-color-light);
 }
 
 /* 剧集预览弹窗里的播放器 */
diff --git a/src/views/contentManagement/EpisodeManagementView.vue b/src/views/contentManagement/EpisodeManagementView.vue
index 8c6864e..6e1b4a9 100644
--- a/src/views/contentManagement/EpisodeManagementView.vue
+++ b/src/views/contentManagement/EpisodeManagementView.vue
@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
@@ -30,9 +30,12 @@ const dialogVisible = ref(false)
 const saving = ref(false)
 const uploadingVideo = ref(false)
 const videoPercent = ref(0)
+const videoError = ref('')
+const videoFileName = ref('')
 const previewVisible = ref(false)
 const previewEpisode = ref(null)
 const editingId = ref(null)
+const formRef = ref()
 const form = reactive({
   number: 1,
   title: '',
@@ -50,7 +53,40 @@ const statusOptions = [
   { code: 'offline', text: '已下线' }
 ]
 
+const MAX_VIDEO_SIZE = 500 * 1024 * 1024
+const VIDEO_EXTENSIONS = ['mp4', 'mov']
+const formRules = {
+  number: [{ required: true, message: '请输入集号', trigger: 'change' }],
+  title: [{ required: true, message: '请输入剧集标题', trigger: 'blur' }],
+  videoUrl: [
+    {
+      validator: (_rule, value, callback) => {
+        if (form.status === 'published' && !value) {
+          callback(new Error('上线剧集必须上传视频'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'change'
+    }
+  ]
+}
+
 const selectedDrama = computed(() => dramas.value.find((item) => item.id === selectedDramaId.value))
+const videoDisplayName = computed(
+  () => videoFileName.value || (form.videoUrl ? episodeBasename(form.videoUrl) : '尚未选择视频')
+)
+
+function episodeBasename(path) {
+  if (!path) return ''
+  const clean = path.split('?')[0].split('#')[0]
+  return decodeURIComponent(clean.split('/').pop() || clean)
+}
+
+async function resetValidation() {
+  await nextTick()
+  formRef.value?.clearValidate()
+}
 
 async function loadDramas() {
   const res = await pageDramasApi({ pageIndex: 1, pageSize: 200 })
@@ -93,7 +129,10 @@ function openCreate() {
     unlockCoin: selectedDrama.value?.unlockCoin ?? 0,
     status: 'draft'
   })
+  videoFileName.value = ''
+  videoError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 function openEdit(row) {
@@ -107,12 +146,19 @@ function openEdit(row) {
     unlockCoin: row.unlockCoin || 0,
     status: row.status
   })
+  videoFileName.value = row.videoUrl ? episodeBasename(row.videoUrl) : ''
+  videoError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 async function saveEpisode() {
-  if (!form.title.trim()) return ElMessage.warning('请填写剧集标题')
-  if (!form.number || form.number < 1) return ElMessage.warning('请填写正确的集号')
+  if (saving.value || uploadingVideo.value) return
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
+  }
   const payload = {
     dramaId: selectedDramaId.value,
     number: form.number,
@@ -139,10 +185,28 @@ async function saveEpisode() {
   }
 }
 
+function beforeVideoUpload(file) {
+  videoError.value = ''
+  const extension = String(file.name || '')
+    .split('.')
+    .pop()
+    ?.toLowerCase()
+  if (!VIDEO_EXTENSIONS.includes(extension)) {
+    videoError.value = '视频仅支持 MP4 或 MOV 格式'
+    return false
+  }
+  if (file.size > MAX_VIDEO_SIZE) {
+    videoError.value = '视频大小不能超过 500MB'
+    return false
+  }
+  return true
+}
+
 /** 视频分片上传：先探测时长，再交给上传器，完成后回填地址与时长。 */
 async function uploadVideo(options) {
   uploadingVideo.value = true
   videoPercent.value = 0
+  videoError.value = ''
   try {
     const duration = await probeVideoDuration(options.file)
     const asset = await uploadFile(options.file, {
@@ -151,13 +215,33 @@ async function uploadVideo(options) {
       onProgress: (percent) => (videoPercent.value = percent)
     })
     form.videoUrl = asset.url
+    videoFileName.value = options.file.name
     if (duration > 0) form.durationSec = duration
+    await resetValidation()
     ElMessage.success('视频已上传')
+  } catch {
+    videoError.value = '视频上传失败，请检查网络后重试'
   } finally {
     uploadingVideo.value = false
   }
 }
 
+function removeVideo() {
+  if (uploadingVideo.value) return
+  form.videoUrl = ''
+  videoFileName.value = ''
+  videoError.value = ''
+  resetValidation()
+}
+
+function beforeDialogClose(done) {
+  if (saving.value || uploadingVideo.value) {
+    ElMessage.warning(saving.value ? '正在保存，请稍候' : '视频正在上传，请稍候')
+    return
+  }
+  done()
+}
+
 async function confirmDelete(row) {
   try {
     await ElMessageBox.confirm(`确定删除第 ${row.number} 集「${row.title}」吗？`, '删除确认', {
@@ -354,53 +438,179 @@ onMounted(async () => {
       >
     </el-table>
   </section>
-  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑剧集' : '新增剧集'" width="560px"
-    ><el-form label-position="top"
-      ><div class="form-row"
-        ><el-form-item label="集号" required
-          ><el-input-number v-model="form.number" :min="1" :max="999" /></el-form-item
-        ><el-form-item label="时长（秒）"
-          ><el-input-number v-model="form.durationSec" :min="0" :max="9999" /></el-form-item></div
-      ><el-form-item label="剧集标题" required
-        ><el-input v-model="form.title" placeholder="例如：命运的相遇" /></el-form-item
-      ><el-form-item label="视频文件"
-        ><div class="video-field"
-          ><div class="video-field-actions"
-            ><el-upload
-              drag
-              :show-file-list="false"
-              accept="video/*"
-              :http-request="uploadVideo"
-              :disabled="uploadingVideo"
-              ><div class="upload-copy"
-                >拖放视频文件到此处，或点击选择<br /><small>支持 MP4、MOV，自动分片上传</small></div
-              ></el-upload
-            ><p v-if="uploadingVideo" class="selected-file">上传中 {{ videoPercent }}%</p
-            ><p v-else-if="form.videoUrl" class="selected-file">视频已上传</p
-            ><el-input v-model="form.videoUrl" placeholder="也可以直接填写视频地址" /></div
-          ><video
-            v-if="form.videoUrl"
-            :src="form.videoUrl"
-            controls
-            class="form-video-preview"
-          ></video></div></el-form-item
-      ><div class="form-row"
-        ><el-form-item label="是否免费"><el-switch v-model="form.isFree" /></el-form-item
-        ><el-form-item v-if="!form.isFree" label="解锁金币"
-          ><el-input-number v-model="form.unlockCoin" :min="0" :max="9999" /></el-form-item
-        ><el-form-item label="状态"
-          ><el-select v-model="form.status"
-            ><el-option
-              v-for="item in statusOptions"
-              :key="item.code"
-              :label="item.text"
-              :value="item.code" /></el-select></el-form-item></div
-    ></el-form>
-    <template #footer
-      ><el-button @click="dialogVisible = false">取消</el-button
-      ><el-button type="primary" :loading="saving" @click="saveEpisode">保存</el-button></template
-    ></el-dialog
+  <el-dialog
+    v-model="dialogVisible"
+    :title="editingId ? '编辑剧集' : '新增剧集'"
+    width="680px"
+    class="episode-editor-dialog"
+    :close-on-click-modal="false"
+    :before-close="beforeDialogClose"
   >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="formRules"
+      label-position="top"
+      class="episode-editor-form"
+    >
+      <section class="episode-editor-section">
+        <h3 class="episode-editor-section-title">基础信息</h3>
+        <div class="episode-editor-grid episode-editor-grid--two">
+          <el-form-item label="集号" prop="number">
+            <el-input-number
+              v-model="form.number"
+              class="episode-editor-number"
+              controls-position="right"
+              :min="1"
+              :max="999"
+            />
+          </el-form-item>
+          <el-form-item label="时长（秒）">
+            <el-input-number
+              v-model="form.durationSec"
+              class="episode-editor-number"
+              controls-position="right"
+              :min="0"
+              :max="9999"
+            />
+          </el-form-item>
+        </div>
+        <el-form-item label="剧集标题" prop="title">
+          <el-input v-model="form.title" maxlength="100" placeholder="例如：命运的相遇" />
+        </el-form-item>
+      </section>
+
+      <section class="episode-editor-section">
+        <h3 class="episode-editor-section-title">视频文件</h3>
+        <el-form-item prop="videoUrl">
+          <div class="episode-video-editor">
+            <div class="episode-video-preview-card">
+              <video
+                v-if="form.videoUrl"
+                :src="form.videoUrl"
+                controls
+                preload="metadata"
+                class="episode-editor-video"
+              ></video>
+              <el-upload
+                v-else
+                drag
+                class="episode-video-empty-upload"
+                :show-file-list="false"
+                accept=".mp4,.mov"
+                :before-upload="beforeVideoUpload"
+                :http-request="uploadVideo"
+                :disabled="uploadingVideo"
+              >
+                <div class="episode-video-empty-copy">
+                  <AppIcon :icon="AppIcons.videoCameraFront" :size="30" />
+                  <b>拖放或点击上传</b>
+                  <span>MP4、MOV</span>
+                </div>
+              </el-upload>
+              <div v-if="uploadingVideo" class="episode-video-upload-mask">
+                <span>上传中</span>
+                <b>{{ videoPercent }}%</b>
+              </div>
+            </div>
+
+            <div class="episode-video-meta">
+              <div class="episode-video-status">
+                <el-tag :type="form.videoUrl ? 'success' : 'info'" effect="light">
+                  {{ form.videoUrl ? '已上传' : '未上传' }}
+                </el-tag>
+                <span class="episode-video-filename" :title="videoDisplayName">
+                  {{ videoDisplayName }}
+                </span>
+              </div>
+              <p class="episode-video-hint">支持 MP4、MOV，单个文件不超过 500MB。</p>
+              <el-alert
+                v-if="videoError"
+                :title="videoError"
+                type="error"
+                :closable="false"
+                show-icon
+              />
+              <div class="episode-video-actions">
+                <el-upload
+                  v-if="form.videoUrl"
+                  :show-file-list="false"
+                  accept=".mp4,.mov"
+                  :before-upload="beforeVideoUpload"
+                  :http-request="uploadVideo"
+                  :disabled="uploadingVideo"
+                >
+                  <el-button :loading="uploadingVideo" :disabled="uploadingVideo">
+                    <AppIcon :icon="AppIcons.upload" />
+                    更换视频
+                  </el-button>
+                </el-upload>
+                <el-button
+                  v-if="form.videoUrl"
+                  type="danger"
+                  :disabled="uploadingVideo"
+                  @click="removeVideo"
+                >
+                  移除
+                </el-button>
+                <a
+                  v-if="form.videoUrl"
+                  class="episode-video-link"
+                  :href="form.videoUrl"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  查看视频
+                </a>
+              </div>
+            </div>
+          </div>
+        </el-form-item>
+      </section>
+
+      <section class="episode-editor-section">
+        <h3 class="episode-editor-section-title">付费与状态</h3>
+        <div class="episode-editor-grid episode-editor-grid--three">
+          <el-form-item label="是否免费">
+            <el-switch v-model="form.isFree" />
+          </el-form-item>
+          <el-form-item v-show="!form.isFree" label="解锁金币">
+            <el-input-number
+              v-model="form.unlockCoin"
+              class="episode-editor-number"
+              controls-position="right"
+              :min="0"
+              :max="9999"
+            />
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="form.status">
+              <el-option
+                v-for="item in statusOptions"
+                :key="item.code"
+                :label="item.text"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+        </div>
+      </section>
+    </el-form>
+
+    <template #footer>
+      <el-button :disabled="saving || uploadingVideo" @click="dialogVisible = false">
+        取消
+      </el-button>
+      <el-button
+        type="primary"
+        :loading="saving"
+        :disabled="saving || uploadingVideo"
+        @click="saveEpisode"
+      >
+        保存
+      </el-button>
+    </template>
+  </el-dialog>
   <el-dialog
     v-model="previewVisible"
     :title="`预览：第 ${previewEpisode?.number ?? ''} 集 ${previewEpisode?.title ?? ''}`"

From 8e9435ee7d986d157e8bdde616b5909825623f74 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 18:38:06 +0800
Subject: [PATCH 22/59] =?UTF-8?q?fix(web):=20=E4=BF=AE=E5=A4=8D=E5=88=86?=
 =?UTF-8?q?=E7=89=87=E4=B8=8A=E4=BC=A0=20chunkSize=20=E5=AD=97=E7=AC=A6?=
 =?UTF-8?q?=E4=B8=B2=E6=8B=BC=E6=8E=A5=E5=AF=BC=E8=87=B4=E5=A4=A7=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E8=B6=85=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/uploader.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/utils/uploader.ts b/src/utils/uploader.ts
index 4e026b0..2bbddbb 100644
--- a/src/utils/uploader.ts
+++ b/src/utils/uploader.ts
@@ -32,8 +32,9 @@ export async function uploadFile(file: File, options: UploadFileOptions = {}): P
     bizType
   })
   const info = initRes.data
+  const chunkSize = Number(info.chunkSize)
   options.onSession?.(info.uploadId)
-  const total = Math.max(info.totalChunks, 1)
+  const total = Math.max(Number(info.totalChunks), 1)
   const pending: number[] = Array.from({ length: total }, (_, index) => index)
   let finished = 0
 
@@ -41,8 +42,8 @@ export async function uploadFile(file: File, options: UploadFileOptions = {}): P
     for (;;) {
       const index = pending.shift()
       if (index === undefined) return
-      const start = index * info.chunkSize
-      const chunk = file.slice(start, Math.min(start + info.chunkSize, file.size))
+      const start = index * chunkSize
+      const chunk = file.slice(start, Math.min(start + chunkSize, file.size))
       await uploadChunkApi(info.uploadId, index, chunk, file.name)
       finished += 1
       onProgress?.(Math.min(95, Math.round((finished / total) * 95)))
@@ -68,7 +69,8 @@ export async function resumeUpload(
 ): Promise<MediaAsset> {
   const { concurrency = 3, onProgress } = options
   const progress = (await getUploadProgressApi(uploadId)).data
-  const total = Math.max(progress.totalChunks, 1)
+  const chunkSize = Number(progress.chunkSize)
+  const total = Math.max(Number(progress.totalChunks), 1)
   const received = Math.min(progress.receivedChunks || 0, total)
   const pending: number[] = []
   for (let index = received; index < total; index += 1) {
@@ -81,8 +83,8 @@ export async function resumeUpload(
     for (;;) {
       const index = pending.shift()
       if (index === undefined) return
-      const start = index * progress.chunkSize
-      const chunk = file.slice(start, Math.min(start + progress.chunkSize, file.size))
+      const start = index * chunkSize
+      const chunk = file.slice(start, Math.min(start + chunkSize, file.size))
       await uploadChunkApi(uploadId, index, chunk, file.name)
       finished += 1
       onProgress?.(Math.min(95, Math.round((finished / total) * 95)))

From e9a956f16c6b322a3be120b21816596a6316f54b Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 19 Oct 2026 22:43:29 +0800
Subject: [PATCH 23/59] =?UTF-8?q?chore(web):=20=E5=BF=BD=E7=95=A5=E8=BF=90?=
 =?UTF-8?q?=E8=A1=8C=E6=97=B6=E4=BA=A7=E7=89=A9=EF=BC=88=E6=97=A5=E5=BF=97?=
 =?UTF-8?q?/=E5=90=AF=E5=8A=A8=E8=84=9A=E6=9C=AC=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index c4af407..2051c8c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,6 @@ dist-ssr
 *-lock.*
 pnpm-debug
 stats.html
+dev.out.log 
+dev.err.log 
+start-dev.bat 

From d283d223c0be354cfa4d3ec0f1f89c36e3ded21b Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Tue, 20 Oct 2026 09:12:11 +0800
Subject: [PATCH 24/59] =?UTF-8?q?chore:=20=E5=BF=BD=E7=95=A5=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA=E4=BA=A7=E7=89=A9=20apk?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index c4af407..cbf030a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@ dist-ssr
 *-lock.*
 pnpm-debug
 stats.html
+*.apk

From 1737f37d829da2304f07e6104c420388f2bcdd3c Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Tue, 20 Oct 2026 09:15:19 +0800
Subject: [PATCH 25/59] =?UTF-8?q?fix(login):=20=E5=BF=98=E8=AE=B0=E5=AF=86?=
 =?UTF-8?q?=E7=A0=81=E9=93=BE=E6=8E=A5=E5=8A=A0=E6=8F=90=E7=A4=BA=EF=BC=8C?=
 =?UTF-8?q?=E9=81=BF=E5=85=8D=E7=82=B9=E5=87=BB=E6=97=A0=E5=93=8D=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/en.ts                        | 1 +
 src/locales/zh-CN.ts                     | 1 +
 src/views/Login/components/LoginForm.vue | 8 ++++++--
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/locales/en.ts b/src/locales/en.ts
index 3e35f06..5043eef 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -112,6 +112,7 @@ export default {
     login: 'Sign in',
     remember: 'Remember me',
     forgetPassword: 'Forget password',
+    forgetPasswordHint: 'Please contact the administrator to reset your password',
     usernamePlaceholder: 'Please input username',
     passwordPlaceholder: 'Please input password'
   },
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 1961130..535f9f7 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -112,6 +112,7 @@ export default {
     login: '登录',
     remember: '记住我',
     forgetPassword: '忘记密码',
+    forgetPasswordHint: '请联系管理员重置密码',
     usernamePlaceholder: '请输入用户名',
     passwordPlaceholder: '请输入密码'
   },
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index ec583b9..bf7f6fd 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -4,7 +4,7 @@
 import { reactive, ref, watch, onMounted, unref } from 'vue'
 import { Form, FormSchema } from '@/components/Form'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ElCheckbox, ElLink } from 'element-plus'
+import { ElCheckbox, ElLink, ElMessage } from 'element-plus'
 import { useForm } from '@/hooks/web/useForm'
 import { loginApi, getAdminRoleApi } from '@/api/login'
 import { useAppStore } from '@/store/modules/app'
@@ -92,7 +92,11 @@ const schema = reactive<FormSchema[]>([
             <>
               <div class="flex justify-between items-center w-[100%]">
                 <ElCheckbox v-model={remember.value} label={t('login.remember')} size="small" />
-                <ElLink type="primary" underline={false}>
+                <ElLink
+                  type="primary"
+                  underline={false}
+                  onClick={() => ElMessage.info(t('login.forgetPasswordHint'))}
+                >
                   {t('login.forgetPassword')}
                 </ElLink>
               </div>

From 45507dee8d4d8cc5c59b3cf9cad299f308db7b37 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 13:35:55 +0800
Subject: [PATCH 26/59] =?UTF-8?q?perf(admin):=20=E9=99=8D=E4=BD=8E?=
 =?UTF-8?q?=E9=A6=96=E5=B1=8F=E4=BD=93=E7=A7=AF=E5=B9=B6=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=20Windows=20=E8=AE=BF=E9=97=AE=E7=99=BD=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1) Editor 改 defineAsyncComponent，IEditorConfig 改 import type
2) dev server 绑定 :: 双栈，避免 Windows 下 localhost 走 ::1 超时
3) dev 脚本去掉 POSIX 环境变量前缀，Windows 可直接 pnpm dev
---
 package.json                                   | 2 +-
 src/components/Form/src/helper/componentMap.ts | 6 +++++-
 src/components/Form/src/types/index.ts         | 3 ++-
 vite.config.mts                                | 5 ++++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 0c3f7e6..4153b9f 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "private": true,
   "scripts": {
     "i": "pnpm install",
-    "dev": "VITE_CJS_IGNORE_WARNING=1 vite --mode base",
+    "dev": "vite --mode base",
     "ts:check": "pnpm vue-tsc --noEmit --skipLibCheck",
     "build:pro": "VITE_CJS_IGNORE_WARNING=1 vite build --mode pro",
     "build:dev": "VITE_CJS_IGNORE_WARNING=1 vite build --mode dev",
diff --git a/src/components/Form/src/helper/componentMap.ts b/src/components/Form/src/helper/componentMap.ts
index 67b06ef..1858a19 100644
--- a/src/components/Form/src/helper/componentMap.ts
+++ b/src/components/Form/src/helper/componentMap.ts
@@ -1,5 +1,6 @@
 // Author: fruit.com.cn
 
+import { defineAsyncComponent } from 'vue'
 import type { Component } from 'vue'
 import {
   ElCascader,
@@ -23,9 +24,12 @@ import {
   ElUpload
 } from 'element-plus'
 import { InputPassword } from '@/components/InputPassword'
-import { Editor } from '@/components/Editor'
 import { ComponentName } from '../types'
 
+// wang-editor 打包后约 1.1MB：改成异步组件，只有真正渲染编辑器字段时才加载，
+// 避免登录页这类只是用了 Form 的页面把它一并拉进首屏。
+const Editor = defineAsyncComponent(() => import('@/components/Editor'))
+
 const componentMap: Recordable<Component, ComponentName> = {
   RadioGroup: ElRadioGroup,
   RadioButton: ElRadioGroup,
diff --git a/src/components/Form/src/types/index.ts b/src/components/Form/src/types/index.ts
index 402116d..a9f1e84 100644
--- a/src/components/Form/src/types/index.ts
+++ b/src/components/Form/src/types/index.ts
@@ -22,7 +22,8 @@ import {
   ISelectProps,
   UploadProps
 } from 'element-plus'
-import { IEditorConfig } from '@wangeditor/editor'
+// 仅类型引用：必须用 import type，否则会把整个 wang-editor 打进登录页的依赖链
+import type { IEditorConfig } from '@wangeditor/editor'
 import { CSSProperties } from 'vue'
 
 export interface PlaceholderModel {
diff --git a/vite.config.mts b/vite.config.mts
index fa5bcbc..b31af6d 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -139,7 +139,10 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       hmr: {
         overlay: false
       },
-      host: '0.0.0.0'
+      // 必须同时监听 IPv6：Windows 上 localhost 先解析成 ::1，
+      // 只绑 0.0.0.0 会让每次新建连接都等 IPv6 超时（约 2s）再回退到 IPv4，
+      // 表现为页面白屏很久。'::' 是双栈，IPv4 局域网访问同样可用。
+      host: '::'
     },
     optimizeDeps: {
       include: [

From c8fe571be19d5a6a10040107c6a8fc79dae6fe77 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 15:43:51 +0800
Subject: [PATCH 27/59] =?UTF-8?q?feat(admin):=20=E7=9F=AD=E5=89=A7?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA=E5=B9=B6=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E4=BA=92=E5=8A=A8=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/drama.ts                        |   1 +
 src/api/admin/types.ts                        |   8 ++
 src/styles/business/drama-management.css      |  18 +++
 .../contentManagement/DramaManagementView.vue | 107 +++++++++++++++++-
 4 files changed, 132 insertions(+), 2 deletions(-)

diff --git a/src/api/admin/drama.ts b/src/api/admin/drama.ts
index 753bff4..885227d 100644
--- a/src/api/admin/drama.ts
+++ b/src/api/admin/drama.ts
@@ -16,6 +16,7 @@ export interface DramaPageParams {
   status?: string
   categoryId?: number
   isHot?: boolean
+  dramaTypes?: Array<'ANIME' | 'LIVE'>
 }
 
 export const pageDramasApi = (params: DramaPageParams) => {
diff --git a/src/api/admin/types.ts b/src/api/admin/types.ts
index 15780cb..632951a 100644
--- a/src/api/admin/types.ts
+++ b/src/api/admin/types.ts
@@ -25,6 +25,7 @@ export interface DramaItem {
   description?: string
   cover?: string
   language?: string
+  dramaType?: 'ANIME' | 'LIVE'
   episodes?: number
   freeEpisodes?: number
   unlockCoin?: number
@@ -33,6 +34,9 @@ export interface DramaItem {
   status: string
   statusText: string
   views?: number
+  favoriteCount?: number
+  likeCount?: number
+  commentCount?: number
   sort?: number
   publishAt?: string
   createdAt?: string
@@ -47,8 +51,12 @@ export interface DramaSaveData {
   description?: string
   cover?: string
   language?: string
+  dramaType?: 'ANIME' | 'LIVE'
   freeEpisodes?: number
   unlockCoin?: number
+  favoriteCount?: number
+  likeCount?: number
+  heat?: number
   isHot?: boolean
   sort?: number
 }
diff --git a/src/styles/business/drama-management.css b/src/styles/business/drama-management.css
index da70d90..4cb4cf9 100644
--- a/src/styles/business/drama-management.css
+++ b/src/styles/business/drama-management.css
@@ -147,6 +147,24 @@
   width: 180px !important;
 }
 
+.readonly-stat {
+  min-width: 180px;
+  height: 32px;
+  padding: 0 12px;
+  color: var(--el-text-color-secondary);
+  line-height: 32px;
+  background: var(--el-fill-color-lighter);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--el-border-radius-base);
+}
+
+.readonly-stat-hint {
+  margin: 4px 0 0;
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
 .cover-editor {
   display: flex;
   gap: 18px;
diff --git a/src/views/contentManagement/DramaManagementView.vue b/src/views/contentManagement/DramaManagementView.vue
index 9941efe..d914ec6 100644
--- a/src/views/contentManagement/DramaManagementView.vue
+++ b/src/views/contentManagement/DramaManagementView.vue
@@ -30,6 +30,7 @@ const categories = ref([])
 const keyword = ref('')
 const statusFilter = ref(undefined)
 const categoryId = ref(undefined)
+const dramaTypeFilter = ref(undefined)
 const hotFilter = ref(undefined)
 const pageIndex = ref(1)
 const pageSize = ref(10)
@@ -41,13 +42,18 @@ const coverPercent = ref(0)
 const coverError = ref('')
 const coverFileName = ref('')
 const editingId = ref(null)
+const editingCommentCount = ref(0)
 const formRef = ref()
 const form = reactive({
   title: '',
   categoryId: undefined,
+  dramaType: 'LIVE',
   description: '',
   freeEpisodes: 3,
   unlockCoin: 0,
+  favoriteCount: 0,
+  likeCount: 0,
+  heat: 0,
   isHot: false,
   cover: ''
 })
@@ -57,7 +63,8 @@ const COVER_TYPES = ['image/jpeg', 'image/png', 'image/webp']
 
 const formRules = {
   title: [{ required: true, message: '请输入短剧名称', trigger: 'blur' }],
-  categoryId: [{ required: true, message: '请选择短剧类型', trigger: 'change' }]
+  categoryId: [{ required: true, message: '请选择短剧类型', trigger: 'change' }],
+  dramaType: [{ required: true, message: '请选择内容类型', trigger: 'change' }]
 }
 
 const coverDisplayName = computed(
@@ -78,6 +85,11 @@ const statusOptions = [
   { code: 'offline', text: '已下线' }
 ]
 
+const dramaTypeOptions = [
+  { value: 'ANIME', label: '漫剧' },
+  { value: 'LIVE', label: '真人剧' }
+]
+
 const actionMeta = {
   submit: { label: '提交审核', done: '已提交审核' },
   approve: { label: '审核通过', done: '已通过审核' },
@@ -95,6 +107,7 @@ async function load() {
       keyword: keyword.value.trim() || undefined,
       status: statusFilter.value || undefined,
       categoryId: categoryId.value,
+      dramaTypes: dramaTypeFilter.value ? [dramaTypeFilter.value] : undefined,
       isHot: hotFilter.value
     })
     list.value = res.data?.list || []
@@ -118,6 +131,7 @@ function resetFilters() {
   keyword.value = ''
   statusFilter.value = undefined
   categoryId.value = undefined
+  dramaTypeFilter.value = undefined
   hotFilter.value = undefined
   search()
 }
@@ -143,14 +157,19 @@ function openCreate() {
   Object.assign(form, {
     title: '',
     categoryId: undefined,
+    dramaType: 'LIVE',
     description: '',
     freeEpisodes: 3,
     unlockCoin: 0,
+    favoriteCount: 0,
+    likeCount: 0,
+    heat: 0,
     isHot: false,
     cover: ''
   })
   coverFileName.value = ''
   coverError.value = ''
+  editingCommentCount.value = 0
   dialogVisible.value = true
   resetValidation()
 }
@@ -160,18 +179,27 @@ function openEdit(row) {
   Object.assign(form, {
     title: row.title,
     categoryId: row.categoryId || undefined,
+    dramaType: row.dramaType || 'LIVE',
     description: row.description || '',
     freeEpisodes: row.freeEpisodes ?? 3,
     unlockCoin: row.unlockCoin ?? 0,
+    favoriteCount: row.favoriteCount ?? 0,
+    likeCount: row.likeCount ?? 0,
+    heat: row.views ?? 0,
     isHot: !!row.isHot,
     cover: row.cover || ''
   })
   coverFileName.value = row.cover ? coverBasename(row.cover) : ''
   coverError.value = ''
+  editingCommentCount.value = row.commentCount ?? 0
   dialogVisible.value = true
   resetValidation()
 }
 
+function dramaTypeLabel(value) {
+  return dramaTypeOptions.find((item) => item.value === value)?.label || '真人剧'
+}
+
 async function saveDrama() {
   if (saving.value || uploadingCover.value) return
   try {
@@ -344,6 +372,12 @@ onMounted(async () => {
             :key="item.id"
             :label="item.name"
             :value="item.id" /></el-select
+        ><el-select v-model="dramaTypeFilter" 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="非热门"
@@ -383,12 +417,34 @@ onMounted(async () => {
         ></el-table-column
       >
       <el-table-column prop="genre" label="类型" width="110" />
+      <el-table-column label="内容类型" width="110"
+        ><template #default="{ row }"
+          ><el-tag :type="row.dramaType === 'ANIME' ? 'warning' : 'info'" effect="light">{{
+            dramaTypeLabel(row.dramaType)
+          }}</el-tag></template
+        ></el-table-column
+      >
       <el-table-column label="集数" width="90"
         ><template #default="{ row }">{{ row.episodes }} 集</template></el-table-column
       >
-      <el-table-column label="播放量" width="110"
+      <el-table-column label="热度" width="110"
         ><template #default="{ row }">{{ formatCount(row.views) }}</template></el-table-column
       >
+      <el-table-column label="收藏" width="90"
+        ><template #default="{ row }">{{
+          formatCount(row.favoriteCount ?? 0)
+        }}</template></el-table-column
+      >
+      <el-table-column label="点赞" width="90"
+        ><template #default="{ row }">{{
+          formatCount(row.likeCount ?? 0)
+        }}</template></el-table-column
+      >
+      <el-table-column label="评论" width="90"
+        ><template #default="{ row }">{{
+          formatCount(row.commentCount ?? 0)
+        }}</template></el-table-column
+      >
       <el-table-column label="状态" width="110"
         ><template #default="{ row }"
           ><el-tag :class="['status-badge', statusClass(row.status)]" effect="light">{{
@@ -487,6 +543,16 @@ onMounted(async () => {
               />
             </el-select>
           </el-form-item>
+          <el-form-item label="内容类型" prop="dramaType">
+            <el-select v-model="form.dramaType" 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
@@ -527,6 +593,43 @@ onMounted(async () => {
         </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.favoriteCount"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :precision="0"
+            />
+          </el-form-item>
+          <el-form-item label="点赞数">
+            <el-input-number
+              v-model="form.likeCount"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :precision="0"
+            />
+          </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>
+
       <section class="editor-section">
         <h3 class="editor-section-title">封面</h3>
         <div class="cover-editor">

From 0e814840b18f025a59b92bd9953d201a1ace1ba0 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 15:59:08 +0800
Subject: [PATCH 28/59] =?UTF-8?q?feat(admin):=20=E5=89=A7=E9=9B=86?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA=E5=88=86=E9=9B=86=E4=BA=92?=
 =?UTF-8?q?=E5=8A=A8=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/types.ts                        |  5 ++
 .../contentManagement/DramaManagementView.vue | 17 +++----
 .../EpisodeManagementView.vue                 | 48 ++++++++++++++++++-
 3 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/src/api/admin/types.ts b/src/api/admin/types.ts
index 632951a..8056e89 100644
--- a/src/api/admin/types.ts
+++ b/src/api/admin/types.ts
@@ -77,6 +77,10 @@ export interface EpisodeItem {
   status: string
   statusText: string
   views?: number
+  likeCount?: number
+  commentCount?: number
+  favoriteCount?: number
+  heat?: number
   sort?: number
 }
 
@@ -89,6 +93,7 @@ export interface EpisodeSaveData {
   videoUrl?: string
   isFree?: boolean
   unlockCoin?: number
+  likeCount?: number
   status?: string
   sort?: number
 }
diff --git a/src/views/contentManagement/DramaManagementView.vue b/src/views/contentManagement/DramaManagementView.vue
index d914ec6..fd63ee5 100644
--- a/src/views/contentManagement/DramaManagementView.vue
+++ b/src/views/contentManagement/DramaManagementView.vue
@@ -43,6 +43,7 @@ const coverError = ref('')
 const coverFileName = ref('')
 const editingId = ref(null)
 const editingCommentCount = ref(0)
+const editingLikeCount = ref(0)
 const formRef = ref()
 const form = reactive({
   title: '',
@@ -52,7 +53,6 @@ const form = reactive({
   freeEpisodes: 3,
   unlockCoin: 0,
   favoriteCount: 0,
-  likeCount: 0,
   heat: 0,
   isHot: false,
   cover: ''
@@ -162,7 +162,6 @@ function openCreate() {
     freeEpisodes: 3,
     unlockCoin: 0,
     favoriteCount: 0,
-    likeCount: 0,
     heat: 0,
     isHot: false,
     cover: ''
@@ -170,6 +169,7 @@ function openCreate() {
   coverFileName.value = ''
   coverError.value = ''
   editingCommentCount.value = 0
+  editingLikeCount.value = 0
   dialogVisible.value = true
   resetValidation()
 }
@@ -184,7 +184,6 @@ function openEdit(row) {
     freeEpisodes: row.freeEpisodes ?? 3,
     unlockCoin: row.unlockCoin ?? 0,
     favoriteCount: row.favoriteCount ?? 0,
-    likeCount: row.likeCount ?? 0,
     heat: row.views ?? 0,
     isHot: !!row.isHot,
     cover: row.cover || ''
@@ -192,6 +191,7 @@ function openEdit(row) {
   coverFileName.value = row.cover ? coverBasename(row.cover) : ''
   coverError.value = ''
   editingCommentCount.value = row.commentCount ?? 0
+  editingLikeCount.value = row.likeCount ?? 0
   dialogVisible.value = true
   resetValidation()
 }
@@ -606,13 +606,8 @@ onMounted(async () => {
             />
           </el-form-item>
           <el-form-item label="点赞数">
-            <el-input-number
-              v-model="form.likeCount"
-              class="editor-number"
-              controls-position="right"
-              :min="0"
-              :precision="0"
-            />
+            <div class="readonly-stat">{{ formatCount(editingLikeCount) }}</div>
+            <p class="readonly-stat-hint">全剧分集汇总，只读</p>
           </el-form-item>
           <el-form-item label="热度">
             <el-input-number
@@ -625,7 +620,7 @@ onMounted(async () => {
           </el-form-item>
           <el-form-item label="评论数">
             <div class="readonly-stat">{{ formatCount(editingCommentCount) }}</div>
-            <p class="readonly-stat-hint">实时统计，不可编辑</p>
+            <p class="readonly-stat-hint">全剧汇总，实时统计，只读</p>
           </el-form-item>
         </div>
       </section>
diff --git a/src/views/contentManagement/EpisodeManagementView.vue b/src/views/contentManagement/EpisodeManagementView.vue
index 6e1b4a9..0a5e5fd 100644
--- a/src/views/contentManagement/EpisodeManagementView.vue
+++ b/src/views/contentManagement/EpisodeManagementView.vue
@@ -35,6 +35,7 @@ const videoFileName = ref('')
 const previewVisible = ref(false)
 const previewEpisode = ref(null)
 const editingId = ref(null)
+const editingCommentCount = ref(0)
 const formRef = ref()
 const form = reactive({
   number: 1,
@@ -43,6 +44,7 @@ const form = reactive({
   videoUrl: '',
   isFree: true,
   unlockCoin: 0,
+  likeCount: 0,
   status: 'draft'
 })
 
@@ -127,10 +129,12 @@ function openCreate() {
     videoUrl: '',
     isFree: true,
     unlockCoin: selectedDrama.value?.unlockCoin ?? 0,
+    likeCount: 0,
     status: 'draft'
   })
   videoFileName.value = ''
   videoError.value = ''
+  editingCommentCount.value = 0
   dialogVisible.value = true
   resetValidation()
 }
@@ -144,10 +148,12 @@ function openEdit(row) {
     videoUrl: row.videoUrl || '',
     isFree: !!row.isFree,
     unlockCoin: row.unlockCoin || 0,
+    likeCount: row.likeCount ?? 0,
     status: row.status
   })
   videoFileName.value = row.videoUrl ? episodeBasename(row.videoUrl) : ''
   videoError.value = ''
+  editingCommentCount.value = row.commentCount ?? 0
   dialogVisible.value = true
   resetValidation()
 }
@@ -167,6 +173,7 @@ async function saveEpisode() {
     videoUrl: form.videoUrl.trim(),
     isFree: form.isFree,
     unlockCoin: form.isFree ? 0 : form.unlockCoin || 0,
+    likeCount: form.likeCount,
     status: form.status
   }
   saving.value = true
@@ -325,7 +332,9 @@ onMounted(async () => {
         <span class="episode-context-label">当前短剧</span>
         <b class="episode-context-title">{{ selectedDrama?.title || '暂无短剧' }}</b>
         <small class="episode-context-count"
-          >共 {{ selectedDrama?.episodes ?? episodes.length }} 集</small
+          >共 {{ selectedDrama?.episodes ?? episodes.length }} 集 · 收藏
+          {{ formatCount(selectedDrama?.favoriteCount ?? 0) }} · 热度
+          {{ formatCount(selectedDrama?.views ?? 0) }}</small
         >
       </div>
       <div class="episode-switcher">
@@ -398,6 +407,24 @@ onMounted(async () => {
       <el-table-column label="播放量" width="120"
         ><template #default="{ row }">{{ formatCount(row.views) }}</template></el-table-column
       >
+      <el-table-column label="点赞（本集）" width="120"
+        ><template #default="{ row }">{{
+          formatCount(row.likeCount ?? 0)
+        }}</template></el-table-column
+      >
+      <el-table-column label="评论（本集）" width="120"
+        ><template #default="{ row }">{{
+          formatCount(row.commentCount ?? 0)
+        }}</template></el-table-column
+      >
+      <el-table-column label="所属剧收藏" width="120"
+        ><template #default="{ row }">{{
+          formatCount(row.favoriteCount ?? 0)
+        }}</template></el-table-column
+      >
+      <el-table-column label="所属剧热度" width="120"
+        ><template #default="{ row }">{{ formatCount(row.heat ?? 0) }}</template></el-table-column
+      >
       <el-table-column label="状态" width="110"
         ><template #default="{ row }"
           ><el-tag :class="['status-badge', statusClass(row.status)]" effect="light">{{
@@ -568,6 +595,25 @@ onMounted(async () => {
         </el-form-item>
       </section>
 
+      <section class="episode-editor-section">
+        <h3 class="episode-editor-section-title">互动数据</h3>
+        <div class="episode-editor-grid episode-editor-grid--two">
+          <el-form-item label="本集点赞数">
+            <el-input-number
+              v-model="form.likeCount"
+              class="episode-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>
+
       <section class="episode-editor-section">
         <h3 class="episode-editor-section-title">付费与状态</h3>
         <div class="episode-editor-grid episode-editor-grid--three">

From 0710ea55f3188059e63e678a6d69a698f52cc10d Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 16:35:41 +0800
Subject: [PATCH 29/59] =?UTF-8?q?feat(admin):=20=E8=A7=82=E7=9C=8B?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95=E7=8B=AC=E7=AB=8B=E8=8F=9C=E5=8D=95=E4=B8=8E?=
 =?UTF-8?q?=E6=B2=BB=E7=90=86=E7=8A=B6=E6=80=81=E5=85=A8=E9=83=A8=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/appUser.ts                      |  21 ++
 src/api/admin/types.ts                        |   7 +
 .../governance/ContentGovernanceView.vue      |  25 +-
 src/views/userManagement/WatchHistoryView.vue | 239 ++++++++++++++++++
 4 files changed, 289 insertions(+), 3 deletions(-)
 create mode 100644 src/views/userManagement/WatchHistoryView.vue

diff --git a/src/api/admin/appUser.ts b/src/api/admin/appUser.ts
index ae6bfa7..884938d 100644
--- a/src/api/admin/appUser.ts
+++ b/src/api/admin/appUser.ts
@@ -13,6 +13,20 @@ export interface AppUserPageParams {
   registerSource?: string
 }
 
+export interface WatchHistoryPageParams {
+  pageIndex?: number
+  pageSize?: number
+  keyword?: string
+  userId?: number
+  dramaTitle?: string
+  dramaId?: number
+  episodeId?: number
+  source?: string
+  finished?: boolean
+  startTime?: string
+  endTime?: string
+}
+
 export const pageAppUsersApi = (params: AppUserPageParams) => {
   return request.get<PageResult<AppUserItem>>({ url: '/admin/app-users/page', params })
 }
@@ -32,6 +46,13 @@ export const listAppUserWatchHistoryApi = (id: number, limit = 50) => {
   })
 }
 
+export const pageWatchHistoryApi = (params: WatchHistoryPageParams) => {
+  return request.get<PageResult<WatchHistoryItem>>({
+    url: '/admin/watch-history/page',
+    params
+  })
+}
+
 /** normal / limited / banned，封禁与限制会立即吊销该用户全部会话 */
 export const updateAppUserStatusApi = (id: number, status: string, reason?: string) => {
   return request.put<void>({
diff --git a/src/api/admin/types.ts b/src/api/admin/types.ts
index 8056e89..e8562a8 100644
--- a/src/api/admin/types.ts
+++ b/src/api/admin/types.ts
@@ -307,11 +307,15 @@ export interface AppUserBanRecord {
 
 export interface WatchHistoryItem {
   id: number
+  userId?: number
+  uid?: string
+  nickname?: string
   dramaId: number
   dramaTitle?: string
   dramaPublished?: boolean
   episodeId: number
   episodeNo?: number
+  episodeTitle?: string
   positionMs: number
   durationMs: number
   finished?: boolean
@@ -324,7 +328,10 @@ export interface WatchHistoryItem {
 export interface CommentItem {
   id: number
   dramaId: number
+  dramaTitle?: string
   episodeId: number
+  episodeNo?: number
+  episodeTitle?: string
   parentId: number
   rootId: number
   userId: number
diff --git a/src/views/governance/ContentGovernanceView.vue b/src/views/governance/ContentGovernanceView.vue
index d49d567..90a9b8f 100644
--- a/src/views/governance/ContentGovernanceView.vue
+++ b/src/views/governance/ContentGovernanceView.vue
@@ -26,12 +26,14 @@ const canWordUpdate = can('sensitive-word:update')
 const activeTab = ref('comments')
 
 const COMMENT_STATUS = [
+  { value: '', label: '全部状态', tag: 'info' },
   { value: 'pending', label: '待审核', tag: 'warning' },
   { value: 'published', label: '已发布', tag: 'success' },
   { value: 'rejected', label: '已驳回', tag: 'danger' },
   { value: 'deleted', label: '已删除', tag: 'info' }
 ]
 const REPORT_STATUS = [
+  { value: '', label: '全部状态', tag: 'info' },
   { value: 'pending', label: '待处理', tag: 'warning' },
   { value: 'handled', label: '已处理', tag: 'success' },
   { value: 'rejected', label: '已驳回', tag: 'info' }
@@ -48,6 +50,13 @@ function meta(list, value) {
 function levelText(level) {
   return WORD_LEVELS.find((item) => item.value === level)?.label || level
 }
+function commentEpisodeText(row) {
+  if (row.episodeNo) return `第 ${row.episodeNo} 集`
+  return row.episodeId ? `分集 #${row.episodeId}` : '未关联分集'
+}
+function commentContentTooltip(row) {
+  return `短剧 ID：${row.dramaId} / 分集 ID：${row.episodeId || '未关联'}`
+}
 
 const comments = reactive({
   rows: [],
@@ -55,7 +64,7 @@ const comments = reactive({
   loading: false,
   page: 1,
   size: 10,
-  status: 'pending',
+  status: '',
   keyword: ''
 })
 async function loadComments() {
@@ -123,7 +132,7 @@ const reports = reactive({
   loading: false,
   page: 1,
   size: 10,
-  status: 'pending'
+  status: ''
 })
 async function loadReports() {
   reports.loading = true
@@ -325,7 +334,17 @@ const handleTargetText = computed(() => {
           <el-table-column prop="id" label="ID" width="80" />
           <el-table-column prop="nickname" label="用户" min-width="120" show-overflow-tooltip />
           <el-table-column prop="content" label="内容" min-width="220" show-overflow-tooltip />
-          <el-table-column prop="dramaId" label="短剧ID" width="90" />
+          <el-table-column label="短剧 / 分集" min-width="190">
+            <template #default="{ row }">
+              <el-tooltip :content="commentContentTooltip(row)" placement="top">
+                <div class="episode-table-title">
+                  <b>{{ row.dramaTitle || `短剧 #${row.dramaId}` }}</b>
+                  <small>{{ commentEpisodeText(row) }}</small>
+                  <small v-if="row.episodeTitle">{{ row.episodeTitle }}</small>
+                </div>
+              </el-tooltip>
+            </template>
+          </el-table-column>
           <el-table-column label="状态" width="100">
             <template #default="{ row }">
               <el-tag :type="meta(COMMENT_STATUS, row.status).tag" effect="light">{{
diff --git a/src/views/userManagement/WatchHistoryView.vue b/src/views/userManagement/WatchHistoryView.vue
new file mode 100644
index 0000000..67b1233
--- /dev/null
+++ b/src/views/userManagement/WatchHistoryView.vue
@@ -0,0 +1,239 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import PageHeading from '@/views/components/PageHeading.vue'
+import { pageWatchHistoryApi } from '@/api/admin/appUser'
+import { formatDuration } from './composables/useAppUsers'
+
+const SOURCE_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: 'HOME', label: '首页' },
+  { value: 'DETAIL', label: '详情页' },
+  { value: 'SEARCH', label: '搜索' },
+  { value: 'FAVORITE', label: '收藏' }
+]
+
+const FINISHED_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: true, label: '已看完' },
+  { value: false, label: '未看完' }
+]
+
+const filters = reactive({
+  keyword: '',
+  dramaTitle: '',
+  source: '',
+  finished: '',
+  range: null
+})
+const rows = ref([])
+const total = ref(0)
+const loading = ref(false)
+const pageIndex = ref(1)
+const pageSize = ref(10)
+
+async function load() {
+  loading.value = true
+  try {
+    const res = await pageWatchHistoryApi({
+      pageIndex: pageIndex.value,
+      pageSize: pageSize.value,
+      keyword: filters.keyword.trim() || undefined,
+      dramaTitle: filters.dramaTitle.trim() || undefined,
+      source: filters.source || undefined,
+      finished: filters.finished === '' ? undefined : filters.finished,
+      startTime: filters.range?.[0] || undefined,
+      endTime: filters.range?.[1] || undefined
+    })
+    rows.value = res.data?.list || []
+    total.value = res.data?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() {
+  pageIndex.value = 1
+  load()
+}
+
+function resetFilters() {
+  filters.keyword = ''
+  filters.dramaTitle = ''
+  filters.source = ''
+  filters.finished = ''
+  filters.range = null
+  search()
+}
+
+function handleSizeChange() {
+  pageIndex.value = 1
+  load()
+}
+
+function sourceText(source) {
+  return SOURCE_OPTIONS.find((item) => item.value === source)?.label || source || '—'
+}
+
+function episodeText(row) {
+  if (row.episodeNo) return `第 ${row.episodeNo} 集`
+  return row.episodeId ? `分集 #${row.episodeId}` : '未关联分集'
+}
+
+function progressText(row) {
+  if (!row.durationMs) return '—'
+  return `${formatDuration(row.positionMs)} / ${formatDuration(row.durationMs)}`
+}
+
+function contentTooltip(row) {
+  return `短剧 ID：${row.dramaId} / 分集 ID：${row.episodeId || '未关联'}`
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="用户管理"
+    title="观看记录"
+    description="跨用户检索观看流水，核对短剧、分集、进度与来源。"
+  />
+
+  <section class="panel">
+    <div class="console-toolbar">
+      <el-input
+        v-model="filters.keyword"
+        class="console-keyword"
+        clearable
+        placeholder="uid / 昵称"
+        @keyup.enter="search"
+        @clear="search"
+      />
+      <el-input
+        v-model="filters.dramaTitle"
+        class="console-keyword"
+        clearable
+        placeholder="短剧名称"
+        @keyup.enter="search"
+        @clear="search"
+      />
+      <el-select
+        v-model="filters.source"
+        class="console-select"
+        placeholder="全部来源"
+        @change="search"
+      >
+        <el-option
+          v-for="item in SOURCE_OPTIONS"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-select
+        v-model="filters.finished"
+        class="console-select"
+        placeholder="全部完成状态"
+        @change="search"
+      >
+        <el-option
+          v-for="item in FINISHED_OPTIONS"
+          :key="String(item.value)"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-date-picker
+        v-model="filters.range"
+        class="watch-history-range"
+        type="datetimerange"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        range-separator="至"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="search"
+      />
+      <el-button type="primary" @click="search">查询</el-button>
+      <el-button @click="resetFilters">重置</el-button>
+      <span class="console-count">共 {{ total }} 条</span>
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="rows"
+      row-key="id"
+      border
+      class="drama-el-table"
+      empty-text="暂无符合条件的观看记录"
+    >
+      <el-table-column prop="watchedAt" label="观看时间" min-width="170" show-overflow-tooltip />
+      <el-table-column label="用户" min-width="180">
+        <template #default="{ row }">
+          <div class="app-user-meta">
+            <span class="app-user-name">{{ row.nickname || '未设置昵称' }}</span>
+            <span class="app-user-uid">{{ row.uid || `用户 #${row.userId || '—'}` }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="短剧" min-width="190">
+        <template #default="{ row }">
+          <el-tooltip :content="contentTooltip(row)" placement="top">
+            <div class="episode-table-title">
+              <b>{{ row.dramaTitle || `短剧 #${row.dramaId}` }}</b>
+              <el-tag v-if="row.dramaPublished === false" type="info" size="small" effect="plain"
+                >已下线</el-tag
+              >
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column label="分集" min-width="180" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div class="episode-table-title">
+            <b>{{ episodeText(row) }}</b>
+            <small v-if="row.episodeTitle">{{ row.episodeTitle }}</small>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="进度" min-width="120">
+        <template #default="{ row }">
+          <span class="app-user-mono">{{ progressText(row) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="完成" width="92">
+        <template #default="{ row }">
+          <el-tag :type="row.finished ? 'success' : 'info'" effect="light">
+            {{ row.finished ? '已看完' : '未看完' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="来源" width="96">
+        <template #default="{ row }">{{ sourceText(row.source) }}</template>
+      </el-table-column>
+      <el-table-column prop="deviceId" label="设备" min-width="150" show-overflow-tooltip>
+        <template #default="{ row }">{{ row.deviceId || '—' }}</template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="pageIndex"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="load"
+        @size-change="handleSizeChange"
+      />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.watch-history-range {
+  width: 360px;
+  max-width: 100%;
+}
+</style>

From e583bfed5f04d96fec6f00313e1ac178a064abdc Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 16:44:55 +0800
Subject: [PATCH 30/59] =?UTF-8?q?feat(admin):=20=E4=B8=BE=E6=8A=A5?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA=E7=9F=AD=E5=89=A7=E4=B8=8E?=
 =?UTF-8?q?=E5=88=86=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/types.ts                        | 11 ++++
 .../governance/ContentGovernanceView.vue      | 50 +++++++++++++++----
 2 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/src/api/admin/types.ts b/src/api/admin/types.ts
index e8562a8..9e499a5 100644
--- a/src/api/admin/types.ts
+++ b/src/api/admin/types.ts
@@ -350,9 +350,20 @@ export interface CommentItem {
 export interface ReportItem {
   id: number
   reporterId: number
+  reporterNickname?: string
+  reporterUid?: string
   /** COMMENT / USER / DRAMA */
   targetType: string
   targetId: number
+  targetSummary?: string
+  dramaId?: number
+  dramaTitle?: string
+  episodeId?: number
+  episodeNo?: number
+  episodeTitle?: string
+  commentContent?: string
+  targetNickname?: string
+  targetUid?: string
   reasonCode: string
   description: string
   /** pending / handled / rejected */
diff --git a/src/views/governance/ContentGovernanceView.vue b/src/views/governance/ContentGovernanceView.vue
index 90a9b8f..ab83d40 100644
--- a/src/views/governance/ContentGovernanceView.vue
+++ b/src/views/governance/ContentGovernanceView.vue
@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import PageHeading from '@/views/components/PageHeading.vue'
 import { useRbac } from '@/stores/rbac'
@@ -38,6 +38,11 @@ const REPORT_STATUS = [
   { value: 'handled', label: '已处理', tag: 'success' },
   { value: 'rejected', label: '已驳回', tag: 'info' }
 ]
+const REPORT_TARGET_TYPES = {
+  COMMENT: { label: '评论', tag: 'warning' },
+  USER: { label: '用户', tag: 'success' },
+  DRAMA: { label: '短剧', tag: 'info' }
+}
 const WORD_LEVELS = [
   { value: 'BLOCK', label: '禁止发布' },
   { value: 'REVIEW', label: '转人工审核' },
@@ -57,6 +62,15 @@ function commentEpisodeText(row) {
 function commentContentTooltip(row) {
   return `短剧 ID：${row.dramaId} / 分集 ID：${row.episodeId || '未关联'}`
 }
+function reportTargetMeta(type) {
+  return REPORT_TARGET_TYPES[type] || { label: type || '-', tag: 'info' }
+}
+function reportTargetSummary(row) {
+  return row.targetSummary || `${reportTargetMeta(row.targetType).label} #${row.targetId}`
+}
+function reporterText(row) {
+  return row.reporterNickname || row.reporterUid || `#${row.reporterId}`
+}
 
 const comments = reactive({
   rows: [],
@@ -280,11 +294,6 @@ function onTabChange(name) {
   if (name === 'reports') loadReports()
   if (name === 'words') loadWords()
 }
-
-const handleTargetText = computed(() => {
-  const row = handleTarget.value
-  return row ? `${row.targetType} #${row.targetId}` : ''
-})
 </script>
 
 <template>
@@ -429,8 +438,22 @@ const handleTargetText = computed(() => {
           empty-text="没有符合条件的工单"
         >
           <el-table-column prop="id" label="工单ID" width="90" />
-          <el-table-column prop="targetType" label="对象" width="100" />
-          <el-table-column prop="targetId" label="对象ID" width="90" />
+          <el-table-column label="对象" min-width="240">
+            <template #default="{ row }">
+              <el-tooltip placement="top">
+                <template #content>
+                  <div>原始对象：#{{ row.targetId }}</div>
+                  <div v-if="row.commentContent">评论内容：{{ row.commentContent }}</div>
+                </template>
+                <div class="episode-table-title">
+                  <el-tag :type="reportTargetMeta(row.targetType).tag" size="small" effect="light">
+                    {{ reportTargetMeta(row.targetType).label }}
+                  </el-tag>
+                  <b>{{ reportTargetSummary(row) }}</b>
+                </div>
+              </el-tooltip>
+            </template>
+          </el-table-column>
           <el-table-column prop="reasonCode" label="原因码" width="120" />
           <el-table-column
             prop="description"
@@ -438,7 +461,9 @@ const handleTargetText = computed(() => {
             min-width="180"
             show-overflow-tooltip
           />
-          <el-table-column prop="reporterId" label="举报人" width="90" />
+          <el-table-column label="举报人" min-width="140" show-overflow-tooltip>
+            <template #default="{ row }">{{ reporterText(row) }}</template>
+          </el-table-column>
           <el-table-column label="状态" width="100">
             <template #default="{ row }">
               <el-tag :type="meta(REPORT_STATUS, row.status).tag" effect="light">{{
@@ -569,7 +594,12 @@ const handleTargetText = computed(() => {
   <el-dialog v-model="handleVisible" title="处理举报工单" width="480px">
     <el-form label-position="top">
       <el-form-item label="工单对象">
-        <el-input :model-value="handleTargetText" disabled />
+        <div v-if="handleTarget" class="episode-table-title">
+          <el-tag :type="reportTargetMeta(handleTarget.targetType).tag" size="small" effect="light">
+            {{ reportTargetMeta(handleTarget.targetType).label }}
+          </el-tag>
+          <b>{{ reportTargetSummary(handleTarget) }}</b>
+        </div>
       </el-form-item>
       <el-form-item label="处理结论">
         <el-radio-group v-model="handleForm.status">

From 9e427d485f5c7d738687f3c9ab1268fc227bb020 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 17:01:22 +0800
Subject: [PATCH 31/59] =?UTF-8?q?feat(admin):=20=E7=9F=AD=E5=89=A7?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E4=B8=8E=E5=86=85=E5=AE=B9=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E5=A4=9A=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/drama.ts                        |   1 +
 src/api/admin/types.ts                        |   5 +
 .../contentManagement/DramaManagementView.vue | 116 ++++++++++++++----
 3 files changed, 95 insertions(+), 27 deletions(-)

diff --git a/src/api/admin/drama.ts b/src/api/admin/drama.ts
index 885227d..abe00bf 100644
--- a/src/api/admin/drama.ts
+++ b/src/api/admin/drama.ts
@@ -15,6 +15,7 @@ export interface DramaPageParams {
   keyword?: string
   status?: string
   categoryId?: number
+  categoryIds?: number[]
   isHot?: boolean
   dramaTypes?: Array<'ANIME' | 'LIVE'>
 }
diff --git a/src/api/admin/types.ts b/src/api/admin/types.ts
index 9e499a5..4040874 100644
--- a/src/api/admin/types.ts
+++ b/src/api/admin/types.ts
@@ -20,12 +20,15 @@ export interface DramaItem {
   title: string
   subtitle?: string
   categoryId?: number
+  categoryIds?: number[]
+  categoryNames?: string[]
   category?: string
   genre?: string
   description?: string
   cover?: string
   language?: string
   dramaType?: 'ANIME' | 'LIVE'
+  dramaTypes?: Array<'ANIME' | 'LIVE'>
   episodes?: number
   freeEpisodes?: number
   unlockCoin?: number
@@ -47,11 +50,13 @@ export interface DramaSaveData {
   title: string
   subtitle?: string
   categoryId?: number
+  categoryIds?: number[]
   genre?: string
   description?: string
   cover?: string
   language?: string
   dramaType?: 'ANIME' | 'LIVE'
+  dramaTypes?: Array<'ANIME' | 'LIVE'>
   freeEpisodes?: number
   unlockCoin?: number
   favoriteCount?: number
diff --git a/src/views/contentManagement/DramaManagementView.vue b/src/views/contentManagement/DramaManagementView.vue
index fd63ee5..439ebad 100644
--- a/src/views/contentManagement/DramaManagementView.vue
+++ b/src/views/contentManagement/DramaManagementView.vue
@@ -29,8 +29,8 @@ const categories = ref([])
 
 const keyword = ref('')
 const statusFilter = ref(undefined)
-const categoryId = ref(undefined)
-const dramaTypeFilter = ref(undefined)
+const categoryIds = ref([])
+const dramaTypes = ref([])
 const hotFilter = ref(undefined)
 const pageIndex = ref(1)
 const pageSize = ref(10)
@@ -47,8 +47,8 @@ const editingLikeCount = ref(0)
 const formRef = ref()
 const form = reactive({
   title: '',
-  categoryId: undefined,
-  dramaType: 'LIVE',
+  categoryIds: [],
+  dramaTypes: ['LIVE'],
   description: '',
   freeEpisodes: 3,
   unlockCoin: 0,
@@ -63,8 +63,12 @@ const COVER_TYPES = ['image/jpeg', 'image/png', 'image/webp']
 
 const formRules = {
   title: [{ required: true, message: '请输入短剧名称', trigger: 'blur' }],
-  categoryId: [{ required: true, message: '请选择短剧类型', trigger: 'change' }],
-  dramaType: [{ required: true, message: '请选择内容类型', trigger: 'change' }]
+  categoryIds: [
+    { type: 'array', required: true, min: 1, message: '请至少选择一个类型', trigger: 'change' }
+  ],
+  dramaTypes: [
+    { type: 'array', required: true, min: 1, message: '请至少选择一个内容类型', trigger: 'change' }
+  ]
 }
 
 const coverDisplayName = computed(
@@ -106,8 +110,8 @@ async function load() {
       pageSize: pageSize.value,
       keyword: keyword.value.trim() || undefined,
       status: statusFilter.value || undefined,
-      categoryId: categoryId.value,
-      dramaTypes: dramaTypeFilter.value ? [dramaTypeFilter.value] : undefined,
+      categoryIds: categoryIds.value.length ? categoryIds.value : undefined,
+      dramaTypes: dramaTypes.value.length ? dramaTypes.value : undefined,
       isHot: hotFilter.value
     })
     list.value = res.data?.list || []
@@ -130,8 +134,8 @@ function search() {
 function resetFilters() {
   keyword.value = ''
   statusFilter.value = undefined
-  categoryId.value = undefined
-  dramaTypeFilter.value = undefined
+  categoryIds.value = []
+  dramaTypes.value = []
   hotFilter.value = undefined
   search()
 }
@@ -156,8 +160,8 @@ function openCreate() {
   editingId.value = null
   Object.assign(form, {
     title: '',
-    categoryId: undefined,
-    dramaType: 'LIVE',
+    categoryIds: [],
+    dramaTypes: ['LIVE'],
     description: '',
     freeEpisodes: 3,
     unlockCoin: 0,
@@ -178,8 +182,18 @@ function openEdit(row) {
   editingId.value = row.id
   Object.assign(form, {
     title: row.title,
-    categoryId: row.categoryId || undefined,
-    dramaType: row.dramaType || 'LIVE',
+    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'],
     description: row.description || '',
     freeEpisodes: row.freeEpisodes ?? 3,
     unlockCoin: row.unlockCoin ?? 0,
@@ -200,6 +214,16 @@ function dramaTypeLabel(value) {
   return dramaTypeOptions.find((item) => item.value === value)?.label || '真人剧'
 }
 
+function rowCategoryNames(row) {
+  const names = Array.isArray(row.categoryNames) ? row.categoryNames.filter(Boolean) : []
+  return names.length ? names.join(' / ') : row.genre || '—'
+}
+
+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 {
@@ -207,11 +231,13 @@ async function saveDrama() {
   } catch {
     return
   }
-  const category = categories.value.find((item) => item.id === form.categoryId)
+  const categoryNames = form.categoryIds
+    .map((id) => categories.value.find((item) => item.id === id)?.name)
+    .filter(Boolean)
   const payload = {
     ...form,
     title: form.title.trim(),
-    genre: category?.name || ''
+    genre: categoryNames.join(' / ')
   }
   saving.value = true
   try {
@@ -366,13 +392,27 @@ onMounted(async () => {
             :key="item.code"
             :label="item.text"
             :value="item.code" /></el-select
-        ><el-select v-model="categoryId" clearable placeholder="全部类型" @change="search"
+        ><el-select
+          v-model="categoryIds"
+          multiple
+          collapse-tags
+          collapse-tags-tooltip
+          clearable
+          placeholder="全部类型"
+          @change="search"
           ><el-option
             v-for="item in categories"
             :key="item.id"
             :label="item.name"
             :value="item.id" /></el-select
-        ><el-select v-model="dramaTypeFilter" clearable placeholder="全部内容类型" @change="search"
+        ><el-select
+          v-model="dramaTypes"
+          multiple
+          collapse-tags
+          collapse-tags-tooltip
+          clearable
+          placeholder="全部内容类型"
+          @change="search"
           ><el-option
             v-for="item in dramaTypeOptions"
             :key="item.value"
@@ -416,12 +456,20 @@ onMounted(async () => {
           ><span v-else class="table-empty-text">—</span></template
         ></el-table-column
       >
-      <el-table-column prop="genre" label="类型" width="110" />
-      <el-table-column label="内容类型" width="110"
+      <el-table-column label="类型" min-width="150" show-overflow-tooltip
+        ><template #default="{ row }">{{ rowCategoryNames(row) }}</template>
+      </el-table-column>
+      <el-table-column label="内容类型" min-width="150"
         ><template #default="{ row }"
-          ><el-tag :type="row.dramaType === 'ANIME' ? 'warning' : 'info'" effect="light">{{
-            dramaTypeLabel(row.dramaType)
-          }}</el-tag></template
+          ><div class="table-actions"
+            ><el-tag
+              v-for="type in rowDramaTypes(row)"
+              :key="type"
+              :type="type === 'ANIME' ? 'warning' : 'info'"
+              effect="light"
+              >{{ dramaTypeLabel(type) }}</el-tag
+            ></div
+          ></template
         ></el-table-column
       >
       <el-table-column label="集数" width="90"
@@ -533,8 +581,15 @@ onMounted(async () => {
           <el-form-item label="短剧名称" prop="title">
             <el-input v-model="form.title" maxlength="80" placeholder="请输入短剧名称" />
           </el-form-item>
-          <el-form-item label="类型" prop="categoryId">
-            <el-select v-model="form.categoryId" placeholder="请选择类型">
+          <el-form-item label="类型" prop="categoryIds">
+            <el-select
+              v-model="form.categoryIds"
+              multiple
+              collapse-tags
+              collapse-tags-tooltip
+              filterable
+              placeholder="请选择类型"
+            >
               <el-option
                 v-for="item in categories"
                 :key="item.id"
@@ -543,8 +598,15 @@ onMounted(async () => {
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="内容类型" prop="dramaType">
-            <el-select v-model="form.dramaType" placeholder="请选择内容类型">
+          <el-form-item label="内容类型" prop="dramaTypes">
+            <el-select
+              v-model="form.dramaTypes"
+              multiple
+              collapse-tags
+              collapse-tags-tooltip
+              filterable
+              placeholder="请选择内容类型"
+            >
               <el-option
                 v-for="item in dramaTypeOptions"
                 :key="item.value"

From 3e779e4efdc02ff946cb4830938255a6fc08a376 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 17:16:40 +0800
Subject: [PATCH 32/59] =?UTF-8?q?fix(admin):=20=E5=A4=9A=E9=80=89=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E4=B8=8E=E5=86=85=E5=AE=B9=E7=B1=BB=E5=9E=8B=E5=AE=8C?=
 =?UTF-8?q?=E6=95=B4=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../contentManagement/DramaManagementView.vue | 69 ++++++++++++++-----
 1 file changed, 53 insertions(+), 16 deletions(-)

diff --git a/src/views/contentManagement/DramaManagementView.vue b/src/views/contentManagement/DramaManagementView.vue
index 439ebad..cba1ef5 100644
--- a/src/views/contentManagement/DramaManagementView.vue
+++ b/src/views/contentManagement/DramaManagementView.vue
@@ -214,9 +214,15 @@ function dramaTypeLabel(value) {
   return dramaTypeOptions.find((item) => item.value === value)?.label || '真人剧'
 }
 
-function rowCategoryNames(row) {
-  const names = Array.isArray(row.categoryNames) ? row.categoryNames.filter(Boolean) : []
-  return names.length ? names.join(' / ') : row.genre || '—'
+function rowCategoryList(row) {
+  if (Array.isArray(row.categoryNames) && row.categoryNames.length) {
+    return row.categoryNames.filter(Boolean)
+  }
+  if (!row.genre) return []
+  return row.genre
+    .split('/')
+    .map((name) => name.trim())
+    .filter(Boolean)
 }
 
 function rowDramaTypes(row) {
@@ -394,9 +400,8 @@ onMounted(async () => {
             :value="item.code" /></el-select
         ><el-select
           v-model="categoryIds"
+          class="drama-multi-select"
           multiple
-          collapse-tags
-          collapse-tags-tooltip
           clearable
           placeholder="全部类型"
           @change="search"
@@ -407,9 +412,8 @@ onMounted(async () => {
             :value="item.id" /></el-select
         ><el-select
           v-model="dramaTypes"
+          class="drama-multi-select"
           multiple
-          collapse-tags
-          collapse-tags-tooltip
           clearable
           placeholder="全部内容类型"
           @change="search"
@@ -456,12 +460,18 @@ onMounted(async () => {
           ><span v-else class="table-empty-text">—</span></template
         ></el-table-column
       >
-      <el-table-column label="类型" min-width="150" show-overflow-tooltip
-        ><template #default="{ row }">{{ rowCategoryNames(row) }}</template>
-      </el-table-column>
-      <el-table-column label="内容类型" min-width="150"
+      <el-table-column label="类型" min-width="200"
         ><template #default="{ row }"
-          ><div class="table-actions"
+          ><div class="tag-wrap"
+            ><el-tag v-for="name in rowCategoryList(row)" :key="name" type="info" effect="light">{{
+              name
+            }}</el-tag></div
+          ></template
+        >
+      </el-table-column>
+      <el-table-column label="内容类型" min-width="180"
+        ><template #default="{ row }"
+          ><div class="tag-wrap"
             ><el-tag
               v-for="type in rowDramaTypes(row)"
               :key="type"
@@ -584,9 +594,8 @@ onMounted(async () => {
           <el-form-item label="类型" prop="categoryIds">
             <el-select
               v-model="form.categoryIds"
+              class="drama-multi-select"
               multiple
-              collapse-tags
-              collapse-tags-tooltip
               filterable
               placeholder="请选择类型"
             >
@@ -601,9 +610,8 @@ onMounted(async () => {
           <el-form-item label="内容类型" prop="dramaTypes">
             <el-select
               v-model="form.dramaTypes"
+              class="drama-multi-select"
               multiple
-              collapse-tags
-              collapse-tags-tooltip
               filterable
               placeholder="请选择内容类型"
             >
@@ -769,3 +777,32 @@ onMounted(async () => {
     </template>
   </el-dialog>
 </template>
+
+<style scoped>
+.drama-multi-select {
+  min-width: 220px;
+}
+
+.drama-multi-select :deep(.el-select__wrapper) {
+  height: auto;
+  min-height: 32px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+.drama-multi-select :deep(.el-select__selection) {
+  flex-wrap: wrap;
+  row-gap: 4px;
+}
+
+.drama-editor-form .drama-multi-select {
+  width: 100%;
+  min-width: 0;
+}
+
+.tag-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+</style>

From 48b09ee8cf8719c5405fe68e9233c11fda932aac Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 18:52:15 +0800
Subject: [PATCH 33/59] =?UTF-8?q?feat(admin):=20=E7=9F=AD=E5=89=A7?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E6=94=AF=E6=8C=81=E6=8E=92=E5=BA=8F=E6=9D=83?=
 =?UTF-8?q?=E9=87=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../contentManagement/DramaManagementView.vue | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/views/contentManagement/DramaManagementView.vue b/src/views/contentManagement/DramaManagementView.vue
index cba1ef5..f18fa42 100644
--- a/src/views/contentManagement/DramaManagementView.vue
+++ b/src/views/contentManagement/DramaManagementView.vue
@@ -55,6 +55,7 @@ const form = reactive({
   favoriteCount: 0,
   heat: 0,
   isHot: false,
+  sort: 0,
   cover: ''
 })
 
@@ -168,6 +169,7 @@ function openCreate() {
     favoriteCount: 0,
     heat: 0,
     isHot: false,
+    sort: 0,
     cover: ''
   })
   coverFileName.value = ''
@@ -200,6 +202,7 @@ function openEdit(row) {
     favoriteCount: row.favoriteCount ?? 0,
     heat: row.views ?? 0,
     isHot: !!row.isHot,
+    sort: row.sort ?? 0,
     cover: row.cover || ''
   })
   coverFileName.value = row.cover ? coverBasename(row.cover) : ''
@@ -658,9 +661,22 @@ onMounted(async () => {
             />
           </el-form-item>
         </div>
-        <el-form-item label="是否热门">
-          <el-switch v-model="form.isHot" />
-        </el-form-item>
+        <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">

From 8e1a02ace0c2621743a2a8f21c04cb4b45723a3f Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 18:55:24 +0800
Subject: [PATCH 34/59] =?UTF-8?q?chore(web):=20=E5=BF=BD=E7=95=A5=E6=9C=AC?=
 =?UTF-8?q?=E6=9C=BA=E5=90=AF=E5=8A=A8=E8=84=9A=E6=9C=AC=E4=B8=8E=E8=BF=90?=
 =?UTF-8?q?=E8=A1=8C=E6=97=A5=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.gitignore b/.gitignore
index cbf030a..89dc256 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,8 @@ dist-ssr
 pnpm-debug
 stats.html
 *.apk
+
+# 本机运行时产物（start-dev.bat / vite 日志）
+start-dev.bat
+dev.out.log
+dev.err.log

From 6b3620c3c4c4b8c39c1cd8bb632bce48df52cfea Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 21:58:28 +0800
Subject: [PATCH 35/59] =?UTF-8?q?feat(admin):=20=E5=89=A7=E9=9B=86?=
 =?UTF-8?q?=E5=A4=9A=E9=80=89=E5=88=86=E7=89=87=E4=B8=8A=E4=BC=A0=E4=B8=8E?=
 =?UTF-8?q?=E6=96=AD=E7=82=B9=E7=BB=AD=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/locales/en.ts                             |  49 +++
 src/locales/zh-CN.ts                          |  47 +++
 .../EpisodeManagementView.vue                 |  58 +++-
 .../upload/BatchUploadDialog.vue              | 319 ++++++++++++++++++
 .../upload/CreateEpisodesDialog.vue           | 241 +++++++++++++
 .../upload/UploadTaskRow.vue                  | 119 +++++++
 .../upload/uploadSessions.ts                  |  72 ++++
 .../upload/useUploadQueue.ts                  | 310 +++++++++++++++++
 .../contentManagement/upload/videoLimit.ts    |   3 +
 9 files changed, 1210 insertions(+), 8 deletions(-)
 create mode 100644 src/views/contentManagement/upload/BatchUploadDialog.vue
 create mode 100644 src/views/contentManagement/upload/CreateEpisodesDialog.vue
 create mode 100644 src/views/contentManagement/upload/UploadTaskRow.vue
 create mode 100644 src/views/contentManagement/upload/uploadSessions.ts
 create mode 100644 src/views/contentManagement/upload/useUploadQueue.ts
 create mode 100644 src/views/contentManagement/upload/videoLimit.ts

diff --git a/src/locales/en.ts b/src/locales/en.ts
index 5043eef..ab44e71 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -527,5 +527,54 @@ export default {
   inputPasswordDemo: {
     title: 'InputPassword',
     inputPasswordDes: 'Secondary packaging of Input components based on ElementPlus'
+  },
+  episodeBatch: {
+    title: 'Batch upload episodes',
+    entry: 'Batch upload',
+    selectFiles: 'Select videos',
+    pause: 'Pause',
+    resume: 'Resume',
+    retry: 'Retry',
+    retryAll: 'Retry all',
+    remove: 'Remove',
+    hint: 'Supports MP4 / MOV / MKV / WEBM, max 500MB each; up to 2 files in parallel.',
+    invalidType: 'Only MP4, MOV, MKV, WEBM are allowed',
+    oversize: 'File exceeds 500MB and was not queued',
+    overallProgress: 'Overall progress',
+    empty: 'No videos selected',
+    createEpisodes: 'Create episodes',
+    closeWhileUploading:
+      'Uploads are still in progress. Closing will stop dispatching new tasks. Continue?',
+    resumeTitle: 'Unfinished uploads found',
+    resumeConfirm:
+      '{count} unfinished upload(s) found. Resume? Re-select the same local files to match.',
+    resumeYes: 'Pick files to resume',
+    resumeNo: 'Discard',
+    resumeAbandoned: 'Unfinished uploads discarded',
+    resumeMatched: 'Matched {count} file(s) and resumed',
+    resumeUnmatched: '{count} session(s) could not match local files; pick again manually',
+    createTitle: 'Create episodes in batch',
+    colSource: 'Source file',
+    colNumber: 'Episode No.',
+    colTitle: 'Title',
+    colFree: 'Free',
+    colResult: 'Result',
+    numberConflict: 'Episode number conflict',
+    missingVideo: 'Missing video URL',
+    createOk: 'Created',
+    createFailed: 'Create failed',
+    createAllSuccess: 'All episodes created',
+    createPartial: 'Some episodes failed; you can retry',
+    fixConflict: 'Resolve episode number conflicts first',
+    submitCreate: 'Submit',
+    retryFailed: 'Retry failed',
+    status: {
+      waiting: 'Waiting',
+      uploading: 'Uploading',
+      merging: 'Merging',
+      done: 'Done',
+      failed: 'Failed',
+      paused: 'Paused'
+    }
   }
 }
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 535f9f7..a66b726 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -521,5 +521,52 @@ export default {
   inputPasswordDemo: {
     title: '密码输入框',
     inputPasswordDes: '基于 ElementPlus 的 Input 组件二次封装'
+  },
+  episodeBatch: {
+    title: '批量上传剧集',
+    entry: '批量上传',
+    selectFiles: '选择视频',
+    pause: '暂停',
+    resume: '继续',
+    retry: '重试',
+    retryAll: '全部重试',
+    remove: '移除',
+    hint: '支持 MP4 / MOV / MKV / WEBM，单文件不超过 500MB；同时最多上传 2 个文件。',
+    invalidType: '仅支持 MP4、MOV、MKV、WEBM',
+    oversize: '文件超过 500MB，未入队',
+    overallProgress: '总进度',
+    empty: '尚未选择视频',
+    createEpisodes: '批量创建分集',
+    closeWhileUploading: '仍有未完成上传，关闭后将暂停派发新任务，确定关闭吗？',
+    resumeTitle: '发现未完成上传',
+    resumeConfirm: '发现 {count} 个未完成上传，是否续传？请重新选择相同本地文件以匹配。',
+    resumeYes: '选择文件续传',
+    resumeNo: '放弃',
+    resumeAbandoned: '已放弃未完成上传',
+    resumeMatched: '已匹配 {count} 个文件并开始续传',
+    resumeUnmatched: '有 {count} 个会话无法匹配本地文件，请手动重选',
+    createTitle: '批量创建分集',
+    colSource: '源文件',
+    colNumber: '集号',
+    colTitle: '标题',
+    colFree: '免费',
+    colResult: '结果',
+    numberConflict: '集号冲突',
+    missingVideo: '缺少视频地址',
+    createOk: '已创建',
+    createFailed: '创建失败',
+    createAllSuccess: '全部分集已创建',
+    createPartial: '部分分集创建失败，可重试',
+    fixConflict: '请先解决集号冲突',
+    submitCreate: '提交创建',
+    retryFailed: '重试失败项',
+    status: {
+      waiting: '等待中',
+      uploading: '上传中',
+      merging: '合并中',
+      done: '已完成',
+      failed: '失败',
+      paused: '已暂停'
+    }
   }
 }
diff --git a/src/views/contentManagement/EpisodeManagementView.vue b/src/views/contentManagement/EpisodeManagementView.vue
index 0a5e5fd..bc7f1f2 100644
--- a/src/views/contentManagement/EpisodeManagementView.vue
+++ b/src/views/contentManagement/EpisodeManagementView.vue
@@ -16,10 +16,15 @@ import {
 import { useRbac } from '@/stores/rbac'
 import { formatCount } from '@/utils/format'
 import { statusClass } from '@/utils/status'
+import { useI18n } from '@/hooks/web/useI18n'
 import { probeVideoDuration, uploadFile } from '@/utils/uploader'
+import BatchUploadDialog from './upload/BatchUploadDialog.vue'
+import { listPendingSessions } from './upload/uploadSessions'
+import { MAX_VIDEO_SIZE } from './upload/videoLimit'
 
 const route = useRoute()
 const { can } = useRbac()
+const { t } = useI18n()
 
 const loading = ref(false)
 const dramas = ref([])
@@ -27,6 +32,8 @@ const episodes = ref([])
 const selectedDramaId = ref(undefined)
 
 const dialogVisible = ref(false)
+const batchUploadVisible = ref(false)
+const batchNextNumber = computed(() => nextNumber())
 const saving = ref(false)
 const uploadingVideo = ref(false)
 const videoPercent = ref(0)
@@ -55,7 +62,6 @@ const statusOptions = [
   { code: 'offline', text: '已下线' }
 ]
 
-const MAX_VIDEO_SIZE = 500 * 1024 * 1024
 const VIDEO_EXTENSIONS = ['mp4', 'mov']
 const formRules = {
   number: [{ required: true, message: '请输入集号', trigger: 'change' }],
@@ -120,6 +126,19 @@ function nextNumber() {
   return episodes.value.reduce((max, item) => Math.max(max, item.number || 0), 0) + 1
 }
 
+const existingEpisodeNumbers = computed(() =>
+  episodes.value.map((item) => Number(item.number)).filter((n) => Number.isFinite(n))
+)
+
+function openBatchUpload() {
+  if (!selectedDramaId.value) return
+  batchUploadVisible.value = true
+}
+
+async function onBatchEpisodesCreated() {
+  await loadEpisodes()
+}
+
 function openCreate() {
   editingId.value = null
   Object.assign(form, {
@@ -304,11 +323,20 @@ async function move(index, offset) {
 
 async function onDramaChange() {
   await loadEpisodes()
+  openBatchIfPendingSessions()
+}
+
+/** 进入页面或切换短剧时，若有 24h 内未完成上传则打开批量上传弹窗以提示续传。 */
+function openBatchIfPendingSessions() {
+  if (!selectedDramaId.value || !can('episode:upload')) return
+  const pending = listPendingSessions(String(selectedDramaId.value))
+  if (pending.length) batchUploadVisible.value = true
 }
 
 onMounted(async () => {
   await loadDramas()
   await loadEpisodes()
+  openBatchIfPendingSessions()
 })
 </script>
 
@@ -317,13 +345,17 @@ onMounted(async () => {
     ><div
       ><div class="eyebrow">内容管理</div><h1>剧集管理</h1
       ><p>为短剧维护剧集信息、视频地址与播放顺序。</p></div
-    ><el-button
-      v-if="can('episode:upload')"
-      type="primary"
-      class="primary-button"
-      :disabled="!selectedDramaId"
-      @click="openCreate"
-      ><AppIcon :icon="AppIcons.add" />新增剧集</el-button
+    ><div class="page-heading-actions">
+      <el-button v-if="can('episode:upload')" :disabled="!selectedDramaId" @click="openBatchUpload"
+        ><AppIcon :icon="AppIcons.upload" />{{ t('episodeBatch.entry') }}</el-button
+      ><el-button
+        v-if="can('episode:upload')"
+        type="primary"
+        class="primary-button"
+        :disabled="!selectedDramaId"
+        @click="openCreate"
+        ><AppIcon :icon="AppIcons.add" />新增剧集</el-button
+      ></div
     ></div
   >
   <section class="panel episode-panel">
@@ -672,4 +704,14 @@ onMounted(async () => {
     ></video>
     <el-empty v-else description="该剧集还没有上传视频" />
   </el-dialog>
+  <BatchUploadDialog
+    v-if="selectedDramaId"
+    v-model="batchUploadVisible"
+    :drama-id="selectedDramaId"
+    :next-episode-number="batchNextNumber"
+    :default-unlock-coin="selectedDrama?.unlockCoin ?? 0"
+    :existing-numbers="existingEpisodeNumbers"
+    @refreshed="loadEpisodes"
+    @created="onBatchEpisodesCreated"
+  />
 </template>
diff --git a/src/views/contentManagement/upload/BatchUploadDialog.vue b/src/views/contentManagement/upload/BatchUploadDialog.vue
new file mode 100644
index 0000000..130be68
--- /dev/null
+++ b/src/views/contentManagement/upload/BatchUploadDialog.vue
@@ -0,0 +1,319 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集批量上传弹窗：多选、队列、总进度、续传与批量建集入口 -->
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { AppIcons } from '@/constants/icons'
+import { useI18n } from '@/hooks/web/useI18n'
+import CreateEpisodesDialog from './CreateEpisodesDialog.vue'
+import UploadTaskRow from './UploadTaskRow.vue'
+import { useUploadQueue } from './useUploadQueue'
+import { MAX_VIDEO_SIZE } from './videoLimit'
+import type { UploadSessionRecord } from './uploadSessions'
+
+const props = defineProps<{
+  modelValue: boolean
+  dramaId: string | number
+  nextEpisodeNumber: number
+  defaultUnlockCoin: number
+  existingNumbers: number[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  created: []
+  refreshed: []
+}>()
+
+const { t } = useI18n()
+
+const VIDEO_EXTENSIONS = ['mp4', 'mov', 'mkv', 'webm']
+const ACCEPT_ATTR = '.mp4,.mov,.mkv,.webm,video/*'
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value)
+})
+
+const dramaKey = computed(() => String(props.dramaId || ''))
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const resumeFileInputRef = ref<HTMLInputElement | null>(null)
+const rejectedNames = ref<string[]>([])
+const pendingSessions = ref<UploadSessionRecord[]>([])
+const createVisible = ref(false)
+const resumePromptShown = ref(false)
+
+const queue = useUploadQueue({ getDramaId: () => dramaKey.value })
+
+watch(
+  () => props.dramaId,
+  () => {
+    queue.clear()
+    resumePromptShown.value = false
+  }
+)
+
+const canCreateEpisodes = computed(() => queue.doneItems.value.length > 0)
+
+function extensionOf(fileName: string): string {
+  const parts = String(fileName || '').split('.')
+  return (parts.pop() || '').toLowerCase()
+}
+
+function validateFile(file: File): string {
+  if (!VIDEO_EXTENSIONS.includes(extensionOf(file.name))) {
+    return t('episodeBatch.invalidType')
+  }
+  if (file.size > MAX_VIDEO_SIZE) {
+    return t('episodeBatch.oversize')
+  }
+  return ''
+}
+
+function onPickFiles(event: Event): void {
+  const input = event.target as HTMLInputElement
+  const files = Array.from(input.files || [])
+  input.value = ''
+  if (!files.length) return
+  const accepted: File[] = []
+  const rejected: string[] = []
+  for (const file of files) {
+    const reason = validateFile(file)
+    if (reason) {
+      rejected.push(`${file.name}: ${reason}`)
+    } else {
+      accepted.push(file)
+    }
+  }
+  rejectedNames.value = rejected
+  if (!accepted.length) return
+  queue.enqueue(accepted)
+  queue.start()
+}
+
+function openFilePicker(): void {
+  fileInputRef.value?.click()
+}
+
+function onBeforeUnload(event: BeforeUnloadEvent): void {
+  if (!queue.hasActiveUpload.value) return
+  event.preventDefault()
+  event.returnValue = ''
+}
+
+watch(
+  () => queue.hasActiveUpload.value,
+  (active) => {
+    if (active) {
+      window.addEventListener('beforeunload', onBeforeUnload)
+    } else {
+      window.removeEventListener('beforeunload', onBeforeUnload)
+    }
+  }
+)
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', onBeforeUnload)
+})
+
+async function promptResumeIfNeeded(): Promise<void> {
+  if (resumePromptShown.value || !dramaKey.value) return
+  const sessions = queue.getPendingSessions()
+  if (!sessions.length) return
+  resumePromptShown.value = true
+  pendingSessions.value = sessions
+  try {
+    await ElMessageBox.confirm(
+      t('episodeBatch.resumeConfirm', { count: sessions.length }),
+      t('episodeBatch.resumeTitle'),
+      {
+        confirmButtonText: t('episodeBatch.resumeYes'),
+        cancelButtonText: t('episodeBatch.resumeNo'),
+        type: 'info'
+      }
+    )
+    resumeFileInputRef.value?.click()
+  } catch {
+    queue.abandonSessions(sessions)
+    pendingSessions.value = []
+    ElMessage.info(t('episodeBatch.resumeAbandoned'))
+  }
+}
+
+async function onResumeFiles(event: Event): Promise<void> {
+  const input = event.target as HTMLInputElement
+  const files = Array.from(input.files || [])
+  input.value = ''
+  const sessions = pendingSessions.value
+  if (!files.length || !sessions.length) return
+  const { matched, unmatched } = await queue.resumeFromSessions(sessions, files)
+  pendingSessions.value = []
+  if (unmatched.length) {
+    ElMessage.warning(t('episodeBatch.resumeUnmatched', { count: unmatched.length }))
+  }
+  if (matched.length) {
+    ElMessage.success(t('episodeBatch.resumeMatched', { count: matched.length }))
+    queue.start()
+  }
+}
+
+function beforeClose(done: () => void): void {
+  if (!queue.hasActiveUpload.value) {
+    done()
+    return
+  }
+  ElMessageBox.confirm(t('episodeBatch.closeWhileUploading'), t('common.reminder'), {
+    type: 'warning',
+    confirmButtonText: t('common.ok'),
+    cancelButtonText: t('common.cancel')
+  })
+    .then(() => {
+      queue.pause()
+      done()
+    })
+    .catch(() => undefined)
+}
+
+watch(visible, (open) => {
+  if (open) {
+    void promptResumeIfNeeded()
+  }
+})
+
+function openCreateDialog(): void {
+  if (!canCreateEpisodes.value) return
+  createVisible.value = true
+}
+
+function onEpisodesCreated(): void {
+  createVisible.value = false
+  emit('created')
+  visible.value = false
+  queue.clear()
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="t('episodeBatch.title')"
+    width="720px"
+    class="batch-upload-dialog"
+    :close-on-click-modal="false"
+    :before-close="beforeClose"
+  >
+    <input
+      ref="fileInputRef"
+      type="file"
+      multiple
+      hidden
+      :accept="ACCEPT_ATTR"
+      @change="onPickFiles"
+    />
+    <input
+      ref="resumeFileInputRef"
+      type="file"
+      multiple
+      hidden
+      :accept="ACCEPT_ATTR"
+      @change="onResumeFiles"
+    />
+
+    <div class="batch-upload-toolbar">
+      <el-button type="primary" @click="openFilePicker">
+        <AppIcon :icon="AppIcons.upload" />
+        {{ t('episodeBatch.selectFiles') }}
+      </el-button>
+      <el-button :disabled="!queue.items.value.length" @click="queue.pause()">
+        {{ t('episodeBatch.pause') }}
+      </el-button>
+      <el-button :disabled="!queue.items.value.length" @click="queue.start()">
+        {{ t('episodeBatch.resume') }}
+      </el-button>
+      <el-button
+        :disabled="!queue.items.value.some((item) => item.status === 'failed')"
+        @click="queue.retryAll()"
+      >
+        {{ t('episodeBatch.retryAll') }}
+      </el-button>
+    </div>
+
+    <p class="batch-upload-hint">{{ t('episodeBatch.hint') }}</p>
+
+    <div v-if="rejectedNames.length" class="batch-upload-rejected">
+      <p v-for="name in rejectedNames" :key="name">{{ name }}</p>
+    </div>
+
+    <div v-if="queue.items.value.length" class="batch-upload-overall">
+      <span>{{ t('episodeBatch.overallProgress') }}</span>
+      <el-progress :percentage="queue.overallPercent.value" :stroke-width="12" />
+    </div>
+
+    <div class="batch-upload-list">
+      <UploadTaskRow
+        v-for="item in queue.items.value"
+        :key="item.id"
+        :item="item"
+        @retry="queue.retry"
+        @remove="queue.remove"
+      />
+      <el-empty v-if="!queue.items.value.length" :description="t('episodeBatch.empty')" />
+    </div>
+
+    <template #footer>
+      <el-button @click="visible = false">{{ t('common.cancel') }}</el-button>
+      <el-button type="primary" :disabled="!canCreateEpisodes" @click="openCreateDialog">
+        {{ t('episodeBatch.createEpisodes') }}
+      </el-button>
+    </template>
+  </el-dialog>
+
+  <CreateEpisodesDialog
+    v-model="createVisible"
+    :drama-id="dramaId"
+    :done-items="queue.doneItems.value"
+    :next-episode-number="nextEpisodeNumber"
+    :default-unlock-coin="defaultUnlockCoin"
+    :existing-numbers="existingNumbers"
+    @settled="emit('refreshed')"
+    @created="onEpisodesCreated"
+  />
+</template>
+
+<style scoped>
+.batch-upload-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.batch-upload-hint {
+  margin: 0 0 12px;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+
+.batch-upload-rejected {
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--el-color-danger) 8%, transparent);
+  color: var(--el-color-danger);
+  font-size: 12px;
+}
+
+.batch-upload-rejected p {
+  margin: 0;
+}
+
+.batch-upload-overall {
+  margin-bottom: 12px;
+}
+
+.batch-upload-list {
+  max-height: 360px;
+  overflow: auto;
+}
+</style>
diff --git a/src/views/contentManagement/upload/CreateEpisodesDialog.vue b/src/views/contentManagement/upload/CreateEpisodesDialog.vue
new file mode 100644
index 0000000..13b771e
--- /dev/null
+++ b/src/views/contentManagement/upload/CreateEpisodesDialog.vue
@@ -0,0 +1,241 @@
+<!-- Author: fruit.com.cn -->
+<!-- 批量创建分集：自然排序预填集号与标题，冲突标红，失败可重试 -->
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { createEpisodeApi } from '@/api/admin/episode'
+import { useI18n } from '@/hooks/web/useI18n'
+import type { UploadQueueItem } from './useUploadQueue'
+
+const props = defineProps<{
+  modelValue: boolean
+  dramaId: string | number
+  doneItems: UploadQueueItem[]
+  nextEpisodeNumber: number
+  defaultUnlockCoin: number
+  existingNumbers: number[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  settled: []
+  created: []
+}>()
+
+const { t } = useI18n()
+
+interface EpisodeDraft {
+  key: string
+  sourceName: string
+  number: number
+  title: string
+  isFree: boolean
+  videoUrl: string
+  durationSec: number
+  saved: boolean
+  error: string
+}
+
+const DRAFT_STATUS = 'draft'
+const rows = ref<EpisodeDraft[]>([])
+const submitting = ref(false)
+
+function baseName(fileName: string): string {
+  const dot = fileName.lastIndexOf('.')
+  if (dot <= 0) return fileName
+  return fileName.slice(0, dot)
+}
+
+function compareNatural(left: string, right: string): number {
+  return left.localeCompare(right, undefined, { numeric: true, sensitivity: 'base' })
+}
+
+function buildRows(): void {
+  const sorted = [...props.doneItems].sort((left, right) =>
+    compareNatural(baseName(left.fileName), baseName(right.fileName))
+  )
+  let number = props.nextEpisodeNumber
+  rows.value = sorted.map((item) => ({
+    key: item.id,
+    sourceName: item.fileName,
+    number: number++,
+    title: baseName(item.fileName),
+    isFree: true,
+    videoUrl: item.url || '',
+    durationSec: item.durationSec || 0,
+    saved: false,
+    error: ''
+  }))
+}
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (open) buildRows()
+  }
+)
+
+function conflictOf(row: EpisodeDraft): boolean {
+  if (row.saved) return false
+  const duplicated = rows.value.filter((item) => item.number === row.number).length > 1
+  return duplicated || props.existingNumbers.includes(Number(row.number))
+}
+
+function errorText(error: unknown): string {
+  if (error instanceof Error && error.message) return error.message
+  return t('episodeBatch.createFailed')
+}
+
+async function createOne(row: EpisodeDraft): Promise<void> {
+  if (!row.videoUrl) {
+    row.error = t('episodeBatch.missingVideo')
+    return
+  }
+  try {
+    await createEpisodeApi({
+      dramaId: props.dramaId as unknown as number,
+      number: row.number,
+      title: row.title.trim(),
+      durationSec: row.durationSec,
+      videoUrl: row.videoUrl,
+      isFree: row.isFree,
+      unlockCoin: row.isFree ? 0 : props.defaultUnlockCoin,
+      status: DRAFT_STATUS
+    })
+    row.saved = true
+    row.error = ''
+  } catch (error) {
+    row.error = errorText(error)
+  }
+}
+
+async function submit(): Promise<void> {
+  if (submitting.value) return
+  if (rows.value.some((row) => conflictOf(row))) {
+    ElMessage.warning(t('episodeBatch.fixConflict'))
+    return
+  }
+  submitting.value = true
+  try {
+    for (const row of rows.value) {
+      if (!row.saved) await createOne(row)
+    }
+  } finally {
+    submitting.value = false
+  }
+  emit('settled')
+  if (rows.value.every((row) => row.saved)) {
+    ElMessage.success(t('episodeBatch.createAllSuccess'))
+    emit('created')
+    return
+  }
+  ElMessage.warning(t('episodeBatch.createPartial'))
+}
+
+function closeDialog(): void {
+  emit('update:modelValue', false)
+}
+
+function hasFailed(): boolean {
+  return rows.value.some((row) => !row.saved && !!row.error)
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    :title="t('episodeBatch.createTitle')"
+    width="760px"
+    :close-on-click-modal="false"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <div class="create-episode-head">
+      <span>{{ t('episodeBatch.colSource') }}</span>
+      <span>{{ t('episodeBatch.colNumber') }}</span>
+      <span>{{ t('episodeBatch.colTitle') }}</span>
+      <span>{{ t('episodeBatch.colFree') }}</span>
+      <span>{{ t('episodeBatch.colResult') }}</span>
+    </div>
+    <div class="create-episode-list">
+      <div
+        v-for="row in rows"
+        :key="row.key"
+        class="create-episode-row"
+        :class="{ 'is-conflict': conflictOf(row), 'is-saved': row.saved }"
+      >
+        <b class="create-episode-source" :title="row.sourceName">{{ row.sourceName }}</b>
+        <el-input-number
+          v-model="row.number"
+          :min="1"
+          :max="999"
+          :disabled="row.saved"
+          controls-position="right"
+        />
+        <el-input v-model="row.title" maxlength="100" :disabled="row.saved" />
+        <el-switch v-model="row.isFree" :disabled="row.saved" />
+        <span class="create-episode-result">
+          {{
+            row.saved
+              ? t('episodeBatch.createOk')
+              : row.error || (conflictOf(row) ? t('episodeBatch.numberConflict') : '')
+          }}
+        </span>
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="closeDialog">{{ t('common.cancel') }}</el-button>
+      <el-button type="primary" :loading="submitting" @click="submit">
+        {{ hasFailed() ? t('episodeBatch.retryFailed') : t('episodeBatch.submitCreate') }}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.create-episode-head,
+.create-episode-row {
+  display: grid;
+  grid-template-columns: minmax(120px, 1.2fr) 120px minmax(140px, 1.4fr) 48px minmax(80px, 0.8fr);
+  gap: 8px;
+  align-items: center;
+}
+
+.create-episode-head {
+  margin-bottom: 8px;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.create-episode-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 420px;
+  overflow: auto;
+}
+
+.create-episode-source {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.create-episode-result {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.create-episode-row.is-conflict :deep(.el-input-number) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  border-radius: 4px;
+}
+
+.create-episode-row.is-conflict .create-episode-result {
+  color: var(--el-color-danger);
+}
+
+.create-episode-row.is-saved .create-episode-result {
+  color: var(--el-color-success);
+}
+</style>
diff --git a/src/views/contentManagement/upload/UploadTaskRow.vue b/src/views/contentManagement/upload/UploadTaskRow.vue
new file mode 100644
index 0000000..24033d8
--- /dev/null
+++ b/src/views/contentManagement/upload/UploadTaskRow.vue
@@ -0,0 +1,119 @@
+<!-- Author: fruit.com.cn -->
+<!-- 批量上传队列单行：文件名、大小、进度、状态与操作 -->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import type { UploadQueueItem } from './useUploadQueue'
+
+const props = defineProps<{
+  item: UploadQueueItem
+}>()
+
+const emit = defineEmits<{
+  retry: [id: string]
+  remove: [id: string]
+}>()
+
+const { t } = useI18n()
+
+const BYTES_PER_KB = 1024
+const BYTES_PER_MB = 1024 * 1024
+
+const sizeLabel = computed(() => {
+  const size = props.item.fileSize
+  if (size >= BYTES_PER_MB) {
+    return `${(size / BYTES_PER_MB).toFixed(1)} MB`
+  }
+  return `${Math.max(1, Math.round(size / BYTES_PER_KB))} KB`
+})
+
+const statusLabel = computed(() => t(`episodeBatch.status.${props.item.status}`))
+
+const statusType = computed(() => {
+  switch (props.item.status) {
+    case 'done':
+      return 'success'
+    case 'failed':
+      return 'danger'
+    case 'paused':
+      return 'warning'
+    case 'merging':
+    case 'uploading':
+      return ''
+    default:
+      return 'info'
+  }
+})
+
+const canRetry = computed(() => props.item.status === 'failed')
+const canRemove = computed(
+  () => props.item.status !== 'uploading' && props.item.status !== 'merging'
+)
+</script>
+
+<template>
+  <div class="upload-task-row" :class="{ 'is-failed': item.status === 'failed' }">
+    <div class="upload-task-row__meta">
+      <b class="upload-task-row__name" :title="item.fileName">{{ item.fileName }}</b>
+      <small>{{ sizeLabel }}</small>
+      <el-tag :type="statusType" effect="light" size="small">{{ statusLabel }}</el-tag>
+    </div>
+    <el-progress
+      :percentage="item.percent"
+      :status="
+        item.status === 'failed' ? 'exception' : item.status === 'done' ? 'success' : undefined
+      "
+      :stroke-width="10"
+    />
+    <p v-if="item.error" class="upload-task-row__error">{{ item.error }}</p>
+    <div class="upload-task-row__actions">
+      <el-button v-if="canRetry" size="small" type="primary" @click="emit('retry', item.id)">
+        {{ t('episodeBatch.retry') }}
+      </el-button>
+      <el-button v-if="canRemove" size="small" type="danger" text @click="emit('remove', item.id)">
+        {{ t('episodeBatch.remove') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.upload-task-row {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.upload-task-row__meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.upload-task-row__name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.upload-task-row__error {
+  margin: 6px 0 0;
+  color: var(--el-color-danger);
+  font-size: 12px;
+}
+
+.upload-task-row__actions {
+  margin-top: 8px;
+  display: flex;
+  gap: 8px;
+}
+
+.upload-task-row.is-failed {
+  background: color-mix(in srgb, var(--el-color-danger) 6%, transparent);
+  border-radius: 6px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+</style>
diff --git a/src/views/contentManagement/upload/uploadSessions.ts b/src/views/contentManagement/upload/uploadSessions.ts
new file mode 100644
index 0000000..513ac63
--- /dev/null
+++ b/src/views/contentManagement/upload/uploadSessions.ts
@@ -0,0 +1,72 @@
+// Author: fruit.com.cn
+/** 剧集批量上传断点会话：localStorage 读写与清理 */
+
+export const UPLOAD_SESSION_KEY = 'reel_upload_sessions'
+export const UPLOAD_SESSION_TTL_MS = 24 * 60 * 60 * 1000
+
+export interface UploadSessionRecord {
+  uploadId: string
+  fileName: string
+  fileSize: number
+  lastModified: number
+  dramaId: string
+  bizType: string
+  createdAt: number
+}
+
+/** 读取全部会话，解析失败时返回空数组。 */
+export function loadUploadSessions(): UploadSessionRecord[] {
+  try {
+    const raw = localStorage.getItem(UPLOAD_SESSION_KEY)
+    if (!raw) return []
+    const parsed = JSON.parse(raw)
+    return Array.isArray(parsed) ? (parsed as UploadSessionRecord[]) : []
+  } catch {
+    return []
+  }
+}
+
+/** 覆盖写入全部会话。 */
+export function saveUploadSessions(sessions: UploadSessionRecord[]): void {
+  localStorage.setItem(UPLOAD_SESSION_KEY, JSON.stringify(sessions))
+}
+
+/** 按 dramaId 过滤且未超过 TTL 的未完成会话。 */
+export function listPendingSessions(dramaId: string, now = Date.now()): UploadSessionRecord[] {
+  const dramaKey = String(dramaId)
+  return loadUploadSessions().filter(
+    (item) =>
+      String(item.dramaId) === dramaKey &&
+      now - Number(item.createdAt || 0) <= UPLOAD_SESSION_TTL_MS
+  )
+}
+
+/** 新增或按 uploadId 覆盖一条会话。 */
+export function upsertUploadSession(record: UploadSessionRecord): void {
+  const next = loadUploadSessions().filter((item) => item.uploadId !== record.uploadId)
+  next.push(record)
+  saveUploadSessions(next)
+}
+
+/** 按 uploadId 移除会话。 */
+export function removeUploadSession(uploadId: string): void {
+  if (!uploadId) return
+  saveUploadSessions(loadUploadSessions().filter((item) => item.uploadId !== uploadId))
+}
+
+/** 批量移除会话。 */
+export function removeUploadSessions(uploadIds: string[]): void {
+  if (!uploadIds.length) return
+  const idSet = new Set(uploadIds)
+  saveUploadSessions(loadUploadSessions().filter((item) => !idSet.has(item.uploadId)))
+}
+
+/** 用文件名 + size + lastModified 匹配本地文件。 */
+export function matchFileForSession(session: UploadSessionRecord, files: File[]): File | undefined {
+  return files.find(
+    (file) =>
+      file.name === session.fileName &&
+      file.size === session.fileSize &&
+      file.lastModified === session.lastModified
+  )
+}
diff --git a/src/views/contentManagement/upload/useUploadQueue.ts b/src/views/contentManagement/upload/useUploadQueue.ts
new file mode 100644
index 0000000..dd0312b
--- /dev/null
+++ b/src/views/contentManagement/upload/useUploadQueue.ts
@@ -0,0 +1,310 @@
+// Author: fruit.com.cn
+/** 剧集批量上传队列：文件并发、进度加权、断点会话、失败隔离 */
+
+import { computed, ref } from 'vue'
+import { getUploadProgressApi } from '@/api/admin/media'
+import { probeVideoDuration, resumeUpload, uploadFile } from '@/utils/uploader'
+import {
+  listPendingSessions,
+  matchFileForSession,
+  removeUploadSession,
+  type UploadSessionRecord,
+  upsertUploadSession
+} from './uploadSessions'
+
+export type UploadItemStatus = 'waiting' | 'uploading' | 'merging' | 'done' | 'failed' | 'paused'
+
+export interface UploadQueueItem {
+  id: string
+  file: File
+  fileName: string
+  fileSize: number
+  lastModified: number
+  percent: number
+  status: UploadItemStatus
+  error: string
+  uploadId: string
+  assetId?: number
+  url?: string
+  durationSec?: number
+}
+
+export interface UseUploadQueueOptions {
+  /** 当前短剧 id（调用时读取，避免切换剧后闭包过期） */
+  getDramaId: () => string
+  bizType?: string
+}
+
+const FILE_CONCURRENCY = 2
+const CHUNK_CONCURRENCY = 3
+const DEFAULT_BIZ_TYPE = 'EPISODE'
+const MERGING_PERCENT = 95
+const MAX_PERCENT = 100
+
+let queueSeq = 0
+
+function nextItemId(): string {
+  queueSeq += 1
+  return `uq-${Date.now()}-${queueSeq}`
+}
+
+function extractErrorMessage(error: unknown): string {
+  if (error instanceof Error && error.message) return error.message
+  return String(error || 'upload failed')
+}
+
+function isHttpNotFound(error: unknown): boolean {
+  const status = (error as { response?: { status?: number } })?.response?.status
+  return status === 404
+}
+
+/**
+ * 创建上传队列控制器。
+ * @param options dramaId 与可选 bizType
+ */
+export function useUploadQueue(options: UseUploadQueueOptions) {
+  const items = ref<UploadQueueItem[]>([])
+  const paused = ref(false)
+  const bizType = options.bizType || DEFAULT_BIZ_TYPE
+  let running = 0
+
+  const overallPercent = computed(() => {
+    const list = items.value
+    if (!list.length) return 0
+    const totalBytes = list.reduce((sum, item) => sum + item.fileSize, 0)
+    if (totalBytes <= 0) return 0
+    const weighted = list.reduce((sum, item) => sum + item.fileSize * item.percent, 0)
+    return Math.min(MAX_PERCENT, Math.round(weighted / totalBytes))
+  })
+
+  const hasActiveUpload = computed(() =>
+    items.value.some(
+      (item) =>
+        item.status === 'waiting' ||
+        item.status === 'uploading' ||
+        item.status === 'merging' ||
+        item.status === 'paused'
+    )
+  )
+
+  const doneItems = computed(() => items.value.filter((item) => item.status === 'done'))
+
+  function persistSession(item: UploadQueueItem, uploadId: string): void {
+    item.uploadId = uploadId
+    upsertUploadSession({
+      uploadId,
+      fileName: item.fileName,
+      fileSize: item.fileSize,
+      lastModified: item.lastModified,
+      dramaId: String(options.getDramaId()),
+      bizType,
+      createdAt: Date.now()
+    })
+  }
+
+  function clearSession(uploadId: string): void {
+    if (uploadId) removeUploadSession(uploadId)
+  }
+
+  async function runOne(item: UploadQueueItem, resumeId?: string): Promise<void> {
+    item.status = 'uploading'
+    item.error = ''
+    try {
+      const durationSec = await probeVideoDuration(item.file)
+      item.durationSec = durationSec
+      const uploadOptions = {
+        bizType,
+        concurrency: CHUNK_CONCURRENCY,
+        durationSec,
+        onSession: (uploadId: string) => persistSession(item, uploadId),
+        onProgress: (percent: number) => {
+          item.percent = percent
+          if (percent >= MERGING_PERCENT && item.status === 'uploading') {
+            item.status = 'merging'
+          }
+        }
+      }
+      const asset = resumeId
+        ? await resumeUpload(item.file, resumeId, uploadOptions)
+        : await uploadFile(item.file, uploadOptions)
+      item.percent = MAX_PERCENT
+      item.status = 'done'
+      item.assetId = asset.id
+      item.url = asset.url
+      if (asset.durationSec != null) item.durationSec = asset.durationSec
+      clearSession(item.uploadId || resumeId || '')
+    } catch (error) {
+      item.status = 'failed'
+      item.error = extractErrorMessage(error)
+    }
+  }
+
+  function pump(): void {
+    if (paused.value) return
+    while (running < FILE_CONCURRENCY && !paused.value) {
+      const next = items.value.find((item) => item.status === 'waiting')
+      if (!next) return
+      // 立刻占位，避免同步 while 循环把同一项派发两次
+      next.status = 'uploading'
+      running += 1
+      const resumeId = next.uploadId || undefined
+      void runOne(next, resumeId).finally(() => {
+        running -= 1
+        if (!paused.value) pump()
+      })
+    }
+  }
+
+  /** 入队本地文件（调用方已完成类型/大小校验）。 */
+  function enqueue(files: File[]): void {
+    for (const file of files) {
+      items.value.push({
+        id: nextItemId(),
+        file,
+        fileName: file.name,
+        fileSize: file.size,
+        lastModified: file.lastModified,
+        percent: 0,
+        status: paused.value ? 'paused' : 'waiting',
+        error: '',
+        uploadId: ''
+      })
+    }
+  }
+
+  /** 开始或继续派发。 */
+  function start(): void {
+    paused.value = false
+    for (const item of items.value) {
+      if (item.status === 'paused') item.status = 'waiting'
+    }
+    void pump()
+  }
+
+  /** 暂停：不派新任务；进行中分片跑完。 */
+  function pause(): void {
+    paused.value = true
+    for (const item of items.value) {
+      if (item.status === 'waiting') item.status = 'paused'
+    }
+  }
+
+  /** 重试单个失败项。 */
+  function retry(id: string): void {
+    const item = items.value.find((row) => row.id === id)
+    if (!item || item.status !== 'failed') return
+    item.error = ''
+    item.percent = item.uploadId ? item.percent : 0
+    item.status = paused.value ? 'paused' : 'waiting'
+    if (!paused.value) void pump()
+  }
+
+  /** 重试全部失败项。 */
+  function retryAll(): void {
+    for (const item of items.value) {
+      if (item.status === 'failed') {
+        item.error = ''
+        item.status = paused.value ? 'paused' : 'waiting'
+      }
+    }
+    if (!paused.value) void pump()
+  }
+
+  /** 移除单项并清理会话。 */
+  function remove(id: string): void {
+    const index = items.value.findIndex((row) => row.id === id)
+    if (index < 0) return
+    const [removed] = items.value.splice(index, 1)
+    clearSession(removed.uploadId)
+  }
+
+  /** 清空队列并清理本队列会话。 */
+  function clear(): void {
+    for (const item of items.value) {
+      clearSession(item.uploadId)
+    }
+    items.value = []
+    paused.value = false
+    running = 0
+  }
+
+  /** 读取当前剧未完成会话（24h 内）。 */
+  function getPendingSessions(): UploadSessionRecord[] {
+    return listPendingSessions(String(options.getDramaId()))
+  }
+
+  /**
+   * 用本地重选文件匹配会话并入队续传。
+   * @returns matched / unmatched 会话列表
+   */
+  async function resumeFromSessions(
+    sessions: UploadSessionRecord[],
+    files: File[]
+  ): Promise<{ matched: UploadSessionRecord[]; unmatched: UploadSessionRecord[] }> {
+    const matched: UploadSessionRecord[] = []
+    const unmatched: UploadSessionRecord[] = []
+    for (const session of sessions) {
+      const file = matchFileForSession(session, files)
+      if (!file) {
+        unmatched.push(session)
+        continue
+      }
+      try {
+        const progressRes = await getUploadProgressApi(session.uploadId)
+        const progress = progressRes?.data
+        if (!progress) {
+          unmatched.push(session)
+          continue
+        }
+        if (String(progress.status || '').toLowerCase() === 'completed') {
+          clearSession(session.uploadId)
+          continue
+        }
+        items.value.push({
+          id: nextItemId(),
+          file,
+          fileName: file.name,
+          fileSize: file.size,
+          lastModified: file.lastModified,
+          percent: Math.min(MERGING_PERCENT, Number(progress.percent) || 0),
+          status: paused.value ? 'paused' : 'waiting',
+          error: '',
+          uploadId: session.uploadId
+        })
+        matched.push(session)
+      } catch (error) {
+        if (isHttpNotFound(error)) {
+          clearSession(session.uploadId)
+        } else {
+          unmatched.push(session)
+        }
+      }
+    }
+    return { matched, unmatched }
+  }
+
+  /** 放弃续传：清理给定会话。 */
+  function abandonSessions(sessions: UploadSessionRecord[]): void {
+    for (const session of sessions) {
+      clearSession(session.uploadId)
+    }
+  }
+
+  return {
+    items,
+    overallPercent,
+    hasActiveUpload,
+    doneItems,
+    paused,
+    enqueue,
+    start,
+    pause,
+    retry,
+    retryAll,
+    remove,
+    clear,
+    getPendingSessions,
+    resumeFromSessions,
+    abandonSessions
+  }
+}
diff --git a/src/views/contentManagement/upload/videoLimit.ts b/src/views/contentManagement/upload/videoLimit.ts
new file mode 100644
index 0000000..a649d8a
--- /dev/null
+++ b/src/views/contentManagement/upload/videoLimit.ts
@@ -0,0 +1,3 @@
+// Author: fruit.com.cn
+/** 剧集视频大小上限，单文件上传与批量上传共用。 */
+export const MAX_VIDEO_SIZE = 500 * 1024 * 1024

From c71a12f6f48ea58419c7402343781159bd189338 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 22:04:36 +0800
Subject: [PATCH 36/59] =?UTF-8?q?fix(admin):=20=E7=BB=9F=E4=B8=80=E5=89=A7?=
 =?UTF-8?q?=E9=9B=86=E4=B8=8A=E4=BC=A0=E6=A0=BC=E5=BC=8F=E4=B8=8E=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E6=96=87=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/locales/en.ts                                   |  2 +-
 src/locales/zh-CN.ts                                |  2 +-
 .../contentManagement/EpisodeManagementView.vue     | 13 ++++++-------
 .../contentManagement/upload/BatchUploadDialog.vue  |  9 +++------
 src/views/contentManagement/upload/videoLimit.ts    |  6 ++++++
 5 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/locales/en.ts b/src/locales/en.ts
index ab44e71..8375904 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -537,7 +537,7 @@ export default {
     retry: 'Retry',
     retryAll: 'Retry all',
     remove: 'Remove',
-    hint: 'Supports MP4 / MOV / MKV / WEBM, max 500MB each; up to 2 files in parallel.',
+    hint: 'Supports MP4 / MOV / MKV / WEBM, max 500MB each; multi-select allowed, 2 upload in parallel, the rest queue automatically.',
     invalidType: 'Only MP4, MOV, MKV, WEBM are allowed',
     oversize: 'File exceeds 500MB and was not queued',
     overallProgress: 'Overall progress',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index a66b726..63286e2 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -531,7 +531,7 @@ export default {
     retry: '重试',
     retryAll: '全部重试',
     remove: '移除',
-    hint: '支持 MP4 / MOV / MKV / WEBM，单文件不超过 500MB；同时最多上传 2 个文件。',
+    hint: '支持 MP4 / MOV / MKV / WEBM，单文件不超过 500MB；可一次多选，同时上传 2 个，其余自动排队。',
     invalidType: '仅支持 MP4、MOV、MKV、WEBM',
     oversize: '文件超过 500MB，未入队',
     overallProgress: '总进度',
diff --git a/src/views/contentManagement/EpisodeManagementView.vue b/src/views/contentManagement/EpisodeManagementView.vue
index bc7f1f2..6c7eac7 100644
--- a/src/views/contentManagement/EpisodeManagementView.vue
+++ b/src/views/contentManagement/EpisodeManagementView.vue
@@ -20,7 +20,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { probeVideoDuration, uploadFile } from '@/utils/uploader'
 import BatchUploadDialog from './upload/BatchUploadDialog.vue'
 import { listPendingSessions } from './upload/uploadSessions'
-import { MAX_VIDEO_SIZE } from './upload/videoLimit'
+import { MAX_VIDEO_SIZE, VIDEO_ACCEPT_ATTR, VIDEO_EXTENSIONS } from './upload/videoLimit'
 
 const route = useRoute()
 const { can } = useRbac()
@@ -62,7 +62,6 @@ const statusOptions = [
   { code: 'offline', text: '已下线' }
 ]
 
-const VIDEO_EXTENSIONS = ['mp4', 'mov']
 const formRules = {
   number: [{ required: true, message: '请输入集号', trigger: 'change' }],
   title: [{ required: true, message: '请输入剧集标题', trigger: 'blur' }],
@@ -218,7 +217,7 @@ function beforeVideoUpload(file) {
     .pop()
     ?.toLowerCase()
   if (!VIDEO_EXTENSIONS.includes(extension)) {
-    videoError.value = '视频仅支持 MP4 或 MOV 格式'
+    videoError.value = t('episodeBatch.invalidType')
     return false
   }
   if (file.size > MAX_VIDEO_SIZE) {
@@ -556,7 +555,7 @@ onMounted(async () => {
                 drag
                 class="episode-video-empty-upload"
                 :show-file-list="false"
-                accept=".mp4,.mov"
+                :accept="VIDEO_ACCEPT_ATTR"
                 :before-upload="beforeVideoUpload"
                 :http-request="uploadVideo"
                 :disabled="uploadingVideo"
@@ -564,7 +563,7 @@ onMounted(async () => {
                 <div class="episode-video-empty-copy">
                   <AppIcon :icon="AppIcons.videoCameraFront" :size="30" />
                   <b>拖放或点击上传</b>
-                  <span>MP4、MOV</span>
+                  <span>MP4、MOV、MKV、WEBM</span>
                 </div>
               </el-upload>
               <div v-if="uploadingVideo" class="episode-video-upload-mask">
@@ -582,7 +581,7 @@ onMounted(async () => {
                   {{ videoDisplayName }}
                 </span>
               </div>
-              <p class="episode-video-hint">支持 MP4、MOV，单个文件不超过 500MB。</p>
+              <p class="episode-video-hint">{{ t('episodeBatch.hint') }}</p>
               <el-alert
                 v-if="videoError"
                 :title="videoError"
@@ -594,7 +593,7 @@ onMounted(async () => {
                 <el-upload
                   v-if="form.videoUrl"
                   :show-file-list="false"
-                  accept=".mp4,.mov"
+                  :accept="VIDEO_ACCEPT_ATTR"
                   :before-upload="beforeVideoUpload"
                   :http-request="uploadVideo"
                   :disabled="uploadingVideo"
diff --git a/src/views/contentManagement/upload/BatchUploadDialog.vue b/src/views/contentManagement/upload/BatchUploadDialog.vue
index 130be68..52e01f5 100644
--- a/src/views/contentManagement/upload/BatchUploadDialog.vue
+++ b/src/views/contentManagement/upload/BatchUploadDialog.vue
@@ -9,7 +9,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import CreateEpisodesDialog from './CreateEpisodesDialog.vue'
 import UploadTaskRow from './UploadTaskRow.vue'
 import { useUploadQueue } from './useUploadQueue'
-import { MAX_VIDEO_SIZE } from './videoLimit'
+import { MAX_VIDEO_SIZE, VIDEO_ACCEPT_ATTR, VIDEO_EXTENSIONS } from './videoLimit'
 import type { UploadSessionRecord } from './uploadSessions'
 
 const props = defineProps<{
@@ -28,9 +28,6 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
-const VIDEO_EXTENSIONS = ['mp4', 'mov', 'mkv', 'webm']
-const ACCEPT_ATTR = '.mp4,.mov,.mkv,.webm,video/*'
-
 const visible = computed({
   get: () => props.modelValue,
   set: (value: boolean) => emit('update:modelValue', value)
@@ -208,7 +205,7 @@ function onEpisodesCreated(): void {
       type="file"
       multiple
       hidden
-      :accept="ACCEPT_ATTR"
+      :accept="VIDEO_ACCEPT_ATTR"
       @change="onPickFiles"
     />
     <input
@@ -216,7 +213,7 @@ function onEpisodesCreated(): void {
       type="file"
       multiple
       hidden
-      :accept="ACCEPT_ATTR"
+      :accept="VIDEO_ACCEPT_ATTR"
       @change="onResumeFiles"
     />
 
diff --git a/src/views/contentManagement/upload/videoLimit.ts b/src/views/contentManagement/upload/videoLimit.ts
index a649d8a..4f66667 100644
--- a/src/views/contentManagement/upload/videoLimit.ts
+++ b/src/views/contentManagement/upload/videoLimit.ts
@@ -1,3 +1,9 @@
 // Author: fruit.com.cn
 /** 剧集视频大小上限，单文件上传与批量上传共用。 */
 export const MAX_VIDEO_SIZE = 500 * 1024 * 1024
+
+/** 允许的视频扩展名（小写，不含点），单文件与批量上传同源。 */
+export const VIDEO_EXTENSIONS: string[] = ['mp4', 'mov', 'mkv', 'webm']
+
+/** el-upload / input[type=file] 的 accept 属性，与 VIDEO_EXTENSIONS 保持一致。 */
+export const VIDEO_ACCEPT_ATTR = '.mp4,.mov,.mkv,.webm,video/*'

From cff864d5827474c4f9f83bc810bba32546ad18bf Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 22:07:04 +0800
Subject: [PATCH 37/59] =?UTF-8?q?refactor(admin):=20=E6=8B=86=E5=88=86?=
 =?UTF-8?q?=E5=89=A7=E9=9B=86=E7=AE=A1=E7=90=86=E9=A1=B5=E8=B6=85=E9=95=BF?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../EpisodeManagementView.vue                 | 402 +-----------------
 .../upload/EpisodeFormDialog.vue              | 280 ++++++++++++
 .../upload/EpisodeVideoUploader.vue           | 172 ++++++++
 3 files changed, 467 insertions(+), 387 deletions(-)
 create mode 100644 src/views/contentManagement/upload/EpisodeFormDialog.vue
 create mode 100644 src/views/contentManagement/upload/EpisodeVideoUploader.vue

diff --git a/src/views/contentManagement/EpisodeManagementView.vue b/src/views/contentManagement/EpisodeManagementView.vue
index 6c7eac7..bfb449d 100644
--- a/src/views/contentManagement/EpisodeManagementView.vue
+++ b/src/views/contentManagement/EpisodeManagementView.vue
@@ -1,26 +1,19 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
 import { pageDramasApi } from '@/api/admin/drama'
-import {
-  createEpisodeApi,
-  deleteEpisodeApi,
-  listEpisodesApi,
-  sortEpisodesApi,
-  updateEpisodeApi
-} from '@/api/admin/episode'
+import { deleteEpisodeApi, listEpisodesApi, sortEpisodesApi } from '@/api/admin/episode'
 import { useRbac } from '@/stores/rbac'
 import { formatCount } from '@/utils/format'
 import { statusClass } from '@/utils/status'
 import { useI18n } from '@/hooks/web/useI18n'
-import { probeVideoDuration, uploadFile } from '@/utils/uploader'
 import BatchUploadDialog from './upload/BatchUploadDialog.vue'
+import EpisodeFormDialog from './upload/EpisodeFormDialog.vue'
 import { listPendingSessions } from './upload/uploadSessions'
-import { MAX_VIDEO_SIZE, VIDEO_ACCEPT_ATTR, VIDEO_EXTENSIONS } from './upload/videoLimit'
 
 const route = useRoute()
 const { can } = useRbac()
@@ -30,71 +23,17 @@ const loading = ref(false)
 const dramas = ref([])
 const episodes = ref([])
 const selectedDramaId = ref(undefined)
-
-const dialogVisible = ref(false)
 const batchUploadVisible = ref(false)
-const batchNextNumber = computed(() => nextNumber())
-const saving = ref(false)
-const uploadingVideo = ref(false)
-const videoPercent = ref(0)
-const videoError = ref('')
-const videoFileName = ref('')
 const previewVisible = ref(false)
 const previewEpisode = ref(null)
-const editingId = ref(null)
-const editingCommentCount = ref(0)
-const formRef = ref()
-const form = reactive({
-  number: 1,
-  title: '',
-  durationSec: 0,
-  videoUrl: '',
-  isFree: true,
-  unlockCoin: 0,
-  likeCount: 0,
-  status: 'draft'
-})
-
-const statusOptions = [
-  { code: 'draft', text: '草稿' },
-  { code: 'approved', text: '待发布' },
-  { code: 'published', text: '已上线' },
-  { code: 'offline', text: '已下线' }
-]
-
-const formRules = {
-  number: [{ required: true, message: '请输入集号', trigger: 'change' }],
-  title: [{ required: true, message: '请输入剧集标题', trigger: 'blur' }],
-  videoUrl: [
-    {
-      validator: (_rule, value, callback) => {
-        if (form.status === 'published' && !value) {
-          callback(new Error('上线剧集必须上传视频'))
-        } else {
-          callback()
-        }
-      },
-      trigger: 'change'
-    }
-  ]
-}
+const formDialogRef = ref()
 
+const batchNextNumber = computed(() => nextNumber())
 const selectedDrama = computed(() => dramas.value.find((item) => item.id === selectedDramaId.value))
-const videoDisplayName = computed(
-  () => videoFileName.value || (form.videoUrl ? episodeBasename(form.videoUrl) : '尚未选择视频')
+const existingEpisodeNumbers = computed(() =>
+  episodes.value.map((item) => Number(item.number)).filter((n) => Number.isFinite(n))
 )
 
-function episodeBasename(path) {
-  if (!path) return ''
-  const clean = path.split('?')[0].split('#')[0]
-  return decodeURIComponent(clean.split('/').pop() || clean)
-}
-
-async function resetValidation() {
-  await nextTick()
-  formRef.value?.clearValidate()
-}
-
 async function loadDramas() {
   const res = await pageDramasApi({ pageIndex: 1, pageSize: 200 })
   dramas.value = res.data?.list || []
@@ -125,10 +64,6 @@ function nextNumber() {
   return episodes.value.reduce((max, item) => Math.max(max, item.number || 0), 0) + 1
 }
 
-const existingEpisodeNumbers = computed(() =>
-  episodes.value.map((item) => Number(item.number)).filter((n) => Number.isFinite(n))
-)
-
 function openBatchUpload() {
   if (!selectedDramaId.value) return
   batchUploadVisible.value = true
@@ -139,132 +74,11 @@ async function onBatchEpisodesCreated() {
 }
 
 function openCreate() {
-  editingId.value = null
-  Object.assign(form, {
-    number: nextNumber(),
-    title: '',
-    durationSec: 0,
-    videoUrl: '',
-    isFree: true,
-    unlockCoin: selectedDrama.value?.unlockCoin ?? 0,
-    likeCount: 0,
-    status: 'draft'
-  })
-  videoFileName.value = ''
-  videoError.value = ''
-  editingCommentCount.value = 0
-  dialogVisible.value = true
-  resetValidation()
+  formDialogRef.value?.openCreate()
 }
 
 function openEdit(row) {
-  editingId.value = row.id
-  Object.assign(form, {
-    number: row.number,
-    title: row.title,
-    durationSec: row.durationSec || 0,
-    videoUrl: row.videoUrl || '',
-    isFree: !!row.isFree,
-    unlockCoin: row.unlockCoin || 0,
-    likeCount: row.likeCount ?? 0,
-    status: row.status
-  })
-  videoFileName.value = row.videoUrl ? episodeBasename(row.videoUrl) : ''
-  videoError.value = ''
-  editingCommentCount.value = row.commentCount ?? 0
-  dialogVisible.value = true
-  resetValidation()
-}
-
-async function saveEpisode() {
-  if (saving.value || uploadingVideo.value) return
-  try {
-    await formRef.value?.validate()
-  } catch {
-    return
-  }
-  const payload = {
-    dramaId: selectedDramaId.value,
-    number: form.number,
-    title: form.title.trim(),
-    durationSec: form.durationSec || 0,
-    videoUrl: form.videoUrl.trim(),
-    isFree: form.isFree,
-    unlockCoin: form.isFree ? 0 : form.unlockCoin || 0,
-    likeCount: form.likeCount,
-    status: form.status
-  }
-  saving.value = true
-  try {
-    if (editingId.value) {
-      await updateEpisodeApi(editingId.value, payload)
-      ElMessage.success('剧集已更新')
-    } else {
-      await createEpisodeApi(payload)
-      ElMessage.success('剧集已创建')
-    }
-    dialogVisible.value = false
-    await loadEpisodes()
-  } finally {
-    saving.value = false
-  }
-}
-
-function beforeVideoUpload(file) {
-  videoError.value = ''
-  const extension = String(file.name || '')
-    .split('.')
-    .pop()
-    ?.toLowerCase()
-  if (!VIDEO_EXTENSIONS.includes(extension)) {
-    videoError.value = t('episodeBatch.invalidType')
-    return false
-  }
-  if (file.size > MAX_VIDEO_SIZE) {
-    videoError.value = '视频大小不能超过 500MB'
-    return false
-  }
-  return true
-}
-
-/** 视频分片上传：先探测时长，再交给上传器，完成后回填地址与时长。 */
-async function uploadVideo(options) {
-  uploadingVideo.value = true
-  videoPercent.value = 0
-  videoError.value = ''
-  try {
-    const duration = await probeVideoDuration(options.file)
-    const asset = await uploadFile(options.file, {
-      bizType: 'EPISODE',
-      durationSec: duration,
-      onProgress: (percent) => (videoPercent.value = percent)
-    })
-    form.videoUrl = asset.url
-    videoFileName.value = options.file.name
-    if (duration > 0) form.durationSec = duration
-    await resetValidation()
-    ElMessage.success('视频已上传')
-  } catch {
-    videoError.value = '视频上传失败，请检查网络后重试'
-  } finally {
-    uploadingVideo.value = false
-  }
-}
-
-function removeVideo() {
-  if (uploadingVideo.value) return
-  form.videoUrl = ''
-  videoFileName.value = ''
-  videoError.value = ''
-  resetValidation()
-}
-
-function beforeDialogClose(done) {
-  if (saving.value || uploadingVideo.value) {
-    ElMessage.warning(saving.value ? '正在保存，请稍候' : '视频正在上传，请稍候')
-    return
-  }
-  done()
+  formDialogRef.value?.openEdit(row)
 }
 
 async function confirmDelete(row) {
@@ -496,198 +310,12 @@ onMounted(async () => {
       >
     </el-table>
   </section>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="editingId ? '编辑剧集' : '新增剧集'"
-    width="680px"
-    class="episode-editor-dialog"
-    :close-on-click-modal="false"
-    :before-close="beforeDialogClose"
-  >
-    <el-form
-      ref="formRef"
-      :model="form"
-      :rules="formRules"
-      label-position="top"
-      class="episode-editor-form"
-    >
-      <section class="episode-editor-section">
-        <h3 class="episode-editor-section-title">基础信息</h3>
-        <div class="episode-editor-grid episode-editor-grid--two">
-          <el-form-item label="集号" prop="number">
-            <el-input-number
-              v-model="form.number"
-              class="episode-editor-number"
-              controls-position="right"
-              :min="1"
-              :max="999"
-            />
-          </el-form-item>
-          <el-form-item label="时长（秒）">
-            <el-input-number
-              v-model="form.durationSec"
-              class="episode-editor-number"
-              controls-position="right"
-              :min="0"
-              :max="9999"
-            />
-          </el-form-item>
-        </div>
-        <el-form-item label="剧集标题" prop="title">
-          <el-input v-model="form.title" maxlength="100" placeholder="例如：命运的相遇" />
-        </el-form-item>
-      </section>
-
-      <section class="episode-editor-section">
-        <h3 class="episode-editor-section-title">视频文件</h3>
-        <el-form-item prop="videoUrl">
-          <div class="episode-video-editor">
-            <div class="episode-video-preview-card">
-              <video
-                v-if="form.videoUrl"
-                :src="form.videoUrl"
-                controls
-                preload="metadata"
-                class="episode-editor-video"
-              ></video>
-              <el-upload
-                v-else
-                drag
-                class="episode-video-empty-upload"
-                :show-file-list="false"
-                :accept="VIDEO_ACCEPT_ATTR"
-                :before-upload="beforeVideoUpload"
-                :http-request="uploadVideo"
-                :disabled="uploadingVideo"
-              >
-                <div class="episode-video-empty-copy">
-                  <AppIcon :icon="AppIcons.videoCameraFront" :size="30" />
-                  <b>拖放或点击上传</b>
-                  <span>MP4、MOV、MKV、WEBM</span>
-                </div>
-              </el-upload>
-              <div v-if="uploadingVideo" class="episode-video-upload-mask">
-                <span>上传中</span>
-                <b>{{ videoPercent }}%</b>
-              </div>
-            </div>
-
-            <div class="episode-video-meta">
-              <div class="episode-video-status">
-                <el-tag :type="form.videoUrl ? 'success' : 'info'" effect="light">
-                  {{ form.videoUrl ? '已上传' : '未上传' }}
-                </el-tag>
-                <span class="episode-video-filename" :title="videoDisplayName">
-                  {{ videoDisplayName }}
-                </span>
-              </div>
-              <p class="episode-video-hint">{{ t('episodeBatch.hint') }}</p>
-              <el-alert
-                v-if="videoError"
-                :title="videoError"
-                type="error"
-                :closable="false"
-                show-icon
-              />
-              <div class="episode-video-actions">
-                <el-upload
-                  v-if="form.videoUrl"
-                  :show-file-list="false"
-                  :accept="VIDEO_ACCEPT_ATTR"
-                  :before-upload="beforeVideoUpload"
-                  :http-request="uploadVideo"
-                  :disabled="uploadingVideo"
-                >
-                  <el-button :loading="uploadingVideo" :disabled="uploadingVideo">
-                    <AppIcon :icon="AppIcons.upload" />
-                    更换视频
-                  </el-button>
-                </el-upload>
-                <el-button
-                  v-if="form.videoUrl"
-                  type="danger"
-                  :disabled="uploadingVideo"
-                  @click="removeVideo"
-                >
-                  移除
-                </el-button>
-                <a
-                  v-if="form.videoUrl"
-                  class="episode-video-link"
-                  :href="form.videoUrl"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  查看视频
-                </a>
-              </div>
-            </div>
-          </div>
-        </el-form-item>
-      </section>
-
-      <section class="episode-editor-section">
-        <h3 class="episode-editor-section-title">互动数据</h3>
-        <div class="episode-editor-grid episode-editor-grid--two">
-          <el-form-item label="本集点赞数">
-            <el-input-number
-              v-model="form.likeCount"
-              class="episode-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>
-
-      <section class="episode-editor-section">
-        <h3 class="episode-editor-section-title">付费与状态</h3>
-        <div class="episode-editor-grid episode-editor-grid--three">
-          <el-form-item label="是否免费">
-            <el-switch v-model="form.isFree" />
-          </el-form-item>
-          <el-form-item v-show="!form.isFree" label="解锁金币">
-            <el-input-number
-              v-model="form.unlockCoin"
-              class="episode-editor-number"
-              controls-position="right"
-              :min="0"
-              :max="9999"
-            />
-          </el-form-item>
-          <el-form-item label="状态">
-            <el-select v-model="form.status">
-              <el-option
-                v-for="item in statusOptions"
-                :key="item.code"
-                :label="item.text"
-                :value="item.code"
-              />
-            </el-select>
-          </el-form-item>
-        </div>
-      </section>
-    </el-form>
-
-    <template #footer>
-      <el-button :disabled="saving || uploadingVideo" @click="dialogVisible = false">
-        取消
-      </el-button>
-      <el-button
-        type="primary"
-        :loading="saving"
-        :disabled="saving || uploadingVideo"
-        @click="saveEpisode"
-      >
-        保存
-      </el-button>
-    </template>
-  </el-dialog>
+  <EpisodeFormDialog
+    ref="formDialogRef"
+    :drama-options="selectedDrama"
+    :next-number="batchNextNumber"
+    @saved="loadEpisodes"
+  />
   <el-dialog
     v-model="previewVisible"
     :title="`预览：第 ${previewEpisode?.number ?? ''} 集 ${previewEpisode?.title ?? ''}`"
diff --git a/src/views/contentManagement/upload/EpisodeFormDialog.vue b/src/views/contentManagement/upload/EpisodeFormDialog.vue
new file mode 100644
index 0000000..836927a
--- /dev/null
+++ b/src/views/contentManagement/upload/EpisodeFormDialog.vue
@@ -0,0 +1,280 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集新建/编辑弹窗：表单校验、单集视频上传与保存 -->
+
+<script setup>
+import { nextTick, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { createEpisodeApi, updateEpisodeApi } from '@/api/admin/episode'
+import { formatCount } from '@/utils/format'
+import EpisodeVideoUploader from './EpisodeVideoUploader.vue'
+
+const props = defineProps({
+  dramaOptions: { type: Object, default: null },
+  nextNumber: { type: Number, default: 1 },
+  row: { type: Object, default: null }
+})
+
+const emit = defineEmits(['saved'])
+
+const dialogVisible = ref(false)
+const saving = ref(false)
+const uploadingVideo = ref(false)
+const videoFileName = ref('')
+const editingId = ref(null)
+const editingCommentCount = ref(0)
+const formRef = ref()
+const uploaderRef = ref()
+
+const form = reactive({
+  number: 1,
+  title: '',
+  durationSec: 0,
+  videoUrl: '',
+  isFree: true,
+  unlockCoin: 0,
+  likeCount: 0,
+  status: 'draft'
+})
+
+const statusOptions = [
+  { code: 'draft', text: '草稿' },
+  { code: 'approved', text: '待发布' },
+  { code: 'published', text: '已上线' },
+  { code: 'offline', text: '已下线' }
+]
+
+const formRules = {
+  number: [{ required: true, message: '请输入集号', trigger: 'change' }],
+  title: [{ required: true, message: '请输入剧集标题', trigger: 'blur' }],
+  videoUrl: [
+    {
+      validator: (_rule, value, callback) => {
+        if (form.status === 'published' && !value) {
+          callback(new Error('上线剧集必须上传视频'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'change'
+    }
+  ]
+}
+
+function episodeBasename(path) {
+  if (!path) return ''
+  const clean = path.split('?')[0].split('#')[0]
+  return decodeURIComponent(clean.split('/').pop() || clean)
+}
+
+async function resetValidation() {
+  await nextTick()
+  formRef.value?.clearValidate()
+}
+
+function openCreate() {
+  editingId.value = null
+  Object.assign(form, {
+    number: props.nextNumber,
+    title: '',
+    durationSec: 0,
+    videoUrl: '',
+    isFree: true,
+    unlockCoin: props.dramaOptions?.unlockCoin ?? 0,
+    likeCount: 0,
+    status: 'draft'
+  })
+  videoFileName.value = ''
+  uploaderRef.value?.clearError()
+  editingCommentCount.value = 0
+  dialogVisible.value = true
+  resetValidation()
+}
+
+function openEdit(row) {
+  const target = row || props.row
+  if (!target) return
+  editingId.value = target.id
+  Object.assign(form, {
+    number: target.number,
+    title: target.title,
+    durationSec: target.durationSec || 0,
+    videoUrl: target.videoUrl || '',
+    isFree: !!target.isFree,
+    unlockCoin: target.unlockCoin || 0,
+    likeCount: target.likeCount ?? 0,
+    status: target.status
+  })
+  videoFileName.value = target.videoUrl ? episodeBasename(target.videoUrl) : ''
+  uploaderRef.value?.clearError()
+  editingCommentCount.value = target.commentCount ?? 0
+  dialogVisible.value = true
+  resetValidation()
+}
+
+async function saveEpisode() {
+  if (saving.value || uploadingVideo.value) return
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
+  }
+  const dramaId = props.dramaOptions?.id
+  if (!dramaId) return
+  const payload = {
+    dramaId,
+    number: form.number,
+    title: form.title.trim(),
+    durationSec: form.durationSec || 0,
+    videoUrl: form.videoUrl.trim(),
+    isFree: form.isFree,
+    unlockCoin: form.isFree ? 0 : form.unlockCoin || 0,
+    likeCount: form.likeCount,
+    status: form.status
+  }
+  saving.value = true
+  try {
+    if (editingId.value) {
+      await updateEpisodeApi(editingId.value, payload)
+      ElMessage.success('剧集已更新')
+    } else {
+      await createEpisodeApi(payload)
+      ElMessage.success('剧集已创建')
+    }
+    dialogVisible.value = false
+    emit('saved')
+  } finally {
+    saving.value = false
+  }
+}
+
+function beforeDialogClose(done) {
+  if (saving.value || uploadingVideo.value) {
+    ElMessage.warning(saving.value ? '正在保存，请稍候' : '视频正在上传，请稍候')
+    return
+  }
+  done()
+}
+
+defineExpose({ openCreate, openEdit })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="editingId ? '编辑剧集' : '新增剧集'"
+    width="680px"
+    class="episode-editor-dialog"
+    :close-on-click-modal="false"
+    :before-close="beforeDialogClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="formRules"
+      label-position="top"
+      class="episode-editor-form"
+    >
+      <section class="episode-editor-section">
+        <h3 class="episode-editor-section-title">基础信息</h3>
+        <div class="episode-editor-grid episode-editor-grid--two">
+          <el-form-item label="集号" prop="number">
+            <el-input-number
+              v-model="form.number"
+              class="episode-editor-number"
+              controls-position="right"
+              :min="1"
+              :max="999"
+            />
+          </el-form-item>
+          <el-form-item label="时长（秒）">
+            <el-input-number
+              v-model="form.durationSec"
+              class="episode-editor-number"
+              controls-position="right"
+              :min="0"
+              :max="9999"
+            />
+          </el-form-item>
+        </div>
+        <el-form-item label="剧集标题" prop="title">
+          <el-input v-model="form.title" maxlength="100" placeholder="例如：命运的相遇" />
+        </el-form-item>
+      </section>
+
+      <section class="episode-editor-section">
+        <h3 class="episode-editor-section-title">视频文件</h3>
+        <el-form-item prop="videoUrl">
+          <EpisodeVideoUploader
+            ref="uploaderRef"
+            v-model:video-url="form.videoUrl"
+            v-model:duration-sec="form.durationSec"
+            v-model:file-name="videoFileName"
+            v-model:uploading="uploadingVideo"
+            @change="resetValidation"
+          />
+        </el-form-item>
+      </section>
+
+      <section class="episode-editor-section">
+        <h3 class="episode-editor-section-title">互动数据</h3>
+        <div class="episode-editor-grid episode-editor-grid--two">
+          <el-form-item label="本集点赞数">
+            <el-input-number
+              v-model="form.likeCount"
+              class="episode-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>
+
+      <section class="episode-editor-section">
+        <h3 class="episode-editor-section-title">付费与状态</h3>
+        <div class="episode-editor-grid episode-editor-grid--three">
+          <el-form-item label="是否免费">
+            <el-switch v-model="form.isFree" />
+          </el-form-item>
+          <el-form-item v-show="!form.isFree" label="解锁金币">
+            <el-input-number
+              v-model="form.unlockCoin"
+              class="episode-editor-number"
+              controls-position="right"
+              :min="0"
+              :max="9999"
+            />
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="form.status">
+              <el-option
+                v-for="item in statusOptions"
+                :key="item.code"
+                :label="item.text"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+        </div>
+      </section>
+    </el-form>
+
+    <template #footer>
+      <el-button :disabled="saving || uploadingVideo" @click="dialogVisible = false">
+        取消
+      </el-button>
+      <el-button
+        type="primary"
+        :loading="saving"
+        :disabled="saving || uploadingVideo"
+        @click="saveEpisode"
+      >
+        保存
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/contentManagement/upload/EpisodeVideoUploader.vue b/src/views/contentManagement/upload/EpisodeVideoUploader.vue
new file mode 100644
index 0000000..d3bcc6b
--- /dev/null
+++ b/src/views/contentManagement/upload/EpisodeVideoUploader.vue
@@ -0,0 +1,172 @@
+<!-- Author: fruit.com.cn -->
+<!-- 单集视频上传：格式/大小校验、分片上传、预览与移除 -->
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { AppIcons } from '@/constants/icons'
+import { useI18n } from '@/hooks/web/useI18n'
+import { probeVideoDuration, uploadFile } from '@/utils/uploader'
+import { MAX_VIDEO_SIZE, VIDEO_ACCEPT_ATTR, VIDEO_EXTENSIONS } from './videoLimit'
+
+const props = defineProps({
+  videoUrl: { type: String, default: '' },
+  durationSec: { type: Number, default: 0 },
+  fileName: { type: String, default: '' }
+})
+
+const emit = defineEmits([
+  'update:videoUrl',
+  'update:durationSec',
+  'update:fileName',
+  'update:uploading',
+  'change'
+])
+
+const { t } = useI18n()
+
+const uploadingVideo = ref(false)
+const videoPercent = ref(0)
+const videoError = ref('')
+
+const videoDisplayName = computed(
+  () => props.fileName || (props.videoUrl ? episodeBasename(props.videoUrl) : '尚未选择视频')
+)
+
+watch(uploadingVideo, (value) => emit('update:uploading', value))
+
+function episodeBasename(path) {
+  if (!path) return ''
+  const clean = path.split('?')[0].split('#')[0]
+  return decodeURIComponent(clean.split('/').pop() || clean)
+}
+
+function clearError() {
+  videoError.value = ''
+}
+
+function beforeVideoUpload(file) {
+  videoError.value = ''
+  const extension = String(file.name || '')
+    .split('.')
+    .pop()
+    ?.toLowerCase()
+  if (!VIDEO_EXTENSIONS.includes(extension)) {
+    videoError.value = t('episodeBatch.invalidType')
+    return false
+  }
+  if (file.size > MAX_VIDEO_SIZE) {
+    videoError.value = '视频大小不能超过 500MB'
+    return false
+  }
+  return true
+}
+
+/** 视频分片上传：先探测时长，再交给上传器，完成后回填地址与时长。 */
+async function uploadVideo(options) {
+  uploadingVideo.value = true
+  videoPercent.value = 0
+  videoError.value = ''
+  try {
+    const duration = await probeVideoDuration(options.file)
+    const asset = await uploadFile(options.file, {
+      bizType: 'EPISODE',
+      durationSec: duration,
+      onProgress: (percent) => (videoPercent.value = percent)
+    })
+    emit('update:videoUrl', asset.url)
+    emit('update:fileName', options.file.name)
+    if (duration > 0) emit('update:durationSec', duration)
+    emit('change')
+    ElMessage.success('视频已上传')
+  } catch {
+    videoError.value = '视频上传失败，请检查网络后重试'
+  } finally {
+    uploadingVideo.value = false
+  }
+}
+
+function removeVideo() {
+  if (uploadingVideo.value) return
+  emit('update:videoUrl', '')
+  emit('update:fileName', '')
+  videoError.value = ''
+  emit('change')
+}
+
+defineExpose({ clearError, uploadingVideo })
+</script>
+
+<template>
+  <div class="episode-video-editor">
+    <div class="episode-video-preview-card">
+      <video
+        v-if="videoUrl"
+        :src="videoUrl"
+        controls
+        preload="metadata"
+        class="episode-editor-video"
+      ></video>
+      <el-upload
+        v-else
+        drag
+        class="episode-video-empty-upload"
+        :show-file-list="false"
+        :accept="VIDEO_ACCEPT_ATTR"
+        :before-upload="beforeVideoUpload"
+        :http-request="uploadVideo"
+        :disabled="uploadingVideo"
+      >
+        <div class="episode-video-empty-copy">
+          <AppIcon :icon="AppIcons.videoCameraFront" :size="30" />
+          <b>拖放或点击上传</b>
+          <span>MP4、MOV、MKV、WEBM</span>
+        </div>
+      </el-upload>
+      <div v-if="uploadingVideo" class="episode-video-upload-mask">
+        <span>上传中</span>
+        <b>{{ videoPercent }}%</b>
+      </div>
+    </div>
+
+    <div class="episode-video-meta">
+      <div class="episode-video-status">
+        <el-tag :type="videoUrl ? 'success' : 'info'" effect="light">
+          {{ videoUrl ? '已上传' : '未上传' }}
+        </el-tag>
+        <span class="episode-video-filename" :title="videoDisplayName">
+          {{ videoDisplayName }}
+        </span>
+      </div>
+      <p class="episode-video-hint">{{ t('episodeBatch.hint') }}</p>
+      <el-alert v-if="videoError" :title="videoError" type="error" :closable="false" show-icon />
+      <div class="episode-video-actions">
+        <el-upload
+          v-if="videoUrl"
+          :show-file-list="false"
+          :accept="VIDEO_ACCEPT_ATTR"
+          :before-upload="beforeVideoUpload"
+          :http-request="uploadVideo"
+          :disabled="uploadingVideo"
+        >
+          <el-button :loading="uploadingVideo" :disabled="uploadingVideo">
+            <AppIcon :icon="AppIcons.upload" />
+            更换视频
+          </el-button>
+        </el-upload>
+        <el-button v-if="videoUrl" type="danger" :disabled="uploadingVideo" @click="removeVideo">
+          移除
+        </el-button>
+        <a
+          v-if="videoUrl"
+          class="episode-video-link"
+          :href="videoUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          查看视频
+        </a>
+      </div>
+    </div>
+  </div>
+</template>

From 4841b0bc24f08720886e0c6ce0e132df6350fe71 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 22:08:47 +0800
Subject: [PATCH 38/59] =?UTF-8?q?fix(admin):=20=E7=A7=BB=E9=99=A4=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E6=8F=90=E7=A4=BA=E4=B8=AD=E7=9A=84=E5=B9=B6=E5=8F=91?=
 =?UTF-8?q?=E8=A1=A8=E8=BF=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

上传为异步队列，文件数量不设上限，提示只保留格式与单文件大小限制
---
 src/locales/en.ts    | 2 +-
 src/locales/zh-CN.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/locales/en.ts b/src/locales/en.ts
index 8375904..d6067d4 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -537,7 +537,7 @@ export default {
     retry: 'Retry',
     retryAll: 'Retry all',
     remove: 'Remove',
-    hint: 'Supports MP4 / MOV / MKV / WEBM, max 500MB each; multi-select allowed, 2 upload in parallel, the rest queue automatically.',
+    hint: 'Supports MP4 / MOV / MKV / WEBM, max 500MB each',
     invalidType: 'Only MP4, MOV, MKV, WEBM are allowed',
     oversize: 'File exceeds 500MB and was not queued',
     overallProgress: 'Overall progress',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 63286e2..07c068d 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -531,7 +531,7 @@ export default {
     retry: '重试',
     retryAll: '全部重试',
     remove: '移除',
-    hint: '支持 MP4 / MOV / MKV / WEBM，单文件不超过 500MB；可一次多选，同时上传 2 个，其余自动排队。',
+    hint: '支持 MP4 / MOV / MKV / WEBM，单文件不超过 500MB',
     invalidType: '仅支持 MP4、MOV、MKV、WEBM',
     oversize: '文件超过 500MB，未入队',
     overallProgress: '总进度',

From 836600b8115375b60138a3ce4bbe812b372be040 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 22:10:35 +0800
Subject: [PATCH 39/59] =?UTF-8?q?chore(build):=20commit-msg=20=E6=8B=A6?=
 =?UTF-8?q?=E6=88=AA=20AI=20=E7=BD=B2=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .husky/commit-msg | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.husky/commit-msg b/.husky/commit-msg
index 10cb551..ae34e3a 100755
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -1,4 +1,9 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
+if grep -qiE "(co-authored-by|generated with|assisted by).*(cursor|claude|codex|gpt|copilot|ai)" "$1"; then
+  echo "commit message contains AI attribution, remove it before committing" >&2
+  exit 1
+fi
+
 pnpm commitlint --edit "$1"

From 5741ebbf17ada566ac3e5d9ac962ce6a9a910793 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 22:20:10 +0800
Subject: [PATCH 40/59] =?UTF-8?q?fix(admin):=20=E7=AE=80=E5=8C=96=E6=89=B9?=
 =?UTF-8?q?=E9=87=8F=E5=BB=BA=E5=88=86=E9=9B=86=E8=A1=A8=E5=8D=95=E5=B9=B6?=
 =?UTF-8?q?=E5=B0=86=E7=A7=BB=E9=99=A4=E6=93=8D=E4=BD=9C=E7=BD=AE=E5=8F=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/en.ts                             |  6 +-
 src/locales/zh-CN.ts                          |  5 +-
 .../upload/CreateEpisodesDialog.vue           | 97 +++++++++----------
 .../upload/UploadTaskRow.vue                  |  2 +
 4 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/src/locales/en.ts b/src/locales/en.ts
index d6067d4..c15626d 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -554,19 +554,19 @@ export default {
     resumeMatched: 'Matched {count} file(s) and resumed',
     resumeUnmatched: '{count} session(s) could not match local files; pick again manually',
     createTitle: 'Create episodes in batch',
+    createHint:
+      'Title uses the video file name; episode numbers are assigned automatically. You can edit them later in episode settings.',
     colSource: 'Source file',
     colNumber: 'Episode No.',
     colTitle: 'Title',
     colFree: 'Free',
     colResult: 'Result',
-    numberConflict: 'Episode number conflict',
     missingVideo: 'Missing video URL',
     createOk: 'Created',
     createFailed: 'Create failed',
     createAllSuccess: 'All episodes created',
     createPartial: 'Some episodes failed; you can retry',
-    fixConflict: 'Resolve episode number conflicts first',
-    submitCreate: 'Submit',
+    submitCreate: 'Create',
     retryFailed: 'Retry failed',
     status: {
       waiting: 'Waiting',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 07c068d..023a84f 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -546,19 +546,18 @@ export default {
     resumeMatched: '已匹配 {count} 个文件并开始续传',
     resumeUnmatched: '有 {count} 个会话无法匹配本地文件，请手动重选',
     createTitle: '批量创建分集',
+    createHint: '标题取视频文件名，集号自动顺延分配，创建后可在分集编辑中修改',
     colSource: '源文件',
     colNumber: '集号',
     colTitle: '标题',
     colFree: '免费',
     colResult: '结果',
-    numberConflict: '集号冲突',
     missingVideo: '缺少视频地址',
     createOk: '已创建',
     createFailed: '创建失败',
     createAllSuccess: '全部分集已创建',
     createPartial: '部分分集创建失败，可重试',
-    fixConflict: '请先解决集号冲突',
-    submitCreate: '提交创建',
+    submitCreate: '创建',
     retryFailed: '重试失败项',
     status: {
       waiting: '等待中',
diff --git a/src/views/contentManagement/upload/CreateEpisodesDialog.vue b/src/views/contentManagement/upload/CreateEpisodesDialog.vue
index 13b771e..31683bf 100644
--- a/src/views/contentManagement/upload/CreateEpisodesDialog.vue
+++ b/src/views/contentManagement/upload/CreateEpisodesDialog.vue
@@ -1,5 +1,5 @@
 <!-- Author: fruit.com.cn -->
-<!-- 批量创建分集：自然排序预填集号与标题，冲突标红，失败可重试 -->
+<!-- 批量创建分集确认清单：标题取文件名，集号自动顺延，失败可重试 -->
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
@@ -51,22 +51,37 @@ function compareNatural(left: string, right: string): number {
   return left.localeCompare(right, undefined, { numeric: true, sensitivity: 'base' })
 }
 
+/** 从起点起跳过已占用集号，返回下一个可用值。 */
+function nextFreeNumber(start: number, used: Set<number>): number {
+  let candidate = start
+  while (used.has(candidate)) {
+    candidate += 1
+  }
+  return candidate
+}
+
 function buildRows(): void {
   const sorted = [...props.doneItems].sort((left, right) =>
     compareNatural(baseName(left.fileName), baseName(right.fileName))
   )
-  let number = props.nextEpisodeNumber
-  rows.value = sorted.map((item) => ({
-    key: item.id,
-    sourceName: item.fileName,
-    number: number++,
-    title: baseName(item.fileName),
-    isFree: true,
-    videoUrl: item.url || '',
-    durationSec: item.durationSec || 0,
-    saved: false,
-    error: ''
-  }))
+  const used = new Set(props.existingNumbers)
+  let cursor = props.nextEpisodeNumber
+  rows.value = sorted.map((item) => {
+    const number = nextFreeNumber(cursor, used)
+    used.add(number)
+    cursor = number + 1
+    return {
+      key: item.id,
+      sourceName: item.fileName,
+      number,
+      title: baseName(item.fileName),
+      isFree: true,
+      videoUrl: item.url || '',
+      durationSec: item.durationSec || 0,
+      saved: false,
+      error: ''
+    }
+  })
 }
 
 watch(
@@ -76,12 +91,6 @@ watch(
   }
 )
 
-function conflictOf(row: EpisodeDraft): boolean {
-  if (row.saved) return false
-  const duplicated = rows.value.filter((item) => item.number === row.number).length > 1
-  return duplicated || props.existingNumbers.includes(Number(row.number))
-}
-
 function errorText(error: unknown): string {
   if (error instanceof Error && error.message) return error.message
   return t('episodeBatch.createFailed')
@@ -96,7 +105,7 @@ async function createOne(row: EpisodeDraft): Promise<void> {
     await createEpisodeApi({
       dramaId: props.dramaId as unknown as number,
       number: row.number,
-      title: row.title.trim(),
+      title: baseName(row.sourceName),
       durationSec: row.durationSec,
       videoUrl: row.videoUrl,
       isFree: row.isFree,
@@ -112,10 +121,6 @@ async function createOne(row: EpisodeDraft): Promise<void> {
 
 async function submit(): Promise<void> {
   if (submitting.value) return
-  if (rows.value.some((row) => conflictOf(row))) {
-    ElMessage.warning(t('episodeBatch.fixConflict'))
-    return
-  }
   submitting.value = true
   try {
     for (const row of rows.value) {
@@ -150,6 +155,7 @@ function hasFailed(): boolean {
     :close-on-click-modal="false"
     @update:model-value="emit('update:modelValue', $event)"
   >
+    <p class="create-episode-hint">{{ t('episodeBatch.createHint') }}</p>
     <div class="create-episode-head">
       <span>{{ t('episodeBatch.colSource') }}</span>
       <span>{{ t('episodeBatch.colNumber') }}</span>
@@ -162,24 +168,14 @@ function hasFailed(): boolean {
         v-for="row in rows"
         :key="row.key"
         class="create-episode-row"
-        :class="{ 'is-conflict': conflictOf(row), 'is-saved': row.saved }"
+        :class="{ 'is-saved': row.saved }"
       >
         <b class="create-episode-source" :title="row.sourceName">{{ row.sourceName }}</b>
-        <el-input-number
-          v-model="row.number"
-          :min="1"
-          :max="999"
-          :disabled="row.saved"
-          controls-position="right"
-        />
-        <el-input v-model="row.title" maxlength="100" :disabled="row.saved" />
+        <span class="create-episode-number">{{ row.number }}</span>
+        <span class="create-episode-title" :title="row.title">{{ row.title }}</span>
         <el-switch v-model="row.isFree" :disabled="row.saved" />
         <span class="create-episode-result">
-          {{
-            row.saved
-              ? t('episodeBatch.createOk')
-              : row.error || (conflictOf(row) ? t('episodeBatch.numberConflict') : '')
-          }}
+          {{ row.saved ? t('episodeBatch.createOk') : row.error }}
         </span>
       </div>
     </div>
@@ -193,10 +189,17 @@ function hasFailed(): boolean {
 </template>
 
 <style scoped>
+.create-episode-hint {
+  margin: 0 0 12px;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
 .create-episode-head,
 .create-episode-row {
   display: grid;
-  grid-template-columns: minmax(120px, 1.2fr) 120px minmax(140px, 1.4fr) 48px minmax(80px, 0.8fr);
+  grid-template-columns: minmax(120px, 1.2fr) 72px minmax(140px, 1.4fr) 48px minmax(80px, 0.8fr);
   gap: 8px;
   align-items: center;
 }
@@ -215,26 +218,22 @@ function hasFailed(): boolean {
   overflow: auto;
 }
 
-.create-episode-source {
+.create-episode-source,
+.create-episode-title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.create-episode-number {
+  font-variant-numeric: tabular-nums;
+}
+
 .create-episode-result {
   color: var(--el-text-color-secondary);
   font-size: 12px;
 }
 
-.create-episode-row.is-conflict :deep(.el-input-number) {
-  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
-  border-radius: 4px;
-}
-
-.create-episode-row.is-conflict .create-episode-result {
-  color: var(--el-color-danger);
-}
-
 .create-episode-row.is-saved .create-episode-result {
   color: var(--el-color-success);
 }
diff --git a/src/views/contentManagement/upload/UploadTaskRow.vue b/src/views/contentManagement/upload/UploadTaskRow.vue
index 24033d8..0fac16f 100644
--- a/src/views/contentManagement/upload/UploadTaskRow.vue
+++ b/src/views/contentManagement/upload/UploadTaskRow.vue
@@ -108,6 +108,8 @@ const canRemove = computed(
   margin-top: 8px;
   display: flex;
   gap: 8px;
+  justify-content: flex-end;
+  margin-left: auto;
 }
 
 .upload-task-row.is-failed {

From 05b977cc33aa823981f580800c884779ec33bd75 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 22:25:50 +0800
Subject: [PATCH 41/59] =?UTF-8?q?fix(admin):=20=E6=89=B9=E9=87=8F=E5=BB=BA?=
 =?UTF-8?q?=E5=88=86=E9=9B=86=E6=98=AF=E5=90=A6=E5=85=8D=E8=B4=B9=E6=94=B9?=
 =?UTF-8?q?=E7=94=B1=E7=9F=AD=E5=89=A7=E5=85=8D=E8=B4=B9=E9=9B=86=E6=95=B0?=
 =?UTF-8?q?=E5=86=B3=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/en.ts                             |  6 ++-
 src/locales/zh-CN.ts                          |  7 ++-
 .../EpisodeManagementView.vue                 |  1 +
 .../upload/BatchUploadDialog.vue              | 22 ++++++---
 .../upload/CreateEpisodesDialog.vue           | 45 ++++++++++++++-----
 5 files changed, 59 insertions(+), 22 deletions(-)

diff --git a/src/locales/en.ts b/src/locales/en.ts
index c15626d..59f86de 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -555,11 +555,13 @@ export default {
     resumeUnmatched: '{count} session(s) could not match local files; pick again manually',
     createTitle: 'Create episodes in batch',
     createHint:
-      'Title uses the video file name; episode numbers are assigned automatically. You can edit them later in episode settings.',
+      'Title uses the video file name; episode numbers are assigned automatically. Free vs paid follows the drama free-episode count; episodes beyond that are paid. You can edit them later in episode settings.',
     colSource: 'Source file',
     colNumber: 'Episode No.',
     colTitle: 'Title',
-    colFree: 'Free',
+    colFree: 'Pricing',
+    labelFree: 'Free',
+    labelPaid: 'Paid',
     colResult: 'Result',
     missingVideo: 'Missing video URL',
     createOk: 'Created',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 023a84f..29a0cf8 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -546,11 +546,14 @@ export default {
     resumeMatched: '已匹配 {count} 个文件并开始续传',
     resumeUnmatched: '有 {count} 个会话无法匹配本地文件，请手动重选',
     createTitle: '批量创建分集',
-    createHint: '标题取视频文件名，集号自动顺延分配，创建后可在分集编辑中修改',
+    createHint:
+      '标题取视频文件名，集号自动顺延分配；免费集数由短剧管理中的「免费集数」配置决定，超出部分为收费集；创建后可在分集编辑中修改',
     colSource: '源文件',
     colNumber: '集号',
     colTitle: '标题',
-    colFree: '免费',
+    colFree: '收费类型',
+    labelFree: '免费',
+    labelPaid: '收费',
     colResult: '结果',
     missingVideo: '缺少视频地址',
     createOk: '已创建',
diff --git a/src/views/contentManagement/EpisodeManagementView.vue b/src/views/contentManagement/EpisodeManagementView.vue
index bfb449d..3686df7 100644
--- a/src/views/contentManagement/EpisodeManagementView.vue
+++ b/src/views/contentManagement/EpisodeManagementView.vue
@@ -337,6 +337,7 @@ onMounted(async () => {
     :drama-id="selectedDramaId"
     :next-episode-number="batchNextNumber"
     :default-unlock-coin="selectedDrama?.unlockCoin ?? 0"
+    :free-episodes="selectedDrama?.freeEpisodes ?? 0"
     :existing-numbers="existingEpisodeNumbers"
     @refreshed="loadEpisodes"
     @created="onBatchEpisodesCreated"
diff --git a/src/views/contentManagement/upload/BatchUploadDialog.vue b/src/views/contentManagement/upload/BatchUploadDialog.vue
index 52e01f5..df5ac7b 100644
--- a/src/views/contentManagement/upload/BatchUploadDialog.vue
+++ b/src/views/contentManagement/upload/BatchUploadDialog.vue
@@ -12,13 +12,20 @@ import { useUploadQueue } from './useUploadQueue'
 import { MAX_VIDEO_SIZE, VIDEO_ACCEPT_ATTR, VIDEO_EXTENSIONS } from './videoLimit'
 import type { UploadSessionRecord } from './uploadSessions'
 
-const props = defineProps<{
-  modelValue: boolean
-  dramaId: string | number
-  nextEpisodeNumber: number
-  defaultUnlockCoin: number
-  existingNumbers: number[]
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    dramaId: string | number
+    nextEpisodeNumber: number
+    defaultUnlockCoin: number
+    existingNumbers: number[]
+    /** 所属短剧免费集数；不传默认 0 */
+    freeEpisodes?: number
+  }>(),
+  {
+    freeEpisodes: 0
+  }
+)
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
@@ -272,6 +279,7 @@ function onEpisodesCreated(): void {
     :done-items="queue.doneItems.value"
     :next-episode-number="nextEpisodeNumber"
     :default-unlock-coin="defaultUnlockCoin"
+    :free-episodes="freeEpisodes"
     :existing-numbers="existingNumbers"
     @settled="emit('refreshed')"
     @created="onEpisodesCreated"
diff --git a/src/views/contentManagement/upload/CreateEpisodesDialog.vue b/src/views/contentManagement/upload/CreateEpisodesDialog.vue
index 31683bf..e6d7aeb 100644
--- a/src/views/contentManagement/upload/CreateEpisodesDialog.vue
+++ b/src/views/contentManagement/upload/CreateEpisodesDialog.vue
@@ -8,14 +8,21 @@ import { createEpisodeApi } from '@/api/admin/episode'
 import { useI18n } from '@/hooks/web/useI18n'
 import type { UploadQueueItem } from './useUploadQueue'
 
-const props = defineProps<{
-  modelValue: boolean
-  dramaId: string | number
-  doneItems: UploadQueueItem[]
-  nextEpisodeNumber: number
-  defaultUnlockCoin: number
-  existingNumbers: number[]
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    dramaId: string | number
+    doneItems: UploadQueueItem[]
+    nextEpisodeNumber: number
+    defaultUnlockCoin: number
+    existingNumbers: number[]
+    /** 所属短剧免费集数；不传默认 0 */
+    freeEpisodes?: number
+  }>(),
+  {
+    freeEpisodes: 0
+  }
+)
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
@@ -66,16 +73,18 @@ function buildRows(): void {
   )
   const used = new Set(props.existingNumbers)
   let cursor = props.nextEpisodeNumber
+  const freeLimit = props.freeEpisodes
   rows.value = sorted.map((item) => {
     const number = nextFreeNumber(cursor, used)
     used.add(number)
     cursor = number + 1
+    const isFree = number <= freeLimit
     return {
       key: item.id,
       sourceName: item.fileName,
       number,
       title: baseName(item.fileName),
-      isFree: true,
+      isFree,
       videoUrl: item.url || '',
       durationSec: item.durationSec || 0,
       saved: false,
@@ -173,7 +182,9 @@ function hasFailed(): boolean {
         <b class="create-episode-source" :title="row.sourceName">{{ row.sourceName }}</b>
         <span class="create-episode-number">{{ row.number }}</span>
         <span class="create-episode-title" :title="row.title">{{ row.title }}</span>
-        <el-switch v-model="row.isFree" :disabled="row.saved" />
+        <span class="create-episode-free" :class="row.isFree ? 'is-free' : 'is-paid'">
+          {{ row.isFree ? t('episodeBatch.labelFree') : t('episodeBatch.labelPaid') }}
+        </span>
         <span class="create-episode-result">
           {{ row.saved ? t('episodeBatch.createOk') : row.error }}
         </span>
@@ -199,11 +210,23 @@ function hasFailed(): boolean {
 .create-episode-head,
 .create-episode-row {
   display: grid;
-  grid-template-columns: minmax(120px, 1.2fr) 72px minmax(140px, 1.4fr) 48px minmax(80px, 0.8fr);
+  grid-template-columns: minmax(120px, 1.2fr) 72px minmax(140px, 1.4fr) 56px minmax(80px, 0.8fr);
   gap: 8px;
   align-items: center;
 }
 
+.create-episode-free {
+  font-size: 12px;
+}
+
+.create-episode-free.is-free {
+  color: var(--el-color-success);
+}
+
+.create-episode-free.is-paid {
+  color: var(--el-color-warning);
+}
+
 .create-episode-head {
   margin-bottom: 8px;
   color: var(--el-text-color-secondary);

From 93e1c1b8c9dd82595160ee2ce6609dcee9ce594b Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 22:53:07 +0800
Subject: [PATCH 42/59] =?UTF-8?q?feat(admin):=20=E6=89=B9=E9=87=8F?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=88=9B=E5=BB=BA=E7=9A=84=E5=88=86=E9=9B=86?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=B7=B2=E4=B8=8A=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/contentManagement/upload/CreateEpisodesDialog.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/contentManagement/upload/CreateEpisodesDialog.vue b/src/views/contentManagement/upload/CreateEpisodesDialog.vue
index e6d7aeb..6a42c67 100644
--- a/src/views/contentManagement/upload/CreateEpisodesDialog.vue
+++ b/src/views/contentManagement/upload/CreateEpisodesDialog.vue
@@ -44,7 +44,7 @@ interface EpisodeDraft {
   error: string
 }
 
-const DRAFT_STATUS = 'draft'
+const PUBLISHED_STATUS = 'published'
 const rows = ref<EpisodeDraft[]>([])
 const submitting = ref(false)
 
@@ -119,7 +119,7 @@ async function createOne(row: EpisodeDraft): Promise<void> {
       videoUrl: row.videoUrl,
       isFree: row.isFree,
       unlockCoin: row.isFree ? 0 : props.defaultUnlockCoin,
-      status: DRAFT_STATUS
+      status: PUBLISHED_STATUS
     })
     row.saved = true
     row.error = ''

From a28eaa45140fb56a73b50ba1f1e8e7a12af66933 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 23:00:08 +0800
Subject: [PATCH 43/59] =?UTF-8?q?feat(admin):=20=E5=89=A7=E9=9B=86?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=88=86=E9=A1=B5=E9=BB=98=E8=AE=A4=E6=AF=8F?=
 =?UTF-8?q?=E9=A1=B5100=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EpisodeManagementView.vue                 | 73 ++++++++++++++++---
 1 file changed, 63 insertions(+), 10 deletions(-)

diff --git a/src/views/contentManagement/EpisodeManagementView.vue b/src/views/contentManagement/EpisodeManagementView.vue
index 3686df7..b2cad80 100644
--- a/src/views/contentManagement/EpisodeManagementView.vue
+++ b/src/views/contentManagement/EpisodeManagementView.vue
@@ -15,6 +15,9 @@ import BatchUploadDialog from './upload/BatchUploadDialog.vue'
 import EpisodeFormDialog from './upload/EpisodeFormDialog.vue'
 import { listPendingSessions } from './upload/uploadSessions'
 
+const DEFAULT_PAGE_SIZE = 100
+const PAGE_SIZE_OPTIONS = [50, 100, 200]
+
 const route = useRoute()
 const { can } = useRbac()
 const { t } = useI18n()
@@ -23,6 +26,8 @@ const loading = ref(false)
 const dramas = ref([])
 const episodes = ref([])
 const selectedDramaId = ref(undefined)
+const pageIndex = ref(1)
+const pageSize = ref(DEFAULT_PAGE_SIZE)
 const batchUploadVisible = ref(false)
 const previewVisible = ref(false)
 const previewEpisode = ref(null)
@@ -34,6 +39,17 @@ const existingEpisodeNumbers = computed(() =>
   episodes.value.map((item) => Number(item.number)).filter((n) => Number.isFinite(n))
 )
 
+const pagedEpisodes = computed(() => {
+  const start = (pageIndex.value - 1) * pageSize.value
+  return episodes.value.slice(start, start + pageSize.value)
+})
+
+const showPagination = computed(() => {
+  const total = episodes.value.length
+  if (total <= 0) return false
+  return Math.ceil(total / pageSize.value) > 1
+})
+
 async function loadDramas() {
   const res = await pageDramasApi({ pageIndex: 1, pageSize: 200 })
   dramas.value = res.data?.list || []
@@ -55,11 +71,19 @@ async function loadEpisodes() {
   try {
     const res = await listEpisodesApi(selectedDramaId.value)
     episodes.value = res.data || []
+    clampPageIndex()
   } finally {
     loading.value = false
   }
 }
 
+/** 刷新后若当前页越界（如删除末页最后一条），夹到最后一页。 */
+function clampPageIndex() {
+  const total = episodes.value.length
+  const maxPage = Math.max(1, Math.ceil(total / pageSize.value) || 1)
+  if (pageIndex.value > maxPage) pageIndex.value = maxPage
+}
+
 function nextNumber() {
   return episodes.value.reduce((max, item) => Math.max(max, item.number || 0), 0) + 1
 }
@@ -122,10 +146,24 @@ function stopThumb(event) {
   }
 }
 
+function episodeIndexInFullList(row) {
+  return episodes.value.findIndex((item) => item.id === row.id)
+}
+
+function canMoveUp(row) {
+  return episodeIndexInFullList(row) > 0
+}
+
+function canMoveDown(row) {
+  const index = episodeIndexInFullList(row)
+  return index >= 0 && index < episodes.value.length - 1
+}
+
 /** 上移/下移后把新顺序整表提交，由后端重排 sort。 */
-async function move(index, offset) {
+async function move(row, offset) {
+  const index = episodeIndexInFullList(row)
   const target = index + offset
-  if (target < 0 || target >= episodes.value.length) return
+  if (index < 0 || target < 0 || target >= episodes.value.length) return
   const next = [...episodes.value]
   const [moved] = next.splice(index, 1)
   next.splice(target, 0, moved)
@@ -135,10 +173,15 @@ async function move(index, offset) {
 }
 
 async function onDramaChange() {
+  pageIndex.value = 1
   await loadEpisodes()
   openBatchIfPendingSessions()
 }
 
+function handleSizeChange() {
+  pageIndex.value = 1
+}
+
 /** 进入页面或切换短剧时，若有 24h 内未完成上传则打开批量上传弹窗以提示续传。 */
 function openBatchIfPendingSessions() {
   if (!selectedDramaId.value || !can('episode:upload')) return
@@ -202,11 +245,10 @@ onMounted(async () => {
     <div class="episode-toolbar"
       ><div
         ><h2>剧集列表（{{ episodes.length }}）</h2><p>按列表顺序播放</p></div
-      ></div
-    >
+    ></div>
     <el-table
       v-loading="loading"
-      :data="episodes"
+      :data="pagedEpisodes"
       row-key="id"
       empty-text="该短剧暂无剧集"
       class="drama-el-table episode-el-table"
@@ -278,7 +320,7 @@ onMounted(async () => {
         ></el-table-column
       >
       <el-table-column label="操作" width="250" fixed="right"
-        ><template #default="{ row, $index }"
+        ><template #default="{ row }"
           ><div class="table-actions"
             ><el-button
               v-if="can('episode:upload')"
@@ -289,14 +331,14 @@ onMounted(async () => {
             ><el-button
               v-if="can('episode:sort')"
               size="small"
-              :disabled="$index === 0"
-              @click="move($index, -1)"
+              :disabled="!canMoveUp(row)"
+              @click="move(row, -1)"
               >上移</el-button
             ><el-button
               v-if="can('episode:sort')"
               size="small"
-              :disabled="$index === episodes.length - 1"
-              @click="move($index, 1)"
+              :disabled="!canMoveDown(row)"
+              @click="move(row, 1)"
               >下移</el-button
             ><el-button
               v-if="can('episode:upload')"
@@ -309,6 +351,17 @@ onMounted(async () => {
         ></el-table-column
       >
     </el-table>
+    <div v-if="showPagination" class="pagination"
+      ><el-pagination
+        v-model:current-page="pageIndex"
+        v-model:page-size="pageSize"
+        :page-sizes="PAGE_SIZE_OPTIONS"
+        :total="episodes.length"
+        :pager-count="7"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @size-change="handleSizeChange"
+    /></div>
   </section>
   <EpisodeFormDialog
     ref="formDialogRef"

From 092fe18ae7d4aa1ee2a46967d493edd93ce8d62f Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 23:20:38 +0800
Subject: [PATCH 44/59] =?UTF-8?q?feat(admin):=20=E5=89=A7=E9=9B=86?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=94=B9=E4=B8=BA=E6=9C=8D=E5=8A=A1=E7=AB=AF?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/episode.ts                      |  13 +-
 src/styles/business/style.css                 |   9 +-
 .../EpisodeManagementView.vue                 | 144 ++++++++++++++----
 3 files changed, 127 insertions(+), 39 deletions(-)

diff --git a/src/api/admin/episode.ts b/src/api/admin/episode.ts
index 6488c53..2c17d69 100644
--- a/src/api/admin/episode.ts
+++ b/src/api/admin/episode.ts
@@ -1,10 +1,17 @@
 // Author: fruit.com.cn
 
 import request from '@/axios'
-import type { EpisodeItem, EpisodeSaveData } from './types'
+import type { EpisodeItem, EpisodeSaveData, PageResult } from './types'
 
-export const listEpisodesApi = (dramaId: number, status?: string) => {
-  return request.get<EpisodeItem[]>({ url: '/admin/episodes', params: { dramaId, status } })
+export interface EpisodePageParams {
+  dramaId: number
+  status?: string
+  pageIndex?: number
+  pageSize?: number
+}
+
+export const listEpisodesApi = (params: EpisodePageParams) => {
+  return request.get<PageResult<EpisodeItem>>({ url: '/admin/episodes', params })
 }
 
 export const createEpisodeApi = (data: EpisodeSaveData) => {
diff --git a/src/styles/business/style.css b/src/styles/business/style.css
index d08deb0..5ef09b3 100644
--- a/src/styles/business/style.css
+++ b/src/styles/business/style.css
@@ -560,13 +560,16 @@ body {
   gap: 6px;
 }
 
-.drama-select {
+.drama-select,
+.status-select {
   width: 100%;
 }
-.drama-select .el-input__wrapper {
+.drama-select .el-input__wrapper,
+.status-select .el-input__wrapper {
   box-shadow: 0 0 0 1px #efedf3 inset !important;
 }
-.drama-select .el-input__inner {
+.drama-select .el-input__inner,
+.status-select .el-input__inner {
   font-size: 13px;
 }
 
diff --git a/src/views/contentManagement/EpisodeManagementView.vue b/src/views/contentManagement/EpisodeManagementView.vue
index b2cad80..4abd935 100644
--- a/src/views/contentManagement/EpisodeManagementView.vue
+++ b/src/views/contentManagement/EpisodeManagementView.vue
@@ -15,6 +15,8 @@ import BatchUploadDialog from './upload/BatchUploadDialog.vue'
 import EpisodeFormDialog from './upload/EpisodeFormDialog.vue'
 import { listPendingSessions } from './upload/uploadSessions'
 
+/** 排序/批量建集需要全集快照，单次请求不超过接口 pageSize 上限。 */
+const SNAPSHOT_PAGE_SIZE = 200
 const DEFAULT_PAGE_SIZE = 100
 const PAGE_SIZE_OPTIONS = [50, 100, 200]
 
@@ -25,29 +27,27 @@ const { t } = useI18n()
 const loading = ref(false)
 const dramas = ref([])
 const episodes = ref([])
+const total = ref(0)
 const selectedDramaId = ref(undefined)
+const statusFilter = ref(undefined)
 const pageIndex = ref(1)
 const pageSize = ref(DEFAULT_PAGE_SIZE)
 const batchUploadVisible = ref(false)
 const previewVisible = ref(false)
 const previewEpisode = ref(null)
 const formDialogRef = ref()
+/** 上移/下移与批量建集用的全集快照。 */
+const snapshotEpisodes = ref([])
 
 const batchNextNumber = computed(() => nextNumber())
 const selectedDrama = computed(() => dramas.value.find((item) => item.id === selectedDramaId.value))
 const existingEpisodeNumbers = computed(() =>
-  episodes.value.map((item) => Number(item.number)).filter((n) => Number.isFinite(n))
+  snapshotEpisodes.value.map((item) => Number(item.number)).filter((n) => Number.isFinite(n))
 )
 
-const pagedEpisodes = computed(() => {
-  const start = (pageIndex.value - 1) * pageSize.value
-  return episodes.value.slice(start, start + pageSize.value)
-})
-
 const showPagination = computed(() => {
-  const total = episodes.value.length
-  if (total <= 0) return false
-  return Math.ceil(total / pageSize.value) > 1
+  if (total.value <= 0) return false
+  return Math.ceil(total.value / pageSize.value) > 1
 })
 
 async function loadDramas() {
@@ -65,31 +65,73 @@ async function loadDramas() {
 async function loadEpisodes() {
   if (!selectedDramaId.value) {
     episodes.value = []
+    total.value = 0
+    snapshotEpisodes.value = []
     return
   }
   loading.value = true
   try {
-    const res = await listEpisodesApi(selectedDramaId.value)
-    episodes.value = res.data || []
-    clampPageIndex()
+    const res = await listEpisodesApi({
+      dramaId: selectedDramaId.value,
+      status: statusFilter.value || undefined,
+      pageIndex: pageIndex.value,
+      pageSize: pageSize.value
+    })
+    episodes.value = res.data?.list || []
+    total.value = res.data?.total || 0
+    await clampOrRetreatPage()
   } finally {
     loading.value = false
   }
 }
 
-/** 刷新后若当前页越界（如删除末页最后一条），夹到最后一页。 */
-function clampPageIndex() {
-  const total = episodes.value.length
-  const maxPage = Math.max(1, Math.ceil(total / pageSize.value) || 1)
-  if (pageIndex.value > maxPage) pageIndex.value = maxPage
+/** 拉当前剧全集快照，供排序与批量建集集号计算。不过滤 status，按页取完。 */
+async function refreshSnapshot() {
+  if (!selectedDramaId.value) {
+    snapshotEpisodes.value = []
+    return
+  }
+  const collected = []
+  let page = 1
+  let totalCount = 0
+  do {
+    const res = await listEpisodesApi({
+      dramaId: selectedDramaId.value,
+      pageIndex: page,
+      pageSize: SNAPSHOT_PAGE_SIZE
+    })
+    const list = res.data?.list || []
+    totalCount = Number(res.data?.total || 0)
+    collected.push(...list)
+    if (!list.length) break
+    page += 1
+  } while (collected.length < totalCount)
+  snapshotEpisodes.value = collected
+}
+
+/**
+ * 删除后若当前页空且仍有数据，回退上一页再拉；否则夹页。
+ */
+async function clampOrRetreatPage() {
+  const maxPage = Math.max(1, Math.ceil(total.value / pageSize.value) || 1)
+  if (episodes.value.length === 0 && total.value > 0 && pageIndex.value > 1) {
+    pageIndex.value = Math.min(pageIndex.value - 1, maxPage)
+    await loadEpisodes()
+    return
+  }
+  if (pageIndex.value > maxPage) {
+    pageIndex.value = maxPage
+    await loadEpisodes()
+  }
 }
 
 function nextNumber() {
-  return episodes.value.reduce((max, item) => Math.max(max, item.number || 0), 0) + 1
+  return snapshotEpisodes.value.reduce((max, item) => Math.max(max, item.number || 0), 0) + 1
 }
 
-function openBatchUpload() {
+async function openBatchUpload() {
   if (!selectedDramaId.value) return
+  await refreshSnapshot()
   batchUploadVisible.value = true
 }
 
@@ -97,7 +139,8 @@ async function onBatchEpisodesCreated() {
   await loadEpisodes()
 }
 
-function openCreate() {
+async function openCreate() {
+  await refreshSnapshot()
   formDialogRef.value?.openCreate()
 }
 
@@ -118,6 +161,9 @@ async function confirmDelete(row) {
   }
   await deleteEpisodeApi(row.id)
   ElMessage.success('剧集已删除')
+  if (episodes.value.length === 1 && pageIndex.value > 1) {
+    pageIndex.value -= 1
+  }
   await loadEpisodes()
 }
 
@@ -146,25 +192,32 @@ function stopThumb(event) {
   }
 }
 
-function episodeIndexInFullList(row) {
+function pageLocalIndex(row) {
   return episodes.value.findIndex((item) => item.id === row.id)
 }
 
+function globalIndex(row) {
+  const local = pageLocalIndex(row)
+  if (local < 0) return -1
+  return (pageIndex.value - 1) * pageSize.value + local
+}
+
 function canMoveUp(row) {
-  return episodeIndexInFullList(row) > 0
+  return globalIndex(row) > 0
 }
 
 function canMoveDown(row) {
-  const index = episodeIndexInFullList(row)
-  return index >= 0 && index < episodes.value.length - 1
+  const index = globalIndex(row)
+  return index >= 0 && index < total.value - 1
 }
 
-/** 上移/下移后把新顺序整表提交，由后端重排 sort。 */
+/** 上移/下移后把快照新顺序整表提交，由后端重排 sort。 */
 async function move(row, offset) {
-  const index = episodeIndexInFullList(row)
+  await refreshSnapshot()
+  const index = snapshotEpisodes.value.findIndex((item) => item.id === row.id)
   const target = index + offset
-  if (index < 0 || target < 0 || target >= episodes.value.length) return
-  const next = [...episodes.value]
+  if (index < 0 || target < 0 || target >= snapshotEpisodes.value.length) return
+  const next = [...snapshotEpisodes.value]
   const [moved] = next.splice(index, 1)
   next.splice(target, 0, moved)
   await sortEpisodesApi(next.map((item) => item.id))
@@ -174,12 +227,23 @@ async function move(row, offset) {
 
 async function onDramaChange() {
   pageIndex.value = 1
+  statusFilter.value = undefined
   await loadEpisodes()
   openBatchIfPendingSessions()
 }
 
+function onStatusChange() {
+  pageIndex.value = 1
+  loadEpisodes()
+}
+
 function handleSizeChange() {
   pageIndex.value = 1
+  loadEpisodes()
+}
+
+function handlePageChange() {
+  loadEpisodes()
 }
 
 /** 进入页面或切换短剧时，若有 24h 内未完成上传则打开批量上传弹窗以提示续传。 */
@@ -220,7 +284,7 @@ onMounted(async () => {
         <span class="episode-context-label">当前短剧</span>
         <b class="episode-context-title">{{ selectedDrama?.title || '暂无短剧' }}</b>
         <small class="episode-context-count"
-          >共 {{ selectedDrama?.episodes ?? episodes.length }} 集 · 收藏
+          >共 {{ selectedDrama?.episodes ?? total }} 集 · 收藏
           {{ formatCount(selectedDrama?.favoriteCount ?? 0) }} · 热度
           {{ formatCount(selectedDrama?.views ?? 0) }}</small
         >
@@ -240,15 +304,28 @@ onMounted(async () => {
             :value="item.id"
           />
         </el-select>
+        <span class="episode-context-label">状态</span>
+        <el-select
+          v-model="statusFilter"
+          clearable
+          placeholder="全部状态"
+          class="status-select"
+          @change="onStatusChange"
+        >
+          <el-option label="草稿" value="draft" />
+          <el-option label="已上线" value="published" />
+          <el-option label="已下线" value="offline" />
+        </el-select>
       </div>
     </div>
     <div class="episode-toolbar"
       ><div
-        ><h2>剧集列表（{{ episodes.length }}）</h2><p>按列表顺序播放</p></div
-    ></div>
+        ><h2>剧集列表（{{ total }}）</h2><p>按列表顺序播放</p></div
+      ></div
+    >
     <el-table
       v-loading="loading"
-      :data="pagedEpisodes"
+      :data="episodes"
       row-key="id"
       empty-text="该短剧暂无剧集"
       class="drama-el-table episode-el-table"
@@ -356,11 +433,12 @@ onMounted(async () => {
         v-model:current-page="pageIndex"
         v-model:page-size="pageSize"
         :page-sizes="PAGE_SIZE_OPTIONS"
-        :total="episodes.length"
+        :total="total"
         :pager-count="7"
         layout="total, sizes, prev, pager, next, jumper"
         background
         @size-change="handleSizeChange"
+        @current-change="handlePageChange"
     /></div>
   </section>
   <EpisodeFormDialog

From 6bcabea261e7170c60c7791d5d9fcb012d533271 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Thu, 22 Oct 2026 09:18:59 +0800
Subject: [PATCH 45/59] =?UTF-8?q?fix(admin):=20=E5=89=A7=E9=9B=86=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=94=B9=E7=94=A8=E6=9C=8D=E5=8A=A1=E7=AB=AF=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E4=BF=AE=E5=A4=8D=E5=88=97=E8=A1=A8=E4=B8=BA=E7=A9=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/episode.ts                      | 20 ++++++++++-
 .../EpisodeManagementView.vue                 | 33 +++++++++++++------
 2 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/src/api/admin/episode.ts b/src/api/admin/episode.ts
index 2c17d69..7657106 100644
--- a/src/api/admin/episode.ts
+++ b/src/api/admin/episode.ts
@@ -4,12 +4,30 @@ import request from '@/axios'
 import type { EpisodeItem, EpisodeSaveData, PageResult } from './types'
 
 export interface EpisodePageParams {
-  dramaId: number
+  dramaId: number | string
   status?: string
   pageIndex?: number
   pageSize?: number
 }
 
+/**
+ * 解包剧集列表分页。
+ * 契约（OpenAPI PageResultEpisodeRespVO）：data = { total, list }。
+ * 兼容误把 data 当数组的旧调用，避免列表空白。
+ */
+export function parseEpisodePage(payload: unknown): PageResult<EpisodeItem> {
+  if (Array.isArray(payload)) {
+    return { total: payload.length, list: payload as EpisodeItem[] }
+  }
+  if (payload && typeof payload === 'object') {
+    const page = payload as { total?: unknown; list?: unknown }
+    const list = Array.isArray(page.list) ? (page.list as EpisodeItem[]) : []
+    const total = Number(page.total)
+    return { total: Number.isFinite(total) ? total : list.length, list }
+  }
+  return { total: 0, list: [] }
+}
+
 export const listEpisodesApi = (params: EpisodePageParams) => {
   return request.get<PageResult<EpisodeItem>>({ url: '/admin/episodes', params })
 }
diff --git a/src/views/contentManagement/EpisodeManagementView.vue b/src/views/contentManagement/EpisodeManagementView.vue
index 4abd935..1313177 100644
--- a/src/views/contentManagement/EpisodeManagementView.vue
+++ b/src/views/contentManagement/EpisodeManagementView.vue
@@ -6,7 +6,12 @@ import { useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
 import { pageDramasApi } from '@/api/admin/drama'
-import { deleteEpisodeApi, listEpisodesApi, sortEpisodesApi } from '@/api/admin/episode'
+import {
+  deleteEpisodeApi,
+  listEpisodesApi,
+  parseEpisodePage,
+  sortEpisodesApi
+} from '@/api/admin/episode'
 import { useRbac } from '@/stores/rbac'
 import { formatCount } from '@/utils/format'
 import { statusClass } from '@/utils/status'
@@ -50,6 +55,8 @@ const showPagination = computed(() => {
   return Math.ceil(total.value / pageSize.value) > 1
 })
 
+const showEmpty = computed(() => !loading.value && episodes.value.length === 0)
+
 async function loadDramas() {
   const res = await pageDramasApi({ pageIndex: 1, pageSize: 200 })
   dramas.value = res.data?.list || []
@@ -77,8 +84,10 @@ async function loadEpisodes() {
       pageIndex: pageIndex.value,
       pageSize: pageSize.value
     })
-    episodes.value = res.data?.list || []
-    total.value = res.data?.total || 0
+    // 按 OpenAPI PageResult{total,list} 解包，禁止再把 data 当数组切片
+    const page = parseEpisodePage(res.data)
+    episodes.value = page.list
+    total.value = page.total
     await clampOrRetreatPage()
   } finally {
     loading.value = false
@@ -100,10 +109,10 @@ async function refreshSnapshot() {
       pageIndex: page,
       pageSize: SNAPSHOT_PAGE_SIZE
     })
-    const list = res.data?.list || []
-    totalCount = Number(res.data?.total || 0)
-    collected.push(...list)
-    if (!list.length) break
+    const parsed = parseEpisodePage(res.data)
+    totalCount = parsed.total
+    collected.push(...parsed.list)
+    if (!parsed.list.length) break
     page += 1
   } while (collected.length < totalCount)
   snapshotEpisodes.value = collected
@@ -227,7 +236,6 @@ async function move(row, offset) {
 
 async function onDramaChange() {
   pageIndex.value = 1
-  statusFilter.value = undefined
   await loadEpisodes()
   openBatchIfPendingSessions()
 }
@@ -327,12 +335,17 @@ onMounted(async () => {
       v-loading="loading"
       :data="episodes"
       row-key="id"
-      empty-text="该短剧暂无剧集"
       class="drama-el-table episode-el-table"
     >
+      <template #empty>
+        <el-empty
+          v-if="showEmpty"
+          :description="selectedDramaId ? '该短剧暂无剧集' : '请先选择短剧'"
+        />
+      </template>
       <el-table-column label="集数" width="90"
         ><template #default="{ row }">{{
-          String(row.number).padStart(2, '0')
+          String(row.number ?? 0).padStart(2, '0')
         }}</template></el-table-column
       >
       <el-table-column label="剧集名称" min-width="240"

From 632bf13990e772c8f4667ba35ec81e68e56e1fbd Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Thu, 22 Oct 2026 09:23:04 +0800
Subject: [PATCH 46/59] =?UTF-8?q?fix(admin):=20=E5=89=A7=E9=9B=86=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=88=86=E9=A1=B5=E6=9D=A1=E5=A7=8B=E7=BB=88=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/contentManagement/EpisodeManagementView.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/views/contentManagement/EpisodeManagementView.vue b/src/views/contentManagement/EpisodeManagementView.vue
index 1313177..ef50955 100644
--- a/src/views/contentManagement/EpisodeManagementView.vue
+++ b/src/views/contentManagement/EpisodeManagementView.vue
@@ -50,11 +50,6 @@ const existingEpisodeNumbers = computed(() =>
   snapshotEpisodes.value.map((item) => Number(item.number)).filter((n) => Number.isFinite(n))
 )
 
-const showPagination = computed(() => {
-  if (total.value <= 0) return false
-  return Math.ceil(total.value / pageSize.value) > 1
-})
-
 const showEmpty = computed(() => !loading.value && episodes.value.length === 0)
 
 async function loadDramas() {
@@ -441,7 +436,7 @@ onMounted(async () => {
         ></el-table-column
       >
     </el-table>
-    <div v-if="showPagination" class="pagination"
+    <div class="pagination"
       ><el-pagination
         v-model:current-page="pageIndex"
         v-model:page-size="pageSize"

From f174ba46ae5663e78ddaae5920acc5eaf696ffcb Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Thu, 22 Oct 2026 09:31:35 +0800
Subject: [PATCH 47/59] =?UTF-8?q?feat(admin):=20=E6=89=B9=E9=87=8F?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=94=B9=E4=B8=BA=E6=89=8B=E5=8A=A8=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E5=BC=80=E5=A7=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/en.ts                             |  9 ++-
 src/locales/zh-CN.ts                          |  9 ++-
 .../upload/BatchUploadDialog.vue              | 53 ++++++++++++--
 .../upload/UploadTaskRow.vue                  | 26 +++++--
 .../upload/useUploadQueue.ts                  | 70 +++++++++++++++----
 5 files changed, 135 insertions(+), 32 deletions(-)

diff --git a/src/locales/en.ts b/src/locales/en.ts
index 59f86de..f0222af 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -532,16 +532,19 @@ export default {
     title: 'Batch upload episodes',
     entry: 'Batch upload',
     selectFiles: 'Select videos',
+    startUpload: 'Start upload',
+    uploadingAction: 'Uploading',
     pause: 'Pause',
     resume: 'Resume',
     retry: 'Retry',
     retryAll: 'Retry all',
     remove: 'Remove',
-    hint: 'Supports MP4 / MOV / MKV / WEBM, max 500MB each',
+    hint: 'Supports MP4 / MOV / MKV / WEBM, max 500MB each. Files stay queued until you click Start upload.',
     invalidType: 'Only MP4, MOV, MKV, WEBM are allowed',
     oversize: 'File exceeds 500MB and was not queued',
     overallProgress: 'Overall progress',
     empty: 'No videos selected',
+    resultSummary: 'Upload finished: {done} succeeded, {failed} failed',
     createEpisodes: 'Create episodes',
     closeWhileUploading:
       'Uploads are still in progress. Closing will stop dispatching new tasks. Continue?',
@@ -551,7 +554,7 @@ export default {
     resumeYes: 'Pick files to resume',
     resumeNo: 'Discard',
     resumeAbandoned: 'Unfinished uploads discarded',
-    resumeMatched: 'Matched {count} file(s) and resumed',
+    resumeMatched: 'Matched {count} file(s). Click Start upload to continue.',
     resumeUnmatched: '{count} session(s) could not match local files; pick again manually',
     createTitle: 'Create episodes in batch',
     createHint:
@@ -571,7 +574,7 @@ export default {
     submitCreate: 'Create',
     retryFailed: 'Retry failed',
     status: {
-      waiting: 'Waiting',
+      waiting: 'Pending',
       uploading: 'Uploading',
       merging: 'Merging',
       done: 'Done',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 29a0cf8..d0b21b1 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -526,16 +526,19 @@ export default {
     title: '批量上传剧集',
     entry: '批量上传',
     selectFiles: '选择视频',
+    startUpload: '开始上传',
+    uploadingAction: '上传中',
     pause: '暂停',
     resume: '继续',
     retry: '重试',
     retryAll: '全部重试',
     remove: '移除',
-    hint: '支持 MP4 / MOV / MKV / WEBM，单文件不超过 500MB',
+    hint: '支持 MP4 / MOV / MKV / WEBM，单文件不超过 500MB；选完文件后点击「开始上传」才会真正上传',
     invalidType: '仅支持 MP4、MOV、MKV、WEBM',
     oversize: '文件超过 500MB，未入队',
     overallProgress: '总进度',
     empty: '尚未选择视频',
+    resultSummary: '上传结束：成功 {done} 个，失败 {failed} 个',
     createEpisodes: '批量创建分集',
     closeWhileUploading: '仍有未完成上传，关闭后将暂停派发新任务，确定关闭吗？',
     resumeTitle: '发现未完成上传',
@@ -543,7 +546,7 @@ export default {
     resumeYes: '选择文件续传',
     resumeNo: '放弃',
     resumeAbandoned: '已放弃未完成上传',
-    resumeMatched: '已匹配 {count} 个文件并开始续传',
+    resumeMatched: '已匹配 {count} 个文件，请点击「开始上传」继续',
     resumeUnmatched: '有 {count} 个会话无法匹配本地文件，请手动重选',
     createTitle: '批量创建分集',
     createHint:
@@ -563,7 +566,7 @@ export default {
     submitCreate: '创建',
     retryFailed: '重试失败项',
     status: {
-      waiting: '等待中',
+      waiting: '待上传',
       uploading: '上传中',
       merging: '合并中',
       done: '已完成',
diff --git a/src/views/contentManagement/upload/BatchUploadDialog.vue b/src/views/contentManagement/upload/BatchUploadDialog.vue
index df5ac7b..43cb37e 100644
--- a/src/views/contentManagement/upload/BatchUploadDialog.vue
+++ b/src/views/contentManagement/upload/BatchUploadDialog.vue
@@ -1,5 +1,5 @@
 <!-- Author: fruit.com.cn -->
-<!-- 剧集批量上传弹窗：多选、队列、总进度、续传与批量建集入口 -->
+<!-- 剧集批量上传弹窗：先入队待上传，点「开始上传」后再执行 -->
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
@@ -60,6 +60,10 @@ watch(
 
 const canCreateEpisodes = computed(() => queue.doneItems.value.length > 0)
 
+const startButtonLabel = computed(() =>
+  queue.isUploading.value ? t('episodeBatch.uploadingAction') : t('episodeBatch.startUpload')
+)
+
 function extensionOf(fileName: string): string {
   const parts = String(fileName || '').split('.')
   return (parts.pop() || '').toLowerCase()
@@ -92,14 +96,19 @@ function onPickFiles(event: Event): void {
   }
   rejectedNames.value = rejected
   if (!accepted.length) return
+  // 只入队，不发起上传；等用户点「开始上传」
   queue.enqueue(accepted)
-  queue.start()
 }
 
 function openFilePicker(): void {
   fileInputRef.value?.click()
 }
 
+function onStartUpload(): void {
+  if (!queue.canStart.value) return
+  queue.start()
+}
+
 function onBeforeUnload(event: BeforeUnloadEvent): void {
   if (!queue.hasActiveUpload.value) return
   event.preventDefault()
@@ -158,7 +167,6 @@ async function onResumeFiles(event: Event): Promise<void> {
   }
   if (matched.length) {
     ElMessage.success(t('episodeBatch.resumeMatched', { count: matched.length }))
-    queue.start()
   }
 }
 
@@ -229,10 +237,13 @@ function onEpisodesCreated(): void {
         <AppIcon :icon="AppIcons.upload" />
         {{ t('episodeBatch.selectFiles') }}
       </el-button>
-      <el-button :disabled="!queue.items.value.length" @click="queue.pause()">
+      <el-button
+        :disabled="!queue.started.value || !queue.items.value.length"
+        @click="queue.pause()"
+      >
         {{ t('episodeBatch.pause') }}
       </el-button>
-      <el-button :disabled="!queue.items.value.length" @click="queue.start()">
+      <el-button :disabled="!queue.canStart.value" @click="queue.start()">
         {{ t('episodeBatch.resume') }}
       </el-button>
       <el-button
@@ -254,11 +265,22 @@ function onEpisodesCreated(): void {
       <el-progress :percentage="queue.overallPercent.value" :stroke-width="12" />
     </div>
 
+    <p v-if="queue.showResultSummary.value" class="batch-upload-summary">
+      {{
+        t('episodeBatch.resultSummary', {
+          done: queue.doneItems.value.length,
+          failed: queue.failedCount.value
+        })
+      }}
+    </p>
+
     <div class="batch-upload-list">
       <UploadTaskRow
-        v-for="item in queue.items.value"
+        v-for="(item, index) in queue.items.value"
         :key="item.id"
         :item="item"
+        :index="index + 1"
+        :allow-remove="!queue.started.value && item.status === 'waiting'"
         @retry="queue.retry"
         @remove="queue.remove"
       />
@@ -267,7 +289,15 @@ function onEpisodesCreated(): void {
 
     <template #footer>
       <el-button @click="visible = false">{{ t('common.cancel') }}</el-button>
-      <el-button type="primary" :disabled="!canCreateEpisodes" @click="openCreateDialog">
+      <el-button
+        type="primary"
+        :disabled="!queue.canStart.value"
+        :loading="queue.isUploading.value"
+        @click="onStartUpload"
+      >
+        {{ startButtonLabel }}
+      </el-button>
+      <el-button type="success" :disabled="!canCreateEpisodes" @click="openCreateDialog">
         {{ t('episodeBatch.createEpisodes') }}
       </el-button>
     </template>
@@ -317,6 +347,15 @@ function onEpisodesCreated(): void {
   margin-bottom: 12px;
 }
 
+.batch-upload-summary {
+  margin: 0 0 12px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--el-color-success) 10%, transparent);
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+}
+
 .batch-upload-list {
   max-height: 360px;
   overflow: auto;
diff --git a/src/views/contentManagement/upload/UploadTaskRow.vue b/src/views/contentManagement/upload/UploadTaskRow.vue
index 0fac16f..b4270ac 100644
--- a/src/views/contentManagement/upload/UploadTaskRow.vue
+++ b/src/views/contentManagement/upload/UploadTaskRow.vue
@@ -1,5 +1,5 @@
 <!-- Author: fruit.com.cn -->
-<!-- 批量上传队列单行：文件名、大小、进度、状态与操作 -->
+<!-- 批量上传队列单行：序号、文件名、大小、进度、状态与操作 -->
 
 <script setup lang="ts">
 import { computed } from 'vue'
@@ -8,6 +8,10 @@ import type { UploadQueueItem } from './useUploadQueue'
 
 const props = defineProps<{
   item: UploadQueueItem
+  /** 自然排序后的展示序号（从 1 起） */
+  index: number
+  /** 选择阶段才允许移除 */
+  allowRemove: boolean
 }>()
 
 const emit = defineEmits<{
@@ -47,14 +51,12 @@ const statusType = computed(() => {
 })
 
 const canRetry = computed(() => props.item.status === 'failed')
-const canRemove = computed(
-  () => props.item.status !== 'uploading' && props.item.status !== 'merging'
-)
 </script>
 
 <template>
   <div class="upload-task-row" :class="{ 'is-failed': item.status === 'failed' }">
     <div class="upload-task-row__meta">
+      <span class="upload-task-row__index">{{ index }}</span>
       <b class="upload-task-row__name" :title="item.fileName">{{ item.fileName }}</b>
       <small>{{ sizeLabel }}</small>
       <el-tag :type="statusType" effect="light" size="small">{{ statusLabel }}</el-tag>
@@ -71,7 +73,13 @@ const canRemove = computed(
       <el-button v-if="canRetry" size="small" type="primary" @click="emit('retry', item.id)">
         {{ t('episodeBatch.retry') }}
       </el-button>
-      <el-button v-if="canRemove" size="small" type="danger" text @click="emit('remove', item.id)">
+      <el-button
+        v-if="allowRemove"
+        size="small"
+        type="danger"
+        text
+        @click="emit('remove', item.id)"
+      >
         {{ t('episodeBatch.remove') }}
       </el-button>
     </div>
@@ -91,6 +99,14 @@ const canRemove = computed(
   margin-bottom: 8px;
 }
 
+.upload-task-row__index {
+  flex: 0 0 auto;
+  min-width: 1.5em;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
 .upload-task-row__name {
   flex: 1;
   overflow: hidden;
diff --git a/src/views/contentManagement/upload/useUploadQueue.ts b/src/views/contentManagement/upload/useUploadQueue.ts
index dd0312b..e945f41 100644
--- a/src/views/contentManagement/upload/useUploadQueue.ts
+++ b/src/views/contentManagement/upload/useUploadQueue.ts
@@ -1,5 +1,5 @@
 // Author: fruit.com.cn
-/** 剧集批量上传队列：文件并发、进度加权、断点会话、失败隔离 */
+/** 剧集批量上传队列：手动开始、文件并发、进度加权、断点会话、失败隔离 */
 
 import { computed, ref } from 'vue'
 import { getUploadProgressApi } from '@/api/admin/media'
@@ -58,6 +58,11 @@ function isHttpNotFound(error: unknown): boolean {
   return status === 404
 }
 
+/** 文件名自然排序（数字感知），保证队列序号稳定。 */
+function compareFileName(a: string, b: string): number {
+  return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+}
+
 /**
  * 创建上传队列控制器。
  * @param options dramaId 与可选 bizType
@@ -65,6 +70,8 @@ function isHttpNotFound(error: unknown): boolean {
 export function useUploadQueue(options: UseUploadQueueOptions) {
   const items = ref<UploadQueueItem[]>([])
   const paused = ref(false)
+  /** 用户是否已点过「开始上传」；选文件阶段不派发、不占用并发。 */
+  const started = ref(false)
   const bizType = options.bizType || DEFAULT_BIZ_TYPE
   let running = 0
 
@@ -77,18 +84,36 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
     return Math.min(MAX_PERCENT, Math.round(weighted / totalBytes))
   })
 
-  const hasActiveUpload = computed(() =>
-    items.value.some(
+  const isUploading = computed(() =>
+    items.value.some((item) => item.status === 'uploading' || item.status === 'merging')
+  )
+
+  /** 关闭弹窗需二次确认：仅在已开始且仍有未完成任务时。 */
+  const hasActiveUpload = computed(() => {
+    if (!started.value) return false
+    return items.value.some(
       (item) =>
         item.status === 'waiting' ||
         item.status === 'uploading' ||
         item.status === 'merging' ||
         item.status === 'paused'
     )
-  )
+  })
+
+  const canStart = computed(() => {
+    if (isUploading.value) return false
+    return items.value.some((item) => item.status === 'waiting' || item.status === 'paused')
+  })
 
   const doneItems = computed(() => items.value.filter((item) => item.status === 'done'))
 
+  const failedCount = computed(() => items.value.filter((item) => item.status === 'failed').length)
+
+  /** 已开始且队列已无进行中任务时，可展示结果汇总。 */
+  const showResultSummary = computed(
+    () => started.value && items.value.length > 0 && !hasActiveUpload.value
+  )
+
   function persistSession(item: UploadQueueItem, uploadId: string): void {
     item.uploadId = uploadId
     upsertUploadSession({
@@ -106,6 +131,10 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
     if (uploadId) removeUploadSession(uploadId)
   }
 
+  function sortItemsByName(): void {
+    items.value.sort((a, b) => compareFileName(a.fileName, b.fileName))
+  }
+
   async function runOne(item: UploadQueueItem, resumeId?: string): Promise<void> {
     item.status = 'uploading'
     item.error = ''
@@ -140,7 +169,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
   }
 
   function pump(): void {
-    if (paused.value) return
+    if (!started.value || paused.value) return
     while (running < FILE_CONCURRENCY && !paused.value) {
       const next = items.value.find((item) => item.status === 'waiting')
       if (!next) return
@@ -155,9 +184,10 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
     }
   }
 
-  /** 入队本地文件（调用方已完成类型/大小校验）。 */
+  /** 入队本地文件（调用方已完成类型/大小校验）；只展示待上传，不发起请求。 */
   function enqueue(files: File[]): void {
-    for (const file of files) {
+    const sorted = [...files].sort((a, b) => compareFileName(a.name, b.name))
+    for (const file of sorted) {
       items.value.push({
         id: nextItemId(),
         file,
@@ -165,15 +195,18 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
         fileSize: file.size,
         lastModified: file.lastModified,
         percent: 0,
-        status: paused.value ? 'paused' : 'waiting',
+        status: 'waiting',
         error: '',
         uploadId: ''
       })
     }
+    sortItemsByName()
   }
 
-  /** 开始或继续派发。 */
+  /** 开始或继续派发（含断点续传项上的 uploadId）。 */
   function start(): void {
+    if (!items.value.length) return
+    started.value = true
     paused.value = false
     for (const item of items.value) {
       if (item.status === 'paused') item.status = 'waiting'
@@ -183,6 +216,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
 
   /** 暂停：不派新任务；进行中分片跑完。 */
   function pause(): void {
+    if (!started.value) return
     paused.value = true
     for (const item of items.value) {
       if (item.status === 'waiting') item.status = 'paused'
@@ -196,7 +230,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
     item.error = ''
     item.percent = item.uploadId ? item.percent : 0
     item.status = paused.value ? 'paused' : 'waiting'
-    if (!paused.value) void pump()
+    if (started.value && !paused.value) void pump()
   }
 
   /** 重试全部失败项。 */
@@ -207,11 +241,12 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
         item.status = paused.value ? 'paused' : 'waiting'
       }
     }
-    if (!paused.value) void pump()
+    if (started.value && !paused.value) void pump()
   }
 
-  /** 移除单项并清理会话。 */
+  /** 仅选择阶段可移除；已开始上传后禁止直接移除，避免脏会话。 */
   function remove(id: string): void {
+    if (started.value) return
     const index = items.value.findIndex((row) => row.id === id)
     if (index < 0) return
     const [removed] = items.value.splice(index, 1)
@@ -225,6 +260,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
     }
     items.value = []
     paused.value = false
+    started.value = false
     running = 0
   }
 
@@ -234,7 +270,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
   }
 
   /**
-   * 用本地重选文件匹配会话并入队续传。
+   * 用本地重选文件匹配会话并入队（待上传）；不自动开始，由用户点「开始上传」续传。
    * @returns matched / unmatched 会话列表
    */
   async function resumeFromSessions(
@@ -267,7 +303,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
           fileSize: file.size,
           lastModified: file.lastModified,
           percent: Math.min(MERGING_PERCENT, Number(progress.percent) || 0),
-          status: paused.value ? 'paused' : 'waiting',
+          status: 'waiting',
           error: '',
           uploadId: session.uploadId
         })
@@ -280,6 +316,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
         }
       }
     }
+    sortItemsByName()
     return { matched, unmatched }
   }
 
@@ -294,7 +331,12 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
     items,
     overallPercent,
     hasActiveUpload,
+    isUploading,
+    canStart,
     doneItems,
+    failedCount,
+    showResultSummary,
+    started,
     paused,
     enqueue,
     start,

From 218196ee9f74d18d498563c63a92f2bd0e369c85 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Thu, 22 Oct 2026 11:29:48 +0800
Subject: [PATCH 48/59] =?UTF-8?q?feat(admin):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E8=BD=AC=E7=A0=81=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2026-10-22-transcode-profile-settings.md  |  39 ++
 docs/plans/PROGRESS.md                        |  53 +++
 src/api/admin/media.ts                        |  19 +-
 src/api/admin/types.ts                        |  26 ++
 src/locales/en.ts                             |  48 ++-
 src/locales/zh-CN.ts                          |  44 ++-
 src/permission.ts                             |   5 +
 src/router/index.ts                           |   9 +
 src/router/localRoutes.ts                     |  59 +++
 .../TranscodeSettingsView.vue                 | 350 ++++++++++++++++++
 .../composables/transcodeProfileDefaults.ts   |  74 ++++
 .../composables/transcodeProfileModel.ts      |  49 +++
 .../composables/transcodeProfileRules.ts      |  98 +++++
 .../composables/transcodeSettingsActions.ts   |  79 ++++
 .../composables/useTranscodeSettings.ts       |  64 ++++
 types/global.d.ts                             |   1 +
 16 files changed, 1014 insertions(+), 3 deletions(-)
 create mode 100644 docs/plans/2026-10-22-transcode-profile-settings.md
 create mode 100644 docs/plans/PROGRESS.md
 create mode 100644 src/router/localRoutes.ts
 create mode 100644 src/views/systemManagement/TranscodeSettingsView.vue
 create mode 100644 src/views/systemManagement/composables/transcodeProfileDefaults.ts
 create mode 100644 src/views/systemManagement/composables/transcodeProfileModel.ts
 create mode 100644 src/views/systemManagement/composables/transcodeProfileRules.ts
 create mode 100644 src/views/systemManagement/composables/transcodeSettingsActions.ts
 create mode 100644 src/views/systemManagement/composables/useTranscodeSettings.ts

diff --git a/docs/plans/2026-10-22-transcode-profile-settings.md b/docs/plans/2026-10-22-transcode-profile-settings.md
new file mode 100644
index 0000000..31eaf61
--- /dev/null
+++ b/docs/plans/2026-10-22-transcode-profile-settings.md
@@ -0,0 +1,39 @@
+# 后台转码设置页面
+
+## 目标
+
+1. 在内容管理下新增「转码设置」页面，权限沿用 `episode:upload`。
+2. 页面字段与 FruitServer `MediaTranscodeProfile` 完全一致。
+3. 对接 `GET/PUT /admin/media/transcode-profile`，保存后回填服务端响应。
+4. 前端校验规则与后端一致，并在失败时定位到首个错误字段。
+
+## 方案
+
+- API：在 `src/api/admin/media.ts` 增加读取、保存函数，类型定义放
+  `src/api/admin/types.ts`；响应继续遵循现有 `Result {code,message,data}`。
+- 路由：静态路由表增加 `/content/media-transcode`；默认服务端动态路由模式下，
+  根据 `episode:upload` 权限把同一条本地路由补充进服务端 `/content` 菜单，
+  已存在同名菜单时不重复添加，仅统一 i18n 标题。
+- 页面：`views/systemManagement/TranscodeSettingsView.vue`，使用 Element Plus 表单、
+  表格、数字输入和开关；保存按钮受 `episode:upload` 控制。
+- 校验：
+  - quality 非空且忽略首尾空格后唯一；
+  - width/height 为正偶数；
+  - videoBitrateKbps/audioBitrateKbps 为正整数；
+  - segmentSeconds 2–10；
+  - sprite.intervalSeconds 1–10、columns 5–20、thumbWidth 120–240；
+  - ladder 至少一档 enabled。
+- 校验失败由 Element Plus 定位到首个错误 prop，动态列表错误会定位到对应行。
+- 所有可见文案、提示和校验信息进入 `zh-CN.ts` / `en.ts`。
+
+## 非目标
+
+- 不修改 FruitServer、ReelShort 或接口契约。
+- 不新增权限码、不新增依赖、不启动服务。
+
+## 测试与门禁
+
+- 当前工程没有单元/组件测试框架，不引入新依赖；使用 TS 类型检查和构建门禁。
+- `pnpm lint:eslint`
+- `pnpm ts:check`
+- `pnpm build:dev`
diff --git a/docs/plans/PROGRESS.md b/docs/plans/PROGRESS.md
new file mode 100644
index 0000000..fc4aa24
--- /dev/null
+++ b/docs/plans/PROGRESS.md
@@ -0,0 +1,53 @@
+## 2026-10-22 后台转码设置页面
+
+### 开工确认与计划
+
+- 仓库：ReelShortWeb
+- 基线：`develop` / `origin/develop` = `723d056`
+- 工作区：开工前干净
+- 分支：`feature/transcode-profile-settings`
+- 计划：`docs/plans/2026-10-22-transcode-profile-settings.md`
+
+```text
+$ git status --short --branch && git rev-parse --short HEAD
+## develop...origin/develop
+723d056
+```
+
+解读：基于指定 develop 基线创建隔离工作树。后端契约已确认字段为
+`enabled / segmentSeconds / ladder / sprite`，权限为 `episode:upload`。
+默认服务端动态菜单只读取 `sys_menu`，本单按“只改 Web”约束在不改后端的前提下，
+对具备 `episode:upload` 的账号补充本地受控菜单，后端接口仍执行最终鉴权。
+
+### 实现与门禁
+
+- 新增 `/content/media-transcode` 静态路由和服务端动态菜单补充；
+  菜单标题走 `router.transcodeSettings`，只在账号具备 `episode:upload` 时加入。
+- 新增转码设置页面，字段严格为 `enabled / segmentSeconds / ladder / sprite`；
+  支持档位增删、动态行校验、首个错误字段定位及服务端返回值回填。
+- API 使用现有 axios Result 包装，GET 初始化、PUT 保存；成功/失败/校验提示全部走中英 i18n。
+- 当前工程没有单元/组件测试框架，未新增依赖；使用 ESLint、TypeScript 与构建门禁。
+
+```text
+$ pnpm lint:eslint
+> fruitshorts-admin@1.0.0 lint:eslint /private/tmp/reelshortweb-transcode-settings
+> eslint --fix --ext .js,.ts,.vue ./src
+
+$ pnpm ts:check
+> fruitshorts-admin@1.0.0 ts:check /private/tmp/reelshortweb-transcode-settings
+> pnpm vue-tsc --noEmit --skipLibCheck
+```
+
+解读：ESLint 零告警，TypeScript 类型检查通过。
+
+```text
+$ pnpm build:dev
+> fruitshorts-admin@1.0.0 build:dev /private/tmp/reelshortweb-transcode-settings
+> VITE_CJS_IGNORE_WARNING=1 vite build --mode dev
+
+ WARN  Circular chunk: element-plus -> vue-chunks -> element-plus. Please adjust the manual chunk logic for these chunks.
+
+Build successful. Please see dist-dev directory
+```
+
+解读：开发构建成功；circular chunk 为仓库既有 Element Plus 分包警告，本次未改构建配置。
diff --git a/src/api/admin/media.ts b/src/api/admin/media.ts
index aa7077e..73d31ca 100644
--- a/src/api/admin/media.ts
+++ b/src/api/admin/media.ts
@@ -1,7 +1,7 @@
 // Author: fruit.com.cn
 
 import request from '@/axios'
-import type { MediaAsset } from './types'
+import type { MediaAsset, MediaTranscodeProfile } from './types'
 
 export interface UploadInitData {
   fileName: string
@@ -61,3 +61,20 @@ export const getUploadProgressApi = (uploadId: string) => {
 export const getMediaApi = (id: number) => {
   return request.get<MediaAsset>({ url: `/admin/media/${id}` })
 }
+
+/** 读取当前转码档位配置；缺省时后端返回四档默认值。 */
+export const getMediaTranscodeProfileApi = () => {
+  return request.get<MediaTranscodeProfile>({
+    url: '/admin/media/transcode-profile',
+    silent: true
+  })
+}
+
+/** 保存转码档位配置，并返回服务端最终生效值。 */
+export const saveMediaTranscodeProfileApi = (data: MediaTranscodeProfile) => {
+  return request.put<MediaTranscodeProfile>({
+    url: '/admin/media/transcode-profile',
+    data,
+    silent: true
+  })
+}
diff --git a/src/api/admin/types.ts b/src/api/admin/types.ts
index 4040874..d58e598 100644
--- a/src/api/admin/types.ts
+++ b/src/api/admin/types.ts
@@ -222,6 +222,32 @@ export interface MediaAsset {
   createdAt?: string
 }
 
+/** 单档清晰度配置，字段与 FruitServer MediaTranscodeProfile.Rung 一致。 */
+export interface MediaTranscodeLadderRung {
+  quality: string
+  width: number
+  height: number
+  videoBitrateKbps: number
+  audioBitrateKbps: number
+  enabled: boolean
+}
+
+/** 雪碧图采样配置，字段与 FruitServer MediaTranscodeProfile.Sprite 一致。 */
+export interface MediaTranscodeSprite {
+  enabled: boolean
+  intervalSeconds: number
+  columns: number
+  thumbWidth: number
+}
+
+/** 转码档位配置，字段与 FruitServer MediaTranscodeProfile 一致。 */
+export interface MediaTranscodeProfile {
+  enabled: boolean
+  segmentSeconds: number
+  ladder: MediaTranscodeLadderRung[]
+  sprite: MediaTranscodeSprite
+}
+
 export interface BannerItem {
   id: number
   imageUrl: string
diff --git a/src/locales/en.ts b/src/locales/en.ts
index f0222af..5d3fcf7 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -163,7 +163,8 @@ export default {
     treeTable: 'Tree table',
     PicturePreview: 'Table Image Preview',
     department: 'Department management',
-    menuManagement: 'Menu management'
+    menuManagement: 'Menu management',
+    transcodeSettings: 'Transcode settings'
   },
   permission: {
     hasPermission: 'Please set the operation permission value'
@@ -581,5 +582,50 @@ export default {
       failed: 'Failed',
       paused: 'Paused'
     }
+  },
+  transcodeSettings: {
+    eyebrow: 'Content management',
+    title: 'Transcode settings',
+    description:
+      'Configure the quality ladder, HLS segment duration and thumbnail sprite options for new tasks.',
+    reload: 'Reload',
+    save: 'Save settings',
+    saved: 'Transcode settings saved',
+    saveFailed: 'Failed to save transcode settings',
+    loadFailed: 'Failed to load transcode settings',
+    noPermission: 'This account cannot manage transcode settings',
+    enabled: 'Enable transcode profile',
+    enabledDescription:
+      'Marks whether this transcode profile is enabled; the quality ladder is still validated when saved.',
+    segmentSeconds: 'HLS segment duration (seconds)',
+    ladderTitle: 'Quality ladder',
+    ladderDescription:
+      'Changes apply only to tasks queued afterwards; historical tasks are not reprocessed.',
+    quality: 'Quality key',
+    width: 'Width',
+    height: 'Height',
+    videoBitrateKbps: 'Video bitrate (kbps)',
+    audioBitrateKbps: 'Audio bitrate (kbps)',
+    rowEnabled: 'Enabled',
+    addRung: 'Add quality',
+    deleteRung: 'Delete',
+    emptyLadder: 'No quality rungs configured',
+    spriteTitle: 'Thumbnail sprite',
+    spriteDescription:
+      'Sample frames at a fixed interval, tile them into sprites and generate a WebVTT timeline.',
+    spriteEnabled: 'Enable thumbnail sprites',
+    intervalSeconds: 'Sampling interval (seconds)',
+    columns: 'Frames per row',
+    thumbWidth: 'Thumbnail width (px)',
+    validation: {
+      required: 'This field is required',
+      qualityUnique: 'Quality keys must be unique',
+      qualityTooLong: 'Quality key must not exceed 16 characters',
+      positiveEven: 'Enter an even number greater than 0',
+      positiveInteger: 'Enter an integer greater than 0',
+      range: 'Enter an integer between {min} and {max}',
+      atLeastOneEnabled: 'Enable at least one quality rung',
+      fixErrors: 'Fix the marked transcode fields before saving'
+    }
   }
 }
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index d0b21b1..796b199 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -163,7 +163,8 @@ export default {
     treeTable: '树形表格',
     PicturePreview: '表格图片预览',
     department: '部门管理',
-    menuManagement: '菜单管理'
+    menuManagement: '菜单管理',
+    transcodeSettings: '转码设置'
   },
   permission: {
     hasPermission: '请设置操作权限值'
@@ -573,5 +574,46 @@ export default {
       failed: '失败',
       paused: '已暂停'
     }
+  },
+  transcodeSettings: {
+    eyebrow: '内容管理',
+    title: '转码设置',
+    description: '配置之后新任务的清晰度阶梯、HLS 分片与缩略图雪碧图参数。',
+    reload: '重新加载',
+    save: '保存设置',
+    saved: '转码设置已保存',
+    saveFailed: '转码设置保存失败',
+    loadFailed: '转码设置加载失败',
+    noPermission: '当前账号没有转码设置权限',
+    enabled: '启用转码配置',
+    enabledDescription: '标记当前转码配置是否启用；保存时仍会校验下方档位。',
+    segmentSeconds: 'HLS 分片时长（秒）',
+    ladderTitle: '清晰度阶梯',
+    ladderDescription: '保存后只影响之后进入队列的新任务，不回跑历史任务。',
+    quality: '清晰度标识',
+    width: '宽',
+    height: '高',
+    videoBitrateKbps: '视频码率（kbps）',
+    audioBitrateKbps: '音频码率（kbps）',
+    rowEnabled: '启用',
+    addRung: '新增档位',
+    deleteRung: '删除',
+    emptyLadder: '尚未配置清晰度档位',
+    spriteTitle: '缩略图雪碧图',
+    spriteDescription: '按固定间隔抽帧并拼成雪碧图，同时生成 WebVTT 时间轴。',
+    spriteEnabled: '启用雪碧图',
+    intervalSeconds: '抽帧间隔（秒）',
+    columns: '每行帧数',
+    thumbWidth: '缩略图宽度（px）',
+    validation: {
+      required: '该项为必填项',
+      qualityUnique: '清晰度标识不能重复',
+      qualityTooLong: '清晰度标识不能超过 16 个字符',
+      positiveEven: '请输入大于 0 的偶数',
+      positiveInteger: '请输入大于 0 的整数',
+      range: '请输入 {min} 到 {max} 之间的整数',
+      atLeastOneEnabled: '至少需要启用一档清晰度',
+      fixErrors: '请修正标记的转码配置后再保存'
+    }
   }
 }
diff --git a/src/permission.ts b/src/permission.ts
index 720df79..dc61a1a 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -11,6 +11,7 @@ import { NO_REDIRECT_WHITE_LIST } from '@/constants'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { getAdminRoleApi, getProfileApi } from '@/api/login'
 import { landingPath } from '@/utils/landing'
+import { supplementLocalAdminRoutes } from '@/router/localRoutes'
 
 const { start, done } = useNProgress()
 
@@ -68,6 +69,10 @@ router.beforeEach(async (to, from, next) => {
           } catch {
             // 拉取失败时退回上次缓存的菜单，不阻塞进入
           }
+          const permissions = Array.isArray(userStore.getUserInfo?.permissions)
+            ? userStore.getUserInfo.permissions
+            : []
+          routers = supplementLocalAdminRoutes(routers, permissions)
           await permissionStore.generateRoutes('server', routers)
         } else {
           await permissionStore.generateRoutes('frontEnd', roleRouters as string[])
diff --git a/src/router/index.ts b/src/router/index.ts
index d4bd294..2dbd084 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -120,6 +120,15 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: '类型管理'
         }
+      },
+      {
+        path: 'media-transcode',
+        name: 'media-transcode',
+        component: () => import('@/views/systemManagement/TranscodeSettingsView.vue'),
+        meta: {
+          title: 'router.transcodeSettings',
+          permission: ['episode:upload']
+        }
       }
     ]
   },
diff --git a/src/router/localRoutes.ts b/src/router/localRoutes.ts
new file mode 100644
index 0000000..0d5762f
--- /dev/null
+++ b/src/router/localRoutes.ts
@@ -0,0 +1,59 @@
+// Author: fruit.com.cn
+
+import { cloneDeep } from 'lodash-es'
+
+const TRANSCODE_PERMISSION = 'episode:upload'
+const CONTENT_ROUTE_PATH = '/content'
+const CONTENT_ROUTE_NAME = 'Content'
+const TRANSCODE_ROUTE_NAME = 'media-transcode'
+const TRANSCODE_ROUTE_PATH = 'media-transcode'
+const TRANSCODE_COMPONENT = 'views/systemManagement/TranscodeSettingsView'
+const TRANSCODE_TITLE_KEY = 'router.transcodeSettings'
+
+const findRouteByName = (
+  routes: AppCustomRouteRecordRaw[],
+  name: string
+): AppCustomRouteRecordRaw | undefined => {
+  for (const route of routes) {
+    if (route.name === name) return route
+    const child = findRouteByName(route.children || [], name)
+    if (child) return child
+  }
+  return undefined
+}
+
+/**
+ * 服务端动态菜单未落库时，给具备内容上传权限的账号补充受控的本地转码菜单。
+ */
+export const supplementLocalAdminRoutes = (
+  routes: AppCustomRouteRecordRaw[],
+  permissions: string[]
+): AppCustomRouteRecordRaw[] => {
+  if (!permissions.includes(TRANSCODE_PERMISSION)) {
+    return routes
+  }
+  const nextRoutes = cloneDeep(routes)
+  const existing = findRouteByName(nextRoutes, TRANSCODE_ROUTE_NAME)
+  if (existing) {
+    existing.meta = { ...existing.meta, title: TRANSCODE_TITLE_KEY }
+    return nextRoutes
+  }
+  const contentRoute = nextRoutes.find(
+    (route) => route.path === CONTENT_ROUTE_PATH || route.name === CONTENT_ROUTE_NAME
+  )
+  if (!contentRoute) {
+    return routes
+  }
+  contentRoute.children = contentRoute.children || []
+  contentRoute.children.push({
+    path: TRANSCODE_ROUTE_PATH,
+    name: TRANSCODE_ROUTE_NAME,
+    component: TRANSCODE_COMPONENT,
+    redirect: '',
+    meta: {
+      title: TRANSCODE_TITLE_KEY,
+      permission: [TRANSCODE_PERMISSION]
+    }
+  })
+  return nextRoutes
+}
diff --git a/src/views/systemManagement/TranscodeSettingsView.vue b/src/views/systemManagement/TranscodeSettingsView.vue
new file mode 100644
index 0000000..0761a2b
--- /dev/null
+++ b/src/views/systemManagement/TranscodeSettingsView.vue
@@ -0,0 +1,350 @@
+<!-- Author: fruit.com.cn -->
+<!-- 后台转码档位与缩略图雪碧图配置 -->
+
+<script setup lang="ts">
+import { AppIcons } from '@/constants/icons'
+import { useI18n } from '@/hooks/web/useI18n'
+import PageHeading from '@/views/components/PageHeading.vue'
+import { useTranscodeSettings } from './composables/useTranscodeSettings'
+
+const { t } = useI18n()
+const {
+  form,
+  formRef,
+  rules,
+  loading,
+  saving,
+  loadError,
+  canManage,
+  qualityRules,
+  positiveEvenRule,
+  positiveIntegerRule,
+  enabledRules,
+  loadProfile,
+  addRung,
+  deleteRung,
+  saveProfile
+} = useTranscodeSettings()
+</script>
+
+<template>
+  <PageHeading
+    :eyebrow="t('transcodeSettings.eyebrow')"
+    :title="t('transcodeSettings.title')"
+    :description="t('transcodeSettings.description')"
+  >
+    <el-button :disabled="loading" @click="loadProfile">
+      <AppIcon :icon="AppIcons.refresh" />
+      {{ t('transcodeSettings.reload') }}
+    </el-button>
+    <el-button
+      type="primary"
+      class="primary-button"
+      :loading="saving"
+      :disabled="!canManage || loading"
+      @click="saveProfile"
+    >
+      <AppIcon :icon="AppIcons.check" />
+      {{ t('transcodeSettings.save') }}
+    </el-button>
+  </PageHeading>
+
+  <el-alert
+    v-if="loadError"
+    class="transcode-alert"
+    :title="loadError"
+    type="error"
+    show-icon
+    :closable="false"
+  />
+  <el-alert
+    v-if="!canManage"
+    class="transcode-alert"
+    :title="t('transcodeSettings.noPermission')"
+    type="warning"
+    show-icon
+    :closable="false"
+  />
+
+  <el-form
+    ref="formRef"
+    v-loading="loading"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+    class="transcode-form"
+  >
+    <section class="panel transcode-panel">
+      <div class="transcode-section-heading">
+        <div>
+          <h2>{{ t('transcodeSettings.enabled') }}</h2>
+          <p>{{ t('transcodeSettings.enabledDescription') }}</p>
+        </div>
+        <el-switch v-model="form.enabled" size="large" />
+      </div>
+      <div class="transcode-grid transcode-grid--compact">
+        <el-form-item :label="t('transcodeSettings.segmentSeconds')" prop="segmentSeconds">
+          <el-input-number
+            v-model="form.segmentSeconds"
+            controls-position="right"
+            :min="2"
+            :max="10"
+            :precision="0"
+          />
+        </el-form-item>
+      </div>
+    </section>
+
+    <section class="panel transcode-panel">
+      <div class="transcode-section-heading">
+        <div>
+          <h2>{{ t('transcodeSettings.ladderTitle') }}</h2>
+          <p>{{ t('transcodeSettings.ladderDescription') }}</p>
+        </div>
+        <el-button type="primary" plain @click="addRung">
+          <AppIcon :icon="AppIcons.add" />
+          {{ t('transcodeSettings.addRung') }}
+        </el-button>
+      </div>
+
+      <el-table
+        :data="form.ladder"
+        border
+        class="transcode-table"
+        :empty-text="t('transcodeSettings.emptyLadder')"
+      >
+        <el-table-column type="index" width="60" label="#" />
+        <el-table-column :label="t('transcodeSettings.quality')" min-width="150">
+          <template #default="{ row, $index }">
+            <el-form-item
+              :prop="`ladder.${$index}.quality`"
+              :rules="qualityRules($index)"
+              class="table-form-item"
+            >
+              <el-input v-model="row.quality" maxlength="16" />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('transcodeSettings.width')" min-width="120">
+          <template #default="{ row, $index }">
+            <el-form-item
+              :prop="`ladder.${$index}.width`"
+              :rules="positiveEvenRule()"
+              class="table-form-item"
+            >
+              <el-input-number
+                v-model="row.width"
+                controls-position="right"
+                :min="2"
+                :precision="0"
+              />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('transcodeSettings.height')" min-width="120">
+          <template #default="{ row, $index }">
+            <el-form-item
+              :prop="`ladder.${$index}.height`"
+              :rules="positiveEvenRule()"
+              class="table-form-item"
+            >
+              <el-input-number
+                v-model="row.height"
+                controls-position="right"
+                :min="2"
+                :precision="0"
+              />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('transcodeSettings.videoBitrateKbps')" min-width="150">
+          <template #default="{ row, $index }">
+            <el-form-item
+              :prop="`ladder.${$index}.videoBitrateKbps`"
+              :rules="positiveIntegerRule()"
+              class="table-form-item"
+            >
+              <el-input-number
+                v-model="row.videoBitrateKbps"
+                controls-position="right"
+                :min="1"
+                :precision="0"
+              />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('transcodeSettings.audioBitrateKbps')" min-width="150">
+          <template #default="{ row, $index }">
+            <el-form-item
+              :prop="`ladder.${$index}.audioBitrateKbps`"
+              :rules="positiveIntegerRule()"
+              class="table-form-item"
+            >
+              <el-input-number
+                v-model="row.audioBitrateKbps"
+                controls-position="right"
+                :min="1"
+                :precision="0"
+              />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('transcodeSettings.rowEnabled')" width="100" align="center">
+          <template #default="{ row, $index }">
+            <el-form-item
+              :prop="`ladder.${$index}.enabled`"
+              :rules="enabledRules"
+              class="table-form-item table-form-item--center"
+            >
+              <el-switch v-model="row.enabled" />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column label="" width="72" align="center" fixed="right">
+          <template #default="{ $index }">
+            <el-tooltip :content="t('transcodeSettings.deleteRung')" placement="top">
+              <el-button circle type="danger" plain @click="deleteRung($index)">
+                <AppIcon :icon="AppIcons.delete" />
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </section>
+
+    <section class="panel transcode-panel">
+      <div class="transcode-section-heading">
+        <div>
+          <h2>{{ t('transcodeSettings.spriteTitle') }}</h2>
+          <p>{{ t('transcodeSettings.spriteDescription') }}</p>
+        </div>
+        <el-switch v-model="form.sprite.enabled" size="large" />
+      </div>
+      <div class="transcode-grid">
+        <el-form-item :label="t('transcodeSettings.intervalSeconds')" prop="sprite.intervalSeconds">
+          <el-input-number
+            v-model="form.sprite.intervalSeconds"
+            controls-position="right"
+            :min="1"
+            :max="10"
+            :precision="0"
+          />
+        </el-form-item>
+        <el-form-item :label="t('transcodeSettings.columns')" prop="sprite.columns">
+          <el-input-number
+            v-model="form.sprite.columns"
+            controls-position="right"
+            :min="5"
+            :max="20"
+            :precision="0"
+          />
+        </el-form-item>
+        <el-form-item :label="t('transcodeSettings.thumbWidth')" prop="sprite.thumbWidth">
+          <el-input-number
+            v-model="form.sprite.thumbWidth"
+            controls-position="right"
+            :min="120"
+            :max="240"
+            :precision="0"
+          />
+        </el-form-item>
+      </div>
+      <div class="transcode-footer">
+        <el-button
+          type="primary"
+          class="primary-button"
+          :loading="saving"
+          :disabled="!canManage || loading"
+          @click="saveProfile"
+        >
+          <AppIcon :icon="AppIcons.check" />
+          {{ t('transcodeSettings.save') }}
+        </el-button>
+      </div>
+    </section>
+  </el-form>
+</template>
+
+<style scoped lang="less">
+.transcode-alert {
+  margin-bottom: 14px;
+}
+
+.transcode-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.transcode-panel {
+  overflow: hidden;
+}
+
+.transcode-section-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+
+  h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  p {
+    margin: 6px 0 0;
+    color: var(--el-text-color-secondary);
+    line-height: 1.5;
+  }
+}
+
+.transcode-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(180px, 1fr));
+  gap: 16px;
+}
+
+.transcode-grid--compact {
+  grid-template-columns: minmax(180px, 320px);
+}
+
+.transcode-table {
+  width: 100%;
+}
+
+.table-form-item {
+  margin-bottom: 0;
+
+  :deep(.el-input-number) {
+    width: 100%;
+  }
+
+  :deep(.el-form-item__error) {
+    position: static;
+    margin-top: 4px;
+  }
+}
+
+.table-form-item--center {
+  display: flex;
+  justify-content: center;
+}
+
+.transcode-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 18px;
+}
+
+@media (max-width: 900px) {
+  .transcode-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .transcode-section-heading {
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/src/views/systemManagement/composables/transcodeProfileDefaults.ts b/src/views/systemManagement/composables/transcodeProfileDefaults.ts
new file mode 100644
index 0000000..146cfbe
--- /dev/null
+++ b/src/views/systemManagement/composables/transcodeProfileDefaults.ts
@@ -0,0 +1,74 @@
+// Author: fruit.com.cn
+
+import type {
+  MediaTranscodeLadderRung,
+  MediaTranscodeProfile,
+  MediaTranscodeSprite
+} from '@/api/admin/types'
+
+export const MIN_SEGMENT_SECONDS = 2
+export const MAX_SEGMENT_SECONDS = 10
+export const MIN_SPRITE_INTERVAL = 1
+export const MAX_SPRITE_INTERVAL = 10
+export const MIN_SPRITE_COLUMNS = 5
+export const MAX_SPRITE_COLUMNS = 20
+export const MIN_THUMB_WIDTH = 120
+export const MAX_THUMB_WIDTH = 240
+export const MAX_QUALITY_LENGTH = 16
+
+export const defaultSprite = (): MediaTranscodeSprite => ({
+  enabled: true,
+  intervalSeconds: 1,
+  columns: 10,
+  thumbWidth: 160
+})
+
+export const defaultRung = (): MediaTranscodeLadderRung => ({
+  quality: '',
+  width: 640,
+  height: 360,
+  videoBitrateKbps: 400,
+  audioBitrateKbps: 64,
+  enabled: true
+})
+
+/** 与后端缺省值一致的四档配置。 */
+export const defaultProfile = (): MediaTranscodeProfile => ({
+  enabled: true,
+  segmentSeconds: 6,
+  ladder: [
+    {
+      quality: '360p',
+      width: 640,
+      height: 360,
+      videoBitrateKbps: 400,
+      audioBitrateKbps: 64,
+      enabled: true
+    },
+    {
+      quality: '480p',
+      width: 854,
+      height: 480,
+      videoBitrateKbps: 800,
+      audioBitrateKbps: 64,
+      enabled: true
+    },
+    {
+      quality: '720p',
+      width: 1280,
+      height: 720,
+      videoBitrateKbps: 1600,
+      audioBitrateKbps: 96,
+      enabled: true
+    },
+    {
+      quality: '1080p',
+      width: 1920,
+      height: 1080,
+      videoBitrateKbps: 3200,
+      audioBitrateKbps: 128,
+      enabled: true
+    }
+  ],
+  sprite: defaultSprite()
+})
diff --git a/src/views/systemManagement/composables/transcodeProfileModel.ts b/src/views/systemManagement/composables/transcodeProfileModel.ts
new file mode 100644
index 0000000..7753e7b
--- /dev/null
+++ b/src/views/systemManagement/composables/transcodeProfileModel.ts
@@ -0,0 +1,49 @@
+// Author: fruit.com.cn
+
+import type { MediaTranscodeProfile } from '@/api/admin/types'
+import { defaultProfile, defaultRung, defaultSprite } from './transcodeProfileDefaults'
+
+/** 用服务端响应回填表单，同时保持字段名与后端完全一致。 */
+export const applyProfileToForm = (
+  form: MediaTranscodeProfile,
+  profile?: MediaTranscodeProfile | null
+): void => {
+  const source = profile || defaultProfile()
+  form.enabled = Boolean(source.enabled)
+  form.segmentSeconds = Number(source.segmentSeconds)
+  form.sprite = { ...defaultSprite(), ...(source.sprite || {}) }
+  const ladder =
+    Array.isArray(source.ladder) && source.ladder.length ? source.ladder : [defaultRung()]
+  form.ladder.splice(
+    0,
+    form.ladder.length,
+    ...ladder.map((row) => ({
+      quality: row.quality || '',
+      width: Number(row.width),
+      height: Number(row.height),
+      videoBitrateKbps: Number(row.videoBitrateKbps),
+      audioBitrateKbps: Number(row.audioBitrateKbps),
+      enabled: Boolean(row.enabled)
+    }))
+  )
+}
+
+/** 生成只包含后端约定字段的 PUT 请求体。 */
+export const buildProfilePayload = (form: MediaTranscodeProfile): MediaTranscodeProfile => ({
+  enabled: form.enabled,
+  segmentSeconds: Number(form.segmentSeconds),
+  ladder: form.ladder.map((row) => ({
+    quality: row.quality.trim(),
+    width: Number(row.width),
+    height: Number(row.height),
+    videoBitrateKbps: Number(row.videoBitrateKbps),
+    audioBitrateKbps: Number(row.audioBitrateKbps),
+    enabled: Boolean(row.enabled)
+  })),
+  sprite: {
+    enabled: Boolean(form.sprite.enabled),
+    intervalSeconds: Number(form.sprite.intervalSeconds),
+    columns: Number(form.sprite.columns),
+    thumbWidth: Number(form.sprite.thumbWidth)
+  }
+})
diff --git a/src/views/systemManagement/composables/transcodeProfileRules.ts b/src/views/systemManagement/composables/transcodeProfileRules.ts
new file mode 100644
index 0000000..7640ac2
--- /dev/null
+++ b/src/views/systemManagement/composables/transcodeProfileRules.ts
@@ -0,0 +1,98 @@
+// Author: fruit.com.cn
+
+import type { FormItemRule, FormRules } from 'element-plus'
+import type { MediaTranscodeProfile } from '@/api/admin/types'
+import {
+  MAX_QUALITY_LENGTH,
+  MAX_SEGMENT_SECONDS,
+  MAX_SPRITE_COLUMNS,
+  MAX_SPRITE_INTERVAL,
+  MAX_THUMB_WIDTH,
+  MIN_SPRITE_COLUMNS,
+  MIN_SEGMENT_SECONDS,
+  MIN_SPRITE_INTERVAL,
+  MIN_THUMB_WIDTH
+} from './transcodeProfileDefaults'
+
+type Translate = (key: string, named?: Record<string, unknown>) => string
+
+const rangeRule = (min: number, max: number, t: Translate): FormItemRule => ({
+  trigger: 'change',
+  validator: (_rule, value, callback) => {
+    const parsed = Number(value)
+    callback(
+      Number.isInteger(parsed) && parsed >= min && parsed <= max
+        ? undefined
+        : new Error(t('transcodeSettings.validation.range', { min, max }))
+    )
+  }
+})
+
+export const positiveIntegerRule = (t: Translate): FormItemRule => ({
+  trigger: 'change',
+  validator: (_rule, value, callback) => {
+    const parsed = Number(value)
+    callback(
+      Number.isInteger(parsed) && parsed > 0
+        ? undefined
+        : new Error(t('transcodeSettings.validation.positiveInteger'))
+    )
+  }
+})
+
+export const positiveEvenRule = (t: Translate): FormItemRule => ({
+  trigger: 'change',
+  validator: (_rule, value, callback) => {
+    const parsed = Number(value)
+    callback(
+      Number.isInteger(parsed) && parsed > 0 && parsed % 2 === 0
+        ? undefined
+        : new Error(t('transcodeSettings.validation.positiveEven'))
+    )
+  }
+})
+
+export const createProfileRules = (t: Translate): FormRules => ({
+  segmentSeconds: [rangeRule(MIN_SEGMENT_SECONDS, MAX_SEGMENT_SECONDS, t)],
+  'sprite.intervalSeconds': [rangeRule(MIN_SPRITE_INTERVAL, MAX_SPRITE_INTERVAL, t)],
+  'sprite.columns': [rangeRule(MIN_SPRITE_COLUMNS, MAX_SPRITE_COLUMNS, t)],
+  'sprite.thumbWidth': [rangeRule(MIN_THUMB_WIDTH, MAX_THUMB_WIDTH, t)]
+})
+
+export const createQualityRules = (
+  form: MediaTranscodeProfile,
+  index: number,
+  t: Translate
+): FormItemRule[] => [
+  {
+    trigger: 'blur',
+    validator: (_rule, value, callback) => {
+      const quality = String(value ?? '').trim()
+      if (!quality) {
+        callback(new Error(t('transcodeSettings.validation.required')))
+        return
+      }
+      if (quality.length > MAX_QUALITY_LENGTH) {
+        callback(new Error(t('transcodeSettings.validation.qualityTooLong')))
+        return
+      }
+      const duplicate = form.ladder.some(
+        (row, rowIndex) => rowIndex !== index && row.quality.trim() === quality
+      )
+      callback(duplicate ? new Error(t('transcodeSettings.validation.qualityUnique')) : undefined)
+    }
+  }
+]
+
+export const createEnabledRules = (form: MediaTranscodeProfile, t: Translate): FormItemRule[] => [
+  {
+    trigger: 'change',
+    validator: (_rule, _value, callback) => {
+      callback(
+        form.ladder.some((row) => row.enabled)
+          ? undefined
+          : new Error(t('transcodeSettings.validation.atLeastOneEnabled'))
+      )
+    }
+  }
+]
diff --git a/src/views/systemManagement/composables/transcodeSettingsActions.ts b/src/views/systemManagement/composables/transcodeSettingsActions.ts
new file mode 100644
index 0000000..126184a
--- /dev/null
+++ b/src/views/systemManagement/composables/transcodeSettingsActions.ts
@@ -0,0 +1,79 @@
+// Author: fruit.com.cn
+
+import { nextTick } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import { getMediaTranscodeProfileApi, saveMediaTranscodeProfileApi } from '@/api/admin/media'
+import type { MediaTranscodeProfile } from '@/api/admin/types'
+import { applyProfileToForm, buildProfilePayload } from './transcodeProfileModel'
+
+type Translate = (key: string, named?: Record<string, unknown>) => string
+
+interface SettingsContext {
+  form: MediaTranscodeProfile
+  formRef: Ref<FormInstance | undefined>
+  loading: Ref<boolean>
+  saving: Ref<boolean>
+  loadError: Ref<string>
+  canManage: ComputedRef<boolean>
+  t: Translate
+}
+
+/** 读取服务端配置并回填表单。 */
+export const loadTranscodeProfile = async (context: SettingsContext): Promise<void> => {
+  context.loading.value = true
+  context.loadError.value = ''
+  try {
+    const response = await getMediaTranscodeProfileApi()
+    if (response.code !== 0) {
+      context.loadError.value = response.message || context.t('transcodeSettings.loadFailed')
+      return
+    }
+    applyProfileToForm(context.form, response.data)
+  } catch {
+    context.loadError.value = context.t('transcodeSettings.loadFailed')
+  } finally {
+    context.loading.value = false
+  }
+}
+
+const validateProfile = async (context: SettingsContext): Promise<boolean> => {
+  if (!context.form.ladder.length) {
+    ElMessage.warning(context.t('transcodeSettings.validation.atLeastOneEnabled'))
+    return false
+  }
+  try {
+    await context.formRef.value?.validate()
+    return true
+  } catch (fields) {
+    const firstField = Object.keys((fields || {}) as Record<string, unknown>)[0]
+    if (firstField) {
+      await nextTick()
+      context.formRef.value?.scrollToField(firstField)
+    }
+    ElMessage.warning(context.t('transcodeSettings.validation.fixErrors'))
+    return false
+  }
+}
+
+/** 校验并保存，成功后用服务端返回值回填。 */
+export const saveTranscodeProfile = async (context: SettingsContext): Promise<void> => {
+  if (!context.canManage.value || context.saving.value || !(await validateProfile(context))) {
+    return
+  }
+  context.saving.value = true
+  try {
+    const response = await saveMediaTranscodeProfileApi(buildProfilePayload(context.form))
+    if (response.code !== 0) {
+      ElMessage.error(response.message || context.t('transcodeSettings.saveFailed'))
+      return
+    }
+    applyProfileToForm(context.form, response.data)
+    ElMessage.success(context.t('transcodeSettings.saved'))
+  } catch {
+    ElMessage.error(context.t('transcodeSettings.saveFailed'))
+  } finally {
+    context.saving.value = false
+  }
+}
diff --git a/src/views/systemManagement/composables/useTranscodeSettings.ts b/src/views/systemManagement/composables/useTranscodeSettings.ts
new file mode 100644
index 0000000..31a94d8
--- /dev/null
+++ b/src/views/systemManagement/composables/useTranscodeSettings.ts
@@ -0,0 +1,64 @@
+// Author: fruit.com.cn
+
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+import type { MediaTranscodeProfile } from '@/api/admin/types'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useRbac } from '@/stores/rbac'
+import { defaultProfile, defaultRung } from './transcodeProfileDefaults'
+import {
+  createEnabledRules,
+  createProfileRules,
+  createQualityRules,
+  positiveEvenRule,
+  positiveIntegerRule
+} from './transcodeProfileRules'
+import { loadTranscodeProfile, saveTranscodeProfile } from './transcodeSettingsActions'
+
+/** 转码设置页的响应式状态与动作装配。 */
+export function useTranscodeSettings() {
+  const { t } = useI18n()
+  const { can } = useRbac()
+  const formRef = ref<FormInstance>()
+  const loading = ref(false)
+  const saving = ref(false)
+  const loadError = ref('')
+  const form = reactive<MediaTranscodeProfile>(defaultProfile())
+  const canManage = computed(() => can('episode:upload'))
+  const context = { form, formRef, loading, saving, loadError, canManage, t }
+  const rules = computed(() => createProfileRules(t))
+  const enabledRules = computed(() => createEnabledRules(form, t))
+  const qualityRules = (index: number) => createQualityRules(form, index, t)
+
+  const addRung = (): void => {
+    form.ladder.push(defaultRung())
+    nextTick(() => formRef.value?.clearValidate())
+  }
+
+  const deleteRung = (index: number): void => {
+    form.ladder.splice(index, 1)
+    nextTick(() => formRef.value?.clearValidate())
+  }
+
+  const loadProfile = () => loadTranscodeProfile(context)
+  const saveProfile = () => saveTranscodeProfile(context)
+  onMounted(loadProfile)
+
+  return {
+    form,
+    formRef,
+    rules,
+    loading,
+    saving,
+    loadError,
+    canManage,
+    qualityRules,
+    positiveEvenRule: () => positiveEvenRule(t),
+    positiveIntegerRule: () => positiveIntegerRule(t),
+    enabledRules,
+    loadProfile,
+    addRung,
+    deleteRung,
+    saveProfile
+  }
+}
diff --git a/types/global.d.ts b/types/global.d.ts
index 418b981..6d371a5 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -48,6 +48,7 @@ declare global {
 
   declare interface IResponse<T = any> {
     code: number
+    message?: string
     data: T extends any ? T : T & any
   }
 

From 41151a7f1759308e89b54abf05ccac7f34e2708b Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Thu, 22 Oct 2026 14:23:47 +0800
Subject: [PATCH 49/59] =?UTF-8?q?feat(admin):=20=E5=89=A7=E9=9B=86?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E9=A1=B5=E5=B1=95=E7=A4=BA=E8=BD=AC=E7=A0=81?=
 =?UTF-8?q?=E4=BA=A7=E7=89=A9=E4=B8=8E=E5=B8=A7=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/transcode.ts                    |  30 +
 src/api/admin/types.ts                        |  72 ++
 src/constants/icons.ts                        |   2 +
 src/locales/en.ts                             |  58 ++
 src/locales/zh-CN.ts                          |  58 ++
 .../upload/EpisodeFormDialog.vue              |   3 +
 .../upload/EpisodeTranscodePanel.vue          | 816 ++++++++++++++++++
 7 files changed, 1039 insertions(+)
 create mode 100644 src/api/admin/transcode.ts
 create mode 100644 src/views/contentManagement/upload/EpisodeTranscodePanel.vue

diff --git a/src/api/admin/transcode.ts b/src/api/admin/transcode.ts
new file mode 100644
index 0000000..f6d2e86
--- /dev/null
+++ b/src/api/admin/transcode.ts
@@ -0,0 +1,30 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type { EpisodeTranscodeItem, MediaThumbnailResult, TranscodeTriggerResult } from './types'
+
+/** 分集编辑页聚合查询转码任务、清晰度与帧图。 */
+export const getEpisodeTranscodeApi = (episodeId: number | string) => {
+  return request.get<EpisodeTranscodeItem>({
+    url: `/admin/episodes/${episodeId}/transcode`
+  })
+}
+
+/** 按媒体分页读取帧图；页面切换时复用该接口。 */
+export const getMediaThumbnailsApi = (
+  mediaAssetId: number | string,
+  pageIndex: number,
+  pageSize: number
+) => {
+  return request.get<MediaThumbnailResult>({
+    url: `/admin/media/${mediaAssetId}/thumbnails`,
+    params: { pageIndex, pageSize }
+  })
+}
+
+/** 手动触发或重转当前分集绑定的媒体。 */
+export const triggerMediaTranscodeApi = (mediaAssetId: number | string) => {
+  return request.post<TranscodeTriggerResult>({
+    url: `/admin/media/${mediaAssetId}/transcode`
+  })
+}
diff --git a/src/api/admin/types.ts b/src/api/admin/types.ts
index d58e598..ad9d02d 100644
--- a/src/api/admin/types.ts
+++ b/src/api/admin/types.ts
@@ -248,6 +248,78 @@ export interface MediaTranscodeProfile {
   sprite: MediaTranscodeSprite
 }
 
+export interface MediaRenditionItem {
+  id: number
+  quality: string
+  qualityName: string
+  width: number
+  height: number
+  resolution: string
+  videoBitrateKbps: number
+  audioBitrateKbps: number
+  videoCodec: string
+  audioCodec?: string
+  container: string
+  hlsUrl: string
+  sizeBytes: number
+  durationSec: number
+  segmentCount: number
+  status: string
+}
+
+export interface MediaThumbnailFrameItem {
+  frameIndex: number
+  timeMs: number
+  endTimeMs?: number
+  imageUrl: string
+  spriteUrl: string
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export interface MediaThumbnailSpriteInfo {
+  spriteUrl?: string
+  spriteUrls: string[]
+  vttUrl?: string
+  columns: number
+  rows: number
+  totalFrames: number
+  thumbWidth: number
+  thumbHeight: number
+  intervalSeconds: number
+}
+
+export interface MediaThumbnailResult {
+  mediaAssetId?: number | null
+  episodeId?: number | null
+  /** READY / FAILED / EMPTY / INVALID / NO_EPISODE */
+  status: string
+  errorMsg?: string
+  pageIndex: number
+  pageSize: number
+  frames: PageResult<MediaThumbnailFrameItem>
+  sprite?: MediaThumbnailSpriteInfo | null
+}
+
+export interface EpisodeTranscodeItem {
+  episodeId: number
+  mediaAssetId?: number | null
+  taskId?: number | null
+  status: string
+  progress?: number
+  retryCount?: number
+  errorMsg?: string
+  renditions: MediaRenditionItem[]
+  thumbnails?: MediaThumbnailResult | null
+}
+
+export interface TranscodeTriggerResult {
+  taskId: number
+  status: string
+}
+
 export interface BannerItem {
   id: number
   imageUrl: string
diff --git a/src/constants/icons.ts b/src/constants/icons.ts
index e1b530c..2a448d5 100644
--- a/src/constants/icons.ts
+++ b/src/constants/icons.ts
@@ -37,6 +37,8 @@ export const AppIcons = {
   delete: 'material-symbols:delete-rounded',
   upload: 'material-symbols:upload-rounded',
   download: 'material-symbols:download-rounded',
+  copy: 'material-symbols:content-copy-rounded',
+  openInNew: 'material-symbols:open-in-new-rounded',
   visibility: 'material-symbols:visibility-rounded',
   arrowUp: 'material-symbols:arrow-upward-rounded',
   arrowDown: 'material-symbols:arrow-downward-rounded',
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 5d3fcf7..3cefb8a 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -529,6 +529,64 @@ export default {
     title: 'InputPassword',
     inputPasswordDes: 'Secondary packaging of Input components based on ElementPlus'
   },
+  episodeTranscode: {
+    title: 'Transcode outputs',
+    description: 'Review the transcode task, renditions and frame previews for this episode.',
+    statusLabel: 'Status',
+    progress: 'Progress',
+    retryCount: 'Retries',
+    reprocess: 'Transcode again',
+    reprocessing: 'Submitting',
+    triggerSuccess: 'Transcode task submitted',
+    loadFailed: 'Failed to load transcode outputs',
+    retryLoad: 'Reload',
+    triggerFailed: 'Failed to retry transcode',
+    noMedia: 'No uploaded media is bound to this episode yet.',
+    noRendition: 'No rendition outputs',
+    renditionTitle: 'Rendition outputs',
+    quality: 'Quality',
+    resolution: 'Resolution',
+    videoBitrate: 'Video bitrate',
+    audioBitrate: 'Audio bitrate',
+    codec: 'Codec',
+    container: 'Container',
+    fileSize: 'File size',
+    duration: 'Duration',
+    segments: 'Segments',
+    statusColumn: 'Status',
+    actions: 'Actions',
+    copyUrl: 'Copy playback URL',
+    openUrl: 'Open in new window',
+    copySuccess: 'Playback URL copied',
+    copyFailed: 'Failed to copy playback URL',
+    openFailed: 'Unable to open playback URL',
+    frameTitle: 'Frame previews',
+    frameView: 'Frames',
+    spriteView: 'Sprites',
+    frameCount: '{total} frames',
+    frameTime: 'Timestamp',
+    previewFrame: 'Preview frame at {time}',
+    spriteSheet: 'Sprite {index}',
+    spriteSheetFrames: '{count} frames',
+    noFrames: 'No frame previews',
+    noSprites: 'No sprite sheets available',
+    zoomTitle: 'Frame preview',
+    status: {
+      queued: 'Queued',
+      running: 'Transcoding',
+      success: 'Success',
+      failed: 'Failed',
+      empty: 'No output',
+      noVideo: 'No video',
+      noMediaAsset: 'No media asset',
+      noTask: 'No transcode task',
+      noEpisode: 'No episode binding',
+      episodeNotFound: 'Episode not found',
+      invalid: 'Invalid output',
+      ready: 'Ready',
+      unknown: 'Unknown'
+    }
+  },
   episodeBatch: {
     title: 'Batch upload episodes',
     entry: 'Batch upload',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 796b199..91de289 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -523,6 +523,64 @@ export default {
     title: '密码输入框',
     inputPasswordDes: '基于 ElementPlus 的 Input 组件二次封装'
   },
+  episodeTranscode: {
+    title: '转码产物',
+    description: '查看当前分集的转码任务、清晰度与帧图产物。',
+    statusLabel: '状态',
+    progress: '进度',
+    retryCount: '重试次数',
+    reprocess: '重新转码',
+    reprocessing: '正在触发',
+    triggerSuccess: '已提交转码任务',
+    loadFailed: '转码产物加载失败',
+    retryLoad: '重新加载',
+    triggerFailed: '重新转码失败',
+    noMedia: '当前分集尚未绑定已上传视频，暂无可查询的转码产物。',
+    noRendition: '暂无清晰度产物',
+    renditionTitle: '清晰度产物',
+    quality: '档位名称',
+    resolution: '分辨率',
+    videoBitrate: '视频码率',
+    audioBitrate: '音频码率',
+    codec: '编码',
+    container: '容器',
+    fileSize: '文件大小',
+    duration: '时长',
+    segments: '分片数',
+    statusColumn: '状态',
+    actions: '操作',
+    copyUrl: '复制播放地址',
+    openUrl: '新窗口打开',
+    copySuccess: '播放地址已复制',
+    copyFailed: '复制播放地址失败',
+    openFailed: '无法打开播放地址',
+    frameTitle: '帧图预览',
+    frameView: '逐帧',
+    spriteView: '雪碧图',
+    frameCount: '共 {total} 帧',
+    frameTime: '时间点',
+    previewFrame: '预览 {time} 帧图',
+    spriteSheet: '雪碧图 {index}',
+    spriteSheetFrames: '{count} 帧',
+    noFrames: '暂无帧图产物',
+    noSprites: '暂无可展示的雪碧图',
+    zoomTitle: '帧图预览',
+    status: {
+      queued: '排队中',
+      running: '转码中',
+      success: '成功',
+      failed: '失败',
+      empty: '暂无产物',
+      noVideo: '无视频',
+      noMediaAsset: '未绑定媒资',
+      noTask: '无转码任务',
+      noEpisode: '未绑定分集',
+      episodeNotFound: '分集不存在',
+      invalid: '产物异常',
+      ready: '就绪',
+      unknown: '未知状态'
+    }
+  },
   episodeBatch: {
     title: '批量上传剧集',
     entry: '批量上传',
diff --git a/src/views/contentManagement/upload/EpisodeFormDialog.vue b/src/views/contentManagement/upload/EpisodeFormDialog.vue
index 836927a..7b5224d 100644
--- a/src/views/contentManagement/upload/EpisodeFormDialog.vue
+++ b/src/views/contentManagement/upload/EpisodeFormDialog.vue
@@ -6,6 +6,7 @@ import { nextTick, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { createEpisodeApi, updateEpisodeApi } from '@/api/admin/episode'
 import { formatCount } from '@/utils/format'
+import EpisodeTranscodePanel from './EpisodeTranscodePanel.vue'
 import EpisodeVideoUploader from './EpisodeVideoUploader.vue'
 
 const props = defineProps({
@@ -263,6 +264,8 @@ defineExpose({ openCreate, openEdit })
       </section>
     </el-form>
 
+    <EpisodeTranscodePanel v-if="editingId" :episode-id="editingId" :active="dialogVisible" />
+
     <template #footer>
       <el-button :disabled="saving || uploadingVideo" @click="dialogVisible = false">
         取消
diff --git a/src/views/contentManagement/upload/EpisodeTranscodePanel.vue b/src/views/contentManagement/upload/EpisodeTranscodePanel.vue
new file mode 100644
index 0000000..a9fcc53
--- /dev/null
+++ b/src/views/contentManagement/upload/EpisodeTranscodePanel.vue
@@ -0,0 +1,816 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码产物：任务状态、清晰度列表、帧图与雪碧图预览 -->
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { ElMessage } from 'element-plus'
+import {
+  getEpisodeTranscodeApi,
+  getMediaThumbnailsApi,
+  triggerMediaTranscodeApi
+} from '@/api/admin/transcode'
+import type {
+  EpisodeTranscodeItem,
+  MediaRenditionItem,
+  MediaThumbnailFrameItem,
+  MediaThumbnailResult,
+  MediaThumbnailSpriteInfo
+} from '@/api/admin/types'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+import { useI18n } from '@/hooks/web/useI18n'
+
+const props = defineProps<{
+  episodeId: number
+  active: boolean
+}>()
+
+const { t } = useI18n()
+const { copy, isSupported } = useClipboard()
+
+const POLL_INTERVAL_MS = 4000
+const THUMBNAIL_PAGE_SIZE = 100
+const THUMBNAIL_PAGE_SIZES = [100, 200, 500]
+const FRAME_CARD_WIDTH = 128
+const PREVIEW_MAX_WIDTH = 520
+const PREVIEW_MAX_HEIGHT = 360
+const STATUS_KEYS: Record<string, string> = {
+  QUEUED: 'queued',
+  RUNNING: 'running',
+  SUCCESS: 'success',
+  FAILED: 'failed',
+  EMPTY: 'empty',
+  NO_VIDEO: 'noVideo',
+  NO_MEDIA_ASSET: 'noMediaAsset',
+  NO_TASK: 'noTask',
+  NO_EPISODE: 'noEpisode',
+  EPISODE_NOT_FOUND: 'episodeNotFound',
+  INVALID: 'invalid',
+  READY: 'ready'
+}
+
+const expanded = ref<string[]>(['transcode'])
+const detail = ref<EpisodeTranscodeItem | null>(null)
+const thumbnails = ref<MediaThumbnailResult | null>(null)
+const loading = ref(false)
+const thumbnailLoading = ref(false)
+const retriggering = ref(false)
+const errorMessage = ref('')
+const thumbnailError = ref('')
+const frameView = ref<'frames' | 'sprites'>('frames')
+const pageIndex = ref(1)
+const pageSize = ref(THUMBNAIL_PAGE_SIZE)
+const previewVisible = ref(false)
+const previewFrame = ref<MediaThumbnailFrameItem | null>(null)
+let pollTimer: ReturnType<typeof setTimeout> | null = null
+let requestSeq = 0
+let thumbnailSeq = 0
+
+const mediaAssetId = computed(() => Number(detail.value?.mediaAssetId || 0))
+const hasMedia = computed(() => mediaAssetId.value > 0)
+const normalizedStatus = computed(() => String(detail.value?.status || '').toUpperCase())
+const renditions = computed(() => detail.value?.renditions || [])
+const frames = computed(() => thumbnails.value?.frames?.list || [])
+const sprite = computed(() => thumbnails.value?.sprite || null)
+const spriteUrls = computed(() => sprite.value?.spriteUrls || [])
+const framesTotal = computed(() => Number(thumbnails.value?.frames?.total || 0))
+const isProcessing = computed(
+  () => normalizedStatus.value === 'QUEUED' || normalizedStatus.value === 'RUNNING'
+)
+const safeProgress = computed(() => Math.min(100, Math.max(0, Number(detail.value?.progress || 0))))
+
+const statusLabel = computed(() => {
+  const key = STATUS_KEYS[String(detail.value?.status || '').toUpperCase()] || 'unknown'
+  return t(`episodeTranscode.status.${key}`)
+})
+
+const statusTagType = computed(() => {
+  switch (normalizedStatus.value) {
+    case 'SUCCESS':
+      return 'success'
+    case 'RUNNING':
+      return 'warning'
+    case 'FAILED':
+      return 'danger'
+    case 'QUEUED':
+      return 'primary'
+    default:
+      return 'info'
+  }
+})
+
+const progressStatus = computed(() => {
+  if (normalizedStatus.value === 'SUCCESS') return 'success'
+  if (normalizedStatus.value === 'FAILED') return 'exception'
+  return undefined
+})
+
+const previewStyle = computed(() => {
+  const frame = previewFrame.value
+  const info = sprite.value
+  if (!frame || !info) return {}
+  const scale = Math.min(
+    PREVIEW_MAX_WIDTH / Math.max(1, frame.width),
+    PREVIEW_MAX_HEIGHT / Math.max(1, frame.height)
+  )
+  return frameStyle(frame, info, scale)
+})
+
+watch(
+  [() => props.episodeId, () => props.active],
+  ([episodeId, active], [previousEpisodeId]) => {
+    if (episodeId !== previousEpisodeId) resetState()
+    if (!active) {
+      stopPolling()
+      return
+    }
+    if (episodeId) void loadDetail()
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(stopPolling)
+
+function resetState() {
+  stopPolling()
+  requestSeq += 1
+  thumbnailSeq += 1
+  detail.value = null
+  thumbnails.value = null
+  errorMessage.value = ''
+  thumbnailError.value = ''
+  pageIndex.value = 1
+  pageSize.value = THUMBNAIL_PAGE_SIZE
+  frameView.value = 'frames'
+  previewVisible.value = false
+  previewFrame.value = null
+}
+
+function stopPolling() {
+  if (pollTimer) clearTimeout(pollTimer)
+  pollTimer = null
+}
+
+function schedulePolling() {
+  stopPolling()
+  if (!props.active || !isProcessing.value) return
+  pollTimer = setTimeout(() => {
+    pollTimer = null
+    void loadDetail(true)
+  }, POLL_INTERVAL_MS)
+}
+
+async function loadDetail(silent = false) {
+  if (!props.active || !props.episodeId) return
+  const seq = ++requestSeq
+  stopPolling()
+  if (!silent) loading.value = true
+  errorMessage.value = ''
+  try {
+    const response = await getEpisodeTranscodeApi(props.episodeId)
+    if (seq !== requestSeq) return
+    const result = response.data
+    detail.value = result
+    if (result.thumbnails) {
+      thumbnails.value = result.thumbnails
+      pageIndex.value = result.thumbnails.pageIndex || 1
+      pageSize.value = result.thumbnails.pageSize || THUMBNAIL_PAGE_SIZE
+      thumbnailError.value = ''
+    }
+    if (isProcessing.value) schedulePolling()
+  } catch (error) {
+    if (seq !== requestSeq) return
+    errorMessage.value = errorText(error, t('episodeTranscode.loadFailed'))
+    stopPolling()
+  } finally {
+    if (seq === requestSeq) loading.value = false
+  }
+}
+
+async function loadThumbnailPage() {
+  if (!hasMedia.value || thumbnailLoading.value) return
+  const seq = ++thumbnailSeq
+  thumbnailLoading.value = true
+  thumbnailError.value = ''
+  try {
+    const response = await getMediaThumbnailsApi(
+      mediaAssetId.value,
+      pageIndex.value,
+      pageSize.value
+    )
+    if (seq !== thumbnailSeq) return
+    const result = response.data
+    thumbnails.value = result
+    pageIndex.value = result.pageIndex || pageIndex.value
+    pageSize.value = result.pageSize || pageSize.value
+  } catch (error) {
+    if (seq !== thumbnailSeq) return
+    thumbnailError.value = errorText(error, t('episodeTranscode.loadFailed'))
+  } finally {
+    if (seq === thumbnailSeq) thumbnailLoading.value = false
+  }
+}
+
+async function retrigger() {
+  if (!hasMedia.value || isProcessing.value || retriggering.value) return
+  retriggering.value = true
+  errorMessage.value = ''
+  try {
+    await triggerMediaTranscodeApi(mediaAssetId.value)
+    if (detail.value) {
+      detail.value = { ...detail.value, status: 'QUEUED', progress: 0, errorMsg: '' }
+    }
+    ElMessage.success(t('episodeTranscode.triggerSuccess'))
+    await loadDetail(true)
+    schedulePolling()
+  } catch (error) {
+    errorMessage.value = errorText(error, t('episodeTranscode.triggerFailed'))
+  } finally {
+    retriggering.value = false
+  }
+}
+
+function changePage(value: number) {
+  pageIndex.value = value
+  void loadThumbnailPage()
+}
+
+function changePageSize(value: number) {
+  pageSize.value = value
+  pageIndex.value = 1
+  void loadThumbnailPage()
+}
+
+async function copyPlayUrl(url: string) {
+  if (!url) return
+  if (!isSupported.value) {
+    ElMessage.error(t('episodeTranscode.copyFailed'))
+    return
+  }
+  try {
+    await copy(url)
+    ElMessage.success(t('episodeTranscode.copySuccess'))
+  } catch {
+    ElMessage.error(t('episodeTranscode.copyFailed'))
+  }
+}
+
+function openPlayUrl(url: string) {
+  if (!url || !window.open(url, '_blank', 'noopener,noreferrer')) {
+    ElMessage.error(t('episodeTranscode.openFailed'))
+  }
+}
+
+function openFramePreview(frame: MediaThumbnailFrameItem) {
+  previewFrame.value = frame
+  previewVisible.value = true
+}
+
+function frameStyle(frame: MediaThumbnailFrameItem, info: MediaThumbnailSpriteInfo, scale: number) {
+  return {
+    width: `${Math.round(frame.width * scale)}px`,
+    height: `${Math.round(frame.height * scale)}px`,
+    backgroundImage: `url("${frame.spriteUrl || frame.imageUrl}")`,
+    backgroundPosition: `-${Math.round(frame.x * scale)}px -${Math.round(frame.y * scale)}px`,
+    backgroundSize: `${Math.round((info.columns || 1) * frame.width * scale)}px ${Math.round(
+      (info.rows || 1) * frame.height * scale
+    )}px`
+  }
+}
+
+function frameCardStyle(frame: MediaThumbnailFrameItem) {
+  if (!sprite.value) return {}
+  return frameStyle(frame, sprite.value, FRAME_CARD_WIDTH / Math.max(1, frame.width))
+}
+
+function spriteFrameCount(index: number) {
+  const info = sprite.value
+  if (!info) return 0
+  const capacity = Math.max(1, info.columns * info.rows)
+  return Math.max(0, Math.min(capacity, info.totalFrames - index * capacity))
+}
+
+function renditionStatusLabel(rendition: MediaRenditionItem) {
+  const key = STATUS_KEYS[String(rendition.status || '').toUpperCase()] || 'unknown'
+  return t(`episodeTranscode.status.${key}`)
+}
+
+function renditionStatusType(status: string) {
+  if (status === 'ready') return 'success'
+  if (status === 'failed') return 'danger'
+  return 'info'
+}
+
+function formatBytes(value?: number) {
+  const size = Number(value || 0)
+  if (size >= 1024 * 1024 * 1024) return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`
+  if (size >= 1024 * 1024) return `${(size / 1024 / 1024).toFixed(1)} MB`
+  if (size >= 1024) return `${Math.round(size / 1024)} KB`
+  return `${size} B`
+}
+
+function formatDuration(seconds?: number) {
+  const total = Math.max(0, Number(seconds || 0))
+  const minutes = Math.floor(total / 60)
+  return `${String(minutes).padStart(2, '0')}:${String(total % 60).padStart(2, '0')}`
+}
+
+function formatTimeMs(milliseconds?: number) {
+  const totalMs = Math.max(0, Number(milliseconds || 0))
+  const totalSeconds = Math.floor(totalMs / 1000)
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${Math.floor(
+    (totalMs % 1000) / 100
+  )}`
+}
+
+function errorText(error: unknown, fallback: string) {
+  return error instanceof Error && error.message ? error.message : fallback
+}
+</script>
+
+<template>
+  <section class="episode-editor-section episode-transcode-panel">
+    <el-collapse v-model="expanded">
+      <el-collapse-item name="transcode">
+        <template #title>
+          <div class="episode-transcode-panel__heading">
+            <span>{{ t('episodeTranscode.title') }}</span>
+            <el-tag v-if="detail" :type="statusTagType" effect="light" size="small">
+              {{ statusLabel }}
+            </el-tag>
+            <el-progress
+              v-if="detail && hasMedia"
+              class="episode-transcode-panel__heading-progress"
+              :percentage="safeProgress"
+              :status="progressStatus"
+              :stroke-width="6"
+              :show-text="false"
+            />
+          </div>
+        </template>
+
+        <p class="episode-transcode-panel__description">
+          {{ t('episodeTranscode.description') }}
+        </p>
+        <el-skeleton v-if="loading && !detail" :rows="4" animated />
+        <div v-else-if="errorMessage" class="episode-transcode-panel__error">
+          <el-alert type="error" :title="errorMessage" :closable="false" show-icon />
+          <el-button size="small" @click="loadDetail()">
+            <AppIcon :icon="AppIcons.refresh" :size="16" />
+            {{ t('episodeTranscode.retryLoad') }}
+          </el-button>
+        </div>
+        <el-empty
+          v-else-if="detail && !hasMedia"
+          :description="t('episodeTranscode.noMedia')"
+          :image-size="72"
+        />
+        <template v-else-if="detail">
+          <div class="episode-transcode-panel__summary">
+            <div class="episode-transcode-panel__metric">
+              <span>{{ t('episodeTranscode.statusLabel') }}</span>
+              <el-tag :type="statusTagType" effect="light">{{ statusLabel }}</el-tag>
+            </div>
+            <div class="episode-transcode-panel__metric">
+              <span>{{ t('episodeTranscode.progress') }}</span>
+              <b>{{ safeProgress }}%</b>
+            </div>
+            <div class="episode-transcode-panel__metric">
+              <span>{{ t('episodeTranscode.retryCount') }}</span>
+              <b>{{ detail.retryCount || 0 }}</b>
+            </div>
+            <el-button
+              class="episode-transcode-panel__retry"
+              type="primary"
+              plain
+              :loading="retriggering"
+              :disabled="!hasMedia || isProcessing || retriggering"
+              @click="retrigger"
+            >
+              <AppIcon :icon="AppIcons.restart" :size="16" />
+              {{
+                retriggering ? t('episodeTranscode.reprocessing') : t('episodeTranscode.reprocess')
+              }}
+            </el-button>
+          </div>
+          <el-progress
+            class="episode-transcode-panel__progress"
+            :percentage="safeProgress"
+            :status="progressStatus"
+            :stroke-width="8"
+          />
+          <el-alert
+            v-if="detail.errorMsg"
+            class="episode-transcode-panel__error-alert"
+            type="error"
+            :title="detail.errorMsg"
+            :closable="false"
+            show-icon
+          />
+
+          <div class="episode-transcode-panel__subheading">
+            <h4>{{ t('episodeTranscode.renditionTitle') }}</h4>
+          </div>
+          <el-table
+            :data="renditions"
+            size="small"
+            border
+            class="episode-transcode-panel__table"
+            :empty-text="t('episodeTranscode.noRendition')"
+          >
+            <el-table-column
+              prop="qualityName"
+              :label="t('episodeTranscode.quality')"
+              min-width="88"
+            />
+            <el-table-column
+              prop="resolution"
+              :label="t('episodeTranscode.resolution')"
+              min-width="105"
+            />
+            <el-table-column :label="t('episodeTranscode.videoBitrate')" min-width="105">
+              <template #default="{ row }">{{ row.videoBitrateKbps }} kbps</template>
+            </el-table-column>
+            <el-table-column :label="t('episodeTranscode.audioBitrate')" min-width="105">
+              <template #default="{ row }">{{ row.audioBitrateKbps }} kbps</template>
+            </el-table-column>
+            <el-table-column
+              prop="videoCodec"
+              :label="t('episodeTranscode.codec')"
+              min-width="82"
+            />
+            <el-table-column
+              prop="container"
+              :label="t('episodeTranscode.container')"
+              min-width="82"
+            />
+            <el-table-column :label="t('episodeTranscode.fileSize')" min-width="92">
+              <template #default="{ row }">{{ formatBytes(row.sizeBytes) }}</template>
+            </el-table-column>
+            <el-table-column :label="t('episodeTranscode.duration')" min-width="76">
+              <template #default="{ row }">{{ formatDuration(row.durationSec) }}</template>
+            </el-table-column>
+            <el-table-column
+              prop="segmentCount"
+              :label="t('episodeTranscode.segments')"
+              min-width="76"
+            />
+            <el-table-column :label="t('episodeTranscode.statusColumn')" min-width="82">
+              <template #default="{ row }">
+                <el-tag :type="renditionStatusType(row.status)" effect="light" size="small">
+                  {{ renditionStatusLabel(row) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              :label="t('episodeTranscode.actions')"
+              width="92"
+              fixed="right"
+              align="center"
+            >
+              <template #default="{ row }">
+                <el-tooltip :content="t('episodeTranscode.copyUrl')" placement="top">
+                  <el-button text circle @click="copyPlayUrl(row.hlsUrl)">
+                    <AppIcon :icon="AppIcons.copy" :size="17" />
+                  </el-button>
+                </el-tooltip>
+                <el-tooltip :content="t('episodeTranscode.openUrl')" placement="top">
+                  <el-button text circle @click="openPlayUrl(row.hlsUrl)">
+                    <AppIcon :icon="AppIcons.openInNew" :size="17" />
+                  </el-button>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <div class="episode-transcode-panel__subheading">
+            <h4>{{ t('episodeTranscode.frameTitle') }}</h4>
+            <div class="episode-transcode-panel__frame-tools">
+              <span>{{ t('episodeTranscode.frameCount', { total: framesTotal }) }}</span>
+              <el-radio-group v-model="frameView" size="small">
+                <el-radio-button label="frames">{{
+                  t('episodeTranscode.frameView')
+                }}</el-radio-button>
+                <el-radio-button label="sprites">{{
+                  t('episodeTranscode.spriteView')
+                }}</el-radio-button>
+              </el-radio-group>
+            </div>
+          </div>
+          <el-alert
+            v-if="thumbnailError"
+            type="error"
+            :title="thumbnailError"
+            :closable="false"
+            show-icon
+          >
+            <template #default>
+              <el-button size="small" text @click="loadThumbnailPage">
+                {{ t('episodeTranscode.retryLoad') }}
+              </el-button>
+            </template>
+          </el-alert>
+          <div v-loading="thumbnailLoading">
+            <template v-if="frameView === 'frames'">
+              <div v-if="frames.length" class="episode-transcode-panel__frames">
+                <button
+                  v-for="frame in frames"
+                  :key="frame.frameIndex"
+                  class="episode-transcode-panel__frame"
+                  type="button"
+                  :aria-label="
+                    t('episodeTranscode.previewFrame', { time: formatTimeMs(frame.timeMs) })
+                  "
+                  @click="openFramePreview(frame)"
+                >
+                  <span
+                    class="episode-transcode-panel__frame-image"
+                    :style="frameCardStyle(frame)"
+                  ></span>
+                  <span>{{ formatTimeMs(frame.timeMs) }}</span>
+                </button>
+              </div>
+              <el-empty v-else :description="t('episodeTranscode.noFrames')" :image-size="58" />
+              <el-pagination
+                v-if="framesTotal"
+                class="episode-transcode-panel__pagination"
+                background
+                layout="sizes, prev, pager, next"
+                :current-page="pageIndex"
+                :page-size="pageSize"
+                :page-sizes="THUMBNAIL_PAGE_SIZES"
+                :total="framesTotal"
+                @current-change="changePage"
+                @size-change="changePageSize"
+              />
+            </template>
+            <div v-else-if="spriteUrls.length && sprite" class="episode-transcode-panel__sprites">
+              <figure
+                v-for="(url, index) in spriteUrls"
+                :key="url"
+                class="episode-transcode-panel__sprite"
+              >
+                <div
+                  class="episode-transcode-panel__sprite-frame"
+                  :style="{
+                    aspectRatio: `${sprite.columns * sprite.thumbWidth} / ${
+                      sprite.rows * sprite.thumbHeight
+                    }`
+                  }"
+                >
+                  <el-image
+                    :src="url"
+                    :preview-src-list="spriteUrls"
+                    :initial-index="index"
+                    fit="contain"
+                    preview-teleported
+                    hide-on-click-modal
+                  />
+                  <span
+                    class="episode-transcode-panel__sprite-grid"
+                    :style="{
+                      backgroundSize: `calc(100% / ${sprite.columns}) calc(100% / ${sprite.rows})`
+                    }"
+                  ></span>
+                </div>
+                <figcaption>
+                  <b>{{ t('episodeTranscode.spriteSheet', { index: index + 1 }) }}</b>
+                  <span>{{
+                    t('episodeTranscode.spriteSheetFrames', { count: spriteFrameCount(index) })
+                  }}</span>
+                </figcaption>
+              </figure>
+            </div>
+            <el-empty v-else :description="t('episodeTranscode.noSprites')" :image-size="58" />
+          </div>
+        </template>
+      </el-collapse-item>
+    </el-collapse>
+
+    <el-dialog
+      v-model="previewVisible"
+      :title="t('episodeTranscode.zoomTitle')"
+      width="min(92vw, 600px)"
+      append-to-body
+      destroy-on-close
+    >
+      <div class="episode-transcode-panel__preview-shell">
+        <div class="episode-transcode-panel__preview-image" :style="previewStyle"></div>
+      </div>
+    </el-dialog>
+  </section>
+</template>
+
+<style scoped>
+.episode-transcode-panel :deep(.el-collapse) {
+  border: 0;
+}
+
+.episode-transcode-panel :deep(.el-collapse-item__header),
+.episode-transcode-panel :deep(.el-collapse-item__wrap) {
+  background: transparent;
+}
+
+.episode-transcode-panel__heading {
+  display: flex;
+  width: 100%;
+  padding-right: 12px;
+  font-size: 15px;
+  font-weight: 650;
+  color: var(--el-text-color-primary);
+  align-items: center;
+  gap: 10px;
+}
+
+.episode-transcode-panel__heading-progress {
+  width: 110px;
+  margin-left: auto;
+}
+
+.episode-transcode-panel__description {
+  margin: 0 0 14px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.episode-transcode-panel__error {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  flex-direction: column;
+}
+
+.episode-transcode-panel__summary {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+
+.episode-transcode-panel__metric {
+  display: flex;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  align-items: center;
+  gap: 8px;
+}
+
+.episode-transcode-panel__metric b {
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.episode-transcode-panel__retry {
+  margin-left: auto;
+}
+
+.episode-transcode-panel__progress {
+  margin-top: 12px;
+}
+
+.episode-transcode-panel__error-alert,
+.episode-transcode-panel__thumbnail-error {
+  margin-top: 12px;
+}
+
+.episode-transcode-panel__subheading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 18px 0 10px;
+}
+
+.episode-transcode-panel__subheading h4 {
+  margin: 0;
+  font-size: 13px;
+}
+
+.episode-transcode-panel__table {
+  width: 100%;
+}
+
+.episode-transcode-panel__frame-tools {
+  display: flex;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  align-items: center;
+  gap: 12px;
+}
+
+.episode-transcode-panel__frames {
+  display: grid;
+  justify-content: center;
+  gap: 10px;
+  grid-template-columns: repeat(4, 128px);
+}
+
+.episode-transcode-panel__frame {
+  display: flex;
+  min-width: 0;
+  padding: 0;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  cursor: zoom-in;
+  background: transparent;
+  border: 0;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.episode-transcode-panel__frame-image {
+  display: block;
+  overflow: hidden;
+  background-color: var(--el-fill-color-dark);
+  background-repeat: no-repeat;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 7px;
+}
+
+.episode-transcode-panel__frame:hover .episode-transcode-panel__frame-image {
+  border-color: var(--el-color-primary);
+}
+
+.episode-transcode-panel__pagination {
+  margin-top: 14px;
+  justify-content: flex-end;
+}
+
+.episode-transcode-panel__sprites {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.episode-transcode-panel__sprite {
+  min-width: 0;
+  margin: 0;
+}
+
+.episode-transcode-panel__sprite-frame {
+  position: relative;
+  overflow: hidden;
+  background: var(--el-fill-color-dark);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+}
+
+.episode-transcode-panel__sprite-frame :deep(.el-image) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.episode-transcode-panel__sprite-grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(to right, rgb(255 255 255 / 34%) 1px, transparent 1px),
+    linear-gradient(to bottom, rgb(255 255 255 / 34%) 1px, transparent 1px);
+  background-repeat: repeat;
+}
+
+.episode-transcode-panel__sprite figcaption {
+  display: flex;
+  padding-top: 6px;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.episode-transcode-panel__preview-shell {
+  display: flex;
+  min-height: 240px;
+  align-items: center;
+  justify-content: center;
+  background: var(--el-fill-color-dark);
+  border-radius: 8px;
+}
+
+.episode-transcode-panel__preview-image {
+  background-repeat: no-repeat;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+}
+
+@media (width <= 600px) {
+  .episode-transcode-panel__frames {
+    grid-template-columns: repeat(2, 128px);
+  }
+
+  .episode-transcode-panel__summary {
+    align-items: flex-start;
+  }
+
+  .episode-transcode-panel__retry {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+</style>

From e2ca3bfa81cbb4b67b10ccb61fd55e8ca4710876 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Thu, 22 Oct 2026 14:47:01 +0800
Subject: [PATCH 50/59] =?UTF-8?q?refactor(admin):=20=E6=8B=86=E5=88=86?=
 =?UTF-8?q?=E5=89=A7=E9=9B=86=E8=BD=AC=E7=A0=81=E4=BA=A7=E7=89=A9=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plans/2026-10-22-transcode-panel-split.md |  26 +
 docs/plans/PROGRESS.md                        |  49 ++
 .../upload/EpisodeTranscodeFrames.vue         | 315 +++++++++
 .../upload/EpisodeTranscodePanel.vue          | 666 ++----------------
 .../upload/EpisodeTranscodeRenditions.vue     | 119 ++++
 .../upload/EpisodeTranscodeStatusBadge.vue    |  45 ++
 .../upload/EpisodeTranscodeStatusPanel.vue    | 155 ++++
 .../upload/episodeTranscodeUi.ts              |  93 +++
 8 files changed, 860 insertions(+), 608 deletions(-)
 create mode 100644 docs/plans/2026-10-22-transcode-panel-split.md
 create mode 100644 src/views/contentManagement/upload/EpisodeTranscodeFrames.vue
 create mode 100644 src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue
 create mode 100644 src/views/contentManagement/upload/EpisodeTranscodeStatusBadge.vue
 create mode 100644 src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue
 create mode 100644 src/views/contentManagement/upload/episodeTranscodeUi.ts

diff --git a/docs/plans/2026-10-22-transcode-panel-split.md b/docs/plans/2026-10-22-transcode-panel-split.md
new file mode 100644
index 0000000..7d27a25
--- /dev/null
+++ b/docs/plans/2026-10-22-transcode-panel-split.md
@@ -0,0 +1,26 @@
+# 剧集转码面板组件拆分
+
+## 目标
+
+- 将 `EpisodeTranscodePanel.vue` 从 816 行降到 500 行以内。
+- 状态轮询、分页请求与切集重置继续由父面板统一管理。
+- UI 按职责拆为状态徽标、状态操作区、清晰度表格、帧图预览。
+
+## 组件
+
+1. `EpisodeTranscodeStatusBadge.vue`：折叠标题中的状态与进度。
+2. `EpisodeTranscodeStatusPanel.vue`：状态、进度、重试次数、错误与重转按钮。
+3. `EpisodeTranscodeRenditions.vue`：清晰度表格、复制地址、新窗口打开。
+4. `EpisodeTranscodeFrames.vue`：逐帧网格、雪碧图、分页与放大预览。
+
+公共状态映射与格式化放入 `episodeTranscodeUi.ts`。
+
+## 风险
+
+- 父组件仍负责全部接口、轮询、请求序号和分页状态，子组件只通过 props/emits 交互。
+- 不新增依赖、不改接口和 locales 文案。
+
+## 验证
+
+- `wc -l` 确认所有相关文件不超过 500 行。
+- `pnpm lint:eslint`、`pnpm build:dev`。
diff --git a/docs/plans/PROGRESS.md b/docs/plans/PROGRESS.md
index fc4aa24..c714667 100644
--- a/docs/plans/PROGRESS.md
+++ b/docs/plans/PROGRESS.md
@@ -51,3 +51,52 @@ Build successful. Please see dist-dev directory
 ```
 
 解读：开发构建成功；circular chunk 为仓库既有 Element Plus 分包警告，本次未改构建配置。
+
+## 2026-10-22 剧集转码面板组件拆分
+
+- 分支：`feature/transcode-panel-split`
+- 基线：`develop` / `origin/develop` = `52b10d3`
+- 计划：`docs/plans/2026-10-22-transcode-panel-split.md`
+
+已读取 `AGENTS.md` 与 `CODING_STANDARDS.md`。当前
+`EpisodeTranscodePanel.vue` 为 816 行，超过单文件 500 行红线。
+拆分将保持父组件的数据获取、轮询清理、分页请求与切集重置逻辑不变。
+
+### 拆分结果
+
+```text
+$ wc -l src/views/contentManagement/upload/EpisodeTranscodePanel.vue \
+  src/views/contentManagement/upload/EpisodeTranscodeStatusBadge.vue \
+  src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue \
+  src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue \
+  src/views/contentManagement/upload/EpisodeTranscodeFrames.vue \
+  src/views/contentManagement/upload/episodeTranscodeUi.ts
+266 EpisodeTranscodePanel.vue
+45 EpisodeTranscodeStatusBadge.vue
+155 EpisodeTranscodeStatusPanel.vue
+119 EpisodeTranscodeRenditions.vue
+315 EpisodeTranscodeFrames.vue
+93 episodeTranscodeUi.ts
+```
+
+解读：父面板只保留接口调用、轮询、请求序号、分页状态与组件组合；
+状态、清晰度、帧图分别独立，全部文件均低于 500 行。
+
+### 门禁
+
+```text
+$ pnpm ts:check
+> vue-tsc --noEmit --skipLibCheck
+（通过）
+
+$ pnpm lint:eslint
+> eslint --fix --ext .js,.ts,.vue ./src
+（0 error / 0 warning）
+
+$ pnpm build:dev
+ WARN  Circular chunk: element-plus -> vue-chunks -> element-plus.
+Build successful. Please see dist-dev directory
+```
+
+解读：组件 props/emits、类型检查、ESLint 和开发构建全部通过；
+循环 chunk 为项目既有警告。轮询启停、接口路径、分页参数和 locales 文案未改变。
diff --git a/src/views/contentManagement/upload/EpisodeTranscodeFrames.vue b/src/views/contentManagement/upload/EpisodeTranscodeFrames.vue
new file mode 100644
index 0000000..d2c3d50
--- /dev/null
+++ b/src/views/contentManagement/upload/EpisodeTranscodeFrames.vue
@@ -0,0 +1,315 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码逐帧、雪碧图与分页预览 -->
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type {
+  MediaThumbnailFrameItem,
+  MediaThumbnailResult,
+  MediaThumbnailSpriteInfo
+} from '@/api/admin/types'
+import { useI18n } from '@/hooks/web/useI18n'
+import { formatTimeMs, THUMBNAIL_PAGE_SIZES } from './episodeTranscodeUi'
+
+interface FramesView {
+  data: MediaThumbnailResult | null
+  loading: boolean
+  errorMessage: string
+  pageIndex: number
+  pageSize: number
+}
+
+const props = defineProps<{
+  view: FramesView
+}>()
+
+const emit = defineEmits<{
+  pageChange: [value: number]
+  pageSizeChange: [value: number]
+  retry: []
+}>()
+
+const FRAME_CARD_WIDTH = 128
+const PREVIEW_MAX_WIDTH = 520
+const PREVIEW_MAX_HEIGHT = 360
+
+const { t } = useI18n()
+const frameView = ref<'frames' | 'sprites'>('frames')
+const previewVisible = ref(false)
+const previewFrame = ref<MediaThumbnailFrameItem | null>(null)
+const frames = computed(() => props.view.data?.frames?.list || [])
+const sprite = computed(() => props.view.data?.sprite || null)
+const spriteUrls = computed(() => sprite.value?.spriteUrls || [])
+const framesTotal = computed(() => Number(props.view.data?.frames?.total || 0))
+const previewStyle = computed(() => {
+  const frame = previewFrame.value
+  const info = sprite.value
+  if (!frame || !info) return {}
+  const scale = Math.min(
+    PREVIEW_MAX_WIDTH / Math.max(1, frame.width),
+    PREVIEW_MAX_HEIGHT / Math.max(1, frame.height)
+  )
+  return frameStyle(frame, info, scale)
+})
+
+function openFramePreview(frame: MediaThumbnailFrameItem) {
+  previewFrame.value = frame
+  previewVisible.value = true
+}
+
+function frameStyle(frame: MediaThumbnailFrameItem, info: MediaThumbnailSpriteInfo, scale: number) {
+  return {
+    width: `${Math.round(frame.width * scale)}px`,
+    height: `${Math.round(frame.height * scale)}px`,
+    backgroundImage: `url("${frame.spriteUrl || frame.imageUrl}")`,
+    backgroundPosition: `-${Math.round(frame.x * scale)}px -${Math.round(frame.y * scale)}px`,
+    backgroundSize: `${Math.round((info.columns || 1) * frame.width * scale)}px ${Math.round(
+      (info.rows || 1) * frame.height * scale
+    )}px`
+  }
+}
+
+function frameCardStyle(frame: MediaThumbnailFrameItem) {
+  if (!sprite.value) return {}
+  return frameStyle(frame, sprite.value, FRAME_CARD_WIDTH / Math.max(1, frame.width))
+}
+
+function spriteFrameCount(index: number) {
+  const info = sprite.value
+  if (!info) return 0
+  const capacity = Math.max(1, info.columns * info.rows)
+  return Math.max(0, Math.min(capacity, info.totalFrames - index * capacity))
+}
+</script>
+
+<template>
+  <div class="episode-transcode-frames__heading">
+    <h4>{{ t('episodeTranscode.frameTitle') }}</h4>
+    <div class="episode-transcode-frames__tools">
+      <span>{{ t('episodeTranscode.frameCount', { total: framesTotal }) }}</span>
+      <el-radio-group v-model="frameView" size="small">
+        <el-radio-button label="frames">{{ t('episodeTranscode.frameView') }}</el-radio-button>
+        <el-radio-button label="sprites">{{ t('episodeTranscode.spriteView') }}</el-radio-button>
+      </el-radio-group>
+    </div>
+  </div>
+  <el-alert
+    v-if="view.errorMessage"
+    type="error"
+    :title="view.errorMessage"
+    :closable="false"
+    show-icon
+  >
+    <template #default>
+      <el-button size="small" text @click="emit('retry')">
+        {{ t('episodeTranscode.retryLoad') }}
+      </el-button>
+    </template>
+  </el-alert>
+  <div v-loading="view.loading">
+    <template v-if="frameView === 'frames'">
+      <div v-if="frames.length" class="episode-transcode-frames__grid">
+        <button
+          v-for="frame in frames"
+          :key="frame.frameIndex"
+          class="episode-transcode-frames__card"
+          type="button"
+          :aria-label="t('episodeTranscode.previewFrame', { time: formatTimeMs(frame.timeMs) })"
+          @click="openFramePreview(frame)"
+        >
+          <span class="episode-transcode-frames__image" :style="frameCardStyle(frame)"></span>
+          <span>{{ formatTimeMs(frame.timeMs) }}</span>
+        </button>
+      </div>
+      <el-empty v-else :description="t('episodeTranscode.noFrames')" :image-size="58" />
+      <el-pagination
+        v-if="framesTotal"
+        class="episode-transcode-frames__pagination"
+        background
+        layout="sizes, prev, pager, next"
+        :current-page="view.pageIndex"
+        :page-size="view.pageSize"
+        :page-sizes="THUMBNAIL_PAGE_SIZES"
+        :total="framesTotal"
+        @current-change="emit('pageChange', $event)"
+        @size-change="emit('pageSizeChange', $event)"
+      />
+    </template>
+    <div v-else-if="spriteUrls.length && sprite" class="episode-transcode-frames__sprites">
+      <figure
+        v-for="(url, index) in spriteUrls"
+        :key="url"
+        class="episode-transcode-frames__sprite"
+      >
+        <div
+          class="episode-transcode-frames__sprite-frame"
+          :style="{
+            aspectRatio: `${sprite.columns * sprite.thumbWidth} / ${
+              sprite.rows * sprite.thumbHeight
+            }`
+          }"
+        >
+          <el-image
+            :src="url"
+            :preview-src-list="spriteUrls"
+            :initial-index="index"
+            fit="contain"
+            preview-teleported
+            hide-on-click-modal
+          />
+          <span
+            class="episode-transcode-frames__sprite-grid"
+            :style="{
+              backgroundSize: `calc(100% / ${sprite.columns}) calc(100% / ${sprite.rows})`
+            }"
+          ></span>
+        </div>
+        <figcaption>
+          <b>{{ t('episodeTranscode.spriteSheet', { index: index + 1 }) }}</b>
+          <span>{{
+            t('episodeTranscode.spriteSheetFrames', { count: spriteFrameCount(index) })
+          }}</span>
+        </figcaption>
+      </figure>
+    </div>
+    <el-empty v-else :description="t('episodeTranscode.noSprites')" :image-size="58" />
+  </div>
+
+  <el-dialog
+    v-model="previewVisible"
+    :title="t('episodeTranscode.zoomTitle')"
+    width="min(92vw, 600px)"
+    append-to-body
+    destroy-on-close
+  >
+    <div class="episode-transcode-frames__preview-shell">
+      <div class="episode-transcode-frames__preview-image" :style="previewStyle"></div>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+.episode-transcode-frames__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 18px 0 10px;
+}
+
+.episode-transcode-frames__heading h4 {
+  margin: 0;
+  font-size: 13px;
+}
+
+.episode-transcode-frames__tools {
+  display: flex;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  align-items: center;
+  gap: 12px;
+}
+
+.episode-transcode-frames__grid {
+  display: grid;
+  justify-content: center;
+  gap: 10px;
+  grid-template-columns: repeat(4, 128px);
+}
+
+.episode-transcode-frames__card {
+  display: flex;
+  min-width: 0;
+  padding: 0;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  cursor: zoom-in;
+  background: transparent;
+  border: 0;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.episode-transcode-frames__image {
+  display: block;
+  overflow: hidden;
+  background-color: var(--el-fill-color-dark);
+  background-repeat: no-repeat;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 7px;
+}
+
+.episode-transcode-frames__card:hover .episode-transcode-frames__image {
+  border-color: var(--el-color-primary);
+}
+
+.episode-transcode-frames__pagination {
+  margin-top: 14px;
+  justify-content: flex-end;
+}
+
+.episode-transcode-frames__sprites {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.episode-transcode-frames__sprite {
+  min-width: 0;
+  margin: 0;
+}
+
+.episode-transcode-frames__sprite-frame {
+  position: relative;
+  overflow: hidden;
+  background: var(--el-fill-color-dark);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+}
+
+.episode-transcode-frames__sprite-frame :deep(.el-image) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.episode-transcode-frames__sprite-grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(to right, rgb(255 255 255 / 34%) 1px, transparent 1px),
+    linear-gradient(to bottom, rgb(255 255 255 / 34%) 1px, transparent 1px);
+  background-repeat: repeat;
+}
+
+.episode-transcode-frames__sprite figcaption {
+  display: flex;
+  padding-top: 6px;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.episode-transcode-frames__preview-shell {
+  display: flex;
+  min-height: 240px;
+  background: var(--el-fill-color-dark);
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+}
+
+.episode-transcode-frames__preview-image {
+  background-repeat: no-repeat;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+}
+
+@media (width <= 600px) {
+  .episode-transcode-frames__grid {
+    grid-template-columns: repeat(2, 128px);
+  }
+}
+</style>
diff --git a/src/views/contentManagement/upload/EpisodeTranscodePanel.vue b/src/views/contentManagement/upload/EpisodeTranscodePanel.vue
index a9fcc53..72a8134 100644
--- a/src/views/contentManagement/upload/EpisodeTranscodePanel.vue
+++ b/src/views/contentManagement/upload/EpisodeTranscodePanel.vue
@@ -1,55 +1,36 @@
 <!-- Author: fruit.com.cn -->
-<!-- 剧集转码产物：任务状态、清晰度列表、帧图与雪碧图预览 -->
+<!-- 剧集转码面板：数据获取、轮询与子组件组合 -->
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
-import { useClipboard } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import {
   getEpisodeTranscodeApi,
   getMediaThumbnailsApi,
   triggerMediaTranscodeApi
 } from '@/api/admin/transcode'
-import type {
-  EpisodeTranscodeItem,
-  MediaRenditionItem,
-  MediaThumbnailFrameItem,
-  MediaThumbnailResult,
-  MediaThumbnailSpriteInfo
-} from '@/api/admin/types'
-import { AppIcon } from '@/components/AppIcon'
-import { AppIcons } from '@/constants/icons'
+import type { EpisodeTranscodeItem, MediaThumbnailResult } from '@/api/admin/types'
 import { useI18n } from '@/hooks/web/useI18n'
+import EpisodeTranscodeFrames from './EpisodeTranscodeFrames.vue'
+import EpisodeTranscodeRenditions from './EpisodeTranscodeRenditions.vue'
+import EpisodeTranscodeStatusBadge from './EpisodeTranscodeStatusBadge.vue'
+import EpisodeTranscodeStatusPanel from './EpisodeTranscodeStatusPanel.vue'
+import {
+  safeTranscodeProgress,
+  THUMBNAIL_PAGE_SIZE,
+  transcodeProgressStatus,
+  transcodeStatusKey,
+  transcodeStatusType
+} from './episodeTranscodeUi'
 
 const props = defineProps<{
   episodeId: number
   active: boolean
 }>()
 
-const { t } = useI18n()
-const { copy, isSupported } = useClipboard()
-
 const POLL_INTERVAL_MS = 4000
-const THUMBNAIL_PAGE_SIZE = 100
-const THUMBNAIL_PAGE_SIZES = [100, 200, 500]
-const FRAME_CARD_WIDTH = 128
-const PREVIEW_MAX_WIDTH = 520
-const PREVIEW_MAX_HEIGHT = 360
-const STATUS_KEYS: Record<string, string> = {
-  QUEUED: 'queued',
-  RUNNING: 'running',
-  SUCCESS: 'success',
-  FAILED: 'failed',
-  EMPTY: 'empty',
-  NO_VIDEO: 'noVideo',
-  NO_MEDIA_ASSET: 'noMediaAsset',
-  NO_TASK: 'noTask',
-  NO_EPISODE: 'noEpisode',
-  EPISODE_NOT_FOUND: 'episodeNotFound',
-  INVALID: 'invalid',
-  READY: 'ready'
-}
 
+const { t } = useI18n()
 const expanded = ref<string[]>(['transcode'])
 const detail = ref<EpisodeTranscodeItem | null>(null)
 const thumbnails = ref<MediaThumbnailResult | null>(null)
@@ -58,11 +39,8 @@ const thumbnailLoading = ref(false)
 const retriggering = ref(false)
 const errorMessage = ref('')
 const thumbnailError = ref('')
-const frameView = ref<'frames' | 'sprites'>('frames')
 const pageIndex = ref(1)
 const pageSize = ref(THUMBNAIL_PAGE_SIZE)
-const previewVisible = ref(false)
-const previewFrame = ref<MediaThumbnailFrameItem | null>(null)
 let pollTimer: ReturnType<typeof setTimeout> | null = null
 let requestSeq = 0
 let thumbnailSeq = 0
@@ -71,51 +49,34 @@ const mediaAssetId = computed(() => Number(detail.value?.mediaAssetId || 0))
 const hasMedia = computed(() => mediaAssetId.value > 0)
 const normalizedStatus = computed(() => String(detail.value?.status || '').toUpperCase())
 const renditions = computed(() => detail.value?.renditions || [])
-const frames = computed(() => thumbnails.value?.frames?.list || [])
-const sprite = computed(() => thumbnails.value?.sprite || null)
-const spriteUrls = computed(() => sprite.value?.spriteUrls || [])
-const framesTotal = computed(() => Number(thumbnails.value?.frames?.total || 0))
 const isProcessing = computed(
   () => normalizedStatus.value === 'QUEUED' || normalizedStatus.value === 'RUNNING'
 )
-const safeProgress = computed(() => Math.min(100, Math.max(0, Number(detail.value?.progress || 0))))
-
-const statusLabel = computed(() => {
-  const key = STATUS_KEYS[String(detail.value?.status || '').toUpperCase()] || 'unknown'
-  return t(`episodeTranscode.status.${key}`)
-})
-
-const statusTagType = computed(() => {
-  switch (normalizedStatus.value) {
-    case 'SUCCESS':
-      return 'success'
-    case 'RUNNING':
-      return 'warning'
-    case 'FAILED':
-      return 'danger'
-    case 'QUEUED':
-      return 'primary'
-    default:
-      return 'info'
-  }
-})
-
-const progressStatus = computed(() => {
-  if (normalizedStatus.value === 'SUCCESS') return 'success'
-  if (normalizedStatus.value === 'FAILED') return 'exception'
-  return undefined
-})
-
-const previewStyle = computed(() => {
-  const frame = previewFrame.value
-  const info = sprite.value
-  if (!frame || !info) return {}
-  const scale = Math.min(
-    PREVIEW_MAX_WIDTH / Math.max(1, frame.width),
-    PREVIEW_MAX_HEIGHT / Math.max(1, frame.height)
-  )
-  return frameStyle(frame, info, scale)
-})
+const statusLabel = computed(() =>
+  t(`episodeTranscode.status.${transcodeStatusKey(detail.value?.status)}`)
+)
+const statusType = computed(() => transcodeStatusType(detail.value?.status))
+const progressStatus = computed(() => transcodeProgressStatus(detail.value?.status))
+const progress = computed(() => safeTranscodeProgress(detail.value?.progress))
+const showOutputs = computed(() => !!detail.value && hasMedia.value && !errorMessage.value)
+const statusView = computed(() => ({
+  loading: loading.value,
+  errorMessage: errorMessage.value,
+  hasMedia: hasMedia.value,
+  retriggering: retriggering.value,
+  isProcessing: isProcessing.value,
+  statusLabel: statusLabel.value,
+  statusType: statusType.value,
+  progressStatus: progressStatus.value,
+  progress: progress.value
+}))
+const framesView = computed(() => ({
+  data: thumbnails.value,
+  loading: thumbnailLoading.value,
+  errorMessage: thumbnailError.value,
+  pageIndex: pageIndex.value,
+  pageSize: pageSize.value
+}))
 
 watch(
   [() => props.episodeId, () => props.active],
@@ -142,9 +103,6 @@ function resetState() {
   thumbnailError.value = ''
   pageIndex.value = 1
   pageSize.value = THUMBNAIL_PAGE_SIZE
-  frameView.value = 'frames'
-  previewVisible.value = false
-  previewFrame.value = null
 }
 
 function stopPolling() {
@@ -242,90 +200,6 @@ function changePageSize(value: number) {
   void loadThumbnailPage()
 }
 
-async function copyPlayUrl(url: string) {
-  if (!url) return
-  if (!isSupported.value) {
-    ElMessage.error(t('episodeTranscode.copyFailed'))
-    return
-  }
-  try {
-    await copy(url)
-    ElMessage.success(t('episodeTranscode.copySuccess'))
-  } catch {
-    ElMessage.error(t('episodeTranscode.copyFailed'))
-  }
-}
-
-function openPlayUrl(url: string) {
-  if (!url || !window.open(url, '_blank', 'noopener,noreferrer')) {
-    ElMessage.error(t('episodeTranscode.openFailed'))
-  }
-}
-
-function openFramePreview(frame: MediaThumbnailFrameItem) {
-  previewFrame.value = frame
-  previewVisible.value = true
-}
-
-function frameStyle(frame: MediaThumbnailFrameItem, info: MediaThumbnailSpriteInfo, scale: number) {
-  return {
-    width: `${Math.round(frame.width * scale)}px`,
-    height: `${Math.round(frame.height * scale)}px`,
-    backgroundImage: `url("${frame.spriteUrl || frame.imageUrl}")`,
-    backgroundPosition: `-${Math.round(frame.x * scale)}px -${Math.round(frame.y * scale)}px`,
-    backgroundSize: `${Math.round((info.columns || 1) * frame.width * scale)}px ${Math.round(
-      (info.rows || 1) * frame.height * scale
-    )}px`
-  }
-}
-
-function frameCardStyle(frame: MediaThumbnailFrameItem) {
-  if (!sprite.value) return {}
-  return frameStyle(frame, sprite.value, FRAME_CARD_WIDTH / Math.max(1, frame.width))
-}
-
-function spriteFrameCount(index: number) {
-  const info = sprite.value
-  if (!info) return 0
-  const capacity = Math.max(1, info.columns * info.rows)
-  return Math.max(0, Math.min(capacity, info.totalFrames - index * capacity))
-}
-
-function renditionStatusLabel(rendition: MediaRenditionItem) {
-  const key = STATUS_KEYS[String(rendition.status || '').toUpperCase()] || 'unknown'
-  return t(`episodeTranscode.status.${key}`)
-}
-
-function renditionStatusType(status: string) {
-  if (status === 'ready') return 'success'
-  if (status === 'failed') return 'danger'
-  return 'info'
-}
-
-function formatBytes(value?: number) {
-  const size = Number(value || 0)
-  if (size >= 1024 * 1024 * 1024) return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`
-  if (size >= 1024 * 1024) return `${(size / 1024 / 1024).toFixed(1)} MB`
-  if (size >= 1024) return `${Math.round(size / 1024)} KB`
-  return `${size} B`
-}
-
-function formatDuration(seconds?: number) {
-  const total = Math.max(0, Number(seconds || 0))
-  const minutes = Math.floor(total / 60)
-  return `${String(minutes).padStart(2, '0')}:${String(total % 60).padStart(2, '0')}`
-}
-
-function formatTimeMs(milliseconds?: number) {
-  const totalMs = Math.max(0, Number(milliseconds || 0))
-  const totalSeconds = Math.floor(totalMs / 1000)
-  const minutes = Math.floor(totalSeconds / 60)
-  const seconds = totalSeconds % 60
-  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${Math.floor(
-    (totalMs % 1000) / 100
-  )}`
-}
-
 function errorText(error: unknown, fallback: string) {
   return error instanceof Error && error.message ? error.message : fallback
 }
@@ -338,269 +212,34 @@ function errorText(error: unknown, fallback: string) {
         <template #title>
           <div class="episode-transcode-panel__heading">
             <span>{{ t('episodeTranscode.title') }}</span>
-            <el-tag v-if="detail" :type="statusTagType" effect="light" size="small">
-              {{ statusLabel }}
-            </el-tag>
-            <el-progress
-              v-if="detail && hasMedia"
-              class="episode-transcode-panel__heading-progress"
-              :percentage="safeProgress"
-              :status="progressStatus"
-              :stroke-width="6"
-              :show-text="false"
+            <EpisodeTranscodeStatusBadge
+              :visible="!!detail"
+              :status-label="statusLabel"
+              :status-type="statusType"
+              :progress="progress"
+              :progress-status="progressStatus"
+              :show-progress="!!detail && hasMedia"
             />
           </div>
         </template>
 
-        <p class="episode-transcode-panel__description">
-          {{ t('episodeTranscode.description') }}
-        </p>
-        <el-skeleton v-if="loading && !detail" :rows="4" animated />
-        <div v-else-if="errorMessage" class="episode-transcode-panel__error">
-          <el-alert type="error" :title="errorMessage" :closable="false" show-icon />
-          <el-button size="small" @click="loadDetail()">
-            <AppIcon :icon="AppIcons.refresh" :size="16" />
-            {{ t('episodeTranscode.retryLoad') }}
-          </el-button>
-        </div>
-        <el-empty
-          v-else-if="detail && !hasMedia"
-          :description="t('episodeTranscode.noMedia')"
-          :image-size="72"
+        <EpisodeTranscodeStatusPanel
+          :detail="detail"
+          :view="statusView"
+          @retry="loadDetail()"
+          @retrigger="retrigger"
         />
-        <template v-else-if="detail">
-          <div class="episode-transcode-panel__summary">
-            <div class="episode-transcode-panel__metric">
-              <span>{{ t('episodeTranscode.statusLabel') }}</span>
-              <el-tag :type="statusTagType" effect="light">{{ statusLabel }}</el-tag>
-            </div>
-            <div class="episode-transcode-panel__metric">
-              <span>{{ t('episodeTranscode.progress') }}</span>
-              <b>{{ safeProgress }}%</b>
-            </div>
-            <div class="episode-transcode-panel__metric">
-              <span>{{ t('episodeTranscode.retryCount') }}</span>
-              <b>{{ detail.retryCount || 0 }}</b>
-            </div>
-            <el-button
-              class="episode-transcode-panel__retry"
-              type="primary"
-              plain
-              :loading="retriggering"
-              :disabled="!hasMedia || isProcessing || retriggering"
-              @click="retrigger"
-            >
-              <AppIcon :icon="AppIcons.restart" :size="16" />
-              {{
-                retriggering ? t('episodeTranscode.reprocessing') : t('episodeTranscode.reprocess')
-              }}
-            </el-button>
-          </div>
-          <el-progress
-            class="episode-transcode-panel__progress"
-            :percentage="safeProgress"
-            :status="progressStatus"
-            :stroke-width="8"
+        <template v-if="showOutputs">
+          <EpisodeTranscodeRenditions :renditions="renditions" />
+          <EpisodeTranscodeFrames
+            :view="framesView"
+            @page-change="changePage"
+            @page-size-change="changePageSize"
+            @retry="loadThumbnailPage"
           />
-          <el-alert
-            v-if="detail.errorMsg"
-            class="episode-transcode-panel__error-alert"
-            type="error"
-            :title="detail.errorMsg"
-            :closable="false"
-            show-icon
-          />
-
-          <div class="episode-transcode-panel__subheading">
-            <h4>{{ t('episodeTranscode.renditionTitle') }}</h4>
-          </div>
-          <el-table
-            :data="renditions"
-            size="small"
-            border
-            class="episode-transcode-panel__table"
-            :empty-text="t('episodeTranscode.noRendition')"
-          >
-            <el-table-column
-              prop="qualityName"
-              :label="t('episodeTranscode.quality')"
-              min-width="88"
-            />
-            <el-table-column
-              prop="resolution"
-              :label="t('episodeTranscode.resolution')"
-              min-width="105"
-            />
-            <el-table-column :label="t('episodeTranscode.videoBitrate')" min-width="105">
-              <template #default="{ row }">{{ row.videoBitrateKbps }} kbps</template>
-            </el-table-column>
-            <el-table-column :label="t('episodeTranscode.audioBitrate')" min-width="105">
-              <template #default="{ row }">{{ row.audioBitrateKbps }} kbps</template>
-            </el-table-column>
-            <el-table-column
-              prop="videoCodec"
-              :label="t('episodeTranscode.codec')"
-              min-width="82"
-            />
-            <el-table-column
-              prop="container"
-              :label="t('episodeTranscode.container')"
-              min-width="82"
-            />
-            <el-table-column :label="t('episodeTranscode.fileSize')" min-width="92">
-              <template #default="{ row }">{{ formatBytes(row.sizeBytes) }}</template>
-            </el-table-column>
-            <el-table-column :label="t('episodeTranscode.duration')" min-width="76">
-              <template #default="{ row }">{{ formatDuration(row.durationSec) }}</template>
-            </el-table-column>
-            <el-table-column
-              prop="segmentCount"
-              :label="t('episodeTranscode.segments')"
-              min-width="76"
-            />
-            <el-table-column :label="t('episodeTranscode.statusColumn')" min-width="82">
-              <template #default="{ row }">
-                <el-tag :type="renditionStatusType(row.status)" effect="light" size="small">
-                  {{ renditionStatusLabel(row) }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column
-              :label="t('episodeTranscode.actions')"
-              width="92"
-              fixed="right"
-              align="center"
-            >
-              <template #default="{ row }">
-                <el-tooltip :content="t('episodeTranscode.copyUrl')" placement="top">
-                  <el-button text circle @click="copyPlayUrl(row.hlsUrl)">
-                    <AppIcon :icon="AppIcons.copy" :size="17" />
-                  </el-button>
-                </el-tooltip>
-                <el-tooltip :content="t('episodeTranscode.openUrl')" placement="top">
-                  <el-button text circle @click="openPlayUrl(row.hlsUrl)">
-                    <AppIcon :icon="AppIcons.openInNew" :size="17" />
-                  </el-button>
-                </el-tooltip>
-              </template>
-            </el-table-column>
-          </el-table>
-
-          <div class="episode-transcode-panel__subheading">
-            <h4>{{ t('episodeTranscode.frameTitle') }}</h4>
-            <div class="episode-transcode-panel__frame-tools">
-              <span>{{ t('episodeTranscode.frameCount', { total: framesTotal }) }}</span>
-              <el-radio-group v-model="frameView" size="small">
-                <el-radio-button label="frames">{{
-                  t('episodeTranscode.frameView')
-                }}</el-radio-button>
-                <el-radio-button label="sprites">{{
-                  t('episodeTranscode.spriteView')
-                }}</el-radio-button>
-              </el-radio-group>
-            </div>
-          </div>
-          <el-alert
-            v-if="thumbnailError"
-            type="error"
-            :title="thumbnailError"
-            :closable="false"
-            show-icon
-          >
-            <template #default>
-              <el-button size="small" text @click="loadThumbnailPage">
-                {{ t('episodeTranscode.retryLoad') }}
-              </el-button>
-            </template>
-          </el-alert>
-          <div v-loading="thumbnailLoading">
-            <template v-if="frameView === 'frames'">
-              <div v-if="frames.length" class="episode-transcode-panel__frames">
-                <button
-                  v-for="frame in frames"
-                  :key="frame.frameIndex"
-                  class="episode-transcode-panel__frame"
-                  type="button"
-                  :aria-label="
-                    t('episodeTranscode.previewFrame', { time: formatTimeMs(frame.timeMs) })
-                  "
-                  @click="openFramePreview(frame)"
-                >
-                  <span
-                    class="episode-transcode-panel__frame-image"
-                    :style="frameCardStyle(frame)"
-                  ></span>
-                  <span>{{ formatTimeMs(frame.timeMs) }}</span>
-                </button>
-              </div>
-              <el-empty v-else :description="t('episodeTranscode.noFrames')" :image-size="58" />
-              <el-pagination
-                v-if="framesTotal"
-                class="episode-transcode-panel__pagination"
-                background
-                layout="sizes, prev, pager, next"
-                :current-page="pageIndex"
-                :page-size="pageSize"
-                :page-sizes="THUMBNAIL_PAGE_SIZES"
-                :total="framesTotal"
-                @current-change="changePage"
-                @size-change="changePageSize"
-              />
-            </template>
-            <div v-else-if="spriteUrls.length && sprite" class="episode-transcode-panel__sprites">
-              <figure
-                v-for="(url, index) in spriteUrls"
-                :key="url"
-                class="episode-transcode-panel__sprite"
-              >
-                <div
-                  class="episode-transcode-panel__sprite-frame"
-                  :style="{
-                    aspectRatio: `${sprite.columns * sprite.thumbWidth} / ${
-                      sprite.rows * sprite.thumbHeight
-                    }`
-                  }"
-                >
-                  <el-image
-                    :src="url"
-                    :preview-src-list="spriteUrls"
-                    :initial-index="index"
-                    fit="contain"
-                    preview-teleported
-                    hide-on-click-modal
-                  />
-                  <span
-                    class="episode-transcode-panel__sprite-grid"
-                    :style="{
-                      backgroundSize: `calc(100% / ${sprite.columns}) calc(100% / ${sprite.rows})`
-                    }"
-                  ></span>
-                </div>
-                <figcaption>
-                  <b>{{ t('episodeTranscode.spriteSheet', { index: index + 1 }) }}</b>
-                  <span>{{
-                    t('episodeTranscode.spriteSheetFrames', { count: spriteFrameCount(index) })
-                  }}</span>
-                </figcaption>
-              </figure>
-            </div>
-            <el-empty v-else :description="t('episodeTranscode.noSprites')" :image-size="58" />
-          </div>
         </template>
       </el-collapse-item>
     </el-collapse>
-
-    <el-dialog
-      v-model="previewVisible"
-      :title="t('episodeTranscode.zoomTitle')"
-      width="min(92vw, 600px)"
-      append-to-body
-      destroy-on-close
-    >
-      <div class="episode-transcode-panel__preview-shell">
-        <div class="episode-transcode-panel__preview-image" :style="previewStyle"></div>
-      </div>
-    </el-dialog>
   </section>
 </template>
 
@@ -624,193 +263,4 @@ function errorText(error: unknown, fallback: string) {
   align-items: center;
   gap: 10px;
 }
-
-.episode-transcode-panel__heading-progress {
-  width: 110px;
-  margin-left: auto;
-}
-
-.episode-transcode-panel__description {
-  margin: 0 0 14px;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.episode-transcode-panel__error {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  flex-direction: column;
-}
-
-.episode-transcode-panel__summary {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  flex-wrap: wrap;
-}
-
-.episode-transcode-panel__metric {
-  display: flex;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  align-items: center;
-  gap: 8px;
-}
-
-.episode-transcode-panel__metric b {
-  font-size: 14px;
-  color: var(--el-text-color-primary);
-  font-variant-numeric: tabular-nums;
-}
-
-.episode-transcode-panel__retry {
-  margin-left: auto;
-}
-
-.episode-transcode-panel__progress {
-  margin-top: 12px;
-}
-
-.episode-transcode-panel__error-alert,
-.episode-transcode-panel__thumbnail-error {
-  margin-top: 12px;
-}
-
-.episode-transcode-panel__subheading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin: 18px 0 10px;
-}
-
-.episode-transcode-panel__subheading h4 {
-  margin: 0;
-  font-size: 13px;
-}
-
-.episode-transcode-panel__table {
-  width: 100%;
-}
-
-.episode-transcode-panel__frame-tools {
-  display: flex;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  align-items: center;
-  gap: 12px;
-}
-
-.episode-transcode-panel__frames {
-  display: grid;
-  justify-content: center;
-  gap: 10px;
-  grid-template-columns: repeat(4, 128px);
-}
-
-.episode-transcode-panel__frame {
-  display: flex;
-  min-width: 0;
-  padding: 0;
-  font-size: 11px;
-  color: var(--el-text-color-secondary);
-  cursor: zoom-in;
-  background: transparent;
-  border: 0;
-  flex-direction: column;
-  gap: 5px;
-}
-
-.episode-transcode-panel__frame-image {
-  display: block;
-  overflow: hidden;
-  background-color: var(--el-fill-color-dark);
-  background-repeat: no-repeat;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 7px;
-}
-
-.episode-transcode-panel__frame:hover .episode-transcode-panel__frame-image {
-  border-color: var(--el-color-primary);
-}
-
-.episode-transcode-panel__pagination {
-  margin-top: 14px;
-  justify-content: flex-end;
-}
-
-.episode-transcode-panel__sprites {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-}
-
-.episode-transcode-panel__sprite {
-  min-width: 0;
-  margin: 0;
-}
-
-.episode-transcode-panel__sprite-frame {
-  position: relative;
-  overflow: hidden;
-  background: var(--el-fill-color-dark);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-}
-
-.episode-transcode-panel__sprite-frame :deep(.el-image) {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.episode-transcode-panel__sprite-grid {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background-image:
-    linear-gradient(to right, rgb(255 255 255 / 34%) 1px, transparent 1px),
-    linear-gradient(to bottom, rgb(255 255 255 / 34%) 1px, transparent 1px);
-  background-repeat: repeat;
-}
-
-.episode-transcode-panel__sprite figcaption {
-  display: flex;
-  padding-top: 6px;
-  font-size: 11px;
-  color: var(--el-text-color-secondary);
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.episode-transcode-panel__preview-shell {
-  display: flex;
-  min-height: 240px;
-  align-items: center;
-  justify-content: center;
-  background: var(--el-fill-color-dark);
-  border-radius: 8px;
-}
-
-.episode-transcode-panel__preview-image {
-  background-repeat: no-repeat;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-}
-
-@media (width <= 600px) {
-  .episode-transcode-panel__frames {
-    grid-template-columns: repeat(2, 128px);
-  }
-
-  .episode-transcode-panel__summary {
-    align-items: flex-start;
-  }
-
-  .episode-transcode-panel__retry {
-    width: 100%;
-    margin-left: 0;
-  }
-}
 </style>
diff --git a/src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue b/src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue
new file mode 100644
index 0000000..c965a2b
--- /dev/null
+++ b/src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue
@@ -0,0 +1,119 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码清晰度表格与播放地址操作 -->
+
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import { ElMessage } from 'element-plus'
+import type { MediaRenditionItem } from '@/api/admin/types'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+import { useI18n } from '@/hooks/web/useI18n'
+import {
+  formatBytes,
+  formatDuration,
+  renditionStatusLabelKey,
+  renditionStatusType
+} from './episodeTranscodeUi'
+
+defineProps<{
+  renditions: MediaRenditionItem[]
+}>()
+
+const { t } = useI18n()
+const { copy, isSupported } = useClipboard()
+
+function statusLabel(rendition: MediaRenditionItem) {
+  return t(`episodeTranscode.status.${renditionStatusLabelKey(rendition.status)}`)
+}
+
+async function copyPlayUrl(url: string) {
+  if (!url) return
+  if (!isSupported.value) {
+    ElMessage.error(t('episodeTranscode.copyFailed'))
+    return
+  }
+  try {
+    await copy(url)
+    ElMessage.success(t('episodeTranscode.copySuccess'))
+  } catch {
+    ElMessage.error(t('episodeTranscode.copyFailed'))
+  }
+}
+
+function openPlayUrl(url: string) {
+  if (!url || !window.open(url, '_blank', 'noopener,noreferrer')) {
+    ElMessage.error(t('episodeTranscode.openFailed'))
+  }
+}
+</script>
+
+<template>
+  <div class="episode-transcode-renditions__heading">
+    <h4>{{ t('episodeTranscode.renditionTitle') }}</h4>
+  </div>
+  <el-table
+    :data="renditions"
+    size="small"
+    border
+    class="episode-transcode-renditions__table"
+    :empty-text="t('episodeTranscode.noRendition')"
+  >
+    <el-table-column prop="qualityName" :label="t('episodeTranscode.quality')" min-width="88" />
+    <el-table-column prop="resolution" :label="t('episodeTranscode.resolution')" min-width="105" />
+    <el-table-column :label="t('episodeTranscode.videoBitrate')" min-width="105">
+      <template #default="{ row }">{{ row.videoBitrateKbps }} kbps</template>
+    </el-table-column>
+    <el-table-column :label="t('episodeTranscode.audioBitrate')" min-width="105">
+      <template #default="{ row }">{{ row.audioBitrateKbps }} kbps</template>
+    </el-table-column>
+    <el-table-column prop="videoCodec" :label="t('episodeTranscode.codec')" min-width="82" />
+    <el-table-column prop="container" :label="t('episodeTranscode.container')" min-width="82" />
+    <el-table-column :label="t('episodeTranscode.fileSize')" min-width="92">
+      <template #default="{ row }">{{ formatBytes(row.sizeBytes) }}</template>
+    </el-table-column>
+    <el-table-column :label="t('episodeTranscode.duration')" min-width="76">
+      <template #default="{ row }">{{ formatDuration(row.durationSec) }}</template>
+    </el-table-column>
+    <el-table-column prop="segmentCount" :label="t('episodeTranscode.segments')" min-width="76" />
+    <el-table-column :label="t('episodeTranscode.statusColumn')" min-width="82">
+      <template #default="{ row }">
+        <el-tag :type="renditionStatusType(row.status)" effect="light" size="small">
+          {{ statusLabel(row) }}
+        </el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column :label="t('episodeTranscode.actions')" width="92" fixed="right" align="center">
+      <template #default="{ row }">
+        <el-tooltip :content="t('episodeTranscode.copyUrl')" placement="top">
+          <el-button text circle @click="copyPlayUrl(row.hlsUrl)">
+            <AppIcon :icon="AppIcons.copy" :size="17" />
+          </el-button>
+        </el-tooltip>
+        <el-tooltip :content="t('episodeTranscode.openUrl')" placement="top">
+          <el-button text circle @click="openPlayUrl(row.hlsUrl)">
+            <AppIcon :icon="AppIcons.openInNew" :size="17" />
+          </el-button>
+        </el-tooltip>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<style scoped>
+.episode-transcode-renditions__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 18px 0 10px;
+}
+
+.episode-transcode-renditions__heading h4 {
+  margin: 0;
+  font-size: 13px;
+}
+
+.episode-transcode-renditions__table {
+  width: 100%;
+}
+</style>
diff --git a/src/views/contentManagement/upload/EpisodeTranscodeStatusBadge.vue b/src/views/contentManagement/upload/EpisodeTranscodeStatusBadge.vue
new file mode 100644
index 0000000..47d0d31
--- /dev/null
+++ b/src/views/contentManagement/upload/EpisodeTranscodeStatusBadge.vue
@@ -0,0 +1,45 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码折叠标题状态徽标 -->
+
+<script setup lang="ts">
+import type { TranscodeProgressStatus, TranscodeTagType } from './episodeTranscodeUi'
+
+defineProps<{
+  visible: boolean
+  statusLabel: string
+  statusType: TranscodeTagType
+  progress: number
+  progressStatus: TranscodeProgressStatus
+  showProgress: boolean
+}>()
+</script>
+
+<template>
+  <span class="episode-transcode-badge">
+    <el-tag v-if="visible" :type="statusType" effect="light" size="small">
+      {{ statusLabel }}
+    </el-tag>
+    <el-progress
+      v-if="showProgress"
+      class="episode-transcode-badge__progress"
+      :percentage="progress"
+      :status="progressStatus"
+      :stroke-width="6"
+      :show-text="false"
+    />
+  </span>
+</template>
+
+<style scoped>
+.episode-transcode-badge {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 10px;
+}
+
+.episode-transcode-badge__progress {
+  width: 110px;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue b/src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue
new file mode 100644
index 0000000..c876a70
--- /dev/null
+++ b/src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue
@@ -0,0 +1,155 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码状态、进度、错误与重新转码操作 -->
+
+<script setup lang="ts">
+import type { EpisodeTranscodeItem } from '@/api/admin/types'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+import { useI18n } from '@/hooks/web/useI18n'
+import type { TranscodeProgressStatus, TranscodeTagType } from './episodeTranscodeUi'
+
+interface StatusView {
+  loading: boolean
+  errorMessage: string
+  hasMedia: boolean
+  retriggering: boolean
+  isProcessing: boolean
+  statusLabel: string
+  statusType: TranscodeTagType
+  progressStatus: TranscodeProgressStatus
+  progress: number
+}
+
+defineProps<{
+  detail: EpisodeTranscodeItem | null
+  view: StatusView
+}>()
+
+const emit = defineEmits<{
+  retry: []
+  retrigger: []
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <p class="episode-transcode-status__description">
+    {{ t('episodeTranscode.description') }}
+  </p>
+  <el-skeleton v-if="view.loading && !detail" :rows="4" animated />
+  <div v-else-if="view.errorMessage" class="episode-transcode-status__error">
+    <el-alert type="error" :title="view.errorMessage" :closable="false" show-icon />
+    <el-button size="small" @click="emit('retry')">
+      <AppIcon :icon="AppIcons.refresh" :size="16" />
+      {{ t('episodeTranscode.retryLoad') }}
+    </el-button>
+  </div>
+  <el-empty
+    v-else-if="detail && !view.hasMedia"
+    :description="t('episodeTranscode.noMedia')"
+    :image-size="72"
+  />
+  <template v-else-if="detail">
+    <div class="episode-transcode-status__summary">
+      <div class="episode-transcode-status__metric">
+        <span>{{ t('episodeTranscode.statusLabel') }}</span>
+        <el-tag :type="view.statusType" effect="light">{{ view.statusLabel }}</el-tag>
+      </div>
+      <div class="episode-transcode-status__metric">
+        <span>{{ t('episodeTranscode.progress') }}</span>
+        <b>{{ view.progress }}%</b>
+      </div>
+      <div class="episode-transcode-status__metric">
+        <span>{{ t('episodeTranscode.retryCount') }}</span>
+        <b>{{ detail.retryCount || 0 }}</b>
+      </div>
+      <el-button
+        class="episode-transcode-status__retry"
+        type="primary"
+        plain
+        :loading="view.retriggering"
+        :disabled="!view.hasMedia || view.isProcessing || view.retriggering"
+        @click="emit('retrigger')"
+      >
+        <AppIcon :icon="AppIcons.restart" :size="16" />
+        {{
+          view.retriggering ? t('episodeTranscode.reprocessing') : t('episodeTranscode.reprocess')
+        }}
+      </el-button>
+    </div>
+    <el-progress
+      class="episode-transcode-status__progress"
+      :percentage="view.progress"
+      :status="view.progressStatus"
+      :stroke-width="8"
+    />
+    <el-alert
+      v-if="detail.errorMsg"
+      class="episode-transcode-status__error-alert"
+      type="error"
+      :title="detail.errorMsg"
+      :closable="false"
+      show-icon
+    />
+  </template>
+</template>
+
+<style scoped>
+.episode-transcode-status__description {
+  margin: 0 0 14px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.episode-transcode-status__error {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  flex-direction: column;
+}
+
+.episode-transcode-status__summary {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+
+.episode-transcode-status__metric {
+  display: flex;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  align-items: center;
+  gap: 8px;
+}
+
+.episode-transcode-status__metric b {
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.episode-transcode-status__retry {
+  margin-left: auto;
+}
+
+.episode-transcode-status__progress {
+  margin-top: 12px;
+}
+
+.episode-transcode-status__error-alert {
+  margin-top: 12px;
+}
+
+@media (width <= 600px) {
+  .episode-transcode-status__summary {
+    align-items: flex-start;
+  }
+
+  .episode-transcode-status__retry {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+</style>
diff --git a/src/views/contentManagement/upload/episodeTranscodeUi.ts b/src/views/contentManagement/upload/episodeTranscodeUi.ts
new file mode 100644
index 0000000..38b0610
--- /dev/null
+++ b/src/views/contentManagement/upload/episodeTranscodeUi.ts
@@ -0,0 +1,93 @@
+// Author: fruit.com.cn
+// 剧集转码面板的状态映射与展示格式化
+
+export type TranscodeTagType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+export type TranscodeProgressStatus = 'success' | 'exception' | undefined
+
+export const THUMBNAIL_PAGE_SIZE = 100
+export const THUMBNAIL_PAGE_SIZES = [100, 200, 500]
+
+const STATUS_KEYS: Record<string, string> = {
+  QUEUED: 'queued',
+  RUNNING: 'running',
+  SUCCESS: 'success',
+  FAILED: 'failed',
+  EMPTY: 'empty',
+  NO_VIDEO: 'noVideo',
+  NO_MEDIA_ASSET: 'noMediaAsset',
+  NO_TASK: 'noTask',
+  NO_EPISODE: 'noEpisode',
+  EPISODE_NOT_FOUND: 'episodeNotFound',
+  INVALID: 'invalid',
+  READY: 'ready'
+}
+const BYTES_PER_KB = 1024
+const BYTES_PER_MB = BYTES_PER_KB * 1024
+const BYTES_PER_GB = BYTES_PER_MB * 1024
+const SECONDS_PER_MINUTE = 60
+const MILLIS_PER_SECOND = 1000
+
+export function transcodeStatusKey(status?: string): string {
+  return STATUS_KEYS[String(status || '').toUpperCase()] || 'unknown'
+}
+
+export function transcodeStatusType(status?: string): TranscodeTagType {
+  switch (String(status || '').toUpperCase()) {
+    case 'SUCCESS':
+      return 'success'
+    case 'RUNNING':
+      return 'warning'
+    case 'FAILED':
+      return 'danger'
+    case 'QUEUED':
+      return 'primary'
+    default:
+      return 'info'
+  }
+}
+
+export function transcodeProgressStatus(status?: string): TranscodeProgressStatus {
+  const normalized = String(status || '').toUpperCase()
+  if (normalized === 'SUCCESS') return 'success'
+  if (normalized === 'FAILED') return 'exception'
+  return undefined
+}
+
+export function safeTranscodeProgress(value?: number): number {
+  return Math.min(100, Math.max(0, Number(value || 0)))
+}
+
+export function renditionStatusLabelKey(status?: string): string {
+  return transcodeStatusKey(status)
+}
+
+export function renditionStatusType(status?: string): TranscodeTagType {
+  const normalized = String(status || '').toUpperCase()
+  if (normalized === 'READY') return 'success'
+  if (normalized === 'FAILED') return 'danger'
+  return 'info'
+}
+
+export function formatBytes(value?: number): string {
+  const size = Number(value || 0)
+  if (size >= BYTES_PER_GB) return `${(size / BYTES_PER_GB).toFixed(2)} GB`
+  if (size >= BYTES_PER_MB) return `${(size / BYTES_PER_MB).toFixed(1)} MB`
+  if (size >= BYTES_PER_KB) return `${Math.round(size / BYTES_PER_KB)} KB`
+  return `${size} B`
+}
+
+export function formatDuration(seconds?: number): string {
+  const total = Math.max(0, Number(seconds || 0))
+  const minutes = Math.floor(total / SECONDS_PER_MINUTE)
+  const remainder = total % SECONDS_PER_MINUTE
+  return `${String(minutes).padStart(2, '0')}:${String(remainder).padStart(2, '0')}`
+}
+
+export function formatTimeMs(milliseconds?: number): string {
+  const totalMs = Math.max(0, Number(milliseconds || 0))
+  const totalSeconds = Math.floor(totalMs / MILLIS_PER_SECOND)
+  const minutes = Math.floor(totalSeconds / SECONDS_PER_MINUTE)
+  const seconds = totalSeconds % SECONDS_PER_MINUTE
+  const tenths = Math.floor((totalMs % MILLIS_PER_SECOND) / 100)
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${tenths}`
+}

From fecc3b48176268685e22f840ab4887be77143b92 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Thu, 22 Oct 2026 14:59:22 +0800
Subject: [PATCH 51/59] =?UTF-8?q?fix(admin):=20=E8=BD=AC=E7=A0=81=E5=AA=92?=
 =?UTF-8?q?=E8=B5=84=20id=20=E6=8C=89=E5=AD=97=E7=AC=A6=E4=B8=B2=E4=BC=A0?=
 =?UTF-8?q?=E9=80=92=E5=B9=B6=E5=A4=84=E7=90=86=E7=A9=BA=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2026-10-22-transcode-media-id-fix-ui.md   | 18 +++++++
 docs/plans/PROGRESS.md                        | 51 +++++++++++++++++++
 src/api/admin/transcode.ts                    |  4 +-
 src/api/admin/types.ts                        | 14 ++---
 .../upload/EpisodeTranscodePanel.vue          |  6 +--
 .../upload/EpisodeTranscodeStatusPanel.vue    |  2 +-
 6 files changed, 82 insertions(+), 13 deletions(-)
 create mode 100644 docs/plans/2026-10-22-transcode-media-id-fix-ui.md

diff --git a/docs/plans/2026-10-22-transcode-media-id-fix-ui.md b/docs/plans/2026-10-22-transcode-media-id-fix-ui.md
new file mode 100644
index 0000000..fc50d28
--- /dev/null
+++ b/docs/plans/2026-10-22-transcode-media-id-fix-ui.md
@@ -0,0 +1,18 @@
+# 转码媒资 ID 前端精度修复
+
+## 根因
+
+聚合接口把 Snowflake 媒资 ID 以字符串返回，但面板使用
+`Number(detail.mediaAssetId)`，超过 `2^53` 后发生精度丢失，手动转码请求了错误 ID。
+
+## 修复
+
+- 聚合响应中的 episodeId/mediaAssetId/taskId 类型改为字符串。
+- 父面板不再 Number 归一化，媒体 ID 校验改为字符串 `/\d+/`。
+- 手动转码、帧图分页 URL 原样传递字符串。
+- mediaAssetId 为空时禁用重新转码并展示明确空态。
+
+## 验证
+
+- 超 2^53 ID 字符串保持逐位一致。
+- `pnpm lint:eslint`、`pnpm build:dev`。
diff --git a/docs/plans/PROGRESS.md b/docs/plans/PROGRESS.md
index c714667..dc523d6 100644
--- a/docs/plans/PROGRESS.md
+++ b/docs/plans/PROGRESS.md
@@ -100,3 +100,54 @@ Build successful. Please see dist-dev directory
 
 解读：组件 props/emits、类型检查、ESLint 和开发构建全部通过；
 循环 chunk 为项目既有警告。轮询启停、接口路径、分页参数和 locales 文案未改变。
+
+## 2026-10-22 转码媒资 ID 前端精度修复
+
+- 分支：`feature/transcode-media-id-fix-ui`
+- 基线：`develop` / `origin/develop` = `a4893c3`
+
+已复现 `Number('2113150398670966786')` 变为 `2113150398670966800`。
+本次将媒资、任务 id 全链路按字符串处理，禁止 Number 转换；没有媒资时
+禁用重新转码并显示空态。
+
+```text
+$ node -e "const id='2113150398670966786'; console.log(String(Number(id)))"
+2113150398670966800
+```
+
+解读：Snowflake id 超过 JS 安全整数，字符串化后的 Number 已失真。
+
+### 实现
+
+- `EpisodeTranscodeItem` 的 episodeId/mediaAssetId/taskId，以及 rendition/thumbnail
+  相关 id 类型改为字符串。
+- 父面板使用 `detail.mediaAssetId` 原始字符串和正则校验，不再 Number 转换。
+- 手动转码与帧图分页接口原样传递字符串 id。
+- `mediaAssetId` 为空时按钮保持禁用，空态优先展示后端 errorMsg 原因。
+
+静态检查确认：
+
+```text
+$ rg -n "Number\([^\n]*mediaAssetId|mediaAssetId[^\n]*Number\(" \
+  src/views/contentManagement/upload src/api/admin
+（无匹配）
+```
+
+### 门禁
+
+```text
+$ pnpm lint:eslint
+> eslint --fix --ext .js,.ts,.vue ./src
+（0 error / 0 warning）
+
+$ pnpm ts:check
+> vue-tsc --noEmit --skipLibCheck
+（通过）
+
+$ pnpm build:dev
+ WARN  Circular chunk: element-plus -> vue-chunks -> element-plus.
+Build successful. Please see dist-dev directory
+```
+
+解读：字符串 id 链路、类型检查、ESLint 与开发构建均通过；
+循环 chunk 为项目既有警告。
diff --git a/src/api/admin/transcode.ts b/src/api/admin/transcode.ts
index f6d2e86..fe436fa 100644
--- a/src/api/admin/transcode.ts
+++ b/src/api/admin/transcode.ts
@@ -12,7 +12,7 @@ export const getEpisodeTranscodeApi = (episodeId: number | string) => {
 
 /** 按媒体分页读取帧图；页面切换时复用该接口。 */
 export const getMediaThumbnailsApi = (
-  mediaAssetId: number | string,
+  mediaAssetId: string,
   pageIndex: number,
   pageSize: number
 ) => {
@@ -23,7 +23,7 @@ export const getMediaThumbnailsApi = (
 }
 
 /** 手动触发或重转当前分集绑定的媒体。 */
-export const triggerMediaTranscodeApi = (mediaAssetId: number | string) => {
+export const triggerMediaTranscodeApi = (mediaAssetId: string) => {
   return request.post<TranscodeTriggerResult>({
     url: `/admin/media/${mediaAssetId}/transcode`
   })
diff --git a/src/api/admin/types.ts b/src/api/admin/types.ts
index ad9d02d..8a84f0f 100644
--- a/src/api/admin/types.ts
+++ b/src/api/admin/types.ts
@@ -249,7 +249,7 @@ export interface MediaTranscodeProfile {
 }
 
 export interface MediaRenditionItem {
-  id: number
+  id: string
   quality: string
   qualityName: string
   width: number
@@ -292,8 +292,8 @@ export interface MediaThumbnailSpriteInfo {
 }
 
 export interface MediaThumbnailResult {
-  mediaAssetId?: number | null
-  episodeId?: number | null
+  mediaAssetId?: string | null
+  episodeId?: string | null
   /** READY / FAILED / EMPTY / INVALID / NO_EPISODE */
   status: string
   errorMsg?: string
@@ -304,9 +304,9 @@ export interface MediaThumbnailResult {
 }
 
 export interface EpisodeTranscodeItem {
-  episodeId: number
-  mediaAssetId?: number | null
-  taskId?: number | null
+  episodeId: string
+  mediaAssetId?: string | null
+  taskId?: string | null
   status: string
   progress?: number
   retryCount?: number
@@ -316,7 +316,7 @@ export interface EpisodeTranscodeItem {
 }
 
 export interface TranscodeTriggerResult {
-  taskId: number
+  taskId: string
   status: string
 }
 
diff --git a/src/views/contentManagement/upload/EpisodeTranscodePanel.vue b/src/views/contentManagement/upload/EpisodeTranscodePanel.vue
index 72a8134..c123321 100644
--- a/src/views/contentManagement/upload/EpisodeTranscodePanel.vue
+++ b/src/views/contentManagement/upload/EpisodeTranscodePanel.vue
@@ -24,7 +24,7 @@ import {
 } from './episodeTranscodeUi'
 
 const props = defineProps<{
-  episodeId: number
+  episodeId: string | number
   active: boolean
 }>()
 
@@ -45,8 +45,8 @@ let pollTimer: ReturnType<typeof setTimeout> | null = null
 let requestSeq = 0
 let thumbnailSeq = 0
 
-const mediaAssetId = computed(() => Number(detail.value?.mediaAssetId || 0))
-const hasMedia = computed(() => mediaAssetId.value > 0)
+const mediaAssetId = computed(() => detail.value?.mediaAssetId || '')
+const hasMedia = computed(() => /^[1-9]\d*$/.test(mediaAssetId.value))
 const normalizedStatus = computed(() => String(detail.value?.status || '').toUpperCase())
 const renditions = computed(() => detail.value?.renditions || [])
 const isProcessing = computed(
diff --git a/src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue b/src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue
index c876a70..d562a42 100644
--- a/src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue
+++ b/src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue
@@ -47,7 +47,7 @@ const { t } = useI18n()
   </div>
   <el-empty
     v-else-if="detail && !view.hasMedia"
-    :description="t('episodeTranscode.noMedia')"
+    :description="detail.errorMsg || t('episodeTranscode.noMedia')"
     :image-size="72"
   />
   <template v-else-if="detail">

From 9b2ab1a42516e4b0aa587a4ed84a56ae7d8c4a5b Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Thu, 22 Oct 2026 15:12:12 +0800
Subject: [PATCH 52/59] =?UTF-8?q?fix(admin):=20=E8=BD=AC=E7=A0=81=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E5=B1=95=E7=A4=BA=E5=AE=9E=E6=97=B6=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E4=B8=8E=E6=9B=B4=E6=96=B0=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plans/2026-10-22-transcode-progress-ui.md | 12 +++++++
 docs/plans/PROGRESS.md                        | 36 +++++++++++++++++++
 src/api/admin/types.ts                        |  1 +
 src/locales/en.ts                             |  2 ++
 src/locales/zh-CN.ts                          |  2 ++
 .../upload/EpisodeTranscodeStatusPanel.vue    | 14 ++++++++
 6 files changed, 67 insertions(+)
 create mode 100644 docs/plans/2026-10-22-transcode-progress-ui.md

diff --git a/docs/plans/2026-10-22-transcode-progress-ui.md b/docs/plans/2026-10-22-transcode-progress-ui.md
new file mode 100644
index 0000000..09d29fa
--- /dev/null
+++ b/docs/plans/2026-10-22-transcode-progress-ui.md
@@ -0,0 +1,12 @@
+# 转码面板实时进度与更新时间
+
+## 目标
+
+- 展示后端 task progress、状态文案与 updatedAt。
+- RUNNING/QUEUED 且 progress=0 时显示“处理中（等待进度上报）”。
+- FAILED 保持错误信息与重新转码入口。
+- 保持现有轮询停止、关闭清理与字符串 ID 逻辑。
+
+## 验证
+
+- `pnpm lint:eslint`、`pnpm build:dev`。
diff --git a/docs/plans/PROGRESS.md b/docs/plans/PROGRESS.md
index dc523d6..17e05b2 100644
--- a/docs/plans/PROGRESS.md
+++ b/docs/plans/PROGRESS.md
@@ -151,3 +151,39 @@ Build successful. Please see dist-dev directory
 
 解读：字符串 id 链路、类型检查、ESLint 与开发构建均通过；
 循环 chunk 为项目既有警告。
+
+## 2026-10-22 转码面板实时进度与更新时间
+
+- 分支：`feature/transcode-progress-ui`
+- 基线：`develop` / `origin/develop` = `0d5d0d8`
+- 计划：`docs/plans/2026-10-22-transcode-progress-ui.md`
+
+后端将补充 task.updatedAt；前端在现有轮询面板中展示进度、状态、
+最近更新时间，并在 RUNNING/QUEUED progress=0 时显示等待进度上报提示。
+
+### 实现
+
+- `EpisodeTranscodeItem` 增加 `updatedAt`。
+- 状态区展示“最近更新”，格式沿用 `formatDateTime`。
+- RUNNING/QUEUED 且 progress=0 时显示“处理中（等待进度上报）”。
+- SUCCESS/FAILED 继续停止轮询；关闭面板继续清理定时器。
+- 所有 id 保持字符串传递，不引入 Number 转换。
+
+### 门禁
+
+```text
+$ pnpm lint:eslint
+> eslint --fix --ext .js,.ts,.vue ./src
+（0 error / 0 warning）
+
+$ pnpm ts:check
+> vue-tsc --noEmit --skipLibCheck
+（通过）
+
+$ pnpm build:dev
+ WARN  Circular chunk: element-plus -> vue-chunks -> element-plus.
+Build successful. Please see dist-dev directory
+```
+
+解读：进度与更新时间类型、ESLint、TypeScript 和开发构建全部通过；
+循环 chunk 为项目既有警告。
diff --git a/src/api/admin/types.ts b/src/api/admin/types.ts
index 8a84f0f..a58f120 100644
--- a/src/api/admin/types.ts
+++ b/src/api/admin/types.ts
@@ -311,6 +311,7 @@ export interface EpisodeTranscodeItem {
   progress?: number
   retryCount?: number
   errorMsg?: string
+  updatedAt?: string
   renditions: MediaRenditionItem[]
   thumbnails?: MediaThumbnailResult | null
 }
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 3cefb8a..b0dbe88 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -535,6 +535,8 @@ export default {
     statusLabel: 'Status',
     progress: 'Progress',
     retryCount: 'Retries',
+    updatedAt: 'Last updated',
+    waitingProgress: 'Processing (waiting for progress report)',
     reprocess: 'Transcode again',
     reprocessing: 'Submitting',
     triggerSuccess: 'Transcode task submitted',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 91de289..9865516 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -529,6 +529,8 @@ export default {
     statusLabel: '状态',
     progress: '进度',
     retryCount: '重试次数',
+    updatedAt: '最近更新',
+    waitingProgress: '处理中（等待进度上报）',
     reprocess: '重新转码',
     reprocessing: '正在触发',
     triggerSuccess: '已提交转码任务',
diff --git a/src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue b/src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue
index d562a42..622f933 100644
--- a/src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue
+++ b/src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue
@@ -6,6 +6,7 @@ import type { EpisodeTranscodeItem } from '@/api/admin/types'
 import { AppIcon } from '@/components/AppIcon'
 import { AppIcons } from '@/constants/icons'
 import { useI18n } from '@/hooks/web/useI18n'
+import { formatDateTime } from '@/utils/format'
 import type { TranscodeProgressStatus, TranscodeTagType } from './episodeTranscodeUi'
 
 interface StatusView {
@@ -64,6 +65,10 @@ const { t } = useI18n()
         <span>{{ t('episodeTranscode.retryCount') }}</span>
         <b>{{ detail.retryCount || 0 }}</b>
       </div>
+      <div class="episode-transcode-status__metric">
+        <span>{{ t('episodeTranscode.updatedAt') }}</span>
+        <b>{{ formatDateTime(detail.updatedAt) }}</b>
+      </div>
       <el-button
         class="episode-transcode-status__retry"
         type="primary"
@@ -84,6 +89,9 @@ const { t } = useI18n()
       :status="view.progressStatus"
       :stroke-width="8"
     />
+    <p v-if="view.isProcessing && view.progress === 0" class="episode-transcode-status__waiting">
+      {{ t('episodeTranscode.waitingProgress') }}
+    </p>
     <el-alert
       v-if="detail.errorMsg"
       class="episode-transcode-status__error-alert"
@@ -138,6 +146,12 @@ const { t } = useI18n()
   margin-top: 12px;
 }
 
+.episode-transcode-status__waiting {
+  margin: 8px 0 0;
+  font-size: 12px;
+  color: var(--el-color-warning);
+}
+
 .episode-transcode-status__error-alert {
   margin-top: 12px;
 }

From 1d18b7b52b5694cb563e2607677bc86ea0f5ac4c Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Thu, 22 Oct 2026 18:12:30 +0800
Subject: [PATCH 53/59] =?UTF-8?q?feat(admin):=20=E6=B8=85=E6=99=B0?=
 =?UTF-8?q?=E5=BA=A6=E4=BA=A7=E7=89=A9=E6=94=AF=E6=8C=81=20HLS=20=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E6=92=AD=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/locales/en.ts                             |   3 +
 src/locales/zh-CN.ts                          |   3 +
 .../upload/EpisodeTranscodeRenditions.vue     |  47 +++----
 .../upload/RenditionPlayerDialog.vue          | 126 ++++++++++++++++++
 5 files changed, 150 insertions(+), 30 deletions(-)
 create mode 100644 src/views/contentManagement/upload/RenditionPlayerDialog.vue

diff --git a/package.json b/package.json
index 4153b9f..9fa89f3 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "echarts": "^5.4.3",
     "echarts-wordcloud": "^2.1.0",
     "element-plus": "2.5.5",
+    "hls.js": "^1.7.3",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
diff --git a/src/locales/en.ts b/src/locales/en.ts
index b0dbe88..26c7faa 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -559,6 +559,9 @@ export default {
     actions: 'Actions',
     copyUrl: 'Copy playback URL',
     openUrl: 'Open in new window',
+    play: 'Preview playback',
+    playerFailed: 'Playback failed, please check the rendition output',
+    playerUnsupported: 'This browser does not support HLS playback',
     copySuccess: 'Playback URL copied',
     copyFailed: 'Failed to copy playback URL',
     openFailed: 'Unable to open playback URL',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 9865516..1387d44 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -553,6 +553,9 @@ export default {
     actions: '操作',
     copyUrl: '复制播放地址',
     openUrl: '新窗口打开',
+    play: '预览播放',
+    playerFailed: '播放失败，请检查产物是否完整',
+    playerUnsupported: '当前浏览器不支持 HLS 播放',
     copySuccess: '播放地址已复制',
     copyFailed: '复制播放地址失败',
     openFailed: '无法打开播放地址',
diff --git a/src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue b/src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue
index c965a2b..b2f73d8 100644
--- a/src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue
+++ b/src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue
@@ -2,12 +2,12 @@
 <!-- 剧集转码清晰度表格与播放地址操作 -->
 
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core'
-import { ElMessage } from 'element-plus'
+import { ref } from 'vue'
 import type { MediaRenditionItem } from '@/api/admin/types'
 import { AppIcon } from '@/components/AppIcon'
 import { AppIcons } from '@/constants/icons'
 import { useI18n } from '@/hooks/web/useI18n'
+import RenditionPlayerDialog from './RenditionPlayerDialog.vue'
 import {
   formatBytes,
   formatDuration,
@@ -20,30 +20,20 @@ defineProps<{
 }>()
 
 const { t } = useI18n()
-const { copy, isSupported } = useClipboard()
+
+const playerVisible = ref(false)
+const playerUrl = ref('')
+const playerTitle = ref('')
 
 function statusLabel(rendition: MediaRenditionItem) {
   return t(`episodeTranscode.status.${renditionStatusLabelKey(rendition.status)}`)
 }
 
-async function copyPlayUrl(url: string) {
-  if (!url) return
-  if (!isSupported.value) {
-    ElMessage.error(t('episodeTranscode.copyFailed'))
-    return
-  }
-  try {
-    await copy(url)
-    ElMessage.success(t('episodeTranscode.copySuccess'))
-  } catch {
-    ElMessage.error(t('episodeTranscode.copyFailed'))
-  }
-}
-
-function openPlayUrl(url: string) {
-  if (!url || !window.open(url, '_blank', 'noopener,noreferrer')) {
-    ElMessage.error(t('episodeTranscode.openFailed'))
-  }
+function playRendition(rendition: MediaRenditionItem) {
+  if (!rendition.hlsUrl) return
+  playerUrl.value = rendition.hlsUrl
+  playerTitle.value = `${rendition.qualityName} · ${rendition.resolution}`
+  playerVisible.value = true
 }
 </script>
 
@@ -82,21 +72,18 @@ function openPlayUrl(url: string) {
         </el-tag>
       </template>
     </el-table-column>
-    <el-table-column :label="t('episodeTranscode.actions')" width="92" fixed="right" align="center">
+    <el-table-column :label="t('episodeTranscode.actions')" width="76" fixed="right" align="center">
       <template #default="{ row }">
-        <el-tooltip :content="t('episodeTranscode.copyUrl')" placement="top">
-          <el-button text circle @click="copyPlayUrl(row.hlsUrl)">
-            <AppIcon :icon="AppIcons.copy" :size="17" />
-          </el-button>
-        </el-tooltip>
-        <el-tooltip :content="t('episodeTranscode.openUrl')" placement="top">
-          <el-button text circle @click="openPlayUrl(row.hlsUrl)">
-            <AppIcon :icon="AppIcons.openInNew" :size="17" />
+        <el-tooltip :content="t('episodeTranscode.play')" placement="top">
+          <el-button text circle @click="playRendition(row)">
+            <AppIcon :icon="AppIcons.videoPlay" :size="17" />
           </el-button>
         </el-tooltip>
       </template>
     </el-table-column>
   </el-table>
+
+  <RenditionPlayerDialog v-model="playerVisible" :url="playerUrl" :title="playerTitle" />
 </template>
 
 <style scoped>
diff --git a/src/views/contentManagement/upload/RenditionPlayerDialog.vue b/src/views/contentManagement/upload/RenditionPlayerDialog.vue
new file mode 100644
index 0000000..bdacf32
--- /dev/null
+++ b/src/views/contentManagement/upload/RenditionPlayerDialog.vue
@@ -0,0 +1,126 @@
+<!-- Author: fruit.com.cn -->
+<!-- 清晰度产物 HLS 预览播放器：Chrome/Edge 用 hls.js，Safari 走原生 -->
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import type Hls from 'hls.js'
+import { useI18n } from '@/hooks/web/useI18n'
+
+const props = defineProps<{
+  modelValue: boolean
+  url: string
+  title: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const { t } = useI18n()
+
+const videoRef = ref<HTMLVideoElement>()
+const errorMsg = ref('')
+let hls: Hls | null = null
+
+function destroy() {
+  hls?.destroy()
+  hls = null
+  const video = videoRef.value
+  if (video) {
+    video.pause()
+    video.removeAttribute('src')
+    video.load()
+  }
+}
+
+async function start(url: string) {
+  await nextTick()
+  const video = videoRef.value
+  if (!video || !url) return
+  errorMsg.value = ''
+  destroy()
+
+  if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    video.src = url
+    video.play().catch(() => {})
+    return
+  }
+
+  const { default: HlsPlayer } = await import('hls.js')
+  if (!HlsPlayer.isSupported()) {
+    errorMsg.value = t('episodeTranscode.playerUnsupported')
+    return
+  }
+  const instance = new HlsPlayer()
+  hls = instance
+  instance.on(HlsPlayer.Events.MANIFEST_PARSED, () => {
+    video.play().catch(() => {})
+  })
+  instance.on(HlsPlayer.Events.ERROR, (_event, data) => {
+    if (data?.fatal) {
+      errorMsg.value = t('episodeTranscode.playerFailed')
+    }
+  })
+  instance.loadSource(url)
+  instance.attachMedia(video)
+}
+
+watch(
+  () => props.modelValue,
+  (visible) => {
+    if (visible) {
+      start(props.url)
+    } else {
+      destroy()
+    }
+  }
+)
+
+onBeforeUnmount(destroy)
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    :title="title"
+    width="720px"
+    destroy-on-close
+    class="rendition-player-dialog"
+    @update:model-value="emit('update:modelValue', $event)"
+    @closed="destroy"
+  >
+    <div class="rendition-player">
+      <video ref="videoRef" class="rendition-player__video" controls playsinline />
+      <p v-if="errorMsg" class="rendition-player__error">{{ errorMsg }}</p>
+      <p class="rendition-player__url" :title="url">{{ url }}</p>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+.rendition-player {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.rendition-player__video {
+  width: 100%;
+  max-height: 62vh;
+  background: #000;
+  border-radius: 8px;
+}
+
+.rendition-player__error {
+  margin: 0;
+  color: var(--el-color-danger);
+  font-size: 13px;
+}
+
+.rendition-player__url {
+  margin: 0;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  word-break: break-all;
+}
+</style>

From a47700a98024fb335e0386dfb0576445f2b2c560 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Thu, 22 Oct 2026 22:18:05 +0800
Subject: [PATCH 54/59] =?UTF-8?q?feat(admin):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E7=AE=A1=E7=90=86=E4=B8=8E=E5=89=A7=E5=8D=95?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/dramaClassification.ts          |  88 +++
 src/api/admin/dramaPlaylistCategory.ts        |  80 +++
 .../contentManagement/CategoryDramaView.vue   | 601 +++++++++++++++++
 .../contentManagement/DramaPlaylistView.vue   | 618 ++++++++++++++++++
 4 files changed, 1387 insertions(+)
 create mode 100644 src/api/admin/dramaClassification.ts
 create mode 100644 src/api/admin/dramaPlaylistCategory.ts
 create mode 100644 src/views/contentManagement/CategoryDramaView.vue
 create mode 100644 src/views/contentManagement/DramaPlaylistView.vue

diff --git a/src/api/admin/dramaClassification.ts b/src/api/admin/dramaClassification.ts
new file mode 100644
index 0000000..50f6b9d
--- /dev/null
+++ b/src/api/admin/dramaClassification.ts
@@ -0,0 +1,88 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type { PageResult } from './types'
+
+export interface DramaClassificationItem {
+  id: number
+  name: string
+  sort: number
+  status: number
+  dramaCount: number
+  updatedAt?: string
+}
+
+export interface DramaClassificationSaveData {
+  name: string
+  sort?: number
+  status?: number
+}
+
+export interface ClassificationDramaItem {
+  id: number
+  title: string
+  cover: string
+  status: string
+  totalEpisodes: number
+  sort: number
+  updatedAt: string
+}
+
+export interface ClassificationDramaPageParams {
+  keyword?: string
+  pageIndex?: number
+  pageSize?: number
+}
+
+export const listClassificationsApi = () => {
+  return request.get<DramaClassificationItem[]>({ url: '/admin/drama-classifications' })
+}
+
+export const createClassificationApi = (data: DramaClassificationSaveData) => {
+  return request.post<number>({ url: '/admin/drama-classifications', data })
+}
+
+export const updateClassificationApi = (id: number, data: DramaClassificationSaveData) => {
+  return request.put<void>({ url: `/admin/drama-classifications/${id}`, data })
+}
+
+export const deleteClassificationApi = (id: number) => {
+  return request.delete<void>({ url: `/admin/drama-classifications/${id}` })
+}
+
+/** 分类下已关联的短剧 */
+export const listClassificationDramasApi = (
+  id: number,
+  params: ClassificationDramaPageParams
+) => {
+  return request.get<PageResult<ClassificationDramaItem>>({
+    url: `/admin/drama-classifications/${id}/dramas`,
+    params
+  })
+}
+
+/** 尚未关联到该分类的短剧（添加弹窗用） */
+export const listClassificationDramaCandidatesApi = (
+  id: number,
+  params: ClassificationDramaPageParams
+) => {
+  return request.get<PageResult<ClassificationDramaItem>>({
+    url: `/admin/drama-classifications/${id}/dramas/candidates`,
+    params
+  })
+}
+
+/** 批量关联短剧，返回实际新增数量 */
+export const bindClassificationDramasApi = (id: number, dramaIds: number[]) => {
+  return request.post<number>({
+    url: `/admin/drama-classifications/${id}/dramas`,
+    data: { dramaIds }
+  })
+}
+
+/** 从分类移除短剧 */
+export const unbindClassificationDramaApi = (id: number, dramaId: number) => {
+  return request.delete<void>({
+    url: `/admin/drama-classifications/${id}/dramas/${dramaId}`
+  })
+}
diff --git a/src/api/admin/dramaPlaylistCategory.ts b/src/api/admin/dramaPlaylistCategory.ts
new file mode 100644
index 0000000..45c87de
--- /dev/null
+++ b/src/api/admin/dramaPlaylistCategory.ts
@@ -0,0 +1,80 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type { PageResult } from './types'
+import type { ClassificationDramaItem } from './dramaClassification'
+
+export interface DramaPlaylistCategoryItem {
+  id: number
+  name: string
+  description: string
+  sort: number
+  status: number
+  dramaCount: number
+}
+
+export interface DramaPlaylistCategorySaveData {
+  name: string
+  description?: string
+  sort?: number
+  status?: number
+}
+
+export interface PlaylistCategoryDramaPageParams {
+  keyword?: string
+  pageIndex?: number
+  pageSize?: number
+}
+
+export const listPlaylistCategoriesApi = () => {
+  return request.get<DramaPlaylistCategoryItem[]>({ url: '/admin/drama-playlist-categories' })
+}
+
+export const createPlaylistCategoryApi = (data: DramaPlaylistCategorySaveData) => {
+  return request.post<number>({ url: '/admin/drama-playlist-categories', data })
+}
+
+export const updatePlaylistCategoryApi = (id: number, data: DramaPlaylistCategorySaveData) => {
+  return request.put<void>({ url: `/admin/drama-playlist-categories/${id}`, data })
+}
+
+export const deletePlaylistCategoryApi = (id: number) => {
+  return request.delete<void>({ url: `/admin/drama-playlist-categories/${id}` })
+}
+
+/** 分类下已关联的短剧 */
+export const listPlaylistCategoryDramasApi = (
+  id: number,
+  params: PlaylistCategoryDramaPageParams
+) => {
+  return request.get<PageResult<ClassificationDramaItem>>({
+    url: `/admin/drama-playlist-categories/${id}/dramas`,
+    params
+  })
+}
+
+/** 尚未关联到该分类的短剧（选择弹窗用） */
+export const listPlaylistCategoryDramaCandidatesApi = (
+  id: number,
+  params: PlaylistCategoryDramaPageParams
+) => {
+  return request.get<PageResult<ClassificationDramaItem>>({
+    url: `/admin/drama-playlist-categories/${id}/dramas/candidates`,
+    params
+  })
+}
+
+/** 批量关联短剧，返回实际新增数量 */
+export const bindPlaylistCategoryDramasApi = (id: number, dramaIds: number[]) => {
+  return request.post<number>({
+    url: `/admin/drama-playlist-categories/${id}/dramas`,
+    data: { dramaIds }
+  })
+}
+
+/** 从分类移除短剧 */
+export const unbindPlaylistCategoryDramaApi = (id: number, dramaId: number) => {
+  return request.delete<void>({
+    url: `/admin/drama-playlist-categories/${id}/dramas/${dramaId}`
+  })
+}
diff --git a/src/views/contentManagement/CategoryDramaView.vue b/src/views/contentManagement/CategoryDramaView.vue
new file mode 100644
index 0000000..05d7968
--- /dev/null
+++ b/src/views/contentManagement/CategoryDramaView.vue
@@ -0,0 +1,601 @@
+<!-- Author: fruit.com.cn -->
+<!-- 分类管理：运营自定义分类（与「类型」是两个概念），并关联任意多部短剧 -->
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+import {
+  bindClassificationDramasApi,
+  createClassificationApi,
+  deleteClassificationApi,
+  listClassificationDramaCandidatesApi,
+  listClassificationDramasApi,
+  listClassificationsApi,
+  unbindClassificationDramaApi,
+  updateClassificationApi
+} from '@/api/admin/dramaClassification'
+import { statusClass } from '@/utils/status'
+import { useRbac } from '@/stores/rbac'
+import PageHeading from '@/views/components/PageHeading.vue'
+
+const { can } = useRbac()
+
+const STATUS_TEXT = {
+  draft: '草稿',
+  reviewing: '审核中',
+  approved: '待发布',
+  published: '已上线',
+  offline: '已下线'
+}
+
+const classifications = ref([])
+const activeId = ref(null)
+const activeClassification = computed(
+  () => classifications.value.find((item) => item.id === activeId.value) || null
+)
+
+const loading = ref(false)
+const dramas = ref([])
+const total = ref(0)
+const pageIndex = ref(1)
+const pageSize = ref(10)
+const keyword = ref('')
+
+const dialogVisible = ref(false)
+const saving = ref(false)
+const editingId = ref(null)
+const form = reactive({ name: '', sort: 1, status: 1 })
+
+const candidateVisible = ref(false)
+const candidateLoading = ref(false)
+const candidates = ref([])
+const candidateTotal = ref(0)
+const candidatePage = ref(1)
+const candidatePageSize = ref(10)
+const candidateKeyword = ref('')
+const selectedDramas = ref([])
+const binding = ref(false)
+
+async function loadClassifications() {
+  const res = await listClassificationsApi()
+  classifications.value = res.data || []
+  if (activeId.value && !classifications.value.some((item) => item.id === activeId.value)) {
+    activeId.value = classifications.value[0]?.id ?? null
+  }
+  if (!activeId.value) {
+    activeId.value = classifications.value[0]?.id ?? null
+  }
+  await loadDramas()
+}
+
+async function loadDramas() {
+  if (!activeId.value) {
+    dramas.value = []
+    total.value = 0
+    return
+  }
+  loading.value = true
+  try {
+    const res = await listClassificationDramasApi(activeId.value, {
+      keyword: keyword.value || undefined,
+      pageIndex: pageIndex.value,
+      pageSize: pageSize.value
+    })
+    dramas.value = res.data?.list || []
+    total.value = res.data?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectClassification(row) {
+  if (activeId.value === row.id) return
+  activeId.value = row.id
+  pageIndex.value = 1
+  keyword.value = ''
+  loadDramas()
+}
+
+function search() {
+  pageIndex.value = 1
+  loadDramas()
+}
+
+function changePage(value) {
+  pageIndex.value = value
+  loadDramas()
+}
+
+function openCreate() {
+  editingId.value = null
+  const maxSort = classifications.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
+  Object.assign(form, { name: '', sort: maxSort + 1, 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 })
+  dialogVisible.value = true
+}
+
+async function saveClassification() {
+  if (!form.name.trim()) {
+    ElMessage.warning('请填写分类名称')
+    return
+  }
+  saving.value = true
+  try {
+    const payload = { name: form.name.trim(), sort: form.sort, status: form.status }
+    if (editingId.value) {
+      await updateClassificationApi(editingId.value, payload)
+      ElMessage.success('分类已更新')
+    } else {
+      const res = await createClassificationApi(payload)
+      activeId.value = res.data
+      pageIndex.value = 1
+      ElMessage.success('分类已创建')
+    }
+    dialogVisible.value = false
+    await loadClassifications()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function confirmDelete(row) {
+  try {
+    await ElMessageBox.confirm(
+      `确定删除分类「${row.name}」吗？关联关系会一起删除，短剧本身不受影响。`,
+      '删除确认',
+      { confirmButtonText: '确认删除', cancelButtonText: '取消', type: 'warning' }
+    )
+  } catch {
+    return
+  }
+  await deleteClassificationApi(row.id)
+  if (activeId.value === row.id) {
+    activeId.value = null
+  }
+  ElMessage.success('分类已删除')
+  await loadClassifications()
+}
+
+async function removeDrama(row) {
+  try {
+    await ElMessageBox.confirm(
+      `确定把「${row.title}」从「${activeClassification.value?.name}」移出吗？`,
+      '移除确认',
+      { confirmButtonText: '确认移出', cancelButtonText: '取消', type: 'warning' }
+    )
+  } catch {
+    return
+  }
+  await unbindClassificationDramaApi(activeId.value, row.id)
+  ElMessage.success('已移出')
+  await Promise.all([loadDramas(), loadClassifications()])
+}
+
+function openCandidates() {
+  candidateVisible.value = true
+  candidatePage.value = 1
+  candidateKeyword.value = ''
+  selectedDramas.value = []
+  loadCandidates()
+}
+
+async function loadCandidates() {
+  if (!activeId.value) return
+  candidateLoading.value = true
+  try {
+    const res = await listClassificationDramaCandidatesApi(activeId.value, {
+      keyword: candidateKeyword.value || undefined,
+      pageIndex: candidatePage.value,
+      pageSize: candidatePageSize.value
+    })
+    candidates.value = res.data?.list || []
+    candidateTotal.value = res.data?.total || 0
+  } finally {
+    candidateLoading.value = false
+  }
+}
+
+function candidateSearch() {
+  candidatePage.value = 1
+  loadCandidates()
+}
+
+function changeCandidatePage(value) {
+  candidatePage.value = value
+  loadCandidates()
+}
+
+function onSelectionChange(rows) {
+  selectedDramas.value = rows
+}
+
+async function confirmBind() {
+  if (!selectedDramas.value.length) {
+    ElMessage.warning('请先选择要关联的短剧')
+    return
+  }
+  binding.value = true
+  try {
+    const res = await bindClassificationDramasApi(
+      activeId.value,
+      selectedDramas.value.map((item) => item.id)
+    )
+    ElMessage.success(`已关联 ${res.data ?? selectedDramas.value.length} 部短剧`)
+    candidateVisible.value = false
+    await Promise.all([loadDramas(), loadClassifications()])
+  } finally {
+    binding.value = false
+  }
+}
+
+function formatTime(value) {
+  if (!value) return '—'
+  return String(value).replace('T', ' ').slice(0, 19)
+}
+
+onMounted(loadClassifications)
+</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>
+
+  <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>
+
+    <section class="panel classification-layout__main">
+      <div class="classification-toolbar">
+        <div class="classification-toolbar__title">
+          {{ activeClassification?.name || '请选择分类' }}
+          <small>共 {{ total }} 部关联短剧</small>
+        </div>
+        <div class="classification-toolbar__search">
+          <el-input
+            v-model="keyword"
+            placeholder="搜索短剧名称"
+            clearable
+            style="width: 200px"
+            @keyup.enter="search"
+            @clear="search"
+          />
+          <el-button type="primary" plain @click="search">查询</el-button>
+          <el-button
+            v-if="can('drama:update')"
+            :disabled="!activeId"
+            @click="openCandidates"
+          >
+            <AppIcon :icon="AppIcons.add" />
+            添加短剧
+          </el-button>
+        </div>
+      </div>
+
+      <el-table
+        v-loading="loading"
+        :data="dramas"
+        row-key="id"
+        border
+        class="drama-el-table"
+        empty-text="该分类下还没有关联短剧"
+      >
+        <el-table-column label="封面" width="88">
+          <template #default="{ row }">
+            <img v-if="row.cover" :src="row.cover" class="classification-cover" alt="封面" />
+            <div v-else class="classification-cover classification-cover--empty">无</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="title" label="短剧名称" min-width="200" />
+        <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-column label="更新时间" width="180">
+          <template #default="{ row }">{{ formatTime(row.updatedAt) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="110" fixed="right">
+          <template #default="{ row }">
+            <el-button
+              v-if="can('drama:update')"
+              type="danger"
+              size="small"
+              @click="removeDrama(row)"
+              >移出</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="classification-pagination">
+        <el-pagination
+          :current-page="pageIndex"
+          :page-size="pageSize"
+          :total="total"
+          layout="total, prev, pager, next"
+          @current-change="changePage"
+        />
+      </div>
+    </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>
+</template>
+
+<style scoped>
+.classification-layout {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 16px;
+  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 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.classification-list__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px 8px 16px;
+  cursor: pointer;
+  color: var(--el-text-color-regular);
+  border-left: 3px solid transparent;
+}
+
+.classification-list__item:hover {
+  background: var(--el-fill-color-light);
+}
+
+.classification-list__item.is-active {
+  background: var(--el-color-primary-light-9);
+  border-left-color: var(--el-color-primary);
+  color: var(--el-color-primary);
+  font-weight: 600;
+}
+
+.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;
+  text-align: center;
+  border-radius: 9px;
+  background: var(--el-fill-color);
+  color: var(--el-text-color-secondary);
+}
+
+.classification-list__actions {
+  display: none;
+  gap: 2px;
+}
+
+.classification-list__item:hover .classification-list__actions {
+  display: flex;
+}
+
+.classification-list__empty {
+  padding: 16px;
+  color: var(--el-text-color-secondary);
+  line-height: 1.6;
+}
+
+.classification-layout__main {
+  padding: 16px;
+}
+
+.classification-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.classification-toolbar__title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.classification-toolbar__title small {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--el-text-color-secondary);
+}
+
+.classification-toolbar__search {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.classification-cover {
+  width: 48px;
+  height: 64px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.classification-cover--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  background: var(--el-fill-color-light);
+}
+
+.classification-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
+.classification-form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+</style>
diff --git a/src/views/contentManagement/DramaPlaylistView.vue b/src/views/contentManagement/DramaPlaylistView.vue
new file mode 100644
index 0000000..2bf1fb7
--- /dev/null
+++ b/src/views/contentManagement/DramaPlaylistView.vue
@@ -0,0 +1,618 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧单管理：剧单使用自己的一套分类（与「分类管理」无关），分类下直接关联短剧 -->
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+import {
+  bindPlaylistCategoryDramasApi,
+  createPlaylistCategoryApi,
+  deletePlaylistCategoryApi,
+  listPlaylistCategoriesApi,
+  listPlaylistCategoryDramaCandidatesApi,
+  listPlaylistCategoryDramasApi,
+  unbindPlaylistCategoryDramaApi,
+  updatePlaylistCategoryApi
+} from '@/api/admin/dramaPlaylistCategory'
+import { statusClass } from '@/utils/status'
+import { useRbac } from '@/stores/rbac'
+import PageHeading from '@/views/components/PageHeading.vue'
+
+const { can } = useRbac()
+
+const STATUS_TEXT = {
+  draft: '草稿',
+  reviewing: '审核中',
+  approved: '待发布',
+  published: '已上线',
+  offline: '已下线'
+}
+
+const categories = ref([])
+const activeId = ref(null)
+const activeCategory = computed(
+  () => categories.value.find((item) => item.id === activeId.value) || null
+)
+
+const loading = ref(false)
+const dramas = ref([])
+const total = ref(0)
+const pageIndex = ref(1)
+const pageSize = ref(10)
+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 candidateVisible = ref(false)
+const candidateLoading = ref(false)
+const candidates = ref([])
+const candidateTotal = ref(0)
+const candidatePage = ref(1)
+const candidatePageSize = ref(10)
+const candidateKeyword = ref('')
+const selectedDramas = ref([])
+const binding = ref(false)
+
+async function loadCategories() {
+  const res = await listPlaylistCategoriesApi()
+  categories.value = res.data || []
+  if (activeId.value && !categories.value.some((item) => item.id === activeId.value)) {
+    activeId.value = categories.value[0]?.id ?? null
+  }
+  if (!activeId.value) {
+    activeId.value = categories.value[0]?.id ?? null
+  }
+  await loadDramas()
+}
+
+async function loadDramas() {
+  if (!activeId.value) {
+    dramas.value = []
+    total.value = 0
+    return
+  }
+  loading.value = true
+  try {
+    const res = await listPlaylistCategoryDramasApi(activeId.value, {
+      keyword: keyword.value || undefined,
+      pageIndex: pageIndex.value,
+      pageSize: pageSize.value
+    })
+    dramas.value = res.data?.list || []
+    total.value = res.data?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectCategory(row) {
+  if (activeId.value === row.id) return
+  activeId.value = row.id
+  pageIndex.value = 1
+  keyword.value = ''
+  loadDramas()
+}
+
+function search() {
+  pageIndex.value = 1
+  loadDramas()
+}
+
+function changePage(value) {
+  pageIndex.value = value
+  loadDramas()
+}
+
+function openCreate() {
+  editingId.value = null
+  const maxSort = categories.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
+  Object.assign(form, { name: '', description: '', sort: maxSort + 1, status: 1 })
+  dialogVisible.value = true
+}
+
+function openEdit(row) {
+  editingId.value = row.id
+  Object.assign(form, {
+    name: row.name,
+    description: row.description || '',
+    sort: row.sort ?? 0,
+    status: row.status ?? 1
+  })
+  dialogVisible.value = true
+}
+
+async function saveCategory() {
+  if (!form.name.trim()) {
+    ElMessage.warning('请填写剧单分类名称')
+    return
+  }
+  saving.value = true
+  try {
+    const payload = {
+      name: form.name.trim(),
+      description: form.description.trim(),
+      sort: form.sort,
+      status: form.status
+    }
+    if (editingId.value) {
+      await updatePlaylistCategoryApi(editingId.value, payload)
+      ElMessage.success('剧单分类已更新')
+    } else {
+      const res = await createPlaylistCategoryApi(payload)
+      activeId.value = res.data
+      pageIndex.value = 1
+      ElMessage.success('剧单分类已创建')
+    }
+    dialogVisible.value = false
+    await loadCategories()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function confirmDelete(row) {
+  try {
+    await ElMessageBox.confirm(
+      `确定删除剧单分类「${row.name}」吗？关联关系会一起删除，短剧本身不受影响。`,
+      '删除确认',
+      { confirmButtonText: '确认删除', cancelButtonText: '取消', type: 'warning' }
+    )
+  } catch {
+    return
+  }
+  await deletePlaylistCategoryApi(row.id)
+  if (activeId.value === row.id) {
+    activeId.value = null
+  }
+  ElMessage.success('剧单分类已删除')
+  await loadCategories()
+}
+
+async function removeDrama(row) {
+  try {
+    await ElMessageBox.confirm(
+      `确定把「${row.title}」从「${activeCategory.value?.name}」移出吗？`,
+      '移除确认',
+      { confirmButtonText: '确认移出', cancelButtonText: '取消', type: 'warning' }
+    )
+  } catch {
+    return
+  }
+  await unbindPlaylistCategoryDramaApi(activeId.value, row.id)
+  ElMessage.success('已移出')
+  await Promise.all([loadDramas(), loadCategories()])
+}
+
+function openCandidates() {
+  candidateVisible.value = true
+  candidatePage.value = 1
+  candidateKeyword.value = ''
+  selectedDramas.value = []
+  loadCandidates()
+}
+
+async function loadCandidates() {
+  if (!activeId.value) return
+  candidateLoading.value = true
+  try {
+    const res = await listPlaylistCategoryDramaCandidatesApi(activeId.value, {
+      keyword: candidateKeyword.value || undefined,
+      pageIndex: candidatePage.value,
+      pageSize: candidatePageSize.value
+    })
+    candidates.value = res.data?.list || []
+    candidateTotal.value = res.data?.total || 0
+  } finally {
+    candidateLoading.value = false
+  }
+}
+
+function candidateSearch() {
+  candidatePage.value = 1
+  loadCandidates()
+}
+
+function changeCandidatePage(value) {
+  candidatePage.value = value
+  loadCandidates()
+}
+
+function onSelectionChange(rows) {
+  selectedDramas.value = rows
+}
+
+async function confirmBind() {
+  if (!selectedDramas.value.length) {
+    ElMessage.warning('请先选择要加入的短剧')
+    return
+  }
+  binding.value = true
+  try {
+    const res = await bindPlaylistCategoryDramasApi(
+      activeId.value,
+      selectedDramas.value.map((item) => item.id)
+    )
+    ElMessage.success(`已加入 ${res.data ?? selectedDramas.value.length} 部短剧`)
+    candidateVisible.value = false
+    await Promise.all([loadDramas(), loadCategories()])
+  } finally {
+    binding.value = false
+  }
+}
+
+function formatTime(value) {
+  if (!value) return '—'
+  return String(value).replace('T', ' ').slice(0, 19)
+}
+
+onMounted(loadCategories)
+</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>
+
+  <div class="playlist-layout">
+    <aside class="panel playlist-layout__side">
+      <div class="playlist-layout__side-title">剧单分类</div>
+      <el-scrollbar height="560px">
+        <ul class="playlist-list">
+          <li
+            v-for="item in categories"
+            :key="item.id"
+            class="playlist-list__item"
+            :class="{ 'is-active': item.id === activeId }"
+            @click="selectCategory(item)"
+          >
+            <div class="playlist-list__main">
+              <span class="playlist-list__name">{{ item.name }}</span>
+              <span class="playlist-list__count">{{ item.dramaCount || 0 }}</span>
+            </div>
+            <div class="playlist-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="!categories.length" class="playlist-list__empty">
+            还没有剧单分类，点右上角「新建分类」开始
+          </li>
+        </ul>
+      </el-scrollbar>
+    </aside>
+
+    <section class="panel playlist-layout__main">
+      <div class="playlist-toolbar">
+        <div class="playlist-toolbar__title">
+          {{ activeCategory?.name || '请选择剧单分类' }}
+          <small>共 {{ total }} 部短剧</small>
+          <small v-if="activeCategory?.description">{{ activeCategory.description }}</small>
+        </div>
+        <div class="playlist-toolbar__search">
+          <el-input
+            v-model="keyword"
+            placeholder="搜索短剧名称"
+            clearable
+            style="width: 200px"
+            @keyup.enter="search"
+            @clear="search"
+          />
+          <el-button type="primary" plain @click="search">查询</el-button>
+          <el-button v-if="can('drama:update')" :disabled="!activeId" @click="openCandidates">
+            <AppIcon :icon="AppIcons.add" />
+            选择短剧
+          </el-button>
+        </div>
+      </div>
+
+      <el-table
+        v-loading="loading"
+        :data="dramas"
+        row-key="id"
+        border
+        class="drama-el-table"
+        empty-text="该剧单分类下还没有短剧"
+      >
+        <el-table-column label="封面" width="88">
+          <template #default="{ row }">
+            <img v-if="row.cover" :src="row.cover" class="playlist-cover" alt="封面" />
+            <div v-else class="playlist-cover playlist-cover--empty">无</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="title" label="短剧名称" min-width="200" />
+        <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-column label="更新时间" width="180">
+          <template #default="{ row }">{{ formatTime(row.updatedAt) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="110" fixed="right">
+          <template #default="{ row }">
+            <el-button
+              v-if="can('drama:update')"
+              type="danger"
+              size="small"
+              @click="removeDrama(row)"
+              >移出</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="playlist-pagination">
+        <el-pagination
+          :current-page="pageIndex"
+          :page-size="pageSize"
+          :total="total"
+          layout="total, prev, pager, next"
+          @current-change="changePage"
+        />
+      </div>
+    </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>
+      <el-form-item label="描述">
+        <el-input
+          v-model="form.description"
+          type="textarea"
+          :rows="2"
+          maxlength="255"
+          show-word-limit
+          placeholder="分类用途说明"
+        />
+      </el-form-item>
+      <div class="playlist-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="saveCategory">保存</el-button>
+    </template>
+  </el-dialog>
+
+  <el-dialog v-model="candidateVisible" title="选择短剧" width="760px">
+    <div class="playlist-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="playlist-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>
+</template>
+
+<style scoped>
+.playlist-layout {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.playlist-layout__side {
+  padding: 12px 0 8px;
+}
+
+.playlist-layout__side-title {
+  padding: 0 16px 10px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.playlist-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.playlist-list__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px 8px 16px;
+  cursor: pointer;
+  color: var(--el-text-color-regular);
+  border-left: 3px solid transparent;
+}
+
+.playlist-list__item:hover {
+  background: var(--el-fill-color-light);
+}
+
+.playlist-list__item.is-active {
+  background: var(--el-color-primary-light-9);
+  border-left-color: var(--el-color-primary);
+  color: var(--el-color-primary);
+  font-weight: 600;
+}
+
+.playlist-list__main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.playlist-list__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.playlist-list__count {
+  min-width: 24px;
+  padding: 0 6px;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: center;
+  border-radius: 9px;
+  background: var(--el-fill-color);
+  color: var(--el-text-color-secondary);
+}
+
+.playlist-list__actions {
+  display: none;
+  gap: 2px;
+}
+
+.playlist-list__item:hover .playlist-list__actions {
+  display: flex;
+}
+
+.playlist-list__empty {
+  padding: 16px;
+  color: var(--el-text-color-secondary);
+  line-height: 1.6;
+}
+
+.playlist-layout__main {
+  padding: 16px;
+}
+
+.playlist-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.playlist-toolbar__title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.playlist-toolbar__title small {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--el-text-color-secondary);
+}
+
+.playlist-toolbar__search {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.playlist-cover {
+  width: 48px;
+  height: 64px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.playlist-cover--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  background: var(--el-fill-color-light);
+}
+
+.playlist-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
+.playlist-form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+</style>

From 91f1f7d793f5d9c8c3c7547709cb6e6ae0522d61 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Thu, 22 Oct 2026 22:18:06 +0800
Subject: [PATCH 55/59] =?UTF-8?q?fix(admin):=20=E7=9F=AD=E5=89=A7=E7=AE=80?=
 =?UTF-8?q?=E4=BB=8B=E9=95=BF=E5=BA=A6=E4=B8=8A=E9=99=90=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E4=B8=BA=201000?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/contentManagement/DramaManagementView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/contentManagement/DramaManagementView.vue b/src/views/contentManagement/DramaManagementView.vue
index f18fa42..ba65d0c 100644
--- a/src/views/contentManagement/DramaManagementView.vue
+++ b/src/views/contentManagement/DramaManagementView.vue
@@ -632,7 +632,7 @@ onMounted(async () => {
             v-model="form.description"
             type="textarea"
             :rows="3"
-            maxlength="200"
+            maxlength="1000"
             show-word-limit
             placeholder="简要介绍剧情"
           />

From c1fb6cc21c374cd31182f251fbe705c543849022 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Fri, 23 Oct 2026 12:34:33 +0800
Subject: [PATCH 56/59] =?UTF-8?q?feat(admin):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E4=B8=89=E8=AF=AD=E5=8D=8F=E8=AE=AE=E8=AE=BE=E7=BD=AE=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/legalDocument.ts                |  18 +++
 src/router/index.ts                           |   8 ++
 .../systemManagement/LegalDocumentView.vue    | 119 ++++++++++++++++++
 3 files changed, 145 insertions(+)
 create mode 100644 src/api/admin/legalDocument.ts
 create mode 100644 src/views/systemManagement/LegalDocumentView.vue

diff --git a/src/api/admin/legalDocument.ts b/src/api/admin/legalDocument.ts
new file mode 100644
index 0000000..02514e8
--- /dev/null
+++ b/src/api/admin/legalDocument.ts
@@ -0,0 +1,18 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+
+export interface LegalDocument {
+  docCode: 'terms' | 'privacy' | string
+  lang: 'zh' | 'en' | 'id' | string
+  title: string
+  content: string
+}
+
+export const listLegalDocumentsApi = () => {
+  return request.get<LegalDocument[]>({ url: '/admin/legal-documents' })
+}
+
+export const saveLegalDocumentsApi = (items: LegalDocument[]) => {
+  return request.put<void>({ url: '/admin/legal-documents', data: items })
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 2dbd084..123ec04 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -211,6 +211,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: '操作日志'
         }
+      },
+      {
+        path: 'legal-documents',
+        name: 'legal-documents',
+        component: () => import('@/views/systemManagement/LegalDocumentView.vue'),
+        meta: {
+          title: '协议设置'
+        }
       }
     ]
   }
diff --git a/src/views/systemManagement/LegalDocumentView.vue b/src/views/systemManagement/LegalDocumentView.vue
new file mode 100644
index 0000000..6926bee
--- /dev/null
+++ b/src/views/systemManagement/LegalDocumentView.vue
@@ -0,0 +1,119 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import {
+  listLegalDocumentsApi,
+  saveLegalDocumentsApi,
+  type LegalDocument
+} from '@/api/admin/legalDocument'
+
+const languages = [
+  { code: 'zh', label: '中文' },
+  { code: 'en', label: 'English' },
+  { code: 'id', label: 'Indonesia' }
+]
+
+const documents = [
+  { code: 'terms', label: '服务条款', path: '/terms' },
+  { code: 'privacy', label: '隐私协议', path: '/privacy' }
+]
+
+const loading = ref(false)
+const saving = ref(false)
+const activeDoc = ref('terms')
+const form = reactive<Record<string, LegalDocument>>({})
+
+const blank = (docCode: string, lang: string): LegalDocument => ({
+  docCode,
+  lang,
+  title: '',
+  content: ''
+})
+
+const fieldKey = (docCode: string, lang: string) => `${docCode}:${lang}`
+
+function ensureFields() {
+  for (const doc of documents) {
+    for (const lang of languages) {
+      const key = fieldKey(doc.code, lang.code)
+      if (!form[key]) form[key] = blank(doc.code, lang.code)
+    }
+  }
+}
+
+async function load() {
+  loading.value = true
+  try {
+    ensureFields()
+    const res = await listLegalDocumentsApi()
+    for (const item of res.data || []) {
+      form[fieldKey(item.docCode, item.lang)] = { ...item }
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function save() {
+  saving.value = true
+  try {
+    ensureFields()
+    const items = documents.flatMap((doc) =>
+      languages.map((lang) => ({ ...form[fieldKey(doc.code, lang.code)], title: '' }))
+    )
+    await saveLegalDocumentsApi(items)
+    ElMessage.success('协议已保存')
+    await load()
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(load)
+ensureFields()
+</script>
+
+<template>
+  <div class="page-heading">
+    <div>
+      <div class="eyebrow">系统管理</div>
+      <h1>协议设置</h1>
+      <p>服务条款与隐私协议各维护中文、英文、印尼语。正文用 Markdown，打开后的页面不另加标题。</p>
+    </div>
+  </div>
+  <section v-loading="loading" class="panel settings-panel">
+    <el-tabs v-model="activeDoc">
+      <el-tab-pane v-for="doc in documents" :key="doc.code" :name="doc.code" :label="doc.label" />
+    </el-tabs>
+    <template v-for="doc in documents" :key="doc.code">
+      <div v-show="activeDoc === doc.code">
+        <p class="legal-path"
+          >公开地址：{{ doc.path }}/zh 、{{ doc.path }}/en 、{{ doc.path }}/id</p
+        >
+        <div v-for="lang in languages" :key="`${doc.code}-${lang.code}`" class="legal-block">
+          <h2>{{ lang.label }}</h2>
+          <el-input
+            v-model="form[`${doc.code}:${lang.code}`].content"
+            type="textarea"
+            :rows="14"
+            placeholder="直接写 Markdown，页面不再另加标题"
+          />
+        </div>
+      </div>
+    </template>
+    <el-button type="primary" :loading="saving" @click="save">保存</el-button>
+  </section>
+</template>
+
+<style scoped>
+.legal-path {
+  margin: 0 0 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.legal-block + .legal-block {
+  margin-top: 8px;
+}
+</style>

From 0578052d6ee3156abb59bec1759058ad1d51e985 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Fri, 23 Oct 2026 12:34:52 +0800
Subject: [PATCH 57/59] =?UTF-8?q?feat(admin):=20=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=B8=8E=E8=A7=82=E7=9C=8B=E8=AE=B0=E5=BD=95=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/types.ts                              |  6 ++++++
 src/views/userManagement/AppUsersView.vue           |  8 ++++++++
 src/views/userManagement/WatchHistoryView.vue       |  5 ++++-
 src/views/userManagement/composables/useAppUsers.js | 10 ++++++++++
 4 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/api/admin/types.ts b/src/api/admin/types.ts
index a58f120..8641c5f 100644
--- a/src/api/admin/types.ts
+++ b/src/api/admin/types.ts
@@ -386,6 +386,10 @@ export interface AppUserItem {
   maskedTarget: string
   createdAt?: string
   lastLoginAt?: string
+  /** ANDROID / IOS / WEB */
+  platform?: string
+  /** 系统版本，例如 Android 16 */
+  osVersion?: string
   /** 预留：会员等级与到期（第二阶段） */
   vipLevel?: number
   vipExpireAt?: string
@@ -425,6 +429,8 @@ export interface WatchHistoryItem {
   finished?: boolean
   source: string
   deviceId: string
+  platform?: string
+  osVersion?: string
   watchedAt?: string
 }
 
diff --git a/src/views/userManagement/AppUsersView.vue b/src/views/userManagement/AppUsersView.vue
index 5b39fe1..ab5c11e 100644
--- a/src/views/userManagement/AppUsersView.vue
+++ b/src/views/userManagement/AppUsersView.vue
@@ -11,6 +11,7 @@ import {
   COUNTRY_OPTIONS,
   formatDuration,
   statusMeta,
+  systemText,
   useAppUsers
 } from './composables/useAppUsers'
 
@@ -172,6 +173,9 @@ function canBeBanned(row) {
           </div>
         </template>
       </el-table-column>
+      <el-table-column label="系统" width="130" show-overflow-tooltip>
+        <template #default="{ row }">{{ systemText(row) }}</template>
+      </el-table-column>
       <el-table-column label="手机 / 邮箱" min-width="150" show-overflow-tooltip>
         <template #default="{ row }">
           <span class="app-user-mono">{{ row.maskedTarget || '—' }}</span>
@@ -268,6 +272,7 @@ function canBeBanned(row) {
             <el-descriptions-item label="最后登录">{{
               detail.lastLoginAt || '—'
             }}</el-descriptions-item>
+            <el-descriptions-item label="系统">{{ systemText(detail) }}</el-descriptions-item>
             <el-descriptions-item label="会员">
               {{ detail.vipLevel ? `等级 ${detail.vipLevel}` : '未开通（第二阶段）' }}
             </el-descriptions-item>
@@ -299,6 +304,9 @@ function canBeBanned(row) {
             <el-table-column label="完成" width="70">
               <template #default="{ row }">{{ row.finished ? '是' : '否' }}</template>
             </el-table-column>
+            <el-table-column label="系统" width="120" show-overflow-tooltip>
+              <template #default="{ row }">{{ systemText(row) }}</template>
+            </el-table-column>
             <el-table-column label="来源" width="80">
               <template #default="{ row }">{{
                 SOURCE_TEXT[row.source] || row.source || '—'
diff --git a/src/views/userManagement/WatchHistoryView.vue b/src/views/userManagement/WatchHistoryView.vue
index 67b1233..eace7b7 100644
--- a/src/views/userManagement/WatchHistoryView.vue
+++ b/src/views/userManagement/WatchHistoryView.vue
@@ -4,7 +4,7 @@
 import { onMounted, reactive, ref } from 'vue'
 import PageHeading from '@/views/components/PageHeading.vue'
 import { pageWatchHistoryApi } from '@/api/admin/appUser'
-import { formatDuration } from './composables/useAppUsers'
+import { formatDuration, systemText } from './composables/useAppUsers'
 
 const SOURCE_OPTIONS = [
   { value: '', label: '全部' },
@@ -176,6 +176,9 @@ onMounted(load)
           </div>
         </template>
       </el-table-column>
+      <el-table-column label="系统" width="130" show-overflow-tooltip>
+        <template #default="{ row }">{{ systemText(row) }}</template>
+      </el-table-column>
       <el-table-column label="短剧" min-width="190">
         <template #default="{ row }">
           <el-tooltip :content="contentTooltip(row)" placement="top">
diff --git a/src/views/userManagement/composables/useAppUsers.js b/src/views/userManagement/composables/useAppUsers.js
index ad119cb..46d3226 100644
--- a/src/views/userManagement/composables/useAppUsers.js
+++ b/src/views/userManagement/composables/useAppUsers.js
@@ -34,6 +34,16 @@ export function statusMeta(status) {
   )
 }
 
+const PLATFORM_TEXT = { ANDROID: 'Android', IOS: 'iOS', WEB: 'Web' }
+
+/** 登录会话上的系统，例如 Android 16。没有记录时显示横线。 */
+export function systemText(row) {
+  const name = PLATFORM_TEXT[row?.platform] || row?.platform || ''
+  const version = row?.osVersion || ''
+  const text = `${name} ${version}`.trim()
+  return text || '—'
+}
+
 /** 毫秒转 mm:ss，观看流水里的进度用 */
 export function formatDuration(ms) {
   const total = Math.max(0, Math.floor((ms || 0) / 1000))

From 8bd6aa35cb3ef8b95646b7d8aae194d45bcecc8a Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Fri, 23 Oct 2026 12:35:09 +0800
Subject: [PATCH 58/59] =?UTF-8?q?style(admin):=20=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=BC=E5=BC=8F=E4=BB=A5=E9=80=9A=E8=BF=87?=
 =?UTF-8?q?=E6=A3=80=E6=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/dramaClassification.ts          |  5 +-
 .../contentManagement/CategoryDramaView.vue   | 49 ++++++++-----------
 .../contentManagement/DramaPlaylistView.vue   | 37 +++++++-------
 .../upload/RenditionPlayerDialog.vue          |  6 +--
 4 files changed, 44 insertions(+), 53 deletions(-)

diff --git a/src/api/admin/dramaClassification.ts b/src/api/admin/dramaClassification.ts
index 50f6b9d..246539d 100644
--- a/src/api/admin/dramaClassification.ts
+++ b/src/api/admin/dramaClassification.ts
@@ -51,10 +51,7 @@ export const deleteClassificationApi = (id: number) => {
 }
 
 /** 分类下已关联的短剧 */
-export const listClassificationDramasApi = (
-  id: number,
-  params: ClassificationDramaPageParams
-) => {
+export const listClassificationDramasApi = (id: number, params: ClassificationDramaPageParams) => {
   return request.get<PageResult<ClassificationDramaItem>>({
     url: `/admin/drama-classifications/${id}/dramas`,
     params
diff --git a/src/views/contentManagement/CategoryDramaView.vue b/src/views/contentManagement/CategoryDramaView.vue
index 05d7968..8107ff2 100644
--- a/src/views/contentManagement/CategoryDramaView.vue
+++ b/src/views/contentManagement/CategoryDramaView.vue
@@ -249,12 +249,7 @@ onMounted(loadClassifications)
     title="分类管理"
     description="分类是运营自定义的分组，与「类型」无关；一个分类可以关联任意多部短剧。"
   >
-    <el-button
-      v-if="can('drama:create')"
-      type="primary"
-      class="primary-button"
-      @click="openCreate"
-    >
+    <el-button v-if="can('drama:create')" type="primary" class="primary-button" @click="openCreate">
       <AppIcon :icon="AppIcons.add" />
       新建分类
     </el-button>
@@ -277,7 +272,13 @@ onMounted(loadClassifications)
               <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)">
+              <el-button
+                v-if="can('drama:update')"
+                text
+                circle
+                size="small"
+                @click="openEdit(item)"
+              >
                 <AppIcon :icon="AppIcons.edit" :size="15" />
               </el-button>
               <el-button
@@ -314,11 +315,7 @@ onMounted(loadClassifications)
             @clear="search"
           />
           <el-button type="primary" plain @click="search">查询</el-button>
-          <el-button
-            v-if="can('drama:update')"
-            :disabled="!activeId"
-            @click="openCandidates"
-          >
+          <el-button v-if="can('drama:update')" :disabled="!activeId" @click="openCandidates">
             <AppIcon :icon="AppIcons.add" />
             添加短剧
           </el-button>
@@ -379,11 +376,7 @@ onMounted(loadClassifications)
     </section>
   </div>
 
-  <el-dialog
-    v-model="dialogVisible"
-    :title="editingId ? '编辑分类' : '新建分类'"
-    width="460px"
-  >
+  <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="例如：本周必看" />
@@ -475,20 +468,20 @@ onMounted(loadClassifications)
 }
 
 .classification-list {
-  margin: 0;
   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;
-  padding: 8px 12px 8px 16px;
-  cursor: pointer;
-  color: var(--el-text-color-regular);
-  border-left: 3px solid transparent;
 }
 
 .classification-list__item:hover {
@@ -496,10 +489,10 @@ onMounted(loadClassifications)
 }
 
 .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);
-  color: var(--el-color-primary);
-  font-weight: 600;
 }
 
 .classification-list__main {
@@ -520,10 +513,10 @@ onMounted(loadClassifications)
   padding: 0 6px;
   font-size: 12px;
   line-height: 18px;
-  text-align: center;
-  border-radius: 9px;
-  background: var(--el-fill-color);
   color: var(--el-text-color-secondary);
+  text-align: center;
+  background: var(--el-fill-color);
+  border-radius: 9px;
 }
 
 .classification-list__actions {
@@ -537,8 +530,8 @@ onMounted(loadClassifications)
 
 .classification-list__empty {
   padding: 16px;
-  color: var(--el-text-color-secondary);
   line-height: 1.6;
+  color: var(--el-text-color-secondary);
 }
 
 .classification-layout__main {
diff --git a/src/views/contentManagement/DramaPlaylistView.vue b/src/views/contentManagement/DramaPlaylistView.vue
index 2bf1fb7..5115a74 100644
--- a/src/views/contentManagement/DramaPlaylistView.vue
+++ b/src/views/contentManagement/DramaPlaylistView.vue
@@ -259,12 +259,7 @@ onMounted(loadCategories)
     title="剧单管理"
     description="剧单使用自己的分类体系（与「分类管理」无关），每个分类下直接选择短剧。"
   >
-    <el-button
-      v-if="can('drama:create')"
-      type="primary"
-      class="primary-button"
-      @click="openCreate"
-    >
+    <el-button v-if="can('drama:create')" type="primary" class="primary-button" @click="openCreate">
       <AppIcon :icon="AppIcons.add" />
       新建分类
     </el-button>
@@ -287,7 +282,13 @@ onMounted(loadCategories)
               <span class="playlist-list__count">{{ item.dramaCount || 0 }}</span>
             </div>
             <div class="playlist-list__actions" @click.stop>
-              <el-button v-if="can('drama:update')" text circle size="small" @click="openEdit(item)">
+              <el-button
+                v-if="can('drama:update')"
+                text
+                circle
+                size="small"
+                @click="openEdit(item)"
+              >
                 <AppIcon :icon="AppIcons.edit" :size="15" />
               </el-button>
               <el-button
@@ -492,20 +493,20 @@ onMounted(loadCategories)
 }
 
 .playlist-list {
-  margin: 0;
   padding: 0;
+  margin: 0;
   list-style: none;
 }
 
 .playlist-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;
-  padding: 8px 12px 8px 16px;
-  cursor: pointer;
-  color: var(--el-text-color-regular);
-  border-left: 3px solid transparent;
 }
 
 .playlist-list__item:hover {
@@ -513,10 +514,10 @@ onMounted(loadCategories)
 }
 
 .playlist-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);
-  color: var(--el-color-primary);
-  font-weight: 600;
 }
 
 .playlist-list__main {
@@ -537,10 +538,10 @@ onMounted(loadCategories)
   padding: 0 6px;
   font-size: 12px;
   line-height: 18px;
-  text-align: center;
-  border-radius: 9px;
-  background: var(--el-fill-color);
   color: var(--el-text-color-secondary);
+  text-align: center;
+  background: var(--el-fill-color);
+  border-radius: 9px;
 }
 
 .playlist-list__actions {
@@ -554,8 +555,8 @@ onMounted(loadCategories)
 
 .playlist-list__empty {
   padding: 16px;
-  color: var(--el-text-color-secondary);
   line-height: 1.6;
+  color: var(--el-text-color-secondary);
 }
 
 .playlist-layout__main {
diff --git a/src/views/contentManagement/upload/RenditionPlayerDialog.vue b/src/views/contentManagement/upload/RenditionPlayerDialog.vue
index bdacf32..bbfaeaf 100644
--- a/src/views/contentManagement/upload/RenditionPlayerDialog.vue
+++ b/src/views/contentManagement/upload/RenditionPlayerDialog.vue
@@ -90,7 +90,7 @@ onBeforeUnmount(destroy)
     @closed="destroy"
   >
     <div class="rendition-player">
-      <video ref="videoRef" class="rendition-player__video" controls playsinline />
+      <video ref="videoRef" class="rendition-player__video" controls playsinline></video>
       <p v-if="errorMsg" class="rendition-player__error">{{ errorMsg }}</p>
       <p class="rendition-player__url" :title="url">{{ url }}</p>
     </div>
@@ -113,14 +113,14 @@ onBeforeUnmount(destroy)
 
 .rendition-player__error {
   margin: 0;
-  color: var(--el-color-danger);
   font-size: 13px;
+  color: var(--el-color-danger);
 }
 
 .rendition-player__url {
   margin: 0;
-  color: var(--el-text-color-secondary);
   font-size: 12px;
+  color: var(--el-text-color-secondary);
   word-break: break-all;
 }
 </style>

From aa892fe7a8f63fc9c6430c00aa0aa261e5504acd Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Fri, 23 Oct 2026 12:55:56 +0800
Subject: [PATCH 59/59] =?UTF-8?q?fix(router):=20=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E8=BD=AC=E7=A0=81=E8=AE=BE=E7=BD=AE=E8=8F=9C=E5=8D=95=E9=87=8D?=
 =?UTF-8?q?=E5=A4=8D=E6=B3=A8=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/localRoutes.ts | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/router/localRoutes.ts b/src/router/localRoutes.ts
index 0d5762f..bfbda35 100644
--- a/src/router/localRoutes.ts
+++ b/src/router/localRoutes.ts
@@ -10,16 +10,15 @@ const TRANSCODE_ROUTE_PATH = 'media-transcode'
 const TRANSCODE_COMPONENT = 'views/systemManagement/TranscodeSettingsView'
 const TRANSCODE_TITLE_KEY = 'router.transcodeSettings'
 
-const findRouteByName = (
-  routes: AppCustomRouteRecordRaw[],
-  name: string
-): AppCustomRouteRecordRaw | undefined => {
+/** 服务端菜单可能用别的路由名指向同一个组件，这里按路由名或组件路径判定是否已存在 */
+const hasTranscodeRoute = (routes: AppCustomRouteRecordRaw[]): boolean => {
   for (const route of routes) {
-    if (route.name === name) return route
-    const child = findRouteByName(route.children || [], name)
-    if (child) return child
+    if (route.name === TRANSCODE_ROUTE_NAME || route.component === TRANSCODE_COMPONENT) {
+      return true
+    }
+    if (hasTranscodeRoute(route.children || [])) return true
   }
-  return undefined
+  return false
 }
 
 /**
@@ -32,12 +31,11 @@ export const supplementLocalAdminRoutes = (
   if (!permissions.includes(TRANSCODE_PERMISSION)) {
     return routes
   }
-  const nextRoutes = cloneDeep(routes)
-  const existing = findRouteByName(nextRoutes, TRANSCODE_ROUTE_NAME)
-  if (existing) {
-    existing.meta = { ...existing.meta, title: TRANSCODE_TITLE_KEY }
-    return nextRoutes
+  // 服务端菜单里已经有转码设置时不再补，否则侧边栏会出现两条
+  if (hasTranscodeRoute(routes)) {
+    return routes
   }
+  const nextRoutes = cloneDeep(routes)
   const contentRoute = nextRoutes.find(
     (route) => route.path === CONTENT_ROUTE_PATH || route.name === CONTENT_ROUTE_NAME
   )