test: 更新演练场

packages/fighting-playground/package.json

@@ -7,10 +7,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vue/repl": "^1.3.2"
+    "@vue/repl": "^3.0.0"
   },
   "devDependencies": {
     "fflate": "^0.7.3"
   },
   "license": "MIT"
-}
+}

packages/fighting-playground/src/App copy.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+  import { Repl } from '@vue/repl'
+  import { ReplStore as MyReplStore } from './store'
+  import { watchEffect } from 'vue'
+  import '@vue/repl/style.css'
+  import HeaderVue from './components/Header.vue'
+  import CodeMirror from '@vue/repl/codemirror-editor'
+  import type { ReplStore } from '@vue/repl'
+
+  const store = new MyReplStore({
+    serializedState: location.hash.slice(1),
+    defaultVueRuntimeURL:
+      'https://unpkg.com/@vue/[email protected]/dist/runtime-dom.esm-browser.js'
+  }) as unknown as ReplStore
+
+  // 将状态持久化到 URL 哈希
+  watchEffect(() => history.replaceState({}, '', store.serialize()))
+</script>
+
+<template>
+  <header-vue />
+  <!-- <repl :store="store" show-compile-output :editor="CodeMirror" /> -->
+  <repl :editor="CodeMirror" />
+</template>
+
+<style lang="scss">
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  .vue-repl {
+    position: fixed;
+    top: 55px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    .file.active {
+      color: #2d5af1;
+      border-bottom: 3px solid #2d5af1;
+
+      .label {
+        color: #2d5af1;
+      }
+    }
+
+    .active {
+      border-bottom: 3px solid #2d5af1 !important;
+
+      span {
+        color: #2d5af1;
+      }
+    }
+  }
+</style>

packages/fighting-playground/src/App.vue

@@ -4,6 +4,7 @@
   import { watchEffect } from 'vue'
   import '@vue/repl/style.css'
   import HeaderVue from './components/Header.vue'
+  import CodeMirror from '@vue/repl/codemirror-editor'
   import type { ReplStore } from '@vue/repl'
 
   const store = new MyReplStore({
@@ -18,7 +19,8 @@
 
 <template>
   <header-vue />
-  <repl :store="store" show-compile-output />
+  <!-- <repl :store="store" show-compile-output :editor="CodeMirror" /> -->
+  <repl :editor="CodeMirror" />
 </template>
 
 <style lang="scss">