优化用户体验

src/pages/Article/index.tsx

@@ -11,9 +11,13 @@ import type { Tag as ArticleTag } from '@/types/app/tag';
 import type { Cate } from '@/types/app/cate';
 import type { Article, FilterArticle, FilterForm } from '@/types/app/article';
 
+import { useWebStore } from '@/stores';
+
 import dayjs from 'dayjs';
 
 const ArticlePage = () => {
+    const web = useWebStore(state => state.web)
+
     const [loading, setLoading] = useState<boolean>(false);
     const [articleList, setArticleList] = useState<Article[]>([]);
 
@@ -34,7 +38,7 @@ const ArticlePage = () => {
 
     const delArticleData = async (id: number) => {
         setLoading(true);
-        
+
         await delArticleDataAPI(id);
         notification.success({ message: '🎉 删除文章成功' })
         getArticleList();
@@ -59,7 +63,7 @@ const ArticlePage = () => {
             key: 'title',
             align: 'center',
             width: 300,
-            render: (text: string) => <div className='line-clamp-1'>{text}</div>,
+            render: (text: string, record: Article) => <a href={`${web.url}/article/${record.id}`} target='_blank' className='hover:text-primary line-clamp-1'>{text}</a>,
         },
         {
             title: '摘要',

src/pages/Work/index.tsx

@@ -14,6 +14,8 @@ import dayjs from 'dayjs';
 import RandomAvatar from "@/components/RandomAvatar";
 import Empty from "@/components/Empty";
 
+import { useWebStore } from '@/stores';
+
 type Menu = "comment" | "link" | "wall";
 
 interface ListItemProps {
@@ -23,60 +25,64 @@ interface ListItemProps {
     handleRejection: (id: number, type: Menu) => void;
 }
 
-const ListItem = ({ item, type, handleApproval, handleRejection }: ListItemProps) => (
-    <div key={item.id}>
-        <div className="text-center text-xs text-[#e0e0e0] mb-4">
-            {dayjs(+item.createTime!).format('YYYY-MM-DD HH:mm:ss')}
-        </div>
+const ListItem = ({ item, type, handleApproval, handleRejection }: ListItemProps) => {
+    const web = useWebStore(state => state.web)
 
-        <div className="flex justify-between p-7 rounded-md transition-colors">
-            <div className="flex mr-10">
-                {type !== "wall" ? (
-                    <img src={item.avatar || item.image} alt="" className="w-13 h-13 border border-[#eee] rounded-full" />
-                ) : <RandomAvatar className="w-13 h-13 border border-[#eee] rounded-full" />}
+    return (
+        <div key={item.id}>
+            <div className="text-center text-xs text-[#e0e0e0] mb-4">
+                {dayjs(+item.createTime!).format('YYYY-MM-DD HH:mm:ss')}
+            </div>
 
-                <div className="flex flex-col justify-center ml-4 px-4 py-2 bg-[#F9F9FD] rounded-md">
-                    {type === "link" ? (
-                        <>
-                            <div>名称：{item.title}</div>
-                            <div>介绍：{item.description}</div>
-                            <div>类型：{item.type.name}</div>
-                            <div>邮箱：{item.email || '暂无'}</div>
-                            <div>地址：{item.url || '暂无'}</div>
-                        </>
-                    ) : type === "comment" ? (
-                        <>
-                            <div>名称：{item.name}</div>
-                            <div>内容：{item.content}</div>
-                            <div>邮箱：{item.email || '暂无'}</div>
-                            <div>地址：{item.url || '暂无'}</div>
-                            <div>所属文章：<a href={`/article/${item.articleId}`} className="hover:text-primary">{item.articleTitle || '暂无'}</a></div>
-                        </>
-                    ) : (
-                        <>
-                            <div>名称：{item.name}</div>
-                            <div>内容：{item.content}</div>
-                        </>
-                    )}
+            <div className="flex justify-between p-7 rounded-md transition-colors">
+                <div className="flex mr-10">
+                    {type !== "wall" ? (
+                        <img src={item.avatar || item.image} alt="" className="w-13 h-13 border border-[#eee] rounded-full" />
+                    ) : <RandomAvatar className="w-13 h-13 border border-[#eee] rounded-full" />}
+
+                    <div className="flex flex-col justify-center ml-4 px-4 py-2 bg-[#F9F9FD] rounded-md">
+                        {type === "link" ? (
+                            <>
+                                <div>名称：{item.title}</div>
+                                <div>介绍：{item.description}</div>
+                                <div>类型：{item.type.name}</div>
+                                <div>邮箱：{item.email || '暂无'}</div>
+                                <div>地址：{item.url || '暂无'}</div>
+                            </>
+                        ) : type === "comment" ? (
+                            <>
+                                <div>名称：{item.name}</div>
+                                <div>内容：{item.content}</div>
+                                <div>邮箱：{item.email || '暂无'}</div>
+                                <div>地址：{item.url || '暂无'}</div>
+                                <div>所属文章：<a href={`${web.url}/article/${item.articleId}`} target='_blank' className="hover:text-primary">{item.articleTitle || '暂无'}</a></div>
+                            </>
+                        ) : (
+                            <>
+                                <div>名称：{item.name}</div>
+                                <div>内容：{item.content}</div>
+                            </>
+                        )}
+                    </div>
+                </div>
+
+                <div className="flex items-end">
+                    <Dropdown menu={{
+                        items: [
+                            { key: 'ok', label: "通过", onClick: () => handleApproval(item.id, type) },
+                            { key: 'no', label: "拒审", onClick: () => handleRejection(item.id, type) }
+                        ]
+                    }}>
+                        <div className="flex justify-evenly items-center bg-[#F9F9FD] w-11 h-5 rounded-md cursor-pointer">
+                            <span className="inline-block w-2 h-2 bg-[#b5c2d3] rounded-full"></span>
+                            <span className="inline-block w-2 h-2 bg-[#b5c2d3] rounded-full"></span>
+                        </div>
+                    </Dropdown>
                 </div>
             </div>
-
-            <div className="flex items-end">
-                <Dropdown menu={{
-                    items: [
-                        { key: 'ok', label: "通过", onClick: () => handleApproval(item.id, type) },
-                        { key: 'no', label: "拒审", onClick: () => handleRejection(item.id, type) }
-                    ]
-                }}>
-                    <div className="flex justify-evenly items-center bg-[#F9F9FD] w-11 h-5 rounded-md cursor-pointer">
-                        <span className="inline-block w-2 h-2 bg-[#b5c2d3] rounded-full"></span>
-                        <span className="inline-block w-2 h-2 bg-[#b5c2d3] rounded-full"></span>
-                    </div>
-                </Dropdown>
-            </div>
         </div>
-    </div>
-);
+    )
+}
 
 const WorkPage = () => {
     const activeSty = "bg-[#f9f9ff] text-primary";