feat: phase1 UI prep — 后台 App 用户列表支持系统筛选 + 国家中文名 + 标签语义优化

新增: 系统下拉 (ANDROID/IOS)、国家中文名映射、用户列昵称/UID 冒号标签
详情抽屉: 同步系统/国家/标签展示

.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

.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

.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

.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

.eslintrc.js

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 // @ts-check
 const { defineConfig } = require('eslint-define-config')
 module.exports = defineConfig({

.gitignore

@@ -7,3 +7,9 @@ dist-ssr
 *-lock.*
 pnpm-debug
 stats.html
+*.apk
+
+# 本机运行时产物（start-dev.bat / vite 日志）
+start-dev.bat
+dev.out.log
+dev.err.log

.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"

.husky/lintstagedrc.js

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 module.exports = {
   '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
   '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],

commitlint.config.js

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 module.exports = {
   extends: ['@commitlint/config-conventional'],
   rules: {

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`。

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`。

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`

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`。

docs/plans/PROGRESS.md

@@ -0,0 +1,189 @@
+## 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 分包警告，本次未改构建配置。
+
+## 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 文案未改变。
+
+## 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 为项目既有警告。
+
+## 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 为项目既有警告。

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: #f8f1ea;
+          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">

mock/_createProductionServer.ts

@@ -1,18 +0,0 @@
-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)
-}

mock/role/index.mock.ts

@@ -1,129 +0,0 @@
-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[]

mock/user/index.mock.ts

@@ -1,90 +0,0 @@
-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
-      }
-    }
-  }
-]

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",
@@ -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",
@@ -40,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",
@@ -103,7 +102,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",

