diff --git a/dashboard/docs/FASTIFY_DEPLOYMENT.md b/dashboard/docs/FASTIFY_DEPLOYMENT.md
index d6ced6f..efc7a71 100644
--- a/dashboard/docs/FASTIFY_DEPLOYMENT.md
+++ b/dashboard/docs/FASTIFY_DEPLOYMENT.md
@@ -129,7 +129,7 @@ fastify.get('/apps/drplayer/', async (request, reply) => {
 ## 测试验证
 
 1. 启动Fastify服务器
-2. 访问 `http://localhost:3000/apps/drplayer/`
+2. 访问 `http://localhost:5757/apps/drplayer/`
 3. 导航到不同页面（如设置页面）
 4. 刷新页面，确认不出现404错误
 5. 检查浏览器开发者工具，确认静态资源正常加载
diff --git a/dashboard/package.json b/dashboard/package.json
index de36d49..64ece72 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -1,7 +1,7 @@
 {
   "name": "drplayer",
   "private": true,
-  "version": "1.0.1 20251016",
+  "version": "1.0.3 20251017",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -26,6 +26,7 @@
   "dependencies": {
     "@fastify/static": "^6.12.0",
     "artplayer": "^5.3.0",
+    "artplayer-plugin-danmuku": "^5.2.0",
     "axios": "1.12.0",
     "crypto-js": "^4.2.0",
     "echarts": "^5.6.0",
diff --git a/dashboard/pnpm-lock.yaml b/dashboard/pnpm-lock.yaml
index 0dcef1e..3ddbe9e 100644
--- a/dashboard/pnpm-lock.yaml
+++ b/dashboard/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       artplayer:
         specifier: ^5.3.0
         version: 5.3.0
+      artplayer-plugin-danmuku:
+        specifier: ^5.2.0
+        version: 5.2.0
       axios:
         specifier: 1.12.0
         version: 1.12.0
@@ -657,6 +660,9 @@ packages:
   array-flatten@1.1.1:
     resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
 
+  artplayer-plugin-danmuku@5.2.0:
+    resolution: {integrity: sha512-iHHSGEc0J+gl7imX4nmLqqC7LXmv8xeGf2lUevhhyUCoiCRZplecpKQICHjErVb1Yqyp1xCy6Sp8eYN+EpFWFw==}
+
   artplayer@5.3.0:
     resolution: {integrity: sha512-yExO39MpEg4P+bxgChxx1eJfiUPE4q1QQRLCmqGhlsj+ANuaoEkR8hF93LdI5ZyrAcIbJkuEndxEiUoKobifDw==}
 
@@ -2290,6 +2296,8 @@ snapshots:
 
   array-flatten@1.1.1: {}
 
+  artplayer-plugin-danmuku@5.2.0: {}
+
   artplayer@5.3.0:
     dependencies:
       option-validator: 2.0.6
diff --git a/dashboard/src/App.vue b/dashboard/src/App.vue
index 30ab616..a4644aa 100644
--- a/dashboard/src/App.vue
+++ b/dashboard/src/App.vue
@@ -5,12 +5,21 @@
   </Layout>
   <!-- 全局Toast组件 -->
   <GlobalToast />
+  <!-- 全局悬浮iframe组件 -->
+  <FloatingIframe 
+    :default-url="'http://localhost:5757/apps/websocket'"
+    :default-position="{ x: 33, y: 604 }"
+    :default-size="{ width: 419, height: 883 }"
+    button-title="打开浮窗浏览器"
+    window-title="浮窗浏览器"
+  />
 </template>
 
 <script>
 import { onMounted } from 'vue';
 import Layout from './components/Layout.vue';
 import GlobalToast from './components/GlobalToast.vue';
+import FloatingIframe from './components/FloatingIframe.vue';
 import { useVisitedStore } from './stores/visitedStore';
 
 export default {
@@ -18,6 +27,7 @@ export default {
   components: {
     Layout,
     GlobalToast,
+    FloatingIframe,
   },
   setup() {
     const visitedStore = useVisitedStore();
diff --git a/dashboard/src/api/modules/module.js b/dashboard/src/api/modules/module.js
index 7cbc9a2..897a8ef 100644
--- a/dashboard/src/api/modules/module.js
+++ b/dashboard/src/api/modules/module.js
@@ -252,6 +252,7 @@ export const parsePlayUrl = async (module, params) => {
       playType: 'direct', // 默认直链
       url: '',
       headers: {}, // 添加headers字段
+      danmaku: '', // 添加弹幕字段
       needParse: false,
       needSniff: false,
       message: ''
@@ -265,6 +266,7 @@ export const parsePlayUrl = async (module, params) => {
         result.playType = 'parse'
         result.url = playData.url || playData.play_url || ''
         result.headers = parseHeaders(playData.headers || playData.header)
+        result.danmaku = playData.danmaku || '' // 处理弹幕字段
         result.needParse = true
         result.qualities = []
         result.hasMultipleQualities = false
@@ -319,6 +321,7 @@ export const parsePlayUrl = async (module, params) => {
         }
         
         result.headers = parseHeaders(playData.headers || playData.header)
+        result.danmaku = playData.danmaku || '' // 处理弹幕字段
         result.needParse = false
         result.needSniff = false
       } else if (playData.parse === 1) {
@@ -326,6 +329,7 @@ export const parsePlayUrl = async (module, params) => {
         result.playType = 'sniff'
         result.url = playData.url || playData.play_url || ''
         result.headers = parseHeaders(playData.headers || playData.header)
+        result.danmaku = playData.danmaku || '' // 处理弹幕字段
         result.needSniff = true
         result.qualities = []
         result.hasMultipleQualities = false
@@ -334,6 +338,7 @@ export const parsePlayUrl = async (module, params) => {
         // 默认处理为直链
         result.url = playData.url || playData.play_url || playData
         result.headers = parseHeaders(playData.headers || playData.header)
+        result.danmaku = playData.danmaku || '' // 处理弹幕字段
         result.qualities = []
         result.hasMultipleQualities = false
         result.message = '直链播放'
@@ -342,6 +347,7 @@ export const parsePlayUrl = async (module, params) => {
       // 如果返回的是字符串，直接作为播放地址
       result.url = playData
       result.headers = {}
+      result.danmaku = '' // 字符串类型无弹幕数据
       result.qualities = []
       result.hasMultipleQualities = false
       result.message = '直链播放'
diff --git a/dashboard/src/components/FloatingIframe.vue b/dashboard/src/components/FloatingIframe.vue
new file mode 100644
index 0000000..8c46b0c
--- /dev/null
+++ b/dashboard/src/components/FloatingIframe.vue
@@ -0,0 +1,619 @@
+<template>
+  <!-- 悬浮按钮 -->
+  <div 
+    v-if="shouldShowButton"
+    class="floating-button"
+    :style="{ 
+      left: buttonPosition.x + 'px', 
+      top: buttonPosition.y + 'px' 
+    }"
+    @click="openWindow"
+    @mousedown="startDragButton"
+    :title="buttonTitle"
+  >
+    <icon-computer class="button-icon" />
+  </div>
+
+  <!-- 悬浮窗口 -->
+  <div
+    v-show="isWindowOpen"
+    class="floating-window"
+    :style="{
+      left: windowPosition.x + 'px',
+      top: windowPosition.y + 'px',
+      width: windowSize.width + 'px',
+      height: windowSize.height + 'px',
+      zIndex: zIndex
+    }"
+    @mousedown="bringToFront"
+  >
+    <!-- 窗口标题栏 -->
+    <div 
+      class="window-header"
+      @mousedown="startDragWindow"
+    >
+      <div class="window-title">
+        <icon-computer class="title-icon" />
+        <span>{{ windowTitle }}</span>
+      </div>
+      <div class="window-controls">
+        <button 
+          class="control-btn minimize-btn"
+          @click="minimizeWindow"
+          title="最小化"
+        >
+          <icon-minus />
+        </button>
+        <button 
+          class="control-btn close-btn"
+          @click="closeWindow"
+          title="关闭"
+        >
+          <icon-close />
+        </button>
+      </div>
+    </div>
+
+    <!-- 窗口内容 -->
+    <div class="window-content">
+      <iframe
+        :src="iframeUrl"
+        class="iframe-content"
+        frameborder="0"
+        allowfullscreen
+        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+      ></iframe>
+    </div>
+
+    <!-- 调整大小的拖拽点 -->
+    <div 
+      class="resize-handle resize-se"
+      @mousedown="startResize"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, watch, onMounted, onUnmounted } from 'vue'
+import { 
+  IconComputer, 
+  IconMinus, 
+  IconClose 
+} from '@arco-design/web-vue/es/icon'
+
+// Props
+const props = defineProps({
+  defaultUrl: {
+    type: String,
+    default: 'http://localhost:5757/apps/websocket'
+  },
+  defaultPosition: {
+    type: Object,
+    default: () => ({ x: 33, y: 604 })
+  },
+  defaultSize: {
+    type: Object,
+    default: () => ({ width: 419, height: 883 })
+  },
+  buttonTitle: {
+    type: String,
+    default: '打开浮窗'
+  },
+  windowTitle: {
+    type: String,
+    default: '浮窗浏览器'
+  }
+})
+
+// 响应式数据
+const isWindowOpen = ref(false)
+const iframeUrl = ref(props.defaultUrl)
+
+// 响应式的调试设置状态
+const debugSettingsState = ref({
+  enabled: false,
+  url: ''
+})
+
+// 加载调试设置
+const loadDebugSettings = () => {
+  try {
+    const debugSettings = localStorage.getItem('debugSettings')
+    if (debugSettings) {
+      const settings = JSON.parse(debugSettings)
+      debugSettingsState.value = {
+        enabled: settings.enabled === true,
+        url: settings.url || ''
+      }
+    } else {
+      debugSettingsState.value = {
+        enabled: false,
+        url: ''
+      }
+    }
+  } catch (error) {
+    console.error('Failed to load debug settings:', error)
+    debugSettingsState.value = {
+      enabled: false,
+      url: ''
+    }
+  }
+}
+
+// 检查调试设置是否启用
+const isDebugEnabled = computed(() => {
+  return debugSettingsState.value.enabled
+})
+
+// 是否显示悬浮按钮
+const shouldShowButton = computed(() => {
+  return isDebugEnabled.value
+})
+
+// 获取调试设置URL
+const getDebugUrl = () => {
+  if (debugSettingsState.value.enabled && debugSettingsState.value.url) {
+    return debugSettingsState.value.url
+  }
+  return props.defaultUrl
+}
+
+// 计算属性：当前调试URL（用于监听变化）
+const currentDebugUrl = computed(() => {
+  return getDebugUrl()
+})
+
+// localStorage 变化监听器（跨标签页）
+const handleStorageChange = (e) => {
+  if (e.key === 'debugSettings') {
+    loadDebugSettings()
+  }
+}
+
+// 调试设置变化监听器（同页面内）
+const handleDebugSettingsChange = (e) => {
+  loadDebugSettings()
+}
+const zIndex = ref(1000)
+
+// 按钮位置
+const buttonPosition = reactive({
+  x: props.defaultPosition.x,
+  y: props.defaultPosition.y
+})
+
+// 窗口位置和大小
+const windowPosition = reactive({
+  x: 1696,
+  y: 130
+})
+
+const windowSize = reactive({
+  width: props.defaultSize.width,
+  height: props.defaultSize.height
+})
+
+// 拖拽状态
+const dragState = reactive({
+  isDragging: false,
+  isResizing: false,
+  startX: 0,
+  startY: 0,
+  startLeft: 0,
+  startTop: 0,
+  startWidth: 0,
+  startHeight: 0,
+  dragType: '' // 'button', 'window', 'resize'
+})
+
+// 打开窗口
+const openWindow = () => {
+  // 如果窗口已经打开，则关闭它
+  if (isWindowOpen.value) {
+    closeWindow()
+    return
+  }
+  
+  // 打开窗口
+  isWindowOpen.value = true
+  
+  // 只在URL发生变化时才更新iframe URL，避免重复初始化
+  const currentDebugUrl = getDebugUrl()
+  if (iframeUrl.value !== currentDebugUrl) {
+    iframeUrl.value = currentDebugUrl
+  }
+  
+  // 检查是否有保存的窗口位置，如果没有则使用默认位置
+  const savedWindowPos = localStorage.getItem('floating-iframe-window-position')
+  if (!savedWindowPos) {
+    // 只有在没有保存位置时才设置为默认位置
+    windowPosition.x = 1696
+    windowPosition.y = 130
+  }
+  // 如果有保存的位置，则使用已经在loadSavedPositions中加载的位置
+  
+  bringToFront()
+}
+
+// 关闭窗口
+const closeWindow = () => {
+  // 关闭前保存窗口位置和大小
+  saveWindowPosition()
+  saveWindowSize()
+  isWindowOpen.value = false
+}
+
+// 最小化窗口
+const minimizeWindow = () => {
+  // 最小化前保存窗口位置和大小
+  saveWindowPosition()
+  saveWindowSize()
+  isWindowOpen.value = false
+}
+
+// 置顶窗口
+const bringToFront = () => {
+  zIndex.value = Date.now()
+}
+
+// 开始拖拽按钮
+const startDragButton = (e) => {
+  if (e.button !== 0) return // 只响应左键
+  
+  dragState.isDragging = true
+  dragState.dragType = 'button'
+  dragState.startX = e.clientX
+  dragState.startY = e.clientY
+  dragState.startLeft = buttonPosition.x
+  dragState.startTop = buttonPosition.y
+  
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+// 开始拖拽窗口
+const startDragWindow = (e) => {
+  if (e.button !== 0) return // 只响应左键
+  
+  dragState.isDragging = true
+  dragState.dragType = 'window'
+  dragState.startX = e.clientX
+  dragState.startY = e.clientY
+  dragState.startLeft = windowPosition.x
+  dragState.startTop = windowPosition.y
+  
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+// 开始调整大小
+const startResize = (e) => {
+  if (e.button !== 0) return // 只响应左键
+  
+  dragState.isResizing = true
+  dragState.dragType = 'resize'
+  dragState.startX = e.clientX
+  dragState.startY = e.clientY
+  dragState.startWidth = windowSize.width
+  dragState.startHeight = windowSize.height
+  
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+// 鼠标移动处理
+const handleMouseMove = (e) => {
+  if (!dragState.isDragging && !dragState.isResizing) return
+  
+  const deltaX = e.clientX - dragState.startX
+  const deltaY = e.clientY - dragState.startY
+  
+  if (dragState.dragType === 'button') {
+    buttonPosition.x = Math.max(0, Math.min(window.innerWidth - 50, dragState.startLeft + deltaX))
+    buttonPosition.y = Math.max(0, Math.min(window.innerHeight - 50, dragState.startTop + deltaY))
+  } else if (dragState.dragType === 'window') {
+    windowPosition.x = Math.max(0, Math.min(window.innerWidth - 200, dragState.startLeft + deltaX))
+    windowPosition.y = Math.max(0, Math.min(window.innerHeight - 100, dragState.startTop + deltaY))
+  } else if (dragState.dragType === 'resize') {
+    const newWidth = Math.max(300, dragState.startWidth + deltaX)
+    const newHeight = Math.max(200, dragState.startHeight + deltaY)
+    
+    // 确保窗口不会超出屏幕
+    windowSize.width = Math.min(newWidth, window.innerWidth - windowPosition.x)
+    windowSize.height = Math.min(newHeight, window.innerHeight - windowPosition.y)
+  }
+}
+
+// 鼠标释放处理
+const handleMouseUp = () => {
+  // 根据拖拽类型保存对应的位置
+  if (dragState.dragType === 'button') {
+    saveButtonPosition()
+  } else if (dragState.dragType === 'window') {
+    saveWindowPosition()
+  } else if (dragState.dragType === 'resize') {
+    saveWindowSize()
+  }
+  
+  dragState.isDragging = false
+  dragState.isResizing = false
+  dragState.dragType = ''
+}
+
+// 位置持久化函数
+const saveButtonPosition = () => {
+  localStorage.setItem('floating-iframe-button-position', JSON.stringify({
+    x: buttonPosition.x,
+    y: buttonPosition.y
+  }))
+}
+
+const saveWindowPosition = () => {
+  localStorage.setItem('floating-iframe-window-position', JSON.stringify({
+    x: windowPosition.x,
+    y: windowPosition.y
+  }))
+}
+
+const saveWindowSize = () => {
+  localStorage.setItem('floating-iframe-window-size', JSON.stringify({
+    width: windowSize.width,
+    height: windowSize.height
+  }))
+}
+
+const loadSavedPositions = () => {
+  // 恢复按钮位置
+  const savedButtonPos = localStorage.getItem('floating-iframe-button-position')
+  if (savedButtonPos) {
+    try {
+      const pos = JSON.parse(savedButtonPos)
+      buttonPosition.x = pos.x
+      buttonPosition.y = pos.y
+    } catch (e) {
+      console.warn('Failed to parse saved button position:', e)
+    }
+  }
+  
+  // 恢复窗口位置
+  const savedWindowPos = localStorage.getItem('floating-iframe-window-position')
+  if (savedWindowPos) {
+    try {
+      const pos = JSON.parse(savedWindowPos)
+      windowPosition.x = pos.x
+      windowPosition.y = pos.y
+    } catch (e) {
+      console.warn('Failed to parse saved window position:', e)
+    }
+  }
+  
+  // 恢复窗口大小
+  const savedWindowSize = localStorage.getItem('floating-iframe-window-size')
+  if (savedWindowSize) {
+    try {
+      const size = JSON.parse(savedWindowSize)
+      windowSize.width = size.width
+      windowSize.height = size.height
+    } catch (e) {
+      console.warn('Failed to parse saved window size:', e)
+    }
+  }
+}
+
+// 监听调试URL变化，自动更新iframe URL（仅在窗口打开时）
+watch(currentDebugUrl, (newUrl, oldUrl) => {
+  if (newUrl !== oldUrl && isWindowOpen.value) {
+    iframeUrl.value = newUrl
+  }
+})
+
+// 生命周期
+onMounted(() => {
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+  
+  // 添加 localStorage 监听器（跨标签页）
+  window.addEventListener('storage', handleStorageChange)
+  
+  // 添加自定义事件监听器（同页面内）
+  window.addEventListener('debugSettingsChanged', handleDebugSettingsChange)
+  
+  // 加载保存的位置
+  loadSavedPositions()
+  
+  // 加载调试设置
+  loadDebugSettings()
+  
+  // 只在首次挂载且 iframe URL 为默认值时才初始化
+  if (iframeUrl.value === props.defaultUrl) {
+    iframeUrl.value = getDebugUrl()
+  }
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+  
+  // 移除 localStorage 监听器
+  window.removeEventListener('storage', handleStorageChange)
+  
+  // 移除自定义事件监听器
+  window.removeEventListener('debugSettingsChanged', handleDebugSettingsChange)
+  
+  // 组件卸载时保存所有位置
+  saveButtonPosition()
+  saveWindowPosition()
+  saveWindowSize()
+})
+
+// 暴露方法给父组件
+defineExpose({
+  openWindow,
+  closeWindow,
+  setUrl: (url) => { iframeUrl.value = url }
+})
+</script>
+
+<style scoped>
+/* 悬浮按钮样式 */
+.floating-button {
+  position: fixed;
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+  z-index: 999;
+  user-select: none;
+}
+
+.floating-button:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+}
+
+.button-icon {
+  color: white;
+  font-size: 18px;
+}
+
+/* 悬浮窗口样式 */
+.floating-window {
+  position: fixed;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  user-select: none;
+  border: 1px solid #e0e0e0;
+}
+
+/* 窗口标题栏 */
+.window-header {
+  height: 40px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  cursor: move;
+  color: white;
+}
+
+.window-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.title-icon {
+  font-size: 16px;
+}
+
+.window-controls {
+  display: flex;
+  gap: 4px;
+}
+
+.control-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+
+.control-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.close-btn:hover {
+  background: #ff4757;
+}
+
+/* 窗口内容 */
+.window-content {
+  height: calc(100% - 40px);
+  overflow: hidden;
+}
+
+.iframe-content {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* 调整大小拖拽点 */
+.resize-handle {
+  position: absolute;
+  background: transparent;
+}
+
+.resize-se {
+  bottom: 0;
+  right: 0;
+  width: 12px;
+  height: 12px;
+  cursor: se-resize;
+}
+
+.resize-se::after {
+  content: '';
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  width: 8px;
+  height: 8px;
+  background: linear-gradient(
+    -45deg,
+    transparent 0%,
+    transparent 40%,
+    #ccc 40%,
+    #ccc 60%,
+    transparent 60%,
+    transparent 100%
+  );
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .floating-window {
+    width: 90vw !important;
+    height: 70vh !important;
+    left: 5vw !important;
+    top: 15vh !important;
+  }
+  
+  .floating-button {
+    width: 36px;
+    height: 36px;
+  }
+  
+  .button-icon {
+    font-size: 16px;
+  }
+}
+
+/* 防止选中文本 */
+.floating-button,
+.window-header,
+.resize-handle {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/players/ArtVideoPlayer.vue b/dashboard/src/components/players/ArtVideoPlayer.vue
index 6b1f7e7..32d00af 100644
--- a/dashboard/src/components/players/ArtVideoPlayer.vue
+++ b/dashboard/src/components/players/ArtVideoPlayer.vue
@@ -26,11 +26,11 @@
       @close="closePlayer"
     />
     <div class="art-player-wrapper" v-show="props.visible">
-    
+
     <div ref="artPlayerContainer" class="art-player-container">
       <!-- ArtPlayer 将在这里初始化 -->
     </div>
-    
+
     <!-- 自动下一集倒计时弹窗 -->
     <div v-if="showAutoNextDialog" class="auto-next-dialog">
       <div class="auto-next-content">
@@ -49,9 +49,9 @@
         </div>
       </div>
     </div>
-    
 
-    
+
+
     <!-- 片头片尾设置弹窗 -->
     <SkipSettingsDialog
       :visible="showSkipSettingsDialog"
@@ -62,7 +62,7 @@
       @close="closeSkipSettingsDialog"
       @save="saveSkipSettings"
     />
-    
+
     <!-- 调试信息弹窗组件 -->
     <DebugInfoDialog
       :visible="showDebugDialog"
@@ -78,11 +78,12 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted, onUnmounted, nextTick, computed } from 'vue'
+import { ref, watch, onMounted, onUnmounted, nextTick, computed, markRaw, toRaw } from 'vue'
 import { Message } from '@arco-design/web-vue'
 import { IconClose } from '@arco-design/web-vue/es/icon'
 import Artplayer from 'artplayer'
 import Hls from 'hls.js'
+import artplayerPluginDanmuku from 'artplayer-plugin-danmuku'
 import { MediaPlayerManager, detectVideoFormat, createCustomPlayer, destroyCustomPlayer } from '@/utils/MediaPlayerManager'
 
 // 配置自定义倍速选项
@@ -134,6 +135,11 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   },
+  // 弹幕链接，用于弹幕功能
+  danmakuUrl: {
+    type: String,
+    default: ''
+  },
   // 画质相关属性
   qualities: {
     type: Array,
@@ -199,6 +205,13 @@ const currentPlayingUrl = ref('')
 // 代理设置变化追踪器 - 用于强制 proxyVideoUrl 计算属性重新计算
 const proxySettingsVersion = ref(0)
 
+// 弹幕相关状态
+const danmakuEnabled = ref(JSON.parse(localStorage.getItem('danmakuEnabled') || 'true'))
+const danmakuData = ref([])
+const danmakuLoading = ref(false)
+const currentDanmakuUrl = ref('') // 当前弹幕iframe的URL
+
+
 // 计算属性：是否显示调试按钮
 const showDebugButton = computed(() => {
   return !!props.videoUrl
@@ -208,11 +221,11 @@ const showDebugButton = computed(() => {
 const proxyVideoUrl = computed(() => {
   // 依赖 proxySettingsVersion 以响应代理设置变化
   proxySettingsVersion.value
-  
+
   // 使用当前实际播放的URL，如果没有则使用props.videoUrl
   const actualUrl = currentPlayingUrl.value || props.videoUrl
   if (!actualUrl) return ''
-  
+
   const headers = props.headers || {}
   return processVideoUrl(actualUrl, headers)
 })
@@ -222,7 +235,7 @@ const getCurrentQualityLabel = computed(() => {
   if (!currentQuality.value || availableQualities.value.length === 0) {
     return '默认'
   }
-  
+
   // 按照T4格式处理：使用name字段
   const currentQualityData = availableQualities.value.find(q => q.name === currentQuality.value)
   return currentQualityData?.name || currentQuality.value || '默认'
@@ -276,55 +289,378 @@ const {
 // 链接类型判断函数
 const isDirectVideoLink = (url) => {
   if (!url) return false
-  
+
   // 视频文件扩展名
   const videoExtensions = [
-    '.mp4', '.webm', '.ogg', '.avi', '.mov', '.wmv', '.flv', '.mkv', 
+    '.mp4', '.webm', '.ogg', '.avi', '.mov', '.wmv', '.flv', '.mkv',
     '.m4v', '.3gp', '.ts', '.m3u8', '.mpd'
   ]
-  
+
   // 检查URL是否包含视频扩展名
-  const hasVideoExtension = videoExtensions.some(ext => 
+  const hasVideoExtension = videoExtensions.some(ext =>
     url.toLowerCase().includes(ext)
   )
-  
+
   // 检查是否是流媒体格式
-  const isStreamingFormat = url.toLowerCase().includes('m3u8') || 
+  const isStreamingFormat = url.toLowerCase().includes('m3u8') ||
                            url.toLowerCase().includes('mpd') ||
                            url.toLowerCase().includes('rtmp') ||
                            url.toLowerCase().includes('rtsp')
-  
+
   // 如果有视频扩展名或是流媒体格式，认为是直链
   if (hasVideoExtension || isStreamingFormat) {
     return true
   }
-  
+
   // 检查是否看起来像网页链接（但排除已经确认为视频的情况）
-  const looksLikeWebpage = url.includes('://') && 
-                          (url.includes('.html') || 
-                           url.includes('.php') || 
-                           url.includes('.asp') || 
+  const looksLikeWebpage = url.includes('://') &&
+                          (url.includes('.html') ||
+                           url.includes('.php') ||
+                           url.includes('.asp') ||
                            url.includes('.jsp') ||
                            url.match(/\/[^.?#]*$/) // 没有扩展名且没有查询参数的路径
                           ) &&
-                          !hasVideoExtension && 
+                          !hasVideoExtension &&
                           !isStreamingFormat
-  
+
   // 如果看起来像网页，认为不是直链
   if (looksLikeWebpage) {
     return false
   }
-  
+
   // 默认尝试作为直链处理
   return true
 }
 
+// 弹幕相关工具函数
+const parseDanmakuUrl = (videoUrl) => {
+  if (!videoUrl) return null
+
+  // 尝试从视频URL推断弹幕URL
+  // 这里可以根据不同的视频源网站实现不同的弹幕URL解析逻辑
+
+  // 示例：如果是bilibili链接
+  if (videoUrl.includes('bilibili.com')) {
+    // 从bilibili视频URL提取弹幕
+    const bvMatch = videoUrl.match(/BV[a-zA-Z0-9]+/)
+    if (bvMatch) {
+      return `https://api.bilibili.com/x/v1/dm/list.so?oid=${bvMatch[0]}`
+    }
+  }
+
+  // 示例：如果是其他支持弹幕的网站
+  // 可以在这里添加更多的解析逻辑
+
+  // 默认返回null，表示无法解析弹幕URL
+  return null
+}
+
+const loadDanmakuData = async (videoUrl) => {
+  if (!danmakuEnabled.value) {
+    return []
+  }
+
+  danmakuLoading.value = true
+
+  try {
+    // 优先使用 T4 解析返回的弹幕链接
+    let danmakuUrl = props.danmakuUrl
+    
+    // 如果没有 T4 弹幕链接，尝试从视频URL解析
+    if (!danmakuUrl) {
+      danmakuUrl = parseDanmakuUrl(videoUrl)
+    }
+    
+    if (!danmakuUrl) {
+      console.log('无法解析弹幕URL，使用默认弹幕数据')
+      return getDefaultDanmakuData()
+    }
+
+    console.log('弹幕链接:', danmakuUrl)
+
+    // 处理不同协议的弹幕链接
+    if (danmakuUrl.startsWith('http://') || danmakuUrl.startsWith('https://')) {
+      // HTTP协议：直接请求弹幕数据
+      console.log('处理HTTP协议弹幕链接:', danmakuUrl)
+      const response = await fetch(danmakuUrl)
+      const data = await response.json()
+      return parseDanmakuData(data)
+    } else if (danmakuUrl.startsWith('web://')) {
+      // WEB协议：创建自定义HTML层显示iframe
+      console.log('处理WEB协议弹幕链接:', danmakuUrl)
+      const iframeUrl = danmakuUrl.replace('web://', '')
+      await createDanmakuIframeLayer(iframeUrl)
+      // WEB协议不返回弹幕数据，而是通过iframe显示
+      return []
+    } else {
+      console.log('未知弹幕协议，使用默认弹幕数据')
+      return getDefaultDanmakuData()
+    }
+  } catch (error) {
+    console.error('加载弹幕数据失败:', error)
+    return getDefaultDanmakuData()
+  } finally {
+    danmakuLoading.value = false
+  }
+}
+
+const getDefaultDanmakuData = () => {
+  return [
+    {
+      text: '欢迎使用弹幕功能！',
+      time: 10,
+      color: '#ffffff',
+      type: 'right'
+    },
+    {
+      text: '这是一条测试弹幕',
+      time: 30,
+      color: '#00ff00',
+      type: 'right'
+    },
+    {
+      text: '弹幕功能已启用',
+      time: 60,
+      color: '#ff6b6b',
+      type: 'top'
+    }
+  ]
+}
+
+// 解析弹幕数据 - 将HTTP协议返回的数据转换为ArtPlayer弹幕格式
+const parseDanmakuData = (data) => {
+  try {
+    // 处理不同格式的弹幕数据
+    if (Array.isArray(data)) {
+      // 如果已经是数组格式，直接处理
+      return data.map(item => ({
+        text: item.text || item.content || '',
+        time: parseFloat(item.time || item.timestamp || 0),
+        color: item.color || '#ffffff',
+        type: item.type || 'right'
+      })).filter(item => item.text.trim().length > 0)
+    } else if (data.data && Array.isArray(data.data)) {
+      // 如果数据在data字段中
+      return data.data.map(item => ({
+        text: item.text || item.content || '',
+        time: parseFloat(item.time || item.timestamp || 0),
+        color: item.color || '#ffffff',
+        type: item.type || 'right'
+      })).filter(item => item.text.trim().length > 0)
+    } else {
+      console.warn('未知的弹幕数据格式:', data)
+      return getDefaultDanmakuData()
+    }
+  } catch (error) {
+    console.error('解析弹幕数据失败:', error)
+    return getDefaultDanmakuData()
+  }
+}
+
+const buildDanmakuIframeHtml = (iframeUrl)=>{
+  return `
+        <div class="danmaku-iframe-container" style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: 10;
+        ">
+          <iframe
+            src="${iframeUrl}"
+            style="
+              width: 100%;
+              height: 100%;
+              border: none;
+              background: transparent;
+              pointer-events: auto;
+            "
+            frameborder="0"
+            allowtransparency="true"
+          ></iframe>
+        </div>
+      `
+}
+
+// 创建弹幕iframe层 - 处理web://协议的弹幕链接
+const createDanmakuIframeLayer = async (iframeUrl) => {
+  try {
+    if (!artPlayerInstance.value) {
+      console.warn('ArtPlayer实例不存在，无法创建弹幕iframe层')
+      return
+    }
+
+    console.log('创建弹幕iframe层:', iframeUrl)
+
+    // 存储当前弹幕URL
+    currentDanmakuUrl.value = iframeUrl
+
+    // 移除已存在的弹幕iframe层
+    removeDanmakuIframeLayer()
+
+    // 更新iframe层内容
+    artPlayerInstance.value.layers.update({
+      name: 'danmaku-iframe',
+      html: buildDanmakuIframeHtml(currentDanmakuUrl.value),
+      style: {
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        display: danmakuEnabled.value ? 'block' : 'none',
+        zIndex: '10'
+      }
+    })
+
+    console.log('弹幕iframe层创建成功')
+  } catch (error) {
+    console.error('创建弹幕iframe层失败:', error)
+  }
+}
+
+// 移除弹幕iframe层（完全清空内容）
+const removeDanmakuIframeLayer = () => {
+  try {
+    if (artPlayerInstance.value && artPlayerInstance.value.layers) {
+      artPlayerInstance.value.layers.update({
+        name: 'danmaku-iframe',
+        html: '',
+        style: {
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          width: '100%',
+          height: '100%',
+          pointerEvents: 'none',
+          display: 'none',
+          zIndex: '10'
+        }
+      })
+    }
+  } catch (error) {
+    console.error('移除弹幕iframe层失败:', error)
+  }
+}
+
+// 隐藏弹幕iframe层（保留内容，只隐藏显示）
+const hideDanmakuIframeLayer = () => {
+  try {
+    if (artPlayerInstance.value && artPlayerInstance.value.layers) {
+      const currentLayer = artPlayerInstance.value.layers['danmaku-iframe']
+      if (currentLayer) {
+        artPlayerInstance.value.layers.update({
+          name: 'danmaku-iframe',
+          html: '',
+          style: {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
+            zIndex: '10',
+            display: 'none'
+          }
+        })
+        console.log('隐藏弹幕iframe层成功')
+      }
+    }
+  } catch (error) {
+    console.error('隐藏弹幕iframe层失败:', error)
+  }
+}
+
+// 显示弹幕iframe层
+const showDanmakuIframeLayer = () => {
+  try {
+    if (artPlayerInstance.value && artPlayerInstance.value.layers && currentDanmakuUrl.value) {
+      artPlayerInstance.value.layers.update({
+        name: 'danmaku-iframe',
+        html: buildDanmakuIframeHtml(currentDanmakuUrl.value),
+        style: {
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          width: '100%',
+          height: '100%',
+          pointerEvents: 'none',
+          display: 'block',
+          zIndex: '10'
+        }
+      })
+      console.log('显示弹幕iframe层成功:', currentDanmakuUrl.value)
+    }
+  } catch (error) {
+    console.error('显示弹幕iframe层失败:', error)
+  }
+}
+
+// 处理弹幕URL - 根据协议类型选择处理方式
+const handleDanmakuUrl = async () => {
+  try {
+    if (!props.danmakuUrl || !props.danmakuUrl.trim()) {
+      console.log('没有弹幕URL，使用默认弹幕数据')
+      return
+    }
+
+    const danmakuUrl = props.danmakuUrl.trim()
+    console.log('处理弹幕URL:', danmakuUrl)
+
+    if (danmakuUrl.startsWith('web://')) {
+      // 处理web://协议 - 创建iframe层
+      const iframeUrl = danmakuUrl.substring(6) // 移除 'web://' 前缀
+      console.log('检测到web://协议，创建iframe层:', iframeUrl)
+      await createDanmakuIframeLayer(iframeUrl)
+    } else if (danmakuUrl.startsWith('http://') || danmakuUrl.startsWith('https://')) {
+      // 处理HTTP协议 - 加载弹幕数据
+      console.log('检测到HTTP协议，加载弹幕数据:', danmakuUrl)
+      danmakuLoading.value = true
+      
+      try {
+        const response = await fetch(danmakuUrl)
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+        }
+        
+        const data = await response.json()
+        const parsedData = parseDanmakuData(data)
+        
+        // 更新弹幕数据
+        danmakuData.value = parsedData
+        console.log('弹幕数据加载成功，条数:', parsedData.length)
+        
+        // 如果弹幕插件已初始化，更新弹幕数据
+        if (artPlayerInstance.value && artPlayerInstance.value.plugins && artPlayerInstance.value.plugins.artplayerPluginDanmuku) {
+          artPlayerInstance.value.plugins.artplayerPluginDanmuku.config({
+            danmuku: parsedData
+          })
+          console.log('弹幕插件数据已更新')
+        }
+      } catch (error) {
+        console.error('加载弹幕数据失败:', error)
+        // 使用默认弹幕数据
+        danmakuData.value = getDefaultDanmakuData()
+      } finally {
+        danmakuLoading.value = false
+      }
+    } else {
+      console.warn('不支持的弹幕URL协议:', danmakuUrl)
+    }
+  } catch (error) {
+    console.error('处理弹幕URL失败:', error)
+  }
+}
+
 // 初始化 ArtPlayer
 const initArtPlayer = async (url) => {
   if (!artPlayerContainer.value || !url) return
-  
+
   console.log('初始化 ArtPlayer:', url)
-  
+
   // 应用CSP绕过策略
   try {
     const appliedPolicy = applyCSPBypass(url)
@@ -332,23 +668,23 @@ const initArtPlayer = async (url) => {
   } catch (error) {
     console.warn('应用CSP策略失败:', error)
   }
-  
+
   // 重置重连状态
   resetRetryState()
-  
+
   // 重置片头片尾状态
   resetSkipState()
-  
+
   // 重置防抖标志
   resetDebounceFlags()
-  
+
   // 等待 DOM 更新后计算动态高度
   await nextTick()
   dynamicHeight.value = calculateDynamicHeight()
-  
+
   // 应用动态高度到容器
   artPlayerContainer.value.style.height = `${dynamicHeight.value}px`
-  
+
   // 首先判断链接类型
   if (!isDirectVideoLink(url)) {
     console.log('检测到网页链接，在新窗口打开:', url)
@@ -357,14 +693,14 @@ const initArtPlayer = async (url) => {
     emit('close') // 关闭播放器
     return
   }
-  
+
   // 初始化或清理媒体播放器管理器
   if (!mediaPlayerManager.value) {
     mediaPlayerManager.value = new MediaPlayerManager()
   } else {
     mediaPlayerManager.value.destroy()
   }
-  
+
   // 如果播放器实例已存在，使用 switchUrl 方法切换视频源
   if (artPlayerInstance.value) {
     // 准备自定义请求头
@@ -373,41 +709,41 @@ const initArtPlayer = async (url) => {
       ...(props.headers || {}),
       ...(cspConfig.autoBypass ? {} : {})
     }
-    
+
     // 处理代理播放地址
     const finalUrl = processVideoUrl(url, headers)
     if (finalUrl !== url) {
       console.log('🔄 [代理播放] switchUrl使用代理地址')
     }
-    
+
     console.log('使用 switchUrl 方法切换视频源:', finalUrl)
-    
+
     try {
       // 使用 switchUrl 方法切换视频源，这样可以保持全屏状态和其他用户设置
       await artPlayerInstance.value.switchUrl(finalUrl)
       console.log('视频源切换成功')
-      
+
       // 重置片头片尾跳过状态
       resetSkipState()
-      
+
       // 重新应用片头片尾设置
       applySkipSettings()
-      
+
       return // 切换成功，直接返回
     } catch (error) {
       console.error('switchUrl 切换失败，回退到销毁重建方式:', error)
       // 如果 switchUrl 失败，回退到原来的销毁重建方式
-      
+
       // 清理媒体播放器管理器
       if (mediaPlayerManager.value) {
         mediaPlayerManager.value.destroy()
       }
-      
+
       artPlayerInstance.value.destroy()
       artPlayerInstance.value = null
     }
   }
-  
+
   try {
     // 准备自定义请求头
     const cspConfig = getCSPConfig()
@@ -415,18 +751,21 @@ const initArtPlayer = async (url) => {
       ...(props.headers || {}),
       ...(cspConfig.autoBypass ? {} : {})
     }
-    
+
     // 处理代理播放地址
     const finalUrl = processVideoUrl(url, headers)
     if (finalUrl !== url) {
       console.log('🔄 [代理播放] 使用代理地址播放视频')
     }
-    
+
     // 检测视频格式
     const videoFormat = detectVideoFormat(finalUrl)
     detectedFormat.value = videoFormat
     console.log('检测到视频格式:', videoFormat)
-    
+
+    // 加载弹幕数据
+    danmakuData.value = await loadDanmakuData(finalUrl)
+
     // 创建 ArtPlayer 实例
     const art = new Artplayer({
       container: artPlayerContainer.value,
@@ -470,7 +809,7 @@ const initArtPlayer = async (url) => {
             ...(props.headers || {}),
             ...(cspConfig.autoBypass ? {} : {})
           }
-          
+
           // 根据格式创建对应的播放器
           let player = null
           switch (videoFormat) {
@@ -484,13 +823,13 @@ const initArtPlayer = async (url) => {
               player = createCustomPlayer.dash(video, url, headers)
               break
           }
-          
+
           // 将播放器实例保存到art实例中，方便后续管理
           if (player) {
             art.customPlayer = player
             art.customPlayerFormat = videoFormat
           }
-          
+
           console.log(`${videoFormat.toUpperCase()} 播放器加载成功`)
         }
       } : {},
@@ -596,10 +935,36 @@ const initArtPlayer = async (url) => {
               hideQualityLayer()
             }
           }
+        },
+        {
+          name: 'danmaku-iframe',
+          html: '',
+          style: {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
+            display: 'none',
+            zIndex: '10'
+          }
         }
       ],
       // 插件配置
-      plugins: [],
+      plugins: [
+        artplayerPluginDanmuku({
+          // 使用函数返回以支持后续异步替换
+          danmuku: () => danmakuData.value,
+          speed: 5,
+          opacity: 1,
+          fontSize: 25,
+          antiOverlap: true,
+          synchronousPlayback: false,
+          filter: (danmu) => (danmu?.text || '').trim().length > 0 && (danmu?.text || '').length <= 80,
+          visible: danmakuEnabled.value,
+        })
+      ]
     })
 
     // 事件监听
@@ -607,6 +972,8 @@ const initArtPlayer = async (url) => {
       console.log('ArtPlayer 准备就绪')
       // 应用片头片尾设置
       applySkipSettings()
+      // 处理弹幕URL
+      handleDanmakuUrl()
     })
 
     art.on('video:loadstart', () => {
@@ -637,17 +1004,17 @@ const initArtPlayer = async (url) => {
     art.on('video:playing', () => {
       // 视频开始播放时，重置重连计数器
       resetRetryState()
-      
+
       // 重置防抖标志，确保新的播放周期可以正常处理自动下一集和循环播放
       resetDebounceFlags()
-      
+
       // 立即尝试片头跳过（针对视频刚开始播放的情况）
       const immediateSkipped = applyIntroSkipImmediate()
-      
+
       // 如果立即跳过未执行，则使用常规跳过逻辑
       if (!immediateSkipped) {
         applySkipSettings()
-        
+
         // 为了确保片头跳过生效，再次检查（短延迟）
         setTimeout(() => {
           applySkipSettings()
@@ -659,7 +1026,7 @@ const initArtPlayer = async (url) => {
     art.on('fullscreen', (isFullscreen) => {
       // 标记全屏状态开始变化
       onFullscreenChangeStart()
-      
+
       // 500ms后标记全屏状态变化结束
       setTimeout(() => {
         onFullscreenChangeEnd()
@@ -668,7 +1035,7 @@ const initArtPlayer = async (url) => {
 
     art.on('video:error', (err) => {
       console.error('ArtPlayer 播放错误:', err)
-      
+
       // 如果播放失败，再次检查是否为网页链接
       if (!isDirectVideoLink(url)) {
         console.log('播放失败，检测到可能是网页链接，在新窗口打开:', url)
@@ -677,7 +1044,7 @@ const initArtPlayer = async (url) => {
         emit('close') // 关闭播放器
         return
       }
-      
+
       // 处理重连逻辑
       handleRetry(url)
     })
@@ -685,18 +1052,18 @@ const initArtPlayer = async (url) => {
     art.on('video:ended', () => {
       try {
         console.log('视频播放结束')
-        
+
         // 防抖检查：如果正在处理自动下一集或循环播放，则忽略
         if (isProcessingAutoNext.value || isProcessingLoop.value) {
           console.log('正在处理中，忽略重复的视频结束事件')
           return
         }
-        
+
         // 优先处理循环播放
         if (loopEnabled.value) {
           console.log('循环播放：重新播放当前选集')
           isProcessingLoop.value = true // 设置防抖标志
-          
+
           // 重新执行当前选集的播放逻辑
           setTimeout(() => {
             try {
@@ -710,7 +1077,7 @@ const initArtPlayer = async (url) => {
           }, 1000)
           return
         }
-        
+
         // 视频结束时启动自动下一集
         if (autoNextEnabled.value && hasNextEpisode()) {
           isProcessingAutoNext.value = true // 设置防抖标志
@@ -727,13 +1094,29 @@ const initArtPlayer = async (url) => {
       }
     })
 
+    // 监听弹幕插件的显示/隐藏事件，实现与 danmakuEnabled 的双向同步
+    art.on('artplayerPluginDanmuku:hide', () => {
+      console.log('弹幕已隐藏，更新 danmakuEnabled 状态')
+      danmakuEnabled.value = false
+      // 持久化到 localStorage
+      localStorage.setItem('danmakuEnabled', 'false')
+    })
+
+    art.on('artplayerPluginDanmuku:show', () => {
+      console.log('弹幕已显示，更新 danmakuEnabled 状态')
+      danmakuEnabled.value = true
+      // 持久化到 localStorage
+      localStorage.setItem('danmakuEnabled', 'true')
+    })
+
     art.on('destroy', () => {
       console.log('ArtPlayer 已销毁')
       // 清理自动下一集相关资源
       cancelAutoNext()
     })
 
-    artPlayerInstance.value = art
+    // 避免 Vue 代理导致只读属性访问报错
+    artPlayerInstance.value = markRaw(art)
 
   } catch (error) {
     console.error('创建 ArtPlayer 实例失败:', error)
@@ -747,7 +1130,7 @@ const initQualityData = () => {
   if (props.qualities && props.qualities.length > 0) {
     availableQualities.value = [...props.qualities]
     currentQuality.value = props.initialQuality || props.qualities[0]?.name || '默认'
-    
+
     // 设置当前播放URL
     const currentQualityData = availableQualities.value.find(q => q.name === currentQuality.value)
     currentPlayingUrl.value = currentQualityData?.url || props.videoUrl
@@ -756,7 +1139,7 @@ const initQualityData = () => {
     currentQuality.value = '默认'
     currentPlayingUrl.value = props.videoUrl
   }
-  
+
   console.log('画质数据初始化完成:', {
     available: availableQualities.value,
     current: currentQuality.value,
@@ -767,7 +1150,7 @@ const initQualityData = () => {
 // 更新控制栏中的画质文本
 const updateQualityControlText = () => {
   if (!artPlayerInstance.value) return
-  
+
   try {
     // 通过DOM直接更新
     const container = artPlayerInstance.value.template.$container
@@ -800,25 +1183,25 @@ const handleQualityChange = (qualityName) => {
     console.warn('未找到指定画质:', qualityName)
     return
   }
-  
+
   console.log('切换画质:', qualityName, quality)
-  
+
   // 保存当前播放状态
   let currentTime = 0
   let isPaused = true
-  
+
   if (artPlayerInstance.value) {
     currentTime = artPlayerInstance.value.currentTime || 0
     isPaused = artPlayerInstance.value.paused
   }
-  
+
   // 更新当前画质和播放URL
   currentQuality.value = qualityName
   currentPlayingUrl.value = quality.url
-  
+
   // 更新控制栏中的画质文本
   updateQualityControlText()
-  
+
   // 触发画质切换事件，让父组件更新videoUrl
   // 父组件更新videoUrl后会触发watch监听器重新初始化播放器
   emit('quality-change', quality)
@@ -830,7 +1213,7 @@ const handleQualityChange = (qualityName) => {
 const handleHeaderQualityChange = (qualityName) => {
   // 根据name找到对应的画质
   const quality = availableQualities.value.find(q => q.name === qualityName)
-  
+
   if (quality) {
     handleQualityChange(quality.name)
   }
@@ -839,16 +1222,16 @@ const handleHeaderQualityChange = (qualityName) => {
 // 切换视频源（用于画质切换）
 const switchVideoSource = (newUrl) => {
   if (!artPlayerInstance.value || !newUrl) return
-  
+
   console.log('切换视频源:', newUrl)
-  
+
   // 保存当前播放状态
   const currentTime = artPlayerInstance.value.currentTime || 0
   const isPaused = artPlayerInstance.value.paused
-  
+
   // 切换URL
   artPlayerInstance.value.switchUrl(newUrl)
-  
+
   // 恢复播放位置和状态
   setTimeout(() => {
     if (artPlayerInstance.value) {
@@ -863,10 +1246,10 @@ const switchVideoSource = (newUrl) => {
 // 关闭播放器
 const closePlayer = () => {
   console.log('关闭 ArtPlayer 播放器')
-  
+
   // 重置重连状态
   resetRetryState()
-  
+
   // 清理播放器实例
   if (artPlayerInstance.value) {
     // 清理 HLS 实例
@@ -874,11 +1257,11 @@ const closePlayer = () => {
       artPlayerInstance.value.hls.destroy()
       artPlayerInstance.value.hls = null
     }
-    
+
     artPlayerInstance.value.destroy()
     artPlayerInstance.value = null
   }
-  
+
   emit('close')
 }
 
@@ -897,11 +1280,11 @@ const handleParserChange = (parser) => {
 // 处理代理播放地址变更
 const handleProxyChange = (proxyUrl) => {
   console.log('代理播放地址变更:', proxyUrl)
-  
+
   try {
     // 获取当前的addressSettings
     const savedAddresses = JSON.parse(localStorage.getItem('addressSettings') || '{}')
-    
+
     if (proxyUrl === 'disabled') {
       // 关闭代理播放，但保留设置界面中配置的代理地址
       savedAddresses.proxyPlayEnabled = false
@@ -911,13 +1294,13 @@ const handleProxyChange = (proxyUrl) => {
       savedAddresses.proxyPlayEnabled = true
       savedAddresses.proxyPlay = proxyUrl
     }
-    
+
     // 保存到localStorage
     localStorage.setItem('addressSettings', JSON.stringify(savedAddresses))
-    
+
     // 触发自定义事件，通知其他组件设置已变化
     window.dispatchEvent(new CustomEvent('addressSettingsChanged'))
-    
+
     // 重新加载视频以应用新的代理设置
     if (props.videoUrl) {
       nextTick(() => {
@@ -946,14 +1329,14 @@ const handleRetry = (originalUrl) => {
   if (isRetrying.value) {
     return // 如果正在重连，避免重复触发
   }
-  
+
   if (retryCount.value < maxRetries.value) {
     isRetrying.value = true
     retryCount.value++
-    
+
     console.log(`ArtPlayer 播放失败，正在进行第 ${retryCount.value} 次重连...`)
     Message.warning(`播放失败，正在进行第 ${retryCount.value} 次重连...`)
-    
+
     // 延迟重连，避免频繁重试
     setTimeout(() => {
       if (artPlayerInstance.value) {
@@ -961,12 +1344,12 @@ const handleRetry = (originalUrl) => {
           // 重连时也要使用代理处理后的URL，确保代理设置生效
           const headers = props.headers || {}
           const processedUrl = processVideoUrl(originalUrl, headers)
-          
+
           console.log('重连使用URL:', processedUrl)
           if (processedUrl !== originalUrl) {
             console.log('🔄 [代理播放] 重连时使用代理地址')
           }
-          
+
           // 重新加载视频
           artPlayerInstance.value.switchUrl(processedUrl)
           isRetrying.value = false
@@ -982,7 +1365,7 @@ const handleRetry = (originalUrl) => {
     console.error('ArtPlayer 重连次数已达上限，停止重连')
     Message.error(`视频播放失败，已重试 ${maxRetries.value} 次，请检查视频链接或网络连接`)
     emit('error', '视频播放失败，重连次数已达上限')
-    
+
     // 重置重连计数器
     retryCount.value = 0
     isRetrying.value = false
@@ -998,20 +1381,20 @@ const resetRetryState = () => {
 // 计算动态高度
 const calculateDynamicHeight = () => {
   if (!artPlayerContainer.value) return 450
-  
+
   const containerWidth = artPlayerContainer.value.offsetWidth
   if (containerWidth === 0) return 450
-  
+
   // 按照 16:9 的比例计算高度
   const aspectRatio = 16 / 9
   let calculatedHeight = containerWidth / aspectRatio
-  
+
   // 设置最小和最大高度限制
   const minHeight = 300
   const maxHeight = Math.min(window.innerHeight * 0.7, 600)
-  
+
   calculatedHeight = Math.max(minHeight, Math.min(calculatedHeight, maxHeight))
-  
+
   console.log(`容器宽度: ${containerWidth}px, 计算高度: ${calculatedHeight}px`)
   return Math.round(calculatedHeight)
 }
@@ -1038,17 +1421,17 @@ const getNextEpisode = () => {
 // 开始自动下一集倒计时
 const startAutoNextCountdown = () => {
   if (!autoNextEnabled.value || !hasNextEpisode()) return
-  
+
   console.log('开始自动下一集')
-  
+
   // 如果开启了倒计时，显示倒计时弹窗
   if (countdownEnabled.value) {
     autoNextCountdown.value = 10 // 10秒倒计时
     showAutoNextDialog.value = true
-    
+
     autoNextTimer.value = setInterval(() => {
       autoNextCountdown.value--
-      
+
       if (autoNextCountdown.value <= 0) {
         clearInterval(autoNextTimer.value)
         autoNextTimer.value = null
@@ -1070,10 +1453,10 @@ const cancelAutoNext = () => {
   }
   autoNextCountdown.value = 0
   showAutoNextDialog.value = false
-  
+
   // 重置防抖标志
   resetDebounceFlags()
-  
+
   console.log('用户取消自动下一集')
 }
 
@@ -1084,18 +1467,18 @@ const playNextEpisode = () => {
     resetDebounceFlags() // 重置防抖标志
     return
   }
-  
+
   const nextEpisode = getNextEpisode()
-  
+
   // 清理倒计时
   cancelAutoNext()
-  
+
   // 重置防抖标志
   resetDebounceFlags()
-  
+
   // 通知父组件切换到下一集
   emit('next-episode', props.currentEpisodeIndex + 1)
-  
+
   // 移除重复的播放提示，由父组件VideoDetail统一处理
   // Message.success(`开始播放: ${nextEpisode.name}`)
 }
@@ -1105,13 +1488,13 @@ const toggleAutoNext = () => {
   autoNextEnabled.value = !autoNextEnabled.value
   // 保存自动连播状态到本地存储
   localStorage.setItem('autoNextEnabled', JSON.stringify(autoNextEnabled.value))
-  
+
   // 如果开启自动连播，则关闭循环播放
   if (autoNextEnabled.value) {
     loopEnabled.value = false
     localStorage.setItem('loopEnabled', 'false')
   }
-  
+
   if (!autoNextEnabled.value) {
     cancelAutoNext()
   }
@@ -1120,17 +1503,17 @@ const toggleAutoNext = () => {
 // 切换循环播放开关
 const toggleLoop = () => {
   loopEnabled.value = !loopEnabled.value
-  
+
   // 保存到本地存储
   localStorage.setItem('loopEnabled', JSON.stringify(loopEnabled.value))
-  
+
   // 如果开启循环播放，则关闭自动连播
   if (loopEnabled.value) {
     autoNextEnabled.value = false
     localStorage.setItem('autoNextEnabled', 'false')
     cancelAutoNext()
   }
-  
+
   console.log('循环播放开关:', loopEnabled.value ? '开启' : '关闭')
 }
 
@@ -1138,7 +1521,7 @@ const toggleLoop = () => {
 const toggleCountdown = () => {
   countdownEnabled.value = !countdownEnabled.value
   console.log('倒计时开关:', countdownEnabled.value ? '开启' : '关闭')
-  
+
   if (!countdownEnabled.value) {
     cancelAutoNext()
   }
@@ -1157,34 +1540,34 @@ const closeDebugDialog = () => {
 const scrollToCurrentEpisode = async () => {
   // 等待DOM更新
   await nextTick()
-  
+
   if (!episodeListRef.value || props.currentEpisodeIndex < 0) {
     return
   }
-  
+
   // 查找当前选集按钮
   const currentButton = episodeListRef.value.querySelector('.episode-item.current')
   if (!currentButton) {
     return
   }
-  
+
   const container = episodeListRef.value
   const containerHeight = container.clientHeight
   const containerScrollHeight = container.scrollHeight
   const buttonTop = currentButton.offsetTop
   const buttonHeight = currentButton.offsetHeight
-  
+
   // 计算滚动位置，让当前选集出现在容器的中间偏上位置（约30%处）
   const targetPosition = buttonTop + (buttonHeight / 2) - (containerHeight * 0.3)
-  
+
   // 确保滚动位置在有效范围内
   const maxScrollTop = containerScrollHeight - containerHeight
   const targetScrollTop = Math.max(0, Math.min(targetPosition, maxScrollTop))
-  
+
   // 只有当需要滚动的距离超过一定阈值时才执行滚动
   const currentScrollTop = container.scrollTop
   const scrollDistance = Math.abs(targetScrollTop - currentScrollTop)
-  
+
   if (scrollDistance > 50) { // 滚动距离超过50px才执行
     container.scrollTo({
       top: targetScrollTop,
@@ -1201,7 +1584,7 @@ const createEpisodeLayerHTML = () => {
   if (!props.episodes || props.episodes.length === 0) {
     return '<div class="episode-layer-background"></div>'
   }
-  
+
   const episodeItems = props.episodes.map((episode, index) => {
     const isCurrentEpisode = index === props.currentEpisodeIndex
     return `
@@ -1214,7 +1597,7 @@ const createEpisodeLayerHTML = () => {
       </button>
     `
   }).join('')
-  
+
   return `
     <div class="episode-layer-background">
       <div class="episode-layer-content">
@@ -1233,7 +1616,7 @@ const createEpisodeLayerHTML = () => {
 // 显示选集layer
 const showEpisodeLayer = () => {
   if (!artPlayerInstance.value) return
-  
+
   try {
     // 更新layer内容和样式
     artPlayerInstance.value.layers.update({
@@ -1255,7 +1638,7 @@ const showEpisodeLayer = () => {
         justifyContent: 'center'
       }
     })
-    
+
     // 添加事件监听器
     nextTick(() => {
       const episodeLayer = artPlayerInstance.value.layers.episodeLayer
@@ -1264,7 +1647,7 @@ const showEpisodeLayer = () => {
         episodeLayer.addEventListener('click', handleEpisodeLayerClick)
       }
     })
-    
+
     console.log('显示选集layer')
   } catch (error) {
     console.error('显示选集layer失败:', error)
@@ -1276,7 +1659,7 @@ const handleEpisodeLayerClick = (event) => {
   const target = event.target.closest('.episode-layer-item')
   const closeBtn = event.target.closest('.episode-layer-close')
   const background = event.target.closest('.episode-layer-background')
-  
+
   if (closeBtn || (background && event.target === background)) {
     // 点击关闭按钮或背景，隐藏layer
     hideEpisodeLayer()
@@ -1293,14 +1676,14 @@ const handleEpisodeLayerClick = (event) => {
 // 隐藏选集layer
 const hideEpisodeLayer = () => {
   if (!artPlayerInstance.value) return
-  
+
   try {
     // 移除事件监听器
     const episodeLayer = artPlayerInstance.value.layers.episodeLayer
     if (episodeLayer) {
       episodeLayer.removeEventListener('click', handleEpisodeLayerClick)
     }
-    
+
     // 隐藏layer
     artPlayerInstance.value.layers.update({
       name: 'episodeLayer',
@@ -1328,7 +1711,7 @@ const hideEpisodeLayer = () => {
 // 切换选集layer显示状态
 const toggleEpisodeLayer = () => {
   if (!artPlayerInstance.value) return
-  
+
   try {
     const episodeLayer = artPlayerInstance.value.layers.episodeLayer
     if (episodeLayer && episodeLayer.style.display !== 'none') {
@@ -1346,7 +1729,7 @@ const toggleEpisodeLayer = () => {
 // 从layer中选择剧集
 const selectEpisodeFromLayer = (episodeIndex) => {
   console.log('从layer选择剧集:', episodeIndex)
-  
+
   // 发送选集事件给父组件
   const episode = props.episodes[episodeIndex]
   if (episode) {
@@ -1384,7 +1767,7 @@ const createQualityLayerHTML = () => {
 // 显示画质选择layer
 const showQualityLayer = () => {
   if (!artPlayerInstance.value) return
-  
+
   try {
     // 更新layer内容和样式
     artPlayerInstance.value.layers.update({
@@ -1406,7 +1789,7 @@ const showQualityLayer = () => {
         justifyContent: 'center'
       }
     })
-    
+
     // 添加事件监听器
     nextTick(() => {
       const qualityLayer = artPlayerInstance.value.layers.qualityLayer
@@ -1415,7 +1798,7 @@ const showQualityLayer = () => {
         qualityLayer.addEventListener('click', handleQualityLayerClick)
       }
     })
-    
+
     console.log('显示画质选择layer')
   } catch (error) {
     console.error('显示画质选择layer失败:', error)
@@ -1427,7 +1810,7 @@ const handleQualityLayerClick = (event) => {
   const target = event.target.closest('.quality-layer-item')
   const closeBtn = event.target.closest('.quality-layer-close')
   const background = event.target.closest('.quality-layer-background')
-  
+
   if (closeBtn || (background && event.target === background)) {
     // 点击关闭按钮或背景，隐藏layer
     hideQualityLayer()
@@ -1444,14 +1827,14 @@ const handleQualityLayerClick = (event) => {
 // 隐藏画质选择layer
 const hideQualityLayer = () => {
   if (!artPlayerInstance.value) return
-  
+
   try {
     // 移除事件监听器
     const qualityLayer = artPlayerInstance.value.layers.qualityLayer
     if (qualityLayer) {
       qualityLayer.removeEventListener('click', handleQualityLayerClick)
     }
-    
+
     // 隐藏layer
     artPlayerInstance.value.layers.update({
       name: 'qualityLayer',
@@ -1479,7 +1862,7 @@ const hideQualityLayer = () => {
 // 切换画质layer显示状态
 const toggleQualityLayer = () => {
   if (!artPlayerInstance.value) return
-  
+
   try {
     const qualityLayer = artPlayerInstance.value.layers.qualityLayer
     if (qualityLayer && qualityLayer.style.display !== 'none') {
@@ -1497,7 +1880,7 @@ const toggleQualityLayer = () => {
 // 从layer中选择画质
 const selectQualityFromLayer = (qualityIndex) => {
   console.log('从layer选择画质:', qualityIndex)
-  
+
   const quality = availableQualities.value[qualityIndex]
   if (quality) {
     handleQualityChange(quality.name)
@@ -1545,6 +1928,59 @@ watch(() => props.initialQuality, (newQuality) => {
   }
 })
 
+// 监听弹幕开关状态变化，同步到弹幕插件
+watch(danmakuEnabled, (newEnabled) => {
+  console.log('danmakuEnabled 状态变化:', newEnabled)
+
+  // 如果 ArtPlayer 实例存在且弹幕插件已加载
+  if (artPlayerInstance.value && artPlayerInstance.value.plugins && artPlayerInstance.value.plugins.artplayerPluginDanmuku) {
+    const danmakuPlugin = artPlayerInstance.value.plugins.artplayerPluginDanmuku
+
+    try {
+      if (newEnabled) {
+        // 显示弹幕
+        if (typeof danmakuPlugin.show === 'function') {
+          danmakuPlugin.show()
+          console.log('通过插件方法显示弹幕')
+        }
+      } else {
+        // 隐藏弹幕
+        if (typeof danmakuPlugin.hide === 'function') {
+          danmakuPlugin.hide()
+          console.log('通过插件方法隐藏弹幕')
+        }
+      }
+    } catch (error) {
+      console.error('控制弹幕显示/隐藏失败:', error)
+    }
+  }
+
+  // 控制iframe弹幕层的显示/隐藏
+  if (newEnabled) {
+    console.log('showDanmakuIframeLayer');
+    showDanmakuIframeLayer()
+  } else {
+    console.log('hideDanmakuIframeLayer');
+    hideDanmakuIframeLayer()
+  }
+
+  // 持久化到 localStorage
+  localStorage.setItem('danmakuEnabled', newEnabled.toString())
+})
+
+// 监听弹幕URL变化，重新处理弹幕
+watch(() => props.danmakuUrl, async (newDanmakuUrl) => {
+  console.log('danmakuUrl 变化:', newDanmakuUrl)
+  
+  if (artPlayerInstance.value) {
+    // 移除之前的iframe层
+    removeDanmakuIframeLayer()
+    
+    // 处理新的弹幕URL
+    await handleDanmakuUrl()
+  }
+})
+
 // 窗口大小变化处理
 const handleResize = () => {
   if (artPlayerContainer.value && artPlayerInstance.value) {
@@ -1561,10 +1997,10 @@ const handleResize = () => {
 // 处理代理设置变化
 const handleAddressSettingsChange = () => {
   console.log('检测到代理设置变化，重新初始化播放器')
-  
+
   // 更新代理设置版本号，强制 proxyVideoUrl 计算属性重新计算
   proxySettingsVersion.value++
-  
+
   if (props.videoUrl && props.visible) {
     nextTick(() => {
       initArtPlayer(props.videoUrl)
@@ -1588,22 +2024,25 @@ onMounted(() => {
 // 组件卸载时清理资源
 onUnmounted(() => {
   console.log('ArtVideoPlayer 组件即将卸载')
-  
+
   // 移除窗口大小变化监听器
   window.removeEventListener('resize', handleResize)
   // 移除代理设置变化监听器
   window.removeEventListener('addressSettingsChanged', handleAddressSettingsChange)
-  
+
   // 清理自动下一集相关资源
   cancelAutoNext()
-  
+
   // 清理媒体播放器管理器
   if (mediaPlayerManager.value) {
     mediaPlayerManager.value.destroy()
   }
-  
+
   // 销毁播放器实例
   if (artPlayerInstance.value) {
+    // 清理弹幕iframe层
+    removeDanmakuIframeLayer()
+    
     // 清理自定义播放器
     if (artPlayerInstance.value.customPlayer && artPlayerInstance.value.customPlayerFormat) {
       const format = artPlayerInstance.value.customPlayerFormat
@@ -1611,7 +2050,7 @@ onUnmounted(() => {
         destroyCustomPlayer[format](artPlayerInstance.value.customPlayer)
       }
     }
-    
+
     // 销毁播放器实例
     artPlayerInstance.value.destroy()
     artPlayerInstance.value = null
@@ -1946,7 +2385,7 @@ onUnmounted(() => {
   background: rgba(20, 20, 20, 0.95);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
-  box-shadow: 
+  box-shadow:
     0 32px 64px rgba(0, 0, 0, 0.4),
     0 0 0 1px rgba(255, 255, 255, 0.05);
   max-width: 900px;
@@ -2077,7 +2516,7 @@ onUnmounted(() => {
   border-color: rgba(64, 150, 255, 0.4);
   background: rgba(64, 150, 255, 0.08);
   transform: translateY(-2px) scale(1.02);
-  box-shadow: 
+  box-shadow:
     0 8px 32px rgba(64, 150, 255, 0.15),
     0 0 0 1px rgba(64, 150, 255, 0.2);
 }
@@ -2090,7 +2529,7 @@ onUnmounted(() => {
   border-color: rgba(64, 150, 255, 0.6);
   background: linear-gradient(135deg, rgba(64, 150, 255, 0.2) 0%, rgba(100, 180, 255, 0.15) 100%);
   color: #ffffff;
-  box-shadow: 
+  box-shadow:
     0 8px 32px rgba(64, 150, 255, 0.25),
     0 0 0 1px rgba(64, 150, 255, 0.4),
     inset 0 1px 0 rgba(255, 255, 255, 0.1);
@@ -2105,7 +2544,7 @@ onUnmounted(() => {
 :deep(.episode-layer-item.current:hover) {
   background: linear-gradient(135deg, rgba(64, 150, 255, 0.25) 0%, rgba(100, 180, 255, 0.2) 100%);
   transform: translateY(-2px) scale(1.04);
-  box-shadow: 
+  box-shadow:
     0 12px 40px rgba(64, 150, 255, 0.3),
     0 0 0 1px rgba(64, 150, 255, 0.5),
     inset 0 1px 0 rgba(255, 255, 255, 0.15);
@@ -2164,26 +2603,26 @@ onUnmounted(() => {
     margin: 0 12px;
     max-height: 70vh;
   }
-  
+
   :deep(.episode-layer-list) {
     grid-template-columns: 1fr;
     padding: 16px 20px 20px;
     gap: 12px;
     max-height: 50vh;
   }
-  
+
   :deep(.episode-layer-item) {
     min-height: 60px;
     padding: 12px 14px;
   }
-  
+
   :deep(.episode-layer-number) {
     min-width: 26px;
     height: 26px;
     font-size: 15px;
     margin-right: 10px;
   }
-  
+
   :deep(.episode-layer-name) {
     font-size: 13px;
   }
@@ -2193,19 +2632,19 @@ onUnmounted(() => {
   :deep(.episode-layer-background) {
     padding: 12px;
   }
-  
+
   :deep(.episode-layer-content) {
     max-height: 75vh;
   }
-  
+
   :deep(.episode-layer-header) {
     padding: 14px 16px 10px;
   }
-  
+
   :deep(.episode-layer-header h3) {
     font-size: 18px;
   }
-  
+
   :deep(.episode-layer-list) {
     max-height: 55vh;
     padding: 12px 16px 16px;
@@ -2230,7 +2669,7 @@ onUnmounted(() => {
   background: rgba(20, 20, 20, 0.95);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
-  box-shadow: 
+  box-shadow:
     0 32px 64px rgba(0, 0, 0, 0.4),
     0 0 0 1px rgba(255, 255, 255, 0.05);
   max-width: 400px;
@@ -2362,7 +2801,7 @@ onUnmounted(() => {
   border-color: rgba(64, 150, 255, 0.4);
   background: rgba(64, 150, 255, 0.08);
   transform: translateY(-2px) scale(1.02);
-  box-shadow: 
+  box-shadow:
     0 8px 32px rgba(64, 150, 255, 0.15),
     0 0 0 1px rgba(64, 150, 255, 0.2);
 }
@@ -2375,7 +2814,7 @@ onUnmounted(() => {
   border-color: rgba(64, 150, 255, 0.6);
   background: linear-gradient(135deg, rgba(64, 150, 255, 0.2) 0%, rgba(100, 180, 255, 0.15) 100%);
   color: #ffffff;
-  box-shadow: 
+  box-shadow:
     0 8px 32px rgba(64, 150, 255, 0.25),
     0 0 0 1px rgba(64, 150, 255, 0.4),
     inset 0 1px 0 rgba(255, 255, 255, 0.1);
@@ -2390,7 +2829,7 @@ onUnmounted(() => {
 :deep(.quality-layer-item.active:hover) {
   background: linear-gradient(135deg, rgba(64, 150, 255, 0.25) 0%, rgba(100, 180, 255, 0.2) 100%);
   transform: translateY(-2px) scale(1.04);
-  box-shadow: 
+  box-shadow:
     0 12px 40px rgba(64, 150, 255, 0.3),
     0 0 0 1px rgba(64, 150, 255, 0.5),
     inset 0 1px 0 rgba(255, 255, 255, 0.15);
@@ -2426,15 +2865,15 @@ onUnmounted(() => {
     max-width: 320px;
     max-height: 75vh;
   }
-  
+
   :deep(.quality-layer-header) {
     padding: 14px 16px 10px;
   }
-  
+
   :deep(.quality-layer-header h3) {
     font-size: 18px;
   }
-  
+
   :deep(.quality-layer-list) {
     max-height: 55vh;
     padding: 12px 16px 16px;
diff --git a/dashboard/src/services/backupService.js b/dashboard/src/services/backupService.js
index b688b47..ab2d7f5 100644
--- a/dashboard/src/services/backupService.js
+++ b/dashboard/src/services/backupService.js
@@ -39,7 +39,15 @@ const BACKUP_KEYS = {
   PARSER_CONFIG: 'parserConfig',
   PARSERS: 'drplayer_parsers', // 解析器数据
   SIDEBAR_COLLAPSED: 'sidebarCollapsed',
-  PAGE_STATE: 'pageState'
+  PAGE_STATE: 'pageState',
+  
+  // 开发者调试设置
+  DEBUG_SETTINGS: 'debugSettings',
+  
+  // 悬浮组件相关
+  FLOATING_BUTTON_POSITION: 'floating-iframe-button-position',
+  FLOATING_WINDOW_POSITION: 'floating-iframe-window-position',
+  FLOATING_WINDOW_SIZE: 'floating-iframe-window-size'
 }
 
 // 存储为字符串的键（不需要JSON解析）
@@ -189,6 +197,19 @@ export const collectBackupData = () => {
       liveConfigUrl: getLocalStorageData(BACKUP_KEYS.LIVE_CONFIG_URL, ''),
       // 当前站点
       currentSite: getLocalStorageData(BACKUP_KEYS.CURRENT_SITE, null)
+    },
+    
+    // 开发者调试设置
+    debugSettings: getLocalStorageData(BACKUP_KEYS.DEBUG_SETTINGS, {}),
+    
+    // 悬浮组件数据
+    floatingData: {
+      // 悬浮按钮位置
+      buttonPosition: getLocalStorageData(BACKUP_KEYS.FLOATING_BUTTON_POSITION, null),
+      // 悬浮窗口位置
+      windowPosition: getLocalStorageData(BACKUP_KEYS.FLOATING_WINDOW_POSITION, null),
+      // 悬浮窗口尺寸
+      windowSize: getLocalStorageData(BACKUP_KEYS.FLOATING_WINDOW_SIZE, null)
     }
   }
   
@@ -406,6 +427,37 @@ export const restoreBackupData = (backupData) => {
       }
     }
     
+    // 还原开发者调试设置
+    if (backupData.debugSettings) {
+      if (setLocalStorageData(BACKUP_KEYS.DEBUG_SETTINGS, backupData.debugSettings)) {
+        restoredCount++
+      } else {
+        failedCount++
+        errors.push('开发者调试设置')
+      }
+    }
+    
+    // 还原悬浮组件数据
+    if (backupData.floatingData) {
+      const floatingDataMapping = {
+        buttonPosition: BACKUP_KEYS.FLOATING_BUTTON_POSITION,
+        windowPosition: BACKUP_KEYS.FLOATING_WINDOW_POSITION,
+        windowSize: BACKUP_KEYS.FLOATING_WINDOW_SIZE
+      }
+      
+      for (const [key, value] of Object.entries(backupData.floatingData)) {
+        const storageKey = floatingDataMapping[key]
+        if (storageKey && value !== null) {
+          if (setLocalStorageData(storageKey, value)) {
+            restoredCount++
+          } else {
+            failedCount++
+            errors.push(`悬浮组件数据 ${key}`)
+          }
+        }
+      }
+    }
+    
     // 显示还原结果
     if (failedCount === 0) {
       Message.success(`数据还原成功！共还原 ${restoredCount} 项数据`)
diff --git a/dashboard/src/services/resetService.js b/dashboard/src/services/resetService.js
index 0d2d01b..8255d4f 100644
--- a/dashboard/src/services/resetService.js
+++ b/dashboard/src/services/resetService.js
@@ -55,9 +55,16 @@ const DEFAULT_CONFIGS = {
   searchAggregationSettings: {
     selectedSources: [] // 默认没有选中任何搜索源
   },
+
+  // 侧边栏折叠状态默认值
+  sidebarCollapsed: false,
   
-  // 侧边栏状态默认值
-  sidebarCollapsed: false
+  // 开发者调试设置默认值
+  debugSettings: {
+    enabled: false,
+    url: 'http://localhost:5757/apps/websocket',
+    resetting: false
+  }
 }
 
 // 需要完全清空的数据键
@@ -92,15 +99,23 @@ const CLEAR_DATA_KEYS = [
   'selectedParser',               // 选中的解析器
   'last-clicked-video',           // 最后点击的视频
   
-  // 界面状态
+  // 其他设置和状态
   'sidebar-collapsed',            // 侧边栏折叠状态
-  
-  // 地址配置历史
+
+  // 地址配置历史记录
   'drplayer_vod_config_history',
   'drplayer_live_config_history',
   'drplayer_proxy_access_history',
   'drplayer_proxy_play_history',
-  'drplayer_proxy_sniff_history'
+  'drplayer_proxy_sniff_history',
+  
+  // 开发者调试设置相关
+  'debugSettings',
+  
+  // 悬浮组件相关
+  'floating-iframe-button-position',
+  'floating-iframe-window-position',
+  'floating-iframe-window-size'
 ]
 
 /**
@@ -206,5 +221,6 @@ export const factoryResetWithConfirmation = async () => {
 export default {
   showResetConfirmation,
   performFactoryReset,
-  factoryResetWithConfirmation
+  factoryResetWithConfirmation,
+  DEFAULT_CONFIGS
 }
\ No newline at end of file
diff --git a/dashboard/src/views/ActionTest.vue b/dashboard/src/views/ActionTest.vue
index 5771343..9881fb1 100644
--- a/dashboard/src/views/ActionTest.vue
+++ b/dashboard/src/views/ActionTest.vue
@@ -587,7 +587,7 @@ export default {
         const result = await Actions.webView({
           actionId: 'test-webview',
           title: '网页视图测试',
-          url: 'https://www.baidu.com',
+          url: 'http://localhost:5757/apps/websocket',
           width: '85%',
           height: '80%',
           showToolbar: true,
diff --git a/dashboard/src/views/Settings.vue b/dashboard/src/views/Settings.vue
index ff25942..fe2367a 100644
--- a/dashboard/src/views/Settings.vue
+++ b/dashboard/src/views/Settings.vue
@@ -800,6 +800,83 @@
         </div>
       </a-card>
 
+      <!-- 开发者调试卡片 -->
+      <a-card class="settings-card config-card" title="开发者调试" :bordered="false">
+        <template #extra>
+          <icon-bug class="card-icon"/>
+        </template>
+
+        <div class="address-settings-section">
+          <!-- 允许调试开关 -->
+          <div class="setting-item">
+            <div class="setting-info">
+              <icon-bug class="setting-icon"/>
+              <div class="setting-text">
+                <div class="setting-title">允许调试</div>
+                <div class="setting-desc">开启开发者调试功能</div>
+              </div>
+            </div>
+            <div class="setting-value">
+              <a-switch 
+                v-model="debugSettings.enabled" 
+                @change="saveDebugSettings"
+                size="medium"
+              />
+            </div>
+          </div>
+
+          <!-- 调试地址配置 -->
+          <div class="address-config-item" v-if="debugSettings.enabled">
+            <div class="address-config-row">
+              <div class="address-config-info">
+                <icon-link class="address-config-icon"/>
+                <div class="address-config-text">
+                  <div class="address-config-title">调试地址</div>
+                  <div class="address-config-desc">配置悬浮iframe的调试地址</div>
+                </div>
+              </div>
+              <div class="address-config-input-group">
+                <a-input
+                    v-model="debugSettings.url"
+                    placeholder="请输入调试地址"
+                    size="medium"
+                    class="address-config-input"
+                    @blur="saveDebugSettings"
+                >
+                  <template #prefix>
+                    <icon-link/>
+                  </template>
+                </a-input>
+                <div class="address-config-actions">
+                  <a-button
+                      type="outline"
+                      @click="resetFloatingState"
+                      :loading="debugSettings.resetting"
+                      size="medium"
+                  >
+                    <template #icon>
+                      <icon-refresh/>
+                    </template>
+                    重置状态
+                  </a-button>
+                  <a-button
+                      type="primary"
+                      @click="saveDebugSettings"
+                      size="medium"
+                  >
+                    <template #icon>
+                      <icon-save/>
+                    </template>
+                    保存
+                  </a-button>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-card>
+
       <!-- 数据管理卡片 -->
       <a-card class="settings-card" title="数据管理" :bordered="false">
         <template #extra>
@@ -918,7 +995,8 @@ import {
   IconClockCircle,
   IconComputer,
   IconDownload,
-  IconCode
+  IconCode,
+  IconFolder
 } from '@arco-design/web-vue/es/icon'
 import AddressHistory from '@/components/AddressHistory.vue'
 import PlayerSelector from '@/components/PlayerSelector.vue'
@@ -1011,6 +1089,13 @@ const settings = reactive({
   searchAggregation: false // 聚搜功能开关，默认关闭
 })
 
+// 开发者调试设置
+const debugSettings = reactive({
+  enabled: false, // 是否启用调试功能
+  url: 'http://localhost:5757/apps/websocket', // 默认调试地址
+  resetting: false // 重置状态loading
+})
+
 // 播放器选择对话框状态
 const playerSelectVisible = ref(false)
 
@@ -1598,10 +1683,66 @@ const saveSettings = () => {
 // 监听设置项变化并自动保存
 watch(settings, saveSettings, {deep: true})
 
+// 保存开发者调试设置
+const saveDebugSettings = () => {
+  try {
+    localStorage.setItem('debugSettings', JSON.stringify(debugSettings))
+    
+    // 触发自定义事件，通知其他组件调试设置已更新
+    window.dispatchEvent(new CustomEvent('debugSettingsChanged', {
+      detail: { ...debugSettings }
+    }))
+    
+    Message.success('调试设置已保存')
+  } catch (error) {
+    console.error('Failed to save debug settings:', error)
+    Message.error('保存调试设置失败')
+  }
+}
+
+// 加载开发者调试设置
+const loadDebugSettings = () => {
+  try {
+    const saved = localStorage.getItem('debugSettings')
+    if (saved) {
+      const parsedSettings = JSON.parse(saved)
+      Object.assign(debugSettings, parsedSettings)
+    }
+  } catch (error) {
+    console.error('Failed to load debug settings:', error)
+  }
+}
+
+// 重置悬浮组件状态
+const resetFloatingState = async () => {
+  debugSettings.resetting = true
+  try {
+    // 清除悬浮组件相关的localStorage数据
+    localStorage.removeItem('floating-iframe-button-position')
+    localStorage.removeItem('floating-iframe-window-position')
+    localStorage.removeItem('floating-iframe-window-size')
+    
+    // 模拟异步操作
+    await new Promise(resolve => setTimeout(resolve, 500))
+    
+    Message.success('悬浮组件状态已重置，刷新页面后生效')
+  } catch (error) {
+    console.error('Failed to reset floating state:', error)
+    Message.error('重置悬浮组件状态失败')
+  } finally {
+    debugSettings.resetting = false
+  }
+}
+
+
+
+// 监听开发者调试设置变化并自动保存
+watch(debugSettings, saveDebugSettings, {deep: true})
 
 // 初始化
 onMounted(async () => {
   await loadConfig()
+  loadDebugSettings()
 })
 </script>
 
diff --git a/dashboard/src/views/VideoDetail.vue b/dashboard/src/views/VideoDetail.vue
index d12361d..9778755 100644
--- a/dashboard/src/views/VideoDetail.vue
+++ b/dashboard/src/views/VideoDetail.vue
@@ -98,6 +98,7 @@
         :current-episode-index="currentEpisodeIndex"
         :auto-next="true"
         :headers="parsedHeaders"
+        :danmaku-url="parsedDanmakuUrl"
         :qualities="parsedQualities"
         :has-multiple-qualities="hasMultipleQualities"
         :initial-quality="initialQuality"
@@ -425,6 +426,8 @@ const showVideoPlayer = ref(false)
 const parsedVideoUrl = ref('')
 // 解析后的请求头（用于T4接口解析结果）
 const parsedHeaders = ref({})
+// 解析后的弹幕链接（用于T4接口解析结果）
+const parsedDanmakuUrl = ref('')
 // 多画质相关数据
 const parsedQualities = ref([])
 const hasMultipleQualities = ref(false)
@@ -1584,11 +1587,14 @@ const selectEpisode = async (index) => {
          // 普通视频内容
          console.log('启动内置播放器播放直链视频:', parseResult.url)
          console.log('T4解析结果headers:', parseResult.headers)
+         console.log('T4解析结果danmaku:', parseResult.danmaku)
          console.log('T4解析结果画质信息:', parseResult.qualities, parseResult.hasMultipleQualities)
          
          parsedVideoUrl.value = parseResult.url
          // 提取并存储headers，如果没有headers则使用空对象
          parsedHeaders.value = parseResult.headers || {}
+         // 提取并存储弹幕链接，如果没有danmaku则使用空字符串
+         parsedDanmakuUrl.value = parseResult.danmaku || ''
          // 提取并存储画质信息
          parsedQualities.value = parseResult.qualities || []
          hasMultipleQualities.value = parseResult.hasMultipleQualities || false