hz/ebiz-ai-knowledge-manage
1
0
Fork 0
mirror of http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git synced 2025-12-09 10:56:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 新增 Toast 组件样式和脚本，实现全局提示消息功能- 在评论保存按钮点击后显示 Toast 提示
- 优化评论保存按钮文案，从"保存"改为"发布"
This commit is contained in:
陈昱达
2025-07-29 14:10:22 +08:00
parent e586a88918
commit 2396f65769
1 changed files with 124 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
public/bpic_eli/risk_history.html
View File

@@ -516,6 +516,46 @@
*background: #000; *background: #000;
*filter: alpha(opacity=50); *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> </style>
</head> </head>
<body> <body>
@@ -577,11 +617,14 @@
</div> </div>
<textarea id="commentText" placeholder="请输入您的评价..."></textarea> <textarea id="commentText" placeholder="请输入您的评价..."></textarea>
<div class='dialog-action'> <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> <button onclick="DialogHandler.closeDialog()" type="button">关闭</button>
</div> </div>
</div> </div>
<!-- 全局 Toast 提示 -->
<div id="globalToast" class="toast" style="display:none;">
<span id="toastMessage"></span>
</div>
<script src="ajax.js"></script> <script src="ajax.js"></script>
<script> <script>
// 工具函数模块 // 工具函数模块
@@ -656,6 +699,82 @@
taCode: Utils.getQueryParam('taCode') || 'C123504032025600027' // 默认值作为后备 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操作模块 // DOM操作模块
var DOMHandler = { var DOMHandler = {
// 设置服务URL并发送请求 // 设置服务URL并发送请求
@@ -1098,6 +1217,9 @@
zan.innerHTML = '<img src="./zan.png">'; zan.innerHTML = '<img src="./zan.png">';
} }
EventHandler.findNavItem({isLike: StateManager.isLike}) EventHandler.findNavItem({isLike: StateManager.isLike})
// Toast.show('点赞成功', 2000)
} else {
// Toast.show('', 2000)
} }
}); });
}; };