Finish store

src/assets/css/constants.scss

@@ -18,3 +18,4 @@ $SIZE_ICON_SM: 20px;
 $SIZE_ICON_MD: 24px;
 $SIZE_ICON_LG: 32px;
 $SIZE_ICON_XL: 64px;
+$SIZE_ICON_XXL: 96px;

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

@@ -20,8 +20,8 @@
         align-items: center;
 
         > * {
-          flex: 0 0 auto;
           display: block;
+          flex: 0 0 auto;
         }
 
         .version-select {

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

@@ -0,0 +1,8 @@
+[data-component=tools-source] {
+  padding: 30px;
+
+  .card-box {
+    width: 100%;
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,117 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=tools-store] {
+  .root-content {
+    padding: 30px;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    > .card-box {
+      width: 180px;
+      height: 290px;
+      flex: 0 0 auto;
+      cursor: pointer;
+
+      .common-card {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        align-items: center;
+
+        > * {
+          display: block;
+          flex: 0 0 auto;
+        }
+
+
+        .icon {
+          display: flex;
+          padding-top: 40px;
+          padding-bottom: 20px;
+          color: constants.$production-color;
+          font-size: constants.$SIZE_ICON_XL;
+          justify-content: center;
+
+          img {
+            width: constants.$SIZE_ICON_XL;
+          }
+        }
+
+        .version {
+          position: absolute;
+          left: 10px;
+          top: 10px;
+        }
+
+        .info {
+          padding-top: 20px;
+
+          .tool-name {
+            font-weight: bolder;
+            font-size: 1.6em;
+          }
+
+          .tool-desc {
+            margin-top: 10px;
+            color: constants.$font-secondary-color;
+          }
+        }
+
+        .author {
+          display: flex;
+          margin-top: auto;
+          flex-direction: row;
+          justify-content: end;
+          padding-bottom: 10px;
+          gap: 10px;
+
+          .avatar {
+            > * {
+              width: 24px;
+              height: 24px;
+            }
+          }
+
+          .author-name {
+            display: flex;
+            align-items: center;
+          }
+        }
+
+        .operation {
+          position: absolute;
+          top: 6px;
+          right: 12px;
+          font-size: 1.6em;
+
+          >*:hover {
+            color: constants.$font-secondary-color;
+          }
+        }
+      }
+
+      .load-more-card {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        align-items: center;
+
+        .icon {
+          display: flex;
+          font-size: constants.$SIZE_ICON_XXL;
+          color: constants.$production-color;
+          align-items: center;
+          transform: translateY(-20px);
+        }
+
+        .text {
+          position: absolute;
+          top: 60%;
+          font-size: 1.2em;
+          font-weight: bolder;
+        }
+      }
+    }
+  }
+}

src/assets/svg/code.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M305.6 225.6c-17.6-17.6-43.2-17.6-59.2 0L19.2 460.8c-25.6 30.4-25.6 72 0 97.6l225.6 235.2c8 8 20.8 12.8 30.4 12.8s20.8-4.8 30.4-12.8c17.6-17.6 17.6-43.2 0-59.2L88 512l217.6-225.6c17.6-17.6 17.6-43.2 0-60.8zM1001.6 460.8L774.4 225.6c-17.6-17.6-43.2-17.6-59.2 0s-17.6 43.2 0 59.2L932.8 512 715.2 737.6c-17.6 17.6-17.6 43.2 0 59.2 8 8 17.6 12.8 30.4 12.8 12.8 0 20.8-4.8 30.4-12.8l225.6-235.2c28.8-28.8 28.8-70.4 0-100.8zM612.8 230.4c-20.8-8-46.4 4.8-56 25.6L382.4 742.4c-8 20.8 4.8 46.4 25.6 56 4.8 0 8 4.8 12.8 4.8 17.6 0 33.6-12.8 38.4-30.4l179.2-491.2c8-20.8-4.8-46.4-25.6-51.2z" /></svg>

src/assets/svg/more.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M243.2 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /><path d="M512 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /><path d="M780.8 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /></svg>

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

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 '@/assets/css/pages/tools/store.scss'
-import FitFullscreen from '@/components/common/FitFullscreen.tsx'
+import { COLOR_BACKGROUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
-import HideScrollbar from '@/components/common/HideScrollbar.tsx'
+import { r_tool_store_get } from '@/services/tool'
-import { r_tool_store_get } from '@/services/tool.tsx'
+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>

src/pages/Tools/View.tsx

@@ -16,6 +16,7 @@ const View = () => {
     const [compiledCode, setCompiledCode] = useState('')
 
     const render = (toolVo: ToolVo) => {
+        if (username === '!') {
             try {
                 const baseDist = base64ToStr(toolVo.base.dist.data!)
                 const files = base64ToFiles(toolVo.source.data!)
@@ -33,6 +34,15 @@ const View = () => {
             } 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('载入工具失败')
+            }
+        }
     }
 
     const getTool = () => {

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}

src/router/tools.tsx

@@ -17,8 +17,7 @@ export const tools: RouteJsonObject[] = [
         name: '工具商店',
         titlePostfix: ' - 商店',
         icon: lazy(() => import('~icons/oxygen/store')),
-        menu: true,
+        menu: true
-        auth: true
     },
     {
         path: 'create',
@@ -50,7 +49,24 @@ export const tools: RouteJsonObject[] = [
         absolutePath: '/edit',
         id: 'tools-edit',
         component: lazy(() => import('@/pages/Tools/Edit')),
-        name: '查看'
+        name: '编辑',
+        auth: true
+    },
+    {
+        path: 'source/:username/:toolId/:ver',
+        absolutePath: '/source',
+        id: 'tools-source-ver',
+        component: lazy(() => import('@/pages/Tools/Source')),
+        name: '源码',
+        auth: true
+    },
+    {
+        path: 'source/:username/:toolId',
+        absolutePath: '/source',
+        id: 'tools-source',
+        component: lazy(() => import('@/pages/Tools/Source')),
+        name: '源码',
+        auth: true
     },
     {
         path: '*',