@gogoqiu/tencent-http-server 0.0.3

package/public/mylog-chat.htm

@@ -0,0 +1,260 @@
+<!--
+登陆模式，长期设定本定storage，选择一个主机名
+    数据结构：
+   显示在线情况     
+-->
+<title>聊天</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<script src="/js/socket.io.min.js"></script>
+<script src="/js/encrypt.js"></script>
+<script src="/utils.js"></script>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+    }
+
+    #messages {
+        list-style-type: none;
+        height: 80%;
+        overflow-y: auto;
+        border: 2px solid #e2e8f0;
+        border-radius: 6px;
+        transition: border-color 0.3s ease;
+    }
+
+    #messages1 li {
+        padding: 8px;
+        margin-bottom: 2px;
+        background-color: #f3f3f3;
+    }
+
+    #form {
+        background: #000;
+        padding: 3px;
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+    }
+
+    #input {
+        border: none;
+        padding: 10px;
+        width: 90%;
+        margin-right: .5%;
+    }
+
+    #send {
+        width: 9%;
+        background: rgb(130, 224, 170);
+        border: none;
+        padding: 10px;
+    }
+
+    .row {
+        display: flex;
+        flex-direction: row;
+    }
+
+    div .created{
+        padding-left: 10px;
+    }
+
+    div .from{
+        padding-left: 10px;
+    }
+</style>
+<link rel="stylesheet" href="navbar.css">
+<div>
+    <div class="row">
+        <a href="/"><img id="icon" src="/img/back.svg"></img></a>
+        <img id="status" />
+        <select onchange="setHostname()"></select>
+    </div>
+    <ul id="messages" class="scrollable-list p-3 space-y-2"></ul>
+    <form id="form" action="">
+        <input id="input" autocomplete="off" /><button id="send">Send</button>
+    </form>
+</div>
+<script>
+        
+    function setHostname() {
+        //console.log(document.querySelector('select').value)
+        localStorage.setItem('hostname', document.querySelector('select').value)
+    }
+
+    function getHostname() {
+        return localStorage.getItem('hostname')
+    }
+/*
+    function fillselects() {
+        return new Promise((resolve, reject) => {
+            fetch('/hosts/dns').then(r => r.json()).then(r => {
+                if (r.retVal) {
+                    const option = document.createElement('option')
+                    option.value = "unknown"
+                    option.text = "unknown"
+                    document.querySelector('select').appendChild(option)
+                    r.data.forEach(e => {
+                        const option = document.createElement('option')
+                        option.value = e.hostname
+                        option.text = e.hostname
+                        document.querySelector('select').appendChild(option)
+                    })
+                    resolve(null)
+                } else {
+                    reject(r.msg)
+                }
+            })
+        })
+    }
+    */
+
+    let firstId = -1
+    window.onload = function () {        
+        
+        const socket = io();
+
+        const form = document.getElementById('form');
+        const input = document.getElementById('input');
+        const messages = document.getElementById('messages');
+        const status = document.getElementById("status")
+        
+        form.addEventListener('submit', function (e) {
+            e.preventDefault();
+            //const user = document.querySelector('select').value;
+            if (input.value) {
+                socket.emit('mylog message', { method:"set", hostname: document.querySelector('select').value, message: input.value });
+                input.value = '';
+            }
+        });
+
+        /*
+        "'l;llljd", 发送异常了
+        */
+        socket.on('mylog message', function (msg) {          
+            //console.log(msg);
+            //return              
+            if( msg.method == "set" ){
+                msg.result.forEach( ( row )=>{                    
+                    const item = document.createElement('li');
+                    item.className = ('p-3 bg-blue-50 rounded-md border border-blue-100');
+                    item.innerHTML = buildItem( row );
+                    messages.appendChild(item);
+                })                //window.scrollTo(0, document.body.scrollHeight);
+                messages.scrollTop = messages.scrollHeight;
+            }else if( msg.method == "get" ){
+                
+                msg.result.forEach( ( row )=>{                    
+                    const item = document.createElement('li');
+                    item.className = ('p-3 bg-blue-50 rounded-md border border-blue-100');
+                    item.innerHTML = buildItem( row );
+                    messages.insertBefore(item, document.querySelector("li"));
+                })                
+                if( firstId==-1 )
+                    messages.scrollTop = messages.scrollHeight + 50;
+                else
+                    messages.scrollTop = 150;
+                if( msg.result.length ){ 
+                    // 有bug, 可能会回转到3,4等,反复获取几条
+                    firstId = msg.result[msg.result.length-1].id
+                }
+            }            
+        });
+
+        socket.on('connect', function () {
+            //socket.emit('add user', username);
+            //document.getElementById("status").src = "/img/online.svg"
+            status.classList.remove('offline')
+            status.classList.add('online');
+            fillselects().then(() => {
+                if (localStorage.getItem('hostname')) {
+                    document.querySelector('select').value = localStorage.getItem('hostname')
+                }
+                loadprev( socket )
+            })            
+        });
+
+        socket.on('disconnect', function () {
+            //log('you have been disconnected');
+            //document.getElementById("status").src = "/img/offline.svg"
+            status.classList.remove('online')
+            status.classList.add('offline');
+        });
+
+        checkScrollPosition()
+
+        // 监听滚动事件
+        messages.addEventListener('wheel', function(event) {
+            // 判断滚动方向
+            const isScrollingDown = event.deltaY > 0;
+            //scrollDirection.textContent = isScrollingDown ? '向下滚动' : '向上滚动';
+            //scrollDirection.className = `font-medium ${isScrollingDown ? 'text-green-600' : 'text-red-600'}`;
+            
+            // 检查是否滚动到顶部或底部（使用setTimeout确保在滚动完成后检测）
+            setTimeout(checkScrollPosition, 10);
+        });
+        
+        // 也监听scroll事件，确保在所有滚动方式下都能检测（如拖动滚动条）
+        messages.addEventListener('scroll', function() {
+            checkScrollPosition();
+        });
+        
+        function buildItem( row ){
+            return `<div class="item" id="${row.id}">
+                <div class="row">                    
+                    <div class="time">${row.created}</div>
+                    <div class="from">${row.from}</div>
+                </div>
+                <div class="message">${row.message}</div>
+            </div>`
+        }
+
+        function loadprev( ){
+            const hostname = document.querySelector('select').value
+            if( hostname!=="unknow"){
+                socket.emit('chat message', { method:"get", hostname: hostname, numWant: 10, id:firstId });
+            }
+        }
+
+        // 检查滚动位置的函数
+        // "messages.scrollTop为什么总是0"
+        function checkScrollPosition() {
+
+            // 清除之前的状态类
+            messages.classList.remove('scrolled-top', 'scrolled-bottom');
+            
+            // 滚动元素的属性
+            const scrollTop = messages.scrollTop; // 已滚动的顶部距离
+            const scrollHeight = messages.scrollHeight; // 内容总高度
+            const clientHeight = messages.clientHeight; // 可见区域高度
+            const isAtTop = scrollTop <= 1; // 允许1px误差
+            const isAtBottom = (scrollTop + clientHeight) >= (scrollHeight - 1); // 允许1px误差
+            
+            // 更新状态显示
+            
+            if (isAtTop && isAtBottom) {
+                console.log("内容不足以滚动的情况")
+                //scrollStatus.textContent = '内容未超出可视区域';
+                //scrollStatus.className = 'font-medium text-purple-600';
+                //hideEdgeIndicator();
+            } else if (isAtTop) {
+                console.log('已滚动到顶部');
+                //scrollStatus.className = 'font-medium text-blue-600';
+                //messages.classList.add('scrolled-top');
+                //showEdgeIndicator('已滚动到顶部', 'blue-100', 'blue-600');
+                loadprev();
+            } else if (isAtBottom) {
+                console.log('已滚动到底部');
+                //scrollStatus.className = 'font-medium text-green-600';
+                //messages.classList.add('scrolled-bottom');
+                //showEdgeIndicator('已滚动到底部', 'green-100', 'green-600');
+            } else {
+                console.log('正常位置');
+                //scrollStatus.className = 'font-medium text-gray-800';
+                //hideEdgeIndicator();
+            }
+        }
+    }
+
+    
+</script>

