add share

src/composables/code.ts

@@ -4,6 +4,9 @@ import { sources } from "../templates"
 import { submit } from "../api"
 import { useStorage } from "@vueuse/core"
 import { isMobile } from "./breakpoints"
+import { atou, utoa } from "../utils"
+import copyTextToClipboard from "copy-text-to-clipboard"
+import queryString from "query-string"
 
 const defaultLanguage = "python"
 
@@ -18,14 +21,14 @@ const cache: Cache = {
 }
 
 export const code = reactive<Code>({
-  value: cache.code[defaultLanguage].value,
-  language: cache.language.value,
+  value: sources[defaultLanguage],
+  language: defaultLanguage,
 })
-export const input = ref(cache.input.value)
+export const input = ref("")
 export const output = ref("")
 export const status = ref(Status.NotStarted)
-export const loading = ref(!code.value)
-export const size = ref(cache.fontsize)
+export const loading = ref(false)
+export const size = ref(0)
 
 watch(size, (value: number) => {
   cache.fontsize.value = value
@@ -59,6 +62,16 @@ export function init() {
   input.value = cache.input.value
   size.value = cache.fontsize.value
   status.value = Status.NotStarted
+
+  const parsed = queryString.parse(location.search)
+  const base64 = parsed.share as string
+  if (!base64) return
+  try {
+    const data = JSON.parse(atou(base64))
+    code.language = data.lang
+    code.value = data.code
+    input.value = data.input
+  } catch (err) {}
 }
 
 export function clearInput() {
@@ -86,3 +99,15 @@ export async function run() {
   status.value = result.status
   loading.value = false
 }
+
+export function share() {
+  const data = {
+    lang: code.language,
+    code: code.value,
+    input: input.value,
+  }
+  const base64 = utoa(JSON.stringify(data))
+  copyTextToClipboard(
+    queryString.stringifyUrl({ url: location.href, query: { share: base64 } }),
+  )
+}

src/desktop/Header.vue

@@ -1,7 +1,15 @@
 <script setup lang="ts">
-import { size, run, loading } from "../composables/code"
+import { size, run, loading, share } from "../composables/code"
 import ThemeButton from "../components/ThemeButton.vue"
 import SelectLanguage from "../components/SelectLanguage.vue"
+import { useMessage } from "naive-ui"
+
+const message = useMessage()
+
+function handleShare() {
+  share()
+  message.success("分享链接已复制")
+}
 </script>
 
 <template>
@@ -9,6 +17,7 @@ import SelectLanguage from "../components/SelectLanguage.vue"
     <n-flex justify="space-between" align="center">
       <div class="title">徐越的自测猫</div>
       <n-flex>
+        <n-button @click="handleShare">分享</n-button>
         <ThemeButton />
         <n-input-number
           v-model:value="size"

src/mobile/Header.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useMessage, type DropdownOption } from "naive-ui"
-import { code, loading, reset, run } from "../composables/code"
+import { code, loading, reset, run, share } from "../composables/code"
 import { tab } from "../composables/tab"
 import copyTextToClipboard from "copy-text-to-clipboard"
 
@@ -15,9 +15,15 @@ function copy() {
   message.success("已经复制好了")
 }
 
+function handleShare() {
+  share()
+  message.success("分享链接已复制")
+}
+
 const menu: DropdownOption[] = [
   { label: "复制", key: "copy", props: { onClick: copy } },
   { label: "重置", key: "reset", props: { onClick: reset } },
+  { label: "分享", key: "share", props: { onClick: handleShare } },
 ]
 </script>
 <template>

src/utils.ts

@@ -0,0 +1,15 @@
+import { strFromU8, strToU8, unzlibSync, zlibSync } from "fflate"
+
+export function utoa(data: string): string {
+  const buffer = strToU8(data)
+  const zipped = zlibSync(buffer, { level: 9 })
+  const binary = strFromU8(zipped, true)
+  return btoa(binary)
+}
+
+export function atou(base64: string): string {
+  const binary = atob(base64)
+  const buffer = strToU8(binary, true)
+  const unzipped = unzlibSync(buffer)
+  return strFromU8(unzipped)
+}