加入从参数导入数据

Author: Linho1219

package-lock.json

@@ -11,15 +11,19 @@
   },
   "dependencies": {
     "@prettier/sync": "^0.5.2",
+    "base-64": "^1.0.0",
     "function-plot": "^2.0.0-0",
     "json5": "^2.2.3",
     "lodash-es": "^4.17.21",
     "prettier": "^3.4.2",
+    "utf8": "^3.0.0",
     "vue": "^3.5.13",
     "vue-draggable-plus": "^0.6.0"
   },
   "devDependencies": {
+    "@types/base-64": "^1.0.2",
     "@types/lodash-es": "^4.17.12",
+    "@types/utf8": "^3.0.3",
     "@vitejs/plugin-vue": "^5.2.1",
     "patch-package": "^8.0.0",
     "typescript": "~5.6.2",

package.json

@@ -49,9 +49,11 @@ 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 },
-]);
+import base64 from "base-64";
+import utf8 from "utf8";
+import { Datum } from "./consts";
+
+const graphData = ref<Datum[]>([{ fn: "x^2", key: 1 }]);
 const graphWidth = ref(0),
   graphHeight = ref(0);
 const key = ref(0);
@@ -64,7 +66,34 @@ function handleResize() {
     graphHeight.value = shellRef.value.clientHeight;
   }
 }
