js演练场

web-front/UI_FIXES.md

@@ -0,0 +1 @@
+

web-front/package.json

@@ -10,11 +10,13 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@monaco-editor/loader": "^1.4.0",
     "@vueuse/core": "^11.2.0",
     "axios": "1.12.0",
     "clipboard": "^2.0.11",
     "core-js": "^3.8.3",
-    "element-plus": "^2.8.7",
+    "element-plus": "2.11.3",
+    "monaco-editor": "^0.45.0",
     "qrcode": "^1.5.4",
     "splitpanes": "^4.0.4",
     "vue": "^3.5.12",

web-front/src/router/index.js

@@ -3,12 +3,14 @@ import Home from '@/views/Home.vue'
 import ShowFile from '@/views/ShowFile.vue'
 import ShowList from '@/views/ShowList.vue'
 import ClientLinks from '@/views/ClientLinks.vue'
+import Playground from '@/views/Playground.vue'
 
 const routes = [
   { path: '/', component: Home },
   { path: '/showFile', component: ShowFile },
   { path: '/showList', component: ShowList },
-  { path: '/clientLinks', component: ClientLinks }
+  { path: '/clientLinks', component: ClientLinks },
+  { path: '/playground', component: Playground }
 ]
 
 const router = createRouter({

web-front/src/views/Home.vue

@@ -218,6 +218,7 @@
     <!-- 版本号显示 -->
     <div class="version-info">
       <span class="version-text">内部版本: {{ buildVersion }}</span>
+<!--      <el-link :href="'/playground'" class="playground-link">JS演练场</el-link>-->
     </div>
     
     <!-- 文件解析结果区下方加分享按钮 -->
@@ -969,9 +970,12 @@ hr {
 
 /* 版本号显示样式 */
 .version-info {
-  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-top: 20px;
   margin-bottom: 20px;
+  padding: 0 10px;
 }
 
 .version-text {
@@ -983,4 +987,22 @@ hr {
 #app.dark-theme .version-text {
   color: #666;
 }
+
+.playground-link {
+  font-size: 0.85rem;
+  color: #409eff;
+  text-decoration: none;
+}
+
+.playground-link:hover {
+  color: #66b1ff;
+}
+
+#app.dark-theme .playground-link {
+  color: #4a9eff;
+}
+
+#app.dark-theme .playground-link:hover {
+  color: #66b1ff;
+}
 </style>

web-front/vue.config.js

@@ -43,6 +43,15 @@ module.exports = {
         '@': resolve('src')
       }
     },
+    // Monaco Editor配置
+    module: {
+      rules: [
+        {
+          test: /\.ttf$/,
+          type: 'asset/resource'
+        }
+      ]
+    },
     plugins: [
       new CompressionPlugin({
         test: /\.js$|\.html$|\.css/, // 匹配文件