src/assets/svg/star.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1151 1024"><path d="M1056.069394 342.982943L763.905526 300.38821 633.321676 35.620955c-23.397106-47.194163-91.188723-47.794089-114.785804 0L387.952021 300.38821 95.788154 342.982943c-52.39352 7.59906-73.390924 72.191072-35.395623 109.186496l211.373859 205.974527-49.993817 290.964016c-8.998887 52.593496 46.394262 91.988624 92.788525 67.391666L575.928774 879.116638l261.367676 137.38301c46.394262 24.396983 101.787412-14.79817 92.788525-67.391666l-49.993818-290.964016 211.373859-205.974527c37.995301-36.995425 16.997898-101.587436-35.395622-109.186496zM777.103894 624.548121l47.394139 276.765772L575.928774 770.730042l-248.569259 130.583851 47.394139-276.765772-201.175121-195.975763 277.965624-40.395005 124.384617-251.968838 124.384617 251.968838 277.965623 40.395005-201.17512 195.975763z" /></svg>

src/assets/svg/starFilled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1151 1024"><path d="M518.535872 35.620955L387.952021 300.38821 95.788154 342.982943c-52.39352 7.59906-73.390924 72.191072-35.395623 109.186496l211.373859 205.974527-49.993817 290.964016c-8.998887 52.593496 46.394262 91.988624 92.788525 67.391666L575.928774 879.116638l261.367676 137.38301c46.394262 24.396983 101.787412-14.79817 92.788525-67.391666l-49.993818-290.964016 211.373859-205.974527c37.995301-36.995425 16.997898-101.587436-35.395622-109.186496L763.905526 300.38821 633.321676 35.620955c-23.397106-47.194163-91.188723-47.794089-114.785804 0z" /></svg>

src/constants/common.constants.ts

@@ -1,6 +1,7 @@
 export const PRODUCTION_NAME = 'Oxygen Toolbox'
 export const STORAGE_TOKEN_KEY = 'JWT_TOKEN'
 export const STORAGE_USER_INFO_KEY = 'USER_INFO'
+export const STORAGE_FAVORITE_KEY = 'FAVORITE'
 export const COLOR_ORIGIN = 'white'
 export const COLOR_PRODUCTION = '#4E47BB'
 export const COLOR_MAIN = COLOR_PRODUCTION
@@ -77,6 +78,7 @@ export const DATABASE_DELETE_FILED = 30035
 export const DATABASE_EXECUTE_ERROR = 30050
 export const DATABASE_DUPLICATE_KEY = 30051
 export const DATABASE_NO_RECORD_FOUND = 30052
+export const DATABASE_RECORD_ALREADY_EXISTS = 30053
 
 export const TOOL_SUBMIT_SUCCESS = 40010
 export const TOOL_CANCEL_SUCCESS = 40011

src/constants/urls.constants.ts

@@ -38,6 +38,7 @@ export const URL_TOOL_STORE = `${URL_TOOL}/store`
 export const URL_TOOL_TEMPLATE = `${URL_TOOL}/template`
 export const URL_TOOL_CATEGORY = `${URL_TOOL}/category`
 export const URL_TOOL_DETAIL = `${URL_TOOL}/detail`
