From 915d8c44e01ecf9c14aad1cd42b46c820e26a1d0 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Tue, 6 Oct 2026 13:53:33 +0800
Subject: [PATCH] fix(web): use 3:4 work covers

---
 web/src/components/creator/WorksGallery.tsx |  4 ++--
 web/tests/account-detail-resources.test.cjs | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/src/components/creator/WorksGallery.tsx b/web/src/components/creator/WorksGallery.tsx
index 1bcad17..205f70a 100644
--- a/web/src/components/creator/WorksGallery.tsx
+++ b/web/src/components/creator/WorksGallery.tsx
@@ -35,10 +35,10 @@ export function WorkCover({ workID, title }: { workID: string; title?: string })
     };
   }, [workID]);
   if (src) {
-    return <img src={src} alt={title || '作品封面'} style={{ width: '100%', aspectRatio: '9 / 16', objectFit: 'cover' }} />;
+    return <img src={src} alt={title || '作品封面'} style={{ width: '100%', aspectRatio: '3 / 4', objectFit: 'cover' }} />;
   }
   return (
-    <Flex align="center" justify="center" style={{ aspectRatio: '9 / 16', background: '#f5f5f5' }}>
+    <Flex align="center" justify="center" style={{ aspectRatio: '3 / 4', background: '#f5f5f5' }}>
       <Typography.Text type="secondary" style={{ fontSize: 12 }}>{missing ? '封面未缓存' : '封面加载中'}</Typography.Text>
     </Flex>
   );
diff --git a/web/tests/account-detail-resources.test.cjs b/web/tests/account-detail-resources.test.cjs
index 7d78527..90008d2 100644
--- a/web/tests/account-detail-resources.test.cjs
+++ b/web/tests/account-detail-resources.test.cjs
@@ -222,7 +222,7 @@ for (const [name, props] of [
   });
 }
 
-test('作品封面加载占位与成功图片均为9:16，图片裁切显示并释放缓存地址', async (t) => {
+test('作品封面加载占位与成功图片均为3:4，图片裁切显示并释放缓存地址', async (t) => {
   const blob = new Blob(['cover'], { type: 'image/jpeg' });
   const createURL = t.mock.method(URL, 'createObjectURL', () => 'blob:portrait-cover');
   const revokeURL = t.mock.method(URL, 'revokeObjectURL', () => {});
@@ -231,12 +231,12 @@ test('作品封面加载占位与成功图片均为9:16，图片裁切显示并
     services: { fetchCreatorBinary: async (url) => { requests.push(url); return blob; } },
   }, 'WorkCover');
   let tree = cover.render({ workID: 'work/1', title: '作品标题' });
-  assert.equal(tree.props.style.aspectRatio, '9 / 16');
+  assert.equal(tree.props.style.aspectRatio, '3 / 4');
   assert.match(text(tree), /封面加载中/);
   await flush();
   tree = cover.render();
   assert.equal(tree.type, 'img');
-  assert.equal(tree.props.style.aspectRatio, '9 / 16');
+  assert.equal(tree.props.style.aspectRatio, '3 / 4');
   assert.equal(tree.props.style.width, '100%');
   assert.equal(tree.props.style.objectFit, 'cover');
   assert.equal(tree.props.src, 'blob:portrait-cover');
@@ -247,13 +247,13 @@ test('作品封面加载占位与成功图片均为9:16，图片裁切显示并
   assert.deepEqual(revokeURL.mock.calls[0].arguments, ['blob:portrait-cover']);
 });
 
-test('缺失封面也保持9:16，不使用远程图片代替', async () => {
+test('缺失封面也保持3:4，不使用远程图片代替', async () => {
   const cover = harness('src/components/creator/WorksGallery.tsx', {
     services: { fetchCreatorBinary: async () => { throw new Error('封面不存在'); } },
   }, 'WorkCover');
   const tree = await cover.mount({ workID: 'missing-work' });
   assert.equal(tree.type, 'Flex');
-  assert.equal(tree.props.style.aspectRatio, '9 / 16');
+  assert.equal(tree.props.style.aspectRatio, '3 / 4');
   assert.match(text(tree), /封面未缓存/);
   assert.equal(byType(tree, 'img').length, 0);
   cover.unmount();