{isCreating ? (
diff --git a/src/components/Playground/CodeEditor/FileSelector/index.module.less b/src/components/Playground/CodeEditor/FileSelector/index.module.less
deleted file mode 100644
index 41af930..0000000
--- a/src/components/Playground/CodeEditor/FileSelector/index.module.less
+++ /dev/null
@@ -1,37 +0,0 @@
-.root{
- display: flex;
- flex: 0 0 auto;
- height: 40px;
-
- .multiple {
- flex: 1;
- width: 0;
-
- .tabContent {
- height: 40px;
- align-items: flex-end;
- gap: 2px;
- margin-left: 10px;
-
- .tabItemAdd {
- padding: 0 12px;
- }
-
- .tabsMarginRight {
- height: 100%;
-
- > * {
- height: 100%;
- width: 10px;
- }
- }
- }
- }
-
- .sticky {
- display: flex;
- flex: 0 0 auto;
- align-items: flex-end;
- margin-right: 10px;
- }
-}
diff --git a/src/components/Playground/CodeEditor/FileSelector/index.style.ts b/src/components/Playground/CodeEditor/FileSelector/index.style.ts
new file mode 100644
index 0000000..d19ffb5
--- /dev/null
+++ b/src/components/Playground/CodeEditor/FileSelector/index.style.ts
@@ -0,0 +1,41 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+ root: {
+ display: 'flex',
+ flex: '0 0 auto',
+ height: 40
+ },
+
+ multiple: {
+ flex: 1,
+ width: 0
+ },
+
+ tabContent: {
+ height: 40,
+ alignItems: 'flex-end',
+ gap: 2,
+ marginLeft: 10
+ },
+
+ tabItemAdd: {
+ padding: '0 12px'
+ },
+
+ tabsMarginRight: {
+ height: '100%',
+
+ '> *': {
+ height: '100%',
+ width: 10
+ }
+ },
+
+ sticky: {
+ display: 'flex',
+ flex: '0 0 auto',
+ alignItems: 'flex-end',
+ marginRight: 10
+ }
+}))
diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
index b720c2f..661ad06 100644
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -1,4 +1,4 @@
-import styles from '@/components/Playground/CodeEditor/FileSelector/index.module.less'
+import useStyles from '@/components/Playground/CodeEditor/FileSelector/index.style'
import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
import { IFiles } from '@/components/Playground/shared'
@@ -32,6 +32,7 @@ const FileSelector = ({
onUpdateFileName,
selectedFileName = ''
}: FileSelectorProps) => {
+ const { styles } = useStyles()
const hideScrollbarRef = useRef(null)
const [tabs, setTabs] = useState([])
const [isCreating, setIsCreating] = useState(false)
diff --git a/src/components/Playground/CodeEditor/FileSelector/item.module.less b/src/components/Playground/CodeEditor/FileSelector/item.module.less
deleted file mode 100644
index 959921a..0000000
--- a/src/components/Playground/CodeEditor/FileSelector/item.module.less
+++ /dev/null
@@ -1,47 +0,0 @@
-.root {
- display: flex;
- align-items: center;
- justify-content: center;
- flex: 0 0 auto;
- height: 30px;
- padding: 0 20px;
- border: 1px solid #f0f0f0;
- background-color: rgba(0, 0, 0, 0.04);
- border-radius: 6px 6px 0 0;
- cursor: pointer;
-
- .tabItemInput {
- position: relative;
- min-width: 40px;
- transform: translateY(1px);
-
- .tabItemInputMask {
- display: inline-block;
- color: transparent;
- }
- input {
- position: absolute;
- background-color: transparent;
- width: 100%;
- font-size: 1em;
- }
- }
-
- .tabItemClose {
- transform: translateX(10px);
-
- :hover {
- fill: #888;
- }
-
- svg {
- height: 8px;
- fill: #666;
- }
- }
-
- &.active {
- background-color: white;
- border-bottom: none;
- }
-}
diff --git a/src/components/Playground/CodeEditor/FileSelector/item.style.ts b/src/components/Playground/CodeEditor/FileSelector/item.style.ts
new file mode 100644
index 0000000..bb36fe1
--- /dev/null
+++ b/src/components/Playground/CodeEditor/FileSelector/item.style.ts
@@ -0,0 +1,54 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+ root: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flex: '0 0 auto',
+ height: 30,
+ padding: '0 20px',
+ color: token.colorText,
+ border: `1px solid ${token.colorBorder}`,
+ backgroundColor: token.colorBgLayout,
+ borderRadius: '6px 6px 0 0',
+ cursor: 'pointer'
+ },
+
+ active: {
+ backgroundColor: token.colorBgElevated,
+ borderBottom: 'none'
+ },
+
+ tabItemInput: {
+ position: 'relative',
+ minWidth: 40,
+ transform: 'translateY(1px)',
+
+ input: {
+ position: 'absolute',
+ backgroundColor: 'transparent',
+ width: '100%',
+ color: token.colorText,
+ fontSize: token.fontSizeSM
+ }
+ },
+
+ tabItemInputMask: {
+ display: 'inline-block',
+ color: 'transparent'
+ },
+
+ tabItemClose: {
+ transform: 'translateX(10px)',
+
+ svg: {
+ height: token.sizeXS,
+ fill: token.colorTextSecondary
+ },
+
+ '>:hover': {
+ fill: token.colorTextDescription
+ }
+ }
+}))
diff --git a/src/components/Playground/CodeEditor/index.module.less b/src/components/Playground/CodeEditor/index.module.less
deleted file mode 100644
index a31c350..0000000
--- a/src/components/Playground/CodeEditor/index.module.less
+++ /dev/null
@@ -1,15 +0,0 @@
-.root {
- position: relative;
- width: 100%;
- height: 100%;
-
- .errorMessage {
- position: absolute;
- bottom: 0;
- width: 100%;
- color: white;
- background-color: #FF4D4FAA;
- padding: 5px 10px;
- font-size: 1.2em;
- }
-}
diff --git a/src/components/Playground/CodeEditor/index.style.ts b/src/components/Playground/CodeEditor/index.style.ts
new file mode 100644
index 0000000..8b61578
--- /dev/null
+++ b/src/components/Playground/CodeEditor/index.style.ts
@@ -0,0 +1,19 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+ root: {
+ position: 'relative',
+ width: '100%',
+ height: '100%'
+ },
+
+ errorMessage: {
+ position: 'absolute',
+ bottom: 0,
+ width: '100%',
+ color: token.colorErrorText,
+ backgroundColor: token.colorErrorBg,
+ padding: '5px 10px',
+ fontSize: token.fontSize
+ }
+}))
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index c7d24bb..c06a6ef 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -1,7 +1,7 @@
import _ from 'lodash'
-import styles from '@/components/Playground/CodeEditor/index.module.less'
+import useStyles from '@/components/Playground/CodeEditor/index.style'
import FlexBox from '@/components/common/FlexBox'
-import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
+import { IEditorOptions, IFiles, ITsconfig } from '@/components/Playground/shared'
import {
fileNameToLanguage,
getFileNameList,
@@ -12,7 +12,7 @@ import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
import Editor, { ExtraLib } from '@/components/Playground/CodeEditor/Editor'
interface CodeEditorProps {
- theme?: ITheme
+ isDarkMode?: boolean
showFileSelector?: boolean
tsconfig?: ITsconfig
files: IFiles
@@ -31,7 +31,7 @@ interface CodeEditorProps {
}
const CodeEditor = ({
- theme,
+ isDarkMode,
showFileSelector = true,
tsconfig,
files,
@@ -48,6 +48,7 @@ const CodeEditor = ({
extraLibs,
...props
}: CodeEditorProps) => {
+ const { styles } = useStyles()
const filteredFilesName = getFileNameList(files).filter(
(item) => ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) && !files[item].hidden
)
@@ -139,8 +140,8 @@ const CodeEditor = ({
/>
)}
{
const iframeUrl = getIframeUrl(iframeRaw)
const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => {
+ const { styles, theme, cx } = useStyles()
const iframeRef = useRef(null)
const [isLoaded, setIsLoaded] = useState(false)
const [selectedDevice, setSelectedDevice] = useState('Pixel 7')
@@ -164,7 +164,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
iframeRef.current?.contentWindow?.postMessage(
{
type: 'SCALE',
- data: { zoom: zoom }
+ data: { zoom }
} as IMessage,
'*'
)
@@ -180,12 +180,18 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
autoHideWaitingTime={1000}
>
-
+
value.name === selectedDevice)
@@ -210,14 +216,17 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
/>
-
{isRotate ? (
-
- (initImportMapRaw)
@@ -79,6 +82,7 @@ const Playground = ({
return (
, HTMLDivElement>
const Card = forwardRef(({ className, ...props }, ref) => {
- return (
-
- )
+ const { styles, cx } = useStyles()
+
+ return
})
export default Card
diff --git a/src/components/common/FitCenter.tsx b/src/components/common/FitCenter.tsx
index b1b4a04..c40125b 100644
--- a/src/components/common/FitCenter.tsx
+++ b/src/components/common/FitCenter.tsx
@@ -1,16 +1,20 @@
import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import styles from '@/assets/css/components/common/fit-center.module.less'
+import useStyles from '@/assets/css/components/common/fit-center.style'
interface FitCenterProps extends DetailedHTMLProps, HTMLDivElement> {
vertical?: boolean
}
const FitCenter = ({ className, vertical, ...props }: FitCenterProps) => {
+ const { styles, cx } = useStyles()
+
return (
)
diff --git a/src/components/common/FitFullscreen.tsx b/src/components/common/FitFullscreen.tsx
index f2af783..12dbbef 100644
--- a/src/components/common/FitFullscreen.tsx
+++ b/src/components/common/FitFullscreen.tsx
@@ -1,5 +1,5 @@
import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import styles from '@/assets/css/components/common/fit-fullscreen.module.less'
+import useStyles from '@/assets/css/components/common/fit-fullscreen.style'
interface FitFullscreenProps
extends DetailedHTMLProps, HTMLDivElement> {
@@ -9,9 +9,11 @@ interface FitFullscreenProps
const FitFullscreen = forwardRef(
({ zIndex, backgroundColor, className, style, ...props }, ref) => {
+ const { styles, cx } = useStyles()
+
return (
, HTMLDivElement> {
direction?: 'horizontal' | 'vertical'
@@ -8,11 +8,15 @@ interface FlexBoxProps extends DetailedHTMLProps,
const FlexBox = forwardRef(
({ className, direction, gap, style, ...props }, ref) => {
+ const { styles, cx } = useStyles()
+
return (
{
+ const { styles, theme } = useStyles()
+
const loadingIcon = (
<>
, HTMLDivElement> {
@@ -82,6 +82,8 @@ const HideScrollbar = forwardRef(
},
ref
) => {
+ const { styles, cx } = useStyles()
+
useImperativeHandle(ref, () => {
return {
scrollTo(x, y, smooth?: boolean) {
@@ -538,7 +540,7 @@ const HideScrollbar = forwardRef(
>
(
{isShowVerticalScrollbar &&
(!isHiddenVerticalScrollbarWhenFull || verticalScrollbarLength < 100) && (
(
padding: `${scrollbarAsidePadding}px ${scrollbarEdgePadding}px`
}}
>
-
+
(
(!isHiddenHorizontalScrollbarWhenFull ||
horizontalScrollbarLength < 100) && (
(
padding: `${scrollbarEdgePadding}px ${scrollbarAsidePadding}px`
}}
>
-
+
void
-}
-
-const Indicator = ({ total, current, onSwitch }: IndicatorProps) => {
- const handleClick = (index: number) => {
- return () => {
- onSwitch?.(index)
- }
- }
-
- return (
- <>
-
-
- {_.range(0, total).map((_value, index) => {
- return (
-
- - - - ) - })} -
@@ -74,17 +76,29 @@ const Footer = () => {
登录
-
+
{nickname}
-
+
{
+ const { styles, cx } = useStyles()
+ const { isCollapse } = useContext(SidebarContext)
+ const { isInSubmenu } = useContext(SubmenuContext)
+ const [isHover, setIsHover] = useState(false)
const [submenuTop, setSubmenuTop] = useState(Number.MAX_VALUE)
const [submenuLeft, setSubmenuLeft] = useState(Number.MAX_VALUE)
@@ -34,34 +41,52 @@ const Item = (props: ItemProps) => {
}
return (
-
-
-
- isPending ? 'pending' : isActive ? `${styles.active}` : ''
- }
- >
- {props.icon && (
-
+ {props.children}
+
+ )}
+
+
)
}
diff --git a/src/components/common/Sidebar/Scroll.tsx b/src/components/common/Sidebar/Scroll.tsx
index fbf40a0..6b7581f 100644
--- a/src/components/common/Sidebar/Scroll.tsx
+++ b/src/components/common/Sidebar/Scroll.tsx
@@ -1,8 +1,10 @@
import { PropsWithChildren } from 'react'
-import styles from '@/assets/css/components/common/sidebar.module.less'
+import useStyles from '@/assets/css/components/common/sidebar/scroll.style'
import HideScrollbar from '@/components/common/HideScrollbar'
const Scroll = (props: PropsWithChildren) => {
+ const { styles } = useStyles()
+
return (
, HTMLDivElement>) => {
- return
+ const { styles, cx } = useStyles()
+
+ return
}
export default Separate
diff --git a/src/components/common/Sidebar/Submenu.tsx b/src/components/common/Sidebar/Submenu.tsx
index d93ca2b..c2e7bb1 100644
--- a/src/components/common/Sidebar/Submenu.tsx
+++ b/src/components/common/Sidebar/Submenu.tsx
@@ -1,5 +1,8 @@
import { PropsWithChildren } from 'react'
-import styles from '@/assets/css/components/common/sidebar.module.less'
+import useStyles from '@/assets/css/components/common/sidebar/submenu.style'
+import { ItemContext } from '@/components/common/Sidebar/Item'
+
+export const SubmenuContext = createContext({ isInSubmenu: false })
interface SidebarSubmenuProps extends PropsWithChildren {
submenuTop: number
@@ -7,16 +10,21 @@ interface SidebarSubmenuProps extends PropsWithChildren {
}
const Submenu = (props: SidebarSubmenuProps) => {
+ const { styles, cx } = useStyles()
+ const { isHover } = useContext(ItemContext)
+
return (
-
+
)
}
diff --git a/src/components/common/Sidebar/index.tsx b/src/components/common/Sidebar/index.tsx
index 398f95b..d0a2d76 100644
--- a/src/components/common/Sidebar/index.tsx
+++ b/src/components/common/Sidebar/index.tsx
@@ -1,6 +1,6 @@
import { PropsWithChildren, ReactNode } from 'react'
import Icon from '@ant-design/icons'
-import styles from '@/assets/css/components/common/sidebar.module.less'
+import useStyles from '@/assets/css/components/common/sidebar/index.style'
import { getLocalStorage, setLocalStorage } from '@/util/browser'
import Item from '@/components/common/Sidebar/Item'
import ItemList from '@/components/common/Sidebar/ItemList'
@@ -9,6 +9,8 @@ import Separate from '@/components/common/Sidebar/Separate'
import Submenu from '@/components/common/Sidebar/Submenu'
import Footer from '@/components/common/Sidebar/Footer'
+export const SidebarContext = createContext({ isCollapse: false })
+
interface SidebarProps extends PropsWithChildren {
title: string
width?: string
@@ -17,35 +19,38 @@ interface SidebarProps extends PropsWithChildren {
}
const Sidebar = (props: SidebarProps) => {
- const [isHideSidebar, setIsHideSidebar] = useState(getLocalStorage('HIDE_SIDEBAR') === 'true')
+ const { styles, cx } = useStyles()
+ const [isCollapseSidebar, setIsCollapseSidebar] = useState(
+ getLocalStorage('COLLAPSE_SIDEBAR') === 'true'
+ )
const switchSidebar = () => {
- setLocalStorage('HIDE_SIDEBAR', !isHideSidebar ? 'true' : 'false')
- setIsHideSidebar(!isHideSidebar)
- props.onSidebarSwitch?.(isHideSidebar)
+ setLocalStorage('COLLAPSE_SIDEBAR', !isCollapseSidebar ? 'true' : 'false')
+ setIsCollapseSidebar(!isCollapseSidebar)
+ props.onSidebarSwitch?.(isCollapseSidebar)
}
return (
- <>
+
(null)
@@ -39,13 +40,12 @@ const UrlCard = ({
return (
-
+
- {typeof props.icon === 'string' ? (
- 
- ) : (
-
+ setIsHover(true)}
+ onMouseLeave={() => setIsHover(false)}
+ >
+
- {props.children}
-
- )}
-
+
+
+ {props.children && (
+
+
+ isPending ? 'pending' : isActive ? `${styles.active}` : ''
+ }
+ >
+ {props.icon && (
+
-
- {props.children && (
-
+ {typeof props.icon === 'string' ? (
+
+ ) : (
+
+ )}
+
+ {props.text}
+
+
+ {props.extend}
- )}
- {props.text}
- {props.extend}
- -
-
{props.children}
- -
+
{props.children}
+
-
+
{props.children}
-
+
-
+
)
}
diff --git a/src/components/common/UrlCard.tsx b/src/components/common/UrlCard.tsx
index 7025a50..470d260 100644
--- a/src/components/common/UrlCard.tsx
+++ b/src/components/common/UrlCard.tsx
@@ -1,7 +1,7 @@
import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
import Icon from '@ant-design/icons'
import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
-import styles from '@/assets/css/components/common/url-card.module.less'
+import useStyles from '@/assets/css/components/common/url-card.style'
import Card from '@/components/common/Card'
import FlexBox from '@/components/common/FlexBox'
@@ -26,6 +26,7 @@ const UrlCard = ({
children,
...props
}: UrlCardProps) => {
+ const { styles } = useStyles()
const navigate = useNavigate()
const cardRef = useRef
{props.bottomFixed}
{children}
{description}
diff --git a/src/components/dnd/DragHandle.tsx b/src/components/dnd/DragHandle.tsx
index c8fb54e..846c398 100644
--- a/src/components/dnd/DragHandle.tsx
+++ b/src/components/dnd/DragHandle.tsx
@@ -1,12 +1,13 @@
import { HandleContextInst } from '@/components/dnd/HandleContext'
import Icon from '@ant-design/icons'
-import styles from '@/assets/css/components/dnd/drag-handle.module.less'
+import useStyles from '@/assets/css/components/dnd/drag-handle.style'
interface DragHandleProps {
padding?: string | number
}
const DragHandle = ({ padding }: DragHandleProps) => {
+ const { styles } = useStyles()
const { attributes, listeners, ref } = useContext(HandleContextInst)
return (
diff --git a/src/components/dnd/DropMask.tsx b/src/components/dnd/DropMask.tsx
index b2d0528..031244d 100644
--- a/src/components/dnd/DropMask.tsx
+++ b/src/components/dnd/DropMask.tsx
@@ -1,7 +1,9 @@
import Icon from '@ant-design/icons'
-import styles from '@/assets/css/components/dnd/drop-mask.module.less'
+import useStyles from '@/assets/css/components/dnd/drop-mask.style'
const DropMask = () => {
+ const { styles } = useStyles()
+
return (
diff --git a/src/components/dnd/Sortable.tsx b/src/components/dnd/Sortable.tsx
index 81cd0b7..4eb2e64 100644
--- a/src/components/dnd/Sortable.tsx
+++ b/src/components/dnd/Sortable.tsx
@@ -1,5 +1,6 @@
import { CSSProperties, PropsWithChildren } from 'react'
import { useSortable } from '@dnd-kit/sortable'
+import useStyles from '@/assets/css/components/dnd/sortable.style'
import { HandleContext, HandleContextInst } from '@/components/dnd/HandleContext'
interface SortableProps extends PropsWithChildren {
@@ -9,6 +10,7 @@ interface SortableProps extends PropsWithChildren {
}
const Sortable = ({ id, data, isDelete, children }: SortableProps) => {
+ const { styles } = useStyles()
const {
attributes,
isDragging,
@@ -43,7 +45,7 @@ const Sortable = ({ id, data, isDelete, children }: SortableProps) => {
-
+
+
-
+
+
(null)
useEffect(() => {
@@ -23,13 +24,8 @@ const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
}, [])
return (
-
-
+
+
(null)
useEffect(() => {
@@ -57,13 +61,8 @@ const RepositoryCard = ({
id={`!:${toolId}:${ver}:${platform}`}
data={{ icon, toolName, toolId, authorUsername: '!', ver, platform }}
>
-
-
+
+
{children}
diff --git a/src/components/system/SettingCard.tsx b/src/components/system/SettingCard.tsx
index e05bac5..f886cd9 100644
--- a/src/components/system/SettingCard.tsx
+++ b/src/components/system/SettingCard.tsx
@@ -1,6 +1,6 @@
import { PropsWithChildren, ReactNode } from 'react'
import Icon from '@ant-design/icons'
-import styles from '@/assets/css/components/system/setting-card.module.less'
+import useStyles from '@/assets/css/components/system/setting-card.style'
import Card from '@/components/common/Card'
import FlexBox from '@/components/common/FlexBox'
import Permission from '@/components/common/Permission'
@@ -16,9 +16,11 @@ interface SettingsCardProps extends PropsWithChildren {
onSave?: () => void
}
export const SettingsCard = (props: SettingsCardProps) => {
+ const { styles } = useStyles()
+
return (
- {props.title}
diff --git a/src/components/system/StatisticsCard.tsx b/src/components/system/StatisticsCard.tsx
index a36e6aa..d738e34 100644
--- a/src/components/system/StatisticsCard.tsx
+++ b/src/components/system/StatisticsCard.tsx
@@ -1,6 +1,6 @@
import { PropsWithChildren, ReactNode } from 'react'
import Icon from '@ant-design/icons'
-import styles from '@/assets/css/components/system/statistics-card.module.less'
+import useStyles from '@/assets/css/components/system/statistics-card.style'
import Card from '@/components/common/Card'
import FlexBox from '@/components/common/FlexBox'
import LoadingMask from '@/components/common/LoadingMask'
@@ -13,9 +13,11 @@ interface StatisticsCardProps extends PropsWithChildren {
}
export const StatisticsCard = (props: StatisticsCardProps) => {
+ const { styles } = useStyles()
+
return (
- {props.title}
diff --git a/src/components/tools/LoadMoreCard.tsx b/src/components/tools/LoadMoreCard.tsx
index 7183760..743e609 100644
--- a/src/components/tools/LoadMoreCard.tsx
+++ b/src/components/tools/LoadMoreCard.tsx
@@ -1,6 +1,6 @@
import VanillaTilt from 'vanilla-tilt'
import Icon from '@ant-design/icons'
-import styles from '@/assets/css/components/tools/load-more-card.module.less'
+import useStyles from '@/assets/css/components/tools/load-more-card.style'
import FlexBox from '@/components/common/FlexBox'
import Card from '@/components/common/Card'
@@ -9,6 +9,7 @@ interface LoadMoreCardProps {
}
const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
+ const { styles } = useStyles()
const cardRef = useRef
{children}
-
{toolName}
+
+ {toolName}
+
{`ID: ${toolId}`}
+
+ {toolDesc && omitTextByByte(toolDesc, 64)}
+
{onOpen && (
diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx
index c643f08..04f0f6b 100644
--- a/src/components/tools/StoreCard.tsx
+++ b/src/components/tools/StoreCard.tsx
@@ -2,9 +2,8 @@ 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 styles from '@/assets/css/components/tools/store-card.module.less'
-import { COLOR_BACKGROUND, COLOR_MAIN, COLOR_PRODUCTION } from '@/constants/common.constants'
-import { checkDesktop, omitText } from '@/util/common'
+import useStyles from '@/assets/css/components/tools/store-card.style'
+import { checkDesktop, omitTextByByte } from '@/util/common'
import { getLoginStatus, getUserId } from '@/util/auth'
import {
getAndroidUrl,
@@ -35,7 +34,6 @@ interface StoreCardProps extends DetailedHTMLProps {
+ const { styles, theme } = useStyles()
const navigate = useNavigate()
const [modal, contextHolder] = AntdModal.useModal()
const cardRef = useRef(null)
@@ -77,7 +76,7 @@ const StoreCard = ({
if (platform === 'ANDROID') {
void modal.confirm({
centered: true,
- icon:
@@ -115,8 +114,8 @@ const StoreCard = ({
if (favorite_) {
void r_tool_remove_favorite({
authorId: author.id,
- toolId: toolId,
- platform: platform
+ toolId,
+ platform
}).then((res) => {
const response = res.data
if (response.success) {
@@ -128,8 +127,8 @@ const StoreCard = ({
} else {
void r_tool_add_favorite({
authorId: author.id,
- toolId: toolId,
- platform: platform
+ toolId,
+ platform
}).then((res) => {
const response = res.data
if (response.success) {
@@ -145,7 +144,7 @@ const StoreCard = ({
e.stopPropagation()
void modal.confirm({
centered: true,
- icon:
@@ -200,17 +199,16 @@ const StoreCard = ({
toolId,
authorUsername: author.username,
ver: '',
- platform: platform
+ platform
}}
>
-
+
@@ -255,7 +253,7 @@ const StoreCard = ({
favorite_ ? IconOxygenStarFilled : IconOxygenStar
}
style={{
- color: favorite_ ? COLOR_PRODUCTION : undefined
+ color: favorite_ ? theme.colorPrimary : undefined
}}
onClick={handleOnStarBtnClick}
/>
@@ -268,13 +266,14 @@ const StoreCard = ({
-
-
+
)
diff --git a/src/pages/Sign/Forget.tsx b/src/pages/Sign/Forget.tsx
index b5aac79..6db1891 100644
--- a/src/pages/Sign/Forget.tsx
+++ b/src/pages/Sign/Forget.tsx
@@ -1,6 +1,6 @@
import Icon from '@ant-design/icons'
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
-import styles from '@/assets/css/pages/sign/forget.module.less'
+import useStyles from '@/assets/css/pages/sign/forget.style'
import {
H_CAPTCHA_SITE_KEY,
PERMISSION_FORGET_SUCCESS,
@@ -11,10 +11,13 @@ import {
} from '@/constants/common.constants'
import { navigateToLogin } from '@/util/navigation'
import { r_auth_forget, r_auth_retrieve } from '@/services/auth'
+import { AppContext } from '@/App'
import FitCenter from '@/components/common/FitCenter'
import FlexBox from '@/components/common/FlexBox'
const Forget = () => {
+ const { styles } = useStyles()
+ const { isDarkMode } = useContext(AppContext)
const navigate = useNavigate()
const [searchParams] = useSearchParams()
const turnstileRef = useRef()
@@ -136,122 +139,41 @@ const Forget = () => {
}
return (
-
-
{showAuthor && (
@@ -288,7 +287,7 @@ const StoreCard = ({
alt={'Avatar'}
/>
}
- style={{ background: COLOR_BACKGROUND }}
+ style={{ background: theme.colorBgLayout }}
/>
{toolName}
+
+ {toolName}
+
{`ID: ${toolId}`}
{toolDesc && (
- {`简介：${omitText(toolDesc, 18)}`}
+
+ {omitTextByByte(toolDesc, 64)}
+
)}
{author.userInfo.nickname}
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index e381d5f..546c612 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -2,24 +2,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
-export const COLOR_SECONDARY = '#BAB8E5'
-export const COLOR_ERROR = '#FF4D4F'
-export const COLOR_ERROR_SECONDARY = '#FF7875'
-export const COLOR_BLUE = '#1677FF'
-export const COLOR_ACTIVE = '#EBECFD'
-export const COLOR_BACKGROUND = '#F5F5F5'
-export const COLOR_TOP = 'rgba(234,46,13,0.85)'
-export const COLOR_FONT_MAIN = '#4D4D4D'
-export const COLOR_FONT_SECONDARY = '#9E9E9E'
-export const COLOR_FOCUS = '#DDDDDD'
-export const SIZE_ICON_XS = '16px'
-export const SIZE_ICON_SM = '20px'
-export const SIZE_ICON_MD = '24px'
-export const SIZE_ICON_LG = '32px'
-export const SIZE_ICON_XL = '64px'
/**
* Response code
diff --git a/src/main.tsx b/src/main.tsx
index 4081c9a..274f308 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,28 +1,9 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
-import zh_CN from 'antd/locale/zh_CN'
-import '@/assets/css/base.less'
-import '@/assets/css/common.less'
-import { COLOR_MAIN } from '@/constants/common.constants'
import App from './App'
createRoot(document.getElementById('root')!).render(
-
-
-
+
)
}
diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index 4b712b3..9ac8ee1 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -1,6 +1,6 @@
import Icon from '@ant-design/icons'
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
-import styles from '@/assets/css/pages/sign/sign-in.module.less'
+import useStyles from '@/assets/css/pages/sign/sign-in.style'
import {
H_CAPTCHA_SITE_KEY,
PERMISSION_LOGIN_SUCCESS,
@@ -25,8 +25,9 @@ import FitCenter from '@/components/common/FitCenter'
import FlexBox from '@/components/common/FlexBox'
const SignIn = () => {
+ const { styles } = useStyles()
const [modal, contextHolder] = AntdModal.useModal()
- const { refreshRouter } = useContext(AppContext)
+ const { refreshRouter, isDarkMode } = useContext(AppContext)
const navigate = useNavigate()
const [searchParams] = useSearchParams()
const turnstileRef = useRef()
@@ -212,96 +213,94 @@ const SignIn = () => {
}
return (
-
-
- 找回密码
- Retrieve password
-
- {!searchParams.get('code') ? (
- !isSent ? (
- <>
-
-
-
-
-
-
-
- 确 定
-
-
-
-
- ) : (
-
+
+
+
- 我们向您发送了一封包含找回密码链接的邮件，如未收到，可能被归为垃圾邮件，请仔细检查。
- 重新发送
-
- )
- ) : !isChanged ? (
+
+
+ 找回密码
+ Retrieve password
+
+ {!searchParams.get('code') ? (
+ !isSent ? (
<>
-
+
- 新 密 码
- }
- disabled={isChanging}
- placeholder={'密码'}
- />
-
- ({
- validator(_, value) {
- if (
- !value ||
- getFieldValue('password') === value
- ) {
- return Promise.resolve()
- }
- return Promise.reject(
- new Error('两次密码输入必须一致')
- )
- }
- })
- ]}
- >
-
@@ -260,34 +182,108 @@ const Forget = () => {
style={{ width: '100%' }}
type={'primary'}
htmlType={'submit'}
- disabled={isChanging}
- loading={isChanging}
+ disabled={isSending}
+ loading={isSending}
>
- 更 改
+ 确 定
) : (
-
+
+ 新 密 码}
+ disabled={isChanging}
+ placeholder={'密码'}
+ />
+
+ ({
+ validator(_, value) {
+ if (!value || getFieldValue('password') === value) {
+ return Promise.resolve()
+ }
+ return Promise.reject(
+ new Error('两次密码输入必须一致')
+ )
+ }
+ })
+ ]}
+ >
+
+
+
+
+
+ 更 改
+
+
+
+
+ ) : (
+
+ 恭喜你，密码已更新，请重新登录。
- )}
+
+ 我们向您发送了一封包含找回密码链接的邮件，如未收到，可能被归为垃圾邮件，请仔细检查。
+ 重新发送
+
+ )
+ ) : !isChanged ? (
+ <>
+ 恭喜你，密码已更新，请重新登录。
+ )}
-
+
-
-
-
-
-
-
)
}
diff --git a/src/pages/Sign/SignUp.tsx b/src/pages/Sign/SignUp.tsx
index 11beb01..c341d0a 100644
--- a/src/pages/Sign/SignUp.tsx
+++ b/src/pages/Sign/SignUp.tsx
@@ -1,6 +1,6 @@
import Icon from '@ant-design/icons'
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
-import styles from '@/assets/css/pages/sign/sign-up.module.less'
+import useStyles from '@/assets/css/pages/sign/sign-up.style'
import {
DATABASE_DUPLICATE_KEY,
H_CAPTCHA_SITE_KEY,
@@ -11,10 +11,13 @@ import {
import { getLoginStatus, setToken } from '@/util/auth'
import { navigateToLogin } from '@/util/navigation'
import { r_auth_register, r_auth_resend } from '@/services/auth'
+import { AppContext } from '@/App'
import FitCenter from '@/components/common/FitCenter'
import FlexBox from '@/components/common/FlexBox'
const SignUp = () => {
+ const { styles } = useStyles()
+ const { isDarkMode } = useContext(AppContext)
const location = useLocation()
const navigate = useNavigate()
const turnstileRef = useRef()
@@ -125,138 +128,134 @@ const SignUp = () => {
}
return (
-
-
+
+
+
+
+
+
+
+
+
+ {
+ navigateToRoot(navigate)
+ }}
+ >
+ 返回主页
+
+ {
+ navigateToForget(navigate, location.search, { replace: true })
+ }}
+ >
+ 忘记密码？
+
+
+
+
+ 登 录
+
+
+
-
-
-
-
-
-
-
-
- {
- navigateToRoot(navigate)
- }}
- >
- 返回主页
-
- {
- navigateToForget(navigate, location.search, { replace: true })
- }}
- >
- 忘记密码？
-
-
-
-
- 登 录
-
-
-
-
-
-
+
+
{contextHolder}
-
+ 欢迎回来
- Welcome back
+
+
+ 欢迎回来
+ Welcome back
+
-
-
-
- {!isFinish ? (
- <>
-
-
-
-
-
-
- ({
- validator(_, value) {
- if (!value || getFieldValue('password') === value) {
- return Promise.resolve()
- }
- return Promise.reject(
- new Error('两次密码输入必须一致')
- )
- }
- })
- ]}
- >
-
-
-
-
-
- 注 册
-
-
-
- ) : (
-
+
+
)
}
diff --git a/src/pages/Sign/Verify.tsx b/src/pages/Sign/Verify.tsx
index e6bfd44..64e97e1 100644
--- a/src/pages/Sign/Verify.tsx
+++ b/src/pages/Sign/Verify.tsx
@@ -1,6 +1,5 @@
-import styles from '@/assets/css/pages/sign/verify.module.less'
+import useStyles from '@/assets/css/pages/sign/verify.style'
import {
- COLOR_BACKGROUND,
PERMISSION_ACCOUNT_NEED_INIT,
PERMISSION_NO_VERIFICATION_REQUIRED,
PERMISSION_RESEND_SUCCESS,
@@ -16,6 +15,7 @@ import FitCenter from '@/components/common/FitCenter'
import FlexBox from '@/components/common/FlexBox'
const Verify = () => {
+ const { styles, theme } = useStyles()
const { refreshRouter } = useContext(AppContext)
const navigate = useNavigate()
const [searchParams] = useSearchParams()
@@ -145,86 +145,82 @@ const Verify = () => {
}
return (
- <>
-
-
-
- 创建账号
- Create account
-
- 我们发送了一封包含验证账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
- 重新发送
-
- )}
-
-
- 已有账号？
-
- navigateToLogin(navigate, location.search, undefined, {
- replace: true
- })
- }
+
+
+
+ {!isFinish ? (
+ <>
+
- 登录
-
+
+
+
+
+ ({
+ validator(_, value) {
+ if (!value || getFieldValue('password') === value) {
+ return Promise.resolve()
+ }
+ return Promise.reject(new Error('两次密码输入必须一致'))
+ }
+ })
+ ]}
+ >
+
+
+
+
+
+ 注 册
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+ 创建账号
+ Create account
+
+ 我们发送了一封包含验证账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
+ 重新发送
-
-
-
-
-
-
-
-
+
+
+
+
+
+ 确 定
+
+
+
+
-
- 验证账号
- Verify account
-
- 账号已验证通过，无需验证，点击 回到首页
-
-
-
+
-
-
+
+
+
-
-
-
-
+ }
+ size={100}
+ style={{
+ background: theme.colorBgLayout,
+ cursor: 'pointer'
+ }}
+ onClick={handleOnChangeAvatar}
+ />
+
+
+
+ 验证账号
+ Verify account
+
+ 账号已验证通过，无需验证，点击 回到首页
+
+
+
-
-
-
-
-
- 确 定
-
-
-
-
+
+
-
-
- 在继续使用之前，我们需要确定您的电子邮箱地址的有效性，请点击
- 发送验证邮件
-
-
- 此链接有误或已失效，请点击
- 重新发送验证邮件
-
-
+ 在继续使用之前，我们需要确定您的电子邮箱地址的有效性，请点击
+ 发送验证邮件
+
+
+ 此链接有误或已失效，请点击
+ 重新发送验证邮件
+
+
+
+
)
}
diff --git a/src/pages/Sign/index.tsx b/src/pages/Sign/index.tsx
index 282474a..39a14cd 100644
--- a/src/pages/Sign/index.tsx
+++ b/src/pages/Sign/index.tsx
@@ -1,4 +1,4 @@
-import styles from '@/assets/css/pages/sign/index.module.less'
+import useStyles from '@/assets/css/pages/sign/index.style'
import FitFullscreen from '@/components/common/FitFullscreen'
import FitCenter from '@/components/common/FitCenter'
import FlexBox from '@/components/common/FlexBox'
@@ -8,6 +8,7 @@ import Forget from '@/pages/Sign/Forget'
import SignIn from '@/pages/Sign/SignIn'
const Sign = () => {
+ const { styles, cx } = useStyles()
const lastPage = useRef('none')
const currentPage = useRef('none')
const match = useMatches().reduce((_, second) => second)
@@ -46,12 +47,12 @@ const Sign = () => {
+
{leftComponent()}
-
+
diff --git a/src/pages/System/Group.tsx b/src/pages/System/Group.tsx
index 0a80ff5..f02802c 100644
--- a/src/pages/System/Group.tsx
+++ b/src/pages/System/Group.tsx
@@ -1,9 +1,7 @@
import { ChangeEvent, Key, KeyboardEvent } from 'react'
import Icon from '@ant-design/icons'
+import { useTheme } from 'antd-style'
import {
- COLOR_ERROR_SECONDARY,
- COLOR_FONT_SECONDARY,
- COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
DATABASE_DUPLICATE_KEY,
DATABASE_INSERT_SUCCESS,
@@ -28,6 +26,7 @@ import FlexBox from '@/components/common/FlexBox'
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)
@@ -109,14 +108,14 @@ const Group = () => {
{value ? (
禁用
) : (
启用
@@ -125,7 +124,7 @@ const Group = () => {
编辑
@@ -133,7 +132,7 @@ const Group = () => {
删除
@@ -524,7 +523,7 @@ const Group = () => {
名称
@@ -533,7 +532,7 @@ const Group = () => {
suffix={
<>
{!isRegexLegal && (
- 非法表达式
+ 非法表达式
)}
.*
diff --git a/src/pages/System/Log.tsx b/src/pages/System/Log.tsx
index f11c331..d2f1ebe 100644
--- a/src/pages/System/Log.tsx
+++ b/src/pages/System/Log.tsx
@@ -1,6 +1,7 @@
import { ChangeEvent, KeyboardEvent } from 'react'
+import { useTheme } from 'antd-style'
import dayjs from 'dayjs'
-import { COLOR_FONT_SECONDARY, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { dayjsToUtc, utcToLocalTime } from '@/util/datetime'
import { r_sys_log_get } from '@/services/system'
import FitFullscreen from '@/components/common/FitFullscreen'
@@ -9,6 +10,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
const Log = () => {
+ const theme = useTheme()
const [logData, setLogData] = useState([])
const [isLoading, setIsLoading] = useState(false)
const [tableParams, setTableParams] = useState({
@@ -240,7 +242,7 @@ const Log = () => {
请求 Url
diff --git a/src/pages/System/Role.tsx b/src/pages/System/Role.tsx
index 8cab6d9..266c905 100644
--- a/src/pages/System/Role.tsx
+++ b/src/pages/System/Role.tsx
@@ -1,9 +1,7 @@
import { ChangeEvent, Key, KeyboardEvent } from 'react'
import Icon from '@ant-design/icons'
+import { useTheme } from 'antd-style'
import {
- COLOR_ERROR_SECONDARY,
- COLOR_FONT_SECONDARY,
- COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
DATABASE_DUPLICATE_KEY,
DATABASE_INSERT_SUCCESS,
@@ -28,6 +26,7 @@ import FlexBox from '@/components/common/FlexBox'
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)
@@ -101,14 +100,14 @@ const Role = () => {
{value ? (
禁用
) : (
启用
@@ -117,7 +116,7 @@ const Role = () => {
编辑
@@ -125,7 +124,7 @@ const Role = () => {
删除
@@ -533,7 +532,7 @@ const Role = () => {
名称
@@ -542,7 +541,7 @@ const Role = () => {
suffix={
<>
{!isRegexLegal && (
- 非法表达式
+ 非法表达式
)}
.*
diff --git a/src/pages/System/Settings/index.tsx b/src/pages/System/Settings/index.tsx
index 2903ef9..c9aa9f1 100644
--- a/src/pages/System/Settings/index.tsx
+++ b/src/pages/System/Settings/index.tsx
@@ -1,4 +1,4 @@
-import styles from '@/assets/css/pages/system/settings.module.less'
+import useStyles from '@/assets/css/pages/system/settings/index.style'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
@@ -9,11 +9,13 @@ import SensitiveWord from '@/pages/System/Settings/SensitiveWord'
import TwoFactor from '@/pages/System/Settings/TwoFactor'
const Settings = () => {
+ const { styles } = useStyles()
+
return (
<>
-
+
-
+
(null)
const activeInfoEChartsRef = useRef(null)
const [isLoading, setIsLoading] = useState(false)
@@ -180,8 +182,8 @@ const ActiveInfo = () => {
}
>
-
-
+
+
)
diff --git a/src/pages/System/Statistics/CPUInfo.tsx b/src/pages/System/Statistics/CPUInfo.tsx
index 0303f09..91fcfd0 100644
--- a/src/pages/System/Statistics/CPUInfo.tsx
+++ b/src/pages/System/Statistics/CPUInfo.tsx
@@ -1,5 +1,6 @@
import * as echarts from 'echarts/core'
import { BarSeriesOption } from 'echarts/charts'
+import useStyles from '@/assets/css/pages/system/statistics/common.style'
import { r_sys_statistics_cpu } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
import {
@@ -10,6 +11,7 @@ import {
import StatisticsCard from '@/components/system/StatisticsCard'
const CPUInfo = () => {
+ const { styles } = useStyles()
const keyDivRef = useRef(null)
const percentDivRef = useRef(null)
const cpuInfoDivRef = useRef(null)
@@ -167,10 +169,10 @@ const CPUInfo = () => {
}
>
-
-
+
diff --git a/src/pages/System/Statistics/HardwareInfo.tsx b/src/pages/System/Statistics/HardwareInfo.tsx
index f6f0c9e..61271ca 100644
--- a/src/pages/System/Statistics/HardwareInfo.tsx
+++ b/src/pages/System/Statistics/HardwareInfo.tsx
@@ -1,8 +1,10 @@
+import useStyles from '@/assets/css/pages/system/statistics/common.style'
import { r_sys_statistics_hardware } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
import StatisticsCard from '@/components/system/StatisticsCard'
const HardwareInfo = () => {
+ const { styles } = useStyles()
const [hardwareInfoData, setHardwareInfoData] = useState()
useEffect(() => {
@@ -22,8 +24,8 @@ const HardwareInfo = () => {
title={'硬件信息'}
loading={hardwareInfoData === undefined}
>
-
-
+
+
-
+
{rightComponent()}
CPU
CPU 架构
微架构
@@ -34,7 +36,7 @@ const HardwareInfo = () => {
内存
磁盘
{hardwareInfoData?.cpu}
{hardwareInfoData?.arch}
diff --git a/src/pages/System/Statistics/OnlineInfo.tsx b/src/pages/System/Statistics/OnlineInfo.tsx
index 3bc5921..702b501 100644
--- a/src/pages/System/Statistics/OnlineInfo.tsx
+++ b/src/pages/System/Statistics/OnlineInfo.tsx
@@ -1,5 +1,6 @@
import Icon from '@ant-design/icons'
import * as echarts from 'echarts/core'
+import useStyles from '@/assets/css/pages/system/statistics/common.style'
import { getTimesBetweenTwoTimes } from '@/util/datetime'
import { r_sys_statistics_online } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
@@ -7,6 +8,7 @@ import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/S
import StatisticsCard from '@/components/system/StatisticsCard'
const OnlineInfo = () => {
+ const { styles } = useStyles()
const onlineInfoDivRef = useRef(null)
const onlineInfoEChartsRef = useRef(null)
const [isLoading, setIsLoading] = useState(false)
@@ -185,8 +187,8 @@ const OnlineInfo = () => {
}
>
-
-
+
+
)
diff --git a/src/pages/System/Statistics/SoftwareInfo.tsx b/src/pages/System/Statistics/SoftwareInfo.tsx
index a7bf4c5..0d343d9 100644
--- a/src/pages/System/Statistics/SoftwareInfo.tsx
+++ b/src/pages/System/Statistics/SoftwareInfo.tsx
@@ -1,9 +1,11 @@
+import useStyles from '@/assets/css/pages/system/statistics/common.style'
import { utcToLocalTime } from '@/util/datetime'
import { r_sys_statistics_software } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
import StatisticsCard from '@/components/system/StatisticsCard'
const SoftwareInfo = () => {
+ const { styles } = useStyles()
const [softwareInfoData, setSoftwareInfoData] = useState()
useEffect(() => {
@@ -23,8 +25,8 @@ const SoftwareInfo = () => {
title={'软件信息'}
loading={softwareInfoData === undefined}
>
-
-
+
+
-
+
操作系统
位数
Java
@@ -35,7 +37,7 @@ const SoftwareInfo = () => {
操作系统启动时间
后端服务器启动时间
{softwareInfoData?.os}
{softwareInfoData?.bitness}
diff --git a/src/pages/System/Statistics/StorageInfo.tsx b/src/pages/System/Statistics/StorageInfo.tsx
index 9202234..71f20d2 100644
--- a/src/pages/System/Statistics/StorageInfo.tsx
+++ b/src/pages/System/Statistics/StorageInfo.tsx
@@ -1,5 +1,6 @@
import * as echarts from 'echarts/core'
import { BarSeriesOption } from 'echarts/charts'
+import useStyles from '@/assets/css/pages/system/statistics/common.style'
import { formatByteSize } from '@/util/common'
import { r_sys_statistics_storage } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
@@ -11,6 +12,7 @@ import {
import StatisticsCard from '@/components/system/StatisticsCard'
const StorageInfo = () => {
+ const { styles } = useStyles()
const keyDivRef = useRef(null)
const percentDivRef = useRef(null)
const storageInfoDivRef = useRef(null)
@@ -186,10 +188,10 @@ const StorageInfo = () => {
}
>
-
-
+
diff --git a/src/pages/System/Statistics/index.tsx b/src/pages/System/Statistics/index.tsx
index 651007e..6b3c76a 100644
--- a/src/pages/System/Statistics/index.tsx
+++ b/src/pages/System/Statistics/index.tsx
@@ -1,4 +1,4 @@
-import styles from '@/assets/css/pages/system/statistics.module.less'
+import useStyles from '@/assets/css/pages/system/statistics/index.style'
import FlexBox from '@/components/common/FlexBox'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
@@ -11,11 +11,13 @@ import CPUInfo from '@/pages/System/Statistics/CPUInfo'
import StorageInfo from '@/pages/System/Statistics/StorageInfo'
const Statistics = () => {
+ const { styles } = useStyles()
+
return (
<>
-
+
-
+
{' '}
(
-
+
新增
)
@@ -178,7 +180,7 @@ const Base = () => {
{!Object.keys(hasEdited).length && (
{record.compiled ? '重新编译' : '编译'}
@@ -188,7 +190,7 @@ const Base = () => {
{hasEdited[record.id] && (
保存
@@ -198,7 +200,7 @@ const Base = () => {
{!Object.keys(hasEdited).length && (
编辑
@@ -207,7 +209,7 @@ const Base = () => {
)}
删除
@@ -739,7 +741,7 @@ const Base = () => {
{' '}
(
-
+
新增
)
@@ -760,7 +762,7 @@ const Base = () => {
>
{hasPermission('system:tool:modify:base') ? '编辑' : '查看'}
@@ -769,7 +771,7 @@ const Base = () => {
重命名
@@ -779,7 +781,7 @@ const Base = () => {
删除
@@ -1077,9 +1079,9 @@ const Base = () => {
return (
<>
-
+
-
+
{
{editingFileName && (
{
+ const theme = useTheme()
const [modal, contextHolder] = AntdModal.useModal()
const [form] = AntdForm.useForm()
const formValues = AntdForm.useWatch([], form)
@@ -72,7 +73,7 @@ const Category = () => {
{' '}
(
-
+
新增
)
@@ -86,7 +87,7 @@ const Category = () => {
编辑
@@ -94,7 +95,7 @@ const Category = () => {
删除
diff --git a/src/pages/System/Tools/Code.tsx b/src/pages/System/Tools/Code.tsx
index 0ea1869..d098cfa 100644
--- a/src/pages/System/Tools/Code.tsx
+++ b/src/pages/System/Tools/Code.tsx
@@ -1,11 +1,12 @@
import Draggable from 'react-draggable'
import Icon from '@ant-design/icons'
-import styles from '@/assets/css/pages/system/tools/code.module.less'
+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 { navigateToExecute, navigateToRepository } from '@/util/navigation'
import editorExtraLibs from '@/util/editorExtraLibs'
import { r_sys_tool_get_one } from '@/services/system'
+import { AppContext } from '@/App'
import { IFiles } from '@/components/Playground/shared'
import { base64ToFiles } from '@/components/Playground/files'
import Playground from '@/components/Playground'
@@ -13,6 +14,8 @@ import FitFullscreen from '@/components/common/FitFullscreen'
import Card from '@/components/common/Card'
const Code = () => {
+ const { styles } = useStyles()
+ const { isDarkMode } = useContext(AppContext)
const navigate = useNavigate()
const [modal, contextHolder] = AntdModal.useModal()
const { id } = useParams()
@@ -84,6 +87,7 @@ const Code = () => {
{
+ const { styles } = useStyles()
const navigate = useNavigate()
const { id } = useParams()
const [isLoading, setIsLoading] = useState(false)
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index 7df3cdd..adbef35 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -1,7 +1,6 @@
import Icon from '@ant-design/icons'
-import styles from '@/assets/css/pages/system/tools/template.module.less'
+import useStyles from '@/assets/css/pages/system/tools/template.style'
import {
- COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
DATABASE_DUPLICATE_KEY,
DATABASE_INSERT_SUCCESS,
@@ -27,6 +26,7 @@ import {
getFilesSize,
TS_CONFIG_FILE_NAME
} from '@/components/Playground/files'
+import { AppContext } from '@/App'
import FitFullscreen from '@/components/common/FitFullscreen'
import FlexBox from '@/components/common/FlexBox'
import HideScrollbar from '@/components/common/HideScrollbar'
@@ -35,6 +35,8 @@ import Permission from '@/components/common/Permission'
import Playground from '@/components/Playground'
const Template = () => {
+ const { styles, theme } = useStyles()
+ const { isDarkMode } = useContext(AppContext)
const blocker = useBlocker(
({ currentLocation, nextLocation }) =>
currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0
@@ -181,7 +183,7 @@ const Template = () => {
{' '}
(
-
+
新增
)
@@ -197,7 +199,7 @@ const Template = () => {
{hasEdited[record.id] && (
保存
@@ -207,7 +209,7 @@ const Template = () => {
{!Object.keys(hasEdited).length && (
编辑
@@ -216,7 +218,7 @@ const Template = () => {
)}
删除
@@ -591,7 +593,7 @@ const Template = () => {
{' '}
(
-
+
新增
)
@@ -612,7 +614,7 @@ const Template = () => {
>
{hasPermission('system:tool:modify:template') ? '编辑' : '查看'}
@@ -621,7 +623,7 @@ const Template = () => {
重命名
@@ -631,7 +633,7 @@ const Template = () => {
删除
@@ -1020,9 +1022,9 @@ const Template = () => {
return (
<>
-
+
-
+
{
{editingFileName && (
{
+ const theme = useTheme()
const navigate = useNavigate()
const [modal, contextHolder] = AntdModal.useModal()
const [tableParams, setTableParams] = useState({
@@ -62,7 +61,7 @@ const Tools = () => {
alt={'Avatar'}
/>
}
- style={{ background: COLOR_BACKGROUND }}
+ style={{ background: theme.colorBgLayout }}
/>
),
width: '0',
@@ -132,7 +131,7 @@ const Tools = () => {
<>
查看
@@ -140,7 +139,7 @@ const Tools = () => {
{record.review === 'PROCESSING' && (
审核
@@ -148,7 +147,7 @@ const Tools = () => {
)}
{record.review === 'PASS' && (
下架
@@ -157,7 +156,7 @@ const Tools = () => {
删除
@@ -543,7 +542,7 @@ const Tools = () => {
suffix={
<>
{!isRegexLegal && (
- 非法表达式
+ 非法表达式
)}
.*
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index ee9c7fb..cfda029 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -1,10 +1,8 @@
import { ChangeEvent, Key, KeyboardEvent } from 'react'
import Icon from '@ant-design/icons'
+import { useTheme } from 'antd-style'
import dayjs from 'dayjs'
import {
- COLOR_BACKGROUND,
- COLOR_ERROR_SECONDARY,
- COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
DATABASE_DUPLICATE_KEY,
DATABASE_INSERT_SUCCESS,
@@ -36,6 +34,7 @@ interface ChangePasswordFields extends UserUpdatePasswordParam {
}
const User = () => {
+ const theme = useTheme()
const [modal, contextHolder] = AntdModal.useModal()
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
@@ -93,7 +92,7 @@ const User = () => {
alt={'Avatar'}
/>
}
- style={{ background: COLOR_BACKGROUND }}
+ style={{ background: theme.colorBgLayout }}
/>
),
width: '0',
@@ -197,7 +196,7 @@ const User = () => {
更改密码
@@ -205,7 +204,7 @@ const User = () => {
编辑
@@ -214,7 +213,7 @@ const User = () => {
{record.id !== '0' && (
删除
@@ -333,7 +332,7 @@ const User = () => {
title: (
<>
.*
diff --git a/src/pages/System/index.tsx b/src/pages/System/index.tsx
index bc87a7f..714b315 100644
--- a/src/pages/System/index.tsx
+++ b/src/pages/System/index.tsx
@@ -1,4 +1,4 @@
-import styles from '@/assets/css/pages/system/index.module.less'
+import useStyles from '@/assets/css/pages/system/index.style'
import HideScrollbar from '@/components/common/HideScrollbar'
import FitFullscreen from '@/components/common/FitFullscreen'
import FlexBox from '@/components/common/FlexBox'
@@ -6,11 +6,13 @@ import Permission from '@/components/common/Permission'
import UrlCard from '@/components/common/UrlCard'
const System = () => {
+ const { styles } = useStyles()
+
return (
<>
-
+
-
+
系统概况
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index a84d3a9..b6e0394 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -1,61 +1,61 @@
-import styles from '@/assets/css/pages/system-framework.module.less'
+import useStyles from '@/assets/css/pages/system-framework.style'
import { getSystemRouteJson } from '@/router/system'
import FitFullscreen from '@/components/common/FitFullscreen'
import Sidebar from '@/components/common/Sidebar'
import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
const SystemFramework = () => {
+ const { styles } = useStyles()
+
return (
- <>
-
-
)
}
diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx
index d9685d8..9d99091 100644
--- a/src/pages/Tools/Create.tsx
+++ b/src/pages/Tools/Create.tsx
@@ -1,5 +1,5 @@
import Icon from '@ant-design/icons'
-import styles from '@/assets/css/pages/tools/create.module.less'
+import useStyles from '@/assets/css/pages/tools/create.style'
import {
DATABASE_DUPLICATE_KEY,
DATABASE_INSERT_SUCCESS,
@@ -22,6 +22,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
import Playground from '@/components/Playground'
const Create = () => {
+ const { styles } = useStyles()
const navigate = useNavigate()
const [form] = AntdForm.useForm()
const formValues = AntdForm.useWatch([], form)
@@ -190,9 +191,9 @@ const Create = () => {
配置
-
+
-
-
-
-
- {getSystemRouteJson().map((route) => {
- return (
- route.menu &&
- route.name && (
-
- {route.children?.map(
- (subRoute) =>
- subRoute.menu &&
- subRoute.name && (
-
- )
+
+
-
+ )
+ })}
+
+
+
+
+
+
+
+
+ {getSystemRouteJson().map((route) => {
+ return (
+ route.menu &&
+ route.name && (
+
+ {route.children?.map(
+ (subRoute) =>
+ subRoute.menu &&
+ subRoute.name && (
+
)
- })}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
{
+ const { styles } = useStyles()
+ const { isDarkMode } = useContext(AppContext)
const blocker = useBlocker(
({ currentLocation, nextLocation }) =>
currentLocation.pathname !== nextLocation.pathname && hasEdited
@@ -420,9 +423,10 @@ const Edit = () => {
<>
-
+
{
+ const { styles } = useStyles()
+ const { isDarkMode } = useContext(AppContext)
const navigate = useNavigate()
const { username, toolId, ver } = useParams()
const [searchParams] = useSearchParams({
@@ -85,8 +88,9 @@ const Source = () => {
return (
-
+
{
+ const { styles, cx } = useStyles()
const scrollTopRef = useRef(0)
const [isLoading, setIsLoading] = useState(false)
const [currentPage, setCurrentPage] = useState(0)
@@ -83,13 +84,13 @@ const Store = () => {
return (
<>
-
+
-
+
{
placeholder={'请输入工具名或关键字'}
/>
-
+
{!toolData.length &&
+
{
}
size={144}
style={{
- background: COLOR_BACKGROUND,
+ background: theme.colorBgLayout,
cursor: 'pointer'
}}
className={styles.avatar}
diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx
index 00a0f58..965b5c6 100644
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -1,4 +1,4 @@
-import styles from '@/assets/css/pages/tools/view.module.less'
+import useStyles from '@/assets/css/pages/tools/view.style'
import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { getLoginStatus } from '@/util/auth'
import { navigateToRepository, navigateToRoot, navigateToView } from '@/util/navigation'
@@ -11,6 +11,7 @@ import Playground from '@/components/Playground'
import Card from '@/components/common/Card'
const View = () => {
+ const { styles } = useStyles()
const navigate = useNavigate()
const { username, toolId, ver } = useParams()
const [searchParams] = useSearchParams({
@@ -114,7 +115,7 @@ const View = () => {
return (
-
+
{
+ const { styles } = useStyles()
const navigate = useNavigate()
const [modal, contextHolder] = AntdModal.useModal()
const [isLoading, setIsLoading] = useState(false)
@@ -565,7 +566,10 @@ const Tools = () => {
{starToolData.length ? (
<>
-
+
(getToolMenuItem)
const [activeItem, setActiveItem] = useState(null)
@@ -86,7 +87,7 @@ const ToolsFramework = () => {
return (
<>
-
+
{
+ const { styles, theme } = useStyles()
const [modal, contextHolder] = AntdModal.useModal()
const [form] = AntdForm.useForm
未找到任何工具
}
{toolData
?.reduce((previousValue: ToolVo[], currentValue) => {
diff --git a/src/pages/Tools/User.tsx b/src/pages/Tools/User.tsx
index 704af10..227689e 100644
--- a/src/pages/Tools/User.tsx
+++ b/src/pages/Tools/User.tsx
@@ -1,10 +1,6 @@
import Icon from '@ant-design/icons'
-import styles from '@/assets/css/pages/tools/user.module.less'
-import {
- COLOR_BACKGROUND,
- DATABASE_NO_RECORD_FOUND,
- DATABASE_SELECT_SUCCESS
-} from '@/constants/common.constants'
+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 { navigateToRoot } from '@/util/navigation'
import { r_sys_user_info_get_basic } from '@/services/system'
@@ -17,6 +13,7 @@ import StoreCard from '@/components/tools/StoreCard'
import LoadMoreCard from '@/components/tools/LoadMoreCard'
const User = () => {
+ const { styles, theme } = useStyles()
const { username } = useParams()
const navigate = useNavigate()
const [isLoading, setIsLoading] = useState(false)
@@ -126,7 +123,7 @@ const User = () => {
autoHideWaitingTime={1000}
className={styles.root}
>
- 收藏
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 8abf6df..5aa9792 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -1,7 +1,7 @@
import { DndContext, DragOverEvent, DragStartEvent } from '@dnd-kit/core'
import { arrayMove, SortableContext } from '@dnd-kit/sortable'
import type { DragEndEvent } from '@dnd-kit/core/dist/types'
-import styles from '@/assets/css/pages/tools-framework.module.less'
+import useStyles from '@/assets/css/pages/tools-framework.style'
import { tools } from '@/router/tools'
import { checkDesktop, getToolMenuItem, saveToolMenuItem } from '@/util/common'
import { getViewPath } from '@/util/navigation'
@@ -15,6 +15,7 @@ import DropMask from '@/components/dnd/DropMask'
import Droppable from '@/components/dnd/Droppable'
const ToolsFramework = () => {
+ const { styles } = useStyles()
const [isDelete, setIsDelete] = useState(false)
const [toolMenuItem, setToolMenuItem] = useState