表内编辑，右键菜单

src/locales/langs/en-US.json

@@ -1,13 +1,20 @@
-{
-    "menu": {
-        "home": "Home",
-        "dialogue": "Dialogue",
-        "document": "Document",
-        "book": "Book",
-        "page": "Page",
-        "websiteContent": "WebsiteContent",
-        "recycleBin": "RecycleBin",
-        "edit": "Edit",
-        "testList": "TestList"
-    }
-}
+{
+  "menu": {
+    "home": "Home",
+    "dialogue": "Dialogue",
+    "document": "Document",
+    "book": "Book",
+    "page": "Page",
+    "websiteContent": "WebsiteContent",
+    "recycleBin": "RecycleBin",
+    "edit": "Edit",
+    "testList": "TestList"
+  },
+  "list": {
+    "share": "share",
+    "copyLink": "copy link",
+    "copyToClipboard": "Copy field values to clipboard",
+    "edit": "edit",
+    "comment": "add comment"
+  }
+}

src/locales/langs/zh-CN.json

@@ -9,5 +9,12 @@
     "recycleBin": "回收站",
     "edit": "编辑",
     "testList": "测试列表"
+  },
+  "list": {
+    "share": "共享",
+    "copyLink": "复制链接",
+    "copyToClipboard": "将字段值复制到剪切板",
+    "edit": "编辑",
+    "comment": "批注"
   }
 }

