From 1cdd1e5a934821d8b1c61cc8c0197bcff5859aaa Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Wed, 23 Oct 2024 14:37:43 +0800 Subject: [PATCH] Feat(Hint): Support dark mode --- src/App.tsx | 8 + src/assets/css/base.style.ts | 2 +- src/components/common/Card.tsx | 10 +- src/components/common/FitCenter.tsx | 8 +- src/components/common/FitFullscreen.tsx | 4 +- src/components/common/FlexBox.tsx | 8 +- src/components/common/HideScrollbar.tsx | 6 +- src/components/common/Sidebar/Footer.tsx | 1 + src/components/tools/StoreCard.tsx | 199 +++++------ src/pages/Sign/Forget.tsx | 1 + src/pages/Sign/SignIn.tsx | 8 +- src/pages/Sign/SignUp.tsx | 1 + src/pages/Sign/Verify.tsx | 6 +- src/pages/System/Group.tsx | 10 +- src/pages/System/Log.tsx | 1 + src/pages/System/Role.tsx | 4 +- src/pages/System/Settings/Base.tsx | 1 + src/pages/System/Settings/Mail.tsx | 103 +++--- src/pages/System/Settings/SensitiveWord.tsx | 1 + src/pages/System/Settings/TwoFactor.tsx | 1 + src/pages/System/Statistics/HardwareInfo.tsx | 1 + src/pages/System/Statistics/SoftwareInfo.tsx | 1 + src/pages/System/Tools/Base.tsx | 4 +- src/pages/System/Tools/Category.tsx | 4 +- src/pages/System/Tools/Code.tsx | 4 +- src/pages/System/Tools/Execute.tsx | 1 + src/pages/System/Tools/Template.tsx | 3 +- src/pages/System/Tools/index.tsx | 30 +- src/pages/System/User.tsx | 4 +- src/pages/Tools/Create.tsx | 1 + src/pages/Tools/Edit.tsx | 36 +- src/pages/Tools/Source.tsx | 6 +- src/pages/Tools/Store.tsx | 2 +- src/pages/Tools/User.tsx | 9 +- src/pages/Tools/View.tsx | 11 +- src/pages/Tools/index.tsx | 192 +++++----- src/pages/ToolsFramework.tsx | 2 +- src/pages/User/index.tsx | 357 +++++++++---------- src/services/index.tsx | 51 +-- src/util/common.tsx | 19 + 40 files changed, 567 insertions(+), 554 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 879fec0..d013cdc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,7 @@ import BaseStyles from '@/assets/css/base.style' import CommonStyles from '@/assets/css/common.style' import { COLOR_PRODUCTION } from '@/constants/common.constants' import { getRouter } from '@/router' +import { init } from '@/util/common' import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask' export const AppContext = createContext({ @@ -12,10 +13,14 @@ export const AppContext = createContext({ }) const App = () => { + const [messageInstance, messageHolder] = message.useMessage() + const [notificationInstance, notificationHolder] = notification.useNotification() + const [modalInstance, modalHolder] = AntdModal.useModal() const [routerState, setRouterState] = useState(getRouter) const [isDarkMode, setIsDarkMode] = useState(false) useEffect(() => { + init(messageInstance, notificationInstance, modalInstance) const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)') setIsDarkMode(darkThemeMq.matches) const listener = (ev: MediaQueryListEvent) => { @@ -59,6 +64,9 @@ const App = () => { + {messageHolder} + {notificationHolder} + {modalHolder} ) } diff --git a/src/assets/css/base.style.ts b/src/assets/css/base.style.ts index 46f2fc2..2a10c24 100644 --- a/src/assets/css/base.style.ts +++ b/src/assets/css/base.style.ts @@ -7,7 +7,7 @@ export default createGlobalStyle(() => ({ li: { listStyle: 'none' }, img: { border: 0, verticalAlign: 'middle' }, button: { cursor: 'pointer' }, - a: { color: '#666', textDecoration: 'none' }, + a: { color: '#666', textDecoration: 'none', whiteSpace: 'nowrap' }, 'button, input': { fontFamily: 'Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif', diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx index 4314b7b..5a40354 100644 --- a/src/components/common/Card.tsx +++ b/src/components/common/Card.tsx @@ -4,9 +4,15 @@ import useStyles from '@/assets/css/components/common/card.style' type CardProps = DetailedHTMLProps, HTMLDivElement> const Card = forwardRef(({ className, ...props }, ref) => { - const { styles, cx } = useStyles() + const { styles } = useStyles() - return
+ return ( +
+ ) }) export default Card diff --git a/src/components/common/FitCenter.tsx b/src/components/common/FitCenter.tsx index c40125b..59e226d 100644 --- a/src/components/common/FitCenter.tsx +++ b/src/components/common/FitCenter.tsx @@ -6,15 +6,11 @@ interface FitCenterProps extends DetailedHTMLProps { - const { styles, cx } = useStyles() + const { styles } = useStyles() return (
) diff --git a/src/components/common/FitFullscreen.tsx b/src/components/common/FitFullscreen.tsx index 12dbbef..9c4485f 100644 --- a/src/components/common/FitFullscreen.tsx +++ b/src/components/common/FitFullscreen.tsx @@ -9,11 +9,11 @@ interface FitFullscreenProps const FitFullscreen = forwardRef( ({ zIndex, backgroundColor, className, style, ...props }, ref) => { - const { styles, cx } = useStyles() + const { styles } = useStyles() return (
, const FlexBox = forwardRef( ({ className, direction, gap, style, ...props }, ref) => { - const { styles, cx } = useStyles() + const { styles } = useStyles() return (
( >
( className={cx( styles.scrollbar, styles.verticalScrollbar, - isVerticalScrollbarAutoHide ? ` ${styles.hide}` : '' + isVerticalScrollbarAutoHide ? styles.hide : '' )} style={{ height: maskRef.current @@ -619,7 +619,7 @@ const HideScrollbar = forwardRef( className={cx( styles.scrollbar, styles.horizontalScrollbar, - isHorizontalScrollbarAutoHide ? ` ${styles.hide}` : '' + isHorizontalScrollbarAutoHide ? styles.hide : '' )} style={{ width: maskRef.current diff --git a/src/components/common/Sidebar/Footer.tsx b/src/components/common/Sidebar/Footer.tsx index 38b5488..f0dd000 100644 --- a/src/components/common/Sidebar/Footer.tsx +++ b/src/components/common/Sidebar/Footer.tsx @@ -1,6 +1,7 @@ import Icon from '@ant-design/icons' import useStyles from '@/assets/css/components/common/sidebar/footer.style' import { SidebarContext } from '@/components/common/Sidebar/index' +import { notification } from '@/util/common' import { getRedirectUrl } from '@/util/route' import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth' import { navigateToLogin, navigateToUser } from '@/util/navigation' diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx index 04f0f6b..e121abd 100644 --- a/src/components/tools/StoreCard.tsx +++ b/src/components/tools/StoreCard.tsx @@ -3,7 +3,7 @@ import VanillaTilt, { TiltOptions } from 'vanilla-tilt' import protocolCheck from 'custom-protocol-check' import Icon from '@ant-design/icons' import useStyles from '@/assets/css/components/tools/store-card.style' -import { checkDesktop, omitTextByByte } from '@/util/common' +import { message, modal, checkDesktop, omitTextByByte } from '@/util/common' import { getLoginStatus, getUserId } from '@/util/auth' import { getAndroidUrl, @@ -56,7 +56,6 @@ const StoreCard = ({ }: StoreCardProps) => { const { styles, theme } = useStyles() const navigate = useNavigate() - const [modal, contextHolder] = AntdModal.useModal() const cardRef = useRef(null) const [favorite_, setFavorite_] = useState(favorite) const [userId, setUserId] = useState('') @@ -76,6 +75,7 @@ const StoreCard = ({ if (platform === 'ANDROID') { void modal.confirm({ centered: true, + keyboard: false, icon: , title: 'Android 端', content: ( @@ -144,6 +144,7 @@ const StoreCard = ({ e.stopPropagation() void modal.confirm({ centered: true, + keyboard: false, icon: , title: 'Android 端', content: ( @@ -190,114 +191,108 @@ const StoreCard = ({ } return ( - <> - + - - -
-
- - {platform.slice(0, 1)}-{ver} - -
-
- {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && ( - - - - )} - {platform === 'DESKTOP' && supportPlatform.includes('WEB') && ( - - - - )} - {platform === 'WEB' && supportPlatform.includes('DESKTOP') && ( - - - - )} - + +
+
+ + {platform.slice(0, 1)}-{ver} + +
+
+ {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && ( + - {author.id !== userId && ( - - - - )} - -
-
-
- {'Icon'} -
-
-
- {toolName} -
-
{`ID: ${toolId}`}
- {toolDesc && ( -
- {omitTextByByte(toolDesc, 64)} -
)} -
- {showAuthor && ( -
-
- - } - style={{ background: theme.colorBgLayout }} + {platform === 'DESKTOP' && supportPlatform.includes('WEB') && ( + + -
-
{author.userInfo.nickname}
+ + )} + {platform === 'WEB' && supportPlatform.includes('DESKTOP') && ( + + + + )} + + + + {author.id !== userId && ( + + + + )} + +
+
+
+ {'Icon'} +
+
+
+ {toolName} +
+
{`ID: ${toolId}`}
+ {toolDesc && ( +
+ {omitTextByByte(toolDesc, 64)}
)} - - - - {contextHolder} - +
+ {showAuthor && ( +
+
+ + } + style={{ background: theme.colorBgLayout }} + /> +
+
{author.userInfo.nickname}
+
+ )} + + + ) } diff --git a/src/pages/Sign/Forget.tsx b/src/pages/Sign/Forget.tsx index 6db1891..58772d3 100644 --- a/src/pages/Sign/Forget.tsx +++ b/src/pages/Sign/Forget.tsx @@ -9,6 +9,7 @@ import { PERMISSION_USER_NOT_FOUND, SYSTEM_INVALID_CAPTCHA_CODE } from '@/constants/common.constants' +import { message } from '@/util/common' import { navigateToLogin } from '@/util/navigation' import { r_auth_forget, r_auth_retrieve } from '@/services/auth' import { AppContext } from '@/App' diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx index 9ac8ee1..ab8dddd 100644 --- a/src/pages/Sign/SignIn.tsx +++ b/src/pages/Sign/SignIn.tsx @@ -11,6 +11,7 @@ import { PERMISSION_USERNAME_NOT_FOUND, SYSTEM_INVALID_CAPTCHA_CODE } from '@/constants/common.constants' +import { message, notification, modal } from '@/util/common' import { getUserInfo, setToken } from '@/util/auth' import { utcToLocalTime } from '@/util/datetime' import { @@ -26,7 +27,6 @@ import FlexBox from '@/components/common/FlexBox' const SignIn = () => { const { styles } = useStyles() - const [modal, contextHolder] = AntdModal.useModal() const { refreshRouter, isDarkMode } = useContext(AppContext) const navigate = useNavigate() const [searchParams] = useSearchParams() @@ -82,8 +82,7 @@ const SignIn = () => { switch (code) { case PERMISSION_LOGIN_SUCCESS: setToken(data?.token ?? '') - void message.success('登录成功') - setTimeout(() => { + message.success('登录成功').then(() => { void getUserInfo().then((user) => { refreshRouter() navigateToRedirect(navigate, searchParams, '/repository') @@ -109,7 +108,7 @@ const SignIn = () => { placement: 'topRight' }) }) - }, 1500) + }) break case PERMISSION_NEED_TWO_FACTOR: twoFactorForm.resetFields() @@ -299,7 +298,6 @@ const SignIn = () => {
- {contextHolder} ) } diff --git a/src/pages/Sign/SignUp.tsx b/src/pages/Sign/SignUp.tsx index c341d0a..dc23f2d 100644 --- a/src/pages/Sign/SignUp.tsx +++ b/src/pages/Sign/SignUp.tsx @@ -8,6 +8,7 @@ import { SYSTEM_INVALID_CAPTCHA_CODE, SYSTEM_MATCH_SENSITIVE_WORD } from '@/constants/common.constants' +import { message } from '@/util/common' import { getLoginStatus, setToken } from '@/util/auth' import { navigateToLogin } from '@/util/navigation' import { r_auth_register, r_auth_resend } from '@/services/auth' diff --git a/src/pages/Sign/Verify.tsx b/src/pages/Sign/Verify.tsx index 64e97e1..9c10586 100644 --- a/src/pages/Sign/Verify.tsx +++ b/src/pages/Sign/Verify.tsx @@ -6,6 +6,7 @@ import { PERMISSION_VERIFY_SUCCESS, SYSTEM_MATCH_SENSITIVE_WORD } from '@/constants/common.constants' +import { message } from '@/util/common' import { getLoginStatus, getUserInfo, requestUserInfo } from '@/util/auth' import { navigateToLogin, navigateToRedirect, navigateToRepository } from '@/util/navigation' import { r_auth_resend, r_auth_verify } from '@/services/auth' @@ -125,13 +126,12 @@ const Verify = () => { const response = res.data switch (response.code) { case PERMISSION_VERIFY_SUCCESS: - void message.success('恭喜你，完成了') - setTimeout(() => { + message.success('恭喜你，完成了').then(() => { void requestUserInfo().then(() => { refreshRouter() navigateToRedirect(navigate, searchParams, '/repository') }) - }, 1500) + }) break case SYSTEM_MATCH_SENSITIVE_WORD: void message.error('昵称包含敏感词，请重试') diff --git a/src/pages/System/Group.tsx b/src/pages/System/Group.tsx index f02802c..c0ed082 100644 --- a/src/pages/System/Group.tsx +++ b/src/pages/System/Group.tsx @@ -8,6 +8,7 @@ import { DATABASE_SELECT_SUCCESS, DATABASE_UPDATE_SUCCESS } from '@/constants/common.constants' +import { message, modal } from '@/util/common' import { hasPermission } from '@/util/auth' import { utcToLocalTime } from '@/util/datetime' import { @@ -27,7 +28,6 @@ import Card from '@/components/common/Card' const Group = () => { const theme = useTheme() - const [modal, contextHolder] = AntdModal.useModal() const [form] = AntdForm.useForm() const formValues = AntdForm.useWatch([], form) const [newFormValues, setNewFormValues] = useState() @@ -246,7 +246,7 @@ const Group = () => { centered: true, maskClosable: true, title: '确定删除', - content: `确定删除角色 ${value.name} 吗？` + content: `确定删除用户组 ${value.name} 吗？` }) .then( (confirmed) => { @@ -300,7 +300,7 @@ const Group = () => { getGroup() break case DATABASE_DUPLICATE_KEY: - void message.error('已存在相同名称的角色') + void message.error('已存在相同名称的用户组') break default: void message.error('更新失败，请稍后重试') @@ -321,7 +321,7 @@ const Group = () => { getGroup() break case DATABASE_DUPLICATE_KEY: - void message.error('已存在相同名称的角色') + void message.error('已存在相同名称的用户组') break default: void message.error('添加失败，请稍后重试') @@ -563,6 +563,7 @@ const Group = () => { rowKey={(record) => record.id} pagination={tableParams.pagination} loading={isLoading} + scroll={{ x: true }} onChange={handleOnTableChange} rowSelection={ hasPermission('system:group:delete:multiple') @@ -657,7 +658,6 @@ const Group = () => { > {addAndEditForm} - {contextHolder} ) } diff --git a/src/pages/System/Log.tsx b/src/pages/System/Log.tsx index d2f1ebe..3275c80 100644 --- a/src/pages/System/Log.tsx +++ b/src/pages/System/Log.tsx @@ -2,6 +2,7 @@ import { ChangeEvent, KeyboardEvent } from 'react' import { useTheme } from 'antd-style' import dayjs from 'dayjs' import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants' +import { message } from '@/util/common' import { dayjsToUtc, utcToLocalTime } from '@/util/datetime' import { r_sys_log_get } from '@/services/system' import FitFullscreen from '@/components/common/FitFullscreen' diff --git a/src/pages/System/Role.tsx b/src/pages/System/Role.tsx index 266c905..5192906 100644 --- a/src/pages/System/Role.tsx +++ b/src/pages/System/Role.tsx @@ -8,6 +8,7 @@ import { DATABASE_SELECT_SUCCESS, DATABASE_UPDATE_SUCCESS } from '@/constants/common.constants' +import { message, modal } from '@/util/common' import { utcToLocalTime } from '@/util/datetime' import { hasPermission, powerListToPowerTree } from '@/util/auth' import { @@ -27,7 +28,6 @@ import Card from '@/components/common/Card' const Role = () => { const theme = useTheme() - const [modal, contextHolder] = AntdModal.useModal() const [form] = AntdForm.useForm() const formValues = AntdForm.useWatch([], form) const [newFormValues, setNewFormValues] = useState() @@ -572,6 +572,7 @@ const Role = () => { rowKey={(record) => record.id} pagination={tableParams.pagination} loading={isLoading} + scroll={{ x: true }} onChange={handleOnTableChange} rowSelection={ hasPermission('system:role:delete:multiple') @@ -664,7 +665,6 @@ const Role = () => { > {addAndEditForm} - {contextHolder} ) } diff --git a/src/pages/System/Settings/Base.tsx b/src/pages/System/Settings/Base.tsx index 57351d9..9481045 100644 --- a/src/pages/System/Settings/Base.tsx +++ b/src/pages/System/Settings/Base.tsx @@ -1,3 +1,4 @@ +import { message } from '@/util/common' import { hasPermission } from '@/util/auth' import { r_sys_settings_base_get, r_sys_settings_base_update } from '@/services/system' import SettingsCard from '@/components/system/SettingCard' diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx index e3666c9..f997533 100644 --- a/src/pages/System/Settings/Mail.tsx +++ b/src/pages/System/Settings/Mail.tsx @@ -1,4 +1,5 @@ import Icon from '@ant-design/icons' +import { message, modal } from '@/util/common' import { hasPermission } from '@/util/auth' import { r_sys_settings_mail_get, @@ -8,7 +9,6 @@ import { import SettingsCard from '@/components/system/SettingCard' const Mail = () => { - const [modal, contextHolder] = AntdModal.useModal() const [mailForm] = AntdForm.useForm() const mailFormValues = AntdForm.useWatch([], mailForm) const [isLoading, setIsLoading] = useState(false) @@ -114,59 +114,56 @@ const Mail = () => { }, []) return ( - <> - - - - } + + + + } + > + - - - - - - - - - - None - SSL/TLS - StartTls - - - - - - - - - - - - - - - - - {contextHolder} - + + + + + + + + + None + SSL/TLS + StartTls + + + + + + + + + + + + + + + + ) } diff --git a/src/pages/System/Settings/SensitiveWord.tsx b/src/pages/System/Settings/SensitiveWord.tsx index f0f8da6..4c7c9aa 100644 --- a/src/pages/System/Settings/SensitiveWord.tsx +++ b/src/pages/System/Settings/SensitiveWord.tsx @@ -1,6 +1,7 @@ import { ChangeEvent } from 'react' import Icon from '@ant-design/icons' import { DATABASE_DUPLICATE_KEY, DATABASE_INSERT_SUCCESS } from '@/constants/common.constants' +import { message } from '@/util/common' import { r_sys_settings_sensitive_add, r_sys_settings_sensitive_delete, diff --git a/src/pages/System/Settings/TwoFactor.tsx b/src/pages/System/Settings/TwoFactor.tsx index b9c55ee..ddace2a 100644 --- a/src/pages/System/Settings/TwoFactor.tsx +++ b/src/pages/System/Settings/TwoFactor.tsx @@ -1,3 +1,4 @@ +import { message } from '@/util/common' import { hasPermission } from '@/util/auth' import { r_sys_settings_two_factor_get, r_sys_settings_two_factor_update } from '@/services/system' import SettingsCard from '@/components/system/SettingCard' diff --git a/src/pages/System/Statistics/HardwareInfo.tsx b/src/pages/System/Statistics/HardwareInfo.tsx index 61271ca..7fcabc3 100644 --- a/src/pages/System/Statistics/HardwareInfo.tsx +++ b/src/pages/System/Statistics/HardwareInfo.tsx @@ -1,4 +1,5 @@ import useStyles from '@/assets/css/pages/system/statistics/common.style' +import { message } from '@/util/common' import { r_sys_statistics_hardware } from '@/services/system' import FlexBox from '@/components/common/FlexBox' import StatisticsCard from '@/components/system/StatisticsCard' diff --git a/src/pages/System/Statistics/SoftwareInfo.tsx b/src/pages/System/Statistics/SoftwareInfo.tsx index 0d343d9..e28d75f 100644 --- a/src/pages/System/Statistics/SoftwareInfo.tsx +++ b/src/pages/System/Statistics/SoftwareInfo.tsx @@ -1,4 +1,5 @@ import useStyles from '@/assets/css/pages/system/statistics/common.style' +import { message } from '@/util/common' import { utcToLocalTime } from '@/util/datetime' import { r_sys_statistics_software } from '@/services/system' import FlexBox from '@/components/common/FlexBox' diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx index 44589de..4cd9056 100644 --- a/src/pages/System/Tools/Base.tsx +++ b/src/pages/System/Tools/Base.tsx @@ -7,6 +7,7 @@ import { DATABASE_SELECT_SUCCESS, DATABASE_UPDATE_SUCCESS } from '@/constants/common.constants' +import { message, modal } from '@/util/common' import { utcToLocalTime } from '@/util/datetime' import { hasPermission } from '@/util/auth' import editorExtraLibs from '@/util/editorExtraLibs' @@ -43,7 +44,6 @@ const Base = () => { ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0 ) - const [modal, contextHolder] = AntdModal.useModal() const [tableParams, setTableParams] = useState({ pagination: { current: 1, @@ -1093,6 +1093,7 @@ const Base = () => { expandedRowRender, onExpand: handleOnExpand }} + scroll={{ x: true }} onChange={handleOnTableChange} /> @@ -1134,7 +1135,6 @@ const Base = () => { {addAndEditForm} - {contextHolder} { const theme = useTheme() - const [modal, contextHolder] = AntdModal.useModal() const [form] = AntdForm.useForm() const formValues = AntdForm.useWatch([], form) const [newFormValues, setNewFormValues] = useState() @@ -298,6 +298,7 @@ const Category = () => { columns={categoryColumns} rowKey={(record) => record.id} loading={isLoading} + scroll={{ x: true }} pagination={false} /> @@ -313,7 +314,6 @@ const Category = () => { > {addAndEditForm} - {contextHolder} ) } diff --git a/src/pages/System/Tools/Code.tsx b/src/pages/System/Tools/Code.tsx index d098cfa..b3392fc 100644 --- a/src/pages/System/Tools/Code.tsx +++ b/src/pages/System/Tools/Code.tsx @@ -2,7 +2,7 @@ import Draggable from 'react-draggable' import Icon from '@ant-design/icons' import useStyles from '@/assets/css/pages/system/tools/code.style' import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants' -import { checkDesktop } from '@/util/common' +import { message, modal, checkDesktop } from '@/util/common' import { navigateToExecute, navigateToRepository } from '@/util/navigation' import editorExtraLibs from '@/util/editorExtraLibs' import { r_sys_tool_get_one } from '@/services/system' @@ -17,7 +17,6 @@ const Code = () => { const { styles } = useStyles() const { isDarkMode } = useContext(AppContext) const navigate = useNavigate() - const [modal, contextHolder] = AntdModal.useModal() const { id } = useParams() const [isLoading, setIsLoading] = useState(false) const [files, setFiles] = useState({}) @@ -106,7 +105,6 @@ const Code = () => {
- {contextHolder} ) } diff --git a/src/pages/System/Tools/Execute.tsx b/src/pages/System/Tools/Execute.tsx index 1991ef0..7a30116 100644 --- a/src/pages/System/Tools/Execute.tsx +++ b/src/pages/System/Tools/Execute.tsx @@ -1,5 +1,6 @@ import useStyles from '@/assets/css/pages/system/tools/execute.style' import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants' +import { message } from '@/util/common' import { navigateToTools } from '@/util/navigation' import { r_sys_tool_get_one } from '@/services/system' import FitFullscreen from '@/components/common/FitFullscreen' diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx index adbef35..2555e3e 100644 --- a/src/pages/System/Tools/Template.tsx +++ b/src/pages/System/Tools/Template.tsx @@ -7,6 +7,7 @@ import { DATABASE_SELECT_SUCCESS, DATABASE_UPDATE_SUCCESS } from '@/constants/common.constants' +import { message, modal } from '@/util/common' import { utcToLocalTime } from '@/util/datetime' import { hasPermission } from '@/util/auth' import editorExtraLibs from '@/util/editorExtraLibs' @@ -41,7 +42,6 @@ const Template = () => { ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0 ) - const [modal, contextHolder] = AntdModal.useModal() const [tableParams, setTableParams] = useState({ pagination: { current: 1, @@ -1078,7 +1078,6 @@ const Template = () => { {addAndEditForm} - {contextHolder} { const theme = useTheme() const navigate = useNavigate() - const [modal, contextHolder] = AntdModal.useModal() const [tableParams, setTableParams] = useState({ pagination: { current: 1, @@ -572,27 +572,25 @@ const Tools = () => { columns={dataColumns} pagination={tableParams.pagination} loading={isLoading} + scroll={{ x: true }} onChange={handleOnTableChange} /> ) return ( - <> - - - - {toolbar} - {table} - - - - {contextHolder} - + + + + {toolbar} + {table} + + + ) } diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx index cfda029..6fd77c3 100644 --- a/src/pages/System/User.tsx +++ b/src/pages/System/User.tsx @@ -9,6 +9,7 @@ import { DATABASE_SELECT_SUCCESS, DATABASE_UPDATE_SUCCESS } from '@/constants/common.constants' +import { message, modal } from '@/util/common' import { hasPermission } from '@/util/auth' import { utcToLocalTime, isPastTime, localTimeToUtc, dayjsToUtc, getNowUtc } from '@/util/datetime' import { @@ -35,7 +36,6 @@ interface ChangePasswordFields extends UserUpdatePasswordParam { const User = () => { const theme = useTheme() - const [modal, contextHolder] = AntdModal.useModal() const [isDrawerOpen, setIsDrawerOpen] = useState(false) const [isDrawerEdit, setIsDrawerEdit] = useState(false) @@ -972,6 +972,7 @@ const User = () => { rowKey={(record) => record.id} pagination={tableParams.pagination} loading={isLoadingUserData} + scroll={{ x: true }} onChange={handleOnTableChange} rowSelection={ hasPermission('system:user:delete:multiple') @@ -1031,7 +1032,6 @@ const User = () => { > {addAndEditForm} - {contextHolder} ) } diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx index 9d99091..1618fd5 100644 --- a/src/pages/Tools/Create.tsx +++ b/src/pages/Tools/Create.tsx @@ -5,6 +5,7 @@ import { DATABASE_INSERT_SUCCESS, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants' +import { message } from '@/util/common' import { navigateToEdit } from '@/util/navigation' import { r_tool_category_get, diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx index 0517a52..a9a6e3d 100644 --- a/src/pages/Tools/Edit.tsx +++ b/src/pages/Tools/Edit.tsx @@ -8,6 +8,7 @@ import { TOOL_HAS_BEEN_PUBLISHED, TOOL_UNDER_REVIEW } from '@/constants/common.constants' +import { message } from '@/util/common' import { navigateToRepository } from '@/util/navigation' import editorExtraLibs from '@/util/editorExtraLibs' import { r_tool_category_get, r_tool_detail, r_tool_update } from '@/services/tool' @@ -121,12 +122,14 @@ const Edit = () => { getTool() break case TOOL_UNDER_REVIEW: - void message.error('保存失败：工具审核中') - navigateToRepository(navigate) + message.error('保存失败：工具审核中').then(() => { + navigateToRepository(navigate) + }) break case TOOL_HAS_BEEN_PUBLISHED: - void message.error('保存失败：工具已发布') - navigateToRepository(navigate) + message.error('保存失败：工具已发布').then(() => { + navigateToRepository(navigate) + }) break default: void message.error('保存失败，请稍后重试') @@ -182,12 +185,14 @@ const Edit = () => { getTool() break case TOOL_UNDER_REVIEW: - void message.error('保存失败：工具审核中') - navigateToRepository(navigate) + message.error('保存失败：工具审核中').then(() => { + navigateToRepository(navigate) + }) break case TOOL_HAS_BEEN_PUBLISHED: - void message.error('保存失败：工具已发布') - navigateToRepository(navigate) + message.error('保存失败：工具已发布').then(() => { + navigateToRepository(navigate) + }) break default: void message.error('保存失败，请稍后重试') @@ -239,17 +244,20 @@ const Edit = () => { setHasEdited(false) break case 'PROCESSING': - void message.warning('工具审核中，请勿修改') - navigateToRepository(navigate) + message.warning('工具审核中，请勿修改').then(() => { + navigateToRepository(navigate) + }) break default: - void message.warning('请先创建新版本后编辑工具') - navigateToRepository(navigate) + message.warning('请先创建新版本后编辑工具').then(() => { + navigateToRepository(navigate) + }) } break case DATABASE_NO_RECORD_FOUND: - void message.error('未找到指定工具') - navigateToRepository(navigate) + message.error('未找到指定工具').then(() => { + navigateToRepository(navigate) + }) break default: void message.error('获取工具信息失败，请稍后重试') diff --git a/src/pages/Tools/Source.tsx b/src/pages/Tools/Source.tsx index 5935c00..e374bc4 100644 --- a/src/pages/Tools/Source.tsx +++ b/src/pages/Tools/Source.tsx @@ -1,5 +1,6 @@ import useStyles from '@/assets/css/pages/tools/source.style' import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants' +import { message } from '@/util/common' import { getLoginStatus } from '@/util/auth' import { navigateToRepository, navigateToSource } from '@/util/navigation' import editorExtraLibs from '@/util/editorExtraLibs' @@ -52,8 +53,9 @@ const Source = () => { render(response.data!) break case DATABASE_NO_RECORD_FOUND: - void message.error('未找到指定工具') - navigateToRepository(navigate) + void message.error('未找到指定工具').then(() => { + navigateToRepository(navigate) + }) break default: void message.error('获取工具信息失败，请稍后重试') diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx index 3937869..722bb17 100644 --- a/src/pages/Tools/Store.tsx +++ b/src/pages/Tools/Store.tsx @@ -1,7 +1,7 @@ import { UIEvent } from 'react' import useStyles from '@/assets/css/pages/tools/store.style' import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants' -import { checkDesktop } from '@/util/common' +import { message, checkDesktop } from '@/util/common' import { r_tool_store_get } from '@/services/tool' import FlexBox from '@/components/common/FlexBox' import FitFullscreen from '@/components/common/FitFullscreen' diff --git a/src/pages/Tools/User.tsx b/src/pages/Tools/User.tsx index 227689e..3e7df46 100644 --- a/src/pages/Tools/User.tsx +++ b/src/pages/Tools/User.tsx @@ -1,7 +1,7 @@ import Icon from '@ant-design/icons' import useStyles from '@/assets/css/pages/tools/user.style' import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants' -import { checkDesktop } from '@/util/common' +import { message, checkDesktop } from '@/util/common' import { navigateToRoot } from '@/util/navigation' import { r_sys_user_info_get_basic } from '@/services/system' import { r_tool_store_get_by_username } from '@/services/tool' @@ -40,7 +40,7 @@ const User = () => { return } setIsLoading(true) - void message.loading({ content: '加载中', key: 'LOADING', duration: 0 }) + void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 }) void r_sys_user_info_get_basic(username!) .then((res) => { @@ -51,10 +51,9 @@ const User = () => { getTool(1) break case DATABASE_NO_RECORD_FOUND: - void message.warning('用户不存在') - setTimeout(() => { + void message.warning('用户不存在').then(() => { navigateToRoot(navigate) - }, 3000) + }) break default: void message.error('获取失败请稍后重试') diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx index 965b5c6..38395d6 100644 --- a/src/pages/Tools/View.tsx +++ b/src/pages/Tools/View.tsx @@ -1,5 +1,6 @@ import useStyles from '@/assets/css/pages/tools/view.style' import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants' +import { message } from '@/util/common' import { getLoginStatus } from '@/util/auth' import { navigateToRepository, navigateToRoot, navigateToView } from '@/util/navigation' import { r_tool_detail } from '@/services/tool' @@ -78,8 +79,9 @@ const View = () => { render(response.data!) break case DATABASE_NO_RECORD_FOUND: - void message.error('未找到指定工具') - navigateToRepository(navigate) + void message.error('未找到指定工具').then(() => { + navigateToRepository(navigate) + }) break default: void message.error('获取工具信息失败，请稍后重试') @@ -98,8 +100,9 @@ const View = () => { return } if (username === '!' && !getLoginStatus()) { - void message.error('未登录') - navigateToRoot(navigate) + void message.error('未登录').then(() => { + navigateToRoot(navigate) + }) return } if (username !== '!' && ver) { diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx index 96bb419..4c7f5ef 100644 --- a/src/pages/Tools/index.tsx +++ b/src/pages/Tools/index.tsx @@ -12,7 +12,7 @@ import { TOOL_SUBMIT_SUCCESS, TOOL_UNDER_REVIEW } from '@/constants/common.constants' -import { checkDesktop } from '@/util/common' +import { message, modal, checkDesktop } from '@/util/common' import { getLoginStatus } from '@/util/auth' import { navigateToEdit, navigateToSource, navigateToView } from '@/util/navigation' import { @@ -204,7 +204,6 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr const Tools = () => { const { styles } = useStyles() const navigate = useNavigate() - const [modal, contextHolder] = AntdModal.useModal() const [isLoading, setIsLoading] = useState(false) const [currentPage, setCurrentPage] = useState(0) const [hasNextPage, setHasNextPage] = useState(false) @@ -537,106 +536,97 @@ const Tools = () => { }, []) return ( - <> - - - - - - 创建工具 - - {toolData && - Object.values( - toolData.reduce((result: Record, item) => { - result[item.toolId] = result[item.toolId] || [] - result[item.toolId].push(item) - return result - }, {}) - ).map((value) => ( - - ))} - {hasNextPage && } - - {starToolData.length ? ( - <> - -
-
收藏
-
- - - {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 ( - value.platform - )} - favorite={firstTool!.favorite} - /> - ) - })} - {hasNextStarPage && ( - - )} - - - ) : undefined} + + + + + + 创建工具 + + {toolData && + Object.values( + toolData.reduce((result: Record, item) => { + result[item.toolId] = result[item.toolId] || [] + result[item.toolId].push(item) + return result + }, {}) + ).map((value) => ( + + ))} + {hasNextPage && } - - - {contextHolder} - + {starToolData.length ? ( + <> + +
+
收藏
+
+ + + {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 ( + value.platform + )} + favorite={firstTool!.favorite} + /> + ) + })} + {hasNextStarPage && } + + + ) : undefined} + + + ) } diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx index 5aa9792..eecd2b0 100644 --- a/src/pages/ToolsFramework.tsx +++ b/src/pages/ToolsFramework.tsx @@ -3,7 +3,7 @@ import { arrayMove, SortableContext } from '@dnd-kit/sortable' import type { DragEndEvent } from '@dnd-kit/core/dist/types' import useStyles from '@/assets/css/pages/tools-framework.style' import { tools } from '@/router/tools' -import { checkDesktop, getToolMenuItem, saveToolMenuItem } from '@/util/common' +import { message, checkDesktop, getToolMenuItem, saveToolMenuItem } from '@/util/common' import { getViewPath } from '@/util/navigation' import FitFullscreen from '@/components/common/FitFullscreen' import Sidebar from '@/components/common/Sidebar' diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx index d27f634..9bba5ea 100644 --- a/src/pages/User/index.tsx +++ b/src/pages/User/index.tsx @@ -5,6 +5,7 @@ import { PERMISSION_ACCESS_DENIED, PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR } from '@/constants/common.constants' +import { message, notification, modal } from '@/util/common' import { utcToLocalTime } from '@/util/datetime' import { getUserInfo, removeToken } from '@/util/auth' import { r_sys_user_info_change_password, r_sys_user_info_update } from '@/services/system' @@ -21,7 +22,6 @@ import HideScrollbar from '@/components/common/HideScrollbar' const User = () => { const { styles, theme } = useStyles() - const [modal, contextHolder] = AntdModal.useModal() const [form] = AntdForm.useForm() const formValues = AntdForm.useWatch([], form) const [twoFactorForm] = AntdForm.useForm<{ twoFactorCode: string }>() @@ -180,7 +180,6 @@ const User = () => { const response = res.data switch (response.code) { case DATABASE_UPDATE_SUCCESS: - void message.success('密码修改成功，请重新登录') removeToken() notification.info({ message: '已退出登录', @@ -191,9 +190,9 @@ const User = () => { /> ) }) - setTimeout(() => { + message.success('密码修改成功，请重新登录').then(() => { window.location.reload() - }, 1500) + }) resolve() break case PERMISSION_ACCESS_DENIED: @@ -312,7 +311,7 @@ const User = () => { return } setIsLoading(true) - void message.loading({ content: '加载中', key: 'LOADING', duration: 0 }) + void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 }) void r_auth_two_factor_create() .then((res) => { message.destroy('LOADING') @@ -447,192 +446,180 @@ const User = () => { }, []) return ( - <> - - - - - -
- - } - size={144} - style={{ - background: theme.colorBgLayout, - cursor: 'pointer' - }} - className={styles.avatar} - onClick={handleOnChangeAvatar} - /> -
- - -
- {userWithPowerInfoVo?.userInfo.nickname} -
- - {userWithPowerInfoVo?.username && - new URL( - `/store/${userWithPowerInfoVo.username}`, - import.meta.env.VITE_UI_URL - ).href} - - - + + + + + +
+ + } + size={144} + style={{ + background: theme.colorBgLayout, + cursor: 'pointer' + }} + className={styles.avatar} + onClick={handleOnChangeAvatar} + /> +
+ + +
+ {userWithPowerInfoVo?.userInfo.nickname} +
+ + {userWithPowerInfoVo?.username && + new URL( + `/store/${userWithPowerInfoVo.username}`, + import.meta.env.VITE_UI_URL + ).href} + + - -
档案管理
- - - 重置 - - - 保存 - - + + +
档案管理
+ + + 重置 + + + 保存 + -
- - -
昵称
-
- - - - - -
- - -
用户名
-
- -
- - -
邮箱
-
- -
- - -
注册时间
-
- -
- - -
- - -
上次登录 IP
-
- -
- - -
上次登录时间
-
- -
- - -
密码
-
- - - - - - -
- - -
双因素
-
- + +
+ + +
昵称
+
+ + + + +
+ + +
用户名
+
+ +
+ + +
邮箱
+
+ +
+ + +
注册时间
+
+ +
+ + +
+ + +
上次登录 IP
+
+ +
+ + +
上次登录时间
+
+ +
+ + +
密码
+
+ + + + + + +
+ + +
双因素
+
+ + + + - - - - -
- + + +
- - - - {contextHolder} - + + + + ) } diff --git a/src/services/index.tsx b/src/services/index.tsx index db8d15e..eb9a871 100644 --- a/src/services/index.tsx +++ b/src/services/index.tsx @@ -8,6 +8,7 @@ import { PERMISSION_UNAUTHORIZED, SYSTEM_REQUEST_TOO_FREQUENT } from '@/constants/common.constants' +import { message } from '@/util/common' import { getRedirectUrl } from '@/util/route' import { getToken, setToken, removeToken } from '@/util/auth' @@ -68,34 +69,36 @@ service.interceptors.response.use( switch (response.data.code) { case PERMISSION_UNAUTHORIZED: removeToken() - void message.error({ - content: ( - <> - 未登录 - - ), - key: 'NO_LOGIN' - }) - setTimeout(() => { - location.reload() - }, 1500) + message + .error({ + content: ( + <> + 未登录 + + ), + key: 'NO_LOGIN' + }) + .then(() => { + location.reload() + }) throw response?.data case PERMISSION_TOKEN_ILLEGAL: case PERMISSION_TOKEN_HAS_EXPIRED: removeToken() - void message.error({ - content: ( - <> - 登录已过期 - - ), - key: 'LOGIN_HAS_EXPIRED' - }) - setTimeout(() => { - location.replace( - getRedirectUrl('/login', `${location.pathname}${location.search}`) - ) - }, 1500) + message + .error({ + content: ( + <> + 登录已过期 + + ), + key: 'LOGIN_HAS_EXPIRED' + }) + .then(() => { + location.replace( + getRedirectUrl('/login', `${location.pathname}${location.search}`) + ) + }) throw response?.data case PERMISSION_ACCESS_DENIED: void message.error({ diff --git a/src/util/common.tsx b/src/util/common.tsx index 83bf385..6d8ca19 100644 --- a/src/util/common.tsx +++ b/src/util/common.tsx @@ -3,6 +3,25 @@ import { floor } from 'lodash' import { STORAGE_TOOL_MENU_ITEM_KEY } from '@/constants/common.constants' import { getLocalStorage, setLocalStorage } from '@/util/browser' import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask' +import { MessageInstance } from 'antd/es/message/interface' +import { NotificationInstance } from 'antd/es/notification/interface' +import { HookAPI } from 'antd/es/modal/useModal' + +let message: MessageInstance +let notification: NotificationInstance +let modal: HookAPI + +export const init = ( + messageInstance: MessageInstance, + notificationInstance: NotificationInstance, + modalInstance: HookAPI +) => { + message = messageInstance + notification = notificationInstance + modal = modalInstance +} + +export { message, notification, modal } export const randomInt = (start: number, end: number) => { if (start > end) {