expdsn
/
ai-bot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实现了滚动功能

This commit is contained in:
expdsn 2025-01-23 17:14:36 +08:00
parent 6ab51ffe00
commit 4317963775
5 changed files with 115 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
app/_lib/data/search.ts Normal file
View File

@ -0,0 +1,79 @@
"use server";
import { getCollection } from "../mongodb";
export type SearchTypeItem = {
name: string;
key: string;
includes: string[];
priority: number;
}
export type SearchWayItemType = {
label: string;
value: string;
fullName: string;
key: string;
}
export async function getSearchTypeList({ page = 1, pageSize = 9999 }: {
page?: number;
pageSize?: number;
}) {
const collection = await getCollection('search-type');
const startIndex = (page - 1) * pageSize;
const pipeline = [
{ $sort: { priority: 1 } },
{ $skip: startIndex },
{ $limit: pageSize },
{
$addFields: {
_id: { $toString: "$_id" }
}
}
];
const cursor = collection.aggregate<SearchTypeItem>(pipeline);
const list = await cursor.toArray();
// 计算总数量
const total = (await collection.find<SearchTypeItem>({}).toArray()).length
return {
total,
list
}
}
export async function getSearchWayList({ page = 1, pageSize = 9999 }: {
page?: number;
pageSize?: number;
}) {
const collection = await getCollection('search');
const startIndex = (page - 1) * pageSize;
const pipeline = [
{ $sort: { priority: 1 } },
{ $skip: startIndex },
{ $limit: pageSize },
{
$addFields: {
_id: { $toString: "$_id" }
}
}
];
const cursor = collection.aggregate<SearchWayItemType>(pipeline);
const list = await cursor.toArray();
// 计算总数量
const total = (await collection.find<SearchWayItemType>({}).toArray()).length
return {
total,
list
}
}
export async function addSearchType(searchTypeItem: SearchTypeItem) {
const collection = await getCollection('search-type')
collection.insertOne(searchTypeItem)
}
export async function addSearchWay(searchItem: SearchWayItemType) {
const collection = await getCollection('search')
collection.insertOne(searchItem)
}

19
app/_ui/LinkListBox.tsx
View File

@ -2,13 +2,28 @@
import Link from "next/link";
import { LinkType } from "../_lib/data/linkType";
import { Link as _Link } from "../_lib/data/link";
import { useMemo } from "react";
import { useEffect, useMemo } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClock, faFire, faTimeline, faTimesCircle, faTimesRectangle, faVolumeTimes } from "@fortawesome/free-solid-svg-icons";
import { useAtom } from "jotai";
import { linkTypeAtom } from "../_lib/atom";
export default function LinkListBox({ linkTypeList, linkList, showHot, showRecent }: { linkTypeList: LinkType[]; linkList: _Link[]; showHot: boolean; showRecent: boolean }) {
const hotList = useMemo(() => linkList.filter((val, index) => val.isHot && index < 12), [])
const recentList = useMemo(() => linkList.map(val => val).sort((a, b) => b.addTime - a.addTime).filter((_, idx) => idx < 12), [])
const [currentId] = useAtom(linkTypeAtom)
useEffect(() => {
console.log(currentId);
if (currentId) {
// 根据 targetId 查找对应的元素
const element = document.getElementById(currentId);
if (element) {
// 滚动到找到的元素位置
element.scrollIntoView({ behavior: 'smooth' });
}
}
}, [currentId])
return <div className="flex w-full flex-col gap-y-4">
{
showHot && <div className="flex flex-col gap-y-2" >
@ -57,7 +72,7 @@ export default function LinkListBox({ linkTypeList, linkList, showHot, showRecen
}
{
linkTypeList.map(item => (
<div className="flex flex-col gap-y-2" key={item._id}>
<div className="flex flex-col gap-y-2" key={item._id} id={item._id}>
<div className="flex items-center text-[#555555] gap-x-2 text-xl">
<img src={item.icon as string} className="w-[30px] h-[30px] object-cover"></img>

3
app/_ui/SiderNav.tsx
View File

@ -10,8 +10,7 @@ import { LinkType } from "../_lib/data/linkType";
export default function SiderNav({ linkList }: { linkList: LinkType[] }) {
const pathname = usePathname()
console.log(pathname);
const [selectType, setSelectType] = useAtom(linkTypeAtom)
const [, setSelectType] = useAtom(linkTypeAtom)
return (
<div className="w-[220px] flex flex-col gap-y-2 fixed left-0 top-0 h-[100vh] bg-[#F9F9F9]">
<div className="bg-white shadow-sm">

5
app/_ui/footer.tsx Normal file
View File

@ -0,0 +1,5 @@
export default function Footer() {
return <div className="h-[300px] w-full bg-red-200">
</div>
}

21
app/page.tsx
View File

@ -13,6 +13,7 @@ import Link from "next/link";
import LinkListBox from "./_ui/LinkListBox";
import { getLinkTypeList } from "./_lib/data/linkType";
import { getLinkList } from "./_lib/data/link";
import Footer from "./_ui/footer";
export default async function Home() {
@ -23,19 +24,23 @@ export default async function Home() {
return (
<div className="flex min-h-full w-full font-[family-name:var(--font-geist-sans)] relative">
<SiderNav linkList={linkTypeList} />
<div className="absolute -z-10 from-[#E6EEF4] h-[50vh] w-full bg-gradient-to-br via-[#F1ECF4] to-[#F5ECEA]">
<div className="w-full">
<div className="absolute -z-10 from-[#E6EEF4] h-[50vh] w-full bg-gradient-to-br via-[#F1ECF4] to-[#F5ECEA]">
<div className="absolute z-10 from-[#F9F9F9] left-0 to-transparent bg-gradient-to-t w-full h-[100px] bottom-[0px]">
</div>
<div className="absolute z-10 from-[#F9F9F9] left-0 to-transparent bg-gradient-to-t w-full h-[100px] bottom-[0px]">
</div>
<main className="flex-1 relative flex flex-col p-5 gap-y-4">
{/* <HeaderNav></HeaderNav> */}
<Search></Search>
{/* <PosterBox posterList={[]} /> */}
<LinkListBox linkList={linkList} linkTypeList={linkTypeList} showHot showRecent></LinkListBox>
</main>
<Footer></Footer>
</div>
<main className="flex-1 relative flex flex-col p-5 gap-y-4">
{/* <HeaderNav></HeaderNav> */}
<Search></Search>
{/* <PosterBox posterList={[]} /> */}
<LinkListBox linkList={linkList} linkTypeList={linkTypeList} showHot showRecent></LinkListBox>
</main>
</div>
);
}