导入功能

Author: Linho1219

src/App.vue

@@ -15,11 +15,14 @@
             :key="dataItem.key"
           />
         </VueDraggable>
-        <div
-          class="plot-data add-data"
-          @click="graphData.push({ key: Math.random() })"
-        >
-          + 添加
+        <div class="plot-data add-data">
+          <div
+            @click="graphData.push({ key: Math.random() })"
+            class="add-data-opt add"
+          >
+            + 添加
+          </div>
+          <div @click="handleImport()" class="add-data-opt import">↓ 导入</div>
         </div>
       </div>
       <CodeDisplay :dataArr="cloneDeep(graphData)" />
@@ -42,9 +45,10 @@ import Graph from "./components/graph.vue";
 import DataBlock from "./components/dataBlock.vue";
 import CodeDisplay from "./components/codeDisplay.vue";
 import { VueDraggable } from "vue-draggable-plus";
-import type { FunctionPlotDatum } from "function-plot";
+import type { FunctionPlotDatum, FunctionPlotOptions } from "function-plot";
 import { onMounted, ref, watch } from "vue";
 import { cloneDeep } from "lodash-es";
+import JSON5 from "json5";
 const graphData = ref<(FunctionPlotDatum & { key: number })[]>([
   { fn: "x^2", key: 1 },
 ]);
@@ -77,6 +81,15 @@ function handleDrag() {
     handleResize();
   });
 }
+function handleImport() {
+  const raw = prompt("源数据：");
+  if (!raw) return;
+  graphData.value =
+    (<FunctionPlotOptions>JSON5.parse(raw)).data?.map((item) => ({
+      key: Math.random(),
+      ...item,
+    })) ?? [];
+}
 </script>
 
 <style>
@@ -125,15 +138,27 @@ function handleDrag() {
   overflow: hidden;
 }
 .add-data {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  margin-bottom: 50px;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
   cursor: default;
 }
-.add-data:hover {
+.add-data-opt {
+  padding: 10px 30px;
+}
+.add-data-opt.add {
+  flex-grow: 1;
+}
+.add-data-opt:not(:nth-child(1)) {
+  border-left: 1px solid var(--c-border);
+}
+.editor-inner {
+  padding-bottom: 50px;
+}
+.add-data-opt:hover {
   background: var(--c-bk3);
 }
-.add-data:active {
+.add-data-opt:active {
   background: var(--c-bk1);
 }
 

src/components/dataBlockInner/coordArrInputs.vue

@@ -25,7 +25,9 @@
         :placeholder="fnType.coordArr.placeholder[1]"
       />
       <span class="coord-label">{{ fnType.coordArr.fin }}</span>
-      <span class="coordarr-delete" @click="privateData.splice(index, 1)">×</span>
+      <span class="coordarr-delete" @click="privateData.splice(index, 1)"
+        >×</span
+      >
     </div>
   </VueDraggable>
   <div
@@ -45,7 +47,7 @@
 <script setup lang="ts">
 import { FnType } from "../../consts";
 import { FunctionPlotDatum } from "function-plot";
-import { computed, onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
 
 const { dataItem, fnType } = defineProps<{
@@ -97,12 +99,12 @@ onMounted(() => {
   border-radius: 50%;
   line-height: var(--d);
   text-align: center;
-	border:transparent 1px solid
+  border: transparent 1px solid;
 }
 .coordarr-delete:hover {
   opacity: 1;
-	background-color: var(--c-red);
-	border-color:var(--c-red2)
+  background-color: var(--c-red);
+  border-color: var(--c-red2);
 }
 .coordarr-delete:active {
   opacity: 1;

src/components/dataBlockInner/coordInputs.vue

@@ -9,12 +9,14 @@
     <span class="coord-label">{{ input.label }}</span>
     <input
       type="number"
+      :value="dataItem[input.value]?.[0] ?? ''"
       @input="handleCoordInput(dataItem!, input, 0, $event)"
       :placeholder="input.placeholder[0]"
     />
     <span class="coord-label">{{ input.sep }}</span>
     <input
       type="number"
+      :value="dataItem[input.value]?.[1] ?? ''"
       @input="handleCoordInput(dataItem!, input, 1, $event)"
       :placeholder="input.placeholder[1]"
     />