update

docs/.vitepress/config.ts

@@ -37,7 +37,7 @@ export default defineConfig({
         {
           text: "课程须知",
           items: [
-            { text: "本网站", link: "/python/00/index.md" },
+            { text: "代码区", link: "/python/00/index.md" },
             { text: "自测猫", link: "/python/00/cat.md" },
             { text: "练习册", link: "/python/00/playground.md" },
             { text: "判题狗", link: "/python/00/dog.md" },
@@ -95,7 +95,7 @@ export default defineConfig({
     outlineTitle: "目录",
     sidebarMenuLabel: "侧边栏",
     returnToTopLabel: "返回顶部",
-    darkModeSwitchLabel: "浅色/暗色",
+    darkModeSwitchLabel: "浅色/深色",
 
     docFooter: { prev: "上一篇", next: "下一篇" },
   },

docs/.vitepress/theme/components/CodeEditor.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, ref} from "vue"
+import { computed, ref } from "vue"
 import { useData } from "vitepress"
 import { VPButton } from "vitepress/theme"
 import Codemirror from "vue-codemirror6"
 import { cpp } from "@codemirror/lang-cpp"
 import { python } from "@codemirror/lang-python"
-import { indentUnit } from '@codemirror/language'
+import { indentUnit } from "@codemirror/language"
 import { EditorView } from "@codemirror/view"
 import { createSubmission } from "../judge"
 import { smoothy } from "../cm-themes/smoothy"
@@ -34,6 +34,7 @@ const lang = computed(() => {
 const styleTheme = EditorView.baseTheme({
   "& .cm-scroller": {
     "font-family": "Monaco",
+    border: "2px solid var(--vp-c-divider)",
   },
   "&.cm-editor.cm-focused": {
     outline: "none",
@@ -48,6 +49,7 @@ const input = ref("")
 const output = ref("")
 
 async function run() {
+  output.value = ""
   const result = await createSubmission(
     { value: code.value, language: props.lang },
     input.value,
@@ -62,36 +64,52 @@ function reset() {
 </script>
 <template>
   <ClientOnly>
-    <p>代码区</p>
+    <div :class="$style.container">
-    <Codemirror
+      <p :class="$style.title">代码区</p>
-      v-model="code"
+      <Codemirror
-      :lang="lang"
+        v-model="code"
-      basic
+        :lang="lang"
-      tab
+        basic
-      :tab-size="4"
+        tab
-      :readonly="props.readonly"
+        :tab-size="4"
-      :extensions="[styleTheme, isDark ? oneDark : smoothy, indentUnit.of('    ')]"
+        :readonly="props.readonly"
-    />
+        :extensions="[
-    <p>输入框</p>
+          styleTheme,
-    <Codemirror
+          isDark ? oneDark : smoothy,
-      v-model="input"
+          indentUnit.of('    '),
-      basic
+        ]"
-      :extensions="[styleTheme, isDark ? oneDark : smoothy]"
+      />
-    />
+      <p :class="$style.title">输入框</p>
-    <div :class="$style.actions">
+      <Codemirror
-      <VPButton :class="$style.run" @click="run" text="运行"></VPButton>
+        v-model="input"
-      <VPButton @click="reset" theme="alt" text="重置"></VPButton>
+        minimal
+        :extensions="[styleTheme, isDark ? oneDark : smoothy]"
+      />
+      <div :class="$style.actions">
+        <VPButton :class="$style.run" @click="run" text="运行"></VPButton>
+        <VPButton @click="reset" theme="alt" text="重置"></VPButton>
+      </div>
+      <p v-if="output.length">运行结果</p>
+      <pre :class="$style.output">{{ output }}</pre>
     </div>
-    <p v-if="output.length">运行结果</p>
-    <pre>{{ output }}</pre>
   </ClientOnly>
 </template>
 <style module>
+.container {
+  background-color: var(--vp-code-block-bg);
+  padding: 8px 16px;
+  border-radius: 8px;
+}
+.title {
+  font-weight: bold;
+}
 .actions {
   margin-top: 20px;
 }
-
 .run {
   margin-right: 20px;
 }
+.output {
+  font-family: Monaco;
+}
 </style>

docs/index.md

@@ -3,8 +3,8 @@
 layout: home
 
 hero:
-  name: "代码，启动"
+  name: "徐越的编程书"
-  tagline: "简单明了"
+  tagline: "用最简单的话讲清楚编程"
   actions:
     - theme: brand
       text: Python 基础知识
@@ -14,11 +14,10 @@ hero:
       link: /cs/00/
 
 features:
-  - title: Feature A
+  - title: 派神启动
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    details: 运行代码、修改代码、输入交互
-  - title: Feature B
+  - title: 生动形象
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    details: 图文并茂、简单明了
-  - title: Feature C
+  - title: 随时随地
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    details: 手机可以看、电脑可以看、白天可以看、晚上可以看
 ---
-

docs/python/00/index.md

@@ -1,13 +1,19 @@
-# 如何使用本网站
+# 如何学习这个课程
 
-本站是用于
+::: tip
+下面的代码区域可以进行编辑并运行
+:::
 
 <script lang="ts" setup>
 const code = `
-print()
+n=input()
-x = 1
+if n == "黄岩一职":
-if x == 1:
+    print("欢迎光临")
-    print("hahh")`
+`
 </script>
 
 <editor :code="code" />
+
+```python
+print(123)
+```