From d09b0e84093f5172e596bc064ef74d749cab6a15 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Fri, 10 Jun 2022 18:46:55 +0800
Subject: [PATCH 1/3] =?UTF-8?q?chore:=20=E6=9B=B4=E6=94=B9=20layui=20?=
 =?UTF-8?q?=E5=92=8C=20layui-vue=20=E7=9A=84=E5=88=87=E6=8D=A2=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header.vue                     |  9 +++---
 src/download/download.ts                      |  6 ++--
 .../{vite.config.js => vite.config.ts}        |  0
 src/store.ts                                  | 30 +++++++++----------
 4 files changed, 23 insertions(+), 22 deletions(-)
 rename src/download/template/{vite.config.js => vite.config.ts} (100%)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 88c462a..b092676 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -118,6 +118,7 @@ const { isFullscreen, toggle } = useFullscreen()
 
 const UILibActiveRef = ref(versions.UILib.published[0])
 const vueActiveRef = ref(versions.vue.published[0])
+const activeLibRef = ref(preferSFC.value ? "layuivue" : "layui")
 
 watch(() => [versions.UILib.published, versions.vue.published], () => {
   UILibActiveRef.value = versions.UILib.published[0]
@@ -146,10 +147,6 @@ const toggleLib = () => {
 
     <!-- 版本选择 -->
     <div class="links">
-      <button class="button" @click="toggleLib()">
-        <span>{{ UIPackage === 'layui' ? 'Layui' : 'LayuiVue' }}</span>
-      </button>
-
       <!-- <div v-for="(v, key) of versions" :key="key" class="flex items-center lt-lg-hidden">
         <span class="mr-1" style="margin-left: 15px;">{{ v.text }} :</span>
         <select v-model="v.active" @change="setVersion(key, v.active)" style="width: 150px">
@@ -159,6 +156,10 @@ const toggleLib = () => {
       </div> -->
 
       <div class="flex items-center lt-lg-hidden">
+       <select v-model="activeLibRef" @change="toggleLib()" style="border:none;">
+        <option value="layuivue">LayuiVue</option>
+        <option value="layui">Layui</option>
+      </select>
         <div>
         <span class="mr-1" style="margin-left: 15px;">{{ versions.UILib.text }} :</span>
         <select v-model="UILibActiveRef" @change="setVersion('UILib', UILibActiveRef)" style="width: 150px">
diff --git a/src/download/download.ts b/src/download/download.ts
index 359db2e..79695cc 100644
--- a/src/download/download.ts
+++ b/src/download/download.ts
@@ -1,5 +1,5 @@
 import { saveAs } from 'file-saver'
-import { defaultMainFile, LIB_INSTALL_FILE } from '../store'
+import { defaultMainFile, libInstallFile } from '../store'
 
 import index from './template/index.html?raw'
 import main from './template/main.ts?raw'
@@ -16,7 +16,7 @@ export async function downloadProject(store: any) {
 
   const { default: JSZip } = await import('jszip')
   const zip = new JSZip()
-  const excludeFiles = [defaultMainFile, LIB_INSTALL_FILE, 'import-map.json']
+  const excludeFiles = [defaultMainFile, libInstallFile.value, 'import-map.json']
 
   // basic structure
   zip.file('index.html', index)
@@ -38,4 +38,4 @@ export async function downloadProject(store: any) {
 
   const blob = await zip.generateAsync({ type: 'blob' })
   saveAs(blob, 'layui-vue-example-project.zip')
-}
\ No newline at end of file
+}
diff --git a/src/download/template/vite.config.js b/src/download/template/vite.config.ts
similarity index 100%
rename from src/download/template/vite.config.js
rename to src/download/template/vite.config.ts
diff --git a/src/store.ts b/src/store.ts
index 84da40b..c459703 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -14,13 +14,20 @@ export const UIPackage = ref<string>(config.UIPackage)
 export const defaultHTMLFile = 'index.html'
 export const defaultMainFile = 'PlaygroundMain.vue'
 export const defaultAppFile = 'App.vue'
-export const LIB_INSTALL_FILE =  preferSFC.value ? 'LibInstall.js' : UIPackage.value + ".js"
+export const libInstallFile =  ref<string>('LibInstall.js')
+
+// FIXME 临时的兼容方法
+if (window.location.search.includes("deps=layui")) {
+  preferSFC.value = false
+  UIPackage.value = "layui"
+  libInstallFile.value = UIPackage.value + '.js'
+}
 
 // PlaygroundMain.vue
 const mainCode = `
 <script setup>
 import App from './App.vue'
-import { setupLib } from './${LIB_INSTALL_FILE}'
+import { setupLib } from './${libInstallFile.value}'
 setupLib()
 </script>
 <template>
@@ -95,10 +102,8 @@ export function loadStyle() {
 }
 
 export function loadLib() {
-  const $libID = document.querySelector('#lib-id')
   return new Promise((resolve, reject) => {
     const script = document.createElement('script')
-    script.id = "lib-id"
   	script.src = '${genLink(UIPackage.value, version)}'
     script.onload = resolve
     script.onerror = reject
@@ -106,13 +111,13 @@ export function loadLib() {
   })
 }
 `
-
+// index.html
 const defaultHTMLFileCode = `
 <div>
   <button type="button" class="layui-btn">默认按钮</button>
 </div>
 <script type='module'>
-import './${LIB_INSTALL_FILE}'
+import './${libInstallFile.value}'
 
 const { layer } = layui
 
@@ -141,11 +146,6 @@ export class ReplStore implements Store {
     versions?: Versions
   }) {
     let files: StoreState['files'] = {}
-    // FIXME 临时的兼容方法
-    if(window.location.search.includes("deps=layui")){
-      preferSFC.value = false
-      UIPackage.value = "layui"
-    }
     
     if (serializedState) {
       const saved = JSON.parse(atou(serializedState))
@@ -177,8 +177,8 @@ export class ReplStore implements Store {
 
   async init() {
     await this.setVueVersion(this.versions.vue)
-    this.state.files[LIB_INSTALL_FILE] = new File(
-      LIB_INSTALL_FILE,
+    this.state.files[libInstallFile.value] = new File(
+      libInstallFile.value,
       LibInstallFileCode('').trim(),
       isHidden
     )
@@ -206,7 +206,7 @@ export class ReplStore implements Store {
   }
 
   deleteFile(filename: string) {
-    if (filename === LIB_INSTALL_FILE || filename === defaultMainFile || filename === defaultHTMLFile) {
+    if (filename === libInstallFile.value || filename === defaultMainFile || filename === defaultHTMLFile) {
       alert(`You cannot remove it, because ${UIPackage.value} requires it.`)
       return
     }
@@ -315,7 +315,7 @@ export class ReplStore implements Store {
   }
 
   async setUILibVersion(version: string) {
-    this.state.files[LIB_INSTALL_FILE].code = LibInstallFileCode(version).trim() // 更新版本重新编译所有文件
+    this.state.files[libInstallFile.value].code = LibInstallFileCode(version).trim() // 更新版本重新编译所有文件
     for (const file of Object.values(this.state.files)) {
       compileFile(this, file)
     }
-- 
Gitee


From 69ebef3b39f991189ce3c7ffebbbcdf732656f96 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Fri, 10 Jun 2022 19:28:44 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E6=A0=BC=E5=BC=8F=E5=8C=96?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json   |  5 +++--
 pnpm-lock.yaml | 46 +++++++++++++++++++++++++---------------------
 src/App.vue    | 49 +++++++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 75 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index e5fcfb1..aaf6089 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
-    "@layui/layui-vue": "1.1.3",
+    "@layui/layui-vue": "1.1.5",
     "@vue/repl": "1.2.4",
     "@vueuse/core": "8.5.0",
     "compare-versions": "4.1.3",
@@ -32,12 +32,13 @@
     "@sxzz/eslint-config-prettier": "1.6.1",
     "@sxzz/eslint-config-vue": "1.6.4",
     "@types/node": "*",
+    "@types/prettier": "^2.6.3",
     "@vitejs/plugin-vue": "2.3.3",
     "eslint": "8.7.0",
     "eslint-define-config": "1.2.3",
     "local-pkg": "0.4.1",
     "patch-package": "^6.4.7",
-    "prettier": "2.5.1",
+    "prettier": "2.6.1",
     "standard-version": "9.3.2",
     "typescript": "4.7.2",
     "unocss": "0.34.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c1ffdcc..e97f91c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,10 +1,11 @@
 lockfileVersion: 5.3
 
 specifiers:
-  '@layui/layui-vue': 1.1.3
+  '@layui/layui-vue': 1.1.5
   '@sxzz/eslint-config-prettier': 1.6.1
   '@sxzz/eslint-config-vue': 1.6.4
   '@types/node': '*'
+  '@types/prettier': ^2.6.3
   '@vitejs/plugin-vue': 2.3.3
   '@vue/repl': 1.2.4
   '@vueuse/core': 8.5.0
@@ -15,7 +16,7 @@ specifiers:
   jszip: ^3.10.0
   local-pkg: 0.4.1
   patch-package: ^6.4.7
-  prettier: 2.5.1
+  prettier: 2.6.1
   standard-version: 9.3.2
   typescript: 4.7.2
   unocss: 0.34.1
@@ -28,7 +29,7 @@ specifiers:
   vue-tsc: 0.35.0
 
 dependencies:
-  '@layui/layui-vue': 1.1.3_vue@3.2.36
+  '@layui/layui-vue': 1.1.5_vue@3.2.36
   '@vue/repl': 1.2.4_vue@3.2.36
   '@vueuse/core': 8.5.0_vue@3.2.36
   compare-versions: registry.npmmirror.com/compare-versions/4.1.3
@@ -41,12 +42,13 @@ devDependencies:
   '@sxzz/eslint-config-prettier': registry.npmmirror.com/@sxzz/eslint-config-prettier/1.6.1_eslint@8.7.0
   '@sxzz/eslint-config-vue': registry.npmmirror.com/@sxzz/eslint-config-vue/1.6.4_eslint@8.7.0+typescript@4.7.2
   '@types/node': registry.npmmirror.com/@types/node/17.0.15
+  '@types/prettier': 2.6.3
   '@vitejs/plugin-vue': 2.3.3_vite@2.9.9+vue@3.2.36
   eslint: registry.npmmirror.com/eslint/8.7.0
   eslint-define-config: registry.npmmirror.com/eslint-define-config/1.2.3
   local-pkg: registry.npmmirror.com/local-pkg/0.4.1
   patch-package: registry.npmmirror.com/patch-package/6.4.7
-  prettier: registry.npmmirror.com/prettier/2.5.1
+  prettier: 2.6.1
   standard-version: registry.npmmirror.com/standard-version/9.3.2
   typescript: 4.7.2
   unocss: 0.34.1_vite@2.9.9
@@ -151,15 +153,15 @@ packages:
     resolution: {integrity: sha512-GZ69m1/rG1Rb+VSVYFqLzy4Hzx1unOOvOCMfk3VAZ8bulHdi/Qab7woTwUdMTyQW+ghi9iqlpq30tly9qIUrzQ==}
     dev: false
 
-  /@layui/layer-vue/1.3.14:
-    resolution: {integrity: sha512-IgYaB7gY4MKaqSqrj0PO4XLJhKwCoJQubaNQNxHZhkXz2zQbVasvNOQh1M0vBe8yRb/ZGHgCu2VdjQlXYPejyA==}
+  /@layui/layer-vue/1.3.16:
+    resolution: {integrity: sha512-i47tlv13Kedey3xOTOTfvL1I1cpHJi6hwST8ODZL33w0ps0jJKKS91xwKlrrdc7S5Fjy78ofmWW1dYYs5VoveQ==}
     dev: false
 
-  /@layui/layui-vue/1.1.3_vue@3.2.36:
-    resolution: {integrity: sha512-5QcxXRu8g0GVi7RD5Lt7pmABOX/udfkNFi7XwKKtEQUA9YglC/9dB4ZLHUb22P3pexEulDR2siNvtum5wXAlOA==}
+  /@layui/layui-vue/1.1.5_vue@3.2.36:
+    resolution: {integrity: sha512-nuV9j9icjevG16c53lPIh3TUsRVtSpf/2WiU6/fh/q/in1HkwwmDDMwOQ0vglCWw7GdN074Gsnb3K5jJgKqmzA==}
     dependencies:
       '@layui/icons-vue': 1.0.9
-      '@layui/layer-vue': 1.3.14
+      '@layui/layer-vue': 1.3.16
       '@vueuse/core': 8.5.0_vue@3.2.36
       animate.css: 4.1.1
       async-validator: 4.1.1
@@ -314,6 +316,10 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /@types/prettier/2.6.3:
+    resolution: {integrity: sha512-ymZk3LEC/fsut+/Q5qejp6R9O1rMxz3XaRHDV6kX8MrGAhOSPqVARbDi+EZvInBpw+BnCX3TD240byVkOfQsHg==}
+    dev: true
+
   /@unocss/cli/0.34.1:
     resolution: {integrity: sha512-RHZyo70xOO/Loq17wVQoL+9Hs0QY0RbfAVfap6vk1uQMcDoZ3FVPjOvaDmpfqwwFeA6rExBplEF0jKlmsPfbuQ==}
     engines: {node: '>=14'}
@@ -1337,6 +1343,12 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /prettier/2.6.1:
+    resolution: {integrity: sha512-8UVbTBYGwN37Bs9LERmxCPjdvPxlEowx2urIL6urHzdb3SDq4B/Z6xLFCblrSnE4iKWcS6ziJ3aOYrc1kz/E2A==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
   /process-nextick-args/2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
@@ -2163,9 +2175,9 @@ packages:
       eslint: registry.npmmirror.com/eslint/8.7.0
       eslint-config-prettier: registry.npmmirror.com/eslint-config-prettier/8.3.0_eslint@8.7.0
       eslint-define-config: registry.npmmirror.com/eslint-define-config/1.2.3
-      eslint-plugin-prettier: registry.npmmirror.com/eslint-plugin-prettier/4.0.0_4660519532e4c3b0a9e5bb6623cfedf6
+      eslint-plugin-prettier: registry.npmmirror.com/eslint-plugin-prettier/4.0.0_10a801f47698c0deafd43a8652d5fc0f
       eslint-plugin-yml: registry.npmmirror.com/eslint-plugin-yml/0.10.1_eslint@8.7.0
-      prettier: registry.npmmirror.com/prettier/2.5.1
+      prettier: 2.6.1
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3306,7 +3318,7 @@ packages:
       natural-compare: registry.npmmirror.com/natural-compare/1.4.0
     dev: true
 
-  registry.npmmirror.com/eslint-plugin-prettier/4.0.0_4660519532e4c3b0a9e5bb6623cfedf6:
+  registry.npmmirror.com/eslint-plugin-prettier/4.0.0_10a801f47698c0deafd43a8652d5fc0f:
     resolution: {integrity: sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz}
     id: registry.npmmirror.com/eslint-plugin-prettier/4.0.0
     name: eslint-plugin-prettier
@@ -3322,7 +3334,7 @@ packages:
     dependencies:
       eslint: registry.npmmirror.com/eslint/8.7.0
       eslint-config-prettier: registry.npmmirror.com/eslint-config-prettier/8.3.0_eslint@8.7.0
-      prettier: registry.npmmirror.com/prettier/2.5.1
+      prettier: 2.6.1
       prettier-linter-helpers: registry.npmmirror.com/prettier-linter-helpers/1.0.0
     dev: true
 
@@ -4970,14 +4982,6 @@ packages:
       fast-diff: registry.npmmirror.com/fast-diff/1.2.0
     dev: true
 
-  registry.npmmirror.com/prettier/2.5.1:
-    resolution: {integrity: sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/prettier/-/prettier-2.5.1.tgz}
-    name: prettier
-    version: 2.5.1
-    engines: {node: '>=10.13.0'}
-    hasBin: true
-    dev: true
-
   registry.npmmirror.com/punycode/2.1.1:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/punycode/-/punycode-2.1.1.tgz}
     name: punycode
diff --git a/src/App.vue b/src/App.vue
index ed3888f..bcbbc1e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
 import { Repl } from '@vue/repl'
 import { ReplStore, preferSFC } from './store'
 import Header from './components/Header.vue'
+import type { BuiltInParserName } from 'prettier'
 import type { SFCOptions } from '@vue/repl'
 
 const loading = ref(true)
@@ -17,6 +18,51 @@ const sfcOptions: SFCOptions = {
   },
 }
 
+const handleKeydown = (evt: KeyboardEvent) => {
+  if ((evt.ctrlKey || evt.metaKey) && evt.code === 'KeyS') {
+    evt.preventDefault()
+    return
+  }
+  if ((evt.altKey || evt.ctrlKey) && evt.shiftKey && evt.code === 'KeyF') {
+    evt.preventDefault()
+    formatCode()
+    return
+  }
+}
+
+const formatCode = async () => {
+  const [format, parserHtml, parserTypeScript, parserBabel] = await Promise.all(
+    [
+      import('prettier/standalone').then((r) => r.format),
+      import('prettier/parser-html').then((m) => m.default),
+      import('prettier/parser-typescript').then((m) => m.default),
+      import('prettier/parser-babel').then((m) => m.default),
+    ]
+  )
+  const file = store.state.activeFile
+  let parser: BuiltInParserName
+  if (file.filename.endsWith('.vue')) {
+    parser = 'vue'
+  } else if (file.filename.endsWith('.js')) {
+    parser = 'babel'
+  } else if (file.filename.endsWith('.ts')) {
+    parser = 'typescript'
+  } else if (file.filename.endsWith('.json')) {
+    parser = 'json'
+  } else if (file.filename.endsWith('.html')){
+    parser = 'html'
+  } else {
+    return
+  }
+  file.code = format(file.code, {
+    parser,
+    plugins: [parserHtml, parserTypeScript, parserBabel],
+    semi: false,
+    singleQuote: true,
+  })
+}
+
+
 const store = new ReplStore({
   serializedState: location.hash.slice(1),
 })
@@ -40,8 +86,7 @@ watchEffect(() => history.replaceState({}, '', store.serialize()))
       auto-resize
       :sfc-options="sfcOptions"
       :clear-console="false"
-      @keydown.ctrl.s.prevent
-      @keydown.meta.s.prevent
+      @keydown="handleKeydown"
     />
   </div>
 </template>
-- 
Gitee


From 9d91306c0a32964d9ba5b24d8ba809bc56a5902d Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Fri, 10 Jun 2022 19:44:19 +0800
Subject: [PATCH 3/3] fix: lint

---
 src/App.vue                       |  23 ++--
 src/components/Header.vue         | 169 ++++++++++++++++++++----------
 src/config/defaultAppTemplate.vue |   4 +-
 src/config/sandbox.config.ts      |  21 ++--
 src/download/download.ts          |   8 +-
 src/download/template/main.ts     |  12 +--
 src/icons/Download.vue            |   2 +-
 src/icons/Moon.vue                |   8 +-
 src/icons/Sun.vue                 |  38 +++++--
 src/store.ts                      |  67 +++++++-----
 src/utils/dependency.ts           |  61 ++++++-----
 vite.config.ts                    |  14 +--
 12 files changed, 258 insertions(+), 169 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bcbbc1e..3e3547e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@ import type { SFCOptions } from '@vue/repl'
 
 const loading = ref(true)
 
-const layerLoadingId = layer.load(2, {}, () => { })
+const layerLoadingId = layer.load(2, {}, () => {})
 
 const repl = ref<HTMLElement | null>(null)
 
@@ -31,14 +31,14 @@ const handleKeydown = (evt: KeyboardEvent) => {
 }
 
 const formatCode = async () => {
-  const [format, parserHtml, parserTypeScript, parserBabel] = await Promise.all(
-    [
+  const [format, parserHtml, parserTypeScript, parserBabel, parserPostcss] =
+    await Promise.all([
       import('prettier/standalone').then((r) => r.format),
       import('prettier/parser-html').then((m) => m.default),
       import('prettier/parser-typescript').then((m) => m.default),
       import('prettier/parser-babel').then((m) => m.default),
-    ]
-  )
+      import('prettier/parser-postcss').then((m) => m.default),
+    ])
   const file = store.state.activeFile
   let parser: BuiltInParserName
   if (file.filename.endsWith('.vue')) {
@@ -49,26 +49,25 @@ const formatCode = async () => {
     parser = 'typescript'
   } else if (file.filename.endsWith('.json')) {
     parser = 'json'
-  } else if (file.filename.endsWith('.html')){
+  } else if (file.filename.endsWith('.html')) {
     parser = 'html'
   } else {
     return
   }
   file.code = format(file.code, {
     parser,
-    plugins: [parserHtml, parserTypeScript, parserBabel],
+    plugins: [parserHtml, parserTypeScript, parserBabel, parserPostcss],
     semi: false,
     singleQuote: true,
   })
 }
 
-
 const store = new ReplStore({
   serializedState: location.hash.slice(1),
 })
 store.init().then(() => {
   loading.value = false
-  layer.close(layerLoadingId);
+  layer.close(layerLoadingId)
 })
 
 // persist state
@@ -81,7 +80,7 @@ watchEffect(() => history.replaceState({}, '', store.serialize()))
     <Repl
       ref="repl"
       :store="store"
-      :showImportMap="true"
+      :show-import-map="true"
       :show-compile-output="preferSFC"
       auto-resize
       :sfc-options="sfcOptions"
@@ -94,8 +93,8 @@ watchEffect(() => history.replaceState({}, '', store.serialize()))
 <style>
 body {
   font-size: 13px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   margin: 0;
   --base: #444;
   --nav-height: 50px;
diff --git a/src/components/Header.vue b/src/components/Header.vue
index b092676..6cd77ad 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -8,19 +8,19 @@ import {
   getSupportedVersions,
   getSupportedVueVersions,
 } from '../utils/dependency'
-import type { ComputedRef } from 'vue'
-import type { ReplStore, VersionKey } from '../store'
 import { preferSFC, UIPackage } from '../store'
 import { downloadProject } from '../download/download'
 import { config } from '../config/sandbox.config'
+import type { ReplStore, VersionKey } from '../store'
+import type { ComputedRef } from 'vue'
 
 const appVersion = import.meta.env.APP_VERSION
 const replVersion = import.meta.env.REPL_VERSION
 
 document.title = config.title
 
-const { store,} = defineProps<{
-  store: ReplStore,
+const { store } = defineProps<{
+  store: ReplStore
 }>()
 
 const versions = reactive<
@@ -35,7 +35,11 @@ const versions = reactive<
 >({
   UILib: {
     text: `${UIPackage.value}`,
-    published: getSupportedVersions(UIPackage.value, config.minSupportedVersion, config.filterPreRelease),
+    published: getSupportedVersions(
+      UIPackage.value,
+      config.minSupportedVersion,
+      config.filterPreRelease
+    ),
     active: store.versions.UILib,
   },
   vue: {
@@ -46,7 +50,7 @@ const versions = reactive<
 })
 
 async function setVersion(key: VersionKey, v: string) {
-  layer.load(2, {}, () => { })
+  layer.load(2, {}, () => {})
   versions[key].active = `loading...`
   await store.setVersion(key, v)
   versions[key].active = v
@@ -76,63 +80,71 @@ async function copyLink() {
   } else {
     let inputEl = document.createElement('input')
     inputEl.value = location.href
-    document.body.appendChild(inputEl)
+    document.body.append(inputEl)
     inputEl.select() // 选择对象;
     document.execCommand('Copy') // 执行浏览器复制命令
     inputEl.remove()
     successful = true
   }
   if (successful) {
-    layer.msg('链接已复制到剪贴板', { time: 1000 }, () => { })
+    layer.msg('链接已复制到剪贴板', { time: 1000 }, () => {})
   } else {
-    layer.msg('分享失败', { time: 1000 }, () => { })
+    layer.msg('分享失败', { time: 1000 }, () => {})
   }
   //alert('Sharable URL has been copied to clipboard.')
 }
 
 async function downloadExample() {
-  layer.confirm("下载项目文件?", {
-    title: '消息',
-    icon: 3,
-    btn: [{
-      text: '确定',
-      async callback() {
-        await downloadProject(store)
-        layer.closeAll()
-      }
-    }, {
-      text: '取消',
-      callback() {
-        layer.closeAll()
-      }
-    }
-    ]
-  },
-    () => { })
+  layer.confirm(
+    '下载项目文件?',
+    {
+      title: '消息',
+      icon: 3,
+      btn: [
+        {
+          text: '确定',
+          async callback() {
+            await downloadProject(store)
+            layer.closeAll()
+          },
+        },
+        {
+          text: '取消',
+          callback() {
+            layer.closeAll()
+          },
+        },
+      ],
+    },
+    () => {}
+  )
 }
 
-const isDark = useDark();
-const toggleDark = useToggle(isDark);
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
 
 const { isFullscreen, toggle } = useFullscreen()
 
 const UILibActiveRef = ref(versions.UILib.published[0])
 const vueActiveRef = ref(versions.vue.published[0])
-const activeLibRef = ref(preferSFC.value ? "layuivue" : "layui")
+const activeLibRef = ref(preferSFC.value ? 'layuivue' : 'layui')
 
-watch(() => [versions.UILib.published, versions.vue.published], () => {
-  UILibActiveRef.value = versions.UILib.published[0]
-  vueActiveRef.value = versions.vue.published[0]
-})
+watch(
+  () => [versions.UILib.published, versions.vue.published],
+  () => {
+    UILibActiveRef.value = versions.UILib.published[0]
+    vueActiveRef.value = versions.vue.published[0]
+  }
+)
 
 const toggleLib = () => {
-  let layuiPlaygroundUrl = window.location.origin
-  + window.location.pathname
-  + (window.location.search.includes('deps=layui') ? '' : '?deps=layui')
-  
+  let layuiPlaygroundUrl =
+    window.location.origin +
+    window.location.pathname +
+    (window.location.search.includes('deps=layui') ? '' : '?deps=layui')
+
   window.location.href = layuiPlaygroundUrl
 }
-
 </script>
 
 <template>
@@ -156,33 +168,69 @@ const toggleLib = () => {
       </div> -->
 
       <div class="flex items-center lt-lg-hidden">
-       <select v-model="activeLibRef" @change="toggleLib()" style="border:none;">
-        <option value="layuivue">LayuiVue</option>
-        <option value="layui">Layui</option>
-      </select>
-        <div>
-        <span class="mr-1" style="margin-left: 15px;">{{ versions.UILib.text }} :</span>
-        <select v-model="UILibActiveRef" @change="setVersion('UILib', UILibActiveRef)" style="width: 150px">
-          <option v-for="(ver) of versions.UILib.published" :value="ver" :key="ver">{{ ver }}</option>
+        <select
+          v-model="activeLibRef"
+          style="border: none"
+          @change="toggleLib()"
+        >
+          <option value="layuivue">LayuiVue</option>
+          <option value="layui">Layui</option>
         </select>
+        <div>
+          <span class="mr-1" style="margin-left: 15px"
+            >{{ versions.UILib.text }} :</span
+          >
+          <select
+            v-model="UILibActiveRef"
+            style="width: 150px"
+            @change="setVersion('UILib', UILibActiveRef)"
+          >
+            <option
+              v-for="ver of versions.UILib.published"
+              :key="ver"
+              :value="ver"
+            >
+              {{ ver }}
+            </option>
+          </select>
         </div>
         <div v-if="preferSFC">
-        <span class="mr-1" style="margin-left: 15px;">{{ versions.vue.text }} :</span>
-        <select v-model="vueActiveRef" @change="setVersion('vue', vueActiveRef)" style="width: 150px">
-          <option v-for="(ver) of versions.vue.published" :value="ver" :key="ver">{{ ver }}</option>
-        </select>
+          <span class="mr-1" style="margin-left: 15px"
+            >{{ versions.vue.text }} :</span
+          >
+          <select
+            v-model="vueActiveRef"
+            style="width: 150px"
+            @change="setVersion('vue', vueActiveRef)"
+          >
+            <option
+              v-for="ver of versions.vue.published"
+              :key="ver"
+              :value="ver"
+            >
+              {{ ver }}
+            </option>
+          </select>
         </div>
       </div>
 
       <button title="Fullscreen" class="fullscreen" @click="toggle">
         <LayIcon
           size="18px"
-          :type="(isFullscreen ? 'layui-icon-screen-restore' : 'layui-icon-screen-full')"
-          style="font-weight:500"
+          :type="
+            isFullscreen
+              ? 'layui-icon-screen-restore'
+              : 'layui-icon-screen-full'
+          "
+          style="font-weight: 500"
         />
       </button>
 
-      <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark()">
+      <button
+        title="Toggle dark mode"
+        class="toggle-dark"
+        @click="toggleDark()"
+      >
         <Sun class="light" />
         <Moon class="dark" />
       </button>
@@ -191,7 +239,12 @@ const toggleLib = () => {
         <share />
       </button>
 
-      <button v-if="preferSFC" title="Download" class="download" @click="downloadExample()">
+      <button
+        v-if="preferSFC"
+        title="Download"
+        class="download"
+        @click="downloadExample()"
+      >
         <Download />
       </button>
 
@@ -239,7 +292,7 @@ h1 {
   font-weight: 300;
   display: inline-block;
   vertical-align: middle;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial,
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', Tahoma, Arial,
     sans-serif;
 }
 
@@ -277,7 +330,7 @@ h1 img {
 }
 
 .active-version:after {
-  content: "";
+  content: '';
   width: 0;
   height: 0;
   border-left: 4px solid transparent;
@@ -369,7 +422,7 @@ nav .button {
   border: none;
   outline: none;
   color: #fff;
-  margin: .5rem 0;
+  margin: 0.5rem 0;
   border-bottom: 2px solid var(--nav-button);
   text-shadow: 1px 1px 1px var(--nav-button);
   border-radius: 4px;
diff --git a/src/config/defaultAppTemplate.vue b/src/config/defaultAppTemplate.vue
index be9086c..2bdb05e 100644
--- a/src/config/defaultAppTemplate.vue
+++ b/src/config/defaultAppTemplate.vue
@@ -6,5 +6,5 @@ const msg = ref('Hello World!')
 
 <template>
   <h1>{{ msg }}</h1>
-  <lay-input v-model="msg" style="width:350px" />
-</template>
\ No newline at end of file
+  <lay-input v-model="msg" style="width: 350px" />
+</template>
diff --git a/src/config/sandbox.config.ts b/src/config/sandbox.config.ts
index c593cb3..a6ee6a4 100644
--- a/src/config/sandbox.config.ts
+++ b/src/config/sandbox.config.ts
@@ -1,24 +1,24 @@
 import defaultAppTemplate from './defaultAppTemplate.vue?raw'
 export interface DependencySource {
   // 依赖源名称
-  name: string;
+  name: string
   // 依赖源链接
-  url: string;
+  url: string
 }
 
 export interface Dependency {
   // 包名
-  name: string;
+  name: string
   // 描述
-  description?: string;
+  description?: string
   // 版本
-  version?: string;
+  version?: string
   // 路径
-  path: string;
+  path: string
   // 样式路径
-  stylePath?: string;
+  stylePath?: string
   // 依赖源
-  source?: DependencySource["name"];
+  source?: DependencySource['name']
 }
 
 /**
@@ -44,7 +44,7 @@ export const config = {
   //UIPackage: '@arco-design/web-vue',
   minSupportedVersion: '0.2.5',
   filterPreRelease: false,
-  defaultAppTemplate: defaultAppTemplate.trim()
+  defaultAppTemplate: defaultAppTemplate.trim(),
 }
 
 export const dependencySources: DependencySource[] = [
@@ -64,7 +64,6 @@ export const dependencySources: DependencySource[] = [
     name: 'custom',
     url: 'import.meta.env.BASE_URL' + 'lib',
   },
-
 ]
 
 export const dependencies: Dependency[] = [
@@ -115,7 +114,7 @@ export const dependencies: Dependency[] = [
     stylePath: '/dist/css/layui.css',
     description: 'layui 组件库',
     source: 'unpkg',
-  }
+  },
 
   // {
   //   name: 'element-plus',
diff --git a/src/download/download.ts b/src/download/download.ts
index 79695cc..ffad167 100644
--- a/src/download/download.ts
+++ b/src/download/download.ts
@@ -8,7 +8,6 @@ import config from './template/vite.config.js?raw'
 import readme from './template/README.md?raw'
 import tsconfig from './template/tsconfig.json?raw'
 
-
 export async function downloadProject(store: any) {
   /*   if (!confirm('Download example project files?')) {
       return
@@ -16,7 +15,11 @@ export async function downloadProject(store: any) {
 
   const { default: JSZip } = await import('jszip')
   const zip = new JSZip()
-  const excludeFiles = [defaultMainFile, libInstallFile.value, 'import-map.json']
+  const excludeFiles = [
+    defaultMainFile,
+    libInstallFile.value,
+    'import-map.json',
+  ]
 
   // basic structure
   zip.file('index.html', index)
@@ -25,7 +28,6 @@ export async function downloadProject(store: any) {
   zip.file('vite.config.js', config)
   zip.file('README.md', readme)
 
-
   // project src
   const src = zip.folder('src')!
   src.file('main.ts', main)
diff --git a/src/download/template/main.ts b/src/download/template/main.ts
index 75f5a91..0ae1124 100644
--- a/src/download/template/main.ts
+++ b/src/download/template/main.ts
@@ -1,8 +1,8 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-import "@layui/layui-vue/lib/index.css";
-import Layui from "@layui/layui-vue";
+import { createApp } from 'vue'
+import App from './App.vue'
+import '@layui/layui-vue/lib/index.css'
+import Layui from '@layui/layui-vue'
 
-const app = createApp(App);
+const app = createApp(App)
 
-app.use(Layui).mount("#app");
\ No newline at end of file
+app.use(Layui).mount('#app')
diff --git a/src/icons/Download.vue b/src/icons/Download.vue
index f76d035..a7c4ed1 100644
--- a/src/icons/Download.vue
+++ b/src/icons/Download.vue
@@ -26,4 +26,4 @@
       <path d="M12 13a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z" />
     </g>
   </svg>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/icons/Moon.vue b/src/icons/Moon.vue
index 6b9f0d5..28948bd 100644
--- a/src/icons/Moon.vue
+++ b/src/icons/Moon.vue
@@ -1,8 +1,8 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path 
-      fill="#666" 
-      d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" 
+    <path
+      fill="#666"
+      d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"
     />
   </svg>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/icons/Sun.vue b/src/icons/Sun.vue
index 0951269..cfb0ca2 100644
--- a/src/icons/Sun.vue
+++ b/src/icons/Sun.vue
@@ -1,13 +1,31 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
-    <path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
-    <path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
-    <path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
-    <path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
-    <path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
-    <path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
-    <path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
-    <path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
+    <path
+      d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"
+    />
+    <path
+      d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"
+    />
+    <path
+      d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"
+    />
+    <path
+      d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"
+    />
+    <path
+      d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"
+    />
+    <path
+      d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"
+    />
+    <path
+      d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"
+    />
+    <path
+      d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"
+    />
+    <path
+      d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"
+    />
   </svg>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/store.ts b/src/store.ts
index c459703..346e073 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -2,25 +2,24 @@ import { reactive, watchEffect } from 'vue'
 import { compileFile, File } from '@vue/repl'
 import { genImportMap, genLink, genVueLink } from './utils/dependency'
 import { utoa, atou } from './utils/encode'
-import type { Store, SFCOptions, StoreState, OutputModes } from '@vue/repl'
-
 import { config } from './config/sandbox.config'
+import type { Store, SFCOptions, StoreState, OutputModes } from '@vue/repl'
 
 export type VersionKey = 'vue' | 'UILib'
 export type Versions = Record<VersionKey, string>
 
-export const preferSFC = ref(true);
+export const preferSFC = ref(true)
 export const UIPackage = ref<string>(config.UIPackage)
 export const defaultHTMLFile = 'index.html'
 export const defaultMainFile = 'PlaygroundMain.vue'
 export const defaultAppFile = 'App.vue'
-export const libInstallFile =  ref<string>('LibInstall.js')
+export const libInstallFile = ref<string>('LibInstall.js')
 
 // FIXME 临时的兼容方法
-if (window.location.search.includes("deps=layui")) {
+if (window.location.search.includes('deps=layui')) {
   preferSFC.value = false
-  UIPackage.value = "layui"
-  libInstallFile.value = UIPackage.value + '.js'
+  UIPackage.value = 'layui'
+  libInstallFile.value = `${UIPackage.value}.js`
 }
 
 // PlaygroundMain.vue
@@ -35,7 +34,9 @@ setupLib()
 </template>`.trim()
 
 // App.vue
-const defaultAppFileTemplate = config.defaultAppTemplate ?? `
+const defaultAppFileTemplate =
+  config.defaultAppTemplate ??
+  `
 <script setup lang="ts">
 import { ref } from 'vue'
 
@@ -49,8 +50,9 @@ const msg = ref('Hello World!')
 `.trim()
 
 // 全量引入 layui
-const LibInstallFileCode = (version: string) => preferSFC.value 
-? `
+const LibInstallFileCode = (version: string) =>
+  preferSFC.value
+    ? `
 import { getCurrentInstance } from 'vue'
 import UILibName from '${UIPackage.value}'
 
@@ -80,8 +82,8 @@ export function loadStyle() {
     document.head.appendChild(style)
   })
 }
-` 
-: `
+`
+    : `
 await loadStyle()
 await loadLib()
 
@@ -135,7 +137,8 @@ export class ReplStore implements Store {
   initialShowOutput = false
   initialOutputMode: OutputModes = 'preview'
 
-  private pendingCompiler: Promise<typeof import('vue/compiler-sfc')> | null = null
+  private pendingCompiler: Promise<typeof import('vue/compiler-sfc')> | null =
+    null
 
   // 默认不设置版本
   constructor({
@@ -146,27 +149,30 @@ export class ReplStore implements Store {
     versions?: Versions
   }) {
     let files: StoreState['files'] = {}
-    
+
     if (serializedState) {
       const saved = JSON.parse(atou(serializedState))
       for (const filename of Object.keys(saved)) {
         files[filename] = new File(filename, saved[filename])
       }
+    } else if (preferSFC.value) {
+      files[defaultAppFile] = new File(defaultAppFile, defaultAppFileTemplate)
     } else {
-      if(preferSFC.value){
-        files[defaultAppFile] = new File(defaultAppFile, defaultAppFileTemplate)
-      }else{
-        files[defaultHTMLFile] = new File(defaultHTMLFile, defaultHTMLFileCode.trim())
-      }  
+      files[defaultHTMLFile] = new File(
+        defaultHTMLFile,
+        defaultHTMLFileCode.trim()
+      )
     }
 
-    if(preferSFC.value){
+    if (preferSFC.value) {
       files[defaultMainFile] = new File(defaultMainFile, mainCode, isHidden)
     }
     this.state = reactive({
       mainFile: preferSFC.value ? defaultMainFile : defaultHTMLFile,
       files,
-      activeFile: preferSFC.value ? files[defaultAppFile] : files[defaultHTMLFile],
+      activeFile: preferSFC.value
+        ? files[defaultAppFile]
+        : files[defaultHTMLFile],
       errors: [],
       vueRuntimeURL: '',
     })
@@ -206,15 +212,19 @@ export class ReplStore implements Store {
   }
 
   deleteFile(filename: string) {
-    if (filename === libInstallFile.value || filename === defaultMainFile || filename === defaultHTMLFile) {
+    if (
+      filename === libInstallFile.value ||
+      filename === defaultMainFile ||
+      filename === defaultHTMLFile
+    ) {
       alert(`You cannot remove it, because ${UIPackage.value} requires it.`)
       return
     }
     if (confirm(`Are you sure you want to delete ${filename}?`)) {
       if (this.state.activeFile.filename === filename) {
-        if(preferSFC.value){
+        if (preferSFC.value) {
           this.setActive(defaultAppFile)
-        }else{
+        } else {
           this.setActive(defaultHTMLFile)
         }
       }
@@ -245,7 +255,7 @@ export class ReplStore implements Store {
             try {
               const importMap = this.simplifyImportMaps()
               return [file, importMap]
-            } catch { }
+            } catch {}
           }
           return [file, content]
         })
@@ -315,7 +325,8 @@ export class ReplStore implements Store {
   }
 
   async setUILibVersion(version: string) {
-    this.state.files[libInstallFile.value].code = LibInstallFileCode(version).trim() // 更新版本重新编译所有文件
+    this.state.files[libInstallFile.value].code =
+      LibInstallFileCode(version).trim() // 更新版本重新编译所有文件
     for (const file of Object.values(this.state.files)) {
       compileFile(this, file)
     }
@@ -323,7 +334,9 @@ export class ReplStore implements Store {
     this.addDeps()
 
     // eslint-disable-next-line no-console
-    console.info(`[${UIPackage.value}/playground] Now using ${UIPackage.value} version: ${version}`)
+    console.info(
+      `[${UIPackage.value}/playground] Now using ${UIPackage.value} version: ${version}`
+    )
   }
 
   async setVueVersion(version: string) {
diff --git a/src/utils/dependency.ts b/src/utils/dependency.ts
index a7327e7..b0fc3a8 100644
--- a/src/utils/dependency.ts
+++ b/src/utils/dependency.ts
@@ -1,17 +1,22 @@
 import { compare } from 'compare-versions'
+import {
+  dependencies,
+  dependencySources,
+  config as config,
+} from '../config/sandbox.config'
 import type { Versions } from 'src/store'
 import type { Ref } from 'vue'
 
-import { dependencies, dependencySources, config as config } from '../config/sandbox.config'
-
 /**
  * 获取依赖源,默认第一个
  * @param sourceName 源名称
  * @returns 源信息
  */
 const getDependencySources = (sourceName?: string) => {
-  return dependencySources.find((depSource) => depSource.name === sourceName)
-    ?? dependencySources[0]
+  return (
+    dependencySources.find((depSource) => depSource.name === sourceName) ??
+    dependencySources[0]
+  )
 }
 
 /**
@@ -23,24 +28,30 @@ const getPackageInfo = (pkg: string) => {
   return dependencies.find((dep) => dep.name === pkg)
 }
 /**
- * 
+ *
  * @param pkg 包名
  * @param pkgVersion 版本
  * @param isStyle 是否获取样式路径
  * @returns 生成的链接
  */
-export const genLink = (pkg: string, pkgVersion?: string, isStyle?: boolean) => {
-  const packageInfo = getPackageInfo(pkg);
-  if (!packageInfo) return;
-  let { name: pkgName, version, path, stylePath, source } = packageInfo;
+export const genLink = (
+  pkg: string,
+  pkgVersion?: string,
+  isStyle?: boolean
+) => {
+  const packageInfo = getPackageInfo(pkg)
+  if (!packageInfo) return
+  let { name: pkgName, version, path, stylePath, source } = packageInfo
   version = version ? `@${version}` : ''
   version = pkgVersion ? `@${pkgVersion}` : version
   const dependencySource = getDependencySources(source)
-  return `${dependencySource.url}${pkgName}${version}${isStyle ? stylePath : path}`
+  return `${dependencySource.url}${pkgName}${version}${
+    isStyle ? stylePath : path
+  }`
 }
 
 /**
- * 
+ *
  * @param pkg 包名
  * @param version 版本
  * @param path 路径
@@ -56,7 +67,7 @@ export const genUnpkgLink = (
 }
 
 /**
- * 
+ *
  * @param pkg 包名
  * @param version 版本
  * @param path 路径
@@ -71,21 +82,14 @@ export const genJsdelivrLink = (
   return `https://cdn.jsdelivr.net/npm/${pkg}${version}${path}`
 }
 
-
 /**
  * 生成 Vue 链接
  * @param version 版本
- * @returns 
+ * @returns
  */
 export const genVueLink = (version: string) => {
-  const compilerSfc = genLink(
-    '@vue/compiler-sfc',
-    version,
-  )
-  const runtimeDom = genLink(
-    '@vue/runtime-dom',
-    version,
-  )
+  const compilerSfc = genLink('@vue/compiler-sfc', version)
+  const runtimeDom = genLink('@vue/runtime-dom', version)
   return {
     compilerSfc,
     runtimeDom,
@@ -107,7 +111,6 @@ export const genImportMap = ({ vue, UILib }: Partial<Versions> = {}) => {
     } else {
       deps[index] = [dep.name, genLink(dep.name)]
     }
-
   })
   return Object.fromEntries(deps)
 }
@@ -120,11 +123,17 @@ export const getVersions = (pkg: string) =>
   }).json<string[]>().data as Ref<string[]>
 
 // 获取支持的版本
