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

Feat(Menu): Support multi-platform

Browse Source 
Support add multi-platform tool to menu
This commit is contained in:
Fat Snake
2024-05-01 18:09:37 +08:00
parent 2f70ae8ced
commit de9d1b4b74
5 changed files with 41 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/tools/RepositoryCard.tsx
View File

@@ -12,6 +12,7 @@ interface RepositoryCardProps
toolName: string toolName: string
toolId: string toolId: string
ver: string ver: string
platform: Platform
options?: TiltOptions options?: TiltOptions
onOpen?: () => void onOpen?: () => void
onEdit?: () => void onEdit?: () => void
@@ -29,6 +30,7 @@ const RepositoryCard = ({
toolName, toolName,
toolId, toolId,
ver, ver,
platform,
options = { options = {
reverse: true, reverse: true,
max: 8, max: 8,
@@ -52,7 +54,10 @@ const RepositoryCard = ({
}, [options]) }, [options])
return ( return (
<Draggable id={toolId} data={{ icon, toolName, toolId, authorUsername: '!', ver }}> <Draggable
id={`!:${toolId}:${ver}:${platform}`}
data={{ icon, toolName, toolId, authorUsername: '!', ver, platform }}
>
<Card <Card
data-component={'component-repository-card'} data-component={'component-repository-card'}
style={{ overflow: 'visible', ...style }} style={{ overflow: 'visible', ...style }}

15
src/components/tools/StoreCard.tsx
View File

@@ -179,19 +179,26 @@ const StoreCard = ({
) )
return return
} }
navigateToView(navigate, author.username, toolId, platform) navigateToView(navigate, author.username, toolId, 'DESKTOP')
} }
const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => { const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
e.stopPropagation() e.stopPropagation()
navigateToView(navigate, author.username, toolId, platform) navigateToView(navigate, author.username, toolId, 'WEB')
} }
return ( return (
<> <>
<Draggable <Draggable
id={`${author.username}:${toolId}:${ver}`} id={`${author.username}:${toolId}:${ver}:${platform}`}
data={{ icon, toolName, toolId, authorUsername: author.username, ver: '' }} data={{
icon,
toolName,
toolId,
authorUsername: author.username,
ver: '',
platform: platform
}}
> >
<Card <Card
data-component={'component-store-card'} data-component={'component-store-card'}

1
src/global.d.ts vendored
View File

@@ -661,4 +661,5 @@ interface ToolMenuItem {
toolId: string toolId: string
authorUsername: string authorUsername: string
ver: string ver: string
platform: Platform
} }

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

@@ -170,6 +170,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
toolName={selectedTool.name} toolName={selectedTool.name}
toolId={selectedTool.toolId} toolId={selectedTool.toolId}
ver={selectedTool.ver} ver={selectedTool.ver}
platform={selectedTool.platform}
onOpen={handleOnOpenTool} onOpen={handleOnOpenTool}
onEdit={handleOnEditTool()} onEdit={handleOnEditTool()}
onSource={handleOnSourceTool()} onSource={handleOnSourceTool()}

37
src/pages/ToolsFramework.tsx
View File

@@ -3,7 +3,7 @@ import { arrayMove, SortableContext } from '@dnd-kit/sortable'
import type { DragEndEvent } from '@dnd-kit/core/dist/types' import type { DragEndEvent } from '@dnd-kit/core/dist/types'
import '@/assets/css/pages/tools-framework.scss' import '@/assets/css/pages/tools-framework.scss'
import { tools } from '@/router/tools' import { tools } from '@/router/tools'
import { getToolMenuItem, saveToolMenuItem } from '@/util/common' import { checkDesktop, getToolMenuItem, saveToolMenuItem } from '@/util/common'
import { getViewPath } from '@/util/navigation' import { getViewPath } from '@/util/navigation'
import FitFullscreen from '@/components/common/FitFullscreen' import FitFullscreen from '@/components/common/FitFullscreen'
import Sidebar from '@/components/common/Sidebar' import Sidebar from '@/components/common/Sidebar'
@@ -34,12 +34,12 @@ const ToolsFramework = () => {
const handleOnDragEnd = ({ active, over }: DragEndEvent) => { const handleOnDragEnd = ({ active, over }: DragEndEvent) => {
if (over && active.id !== over?.id) { if (over && active.id !== over?.id) {
const activeIndex = toolMenuItem.findIndex( const activeIndex = toolMenuItem.findIndex(
({ authorUsername, toolId, ver }) => ({ authorUsername, toolId, ver, platform }) =>
`${authorUsername}:${toolId}:${ver}` === active.id `${authorUsername}:${toolId}:${ver}:${platform}` === active.id
) )
const overIndex = toolMenuItem.findIndex( const overIndex = toolMenuItem.findIndex(
({ authorUsername, toolId, ver }) => ({ authorUsername, toolId, ver, platform }) =>
`${authorUsername}:${toolId}:${ver}` === over.id `${authorUsername}:${toolId}:${ver}:${platform}` === over.id
) )
setToolMenuItem(arrayMove(toolMenuItem, activeIndex, overIndex)) setToolMenuItem(arrayMove(toolMenuItem, activeIndex, overIndex))
} }
@@ -47,8 +47,8 @@ const ToolsFramework = () => {
if (!over) { if (!over) {
setToolMenuItem( setToolMenuItem(
toolMenuItem.filter( toolMenuItem.filter(
({ authorUsername, toolId, ver }) => ({ authorUsername, toolId, ver, platform }) =>
`${authorUsername}:${toolId}:${ver}` !== active?.id `${authorUsername}:${toolId}:${ver}:${platform}` !== active?.id
) )
) )
} }
@@ -63,7 +63,12 @@ const ToolsFramework = () => {
ver === newItem.ver ver === newItem.ver
) === -1 ) === -1
) { ) {
setToolMenuItem([...toolMenuItem, newItem]) if (!checkDesktop() && newItem.platform === 'DESKTOP') {
void message.warning('暂不支持添加桌面端应用')
setToolMenuItem(toolMenuItem)
} else {
setToolMenuItem([...toolMenuItem, newItem])
}
} }
} }
@@ -110,8 +115,8 @@ const ToolsFramework = () => {
<Sidebar.ItemList> <Sidebar.ItemList>
<SortableContext <SortableContext
items={toolMenuItem.map( items={toolMenuItem.map(
({ authorUsername, toolId, ver }) => ({ authorUsername, toolId, ver, platform }) =>
`${authorUsername}:${toolId}:${ver}` `${authorUsername}:${toolId}:${ver}:${platform}`
)} )}
> >
{toolMenuItem.map( {toolMenuItem.map(
@@ -120,16 +125,18 @@ const ToolsFramework = () => {
toolName, toolName,
toolId, toolId,
authorUsername, authorUsername,
ver ver,
platform
}) => ( }) => (
<Sortable <Sortable
id={`${authorUsername}:${toolId}:${ver}`} id={`${authorUsername}:${toolId}:${ver}:${platform}`}
data={{ data={{
icon, icon,
toolName, toolName,
toolId, toolId,
authorUsername, authorUsername,
ver ver,
platform
}} }}
isDelete={isDelete} isDelete={isDelete}
> >
@@ -137,12 +144,12 @@ const ToolsFramework = () => {
path={getViewPath( path={getViewPath(
authorUsername, authorUsername,
toolId, toolId,
import.meta.env.VITE_PLATFORM, platform,
ver ver
)} )}
icon={icon} icon={icon}
text={toolName} text={toolName}
key={`${authorUsername}:${toolId}`} key={`${authorUsername}:${toolId}:${ver}:${platform}`}
extend={<DragHandle padding={10} />} extend={<DragHandle padding={10} />}
/> />
</Sortable> </Sortable>