构建发布dist目录，添加AppShare和Article组件

src/views/Home.vue

@@ -2,7 +2,7 @@
   <div class="home-page" :style="contentStyle">
     <d-layout>
       <d-content class="main-content">
-        <div class="pt-8 px-12 relative">
+        <div class="pt-8 px-12 relative hidden lg:block">
           <d-input class="devui-input-demo__mt" size="lg" v-model="searchWord" @keyup.enter="search" placeholder="请输入">
             <template #prepend>
               <d-select class="w-48" size="lg" v-model="broswer" :options="options"></d-select>
@@ -13,15 +13,15 @@
           </d-input>
         </div>
         <!-- 标签组 -->
-        <PerfectScrollbar class="">
-          <div v-if="navlist.length" class="flex gap-6 px-12 mt-6 mb-3 overflow-x-auto ">
-            <d-tag class="cursor-pointer" hideBeyondTags v-for="tag in tagList" :checked="tag.checked" :color="tag.color"
-              @click="handdleTagClick(tag)">{{ tag.name }}</d-tag>
-          </div>
-        </PerfectScrollbar>
+        <!-- <PerfectScrollbar class="w-full overflow-x-auto"> -->
+        <div v-if="navlist.length" class="flex gap-6 px-2 mt-6 mb-3 flex-wrap lg:px-12">
+          <d-tag class="cursor-pointer truncate" hideBeyondTags v-for="tag in tagList" :checked="tag.checked"
+            :color="tag.color" @click="handdleTagClick(tag)">{{ tag.name }}</d-tag>
+        </div>
+        <!-- </PerfectScrollbar> -->
         <!-- 图片网格展示区域 -->
         <PerfectScrollbar class="" :style="navStyle">
-          <div class="navcard grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-5 pt-3 pb-6 px-12">
+          <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">
             <d-card class="bg-[#ffffff80] h-24" v-for="(item, index) in navlist" :key="index"
               @click="goExtra(item.menu_link)" @contextmenu.prevent="handdleContextMenu($event, item)">
               <template #content>
@@ -49,7 +49,7 @@
         </PerfectScrollbar>
 
       </d-content>
-      <d-aside class="daside w-120">
+      <d-aside class="daside hidden w-120 lg:block">
         <homeSide></homeSide>
       </d-aside>
     </d-layout>
@@ -87,7 +87,8 @@
 
     <!-- 右键菜单 -->
     <contextMenu :show="menuShow" :options="MenuOptions">
-      <div class="!p-0 !m-0 bg-white cursor-pointer !rounded-md" @mouseenter="removeTimer" @mouseleave="hideMenu">
+      <div class="!p-0 !m-0 bg-white cursor-pointer !rounded-md shadow-md" @mouseenter="removeTimer"
+        @mouseleave="hideMenu">
         <div :class="menuS" @click="handdleMenuItem(1)">
           修改名称
         </div>
@@ -149,7 +150,7 @@ const navData: any = reactive({
   menu_icon: ''
 })
 const formNav: any = ref(null)
-
+const navcards: any = ref(null)
 
 // 首页逻辑
 const nav: any = $store.nav.useNavStore()
@@ -434,10 +435,11 @@ watch(() => usrLog.isLogin, (newVal) => {
 onMounted(() => {
   console.log("&&&&&&&&&&&&&&", nav.navH);
   contentStyle.value = {
-    height: `calc(100vh - ${nav.navH}px)`
+    height: `${window.innerHeight - nav.navH}px)`
   }
   navStyle.value = {
-    height: `calc(100vh - ${nav.navH}px - 153px)`
+    // height: `calc(100vh - ${navcards.value.getBoundingClientRect().y}px - ${nav.navH}px)`,
+    height:`${window.innerHeight - navcards.value.getBoundingClientRect().y - 20}px`
   }
   tagList.value = [
     {
@@ -447,7 +449,14 @@ onMounted(() => {
     }
   ]
   getNavList()
-
+window.addEventListener('resize', ()=>{
+contentStyle.value = {
+    height: `calc(100vh - ${nav.navH}px)`
+  }
+  navStyle.value = {
+   height:`${window.innerHeight - navcards.value.getBoundingClientRect().top - 20}px`
+  }
+});
 
 })
 </script>