新增自学模块

src/components.d.ts

@@ -56,6 +56,7 @@ declare module 'vue' {
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
+    NText: typeof import('naive-ui')['NText']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NUpload: typeof import('naive-ui')['NUpload']
     RouterLink: typeof import('vue-router')['RouterLink']

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,
+  }
+})

src/routes.ts

@@ -89,6 +89,11 @@ export const ojs: RouteRecordRaw = {
       component: () => import("oj/user/message.vue"),
       meta: { requiresAuth: true },
     },
+    {
+      path: "learn/:step+",
+      component: () => import("learn/index.vue"),
+      name: "learn",
+    },
   ],
 }
 

src/shared/components/Header.vue

@@ -4,7 +4,7 @@ import { RouterLink } from "vue-router"
 import { isDesktop, isMobile } from "~/shared/composables/breakpoints"
 import { toggleLogin, toggleSignup } from "~/shared/composables/modal"
 import { screenMode, switchScreenMode } from "~/shared/composables/switchScreen"
-import { avatar, getRandomAvatar } from "~/utils/constants"
+import { avatar } from "~/utils/constants"
 import { logout } from "../api"
 import { useConfigStore } from "../store/config"
 import { useUserStore } from "../store/user"
@@ -36,6 +36,12 @@ onMounted(() => {
 })
 
 const menus = computed<MenuOption[]>(() => [
+  {
+    label: () => h(RouterLink, { to: "/learn/01" }, { default: () => "自学" }),
+    key: "learn",
+    icon: renderIcon("devicon:python"),
+    show: isDesktop.value,
+  },
   {
     label: () => h(RouterLink, { to: "/" }, { default: () => "题库" }),
     key: "problem",
@@ -138,9 +144,7 @@ function goHome() {
       <n-dropdown v-if="isMobile" :options="menus" size="large">
         <n-button>
           <Icon icon="twemoji:artist-palette" height="20"></Icon>
-          <span style="padding-left: 8px">
-            菜单
-          </span>
+          <span style="padding-left: 8px"> 菜单 </span>
         </n-button>
       </n-dropdown>
       <n-button

src/shared/layout/default.vue

@@ -10,7 +10,7 @@ import Signup from "../components/Signup.vue"
     <n-layout-header bordered class="header">
       <Header />
     </n-layout-header>
-    <n-layout-content content-style="padding: 16px; overflow-x: initial">
+    <n-layout-content content-style="padding: 16px; overflow-x: initial; max-width: 2000px; margin: 0 auto;">
       <router-view></router-view>
     </n-layout-content>
     <Login />

src/utils/constants.ts

@@ -121,6 +121,7 @@ export const PROBLEM_PERMISSION = {
 export const STORAGE_KEY = {
   AUTHED: "authed",
   LANGUAGE: "problemLanguage",
+  LEARN_CURRENT_STEP: "learnStep",
   ADMIN_PROBLEM: "adminProblem",
   ADMIN_PROBLEM_TAGS: "adminProblemTags",
 }