From e3b18eba3917347ff02ecb47a49f4e5acc35dac9 Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Tue, 25 Aug 2026 12:50:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A2=84=E8=A7=88=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E5=99=A8=E6=89=8B=E6=9C=BA=E9=A3=8E=E6=A0=BC=E8=A7=86=E8=A7=89?=
 =?UTF-8?q?=E6=94=B9=E9=80=A0=20=E2=80=94=209:16=E7=AB=96=E5=B1=8F?=
 =?UTF-8?q?=E5=A4=96=E6=A1=86+=E6=AF=9B=E7=8E=BB=E7=92=83=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E6=9D=A1+=E7=B2=BE=E8=87=B4=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- generate.css: 右侧栏 320px→400px，改为 align-items:center 水平居中手机框
- FrontendPreviewPlayer: 容器改为 aspectRatio 9/16 + maxWidth 360px
  - borderRadius 28px + boxShadow 营造手机外框质感
  - 中央播放按钮 72px 圆形毛玻璃，hover 缩放效果
  - 控制条毛玻璃效果(backdropFilter blur)，白色进度条
  - 片段指示器移至右上角胶囊形状
  - 空状态/错误状态也在 9:16 手机框内居中显示
- 视频保持 objectFit:contain，竖屏填满横屏居中黑边
---
 .../components/FrontendPreviewPlayer.tsx      | 173 ++++++++++++------
 apps/web/src/pages/generate/generate.css      |   6 +-
 2 files changed, 119 insertions(+), 60 deletions(-)

diff --git a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
index 74dcec059..33c2f72e7 100644
--- a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
+++ b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
@@ -277,20 +277,29 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
   if (!ready || !assets.length) {
     return (
       <div
-        className="xx-preview-empty"
         style={{
-          position: "absolute",
-          inset: 0,
+          position: "relative",
+          width: "100%",
+          maxWidth: 360,
+          aspectRatio: "9 / 16",
+          background: "#0a0a0a",
+          borderRadius: 28,
+          overflow: "hidden",
+          boxShadow:
+            "0 4px 6px -1px rgba(0,0,0,0.3), 0 20px 50px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06)",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
-          zIndex: 1,
         }}
       >
-        <SoundOutlined style={{ fontSize: 48, color: "var(--text-tertiary)", marginBottom: 12 }} />
-        <p className="xx-preview-empty-title">准备预览素材...</p>
-        <p className="xx-preview-empty-desc">加载素材后即可预览播放</p>
+        <SoundOutlined style={{ fontSize: 40, color: "rgba(255,255,255,0.3)", marginBottom: 12 }} />
+        <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 14, margin: "0 0 4px" }}>
+          准备预览素材...
+        </p>
+        <p style={{ color: "rgba(255,255,255,0.35)", fontSize: 12, margin: 0 }}>
+          加载素材后即可预览播放
+        </p>
       </div>
     )
   }
