update

components/i/Nav.vue

@@ -17,19 +17,8 @@
             to="/library"
         />
         <ISearchHistory @sign="handleOpenSign" />
-        <div v-if="$isSignIn" class="flex flex-col gap-2 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5">
-            <template v-for="(item, index) in searchHistory" :key="index">
-                <UButton
-                    color="gray"
-                    variant="ghost"
-                    size="xs"
-                >
-                    <div class="truncate">{{ item.title }}</div>
-                </UButton>
-            </template>
-        </div>
         <UButton
-            v-else
+            v-if="!$isSignIn"
             class="flex flex-grow gap-2 justify-center"
             size="lg"
             label="登录"
@@ -42,24 +31,6 @@
 </template>
 <script setup>
 const { $isSignIn } = useUserStore()
-const searchHistory = ref([
-    {
-        title: 'Vue 的 v-model 怎么用',
-        url: 'c_20240521161631_C8miVoieSKGfgNGP?query=Vue%20的%20v-model%20怎么用&repo=keycloak'
-    },
-    {
-        title: '帮我写一个爬虫，爬取豆瓣热门电影top250',
-        url: 'c_20240521161649_0LbyaJFKX6fyJYyA?query=帮我写一个爬虫，爬取豆瓣热门电影top250&repo=keycloak'
-    },
-    {
-        title: 'grid 的 grid-template-columns 除了 minmax 和 repeat，还有哪些值',
-        url: 'c_20240521161709_LtiJL8thi5XuYLd6?query=grid%20的%20grid-template-columns%20除了%20minmax%20和%20repeat，还有哪些值&repo=keycloak'
-    },
-    {
-        title: 'flex 各种布局的区别',
-        url: 'c_20240521161933_wxgXGKYhmfJe6QE0?query=flex%20各种布局的区别&repo=keycloak'
-    }
-])
 const isOpenSign = ref(false)
 const handleOpenSign = () => {
     isOpenSign.value = true

components/i/SearchHistory.vue

@@ -17,14 +17,85 @@
             @click="handleClear"
         />
     </div>
+    <div v-if="$isSignIn" class="flex flex-col gap-2 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5">
+        <template v-for="(item, index) in searchHistory" :key="index">
+            <UButton
+                color="gray"
+                variant="ghost"
+                size="xs"
+                :to="'/search/' + item.url"
+            >
+                <div class="truncate">{{ item.title }}</div>
+            </UButton>
+        </template>
+    </div>
+    <UModal v-model="isOpenHistory" :ui="{ width: 'w-full sm:max-w-screen-md' }">
+        <div class="flex items-center p-2">
+            <UInput
+                class="w-full"
+                v-model="query"
+                :padded="false"
+                variant="none"
+                leading-icon="i-heroicons-magnifying-glass-20-solid"
+                placeholder="输入关键字搜索..."
+            />
+            <UButton
+                leading-icon="i-heroicons-x-mark-20-solid"
+                color="gray"
+                variant="ghost"
+                @click="handleClose"
+            />
+        </div>
+        <UDivider />
+        <div class="flex flex-col p-2">
+            <template v-for="(item, index) in searchHistory" :key="index">
+                <UButton
+                    color="gray"
+                    variant="ghost"
+                    long
+                    leading-icon="i-heroicons-document-text"
+                    :to="'/search/' + item.url"
+                    @click="handleClose"
+                >
+                    <div class="truncate font-light">{{ item.title }}</div>
+                </UButton>
+            </template>
+        </div>
+    </UModal>
 </template>
 <script setup>
 const emits = defineEmits(['sign', 'clear'])
 const { $isSignIn } = useUserStore()
+const searchHistory = ref([
+    {
+        title: 'Vue 的 v-model 怎么用',
+        url: 'c_20240521161631_C8miVoieSKGfgNGP?query=Vue%20的%20v-model%20怎么用&repo=keycloak'
+    },
+    {
+        title: '帮我写一个爬虫，爬取豆瓣热门电影top250',
+        url: 'c_20240521161649_0LbyaJFKX6fyJYyA?query=帮我写一个爬虫，爬取豆瓣热门电影top250&repo=keycloak'
+    },
+    {
+        title: 'grid 的 grid-template-columns 除了 minmax 和 repeat，还有哪些值',
+        url: 'c_20240521161709_LtiJL8thi5XuYLd6?query=grid%20的%20grid-template-columns%20除了%20minmax%20和%20repeat，还有哪些值&repo=keycloak'
+    },
+    {
+        title: 'flex 各种布局的区别',
+        url: 'c_20240521161933_wxgXGKYhmfJe6QE0?query=flex%20各种布局的区别&repo=keycloak'
+    }
+])
 function handleClear () {
     emits('clear')
 }
+const isOpenHistory = ref(false)
+const query = ref('')
 function handleOpen () {
     if (!$isSignIn) emits('sign')
+    else {
+        isOpenHistory.value = true
+    }
+}
+function handleClose () {
+    isOpenHistory.value = false
 }
 </script>

components/prose/ProsePre.global.vue

 <template>
     <pre class="flex justify-between m-0 rounded-bl-none rounded-br-none dark">
-        <div>{{ languageName }}</div>
+        <div>{{ language }}</div>
         <UButton
             leading-icon="i-heroicons-document-duplicate-20-solid"
             color="gray"
@@ -42,9 +42,6 @@ const props = defineProps({
         default: null
     }
 })
-const languageName = computed(() => {
-    return props.language ? props.language.charAt(0).toUpperCase() + props.language.slice(1) : '';
-})
 const handleCopy = () => {
     useCopyToClipboard().copy(props.code)
     toast.add({