数据导入弹窗改为自定义 UI

Linho1219 · Linho1219 · commit 469f0502d7f3 · 2025-04-23T20:06:58.000+08:00
diff --git a/src/App.vue b/src/App.vue
@@ -13,7 +13,7 @@
             <s-scroll-view>
               <VueDraggable
                 v-model="graphData"
-                :animation="150"
+                :animation="300"
                 handle=".datablock-drag"
               >
                 <DataBlock
@@ -40,21 +40,37 @@
                 <s-ripple attached></s-ripple>
               </div>
             </s-scroll-view>
-
-            <s-tooltip class="data-import">
-              <s-fab slot="trigger" @click.stop="handleImport()">
-                <s-icon>
-                  <svg viewBox="0 -960 960 960">
-                    <path
-                      d="M480-120v-80h280v-560H480v-80h280q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H480Zm-80-160-55-58 102-102H120v-80h327L345-622l55-58 200 200-200 200Z"
-                    ></path>
-                  </svg>
-                </s-icon>
-              </s-fab>
-              {{ t("buttons.import") }}
-            </s-tooltip>
+            <s-dialog>
+              <s-tooltip class="data-import" slot="trigger">
+                <s-fab slot="trigger">
+                  <s-icon>
+                    <svg viewBox="0 -960 960 960">
+                      <path
+                        d="M480-120v-80h280v-560H480v-80h280q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H480Zm-80-160-55-58 102-102H120v-80h327L345-622l55-58 200 200-200 200Z"
+                      ></path>
+                    </svg>
+                  </s-icon>
+                </s-fab>
+                {{ t("buttons.import") }}
+              </s-tooltip>
+              <div slot="headline">{{ t("title.source") }}</div>
+              <s-text-field
+                slot="text"
+                label="JSON5 / JSON"
+                multiLine
+                style="min-height: 180px; min-width: 40vw"
+                v-model.lazy="importStr"
+                class="monospace"
+              ></s-text-field>
+              <s-button slot="action" type="text">
+                {{ t("buttons.cancel") }}
+              </s-button>
+              <s-button slot="action" type="text" @click="handleImport">
+                {{ t("buttons.confirm") }}
+              </s-button>
+            </s-dialog>
           </div>
-          <CodeDisplay :dataArr="toOriginalDatum(graphData)" />
+          <CodeDisplay :dataArr="toOriginalDatum(graphData, true)" />
           <div id="divider" @mousedown="handleDrag"></div>
         </div>
         <div id="graph" ref="shellRef">
@@ -74,7 +90,6 @@
 </template>
 
 <script setup lang="ts">
