合并可选项显示

Author: Linho1219

src/consts.ts

@@ -133,6 +133,11 @@ export function toInternalDatum(items: FunctionPlotDatum[]) {
 export type InputProps = {
   dataItem: InternalDatum;
   fnType: FnType;
+};
+
+export type InputPropsWithFold = {
+  dataItem: InternalDatum;
+  fnType: FnType;
   blockFolded: boolean;
 };
 

src/editor/datum.vue

@@ -73,36 +73,47 @@
       </div>
 
       <div class="inputs">
-        <StrInputs
-          :dataItem="dataItem"
-          :fnType="fnType"
-          :blockFolded="blockFolded"
-        />
+        <StrInputs :dataItem="dataItem" :fnType="fnType" />
         <CoordInputs
           v-if="fnType.coord"
           :dataItem="dataItem"
           :fnType="fnType"
-          :blockFolded="blockFolded"
+          :blockFolded="false"
         />
         <CoordArrInputs
           v-if="fnType.coordArr"
           :dataItem="dataItem"
           :fnType="fnType"
-          :blockFolded="blockFolded"
-        />
-        <OptInputs
-          v-if="fnType.optInput"
-          :dataItem="dataItem"
-          :fnType="fnType"
-          :blockFolded="blockFolded"
         />
         <SwitchInputs
           v-if="fnType.switches"
           :dataItem="dataItem"
           :fnType="fnType"
-          :blockFolded="blockFolded"
+          :blockFolded="false"
         />
       </div>
+      <s-fold :folded="blockFolded">
+        <div class="inputs optional">
+          <s-divider>{{ t("title.moreOptions") }}</s-divider>
+          <CoordInputs
+            v-if="fnType.coord"
+            :dataItem="dataItem"
+            :fnType="fnType"
+            :blockFolded="true"
+          />
+          <OptInputs
+            v-if="fnType.optInput"
+            :dataItem="dataItem"
+            :fnType="fnType"
+          />
+          <SwitchInputs
+            v-if="fnType.switches"
+            :dataItem="dataItem"
+            :fnType="fnType"
+            :blockFolded="true"
+          />
+        </div>
+      </s-fold>
     </div>
   </s-fold>
 </template>
@@ -201,6 +212,20 @@ watch(locale, () => selectKey.value++);
 </script>
 
 <style>
+.inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.inputs.optional {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.inputs .input-box {
+  position: relative;
+  display: flex;
+}
 .plot-data {
   position: relative;
   padding: 20px 15px;

src/editor/inputs/coordInputs.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-for="input in fnType.coord?.filter(
-      ({ folded }) => !(folded && blockFolded)
+      ({ folded }) => !!folded === blockFolded
     ) ?? []"
     class="input-box coord"
     :class="{ optional: input.optional }"
@@ -33,9 +33,9 @@
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 
-import { CoordType, InternalDatum, InputProps } from "../../consts";
+import { CoordType, InternalDatum,  InputPropsWithFold } from "../../consts";
 
-const { dataItem, fnType } = defineProps<InputProps>();
+const { dataItem, fnType } = defineProps<InputPropsWithFold>();
 
 function handleCoordInput(
   dataItem: InternalDatum,

src/editor/inputs/optInputs.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="!blockFolded"
     v-for="input in fnType.optInput ?? []"
     class="input-box opt-input optional"
   >

src/editor/inputs/strInputs.vue

@@ -36,15 +36,6 @@ const emit = defineEmits(["blur"]);
 </script>
 
 <style>
-.inputs {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.inputs .input-box {
-  position: relative;
-  display: flex;
-}
 .inputs .input-box .input-title {
   font-size: 25px;
   margin: auto 5px;

src/editor/inputs/switchInputs.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-for="input in fnType.switches?.filter(
-      ({ folded }) => !(folded && blockFolded)
+      ({ folded }) => !!folded === blockFolded
     ) ?? []"
     class="input-box switches"
     @click="
@@ -19,9 +19,9 @@
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 
-import { InputProps } from "../../consts";
+import { InputPropsWithFold } from "../../consts";
 
-const { dataItem, fnType } = defineProps<InputProps>();
+const { dataItem, fnType } = defineProps<InputPropsWithFold>();
 </script>
 
 <style>

src/i18n.ts

@@ -59,6 +59,7 @@ export default {
         importFail: "导入失败",
         copySuccess: "已复制",
         deleteSuccess: "已删除",
+        moreOptions: "更多选项",
       },
     },
     "en-US": {
@@ -101,7 +102,7 @@ export default {
         range: "Range",
         color: "Color",
         colorPlaceholder: "RGB / HEX / Color name",
-        nSamples: "Samples",
+        nSamples: "Sample number",
         nSamplesPlaceholder: "Default to width",
         closed: "Close and fill",
         vectorValue: "Size",
@@ -115,6 +116,7 @@ export default {
         importFail: "Import failed",
         copySuccess: "Copied",
         deleteSuccess: "Deleted",
+        moreOptions: "More options",
       },
     },
   },