save

app/(main)/article/[id]/page.tsx

@@ -5,6 +5,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import Image from "next/image"
 import { MDXRemote } from 'next-mdx-remote/rsc'
 import Link from "next/link"
+import { mdxComponent } from "@/app/_lib/MdxComponent"
+import { CustomMDX } from "@/app/_ui/customComponent"
 const PICTURE_PREFIX = 'https://newuitab.oss-cn-hangzhou.aliyuncs.com/ai_upload/downloads/'
 export default async function Page({ params }: { params: Promise<{ id: string }> }) {
     const id = (await params).id
@@ -29,7 +31,7 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
                     </div>
                 </div>
                 <div className="w-full">
-                    <MDXRemote source={article.content}></MDXRemote>
+                    <CustomMDX source={article.content} ></CustomMDX>
                 </div>
             </div>
         </div>

app/_lib/MdxComponent.tsx

@@ -0,0 +1,9 @@
+import { JSX, ClassAttributes, HTMLAttributes } from "react";
+
+export const mdxComponent = {
+    h1: (props: any) => (
+        <h2 {...props} className="large-text font-bold  text-2xl">
+            {props.children}
+        </h2>
+    ),
+}

app/_lib/data/article.ts

@@ -1,3 +1,6 @@
+"use server";
+
+
 import { ObjectId } from "mongodb";
 import { getCollection } from "../mongodb";
 
@@ -15,13 +18,13 @@ export async function getArticleList({ page = 1, pageSize = 9999 }: {
     page?: number;
     pageSize?: number;
 }) {
-    const collection = await getCollection('article');
+    const collection = await getCollection('link-article');
     const startIndex = (page - 1) * pageSize;
     // 构建查询条件对象
 
     const pipeline = [
         // 根据构建好的查询条件筛选文档
-        { $sort: { priority: 1 } },
+        { $sort: { priority: 1, _id: -1 } },
         { $skip: startIndex },
         { $limit: pageSize },
         {
@@ -45,4 +48,24 @@ export async function getArticle(id: string) {
         ...res,
         _id: res._id.toString()
     } as ArticleType : null)
+}
+export async function insertArticle(article: Omit<ArticleType, '_id'>) {
+    const collection = await getCollection('link-article');
+    const res = await collection.insertOne(article)
+    return res.insertedId.toString()
+
+}
+export async function updateArticle(article: ArticleType) {
+    const collection = await getCollection('link-article');
+    collection.updateOne({
+        _id: article._id as any
+    }, {
+        $set: article
+    })
+}
+export async function deleteArticle(id: string) {
+    const collection = await getCollection('link-article');
+    collection.deleteOne({
+        _id: new ObjectId(id)
+    })
 }

app/_lib/data/link.ts

@@ -1,5 +1,6 @@
 "use server";
 
+import { ObjectId } from "mongodb";
 import { getCollection } from "../mongodb";
 
 export type Link = {
@@ -53,30 +54,53 @@ export async function getLinkListAll() {
         }
     ]).toArray();
     console.log(list);
-    
+
     return list;
 }
+function buildDynamicQuery(filter: Partial<Link>) {
+    const query: Record<string, any> = {};
+
+    // 遍历所有有效字段
+    for (const [key, value] of Object.entries(filter)) {
+        if (value === undefined) continue;
+
+        // 特殊处理 _id 字段（ObjectId 转换）
+        if (key === '_id' && typeof value === 'string') {
+            query[key] = new ObjectId(value);
+        }
+        // 处理其他字段的精确匹配
+        else {
+            query[key] = value;
+        }
+    }
+    return query;
+}
 
 // Link 类型定义
