feat: 反馈中心，工具随机推荐、广告开关

.env.example

@@ -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'

mock/tools.ts

@@ -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 }
+    },
   }
 ]

src/api/tools/index.ts

@@ -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)

src/api/tools/type.ts

@@ -35,4 +35,9 @@ export interface ToolCateResponseData extends ResponseData {
   data: ToolCate[]
 }
 
+//tools recommend response
+export interface ToolRecommendResponseData extends ResponseData {
+  data: ToolsInfo[]
+}
+
 

src/components/Layout/Right/Right.vue

@@ -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,
+      img: 'https://img.jutuike.com/taokeout/banner/ele_hongbao_banner.png',
-      value: '时间戳转换'
+      url: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/adv/elm_adv.jpeg'
     },
     {
-      id: 1,
+      img: 'https://s3plus.sankuai.com/v1/mss_5017c592a8a946d2a54eb62a76ba299c/nebulafile/910fa09a310aadd229e90e4ad872d86e.png',
-      value: 'MD5在线加密'
+      url: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/adv/meituan_adv.png'
-    },
-    {
-      id: 1,
-      value: 'Json在线转换'
-    },
-    {
-      id: 1,
-      value: '正则测试工具'
-    },
-    {
-      id: 1,
-      value: '在线图片处理'
     }
   ]
 })
+
+//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>
+          <div>{{ item.title }}</div>
-        </li>
+        </RouterLink>
       </ul>
     </div>
   </div>

src/router/index.ts

@@ -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() {

src/store/modules/tools.ts

@@ -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 {
+      } else {
-      return Promise.reject(new Error(result.message))
+        return Promise.reject(new Error(result.message))
-    }
+      }
     }
   }
 })