From 751d878a46f4d77f02a5e7483a8f8869e8a525da Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 17 Feb 2024 14:27:36 +0800
Subject: [PATCH] Add store page (temp)

---
 src/constants/urls.constants.ts |   1 +
 src/global.d.ts                 |   4 +
 src/pages/Tools/Store.tsx       | 150 +++++++++++++++++++++++++++++++-
 src/services/tool.tsx           |   4 +
 4 files changed, 158 insertions(+), 1 deletion(-)

diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index b285d75..ae9b637 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -31,6 +31,7 @@ export const URL_SYS_TOOL_BASE = `${URL_SYS_TOOL}/base`
 export const URL_SYS_TOOL_TEMPLATE = `${URL_SYS_TOOL}/template`
 
 export const URL_TOOL = '/tool'
+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`
diff --git a/src/global.d.ts b/src/global.d.ts
index 99eb5ab..e543e28 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -597,3 +597,7 @@ interface ToolManagementGetParam extends PageParam {
 interface ToolManagementPassParam {
     dist: string
 }
+
+interface ToolStoreGetParam extends PageParam {
+    searchValue?: string
+}
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index 34bdf42..04ce990 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -1,5 +1,153 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode, useEffect, useState } from 'react'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import Card from '@/components/common/Card.tsx'
+import FlexBox from '@/components/common/FlexBox.tsx'
+import Icon from '@ant-design/icons'
+import { COLOR_BACKGROUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import FitFullscreen from '@/components/common/FitFullscreen.tsx'
+import HideScrollbar from '@/components/common/HideScrollbar.tsx'
+import { r_tool_store_get } from '@/services/tool.tsx'
+
+interface CommonCardProps
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: ReactNode
+    toolName: string
+    toolId: string
+    options?: TiltOptions
+    url: string
+    authorName: string
+    authorAvatar: string
+    authorUsername: string
+    ver: string
+}
+
+const CommonCard = ({
+    style,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ref,
+    icon,
+    toolName,
+    toolId,
+    options = {
+        reverse: true,
+        max: 8,
+        glare: true,
+        ['max-glare']: 0.3,
+        scale: 1.03
+    },
+    url,
+    authorName,
+    authorAvatar,
+    authorUsername,
+    ver,
+    ...props
+}: CommonCardProps) => {
+    const navigate = useNavigate()
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        cardRef.current && VanillaTilt.init(cardRef.current, options)
+    }, [options])
+
+    const handleCardOnClick = () => {
+        url && navigate(url)
+    }
+
+    return (
+        <Card
+            style={{ overflow: 'visible', ...style }}
+            ref={cardRef}
+            {...props}
+            onClick={handleCardOnClick}
+        >
+            <FlexBox className={'common-card'}>
+                <div className={'icon'}>{icon}</div>
+                <div className={'version'}>{ver}</div>
+                <div className={'info'}>
+                    <div className={'tool-name'}>{toolName}</div>
+                    <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                </div>
+                <div className={'author'}>
+                    <div className={'avatar'}>
+                        <AntdAvatar
+                            src={
+                                <AntdImage
+                                    preview={{ mask: <Icon component={IconOxygenEye}></Icon> }}
+                                    src={`data:image/png;base64,${authorAvatar}`}
+                                    alt={'Avatar'}
+                                />
+                            }
+                            style={{ background: COLOR_BACKGROUND }}
+                        />
+                    </div>
+                    <AntdTooltip title={authorUsername}>
+                        <div className={'author-name'}>{authorName}</div>
+                    </AntdTooltip>
+                </div>
+            </FlexBox>
+        </Card>
+    )
+}
+
 const Store = () => {
-    return <></>
+    const [isLoading, setIsLoading] = useState(false)
+    const [currentPage, setCurrentPage] = useState(1)
+    const [hasNextPage, setHasNextPage] = useState(true)
+    const [toolData, setToolData] = useState<ToolVo[]>()
+
+    const getTool = () => {
+        if (isLoading) {
+            return
+        }
+        setIsLoading(true)
+        void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })
+
+        void r_tool_store_get({ currentPage })
+            .then((res) => {
+                const response = res.data
+
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setToolData(response.data?.records)
+                }
+            })
+            .finally(() => {
+                setIsLoading(false)
+                message.destroy('LOADING')
+            })
+    }
+
+    useEffect(() => {
+        getTool()
+    }, [])
+
+    return (
+        <>
+            <FitFullscreen data-component={'store'}>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                        {toolData?.map((value) => (
+                            <CommonCard
+                                icon={
+                                    <img
+                                        src={`data:image/svg+xml;base64,${value.icon}`}
+                                        alt={'Icon'}
+                                    />
+                                }
+                                toolName={value.name}
+                                toolId={value.toolId}
+                                url={''}
+                                authorName={value.author.userInfo.nickname}
+                                authorAvatar={value.author.userInfo.avatar}
+                                authorUsername={value.author.username}
+                                ver={value.ver}
+                            />
+                        ))}
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullscreen>
+        </>
+    )
 }
 
 export default Store
diff --git a/src/services/tool.tsx b/src/services/tool.tsx
index e36ece2..601ec56 100644
--- a/src/services/tool.tsx
+++ b/src/services/tool.tsx
@@ -3,6 +3,7 @@ import {
     URL_TOOL,
     URL_TOOL_CATEGORY,
     URL_TOOL_DETAIL,
+    URL_TOOL_STORE,
     URL_TOOL_TEMPLATE
 } from '@/constants/urls.constants'
 
@@ -29,3 +30,6 @@ export const r_tool_submit = (id: string) => request.post(`${URL_TOOL}/${id}`)
 export const r_tool_cancel = (id: string) => request.put(`${URL_TOOL}/${id}`)
 
 export const r_tool_delete = (id: string) => request.delete(`${URL_TOOL}/${id}`)
+
+export const r_tool_store_get = (param: ToolStoreGetParam) =>
+    request.get<PageVo<ToolVo>>(URL_TOOL_STORE, param)