FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Feat(ToolRepository): Add favorite tool list

Browse Source 
Add favorite tool list to user tool repository
This commit is contained in:
Fat Snake
2024-04-28 15:24:23 +08:00
parent 497fb28b5d
commit aa96359f46
7 changed files with 260 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/assets/css/pages/tools/index.scss
View File

@@ -5,6 +5,9 @@
.root-content {
padding: 20px;
gap: 20px;
.own-content {
gap: 20px;
flex-wrap: wrap;
justify-content: flex-start;
@@ -68,4 +71,39 @@
}
}
}
.favorite-divider {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
:first-child, :last-child {
height: 0;
border: {
width: 1px;
color: constants.$divide-color;
style: dashed;
};
}
.divider-text {
flex: 0 0 auto;
font-size: 1.2em;
color: constants.$font-secondary-color;
}
}
.star-content {
gap: 20px;
flex-wrap: wrap;
justify-content: flex-start;
> .card-box {
width: 180px;
height: 290px;
flex: 0 0 auto;
}
}
}
}

43
src/components/tools/StoreCard.tsx
View File

@@ -9,6 +9,7 @@ import { navigateToSource, navigateToStore, navigateToView } from '@/util/naviga
import { r_tool_add_favorite, r_tool_remove_favorite } from '@/services/tool'
import Card from '@/components/common/Card'
import FlexBox from '@/components/common/FlexBox'
import { getUserId } from '@/util/auth.tsx'
interface StoreCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
icon: ReactNode
@@ -16,9 +17,8 @@ interface StoreCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement
toolId: string
toolDesc: string
options?: TiltOptions
authorName?: string
authorAvatar?: string
authorUsername: string
author: UserWithInfoVo
showAuthor?: boolean
ver: string
platform: Platform
supportPlatform: Platform[]
@@ -40,9 +40,8 @@ const StoreCard = ({
['max-glare']: 0.3,
scale: 1.03
},
authorName,
authorAvatar,
authorUsername,
author,
showAuthor = true,
ver,
platform,
supportPlatform,
@@ -53,9 +52,11 @@ const StoreCard = ({
const [modal, contextHolder] = AntdModal.useModal()
const cardRef = useRef<HTMLDivElement>(null)
const [favorite_, setFavorite_] = useState<boolean>(favorite)
const [userId, setUserId] = useState('')
useEffect(() => {
cardRef.current && VanillaTilt.init(cardRef.current, options)
getUserId().then((value) => setUserId(value))
}, [options])
const handleCardOnClick = () => {
@@ -72,7 +73,7 @@ const StoreCard = ({
content: (
<FlexBox className={'android-qrcode'}>
<AntdQRCode
value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
value={`oxygen://openurl/view/${author.username}/${toolId}`}
size={300}
/>
<AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
@@ -81,24 +82,24 @@ const StoreCard = ({
})
return
}
navigateToView(navigate, authorUsername, toolId, platform)
navigateToView(navigate, author.username, toolId, platform)
}
const handleOnClickAuthor = (e: MouseEvent<HTMLDivElement>) => {
e.stopPropagation()
navigateToStore(navigate, authorUsername)
navigateToStore(navigate, author.username)
}
const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
e.stopPropagation()
navigateToSource(navigate, authorUsername, toolId, platform)
navigateToSource(navigate, author.username, toolId, platform)
}
const handleOnStarBtnClick = (e: MouseEvent<HTMLDivElement>) => {
e.stopPropagation()
if (favorite_) {
void r_tool_remove_favorite({
username: authorUsername,
authorId: author.id,
toolId: toolId,
platform: platform
}).then((res) => {
@@ -111,7 +112,7 @@ const StoreCard = ({
})
} else {
void r_tool_add_favorite({
username: authorUsername,
authorId: author.id,
toolId: toolId,
platform: platform
}).then((res) => {
@@ -135,7 +136,7 @@ const StoreCard = ({
content: (
<FlexBox className={'android-qrcode'}>
<AntdQRCode
value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
value={`oxygen://openurl/view/${author.username}/${toolId}`}
size={300}
/>
<AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
@@ -149,7 +150,7 @@ const StoreCard = ({
if (!checkDesktop()) {
void message.loading({ content: '启动桌面端中……', key: 'LOADING', duration: 0 })
protocolCheck(
`oxygen://openurl/view/${authorUsername}/${toolId}`,
`oxygen://openurl/view/${author.username}/${toolId}`,
() => {
void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
void message.destroy('LOADING')
@@ -165,12 +166,12 @@ const StoreCard = ({
)
return
}
navigateToView(navigate, authorUsername, toolId, platform)
navigateToView(navigate, author.username, toolId, platform)
}
const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
e.stopPropagation()
navigateToView(navigate, authorUsername, toolId, platform)
navigateToView(navigate, author.username, toolId, platform)
}
return (
@@ -194,22 +195,22 @@ const StoreCard = ({
<div className={'tool-id'}>{`ID: ${toolId}`}</div>
{toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
</div>
{authorAvatar && authorName && (
{showAuthor && (
<div className={'author'} onClick={handleOnClickAuthor}>
<div className={'avatar'}>
<AntdAvatar
src={
<AntdImage
preview={false}
src={`data:image/png;base64,${authorAvatar}`}
src={`data:image/png;base64,${author.userInfo.avatar}`}
alt={'Avatar'}
/>
}
style={{ background: COLOR_BACKGROUND }}
/>
</div>
<AntdTooltip title={authorUsername}>
<div className={'author-name'}>{authorName}</div>
<AntdTooltip title={author.username}>
<div className={'author-name'}>{author.userInfo.nickname}</div>
</AntdTooltip>
</div>
)}
@@ -238,6 +239,7 @@ const StoreCard = ({
<AntdTooltip title={'源码'}>
<Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
</AntdTooltip>
{author.id !== userId && (
<AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
<Icon
component={favorite_ ? IconOxygenStarFilled : IconOxygenStar}
@@ -245,6 +247,7 @@ const StoreCard = ({
onClick={handleOnStarBtnClick}
/>
</AntdTooltip>
)}
</div>
</FlexBox>
</Card>

2
src/global.d.ts vendored
View File

@@ -650,7 +650,7 @@ interface ToolStoreGetParam extends PageParam {
}
interface ToolFavoriteAddRemoveParam {
username: string
authorId: string
toolId: string
platform: Platform
}

4
src/pages/Tools/Store.tsx
View File

@@ -143,9 +143,7 @@ const Store = () => {
toolName={firstTool!.name}
toolId={firstTool!.toolId}
toolDesc={firstTool!.description}
authorName={firstTool!.author.userInfo.nickname}
authorAvatar={firstTool!.author.userInfo.avatar}
authorUsername={firstTool!.author.username}
author={firstTool!.author}
ver={firstTool!.ver}
platform={firstTool!.platform}
supportPlatform={tools.map((value) => value.platform)}

3
src/pages/Tools/User.tsx
View File

@@ -206,7 +206,8 @@ const User = () => {
toolName={firstTool!.name}
toolId={firstTool!.toolId}
toolDesc={firstTool!.description}
authorUsername={firstTool!.author.username}
author={firstTool!.author}
showAuthor={false}
ver={firstTool!.ver}
platform={firstTool!.platform}
supportPlatform={tools.map((value) => value.platform)}

116
src/pages/Tools/index.tsx
View File

@@ -19,6 +19,7 @@ import {
r_tool_cancel,
r_tool_delete,
r_tool_get,
r_tool_get_favorite,
r_tool_submit,
r_tool_upgrade
} from '@/services/tool'
@@ -27,6 +28,7 @@ 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.tsx'
interface ToolCardProps {
tools: ToolVo[]
@@ -208,6 +210,9 @@ const Tools = () => {
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
@@ -436,6 +441,13 @@ const Tools = () => {
getTool(currentPage + 1)
}
const handleOnLoadMoreStar = () => {
if (loading) {
return
}
getStarTool(currentStarPage + 1)
}
const getTool = (page: number) => {
if (loading) {
return
@@ -468,6 +480,47 @@ const Tools = () => {
void message.error('获取工具失败，请稍后重试')
}
})
.finally(() => {
setLoading(false)
message.destroy('LOADING')
if (currentStarPage === 0) {
getStarTool(1)
}
})
}
const getStarTool = (page: number) => {
if (loading) {
return
}
setLoading(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(() => {
setLoading(false)
message.destroy('LOADING')
@@ -485,7 +538,8 @@ const Tools = () => {
<>
<FitFullscreen data-component={'tools'}>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
<FlexBox direction={'horizontal'} className={'root-content'}>
<FlexBox direction={'vertical'} className={'root-content'}>
<FlexBox direction={'horizontal'} className={'own-content'}>
<RepositoryCard
icon={<Icon component={IconOxygenNewProject} />}
toolName={'创建工具'}
@@ -510,6 +564,66 @@ const Tools = () => {
))}
{hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
</FlexBox>
<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={
<img
src={`data:image/svg+xml;base64,${firstTool!.icon}`}
alt={'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>
</FlexBox>
</HideScrollbar>
</FitFullscreen>
{contextHolder}

7
src/services/tool.tsx
View File

@@ -40,7 +40,10 @@ export const r_tool_store_get_by_username = (username: string, param: ToolStoreG
request.get<PageVo<ToolVo>>(`${URL_TOOL_STORE}/${username}`, param)
export const r_tool_add_favorite = (param: ToolFavoriteAddRemoveParam) =>
request.post(`${URL_TOOL_FAVORITE}`, param)
request.post(URL_TOOL_FAVORITE, param)
export const r_tool_remove_favorite = (param: ToolFavoriteAddRemoveParam) =>
request.delete(`${URL_TOOL_FAVORITE}`, param)
request.delete(URL_TOOL_FAVORITE, param)
export const r_tool_get_favorite = (param: PageParam) =>
request.get<PageVo<ToolVo>>(URL_TOOL_FAVORITE, param)