-
+
{tabs.map((item, index) => (
- {
this.init = true
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index a79889b..0515efc 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -21,6 +21,8 @@ interface HideScrollbarProps
minHeight?: string | number
scrollbarWidth?: string | number
autoHideWaitingTime?: number
+ scrollbarAsidePadding?: number
+ scrollbarEdgePadding?: number
}
export interface HideScrollbarElement {
@@ -74,6 +76,8 @@ const HideScrollbar = forwardRef
(
children,
style,
className,
+ scrollbarAsidePadding = 12,
+ scrollbarEdgePadding = 4,
...props
},
ref
@@ -578,7 +582,8 @@ const HideScrollbar = forwardRef(
? maskRef.current?.clientLeft +
maskRef.current?.clientWidth -
1
- : undefined
+ : undefined,
+ padding: `${scrollbarAsidePadding}px ${scrollbarEdgePadding}px`
}}
>
diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index be500bd..a81563a 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -12,6 +12,12 @@ import {
} from '@/constants/common.constants'
import { getUserInfo, setToken } from '@/util/auth'
import { utcToLocalTime } from '@/util/datetime'
+import {
+ navigateToForget,
+ navigateToRedirect,
+ navigateToRegister,
+ navigateToRoot
+} from '@/util/navigation'
import { r_auth_login } from '@/services/auth'
import { AppContext } from '@/App'
import FitCenter from '@/components/common/FitCenter'
@@ -78,11 +84,7 @@ const SignIn = () => {
setTimeout(() => {
void getUserInfo().then((user) => {
refreshRouter()
- if (searchParams.has('redirect')) {
- navigate(searchParams.get('redirect') ?? '/')
- } else {
- navigate('/')
- }
+ navigateToRedirect(navigate, searchParams, '/repository')
notification.success({
message: '欢迎回来',
@@ -110,8 +112,8 @@ const SignIn = () => {
case PERMISSION_NEED_TWO_FACTOR:
twoFactorForm.resetFields()
void modal.confirm({
- title: '双因素验证',
centered: true,
+ title: '双因素验证',
footer: (_, { OkBtn, CancelBtn }) => (
<>
{
- navigate('/')
+ navigateToRoot(navigate)
}}
>
- 返回首页
+ 返回主页
{
- navigate(`/forget${location.search}`, { replace: true })
+ navigateToForget(navigate, location.search, { replace: true })
}}
>
忘记密码？
@@ -287,7 +289,7 @@ const SignIn = () => {
还没有账号？
- navigate(`/register${location.search}`, { replace: true })
+ navigateToRegister(navigate, location.search, { replace: true })
}
>
注册
diff --git a/src/pages/Sign/SignUp.tsx b/src/pages/Sign/SignUp.tsx
index b1c8b41..3d997b5 100644
--- a/src/pages/Sign/SignUp.tsx
+++ b/src/pages/Sign/SignUp.tsx
@@ -8,6 +8,7 @@ import {
SYSTEM_MATCH_SENSITIVE_WORD
} from '@/constants/common.constants'
import { getLoginStatus, setToken } from '@/util/auth'
+import { navigateToLogin } from '@/util/navigation'
import { r_auth_register, r_auth_resend } from '@/services/auth'
import FitCenter from '@/components/common/FitCenter'
import FlexBox from '@/components/common/FlexBox'
@@ -49,9 +50,7 @@ const SignUp = () => {
return
}
if (getLoginStatus()) {
- navigate(`/login${location.search}`, {
- replace: true
- })
+ navigateToLogin(navigate, location.search, undefined, { replace: true })
}
}, [location.pathname])
@@ -245,7 +244,9 @@ const SignUp = () => {
已有账号？
- navigate(`/login${location.search}`, { replace: true })
+ navigateToLogin(navigate, location.search, undefined, {
+ replace: true
+ })
}
>
登录
diff --git a/src/pages/Sign/Verify.tsx b/src/pages/Sign/Verify.tsx
index 006b72d..c21a6e2 100644
--- a/src/pages/Sign/Verify.tsx
+++ b/src/pages/Sign/Verify.tsx
@@ -7,7 +7,7 @@ import {
SYSTEM_MATCH_SENSITIVE_WORD
} from '@/constants/common.constants'
import { getLoginStatus, getUserInfo, requestUserInfo } from '@/util/auth'
-import { getRedirectUrl } from '@/util/route'
+import { navigateToLogin, navigateToRedirect, navigateToRepository } from '@/util/navigation'
import { r_auth_resend, r_auth_verify } from '@/services/auth'
import { r_api_avatar_random_base64 } from '@/services/api/avatar'
import { AppContext } from '@/App'
@@ -32,7 +32,7 @@ const Verify = () => {
}
if (!getLoginStatus()) {
- navigate(getRedirectUrl('/login', `${location.pathname}${location.search}`), {
+ navigateToLogin(navigate, location.search, undefined, {
replace: true
})
return
@@ -81,7 +81,7 @@ const Verify = () => {
break
case PERMISSION_NO_VERIFICATION_REQUIRED:
void message.warning('账户已验证')
- navigate('/')
+ navigateToRepository(navigate)
break
default:
void message.error('出错了，请稍后重试')
@@ -128,11 +128,7 @@ const Verify = () => {
setTimeout(() => {
void requestUserInfo().then(() => {
refreshRouter()
- if (searchParams.has('redirect')) {
- navigate(searchParams.get('redirect') ?? '/')
- } else {
- navigate('/')
- }
+ navigateToRedirect(navigate, searchParams, '/repository')
})
}, 1500)
break
diff --git a/src/pages/System/Settings/Base.tsx b/src/pages/System/Settings/Base.tsx
index d0dd2ee..2f11c1e 100644
--- a/src/pages/System/Settings/Base.tsx
+++ b/src/pages/System/Settings/Base.tsx
@@ -1,6 +1,6 @@
import { hasPermission } from '@/util/auth'
import { r_sys_settings_base_get, r_sys_settings_base_update } from '@/services/system'
-import { SettingsCard } from '@/pages/System/Settings'
+import SettingsCard from '@/components/system/SettingCard'
const Base = () => {
const [baseForm] = AntdForm.useForm()
diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx
index 22d0222..68224ba 100644
--- a/src/pages/System/Settings/Mail.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -5,7 +5,7 @@ import {
r_sys_settings_mail_send,
r_sys_settings_mail_update
} from '@/services/system'
-import { SettingsCard } from '@/pages/System/Settings'
+import SettingsCard from '@/components/system/SettingCard'
const Mail = () => {
const [modal, contextHolder] = AntdModal.useModal()
@@ -16,9 +16,9 @@ const Mail = () => {
const handleOnTest = () => {
void modal.confirm({
- title: '发送测试邮件',
centered: true,
maskClosable: true,
+ title: '发送测试邮件',
footer: (_, { OkBtn, CancelBtn }) => (
<>
()
diff --git a/src/pages/System/Settings/TwoFactor.tsx b/src/pages/System/Settings/TwoFactor.tsx
index 7d93d61..08f80fd 100644
--- a/src/pages/System/Settings/TwoFactor.tsx
+++ b/src/pages/System/Settings/TwoFactor.tsx
@@ -1,6 +1,6 @@
import { hasPermission } from '@/util/auth'
import { r_sys_settings_two_factor_get, r_sys_settings_two_factor_update } from '@/services/system'
-import { SettingsCard } from '@/pages/System/Settings'
+import SettingsCard from '@/components/system/SettingCard'
const TwoFactor = () => {
const [twoFactorForm] = AntdForm.useForm()
diff --git a/src/pages/System/Settings/index.tsx b/src/pages/System/Settings/index.tsx
index 94cba62..c23cf3b 100644
--- a/src/pages/System/Settings/index.tsx
+++ b/src/pages/System/Settings/index.tsx
@@ -1,55 +1,12 @@
-import { PropsWithChildren, ReactNode } from 'react'
-import Icon from '@ant-design/icons'
import '@/assets/css/pages/system/settings.scss'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
-import Card from '@/components/common/Card'
import FlexBox from '@/components/common/FlexBox'
-import LoadingMask from '@/components/common/LoadingMask'
import Permission from '@/components/common/Permission'
import Base from '@/pages/System/Settings/Base'
import Mail from '@/pages/System/Settings/Mail'
import SensitiveWord from '@/pages/System/Settings/SensitiveWord'
-import TwoFactor from '@/pages/System/Settings/TwoFactor.tsx'
-
-interface SettingsCardProps extends PropsWithChildren {
- icon: IconComponent
- title: string
- loading?: boolean
- modifyOperationCode?: string[]
- expand?: ReactNode
- onReset?: () => void
- onSave?: () => void
-}
-export const SettingsCard = (props: SettingsCardProps) => {
- return (
-
-
-
-
- {props.expand}
-
-
-
-
-
- )}
-
-
-
- )
-}
+import TwoFactor from '@/pages/System/Settings/TwoFactor'
const Settings = () => {
return (
diff --git a/src/pages/System/Statistics/ActiveInfo.tsx b/src/pages/System/Statistics/ActiveInfo.tsx
index 0e93ff6..65f800a 100644
--- a/src/pages/System/Statistics/ActiveInfo.tsx
+++ b/src/pages/System/Statistics/ActiveInfo.tsx
@@ -4,7 +4,7 @@ import { getTimesBetweenTwoTimes } from '@/util/datetime'
import { r_sys_statistics_active } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/Statistics/shared'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
const ActiveInfo = () => {
const activeInfoDivRef = useRef(null)
@@ -147,7 +147,7 @@ const ActiveInfo = () => {
}
return (
-
@@ -183,7 +183,7 @@ const ActiveInfo = () => {
-
+
)
}
diff --git a/src/pages/System/Statistics/CPUInfo.tsx b/src/pages/System/Statistics/CPUInfo.tsx
index 1d53964..0303f09 100644
--- a/src/pages/System/Statistics/CPUInfo.tsx
+++ b/src/pages/System/Statistics/CPUInfo.tsx
@@ -7,7 +7,7 @@ import {
barEChartsBaseOption,
EChartsOption
} from '@/pages/System/Statistics/shared'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
const CPUInfo = () => {
const keyDivRef = useRef(null)
@@ -142,7 +142,7 @@ const CPUInfo = () => {
return (
<>
- {
-
+
)
}
diff --git a/src/pages/System/Statistics/HardwareInfo.tsx b/src/pages/System/Statistics/HardwareInfo.tsx
index 96399ca..f6f0c9e 100644
--- a/src/pages/System/Statistics/HardwareInfo.tsx
+++ b/src/pages/System/Statistics/HardwareInfo.tsx
@@ -1,6 +1,6 @@
import { r_sys_statistics_hardware } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
const HardwareInfo = () => {
const [hardwareInfoData, setHardwareInfoData] = useState()
@@ -17,7 +17,7 @@ const HardwareInfo = () => {
}, [])
return (
- {
+
)
}
diff --git a/src/pages/System/Statistics/OnlineInfo.tsx b/src/pages/System/Statistics/OnlineInfo.tsx
index 624ceca..3bc5921 100644
--- a/src/pages/System/Statistics/OnlineInfo.tsx
+++ b/src/pages/System/Statistics/OnlineInfo.tsx
@@ -4,7 +4,7 @@ import { getTimesBetweenTwoTimes } from '@/util/datetime'
import { r_sys_statistics_online } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/Statistics/shared'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
const OnlineInfo = () => {
const onlineInfoDivRef = useRef(null)
@@ -148,7 +148,7 @@ const OnlineInfo = () => {
}
return (
-
@@ -188,7 +188,7 @@ const OnlineInfo = () => {
-
+
)
}
diff --git a/src/pages/System/Statistics/SoftwareInfo.tsx b/src/pages/System/Statistics/SoftwareInfo.tsx
index 65fe84a..a7bf4c5 100644
--- a/src/pages/System/Statistics/SoftwareInfo.tsx
+++ b/src/pages/System/Statistics/SoftwareInfo.tsx
@@ -1,7 +1,7 @@
import { utcToLocalTime } from '@/util/datetime'
import { r_sys_statistics_software } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
const SoftwareInfo = () => {
const [softwareInfoData, setSoftwareInfoData] = useState()
@@ -18,7 +18,7 @@ const SoftwareInfo = () => {
}, [])
return (
- {
-
+
)
}
diff --git a/src/pages/System/Statistics/StorageInfo.tsx b/src/pages/System/Statistics/StorageInfo.tsx
index c68a198..9202234 100644
--- a/src/pages/System/Statistics/StorageInfo.tsx
+++ b/src/pages/System/Statistics/StorageInfo.tsx
@@ -8,7 +8,7 @@ import {
barEChartsBaseOption,
EChartsOption
} from '@/pages/System/Statistics/shared'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
const StorageInfo = () => {
const keyDivRef = useRef
@@ -620,7 +625,8 @@ const HideScrollbar = forwardRef(
? maskRef.current?.clientTop +
maskRef.current?.clientHeight -
1
- : undefined
+ : undefined,
+ padding: `${scrollbarEdgePadding}px ${scrollbarAsidePadding}px`
}}
>
, HTMLDivElement>) => {
- return
+ return
}
export default Separate
diff --git a/src/components/common/UrlCard.tsx b/src/components/common/UrlCard.tsx
new file mode 100644
index 0000000..9e55624
--- /dev/null
+++ b/src/components/common/UrlCard.tsx
@@ -0,0 +1,57 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
+import Icon from '@ant-design/icons'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import '@/assets/css/components/common/url-card.scss'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+
+interface UrlCardProps extends DetailedHTMLProps, HTMLDivElement> {
+ icon: IconComponent
+ description?: ReactNode
+ options?: TiltOptions
+ url?: string
+}
+
+const UrlCard = ({
+ style,
+ icon,
+ description,
+ options = {
+ reverse: true,
+ max: 8,
+ glare: true,
+ scale: 1.03
+ },
+ url,
+ children,
+ ...props
+}: UrlCardProps) => {
+ const navigate = useNavigate()
+ const cardRef = useRef(null)
+
+ useEffect(() => {
+ cardRef.current && VanillaTilt.init(cardRef.current, options)
+ }, [options])
+
+ const handleCardOnClick = () => {
+ url && navigate(url)
+ }
+
+ return (
+
+
+
+
+ )
+}
+
+export default UrlCard
diff --git a/src/components/dnd/DragHandle.tsx b/src/components/dnd/DragHandle.tsx
new file mode 100644
index 0000000..eb81812
--- /dev/null
+++ b/src/components/dnd/DragHandle.tsx
@@ -0,0 +1,27 @@
+import { HandleContextInst } from '@/components/dnd/HandleContext'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/dnd/drag-handle.scss'
+
+interface DragHandleProps {
+ padding?: string | number
+}
+
+const DragHandle = ({ padding }: DragHandleProps) => {
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ const { attributes, listeners, ref } = useContext(HandleContextInst)
+
+ return (
+
+ )
+}
+
+export default DragHandle
diff --git a/src/components/dnd/Draggable.tsx b/src/components/dnd/Draggable.tsx
new file mode 100644
index 0000000..756570d
--- /dev/null
+++ b/src/components/dnd/Draggable.tsx
@@ -0,0 +1,47 @@
+import { CSSProperties, PropsWithChildren } from 'react'
+import { useDraggable } from '@dnd-kit/core'
+import { HandleContext, HandleContextInst } from '@/components/dnd/HandleContext'
+
+interface DraggableProps extends PropsWithChildren {
+ id: string
+ data: ToolMenuItem
+}
+
+const Draggable = ({ id, data, children }: DraggableProps) => {
+ const {
+ attributes,
+ isDragging,
+ listeners,
+ setNodeRef: draggableRef,
+ setActivatorNodeRef,
+ transform
+ } = useDraggable({
+ id,
+ data
+ })
+ const context = useMemo(
+ () => ({
+ attributes,
+ listeners,
+ ref: setActivatorNodeRef
+ }),
+ [attributes, listeners, setActivatorNodeRef]
+ )
+ const style: CSSProperties | undefined = transform
+ ? {
+ opacity: isDragging ? 0 : undefined,
+ transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+ zIndex: 10000
+ }
+ : undefined
+
+ return (
+
+
+ )
+}
+
+export default Draggable
diff --git a/src/components/dnd/DraggableOverlay.tsx b/src/components/dnd/DraggableOverlay.tsx
new file mode 100644
index 0000000..0e4f3fd
--- /dev/null
+++ b/src/components/dnd/DraggableOverlay.tsx
@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react'
+import { defaultDropAnimationSideEffects, DragOverlay, DropAnimation } from '@dnd-kit/core'
+
+interface DraggableOverlayProps extends PropsWithChildren {
+ isDelete?: boolean
+}
+
+const dropAnimationConfig: DropAnimation = {
+ sideEffects: defaultDropAnimationSideEffects({
+ styles: {
+ active: {
+ opacity: '0.4'
+ }
+ }
+ })
+}
+
+const DraggableOverlay = ({ children }: DraggableOverlayProps) => {
+ return {children}
+}
+
+export default DraggableOverlay
diff --git a/src/components/dnd/DropMask.tsx b/src/components/dnd/DropMask.tsx
new file mode 100644
index 0000000..48428b8
--- /dev/null
+++ b/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 (
+ , HTMLDivElement> {
+ id: string
+}
+
+const Droppable = ({ id, ...props }: DroppableProps) => {
+ const { setNodeRef: droppableRef } = useDroppable({
+ id
+ })
+
+ return
+}
+
+export default Droppable
diff --git a/src/components/dnd/HandleContext.ts b/src/components/dnd/HandleContext.ts
new file mode 100644
index 0000000..88420b2
--- /dev/null
+++ b/src/components/dnd/HandleContext.ts
@@ -0,0 +1,13 @@
+import { DraggableSyntheticListeners } from '@dnd-kit/core'
+
+export interface HandleContext {
+ attributes: Record
+ listeners: DraggableSyntheticListeners
+ ref(node: HTMLElement | null): void
+}
+
+export const HandleContextInst = createContext({
+ attributes: {},
+ listeners: undefined,
+ ref() {}
+})
diff --git a/src/components/dnd/Sortable.tsx b/src/components/dnd/Sortable.tsx
new file mode 100644
index 0000000..81cd0b7
--- /dev/null
+++ b/src/components/dnd/Sortable.tsx
@@ -0,0 +1,54 @@
+import { CSSProperties, PropsWithChildren } from 'react'
+import { useSortable } from '@dnd-kit/sortable'
+import { HandleContext, HandleContextInst } from '@/components/dnd/HandleContext'
+
+interface SortableProps extends PropsWithChildren {
+ id: string
+ data: ToolMenuItem
+ isDelete?: boolean
+}
+
+const Sortable = ({ id, data, isDelete, children }: SortableProps) => {
+ const {
+ attributes,
+ isDragging,
+ listeners,
+ setNodeRef: draggableRef,
+ setActivatorNodeRef,
+ transform,
+ transition
+ } = useSortable({
+ id,
+ data
+ })
+ const context = useMemo(
+ () => ({
+ attributes,
+ listeners,
+ ref: setActivatorNodeRef
+ }),
+ [attributes, listeners, setActivatorNodeRef]
+ )
+ const style: CSSProperties | undefined = transform
+ ? {
+ opacity: isDragging ? 0.4 : undefined,
+ transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+ zIndex: 10000,
+ transition
+ }
+ : undefined
+
+ return (
+
+
+ )
+}
+
+export default Sortable
diff --git a/src/components/system/SettingCard.tsx b/src/components/system/SettingCard.tsx
new file mode 100644
index 0000000..874efd1
--- /dev/null
+++ b/src/components/system/SettingCard.tsx
@@ -0,0 +1,48 @@
+import { PropsWithChildren, ReactNode } from 'react'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/system/setting-card.scss'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import Permission from '@/components/common/Permission'
+import LoadingMask from '@/components/common/LoadingMask'
+
+interface SettingsCardProps extends PropsWithChildren {
+ icon: IconComponent
+ title: string
+ loading?: boolean
+ modifyOperationCode?: string[]
+ expand?: ReactNode
+ onReset?: () => void
+ onSave?: () => void
+}
+export const SettingsCard = (props: SettingsCardProps) => {
+ return (
+
+
+
+
+ {props.expand}
+
+
+
+
+
+ )}
+
+
+
+ )
+}
+
+export default SettingsCard
diff --git a/src/components/system/StatisticsCard.tsx b/src/components/system/StatisticsCard.tsx
new file mode 100644
index 0000000..567d6e2
--- /dev/null
+++ b/src/components/system/StatisticsCard.tsx
@@ -0,0 +1,35 @@
+import { PropsWithChildren, ReactNode } from 'react'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/system/statistics-card.scss'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import LoadingMask from '@/components/common/LoadingMask'
+
+interface StatisticsCardProps extends PropsWithChildren {
+ icon: IconComponent
+ title: ReactNode
+ loading?: boolean
+ expand?: ReactNode
+}
+
+export const StatisticsCard = (props: StatisticsCardProps) => {
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default StatisticsCard
diff --git a/src/components/tools/LoadMoreCard.tsx b/src/components/tools/LoadMoreCard.tsx
new file mode 100644
index 0000000..a7c0736
--- /dev/null
+++ b/src/components/tools/LoadMoreCard.tsx
@@ -0,0 +1,42 @@
+import VanillaTilt from 'vanilla-tilt'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/tools/load-more-card.scss'
+import FlexBox from '@/components/common/FlexBox'
+import Card from '@/components/common/Card'
+
+interface LoadMoreCardProps {
+ onClick: () => void
+}
+
+const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
+ const cardRef = useRef(null)
+
+ useEffect(() => {
+ cardRef.current &&
+ VanillaTilt.init(cardRef.current, {
+ reverse: true,
+ max: 8,
+ glare: true,
+ ['max-glare']: 0.3,
+ scale: 1.03
+ })
+ }, [])
+
+ return (
+
+
+
+
+ )
+}
+
+export default LoadMoreCard
diff --git a/src/components/tools/RepositoryCard.tsx b/src/components/tools/RepositoryCard.tsx
new file mode 100644
index 0000000..656bcc4
--- /dev/null
+++ b/src/components/tools/RepositoryCard.tsx
@@ -0,0 +1,115 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import '@/assets/css/components/tools/repository-card.scss'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import Draggable from '@/components/dnd/Draggable'
+import DragHandle from '@/components/dnd/DragHandle'
+
+interface RepositoryCardProps
+ extends DetailedHTMLProps, HTMLDivElement> {
+ icon: string
+ toolName: string
+ toolId: string
+ ver: string
+ platform: Platform
+ options?: TiltOptions
+ onOpen?: () => void
+ onEdit?: () => void
+ onSource?: () => void
+ onPublish?: () => void
+ onCancelReview?: () => void
+ onDelete?: () => void
+}
+
+const RepositoryCard = ({
+ style,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ ref,
+ icon,
+ toolName,
+ toolId,
+ ver,
+ platform,
+ options = {
+ reverse: true,
+ max: 8,
+ glare: true,
+ ['max-glare']: 0.3,
+ scale: 1.03
+ },
+ onOpen,
+ onEdit,
+ onSource,
+ onPublish,
+ onCancelReview,
+ onDelete,
+ children,
+ ...props
+}: RepositoryCardProps) => {
+ const cardRef = useRef(null)
+
+ useEffect(() => {
+ cardRef.current && VanillaTilt.init(cardRef.current, options)
+ }, [options])
+
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default RepositoryCard
diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx
new file mode 100644
index 0000000..5572658
--- /dev/null
+++ b/src/components/tools/StoreCard.tsx
@@ -0,0 +1,312 @@
+import { DetailedHTMLProps, HTMLAttributes, MouseEvent } from 'react'
+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 { 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 DragHandle from '@/components/dnd/DragHandle'
+import Draggable from '@/components/dnd/Draggable'
+
+interface StoreCardProps extends DetailedHTMLProps, 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(null)
+ const [favorite_, setFavorite_] = useState(favorite)
+ const [userId, setUserId] = useState('')
+
+ useEffect(() => {
+ cardRef.current && VanillaTilt.init(cardRef.current, options)
+ if (getLoginStatus()) {
+ void getUserId().then((value) => setUserId(value))
+ }
+ }, [options])
+
+ const handleCardOnClick = () => {
+ if (!checkDesktop() && platform === 'DESKTOP') {
+ void message.warning('此应用需要桌面端环境，请在桌面端打开')
+ return
+ }
+ if (platform === 'ANDROID') {
+ void modal.confirm({
+ icon:
+ 请使用手机端扫描上方二维码
+
+ ),
+ okText: '确定',
+ cancelText: '模拟器',
+ onCancel() {
+ navigateToView(navigate, author.username, toolId, platform)
+ }
+ })
+ return
+ }
+ navigateToView(navigate, author.username, toolId, platform)
+ }
+
+ const handleOnClickAuthor = (e: MouseEvent) => {
+ e.stopPropagation()
+ navigateToStore(navigate, author.username)
+ }
+
+ const handleOnSourceBtnClick = (e: MouseEvent) => {
+ e.stopPropagation()
+ navigateToSource(navigate, author.username, toolId, platform)
+ }
+
+ 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,
+ toolId: toolId,
+ platform: platform
+ }).then((res) => {
+ const response = res.data
+ if (response.success) {
+ setFavorite_(false)
+ } else {
+ void message.error('取消收藏失败，请稍后重试')
+ }
+ })
+ } else {
+ void r_tool_add_favorite({
+ authorId: author.id,
+ toolId: toolId,
+ platform: platform
+ }).then((res) => {
+ const response = res.data
+ if (response.success) {
+ setFavorite_(true)
+ } else {
+ void message.error('收藏失败，请稍后重试')
+ }
+ })
+ }
+ }
+
+ const handleOnAndroidBtnClick = (e: MouseEvent) => {
+ e.stopPropagation()
+ void modal.confirm({
+ icon:
+ 请使用手机端扫描上方二维码
+
+ ),
+ okText: '确定',
+ cancelText: '模拟器',
+ onCancel() {
+ navigateToView(navigate, author.username, toolId, 'ANDROID')
+ }
+ })
+ }
+
+ const handleOnDesktopBtnClick = (e: MouseEvent) => {
+ e.stopPropagation()
+ if (!checkDesktop()) {
+ void message.loading({ content: '启动桌面端中……', key: 'LOADING', duration: 0 })
+ protocolCheck(
+ `oxygen://openurl/view/${author.username}/${toolId}`,
+ () => {
+ void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
+ void message.destroy('LOADING')
+ },
+ () => {
+ void message.destroy('LOADING')
+ },
+ 2000,
+ () => {
+ void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
+ void message.destroy('LOADING')
+ }
+ )
+ return
+ }
+ navigateToView(navigate, author.username, toolId, 'DESKTOP')
+ }
+
+ const handleOnWebBtnClick = (e: MouseEvent) => {
+ e.stopPropagation()
+ navigateToView(navigate, author.username, toolId, 'WEB')
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+ {contextHolder}
+
+ )
+}
+
+export default StoreCard
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index 6a4a6fe..e381d5f 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -1,6 +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_TOOL_MENU_ITEM_KEY = 'TOOL_MENU_ITEM'
export const COLOR_ORIGIN = 'white'
export const COLOR_PRODUCTION = '#4E47BB'
export const COLOR_MAIN = COLOR_PRODUCTION
@@ -77,6 +78,7 @@ export const DATABASE_DELETE_FILED = 30035
export const DATABASE_EXECUTE_ERROR = 30050
export const DATABASE_DUPLICATE_KEY = 30051
export const DATABASE_NO_RECORD_FOUND = 30052
+export const DATABASE_RECORD_ALREADY_EXISTS = 30053
export const TOOL_SUBMIT_SUCCESS = 40010
export const TOOL_CANCEL_SUCCESS = 40011
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index c3b20f7..225ff25 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -38,6 +38,7 @@ export const URL_TOOL_STORE = `${URL_TOOL}/store`
export const URL_TOOL_TEMPLATE = `${URL_TOOL}/template`
export const URL_TOOL_CATEGORY = `${URL_TOOL}/category`
export const URL_TOOL_DETAIL = `${URL_TOOL}/detail`
+export const URL_TOOL_FAVORITE = `${URL_TOOL_STORE}/favorite`
export const URL_API_V1 = '/api/v1'
export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`
diff --git a/src/global.d.ts b/src/global.d.ts
index e67e298..41b47cc 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -604,6 +604,7 @@ interface ToolVo {
review: 'NONE' | 'PROCESSING' | 'PASS' | 'REJECT'
createTime: string
updateTime: string
+ favorite: boolean
}
interface ToolCreateParam {
@@ -647,3 +648,18 @@ interface ToolManagementPassParam {
interface ToolStoreGetParam extends PageParam {
searchValue?: string
}
+
+interface ToolFavoriteAddRemoveParam {
+ authorId: string
+ toolId: string
+ platform: Platform
+}
+
+interface ToolMenuItem {
+ icon: string
+ toolName: string
+ toolId: string
+ authorUsername: string
+ ver: string
+ platform: Platform
+}
diff --git a/src/pages/Sign/Forget.tsx b/src/pages/Sign/Forget.tsx
index 1cbc871..f9e3072 100644
--- a/src/pages/Sign/Forget.tsx
+++ b/src/pages/Sign/Forget.tsx
@@ -8,6 +8,7 @@ import {
PERMISSION_USER_NOT_FOUND,
SYSTEM_INVALID_CAPTCHA_CODE
} from '@/constants/common.constants'
+import { navigateToLogin } from '@/util/navigation'
import { r_auth_forget, r_auth_retrieve } from '@/services/auth'
import FitCenter from '@/components/common/FitCenter'
import FlexBox from '@/components/common/FlexBox'
@@ -272,7 +273,15 @@ const Forget = () => {
diff --git a/src/components/common/Sidebar/Footer.tsx b/src/components/common/Sidebar/Footer.tsx
index 8095ef2..f7cc765 100644
--- a/src/components/common/Sidebar/Footer.tsx
+++ b/src/components/common/Sidebar/Footer.tsx
@@ -2,6 +2,7 @@ import Icon from '@ant-design/icons'
import { COLOR_ERROR } from '@/constants/common.constants'
import { getRedirectUrl } from '@/util/route'
import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
+import { navigateToLogin, navigateToUser } from '@/util/navigation'
import { r_auth_logout } from '@/services/auth'
const Footer = () => {
@@ -15,9 +16,9 @@ const Footer = () => {
const handleClickAvatar = () => {
if (getLoginStatus()) {
- navigate('/user')
+ navigateToUser(navigate)
} else {
- navigate(getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`))
+ navigateToLogin(navigate, undefined, `${lastMatch.pathname}${location.search}`)
}
}
diff --git a/src/components/common/Sidebar/Item.tsx b/src/components/common/Sidebar/Item.tsx
index 1031b15..74ebfa0 100644
--- a/src/components/common/Sidebar/Item.tsx
+++ b/src/components/common/Sidebar/Item.tsx
@@ -3,10 +3,11 @@ import Icon from '@ant-design/icons'
import Submenu from '@/components/common/Sidebar/Submenu'
type ItemProps = {
- icon?: IconComponent
+ icon?: IconComponent | string
text?: string
path: string
children?: ReactNode
+ extend?: ReactNode
end?: boolean
}
@@ -41,10 +42,21 @@ const Item = (props: ItemProps) => {
isPending ? 'pending' : isActive ? 'active' : ''
}
>
-
{props.children && (
diff --git a/src/components/common/Sidebar/Separate.tsx b/src/components/common/Sidebar/Separate.tsx
index 4c42aff..b1ffa0f 100644
--- a/src/components/common/Sidebar/Separate.tsx
+++ b/src/components/common/Sidebar/Separate.tsx
@@ -4,7 +4,7 @@ const Separate = ({
className,
...props
}: DetailedHTMLProps
- {props.icon &&
+ {props.icon && (
+
+ {typeof props.icon === 'string' ? (
+ 
+ ) : (
+
+ )}
{props.text}
+ {props.extend}
{children}
+ {description}
+
+ {children}
+
+
+
+ )
+}
+
+export default DropMask
diff --git a/src/components/dnd/Droppable.tsx b/src/components/dnd/Droppable.tsx
new file mode 100644
index 0000000..08229b0
--- /dev/null
+++ b/src/components/dnd/Droppable.tsx
@@ -0,0 +1,16 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
+import { useDroppable } from '@dnd-kit/core'
+
+interface DroppableProps extends DetailedHTMLProps
+
+
+ {children}
+
+ {props.title}
+ {!props.loading && (
+ {props.title}
+ {props.expand}
+
+
+ 加载更多
+
+ {children}
+
+
+ 
+
+
+
+ {toolName}
+ {`ID: ${toolId}`}
+
+ {onOpen && (
+
+ 打开
+
+ )}
+ {onEdit && onPublish && (
+
+ 源码
+
+ )}
+ {onCancelReview && (
+
+ 取消审核
+
+ )}
+ {onDelete && (
+
+ 删除
+
+ )}
+
+
+
+ 编辑
+ 发布
+
+
+ )}
+ {onSource && (
+
+
+
+
+ {platform.slice(0, 1)}-{ver}
+
+
+
+ {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
+
+
+ )}
+ {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
+
+
+ )}
+ {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
+
+
+ )}
+
+
+ {author.id !== userId && (
+
+
+ )}
+
+
+
+
+
+
+ {showAuthor && (
+ {toolName}
+ {`ID: ${toolId}`}
+ {toolDesc && (
+ {`简介：${omitText(toolDesc, 18)}`}
+ )}
+
+
+ )}
+
+
+ {author.userInfo.nickname}
+ {props.title}
- {!props.loading && (
- {hardwareInfoData?.disks}
- {props.title}
- {props.expand}
- {children}
- {description}
- {icon}
-
-
- {platform.slice(0, 1)}-{ver}
-
-
-
-
- {toolName}
- {`ID: ${toolId}`}
- {toolDesc && {`简介：${toolDesc}`}
}
-
-
-
-
-
-
- {authorName}
-
- {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
-
-
- )}
- {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
-
-
- )}
- {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
-
-
- )}
-
-
-
-
-
- 加载更多
- {icon}
-
-
- {platform.slice(0, 1)}-{ver}
-
-
-
-
- {toolName}
- {`ID: ${toolId}`}
- {toolDesc && {`简介：${toolDesc}`}
}
-
- {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
-
-
- )}
- {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
-
-
- )}
- {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
-
-
- )}
-
-
-
-
-
- 加载更多
- {icon}
-
- {toolName &&
- {toolName}
}
- {toolId && {`ID: ${toolId}`}
}
-
- {onOpen && (
-
- 打开
-
- )}
- {onEdit && onPublish && (
-
- 源码
-
- )}
- {onCancelReview && (
-
- 取消审核
-
- )}
- {onDelete && (
-
- 删除
-
- )}
-
- {children}
-
-
- 编辑
- 发布
-
-
- )}
- {onSource && (
- 收藏
+
+
-
-
-
-
+
+
+
+
+
+ `${authorUsername}:${toolId}:${ver}:${platform}`
+ )}
+ >
+ {toolMenuItem.map(
+ ({
+ icon,
+ toolName,
+ toolId,
+ authorUsername,
+ ver,
+ platform
+ }) => (
+
+
+ )
+ )}
+
+
+ {activeItem && (
+
+
+
+ {showDropMask &&
+
+
+
+
- {tools.map((tool) => {
- return tool.menu &&
- tool.id !== 'tools' &&
- tool.id !== 'tools-store' ? (
-
- {tool.children &&
- tool.children.map((subTool) => {
- return (
-
- ) : undefined
- })}
+
-
-
-
-
-
-
-
+
+
+
+
+