隐函数面板

Author: Linho1219

src/editor/inputs/implicit.vue

@@ -1,20 +1,27 @@
 <template>
   <div class="input-inner">
     <div class="field main-fn">
-      <FilledTextfield
-        class="styled fn"
-        label="F(x, y)"
-        v-model="self.fn"
-      />
+      <FilledTextfield class="styled fn" label="f(x, y)" v-model="self.fn" />
       <span class="label styled"> =0 </span>
     </div>
     <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-divider>{{ t("data.more.dividerTitle") }}</s-divider>
+      <div class="input-inner-optional">
+        <div class="fields">
+          <!-- color -->
+          <span class="label">
+            {{ t("data.more.color") }}
+            <HelpIcon> {{ t("data.more.colorHelp") }} </HelpIcon>
+          </span>
+          <ColorPicker v-model="self.color" />
+        </div>
+        <div class="switches">
+          <!-- closed -->
+          <s-checkbox type="checkbox" v-model.lazy="self.closed">
+            {{ t("data.more.closed") }}
+          </s-checkbox>
+        </div>
+      </div>
     </AnimatedFold>
   </div>
 </template>
@@ -26,14 +33,16 @@ import { useI18n } from "vue-i18n";
 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;
   self: PrivateDataTypes.Implicit;
   index: number;
 }>();
 const self = toRef(props, "self");
+
+import FilledTextfield from "@/editor/inputs/subblocks/function.vue";
+import AnimatedFold from "@/ui/animated/animatedFold.vue";
+import ColorPicker from "./subblocks/colorPicker.vue";
+import HelpIcon from "./subblocks/helpIcon.vue";
+import "./inputs.scss";
 </script>

src/editor/inputs/linear.vue

@@ -2,12 +2,13 @@
   <div class="input-inner">
     <div class="field main-fn">
       <span class="label styled">y=</span>
-      <filledTextfield class="styled fn" label="f(x)" v-model="self.fn" />
+      <FilledTextfield class="styled fn" label="f(x)" v-model="self.fn" />
     </div>
-    <AnimatedFold :folded="props.folded" class="fold">
+    <AnimatedFold :folded="props.folded">
       <s-divider>{{ t("data.more.dividerTitle") }}</s-divider>
       <div class="input-inner-optional">
         <div class="fields">
+          <!-- Derivate & secants -->
           <span class="label"> {{ t("data.derivateAndSecants") }} </span>
           <s-popup class="derivate-popup input" align="right">
             <s-button type="outlined" slot="trigger">
@@ -16,13 +17,16 @@
             </s-button>
             <DerivatePane :self="self" />
           </s-popup>
+          <!-- range -->
           <span class="label"> {{ t("data.more.range") }} </span>
           <Domain :self="self" />
+          <!-- color -->
           <span class="label">
             {{ t("data.more.color") }}
             <HelpIcon> {{ t("data.more.colorHelp") }} </HelpIcon>
           </span>
           <ColorPicker v-model="self.color" />
+          <!-- nSamples -->
           <span class="label"> {{ t("data.more.nSamples") }} </span>
           <s-text-field
             class="input monospace-inner"
@@ -34,9 +38,11 @@
           ></s-text-field>
         </div>
         <div class="switches">
+          <!-- closed -->
           <s-checkbox type="checkbox" v-model.lazy="self.closed">
             {{ t("data.more.closed") }}
           </s-checkbox>
+          <!-- skipTip -->
           <s-checkbox type="checkbox" v-model.lazy="self.skipTip">
             {{ t("data.more.skipTip") }}
             <HelpIcon> {{ t("data.more.skipTipHelp") }} </HelpIcon>