增加左右方向键控制

src/App.vue

 <script setup>
-import { computed, provide, ref, nextTick } from 'vue';
+import { computed, provide, ref, nextTick, onMounted } from 'vue';
 import axios from 'axios'
 import { base_url } from '@/url.js'
 import { oj_base_url } from '@/url.js'
@@ -240,6 +240,31 @@ function get_oj_solution_id(){ // 从网址获取solutionID
 }
 get_oj_solution_id()
 
+function click_next() {
+  if (current_step.value < total_steps.value) {
+    current_step.value += 1
+  }
+}
+function click_prev() {
+  if (current_step.value > 1) {
+    current_step.value -= 1
+  }
+}
+
+onMounted(()=>{
+  const handleKeyDown = (event) => {
+    if(!edit_mode.value){
+      if (event.key === 'ArrowRight') {
+        click_next()
+      }
+      if (event.key === 'ArrowLeft') {
+        click_prev()
+      }
+    }
+  }
+  window.addEventListener('keydown', handleKeyDown)
+})
+
 const feature_show_new_vars = ref(false)
 
 provide('app', {
@@ -263,7 +288,9 @@ provide('app', {
   click_line,
   edit_mode,
   feature_show_new_vars,
-  solution_output
+  solution_output,
+  click_next,
+  click_prev
 })
 </script>
 

src/assets/button.css

@@ -18,6 +18,10 @@
   transition-duration: 200ms;
 }
 
-button:disabled {
+.button:focus {
+  outline: none;
+}
+
+.button:disabled {
   opacity: 0.5;
 }

src/components/buttons/NextButton.vue

 <script setup>
 import { inject } from 'vue';
 
-const { current_step, total_steps } = inject('app')
-
-function click() {
-  if (current_step.value < total_steps.value) {
-    current_step.value += 1
-  }
-}
+const { current_step, total_steps, click_next } = inject('app')
 
 </script>
 
 <template>
-  <button class="button" @click="click">下一步</button>
+  <button class="button" @click="click_next">下一步</button>
 </template>
 
 <style scoped>

src/components/buttons/PrevButton.vue

@@ -2,18 +2,12 @@
 
 import { inject } from 'vue';
 
-const { current_step } = inject('app')
-
-function click() {
-  if (current_step.value > 1) {
-    current_step.value -= 1
-  }
-}
+const { current_step, click_prev } = inject('app')
 
 </script>
 
 <template>
-  <button class="button" @click="click">上一步</button>
+  <button class="button" @click="click_prev">上一步</button>
 </template>
 
 <style scoped>