新增断点跳转

src/assets/button.css

@@ -5,6 +5,7 @@
   padding: 0.5rem;
   transition-duration: 200ms;
   margin-right: 0.8rem;
+  margin-bottom: 0.8rem;
 }
 
 .button:hover {

src/components/ControlPanel.vue

@@ -6,7 +6,8 @@ import RunButton from './buttons/RunButton.vue';
 import PrevButton from './buttons/PrevButton.vue';
 import NextButton from './buttons/NextButton.vue';
 import CommandButton from './buttons/CommandButton.vue';
-
+import NextBreakpoint from './buttons/NextBreakpoint.vue';
+import PrevBreakpoint from './buttons/PrevBreakpoint.vue';
 
 const { total_steps, edit_mode, stdin_input } = inject('app')
 
@@ -29,7 +30,9 @@ const command_available = computed(()=>{
     <RunButton v-show="edit_mode" />
     <PrevButton v-show="!edit_mode" />
     <NextButton v-show="!edit_mode" />
-    <CommandButton v-show="command_available" />
+    <CommandButton v-show="command_available && edit_mode" />
+    <NextBreakpoint v-show="!edit_mode" />
+    <PrevBreakpoint v-show="!edit_mode" />
   </div>
 </template>
 

src/components/buttons/EditButton.vue

@@ -11,7 +11,7 @@ function click() {
 </script>
 
 <template>
-  <button class="button" @click="click">编辑代码</button>
+  <button class="button" @click="click">修改代码</button>
 </template>
 
 <style scoped>

src/components/buttons/NextBreakpoint.vue

+<script setup>
+import { inject } from 'vue';
+
+const { current_step, highlight_steps } = inject('app')
+
+function click() {
+  let target
+  let success = false
+  let distance = Infinity
+  for(let element of highlight_steps.value){
+    let this_distance = element - current_step.value
+    if(this_distance > 0 && this_distance < distance){
+      distance = this_distance
+      target = element
+      success = true
+    }
+  }
+  if(success){
+    current_step.value = target
+  }
+}
+
+</script>
+
+<template>
+  <button class="button" @click="click">下个断点</button>
+</template>
+
+<style scoped>
+@import '@/assets/button.css';
+</style>
\ No newline at end of file

src/components/buttons/PrevBreakpoint.vue

+<script setup>
+import { inject } from 'vue';
+
+const { current_step, highlight_steps } = inject('app')
+
+function click() {
+  let target
+  let success = false
+  let distance = Infinity
+  for(let element of highlight_steps.value){
+    let this_distance = current_step.value - element
+    if(this_distance > 0 && this_distance < distance){
+      distance = this_distance
+      target = element
+      success = true
+    }
+  }
+  if(success){
+    current_step.value = target
+  }
+}
+
+</script>
+
+<template>
+  <button class="button" @click="click">上个断点</button>
+</template>
+
+<style scoped>
+@import '@/assets/button.css';
+</style>
\ No newline at end of file