Add code and execute page to tool management

2024-02-02 17:42:40 +08:00
parent 06213d3414
commit 838c37595d
18 changed files with 770 additions and 30 deletions
--- a/src/pages/System/Tools/Code.tsx
+++ b/src/pages/System/Tools/Code.tsx
@@ -0,0 +1,91 @@
+import { r_sys_tool_get_one } from '@/services/system.tsx'
+import '@/assets/css/pages/system/tools/code.scss'
+import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import Playground from '@/components/Playground'
+import { useState } from 'react'
+import { IFiles } from '@/components/Playground/shared.ts'
+import { base64ToFiles } from '@/components/Playground/files.ts'
+import FitFullscreen from '@/components/common/FitFullscreen.tsx'
+import Card from '@/components/common/Card.tsx'
+import Draggable from 'react-draggable'
+import Icon from '@ant-design/icons'
+
+const Code = () => {
+    const navigate = useNavigate()
+    const { id } = useParams()
+    const [loading, setLoading] = useState(false)
+    const [files, setFiles] = useState<IFiles>({})
+    const [selectedFileName, setSelectedFileName] = useState('')
+
+    const handleOnRunTool = () => {
+        navigate(`/system/tools/execute/${id}`)
+    }
+
+    const render = (toolVo: ToolVo) => {
+        try {
+            setFiles(base64ToFiles(toolVo.source.data!))
+            setSelectedFileName(toolVo.entryPoint)
+        } catch (e) {
+            void message.error('载入工具失败')
+        }
+    }
+
+    const getTool = () => {
+        if (loading) {
+            return
+        }
+        setLoading(true)
+        void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
+
+        void r_sys_tool_get_one(id!)
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        render(response.data!)
+                        break
+                    case DATABASE_NO_RECORD_FOUND:
+                        void message.error('未找到指定工具')
+                        setTimeout(() => {
+                            navigate(-1)
+                        }, 3000)
+                        break
+                    default:
+                        void message.error('获取工具信息失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoading(false)
+                message.destroy('LOADING')
+            })
+    }
+
+    useEffect(() => {
+        getTool()
+    }, [])
+
+    return (
+        <FitFullscreen data-component={'system-tools-code'}>
+            <Card>
+                <Playground.CodeEditor
+                    readonly
+                    files={files}
+                    selectedFileName={selectedFileName}
+                    onSelectedFileChange={setSelectedFileName}
+                />
+            </Card>
+
+            <Draggable bounds={'#root'}>
+                <div className={'draggable-content'}>
+                    <AntdFloatButton
+                        type={'primary'}
+                        icon={<Icon component={IconOxygenExecute} />}
+                        onClick={handleOnRunTool}
+                    />
+                </div>
+            </Draggable>
+        </FitFullscreen>
+    )
+}
+
+export default Code