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

src/components/RegTest/RegTest.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { Back } from '@element-plus/icons-vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
 import { Codemirror } from "vue-codemirror"
 
 const info = reactive({
@@ -116,16 +116,7 @@ const execMatch = () => {
 
 <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>