102 lines
2.5 KiB
Vue
102 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { isDesktop } from "~/shared/composables/breakpoints"
|
|
import { code } from "~/shared/composables/learn"
|
|
import { useLearnStore } from "./store"
|
|
|
|
const CodeEditor = defineAsyncComponent(() => import("~/shared/components/CodeEditor.vue"))
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const learnStore = useLearnStore()
|
|
|
|
const Mds = Array.from({ length: learnStore.total }, (_, i) => i + 1).map((v) =>
|
|
defineAsyncComponent(() => import(`./step-${v}/index.md`)),
|
|
)
|
|
|
|
watch(
|
|
() => route.params.step,
|
|
async (value) => {
|
|
if (route.name !== "learn") return
|
|
try {
|
|
const raw = await import(`./${value[0]}/main.c?raw`)
|
|
code.value = raw.default
|
|
} catch (err) {
|
|
router.replace("/learn/step-1")
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<n-grid v-if="isDesktop" :cols="22">
|
|
<n-gi :span="2">
|
|
<n-scrollbar style="max-height: calc(100vh - 92px)">
|
|
<n-space vertical>
|
|
<span>目录</span>
|
|
<n-button
|
|
text
|
|
:type="learnStore.current === title.key ? 'primary' : 'default'"
|
|
v-for="title in learnStore.menu"
|
|
:key="title.key"
|
|
@click="title.props?.onClick"
|
|
>
|
|
{{ title.label }}
|
|
</n-button>
|
|
</n-space>
|
|
</n-scrollbar>
|
|
</n-gi>
|
|
<n-gi :span="10">
|
|
<n-scrollbar style="max-height: calc(100vh - 92px)">
|
|
<component :is="Mds[learnStore.current - 1]"></component>
|
|
</n-scrollbar>
|
|
</n-gi>
|
|
<n-gi :span="10">
|
|
<CodeEditor v-model="code" height="calc(100vh - 92px)" />
|
|
</n-gi>
|
|
</n-grid>
|
|
<div v-else>
|
|
<n-scrollbar style="height: calc(50vh - 42px)">
|
|
<component :is="Mds[learnStore.current - 1]"></component>
|
|
</n-scrollbar>
|
|
<CodeEditor v-model="code" height="calc(50vh - 42px)" />
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.__layout-dark .vitesse-light {
|
|
display: none;
|
|
}
|
|
|
|
.__layout .vitesse-dark {
|
|
display: none;
|
|
}
|
|
|
|
.shiki .highlighted {
|
|
background: #7f7f7f20;
|
|
display: block;
|
|
margin: 0 -1rem;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.markdown-body code[v-pre] {
|
|
font-size: 20px;
|
|
font-family: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono",
|
|
"Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
|
display: flex;
|
|
flex-direction: column;
|
|
counter-reset: step;
|
|
counter-increment: step 0;
|
|
}
|
|
|
|
.markdown-body code[v-pre] .line:not(:last-child)::before {
|
|
content: counter(step);
|
|
counter-increment: step;
|
|
width: 1rem;
|
|
margin-right: 1.5rem;
|
|
display: inline-block;
|
|
text-align: right;
|
|
color: rgba(115, 138, 148, 0.4);
|
|
}
|
|
</style>
|