refactor(DraggableList): remove antd List component (#9565)

* refactor(DraggableList): remove antd List component

The DraggableList component was unnecessarily wrapped in an antd List component. This change removes the antd List and replaces it with a standard div.

A `className` has been added to the new div for testing purposes. The `listProps` prop is preserved and its type is updated to `React.HTMLAttributes<HTMLDivElement>`.

The tests have been updated to reflect the new DOM structure, using a class selector instead of a data-testid. The antd mock has been removed, and the snapshot has been updated.

* test: fix

---------

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

src/renderer/src/components/DraggableList/__tests__/DraggableList.test.tsx

@@ -29,20 +29,6 @@ vi.mock('@hello-pangea/dnd', () => {
   }
 })
 
-// mock antd list 只做简单渲染
-vi.mock('antd', () => ({
-  __esModule: true,
-  List: ({ dataSource, renderItem }: any) => (
-    <div data-testid="virtual-list">
-      {dataSource.map((item: any, idx: number) => (
-        <div key={item.id || item} data-testid="virtual-list-item">
-          {renderItem(item, idx)}
-        </div>
-      ))}
-    </div>
-  )
-}))
-
 declare global {
   interface Window {
     triggerOnDragEnd: (result?: any, provided?: any) => void
@@ -73,14 +59,15 @@ describe('DraggableList', () => {
       const list = [{ id: 'a', name: 'A' }]
       const style = { background: 'red' }
       const listStyle = { color: 'blue' }
-      render(
+      const { container } = render(
         <DraggableList list={list} style={style} listStyle={listStyle} onUpdate={() => {}}>
           {(item) => <div data-testid="item">{item.name}</div>}
         </DraggableList>
       )
       // 检查 style 是否传递到外层容器
-      const virtualList = screen.getByTestId('virtual-list')
+      const listContainer = container.querySelector('.draggable-list-container')
-      expect(virtualList.parentElement).toHaveStyle({ background: 'red' })
+      expect(listContainer).not.toBeNull()
+      expect(listContainer?.parentElement).toHaveStyle({ background: 'red' })
     })
 
     it('should render nothing when list is empty', () => {

src/renderer/src/components/DraggableList/__tests__/__snapshots__/DraggableList.test.tsx.snap

@@ -10,56 +10,44 @@ exports[`DraggableList > snapshot > should match snapshot 1`] = `
     >
       <div>
         <div
-          data-testid="virtual-list"
+          class="draggable-list-container"
         >
           <div
-            data-testid="virtual-list-item"
+            data-testid="draggable-a-0"
           >
             <div
-              data-testid="draggable-a-0"
+              style="margin-bottom: 8px;"
             >
               <div
-                style="margin-bottom: 8px;"
+                data-testid="item"
               >
-                <div
+                A
-                  data-testid="item"
-                >
-                  A
-                </div>
               </div>
             </div>
           </div>
           <div
-            data-testid="virtual-list-item"
+            data-testid="draggable-b-1"
           >
             <div
-              data-testid="draggable-b-1"
+              style="margin-bottom: 8px;"
             >
               <div
-                style="margin-bottom: 8px;"
+                data-testid="item"
               >
-                <div
+                B
-                  data-testid="item"
-                >
-                  B
-                </div>
               </div>
             </div>
           </div>
           <div
-            data-testid="virtual-list-item"
+            data-testid="draggable-c-2"
           >
             <div
-              data-testid="draggable-c-2"
+              style="margin-bottom: 8px;"
             >
               <div
-                style="margin-bottom: 8px;"
+                data-testid="item"
               >
-                <div
+                C
-                  data-testid="item"
-                >
-                  C
-                </div>
               </div>
             </div>
           </div>

src/renderer/src/components/DraggableList/list.tsx

@@ -9,14 +9,13 @@ import {
   ResponderProvided
 } from '@hello-pangea/dnd'
 import { droppableReorder } from '@renderer/utils'
-import { List, ListProps } from 'antd'
+import { FC, HTMLAttributes } from 'react'
-import { FC } from 'react'
 
 interface Props<T> {
   list: T[]
   style?: React.CSSProperties
   listStyle?: React.CSSProperties
-  listProps?: ListProps<T>
+  listProps?: HTMLAttributes<HTMLDivElement>
   children: (item: T, index: number) => React.ReactNode
   onUpdate: (list: T[]) => void
   onDragStart?: OnDragStartResponder
@@ -52,10 +51,8 @@ const DraggableList: FC<Props<any>> = ({
       <Droppable droppableId="droppable" {...droppableProps}>
         {(provided) => (
           <div {...provided.droppableProps} ref={provided.innerRef} style={style}>
-            <List
+            <div {...listProps} className="draggable-list-container">
-              {...listProps}
+              {list.map((item, index) => {
-              dataSource={list}
-              renderItem={(item, index) => {
                 const id = item.id || item
                 return (
                   <Draggable key={`draggable_${id}_${index}`} draggableId={id} index={index}>
@@ -74,8 +71,8 @@ const DraggableList: FC<Props<any>> = ({
                     )}
                   </Draggable>
                 )
-              }}
+              })}
-            />
+            </div>
             {provided.placeholder}
           </div>
         )}