src/pages/listnew/index.jsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { useState } from "react";
+import { useTranslation } from 'react-i18next'
 import {
   FolderRegular,
   DocumentRegular,
@@ -12,7 +13,21 @@ import {
   CommentAdd16Regular,
   MoreHorizontal16Filled,
   NumberCircle116Regular,
-  Add16Filled
+  Add16Filled,
+  ShareRegular,
+  LinkFilled,
+  CopyRegular,
+  EditRegular,
+  CommentRegular,
+  DeleteRegular,
+  TableFreezeRowRegular,
+  AlertRegular,
+  ClipboardTextEditRegular,
+  ArrowUndoFilled,
+  HistoryRegular,
+  PanelRightExpandRegular,
+  PersonRegular,
+  FlashAutoRegular
 } from "@fluentui/react-icons";
 import {
   DataGridBody,
@@ -33,11 +48,13 @@ import {
   MenuDivider,
   Input,
   Select,
+  Toolbar
 } from "@fluentui/react-components";
 import { DatePicker } from "@fluentui/react-datepicker-compat";
 
 
 const List = (editType) => {
+  const { t } = useTranslation();
   // const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
 
   //数据类型常量
@@ -201,7 +218,9 @@ const List = (editType) => {
         onMouseLeave={handleMouseLeave}
       >
 
-        <Input type="text" style={{ width: "calc(100% - 70px)" }} defaultValue={props.cellData} />
+        <Input type="text" style={{ width: "calc(100% - 70px)" }} defaultValue={props.cellData} onChange={(e) => {
+
+        }} />
         {showButton && (
           <div>
             <Tooltip content="更多操作" positioning="below">
@@ -253,10 +272,10 @@ const List = (editType) => {
     },
   ]
 
-  const [newTableData, setTabeData] = useState(tableData);
   /**
    * 新增空行
    */
+  const [newTableData, setTabeData] = useState(tableData);
   const AddNewRow = () => {
     setTabeData(newTableData.concat([{
       序号: { label: newTableData.length + 1 },
@@ -267,180 +286,295 @@ const List = (editType) => {
     }]));
   }
 
-  /**
-   * 记录点击的行
-   */
+  //记录点击的行
   const [editRowId, setEditRowId] = useState(-1);
-  const ChangeEditRowId = (rowId) => {
-    setEditRowId(rowId);
-  }
 
-  /**
-   * 记录点击的列
-   */
+  //记录点击的列
   const [editColumnId, setEditColumnId] = useState(-1);
-  const ChangeEditColumnId = (ColumnId) => {
-    setEditColumnId(ColumnId);
+
+  //右键选中行
+  const [selectRow, setSelectRow] = useState(-1);
+
+  /**
+ * 列头“合计”二级菜单
+ */
+  const RightBtnAutoSubMenu = () => {
+    return (
+      <Menu>
+        <MenuTrigger disableButtonEnhancement>
+          <MenuItem icon={<FlashAutoRegular style={{ color: "var(--colorBrandBackground)" }} />}>自动化</MenuItem>
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem icon>申请注销</MenuItem>
+            <RightBtnSetNoteSubMenu />
+            <MenuDivider />
+            <RightBtnRuleSubMenu />
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    );
   }
 
+  const RightBtnSetNoteSubMenu = () => {
+    return (
+      <Menu>
+        <MenuTrigger disableButtonEnhancement>
+          <MenuItem icon>设置提醒</MenuItem>
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem icon>日期列</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    );
+  }
+
+  const RightBtnRuleSubMenu = () => {
+    return (
+      <Menu>
+        <MenuTrigger disableButtonEnhancement>
+          <MenuItem icon={<ClipboardTextEditRegular style={{ color: "var(--colorBrandBackground)" }} />}>规则</MenuItem>
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem icon>创建规则</MenuItem>
+            <MenuItem icon>管理规则</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    );
+  }
+
+  const RightBtnMoreSubMenu = () => {
+    return (
+      <Menu>
+        <MenuTrigger disableButtonEnhancement>
+          <MenuItem icon>更多</MenuItem>
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem icon>工作流</MenuItem>
+            <MenuItem icon>合规性相信信息</MenuItem>
+            <MenuItem icon>下移</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    );
+  }
+
+  const [showButton, setShowButton] = useState(false);
+  const handleMouseEnter = () => {
+    setShowButton(true);
+  };
+
+  const handleMouseLeave = () => {
+    setShowButton(false);
+  };
 
   return (
-    <DataGrid
-      items={newTableData}
-      columns={[
-        createTableColumn({
-          columnId: "姓名",
-          compare: (a, b) => {
-            return a.姓名.label.localeCompare(b.姓名.label);
-          },
-          renderHeaderCell: () => {
-            return (
-              <TableCellLayout media={<TextField16Regular />}>
-                姓名
-                <HeaderMenuList dataType={DATA_TYPE.文本} title="姓名" columnId="姓名" />
-              </TableCellLayout>
-            );
-          },
-          renderCell: (item, rowId, columnId) => {
-            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
-              return <ChangeBtnShowType cellData={item.姓名.label} />
-            } else {
-              return item.姓名.label;
-            }
-          },
-        }),
-        createTableColumn({
-          columnId: "序号",
-          fixed: true,
-          compare: (a, b) => {
-            return a.序号.label - b.序号.label;
-          },
-          renderHeaderCell: () => {
-            return (
-              <TableCellLayout media={<NumberCircle116Regular />}>
-                序号
-                <HeaderMenuList dataType={DATA_TYPE.数字} title="序号" columnId="序号" />
-              </TableCellLayout>
-            );
-          },
-          renderCell: (item, rowId, columnId) => {
-            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
-              return <Input type="number" defaultValue={item.序号.label} style={{ width: "100%" }} />;
-            } else {
-              return item.序号.label;
-            }
-          },
-        }),
-
-        createTableColumn({
-          columnId: "性别",
-          compare: (a, b) => {
-            return a.性别.label.localeCompare(b.性别.label);
-          },
-          renderHeaderCell: () => {
-            return (
-              <TableCellLayout media={<SelectAllOn16Regular />}>
-                性别
-                <HeaderMenuList dataType={DATA_TYPE.选项} title="性别" columnId="性别" />
-              </TableCellLayout>
-            );
-          },
-          renderCell: (item, rowId, columnId) => {
-            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
-              return <Select style={{ width: "calc(100% - 70px)" }}>
-                <option value="男" selected={item.性别.label == "男"}>男</option>
-                <option value="女" selected={item.性别.label == "女"}>女</option>
-              </Select>;
-            } else {
-              return item.性别.label;
-            }
-          },
-        }),
-        createTableColumn({
-          columnId: "年龄",
-          compare: (a, b) => {
-            return a.年龄.timestamp - b.年龄.timestamp;
-          },
-          renderHeaderCell: () => {
-            return (
-              <TableCellLayout media={<TextField16Regular />}>
-                年龄
-                <HeaderMenuList dataType={DATA_TYPE.文本} title="年龄" columnId="年龄" />
-              </TableCellLayout>
-            );
-          },
-
-          renderCell: (item, rowId, columnId) => {
-            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
-              return <Input type="date" defaultValue={item.年龄.label} />;
-            } else {
-              return item.年龄.label;
-            }
-          },
-        }),
-        createTableColumn({
-          columnId: "最后在线时间",
-          compare: (a, b) => {
-            return new Date(a.最后在线时间.label) - new Date(b.最后在线时间.label);
-          },
-          renderHeaderCell: () => {
-            return (
-              <TableCellLayout media={<Calendar16Regular />}>
-                最后在线时间
-                <HeaderMenuList dataType={DATA_TYPE.日期} title="最后在线时间" columnId="最后在线时间" />
-              </TableCellLayout>
-            );
-          },
-          renderCell: (item, rowId, columnId) => {
-            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
-              return <Input type="date" defaultValue={item.最后在线时间.label} />;
-            } else {
-              return item.最后在线时间.label;
-            }
-          },
-        }),
-      ]}
-      selectionMode="single"
-      sortable
-      sortState={dataSortType}
-      subtleSelection
-      resizableColumns
-      // defaultSelectedItems={defaultSelectedItems}
-      style={{ minWidth: "550px" }}
-    >
-      <DataGridHeader>
-        <DataGridRow>
-          {({ renderHeaderCell }) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
-        </DataGridRow>
-      </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }) => (
-          <DataGridRow
-            key={rowId}
-            selectionCell={{ radioIndicator: { "aria-label": "Select row" } }}
-          >
-            {({ renderCell, columnId }) => (
-              <DataGridCell onClick={(e) => {
-                ChangeEditRowId(rowId);
-                ChangeEditColumnId(columnId);
-              }}>{renderCell(item, rowId, columnId)}</DataGridCell>
+    <>
+      <Toolbar aria-label="Default"></Toolbar>
+      <DataGrid
+        items={newTableData}
+        columns={[
+          createTableColumn({
+            columnId: "姓名",
+            compare: (a, b) => {
+              return a.姓名.label.localeCompare(b.姓名.label);
+            },
+            renderHeaderCell: () => {
+              return (
+                <TableCellLayout media={<TextField16Regular />}>
+                  姓名
+                  <HeaderMenuList dataType={DATA_TYPE.文本} title="姓名" columnId="姓名" />
+                </TableCellLayout>
+              );
+            },
+            renderCell: (item, rowId, columnId) => {
+              if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+                return <Input type="text" defaultValue={item.姓名.label} style={{ width: "100%" }} onChange={(e) => {
+                  item.姓名.label = e.target.value;
+                }} />;
+              } else {
+                return item.姓名.label;
+              }
+            },
+          }),
+          createTableColumn({
+            columnId: "序号",
+            fixed: true,
+            compare: (a, b) => {
+              return a.序号.label - b.序号.label;
+            },
+            renderHeaderCell: () => {
+              return (
+                <TableCellLayout media={<NumberCircle116Regular />}>
+                  序号
+                  <HeaderMenuList dataType={DATA_TYPE.数字} title="序号" columnId="序号" />
+                </TableCellLayout>
+              );
+            },
+            renderCell: (item, rowId, columnId) => {
+              if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+                return <Input type="number" defaultValue={item.序号.label} style={{ width: "100%" }} onChange={(e) => {
+                  item.序号.label = e.target.value;
+                }} />;
+              } else {
+                return item.序号.label;
+              }
+            },
+          }),
+
+          createTableColumn({
+            columnId: "性别",
+            compare: (a, b) => {
+              return a.性别.label.localeCompare(b.性别.label);
+            },
+            renderHeaderCell: () => {
+              return (
+                <TableCellLayout media={<SelectAllOn16Regular />}>
+                  性别
+                  <HeaderMenuList dataType={DATA_TYPE.选项} title="性别" columnId="性别" />
+                </TableCellLayout>
+              );
+            },
+            renderCell: (item, rowId, columnId) => {
+              if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+                return <Select style={{ width: "calc(100% - 70px)" }} onChange={(e) => {
+                  item.性别.label = e.target.value;
+                }}>
+                  <option value="男" selected={item.性别.label == "男"}>男</option>
+                  <option value="女" selected={item.性别.label == "女"}>女</option>
+                </Select>;
+              } else {
+                return item.性别.label;
+              }
+            },
+          }),
+          createTableColumn({
+            columnId: "年龄",
+            compare: (a, b) => {
+              return a.年龄.timestamp - b.年龄.timestamp;
+            },
+            renderHeaderCell: () => {
+              return (
+                <TableCellLayout media={<TextField16Regular />}>
+                  年龄
+                  <HeaderMenuList dataType={DATA_TYPE.文本} title="年龄" columnId="年龄" />
+                </TableCellLayout>
+              );
+            },
+
+            renderCell: (item, rowId, columnId) => {
+              if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+                return <Input type="text" defaultValue={item.年龄.label} style={{ width: "100%" }} onChange={(e) => {
+                  item.年龄.label = e.target.value;
+                }} />;
+              } else {
+                return item.年龄.label;
+              }
+            },
+          }),
+          createTableColumn({
+            columnId: "最后在线时间",
+            compare: (a, b) => {
+              return new Date(a.最后在线时间.label) - new Date(b.最后在线时间.label);
+            },
+            renderHeaderCell: () => {
+              return (
+                <TableCellLayout media={<Calendar16Regular />}>
+                  最后在线时间
+                  <HeaderMenuList dataType={DATA_TYPE.日期} title="最后在线时间" columnId="最后在线时间" />
+                </TableCellLayout>
+              );
+            },
+            renderCell: (item, rowId, columnId) => {
+              if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+                return <Input type="date" defaultValue={item.最后在线时间.label} onChange={(e) => {
+                  item.最后在线时间.label = e.target.value;
+                }} />;
+              } else {
+                return item.最后在线时间.label;
+              }
+            },
+          }),
+        ]}
+        selectionMode="single"
+        sortable
+        sortState={dataSortType}
+        subtleSelection
+        resizableColumns
+        selectedItems={[selectRow]}
+        // defaultSelectedItems={defaultSelectedItems}
+        style={{ minWidth: "550px" }}
+      >
+        <DataGridHeader>
+          <DataGridRow>
+            {({ renderHeaderCell }) => (
+              <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
             )}
           </DataGridRow>
