youzitree/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
youzi
2025-12-24 16:31:45 +08:00
parent 6c16c4b37c
commit 662929b150
17 changed files with 372 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Index.vue
View File

@ -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>

3
src/components/homeSide.vue
View File

@ -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">

24
src/components/menuH.vue
View File

@ -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">

37
src/views/Home.vue
View File

@ -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>