diff --git a/README.md b/README.md
index 102e366..f4f4854 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,11 @@
-# Tauri + React + Typescript
-
-This template should help get you started developing with Tauri, React and Typescript in Vite.
-
-## Recommended IDE Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
+# CodeMagic
+本地离线工具集合，包含以下功能:
+- base64转码/解码:文本转base64,base64转文本，图片转base64，base64转图片
+- 格式化:格式化json/yaml
+- urlEncode/urlDecode
+- 摘要算法:计算文本的md5,sha256。计算多个文件的md5,sha256
+- 时间戳: 时间戳转时间，时间转时间戳
+- 二维码/条形码生成
+- 调色板
+- 文本对比工具
+- 国密算法(SM2,SM3,SM4)
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 99e18dd..44fe6f7 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "code_magic"
-version = "0.0.16"
+version = "0.0.17"
 description = "A development tools"
 authors = ["lsk"]
 license = "MIT"
diff --git a/src-tauri/src/common_tools/base64.rs b/src-tauri/src/common_tools/base64.rs
index 41495ec..e55420a 100644
--- a/src-tauri/src/common_tools/base64.rs
+++ b/src-tauri/src/common_tools/base64.rs
@@ -7,11 +7,11 @@ use std::io::Cursor;
 use uuid::Uuid;
 
 pub fn base64_encode_with_error(source_string: String) -> Result<String, anyhow::Error> {
-    let encoded: String = general_purpose::STANDARD_NO_PAD.encode(source_string);
+    let encoded: String = general_purpose::STANDARD.encode(source_string);
     Ok(encoded)
 }
 pub fn base64_decode_with_error(source_string: String) -> Result<String, anyhow::Error> {
-    let decode_vec = general_purpose::STANDARD_NO_PAD.decode(source_string)?;
+    let decode_vec = general_purpose::STANDARD.decode(source_string)?;
     let result = String::from_utf8_lossy(decode_vec.as_slice()).to_string();
     Ok(result)
 }
@@ -22,12 +22,12 @@ pub fn base64_encode_of_image_with_error(
     let mut image_data: Vec<u8> = Vec::new();
     img.write_to(&mut Cursor::new(&mut image_data), ImageOutputFormat::Png)
         .unwrap();
-    let res_base64 = general_purpose::STANDARD_NO_PAD.encode(image_data);
+    let res_base64 = general_purpose::STANDARD.encode(image_data);
     // let result = format!("data:image/png;base64,{}", res_base64);
     Ok(res_base64)
 }
 pub fn base64_save_image_with_error(source_string: String) -> Result<String, anyhow::Error> {
-    let decode_vec = general_purpose::STANDARD_NO_PAD.decode(source_string)?;
+    let decode_vec = general_purpose::STANDARD.decode(source_string)?;
     let xx = ImageReader::new(Cursor::new(decode_vec))
         .with_guessed_format()?
         .decode()?;
diff --git a/src-tauri/src/common_tools/qrcode.rs b/src-tauri/src/common_tools/qrcode.rs
index 7ee9717..654f293 100644
--- a/src-tauri/src/common_tools/qrcode.rs
+++ b/src-tauri/src/common_tools/qrcode.rs
@@ -13,7 +13,7 @@ pub fn get_qrcode_with_error(text: String) -> Result<String, anyhow::Error> {
     // Encode some data into bits.
     let result: String =
         qrcode_generator::to_svg_to_string(text, QrCodeEcc::Low, 2048, None::<&str>)?;
-    let encoded: String = general_purpose::STANDARD_NO_PAD.encode(result);
+    let encoded: String = general_purpose::STANDARD.encode(result);
 
     Ok(encoded)
 }
@@ -40,7 +40,7 @@ pub fn get_barcode_with_error(text: String) -> Result<String, anyhow::Error> {
     }; // You must specify the height in pixels.
     let encoded = barcode.encode();
     let result = png.generate(&encoded[..])?;
-    let encoded: String = general_purpose::STANDARD_NO_PAD.encode(result);
+    let encoded: String = general_purpose::STANDARD.encode(result);
 
     Ok(encoded)
 }
