feat: 组件切换动画过渡效果，查询ip转移到后端实现

src/components/Home/Home.vue

@@ -28,7 +28,7 @@ onMounted(() => {
   <div>
     <!-- card -->
     <div class="mr-3 flex justify-between flex-wrap self-card-div" :gutter="10">
-        <router-link v-for="(item, index) in toolsStore.list" :key="index" :to="item.url" class="flex flex-col mt-3 border-solid rounded border-gray border w-[32.5%] p-2 bg-gray-50 hover:shadow-md">
+        <router-link v-for="(item, index) in toolsStore.list" :key="index" :to="item.url" class="flex flex-col mt-3 border-solid rounded border-gray  w-[32.5%] p-2 bg-gray-100 hover:shadow-md">
           <div class="flex items-center border-b pb-2">
             <el-image :src="item.logo" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>
             <div class="flex flex-col ml-2 w-full">

src/components/Ip/Ip.vue

@@ -1,24 +1,26 @@
 <script setup lang="ts">
 import { onMounted, reactive } from 'vue'
-import { getIp } from '@/api/ip'
+import { useToolsStore } from '@/store/modules/tools'
 import { isIp } from '@/utils/verify'
 import { ElMessage } from 'element-plus'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
 
 const info = reactive({
   title: "IP查询",
-  content: '',
-  ip: '',
-  address: '',
 })
 
+//store
+const toolsStore = useToolsStore()
+const params = reactive({
+  ip: '',
+})
 //查询
 const search = async (type: string) => {
   try {
     //通过点击获取ip信息
     if (type == 'click') {
       //验证是否ip地址
-      if (!isIp(info.content)) {
+      if (!isIp(params.ip)) {
         ElMessage({
           message: "无效的ip地址",
           type: "warning",
@@ -28,9 +30,7 @@ const search = async (type: string) => {
       }
     }
     //获取信息
-    const result: any =  await getIp(info.content)
-    info.ip = result.data.ip
-    info.address = result.data.address
+    await toolsStore.getIp(params)
   } catch (error) {
     console.log(error)
   }
@@ -48,21 +48,26 @@ onMounted(() => {
     <div>
       <div class="flex">
         <div class="mr-2 w-60">
-          <el-input v-model="info.content" ></el-input>
+          <el-input v-model="params.ip" ></el-input>
         </div>
        
         <el-button type="primary" @click="search('click')">查询</el-button>
       </div>
       <div class="mt-3 min-h-md bg-gray-100 p-3 mb-3 flex flex-col">
         <div class="bg-white p-2 font-bold text-xl">您的IP信息</div>
+        <div class="bg-white p-2 flex">
+          <div class="mr-1">运营商: </div>
+          <div>{{ toolsStore.ipData.isp }}</div>
+        </div>
         <div class="bg-white p-2 flex">
           <div class="mr-1">域名解析地址: </div>
-          <div>{{ info.ip }}</div>
+          <div>{{ toolsStore.ipData.ip }}</div>
         </div>
         <div class="bg-white p-2 flex">
           <div class="mr-1">所在地理位置: </div>
-          <div>{{ info.address }}</div>
+          <div>{{ toolsStore.ipData.pos }}</div>
         </div>
+        
       </div>
     </div>
   </div>

src/components/Layout/DetailHeader/DetailHeader.vue

@@ -9,10 +9,10 @@ const props = defineProps({
   <div>
     <div class="text-gray-600">
       <div class="flex">
-        <a href="/" class="flex items-center">
+        <RouterLink to="/" class="flex items-center">
           <el-icon color="blue"><Back /></el-icon>
           <div>返回首页</div>
-        </a>
+        </RouterLink>
       </div>
     </div>
 

src/components/Layout/Header/Header.vue

@@ -85,7 +85,6 @@ onMounted(() => {
               <div class="mr-3">
                 <ul class="flex bg-gray-100  h-10 rounded leading-10 pl-3">
                   <li class="flex items-center mr-3">
-                    <el-text></el-text>
                     <div 
                       class="hover:text-blue-400 hover:underline hover:decoration-2 hover:underline-offset-[6px] text-sm" :class="searchParam.cateId == 0 ? 'text-blue-400 underline decoration-2 underline-offset-[6px]' : ''"
                       @click="chooseCate(0)"

src/components/MD5/MD5.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
-import clipboard3 from 'vue-clipboard3'
-import { ElMessage } from 'element-plus';
 import { Md5 } from 'ts-md5'
+import { copy } from '@/utils/string'
 const info = reactive({
   title: "MD5在线加密",
   encryptStr: '',
@@ -26,34 +25,9 @@ const clear = () => {
   info.encryptStr = ''
 }
 
-const {toClipboard} = clipboard3()
+//copy
 const copyRes = async (resStr: string) => {
-  try {
-    //check
-    if (resStr == '') {
-      ElMessage({
-        message: "无可复制内容",
-        type: "warning",
-        duration: 1500
-      })
-      return
-    }
-    //copy
-    await toClipboard(resStr)
-    ElMessage({
-      message: "复制成功",
-      type: "success",
-      duration: 1500
-    })
-  } catch (error) {
-    console.log("复制失败")
-    console.log(error)
-    ElMessage({
-      message: "复制失败",
-      type: "error",
-      duration: 1500
-    })
-  }
+  copy(resStr)
 }
 </script>
 

src/components/TimeTran/TimeTran.vue

@@ -2,9 +2,8 @@
 import { onMounted, onUnmounted, reactive } from 'vue'
 import { VideoPause,VideoPlay,CopyDocument } from '@element-plus/icons-vue'
 import { Jh_getTimeStamp,Jh_timeStampToTime,Jh_convertTimeStamp } from '@/utils/time'
-import clipboard3 from 'vue-clipboard3'
-import { ElMessage } from 'element-plus';
 import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import { copy } from '@/utils/string'
 const info = reactive({
   title: "时间戳转换",
   nowTime: Jh_getTimeStamp(),
@@ -77,24 +76,8 @@ const timeTran = (type: string) => {
 }
 
 //复制时间戳
-const {toClipboard} = clipboard3()
-const copyStamp = async () => {
-  try {
-    await toClipboard('' + info.nowTime)
-    ElMessage({
-      message: "复制成功",
-      type: "success",
-      duration: 1500
-    })
-  } catch (error) {
-    console.log("复制失败")
-    console.log(error)
-    ElMessage({
-      message: "复制失败",
-      type: "error",
-      duration: 1500
-    })
-  }
+const copyRes = async () => {
+  copy('' + info.nowTime)
 }
 </script>
 
@@ -105,7 +88,7 @@ const copyStamp = async () => {
     <div class="flex flex-col">
       <div class="flex flex-direction">
         <el-text class="mr-2 w-12">现在</el-text>
-        <el-button class="mr-3" link @click="copyStamp()">{{ info.nowTime }} <el-icon class="ml-1 mr-1"><CopyDocument /></el-icon></el-button>
+        <el-button class="mr-3" link @click="copyRes()">{{ info.nowTime }} <el-icon class="ml-1 mr-1"><CopyDocument /></el-icon></el-button>
         <el-button v-if="info.isPlay" type="danger" link class="flex items-center" @click="isPlayChange()"><el-icon class="mr-1" size="16"><VideoPlay/></el-icon>停止</el-button>
         <el-button v-else="info.isPlay" type="primary" link class="flex items-center" @click="isPlayChange()"><el-icon class="mr-1" size="16"><VideoPause /></el-icon>开始</el-button>
       </div>