新增自学模块

2024-10-13 18:06:42 +08:00
parent e7ac3cf94b
commit d082310e2d
15 changed files with 885 additions and 72 deletions
--- a/src/learn/index.vue
+++ b/src/learn/index.vue
@@ -0,0 +1,121 @@
+<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>