feat(prototype): 新增印尼市场短剧 App 静态原型

- public/indonesia/ 下独立静态原型，不影响后台构建
- 覆盖首页、发现、详情、播放、收藏、个人中心、金币解锁等核心流程

.gitea/workflows/ci.yml

@@ -0,0 +1,28 @@
+# Author: fruit.com.cn
+# ReelShortWeb 后台 CI：lint + 构建门禁
+name: web-ci
+
+on:
+  push:
+    branches: [develop, main]
+  pull_request:
+    branches: [develop, main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: pnpm
+      - name: 依赖
+        run: pnpm install --frozen-lockfile
+      - name: 类型检查
+        run: pnpm ts:check
+      - name: 构建
+        run: pnpm build:pro

docs/plans/2026-10-29-indonesia-app-prototype.md

@@ -0,0 +1,29 @@
+# 印尼市场短剧 App UI / UX 原型
+
+## 范围
+
+- 新增独立静态原型 `public/indonesia/`，不修改管理后台、Flutter 或接口契约。
+- 沿用现有 FruitShorts / DramaPulse 设计方向：深色、橙红主色、印尼语、三个主导航。
+- 覆盖首页、发现/搜索、详情/选集、播放交互、收藏/历史、个人中心、金币解锁。
+- 原型数据及钱包均仅保存在浏览器；不调用真实支付，不伪造支付成功。
+
+## 步骤
+
+1. 阅读项目规范、PRD、契约与设计基线，保留用户现有修改。
+2. 独立实现响应式界面、可访问交互与本地状态。
+3. 检查桌面/移动布局、搜索空态、收藏持久化与解锁幂等。
+4. 验证原后台构建，记录结果并提供可直接打开的入口。
+
+## 风险 / 待确认
+
+- 当前目录为管理后台，故交付独立设计原型，不将 C 端覆盖到后台。
+- 原型不代表已实现 Flutter App；虚构剧名、热度、价格只用于界面设计。
+- 生图工具没有返回可用图片，采用示意照片；正式剧集图需替换为已授权内容。
+- 播放器为分镜交互演示，不将静态图片伪装成已接入的剧集视频。
+- 金币不足仅展示充值方案与商店结算说明，不接外部钱包或真实扣款。
+- 原有 `TagManagementView.vue` 修改不属于本任务，保持原样。
+- INBOX 内旧任务不属于本次用户明确要求，不执行、不标记完成。
+
+## 验收
+
+- 待执行。

package.json

@@ -24,6 +24,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "2.3.2",
     "@iconify/iconify": "^3.1.1",
     "@iconify/vue": "^4.1.1",
     "@vueuse/core": "^10.7.2",

public/indonesia/assets/OFL-Outfit.txt

@@ -0,0 +1,93 @@
+Copyright 2021 The Outfit Project Authors (https://github.com/Outfitio/Outfit-Fonts)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/indonesia/assets/OFL-PlusJakartaSans.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Plus Jakarta Sans Project Authors (https://github.com/tokotype/PlusJakartaSans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/indonesia/assets/lucide.min.js

@@ -0,0 +1,12 @@
+/**
+ * @license lucide v0.468.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+(function(a,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(a=typeof globalThis<"u"?globalThis:a||self,n(a.lucide={}))})(this,function(a){"use strict";const n=(t,d,c=[])=>{const p=document.createElementNS("http://www.w3.org/2000/svg",t);return Object.keys(d).forEach(M=>{p.setAttribute(M,String(d[M]))}),c.length&&c.forEach(M=>{const v=n(...M);p.appendChild(v)}),p};var I0=([t,d,c])=>n(t,d,c);const Q$=t=>Array.from(t.attributes).reduce((d,c)=>(d[c.name]=c.value,d),{}),j$=t=>typeof t=="string"?t:!t||!t.class?"":t.class&&typeof t.class=="string"?t.class.split(" "):t.class&&Array.isArray(t.class)?t.class:"",Y$=t=>t.flatMap(j$).map(d=>d.trim()).filter(Boolean).filter((d,c,p)=>p.indexOf(d)===c).join(" "),_$=t=>t.replace(/(\w)(\w*)(_|-|\s*)/g,(d,c,p)=>c.toUpperCase()+p.toLowerCase()),E0=(t,{nameAttr:d,icons:c,attrs:p})=>{const M=t.getAttribute(d);if(M==null)return;const v=_$(M),X$=c[v];if(!X$)return console.warn(`${t.outerHTML} icon name was not found in the provided icons object.`);const N$=Q$(t),[hm,tm,dm]=X$,K$={...tm,"data-lucide":M,...p,...N$},J$=Y$(["lucide",`lucide-${M}`,N$,p]);J$&&Object.assign(K$,{class:J$});const cm=I0([hm,K$,dm]);return t.parentNode?.replaceChild(cm,t)},h={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},x0=["svg",h,[["path",{d:"M3.5 13h6"}],["path",{d:"m2 16 4.5-9 4.5 9"}],["path",{d:"M18 7v9"}],["path",{d:"m14 12 4 4 4-4"}]]],W0=["svg",h,[["path",{d:"M3.5 13h6"}],["path",{d:"m2 16 4.5-9 4.5 9"}],["path",{d:"M18 16V7"}],["path",{d:"m14 11 4-4 4 4"}]]],X0=["svg",h,[["path",{d:"M21 14h-5"}],["path",{d:"M16 16v-3.5a2.5 2.5 0 0 1 5 0V16"}],["path",{d:"M4.5 13h6"}],["path",{d:"m3 16 4.5-9 4.5 9"}]]],N0=["svg",h,[["circle",{cx:"16",cy:"4",r:"1"}],["path",{d:"m18 19 1-7-6 1"}],["path",{d:"m5 8 3-3 5.5 3-2.36 3.5"}],["path",{d:"M4.24 14.5a5 5 0 0 0 6.88 6"}],["path",{d:"M13.76 17.5a5 5 0 0 0-6.88-6"}]]],K0=["svg",h,[["path",{d:"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"}]]],J0=["svg",h,[["path",{d:"M6 12H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"}],["path",{d:"M6 8h12"}],["path",{d:"M18.3 17.7a2.5 2.5 0 0 1-3.16 3.83 2.53 2.53 0 0 1-1.14-2V12"}],["path",{d:"M6.6 15.6A2 2 0 1 0 10 17v-5"}]]],Q0=["svg",h,[["path",{d:"M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"}],["path",{d:"m12 15 5 6H7Z"}]]],o=["svg",h,[["circle",{cx:"12",cy:"13",r:"8"}],["path",{d:"M5 3 2 6"}],["path",{d:"m22 6-3-3"}],["path",{d:"M6.38 18.7 4 21"}],["path",{d:"M17.64 18.67 20 21"}],["path",{d:"m9 13 2 2 4-4"}]]],s=["svg",h,[["circle",{cx:"12",cy:"13",r:"8"}],["path",{d:"M5 3 2 6"}],["path",{d:"m22 6-3-3"}],["path",{d:"M6.38 18.7 4 21"}],["path",{d:"M17.64 18.67 20 21"}],["path",{d:"M9 13h6"}]]],j0=["svg",h,[["path",{d:"M6.87 6.87a8 8 0 1 0 11.26 11.26"}],["path",{d:"M19.9 14.25a8 8 0 0 0-9.15-9.15"}],["path",{d:"m22 6-3-3"}],["path",{d:"M6.26 18.67 4 21"}],["path",{d:"m2 2 20 20"}],["path",{d:"M4 4 2 6"}]]],r=["svg",h,[["circle",{cx:"12",cy:"13",r:"8"}],["path",{d:"M5 3 2 6"}],["path",{d:"m22 6-3-3"}],["path",{d:"M6.38 18.7 4 21"}],["path",{d:"M17.64 18.67 20 21"}],["path",{d:"M12 10v6"}],["path",{d:"M9 13h6"}]]],Y0=["svg",h,[["circle",{cx:"12",cy:"13",r:"8"}],["path",{d:"M12 9v4l2 2"}],["path",{d:"M5 3 2 6"}],["path",{d:"m22 6-3-3"}],["path",{d:"M6.38 18.7 4 21"}],["path",{d:"M17.64 18.67 20 21"}]]],_0=["svg",h,[["path",{d:"M11 21c0-2.5 2-2.5 2-5"}],["path",{d:"M16 21c0-2.5 2-2.5 2-5"}],["path",{d:"m19 8-.8 3a1.25 1.25 0 0 1-1.2 1H7a1.25 1.25 0 0 1-1.2-1L5 8"}],["path",{d:"M21 3a1 1 0 0 1 1 1v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a1 1 0 0 1 1-1z"}],["path",{d:"M6 21c0-2.5 2-2.5 2-5"}]]],aa=["svg",h,[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2"}],["polyline",{points:"11 3 11 11 14 8 17 11 17 3"}]]],ha=["svg",h,[["path",{d:"M2 12h20"}],["path",{d:"M10 16v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4"}],["path",{d:"M10 8V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v4"}],["path",{d:"M20 16v1a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-1"}],["path",{d:"M14 8V7c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v1"}]]],ta=["svg",h,[["path",{d:"M12 2v20"}],["path",{d:"M8 10H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h4"}],["path",{d:"M16 10h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-4"}],["path",{d:"M8 20H7a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2h1"}],["path",{d:"M16 14h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-1"}]]],da=["svg",h,[["path",{d:"M17 12H7"}],["path",{d:"M19 18H5"}],["path",{d:"M21 6H3"}]]],ca=["svg",h,[["rect",{width:"6",height:"16",x:"4",y:"2",rx:"2"}],["rect",{width:"6",height:"9",x:"14",y:"9",rx:"2"}],["path",{d:"M22 22H2"}]]],Ma=["svg",h,[["rect",{width:"16",height:"6",x:"2",y:"4",rx:"2"}],["rect",{width:"9",height:"6",x:"9",y:"14",rx:"2"}],["path",{d:"M22 22V2"}]]],pa=["svg",h,[["rect",{width:"6",height:"14",x:"4",y:"5",rx:"2"}],["rect",{width:"6",height:"10",x:"14",y:"7",Line truncated
+If you want to use all the icons you can import it like:
+ \`import { createIcons, icons } from 'lucide';
+lucide.createIcons({icons});\``);if(typeof document>"u")throw new Error("`createIcons()` only works in a browser environment.");const p=document.querySelectorAll(`[${d}]`);if(Array.from(p).forEach(M=>E0(M,{nameAttr:d,icons:t,attrs:c})),d==="data-lucide"){const M=document.querySelectorAll("[icon-name]");M.length>0&&(console.warn("[Lucide] Some icons were found with the now deprecated icon-name attribute. These will still be replaced for backwards compatibility, but will no longer be supported in v1.0 and you should switch to data-lucide"),Array.from(M).forEach(v=>E0(v,{nameAttr:"icon-name",icons:t,attrs:c})))}};a.AArrowDown=x0,a.AArrowUp=W0,a.ALargeSmall=X0,a.Accessibility=N0,a.Activity=K0,a.ActivitySquare=L2,a.AirVent=J0,a.Airplay=Q0,a.AlarmCheck=o,a.AlarmClock=Y0,a.AlarmClockCheck=o,a.AlarmClockMinus=s,a.AlarmClockOff=j0,a.AlarmClockPlus=r,a.AlarmMinus=s,a.AlarmPlus=r,a.AlarmSmoke=_0,a.Album=aa,a.AlertCircle=G,a.AlertOctagon=t2,a.AlertTriangle=P0,a.AlignCenter=da,a.AlignCenterHorizontal=ha,a.AlignCenterVertical=ta,a.AlignEndHorizontal=ca,a.AlignEndVertical=Ma,a.AlignHorizontalDistributeCenter=pa,a.AlignHorizontalDistributeEnd=ea,a.AlignHorizontalDistributeStart=na,a.AlignHorizontalJustifyCenter=ia,a.AlignHorizontalJustifyEnd=la,a.AlignHorizontalJustifyStart=va,a.AlignHorizontalSpaceAround=oa,a.AlignHorizontalSpaceBetween=sa,a.AlignJustify=ra,a.AlignLeft=ga,a.AlignRight=ya,a.AlignStartHorizontal=$a,a.AlignStartVertical=ma,a.AlignVerticalDistributeCenter=Ca,a.AlignVerticalDistributeEnd=ua,a.AlignVerticalDistributeStart=Ha,a.AlignVerticalJustifyCenter=wa,a.AlignVerticalJustifyEnd=Va,a.AlignVerticalJustifyStart=Aa,a.AlignVerticalSpaceAround=Sa,a.AlignVerticalSpaceBetween=La,a.Ambulance=fa,a.Ampersand=Pa,a.Ampersands=ka,a.Amphora=Ba,a.Anchor=Fa,a.Angry=Da,a.Annoyed=Ra,a.Antenna=za,a.Anvil=qa,a.Aperture=Ta,a.AppWindow=ba,a.AppWindowMac=Za,a.Apple=Ua,a.Archive=Ia,a.ArchiveRestore=Oa,a.ArchiveX=Ga,a.AreaChart=P,a.Armchair=Ea,a.ArrowBigDown=Wa,a.ArrowBigDownDash=xa,a.ArrowBigLeft=Na,a.ArrowBigLeftDash=Xa,a.ArrowBigRight=Ja,a.ArrowBigRightDash=Ka,a.ArrowBigUp=ja,a.ArrowBigUpDash=Qa,a.ArrowDown=eh,a.ArrowDown01=Ya,a.ArrowDown10=_a,a.ArrowDownAZ=g,a.ArrowDownAz=g,a.ArrowDownCircle=I,a.ArrowDownFromLine=ah,a.ArrowDownLeft=hh,a.ArrowDownLeftFromCircle=x,a.ArrowDownLeftFromSquare=F2,a.ArrowDownLeftSquare=f2,a.ArrowDownNarrowWide=th,a.ArrowDownRight=dh,a.ArrowDownRightFromCircle=W,a.ArrowDownRightFromSquare=D2,a.ArrowDownRightSquare=P2,a.ArrowDownSquare=k2,a.ArrowDownToDot=ch,a.ArrowDownToLine=Mh,a.ArrowDownUp=ph,a.ArrowDownWideNarrow=y,a.ArrowDownZA=$,a.ArrowDownZa=$,a.ArrowLeft=vh,a.ArrowLeftCircle=E,a.ArrowLeftFromLine=nh,a.ArrowLeftRight=ih,a.ArrowLeftSquare=B2,a.ArrowLeftToLine=lh,a.ArrowRight=gh,a.ArrowRightCircle=K,a.ArrowRightFromLine=oh,a.ArrowRightLeft=sh,a.ArrowRightSquare=q2,a.ArrowRightToLine=rh,a.ArrowUp=Sh,a.ArrowUp01=yh,a.ArrowUp10=$h,a.ArrowUpAZ=m,a.ArrowUpAz=m,a.ArrowUpCircle=J,a.ArrowUpDown=mh,a.ArrowUpFromDot=Ch,a.ArrowUpFromLine=uh,a.ArrowUpLeft=Hh,a.ArrowUpLeftFromCircle=X,a.ArrowUpLeftFromSquare=R2,a.ArrowUpLeftSquare=T2,a.ArrowUpNarrowWide=C,a.ArrowUpRight=wh,a.ArrowUpRightFromCircle=N,a.ArrowUpRightFromSquare=z2,a.ArrowUpRightSquare=Z2,a.ArrowUpSquare=b2,a.ArrowUpToLine=Vh,a.ArrowUpWideNarrow=Ah,a.ArrowUpZA=u,a.ArrowUpZa=u,a.ArrowsUpFromLine=Lh,a.Asterisk=fh,a.AsteriskSquare=U2,a.AtSign=Ph,a.Atom=kh,a.AudioLines=Bh,a.AudioWaveform=Fh,a.Award=Dh,a.Axe=Rh,a.Axis3D=H,a.Axis3d=H,a.Baby=zh,a.Backpack=qh,a.Badge=jh,a.BadgeAlert=Th,a.BadgeCent=Zh,a.BadgeCheck=w,a.BadgeDollarSign=bh,a.BadgeEuro=Uh,a.BadgeHelp=Oh,a.BadgeIndianRupee=Gh,a.BadgeInfo=Ih,a.BadgeJapaneseYen=Eh,a.BadgeMinus=xh,a.BadgePercent=Wh,a.BadgePlus=Xh,a.BadgePoundSterling=Nh,a.BadgeRussianRuble=Kh,a.BadgeSwissFranc=Jh,a.BadgeX=Qh,a.BaggageClaim=Yh,a.Ban=_h,a.Banana=at,a.Bandage=ht,a.Banknote=tt,a.BarChart=T,a.BarChart2=Z,a.BarChart3=z,a.BarChart4=R,a.BarChartBig=D,a.BarChartHorizontal=B,a.BarChartHorizontalBig=k,a.Barcode=dt,a.Baseline=ct,a.Bath=Mt,a.Battery=vt,a.BatteryCharging=pt,a.BatteryFull=et,a.BatteryLow=nt,a.BatteryMedium=it,a.BatteryWarning=lt,a.Beaker=ot,a.Bean=rt,a.BeanOff=st,a.Bed=$t,a.BedDouble=gt,a.BedSingle=yt,a.Beef=mt,a.Beer=ut,a.BeerOff=Ct,a.Bell=ft,a.BellDot=Ht,a.BellElectric=wt,a.BellMinus=Vt,a.BellOff=At,a.BellPlus=St,a.BellRing=Lt,a.BetweenHorizonalEnd=V,a.BetweenHorizonalStart=A,a.BetweenHorizontalEnd=V,a.BetweenHorizontalStart=A,a.BetweenVerticalEnd=Pt,a.BetweenVerticalStart=kt,a.BicepsFlexed=Bt,a.Bike=Ft,a.Binary=Dt,a.Binoculars=Rt,a.Biohazard=zt,a.Bird=qt,a.Bitcoin=Tt,a.Blend=Zt,a.Blinds=bt,a.Blocks=Ut,a.Bluetooth=Et,a.BluetoothConnected=Ot,a.BluetoothOff=Gt,a.BluetoothSearching=It,a.Bold=xt,a.Bolt=Wt,a.Bomb=Xt,a.Bone=Nt,a.Book=y4,a.BookA=Kt,a.BookAudio=Jt,a.BookCheck=Qt,a.BookCopy=jt,a.BookDashed=S,a.BookDown=Yt,a.BookHeadphones=_t,a.BookHeart=a4,a.BookImage=h4,a.BookKey=t4,a.BookLock=d4,a.BookMarked=c4,a.BookMinus=M4,a.BookOpen=n4,a.BookOpenCheck=p4,a.BookOpenText=e4,a.BookPlus=i4,a.BookTemplate=S,a.BookText=lLine truncated
+//# sourceMappingURL=lucide.min.js.map

public/indonesia/index.html

@@ -0,0 +1,72 @@
+<!-- Author: fruit.com.cn -->
+<!-- 印尼市场短剧客户端交互设计入口。 -->
+<!doctype html>
+<html lang="id">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="theme-color" content="#0b0c10" />
+    <meta name="description" content="FruitShorts — drama pendek, cerita yang dekat." />
+    <title>FruitShorts · Drama pendek pilihanmu</title>
+    <link rel="icon" href="../brand-mark.png" />
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="screens.css" />
+    <script defer src="assets/lucide.min.js"></script>
+    <script defer src="data.js"></script>
+    <script defer src="state.js"></script>
+    <script defer src="views.js"></script>
+    <script defer src="dialogs.js"></script>
+    <script defer src="app.js"></script>
+  </head>
+  <body>
+    <a class="skip-link" href="#main">Langsung ke konten</a>
+    <aside class="sidebar" aria-label="Navigasi utama">
+      <a class="brand" href="#home" aria-label="FruitShorts Beranda">
+        <span class="brand-mark"><i data-lucide="play" aria-hidden="true"></i></span>
+        <span>Fruit<span class="brand-accent">Shorts</span></span>
+      </a>
+      <span class="nav-caption">MENU UTAMA</span>
+      <nav class="main-nav">
+        <a href="#home" data-nav="home"><i data-lucide="house"></i><span>Beranda</span></a>
+        <a href="#discover" data-nav="discover"><i data-lucide="compass"></i><span>Jelajahi</span></a>
+        <a href="#me" data-nav="me"><i data-lucide="circle-user-round"></i><span>Saya</span></a>
+      </nav>
+      <div class="sidebar-divider"></div>
+      <span class="nav-caption">KOLEKSI SAYA</span>
+      <nav class="collection-nav">
+        <a href="#library"><i data-lucide="bookmark"></i>Daftar saya<span id="saved-count">0</span></a>
+        <a href="#history"><i data-lucide="history"></i>Riwayat tontonan</a>
+      </nav>
+      <div class="sidebar-bottom">
+        <div class="local-note"><i data-lucide="clapperboard"></i><span>Cerita singkat.<br /><strong>Rasa yang melekat.</strong></span></div>
+        <button class="help-link" data-action="help"><i data-lucide="circle-help"></i>Pusat bantuan<i data-lucide="arrow-up-right"></i></button>
+        <span class="copyright">© 2026 FruitShorts</span>
+      </div>
+    </aside>
+    <div class="app-shell">
+      <header class="topbar">
+        <a class="brand mobile-brand" href="#home"><span class="brand-mark"><i data-lucide="play"></i></span><span>Fruit<span class="brand-accent">Shorts</span></span></a>
+        <form class="search-form" role="search">
+          <i data-lucide="search" aria-hidden="true"></i>
+          <input id="global-search" type="search" placeholder="Cari drama, temukan cerita..." aria-label="Cari drama" autocomplete="off" />
+          <kbd aria-hidden="true">/</kbd>
+        </form>
+        <div class="topbar-actions">
+          <button class="language-button" data-action="language" title="Bahasa"><i data-lucide="globe-2"></i><span>ID</span><i data-lucide="chevron-down"></i></button>
+          <button class="wallet-button" data-action="wallet" title="Dompet koin"><i data-lucide="coins"></i><span data-balance>120</span><span class="wallet-add">+</span></button>
+          <button class="icon-button notification-button" data-action="notifications" aria-label="Notifikasi" title="Notifikasi"><i data-lucide="bell"></i><span></span></button>
+          <a class="avatar" href="#me" aria-label="Profil saya">N</a>
+        </div>
+      </header>
+      <main id="main"></main>
+      <footer class="page-footer"><a class="brand" href="#home">Fruit<span class="brand-accent">Shorts</span></a><span>Drama pendek. Momen besar.</span><button data-action="privacy">Privasi</button><button data-action="terms">Ketentuan</button><span>Indonesia · Bahasa Indonesia</span></footer>
+    </div>
+    <nav class="bottom-nav" aria-label="Navigasi seluler">
+      <a href="#home" data-nav="home"><i data-lucide="house"></i><span>Beranda</span></a>
+      <a href="#discover" data-nav="discover"><i data-lucide="compass"></i><span>Jelajahi</span></a>
+      <a href="#me" data-nav="me"><i data-lucide="circle-user-round"></i><span>Saya</span></a>
+    </nav>
+    <dialog id="app-dialog" aria-labelledby="dialog-title"></dialog>
+    <div id="toast" class="toast" role="status" aria-live="polite"></div>
+  </body>
+</html>

src/api/admin/types.ts

@@ -29,6 +29,8 @@ export interface DramaItem {
   genre?: string
   description?: string
   cover?: string
+  /** 横版封面，用于继续观看横幅等横向展示位 */
+  horizontalCover?: string
   language?: string
   dramaType?: 'ANIME' | 'LIVE'
   dramaTypes?: Array<'ANIME' | 'LIVE'>
@@ -57,6 +59,8 @@ export interface DramaSaveData {
   genre?: string
   description?: string
   cover?: string
+  /** 横版封面，用于继续观看横幅等横向展示位 */
+  horizontalCover?: string
   language?: string
   dramaType?: 'ANIME' | 'LIVE'
   dramaTypes?: Array<'ANIME' | 'LIVE'>

src/api/login/types.ts

@@ -2,6 +2,7 @@
 
 export type UserLoginType = {
   username: string
+  password?: string
 }
 
 export type UserType = {

src/store/modules/user.ts

@@ -87,8 +87,8 @@ export const useUserStore = defineStore('user', {
       this.setToken('')
       this.setUserInfo(undefined)
       this.setRoleRouters([])
-      this.setLoginInfo(undefined)
+      // 注意：不能清 loginInfo / rememberMe —— 那是「记住我」存的账号密码，
-      this.setRememberMe(false)
+      // 退出登录后回到登录页还要靠它来回填，清了就等于「记住我」没生效。
       tagsViewStore.delAllViews()
       // 菜单/路由一起清：否则换账号后 permissionStore 里还是上一个账号的路由表
       permissionStore.clearRoutes()
@@ -104,17 +104,7 @@ export const useUserStore = defineStore('user', {
       this.loginInfo = loginInfo
     }
   },
-  persist: {
+  persist: true
-    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 = () => {

src/styles/business/creator-center.css

@@ -188,6 +188,19 @@
   gap: 10px;
 }
 
+.creator-cover-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.creator-cover-hint {
+  margin: 0;
+  color: #9a97a8;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
 .creator-cover-preview {
   display: grid;
   place-content: center;

src/styles/business/drama-management.css

@@ -165,6 +165,19 @@
   line-height: 1.4;
 }
 
+.cover-block + .cover-block {
+  margin-top: 18px;
+  padding-top: 16px;
+  border-top: 1px dashed var(--el-border-color-lighter);
+}
+
+.cover-label {
+  margin: 0 0 8px;
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+  font-weight: 600;
+}
+
 .cover-editor {
   display: flex;
   gap: 18px;
@@ -183,6 +196,12 @@
   background: var(--el-fill-color-lighter);
 }
 
+.cover-preview-card--landscape {
+  flex: 0 0 160px;
+  width: 160px;
+  height: 90px;
+}
+
 .cover-preview-card img {
   position: absolute;
   inset: 0;
@@ -297,6 +316,10 @@
     flex-basis: 128px;
   }
 
+  .cover-preview-card--landscape {
+    flex-basis: 160px;
+  }
+
   .cover-editor-meta {
     width: 100%;
   }

src/utils/imageCompress.ts

@@ -0,0 +1,154 @@
+// Author: fruit.com.cn
+
+/**
+ * 上传前的图片压缩：只做「超出目标尺寸才等比缩小 + 同格式高质量重编码」，
+ * 尺寸没超、体积也不大时原样返回，避免无意义的二次编码损失。
+ *
+ * 说明：
+ * - 保留原格式（JPEG→JPEG / PNG→PNG / WebP→WebP），避免 PNG 透明底被抹掉；
+ * - GIF / SVG 直接跳过，动图与矢量图重编码会丢帧或失真；
+ * - 缩放用浏览器原生解码 + canvas，配合 EXIF 方向校正，避免竖拍图躺倒。
+ */
+
+export interface ImageCompressOptions {
+  /** 目标最大宽（像素）。 */
+  maxWidth: number
+  /** 目标最大高（像素）。 */
+  maxHeight: number
+  /** 重编码质量，默认 0.92，肉眼看不出差异。 */
+  quality?: number
+  /** 原图小于该体积且尺寸已达标时直接原样上传，默认 300KB。 */
+  skipBelowBytes?: number
+}
+
+const PASSTHROUGH_TYPES = ['image/gif', 'image/svg+xml']
+
+/** 可压缩的位图格式；其余类型原样返回。 */
+export function canCompressImage(file: File): boolean {
+  return file.type.startsWith('image/') && !PASSTHROUGH_TYPES.includes(file.type)
+}
+
+/** 按比例算出目标尺寸；不需要缩放时返回 null。 */
+export function fitWithin(
+  width: number,
+  height: number,
+  maxWidth: number,
+  maxHeight: number
+): { width: number; height: number } | null {
+  if (width <= 0 || height <= 0) return null
+  const scale = Math.min(maxWidth / width, maxHeight / height, 1)
+  if (scale >= 1) return null
+  return {
+    width: Math.max(1, Math.round(width * scale)),
+    height: Math.max(1, Math.round(height * scale))
+  }
+}
+
+export async function compressImage(file: File, options: ImageCompressOptions): Promise<File> {
+  if (!canCompressImage(file)) return file
+
+  const quality = options.quality ?? 0.92
+  const skipBelowBytes = options.skipBelowBytes ?? 300 * 1024
+  const bitmap = await decode(file)
+  if (!bitmap) return file
+
+  const { width, height } = bitmap
+  const target = fitWithin(width, height, options.maxWidth, options.maxHeight)
+
+  // 尺寸已经在目标范围内、体积也不大：直接用原图，一点不损失。
+  if (!target && file.size <= skipBelowBytes) {
+    close(bitmap)
+    return file
+  }
+
+  const canvas = document.createElement('canvas')
+  canvas.width = target?.width ?? width
+  canvas.height = target?.height ?? height
+  const context = canvas.getContext('2d')
+  if (!context) {
+    close(bitmap)
+    return file
+  }
+  context.imageSmoothingEnabled = true
+  context.imageSmoothingQuality = 'high'
+  context.drawImage(bitmap.source, 0, 0, canvas.width, canvas.height)
+  close(bitmap)
+
+  const mimeType = outputMime(file.type)
+  const blob = await toBlob(canvas, mimeType, quality)
+  if (!blob || blob.size >= file.size) return file
+  return new File([blob], renameWithMime(file.name, mimeType), {
+    type: mimeType,
+    lastModified: file.lastModified
+  })
+}
+
+function outputMime(type: string): string {
+  if (type === 'image/png' || type === 'image/webp') return type
+  return 'image/jpeg'
+}
+
+function renameWithMime(name: string, mimeType: string): string {
+  const ext = mimeType === 'image/png' ? 'png' : mimeType === 'image/webp' ? 'webp' : 'jpg'
+  const base = name.includes('.') ? name.slice(0, name.lastIndexOf('.')) : name
+  return `${base}.${ext}`
+}
+
+interface DecodedBitmap {
+  source: CanvasImageSource
+  width: number
+  height: number
+  release?: () => void
+}
+
+async function decode(file: File): Promise<DecodedBitmap | null> {
+  if (typeof createImageBitmap === 'function') {
+    try {
+      const bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' })
+      return {
+        source: bitmap,
+        width: bitmap.width,
+        height: bitmap.height,
+        release: () => bitmap.close()
+      }
+    } catch {
+      // 部分浏览器不支持 imageOrientation 选项，退回 <img> 解码。
+    }
+  }
+  const url = URL.createObjectURL(file)
+  try {
+    const image = await loadImage(url)
+    return {
+      source: image,
+      width: image.naturalWidth,
+      height: image.naturalHeight,
+      release: () => URL.revokeObjectURL(url)
+    }
+  } catch {
+    URL.revokeObjectURL(url)
+    return null
+  }
+}
+
+function close(bitmap: DecodedBitmap): void {
+  bitmap.release?.()
+}
+
+function loadImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.onload = () => resolve(image)
+    image.onerror = () => reject(new Error('image decode failed'))
+    image.src = url
+  })
+}
+
+function toBlob(
+  canvas: HTMLCanvasElement,
+  mimeType: string,
+  quality: number
+): Promise<Blob | null> {
+  return new Promise((resolve) => {
+    canvas.toBlob((blob) => resolve(blob), mimeType, quality)
+  })
+}

src/views/Login/components/LoginForm.vue

@@ -132,7 +132,7 @@ const remember = ref(userStore.getRememberMe)
 const initLoginInfo = () => {
   const loginInfo = userStore.getLoginInfo
   if (loginInfo) {
-    setValues({ username: loginInfo.username })
+    setValues({ username: loginInfo.username, password: loginInfo.password })
   }
 }
 onMounted(() => {
@@ -169,10 +169,12 @@ const signIn = async () => {
         const res = await loginApi(formData)
 
         if (res) {
-          // 是否记住我
+          // 是否记住我：勾选时把账号密码一起持久化到 localStorage，
+          // 下次打开登录页自动回填，免重复输入。
           if (unref(remember)) {
             userStore.setLoginInfo({
-              username: formData.username
+              username: formData.username,
+              password: formData.password
             })
           } else {
             userStore.setLoginInfo(undefined)

src/views/contentManagement/BannerManagementView.vue

@@ -16,6 +16,7 @@ import {
 import { pageDramasApi } from '@/api/admin/drama'
 import { useRbac } from '@/stores/rbac'
 import { uploadFile } from '@/utils/uploader'
+import { BANNER_IMAGE, compressForPreset } from '@/views/contentManagement/upload/imagePresets'
 import PageHeading from '@/views/components/PageHeading.vue'
 
 const { can } = useRbac()
@@ -218,12 +219,13 @@ async function uploadImage(options) {
   imagePercent.value = 0
   imageError.value = ''
   try {
-    const asset = await uploadFile(options.file, {
+    const file = await compressForPreset(options.file, BANNER_IMAGE)
+    const asset = await uploadFile(file, {
       bizType: 'BANNER',
       onProgress: (percent) => (imagePercent.value = percent)
     })
     form.imageUrl = asset.url
-    imageFileName.value = options.file.name
+    imageFileName.value = file.name
     await resetValidation()
     ElMessage.success('图片已上传')
   } catch {
@@ -467,7 +469,9 @@ onMounted(async () => {
                   {{ imageDisplayName }}
                 </span>
               </div>
-              <p class="banner-image-hint">支持 JPG、PNG、WebP，单张不超过 5MB。</p>
+              <p class="banner-image-hint"
+                >{{ BANNER_IMAGE.hint }}；支持 JPG、PNG、WebP，单张不超过 5MB。</p
+              >
               <el-alert
                 v-if="imageError"
                 :title="imageError"

src/views/contentManagement/DramaManagementView.vue

@@ -26,6 +26,11 @@ import { formatCount } from '@/utils/format'
 import { listContentTagsApi } from '@/api/admin/contentTag'
 import { statusClass } from '@/utils/status'
 import { uploadFile } from '@/utils/uploader'
+import {
+  DRAMA_COVER_LANDSCAPE,
+  DRAMA_COVER_PORTRAIT,
+  compressForPreset
+} from '@/views/contentManagement/upload/imagePresets'
 
 const router = useRouter()
 const { can, hasAny } = useRbac()
@@ -48,6 +53,10 @@ const uploadingCover = ref(false)
 const coverPercent = ref(0)
 const coverError = ref('')
 const coverFileName = ref('')
+const uploadingHorizontal = ref(false)
+const horizontalPercent = ref(0)
+const horizontalError = ref('')
+const horizontalFileName = ref('')
 const editingId = ref(null)
 const editingCommentCount = ref(0)
 const editingLikeCount = ref(0)
@@ -66,7 +75,8 @@ const form = reactive({
   heat: 0,
   isHot: false,
   sort: 0,
-  cover: ''
+  cover: '',
+  horizontalCover: ''
 })
 
 const MAX_COVER_SIZE = 5 * 1024 * 1024
@@ -75,6 +85,11 @@ const COVER_TYPES = ['image/jpeg', 'image/png', 'image/webp']
 const coverDisplayName = computed(
   () => coverFileName.value || (form.cover ? coverBasename(form.cover) : '尚未选择封面')
 )
+const horizontalDisplayName = computed(
+  () =>
+    horizontalFileName.value ||
+    (form.horizontalCover ? coverBasename(form.horizontalCover) : '尚未选择横版封面')
+)
 
 const pageCoverPreviewList = computed(() => list.value.map((item) => item.cover).filter(Boolean))
 
@@ -192,10 +207,13 @@ function openCreate() {
     heat: 0,
     isHot: false,
     sort: 0,
-    cover: ''
+    cover: '',
+    horizontalCover: ''
   })
   coverFileName.value = ''
   coverError.value = ''
+  horizontalFileName.value = ''
+  horizontalError.value = ''
   editingCommentCount.value = 0
   editingLikeCount.value = 0
   dialogVisible.value = true
@@ -223,10 +241,13 @@ function openEdit(row) {
     heat: toCount(row.views),
     isHot: !!row.isHot,
     sort: toCount(row.sort),
-    cover: row.cover || ''
+    cover: row.cover || '',
+    horizontalCover: row.horizontalCover || ''
   })
   coverFileName.value = row.cover ? coverBasename(row.cover) : ''
   coverError.value = ''
+  horizontalFileName.value = row.horizontalCover ? coverBasename(row.horizontalCover) : ''
+  horizontalError.value = ''
   editingCommentCount.value = toCount(row.commentCount)
   editingLikeCount.value = toCount(row.likeCount)
   dialogVisible.value = true
@@ -245,7 +266,7 @@ function rowCategoryList(row) {
 }
 
 async function saveDrama() {
-  if (saving.value || uploadingCover.value) return
+  if (saving.value || uploadingCover.value || uploadingHorizontal.value) return
   const titles = payloadLocales(form.titleLocales, textLanguages.value)
   const missing = textLanguages.value.find((code) => !titles[code])
   if (!titles.zh || missing) {
@@ -282,32 +303,41 @@ async function saveDrama() {
   }
 }
 
-function beforeCoverUpload(file) {
+function validateCoverFile(file, errorRef, label) {
-  coverError.value = ''
+  errorRef.value = ''
   if (!COVER_TYPES.includes(file.type)) {
-    coverError.value = '封面仅支持 JPG、PNG 或 WebP 格式'
+    errorRef.value = `${label}仅支持 JPG、PNG 或 WebP 格式`
     return false
   }
   if (file.size > MAX_COVER_SIZE) {
-    coverError.value = '封面大小不能超过 5MB'
+    errorRef.value = `${label}大小不能超过 5MB`
     return false
   }
   return true
 }
 
-/** 封面走分片上传（图片只有一个分片），成功后回填地址。 */
+function beforeCoverUpload(file) {
+  return validateCoverFile(file, coverError, '竖版封面')
+}
+
+function beforeHorizontalUpload(file) {
+  return validateCoverFile(file, horizontalError, '横版封面')
+}
+
+/** 封面走分片上传（图片只有一个分片），上传前按展示规格等比压缩，成功后回填地址。 */
 async function uploadCover(options) {
   uploadingCover.value = true
   coverPercent.value = 0
   coverError.value = ''
   try {
-    const asset = await uploadFile(options.file, {
+    const file = await compressForPreset(options.file, DRAMA_COVER_PORTRAIT)
+    const asset = await uploadFile(file, {
       bizType: 'DRAMA_COVER',
       onProgress: (percent) => (coverPercent.value = percent)
     })
     form.cover = asset.url
-    coverFileName.value = options.file.name
+    coverFileName.value = file.name
-    ElMessage.success('封面已上传')
+    ElMessage.success('竖版封面已上传')
   } catch {
     coverError.value = '封面上传失败，请检查网络后重试'
   } finally {
@@ -315,6 +345,26 @@ async function uploadCover(options) {
   }
 }
 
+async function uploadHorizontalCover(options) {
+  uploadingHorizontal.value = true
+  horizontalPercent.value = 0
+  horizontalError.value = ''
+  try {
+    const file = await compressForPreset(options.file, DRAMA_COVER_LANDSCAPE)
+    const asset = await uploadFile(file, {
+      bizType: 'DRAMA_COVER',
+      onProgress: (percent) => (horizontalPercent.value = percent)
+    })
+    form.horizontalCover = asset.url
+    horizontalFileName.value = file.name
+    ElMessage.success('横版封面已上传')
+  } catch {
+    horizontalError.value = '横版封面上传失败，请检查网络后重试'
+  } finally {
+    uploadingHorizontal.value = false
+  }
+}
+
 function removeCover() {
   if (uploadingCover.value) return
   form.cover = ''
@@ -322,8 +372,15 @@ function removeCover() {
   coverError.value = ''
 }
 
+function removeHorizontalCover() {
+  if (uploadingHorizontal.value) return
+  form.horizontalCover = ''
+  horizontalFileName.value = ''
+  horizontalError.value = ''
+}
+
 function beforeDialogClose(done) {
-  if (saving.value || uploadingCover.value) {
+  if (saving.value || uploadingCover.value || uploadingHorizontal.value) {
     ElMessage.warning(saving.value ? '正在保存，请稍候' : '封面正在上传，请稍候')
     return
   }
@@ -572,65 +629,140 @@ onMounted(async () => {
     <el-form ref="formRef" :model="form" label-position="top" class="drama-editor-form">
       <section class="editor-section">
         <h3 class="editor-section-title">封面</h3>
-        <div class="cover-editor">
+        <div class="cover-block">
-          <div class="cover-preview-card">
+          <p class="cover-label">竖版封面</p>
-            <img v-if="form.cover" :src="form.cover" alt="短剧封面" />
+          <div class="cover-editor">
-            <div v-else class="cover-preview-empty">
+            <div class="cover-preview-card">
-              <AppIcon :icon="AppIcons.content" :size="28" />
+              <img v-if="form.cover" :src="form.cover" alt="短剧竖版封面" />
-              <span>暂无封面</span>
+              <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 v-if="uploadingCover" class="cover-upload-mask">
+
-              <span>上传中</span>
+            <div class="cover-editor-meta">
-              <b>{{ coverPercent }}%</b>
+              <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"
+                >{{ DRAMA_COVER_PORTRAIT.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"
+                  type="danger"
+                  :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>
+        </div>
 
-          <div class="cover-editor-meta">
+        <div class="cover-block">
-            <div class="cover-status-line">
+          <p class="cover-label">横版封面</p>
-              <el-tag :type="form.cover ? 'success' : 'info'" effect="light">
+          <div class="cover-editor">
-                {{ form.cover ? '已上传' : '未上传' }}
+            <div class="cover-preview-card cover-preview-card--landscape">
-              </el-tag>
+              <img v-if="form.horizontalCover" :src="form.horizontalCover" alt="短剧横版封面" />
-              <span class="cover-filename" :title="coverDisplayName">{{ coverDisplayName }}</span>
+              <div v-else class="cover-preview-empty">
+                <AppIcon :icon="AppIcons.content" :size="28" />
+                <span>暂无横版封面</span>
+              </div>
+              <div v-if="uploadingHorizontal" class="cover-upload-mask">
+                <span>上传中</span>
+                <b>{{ horizontalPercent }}%</b>
+              </div>
             </div>
-            <p class="cover-hint">支持 JPG、PNG、WebP，单张不超过 5MB。</p>
+
-            <el-alert
+            <div class="cover-editor-meta">
-              v-if="coverError"
+              <div class="cover-status-line">
-              :title="coverError"
+                <el-tag :type="form.horizontalCover ? 'success' : 'info'" effect="light">
-              type="error"
+                  {{ form.horizontalCover ? '已上传' : '未上传' }}
-              :closable="false"
+                </el-tag>
-              show-icon
+                <span class="cover-filename" :title="horizontalDisplayName">{{
-            />
+                  horizontalDisplayName
-            <div class="cover-actions">
+                }}</span>
-              <el-upload
+              </div>
-                v-if="can('cover:upload')"
+              <p class="cover-hint">
-                :show-file-list="false"
+                {{ DRAMA_COVER_LANDSCAPE.hint }}；支持 JPG、PNG、WebP，单张不超过 5MB。
-                accept="image/jpeg,image/png,image/webp"
+              </p>
-                :before-upload="beforeCoverUpload"
+              <el-alert
-                :http-request="uploadCover"
+                v-if="horizontalError"
-                :disabled="uploadingCover"
+                :title="horizontalError"
-              >
+                type="error"
-                <el-button :loading="uploadingCover" :disabled="uploadingCover">
+                :closable="false"
-                  <AppIcon :icon="AppIcons.upload" />
+                show-icon
-                  {{ form.cover ? '更换封面' : '选择封面' }}
+              />
+              <div class="cover-actions">
+                <el-upload
+                  v-if="can('cover:upload')"
+                  :show-file-list="false"
+                  accept="image/jpeg,image/png,image/webp"
+                  :before-upload="beforeHorizontalUpload"
+                  :http-request="uploadHorizontalCover"
+                  :disabled="uploadingHorizontal"
+                >
+                  <el-button :loading="uploadingHorizontal" :disabled="uploadingHorizontal">
+                    <AppIcon :icon="AppIcons.upload" />
+                    {{ form.horizontalCover ? '更换横版封面' : '选择横版封面' }}
+                  </el-button>
+                </el-upload>
+                <el-button
+                  v-if="can('cover:upload') && form.horizontalCover"
+                  type="danger"
+                  :disabled="uploadingHorizontal"
+                  @click="removeHorizontalCover"
+                >
+                  移除
                 </el-button>
-              </el-upload>
+                <a
-              <el-button
+                  v-if="form.horizontalCover"
-                v-if="can('cover:upload') && form.cover"
+                  class="cover-original-link"
-                type="danger"
+                  :href="form.horizontalCover"
-                :disabled="uploadingCover"
+                  target="_blank"
-                @click="removeCover"
+                  rel="noopener noreferrer"
-              >
+                >
-                移除
+                  查看原图
-              </el-button>
+                </a>
-              <a
+              </div>
-                v-if="form.cover"
-                class="cover-original-link"
-                :href="form.cover"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                查看原图
-              </a>
             </div>
           </div>
         </div>

src/views/contentManagement/TagManagementView.vue

@@ -33,6 +33,7 @@ const DEFAULT_TAG_COLOR = '#E5484D'
 const emptyForm = () => ({
   locales: { zh: '' },
   bgColor: DEFAULT_TAG_COLOR,
+  code: '',
   sort: 1,
   status: 1
 })
@@ -66,6 +67,7 @@ function openEdit(row) {
   Object.assign(form, {
     locales,
     bgColor: row.bgColor || DEFAULT_TAG_COLOR,
+    code: row.code || '',
     sort: row.sort ?? 0,
     status: row.status ?? 1
   })
@@ -83,12 +85,18 @@ async function save() {
     ElMessage.warning(`请填写${languageLabel(missing)}名称`)
     return
   }
+  const code = (form.code || '').trim().toUpperCase()
+  if (code && !/^[A-Z][A-Z0-9_]{0,31}$/.test(code)) {
+    ElMessage.warning('语义码需为大写字母、数字或下划线，且以字母开头')
+    return
+  }
   saving.value = true
   try {
     const payload = {
       name: locales.zh,
       locales,
       bgColor: form.bgColor || DEFAULT_TAG_COLOR,
+      code,
       sort: form.sort,
       status: form.status
     }
@@ -209,6 +217,16 @@ onMounted(load)
       <el-form-item label="背景色">
         <el-color-picker v-model="form.bgColor" color-format="hex" />
       </el-form-item>
+      <el-form-item label="语义码">
+        <el-input
+          v-model="form.code"
+          maxlength="32"
+          placeholder="如 NEW_ARRIVAL，留空则按名称匹配"
+        />
+        <div class="form-hint">
+          客户端按语义码判断板块（如「上新」横滑），改名或换语言都不受影响。
+        </div>
+      </el-form-item>
       <div class="form-row">
         <el-form-item label="排序">
           <el-input-number v-model="form.sort" :min="0" :max="999" />
@@ -236,4 +254,11 @@ onMounted(load)
   height: 16px;
   border-radius: 4px;
 }
+
+.form-hint {
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--el-text-color-secondary);
+}
 </style>

src/views/contentManagement/upload/BatchUploadDialog.vue

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

src/views/contentManagement/upload/CreateEpisodesDialog.vue

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

src/views/contentManagement/upload/UploadTaskRow.vue

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

src/views/contentManagement/upload/imagePresets.ts

@@ -0,0 +1,55 @@
+// Author: fruit.com.cn
+
+import { compressImage } from '@/utils/imageCompress'
+
+/**
+ * 图片上传规格：建议尺寸来自客户端实际展示位，按 3 倍屏预留像素。
+ *
+ * - 竖版封面 3:4：首页三列 ~118dp、推荐分类两列 ~175dp、追剧收藏 ~118dp，
+ *   同时作为播放器起播首帧铺满竖屏，1080×1440 是兼顾清晰度与体积的平衡点。
+ * - 横版封面 16:9：追剧页「继续观看」横幅（约 2.06:1）与后续横向位共用。
+ * - 推荐轮播：客户端轮播高度固定 420dp、按屏宽铺满（约 1:1.08）。
+ */
+export interface ImagePreset {
+  label: string
+  /** 建议尺寸文案，展示在上传按钮旁。 */
+  hint: string
+  maxWidth: number
+  maxHeight: number
+}
+
+export const DRAMA_COVER_PORTRAIT: ImagePreset = {
+  label: '竖版封面',
+  hint: '建议 1080×1440（3:4），最小 720×960',
+  maxWidth: 1080,
+  maxHeight: 1440
+}
+
+export const DRAMA_COVER_LANDSCAPE: ImagePreset = {
+  label: '横版封面',
+  hint: '建议 1280×720（16:9），用于继续观看横幅等横向位',
+  maxWidth: 1280,
+  maxHeight: 720
+}
+
+export const EPISODE_COVER: ImagePreset = {
+  label: '分集封面',
+  hint: '建议 720×960（3:4）',
+  maxWidth: 720,
+  maxHeight: 960
+}
+
+export const BANNER_IMAGE: ImagePreset = {
+  label: '推荐轮播图',
+  hint: '建议 1080×1164（约 1:1.08，与客户端 420dp 轮播高度一致）',
+  maxWidth: 1080,
+  maxHeight: 1164
+}
+
+/** 按规格压缩：尺寸未超且体积不大时原样返回，不做二次编码。 */
+export function compressForPreset(file: File, preset: ImagePreset): Promise<File> {
+  return compressImage(file, {
+    maxWidth: preset.maxWidth,
+    maxHeight: preset.maxHeight
+  })
+}

src/views/creator-center/DramaEditView.vue

@@ -10,6 +10,7 @@ import { useRbac } from '@/stores/rbac'
 import { useDramaEdit } from './composables/useDramaEdit'
 import { useCreatorAccess } from './composables/useCreatorAccess'
 import { dramaStatusMeta } from './composables/useCreatorWorkspace'
+import { DRAMA_COVER_PORTRAIT, EPISODE_COVER } from '@/views/contentManagement/upload/imagePresets'
 
 const { can } = useRbac()
 const canEdit = can('creator-center:drama:edit')
@@ -148,15 +149,18 @@ function requestDramaCover(options) {
                 <img v-if="infoForm.cover" :src="infoForm.cover" alt="" />
                 <span v-else>无</span>
               </div>
-              <el-upload
+              <div class="creator-cover-actions">
-                v-if="canUpload"
+                <el-upload
-                :show-file-list="false"
+                  v-if="canUpload"
-                accept="image/*"
+                  :show-file-list="false"
-                :http-request="requestDramaCover"
+                  accept="image/*"
-                :disabled="uploadingId !== null"
+                  :http-request="requestDramaCover"
-              >
+                  :disabled="uploadingId !== null"
-                <el-button size="small"> <AppIcon :icon="AppIcons.upload" />上传封面 </el-button>
+                >
-              </el-upload>
+                  <el-button size="small"> <AppIcon :icon="AppIcons.upload" />上传封面 </el-button>
+                </el-upload>
+                <p class="creator-cover-hint">{{ DRAMA_COVER_PORTRAIT.hint }}</p>
+              </div>
             </div>
           </el-form-item>
           <el-form-item label="预告片地址">
@@ -353,14 +357,17 @@ function requestDramaCover(options) {
               <img v-if="episodeForm.cover" :src="episodeForm.cover" alt="" />
               <span v-else>无</span>
             </div>
-            <el-upload
+            <div class="creator-cover-actions">
-              v-if="canUpload"
+              <el-upload
-              :show-file-list="false"
+                v-if="canUpload"
-              accept="image/*"
+                :show-file-list="false"
-              :http-request="(options) => requestEpisodeCover({ id: episodeEditingId }, options)"
+                accept="image/*"
-            >
+                :http-request="(options) => requestEpisodeCover({ id: episodeEditingId }, options)"
-              <el-button size="small"> <AppIcon :icon="AppIcons.upload" />上传封面 </el-button>
+              >
-            </el-upload>
+                <el-button size="small"> <AppIcon :icon="AppIcons.upload" />上传封面 </el-button>
+              </el-upload>
+              <p class="creator-cover-hint">{{ EPISODE_COVER.hint }}</p>
+            </div>
           </div>
         </el-form-item>
         <el-form-item v-if="episodeEditingId" label="集号">

src/views/creator-center/composables/useDramaEdit.js

@@ -18,6 +18,11 @@ import {
 } from '@/api/admin/creatorCenter'
 import { dateCell } from '@/utils/format'
 import { probeVideoDuration, resumeUpload, uploadFile } from '@/utils/uploader'
+import {
+  DRAMA_COVER_PORTRAIT,
+  EPISODE_COVER,
+  compressForPreset
+} from '@/views/contentManagement/upload/imagePresets'
 import { submissionStatusMeta, submissionTypeText, submitOptions } from './useCreatorWorkspace'
 import { useCreatorAccess } from './useCreatorAccess'
 
@@ -266,7 +271,9 @@ export function useDramaEdit() {
     uploadingId.value = row ? row.id : -1
     uploadPercent.value = 0
     try {
-      const asset = await uploadFile(file, {
+      const preset = row ? EPISODE_COVER : DRAMA_COVER_PORTRAIT
+      const compressed = await compressForPreset(file, preset)
+      const asset = await uploadFile(compressed, {
         bizType: 'DRAMA_COVER',
         onProgress: (percent) => (uploadPercent.value = percent)
       })