style(products+generate): 成片库播放按钮居中+卡片缩小+预设卡片紧凑化+深色T描边

- 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

@@ -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",
     },

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;

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);