添加颜色支持

Author: Linho1219

src/components/dataBlock.vue

@@ -55,6 +55,12 @@
         :fnType="fnType"
         :blockFolded="blockFolded"
       />
+      <OptInputs
+        v-if="fnType.optInput"
+        :dataItem="dataItem"
+        :fnType="fnType"
+        :blockFolded="blockFolded"
+      />
     </div>
   </div>
 </template>
@@ -66,6 +72,7 @@ import StrInputs from "./dataBlockInner/strInputs.vue";
 import CoordInputs from "./dataBlockInner/coordInputs.vue";
 import SwitchInputs from "./dataBlockInner/switchInputs.vue";
 import CoordArrInputs from "./dataBlockInner/coordArrInputs.vue";
+import OptInputs from "./dataBlockInner/optInputs.vue";
 
 const emit = defineEmits(["delete"]);
 const dataItem = defineModel<FunctionPlotDatum>();

src/components/dataBlockInner/optInputs.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    v-if="!blockFolded"
+    v-for="input in fnType.optInput ?? []"
+    class="input-box opt-input optional"
+  >
+    <span class="coord-label optin-label">{{ input.label }}</span>
+    <input
+      :type="input.type"
+      :value="dataItem[input.value] ?? ''"
+      @input="handleCoordInput(dataItem!, input, $event)"
+      :placeholder="input.placeholder"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FnType, OptInput } from "../../consts";
+import { FunctionPlotDatum } from "function-plot";
+
+const { dataItem, fnType } = defineProps<{
+  dataItem: FunctionPlotDatum;
+  fnType: FnType;
+  blockFolded: boolean;
+}>();
+
+function handleCoordInput(
+  dataItem: FunctionPlotDatum,
+  input: OptInput,
+  event: Event
+) {
+  const raw = (<HTMLInputElement>event.target).value;
+  if (raw === "") {
+    delete dataItem[input.value];
+    return;
+  }
+  if (input.type === "number") dataItem[input.value] = Number(raw);
+  else dataItem[input.value] = raw;
+}
+</script>
+
+<style>
+.input-box.opt-input {
+  display: flex;
+  color: #bbb;
+  gap: 10px;
+}
+.input-box.opt-input span {
+  font-size: 18px;
+  margin: auto 5px;
+  flex-shrink: 0;
+}
+.input-box.opt-input input {
+  min-width: 3em;
+  padding: 6px 0;
+  font-size: 18px;
+  flex-shrink: 1;
+}
+</style>

src/consts.ts

@@ -52,13 +52,20 @@ export type CoordArr = {
   placeholder: [string, string];
 };
 
+export type OptInput = {
+  label: string;
+  placeholder?: string;
+  vif?: keyof FunctionPlotDatum;
+} & ({ value: "color"; type: "text" } | { value: "nSamples"; type: "number" });
+
 export type FnType = {
   value: FunctionPlotDatum["fnType"] | "text";
   label: string;
   inputs: InputType[];
   coord?: CoordType[];
   coordArr?: CoordArr;
   switches?: SwitchType[];
+  optInput?: OptInput[];
   notAllowedInInterval?: boolean;
 };
 
@@ -96,6 +103,13 @@ export const fnTypeArr = [
         folded: true,
       },
     ],
+    optInput: [
+      {
+        value: "color",
+        type: "text",
+        label: "颜色",
+      },
+    ],
   },
   {
     value: "implicit",