feat(risk-history): 添加全局 Toast 提示功能并优化交互

- 新增 Toast 组件样式和脚本，实现全局提示消息功能- 在评论保存按钮点击后显示 Toast 提示 - 优化评论保存按钮文案，从"保存"改为"发布"
2025-12-10 03:16:49 +08:00 · 2025-07-29 14:10:22 +08:00
parent e586a88918
commit 2396f65769
1 changed files with 124 additions and 2 deletions
--- a/public/bpic_eli/risk_history.html
+++ b/public/bpic_eli/risk_history.html
@@ -516,6 +516,46 @@
      *background: #000;
      *filter: alpha(opacity=50);
    }
+
+
+    /* 全局 Toast 样式 - 兼容 IE8 */
+    .toast {
+      position: fixed;
+      /* IE8 不完全支持 fixed，但可以尝试 */
+      *position: absolute; /* IE8 降级 */
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      /* IE8 兼容居中 */
+      *top: 200px;
+      *left: 50%;
+      *margin-left: -150px; /* 假设宽度为 300px */
+      width: 300px;
+      padding: 15px 20px;
+      background-color: #333;
+      color: #fff;
+      text-align: center;
+      border-radius: 4px;
+      z-index: 2000; /* 确保在最上层 */
+      opacity: 0;
+      transition: opacity 0.3s ease-in-out;
+      /* IE8 不支持 transition 和 opacity 动画 */
+      *filter: alpha(opacity=0); /* IE8 透明度 */
+      *zoom: 1; /* IE8 触发 hasLayout */
+    }
+
+    .toast.show {
+      opacity: 1;
+      /* IE8 不支持 opacity 动画 */
+      *filter: alpha(opacity=100); /* IE8 透明度 */
+    }
+
+    #toastMessage {
+      display: block;
+      font-size: 14px;
+    }
+
+
  </style>
 </head>
 <body>
@@ -577,11 +617,14 @@
  </div>
  <textarea id="commentText" placeholder="请输入您的评价..."></textarea>
  <div class='dialog-action'>
-    <button style='background: #3498db; color: white; border: 1px solid #3498db;' onclick="DialogHandler.saveComment()" type="button">保存</button>
+    <button style='background: #3498db; color: white; border: 1px solid #3498db;' onclick="DialogHandler.saveComment()" type="button">发布</button>
    <button onclick="DialogHandler.closeDialog()" type="button">关闭</button>
  </div>
 </div>
-
+<!-- 全局 Toast 提示 -->
+<div id="globalToast" class="toast" style="display:none;">
+  <span id="toastMessage"></span>
+</div>
 <script src="ajax.js"></script>
 <script>
  // 工具函数模块
@@ -656,6 +699,82 @@
    taCode: Utils.getQueryParam('taCode') || 'C123504032025600027' // 默认值作为后备
  };

+  // 全局 Toast 提示模块 - 兼容 IE8
+  var Toast = {
+    element: null,
+    messageElement: null,
+    timeoutId: null,
+
+    // 初始化 Toast 元素引用
+    init: function () {
+      this.element = document.getElementById('globalToast');
+      this.messageElement = document.getElementById('toastMessage');
+      if (!this.element || !this.messageElement) {
+        console.warn('Toast elements not found.');
+      }
+    },
+
+    // 显示 Toast
+    show: function (message, duration) {
+      if (!this.element || !this.messageElement) {
+        // 如果 DOM 元素不存在，降级使用 alert 或 console.log
+        // alert(message); // 或者
+        console.log('Toast Message:', message);
+        return;
+      }
+
+      // 清除之前的定时器
+      if (this.timeoutId) {
+        clearTimeout(this.timeoutId);
+        this.timeoutId = null;
+      }
+
+      // 设置消息内容
+      this.messageElement.innerHTML = message; // 使用 innerHTML 支持简单 HTML
+
+      // 显示元素 (兼容 IE8)
+      this.element.style.display = 'block';
+
+      // 添加 'show' 类以触发动画 (兼容 IE8)
+      // 注意：IE8 不支持 classList，需要手动处理
+      var currentClasses = this.element.className;
+      if (currentClasses.indexOf('show') === -1) {
+        this.element.className = currentClasses ? currentClasses + ' show' : 'toast show';
+      }
+
+      // 设置自动隐藏定时器
+      var self = this;
+      duration = duration || 2000; // 默认 2 秒
+      this.timeoutId = setTimeout(function () {
+        self.hide();
+      }, duration);
+    },
+
+    // 隐藏 Toast
+    hide: function () {
+      if (!this.element) return;
+
+      // 移除 'show' 类 (兼容 IE8)
+      var currentClasses = this.element.className;
+      if (currentClasses.indexOf('show') !== -1) {
+        this.element.className = currentClasses.replace(' show', '').replace('show', ''); // 处理 'show' 在开头或单独存在的情况
+      }
+
+      // 隐藏元素 (兼容 IE8)
+      // 简单的延迟隐藏，模拟淡出效果（因为 IE8 不支持 transition）
+      var self = this;
+      setTimeout(function() {
+        self.element.style.display = 'none';
+      }, 300); // 等待样式移除后的“淡出”时间
+
+      // 清除定时器引用
+      if (this.timeoutId) {
+        clearTimeout(this.timeoutId);
+        this.timeoutId = null;
+      }
+    }
+  };
+
  // DOM操作模块
  var DOMHandler = {
    // 设置服务URL并发送请求
@@ -1098,6 +1217,9 @@
              zan.innerHTML = '<img src="./zan.png">';
            }
            EventHandler.findNavItem({isLike: StateManager.isLike})
+            // Toast.show('点赞成功', 2000)
+          } else {
+            // Toast.show('', 2000)
          }
        });
      };