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

自动路由-bug版

Browse Source
This commit is contained in:
youzi
2025-08-21 11:19:59 +08:00
parent 22ca45510b
commit 36950ab424
27 changed files with 677 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -1,7 +1,8 @@
<template>
<div>
<PerfectScrollbar>
<router-view></router-view>
<!-- <router-view></router-view> -->
<lay-index></lay-index>
</PerfectScrollbar>
</div>
@ -18,6 +19,7 @@
</template>
<script setup lang="ts">
import layIndex from './Index.vue'
// 空白项目入口
const modal = reactive<any>({
visible: false,

6
src/Layout.vue → src/Index.vue
View File

@ -21,8 +21,10 @@
<script setup lang="ts">
// 空白项目入口
import menuH from '@/components/menu.vue';
const route = useRoute();
// definePage({
// path:"/",
// })
const route = useRoute()
</script>

16
src/api/file/index.ts
View File

@ -8,3 +8,19 @@ export function getFileList(params: Record<string, string>) {
params,
});
}
//getMyList
export function getMyList(params: Record<string, string>) {
return request({
url: "/files/myfile",
method: "get",
params,
});
}
//putShare
export function putShare(data: Record<string, string>) {
return request({
url: `/files/${data.pid}`,
method: "put",
data,
});
}

BIN
src/assets/images/中秋节中国风边框34.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/assets/images/剑-粉.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 756 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

BIN
src/assets/images/复古.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 879 KiB

BIN
src/assets/images/嫦娥.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

BIN
src/assets/images/小鹿.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

BIN
src/assets/images/树枝桃.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
src/assets/images/灯笼.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

31
src/components/homeSide.vue
View File

@ -1,17 +1,19 @@
<template>
<div class="pr-8">
<d-card shadow="never" class="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>
</d-card>
<!-- <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">
<template #title>
@ -117,4 +119,9 @@ onUnmounted(() => {
src: url('@/assets/font/LCDML.woff2');
}
.dt-card {
background-image: url('@/assets/images/中秋节中国风边框34.png');
background-size: 100% 100%;
padding: 20px 40px;
}
</style>

3
src/components/menu.vue → src/components/menuH.vue
View File

@ -164,10 +164,11 @@ function toLogin() {
onMounted(() => {
console.log(route.name);
userinfo.value = $cookies.get('userinfo');
console.log('>>>>>>>>>>', userinfo.value);
key.value = route.name as string;
console.log('>>> --> route.name:', route.name)
getLocation(); // 组件挂载时获取位置
const h: number = nav.value.clientHeight

4
src/icon/download.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M9.75 6.75h-3a3 3 0 0 0-3 3v7.5a3 3 0 0 0 3 3h7.5a3 3 0 0 0 3-3v-7.5a3 3 0 0 0-3-3h-3V1.5a.75.75 0 0 0-1.5 0v5.25Zm0 0h1.5v5.69l1.72-1.72a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 1 1 1.06-1.06l1.72 1.72V6.75Z" clip-rule="evenodd" />
<path d="M7.151 21.75a2.999 2.999 0 0 0 2.599 1.5h7.5a3 3 0 0 0 3-3v-7.5c0-1.11-.603-2.08-1.5-2.599v7.099a4.5 4.5 0 0 1-4.5 4.5H7.151Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 529 B

3
src/icon/lock.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z" clip-rule="evenodd" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 338 B

3
src/icon/unlock.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path d="M18 1.5c2.9 0 5.25 2.35 5.25 5.25v3.75a.75.75 0 0 1-1.5 0V6.75a3.75 3.75 0 1 0-7.5 0v3a3 3 0 0 1 3 3v6.75a3 3 0 0 1-3 3H3.75a3 3 0 0 1-3-3v-6.75a3 3 0 0 1 3-3h9v-3c0-2.9 2.35-5.25 5.25-5.25Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 309 B

3
src/main.ts
View File

@ -3,7 +3,7 @@ import { useConfig } from "@/config";
import icon from "@/icon/index.ts";
import { createPinia } from "pinia";
import "virtual:uno.css";
import { createApp } from "vue";
import { createApp, vaporInteropPlugin } from "vue";
import App from "./App.vue";
import router from "./router";
// 自定义主题配置 - 设置主色和二级色
@ -16,6 +16,7 @@ const themeService = ThemeServiceInit({ infinityTheme }, "infinityTheme");
themeService?.applyTheme(sweetTheme);
const app = createApp(App);
app.use(vaporInteropPlugin)
app.use(createPinia());
app.use(router);

101
src/router/index.ts
View File

@ -1,100 +1,21 @@
import { createRouter, createWebHistory } from "vue-router";
import layout from "@/Layout.vue";
import Home from '@/views/Home.vue';
import { routes } from 'vue-router/auto-routes';
// import layout from "@/Layout.vue";
// import Home from '@/views/Home.vue';
// 导入视图组件 - 修改为@开头的懒加载路径
const Gallery = () => import("@/views/Gallery.vue");
const Article = () => import("@/views/Article.vue");
const Widget = () => import("@/views/Widget.vue");
const AppShare = () => import("@/views/AppShare.vue");
const Plink = () => import("@/views/Plink.vue");
const Login = () => import("@/views/login/Login.vue");
const NotFound = () => import("@/views/NotFound.vue");
// const Gallery = () => import("@/views/Gallery.vue");
// const Article = () => import("@/views/Article.vue");
// const Widget = () => import("@/views/Widget.vue");
// const AppShare = () => import("@/views/AppShare.vue");
// const Plink = () => import("@/views/Plink.vue");
// const Login = () => import("@/views/Login.vue");
// const NotFound = () => import("@/views/NotFound.vue");
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
meta: {},
children: [
{
path: "/",
component: layout,
redirect: {name:'home'},
children: [
{
path: "/home",
name: "home",
component: Home,
meta: {
title:'首页'
},
},
{
path: "/gallery",
name: "gallery",
component: Gallery,
meta: {
title:'画廊'
},
},
{
path: "/article",
name: "article",
component: Article,
meta: {
title:'文章'
},
},
{
path: "/widget",
name: "widget",
component: Widget,
meta: {
title:'工具'
},
},
{
path: "/appshare",
name: "appShare",
component: AppShare,
meta: {
title:'软件分享'
},
},
{
path: "/plink",
name: "plink",
component: Plink,
meta: {
title:'友链'
},
},
],
},
{
path: "/login",
name: "login",
component: Login,
meta: {
title:'登录'
},
},
{
path: "/404",
name: "404",
component: NotFound,
meta: {
title:'错误页'
},
},
],
},
],
routes:routes as any
});
export default router;

