v3.5.6版本迭代

apps/admin-web/src/pages/StorePackageAuditsPage.tsx

@@ -55,10 +55,12 @@ function InfoChangeImageDiff({
   field,
   live,
   proposed,
+  imageSize = 72,
 }: {
   field: string;
   live: unknown;
   proposed: unknown;
+  imageSize?: number;
 }) {
   const liveUrls =
     field === 'coverUrl'
@@ -83,7 +85,7 @@ function InfoChangeImageDiff({
           <Image.PreviewGroup>
             <Space wrap size={8}>
               {liveUrls.map((url) => (
-                <Image key={`live-${url}`} src={url} width={72} height={72} style={{ objectFit: 'cover', borderRadius: 4 }} />
+                <Image key={`live-${url}`} src={url} width={imageSize} height={imageSize} style={{ objectFit: 'cover', borderRadius: 4 }} />
               ))}
             </Space>
           </Image.PreviewGroup>
@@ -99,7 +101,7 @@ function InfoChangeImageDiff({
           <Image.PreviewGroup>
             <Space wrap size={8}>
               {proposedUrls.map((url) => (
-                <Image key={`new-${url}`} src={url} width={72} height={72} style={{ objectFit: 'cover', borderRadius: 4 }} />
+                <Image key={`new-${url}`} src={url} width={imageSize} height={imageSize} style={{ objectFit: 'cover', borderRadius: 4 }} />
               ))}
             </Space>
           </Image.PreviewGroup>
@@ -128,6 +130,7 @@ function InfoChangeAuditPanel({
   const [rejectOpen, setRejectOpen] = useState(false);
   const [rejectReason, setRejectReason] = useState('');
   const [activeId, setActiveId] = useState<string | null>(null);
+  const [infoFullscreen, setInfoFullscreen] = useState(false);
 
   async function reload(nextPage = page, nextStatus = status) {
     setLoading(true);
@@ -286,25 +289,33 @@ function InfoChangeAuditPanel({
 
       <Drawer
         title={detail ? `${detail.storeName || detail.storeId} · 信息变更` : '信息变更详情'}
-        width={680}
+        width={infoFullscreen ? '100%' : 680}
         open={detailOpen}
-        onClose={() => setDetailOpen(false)}
+        onClose={() => {
+          setDetailOpen(false);
+          setInfoFullscreen(false);
+        }}
         extra={
-          detail?.status === 'PENDING' ? (
-            <Space>
-              <Button onClick={() => void audit(detail.id, 'APPROVE')}>通过</Button>
-              <Button
-                danger
-                onClick={() => {
-                  setActiveId(detail.id);
-                  setRejectReason('');
-                  setRejectOpen(true);
-                }}
-              >
-                驳回
-              </Button>
-            </Space>
-          ) : null
+          <Space>
+            <Button onClick={() => setInfoFullscreen((v) => !v)}>
+              {infoFullscreen ? '退出全屏' : '全屏查看'}
+            </Button>
+            {detail?.status === 'PENDING' ? (
+              <>
+                <Button onClick={() => void audit(detail.id, 'APPROVE')}>通过</Button>
+                <Button
+                  danger
+                  onClick={() => {
+                    setActiveId(detail.id);
+                    setRejectReason('');
+                    setRejectOpen(true);
+                  }}
+                >
+                  驳回
+                </Button>
+              </>
+            ) : null}
+          </Space>
         }
       >
         {detailLoading ? (
@@ -328,7 +339,12 @@ function InfoChangeAuditPanel({
                     label={STORE_INFO_CHANGEABLE_FIELD_LABELS[d.field] ?? d.field}
                   >
                     {d.field === 'coverUrl' || d.field === 'envPhotoUrls' ? (
-                      <InfoChangeImageDiff field={d.field} live={d.live} proposed={d.proposed} />
+                      <InfoChangeImageDiff
+                        field={d.field}
+                        live={d.live}
+                        proposed={d.proposed}
+                        imageSize={infoFullscreen ? 160 : 72}
+                      />
                     ) : (
                       <span>
                         <Typography.Text delete type="secondary">
@@ -388,6 +404,7 @@ export default function StorePackageAuditsPage() {
   const [detailOpen, setDetailOpen] = useState(false);
   const [activeRequestId, setActiveRequestId] = useState<string | null>(null);
   const [drawerTitle, setDrawerTitle] = useState('套餐变更详情');
+  const [packageFullscreen, setPackageFullscreen] = useState(false);
 
   async function reload(nextPage = page, nextStatus = status) {
     setLoading(true);
@@ -554,14 +571,23 @@ export default function StorePackageAuditsPage() {
 
       <Drawer
         title={drawerTitle}
-        width={880}
+        width={packageFullscreen ? '100%' : 880}
         open={detailOpen}
-        onClose={() => setDetailOpen(false)}
+        onClose={() => {
+          setDetailOpen(false);
+          setPackageFullscreen(false);
+        }}
         destroyOnClose
+        extra={
+          <Button onClick={() => setPackageFullscreen((v) => !v)}>
+            {packageFullscreen ? '退出全屏' : '全屏查看'}
+          </Button>
+        }
       >
         {activeRequestId ? (
           <StorePackageAuditPanel
             requestId={activeRequestId}
+            fullscreen={packageFullscreen}
             onAudited={() => {
               setDetailOpen(false);
               void reload(page, status);