feat: 增加暂存区

src-tauri/src/commands.rs

@@ -1,7 +1,7 @@
 use std::sync::Mutex;
 
 use crate::{app_error::AppError, app_state::AppState, pe_parse::pe::ReadOnlyPE};
-use serde::Serialize;
+use serde::{Deserialize, Serialize};
 use serde_json::{json, Value};
 use tauri::{AppHandle, Manager, State};
 
@@ -209,6 +209,25 @@ pub fn command_write_data(
     Ok(())
 }
 
+#[tauri::command(async)]
+pub fn command_write_data_list(
+    app_state: State<'_, Mutex<AppState>>,
+    data_list: Vec<EditData>,
+) -> Result<(), AppError> {
+    let mut app_state = app_state.lock().unwrap();
+    for edit_data in data_list {
+        app_state.write_data(edit_data.offset, &edit_data.data)?;
+    }
+    Ok(())
+}
+
+#[derive(Serialize, Deserialize)]
+pub struct EditData{
+    offset: usize,
+    data: Vec<u8>,
+}
+
+
 // 命令，添加节
 #[tauri::command(async)]
 pub fn command_add_section(

src-tauri/src/lib.rs

@@ -26,6 +26,7 @@ pub fn run() {
             commands::command_get_pe_data_section_headers,
             commands::command_get_pe_data_import_directory,
             commands::command_write_data,
+            commands::command_write_data_list,
             commands::command_add_section,
             commands::command_test,
         ])

src/components/DosHeader/DosHeader.module.scss

