From ef5da31ea50a8d15afc5b3b96e7154f77ef22d8c Mon Sep 17 00:00:00 2001
From: callmeyan <yaclty2@gmail.com>
Date: Wed, 27 Nov 2024 14:40:46 +0800
Subject: [PATCH] update ui

---
 src/pages/create/index.tsx                 |  3 +++
 src/pages/news/components/search-panel.tsx | 15 +++--------
 src/pages/news/index.tsx                   | 29 ++++++++++++++++++++--
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
index 45145c6..f70f32d 100644
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@@ -111,6 +111,9 @@ export default function CreateIndex() {
 							/>))}
 					</SortableContext>
 				</DndContext>
+				<div className="text-right mt-10">
+					<Button type="primary">一键推流</Button>
+				</div>
 			</div>
 			<div className="video-player-container ml-8 w-[400px] flex flex-col">
 				<div className="text-center text-base mt-10">预览视频</div>
diff --git a/src/pages/news/components/search-panel.tsx b/src/pages/news/components/search-panel.tsx
index 5f43a26..f38582e 100644
--- a/src/pages/news/components/search-panel.tsx
+++ b/src/pages/news/components/search-panel.tsx
@@ -11,10 +11,8 @@ type SearchParams = {
 
 type SearchPanelProps = {
 	onSearch?: (params: SearchParams) => Promise<void>;
-	onVideoCreateClick?: () => Promise<void> | void;
-	onVideoDownloadClick?: () => Promise<void>;
 }
-export default function SearchPanel({onSearch, onVideoCreateClick, onVideoDownloadClick}: SearchPanelProps) {
+export default function SearchPanel({onSearch}: SearchPanelProps) {
 	const [state, setState] = useSetState<{
 		time: string;
 		source: string;
@@ -43,10 +41,10 @@ export default function SearchPanel({onSearch, onVideoCreateClick, onVideoDownlo
 		<div className="flex justify-between items-center">
 			<div className="search-form">
 				<Form className={""} layout="inline" onFinish={onFinish}>
-					<Form.Item name="search">
+					<Form.Item name="search" className="w-[200px]">
 						<Input placeholder={'请输入搜索信息'}/>
 					</Form.Item>
-					<Form.Item label={'更新时间'} name="date" className="w-[220px]">
+					<Form.Item label={'更新时间'} name="date" className="w-[250px]">
 						<Select
 							defaultValue={state.time} options={ListTimes}
 							optionRender={(option) => (
@@ -58,18 +56,13 @@ export default function SearchPanel({onSearch, onVideoCreateClick, onVideoDownlo
 						/>
 					</Form.Item>
 					<Form.Item>
-						<Space size={10}>
+						<Space size={20}>
 							<Button type={'primary'} htmlType={'submit'}>搜索</Button>
 							<Button htmlType={'reset'}>重置</Button>
 						</Space>
 					</Form.Item>
 				</Form>
 			</div>
-			<Space size={10}>
-				<Button loading={state.searching} type={'primary'}
-				        onClick={onVideoCreateClick}>推入视频生成界面</Button>
-				<Button onClick={onVideoDownloadClick}>下载</Button>
-			</Space>
 		</div>
 		<div className="filter-container flex items-start mt-5">
 			<div className={'mt-2.5'}>新闻来源：</div>
diff --git a/src/pages/news/index.tsx b/src/pages/news/index.tsx
index 22ba0b1..3dc07f8 100644
--- a/src/pages/news/index.tsx
+++ b/src/pages/news/index.tsx
@@ -1,15 +1,23 @@
 import {useState} from "react";
-import {Checkbox, Modal, Pagination} from "antd";
+import {Button, Checkbox, Modal, Pagination, Space} from "antd";
 
 import {Card} from "@/components/card";
 import SearchPanel from "@/pages/news/components/search-panel.tsx";
 
 import styles from './style.module.scss'
 
+
+function onVideoCreateClick(){}
+function onVideoDownloadClick(){}
+
 export default function NewsIndex() {
 	const [list,] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
 	const [checkedId, setCheckedId] = useState<number[]>([])
 	const [activeNews, setActiveNews] = useState<NewsInfo>()
+	const [state, setState] = useState<{
+		checkAll?: boolean;
+	}>({})
+
 	return (<div className={'container pb-5'}>
 		<Card className="search-panel-container my-5">
 			<SearchPanel/>
@@ -36,11 +44,28 @@ export default function NewsIndex() {
 					</div>
 				</div>
 			</Modal>
+			<div className="controls flex justify-between mb-5">
+				<div>
+					<Checkbox checked={state.checkAll} onChange={e=>{
+						setState({checkAll: e.target.checked})
+						if (e.target.checked) {
+							setCheckedId([...list])
+						} else {
+							setCheckedId([])
+						}
+					}}>全选</Checkbox>
+				</div>
+				<Space size={10}>
+					<Button type={'primary'}
+					        onClick={onVideoCreateClick}>推入视频生成界面</Button>
+					<Button onClick={onVideoDownloadClick}>下载</Button>
+				</Space>
+			</div>
 			<div className={styles.newsList}>
 				{list.map(id => (
 					<div key={id} className={`py-3 flex items-start border-b border-gray-100 group`}>
 						<div
-							className={`checkbox mr-2 ${checkedId.includes(id) ? '' : 'opacity-0'} group-hover:opacity-100`}>
+							className={`checkbox mt-[2px] mr-2 ${checkedId.includes(id) ? '' : 'opacity-0'} group-hover:opacity-100`}>
 							<Checkbox checked={checkedId.includes(id)} onChange={() => {
 								if (checkedId.includes(id)) {
 									setCheckedId(checkedId.filter(item => item != id))