feat： 调整工具分类
This commit is contained in:
陶然
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1772435612733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40056" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M735.78125 579.9374999999999c-141.46875 0-256.21875-114.65625-256.21875-256.03125S594.3125 67.78125 735.78125 67.78125 992 182.4375 992 323.8125 877.25 579.9374999999999 735.78125 579.9374999999999z m0-486.5625c-127.31250000000001 0-230.625 103.21875-230.625 230.4375 0 127.31250000000001 103.21875 230.4375 230.625 230.4375 127.31250000000001 0 230.625-103.21875 230.625-230.4375 0-127.21874999999999-103.21875-230.4375-230.625-230.4375z m85.78125 358.5v-46.59375h22.6875V242.34375H798.875v209.53125h-45.28125V195.84375h135.9375v256.03125h-67.96875zM594.875 195.84375h136.03125v46.59375h-90.65625v58.21875h90.65625v46.59375h-90.65625v58.21875h90.65625v46.59375H594.875V195.84375zM273.59375 388.3125c0-37.59375 30.375-68.25 67.78125-68.25s67.78125 30.656250000000004 67.78125 68.25c0 37.59375-30.375 68.25-67.78125 68.25s-67.78125-30.5625-67.78125-68.25zM493.71875 532.3125c15.28125 17.71875 32.53125 33.84375 51.375 47.8125L421.8125 756.1874999999999l-80.625-113.34375-81 111h-78.9375l159.84375-231.65625 80.4375 113.15625 72.1875-103.03125z m206.0625 108.84375l59.34375 112.59375h-71.53125l-69.46875-132.9375c26.15625 10.40625 53.53125 17.25 81.65625 20.34375zM117.21875 207.65625v623.625h711.09375V629.6249999999999c30.281249999999996-9.1875 58.875-22.6875 85.21875-40.3125v272.90625c0 29.8125-24.09375 54-53.71875 54H85.71875C56.09375 916.21875 32 891.9375 32 862.21875V176.71875C32 146.90625 56.09375 122.625 85.71875 122.625H487.625c-20.90625 25.6875-37.5 54.1875-49.5 84.9375H117.21875z" p-id="40057" fill="#1296db"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1772435561727" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36421" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.390625" height="200"><path d="M47.104 258.048h501.76c26.624 0 47.104-20.48 47.104-47.104s-20.48-47.104-47.104-47.104h-501.76C20.48 162.816 0 184.32 0 209.92s20.48 48.128 47.104 48.128z m0 239.616h501.76c26.624 0 47.104-20.48 47.104-47.104s-20.48-47.104-47.104-47.104h-501.76C20.48 403.456 0 423.936 0 450.56s20.48 47.104 47.104 47.104z m240.64 131.072H47.104C20.48 628.736 0 649.216 0 675.84c0 26.624 20.48 47.104 47.104 47.104h242.688c26.624 0 47.104-20.48 47.104-47.104-2.048-26.624-22.528-47.104-49.152-47.104z m588.8-384c-33.792-17.408-80.896-44.032-98.304-80.896 0-18.432-17.408-35.84-35.84-35.84S706.56 145.408 706.56 163.84v468.992c-37.888-18.432-106.496-13.312-160.768 17.408-82.944 45.056-118.784 132.096-80.896 193.536 35.84 60.416 134.144 71.68 216.064 26.624 58.368-31.744 96.256-87.04 98.304-138.24V325.632c118.784 0 189.44 47.104 164.864 164.864-6.144 20.48-11.264 44.032-20.48 62.464-4.096 7.168-4.096 15.36 2.048 20.48 6.144 6.144 17.408 6.144 26.624-4.096 45.056-44.032 71.68-102.4 73.728-162.816-2.048-80.896-81.92-130.048-149.504-161.792z" fill="#CC66FF" p-id="36422"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1772432906138" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33999" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M617.890909 258.327273c56.180364 0 103.726545 47.546182 103.726546 103.749818v216.087273c0 17.291636-12.962909 30.254545-30.254546 30.254545s-30.254545-12.986182-30.254545-25.949091v-185.832727c0-8.634182-8.657455-17.291636-17.291637-17.291636-12.962909 0-17.291636 8.657455-17.291636 17.291636v514.327273c0 25.925818-21.597091 43.217455-43.217455 43.217454-21.597091 0-43.217455-21.620364-43.217454-43.217454V595.456c0-8.634182-8.657455-17.291636-17.291637-17.291636h-21.620363c-8.634182 0-17.268364 8.657455-17.268364 17.291636v315.508364c0 25.925818-21.620364 43.217455-43.217454 43.217454-25.949091 0-43.240727-21.620364-43.240728-43.217454 4.328727 0 4.328727-513.000727 4.328728-514.327273 0-8.634182-4.328727-17.291636-17.268364-17.291636-12.986182 0-17.314909 8.657455-17.314909 17.291636v181.527273c0 17.291636-12.962909 25.925818-30.254546 25.925818h-4.305454a29.556364 29.556364 0 0 1-30.254546-30.254546v-216.110545c0-56.180364 47.522909-99.397818 99.374546-99.397818h216.133818zM67.653818 493.847273h185.716364v36.305454h-185.716364V581.818182L0 512l67.653818-69.818182v51.665455zM1024 512l-67.653818 69.818182v-51.665455h-185.693091v-36.305454h185.693091V442.181818L1024 512zM522.798545 46.545455c51.851636 0 95.092364 43.217455 95.092364 95.092363 0 51.851636-43.240727 99.397818-95.092364 99.397818-51.874909 0-99.421091-43.217455-99.42109-95.092363 0-51.851636 43.240727-99.374545 99.42109-99.397818z" fill="#1296db" p-id="34000"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -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: '其他工具',
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
+2
-12
@@ -151,16 +151,6 @@ export const constantRoute = [
|
||||
description: '手持弹幕是一种新型的互动沟通工具，可以方便地为各种户外活动、演出嘉年华等活动增加趣味性和互动性。手持弹幕具有轻便、易携带、易操作等优点，可以让每个参与者都变成活动的一部分。同时，手持弹幕还可以通过预先编写的文本、表情等形式，表达参与者的情感和想法，实现沟通互动。在社交媒体时代，手持弹幕的使用也带来了更广泛的社交效应，增加了活动的互动性和传播度。无论是举办方还是参与者，手持弹幕都是一个非常有价值的互动工具。',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/palettes',
|
||||
component: () => import('@/components/Tools/Palettes/Palettes.vue'),
|
||||
name: 'palettes',
|
||||
meta: {
|
||||
title: "色板",
|
||||
keywords: '色板，颜色板',
|
||||
description: '在线复制颜色，好看的颜色组合色板',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/unit',
|
||||
component: () => import('@/components/Tools/Unit/Unit.vue'),
|
||||
@@ -463,12 +453,12 @@ export const constantRoute = [
|
||||
},
|
||||
{
|
||||
path: '/aes',
|
||||
component: () => import('@/components/Tools/AES/AES.vue'),
|
||||
component: () => import('@/components/Tools/AesEncrypt/AesEncrypt.vue'),
|
||||
name: 'aes',
|
||||
meta: {
|
||||
title: "AES加解密",
|
||||
keywords: 'AES加密,AES解密,加密工具,解密工具',
|
||||
description: '在线AES加解密工具，支持CBC和ECB模式，支持128位、192位、256位密钥长度',
|
||||
description: '在线AES加解密工具，支持多种加密模式和填充方式，提供安全可靠的数据加密解密服务',
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user