FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Feat(Menu): Add tool menu via drag and drop

Browse Source 
Drag and drop a tool card to add tool menu
This commit is contained in:
Fat Snake
2024-04-30 13:42:36 +08:00
parent 843f47346a
commit 7b61a5fdb3
30 changed files with 785 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/Tools/Store.tsx
View File

@@ -134,12 +134,7 @@ const Store = () => {
return (
<StoreCard
key={firstTool!.id}
icon={
<img
src={`data:image/svg+xml;base64,${firstTool!.icon}`}
alt={'Icon'}
/>
}
icon={firstTool!.icon}
toolName={firstTool!.name}
toolId={firstTool!.toolId}
toolDesc={firstTool!.description}

7
src/pages/Tools/User.tsx
View File

@@ -197,12 +197,7 @@ const User = () => {
return (
<StoreCard
key={firstTool!.id}
icon={
<img
src={`data:image/svg+xml;base64,${firstTool!.icon}`}
alt={'Icon'}
/>
}
icon={firstTool!.icon}
toolName={firstTool!.name}
toolId={firstTool!.toolId}
toolDesc={firstTool!.description}

13
src/pages/Tools/View.tsx
View File

@@ -32,7 +32,10 @@ const View = () => {
.compile(files, importMap, toolVo.entryPoint)
.then((result) => {
const output = result.outputFiles[0].text
setCompiledCode(`${output}\n${baseDist}`)
setCompiledCode('')
setTimeout(() => {
setCompiledCode(`${output}\n${baseDist}`)
})
})
.catch((reason) => {
void message.error(`编译失败：${reason}`)
@@ -72,9 +75,7 @@ const View = () => {
break
case DATABASE_NO_RECORD_FOUND:
void message.error('未找到指定工具')
setTimeout(() => {
navigateToRepository(navigate)
}, 3000)
navigateToRepository(navigate)
break
default:
void message.error('获取工具信息失败，请稍后重试')
@@ -103,11 +104,11 @@ const View = () => {
return
}
if (username === '!' && !ver) {
navigateToView(navigate, '!', toolId!, platform as Platform)
navigateToView(navigate, '!', toolId!, platform as Platform, 'latest')
return
}
getTool()
}, [])
}, [username, toolId, ver, searchParams])
return (
<FitFullscreen data-component={'tools-view'}>

125
src/pages/Tools/index.tsx
View File

@@ -166,9 +166,10 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
return (
<RepositoryCard
icon={<img src={`data:image/svg+xml;base64,${selectedTool.icon}`} alt={'Icon'} />}
icon={selectedTool.icon}
toolName={selectedTool.name}
toolId={selectedTool.toolId}
ver={selectedTool.ver}
onOpen={handleOnOpenTool}
onEdit={handleOnEditTool()}
onSource={handleOnSourceTool()}
@@ -563,65 +564,71 @@ const Tools = () => {
))}
{hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
</FlexBox>
<FlexBox className={'favorite-divider'}>
<div />
<div className={'divider-text'}>收藏</div>
<div />
</FlexBox>
<FlexBox direction={'horizontal'} className={'star-content'}>
{starToolData
?.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 = starToolData.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 (
<StoreCard
key={firstTool!.id}
icon={
<img
src={`data:image/svg+xml;base64,${firstTool!.icon}`}
alt={'Icon'}
/>
{starToolData.length ? (
<>
<FlexBox className={'favorite-divider'}>
<div />
<div className={'divider-text'}>收藏</div>
<div />
</FlexBox>
<FlexBox direction={'horizontal'} className={'star-content'}>
{starToolData
?.reduce((previousValue: ToolVo[], currentValue) => {
if (
!previousValue.some(
(value) =>
value.author.id ===
currentValue.author.id &&
value.toolId === currentValue.toolId
)
) {
previousValue.push(currentValue)
}
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}
/>
)
})}
{hasNextStarPage && <LoadMoreCard onClick={handleOnLoadMoreStar} />}
</FlexBox>
return previousValue
}, [])
.map((item) => {
const tools = starToolData.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 (
<StoreCard
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}
/>
)
})}
{hasNextStarPage && (
<LoadMoreCard onClick={handleOnLoadMoreStar} />
)}
</FlexBox>
</>
) : undefined}
</FlexBox>
</HideScrollbar>
</FitFullscreen>