tttools/frontend/ticker.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>腾图滚动条</title>
    <style>
        /* 滚动条窗口：整行可拖动，透明背景 */
        * { box-sizing: border-box; }
        html, body {
            margin: 0;
            height: 100%;
            overflow: hidden;
            background: transparent;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            -webkit-user-select: none;
            user-select: none;
        }
        /* 容器：整行拖动窗口；默认半透明底，透明模式完全透明不遮挡内容 */
        .ticker {
            display: flex;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            border-radius: 8px;
            background: rgba(10, 12, 24, 0.72);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            --wails-draggable: drag;         /* 整行可拖动窗口 */
            cursor: move;
        }
        .ticker.transparent {
            background: transparent;         /* 背景透明，不遮挡下方内容 */
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); /* 文字加投影保证可读 */
        }
        /* 滚动视口：占满剩余宽度，超出部分隐藏（轨道动画在内部平移） */
        .ticker-viewport {
            flex: 1;
            min-width: 0;
            height: 100%;
            overflow: hidden;
        }
        /* 滚动轨道：内容复制两份实现无缝循环，动画时长由 JS 按速度计算 */
        .ticker-track {
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
            animation: ticker-scroll linear infinite;
            will-change: transform;
        }
        @keyframes ticker-scroll {
            from { transform: translateX(0); }
            to   { transform: translateX(-50%); } /* 内容两份，平移一半即循环 */
        }
        .ticker-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 0 18px;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }
        .ticker-item a {
            color: inherit;
            text-decoration: none;
            cursor: pointer;
            --wails-draggable: no-drag;      /* 链接可点击，不触发拖动 */
        }
        .ticker-item a:hover { text-decoration: underline; }
        .up { color: #ff5a5a; }              /* 红涨 */
        .down { color: #3ddc84; }            /* 绿跌 */
        .src { opacity: 0.55; font-size: 0.85em; } /* 新闻来源小标签 */
        /* 右侧控制按钮：阅读（TTS 朗读新闻标题）与关闭（停止滚动条） */
        .ticker-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
            padding: 0 8px;
            --wails-draggable: no-drag;  /* 按钮可点击，不触发拖动 */
        }
        .ticker-actions button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 22px;
            height: 22px;
            padding: 0 6px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.10);
            color: #fff;
            font-size: 13px;
            line-height: 1;
            cursor: pointer;
            transition: background 0.15s ease;
        }
        .ticker-actions button:hover { background: rgba(255, 255, 255, 0.22); }
        .ticker-actions button.is-active { background: rgba(255, 77, 77, 0.55); border-color: rgba(255, 77, 77, 0.8); }
        /* 新闻标题行当前被朗读：高亮 */
        .ticker-item.speaking { color: #ffe08a; text-shadow: 0 0 6px rgba(255, 224, 138, 0.6); }
    </style>
</head>
<body>
    <div class="ticker" id="ticker">
        <div class="ticker-viewport" id="viewport">
            <div class="ticker-track" id="track"></div>
        </div>
        <div class="ticker-actions" id="actions">
            <button id="btn-read" title="朗读新闻标题">读</button>
            <button id="btn-close" title="关闭滚动条">×</button>
        </div>
    </div>
<script type="module" src="/src/ticker.js"></script>
</body>
</html>