调整布局

src/App.vue

@@ -167,11 +167,11 @@ function click_line(clicked) { // 点击某一行
 }
 const edit_mode = ref(true) // 编辑模式，对应的是播放模式
 const loading = ref(false) // 发送请求等待后端返回的状态
-
-function getMD5(string){ // not provide
+const solution_output = ref('')
+function getMD5(string){ // 获取字符串的md5
   return CryptoJS.MD5(string).toString(CryptoJS.enc.Hex)
 }
-function generate_random_string(length = 32) { // not provide
+function generate_random_string(length = 32) { // 生成32位随机字符串
   const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   let result = '';
   for (let i = 0; i < length; i++) {
@@ -179,7 +179,7 @@ function generate_random_string(length = 32) { // not provide
   }
   return result;
 }
-function query_oj_solution(solution_id){
+function query_oj_solution(solution_id){ // 查询solution信息
   const key = 'cd57c770-5384-493e-e231-51e74438287a'
   const nonce = generate_random_string()
   const appID = 'ProgrammingLearningJudgingPlatform'
@@ -202,6 +202,7 @@ function query_oj_solution(solution_id){
     if(resp.code == 10000){
       code_input.value = resp.data.code
       stdin_input.value = resp.data.input
+      solution_output.value = resp.data.output
       loading.value = true
       try_failed.value = false
       send_request()
@@ -213,7 +214,7 @@ function query_oj_solution(solution_id){
     console.error(error);
   });
 }
-function get_oj_solution_id(){
+function get_oj_solution_id(){ // 从网址获取solutionID
   const currentUrl = window.location.href;
   const queryObject = new URLSearchParams(window.location.search);
   const solution_id = queryObject.get('solution');
@@ -244,7 +245,8 @@ provide('app', {
   highlight_lines,
   click_line,
   edit_mode,
-  feature_show_new_vars
+  feature_show_new_vars,
+  solution_output
 })
 </script>
 
@@ -275,13 +277,13 @@ provide('app', {
 
       <div class="out-big-box">
         <div class="big-box">
-          <StdinEditor />
+          <ControlPanel />
         </div>
       </div>
 
       <div class="out-big-box">
         <div class="big-box">
-          <ControlPanel />
+          <StdinEditor />
         </div>
       </div>
 

src/components/StackView.vue

@@ -86,15 +86,6 @@ const stack_to_render = computed(() => { // 当前帧的stack
     return current_stack.value['stack_to_render']
   } catch (e) { }
 })
-const stdout = computed(() => { // 从开始到当前帧的累计输出
-  try {
-    return current_stack.value['stdout']
-  } catch (e) { }
-  return ''
-})
-const has_stdout = computed(() => { // 当前帧是否有输出
-  return stdout.value.length > 0
-})
 const highlight_addresses = ref({}) // 高亮的地址及其颜色代号
 
 watch(current_step, () => {
@@ -107,16 +98,6 @@ provide('stack_view',{highlight_addresses,check_changed,current_var_map})
 
 <template>
   <div class="flex-container">
-    <div class="func-box" v-show="has_stdout">
-      <div class="big-box">
-        <div class="small-box head-box">输出</div>
-      </div>
-      <div class="big-box">
-        <div class="small-box">
-          <pre>{{ stdout }}</pre>
-        </div>
-      </div>
-    </div>
     <div class="func-box" v-if="has_globals">
       <div class="big-box">
         <div class="small-box head-box">全局变量</div>
@@ -132,9 +113,6 @@ provide('stack_view',{highlight_addresses,check_changed,current_var_map})
         :changed="check_changed(value2)" />
     </div>
   </div>
-  <!-- <button @click="click">log</button> -->
-  <!-- <div>{{ stack_to_render }}</div> -->
-
 </template>
 
 <style scoped>
@@ -144,17 +122,11 @@ provide('stack_view',{highlight_addresses,check_changed,current_var_map})
   border-radius: 0.5rem;
   padding: 0.2rem;
   margin-right: 0.5rem;
-  /* width: min-content;
-  height: min-content; */
 }
 
 .flex-container {
   display: flex;
   flex-direction: column;
-  /* grid-auto-flow: column;
-  grid-template-columns: auto;
-  grid-template-rows: auto; */
-  /* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
   height: 100%;
   width: calc(100% + 0.5rem);
   gap: 1rem;

src/components/StdinEditor.vue

@@ -2,16 +2,55 @@
 
 import { computed, inject } from 'vue';
 
-const { stdin_input, edit_mode } = inject('app')
+const { stdin_input, edit_mode, solution_output, get_step, current_step } = inject('app')
 
-const placeholder = '将你的测试用例粘贴到这里\n(如果有的话)'
+const stdin_placeholder = '你的测试用例\n(如果有的话)'
+const stdout_placeholder = '程序的输出'
+const display_solution_output = computed(()=>{
+  return '答案:\n' + solution_output.value
+})
+const show_solution_output = computed(()=>{
+  if(solution_output.value.length == 0){
+    return false
+  }else{
+    return true
+  }
+})
+const css_grid_template_columns = computed(()=>{
+  if(show_solution_output.value){
+    return '1fr 1fr 1fr'
+  }else{
+    return '1fr 1fr'
+  }
+})
+const current_stack = computed(() => { // 当前要显示的帧（主要显示stack部分）
+  return get_step(current_step.value)
+})
+const stdout = computed(() => { // 从开始到当前帧的累计输出
+  try {
+    return current_stack.value['stdout']
+  } catch (e) { }
+  return ''
+})
 
 </script>
 
 <template>
-  <textarea class="code-input" v-model="stdin_input" :placeholder="placeholder" :readonly="!edit_mode"></textarea>
+  <div class="grid-container">
+    <textarea class="code-input" v-model="stdin_input" :placeholder="stdin_placeholder" :readonly="!edit_mode"></textarea>
+    <textarea class="code-input" v-model="stdout" :placeholder="stdout_placeholder" readonly></textarea>
+    <textarea class="code-input" v-model="display_solution_output" v-if="show_solution_output" readonly></textarea>
+  </div>
 </template>
 
 <style scoped>
 @import '@/assets/code-input.css';
+
+.grid-container{
+  display: grid;
+  grid-template-columns: v-bind(css_grid_template_columns);
+  gap: 1rem;
+  height: 100%;
+}
+
 </style>