Feat(Tool): Support install tool

Support install tool and execute locally

src/renderer/src/assets/css/components/tools/local-card.scss

@@ -0,0 +1,110 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=component-local-card] {
+  height: 100%;
+  cursor: pointer;
+
+  .local-card {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    align-items: center;
+
+    > * {
+      display: block;
+      flex: 0 0 auto;
+    }
+
+    .header {
+      display: flex;
+      width: 100%;
+      padding: 10px;
+      justify-content: space-between;
+
+      .version {
+        width: 0;
+        transition: all 0.2s;
+      }
+
+      .operation {
+        display: flex;
+        font-size: 1.6em;
+        gap: 4px;
+        opacity: 0;
+        transition: all 0.2s;
+
+        > *:hover {
+          color: constants.$font-secondary-color;
+        }
+      }
+    }
+
+    .icon {
+      display: flex;
+      padding-top: 10px;
+      padding-bottom: 20px;
+      color: constants.$production-color;
+      font-size: constants.$SIZE_ICON_XL;
+      justify-content: center;
+
+      img {
+        width: constants.$SIZE_ICON_XL;
+      }
+    }
+
+    .info {
+      padding-top: 20px;
+
+      .tool-name {
+        font-weight: bolder;
+        font-size: 1.6em;
+      }
+
+      .tool-desc {
+        margin: {
+          top: 10px;
+          left: auto;
+          right: auto;
+        };
+        color: constants.$font-secondary-color;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-height: 40px;
+        width: 80%;
+      }
+    }
+
+    .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;
+      }
+    }
+  }
+
+  :hover {
+    .header {
+      .version {
+        opacity: 0;
+      }
+
+      .operation {
+        opacity: 1;
+      }
+    }
+  }
+}

src/renderer/src/assets/css/pages/tools/local.scss

@@ -0,0 +1,49 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=tools-local] {
+  .search {
+    display: flex;
+    position: sticky;
+    width: 100%;
+    margin-top: 20px;
+    top: 20px;
+    z-index: 10;
+    justify-content: center;
+    transition: all 0.3s ease;
+
+    > * {
+      width: 80%;
+    }
+
+    &.hide {
+      transform: translateY(-60px);
+    }
+  }
+
+  .root-content {
+    padding: 20px;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    > div {
+      width: 180px;
+      height: 290px;
+      flex: 0 0 auto;
+    }
+
+    .no-tool {
+      display: flex;
+      justify-content: center;
+      font-size: 1.4em;
+      font-weight: bolder;
+      color: constants.$font-secondary-color;
+    }
+  }
+
+  .android-qrcode {
+    align-items: center;
+    transform: translateX(-16px);
+    gap: 20px;
+  }
+}

src/renderer/src/assets/svg/download.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M554.667 554.667V792.96l77.994-77.995 60.374 60.374L512 956.33 330.965 775.339l60.374-60.374 77.994 77.995V554.667h85.334zM512 85.333a298.71 298.71 0 0 1 296.704 264.278 234.667 234.667 0 0 1-40.661 460.117v-85.93a149.333 149.333 0 1 0-47.446-294.827 213.333 213.333 0 1 0-417.152 0 149.333 149.333 0 0 0-55.125 293.546l7.68 1.28v85.931a234.667 234.667 0 0 1-40.704-460.117A298.667 298.667 0 0 1 512 85.333z" /></svg>

src/renderer/src/assets/svg/installed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M544 531.2V704c0 19.2-12.8 32-32 32s-32-12.8-32-32V531.2L332.8 441.6c-12.8-6.4-19.2-25.6-6.4-44.8 6.4-12.8 25.6-19.2 44.8-6.4L512 473.6l140.8-83.2c12.8-6.4 32-6.4 44.8 12.8 6.4 12.8 6.4 32-12.8 44.8L544 531.2z m-12.8-428.8c-12.8-6.4-25.6-6.4-32 0L147.2 307.2c-12.8 6.4-19.2 19.2-19.2 25.6v352c0 12.8 6.4 19.2 19.2 25.6l352 211.2c12.8 6.4 25.6 6.4 32 0l352-211.2c12.8-6.4 19.2-12.8 19.2-25.6V332.8c0-12.8-6.4-19.2-19.2-25.6L531.2 102.4z m32-57.6L908.8 256c32 12.8 51.2 44.8 51.2 76.8v358.4c0 32-19.2 64-51.2 76.8l-345.6 211.2c-32 19.2-70.4 19.2-102.4 0L115.2 768c-32-12.8-51.2-44.8-51.2-76.8V332.8c0-32 19.2-64 51.2-76.8L460.8 44.8C492.8 25.6 531.2 25.6 563.2 44.8z" /></svg>

