代码框标题翻译，折叠功能

Author: Linho1219

src/App.vue

@@ -160,15 +160,14 @@ function handleImport() {
 #editor {
   border-right: var(--c-border) 1px solid;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 .editor-inner {
   overflow: scroll;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 300px;
+  flex-grow: 1;
 }
+
 #graph {
   flex-grow: 1;
   position: relative;

src/components/codeDisplay.vue

@@ -1,11 +1,19 @@
 <template>
-  <div class="plot-data output">
-    <span class="output-title">代码</span>
+  <div class="plot-data output" :class="{ collapse }">
+    <span class="output-title"
+      >{{ t("title.output") }}
+      <button class="codeCollapse" @click="collapse = !collapse">
+        {{ t(collapse ? "buttons.expand" : "buttons.collapse") }}
+      </button>
+    </span>
     <pre>{{ formatted }}</pre>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
 import JSON5 from "json5";
 import prettier from "prettier/standalone";
 import prettierPluginBabel from "prettier/plugins/babel";
@@ -29,32 +37,50 @@ watch(
   },
   { immediate: true }
 );
+
+const collapse = ref(true);
 </script>
 
 <style>
 .plot-data.output {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
   border-top: var(--c-border) 1px solid;
-  padding: 20px 15px;
+  padding: 15px 15px;
   height: 260px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow: hidden;
 }
 .plot-data.output .output-title {
   font-size: 20px;
   font-weight: bold;
   display: block;
-  margin-bottom: 10px;
 }
 .plot-data.output pre {
-  position: absolute;
-  top: 60px;
-  bottom: 15px;
-  left: 15px;
-  right: 15px;
-  margin: 0;
+  flex-grow: 1;
   overflow: scroll;
   user-select: all;
+  margin: 0;
+}
+
+.plot-data.output.collapse {
+  height: 30px;
+}
+
+.codeCollapse{
+  float: right;
+  height:100%;
+  padding:0 10px;
+  background: var(--c-bk3);
+  border:var(--c-border) 1px solid;
+  border-radius: 5px;
+  opacity: 0.75;
+}
+.codeCollapse:hover{
+  opacity: 1;
+}
+.codeCollapse:active{
+  opacity: 1;
+  filter: brightness(0.5);
 }
 </style>

src/components/nav.vue

@@ -10,7 +10,7 @@
       >
     </span>
     <div class="grow"></div>
-    <select v-model="locale">
+    <select v-model="locale" id="language">
       <option value="zh-CN">简体中文</option>
       <option value="en-US">English</option>
     </select>
@@ -48,4 +48,20 @@ const { locale } = useI18n();
   align-items: center;
   padding: 0 15px;
 }
+
+.grow {
+  flex-grow: 1;
+}
+
+#language {
+  border: var(--c-border) 1px solid;
+  background: var(--c-bk3);
+  border-radius: 5px;
+  padding: 5px 8px;
+  color: var(--text);
+  font-size: 15px;
+}
+#language:focus {
+  border-color: var(--c-accent);
+}
 </style>

src/i18n.ts

@@ -41,6 +41,9 @@ export default createI18n({
         vectorOffset: "起点坐标",
         location: "位置",
       },
+      title: {
+        output: "输出代码",
+      },
     },
     "en-US": {
       buttons: {
@@ -80,6 +83,9 @@ export default createI18n({
         vectorOffset: "Offset",
         location: "Location",
       },
+      title: {
+        output: "Output code",
+      },
     },
   },
 });