+
+ return (
{props.children}
{props?.pagination && props.pagination.total > props.pagination.limit * props.pagination.page && (props.loadingPlaceholder ||
)}
{props?.empty && props.pagination?.total == 0 &&
-
- {props.empty}
+
+ {props.empty}
}
);
-}
\ No newline at end of file
+}) //(props: InfiniteScrollerProps) =>{}
+export default InfiniteScroller
\ No newline at end of file
diff --git a/src/pages/news/components/edit-search-form.tsx b/src/pages/news/components/edit-search-form.tsx
index 094b77d..ee66dd7 100644
--- a/src/pages/news/components/edit-search-form.tsx
+++ b/src/pages/news/components/edit-search-form.tsx
@@ -49,11 +49,11 @@ export default function EditSearchForm(props: {
placeholder="请输入新闻标题关键词进行搜索"
onPressEnter={handleSubmit}
/>
-
来源
-
+ {/*
来源*/}
+ {/*
*/}
)
diff --git a/src/pages/news/components/style.module.scss b/src/pages/news/components/style.module.scss
index 708fc0b..7fd0a67 100644
--- a/src/pages/news/components/style.module.scss
+++ b/src/pages/news/components/style.module.scss
@@ -31,10 +31,51 @@
}
.newListTable{
:global{
- .header{}
- .body{}
.row{
- @apply bg-white mt-2 p-4 rounded;
+ @apply bg-white mt-2 py-2 px-4 rounded-xl gap-2 border;
+ border-width: 2px;
+ &.checked{
+ @apply border-primary-blue bg-primary-blue-bg;
+ }
+ }
+ .col{
+ @apply flex items-center relative pl-6;
+ height: 44px;
+ &:after{
+ @apply absolute;
+ border-right: solid 1px #e8e8e8;
+ content: ' ';
+ top:2px;
+ bottom: 2px;
+ left:0;
+ }
+ }
+ .title{
+ @apply flex-1 pl-0;
+ &:after{
+ display: none;
+ }
+ }
+ .source{
+ width: 150px;
+ }
+ .time{
+ width: 150px;
+ }
+ .operations{
+ @apply gap-4;
+ width: 100px;
+ }
+ .header{
+ @apply bg-primary-bg;
+ .operations{
+ }
+ }
+ .body{}
+ .icon-btn{
+ @apply text-gray-400 hover:text-blue-500 cursor-pointer;
+ font-size: 18px;
+
}
}
}
\ No newline at end of file
diff --git a/src/pages/news/edit.tsx b/src/pages/news/edit.tsx
index 0bf5626..2eaeced 100644
--- a/src/pages/news/edit.tsx
+++ b/src/pages/news/edit.tsx
@@ -1,142 +1,136 @@
-import {Button, Checkbox, Pagination, Space, Table, TableColumnsType, TableProps, Typography} from "antd";
+import {Checkbox, Space} from "antd";
-import {Card} from "@/components/card";
-import React, {useState} from "react";
+import React, {useRef, useState} from "react";
import {useRequest} from "ahooks";
import {formatTime} from "@/util/strings.ts";
import ArticleEditModal from "@/components/article/edit-modal.tsx";
import {getList} from "@/service/api/article.ts";
import EditSearchForm from "@/pages/news/components/edit-search-form.tsx";
import ButtonPush2Video from "@/pages/news/components/button-push2video.tsx";
-import {Key} from "antd/es/table/interface";
import styles from './components/style.module.scss'
-import InfiniteScroller from "@/components/scoller/infinite-scroller.tsx";
+import InfiniteScroller, {InfiniteScrollerRef} from "@/components/scoller/infinite-scroller.tsx";
+import {IconDelete, IconEdit} from "@/components/icons";
+import {clsx} from "clsx";
+import ButtonToTop from "@/components/scoller/button-to-top.tsx";
export default function NewEdit() {
+ const [state, setState] = useState<{
+ checkAll?: boolean;
+ showToTop?: boolean;
+ }>({})
const [editId, setEditId] = useState(-1)
const [selectedRowKeys, setSelectedRowKeys] = useState
([])
+
const [params, setParams] = useState({
pagination: {page: 1, limit: 10}
})
- const {data, refresh, loading} = useRequest(() => getList(params), {refreshDeps: [params]})
+ const [data, setData] = useState>()
+ const {refresh, loading} = useRequest(() => getList(params), {
+ refreshDeps: [params],
+ onSuccess: (data) => {
+ setData(prev => {
+ // 判断页码是否是第1页
+ if (data.pagination.page == 1) return data;
+ return {
+ list: [...(prev?.list || []), ...(data?.list || [])],
+ pagination: data.pagination
+ }
+ })
+ }
+ })
- // : TableColumnsType
- const columns = [
- {
- title: '标题',
- dataIndex: 'title',
- render: (_, record) => (
-
{_}
-
{record.summary}
-
-
+ {/**/}
-
-
-
-
标题
-
来源
-
时间
-
操作
+
+
+
+
+ 总共 {data?.list.length} 条
+ 已选 {selectedRowKeys.length} 条
+
+
+ {
+ handleCheckAll(!state.checkAll)
+ }}>全选
+ {
+ handleCheckAll(e.target.checked)
+ }}
+ indeterminate={selectedRowKeys.length > 0 && selectedRowKeys.length < data?.list.length}>
-
{
+
+
+
+
{
setParams(prev => ({
...prev,
pagination: {page, limit: 10}
}))
- }} loading={loading} pagination={data?.pagination}>
+ }} onScroll={(top)=> setState({showToTop: top > 30})} loading={loading} pagination={data?.pagination}>
{data?.list?.map((item, i) => {
- return
-
-
{item.title}
-
{item.summary}
+ const checked = selectedRowKeys.includes(item.id)
+ return
+
+
+
{item.title}
+
{item.summary}
+
-
-
{item.media_name}
+
-
+
{formatTime(item.publish_time, 'YYYY-MM-DD HH:mm')}
+ className="text-sm">{formatTime(item.publish_time, 'YYYY-MM-DD HH:mm')}
-
-
-
-
-
-
+
+ setEditId(item.id)}>
+
+ handleItemChecked(e.target.checked, item)}/>
})}
- {/*
*/}
- {/* columns={columns}*/}
- {/* dataSource={data?.list || []}*/}
- {/* rowKey={'id'}*/}
- {/* bordered={false}*/}
- {/* pagination={false}*/}
- {/* rowHoverable={false}*/}
- {/* className={styles.newListTable}*/}
- {/*/>*/}
- {data?.pagination && data?.pagination.total > 0 &&
-
-
setParams(prev => ({
- ...prev,
- pagination: {page, limit: 10}
- }))}
- />
-
-
+
scrollerRef.current?.scrollToPosition(0)} />
+
+
+
+
-
已选 {checkedId.length} 条
+
+ 总共 {data?.list.length} 条
+ 已选 {checkedId.length} 条
+
{
handleCheckAll(!state.checkAll)
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index ae5bde1..c7b5678 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -31,6 +31,7 @@ const AppRouter = () => {
theme={{
token: {
borderRadius: 4,
+
},
}}
diff --git a/tailwind.config.js b/tailwind.config.js
index c678899..9b69019 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ const themeConfig = {
colors:{
'primary':'#7356f6',
'primary-blue':'rgb(64, 150, 255)',
+ 'primary-blue-bg':'#d9eaff',
'primary-bg': 'rgb(244, 247, 252)',
'info':'rgba(238, 245, 255, 1)',
'news-to-edit':'#ececec',