src/renderer/src/components/tools/LocalCard.tsx

@@ -0,0 +1,206 @@
+import { DetailedHTMLProps, HTMLAttributes, MouseEvent } from 'react'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/tools/local-card.scss'
+import { COLOR_BACKGROUND, COLOR_MAIN } from '@/constants/common.constants'
+import { checkDesktop, omitText } from '@/util/common'
+import { navigateToStore, navigateToView } from '@/util/navigation'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import DragHandle from '@/components/dnd/DragHandle'
+import Draggable from '@/components/dnd/Draggable'
+
+interface StoreCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: string
+    toolName: string
+    toolId: string
+    toolDesc: string
+    options?: TiltOptions
+    author: UserWithInfoVo
+    showAuthor?: boolean
+    ver: string
+    platform: Platform
+    supportPlatform: Platform[]
+    favorite: boolean
+}
+
+const StoreCard = ({
+    style,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ref,
+    icon,
+    toolName,
+    toolId,
+    toolDesc,
+    options = {
+        reverse: true,
+        max: 8,
+        glare: true,
+        ['max-glare']: 0.3,
+        scale: 1.03
+    },
+    author,
+    showAuthor = true,
+    ver,
+    platform,
+    supportPlatform,
+    favorite,
+    ...props
+}: StoreCardProps) => {
+    const navigate = useNavigate()
+    const [modal, contextHolder] = AntdModal.useModal()
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        cardRef.current && VanillaTilt.init(cardRef.current, options)
+    }, [options])
+
+    const handleCardOnClick = () => {
+        if (!checkDesktop() && platform === 'DESKTOP') {
+            void message.warning('此应用需要桌面端环境，请在桌面端打开')
+            return
+        }
+        if (platform === 'ANDROID') {
+            void modal.confirm({
+                centered: true,
+                icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
+                title: 'Android 端',
+                content: (
+                    <FlexBox className={'android-qrcode'}>
+                        <AntdQRCode
+                            value={`oxygen://openurl/view/${author.username}/${toolId}`}
+                            size={300}
+                        />
+                        <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                    </FlexBox>
+                ),
+                okText: '确定',
+                cancelText: '模拟器',
+                onCancel() {
+                    navigateToView(navigate, author.username, toolId, platform, undefined, true)
+                }
+            })
+            return
+        }
+        navigateToView(navigate, author.username, toolId, platform, undefined, true)
+    }
+
+    const handleOnClickAuthor = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        navigateToStore(navigate, author.username)
+    }
+
+    const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        void modal.confirm({
+            centered: true,
+            icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
+            title: 'Android 端',
+            content: (
+                <FlexBox className={'android-qrcode'}>
+                    <AntdQRCode
+                        value={`oxygen://openurl/view/${author.username}/${toolId}`}
+                        size={300}
+                    />
+                    <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                </FlexBox>
+            ),
+            okText: '确定',
+            cancelText: '模拟器',
+            onCancel() {
+                navigateToView(navigate, author.username, toolId, 'ANDROID', undefined, true)
+            }
+        })
+    }
+
+    const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        navigateToView(navigate, author.username, toolId, 'WEB', undefined, true)
+    }
+
+    return (
+        <>
+            <Draggable
+                id={`${author.username}:${toolId}:local:${platform}`}
+                data={{
+                    icon,
+                    toolName,
+                    toolId,
+                    authorUsername: author.username,
+                    ver: 'local',
+                    platform: platform
+                }}
+            >
+                <Card
+                    data-component={'component-local-card'}
+                    style={{ overflow: 'visible', ...style }}
+                    ref={cardRef}
+                    {...props}
+                    onClick={handleCardOnClick}
+                >
+                    <FlexBox className={'local-card'}>
+                        <div className={'header'}>
+                            <div className={'version'}>
+                                <AntdTag>
+                                    {platform.slice(0, 1)}-{ver}
+                                </AntdTag>
+                            </div>
+                            <div className={'operation'}>
+                                {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
+                                    <AntdTooltip title={'Android 端'}>
+                                        <Icon
+                                            component={IconOxygenMobile}
+                                            onClick={handleOnAndroidBtnClick}
+                                        />
+                                    </AntdTooltip>
+                                )}
+                                {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
+                                    <AntdTooltip title={'Web 端'}>
+                                        <Icon
+                                            component={IconOxygenBrowser}
+                                            onClick={handleOnWebBtnClick}
+                                        />
+                                    </AntdTooltip>
+                                )}
+                                <DragHandle />
+                            </div>
+                        </div>
+                        <div className={'icon'}>
+                            <img src={`data:image/svg+xml;base64,${icon}`} alt={'Icon'} />
+                        </div>
+                        <div className={'info'}>
+                            <div className={'tool-name'}>{toolName}</div>
+                            <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                            {toolDesc && (
+                                <div
+                                    className={'tool-desc'}
+                                    title={toolDesc}
+                                >{`简介：${omitText(toolDesc, 18)}`}</div>
+                            )}
+                        </div>
+                        {showAuthor && (
+                            <div className={'author'} onClick={handleOnClickAuthor}>
+                                <div className={'avatar'}>
+                                    <AntdAvatar
+                                        src={
+                                            <AntdImage
+                                                preview={false}
+                                                src={`data:image/png;base64,${author.userInfo.avatar}`}
+                                                alt={'Avatar'}
+                                            />
+                                        }
+                                        style={{ background: COLOR_BACKGROUND }}
+                                    />
+                                </div>
+                                <div className={'author-name'}>{author.userInfo.nickname}</div>
+                            </div>
+                        )}
+                    </FlexBox>
+                </Card>
+            </Draggable>
+            {contextHolder}
+        </>
+    )
+}
+
+export default StoreCard