package/public/mylog3.html

@@ -0,0 +1,245 @@
+<title>
+    mylog3匹配
+</title>
+<!--script src="socket.io/client-dist/socket.io.min.js"></script-->
+<!--
+"安装了socket.io, 如何在页面里引用node_modules/socket.io/client-dist/socket.io.min.js这个文件"
+HTML 在 public 文件夹，node_modules 在根目录
+-->
+<!--script src="../node_modules/socket.io/client-dist/socket.io.min.js"></script-->
+<!--script src="https://cdn.tailwindcss.com"></script-->
+<script src="/js/socket.io.min.js"></script>
+<script src="/js/encrypt.js"></script>
+<script src="/utils.js"></script>
+<style>
+    #mylog {
+        width: 50%;
+        height: 50%;
+    }
+
+    .board {
+        border: 1px solid black;
+        margin: 5px;
+        padding: 5px;
+        padding-left: 10px;
+        padding-right: 10px;
+        border-radius: 3px;
+        width: fit-content;
+    }
+
+    .platform-radio-group {
+        display: flex;
+        gap: 20px;
+        flex-wrap: wrap;
+    }
+
+    .platform-option {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        cursor: pointer;
+        padding: 10px 15px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        min-width: 200px;
+        transition: all 0.2s ease;
+    }
+
+    .platform-option:has(input:checked) {
+        border-color: #42b983;
+        background-color: rgba(66, 185, 131, 0.1);
+    }
+
+    .platform-option:hover {
+        border-color: #42b983;
+    }
+
+    .platform-name {
+        font-weight: 500;
+        color: #333;
+    }
+
+    .platform-desc {
+        font-size: 12px;
+        color: #666;
+    }
+
+    .platform-option input {
+        align-self: flex-start;
+        margin-top: 2px;
+    }
+
+    #send {
+        width: 100px;
+        height: 50px;
+    }
+</style>
+<link rel="stylesheet" href="navbar.css">
+<body>
+    <div>
+        <div class="board" style="display: flex;">
+            <div>
+                <a href="/"><img id="icon" class="back imgbutton"></img></a>
+            </div>
+            <div>
+                <img id="status" class="offline imgbutton" />
+            </div>
+            <div>
+                <h1>测试http/ws两种模式下的mylog的上传</h1>
+            </div>
+            <div>
+                <label>from</label>
+                <select id="from"></select>
+            </div>
+            <div>
+                <label>加密字符</label>
+                <input id="encKey" />
+            </div>
+        </div>
+        <div>
+            <div class="platform-radio-group">
+                <label class="platform-option">
+                    <input type="radio" name="uploadPlatform" value="http" checked>
+                    <span class="platform-name">HTTP</span>
+                    <span class="platform-desc">使用HTTP传输</span>
+                </label>
+                <label class="platform-option">
+                    <input type="radio" name="uploadPlatform" value="ws">
+                    <span class="platform-name">Websocket</span>
+                    <span class="platform-desc">使用Websocket传输</span>
+                </label>
+            </div>
+        </div>
+    </div>
+    <div>
+        <div>
+            <textarea id="mylog" placeholder="write something..."></textarea>
+        </div>
+        <div>
+            <button id="send">Send</button>
+        </div>
+    </div>
+</body>
+<script>
+    let socket;
+    const status = document.getElementById("status")
+    window.onload = function () { 
+        socket = io();
+        socket.on('connect', function () {
+            status.classList.remove('offline')
+            status.classList.add('online');
+            console.log('connect');
+            fillselects(false).then(() => {                
+            })
+        })
+        socket.on('mylog message', function (r) {
+            console.log(r);
+            if (r[r.length-1].retVal) {
+
+            }
+        })
+        socket.on('disconnect', function (reason) {
+            status.classList.remove('online')
+            status.classList.add('offline');
+            console.log(reason);
+        });
+    }
+
+    document.querySelector("#send").onclick = function () {
+        /*
+        document.getElementsByName("uploadPlatform")
+        console.log(document.getElementsByName("uploadPlatform")[0].value)
+        console.log(document.getElementsByName("uploadPlatform")[1].value)
+        */
+        const selectedRadio = document.querySelector('input[name="uploadPlatform"]:checked');
+
+        if (selectedRadio) {
+            // 获取选中的值（注意：你的HTML中缺少value属性，需要添加）
+            const selectedValue = selectedRadio.value;
+            console.log("选中的传输方式是：", selectedValue);
+
+            // 也可以通过相邻元素获取显示的名称
+            const platformName = selectedRadio.nextElementSibling.textContent;
+            console.log("选中的平台名称：", platformName);
+            
+        } else {
+            console.log("没有选中任何传输方式");
+        }
+        let mylog = document.getElementById('mylog')
+        if( mylog.value=="" ){
+            alert("请输入要保存的日志")
+            return
+        }
+        if( selectedRadio.value =="http" ){
+            post_http()
+        }else if( selectedRadio.value =="ws" ){
+            post_ws()
+        }
+    }
+
+    function post_ws() { 
+        let mylog = document.getElementById('mylog')
+        if( !prepost_mylog() || !mylog.value ){
+            alert("Please input something")
+            return 
+        }
+        const value = encryptWithKeyword(mylog.value, getEncKey())
+        socket.emit('mylog message', 
+            { command: "set", 
+                from: getFromValue(),
+                content: value, source: 2, editor: 2 });
+    }
+
+    function post_http() { 
+        let mylog = document.getElementById('mylog')
+        if( !prepost_mylog() || !mylog.value ){
+            alert("Please input something")
+            return 
+        }
+        const fd = new FormData
+        fd.append("command", "set")
+        fd.append("from", getFromValue())
+        const value = encryptWithKeyword(mylog.value, getEncKey())
+        fd.append("content", value)
+        fd.append("source", 2)
+        fd.append("editor", 2)
+        fetch("/mylog/data", { method: "post", body: fd })
+            .then(r => r.json()).then((r) => {
+            if (r[r.length-1].retVal) {
+
+            } else {
+                console.log(r[r.length-1].msg)
+            }
+        })
+    }
+    /*
+    render mark-down
+    */
+    function markdown() {
+        let mylog = document.getElementById('mylog')
+        const fd = new FormData
+        fd.append("log", mylog.value)
+        fetch("/mylog/markdown", { method: "post", body: fd })
+        .then(r => r.json()).then((r) => {
+            if (r.retVal) {
+
+            } else {
+
+            }
+        })
+    }
+
+    function article() {
+        let mylog = document.getElementById('mylog')
+        const fd = new FormData
+        fd.append("log", mylog.value)
+        fetch("/mylog/article", { method: "post", body: fd })
+        .then(r => r.json()).then((r) => {
+            if (r.retVal) {
+
+            } else {
+
+            }
+        })
+    }
+</script>