@@ -300,31 +309,48 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
     const showDecodeError = forceVideoFallback && canvasState.hasDecodeError
     return (
       <div
-        className="xx-preview-empty"
         style={{
-          position: "absolute",
-          inset: 0,
+          position: "relative",
+          width: "100%",
+          maxWidth: 360,
+          aspectRatio: "9 / 16",
+          background: "#0a0a0a",
+          borderRadius: 28,
+          overflow: "hidden",
+          boxShadow:
+            "0 4px 6px -1px rgba(0,0,0,0.3), 0 20px 50px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06)",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
-          zIndex: 1,
+          padding: 24,
         }}
       >
         {isBuffering ? (
           <>
-            <LoadingOutlined style={{ fontSize: 48, color: "#fff", marginBottom: 12 }} spin />
-            <p style={{ color: "rgba(255,255,255,0.8)" }}>加载中...</p>
+            <LoadingOutlined style={{ fontSize: 40, color: "#fff", marginBottom: 12 }} spin />
+            <p style={{ color: "rgba(255,255,255,0.8)", fontSize: 14, margin: 0 }}>加载中...</p>
           </>
         ) : showDecodeError ? (
           <>
-            <PlayCircleOutlined style={{ fontSize: 48, color: "#ef4444", marginBottom: 12 }} />
-            <p className="xx-preview-empty-title" style={{ color: "rgba(255,255,255,0.9)" }}>
+            <PlayCircleOutlined style={{ fontSize: 40, color: "#ef4444", marginBottom: 12 }} />
+            <p
+              style={{
+                color: "rgba(255,255,255,0.9)",
+                fontSize: 14,
+                margin: "0 0 4px",
+                fontWeight: 500,
+              }}
+            >
               视频解码失败
             </p>
             <p
-              className="xx-preview-empty-desc"
-              style={{ color: "rgba(255,255,255,0.6)", maxWidth: 300, textAlign: "center" }}
+              style={{
+                color: "rgba(255,255,255,0.5)",
+                fontSize: 12,
+                margin: 0,
+                textAlign: "center",
+              }}
             >
               {canvasState.errorMessage || "当前浏览器不支持该视频编码格式，请刷新重试"}
             </p>
@@ -332,10 +358,14 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
         ) : (
           <>
             <PlayCircleOutlined
-              style={{ fontSize: 48, color: "var(--text-tertiary)", marginBottom: 12 }}
+              style={{ fontSize: 40, color: "rgba(255,255,255,0.3)", marginBottom: 12 }}
             />
-            <p className="xx-preview-empty-title">暂无可播放素材</p>
-            <p className="xx-preview-empty-desc">请先在左侧选择素材</p>
+            <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 14, margin: "0 0 4px" }}>
+              暂无可播放素材
+            </p>
+            <p style={{ color: "rgba(255,255,255,0.35)", fontSize: 12, margin: 0 }}>
+              请先在左侧选择素材
+            </p>
           </>
         )}
       </div>
@@ -347,11 +377,13 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
       style={{
         position: "relative",
         width: "100%",
-        height: "100%",
-        minHeight: 400,
-        background: "#000",
-        borderRadius: 8,
+        maxWidth: 360,
+        aspectRatio: "9 / 16",
+        background: "#0a0a0a",
+        borderRadius: 28,
         overflow: "hidden",
+        boxShadow:
+          "0 4px 6px -1px rgba(0,0,0,0.3), 0 20px 50px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06)",
       }}
     >
       {/* ── Canvas 渲染层（WebCodecs 路径） ── */}
@@ -447,54 +479,69 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
         </div>
       )}
 
-      {/* 播放按钮 */}
+      {/* 中央播放按钮 */}
       {!isPlaying && (
         <button
-          className="xx-preview-play-btn"
           onClick={handleTogglePlay}
           style={{
             position: "absolute",
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
-            background: "rgba(0,0,0,0.5)",
-            border: "none",
+            background: "rgba(0,0,0,0.45)",
+            backdropFilter: "blur(12px)",
+            WebkitBackdropFilter: "blur(12px)",
+            border: "1px solid rgba(255,255,255,0.15)",
             borderRadius: "50%",
-            width: 56,
-            height: 56,
+            width: 72,
+            height: 72,
             cursor: "pointer",
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
             color: "#fff",
-            fontSize: 28,
+            fontSize: 36,
             zIndex: 10,
+            transition: "transform 0.2s ease, background 0.2s ease",
+            boxShadow: "0 4px 20px rgba(0,0,0,0.4)",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.transform = "translate(-50%, -50%) scale(1.08)"
+            e.currentTarget.style.background = "rgba(0,0,0,0.6)"
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.transform = "translate(-50%, -50%) scale(1)"
+            e.currentTarget.style.background = "rgba(0,0,0,0.45)"
           }}
         >
           <PlayCircleOutlined />
         </button>
       )}
 
