@@ -26,7 +26,7 @@ import {
2626 updateConfig ,
2727 checkPluginAvailability ,
2828} from '../../services/platform/controller' ;
29- import { PluginConfig } from '../../services/platform/platform.d' ;
29+ import { PluginConfig , LogBody } from '../../services/platform/platform.d' ;
3030import MessageModal from '../MessageModal' ;
3131import { useSystemStore } from '../../stores/useSystemStore' ;
3232
@@ -40,6 +40,7 @@ const PluginSettings = ({
4040 // TODO: 后面需要把这个参数说明放到文档中
4141
4242 const [ code , setCode ] = useState < string | undefined > ( PluginExampleCode ) ;
43+ const [ consoleLogs , setConsoleLogs ] = useState < LogBody [ ] > ( [ ] ) ;
4344 const { isOpen, onOpen, onClose } = useDisclosure ( ) ;
4445 const [ isOpenMessageModal , setIsOpenMessageModal ] = useState ( false ) ;
4546 const cancelRef = React . useRef < any > ( ) ;
@@ -152,10 +153,16 @@ const PluginSettings = ({
152153 provideCompletionItems : ( ) => {
153154 const suggestions = [
154155 {
155- label : 'cc.get ' ,
156+ label : 'require ' ,
156157 kind : monaco . languages . CompletionItemKind . Function ,
157- insertText : 'cc.get(ctx)' ,
158- documentation : '从上下文中取得当前使用的配置' ,
158+ insertText : 'require()' ,
159+ documentation : '引入模块' ,
160+ } ,
161+ {
162+ label : 'console' ,
163+ kind : monaco . languages . CompletionItemKind . Function ,
164+ insertText : 'console.log()' ,
165+ documentation : '打印日志' ,
159166 } ,
160167 ] ;
161168 return { suggestions } ;
@@ -187,6 +194,8 @@ const PluginSettings = ({
187194 messages,
188195 } ) ;
189196
197+ setConsoleLogs ( resp . consoleOutput || [ ] ) ;
198+
190199 if ( resp . status ) {
191200 toast ( {
192201 title : '插件测试通过' ,
@@ -264,56 +273,70 @@ const PluginSettings = ({
264273 >
265274 启用自定义代码
266275 </ Switch >
267- < Button
268- onClick = { handleCheckPlugin }
269- colorScheme = "green"
270- size = "sm"
271- ml = { 4 }
272- >
273- 测试插件
274- </ Button >
275276 </ HStack >
276277 { config . usePlugin && (
277278 < >
278- < Box width = "100%" height = "400px" >
279- < Editor
280- height = "100%"
281- defaultLanguage = "javascript"
282- value = { code }
283- onChange = { setCode }
284- beforeMount = { handleEditorWillMount }
285- theme = "vs-dark"
286- />
287- </ Box >
288-
289279 < HStack >
290280 < Button
291281 onClick = { ( ) => {
292282 handleSaveCode ( ) ;
293283 } }
284+ size = "sm"
294285 colorScheme = "orange"
295286 >
296287 保存代码
297288 </ Button >
298289
299- < Button onClick = { handleDefaultCode } colorScheme = "red" >
290+ < Button onClick = { handleDefaultCode } colorScheme = "red" size = "sm" >
300291 重置代码
301292 </ Button >
302293
303294 < Button
304295 onClick = { ( ) => {
305296 setIsOpenMessageModal ( true ) ;
306297 } }
298+ size = "sm"
307299 colorScheme = "teal"
308300 >
309301 配置测试用例
310302 </ Button >
311-
312- < Button onClick = { handleExportCode } colorScheme = "blue" >
303+ < Button onClick = { handleCheckPlugin } colorScheme = "green" size = "sm" >
304+ 测试插件
305+ </ Button >
306+ < Button onClick = { handleExportCode } colorScheme = "blue" size = "sm" >
313307 导出代码
314308 </ Button >
315309 </ HStack >
316310
311+ < Box width = "100%" height = "400px" >
312+ < Editor
313+ height = "100%"
314+ defaultLanguage = "javascript"
315+ value = { code }
316+ onChange = { setCode }
317+ beforeMount = { handleEditorWillMount }
318+ theme = "vs-dark"
319+ />
320+ </ Box >
321+
322+ < Divider />
323+
324+ { /* 展示日志 */ }
325+ { consoleLogs && consoleLogs . length > 0 && (
326+ < >
327+ < Text fontSize = "1xl" fontWeight = "bold" >
328+ 插件执行日志:
329+ </ Text >
330+ < Box height = "200px" overflowY = "auto" >
331+ { consoleLogs . map ( ( log , index ) => (
332+ < Text key = { index } >
333+ { log . level } { log . time } { log . message }
334+ </ Text >
335+ ) ) }
336+ </ Box >
337+ </ >
338+ ) }
339+
317340 < AlertDialog
318341 isOpen = { isOpen }
319342 leastDestructiveRef = { cancelRef }
0 commit comments