-export const getSupportedVersions = (pkg: string, minSupportedVersion: string, filterPreRelease?: boolean) => {
+export const getSupportedVersions = (
+  pkg: string,
+  minSupportedVersion: string,
+  filterPreRelease?: boolean
+) => {
   let versions = $(getVersions(pkg))
   return computed(() => {
     if (versions.length === 0) return []
-    let supportedVersions = versions.filter((version) => compare(version, minSupportedVersion, '>='))
+    let supportedVersions = versions.filter((version) =>
+      compare(version, minSupportedVersion, '>=')
+    )
     // 如果最新版本是预发布版本，则显示最新版的所有预发布版本,否则过滤掉预发布版本
     if (filterPreRelease) {
       const filteredVersions: string[] = []
@@ -142,7 +151,7 @@ export const getSupportedVersions = (pkg: string, minSupportedVersion: string, f
           break
         }
       }
-      supportedVersions = filteredVersions;
+      supportedVersions = filteredVersions
     }
     return supportedVersions
   })
diff --git a/vite.config.ts b/vite.config.ts
index c80e65f..76b41c5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,15 +8,15 @@ import AutoImport from 'unplugin-auto-import/vite'
 import Inspect from 'vite-plugin-inspect'
 import Mkcert from 'vite-plugin-mkcert'
 import { getPackageInfo } from 'local-pkg'
-import pkg from './package.json'
 import { LayuiVueResolver } from 'unplugin-vue-components/resolvers'
+import pkg from './package.json'
 
 const pathSrc = path.resolve(__dirname, 'src')
 
 export default defineConfig(async () => {
   const repl = await getPackageInfo('@vue/repl')
   return {
-    base:"/sandbox-vue/",
+    base: '/sandbox-vue/',
     resolve: {
       alias: {
         '@': pathSrc,
@@ -33,22 +33,18 @@ export default defineConfig(async () => {
     plugins: [
       vue({
         //reactivityTransform: `${pathSrc}/**/*`,
-        reactivityTransform: true
+        reactivityTransform: true,
       }),
       AutoImport({
         // 自动导入 vue vueUse 相关函数
         imports: ['vue', '@vueuse/core'],
         // 自动导入 layer-vue 相关函数
-        resolvers: [
-           LayuiVueResolver()
-        ],
+        resolvers: [LayuiVueResolver()],
         dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
       }),
       Components({
         // 自动解析 layui-vue 组件
-        resolvers: [
-           LayuiVueResolver({ resolveIcons: true })
-        ],
+        resolvers: [LayuiVueResolver({ resolveIcons: true })],
       }),
       Unocss({
         presets: [presetUno()],
-- 
Gitee