更新代码和文档

2026-01-11 17:04:13 +00:00 · 2026-01-03 21:11:04 +08:00
parent 48aa5b6148
commit d8f0dc4f8e
25 changed files with 789 additions and 161 deletions
--- a/web-front/MONACO_EDITOR_NPM.md
+++ b/web-front/MONACO_EDITOR_NPM.md
@@ -4,7 +4,7 @@

 ### 1. NPM包安装
 已在 `package.json` 中安装：
- `monaco-editor`: ^0.45.0 - Monaco Editor核心包
+- `monaco-editor`: ^0.55.1 - Monaco Editor核心包
 - `@monaco-editor/loader`: ^1.4.0 - Monaco Editor加载器
 - `monaco-editor-webpack-plugin`: ^7.1.1 - Webpack打包插件（devDependencies）

@@ -172,3 +172,5 @@ Monaco Editor 打包后会增加构建产物大小（约2-3MB），但这是正



+
+
--- a/web-front/package.json
+++ b/web-front/package.json
@@ -16,7 +16,7 @@
    "clipboard": "^2.0.11",
    "core-js": "^3.8.3",
    "element-plus": "2.11.3",
-    "monaco-editor": "^0.45.0",
+    "monaco-editor": "^0.55.1",
    "qrcode": "^1.5.4",
    "splitpanes": "^4.0.4",
    "vue": "^3.5.12",
--- a/web-front/public/index.html
+++ b/web-front/public/index.html
@@ -9,8 +9,8 @@
        content="Netdisk fast download,网盘直链解析工具">
  <meta name="description"
        content="Netdisk fast download 网盘直链解析工具">
-  <!-- Font Awesome 图标库 -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <!-- Font Awesome 图标库 - 使用国内CDN -->
+  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
      .page-loading-wrap {
          padding: 120px;
@@ -154,11 +154,26 @@
      }
  </style>
    <script>
-        const saved = localStorage.getItem('isDarkMode') === 'true'
-        const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-        if (saved || (!saved && systemDark)) {
-            document.body.classList.add('dark-theme')
-        }
+        // 等待DOM加载完成后再操作
+        (function() {
+            function applyDarkTheme() {
+                const body = document.body;
+                if (body && body.classList) {
+                    // 只在用户明确选择暗色模式时才应用，不自动检测系统偏好
+                    if (localStorage.getItem('isDarkMode') === 'true') {
+                        body.classList.add('dark-theme')
+                    }
+                }
+            }
+            
+            // 如果DOM已加载，立即执行
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', applyDarkTheme);
+            } else {
+                // DOM已加载，立即执行
+                applyDarkTheme();
+            }
+        })();
    </script>
 </head>
 <body>
