Skip to content

Commit

Permalink
feat: cra-react18项目增加审核留言功能
Browse files Browse the repository at this point in the history
fix #153
  • Loading branch information
cumt-robin committed Nov 19, 2024
1 parent 26b06f1 commit 3399e94
Show file tree
Hide file tree
Showing 4 changed files with 164 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/heavy-owls-travel.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"cra-react18": minor
---

feat: cra-react18项目增加审核留言功能
4 changes: 4 additions & 0 deletions app/cra-react18/src/router/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,10 @@ const routes: RouteObject[] = [
path: "review-comment",
lazy: () => import("../views/Backend/Comment/Review"),
},
{
path: "review-msg",
lazy: () => import("../views/Backend/Message/Review"),
},
],
},
];
Expand Down
4 changes: 2 additions & 2 deletions app/cra-react18/src/services/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { message } from "antd";
import { CommonResponse } from "@/bean/xhr";
import { PlainObject } from "@/bean/base";
import { requestParamsFilter } from "@/utils/helper";
// import router from "@/router";
import { eventBus } from "@/utils/eventbus";
import { router } from "@/router";

enum InnerCode {
Unauthorized = "000001",
Expand Down Expand Up @@ -49,7 +49,7 @@ api.interceptors.response.use(
case InnerCode.TokenExpired:
case InnerCode.Forbidden:
eventBus.emit("sessionInvalid");
// router.push("/login");
router.navigate("/login");
break;
default:
break;
Expand Down
153 changes: 153 additions & 0 deletions app/cra-react18/src/views/Backend/Message/Review.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
import { Image, Space, Table, Button, message, Modal } from "antd";
import { ColumnType, TablePaginationConfig } from "antd/es/table";
import { useEffect, useState } from "react";
import styled from "styled-components";
import { NavLink } from "react-router-dom";
import { useAsyncLoading } from "@/hooks/async";
import { CommentDTO } from "@/bean/dto";
import CommentAvatarFallback from "@/assets/img/comment-avatar.svg";
import { format } from "@/utils/date-utils";
import { commentService } from "@/services/comment";
import { approvedFormatter } from "@/utils/formatter";

const Wrapper = styled.section`
padding: 20px;
background-color: #fff;
`;

const Avatar = styled(Image)`
&& {
width: 40px;
height: 40px;
border-radius: 100%;
}
`;

export const Component = () => {
const [messageList, setMessageList] = useState<CommentDTO[]>([]);

const [pagination, setPagination] = useState<TablePaginationConfig>({
current: 1,
pageSize: 10,
total: 0,
showTotal: (total) => `共计${total}条`,
onChange: (page, pageSize) => {
setPagination({ ...pagination, current: page, pageSize });
},
});

const handleGetCommentList = async () => {
const res = await commentService.pageNotApproved({
pageNo: pagination.current as number,
pageSize: pagination.pageSize as number,
type: 2, // 2代表是留言
});
setMessageList(res.data);
setPagination({ ...pagination, total: res.total });
};

const { loading, trigger: search } = useAsyncLoading(handleGetCommentList, [pagination.current, pagination.pageSize], {
initialLoading: true,
});

useEffect(() => {
search();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pagination.current, pagination.pageSize]);

const onCommitReview = async (record: CommentDTO, approved: 1 | 2) => {
Modal.confirm({
title: `确认要执行${approved === 1 ? "通过" : "不通过"}操作吗?`,
onOk: async () => {
await commentService.review({
id: record.id,
approved,
email: record.email,
content: record.content,
jump_url: record.jump_url,
});
message.success("操作成功");
search();
},
});
};

const columns: ColumnType<CommentDTO>[] = [
{
title: "昵称",
width: "120px",
dataIndex: "nick_name",
},
{
title: "头像",
dataIndex: "avatar",
width: "132px",
render: (_, record) => {
return <Avatar src={record.avatar} fallback={CommentAvatarFallback} />;
},
},
{
title: "留言内容",
dataIndex: "content",
width: "180px",
},
{
title: "审核状态",
dataIndex: "approved",
width: "120px",
render: (_, record) => {
return approvedFormatter(record.approved ?? 0);
},
},
{
title: "邮箱",
dataIndex: "email",
width: "140px",
},
{
title: "个人网站",
dataIndex: "site_url",
width: "160px",
},
{
title: "创建时间",
dataIndex: "create_time",
width: "160px",
render: (value) => {
return format(value);
},
},
{
title: "操作",
width: "180px",
key: "action",
fixed: "right",
render: (_, record, index) => {
return (
<Space>
<Button type="primary" ghost size="small" onClick={() => onCommitReview(record, 1)}>
通过
</Button>

<Button type="primary" ghost size="small" danger onClick={() => onCommitReview(record, 2)}>
不通过
</Button>
</Space>
);
},
},
];

return (
<Wrapper>
<Table
rowKey="id"
dataSource={messageList}
columns={columns}
loading={loading}
pagination={loading ? false : pagination}
scroll={{ x: "max-content" }}
></Table>
</Wrapper>
);
};

0 comments on commit 3399e94

Please sign in to comment.