添加 自动跳转到当前代码行处

src/App.vue

 <script setup>
-import { computed, provide, ref } from 'vue';
+import { computed, provide, ref, nextTick } from 'vue';
 import axios from 'axios'
 import { base_url } from '@/url.js'
 import { oj_base_url } from '@/url.js'
@@ -82,9 +82,12 @@ function parse_result() { // 解析后端返回的结果
     try_failed.value = true
     total_steps.value = 1
   }
-  current_step.value = 1
+  current_step.value = 0
   highlight_lines.value = []
   highlight_steps.value = []
+  nextTick(()=>{
+    current_step.value = 1
+  })
 }
 function remove_back_slash_r() { // 去除后端返回的code中的\r
   if ('code' in data.value) {
@@ -125,7 +128,7 @@ const current_line = computed(() => { // 播放的当前代码对应的行数
     return get_step(current_step.value)['line']
   } catch (e) { }
 })
-const prev_line = computed(() => { // 播放的下一步代码对应的行数
+const prev_line = computed(() => { // 播放的上一步代码对应的行数
   try {
     return get_step(current_step.value - 1)['line']
   } catch (e) { }

src/components/CodeViewer.vue

@@ -30,6 +30,6 @@ const code_split = computed(() => {
   height: calc(100% - 0.8rem);
   border: 0rem;
   border-radius: 0.3rem;
-  padding: 0.4rem;
+  /* padding: 0.4rem; */
 }
 </style>

src/components/LineUnit.vue

 <script setup>
-import { computed, inject } from 'vue';
+import { computed, inject, watch, getCurrentInstance } from 'vue';
 
 const props = defineProps(['line', 'code'])
 
-const { current_line, click_line, highlight_lines, total_steps, prev_line } = inject('app')
+const { current_line, click_line, highlight_lines, total_steps, prev_line, current_step } = inject('app')
 
 const line = computed(() => { // 行号
   return props.line
@@ -52,11 +52,23 @@ function click() {
   click_line(line.value)
 }
 
+watch(current_step, () => {
+  if(is_current.value){
+    current_instance.proxy.$el.scrollIntoView({
+      behavior: 'smooth',
+      inline: 'start',
+      block: 'center'
+    });
+  }
+})
+
+const current_instance = getCurrentInstance()
+
 </script>
 
 <template>
   <div class="code" @click="click">
-    <pre :class="{ blue: is_current, 'light-blue': is_prev }">{{ mark }} </pre>
+    <pre :class="{ blue: is_current, 'light-blue': is_prev }"> {{ mark }} </pre>
     <pre class="breakpoint">{{ breakpoint }} </pre>
     <pre>{{ line_string }} </pre>
     <pre :class="{ blue: is_current }">{{ code }}</pre>