feat: pinia结合mock实现按分类和标题搜索工具，布局和样式调整

src/components/Ip/Ip.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onMounted, reactive } from 'vue'
-import { Back } from '@element-plus/icons-vue'
 import { getIp } from '@/api/ip'
 import { isIp } from '@/utils/verify'
 import { ElMessage } from 'element-plus'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
 
 const info = reactive({
   title: "IP查询",
@@ -43,16 +43,7 @@ onMounted(() => {
 
 <template>
   <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
-    <div class="text-gray-600">
-      <a href="/" class="flex items-center">
-        <el-icon color="blue"><Back /></el-icon>
-        <div>返回首页</div>
-      </a>
-    </div>
-
-    <div class="text-xl mt-5 mb-5">
-      {{ info.title }}
-    </div>
+    <DetailHeader :title="info.title"></DetailHeader>
 
     <div>
       <div class="flex">