优化了查询方式和接口代码，优化了界面布局

app/_lib/data/link.ts

@@ -0,0 +1,53 @@
+"use server";
+
+import { getCollection } from "../mongodb";
+import { ReactNode } from "react";
+
+export type Link = {
+    name: string;
+    link?: string;
+    description: string;
+    _id: string;
+    type: string;
+    priority: number;
+    logoLink: string;
+    isHot?: boolean;
+    addTime: number;
+
+}
+export async function getLinkList({ page = 1, pageSize = 9999, typeId }: {
+    page?: number;
+    pageSize?: number;
+    typeId?: string;
+}) {
+    const collection = await getCollection('link');
+    const startIndex = (page - 1) * pageSize;
+    // 构建查询条件对象
+    const query = {
+        type: typeId
+    } as any;
+    if (!typeId) {
+        // 如果 typeId 不存在，将其删除
+        delete query.type
+    }
+    const pipeline = [
+        // 根据构建好的查询条件筛选文档
+        { $match: query },
+        { $sort: { priority: 1 } },
+        { $skip: startIndex },
+        { $limit: pageSize },
+        {
+            $addFields: {
+                _id: { $toString: "$_id" }
+            }
+        }
+    ];
+    const cursor = collection.aggregate<Link>(pipeline);
+    const list = await cursor.toArray();
+    // 获取符合查询条件的文档总数
+    const total = await collection.countDocuments(query);
+    return {
+        total,
+        list
+    }
+}

app/_lib/data/linkType.ts

@@ -0,0 +1,40 @@
+"use server";
+
+import { getCollection } from "../mongodb";
+import { ReactNode } from "react";
+export type LinkType = {
+    label: string;
+    icon?: string;
+    iconElement?: ReactNode;
+    _id: string;
+    href?: string;
+    priority: number;
+    location?: string;
+
+}
+export async function getLinkTypeList({ page = 1, pageSize = 9999 }: {
+    page?: number;
+    pageSize?: number;
+}) {
+    const collection = await getCollection('link-type');
+    const startIndex = (page - 1) * pageSize;
+    const pipeline = [
+        { $sort: { priority: 1 } },
+        { $skip: startIndex },
+        { $limit: pageSize },
+        {
+            $addFields: {
+                _id: { $toString: "$_id" }
+            }
+        }
+    ];
+    const cursor = collection.aggregate<LinkType>(pipeline);
+    const list = await cursor.toArray();
+
+    // 计算总数量
+    const total = (await collection.find<LinkType>({}).toArray()).length
+    return {
+        total,
+        list
+    }
+}

app/_ui/LinkListBox.tsx

@@ -1,14 +1,64 @@
 "use client";
 import Link from "next/link";
-import { Link as _Link } from "../api/link/route";
+import { LinkType } from "../_lib/data/linkType";
-import { LinkType } from "../api/linkType/route";
+import { Link as _Link } from "../_lib/data/link";
+import { useMemo } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faClock, faFire, faTimeline, faTimesCircle, faTimesRectangle, faVolumeTimes } from "@fortawesome/free-solid-svg-icons";
 
-export default function LinkListBox({ linkTypeList, linkList }: { linkTypeList: LinkType[]; linkList: _Link[] }) {
+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), [])
     return <div className="flex w-full flex-col gap-y-4">
