Feat(ToolRepository): Add favorite tool list

Add favorite tool list to user tool repository

src/renderer/src/assets/css/pages/tools/index.scss

@@ -5,66 +5,104 @@
   .root-content {
     padding: 20px;
     gap: 20px;
-    flex-wrap: wrap;
-    justify-content: flex-start;
 
-    > .card-box {
+    .own-content {
-      width: 180px;
+      gap: 20px;
-      height: 290px;
+      flex-wrap: wrap;
-      flex: 0 0 auto;
+      justify-content: flex-start;
-    }
 
-
+      > .card-box {
-    & > :first-child {
+        width: 180px;
-      cursor: pointer;
+        height: 290px;
-
+        flex: 0 0 auto;
-      .info {
-        padding-top: 50px;
-      }
-    }
-
-    & > :not(:first-child) {
-      .info {
-        transform: translateY(40px);
-        transition: all 0.1s ease;
       }
 
-      .operation {
-        display: flex;
-        flex: 1;
-        justify-content: center;
-        padding-bottom: 20px;
-        gap: 4px;
-        width: 70%;
-        flex-direction: column;
-        align-items: center;
-        visibility: hidden;
-        opacity: 0;
 
-        > *, .edit > * {
+      & > :first-child {
-          width: 100%;
+        cursor: pointer;
+
+        .info {
+          padding-top: 50px;
+        }
+      }
+
+      & > :not(:first-child) {
+        .info {
+          transform: translateY(40px);
+          transition: all 0.1s ease;
         }
 
-        .edit {
+        .operation {
-          > * {
+          display: flex;
-            > :first-child {
+          flex: 1;
-              flex: 1;
+          justify-content: center;
+          padding-bottom: 20px;
+          gap: 4px;
+          width: 70%;
+          flex-direction: column;
+          align-items: center;
+          visibility: hidden;
+          opacity: 0;
+
+          > *, .edit > * {
+            width: 100%;
+          }
+
+          .edit {
+            > * {
+              > :first-child {
+                flex: 1;
+              }
             }
           }
         }
       }
+
+      & > :not(:first-child):hover {
+        .info {
+          transform: translateY(-10px);
+          transition: all 0.2s ease;
+        }
+
+        .operation {
+          visibility: visible;
+          opacity: 1;
+          transition: all 0.4s ease;
+        }
+      }
     }
 
-    & > :not(:first-child):hover {
+    .favorite-divider {
-      .info {
+      display: flex;
-        transform: translateY(-10px);
+      flex-direction: row;
-        transition: all 0.2s ease;
+      align-items: center;
+      gap: 20px;
+
+      :first-child, :last-child {
+        height: 0;
+        border: {
+          width: 1px;
+          color: constants.$divide-color;
+          style: dashed;
+        };
       }
 
-      .operation {
+      .divider-text {
-        visibility: visible;
+        flex: 0 0 auto;
-        opacity: 1;
+        font-size: 1.2em;
-        transition: all 0.4s ease;
+        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;
       }
     }
   }

src/renderer/src/components/tools/StoreCard.tsx

@@ -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
+    author: UserWithInfoVo
-    authorAvatar?: string
+    showAuthor?: boolean
-    authorUsername: string
     ver: string
     platform: Platform
     supportPlatform: Platform[]
@@ -40,9 +40,8 @@ const StoreCard = ({
         ['max-glare']: 0.3,
         scale: 1.03
     },
-    authorName,
+                       author,
-    authorAvatar,
+                       showAuthor = true,
-    authorUsername,
     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}>
+                            <AntdTooltip title={author.username}>
-                                <div className={'author-name'}>{authorName}</div>
+                                <div className={'author-name'}>{author.userInfo.nickname}</div>
                             </AntdTooltip>
                         </div>
                     )}
@@ -238,13 +239,15 @@ const StoreCard = ({
                         <AntdTooltip title={'源码'}>
                             <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
                         </AntdTooltip>
-                        <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
+                        {author.id !== userId && (
-                            <Icon
+                            <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
-                                component={favorite_ ? IconOxygenStarFilled : IconOxygenStar}
+                                <Icon
-                                style={{ color: favorite_ ? COLOR_PRODUCTION : undefined }}
+                                    component={favorite_ ? IconOxygenStarFilled : IconOxygenStar}
-                                onClick={handleOnStarBtnClick}
+                                    style={{ color: favorite_ ? COLOR_PRODUCTION : undefined }}
-                            />
+                                    onClick={handleOnStarBtnClick}
-                        </AntdTooltip>
+                                />
+                            </AntdTooltip>
+                        )}
                     </div>
                 </FlexBox>
             </Card>

src/renderer/src/global.d.ts

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

src/renderer/src/pages/Tools/Store.tsx

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

src/renderer/src/pages/Tools/User.tsx

@@ -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)}

src/renderer/src/pages/Tools/index.tsx

@@ -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,30 +538,91 @@ const Tools = () => {
         <>
             <FitFullscreen data-component={'tools'}>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
-                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                    <FlexBox direction={'vertical'} className={'root-content'}>
-                        <RepositoryCard
+                        <FlexBox direction={'horizontal'} className={'own-content'}>
-                            icon={<Icon component={IconOxygenNewProject} />}
+                            <RepositoryCard
-                            toolName={'创建工具'}
+                                icon={<Icon component={IconOxygenNewProject} />}
-                            url={'/create'}
+                                toolName={'创建工具'}
-                        />
+                                url={'/create'}
-                        {toolData &&
+                            />
-                            Object.values(
+                            {toolData &&
-                                toolData.reduce((result: Record<string, ToolVo[]>, item) => {
+                                Object.values(
-                                    result[item.toolId] = result[item.toolId] || []
+                                    toolData.reduce((result: Record<string, ToolVo[]>, item) => {
-                                    result[item.toolId].push(item)
+                                        result[item.toolId] = result[item.toolId] || []
-                                    return result
+                                        result[item.toolId].push(item)
-                                }, {})
+                                        return result
-                            ).map((value) => (
+                                    }, {})
-                                <ToolCard
+                                ).map((value) => (
-                                    key={JSON.stringify(value)}
+                                    <ToolCard
-                                    tools={value}
+                                        key={JSON.stringify(value)}
-                                    onDelete={handleOnDeleteTool}
+                                        tools={value}
-                                    onUpgrade={handleOnUpgradeTool}
+                                        onDelete={handleOnDeleteTool}
-                                    onSubmit={handleOnSubmitTool}
+                                        onUpgrade={handleOnUpgradeTool}
-                                    onCancel={handleOnCancelTool}
+                                        onSubmit={handleOnSubmitTool}
-                                />
+                                        onCancel={handleOnCancelTool}
-                            ))}
+                                    />
-                        {hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
+                                ))}
+                            {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>

src/renderer/src/services/tool.tsx

@@ -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)