代码输出部分采用组件库

Author: Linho1219

src/components/codeDisplay.vue

@@ -1,12 +1,21 @@
 <template>
-  <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 class="plot-data output">
+    <span class="output-title">{{ t("title.output") }} </span>
+    <s-fold folded>
+      <s-button
+        slot="trigger"
+        type="text"
+        @click="folded = !folded"
+        id="codeFoldButton"
+      >
+        <s-icon
+          slot="start"
+          :name="folded ? 'chevron_up' : 'chevron_down'"
+        ></s-icon>
+        {{ t(folded ? "buttons.expand" : "buttons.collapse") }}</s-button
+      >
+      <pre id="formattedCode">{{ formatted }}</pre>
+    </s-fold>
   </div>
 </template>
 
@@ -38,48 +47,37 @@ watch(
   { immediate: true }
 );
 
-const collapse = ref(true);
+const folded = ref(true);
 </script>
 
 <style>
 .plot-data.output {
   border-top: var(--s-color-outline-variant) 1px solid;
-  padding: 15px 15px;
-  height: 260px;
+  padding: 8px 15px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   overflow: hidden;
 }
 .plot-data.output .output-title {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: bold;
-  display: block;
+  position: absolute;
+  top: 8px;
+  left: 15px;
+  line-height: 40px;
 }
 .plot-data.output pre {
   flex-grow: 1;
   overflow: scroll;
   user-select: all;
   margin: 0;
 }
-
-.plot-data.output.collapse {
-  height: 30px;
-}
-
-.codeCollapse{
-  float: right;
-  height:100%;
-  padding:0 10px;
-  border:var(--s-color-outline-variant) 1px solid;
-  border-radius: 5px;
-  opacity: 0.75;
-}
-.codeCollapse:hover{
-  opacity: 1;
+#codeFoldButton {
+  margin-left: 100%;
+  transform: translateX(-100%);
 }
-.codeCollapse:active{
-  opacity: 1;
-  filter: brightness(0.5);
+#formattedCode {
+  height: 200px;
 }
 </style>