feat： 调整工具分类
This commit is contained in:
陶然
@@ -113,7 +113,7 @@ const gen = () => {
|
||||
console.log(';----', err)
|
||||
return;
|
||||
}
|
||||
contentRes.value = data
|
||||
contentRes.value = data ?? ''
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,419 @@
|
||||
<template>
|
||||
<div class="flex flex-col mt-3 flex-1">
|
||||
<DetailHeader :title="title"></DetailHeader>
|
||||
|
||||
<div class="p-4 rounded-2xl bg-white">
|
||||
<div class="tool-content">
|
||||
<div class="input-section">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="加密" name="encrypt">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<el-form label-width="120px">
|
||||
<el-form-item label="输入内容">
|
||||
<el-input
|
||||
v-model="encryptInput"
|
||||
type="textarea"
|
||||
:rows="6"
|
||||
placeholder="请输入待加密的明文"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="密钥">
|
||||
<el-input
|
||||
v-model="encryptKey"
|
||||
type="password"
|
||||
placeholder="请输入密钥"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="加密模式">
|
||||
<el-select v-model="encryptMode" placeholder="请选择加密模式">
|
||||
<el-option label="CBC" value="cbc" />
|
||||
<el-option label="ECB" value="ecb" />
|
||||
<el-option label="CFB" value="cfb" />
|
||||
<el-option label="CTR" value="ctr" />
|
||||
<el-option label="OFB" value="ofb" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="填充方式">
|
||||
<el-select v-model="encryptPadding" placeholder="请选择填充方式">
|
||||
<el-option label="Pkcs7" value="pkcs7" />
|
||||
<el-option label="Iso97971" value="iso97971" />
|
||||
<el-option label="AnsiX923" value="ansix923" />
|
||||
<el-option label="ZeroPadding" value="zeropadding" />
|
||||
<el-option label="NoPadding" value="nopadding" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="初始向量 (IV)" v-if="encryptMode !== 'ecb'">
|
||||
<el-input
|
||||
v-model="encryptIv"
|
||||
placeholder="请输入16位初始向量"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="输出编码">
|
||||
<el-select v-model="encryptOutputEncoding" placeholder="请选择输出编码">
|
||||
<el-option label="Base64" value="base64" />
|
||||
<el-option label="HEX" value="hex" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="encrypt">加密</el-button>
|
||||
<el-button @click="clearEncrypt">清空</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-form label-width="120px">
|
||||
<el-form-item label="加密结果">
|
||||
<el-input
|
||||
v-model="encryptOutput"
|
||||
type="textarea"
|
||||
:rows="10"
|
||||
placeholder="加密后的密文将显示在这里"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="copyEncryptResult">复制结果</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="解密" name="decrypt">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<el-form label-width="120px">
|
||||
<el-form-item label="输入内容">
|
||||
<el-input
|
||||
v-model="decryptInput"
|
||||
type="textarea"
|
||||
:rows="6"
|
||||
placeholder="请输入待解密的密文"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="密钥">
|
||||
<el-input
|
||||
v-model="decryptKey"
|
||||
type="password"
|
||||
placeholder="请输入密钥"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="解密模式">
|
||||
<el-select v-model="decryptMode" placeholder="请选择解密模式">
|
||||
<el-option label="CBC" value="cbc" />
|
||||
<el-option label="ECB" value="ecb" />
|
||||
<el-option label="CFB" value="cfb" />
|
||||
<el-option label="CTR" value="ctr" />
|
||||
<el-option label="OFB" value="ofb" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="填充方式">
|
||||
<el-select v-model="decryptPadding" placeholder="请选择填充方式">
|
||||
<el-option label="Pkcs7" value="pkcs7" />
|
||||
<el-option label="Iso97971" value="iso97971" />
|
||||
<el-option label="AnsiX923" value="ansix923" />
|
||||
<el-option label="ZeroPadding" value="zeropadding" />
|
||||
<el-option label="NoPadding" value="nopadding" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="初始向量 (IV)" v-if="decryptMode !== 'ecb'">
|
||||
<el-input
|
||||
v-model="decryptIv"
|
||||
placeholder="请输入16位初始向量"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="输入编码">
|
||||
<el-select v-model="decryptInputEncoding" placeholder="请选择输入编码">
|
||||
<el-option label="Base64" value="base64" />
|
||||
<el-option label="HEX" value="hex" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="decrypt">解密</el-button>
|
||||
<el-button @click="clearDecrypt">清空</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-form label-width="120px">
|
||||
<el-form-item label="解密结果">
|
||||
<el-input
|
||||
v-model="decryptOutput"
|
||||
type="textarea"
|
||||
:rows="10"
|
||||
placeholder="解密后的明文将显示在这里"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="copyDecryptResult">复制结果</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- desc -->
|
||||
<ToolDetail title="描述">
|
||||
<el-text>
|
||||
在线AES加密解密工具，支持多种加密模式和填充方式，提供安全可靠的数据加密解密服务。
|
||||
</el-text>
|
||||
</ToolDetail>
|
||||
|
||||
<!-- 安全使用建议 -->
|
||||
<ToolDetail title="安全使用建议">
|
||||
<el-text>
|
||||
<ul>
|
||||
<li>使用强随机数生成器生成密钥和IV</li>
|
||||
<li>推荐使用CBC模式而非ECB模式</li>
|
||||
<li>定期更换密钥和IV</li>
|
||||
<li>妥善保管密钥，不要泄露给他人</li>
|
||||
<li>在生产环境中使用AES-256而非AES-128</li>
|
||||
</ul>
|
||||
</el-text>
|
||||
</ToolDetail>
|
||||
|
||||
<!-- 常见应用场景 -->
|
||||
<ToolDetail title="常见应用场景">
|
||||
<el-text>
|
||||
<ul>
|
||||
<li>数据传输加密：保护网络传输中的敏感数据</li>
|
||||
<li>文件存储加密：加密本地存储的重要文件</li>
|
||||
<li>API通信加密：保护API接口的数据安全</li>
|
||||
</ul>
|
||||
</el-text>
|
||||
</ToolDetail>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||||
import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
|
||||
import CryptoJS from 'crypto-js';
|
||||
|
||||
const title = "AES加密解密"
|
||||
|
||||
const activeTab = ref('encrypt');
|
||||
|
||||
// 加密相关
|
||||
const encryptInput = ref('');
|
||||
const encryptKey = ref('');
|
||||
const encryptMode = ref('cbc');
|
||||
const encryptPadding = ref('pkcs7');
|
||||
const encryptIv = ref('');
|
||||
const encryptOutputEncoding = ref('base64');
|
||||
const encryptOutput = ref('');
|
||||
|
||||
// 解密相关
|
||||
const decryptInput = ref('');
|
||||
const decryptKey = ref('');
|
||||
const decryptMode = ref('cbc');
|
||||
const decryptPadding = ref('pkcs7');
|
||||
const decryptIv = ref('');
|
||||
const decryptInputEncoding = ref('base64');
|
||||
const decryptOutput = ref('');
|
||||
|
||||
// 获取加密模式
|
||||
const getCipherMode = (mode: string) => {
|
||||
switch (mode) {
|
||||
case 'cbc':
|
||||
return CryptoJS.mode.CBC;
|
||||
case 'ecb':
|
||||
return CryptoJS.mode.ECB;
|
||||
case 'cfb':
|
||||
return CryptoJS.mode.CFB;
|
||||
case 'ctr':
|
||||
return CryptoJS.mode.CTR;
|
||||
case 'ofb':
|
||||
return CryptoJS.mode.OFB;
|
||||
default:
|
||||
return CryptoJS.mode.CBC;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取填充方式
|
||||
const getPadding = (padding: string) => {
|
||||
switch (padding) {
|
||||
case 'pkcs7':
|
||||
return CryptoJS.pad.Pkcs7;
|
||||
case 'iso97971':
|
||||
return CryptoJS.pad.Iso97971;
|
||||
case 'ansix923':
|
||||
return CryptoJS.pad.AnsiX923;
|
||||
case 'zeropadding':
|
||||
return CryptoJS.pad.ZeroPadding;
|
||||
case 'nopadding':
|
||||
return CryptoJS.pad.NoPadding;
|
||||
default:
|
||||
return CryptoJS.pad.Pkcs7;
|
||||
}
|
||||
};
|
||||
|
||||
// 加密函数
|
||||
const encrypt = () => {
|
||||
if (!encryptInput.value) {
|
||||
ElMessage.warning('请输入待加密的明文');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!encryptKey.value) {
|
||||
ElMessage.warning('请输入密钥');
|
||||
return;
|
||||
}
|
||||
|
||||
if (encryptMode.value !== 'ecb' && !encryptIv.value) {
|
||||
ElMessage.warning('请输入初始向量 (IV)');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const key = CryptoJS.enc.Utf8.parse(encryptKey.value);
|
||||
const iv = encryptMode.value !== 'ecb' ? CryptoJS.enc.Utf8.parse(encryptIv.value) : undefined;
|
||||
const mode = getCipherMode(encryptMode.value);
|
||||
const padding = getPadding(encryptPadding.value);
|
||||
|
||||
const cipher = CryptoJS.AES.encrypt(encryptInput.value, key, {
|
||||
iv: iv,
|
||||
mode: mode,
|
||||
padding: padding
|
||||
});
|
||||
|
||||
if (encryptOutputEncoding.value === 'base64') {
|
||||
encryptOutput.value = cipher.toString();
|
||||
} else {
|
||||
encryptOutput.value = cipher.ciphertext.toString(CryptoJS.enc.Hex);
|
||||
}
|
||||
|
||||
ElMessage.success('加密成功');
|
||||
} catch (error) {
|
||||
ElMessage.error('加密失败：' + (error as Error).message);
|
||||
}
|
||||
};
|
||||
|
||||
// 解密函数
|
||||
const decrypt = () => {
|
||||
if (!decryptInput.value) {
|
||||
ElMessage.warning('请输入待解密的密文');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!decryptKey.value) {
|
||||
ElMessage.warning('请输入密钥');
|
||||
return;
|
||||
}
|
||||
|
||||
if (decryptMode.value !== 'ecb' && !decryptIv.value) {
|
||||
ElMessage.warning('请输入初始向量 (IV)');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const key = CryptoJS.enc.Utf8.parse(decryptKey.value);
|
||||
const iv = decryptMode.value !== 'ecb' ? CryptoJS.enc.Utf8.parse(decryptIv.value) : undefined;
|
||||
const mode = getCipherMode(decryptMode.value);
|
||||
const padding = getPadding(decryptPadding.value);
|
||||
|
||||
let ciphertext;
|
||||
if (decryptInputEncoding.value === 'base64') {
|
||||
ciphertext = decryptInput.value;
|
||||
} else {
|
||||
ciphertext = CryptoJS.enc.Hex.parse(decryptInput.value);
|
||||
}
|
||||
|
||||
const decrypted = CryptoJS.AES.decrypt(ciphertext, key, {
|
||||
iv: iv,
|
||||
mode: mode,
|
||||
padding: padding
|
||||
});
|
||||
|
||||
decryptOutput.value = decrypted.toString(CryptoJS.enc.Utf8);
|
||||
ElMessage.success('解密成功');
|
||||
} catch (error) {
|
||||
ElMessage.error('解密失败：' + (error as Error).message);
|
||||
}
|
||||
};
|
||||
|
||||
// 清空加密
|
||||
const clearEncrypt = () => {
|
||||
encryptInput.value = '';
|
||||
encryptKey.value = '';
|
||||
encryptIv.value = '';
|
||||
encryptOutput.value = '';
|
||||
};
|
||||
|
||||
// 清空解密
|
||||
const clearDecrypt = () => {
|
||||
decryptInput.value = '';
|
||||
decryptKey.value = '';
|
||||
decryptIv.value = '';
|
||||
decryptOutput.value = '';
|
||||
};
|
||||
|
||||
// 复制加密结果
|
||||
const copyEncryptResult = () => {
|
||||
if (!encryptOutput.value) {
|
||||
ElMessage.warning('没有可复制的内容');
|
||||
return;
|
||||
}
|
||||
|
||||
navigator.clipboard.writeText(encryptOutput.value).then(() => {
|
||||
ElMessage.success('已复制加密结果');
|
||||
}).catch(() => {
|
||||
ElMessage.error('复制失败');
|
||||
});
|
||||
};
|
||||
|
||||
// 复制解密结果
|
||||
const copyDecryptResult = () => {
|
||||
if (!decryptOutput.value) {
|
||||
ElMessage.warning('没有可复制的内容');
|
||||
return;
|
||||
}
|
||||
|
||||
navigator.clipboard.writeText(decryptOutput.value).then(() => {
|
||||
ElMessage.success('已复制解密结果');
|
||||
}).catch(() => {
|
||||
ElMessage.error('复制失败');
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tool-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.input-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-cols-1.md\:grid-cols-2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -73,6 +73,159 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="霓虹色" name="neon">
|
||||
<div class="color-grid">
|
||||
<div
|
||||
v-for="color in neonColors"
|
||||
:key="color.hex"
|
||||
class="color-item"
|
||||
:style="{ backgroundColor: color.hex }"
|
||||
@click="copyColor(color)"
|
||||
>
|
||||
<div class="color-info">
|
||||
<span class="color-name">{{ color.name }}</span>
|
||||
<span class="color-hex">{{ color.hex }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="自然色" name="nature">
|
||||
<div class="color-grid">
|
||||
<div
|
||||
v-for="color in natureColors"
|
||||
:key="color.hex"
|
||||
class="color-item"
|
||||
:style="{ backgroundColor: color.hex }"
|
||||
@click="copyColor(color)"
|
||||
>
|
||||
<div class="color-info">
|
||||
<span class="color-name">{{ color.name }}</span>
|
||||
<span class="color-hex">{{ color.hex }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="金属色" name="metal">
|
||||
<div class="color-grid">
|
||||
<div
|
||||
v-for="color in metalColors"
|
||||
:key="color.hex"
|
||||
class="color-item"
|
||||
:style="{ backgroundColor: color.hex }"
|
||||
@click="copyColor(color)"
|
||||
>
|
||||
<div class="color-info">
|
||||
<span class="color-name">{{ color.name }}</span>
|
||||
<span class="color-hex">{{ color.hex }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="复古色" name="vintage">
|
||||
<div class="color-grid">
|
||||
<div
|
||||
v-for="color in vintageColors"
|
||||
:key="color.hex"
|
||||
class="color-item"
|
||||
:style="{ backgroundColor: color.hex }"
|
||||
@click="copyColor(color)"
|
||||
>
|
||||
<div class="color-info">
|
||||
<span class="color-name">{{ color.name }}</span>
|
||||
<span class="color-hex">{{ color.hex }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="季节色" name="seasonal">
|
||||
<div class="color-grid">
|
||||
<div
|
||||
v-for="color in seasonalColors"
|
||||
:key="color.hex"
|
||||
class="color-item"
|
||||
:style="{ backgroundColor: color.hex }"
|
||||
@click="copyColor(color)"
|
||||
>
|
||||
<div class="color-info">
|
||||
<span class="color-name">{{ color.name }}</span>
|
||||
<span class="color-hex">{{ color.hex }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="莫兰迪色" name="morandi">
|
||||
<div class="color-grid">
|
||||
<div
|
||||
v-for="color in morandiColors"
|
||||
:key="color.hex"
|
||||
class="color-item"
|
||||
:style="{ backgroundColor: color.hex }"
|
||||
@click="copyColor(color)"
|
||||
>
|
||||
<div class="color-info">
|
||||
<span class="color-name">{{ color.name }}</span>
|
||||
<span class="color-hex">{{ color.hex }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="马卡龙色" name="macaron">
|
||||
<div class="color-grid">
|
||||
<div
|
||||
v-for="color in macaronColors"
|
||||
:key="color.hex"
|
||||
class="color-item"
|
||||
:style="{ backgroundColor: color.hex }"
|
||||
@click="copyColor(color)"
|
||||
>
|
||||
<div class="color-info">
|
||||
<span class="color-name">{{ color.name }}</span>
|
||||
<span class="color-hex">{{ color.hex }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="工业风" name="industrial">
|
||||
<div class="color-grid">
|
||||
<div
|
||||
v-for="color in industrialColors"
|
||||
:key="color.hex"
|
||||
class="color-item"
|
||||
:style="{ backgroundColor: color.hex }"
|
||||
@click="copyColor(color)"
|
||||
>
|
||||
<div class="color-info">
|
||||
<span class="color-name">{{ color.name }}</span>
|
||||
<span class="color-hex">{{ color.hex }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="中国传统色" name="chinese">
|
||||
<div class="color-grid">
|
||||
<div
|
||||
v-for="color in chineseColors"
|
||||
:key="color.hex"
|
||||
class="color-item"
|
||||
:style="{ backgroundColor: color.hex }"
|
||||
@click="copyColor(color)"
|
||||
>
|
||||
<div class="color-info">
|
||||
<span class="color-name">{{ color.name }}</span>
|
||||
<span class="color-hex">{{ color.hex }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
@@ -81,7 +234,7 @@
|
||||
<!-- desc -->
|
||||
<ToolDetail title="描述">
|
||||
<el-text>
|
||||
在线色板工具，提供基础颜色、渐变色、Material Design 颜色和扁平化颜色，点击颜色可复制颜色值，方便设计和开发使用。
|
||||
在线色板工具，提供基础颜色、渐变色、Material Design 颜色、扁平化颜色、霓虹色、自然色、金属色、复古色、季节色、莫兰迪色、马卡龙色、工业风和中国传统色，点击颜色可复制颜色值，方便设计和开发使用。
|
||||
</el-text>
|
||||
</ToolDetail>
|
||||
|
||||
@@ -170,6 +323,150 @@ const flatColors = [
|
||||
{ name: 'Flat Asbestos', hex: '#7F8C8D' },
|
||||
];
|
||||
|
||||
// 霓虹色
|
||||
const neonColors = [
|
||||
{ name: 'Neon Pink', hex: '#FF1493' },
|
||||
{ name: 'Neon Blue', hex: '#00FFFF' },
|
||||
{ name: 'Neon Green', hex: '#39FF14' },
|
||||
{ name: 'Neon Yellow', hex: '#FFFF00' },
|
||||
{ name: 'Neon Orange', hex: '#FF6600' },
|
||||
{ name: 'Neon Purple', hex: '#9932CC' },
|
||||
{ name: 'Neon Red', hex: '#FF073A' },
|
||||
{ name: 'Neon Cyan', hex: '#00FFFF' },
|
||||
{ name: 'Neon Magenta', hex: '#FF00FF' },
|
||||
{ name: 'Neon Lime', hex: '#32CD32' },
|
||||
{ name: 'Neon Turquoise', hex: '#40E0D0' },
|
||||
{ name: 'Neon Lavender', hex: '#E6E6FA' },
|
||||
];
|
||||
|
||||
// 自然色
|
||||
const natureColors = [
|
||||
{ name: 'Forest Green', hex: '#228B22' },
|
||||
{ name: 'Earth Brown', hex: '#8B4513' },
|
||||
{ name: 'Sky Blue', hex: '#87CEEB' },
|
||||
{ name: 'Sunset Orange', hex: '#FF8C00' },
|
||||
{ name: 'Ocean Blue', hex: '#1E90FF' },
|
||||
{ name: 'Moss Green', hex: '#8A9A5B' },
|
||||
{ name: 'Sandy Beige', hex: '#F5DEB3' },
|
||||
{ name: 'Leaf Green', hex: '#008000' },
|
||||
{ name: 'Clay Brown', hex: '#B22222' },
|
||||
{ name: 'Dolphin Gray', hex: '#878787' },
|
||||
{ name: 'Coral Pink', hex: '#FF7F50' },
|
||||
{ name: 'Pine Green', hex: '#01796F' },
|
||||
];
|
||||
|
||||
// 金属色
|
||||
const metalColors = [
|
||||
{ name: 'Gold', hex: '#FFD700' },
|
||||
{ name: 'Silver', hex: '#C0C0C0' },
|
||||
{ name: 'Bronze', hex: '#CD7F32' },
|
||||
{ name: 'Copper', hex: '#B87333' },
|
||||
{ name: 'Platinum', hex: '#E5E4E2' },
|
||||
{ name: 'Brass', hex: '#B5A642' },
|
||||
{ name: 'Steel Blue', hex: '#4682B4' },
|
||||
{ name: 'Aluminum', hex: '#A9A9A9' },
|
||||
{ name: 'Chrome', hex: '#E0E0E0' },
|
||||
{ name: 'Titanium', hex: '#818589' },
|
||||
{ name: 'Zinc', hex: '#E8E8E8' },
|
||||
{ name: 'Lead', hex: '#696969' },
|
||||
];
|
||||
|
||||
// 复古色
|
||||
const vintageColors = [
|
||||
{ name: 'Sepia', hex: '#704214' },
|
||||
{ name: 'Mustard', hex: '#FFDB58' },
|
||||
{ name: 'Burgundy', hex: '#800020' },
|
||||
{ name: 'Teal', hex: '#008080' },
|
||||
{ name: 'Cream', hex: '#FFFDD0' },
|
||||
{ name: 'Olive', hex: '#808000' },
|
||||
{ name: 'Mauve', hex: '#E0B0FF' },
|
||||
{ name: 'Peach', hex: '#FFDAB9' },
|
||||
{ name: 'Sage', hex: '#9CAF88' },
|
||||
{ name: 'Navy', hex: '#000080' },
|
||||
{ name: 'Coral', hex: '#FF7F50' },
|
||||
{ name: 'Lavender', hex: '#E6E6FA' },
|
||||
];
|
||||
|
||||
// 季节色
|
||||
const seasonalColors = [
|
||||
{ name: 'Spring Green', hex: '#00FF7F' },
|
||||
{ name: 'Summer Yellow', hex: '#FFFF00' },
|
||||
{ name: 'Autumn Orange', hex: '#FF8C00' },
|
||||
{ name: 'Winter Blue', hex: '#1E90FF' },
|
||||
{ name: 'Cherry Blossom', hex: '#FFB7C5' },
|
||||
{ name: 'Beach Sand', hex: '#F4A460' },
|
||||
{ name: 'Fall Leaf', hex: '#8B4513' },
|
||||
{ name: 'Snow White', hex: '#FFFFFF' },
|
||||
{ name: 'Tulip Red', hex: '#FF0000' },
|
||||
{ name: 'Sunflower Yellow', hex: '#FFD700' },
|
||||
{ name: 'Pumpkin Orange', hex: '#FF7F50' },
|
||||
{ name: 'Icicle Blue', hex: '#B0E0E6' },
|
||||
];
|
||||
|
||||
// 莫兰迪色
|
||||
const morandiColors = [
|
||||
{ name: '莫兰迪灰', hex: '#9B9B9B' },
|
||||
{ name: '莫兰迪粉', hex: '#E8D8D1' },
|
||||
{ name: '莫兰迪蓝', hex: '#A8B8C8' },
|
||||
{ name: '莫兰迪绿', hex: '#A8B8A8' },
|
||||
{ name: '莫兰迪黄', hex: '#E8D8A8' },
|
||||
{ name: '莫兰迪紫', hex: '#B8A8C8' },
|
||||
{ name: '莫兰迪棕', hex: '#B8A89B' },
|
||||
{ name: '莫兰迪橙', hex: '#E8C8A8' },
|
||||
{ name: '莫兰迪青', hex: '#A8C8C8' },
|
||||
{ name: '莫兰迪红', hex: '#C8A8A8' },
|
||||
{ name: '莫兰迪灰蓝', hex: '#9B9BA8' },
|
||||
{ name: '莫兰迪灰绿', hex: '#9BA89B' },
|
||||
];
|
||||
|
||||
// 马卡龙色
|
||||
const macaronColors = [
|
||||
{ name: '马卡龙粉', hex: '#FFB6C1' },
|
||||
{ name: '马卡龙蓝', hex: '#87CEFA' },
|
||||
{ name: '马卡龙绿', hex: '#98FB98' },
|
||||
{ name: '马卡龙黄', hex: '#FFFACD' },
|
||||
{ name: '马卡龙紫', hex: '#E6E6FA' },
|
||||
{ name: '马卡龙橙', hex: '#FFA07A' },
|
||||
{ name: '马卡龙青', hex: '#E0FFFF' },
|
||||
{ name: '马卡龙红', hex: '#FFC0CB' },
|
||||
{ name: '马卡龙灰', hex: '#F0F0F0' },
|
||||
{ name: '马卡龙棕', hex: '#F5DEB3' },
|
||||
{ name: '马卡龙天蓝', hex: '#87CEEB' },
|
||||
{ name: '马卡龙薄荷', hex: '#98FB98' },
|
||||
];
|
||||
|
||||
// 工业风
|
||||
const industrialColors = [
|
||||
{ name: '工业黑', hex: '#2C2C2C' },
|
||||
{ name: '工业灰', hex: '#666666' },
|
||||
{ name: '工业银', hex: '#999999' },
|
||||
{ name: '工业红', hex: '#B22222' },
|
||||
{ name: '工业蓝', hex: '#4682B4' },
|
||||
{ name: '工业黄', hex: '#DAA520' },
|
||||
{ name: '工业绿', hex: '#228B22' },
|
||||
{ name: '工业橙', hex: '#FF8C00' },
|
||||
{ name: '工业棕', hex: '#8B4513' },
|
||||
{ name: '工业青', hex: '#008080' },
|
||||
{ name: '工业紫', hex: '#8A2BE2' },
|
||||
{ name: '工业白', hex: '#F5F5F5' },
|
||||
];
|
||||
|
||||
// 中国传统色
|
||||
const chineseColors = [
|
||||
{ name: '胭脂红', hex: '#E44B4E' },
|
||||
{ name: '黛青', hex: '#4A6C8C' },
|
||||
{ name: '琉璃黄', hex: '#FFD700' },
|
||||
{ name: '玉脂白', hex: '#F7F7F7' },
|
||||
{ name: '水墨黑', hex: '#1A1A1A' },
|
||||
{ name: '竹青', hex: '#9DB47E' },
|
||||
{ name: '朱砂红', hex: '#C93756' },
|
||||
{ name: '石青', hex: '#557799' },
|
||||
{ name: '金黄', hex: '#E6B422' },
|
||||
{ name: '藕荷粉', hex: '#E8B4B8' },
|
||||
{ name: '松绿', hex: '#3A5F0B' },
|
||||
{ name: '琥珀色', hex: '#E6C200' },
|
||||
];
|
||||
|
||||
// 复制颜色
|
||||
const copyColor = (color: { name: string; hex: string }) => {
|
||||
navigator.clipboard.writeText(color.hex).then(() => {
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||||
import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
|
||||
import { copy } from '@/utils/string'
|
||||
const info = reactive({
|
||||
title: "色板",
|
||||
palettes: [
|
||||
{
|
||||
theme: 'last summer day', //
|
||||
item: ['#A7C5C5', '#DEE0D5', '#E2AC48', '#B96028', '#983C2D'],
|
||||
},
|
||||
{
|
||||
theme: 'Hazy Summer Afternoon', //
|
||||
item: ['#26C4A5', '#54D99F', '#ACE08C', '#E8E284', '#F2B652'],
|
||||
},
|
||||
{
|
||||
theme: 'Summering', //
|
||||
item: ['#FFBE4C', '#B33127', '#93EDFF', '#648FAD', '#FFFFFF'],
|
||||
},
|
||||
{
|
||||
theme: 'Bare August — Footcare Essentials', //
|
||||
item: ['#F2636F', '#F2858E', '#F2AEB4', '#F27999', '#F2D9D0'],
|
||||
},
|
||||
{
|
||||
theme: 'Big Vilnius Summer Loto', //
|
||||
item: ['#D90416', '#BF2A45', '#528C49', '#BF7B54', '#F28D8D'],
|
||||
},
|
||||
{
|
||||
theme: 'Illustration Design', //
|
||||
item: ['#D9D2D6', '#010326', '#4C5D73', '#808C65', '#F2E750'],
|
||||
},
|
||||
{
|
||||
theme: 'Beautiful tropical beach with blue sky and white clouds abstract texture background', //
|
||||
item: ['#04B2D9', '#CEECF2', '#04C4D9', '#15BFBF', '#D9D0C7'],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
//copy
|
||||
const copyRes = async (resStr: string) => {
|
||||
copy(resStr)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col mt-3 flex-1">
|
||||
<DetailHeader :title="info.title"></DetailHeader>
|
||||
|
||||
<div class="">
|
||||
<div class="flex flex-col">
|
||||
<div v-for="(item, index) in info.palettes" :key="index" class="flex flex-col mb-3">
|
||||
<div class="flex h-28 rounded-lg overflow-hidden items-center">
|
||||
<span
|
||||
v-for="(color, index) in item.item"
|
||||
:key="index"
|
||||
class="w-1/5 h-full color-palette"
|
||||
:style="'background-color:' + color + ';'"
|
||||
@click="copyRes(color)"
|
||||
>
|
||||
<div class="color-text hidden flex items-center justify-center h-full w-full" :style="'color:' + color + ';'" >{{ color }}</div>
|
||||
</span>
|
||||
<!-- @change="(val: any) => (changeCheckBox(val, 3)) -->
|
||||
</div>
|
||||
<!-- <div class="">
|
||||
<el-text>主题：{{ item.theme }}</el-text>
|
||||
</div> -->
|
||||
<el-divider v-if="index != item.item.length + 1"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- desc -->
|
||||
<ToolDetail title="描述">
|
||||
<el-text>
|
||||
在线复制颜色，好看的颜色组合色板
|
||||
</el-text>
|
||||
</ToolDetail>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.color-palette:hover .color-text{
|
||||
display: flex;
|
||||
filter: grayscale(1) contrast(999) invert(1)
|
||||
}
|
||||
</style>
|
||||
+141
-150
@@ -161,15 +161,15 @@ export function getToolsCate() {
|
||||
cateId: 2,
|
||||
cate: '开发运维',
|
||||
},
|
||||
// {
|
||||
// id: 1,
|
||||
// title: 'AES加解密',
|
||||
// logo: '/images/logo/md5.png',
|
||||
// desc: '在线AES加解密工具，支持CBC和ECB模式，支持128位、192位、256位密钥长度',
|
||||
// url: '/aes/',
|
||||
// cateId: 2,
|
||||
// cate: '开发运维',
|
||||
// },
|
||||
{
|
||||
id: 1,
|
||||
title: 'AES加解密',
|
||||
logo: '/images/logo/md5.png',
|
||||
desc: '在线AES加解密工具，支持多种加密模式和填充方式，提供安全可靠的数据加密解密服务',
|
||||
url: '/aes/',
|
||||
cateId: 2,
|
||||
cate: '开发运维',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'Hash计算器',
|
||||
@@ -204,142 +204,7 @@ export function getToolsCate() {
|
||||
desc: '在线SQL格式化工具，用于美化和压缩SQL代码，支持自定义缩进大小',
|
||||
url: '/sqlformat/',
|
||||
cateId: 2,
|
||||
cate: '开发运维',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '文本替换',
|
||||
logo: '/images/logo/textreplace.svg',
|
||||
desc: '在线文本替换工具，支持普通文本和正则表达式替换，可用于批量修改文本内容',
|
||||
url: '/textreplace/',
|
||||
cateId: 3,
|
||||
cate: '文本处理',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '文本处理工作流',
|
||||
logo: '/images/logo/textworkflow.svg',
|
||||
desc: '在线文本处理工作流工具，允许用户定义一系列文本处理步骤并按顺序执行',
|
||||
url: '/textworkflow/',
|
||||
cateId: 3,
|
||||
cate: '文本处理',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'Emoji表情大全',
|
||||
logo: '/images/logo/emoji.svg',
|
||||
desc: '在线Emoji表情大全，提供各种分类的Emoji表情，点击即可复制到剪贴板',
|
||||
url: '/emoji/',
|
||||
cateId: 7,
|
||||
cate: '其他工具',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '词频统计',
|
||||
logo: '/images/logo/wordfrequency.svg',
|
||||
desc: '在线词频统计工具，用于统计文本中单词出现的频率，可用于文本分析、关键词提取等场景',
|
||||
url: '/wordfrequency/',
|
||||
cateId: 3,
|
||||
cate: '文本处理',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '词云生成',
|
||||
logo: '/images/logo/wordcloud.svg',
|
||||
desc: '根据输入文本生成词云图，支持自定义词云形状和颜色',
|
||||
url: '/wordcloud/',
|
||||
cateId: 3,
|
||||
cate: '文本处理',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '抽签工具',
|
||||
logo: '/images/logo/lottery.svg',
|
||||
desc: '输入多个选项，随机抽取一个或多个结果',
|
||||
url: '/lottery/',
|
||||
cateId: 9,
|
||||
cate: '选择随机',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '剪刀石头布',
|
||||
logo: '/images/logo/rockpaperscissors.svg',
|
||||
desc: '与电脑对战的剪刀石头布游戏',
|
||||
url: '/rockpaperscissors/',
|
||||
cateId: 9,
|
||||
cate: '选择随机',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '转盘工具',
|
||||
logo: '/images/logo/wheel.svg',
|
||||
desc: '自定义选项，旋转转盘随机选择结果',
|
||||
url: '/wheel/',
|
||||
cateId: 9,
|
||||
cate: '选择随机',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '传图取色',
|
||||
logo: '/images/logo/imagecolorpicker.svg',
|
||||
desc: '上传图片并点击图片获取颜色值',
|
||||
url: '/imagecolorpicker/',
|
||||
cateId: 5,
|
||||
cate: '图片处理',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '番茄时钟',
|
||||
logo: '/images/logo/pomodoro.svg',
|
||||
desc: '专注工作和休息的时间管理工具',
|
||||
url: '/pomodoro/',
|
||||
cateId: 7,
|
||||
cate: '其他工具',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '简易计算器',
|
||||
logo: '/images/logo/calculator.svg',
|
||||
desc: '基本的加减乘除计算工具',
|
||||
url: '/calculator/',
|
||||
cateId: 7,
|
||||
cate: '其他工具',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '反应速度测试',
|
||||
logo: '/images/logo/JSForamt.png',
|
||||
desc: '测试你的反应速度，点击变色的方块',
|
||||
url: '/reactiontest/',
|
||||
cateId: 7,
|
||||
cate: '其他工具',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'm3u8在线播放',
|
||||
logo: '/images/logo/JSForamt.png',
|
||||
desc: '播放m3u8格式的视频流',
|
||||
url: '/m3u8player/',
|
||||
cateId: 7,
|
||||
cate: '其他工具',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '图片水印添加',
|
||||
logo: '/images/logo/JSForamt.png',
|
||||
desc: '上传图片并添加文字水印',
|
||||
url: '/imagewatermark/',
|
||||
cateId: 5,
|
||||
cate: '图片处理',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '色板工具',
|
||||
logo: '/images/logo/JSForamt.png',
|
||||
desc: '提供各种颜色的色板，点击颜色可复制颜色值',
|
||||
url: '/colorpalette/',
|
||||
cateId: 7,
|
||||
cate: '其他工具',
|
||||
cate: '开发运维'
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -402,6 +267,33 @@ export function getToolsCate() {
|
||||
cateId: 3,
|
||||
cate: '文本处理'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '文本替换',
|
||||
logo: '/images/logo/textreplace.svg',
|
||||
desc: '在线文本替换工具，支持普通文本和正则表达式替换，可用于批量修改文本内容',
|
||||
url: '/textreplace/',
|
||||
cateId: 3,
|
||||
cate: '文本处理',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '文本处理工作流',
|
||||
logo: '/images/logo/textworkflow.svg',
|
||||
desc: '在线文本处理工作流工具，允许用户定义一系列文本处理步骤并按顺序执行',
|
||||
url: '/textworkflow/',
|
||||
cateId: 3,
|
||||
cate: '文本处理',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '词频统计',
|
||||
logo: '/images/logo/wordfrequency.svg',
|
||||
desc: '在线词频统计工具，用于统计文本中单词出现的频率，可用于文本分析、关键词提取等场景',
|
||||
url: '/wordfrequency/',
|
||||
cateId: 3,
|
||||
cate: '文本处理',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -560,6 +452,24 @@ export function getToolsCate() {
|
||||
cateId: 5,
|
||||
cate: '图片处理',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '传图取色',
|
||||
logo: '/images/logo/imagecolorpicker.svg',
|
||||
desc: '上传图片并点击图片获取颜色值',
|
||||
url: '/imagecolorpicker/',
|
||||
cateId: 5,
|
||||
cate: '图片处理',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '图片水印添加',
|
||||
logo: '/images/logo/imagewatermark.svg',
|
||||
desc: '上传图片并添加文字水印',
|
||||
url: '/imagewatermark/',
|
||||
cateId: 5,
|
||||
cate: '图片处理',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -601,7 +511,16 @@ export function getToolsCate() {
|
||||
url: '/scatter/',
|
||||
cateId: 8,
|
||||
cate: '数据图表',
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '词云生成',
|
||||
logo: '/images/logo/wordcloud.svg',
|
||||
desc: '根据输入文本生成词云图，支持自定义词云形状和颜色',
|
||||
url: '/wordcloud/',
|
||||
cateId: 8,
|
||||
cate: '数据图表',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -645,6 +564,24 @@ export function getToolsCate() {
|
||||
cateId: 9,
|
||||
cate: '选择随机',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '抽签工具',
|
||||
logo: '/images/logo/lottery.svg',
|
||||
desc: '输入多个选项，随机抽取一个或多个结果',
|
||||
url: '/lottery/',
|
||||
cateId: 9,
|
||||
cate: '选择随机',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '转盘工具',
|
||||
logo: '/images/logo/wheel.svg',
|
||||
desc: '自定义选项，旋转转盘随机选择结果',
|
||||
url: '/wheel/',
|
||||
cateId: 9,
|
||||
cate: '选择随机',
|
||||
},
|
||||
]
|
||||
},
|
||||
// {
|
||||
@@ -699,10 +636,10 @@ export function getToolsCate() {
|
||||
id: 1,
|
||||
title: '色板',
|
||||
logo: '/images/logo/palettes.png',
|
||||
desc: '包含纯色、渐变与阶梯色和常用色彩组合',
|
||||
url: '/palettes/',
|
||||
desc: '提供各种颜色的色板，点击颜色可复制颜色值',
|
||||
url: '/colorpalette/',
|
||||
cateId: 7,
|
||||
cate: '其他工具'
|
||||
cate: '其他工具',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
@@ -712,7 +649,61 @@ export function getToolsCate() {
|
||||
url: '/colorpicker/',
|
||||
cateId: 7,
|
||||
cate: '其他工具'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '番茄时钟',
|
||||
logo: '/images/logo/pomodoro.svg',
|
||||
desc: '专注工作和休息的时间管理工具',
|
||||
url: '/pomodoro/',
|
||||
cateId: 7,
|
||||
cate: '其他工具',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '反应速度测试',
|
||||
logo: '/images/logo/reactiontest.svg',
|
||||
desc: '测试你的反应速度，点击变色的方块',
|
||||
url: '/reactiontest/',
|
||||
cateId: 7,
|
||||
cate: '其他工具',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'm3u8在线播放',
|
||||
logo: '/images/logo/m3u8player.svg',
|
||||
desc: '播放m3u8格式的视频流',
|
||||
url: '/m3u8player/',
|
||||
cateId: 7,
|
||||
cate: '其他工具',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '剪刀石头布',
|
||||
logo: '/images/logo/rockpaperscissors.svg',
|
||||
desc: '与电脑对战的剪刀石头布游戏',
|
||||
url: '/rockpaperscissors/',
|
||||
cateId: 7,
|
||||
cate: '其他工具',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'Emoji表情大全',
|
||||
logo: '/images/logo/emoji.svg',
|
||||
desc: '在线Emoji表情大全，提供各种分类的Emoji表情，点击即可复制到剪贴板',
|
||||
url: '/emoji/',
|
||||
cateId: 7,
|
||||
cate: '其他工具',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '简易计算器',
|
||||
logo: '/images/logo/calculator.svg',
|
||||
desc: '基本的加减乘除计算工具',
|
||||
url: '/calculator/',
|
||||
cateId: 7,
|
||||
cate: '其他工具',
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user