Feat: store - support multiple platforms

build/resolvers/antd.ts

@@ -149,7 +149,10 @@ const matchComponents: IMatcher[] = [
         pattern: /^Mentions/,
         styleDir: 'mentions'
     },
-
+    {
+        pattern: /^QRCode/,
+        styleDir: 'qr-code'
+    },
     {
         pattern: /^Step/,
         styleDir: 'steps'
@@ -337,6 +340,7 @@ const primitiveNames = [
     'Rate',
     'Result',
     'Row',
+    'QRCode',
     'Select',
     'SelectOptGroup',
     'SelectOption',

package-lock.json

@@ -14,6 +14,7 @@
         "@typescript/ata": "^0.9.4",
         "antd": "^5.13.2",
         "axios": "^1.6.5",
+        "custom-protocol-check": "^1.4.0",
         "dayjs": "^1.11.10",
         "echarts": "^5.4.3",
         "esbuild-wasm": "^0.19.12",
@@ -2900,6 +2901,11 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/custom-protocol-check": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/custom-protocol-check/-/custom-protocol-check-1.4.0.tgz",
+      "integrity": "sha512-eMTyp8AKnE5eo+mKNqG3743eb5ZND5LhBgf9F8BN2tVdhSBnOCHH7me7iTcv0BUDhUW2dBQiHWLWMy776yZW1A=="
+    },
     "node_modules/data-urls": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",

package.json

@@ -7,7 +7,7 @@
     "dev": "vite",
     "dev-host": "vite --host 0.0.0.0",
     "build": "vite build && npm run typecheck",
-    "build-test": "vite build --mode testing",
+    "build-test": "vite build --mode testing && npm run typecheck",
     "typecheck": "tsc",
     "clean": "rimraf dist .eslintrc-auto-import.json auto-imports.d.ts",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -21,6 +21,7 @@
     "@typescript/ata": "^0.9.4",
     "antd": "^5.13.2",
     "axios": "^1.6.5",
+    "custom-protocol-check": "^1.4.0",
     "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
     "esbuild-wasm": "^0.19.12",

src/assets/css/pages/tools/store.scss

@@ -99,10 +99,12 @@
         }
 
         .operation {
+          display: flex;
           position: absolute;
-          top: 6px;
+          top: 10px;
           right: 12px;
           font-size: 1.6em;
+          gap: 4px;
 
           > *:hover {
             color: constants.$font-secondary-color;
@@ -141,4 +143,10 @@
       color: constants.$font-secondary-color;
     }
   }
+
+  .android-qrcode {
+    align-items: center;
+    transform: translateX(-16px);
+    gap: 20px;
+  }
 }

src/assets/css/pages/tools/user.scss

@@ -141,10 +141,12 @@
           }
 
           .operation {
+            display: flex;
             position: absolute;
-            top: 6px;
+            top: 10px;
             right: 12px;
             font-size: 1.6em;
+            gap: 4px;
 
             > *:hover {
               color: constants.$font-secondary-color;
@@ -185,4 +187,10 @@
       }
     }
   }
+
+  .android-qrcode {
+    align-items: center;
+    transform: translateX(-16px);
+    gap: 20px;
+  }
 }

src/assets/svg/browser.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512 885.76a392.2944 392.2944 0 1 1 392.192-392.192A392.6016 392.6016 0 0 1 512 885.76z m0-702.5664A310.3744 310.3744 0 1 0 822.6816 493.568 310.6816 310.6816 0 0 0 512 183.1936z" /><path d="M978.432 263.8848c-22.9376-46.6944-127.2832-36.5568-193.7408-11.3664l29.0816 76.5952c4.3008-1.6384 8.6016-3.1744 12.8-4.5056l-8.704 5.4272c-76.0832 47.0016-187.0848 107.1104-304.64 165.0688S280.2688 604.16 196.7104 636.1088l-2.1504 0.8192-30.72-49.5616C91.136 632.2176 22.4256 674.7136 46.3872 723.1488c9.216 18.8416 26.3168 26.112 48.3328 26.112 34.816 0 81.92-18.0224 131.072-36.5568 87.1424-33.0752 202.0352-84.1728 323.584-144.0768S781.6192 448.7168 860.8768 399.36c72.8064-44.544 141.5168-87.04 117.5552-135.4752zM125.7472 675.0208l24.064-26.624 11.3664 26.624z m739.7376-350.5152a98.304 98.304 0 0 0-18.2272-32.4608 152.1664 152.1664 0 0 1 57.0368-10.24 115.5072 115.5072 0 0 1-38.8096 42.7008z" /></svg>

