mirror of
https://github.com/linux-odyssey/linux-odyssey.git
synced 2026-11-05 19:20:12 +08:00
Justin Lin
c7e6d31b9c
fix: use ReconnectWebSocket to make the connection more stable fix: typescript error on importing css in vue
50 lines
1.5 KiB
Vue
50 lines
1.5 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import MarkdownText from '../MarkdownText.vue'
|
||
import useSession from '../../store/session'
|
||
|
||
const sessionStore = useSession()
|
||
const tasks = computed(() => {
|
||
console.log('session', sessionStore.session)
|
||
return sessionStore.session?.tasks.map((task) => {
|
||
const prefix = task.completed ? '✓' : '➤'
|
||
const color = task.completed ? 'text-text-primary' : 'text-text'
|
||
return {
|
||
...task,
|
||
class: `${color} markdown-content`,
|
||
content: `${prefix} ${task.name}`,
|
||
}
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="h-full w-full max-h-full">
|
||
<p id="topic" class="text-text font-black" v-if="sessionStore.quest">
|
||
{{ sessionStore.quest.title }}
|
||
<a
|
||
:href="`http://localhost/terminal/${sessionStore.session?.containerName}?token=${sessionStore.session?.token}`"
|
||
>
|
||
Open Terminal
|
||
</a>
|
||
</p>
|
||
<br />
|
||
<div>
|
||
<div v-if="sessionStore.quest" class="whitespace-pre-wrap">
|
||
<MarkdownText
|
||
class="text-text markdown-content"
|
||
:content="sessionStore.quest.instruction"
|
||
/>
|
||
<br />
|
||
<p id="tasks" class="text-text">任務：</p>
|
||
<ul v-if="sessionStore.session">
|
||
<li v-for="task in tasks" :key="task.id">
|
||
<MarkdownText :class="task.class" :content="task.content" />
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<p class="text-text" v-else>Loading...</p>
|
||
</div>
|
||
</div>
|
||
</template>
|