npm - dcs02 - Versions diffs - 1.1.0 - Mend

dcs02 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (597) hide show

package/index.html ADDED Viewed

@@ -0,0 +1,659 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="touch-action" content="none">
+    <title>豆瓣视频-电视适配版</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            outline: none;
+            -webkit-tap-highlight-color: transparent;
+        }
+        body {
+            background-color: #000;
+            color: #fff;
+            font-family: "Microsoft Yahei", sans-serif;
+            font-size: 2vw;
+            overflow-x: hidden;
+            overflow: hidden;
+            touch-action: none;
+        }
+        .header {
+            width: 100vw;
+            height: 8vh;
+            background-color: #007722;
+            display: flex;
+            align-items: center;
+            padding: 0 3vw;
+            justify-content: space-between;
+        }
+        .header .logo {
+            font-size: 3vw;
+            font-weight: bold;
+            margin-right: 5vw;
+        }
+        .header .nav {
+            display: flex;
+            gap: 4vw;
+        }
+        .header .nav-item {
+            padding: 0.5vw 1vw;
+            tabindex: 0;
+            cursor: pointer;
+            border-radius: 0.5vw;
+            transition: background-color 0.2s;
+        }
+        /* 服务器状态样式 */
+        .server-status {
+            padding: 0.5vw 1.5vw;
+            border-radius: 0.5vw;
+            font-size: 1.8vw;
+            display: flex;
+            align-items: center;
+            gap: 1vw;
+            tabindex: 0;
+        }
+        .status-indicator {
+            width: 1.5vw;
+            height: 1.5vw;
+            border-radius: 50%;
+            background-color: #ff4444;
+        }
+        .status-indicator.online {
+            background-color: #66ff66;
+        }
+        .status-indicator.offline {
+            background-color: #ff4444;
+        }
+        .focused {
+            background-color: rgba(255, 255, 255, 0.3);
+            border: 0.2vw solid #fff;
+        }
+        .content {
+            padding: 2vw 3vw;
+        }
+        .content .title {
+            font-size: 2.5vw;
+            margin-bottom: 2vw;
+            padding-left: 1vw;
+            border-left: 0.5vw solid #007722;
+        }
+        .video-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 2vw;
+        }
+        .video-card {
+            background-color: #222;
+            border-radius: 1vw;
+            overflow: hidden;
+            tabindex: 0;
+            transition: transform 0.2s;
+        }
+        .video-card img {
+            width: 100%;
+            height: 18vh;
+            object-fit: cover;
+        }
+        .video-card .video-title {
+            padding: 1vw;
+            font-size: 1.8vw;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .video-card .rating {
+            padding: 0 1vw 1vw;
+            font-size: 1.5vw;
+            color: #ffcc00;
+        }
+        .loading {
+            font-size: 2vw;
+            text-align: center;
+            padding: 5vh 0;
+            color: #999;
+        }
+        .error {
+            font-size: 2vw;
+            text-align: center;
+            padding: 5vh 0;
+            color: #ff4444;
+        }
+        /* ========== 新增：服务器状态详情面板 ========== */
+        .server-detail-panel {
+            position: fixed;
+            top: 8vh;
+            right: 0;
+            width: 35vw;
+            background-color: #111;
+            border-left: 0.2vw solid #007722;
+            max-height: 40vh;
+            overflow-y: auto;
+            transition: max-width 0.3s ease;
+            z-index: 9998;
+            max-width: 0;
+            opacity: 0;
+            tabindex: 0;
+        }
+        .server-detail-panel.show {
+            max-width: 35vw;
+            opacity: 1;
+            padding: 1vw 2vw;
+        }
+        .server-detail-header {
+            font-size: 2vw;
+            margin-bottom: 1vw;
+            color: #007722;
+            border-bottom: 0.1vw solid #333;
+            padding-bottom: 0.5vw;
+        }
+        .server-detail-content {
+            font-family: "Consolas", monospace;
+            font-size: 1.5vw;
+            color: #66ff66;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+        /* ========== 服务器状态详情面板结束 ========== */
+        /* 调试数据面板样式 */
+        .debug-panel {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100vw;
+            background-color: #111;
+            border-top: 0.2vw solid #007722;
+            max-height: 30vh;
+            overflow-y: auto;
+            transition: max-height 0.3s ease;
+            z-index: 9999;
+            tabindex: 0;
+        }
+        .debug-panel.collapsed {
+            max-height: 4vh;
+        }
+        .debug-header {
+            padding: 0.5vw 2vw;
+            background-color: #007722;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            cursor: pointer;
+        }
+        .debug-header h3 {
+            font-size: 1.8vw;
+        }
+        .debug-toggle {
+            font-size: 2vw;
+        }
+        .debug-content {
+            padding: 1vw 2vw;
+            font-family: "Consolas", monospace;
+            font-size: 1.5vw;
+            color: #66ff66;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+        .debug-empty {
+            color: #999;
+            text-align: center;
+            padding: 1vh 0;
+        }
+        @media screen and (max-width: 1920px) {
+            body {
+                font-size: 3.5vw;
+            }
+            .video-card img {
+                height: 20vh;
+            }
+            .debug-header h3 {
+                font-size: 2.5vw;
+            }
+            .debug-toggle {
+                font-size: 3vw;
+            }
+            .debug-content {
+                font-size: 2vw;
+            }
+            .server-status {
+                font-size: 2.5vw;
+            }
+            .status-indicator {
+                width: 2vw;
+                height: 2vw;
+            }
+            .server-detail-header {
+                font-size: 2.5vw;
+            }
+            .server-detail-content {
+                font-size: 2vw;
+            }
+        }
+        @media screen and (min-width: 3840px) {
+            body {
+                font-size: 1.8vw;
+            }
+            .video-card img {
+                height: 15vh;
+            }
+            .debug-header h3 {
+                font-size: 1.5vw;
+            }
+            .debug-toggle {
+                font-size: 1.8vw;
+            }
+            .debug-content {
+                font-size: 1.2vw;
+            }
+            .server-status {
+                font-size: 1.5vw;
+            }
+            .status-indicator {
+                width: 1.2vw;
+                height: 1.2vw;
+            }
+            .server-detail-header {
+                font-size: 1.8vw;
+            }
+            .server-detail-content {
+                font-size: 1.2vw;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <div class="logo">豆瓣电影TV版</div>
+        <div class="nav">
+            <div class="nav-item" tabindex="0" data-type="hot">热映电影</div>
+            <div class="nav-item" tabindex="0" data-type="coming">即将上映</div>
+        </div>
+        <!-- 服务器状态展示 -->
+        <div class="server-status" tabindex="0" id="serverStatus">
+            <div class="status-indicator" id="statusIndicator"></div>
+            <span id="statusText">检测服务器状态中...</span>
+        </div>
+    </div>
+    <!-- ========== 新增：服务器状态详情面板 ========== -->
+    <div class="server-detail-panel" id="serverDetailPanel" tabindex="0">
+        <div class="server-detail-header">服务器状态原始数据 (/status)</div>
+        <div class="server-detail-content" id="serverDetailContent">
+            加载服务器状态数据中...
+        </div>
+    </div>
+    <!-- ========== 服务器状态详情面板结束 ========== -->
+    <div class="content">
+        <div class="title" id="contentTitle">广州热映电影</div>
+        <div class="video-grid" id="videoGrid">
+            <div class="loading">正在加载豆瓣电影数据...</div>
+        </div>
+    </div>
+    <!-- 调试数据面板 -->
+    <div class="debug-panel collapsed" id="debugPanel" tabindex="0">
+        <div class="debug-header" id="debugHeader">
+            <h3>代理接口返回数据 (/proxy)</h3>
+            <span class="debug-toggle" id="debugToggle">▼</span>
+        </div>
+        <div class="debug-content" id="debugContent">
+            <div class="debug-empty">暂无数据，请先加载电影信息</div>
+        </div>
+    </div>
+    <script>
+        // 全局变量
+        let focusableElements = [];
+        let currentFocusIndex = 0;
+        // 调试面板相关DOM
+        const debugPanel = document.getElementById('debugPanel');
+        const debugHeader = document.getElementById('debugHeader');
+        const debugToggle = document.getElementById('debugToggle');
+        const debugContent = document.getElementById('debugContent');
+        // 服务器状态相关DOM
+        const serverStatus = document.getElementById('serverStatus');
+        const statusIndicator = document.getElementById('statusIndicator');
+        const statusText = document.getElementById('statusText');
+        // 新增：服务器状态详情面板DOM
+        const serverDetailPanel = document.getElementById('serverDetailPanel');
+        const serverDetailContent = document.getElementById('serverDetailContent');
+        // 服务器状态数据
+        let serverStatusData = {};
+        // 调试面板切换折叠/展开
+        debugHeader.addEventListener('click', () => {
+            toggleDebugPanel();
+        });
+        // 调试面板焦点点击切换
+        debugPanel.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.keyCode === 13) {
+                toggleDebugPanel();
+            }
+        });
+        // 新增：服务器状态焦点操作（切换详情面板）
+        serverStatus.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.keyCode === 13) {
+                // 按确认键：刷新状态 + 切换详情面板显示/隐藏
+                checkServerStatus();
+                serverDetailPanel.classList.toggle('show');
+                // 切换后聚焦到详情面板
+                serverDetailPanel.focus();
+            }
+        });
+        // 新增：服务器详情面板焦点操作
+        serverDetailPanel.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.keyCode === 13) {
+                // 按确认键隐藏详情面板，焦点返回服务器状态
+                serverDetailPanel.classList.remove('show');
+                serverStatus.focus();
+            }
+        });
+        // 切换调试面板状态的函数
+        const toggleDebugPanel = () => {
+            debugPanel.classList.toggle('collapsed');
+            debugToggle.innerText = debugPanel.classList.contains('collapsed') ? '▼' : '▲';
+            debugPanel.focus();
+        };
+        // 检测服务器状态的函数（核心修改：专门渲染/status原始数据）
+        const checkServerStatus = async () => {
+            try {
+                statusText.innerText = '正在检测服务器...';
+                statusIndicator.className = 'status-indicator';
+                // 专门请求 /status 接口
+                const response = await fetch('/status', {
+                    method: 'GET',
+                    timeout: 5000
+                });
+                if (response.ok) {
+                    // 保存原始数据
+                    serverStatusData = await response.json();
+                    // 更新顶部简洁状态
+                    statusIndicator.className = 'status-indicator online';
+                    statusText.innerText = `服务器在线 (端口: ${serverStatusData.port})`;
+                    // 新增：渲染/status接口的原始数据到详情面板
+                    serverDetailContent.innerHTML = JSON.stringify(serverStatusData, null, 2);
+                } else {
+                    throw new Error(`服务器返回异常：${response.status}`);
+                }
+            } catch (error) {
+                console.error('检测服务器状态失败：', error);
+                serverStatusData = {
+                    code: 500,
+                    status: false,
+                    msg: error.message,
+                    checkTime: new Date().toLocaleString()
+                };
+                // 更新顶部简洁状态
+                statusIndicator.className = 'status-indicator offline';
+                statusText.innerText = '服务器离线';
+                // 渲染错误数据到详情面板
+                serverDetailContent.innerHTML = JSON.stringify(serverStatusData, null, 2);
+            }
+        };
+        // 渲染调试数据的函数（代理接口数据）
+        const renderDebugData = (data, isError = false) => {
+            let displayText = '';
+            if (isError) {
+                displayText = `❌ Proxy接口错误：\n${JSON.stringify(data, null, 2)}`;
+                debugContent.style.color = '#ff6666';
+            } else {
+                displayText = `✅ Proxy接口数据：\n${JSON.stringify(data, null, 2)}`;
+                debugContent.style.color = '#66ff66';
+            }
+            debugContent.innerHTML = displayText;
+            console.log('📝 Proxy接口原始数据：', data);
+        };
+        // 豆瓣电影接口请求函数
+        const getDoubanMovieData = (type = 'hot') => {
+            const videoGrid = document.getElementById('videoGrid');
+            const contentTitle = document.getElementById('contentTitle');
+            contentTitle.innerText = type === 'hot' ? '广州热映电影' : '即将上映电影';
+            videoGrid.innerHTML = `<div class="loading">正在加载${contentTitle.innerText}数据...</div>`;
+            const PROXY_API = '/proxy';
+            let doubanApiUrl = '';
+            if (type === 'hot') {
+                doubanApiUrl = 'https://movie.douban.com/j/search_subjects?type=movie&tag=热映&page_limit=20&page_start=0&location=广州';
+            } else {
+                doubanApiUrl = 'https://movie.douban.com/j/search_subjects?type=movie&tag=即将上映&page_limit=20&page_start=0';
+            }
+            const apiUrl = `${PROXY_API}?url=${encodeURIComponent(doubanApiUrl)}`;
+            fetch(apiUrl, {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+                timeout: 15000
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`请求错误：状态码 ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log('✅ 豆瓣电影数据加载成功：', data);
+                renderDebugData(data);
+                if (!data.subjects || data.subjects.length === 0) {
+                    videoGrid.innerHTML = '<div class="error">暂无相关电影数据</div>';
+                    return;
+                }
+                renderMovieCards(data.subjects, videoGrid);
+            })
+            .catch(error => {
+                console.error('加载失败：', error);
+                renderDebugData({
+                    message: error.message,
+                    stack: error.stack?.substring(0, 500),
+                    time: new Date().toLocaleString()
+                }, true);
+                videoGrid.innerHTML = `<div class="error">加载失败：${error.message}<br>请检查本地代理服务是否启动（端口8086）</div>`;
+            });
+        };
+        // 渲染电影卡片
+        const renderMovieCards = (movieList, container) => {
+            container.innerHTML = '';
+            movieList.forEach(movie => {
+                const {
+                    id: movieId,
+                    title = '未知电影',
+                    cover = 'https://img9.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd22575045742/pics/movie/default_small.png',
+                    rating = {}
+                } = movie;
+                const ratingScore = rating.average || '暂无评分';
+                const playUrl = `https://movie.douban.com/subject/${movieId}/`;
+                const card = document.createElement('div');
+                card.className = 'video-card';
+                card.tabIndex = 0;
+                card.dataset.id = movieId;
+                card.dataset.url = playUrl;
+                card.innerHTML = `
+                    <img src="${cover}" alt="${title}">
+                    <div class="video-title">${title}</div>
+                    <div class="rating">评分：${ratingScore}</div>
+                `;
+                card.addEventListener('click', () => {
+                    window.open(card.dataset.url, '_blank');
+                });
+                container.appendChild(card);
+            });
+            initFocusControl();
+        };
+        // 初始化焦点控制（新增服务器详情面板）
+        const initFocusControl = () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            // 收集所有可聚焦元素：服务器状态 → 服务器详情 → 导航 → 电影卡片 → 调试面板
+            const serverStatusEl = document.querySelectorAll('.server-status');
+            const serverDetailEl = document.querySelectorAll('.server-detail-panel');
+            const navItems = document.querySelectorAll('.nav-item');
+            const videoCards = document.querySelectorAll('.video-card');
+            const debugPanelEl = document.querySelectorAll('.debug-panel');
+            focusableElements = [
+                ...serverStatusEl,
+                ...serverDetailEl,
+                ...navItems,
+                ...videoCards,
+                ...debugPanelEl
+            ];
+            // 重置焦点索引
+            const activeNav = document.querySelector('.nav-item.focused');
+            if (activeNav) {
+                currentFocusIndex = [...focusableElements].indexOf(activeNav);
+            } else {
+                currentFocusIndex = 0;
+            }
+            // 移除所有元素的焦点样式
+            focusableElements.forEach(element => {
+                element.classList.remove('focused');
+            });
+            // 初始化焦点
+            if (focusableElements.length > 0) {
+                focusableElements[currentFocusIndex].classList.add('focused');
+                focusableElements[currentFocusIndex].focus();
+            }
+            document.addEventListener('keydown', handleKeyDown);
+        };
+        // 处理键盘/遥控器按键
+        const handleKeyDown = (e) => {
+            e.preventDefault();
+            if (focusableElements.length === 0) return;
+            focusableElements[currentFocusIndex].classList.remove('focused');
+            const key = e.key || e.keyCode;
+            switch(key) {
+                case 'ArrowRight':
+                case 39:
+                case 'ArrowDown':
+                case 40:
+                    currentFocusIndex = (currentFocusIndex + 1) % focusableElements.length;
+                    break;
+                case 'ArrowLeft':
+                case 37:
+                case 'ArrowUp':
+                case 38:
+                    currentFocusIndex = (currentFocusIndex - 1 + focusableElements.length) % focusableElements.length;
+                    break;
+                case 'Enter':
+                case 13:
+                    focusableElements[currentFocusIndex].click();
+                    break;
+                default:
+                    focusableElements[currentFocusIndex].classList.add('focused');
+                    return;
+            }
+            const newFocus = focusableElements[currentFocusIndex];
+            newFocus.classList.add('focused');
+            newFocus.focus();
+            newFocus.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+                inline: 'center'
+            });
+        };
+        // 导航项点击事件
+        const navItems = document.querySelectorAll('.nav-item');
+        navItems.forEach(item => {
+            item.addEventListener('click', () => {
+                document.querySelectorAll('.nav-item').forEach(nav => {
+                    nav.classList.remove('focused');
+                });
+                item.classList.add('focused');
+                getDoubanMovieData(item.dataset.type);
+            });
+        });
+        // 页面加载完成后执行
+        document.addEventListener('DOMContentLoaded', () => {
+            // 先检测服务器状态
+            checkServerStatus();
+            // 初始化焦点控制（包含所有新增元素）
+            focusableElements = [
+                ...document.querySelectorAll('.server-status'),
+                ...document.querySelectorAll('.server-detail-panel'),
+                ...document.querySelectorAll('.nav-item'),
+                ...document.querySelectorAll('.debug-panel')
+            ];
+            initFocusControl();
+            // 默认加载热映电影数据
+            getDoubanMovieData('hot');
+            // 定时刷新服务器状态（每10秒）
+            setInterval(checkServerStatus, 10000);
+        });
+    </script>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "dcs02",
+  "version": "1.1.0",
+  "description": "cs02",
+  "packageType": "app",
+  "appName": "电视cs",
+  "appPath": "index.html",
+  "keys": [
+    "MediaPlayPause",
+    "MediaPlay",
+    "MediaPause",
+    "MediaStop",
+    "MediaTrackPrevious",
+    "MediaTrackNext",
+    "MediaRewind",
+    "MediaFastForward"
+  ],
+  "serviceFile": "service/service.js"
+}