| 1 | /* |
| 2 | * @Author: nevin |
| 3 | * @Date: 2025-02-10 22:20:15 |
| 4 | * @LastEditTime: 2025-03-25 16:01:56 |
| 5 | * @LastEditors: nevin |
| 6 | * @Description: 互动页面 interaction |
| 7 | */ |
| 8 | import { WorkData } from '@/icp/reply'; |
| 9 | import { Button, Col, Popconfirm, Row, Tabs, Tooltip } from 'antd'; |
| 10 | import { useCallback, useRef, useState } from 'react'; |
| 11 | import AccountSidebar from '../account/components/AccountSidebar/AccountSidebar'; |
| 12 | import { AliwangwangOutlined, QuestionCircleOutlined } from '@ant-design/icons'; |
| 13 | import InteractionOneKey, { |
| 14 | InteractionOneKeyRef, |
| 15 | } from './components/oneKeyInteraction'; |
| 16 | import { |
| 17 | getCommentSearchNotes, |
| 18 | icpDianzanDyOther, |
| 19 | icpInteractionOneData, |
| 20 | } from '@/icp/replyother'; |
| 21 | |
| 22 | export default function Page() { |
| 23 | const [wordList, setWordList] = useState<WorkData[]>([]); |
| 24 | const [activeAccountId, setActiveAccountId] = useState<number>(-1); |
| 25 | const [pageInfo, setPageInfo] = useState<{ |
| 26 | count: number; |
| 27 | hasMore: boolean; |
| 28 | pcursor?: string; |
| 29 | }>({ |
| 30 | count: 0, |
| 31 | hasMore: false, |
| 32 | }); |
| 33 | const Ref_InteractionOneKey = useRef<InteractionOneKeyRef>(null); |
| 34 | |
| 35 | async function getCreatorList(accountId: number) { |
| 36 | const res = await getCommentSearchNotes(accountId, '哎哟赚', { |
| 37 | ...pageInfo, |
| 38 | postFirstId: '', |
| 39 | }); |
| 40 | |
| 41 | console.log('---- res ----', res); |
| 42 | |
| 43 | setWordList(res.list); |
| 44 | } |
| 45 | |
| 46 | /** |
| 47 | * 单个作品互动 |
| 48 | */ |
| 49 | async function interactionOneData(works: WorkData) { |
| 50 | const res = await icpInteractionOneData(activeAccountId, works, { |
| 51 | commentContent: '不错啊!点赞点赞!', |
| 52 | }); |
| 53 | console.log('----- res ---', res); |
| 54 | } |
| 55 | |
| 56 | /** |
| 57 | * TODO:打开创建自动任务 |
| 58 | * @param data |
| 59 | */ |
| 60 | function openAddAutoRun(data: WorkData) {} |
| 61 | |
| 62 | function commentWorks(works: WorkData) { |
| 63 | console.log('---- interactionOneData ----', works); |
| 64 | } |
| 65 | |
| 66 | async function likeWorks(works: WorkData) { |
| 67 | console.log('---- interactionOneData ----', works); |
| 68 | const res = await icpDianzanDyOther(activeAccountId, works.dataId); |
| 69 | console.log('----- res ---', res); |
| 70 | } |
| 71 | |
| 72 | async function collectWorks(works: WorkData) { |
| 73 | console.log('---- interactionOneData ----', works); |
| 74 | } |
| 75 | |
| 76 | return ( |
| 77 | <div> |
| 78 | <AccountSidebar |
| 79 | activeAccountId={activeAccountId} |
| 80 | onAccountChange={useCallback((info) => { |
| 81 | setWordList([]); |
| 82 | setActiveAccountId(info.id); |
| 83 | getCreatorList(info.id); |
| 84 | }, [])} |
| 85 | /> |
| 86 | |
| 87 | <div className="w-full p-4 text-gray-500"> |
| 88 | <Tabs defaultActiveKey="1" className="w-full"> |
| 89 | <Tabs.TabPane tab="作品列表" key="1"> |
| 90 | <Popconfirm |
| 91 | title="确认进行AI评论截流" |
| 92 | onConfirm={(e?: React.MouseEvent<HTMLElement>) => { |
| 93 | Ref_InteractionOneKey.current?.init(activeAccountId, wordList); |
| 94 | }} |
| 95 | okText="是" |
| 96 | cancelText="否" |
| 97 | > |
| 98 | <AliwangwangOutlined /> |
| 99 | </Popconfirm> |
| 100 | |
| 101 | {activeAccountId === -1 ? ( |
| 102 | <div className="flex items-center justify-center h-[300px]"> |
| 103 | <Tooltip title="请先在左侧侧边栏选择账户"> |
| 104 | <QuestionCircleOutlined className="mr-2 text-3xl" /> |
| 105 | </Tooltip> |
| 106 | 点击左侧账户 |
| 107 | </div> |
| 108 | ) : ( |
| 109 | <div className="grid grid-cols-5 p-4 account-con bg-slate-300"> |
| 110 | {wordList.map((item) => ( |
| 111 | <div |
| 112 | className="bg-white w-[200px] h-[200px] border border-gray-300 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300 m-4" |
| 113 | key={item.dataId} |
| 114 | > |
| 115 | <Row> |
| 116 | <Col span={12}> |
| 117 | <div className="w-[100px] h-[200px]"> |
| 118 | <img |
| 119 | alt="example" |
| 120 | src={item.coverUrl} |
| 121 | className="object-cover w-full h-full rounded" |
| 122 | /> |
| 123 | </div> |
| 124 | </Col> |
| 125 | <Col span={12}> |
| 126 | <div className="flex flex-col h-full"> |
| 127 | <p className="mb-2"> |
| 128 | {item.title && item.title.length > 20 |
| 129 | ? item.title.slice(0, 20) + '...' |
| 130 | : item.title || '无标题'} |
| 131 | </p> |
| 132 | <div className="w-full p-2 mt-auto"> |
| 133 | <Button onClick={() => commentWorks(item)}> |
| 134 | 评论作品 |
| 135 | </Button> |
| 136 | <Button onClick={() => likeWorks(item)}> |
| 137 | 点赞作品 |
| 138 | </Button> |
| 139 | <Button onClick={() => collectWorks(item)}> |
| 140 | 收藏作品 |
| 141 | </Button> |
| 142 | <Tooltip title="自动评论"> |
| 143 | <Button onClick={() => interactionOneData(item)}> |
| 144 | 自动评论 |
| 145 | </Button> |
| 146 | </Tooltip> |
| 147 | </div> |
| 148 | </div> |
| 149 | </Col> |
| 150 | </Row> |
| 151 | </div> |
| 152 | ))} |
| 153 | </div> |
| 154 | )} |
| 155 | |
| 156 | {wordList.length > 0 && ( |
| 157 | <p className="text-center"> |
| 158 | <Button |
| 159 | type="link" |
| 160 | onClick={() => getCreatorList(activeAccountId)} |
| 161 | > |
| 162 | 加载更多 |
| 163 | </Button> |
| 164 | </p> |
| 165 | )} |
| 166 | </Tabs.TabPane> |
| 167 | <Tabs.TabPane tab="自动任务" key="2"> |
| 168 | <div style={{ width: '100%' }}></div> |
| 169 | </Tabs.TabPane> |
| 170 | </Tabs> |
| 171 | </div> |
| 172 | |
| 173 | <InteractionOneKey ref={Ref_InteractionOneKey} /> |
| 174 | </div> |
| 175 | ); |
| 176 | } |
| 177 |