src/renderer/src/components/tools/StoreCard.tsx

@@ -3,7 +3,12 @@ import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import protocolCheck from 'custom-protocol-check'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/tools/store-card.scss'
-import { COLOR_BACKGROUND, COLOR_MAIN, COLOR_PRODUCTION } from '@/constants/common.constants'
+import {
+    COLOR_BACKGROUND,
+    COLOR_MAIN,
+    COLOR_PRODUCTION,
+    DATABASE_SELECT_SUCCESS
+} from '@/constants/common.constants'
 import { checkDesktop, omitText } from '@/util/common'
 import { getLoginStatus, getUserId } from '@/util/auth'
 import {
@@ -12,7 +17,13 @@ import {
     navigateToStore,
     navigateToView
 } from '@/util/navigation'
-import { r_tool_add_favorite, r_tool_remove_favorite } from '@/services/tool'
+import {
+    l_tool_get,
+    l_tool_install,
+    r_tool_add_favorite,
+    r_tool_detail,
+    r_tool_remove_favorite
+} from '@/services/tool'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import DragHandle from '@/components/dnd/DragHandle'
@@ -29,6 +40,7 @@ interface StoreCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement
     ver: string
     platform: Platform
     supportPlatform: Platform[]
+    vers: Record<Platform, string>
     favorite: boolean
 }
 