--- a/web-front/src/components/DarkMode.vue
+++ b/web-front/src/components/DarkMode.vue
@@ -43,12 +43,16 @@ watch(darkMode, (newValue) => {
  emit('theme-change', newValue)
  
  // 应用主题到body
-  if (newValue) {
-    document.body.classList.add('dark-theme')
-    document.documentElement.classList.add('dark-theme')
-  } else {
-    document.body.classList.remove('dark-theme')
-    document.documentElement.classList.remove('dark-theme')
+  const html = document.documentElement;
+  const body = document.body;
+  if (html && body && html.classList && body.classList) {
+    if (newValue) {
+      body.classList.add('dark-theme')
+      html.classList.add('dark-theme')
+    } else {
+      body.classList.remove('dark-theme')
+      html.classList.remove('dark-theme')
+    }
  }
 })

@@ -57,9 +61,11 @@ onMounted(() => {
  emit('theme-change', darkMode.value)
  
  // 应用初始主题
-  if (darkMode.value) {
-    document.body.classList.add('dark-theme')
-    document.documentElement.classList.add('dark-theme')
+  const html = document.documentElement;
+  const body = document.body;
+  if (html && body && html.classList && body.classList && darkMode.value) {
+    body.classList.add('dark-theme')
+    html.classList.add('dark-theme')
  }
 })
 </script>
--- a/web-front/src/components/DirectoryTree.vue
+++ b/web-front/src/components/DirectoryTree.vue
@@ -388,8 +388,14 @@ export default {
      return date.toLocaleString('zh-CN')
    },
    checkTheme() {
-      this.isDarkTheme = document.body.classList.contains('dark-theme') || 
-                         document.documentElement.classList.contains('dark-theme')
+      const html = document.documentElement;
+      const body = document.body;
+      if (html && body && html.classList && body.classList) {
+        this.isDarkTheme = body.classList.contains('dark-theme') || 
+                           html.classList.contains('dark-theme')
+      } else {
+        this.isDarkTheme = false;
+      }
    },
    renderContent(h, { node, data, store }) {
      const isFolder = data.fileType === 'folder'
--- a/web-front/src/components/MonacoEditor.vue
+++ b/web-front/src/components/MonacoEditor.vue
@@ -94,6 +94,14 @@ export default {
          return;
        }

+        // 配置Monaco Editor使用国内CDN (npmmirror)
+        // npmmirror的路径格式: https://registry.npmmirror.com/包名/版本号/files/文件路径
+        loader.config({
+          paths: {
+            vs: 'https://registry.npmmirror.com/monaco-editor/0.55.1/files/min/vs'
+          }
+        });
+        
        // 初始化Monaco Editor
        monaco = await loader.init();
        
--- a/web-front/src/router/index.js
+++ b/web-front/src/router/index.js
@@ -10,7 +10,13 @@ const routes = [
  { path: '/showFile', component: ShowFile },
  { path: '/showList', component: ShowList },
  { path: '/clientLinks', component: ClientLinks },
-  { path: '/playground', component: Playground }
+  { path: '/playground', component: Playground },
+  // 404页面 - 必须放在最后
+  { 
+    path: '/:pathMatch(.*)*', 
+    name: 'NotFound',
+    component: () => import('@/views/NotFound.vue')
+  }
 ]

 const router = createRouter({
--- a/web-front/src/utils/playgroundApi.js
+++ b/web-front/src/utils/playgroundApi.js
@@ -1,5 +1,10 @@
 import axios from 'axios';

+// 创建axios实例，配置携带cookie
+const axiosInstance = axios.create({
+  withCredentials: true  // 重要：允许跨域请求携带cookie
+});
+
 /**
 * 演练场API服务
 */
@@ -10,7 +15,7 @@ export const playgroundApi = {
   */
  async getStatus() {
    try {
-      const response = await axios.get('/v2/playground/status');
+      const response = await axiosInstance.get('/v2/playground/status');
      return response.data;
    } catch (error) {
      throw new Error(error.response?.data?.error || error.message || '获取状态失败');
@@ -24,7 +29,7 @@ export const playgroundApi = {
   */
  async login(password) {
    try {
-      const response = await axios.post('/v2/playground/login', { password });
+      const response = await axiosInstance.post('/v2/playground/login', { password });
      return response.data;
    } catch (error) {
      throw new Error(error.response?.data?.error || error.message || '登录失败');
@@ -41,7 +46,7 @@ export const playgroundApi = {
   */
  async testScript(jsCode, shareUrl, pwd = '', method = 'parse') {
    try {
-      const response = await axios.post('/v2/playground/test', {
+      const response = await axiosInstance.post('/v2/playground/test', {
        jsCode,
        shareUrl,
        pwd,
@@ -69,7 +74,7 @@ export const playgroundApi = {
   */
  async getTypesJs() {
    try {
-      const response = await axios.get('/v2/playground/types.js', {
+      const response = await axiosInstance.get('/v2/playground/types.js', {
        responseType: 'text'
      });
      return response.data;
@@ -83,7 +88,7 @@ export const playgroundApi = {
   */
  async getParserList() {
    try {
-      const response = await axios.get('/v2/playground/parsers');
+      const response = await axiosInstance.get('/v2/playground/parsers');
      // 框架会自动包装成JsonResult，需要从data字段获取
      if (response.data && response.data.data) {
        return {
@@ -104,7 +109,7 @@ export const playgroundApi = {
   */
  async saveParser(jsCode) {
    try {
-      const response = await axios.post('/v2/playground/parsers', { jsCode });
+      const response = await axiosInstance.post('/v2/playground/parsers', { jsCode });
      // 框架会自动包装成JsonResult
      if (response.data && response.data.data) {
        return {
@@ -130,7 +135,7 @@ export const playgroundApi = {
   */
  async updateParser(id, jsCode, enabled = true) {
    try {
-      const response = await axios.put(`/v2/playground/parsers/${id}`, { jsCode, enabled });
+      const response = await axiosInstance.put(`/v2/playground/parsers/${id}`, { jsCode, enabled });
      return response.data;
    } catch (error) {
      throw new Error(error.response?.data?.error || error.message || '更新解析器失败');
@@ -142,7 +147,7 @@ export const playgroundApi = {
   */
  async deleteParser(id) {
    try {
-      const response = await axios.delete(`/v2/playground/parsers/${id}`);
+      const response = await axiosInstance.delete(`/v2/playground/parsers/${id}`);
      return response.data;
    } catch (error) {
      throw new Error(error.response?.data?.error || error.message || '删除解析器失败');
@@ -154,7 +159,7 @@ export const playgroundApi = {
   */
  async getParserById(id) {
    try {
-      const response = await axios.get(`/v2/playground/parsers/${id}`);
+      const response = await axiosInstance.get(`/v2/playground/parsers/${id}`);
      // 框架会自动包装成JsonResult
      if (response.data && response.data.data) {
        return {
--- a/web-front/src/views/Home.vue
+++ b/web-front/src/views/Home.vue
@@ -218,7 +218,7 @@
    <!-- 版本号显示 -->
    <div class="version-info">
      <span class="version-text">内部版本: {{ buildVersion }}</span>
-<!--      <el-link :href="'/playground'" class="playground-link">JS演练场</el-link>-->
+      <el-link v-if="playgroundEnabled" :href="'/playground'" class="playground-link">脚本演练场</el-link>
    </div>
    
    <!-- 文件解析结果区下方加分享按钮 -->
@@ -248,6 +248,7 @@ import DirectoryTree from '@/components/DirectoryTree'
 import parserUrl from '../parserUrl1'
 import fileTypeUtils from '@/utils/fileTypeUtils'
 import { ElMessage } from 'element-plus'
+import { playgroundApi } from '@/utils/playgroundApi'

 export const previewBaseUrl = 'https://nfd-parser.github.io/nfd-preview/preview.html?src=';

@@ -297,7 +298,10 @@ export default {
      errorButtonVisible: false,
      
      // 版本信息
-      buildVersion: ''
+      buildVersion: '',
+      
+      // 演练场启用状态
+      playgroundEnabled: false
    }
  },
  methods: {
@@ -316,7 +320,9 @@ export default {
    // 主题切换
    handleThemeChange(isDark) {
      this.isDarkMode = isDark
-      document.body.classList.toggle('dark-theme', isDark)
+      if (document.body && document.body.classList) {
+        document.body.classList.toggle('dark-theme', isDark)
+      }
      window.localStorage.setItem('isDarkMode', isDark)

    },
@@ -552,6 +558,19 @@ export default {
      }
    },

+    // 检查演练场是否启用
+    async checkPlaygroundEnabled() {
+      try {
+        const result = await playgroundApi.getStatus()
+        if (result && result.data) {
+          this.playgroundEnabled = result.data.enabled === true
+        }
+      } catch (error) {
+        console.error('检查演练场状态失败:', error)
+        this.playgroundEnabled = false
+      }
+    },
+
    // 新增切换目录树展示模式方法
    setDirectoryViewMode(mode) {
      this.directoryViewMode = mode
@@ -656,6 +675,9 @@ export default {
    // 获取版本号
    this.getBuildVersion()

+    // 检查演练场是否启用
+    this.checkPlaygroundEnabled()
+
    // 自动读取剪切板
    if (this.autoReadClipboard) {
      this.getPaste()
--- a/web-front/src/views/NotFound.vue
+++ b/web-front/src/views/NotFound.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="not-found-container">
+    <div class="not-found-content">
+      <div class="not-found-icon">
+        <el-icon :size="120"><DocumentDelete /></el-icon>
+      </div>
+      <h1 class="not-found-title">404</h1>
+      <p class="not-found-message">抱歉，您访问的页面不存在</p>
+      <div class="not-found-actions">
+        <el-button type="primary" @click="goHome">返回首页</el-button>
+        <el-button @click="goBack">返回上一页</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useRouter } from 'vue-router'
+import { DocumentDelete } from '@element-plus/icons-vue'
+
+export default {
+  name: 'NotFound',
+  components: {
+    DocumentDelete
+  },
+  setup() {
+    const router = useRouter()
+    
+    const goHome = () => {
+      router.push('/')
+    }
+    
+    const goBack = () => {
+      if (window.history.length > 1) {
+        router.go(-1)
+      } else {
+        router.push('/')
+      }
+    }
+    
+    return {
+      goHome,
+      goBack
+    }
+  }
+}
+</script>
+
+<style scoped>
+.not-found-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
+  padding: 20px;
+}
+
+.not-found-content {
+  text-align: center;
+  background: white;
+  padding: 60px 40px;
+  border-radius: 20px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  max-width: 500px;
+  width: 100%;
+}
+
+.not-found-icon {
+  color: #909399;
+  margin-bottom: 20px;
+}
+
+.not-found-title {
+  font-size: 72px;
+  font-weight: bold;
+  color: #303133;
+  margin: 0 0 20px 0;
+  line-height: 1;
+}
+
+.not-found-message {
+  font-size: 18px;
+  color: #606266;
+  margin: 0 0 40px 0;
+}
+
+.not-found-actions {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+}
+
+/* 暗色主题支持 */
+.dark-theme .not-found-content {
+  background: #1d1e1f;
+}
+
+.dark-theme .not-found-title {
+  color: #e5eaf3;
+}
+
+.dark-theme .not-found-message {
+  color: #a3a6ad;
+}
+
+.dark-theme .not-found-icon {
+  color: #6c6e72;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .not-found-content {
+    padding: 40px 20px;
+  }
+  
+  .not-found-title {
+    font-size: 48px;
+  }
+  
+  .not-found-message {
+    font-size: 16px;
+  }
+  
+  .not-found-actions {
+    flex-direction: column;
+  }
+  
+  .not-found-actions .el-button {
+    width: 100%;
+  }
+}
+</style>
+
+
--- a/web-front/src/views/Playground.vue
+++ b/web-front/src/views/Playground.vue
@@ -21,12 +21,26 @@
      <span style="margin-left: 10px;">正在检查访问权限...</span>
    </div>

+    <!-- 演练场禁用提示 -->
+    <div v-if="!loading && !authChecking && !playgroundEnabled" class="playground-auth-overlay">
+      <div class="playground-auth-card">
+        <div class="auth-icon" style="color: #f56c6c;">
+          <el-icon :size="50"><WarningFilled /></el-icon>
+        </div>
+        <div class="auth-title">演练场功能已禁用</div>
+        <div class="auth-subtitle">请联系管理员启用演练场功能</div>
+        <el-button type="primary" size="large" @click="goHome" class="auth-button">
+          <span>返回首页</span>
+        </el-button>
+      </div>
+    </div>
+
    <div v-if="shouldShowAuthUI" class="playground-auth-overlay">
      <div class="playground-auth-card">
        <div class="auth-icon">
          <el-icon :size="50"><Lock /></el-icon>
        </div>
-        <div class="auth-title">JS解析器演练场</div>
+        <div class="auth-title">脚本解析器演练场</div>
        <div class="auth-subtitle">请输入访问密码</div>
        <el-input
          v-model="inputPassword"
@@ -56,7 +70,7 @@
      <template #header>
        <div class="card-header">
          <div class="header-left">
-            <span class="title">JS解析器演练场</span>
+            <span class="title">脚本解析器演练场</span>
            <!-- 语言显示（仅支持JavaScript） -->
            <span style="margin-left: 15px; color: var(--el-text-color-secondary); font-size: 12px;">
              JavaScript (ES5)
@@ -118,8 +132,133 @@
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <!-- 代码编辑标签页 -->
        <el-tab-pane label="代码编辑" name="editor">
-          <Splitpanes :class="['default-theme', isMobile ? 'mobile-vertical' : '']" :horizontal="isMobile" @resized="handleResize">
-            <!-- 编辑器区域 (PC: 左侧, Mobile: 上方) -->
+          <!-- 移动端：不使用 splitpanes，内容自然向下流动 -->
+          <div v-if="isMobile" class="mobile-layout">
+            <!-- 编辑器区域 -->
+            <div class="editor-section">
+              <MonacoEditor
+                ref="editorRef"
+                v-model="jsCode"
+                :theme="editorTheme"
+                :height="'400px'"
+                :options="editorOptions"
+                @change="onCodeChange"
+              />
+            </div>
+            
+            <!-- 测试参数和结果区域 -->
+            <div v-if="!collapsedPanels.rightPanel" class="test-section mobile-test-section">
+              <!-- 测试参数 -->
+              <el-card class="test-params-card collapsible-card" shadow="never" style="margin-top: 12px">
+                <template #header>
+                  <div class="card-header-with-collapse">
+                    <span>测试参数</span>
+                    <el-button 
+                      text 
+                      size="small" 
+                      :icon="collapsedPanels.testParams ? 'ArrowDown' : 'ArrowUp'"
+                      @click="togglePanel('testParams')"
+                    />
+                  </div>
+                </template>
+                <transition name="collapse">
+                  <div v-show="!collapsedPanels.testParams">
+                    <el-form :model="testParams" label-width="0px" size="small" class="test-params-form">
+                      <el-form-item label="" class="share-url-item">
+                        <el-input
+                          v-model="testParams.shareUrl"
+                          placeholder="请输入分享链接"
+                          clearable
+                        />
+                      </el-form-item>
+                      <el-form-item label="" class="password-item">
+                        <el-input
+                          v-model="testParams.pwd"
+                          placeholder="密码（可选）"
+                          clearable
+                        />
+                      </el-form-item>
+                      <el-form-item label="" class="method-item-horizontal">
+                        <el-radio-group v-model="testParams.method" size="small">
+                          <el-radio label="parse">parse</el-radio>
+                          <el-radio label="parseFileList">parseFileList</el-radio>
+                        </el-radio-group>
+                      </el-form-item>
+                      <el-form-item class="button-item">
+                        <el-button
+                          type="primary"
+                          :loading="testing"
+                          @click="executeTest"
+                          style="width: 100%"
+                        >
+                          执行测试
+                        </el-button>
+                      </el-form-item>
+                    </el-form>
+                  </div>
+                </transition>
+              </el-card>
+
+              <!-- 执行结果 -->
+              <el-card class="result-card collapsible-card" shadow="never" style="margin-top: 10px">
+                <template #header>
+                  <div class="card-header-with-collapse">
+                    <span>执行结果</span>
+                    <el-button 
+                      text 
+                      size="small" 
+                      :icon="collapsedPanels.testResult ? 'ArrowDown' : 'ArrowUp'"
+                      @click="togglePanel('testResult')"
+                    />
+                  </div>
+                </template>
+                <transition name="collapse">
+                  <div v-show="!collapsedPanels.testResult">
+                    <div v-if="testResult" class="result-content">
+                      <el-alert
+                        :type="testResult.success ? 'success' : 'error'"
+                        :title="testResult.success ? '执行成功' : '执行失败'"
+                        :closable="false"
+                        style="margin-bottom: 10px"
+                      />
+                      
+                      <div v-if="testResult.success" class="result-section">
+                        <div class="section-title">结果数据：</div>
+                        <div v-if="testResult.result" class="result-debug-box">
+                          <strong>结果内容：</strong>{{ testResult.result }}
+                        </div>
+                        <JsonViewer :value="testResult.result" :expand-depth="3" />
+                      </div>
+
+                      <div v-if="testResult.error" class="result-section">
+                        <div class="section-title">错误信息：</div>
+                        <el-alert type="error" :title="testResult.error" :closable="false" />
+                        <div v-if="testResult.stackTrace" class="stack-trace">
+                          <el-collapse>
+                            <el-collapse-item title="查看堆栈信息" name="stack">
+                              <pre>{{ testResult.stackTrace }}</pre>
+                            </el-collapse-item>
+                          </el-collapse>
+                        </div>
+                      </div>
+
+                      <div v-if="testResult.executionTime" class="result-section">
+                        <div class="section-title">执行时间：</div>
+                        <div>{{ testResult.executionTime }}ms</div>
+                      </div>
+                    </div>
+                    <div v-else class="empty-result">
+                      <el-empty description="暂无执行结果" :image-size="80" />
+                    </div>
+                  </div>
+                </transition>
+              </el-card>
+            </div>
+          </div>
+
+          <!-- 桌面端：使用 splitpanes -->
+          <Splitpanes v-else class="default-theme" @resized="handleResize">
+            <!-- 编辑器区域 (左侧) -->
            <Pane :size="collapsedPanels.rightPanel ? 100 : splitSizes[0]" min-size="30" class="editor-pane">
              <div class="editor-section">
                <MonacoEditor
@@ -133,9 +272,9 @@
              </div>
            </Pane>

-            <!-- 测试参数和结果区域 (PC: 右侧, Mobile: 下方) -->
+            <!-- 测试参数和结果区域 (右侧) -->
            <Pane v-if="!collapsedPanels.rightPanel" 
-              :size="splitSizes[1]" min-size="20" class="test-pane" :style="isMobile ? 'margin-top: 10px;' : 'margin-left: 10px;'">
+              :size="splitSizes[1]" min-size="20" class="test-pane" style="margin-left: 10px;">
              <div class="test-section">
                <!-- 优化的折叠按钮 -->
                <el-tooltip content="折叠测试面板" placement="left">
@@ -331,7 +470,7 @@
            <transition name="collapse">
              <div v-show="!collapsedPanels.help">
              <div class="help-content">
-                <h3>什么是JS解析器演练场？</h3>
+                <h3>什么是脚本解析器演练场？</h3>
                <p>演练场允许您快速编写、测试和发布JavaScript解析脚本，无需重启服务器即可调试和验证解析逻辑。</p>
                
                <h3>快速开始</h3>
@@ -459,7 +598,7 @@
                  </el-tag>
                </template>
              </el-table-column>
-              <el-table-column label="操作" width="200" fixed="right">
+              <el-table-column label="操作" width="120" fixed="right">
                <template #default="scope">
                  <el-button size="small" @click="loadParserToEditor(scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="deleteParser(scope.row.id)">删除</el-button>
@@ -472,26 +611,33 @@
    </el-card>

    <!-- 发布对话框 -->
-    <!-- 发布对话框 -->
-    <el-dialog v-model="publishDialogVisible" title="发布解析器" width="600px">
-      <el-form :model="publishForm" label-width="100px">
+    <el-dialog 
+      v-model="publishDialogVisible" 
+      title="发布解析器" 
+      :width="isMobile ? '90%' : '600px'"
+      :close-on-click-modal="false"
+      class="publish-dialog"
+    >
+      <el-form :model="publishForm" :label-width="isMobile ? '80px' : '100px'">
        <el-form-item label="脚本代码">
          <el-input
            v-model="publishForm.jsCode"
            type="textarea"
-            :rows="10"
+            :rows="isMobile ? 8 : 10"
            readonly
+            class="publish-code-textarea"
          />
        </el-form-item>
        <el-alert
          type="warning"
          :closable="false"
          style="margin-bottom: 20px"
+          class="publish-alert"
        >
          <template #title>
-            <div>
-              <p>发布前请确保：</p>
-              <ul>
+            <div class="publish-checklist">
+              <p style="margin-bottom: 8px; font-weight: 500;">发布前请确保：</p>
+              <ul style="margin: 0; padding-left: 20px;">
                <li>脚本已通过测试</li>
                <li>元数据信息完整（@name, @type, @displayName, @match）</li>
                <li>类型标识（@type）唯一，不与现有解析器冲突</li>
@@ -502,25 +648,32 @@
        </el-alert>
      </el-form>
      <template #footer>
-        <el-button @click="publishDialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="publishing" @click="confirmPublish">确认发布</el-button>
+        <div class="dialog-footer-mobile">
+          <el-button @click="publishDialogVisible = false" :size="isMobile ? 'default' : 'default'">取消</el-button>
+          <el-button type="primary" :loading="publishing" @click="confirmPublish" :size="isMobile ? 'default' : 'default'">确认发布</el-button>
+        </div>
      </template>
    </el-dialog>
    
    <!-- 快捷键帮助对话框 -->
-    <el-dialog v-model="shortcutsDialogVisible" title="⌨️ 快捷键" width="500px">
-      <el-table :data="shortcutsData" style="width: 100%" :show-header="false">
-        <el-table-column prop="name" label="功能" width="200" />
+    <el-dialog 
+      v-model="shortcutsDialogVisible" 
+      title="⌨️ 快捷键" 
+      :width="isMobile ? '90%' : '500px'"
+      class="shortcuts-dialog"
+    >
+      <el-table :data="shortcutsData" style="width: 100%" :show-header="false" class="shortcuts-table">
+        <el-table-column prop="name" label="功能" :width="isMobile ? 120 : 200" />
        <el-table-column prop="keys" label="快捷键">
          <template #default="{ row }">
-            <el-tag v-for="key in row.keys" :key="key" size="small" style="margin-right: 5px;">
+            <el-tag v-for="key in row.keys" :key="key" size="small" style="margin-right: 5px; margin-bottom: 4px;">
              {{ key }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
-        <el-button type="primary" @click="shortcutsDialogVisible = false">知道了</el-button>
+        <el-button type="primary" @click="shortcutsDialogVisible = false" :size="isMobile ? 'default' : 'default'">知道了</el-button>
      </template>
    </el-dialog>
  </div>
@@ -530,6 +683,7 @@
 import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { useMagicKeys, useFullscreen, useEventListener } from '@vueuse/core';
+import { useRouter } from 'vue-router';
 import { Splitpanes, Pane } from 'splitpanes';
 import 'splitpanes/dist/splitpanes.css';
 import MonacoEditor from '@/components/MonacoEditor.vue';
@@ -546,6 +700,8 @@ export default {
    Pane
  },
  setup() {
+    const router = useRouter();
+    
    // 语言常量
    const LANGUAGE = {
      JAVASCRIPT: 'JavaScript'
@@ -563,12 +719,13 @@ export default {
    const inputPassword = ref('');
    const authError = ref('');
    const authLoading = ref(false);
+    const playgroundEnabled = ref(true); // 演练场是否启用
    
    // ===== 移动端检测 =====
    const isMobile = ref(false);
    
    const testParams = ref({
-      shareUrl: 'https://lanzoui.com/i7Aq12ab3cd',
+      shareUrl: 'https://example.com/s/abc',
      pwd: '',
      method: 'parse'
    });
@@ -631,7 +788,7 @@ export default {
 // @type         example_parser
 // @displayName  示例网盘
 // @description  使用JavaScript实现的示例解析器
-// @match        https?://example\.com/s/(?<KEY>\w+)
+// @match        https?://example\.com/s/(?<KEY>\\w+)
 // @author       yourname
 // @version      1.0.0
 // ==/UserScript==
@@ -647,7 +804,7 @@ function parse(shareLinkInfo, http, logger) {
    var url = shareLinkInfo.getShareUrl();
    logger.info("开始解析: " + url);
    
-    var response = http.get(url);
+    var response = http.get('https://example.com');
    if (!response.isSuccess()) {
        throw new Error("请求失败: " + response.statusCode());
    }
@@ -700,7 +857,7 @@ function parseById(shareLinkInfo, http, logger) {
    
    // 计算属性：是否需要显示密码输入界面
    const shouldShowAuthUI = computed(() => {
-      return !loading.value && !authChecking.value && !authed.value;
+      return !loading.value && !authChecking.value && !authed.value && playgroundEnabled.value;
    });

    // 编辑器配置
@@ -716,7 +873,14 @@ function parseById(shareLinkInfo, http, logger) {
    
    // ===== 移动端检测 =====
    const updateIsMobile = () => {
+      const wasMobile = isMobile.value;
      isMobile.value = window.innerWidth <= 768;
+      // 如果是移动端，调整分栏大小，让测试面板有更多空间
+      if (isMobile.value && !wasMobile) {
+        splitSizes.value = [50, 50]; // 移动端：编辑器50%，测试面板50%
+      } else if (!isMobile.value && wasMobile) {
+        splitSizes.value = [70, 30]; // 桌面端：编辑器70%，测试面板30%
+      }
    };
    
    // ===== 进度设置函数 =====
@@ -734,19 +898,59 @@ function parseById(shareLinkInfo, http, logger) {
      try {
        const res = await playgroundApi.getStatus();
        if (res.code === 200 && res.data) {
-          authed.value = res.data.authed || res.data.public;
-          return res.data.authed || res.data.public;
+          // 检查是否启用
+          playgroundEnabled.value = res.data.enabled === true;
+          
+          if (!playgroundEnabled.value) {
+            authChecking.value = false;
+            return false;
+          }
+          
+          // 先检查localStorage中是否有保存的登录信息
+          const savedAuth = localStorage.getItem('playground_authed');
+          const authTime = localStorage.getItem('playground_auth_time');
+          
+          // 如果30天内登录过，直接认为已认证（实际认证状态由后端session决定）
+          if (savedAuth === 'true' && authTime) {
+            const daysSinceAuth = (Date.now() - parseInt(authTime)) / (1000 * 60 * 60 * 24);
+            if (daysSinceAuth < 30) {
+              // 先设置为已认证，然后验证后端session
+              authed.value = true;
+            }
+          }
+          
+          const isAuthed = res.data.authed || res.data.public;
+          authed.value = isAuthed;
+          
+          // 如果后端session已失效，清除localStorage
+          if (!isAuthed && savedAuth === 'true') {
+            localStorage.removeItem('playground_authed');
+            localStorage.removeItem('playground_auth_time');
+          }
+          
+          return isAuthed;
        }
+        playgroundEnabled.value = false;
        return false;
      } catch (error) {
        console.error('检查认证状态失败:', error);
-        ElMessage.error('检查访问权限失败: ' + error.message);
+        // 如果错误信息包含"已禁用"，则设置启用状态为false
+        if (error.message && error.message.includes('已禁用')) {
+          playgroundEnabled.value = false;
+        } else {
+          ElMessage.error('检查访问权限失败: ' + error.message);
+        }
        return false;
      } finally {
        authChecking.value = false;
      }
    };
    
+    // 返回首页
+    const goHome = () => {
+      router.push('/');
+    };
+    
    const submitPassword = async () => {
      if (!inputPassword.value.trim()) {
        authError.value = '请输入密码';
@@ -760,6 +964,9 @@ function parseById(shareLinkInfo, http, logger) {
        const res = await playgroundApi.login(inputPassword.value);
        if (res.code === 200 || res.success) {
          authed.value = true;
+          // 保存登录信息到localStorage，避免每次都需要登录
+          localStorage.setItem('playground_authed', 'true');
+          localStorage.setItem('playground_auth_time', Date.now().toString());
          ElMessage.success('登录成功');
          await initPlayground();
        } else {
@@ -787,7 +994,11 @@ function parseById(shareLinkInfo, http, logger) {
        if (saved) {
          jsCode.value = saved;
        } else {
+          // 默认加载示例代码和示例参数
          jsCode.value = exampleCode;
+          testParams.value.shareUrl = 'https://example.com/s/abc';
+          testParams.value.pwd = '';
+          testParams.value.method = 'parse';
        }
        
        setProgress(50, '初始化Monaco Editor类型定义...');
@@ -800,16 +1011,20 @@ function parseById(shareLinkInfo, http, logger) {
        if (savedTheme) {
          currentTheme.value = savedTheme;
          const theme = themes.find(t => t.name === savedTheme);
-          if (theme && document.documentElement && document.body) {
+          if (theme) {
            await nextTick();
-            if (theme.page === 'dark') {
-              document.documentElement.classList.add('dark');
-              document.body.classList.add('dark-theme');
-              document.body.style.backgroundColor = '#0a0a0a';
-            } else {
-              document.documentElement.classList.remove('dark');
-              document.body.classList.remove('dark-theme');
-              document.body.style.backgroundColor = '#f0f2f5';
+            const html = document.documentElement;
+            const body = document.body;
+            if (html && body && html.classList && body.classList) {
+              if (theme.page === 'dark') {
+                html.classList.add('dark');
+                body.classList.add('dark-theme');
+                body.style.backgroundColor = '#0a0a0a';
+              } else {
+                html.classList.remove('dark');
+                body.classList.remove('dark-theme');
+                body.style.backgroundColor = '#f0f2f5';
+              }
            }
          }
        }
@@ -847,6 +1062,13 @@ function parseById(shareLinkInfo, http, logger) {
          return;
        }
        
+        // 配置Monaco Editor使用国内CDN (npmmirror)
+        loader.config({
+          paths: {
+            vs: 'https://registry.npmmirror.com/monaco-editor/0.55.1/files/min/vs'
+          }
+        });
+        
        const monaco = await loader.init();
        if (monaco) {
          await configureMonacoTypes(monaco);
@@ -867,6 +1089,13 @@ function parseById(shareLinkInfo, http, logger) {
    // 加载示例代码
    const loadTemplate = () => {
      jsCode.value = exampleCode;
+      // 重置测试参数为示例链接
+      testParams.value.shareUrl = 'https://example.com/s/abc';
+      testParams.value.pwd = '';
+      testParams.value.method = 'parse';
+      // 清空测试结果
+      testResult.value = null;
+      consoleLogs.value = [];
      ElMessage.success('已加载JavaScript示例代码');
    };

@@ -1183,7 +1412,7 @@ curl "${baseUrl}/json/parser?url=${encodeURIComponent(exampleUrl)}"</pre>
        const html = document.documentElement;
        const body = document.body;
        
-        if (html && body) {
+        if (html && body && html.classList && body.classList) {
          if (theme.page === 'dark') {
            html.classList.add('dark');
            body.classList.add('dark-theme');
@@ -1328,8 +1557,13 @@ curl "${baseUrl}/json/parser?url=${encodeURIComponent(exampleUrl)}"</pre>
    const checkDarkMode = () => {
      try {
        const html = document.documentElement;
-        if (html) {
-          isDarkMode.value = html.classList?.contains('dark') || 
+        const body = document.body;
+        if (!html || !body) {
+          return; // DOM未准备好，直接返回
+        }
+        
+        if (html.classList) {
+          isDarkMode.value = html.classList.contains('dark') || 
                            html.getAttribute('data-theme') === 'dark';
          // 强制更新splitpanes分隔线样式
          updateSplitpanesStyle();
@@ -1342,19 +1576,31 @@ curl "${baseUrl}/json/parser?url=${encodeURIComponent(exampleUrl)}"</pre>
    // 强制更新splitpanes分隔线样式
    const updateSplitpanesStyle = () => {
      setTimeout(() => {
-        const splitters = document.querySelectorAll('.splitpanes__splitter');
-        const isDark = document.documentElement?.classList?.contains('dark') || 
-                      document.body?.classList?.contains('dark-theme');
-        
-        splitters.forEach(splitter => {
-          if (isDark) {
-            splitter.style.setProperty('background-color', 'rgba(255, 255, 255, 0.08)', 'important');
-            splitter.style.setProperty('background', 'rgba(255, 255, 255, 0.08)', 'important');
-          } else {
-            splitter.style.removeProperty('background-color');
-            splitter.style.removeProperty('background');
+        try {
+          const html = document.documentElement;
+          const body = document.body;
+          if (!html || !body) {
+            return; // DOM未准备好，直接返回
          }
-        });
+          
+          const splitters = document.querySelectorAll('.splitpanes__splitter');
+          const isDark = html.classList?.contains('dark') || 
+                        body.classList?.contains('dark-theme');
+          
+          splitters.forEach(splitter => {
+            if (splitter) {
+              if (isDark) {
+                splitter.style.setProperty('background-color', 'rgba(255, 255, 255, 0.08)', 'important');
+                splitter.style.setProperty('background', 'rgba(255, 255, 255, 0.08)', 'important');
+              } else {
+                splitter.style.removeProperty('background-color');
+                splitter.style.removeProperty('background');
+              }
+            }
+          });
+        } catch (error) {
+          console.warn('更新splitpanes样式失败:', error);
+        }
      }, 100);
    };

@@ -1378,14 +1624,19 @@ curl "${baseUrl}/json/parser?url=${encodeURIComponent(exampleUrl)}"</pre>
      checkDarkMode();

      // 监听主题变化
-      if (document.documentElement) {
-        const observer = new MutationObserver(() => {
-          checkDarkMode();
-        });
-        observer.observe(document.documentElement, {
-          attributes: true,
-          attributeFilter: ['class', 'data-theme']
-        });
+      const html = document.documentElement;
+      if (html && html.classList) {
+        try {
+          const observer = new MutationObserver(() => {
+            checkDarkMode();
+          });
+          observer.observe(html, {
+            attributes: true,
+            attributeFilter: ['class', 'data-theme']
+          });
+        } catch (error) {
+          console.warn('创建主题监听器失败:', error);
+        }
      }
      
      // 初始化splitpanes样式
@@ -1416,8 +1667,10 @@ curl "${baseUrl}/json/parser?url=${encodeURIComponent(exampleUrl)}"</pre>
      inputPassword,
      authError,
      authLoading,
+      playgroundEnabled,
      checkAuthStatus,
      submitPassword,
+      goHome,
      // 移动端
      isMobile,
      updateIsMobile,
@@ -2441,7 +2694,6 @@ html.dark .playground-container .splitpanes__splitter:hover {
  background-color: #fafafa;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 13px;
-  min-height: 250px;
  transition: all 0.3s ease;
 }

@@ -2636,26 +2888,28 @@ html.dark .playground-container .splitpanes__splitter:hover {
 }

 /* ===== 响应式布局 ===== */
-/* 移动端纵向布局 */
-.playground-container.is-mobile .splitpanes.mobile-vertical {
-  flex-direction: column !important;
-}
-
-.playground-container.is-mobile .splitpanes--horizontal > .splitpanes__splitter {
-  height: 6px;
+/* 移动端布局：内容自然向下流动 */
+.mobile-layout {
+  display: flex;
+  flex-direction: column;
  width: 100%;
-  cursor: row-resize;
-  margin: 5px 0;
 }

-.playground-container.is-mobile .editor-pane,
-.playground-container.is-mobile .test-pane {
-  width: 100% !important;
+.mobile-layout .editor-section {
+  width: 100%;
+  margin-bottom: 12px;
 }

-.playground-container.is-mobile .test-pane {
-  margin-left: 0 !important;
-  margin-top: 10px;
+.mobile-test-section {
+  width: 100%;
+  height: auto !important;
+  overflow-y: visible !important;
+  padding: 0;
+}
+
+.mobile-test-section .test-params-card,
+.mobile-test-section .result-card {
+  margin-bottom: 12px;
 }

 .playground-container.is-mobile .playground-loading-card {
@@ -2680,7 +2934,11 @@ html.dark .playground-container .splitpanes__splitter:hover {
  }
  
  .console-container {
-    max-height: 200px;
+    max-height: 250px;
+  }
+  
+  .empty-console {
+    padding: 20px 0;
  }
 }

@@ -2695,15 +2953,26 @@ html.dark .playground-container .splitpanes__splitter:hover {
    gap: 10px;
  }
  
+  .console-container {
+    max-height: 300px;
+    padding: 8px;
+  }
+  
+  .empty-console {
+    padding: 12px 0;
+    font-size: 13px;
+  }
+  
+  .console-entry {
+    font-size: 12px;
+    padding: 6px 0;
+  }
+  
  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }
  
-  .test-section {
-    margin-top: 20px;
-  }
-  
  .panel-expand-btn {
    right: 10px;
  }
@@ -2713,9 +2982,70 @@ html.dark .playground-container .splitpanes__splitter:hover {
    gap: 8px;
  }
  
-  .splitpanes {
+  /* 移动端结果区域自适应高度 */
+  .result-content {
+    max-height: none !important;
+    overflow-y: visible !important;
+  }
+  
+  /* 移动端测试区域不使用固定高度 */
+  .test-section {
+    height: auto !important;
+    overflow-y: visible !important;
+  }
+  
+  /* 移动端对话框样式 */
+  .publish-dialog :deep(.el-dialog) {
+    margin: 5vh auto !important;
+    max-height: 90vh;
+    display: flex;
    flex-direction: column;
  }
+  
+  .publish-dialog :deep(.el-dialog__body) {
+    flex: 1;
+    overflow-y: auto;
+    padding: 15px;
+  }
+  
+  .publish-code-textarea :deep(.el-textarea__inner) {
+    font-size: 12px;
+    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  }
+  
+  .publish-checklist {
+    font-size: 13px;
+  }
+  
+  .publish-checklist ul {
+    line-height: 1.8;
+  }
+  
+  .publish-checklist li {
+    margin-bottom: 4px;
+  }
+  
+  .dialog-footer-mobile {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+  
+  .shortcuts-dialog :deep(.el-dialog) {
+    margin: 5vh auto !important;
+    max-height: 90vh;
+  }
+  
+  .shortcuts-dialog :deep(.el-dialog__body) {
+    padding: 15px;
+    max-height: calc(90vh - 120px);
+    overflow-y: auto;
+  }
+  
+  .shortcuts-table :deep(.el-table__body) {
+    font-size: 13px;
+  }
 }

 /* ===== 改进的滚动条样式 ===== */
--- a/web-front/src/views/ShowList.vue
+++ b/web-front/src/views/ShowList.vue
@@ -61,12 +61,16 @@ export default {
      }
    },
    toggleTheme(isDark) {
-      if (isDark) {
-        document.body.classList.add('dark-theme')
-        document.documentElement.classList.add('dark-theme')
-      } else {
-        document.body.classList.remove('dark-theme')
-        document.documentElement.classList.remove('dark-theme')
+      const html = document.documentElement;
+      const body = document.body;
+      if (html && body && html.classList && body.classList) {
+        if (isDark) {
+          body.classList.add('dark-theme')
+          html.classList.add('dark-theme')
+        } else {
+          body.classList.remove('dark-theme')
+          html.classList.remove('dark-theme')
+        }
      }
    }
  },
--- a/web-front/vue.config.js
+++ b/web-front/vue.config.js
@@ -43,7 +43,7 @@ module.exports = {
        '@': resolve('src')
      }
    },
-    // Monaco Editor配置
+    // Monaco Editor配置 - 使用国内CDN
    module: {
      rules: [
        {