diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/LoadingMask.tsx index 86d2548..bbb231d 100644 --- a/src/components/common/LoadingMask.tsx +++ b/src/components/common/LoadingMask.tsx @@ -1,8 +1,8 @@ import React from 'react' import Icon from '@ant-design/icons' import '@/assets/css/components/common/loading-mask.scss' -import FitFullScreen from '@/components/common/FitFullScreen' import { COLOR_FONT_MAIN } from '@/constants/common.constants' +import FitFullScreen from '@/components/common/FitFullScreen' const LoadingMask: React.FC = () => { const loadingIcon = ( diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar/SidebarFooter.tsx index a142249..20d0fe4 100644 --- a/src/components/common/sidebar/SidebarFooter.tsx +++ b/src/components/common/sidebar/SidebarFooter.tsx @@ -1,9 +1,8 @@ import React from 'react' import Icon from '@ant-design/icons' -import { notification } from 'antd' -import { getLoginStatus, getNickname, logout } from '@/utils/auth' -import { getRedirectUrl } from '@/utils/common' import { COLOR_ERROR } from '@/constants/common.constants' +import { getRedirectUrl } from '@/utils/common' +import { getLoginStatus, getNickname, logout } from '@/utils/auth' const SidebarFooter: React.FC = () => { const matches = useMatches() diff --git a/src/components/common/sidebar/index.tsx b/src/components/common/sidebar/index.tsx index 87dd435..281eb1a 100644 --- a/src/components/common/sidebar/index.tsx +++ b/src/components/common/sidebar/index.tsx @@ -1,9 +1,9 @@ import React from 'react' import Icon from '@ant-design/icons' import '@/assets/css/components/common/sidebar.scss' +import { getLocalStorage, setLocalStorage } from '@/utils/common' import SidebarSeparate from '@/components/common/sidebar/SidebarSeparate' import SidebarFooter from '@/components/common/sidebar/SidebarFooter' -import { getLocalStorage, setLocalStorage } from '@/utils/common' interface SidebarProps extends React.PropsWithChildren { title: string diff --git a/src/components/home/Footer.tsx b/src/components/home/Footer.tsx index 1ec0e35..bf11c34 100644 --- a/src/components/home/Footer.tsx +++ b/src/components/home/Footer.tsx @@ -3,7 +3,6 @@ import Icon from '@ant-design/icons' import '@/assets/css/components/home/footer.scss' import FitCenter from '@/components/common/FitCenter' import FitFullScreen from '@/components/common/FitFullScreen' -import { NavLink } from 'react-router-dom' const Footer: React.FC = () => { return ( diff --git a/src/main.tsx b/src/main.tsx index 2e5c580..6a0a008 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,8 +3,8 @@ import ReactDOM from 'react-dom/client' import zh_CN from 'antd/locale/zh_CN' import '@/assets/css/base.scss' import '@/assets/css/common.scss' -import App from './App' import { COLOR_MAIN } from '@/constants/common.constants' +import App from './App' ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx index bc6b1b5..1809bb0 100644 --- a/src/pages/HomeFramework.tsx +++ b/src/pages/HomeFramework.tsx @@ -1,10 +1,10 @@ import React from 'react' import Icon from '@ant-design/icons' -import router from '@/router' import '@/assets/css/pages/home-framework.scss' +import { COLOR_FONT_SECONDARY } from '@/constants/common.constants' +import router from '@/router' import LoadingMask from '@/components/common/LoadingMask' import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar' -import { COLOR_FONT_SECONDARY } from '@/constants/common.constants' export const HomeFrameworkContext = createContext<{ navbarHiddenState: { diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index f59a5c9..65506a2 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -1,14 +1,13 @@ import React from 'react' -import { notification } from 'antd' import '@/assets/css/pages/login.scss' -import { getLocalTime, setToken } from '@/utils/common' -import { getUserInfo, login } from '@/utils/auth' import { PERMISSION_LOGIN_SUCCESS, PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR, PERMISSION_USER_DISABLE, PERMISSION_USERNAME_NOT_FOUND } from '@/constants/common.constants' +import { utcToLocalTime, setToken } from '@/utils/common' +import { getUserInfo, login } from '@/utils/auth' const Login: React.FC = () => { const [messageApi, contextHolder] = message.useMessage() @@ -44,7 +43,7 @@ const Login: React.FC = () => { 最近登录: {user.lastLoginTime - ? `${getLocalTime(user.lastLoginTime)}【${ + ? `${utcToLocalTime(user.lastLoginTime)}【${ user.lastLoginIp }】` : '无'} diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx index 2525e74..483e88e 100644 --- a/src/pages/SystemFramework.tsx +++ b/src/pages/SystemFramework.tsx @@ -1,6 +1,6 @@ import React from 'react' -import system from '@/router/system' import '@/assets/css/pages/system-framework.scss' +import system from '@/router/system' import FitFullScreen from '@/components/common/FitFullScreen' import Sidebar from '@/components/common/sidebar' import SidebarItemList from '@/components/common/sidebar/SidebarItemList' diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx index 72b7698..1385994 100644 --- a/src/pages/ToolsFramework.tsx +++ b/src/pages/ToolsFramework.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { tools } from '@/router/tools' import '@/assets/css/pages/tools-framework.scss' +import { tools } from '@/router/tools' import FitFullScreen from '@/components/common/FitFullScreen' import SidebarScroll, { SidebarScrollElement } from '@/components/common/sidebar/SidebarScroll' import Sidebar from '@/components/common/sidebar' diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx index 63bffc2..b88ff73 100644 --- a/src/pages/UserFramework.tsx +++ b/src/pages/UserFramework.tsx @@ -1,11 +1,11 @@ import React from 'react' -import user from '@/router/user' import '@/assets/css/pages/tools-framework.scss' +import user from '@/router/user' +import { hasPathPermission } from '@/utils/auth' import FitFullScreen from '@/components/common/FitFullScreen' import Sidebar from '@/components/common/sidebar' import SidebarItemList from '@/components/common/sidebar/SidebarItemList' import SidebarItem from '@/components/common/sidebar/SidebarItem' -import { hasPathPermission } from '@/utils/auth' import LoadingMask from '@/components/common/LoadingMask' const ToolsFramework: React.FC = () => { diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 25ca34d..fda272d 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import '@/assets/css/components/home/home.scss' -import FitFullScreen from '@/components/common/FitFullScreen' import { HomeFrameworkContext } from '@/pages/HomeFramework' +import FitFullScreen from '@/components/common/FitFullScreen' import Slogan from '@/components/home/Slogan' import OxygenToolbox from '@/components/home/OxygenToolbox' import Indicator from '@/components/common/Indicator' diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx index fa47112..3d7fcd1 100644 --- a/src/pages/system/Group.tsx +++ b/src/pages/system/Group.tsx @@ -1,9 +1,5 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import Icon from '@ant-design/icons' -import FitFullScreen from '@/components/common/FitFullScreen' -import HideScrollbar from '@/components/common/HideScrollbar' -import FlexBox from '@/components/common/FlexBox' -import Card from '@/components/common/Card' import { COLOR_ERROR_SECONDARY, COLOR_FONT_SECONDARY, @@ -14,7 +10,7 @@ import { DATABASE_SELECT_SUCCESS, DATABASE_UPDATE_SUCCESS } from '@/constants/common.constants' -import { getLocalTime } from '@/utils/common' +import { utcToLocalTime } from '@/utils/common' import { r_sys_group_add, r_sys_group_change_status, @@ -24,6 +20,10 @@ import { r_sys_group_update, r_sys_role_get_list } from '@/services/system' +import FitFullScreen from '@/components/common/FitFullScreen' +import HideScrollbar from '@/components/common/HideScrollbar' +import FlexBox from '@/components/common/FlexBox' +import Card from '@/components/common/Card' const Group: React.FC = () => { const [modal, contextHolder] = AntdModal.useModal() @@ -75,14 +75,14 @@ const Group: React.FC = () => { dataIndex: 'createTime', width: '10%', align: 'center', - render: (value: string) => getLocalTime(value) + render: (value: string) => utcToLocalTime(value) }, { title: '修改时间', dataIndex: 'updateTime', width: '10%', align: 'center', - render: (value: string) => getLocalTime(value) + render: (value: string) => utcToLocalTime(value) }, { title: '状态', diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx index 69eff9f..7230211 100644 --- a/src/pages/system/Log.tsx +++ b/src/pages/system/Log.tsx @@ -1,14 +1,15 @@ import React from 'react' -import FitFullScreen from '@/components/common/FitFullScreen' -import Card from '@/components/common/Card' -import { r_sys_log_get } from '@/services/system' +import dayjs from 'dayjs' import { COLOR_ERROR_SECONDARY, COLOR_FONT_SECONDARY, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants' +import { dayjsToUtc, utcToLocalTime } from '@/utils/common' +import { r_sys_log_get } from '@/services/system' +import FitFullScreen from '@/components/common/FitFullScreen' +import Card from '@/components/common/Card' import HideScrollbar from '@/components/common/HideScrollbar' -import { getLocalTime } from '@/utils/common' import FlexBox from '@/components/common/FlexBox' const Log: React.FC = () => { @@ -87,7 +88,7 @@ const Log: React.FC = () => { { title: '开始时间', dataIndex: 'startTime', - render: (value: string) => getLocalTime(value), + render: (value: string) => utcToLocalTime(value), align: 'center', sorter: true }, @@ -96,7 +97,9 @@ const Log: React.FC = () => { dataIndex: 'executeTime', render: (value, record) => ( {`${value}ms`} @@ -188,12 +191,9 @@ const Log: React.FC = () => { } } - const handleOnDateRangeChange = (_dates: unknown, dateStrings: [string, string]) => { - if (dateStrings[0] && dateStrings[1]) { - setTimeRange([ - new Date(dateStrings[0]).toISOString(), - new Date(dateStrings[1]).toISOString() - ]) + const handleOnDateRangeChange = (dates: [dayjs.Dayjs | null, dayjs.Dayjs | null] | null) => { + if (dates && dates[0] && dates[1]) { + setTimeRange([dayjsToUtc(dates[0]), dayjsToUtc(dates[1])]) } else { setTimeRange(undefined) } diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx index 81fd501..f0ea4ce 100644 --- a/src/pages/system/Role.tsx +++ b/src/pages/system/Role.tsx @@ -1,17 +1,5 @@ -import React, { useEffect, useState } from 'react' -import FitFullScreen from '@/components/common/FitFullScreen' -import HideScrollbar from '@/components/common/HideScrollbar' -import FlexBox from '@/components/common/FlexBox' -import Card from '@/components/common/Card' -import { - r_sys_role_add, - r_sys_role_change_status, - r_sys_power_get_list, - r_sys_role_get, - r_sys_role_update, - r_sys_role_delete, - r_sys_role_delete_list -} from '@/services/system' +import React from 'react' +import Icon from '@ant-design/icons' import { COLOR_ERROR_SECONDARY, COLOR_FONT_SECONDARY, @@ -22,8 +10,20 @@ import { DATABASE_SELECT_SUCCESS, DATABASE_UPDATE_SUCCESS } from '@/constants/common.constants' -import Icon from '@ant-design/icons' -import { getLocalTime, powerListToPowerTree } from '@/utils/common' +import { utcToLocalTime, powerListToPowerTree } from '@/utils/common' +import { + r_sys_role_add, + r_sys_role_change_status, + r_sys_power_get_list, + r_sys_role_get, + r_sys_role_update, + r_sys_role_delete, + r_sys_role_delete_list +} from '@/services/system' +import FitFullScreen from '@/components/common/FitFullScreen' +import HideScrollbar from '@/components/common/HideScrollbar' +import FlexBox from '@/components/common/FlexBox' +import Card from '@/components/common/Card' const Role: React.FC = () => { const [modal, contextHolder] = AntdModal.useModal() @@ -67,14 +67,14 @@ const Role: React.FC = () => { dataIndex: 'createTime', width: '10%', align: 'center', - render: (value: string) => getLocalTime(value) + render: (value: string) => utcToLocalTime(value) }, { title: '修改时间', dataIndex: 'updateTime', width: '10%', align: 'center', - render: (value: string) => getLocalTime(value) + render: (value: string) => utcToLocalTime(value) }, { title: '状态', diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx index 4ff7b6b..e1c85b1 100644 --- a/src/pages/system/User.tsx +++ b/src/pages/system/User.tsx @@ -1,4 +1,6 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' +import Icon from '@ant-design/icons' +import dayjs from 'dayjs' import { COLOR_BACKGROUND, COLOR_ERROR_SECONDARY, @@ -10,12 +12,7 @@ import { DATABASE_SELECT_SUCCESS, DATABASE_UPDATE_SUCCESS } from '@/constants/common.constants' -import { ColumnsType } from 'antd/es/table/interface' -import FitFullScreen from '@/components/common/FitFullScreen.tsx' -import HideScrollbar from '@/components/common/HideScrollbar.tsx' -import FlexBox from '@/components/common/FlexBox.tsx' -import Card from '@/components/common/Card.tsx' -import Icon from '@ant-design/icons' +import { utcToLocalTime, isPastTime, localTimeToUtc, dayjsToUtc } from '@/utils/common' import { r_sys_group_get_list, r_sys_role_get_list, @@ -24,10 +21,12 @@ import { r_sys_user_delete_list, r_sys_user_get, r_sys_user_update -} from '@/services/system.tsx' -import { getLocalTime, isPastTime } from '@/utils/common.tsx' -import { r_api_avatar_random_base64 } from '@/services/api/avatar.ts' -import moment from 'moment' +} from '@/services/system' +import { r_api_avatar_random_base64 } from '@/services/api/avatar' +import FitFullScreen from '@/components/common/FitFullScreen' +import HideScrollbar from '@/components/common/HideScrollbar' +import FlexBox from '@/components/common/FlexBox' +import Card from '@/components/common/Card' const User: React.FC = () => { const [modal, contextHolder] = AntdModal.useModal() @@ -57,7 +56,7 @@ const User: React.FC = () => { const [tableSelectedItem, setTableSelectedItem] = useState([]) const [avatar, setAvatar] = useState('') - const dataColumns: ColumnsType = [ + const dataColumns: _ColumnsType = [ { dataIndex: 'username', title: '用户', @@ -122,7 +121,7 @@ const User: React.FC = () => { title: '最近登录', render: (_, record) => record.currentLoginTime - ? `${getLocalTime(record.currentLoginTime)}【${record.currentLoginIp}】` + ? `${utcToLocalTime(record.currentLoginTime)}【${record.currentLoginIp}】` : '无', align: 'center' }, @@ -334,10 +333,10 @@ const User: React.FC = () => { void r_sys_user_update({ ...formValues, expiration: formValues.expiration - ? new Date(formValues.expiration).toISOString() + ? localTimeToUtc(formValues.expiration) : undefined, credentialsExpiration: formValues.credentialsExpiration - ? new Date(formValues.credentialsExpiration).toISOString() + ? localTimeToUtc(formValues.credentialsExpiration) : undefined }) .then((res) => { @@ -362,10 +361,10 @@ const User: React.FC = () => { void r_sys_user_add({ ...formValues, expiration: formValues.expiration - ? new Date(formValues.expiration).toISOString() + ? localTimeToUtc(formValues.expiration) : undefined, credentialsExpiration: formValues.credentialsExpiration - ? new Date(formValues.credentialsExpiration).toISOString() + ? localTimeToUtc(formValues.credentialsExpiration) : undefined }) .then((res) => { @@ -649,9 +648,9 @@ const User: React.FC = () => { (date ? { value: moment.utc(date) } : {})} - getValueFromEvent={(_, dateString: string) => - dateString ? moment(dateString).format('yyyy-MM-DD HH:mm:ss') : undefined + getValueProps={(date: string) => (date ? { value: dayjs(date) } : {})} + getValueFromEvent={(date: dayjs.Dayjs | null) => + date ? dayjsToUtc(date) : undefined } > @@ -659,9 +658,9 @@ const User: React.FC = () => { (date ? { value: moment.utc(date) } : {})} - getValueFromEvent={(_, dateString: string) => - dateString ? moment(dateString).format('yyyy-MM-DD HH:mm:ss') : undefined + getValueProps={(date: string) => (date ? { value: dayjs(date) } : {})} + getValueFromEvent={(date: dayjs.Dayjs | null) => + date ? dayjsToUtc(date) : undefined } > diff --git a/src/router/index.tsx b/src/router/index.tsx index eab5e64..bd2f52b 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -1,8 +1,8 @@ import React from 'react' -import tools from '@/router/tools' +import system from '@/router/system' import home from '@/router/home' import user from '@/router/user' -import system from '@/router/system' +import tools from '@/router/tools' const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => { return jsonObject.map((value) => ({ diff --git a/src/services/api/avatar.ts b/src/services/api/avatar.ts index 04e663f..e9a23d5 100644 --- a/src/services/api/avatar.ts +++ b/src/services/api/avatar.ts @@ -1,5 +1,5 @@ -import request from '@/services' import { URL_API_V1_AVATAR_RANDOM_BASE64 } from '@/constants/urls.constants' +import request from '@/services' export const r_api_avatar_random_base64 = () => request.get(URL_API_V1_AVATAR_RANDOM_BASE64) diff --git a/src/services/auth.tsx b/src/services/auth.tsx index daf3658..16a3f48 100644 --- a/src/services/auth.tsx +++ b/src/services/auth.tsx @@ -1,5 +1,5 @@ -import request from '@/services' import { URL_LOGIN, URL_LOGOUT } from '@/constants/urls.constants' +import request from '@/services' export const r_auth_login = (username: string, password: string) => request.post(URL_LOGIN, { diff --git a/src/services/index.tsx b/src/services/index.tsx index 2bd40df..ab8ca04 100644 --- a/src/services/index.tsx +++ b/src/services/index.tsx @@ -1,7 +1,5 @@ import axios, { type AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios' import { jwtDecode, JwtPayload } from 'jwt-decode' -import { message } from 'antd' -import { getToken, removeToken, setToken } from '@/utils/common' import { PERMISSION_ACCESS_DENIED, PERMISSION_TOKEN_HAS_EXPIRED, @@ -9,6 +7,7 @@ import { PERMISSION_TOKEN_RENEW_SUCCESS, PERMISSION_UNAUTHORIZED } from '@/constants/common.constants' +import { getToken, removeToken, setToken } from '@/utils/common' const service: AxiosInstance = axios.create({ baseURL: import.meta.env.VITE_API_URL, diff --git a/src/services/system.tsx b/src/services/system.tsx index decb818..90f1b5b 100644 --- a/src/services/system.tsx +++ b/src/services/system.tsx @@ -1,5 +1,4 @@ import React from 'react' -import request from '@/services/index' import { URL_SYS_USER_INFO, URL_SYS_USER, @@ -10,6 +9,7 @@ import { URL_SYS_GROUP_LIST, URL_SYS_LOG } from '@/constants/urls.constants' +import request from '@/services/index' export const r_sys_user_info = () => request.get(URL_SYS_USER_INFO) diff --git a/src/utils/auth.ts b/src/utils/auth.ts index 54761f9..d85501f 100644 --- a/src/utils/auth.ts +++ b/src/utils/auth.ts @@ -1,11 +1,11 @@ -import { getCaptcha, getLocalStorage, removeToken, setLocalStorage } from './common' -import { r_auth_login, r_auth_logout } from '@/services/auth' -import { r_sys_user_info } from '@/services/system' import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants' +import { getCaptcha, getLocalStorage, removeToken, setLocalStorage } from './common' +import { r_sys_user_info } from '@/services/system' +import { r_auth_login, r_auth_logout } from '@/services/auth' let captcha: Captcha diff --git a/src/utils/common.tsx b/src/utils/common.tsx index e41a84a..2136aa5 100644 --- a/src/utils/common.tsx +++ b/src/utils/common.tsx @@ -1,5 +1,6 @@ -import moment from 'moment' import ReactDOM from 'react-dom/client' +import moment from 'moment' +import dayjs from 'dayjs' import _ from 'lodash' import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants' import LoadingMask from '@/components/common/LoadingMask' @@ -144,10 +145,22 @@ export const getRedirectUrl = (path: string, redirectUrl: string): string => { return `${path}?redirect=${encodeURIComponent(redirectUrl)}` } -export const getLocalTime = (utcTime: string, format: string = 'yyyy-MM-DD HH:mm:ssZ') => { +export const utcToLocalTime = (utcTime: string, format: string = 'yyyy-MM-DD HH:mm:ssZ') => { return moment.utc(utcTime).local().format(format) } +export const dayjsToLocalTime = (date: dayjs.Dayjs, format: string = 'YYYY-MM-DD HH:mm:ssZ') => { + return date.format(format) +} + +export const dayjsToUtc = (date: dayjs.Dayjs) => { + return date.toISOString() +} + +export const localTimeToUtc = (localTime: string) => { + return moment(localTime).toISOString() +} + export const isPastTime = (utcTime: string) => { return moment.utc(utcTime).isBefore(moment.now()) } diff --git a/vite.config.ts b/vite.config.ts index a4acaba..f95c0f6 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -29,7 +29,7 @@ export default defineConfig({ react: ['Suspense', 'createContext'], 'react-router': ['useMatches', 'RouterProvider'], 'react-router-dom': ['createBrowserRouter'], - antd: ['message'] + antd: ['message', 'notification'] }, { from: 'react-router',