From 0e598cfd1d06caeb826e80a92019f7f14dbc3b39 Mon Sep 17 00:00:00 2001 From: xdk <1455045838@qq.com> Date: Tue, 7 Nov 2023 17:59:44 +0800 Subject: [PATCH] add CheckPages --- src/routes/modules/ReportCheckDetailPage.tsx | 100 +++++++ src/routes/modules/ReportCheckPage.tsx | 256 ++++++++++++++++++ .../modules/ResourceCheckDetailPage.tsx | 121 +++++++++ src/routes/modules/ResourceCheckPage.tsx | 255 +++++++++++++++++ 4 files changed, 732 insertions(+) create mode 100644 src/routes/modules/ReportCheckDetailPage.tsx create mode 100644 src/routes/modules/ReportCheckPage.tsx create mode 100644 src/routes/modules/ResourceCheckDetailPage.tsx create mode 100644 src/routes/modules/ResourceCheckPage.tsx diff --git a/src/routes/modules/ReportCheckDetailPage.tsx b/src/routes/modules/ReportCheckDetailPage.tsx new file mode 100644 index 0000000..1561669 --- /dev/null +++ b/src/routes/modules/ReportCheckDetailPage.tsx @@ -0,0 +1,100 @@ +// 具体举报审核，点击‘点击审核’按钮后进入的界面 + +import { Button, Descriptions } from '@arco-design/web-react'; + +const ReportCheckDetailPage = () => { + const data = [ + { + label: '举报资源', + value: '资源', + }, + { + label: '资源作者', + value: '作者', + }, + { + label: '举报人', + value: '人', + }, + { + label: '举报时间', + value: '时间', + }, + { + label: '举报原因', + value: '原因', + }, + { + label: '状态', + value: '未审核', + }, + ]; + return ( +
+
举报信息详情
+
+ +
+
+ + + +
+
+ ); +}; + +export default ReportCheckDetailPage; diff --git a/src/routes/modules/ReportCheckPage.tsx b/src/routes/modules/ReportCheckPage.tsx new file mode 100644 index 0000000..16f2431 --- /dev/null +++ b/src/routes/modules/ReportCheckPage.tsx @@ -0,0 +1,256 @@ +// 举报审核列表界面 + +import { + Button, + Radio, + Input, + Table, + TableColumnProps, +} from '@arco-design/web-react'; + +import { IconSearch } from '@arco-design/web-react/icon'; +import { useRef, useState } from 'react'; + +const ReportCheckPage = () => { + const inputRef = useRef(null); + + // 表格纵列相关数据 + const columns: TableColumnProps[] = [ + { + title: '举报资源', + dataIndex: 'report', + filterIcon: , + filterDropdown: ({ filterKeys, setFilterKeys, confirm }) => { + return ( +
+ { + setFilterKeys(value ? [value] : []); + }} + onSearch={() => { + confirm(); + }} + /> +
+ ); + }, + onFilter: (value, row) => + value ? row.operation.indexOf(value) !== -1 : true, + onFilterDropdownVisibleChange: visible => { + if (visible) { + setTimeout(() => inputRef.current.focus(), 150); + } + }, + }, + { + title: '资源作者', + dataIndex: 'author', + }, + { + title: '举报人', + dataIndex: 'person', + }, + { + title: '举报时间', + dataIndex: 'time', + }, + { + title: '举报原因', + dataIndex: 'reason', + }, + { + title: '状态', + dataIndex: 'status', + }, + { + title: '审核', + dataIndex: 'check', + }, + ]; + + // 初始数据 + const initData = [ + { + key: 1, + report: '举报记录', + reason: '举报原因', + status: '已审核', + author: '资源作者', + person: '举报人', + time: '2023年7月31日', + check: ( + + ), + }, + { + key: 2, + report: '举报记录', + reason: '举报原因', + status: '未审核', + author: '资源作者', + person: '举报人', + time: '2023年7月31日', + check: , + }, + { + key: 3, + report: '举报记录', + reason: '举报原因', + status: '已审核', + author: '资源作者', + person: '举报人', + time: '2023年7月31日', + check: ( + + ), + }, + { + key: 4, + report: '举报记录', + reason: '举报原因', + status: '已审核', + author: '资源作者', + person: '举报人', + time: '2023年7月31日', + check: ( + + ), + }, + { + key: 5, + report: '举报记录', + reason: '举报原因', + status: '未审核', + author: '资源作者', + person: '举报人', + time: '2023年7月31日', + check: , + }, + { + key: 6, + report: '举报记录', + reason: '举报原因', + status: '已审核', + author: '资源作者', + person: '举报人', + time: '2023年7月31日', + check: ( + + ), + }, + { + key: 7, + report: '举报记录', + reason: '举报原因', + status: '未审核', + author: '资源作者', + person: '举报人', + time: '2023年7月31日', + check: , + }, + ]; + + // 用于渲染表格的数据 + const [data, setData] = useState(initData); + + // 筛选所有、已审核与未审核 + function sortAll() { + setData(initData); + } + + function sortChecked() { + setData(initData.filter(item => item.status === '已审核')); + } + function sortNotChecked() { + setData(initData.filter(item => item.status === '未审核')); + } + + return ( +
+
+ 举报审核列表 +
+
+ 筛选 + + {['所有', '待审核', '已审核'].map(item => { + return ( + + {({ checked }) => { + return ( + + ); + }} + + ); + })} + +
+ + + ); +}; + +export default ReportCheckPage; diff --git a/src/routes/modules/ResourceCheckDetailPage.tsx b/src/routes/modules/ResourceCheckDetailPage.tsx new file mode 100644 index 0000000..69d754d --- /dev/null +++ b/src/routes/modules/ResourceCheckDetailPage.tsx @@ -0,0 +1,121 @@ +// 具体资源审核，点击‘点击审核’按钮后进入的界面 +import { Button, Descriptions, Image, Space } from '@arco-design/web-react'; + +const srcList = [ + '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp', + '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp', + '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp', + '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8361eeb82904210b4f55fab888fe8416.png~tplv-uwbnlip3yd-webp.webp', +]; +const ResourceCheckDetailPage = () => { + const data = [ + { + label: '资源标题', + value: '资源标题', + }, + { + label: '资源作者', + value: '作者', + }, + { + label: '资源简介', + value: '简介', + }, + { + label: '资源内容', + value: '内容', + }, + { + label: '上传时间', + value: '时间', + }, + { + label: '资源预览', + value: ( + + + {srcList.map((src, index) => ( + + ))} + + + ), + }, + { + label: '状态', + value: '未审核', + }, + ]; + return ( +
+
资源信息详情
+
+ +
+
+ + + +
+
+ ); +}; + +export default ResourceCheckDetailPage; diff --git a/src/routes/modules/ResourceCheckPage.tsx b/src/routes/modules/ResourceCheckPage.tsx new file mode 100644 index 0000000..e1c95e5 --- /dev/null +++ b/src/routes/modules/ResourceCheckPage.tsx @@ -0,0 +1,255 @@ +// 资源审核列表界面 + +import { + Button, + Radio, + Input, + Table, + TableColumnProps, +} from '@arco-design/web-react'; + +import { IconSearch } from '@arco-design/web-react/icon'; +import { useRef, useState } from 'react'; + +const ResourceCheckPage = () => { + const inputRef = useRef(null); + + // 表格纵列相关数据 + const columns: TableColumnProps[] = [ + { + title: '资源标题', + dataIndex: 'title', + filterIcon: , + filterDropdown: ({ filterKeys, setFilterKeys, confirm }) => { + return ( +
+ { + setFilterKeys(value ? [value] : []); + }} + onSearch={() => { + confirm(); + }} + /> +
+ ); + }, + onFilter: (value, row) => + value ? row.operation.indexOf(value) !== -1 : true, + onFilterDropdownVisibleChange: visible => { + if (visible) { + setTimeout(() => inputRef.current.focus(), 150); + } + }, + }, + { + title: '资源作者', + dataIndex: 'author', + }, + { + title: '资源简介', + dataIndex: 'introduction', + }, + { + title: '资源内容', + dataIndex: 'content', + }, + { + title: '上传时间', + dataIndex: 'time', + }, + { + title: '状态', + dataIndex: 'status', + }, + { + title: '审核', + dataIndex: 'check', + }, + ]; + + // 初始数据 + const initData = [ + { + key: 1, + title: '资源标题', + introduction: '资源简介', + author: '资源作者', + content: '资源内容', + time: '2023年7月3日', + status: '已审核', + check: ( + + ), + }, + { + key: 2, + title: '资源标题', + introduction: '资源简介', + author: '资源作者', + content: '资源内容', + status: '未审核', + time: '2023年7月31日', + check: , + }, + { + key: 3, + title: '资源标题', + introduction: '资源简介', + author: '资源作者', + content: '资源内容', + status: '已审核', + time: '2023年7月31日', + check: ( + + ), + }, + { + key: 4, + title: '资源标题', + introduction: '资源简介', + author: '资源作者', + content: '资源内容', + status: '已审核', + time: '2023年7月31日', + check: ( + + ), + }, + { + key: 5, + title: '资源标题', + introduction: '资源简介', + author: '资源作者', + status: '未审核', + content: '资源内容', + time: '2023年7月31日', + check: , + }, + { + key: 6, + title: '资源标题', + introduction: '资源简介', + author: '资源作者', + content: '资源内容', + status: '已审核', + time: '2023年7月31日', + check: ( + + ), + }, + { + key: 7, + title: '资源标题', + introduction: '资源简介', + author: '资源作者', + content: '资源内容', + status: '未审核', + time: '2023年7月31日', + check: , + }, + ]; + + // 用于渲染表格的数据 + const [data, setData] = useState(initData); + + // 筛选所有、已审核与未审核 + function sortAll() { + setData(initData); + } + + function sortChecked() { + setData(initData.filter(item => item.status === '已审核')); + } + function sortNotChecked() { + setData(initData.filter(item => item.status === '未审核')); + } + + return ( +
+
+ 资源审核列表 +
+
+ 筛选 + + {['所有', '待审核', '已审核'].map(item => { + return ( + + {({ checked }) => { + return ( + + ); + }} + + ); + })} + +
+
+ + ); +}; +export default ResourceCheckPage;