From 2d5445105211f5ffe383ba814afa44a4944ba96c Mon Sep 17 00:00:00 2001
From: callmeyan <yaclty2@gmail.com>
Date: Sun, 22 Dec 2024 03:44:43 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20update=20=E6=96=B0=E9=97=BB?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/news/components/style.module.scss |   9 ++
 src/pages/news/edit.tsx                     | 130 +++++++++++++-------
 2 files changed, 97 insertions(+), 42 deletions(-)

diff --git a/src/pages/news/components/style.module.scss b/src/pages/news/components/style.module.scss
index 53f181f..708fc0b 100644
--- a/src/pages/news/components/style.module.scss
+++ b/src/pages/news/components/style.module.scss
@@ -28,4 +28,13 @@
       @apply flex flex-wrap gap-2 mt-2;
     }
   }
+}
+.newListTable{
+  :global{
+    .header{}
+    .body{}
+    .row{
+      @apply bg-white mt-2 p-4 rounded;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/pages/news/edit.tsx b/src/pages/news/edit.tsx
index e18f6c4..0bf5626 100644
--- a/src/pages/news/edit.tsx
+++ b/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',
-		},
-		{
-			title: '内容',
-			dataIndex: 'summary',
-			render: (value) => (<Typography.Paragraph style={{marginBottom: 0}} ellipsis={{
-				rows: 2, expandable: true, symbol: 'More'
-			}}>{value}</Typography.Paragraph>)
+			render: (_, record) => (<div>
+				<div className="title text-base">{_}</div>
+				<div className="summary text-sm text-gray-400 line-clamp-1">{record.summary}</div>
+			</div>)
 		},
 		{
 			title: '来源',
@@ -49,48 +49,94 @@ export default function NewEdit() {
 			title: '操作',
 			width: 80,
 			align: 'center',
-			render: (_, record) => (<Button type="link" onClick={() => {
-				setEditId(record.id)
-			}}>编辑</Button>),
+			render: (_, record) => (<Space>
+				<Button onClick={() => {
+					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>
-					rowSelection={{type: 'checkbox', ...rowSelection}}
-					columns={columns}
-					dataSource={data?.list || []}
-					rowKey={'id'}
-					bordered
-					pagination={false}
-				/>
-				{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 => ({
+				<div className={styles.newListTable}>
+					<div className="header flex gap-2">
+						<div className="col flex-1">标题</div>
+						<div className="col source w-[120px] min-w-[120px]">来源</div>
+						<div className="col time w-[120px]">时间</div>
+						<div className="col operations min-w-[150px]">操作</div>
+					</div>
+					<InfiniteScroller onCallback={(page)=>{
+						setParams(prev => ({
 							...prev,
 							pagination: {page, limit: 10}
-						}))}
-                    />
-                    <ButtonPush2Video ids={selectedRowKeys} onSuccess={refresh}/>
-                </div>}
+						}))
+					}} loading={loading} pagination={data?.pagination}>
+						<div className="body">
+							{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>)
 }
\ No newline at end of file