china365love 发表于 6 天前

[Python 原创] 全AI写的大屏播控程序已经可以使用（转换成html）

提供的基于 PyQt5 和 VLC 的 Python 桌面应用程序转换为 HTML 应用程序
是一个从桌面端到 Web 端的转变，技术栈完全不同。

以下是实现基本功能的 HTML、CSS 和 JavaScript 代码：
实现了一个简单的大屏播控系统的 HTML 版本，包含播放列表管理、播放控制、音量控制、模式切换等功能。
你可以将代码保存为 index.html 文件，然后在浏览器中打开查看效果。
不过要留意，此代码未涵盖原 Python 代码里的全部功能，例如扩展屏显示、任务栏隐藏等，因为在 Web 环境下这些功能较难实现。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大飞哥软件自习室-大屏播放软件</title>
    <style>
      body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background: linear-gradient(135deg, #0f2027, #2c5364);
            font-family: 'Segoe UI', sans-serif;
      }

      .title-bar {
            background: linear-gradient(45deg, #3a7bd5, #00d2ff);
            padding: 15px;
            text-align: center;
            border-bottom: 3px solid #2a82da;
      }

      .title-bar a {
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-decoration: none;
      }

      .main-container {
            display: flex;
            height: calc(100vh - 80px);
      }

      .control-panel {
            background: rgba(20, 30, 50, 0.9);
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
      }

      .layout-container {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
            padding: 20px;
            overflow: auto;
      }

      .layout-item {
            background: rgba(30, 40, 60, 0.9);
            border-radius: 8px;
            border: 2px solid #2a82da;
            padding: 15px;
            position: relative;
            min-width: 200px;
            min-height: 150px;
      }

      .resize-handle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 15px;
            height: 15px;
            background: linear-gradient(135deg, #2a82da, #00d2ff);
            cursor: se-resize;
      }

      .action-button {
            padding: 10px 20px;
            background: linear-gradient(45deg, #3a7bd5, #00d2ff);
            border: none;
            border-radius: 5px;
            color: white; /* 将按钮文字颜色设置为白色 */
            font-weight: bold;
            cursor: pointer;
            margin: 5px;
      }

      .status-bar {
            background: rgba(20, 30, 50, 0.9);
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #2a82da;
            margin-top: 10px;
            color: white; /* 将状态栏文字颜色设置为白色 */
      }

      /* 确保其他文字元素颜色为白色 */
      h3, label {
            color: white;
      }
    </style>
</head>

<body>
    <div class="title-bar">
      <a href="https://space.bilibili.com/286436365" target="_blank">大飞哥软件自习室-大屏播放软件</a>
    </div>
    <div class="main-container">
      <div class="control-panel">
            <button class="action-button">保存布局</button>
            <button class="action-button">加载布局</button>
            <button class="action-button">重置布局</button>
      </div>
      <div class="layout-container" id="layoutContainer">
            <!-- 初始布局模块 -->
            <div class="layout-item" data-type="playlist">
                <h3>播放列表</h3>
                <ul class="playlist" id="playlist"></ul>
                <div class="resize-handle"></div>
            </div>

            <div class="layout-item" data-type="controls">
                <h3>播放控制</h3>
                <div class="button-group">
                  <button class="action-button">播放/暂停</button>
                  <button class="action-button">上一个</button>
                  <button class="action-button">下一个</button>
                </div>
                <div class="resize-handle"></div>
            </div>

            <div class="layout-item" data-type="settings">
                <h3>系统设置</h3>
                <div>
                  <label>音量:</label>
                  <input type="range" id="volumeSlider" min="0" max="100" value="100">
                </div>
                <div class="resize-handle"></div>
            </div>
      </div>
    </div>

    <script>
      let isDragging = false;
      let dragStartX, dragStartY;
      let initialX, initialY;
      let resizeStartX, resizeStartY;
      let initialWidth, initialHeight;

      // 初始化布局
      function initializeLayout() {
            const layoutItems = document.querySelectorAll('.layout-item');
            layoutItems.forEach(item => {
                // 可拖动
                item.addEventListener('mousedown', startDrag);
                // 调整大小
                item.querySelector('.resize-handle').addEventListener('mousedown', startResize);
            });
      }

      // 开始拖动
      function startDrag(e) {
            e.preventDefault();
            isDragging = true;
            const target = e.target.closest('.layout-item');
            initialX = target.offsetLeft;
            initialY = target.offsetTop;
            dragStartX = e.clientX - initialX;
            dragStartY = e.clientY - initialY;
            target.style.cursor = 'grabbing';
            target.style.zIndex = 1000;

            // 保存原始布局顺序
            const layoutItems = Array.from(document.querySelectorAll('.layout-item'));
            const index = layoutItems.indexOf(target);
            document.getElementById('layoutContainer').appendChild(target);
      }

      // 拖动中
      function handleDrag(e) {
            if (!isDragging) return;
            const target = document.elementFromPoint(e.clientX, e.clientY).closest('.layout-item');
            const x = e.clientX - dragStartX;
            const y = e.clientY - dragStartY;
            target.style.left = `${x}px`;
            target.style.top = `${y}px`;
      }

      // 停止拖动
      function stopDrag() {
            isDragging = false;
            const layoutItems = document.querySelectorAll('.layout-item');
            layoutItems.forEach(item => {
                item.style.cursor = 'default';
                item.style.zIndex = '';
                item.removeAttribute('style');
            });
      }

      // 开始调整大小
      function startResize(e) {
            e.preventDefault();
            const handle = e.target;
            const item = handle.closest('.layout-item');
            initialWidth = parseFloat(item.style.width) || item.offsetWidth;
            initialHeight = parseFloat(item.style.height) || item.offsetHeight;
            resizeStartX = e.clientX;
            resizeStartY = e.clientY;
            item.style.cursor = 'se-resize';
            item.style.zIndex = 1000;
      }

      // 调整大小中
      function handleResize(e) {
            const item = document.elementFromPoint(e.clientX, e.clientY).closest('.layout-item');
            if (!item) return;

            const deltaX = e.clientX - resizeStartX;
            const deltaY = e.clientY - resizeStartY;
            const newWidth = initialWidth + deltaX;
            const newHeight = initialHeight + deltaY;

            item.style.width = `${Math.max(200, newWidth)}px`;
            item.style.height = `${Math.max(150, newHeight)}px`;
      }

      // 停止调整大小
      function stopResize() {
            const layoutItems = document.querySelectorAll('.layout-item');
            layoutItems.forEach(item => {
                item.style.cursor = 'default';
                item.style.zIndex = '';
            });
      }

      // 保存布局
      function saveLayout() {
            const layoutData = [];
            const layoutItems = document.querySelectorAll('.layout-item');
            layoutItems.forEach(item => {
                layoutData.push({
                  type: item.dataset.type,
                  left: parseFloat(item.style.left) || 0,
                  top: parseFloat(item.style.top) || 0,
                  width: parseFloat(item.style.width) || item.offsetWidth,
                  height: parseFloat(item.style.height) || item.offsetHeight
                });
            });
            localStorage.setItem('layout', JSON.stringify(layoutData));
            document.querySelector('.status-bar').textContent = '布局已保存';
      }

      // 加载布局
      function loadLayout() {
            const layoutData = JSON.parse(localStorage.getItem('layout'));
            if (!layoutData) return;

            const layoutContainer = document.getElementById('layoutContainer');
            layoutContainer.innerHTML = '';

            layoutData.forEach(data => {
                const item = createLayoutItem(data.type);
                item.style.left = `${data.left}px`;
                item.style.top = `${data.top}px`;
                item.style.width = `${data.width}px`;
                item.style.height = `${data.height}px`;
                layoutContainer.appendChild(item);
            });
            initializeLayout();
            document.querySelector('.status-bar').textContent = '布局已加载';
      }

      // 重置布局
      function resetLayout() {
            localStorage.removeItem('layout');
            location.reload();
            document.querySelector('.status-bar').textContent = '布局已重置';
      }

      // 创建布局模块
      function createLayoutItem(type) {
            const item = document.createElement('div');
            item.className = 'layout-item';
            item.dataset.type = type;

            switch (type) {
                case 'playlist':
                  item.innerHTML = `
                        <h3>播放列表</h3>
                        <ul class="playlist" id="playlist"></ul>
                        <div class="resize-handle"></div>
                  `;
                  break;
                case 'controls':
                  item.innerHTML = `
                        <h3>播放控制</h3>
                        <div class="button-group">
                            <button class="action-button">播放/暂停</button>
                            <button class="action-button">上一个</button>
                            <button class="action-button">下一个</button>
                        </div>
                        <div class="resize-handle"></div>
                  `;
                  break;
                case 'settings':
                  item.innerHTML = `
                        <h3>系统设置</h3>
                        <div>
                            <label>音量:</label>
                            <input type="range" id="volumeSlider" min="0" max="100" value="100">
                        </div>
                        <div class="resize-handle"></div>
                  `;
                  break;
            }

            return item;
      }

      // 初始化
      initializeLayout();
      window.addEventListener('mousemove', handleDrag);
      window.addEventListener('mouseup', stopDrag);
      window.addEventListener('mousemove', handleResize);
      window.addEventListener('mouseup', stopResize);

      // 其他功能函数...
      // 播放控制、音量设置等原有功能代码保持不变
    </script>
</body>

</html>   

linxiansen 发表于 6 天前

PYG20周年生日快乐！

乐活 发表于 5 天前

厉害啊，佩服

chchhau 发表于 5 天前

20周年生日快乐！

lanlan99 发表于 5 天前

学习加感谢分享！

wan_lei2008 发表于 4 天前

学习一下。。。

yeshengheng 发表于 3 天前

本帖最后由 yeshengheng 于 2025-4-2 11:50 编辑

下载了，没办法播放呀。1.02.0点播放没反应。3.0就是一个点鼠标玩的小程序。

页: [1]
查看完整版本: [Python 原创] 全AI写的大屏播控程序已经可以使用（转换成html）