From a49769e66d6c59424671dfdcbb7ae5eba21543b4 Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Tue, 1 Sep 2026 16:37:38 +0800
Subject: [PATCH] =?UTF-8?q?style(products+generate):=20=E6=88=90=E7=89=87?=
 =?UTF-8?q?=E5=BA=93=E6=92=AD=E6=94=BE=E6=8C=89=E9=92=AE=E5=B1=85=E4=B8=AD?=
 =?UTF-8?q?+=E5=8D=A1=E7=89=87=E7=BC=A9=E5=B0=8F+=E9=A2=84=E8=AE=BE?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=B4=A7=E5=87=91=E5=8C=96+=E6=B7=B1?=
 =?UTF-8?q?=E8=89=B2T=E6=8F=8F=E8=BE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- products.css: .xx-product-play 改 absolute 居中定位(52px圆形)
- products.css: .xx-products-grid 改 auto-fill minmax(220px) 自适应列数
- products.css: .xx-product-info padding 14px -> 8px 10px
- generate.css: .xx-title-presets-grid gap 8px->6px, 列数 6->8
- generate.css: .xx-title-preset-card 52px->48px
- constants.ts: fresh_minimal/business/handwriting 加 WebkitTextStroke 描边
---
 apps/web/src/pages/generate/constants.ts | 15 +++++++++++--
 apps/web/src/pages/generate/generate.css |  8 +++----
 apps/web/src/pages/products/products.css | 28 +++++++++++++++---------
 3 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/pages/generate/constants.ts b/apps/web/src/pages/generate/constants.ts
index 199e2421f..9b4ed569c 100644
--- a/apps/web/src/pages/generate/constants.ts
+++ b/apps/web/src/pages/generate/constants.ts
@@ -99,7 +99,12 @@ export const TITLE_PRESETS = [
     key: "fresh_minimal",
     label: "清新简约",
     style: { size: 24, color: "#333333", bold: false, italic: false, stroke: false, shadow: false },
-    previewStyle: { fontWeight: 400, color: "#333333", fontSize: "32px" },
+    previewStyle: {
+      fontWeight: 400,
+      color: "#333333",
+      fontSize: "32px",
+      WebkitTextStroke: "0.5px #888888",
+    },
   },
   {
     key: "variety_show",
@@ -117,7 +122,12 @@ export const TITLE_PRESETS = [
     key: "business",
     label: "商务极简",
     style: { size: 24, color: "#1a1a1a", bold: false, italic: false, stroke: false, shadow: false },
-    previewStyle: { fontWeight: 400, color: "#1a1a1a", fontSize: "32px" },
+    previewStyle: {
+      fontWeight: 400,
+      color: "#1a1a1a",
+      fontSize: "32px",
+      WebkitTextStroke: "0.5px #999999",
+    },
   },
   {
     key: "retro_film",
@@ -148,6 +158,7 @@ export const TITLE_PRESETS = [
     previewStyle: {
       fontWeight: 400,
       color: "#333333",
+      WebkitTextStroke: "0.5px #888888",
       textShadow: "1px 1px 2px rgba(0,0,0,0.3)",
       fontSize: "32px",
     },
diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css
index 187dbfa97..e6bfbdc69 100644
--- a/apps/web/src/pages/generate/generate.css
+++ b/apps/web/src/pages/generate/generate.css
@@ -1733,16 +1733,16 @@
 /* 标题预设卡片网格 */
 .xx-title-presets-grid {
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 8px;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 6px;
 }
 
 .xx-title-preset-card {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 52px;
-  height: 52px;
+  width: 48px;
+  height: 48px;
   padding: 0;
   background: #3a3a3a;
   border: 2px solid transparent;
diff --git a/apps/web/src/pages/products/products.css b/apps/web/src/pages/products/products.css
index 710d81b6b..58bae02de 100644
--- a/apps/web/src/pages/products/products.css
+++ b/apps/web/src/pages/products/products.css
@@ -135,7 +135,7 @@
    ============================================================ */
 .xx-products-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: var(--space-md);
 }
 
@@ -282,20 +282,28 @@
 }
 
 .xx-product-play {
-  position: relative;
-  z-index: 1;
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius-full);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
   background: rgba(0, 0, 0, 0.45);
   backdrop-filter: blur(4px);
-  font-size: var(--font-size-md);
-  transition: var(--transition-all);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  color: #fff;
+  transition: all 0.2s;
+  cursor: pointer;
 }
 
 .xx-product-card:hover .xx-product-play {
   background: var(--primary-color);
-  transform: scale(1.1);
+  transform: translate(-50%, -50%) scale(1.1);
 }
 
 /* 时长标签 */
@@ -315,7 +323,7 @@
 
 /* 卡片信息区 */
 .xx-product-info {
-  padding: 14px;
+  padding: 8px 10px;
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
-- 
2.54.0