完成list

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@fluentui/react-components": "^9.55.1",
+    "@fluentui/react-icons": "^2.0.264",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@fluentui/react-components':
         specifier: ^9.55.1
         version: 9.55.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)
+      '@fluentui/react-icons':
+        specifier: ^2.0.264
+        version: 2.0.264(react@18.3.1)
       '@testing-library/jest-dom':
         specifier: ^5.17.0
         version: 5.17.0

src/component/List.js

@@ -1,46 +1,173 @@
 import React from "react";
-import { Stack, Text, DetailsList } from "@fluentui/react";
+import {
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
+} from "@fluentui/react-icons";
+import {
+  Avatar,
+  DataGridBody,
+  DataGridRow,
+  DataGrid,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridCell,
+  TableCellLayout,
+  createTableColumn,
+} from "@fluentui/react-components";
 
-const List = () => {
-  // 定义列配置
-  const columns = [
-    {
-      key: 'name',
-      name: '姓名',
-      fieldName: 'name',
-      minWidth: 100,
-    },
-    {
-      key: 'age',
-      name: '年龄',
-      fieldName: 'age',
-      minWidth: 70,
-    },
-    {
-      key: 'city',
-      name: '城市',
-      fieldName: 'city',
-      minWidth: 100,
-    }
-  ];
+const items = [
+  {
+    file: { label: "Meeting notes", icon: <DocumentRegular /> },
+    author: { label: "Max Mustermann", status: "available" },
+    lastUpdated: { label: "7h ago", timestamp: 1 },
+    lastUpdate: {
+      label: "You edited this",
+      icon: <EditRegular />,
+    },
+  },
+  {
+    file: { label: "Thursday presentation", icon: <FolderRegular /> },
+    author: { label: "Erika Mustermann", status: "busy" },
+    lastUpdated: { label: "Yesterday at 1:45 PM", timestamp: 2 },
+    lastUpdate: {
+      label: "You recently opened this",
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: "Training recording", icon: <VideoRegular /> },
+    author: { label: "John Doe", status: "away" },
+    lastUpdated: { label: "Yesterday at 1:45 PM", timestamp: 2 },
+    lastUpdate: {
+      label: "You recently opened this",
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: "Purchase order", icon: <DocumentPdfRegular /> },
+    author: { label: "Jane Doe", status: "offline" },
+    lastUpdated: { label: "Tue at 9:30 AM", timestamp: 3 },
+    lastUpdate: {
+      label: "You shared this in a Teams chat",
+      icon: <PeopleRegular />,
+    },
+  },
+];
+
+const columns = [
+  createTableColumn({
+    columnId: "file",
+    compare: (a, b) => {
+      return a.file.label.localeCompare(b.file.label);
+    },
+    renderHeaderCell: () => {
+      return "File";
+    },
+    renderCell: (item) => {
+      return (
+        <TableCellLayout media={item.file.icon}>
+          {item.file.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn({
+    columnId: "author",
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+    renderHeaderCell: () => {
+      return "Author";
+    },
+    renderCell: (item) => {
+      return (
+        <TableCellLayout
+          media={
+            <Avatar
+              aria-label={item.author.label}
+              name={item.author.label}
+              badge={{ status: item.author.status }}
+            />
+          }
+        >
+          {item.author.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn({
+    columnId: "lastUpdated",
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return "Last updated";
+    },
+
+    renderCell: (item) => {
+      return item.lastUpdated.label;
+    },
+  }),
+  createTableColumn({
+    columnId: "lastUpdate",
+    compare: (a, b) => {
+      return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+    },
+    renderHeaderCell: () => {
+      return "Last update";
+    },
+    renderCell: (item) => {
+      return (
+        <TableCellLayout media={item.lastUpdate.icon}>
+          {item.lastUpdate.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+];
 
-  // 示例数据
-  const items = [
-    { id: 1, name: '张三', age: 25, city: '北京' },
-    { id: 2, name: '李四', age: 30, city: '上海' },
-    { id: 3, name: '王五', age: 28, city: '广州' },
-  ];
+const List = () => {
+  const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
 
   return (
-    <Stack>
-      <Text variant="xxLarge" style={{ marginBottom: 20 }}>用户列表</Text>
-      <DetailsList
-        items={items}
-        columns={columns}
-        selectionMode={0}
-        compact={false}
-      />
-    </Stack>
+    <DataGrid
+      items={items}
+      columns={columns}
+      selectionMode="multiselect"
+      defaultSelectedItems={defaultSelectedItems}
+      style={{ minWidth: "550px" }}
+    >
+      <DataGridHeader>
+        <DataGridRow
+          selectionCell={{
+            checkboxIndicator: { "aria-label": "Select all rows" },
+          }}
+        >
+          {({ renderHeaderCell }) => (
+            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+          )}
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody>
+        {({ item, rowId }) => (
+          <DataGridRow
+            key={rowId}
+            selectionCell={{
+              checkboxIndicator: { "aria-label": "Select row" },
+            }}
+          >
+            {({ renderCell }) => (
+              <DataGridCell>{renderCell(item)}</DataGridCell>
+            )}
+          </DataGridRow>
+        )}
+      </DataGridBody>
+    </DataGrid>
   );
 };
 

src/index.js

@@ -3,12 +3,13 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { FluentProvider, webLightTheme } from '@fluentui/react-components';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  <FluentProvider theme={webLightTheme}>
     <App />
-  </React.StrictMode>
+  </FluentProvider>,
 );
 
 // If you want to start measuring performance in your app, pass a function