| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- #!/bin/bash
- # 定义颜色
- GREEN='\033[0;32m'
- BLUE='\033[0;34m'
- NC='\033[0m' # No Color
- # 确认函数
- confirm() {
- read -p "$1 (y/n): " choice
- case "$choice" in
- y|Y ) return 0;;
- * ) return 1;;
- esac
- }
- echo -e "${BLUE}爱智农平台页面修复工具${NC}"
- echo "-----------------------------------"
- echo "此脚本将批量修复所有页面的UI按钮遮挡问题"
- echo "-----------------------------------"
- # 获取未处理的页面
- pages_to_process=()
- for file in pages/*.html; do
- # 排除已经创建的content页面
- if [[ ! $file == *-content.html ]] && [[ ! -f "${file%.*}-content.html" ]] && [[ ! $file == "field-management.html" ]] && [[ ! $file == "device-management.html" ]] && [[ ! $file == "machine-monitor.html" ]] && [[ ! $file == "device-monitor.html" ]]; then
- pages_to_process+=("$file")
- fi
- done
- # 显示待处理的页面
- echo -e "\n${GREEN}找到以下待处理页面:${NC}"
- for page in "${pages_to_process[@]}"; do
- echo "- $page"
- done
- if confirm "是否继续处理这些页面?"; then
- for page in "${pages_to_process[@]}"; do
- base_name=$(basename "$page" .html)
- content_file="pages/${base_name}-content.html"
-
- echo -e "\n${GREEN}处理页面: $page${NC}"
-
- # 1. 复制原始文件为content文件
- cp "$page" "$content_file"
- echo "✓ 已创建内容页面: $content_file"
-
- # 2. 为内容页面添加必要的CSS和类
- sed -i '' 's/<html lang="zh-CN">/<html lang="zh-CN" class="iframe-content">/' "$content_file"
- sed -i '' 's/<div class="page-container">/<div class="page-container responsive-container">/' "$content_file"
- sed -i '' 's/<div class="flex justify-between items-center mb-6">/<div class="flex justify-between items-center mb-6 page-header">/' "$content_file"
- sed -i '' 's/<div class="flex gap-2">/<div class="flex gap-2 button-container">/' "$content_file"
-
- # 添加CSS样式到内容页面
- css_insert='body {\n padding-top: 15px; /* 添加顶部填充以确保内容不被系统元素遮挡 */\n}\n\n.page-container {\n position: relative;\n padding-top: 40px; /* 增加顶部内边距,给按钮腾出空间 */\n}\n\n/* 防止重复菜单 */\nbody > div:not(.page-container):not(.modal-container),\niframe#sidebar, \ndiv.system-menu,\n[id^="system-menu"],\n[class^="system-menu"],\n#admin-sidebar,\n.menu-popup,\n.user-avatar-circle {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n opacity: 0 !important;\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -9999 !important;\n pointer-events: none !important;\n}\n\n/* 防止右侧白圈和浮动元素 */\n.circle-btn,\n.floating-circle,\n.round-button,\n.scroll-top-btn,\n[class*="round"],\n[class*="circle"],\n.help-btn,\n.chat-btn,\nbody > .btn,\nbody > button,\nbody > div:not(.page-container):not(.modal-container) {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n pointer-events: none !important;\n}\n\n/* 页面标题和操作按钮容器 */\n.page-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 1px solid #e0e0e0;\n padding-top: 10px;\n position: relative;\n z-index: 10;\n}\n\n/* 添加按钮的特定样式 */\n.button-container {\n position: relative;\n z-index: 20;\n}\n\n.btn {\n position: relative;\n z-index: 5;\n height: 38px;\n visibility: visible !important;\n opacity: 1 !important;\n display: inline-flex !important;\n}'
-
- sed -i '' "/<style>/a\\
- $css_insert
- " "$content_file"
- echo "✓ 已添加样式到内容页面"
-
- # 3. 创建iframe容器页面
- cat > "$page" << EOF
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>${base_name//-/ } - 爱智农</title>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
- <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
- <link rel="stylesheet" href="../assets/css/global.css">
- <style>
- :root {
- --primary: #4CAF50;
- --primary-dark: #388E3C;
- --primary-light: #A5D6A7;
- --primary-bg: #F1F8E9;
- --success: #4CAF50;
- --warning: #FFC107;
- --danger: #F44336;
- --info: #2196F3;
- --disabled: #9E9E9E;
- --border: #E0E0E0;
- --text-primary: #212121;
- --text-secondary: #757575;
- --radius: 8px;
- }
-
- body {
- font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
- background-color: #f5f7f9;
- color: var(--text-primary);
- margin: 0;
- padding: 0;
- height: 100vh;
- width: 100vw;
- overflow: hidden;
- }
-
- /* 内容页面框架 */
- #content-frame {
- width: 100%;
- height: 100%;
- border: none;
- overflow: hidden;
- margin-top: 0; /* 移除顶部外边距 */
- padding-top: 0; /* 移除顶部内边距 */
- }
-
- /* 移除白色圆形按钮 */
- .circle-btn,
- .floating-button,
- .round-button,
- button[class*='circle'],
- div[class*='circle'],
- [class*='float-btn'],
- body > div:not(#app),
- body > button {
- display: none !important;
- visibility: hidden !important;
- opacity: 0 !important;
- position: absolute !important;
- top: -9999px !important;
- left: -9999px !important;
- z-index: -9999 !important;
- pointer-events: none !important;
- }
- </style>
- </head>
- <body>
- <!-- 使用iframe来完全隔离和控制页面内容 -->
- <iframe id="content-frame" src="${base_name}-content.html" sandbox="allow-scripts allow-forms allow-same-origin allow-popups" loading="eager" scrolling="auto" frameborder="0" allowfullscreen></iframe>
-
- <script>
- // 监听iframe加载完成
- document.getElementById('content-frame').onload = function() {
- // 确保iframe高度铺满
- this.style.height = window.innerHeight + 'px';
- };
-
- // 页面大小变化时调整iframe大小
- window.addEventListener('resize', function() {
- document.getElementById('content-frame').style.height = window.innerHeight + 'px';
- });
- </script>
- </body>
- </html>
- EOF
- echo "✓ 已创建iframe容器页面: $page"
-
- echo "✓ 页面 $page 处理完成!"
- done
-
- echo -e "\n${GREEN}所有页面处理完成!${NC}"
- echo "共处理了 ${#pages_to_process[@]} 个页面"
- else
- echo "已取消操作"
- fi
|