feat: 反馈中心，工具随机推荐、广告开关
This commit is contained in:
osiris
+5
-1
@@ -11,4 +11,8 @@ VITE_SERVE = ''
|
||||
# 自定义启动host
|
||||
VITE_HOST = '127.0.0.1'
|
||||
# 是否使用mock: bool
|
||||
VITE_IS_MOCK = 'true'
|
||||
VITE_IS_MOCK = 'true'
|
||||
# 第三方反馈互动地址
|
||||
VITE_FEEDBACK_URL = ''
|
||||
# 广告位开关
|
||||
VITE_ADV_SHOW = 'false'
|
||||
+40
-19
@@ -4,7 +4,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: '时间戳转换',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/Time.png',
|
||||
desc: '在线时间戳转换工具以及获取当前时间戳',
|
||||
url: '/timetran',
|
||||
cateId: 2,
|
||||
@@ -13,7 +13,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: 'MD5在线加密',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/Password%20fishing.png',
|
||||
desc: 'MD5在线加密,长度包含32位、16位',
|
||||
url: '/MD5',
|
||||
cateId: 2,
|
||||
@@ -22,7 +22,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: 'Json在线转换',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/json.png',
|
||||
desc: '在线编辑json, 语法检查',
|
||||
url: '/json',
|
||||
cateId: 2,
|
||||
@@ -31,7 +31,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: '正则测试工具',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/reg.png',
|
||||
desc: '正则表达式测试工具, 常用正则表达式',
|
||||
url: '/reg',
|
||||
cateId: 2,
|
||||
@@ -40,7 +40,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: 'Unicode转中文',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/union.png',
|
||||
desc: 'Unicode和中文的相互转换',
|
||||
url: '/unicode',
|
||||
cateId: 2,
|
||||
@@ -49,7 +49,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: '字数统计',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/ico_%E6%95%B0%E6%8D%AE%E7%BB%9F%E8%AE%A1_%E5%B7%A5%E4%BD%9C%E9%87%8F%E7%BB%9F%E8%AE%A1.png',
|
||||
desc: '在线统计字符串的字数、段落、标点符号数量',
|
||||
url: '/wordCount',
|
||||
cateId: 3,
|
||||
@@ -58,7 +58,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: 'IP查询',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/IP.png',
|
||||
desc: '在线查询ip地址、ip归属地',
|
||||
url: '/ip',
|
||||
cateId: 6,
|
||||
@@ -67,7 +67,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: '常用进制转换',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2.png',
|
||||
desc: '在线进制转换工具,可在2到64进制之间相互转换',
|
||||
url: '/scaletran',
|
||||
cateId: 4,
|
||||
@@ -76,7 +76,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: '在线图片处理',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/img.png',
|
||||
desc: '在线图片裁剪，标注，滤镜，画等操作',
|
||||
url: '/signimage',
|
||||
cateId: 5,
|
||||
@@ -85,7 +85,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: '随机密码生成',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/keywords.png',
|
||||
desc: '密码生成器、随机字符串生成,批量生成',
|
||||
url: '/random_password',
|
||||
cateId: 2,
|
||||
@@ -94,7 +94,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: 'URL编码/解码',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/url.png',
|
||||
desc: 'URL在线编码解码工具（UrlEncode编码 和 UrlDecode解码）',
|
||||
url: '/urlencode',
|
||||
cateId: 2,
|
||||
@@ -103,7 +103,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: 'UUID生成器',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/%E7%BA%BF%E6%80%A7-%E7%94%9F%E6%88%90.png',
|
||||
desc: '批量生成UUID',
|
||||
url: '/uuid',
|
||||
cateId: 2,
|
||||
@@ -112,7 +112,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: '手持弹幕',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/%E5%BC%B9%E5%B9%95.png',
|
||||
desc: '手持滚动弹幕',
|
||||
url: '/barrage',
|
||||
cateId: 7,
|
||||
@@ -121,7 +121,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: 'ASCII码表',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/icon_%E7%BC%96%E7%A0%81%E5%AF%B9%E7%85%A7.png',
|
||||
desc: 'ASCII码表,控制代码、标准ASCII字符和非标准ASCII字符对照表',
|
||||
url: '/ascii',
|
||||
cateId: 2,
|
||||
@@ -130,7 +130,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: '单位换算',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/%E5%8D%95%E4%BD%8D%E6%8D%A2%E7%AE%97.png',
|
||||
desc: '在线重量、长度、面积、时间、角度、速度、温度、压力、热量、功率等换算',
|
||||
url: '/unit',
|
||||
cateId: 4,
|
||||
@@ -139,7 +139,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: '色板',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/%E8%B0%83%E8%89%B2%E6%9D%BF.png',
|
||||
desc: '包含纯色、渐变与阶梯色和常用色彩组合',
|
||||
url: '/palettes',
|
||||
cateId: 5,
|
||||
@@ -148,7 +148,7 @@ function getTools() {
|
||||
{
|
||||
id: 1,
|
||||
title: '二维码生成',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/%E4%BA%8C%E7%BB%B4%E7%A0%81.png',
|
||||
desc: '在线生成带logo、透明、艺术的二维码',
|
||||
url: '/qrcode',
|
||||
cateId: 5,
|
||||
@@ -216,10 +216,31 @@ export default [
|
||||
url: '/v1/tool/cates',
|
||||
method: 'get',//请求方式
|
||||
response: ({ body }) => {
|
||||
//获取请求体携带过来的用户名与密码
|
||||
//调用获取用户信息函数,用于判断是否有此用户
|
||||
const list = getToolsCate()
|
||||
return { code: 200, message: 'ok', data: list }
|
||||
},
|
||||
},
|
||||
{
|
||||
url: '/v1/tool/recommends',
|
||||
method: 'get',//请求方式
|
||||
response: () => {
|
||||
let list = [] as any
|
||||
//获取推荐数量
|
||||
let num = 10
|
||||
const toolList = getTools()
|
||||
//使用Set数据结构来存储已经生成的随机数
|
||||
const set = new Set();
|
||||
|
||||
while (set.size < num) {
|
||||
// 生成随机数
|
||||
const randomNum = Math.floor(Math.random() * toolList.length);
|
||||
// 如果随机数不在Set中，则添加到Set中并赋值给randomNumber变量
|
||||
if (!set.has(randomNum)) {
|
||||
set.add(randomNum);
|
||||
list.push(toolList[randomNum])
|
||||
}
|
||||
}
|
||||
return { code: 200, message: 'ok', data: list }
|
||||
},
|
||||
}
|
||||
]
|
||||
@@ -4,7 +4,8 @@ import request from '@/utils/request'
|
||||
import type {
|
||||
ToolsReqData,
|
||||
ToolsResponseData,
|
||||
ToolCateResponseData
|
||||
ToolCateResponseData,
|
||||
ToolRecommendResponseData
|
||||
} from './type'
|
||||
|
||||
//项目用户相关的请求地址
|
||||
@@ -13,11 +14,15 @@ enum API {
|
||||
//获取tools
|
||||
GET_TOOLS = '/tools',
|
||||
//获取tool cate
|
||||
GET_TOOL_CATES = '/tool/cates'
|
||||
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 getToolCate = () => request.get<any, ToolCateResponseData>(API.GET_TOOL_CATES)
|
||||
//获取推荐
|
||||
export const getToolRecommend = () => request.get<any, ToolRecommendResponseData>(API.GET_TOOL_RECOMMEND)
|
||||
@@ -35,4 +35,9 @@ export interface ToolCateResponseData extends ResponseData {
|
||||
data: ToolCate[]
|
||||
}
|
||||
|
||||
//tools recommend response
|
||||
export interface ToolRecommendResponseData extends ResponseData {
|
||||
data: ToolsInfo[]
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,44 +1,81 @@
|
||||
<script setup lang="ts">
|
||||
import { Tools } from '@element-plus/icons-vue'
|
||||
import { reactive } from 'vue';
|
||||
import { Message } from '@element-plus/icons-vue'
|
||||
import { reactive, onMounted } from 'vue';
|
||||
import { useToolsStore } from '@/store/modules/tools'
|
||||
const info = reactive({
|
||||
hotTools: [
|
||||
feedbackUrl: import.meta.env.VITE_FEEDBACK_URL || 'javascript:void(0)',
|
||||
advShow: import.meta.env.VITE_ADV_SHOW || 'false',
|
||||
advList: [
|
||||
{
|
||||
id: 1,
|
||||
value: '时间戳转换'
|
||||
img: 'https://img.jutuike.com/taokeout/banner/ele_hongbao_banner.png',
|
||||
url: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/adv/elm_adv.jpeg'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
value: 'MD5在线加密'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
value: 'Json在线转换'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
value: '正则测试工具'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
value: '在线图片处理'
|
||||
img: 'https://s3plus.sankuai.com/v1/mss_5017c592a8a946d2a54eb62a76ba299c/nebulafile/910fa09a310aadd229e90e4ad872d86e.png',
|
||||
url: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/adv/meituan_adv.png'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
//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
|
||||
height="130px"
|
||||
:autoplay="false"
|
||||
>
|
||||
<el-carousel-item v-for="(item, index) in info.advList" :key="index" @click="clickCarousel(item.url)">
|
||||
<el-image :src="item.img" fit="fill" class="h-full w-full"></el-image>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<!-- hot tools -->
|
||||
<div class="mt-3 border-solid rounded border-gray border p-3 c-xs:mr-3 c-xs:ml-3">
|
||||
<div class="text-xl text-gray-400 font-bold">热门工具</div>
|
||||
<div class="text-xl text-gray-400 font-bold">随机推荐</div>
|
||||
<ul class="mt-3">
|
||||
<li class="flex items-center hover:bg-gray-200 p-1 rounded" v-for="(item, index) in info.hotTools" :key="index">
|
||||
<RouterLink :to="item.url" class="flex items-center hover:bg-gray-200 p-1 rounded" v-for="(item, index) in toolsStore.recommends" :key="index">
|
||||
<el-icon class="mr-1"><Tools /></el-icon>
|
||||
<div>{{ item.value }}</div>
|
||||
</li>
|
||||
<div>{{ item.title }}</div>
|
||||
</RouterLink>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+3
-2
@@ -1,10 +1,11 @@
|
||||
//通过vue-router插件实现模板路由配置
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { constantRoute } from './router'
|
||||
//创建路由器
|
||||
const router = createRouter({
|
||||
//路由模式hash
|
||||
history: createWebHashHistory(),
|
||||
// history: createWebHashHistory(),
|
||||
history: createWebHistory(),
|
||||
routes: constantRoute,
|
||||
//滚动行为
|
||||
scrollBehavior() {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
//创建tools相关的小工具
|
||||
import { defineStore } from 'pinia'
|
||||
import { getTools, getToolCate} from '@/api/tools'
|
||||
import { getTools, getToolCate, getToolRecommend} from '@/api/tools'
|
||||
import { getIp } from '@/api/ip'
|
||||
import type { ToolsReqData, ToolsInfo, ToolCate } from '@/api/tools/type'
|
||||
import type { IpReqData, IpInfo } from '@/api/ip/type'
|
||||
@@ -10,6 +10,7 @@ export const useToolsStore = defineStore('tools', {
|
||||
state: () => ({
|
||||
list: [] as ToolsInfo[],
|
||||
cates: [] as ToolCate[],
|
||||
recommends: [] as ToolsInfo[],
|
||||
ipData: {} as IpInfo,
|
||||
}),
|
||||
//方法
|
||||
@@ -36,15 +37,25 @@ export const useToolsStore = defineStore('tools', {
|
||||
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))
|
||||
}
|
||||
},
|
||||
//获取ip
|
||||
async getIp(data: IpReqData) {
|
||||
const result: any = await getIp(data)
|
||||
if (result.code == 200) {
|
||||
this.ipData = result.data
|
||||
return result.message
|
||||
} else {
|
||||
return Promise.reject(new Error(result.message))
|
||||
}
|
||||
} else {
|
||||
return Promise.reject(new Error(result.message))
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user