Finish store

2024-02-18 17:50:31 +08:00
parent ae16808e1d
commit 3c495cfa16
11 changed files with 362 additions and 41 deletions
--- a/src/pages/Tools/Source.tsx
+++ b/src/pages/Tools/Source.tsx
@@ -0,0 +1,89 @@
+import '@/assets/css/pages/tools/source.scss'
+import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { r_tool_detail } from '@/services/tool'
+import { IFiles } from '@/components/Playground/shared'
+import { base64ToFiles } from '@/components/Playground/files'
+import Playground from '@/components/Playground'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import Card from '@/components/common/Card'
+import { getLoginStatus } from '@/util/auth.tsx'
+
+const Source = () => {
+    const navigate = useNavigate()
+    const { username, toolId, ver } = useParams()
+    const [loading, setLoading] = useState(false)
+    const [files, setFiles] = useState<IFiles>({})
+    const [selectedFileName, setSelectedFileName] = useState('')
+
+    const render = (toolVo: ToolVo) => {
+        try {
+            setFiles(base64ToFiles(toolVo.source.data!))
+            setSelectedFileName(toolVo.entryPoint)
+        } catch (e) {
+            void message.error('载入工具失败')
+        }
+    }
+
+    const getTool = () => {
+        if (loading) {
+            return
+        }
+        setLoading(true)
+        void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
+
+        void r_tool_detail(username!, toolId!, ver || 'latest')
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        render(response.data!)
+                        break
+                    case DATABASE_NO_RECORD_FOUND:
+                        void message.error('未找到指定工具')
+                        setTimeout(() => {
+                            navigate(-1)
+                        }, 3000)
+                        break
+                    default:
+                        void message.error('获取工具信息失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoading(false)
+                message.destroy('LOADING')
+            })
+    }
+
+    useEffect(() => {
+        if (username === '!' && !getLoginStatus()) {
+            setTimeout(() => {
+                navigate(-1)
+            }, 3000)
+            return
+        }
+        if (username !== '!' && ver) {
+            navigate(`/source/${username}/${toolId}`)
+            return
+        }
+        if (username === '!' && !ver) {
+            navigate(`/source/!/${toolId}/latest`)
+            return
+        }
+        getTool()
+    }, [])
+
+    return (
+        <FitFullscreen data-component={'tools-source'}>
+            <Card>
+                <Playground.CodeEditor
+                    readonly
+                    files={files}
+                    selectedFileName={selectedFileName}
+                    onSelectedFileChange={setSelectedFileName}
+                />
+            </Card>
+        </FitFullscreen>
+    )
+}
+
+export default Source
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -1,18 +1,20 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode, useEffect, useState } from 'react'
+import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode } 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'
+import '@/assets/css/pages/tools/store.scss'
+import { COLOR_BACKGROUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { 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'
+import HideScrollbar from '@/components/common/HideScrollbar'

 interface CommonCardProps
    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
    icon: ReactNode
    toolName: string
    toolId: string
+    toolDesc: string
    options?: TiltOptions
    url: string
    authorName: string
@@ -28,6 +30,7 @@ const CommonCard = ({
    icon,
    toolName,
    toolId,
+    toolDesc,
    options = {
        reverse: true,
        max: 8,
@@ -53,6 +56,11 @@ const CommonCard = ({
        url && navigate(url)
    }

+    const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        navigate(`/source/${authorUsername}/${toolId}`)
+    }
+
    return (
        <Card
            style={{ overflow: 'visible', ...style }}
@@ -62,10 +70,13 @@ const CommonCard = ({
        >
            <FlexBox className={'common-card'}>
                <div className={'icon'}>{icon}</div>
-                <div className={'version'}>{ver}</div>
+                <div className={'version'}>
+                    <AntdTag>V{ver}</AntdTag>
+                </div>
                <div className={'info'}>
                    <div className={'tool-name'}>{toolName}</div>
                    <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                    {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
                </div>
                <div className={'author'}>
                    <div className={'avatar'}>
@@ -84,6 +95,41 @@ const CommonCard = ({
                        <div className={'author-name'}>{authorName}</div>
                    </AntdTooltip>
                </div>
+                <div className={'operation'}>
+                    <AntdTooltip title={'源码'}>
+                        <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
+                    </AntdTooltip>
+                </div>
+            </FlexBox>
+        </Card>
+    )
+}
+
+interface LoadMoreCardProps {
+    onClick: () => void
+}
+
+const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        cardRef.current &&
+            VanillaTilt.init(cardRef.current, {
+                reverse: true,
+                max: 8,
+                glare: true,
+                ['max-glare']: 0.3,
+                scale: 1.03
+            })
+    }, [])
+
+    return (
+        <Card style={{ overflow: 'visible' }} ref={cardRef} onClick={onClick}>
+            <FlexBox className={'load-more-card'}>
+                <div className={'icon'}>
+                    <Icon component={IconOxygenMore} />{' '}
+                </div>
+                <div className={'text'}>加载更多</div>
            </FlexBox>
        </Card>
    )
@@ -91,24 +137,31 @@ const CommonCard = ({

 const Store = () => {
    const [isLoading, setIsLoading] = useState(false)
-    const [currentPage, setCurrentPage] = useState(1)
+    const [currentPage, setCurrentPage] = useState(0)
    const [hasNextPage, setHasNextPage] = useState(true)
-    const [toolData, setToolData] = useState<ToolVo[]>()
+    const [toolData, setToolData] = useState<ToolVo[]>([])

-    const getTool = () => {
+    const getTool = (page: number) => {
        if (isLoading) {
            return
        }
        setIsLoading(true)
        void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })

-        void r_tool_store_get({ currentPage })
+        void r_tool_store_get({ currentPage: page })
            .then((res) => {
                const response = res.data

                switch (response.code) {
                    case DATABASE_SELECT_SUCCESS:
-                        setToolData(response.data?.records)
+                        setCurrentPage(page)
+                        setToolData([...toolData, ...response.data!.records])
+                        if (response.data?.current === response.data?.pages) {
+                            setHasNextPage(false)
+                        }
+                        break
+                    default:
+                        void message.error('加载失败，请稍后重试')
                }
            })
            .finally(() => {
@@ -117,13 +170,20 @@ const Store = () => {
            })
    }

+    const handleOnLoadMore = () => {
+        if (isLoading) {
+            return
+        }
+        getTool(currentPage + 1)
+    }
+
    useEffect(() => {
-        getTool()
+        getTool(1)
    }, [])

    return (
        <>
-            <FitFullscreen data-component={'store'}>
+            <FitFullscreen data-component={'tools-store'}>
                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
                    <FlexBox direction={'horizontal'} className={'root-content'}>
                        {toolData?.map((value) => (
@@ -136,13 +196,15 @@ const Store = () => {
                                }
                                toolName={value.name}
                                toolId={value.toolId}
-                                url={''}
+                                toolDesc={value.description}
+                                url={`/view/${value.author.username}/${value.toolId}`}
                                authorName={value.author.userInfo.nickname}
                                authorAvatar={value.author.userInfo.avatar}
                                authorUsername={value.author.username}
                                ver={value.ver}
                            />
                        ))}
+                        {hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
                    </FlexBox>
                </HideScrollbar>
            </FitFullscreen>
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -16,22 +16,32 @@ const View = () => {
    const [compiledCode, setCompiledCode] = useState('')

    const render = (toolVo: ToolVo) => {
-        try {
-            const baseDist = base64ToStr(toolVo.base.dist.data!)
-            const files = base64ToFiles(toolVo.source.data!)
-            const importMap = JSON.parse(files[IMPORT_MAP_FILE_NAME].value) as IImportMap
+        if (username === '!') {
+            try {
+                const baseDist = base64ToStr(toolVo.base.dist.data!)
+                const files = base64ToFiles(toolVo.source.data!)
+                const importMap = JSON.parse(files[IMPORT_MAP_FILE_NAME].value) as IImportMap

-            void compiler
-                .compile(files, importMap, toolVo.entryPoint)
-                .then((result) => {
-                    const output = result.outputFiles[0].text
-                    setCompiledCode(`${output}\n${baseDist}`)
-                })
-                .catch((reason) => {
-                    void message.error(`编译失败：${reason}`)
-                })
-        } catch (e) {
-            void message.error('载入工具失败')
+                void compiler
+                    .compile(files, importMap, toolVo.entryPoint)
+                    .then((result) => {
+                        const output = result.outputFiles[0].text
+                        setCompiledCode(`${output}\n${baseDist}`)
+                    })
+                    .catch((reason) => {
+                        void message.error(`编译失败：${reason}`)
+                    })
+            } catch (e) {
+                void message.error('载入工具失败')
+            }
+        } else {
+            try {
+                const baseDist = base64ToStr(toolVo.base.dist.data!)
+                const dist = base64ToStr(toolVo.dist.data!)
+                setCompiledCode(`${dist}\n${baseDist}`)
+            } catch (e) {
+                void message.error('载入工具失败')
+            }
        }
    }

--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -36,6 +36,7 @@ interface CommonCardProps
    url?: string
    onOpen?: () => void
    onEdit?: () => void
+    onSource?: () => void
    onPublish?: () => void
    onCancelReview?: () => void
    onDelete?: () => void
@@ -58,6 +59,7 @@ const CommonCard = ({
    url,
    onOpen,
    onEdit,
+    onSource,
    onPublish,
    onCancelReview,
    onDelete,
@@ -102,6 +104,11 @@ const CommonCard = ({
                            </AntdButton.Group>
                        </div>
                    )}
+                    {onSource && (
+                        <AntdButton size={'small'} onClick={onSource}>
+                            源码
+                        </AntdButton>
+                    )}
                    {onCancelReview && (
                        <AntdButton size={'small'} onClick={onCancelReview}>
                            取消审核
@@ -140,15 +147,23 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
    }

    const handleOnEditTool = () => {
-        if (selectedTool.publish === '0' && ['NONE', 'REJECT'].includes(selectedTool.review)) {
+        if (['NONE', 'REJECT'].includes(selectedTool.review)) {
            return () => {
                navigate(`/edit/${tools[0].toolId}`)
            }
        }
    }

+    const handleOnSourceTool = () => {
+        if (selectedTool.review === 'PASS') {
+            return () => {
+                navigate(`/source/!/${selectedTool.toolId}/${selectedTool.ver}`)
+            }
+        }
+    }
+
    const handleOnPublishTool = () => {
-        if (selectedTool.publish === '0' && ['NONE', 'REJECT'].includes(selectedTool.review)) {
+        if (['NONE', 'REJECT'].includes(selectedTool.review)) {
            return () => {
                onSubmit?.(selectedTool)
            }
@@ -156,7 +171,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
    }

    const handleOnCancelReview = () => {
-        if (selectedTool.publish === '0' && selectedTool.review === 'PROCESSING') {
+        if (selectedTool.review === 'PROCESSING') {
            return () => {
                onCancel?.(selectedTool)
            }
@@ -178,6 +193,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
            toolId={selectedTool.toolId}
            onOpen={handleOnOpenTool}
            onEdit={handleOnEditTool()}
+            onSource={handleOnSourceTool()}
            onPublish={handleOnPublishTool()}
            onCancelReview={handleOnCancelReview()}
            onDelete={handleOnDeleteTool}
@@ -189,10 +205,10 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
                onChange={handleOnVersionChange}
                options={tools.map((value) => ({
                    value: value.id,
-                    label: `${value.ver}${value.publish === '0' ? '*' : ''}`
+                    label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`
                }))}
            />
-            {tools.every((value) => value.publish !== '0') && (
+            {tools.every((value) => value.review === 'PASS') && (
                <AntdTooltip title={'更新'}>
                    <Icon
                        component={IconOxygenUpgrade}