-export async function getLinkList({ page = 1, pageSize = 9999, typeId }: {
+export async function getLinkList({ page = 1, pageSize = 9999, filter = {} }: {
     page?: number;
     pageSize?: number;
-    typeId?: string;
+    filter?: Partial<Link>;
 }) {
     const collection = await getCollection('link');
     const startIndex = (page - 1) * pageSize;
     // 构建查询条件对象
-    const query = {
+    let query = {} as any
-        type: typeId
+    if (filter.name) {
-    } as any;
+        query.name = { $regex: filter.name, $options: 'i' };
-    if (!typeId) {
-        // 如果 typeId 不存在，将其删除
-        delete query.type
-    }
 
+    }
+    if (filter.articleId) {
+        query.articleId = filter.articleId;
+    }
+    if (filter.type) {
+        query.type = filter.type;
+    }
     const pipeline = [
         // 根据构建好的查询条件筛选文档
-        { $match: query },
+        {
+            $match: query
+        },
         { $sort: { priority: 1, _id: -1 } },
         { $skip: startIndex },
         { $limit: pageSize },
@@ -95,4 +119,15 @@ export async function getLinkList({ page = 1, pageSize = 9999, typeId }: {
         total,
         list
     }
+}
+export async function updateLink(id: string, link: Partial<Link>) {
+
+    const collection = await getCollection('link');
+
+    collection.updateOne({
+        _id: new ObjectId(id)
+    }, {
+        $set: link
+    })
+
 }

app/_lib/data/user.ts

@@ -1,3 +1,4 @@
+import { ObjectId } from "mongodb";
 import { getCollection } from "../mongodb";
 
 export type User = {
@@ -12,4 +13,12 @@ export async function getUser(account: string) {
     const user = await collection.findOne<User>({ account })
 
     return user
+}
+export async function updateUser(user: Partial<User>) {
+    const collection = await getCollection('user')
+    await collection.updateOne({
+        _id: new ObjectId(user._id)
+    }, {
+        $$set: user
+    })
 }

app/_lib/utils.ts

@@ -1,5 +1,16 @@
+
+export const PICTURE_PREFIX = 'https://newuitab.oss-cn-hangzhou.aliyuncs.com/ai_upload/downloads/'
+
 export function doSearch(url: string, keyword: string) {
-    
+
     window.open(url.replace(/%s/g, keyword), "_blank")
 
-}
+}
+export function debounce(fn: Function, delay: number) {
+    let timer: NodeJS.Timeout | null = null;
+    return function (this: any, ...args: any[]) {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => fn.apply(this, args), delay);
+    };
+}
+

app/_ui/customComponent.tsx

@@ -0,0 +1,33 @@
+// components/mdx-remote.js
+import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote/rsc'
+import Link from 'next/link'
+import { JSX } from 'react'
+
+const components = {
+    h1: (props: any) => <h1 id={props.children} className="inline-block text-3xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200">{(props.children)}</h1>,
+    h2: (props: any) =>
+        <h2 id={props.children} className="text-slate-900 text-xl tracking-tight font-bold my-3 dark:text-slate-200">
+            {(props.children)}
+        </h2>,
+    h3: (props: any) =>
+        <h3 id={props.children} className="text-slate-900 text-xl tracking-tight font-semibold mb-3 dark:text-slate-200">
+            {(props.children)}
+
+        </h3>,
+    h4: (props: any) =>
+        <h4 id={(props.children)}> {(props.children)}</h4>,
+    p: (props: any) => <p className='mt-4 text-lg text-slate-700 dark:text-slate-400'>{(props.children)}</p>,
+    a: (props: any) => <Link href={props.href} className='dark:text-white'>{(props.children)}</Link>,
+    mark: (props: any) => <mark className=' font-mono font-medium bg-[#FFEC99] '>{props.children}</mark>,
+    ul: (props: any) => <ul className='my-4 text-lg text-slate-700 dark:text-slate-400'>{(props.children)}</ul>,
+    li: (props: any) => <li className='mt-4 text-lg text-slate-700 dark:text-slate-400 ml-4'>{(props.children)}</li>,
+}
+
+export function CustomMDX(props: JSX.IntrinsicAttributes & MDXRemoteProps) {
+    return (
+        <MDXRemote
+            {...props}
+            components={{ ...components, ...(props.components || {}) }}
+        />
+    )
+}            

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

@@ -32,7 +32,7 @@ export default function LinkTable(props: { id: string }) {
     const { tableProps, refresh } = useAntdTable(
         ({ current, pageSize }) => {
             console.log(current, pageSize);
-            
+
             return getLinkList({ page: current, pageSize, typeId: props.id })
 
         }
@@ -40,7 +40,7 @@ export default function LinkTable(props: { id: string }) {
     )
     useEffect(() => {
         console.log(tableProps.dataSource);
-        
+
     }, [tableProps])
     // const refresh = useCallback(async () => {
     //     setLoading(true)
@@ -82,7 +82,7 @@ export default function LinkTable(props: { id: string }) {
                             title: "图标",
                             dataIndex: "logoLink",
                             render: (_, row) => (
-                                <Image  src={row.logoLink?.startsWith('https') ? row.logoLink : PICTURE_PREFIX + row.logoLink} width={70} ></Image>
+                                <Image src={row.logoLink?.startsWith('https') ? row.logoLink : PICTURE_PREFIX + row.logoLink} width={70} ></Image>
 
                             )
                         },
@@ -196,6 +196,7 @@ export default function LinkTable(props: { id: string }) {
                             value: item._id
                         }))}></Select>
                     </Form.Item>
+        
                     <Form.Item name="priority" label="优先级"
                         rules={[{ required: true, message: "请输入优先级" }]}
 

app/admin/(default)/dashboard/article/detail/AddOrEdit.tsx

@@ -1,26 +1,65 @@
 "use client"
 
-import { ArticleType } from '@/app/_lib/data/article';
+import { ArticleType, insertArticle, updateArticle } from '@/app/_lib/data/article';
 import ImageUpload from '@/app/_ui/ImageUpload';
-import { faArrowLeft, faRibbon } from '@fortawesome/free-solid-svg-icons';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { BackTop, Button, Card, Col, DatePicker, Form, Grid, Input, InputNumber, message, Row, Select, Space, Upload } from 'antd';
+import { Button, Card, Col, DatePicker, Form, Input, InputNumber, message, Row, Select, SelectProps, Space, Spin } from 'antd';
-import { useParams, useRouter } from 'next/navigation'
+import { useRouter } from 'next/navigation'
 import 'md-editor-rt/lib/style.css';
 import '@ant-design/v5-patch-for-react-19';
 import { mRequest } from '@/app/_lib/request';
 import dayjs from 'dayjs';
-import {Editor} from "@bytemd/react";
+import { Editor } from "@bytemd/react";
 import gfm from '@bytemd/plugin-gfm'
-
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { valueType } from 'antd/es/statistic/utils';
+import { getLinkList, updateLink } from '@/app/_lib/data/link';
+import { debounce } from '@/app/_lib/utils';
+import { useRequest } from 'ahooks';
+import { updateUser } from '@/app/_lib/data/user';
 const plugins = [
     gfm(),
     // Add more plugins here
 ]
+
+
 export default function AddOrEdit({ editData }: { editData?: ArticleType | null }) {
     const router = useRouter()
-    console.log(editData);
+    const fetchRef = useRef(0)
+    const formRef = useRef(null)
+    const [fetching, setFetching] = useState(false);
+    const [options, setOptions] = useState<any[]>([]);
+    const { data: linkList = [] } = useRequest(() => getLinkList({ filter: { articleId: editData?._id } }).then(res => res.list))
+    useEffect(() => {
+        if (linkList.length === 0) {
+            return
+        }
 
+    }, [linkList])
+    const debounceFetcher = useMemo(() => {
+        const loadOptions = (value: string) => {
+            fetchRef.current += 1;
+            const fetchId = fetchRef.current;
+            setOptions([]);
+            setFetching(true);
+
+            getLinkList({ filter: { name: value } }).then((newOptions) => {
+                if (fetchId !== fetchRef.current) {
+                    // for fetch callback Forder
+                    return;
+                }
+
+                setOptions(newOptions.list.map(item => ({
+                    value: item._id,
+                    label: item.name,
+                })));
+                setFetching(false);
+            });
+        };
+
+        return debounce(loadOptions, 300);
+    }, [getLinkList, 300]);
 
     return <>
         <div className='w-full bg-white  p-2  flex gap-x-1 items-center rounded shadow'>
@@ -39,26 +78,40 @@ export default function AddOrEdit({ editData }: { editData?: ArticleType | null
 
         <Card title="新增文章" className='mt-2'>
             <Form<ArticleType>
-
+                ref={formRef}
-                onFinish={async (res) => {
+                onFinish={async (res: any) => {
+                    const linkIdList = res.linkId
+                    const addTime = res.addTime.unix()
                     if (editData) {
-                        await mRequest("PUT", "/api/article", {
+                        updateArticle({ ...res, _id: editData._id, addTime }).then(() => {
-                            ...res,
+                            linkIdList.map((item: any) => {
-                            _id: editData._id
+                                updateLink(
+                                    item.value,
+                                    {
+                                        articleId: editData._id
+                                    })
+                            })
+
                         })
                     } else {
-                        await mRequest("POST", "/api/article", {
+
+                        insertArticle({
                             ...res,
                             addTime: dayjs().unix()
+
+                        }).then(id => {
+                            console.log(id);
+
                         })
                     }
+
                     router?.push("/admin/dashboard/article")
                     message.success("操作成功")
 
                 }}
                 initialValues={editData ? {
                     ...editData,
-                    addTime: dayjs(editData.addTime * 1000)
+                    addTime: dayjs(editData.addTime * 1000),
                 } : {
                     priority: 0,
                     addTime: dayjs()
@@ -105,7 +158,6 @@ export default function AddOrEdit({ editData }: { editData?: ArticleType | null
                                 accept="image/*"
                                 width={80}
                                 height={80}
-                                hiddenCover
                             ></ImageUpload>
                         </Form.Item>
 
@@ -122,9 +174,15 @@ export default function AddOrEdit({ editData }: { editData?: ArticleType | null
                                     message: '请输入副标题'
                                 }
                             ]}>
-                            <Select showSearch>
+                            <Select
-
+                                labelInValue
-                            </Select>
+                                filterOption={false}
+                                showSearch
+                                mode="multiple"
+                                onSearch={debounceFetcher}
+                                notFoundContent={fetching ? <Spin size="small" /> : null}
+                                options={options}
+                            />
                         </Form.Item>
                     </Col>
                 </Row>
@@ -167,4 +225,5 @@ export default function AddOrEdit({ editData }: { editData?: ArticleType | null
 
         </Card>
     </>
-}
+}
+

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

@@ -1,17 +1,17 @@
 "use client"
-import { Button, Card, Image, Space, Table } from "antd";
+import { Button, Card, Image, Popconfirm, Space, Table } from "antd";
 import '@ant-design/v5-patch-for-react-19';
 import { useRouter } from "next/navigation";
 import { useAntdTable } from "ahooks";
-import { mRequest } from "@/app/_lib/request";
+import { deleteArticle, getArticleList } from "@/app/_lib/data/article";
-import { ArticleType } from "@/app/_lib/data/article";
+import { PICTURE_PREFIX } from "@/app/_lib/utils";
+import Item from "antd/es/list/Item";
 
 export default function Page() {
     const router = useRouter()
-    const { tableProps, refresh } = useAntdTable(async ({ current, pageSize }) => mRequest<{
+    const { tableProps, refresh } = useAntdTable(({ current, pageSize }) => {
-        total: number;
+        return getArticleList({ page: current, pageSize })
-        list: ArticleType[]
+    })
-    }>('GET', `/api/article?page=${current}&pageSize=${pageSize}`))
     return (
         <Card title="文章管理" extra={
             <Space>
@@ -38,13 +38,18 @@ export default function Page() {
 
                     {
                         title: "封面",
-                        dataIndex: "content",
+                        dataIndex: "cover",
                         render: (_, item) => (
                             <>
-                                <Image src={item.content} width={70} alt="" ></Image>
+                                <Image src={item.cover.startsWith('http') ? item.cover : PICTURE_PREFIX + item.cover} width={70} alt="" ></Image>
                             </>
                         )
                     },
+                    {
+                        title: '网址',
+                        dataIndex: 'link',
+                        width: 100
+                    },
                     {
                         title: '操作',
                         render: (_, row) => (
@@ -52,13 +57,27 @@ export default function Page() {
                                 <Button type="primary" onClick={() => {
                                     router.push(`/admin/dashboard/article/detail/${row._id}`)
                                 }} >修改</Button>
-                                <Button type="primary" danger>删除</Button>
+
+                                <Popconfirm
+                                    title="确认删除？"
+                                    okText="Yes"
+                                    cancelText="No"
+                                    onConfirm={() => {
+                                        deleteArticle(row._id).then(() => {
+                                            refresh()
+                                        })
+                                    }}
+
+                                >
+                                    <Button type="primary" danger
+                                    >删除</Button>
+                                </Popconfirm>
                             </Space>
                         )
                     }
                 ]}
 
-            ></Table>
+            ></Table >
-        </Card>
+        </Card >
     )
 }

app/admin/(default)/layout.tsx

@@ -19,6 +19,14 @@ export default function Layout({
                         iconElement: <FontAwesomeIcon icon={faMagnet} className=" fa-fw"></FontAwesomeIcon>,
                         _id: 'addLink',
                         href: '/admin/dashboard'
+
+                    },
+                    {
+                        label: '链接文章管理',
+                        iconElement: <FontAwesomeIcon icon={faPenClip}></FontAwesomeIcon>,
+                        _id: 'articleMenagement',
+                        href: '/admin/dashboard/article'
+
                     },
                     {
                         label: '搜索管理',
@@ -33,13 +41,7 @@ export default function Layout({
                         href: '/admin/dashboard/ad'
 
                     },
-                    {
-                        label: '文章管理',
-                        iconElement: <FontAwesomeIcon icon={faPenClip}></FontAwesomeIcon>,
-                        _id: 'articleMenagement',
-                        href: '/admin/dashboard/article'
 
-                    },
 
                 ]}></SiderNav>
             <div>