فهرست منبع

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

唐渝林 7 ماه پیش
والد
کامیت
35e25ed8a3
4فایلهای تغییر یافته به همراه92 افزوده شده و 8 حذف شده
  1. 20 0
      .vscode/extensions.json
  2. 1 1
      .vscode/launch.json
  3. 19 0
      .vscode/settings.json
  4. 52 7
      src/pages/listnew/index.jsx

+ 20 - 0
.vscode/extensions.json

@@ -0,0 +1,20 @@
+{
+  "recommendations": [
+    "afzalsayed96.icones",
+    "antfu.iconify",
+    "antfu.unocss",
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "esbenp.prettier-vscode",
+    "formulahendry.auto-close-tag",
+    "formulahendry.auto-complete-tag",
+    "formulahendry.auto-rename-tag",
+    "lokalise.i18n-ally",
+    "mhutchie.git-graph",
+    "mikestead.dotenv",
+    "naumovs.color-highlight",
+    "pkief.material-icon-theme",
+    "whtouche.vscode-js-console-utils",
+    "zhuangtongfa.material-theme"
+  ]
+}

+ 1 - 1
.vscode/launch.json

@@ -7,7 +7,7 @@
         {
             "type": "chrome",
             "request": "launch",
-            "name": "针对 localhost 启动 Chrome",
+            "name": "谷歌浏览器调试",
             "url": "http://localhost:3000",
             "webRoot": "${workspaceFolder}"
         }

+ 19 - 0
.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  "eslint.useFlatConfig": true,
+  "editor.formatOnSave": false,
+  "eslint.validate": ["html", "css", "scss", "json", "jsonc"],
+  "i18n-ally.displayLanguage": "zh-cn",
+  "i18n-ally.enabledParsers": ["ts"],
+  "i18n-ally.enabledFrameworks": ["vue"],
+  "i18n-ally.editor.preferEditor": true,
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.localesPaths": ["src/locales/langs"],
+  "prettier.enable": false,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "unocss.root": ["./"],
+  "vue.server.hybridMode": true
+}

+ 52 - 7
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]), []);