Feat:支持在未配置github gist的情况下将变动保存到url中

Author: wanglin25

README.md

@@ -36,6 +36,8 @@
 
 - [x] 内置支持保存到github gist【[gist API](https://docs.github.com/cn/rest/reference/gists)】，想要保存到自己的存储体系修改也十分简单
 
+- [x] 内置支持在未配置github gist的情况下将变动保存到url中，可方便的将url分享给他人查看
+
 - [x] 内置支持生成和[carbon](https://carbon.now.sh/)一样漂亮美观的代码图片
 
 - [x] 内置使用[unpkg](https://unpkg.com/)及[importmap](https://github.com/WICG/import-maps)支持在浏览器上使用ES模块语法

package.json

@@ -41,6 +41,7 @@
     "dayjs": "^1.10.7",
     "element-plus": "^1.1.0-beta.12",
     "eventemitter3": "^4.0.7",
+    "fflate": "^0.8.0",
     "html2canvas": "^1.3.2",
     "jszip": "^3.7.1",
     "livescript": "^1.6.0",

src/pages/edit/Index.vue

@@ -23,7 +23,7 @@ import { layoutMap, defaultViewThemeConfig } from '@/config/constants'
 import { useRouter, useRoute } from 'vue-router'
 import { initMonacoEditor } from '@/utils/monacoEditor'
 import nprogress from 'nprogress'
-import { getThemeValue } from '@/utils'
+import { getThemeValue, utoa } from '@/utils'
 
 const props = defineProps({
   // 是否是嵌入模式
@@ -48,7 +48,10 @@ const useInit = () => {
   // 获取当前编辑数据
   const getData = async () => {
     nprogress.start()
-    await store.dispatch('getData', route.params.id)
+    await store.dispatch('getData', {
+      id: route.params.id, 
+      data: route.query.data
+    })
     proxy.$eventEmitter.emit('reset_code')
     nprogress.done()
   }
@@ -57,8 +60,10 @@ const useInit = () => {
     () => {
       return route.params
     },
-    () => {
-      getData()
+    (newVal, oldVal) => {
+      if (newVal.params.id !== oldVal.params.id) {
+        getData()
+      }
     }
   )
   getData()
@@ -71,6 +76,26 @@ const useInit = () => {
   }
 }
 
+// 将数据保存到query里
+const useQueryStore = (store, router) => {
+  watch(() => {
+    return store.state.editData
+  },() => {
+    if (store.state.githubToken) {
+      return
+    }
+    let data = utoa(JSON.stringify(store.state.editData))
+    router.replace({
+      name: 'Editor',
+      query: {
+        data
+      }
+    })
+  }, {
+    deep: true
+  })
+}
+
 // 布局
 const useLayout = ({ store }) => {
   const layout = computed(() => {
@@ -210,6 +235,7 @@ const useTheme = ({ proxy, store, layout }) => {
 
 // created部分
 const { proxy, router, store, init, showContent } = useInit()
+useQueryStore(store, router)
 const { layout, activeLayout } = useLayout({ store })
 const { themeData } = useTheme({ proxy, store, layout })
 const { previewLayoutHandle } = useWindowPreview({

src/store.js

@@ -1,5 +1,5 @@
 import { createStore } from 'vuex'
-import { generateUUID } from '@/utils'
+import { generateUUID, atou } from '@/utils'
 import { create, request } from '@/utils/octokit'
 // 存储github token的本地存储的key
 const githubTokenSaveKey = 'codeRun:githubToken'
@@ -214,7 +214,7 @@ const store = createStore({
      * @Date: 2021-05-12 19:49:17
      * @Desc:  获取数据
      */
-    getData(ctx, id) {
+    getData(ctx, { id, data }) {
       return new Promise(async resolve => {
         try {
           let parseData = createDefaultData()
@@ -223,6 +223,8 @@ const store = createStore({
               gist_id: id
             })
             parseData = JSON.parse(data.files['coderun.json'].content)
+          } else if (data) {
+            parseData = JSON.parse(atou(data))
           }
           ctx.commit('setEditData', parseData)
           resolve()

src/utils/index.js

@@ -2,6 +2,7 @@ import { load } from '@/utils/load'
 import transform from '@/utils/transform'
 import { routerMode, base } from '@/config'
 import { defaultViewThemeConfig } from '@/config/constants'
+import { zlibSync, strToU8, strFromU8, unzlibSync } from 'fflate'
 
 /**
  * javascript comment
@@ -182,3 +183,32 @@ export const getThemeValue = (item, data, pageThemeSyncCodeTheme) => {
   }
   return arr[len - 1]
 }
+
+// 压缩数据
+export const utoa = (data) => {
+  // 将字符串转成Uint8Array
+  const buffer = strToU8(data)
+  // 以最大的压缩级别进行压缩，返回的zipped也是一个Uint8Array
+  const zipped = zlibSync(buffer, { level: 9 })
+  // 将Uint8Array重新转换成二进制字符串
+  const binary = strFromU8(zipped, true)
+  // 将二进制字符串编码为Base64编码字符串
+  return btoa(binary)
+}
+
+// 解压缩数据
+export const atou = (base64) => {
+  // 将base64转成二进制字符串
+  const binary = atob(base64)
+  // 检查是否是zlib压缩的数据，zlib header (x78), level 9 (xDA)
+  if (binary.startsWith('\x78\xDA')) {
+      // 将字符串转成Uint8Array
+      const buffer = strToU8(binary, true)
+      // 解压缩
+      const unzipped = unzlibSync(buffer)
+      // 将Uint8Array重新转换成字符串
+      return strFromU8(unzipped)
+  }
+  // 兼容没有使用压缩的数据
+  return decodeURIComponent(escape(binary))
+}