yeyin/tools-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: docker部署方案

Browse Source
This commit is contained in:
osiris
2024-05-15 17:21:54 +08:00
parent ad8a1179cd
commit 097d8fc0b8
15 changed files with 128 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/tools/index.ts
-27
View File
@@ -1,27 +0,0 @@
//统一管理咱们项目用户相关的接口
import request from '@/utils/request'
import type {
ToolsReqData,
ToolsResponseData,
ToolCateResponseData,
ToolRecommendResponseData,
} from './type'
//项目用户相关的请求地址
enum API {
//获取tools
GET_TOOLS = '/tools',
//获取tool cate
GET_TOOL_CATES = '/tool/cates',
//获取推荐
GET_TOOL_RECOMMEND = '/tool/recommends',
}
//获取tools
export const getTools = (data: ToolsReqData) => request.get<any, ToolsResponseData>(API.GET_TOOLS, {
params: data
})
//获取tool cate
export const getToolCate = () => request.get<any, ToolCateResponseData>(API.GET_TOOL_CATES)
//获取推荐
export const getToolRecommend = () => request.get<any, ToolRecommendResponseData>(API.GET_TOOL_RECOMMEND)
src/components/Layout/Header/Header.vue
+1 -1
View File
@@ -4,7 +4,7 @@ import { Search } from '@element-plus/icons-vue';
import { useToolsStore } from '@/store/modules/tools'
import { useComponentStore } from '@/store/modules/component'
import 'element-plus/theme-chalk/display.css'
import { ToolsInfo } from '@/api/tools/type';
import { ToolsInfo } from '@/components/Tools/tools.type.ts';
import router from '@/router';
// const isNavDrawer = ref(false)
src/components/Layout/Right/Right.vue
-25
View File
@@ -1,6 +1,5 @@
<script setup lang="ts">
import { Tools } from '@element-plus/icons-vue'
import { Message } from '@element-plus/icons-vue'
import { reactive, onMounted } from 'vue';
import { useToolsStore } from '@/store/modules/tools'
const info = reactive({
@@ -21,42 +20,18 @@ const info = reactive({
//store
const toolsStore = useToolsStore()
//获取随机推荐
const getToolRecommend = async () => {
try {
await toolsStore.getToolRecommend()
} catch (e) {
console.log(e)
}
}
//点击走马灯
const clickCarousel = (url: string) => {
let w = window.open('')
w?.document.write(`<!DOCTYPE html><html><body ><img src='${url}'/></body></html>`)
}
//反馈
const feedback = () => {
window.open(info.feedbackUrl)
}
onMounted(() => {
getToolRecommend()
})
</script>
<template>
<div>
<!-- feedback -->
<div class="flex flex-col text-center mt-3 border-solid rounded border-gray border p-3 c-xs:mr-3 c-xs:ml-3">
<div @click="feedback()" class="text-2xl flex items-center justify-center cursor-pointer">
<el-icon><Message /></el-icon>
<div class="ml-2">
建议反馈
</div>
</div>
</div>
<!-- adv -->
<div class="mt-3" v-if="info.advShow == 'true'">
<el-carousel
src/components/Tools/tools.ts
+394
View File
@@ -0,0 +1,394 @@
import type { ToolsReqData } from '@/components/Tools/tools.type.ts'
//获取tools分类与对应的工具
export function getToolsCate() {
return [
{
id: 2,
title: '开发运维',
icon: '',
list: [
{
id: 1,
title: '随机密码生成',
logo: '/images/logo/keywords.png',
desc: '密码生成器、随机字符串生成,批量生成',
url: '/random_password',
cateId: 2,
cate: '开发运维',
},
{
id: 1,
title: 'URL编码/解码',
logo: '/images/logo/url.png',
desc: 'URL在线编码解码工具（UrlEncode编码 和 UrlDecode解码）',
url: '/urlencode',
cateId: 2,
cate: '开发运维',
},
{
id: 1,
title: 'UUID生成器',
logo: '/images/logo/uuid.png',
desc: '批量生成UUID',
url: '/uuid',
cateId: 2,
cate: '开发运维',
},
{
id: 1,
title: '时间戳转换',
logo: '/images/logo/Time.png',
desc: '在线时间戳转换工具以及获取当前时间戳',
url: '/timetran',
cateId: 2,
cate: '开发运维',
},
{
id: 1,
title: 'MD5在线加密',
logo: '/images/logo/md5.png',
desc: 'MD5在线加密,长度包含32位、16位',
url: '/MD5',
cateId: 2,
cate: '开发运维',
},
{
id: 1,
title: 'Json在线转换',
logo: '/images/logo/json.png',
desc: '在线编辑json, 语法检查',
url: '/json',
cateId: 2,
cate: '开发运维',
},
{
id: 1,
title: '正则测试工具',
logo: '/images/logo/reg.png',
desc: '正则表达式测试工具, 常用正则表达式',
url: '/reg',
cateId: 2,
cate: '开发运维',
},
{
id: 1,
title: 'Unicode转中文',
logo: '/images/logo/union.png',
desc: 'Unicode和中文的相互转换',
url: '/unicode',
cateId: 2,
cate: '开发运维',
}
]
},
{
id: 3,
title: '文本处理',
icon: '',
list: [
{
id: 1,
title: '文本对比',
logo: '/images/logo/diff.png',
desc: '文本差异比对支持中文、英文、代码比对',
url: '/diff',
cateId: 3,
cate: '文本处理'
},
{
id: 1,
title: 'markdown编辑器',
logo: '/images/logo/file-markdown-fill.png',
desc: '在线创建或编辑markdown, 实时预览，导出markdown',
url: '/markdown',
cateId: 3,
cate: '文本处理'
},
{
id: 1,
title: '字数统计',
logo: '/images/logo/wordCount.png',
desc: '在线统计字符串的字数、段落、标点符号数量',
url: '/wordCount',
cateId: 3,
cate: '文本处理',
},
{
id: 1,
title: '文本去重',
logo: '/images/logo/textRemoveDuplicate.png',
desc: '可以删除或去除文本或字符串中的重复行',
url: '/textRemoveDuplicate',
cateId: 3,
cate: '文本处理',
},
]
},
{
id: 4,
title: '教育学术',
icon: '',
list: [
{
id: 1,
title: '单位换算',
logo: '/images/logo/unit.png',
desc: '在线重量、长度、面积、时间、角度、速度、温度、压力、热量、功率等换算',
url: '/unit',
cateId: 4,
cate: '教育学术'
},
{
id: 1,
title: '摩斯电码',
logo: '/images/logo/medium.png',
desc: '支持中文的摩斯电码编码解码',
url: '/morse',
cateId: 4,
cate: '教育学术'
},
{
id: 1,
title: '常用进制转换',
logo: '/images/logo/scaletran.png',
desc: '在线进制转换工具,可在2到64进制之间相互转换',
url: '/scaletran',
cateId: 4,
cate: '教育学术',
},
{
id: 1,
title: 'ASCII码表',
logo: '/images/logo/ascii.png',
desc: 'ASCII码表,控制代码、标准ASCII字符和非标准ASCII字符对照表',
url: '/ascii',
cateId: 4,
cate: '教育学术'
},
]
},
{
id: 5,
title: '图片处理',
icon: '',
list: [
{
id: 1,
title: '二维码生成',
logo: '/images/logo/qrcode.png',
desc: '在线生成带logo、透明、艺术的二维码',
url: '/qrcode',
cateId: 5,
cate: '图片处理'
},
{
id: 1,
title: '在线图片处理',
logo: '/images/logo/img.png',
desc: '在线图片裁剪，标注，滤镜，画等操作',
url: '/signimage',
cateId: 5,
cate: '图片处理',
},
{
id: 1,
title: '文本转图片',
logo: '/images/logo/text_to_img.png',
desc: '把文本转换成图片，生成长图，具有超多个性文字排版',
url: '/textToImg',
cateId: 5,
cate: '图片处理'
},
{
id: 1,
title: '图片分割',
logo: '/images/logo/imgCut.png',
desc: '将图片分割成四宫格、九宫格、十六宫格，支持自定义行与列',
url: '/imgCut',
cateId: 5,
cate: '图片处理',
},
]
},
{
id: 8,
title: '数据图表',
icon: '',
list: [
{
id: 1,
title: '柱状图',
logo: '/images/logo/bar.png',
desc: '在线制作柱状图，像做表格一样制作可视化图表，支持导出静态或动态图表',
url: '/bar',
cateId: 8,
cate: '数据图表',
},{
id: 1,
title: '折线图',
logo: '/images/logo/line.png',
desc: '在线制作折线图，像做表格一样制作可视化图表，支持导出静态或动态图表',
url: '/line',
cateId: 8,
cate: '数据图表',
},
{
id: 1,
title: '饼图',
logo: '/images/logo/pie.png',
desc: '在线制作饼图，像做表格一样制作可视化图表，支持导出静态或动态图表',
url: '/pie',
cateId: 8,
cate: '数据图表',
},
{
id: 1,
title: '散点图',
logo: '/images/logo/scatter.png',
desc: '在线制作散点图，像做表格一样制作可视化图表，支持导出静态或动态图表',
url: '/scatter',
cateId: 8,
cate: '数据图表',
}
]
},
{
id: 9,
title: '选择随机',
icon: '',
list: [
{
id: 1,
title: '生成随机数',
logo: '/images/logo/random.png',
desc: '可定制范围内进行随机数字，可用于抽奖、点名等用途',
url: '/random',
cateId: 9,
cate: '选择随机'
},
{
id: 1,
title: '帮我决定',
logo: '/images/logo/choose.png',
desc: '选择困难，难以决定，今天吃什么，现在做什么，自定义选项都给你安排的明明白白',
url: '/decision',
cateId: 9,
cate: '选择随机'
},
{
id: 1,
title: '抛硬币',
logo: '/images/logo/coin.png',
desc: '在线抛硬币，选择困难那么交给硬币来帮你选择吧',
url: '/coin',
cateId: 9,
cate: '选择随机',
},
{
id: 1,
title: '投骰子',
logo: '/images/logo/dice.png',
desc: '在线投骰子，可自定义骰子数量，简单好用的骰子工具',
url: '/dice',
cateId: 9,
cate: '选择随机',
},
]
},
// {
// id: 6,
// title: '查询相关',
// icon: '',
// list: [
// {
// id: 1,
// title: 'IP查询',
// logo: '/images/logo/IP.png',
// desc: '在线查询ip地址、ip归属地',
// url: '/ip',
// cateId: 6,
// cate: '查询相关',
// },
// {
// id: 1,
// title: '网站favicon获取',
// logo: '/images/logo/text_to_img.png',
// desc: '获取网站logo、icon、favicon、标题、关键词、描述等信息',
// url: '/webInfo',
// cateId: 6,
// cate: '查询相关',
// }
// ]
// },
{
id: 7,
title: '其他工具',
icon: '',
list: [
{
id: 1,
title: '数字转金额大写',
logo: '/images/logo/numberToChinese.png',
desc: '在线数字一键转换成人民币大写，中文大写转换数字',
url: '/numberToChinese',
cateId: 7,
cate: '其他工具'
},
{
id: 1,
title: '手持弹幕',
logo: '/images/logo/dm.png',
desc: '手持滚动弹幕',
url: '/barrage',
cateId: 7,
cate: '其他工具',
},
{
id: 1,
title: '色板',
logo: '/images/logo/palettes.png',
desc: '包含纯色、渐变与阶梯色和常用色彩组合',
url: '/palettes',
cateId: 7,
cate: '其他工具'
}
]
}
]
}
//获取工具
export function getTools(data: ToolsReqData) {
//接收参数
const { cateId, title } = data
//获取工具
let list = [] as any[]
let toolsCate = getToolsCate()
for (let item in toolsCate) {
for (let _item in toolsCate[item].list) {
list.push(toolsCate[item].list[_item])
}
}
//标题筛选
if (title != '') {
list = list.filter(item => {
let tmpValue = item.title.toLowerCase()
let tmpDesc = item.desc.toLowerCase()
return tmpValue.indexOf(title.toLowerCase()) !== -1 || tmpDesc.indexOf(title.toLowerCase()) !== -1;
});
}
//分类筛选
if (cateId > 0) {
list = list.filter(item => {
return item.cateId == cateId;
});
}
}
const ToolsExport = {
getTools,
getToolsCate,
};
export default ToolsExport;
src/api/tools/type.ts → src/components/Tools/tools.type.ts
+3 -5
View File
@@ -1,5 +1,3 @@
import { ResponseData } from "../common"
export interface ToolsReqData {
cateId: number,
title: string,
@@ -32,16 +30,16 @@ export interface CollectReqData {
}
//tools list response
export interface ToolsResponseData extends ResponseData {
export interface ToolsResponseData {
data: ToolsInfo[]
}
//tools cate response
export interface ToolCateResponseData extends ResponseData {
export interface ToolCateResponseData{
data: ToolCate[]
}
//tools recommend response
export interface ToolRecommendResponseData extends ResponseData {
export interface ToolRecommendResponseData{
data: ToolsInfo[]
}
src/store/modules/tools.ts
+4 -20
View File
@@ -1,8 +1,8 @@
//创建tools相关的小工具
import { defineStore } from 'pinia'
import { getTools, getToolCate, getToolRecommend } from '@/api/tools'
import { getTools, getToolsCate } from '@/components/Tools/tools.ts'
import { getIp } from '@/api/ip'
import type { ToolsReqData, ToolsInfo, ToolCate } from '@/api/tools/type'
import type { ToolsReqData, ToolsInfo } from '@/components/Tools/tools.type.ts'
import type { IpReqData, IpInfo } from '@/api/ip/type'
import type { WebInfo, WebInfoReqData } from '@/api/webinfo/type'
import { fetchWebInfo } from '@/api/webinfo'
@@ -12,7 +12,7 @@ export const useToolsStore = defineStore('tools', {
state: () => ({
list: [] as ToolsInfo[],
toolInfo: {} as ToolsInfo,
cates: [] as ToolCate[],
cates: [] as any[],
recommends: [] as ToolsInfo[],
ipData: {} as IpInfo,
webInfo: {} as WebInfo,
@@ -46,23 +46,7 @@ export const useToolsStore = defineStore('tools', {
//获取tools cate
async getToolCate() {
//发送请求
const result: any = await getToolCate()
if (result.code == 200) {
this.cates = result.data
return result.message
} else {
return Promise.reject(new Error(result.message))
}
},
//获取推荐
async getToolRecommend() {
const result: any = await getToolRecommend()
if (result.code == 200) {
this.recommends = result.data
return result.message
} else {
return Promise.reject(new Error(result.message))
}
this.cates = await getToolsCate()
},
//获取ip
async getIp(data: IpReqData) {