src/assets/svg/desktop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M810.666667 128H213.333333a128 128 0 0 0-128 128v341.333333a128 128 0 0 0 128 128h256v85.333334H298.666667a42.666667 42.666667 0 0 0 0 85.333333h426.666666a42.666667 42.666667 0 0 0 0-85.333333h-170.666666v-85.333334h256a128 128 0 0 0 128-128V256a128 128 0 0 0-128-128z m42.666666 469.333333a42.666667 42.666667 0 0 1-42.666666 42.666667H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V256a42.666667 42.666667 0 0 1 42.666666-42.666667h597.333334a42.666667 42.666667 0 0 1 42.666666 42.666667z" /></svg>

src/assets/svg/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512 938.715429A426.642286 426.642286 0 1 1 512 85.357714a426.642286 426.642286 0 0 1 0 853.357715z m-42.642286-469.357715v256h85.284572v-256H469.284571z m0-170.642285V384h85.284572V298.715429H469.284571z" /></svg>

src/assets/svg/mobile.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M768 64a64 64 0 0 1 64 64v768a64 64 0 0 1-64 64H256a64 64 0 0 1-64-64V128a64 64 0 0 1 64-64h512z m-32 64H288a32 32 0 0 0-32 32v704a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V160a32 32 0 0 0-32-32z m-223.488 608a48 48 0 1 1 0 96 48 48 0 0 1 0-96z" /></svg>

src/main.tsx