-import "sober";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 
@@ -149,12 +164,27 @@ function handleDrag() {
 function toogleDrawer() {
   innerDrawer.value?.toggle();
 }
+
+const importStr = ref("");
+import { Snackbar } from "sober";
 function handleImport() {
-  const raw = prompt("源数据：");
-  if (!raw) return;
-  graphData.value = toInternalDatum(
-    (JSON5.parse(raw).data as FunctionPlotDatum[]) ?? []
-  );
+  if (importStr.value !== "") {
+    try {
+      graphData.value = toInternalDatum(
+        (JSON5.parse(importStr.value).data as FunctionPlotDatum[]) ?? []
+      );
+      Snackbar.builder({
+        text: t("title.importSuccess"),
+        type: "success",
+      });
+    } catch (e) {
+      Snackbar.builder({
+        text: t("title.importFail"),
+        type: "error",
+      });
+    }
+    importStr.value = "";
+  }
 }
 </script>
 
diff --git a/src/components/dataBlock.vue b/src/components/dataBlock.vue
@@ -29,39 +29,58 @@
         </s-picker-item>
       </s-picker>
       <div style="flex-grow: 1"></div>
-      <s-tooltip>
-        <s-icon-button slot="trigger" @click="emit('delete')">
+      <div class="dataBlockBtns">
+        <s-tooltip>
+          <s-icon-button slot="trigger" @click="emit('delete')">
+            <s-icon style="color: var(--s-color-error)">
+              <svg viewBox="0 -960 960 960">
+                <path
+                  d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"
+                ></path>
+              </svg>
+            </s-icon>
+          </s-icon-button>
+          {{ t("buttons.del") }}
+        </s-tooltip>
+        <s-tooltip>
+          <s-icon-button
+            slot="trigger"
+            @click="dataItem.hidden = !dataItem.hidden"
+            :type="dataItem.hidden ? 'filled-tonal' : 'standard'"
+          >
+            <s-icon>
+              <svg viewBox="0 -960 960 960">
+                <path
+                  d="M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+                ></path>
+              </svg>
+            </s-icon>
+          </s-icon-button>
+          {{ t("buttons.hide") }}
+        </s-tooltip>
+        <s-tooltip>
+          <s-icon-button
+            slot="trigger"
+            @click="
+              blockFolded = !blockFolded;
+              console.log(foldShell);
+            "
+          >
+            <s-icon :name="blockFolded ? 'chevron_down' : 'chevron_up'">
+            </s-icon>
+          </s-icon-button>
+          {{ t(blockFolded ? "buttons.expand" : "buttons.collapse") }}
+        </s-tooltip>
+        <span class="datablock-drag">
           <s-icon>
             <svg viewBox="0 -960 960 960">
               <path
-                d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"
+                d="M320-440v-287L217-624l-57-56 200-200 200 200-57 56-103-103v287h-80ZM600-80 400-280l57-56 103 103v-287h80v287l103-103 57 56L600-80Z"
               ></path>
             </svg>
           </s-icon>
-        </s-icon-button>
-        {{ t("buttons.del") }}
-      </s-tooltip>
-      <s-tooltip>
-        <s-icon-button
-          slot="trigger"
-          @click="
-            blockFolded = !blockFolded;
-            console.log(foldShell);
-          "
-        >
-          <s-icon :name="blockFolded ? 'chevron_down' : 'chevron_up'"> </s-icon>
-        </s-icon-button>
-        {{ t(blockFolded ? "buttons.expand" : "buttons.collapse") }}
-      </s-tooltip>
-      <span class="datablock-drag">
-        <s-icon>
-          <svg viewBox="0 -960 960 960">
-            <path
-              d="M320-440v-287L217-624l-57-56 200-200 200 200-57 56-103-103v287h-80ZM600-80 400-280l57-56 103 103v-287h80v287l103-103 57 56L600-80Z"
-            ></path>
-          </svg>
-        </s-icon>
-      </span>
+        </span>
+      </div>
     </div>
 
     <div class="inputs">
@@ -198,13 +217,17 @@ const allowedGraphType = computed(() =>
 .selectors s-picker {
   width: 8em;
 }
-
+.dataBlockBtns {
+  display: flex;
+}
 .datablock-drag {
   width: 40px;
+  height: 40px;
   text-align: center;
-  line-height: 40px;
   border-radius: 50%;
   cursor: grab;
+  display: inline-flex;
+  justify-content: center;
 }
 
 .sortable-chosen .datablock-drag {
diff --git a/src/components/dataBlockInner/coordArrInputs.vue b/src/components/dataBlockInner/coordArrInputs.vue
@@ -3,7 +3,7 @@
     class="coordarr-wrapper styled"
     v-if="fnType.coordArr"
     v-model="privateData"
-    :animation="150"
+    :animation="300"
     handle="span.coordarr-drag"
   >
     <div
diff --git a/src/consts.ts b/src/consts.ts
@@ -74,11 +74,20 @@ export type InternalDatum = Omit<FunctionPlotDatum, "fnType" | "graphType"> & {
   fnType: "text" | FunctionPlotDatum["fnType"];
   graphType: FunctionPlotDatum["graphType"];
   key: number;
+  hidden?: boolean;
 };
 
-export function toOriginalDatum(items: InternalDatum[]) {
+export function toOriginalDatum(items: InternalDatum[], forExport?: boolean) {
   const cloned = cloneDeep(items);
-  cloned.forEach((item) => {
+  return cloned.flatMap((item) => {
+    if (item.hidden)
+      if (forExport) return [];
+      else
+        return {
+          fnType: "points",
+          graphType: "polyline",
+          points: [],
+        };
     const fnType = item.fnType;
     const graphType = item.graphType;
     const graphTypeObj = getAllowedGraphType(fnType).find(
@@ -91,8 +100,8 @@ export function toOriginalDatum(items: InternalDatum[]) {
       delete (<any>item).graphType;
     }
     delete (<any>item).key;
-  });
-  return cloned as FunctionPlotDatum[];
+    return item;
+  }) as FunctionPlotDatum[];
 }
 export function toInternalDatum(items: FunctionPlotDatum[]) {
   const cloned = cloneDeep(items) as InternalDatum[];
@@ -364,13 +373,3 @@ export const fnTypeArr = [
     ],
   },
 ] as const satisfies FnType[];
-
-export function findError(graphData: FunctionPlotDatum[]) {
-  for (const [index, dataItem] of graphData.entries()) {
-    const fnType = getFnType(dataItem.fnType);
-    for (const input of fnType.inputs) if (!dataItem[input.value]) return index;
-    for (const coord of fnType.coord ?? [])
-      if (!dataItem[coord.value] && !coord.optional) return index;
-  }
-  return 0;
-}
diff --git a/src/i18n.ts b/src/i18n.ts
@@ -7,12 +7,14 @@ export default createI18n({
       buttons: {
         add: "添加",
         import: "导入",
-        raw: "原始数据",
         del: "删除",
         expand: "展开",
         collapse: "收起",
         reset: "重置",
         addPoint: "添加点",
+        hide: "隐藏",
+        cancel: "取消",
+        confirm: "确定",
       },
       graphType: {
         interval: "默认",
@@ -46,18 +48,23 @@ export default createI18n({
       },
       title: {
         output: "输出代码",
+        source: "数据源",
+        importSuccess: "导入成功",
+        importFail: "导入失败",
       },
     },
     "en-US": {
       buttons: {
         add: "Add",
         import: "Import",
-        raw: "Raw data",
         del: "Delete",
         expand: "Expand",
         collapse: "Collapse",
         reset: "Reset",
         addPoint: "Add Point",
+        hide: "Hide",
+        cancel: "Cancel",
+        confirm: "Confirm",
       },
       graphType: {
         interval: "Interval",
@@ -91,7 +98,9 @@ export default createI18n({
       },
       title: {
         output: "Output code",
-        defaultTo: "Default to {defaultValue}",
+        source: "Data Source",
+        importSuccess: "Import success",
+        importFail: "Import failed",
       },
     },
   },
diff --git a/src/main.ts b/src/main.ts
@@ -4,6 +4,8 @@ import i18n from "./i18n";
 import "./style.css";
 import App from "./App.vue";
 
+import "sober";
+
 const app = createApp(App);
 
 app.use(i18n);
diff --git a/src/style.css b/src/style.css
@@ -61,5 +61,10 @@ input[type="number"] {
 
 .styled::part(input),
 .styled {
-  font-family: "KaTeX-Italic", "KaTeX", "KaTeX-Math","Times new roman";
+  font-family: "KaTeX-Italic", "KaTeX", "KaTeX-Math", "Times new roman";
+}
+
+.monospace,
+.monospace::part(input) {
+  font-family: "Jetbrains Mono", monospace;
 }

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`class="coordarr-wrapper styled"`
`4`	`4`	`v-if="fnType.coordArr"`
`5`	`5`	`v-model="privateData"`
`6`		`- :animation="150"`
	`6`	`+ :animation="300"`
`7`	`7`	`handle="span.coordarr-drag"`
`8`	`8`	`>`
`9`	`9`	`<div`