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

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>