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

优化组件类型声明，添加页面描述元信息，更新依赖项，添加新图片，重构多个组件，改进画廊功能

Browse Source
This commit is contained in:
youzi
2025-12-18 16:00:15 +08:00
parent 1034786c40
commit 7b313a2264
12 changed files with 201 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/offwork.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 586 KiB

BIN
src/assets/images/onwork.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 741 KiB

14
src/components/aplayer.vue
View File

@ -30,14 +30,20 @@ const data: any = reactive({
onMounted(async () => {
// 8834041785
const res = await fetch("https://met.hxyouzi.com/meting-api/?server=tencent&type=playlist&id=7567066822")
// const res = await fetch("https://met.hxyouzi.com/meting-api/?server=tencent&type=playlist&id=7567066822")
// const res = await fetch("https://api.moeyao.cn/meting/?server=tencent&type=playlist&id=8834041785")
const mlist = await res.json()
// const mlist = await res.json()
const metto = 'youzi'
const server = 'tencent'
const gdid = '7567066822'
let ck = 'RK=beuVmBI+x3; ptcz=08924c0c66c35b66361f002fb0b3005ff0f2144404f548f8728b167ffb3dc25d; pgv_pvid=2605897556; fqm_pvqid=c38eee7f-1f49-4867-8fb4-8dbb764cb93b; ts_uid=4584087650; pac_uid=0_xXEQBtbyPnKSj; omgid=0_SK8mZi6ZyjtN4; _qimei_q32=d611a6803057686110470945b0c17a21; _qimei_q36=fcef018f916225c22be032db30001e219617; _qimei_h38=e8d664cf2171af215382857302000000719801; eas_sid=I1j7m5e9o2O188P6Y4P7D745Z4; fqm_sessionid=f2c44c43-4d85-4dcb-99c0-cef6d6e2b0cb; pgv_info=ssid=s1311374400; ts_last=y.qq.com/; ts_refer=cn.bing.com/; _qpsvr_localtk=0.1390152059728047; login_type=1; psrf_access_token_expiresAt=1765271149; psrf_qqopenid=DE4C1520CB81DEEF7C0BE8E9B0FD2783; wxrefresh_token=; music_ignore_pskey=202306271436Hn@vBj; wxunionid=; euin=owv5oeCioiEAoz**; wxopenid=; tmeLoginType=2; psrf_qqrefresh_token=A9707E145813679F3654C6E051AA3E2F; psrf_qqaccess_token=C0591D34DF4A719D28815DBA71122DC5; psrf_musickey_createtime=1760087149; psrf_qqunionid=AD81CE40E407AFA9A2F984D05F7F5CD6; uin=2410633923; qm_keyst=Q_H_L_63k3NMFc5RtmTBDyGhskoc5AjaymIKYUZThRS2bJfh0AHztt8D10MRy1XN-MEAUtIkdF_oauym2Y51IbgjNvw1Wu8hZECDA; qqmusic_key=Q_H_L_63k3NMFc5RtmTBDyGhskoc5AjaymIKYUZThRS2bJfh0AHztt8D10MRy1XN-MEAUtIkdF_oauym2Y51IbgjNvw1Wu8hZECDA'
const res = await fetch(`https://met.hxyouzi.com/api?server=${server}&type=playlist&id=${gdid}`)
let mlist: any = await res.json()
data.audio = []
mlist.forEach((i: any) => {
data.audio.push({
title: i.name,
author: i.artist,
title: i.title,
author: i.author,
url: i.url,
pic: i.pic,
lrc: i.lrc,

71
src/components/homeSide.vue
View File

@ -1,37 +1,27 @@
<template>
<div class="pr-8">
<!-- <d-card shadow="never" class="mt-10 bg-white"> -->
<div class="dt-card mt-10 bg-white">
<!-- <template #title> -->
<div class="flex items-center">
<icon-time class="w-5 mr-2"></icon-time>
时间日期
</div>
<!-- </template> -->
<!-- <template #content> -->
<div class="w-full text-center text-[#ec66ab] font-500 text-4xl font-[yj]">{{ t }}</div>
<div class="mt-3 text-right">{{ d }}</div>
<!-- </template> -->
</div>
<!-- </d-card> -->
<d-card shadow="never" class="mt-10 bg-white">
<d-card shadow="never" class="mt-4 bg-white">
<!-- <div class="dt-card mt-10 bg-white"> -->
<template #title>
<div class="flex items-center">
<icon-date class="w-5 mr-2"></icon-date>
农历节气
<icon-time class="w-5 mr-2"></icon-time>
时间日期
</div>
</template>
<template #content>
<div class="w-full text-center text-[#ec66ab] font-500">{{ jq.yearTips }}年 {{ jq.lunarCalendar }}</div>
<div class="w-full flex justify-center">
<img class="mt-2 w-[90%] rounded" :src="jqImg" alt=""></img>
<div class="w-full pr-20 text-center text-[#ec66ab] font-500 text-4xl font-[yj]">{{ t }}</div>
<div class="mt-3 flex justify-between">
<span>今年已过了{{ jq.dayOfYear }}天</span>
{{ d }}
</div>
<div class="mt-2 text-center">{{ jq.solarTerms }}</div>
<img v-if="jq.type != 0" class="absolute top-0 right-4" width="120" src="@/assets/images/offwork.png" alt="">
<img v-else class="absolute top-0 right-4" width="120" src="@/assets/images/onwork.png" alt="">
</template>
<!-- </div> -->
</d-card>
<d-card shadow="never" class="mt-10 bg-white">
<d-card shadow="never" class="mt-4 bg-white">
<template #title>
<div class="flex items-center">
<icon-news class="w-5 mr-2"></icon-news>
@ -59,6 +49,30 @@
</div>
</template>
</d-card>
<d-card shadow="never" class="mt-4 bg-white">
<template #title>
<div class="flex items-center">
<icon-date class="w-5 mr-2"></icon-date>
农历节气
<div class="ml-12 text-[#ec66ab] font-500">{{ jq.yearTips }}年 {{ jq.lunarCalendar }}</div>
</div>
</template>
<template #content>
<div class="truncate text-sm mx-[5%]">
宜：{{ jq.suit }}
</div>
<div class="truncate text-sm mx-[5%]">
忌：{{ jq.avoid }}
</div>
<div class="w-full flex justify-center">
<img class="mt-2 w-[90%] rounded" :src="jqImg" alt=""></img>
</div>
<div class="mt-2 text-center">{{ jq.solarTerms }}</div>
</template>
</d-card>
</div>
</template>
@ -119,9 +133,8 @@ onUnmounted(() => {
src: url('@/assets/font/LCDML.woff2');
}
.dt-card {
background-image: url('@/assets/images/中秋节中国风边框34.png');
background-size: 100% 100%;
padding: 20px 40px;
}
</style>
// .dt-card {
// background-image: url('@/assets/images/中秋节中国风边框34.png');
// background-size: 100% 100%;
// padding: 20px 40px;
// }</style>

33
src/components/menuH.vue
View File

@ -32,8 +32,8 @@
</d-menu-item>
</d-menu>
<!-- 用户区域 -->
<div class="!text-[#ec66ab] user-area flex items-center px-3">
<span class="flex items-center location-info ">
<div class="!text-[#ec66ab] flex items-center" @click="gotoHf">
<span class="flex items-center location-info truncate">
<d-icon color="#ec66ab" class="mr-1" name="location-new"></d-icon>
{{ locationInfo }}
</span>
@ -41,8 +41,11 @@
<span class="weather-info mr-2">{{ wea }}</span>
<i :class="'qiIcon qi-' + weaIcon + '-fill'"></i>
<span class="weather-info ml-4">{{ temp }}°C</span>
<d-avatar v-if="userinfo" :img-src="userinfo.ava_url" class="ml-20 cursor-pointer" alt="用户的头" />
<d-avatar v-else class="ml-20 cursor-pointer" @click="toLogin"></d-avatar>
</div>
<div class="flex items-center ">
<d-avatar v-if="userinfo" :img-src="userinfo.ava_url" class="ml-10 mr-4 cursor-pointer" alt="用户的头" />
<d-avatar v-else class="ml-10 mr-4 cursor-pointer" @click="toLogin"></d-avatar>
</div>
</div>
@ -69,6 +72,7 @@ const key = ref("home");
const locationInfo = ref("获取位置中...");
const latitude = ref<number | null>(null);
const longitude = ref<number | null>(null);
const fxlink = ref<string>("#")
const wea = ref("")
const weaIcon = ref<string>("")
const temp = ref<number>(0);
@ -96,13 +100,13 @@ const getLocation = () => {
async (error) => {
switch (error.code) {
case error.PERMISSION_DENIED:
locationInfo.value = "用户拒绝了位置请求";
locationInfo.value = "正在定位...";
break;
case error.POSITION_UNAVAILABLE:
locationInfo.value = "位置信息不可用";
locationInfo.value = "正在定位...";
break;
case error.TIMEOUT:
locationInfo.value = "获取位置超时";
locationInfo.value = "正在定位...";
break;
}
const res = await $http.mix.getIp();
@ -125,11 +129,12 @@ async function handdleJw(jw: string) {
const zxs = ['北京', '重庆', '天津', '上海']
// 根据经纬度获取物理位置
const loc = await $http.mix.getLocation({ location: jw });
console.log(loc);
console.log('>>> --> handdleJw --> loc:', loc)
fxlink.value = loc.data.fxLink
if (loc.code == 200) {
const data = loc.data;
if (zxs.includes(data.adm2)) {
locationInfo.value = `${data.country}${data.adm1}${data.name}`;
locationInfo.value = `${data.adm1}${data.name}`;
} else {
locationInfo.value = `${data.adm1}${data.adm2}${data.name}`;
}
@ -138,7 +143,7 @@ async function handdleJw(jw: string) {
return
}
const res = await $http.mix.getWeather({ location: jw });
console.log(res);
console.log('>>> --> handdleJw --> res:', res)
if (res.code == 200) {
wea.value = res.data.text;
weaIcon.value = res.data.icon;
@ -158,11 +163,17 @@ function goHome() {
}
function toLogin() {
console.log('>>> --> toLogin --> toLogin:', 'toLogin')
if ($cookies.get('token')) return
router.push('/login');
}
function gotoHf(){
console.log('>>> --> gotoHf --> fxlink:', fxlink)
window.open(fxlink.value,"_BLACK")
}
onMounted(() => {
userinfo.value = $cookies.get('userinfo');

16
src/views/Article.vue
View File

@ -1,18 +1,28 @@
<template>
<div class="article-page">
<h1>文章页</h1>
<!-- 文章内容 -->
<div id="vditor"></div>
</div>
</template>
<script setup lang="ts">
import Vditor from 'vditor';
import 'vditor/dist/index.css';
import { onMounted, ref } from 'vue';
definePage({
name:'article',
name: 'article',
meta: {
title: '文章',
}
})
// 文章页逻辑
const vditor:any = ref(null);
onMounted(() => {
vditor.value = new Vditor('vditor', {
height: '100vh',
width: '100vw'
});
});
</script>
<style scoped>

328
src/views/Gallery.vue
View File

@ -1,119 +1,45 @@
<template>
<PerfectScrollbar ref="scrollbar" @ps-scroll-y="handleScroll">
<div ref="myCon" class="gallery-page py-5 px-[10%]">
<d-tabs v-model="tid" type="options" :before-change="beforeChange" @active-tab-change.native="activeTabChange">
<d-tab id="share" title="画廊">
<d-search class="mt-0 mb-8 w-2/3 mx-auto rounded-full" v-model="kw" is-keyup-search :delay="1000"
@search="onSearch"></d-search>
<div class="gallery-container w-full box-border">
<!-- 瀑布流容器 -->
<div ref="waterfallContainer" v-image-preview
class="waterfall-container flex justify-between flex-nowrap w-full overflow-hidden">
<!-- 动态生成的列 -->
<div v-for="(column, index) in columns" :key="index" class="waterfall-column flex flex-col w-[240px]">
<div v-for="item in column" :key="item.id"
class="gallery-item group relative my-[10px] rounded-lg overflow-hidden transition-transform duration-300 box-border hover:-translate-y-1.5">
<div
class="absolute px-2 truncate hidden group-hover:block top-0 text-center w-full bg-[#00000070] text-white">
{{ item.filename }}</div>
<img :src="item.filepath" alt="" class="gallery-image block w-full h-auto object-cover rounded-md">
<div class="px-2 absolute bottom-0 flex justify-between w-full bg-[#00000060]">
<div class="text-white ">由 <span class="text-[#f1d9db] font-600">{{ item.nickname }}</span> 上传</div>
<d-popover content="下载" trigger="hover" class="!bg-primary" style="color: #fff">
<icon-download @click="downloadFile(item.filepath)"
class="w-5 h-5 text-white hover-text-primary"></icon-download>
</d-popover>
</div>
</div>
<d-search class="mt-0 mb-8 w-2/3 mx-auto rounded-full" v-model="kw" is-keyup-search :delay="1000"
@search="onSearch"></d-search>
<div class="gallery-container w-full box-border">
<!-- 瀑布流容器 -->
<div ref="waterfallContainer" v-image-preview
class="waterfall-container flex justify-between flex-nowrap w-full overflow-hidden">
<!-- 动态生成的列 -->
<div v-for="(column, index) in columns" :key="index" class="waterfall-column flex flex-col w-[240px]">
<div v-for="item in column" :key="item.id"
class="gallery-item group relative my-[10px] rounded-lg overflow-hidden transition-transform duration-300 box-border hover:-translate-y-1.5">
<div
class="absolute px-2 truncate hidden group-hover:block top-0 text-center w-full bg-[#00000070] text-white">
{{ item.filename }}</div>
<img :src="item.filepath" alt="" class="gallery-image block w-full h-auto object-cover rounded-md">
<div class="px-2 absolute bottom-0 flex justify-between w-full bg-[#00000060]">
<div class="text-white ">由 <span class="text-[#f1d9db] font-600">{{ item.nickname }}</span> 上传</div>
<d-popover content="下载" trigger="hover" class="!bg-primary" style="color: #fff">
<icon-download @click="downloadFile(item.filepath)"
class="w-5 h-5 text-white hover-text-primary"></icon-download>
</d-popover>
</div>
</div>
<!-- 加载中指示器 -->
<div v-if="loading" class="loading-indicator text-center p-5 text-gray-600">加载中...</div>
<div v-else class="loading-indicator text-center p-5 text-gray-600">已全部加载完成</div>
</div>
</d-tab>
<d-tab id="my" title="我的">
<div>
<d-upload class="py-8 upload-demo border-2 border-dashed border-gray-300 rounded-md p-4"
:on-success="handleSuccess" :upload-options="uploadOptions" droppable="true">
<div class="w-full h-full flex flex-col items-center justify-center">
<div><d-icon name="upload" size="32px"></d-icon></div>
<div class="my-2">
将文件拖到此处，或
<span class="devui-link text-[#ec66ab]">点击上传</span>
</div>
<div class="text-sm text-gray-500">注意图片大小不要大于5MB哟~</div>
</div>
</d-upload>
</div>
<div class="gallery-container w-full box-border">
<!-- 瀑布流容器 -->
<div ref="waterfallContainer" v-image-preview
class="waterfall-container flex justify-between flex-nowrap w-full overflow-hidden">
<!-- 动态生成的列 -->
<div v-for="(column, index) in columns" :key="index" class="waterfall-column flex flex-col w-[240px]">
<div v-for="item in column" :key="item.id"
class="gallery-item group relative my-[10px] rounded-lg overflow-hidden transition-transform duration-300 box-border hover:-translate-y-1.5">
<div
class="px-2 truncate absolute hidden group-hover:block top-0 text-center w-full bg-[#00000070] text-white">
{{ item.filename }}
</div>
<img :src="item.filepath" alt="" class="gallery-image block w-full h-auto object-cover rounded-md">
<div class="pr-2 absolute bottom-0 flex justify-between items-center w-full bg-[#00000060]">
<div class="text-white ">
<span class="px-2 py-1 bg-primary rounded-full" v-if="item.share">已共享</span>
<span class="px-2 py-1 bg-[#ffa500] rounded-full" v-else>未共享</span>
</div>
<div class="icon flex items-center">
<d-popover content="下载" trigger="hover" class="!bg-primary" style="color: #fff">
<icon-download @click="downloadFile(item.filepath)"
class="w-5 h-5 mr-2 text-white hover-text-primary"></icon-download>
</d-popover>
<d-popover v-if="item.share" content="取消共享" trigger="hover" class="!bg-primary"
style="color: #fff">
<icon-lock @click="handdleShare(item.pid, item.share)"
class="w-5 h-5 text-white hover-text-primary"></icon-lock>
</d-popover>
<d-popover v-else content="共享" trigger="hover" class="!bg-primary" style="color: #fff">
<icon-unlock @click="handdleShare(item.pid, item.share)"
class="w-5 h-5 text-white hover-text-primary"></icon-unlock>
</d-popover>
</div>
</div>
</div>
</div>
</div>
<!-- 加载中指示器 -->
<div v-if="loading" class="loading-indicator text-center p-5 text-gray-600">加载中...</div>
<div v-else class="loading-indicator text-center p-5 text-gray-600">已全部加载完成</div>
</div>
</d-tab>
</d-tabs>
</div>
<Teleport to="body">
<div>
<img class="fixed top-10 -left-2" :src="tao" alt="">
<img class="fixed bottom-10 left-0 w-44" :src="sword" alt="">
<img class="fixed bottom-0 right-5 w-25" :src="psword" alt="">
<img class="fixed top-[56px] right-0" :src="denglong" alt="">
</div>
<!-- 加载中指示器 -->
<div v-if="loading" class="loading-indicator text-center p-5 text-gray-600">加载中...</div>
<div v-else class="loading-indicator text-center p-5 text-gray-600">已全部加载完成</div>
</div>
</Teleport>
</div>
</PerfectScrollbar>
</template>
<script setup lang="ts">
import psword from "@/assets/images/剑-粉.png";
import sword from "@/assets/images/剑.png";
import tao from "@/assets/images/树枝桃.png";
import denglong from "@/assets/images/灯笼.png";
import { throttle } from 'es-toolkit';
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import { onMounted, onUnmounted, ref } from 'vue';
definePage({
name:'gallery',
name: 'gallery',
meta: {
title: '画廊',
}
@ -121,7 +47,6 @@ definePage({
// 画廊页逻辑
const tid = ref('share');
const fileList = ref<any[]>([]);
const pn = ref(1);
const ps = ref(40);
@ -130,23 +55,17 @@ const waterfallContainer = ref<HTMLDivElement | null>(null);
const columns = ref<Array<Array<any>>>([]);
const columnHeights = ref<number[]>([]);
const columnCount = ref(4); // 默认列数
const imageHeights = ref<Record<string, number>>({}); // 存储每张图片的实际高度
const imagesLoaded = ref(0);
const itemWidth = ref(240); // 图片宽度固定为220px
const scrollbar = ref<any>(null);
const itemWidth = ref(240); // 图片宽度固定为240px
const kw = ref<string>('');
const myCon = ref<HTMLDivElement | null>(null);
const uploadOptions = ref({
uri: 'https://www.hxyouzi.com/api/files/upload',
method: 'POST',
maximumSize: 5 * 1024 * 1024,
headers: {
'Authorization': 'Bearer ' + $cookies.get('token'),
},
});
// const uploadOptions = ref({
// uri: 'https://www.hxyouzi.com/api/files/upload',
// method: 'POST',
// maximumSize: 5 * 1024 * 1024,
// headers: {
// 'Authorization': 'Bearer ' + $cookies.get('token'),
// },
// });
// 计算列数 based on 屏幕宽度
function calculateColumnCount() {
@ -164,64 +83,46 @@ function resetWaterfall() {
columns.value = Array(columnCount.value).fill(0).map(() => []);
columnHeights.value = Array(columnCount.value).fill(0);
// 重新分配图片
fileList.value.forEach(item => addToWaterfall(item));
fileList.value.forEach(async item =>await addToWaterfall(item));
console.log('>>> --> resetWaterfall --> fileList:', fileList.value)
}
// 添加图片到瀑布流
async function addToWaterfall(item: any) {
if (columns.value.length === 0) return;
const { height, width } = await getImageSizeByCheck(item.filepath)
const { height, width } =await getImageSizeByCheck(item.filepath)
// 找到高度最小的列
let minHeight = Math.min(...columnHeights.value);
let minIndex = columnHeights.value.indexOf(minHeight);
console.log('>>> --> addToWaterfall --> item:', item)
console.log('>>> --> addToWaterfall --> minIndex:', minIndex)
// 添加到该列
columns.value[minIndex].push(item);
// 估算列高 - 实际高度会在图片加载后更新
const estimatedHeight = itemWidth.value * height / width // 假设1:1比例
const estimatedHeight = itemWidth.value * height / width
columnHeights.value[minIndex] += estimatedHeight + 20; // 加上padding和margin
}
// 图片加载完成后更新瀑布流
function onImageLoad(id: string) {
// 等待DOM更新
nextTick(() => {
if (!waterfallContainer.value) return;
const imgElements = waterfallContainer.value.querySelectorAll(`.gallery-image[src*="${id}"]`);
if (imgElements.length > 0) {
const img = imgElements[0] as HTMLImageElement;
imageHeights.value[id] = img.height;
updateColumnHeights();
}
});
}
function getImageSizeByCheck(url: string): any {
return new Promise(function (resolve, reject) {
let image = new Image();
image.src = url;
let height = 0
let width = 0
let timer = setTimeout(() => {
if (image.width > 0 && image.height > 0) {
height = image.height
width = image.width
resolve({ height, width })
clearTimeout(timer)
}
}, 40)
let image = new Image();
image.src = url;
let height = 0
let width = 0
// let timer = setTimeout(() => {
image.onload = () => {
if (image.width > 0 && image.height > 0) {
height = image.height
width = image.width
resolve({ height, width })
// clearTimeout(timer)
}
}
// }, 100)
});
}
// 更新所有列的高度
function updateColumnHeights() {
if (!waterfallContainer.value) return;
const columnElements = waterfallContainer.value.querySelectorAll('.waterfall-column');
columnHeights.value = Array.from(columnElements).map(el => el.clientHeight);
}
// 获取文件列表
async function getFileList() {
if (loading.value) return;
@ -251,33 +152,33 @@ async function getFileList() {
}
}
// 获取我的文件列表
async function getMyList() {
if (loading.value) return;
loading.value = true;
try {
const res = await $http.file.getMyList({
page_num: pn.value,
page_size: ps.value,
});
// console.log('>>> --> getFileList --> res:', res);
// // 获取我的文件列表
// async function getMyList() {
// if (loading.value) return;
// loading.value = true;
// try {
// const res = await $http.file.getMyList({
// page_num: pn.value,
// page_size: ps.value,
// });
// // console.log('>>> --> getFileList --> res:', res);
if (pn.value === 1) {
fileList.value = res.data;
resetWaterfall();
} else {
// 追加新数据
res.data.forEach((item: any) => {
fileList.value.push(item);
addToWaterfall(item);
});
}
} catch (error) {
console.error('获取文件列表失败:', error);
} finally {
loading.value = false;
}
}
// if (pn.value === 1) {
// fileList.value = res.data;
// resetWaterfall();
// } else {
// // 追加新数据
// res.data.forEach((item: any) => {
// fileList.value.push(item);
// addToWaterfall(item);
// });
// }
// } catch (error) {
// console.error('获取文件列表失败:', error);
// } finally {
// loading.value = false;
// }
// }
// 监听滚动事件
const handleScroll: any = throttle((e: any) => {
@ -302,42 +203,6 @@ function onSearch() {
getFileList();
}
function beforeChange(tabId: string) {
myCon.value?.scrollIntoView(true)
if (tabId === 'my') {
// 我的画廊，不加载更多
if (!$cookies.get('token')) {
$msg.error('请先登录');
return false
}
return true
}
return true
}
function activeTabChange(tabId: string) {
pn.value = 1;
kw.value = '';
fileList.value = [];
resetWaterfall();
if (tabId === 'my') {
// console.log('>>> --> activeTabChange --> tabId:', tabId)
getMyList()
} else if (tabId === 'share') {
getFileList();
}
}
function handleSuccess(res: any) {
console.log('>>> --> handleSuccess --> res:', res)
const code = JSON.parse(res[0].response).code
if (code === 200) {
$msg.success('上传成功');
getMyList();
}
}
function downloadFile(url: string) {
console.log('>>> --> downloadFile --> url:', url)
// 创建临时a标签
@ -358,35 +223,6 @@ function downloadFile(url: string) {
document.body.removeChild(link);
}
async function handdleShare(id: string, share: boolean | number) {
console.log('>>> --> handdleShare --> id:', id)
console.log('>>> --> handdleShare --> share:', share)
try {
const res = await $http.file.putShare({
pid: id,
share: Number(!share),
})
console.log('>>> --> handdleShare --> res:', res)
if (res.code === 200) {
$msg.success('共享成功');
pn.value = 1;
fileList.value = [];
resetWaterfall();
getMyList();
console.log('>>> --> handdleShare --> myCon.value:', myCon.value?.scrollTop)
if (myCon.value) {
myCon.value.scrollIntoView(true)
}
}
} catch (error) {
console.error('共享文件失败:', error);
}
}
onMounted(() => {
getFileList();
// 计算初始列数

12
src/views/Home.vue
View File

@ -14,7 +14,7 @@
</div>
<!-- 图片网格展示区域 -->
<PerfectScrollbar class="" :style="navStyle">
<div class="navcard grid-cols-5 gap-6 p-12">
<div class="navcard grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6 p-12">
<d-card class="bg-[#ffffff80] h-25" v-for="(item, index) in navlist" :key="index"
@click="goExtra(item.menu_link)">
<template #content>
@ -22,8 +22,8 @@
<div :style="{ background: item.color }"
class="w-8 h-8 rounded-full text-white flex items-center justify-center" v-if="item.icon_error">
{{ item.first }}</div>
<img v-else width="32" :src="item.menu_icon" @error="imgErr(index)" class="grid-image" />
<div class="mt-2 w-full text-center text-lg">{{ item.menu_name || "" }}</div>
<img class="grid-image w-8 h-8 rounded-full" v-else :src="item.menu_icon" @error="imgErr(index)" />
<div class="mt-2 w-full text-center text-lg truncate">{{ item.menu_name || "" }}</div>
</div>
</template>
</d-card>
@ -132,8 +132,7 @@ const navlist: any = ref([])
async function getNavList() {
const res = await $http.nav.getNavList()
res.data.forEach((i: any) => {
res.data?.forEach((i: any) => {
i.icon_error = false
i.first = i.menu_name.at(0)
i.color = getRandomDarkColor()
@ -239,13 +238,14 @@ onMounted(() => {
</script>
<style scoped lang="less">
/* 首页样式 */
/* 首页样式
.main-content {
background-image: url('@/assets/images/小鹿.png');
background-repeat: no-repeat;
background-position: 111% center;
background-size: auto 100%;
}
*/
.navcard {
display: grid;