package/public/navbar.css

@@ -0,0 +1,17 @@
+.imgbutton{ 
+    width: 48px;
+    height: 48px;
+}
+.back{        
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNzUzNjkwMjk2Njk4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIzNTkiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCI+PHBhdGggZD0iTTUxNS41ODIxNjIgMTAyMy45OTQzNzFBNTE2LjM0MzExNiA1MTYuMzQzMTE2IDAgMCAxIDIwNC45NTc1MTMgOTIxLjY0Njg3NWE1MDIuMDE0NDY3IDUwMi4wMTQ0NjcgMCAwIDEtMTEzLjYwNTcyLTEyMi44MTY5OTVBNDg2LjY2MjM0MiA0ODYuNjYyMzQyIDAgMCAxIDIwLjczMjAyIDY0Mi4yMzgyMTJhNTExLjczNzQ3OSA1MTEuNzM3NDc5IDAgMCAxIDk5MC43MjM3NTktMjU5Ljk2MjYzOSA0MC45Mzg5OTggNDAuOTM4OTk4IDAgMCAxLTMuNTgyMTYyIDI5LjE2OTAzNiAzNi4zMzMzNjEgMzYuMzMzMzYxIDAgMCAxLTIzLjUzOTkyNCAxNy4zOTkwNzQgMzYuODQ1MDk4IDM2Ljg0NTA5OCAwIDAgMS0yOS4xNjkwMzYtMy41ODIxNjIgMzguODkyMDQ4IDM4Ljg5MjA0OCAwIDAgMS0xOC40MjI1NS0yMy41Mzk5MjQgNDM2LjAwMDMzMiA0MzYuMDAwMzMyIDAgMCAwLTQyMC4xMzY0Ny0zMjQuOTUzMjk5IDQ0Ni4yMzUwODEgNDQ2LjIzNTA4MSAwIDAgMC0xMTEuMDQ3MDMzIDE0LjMyODY0OSA0MzQuOTc2ODU3IDQzNC45NzY4NTcgMCAxIDAgNTM4Ljg1OTU2NSA0OTcuNDA4ODMgMzcuODY4NTczIDM3Ljg2ODU3MyAwIDAgMSAzNy4zNTY4MzYtMzIuMjM5NDYyaDYuNjUyNTg4YTM5LjkxNTUyMyAzOS45MTU1MjMgMCAwIDEgMjUuMDc1MTM2IDE1Ljg2Mzg2MiAzOC4zODAzMTEgMzguMzgwMzExIDAgMCAxIDYuMTQwODUgMjguNjU3Mjk5IDUxMS43Mzc0NzkgNTExLjczNzQ3OSAwIDAgMS0zNzQuNTkxODM1IDQwNS4yOTYwODMgNDYwLjU2MzczMSA0NjAuNTYzNzMxIDAgMCAxLTEyOS40Njk1ODIgMTcuOTEwODEyeiIgZmlsbD0iIzAwRTJGRiIgcC1pZD0iMjM2MCI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNzc1LjgwMTY5NGEzNS44MjE2MjQgMzUuODIxNjI0IDAgMCAxLTI3LjEyMjA4Ni0xMS43Njk5NjJsLTIyNS4xNjQ0OTEtMjI0LjY1Mjc1M2EzOC44OTIwNDggMzguODkyMDQ4IDAgMCAxIDAtNTQuMjQ0MTczbDIyNS4xNjQ0OTEtMjI0LjY1Mjc1M2EzOS45MTU1MjMgMzkuOTE1NTIzIDAgMCAxIDI3LjEyMjA4Ni0xMS43Njk5NjIgMzcuODY4NTczIDM3Ljg2ODU3MyAwIDAgMSAyNy4xMjIwODYgMTEuNzY5OTYyIDM5LjkxNTUyMyAzOS45MTU1MjMgMCAwIDEgMTEuNzY5OTYyIDI3LjEyMjA4NiAzNS44MjE2MjQgMzUuODIxNjI0IDAgMCAxLTExLjc2OTk2MiAyNy4xMjIwODZsLTE1OC42Mzg2MTggMTU4LjYzODYxOWgzNTguMjE2MjM1YTM4Ljg5MjA0OCAzOC44OTIwNDggMCAxIDEgMCA3Ny4yNzIzNTloLTM1OC4yMTYyMzVsMTU5LjE1MDM1NiAxNTkuMTUwMzU2YTM4Ljg5MjA0OCAzOC44OTIwNDggMCAwIDEgMTEuNzY5OTYyIDI3LjEyMjA4NiAzNy44Njg1NzMgMzcuODY4NTczIDAgMCAxLTExLjc2OTk2MiAyNy4xMjIwODcgMzYuODQ1MDk4IDM2Ljg0NTA5OCAwIDAgMS0yNy42MzM4MjQgMTEuNzY5OTYyeiIgZmlsbD0iIzAwRTJGRiIgcC1pZD0iMjM2MSI+PC9wYXRoPjwvc3ZnPg==");
+}
+.online{
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNzUzNTkxMDgxMTQ3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEyNzgiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCI+PHBhdGggZD0iTTkzNi4zNDU2IDQzLjA0ODk2SDg3LjY5NTM2Yy00NC42NDY0IDAtODAuODU1MDQgMzguMDEwODgtODAuODU1MDQgODQuODI4MTZ2NTMyLjAyOTQ0YzAgNDYuODk5MiAzNi4yMDg2NCA4NC44NjkxMiA4MC44NTUwNCA4NC44NjkxMmgyODguMDMwNzJ2OTcuOTc2MzJIMzE4LjY2ODh2NjQuMjY2MjRoLTczLjcyOHY4Mi43ODAxNmg1MzQuMTE4NHYtODIuNzgwMTZoLTczLjY0NjA4di02NC4yNjYyNGgtNTcuMDk4MjR2LTk3Ljk3NjMyaDI4OC4wMzA3MmM0NC42NDY0IDAgODAuODU1MDQtMzguMDEwODggODAuODU1MDQtODQuODY5MTJWMTI3Ljg3NzEyYzAtNDYuODE3MjgtMzYuMjA4NjQtODQuODI4MTYtODAuODU1MDQtODQuODI4MTZ6IG0tNy41MzY2NCA2MTUuODMzNkg5NS4yMzJWMTI4Ljk0MjA4aDgzMy41NzY5NnY1MjkuOTQwNDh6IiBmaWxsPSIjMkIzQjk1IiBwLWlkPSIxMjc5Ij48L3BhdGg+PHBhdGggZD0iTTcxNS4zNjY0IDI2OC4wODMybC01NC4zOTQ4OC01NC4zOTQ4OC0xOTguMTY0NDggMTk4LjE2NDQ4TDM2My4xMTA0IDMxMi4xMTUyIDMwOC43MTU1MiAzNjYuNTEwMDhsMTU0LjkxMDcyIDE1NC45MTA3MiA1NC4zNTM5Mi01NC4zNTM5Mi0wLjgxOTItMC44NjAxNnoiIGZpbGw9IiMyQjNCOTUiIHAtaWQ9IjEyODAiPjwvcGF0aD48L3N2Zz4=");
+}
+.offline{ 
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNzUzNTkxMDQ0MzM2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjExMTUiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCI+PHBhdGggZD0iTTkzMi45MDQ5NiA2OC4xMTY0OEg4NC4yNTQ3MmMtNDQuNjQ2NCAwLTgwLjg1NTA0IDM4LjAxMDg4LTgwLjg1NTA0IDg0LjgyODE2djUzMi4wMjk0NGMwIDQ2Ljg5OTIgMzYuMjA4NjQgODQuODY5MTIgODAuODU1MDQgODQuODY5MTJoMjg4LjAzMDcydjk3Ljk3NjMySDMxNS4yMjgxNnY2NC4yNjYyNGgtNzMuNzI4djgyLjc4MDE2aDUzNC4wNzc0NHYtODIuNzgwMTZoLTczLjY0NjA4di02NC4yNjYyNGgtNTcuMDk4MjR2LTk3Ljk3NjMyaDI4OC4wMzA3MmM0NC42NDY0IDAgODAuODU1MDQtMzguMDEwODggODAuODU1MDQtODQuODY5MTJWMTUyLjk0NDY0YzAuMDQwOTYtNDYuODE3MjgtMzYuMTY3NjgtODQuODI4MTYtODAuODE0MDgtODQuODI4MTZ6IG0tNy41MzY2NCA2MTUuODMzNkg5MS43OTEzNlYxNTQuMDUwNTZoODMzLjU3Njk2djUyOS44OTk1MnoiIGZpbGw9IiNmZjAwMDAiIHAtaWQ9IjExMTYiPjwvcGF0aD48cGF0aCBkPSJNNjcwLjgwMTkyIDI4Mi41ODMwNGwtNTMuNjE2NjQtNTQuMzEyOTYtMTA4LjU4NDk2IDExMC4wNTk1Mi0xMDguNjI1OTItMTEwLjA1OTUyLTUzLjYxNjY0IDU0LjMxMjk2IDEwOC42MjU5MiAxMTAuMDU5NTItMTA4LjYyNTkyIDExMC4xMDA0OEwzOTkuOTc0NCA1NTcuMDU2bDEwOC42MjU5Mi0xMTAuMDU5NTIgMTA4LjU4NDk2IDExMC4wNTk1MiA1My42MTY2NC01NC4zMTI5Ni0xMDguNjI1OTItMTEwLjEwMDQ4eiIgZmlsbD0iI2ZmMDAwMCIgcC1pZD0iMTExNyI+PC9wYXRoPjwvc3ZnPg==");
+}
+.options{
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB0PSIxNzUzOTQxMjIyMDAyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijk2MzMiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCI+PHBhdGggZD0iTTI0My43MTIgNTQxLjU5NFY4Ni40MjZjMC0xNi45NDgtMTMuNzczLTMwLjcyLTMwLjcyLTMwLjcycy0zMC43MiAxMy43NzItMzAuNzIgMzAuNzJ2NDU1LjIxOUMxMTcuODYyIDU1NS43NzYgNjkuNTMgNjEzLjIyMiA2OS41MyA2ODEuNzc5czQ4LjMzMiAxMjYuMDAzIDExMi43NDIgMTQwLjEzNXYxMDcuNzI0YzAgMTYuOTQ4IDEzLjc3MyAzMC43MiAzMC43MiAzMC43MnMzMC43Mi0xMy43NzIgMzAuNzItMzAuNzJWODIxLjkxNGM2NC40MS0xNC4xMzIgMTEyLjc0Mi03MS41NzggMTEyLjc0Mi0xNDAuMTM1IDAtNjguNjA4LTQ4LjM4NC0xMjYuMDU0LTExMi43NDItMTQwLjE4NXogbS0zMC43MiAyMjIuMTU2Yy00NS4yMSAwLTgyLjAyMi0zNi44MTItODIuMDIyLTgyLjAyMnMzNi44MTItODIuMDIyIDgyLjAyMi04Mi4wMjIgODIuMDIyIDM2LjgxMiA4Mi4wMjIgODIuMDIyLTM2LjgxMiA4Mi4wMjItODIuMDIyIDgyLjAyMnogbTcyOC4wMTMtODIuMDIyYzAtNjguNTU3LTQ4LjMzMy0xMjYuMDAzLTExMi43NDMtMTQwLjEzNFY4Ni40MjZjMC0xNi45NDgtMTMuNzcyLTMwLjcyLTMwLjcyLTMwLjcycy0zMC43MiAxMy43NzItMzAuNzIgMzAuNzJ2NDU1LjIxOWMtNjQuNDEgMTQuMTMxLTExMi43NDIgNzEuNTc3LTExMi43NDIgMTQwLjEzNHM0OC4zMzMgMTI2LjAwMyAxMTIuNzQyIDE0MC4xMzV2MTA3LjcyNGMwIDE2Ljk0OCAxMy43NzMgMzAuNzIgMzAuNzIgMzAuNzJzMzAuNzItMTMuNzcyIDMwLjcyLTMwLjcyVjgyMS45MTRjNjQuNDEtMTQuMTgzIDExMi43NDMtNzEuNjMgMTEyLjc0My0xNDAuMTg2ek03OTcuNTQyIDc2My43NWMtNDUuMjEgMC04Mi4wMjItMzYuODEyLTgyLjAyMi04Mi4wMjJzMzYuODEzLTgyLjAyMiA4Mi4wMjItODIuMDIyIDgyLjAyMyAzNi44MTIgODIuMDIzIDgyLjAyMi0zNi44MTMgODIuMDIyLTgyLjAyMyA4Mi4wMjJ6TTUwOC44MjYgNDI4LjIzN2MtMTYuOTQ4IDAtMzAuNzIgMTMuNzczLTMwLjcyIDMwLjcydjQ3MC42M2MwIDE2Ljk0NyAxMy43NzIgMzAuNzIgMzAuNzIgMzAuNzJzMzAuNzItMTMuNzczIDMwLjcyLTMwLjcydi00NzAuNjNjMC0xNi45NDctMTMuNzIyLTMwLjcyLTMwLjcyLTMwLjcyek01MDguODI2IDIzNi43NDljLTE2Ljk0OCAwLTMwLjcyLTEzLjc3My0zMC43Mi0zMC43MlY4Ni40MjZjMC0xNi45NDggMTMuNzcyLTMwLjcyIDMwLjcyLTMwLjcyczMwLjcyIDEzLjc3MiAzMC43MiAzMC43MnYxMTkuNjAzYzAgMTYuOTQ3LTEzLjcyMiAzMC43Mi0zMC43MiAzMC43MnoiIGZpbGw9IiM0MjQyNDIiIHAtaWQ9Ijk2MzQiPjwvcGF0aD48cGF0aCBkPSJNNTA4LjgyNiA0NzcuNjk2Yy03OS4xMDQgMC0xNDMuNDYzLTY0LjM1OC0xNDMuNDYzLTE0My40NjJTNDI5LjcyMiAxOTAuNzcgNTA4LjgyNiAxOTAuNzdzMTQzLjQ2MiA2NC4zNTkgMTQzLjQ2MiAxNDMuNDYzLTY0LjM1OCAxNDMuNDYyLTE0My40NjIgMTQzLjQ2MnogbTAtMjI1LjQ4NWMtNDUuMjEgMC04Mi4wMjMgMzYuODEzLTgyLjAyMyA4Mi4wMjNzMzYuODEzIDgyLjAyMiA4Mi4wMjMgODIuMDIyIDgyLjAyMi0zNi44MTMgODIuMDIyLTgyLjAyMi0zNi43NjItODIuMDIzLTgyLjAyMi04Mi4wMjN6IiBmaWxsPSIjRjhCNjJEIiBwLWlkPSI5NjM1Ij48L3BhdGg+PC9zdmc+');
+	background-size: contain;
+}

