增加JS级别的响应式

composables/useMQ.js

+export const SM = useMediaQuery('(max-width: 640px)')
+export const MD = useMediaQuery('(max-width: 768px)')
+export const LG = useMediaQuery('(max-width: 1024px)')
+export const XL = useMediaQuery('(max-width: 1280px)')
+export const XXL = useMediaQuery('(max-width: 1536px)')
\ No newline at end of file

pages/search/[id].vue

 <template>
     <div class="w-full items-center flex flex-col">
         <header class="sticky top-0 z-10 bg-white dark:bg-black w-full flex flex-col">
-            <div class="w-full p-2 justify-between items-center flex">
-                <div class="flex-grow justify-center items-center flex space-x-2">
+            <div class="w-full p-2 justify-end sm:justify-between items-center flex">
+                <div class="flex-grow justify-center items-center space-x-2 hidden sm:flex">
                     <UTooltip text="点击修改标题" v-if="!isEditTitle">
                         <div @click="handleFocusTitle">{{ state.query }}</div>
                     </UTooltip>
@@ -16,7 +16,8 @@
                     <span>/</span>
                     <UButton color="gray" variant="ghost" leading-icon="i-heroicons-plus-20-solid">收藏</UButton>
                 </div>
-                <div>
+                <div class="flex gap-2">
+                    <UButton v-if="SM" color="gray" variant="ghost" leading-icon="i-heroicons-plus-20-solid">收藏</UButton>
                     <UButton @click="handleShare" leading-icon="i-heroicons-share-20-solid">分享</UButton>
                 </div>
             </div>