💄 update 新闻编辑ui

src/pages/news/components/style.module.scss

@@ -29,3 +29,12 @@
     }
   }
 }
+.newListTable{
+  :global{
+    .header{}
+    .body{}
+    .row{
+      @apply bg-white mt-2 p-4 rounded;
+    }
+  }
+}

src/pages/news/edit.tsx

@@ -1,4 +1,4 @@
-import {Button, Pagination, Table, TableColumnsType, TableProps, Typography} from "antd";
+import {Button, Checkbox, Pagination, Space, Table, TableColumnsType, TableProps, Typography} from "antd";
 
 import {Card} from "@/components/card";
 import React, {useState} from "react";
@@ -10,6 +10,9 @@ 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";
+
 
 export default function NewEdit() {
 	const [editId, setEditId] = useState(-1)
@@ -17,20 +20,17 @@ export default function NewEdit() {
 	const [params, setParams] = useState<ApiArticleSearchParams>({
 		pagination: {page: 1, limit: 10}
 	})
-	const {data, refresh} = useRequest(() => getList(params), {refreshDeps: [params]})
+	const {data, refresh, loading} = useRequest(() => getList(params), {refreshDeps: [params]})
 
-	const columns: TableColumnsType<ListArticleItem> = [
+	// : TableColumnsType<ListArticleItem>
+	const columns = [
 		{
 			title: '标题',
-			minWidth: 300,
 			dataIndex: 'title',
-		},
+			render: (_, record) => (<div>
-		{
+				<div className="title text-base">{_}</div>
-			title: '内容',
+				<div className="summary text-sm text-gray-400 line-clamp-1">{record.summary}</div>
-			dataIndex: 'summary',
+			</div>)
-			render: (value) => (<Typography.Paragraph style={{marginBottom: 0}} ellipsis={{
-				rows: 2, expandable: true, symbol: 'More'
-			}}>{value}</Typography.Paragraph>)
 		},
 		{
 			title: '来源',
@@ -49,48 +49,94 @@ export default function NewEdit() {
 			title: '操作',
 			width: 80,
 			align: 'center',
-			render: (_, record) => (<Button type="link" onClick={() => {
+			render: (_, record) => (<Space>
-				setEditId(record.id)
+				<Button onClick={() => {
-			}}>编辑</Button>),
+					setEditId(record.id)
+				}}>编辑</Button>
+				<Button onClick={() => {
+					setEditId(record.id)
+				}}>删</Button>
+				<Checkbox type="link"/>
+			</Space>),
 		},
 	];
 
-	const rowSelection: TableProps<ListArticleItem>['rowSelection'] = {
-		onChange: (selectedRowKeys: Key[]) => {
-			setSelectedRowKeys(selectedRowKeys as Id[])
-		},
-	};
 
 	return (<div className="container pb-5 news-edit">
-		<Card className="search-panel-container my-5">
+		<div className="search-panel-container my-5">
 			<div className="search-form flex gap-5 justify-between">
 				<EditSearchForm onSubmit={setParams}/>
 				<Button type="primary" onClick={() => setEditId(0)}>手动新增</Button>
 			</div>
 			<div className="news-list-container mt-5">
-				<Table<ListArticleItem>
+				<div className={styles.newListTable}>
-					rowSelection={{type: 'checkbox', ...rowSelection}}
+					<div className="header flex gap-2">
-					columns={columns}
+						<div className="col flex-1">标题</div>
-					dataSource={data?.list || []}
+						<div className="col source w-[120px] min-w-[120px]">来源</div>
-					rowKey={'id'}
+						<div className="col time w-[120px]">时间</div>
-					bordered
+						<div className="col operations min-w-[150px]">操作</div>
-					pagination={false}
+					</div>
-				/>
+					<InfiniteScroller onCallback={(page)=>{
-				{data?.pagination && data?.pagination.total > 0 && <div className="footer flex justify-between items-center mt-5">
+						setParams(prev => ({
-                    <Pagination
-                        current={params.pagination.page}
-                        total={data?.pagination.total}
-                        pageSize={10}
-                        showSizeChanger={false}
-                        simple={true}
-                        rootClassName={'simple-pagination'}
-                        onChange={(page) => setParams(prev => ({
 							...prev,
 							pagination: {page, limit: 10}
-						}))}
+						}))
-                    />
+					}} loading={loading} pagination={data?.pagination}>
-                    <ButtonPush2Video ids={selectedRowKeys} onSuccess={refresh}/>
+						<div className="body">
-                </div>}
+							{data?.list?.map((item, i) => {
+								return <div key={i} className="row flex gap-3">
+									<div className="col flex-1">
+										<div className="title text-base">{item.title}</div>
+										<div className="summary text-xs text-gray-400 line-clamp-1">{item.summary}</div>
+									</div>
+									<div className="col source w-[120px] min-w-[120px]">
+										<div className="text-sm text-gray-400">{item.media_name}</div>
+									</div>
+									<div className="col time w-[120px]">
+										<div
+											className="text-sm text-gray-400">{formatTime(item.publish_time, 'YYYY-MM-DD HH:mm')}</div>
+									</div>
+									<div className="col operations w-[150px]">
+										<Space>
+											<Button onClick={() => {
+												setEditId(item.id)
+											}}>编辑</Button>
+											<Button onClick={() => {
+												setEditId(item.id)
+											}}>删</Button>
+											<Checkbox type="link"/>
+										</Space>
+									</div>
+								</div>
+							})}
+						</div>
+					</InfiniteScroller>
+				</div>
+				{/*<Table<ListArticleItem>*/}
+				{/*	columns={columns}*/}
+				{/*	dataSource={data?.list || []}*/}
+				{/*	rowKey={'id'}*/}
+				{/*	bordered={false}*/}
+				{/*	pagination={false}*/}
+				{/*	rowHoverable={false}*/}
+				{/*	className={styles.newListTable}*/}
+				{/*/>*/}
+				{data?.pagination && data?.pagination.total > 0 &&
+                    <div className="footer flex justify-between items-center mt-5">
+                        <Pagination
+                            current={params.pagination.page}
+                            total={data?.pagination.total}
+                            pageSize={10}
+                            showSizeChanger={false}
+                            simple={true}
+                            rootClassName={'simple-pagination'}
+                            onChange={(page) => setParams(prev => ({
+								...prev,
+								pagination: {page, limit: 10}
+							}))}
+                        />
+                        <ButtonPush2Video ids={selectedRowKeys} onSuccess={refresh}/>
+                    </div>}
 			</div>
 			<ArticleEditModal
 				type="news" id={editId}
@@ -98,6 +144,6 @@ export default function NewEdit() {
 					setEditId(-1)
 					if (saved) refresh()
 				}}/>
-		</Card>
+		</div>
 	</div>)
 }