diff --git a/src/dashboard/components/sidebar.tsx b/src/dashboard/components/sidebar.tsx
index 8f531f5..de87f11 100644
--- a/src/dashboard/components/sidebar.tsx
+++ b/src/dashboard/components/sidebar.tsx
@@ -29,8 +29,10 @@ interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const Sidebar = ({ menuList, onButtonClick }: SidebarProps) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
     const handleButtonClick = (index: number) => {
         onButtonClick(index);
+        setSelectedIndex(index);
     }
     const [showDialog, setShowDialog] = useState(false);
     const handleRightClick = (e: any) => {
@@ -67,8 +69,10 @@ const Sidebar = ({ menuList, onButtonClick }: SidebarProps) => {
                             <>
                                 {menuList.map((item, index) => (
                                     <div key={index}>
-                                        <Button key={item.menuIndex} variant="ghost" className="w-full justify-start"
+                                        <Button key={item.menuIndex} variant="ghost" className="aria-selected:bg-primary/80 hover:bg-primary/80 w-full justify-start"
                                             // onContextMenu={handleRightClick}
+                                            aria-selected={selectedIndex === item.menuIndex}
+                                            
                                             onClick={() => handleButtonClick(item.menuIndex)}
                                             >
                                             {item.label}
diff --git a/src/dashboard/page/diffViewerPage.tsx b/src/dashboard/page/diffViewerPage.tsx
index 48a685d..7ed0750 100644
--- a/src/dashboard/page/diffViewerPage.tsx
+++ b/src/dashboard/page/diffViewerPage.tsx
@@ -47,76 +47,76 @@ export default function DiffViewerPage() {
     const oldResult = invoke("format_pretty_json", { sourceString: differValue[0] }).then((result: any) => {
       const { response_code, response_msg } = JSON.parse(result);
       if (response_code === 0) {
-        let newState = [...differValue];
-        newState[0] = response_msg;
-        setDifferValue(newState);
+        return response_msg;
+
       }
     });
     const newResult = invoke("format_pretty_json", { sourceString: differValue[1] }).then((result: any) => {
       const { response_code, response_msg } = JSON.parse(result);
       if (response_code === 0) {
-        let newState = [...differValue];
-        newState[1] = response_msg;
-        setDifferValue(newState);
+        return response_msg;
+
       }
     });;
 
     // Begin second call and store promise without waiting
     const finalResult = [await oldResult, await newResult];
+    setDifferValue(finalResult);
+
   }
   const handlFormatPrettyYamlClick = async () => {
     const oldResult = invoke("format_pretty_yaml", { sourceString: differValue[0] }).then((result: any) => {
       const { response_code, response_msg } = JSON.parse(result);
       if (response_code === 0) {
-        let newState = [...differValue];
-        newState[0] = response_msg;
-        setDifferValue(newState);
+        return response_msg;
+
       }
     });
     const newResult = invoke("format_pretty_yaml", { sourceString: differValue[1] }).then((result: any) => {
       const { response_code, response_msg } = JSON.parse(result);
       if (response_code === 0) {
-        let newState = [...differValue];
-        newState[1] = response_msg;
-        setDifferValue(newState);
+        return response_msg;
+
       }
     });;
 
     // Begin second call and store promise without waiting
     const finalResult = [await oldResult, await newResult];
+    setDifferValue(finalResult);
+
   }
   const handlFormatPrettyXmlClick = async () => {
     const oldResult = invoke("format_pretty_xml", { sourceString: differValue[0] }).then((result: any) => {
       const { response_code, response_msg } = JSON.parse(result);
+
+      console.log(response_msg);
       if (response_code === 0) {
-        let newState = [...differValue];
-        newState[0] = response_msg;
-        setDifferValue(newState);
+        return response_msg;
       }
     });
     const newResult = invoke("format_pretty_xml", { sourceString: differValue[1] }).then((result: any) => {
       const { response_code, response_msg } = JSON.parse(result);
+      console.log(response_msg);
+
       if (response_code === 0) {
-        let newState = [...differValue];
-        newState[1] = response_msg;
-        setDifferValue(newState);
+        return response_msg;
       }
     });;
 
-    // Begin second call and store promise without waiting
     const finalResult = [await oldResult, await newResult];
+    setDifferValue(finalResult);
   }
   const differValueOnChange = (v: any) => {
     console.log(v);
     setDifferValue(v);
   }
   return (<div className="p-10 flex flex-col h-[calc(100vh-30px)]">
-    <div className="basis-11/12 mb-10 overflow-auto">
+    <div className="basis-11/12 mb-10">
       <DiffEditor
-
+        // className="w-full h-full"
         value={differValue}
-        height="1000px"
-        width="1000px"
+        height="100%"
+        width="100%"
         mode={currentFormat}
         theme={theme === "dark" ? "monokai" : "github"}
         setOptions={{