-      {/* 片段指示器 */}
+      {/* 片段指示器 — 右上角胶囊 */}
       <div
         style={{
           position: "absolute",
-          top: 8,
-          left: 8,
-          background: "rgba(0,0,0,0.6)",
-          color: "#fff",
-          fontSize: 11,
-          padding: "2px 8px",
-          borderRadius: 4,
+          top: 14,
+          right: 14,
+          background: "rgba(0,0,0,0.45)",
+          backdropFilter: "blur(8px)",
+          WebkitBackdropFilter: "blur(8px)",
+          color: "rgba(255,255,255,0.9)",
+          fontSize: 12,
+          fontWeight: 500,
+          padding: "4px 12px",
+          borderRadius: 999,
           zIndex: 10,
+          border: "1px solid rgba(255,255,255,0.1)",
+          letterSpacing: 0.3,
         }}
       >
-        {`片段 ${videoCurrentSegIdx + 1}/${segments.length}`}
+        {`${videoCurrentSegIdx + 1} / ${segments.length}`}
       </div>
 
-      {/* 控制条 */}
+      {/* 控制条 — 手机风格毛玻璃 */}
       <div
-        className="xx-preview-controls"
         style={{
           position: "absolute",
           bottom: 0,
@@ -502,23 +549,36 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
           right: 0,
           display: "flex",
           alignItems: "center",
-          gap: 8,
-          padding: "8px 12px",
-          background: "linear-gradient(transparent, rgba(0,0,0,0.6))",
+          gap: 10,
+          padding: "12px 16px 16px",
+          background: "linear-gradient(transparent, rgba(0,0,0,0.7))",
+          backdropFilter: "blur(4px)",
+          WebkitBackdropFilter: "blur(4px)",
           zIndex: 10,
         }}
       >
         <button
           onClick={handleTogglePlay}
           style={{
-            background: "none",
+            background: "rgba(255,255,255,0.15)",
             border: "none",
             color: "#fff",
-            fontSize: 18,
+            fontSize: 16,
             cursor: "pointer",
-            padding: 4,
+            width: 32,
+            height: 32,
+            borderRadius: "50%",
             display: "flex",
             alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            transition: "background 0.15s",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = "rgba(255,255,255,0.25)"
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = "rgba(255,255,255,0.15)"
           }}
         >
           {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
@@ -526,10 +586,11 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
 
         <span
           style={{
-            fontSize: 12,
-            color: "rgba(255,255,255,0.8)",
-            minWidth: 80,
+            fontSize: 11,
+            color: "rgba(255,255,255,0.85)",
+            minWidth: 72,
             fontVariantNumeric: "tabular-nums",
+            letterSpacing: 0.2,
           }}
         >
           {formatTime(currentTime)} / {formatTime(totalDuration)}
@@ -540,8 +601,8 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
           onMouseDown={handleMouseDown}
           style={{
             flex: 1,
-            height: 4,
-            background: "rgba(255,255,255,0.15)",
+            height: 3,
+            background: "rgba(255,255,255,0.2)",
             borderRadius: 2,
             cursor: "pointer",
             position: "relative",
@@ -551,7 +612,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
             style={{
               height: "100%",
               width: `${progressPercent}%`,
-              background: "#3b82f6",
+              background: "#fff",
               borderRadius: 2,
               transition: isDragging ? "none" : "width 0.1s linear",
             }}
@@ -565,8 +626,8 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
               width: 10,
               height: 10,
               borderRadius: "50%",
-              background: "#3b82f6",
-              border: "2px solid #fff",
+              background: "#fff",
+              boxShadow: "0 0 6px rgba(255,255,255,0.5)",
               opacity: isDragging ? 1 : 0,
               transition: "opacity 0.15s",
             }}
diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css
index 5b388f54f..774e2bc55 100644
--- a/apps/web/src/pages/generate/generate.css
+++ b/apps/web/src/pages/generate/generate.css
@@ -108,10 +108,9 @@
    ============================================================ */
 .xx-generate-layout {
   display: grid;
-  grid-template-columns: 1fr 320px;
+  grid-template-columns: 1fr 400px;
   gap: 24px;
   align-items: start;
-  min-height: 500px;
 }
 
 /* ============================================================
@@ -2526,9 +2525,8 @@
 .xx-generate-right-col {
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 16px;
-  height: 100%;
-  min-height: 500px;
 }
 
 .xx-preview-header {
-- 
2.54.0