postcss.config.js

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 module.exports = {
   plugins: {
     autoprefixer: {}

prettier.config.js

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 module.exports = {
   printWidth: 100,
   tabWidth: 2,

src/App.vue

@@ -1,3 +1,5 @@
+<!-- Author: fruit.com.cn -->
+
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAppStore } from '@/store/modules/app'
@@ -20,6 +22,7 @@ appStore.initTheme()
 <template>
   <ConfigGlobal :size="currentSize">
     <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
+    <footer class="app-copyright">© FruitShorts</footer>
   </ConfigGlobal>
 </template>
 
@@ -46,4 +49,15 @@ body {
 .@{prefix-cls}-grey-mode {
   filter: grayscale(100%);
 }
+
+.app-copyright {
+  position: fixed;
+  right: 20px;
+  bottom: 10px;
+  z-index: 5;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--el-text-color-secondary, #909399);
+  pointer-events: none;
+}
 </style>

src/api/admin/appUser.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import request from '@/axios'
 import type { AppUserBanRecord, AppUserItem, PageResult, WatchHistoryItem } from './types'
 
@@ -9,6 +11,24 @@ export interface AppUserPageParams {
   status?: string
   countryCode?: string
   registerSource?: string
+  /** 客户端平台：ANDROID / IOS / WEB */
+  platform?: string
+}
+
+export interface WatchHistoryPageParams {
+  pageIndex?: number
+  pageSize?: number
+  keyword?: string
+  userId?: number
+  dramaTitle?: string
+  dramaId?: number
+  episodeId?: number
+  /** 客户端平台：ANDROID / IOS / WEB */
+  platform?: string
+  source?: string
+  finished?: boolean
+  startTime?: string
+  endTime?: string
 }
 
 export const pageAppUsersApi = (params: AppUserPageParams) => {
@@ -30,6 +50,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>({

src/api/admin/appVersion.ts

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

src/api/admin/banner.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import request from '@/axios'
 import type { BannerItem, BannerSaveData, PageResult } from './types'
 

src/api/admin/commerce.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import request from '@/axios'
 import type { PageResult } from './types'
 

src/api/admin/config.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import request from '@/axios'
 import type { ConfigItem } from './types'
 

src/api/admin/contentTag.ts

@@ -0,0 +1,41 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+
+export interface ContentTagItem {
+  id: number
+  name: string
+  nameEn: string
+  nameId: string
+  locales?: Record<string, string>
+  bgColor?: string
+  sort: number
+  status: number
+}
+
+export interface ContentTagSaveData {
+  name: string
+  locales: Record<string, string>
+  bgColor?: string
+  sort?: number
+  status?: number
+}
+
+export const listContentTagsApi = (enabledOnly = false) => {
+  return request.get<ContentTagItem[]>({
+    url: '/admin/content-tags',
+    params: enabledOnly ? { enabledOnly: true } : undefined
+  })
+}
+
+export const createContentTagApi = (data: ContentTagSaveData) => {
+  return request.post<number>({ url: '/admin/content-tags', data })
+}
+
+export const updateContentTagApi = (id: number, data: ContentTagSaveData) => {
+  return request.put<void>({ url: `/admin/content-tags/${id}`, data })
+}
+
+export const deleteContentTagApi = (id: number) => {
+  return request.delete<void>({ url: `/admin/content-tags/${id}` })
+}

src/api/admin/creator.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import request from '@/axios'
 import type { PageResult } from './types'
 
@@ -62,6 +64,36 @@ export const auditCreatorApi = (id: number, data: Record<string, unknown>) => {
   return request.put<CreatorItem>({ url: `/admin/creators/${id}/audit`, data })
 }
 
+/** 手工录入创作者主体（C 端申请入驻未实现前的入口） */
+export const createCreatorApi = (data: Record<string, unknown>) => {
+  return request.post<number>({ url: '/admin/creators', data })
+}
+
+export interface CreatorAccountResult {
+  creatorId: number
+  adminUserId: number
+  username: string
+  /** 一次性明文密码：只在开通 / 重置的这次响应里出现，之后拿不回来 */
+  password: string | null
+  created: boolean
+  message: string
+}
+
+/** 开通创作者账号（仅审核通过可开；已开通则幂等返回） */
+export const openCreatorAccountApi = (id: number, username?: string) => {
+  return request.post<CreatorAccountResult>({
+    url: `/admin/creators/${id}/account`,
+    data: { username }
+  })
+}
+
+/** 重置创作者账号密码（一次性明文返回） */
+export const resetCreatorPasswordApi = (id: number) => {
+  return request.post<CreatorAccountResult>({
+    url: `/admin/creators/${id}/account/reset-password`
+  })
+}
+
 export const pageSubmissionsApi = (params: Record<string, unknown>) => {
   return request.get<PageResult<SubmissionItem>>({ url: '/admin/submissions/page', params })
 }

src/api/admin/creatorCenter.ts

@@ -0,0 +1,248 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type { PageResult } from './types'
+
+/** 创作者主体：登录账号绑定的创作者信息 */
+export interface CreatorProfile {
+  id: number
+  code: string
+  name: string
+  /** INDIVIDUAL / COMPANY */
+  type: string
+  /** pending / approved / rejected / frozen */
+  status: string
+  statusText: string
+  auditNote: string
+  auditAt?: string
+  contactName: string
+  contactEmail: string
+  countryCode: string
+  dramaTotal: number
+}
+
+/** 代看目标下拉项（后端只给 id / 名称 / 状态） */
+export interface CreatorCenterTarget {
+  id: number
+  code: string
+  name: string
+  status: string
+  statusText: string
+}
+
+/** 我的作品 + 最近一次提交的审核进度 */
+export interface CreatorDrama {
+  id: number
+  code: string
+  title: string
+  subtitle?: string
+  genre?: string
+  description?: string
+  cover: string
+  trailerUrl?: string
+  language?: string
+  status: string
+  statusText: string
+  episodes: number
+  views: number
+  updatedAt?: string
+  submissionId?: number | null
+  submissionType?: string | null
+  submissionStatus?: string | null
+  submissionStatusText?: string | null
+  reviewNote?: string | null
+  rejectCode?: string | null
+  submitAt?: string | null
+  reviewAt?: string | null
+}
+
+export interface CreatorNotice {
+  id: number
+  /** CREATOR（入驻审核）/ SUBMISSION（内容提交审核） */
+  bizType: string
+  title: string
+  content: string
+  result: string
+  time?: string
+}
+
+export interface CreatorSubmission {
+  id: number
+  creatorId: number
+  dramaId: number
+  /** CREATE / UPDATE / PUBLISH / OFFLINE */
+  type: string
+  /** DRAFT / SUBMITTED / REVIEWING / APPROVED / REJECTED / WITHDRAWN */
+  status: string
+  version: number
+  submitAt?: string
+  reviewAt?: string
+  reviewNote: string
+  rejectCode: string
+}
+
+export interface CreatorEpisode {
+  id: number
+  dramaId: number
+  number: number
+  title: string
+  duration: string
+  durationSec: number
+  cover: string
+  videoUrl: string
+  isFree: boolean
+  unlockCoin: number
+  status: string
+  statusText: string
+  views: number
+  sort: number
+}
+
+export interface CreatorDramaEditData {
+  title: string
+  subtitle?: string
+  categoryId?: number
+  genre?: string
+  description?: string
+  cover?: string
+  trailerUrl?: string
+  language?: string
+}
+
+export interface PriceEpisodeConfig {
+  episodeId: number
+  number: number
+  title: string
+  free: boolean
+  unlockCoin: number
+  previewSeconds: number
+}
+
+export interface PriceConfig {
+  dramaId: number
+  freeEpisodes: number
+  unlockCoin: number
+  episodeCount: number
+  changedCount: number
+  episodes: PriceEpisodeConfig[]
+}
+
+export interface CreatorDashboard {
+  generatedAt: string
+  drama: Record<string, number>
+  playback: Record<string, number>
+  interaction: Record<string, number>
+  /** paidOrderAmount 取不到时为 null */
+  revenue: Record<string, number | null>
+  /** 按天趋势：creator_stat_daily 无产出，恒为 null */
+  daily: null
+  notes: string[]
+}
+
+export const getCreatorProfileApi = () => {
+  return request.get<CreatorProfile>({ url: '/admin/creator-center/profile' })
+}
+
+/**
+ * 静默探测当前账号的创作者身份：不弹全局提示，直接把 Result 交给调用方判断。
+ * 用于「已绑定 / 可代看但没选目标 / 未绑定」三态分流，渲染引导页。
+ */
+export const probeCreatorAccessApi = () => {
+  return request.get<CreatorProfile>({ url: '/admin/creator-center/profile', silent: true })
+}
+
+/** 代看目标下拉的数据源（仅 impersonate 权限可调） */
+export const listImpersonationTargetsApi = () => {
+  return request.get<CreatorCenterTarget[]>({ url: '/admin/creator-center/impersonation/targets' })
+}
+
+export const pageMyDramasApi = (params: Record<string, unknown>) => {
+  return request.get<PageResult<CreatorDrama>>({ url: '/admin/creator-center/dramas/page', params })
+}
+
+export const getMyDramaApi = (id: number) => {
+  return request.get<CreatorDrama>({ url: `/admin/creator-center/dramas/${id}` })
+}
+
+export const listCreatorNoticesApi = () => {
+  return request.get<CreatorNotice[]>({ url: '/admin/creator-center/notices' })
+}
+
+export const getCreatorDashboardApi = () => {
+  return request.get<CreatorDashboard>({ url: '/admin/creator-center/dashboard' })
+}
+
+export const createDramaApi = (data: CreatorDramaEditData) => {
+  return request.post<number>({ url: '/admin/creator-center/dramas', data })
+}
+
+export const updateDramaApi = (id: number, data: CreatorDramaEditData) => {
+  return request.put<void>({ url: `/admin/creator-center/dramas/${id}`, data })
+}
+
+export const listEpisodesApi = (dramaId: number) => {
+  return request.get<CreatorEpisode[]>({ url: `/admin/creator-center/dramas/${dramaId}/episodes` })
+}
+
+export const addEpisodeApi = (dramaId: number, data: Record<string, unknown>) => {
+  return request.post<number>({ url: `/admin/creator-center/dramas/${dramaId}/episodes`, data })
+}
+
+export const updateEpisodeApi = (
+  dramaId: number,
+  episodeId: number,
+  data: Record<string, unknown>
+) => {
+  return request.put<void>({
+    url: `/admin/creator-center/dramas/${dramaId}/episodes/${episodeId}`,
+    data
+  })
+}
+
+export const deleteEpisodeApi = (dramaId: number, episodeId: number) => {
+  return request.delete<void>({
+    url: `/admin/creator-center/dramas/${dramaId}/episodes/${episodeId}`
+  })
+}
+
+export const sortEpisodesApi = (dramaId: number, ids: number[]) => {
+  return request.put<void>({
+    url: `/admin/creator-center/dramas/${dramaId}/episodes/sort`,
+    data: { ids }
+  })
+}
+
+/** 把上传好的媒资挂到分集（产物必须是本人上传的） */
+export const attachAssetApi = (dramaId: number, episodeId: number, assetId: number) => {
+  return request.post<void>({
+    url: `/admin/creator-center/dramas/${dramaId}/episodes/${episodeId}/attach`,
+    data: { assetId }
+  })
+}
+
+export const getPricesApi = (dramaId: number) => {
+  return request.get<PriceConfig>({ url: `/admin/creator-center/dramas/${dramaId}/prices` })
+}
+
+export const savePricesApi = (dramaId: number, data: Record<string, unknown>) => {
+  return request.put<PriceConfig>({ url: `/admin/creator-center/dramas/${dramaId}/prices`, data })
+}
+
+export const submitDramaApi = (dramaId: number, type: string) => {
+  return request.post<CreatorSubmission>({
+    url: `/admin/creator-center/dramas/${dramaId}/submit`,
+    data: { type }
+  })
+}
+
+export const withdrawSubmissionApi = (submissionId: number) => {
+  return request.post<CreatorSubmission>({
+    url: `/admin/creator-center/submissions/${submissionId}/withdraw`
+  })
+}
+
+export const listSubmissionsApi = (dramaId: number) => {
+  return request.get<CreatorSubmission[]>({
+    url: `/admin/creator-center/dramas/${dramaId}/submissions`
+  })
+}

src/api/admin/dashboard.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import request from '@/axios'
 
 /** 指标口径见后端 DashboardService 注释与 docs/api-phase1.md「2.8 数据看板」 */
@@ -25,6 +27,28 @@ export interface TranscodeBoard {
   notes: string[]
 }
 
+/** 近 7 天每日趋势（给折线图用）。 */
+export interface DashboardTrend {
+  dates: string[]
+  newUsers: number[]
+  playEvents: number[]
+  newTranscodes: number[]
+  transcodeSuccess: number[]
+}
+
+/** 分布项（给饼图用）。 */
+export interface DistributionItem {
+  label: string
+  value: number
+}
+
+export interface DashboardDistribution {
+  dramaStatus: Record<string, number>
+  transcodeStatus: Record<string, number>
+  episodeMedia: Record<string, number>
+  pendingModeration: DistributionItem[]
+}
+
 export const getDashboardOverviewApi = () => {
   return request.get<DashboardOverview>({ url: '/admin/dashboard/overview' })
 }
@@ -32,3 +56,11 @@ export const getDashboardOverviewApi = () => {
 export const getTranscodeBoardApi = () => {
   return request.get<TranscodeBoard>({ url: '/admin/dashboard/transcode' })
 }
+
+export const getDashboardTrendApi = () => {
+  return request.get<DashboardTrend>({ url: '/admin/dashboard/trend' })
+}
+
+export const getDashboardDistributionApi = () => {
+  return request.get<DashboardDistribution>({ url: '/admin/dashboard/distribution' })
+}

src/api/admin/drama.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import request from '@/axios'
 import type {
   DramaCategory,
@@ -13,7 +15,9 @@ export interface DramaPageParams {
   keyword?: string
   status?: string
   categoryId?: number
+  categoryIds?: number[]
   isHot?: boolean
+  dramaTypes?: Array<'ANIME' | 'LIVE'>
 }
 
 export const pageDramasApi = (params: DramaPageParams) => {
@@ -48,6 +52,7 @@ export const listDramaCategoryOptionsApi = () => {
 
 export interface DramaCategorySaveData {
   name: string
+  locales: Record<string, string>
   sort?: number
   status?: number
 }

src/api/admin/dramaClassification.ts

@@ -0,0 +1,89 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type { PageResult } from './types'
+
+export interface DramaClassificationItem {
+  id: number
+  name: string
+  nameEn: string
+  nameId: string
+  locales?: Record<string, string>
+  sort: number
+  status: number
+  dramaCount: number
+  updatedAt?: string
+}
+
+export interface DramaClassificationSaveData {
+  name: string
+  locales: Record<string, 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}`
+  })
+}

src/api/admin/dramaPlaylistCategory.ts

@@ -0,0 +1,87 @@
+// 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
+  nameEn: string
+  nameId: string
+  description: string
+  descriptionEn: string
+  descriptionId: string
+  locales?: Record<string, string>
+  descriptionLocales?: Record<string, string>
+  sort: number
+  status: number
+  dramaCount: number
+}
+
+export interface DramaPlaylistCategorySaveData {
+  name: string
+  locales: Record<string, string>
+  descriptionLocales?: Record<string, 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}`
+  })
+}

src/api/admin/engagement.ts

@@ -0,0 +1,54 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type { PageResult } from './types'
+
+/** 收藏与点赞只读分页筛选条件。 */
+export interface EngagementPageParams {
+  pageIndex?: number
+  pageSize?: number
+  keyword?: string
+  userId?: string | number
+  deviceId?: string
+  /** 客户端平台：ANDROID / IOS / WEB */
+  platform?: string
+  dramaId?: string | number
+  dramaTitle?: string
+  targetType?: string
+  targetId?: string | number
+  episodeId?: string | number
+  startTime?: string
+  endTime?: string
+}
+
+/** 后台互动列表行。 */
+export interface EngagementItem {
+  id: string
+  userId: string | null
+  uid: string | null
+  nickname: string | null
+  deviceId: string | null
+  /** 客户端平台 ANDROID / IOS / WEB；老客户端未上报时为空。 */
+  platform: string | null
+  anonymous: boolean
+  dramaId: string | null
+  dramaTitle: string | null
+  dramaCover: string | null
+  dramaStatus: string | null
+  dramaPublished: boolean | null
+  targetType: string
+  targetId: string
+  episodeId: string | null
+  episodeNo: number | null
+  episodeTitle: string | null
+  commentSummary: string | null
+  createdAt: string
+}
+
+/** 查询收藏分页。 */
+export const pageFavoritesApi = (params: EngagementPageParams) =>
+  request.get<PageResult<EngagementItem>>({ url: '/admin/favorites/page', params })
+
+/** 查询点赞分页。 */
+export const pageLikesApi = (params: EngagementPageParams) =>
+  request.get<PageResult<EngagementItem>>({ url: '/admin/likes/page', params })

src/api/admin/episode.ts

@@ -1,8 +1,35 @@
-import request from '@/axios'
+// Author: fruit.com.cn
-import type { EpisodeItem, EpisodeSaveData } from './types'
 
-export const listEpisodesApi = (dramaId: number, status?: string) => {
+import request from '@/axios'
-  return request.get<EpisodeItem[]>({ url: '/admin/episodes', params: { dramaId, status } })
+import type { EpisodeItem, EpisodeSaveData, PageResult } from './types'
+
+export interface EpisodePageParams {
+  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 })
 }
 
 export const createEpisodeApi = (data: EpisodeSaveData) => {

src/api/admin/governance.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import request from '@/axios'
 import type { PageResult, CommentItem, ReportItem, SensitiveWordItem } from './types'
 

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 })
+}

src/api/admin/log.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import request from '@/axios'
 import type { OperationLogItem, PageResult } from './types'
 

src/api/admin/media.ts

@@ -1,5 +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
@@ -36,6 +38,43 @@ export const completeUploadApi = (uploadId: string, durationSec?: number) => {
   })
 }
 
+export interface UploadProgress {
+  uploadId: string
+  fileName: string
+  bizType: string
+  fileSize: number
+  chunkSize: number
+  totalChunks: number
+  receivedChunks: number
+  percent: number
+  /** uploading / completed */
+  status: string
+  assetId: number
+  url: string
+}
+
+/** 断点续传回显：传到第几片、还剩多少（服务端说了算，客户端不自己记账） */
+export const getUploadProgressApi = (uploadId: string) => {
+  return request.get<UploadProgress>({ url: `/admin/media/upload/${uploadId}` })
+}
+
 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
+  })
+}

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}` })
+}

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}` })
+}

