feat: 新增工具

2026-03-02 15:07:32 +08:00
parent 071d7fb5e1
commit 0701b6a286
46 changed files with 13053 additions and 5327 deletions
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
+import { ElMessage } from 'element-plus'
+import { copy } from '@/utils/string'
+
+// 状态管理
+const title = "Base64加解密工具"
+const activeTab = ref('encode')
+const encodeInput = ref('')
+const encodeOutput = ref('')
+const decodeInput = ref('')
+const decodeOutput = ref('')
+
+// 加密处理
+const encodeText = () => {
+  if (!encodeInput.value) {
+    ElMessage.warning('请输入要加密的文本')
+    return
+  }
+  
+  try {
+    encodeOutput.value = btoa(unescape(encodeURIComponent(encodeInput.value)))
+    ElMessage.success('加密成功')
+  } catch (error) {
+    ElMessage.error('加密失败：' + error)
+  }
+}
+
+// 解密处理
+const decodeText = () => {
+  if (!decodeInput.value) {
+    ElMessage.warning('请输入要解密的Base64字符串')
+    return
+  }
+  
+  try {
+    decodeOutput.value = decodeURIComponent(escape(atob(decodeInput.value)))
+    ElMessage.success('解密成功')
+  } catch (error) {
+    ElMessage.error('解密失败：请输入有效的Base64字符串')
+  }
+}
+
+// 复制结果
+const copyEncodeResult = () => {
+  if (!encodeOutput.value) {
+    ElMessage.warning('没有可复制的内容')
+    return
+  }
+  
+  copy(encodeOutput.value)
+}
+
+const copyDecodeResult = () => {
+  if (!decodeOutput.value) {
+    ElMessage.warning('没有可复制的内容')
+    return
+  }
+  
+  copy(decodeOutput.value)
+}
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 flex-1">
+    <DetailHeader :title="title"></DetailHeader>
+
+    <div class="p-4 rounded-2xl bg-white">
+      <el-tabs v-model="activeTab">
+        <el-tab-pane label="加密" name="encode">
+          <div class="mb-4">
+            <el-input
+              v-model="encodeInput"
+              type="textarea"
+              :rows="6"
+              placeholder="请输入要加密的文本"
+            />
+          </div>
+          
+          <div class="mb-4">
+            <el-button type="primary" @click="encodeText">加密</el-button>
+          </div>
+          
+          <div>
+            <el-input
+              v-model="encodeOutput"
+              type="textarea"
+              :rows="6"
+              placeholder="加密结果"
+              readonly
+            >
+              <template #append>
+                <el-button @click="copyEncodeResult">复制</el-button>
+              </template>
+            </el-input>
+          </div>
+        </el-tab-pane>
+        
+        <el-tab-pane label="解密" name="decode">
+          <div class="mb-4">
+            <el-input
+              v-model="decodeInput"
+              type="textarea"
+              :rows="6"
+              placeholder="请输入要解密的Base64字符串"
+            />
+          </div>
+          
+          <div class="mb-4">
+            <el-button type="primary" @click="decodeText">解密</el-button>
+          </div>
+          
+          <div>
+            <el-input
+              v-model="decodeOutput"
+              type="textarea"
+              :rows="6"
+              placeholder="解密结果"
+              readonly
+            >
+              <template #append>
+                <el-button @click="copyDecodeResult">复制</el-button>
+              </template>
+            </el-input>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <!-- desc -->
+    <ToolDetail title="描述">
+      <el-text>
+        在线Base64加解密工具，支持文本的Base64编码和解码，可用于URL编码、数据传输等场景。
+      </el-text>
+    </ToolDetail>
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>