@@ -52,6 +64,7 @@ const StoreCard = ({
     ver,
     platform,
     supportPlatform,
+    vers,
     favorite,
     ...props
 }: StoreCardProps) => {
@@ -60,6 +73,9 @@ const StoreCard = ({
     const cardRef = useRef<HTMLDivElement>(null)
     const [favorite_, setFavorite_] = useState<boolean>(favorite)
     const [userId, setUserId] = useState('')
+    const [isInstalling, setIsInstalling] = useState(false)
+    const [isInstalled, setIsInstalled] = useState(true)
+    const [isAvailableUpdate, setIsAvailableUpdate] = useState(false)
 
     useEffect(() => {
         cardRef.current && VanillaTilt.init(cardRef.current, options)
@@ -143,6 +159,59 @@ const StoreCard = ({
         }
     }
 
+    const handleOnInstallBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        if (isInstalling) {
+            return
+        }
+        setIsInstalling(true)
+
+        void message.loading({
+            content: isAvailableUpdate ? '更新中' : '安装中',
+            key: 'INSTALLING',
+            duration: 0
+        })
+        const newTools = {} as Record<Platform, ToolVo>
+        const flags: boolean[] = []
+        supportPlatform.forEach((platform) => {
+            void r_tool_detail(author.username, toolId, 'latest', platform)
+                .then((res) => {
+                    const response = res.data
+                    switch (response.code) {
+                        case DATABASE_SELECT_SUCCESS:
+                            newTools[platform] = response.data!
+                            flags.push(true)
+                            break
+                        default:
+                            flags.push(false)
+                    }
+                })
+                .catch(() => {
+                    flags.push(false)
+                })
+                .finally(() => {
+                    message.destroy('INSTALLING')
+                    setIsInstalling(false)
+                    if (flags.length !== supportPlatform.length) {
+                        return
+                    }
+                    if (flags.every((item) => item)) {
+                        void l_tool_install({ [`${author.username}:${toolId}`]: newTools }).then(
+                            () => {
+                                void message.success(isAvailableUpdate ? '更新成功' : '安装成功')
+                                setIsInstalled(true)
+                                setIsAvailableUpdate(false)
+                            }
+                        )
+                    } else {
+                        void message.error(
+                            isAvailableUpdate ? '更新失败，请稍后重试' : '安装失败，请稍后重试'
+                        )
+                    }
+                })
+        })
+    }
+
     const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
         void modal.confirm({
@@ -195,6 +264,30 @@ const StoreCard = ({
         navigateToView(navigate, author.username, toolId, 'WEB')
     }
 
+    useEffect(() => {
+        void l_tool_get().then((value) => {
+            const tools = value[`${author.username}:${toolId}`]
+            if (!tools) {
+                setIsInstalled(false)
+                return
+            }
+            setIsInstalled(true)
+
+            if (
+                Object.keys(tools).length !== supportPlatform.length ||
+                !supportPlatform.every((platform) => Object.keys(tools).includes(platform))
+            ) {
+                setIsAvailableUpdate(true)
+                return
+            }
+
+            if (supportPlatform.some((platform) => vers[platform] !== tools[platform].ver)) {
+                setIsAvailableUpdate(true)
+                return
+            }
+        })
+    }, [])
+
     return (
         <>
             <Draggable
@@ -223,6 +316,15 @@ const StoreCard = ({
                                 </AntdTag>
                             </div>
                             <div className={'operation'}>
+                                {(!isInstalled || isAvailableUpdate) && (
+                                    <AntdTooltip title={isAvailableUpdate ? '更新' : '安装'}>
+                                        <Icon
+                                            component={IconOxygenDownload}
+                                            onClick={handleOnInstallBtnClick}
+                                            disabled={isInstalling}
+                                        />
+                                    </AntdTooltip>
+                                )}
                                 {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
                                     <AntdTooltip title={'Android 端'}>
                                         <Icon

src/renderer/src/electron.d.ts

@@ -10,5 +10,7 @@ declare global {
         installTool: (
             newTools: Record<string, Record<Platform, ToolVo>>
         ) => Promise<Record<string, Record<Platform, ToolVo>>>
+
+        getInstalledTool: () => Promise<Record<string, Record<Platform, ToolVo>>>
     }
 }

src/renderer/src/pages/Tools/Local.tsx

@@ -0,0 +1,138 @@
+import { UIEvent } from 'react'
+import '@/assets/css/pages/tools/local.scss'
+import { checkDesktop } from '@/util/common'
+import { l_tool_get } from '@/services/tool'
+import FlexBox from '@/components/common/FlexBox'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import LocalCard from '@/components/tools/LocalCard'
+
+const Local = () => {
+    const scrollTopRef = useRef(0)
+    const [isLoading, setIsLoading] = useState(false)
+    const [toolData, setToolData] = useState<ToolVo[]>([])
+    const [isHideSearch, setIsHideSearch] = useState(false)
+
+    const handleOnSearch = (value: string) => {
+        getTool(value)
+    }
+
+    const handleOnScroll = (event: UIEvent<HTMLDivElement>) => {
+        if (event.currentTarget.scrollTop < scrollTopRef.current) {
+            setIsHideSearch(false)
+        } else {
+            setIsHideSearch(true)
+        }
+        scrollTopRef.current = event.currentTarget.scrollTop
+    }
+
+    const getTool = (searchValue: string) => {
+        if (isLoading) {
+            return
+        }
+        setIsLoading(true)
+        void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })
+
+        void l_tool_get()
+            .then((data) => {
+                const list: ToolVo[] = []
+                Object.values(data).forEach((value) =>
+                    Object.values(value).forEach((item) => list.push(item))
+                )
+                setToolData(
+                    list.filter(
+                        ({ name, keywords }) =>
+                            name.toLowerCase().includes(searchValue.toLowerCase()) ||
+                            keywords.some((value) =>
+                                value.toLowerCase().includes(searchValue.toLowerCase())
+                            )
+                    )
+                )
+            })
+            .catch((e) => {
+                void message.error('加载失败，请稍后重试')
+                console.error('Get installed tools error: ', e)
+            })
+            .finally(() => {
+                setIsLoading(false)
+                message.destroy('LOADING')
+            })
+    }
+
+    useEffect(() => {
+        getTool('')
+    }, [])
+
+    return (
+        <>
+            <FitFullscreen data-component={'tools-store'}>
+                <HideScrollbar
+                    isShowVerticalScrollbar
+                    autoHideWaitingTime={1000}
+                    onScroll={handleOnScroll}
+                >
+                    <div className={`search${isHideSearch ? ' hide' : ''}`}>
+                        <AntdInput.Search
+                            enterButton
+                            allowClear
+                            loading={isLoading}
+                            onSearch={handleOnSearch}
+                            placeholder={'请输入工具名或关键字'}
+                        />
+                    </div>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                        {!toolData.length && <div className={'no-tool'}>未找到任何工具</div>}
+                        {toolData
+                            ?.reduce((previousValue: ToolVo[], currentValue) => {
+                                if (
+                                    !previousValue.some(
+                                        (value) =>
+                                            value.author.id === currentValue.author.id &&
+                                            value.toolId === currentValue.toolId
+                                    )
+                                ) {
+                                    previousValue.push(currentValue)
+                                }
+                                return previousValue
+                            }, [])
+                            .map((item) => {
+                                const tools = toolData.filter(
+                                    (value) =>
+                                        value.author.id === item.author.id &&
+                                        value.toolId === item.toolId
+                                )
+                                const webTool = tools.find((value) => value.platform === 'WEB')
+                                const desktopTool = tools.find(
+                                    (value) => value.platform === 'DESKTOP'
+                                )
+                                const androidTool = tools.find(
+                                    (value) => value.platform === 'ANDROID'
+                                )
+                                const firstTool =
+                                    (checkDesktop()
+                                        ? desktopTool || webTool
+                                        : webTool || desktopTool) || androidTool
+
+                                return (
+                                    <LocalCard
+                                        key={firstTool!.id}
+                                        icon={firstTool!.icon}
+                                        toolName={firstTool!.name}
+                                        toolId={firstTool!.toolId}
+                                        toolDesc={firstTool!.description}
+                                        author={firstTool!.author}
+                                        ver={firstTool!.ver}
+                                        platform={firstTool!.platform}
+                                        supportPlatform={tools.map((value) => value.platform)}
+                                        favorite={firstTool!.favorite}
+                                    />
+                                )
+                            })}
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullscreen>
+        </>
+    )
+}
+
+export default Local

src/renderer/src/pages/Tools/Store.tsx

@@ -142,6 +142,13 @@ const Store = () => {
                                         ver={firstTool!.ver}
                                         platform={firstTool!.platform}
                                         supportPlatform={tools.map((value) => value.platform)}
+                                        vers={tools.reduce(
+                                            (previousValue, currentValue) => ({
+                                                ...previousValue,
+                                                [currentValue.platform]: currentValue.ver
+                                            }),
+                                            {} as Record<Platform, string>
+                                        )}
                                         favorite={firstTool!.favorite}
                                     />
                                 )

src/renderer/src/pages/Tools/User.tsx

@@ -206,6 +206,13 @@ const User = () => {
                                             ver={firstTool!.ver}
                                             platform={firstTool!.platform}
                                             supportPlatform={tools.map((value) => value.platform)}
+                                            vers={tools.reduce(
+                                                (previousValue, currentValue) => ({
+                                                    ...previousValue,
+                                                    [currentValue.platform]: currentValue.ver
+                                                }),
+                                                {} as Record<Platform, string>
+                                            )}
                                             favorite={firstTool!.favorite}
                                         />
                                     )

src/renderer/src/pages/Tools/View.tsx

@@ -1,8 +1,13 @@
 import '@/assets/css/pages/tools/view.scss'
 import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
 import { getLoginStatus } from '@/util/auth'
-import { navigateToRepository, navigateToRoot, navigateToView } from '@/util/navigation'
+import {
-import { r_tool_detail } from '@/services/tool'
+    navigateToInstall,
+    navigateToRepository,
+    navigateToRoot,
+    navigateToView
+} from '@/util/navigation'
+import { l_tool_detail, r_tool_detail } from '@/services/tool'
 import compiler from '@/components/Playground/compiler'
 import { IImportMap } from '@/components/Playground/shared'
 import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
@@ -64,6 +69,24 @@ const View = () => {
         setIsLoading(true)
         void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
 
+        if (searchParams.get('source') === 'local') {
+            void l_tool_detail(username!, toolId!, searchParams.get('platform') as Platform)
+                .then((tool) => {
+                    if (!tool) {
+                        void message.error('未找到指定工具')
+                        navigateToInstall(navigate)
+                        return
+                    }
+                    render(tool)
+                })
+                .finally(() => {
+                    setIsLoading(false)
+                    message.destroy('LOADING')
+                })
+
+            return
+        }
+
         void r_tool_detail(
             username!,
             toolId!,

src/renderer/src/pages/Tools/index.tsx

@@ -623,6 +623,14 @@ const Tools = () => {
                                                     supportPlatform={tools.map(
                                                         (value) => value.platform
                                                     )}
+                                                    vers={tools.reduce(
+                                                        (previousValue, currentValue) => ({
+                                                            ...previousValue,
+                                                            [currentValue.platform]:
+                                                                currentValue.ver
+                                                        }),
+                                                        {} as Record<Platform, string>
+                                                    )}
                                                     favorite={firstTool!.favorite}
                                                 />
                                             )

src/renderer/src/pages/ToolsFramework.tsx

@@ -108,6 +108,12 @@ const ToolsFramework = () => {
                                     icon={tools[1].icon}
                                     text={tools[1].name}
                                 />
+                                <Sidebar.Item
+                                    end
+                                    path={'/install'}
+                                    icon={tools[2].icon}
+                                    text={tools[2].name}
+                                />
                             </Sidebar.ItemList>
                             <Sidebar.Separate />
                             <Droppable id={'menu'} className={'menu-droppable'}>
@@ -145,7 +151,8 @@ const ToolsFramework = () => {
                                                                 authorUsername,
                                                                 toolId,
                                                                 platform,
-                                                                ver
+                                                                ver === 'local' ? '' : ver,
+                                                                ver === 'local'
                                                             )}
                                                             icon={icon}
                                                             text={toolName}

src/renderer/src/router/tools.tsx

@@ -19,6 +19,16 @@ export const tools: RouteJsonObject[] = [
         icon: lazy(() => import('~icons/oxygen/home')),
         menu: true
     },
+    {
+        path: 'install',
+        absolutePath: '/install',
+        id: 'tools-install',
+        component: lazy(() => import('@/pages/Tools/Local')),
+        name: '本地安装',
+        titlePostfix: ' - 本地',
+        icon: lazy(() => import('~icons/oxygen/installed')),
+        menu: true
+    },
     {
         path: '',
         absolutePath: '/',

src/renderer/src/services/tool.ts

@@ -47,3 +47,14 @@ export const r_tool_remove_favorite = (param: ToolFavoriteAddRemoveParam) =>
 
 export const r_tool_get_favorite = (param: PageParam) =>
     request.get<PageVo<ToolVo>>(URL_TOOL_FAVORITE, param)
+
+export const l_tool_get = () => window.api.getInstalledTool()
+
+export const l_tool_install = (tools: Record<string, Record<Platform, ToolVo>>) =>
+    window.api.installTool(tools)
+
+export const l_tool_detail = async (
+    username: string,
+    toolId: string,
+    platform: Platform
+): Promise<ToolVo | undefined> => (await l_tool_get())?.[`${username}:${toolId}`]?.[platform]

src/renderer/src/util/navigation.ts

@@ -17,6 +17,10 @@ export const navigateToRepository = (navigate: NavigateFunction, options?: Navig
     navigate('/repository', options)
 }
 
+export const navigateToInstall = (navigate: NavigateFunction, options?: NavigateOptions) => {
+    navigate('/install', options)
+}
+
 export const navigateToLogin = (
     navigate: NavigateFunction,
     locationSearch?: string,
@@ -35,12 +39,19 @@ export const navigateToView = (
     toolId: string,
     platform: Platform,
     version?: string,
+    local?: boolean,
     options?: NavigateOptions
 ) => {
-    navigate(
+    const url = new URL(
-        `/view/${username}/${toolId}${version ? `/${version}` : ''}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`,
+        `/view/${username}/${toolId}${version ? `/${version}` : ''}`,
-        options
+        window.location.href
     )
+    if (platform !== import.meta.env.VITE_PLATFORM) {
+        url.searchParams.append('platform', platform)
+    }
+    local && url.searchParams.append('source', 'local')
+
+    navigate(`${url.pathname}${url.search}`, options)
 }
 
 export const navigateToSource = (
@@ -51,10 +62,14 @@ export const navigateToSource = (
     version?: string,
     options?: NavigateOptions
 ) => {
-    navigate(
+    const url = new URL(
-        `/source/${username}/${toolId}${version ? `/${version}` : ''}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`,
+        `/source/${username}/${toolId}${version ? `/${version}` : ''}`,
-        options
+        window.location.href
     )
+    if (platform !== import.meta.env.VITE_PLATFORM) {
+        url.searchParams.append('platform', platform)
+    }
+    navigate(`${url.pathname}${url.search}`, options)
 }
 
 export const navigateToRedirect = (
@@ -104,10 +119,12 @@ export const navigateToEdit = (
     platform: Platform,
     options?: NavigateOptions
 ) => {
-    navigate(
+    const url = new URL(`/edit/${toolId}`, window.location.href)
-        `/edit/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`,
+    if (platform !== import.meta.env.VITE_PLATFORM) {
-        options
+        url.searchParams.append('platform', platform)
-    )
+    }
+
+    navigate(`${url.pathname}${url.search}`, options)
 }
 
 export const navigateToUser = (navigate: NavigateFunction, options?: NavigateOptions) => {
@@ -122,6 +139,17 @@ export const getViewPath = (
     username: string,
     toolId: string,
     platform: Platform,
-    version?: string
+    version?: string,
-) =>
+    local?: boolean
-    `/view/${username}/${toolId}${version ? `/${version}` : ''}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+) => {
+    const url = new URL(
+        `/view/${username}/${toolId}${version ? `/${version}` : ''}`,
+        window.location.href
+    )
+    if (platform !== import.meta.env.VITE_PLATFORM) {
+        url.searchParams.append('platform', platform)
+    }
+    local && url.searchParams.append('source', 'local')
+
+    return `${url.pathname}${url.search}`
+}