-        )}
-      </DataGridBody>
-
-      {editType.edit == "true" && (<Button
-        appearance="subtle"
-        icon={<Add16Filled />}
-        style={{ color: "var(--colorBrandBackground)" }}
-        onClick={() => {
-          AddNewRow();
-        }}
-      >添加新项目</Button>)}
-    </DataGrid>
-
+        </DataGridHeader>
+        <DataGridBody>
+          {({ item, rowId }) => (
+            <Menu positioning="above-start" openOnContext>
+              <MenuTrigger disableButtonEnhancement>
+                <DataGridRow
+                  key={rowId}
+                  selectionCell={{ radioIndicator: { "aria-label": "Select row" } }}
+                  onMouseDown={(e) => {
+                    setSelectRow(rowId);
+                  }}
+                >
+                  {({ renderCell, columnId }) => (
+                    <DataGridCell onClick={(e) => {
+                      setEditRowId(rowId);
+                      setEditColumnId(columnId);
+                    }}>{renderCell(item, rowId, columnId)}</DataGridCell>
+                  )}
+                </DataGridRow>
+              </MenuTrigger>
+              <MenuPopover>
+                <MenuList>
+                  <MenuItem icon={<ShareRegular style={{ color: "var(--colorBrandBackground)" }} />}>{t("list.share")}</MenuItem>
+                  <MenuItem icon={<LinkFilled style={{ color: "var(--colorBrandBackground)" }} />}>{t("list.copyLink")}</MenuItem>
+                  <MenuItem icon={<CopyRegular style={{ color: "var(--colorBrandBackground)" }} />}>{t("list.copyToClipboard")}</MenuItem>
+                  <MenuItem icon={<EditRegular style={{ color: "var(--colorBrandBackground)" }} />}>{t("list.edit")}</MenuItem>
+                  <MenuItem icon={<CommentRegular style={{ color: "var(--colorBrandBackground)" }} />}>{t("list.comment")}</MenuItem>
+                  <MenuItem icon={<PersonRegular style={{ color: "var(--colorBrandBackground)" }} />}>管理访问权限</MenuItem>
+                  <MenuItem icon={<DeleteRegular style={{ color: "var(--colorBrandBackground)" }} />}>删除</MenuItem>
+                  <RightBtnAutoSubMenu />
+                  <MenuItem icon={<HistoryRegular style={{ color: "var(--colorBrandBackground)" }} />}>版本历史记录</MenuItem>
+                  <MenuDivider />
+                  <MenuItem icon={<ArrowUndoFilled style={{ color: "var(--colorBrandBackground)" }} />}>撤销</MenuItem>
+                  <MenuItem icon={<TableFreezeRowRegular style={{ color: "var(--colorBrandBackground)" }} />}>在网络试图中编辑</MenuItem>
+                  <MenuItem icon={<AlertRegular style={{ color: "var(--colorBrandBackground)" }} />}>提醒我</MenuItem>
+                  <MenuItem icon={<ClipboardTextEditRegular style={{ color: "var(--colorBrandBackground)" }} />}>管理警报</MenuItem>
+                  <MenuDivider />
+                  <MenuItem icon={<PanelRightExpandRegular style={{ color: "var(--colorBrandBackground)" }} />}>详细信息</MenuItem>
+                  <RightBtnMoreSubMenu />
+                </MenuList>
+              </MenuPopover>
+            </Menu>
+          )}
+        </DataGridBody>
+
+        {editType.edit == "true" && (<Button
+          appearance="subtle"
+          icon={<Add16Filled />}
+          style={{ color: "var(--colorBrandBackground)" }}
+          onClick={() => {
+            AddNewRow();
+          }}
+        >添加新项目</Button>)}
+      </DataGrid>
+    </>
 
   );
 };

