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

src/components/Unicode/Unicode.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"
 import { copy } from '@/utils/string'
 
@@ -49,16 +49,7 @@ const copyRes = async () => {
 
 <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>