fix: execution style

Author: matto49

src/components/crossPlatforms.vue

@@ -1,39 +1,39 @@
 <script setup lang="ts">
-import { computed, Fragment, onMounted, reactive, ref, Ref } from 'vue';
-import codeBlock from './codeBlock.vue';
-import { useDetectDeviceType } from '@/hooks/detectDeviceType';
+import { computed, Fragment, onMounted, reactive, ref, Ref } from "vue";
+import CodeBlock from "./codeBlock.vue";
+import { useDetectDeviceType } from "@/hooks/detectDeviceType";
 
 const deviceType = useDetectDeviceType();
-const currenClickPlatform = ref('');
+const currenClickPlatform = ref("");
 
-if (deviceType.value !== 'other') {
+if (deviceType.value !== "other") {
   currenClickPlatform.value = deviceType.value;
 } else {
-  currenClickPlatform.value = 'apple';
+  currenClickPlatform.value = "apple";
 }
 
 function showCode(type: string) {
   currenClickPlatform.value = type;
 }
 const platforms = [
   {
-    type: 'apple',
-    icon: 'fa-brands fa-apple',
-    iconColor: '#8465ff',
+    type: "apple",
+    icon: "fa-brands fa-apple",
+    iconColor: "#8465ff",
     code: `brew tap pivot-studio/tap
 brew install pivot-lang`,
   },
   {
-    type: 'windows',
-    icon: 'fa-brands fa-windows',
-    iconColor: '#409eff',
+    type: "windows",
+    icon: "fa-brands fa-windows",
+    iconColor: "#409eff",
     code: `scoop bucket add pivot https://github.com/Pivot-Studio/scoop
 scoop install plc`,
   },
   {
-    type: 'linux',
-    icon: 'fa-brands fa-linux',
-    iconColor: 'rgb(200, 150, 50)',
+    type: "linux",
+    icon: "fa-brands fa-linux",
+    iconColor: "rgb(200, 150, 50)",
     code: `apt install wget gnupg
 wget -O -  https://lang.pivotstudio.cn/apt/public.key | apt-key add -
 echo "deb [arch=amd64] https://lang.pivotstudio.cn/apt/repo focal main
@@ -46,15 +46,25 @@ apt install pivot-lang`,
 ];
 
 const curShowCode = computed(() => {
-  return platforms.find((item) => item.type === currenClickPlatform.value)?.code;
+  return platforms.find((item) => item.type === currenClickPlatform.value)
+    ?.code;
 });
 </script>
 <template>
   <div id="advantage">
     <div class="gradient-font title">Cross Platforms</div>
-    <div class="detail-describe">Install Pivot Lang compiler with only a few commands!</div>
+    <div class="detail-describe">
+      Install Pivot Lang compiler with only a few commands!
+    </div>
     <div class="advantages">
-      <div v-for="item in platforms" :class="{ 'advantage-item': true, 'selected-item': item.type === currenClickPlatform }" :key="item.type">
+      <div
+        v-for="item in platforms"
+        :class="{
+          'advantage-item': true,
+          'selected-item': item.type === currenClickPlatform,
+        }"
+        :key="item.type"
+      >
         <font-awesome-icon
           @click="showCode(item.type)"
           inverse
@@ -67,7 +77,9 @@ const curShowCode = computed(() => {
         />
       </div>
     </div>
-    <codeBlock class="code-block'" :code="curShowCode"></codeBlock>
+    <div class="code-block-container">
+      <CodeBlock class="code-block'" :code="curShowCode"></CodeBlock>
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -115,4 +127,9 @@ const curShowCode = computed(() => {
 .v-leave-to {
   opacity: 0;
 }
+.code-block-container {
+  display: flex;
+  justify-content: center;
+  margin: 50px 0;
+}
 </style>

src/components/tabList.vue

@@ -1,29 +1,38 @@
 <script lang="ts" setup>
 import { PlMonaco } from "@pivot-lang/create-monaco";
 import axios from "axios";
-import { ref } from "vue";
+import { nextTick } from "vue";
+import { onMounted, ref } from "vue";
 
 const props = defineProps<{
   tablist: string[];
   val: string;
   code: string;
 }>();
+
 const emit = defineEmits(["updateVal", "updateOutput"]);
 function updateVal(val: string) {
   emit("updateVal", val);
 }
 
 let isRunning = ref(false);
 
+onMounted(async () => {
+  // props.code于onMounted中更新
+  await nextTick();
+  run(props.code);
+});
+
 async function run(params: string) {
   isRunning.value = true;
   try {
-    let re = await axios.post<{ runOutput: string, status:number, compileOutput: string }>(
-      "https://code.lang.pivotstudio.cn/coderunner",
-      {
-        code: params,
-      }
-    );
+    let re = await axios.post<{
+      runOutput: string;
+      status: number;
+      compileOutput: string;
+    }>("https://code.lang.pivotstudio.cn/coderunner", {
+      code: params,
+    });
     isRunning.value = false;
     if (re.data.status === 1) {
       emit("updateOutput", re.data.compileOutput);

src/pages/index.vue

@@ -16,13 +16,13 @@ import { ref, onMounted, watch } from "vue";
 import { basicCode } from "@/constant";
 import { memberList } from "@/constant";
 import createMonaco, { PlMonaco } from "@pivot-lang/create-monaco";
-import codeBlock from "@/components/codeBlock.vue";
+import CodeBlock from "@/components/codeBlock.vue";
 import { cp } from "fs";
 const tabVal = ref("hello world");
 const tabList = basicCode.map((item) => item.title);
 let monaco: PlMonaco;
 let code = ref("");
-let runresult = ref("");
+let runResult = ref("");
 function gotoEmail() {
   window.location.href = "mailto:[email protected]";
 }
@@ -57,24 +57,28 @@ watch(
         With the help of Web Assembly technology, we are able to provide support
         for some of the Pivot Lang syntax in the browser for you to experience.
       </div>
-      <div class="code-box">
-        <TabList
-          @updateVal="(val:string) => (tabVal = val)"
-          @updateOutput="(re) => (runresult = re)"
-          :tablist="tabList"
-          :val="tabVal"
-          :code="code"
-        ></TabList>
-        <div class="code-container">
-          <div id="container"></div>
+      <div class="code-now-container">
+        <div class="code-box">
+          <TabList
+            @updateVal="(val:string) => (tabVal = val)"
+            @updateOutput="
+              (re) =>
+                (runResult = re[re.length - 1] === '\n' ? re.slice(0, -1) : re)
+            "
+            :tablist="tabList"
+            :val="tabVal"
+            :code="code"
+          ></TabList>
+          <div class="code-container">
+            <div id="container"></div>
+          </div>
+        </div>
+        <div class="execution">
+          <div class="execution-title">Execution</div>
+          <CodeBlock class="code-block" :code="runResult"></CodeBlock>
         </div>
       </div>
     </div>
-    <codeBlock
-      v-if="runresult"
-      class="code-block'"
-      :code="runresult"
-    ></codeBlock>
     <div id="advantage">
       <div class="gradient-font title">Immix Garbage Collector</div>
       <div class="detail-describe">
@@ -144,6 +148,10 @@ watch(
     .title {
       text-align: center;
       margin: 50px;
+
+      @media (max-width: 600px) {
+        margin: 50px 25px 15px 25px;
+      }
     }
     .detail-describe {
       margin: 0 auto;
@@ -156,20 +164,69 @@ watch(
   #code-show {
     min-height: calc(100vh - 100px);
   }
-  .code-box {
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%);
-    max-width: 74.5vw;
-    .code-container {
-      border-bottom: 10px #1e1e1e solid;
-      border-radius: 10px;
+  .code-now-container {
+    display: flex;
+    justify-content: cen;
+    .code-box {
+      // position: absolute;
+      // left: 50%;
+      // transform: translate(-50%);
+      width: 60%;
+      max-width: 800px;
+      .code-container {
+        border-bottom: 10px #1e1e1e solid;
+        border-radius: 10px;
+        height: 100%;
+      }
+      #container {
+        height: 100%;
+        max-height: calc(100vh - 400px);
+        width: 100%;
+      }
+    }
+
+    .execution {
+      width: 25%;
+      margin: 30px 0 0 50px;
+      .execution-title {
+        color: wheat;
+        margin-left: 5px;
+        margin-bottom: 10px;
+        font-weight: bold;
+      }
+
+      .code-toolbar {
+        pre {
+          height: 100%;
+          background-color: rgba(50, 50, 70, 0.5);
+        }
+      }
+      .toolbar {
+        display: none;
+      }
     }
-    #container {
-      height: 800px;
-      width: 800px;
-      max-height: calc(100vh - 400px);
-      max-width: 80vw;
+
+    @media (max-width: 800px) {
+      flex-direction: column;
+      align-items: center;
+      .code-box {
+        width: 70%;
+        height: 40vh;
+      }
+
+      .execution {
+        width: 70%;
+        margin: 80px 0 0;
+        max-height: 300px;
+
+        pre {
+          height: 100%;
+          max-height: 80px;
+        }
+        .code-toolbar {
+          width: 100%;
+        }
+      }
     }
   }
   .team-card {

src/style.scss

@@ -10,7 +10,8 @@ body {
 body {
   margin: 0;
   background-color: black;
-  font-family: -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
+    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   &::-webkit-scrollbar {
     width: 12px;
   }
@@ -64,7 +65,12 @@ body {
   font-size: 58px;
   font-weight: 860;
   line-height: 150%;
-  background: linear-gradient(180deg, rgba(186, 255, 243, 0) 50.04%, rgba(189, 255, 244, 0.44) 100.09%), linear-gradient(64.57deg, #75fff3 7.22%, #599aff 90.07%);
+  background: linear-gradient(
+      180deg,
+      rgba(186, 255, 243, 0) 50.04%,
+      rgba(189, 255, 244, 0.44) 100.09%
+    ),
+    linear-gradient(64.57deg, #75fff3 7.22%, #599aff 90.07%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   @media (max-width: 1200px) {
@@ -103,10 +109,9 @@ body {
 }
 
 .code-toolbar {
-  margin: 50px auto;
   max-width: 720px;
   @media (max-width: 800px) {
-    width: 60vw;
+    width: 70vw;
     transition: all 0.7s ease;
   }
 }