修改断点风格，增加行号，移除“下一行”提示

src/App.vue

@@ -75,7 +75,7 @@ function parse_result() { // 解析后端返回的结果
   remove_back_slash_r()
   loading.value = false
   if (success.value) {
-    total_steps.value = data.value['trace'].length - 1
+    total_steps.value = data.value['trace'].length
     try_failed.value = false
     edit_mode.value = false
   } else {
@@ -113,8 +113,8 @@ function get_step(_step) { // 获取某一步的运行结果(1~n)
   if (_step < 1) {
     _step = 1
   }
-  if (_step > total_steps.value + 1) {
-    _step = total_steps.value + 1
+  if (_step > total_steps.value) {
+    _step = total_steps.value
   }
   try {
     return data.value['trace'][_step - 1]
@@ -140,7 +140,7 @@ function click_step(clicked) { // 跳转到某一步骤
 const highlight_lines = ref([]) // 高亮的代码行
 function enable_line(clicked) { // 高亮某一行
   let actived = 0;
-  for (let i = 1; i <= total_steps.value + 1; i++) {
+  for (let i = 1; i <= total_steps.value; i++) {
     if (get_step(i)['line'] == clicked) {
       highlight_steps.value.push(i)
       actived += 1
@@ -151,7 +151,7 @@ function enable_line(clicked) { // 高亮某一行
   }
 }
 function disable_line(clicked) { // 取消高亮某一行
-  for (let i = 1; i <= total_steps.value + 1; i++) {
+  for (let i = 1; i <= total_steps.value; i++) {
     if (get_step(i)['line'] == clicked) {
       highlight_steps.value = highlight_steps.value.filter(item => item != i)
     }

src/components/LineUnit.vue

@@ -3,11 +3,23 @@ import { computed, inject } from 'vue';
 
 const props = defineProps(['line', 'code'])
 
-const { current_line, next_line, click_line, highlight_lines } = inject('app')
+const { current_line, click_line, highlight_lines, total_steps } = inject('app')
 
 const line = computed(() => { // 行号
   return props.line
 })
+const line_string = computed(()=>{
+  const zero_count = String(total_steps.value).length - String(line.value).length
+  if(zero_count <= 0){
+    return line.value
+  }else{
+    let padding = '';
+    for (let i = 0; i < zero_count; i++) {
+        padding += '0';
+    }
+    return padding + String(line.value)
+  }
+})
 const code = computed(() => { // 该行的代码
   return props.code
 })
@@ -15,22 +27,16 @@ const mark = computed(() => { // 代码左侧的标记
   if (line.value == current_line.value) {
     return '→'
   }
-  if (line.value == next_line.value) {
-    return '→'
-  }
   return ' '
 })
 const is_current = computed(() => { // 是当前行
   return line.value == current_line.value
 })
-const is_next = computed(() => { // 是下一行
-  return line.value == next_line.value
-})
-const css_code_background = computed(() => { // 对应的style
+const breakpoint = computed(()=>{
   if (Object.values(highlight_lines.value).includes(line.value)) {
-    return '#FFDAD6'
+    return ''
   } else {
-    return 'white'
+    return ' '
   }
 })
 function click() {
@@ -40,9 +46,11 @@ function click() {
 </script>
 
 <template>
-  <div>
-    <pre :class="{ blue: is_current, 'light-blue': is_next }">{{ mark }} </pre>
-    <pre :class="{ blue: is_current }" class="code" @click="click">{{ code }}</pre>
+  <div class="code" @click="click">
+    <pre :class="{ blue: is_current }">{{ mark }} </pre>
+    <pre class="breakpoint">{{ breakpoint }} </pre>
+    <pre>{{ line_string }} </pre>
+    <pre :class="{ blue: is_current }">{{ code }}</pre>
   </div>
 </template>
 
@@ -55,19 +63,15 @@ pre {
   color: #00aeff;
 }
 
-.light-blue {
-  color: #c0e8ff;
-}
-
 .code {
   border: 0rem;
   border-radius: 0.3rem;
-  background-color: v-bind(css_code_background);
+  background-color: white;
   transition-duration: 200ms;
+  width: fit-content;
 }
 
 .code:hover {
-  /* background-color: #FFB4AB; */
   filter: brightness(0.9);
   transition-duration: 200ms;
 }
@@ -76,4 +80,8 @@ pre {
   filter: brightness(0.8);
   transition-duration: 200ms;
 }
+
+.breakpoint{
+  color: red;
+}
 </style>
\ No newline at end of file

src/components/StackView.vue

@@ -5,7 +5,7 @@ import VarUnit from './VarUnit.vue';
 const { get_step, current_step, feature_show_new_vars } = inject('app')
 
 const current_stack = computed(() => { // 当前要显示的帧（主要显示stack部分）
-  return get_step(current_step.value + 1)
+  return get_step(current_step.value)
 })
 const current_var_map = computed(() => { // 当前帧的 地址-值 map
   let map = {} // 错误示范，这是个对象，不是map