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

@@ -0,0 +1,107 @@
+@use "@/assets/css/mixins" as mixins;
+@use '@/assets/css/constants' as constants;
+
+[data-component=tools] {
+  .root-content {
+    padding: 30px;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    > .card-box {
+      width: 180px;
+      height: 290px;
+      flex: 0 0 auto;
+
+      .common-card {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        align-items: center;
+
+        > * {
+          flex: 0 0 auto;
+          display: block;
+        }
+
+        .version-select {
+          position: absolute;
+          top: 10px;
+          left: 10px;
+        }
+
+        .icon {
+          display: flex;
+          padding-top: 50px;
+          padding-bottom: 20px;
+          color: constants.$production-color;
+          font-size: constants.$SIZE_ICON_XL;
+          justify-content: center;
+
+          img {
+            width: constants.$SIZE_ICON_XL;
+          }
+        }
+
+        .tool-name {
+          font-weight: bolder;
+          font-size: 1.6em;
+        }
+      }
+    }
+
+
+    & > :first-child {
+      cursor: pointer;
+
+      .info {
+        padding-top: 50px;
+      }
+    }
+
+    & > :not(:first-child) {
+      .info {
+        transform: translateY(20px);
+        transition: all 0.1s ease;
+      }
+
+      .operation {
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        padding-bottom: 20px;
+        gap: 4px;
+        width: 70%;
+        flex-direction: column;
+        align-items: center;
+        visibility: hidden;
+        opacity: 0;
+
+        > *, .edit > * {
+          width: 100%;
+        }
+
+        .edit {
+          > * {
+            > :first-child {
+              flex: 1;
+            }
+          }
+        }
+      }
+    }
+
+    & > :not(:first-child):hover {
+      .info {
+        transform: translateY(-10px);
+        transition: all 0.2s ease;
+      }
+
+      .operation {
+        visibility: visible;
+        opacity: 1;
+        transition: all 0.4s ease;
+      }
+    }
+  }
+}

src/constants/urls.constants.ts