src/api/admin/role.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import request from '@/axios'
 import type {
   MenuNode,

src/api/admin/transcode.ts

@@ -0,0 +1,43 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type {
+  EpisodeTranscodeItem,
+  MediaThumbnailResult,
+  TranscodeBackfillResult,
+  TranscodeTriggerResult
+} from './types'
+
+/** 分集编辑页聚合查询转码任务、清晰度与帧图。 */
+export const getEpisodeTranscodeApi = (episodeId: number | string) => {
+  return request.get<EpisodeTranscodeItem>({
+    url: `/admin/episodes/${episodeId}/transcode`
+  })
+}
+
+/** 按媒体分页读取帧图；页面切换时复用该接口。 */
+export const getMediaThumbnailsApi = (
+  mediaAssetId: string,
+  pageIndex: number,
+  pageSize: number
+) => {
+  return request.get<MediaThumbnailResult>({
+    url: `/admin/media/${mediaAssetId}/thumbnails`,
+    params: { pageIndex, pageSize }
+  })
+}
+
+/** 手动触发或重转当前分集绑定的媒体。 */
+export const triggerMediaTranscodeApi = (mediaAssetId: string) => {
+  return request.post<TranscodeTriggerResult>({
+    url: `/admin/media/${mediaAssetId}/transcode`
+  })
+}
+
+/** 手动补齐转码：扫描缺码率产物/帧图的分集并入队。 */
+export const runTranscodeBackfillApi = (batchSize?: number) => {
+  return request.post<TranscodeBackfillResult>({
+    url: '/admin/media/transcode/backfill',
+    params: batchSize ? { batchSize } : undefined
+  })
+}

src/api/admin/transcodeNotice.ts

@@ -0,0 +1,27 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+
+export interface TranscodeNoticeItem {
+  id: number
+  status: string
+  dramaTitle: string
+  episodeNo?: number
+  episodeTitle?: string
+  progress?: number
+  errorMsg?: string
+  updatedAt?: string
+}
+
+export interface TranscodeNotice {
+  running: number
+  success: number
+  failed: number
+  runningList: TranscodeNoticeItem[]
+  successList: TranscodeNoticeItem[]
+  failedList: TranscodeNoticeItem[]
+}
+
+export const getTranscodeNoticesApi = () => {
+  return request.get<TranscodeNotice>({ url: '/admin/notifications/transcode' })
+}

src/api/admin/types.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 export interface PageResult<T> {
   total: number
   list: T[]
@@ -6,6 +8,9 @@ export interface PageResult<T> {
 export interface DramaCategory {
   id: number
   name: string
+  nameEn?: string
+  nameId?: string
+  locales?: Record<string, string>
   sort?: number
   status?: number
   /** 该类型下的短剧数量，管理列表才有 */
@@ -18,11 +23,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
@@ -31,6 +40,9 @@ export interface DramaItem {
   status: string
   statusText: string
   views?: number
+  favoriteCount?: number
+  likeCount?: number
+  commentCount?: number
   sort?: number
   publishAt?: string
   createdAt?: string
@@ -41,12 +53,18 @@ 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
+  likeCount?: number
+  heat?: number
   isHot?: boolean
   sort?: number
 }
@@ -67,6 +85,10 @@ export interface EpisodeItem {
   status: string
   statusText: string
   views?: number
+  likeCount?: number
+  commentCount?: number
+  favoriteCount?: number
+  heat?: number
   sort?: number
 }
 
@@ -79,6 +101,7 @@ export interface EpisodeSaveData {
   videoUrl?: string
   isFree?: boolean
   unlockCoin?: number
+  likeCount?: number
   status?: string
   sort?: number
 }
@@ -202,6 +225,115 @@ 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 MediaRenditionItem {
+  id: string
+  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?: string | null
+  episodeId?: string | 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: string
+  mediaAssetId?: string | null
+  taskId?: string | null
+  status: string
+  progress?: number
+  retryCount?: number
+  errorMsg?: string
+  updatedAt?: string
+  renditions: MediaRenditionItem[]
+  thumbnails?: MediaThumbnailResult | null
+}
+
+export interface TranscodeTriggerResult {
+  taskId: string
+  status: string
+}
+
+export interface TranscodeBackfillItem {
+  episodeId: string
+  taskId: string
+}
+
+export interface TranscodeBackfillResult {
+  triggered: number
+  items: TranscodeBackfillItem[]
+}
+
 export interface BannerItem {
   id: number
   imageUrl: string
@@ -267,6 +399,10 @@ export interface AppUserItem {
   maskedTarget: string
   createdAt?: string
   lastLoginAt?: string
+  /** ANDROID / IOS / WEB */
+  platform?: string
+  /** 系统版本，例如 Android 16 */
+  osVersion?: string
   /** 预留：会员等级与到期（第二阶段） */
   vipLevel?: number
   vipExpireAt?: string
@@ -292,16 +428,22 @@ 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
   source: string
   deviceId: string
+  platform?: string
+  osVersion?: string
   watchedAt?: string
 }
 
@@ -309,7 +451,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
@@ -328,9 +473,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 */

src/api/admin/user.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import request from '@/axios'
 import type { AdminUserItem, AdminUserSaveData, PageResult } from './types'
 

src/api/login/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import request from '@/axios'
 import type { UserType } from './types'
 
@@ -24,6 +26,7 @@ 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 })
 }

src/api/login/types.ts

@@ -1,6 +1,7 @@
+// Author: fruit.com.cn
+
 export type UserLoginType = {
   username: string
-  password: string
 }
 
 export type UserType = {

src/axios/config.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import { AxiosResponse, InternalAxiosRequestConfig } from './types'
 import { ElMessage } from 'element-plus'
 import qs from 'qs'
@@ -41,6 +43,10 @@ const defaultResponseInterceptors = (response: AxiosResponse) => {
   } else if (response.data.code === SUCCESS_CODE) {
     return response.data
   } else {
+    // 静默请求：调用方要自己看业务码（例如创作者中心据此渲染引导页），不弹全局提示
+    if ((response.config as { silent?: boolean })?.silent) {
+      return response.data
+    }
     ElMessage.error(response?.data?.message)
     if (response?.data?.code === 401) {
       const userStore = useUserStoreWithOut()

src/axios/index.ts

@@ -1,23 +1,32 @@
+// Author: fruit.com.cn
+
 import service from './service'
 import { CONTENT_TYPE } from '@/constants'
 import { useUserStoreWithOut } from '@/store/modules/user'
+import { creatorCenterHeaders } from '@/utils/creatorImpersonation'
 
 const request = (option: AxiosConfig) => {
-  const { url, method, params, data, headers, responseType } = option
+  const { url, method, params, data, headers, responseType, silent } = option
   const userStore = useUserStoreWithOut()
   // FormData 不能带 JSON 的 Content-Type，否则 axios 会把表单转成 JSON，浏览器也无法补上 boundary
   const isFormData = typeof FormData !== 'undefined' && data instanceof FormData
+  // 创作者中心的请求统一带上代看目标头（超管选了代看创作者时才有值；
+  // 后端只对具备 impersonate 权限的账号认这个头，创作者带了也不生效）
+  const impersonationHeaders =
+    typeof url === 'string' && url.startsWith('/admin/creator-center') ? creatorCenterHeaders() : {}
   return service.request({
     url: url,
     method,
     params,
     data,
     responseType: responseType,
+    silent,
     headers: {
       ...(isFormData ? {} : { 'Content-Type': CONTENT_TYPE }),
       [userStore.getTokenKey ?? 'Authorization']: userStore.getToken
         ? `Bearer ${userStore.getToken}`
         : '',
+      ...impersonationHeaders,
       ...headers
     }
   })

src/axios/service.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import axios, { AxiosError } from 'axios'
 import { defaultRequestInterceptors, defaultResponseInterceptors } from './config'
 

src/axios/types/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import type {
   InternalAxiosRequestConfig,
   AxiosResponse,
@@ -18,6 +20,8 @@ interface RequestInterceptors<T> {
 
 interface RequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
   interceptors?: RequestInterceptors<T>
+  /** 静默请求：业务码非 0 时由调用方处理，不弹全局提示（见 axios/config.ts） */
+  silent?: boolean
 }
 
 export {

src/components/AppIcon/index.ts

@@ -0,0 +1,5 @@
+// Author: fruit.com.cn
+
+import AppIcon from './src/AppIcon.vue'
+
+export { AppIcon }

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>

src/components/AppImage/index.ts

@@ -0,0 +1,5 @@
+// Author: fruit.com.cn
+
+import AppImage from './src/AppImage.vue'
+
+export { AppImage }

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>

src/components/Backtop/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import Backtop from './src/Backtop.vue'
 
 export { Backtop }

src/components/Backtop/src/Backtop.vue

@@ -1,3 +1,5 @@
+<!-- Author: fruit.com.cn -->
+
 <script setup lang="ts">
 import { ElBacktop } from 'element-plus'
 import { useDesign } from '@/hooks/web/useDesign'

src/components/Breadcrumb/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import Breadcrumb from './src/Breadcrumb.vue'
 
 export { Breadcrumb }

src/components/Breadcrumb/src/Breadcrumb.vue

@@ -1,3 +1,5 @@
+<!-- Author: fruit.com.cn -->
+
 <script lang="tsx">
 import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
 import { ref, watch, computed, unref, defineComponent, TransitionGroup } from 'vue'
@@ -7,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'
 
@@ -52,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)
@@ -115,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);
       }
     }
   }

src/components/Breadcrumb/src/helper.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import { pathResolve } from '@/utils/routerHelper'
 import type { RouteMeta } from 'vue-router'
 

src/components/Button/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import BaseButton from './src/Button.vue'
 
 export { BaseButton }

src/components/Button/src/Button.vue

@@ -1,3 +1,5 @@
+<!-- Author: fruit.com.cn -->
+
 <script setup lang="ts">
 import { useDesign } from '@/hooks/web/useDesign'
 import { ElButton, ComponentSize, ButtonType } from 'element-plus'

src/components/Collapse/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import Collapse from './src/Collapse.vue'
 
 export { Collapse }

src/components/Collapse/src/Collapse.vue

@@ -1,8 +1,11 @@
+<!-- Author: fruit.com.cn -->
+
 <script setup lang="ts">
 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()
 
@@ -24,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"
     />

src/components/ConfigGlobal/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import ConfigGlobal from './src/ConfigGlobal.vue'
 
 export type { ConfigGlobalTypes } from './src/types'

src/components/ConfigGlobal/src/ConfigGlobal.vue

@@ -1,3 +1,5 @@
+<!-- Author: fruit.com.cn -->
+
 <script setup lang="ts">
 import { provide, computed, watch, onMounted } from 'vue'
 import { propTypes } from '@/utils/propTypes'

src/components/ConfigGlobal/src/types/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import { ComponentSize } from 'element-plus'
 
 export interface ConfigGlobalTypes {

src/components/ContentDetailWrap/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import ContentDetailWrap from './src/ContentDetailWrap.vue'
 
 export { ContentDetailWrap }

src/components/ContentDetailWrap/src/ContentDetailWrap.vue

@@ -1,3 +1,5 @@
+<!-- Author: fruit.com.cn -->
+
 <script setup lang="ts">
 import { ElCard } from 'element-plus'
 import { propTypes } from '@/utils/propTypes'

src/components/ContentWrap/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import ContentWrap from './src/ContentWrap.vue'
 
 export { ContentWrap }

src/components/ContentWrap/src/ContentWrap.vue

@@ -1,7 +1,10 @@
+<!-- Author: fruit.com.cn -->
+
 <script setup lang="ts">
 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()
 
@@ -22,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>

src/components/ContextMenu/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import ContextMenu from './src/ContextMenu.vue'
 import { ElDropdown } from 'element-plus'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'

src/components/ContextMenu/src/ContextMenu.vue

@@ -1,3 +1,5 @@
+<!-- Author: fruit.com.cn -->
+
 <script setup lang="ts">
 import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
 import { PropType, ref } from 'vue'
@@ -64,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>

src/components/ContextMenu/src/types/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 export interface ContextMenuSchema {
   disabled?: boolean
   divided?: boolean

src/components/Descriptions/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import Descriptions from './src/Descriptions.vue'
 
 export type { DescriptionsSchema } from './src/types'

src/components/Descriptions/src/Descriptions.vue

@@ -1,3 +1,5 @@
+<!-- Author: fruit.com.cn -->
+
 <script lang="tsx">
 import { ElCollapseTransition, ElDescriptions, ElDescriptionsItem, ElTooltip } from 'element-plus'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -5,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()
 
@@ -92,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}
 

src/components/Descriptions/src/types/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 export interface DescriptionsSchema {
   span?: number // 占多少分
   field: string // 字段名

src/components/Dialog/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import Dialog from './src/Dialog.vue'
 
 export { Dialog }

src/components/Dialog/src/Dialog.vue

@@ -1,8 +1,11 @@
+<!-- Author: fruit.com.cn -->
+
 <script setup lang="ts">
 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()
 
@@ -75,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"

src/components/Editor/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import Editor from './src/Editor.vue'
 import { IDomEditor } from '@wangeditor/editor'
 

src/components/Editor/src/Editor.vue

@@ -1,3 +1,5 @@
+<!-- Author: fruit.com.cn -->
+
 <script setup lang="ts">
 import { onBeforeUnmount, computed, PropType, unref, nextTick, ref, watch, shallowRef } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

src/components/Error/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import Error from './src/Error.vue'
 
 export { Error }

src/components/Error/src/Error.vue

@@ -1,3 +1,5 @@
+<!-- Author: fruit.com.cn -->
+
 <script setup lang="ts">
 import pageError from '@/assets/svgs/404.svg'
 import networkError from '@/assets/svgs/500.svg'

src/components/Form/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import Form from './src/Form.vue'
 import type { FormSchema, FormSetProps } from './src/types'
 export type {

src/components/Form/src/Form.vue

@@ -1,3 +1,5 @@
+<!-- Author: fruit.com.cn -->
+
 <script lang="tsx">
 import { PropType, defineComponent, ref, computed, unref, watch, onMounted } from 'vue'
 import {

src/components/Form/src/helper/componentMap.ts

@@ -1,3 +1,6 @@
+// Author: fruit.com.cn
+
+import { defineAsyncComponent } from 'vue'
 import type { Component } from 'vue'
 import {
   ElCascader,
@@ -21,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,

src/components/Form/src/helper/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import { useI18n } from '@/hooks/web/useI18n'
 import { PlaceholderModel, FormSchema, ComponentNameEnum, ColProps } from '../types'
 import { isFunction } from '@/utils/is'

src/components/Form/src/types/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import {
   AutocompleteProps,
   InputNumberProps,
@@ -20,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 {

src/components/Icon/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import Icon from './src/Icon.vue'
 
 export type { IconTypes } from './src/types'

src/components/Icon/src/Icon.vue

@@ -1,9 +1,12 @@
+<!-- Author: fruit.com.cn -->
+
 <script setup lang="ts">
 import { computed, unref } from 'vue'
 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()
 
@@ -20,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)
 })
 
 // 是否使用在线图标
@@ -46,8 +50,8 @@ const getIconifyStyle = computed(() => {
     </svg>
 
     <template v-else>
-      <Icon v-if="isUseOnline" :icon="icon" :style="getIconifyStyle" />
+      <Icon v-if="isUseOnline" :icon="normalizedIcon" :style="getIconifyStyle" />
-      <div v-else :class="`${icon} iconify`" :style="getIconifyStyle"></div>
+      <div v-else :class="`${normalizedIcon} iconify`" :style="getIconifyStyle"></div>
     </template>
   </ElIcon>
 </template>

src/components/Icon/src/types/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 export interface IconTypes {
   size?: number
   color?: string

src/components/InputPassword/index.ts

@@ -1,3 +1,5 @@
+// Author: fruit.com.cn
+
 import InputPassword from './src/InputPassword.vue'
 
 export { InputPassword }