update web interface

static/js/market-ticker.js

@@ -0,0 +1,110 @@
+// 实时行情数据更新功能
+document.addEventListener('DOMContentLoaded', function() {
+    const tickerContent = document.querySelector('.ticker-content');
+    if (!tickerContent) return;
+
+    // 初始占位符数据
+    const initialData = [
+        { symbol: 'HSI', price: '16,842.23', change: '+1.2%', direction: 'positive' },
+        { symbol: 'AAPL', price: '173.45', change: '+0.8%', direction: 'positive' },
+        { symbol: 'TSLA', price: '245.67', change: '-0.5%', direction: 'negative' },
+        { symbol: 'BTC/USD', price: '61,234.56', change: '+2.1%', direction: 'positive' }
+    ];
+
+    // 初始化行情显示器
+    function initializeTicker() {
+        tickerContent.innerHTML = '';
+        initialData.forEach(item => {
+            const tickerItem = createTickerItem(item);
+            tickerContent.appendChild(tickerItem);
+        });
+    }
+
+    // 创建行情项元素
+    function createTickerItem(data) {
+        const item = document.createElement('div');
+        item.className = 'ticker-item';
+        item.innerHTML = `
+            <span class="symbol">${data.symbol}</span>
+            <span class="price">${formatPrice(data.price)}</span>
+            <span class="change ${data.direction}">${data.change}</span>
+        `;
+        return item;
+    }
+
+    // 格式化价格显示
+    function formatPrice(price) {
+        if (typeof price === 'number') {
+            // 对于数字，添加千位分隔符
+            return price.toLocaleString('en-US', {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2
+            });
+        }
+        return price;
+    }
+
+    // 获取实时市场数据
+    async function fetchMarketData() {
+        try {
+            const response = await fetch('/api/market-data');
+            if (!response.ok) {
+                throw new Error('网络响应不正常');
+            }
+            const data = await response.json();
+            
+            if (data.status === 'success') {
+                updateTicker(data.data);
+            } else {
+                console.error('获取市场数据失败:', data.message);
+            }
+        } catch (error) {
+            console.error('获取实时行情数据时发生错误:', error);
+            // 保持显示静态数据，不更新
+        }
+    }
+
+    // 更新行情显示器
+    function updateTicker(marketData) {
+        tickerContent.innerHTML = '';
+        marketData.forEach(item => {
+            const direction = item.change_percent >= 0 ? 'positive' : 'negative';
+            const changeSign = item.change_percent >= 0 ? '+' : '';
+            
+            const tickerItem = document.createElement('div');
+            tickerItem.className = 'ticker-item';
+            tickerItem.innerHTML = `
+                <span class="symbol">${item.symbol}</span>
+                <span class="price">${formatPrice(item.price)}</span>
+                <span class="change ${direction}">${changeSign}${item.change_percent}%</span>
+            `;
+            tickerContent.appendChild(tickerItem);
+        });
+    }
+
+    // 初始化并开始定时更新
+    initializeTicker();
+    
+    // 立即获取一次数据
+    fetchMarketData();
+    
+    // 每30秒更新一次数据
+    setInterval(fetchMarketData, 30000);
+    
+    // 添加刷新按钮功能
+    const refreshBadge = document.querySelector('.refresh-badge');
+    if (refreshBadge) {
+        refreshBadge.addEventListener('click', function() {
+            this.textContent = '刷新中...';
+            fetchMarketData().then(() => {
+                setTimeout(() => {
+                    this.textContent = 'Live';
+                }, 1000);
+            });
+        });
+        
+        // 添加提示文字
+        refreshBadge.title = '点击手动刷新行情';
+        refreshBadge.style.cursor = 'pointer';
+    }
+});

static/js/mobile-menu.js

