index.tsx - AiToEarn

index.tsx

1	/**
2	* PlatParamsSetting - 平台参数设置组件
3	* 根据平台类型显示对应的参数设置表单
4	*/
5	import type { CSSProperties, ForwardedRef } from 'react'
6	import type { PubItem } from '@/components/PublishDialog/publishDialog.type'
7	import { forwardRef, memo, useMemo } from 'react'
8
9	import { useShallow } from 'zustand/react/shallow'
10	import { PlatType } from '@/app/config/platConfig'
11	import { useTransClient } from '@/app/i18n/client'
12	import { PlatformIcon } from '@/components/common/PlatformIcon'
13	import BilibParams from '@/components/PublishDialog/compoents/PlatParamsSetting/plats/BilibParams'
14	import FacebookParams from '@/components/PublishDialog/compoents/PlatParamsSetting/plats/FacebookParams'
15	import InstagramParams from '@/components/PublishDialog/compoents/PlatParamsSetting/plats/InstagramParams'
16	import KwaiParams from '@/components/PublishDialog/compoents/PlatParamsSetting/plats/KwaiParams'
17	import PinterestParams from '@/components/PublishDialog/compoents/PlatParamsSetting/plats/PinterestParams'
18	import ThreadsParams from '@/components/PublishDialog/compoents/PlatParamsSetting/plats/ThreadsParams'
19	import TikTokParams from '@/components/PublishDialog/compoents/PlatParamsSetting/plats/TikTokParams'
20	import WxGzhParams from '@/components/PublishDialog/compoents/PlatParamsSetting/plats/WxGzhParams'
21	import YouTubeParams from '@/components/PublishDialog/compoents/PlatParamsSetting/plats/YouTubeParams'
22	import { usePublishDialog } from '@/components/PublishDialog/usePublishDialog'
23	import { usePlatformInfo } from '@/hooks/usePlatformMetadata'
24	import { cn } from '@/utils/className'
25	import DouyinParams from './plats/DouyinParams'
26	import TwitterParams from './plats/TwitterParams'
27	import WxSphParams from './plats/WxSphParams'
28	import XhsParams from './plats/XhsParams'
29
30	export interface IPlatParamsSettingRef {}
31
32	export interface IPlatParamsSettingProps {
33	pubItem: PubItem
34	style?: CSSProperties
35	// 是否为移动端
36	isMobile?: boolean
37	}
38
39	const PlatParamsSetting = memo(
40	forwardRef(
41	(
42	{ pubItem, style, isMobile }: IPlatParamsSettingProps,
43	ref: ForwardedRef<IPlatParamsSettingRef>,
44	) => {
45	const { expandedPubItem, step, setExpandedPubItem } = usePublishDialog(
46	useShallow(state => ({
47	expandedPubItem: state.expandedPubItem,
48	step: state.step,
49	setExpandedPubItem: state.setExpandedPubItem,
50	})),
51	)
52	const { t } = useTransClient('publish')
53	const platConfig = usePlatformInfo(pubItem.account.type)
54
55	const PlatItemComp = useMemo(() => {
56	switch (pubItem.account.type) {
57	case PlatType.KWAI:
58	return (
59	<KwaiParams pubItem={pubItem} isMobile={isMobile} />
60	)
61	case PlatType.BILIBILI:
62	return (
63	<BilibParams pubItem={pubItem} isMobile={isMobile} />
64	)
65	case PlatType.WxGzh:
66	return (
67	<WxGzhParams pubItem={pubItem} isMobile={isMobile} />
68	)
69	case PlatType.Facebook:
70	return (
71	<FacebookParams
72	pubItem={pubItem}
73	isMobile={isMobile}
74	/>
75	)
76	case PlatType.Instagram:
77	return (
78	<InstagramParams
79	pubItem={pubItem}
80	isMobile={isMobile}
81	/>
82	)
83	case PlatType.YouTube:
84	return (
85	<YouTubeParams
86	pubItem={pubItem}
87	isMobile={isMobile}
88	/>
89	)
90	case PlatType.Pinterest:
91	return (
92	<PinterestParams
93	pubItem={pubItem}
94	isMobile={isMobile}
95	/>
96	)
97	case PlatType.Tiktok:
98	return (
99	<TikTokParams pubItem={pubItem} isMobile={isMobile} />
100	)
101	case PlatType.Threads:
102	return (
103	<ThreadsParams
104	pubItem={pubItem}
105	isMobile={isMobile}
106	/>
107	)
108	case PlatType.Douyin:
109	return (
110	<DouyinParams pubItem={pubItem} isMobile={isMobile} />
111	)
112	case PlatType.Xhs:
113	return (
114	<XhsParams pubItem={pubItem} isMobile={isMobile} />
115	)
116	case PlatType.WxSph:
117	return (
118	<WxSphParams pubItem={pubItem} isMobile={isMobile} />
119	)
120	case PlatType.Twitter:
121	return (
122	<TwitterParams pubItem={pubItem} isMobile={isMobile} />
123	)
124	default:
125	return (
126	<KwaiParams pubItem={pubItem} isMobile={isMobile} />
127	)
128	}
129	}, [pubItem, isMobile])
130
131	// true=展开当前账号的参数设置 false=不展开
132	const isExpand = useMemo(() => {
133	if (step === 0)
134	return true
135	return expandedPubItem?.account.id === pubItem.account.id
136	}, [expandedPubItem, pubItem, step])
137
138	// 检查描述是否超过最大长度
139	const isTextOverflow = Boolean(platConfig && platConfig.commonPubParamsConfig.desMax < pubItem.params.des.length)
140
141	return (
142	<div
143	className={cn(!isExpand && 'flex items-center')}
144	onClick={e => e.stopPropagation()}
145	style={style}
146	>
147	<div className="flex w-full min-w-0">
148	{/* 平台图标 */}
149	<div className="mt-[5px] mr-2.5 shrink-0">
150	<PlatformIcon
151	platform={pubItem.account.type}
152	className="w-[25px] h-[25px] rounded-full"
153	width={25}
154	height={25}
155	/>
156	</div>
157
158	{isExpand ? (
159	PlatItemComp
160	) : (
161	<div
162	className={cn(
163	'w-full min-w-0 border border-border rounded h-10',
164	'cursor-pointer flex items-center px-4 text-foreground',
165	'hover:border-primary/50 transition-colors',
166	)}
167	onClick={() => {
168	setExpandedPubItem(pubItem)
169	}}
170	>
171	<p
172	className={cn(
173	'whitespace-nowrap overflow-hidden text-ellipsis',
174	isTextOverflow && 'bg-destructive/10',
175	)}
176	>
177	{pubItem.params.des ? (
178	pubItem.params.des
179	) : (
180	<span className="text-muted-foreground">
181	{t('form.descriptionPlaceholder')}
182	...
183	</span>
184	)}
185	</p>
186	</div>
187	)}
188	</div>
189	</div>
190	)
191	},
192	),
193	)
194
195	export default PlatParamsSetting
196

196 lines Plain Text