in studio/components/toolbar/index.tsx [36:121]
setup(props, { emit }) {
const { t } = useLocale()
const fileStore = useFileStore()
const { setLogHeight } = useLogHeight()
const webSocketStore = useWebSocketStore()
const handleSave = async () => {
const file = fileStore.getCurrentFile
await saveFile(file.id, { content: file.content })
fileStore.updateContent(file)
}
const runFlag = computed(() => {
const file = fileStore.getCurrentFile
return file && !!file.flag
})
const handleRun = () => {
const file = fileStore.getCurrentFile
runFile(file.id)
fileStore.run()
const socket = webSocketStore.open(1, file.id)
socket.on('log', (data) => (file.log += data))
setLogHeight(400)
}
const handleStop = () => {
const file = fileStore.getCurrentFile
webSocketStore.close(file.id)
fileStore.stop()
stopFile(file.id)
}
const handleFullscreen = () => {
emit('fullscreen')
}
return () => (
<div class={styles.toolbar}>
<div class={styles.operate}>
<NTooltip trigger='hover'>
{{
trigger: () => (
<NButton text style={{ fontSize: '18px' }} onClick={handleSave}>
<NIcon>
<SaveOutlined />
</NIcon>
</NButton>
),
default: () => t('save')
}}
</NTooltip>
</div>
<div class={styles.operate}>
<NTooltip trigger='hover'>
{{
trigger: () => (
<NButton
text
style={{ fontSize: '18px' }}
onClick={runFlag.value ? handleStop : handleRun}
>
<NIcon>
{runFlag.value ? (
<PauseCircleOutlined />
) : (
<PlayCircleOutlined />
)}
</NIcon>
</NButton>
),
default: () => (runFlag.value ? t('stop') : t('run'))
}}
</NTooltip>
</div>
<div class={styles.operate}>
<NButton text style={{ fontSize: '18px' }} onClick={handleFullscreen}>
<NIcon>
<FullscreenOutlined />
</NIcon>
</NButton>
</div>
</div>
)
}