144 lines
3.6 KiB
Vue
144 lines
3.6 KiB
Vue
<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> |