输出框优化

修复bug，添加复制按钮

Author: Linho1219

src/consts.ts

@@ -108,6 +108,7 @@ export function toOriginalDatum(items: InternalDatum[], forExport?: boolean) {
       delete (<any>item).graphType;
     }
     delete (<any>item).key;
+    delete (<any>item).hidden;
     return item;
   }) as FunctionPlotDatum[];
 }
@@ -388,11 +389,19 @@ export const fnTypeArr = [
 
 // Datum define
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 export const useProfile = defineStore("profile", () => {
   const data = ref<InternalDatum[]>([
     { fnType: "linear", graphType: "polyline", fn: "x^2", key: 1 },
   ]);
-  const getOriginalCopy = () => toOriginalDatum(data.value);
+  const getOriginalCopy = (forExport?: boolean) => toOriginalDatum(data.value, forExport);
   return { data, getOriginalCopy };
-});
+});
+// Theme define
+export const useTheme = defineStore("theme", () => {
+  const themeValues = ["auto", "dark", "light"] as const;
+  const index = ref(0);
+  const value = computed(() => themeValues[index.value]);
+  const toogle = () => index.value = (index.value + 1) % themeValues.length
+  return { index, value, toogle }
+})

src/editor/output.vue

@@ -9,6 +9,16 @@
         ></s-icon>
         {{ t(folded ? "buttons.expand" : "buttons.collapse") }}
       </s-button>
+
+      <s-tooltip align="right">
+        <s-icon-button
+          slot="trigger"
+          @click="copyCode"
+        >
+          <SIconCopy />
+        </s-icon-button>
+        {{ t("buttons.copy") }}
+      </s-tooltip>
     </div>
     <s-fold :folded="folded">
       <s-scroll-view id="formattedCode">
@@ -22,6 +32,8 @@
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 
+import SIconCopy from "@/ui/icons/copy.vue";
+
 import JSON5 from "json5";
 import prettier from "prettier/standalone";
 import prettierPluginBabel from "prettier/plugins/babel";
@@ -35,7 +47,7 @@ watch(
   profile,
   () => {
     prettier
-      .format(JSON5.stringify({ data: profile.data }), {
+      .format(JSON5.stringify({ data: profile.getOriginalCopy(true) }), {
         parser: "json5",
         printWidth: 40,
         plugins: [prettierPluginBabel, prettierPluginEstree],
@@ -46,6 +58,15 @@ watch(
 );
 
 const folded = ref(true);
+
+import { Snackbar } from "sober";
+function copyCode() {
+  navigator.clipboard.writeText(formatted.value);
+  Snackbar.builder({
+    text: t("title.copySuccess"),
+    type: "success",
+  });
+}
 </script>
 
 <style>
@@ -78,12 +99,13 @@ const folded = ref(true);
 }
 
 .plot-data.output pre {
-  user-select: all;
+  user-select: text;
+  cursor: text;
   margin: 0;
 }
 
 ::selection {
-  background-color: var(--s-color-primary);
-  color: var(--s-color-scrim);
+  background: var(--s-color-primary);
+  color: var(--s-color-on-primary);
 }
 </style>

src/ui/icons/copy.vue

@@ -0,0 +1,9 @@
+<template>
+  <s-icon>
+    <svg viewBox="0 -960 960 960">
+      <path
+        d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"
+      ></path>
+    </svg>
+  </s-icon>
+</template>