src/pages/listnew/test.jsx

@@ -0,0 +1,112 @@
+import * as React from "react";
+import {
+  DrawerBody,
+  DrawerHeader,
+  DrawerHeaderTitle,
+  Drawer,
+  DrawerProps,
+  Button,
+  Label,
+  Radio,
+  RadioGroup,
+  makeStyles,
+  tokens,
+  useId,
+  useRestoreFocusSource,
+  useRestoreFocusTarget,
+} from "@fluentui/react-components";
+import { Dismiss24Regular } from "@fluentui/react-icons";
+
+const useStyles = makeStyles({
+  root: {
+    border: "2px solid #ccc",
+    overflow: "hidden",
+
+    display: "flex",
+    height: "480px",
+    backgroundColor: "#fff",
+  },
+
+  content: {
+    flex: "1",
+    padding: "16px",
+
+    display: "grid",
+    justifyContent: "flex-start",
+    alignItems: "flex-start",
+    gridRowGap: tokens.spacingVerticalXXL,
+    gridAutoRows: "max-content",
+  },
+
+  field: {
+    display: "grid",
+    gridRowGap: tokens.spacingVerticalS,
+  },
+});
+
+type DrawerType = Required<DrawerProps>["type"];
+
+export const Default = () => {
+  const styles = useStyles();
+  const labelId = useId("type-label");
+
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [type, setType] = React.useState<DrawerType>("overlay");
+
+  // Overlay Drawer will handle focus by default, but inline Drawers need manual focus restoration attributes, if applicable
+  const restoreFocusTargetAttributes = useRestoreFocusTarget();
+  const restoreFocusSourceAttributes = useRestoreFocusSource();
+
+  return (
+    <div className={styles.root}>
+      <Drawer
+        {...restoreFocusSourceAttributes}
+        type={type}
+        separator
+        open={isOpen}
+        onOpenChange={(_, { open }) => setIsOpen(open)}
+      >
+        <DrawerHeader>
+          <DrawerHeaderTitle
+            action={
+              <Button
+                appearance="subtle"
+                aria-label="Close"
+                icon={<Dismiss24Regular />}
+                onClick={() => setIsOpen(false)}
+              />
+            }
+          >
+            Default Drawer
+          </DrawerHeaderTitle>
+        </DrawerHeader>
+
+        <DrawerBody>
+          <p>Drawer content</p>
+        </DrawerBody>
+      </Drawer>
+
+      <div className={styles.content}>
+        <Button
+          {...restoreFocusTargetAttributes}
+          appearance="primary"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          {type === "inline" ? "Toggle" : "Open"}
+        </Button>
+
+        <div className={styles.field}>
+          <Label id={labelId}>Type</Label>
+          <RadioGroup
+            value={type}
+            onChange={(_, data) => setType(data.value as DrawerType)}
+            aria-labelledby={labelId}
+          >
+            <Radio value="overlay" label="Overlay (Default)" />
+            <Radio value="inline" label="Inline" />
+          </RadioGroup>
+        </div>
+      </div>
+    </div>
+  );
+};