FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Refactor:2 #51

Merged
FatttSnake merged 2 commits from FatttSnake into dev 2024-05-06 16:55:21 +08:00
Conversation 0 Commits 2 Files Changed 36 +194 -193
28 changed files with 194 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 779e0ab2c0 - Show all commits

8
src/components/Playground/CodeEditor/Editor/hooks.ts
View File

@@ -76,11 +76,11 @@ export const useEditor = () => {
export const useTypesProgress = () => { export const useTypesProgress = () => {
const [progress, setProgress] = useState(0) const [progress, setProgress] = useState(0)
const [total, setTotal] = useState(0) const [total, setTotal] = useState(0)
const [finished, setFinished] = useState(false) const [isFinished, setIsFinished] = useState(false)
const onWatch = (typeHelper: TypeHelper) => { const onWatch = (typeHelper: TypeHelper) => {
const handleStarted = () => { const handleStarted = () => {
setFinished(false) setIsFinished(false)
} }
typeHelper.addListener('started', handleStarted) typeHelper.addListener('started', handleStarted)
@@ -91,7 +91,7 @@ export const useTypesProgress = () => {
typeHelper.addListener('progress', handleProgress) typeHelper.addListener('progress', handleProgress)
const handleFinished = () => { const handleFinished = () => {
setFinished(true) setIsFinished(true)
} }
typeHelper.addListener('progress', handleFinished) typeHelper.addListener('progress', handleFinished)
@@ -105,7 +105,7 @@ export const useTypesProgress = () => {
return { return {
progress, progress,
total, total,
finished, finished: isFinished,
onWatch onWatch
} }
} }

16
src/components/Playground/CodeEditor/FileSelector/Item.tsx
View File

@@ -31,7 +31,7 @@ const Item = ({
}: ItemProps) => { }: ItemProps) => {
const inputRef = useRef<HTMLInputElement>(null) const inputRef = useRef<HTMLInputElement>(null)
const [fileName, setFileName] = useState(value) const [fileName, setFileName] = useState(value)
const [creating, setCreating] = useState(prop.creating) const [isCreating, setIsCreating] = useState(prop.creating)
const handleOnClick = () => { const handleOnClick = () => {
if (hasEditing) { if (hasEditing) {
@@ -52,35 +52,35 @@ const Item = ({
} }
const finishNameFile = () => { const finishNameFile = () => {
if (!creating || onValidate ? !onValidate?.(fileName, value) : false) { if (!isCreating || onValidate ? !onValidate?.(fileName, value) : false) {
inputRef.current?.focus() inputRef.current?.focus()
return return
} }
if (fileName === value && active) { if (fileName === value && active) {
setCreating(false) setIsCreating(false)
setHasEditing?.(false) setHasEditing?.(false)
return return
} }
onOk?.(fileName) onOk?.(fileName)
setCreating(false) setIsCreating(false)
setHasEditing?.(false) setHasEditing?.(false)
} }
const cancelNameFile = () => { const cancelNameFile = () => {
setFileName(value) setFileName(value)
setCreating(false) setIsCreating(false)
setHasEditing?.(false) setHasEditing?.(false)
onCancel?.() onCancel?.()
} }
const handleOnDoubleClick = () => { const handleOnDoubleClick = () => {
if (readonly || creating || hasEditing) { if (readonly || isCreating || hasEditing) {
return return
} }
setCreating(true) setIsCreating(true)
setHasEditing?.(true) setHasEditing?.(true)
setFileName(value) setFileName(value)
setTimeout(() => { setTimeout(() => {
@@ -112,7 +112,7 @@ const Item = ({
className={`tab-item${active ? ' active' : ''}${className ? ` ${className}` : ''}`} className={`tab-item${active ? ' active' : ''}${className ? ` ${className}` : ''}`}
onClick={handleOnClick} onClick={handleOnClick}
> >
{creating ? ( {isCreating ? (
<div className={'tab-item-input'}> <div className={'tab-item-input'}>
<input <input
ref={inputRef} ref={inputRef}

16
src/components/Playground/CodeEditor/FileSelector/index.tsx
View File

@@ -34,7 +34,7 @@ const FileSelector = ({
}: FileSelectorProps) => { }: FileSelectorProps) => {
const hideScrollbarRef = useRef<HideScrollbarElement>(null) const hideScrollbarRef = useRef<HideScrollbarElement>(null)
const [tabs, setTabs] = useState<string[]>([]) const [tabs, setTabs] = useState<string[]>([])
const [creating, setCreating] = useState(false) const [isCreating, setIsCreating] = useState(false)
const [hasEditing, setHasEditing] = useState(false) const [hasEditing, setHasEditing] = useState(false)
const getMaxSequenceTabName = (filesName: string[]) => { const getMaxSequenceTabName = (filesName: string[]) => {
@@ -56,7 +56,7 @@ const FileSelector = ({
} }
setTabs([...tabs, getMaxSequenceTabName(tabs)]) setTabs([...tabs, getMaxSequenceTabName(tabs)])
setCreating(true) setIsCreating(true)
setTimeout(() => { setTimeout(() => {
hideScrollbarRef.current?.scrollRight(1000) hideScrollbarRef.current?.scrollRight(1000)
}) })
@@ -64,16 +64,16 @@ const FileSelector = ({
const handleOnCancel = () => { const handleOnCancel = () => {
onError?.('') onError?.('')
if (!creating) { if (!isCreating) {
return return
} }
tabs.pop() tabs.pop()
setTabs([...tabs]) setTabs([...tabs])
setCreating(false) setIsCreating(false)
} }
const handleOnClickTab = (fileName: string) => { const handleOnClickTab = (fileName: string) => {
if (creating) { if (isCreating) {
return return
} }
@@ -97,9 +97,9 @@ const FileSelector = ({
} }
const handleOnSaveTab = (value: string, item: string) => { const handleOnSaveTab = (value: string, item: string) => {
if (creating) { if (isCreating) {
onAddFile?.(value) onAddFile?.(value)
setCreating(false) setIsCreating(false)
} else { } else {
onUpdateFileName?.(value, item) onUpdateFileName?.(value, item)
} }
@@ -179,7 +179,7 @@ const FileSelector = ({
key={index + item} key={index + item}
value={item} value={item}
active={selectedFileName === item} active={selectedFileName === item}
creating={creating} creating={isCreating}
readonly={readonly || notRemovableFiles.includes(item)} readonly={readonly || notRemovableFiles.includes(item)}
hasEditing={hasEditing} hasEditing={hasEditing}
setHasEditing={setHasEditing} setHasEditing={setHasEditing}

14
src/components/Playground/Output/Preview/Render.tsx
View File

@@ -42,7 +42,7 @@ const iframeUrl = getIframeUrl(iframeRaw)
const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => { const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => {
const iframeRef = useRef<HTMLIFrameElement>(null) const iframeRef = useRef<HTMLIFrameElement>(null)
const [loaded, setLoaded] = useState(false) const [isLoaded, setIsLoaded] = useState(false)
const [selectedDevice, setSelectedDevice] = useState('Pixel 7') const [selectedDevice, setSelectedDevice] = useState('Pixel 7')
const [zoom, setZoom] = useState(1) const [zoom, setZoom] = useState(1)
const [isRotate, setIsRotate] = useState(false) const [isRotate, setIsRotate] = useState(false)
@@ -148,7 +148,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
} }
useEffect(() => { useEffect(() => {
if (loaded) { if (isLoaded) {
iframeRef.current?.contentWindow?.postMessage( iframeRef.current?.contentWindow?.postMessage(
{ {
type: 'UPDATE', type: 'UPDATE',
@@ -157,10 +157,10 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
'*' '*'
) )
} }
}, [loaded, compiledCode]) }, [isLoaded, compiledCode])
useEffect(() => { useEffect(() => {
if (loaded) { if (isLoaded) {
iframeRef.current?.contentWindow?.postMessage( iframeRef.current?.contentWindow?.postMessage(
{ {
type: 'SCALE', type: 'SCALE',
@@ -169,7 +169,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
'*' '*'
) )
} }
}, [loaded, zoom]) }, [isLoaded, zoom])
return mobileMode ? ( return mobileMode ? (
<> <>
@@ -202,7 +202,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
key={iframeKey} key={iframeKey}
ref={iframeRef} ref={iframeRef}
src={iframeUrl} src={iframeUrl}
onLoad={() => setLoaded(true)} onLoad={() => setIsLoaded(true)}
sandbox="allow-downloads allow-forms allow-modals allow-scripts" sandbox="allow-downloads allow-forms allow-modals allow-scripts"
/> />
</div> </div>
@@ -244,7 +244,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
key={iframeKey} key={iframeKey}
ref={iframeRef} ref={iframeRef}
src={iframeUrl} src={iframeUrl}
onLoad={() => setLoaded(true)} onLoad={() => setIsLoaded(true)}
sandbox="allow-downloads allow-forms allow-modals allow-scripts" sandbox="allow-downloads allow-forms allow-modals allow-scripts"
/> />
) )

2
src/components/Playground/compiler.ts
View File

@@ -66,7 +66,7 @@ class Compiler {
}) })
stop = () => { stop = () => {
esbuild.stop() void esbuild.stop()
} }
private fileResolverPlugin = ( private fileResolverPlugin = (

48
src/components/common/HideScrollbar.tsx
View File

@@ -183,16 +183,16 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0) const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100) const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0) const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0)
const [verticalScrollbarOnClick, setVerticalScrollbarOnClick] = useState(false) const [isVerticalScrollbarOnClick, setIsVerticalScrollbarOnClick] = useState(false)
const [verticalScrollbarOnTouch, setVerticalScrollbarOnTouch] = useState(false) const [isVerticalScrollbarOnTouch, setIsVerticalScrollbarOnTouch] = useState(false)
const [verticalScrollbarAutoHide, setVerticalScrollbarAutoHide] = useState(false) const [isVerticalScrollbarAutoHide, setIsVerticalScrollbarAutoHide] = useState(false)
const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0) const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
const [horizontalScrollbarLength, setHorizontalScrollbarLength] = useState(100) const [horizontalScrollbarLength, setHorizontalScrollbarLength] = useState(100)
const [horizontalScrollbarPosition, setHorizontalScrollbarPosition] = useState(0) const [horizontalScrollbarPosition, setHorizontalScrollbarPosition] = useState(0)
const [horizontalScrollbarOnClick, setHorizontalScrollbarOnClick] = useState(false) const [isHorizontalScrollbarOnClick, setIsHorizontalScrollbarOnClick] = useState(false)
const [horizontalScrollbarOnTouch, setHorizontalScrollbarOnTouch] = useState(false) const [isHorizontalScrollbarOnTouch, setIsHorizontalScrollbarOnTouch] = useState(false)
const [horizontalScrollbarAutoHide, setHorizontalScrollbarAutoHide] = useState(false) const [isHorizontalScrollbarAutoHide, setIsHorizontalScrollbarAutoHide] = useState(false)
const isPreventAnyScroll = const isPreventAnyScroll =
isPreventScroll || isPreventVerticalScroll || isPreventHorizontalScroll isPreventScroll || isPreventVerticalScroll || isPreventHorizontalScroll
@@ -201,10 +201,10 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
if (autoHideWaitingTime === undefined) { if (autoHideWaitingTime === undefined) {
return return
} }
setVerticalScrollbarAutoHide(false) setIsVerticalScrollbarAutoHide(false)
if (autoHideWaitingTime > 0) { if (autoHideWaitingTime > 0) {
setTimeout(() => { setTimeout(() => {
setVerticalScrollbarAutoHide(true) setIsVerticalScrollbarAutoHide(true)
}, autoHideWaitingTime) }, autoHideWaitingTime)
} }
}, [autoHideWaitingTime, verticalScrollbarPosition]) }, [autoHideWaitingTime, verticalScrollbarPosition])
@@ -213,10 +213,10 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
if (autoHideWaitingTime === undefined) { if (autoHideWaitingTime === undefined) {
return return
} }
setHorizontalScrollbarAutoHide(false) setIsHorizontalScrollbarAutoHide(false)
if (autoHideWaitingTime > 0) { if (autoHideWaitingTime > 0) {
setTimeout(() => { setTimeout(() => {
setHorizontalScrollbarAutoHide(true) setIsHorizontalScrollbarAutoHide(true)
}, autoHideWaitingTime) }, autoHideWaitingTime)
} }
}, [autoHideWaitingTime, horizontalScrollbarPosition]) }, [autoHideWaitingTime, horizontalScrollbarPosition])
@@ -318,20 +318,20 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
} }
switch (scrollbarFlag) { switch (scrollbarFlag) {
case 'vertical': case 'vertical':
setVerticalScrollbarOnClick(true) setIsVerticalScrollbarOnClick(true)
break break
case 'horizontal': case 'horizontal':
setHorizontalScrollbarOnClick(true) setIsHorizontalScrollbarOnClick(true)
break break
} }
break break
case 'up': case 'up':
case 'leave': case 'leave':
setVerticalScrollbarOnClick(false) setIsVerticalScrollbarOnClick(false)
setHorizontalScrollbarOnClick(false) setIsHorizontalScrollbarOnClick(false)
break break
case 'move': case 'move':
if (verticalScrollbarOnClick) { if (isVerticalScrollbarOnClick) {
rootRef.current?.scrollTo({ rootRef.current?.scrollTo({
top: top:
rootRef.current?.scrollTop + rootRef.current?.scrollTop +
@@ -341,7 +341,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
behavior: 'instant' behavior: 'instant'
}) })
} }
if (horizontalScrollbarOnClick) { if (isHorizontalScrollbarOnClick) {
rootRef.current?.scrollTo({ rootRef.current?.scrollTo({
left: left:
rootRef.current?.scrollLeft + rootRef.current?.scrollLeft +
@@ -372,23 +372,23 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
} }
switch (scrollbarFlag) { switch (scrollbarFlag) {
case 'vertical': case 'vertical':
setVerticalScrollbarOnTouch(true) setIsVerticalScrollbarOnTouch(true)
break break
case 'horizontal': case 'horizontal':
setHorizontalScrollbarOnTouch(true) setIsHorizontalScrollbarOnTouch(true)
break break
} }
break break
case 'end': case 'end':
case 'cancel': case 'cancel':
setVerticalScrollbarOnTouch(false) setIsVerticalScrollbarOnTouch(false)
setHorizontalScrollbarOnTouch(false) setIsHorizontalScrollbarOnTouch(false)
break break
case 'move': case 'move':
if (event.touches.length !== 1) { if (event.touches.length !== 1) {
return return
} }
if (verticalScrollbarOnTouch) { if (isVerticalScrollbarOnTouch) {
rootRef.current?.scrollTo({ rootRef.current?.scrollTo({
top: top:
rootRef.current?.scrollTop + rootRef.current?.scrollTop +
@@ -399,7 +399,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
behavior: 'instant' behavior: 'instant'
}) })
} }
if (horizontalScrollbarOnTouch) { if (isHorizontalScrollbarOnTouch) {
rootRef.current?.scrollTo({ rootRef.current?.scrollTo({
left: left:
rootRef.current?.scrollLeft + rootRef.current?.scrollLeft +
@@ -571,7 +571,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
(!isHiddenVerticalScrollbarWhenFull || verticalScrollbarLength < 100) && ( (!isHiddenVerticalScrollbarWhenFull || verticalScrollbarLength < 100) && (
<div <div
className={`scrollbar vertical-scrollbar${ className={`scrollbar vertical-scrollbar${
verticalScrollbarAutoHide ? ' hide' : '' isVerticalScrollbarAutoHide ? ' hide' : ''
}`} }`}
style={{ style={{
height: maskRef.current height: maskRef.current
@@ -614,7 +614,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
horizontalScrollbarLength < 100) && ( horizontalScrollbarLength < 100) && (
<div <div
className={`scrollbar horizontal-scrollbar${ className={`scrollbar horizontal-scrollbar${
horizontalScrollbarAutoHide ? ' hide' : '' isHorizontalScrollbarAutoHide ? ' hide' : ''
}`} }`}
style={{ style={{
width: maskRef.current width: maskRef.current

1
src/components/common/LoadingMask.tsx
View File

@@ -7,6 +7,7 @@ interface LoadingMaskProps extends PropsWithChildren {
hidden?: boolean hidden?: boolean
maskContent?: ReactNode maskContent?: ReactNode
} }
const LoadingMask = (props: LoadingMaskProps) => { const LoadingMask = (props: LoadingMaskProps) => {
const loadingIcon = ( const loadingIcon = (
<> <>

10
src/components/common/Sidebar/Footer.tsx
View File

@@ -10,7 +10,7 @@ const Footer = () => {
const lastMatch = matches.reduce((_, second) => second) const lastMatch = matches.reduce((_, second) => second)
const location = useLocation() const location = useLocation()
const navigate = useNavigate() const navigate = useNavigate()
const [exiting, setExiting] = useState(false) const [isExiting, setIsExiting] = useState(false)
const [nickname, setNickname] = useState('') const [nickname, setNickname] = useState('')
const [avatar, setAvatar] = useState('') const [avatar, setAvatar] = useState('')
@@ -23,11 +23,11 @@ const Footer = () => {
} }
const handleLogout = () => { const handleLogout = () => {
if (exiting) { if (isExiting) {
return return
} }
setExiting(true) setIsExiting(true)
void r_auth_logout().finally(() => { void r_auth_logout().finally(() => {
removeToken() removeToken()
notification.info({ notification.info({
@@ -83,8 +83,8 @@ const Footer = () => {
<div className={'content'}> <div className={'content'}>
<span hidden={!getLoginStatus()} className={'icon-exit'} onClick={handleLogout}> <span hidden={!getLoginStatus()} className={'icon-exit'} onClick={handleLogout}>
<Icon <Icon
component={exiting ? IconOxygenLoading : IconOxygenExit} component={isExiting ? IconOxygenLoading : IconOxygenExit}
spin={exiting} spin={isExiting}
/> />
</span> </span>
</div> </div>

10
src/components/common/Sidebar/index.tsx
View File

@@ -17,18 +17,18 @@ interface SidebarProps extends PropsWithChildren {
} }
const Sidebar = (props: SidebarProps) => { const Sidebar = (props: SidebarProps) => {
const [hideSidebar, setHideSidebar] = useState(getLocalStorage('HIDE_SIDEBAR') === 'true') const [isHideSidebar, setIsHideSidebar] = useState(getLocalStorage('HIDE_SIDEBAR') === 'true')
const switchSidebar = () => { const switchSidebar = () => {
setLocalStorage('HIDE_SIDEBAR', !hideSidebar ? 'true' : 'false') setLocalStorage('HIDE_SIDEBAR', !isHideSidebar ? 'true' : 'false')
setHideSidebar(!hideSidebar) setIsHideSidebar(!isHideSidebar)
props.onSidebarSwitch?.(hideSidebar) props.onSidebarSwitch?.(isHideSidebar)
} }
return ( return (
<> <>
<div <div
className={`sidebar${hideSidebar ? ' hide' : ''}`} className={`sidebar${isHideSidebar ? ' hide' : ''}`}
style={{ width: props.width ?? 'clamp(180px, 20vw, 240px)' }} style={{ width: props.width ?? 'clamp(180px, 20vw, 240px)' }}
> >
<div className={'title'}> <div className={'title'}>

8
src/pages/System/Group.tsx
View File

@@ -50,7 +50,7 @@ const Group = () => {
const [isRegexLegal, setIsRegexLegal] = useState(true) const [isRegexLegal, setIsRegexLegal] = useState(true)
const [isDrawerOpen, setIsDrawerOpen] = useState(false) const [isDrawerOpen, setIsDrawerOpen] = useState(false)
const [isDrawerEdit, setIsDrawerEdit] = useState(false) const [isDrawerEdit, setIsDrawerEdit] = useState(false)
const [submittable, setSubmittable] = useState(false) const [isSubmittable, setIsSubmittable] = useState(false)
const [roleData, setRoleData] = useState<RoleVo[]>([]) const [roleData, setRoleData] = useState<RoleVo[]>([])
const [isLoadingRole, setIsLoadingRole] = useState(false) const [isLoadingRole, setIsLoadingRole] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false)
@@ -471,10 +471,10 @@ const Group = () => {
useEffect(() => { useEffect(() => {
form.validateFields({ validateOnly: true }).then( form.validateFields({ validateOnly: true }).then(
() => { () => {
setSubmittable(true) setIsSubmittable(true)
}, },
() => { () => {
setSubmittable(false) setIsSubmittable(false)
} }
) )
@@ -589,7 +589,7 @@ const Group = () => {
</AntdButton> </AntdButton>
<AntdButton <AntdButton
type={'primary'} type={'primary'}
disabled={!submittable} disabled={!isSubmittable}
loading={isSubmitting} loading={isSubmitting}
onClick={handleOnSubmit} onClick={handleOnSubmit}
> >

10
src/pages/System/Log.tsx
View File

@@ -10,7 +10,7 @@ import FlexBox from '@/components/common/FlexBox'
const Log = () => { const Log = () => {
const [logData, setLogData] = useState<SysLogGetVo[]>([]) const [logData, setLogData] = useState<SysLogGetVo[]>([])
const [loading, setLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [tableParams, setTableParams] = useState<TableParam>({ const [tableParams, setTableParams] = useState<TableParam>({
pagination: { pagination: {
current: 1, current: 1,
@@ -181,11 +181,11 @@ const Log = () => {
} }
const getLog = () => { const getLog = () => {
if (loading) { if (isLoading) {
return return
} }
setLoading(true) setIsLoading(true)
void r_sys_log_get({ void r_sys_log_get({
currentPage: tableParams.pagination?.current, currentPage: tableParams.pagination?.current,
@@ -218,7 +218,7 @@ const Log = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoading(false) setIsLoading(false)
}) })
} }
@@ -276,7 +276,7 @@ const Log = () => {
columns={dataColumns} columns={dataColumns}
rowKey={(record) => record.id} rowKey={(record) => record.id}
pagination={tableParams.pagination} pagination={tableParams.pagination}
loading={loading} loading={isLoading}
onChange={handleOnTableChange} onChange={handleOnTableChange}
/> />
</Card> </Card>

8
src/pages/System/Role.tsx
View File

@@ -50,7 +50,7 @@ const Role = () => {
const [isRegexLegal, setIsRegexLegal] = useState(true) const [isRegexLegal, setIsRegexLegal] = useState(true)
const [isDrawerOpen, setIsDrawerOpen] = useState(false) const [isDrawerOpen, setIsDrawerOpen] = useState(false)
const [isDrawerEdit, setIsDrawerEdit] = useState(false) const [isDrawerEdit, setIsDrawerEdit] = useState(false)
const [submittable, setSubmittable] = useState(false) const [isSubmittable, setIsSubmittable] = useState(false)
const [powerTreeData, setPowerTreeData] = useState<_DataNode[]>([]) const [powerTreeData, setPowerTreeData] = useState<_DataNode[]>([])
const [isLoadingPower, setIsLoadingPower] = useState(false) const [isLoadingPower, setIsLoadingPower] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false)
@@ -480,10 +480,10 @@ const Role = () => {
useEffect(() => { useEffect(() => {
form.validateFields({ validateOnly: true }).then( form.validateFields({ validateOnly: true }).then(
() => { () => {
setSubmittable(true) setIsSubmittable(true)
}, },
() => { () => {
setSubmittable(false) setIsSubmittable(false)
} }
) )
@@ -598,7 +598,7 @@ const Role = () => {
</AntdButton> </AntdButton>
<AntdButton <AntdButton
type={'primary'} type={'primary'}
disabled={!submittable} disabled={!isSubmittable}
loading={isSubmitting} loading={isSubmitting}
onClick={handleOnSubmit} onClick={handleOnSubmit}
> >

10
src/pages/System/Settings/Base.tsx
View File

@@ -5,7 +5,7 @@ import SettingsCard from '@/components/system/SettingCard'
const Base = () => { const Base = () => {
const [baseForm] = AntdForm.useForm<BaseSettingsParam>() const [baseForm] = AntdForm.useForm<BaseSettingsParam>()
const baseFormValues = AntdForm.useWatch([], baseForm) const baseFormValues = AntdForm.useWatch([], baseForm)
const [loading, setLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const handleOnReset = () => { const handleOnReset = () => {
getBaseSettings() getBaseSettings()
@@ -24,17 +24,17 @@ const Base = () => {
} }
const getBaseSettings = () => { const getBaseSettings = () => {
if (loading) { if (isLoading) {
return return
} }
setLoading(true) setIsLoading(true)
void r_sys_settings_base_get().then((res) => { void r_sys_settings_base_get().then((res) => {
const response = res.data const response = res.data
if (response.success) { if (response.success) {
const data = response.data const data = response.data
data && baseForm.setFieldsValue(data) data && baseForm.setFieldsValue(data)
setLoading(false) setIsLoading(false)
} }
}) })
} }
@@ -48,7 +48,7 @@ const Base = () => {
<SettingsCard <SettingsCard
icon={IconOxygenBase} icon={IconOxygenBase}
title={'基础'} title={'基础'}
loading={loading} loading={isLoading}
onReset={handleOnReset} onReset={handleOnReset}
onSave={handleOnSave} onSave={handleOnSave}
modifyOperationCode={['system:settings:modify:base']} modifyOperationCode={['system:settings:modify:base']}

10
src/pages/System/Settings/Mail.tsx
View File

@@ -11,7 +11,7 @@ const Mail = () => {
const [modal, contextHolder] = AntdModal.useModal() const [modal, contextHolder] = AntdModal.useModal()
const [mailForm] = AntdForm.useForm<MailSettingsParam>() const [mailForm] = AntdForm.useForm<MailSettingsParam>()
const mailFormValues = AntdForm.useWatch([], mailForm) const mailFormValues = AntdForm.useWatch([], mailForm)
const [loading, setLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [mailSendForm] = AntdForm.useForm<MailSendParam>() const [mailSendForm] = AntdForm.useForm<MailSendParam>()
const handleOnTest = () => { const handleOnTest = () => {
@@ -95,17 +95,17 @@ const Mail = () => {
} }
const getMailSettings = () => { const getMailSettings = () => {
if (loading) { if (isLoading) {
return return
} }
setLoading(true) setIsLoading(true)
void r_sys_settings_mail_get().then((res) => { void r_sys_settings_mail_get().then((res) => {
const response = res.data const response = res.data
if (response.success) { if (response.success) {
const data = response.data const data = response.data
data && mailForm.setFieldsValue(data) data && mailForm.setFieldsValue(data)
setLoading(false) setIsLoading(false)
} }
}) })
} }
@@ -119,7 +119,7 @@ const Mail = () => {
<SettingsCard <SettingsCard
icon={IconOxygenEmail} icon={IconOxygenEmail}
title={'邮件'} title={'邮件'}
loading={loading} loading={isLoading}
onReset={handleOnReset} onReset={handleOnReset}
onSave={handleOnSave} onSave={handleOnSave}
modifyOperationCode={['system:settings:modify:mail']} modifyOperationCode={['system:settings:modify:mail']}

10
src/pages/System/Settings/SensitiveWord.tsx
View File

@@ -13,7 +13,7 @@ const SensitiveWord = () => {
const [dataSource, setDataSource] = useState<SensitiveWordVo[]>() const [dataSource, setDataSource] = useState<SensitiveWordVo[]>()
const [targetKeys, setTargetKeys] = useState<string[]>([]) const [targetKeys, setTargetKeys] = useState<string[]>([])
const [selectedKeys, setSelectedKeys] = useState<string[]>([]) const [selectedKeys, setSelectedKeys] = useState<string[]>([])
const [loading, setLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [isAdding, setIsAdding] = useState(false) const [isAdding, setIsAdding] = useState(false)
const [newWord, setNewWord] = useState('') const [newWord, setNewWord] = useState('')
@@ -47,10 +47,10 @@ const SensitiveWord = () => {
} }
const getSensitiveWordSettings = () => { const getSensitiveWordSettings = () => {
if (loading) { if (isLoading) {
return return
} }
setLoading(true) setIsLoading(true)
void r_sys_settings_sensitive_get().then((res) => { void r_sys_settings_sensitive_get().then((res) => {
const response = res.data const response = res.data
@@ -58,7 +58,7 @@ const SensitiveWord = () => {
const data = response.data const data = response.data
data && setDataSource(data) data && setDataSource(data)
data && setTargetKeys(data.filter((value) => value.enable).map((value) => value.id)) data && setTargetKeys(data.filter((value) => value.enable).map((value) => value.id))
setLoading(false) setIsLoading(false)
} }
}) })
} }
@@ -103,7 +103,7 @@ const SensitiveWord = () => {
<SettingsCard <SettingsCard
icon={IconOxygenSensitive} icon={IconOxygenSensitive}
title={'敏感词'} title={'敏感词'}
loading={loading} loading={isLoading}
onReset={handleOnReset} onReset={handleOnReset}
onSave={handleOnSave} onSave={handleOnSave}
modifyOperationCode={['system:settings:modify:sensitive']} modifyOperationCode={['system:settings:modify:sensitive']}

10
src/pages/System/Settings/TwoFactor.tsx
View File

@@ -5,7 +5,7 @@ import SettingsCard from '@/components/system/SettingCard'
const TwoFactor = () => { const TwoFactor = () => {
const [twoFactorForm] = AntdForm.useForm<TwoFactorSettingsParam>() const [twoFactorForm] = AntdForm.useForm<TwoFactorSettingsParam>()
const twoFactorFormValues = AntdForm.useWatch([], twoFactorForm) const twoFactorFormValues = AntdForm.useWatch([], twoFactorForm)
const [loading, setLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const handleOnReset = () => { const handleOnReset = () => {
getTwoFactorSettings() getTwoFactorSettings()
@@ -24,17 +24,17 @@ const TwoFactor = () => {
} }
const getTwoFactorSettings = () => { const getTwoFactorSettings = () => {
if (loading) { if (isLoading) {
return return
} }
setLoading(true) setIsLoading(true)
void r_sys_settings_two_factor_get().then((res) => { void r_sys_settings_two_factor_get().then((res) => {
const response = res.data const response = res.data
if (response.success) { if (response.success) {
const data = response.data const data = response.data
data && twoFactorForm.setFieldsValue(data) data && twoFactorForm.setFieldsValue(data)
setLoading(false) setIsLoading(false)
} }
}) })
} }
@@ -48,7 +48,7 @@ const TwoFactor = () => {
<SettingsCard <SettingsCard
icon={IconOxygenSafe} icon={IconOxygenSafe}
title={'双因素'} title={'双因素'}
loading={loading} loading={isLoading}
onReset={handleOnReset} onReset={handleOnReset}
onSave={handleOnSave} onSave={handleOnSave}
modifyOperationCode={['system:settings:modify:two-factor']} modifyOperationCode={['system:settings:modify:two-factor']}

26
src/pages/System/Tools/Base.tsx
View File

@@ -60,7 +60,7 @@ const Base = () => {
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [isDrawerOpen, setIsDrawerOpen] = useState(false) const [isDrawerOpen, setIsDrawerOpen] = useState(false)
const [isDrawerEdit, setIsDrawerEdit] = useState(false) const [isDrawerEdit, setIsDrawerEdit] = useState(false)
const [submittable, setSubmittable] = useState(false) const [isSubmittable, setIsSubmittable] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false)
const [editingBaseId, setEditingBaseId] = useState<string>('') const [editingBaseId, setEditingBaseId] = useState<string>('')
const [editingFiles, setEditingFiles] = useState<Record<string, IFiles>>({}) const [editingFiles, setEditingFiles] = useState<Record<string, IFiles>>({})
@@ -70,7 +70,7 @@ const Base = () => {
const [baseDetailData, setBaseDetailData] = useState<Record<string, ToolBaseVo>>({}) const [baseDetailData, setBaseDetailData] = useState<Record<string, ToolBaseVo>>({})
const [baseDetailLoading, setBaseDetailLoading] = useState<Record<string, boolean>>({}) const [baseDetailLoading, setBaseDetailLoading] = useState<Record<string, boolean>>({})
const [tsconfig, setTsconfig] = useState<ITsconfig>() const [tsconfig, setTsconfig] = useState<ITsconfig>()
const [compiling, setCompiling] = useState(false) const [isCompiling, setIsCompiling] = useState(false)
const [compileForm] = AntdForm.useForm<{ entryFileName: string }>() const [compileForm] = AntdForm.useForm<{ entryFileName: string }>()
useBeforeUnload( useBeforeUnload(
@@ -220,10 +220,10 @@ const Base = () => {
const handleOnCompileBtnClick = (value: ToolBaseVo) => { const handleOnCompileBtnClick = (value: ToolBaseVo) => {
return () => { return () => {
if (compiling || isLoading) { if (isCompiling || isLoading) {
return return
} }
setCompiling(true) setIsCompiling(true)
setIsLoading(true) setIsLoading(true)
void message.loading({ content: '加载文件中', key: 'COMPILE_LOADING', duration: 0 }) void message.loading({ content: '加载文件中', key: 'COMPILE_LOADING', duration: 0 })
@@ -263,7 +263,7 @@ const Base = () => {
const files = base64ToFiles(baseDetail!.source.data!) const files = base64ToFiles(baseDetail!.source.data!)
if (!Object.keys(files).includes(IMPORT_MAP_FILE_NAME)) { if (!Object.keys(files).includes(IMPORT_MAP_FILE_NAME)) {
void message.warning(`编译中止：未包含 ${IMPORT_MAP_FILE_NAME} 文件`) void message.warning(`编译中止：未包含 ${IMPORT_MAP_FILE_NAME} 文件`)
setCompiling(false) setIsCompiling(false)
setIsLoading(false) setIsLoading(false)
return return
} }
@@ -272,7 +272,7 @@ const Base = () => {
importMap = JSON.parse(files[IMPORT_MAP_FILE_NAME].value) as IImportMap importMap = JSON.parse(files[IMPORT_MAP_FILE_NAME].value) as IImportMap
} catch (e) { } catch (e) {
void message.warning(`编译中止：Import Map 文件转换失败`) void message.warning(`编译中止：Import Map 文件转换失败`)
setCompiling(false) setIsCompiling(false)
setIsLoading(false) setIsLoading(false)
return return
} }
@@ -353,14 +353,14 @@ const Base = () => {
}) })
.finally(() => { .finally(() => {
message.destroy('UPLOADING') message.destroy('UPLOADING')
setCompiling(false) setIsCompiling(false)
setIsLoading(false) setIsLoading(false)
}) })
}) })
.catch((e: Error) => { .catch((e: Error) => {
void message.error(`编译失败：${e.message}`) void message.error(`编译失败：${e.message}`)
message.destroy('COMPILING') message.destroy('COMPILING')
setCompiling(false) setIsCompiling(false)
setIsLoading(false) setIsLoading(false)
}) })
}) })
@@ -372,13 +372,13 @@ const Base = () => {
} }
), ),
onCancel: () => { onCancel: () => {
setCompiling(false) setIsCompiling(false)
setIsLoading(false) setIsLoading(false)
} }
}) })
}) })
.catch(() => { .catch(() => {
setCompiling(false) setIsCompiling(false)
setIsLoading(false) setIsLoading(false)
message.destroy('COMPILE_LOADING') message.destroy('COMPILE_LOADING')
}) })
@@ -1002,10 +1002,10 @@ const Base = () => {
useEffect(() => { useEffect(() => {
form.validateFields({ validateOnly: true }).then( form.validateFields({ validateOnly: true }).then(
() => { () => {
setSubmittable(true) setIsSubmittable(true)
}, },
() => { () => {
setSubmittable(false) setIsSubmittable(false)
} }
) )
@@ -1034,7 +1034,7 @@ const Base = () => {
</AntdButton> </AntdButton>
<AntdButton <AntdButton
type={'primary'} type={'primary'}
disabled={!submittable} disabled={!isSubmittable}
loading={isSubmitting} loading={isSubmitting}
onClick={handleOnSubmit} onClick={handleOnSubmit}
> >

8
src/pages/System/Tools/Category.tsx
View File

@@ -27,7 +27,7 @@ const Category = () => {
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [isDrawerOpen, setIsDrawerOpen] = useState(false) const [isDrawerOpen, setIsDrawerOpen] = useState(false)
const [isDrawerEdit, setIsDrawerEdit] = useState(false) const [isDrawerEdit, setIsDrawerEdit] = useState(false)
const [submittable, setSubmittable] = useState(false) const [isSubmittable, setIsSubmittable] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false)
const handleOnAddBtnClick = () => { const handleOnAddBtnClick = () => {
@@ -230,10 +230,10 @@ const Category = () => {
useEffect(() => { useEffect(() => {
form.validateFields({ validateOnly: true }).then( form.validateFields({ validateOnly: true }).then(
() => { () => {
setSubmittable(true) setIsSubmittable(true)
}, },
() => { () => {
setSubmittable(false) setIsSubmittable(false)
} }
) )
@@ -256,7 +256,7 @@ const Category = () => {
</AntdButton> </AntdButton>
<AntdButton <AntdButton
type={'primary'} type={'primary'}
disabled={!submittable} disabled={!isSubmittable}
loading={isSubmitting} loading={isSubmitting}
onClick={handleOnSubmit} onClick={handleOnSubmit}
> >

8
src/pages/System/Tools/Code.tsx
View File

@@ -15,7 +15,7 @@ const Code = () => {
const navigate = useNavigate() const navigate = useNavigate()
const [modal, contextHolder] = AntdModal.useModal() const [modal, contextHolder] = AntdModal.useModal()
const { id } = useParams() const { id } = useParams()
const [loading, setLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [files, setFiles] = useState<IFiles>({}) const [files, setFiles] = useState<IFiles>({})
const [selectedFileName, setSelectedFileName] = useState('') const [selectedFileName, setSelectedFileName] = useState('')
const [platform, setPlatform] = useState<Platform>('WEB') const [platform, setPlatform] = useState<Platform>('WEB')
@@ -47,10 +47,10 @@ const Code = () => {
} }
const getTool = () => { const getTool = () => {
if (loading) { if (isLoading) {
return return
} }
setLoading(true) setIsLoading(true)
void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 }) void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
void r_sys_tool_get_one(id!) void r_sys_tool_get_one(id!)
@@ -69,7 +69,7 @@ const Code = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoading(false) setIsLoading(false)
message.destroy('LOADING') message.destroy('LOADING')
}) })
} }

8
src/pages/System/Tools/Execute.tsx
View File

@@ -12,7 +12,7 @@ import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/P
const Execute = () => { const Execute = () => {
const navigate = useNavigate() const navigate = useNavigate()
const { id } = useParams() const { id } = useParams()
const [loading, setLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [compiledCode, setCompiledCode] = useState('') const [compiledCode, setCompiledCode] = useState('')
const render = (toolVo: ToolVo) => { const render = (toolVo: ToolVo) => {
@@ -39,10 +39,10 @@ const Execute = () => {
} }
const getTool = () => { const getTool = () => {
if (loading) { if (isLoading) {
return return
} }
setLoading(true) setIsLoading(true)
void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 }) void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
void r_sys_tool_get_one(id!) void r_sys_tool_get_one(id!)
@@ -61,7 +61,7 @@ const Execute = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoading(false) setIsLoading(false)
message.destroy('LOADING') message.destroy('LOADING')
}) })
} }

8
src/pages/System/Tools/Template.tsx
View File

@@ -60,7 +60,7 @@ const Template = () => {
const [isDrawerEdit, setIsDrawerEdit] = useState(false) const [isDrawerEdit, setIsDrawerEdit] = useState(false)
const [baseData, setBaseData] = useState<ToolBaseVo[]>([]) const [baseData, setBaseData] = useState<ToolBaseVo[]>([])
const [isLoadingBaseData, setIsLoadingBaseData] = useState(false) const [isLoadingBaseData, setIsLoadingBaseData] = useState(false)
const [submittable, setSubmittable] = useState(false) const [isSubmittable, setIsSubmittable] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false)
const [editingTemplateId, setEditingTemplateId] = useState<string>('') const [editingTemplateId, setEditingTemplateId] = useState<string>('')
const [editingFiles, setEditingFiles] = useState<Record<string, IFiles>>({}) const [editingFiles, setEditingFiles] = useState<Record<string, IFiles>>({})
@@ -884,10 +884,10 @@ const Template = () => {
useEffect(() => { useEffect(() => {
form.validateFields({ validateOnly: true }).then( form.validateFields({ validateOnly: true }).then(
() => { () => {
setSubmittable(true) setIsSubmittable(true)
}, },
() => { () => {
setSubmittable(false) setIsSubmittable(false)
} }
) )
@@ -972,7 +972,7 @@ const Template = () => {
</AntdButton> </AntdButton>
<AntdButton <AntdButton
type={'primary'} type={'primary'}
disabled={!submittable} disabled={!isSubmittable}
loading={isSubmitting} loading={isSubmitting}
onClick={handleOnSubmit} onClick={handleOnSubmit}
> >

38
src/pages/Tools/Create.tsx
View File

@@ -29,13 +29,13 @@ const Create = () => {
const [categoryData, setCategoryData] = useState<ToolCategoryVo[]>() const [categoryData, setCategoryData] = useState<ToolCategoryVo[]>()
const [templateDetailData, setTemplateDetailData] = useState<Record<string, ToolTemplateVo>>({}) const [templateDetailData, setTemplateDetailData] = useState<Record<string, ToolTemplateVo>>({})
const [previewTemplate, setPreviewTemplate] = useState('') const [previewTemplate, setPreviewTemplate] = useState('')
const [loadingTemplate, setLoadingTemplate] = useState(false) const [isLoadingTemplate, setIsLoadingTemplate] = useState(false)
const [loadingCategory, setLoadingCategory] = useState(false) const [isLoadingCategory, setIsLoadingCategory] = useState(false)
const [creating, setCreating] = useState(false) const [isCreating, setIsCreating] = useState(false)
const [compiledCode, setCompiledCode] = useState('') const [compiledCode, setCompiledCode] = useState('')
const handleOnFinish = (toolAddParam: ToolCreateParam) => { const handleOnFinish = (toolAddParam: ToolCreateParam) => {
setCreating(true) setIsCreating(true)
void r_tool_create(toolAddParam) void r_tool_create(toolAddParam)
.then((res) => { .then((res) => {
@@ -49,15 +49,15 @@ const Create = () => {
break break
case DATABASE_DUPLICATE_KEY: case DATABASE_DUPLICATE_KEY:
void message.warning('已存在相同 ID 的应用') void message.warning('已存在相同 ID 的应用')
setCreating(false) setIsCreating(false)
break break
default: default:
void message.error('创建失败，请稍后重试') void message.error('创建失败，请稍后重试')
setCreating(false) setIsCreating(false)
} }
}) })
.catch(() => { .catch(() => {
setCreating(false) setIsCreating(false)
}) })
} }
@@ -84,7 +84,7 @@ const Create = () => {
} }
const handleOnPlatformChange = (value: string) => { const handleOnPlatformChange = (value: string) => {
setLoadingTemplate(true) setIsLoadingTemplate(true)
void r_tool_template_get({ void r_tool_template_get({
platform: value platform: value
}) })
@@ -103,7 +103,7 @@ const Create = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoadingTemplate(false) setIsLoadingTemplate(false)
}) })
} }
@@ -113,7 +113,7 @@ const Create = () => {
return return
} }
setLoadingTemplate(true) setIsLoadingTemplate(true)
void r_tool_template_get_one(value) void r_tool_template_get_one(value)
.then((res) => { .then((res) => {
const response = res.data const response = res.data
@@ -126,7 +126,7 @@ const Create = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoadingTemplate(false) setIsLoadingTemplate(false)
}) })
} }
@@ -167,7 +167,7 @@ const Create = () => {
}, [form, formValues?.keywords]) }, [form, formValues?.keywords])
useEffect(() => { useEffect(() => {
setLoadingCategory(true) setIsLoadingCategory(true)
void r_tool_category_get() void r_tool_category_get()
.then((res) => { .then((res) => {
const response = res.data const response = res.data
@@ -180,7 +180,7 @@ const Create = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoadingCategory(false) setIsLoadingCategory(false)
}) })
}, []) }, [])
@@ -198,7 +198,7 @@ const Create = () => {
form={form} form={form}
layout={'vertical'} layout={'vertical'}
onFinish={handleOnFinish} onFinish={handleOnFinish}
disabled={creating} disabled={isCreating}
> >
<AntdForm.Item <AntdForm.Item
label={'图标'} label={'图标'}
@@ -319,8 +319,8 @@ const Create = () => {
value: value.id, value: value.id,
label: value.name label: value.name
}))} }))}
loading={loadingTemplate} loading={isLoadingTemplate}
disabled={loadingTemplate} disabled={isLoadingTemplate}
onChange={handleOnTemplateChange} onChange={handleOnTemplateChange}
placeholder={'请选择模板'} placeholder={'请选择模板'}
/> />
@@ -349,8 +349,8 @@ const Create = () => {
value: value.id, value: value.id,
label: value.name label: value.name
}))} }))}
loading={loadingCategory} loading={isLoadingCategory}
disabled={loadingCategory} disabled={isLoadingCategory}
placeholder={'请选择类别'} placeholder={'请选择类别'}
/> />
</AntdForm.Item> </AntdForm.Item>
@@ -359,7 +359,7 @@ const Create = () => {
className={'create-bt'} className={'create-bt'}
type={'primary'} type={'primary'}
htmlType={'submit'} htmlType={'submit'}
loading={creating} loading={isCreating}
> >
创建 创建
</AntdButton> </AntdButton>

38
src/pages/Tools/Edit.tsx
View File

@@ -36,7 +36,7 @@ const Edit = () => {
}) })
const [form] = AntdForm.useForm<ToolUpdateParam>() const [form] = AntdForm.useForm<ToolUpdateParam>()
const formValues = AntdForm.useWatch([], form) const formValues = AntdForm.useWatch([], form)
const [loading, setLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [toolData, setToolData] = useState<ToolVo>() const [toolData, setToolData] = useState<ToolVo>()
const [files, setFiles] = useState<IFiles>({}) const [files, setFiles] = useState<IFiles>({})
const [selectedFileName, setSelectedFileName] = useState('') const [selectedFileName, setSelectedFileName] = useState('')
@@ -46,13 +46,13 @@ const Edit = () => {
const [tsconfig, setTsconfig] = useState<ITsconfig>() const [tsconfig, setTsconfig] = useState<ITsconfig>()
const [entryPoint, setEntryPoint] = useState('') const [entryPoint, setEntryPoint] = useState('')
const [baseDist, setBaseDist] = useState('') const [baseDist, setBaseDist] = useState('')
const [showDraggableMask, setShowDraggableMask] = useState(false) const [isShowDraggableMask, setIsShowDraggableMask] = useState(false)
const [isDrawerOpen, setIsDrawerOpen] = useState(false) const [isDrawerOpen, setIsDrawerOpen] = useState(false)
const [submittable, setSubmittable] = useState(false) const [isSubmittable, setIsSubmittable] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false)
const [hasEdited, setHasEdited] = useState(false) const [hasEdited, setHasEdited] = useState(false)
const [categoryData, setCategoryData] = useState<ToolCategoryVo[]>() const [categoryData, setCategoryData] = useState<ToolCategoryVo[]>()
const [loadingCategory, setLoadingCategory] = useState(false) const [isLoadingCategory, setIsLoadingCategory] = useState(false)
useBeforeUnload( useBeforeUnload(
useCallback( useCallback(
@@ -196,10 +196,10 @@ const Edit = () => {
} }
const getCategory = () => { const getCategory = () => {
if (loadingCategory) { if (isLoadingCategory) {
return return
} }
setLoadingCategory(true) setIsLoadingCategory(true)
void r_tool_category_get() void r_tool_category_get()
.then((res) => { .then((res) => {
@@ -213,15 +213,15 @@ const Edit = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoadingCategory(false) setIsLoadingCategory(false)
}) })
} }
const getTool = () => { const getTool = () => {
if (loading) { if (isLoading) {
return return
} }
setLoading(true) setIsLoading(true)
void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 }) void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
void r_tool_detail('!', toolId!, 'latest', searchParams.get('platform') as Platform) void r_tool_detail('!', toolId!, 'latest', searchParams.get('platform') as Platform)
@@ -253,7 +253,7 @@ const Edit = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoading(false) setIsLoading(false)
message.destroy('LOADING') message.destroy('LOADING')
}) })
} }
@@ -299,10 +299,10 @@ const Edit = () => {
useEffect(() => { useEffect(() => {
form.validateFields({ validateOnly: true }).then( form.validateFields({ validateOnly: true }).then(
() => { () => {
setSubmittable(true) setIsSubmittable(true)
}, },
() => { () => {
setSubmittable(false) setIsSubmittable(false)
} }
) )
}, [formValues]) }, [formValues])
@@ -327,7 +327,7 @@ const Edit = () => {
</AntdButton> </AntdButton>
<AntdButton <AntdButton
type={'primary'} type={'primary'}
disabled={!submittable} disabled={!isSubmittable}
loading={isSubmitting} loading={isSubmitting}
onClick={handleOnSubmit} onClick={handleOnSubmit}
> >
@@ -408,8 +408,8 @@ const Edit = () => {
value: value.id, value: value.id,
label: value.name label: value.name
}))} }))}
loading={loadingCategory} loading={isLoadingCategory}
disabled={loadingCategory} disabled={isLoadingCategory}
placeholder={'请选择类别'} placeholder={'请选择类别'}
/> />
</AntdForm.Item> </AntdForm.Item>
@@ -421,7 +421,7 @@ const Edit = () => {
<FitFullscreen data-component={'tools-edit'}> <FitFullscreen data-component={'tools-edit'}>
<Card> <Card>
<FlexBox direction={'horizontal'} className={'root-content'}> <FlexBox direction={'horizontal'} className={'root-content'}>
<LoadingMask hidden={!loading}> <LoadingMask hidden={!isLoading}>
<Playground.CodeEditor <Playground.CodeEditor
tsconfig={tsconfig} tsconfig={tsconfig}
files={{ files={{
@@ -454,12 +454,12 @@ const Edit = () => {
mobileMode={toolData?.platform === 'ANDROID'} mobileMode={toolData?.platform === 'ANDROID'}
/> />
</LoadingMask> </LoadingMask>
{showDraggableMask && <div className={'draggable-mask'} />} {isShowDraggableMask && <div className={'draggable-mask'} />}
</FlexBox> </FlexBox>
</Card> </Card>
<Draggable <Draggable
onStart={() => setShowDraggableMask(true)} onStart={() => setIsShowDraggableMask(true)}
onStop={() => setShowDraggableMask(false)} onStop={() => setIsShowDraggableMask(false)}
bounds={'#root'} bounds={'#root'}
> >
<div className={'draggable-content'}> <div className={'draggable-content'}>

8
src/pages/Tools/Source.tsx
View File

@@ -15,7 +15,7 @@ const Source = () => {
const [searchParams] = useSearchParams({ const [searchParams] = useSearchParams({
platform: import.meta.env.VITE_PLATFORM platform: import.meta.env.VITE_PLATFORM
}) })
const [loading, setLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [files, setFiles] = useState<IFiles>({}) const [files, setFiles] = useState<IFiles>({})
const [selectedFileName, setSelectedFileName] = useState('') const [selectedFileName, setSelectedFileName] = useState('')
@@ -29,10 +29,10 @@ const Source = () => {
} }
const getTool = () => { const getTool = () => {
if (loading) { if (isLoading) {
return return
} }
setLoading(true) setIsLoading(true)
void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 }) void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
void r_tool_detail( void r_tool_detail(
@@ -56,7 +56,7 @@ const Source = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoading(false) setIsLoading(false)
message.destroy('LOADING') message.destroy('LOADING')
}) })
} }

8
src/pages/Tools/Store.tsx
View File

@@ -15,7 +15,7 @@ const Store = () => {
const [currentPage, setCurrentPage] = useState(0) const [currentPage, setCurrentPage] = useState(0)
const [hasNextPage, setHasNextPage] = useState(false) const [hasNextPage, setHasNextPage] = useState(false)
const [toolData, setToolData] = useState<ToolVo[]>([]) const [toolData, setToolData] = useState<ToolVo[]>([])
const [hideSearch, setHideSearch] = useState(false) const [isHideSearch, setIsHideSearch] = useState(false)
const [searchValue, setSearchValue] = useState('') const [searchValue, setSearchValue] = useState('')
const handleOnSearch = (value: string) => { const handleOnSearch = (value: string) => {
@@ -25,9 +25,9 @@ const Store = () => {
const handleOnScroll = (event: UIEvent<HTMLDivElement>) => { const handleOnScroll = (event: UIEvent<HTMLDivElement>) => {
if (event.currentTarget.scrollTop < scrollTopRef.current) { if (event.currentTarget.scrollTop < scrollTopRef.current) {
setHideSearch(false) setIsHideSearch(false)
} else { } else {
setHideSearch(true) setIsHideSearch(true)
} }
scrollTopRef.current = event.currentTarget.scrollTop scrollTopRef.current = event.currentTarget.scrollTop
} }
@@ -89,7 +89,7 @@ const Store = () => {
autoHideWaitingTime={1000} autoHideWaitingTime={1000}
onScroll={handleOnScroll} onScroll={handleOnScroll}
> >
<div className={`search${hideSearch ? ' hide' : ''}`}> <div className={`search${isHideSearch ? ' hide' : ''}`}>
<AntdInput.Search <AntdInput.Search
enterButton enterButton
allowClear allowClear

8
src/pages/Tools/View.tsx
View File

@@ -16,7 +16,7 @@ const View = () => {
const [searchParams] = useSearchParams({ const [searchParams] = useSearchParams({
platform: import.meta.env.VITE_PLATFORM platform: import.meta.env.VITE_PLATFORM
}) })
const [loading, setLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [compiledCode, setCompiledCode] = useState('') const [compiledCode, setCompiledCode] = useState('')
const [isAndroid, setIsAndroid] = useState(false) const [isAndroid, setIsAndroid] = useState(false)
@@ -58,10 +58,10 @@ const View = () => {
} }
const getTool = () => { const getTool = () => {
if (loading) { if (isLoading) {
return return
} }
setLoading(true) setIsLoading(true)
void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 }) void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
void r_tool_detail( void r_tool_detail(
@@ -85,7 +85,7 @@ const View = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoading(false) setIsLoading(false)
message.destroy('LOADING') message.destroy('LOADING')
}) })
} }

30
src/pages/Tools/index.tsx
View File

@@ -208,7 +208,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
const Tools = () => { const Tools = () => {
const navigate = useNavigate() const navigate = useNavigate()
const [modal, contextHolder] = AntdModal.useModal() const [modal, contextHolder] = AntdModal.useModal()
const [loading, setLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [currentPage, setCurrentPage] = useState(0) const [currentPage, setCurrentPage] = useState(0)
const [hasNextPage, setHasNextPage] = useState(false) const [hasNextPage, setHasNextPage] = useState(false)
const [toolData, setToolData] = useState<ToolVo[]>([]) const [toolData, setToolData] = useState<ToolVo[]>([])
@@ -228,7 +228,7 @@ const Tools = () => {
.then( .then(
(confirmed) => { (confirmed) => {
if (confirmed) { if (confirmed) {
setLoading(true) setIsLoading(true)
void r_tool_delete(tool.id) void r_tool_delete(tool.id)
.then((res) => { .then((res) => {
@@ -241,7 +241,7 @@ const Tools = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoading(false) setIsLoading(false)
}) })
} }
}, },
@@ -371,7 +371,7 @@ const Tools = () => {
.then( .then(
(confirmed) => { (confirmed) => {
if (confirmed) { if (confirmed) {
setLoading(true) setIsLoading(true)
void r_tool_submit(tool.id) void r_tool_submit(tool.id)
.then((res) => { .then((res) => {
@@ -392,7 +392,7 @@ const Tools = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoading(false) setIsLoading(false)
}) })
} }
}, },
@@ -411,7 +411,7 @@ const Tools = () => {
.then( .then(
(confirmed) => { (confirmed) => {
if (confirmed) { if (confirmed) {
setLoading(true) setIsLoading(true)
void r_tool_cancel(tool.id) void r_tool_cancel(tool.id)
.then((res) => { .then((res) => {
@@ -431,7 +431,7 @@ const Tools = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoading(false) setIsLoading(false)
getTool(1) getTool(1)
}) })
} }
@@ -441,24 +441,24 @@ const Tools = () => {
} }
const handleOnLoadMore = () => { const handleOnLoadMore = () => {
if (loading) { if (isLoading) {
return return
} }
getTool(currentPage + 1) getTool(currentPage + 1)
} }
const handleOnLoadMoreStar = () => { const handleOnLoadMoreStar = () => {
if (loading) { if (isLoading) {
return return
} }
getStarTool(currentStarPage + 1) getStarTool(currentStarPage + 1)
} }
const getTool = (page: number) => { const getTool = (page: number) => {
if (loading) { if (isLoading) {
return return
} }
setLoading(true) setIsLoading(true)
void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 }) void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })
void r_tool_get({ currentPage: page }) void r_tool_get({ currentPage: page })
@@ -487,7 +487,7 @@ const Tools = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoading(false) setIsLoading(false)
message.destroy('LOADING') message.destroy('LOADING')
if (currentStarPage === 0) { if (currentStarPage === 0) {
getStarTool(1) getStarTool(1)
@@ -496,10 +496,10 @@ const Tools = () => {
} }
const getStarTool = (page: number) => { const getStarTool = (page: number) => {
if (loading) { if (isLoading) {
return return
} }
setLoading(true) setIsLoading(true)
void message.loading({ content: '加载收藏列表中', key: 'LOADING', duration: 0 }) void message.loading({ content: '加载收藏列表中', key: 'LOADING', duration: 0 })
void r_tool_get_favorite({ currentPage: page }) void r_tool_get_favorite({ currentPage: page })
@@ -528,7 +528,7 @@ const Tools = () => {
} }
}) })
.finally(() => { .finally(() => {
setLoading(false) setIsLoading(false)
message.destroy('LOADING') message.destroy('LOADING')
}) })
} }

8
src/pages/ToolsFramework.tsx
View File

@@ -18,12 +18,12 @@ const ToolsFramework = () => {
const [isDelete, setIsDelete] = useState(false) const [isDelete, setIsDelete] = useState(false)
const [toolMenuItem, setToolMenuItem] = useState<ToolMenuItem[]>(getToolMenuItem) const [toolMenuItem, setToolMenuItem] = useState<ToolMenuItem[]>(getToolMenuItem)
const [activeItem, setActiveItem] = useState<ToolMenuItem | null>(null) const [activeItem, setActiveItem] = useState<ToolMenuItem | null>(null)
const [showDropMask, setShowDropMask] = useState(false) const [isShowDropMask, setIsShowDropMask] = useState(false)
const handleOnDragStart = ({ active }: DragStartEvent) => { const handleOnDragStart = ({ active }: DragStartEvent) => {
setActiveItem(active.data.current as ToolMenuItem) setActiveItem(active.data.current as ToolMenuItem)
if (!active.data.current?.sortable) { if (!active.data.current?.sortable) {
setShowDropMask(true) setIsShowDropMask(true)
} }
} }
@@ -73,7 +73,7 @@ const ToolsFramework = () => {
} }
setActiveItem(null) setActiveItem(null)
setShowDropMask(false) setIsShowDropMask(false)
} }
const handleOnDragCancel = () => { const handleOnDragCancel = () => {
@@ -174,7 +174,7 @@ const ToolsFramework = () => {
</DraggableOverlay> </DraggableOverlay>
</Sidebar.ItemList> </Sidebar.ItemList>
</Sidebar.Scroll> </Sidebar.Scroll>
{showDropMask && <DropMask />} {isShowDropMask && <DropMask />}
</Droppable> </Droppable>
</Sidebar> </Sidebar>
</div> </div>