diff --git a/src/renderer/src/assets/css/components/dnd/drop-mask.scss b/src/renderer/src/assets/css/components/dnd/drop-mask.scss new file mode 100644 index 0000000..f721b1b --- /dev/null +++ b/src/renderer/src/assets/css/components/dnd/drop-mask.scss @@ -0,0 +1,30 @@ +@use "@/assets/css/constants" as constants; + +[data-component=component-drop-mask] { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + padding: { + left: 10px; + right: 10px; + bottom: 10px; + }; + background-color: constants.$origin-color; + + .drop-mask-border { + display: flex; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + border: { + width: 2px; + color: constants.$font-secondary-color; + style: dashed; + radius: 8px; + }; + font-size: 1.8em; + } +} diff --git a/src/renderer/src/assets/css/components/tools/store-card.scss b/src/renderer/src/assets/css/components/tools/store-card.scss index 1652173..c42f825 100644 --- a/src/renderer/src/assets/css/components/tools/store-card.scss +++ b/src/renderer/src/assets/css/components/tools/store-card.scss @@ -23,6 +23,7 @@ .version { width: 0; + transition: all 0.2s; } .operation { @@ -30,6 +31,7 @@ font-size: 1.6em; gap: 4px; opacity: 0; + transition: all 0.2s; > *:hover { color: constants.$font-secondary-color; diff --git a/src/renderer/src/assets/css/pages/tools-framework.scss b/src/renderer/src/assets/css/pages/tools-framework.scss index 137c254..9fd7751 100644 --- a/src/renderer/src/assets/css/pages/tools-framework.scss +++ b/src/renderer/src/assets/css/pages/tools-framework.scss @@ -7,6 +7,7 @@ .menu-droppable { display: flex; + position: relative; min-height: 0; flex: 1; width: 100%; diff --git a/src/renderer/src/assets/svg/receive.svg b/src/renderer/src/assets/svg/receive.svg new file mode 100644 index 0000000..654ce96 --- /dev/null +++ b/src/renderer/src/assets/svg/receive.svg @@ -0,0 +1 @@ + diff --git a/src/renderer/src/components/dnd/DropMask.tsx b/src/renderer/src/components/dnd/DropMask.tsx new file mode 100644 index 0000000..48428b8 --- /dev/null +++ b/src/renderer/src/components/dnd/DropMask.tsx @@ -0,0 +1,14 @@ +import '@/assets/css/components/dnd/drop-mask.scss' +import Icon from '@ant-design/icons' + +const DropMask = () => { + return ( +
+
+ +
+
+ ) +} + +export default DropMask diff --git a/src/renderer/src/components/tools/StoreCard.tsx b/src/renderer/src/components/tools/StoreCard.tsx index 0a77fb8..375553c 100644 --- a/src/renderer/src/components/tools/StoreCard.tsx +++ b/src/renderer/src/components/tools/StoreCard.tsx @@ -4,14 +4,19 @@ 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 { checkDesktop } from '@/util/common' -import { navigateToSource, navigateToStore, navigateToView } from '@/util/navigation' +import { checkDesktop, omitText } from '@/util/common' +import { getLoginStatus, getUserId } from '@/util/auth' +import { + navigateToLogin, + navigateToSource, + navigateToStore, + navigateToView +} from '@/util/navigation' import { r_tool_add_favorite, r_tool_remove_favorite } from '@/services/tool' import Card from '@/components/common/Card' import FlexBox from '@/components/common/FlexBox' -import { getUserId } from '@/util/auth.tsx' -import DragHandle from '@/components/dnd/DragHandle.tsx' -import Draggable from '@/components/dnd/Draggable.tsx' +import DragHandle from '@/components/dnd/DragHandle' +import Draggable from '@/components/dnd/Draggable' interface StoreCardProps extends DetailedHTMLProps, HTMLDivElement> { icon: string @@ -58,7 +63,9 @@ const StoreCard = ({ useEffect(() => { cardRef.current && VanillaTilt.init(cardRef.current, options) - getUserId().then((value) => setUserId(value)) + if (getLoginStatus()) { + void getUserId().then((value) => setUserId(value)) + } }, [options]) const handleCardOnClick = () => { @@ -99,6 +106,10 @@ const StoreCard = ({ const handleOnStarBtnClick = (e: MouseEvent) => { e.stopPropagation() + if (!getLoginStatus()) { + navigateToLogin(navigate, undefined, `${location.pathname}${location.search}`) + return + } if (favorite_) { void r_tool_remove_favorite({ authorId: author.id, @@ -249,7 +260,12 @@ const StoreCard = ({
{toolName}
{`ID: ${toolId}`}
- {toolDesc &&
{`简介：${toolDesc}`}
} + {toolDesc && ( +
{`简介：${omitText(toolDesc, 18)}`}
+ )}
{showAuthor && (
diff --git a/src/renderer/src/pages/ToolsFramework.tsx b/src/renderer/src/pages/ToolsFramework.tsx index 4b284cb..698698a 100644 --- a/src/renderer/src/pages/ToolsFramework.tsx +++ b/src/renderer/src/pages/ToolsFramework.tsx @@ -1,25 +1,30 @@ import { DndContext, DragOverEvent, DragStartEvent } from '@dnd-kit/core' -import Droppable from '@/components/dnd/Droppable' +import { arrayMove, SortableContext } from '@dnd-kit/sortable' import type { DragEndEvent } from '@dnd-kit/core/dist/types' import '@/assets/css/pages/tools-framework.scss' import { tools } from '@/router/tools' +import { getToolMenuItem, saveToolMenuItem } from '@/util/common' +import { getViewPath } from '@/util/navigation' 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' +import Sortable from '@/components/dnd/Sortable' +import DragHandle from '@/components/dnd/DragHandle' +import DraggableOverlay from '@/components/dnd/DraggableOverlay' +import DropMask from '@/components/dnd/DropMask' +import Droppable from '@/components/dnd/Droppable' const ToolsFramework = () => { const [isDelete, setIsDelete] = useState(false) const [toolMenuItem, setToolMenuItem] = useState(getToolMenuItem) const [activeItem, setActiveItem] = useState(null) + const [showDropMask, setShowDropMask] = useState(false) const handleOnDragStart = ({ active }: DragStartEvent) => { setActiveItem(active.data.current as ToolMenuItem) + if (!active.data.current?.sortable) { + setShowDropMask(true) + } } const handleOnDragOver = ({ over }: DragOverEvent) => { @@ -62,10 +67,8 @@ const ToolsFramework = () => { } } - console.log('active', active) - console.log('over', over) - setActiveItem(null) + setShowDropMask(false) } const handleOnDragCancel = () => { @@ -164,6 +167,7 @@ const ToolsFramework = () => { + {showDropMask && }
diff --git a/src/renderer/src/util/common.tsx b/src/renderer/src/util/common.tsx index f6c6e9c..fe98bb4 100644 --- a/src/renderer/src/util/common.tsx +++ b/src/renderer/src/util/common.tsx @@ -1,8 +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' +import { STORAGE_TOOL_MENU_ITEM_KEY } from '@/constants/common.constants' +import { getLocalStorage, setLocalStorage } from '@/util/browser' +import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask' export const randomInt = (start: number, end: number) => { if (start > end) { @@ -147,3 +147,10 @@ export const getToolMenuItem = (): ToolMenuItem[] => { } return JSON.parse(s) as ToolMenuItem[] } + +export const omitText = (text: string, length: number) => { + if (text.length <= length) { + return text + } + return `${text.substring(0, length)}...` +}