aizhunongDom/fix-tables.sh

#!/bin/bash

# 为所有具有表格的页面添加固定列和滚动控件功能
# 作者: AI助手
# 日期: 2024年5月

# 查找所有包含表格容器的HTML文件
files=$(grep -l "table-container" pages/*.html)

for file in $files; do
  echo "正在处理: $file"
  
  # 1. 添加表格容器位置样式
  sed -i '' 's/\.table-container {/\.table-container {\n    position: relative;/' "$file"
  
  # 2. 修改表格边框合并方式
  sed -i '' 's/border-collapse: collapse;/border-collapse: separate;\n    border-spacing: 0;/' "$file"
  
  # 3. 分别处理表头和单元格样式
  # 表头：允许完整显示
  sed -i '' 's/th {/th {\n    white-space: nowrap;\n    position: relative;\n    overflow: visible;\n    max-width: none;\n    text-overflow: clip;/' "$file"
  
  # 普通单元格：应用省略号
  sed -i '' 's/td {/td {\n    white-space: nowrap;\n    max-width: 200px;\n    overflow: hidden;\n    text-overflow: ellipsis;/' "$file"
  
  # 4. 添加固定列和滚动控件相关样式（如果不存在）
  if ! grep -q "table-fixed-right" "$file"; then
    # 查找tr:hover样式的位置，在其后添加新样式
    sed -i '' '/tr:hover {/a\
    \
    tr:hover td:last-child {\
        background-color: #f9fafb;\
    }\
    \
    /* 固定最后一列（操作列）样式 */\
    .table-fixed-right {\
        position: relative;\
    }\
    \
    .table-fixed-right th:last-child,\
    .table-fixed-right td:last-child {\
        position: sticky;\
        right: 0;\
        z-index: 2;\
        background-color: white;\
        box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);\
    }\
    \
    .table-fixed-right th:last-child {\
        background-color: #f9fafb;\
    }\
    \
    /* 表格滚动控件 */\
    .table-scroll-controls {\
        display: none;\
        position: absolute;\
        top: 50%;\
        transform: translateY(-50%);\
        width: 100%;\
        pointer-events: none;\
        z-index: 3;\
    }\
    \
    .table-scroll-btn {\
        position: absolute;\
        width: 32px;\
        height: 32px;\
        border-radius: 50%;\
        background-color: rgba(255, 255, 255, 0.9);\
        color: #4CAF50;\
        border: 1px solid #e0e0e0;\
        display: flex;\
        align-items: center;\
        justify-content: center;\
        cursor: pointer;\
        pointer-events: auto;\
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\
        z-index: 4;\
    }\
    \
    .table-scroll-left {\
        left: 10px;\
    }\
    \
    .table-scroll-right {\
        right: 10px;\
    }\
    \
    .has-overflow .table-scroll-controls {\
        display: block;\
    }' "$file"
  fi
  
  # 5. 在表格容器中添加滚动控件和表格类（如果不存在）
  if ! grep -q "table-scroll-controls" "$file"; then
    sed -i '' '/<div class="table-container">/a\
        <div class="table-scroll-controls">\
            <button class="table-scroll-btn table-scroll-left">\
                <i class="iconfont icon-left"><\/i>\
            <\/button>\
            <button class="table-scroll-btn table-scroll-right">\
                <i class="iconfont icon-right"><\/i>\
            <\/button>\
        <\/div>' "$file"
    
    # 将表格添加固定右侧类
    sed -i '' 's/<table>/<table class="table-fixed-right">/' "$file"
    sed -i '' 's/<table class="/<table class="table-fixed-right /' "$file"
  fi
  
  # 6. 添加表格滚动初始化JavaScript（如果不存在）
  if ! grep -q "initTableScroll" "$file"; then
    # 查找第一个script标签开始的位置
    sed -i '' '/<script>/a\
    document.addEventListener("DOMContentLoaded", function() {\
        // 初始化表格滚动功能\
        function initTableScroll() {\
            const tableContainer = document.querySelector(".table-container");\
            if (!tableContainer) return;\
            \
            const scrollLeftBtn = document.querySelector(".table-scroll-left");\
            const scrollRightBtn = document.querySelector(".table-scroll-right");\
            \
            if (!scrollLeftBtn || !scrollRightBtn) return;\
            \
            // 检查表格是否需要水平滚动\
            function checkTableOverflow() {\
                if (tableContainer.scrollWidth > tableContainer.clientWidth) {\
                    tableContainer.classList.add("has-overflow");\
                } else {\
                    tableContainer.classList.remove("has-overflow");\
                }\
            }\
            \
            // 左右滚动按钮点击事件\
            scrollLeftBtn.addEventListener("click", function() {\
                tableContainer.scrollLeft -= 150;\
            });\
            \
            scrollRightBtn.addEventListener("click", function() {\
                tableContainer.scrollLeft += 150;\
            });\
            \
            // 初始检查和窗口大小变化时检查\
            checkTableOverflow();\
            window.addEventListener("resize", checkTableOverflow);\
            \
            // 滚动事件处理\
            tableContainer.addEventListener("scroll", function() {\
                // 根据滚动位置显示/隐藏滚动按钮\
                if (tableContainer.scrollLeft <= 10) {\
                    scrollLeftBtn.style.opacity = "0.5";\
                } else {\
                    scrollLeftBtn.style.opacity = "1";\
                }\
                \
                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {\
                    scrollRightBtn.style.opacity = "0.5";\
                } else {\
                    scrollRightBtn.style.opacity = "1";\
                }\
            });\
            \
            // 初始触发滚动事件，设置初始按钮状态\
            tableContainer.dispatchEvent(new Event("scroll"));\
        }\
        \
        // 初始化表格滚动\
        initTableScroll();' "$file"
  fi
  
  echo "完成处理: $file"
done

echo "所有表格优化完成！"