feat(classification): 分类支持榜单布局与顺序维护

- 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 内旧任务不属于本次用户明确要求，不执行、不标记完成。
+
+## 验收
+
+- 待执行。

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/dramaClassification.ts

@@ -4,11 +4,14 @@ import request from '@/axios'
 import type { PageResult } from './types'
 
 export interface DramaClassificationItem {
-  id: number
+  id: string
   name: string
+  code: string
   nameEn: string
   nameId: string
   locales?: Record<string, string>
+  layoutType: 'GRID' | 'RANKING'
+  revision: string
   sort: number
   status: number
   dramaCount: number
@@ -18,17 +21,20 @@ export interface DramaClassificationItem {
 export interface DramaClassificationSaveData {
   name: string
   locales: Record<string, string>
+  code?: string
+  layoutType?: 'GRID' | 'RANKING'
   sort?: number
   status?: number
 }
 
 export interface ClassificationDramaItem {
-  id: number
+  id: string
   title: string
   cover: string
   status: string
   totalEpisodes: number
   sort: number
+  position?: number
   updatedAt: string
 }
 
@@ -43,19 +49,19 @@ export const listClassificationsApi = () => {
 }
 
 export const createClassificationApi = (data: DramaClassificationSaveData) => {
-  return request.post<number>({ url: '/admin/drama-classifications', data })
+  return request.post<string>({ url: '/admin/drama-classifications', data })
 }
 
-export const updateClassificationApi = (id: number, data: DramaClassificationSaveData) => {
+export const updateClassificationApi = (id: string, data: DramaClassificationSaveData) => {
   return request.put<void>({ url: `/admin/drama-classifications/${id}`, data })
 }
 
-export const deleteClassificationApi = (id: number) => {
+export const deleteClassificationApi = (id: string) => {
   return request.delete<void>({ url: `/admin/drama-classifications/${id}` })
 }
 
 /** 分类下已关联的短剧 */
-export const listClassificationDramasApi = (id: number, params: ClassificationDramaPageParams) => {
+export const listClassificationDramasApi = (id: string, params: ClassificationDramaPageParams) => {
   return request.get<PageResult<ClassificationDramaItem>>({
     url: `/admin/drama-classifications/${id}/dramas`,
     params
@@ -64,7 +70,7 @@ export const listClassificationDramasApi = (id: number, params: ClassificationDr
 
 /** 尚未关联到该分类的短剧（添加弹窗用） */
 export const listClassificationDramaCandidatesApi = (
-  id: number,
+  id: string,
   params: ClassificationDramaPageParams
 ) => {
   return request.get<PageResult<ClassificationDramaItem>>({
@@ -74,7 +80,7 @@ export const listClassificationDramaCandidatesApi = (
 }
 
 /** 批量关联短剧，返回实际新增数量 */
-export const bindClassificationDramasApi = (id: number, dramaIds: number[]) => {
+export const bindClassificationDramasApi = (id: string, dramaIds: string[]) => {
   return request.post<number>({
     url: `/admin/drama-classifications/${id}/dramas`,
     data: { dramaIds }
@@ -82,8 +88,16 @@ export const bindClassificationDramasApi = (id: number, dramaIds: number[]) => {
 }
 
 /** 从分类移除短剧 */
-export const unbindClassificationDramaApi = (id: number, dramaId: number) => {
+export const unbindClassificationDramaApi = (id: string, dramaId: string) => {
   return request.delete<void>({
     url: `/admin/drama-classifications/${id}/dramas/${dramaId}`
   })
 }
+
+/** 原子保存推荐榜完整内容与顺序 */
+export const saveRankingItemsApi = (id: string, dramaIds: string[]) => {
+  return request.put<void>({
+    url: `/admin/drama-classifications/${id}/ranking-items`,
+    data: { dramaIds }
+  })
+}

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/assets/icons/material-symbols-subset.json

@@ -0,0 +1 @@
+{"prefix":"material-symbols","info":{"name":"Material Symbols","total":15728,"author":{"name":"Google","url":"https://github.com/google/material-design-icons"},"license":{"title":"Apache 2.0","spdx":"Apache-2.0","url":"https://github.com/google/material-design-icons/blob/master/LICENSE"},"samples":["downloading","privacy-tip","filter-drama-outline","assignment-ind","monitoring","desktop-access-disabled-outline-sharp"],"height":24,"category":"Material","tags":["Has Padding"],"palette":false},"lastModified":1791524209,"width":24,"height":24,"icons":{"menu-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z\"/>"},"menu-open-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h11q.425 0 .713.288T16 17t-.288.713T15 18zm14.9-1.7l-3.6-3.6q-.3-.3-.3-.7t.3-.7l3.6-3.6q.275-.275.7-.275t.7.275t.275.7t-.275.7L17.4 12l2.9 2.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275M4 13q-.425 0-.712-.288T3 12t.288-.712T4 11h8q.425 0 .713.288T13 12t-.288.713T12 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h11q.425 0 .713.288T16 7t-.288.713T15 8z\"/>"},"dashboard-rounded":{"body":"<path fill=\"currentColor\" d=\"M14 9q-.425 0-.712-.288T13 8V4q0-.425.288-.712T14 3h6q.425 0 .713.288T21 4v4q0 .425-.288.713T20 9zM4 13q-.425 0-.712-.288T3 12V4q0-.425.288-.712T4 3h6q.425 0 .713.288T11 4v8q0 .425-.288.713T10 13zm10 8q-.425 0-.712-.288T13 20v-8q0-.425.288-.712T14 11h6q.425 0 .713.288T21 12v8q0 .425-.288.713T20 21zM4 21q-.425 0-.712-.288T3 20v-4q0-.425.288-.712T4 15h6q.425 0 .713.288T11 16v4q0 .425-.288.713T10 21z\"/>"},"video-library-rounded":{"body":"<path fill=\"currentColor\" d=\"M17.525 10.625q.35-.225.35-.625t-.35-.625L12.65 6.25q-.375-.25-.763-.038t-.387.663v6.25q0 .45.388.663t.762-.038zM8 18q-.825 0-1.412-.587T6 16V4q0-.825.588-1.412T8 2h12q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18zm-4 4q-.825 0-1.412-.587T2 20V7q0-.425.288-.712T3 6t.713.288T4 7v13h13q.425 0 .713.288T18 21t-.288.713T17 22z\"/>"},"settings-rounded":{"body":"<path fill=\"currentColor\" d=\"M10.825 22q-.675 0-1.162-.45t-.588-1.1L8.85 18.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337l-1.325-1Q2.675 9.9 2.525 9.25t.2-1.225L3.9 5.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825 2h2.35q.675 0 1.163.45t.587 1.1l.225 1.65q.325.125.613.3t.562.375l1.55-.65q.625-.275 1.25-.05t.975.8l1.175 2.05q.35.575.2 1.225t-.675 1.075l-1.325 1q.025.175.025.338v.674q0 .163-.05.338l1.325 1q.525.425.675 1.075t-.2 1.225l-1.2 2.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225 1.65q-.1.65-.587 1.1t-1.163.45zm1.225-6.5q1.45 0 2.475-1.025T15.55 12t-1.025-2.475T12.05 8.5q-1.475 0-2.488 1.025T8.55 12t1.013 2.475T12.05 15.5\"/>"},"group-rounded":{"body":"<path fill=\"currentColor\" d=\"M1 17.2q0-.85.438-1.562T2.6 14.55q1.55-.775 3.15-1.162T9 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T17 17.2v.8q0 .825-.587 1.413T15 20H3q-.825 0-1.412-.587T1 18zM18.45 20q.275-.45.413-.962T19 18v-1q0-1.1-.612-2.113T16.65 13.15q1.275.15 2.4.513t2.1.887q.9.5 1.375 1.112T23 17v1q0 .825-.587 1.413T21 20zM6.175 10.825Q5 9.65 5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12t-2.825-1.175m11.65 0Q16.65 12 15 12q-.275 0-.7-.062t-.7-.138q.675-.8 1.038-1.775T15 8t-.362-2.025T13.6 4.2q.35-.125.7-.163T15 4q1.65 0 2.825 1.175T19 8t-1.175 2.825\"/>"},"movie-edit-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4l1.625 3.25q.175.35.5.55t.7.2q.75 0 1.15-.638t.05-1.312L7 4h2l1.625 3.25q.175.35.5.55t.7.2q.75 0 1.15-.638t.05-1.312L12 4h2l1.625 3.25q.175.35.5.55t.7.2q.75 0 1.15-.638t.05-1.312L17 4h3q.825 0 1.413.587T22 6v3.45q0 .3-.25.475t-.55.1q-.825-.15-1.638.087T18.1 11l-5.525 5.525q-.275.275-.425.638t-.15.762V19q0 .425-.288.713T11 20zm10 0v-1.65q0-.2.075-.387t.225-.338l5.225-5.2q.225-.225.5-.325t.55-.1q.3 0 .575.113t.5.337l.925.925q.2.225.313.5t.112.55t-.1.563t-.325.512l-5.2 5.2q-.15.15-.337.225T16.65 21H15q-.425 0-.712-.287T14 20m6.575-4.6l.925-.975l-.925-.925l-.95.95z\"/>"},"policy-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.675 21.875q-.15-.025-.3-.075Q8 20.675 6 17.637T4 11.1V6.375q0-.625.363-1.125t.937-.725l6-2.25q.35-.125.7-.125t.7.125l6 2.25q.575.225.938.725T20 6.375V11.1q0 1.575-.413 3.063T18.4 17l-2.95-2.95q.275-.475.413-.987T16 12q0-1.65-1.175-2.825T12 8T9.175 9.175T8 12t1.175 2.825T12 16q.525 0 1.038-.137T14 15.45l3.225 3.2q-.95 1.125-2.087 1.913T12.625 21.8q-.15.05-.3.075T12 21.9t-.325-.025m-1.088-8.462Q10 12.825 10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14t-1.412-.587\"/>"},"payments-rounded":{"body":"<path fill=\"currentColor\" d=\"M3 20q-.825 0-1.412-.587T1 18V8q0-.425.288-.712T2 7t.713.288T3Line truncated

src/components/Icon/src/Icon.vue

@@ -5,7 +5,7 @@ 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 { Icon } from '@iconify/vue/offline'
 import { normalizeAppIcon } from '@/constants/icons'
 
 const { getPrefixCls } = useDesign()
@@ -29,11 +29,6 @@ const symbolId = computed(() => {
   return unref(isLocal) ? `#icon-${props.icon.split('svg-icon:')[1]}` : unref(normalizedIcon)
 })
 
-// 是否使用在线图标
-const isUseOnline = computed(() => {
-  return import.meta.env.VITE_USE_ONLINE_ICON === 'true'
-})
-
 const getIconifyStyle = computed(() => {
   const { color, size } = props
   return {
@@ -49,10 +44,7 @@ const getIconifyStyle = computed(() => {
       <use :xlink:href="symbolId" />
     </svg>
 
-    <template v-else>
+    <Icon v-else :icon="normalizedIcon" :style="getIconifyStyle" />
-      <Icon v-if="isUseOnline" :icon="normalizedIcon" :style="getIconifyStyle" />
-      <div v-else :class="`${normalizedIcon} iconify`" :style="getIconifyStyle"></div>
-    </template>
   </ElIcon>
 </template>
 

src/main.ts

@@ -5,6 +5,9 @@ import 'vue/jsx'
 // 引入unocss
 import '@/plugins/unocss'
 
+// 注册后台使用的本地图标子集
+import '@/plugins/icons'
+
 // 导入全局的svg图标
 import '@/plugins/svgIcon'
 

src/plugins/echarts/index.ts

@@ -2,22 +2,12 @@
 
 import * as echarts from 'echarts/core'
 
-import {
+import { BarChart, LineChart, PieChart } from 'echarts/charts'
-  BarChart,
-  LineChart,
-  PieChart,
-  MapChart,
-  PictorialBarChart,
-  RadarChart
-} from 'echarts/charts'
 
 import {
   TitleComponent,
   TooltipComponent,
   GridComponent,
-  PolarComponent,
-  AriaComponent,
-  ParallelComponent,
   LegendComponent
 } from 'echarts/components'
 
@@ -28,16 +18,10 @@ echarts.use([
   TitleComponent,
   TooltipComponent,
   GridComponent,
-  PolarComponent,
-  AriaComponent,
-  ParallelComponent,
   BarChart,
   LineChart,
   PieChart,
-  MapChart,
+  CanvasRenderer
-  CanvasRenderer,
-  PictorialBarChart,
-  RadarChart
 ])
 
 export default echarts

src/plugins/icons/index.ts

@@ -0,0 +1,6 @@
+// Author: fruit.com.cn
+
+import { addCollection } from '@iconify/vue/offline'
+import materialSymbols from '@/assets/icons/material-symbols-subset.json'
+
+addCollection(materialSymbols)

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/CategoryDramaView.vue

@@ -4,6 +4,7 @@
 <script setup>
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { VueDraggable } from 'vue-draggable-plus'
 import { AppIcon } from '@/components/AppIcon'
 import { AppIcons } from '@/constants/icons'
 import {
@@ -19,6 +20,7 @@ import {
   listClassificationDramaCandidatesApi,
   listClassificationDramasApi,
   listClassificationsApi,
+  saveRankingItemsApi,
   unbindClassificationDramaApi,
   updateClassificationApi
 } from '@/api/admin/dramaClassification'
@@ -43,6 +45,7 @@ const activeId = ref(null)
 const activeClassification = computed(
   () => classifications.value.find((item) => item.id === activeId.value) || null
 )
+const isRanking = computed(() => activeClassification.value?.layoutType === 'RANKING')
 
 const loading = ref(false)
 const dramas = ref([])
@@ -50,12 +53,19 @@ const total = ref(0)
 const pageIndex = ref(1)
 const pageSize = ref(10)
 const keyword = ref('')
+const rankingDirty = ref(false)
 
 const dialogVisible = ref(false)
 const saving = ref(false)
 const editingId = ref(null)
 const languages = ref(['zh'])
-const emptyForm = () => ({ locales: { zh: '' }, sort: 1, status: 1 })
+const emptyForm = () => ({
+  locales: { zh: '' },
+  code: '',
+  layoutType: 'GRID',
+  sort: 1,
+  status: 1
+})
 const form = reactive(emptyForm())
 
 const candidateVisible = ref(false)
@@ -91,10 +101,11 @@ async function loadDramas() {
     const res = await listClassificationDramasApi(activeId.value, {
       keyword: keyword.value || undefined,
       pageIndex: pageIndex.value,
-      pageSize: pageSize.value
+      pageSize: isRanking.value ? 50 : pageSize.value
     })
     dramas.value = res.data?.list || []
     total.value = res.data?.total || 0
+    rankingDirty.value = false
   } finally {
     loading.value = false
   }
@@ -105,6 +116,7 @@ function selectClassification(row) {
   activeId.value = row.id
   pageIndex.value = 1
   keyword.value = ''
+  rankingDirty.value = false
   loadDramas()
 }
 
@@ -132,6 +144,8 @@ function openEdit(row) {
   languages.value = languageCodes(locales)
   Object.assign(form, {
     locales,
+    code: row.code || '',
+    layoutType: row.layoutType || 'GRID',
     sort: row.sort ?? 0,
     status: row.status ?? 1
   })
@@ -150,6 +164,10 @@ async function saveClassification() {
     const payload = {
       name: locales.zh,
       locales,
+      code:
+        form.code ||
+        (form.layoutType === 'RANKING' && !editingId.value ? 'RECOMMEND_RANKING' : undefined),
+      layoutType: form.layoutType,
       sort: form.sort,
       status: form.status
     }
@@ -197,7 +215,12 @@ async function removeDrama(row) {
   } catch {
     return
   }
-  await unbindClassificationDramaApi(activeId.value, row.id)
+  if (isRanking.value) {
+    const remaining = dramas.value.filter((item) => item.id !== row.id).map((item) => item.id)
+    await saveRankingItemsApi(activeId.value, remaining)
+  } else {
+    await unbindClassificationDramaApi(activeId.value, row.id)
+  }
   ElMessage.success('已移出')
   await Promise.all([loadDramas(), loadClassifications()])
 }
@@ -247,11 +270,23 @@ async function confirmBind() {
   }
   binding.value = true
   try {
-    const res = await bindClassificationDramasApi(
+    if (isRanking.value) {
-      activeId.value,
+      const existingIds = dramas.value.map((item) => item.id)
-      selectedDramas.value.map((item) => item.id)
+      const selectedIds = selectedDramas.value.map((item) => item.id)
-    )
+      const nextIds = [...new Set([...existingIds, ...selectedIds])]
-    ElMessage.success(`已关联 ${res.data ?? selectedDramas.value.length} 部短剧`)
+      if (nextIds.length > 50) {
+        ElMessage.warning('推荐榜最多 50 部短剧')
+        return
+      }
+      await saveRankingItemsApi(activeId.value, nextIds)
+      ElMessage.success(`推荐榜已增加 ${selectedIds.length} 部短剧`)
+    } else {
+      const res = await bindClassificationDramasApi(
+        activeId.value,
+        selectedDramas.value.map((item) => item.id)
+      )
+      ElMessage.success(`已关联 ${res.data ?? selectedDramas.value.length} 部短剧`)
+    }
     candidateVisible.value = false
     await Promise.all([loadDramas(), loadClassifications()])
   } finally {
@@ -259,6 +294,22 @@ async function confirmBind() {
   }
 }
 
+function onRankingChange() {
+  dramas.value = dramas.value.map((item, index) => ({ ...item, position: index + 1 }))
+  rankingDirty.value = true
+}
+
+async function saveRankingOrder() {
+  if (!activeId.value || !dramas.value.length) return
+  await saveRankingItemsApi(
+    activeId.value,
+    dramas.value.map((item) => item.id)
+  )
+  rankingDirty.value = false
+  ElMessage.success('推荐榜顺序已保存')
+  await loadClassifications()
+}
+
 function formatTime(value) {
   if (!value) return '—'
   return String(value).replace('T', ' ').slice(0, 19)
@@ -271,7 +322,7 @@ onMounted(loadClassifications)
   <PageHeading
     eyebrow="内容管理"
     title="分类管理"
-    description="分类是运营自定义的分组，与「类型」无关；一个分类可以关联任意多部短剧。"
+    description="普通分类使用剧目网格；推荐榜使用独立排行布局，并按后台配置顺序展示。"
   >
     <el-button v-if="can('drama:create')" type="primary" class="primary-button" @click="openCreate">
       <AppIcon :icon="AppIcons.add" />
@@ -293,9 +344,11 @@ onMounted(loadClassifications)
         <div class="classification-toolbar__title">
           {{ activeClassification?.name || '请选择分类' }}
           <small>共 {{ total }} 部关联短剧</small>
+          <el-tag v-if="isRanking" size="small" type="warning">推荐榜</el-tag>
         </div>
         <div class="classification-toolbar__search">
           <el-input
+            v-if="!isRanking"
             v-model="keyword"
             placeholder="搜索短剧名称"
             clearable
@@ -303,7 +356,15 @@ onMounted(loadClassifications)
             @keyup.enter="search"
             @clear="search"
           />
-          <el-button type="primary" plain @click="search">查询</el-button>
+          <el-button v-if="!isRanking" type="primary" plain @click="search">查询</el-button>
+          <el-button
+            v-if="isRanking && can('drama:update')"
+            type="primary"
+            :disabled="!rankingDirty"
+            @click="saveRankingOrder"
+          >
+            保存排序
+          </el-button>
           <el-button v-if="can('drama:update')" :disabled="!activeId" @click="openCandidates">
             <AppIcon :icon="AppIcons.add" />
             添加短剧
@@ -311,7 +372,41 @@ onMounted(loadClassifications)
         </div>
       </div>
 
+      <VueDraggable
+        v-if="isRanking"
+        v-model="dramas"
+        item-key="id"
+        handle=".ranking-row__drag"
+        class="ranking-list"
+        @end="onRankingChange"
+      >
+        <div v-for="(row, index) in dramas" :key="row.id" class="ranking-row">
+          <button class="ranking-row__drag" type="button" title="拖动调整排名">
+            <AppIcon :icon="AppIcons.drag" />
+          </button>
+          <span class="ranking-row__rank">{{ index + 1 }}</span>
+          <img v-if="row.cover" :src="row.cover" class="ranking-row__cover" alt="封面" />
+          <div v-else class="ranking-row__cover ranking-row__cover--empty">无</div>
+          <div class="ranking-row__content">
+            <strong>{{ row.title }}</strong>
+            <span class="status-dot" :class="statusClass(row.status)">
+              {{ STATUS_TEXT[row.status] || row.status }} · {{ row.totalEpisodes || 0 }} 集
+            </span>
+          </div>
+          <el-button
+            v-if="can('drama:update')"
+            type="danger"
+            size="small"
+            @click="removeDrama(row)"
+          >
+            移出
+          </el-button>
+        </div>
+        <el-empty v-if="!dramas.length" description="推荐榜还没有短剧" />
+      </VueDraggable>
+
       <el-table
+        v-else
         v-loading="loading"
         :data="dramas"
         row-key="id"
@@ -353,7 +448,7 @@ onMounted(loadClassifications)
         </el-table-column>
       </el-table>
 
-      <div class="classification-pagination">
+      <div v-if="!isRanking" class="classification-pagination">
         <el-pagination
           :current-page="pageIndex"
           :page-size="pageSize"
@@ -434,6 +529,74 @@ onMounted(loadClassifications)
   border-radius: 4px;
 }
 
+.ranking-list {
+  display: grid;
+  gap: 1px;
+  overflow: hidden;
+  border: 1px solid var(--el-border-color);
+}
+
+.ranking-row {
+  display: grid;
+  grid-template-columns: 36px 48px 52px minmax(0, 1fr) auto;
+  min-height: 72px;
+  padding: 8px 12px;
+  background: var(--el-bg-color);
+  align-items: center;
+  gap: 12px;
+}
+
+.ranking-row + .ranking-row {
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.ranking-row__drag {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  color: var(--el-text-color-secondary);
+  cursor: grab;
+  background: transparent;
+  border: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.ranking-row__rank {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+  text-align: center;
+}
+
+.ranking-row__cover {
+  width: 44px;
+  height: 58px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.ranking-row__cover--empty {
+  display: flex;
+  color: var(--el-text-color-placeholder);
+  background: var(--el-fill-color-light);
+  align-items: center;
+  justify-content: center;
+}
+
+.ranking-row__content {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+}
+
+.ranking-row__content strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .classification-cover--empty {
   display: flex;
   align-items: center;

src/views/contentManagement/ClassificationDramaDialogs.vue

@@ -64,6 +64,23 @@ const emit = defineEmits([
         @update:languages="emit('update:languages', $event)"
         @update:locales="emit('update:form', { ...form, locales: $event })"
       />
+      <el-form-item label="展示样式">
+        <el-radio-group
+          :model-value="form.layoutType"
+          @update:model-value="emit('update:form', { ...form, layoutType: $event })"
+        >
+          <el-radio-button label="GRID">普通分类</el-radio-button>
+          <el-radio-button label="RANKING">推荐榜</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="分类编码">
+        <el-input
+          :model-value="form.code"
+          maxlength="64"
+          placeholder="例如 RECOMMEND_RANKING"
+          @update:model-value="emit('update:form', { ...form, code: $event.toUpperCase() })"
+        />
+      </el-form-item>
       <div class="classification-form-row">
         <el-form-item label="排序">
           <el-input-number

src/views/contentManagement/ClassificationSideList.vue

@@ -29,6 +29,9 @@ const { can } = useRbac()
         >
           <div class="classification-list__main">
             <span class="classification-list__name">{{ item.name }}</span>
+            <el-tag v-if="item.layoutType === 'RANKING'" size="small" type="warning">
+              推荐榜
+            </el-tag>
             <span class="classification-list__count">{{ item.dramaCount || 0 }}</span>
           </div>
           <div class="classification-list__actions" @click.stop>

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/imagePresets.ts

@@ -0,0 +1,62 @@
+// 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 const LOGIN_BACKGROUND: ImagePreset = {
+  label: '登录页背景',
+  hint: '建议 1170×2532（390×844dp × 3，iPhone 整屏竖图），min 720×1560',
+  maxWidth: 1170,
+  maxHeight: 2532
+}
+
+/** 按规格压缩：尺寸未超且体积不大时原样返回，不做二次编码。 */
+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)
       })

src/views/dashboard/DashboardMetricWall.vue

@@ -3,7 +3,7 @@
 
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import echarts from '@/plugins/echarts'
+import type { ECharts } from 'echarts/core'
 import type { DashboardOverview, DashboardTrend } from '@/api/admin/dashboard'
 import { formatCount } from '@/utils/format'
 
@@ -16,8 +16,10 @@ const props = defineProps<{
 const trendRef = ref<HTMLElement>()
 const deviceRef = ref<HTMLElement>()
 const clock = ref('')
-let trendChart: echarts.ECharts | null = null
+let trendChart: ECharts | null = null
-let deviceChart: echarts.ECharts | null = null
+let deviceChart: ECharts | null = null
+let echartsPromise: Promise<typeof import('@/plugins/echarts').default> | null = null
+let active = true
 let timer = 0
 
 const AXIS = '#909399'
@@ -78,12 +80,19 @@ function tick() {
   clock.value = new Date().toLocaleString('zh-CN', { hour12: false })
 }
 
-function renderCharts() {
+async function loadEcharts() {
-  renderTrend()
+  echartsPromise ??= import('@/plugins/echarts').then((module) => module.default)
-  renderDevices()
+  return echartsPromise
 }
 
-function renderTrend() {
+async function renderCharts() {
+  const echarts = await loadEcharts()
+  if (!active) return
+  renderTrend(echarts)
+  renderDevices(echarts)
+}
+
+function renderTrend(echarts: typeof import('@/plugins/echarts').default) {
   if (!trendRef.value) return
   trendChart = trendChart ?? echarts.init(trendRef.value)
   const trend = props.trend
@@ -130,7 +139,7 @@ function renderTrend() {
   })
 }
 
-function renderDevices() {
+function renderDevices(echarts: typeof import('@/plugins/echarts').default) {
   if (!deviceRef.value) return
   deviceChart = deviceChart ?? echarts.init(deviceRef.value)
   const android = metric('user', 'androidActive7d') ?? 0
@@ -186,6 +195,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
+  active = false
   window.clearInterval(timer)
   window.removeEventListener('resize', onResize)
   trendChart?.dispose()

src/views/systemManagement/SettingsView.vue

@@ -1,9 +1,11 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { listConfigsApi, updateConfigsApi } from '@/api/admin/config'
+import { uploadFile } from '@/utils/uploader'
+import { compressForPreset, LOGIN_BACKGROUND } from '@/views/contentManagement/upload/imagePresets'
 import { useRbac } from '@/stores/rbac'
 
 const { can } = useRbac()
@@ -14,6 +16,15 @@ const workspaceName = ref('')
 const defaultStatus = ref('draft')
 const registerMaxPerIp = ref(5)
 const registerMaxPerDevice = ref(3)
+const loginBackgroundUrl = ref('')
+
+const MAX_LOGIN_BG_SIZE = 8 * 1024 * 1024 // 8 MB
+const ALLOWED_LOGIN_BG_TYPES = ['image/jpeg', 'image/png', 'image/webp']
+const uploadingBg = ref(false)
+const bgError = ref('')
+const bgFileName = ref('')
+
+const canSave = computed(() => can('system:role'))
 
 const statusOptions = [
   { code: 'draft', text: '草稿' },
@@ -34,6 +45,7 @@ async function load() {
     defaultStatus.value = map['content.default-status'] || 'draft'
     registerMaxPerIp.value = parseRegisterLimit(map['app.register.max-per-ip-per-day'], 5)
     registerMaxPerDevice.value = parseRegisterLimit(map['app.register.max-per-device-per-day'], 3)
+    loginBackgroundUrl.value = map['app.login.background.url'] || ''
   } finally {
     loading.value = false
   }
@@ -46,7 +58,8 @@ async function save() {
       'workspace.name': workspaceName.value,
       'content.default-status': defaultStatus.value,
       'app.register.max-per-ip-per-day': String(registerMaxPerIp.value),
-      'app.register.max-per-device-per-day': String(registerMaxPerDevice.value)
+      'app.register.max-per-device-per-day': String(registerMaxPerDevice.value),
+      'app.login.background.url': loginBackgroundUrl.value
     })
     ElMessage.success('设置已保存')
   } finally {
@@ -54,6 +67,52 @@ async function save() {
   }
 }
 
+function beforeBgUpload(file) {
+  bgError.value = ''
+  if (!ALLOWED_LOGIN_BG_TYPES.includes(file.type)) {
+    bgError.value = '图片仅支持 JPG、PNG 或 WebP 格式'
+    return false
+  }
+  if (file.size > MAX_LOGIN_BG_SIZE) {
+    bgError.value = '图片大小不能超过 8MB'
+    return false
+  }
+  return true
+}
+
+async function uploadBg(options) {
+  uploadingBg.value = true
+  bgError.value = ''
+  try {
+    const file = await compressForPreset(options.file, LOGIN_BACKGROUND)
+    const asset = await uploadFile(file, {
+      bizType: 'LOGIN_BG'
+    })
+    loginBackgroundUrl.value = asset.url
+    bgFileName.value = file.name
+    ElMessage.success('登录页背景已上传')
+  } catch {
+    bgError.value = '图片上传失败，请检查网络后重试'
+  } finally {
+    uploadingBg.value = false
+  }
+}
+
+function removeBg() {
+  if (uploadingBg.value) return
+  loginBackgroundUrl.value = ''
+  bgFileName.value = ''
+  bgError.value = ''
+}
+
+const loginBgPreview = computed(() => {
+  const url = loginBackgroundUrl.value
+  if (!url) return ''
+  if (url.startsWith('http://') || url.startsWith('https://')) return url
+  if (url.startsWith('/')) return url
+  return `/${url}`
+})
+
 onMounted(load)
 </script>
 
@@ -77,10 +136,75 @@ onMounted(load)
       ><el-form-item label="单 IP 24 小时注册上限（0 或负数表示不限制）"
         ><el-input-number v-model="registerMaxPerIp" :step="1" :precision="0" /></el-form-item
       ><el-form-item label="单设备 24 小时注册上限（0 或负数表示不限制）"
-        ><el-input-number v-model="registerMaxPerDevice" :step="1" :precision="0" /></el-form-item
+        ><el-input-number v-model="registerMaxPerDevice" :step="1" :precision="0"
-      ><el-button type="primary" :loading="saving" :disabled="!can('system:role')" @click="save"
+      /></el-form-item>
+      <el-divider content-position="left">App 登录页</el-divider>
+      <el-form-item label="登录页背景图">
+        <div class="login-bg-field">
+          <el-upload
+            :show-file-list="false"
+            :before-upload="beforeBgUpload"
+            :http-request="uploadBg"
+            accept=".jpg,.jpeg,.png,.webp"
+          >
+            <el-button :disabled="uploadingBg" :loading="uploadingBg">
+              {{ loginBackgroundUrl ? '重新上传' : '上传背景图' }}
+            </el-button>
+          </el-upload>
+          <span class="field-hint">建议 {{ LOGIN_BACKGROUND.hint }}</span>
+          <span v-if="bgFileName" class="field-filename">当前：{{ bgFileName }}</span>
+          <span v-if="bgError" class="field-error">{{ bgError }}</span>
+          <div v-if="loginBgPreview" class="login-bg-preview">
+            <img :src="loginBgPreview" alt="登录页背景预览" />
+            <el-button class="remove-bg-btn" text type="danger" size="small" @click="removeBg"
+              >移除</el-button
+            >
+          </div>
+        </div>
+      </el-form-item>
+      <el-button type="primary" :loading="saving" :disabled="!canSave" @click="save"
         >保存设置</el-button
       ></el-form
     ></section
   >
 </template>
+
+<style scoped>
+.login-bg-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.field-hint {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+.field-filename {
+  font-size: 12px;
+  color: var(--el-text-color-primary);
+}
+.field-error {
+  font-size: 12px;
+  color: var(--el-color-danger);
+}
+.login-bg-preview {
+  position: relative;
+  margin-top: 4px;
+  width: 96px;
+  aspect-ratio: 1170 / 2532;
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--el-fill-color-light);
+}
+.login-bg-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.remove-bg-btn {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  padding: 2px 4px;
+}
+</style>

uno.config.ts

@@ -1,35 +1,7 @@
 // Author: fruit.com.cn
 
-import { defineConfig, toEscapedSelector as e, presetUno, presetIcons } from 'unocss'
+import { defineConfig, toEscapedSelector as e, presetUno } from 'unocss'
 import transformerVariantGroup from '@unocss/transformer-variant-group'
-import { loadEnv } from 'vite'
-import { AppIcons } from './src/constants/icons'
-
-const root = process.cwd()
-
-const createPresetIcons = () => {
-  const isBuild = !!process.argv[4]
-  let env = {} as any
-  if (!isBuild) {
-    env = loadEnv(process.argv[3], root)
-  } else {
-    env = loadEnv(process.argv[4], root)
-  }
-  // @ts-ignore
-  if (env.VITE_USE_ONLINE_ICON === 'true') {
-    return []
-  } else {
-    return [
-      presetIcons({
-        prefix: '',
-        collections: {
-          'material-symbols': () =>
-            import('@iconify/json/json/material-symbols.json').then((i) => i.default)
-        }
-      })
-    ]
-  }
-}
 
 export default defineConfig({
   // ...UnoCSS options
@@ -141,8 +113,7 @@ ${selector}:after {
       }
     ]
   ],
-  safelist: Object.values(AppIcons),
+  presets: [presetUno({ dark: 'class', attributify: false })],
-  presets: [presetUno({ dark: 'class', attributify: false }), ...createPresetIcons()],
   transformers: [transformerVariantGroup()],
   content: {
     pipeline: {