@@ -0,0 +1,54 @@
+// 移动端菜单功能
+document.addEventListener('DOMContentLoaded', function() {
+    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
+    const navMenu = document.querySelector('.nav-menu');
+    
+    if (mobileMenuToggle && navMenu) {
+        // 切换菜单显示
+        mobileMenuToggle.addEventListener('click', function() {
+            navMenu.classList.toggle('active');
+            mobileMenuToggle.classList.toggle('active');
+            document.body.classList.toggle('menu-open');
+        });
+        
+        // 点击菜单外区域关闭菜单
+        document.addEventListener('click', function(event) {
+            if (!navMenu.contains(event.target) && !mobileMenuToggle.contains(event.target)) {
+                navMenu.classList.remove('active');
+                mobileMenuToggle.classList.remove('active');
+                document.body.classList.remove('menu-open');
+            }
+        });
+        
+        // 防止菜单内点击事件冒泡
+        navMenu.addEventListener('click', function(event) {
+            event.stopPropagation();
+        });
+        
+        // 菜单项点击后关闭菜单
+        const menuItems = navMenu.querySelectorAll('a');
+        menuItems.forEach(item => {
+            item.addEventListener('click', function() {
+                navMenu.classList.remove('active');
+                mobileMenuToggle.classList.remove('active');
+                document.body.classList.remove('menu-open');
+            });
+        });
+    }
+    
+    // 窗口大小变化时重置菜单状态
+    window.addEventListener('resize', function() {
+        if (window.innerWidth > 768) {
+            navMenu.classList.remove('active');
+            mobileMenuToggle.classList.remove('active');
+            document.body.classList.remove('menu-open');
+        }
+    });
+});
+
+// 语言切换功能
+function changeLanguage(langCode) {
+    if (langCode) {
+        window.location.href = '/set_language/' + langCode;
+    }
+}

static/js/tabs.js

@@ -0,0 +1,72 @@
+// Tab functionality for commission rates
+document.addEventListener('DOMContentLoaded', function() {
+    const tabButtons = document.querySelectorAll('.tab-button');
+    const tabPanes = document.querySelectorAll('.tab-pane');
+    const tabsContainer = document.querySelector('.tabs-container');
+
+    // Function to switch tabs
+    function switchTab(tabId) {
+        // Hide all tab panes
+        tabPanes.forEach(pane => {
+            pane.classList.remove('active');
+        });
+
+        // Remove active class from all buttons
+        tabButtons.forEach(button => {
+            button.classList.remove('active');
+        });
+
+        // Show the selected tab pane
+        const selectedPane = document.getElementById(tabId);
+        if (selectedPane) {
+            selectedPane.classList.add('active');
+        }
+
+        // Activate the clicked button
+        const activeButton = document.querySelector(`[data-tab="${tabId}"]`);
+        if (activeButton) {
+            activeButton.classList.add('active');
+        }
+
+        // Update URL hash for deep linking without scrolling
+        if (history.replaceState) {
+            history.replaceState(null, null, '#' + tabId);
+        } else {
+            window.location.hash = tabId;
+        }
+
+        // Smoothly scroll to the top of the tabs container with offset
+        if (tabsContainer) {
+            const containerTop = tabsContainer.getBoundingClientRect().top + window.pageYOffset;
+            const offset = 100; // Adjust this value to control how much to scroll
+            window.scrollTo({
+                top: containerTop - offset,
+                behavior: 'smooth'
+            });
+        }
+    }
+
+    // Add click event listeners to all tab buttons
+    tabButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const tabId = this.getAttribute('data-tab');
+            switchTab(tabId);
+        });
+    });
+
+    // Check for hash in URL on page load
+    if (window.location.hash) {
+        const hash = window.location.hash.substring(1);
+        if (['stocks', 'options', 'futures', 'funds', 'other'].includes(hash)) {
+            switchTab(hash);
+        }
+    }
+
+    // Handle browser back/forward navigation
+    window.addEventListener('hashchange', function() {
+        const hash = window.location.hash.substring(1);
+        if (['stocks', 'options', 'futures', 'funds', 'other'].includes(hash)) {
+            switchTab(hash);
+        }
+    });
+});