鼠标移入显示按钮

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "msedge",
+            "request": "launch",
+            "name": "针对 localhost 启动 Edge",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

src/pages/listnew/index.jsx

@@ -1,20 +1,18 @@
 import * as React from "react";
+import { useState } from "react";
 import {
   FolderRegular,
-  EditRegular,
-  OpenRegular,
   DocumentRegular,
-  PeopleRegular,
   DocumentPdfRegular,
   VideoRegular,
   ChevronDown16Filled,
   TextField16Regular,
   Calendar16Regular,
   SelectAllOn16Regular,
+  CommentAdd16Regular,
+  MoreHorizontal16Filled,
 } from "@fluentui/react-icons";
 import {
-  PresenceBadgeStatus,
-  Avatar,
   DataGridBody,
   DataGridRow,
   DataGrid,
@@ -30,7 +28,7 @@ import {
   MenuList,
   MenuItem,
   MenuPopover,
-  Text,
+  Tooltip,
 } from "@fluentui/react-components";
 
 const items = [
@@ -91,7 +89,7 @@ const columns = [
       );
     },
     renderCell: (item) => {
-      return item.姓名.label;
+      return ChangeBtnShowType(item);
     },
   }),
   createTableColumn({
@@ -200,6 +198,53 @@ const columns = [
   }),
 ];
 
+/**
+ * 鼠标移动到姓名列上时，显示两个按钮
+ * @param item 包含姓名标签的对象
+ * @returns 返回 JSX 元素
+ */
+const ChangeBtnShowType = (item) => {
+  const [showButton, setShowButton] = useState(false);
+  const handleMouseEnter = () => {
+    setShowButton(true);
+  };
+
+  const handleMouseLeave = () => {
+    setShowButton(false);
+  };
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+      }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {item.姓名.label}
+      {showButton && (
+        <div>
+          <Tooltip content="更多操作" positioning="below">
+            <Button
+              appearance="subtle"
+              icon={<MoreHorizontal16Filled />}
+              onclick={() => {
+                alert("更多操作");
+              }}
+            ></Button>
+          </Tooltip>
+          <Tooltip content="添加注释" positioning="below">
+            <Button appearance="subtle" icon={<CommentAdd16Regular />}></Button>
+          </Tooltip>
+        </div>
+      )}
+    </div>
+  );
+};
+
 const List = () => {
   const defaultSelectedItems = React.useMemo(() => new Set([1]), []);