使用自定义组件替代 s-fold

减少额外 DOM，提升性能

Author: Linho1219

src/editor/inputs/implicit.vue

@@ -8,14 +8,14 @@
       />
       <span class="label styled"> =0 </span>
     </div>
-    <s-fold :folded="props.folded">
+    <AnimatedFold :folded="props.folded">
       <s-divider>{{ t("title.moreOptions") }}</s-divider>
       <p>
         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora ab hic
         accusamus iure natus expedita laborum ea nam, reiciendis obcaecati animi
         voluptatem nisi assumenda ipsam nihil fuga minima? Id, ab?
       </p>
-    </s-fold>
+    </AnimatedFold>
   </div>
 </template>
 
@@ -27,6 +27,8 @@ import { I18nSchema } from "@/i18n";
 const { t } = useI18n<{ message: I18nSchema }>();
 
 import FilledTextfield from "@/editor/inputs/subblocks/function.vue";
+import AnimatedFold from "@/ui/animated/animatedFold.vue";
+
 
 const props = defineProps<{
   folded: boolean;

src/editor/inputs/inputs.scss

@@ -21,7 +21,7 @@
     }
   }
 
-  & > s-fold {
+  & > .fold {
     margin: -8px -15px 0 -15px;
   }
   s-divider {

src/editor/inputs/linear.vue

@@ -4,7 +4,7 @@
       <span class="label styled">y=</span>
       <filledTextfield class="styled fn" label="f(x)" v-model="self.fn" />
     </div>
-    <s-fold :folded="props.folded">
+    <AnimatedFold :folded="props.folded" class="fold">
       <s-divider>{{ t("data.more.dividerTitle") }}</s-divider>
       <div class="input-inner-optional">
         <div class="fields">
@@ -53,7 +53,7 @@
           </s-checkbox>
         </div>
       </div>
-    </s-fold>
+    </AnimatedFold>
   </div>
 </template>
 
@@ -76,5 +76,6 @@ import HelpIcon from "./subblocks/helpIcon.vue";
 import ColorPicker from "./subblocks/colorPicker.vue";
 import Domain from "./subblocks/domain.vue";
 import DerivatePane from "./subblocks/derivatePane.vue";
+import AnimatedFold from "@/ui/animated/animatedFold.vue";
 import "./inputs.scss";
 </script>

src/editor/inputs/parametric.vue

@@ -8,14 +8,7 @@
       <span class="label styled">y=</span>
       <FilledTextfield class="styled fn" label="g(t)" v-model="self.y" />
     </div>
-    <s-fold :folded="props.folded">
-      <s-divider>{{ t("title.moreOptions") }}</s-divider>
-      <p>
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora ab hic
-        accusamus iure natus expedita laborum ea nam, reiciendis obcaecati animi
-        voluptatem nisi assumenda ipsam nihil fuga minima? Id, ab?
-      </p>
-    </s-fold>
+
   </div>
 </template>
 

src/editor/inputs/polar.vue

@@ -10,14 +10,7 @@
       />
     </div>
   </div>
-  <s-fold :folded="props.folded">
-    <s-divider>{{ t("title.moreOptions") }}</s-divider>
-    <p>
-      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora ab hic
-      accusamus iure natus expedita laborum ea nam, reiciendis obcaecati animi
-      voluptatem nisi assumenda ipsam nihil fuga minima? Id, ab?
-    </p>
-  </s-fold>
+
 </template>
 
 <script setup lang="ts">

src/editor/inputs/subblocks/derivatePane.vue

@@ -52,7 +52,7 @@
           </s-segmented-button-item>
         </s-segmented-button>
       </div>
-      <s-fold :folded="derivFollowMouse" class="derivate-x-coord-fold">
+      <AnimatedFold :folded="derivFollowMouse" class="derivate-x-coord-fold">
         <div class="field x-coord-field">
           <div class="label">{{ t("data.derivate.sepcify") }}</div>
           <s-text-field
@@ -62,7 +62,7 @@
             v-model="derivateX"
           ></s-text-field>
         </div>
-      </s-fold>
+      </AnimatedFold>
     </div>
 
     <!-- secant -->
@@ -133,6 +133,7 @@ import FunctionField from "./function.vue";
 import AnimatedList from "@/ui/animated/animatedList.vue";
 import AnimatedListItem from "@/ui/animated/animatedListItem.vue";
 import SIconDelete from "@/ui/icons/delete.vue";
+import AnimatedFold from "@/ui/animated/animatedFold.vue";
 
 import { useI18n } from "vue-i18n";
 import { I18nSchema } from "@/i18n";

src/editor/output.vue

@@ -17,11 +17,11 @@
         {{ t("output.copy.tip") }}
       </s-tooltip>
     </div>
-    <s-fold :folded="folded">
+    <AnimatedFold :folded="folded">
       <s-scroll-view id="formattedCode">
         <pre ref="formattedCodePre">{{ formatted }}</pre>
       </s-scroll-view>
-    </s-fold>
+    </AnimatedFold>
   </div>
 </template>
 
@@ -43,6 +43,8 @@ import { ref, watch } from "vue";
 import { useProfile } from "@/states";
 const profile = useProfile();
 
+import AnimatedFold from "@/ui/animated/animatedFold.vue";
+
 import { FunctionPlotOptions } from "function-plot";
 const formatted = ref("");
 watch(

src/graph/graph.vue

@@ -74,9 +74,26 @@ onMounted(async () => {
   while (!shellRef.value) await waitForTruthy(plotRef);
   const handleUpdate = throttle(() => {
     const target = plotRef.value;
-
     try {
       if (!target) throw new Error("plotRef is null");
+      if (
+        profile.datum.some((data) => {
+          const isEmpty = (str: string) => str === undefined || str === "";
+          const someEmpty = (...strs: string[]) => strs.some(isEmpty);
+          switch (data.fnType) {
+            case "linear":
+            case "implicit":
+              return someEmpty(data.fn);
+            case "parametric":
+              return someEmpty(data.x, data.y);
+            case "polar":
+              return someEmpty(data.r);
+            default:
+              return false;
+          }
+        })
+      )
+        throw new Error("Empty data found");
       const data = profile.getPublicDatum();
       const annotations = profile.getPublicAnnotations();
       const options = profile.getPublicOptions();

src/ui/animated/animatedFold.vue

@@ -0,0 +1,35 @@
+<template>
+  <Transition name="fold-trans">
+    <div class="fold-shell" :class="props.class" v-if="!props.folded">
+      <div class="fold-shell-inner">
+        <slot></slot>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  class?: string;
+  folded?: boolean;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.fold-shell {
+  display: grid;
+  grid-template-rows: 1fr;
+  overflow: hidden;
+  transition: grid-template-rows var(--s-motion-duration-short4, 0.2s)
+    var(--s-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+}
+.fold-shell-inner {
+  min-height: 0;
+}
+.fold-trans {
+  &-enter-from,
+  &-leave-to {
+    grid-template-rows: 0fr;
+  }
+}
+</style>

src/ui/animated/animatedListItem.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
 }>();
 </script>
 
-<style>
+<style lang="scss" scoped>
 .animatedListItem {
   display: grid;
   grid-template-rows: 1fr;
@@ -24,8 +24,10 @@ const props = defineProps<{
 .animatedListItemInner {
   min-height: 0;
 }
-.list-trans-enter-from,
-.list-trans-leave-to {
-  grid-template-rows: 0fr;
+.list-trans {
+  &-enter-from,
+  &-leave-to {
+    grid-template-rows: 0fr;
+  }
 }
 </style>