新增自学模块

src/learn/01/index.md

@@ -0,0 +1,40 @@
+## 第一： print 后面跟着英文括号，不要写等号！！！
+
+### 下面是错误的：
+
+```py
+print=("China")
+```
+
+## 第二： 所有的符号都是英文的
+
+### 下面是错误的：
+
+```py
+print（"China"）
+print（“China”）
+```
+
+
+## 第三：下面的写法是等价的
+
+### 第一种：
+```py
+a="China"
+print(a)
+```
+
+### 第二种：
+```py
+print("China")
+```
+
+## 第四：输出有几行就需要几个print()
+
+### 输出三行你好：
+
+```py
+print("你好")
+print("你好")
+print("你好")
+```

src/learn/02/index.md

@@ -0,0 +1 @@
+还没有写好

src/learn/03/index.md

@@ -0,0 +1,24 @@
+遇到以下情况：
+
+## 输入两个整数，用空格隔开。比如：10 20
+
+写法如下：
+
+```py
+n = input().split()
+
+a = int(n[0])
+b = int(n[1])
+```
+
+
+## 要是小数。比如：2.33 5.18
+
+写法如下：
+
+```py
+n = input().split()
+
+a = float(n[0])
+b = float(n[1])
+```

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>

src/learn/menu.md

@@ -0,0 +1,3 @@
+输出函数 print() 的使用
+输入函数 input() 需要注意的地方
+数字用空格隔开，如何写

src/learn/store.ts

@@ -0,0 +1,65 @@
+import sidebar from "./menu.md?raw"
+
+export const useLearnStore = defineStore("learn", () => {
+  const route = useRoute()
+  const router = useRouter()
+
+  const code = ref("")
+  const input = ref("")
+  const output = ref("黄岩一职")
+  const showCode = ref(true)
+  const currentTitle = ref("")
+
+  const current = computed(() => {
+    if (!route.params.step || !route.params.step.length) return 1
+    else {
+      return parseInt(route.params.step[0])
+    }
+  })
+
+  const dirname = computed(() => current.value.toString().padStart(2, "0"))
+
+  const menu: DropdownOption[] = sidebar
+    .split("\n")
+    .filter((title) => !!title)
+    .map((title: string, index) => {
+      const dirname = (index + 1).toString().padStart(2, "0")
+      const prefix = `第 ${index + 1} 课：`
+      return {
+        key: dirname,
+        label: prefix + title,
+        props: {
+          onClick: () => {
+            router.push(`/learn/${dirname}`)
+            currentTitle.value = prefix + title
+          },
+        },
+      }
+    })
+
+  function next() {
+    if (current.value === menu.length) return
+    const dest = (current.value + 1).toString().padStart(2, "0")
+    router.push("/learn/" + dest)
+  }
+
+  function prev() {
+    if (current.value === 1) return
+    const dest = (current.value - 1).toString().padStart(2, "0")
+    router.push("/learn/" + dest)
+  }
+
+  return {
+    code,
+    input,
+    output,
+    showCode,
+    currentTitle,
+    total: menu.length,
+    current,
+    dirname,
+    menu,
+    next,
+    prev,
+  }
+})