Feat(Tool): Support install tool
Support install tool and execute locally
This commit is contained in:
110
src/renderer/src/assets/css/components/tools/local-card.scss
Normal file
110
src/renderer/src/assets/css/components/tools/local-card.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
49
src/renderer/src/assets/css/pages/tools/local.scss
Normal file
49
src/renderer/src/assets/css/pages/tools/local.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
1
src/renderer/src/assets/svg/download.svg
Normal file
1
src/renderer/src/assets/svg/download.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 491 B |
1
src/renderer/src/assets/svg/installed.svg
Normal file
1
src/renderer/src/assets/svg/installed.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 748 B |
206
src/renderer/src/components/tools/LocalCard.tsx
Normal file
206
src/renderer/src/components/tools/LocalCard.tsx
Normal file
@@ -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
|
||||
@@ -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
|
||||
|
||||
2
src/renderer/src/electron.d.ts
vendored
2
src/renderer/src/electron.d.ts
vendored
@@ -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>>>
|
||||
}
|
||||
}
|
||||
|
||||
138
src/renderer/src/pages/Tools/Local.tsx
Normal file
138
src/renderer/src/pages/Tools/Local.tsx
Normal file
@@ -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
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
|
||||
@@ -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 { r_tool_detail } from '@/services/tool'
|
||||
import {
|
||||
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!,
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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: '/',
|
||||
|
||||
@@ -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]
|
||||
|
||||
@@ -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(
|
||||
`/view/${username}/${toolId}${version ? `/${version}` : ''}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`,
|
||||
options
|
||||
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')
|
||||
|
||||
navigate(`${url.pathname}${url.search}`, options)
|
||||
}
|
||||
|
||||
export const navigateToSource = (
|
||||
@@ -51,10 +62,14 @@ export const navigateToSource = (
|
||||
version?: string,
|
||||
options?: NavigateOptions
|
||||
) => {
|
||||
navigate(
|
||||
`/source/${username}/${toolId}${version ? `/${version}` : ''}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`,
|
||||
options
|
||||
const url = new URL(
|
||||
`/source/${username}/${toolId}${version ? `/${version}` : ''}`,
|
||||
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(
|
||||
`/edit/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`,
|
||||
options
|
||||
)
|
||||
const url = new URL(`/edit/${toolId}`, window.location.href)
|
||||
if (platform !== import.meta.env.VITE_PLATFORM) {
|
||||
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
|
||||
) =>
|
||||
`/view/${username}/${toolId}${version ? `/${version}` : ''}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
|
||||
version?: string,
|
||||
local?: boolean
|
||||
) => {
|
||||
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}`
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user