diff --git a/public/images/logo/imagewatermark.svg b/public/images/logo/imagewatermark.svg new file mode 100644 index 0000000..b3f603b --- /dev/null +++ b/public/images/logo/imagewatermark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/logo/m3u8player.svg b/public/images/logo/m3u8player.svg new file mode 100644 index 0000000..6a7d24a --- /dev/null +++ b/public/images/logo/m3u8player.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/logo/reactiontest.svg b/public/images/logo/reactiontest.svg new file mode 100644 index 0000000..ba979ba --- /dev/null +++ b/public/images/logo/reactiontest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Tools/ASCIIWordPic/ASCIIWordPic.vue b/src/components/Tools/ASCIIWordPic/ASCIIWordPic.vue index 919abc9..dc6c095 100644 --- a/src/components/Tools/ASCIIWordPic/ASCIIWordPic.vue +++ b/src/components/Tools/ASCIIWordPic/ASCIIWordPic.vue @@ -113,7 +113,7 @@ const gen = () => { console.log(';----', err) return; } - contentRes.value = data + contentRes.value = data ?? '' }) } diff --git a/src/components/Tools/AesEncrypt/AesEncrypt.vue b/src/components/Tools/AesEncrypt/AesEncrypt.vue new file mode 100644 index 0000000..b368390 --- /dev/null +++ b/src/components/Tools/AesEncrypt/AesEncrypt.vue @@ -0,0 +1,419 @@ + + + + + \ No newline at end of file diff --git a/src/components/Tools/ColorPalette/ColorPalette.vue b/src/components/Tools/ColorPalette/ColorPalette.vue index 8e34201..359998c 100644 --- a/src/components/Tools/ColorPalette/ColorPalette.vue +++ b/src/components/Tools/ColorPalette/ColorPalette.vue @@ -73,6 +73,159 @@ + + +
+
+
+ {{ color.name }} + {{ color.hex }} +
+
+
+ + + +
+
+
+ {{ color.name }} + {{ color.hex }} +
+
+
+ + + +
+
+
+ {{ color.name }} + {{ color.hex }} +
+
+
+ + + +
+
+
+ {{ color.name }} + {{ color.hex }} +
+
+
+ + + +
+
+
+ {{ color.name }} + {{ color.hex }} +
+
+
+ + + +
+
+
+ {{ color.name }} + {{ color.hex }} +
+
+
+ + + +
+
+
+ {{ color.name }} + {{ color.hex }} +
+
+
+ + + +
+
+
+ {{ color.name }} + {{ color.hex }} +
+
+
+ + + +
+
+
+ {{ color.name }} + {{ color.hex }} +
+
+
+ @@ -81,7 +234,7 @@ - 在线色板工具，提供基础颜色、渐变色、Material Design 颜色和扁平化颜色，点击颜色可复制颜色值，方便设计和开发使用。 + 在线色板工具，提供基础颜色、渐变色、Material Design 颜色、扁平化颜色、霓虹色、自然色、金属色、复古色、季节色、莫兰迪色、马卡龙色、工业风和中国传统色，点击颜色可复制颜色值，方便设计和开发使用。 @@ -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(() => { diff --git a/src/components/Tools/Palettes/Palettes.vue b/src/components/Tools/Palettes/Palettes.vue deleted file mode 100644 index 7890ad5..0000000 --- a/src/components/Tools/Palettes/Palettes.vue +++ /dev/null @@ -1,90 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/Tools/tools.ts b/src/components/Tools/tools.ts index c913eea..c729171 100644 --- a/src/components/Tools/tools.ts +++ b/src/components/Tools/tools.ts @@ -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: '其他工具', + }, ] } ] diff --git a/src/router/router.ts b/src/router/router.ts index a71a5a8..c5aac14 100644 --- a/src/router/router.ts +++ b/src/router/router.ts @@ -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加解密工具，支持多种加密模式和填充方式，提供安全可靠的数据加密解密服务', } }, {