+        {
+            showHot && <div className="flex flex-col gap-y-2" >
+                <div className="flex items-center text-[#555555]  gap-x-2 text-xl">
+                    <FontAwesomeIcon icon={faFire} className="text-red-500"></FontAwesomeIcon>
+                    <span className="text-white bg-red-500/90 rounded-2xl px-3  text-[14px] font-bold">热门网站</span>
+                </div>
+                <div className=" grid grid-cols-3 lg:grid-cols-6 gap-4 ">
+                    {
+                        hotList.map(val => (
+                            <Link key={val._id} className="flex  gap-x-2 bg-white rounded-lg py-4 pl-2 cursor-pointer duration-150 hover:-translate-y-1 shadow-sm"
+                                href={val.link || ''} target="_blank">
+                                <img src={val.logoLink} className="w-[40px] h-[40px]"></img>
+                                <div className="flex-1 w-0 flex flex-col justify-between">
+                                    <span className=" font-bold text-ellipsis overflow-hidden whitespace-nowrap">{val.name}</span>
+                                    <span className=" text-ellipsis overflow-hidden whitespace-nowrap text-[#666] text-xs" title={val.description}>{val.description}</span>
+                                </div>
+                            </Link>
+                        ))
+                    }
+                </div>
+            </div>
+        }
+        {
+            showRecent && <div className="flex flex-col gap-y-2" >
+                <div className="flex items-center text-[#555555]  gap-x-2 text-xl">
+                    <FontAwesomeIcon icon={faClock} className="text-blue-500"></FontAwesomeIcon>
+                    <span className="text-white bg-blue-500/90 rounded-2xl px-3  text-[14px] font-bold">最新收录</span>
+
+                </div>
+                <div className=" grid grid-cols-3 lg:grid-cols-6 gap-4 ">
+                    {
+                        recentList.map(val => (
+                            <Link key={val._id} className="flex  gap-x-2 bg-white rounded-lg py-4 pl-2 cursor-pointer duration-150 hover:-translate-y-1 shadow-sm"
+                                href={val.link || ''} target="_blank">
+                                <img src={val.logoLink} className="w-[40px] h-[40px]"></img>
+                                <div className="flex-1 w-0 flex flex-col justify-between">
+                                    <span className=" font-bold text-ellipsis overflow-hidden whitespace-nowrap">{val.name}</span>
+                                    <span className=" text-ellipsis overflow-hidden whitespace-nowrap text-[#666] text-xs" title={val.description}>{val.description}</span>
+                                </div>
+                            </Link>
+                        ))
+                    }
+                </div>
+            </div>
+        }
         {
             linkTypeList.map(item => (
                 <div className="flex flex-col gap-y-2" key={item._id}>
-                    <div className="flex items-center text-[#555555]  gap-x-1 text-xl">
+                    <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>
 
                         <span>{item.label}</span>

app/_ui/Search.tsx

@@ -82,12 +82,12 @@ export default function Search() {
         }
     }, [activeSearchKey])
     return (
-        <div className="w-full flex justify-center flex-col  items-center py-10 ">
+        <div className="w-full flex justify-center flex-col  items-center py-10 h-[500px]">
 
             <div className="w-[200px]">
                 <Logo></Logo>
             </div>
-            <div className="w-[800px] flex flex-col gap-y-2">
+            <div className="w-full lg:w-[800px] flex flex-col gap-y-2">
                 <div className="flex  w-full justify-center gap-x-5 text-[#666666]">
                     {
                         SearchTypeList.map(item => (
@@ -116,7 +116,7 @@ export default function Search() {
                         ))
                     }
                 </div>
-             
+
             </div>
 
         </div>

app/_ui/SiderNav.tsx

@@ -4,9 +4,9 @@ import { LinkTypeItem } from "../_lib/types";
 import Logo from "./Logo";
 import clsx from "clsx";
 import { usePathname } from "next/navigation";
-import { LinkType } from "../api/linkType/route";
 import { useAtom } from "jotai";
 import { linkTypeAtom } from "../_lib/atom";
+import { LinkType } from "../_lib/data/linkType";
 
 export default function SiderNav({ linkList }: { linkList: LinkType[] }) {
     const pathname = usePathname()
@@ -14,7 +14,7 @@ export default function SiderNav({ linkList }: { linkList: LinkType[] }) {
     const [selectType, setSelectType] = useAtom(linkTypeAtom)
     return (
         <div className="w-[220px] flex flex-col gap-y-2 fixed left-0 top-0 h-[100vh]  bg-[#F9F9F9]">
-            <div>
+            <div className="bg-white shadow-sm">
                 <Logo />
             </div>
             <nav className="flex flex-col py-1">

app/admin/(default)/dashboard/LinkTable.tsx

@@ -2,10 +2,11 @@ import { mRequest } from "@/app/_lib/request"
 import ImageUpload from "@/app/_ui/ImageUpload"
 import { Link } from "@/app/api/link/route"
 import { LinkType } from "@/app/api/linkType/route"
-import { useRequest } from "ahooks"
+import { useAntdTable, useRequest } from "ahooks"
 import {
     Button,
     Card,
+    DatePicker,
     Form,
     Image,
     Input,
@@ -18,29 +19,38 @@ import {
     Space,
     Table,
 } from "antd"
+import dayjs from "dayjs"
 import { useCallback, useEffect, useState } from "react"
 import useSWR from "swr"
 
 
 export default function LinkTable(props: { id: string }) {
-    const [list, setList] = useState<Link[]>([])
     const [loading, setLoading] = useState(false)
     const { data: LinkTypeList } = useRequest(async () => mRequest<{
         list: LinkType[]
     }>('GET', '/api/linkType'))
+    const { tableProps, refresh } = useAntdTable(
+        async ({ current, pageSize }) => {
+            return mRequest<{
+                total: number;
+                list: Link[]
+            }>(
+                "GET",
+                `/api/link?page=${current}&pageSize=${pageSize}&typeId=${props.id}`
+            )
+        },
+
+    )
+    // const refresh = useCallback(async () => {
+    //     setLoading(true)
+    //     const res = await mRequest<{ list: Link[] }>(
+    //         "GET",
+    //         `/api/link?typeId=${props.id}&page=1&pageSize=9999`
+    //     )
+    //     setList(res.list)
+    //     setLoading(false)
+    // }, [props.id])
 
-    const refresh = useCallback(async () => {
-        setLoading(true)
-        const res = await mRequest<{ list: Link[] }>(
-            "GET",
-            `/api/link?typeId=${props.id}&page=1&pageSize=9999`
-        )
-        setList(res.list)
-        setLoading(false)
-    }, [props.id])
-    useEffect(() => {
-        refresh()
-    }, [refresh])
     const [selected, setSelected] = useState<undefined | null | Link>(
         undefined
     )
@@ -61,9 +71,8 @@ export default function LinkTable(props: { id: string }) {
                 }
             >
                 <Table<Link>
+                    {...tableProps}
                     loading={loading}
-                    dataSource={list}
-                    pagination={false}
                     rowKey="_id"
                     columns={[
                         {
@@ -122,19 +131,26 @@ export default function LinkTable(props: { id: string }) {
                     labelCol={{ span: 4 }}
                     initialValues={
                         selected
-                            ? selected
+                            ? {
-                            : { title: "", url: "", logoLink: "", description: "", priority: 0, type: props.id }
+                                ...selected,
+                                addTime: selected.addTime ? dayjs(selected.addTime * 1000) : dayjs(),
+                                isHot: selected?.isHot ? 1 : 0
+                            }
+                            : { title: "", url: "", logoLink: "", description: "", priority: 0, type: props.id, isHot: 0, addTime: dayjs() }
                     }
                     onFinish={async (res) => {
                         if (selected) {
                             await mRequest("PUT", "/api/link", {
                                 _id: selected._id,
                                 ...res,
-                                type: props.id
+                                type: props.id,
+                                addTime: res.addTime.unix()
+
                             })
                         } else {
                             await mRequest("POST", "/api/link", {
-                                ...res, type: props.id
+                                ...res, type: props.id,
+                                addTime: res.addTime.unix()
                             })
                         }
                         refresh()
@@ -178,8 +194,17 @@ export default function LinkTable(props: { id: string }) {
                             value: item._id
                         }))}></Select>
                     </Form.Item>
-                    <Form.Item name="priority" label="优先级">
+                    <Form.Item name="priority" label="优先级"
-                        <InputNumber></InputNumber>
+                        rules={[{ required: true, message: "请输入优先级" }]}
+
+                    >
+                        <InputNumber min={0} max={9999999}></InputNumber>
+                    </Form.Item>
+                    <Form.Item name="addTime" label="收录时间">
+                        <DatePicker
+                            allowClear={false}
+                            showTime
+                        />
                     </Form.Item>
                     <Form.Item name="isHot" label="是否热门">
                         <Radio.Group

app/admin/(default)/dashboard/page.tsx

@@ -1,17 +1,16 @@
 "use client";
-import { Button, Card, Drawer, Form, Image, Input, message, Modal, Popconfirm, Space, Table } from "antd";
+import { Button, Card, Drawer, Form, Image, Input, InputNumber, message, Modal, Popconfirm, Space, Table } from "antd";
 import { useRef, useState } from "react";
 import '@ant-design/v5-patch-for-react-19';
 import { useAntdTable } from "ahooks";
 import { mRequest } from "@/app/_lib/request";
 import { LinkTypeItem } from "@/app/_lib/types";
-import { LinkType } from "@/app/api/linkType/route";
 import LinkTable from "./LinkTable";
 import ImageUpload from "@/app/_ui/ImageUpload";
 import { useForm } from "antd/es/form/Form";
+import { LinkType } from "@/app/_lib/data/linkType";
 
 export default function Page() {
-    const [form] = useForm()
     const { tableProps, refresh } = useAntdTable(
         async ({ current, pageSize }) => {
             return mRequest<{
@@ -121,11 +120,13 @@ export default function Page() {
                 }}
             >
                 <Form
-                    form={form}
                     labelCol={{ span: 4 }}
                     initialValues={selectedType ?
                         selectedType
-                        : {}}
+                        : {
+                            priority: 0
+                        }
+                    }
                     onFinish={async (res) => {
                         if (selectedType) {
                             await mRequest("PUT", "/api/linkType", {
@@ -160,6 +161,13 @@ export default function Page() {
                         ></ImageUpload>
 
                     </Form.Item>
+                    <Form.Item
+                        rules={[{ required: true, message: "请输入优先级" }]}
+                        name="priority"
+                        label="优先级"
+                    >
+                        <InputNumber min={0} max={99999999} />
+                    </Form.Item>
                     <Form.Item
                         name="location"
                         label="显示位置"

app/api/link/[id]/route.ts

@@ -2,6 +2,7 @@ import { getCollection, getDb } from "@/app/_lib/mongodb";
 import { ObjectId } from "mongodb";
 import { NextRequest } from "next/server";
 import { Link } from "../route";
+import { verifySession } from "@/app/_lib/dal";
 
 export async function GET(req: NextRequest) {
     try {
@@ -31,6 +32,13 @@ export async function GET(req: NextRequest) {
 }
 export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
     try {
+        const session = await verifySession()
+
+        // Check if the user is authenticated
+        if (!session) {
+            // User is not authenticated
+            return new Response(null, { status: 401 })
+        }
         // 获取路径参数
         const slug = (await params).id
         const collection = await getCollection('link')

app/api/link/route.ts

@@ -1,21 +1,12 @@
 import { verifySession } from "@/app/_lib/dal";
+import { Link } from "@/app/_lib/data/link";
 import { User } from "@/app/_lib/data/user";
 import { getCollection, getDb } from "@/app/_lib/mongodb";
 import { message } from "antd";
 import bcrypt from 'bcrypt';
 import { ObjectId } from "mongodb";
 import { NextRequest } from "next/server";
-export type Link = {
-    name: string;
-    link?: string;
-    description: string;
-    _id: string;
-    type: string;
-    priority: number;
-    logoLink: string;
-    isHot?: boolean;
 
-}
 export async function GET(req: NextRequest) {
     try {
         const collection = await getCollection('link');
@@ -28,7 +19,7 @@ export async function GET(req: NextRequest) {
         const startIndex = (page - 1) * pageSize;
 
         // 查询数据
-        const cursor = collection.find<Link>({ type: typeId }).skip(startIndex).limit(pageSize);
+        const cursor = collection.find<Link>(typeId ? { type: typeId } : {}).sort({ priority: 1 }).skip(startIndex).limit(pageSize);
         const data = await cursor.toArray();
 
         // 计算总数量
@@ -44,6 +35,14 @@ export async function GET(req: NextRequest) {
 }
 export async function POST(req: NextRequest) {
     try {
+
+        const session = await verifySession()
+
+        // Check if the user is authenticated
+        if (!session) {
+            // User is not authenticated
+            return new Response(null, { status: 401 })
+        }
         // 获取待插入的对象
         const link = await req.json()
         const collection = await getCollection('link')
@@ -56,6 +55,13 @@ export async function POST(req: NextRequest) {
 
 export async function PUT(req: NextRequest) {
     try {
+        const session = await verifySession()
+
+        // Check if the user is authenticated
+        if (!session) {
+            // User is not authenticated
+            return new Response(null, { status: 401 })
+        }
         // 获取待更新的对象
         const link = await req.json() as Link
         const collection = await getCollection('link')

app/api/linkType/[id]/route.ts

@@ -2,11 +2,10 @@ import { verifySession } from "@/app/_lib/dal";
 import { getCollection, getDb } from "@/app/_lib/mongodb";
 import { ObjectId } from "mongodb";
 import { NextRequest } from "next/server";
-import { LinkType } from "../route";
+import { getLinkList } from "@/app/_lib/data/link";
 
 export async function GET(req: NextRequest) {
     try {
-        const collection = await getCollection('link-type');
         // Check if the user is authenticated
         const session = await verifySession()
         if (!session) {
@@ -17,20 +16,9 @@ export async function GET(req: NextRequest) {
         const page = parseInt(req.nextUrl.searchParams.get('page') || '1') || 1;
         const pageSize = parseInt(req.nextUrl.searchParams.get('pageSize') || '10') || 10;
 
-        // 计算起始索引和结束索引
+        const res = await getLinkList({ page, pageSize })
-        const startIndex = (page - 1) * pageSize;
 
-        // 查询数据
+        return Response.json(res)
-        const cursor = collection.find<LinkType>({}).skip(startIndex).limit(pageSize);
-        const data = await cursor.toArray();
-
-        // 计算总数量
-        const total = await collection.countDocuments();
-
-        return Response.json({
-            total,
-            list: data,
-        })
     } catch (e) {
         return Response.error()
     }
@@ -38,6 +26,13 @@ export async function GET(req: NextRequest) {
 
 export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
     try {
+        const session = await verifySession()
+
+        // Check if the user is authenticated
+        if (!session) {
+            // User is not authenticated
+            return new Response(null, { status: 401 })
+        }
         // 获取路径参数
         const slug = (await params).id
         const collection = await getCollection('link-type')

app/api/linkType/route.ts

@@ -1,47 +1,29 @@
 import { verifySession } from "@/app/_lib/dal";
+import { getLinkTypeList, LinkType } from "@/app/_lib/data/linkType";
 import { getCollection, getDb } from "@/app/_lib/mongodb";
 import { ObjectId } from "mongodb";
 import { NextRequest } from "next/server";
-import { ReactNode } from "react";
-export type LinkType = {
-    label: string;
-    icon?: string;
-    iconElement?: ReactNode;
-    _id: string;
-    href?: string;
-    priority: number;
-    location?: string;
 
-}
 export async function GET(req: NextRequest) {
     try {
-        const collection = await getCollection('link-type');
-        // Check if the user is authenticated
-
         // 获取分页参数
         const page = parseInt(req.nextUrl.searchParams.get('page') || '1') || 1;
         const pageSize = parseInt(req.nextUrl.searchParams.get('pageSize') || '10') || 10;
-
+        const res = await getLinkTypeList({ page, pageSize })
-        // 计算起始索引和结束索引
+        return Response.json(res)
-        const startIndex = (page - 1) * pageSize;
-
-        // 查询数据
-        const cursor = collection.find<LinkType>({}).skip(startIndex).limit(pageSize);
-        const data = await cursor.toArray();
-
-        // 计算总数量
-        const total = await collection.countDocuments();
-
-        return Response.json({
-            total,
-            list: data,
-        })
     } catch (e) {
         return Response.error()
     }
 }
 export async function POST(req: NextRequest) {
     try {
+        const session = await verifySession()
+
+        // Check if the user is authenticated
+        if (!session) {
+            // User is not authenticated
+            return new Response(null, { status: 401 })
+        }
         // 获取待插入的对象
         const link = await req.json()
         const collection = await getCollection('link-type')
@@ -54,6 +36,13 @@ export async function POST(req: NextRequest) {
 
 export async function PUT(req: NextRequest) {
     try {
+        const session = await verifySession()
+
+        // Check if the user is authenticated
+        if (!session) {
+            // User is not authenticated
+            return new Response(null, { status: 401 })
+        }
         // 获取待更新的对象
         const link = await req.json() as LinkType
         const collection = await getCollection('link-type')

app/api/uploadKey/route.ts

@@ -1,4 +1,14 @@
+import { verifySession } from "@/app/_lib/dal"
+
 export async function GET() {
+
+    const session = await verifySession()
+
+    // Check if the user is authenticated
+    if (!session) {
+        // User is not authenticated
+        return new Response(null, { status: 401 })
+    }
     const accessKeyId = process.env.ALIYUN_RAM_ACCESS_KEY_ID || ''
     const accessKeySecret = process.env.ALIYUN_RAM_ACCESS_KEY_SECRET || ''
     return Response.json({

app/page.tsx

@@ -11,20 +11,14 @@ import { getCollection } from "./_lib/mongodb";
 import { Link as _Link } from "./api/link/route";
 import Link from "next/link";
 import LinkListBox from "./_ui/LinkListBox";
+import { getLinkTypeList } from "./_lib/data/linkType";
+import { getLinkList } from "./_lib/data/link";
 
 export default async function Home() {
-  const collection = await getCollection('link-type')
 
-  const result = (await collection.find<LinkType>({}).toArray())
+  const { list: linkTypeList } = await getLinkTypeList({})
-  const linkTypeList = result.map(doc => {
+
-    doc._id = doc._id.toString();  // 将 _id 转换为字符串
+  const { list: linkList } = await getLinkList({})
-    return doc;
-  });
-  const linkCollect = await getCollection('link')
-  const linkList = (await linkCollect.find<_Link>({}).toArray()).map(doc => {
-    doc._id = doc._id.toString();  // 将 _id 转换为字符串
-    return doc;
-  })
 
   return (
     <div className="flex min-h-full w-full font-[family-name:var(--font-geist-sans)] relative">
@@ -37,10 +31,10 @@ export default async function Home() {
       </div>
       <main className="flex-1 relative  flex  flex-col p-5  gap-y-4">
 
-        <HeaderNav></HeaderNav>
+        {/* <HeaderNav></HeaderNav> */}
         <Search></Search>
-        <PosterBox posterList={[]} />
+        {/* <PosterBox posterList={[]} /> */}
-        <LinkListBox linkList={linkList} linkTypeList={linkTypeList}></LinkListBox>
+        <LinkListBox linkList={linkList} linkTypeList={linkTypeList} showHot showRecent></LinkListBox>
       </main>
     </div>
   );

package.json

@@ -18,6 +18,7 @@
     "antd": "^5.23.2",
     "bcrypt": "^5.1.1",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
     "icons": "link:@awesome.me/kit-KIT_CODE/icons",
     "jose": "^5.9.6",
     "jotai": "^2.11.1",

pnpm-lock.yaml

@@ -35,6 +35,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.13
       icons:
         specifier: link:@awesome.me/kit-KIT_CODE/icons
         version: link:@awesome.me/kit-KIT_CODE/icons