Merge branch 'master' of http://787255.xyz:4003/ydm/zl365

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
+package-lock.json
+pnpm-lock.yaml

src/component/List.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import {
   FolderRegular,
   EditRegular,
@@ -7,8 +7,10 @@ import {
   PeopleRegular,
   DocumentPdfRegular,
   VideoRegular,
+  ChevronDown16Filled,
 } from "@fluentui/react-icons";
 import {
+  PresenceBadgeStatus,
   Avatar,
   DataGridBody,
   DataGridRow,
@@ -17,114 +19,133 @@ import {
   DataGridHeaderCell,
   DataGridCell,
   TableCellLayout,
+  TableColumnDefinition,
   createTableColumn,
+  Button,
+  Menu,
+  MenuTrigger,
+  MenuList,
+  MenuItem,
+  MenuPopover,
+  Text
 } from "@fluentui/react-components";
 
+
 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 />,
-    },
+    姓名: { label: "张三", icon: <DocumentRegular /> },
+    性别: { label: "男", status: "available" },
+    年龄: { label: "30岁", timestamp: 1 },
+    最后在线时间: { label: "2024/11/6 13:50" },
   },
   {
-    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 />,
-    },
+    姓名: { label: "李四", icon: <FolderRegular /> },
+    性别: { label: "女", status: "busy" },
+    年龄: { label: "20", timestamp: 2 },
+    最后在线时间: { label: "2024/11/6 13:50" },
   },
   {
-    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 />,
-    },
+    姓名: { label: "王五", icon: <VideoRegular /> },
+    性别: { label: "男", status: "away" },
+    年龄: { label: "25", timestamp: 2 },
+    最后在线时间: { label: "2024/11/6 13:50" },
   },
   {
-    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 />,
-    },
+    姓名: { label: "田六", icon: <DocumentPdfRegular /> },
+    性别: { label: "男", status: "offline" },
+    年龄: { label: "33", timestamp: 3 },
+    最后在线时间: { label: "2024/11/6 13:50" },
   },
 ];
 
 const columns = [
   createTableColumn({
-    columnId: "file",
+    columnId: "姓名",
     compare: (a, b) => {
-      return a.file.label.localeCompare(b.file.label);
+      return a.姓名.label.localeCompare(b.姓名.label);
     },
     renderHeaderCell: () => {
-      return "File";
+      return ("姓名");
     },
     renderCell: (item) => {
       return (
-        <TableCellLayout media={item.file.icon}>
-          {item.file.label}
+        <TableCellLayout media={item.姓名.icon}>
+          {item.姓名.label}
         </TableCellLayout>
       );
     },
   }),
   createTableColumn({
-    columnId: "author",
+    columnId: "性别",
     compare: (a, b) => {
-      return a.author.label.localeCompare(b.author.label);
+      return a.性别.label.localeCompare(b.性别.label);
     },
     renderHeaderCell: () => {
-      return "Author";
-    },
-    renderCell: (item) => {
       return (
         <TableCellLayout
-          media={
-            <Avatar
-              aria-label={item.author.label}
-              name={item.author.label}
-              badge={{ status: item.author.status }}
-            />
-          }
+          media={<VideoRegular />}
         >
-          {item.author.label}
+          性别
+          <Menu>
+            <MenuTrigger disableButtonEnhancement>
+            <Button appearance="subtle" icon={<ChevronDown16Filled />}></Button>
+            </MenuTrigger>
+
+            <MenuPopover>
+              <MenuList>
+                <MenuItem>New </MenuItem>
+                <MenuItem>New Window</MenuItem>
+                <MenuItem disabled>Open File</MenuItem>
+                <MenuItem>Open Folder</MenuItem>
+              </MenuList>
+            </MenuPopover>
+          </Menu>
+          {/* <Button appearance="subtle" icon={<VideoRegular />}></Button> */}
         </TableCellLayout>
       );
     },
+    renderCell: (item) => {
+      return item.性别.label;
+      // return (
+      //   <TableCellLayout
+      //     media={
+      //       <Avatar
+      //         aria-label={item.性别.label}
+      //         name={item.性别.label}
+      //         badge={{ status: item.性别.status }}
+      //       />
+      //     }
+      //   >
+      //     {item.性别.label}
+      //   </TableCellLayout>
+      // );
+    },
   }),
   createTableColumn({
-    columnId: "lastUpdated",
+    columnId: "年龄",
     compare: (a, b) => {
-      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+      return a.年龄.timestamp - b.年龄.timestamp;
     },
     renderHeaderCell: () => {
-      return "Last updated";
+      return "年龄";
     },
 
     renderCell: (item) => {
-      return item.lastUpdated.label;
+      return item.年龄.label;
     },
   }),
   createTableColumn({
-    columnId: "lastUpdate",
+    columnId: "最后在线时间",
     compare: (a, b) => {
-      return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+      return a.最后在线时间.label.localeCompare(b.最后在线时间.label);
     },
     renderHeaderCell: () => {
-      return "Last update";
+      return "最后在线时间";
     },
     renderCell: (item) => {
       return (
-        <TableCellLayout media={item.lastUpdate.icon}>
-          {item.lastUpdate.label}
+        <TableCellLayout media={item.最后在线时间.icon}>
+          {item.最后在线时间.label}
         </TableCellLayout>
       );
     },
@@ -138,16 +159,15 @@ const List = () => {
     <DataGrid
       items={items}
       columns={columns}
-      selectionMode="multiselect"
+      selectionMode="single"
+      // sortable
+      subtleSelection
+      resizableColumns
       defaultSelectedItems={defaultSelectedItems}
       style={{ minWidth: "550px" }}
     >
       <DataGridHeader>
-        <DataGridRow
-          selectionCell={{
-            checkboxIndicator: { "aria-label": "Select all rows" },
-          }}
-        >
+        <DataGridRow>
           {({ renderHeaderCell }) => (
             <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
           )}
@@ -157,9 +177,7 @@ const List = () => {
         {({ item, rowId }) => (
           <DataGridRow
             key={rowId}
-            selectionCell={{
-              checkboxIndicator: { "aria-label": "Select row" },
-            }}
+            selectionCell={{ radioIndicator: { "aria-label": "Select row" } }}
           >
             {({ renderCell }) => (
               <DataGridCell>{renderCell(item)}</DataGridCell>
@@ -171,4 +189,4 @@ const List = () => {
   );
 };
 
-export default List;
+export default List;