@@ -10,7 +10,10 @@ createRoot(document.getElementById('root')!).render(
     <StrictMode>
         <AntdConfigProvider
             theme={{
-                token: { colorPrimary: COLOR_MAIN, colorLinkHover: COLOR_MAIN },
+                token: {
+                    colorPrimary: COLOR_MAIN,
+                    colorLinkHover: COLOR_MAIN
+                },
                 components: {
                     Tree: {
                         colorBgContainer: 'transparent'

src/pages/Tools/Store.tsx

@@ -1,8 +1,10 @@
 import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode, UIEvent } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import protocolCheck from 'custom-protocol-check'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/tools/store.scss'
-import { COLOR_BACKGROUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { COLOR_BACKGROUND, COLOR_MAIN, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { checkDesktop } from '@/util/common'
 import { r_tool_store_get } from '@/services/tool'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
@@ -16,11 +18,12 @@ interface CommonCardProps
     toolId: string
     toolDesc: string
     options?: TiltOptions
-    url: string
     authorName: string
     authorAvatar: string
     authorUsername: string
     ver: string
+    platform: Platform
+    supportPlatform: Platform[]
 }
 
 const CommonCard = ({
@@ -38,14 +41,16 @@ const CommonCard = ({
         ['max-glare']: 0.3,
         scale: 1.03
     },
-    url,
     authorName,
     authorAvatar,
     authorUsername,
     ver,
+    platform,
+    supportPlatform,
     ...props
 }: CommonCardProps) => {
     const navigate = useNavigate()
+    const [modal, contextHolder] = AntdModal.useModal()
     const cardRef = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
@@ -53,7 +58,31 @@ const CommonCard = ({
     }, [options])
 
     const handleCardOnClick = () => {
-        url && navigate(url)
+        if (!checkDesktop() && platform === 'DESKTOP') {
+            void message.warning('此应用需要桌面端环境，请在桌面端打开')
+            return
+        }
+        if (platform === 'ANDROID') {
+            void modal.info({
+                icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
+                title: 'Android 端',
+                centered: true,
+                maskClosable: true,
+                content: (
+                    <FlexBox className={'android-qrcode'}>
+                        <AntdQRCode
+                            value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
+                            size={300}
+                        />
+                        <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                    </FlexBox>
+                )
+            })
+            return
+        }
+        navigate(
+            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
     }
 
     const handleOnClickAuthor = (e: MouseEvent<HTMLDivElement>) => {
@@ -63,10 +92,65 @@ const CommonCard = ({
 
     const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
-        navigate(`/source/${authorUsername}/${toolId}`)
+        navigate(
+            `/source/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
+    }
+
+    const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        void modal.info({
+            icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
+            title: 'Android 端',
+            centered: true,
+            maskClosable: true,
+            content: (
+                <FlexBox className={'android-qrcode'}>
+                    <AntdQRCode
+                        value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
+                        size={300}
+                    />
+                    <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                </FlexBox>
+            )
+        })
+    }
+
+    const handleOnDesktopBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        if (!checkDesktop()) {
+            void message.loading({ content: '启动桌面端中……', key: 'LOADING', duration: 0 })
+            protocolCheck(
+                `oxygen://openurl/view/${authorUsername}/${toolId}`,
+                () => {
+                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
+                    void message.destroy('LOADING')
+                },
+                () => {
+                    void message.destroy('LOADING')
+                },
+                2000,
+                () => {
+                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
+                    void message.destroy('LOADING')
+                }
+            )
+            return
+        }
+        navigate(
+            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
+    }
+
+    const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        navigate(
+            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
     }
 
     return (
+        <>
             <Card
                 style={{ overflow: 'visible', ...style }}
                 ref={cardRef}
@@ -76,7 +160,9 @@ const CommonCard = ({
                 <FlexBox className={'common-card'}>
                     <div className={'icon'}>{icon}</div>
                     <div className={'version'}>
-                    <AntdTag>V{ver}</AntdTag>
+                        <AntdTag>
+                            {platform.slice(0, 1)}-{ver}
+                        </AntdTag>
                     </div>
                     <div className={'info'}>
                         <div className={'tool-name'}>{toolName}</div>
@@ -101,12 +187,35 @@ const CommonCard = ({
                         </AntdTooltip>
                     </div>
                     <div className={'operation'}>
+                        {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
+                            <AntdTooltip title={'Android 端'}>
+                                <Icon
+                                    component={IconOxygenMobile}
+                                    onClick={handleOnAndroidBtnClick}
+                                />
+                            </AntdTooltip>
+                        )}
+                        {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
+                            <AntdTooltip title={'Web 端'}>
+                                <Icon component={IconOxygenBrowser} onClick={handleOnWebBtnClick} />
+                            </AntdTooltip>
+                        )}
+                        {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
+                            <AntdTooltip title={'桌面端'}>
+                                <Icon
+                                    component={IconOxygenDesktop}
+                                    onClick={handleOnDesktopBtnClick}
+                                />
+                            </AntdTooltip>
+                        )}
                         <AntdTooltip title={'源码'}>
                             <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
                         </AntdTooltip>
                     </div>
                 </FlexBox>
             </Card>
+            {contextHolder}
+        </>
     )
 }
 
@@ -231,25 +340,58 @@ const Store = () => {
                     </div>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         {!toolData.length && <div className={'no-tool'}>未找到任何工具</div>}
-                        {toolData?.map((value) => (
+                        {toolData
+                            ?.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 = toolData.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 (
                                     <CommonCard
-                                key={value.id}
+                                        key={firstTool!.id}
                                         icon={
                                             <img
-                                        src={`data:image/svg+xml;base64,${value.icon}`}
+                                                src={`data:image/svg+xml;base64,${firstTool!.icon}`}
                                                 alt={'Icon'}
                                             />
                                         }
-                                toolName={value.name}
+                                        toolName={firstTool!.name}
-                                toolId={value.toolId}
+                                        toolId={firstTool!.toolId}
-                                toolDesc={value.description}
+                                        toolDesc={firstTool!.description}
-                                url={`/view/${value.author.username}/${value.toolId}`}
+                                        authorName={firstTool!.author.userInfo.nickname}
-                                authorName={value.author.userInfo.nickname}
+                                        authorAvatar={firstTool!.author.userInfo.avatar}
-                                authorAvatar={value.author.userInfo.avatar}
+                                        authorUsername={firstTool!.author.username}
-                                authorUsername={value.author.username}
+                                        ver={firstTool!.ver}
-                                ver={value.ver}
+                                        platform={firstTool!.platform}
+                                        supportPlatform={tools.map((value) => value.platform)}
                                     />
-                        ))}
+                                )
+                            })}
                         {hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
                     </FlexBox>
                 </HideScrollbar>

src/pages/Tools/User.tsx

@@ -1,12 +1,15 @@
 import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import protocolCheck from 'custom-protocol-check'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/tools/user.scss'
 import {
     COLOR_BACKGROUND,
+    COLOR_MAIN,
     DATABASE_NO_RECORD_FOUND,
     DATABASE_SELECT_SUCCESS
 } from '@/constants/common.constants'
+import { checkDesktop } from '@/util/common'
 import { r_sys_user_info_get_basic } from '@/services/system'
 import { r_tool_store_get_by_username } from '@/services/tool'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -21,9 +24,10 @@ interface CommonCardProps
     toolId: string
     toolDesc: string
     options?: TiltOptions
-    url: string
     authorUsername: string
     ver: string
+    platform: Platform
+    supportPlatform: Platform[]
 }
 
 const CommonCard = ({
@@ -41,12 +45,14 @@ const CommonCard = ({
         ['max-glare']: 0.3,
         scale: 1.03
     },
-    url,
     authorUsername,
     ver,
+    platform,
+    supportPlatform,
     ...props
 }: CommonCardProps) => {
     const navigate = useNavigate()
+    const [modal, contextHolder] = AntdModal.useModal()
     const cardRef = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
@@ -54,15 +60,94 @@ const CommonCard = ({
     }, [options])
 
     const handleCardOnClick = () => {
-        url && navigate(url)
+        if (!checkDesktop() && platform === 'DESKTOP') {
+            void message.warning('此应用需要桌面端环境，请在桌面端打开')
+            return
+        }
+        if (platform === 'ANDROID') {
+            void modal.info({
+                icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
+                title: 'Android 端',
+                centered: true,
+                maskClosable: true,
+                content: (
+                    <FlexBox className={'android-qrcode'}>
+                        <AntdQRCode
+                            value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
+                            size={300}
+                        />
+                        <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                    </FlexBox>
+                )
+            })
+            return
+        }
+        navigate(
+            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
     }
 
     const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
-        navigate(`/source/${authorUsername}/${toolId}`)
+        navigate(
+            `/source/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
+    }
+
+    const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        void modal.info({
+            icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
+            title: 'Android 端',
+            centered: true,
+            maskClosable: true,
+            content: (
+                <FlexBox className={'android-qrcode'}>
+                    <AntdQRCode
+                        value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
+                        size={300}
+                    />
+                    <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                </FlexBox>
+            )
+        })
+    }
+
+    const handleOnDesktopBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        if (!checkDesktop()) {
+            void message.loading({ content: '启动桌面端中……', key: 'LOADING', duration: 0 })
+            protocolCheck(
+                `oxygen://openurl/view/${authorUsername}/${toolId}`,
+                () => {
+                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
+                    void message.destroy('LOADING')
+                },
+                () => {
+                    void message.destroy('LOADING')
+                },
+                2000,
+                () => {
+                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
+                    void message.destroy('LOADING')
+                }
+            )
+            return
+        }
+        navigate(
+            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
+    }
+
+    const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        navigate(
+            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
     }
 
     return (
+        <>
             <Card
                 style={{ overflow: 'visible', ...style }}
                 ref={cardRef}
@@ -72,7 +157,9 @@ const CommonCard = ({
                 <FlexBox className={'common-card'}>
                     <div className={'icon'}>{icon}</div>
                     <div className={'version'}>
-                    <AntdTag>V{ver}</AntdTag>
+                        <AntdTag>
+                            {platform.slice(0, 1)}-{ver}
+                        </AntdTag>
                     </div>
                     <div className={'info'}>
                         <div className={'tool-name'}>{toolName}</div>
@@ -80,12 +167,35 @@ const CommonCard = ({
                         {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
                     </div>
                     <div className={'operation'}>
+                        {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
+                            <AntdTooltip title={'Android 端'}>
+                                <Icon
+                                    component={IconOxygenMobile}
+                                    onClick={handleOnAndroidBtnClick}
+                                />
+                            </AntdTooltip>
+                        )}
+                        {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
+                            <AntdTooltip title={'Web 端'}>
+                                <Icon component={IconOxygenBrowser} onClick={handleOnWebBtnClick} />
+                            </AntdTooltip>
+                        )}
+                        {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
+                            <AntdTooltip title={'桌面端'}>
+                                <Icon
+                                    component={IconOxygenDesktop}
+                                    onClick={handleOnDesktopBtnClick}
+                                />
+                            </AntdTooltip>
+                        )}
                         <AntdTooltip title={'源码'}>
                             <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
                         </AntdTooltip>
                     </div>
                 </FlexBox>
             </Card>
+            {contextHolder}
+        </>
     )
 }
 
@@ -266,23 +376,56 @@ const User = () => {
                             {!toolData.length && (
                                 <div className={'no-tool'}>该开发者暂未发布任何工具</div>
                             )}
-                            {toolData?.map((value) => (
+                            {toolData
+                                ?.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 = toolData.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 (
                                         <CommonCard
-                                    key={value.id}
+                                            key={firstTool!.id}
                                             icon={
                                                 <img
-                                            src={`data:image/svg+xml;base64,${value.icon}`}
+                                                    src={`data:image/svg+xml;base64,${firstTool!.icon}`}
                                                     alt={'Icon'}
                                                 />
                                             }
-                                    toolName={value.name}
+                                            toolName={firstTool!.name}
-                                    toolId={value.toolId}
+                                            toolId={firstTool!.toolId}
-                                    toolDesc={value.description}
+                                            toolDesc={firstTool!.description}
-                                    url={`/view/${value.author.username}/${value.toolId}`}
+                                            authorUsername={firstTool!.author.username}
-                                    authorUsername={value.author.username}
+                                            ver={firstTool!.ver}
-                                    ver={value.ver}
+                                            platform={firstTool!.platform}
+                                            supportPlatform={tools.map((value) => value.platform)}
                                         />
-                            ))}
+                                    )
+                                })}
                             {hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
                         </FlexBox>
                     </Card>