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 16:46:23 +08:00
parent 0aab21db19
commit 6ab51ffe00
17 changed files with 286 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
app/_lib/data/link.ts Normal file
View File

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

40
app/_lib/data/linkType.ts Normal file
View File

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

0
app/_lib/data/sider.tsx
View File

0
app/_lib/data/search.ts → app/_ui/HotApps.tsx
View File

58
app/_ui/LinkListBox.tsx
View File

@ -1,14 +1,64 @@
"use client";
import Link from "next/link";
import { Link as _Link } from "../api/link/route";
import { LinkType } from "../api/linkType/route";
import { LinkType } from "../_lib/data/linkType";
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>

6
app/_ui/Search.tsx
View File

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

4
app/_ui/SiderNav.tsx
View File

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

69
app/admin/(default)/dashboard/LinkTable.tsx
View File

@ -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="优先级">
<InputNumber></InputNumber>
<Form.Item name="priority" label="优先级"
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

18
app/admin/(default)/dashboard/page.tsx
View File

@ -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="显示位置"

8
app/api/link/[id]/route.ts
View File

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

28
app/api/link/route.ts
View File

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

25
app/api/linkType/[id]/route.ts
View File

@ -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 startIndex = (page - 1) * pageSize;
const res = await getLinkList({ page, 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,
})
return Response.json(res)
} 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')

45
app/api/linkType/route.ts
View File

@ -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 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,
})
const res = await getLinkTypeList({ page, pageSize })
return Response.json(res)
} 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')

10
app/api/uploadKey/route.ts
View File

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

22
app/page.tsx
View File

@ -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 linkTypeList = result.map(doc => {
doc._id = doc._id.toString(); // 将 _id 转换为字符串
return doc;
});
const linkCollect = await getCollection('link')
const linkList = (await linkCollect.find<_Link>({}).toArray()).map(doc => {
doc._id = doc._id.toString(); // 将 _id 转换为字符串
return doc;
})
const { list: linkTypeList } = await getLinkTypeList({})
const { list: linkList } = await getLinkList({})
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={[]} />
<LinkListBox linkList={linkList} linkTypeList={linkTypeList}></LinkListBox>
{/* <PosterBox posterList={[]} /> */}
<LinkListBox linkList={linkList} linkTypeList={linkTypeList} showHot showRecent></LinkListBox>
</main>
</div>
);

1
package.json
View File

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

3
pnpm-lock.yaml
View File

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