122 lines
3.1 KiB
Vue
122 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from "@iconify/vue"
|
|
import { useLearnStore } from "./store"
|
|
|
|
const CodeEditor = defineAsyncComponent(
|
|
() => import("~/shared/components/CodeEditor.vue"),
|
|
)
|
|
|
|
const route = useRoute()
|
|
const learnStore = useLearnStore()
|
|
|
|
const content = shallowRef()
|
|
|
|
async function init() {
|
|
content.value = defineAsyncComponent(
|
|
() => import(`./${learnStore.dirname}/index.md`),
|
|
)
|
|
learnStore.currentTitle = learnStore.menu[learnStore.current - 1]
|
|
.label as string
|
|
|
|
try {
|
|
const raw = await import(`./${learnStore.dirname}/main.py?raw`)
|
|
learnStore.code = raw.default
|
|
learnStore.showCode = true
|
|
} catch (err) {
|
|
learnStore.code = ""
|
|
learnStore.showCode = false
|
|
}
|
|
}
|
|
|
|
watch(
|
|
() => route.params.step,
|
|
async () => {
|
|
if (route.name !== "learn") return
|
|
init()
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<n-grid :cols="2" :x-gap="24">
|
|
<n-gi :span="1">
|
|
<n-flex vertical>
|
|
<n-flex align="center">
|
|
<n-button
|
|
text
|
|
:disabled="learnStore.current == 1"
|
|
@click="learnStore.prev"
|
|
>
|
|
<Icon :width="30" icon="pepicons-pencil:arrow-left"></Icon>
|
|
</n-button>
|
|
<n-dropdown size="large" :options="learnStore.menu" trigger="click">
|
|
<n-button tertiary style="flex: 1" size="large">
|
|
<n-flex align="center">
|
|
<span style="font-weight: bold">
|
|
{{ learnStore.currentTitle }}
|
|
</span>
|
|
<Icon :width="24" icon="proicons:chevron-down"></Icon>
|
|
</n-flex>
|
|
</n-button>
|
|
</n-dropdown>
|
|
<n-button
|
|
text
|
|
:disabled="learnStore.current == learnStore.total"
|
|
@click="learnStore.next"
|
|
>
|
|
<Icon :width="30" icon="pepicons-pencil:arrow-right"></Icon>
|
|
</n-button>
|
|
</n-flex>
|
|
<n-flex vertical size="large">
|
|
<Component :is="content"></Component>
|
|
<n-flex justify="space-between">
|
|
<div style="flex: 1">
|
|
<n-button
|
|
block
|
|
style="height: 60px"
|
|
v-if="learnStore.current !== 1"
|
|
@click="learnStore.prev"
|
|
>
|
|
上一课时
|
|
</n-button>
|
|
</div>
|
|
<div style="flex: 1">
|
|
<n-button
|
|
block
|
|
style="height: 60px"
|
|
v-if="learnStore.current !== learnStore.total"
|
|
@click="learnStore.next"
|
|
>
|
|
下一课时
|
|
</n-button>
|
|
</div>
|
|
</n-flex>
|
|
</n-flex>
|
|
</n-flex>
|
|
</n-gi>
|
|
<n-gi :span="1">
|
|
<n-flex vertical>
|
|
<CodeEditor
|
|
v-show="learnStore.showCode"
|
|
language="Python3"
|
|
v-model="learnStore.code"
|
|
/>
|
|
</n-flex>
|
|
</n-gi>
|
|
</n-grid>
|
|
</template>
|
|
|
|
<style>
|
|
html.dark .shiki,
|
|
html.dark .shiki span {
|
|
color: var(--shiki-dark) !important;
|
|
background-color: var(--shiki-dark-bg) !important;
|
|
}
|
|
|
|
.markdown-body code {
|
|
font-size: 20px;
|
|
font-family: "Monaco";
|
|
}
|
|
</style>
|