base64 格式转换

src/App.tsx

@@ -4,7 +4,7 @@ import { VERSION } from './version'
 import { sm3Digest, sm3Hmac } from './utils/algorithm/sm3'
 import { sm4Encrypt, sm4Decrypt } from './utils/algorithm/sm4'
 import { sm2GenerateKeyPair, sm2GetPublicKeyFromPrivateKey, sm2Encrypt, sm2Decrypt, sm2Sign, sm2Verify } from './utils/algorithm/sm2'
-import { hexToUtf8, utf8ToHex } from './utils/convert'
+import { hexToUtf8, utf8ToHex, hexToBase64, base64ToHex } from './utils/convert'
 
 function App() {
   const [activeTab, setActiveTab] = useState('sm3')
@@ -67,6 +67,7 @@ function App() {
   // 转换工具状态
   const [hexInput, setHexInput] = useState('')
   const [utf8Input, setUtf8Input] = useState('')
+  const [base64Input, setBase64Input] = useState('')
 
 
 
@@ -130,6 +131,26 @@ function App() {
     }
   }
   
+  // Hex 转 Base64
+  const handleHexToBase64 = () => {
+    try {
+      const base64 = hexToBase64(hexInput)
+      setBase64Input(base64)
+    } catch (error) {
+      alert('转换失败: ' + error)
+    }
+  }
+  
+  // Base64 转 Hex
+  const handleBase64ToHex = () => {
+    try {
+      const hex = base64ToHex(base64Input)
+      setHexInput(hex)
+    } catch (error) {
+      alert('转换失败: ' + error)
+    }
+  }
+  
   // SM2 生成密钥对
   const handleGenerateSm2KeyPair = () => {
     try {
@@ -962,7 +983,7 @@ function App() {
       {/* 转换工具面板 */}
       {activeTab === 'convert' && (
         <div className="panel" style={{ backgroundColor: '#1e1e1e', padding: '20px', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.3)' }}>
-          <h2 style={{ color: '#f59e0b', marginBottom: '20px' }}>Hex / UTF8 转换</h2>
+          <h2 style={{ color: '#f59e0b', marginBottom: '20px' }}>Hex / UTF8 / Base64 转换</h2>
           
           <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem', flexDirection: isMobile ? 'column' : 'row' }}>
             <div className="form-group" style={{ flex: 1 }}>
@@ -1020,8 +1041,64 @@ function App() {
                   resize: 'vertical'
                 }}
               />
+              <div style={{ display: 'flex', gap: '10px', marginTop: '0.5rem' }}>
+                <button 
+                  onClick={handleHexToUtf8}
+                  style={{
+                    padding: '8px 16px',
+                    border: 'none',
+                    borderRadius: '4px',
+                    background: '#f59e0b',
+                    color: '#121212',
+                    fontSize: '14px',
+                    fontWeight: 'bold',
+                    cursor: 'pointer',
+                    transition: 'background 0.3s ease',
+                    flex: 1
+                  }}
+                >
+                  UTF8 ← Hex
+                </button>
+                <button 
+                  onClick={handleHexToBase64}
+                  style={{
+                    padding: '8px 16px',
+                    border: 'none',
+                    borderRadius: '4px',
+                    background: '#f59e0b',
+                    color: '#121212',
+                    fontSize: '14px',
+                    fontWeight: 'bold',
+                    cursor: 'pointer',
+                    transition: 'background 0.3s ease',
+                    flex: 1
+                  }}
+                >
+                  Base64 ← Hex
+                </button>
+              </div>
+            </div>
+            
+            <div className="form-group" style={{ flex: 1 }}>
+              <label style={{ display: 'block', marginBottom: '5px', color: '#e0e0e0' }}>Base64 输入</label>
+              <textarea 
+                value={base64Input} 
+                onChange={(e) => setBase64Input(e.target.value)}
+                placeholder="输入 Base64 字符串" 
+                style={{ 
+                  height: '200px',
+                  width: '100%',
+                  padding: '10px',
+                  border: '1px solid #333',
+                  borderRadius: '4px',
+                  backgroundColor: '#2d2d2d',
+                  color: '#e0e0e0',
+                  fontSize: '14px',
+                  resize: 'vertical'
+                }}
+              />
               <button 
-                onClick={handleHexToUtf8}
+                onClick={handleBase64ToHex}
                 style={{
                   marginTop: '0.5rem',
                   padding: '8px 16px',
@@ -1035,7 +1112,7 @@ function App() {
                   transition: 'background 0.3s ease'
                 }}
               >
-                UTF8 ← Hex
+                Hex ← Base64
               </button>
             </div>
           </div>

src/utils/convert/index.ts

@@ -9,3 +9,15 @@ export const utf8ToHex = (utf8: string): string => {
   const bytes = new TextEncoder().encode(utf8)
   return Array.from(bytes).map(byte => byte.toString(16).padStart(2, '0')).join('')
 }
+
+// Hex 转 Base64
+export const hexToBase64 = (hex: string): string => {
+  const bytes = new Uint8Array(hex.match(/.{1,2}/g)?.map(byte => parseInt(byte, 16)) || [])
+  return btoa(String.fromCharCode(...bytes))
+}
+
+// Base64 转 Hex
+export const base64ToHex = (base64: string): string => {
+  const bytes = new Uint8Array(Array.from(atob(base64), char => char.charCodeAt(0)))
+  return Array.from(bytes).map(byte => byte.toString(16).padStart(2, '0')).join('')
+}

src/version.js

@@ -1 +1 @@
-export const VERSION = "V1.0-20260418065443";
+export const VERSION = "V1.0-20260418070227";