From 8bea6d8d9ad930049542ac647a57a5eafb64f404 Mon Sep 17 00:00:00 2001
From: chenpei <chenpei@1080p.hk>
Date: Mon, 31 Aug 2026 18:19:26 +0800
Subject: [PATCH] ui: compact task detail upload layout

---
 components/UploadModal.tsx                    |   8 +-
 .../ProductPackageUploader.layout.test.tsx    | 193 ++++++++++++++++++
 .../upload/ProductPackageUploader.module.css  |  82 ++++++++
 components/upload/ProductPackageUploader.tsx  | 168 ++++++++-------
 4 files changed, 373 insertions(+), 78 deletions(-)
 create mode 100644 components/upload/ProductPackageUploader.layout.test.tsx
 create mode 100644 components/upload/ProductPackageUploader.module.css

diff --git a/components/UploadModal.tsx b/components/UploadModal.tsx
index 85412de2..48c15909 100644
--- a/components/UploadModal.tsx
+++ b/components/UploadModal.tsx
@@ -1961,9 +1961,9 @@ export default function UploadModal({ onClose, onSuccess }: UploadModalProps) {
         role="dialog"
         aria-modal="true"
         aria-labelledby="upload-material-title"
-        className="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-[12px] border border-[#e7e8ea] bg-white"
+        className={`max-h-[90vh] w-full overflow-y-auto rounded-[12px] border border-[#e7e8ea] bg-white ${materialType === '任务-详情' ? 'max-w-4xl' : 'max-w-2xl'}`}
       >
-        <div data-upload-reveal className="border-b border-[#e7e8ea] px-8 pb-5 pt-7">
+        <div data-upload-reveal className={`border-b border-[#e7e8ea] ${materialType === '任务-详情' ? 'px-4 py-4 sm:px-6' : 'px-8 pb-5 pt-7'}`}>
           <div className="flex items-start justify-between gap-6">
             <div className="min-w-0">
               <h2
@@ -1988,7 +1988,7 @@ export default function UploadModal({ onClose, onSuccess }: UploadModalProps) {
           </div>
         </div>
 
-        <form data-upload-reveal onSubmit={handleSubmit} className="space-y-6 px-8 py-6">
+        <form data-upload-reveal onSubmit={handleSubmit} className={materialType === '任务-详情' ? 'space-y-4 px-4 py-4 sm:px-6' : 'space-y-6 px-8 py-6'}>
           <div>
             <label htmlFor="upload-material-type" className={fieldLabelClass}>
               素材类型 *
@@ -2028,7 +2028,7 @@ export default function UploadModal({ onClose, onSuccess }: UploadModalProps) {
 
           {/* 任务-详情上传组件 */}
           {materialType === '任务-详情' && (
-            <div className="border-t border-[#e7e8ea] pt-6">
+            <div className="border-t border-[#e7e8ea] pt-4">
               <ProductPackageUploader
                 onSuccess={() => {
                   onSuccess();
diff --git a/components/upload/ProductPackageUploader.layout.test.tsx b/components/upload/ProductPackageUploader.layout.test.tsx
new file mode 100644
index 00000000..f352902a
--- /dev/null
+++ b/components/upload/ProductPackageUploader.layout.test.tsx
@@ -0,0 +1,193 @@
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import ProductPackageUploader from '@/components/upload/ProductPackageUploader'
+
+const mockAddCategory = jest.fn()
+const mockAddScene = jest.fn()
+
+jest.mock('@/components/upload/category-handlers', () => ({
+  addCategory: (...args: unknown[]) => mockAddCategory(...args),
+  addScene: (...args: unknown[]) => mockAddScene(...args),
+}))
+
+jest.mock('@/components/upload/DetailImageSorter', () => ({
+  __esModule: true,
+  default: () => <div data-testid="detail-image-sorter" />,
+}))
+
+const defaultProps = {
+  onSuccess: jest.fn(),
+  onCancel: jest.fn(),
+  categories: [
+    { id: 'cat-1', name: '店铺A' },
+    { id: 'cat-2', name: '店铺B' },
+  ],
+  scenes: [
+    { id: 'scene-1', name: '场景A' },
+    { id: 'scene-2', name: '场景B' },
+  ],
+  platforms: [
+    { id: 'platform-1', name: '淘宝' },
+    { id: 'platform-2', name: '天猫' },
+  ],
+  productCategories: [
+    { id: 'pc-1', name: '沙发' },
+    { id: 'pc-2', name: '餐桌' },
+  ],
+  onRefreshCategories: jest.fn().mockResolvedValue(undefined),
+  onRefreshScenes: jest.fn().mockResolvedValue(undefined),
+}
+
+function installUsersFetch() {
+  const fetchMock = jest.fn((input: RequestInfo | URL) => {
+    const url = String(input)
+    if (url === '/api/users/list') {
+      return Promise.resolve({
+        ok: true,
+        json: async () => [
+          { id: 'requester-1', username: 'operator-a', displayName: '运营甲' },
+          { id: 'requester-2', username: 'operator-b', displayName: '运营乙' },
+        ],
+      })
+    }
+    return Promise.reject(new Error(`测试未处理请求：${url}`))
+  })
+  global.fetch = fetchMock as unknown as typeof fetch
+  return fetchMock
+}
+
+async function renderUploader() {
+  render(<ProductPackageUploader {...defaultProps} />)
+  await screen.findByPlaceholderText('搜索发起本次出图需求的运营人员')
+}
+
+describe('ProductPackageUploader compact layout interactions', () => {
+  const originalFetch = global.fetch
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    installUsersFetch()
+
+    mockAddCategory.mockImplementation(async (
+      name: string,
+      onSuccess?: (category: { id: string; name: string }) => Promise<void> | void,
+    ) => {
+      await onSuccess?.({ id: 'cat-new', name })
+    })
+    mockAddScene.mockImplementation(async (
+      name: string,
+      onSuccess?: (scene: { id: string; name: string }) => Promise<void> | void,
+    ) => {
+      await onSuccess?.({ id: 'scene-new', name })
+    })
+  })
+
+  afterAll(() => {
+    global.fetch = originalFetch
+  })
+
+  it('需求运营标签可访问，真实 UploadForm 的 SPU 品类 店铺 场景 平台字段仍可用', async () => {
+    const user = userEvent.setup()
+    await renderUploader()
+
+    const requester = screen.getByLabelText(/需求运营/) as HTMLInputElement
+    expect(requester).toBeInTheDocument()
+    await user.click(requester)
+    await user.type(requester, '运营甲')
+    await user.click(screen.getByRole('option', { name: /运营甲/ }))
+    expect(requester).toHaveValue('运营甲 (operator-a)')
+
+    const productModel = screen.getByLabelText(/SPU型号/) as HTMLInputElement
+    await user.type(productModel, 'df-a3dz0008')
+    expect(productModel).toHaveValue('DF-A3DZ0008')
+
+    await user.selectOptions(screen.getByLabelText(/品类/), '沙发')
+    expect(screen.getByLabelText(/品类/)).toHaveValue('沙发')
+
+    await user.selectOptions(screen.getByLabelText(/使用店铺/), '店铺B')
+    expect(screen.getByLabelText(/使用店铺/)).toHaveValue('店铺B')
+
+    await user.selectOptions(screen.getByLabelText(/场景类别/), '场景A')
+    expect(screen.getByLabelText(/场景类别/)).toHaveValue('场景A')
+
+    await user.selectOptions(screen.getByLabelText(/平台分类/), '淘宝')
+    expect(screen.getByLabelText(/平台分类/)).toHaveValue('淘宝')
+  })
+
+  it('内联新建店铺和场景输入可打开、添加、取消', async () => {
+    const user = userEvent.setup()
+    await renderUploader()
+
+    await user.click(screen.getByRole('button', { name: '新建店铺' }))
+    const categoryInput = screen.getByPlaceholderText('输入新店铺名称')
+    await user.type(categoryInput, '新店铺C')
+    await user.click(screen.getByRole('button', { name: '添加' }))
+
+    await waitFor(() => expect(mockAddCategory).toHaveBeenCalled())
+    expect(mockAddCategory).toHaveBeenCalledWith(
+      '新店铺C',
+      expect.any(Function),
+      expect.any(Function),
+    )
+    expect(defaultProps.onRefreshCategories).toHaveBeenCalled()
+    expect(screen.queryByPlaceholderText('输入新店铺名称')).not.toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: '新建场景' }))
+    const sceneInput = screen.getByPlaceholderText('输入新场景类别')
+    await user.type(sceneInput, '新场景C')
+    await user.click(within(sceneInput.parentElement as HTMLElement).getByRole('button', { name: '取消' }))
+
+    expect(screen.queryByPlaceholderText('输入新场景类别')).not.toBeInTheDocument()
+    expect(mockAddScene).not.toHaveBeenCalled()
+  })
+
+  it('新品只能公开，优化时才可选私密，切回新品会恢复公开', async () => {
+    const user = userEvent.setup()
+    await renderUploader()
+
+    const demandType = screen.getByLabelText(/需求类型/) as HTMLSelectElement
+    const visibility = screen.getByLabelText(/可见性/) as HTMLSelectElement
+    const privateOption = screen.getByRole('option', { name: '私密' }) as HTMLOptionElement
+
+    expect(demandType.value).toBe('新品')
+    expect(visibility.value).toBe('public')
+    expect(privateOption.disabled).toBe(true)
+    expect(screen.getByText(/新品固定公开，仅优化需求支持私密/)).toBeInTheDocument()
+
+    await user.selectOptions(demandType, '优化')
+    expect(privateOption.disabled).toBe(false)
+    expect(screen.getByText('私密仅所选需求运营及已授权权限组可访问，上传人不自动放行。')).toBeInTheDocument()
+
+    await user.selectOptions(visibility, 'private')
+    expect(visibility.value).toBe('private')
+
+    await user.selectOptions(demandType, '新品')
+    expect(visibility.value).toBe('public')
+    expect(privateOption.disabled).toBe(true)
+  })
+
+  it('四类文件选择入口都存在', async () => {
+    await renderUploader()
+
+    expect(screen.getByLabelText('主图')).toBeInTheDocument()
+    expect(screen.getByLabelText('SKU图')).toBeInTheDocument()
+    expect(screen.getByLabelText('详情图')).toBeInTheDocument()
+    expect(screen.getByLabelText(/PSD源文件/)).toBeInTheDocument()
+  })
+
+  it('校验失败时将错误提示滚动到可见位置', async () => {
+    const original = HTMLElement.prototype.scrollIntoView
+    const scrollIntoView = jest.fn()
+    HTMLElement.prototype.scrollIntoView = scrollIntoView
+    try {
+      const user = userEvent.setup()
+      await renderUploader()
+      await user.click(screen.getByRole('button', { name: '提交', exact: true }))
+      expect(screen.getByRole('alert')).toHaveTextContent('请选择需求运营人员')
+      expect(scrollIntoView).toHaveBeenCalledWith({ block: 'nearest' })
+    } finally {
+      HTMLElement.prototype.scrollIntoView = original
+    }
+  })
+})
diff --git a/components/upload/ProductPackageUploader.module.css b/components/upload/ProductPackageUploader.module.css
new file mode 100644
index 00000000..fee9b0f2
--- /dev/null
+++ b/components/upload/ProductPackageUploader.module.css
@@ -0,0 +1,82 @@
+/* 紧凑样式只作用于任务详情，不改变其它上传类型的共享字段。 */
+.metadata > div,
+.metadata :is(input[type='text'], select),
+.productFields > div {
+  min-width: 0;
+}
+
+.metadata label {
+  margin-bottom: 4px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.metadata :is(input[type='text'], select) {
+  min-height: 44px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.metadata input[role='combobox'] {
+  padding-right: 80px;
+}
+
+.productFields button {
+  min-height: 44px;
+  height: auto;
+  flex-shrink: 0;
+  padding: 8px 12px;
+  white-space: nowrap;
+}
+
+.references > div {
+  gap: 12px 16px;
+}
+
+.fileButton {
+  min-height: 44px;
+  flex-shrink: 0;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: #f3f4f6;
+  color: #374151;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.fileButton:hover {
+  background: #e5e7eb;
+}
+
+.fileButton:focus-visible {
+  outline: 2px solid #1a1c1d;
+  outline-offset: 2px;
+}
+
+.fileButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.feedback {
+  scroll-margin-block: 12px 88px;
+}
+
+@media (min-width: 640px) {
+  .references > div {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .metadata :is(input[type='text'], select) {
+    min-height: 40px;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .productFields button,
+  .fileButton {
+    min-height: 40px;
+  }
+}
diff --git a/components/upload/ProductPackageUploader.tsx b/components/upload/ProductPackageUploader.tsx
index d5e4df3f..1c2f0212 100644
--- a/components/upload/ProductPackageUploader.tsx
+++ b/components/upload/ProductPackageUploader.tsx
@@ -7,6 +7,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import DetailImageSorter from './DetailImageSorter';
 import UploadForm from './UploadForm';
+import styles from './ProductPackageUploader.module.css';
 import { addCategory, addScene } from './category-handlers';
 import SearchableUserSelect from '@/components/SearchableUserSelect';
 import {
@@ -54,7 +55,7 @@ const TASK_DETAIL_SOURCE_FILE_LABEL = '.psd、.psb、.tif、.tiff、.zip、.rar
 const TASK_DETAIL_BROWSER_IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp'] as const;
 const TASK_DETAIL_BROWSER_IMAGE_ACCEPT = 'image/jpeg,image/png,image/gif,image/webp';
 const TASK_DETAIL_SELECTION_THUMBNAIL_TIMEOUT_MS = 60_000;
-const TASK_DETAIL_METADATA_FIELD_CLASS_NAME = 'w-full rounded-apple border border-gray-300 bg-white px-4 py-2 text-gray-900 outline-none focus:border-gray-900 focus:ring-2 focus:ring-gray-200 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500';
+const TASK_DETAIL_METADATA_FIELD_CLASS_NAME = 'w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 outline-none focus:border-gray-900 focus:ring-2 focus:ring-gray-200 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500';
 
 function splitEmptyFiles(files: FileList | File[] | null): {
   validFiles: File[];
@@ -404,6 +405,7 @@ export default function ProductPackageUploader({
   const skuInputRef = useRef<HTMLInputElement>(null);
   const detailInputRef = useRef<HTMLInputElement>(null);
   const psdInputRef = useRef<HTMLInputElement>(null);
+  const errorRef = useRef<HTMLDivElement>(null);
   const mountedRef = useRef(true);
   const cancelledRef = useRef(false);
   const uploadStopRef = useRef(false);
@@ -427,6 +429,10 @@ export default function ProductPackageUploader({
     psd: [],
   });
 
+  useEffect(() => {
+    if (error) errorRef.current?.scrollIntoView?.({ block: 'nearest' });
+  }, [error]);
+
   const abortActiveBrowserPreview = useCallback(() => {
     const controller = browserPreviewAbortRef.current;
     if (controller) controller.abort();
@@ -1387,7 +1393,9 @@ export default function ProductPackageUploader({
   };
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-4">
+      <div className={`${styles.metadata} space-y-3`}>
+      <div className={styles.references}>
       <TaskReferenceFields
         idPrefix="product-package"
         taskNo={taskNo}
@@ -1396,12 +1404,15 @@ export default function ProductPackageUploader({
         onDingtalkApprovalNoChange={setDingtalkApprovalNo}
         disabled={uploading}
       />
+      </div>
 
-      <div>
-        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+      <div className="grid gap-x-4 gap-y-3 sm:grid-cols-2">
+      <div className="min-w-0">
+        <label htmlFor="task-detail-requester" className="mb-1 block text-sm font-medium text-gray-700">
           需求运营 <span className="text-red-500">*</span>
         </label>
         <SearchableUserSelect
+          id="task-detail-requester"
           users={users}
           value={taskDetailRequesterUserId}
           onChange={(userId) => {
@@ -1412,12 +1423,34 @@ export default function ProductPackageUploader({
           required
           disabled={uploading || usersLoading || Boolean(usersLoadError)}
         />
-        <p className={`mt-1 text-xs ${usersLoadError ? 'text-red-500' : 'text-gray-500 dark:text-gray-400'}`}>
+        <p className={`mt-1 text-xs leading-5 ${usersLoadError ? 'text-red-500' : 'text-gray-500'}`}>
           {usersLoadError || '记录发起本次出图需求的运营人员，与素材上传人可以不同。'}
         </p>
       </div>
+      <div className="min-w-0">
+        <label htmlFor="task-detail-source-type" className="mb-1 block text-sm font-medium text-gray-700">
+          出图方式 <span className="text-red-500">*</span>
+        </label>
+        <select
+          id="task-detail-source-type"
+          value={taskDetailSourceType}
+          onChange={(e) => setTaskDetailSourceType(e.target.value as TaskDetailSourceType | '')}
+          disabled={uploading}
+          required
+          aria-required="true"
+          aria-invalid={Boolean(error && !taskDetailSourceType)}
+          className={TASK_DETAIL_METADATA_FIELD_CLASS_NAME}
+        >
+          <option value="">请选择出图方式</option>
+          {TASK_DETAIL_SOURCE_TYPE_OPTIONS.map((option) => (
+            <option key={option} value={option}>{option}</option>
+          ))}
+        </select>
+      </div>
+      </div>
 
       {/* 使用 UploadForm 组件显示 SPU、店铺、场景字段 */}
+      <div className={`${styles.productFields} grid gap-x-4 gap-y-3 sm:grid-cols-2`}>
       <UploadForm
         materialType="任务-详情"
         productModel={productModel}
@@ -1440,11 +1473,12 @@ export default function ProductPackageUploader({
         onAddCategory={handleAddNewCategory}
         onAddScene={handleAddNewScene}
       />
+      </div>
 
-      <div className="space-y-4">
-        <div className="grid gap-4 sm:grid-cols-2">
+      <div className="space-y-1">
+        <div className="grid gap-x-4 gap-y-3 sm:grid-cols-2">
           <div>
-            <label htmlFor="task-detail-demand-type" className="mb-2 block text-sm font-medium text-gray-700">
+            <label htmlFor="task-detail-demand-type" className="mb-1 block text-sm font-medium text-gray-700">
               需求类型 <span className="text-red-500">*</span>
             </label>
             <select
@@ -1465,7 +1499,7 @@ export default function ProductPackageUploader({
           </div>
 
           <div>
-            <label htmlFor="task-detail-visibility" className="mb-2 block text-sm font-medium text-gray-700">
+            <label htmlFor="task-detail-visibility" className="mb-1 block text-sm font-medium text-gray-700">
               可见性
             </label>
             <select
@@ -1482,41 +1516,21 @@ export default function ProductPackageUploader({
           </div>
         </div>
 
-        <p id="task-detail-visibility-hint" className="text-xs text-gray-500">
+        <p id="task-detail-visibility-hint" className="text-xs leading-5 text-gray-500">
           {taskDetailPrivacyHint}
         </p>
-
-        <div>
-          <label htmlFor="task-detail-source-type" className="mb-2 block text-sm font-medium text-gray-700">
-            出图方式 <span className="text-red-500">*</span>
-          </label>
-          <select
-            id="task-detail-source-type"
-            value={taskDetailSourceType}
-            onChange={(e) => setTaskDetailSourceType(e.target.value as TaskDetailSourceType | '')}
-            disabled={uploading}
-            required
-            aria-required="true"
-            aria-invalid={Boolean(error && !taskDetailSourceType)}
-            className={TASK_DETAIL_METADATA_FIELD_CLASS_NAME}
-          >
-            <option value="">请选择出图方式</option>
-            {TASK_DETAIL_SOURCE_TYPE_OPTIONS.map((option) => (
-              <option key={option} value={option}>
-                {option}
-              </option>
-            ))}
-          </select>
-        </div>
+      </div>
       </div>
 
-      <p className="text-xs text-gray-400 dark:text-gray-500">
+      <div className="space-y-3 border-t border-gray-200 pt-3">
+      <p className="text-xs leading-5 text-gray-500">
         同时上传主图 + SKU 图 + 详情图时自动标记为整套
       </p>
 
+      <div className="grid gap-4 sm:grid-cols-2">
       {/* 主图上传 */}
-      <div>
-        <label htmlFor="main-images-input" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+      <div className={`min-w-0 ${mainImages.length || skuImages.length ? 'sm:col-span-2' : ''}`}>
+        <label htmlFor="main-images-input" className="mb-1 block text-sm font-medium text-gray-700">
           主图
         </label>
         {/* biome-ignore lint/a11y/noStaticElementInteractions: 拖拽上传区域需要使用 drag/drop 事件 */}
@@ -1525,12 +1539,12 @@ export default function ProductPackageUploader({
           tabIndex={uploading ? -1 : 0}
           aria-disabled={uploading}
           aria-label="选择主图文件"
-          className={`border-2 border-dashed rounded-apple p-4 transition-colors ${
+          className={`rounded-lg border border-dashed p-2 transition-colors ${
             uploading ? 'cursor-not-allowed opacity-60' : ''
           } ${
             isMainDragging
-              ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-              : 'border-gray-300 dark:border-gray-600'
+              ? 'border-blue-500 bg-blue-50'
+              : 'border-gray-300'
           }`}
           onDragEnter={(e) => handleDragEnter(e, setIsMainDragging)}
           onDragLeave={(e) => handleDragLeave(e, setIsMainDragging)}
@@ -1551,7 +1565,7 @@ export default function ProductPackageUploader({
           className="hidden"
           disabled={uploading}
         />
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+        <div className={mainImages.length ? 'grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5' : ''}>
           {mainImages.map((img) => (
             <div key={img.id} className="relative group">
               <div className="relative w-full h-24 rounded-apple overflow-hidden border-2 border-gray-200 dark:border-gray-600">
@@ -1570,26 +1584,28 @@ export default function ProductPackageUploader({
           ))}
           <button
             type="button"
+            aria-label="添加主图"
             onClick={() => mainInputRef.current?.click()}
           disabled={uploading}
-          className="group w-full h-24 rounded-apple bg-gray-100 dark:bg-gray-700 border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center hover:border-gray-400 dark:hover:border-gray-500 transition-colors disabled:opacity-50"
+          className={`group flex w-full items-center justify-center gap-2 rounded-lg bg-gray-50 text-sm text-gray-600 transition-colors hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-900 disabled:opacity-50 ${mainImages.length ? 'h-24 border border-dashed border-gray-300' : 'min-h-11 sm:min-h-10'}`}
           >
-            <svg className="w-8 h-8 text-gray-400 group-hover:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg aria-hidden="true" className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <title>添加主图</title>
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
             </svg>
+            {mainImages.length === 0 && <span>添加主图</span>}
           </button>
         </div>
         </div>
       </div>
 
       {/* SKU图上传 */}
-      <div>
-        <div className="flex items-center justify-between mb-2">
-          <label htmlFor="sku-images-input" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+      <div className={`min-w-0 ${mainImages.length || skuImages.length ? 'sm:col-span-2' : ''}`}>
+        <div className="mb-1 flex min-h-5 flex-wrap items-center justify-between gap-x-3 gap-y-1">
+          <label htmlFor="sku-images-input" className="block text-sm font-medium text-gray-700">
             SKU图
           </label>
-          <label className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 cursor-pointer select-none">
+          <label className="flex min-h-11 cursor-pointer select-none items-center gap-2 text-sm leading-5 text-gray-600 sm:min-h-5">
             <input
               type="checkbox"
               checked={noBarcodes}
@@ -1606,12 +1622,12 @@ export default function ProductPackageUploader({
           tabIndex={uploading ? -1 : 0}
           aria-disabled={uploading}
           aria-label="选择 SKU 图文件"
-          className={`border-2 border-dashed rounded-apple p-4 transition-colors ${
+          className={`rounded-lg border border-dashed p-2 transition-colors ${
             uploading ? 'cursor-not-allowed opacity-60' : ''
           } ${
             isSkuDragging
-              ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-              : 'border-gray-300 dark:border-gray-600'
+              ? 'border-blue-500 bg-blue-50'
+              : 'border-gray-300'
           }`}
           onDragEnter={(e) => handleDragEnter(e, setIsSkuDragging)}
           onDragLeave={(e) => handleDragLeave(e, setIsSkuDragging)}
@@ -1632,7 +1648,7 @@ export default function ProductPackageUploader({
           className="hidden"
           disabled={uploading}
         />
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+        <div className={skuImages.length ? 'grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5' : ''}>
           {skuImages.map((img) => (
             <div key={img.id} className="relative group space-y-1.5 rounded-apple border border-gray-200 bg-white p-2 dark:border-gray-700 dark:bg-gray-800/80">
               <div className="relative w-full h-20 rounded-apple overflow-hidden border border-gray-200 dark:border-gray-600">
@@ -1669,22 +1685,24 @@ export default function ProductPackageUploader({
           ))}
           <button
             type="button"
+            aria-label="添加SKU图"
             onClick={() => skuInputRef.current?.click()}
           disabled={uploading}
-          className="group w-full h-20 rounded-apple bg-gray-100 dark:bg-gray-700 border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center hover:border-gray-400 dark:hover:border-gray-500 transition-colors disabled:opacity-50"
+          className={`group flex w-full items-center justify-center gap-2 rounded-lg bg-gray-50 text-sm text-gray-600 transition-colors hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-900 disabled:opacity-50 ${skuImages.length ? 'h-20 border border-dashed border-gray-300' : 'min-h-11 sm:min-h-10'}`}
           >
-            <svg className="w-8 h-8 text-gray-400 group-hover:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg aria-hidden="true" className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <title>添加SKU图</title>
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
             </svg>
+            {skuImages.length === 0 && <span>添加SKU图</span>}
           </button>
         </div>
         </div>
       </div>
 
       {/* 详情图上传 */}
-      <div>
-        <label htmlFor="detail-images-input" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+      <div className="min-w-0 sm:col-span-2">
+        <label htmlFor="detail-images-input" className="mb-1 block text-sm font-medium text-gray-700">
           详情图
         </label>
         {/* biome-ignore lint/a11y/noStaticElementInteractions: 拖拽上传区域需要使用 drag/drop 事件 */}
@@ -1693,12 +1711,12 @@ export default function ProductPackageUploader({
           tabIndex={uploading ? -1 : 0}
           aria-disabled={uploading}
           aria-label="选择详情图文件"
-          className={`border-2 border-dashed rounded-apple p-4 transition-colors ${
+          className={`rounded-lg border border-dashed p-2 transition-colors ${
             uploading ? 'cursor-not-allowed opacity-60' : ''
           } ${
             isDetailDragging
-              ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-              : 'border-gray-300 dark:border-gray-600'
+              ? 'border-blue-500 bg-blue-50'
+              : 'border-gray-300'
           }`}
           onDragEnter={(e) => handleDragEnter(e, setIsDetailDragging)}
           onDragLeave={(e) => handleDragLeave(e, setIsDetailDragging)}
@@ -1720,16 +1738,16 @@ export default function ProductPackageUploader({
             disabled={uploading}
           />
           {/* 上传按钮 */}
-          <div className="flex items-center space-x-3 mb-3">
+          <div className={`flex flex-wrap items-center gap-x-3 gap-y-1 ${detailImages.length ? 'mb-3' : ''}`}>
             <button
               onClick={() => detailInputRef.current?.click()}
-              className="btn-secondary text-sm"
+              className={styles.fileButton}
               disabled={uploading}
               type="button"
             >
               {detailImages.length > 0 ? '继续添加' : '选择详情图'}
             </button>
-            <span className="text-xs text-gray-400">JPG / PNG / GIF / WebP，支持拖拽</span>
+            <span className="text-xs leading-5 text-gray-500">JPG / PNG / GIF / WebP，支持拖拽</span>
           </div>
 
           {/* 详情图排序组件 */}
@@ -1745,8 +1763,8 @@ export default function ProductPackageUploader({
       </div>
 
       {/* PSD上传 */}
-      <div>
-        <label htmlFor="psd-files-input" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+      <div className="min-w-0 sm:col-span-2">
+        <label htmlFor="psd-files-input" className="mb-1 block text-sm font-medium text-gray-700">
           PSD源文件（可选）
         </label>
         {/* biome-ignore lint/a11y/noStaticElementInteractions: 拖拽上传区域需要使用 drag/drop 事件 */}
@@ -1755,12 +1773,12 @@ export default function ProductPackageUploader({
           tabIndex={uploading ? -1 : 0}
           aria-disabled={uploading}
           aria-label="选择 PSD 源文件"
-          className={`border-2 border-dashed rounded-apple p-4 transition-colors ${
+          className={`rounded-lg border border-dashed p-2 transition-colors ${
             uploading ? 'cursor-not-allowed opacity-60' : ''
           } ${
             isPsdDragging
-              ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-              : 'border-gray-300 dark:border-gray-600'
+              ? 'border-blue-500 bg-blue-50'
+              : 'border-gray-300'
           }`}
           onDragEnter={(e) => handleDragEnter(e, setIsPsdDragging)}
           onDragLeave={(e) => handleDragLeave(e, setIsPsdDragging)}
@@ -1784,25 +1802,25 @@ export default function ProductPackageUploader({
             disabled={uploading}
           />
           {/* 上传按钮 */}
-          <div className="flex items-center space-x-3">
+          <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2">
             <button
               onClick={() => psdInputRef.current?.click()}
-              className="btn-secondary text-sm"
+              className={styles.fileButton}
               disabled={uploading}
               type="button"
             >
               {psdFiles.length > 0 ? `继续添加 (${psdFiles.length}个)` : '选择源文件'}
             </button>
-            <span className="text-xs text-gray-400">{TASK_DETAIL_SOURCE_FILE_LABEL}</span>
+            <span className="min-w-0 break-words text-xs leading-5 text-gray-500">{TASK_DETAIL_SOURCE_FILE_LABEL}</span>
             {psdFiles.length > 0 && (
-              <div className="flex flex-wrap gap-1.5 ml-2">
+              <div className="flex w-full min-w-0 flex-wrap gap-1.5">
                 {psdFiles.map((psdFile) => (
-                  <span key={psdFile.id} className="inline-flex items-center gap-1 px-2 py-0.5 bg-gray-100 dark:bg-gray-700 rounded text-xs text-gray-700 dark:text-gray-300">
-                    {psdFile.file.name}
+                  <span key={psdFile.id} className="inline-flex max-w-full items-center gap-1 rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-700">
+                    <span className="min-w-0 break-all">{psdFile.file.name}</span>
                     <button
                       onClick={() => handleRemoveFile(psdFile.id, 'psd')}
                       aria-label={`删除源文件 ${psdFile.file.name}`}
-                      className="text-red-400 hover:text-red-600"
+                      className="flex h-8 w-8 shrink-0 items-center justify-center text-red-500 hover:text-red-600"
                       disabled={uploading}
                       type="button"
                     >
@@ -1815,10 +1833,12 @@ export default function ProductPackageUploader({
           </div>
         </div>
       </div>
+      </div>
+      </div>
 
       {/* 错误提示 */}
       {error && (
-        <div role="alert" aria-live="assertive" className="break-words p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-apple text-red-600 dark:text-red-400 text-sm">
+        <div ref={errorRef} role="alert" aria-live="assertive" className={`${styles.feedback} break-words rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600`}>
           {error}
         </div>
       )}
@@ -1849,7 +1869,7 @@ export default function ProductPackageUploader({
       )}
 
       {/* 操作按钮 */}
-        <div className="sticky bottom-0 -mx-4 -mb-4 border-t border-gray-200 bg-white/95 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-white/80 dark:border-gray-700 dark:bg-gray-800/95 dark:supports-[backdrop-filter]:bg-gray-800/80">
+        <div className="sticky bottom-0 -mx-1 border-t border-gray-200 bg-white px-1 py-2">
         <div className="flex justify-end space-x-3">
         <button
           onClick={uploading ? handleCancelUpload : onCancel}