fix: 修复页面布局与搜索键盘事件

src/Index.vue

@@ -97,6 +97,10 @@ onMounted(() => {
   // 计算footer的高度
   const footerHeight = footer.value?.clientHeight || 0;
   console.log('footerHeight', footerHeight);
+
+  document.addEventListener('resize', () => {
+    
+  })
 })
 </script>
 

src/components/homeSide.vue

@@ -101,13 +101,15 @@ async function getJq() {
   console.log('>>> --> getJq --> res:', res.data)
   jq.value = res.data
   const j = res.data.solarTerms.slice(0, 2)
-  jqImg.value = 'https://www.hxyouzi.com/img/jq/' + j + '.png'
+  // 获取时间戳
+  const timestamp = new Date().getTime()
+  jqImg.value = 'https://www.hxyouzi.com/img/jq/' + j + '.png?' + timestamp
 }
 
 async function getBdhot() {
   const res = await $http.mix.getBdhot()
   console.log('>>> --> getBdhot --> res:', res.data)
-  // 取前5条
+  // 取前5条aa
   bdNews.value = res.data.slice(0, 5)
 }
 

src/components/menuH.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="nav" class="main-nav hidden lg:flex justify-between bg-white">
     <!-- 网站Logo -->
-    <div class="px-5 items-centerflex cursor-pointer w-1/5" slot="brand" @click="goHome">
+    <div class="px-5 items-center flex cursor-pointer w-1/5" slot="brand" @click="goHome">
       <img :src="logo" alt="柚子的网站" class="h-9 align-middle" />
     </div>
     <!-- 主导航菜单 -->

src/views/Home.vue

@@ -2,11 +2,12 @@
   <div class="home-page" :content-style="contentStyle">
     <n-layout has-sider>
       <n-layout-content class="main-content">
-        <div class="pt-8 px-12 relative hidden lg:block">
+        <div ref="searchRef" class="pt-8 px-12 relative hidden lg:block">
           <n-input-group class="shadow ">
             <n-select class="w-24" size="large" v-model:value="broswer" :options="options"
               @click="cancelSbox"></n-select>
-            <n-input class="flex-1" size="large" autofocus v-model:value="searchWord" @blur="cancelSbox" placeholder="请输入">
+            <n-input class="flex-1" size="large" autofocus v-model:value="searchWord" @blur="cancelSbox"
+              placeholder="请输入">
               <template #suffix>
                 <n-icon size="large">
                   <icon-search />
@@ -34,7 +35,7 @@
           <div ref="navcards"
             class="navcard grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-5 pt-3 pb-6 px-2 lg:px-12">
             <n-card embedded
-              class="bg-[#ffffff80] h-24 shadow-md transition-transform duration-300 box-border hover:-translate-y-1.5"
+              class="bg-[#f1fff180] h-24 shadow-md transition-transform duration-300 box-border hover:-translate-y-1.5"
               v-for="(item, index) in navlist" :key="index" @click="goExtra(item.menu_link)"
               @contextmenu.prevent="handdleContextMenu($event, item)">
               <div class="mt-1 w-full flex flex-col items-center cursor-pointer hover:!text-primary">
@@ -192,6 +193,7 @@ const navData = reactive<NavItem>({
 })
 const formNav = ref<any>(null)
 const navcards = ref<any>(null)
+const searchRef = useTemplateRef("searchRef")
 
 // 首页逻辑
 const nav: any = $store.nav.useNavStore()
@@ -280,7 +282,7 @@ function handleInput() {
 function handleKeyup(e: KeyboardEvent) {
   if (!searchBox.value) return
   // 向下箭头
-  if (e.keyCode === 40) {
+  if (e.key == "ArrowDown") {
     if (selecedIdx.value < searchItems.value.length - 1) {
       selecedIdx.value += 1
     } else {
@@ -288,7 +290,7 @@ function handleKeyup(e: KeyboardEvent) {
     }
   }
   // 向上箭头
-  else if (e.keyCode === 38) {
+  else if (e.key == "ArrowUp") {
     if (selecedIdx.value > 0) {
       selecedIdx.value -= 1
     } else {
@@ -296,7 +298,7 @@ function handleKeyup(e: KeyboardEvent) {
     }
   }
   // 回车键
-  else if (e.keyCode === 13) {
+  else if (e.key == "Enter") {
     if (searchItems.value.length > 0) {
       const selectedItem = searchItems.value[selecedIdx.value]
       window.open(selectedItem.menu_link, "_BLANK")
@@ -653,13 +655,21 @@ onMounted(() => {
   ]
   getNavList()
   window.addEventListener('resize', () => {
+    // 获取屏幕高度
+    const screenHeight = window.innerHeight;
+
     contentStyle.value = {
-      height: `calc(100vh - ${nav.navH}px)`
+      height: `${screenHeight - nav.navH}px)`
     }
+    // searchRef的y
+    const searchHeight: number = searchRef.value?.getBoundingClientRect().y || 0
+    // searchRef的高度
+    const searchH: number = searchRef.value?.getBoundingClientRect().height || 0
     navStyle.value = {
-      height: `${navHeight.value}px`
+      height: `${window.innerHeight - (searchHeight + searchH)}px`
     }
   });
+  // 处理键盘按键抬起事件，触发搜索框的键盘导航逻辑
   window.addEventListener('keyup', (e: Event) => {
     handdleKeyup(e)
   });

src/views/blog/[bid].vue

@@ -117,7 +117,10 @@ async function AISum() {
     },
     body: JSON.stringify({
       model: "Qwen/Qwen3-8B",
-      messages: [{ role: 'user', content: "用一段话对以下内容做一个摘要（语气可爱带表情）：" + blogData.value.cont }],
+      messages: [
+        { role: 'system', content: "你是一个摘要生成工具，你需要解释我发送给你的内容，不要换行，不要超过400字，只需要介绍文章的内容，不需要提出建议和缺少的东西。请用中文回答，内容添加表情包，输出的内容开头为“这篇文章介绍了”，所有句号试用“喵~~ 。”代替" },
+        { role: 'user', content: blogData.value.cont }
+      ],
       stream: true
     })
   })