添加 上一步提示

src/App.vue

@@ -125,9 +125,9 @@ const current_line = computed(() => { // 播放的当前代码对应的行数
     return get_step(current_step.value)['line']
   } catch (e) { }
 })
-const next_line = computed(() => { // 播放的下一步代码对应的行数
+const prev_line = computed(() => { // 播放的下一步代码对应的行数
   try {
-    return get_step(current_step.value + 1)['line']
+    return get_step(current_step.value - 1)['line']
   } catch (e) { }
 })
 const try_failed = ref(false) // 尝试运行代码失败
@@ -236,7 +236,7 @@ provide('app', {
   exception_msg,
   get_step,
   current_line,
-  next_line,
+  prev_line,
   try_failed,
   total_steps,
   current_step,

src/components/LineUnit.vue

@@ -3,7 +3,7 @@ import { computed, inject } from 'vue';
 
 const props = defineProps(['line', 'code'])
 
-const { current_line, click_line, highlight_lines, total_steps } = inject('app')
+const { current_line, click_line, highlight_lines, total_steps, prev_line } = inject('app')
 
 const line = computed(() => { // 行号
   return props.line
@@ -27,11 +27,17 @@ const mark = computed(() => { // 代码左侧的标记
   if (line.value == current_line.value) {
     return '→'
   }
+  if (line.value == prev_line.value) {
+    return '↗'
+  }
   return ' '
 })
 const is_current = computed(() => { // 是当前行
   return line.value == current_line.value
 })
+const is_prev = computed(()=>{
+  return line.value == prev_line.value
+})
 const breakpoint = computed(()=>{
   if (Object.values(highlight_lines.value).includes(line.value)) {
     return ''
@@ -47,7 +53,7 @@ function click() {
 
 <template>
   <div class="code" @click="click">
-    <pre :class="{ blue: is_current }">{{ 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>
@@ -63,6 +69,10 @@ pre {
   color: #00aeff;
 }
 
+.light-blue {
+  color: #c0e8ff;
+}
+
 .code {
   border: 0rem;
   border-radius: 0.3rem;