271
src/views/Gallery.vue
View File

@ -1,8 +1,10 @@
<template>
<PerfectScrollbar ref="scrollbar" @ps-scroll-y="handleScroll">
<div class="gallery-page py-5 px-[10%]">
<d-tabs v-model="tid" type="slider">
<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
@ -10,25 +12,105 @@
<!-- 动态生成的列 -->
<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 my-[10px] rounded-lg overflow-hidden transition-transform duration-300 box-border hover:-translate-y-1.5">
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>
</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-tab id="my" title="我的">我的</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>
</Teleport>
</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';
// 画廊页逻辑
const tid = ref('share');
const fileList = ref<any[]>([]);
@ -43,6 +125,18 @@ const imageHeights = ref<Record<string, number>>({}); // 存储每张图片的
const imagesLoaded = ref(0);
const itemWidth = ref(240); // 图片宽度固定为220px
const scrollbar = ref<any>(null);
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'),
},
});
// 计算列数 based on 屏幕宽度
@ -65,16 +159,19 @@ function resetWaterfall() {
}
// 添加图片到瀑布流
function addToWaterfall(item: any) {
async function addToWaterfall(item: any) {
if (columns.value.length === 0) return;
const { height, width } = await getImageSizeByCheck(item.filepath)
// 找到高度最小的列
let minHeight = Math.min(...columnHeights.value);
let minIndex = columnHeights.value.indexOf(minHeight);
// 添加到该列
columns.value[minIndex].push(item);
// 估算列高 - 实际高度会在图片加载后更新
const estimatedHeight = itemWidth.value; // 假设1:1比例
columnHeights.value[minIndex] += estimatedHeight + 24; // 加上padding和margin
const estimatedHeight = itemWidth.value * height / width // 假设1:1比例
columnHeights.value[minIndex] += estimatedHeight + 20; // 加上padding和margin
}
// 图片加载完成后更新瀑布流
@ -91,6 +188,24 @@ function onImageLoad(id: string) {
});
}
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 = setInterval(() => {
if (image.width > 0 && image.height > 0) {
height = image.height
width = image.width
resolve({ height, width })
clearInterval(timer)
}
}, 40)
});
}
// 更新所有列的高度
function updateColumnHeights() {
if (!waterfallContainer.value) return;
@ -104,10 +219,39 @@ async function getFileList() {
loading.value = true;
try {
const res = await $http.file.getFileList({
keyword: kw.value,
page_num: pn.value,
page_size: ps.value,
});
console.log('>>> --> getFileList --> res:', res);
// 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;
}
}
// 获取我的文件列表
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;
@ -127,11 +271,11 @@ async function getFileList() {
}
// 监听滚动事件
function handleScroll(e: any) {
// console.log('>>> --> handleScroll --> loading:', e)
const handleScroll: any = throttle((e: any) => {
console.log('>>> --> handleScroll --> loading:', e)
if (loading.value) return;
const scrollTop = e.target.scrollTop
// console.log('>>> --> handleScroll --> scrollTop:', scrollTop)
console.log('>>> --> handleScroll --> scrollTop:', scrollTop)
const scrollHeight = e.target.scrollHeight
// console.log('>>> --> handleScroll --> scrollHeight:', scrollHeight)
const clientHeight = e.target.offsetHeight;
@ -143,8 +287,97 @@ function handleScroll(e: any) {
pn.value++;
getFileList();
}
}, 1000)
function onSearch() {
pn.value = 1;
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标签
const link = document.createElement('a');
// 设置下载链接
link.href = url;
// 提取文件名
const fileName = url.split('/').pop() || 'downloaded-file';
// 设置下载属性和文件名
link.download = fileName;
// 设置为隐藏元素
link.style.display = 'none';
// 添加到文档
document.body.appendChild(link);
// 触发点击事件
link.click();
// 移除临时元素
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();
// 计算初始列数
@ -156,6 +389,11 @@ onMounted(() => {
});
onUnmounted(() => {
pn.value = 1;
kw.value = '';
fileList.value = [];
resetWaterfall();
// 移除监听
window.removeEventListener('resize', calculateColumnCount);
window.removeEventListener('scroll', handleScroll);
@ -187,4 +425,13 @@ onUnmounted(() => {
width: 100%;
}
:deep(.devui-upload) {
width: 100%;
&>div {
width: 100%;
}
}
</style>

19
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">
<div class="pt-8 px-12 relative">
<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>
@ -15,7 +15,7 @@
<!-- 图片网格展示区域 -->
<PerfectScrollbar class="" :style="navStyle">
<div class="navcard grid-cols-5 gap-6 p-12">
<d-card class="bg-[white] h-25" v-for="(item, index) in navlist" :key="index"
<d-card class="bg-[#ffffff80] h-25" v-for="(item, index) in navlist" :key="index"
@click="goExtra(item.menu_link)">
<template #content>
<div class="mt-1 w-full flex flex-col items-center cursor-pointer hover:!text-primary">
@ -27,7 +27,7 @@
</div>
</template>
</d-card>
<d-card class="bg-[white] h-25">
<d-card class="bg-[#ffffff80] h-25">
<div @click="addNav" class="w-full h-full flex flex-col items-center justify-center cursor-pointer">
<div :style="{ background: getRandomDarkColor() }"
class="w-12 h-12 rounded-full text-2xl text-white flex items-center justify-center">
@ -78,10 +78,12 @@
</template>
<script setup lang="ts">
import aplayer from '@/components/aplayer.vue'
import homeSide from '@/components/homeSide.vue'
import { getDictValue } from '@/util/index.ts'
definePage({
name:'home'
})
// 新增导航弹窗
const visible: any = ref(false)
const navData: any = reactive({
@ -235,8 +237,15 @@ onMounted(() => {
<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;
}
:deep(.devui-input-slot__prepend) {

0
src/views/login/Login.vue → src/views/Login.vue
View File