暂存

src/component/content/content_side/index.jsx

@@ -25,9 +25,11 @@ export default class ContentSide extends Component{
                 </a>
             </div>
             <div class="zl-365-content-side-li">
-                <a class="content-side-li-nav" href="/Microsoft365/listnew" title="测试人员列表" target="_self">
+                {/* <a class="content-side-li-nav" href="/Microsoft365/listnew" title="测试人员列表" target="_self">
                     <span class="content-side-li-nav-text">测试人员列表</span>
-                </a>
+                  
+                </a> */}
+                <MyNavlink to="/listnew" >测试人员列表</MyNavlink>
             </div>
             <div class="zl-365-content-side-li">
                 <a class="content-side-li-nav" href="#" title="页面" target="_self">

src/component/content/index.css

@@ -155,3 +155,8 @@ a.content-side-li-nav {
     font-family: var(--fontFamilyBase);
 }
 
+.zl-365-list{
+    flex: 0 0 calc(100% - 227px);
+    max-width: calc(100% - 227px); 
+    padding: 8px;
+}

src/component/content/index.jsx

@@ -4,6 +4,7 @@ import ContentHeader from "./content_header";
 import ContentSide from "./content_side";
 import { Routes, Route } from "react-router-dom";
 import Home from "../../pages/home";
+import List from "../../pages/listnew";
 
 export default class Content extends Component {
   render() {
@@ -11,9 +12,10 @@ export default class Content extends Component {
       <div class="zl-365-content">
         <ContentHeader></ContentHeader>
         <ContentSide></ContentSide>
-        <div>
+        <div className="zl-365-list">
           <Routes>
             <Route path="/home" Component={Home}></Route>
+            <Route path="/listnew" Component={List}></Route>
           </Routes>
         </div>
       </div>

src/pages/listnew/index.js

@@ -0,0 +1,192 @@
+import * as React from "react";
+import {
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
+  ChevronDown16Filled,
+} from "@fluentui/react-icons";
+import {
+  PresenceBadgeStatus,
+  Avatar,
+  DataGridBody,
+  DataGridRow,
+  DataGrid,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridCell,
+  TableCellLayout,
+  TableColumnDefinition,
+  createTableColumn,
+  Button,
+  Menu,
+  MenuTrigger,
+  MenuList,
+  MenuItem,
+  MenuPopover,
+  Text
+} from "@fluentui/react-components";
+
+
+const items = [
+  {
+    姓名: { label: "张三", icon: <DocumentRegular /> },
+    性别: { label: "男", status: "available" },
+    年龄: { label: "30岁", timestamp: 1 },
+    最后在线时间: { label: "2024/11/6 13:50" },
+  },
+  {
+    姓名: { label: "李四", icon: <FolderRegular /> },
+    性别: { label: "女", status: "busy" },
+    年龄: { label: "20", timestamp: 2 },
+    最后在线时间: { label: "2024/11/6 13:50" },
+  },
+  {
+    姓名: { label: "王五", icon: <VideoRegular /> },
+    性别: { label: "男", status: "away" },
+    年龄: { label: "25", timestamp: 2 },
+    最后在线时间: { label: "2024/11/6 13:50" },
+  },
+  {
+    姓名: { label: "田六", icon: <DocumentPdfRegular /> },
+    性别: { label: "男", status: "offline" },
+    年龄: { label: "33", timestamp: 3 },
+    最后在线时间: { label: "2024/11/6 13:50" },
+  },
+];
+
+const columns = [
+  createTableColumn({
+    columnId: "姓名",
+    compare: (a, b) => {
+      return a.姓名.label.localeCompare(b.姓名.label);
+    },
+    renderHeaderCell: () => {
+      return ("姓名");
+    },
+    renderCell: (item) => {
+      return (
+        <TableCellLayout media={item.姓名.icon}>
+          {item.姓名.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn({
+    columnId: "性别",
+    compare: (a, b) => {
+      return a.性别.label.localeCompare(b.性别.label);
+    },
+    renderHeaderCell: () => {
+      return (
+        <TableCellLayout
+          media={<VideoRegular />}
+        >
+          性别
+          <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: "年龄",
+    compare: (a, b) => {
+      return a.年龄.timestamp - b.年龄.timestamp;
+    },
+    renderHeaderCell: () => {
+      return "年龄";
+    },
+
+    renderCell: (item) => {
+      return item.年龄.label;
+    },
+  }),
+  createTableColumn({
+    columnId: "最后在线时间",
+    compare: (a, b) => {
+      return a.最后在线时间.label.localeCompare(b.最后在线时间.label);
+    },
+    renderHeaderCell: () => {
+      return "最后在线时间";
+    },
+    renderCell: (item) => {
+      return (
+        <TableCellLayout media={item.最后在线时间.icon}>
+          {item.最后在线时间.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+];
+
+const List = () => {
+  const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
+
+  return (
+    <DataGrid
+      items={items}
+      columns={columns}
+      selectionMode="single"
+      // sortable
+      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 }) => (
+              <DataGridCell>{renderCell(item)}</DataGridCell>
+            )}
+          </DataGridRow>
+        )}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
+
+export default List;

src/pages/listnew/index.jsx

@@ -1,9 +0,0 @@
-import React, { Component } from "react";
-
-export default class MyNavlink extends Component {
-    render() {
-        return (
-            <div>测试页面</div>
-        )
-    }
-}