@@ -1,8 +1,9 @@
-.root {
-    margin: 8px;
-    margin-top: 0;
-    height: 100%;
-    background-color: white;
-    border-radius: 5px;
-    padding: 16px;
+
+
+.optionalContent{
+    margin-bottom: 12px;
+    justify-content: end;
+}
+.optionalItem{
+    margin-left: 16px;
 }

src/components/DosHeader/DosHeader.tsx

@@ -4,65 +4,9 @@ import NodeTableComponent, {
   DataType,
 } from "../NodeTableComponent/NodeTableComponent";
 import { invoke } from "@tauri-apps/api/core";
-import { message } from "antd";
-interface DosHeaderResponseData {
-  base_offset: number;
-  fields: {
-    [key: string]: number | number[];
-  };
-}
+import { Button, Flex, message } from "antd";
+import styles from './DosHeader.module.scss'
 
-const checkEditValue = (item: DataType) => {
-  const { value, data_type, size } = item;
-  if (data_type === "hex") {
-    let numberValue = value as number;
-    if (typeof value === "string") {
-      numberValue = parseInt(value, 10);
-    }
-    // 如果是2位 最大为 0xFFFF 10进制为 65535
-    let maxBit = Math.pow(2, size * 8) - 1;
-    console.log("maxBit", maxBit);
-    if (numberValue > maxBit) {
-      return false;
-    }
-    return true;
-  }
-};
-
-const formatEditValue = (item: DataType) => {
-  const { value, data_type, size } = item;
-  let bufs = [];
-
-  if (data_type === "hex") {
-    let numberValue = value as number;
-    if (typeof value === "string") {
-      numberValue = parseInt(value, 10);
-    }
-    // 转小尾
-    for (let i = 0; i < size; i++) {
-      bufs.push(numberValue & 0xff);
-      numberValue = numberValue >> 8;
-    }
-    console.log("bufs", bufs);
-    return bufs;
-  }
-};
-
-export default function DosHeader() {
-  const [data, setData] = useState<DosHeaderResponseData>();
-  const [messageApi, contextHolder] = message.useMessage();
-  const success = () => {
-    messageApi.open({
-      type: "success",
-      content: "修改成功!",
-    });
-  };
-  const error = () => {
-    messageApi.open({
-      type: "error",
-      content: "修改失败!",
-    });
-  };
 
 const dataTemplate: DataTemplateInterface = {
   e_magic: {
@@ -220,6 +164,52 @@ export default function DosHeader() {
     data_type: "hex",
   },
 };
+interface DosHeaderResponseData {
+  base_offset: number;
+  fields: {
+    [key: string]: number | number[];
+  };
+}
+
+const checkEditValue = (item: DataType) => {
+  const { value, data_type, size } = item;
+  if (data_type === "hex") {
+    let numberValue = value as number;
+    if (typeof value === "string") {
+      numberValue = parseInt(value, 10);
+    }
+    // 如果是2位 最大为 0xFFFF 10进制为 65535
+    let maxBit = Math.pow(2, size * 8) - 1;
+    console.log("maxBit", maxBit);
+    if (numberValue > maxBit) {
+      return false;
+    }
+    return true;
+  }
+};
+
+const formatEditValue = (item: DataType) => {
+  const { value, data_type, size } = item;
+  let bufs = [];
+
+  if (data_type === "hex") {
+    let numberValue = value as number;
+    if (typeof value === "string") {
+      numberValue = parseInt(value, 10);
+    }
+    // 转小尾
+    for (let i = 0; i < size; i++) {
+      bufs.push(numberValue & 0xff);
+      numberValue = numberValue >> 8;
+    }
+    console.log("bufs", bufs);
+    return bufs;
+  }
+};
+
+export default function DosHeader() {
+  const [data, setData] = useState<DosHeaderResponseData>();
+  const [editValues, setEditValues] = useState([]);
 
   const command = "command_get_pe_data_dos_header";
 
@@ -259,24 +249,34 @@ export default function DosHeader() {
     },
   ];
 
-  const handleSave = (item: DataType) => {
+  const handleEdit = (item: DataType) => {
     if (!checkEditValue(item)) {
       return;
     }
-    const bufs = formatEditValue(item);
-    console.log("bufs", bufs, item);
-    invoke("command_write_data", {
-      offset: item.offset,
-      data: bufs,
-    })
-      .then((_res) => {
-        // 提示
-        success();
+    const formatEditData: any = {};
+    formatEditData.offset = item.offset;
+    formatEditData.data = formatEditValue(item);
+    console.log("formatEditData", formatEditData);
+    const newEditValues = [...editValues, formatEditData];
+    setEditValues(newEditValues);
+    // 需要同步修改data
+    const newData = { ...data };
+    newData.fields[item.name] = item.value;
+    setData(newData);
+  }
+
+
+  const handleSave = () => {
+    const command = "command_write_data_list";
+    invoke(command, { dataList: editValues }).then((res) => {
+      message.success("保存成功");
+      // 刷新数据
       getData();
+      // 清空编辑数据
+      setEditValues([]);
+    }).catch((err) => {
+      message.error(`保存失败: ${err}`);
     })
-      .catch(() => {
-        error();
-      });
   };
 
   const getData = () => {
@@ -291,12 +291,25 @@ export default function DosHeader() {
 
   return (
     <>
-      {contextHolder}
+      <Flex className={styles.optionalContent}>
+        <Button className={styles.optionalItem} 
+        disabled={editValues.length === 0}
+        type="primary" onClick={handleSave}>保存</Button>
+        <Button className={styles.optionalItem}
+        disabled={editValues.length === 0}
+        
+        danger onClick={()=>{
+          // 清空编辑数据
+          setEditValues([]);
+          // 重新获取数据
+          getData();
+        }}>还原</Button>
+      </Flex>
       <NodeTableComponent
         dataTemplate={dataTemplate}
         defaultData={data}
         columns={columns as any}
-        onEdit={handleSave}
+        onEdit={handleEdit}
       ></NodeTableComponent>
     </>
   );

src/components/ImportDirectory/ImportDirectory.tsx

@@ -116,7 +116,6 @@ const ModuleFuntionsComponent: React.FC<ModuleFuntionsComponentProps> = (
   props
 ) => {
   const { functionList } = props;
-  console.log("functionList", functionList);
   const columns = [
     {
       title: "序号",
@@ -155,7 +154,7 @@ const ModuleFuntionsComponent: React.FC<ModuleFuntionsComponentProps> = (
   return (
     <Flex className={styles.functionContainer}>
       <Table
-        columns={columns}
+        columns={columns as any}
         dataSource={functionList}
         rowKey="function_name"
         pagination={false}

src/components/NodeTableComponent/NodeTableComponent.module.scss

@@ -3,5 +3,5 @@
 }
 
 .NodeTableComponentTable{
-    height: calc(100% - 16px);
+    height: calc(100% - 40px);
 }

src/components/NodeTableComponent/NodeTableComponent.tsx

@@ -288,7 +288,6 @@ export default function NodeTableComponent(props: NodeTableComponentProps) {
         rowKey={"name"}
         bordered
         size="small"
-        sticky={{ offsetHeader: -16 }}
       />
     </Flex>
   );

src/pages/MainPage.module.scss

@@ -26,10 +26,11 @@
 .content{
     background-color: white;
     display: flex;
-    justify-content: center;
+    justify-content: start;
     border-radius: 5px;
     overflow: scroll;
     padding: 16px;
+    flex-direction: column;
 }
 
 .mainContent {