-
- }
- style={{ background: COLOR_BACKGROUND }}
- />
+
+
+
+
+
+ {platform.slice(0, 1)}-{ver}
+
+
+
+ {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
+
+
+
+ )}
+ {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
+
+
+
+ )}
+ {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
+
+
+
+ )}
+
+
+
+ {author.id !== userId && (
+
+
+
+ )}
+
-
- {author.userInfo.nickname}
-
- {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
-
-
-
+
+
+
+
+
{toolName}
+
{`ID: ${toolId}`}
+ {toolDesc &&
{`简介：${toolDesc}`}
}
+
+ {showAuthor && (
+
+
+
+ }
+ style={{ background: COLOR_BACKGROUND }}
+ />
+
+
+ {author.userInfo.nickname}
+
+
)}
- {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
-
-
-
- )}
- {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
-
-
-
- )}
-
-
-
- {author.id !== userId && (
-
-
-
- )}
-
+
+
+
{contextHolder}
)
diff --git a/src/renderer/src/constants/common.constants.ts b/src/renderer/src/constants/common.constants.ts
index ead8e99..99e5df7 100644
--- a/src/renderer/src/constants/common.constants.ts
+++ b/src/renderer/src/constants/common.constants.ts
@@ -1,7 +1,7 @@
export const PRODUCTION_NAME = 'Oxygen Toolbox'
export const STORAGE_TOKEN_KEY = 'JWT_TOKEN'
export const STORAGE_USER_INFO_KEY = 'USER_INFO'
-export const STORAGE_FAVORITE_KEY = 'FAVORITE'
+export const STORAGE_TOOL_MENU_ITEM_KEY = 'TOOL_MENU_ITEM'
export const COLOR_ORIGIN = 'white'
export const COLOR_PRODUCTION = '#4E47BB'
export const COLOR_MAIN = COLOR_PRODUCTION
diff --git a/src/renderer/src/global.d.ts b/src/renderer/src/global.d.ts
index 233d760..fbed311 100644
--- a/src/renderer/src/global.d.ts
+++ b/src/renderer/src/global.d.ts
@@ -661,3 +661,11 @@ interface ToolFavoriteAddRemoveParam {
toolId: string
platform: Platform
}
+
+interface ToolMenuItem {
+ icon: string
+ toolName: string
+ toolId: string
+ authorUsername: string
+ ver: string
+}
diff --git a/src/renderer/src/pages/Tools/Store.tsx b/src/renderer/src/pages/Tools/Store.tsx
index f187751..eca029d 100644
--- a/src/renderer/src/pages/Tools/Store.tsx
+++ b/src/renderer/src/pages/Tools/Store.tsx
@@ -134,12 +134,7 @@ const Store = () => {
return (
- }
+ icon={firstTool!.icon}
toolName={firstTool!.name}
toolId={firstTool!.toolId}
toolDesc={firstTool!.description}
diff --git a/src/renderer/src/pages/Tools/User.tsx b/src/renderer/src/pages/Tools/User.tsx
index 2124196..4fb4cd1 100644
--- a/src/renderer/src/pages/Tools/User.tsx
+++ b/src/renderer/src/pages/Tools/User.tsx
@@ -197,12 +197,7 @@ const User = () => {
return (
- }
+ icon={firstTool!.icon}
toolName={firstTool!.name}
toolId={firstTool!.toolId}
toolDesc={firstTool!.description}
diff --git a/src/renderer/src/pages/Tools/View.tsx b/src/renderer/src/pages/Tools/View.tsx
index d61e981..ab10c0b 100644
--- a/src/renderer/src/pages/Tools/View.tsx
+++ b/src/renderer/src/pages/Tools/View.tsx
@@ -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 (
diff --git a/src/renderer/src/pages/Tools/index.tsx b/src/renderer/src/pages/Tools/index.tsx
index 9269bbb..1a3d848 100644
--- a/src/renderer/src/pages/Tools/index.tsx
+++ b/src/renderer/src/pages/Tools/index.tsx
@@ -166,9 +166,10 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
return (
}
+ 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 && }
-
-
- 收藏
-
-
-
- {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 (
-
+ {starToolData.length ? (
+ <>
+
+
+ 收藏
+
+
+
+ {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 && }
-
+ 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 (
+ value.platform
+ )}
+ favorite={firstTool!.favorite}
+ />
+ )
+ })}
+ {hasNextStarPage && (
+
+ )}
+
+
+ ) : undefined}
diff --git a/src/renderer/src/pages/ToolsFramework.tsx b/src/renderer/src/pages/ToolsFramework.tsx
index 13bd59c..4b284cb 100644
--- a/src/renderer/src/pages/ToolsFramework.tsx
+++ b/src/renderer/src/pages/ToolsFramework.tsx
@@ -1,70 +1,184 @@
+import { DndContext, DragOverEvent, DragStartEvent } from '@dnd-kit/core'
+import Droppable from '@/components/dnd/Droppable'
+import type { DragEndEvent } from '@dnd-kit/core/dist/types'
import '@/assets/css/pages/tools-framework.scss'
import { tools } from '@/router/tools'
import FitFullscreen from '@/components/common/FitFullscreen'
import Sidebar from '@/components/common/Sidebar'
import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
+import { arrayMove, SortableContext } from '@dnd-kit/sortable'
+import { getViewPath } from '@/util/navigation.tsx'
+import Sortable from '@/components/dnd/Sortable.tsx'
+import DragHandle from '@/components/dnd/DragHandle.tsx'
+import DraggableOverlay from '@/components/dnd/DraggableOverlay.tsx'
+import { getToolMenuItem, saveToolMenuItem } from '@/util/common.tsx'
const ToolsFramework = () => {
+ const [isDelete, setIsDelete] = useState(false)
+ const [toolMenuItem, setToolMenuItem] = useState
(getToolMenuItem)
+ const [activeItem, setActiveItem] = useState(null)
+
+ const handleOnDragStart = ({ active }: DragStartEvent) => {
+ setActiveItem(active.data.current as ToolMenuItem)
+ }
+
+ const handleOnDragOver = ({ over }: DragOverEvent) => {
+ setIsDelete(over === null)
+ }
+
+ const handleOnDragEnd = ({ active, over }: DragEndEvent) => {
+ if (over && active.id !== over?.id) {
+ const activeIndex = toolMenuItem.findIndex(
+ ({ authorUsername, toolId, ver }) =>
+ `${authorUsername}:${toolId}:${ver}` === active.id
+ )
+ const overIndex = toolMenuItem.findIndex(
+ ({ authorUsername, toolId, ver }) =>
+ `${authorUsername}:${toolId}:${ver}` === over.id
+ )
+ setToolMenuItem(arrayMove(toolMenuItem, activeIndex, overIndex))
+ }
+
+ if (!over) {
+ setToolMenuItem(
+ toolMenuItem.filter(
+ ({ authorUsername, toolId, ver }) =>
+ `${authorUsername}:${toolId}:${ver}` !== active?.id
+ )
+ )
+ }
+
+ if (!active.data.current?.sortable && over) {
+ const newItem = active.data.current as ToolMenuItem
+ if (
+ toolMenuItem.findIndex(
+ ({ authorUsername, toolId, ver }) =>
+ authorUsername === newItem.authorUsername &&
+ toolId === newItem.toolId &&
+ ver === newItem.ver
+ ) === -1
+ ) {
+ setToolMenuItem([...toolMenuItem, newItem])
+ }
+ }
+
+ console.log('active', active)
+ console.log('over', over)
+
+ setActiveItem(null)
+ }
+
+ const handleOnDragCancel = () => {
+ setActiveItem(null)
+ }
+
+ useEffect(() => {
+ saveToolMenuItem(toolMenuItem)
+ }, [toolMenuItem])
+
return (
<>
-
-
-
-
-
-
-
-
+
+
+
- {tools.map((tool) => {
- return tool.menu &&
- tool.id !== 'tools-store' &&
- tool.id !== 'tools-repository' ? (
-
- {tool.children &&
- tool.children.map((subTool) => {
- return (
-
- )
- })}
-
- ) : undefined
- })}
+
+
-
-
-
-
-
-
-
- }
- >
-
-
-
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+
)
diff --git a/src/renderer/src/util/common.tsx b/src/renderer/src/util/common.tsx
index f32740e..f6c6e9c 100644
--- a/src/renderer/src/util/common.tsx
+++ b/src/renderer/src/util/common.tsx
@@ -1,6 +1,8 @@
import { createRoot } from 'react-dom/client'
import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
import { floor } from 'lodash'
+import { getLocalStorage, setLocalStorage } from '@/util/browser.tsx'
+import { STORAGE_TOOL_MENU_ITEM_KEY } from '@/constants/common.constants.ts'
export const randomInt = (start: number, end: number) => {
if (start > end) {
@@ -133,3 +135,15 @@ const formatByte = (size: number, unit: ByteUnit): string => {
}
export const checkDesktop = () => import.meta.env.VITE_PLATFORM === 'DESKTOP'
+
+export const saveToolMenuItem = (toolMenuItem: ToolMenuItem[]) => {
+ setLocalStorage(STORAGE_TOOL_MENU_ITEM_KEY, JSON.stringify(toolMenuItem))
+}
+
+export const getToolMenuItem = (): ToolMenuItem[] => {
+ const s = getLocalStorage(STORAGE_TOOL_MENU_ITEM_KEY)
+ if (!s) {
+ return []
+ }
+ return JSON.parse(s) as ToolMenuItem[]
+}