优化断点跳转布局

src/App.vue

@@ -311,7 +311,7 @@ provide('app', {
   /* 黑魔法，勿动 */
   display: grid;
   grid-template-columns: 34% 66%;
-  grid-template-rows: 80% 20%;
+  grid-template-rows: 74% 26%;
   height: 100%;
   width: 100%;
 }

src/components/ControlPanel.vue

@@ -31,6 +31,7 @@ const command_available = computed(()=>{
     <PrevButton v-show="!edit_mode" />
     <NextButton v-show="!edit_mode" />
     <CommandButton v-show="command_available && edit_mode" />
+    <br v-show="!edit_mode">
     <NextBreakpoint v-show="!edit_mode" />
     <PrevBreakpoint v-show="!edit_mode" />
   </div>

src/components/buttons/NextBreakpoint.vue

 <script setup>
-import { inject } from 'vue';
+import { computed, inject } from 'vue';
 
 const { current_step, highlight_steps } = inject('app')
 
+const clickable = computed(()=>{
+  return highlight_steps.value.length == 0
+})
+
 function click() {
   let target
   let success = false
@@ -23,7 +27,7 @@ function click() {
 </script>
 
 <template>
-  <button class="button" @click="click">下个断点</button>
+  <button class="button" @click="click" :disabled="clickable">下个断点</button>
 </template>
 
 <style scoped>

src/components/buttons/PrevBreakpoint.vue

 <script setup>
-import { inject } from 'vue';
+import { computed, inject } from 'vue';
 
 const { current_step, highlight_steps } = inject('app')
 
+const clickable = computed(()=>{
+  return highlight_steps.value.length == 0
+})
+
 function click() {
   let target
   let success = false
@@ -23,7 +27,7 @@ function click() {
 </script>
 
 <template>
-  <button class="button" @click="click">上个断点</button>
+  <button class="button" @click="click" :disabled="clickable">上个断点</button>
 </template>
 
 <style scoped>