+
+function importMapper(item: FunctionPlotDatum): Datum {
+  if (item.graphType === "text")
+    return {
+      ...item,
+      fnType: "text",
+      key: Math.random(),
+    };
+  else
+    return {
+      ...item,
+      key: Math.random(),
+    };
+}
+
 onMounted(() => {
+  const rawCode = window.location.search.match(/\?code=(.+)$/)?.[1];
+  if (rawCode)
+    try {
+      const code = utf8.decode(base64.decode(rawCode));
+      const data = (<FunctionPlotDatum[]>JSON5.parse(code).data).map(
+        importMapper
+      );
+      graphData.value = <Datum[]>data;
+      console.log(code);
+      console.log(data);
+    } catch (e) {}
+
   window.addEventListener("resize", handleResize);
   handleResize();
   watch(graphData, () => key.value++, { deep: true });
@@ -85,10 +114,7 @@ function handleImport() {
   const raw = prompt("源数据：");
   if (!raw) return;
   graphData.value =
-    (<FunctionPlotOptions>JSON5.parse(raw)).data?.map((item) => ({
-      key: Math.random(),
-      ...item,
-    })) ?? [];
+    (<FunctionPlotOptions>JSON5.parse(raw)).data?.map(importMapper) ?? [];
 }
 </script>
 

src/App.vue

@@ -10,10 +10,10 @@ import JSON5 from "json5";
 import prettier from "prettier/standalone";
 import prettierPluginBabel from "prettier/plugins/babel";
 import prettierPluginEstree from "prettier/plugins/estree";
-import { FunctionPlotDatum } from "function-plot";
 import { ref, watch } from "vue";
+import { Datum } from "../consts";
 const { dataArr } = defineProps<{
-  dataArr: (FunctionPlotDatum & { key?: number })[];
+  dataArr: (Omit<Datum, "key"> & { key?: number })[];
 }>();
 const formatted = ref("");
 watch(

src/components/codeDisplay.vue

@@ -65,8 +65,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import type { FunctionPlotDatum } from "function-plot";
-import { fnTypeArr, graphTypeArr, inputTypeArr, getFnType } from "../consts";
+import { fnTypeArr, graphTypeArr, inputTypeArr, getFnType, Datum } from "../consts";
 import { ref, computed } from "vue";
 import StrInputs from "./dataBlockInner/strInputs.vue";
 import CoordInputs from "./dataBlockInner/coordInputs.vue";
@@ -75,16 +74,10 @@ import CoordArrInputs from "./dataBlockInner/coordArrInputs.vue";
 import OptInputs from "./dataBlockInner/optInputs.vue";
 
 const emit = defineEmits(["delete"]);
-const dataItem = defineModel<FunctionPlotDatum>();
+const dataItem = defineModel<Datum>();
 const block = ref<HTMLDivElement>();
 const blockFolded = ref(true);
-function fnTypeChange(
-  dataItem:
-    | (Omit<FunctionPlotDatum, "fnType"> & {
-        fnType: "text" | FunctionPlotDatum["fnType"];
-      })
-    | FunctionPlotDatum
-) {
+function fnTypeChange(dataItem: Datum) {
   inputTypeArr.forEach((key) => delete dataItem[key]);
   if (dataItem.fnType === "text") {
     dataItem.graphType = "text";

src/components/dataBlock.vue

@@ -45,16 +45,11 @@
 </template>
 
 <script setup lang="ts">
-import { FnType } from "../../consts";
-import { FunctionPlotDatum } from "function-plot";
+import { InputProps } from "../../consts";
 import { onMounted, ref, watch } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
 
-const { dataItem, fnType } = defineProps<{
-  dataItem: FunctionPlotDatum;
-  fnType: FnType;
-  blockFolded: boolean;
-}>();
+const { dataItem, fnType } = defineProps<InputProps>();
 
 type PrivateData = {
   id: number;

src/components/dataBlockInner/coordArrInputs.vue

@@ -25,17 +25,12 @@
 </template>
 
 <script setup lang="ts">
-import { FnType, CoordType } from "../../consts";
-import { FunctionPlotDatum } from "function-plot";
+import { CoordType, Datum, InputProps } from "../../consts";
 
-const { dataItem, fnType } = defineProps<{
-  dataItem: FunctionPlotDatum;
-  fnType: FnType;
-  blockFolded: boolean;
-}>();
+const { dataItem, fnType } = defineProps<InputProps>();
 
 function handleCoordInput(
-  dataItem: FunctionPlotDatum,
+  dataItem: Datum,
   input: CoordType,
   index: 0 | 1,
   event: Event

src/components/dataBlockInner/coordInputs.vue

@@ -15,20 +15,11 @@
 </template>
 
 <script setup lang="ts">
-import { FnType, OptInput } from "../../consts";
-import { FunctionPlotDatum } from "function-plot";
+import { Datum, InputProps, OptInput } from "../../consts";
 
-const { dataItem, fnType } = defineProps<{
-  dataItem: FunctionPlotDatum;
-  fnType: FnType;
-  blockFolded: boolean;
-}>();
+const { dataItem, fnType } = defineProps<InputProps>();
 
-function handleCoordInput(
-  dataItem: FunctionPlotDatum,
-  input: OptInput,
-  event: Event
-) {
+function handleCoordInput(dataItem: Datum, input: OptInput, event: Event) {
   const raw = (<HTMLInputElement>event.target).value;
   if (raw === "") {
     delete dataItem[input.value];

src/components/dataBlockInner/optInputs.vue

@@ -10,13 +10,8 @@
 </template>
 
 <script setup lang="ts">
-import { FnType } from "../../consts";
-import { FunctionPlotDatum } from "function-plot";
-const { dataItem, fnType } = defineProps<{
-  dataItem: FunctionPlotDatum;
-  fnType: FnType;
-  blockFolded: boolean;
-}>();
+import { InputProps } from "../../consts";
+const { dataItem, fnType } = defineProps<InputProps>();
 </script>
 
 <style>

src/components/dataBlockInner/strInputs.vue

@@ -10,20 +10,18 @@
         : (dataItem[input.value] = true)
     "
   >
-    <button class="switch" :class="dataItem[input.value] ? 'on' : 'off'"></button>
+    <button
+      class="switch"
+      :class="dataItem[input.value] ? 'on' : 'off'"
+    ></button>
     {{ input.label }}
   </div>
 </template>
 
 <script setup lang="ts">
-import { FnType } from "../../consts";
-import { FunctionPlotDatum } from "function-plot";
+import { InputProps } from "../../consts";
 
-const { dataItem, fnType } = defineProps<{
-  dataItem: FunctionPlotDatum;
-  fnType: FnType;
-  blockFolded: boolean;
-}>();
+const { dataItem, fnType } = defineProps<InputProps>();
 </script>
 
 <style>
@@ -44,7 +42,7 @@ const { dataItem, fnType } = defineProps<{
   border-radius: 5px;
   position: relative;
   border-radius: 10px;
-  border:none
+  border: none;
 }
 .switch.on {
   background: var(--c-accent);