644 lines
26 KiB
TypeScript
644 lines
26 KiB
TypeScript
import Icon from '@ant-design/icons'
|
|
import '@/assets/css/pages/tools/index.scss'
|
|
import {
|
|
DATABASE_DELETE_SUCCESS,
|
|
DATABASE_SELECT_SUCCESS,
|
|
DATABASE_UPDATE_SUCCESS,
|
|
TOOL_CANCEL_SUCCESS,
|
|
TOOL_HAS_BEEN_PUBLISHED,
|
|
TOOL_HAS_UNPUBLISHED_VERSION,
|
|
TOOL_ILLEGAL_VERSION,
|
|
TOOL_NOT_UNDER_REVIEW,
|
|
TOOL_SUBMIT_SUCCESS,
|
|
TOOL_UNDER_REVIEW
|
|
} from '@/constants/common.constants'
|
|
import { checkDesktop } from '@/util/common'
|
|
import { getLoginStatus } from '@/util/auth'
|
|
import { navigateToEdit, navigateToSource, navigateToView } from '@/util/navigation'
|
|
import {
|
|
r_tool_cancel,
|
|
r_tool_delete,
|
|
r_tool_get,
|
|
r_tool_get_favorite,
|
|
r_tool_submit,
|
|
r_tool_upgrade
|
|
} from '@/services/tool'
|
|
import FitFullscreen from '@/components/common/FitFullscreen'
|
|
import HideScrollbar from '@/components/common/HideScrollbar'
|
|
import FlexBox from '@/components/common/FlexBox'
|
|
import RepositoryCard from '@/components/tools/RepositoryCard'
|
|
import LoadMoreCard from '@/components/tools/LoadMoreCard'
|
|
import StoreCard from '@/components/tools/StoreCard'
|
|
import UrlCard from '@/components/common/UrlCard'
|
|
|
|
interface ToolCardProps {
|
|
tools: ToolVo[]
|
|
onDelete?: (tool: ToolVo) => void
|
|
onUpgrade?: (tool: ToolVo) => void
|
|
onSubmit?: (tool: ToolVo) => void
|
|
onCancel?: (tool: ToolVo) => void
|
|
}
|
|
|
|
const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardProps) => {
|
|
const navigate = useNavigate()
|
|
const [selectedTool, setSelectedTool] = useState(tools[0])
|
|
|
|
const handleOnVersionChange = (value: (string | number)[]) => {
|
|
setSelectedTool(tools.find((item) => item.id === value[1])!)
|
|
}
|
|
|
|
const handleOnOpenTool = () => {
|
|
if (checkDesktop() || selectedTool.platform !== 'DESKTOP') {
|
|
navigateToView(
|
|
navigate,
|
|
'!',
|
|
selectedTool.toolId,
|
|
selectedTool.platform,
|
|
selectedTool.ver
|
|
)
|
|
} else {
|
|
void message.warning('此应用需要桌面端环境，请在桌面端打开')
|
|
}
|
|
}
|
|
|
|
const handleOnEditTool = () => {
|
|
if (['NONE', 'REJECT'].includes(selectedTool.review)) {
|
|
return () => {
|
|
if (checkDesktop() || selectedTool.platform !== 'DESKTOP') {
|
|
navigateToEdit(navigate, selectedTool.toolId, selectedTool.platform)
|
|
} else {
|
|
void message.warning('此应用需要桌面端环境，请在桌面端编辑')
|
|
}
|
|
}
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
const handleOnSourceTool = () => {
|
|
if (selectedTool.review === 'PASS') {
|
|
return () => {
|
|
navigateToSource(
|
|
navigate,
|
|
'!',
|
|
selectedTool.toolId,
|
|
selectedTool.platform,
|
|
selectedTool.ver
|
|
)
|
|
}
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
const handleOnPublishTool = () => {
|
|
if (['NONE', 'REJECT'].includes(selectedTool.review)) {
|
|
return () => {
|
|
onSubmit?.(selectedTool)
|
|
}
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
const handleOnCancelReview = () => {
|
|
if (selectedTool.review === 'PROCESSING') {
|
|
return () => {
|
|
onCancel?.(selectedTool)
|
|
}
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
const handleOnDeleteTool = () => {
|
|
onDelete?.(selectedTool)
|
|
}
|
|
|
|
const handleOnUpgradeTool = () => {
|
|
onUpgrade?.(selectedTool)
|
|
}
|
|
|
|
const toolsGroupByPlatform = (tools: ToolVo[]) => {
|
|
interface Node {
|
|
label: string
|
|
value: string
|
|
children?: Node[]
|
|
}
|
|
const temp: Node[] = []
|
|
tools.forEach((value) => {
|
|
if (!temp.length) {
|
|
temp.push({
|
|
label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
|
|
value: value.platform,
|
|
children: [
|
|
{
|
|
label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`,
|
|
value: value.id
|
|
}
|
|
]
|
|
})
|
|
} else {
|
|
if (
|
|
!temp.some((platform, platformIndex) => {
|
|
if (platform.value === value.platform) {
|
|
temp[platformIndex].children!.push({
|
|
label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`,
|
|
value: value.id
|
|
})
|
|
return true
|
|
}
|
|
return false
|
|
})
|
|
) {
|
|
temp.push({
|
|
label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
|
|
value: value.platform,
|
|
children: [
|
|
{
|
|
label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`,
|
|
value: value.id
|
|
}
|
|
]
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
return temp
|
|
}
|
|
|
|
return (
|
|
<RepositoryCard
|
|
icon={selectedTool.icon}
|
|
toolName={selectedTool.name}
|
|
toolId={selectedTool.toolId}
|
|
ver={selectedTool.ver}
|
|
platform={selectedTool.platform}
|
|
onOpen={handleOnOpenTool}
|
|
onEdit={handleOnEditTool()}
|
|
onSource={handleOnSourceTool()}
|
|
onPublish={handleOnPublishTool()}
|
|
onCancelReview={handleOnCancelReview()}
|
|
onDelete={handleOnDeleteTool}
|
|
>
|
|
<AntdCascader
|
|
className={'version-select'}
|
|
size={'small'}
|
|
allowClear={false}
|
|
value={[
|
|
tools.find((value) => value.id === selectedTool.id)!.platform,
|
|
selectedTool.id
|
|
]}
|
|
displayRender={(label: string[]) => `${label[0].slice(0, 1)}-${label[1]}`}
|
|
onChange={handleOnVersionChange}
|
|
options={toolsGroupByPlatform(tools)}
|
|
/>
|
|
{tools
|
|
.filter((value) => value.platform === selectedTool.platform)
|
|
.every((value) => value.review === 'PASS') && (
|
|
<AntdTooltip title={'更新'}>
|
|
<Icon
|
|
component={IconOxygenUpgrade}
|
|
className={'upgrade-bt'}
|
|
onClick={handleOnUpgradeTool}
|
|
/>
|
|
</AntdTooltip>
|
|
)}
|
|
</RepositoryCard>
|
|
)
|
|
}
|
|
|
|
const Tools = () => {
|
|
const navigate = useNavigate()
|
|
const [modal, contextHolder] = AntdModal.useModal()
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const [currentPage, setCurrentPage] = useState(0)
|
|
const [hasNextPage, setHasNextPage] = useState(false)
|
|
const [toolData, setToolData] = useState<ToolVo[]>([])
|
|
const [upgradeForm] = AntdForm.useForm<ToolUpgradeParam>()
|
|
const [currentStarPage, setCurrentStarPage] = useState(0)
|
|
const [hasNextStarPage, setHasNextStarPage] = useState(false)
|
|
const [starToolData, setStarToolData] = useState<ToolVo[]>([])
|
|
|
|
const handleOnDeleteTool = (tool: ToolVo) => {
|
|
modal
|
|
.confirm({
|
|
centered: true,
|
|
maskClosable: true,
|
|
title: '删除',
|
|
content: `确定删除工具 ${tool.toolId}:${tool.platform.slice(0, 1)}${tool.platform.slice(1).toLowerCase()}:${tool.ver} 吗？`
|
|
})
|
|
.then(
|
|
(confirmed) => {
|
|
if (confirmed) {
|
|
setIsLoading(true)
|
|
|
|
void r_tool_delete(tool.id)
|
|
.then((res) => {
|
|
const response = res.data
|
|
if (response.code === DATABASE_DELETE_SUCCESS) {
|
|
void message.success('删除成功')
|
|
getTool(1)
|
|
} else {
|
|
void message.error('删除失败，请稍后重试')
|
|
}
|
|
})
|
|
.finally(() => {
|
|
setIsLoading(false)
|
|
})
|
|
}
|
|
},
|
|
() => {}
|
|
)
|
|
}
|
|
|
|
const handleOnUpgradeTool = (tool: ToolVo) => {
|
|
void modal.confirm({
|
|
centered: true,
|
|
maskClosable: true,
|
|
title: '更新工具',
|
|
footer: (_, { OkBtn, CancelBtn }) => (
|
|
<>
|
|
<OkBtn />
|
|
<CancelBtn />
|
|
</>
|
|
),
|
|
content: (
|
|
<>
|
|
<AntdForm
|
|
form={upgradeForm}
|
|
ref={() => {
|
|
setTimeout(() => {
|
|
upgradeForm?.getFieldInstance('toolId').focus()
|
|
}, 50)
|
|
}}
|
|
labelCol={{ span: 4 }}
|
|
>
|
|
<AntdForm.Item
|
|
initialValue={tool.toolId}
|
|
name={'toolId'}
|
|
label={'工具 ID'}
|
|
style={{ marginTop: 10 }}
|
|
>
|
|
<AntdInput disabled />
|
|
</AntdForm.Item>
|
|
<AntdForm.Item
|
|
initialValue={tool.platform}
|
|
label={'平台'}
|
|
name={'platform'}
|
|
>
|
|
<AntdSelect disabled>
|
|
<AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option>
|
|
<AntdSelect.Option key={'DESKTOP'}>Desktop</AntdSelect.Option>
|
|
<AntdSelect.Option key={'ANDROID'}>Android</AntdSelect.Option>
|
|
</AntdSelect>
|
|
</AntdForm.Item>
|
|
<AntdForm.Item
|
|
name={'ver'}
|
|
label={'版本'}
|
|
rules={[
|
|
{ required: true, whitespace: true },
|
|
{
|
|
pattern: /^\d+\.\d+\.\d+$/,
|
|
message: `格式必须为 '<数字>.<数字>.<数字>', eg. 1.0.3`
|
|
}
|
|
]}
|
|
>
|
|
<AntdInput maxLength={10} showCount placeholder={'请输入版本'} />
|
|
</AntdForm.Item>
|
|
</AntdForm>
|
|
</>
|
|
),
|
|
onOk: () =>
|
|
upgradeForm.validateFields().then(
|
|
() => {
|
|
return new Promise<void>((resolve, reject) => {
|
|
void r_tool_upgrade({
|
|
toolId: tool.toolId,
|
|
ver: upgradeForm.getFieldValue('ver') as string,
|
|
platform: tool.platform
|
|
}).then((res) => {
|
|
const response = res.data
|
|
switch (response.code) {
|
|
case DATABASE_UPDATE_SUCCESS:
|
|
void message.success('创建新版本成功')
|
|
if (
|
|
checkDesktop() ||
|
|
response.data!.platform !== 'DESKTOP'
|
|
) {
|
|
navigateToEdit(
|
|
navigate,
|
|
response.data!.toolId,
|
|
response.data!.platform
|
|
)
|
|
}
|
|
resolve()
|
|
break
|
|
case TOOL_ILLEGAL_VERSION:
|
|
void message.error('版本有误，请重新输入')
|
|
reject()
|
|
break
|
|
case TOOL_UNDER_REVIEW:
|
|
void message.error('更新失败：工具审核中')
|
|
resolve()
|
|
break
|
|
case TOOL_HAS_UNPUBLISHED_VERSION:
|
|
void message.error('更新失败：存在未发布版本')
|
|
resolve()
|
|
break
|
|
default:
|
|
void message.error('更新失败，请稍后重试')
|
|
reject()
|
|
}
|
|
})
|
|
})
|
|
},
|
|
() => {
|
|
return new Promise((_, reject) => {
|
|
reject('未输入版本')
|
|
})
|
|
}
|
|
)
|
|
})
|
|
}
|
|
|
|
const handleOnSubmitTool = (tool: ToolVo) => {
|
|
modal
|
|
.confirm({
|
|
centered: true,
|
|
maskClosable: true,
|
|
title: '提交审核',
|
|
content: `确定提交审核工具 ${tool.name}:${tool.ver} 吗？`
|
|
})
|
|
.then(
|
|
(confirmed) => {
|
|
if (confirmed) {
|
|
setIsLoading(true)
|
|
|
|
void r_tool_submit(tool.id)
|
|
.then((res) => {
|
|
const response = res.data
|
|
switch (response.code) {
|
|
case TOOL_SUBMIT_SUCCESS:
|
|
void message.success('提交审核成功')
|
|
getTool(1)
|
|
break
|
|
case TOOL_UNDER_REVIEW:
|
|
void message.warning('工具审核中，请勿重复提交')
|
|
break
|
|
case TOOL_HAS_BEEN_PUBLISHED:
|
|
void message.warning('工具已发布，请创建新版本')
|
|
break
|
|
default:
|
|
void message.error('提交审核失败，请稍后重试')
|
|
}
|
|
})
|
|
.finally(() => {
|
|
setIsLoading(false)
|
|
})
|
|
}
|
|
},
|
|
() => {}
|
|
)
|
|
}
|
|
|
|
const handleOnCancelTool = (tool: ToolVo) => {
|
|
modal
|
|
.confirm({
|
|
centered: true,
|
|
maskClosable: true,
|
|
title: '取消审核',
|
|
content: `确定取消审核工具 ${tool.name}:${tool.ver} 吗？`
|
|
})
|
|
.then(
|
|
(confirmed) => {
|
|
if (confirmed) {
|
|
setIsLoading(true)
|
|
|
|
void r_tool_cancel(tool.id)
|
|
.then((res) => {
|
|
const response = res.data
|
|
switch (response.code) {
|
|
case TOOL_CANCEL_SUCCESS:
|
|
void message.success('取消审核成功')
|
|
break
|
|
case TOOL_NOT_UNDER_REVIEW:
|
|
void message.warning('工具非审核状态')
|
|
break
|
|
case TOOL_HAS_BEEN_PUBLISHED:
|
|
void message.warning('工具已发布，请创建新版本')
|
|
break
|
|
default:
|
|
void message.error('取消审核失败，请稍后重试')
|
|
}
|
|
})
|
|
.finally(() => {
|
|
setIsLoading(false)
|
|
getTool(1)
|
|
})
|
|
}
|
|
},
|
|
() => {}
|
|
)
|
|
}
|
|
|
|
const handleOnLoadMore = () => {
|
|
if (isLoading) {
|
|
return
|
|
}
|
|
getTool(currentPage + 1)
|
|
}
|
|
|
|
const handleOnLoadMoreStar = () => {
|
|
if (isLoading) {
|
|
return
|
|
}
|
|
getStarTool(currentStarPage + 1)
|
|
}
|
|
|
|
const getTool = (page: number) => {
|
|
if (isLoading) {
|
|
return
|
|
}
|
|
setIsLoading(true)
|
|
void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })
|
|
|
|
void r_tool_get({ currentPage: page })
|
|
.then((res) => {
|
|
const response = res.data
|
|
|
|
switch (response.code) {
|
|
case DATABASE_SELECT_SUCCESS:
|
|
setCurrentPage(response.data!.current)
|
|
if (
|
|
response.data!.current === response.data!.pages ||
|
|
response.data!.total === 0
|
|
) {
|
|
setHasNextPage(false)
|
|
} else {
|
|
setHasNextPage(true)
|
|
}
|
|
if (response.data!.current === 1) {
|
|
setToolData(response.data!.records)
|
|
} else {
|
|
setToolData([...toolData, ...response.data!.records])
|
|
}
|
|
break
|
|
default:
|
|
void message.error('获取工具失败，请稍后重试')
|
|
}
|
|
})
|
|
.finally(() => {
|
|
setIsLoading(false)
|
|
message.destroy('LOADING')
|
|
if (currentStarPage === 0) {
|
|
getStarTool(1)
|
|
}
|
|
})
|
|
}
|
|
|
|
const getStarTool = (page: number) => {
|
|
if (isLoading) {
|
|
return
|
|
}
|
|
setIsLoading(true)
|
|
void message.loading({ content: '加载收藏列表中', key: 'LOADING', duration: 0 })
|
|
|
|
void r_tool_get_favorite({ currentPage: page })
|
|
.then((res) => {
|
|
const response = res.data
|
|
|
|
switch (response.code) {
|
|
case DATABASE_SELECT_SUCCESS:
|
|
setCurrentStarPage(response.data!.current)
|
|
if (
|
|
response.data!.current === response.data!.pages ||
|
|
response.data!.total === 0
|
|
) {
|
|
setHasNextStarPage(false)
|
|
} else {
|
|
setHasNextStarPage(true)
|
|
}
|
|
if (response.data!.current === 1) {
|
|
setStarToolData(response.data!.records)
|
|
} else {
|
|
setStarToolData([...starToolData, ...response.data!.records])
|
|
}
|
|
break
|
|
default:
|
|
void message.error('加载失败，请稍后重试')
|
|
}
|
|
})
|
|
.finally(() => {
|
|
setIsLoading(false)
|
|
message.destroy('LOADING')
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!getLoginStatus()) {
|
|
return
|
|
}
|
|
getTool(1)
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<FitFullscreen data-component={'tools'}>
|
|
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
|
|
<FlexBox direction={'vertical'} className={'root-content'}>
|
|
<FlexBox direction={'horizontal'} className={'own-content'}>
|
|
<UrlCard icon={IconOxygenNewProject} url={'/create'}>
|
|
创建工具
|
|
</UrlCard>
|
|
{toolData &&
|
|
Object.values(
|
|
toolData.reduce((result: Record<string, ToolVo[]>, item) => {
|
|
result[item.toolId] = result[item.toolId] || []
|
|
result[item.toolId].push(item)
|
|
return result
|
|
}, {})
|
|
).map((value) => (
|
|
<ToolCard
|
|
key={JSON.stringify(value)}
|
|
tools={value}
|
|
onDelete={handleOnDeleteTool}
|
|
onUpgrade={handleOnUpgradeTool}
|
|
onSubmit={handleOnSubmitTool}
|
|
onCancel={handleOnCancelTool}
|
|
/>
|
|
))}
|
|
{hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
|
|
</FlexBox>
|
|
{starToolData.length ? (
|
|
<>
|
|
<FlexBox className={'favorite-divider'}>
|
|
<div />
|
|
<div className={'divider-text'}>收藏</div>
|
|
<div />
|
|
</FlexBox>
|
|
<FlexBox direction={'horizontal'} className={'star-content'}>
|
|
{starToolData
|
|
?.reduce((previousValue: ToolVo[], currentValue) => {
|
|
if (
|
|
!previousValue.some(
|
|
(value) =>
|
|
value.author.id ===
|
|
currentValue.author.id &&
|
|
value.toolId === currentValue.toolId
|
|
)
|
|
) {
|
|
previousValue.push(currentValue)
|
|
}
|
|
return previousValue
|
|
}, [])
|
|
.map((item) => {
|
|
const tools = starToolData.filter(
|
|
(value) =>
|
|
value.author.id === item.author.id &&
|
|
value.toolId === item.toolId
|
|
)
|
|
const webTool = tools.find(
|
|
(value) => value.platform === 'WEB'
|
|
)
|
|
const desktopTool = tools.find(
|
|
(value) => value.platform === 'DESKTOP'
|
|
)
|
|
const androidTool = tools.find(
|
|
(value) => value.platform === 'ANDROID'
|
|
)
|
|
const firstTool =
|
|
(checkDesktop()
|
|
? desktopTool || webTool
|
|
: webTool || desktopTool) || androidTool
|
|
|
|
return (
|
|
<StoreCard
|
|
key={firstTool!.id}
|
|
icon={firstTool!.icon}
|
|
toolName={firstTool!.name}
|
|
toolId={firstTool!.toolId}
|
|
toolDesc={firstTool!.description}
|
|
author={firstTool!.author}
|
|
ver={firstTool!.ver}
|
|
platform={firstTool!.platform}
|
|
supportPlatform={tools.map(
|
|
(value) => value.platform
|
|
)}
|
|
favorite={firstTool!.favorite}
|
|
/>
|
|
)
|
|
})}
|
|
{hasNextStarPage && (
|
|
<LoadMoreCard onClick={handleOnLoadMoreStar} />
|
|
)}
|
|
</FlexBox>
|
|
</>
|
|
) : undefined}
|
|
</FlexBox>
|
|
</HideScrollbar>
|
|
</FitFullscreen>
|
|
{contextHolder}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Tools
|