achenc1013/ThriveX-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化用户体验

Browse Source
This commit is contained in:
宇阳
2024-10-15 13:27:54 +08:00
parent 91301c6172
commit dbad8712d6
2 changed files with 61 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/Article/index.tsx
View File

@@ -11,9 +11,13 @@ import type { Tag as ArticleTag } from '@/types/app/tag';
import type { Cate } from '@/types/app/cate'; import type { Cate } from '@/types/app/cate';
import type { Article, FilterArticle, FilterForm } from '@/types/app/article'; import type { Article, FilterArticle, FilterForm } from '@/types/app/article';
import { useWebStore } from '@/stores';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
const ArticlePage = () => { const ArticlePage = () => {
const web = useWebStore(state => state.web)
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const [articleList, setArticleList] = useState<Article[]>([]); const [articleList, setArticleList] = useState<Article[]>([]);
@@ -34,7 +38,7 @@ const ArticlePage = () => {
const delArticleData = async (id: number) => { const delArticleData = async (id: number) => {
setLoading(true); setLoading(true);
await delArticleDataAPI(id); await delArticleDataAPI(id);
notification.success({ message: '🎉 删除文章成功' }) notification.success({ message: '🎉 删除文章成功' })
getArticleList(); getArticleList();
@@ -59,7 +63,7 @@ const ArticlePage = () => {
key: 'title', key: 'title',
align: 'center', align: 'center',
width: 300, 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: '摘要', title: '摘要',

104
src/pages/Work/index.tsx
View File

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