【New Features】Edit data to support cell-level undo changes

shanhexi · shanhexi · commit 4a1dabf73c33 · 2023-11-02T21:42:46.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,13 +4,15 @@
 - ⭐【New Features】The tree node operation menu supports right-clicking
 - ⭐【New Features】The tree node operation menu can copy the names of tables, fields, keys, indexes, and functions
 - ⭐【New Features】Edit table structure supports setting primary keys in columns
+- ⭐【New Features】Edit data to support cell-level undo changes
 - ⚡️【Optimize】
 - 🐞【Fixed】Fixed table structure editing floating-point decimal Settings display exception
 
 **更新日志**
 - ⭐【新功能】树节点操作菜单支持右键唤出
 - ⭐【新功能】树节点操作菜单支持复制表、字段、key、index、函数等名称
 - ⭐【新功能】编辑表结构支持在列中设置主键
+- ⭐【新功能】编辑数据支持单元格级别撤销修改
 - ⚡️【优化】
 - 🐞【修复】修复表结构编辑浮点数小数位设置显示异常
 
diff --git a/chat2db-client/src/components/MenuLabel/index.less b/chat2db-client/src/components/MenuLabel/index.less
@@ -0,0 +1,16 @@
+@import '../../styles/var.less';
+
+.menuLabel {
+  display: flex;
+  align-items: center;
+  .menuLabelIcon {
+  }
+  .menuLabelTitle {
+    margin-left: 14px;
+  }
+  :global {
+    .ant-dropdown {
+      z-index: 1080;
+    }
+  }
+}
diff --git a/chat2db-client/src/components/MenuLabel/index.tsx b/chat2db-client/src/components/MenuLabel/index.tsx
@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+import classnames from 'classnames';
+import Iconfont from '@/components/Iconfont';
+import styles from './index.less';
+
+interface IProps {
+  className?: string;
+  icon: string;
+  label: string;
+}
+
+export default memo<IProps>((props) => {
+  const { className, icon, label } = props;
+  return <div className={classnames(styles.menuLabel, className)}>
+    {icon && <Iconfont className={styles.menuLabelIcon} code={icon} />}
+    <div className={styles.menuLabelTitle}>{label}</div>
+  </div>;
+});
diff --git a/chat2db-client/src/components/SearchResult/RightClickMenu/index.less b/chat2db-client/src/components/SearchResult/RightClickMenu/index.less
@@ -0,0 +1,4 @@
+@import '../../styles/var.less';
+
+.box {
+}
diff --git a/chat2db-client/src/components/SearchResult/RightClickMenu/index.tsx b/chat2db-client/src/components/SearchResult/RightClickMenu/index.tsx
@@ -0,0 +1,64 @@
+import React, { memo } from 'react';
+import { Dropdown } from 'antd';
+import i18n from '@/i18n';
+import MenuLabel from '@/components/MenuLabel';
+
+interface IProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export default memo<IProps>((props) => {
+  const { children } = props;
+  const items = [
+    {
+      label: <MenuLabel icon="&#xec7a;" label="拷贝" />,
+      key: '0',
+    },
+    {
+      label: <MenuLabel icon="&#xec7a;" label="拷贝行" />,
+      key: '1',
+      children: [
+        {
+          label: 'Insert 语句',
+          key: '1-1',
+          onClick: () => {},
+        },
+        {
+          label: 'Update 语句',
+          key: '1-2',
+          onClick: () => {},
+        },
+        {
+          label: '制表符分隔值(数据)',
+          key: '1-3',
+          onClick: () => {},
+        },
+        {
+          label: '制表符分隔值(字段名)',
+          key: '1-4',
+          onClick: () => {},
+        },
+        {
+          label: '制表符分隔值(字段名和数据)',
+          key: '1-5',
+          onClick: () => {},
+        },
+      ]
+    },
+    {
+      label: <MenuLabel icon="&#xec7a;" label="克隆行" />,
+      key: '2',
+      onClick: () => {},
+    },
+    {
+      label: <MenuLabel icon="&#xe6a7;" label="删除行" />,
+      key: '3',
+      onClick: () => {},
+    },
+  ]
+
+  return <Dropdown menu={{ items }} trigger={["contextMenu"]} >
+    {children}
+  </Dropdown>;
+});
diff --git a/chat2db-client/src/components/SearchResult/TableBox/index.less b/chat2db-client/src/components/SearchResult/TableBox/index.less
@@ -191,7 +191,7 @@
 }
 
 .tableItem {
-  height: 30px;
+  height: 31px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -202,8 +202,8 @@
   background-color: var(--color-bg-base);
 
   .tableItemContent {
-    max-height: 30px;
-    line-height: 30px;
+    max-height: 31px;
+    line-height: 31px;
     flex: 1;
     width: 100%;
     overflow: hidden;
@@ -235,10 +235,17 @@
     background-color: var(--color-success-bg);
   }
 }
-.tableItemEditing {
-  background-color: var(--color-primary-bg-hover);
+.tableItemHighlight {
+  background-color: var(--color-bg-subtle);
+  .tableHoverBox {
+    background-color: var(--color-bg-subtle);
+  }
+}
+.tableItemFocus {
+  background-color: var(--color-primary-hover);
+  color: var(--color-bg-base);
   .tableHoverBox {
-    background-color: var(--color-primary-bg-hover);
+    background-color: var(--color-primary-hover);
   }
 }
 .tableItemSuccess {
@@ -261,6 +268,7 @@
 
 .tableHoverBox {
   position: sticky;
+  height: 31px;
   top: 0px;
   bottom: 0px;
   right: 0px;
@@ -274,10 +282,6 @@
     font-size: 15px;
     margin: 0px 2px;
   }
-
-  i:hover {
-    color: var(--color-primary);
-  }
 }
 
 .pagination {
diff --git a/chat2db-client/src/components/SearchResult/TableBox/index.tsx b/chat2db-client/src/components/SearchResult/TableBox/index.tsx
diff --git a/chat2db-client/src/styles/common.less b/chat2db-client/src/styles/common.less

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +@import '../../styles/var.less';
++
 +.box {
 +}