+export const URL_TOOL_FAVORITE = `${URL_TOOL}/favorite`
 
 export const URL_API_V1 = '/api/v1'
 export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`

src/global.d.ts

@@ -604,6 +604,7 @@ interface ToolVo {
     review: 'NONE' | 'PROCESSING' | 'PASS' | 'REJECT'
     createTime: string
     updateTime: string
+    favorite: boolean
 }
 
 interface ToolCreateParam {
@@ -647,3 +648,9 @@ interface ToolManagementPassParam {
 interface ToolStoreGetParam extends PageParam {
     searchValue?: string
 }
+
+interface ToolFavoriteAddRemoveParam {
+    username: string
+    toolId: string
+    platform: Platform
+}

src/pages/Tools/Store.tsx

@@ -3,10 +3,15 @@ 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, COLOR_MAIN, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import {
+    COLOR_BACKGROUND,
+    COLOR_MAIN,
+    COLOR_PRODUCTION,
+    DATABASE_SELECT_SUCCESS
+} from '@/constants/common.constants'
 import { checkDesktop } from '@/util/common'
 import { navigateToSource, navigateToStore, navigateToView } from '@/util/navigation'
-import { r_tool_store_get } from '@/services/tool'
+import { r_tool_add_favorite, r_tool_remove_favorite, r_tool_store_get } from '@/services/tool'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -25,6 +30,7 @@ interface CommonCardProps
     ver: string
     platform: Platform
     supportPlatform: Platform[]
+    favorite: boolean
 }
 
 const CommonCard = ({
@@ -48,11 +54,13 @@ const CommonCard = ({
     ver,
     platform,
     supportPlatform,
+    favorite,
     ...props
 }: CommonCardProps) => {
     const navigate = useNavigate()
     const [modal, contextHolder] = AntdModal.useModal()
     const cardRef = useRef<HTMLDivElement>(null)
+    const [favorite_, setFavorite_] = useState<boolean>(favorite)
 
     useEffect(() => {
         cardRef.current && VanillaTilt.init(cardRef.current, options)
@@ -94,6 +102,37 @@ const CommonCard = ({
         navigateToSource(navigate, authorUsername, toolId, platform)
     }
 
+    const handleOnStarBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        if (favorite_) {
+            void r_tool_remove_favorite({
+                username: authorUsername,
+                toolId: toolId,
+                platform: platform
+            }).then((res) => {
+                const response = res.data
+                if (response.success) {
+                    setFavorite_(false)
+                } else {
+                    void message.error('取消收藏失败，请稍后重试')
+                }
+            })
+        } else {
+            void r_tool_add_favorite({
+                username: authorUsername,
+                toolId: toolId,
+                platform: platform
+            }).then((res) => {
+                const response = res.data
+                if (response.success) {
+                    setFavorite_(true)
+                } else {
+                    void message.error('收藏失败，请稍后重试')
+                }
+            })
+        }
+    }
+
     const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
         void modal.info({
@@ -204,6 +243,13 @@ const CommonCard = ({
                         <AntdTooltip title={'源码'}>
                             <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
                         </AntdTooltip>
+                        <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
+                            <Icon
+                                component={favorite_ ? IconOxygenStarFilled : IconOxygenStar}
+                                style={{ color: favorite_ ? COLOR_PRODUCTION : undefined }}
+                                onClick={handleOnStarBtnClick}
+                            />
+                        </AntdTooltip>
                     </div>
                 </FlexBox>
             </Card>
@@ -382,6 +428,7 @@ const Store = () => {
                                         ver={firstTool!.ver}
                                         platform={firstTool!.platform}
                                         supportPlatform={tools.map((value) => value.platform)}
+                                        favorite={firstTool!.favorite}
                                     />
                                 )
                             })}

src/services/tool.tsx

@@ -3,6 +3,7 @@ import {
     URL_TOOL,
     URL_TOOL_CATEGORY,
     URL_TOOL_DETAIL,
+    URL_TOOL_FAVORITE,
     URL_TOOL_STORE,
     URL_TOOL_TEMPLATE
 } from '@/constants/urls.constants'
@@ -37,3 +38,9 @@ export const r_tool_store_get = (param: ToolStoreGetParam) =>
 
 export const r_tool_store_get_by_username = (username: string, param: ToolStoreGetParam) =>
     request.get<PageVo<ToolVo>>(`${URL_TOOL_STORE}/${username}`, param)
+
+export const r_tool_add_favorite = (param: ToolFavoriteAddRemoveParam) =>
+    request.post(`${URL_TOOL_FAVORITE}`, param)
+
+export const r_tool_remove_favorite = (param: ToolFavoriteAddRemoveParam) =>
+    request.delete(`${URL_TOOL_FAVORITE}`, param)