Zverse/ai-digital-live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 全选逻辑,批量操作按钮样式

Browse Source
This commit is contained in:
LittleBoy 2024-12-22 22:55:38 +08:00
parent cb316aa596
commit 7ccd5b4086
11 changed files with 67 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/core.scss
View File

@ -343,9 +343,11 @@
.page-action {
@apply fixed right-10 bottom-10 flex flex-col gap-4;
button {
@apply border-0 min-w-[120px] h-[40px] rounded-3xl text-white pr-4 flex items-center justify-between;
@apply border-0 min-w-[120px] h-[40px] rounded-3xl pr-4 flex items-center justify-between drop-shadow;
.text {
flex: 1;
text-align: left;
padding-left: 15px;
}
&:disabled {

2
src/components/scoller/button-to-top.tsx
View File

@ -10,7 +10,7 @@ type ButtonToTopProps = {
export default function ButtonToTop(props: ButtonToTopProps) {
return (
<div className={'page-action-to-top'}>
{props.visible && <button className="btn-to-top" onClick={()=>{
{props.visible && <button className="btn-to-top text-white" onClick={()=>{
console.log(props)
if(props.onClick){
props.onClick()

5
src/pages/live/index.tsx
View File

@ -268,7 +268,7 @@ export default function LiveIndex() {
<div className="page-action">
<ButtonToTop visible={state.showToTop} onClick={() => scrollerRef.current?.scrollToPosition(0)}/>
<ButtonBatch
className='bg-gray-300 hover:bg-gray-400'
className='bg-gray-300 hover:bg-gray-400 text-white'
selected={currentSelectedId}
emptyMessage={`请选择要删除的视频`}
confirmMessage={`是否删除当前的${currentSelectedId.length}条视频？`}
@ -276,7 +276,8 @@ export default function LiveIndex() {
onProcess={processDeleteVideo}
>
<span className={'text'}>批量删除</span>
<IconDelete className={'text-white'} /></ButtonBatch>
<IconDelete/>
</ButtonBatch>
</div>
</div>)
}

8
src/pages/news/components/button-delete-batch.tsx
View File

@ -1,8 +1,8 @@
import {App, Button} from "antd";
import {App} from "antd";
import {showToast} from "@/components/message.ts";
import {useState} from "react";
import {push2article} from "@/service/api/news.ts";
import {IconArrowRight, IconDelete} from "@/components/icons";
import {IconDelete} from "@/components/icons";
import {useNavigate} from "react-router-dom";
export default function ButtonDeleteBatch(props: { ids: Id[]; }) {
@ -37,10 +37,10 @@ export default function ButtonDeleteBatch(props: { ids: Id[]; }) {
<button
loading={loading}
onClick={onPushClick}
className='bg-gray-400 hover:bg-gray-500'
className='bg-gray-300 hover:bg-gray-400 text-white'
>
<span className={'text'}>批量删除</span>
<IconDelete className={'text-white'} />
<IconDelete className=""/>
</button>
</div>
)

13
src/pages/news/components/button-news-download.tsx
View File

@ -65,6 +65,7 @@ async function downloadAsZip(list: NewsInfo[]) {
export default function ButtonNewsDownload(props: { ids: Id[] }) {
const [loading, setLoading] = useState(false)
const onDownloadClick = async (ids: Id[]) => {
if(loading) return;
if (props.ids.length === 0) {
showToast('请选择要下载的新闻', 'warning')
return
@ -80,13 +81,13 @@ export default function ButtonNewsDownload(props: { ids: Id[] }) {
}
}
return (
<Button
className={'btn-info'}
loading={loading} onClick={() => onDownloadClick(props.ids)}
icon={<IconDownload className={'text-white'}/>}
iconPosition={'end'}
<button
disabled={loading}
className={'btn-action bg-[#eef5ff] text-gray-800 hover:bg-[#d2e3ff]'}
onClick={() => onDownloadClick(props.ids)}
>
<span className="text">下载</span>
</Button>
<IconDownload />
</button>
)
}

13
src/pages/news/components/button-push-news2article.tsx
View File

@ -1,4 +1,4 @@
import {App, Button} from "antd";
import {App} from "antd";
import {showToast} from "@/components/message.ts";
import {useState} from "react";
import {push2article} from "@/service/api/news.ts";
@ -22,7 +22,7 @@ export default function ButtonPushNews2Article(props: { ids: Id[]; }) {
}
const onPushClick = () => {
if (props.ids.length === 0) {
showToast('请选择要推送的新闻', 'warning')
showToast('请选择要推入编辑的新闻', 'warning')
return
}
modal.confirm({
@ -33,14 +33,13 @@ export default function ButtonPushNews2Article(props: { ids: Id[]; }) {
})
}
return (
<Button
<button
loading={loading}
onClick={onPushClick}
className='btn-action'
icon={<IconArrowRight className={'text-white'} />}
iconPosition={'end'}
className='bg-[#4096ff] hover:bg-blue-600 text-white'
>
<span className={'text'}>推入编辑</span>
</Button>
<IconArrowRight className={'text-white'} />
</button>
)
}

13
src/pages/news/components/button-push2video.tsx
View File

@ -1,8 +1,8 @@
import {Button, Modal} from "antd";
import { Modal} from "antd";
import React, {useState} from "react";
import {showErrorToast, showToast} from "@/components/message.ts";
import {push2video} from "@/service/api/article.ts";
import {IconArrowRight, IconDelete} from "@/components/icons";
import {IconArrowRight} from "@/components/icons";
export default function ButtonPush2Video(props: { ids: Id[]; onSuccess?: () => void; }) {
@ -29,16 +29,15 @@ export default function ButtonPush2Video(props: { ids: Id[]; onSuccess?: () => v
}
return (
<div>
<Button
<button
type="primary"
loading={loading}
className='btn-action btn-gray-300'
icon={<IconArrowRight className={'text-white'}/>}
className='bg-[#4096ff] hover:bg-blue-600 text-white'
onClick={onPushClick}
iconPosition={'end'}
>
<span className={'text'}>生成视频</span>
</Button>
<IconArrowRight className={'text-white'}/>
</button>
</div>
)
}

5
src/pages/news/edit.tsx
View File

@ -77,10 +77,9 @@ export default function NewEdit() {
<span className={'inline-block cursor-pointer mr-2'} onClick={() => {
handleCheckAll(!state.checkAll)
}}>全选</span>
<Checkbox checked={state.checkAll} onChange={e => {
<Checkbox checked={state.checkAll && selectedRowKeys.length == data?.list.length} onChange={e => {
handleCheckAll(e.target.checked)
}}
indeterminate={selectedRowKeys.length > 0 && selectedRowKeys.length < data?.list.length}></Checkbox>
}} />
</div>
</div>
<div className={styles.newListTable}>

16
src/pages/news/index.tsx
View File

@ -1,4 +1,4 @@
import React, {useState} from "react";
import React, {useRef, useState} from "react";
import {Checkbox, Divider, Empty, Modal, Pagination, Space} from "antd";
import {useRequest} from "ahooks";
@ -9,7 +9,8 @@ import {formatTime} from "@/util/strings.ts";
import ButtonPushNews2Article from "@/pages/news/components/button-push-news2article.tsx";
import ButtonNewsDownload from "@/pages/news/components/button-news-download.tsx";
import {clsx} from "clsx";
import InfiniteScroller from "@/components/scoller/infinite-scroller.tsx";
import InfiniteScroller, {InfiniteScrollerRef} from "@/components/scoller/infinite-scroller.tsx";
import ButtonToTop from "@/components/scoller/button-to-top.tsx";
export default function NewsIndex() {
@ -21,6 +22,7 @@ export default function NewsIndex() {
const [state, setState] = useState<{
checkAll?: boolean;
showToTop?: boolean;
}>({})
const [data, setData] = useState<DataList<ListCrawlerNewsItem>>();
@ -58,6 +60,7 @@ export default function NewsIndex() {
setCheckedId([])
}
}
const scrollerRef = useRef<InfiniteScrollerRef|null>(null)
return (<div className={'container pb-5'}>
@ -79,22 +82,24 @@ export default function NewsIndex() {
<div className="news-list-container">
<div className="controls flex justify-end mb-3 gap-2">
<Space>
<span>总共 {data?.list.length} 条</span>
<span>总共 {data?.list?.length || 0} 条</span>
<span className={'text-blue-500'}>已选 {checkedId.length} 条</span>
</Space>
<div>
<span className={'inline-block cursor-pointer mr-2'} onClick={() => {
handleCheckAll(!state.checkAll)
}}>全选</span>
<Checkbox checked={state.checkAll} onChange={e => {
<Checkbox checked={state.checkAll && checkedId.length == data?.list.length} onChange={e => {
handleCheckAll(e.target.checked)
}}></Checkbox>
</div>
</div>
<InfiniteScroller
className="grid grid-cols-3 gap-4 lg:grid-cols-4 pb-10"
className="grid grid-cols-3 gap-4 lg:grid-cols-4 pb-2"
pagination={data?.pagination}
loading={loading}
ref={scrollerRef}
onScroll={(top)=> setState({showToTop: top > 30})}
onCallback={(page) => {
setParams({...params, pagination: {...params.pagination, page}})
}}
@ -150,6 +155,7 @@ export default function NewsIndex() {
</div>
<div className="page-action">
<ButtonToTop visible={state.showToTop} onClick={()=>scrollerRef.current?.scrollToPosition(0)} />
<div>
<ButtonNewsDownload ids={checkedId}/>
</div>

14
src/pages/video/components/button-push2room.tsx
View File

@ -34,9 +34,17 @@ export default function ButtonPush2Room(props: { ids: Id[]; list: VideoInfo[];on
})
}
return (
<Button type="primary" loading={loading} onClick={onPushClick}>
<span className="text">一键推流</span>
<div>
<button
type="primary"
disabled={loading}
className='bg-[#4096ff] hover:bg-blue-600 text-white'
onClick={onPushClick}
>
<span className={'text'}>一键推流</span>
<IconArrowRight />
</Button>
</button>
</div>
)
}

5
src/pages/video/index.tsx
View File

@ -176,13 +176,12 @@ export default function VideoIndex() {
</div>
<div className="page-action">
<ButtonToTop visible={state.showToTop} onClick={()=>scrollerRef.current?.scrollToPosition(0)}/>
{/*<ButtonDeleteBatch ids={checkedIdArray} onSuccess={loadList}/>*/}
<ButtonBatch
onProcess={deleteByIds}
selected={checkedIdArray}
emptyMessage={`请选择要删除的新闻视频`}
title={`已选择${checkedIdArray.length}条，确定要全部删除吗？`}
className='bg-gray-300 hover:bg-gray-400'
className='bg-gray-300 hover:bg-gray-400 text-white'
confirmMessage={`删除后需从新闻素材中`}
onSuccess={() => {
showToast('删除成功!', 'success')
@ -190,7 +189,7 @@ export default function VideoIndex() {
}}
>
<span className="text">批量删除</span>
<IconDelete className={'text-white'} />
<IconDelete />
</ButtonBatch>
<ButtonPush2Room ids={checkedIdArray} list={videoData} onSuccess={loadList}/>
</div>