package/public/readme.txt

@@ -0,0 +1,3 @@
+
+可以开发整个站点的，如vue项目，然后放置到此目录
+实现page.html与main.ts，静态动态分离

package/public/scroll.htm

@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UL滚动到顶/底检测</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <style>
+        .scrollable-list {
+            height: 220px;
+            overflow-y: auto;
+            border: 2px solid #e2e8f0;
+            border-radius: 6px;
+            transition: border-color 0.3s ease;
+        }
+        .scrollable-list.scrolled-top {
+            border-color: #3b82f6;
+        }
+        .scrollable-list.scrolled-bottom {
+            border-color: #10b981;
+        }
+        .status-indicator {
+            transition: all 0.3s ease;
+        }
+    </style>
+</head>
+<body class="p-8 bg-gray-50 min-h-screen">
+    <div class="max-w-md mx-auto bg-white p-6 rounded-xl shadow-lg">
+        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
+            <i class="fa fa-list-ul mr-2 text-blue-500"></i>滚动检测列表
+        </h3>
+        
+        <ul id="scrollList" class="scrollable-list p-3 space-y-2">
+            <li class="p-3 bg-blue-50 rounded-md border border-blue-100">列表项 1</li>
+            <li class="p-3 bg-blue-50 rounded-md border border-blue-100">列表项 2</li>
+            <li class="p-3 bg-blue-50 rounded-md border border-blue-100">列表项 3</li>
+            <li class="p-3 bg-blue-50 rounded-md border border-blue-100">列表项 4</li>
+            <li class="p-3 bg-blue-50 rounded-md border border-blue-100">列表项 5</li>
+            <li class="p-3 bg-blue-50 rounded-md border border-blue-100">列表项 6</li>
+            <li class="p-3 bg-blue-50 rounded-md border border-blue-100">列表项 7</li>
+            <li class="p-3 bg-blue-50 rounded-md border border-blue-100">列表项 8</li>
+            <li class="p-3 bg-blue-50 rounded-md border border-blue-100">列表项 9</li>
+            <li class="p-3 bg-blue-50 rounded-md border border-blue-100">列表项 10</li>
+            <li class="p-3 bg-blue-50 rounded-md border border-blue-100">列表项 11</li>
+            <li class="p-3 bg-blue-50 rounded-md border border-blue-100">列表项 12</li>
+        </ul>
+        
+        <div class="mt-4 p-4 bg-gray-50 rounded-lg">
+            <div class="flex justify-between items-center mb-2">
+                <span class="text-gray-600">滚动方向：</span>
+                <span id="scrollDirection" class="font-medium text-gray-800">未滚动</span>
+            </div>
+            <div class="flex justify-between items-center">
+                <span class="text-gray-600">滚动状态：</span>
+                <span id="scrollStatus" class="font-medium text-gray-800">正常位置</span>
+            </div>
+            <div id="edgeIndicator" class="mt-3 text-center status-indicator py-2 rounded hidden">
+                <i class="fa fa-info-circle mr-1"></i>
+                <span id="edgeText"></span>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // 获取元素引用
+        const scrollList = document.getElementById('scrollList');
+        const scrollDirection = document.getElementById('scrollDirection');
+        const scrollStatus = document.getElementById('scrollStatus');
+        const edgeIndicator = document.getElementById('edgeIndicator');
+        const edgeText = document.getElementById('edgeText');
+        
+        // 监听滚动事件
+        scrollList.addEventListener('wheel', function(event) {
+            // 判断滚动方向
+            const isScrollingDown = event.deltaY > 0;
+            scrollDirection.textContent = isScrollingDown ? '向下滚动' : '向上滚动';
+            scrollDirection.className = `font-medium ${isScrollingDown ? 'text-green-600' : 'text-red-600'}`;
+            
+            // 检查是否滚动到顶部或底部（使用setTimeout确保在滚动完成后检测）
+            setTimeout(checkScrollPosition, 10);
+        });
+        
+        // 也监听scroll事件，确保在所有滚动方式下都能检测（如拖动滚动条）
+        scrollList.addEventListener('scroll', function() {
+            checkScrollPosition();
+        });
+        
+        // 检查滚动位置的函数
+        function checkScrollPosition() {
+            // 清除之前的状态类
+            scrollList.classList.remove('scrolled-top', 'scrolled-bottom');
+            
+            // 滚动元素的属性
+            const scrollTop = scrollList.scrollTop; // 已滚动的顶部距离
+            const scrollHeight = scrollList.scrollHeight; // 内容总高度
+            const clientHeight = scrollList.clientHeight; // 可见区域高度
+            const isAtTop = scrollTop <= 1; // 允许1px误差
+            const isAtBottom = (scrollTop + clientHeight) >= (scrollHeight - 1); // 允许1px误差
+            
+            // 更新状态显示
+            if (isAtTop && isAtBottom) {
+                // 内容不足以滚动的情况
+                scrollStatus.textContent = '内容未超出可视区域';
+                scrollStatus.className = 'font-medium text-purple-600';
+                hideEdgeIndicator();
+            } else if (isAtTop) {
+                scrollStatus.textContent = '已滚动到顶部';
+                scrollStatus.className = 'font-medium text-blue-600';
+                scrollList.classList.add('scrolled-top');
+                showEdgeIndicator('已滚动到顶部', 'blue-100', 'blue-600');
+            } else if (isAtBottom) {
+                scrollStatus.textContent = '已滚动到底部';
+                scrollStatus.className = 'font-medium text-green-600';
+                scrollList.classList.add('scrolled-bottom');
+                showEdgeIndicator('已滚动到底部', 'green-100', 'green-600');
+            } else {
+                scrollStatus.textContent = '正常位置';
+                scrollStatus.className = 'font-medium text-gray-800';
+                hideEdgeIndicator();
+            }
+        }
+        
+        // 显示边缘提示
+        function showEdgeIndicator(text, bgColor, textColor) {
+            edgeText.textContent = text;
+            edgeIndicator.className = `mt-3 text-center status-indicator py-2 rounded bg-${bgColor} text-${textColor}`;
+        }
+        
+        // 隐藏边缘提示
+        function hideEdgeIndicator() {
+            edgeIndicator.className = 'mt-3 text-center status-indicator py-2 rounded hidden';
+        }
+        
+        // 初始检查一次位置
+        checkScrollPosition();
+    </script>
+</body>
+</html>