1

src/pages/listnew/index.js

@@ -1,16 +1,16 @@
 import * as React from "react";
+import { useState } from 'react'
 import {
   FolderRegular,
-  EditRegular,
-  OpenRegular,
   DocumentRegular,
-  PeopleRegular,
   DocumentPdfRegular,
   VideoRegular,
   ChevronDown16Filled,
   TextField16Regular,
   Calendar16Regular,
-  SelectAllOn16Regular
+  SelectAllOn16Regular,
+  MoreHorizontal16Filled,
+  CommentAdd16Regular
 } from "@fluentui/react-icons";
 import {
   PresenceBadgeStatus,
@@ -22,7 +22,6 @@ import {
   DataGridHeaderCell,
   DataGridCell,
   TableCellLayout,
-  TableColumnDefinition,
   createTableColumn,
   Button,
   Menu,
@@ -61,151 +60,172 @@ const items = [
   },
 ];
 
-const columns = [
-  createTableColumn({
-    columnId: "姓名",
-    compare: (a, b) => {
-      return a.姓名.label.localeCompare(b.姓名.label);
-    },
-    renderHeaderCell: () => {
-      return (
-        <TableCellLayout
-          media={<TextField16Regular />}
-        >
-          姓名
-          <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>
-        </TableCellLayout>
-      );
-    },
-    renderCell: (item) => {
-      return (
-        item.姓名.label
-      );
-    },
-  }),
-  createTableColumn({
-    columnId: "性别",
-    compare: (a, b) => {
-      return a.性别.label.localeCompare(b.性别.label);
-    },
-    renderHeaderCell: () => {
-      return (
-        <TableCellLayout
-          media={<SelectAllOn16Regular />}
-        >
-          性别
-          <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>
-        </TableCellLayout>
-      );
-    },
-    renderCell: (item) => {
-      return item.性别.label;
-    },
-  }),
-  createTableColumn({
-    columnId: "年龄",
-    compare: (a, b) => {
-      return a.年龄.timestamp - b.年龄.timestamp;
-    },
-    renderHeaderCell: () => {
-      return (
-        <TableCellLayout
-          media={<TextField16Regular />}
-        >
-          年龄
-          <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>
-        </TableCellLayout>
-      );
-    },
-
-    renderCell: (item) => {
-      return item.年龄.label;
-    },
-  }),
-  createTableColumn({
-    columnId: "最后在线时间",
-    compare: (a, b) => {
-      return a.最后在线时间.label.localeCompare(b.最后在线时间.label);
-    },
-    renderHeaderCell: () => {
-      return (
-        <TableCellLayout
-          media={<Calendar16Regular />}
-        >
-          最后在线时间
-          <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>
-        </TableCellLayout>
-      );
-    },
-    renderCell: (item) => {
-      return (
-        <TableCellLayout media={item.最后在线时间.icon}>
-          {item.最后在线时间.label}
-        </TableCellLayout>
-      );
-    },
-  }),
-];
 
 const List = () => {
   const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
+  const [showButton, setShowButton] = useState(false);
+
 
   return (
     <DataGrid
       items={items}
-      columns={columns}
+      columns={[
+        createTableColumn({
+          columnId: "姓名",
+          compare: (a, b) => {
+            return a.姓名.label.localeCompare(b.姓名.label);
+          },
+          renderHeaderCell: () => {
+            return (
+              <TableCellLayout
+                media={<TextField16Regular />}
+              >
+                姓名
+                <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>
+              </TableCellLayout>
+            );
+          },
+          renderCell: (item) => {
+
+            const handleMouseEnter = () => {
+              setShowButton(true);
+            };
+
+            const handleMouseLeave = () => {
+              setShowButton(false);
+            };
+            return (
+              <div style={{ width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                <span>{item.姓名.label}</span>
+                <div
+                  onMouseEnter={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                >
+                  {showButton && (
+                    <Button appearance="subtle" icon={<MoreHorizontal16Filled />}></Button>
+                  )}
+                  {/* <Button appearance="subtle" icon={<MoreHorizontal16Filled />}></Button> */}
+                  {/* <Button appearance="subtle" icon={<CommentAdd16Regular />}></Button> */}
+                </div>
+              </div>
+            );
+          },
+        }),
+        createTableColumn({
+          columnId: "性别",
+          compare: (a, b) => {
+            return a.性别.label.localeCompare(b.性别.label);
+          },
+          renderHeaderCell: () => {
+            return (
+              <TableCellLayout
+                media={<SelectAllOn16Regular />}
+              >
+                性别
+                <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>
+              </TableCellLayout>
+            );
+          },
+          renderCell: (item) => {
+            return item.性别.label;
+          },
+        }),
+        createTableColumn({
+          columnId: "年龄",
+          compare: (a, b) => {
+            return a.年龄.timestamp - b.年龄.timestamp;
+          },
+          renderHeaderCell: () => {
+            return (
+              <TableCellLayout
+                media={<TextField16Regular />}
+              >
+                年龄
+                <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>
+              </TableCellLayout>
+            );
+          },
+
+          renderCell: (item) => {
+            return item.年龄.label;
+          },
+        }),
+        createTableColumn({
+          columnId: "最后在线时间",
+          compare: (a, b) => {
+            return a.最后在线时间.label.localeCompare(b.最后在线时间.label);
+          },
+          renderHeaderCell: () => {
+            return (
+              <TableCellLayout
+                media={<Calendar16Regular />}
+              >
+                最后在线时间
+                <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>
+              </TableCellLayout>
+            );
+          },
+          renderCell: (item) => {
+            return (
+              <TableCellLayout media={item.最后在线时间.icon}>
+                {item.最后在线时间.label}
+              </TableCellLayout>
+            );
+          },
+        }),
+      ]}
       selectionMode="single"
       // sortable
       subtleSelection