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

dist/assets/AppShare-BNCN_III.js

@@ -1 +1 @@
-import{d as a,c as s,o,a as t,_ as p}from"./index-BEOLs7p_.js";const r={class:"appshare-page"},n=a({__name:"AppShare",setup(_){return(c,e)=>(o(),s("div",r,e[0]||(e[0]=[t("h1",null,"软件分享页",-1)])))}}),l=p(n,[["__scopeId","data-v-e10305df"]]);export{l as default};
+import{d as a,c as s,o,a as t,_ as p}from"./index-Ciy1cxtB.js";const r={class:"appshare-page"},n=a({__name:"AppShare",setup(_){return(c,e)=>(o(),s("div",r,e[0]||(e[0]=[t("h1",null,"软件分享页",-1)])))}}),l=p(n,[["__scopeId","data-v-e10305df"]]);export{l as default};

dist/assets/Article-D_KqLavF.js

@@ -1,4 +1,4 @@
-import{g as Ci,d as Li,r as Mi,b as ki,c as Ti,o as _i,a as Ai,_ as xi}from"./index-BEOLs7p_.js";var Lt={exports:{}};/*!
+import{g as Ci,d as Li,r as Mi,b as ki,c as Ti,o as _i,a as Ai,_ as xi}from"./index-Ciy1cxtB.js";var Lt={exports:{}};/*!
  * Vditor v3.11.2 - A markdown editor written in TypeScript.
  *
  * MIT License

dist/assets/NotFound-T3ZBAEQw.js

@@ -1 +1 @@
-import{d as e,c as o,o as n}from"./index-BEOLs7p_.js";const s=e({__name:"NotFound",setup(t){return(a,c)=>(n(),o("div",null," 404 "))}});export{s as default};
+import{d as e,c as o,o as n}from"./index-Ciy1cxtB.js";const s=e({__name:"NotFound",setup(t){return(a,c)=>(n(),o("div",null," 404 "))}});export{s as default};

dist/assets/Plink-mzChPfSU.js

@@ -1 +1 @@
-import{d as s,c as o,o as t,a,_ as n}from"./index-BEOLs7p_.js";const _={class:"plink-page"},c=s({__name:"Plink",setup(p){return(r,e)=>(t(),o("div",_,e[0]||(e[0]=[a("h1",null,"友链页",-1)])))}}),d=n(c,[["__scopeId","data-v-28948e5b"]]);export{d as default};
+import{d as s,c as o,o as t,a,_ as n}from"./index-Ciy1cxtB.js";const _={class:"plink-page"},c=s({__name:"Plink",setup(p){return(r,e)=>(t(),o("div",_,e[0]||(e[0]=[a("h1",null,"友链页",-1)])))}}),d=n(c,[["__scopeId","data-v-28948e5b"]]);export{d as default};

dist/assets/Widget-ZM2msi3D.js

@@ -1 +1 @@
-import{_ as i,c as l,o as _,a as t,i as s,M as o,L as a,j as r,R as p}from"./index-BEOLs7p_.js";const f={class:"widget-page"},m={class:"flex items-center"},u={class:"p-4"},v={__name:"Widget",setup(g){return(w,e)=>{const n=a("icon-widget"),c=a("vue3VideoPlay"),d=p;return _(),l("div",f,[e[1]||(e[1]=t("h1",null,"工具页",-1)),s(d,{class:"w-1/3 bg-[#ffffff60] rounded-[10px]",shadow:"hover"},{title:o(()=>[t("div",m,[s(n,{class:"w-5 mr-2"}),e[0]||(e[0]=r(" 视频工具 "))])]),content:o(()=>[t("div",u,[s(c,{class:"w-full",title:"钢铁侠",src:"https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4"})])]),_:1})])}}},h=i(v,[["__scopeId","data-v-fe61d0c3"]]);export{h as default};
+import{_ as i,c as l,o as _,a as t,i as s,M as o,L as a,j as r,R as p}from"./index-Ciy1cxtB.js";const f={class:"widget-page"},m={class:"flex items-center"},u={class:"p-4"},v={__name:"Widget",setup(g){return(w,e)=>{const n=a("icon-widget"),c=a("vue3VideoPlay"),d=p;return _(),l("div",f,[e[1]||(e[1]=t("h1",null,"工具页",-1)),s(d,{class:"w-1/3 bg-[#ffffff60] rounded-[10px]",shadow:"hover"},{title:o(()=>[t("div",m,[s(n,{class:"w-5 mr-2"}),e[0]||(e[0]=r(" 视频工具 "))])]),content:o(()=>[t("div",u,[s(c,{class:"w-full",title:"钢铁侠",src:"https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4"})])]),_:1})])}}},h=i(v,[["__scopeId","data-v-fe61d0c3"]]);export{h as default};

dist/assets/home-BC8ddtoY.js

@@ -1 +1 @@
-import{c as e,o}from"./index-BEOLs7p_.js";const n={__name:"home",setup(t){return(c,r)=>(o(),e("div",null," 这里是控制台首页 "))}};export{n as default};
+import{c as e,o}from"./index-Ciy1cxtB.js";const n={__name:"home",setup(t){return(c,r)=>(o(),e("div",null," 这里是控制台首页 "))}};export{n as default};

dist/index.html

@@ -7,8 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="这是柚子的网站，做一些分享类的功能"/>
   <title>柚子の网站</title>
-  <script type="module" crossorigin src="/blog/assets/index-BEOLs7p_.js"></script>
+  <script type="module" crossorigin src="/blog/assets/index-Ciy1cxtB.js"></script>
-  <link rel="stylesheet" crossorigin href="/blog/assets/index-DsMJ4ylN.css">
+  <link rel="stylesheet" crossorigin href="/blog/assets/index-DJ3SPFLL.css">
 </head>
 
 <body>

src/Index.vue

@@ -17,6 +17,14 @@
 
 <script setup lang="ts">
 const route = useRoute()
+const footer = ref<HTMLElement | null>(null)
+onMounted(() => {
+  // 计算footer的高度
+
+  const footerHeight = footer.value?.clientHeight || 0;
+
+  console.log('footerHeight', footerHeight);
+})
 </script>
 
 <style scoped>

src/components/homeSide.vue

@@ -30,7 +30,7 @@
       </template>
       <template #content>
         <div class="py-1" v-for="i in bdNews" :key="i.id">
-          <a class="devui-link flex justify-between" :href="i.url" target="_blank">
+          <a class="devui-link flex justify-between truncate" :href="i.url" target="_blank">
             <span class="flex items-center">{{ i.index }}. {{ i.title }}
               <icon-hot v-show="i.index < 4" class="ml-2 w-4 text-[red] inline-block"></icon-hot>
             </span>
@@ -38,7 +38,6 @@
           </a>
         </div>
         <div class="mt-2 justify-between flex items-center">
-
           <div class="w-2/5 h-px bg-[#ec66ab]"></div>
           <a class="devui-link text-[#ec66ab] flex items-center" href="https://www.baidu.com/s?ie=utf-8&wd=百度新闻"
             target="_blank">

src/components/menuH.vue

@@ -1,11 +1,11 @@
 <template>
-  <div ref="nav" class="main-nav flex justify-between bg-white">
+  <div ref="nav" class="main-nav hidden lg:flex justify-between bg-white">
     <!-- 网站Logo -->
-    <div class="px-5 flex items-center" slot="brand" @click="goHome">
+    <div class="px-5 items-centerflex" slot="brand" @click="goHome">
       <img :src="logo" alt="柚子的网站" class="h-9 align-middle" />
     </div>
     <!-- 主导航菜单 -->
-    <d-menu mode="horizontal" router class="ml-5 h-14 text-[16px]" :default-select-keys="[key]">
+    <d-menu mode="horizontal" router class="ml-5 h-14 text-[16px] " :default-select-keys="[key]">
       <d-menu-item key="home">
         <d-icon :component="homeSvg" class="w-5 mr-1"></d-icon>
         首页
@@ -38,7 +38,7 @@
         {{ locationInfo }}
       </span>
       <span class="mx-3 text-gray-300">|</span>
-      <span class="weather-info   mr-2">{{ wea }}</span>
+      <span class="weather-info mr-2 truncate">{{ wea }}</span>
       <i :class="'qiIcon qi-' + weaIcon + '-fill'"></i>
       <span class="weather-info ml-4">{{ temp }}°C</span>
     </div>
@@ -74,7 +74,21 @@
       <login-modal v-model:visible="visible"></login-modal>
     </d-modal>
   </div>
-
+  <div class="flex justify-between bg-white">
+    <div class="pl-2 items-centerflex" slot="brand" @click="">
+      <img :src="logo" alt="柚子的网站" class="h-9 align-middle" />
+    </div>
+    <div class="flex items-center mr-2">
+        <div  v-if="userinfo" class="flex items-center">
+          <d-avatar :img-src="userinfo.ava_url" class="cursor-pointer" alt="用户的头" />
+          <div class="cursor-pointer ml-2 text-gray text-sm">{{ userinfo.nickname }}</div>
+        </div>
+      <div v-else class="flex items-center">
+        <d-avatar class="cursor-pointer" @click="toLogin"></d-avatar>
+        <div class="cursor-pointer ml-2 text-gray text-sm" @click="toLogin">登录</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">

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="">
+        <!-- <PerfectScrollbar class="w-full overflow-x-auto"> -->
-          <div v-if="navlist.length" class="flex gap-6 px-12 mt-6 mb-3 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" hideBeyondTags v-for="tag in tagList" :checked="tag.checked" :color="tag.color"
+          <d-tag class="cursor-pointer truncate" hideBeyondTags v-for="tag in tagList" :checked="tag.checked"
-              @click="handdleTagClick(tag)">{{ tag.name }}</d-tag>
+            :color="tag.color" @click="handdleTagClick(tag)">{{ tag.name }}</d-tag>
         </div>
-        </PerfectScrollbar>
+        <!-- </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>