11

src/components/DictTag/Select.vue

@@ -1,6 +1,6 @@
 <template>
 	<el-select :model-value="innerValue" :placeholder="placeholder" :multiple="multiple" :disabled="disabled"
-		:clearable="clearable" class="w-full" @update:model-value="handleChange">
+		:clearable="clearable" filterable class="w-full" @update:model-value="handleChange">
 		<el-option v-for="item in dictData" :key="item.value" :label="item.label" :value="item.value" />
 	</el-select>
 </template>

src/components/rtsp-plugin-video/lib/videoPlayer.js

@@ -398,138 +398,301 @@
     }
 
 
-    function socketOpen(curPortIndex = 0) {
-        if (typeof WebSocket === 'undefined') {
-            this.setting.createError && this.setting.createError({
-                code: 1005,
-                data: null,
-                success: false,
-                i18nKey: 'browser.not.support.socket',
-                message: "您的浏览器不支持socket!"
-            })
-            return
-        }
-        window.dhPlayerControl.videoWS = new WebSocket(`ws:127.0.0.1:${[window.dhPlayerControl.connectPort[curPortIndex]]}`)
-        window.dhPlayerControl.videoWS.onopen = function () {
-            window.dhPlayerControl.manualCloseWS = false
-            window.dhPlayerControl.windowState = 'wsSuccess' // websocket连接成功
-            window.dhPlayerControl.curPortIndex = curPortIndex
-            heartbeat.call(this)
-            let _isSupport = isSupport()
-            for (let key in window.dhPlayerControl.videoList) {
-                let currentThis = window.dhPlayerControl.videoList[key]
-                if (currentThis.disposed) continue
-                currentThis.send({
-                    method: 'common.version',
-                    info: {},
-                })
-                if (_isSupport.success) {
-                    if (currentThis.setting.usePluginLogin) {
-                        currentThis.loginServer()
-                        window.dhPlayerControl.loginFlag = "LOGIN_PENDING"
-                        let p = new Promise((resolve, reject) => {
-                            let interval = setInterval(() => {
-                                if (window.dhPlayerControl.loginFlag !== "LOGIN_PENDING") {
-                                    clearInterval(interval)
-                                    currentThis.loginWaitTimer = null
-                                    resolve()
-                                }
+    const CONNECT_ROUNDS = 3
+    const CONNECT_TIMEOUT_MS = 1500
+    const CONNECT_PORT_DELAY_MS = 100
+    const CONNECT_ROUND_DELAY_MS = 1000
+    const LOGIN_TIMEOUT_MS = 30000
+    const CONNECTION_ERROR_MESSAGE = '未能连接本机视频服务，请启动或重新启动视频插件后重试'
+    let connectionGeneration = 0
+    let connectionCycle = null
+    let loginRequestedSocket = null
+    // WebSocket 握手成功尚不代表原生窗口可用，短暂握手后断开仍共用本轮预算。
+    let remainingConnectionAttempts = null
 
-                            }, 300)
-                            currentThis.loginWaitTimer = interval
-                        })
-                        p.then(() => {
-                            if (currentThis.disposed) return
-                            currentThis.create()
-                            window.isResetConnect = currentThis.setting.isResetConnect
-                        })
-                    } else {
-                        currentThis.create()
-                        window.isResetConnect = currentThis.setting.isResetConnect
-                    }
+    function livePlayers() {
+        return Object.values(window.dhPlayerControl.videoList).filter(player => !player.disposed)
+    }
 
-                } else {
-                    currentThis.setting.createError(_isSupport)
-                }
-            }
-        }
-        window.dhPlayerControl.videoWS.onmessage = socketMessage
-        window.dhPlayerControl.videoWS.onclose = () => {
-            if (window.dhPlayerControl.windowState === 'wsPending' || window.dhPlayerControl.windowState === 'noPlugin') {
-                if (curPortIndex < window.dhPlayerControl.connectPort.length - 1) {
-                    window.dhPlayerControl.timer = setTimeout(() => {
-                        window.dhPlayerControl.videoWS = null
-                        socketOpen(curPortIndex + 1)
-                        clearTimeout(window.dhPlayerControl.timer)
-                    }, 300)
-                    return
-                }
-                // 未成功过，轮询端口
-                window.dhPlayerControl.windowState = 'noPlugin' // websocket连接失败
-                for (var key in window.dhPlayerControl.videoList) {
-                    var currentThis = window.dhPlayerControl.videoList[key]
-                    currentThis.setting.show = false
-                    currentThis.setting.createError && currentThis.setting.createError({
-                        code: 1001,
-                        data: null,
-                        i18nKey: 'video.player.plugin.not.installed',
-                        message: '插件未安装',
-                        success: false
-                    })
-                }
-            } else {
-                // 表示成功过，不需要再轮训判断端口了
-                window.dhPlayerControl.windowState = 'wsError' // websocket连接失败
-                if (window.isResetConnect && !window.dhPlayerControl.manualCloseWS) {
-                    console.log("----------无法与插件建立连接-------");
-                    for (var key in window.dhPlayerControl.videoList) {
-                        var currentThis = window.dhPlayerControl.videoList[key]
-                        currentThis.setting.show = false
-                        currentThis.setting.createError && currentThis.setting.createError({
-                            code: 1003,
-                            data: null,
-                            i18nKey: 'websocket.reload',
-                            message: '无法与播放器建立连接，正在尝试重连...',
-                            success: false
-                        })
-                    }
-                    setTimeout(() => {
-                        window.dhPlayerControl.videoWS = null
-                        socketOpen(window.dhPlayerControl.curPortIndex)
-                    }, 1000)
-                } else {
-                    for (var key in window.dhPlayerControl.videoList) {
-                        var currentThis = window.dhPlayerControl.videoList[key]
-                        currentThis.setting.show = false
-                        currentThis.setting.createError && currentThis.setting.createError({
-                            code: 1003,
-                            data: null,
-                            i18nKey: 'websocket.disconnect',
-                            message: '无法与播放器建立连接',
-                            success: false
-                        })
-                    }
-                }
-            }
+    function connectionPlayers() {
+        return livePlayers().filter(player => !player.connectionStopped)
+    }
+
+    function isCurrentConnection(socket, generation) {
+        return !!socket && connectionGeneration === generation && window.dhPlayerControl.videoWS === socket
+    }
+
+    function clearPlayerConnectionTasks(player) {
+        clearTimeout(player.setting.socketTimer)
+        clearTimeout(player.reconnectTimer)
+        clearTimeout(player.refreshStartTimer)
+        clearTimeout(player.setting.notifyrealmonitorTimeout)
+        clearInterval(player.loginWaitTimer)
+        clearTimeout(player.loginTimeoutTimer)
+        window.cancelAnimationFrame(player.setting.refreshTimer)
+        player.loginWaitTimer = null
+        player.loginTimeoutTimer = null
+        player.connectionSocket = null
+    }
+
+    // 原生句柄和回调只属于当前 socket 会话，重连不能等待旧窗口的销毁回包。
+    function clearSocketSession() {
+        const control = window.dhPlayerControl
+        clearInterval(window.wsHeart)
+        window.wsHeart = null
+        control.wsSession = 0
+        control.loginFlag = 'LOGIN_PENDING'
+        loginRequestedSocket = null
+        control.callBackList = {}
+        control.hwndList = {}
+        livePlayers().forEach(player => {
+            clearPlayerConnectionTasks(player)
+            document.removeEventListener('click', player.setTopBind)
+            window.removeEventListener('beforeunload', player.onbeforeunloadBind)
+            player.setting.hwnd = ''
+            player.setting.channelList = []
+            player.setting.show = false
+            player.setting.stopRefresh = true
+        })
+    }
+
+    function closeDetachedSocket(socket) {
+        if (!socket) return
+        socket.onopen = socket.onmessage = socket.onerror = socket.onclose = null
+        try {
+            if (socket.readyState < 2) socket.close()
+        } catch (error) {
+            console.log('关闭旧视频连接失败:', error)
         }
     }
 
-    /**
-     * 内部方法
-     * @desc 插件心跳，保活
-     */
-    function heartbeat() {
-        var that = this
+    function cancelConnectionCycle(resetAttempts = true) {
+        const control = window.dhPlayerControl
+        ++connectionGeneration
+        if (connectionCycle) {
+            clearTimeout(connectionCycle.retryTimer)
+            clearTimeout(connectionCycle.connectTimer)
+        }
+        connectionCycle = null
+        if (resetAttempts) remainingConnectionAttempts = null
+        const socket = control.videoWS
+        control.videoWS = null
+        control.wsConnect = false
+        control.windowState = 'wsIdle'
+        clearSocketSession()
+        closeDetachedSocket(socket)
+    }
+
+    function cancelUnusedConnectionCycle() {
+        if (connectionCycle && !connectionPlayers().length) cancelConnectionCycle()
+    }
+
+    function reportConnectionFailure(players, code) {
+        players.forEach(player => {
+            if (player.disposed) return
+            player.setting.createError && player.setting.createError({
+                code, data: null, success: false,
+                i18nKey: 'video.player.connection.failed',
+                message: CONNECTION_ERROR_MESSAGE
+            })
+        })
+    }
+
+    function initializeConnectedPlayer(player, socket, generation) {
+        const control = window.dhPlayerControl
+        const isCurrent = () => !player.disposed && !player.connectionStopped &&
+            control.videoList[player.setting.videoId] === player &&
+            isCurrentConnection(socket, generation) && socket.readyState === 1
+        if (!isCurrent() || player.connectionSocket === socket) return
+        player.connectionSocket = socket
+        player.setting.stopRefresh = false
+        const support = isSupport()
+        if (!support.success) {
+            player.setting.createError && player.setting.createError(support)
+            return
+        }
+        player.send({ method: 'common.version', info: {} })
+        if (!player.setting.usePluginLogin) {
+            player.create()
+            return
+        }
+        // 多个组件共享本机连接；后加入的实例也加入同一登录等待，不会悬空。
+        if (loginRequestedSocket !== socket || control.loginFlag === 'LOGIN_ERROR') {
+            loginRequestedSocket = socket
+            control.loginFlag = 'LOGIN_PENDING'
+            player.loginServer()
+        }
+        const clearLoginWait = () => {
+            clearInterval(player.loginWaitTimer)
+            clearTimeout(player.loginTimeoutTimer)
+            player.loginWaitTimer = player.loginTimeoutTimer = null
+        }
+        const checkLogin = () => {
+            if (!isCurrent()) {
+                clearLoginWait()
+                return
+            }
+            if (control.loginFlag === 'LOGIN_PENDING') return
+            clearLoginWait()
+            if (control.loginFlag === 'LOGIN_SUCCESS') {
+                player.create()
+            } else {
+                player.setting.createError && player.setting.createError({
+                    code: 1004, success: false, message: '登录失败，请检查登录信息',
+                    i18nKey: 'dhplayer.login.failed'
+                })
+            }
+        }
+        if (control.loginFlag === 'LOGIN_PENDING') {
+            player.loginWaitTimer = setInterval(checkLogin, 300)
+            player.loginTimeoutTimer = setTimeout(() => {
+                if (!isCurrent()) return clearLoginWait()
+                clearLoginWait()
+                control.loginFlag = 'LOGIN_ERROR'
+                player.setting.createError && player.setting.createError({
+                    code: 1004, success: false, message: '视频插件登录响应超时，请重试',
+                    i18nKey: 'dhplayer.login.timeout'
+                })
+            }, LOGIN_TIMEOUT_MS)
+        } else {
+            checkLogin()
+        }
+    }
+
+    function heartbeat(socket, generation) {
         clearInterval(window.wsHeart)
-        window.wsHeart = setInterval(function () {
-            that.send(JSON.stringify({
-                method: 'common.heartbeat',
-                info: {},
+        window.wsHeart = setInterval(() => {
+            if (!isCurrentConnection(socket, generation) || socket.readyState !== 1) return
+            socket.send(JSON.stringify({
+                method: 'common.heartbeat', info: {},
                 id: window.dhPlayerControl.wsConnectCount++
             }))
         }, 10 * 1000)
     }
 
+    function handleSocketDisconnect(socket, generation) {
+        if (!isCurrentConnection(socket, generation)) return
+        const control = window.dhPlayerControl
+        const preferredPort = control.curPortIndex
+        control.videoWS = null
+        control.wsConnect = false
+        control.windowState = 'wsError'
+        clearSocketSession()
+        closeDetachedSocket(socket)
+        if (control.manualCloseWS) return
+        const stopped = livePlayers().filter(player => player.setting.isResetConnect === false)
+        stopped.forEach(player => { player.connectionStopped = true })
+        reportConnectionFailure(stopped, 1003)
+        if (connectionPlayers().length) socketOpen(preferredPort, true)
+    }
+
+    // 一次共享探测最多三轮，连接失败可以在下一次显式初始化时重新尝试。
+    function socketOpen(preferredPort = 0, reconnecting = false) {
+        const control = window.dhPlayerControl
+        if (connectionCycle || !connectionPlayers().length) return
+        if (control.videoWS && control.videoWS.readyState === 1) return
+        if (!reconnecting || remainingConnectionAttempts === null) {
+            remainingConnectionAttempts = CONNECT_ROUNDS * control.connectPort.length
+        }
+        cancelConnectionCycle(false)
+        const generation = connectionGeneration
+        control.manualCloseWS = false
+        control.wsConnect = true
+        control.windowState = 'wsPending'
+        const ports = control.connectPort.map((_, index) => index)
+        if (reconnecting && ports.includes(preferredPort)) {
+            ports.splice(ports.indexOf(preferredPort), 1)
+            ports.unshift(preferredPort)
+        }
+        const cycle = { generation, round: 0, port: 0, retryTimer: null, connectTimer: null }
+        connectionCycle = cycle
+        const isCurrentCycle = () => connectionCycle === cycle && connectionGeneration === generation
+        const finishFailure = (unsupported = false) => {
+            if (!isCurrentCycle()) return
+            const players = connectionPlayers()
+            cancelConnectionCycle()
+            control.windowState = 'wsError'
+            if (unsupported) {
+                players.forEach(player => {
+                    if (!player.disposed) player.setting.createError && player.setting.createError({
+                        code: 1005, success: false, i18nKey: 'browser.not.support.socket',
+                        message: '您的浏览器不支持 WebSocket'
+                    })
+                })
+            } else {
+                reportConnectionFailure(players, reconnecting ? 1003 : 1001)
+            }
+        }
+        const advance = () => {
+            if (!isCurrentCycle()) return
+            if (!connectionPlayers().length) return cancelConnectionCycle()
+            if (remainingConnectionAttempts <= 0) return finishFailure()
+            let delay = CONNECT_PORT_DELAY_MS
+            if (++cycle.port >= ports.length) {
+                cycle.port = 0
+                if (++cycle.round >= CONNECT_ROUNDS) return finishFailure()
+                delay = CONNECT_ROUND_DELAY_MS
+            }
+            cycle.retryTimer = setTimeout(attempt, delay)
+        }
+        const attempt = () => {
+            if (!isCurrentCycle()) return
+            if (!connectionPlayers().length) return cancelConnectionCycle()
+            if (remainingConnectionAttempts <= 0) return finishFailure()
+            --remainingConnectionAttempts
+            let socket
+            let settled = false
+            let opened = false
+            const fail = () => {
+                if (settled || !isCurrentCycle() || !isCurrentConnection(socket, generation)) return
+                settled = true
+                clearTimeout(cycle.connectTimer)
+                control.videoWS = null
+                closeDetachedSocket(socket)
+                advance()
+            }
+            try {
+                socket = new WebSocket(`ws://127.0.0.1:${control.connectPort[ports[cycle.port]]}`)
+            } catch (error) {
+                console.log('建立本机视频连接失败:', error)
+                advance()
+                return
+            }
+            control.videoWS = socket
+            cycle.connectTimer = setTimeout(fail, CONNECT_TIMEOUT_MS)
+            socket.onopen = () => {
+                if (settled || !isCurrentCycle() || !isCurrentConnection(socket, generation)) return
+                opened = true
+                clearTimeout(cycle.connectTimer)
+                clearTimeout(cycle.retryTimer)
+                connectionCycle = null
+                control.windowState = 'wsSuccess'
+                control.curPortIndex = ports[cycle.port]
+                heartbeat(socket, generation)
+                connectionPlayers().forEach(player => initializeConnectedPlayer(player, socket, generation))
+            }
+            socket.onmessage = event => {
+                if (opened && isCurrentConnection(socket, generation) && socket.readyState === 1) socketMessage(event)
+            }
+            const disconnected = () => {
+                if (!isCurrentConnection(socket, generation) || settled) return
+                if (!opened) return fail()
+                settled = true
+                handleSocketDisconnect(socket, generation)
+            }
+            socket.onerror = disconnected
+            socket.onclose = disconnected
+        }
+        connectionPlayers().forEach(player => {
+            player.setting.connectionStateChange && player.setting.connectionStateChange({
+                state: reconnecting ? 'reconnecting' : 'connecting'
+            })
+        })
+        if (!isCurrentCycle()) return
+        if (typeof WebSocket === 'undefined') return finishFailure(true)
+        attempt()
+    }
+
     function dataURLtoBlob(dataurl) {
         var mime = 'image/jpeg',
             bstr = atob(dataurl),
@@ -904,15 +1067,15 @@
             delete window.dhPlayerControl.callBackList[data['id']]
         }
     }
-    //主动关闭socket
+    // 主动关闭会取消整个连接周期，旧事件和延迟任务不能再次拉起连接。
     function socketClose() {
-        window.dhPlayerControl.videoWS && window.dhPlayerControl.videoWS.send(JSON.stringify({
-            method: 'window.destroyall'
-        }))
-        window.dhPlayerControl.manualCloseWS = true
-        window.dhPlayerControl.videoWS && window.dhPlayerControl.videoWS.close()
-        window.dhPlayerControl.videoWS = null
-        window.wsHeart = clearInterval(window.wsHeart)
+        const control = window.dhPlayerControl
+        control.manualCloseWS = true
+        const socket = control.videoWS
+        if (socket && socket.readyState === 1) {
+            socket.send(JSON.stringify({ method: 'window.destroyall' }))
+        }
+        cancelConnectionCycle()
     }
 
     /**
@@ -1432,6 +1595,9 @@
         // 创建视频窗口
         create: function () {
             if (this.disposed) return
+            const creationSocket = window.dhPlayerControl.videoWS
+            const creationGeneration = connectionGeneration
+            if (!creationSocket || creationSocket.readyState !== 1) return
             var zoom = detectZoom()
             var rect = getRect.call(this)
             for (let i in rect) {
@@ -1454,7 +1620,7 @@
             var that = this
             this.setLanguage() // 设置语言
             this.destroy().then(() => {
-                if (this.disposed) return
+                if (this.disposed || !isCurrentConnection(creationSocket, creationGeneration)) return
                 this.send(
                     {
                         method: 'window.create',
@@ -1462,6 +1628,7 @@
                     },
                     {
                         onSuccess: function (data) {
+                            if (!isCurrentConnection(creationSocket, creationGeneration)) return
                             let dom = document.querySelector(`#${that.setting.videoId}`)
                             // 创建回包可能晚于卸载；此时不能丢弃句柄，也不能覆盖同 ID 的新实例。
                             if (that.disposed || !dom || window.dhPlayerControl.videoList[that.setting.videoId] !== that) {
@@ -1488,9 +1655,9 @@
                             that.setTopBind = that.setTop.myBind(that)
                             window.addEventListener('beforeunload', that.onbeforeunloadBind)
                             document.addEventListener('click', that.setTopBind)
-                            let timeout = setTimeout(() => {
-                                that.handleAdjust()
-                                clearTimeout(timeout)
+                            clearTimeout(that.refreshStartTimer)
+                            that.refreshStartTimer = setTimeout(() => {
+                                if (isCurrentConnection(creationSocket, creationGeneration)) that.handleAdjust()
                             }, 50)
                             that.setTabControlBtn()
                             that.setWindowDragEnable()
@@ -1508,6 +1675,7 @@
                             // 是否是插件内部鉴权，是的话则先登录
                             if (that.setting.usePluginLogin) {
                                 if (window.dhPlayerControl.loginFlag === "LOGIN_SUCCESS") {
+                                    remainingConnectionAttempts = null
                                     that.setting.createSuccess && that.setting.createSuccess(getVersionInfo())
                                 } else if (window.dhPlayerControl.loginFlag === "LOGIN_ERROR") {
                                     that.setting.createError && that.setting.createError({
@@ -1517,24 +1685,18 @@
                                     })
                                 }
                             } else {
+                                remainingConnectionAttempts = null
                                 that.setting.createSuccess && that.setting.createSuccess(getVersionInfo())
                             }
                         },
                         onError: function () {
-                            if (that.disposed) return
-                            // 断开连接
-                            socketClose();
-                            // 重连
-                            that.reconnectTimer = setTimeout(() => {
-                                if (!that.disposed) socketOpen();
-                                clearTimeout(that.reconnectTimer)
-                            }, 3000)
-                            // that.setting.createError && that.setting.createError({
-                            //     code: 1006,
-                            //     data: null,
-                            //     message: '插件创建失败，刷新重试',
-                            //     success: false
-                            // })
+                            if (that.disposed || !isCurrentConnection(creationSocket, creationGeneration)) return
+                            // 创建窗口失败只影响当前实例，不关闭其他播放器的共享连接。
+                            that.setting.createError && that.setting.createError({
+                                code: 1006, success: false,
+                                message: '视频窗口创建失败，请重试',
+                                i18nKey: 'video.player.window.create.failed'
+                            })
                         }
                     }
                 )
@@ -1592,7 +1754,7 @@
         },
         //刷新窗口位置
         handleAdjust: function () {
-            if (this.disposed) return
+            if (this.disposed || this.setting.stopRefresh) return
             var _this = this
             // 每帧执行一次，减少DHplayer延时
             !this.setting.stopRefresh && this.changePosition()
@@ -1678,6 +1840,8 @@
                 clearTimeout(this.reconnectTimer)
                 clearTimeout(this.setting.notifyrealmonitorTimeout)
                 clearInterval(this.loginWaitTimer)
+                clearTimeout(this.loginTimeoutTimer)
+                clearTimeout(this.refreshStartTimer)
                 window.cancelAnimationFrame(this.setting.refreshTimer)
                 document.removeEventListener('click', this.setTopBind)
                 window.removeEventListener('beforeunload', this.onbeforeunloadBind)
@@ -1695,6 +1859,7 @@
                     }
                     this.setting.hwnd = ''
                     this.setting.channelList = []
+                    cancelUnusedConnectionCycle()
                 }
             }
         },
@@ -2838,49 +3003,23 @@
         },
         initPlayer: function () {
             if (this.disposed) return
+            const control = window.dhPlayerControl
             let hwnd = ''
-            if (window.dhPlayerControl.videoList[this.setting.videoId]) {
-                hwnd = window.dhPlayerControl.videoList[this.setting.videoId].setting.hwnd
+            if (control.videoList[this.setting.videoId]) {
+                hwnd = control.videoList[this.setting.videoId].setting.hwnd
             }
-            window.dhPlayerControl.videoList[this.setting.videoId] = this
+            control.videoList[this.setting.videoId] = this
             this.setting.hwnd = hwnd
-            if (!window.dhPlayerControl.wsConnect) {
-                window.dhPlayerControl.wsConnect = true
-                socketOpen.call(this)
-            } else {
-                if (window.dhPlayerControl.windowState === 'wsSuccess' && (!this.setting.usePluginLogin || window.dhPlayerControl.loginFlag !== 'LOGIN_PENDING')) {
-                    // 建立连接后, 确保每次初始化是否支持
-                    let _isSupport = isSupport()
-                    if (!_isSupport.success) {
-                        return this.setting.createError && this.setting.createError(_isSupport)
-                    }
-                    if (this.setting.socketTimer) {
-                        clearTimeout(this.setting.socketTimer)
-                    };
-                    this.setting.socketTimer = setTimeout(() => {
-                        this.create()
-                    }, this.setting.usePluginLogin ? 1000 : 300)
-                } else if (window.dhPlayerControl.windowState === "noPlugin") {
-                    this.setting.createError && this.setting.createError({
-                        code: 1001,
-                        success: false,
-                        i18nKey: 'video.player.plugin.not.installed',
-                        message: "插件未安装"
-                    })
-                } else if (window.dhPlayerControl.windowState === "wsError") {
-
-                    this.setting.createError && this.setting.createError({
-                        code: 1003,
-                        success: false,
-                        message: "无法与播放器建立连接" + window.isResetConnect ? ', 正在重连...' : ""
-                    })
-                } else {
-                    // setTimeout(() => {
-                    //     this.initPlayer()
-                    // }, 300)
-                }
-            }
+            this.connectionStopped = false
             this.setting.browserType = broswerInfo()
+            const socket = control.videoWS
+            if (socket && socket.readyState === 1 && control.windowState === 'wsSuccess') {
+                initializeConnectedPlayer(this, socket, connectionGeneration)
+            } else if (!connectionCycle) {
+                socketOpen()
+            } else {
+                this.setting.connectionStateChange && this.setting.connectionStateChange({ state: 'connecting' })
+            }
         }
     }
     window.VideoPlayer = window.VideoPlayer || VideoPlayer

src/components/rtsp-plugin-video/video-plugin.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="video-container" :class="{ 'preview-mode': currentWindowType === 0 }">
-    <div v-if="loading" class="loading-mask">正在初始化...</div>
+    <div v-if="loading" class="loading-mask" role="status">{{ connectionStatusText }}</div>
+    <div v-else-if="initializationError" class="connection-error" role="alert">
+      <span>{{ initializationError }}</span>
+      <button type="button" class="connection-retry" @click="retryConnection">重新连接</button>
+    </div>
     <div :id="getContainerId(0)" class="pane" />
     <div :id="getContainerId(3)" class="pane" />
     <div :id="getContainerId(7)" class="pane" />
     <WindowLabels v-if="windowLabels.length" :labels="windowLabels" :show-placeholders="!nativeReady"
-      :status-text="initializationError || (loading ? '正在连接视频插件…' : '等待视频画面')"
+      :status-text="initializationError || (loading ? connectionStatusText : '等待视频画面')"
       :expanded-snum="expandedSnum" :reserve-pager="pageTotal > pageSize && showBar && currentWindowType !== 0" />
     <div v-if="pageTotal > pageSize && showBar && currentWindowType != 0" style="width: 100%; height: 40px;"></div>
     <div v-if="pageTotal > pageSize && showBar" :style="videoPageStyle" class="video-container-page">
@@ -45,6 +49,7 @@ let isActivated = true
 let requestedVisible = true
 let lastRealRequest = null
 let lastPlaybackRequest = null
+let playbackNeedsStart = false
 const realFallbackAttempted = new Set()
 const players = new Map()
 const isReadyByType = new Map()
@@ -53,6 +58,15 @@ const initResolversByType = new Map()
 const readyTimers = new Set()
 const closingPlayers = new Map()
 let pendingClose = Promise.resolve()
+let cancelCloseWait
+let closeCancellation = new Promise((resolve) => { cancelCloseWait = resolve })
+
+function cancelClosingWaits() {
+  cancelCloseWait()
+  closeCancellation = new Promise((resolve) => { cancelCloseWait = resolve })
+  closingPlayers.clear()
+  pendingClose = Promise.resolve()
+}
 let cancelPlaybackWait
 let playbackCancellation = new Promise((resolve) => { cancelPlaybackWait = resolve })
 
@@ -65,6 +79,8 @@ let latestPlaybackToken = 0
 const loading = ref(false)
 const nativeReady = ref(false)
 const initializationError = ref('')
+const connectionStatusText = ref('正在连接视频插件…')
+const CONNECTION_ERROR_MESSAGE = '未能连接本机视频服务，请启动或重新启动视频插件后重试'
 const expandedSnum = ref(null)
 const REAL_RESTART_GUARD_MS = 800
 let lastRealSignature = ""
@@ -128,6 +144,22 @@ function canUsePlayer() {
   return !isUnmounted && isActivated && props.active
 }
 
+function hasRequestedPlayback() {
+  return currentWindowType.value === 0 ? !!lastRealRequest?.length
+    : [3, 7].includes(currentWindowType.value) && !!lastPlaybackRequest?.length
+}
+
+function restoreRequestedPlayback() {
+  if (!canUsePlayer() || !requestedVisible || document.hidden || !hasRequestedPlayback()) return
+  if (currentWindowType.value === 0) return startReal(lastRealRequest)
+  return startPlayback(lastPlaybackRequest)
+}
+
+function retryConnection() {
+  if (loading.value || !initializationError.value) return
+  return restoreRequestedPlayback()
+}
+
 function getContainerId(type) {
   return `video-plugin-${instanceId}-${type}`
 }
@@ -207,6 +239,8 @@ function buildPlaybackSignature(list) {
 function activatePlayer(type, player) {
   VIDEO_PLAYER = player
   currentWindowType.value = type
+  initializationError.value = ''
+  nativeReady.value = !!isReadyByType.get(type)
   setActiveContainer(type)
   players.forEach((item, itemType) => {
     const visible = itemType === type && canUsePlayer() && requestedVisible && !document.hidden
@@ -314,8 +348,11 @@ function initVideoPlayer(type = props.windowType) {
   const myGeneration = generation
   let player = null
   let failed = false
+  let resumeAfterReconnect = false
+  let connectionGeneration = 0
+  let readyTimer = null
   let resolveInit
-  const pending = new Promise((resolve) => { resolveInit = resolve })
+  let pending = new Promise((resolve) => { resolveInit = resolve })
   // 必须在查询配置之前占位，避免同时调用时创建出多个原生窗口。
   initPromisesByType.set(type, pending)
   const settle = (value) => {
@@ -329,6 +366,7 @@ function initVideoPlayer(type = props.windowType) {
   const isCurrent = () => canUsePlayer() && generation === myGeneration && !failed
   loading.value = true
   initializationError.value = ''
+  connectionStatusText.value = '正在连接视频插件…'
   const initialize = async () => {
     const { data: setting, code: settingCode } = await settingApi.getObj()
     if (!isCurrent()) return settle(null)
@@ -370,43 +408,91 @@ function initVideoPlayer(type = props.windowType) {
       // 底部操作栏， 选传，【true - 显示, false - 隐藏】
       showBar: props.showBar,
       // 如果DOM元素被插件挡住了，把DOM元素的类名传入。
-      shieldClass: ["el-select__popper", "el-popper", "video-container-page", "yt_info_popup", "video-window-label", "loading-mask", "el-loading-mask"],
+      shieldClass: ["el-select__popper", "el-popper", "video-container-page", "yt_info_popup", "video-window-label", "loading-mask", "el-loading-mask", "connection-error"],
       // 如果插件要在dom内滚动，需要把DOM元素的类名传入，请查看案例-遮挡
       coverShieldClass: [],
       // 有 iframe 时，top层 的 dom 元素被插件挡住了，把DOM元素的类名传入。
       parentIframeShieldClass: [],
+      // 连接探测由 SDK 共享并限制次数，临时断线不按创建失败销毁实例。
+      connectionStateChange: ({ state }) => {
+        if (!isCurrent() || state !== 'reconnecting') return
+        ++connectionGeneration
+        clearTimeout(readyTimer)
+        readyTimers.delete(readyTimer)
+        isReadyByType.set(type, false)
+        resumeAfterReconnect = true
+        if (!initPromisesByType.has(type)) {
+          pending = new Promise((resolve) => { resolveInit = resolve })
+          initPromisesByType.set(type, pending)
+          initResolversByType.set(type, settle)
+        }
+        if (type === 0) lastRealSignature = ''
+        else {
+          lastPlaybackSignature = ''
+          playbackNeedsStart = true
+        }
+        // 断线前的关闭回包已不可达，不能阻塞新连接上的播放。
+        cancelClosingWaits()
+        if (currentWindowType.value === type) {
+          cancelWaitingPlayback()
+          ++latestRealToken
+          ++latestPlaybackToken
+          nativeReady.value = false
+          initializationError.value = ''
+          connectionStatusText.value = '视频插件连接中断，正在重新连接…'
+          loading.value = hasRequestedPlayback()
+        }
+      },
       // 创建播放器成功回调
       createSuccess: (versionInfo) => {
         if (!isCurrent()) return
         // 该回调触发后，我们可以进行实时预览/录像回放等操作
         console.log(TAG, "创建播放器成功,versionInfo:", versionInfo)
         isReadyByType.set(type, true)
-        nativeReady.value = true
+        if (currentWindowType.value === type) nativeReady.value = true
+        const readyGeneration = connectionGeneration
         const timer = setTimeout(() => {
           readyTimers.delete(timer)
           if (!isCurrent()) return settle(null)
-          if (currentWindowType.value === type) activatePlayer(type, player)
-          else player.hide?.()
-          loading.value = false
+          if (readyGeneration !== connectionGeneration) return
+          if (currentWindowType.value === type) {
+            activatePlayer(type, player)
+            loading.value = false
+          } else player.hide?.()
           settle(player)
+          if (resumeAfterReconnect) {
+            resumeAfterReconnect = false
+            if (currentWindowType.value === type) restoreRequestedPlayback()
+          }
         }, 500)
+        readyTimer = timer
         readyTimers.add(timer)
       },
       // 创建播放器失败回调
       createError: (err) => {
         if (!isCurrent()) return
         failed = true
-        nativeReady.value = false
-        initializationError.value = err?.message || '视频插件未连接，请检查安装及连接'
+        if ([1001, 1003].includes(Number(err?.code))) cancelClosingWaits()
+        ++connectionGeneration
+        clearTimeout(readyTimer)
+        readyTimers.delete(readyTimer)
+        if (type === 0) lastRealSignature = ''
+        else {
+          lastPlaybackSignature = ''
+          playbackNeedsStart = true
+        }
+        if (currentWindowType.value === type) {
+          nativeReady.value = false
+          initializationError.value = hasRequestedPlayback()
+            ? ([1001, 1003].includes(Number(err?.code)) ? CONNECTION_ERROR_MESSAGE : err?.message || '视频插件连接失败，请重试')
+            : ''
+          loading.value = false
+        }
         console.log(TAG, "创建播放器失败,err:", err)
         isReadyByType.set(type, false)
         if (players.get(type) === player) players.delete(type)
         if (VIDEO_PLAYER === player) VIDEO_PLAYER = null
         disposePlayer(player)
-        if ([1001].includes(err.code)) {
-          ElMessage.error(err.message)
-        }
-        loading.value = false
         settle(null)
       },
       // 插件公共回调
@@ -606,6 +692,7 @@ async function startPlayback(items) {
   const myToken = ++latestPlaybackToken
   ++latestRealToken
   lastPlaybackRequest = items
+  playbackNeedsStart = true
   loading.value = true
   const player = await Promise.race([initVideoPlayer(3), cancelled])
   if (!player) return
@@ -615,6 +702,7 @@ async function startPlayback(items) {
   const now = Date.now()
   const signature = buildPlaybackSignature(items)
   if (signature && signature === lastPlaybackSignature && now - lastPlaybackStartAt < REAL_RESTART_GUARD_MS) {
+    playbackNeedsStart = false
     loading.value = false
     return
   }
@@ -628,6 +716,7 @@ async function startPlayback(items) {
   //   console.log(TAG, "开始回放前关闭旧视频失败,err:", e)
   // }
   player.startPlayback(items)
+  playbackNeedsStart = false
   loading.value = false
 }
 
@@ -665,12 +754,18 @@ async function handleVisibilityChange() {
     }
     VIDEO_PLAYER.hide?.()
   } else {
-    if (!VIDEO_PLAYER) return
-    VIDEO_PLAYER.show?.()
+    updateVisible(true)
+    if (initializationError.value) return
     if (currentWindowType.value === 0 && Array.isArray(lastRealRequest) && lastRealRequest.length) {
       await startReal(lastRealRequest)
+      return
     }
-    if ((currentWindowType.value === 3 || currentWindowType.value === 7) && Array.isArray(lastPlaybackRequest)) {
+    if ((currentWindowType.value === 3 || currentWindowType.value === 7) && lastPlaybackRequest?.length) {
+      if (playbackNeedsStart) {
+        await startPlayback(lastPlaybackRequest)
+        return
+      }
+      if (!VIDEO_PLAYER) return
       lastPlaybackRequest.forEach((item) => {
         if (item && typeof item.snum === "number") {
           VIDEO_PLAYER.controlPlayback?.({ snum: item.snum, state: 1 })
@@ -793,8 +888,11 @@ function stopOwnedPlayers() {
     const task = Promise.resolve(result).catch((e) => {
       console.log(TAG, "关闭播放失败,err:", e)
     }).then(() => {
-      if (player.setting) player.setting.channelList = []
-      if (closingPlayers.get(player) === task) closingPlayers.delete(player)
+      // 旧连接的关闭回包不能清掉重连后或新实例中的播放列表。
+      if (closingPlayers.get(player) === task) {
+        if (player.setting) player.setting.channelList = []
+        closingPlayers.delete(player)
+      }
     })
     closingPlayers.set(player, task)
     return task
@@ -804,21 +902,25 @@ function stopOwnedPlayers() {
 }
 
 function closeVideo() {
+  initializationError.value = ''
   expandedSnum.value = null
   cancelWaitingPlayback()
   ++latestRealToken
   ++latestPlaybackToken
   lastRealRequest = null
   lastPlaybackRequest = null
+  playbackNeedsStart = false
   lastRealSignature = ""
   lastPlaybackSignature = ""
   realFallbackAttempted.clear()
   loading.value = false
   ytRef.value?.close?.()
-  return stopOwnedPlayers()
+  const cancelled = closeCancellation
+  return Promise.race([stopOwnedPlayers(), cancelled])
 }
 
 function destroy(preserveRequests = false) {
+  connectionStatusText.value = '正在连接视频插件…'
   nativeReady.value = false
   initializationError.value = ''
   expandedSnum.value = null
@@ -832,8 +934,7 @@ function destroy(preserveRequests = false) {
   initResolversByType.clear()
   initPromisesByType.clear()
   isReadyByType.clear()
-  closingPlayers.clear()
-  pendingClose = Promise.resolve()
+  cancelClosingWaits()
   lastRealSignature = ""
   lastPlaybackSignature = ""
   realFallbackAttempted.clear()
@@ -846,6 +947,7 @@ function destroy(preserveRequests = false) {
   if (!preserveRequests) {
     lastRealRequest = null
     lastPlaybackRequest = null
+    playbackNeedsStart = false
     currentWindowType.value = null
     pageTotal.value = 0
   }
@@ -998,6 +1100,38 @@ defineExpose({
   font-size: 14px;
 }
 
+.connection-error {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 16px;
+  background: var(--el-bg-color-overlay, #1f2530);
+  color: var(--el-text-color-primary, #f1f5f9);
+  font-size: 14px;
+  text-align: center;
+  overflow: auto;
+}
+
+.connection-retry {
+  border: 1px solid var(--el-color-primary, #409eff);
+  border-radius: 4px;
+  padding: 8px 16px;
+  background: var(--el-color-primary-dark-2, #2563eb);
+  color: #fff;
+  cursor: pointer;
+  font: inherit;
+}
+
+.connection-retry:focus-visible {
+  outline: 2px solid var(--el-color-primary, #409eff);
+  outline-offset: 3px;
+}
+
 .video-container-page {
   position: absolute;
   pointer-events: auto;

src/theme/device-list.scss

@@ -179,16 +179,36 @@
 		}
 	}
 
+	.device-status {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 6px;
+		min-width: 0;
+		max-width: 100%;
+	}
+
 	.device-state-group {
 		display: flex;
 		align-items: center;
 		gap: 8px;
+		min-height: 22px;
 	}
 
 	.device-state {
 		display: inline-flex;
 		align-items: center;
-		gap: 7px;
+		flex: none;
+		gap: 6px;
+		padding: 1px 7px;
+		border: 1px solid var(--el-color-danger-light-8);
+		border-radius: 4px;
+		background: var(--el-color-danger-light-9);
+		color: var(--el-text-color-primary);
+		color: color-mix(in srgb, var(--el-color-danger) 50%, var(--el-text-color-primary));
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 18px;
 		white-space: nowrap;
 
 		&__dot {
@@ -199,22 +219,54 @@
 			background: var(--el-color-danger);
 		}
 
-		&--online .device-state__dot {
-			background: var(--el-color-success);
+		&--online {
+			border-color: var(--el-color-success-light-8);
+			background: var(--el-color-success-light-9);
+			color: color-mix(in srgb, var(--el-color-success) 50%, var(--el-text-color-primary));
+
+			.device-state__dot {
+				background: var(--el-color-success);
+			}
 		}
 	}
 
 	.device-source {
 		display: inline-block;
-		padding: 2px 8px;
-		border-radius: 4px;
-		background: var(--el-fill-color-light);
-		color: var(--el-text-color-primary);
+		flex: none;
+		color: var(--el-text-color-regular);
 		font-size: 12px;
 		line-height: 20px;
 		white-space: nowrap;
 	}
 
+	.device-status__reason {
+		display: flex;
+		align-items: baseline;
+		min-width: 0;
+		max-width: 100%;
+		font-size: 12px;
+		line-height: 18px;
+	}
+
+	.device-status__reason-label {
+		flex: none;
+		color: var(--el-text-color-regular);
+	}
+
+	.device-status__reason-value {
+		min-width: 0;
+		overflow: hidden;
+		color: var(--el-text-color-primary);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
+		&:focus-visible {
+			border-radius: 2px;
+			outline: 2px solid var(--el-color-primary);
+			outline-offset: 2px;
+		}
+	}
+
 	.device-list-pagination {
 		justify-content: flex-end;
 		max-width: 100%;

src/views/admin/system/user/components/user-list.vue

@@ -1,26 +1,22 @@
 <template>
 	<div class="layout-padding">
-		<draggable-dept-tree
-			ref="draggableDepTreeRef"
-			placeholder="请输入部门名称"
-			:show-expand="true"
-			switch-inactive-text="包含"
-			switch-active-text="不包含"
-			:defaultTreeWidth="15"
-			:nodeClickable="false"
-			@getSelectNode="handleGetSelectNode"
-		>
+		<draggable-dept-tree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
+			switch-inactive-text="包含" switch-active-text="不包含" :defaultTreeWidth="15" :nodeClickable="false"
+			@getSelectNode="handleGetSelectNode">
 			<div class="layout-padding-auto layout-padding-view">
 				<el-row v-show="showSearch">
 					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
 						<el-form-item :label="$t('sysuser.username')" prop="username">
-							<el-input v-model="state.queryForm.username" :placeholder="$t('sysuser.inputUsernameTip')" clearable />
+							<el-input v-model="state.queryForm.username" :placeholder="$t('sysuser.inputUsernameTip')"
+								clearable />
 						</el-form-item>
 						<el-form-item :label="$t('sysuser.phone')" prop="phone">
-							<el-input v-model="state.queryForm.phone" :placeholder="$t('sysuser.inputPhoneTip')" clearable />
+							<el-input v-model="state.queryForm.phone" :placeholder="$t('sysuser.inputPhoneTip')"
+								clearable />
 						</el-form-item>
 						<el-form-item>
-							<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn') }}</el-button>
+							<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn')
+								}}</el-button>
 							<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
 						</el-form-item>
 					</el-form>
@@ -28,68 +24,50 @@
 				<el-row>
 					<div class="mb8" style="width: 100%">
 						<template v-if="isUserMode">
-							<el-button v-auth="'sys_user_add'" icon="folder-add" type="primary" @click="userDialogRef.openDialog()">
-								{{ $t('common.addBtn') }}
+							<el-button v-auth="'sys_user_add'" icon="folder-add" type="primary"
+								@click="userDialogRef.openDialog()">
+								注册
 							</el-button>
-							<el-button plain v-auth="'sys_user_add'" class="ml10" icon="upload-filled" type="primary" @click="excelUploadRef.show()">
+							<el-button plain v-auth="'sys_user_add'" class="ml10" icon="upload-filled" type="primary"
+								@click="excelUploadRef.show()">
 								{{ $t('common.importBtn') }}
 							</el-button>
-							<el-button
-								plain
-								v-auth="'sys_user_del'"
-								:disabled="multiple"
-								class="ml10"
-								icon="Delete"
-								type="primary"
-								@click="handleDelete(selectObjs)"
-							>
+							<el-button plain v-auth="'sys_user_del'" :disabled="multiple" class="ml10" icon="Delete"
+								type="primary" @click="handleDelete(selectObjs)">
 								{{ $t('common.delBtn') }}
 							</el-button>
 						</template>
 
-						<right-toolbar
-							v-model:showSearch="showSearch"
-							:export="isUserMode ? 'sys_user_export' : false"
-							class="ml10 mr20"
-							style="float: right"
-							@exportExcel="exportExcel"
-							@queryTable="getDataList"
-						/>
+						<right-toolbar v-model:showSearch="showSearch" :export="isUserMode ? 'sys_user_export' : false"
+							class="ml10 mr20" style="float: right" @exportExcel="exportExcel"
+							@queryTable="getDataList" />
 					</div>
 				</el-row>
-				<el-table
-					v-loading="state.loading"
-					:data="state.dataList"
-					row-key="userId"
-					border
-					:cell-style="tableStyle.cellStyle"
-					:header-cell-style="tableStyle.headerCellStyle"
-					@selection-change="handleSelectionChange"
-				>
+				<el-table v-loading="state.loading" :data="state.dataList" row-key="userId" border
+					:cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+					@selection-change="handleSelectionChange">
 					<el-table-column v-if="isUserMode" :selectable="handleSelectable" type="selection" width="40" />
 					<el-table-column :label="$t('sysuser.index')" type="index" width="60" fixed="left" />
-					<el-table-column :label="$t('sysuser.username')" prop="username" fixed="left" show-overflow-tooltip></el-table-column>
+					<el-table-column :label="$t('sysuser.username')" prop="username" fixed="left"
+						show-overflow-tooltip></el-table-column>
 					<el-table-column :label="$t('sysuser.name')" prop="name" show-overflow-tooltip></el-table-column>
 					<el-table-column :label="$t('sysuser.phone')" prop="phone" show-overflow-tooltip></el-table-column>
 					<el-table-column :label="$t('sysuser.post')" show-overflow-tooltip>
 						<template #default="scope">
-							<el-tag v-for="(item, index) in scope.row.postList" :key="index">{{ item.postName }}</el-tag>
+							<el-tag v-for="(item, index) in scope.row.postList" :key="index">{{ item.postName
+								}}</el-tag>
 						</template>
 					</el-table-column>
 					<el-table-column :label="$t('sysuser.role')" show-overflow-tooltip>
 						<template #default="scope">
-							<el-tag v-for="(item, index) in scope.row.roleList" :key="index">{{ item.roleName }}</el-tag>
+							<el-tag v-for="(item, index) in scope.row.roleList" :key="index">{{ item.roleName
+								}}</el-tag>
 						</template>
 					</el-table-column>
 					<el-table-column :label="$t('sysuser.lockFlag')" show-overflow-tooltip>
 						<template #default="scope">
-							<el-switch
-								v-model="scope.row.lockFlag"
-								:disabled="!isUserMode"
-								active-value="0"
-								inactive-value="9"
-								@change="changeSwitch(scope.row)"
-							></el-switch>
+							<el-switch v-model="scope.row.lockFlag" :disabled="!isUserMode" active-value="0"
+								inactive-value="9" @change="changeSwitch(scope.row)"></el-switch>
 						</template>
 					</el-table-column>
 					<el-table-column :label="$t('common.action')" :width="isUserMode ? 200 : 140" fixed="right">
@@ -97,55 +75,44 @@
 							<div v-if="isUserMode" style="display: flex">
 								<popover-input v-model="inputPassword" @confirm="changePassword(scope.row)">
 									<template #default>
-										<el-button v-auth="'sys_user_edit'" icon="RefreshLeft" text type="primary" class="mr-4">
+										<el-button v-auth="'sys_user_edit'" icon="RefreshLeft" text type="primary"
+											class="mr-4">
 											{{ $t('sysuser.passwordBtn') }}
 										</el-button>
 									</template>
 								</popover-input>
-								<el-button v-auth="'sys_user_edit'" icon="edit-pen" text type="primary" @click="userDialogRef.openDialog(scope.row.userId)">
+								<el-button v-auth="'sys_user_edit'" icon="edit-pen" text type="primary"
+									@click="userDialogRef.openDialog(scope.row.userId)">
 									{{ $t('common.editBtn') }}
 								</el-button>
-								<el-tooltip :content="$t('sysuser.deleteDisabledTip')" :disabled="scope.row.userId !== '1'" placement="top">
+								<el-tooltip :content="$t('sysuser.deleteDisabledTip')"
+									:disabled="scope.row.userId !== '1'" placement="top">
 									<span style="margin-left: 12px">
-										<el-button
-											icon="delete"
-											v-auth="'sys_user_del'"
-											:disabled="scope.row.username === 'admin'"
-											text
-											type="primary"
-											@click="handleDelete([scope.row.userId])"
-										>
+										<el-button icon="delete" v-auth="'sys_user_del'"
+											:disabled="scope.row.username === 'admin'" text type="primary"
+											@click="handleDelete([scope.row.userId])">
 											{{ $t('common.delBtn') }}
 										</el-button>
 									</span>
 								</el-tooltip>
 							</div>
-							<el-button
-								v-else
-								v-auth="'sys_user_edit'"
-								icon="UserFilled"
-								text
-								type="primary"
-								@click="userDialogRef.openDialog(scope.row.userId)"
-							>
+							<el-button v-else v-auth="'sys_user_edit'" icon="UserFilled" text type="primary"
+								@click="userDialogRef.openDialog(scope.row.userId)">
 								{{ $t('sysuser.assignRoleBtn') }}
 							</el-button>
 						</template>
 					</el-table-column>
 				</el-table>
-				<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"></pagination>
+				<pagination v-bind="state.pagination" @current-change="currentChangeHandle"
+					@size-change="sizeChangeHandle">
+				</pagination>
 			</div>
 		</draggable-dept-tree>
 
-		<user-form ref="userDialogRef" :mode="props.mode" :dept-id="state.queryForm.deptId" @refresh="getDataList(false)" />
-		<upload-excel
-			v-if="isUserMode"
-			ref="excelUploadRef"
-			:title="$t('sysuser.importUserTip')"
-			temp-url="/admin/sys-file/local/file/user.xlsx"
-			url="/admin/user/import"
-			@refreshDataList="getDataList"
-		/>
+		<user-form ref="userDialogRef" :mode="props.mode" :dept-id="state.queryForm.deptId"
+			@refresh="getDataList(false)" />
+		<upload-excel v-if="isUserMode" ref="excelUploadRef" :title="$t('sysuser.importUserTip')"
+			temp-url="/admin/sys-file/local/file/user.xlsx" url="/admin/user/import" @refreshDataList="getDataList" />
 	</div>
 </template>
 

src/views/alarm/setting/dhIccSetting/dh-icc-setting.vue

@@ -3,11 +3,12 @@
         v-loading="state.loading">
 
         <!-- **************************** start 大华icc配置 start **************************** -->
-        <el-divider class="my-12">大华icc配置</el-divider>
-        <el-form-item label="拉取/接收大华数据">
+        <el-divider class="my-12">{{ title }}</el-divider>
+        <slot name="prepend" />
+        <el-form-item label="拉取/接收厂商数据">
             <el-switch v-model="form.dhIccSetting.pullEnabled" active-text="开启" inactive-text="关闭" />
         </el-form-item>
-        <el-form-item label="推送数据到大华">
+        <el-form-item label="推送数据到厂商">
             <el-switch v-model="form.dhIccSetting.pushEnabled" active-text="开启" inactive-text="关闭" />
         </el-form-item>
         <el-form-item label="视频ip" prop="dhIccSetting.videoHost">
@@ -53,6 +54,10 @@ import { useMessage } from "/@/hooks/message"
 import * as ComDhSettingApi from "/@/api/com/comDhSetting";
 import type { DhIccConnectionTestResult } from "/@/api/com/comDhSetting";
 
+withDefaults(defineProps<{ title?: string }>(), {
+    title: "大华icc配置",
+});
+
 const dataFormRef = ref();
 
 const state = reactive<any>({

src/views/base/ss/sbList.vue

@@ -1,5 +1,5 @@
 <template>
-    <camera-list :actions="['preview', 'replay', 'edit', 'delete']" :enable-crud="true" />
+    <camera-list :actions="['preview', 'replay', 'detail', 'edit', 'delete']" :enable-crud="true" />
 </template>
 
 <script setup lang="ts" name="baseSbList">

src/views/car/components/car-manage-list.vue

@@ -33,6 +33,7 @@
             @click="handleDelete(selectObjs)">
             删除
           </el-button>
+          <platform-compare-button resource-type="CAR" @changed="getDataList()" />
           <right-toolbar v-model:showSearch="showSearch" :export="'car_carManage_export'" @exportExcel="exportExcel"
             class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
         </div>
@@ -125,6 +126,7 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
 import { useDict } from '/@/hooks/dict';
 import { usePanel } from "/@/stores/panel"
 import dayjs from "dayjs";
+import PlatformCompareButton from '/@/views/collection/video/components/platform-compare-button.vue';
 
 const storesPanel = usePanel()
 

src/views/collection/door/components/door-device-list.vue

@@ -62,9 +62,7 @@
 			</el-table-column>
 			<el-table-column prop="isOnline" label="状态 / 来源" min-width="176">
 				<template #default="{ row }">
-					<device-status :value="row.isOnline" :source="row.isSync ?? 0" :reason="row.offlineReason">
-						<template #reason><dict-tag :options="offline_reason" :value="row.offlineReason" /></template>
-					</device-status>
+					<device-status :value="row.isOnline" :source="row.isSync ?? 0" :reason="row.offlineReason" />
 				</template>
 			</el-table-column>
 
@@ -92,7 +90,7 @@ import DeviceRowActions from '/@/views/device/components/device-row-actions.vue'
 import type { DeviceRowAction } from '/@/views/device/components/device-row-actions';
 import DeviceForm from '/@/views/device/components/deviceForm.vue';
 
-const { dh_device_manufacturer, offline_reason } = useDict('dh_device_manufacturer', 'offline_reason');
+const { dh_device_manufacturer } = useDict('dh_device_manufacturer');
 const queryRef = ref();
 const formRef = ref();
 const syncing = ref(false);

src/views/collection/video/components/platform-compare-button.vue

@@ -0,0 +1,29 @@
+<template>
+  <el-button v-if="canView" plain icon="DataAnalysis"
+    :title="`对比 ICC 与本地已同步的全部${resourceConfig.label}数据`" @click="openComparison">
+    ICC 数据对比
+  </el-button>
+  <platform-resource-dialog v-if="canView" ref="resourceDialogRef" @changed="emit('changed')" />
+</template>
+
+<script setup lang="ts">
+import type { PlatformResourceType } from '/@/api/collection/videoPlatform';
+import { auth } from '/@/utils/authFunction';
+import PlatformResourceDialog from './platform-resource-dialog.vue';
+
+const props = defineProps<{ resourceType: PlatformResourceType }>();
+const emit = defineEmits<{ (event: 'changed'): void }>();
+const resourceDialogRef = ref<InstanceType<typeof PlatformResourceDialog>>();
+const resourceConfigs = {
+  PERSON: { label: '人员', viewPermission: 'admin_sysPerson_view' },
+  CAR: { label: '车辆', viewPermission: 'car_carManage_view' },
+  DEVICE: { label: '设备', viewPermission: 'admin_deviceManage_view' },
+  CHANNEL: { label: '通道', viewPermission: 'admin_deviceManage_view' },
+};
+const resourceConfig = computed(() => resourceConfigs[props.resourceType]);
+const canView = computed(() => auth(resourceConfig.value.viewPermission));
+const openComparison = () => {
+  if (!canView.value) return;
+  resourceDialogRef.value?.open(props.resourceType, 'DIFFERENCE', `ICC ${resourceConfig.value.label}数据对比`);
+};
+</script>

src/views/collection/video/platform.vue

@@ -181,12 +181,19 @@
 
             <section class="setting-section">
                 <div class="section-header">
-                    <h3>大华 ICC 配置</h3>
+                    <h3>厂商配置</h3>
                     <el-button type="primary" icon="Check" :loading="state.saving" @click="saveSetting">
                         保存配置
                     </el-button>
                 </div>
-                <dh-icc-setting ref="settingRef" />
+                <dh-icc-setting ref="settingRef" title="厂商配置">
+                    <template #prepend>
+                        <el-form-item label="厂商类型">
+                            <dict-select v-model="manufacturerType" dict-type="dh_device_manufacturer"
+                                placeholder="请选择厂商类型" clearable />
+                        </el-form-item>
+                    </template>
+                </dh-icc-setting>
             </section>
 
             <platform-resource-dialog ref="resourceDialogRef" @changed="handleResourceChanged" />
@@ -235,6 +242,8 @@ const emptyStatus = (): PlatformStatus => ({
 });
 
 const settingRef = ref();
+// 厂商类型仅用于页面展示，暂不参与配置保存及平台接入。
+const manufacturerType = ref("");
 const resourceDialogRef = ref<InstanceType<typeof PlatformResourceDialog>>();
 
 const state = reactive({

src/views/device/components/camera-list.vue

@@ -54,6 +54,7 @@
 										>批量删除</el-button
 									>
 									<el-button v-if="props.enableCrud" plain icon="UploadFilled" @click="uploadExcelRef.show()">导入</el-button>
+									<platform-compare-button resource-type="DEVICE" @changed="handlePlatformResourceChanged" />
 									<span v-if="selectObjs.length" class="device-list-selection" role="status">已选 {{ selectObjs.length }} 项</span>
 								</div>
 								<right-toolbar
@@ -152,6 +153,7 @@
 										@click="handleChannelDelete(channelSelectObjs)"
 										>批量删除</el-button
 									>
+									<platform-compare-button resource-type="CHANNEL" @changed="handlePlatformResourceChanged" />
 									<span v-if="channelSelectObjs.length" class="device-list-selection" role="status">已选 {{ channelSelectObjs.length }} 项</span>
 								</div>
 								<right-toolbar v-model:showSearch="showSearch" :gutter="0" @queryTable="getChannelDataList" />
@@ -235,6 +237,7 @@ import DeviceRowActions from './device-row-actions.vue';
 import type { DeviceRowAction } from './device-row-actions';
 import DeviceStatus from './device-status.vue';
 import ChannelCapabilities from './channel-capabilities.vue';
+import PlatformCompareButton from '/@/views/collection/video/components/platform-compare-button.vue';
 import dayjs from 'dayjs';
 
 type CameraAction = 'detail' | 'preview' | 'replay' | 'edit' | 'delete';
@@ -366,6 +369,12 @@ const isChannelPaneVisible = computed(() => props.showChannelTab && activeTab.va
 const deviceTabLabel = computed(() => `设备 (${state.pagination?.total ?? 0})`);
 const channelTabLabel = computed(() => (channelInited.value ? `通道 (${channelState.pagination?.total ?? 0})` : '通道'));
 
+// 设备修复可能同时影响通道；刷新已初始化的两张表，保留通道页的延迟加载。
+const handlePlatformResourceChanged = async () => {
+	channelDirty.value = !channelInited.value;
+	await Promise.all([getDataList(), ...(channelInited.value ? [getChannelDataList()] : [])]);
+};
+
 watch(activeTab, (tab) => {
 	if (tab !== 'channel') return;
 	channelInited.value = true;

src/views/device/components/device-list.vue

@@ -44,6 +44,7 @@
 									批量删除
 								</el-button>
 								<el-button plain icon="upload-filled" @click="uploadExcelRef.show()"> 导入 </el-button>
+								<platform-compare-button resource-type="DEVICE" @changed="getDataList()" />
 								<span v-if="selectObjs.length" class="device-list-selection" role="status">已选 {{ selectObjs.length }} 项</span>
 							</div>
 							<right-toolbar
@@ -96,7 +97,7 @@
 								</template>
 							</el-table-column>
 
-							<el-table-column label="操作" fixed="right" width="128">
+							<el-table-column label="操作" fixed="right" :width="rowActions.length > 2 ? 176 : 128">
 								<template #default="{ row }">
 									<device-row-actions :actions="rowActions" :context="row.deviceName" @select="handleRowAction($event, row)" />
 								</template>
@@ -134,12 +135,29 @@ import dayjs from 'dayjs';
 import DeviceRowActions from './device-row-actions.vue';
 import type { DeviceRowAction } from './device-row-actions';
 import DeviceStatus from './device-status.vue';
+import PlatformCompareButton from '/@/views/collection/video/components/platform-compare-button.vue';
 
-const rowActions: DeviceRowAction[] = [
-	{ key: 'edit', label: '编辑', permission: 'admin_deviceManage_edit' },
-	{ key: 'delete', label: '删除', permission: 'admin_deviceManage_del', danger: true },
-];
+type DeviceAction = 'detail' | 'edit' | 'delete';
+
+const props = withDefaults(
+	defineProps<{
+		actions?: DeviceAction[];
+	}>(),
+	{
+		actions: () => ['edit', 'delete'],
+	}
+);
+const { push } = useRouter();
+const rowActions = computed(() => {
+	const actions: DeviceRowAction[] = [
+		{ key: 'detail', label: '详情', icon: 'InfoFilled' },
+		{ key: 'edit', label: '编辑', permission: 'admin_deviceManage_edit' },
+		{ key: 'delete', label: '删除', permission: 'admin_deviceManage_del', danger: true },
+	];
+	return actions.filter((action) => props.actions.includes(action.key as DeviceAction));
+});
 const handleRowAction = (action: string, row: any) => {
+	if (action === 'detail') push({ path: '/device/detail/index', query: { id: row.id } });
 	if (action === 'edit') formDialogRef.value.openDialog(row.id);
 	if (action === 'delete') handleDelete([row.id]);
 };

src/views/device/components/device-status.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="device-status">
 		<div v-if="kind === 'online'" class="device-state-group">
 			<span class="device-state" :class="positive ? 'device-state--online' : 'device-state--offline'">
 				<span class="device-state__dot" aria-hidden="true" />
@@ -8,24 +8,34 @@
 			<span v-if="source !== undefined" class="device-source">{{ sourcePositive ? '同步大华' : '自建维护' }}</span>
 		</div>
 		<span v-else class="device-source">{{ positive ? '同步大华' : '自建维护' }}</span>
-		<div v-if="kind === 'online' && !positive && reason" class="device-cell__secondary" :title="reason">
-			<slot name="reason">{{ reason }}</slot>
+		<div v-if="kind === 'online' && !positive && reason != null && reason !== ''" class="device-status__reason">
+			<span class="device-status__reason-label">原因：</span>
+			<el-tooltip :content="reasonLabel" placement="top" :trigger="['hover', 'focus']" :show-after="300">
+				<span class="device-status__reason-value" tabindex="0" :aria-label="`离线原因：${reasonLabel}`">
+					<slot name="reason">{{ reasonLabel }}</slot>
+				</span>
+			</el-tooltip>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { useDict } from '/@/hooks/dict';
 
 const props = withDefaults(
 	defineProps<{
 		value?: string | number | boolean;
 		source?: string | number | boolean;
 		kind?: 'online' | 'source';
-		reason?: string;
+		reason?: string | number;
 	}>(),
 	{ kind: 'online', reason: '' }
 );
+const { offline_reason } = useDict('offline_reason');
+const reasonLabel = computed(
+	() => offline_reason.value.find((item: { value: string | number; label: string }) => String(item.value) === String(props.reason))?.label || '未知原因'
+);
 const positive = computed(() => props.value === true || String(props.value) === '1');
 const sourcePositive = computed(() => props.source === true || String(props.source) === '1');
 </script>

src/views/device/deviceManage/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <device-list />
+  <device-list :actions="['detail', 'edit', 'delete']" />
 </template>
 
 <script setup lang="ts" name="systemDeviceManage">

src/views/sys/sysPerson/components/person-list.vue

@@ -38,6 +38,7 @@
               @click="handleDelete(selectObjs)">
               删除
             </el-button>
+            <platform-compare-button resource-type="PERSON" @changed="getDataList()" />
             <right-toolbar v-model:showSearch="showSearch" :export="'admin_sysPerson_export'" @exportExcel="exportExcel"
               class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
           </div>
@@ -150,6 +151,7 @@ import { fetchList, delObjs } from '/@/api/sys/sysPerson'
 import { useMessage, useMessageBox } from "/@/hooks/message";
 import { useDict } from '/@/hooks/dict';
 import dayjs from "dayjs";
+import PlatformCompareButton from '/@/views/collection/video/components/platform-compare-button.vue';
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('../person-form.vue'));

src/views/tools/job-manage/components/job-manage-list.vue

@@ -88,6 +88,7 @@
           </template>
         </el-table-column>
         <el-table-column :label="t('job.executePath')" prop="executePath" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.path')" prop="path" show-overflow-tooltip width="180"/>
         <el-table-column :label="t('job.className')" prop="className" show-overflow-tooltip width="120"/>
         <el-table-column :label="t('job.methodName')" prop="methodName" show-overflow-tooltip width="120"/>
         <el-table-column :label="t('job.methodParamsValue')" prop="methodParamsValue" show-overflow-tooltip
@@ -98,8 +99,15 @@
             <dict-tag :options="misfire_policy" :value="scope.row.misfirePolicy"></dict-tag>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('common.action')" fixed="right" width="300">
+        <el-table-column :label="$t('common.action')" fixed="right" width="420">
           <template #default="scope">
+            <el-tooltip :content="t('job.pathNotConfiguredTip')" :disabled="!!scope.row.path?.trim()" placement="top">
+              <span>
+                <el-button @click="handleViewSyncData(scope.row)" :disabled="!scope.row.path?.trim()" text type="primary">
+                  {{ $t('job.viewSyncDataBtn') }}
+                </el-button>
+              </span>
+            </el-tooltip>
             <el-button @click="handleJobLog(scope.row)" text type="primary">{{ $t('job.jobLogBtn') }}</el-button>
 
             <el-button v-auth="'job_sys_job_start_job'" @click="handleStartJob(scope.row)" text type="primary"
@@ -182,58 +190,63 @@
                     </div>
                   </nav>
                 </div>
-                <div aria-label="footer" class="pt-2 border-t dark:border-[#303030]">
-                  <div class="flex items-center justify-center min-w-full">
-                    <nav class="flex">
-                      <a
+                <div aria-label="footer" class="border-t dark:border-[#303030]">
+                  <div class="job-card-actions">
+                    <el-tooltip :content="t('job.pathNotConfiguredTip')" :disabled="!!job.path?.trim()" placement="top">
+                      <span class="job-card-action-hint" :tabindex="job.path?.trim() ? undefined : 0">
+                        <button class="job-card-action" type="button" :disabled="!job.path?.trim()" @click="handleViewSyncData(job)">
+                          {{ $t('job.viewSyncDataBtn') }}
+                        </button>
+                      </span>
+                    </el-tooltip>
+                      <button
                           @click="handleJobLog(job)"
-                          href="javascript:;"
-                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                          type="button"
+                          class="job-card-action"
                       >
                         <span>{{ $t('job.jobLogBtn') }}</span>
-                      </a>
-                      <a
+                      </button>
+                      <button
                           v-auth="'job_sys_job_start_job'"
                           @click="handleStartJob(job)"
                           v-if="job.jobStatus !== '2'"
-                          href="javascript:;"
-                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                          type="button"
+                          class="job-card-action"
                       >
                         <span>{{ $t('job.jobStartBtn') }}</span>
-                      </a>
-                      <a
+                      </button>
+                      <button
                           v-auth="'job_sys_job_shutdown_job'"
                           @click="handleShutDownJob(job)"
                           v-if="job.jobStatus === '2'"
-                          href="javascript:;"
-                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                          type="button"
+                          class="job-card-action"
                       >
                         <span>{{ $t('job.jobPauseBtn') }}</span>
-                      </a>
-                      <a
+                      </button>
+                      <button
                           v-auth="'job_sys_job_edit'" @click="handleEditJob(job)"
-                          href="javascript:;"
-                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                          type="button"
+                          class="job-card-action"
                       >
                         <span> {{ $t('common.editBtn') }}</span>
-                      </a>
-                      <a
+                      </button>
+                      <button
                           v-auth="'job_sys_job_start_job'" @click="handleRunJob(job)"
-                          href="javascript:;"
-                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                          type="button"
+                          class="job-card-action"
                       >
                         <span>{{ $t('job.jobRunBtn') }}</span>
-                      </a>
+                      </button>
 
-                      <a
-                          v-auth="'job_sys_job_del'" @click="handleDelete(job)" type="primary"
+                      <button
+                          v-auth="'job_sys_job_del'" @click="handleDelete(job)"
                           v-if="job.jobStatus !== '2'"
-                          href="javascript:;"
-                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                          type="button"
+                          class="job-card-action"
                       >
                         <span>{{ $t('common.delBtn') }}</span>
-                      </a>
-                    </nav>
+                      </button>
                   </div>
                 </div>
               </div>
@@ -258,6 +271,7 @@ import {delObj, fetchList, runJobRa, shutDownJobRa, startJobRa} from '/@/api/dae
 import {useMessage, useMessageBox} from '/@/hooks/message';
 import {useDict} from '/@/hooks/dict';
 import {useI18n} from 'vue-i18n';
+import {useRouter} from 'vue-router';
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('../form.vue'));
@@ -265,6 +279,7 @@ const JobLog = defineAsyncComponent(() => import('../job-log.vue'));
 
 // 获取国际化方法
 const {t} = useI18n();
+const router = useRouter();
 
 /** 表单弹窗引用 */
 const formDialogRef = ref();
@@ -331,6 +346,20 @@ const handleJobLog = (row) => {
   jobLogRef.value.openDialog(row.jobId);
 };
 
+/** 查看同步数据，保留路径中的查询参数和页面锚点。 */
+const handleViewSyncData = (row: {path?: string | null}) => {
+  const path = row.path?.trim();
+  if (!path) {
+    useMessage().warning(t('job.pathNotConfiguredTip'));
+    return;
+  }
+  if (path.length > 512 || !/^\/(?!\/)[^\s\\]*$/.test(path)) {
+    useMessage().error(t('job.invalidPathTip'));
+    return;
+  }
+  router.push(path);
+};
+
 /** 编辑作业 */
 const handleEditJob = (row) => {
   const jobStatus = row.jobStatus;
@@ -425,3 +454,52 @@ const handleDelete = async (row) => {
   }
 };
 </script>
+
+<style scoped>
+.job-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 4px 2px;
+  padding: 8px;
+}
+
+.job-card-action-hint {
+  display: inline-flex;
+  border-radius: 4px;
+}
+
+.job-card-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-height: 32px;
+  padding: 4px 6px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--el-color-primary);
+  font: inherit;
+  line-height: 24px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.job-card-action:hover:not(:disabled) {
+  background: var(--el-fill-color);
+  color: var(--el-color-primary-dark-2);
+}
+
+.job-card-action:focus-visible,
+.job-card-action-hint:focus-visible {
+  outline: 2px solid var(--el-color-primary);
+  outline-offset: 2px;
+}
+
+.job-card-action:disabled {
+  color: var(--el-text-color-disabled);
+  cursor: not-allowed;
+}
+</style>

src/views/tools/job-manage/form.vue

@@ -67,6 +67,12 @@
 						</el-select>
 					</el-form-item>
 				</el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item :label="t('job.path')" prop="path">
+						<el-input v-model.trim="form.path" :placeholder="t('job.inputPathTip')" maxlength="512" clearable />
+						<div class="text-xs text-[var(--el-text-color-secondary)] mt-1">{{ t('job.pathHelp') }}</div>
+					</el-form-item>
+				</el-col>
 				<el-col :span="24" class="mb20">
 					<el-form-item :label="t('job.remark')" prop="remark">
 						<el-input v-model="form.remark" :placeholder="t('job.inputremarkTip')" type="textarea" />
@@ -110,6 +116,7 @@ const form = reactive({
 	jobGroup: '',
 	jobType: '',
 	executePath: '',
+	path: '',
 	className: '',
 	methodName: '',
 	methodParamsValue: '',
@@ -133,6 +140,10 @@ const dataRules = reactive({
 	cronExpression: [{ required: true, message: 'cron不能为空', trigger: 'blur' }],
 	misfirePolicy: [{ required: true, message: '策略不能为空', trigger: 'blur' }],
 	executePath: [{ required: true, message: '执行路径不能为空', trigger: 'blur' }],
+	path: [
+		{ pattern: /^\/(?!\/)[^\s\\]*$/, message: t('job.invalidPathTip'), trigger: 'blur' },
+		{ max: 512, message: t('job.pathLengthTip'), trigger: 'blur' },
+	],
 	className: [
 		{ required: true, message: '名称不能为空', trigger: 'blur' },
 		{
@@ -180,6 +191,7 @@ const openDialog = (id: string) => {
 
 // 提交
 const onSubmit = async () => {
+	form.path = (form.path || '').trim();
 	const valid = await dataFormRef.value.validate().catch(() => {});
 	if (!valid) return false;
 
@@ -201,6 +213,7 @@ const getsysJobData = (id: string) => {
 	// 获取数据
 	getObj(id).then((res: any) => {
 		Object.assign(form, res.data);
+		form.path = res.data.path || '';
 	});
 };
 

src/views/tools/job-manage/i18n/en.ts

@@ -5,6 +5,13 @@ export default {
 		jobStartBtn: 'start',
 		jobRunBtn: 'execute',
 		jobPauseBtn: 'pause',
+		viewSyncDataBtn: 'View synced data',
+		path: 'Page path',
+		inputPathTip: 'Enter a page path starting with /',
+		pathHelp: 'Optional. View synced data opens this internal page. Query parameters are supported.',
+		pathNotConfiguredTip: 'Configure the page path in Edit first',
+		invalidPathTip: 'Enter an internal path starting with a single /, without whitespace or backslashes',
+		pathLengthTip: 'The page path must not exceed 512 characters',
 		importsysJobTip: 'import SysJob',
 		jobId: 'jobId',
 		jobName: 'jobName',

src/views/tools/job-manage/i18n/zh-cn.ts

@@ -5,6 +5,13 @@ export default {
 		jobStartBtn: '启动',
 		jobRunBtn: '执行',
 		jobPauseBtn: '暂停',
+		viewSyncDataBtn: '查看同步数据',
+		path: '跳转页面',
+		inputPathTip: '请输入以 / 开头的页面路径',
+		pathHelp: '选填，点击“查看同步数据”时跳转到此站内页面，可携带查询参数。',
+		pathNotConfiguredTip: '请先在编辑中配置跳转页面',
+		invalidPathTip: '请输入以单个 / 开头的站内页面路径，不能包含空白或反斜杠',
+		pathLengthTip: '页面路径不能超过 512 个字符',
 		importsysJobTip: '导入定时任务调度表',
 		jobId: '任务id',
 		jobName: '任务名称',

tests/device-list-actions.test.ts

@@ -5,6 +5,7 @@ import ElementPlus from 'element-plus';
 import DeviceRowActions from '../src/views/device/components/device-row-actions.vue';
 import type { DeviceRowAction } from '../src/views/device/components/device-row-actions';
 import CameraList from '../src/views/device/components/camera-list.vue';
+import PlatformCompareButton from '../src/views/collection/video/components/platform-compare-button.vue';
 
 const spies = vi.hoisted(() => ({
 	permissions: new Set<string>(),
@@ -33,6 +34,9 @@ vi.mock('/@/hooks/table', () => ({
 	},
 }));
 vi.mock('/@/hooks/message', () => ({ useMessage: () => ({}), useMessageBox: () => ({}) }));
+vi.mock('/@/views/collection/video/components/platform-compare-button.vue', () => ({
+	default: { name: 'PlatformCompareButton', props: ['resourceType'], emits: ['changed'], render: () => null },
+}));
 
 const actions: DeviceRowAction[] = [
 	{ key: 'preview', label: '预览' },
@@ -86,6 +90,7 @@ function renderCamera(props = {}) {
 				DeviceChannerForm: dialogStub(spies.edit),
 				PreviewVideoDialog: dialogStub(spies.preview),
 				ReplayVideoDialog: dialogStub(spies.replay),
+				PlatformCompareButton: true,
 			},
 		},
 	});
@@ -183,4 +188,25 @@ describe('摄像头列表操作入口', () => {
 		expect(spies.preview).toHaveBeenCalledWith('channel', 'channel-code');
 		expect(spies.replay).toHaveBeenCalledWith('channel', 'channel-code');
 	});
+
+	it('设备和通道工具栏打开各自类型的对比，修复后刷新已加载的两张表', async () => {
+		const wrapper = renderCamera();
+		await flushPromises();
+		let entries = wrapper.findAllComponents(PlatformCompareButton);
+		expect(entries.map(entry => entry.props('resourceType'))).toEqual(['DEVICE']);
+		entries[0].vm.$emit('changed');
+		await flushPromises();
+		expect(spies.deviceQuery).toHaveBeenCalledOnce();
+		expect(spies.channelQuery).not.toHaveBeenCalled();
+		await wrapper.findAll('[role="tab"]').find(item => item.text() === '通道')!.trigger('click');
+		await flushPromises();
+		entries = wrapper.findAllComponents(PlatformCompareButton);
+		expect(entries.map(entry => entry.props('resourceType'))).toEqual(['DEVICE', 'CHANNEL']);
+		spies.deviceQuery.mockClear();
+		spies.channelQuery.mockClear();
+		entries[1].vm.$emit('changed');
+		await flushPromises();
+		expect(spies.deviceQuery).toHaveBeenCalledOnce();
+		expect(spies.channelQuery).toHaveBeenCalledOnce();
+	});
 });

tests/platform-compare-button.test.ts

@@ -0,0 +1,61 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount, type VueWrapper } from '@vue/test-utils';
+import { defineComponent, h } from 'vue';
+import PlatformCompareButton from '../src/views/collection/video/components/platform-compare-button.vue';
+import type { PlatformResourceType } from '../src/api/collection/videoPlatform';
+
+const spies = vi.hoisted(() => ({ open: vi.fn(), permissions: new Set<string>() }));
+vi.mock('/@/utils/authFunction', () => ({ auth: (permission: string) => spies.permissions.has(permission) }));
+vi.mock('/@/views/collection/video/components/platform-resource-dialog.vue', () => ({
+  default: {
+    name: 'PlatformResourceDialog', emits: ['changed'],
+    setup: (_: unknown, { expose }: any) => { expose({ open: spies.open }); return () => null; },
+  },
+}));
+
+const wrappers: VueWrapper[] = [];
+const Button = defineComponent({ setup: (_, { slots }) => () => h('button', slots.default?.()) });
+const renderButton = (resourceType: PlatformResourceType) => {
+  const wrapper = mount(PlatformCompareButton, { props: { resourceType }, global: {
+    stubs: { ElButton: Button },
+  } });
+  wrappers.push(wrapper);
+  return wrapper;
+};
+
+beforeEach(() => {
+  spies.open.mockClear();
+  spies.permissions.clear();
+});
+afterEach(() => wrappers.splice(0).forEach(wrapper => wrapper.unmount()));
+
+describe('ICC 数据对比快捷入口', () => {
+  it.each([
+    ['PERSON', '人员', 'admin_sysPerson_view'],
+    ['CAR', '车辆', 'car_carManage_view'],
+    ['DEVICE', '设备', 'admin_deviceManage_view'],
+    ['CHANNEL', '通道', 'admin_deviceManage_view'],
+  ] as const)('%s 点击后打开相应全量差异弹窗，首次显示列表时不请求对比', async (type, label, permission) => {
+    spies.permissions.add(permission);
+    const wrapper = renderButton(type);
+    expect(spies.open).not.toHaveBeenCalled();
+    expect(wrapper.get('button').text()).toBe('ICC 数据对比');
+    expect(wrapper.get('button').attributes('title')).toBe(`对比 ICC 与本地已同步的全部${label}数据`);
+    await wrapper.get('button').trigger('click');
+    expect(spies.open).toHaveBeenCalledWith(type, 'DIFFERENCE', `ICC ${label}数据对比`);
+  });
+
+  it('仅有设备权限时，不展示人员、车辆的对比入口', () => {
+    spies.permissions.add('admin_deviceManage_view');
+    expect(renderButton('PERSON').find('button').exists()).toBe(false);
+    expect(renderButton('CAR').find('button').exists()).toBe(false);
+    expect(spies.open).not.toHaveBeenCalled();
+  });
+
+  it('差异修复完成后通知列表刷新', () => {
+    spies.permissions.add('admin_sysPerson_view');
+    const wrapper = renderButton('PERSON');
+    wrapper.findComponent({ name: 'PlatformResourceDialog' }).vm.$emit('changed');
+    expect(wrapper.emitted('changed')).toHaveLength(1);
+  });
+});

tests/platform-status.test.ts

@@ -29,7 +29,7 @@ async function setupPage() {
             directives: { loading: () => {}, auth: () => {} },
             stubs: {
                 ElTag: slotStub, ElIcon: slotStub, ElDivider: slotStub, ElTable: slotStub, ElTableColumn: true,
-                ElAlert: true,
+                ElAlert: true, ElFormItem: slotStub, DictSelect: true,
                 ElButton: defineComponent({ setup: (_, { slots }) => () => h('button', slots.default?.()) }),
             },
         },

tests/video-player-sdk.connection.test.ts

@@ -0,0 +1,410 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { runInNewContext } from 'node:vm';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const source = readFileSync(resolve('src/components/rtsp-plugin-video/lib/videoPlayer.js'), 'utf8');
+let sdkWindow: any;
+let control: any;
+let sockets: MockSocket[];
+let attemptedUrls: string[];
+let throwOnConstruct: boolean;
+
+class MockSocket {
+  readyState = 0;
+  onopen: (() => void) | null = null;
+  onclose: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  onmessage: ((event: { data: string }) => void) | null = null;
+  messages: any[] = [];
+  close = vi.fn(() => {
+    this.readyState = 3;
+    this.onclose?.();
+  });
+  send = vi.fn((value: string) => {
+    if (this.readyState !== 1) throw new Error('socket is not open');
+    this.messages.push(JSON.parse(value));
+  });
+  constructor(public url: string) {
+    attemptedUrls.push(url);
+    if (throwOnConstruct) throw new Error('local connection blocked');
+    sockets.push(this);
+  }
+  open() {
+    this.readyState = 1;
+    this.onopen?.();
+  }
+  fail() {
+    const close = this.onclose;
+    this.readyState = 3;
+    this.onerror?.();
+    close?.();
+  }
+  message(data: any) {
+    this.onmessage?.({ data: JSON.stringify(data) });
+  }
+}
+
+function makePlayer(id = 'one', options: Record<string, unknown> = {}, realCreate = false) {
+  const player = Object.create(sdkWindow.VideoPlayer.prototype);
+  player.setting = {
+    videoId: id, hwnd: '', show: false, visible: true, channelList: [],
+    division: 1, windowType: 0, outContent: {}, language: 'zh', request: {},
+    stopRefresh: false, usePluginLogin: false, isResetConnect: true,
+    createError: vi.fn(), createSuccess: vi.fn(), connectionStateChange: vi.fn(),
+    ...options,
+  };
+  player.loginServer = vi.fn();
+  if (!realCreate) player.create = vi.fn();
+  document.body.insertAdjacentHTML('beforeend', `<div id="${id}"></div>`);
+  player.initPlayer();
+  return player;
+}
+
+async function failAttempts(count: number) {
+  for (let index = 0; index < count; index++) {
+    sockets.at(-1)!.fail();
+    await vi.advanceTimersByTimeAsync((index + 1) % 5 === 0 ? 1000 : 100);
+  }
+}
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  sockets = [];
+  attemptedUrls = [];
+  throwOnConstruct = false;
+  const navigator = { userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/120.0.0.0 Safari/537.36' };
+  sdkWindow = {
+    addEventListener: vi.fn(), removeEventListener: vi.fn(),
+    cancelAnimationFrame: vi.fn(), requestAnimationFrame: vi.fn(() => 42),
+    getComputedStyle: window.getComputedStyle.bind(window),
+    innerWidth: 1280, innerHeight: 720, outerWidth: 1280, devicePixelRatio: 1,
+    screen: { availLeft: 0 }, screenX: 0, location: { hostname: 'localhost' },
+    document, navigator,
+  };
+  sdkWindow.parent = sdkWindow;
+  sdkWindow.top = sdkWindow;
+  runInNewContext(source, {
+    window: sdkWindow, document, navigator, localStorage: {},
+    console: { log: vi.fn() }, WebSocket: MockSocket,
+    setTimeout, clearTimeout, setInterval, clearInterval,
+  });
+  control = sdkWindow.dhPlayerControl;
+});
+
+afterEach(() => {
+  vi.clearAllTimers();
+  vi.useRealTimers();
+  document.body.innerHTML = '';
+});
+
+describe('本机插件连接探测', () => {
+  it('并发组件共用一个连接，连接成功后分别初始化一次', () => {
+    const first = makePlayer();
+    const second = makePlayer('two');
+    first.initPlayer();
+    expect(sockets).toHaveLength(1);
+    sockets[0].open();
+    first.initPlayer();
+    expect(first.create).toHaveBeenCalledTimes(1);
+    expect(second.create).toHaveBeenCalledTimes(1);
+    expect(first.setting.createError).not.toHaveBeenCalled();
+  });
+
+  it('服务稍晚启动时继续下一轮探测，不提前宣告未安装', async () => {
+    const player = makePlayer();
+    await failAttempts(5);
+    expect(attemptedUrls.map(url => new URL(url).port)).toEqual(['8000', '8001', '8002', '8003', '8004', '8000']);
+    expect(player.setting.createError).not.toHaveBeenCalled();
+    sockets.at(-1)!.open();
+    expect(player.create).toHaveBeenCalledTimes(1);
+    expect(control.windowState).toBe('wsSuccess');
+  });
+
+  it('三轮失败只报告一次终态，下次打开能重新扫描', async () => {
+    const first = makePlayer();
+    await failAttempts(15);
+    expect(sockets).toHaveLength(15);
+    expect(first.setting.createError).toHaveBeenCalledTimes(1);
+    expect(first.setting.createError).toHaveBeenCalledWith(expect.objectContaining({
+      code: 1001, message: '未能连接本机视频服务，请启动或重新启动视频插件后重试',
+    }));
+    expect(control.wsConnect).toBe(false);
+    expect(control.videoWS).toBeNull();
+    const retry = makePlayer('retry');
+    expect(sockets).toHaveLength(16);
+    sockets.at(-1)!.open();
+    expect(retry.create).toHaveBeenCalledTimes(1);
+  });
+
+  it('一直没有open或close事件的端口也会超时，整个探测次数有上限', async () => {
+    const player = makePlayer();
+    await vi.advanceTimersByTimeAsync(30000);
+    expect(sockets).toHaveLength(15);
+    expect(sockets.every(socket => socket.close.mock.calls.length === 1)).toBe(true);
+    expect(player.setting.createError).toHaveBeenCalledTimes(1);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it('构造WebSocket抛异常也能完整结束探测', async () => {
+    throwOnConstruct = true;
+    const player = makePlayer();
+    await vi.advanceTimersByTimeAsync(10000);
+    expect(attemptedUrls).toHaveLength(15);
+    expect(player.setting.createError).toHaveBeenCalledTimes(1);
+    expect(control.wsConnect).toBe(false);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it('error紧接close只推进一次，不启动并行扫描', async () => {
+    makePlayer();
+    sockets[0].fail();
+    await vi.advanceTimersByTimeAsync(100);
+    expect(sockets).toHaveLength(2);
+    expect(sockets[1].url).toBe('ws://127.0.0.1:8001');
+    await vi.advanceTimersByTimeAsync(100);
+    expect(sockets).toHaveLength(2);
+  });
+
+  it('最后一个实例在探测中销毁会终止后台探测', async () => {
+    const player = makePlayer();
+    player.dispose();
+    await vi.advanceTimersByTimeAsync(30000);
+    expect(sockets).toHaveLength(1);
+    expect(sockets[0].close).toHaveBeenCalledTimes(1);
+    expect(control.wsConnect).toBe(false);
+    expect(player.setting.createError).not.toHaveBeenCalled();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it('销毁其中一个实例不打断其它实例的探测或已连接的共享socket', async () => {
+    const first = makePlayer();
+    const other = makePlayer('other');
+    first.dispose();
+    sockets[0].fail();
+    await vi.advanceTimersByTimeAsync(100);
+    sockets[1].open();
+    expect(other.create).toHaveBeenCalledTimes(1);
+    other.dispose();
+    expect(sockets[1].close).not.toHaveBeenCalled();
+  });
+
+  it('主动关闭取消延迟任务，旧close事件不会重开连接', async () => {
+    const player = makePlayer();
+    const oldClose = sockets[0].onclose;
+    sockets[0].fail();
+    player.onbeforeunload();
+    oldClose?.();
+    await vi.advanceTimersByTimeAsync(30000);
+    expect(sockets).toHaveLength(1);
+    expect(control.manualCloseWS).toBe(true);
+    expect(control.wsConnect).toBe(false);
+    expect(player.setting.createError).not.toHaveBeenCalled();
+  });
+});
+
+describe('连接中断及旧回调隔离', () => {
+  it('先重试上次成功端口，再探测其它端口，只通知一次reconnecting', async () => {
+    const player = makePlayer();
+    await failAttempts(2);
+    sockets[2].open();
+    sockets[2].fail();
+    expect(sockets[3].url).toBe('ws://127.0.0.1:8002');
+    expect(player.setting.createError).not.toHaveBeenCalled();
+    expect(player.setting.connectionStateChange.mock.calls.map(([state]: any[]) => state.state)).toEqual(['connecting', 'reconnecting']);
+    sockets[3].fail();
+    await vi.advanceTimersByTimeAsync(100);
+    expect(sockets[4].url).toBe('ws://127.0.0.1:8000');
+    sockets[4].open();
+    expect(player.create).toHaveBeenCalledTimes(2);
+  });
+
+  it('重连三轮也失败时报告1003，不误报插件未安装', async () => {
+    const player = makePlayer('native-ready', {}, true);
+    sockets[0].open();
+    await vi.advanceTimersByTimeAsync(0);
+    const create = sockets[0].messages.find(message => message.method === 'window.create');
+    sockets[0].message({ id: create.id, code: 0, data: { hwnd: 101 } });
+    expect(player.setting.createSuccess).toHaveBeenCalledTimes(1);
+    sockets[0].fail();
+    await failAttempts(15);
+    expect(player.setting.createError).toHaveBeenCalledTimes(1);
+    expect(player.setting.createError).toHaveBeenCalledWith(expect.objectContaining({ code: 1003 }));
+    expect(sockets).toHaveLength(16);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it('只成功握手却始终无法准备好窗口时，不会无限重置探测预算', () => {
+    const player = makePlayer();
+    for (let attempt = 0; attempt < 15; attempt++) {
+      sockets.at(-1)!.open();
+      sockets.at(-1)!.fail();
+    }
+    expect(sockets).toHaveLength(15);
+    expect(player.setting.createError).toHaveBeenCalledTimes(1);
+    expect(player.setting.createError).toHaveBeenCalledWith(expect.objectContaining({ code: 1003 }));
+    expect(control.wsConnect).toBe(false);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it('旧socket的open/message/close回调不会污染已经恢复的连接', async () => {
+    const player = makePlayer();
+    const old = sockets[0];
+    const callbacks = { open: old.onopen!, close: old.onclose!, message: old.onmessage! };
+    old.open();
+    old.fail();
+    const current = sockets[1];
+    current.open();
+    callbacks.open();
+    callbacks.message({ data: JSON.stringify({ method: 'window.loginServer.notify', info: { result: 1 } }) });
+    callbacks.close();
+    await vi.advanceTimersByTimeAsync(1000);
+    expect(control.videoWS).toBe(current);
+    expect(control.windowState).toBe('wsSuccess');
+    expect(control.loginFlag).toBe('LOGIN_PENDING');
+    expect(sockets).toHaveLength(2);
+    expect(player.create).toHaveBeenCalledTimes(2);
+    expect(player.setting.createError).not.toHaveBeenCalled();
+  });
+
+  it('心跳只发送给当前打开的连接，断开后停止旧心跳', async () => {
+    makePlayer();
+    const old = sockets[0];
+    old.open();
+    await vi.advanceTimersByTimeAsync(10000);
+    expect(old.messages.filter(message => message.method === 'common.heartbeat')).toHaveLength(1);
+    old.fail();
+    const current = sockets[1];
+    current.open();
+    await vi.advanceTimersByTimeAsync(10000);
+    expect(old.messages.filter(message => message.method === 'common.heartbeat')).toHaveLength(1);
+    expect(current.messages.filter(message => message.method === 'common.heartbeat')).toHaveLength(1);
+  });
+
+  it('关闭自动重连的实例不会参与其他实例的恢复', () => {
+    const stopped = makePlayer('stopped', { isResetConnect: false });
+    const recovering = makePlayer('recovering');
+    sockets[0].open();
+    sockets[0].fail();
+    expect(stopped.setting.createError).toHaveBeenCalledWith(expect.objectContaining({ code: 1003 }));
+    sockets[1].open();
+    expect(stopped.create).toHaveBeenCalledTimes(1);
+    expect(recovering.create).toHaveBeenCalledTimes(2);
+  });
+
+  it('所有实例关闭自动重连时，连接断开不再后台扫描', async () => {
+    const player = makePlayer('stopped', { isResetConnect: false });
+    sockets[0].open();
+    sockets[0].fail();
+    await vi.advanceTimersByTimeAsync(30000);
+    expect(sockets).toHaveLength(1);
+    expect(player.setting.createError).toHaveBeenCalledTimes(1);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it('断线清理旧句柄和等待任务，新连接无需等待旧destroy回包', async () => {
+    const player = makePlayer('real', {}, true);
+    const old = sockets[0];
+    old.open();
+    await vi.advanceTimersByTimeAsync(0);
+    const firstCreate = old.messages.find(message => message.method === 'window.create');
+    const lateCallback = control.callBackList[firstCreate.id];
+    player.setting.hwnd = 101;
+    player.setting.channelList = [{ channelId: 'old', snum: 0 }];
+    control.hwndList[101] = 'real';
+    player.setting.socketTimer = setTimeout(() => { throw new Error('old initialization timer'); }, 10);
+    player.setting.refreshTimer = 99;
+    old.fail();
+    expect(player.setting.hwnd).toBe('');
+    expect(control.hwndList).toEqual({});
+    expect(control.callBackList).toEqual({});
+    expect(sdkWindow.cancelAnimationFrame).toHaveBeenCalledWith(99);
+    const current = sockets[1];
+    current.open();
+    await vi.advanceTimersByTimeAsync(20);
+    expect(current.messages.some(message => message.method === 'window.create')).toBe(true);
+    expect(current.messages.some(message => message.method === 'window.destroy')).toBe(false);
+    const count = current.messages.length;
+    lateCallback.onSuccess({ data: { hwnd: 606 } });
+    expect(current.messages).toHaveLength(count);
+    expect(player.setting.hwnd).toBe('');
+  });
+
+  it('window.create失败仅报告该实例，不销毁其他窗口或关闭共享连接', async () => {
+    const failed = makePlayer('failed', {}, true);
+    const other = makePlayer('other');
+    const socket = sockets[0];
+    socket.open();
+    await vi.advanceTimersByTimeAsync(0);
+    const request = socket.messages.find(message => message.method === 'window.create');
+    socket.message({ id: request.id, code: 1 });
+    expect(failed.setting.createError).toHaveBeenCalledWith(expect.objectContaining({ code: 1006 }));
+    expect(other.setting.createError).not.toHaveBeenCalled();
+    expect(socket.close).not.toHaveBeenCalled();
+    expect(socket.messages.some(message => message.method === 'window.destroyall')).toBe(false);
+    await vi.advanceTimersByTimeAsync(5000);
+    expect(sockets).toHaveLength(1);
+  });
+});
+
+describe('共享连接的插件登录等待', () => {
+  it('登录中加入的实例也能继续创建，重复初始化不叠加等待', async () => {
+    const first = makePlayer('first', { usePluginLogin: true });
+    sockets[0].open();
+    const second = makePlayer('second', { usePluginLogin: true });
+    const waitTimer = second.loginWaitTimer;
+    second.initPlayer();
+    expect(second.loginWaitTimer).toBe(waitTimer);
+    expect(first.loginServer).toHaveBeenCalledTimes(1);
+    expect(second.loginServer).not.toHaveBeenCalled();
+    sockets[0].message({ method: 'window.loginServer.notify', info: { result: 0 } });
+    await vi.advanceTimersByTimeAsync(300);
+    expect(first.create).toHaveBeenCalledTimes(1);
+    expect(second.create).toHaveBeenCalledTimes(1);
+    expect(first.loginWaitTimer).toBeNull();
+    expect(second.loginWaitTimer).toBeNull();
+  });
+
+  it('登录失败按1004报告，不创建窗口，也不误报未安装', async () => {
+    const player = makePlayer('login', { usePluginLogin: true });
+    sockets[0].open();
+    sockets[0].message({ method: 'window.loginServer.notify', info: { result: 1 } });
+    await vi.advanceTimersByTimeAsync(300);
+    expect(player.create).not.toHaveBeenCalled();
+    expect(player.setting.createError).toHaveBeenCalledTimes(1);
+    expect(player.setting.createError).toHaveBeenCalledWith(expect.objectContaining({ code: 1004 }));
+  });
+
+  it('登录未返回也会超时结束，可由新实例重试登录', async () => {
+    const player = makePlayer('login', { usePluginLogin: true });
+    sockets[0].open();
+    await vi.advanceTimersByTimeAsync(29999);
+    expect(player.setting.createError).not.toHaveBeenCalled();
+    await vi.advanceTimersByTimeAsync(1);
+    expect(player.setting.createError).toHaveBeenCalledTimes(1);
+    expect(player.setting.createError).toHaveBeenCalledWith(expect.objectContaining({ code: 1004, i18nKey: 'dhplayer.login.timeout' }));
+    expect(player.loginWaitTimer).toBeNull();
+    expect(player.loginTimeoutTimer).toBeNull();
+    const retry = makePlayer('retry', { usePluginLogin: true });
+    expect(retry.loginServer).toHaveBeenCalledTimes(1);
+    sockets[0].message({ method: 'window.loginServer.notify', info: { result: 0 } });
+    await vi.advanceTimersByTimeAsync(300);
+    expect(retry.create).toHaveBeenCalledTimes(1);
+  });
+
+  it('重连清理旧登录等待，旧连接的登录响应不能提前完成新登录', async () => {
+    const player = makePlayer('login', { usePluginLogin: true });
+    const old = sockets[0];
+    old.open();
+    const oldMessage = old.onmessage!;
+    old.fail();
+    sockets[1].open();
+    oldMessage({ data: JSON.stringify({ method: 'window.loginServer.notify', info: { result: 0 } }) });
+    await vi.advanceTimersByTimeAsync(300);
+    expect(player.create).not.toHaveBeenCalled();
+    sockets[1].message({ method: 'window.loginServer.notify', info: { result: 0 } });
+    await vi.advanceTimersByTimeAsync(300);
+    expect(player.create).toHaveBeenCalledTimes(1);
+    expect(player.loginServer).toHaveBeenCalledTimes(2);
+  });
+});

tests/video-plugin.connection.test.ts

@@ -0,0 +1,351 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import VideoPlugin from '../src/components/rtsp-plugin-video/video-plugin.vue'
+
+const mocks = vi.hoisted(() => ({ getSetting: vi.fn() }))
+vi.mock('../src/components/rtsp-plugin-video/lib/videoPlayer', () => ({}))
+vi.mock('../src/api/com/comDhSetting', () => ({ getObj: mocks.getSetting }))
+vi.mock('element-plus', () => ({ ElMessage: { error: vi.fn(), success: vi.fn(), warning: vi.fn() } }))
+
+type Mode = 'real' | 'playback'
+const modes: Mode[] = ['real', 'playback']
+const connectionError = '未能连接本机视频服务，请启动或重新启动视频插件后重试'
+const instances: MockPlayer[] = []
+let constructorError: { code: number; message: string } | null = null
+
+class MockPlayer {
+  setting: any
+  closeVideo = vi.fn(() => Promise.resolve())
+  dispose = vi.fn()
+  hide = vi.fn()
+  show = vi.fn()
+  startReal = vi.fn((items) => { this.setting.channelList = items })
+  startPlayback = vi.fn((items) => { this.setting.channelList = items })
+  controlPlayback = vi.fn()
+  setTabControlBtn = vi.fn()
+  changeDivision = vi.fn((division) => { this.setting.division = division })
+  constructor(public options: any) {
+    this.setting = { ...options, hwnd: instances.length + 10, channelList: [] }
+    instances.push(this)
+    if (constructorError) options.createError(constructorError)
+  }
+  manualClose(all: boolean) {
+    this.setting.channelList = all ? [] : this.setting.channelList.slice(1)
+    this.options.closeWindowSuccess({ isAll: all, snum: 0, channelList: this.setting.channelList })
+  }
+}
+
+function deferred<T = void>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((done) => { resolve = done })
+  return { promise, resolve }
+}
+const wrappers: VueWrapper[] = []
+function createPlayer() {
+  const wrapper = mount(VideoPlugin, {
+    global: { stubs: { Yt: true, 'el-pagination': true, 'el-icon': true }, directives: { loading: () => undefined } },
+  })
+  document.body.appendChild(wrapper.element)
+  wrappers.push(wrapper)
+  return wrapper
+}
+function requests(mode: Mode, names = ['camera-a']) {
+  return names.map((channelId, snum) => ({
+    channelId, snum, streamType: mode === 'real' ? 2 : 0,
+    ...(mode === 'playback' ? { startTime: '2026-11-04 08:00:00', endTime: '2026-11-04 09:00:00', recordSource: 2 } : {}),
+  }))
+}
+function start(wrapper: VueWrapper, mode: Mode, items = requests(mode)) {
+  return mode === 'real' ? wrapper.vm.startReal(items) : wrapper.vm.startPlayback(items)
+}
+function startSpy(player: MockPlayer, mode: Mode) {
+  return mode === 'real' ? player.startReal : player.startPlayback
+}
+async function ready(player: MockPlayer) {
+  player.options.createSuccess({})
+  await vi.advanceTimersByTimeAsync(500)
+}
+async function play(wrapper: VueWrapper, mode: Mode, items = requests(mode)) {
+  const task = start(wrapper, mode, items)
+  await vi.advanceTimersByTimeAsync(0)
+  const player = instances[instances.length - 1]
+  await ready(player)
+  await task
+  expect(startSpy(player, mode)).toHaveBeenCalledTimes(1)
+  return player
+}
+async function failInitial(wrapper: VueWrapper, mode: Mode, code = 1001) {
+  const task = start(wrapper, mode)
+  await vi.advanceTimersByTimeAsync(0)
+  const player = instances[instances.length - 1]
+  player.options.createError({ code, message: '插件未安装' })
+  await task
+  await nextTick()
+  expect(player.dispose).toHaveBeenCalledTimes(1)
+  return player
+}
+function retryButton(wrapper: VueWrapper) {
+  const button = wrapper.findAll('button').find((item) => item.text() === '重新连接')
+  expect(button, '连接失败时应提供重新连接按钮').toBeDefined()
+  return button!
+}
+function setHidden(hidden: boolean) {
+  Object.defineProperty(document, 'hidden', { configurable: true, value: hidden })
+  document.dispatchEvent(new Event('visibilitychange'))
+}
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  vi.spyOn(console, 'log').mockImplementation(() => undefined)
+  Object.defineProperty(document, 'hidden', { configurable: true, value: false })
+  ;(window as any).VideoPlayer = MockPlayer
+  instances.length = 0
+  constructorError = null
+  mocks.getSetting.mockReset().mockResolvedValue({ code: 0, data: { dhIccSetting: {} } })
+})
+afterEach(() => {
+  wrappers.splice(0).forEach((wrapper) => { if (wrapper.exists()) wrapper.unmount() })
+  vi.clearAllTimers()
+  vi.useRealTimers()
+  vi.restoreAllMocks()
+  document.body.innerHTML = ''
+})
+
+describe.each(modes)('%s 视频连接恢复', (mode) => {
+  it.each([1001, 1003])('终态错误 %s 显示连接故障，点击重试恢复当前请求', async (code) => {
+    const wrapper = createPlayer()
+    await failInitial(wrapper, mode, code)
+    expect(wrapper.text()).toContain(connectionError)
+    expect(wrapper.text()).not.toContain('插件未安装')
+    await retryButton(wrapper).trigger('click')
+    await vi.advanceTimersByTimeAsync(0)
+    expect(instances).toHaveLength(2)
+    await ready(instances[1])
+    expect(startSpy(instances[1], mode)).toHaveBeenCalledTimes(1)
+    expect(startSpy(instances[1], mode)).toHaveBeenCalledWith(requests(mode))
+    expect(wrapper.text()).not.toContain(connectionError)
+  })
+
+  it('连接中状态不是终态，不销毁实例或显示未安装提示', async () => {
+    const wrapper = createPlayer()
+    const task = start(wrapper, mode)
+    await vi.advanceTimersByTimeAsync(0)
+    const player = instances[0]
+    player.options.connectionStateChange({ state: 'connecting' })
+    await nextTick()
+    expect(player.dispose).not.toHaveBeenCalled()
+    expect(wrapper.text()).not.toContain('插件未安装')
+    await ready(player)
+    await task
+    expect(startSpy(player, mode)).toHaveBeenCalledTimes(1)
+  })
+
+  it('运行中的连接恢复复用实例，并绕过800ms重复播放保护重新开流', async () => {
+    const wrapper = createPlayer()
+    const player = await play(wrapper, mode)
+    const disconnectedAt = Date.now()
+    player.options.connectionStateChange({ state: 'reconnecting' })
+    expect(player.dispose).not.toHaveBeenCalled()
+    await ready(player)
+    expect(Date.now() - disconnectedAt).toBeLessThan(800)
+    expect(instances).toHaveLength(1)
+    expect(startSpy(player, mode)).toHaveBeenCalledTimes(2)
+    expect(startSpy(player, mode)).toHaveBeenLastCalledWith(requests(mode))
+  })
+
+  it.each([false, true])('重连时不会重新播放手动关闭的通道（全部关闭：%s）', async (all) => {
+    const wrapper = createPlayer()
+    const items = requests(mode, ['camera-a', 'camera-b'])
+    const player = await play(wrapper, mode, items)
+    player.manualClose(all)
+    player.options.connectionStateChange({ state: 'reconnecting' })
+    await ready(player)
+    expect(player.dispose).not.toHaveBeenCalled()
+    expect(startSpy(player, mode)).toHaveBeenCalledTimes(all ? 1 : 2)
+    if (!all) expect(startSpy(player, mode)).toHaveBeenLastCalledWith([items[1]])
+  })
+
+  it('后台重连成功时先不播放，回到前台才恢复有效请求', async () => {
+    const wrapper = createPlayer()
+    const player = await play(wrapper, mode)
+    setHidden(true)
+    await vi.advanceTimersByTimeAsync(0)
+    player.options.connectionStateChange({ state: 'reconnecting' })
+    await ready(player)
+    expect(startSpy(player, mode)).toHaveBeenCalledTimes(1)
+    expect(player.setting.visible).toBe(false)
+    setHidden(false)
+    await vi.advanceTimersByTimeAsync(500)
+    expect(startSpy(player, mode)).toHaveBeenCalledTimes(2)
+    expect(startSpy(player, mode)).toHaveBeenLastCalledWith(requests(mode))
+    expect(player.setting.visible).toBe(true)
+  })
+})
+
+describe('重试和页面关闭的竞态', () => {
+  it.each(modes)('切换模式失败后返回正常缓存的 %s 模式会清除错误遮罩和重试按钮', async (mode) => {
+    const wrapper = createPlayer()
+    const cached = await play(wrapper, mode)
+    const otherMode = mode === 'real' ? 'playback' : 'real'
+    await failInitial(wrapper, otherMode)
+    expect(wrapper.text()).toContain(connectionError)
+    retryButton(wrapper)
+
+    await start(wrapper, mode)
+    await nextTick()
+    expect(instances).toHaveLength(2)
+    expect(cached.setting.visible).toBe(true)
+    expect(wrapper.text()).not.toContain(connectionError)
+    expect(wrapper.findAll('button').some((button) => button.text() === '重新连接')).toBe(false)
+    expect(wrapper.find('.loading-mask').exists()).toBe(false)
+
+    // 配置查询失败也不能把错误状态带回仍可用的缓存播放器。
+    mocks.getSetting.mockResolvedValueOnce({ code: 1, data: null })
+    await start(wrapper, otherMode)
+    await nextTick()
+    expect(wrapper.text()).toContain('配置')
+    retryButton(wrapper)
+    await start(wrapper, mode)
+    await nextTick()
+    expect(instances).toHaveLength(2)
+    expect(cached.setting.visible).toBe(true)
+    expect(wrapper.text()).not.toContain('配置')
+    expect(wrapper.findAll('button').some((button) => button.text() === '重新连接')).toBe(false)
+    expect(wrapper.find('.loading-mask').exists()).toBe(false)
+  })
+
+  it('关闭命令一直不回包时，重连会结束关闭等待供父组件继续执行', async () => {
+    const wrapper = createPlayer()
+    const player = await play(wrapper, 'real')
+    const noResponse = deferred()
+    player.closeVideo.mockReturnValueOnce(noResponse.promise)
+    let closed = false
+    const closing = wrapper.vm.closeVideo().then(() => { closed = true })
+    await vi.advanceTimersByTimeAsync(0)
+    expect(closed).toBe(false)
+    player.options.connectionStateChange({ state: 'reconnecting' })
+    await vi.advanceTimersByTimeAsync(0)
+    expect(closed).toBe(true)
+    await closing
+    await ready(player)
+    expect(player.startReal).toHaveBeenCalledTimes(1)
+  })
+
+  it('快速重复点击重试只查询一次配置并创建一个替换实例', async () => {
+    const wrapper = createPlayer()
+    await failInitial(wrapper, 'real')
+    const pending = deferred<any>()
+    mocks.getSetting.mockReturnValueOnce(pending.promise)
+    const button = retryButton(wrapper).element
+    button.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    button.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+    button.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(mocks.getSetting).toHaveBeenCalledTimes(2)
+    expect(instances).toHaveLength(1)
+    pending.resolve({ code: 0, data: { dhIccSetting: {} } })
+    await vi.advanceTimersByTimeAsync(0)
+    expect(instances).toHaveLength(2)
+    await ready(instances[1])
+    expect(instances[1].startReal).toHaveBeenCalledTimes(1)
+  })
+
+  it('非当前缓存模式重连成功不抢占当前回放', async () => {
+    const wrapper = createPlayer()
+    const preview = await play(wrapper, 'real')
+    const replay = await play(wrapper, 'playback')
+    preview.options.connectionStateChange({ state: 'reconnecting' })
+    await ready(preview)
+    expect(preview.dispose).not.toHaveBeenCalled()
+    expect(preview.startReal).toHaveBeenCalledTimes(1)
+    expect(preview.setting.visible).toBe(false)
+    expect(replay.startPlayback).toHaveBeenCalledTimes(1)
+    expect(replay.setting.visible).toBe(true)
+  })
+
+  it('重连过程中切换模式，只恢复最新回放请求', async () => {
+    const wrapper = createPlayer()
+    const preview = await play(wrapper, 'real')
+    preview.options.connectionStateChange({ state: 'reconnecting' })
+    const task = start(wrapper, 'playback')
+    await vi.advanceTimersByTimeAsync(0)
+    const replay = instances[1]
+    await ready(replay)
+    await task
+    await ready(preview)
+    expect(preview.startReal).toHaveBeenCalledTimes(1)
+    expect(replay.startPlayback).toHaveBeenCalledTimes(1)
+    expect(replay.startPlayback).toHaveBeenCalledWith(requests('playback'))
+  })
+
+  it('重连取消旧关闭等待，旧回包不能清空已恢复的新通道', async () => {
+    const wrapper = createPlayer()
+    const player = await play(wrapper, 'real')
+    const close = deferred()
+    player.closeVideo.mockReturnValueOnce(close.promise)
+    const closing = wrapper.vm.closeVideo()
+    let waitingSettled = false
+    const items = requests('real', ['new-camera'])
+    const waiting = start(wrapper, 'real', items).then(() => { waitingSettled = true })
+    await vi.advanceTimersByTimeAsync(0)
+    expect(player.startReal).toHaveBeenCalledTimes(1)
+    player.options.connectionStateChange({ state: 'reconnecting' })
+    await vi.advanceTimersByTimeAsync(0)
+    expect(waitingSettled).toBe(true)
+    await ready(player)
+    expect(player.startReal).toHaveBeenCalledTimes(2)
+    expect(player.startReal).toHaveBeenLastCalledWith(items)
+    close.resolve()
+    await closing
+    await waiting
+    expect(player.setting.channelList).toEqual(items)
+  })
+
+  it.each(['close', 'unmount', 'inactive'])('手动重试后%s，晚到就绪不能重新播放', async (action) => {
+    const wrapper = createPlayer()
+    const failed = await failInitial(wrapper, 'real')
+    await retryButton(wrapper).trigger('click')
+    await vi.advanceTimersByTimeAsync(0)
+    const replacement = instances[1]
+    expect(replacement).toBeDefined()
+    if (action === 'close') await wrapper.vm.closeVideo()
+    if (action === 'unmount') wrapper.unmount()
+    if (action === 'inactive') await wrapper.setProps({ active: false })
+    await ready(failed)
+    await ready(replacement)
+    expect(failed.startReal).not.toHaveBeenCalled()
+    expect(replacement.startReal).not.toHaveBeenCalled()
+    expect(instances).toHaveLength(2)
+  })
+
+  it('重试配置仍在加载时关闭，不再构造替换播放器', async () => {
+    const wrapper = createPlayer()
+    await failInitial(wrapper, 'real')
+    const config = deferred<any>()
+    mocks.getSetting.mockReturnValueOnce(config.promise)
+    await retryButton(wrapper).trigger('click')
+    wrapper.unmount()
+    config.resolve({ code: 0, data: { dhIccSetting: {} } })
+    await vi.advanceTimersByTimeAsync(1000)
+    expect(instances).toHaveLength(1)
+  })
+
+  it('SDK构造期间同步报错也会清理实例，后续手动重试可成功', async () => {
+    constructorError = { code: 1001, message: '插件未安装' }
+    const wrapper = createPlayer()
+    let settled = false
+    const task = start(wrapper, 'real').then(() => { settled = true })
+    await vi.advanceTimersByTimeAsync(0)
+    expect(settled).toBe(true)
+    expect(instances[0].dispose).toHaveBeenCalledTimes(1)
+    expect(wrapper.text()).toContain(connectionError)
+    constructorError = null
+    await retryButton(wrapper).trigger('click')
+    await vi.advanceTimersByTimeAsync(0)
+    expect(instances).toHaveLength(2)
+    await ready(instances[1])
+    await task
+    expect(instances[1].startReal).toHaveBeenCalledTimes(1)
+  })
+})

tests/video-plugin.lifecycle.test.ts

@@ -92,7 +92,7 @@ describe('原生播放器组件的关闭时序', () => {
     await nextTick();
     expect(wrapper.findAll('.video-window-label').map(item => item.text())).toEqual(labels.map(item => item.label));
     expect(wrapper.text()).toContain('南门球机');
-    expect(wrapper.text()).toContain('插件未安装');
+    expect(wrapper.text()).toContain('未能连接本机视频服务');
     expect(wrapper.find('.loading-mask').exists()).toBe(false);
   });