添加少量注释

src/components/LineUnit.vue

 <script setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject } from 'vue';
 
 const props = defineProps(['line', 'code'])
 
-
 const { current_line, next_line, click_line, highlight_lines } = inject('app')
 
-const line = computed(() => {
+const line = computed(() => { // 行号
   return props.line
 })
-const code = computed(() => {
+const code = computed(() => { // 该行的代码
   return props.code
 })
-
-const mark = computed(() => {
+const mark = computed(() => { // 代码左侧的标记
   if (line.value == current_line.value) {
     return '→'
   }
@@ -22,23 +20,19 @@ const mark = computed(() => {
   }
   return ' '
 })
-
-const is_current = computed(() => {
+const is_current = computed(() => { // 是当前行
   return line.value == current_line.value
 })
-
-const is_next = computed(() => {
+const is_next = computed(() => { // 是下一行
   return line.value == next_line.value
 })
-
-const css_code_background = computed(() => {
+const css_code_background = computed(() => { // 对应的style
   if (Object.values(highlight_lines.value).includes(line.value)) {
     return '#FFDAD6'
   } else {
     return 'white'
   }
 })
-
 function click() {
   click_line(line.value)
 }

src/components/StackView.vue

@@ -2,15 +2,13 @@
 import { computed, inject, provide, watch, ref } from 'vue';
 import VarUnit from './VarUnit.vue';
 
-
 const { get_step, current_step } = inject('app')
 
-const current_stack = computed(() => {
+const current_stack = computed(() => { // 当前要显示的帧（主要显示stack部分）
   return get_step(current_step.value + 1)
 })
-
-const current_var_map = computed(() => {
-  let map = {}
+const current_var_map = computed(() => { // 当前帧的 地址-值 map
+  let map = {} // 错误示范，这是个对象，不是map
   function parse_array(array) {
     if (array[0] == 'C_DATA') {
       map[array[1]] = array[3]
@@ -34,12 +32,10 @@ const current_var_map = computed(() => {
   } catch (e) { }
   return map
 })
-
-const prev_stack = computed(() => {
+const prev_stack = computed(() => { // 上一帧
   return get_step(current_step.value)
 })
-
-const prev_var_map = computed(() => {
+const prev_var_map = computed(() => { // 上一帧的 地址-值 map
   let map = {}
   function parse_array(array) {
     if (array[0] == 'C_DATA') {
@@ -64,8 +60,7 @@ const prev_var_map = computed(() => {
   } catch (e) { }
   return map
 })
-
-function check_changed(value) {
+function check_changed(value) { // 检查某个地址的值是否发生了变化
   let address = value[1]
   if (address in current_var_map.value) {
     if (address in prev_var_map.value) {
@@ -78,49 +73,33 @@ function check_changed(value) {
   }
   return 'x'
 }
-
-
-const has_globals = computed(() => {
+const has_globals = computed(() => { // 当前帧是否含有全局变量
   try {
     return Object.keys(current_stack.value['globals']).length > 0
   } catch (e) { }
   return false
 })
-
-const stack_to_render = computed(() => {
+const stack_to_render = computed(() => { // 当前帧的stack
   try {
     return current_stack.value['stack_to_render']
   } catch (e) { }
 })
-
-const stdout = computed(() => {
+const stdout = computed(() => { // 从开始到当前帧的累计输出
   try {
     return current_stack.value['stdout']
   } catch (e) { }
   return ''
 })
-
-const has_stdout = computed(() => {
+const has_stdout = computed(() => { // 当前帧是否有输出
   return stdout.value.length > 0
 })
+const highlight_addresses = ref({}) // 高亮的地址及其颜色代号
 
-const highlight_addresses = ref({})
 watch(current_step, () => {
   highlight_addresses.value = {}
 })
-provide('stack_view',{highlight_addresses,check_changed,current_var_map})
-
-
-// function click() {
-//   // console.log(Object.keys(current_stack.value['globals']).length)
-//   // console.log(current_var_map.value)
-//   // for(let [key,value] of current_stack.value.globals){
-//   //     console.log(value)
-//   //   }
-//   // console.log(has_stdout.value)
-//   console.log(highlight_addresses.value)
-// }
 
+provide('stack_view',{highlight_addresses,check_changed,current_var_map})
 
 </script>
 

src/components/StdinEditor.vue

@@ -4,7 +4,6 @@ import { computed, inject } from 'vue';
 
 const { stdin_input, edit_mode } = inject('app')
 
-
 const placeholder = '将你的测试用例粘贴到这里\n(如果有的话)'
 
 </script>

src/components/StepUnit.vue

 <script setup>
 import { computed, inject } from 'vue';
 
+const { current_step, click_step, highlight_steps } = inject('app')
+
 const props = defineProps(['step'])
 const this_step = computed(() => {
   return props.step
 })
 
-const { current_step, click_step, highlight_steps } = inject('app')
-const finished = computed(() => {
+const finished = computed(() => { // 已完成
   return this_step.value <= current_step.value
 })
-const css_background_color = computed(() => {
+const css_background_color = computed(() => { // 获取对应style
   if (Object.values(highlight_steps.value).includes(this_step.value)) {
     if (finished.value) {
       return '#ffb4ab' // 已完成 高亮
@@ -25,7 +26,7 @@ const css_background_color = computed(() => {
     }
   }
 })
-const css_filter = computed(() => {
+const css_filter = computed(() => { // 在有暗色的情况下，返回不同的高亮效果 // 目前无作用
   if (finished.value) {
     return 'brightness(0.8)' // 暗色情况下改为1.5
   } else {
@@ -33,12 +34,10 @@ const css_filter = computed(() => {
   }
 })
 
-
-function click_step_unit() {
+function click_step_unit() { // 点击某个步骤块
   click_step(this_step.value)
 }
 
-
 </script>
 
 <template>

src/components/VarUnit.vue

@@ -14,13 +14,14 @@ const var_content = computed(() => {
 const changed = computed(() => {
   return props.changed
 })
-const is_changed = computed(() => {
+
+const is_changed = computed(() => { // 相对于上一帧，发生了变化
   return changed.value == 'changed'
 })
-const is_new = computed(() => {
+const is_new = computed(() => { // 相对于上一帧，是新增的
   return changed.value == 'new'
 })
-const display_name = computed(() => {
+const display_name = computed(() => { // 最终显示的变量名称
   if (is_element.value) {
     return var_name.value.substring(1)
   }
@@ -37,22 +38,22 @@ const display_name = computed(() => {
     return '$' + var_name.value.substring(0, spaceIndex)
   }
 })
-const is_data = computed(() => {
+const is_data = computed(() => { // 是普通数据
   return var_content.value[0] == 'C_DATA'
 })
-const is_array = computed(() => {
+const is_array = computed(() => { // 是数组
   return var_content.value[0] == 'C_ARRAY'
 })
-const is_struct = computed(() => {
+const is_struct = computed(() => { // 是结构体
   return var_content.value[0] == 'C_STRUCT'
 })
-const is_element = computed(() => {
+const is_element = computed(() => { // 是数组里的元素
   return var_name.value.charAt(0) == '^'
 })
-const address = computed(() => {
+const address = computed(() => { // 该变量的地址
   return var_content.value[1]
 })
-const display_content = computed(() => {
+const display_content = computed(() => { // 最终显示的变量的值
   if (is_data.value) {
     let v = var_content.value[3]
     if(is_pointer.value){
@@ -65,21 +66,21 @@ const display_content = computed(() => {
   }
   return 'error'
 })
-const array_elements = computed(() => {
+const array_elements = computed(() => { // 如果是数组，获取数组的子元素
   if (is_array.value) {
     let array = var_content.value
     array.slice(2)
     return array
   }
 })
-const struct_elements = computed(() => {
+const struct_elements = computed(() => { // 如果是结构体，获取结构体的子元素
   if (is_struct.value) {
     let struct = var_content.value
     struct.slice(3)
     return struct
   }
 })
-const is_pointer = computed(() => {
+const is_pointer = computed(() => { // 判断该变量类型是否为指针
   if (is_data.value) {
     if (var_content.value[2] == 'pointer') {
       return true
@@ -87,11 +88,8 @@ const is_pointer = computed(() => {
   }
   return false
 })
-
-
-
-const pointer_color = ref(-1)
-const css_pointer_color = computed(() => {
+const pointer_color = ref(-1) // 用数字储存对应的style
+const css_pointer_color = computed(() => { // 获取对应的style
   if (pointer_color.value < 0) {
     return 'none'
   } else {
@@ -110,8 +108,7 @@ const css_pointer_color = computed(() => {
     }
   }
 })
-
-const css_var_color = computed(() => {
+const css_var_color = computed(() => { // 获取对应的style
   if (address.value in highlight_addresses.value) {
     let c = highlight_addresses.value[address.value]
     c = c % 4
@@ -130,8 +127,7 @@ const css_var_color = computed(() => {
   }
   return 'none'
 })
-
-function highlight_pointer() {
+function highlight_pointer() { // 点击某个地址，使其和对应元素改变style
   if (is_data.value) {
     if (var_content.value[2] == 'pointer') {
       let pa = var_content.value[3]
@@ -146,8 +142,6 @@ function highlight_pointer() {
   }
 }
 
-
-
 watch(current_step, () => {
   pointer_color.value = -1
 })
@@ -155,7 +149,6 @@ watch(current_step, () => {
 </script>
 
 <template>
-  <!-- <br> -->
   <div v-if="is_data" class="big-box" :class="{ 'element-box': is_element }">
     <div class="small-box var-name">{{ display_name }}<span v-if="!is_element"> = </span><span v-else>: </span><span
         :class="{ changed: is_changed, new: is_new, pointer: is_pointer }" @click="highlight_pointer">{{ display_content
@@ -179,20 +172,13 @@ watch(current_step, () => {
 
 <style>
 .big-box {
-  /* margin: 0rem; */
-  /* border-radius: 0.3rem; */
-  /* background-color: green; */
   padding: 0.2rem;
-  /* width: auto; */
-  /* display: inline-block; */
 }
 
 .small-box {
   border-radius: 0.2rem;
   background-color: #EEF4FA;
   padding: 0.2rem;
-  /* width: auto; */
-  /* display: inline-block; */
 }
 
 .head-box {

src/components/buttons/RunButton.vue

@@ -2,7 +2,6 @@
 import { computed, inject } from 'vue';
 import Loading from './Loading.vue'
 
-
 const { send_request, code_input, try_failed, loading } = inject('app')
 
 const code_not_null = computed(() => {