@@ -33,6 +33,7 @@ export const URL_SYS_TOOL_TEMPLATE = `${URL_SYS_TOOL}/template`
 export const URL_TOOL = '/tool'
 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_API_V1 = '/api/v1'
 export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`

src/global.d.ts

@@ -534,14 +534,12 @@ interface ToolVo {
     baseId: string
     author: UserInfoVo
     ver: string
-    privately: boolean
     keywords: string[]
     categories: ToolCategoryVo[]
     source: ToolDataVo
     dist: ToolDataVo
-    publish: boolean
+    publish: string
     review: number
-    publishTime: string
     createTime: string
     updateTime: string
 }
@@ -553,7 +551,6 @@ interface ToolCreateParam {
     description: string
     ver: string
     templateId: string
-    privately: boolean
     keywords: string[]
     categories: string[]
 }

src/pages/Sign/SignUp.tsx

@@ -103,7 +103,7 @@ const SignUp = () => {
             return
         }
         setIsSending(true)
-        void message.loading({ content: '发送中', key: 'sending', duration: 0 })
+        void message.loading({ content: '发送中', key: 'SENDING', duration: 0 })
         void r_auth_resend()
             .then((res) => {
                 const response = res.data
@@ -114,7 +114,7 @@ const SignUp = () => {
                 }
             })
             .finally(() => {
-                message.destroy('sending')
+                message.destroy('SENDING')
                 setIsSending(false)
             })
     }

src/pages/Sign/Verify.tsx

@@ -70,7 +70,7 @@ const Verify = () => {
             return
         }
         setIsSending(true)
-        void message.loading({ content: '发送中', key: 'sending', duration: 0 })
+        void message.loading({ content: '发送中', key: 'SENDING', duration: 0 })
         void r_auth_resend()
             .then((res) => {
                 const response = res.data
@@ -81,7 +81,7 @@ const Verify = () => {
                 }
             })
             .finally(() => {
-                message.destroy('sending')
+                message.destroy('SENDING')
                 setIsSending(false)
             })
     }

src/pages/System/Tools/Base.tsx

@@ -177,7 +177,7 @@ const Base = () => {
             }
             setCompiling(true)
             setIsLoading(true)
-            void message.loading({ content: '加载文件中', key: 'compile-loading', duration: 0 })
+            void message.loading({ content: '加载文件中', key: 'COMPILE_LOADING', duration: 0 })
 
             if (!baseDetailLoading[value.id]) {
                 getBaseDetail(value)
@@ -211,7 +211,7 @@ const Base = () => {
                         baseDetail = prevState[value.id]
                         return prevState
                     })
-                    message.destroy('compile-loading')
+                    message.destroy('COMPILE_LOADING')
                     const files = base64ToFiles(baseDetail!.source.data!)
                     if (!Object.keys(files).includes(IMPORT_MAP_FILE_NAME)) {
                         void message.warning(`编译中止：未包含 ${IMPORT_MAP_FILE_NAME} 文件`)
@@ -263,7 +263,7 @@ const Base = () => {
                                         resolve()
                                         void message.loading({
                                             content: '编译中',
-                                            key: 'compiling',
+                                            key: 'COMPILING',
                                             duration: 0
                                         })
                                         void compiler
@@ -273,14 +273,12 @@ const Base = () => {
                                                 compileForm.getFieldValue('entryFileName') as string
                                             )
                                             .then((result) => {
-                                                void message.destroy('compiling')
+                                                message.destroy('COMPILING')
                                                 void message.loading({
                                                     content: '上传中',
-                                                    key: 'uploading',
+                                                    key: 'UPLOADING',
                                                     duration: 0
                                                 })
-                                                // TODO Remove debug
-                                                console.debug(result.outputFiles[0].text)
                                                 void r_sys_tool_base_update({
                                                     id: value.id,
                                                     dist: strToBase64(result.outputFiles[0].text)
@@ -297,14 +295,14 @@ const Base = () => {
                                                         }
                                                     })
                                                     .finally(() => {
-                                                        void message.destroy('uploading')
+                                                        message.destroy('UPLOADING')
                                                         setCompiling(false)
                                                         setIsLoading(false)
                                                     })
                                             })
                                             .catch((e: Error) => {
                                                 void message.error(`编译失败：${e.message}`)
-                                                void message.destroy('compiling')
+                                                message.destroy('COMPILING')
                                                 setCompiling(false)
                                                 setIsLoading(false)
                                             })
@@ -325,7 +323,7 @@ const Base = () => {
                 .catch(() => {
                     setCompiling(false)
                     setIsLoading(false)
-                    message.destroy('compile-loading')
+                    message.destroy('COMPILE_LOADING')
                 })
         }
     }

src/pages/Tools/Create.tsx

@@ -45,7 +45,7 @@ const Create = () => {
                         )
                         break
                     case DATABASE_DUPLICATE_KEY:
-                        void message.warning('已存在相同 ID 相同版本的应用')
+                        void message.warning('已存在相同 ID 相同版本或未发布版本的应用')
                         setCreating(false)
                         break
                     default:
@@ -71,8 +71,9 @@ const Create = () => {
 
         const reader = new FileReader()
         reader.addEventListener('load', () => {
+            // eslint-disable-next-line @typescript-eslint/no-base-to-string
             form.setFieldValue('icon', reader.result!.toString().split(',')[1])
-            void form.validateFields()
+            void form.validateFields(['icon'])
         })
         reader.readAsDataURL(file)
 
@@ -187,7 +188,7 @@ const Create = () => {
                                 >
                                     <AntdForm.Item
                                         label={'图标'}
-                                        name={''}
+                                        name={'icon'}
                                         rules={[
                                             ({ getFieldValue }) => ({
                                                 validator() {
@@ -200,6 +201,7 @@ const Create = () => {
                                                 }
                                             })
                                         ]}
+                                        getValueFromEvent={() => {}}
                                     >
                                         <AntdUpload
                                             listType={'picture-card'}
@@ -218,7 +220,7 @@ const Create = () => {
                                             )}
                                         </AntdUpload>
                                     </AntdForm.Item>
-                                    <AntdForm.Item name={'icon'}>
+                                    <AntdForm.Item name={'icon'} hidden>
                                         <AntdInput />
                                     </AntdForm.Item>
                                     <AntdForm.Item
@@ -291,16 +293,6 @@ const Create = () => {
                                             onChange={handleOnTemplateChange}
                                         />
                                     </AntdForm.Item>
-                                    <AntdForm.Item
-                                        label={'访问权限'}
-                                        name={'privately'}
-                                        initialValue={false}
-                                    >
-                                        <AntdSwitch
-                                            checkedChildren={'私有'}
-                                            unCheckedChildren={'公开'}
-                                        />
-                                    </AntdForm.Item>
                                     <AntdForm.Item
                                         label={'关键字'}
                                         tooltip={'工具搜索（每个不超过10个字符）'}

src/pages/Tools/View.tsx

@@ -0,0 +1,61 @@
+import { r_tool_detail } from '@/services/tool.tsx'
+import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import { getLoginStatus } from '@/util/auth.tsx'
+
+const View = () => {
+    const navigate = useNavigate()
+    const [loading, setLoading] = useState(false)
+    const { username, toolId, ver } = useParams()
+
+    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:
+                        console.log(response.data)
+                        break
+                    case DATABASE_NO_RECORD_FOUND:
+                        void message.error('未找到指定工具')
+                        navigate('/')
+                        break
+                    default:
+                        void message.error('获取工具信息失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoading(false)
+                message.destroy('LOADING')
+            })
+    }
+
+    useEffect(() => {
+        if (username === '!' && !getLoginStatus()) {
+            navigate('/')
+            return
+        }
+        if (username !== '!' && ver) {
+            navigate(`/view/${username}/${toolId}`)
+            return
+        }
+        if (username === '!' && !ver) {
+            navigate(`/view/!/${toolId}/latest`)
+            return
+        }
+        getTool()
+    }, [])
+
+    return (
+        <>
+            {username}:{toolId}:{ver}
+        </>
+    )
+}
+
+export default View

src/pages/Tools/index.tsx

@@ -1,5 +1,206 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode, useState } from 'react'
+import Icon from '@ant-design/icons'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import '@/assets/css/pages/tools/index.scss'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import FlexBox from '@/components/common/FlexBox'
+import Card from '@/components/common/Card'
+import { r_tool_get } from '@/services/tool.tsx'
+import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import { getLoginStatus } from '@/util/auth.tsx'
+import { useNavigate } from 'react-router'
+
+interface CommonCardProps
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: ReactNode
+    toolName?: string
+    toolId?: string
+    options?: TiltOptions
+    url?: string
+    onOpen?: () => void
+    onEdit?: () => void
+    onPublish?: () => void
+    onDelete?: () => void
+}
+
+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,
+    onOpen,
+    onEdit,
+    onPublish,
+    onDelete,
+    children,
+    ...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={'info'}>
+                    {toolName && <div className={'tool-name'}>{toolName}</div>}
+                    {toolId && <div className={'tool-id'}>{`ID: ${toolId}`}</div>}
+                </div>
+                <div className={'operation'}>
+                    {onOpen && (
+                        <AntdButton onClick={onOpen} size={'small'} type={'primary'}>
+                            打开
+                        </AntdButton>
+                    )}
+                    {onEdit && (
+                        <div className={'edit'}>
+                            <AntdButton.Group size={'small'}>
+                                <AntdButton>编辑</AntdButton>
+                                {onPublish && <AntdButton>发布</AntdButton>}
+                            </AntdButton.Group>
+                        </div>
+                    )}
+                    {onDelete && (
+                        <AntdButton size={'small'} danger>
+                            删除
+                        </AntdButton>
+                    )}
+                </div>
+                {children}
+            </FlexBox>
+        </Card>
+    )
+}
+
+interface ToolCardProps {
+    tools: ToolVo[]
+}
+
+const ToolCard = ({ tools }: ToolCardProps) => {
+    const navigate = useNavigate()
+    const [selectedTool, setSelectedTool] = useState(tools[0])
+
+    const handleOnVersionChange = (value: string) => {
+        setSelectedTool(tools.find((item) => item.id === value)!)
+    }
+
+    const handleOnOpenTool = () => {
+        navigate(`/view/!/${selectedTool.toolId}/${selectedTool.ver}`)
+    }
+
+    const handleOnEditTool = () => {}
+
+    const handleOnPublishTool = () => {}
+
+    const handleOnDeleteTool = () => {}
+
+    return (
+        <CommonCard
+            icon={<img src={`data:image/svg+xml;base64,${selectedTool.icon}`} alt={'Icon'} />}
+            toolName={selectedTool.name}
+            toolId={selectedTool.toolId}
+            onOpen={handleOnOpenTool}
+            onEdit={handleOnEditTool}
+            onPublish={handleOnPublishTool}
+            onDelete={handleOnDeleteTool}
+        >
+            <AntdSelect
+                className={'version-select'}
+                size={'small'}
+                value={selectedTool.id}
+                onChange={handleOnVersionChange}
+                options={tools.map((value) => ({
+                    value: value.id,
+                    label: `${value.ver}${value.publish === '0' ? '*' : ''}`
+                }))}
+            />
+        </CommonCard>
+    )
+}
+
 const Tools = () => {
-    return <></>
+    const [loading, setLoading] = useState(false)
+    const [toolData, setToolData] = useState<ToolVo[]>()
+
+    const getTool = () => {
+        if (loading) {
+            return
+        }
+        setLoading(true)
+        void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })
+
+        void r_tool_get()
+            .then((res) => {
+                const response = res.data
+
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setToolData(response.data!)
+                        break
+                    default:
+                        void message.error('获取工具失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoading(false)
+                message.destroy('LOADING')
+            })
+    }
+
+    useEffect(() => {
+        if (!getLoginStatus()) {
+            return
+        }
+        getTool()
+    }, [])
+
+    return (
+        <>
+            <FitFullscreen data-component={'tools'}>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                        <CommonCard
+                            icon={<Icon component={IconOxygenNewProject} />}
+                            toolName={'创建工具'}
+                            url={'/create'}
+                        />
+                        {toolData &&
+                            Object.values(
+                                toolData.reduce((result: Record<string, ToolVo[]>, item) => {
+                                    result[item.toolId] = result[item.toolId] || []
+                                    result[item.toolId].push(item)
+                                    return result
+                                }, {})
+                            ).map((value, index) => <ToolCard key={index} tools={value} />)}
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullscreen>
+        </>
+    )
 }
 
 export default Tools

src/router/tools.tsx

@@ -28,9 +28,23 @@ export const tools: RouteJsonObject[] = [
         name: '创建工具',
         titlePostfix: ' - 创建新工具',
         icon: lazy(() => import('~icons/oxygen/newProject')),
-        menu: true,
+        menu: false,
         auth: true
     },
+    {
+        path: 'view/:username/:toolId/:ver',
+        absolutePath: '/view',
+        id: 'tools-view-ver',
+        component: lazy(() => import('@/pages/Tools/View')),
+        name: '查看'
+    },
+    {
+        path: 'view/:username/:toolId',
+        absolutePath: '/view',
+        id: 'tools-view',
+        component: lazy(() => import('@/pages/Tools/View')),
+        name: '查看'
+    },
     {
         path: '*',
         absolutePath: '*',

src/services/index.tsx

@@ -68,11 +68,14 @@ service.interceptors.response.use(
         switch (response.data.code) {
             case PERMISSION_UNAUTHORIZED:
                 removeToken()
-                void message.error(
+                void message.error({
+                    content: (
                         <>
                             <strong>未登录</strong>
                         </>
-                )
+                    ),
+                    key: 'NO_LOGIN'
+                })
                 setTimeout(() => {
                     location.reload()
                 }, 1500)
@@ -80,11 +83,14 @@ service.interceptors.response.use(
             case PERMISSION_TOKEN_ILLEGAL:
             case PERMISSION_TOKEN_HAS_EXPIRED:
                 removeToken()
-                void message.error(
+                void message.error({
+                    content: (
                         <>
                             <strong>登录已过期</strong>
                         </>
-                )
+                    ),
+                    key: 'LOGIN_HAS_EXPIRED'
+                })
                 setTimeout(() => {
                     location.replace(
                         getRedirectUrl('/login', `${location.pathname}${location.search}`)
@@ -92,18 +98,24 @@ service.interceptors.response.use(
                 }, 1500)
                 throw response?.data
             case PERMISSION_ACCESS_DENIED:
-                void message.error(
+                void message.error({
+                    content: (
                         <>
                             <strong>暂无权限操作</strong>
                         </>
-                )
+                    ),
+                    key: 'ACCESS_DENIED'
+                })
                 throw response?.data
             case SYSTEM_REQUEST_TOO_FREQUENT:
-                void message.warning(
+                void message.warning({
+                    content: (
                         <>
                             <strong>请求过于频繁，请稍后重试</strong>
                         </>
-                )
+                    ),
+                    key: 'REQUEST_TOO_FREQUENT'
+                })
                 throw response?.data
         }
         return response
@@ -113,13 +125,16 @@ service.interceptors.response.use(
             error.code === 'ETIMEDOUT' ||
             (error.code === 'ECONNABORTED' && error.message.includes('timeout'))
         ) {
-            void message.error('请求超时，请稍后重试')
+            void message.error({ content: '请求超时，请稍后重试', key: 'TIMEOUT' })
         } else {
-            void message.error(
+            void message.error({
+                content: (
                     <>
                         <strong>服务器出错</strong>，请稍后重试
                     </>
-            )
+                ),
+                key: 'SERVER_ERROR'
+            })
         }
         return await Promise.reject(error?.response?.data)
     }

src/services/tool.tsx

@@ -1,5 +1,10 @@
 import request from '@/services/index'
-import { URL_TOOL, URL_TOOL_CATEGORY, URL_TOOL_TEMPLATE } from '@/constants/urls.constants'
+import {
+    URL_TOOL,
+    URL_TOOL_CATEGORY,
+    URL_TOOL_DETAIL,
+    URL_TOOL_TEMPLATE
+} from '@/constants/urls.constants'
 
 export const r_tool_template_get = () => request.get<ToolTemplateVo[]>(URL_TOOL_TEMPLATE)
 
@@ -9,3 +14,8 @@ export const r_tool_template_get_one = (id: string) =>
 export const r_tool_category_get = () => request.get<ToolCategoryVo[]>(URL_TOOL_CATEGORY)
 
 export const r_tool_create = (param: ToolCreateParam) => request.post<ToolVo>(URL_TOOL, param)
+
+export const r_tool_get = () => request.get<ToolVo[]>(URL_TOOL)
+
+export const r_tool_detail = (username: string, toolId: string, ver: string) =>
+    request.get<ToolVo>(`${URL_TOOL_DETAIL}/${username}/${toolId}/${ver}`)