u
This commit is contained in:
oneao committed
1 parent
3a951f764c
commit
ae6ccad238
6 files changed
+2963
-1175
No files matched your search
@@ -0,0 +1,624 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Global Feedback Dock Demo</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: #f5f7fa;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 20px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
color: #34495e;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #2ecc71;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #f39c12;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background-color: #1abc9c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 全局反馈 Dock 样式 */
|
||||
.g3-feedback-dock {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10000;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.g3-feedback-dock.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.g3-feedback-dock.toast-mode {
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.dock-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.dock-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.dock-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dock-actions button {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dock-actions button:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.dock-body {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.task-name {
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.bar {
|
||||
height: 6px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.bar-inner {
|
||||
height: 100%;
|
||||
background: #3498db;
|
||||
transition: width 0.3s ease;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.task-result {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Toast 样式 */
|
||||
.toast-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Toast 类型样式 */
|
||||
.g3-feedback-dock.toast-mode.success {
|
||||
border-left: 4px solid #2ecc71;
|
||||
}
|
||||
|
||||
.g3-feedback-dock.toast-mode.error {
|
||||
border-left: 4px solid #e74c3c;
|
||||
}
|
||||
|
||||
.g3-feedback-dock.toast-mode.warning {
|
||||
border-left: 4px solid #f39c12;
|
||||
}
|
||||
|
||||
.g3-feedback-dock.toast-mode.info {
|
||||
border-left: 4px solid #3498db;
|
||||
}
|
||||
|
||||
/* UI 锁定遮罩 */
|
||||
.ui-lock {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255,255,255,0.7);
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.g3-feedback-dock {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dock-header,
|
||||
.dock-body {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Global Feedback Dock Demo</h1>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2>1. 任务模式（Task Mode）</h2>
|
||||
<p>用于展示批量任务进度，如下载、上传等</p>
|
||||
<div class="button-group">
|
||||
<button class="btn-primary" onclick="startDownloadTask()">开始批量下载</button>
|
||||
<button class="btn-success" onclick="startUploadTask()">开始批量上传</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2>2. 提示模式（Toast Mode）</h2>
|
||||
<p>用于单次操作反馈，如操作成功、失败等</p>
|
||||
<div class="button-group">
|
||||
<button class="btn-success" onclick="showSuccessToast()">成功提示</button>
|
||||
<button class="btn-danger" onclick="showErrorToast()">错误提示</button>
|
||||
<button class="btn-warning" onclick="showWarningToast()">警告提示</button>
|
||||
<button class="btn-info" onclick="showInfoToast()">信息提示</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2>3. 单个文件下载失败示例</h2>
|
||||
<p>模拟单个文件下载失败的场景</p>
|
||||
<div class="button-group">
|
||||
<button class="btn-danger" onclick="simulateDownloadFailure()">模拟下载失败</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 全局反馈 Dock 容器 -->
|
||||
<div class="g3-feedback-dock" id="feedbackDock">
|
||||
<div class="dock-header">
|
||||
<span class="dock-title">任务进行中</span>
|
||||
<div class="dock-actions">
|
||||
<button title="close" onclick="feedbackDock.clear()">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dock-body">
|
||||
<!-- 任务模式内容 -->
|
||||
<div class="task-content">
|
||||
<div class="progress-line">
|
||||
<span class="count">0 / 0</span>
|
||||
<span class="percent">0%</span>
|
||||
</div>
|
||||
<div class="task-name"></div>
|
||||
<div class="bar">
|
||||
<div class="bar-inner"></div>
|
||||
</div>
|
||||
<div class="task-result">
|
||||
总计: 0 | 成功: 0 | 失败: 0
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toast 模式内容 -->
|
||||
<div class="toast-content" style="display: none;">
|
||||
<div class="toast-icon"></div>
|
||||
<div class="toast-message"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UI 锁定遮罩 -->
|
||||
<div class="ui-lock" id="uiLock"></div>
|
||||
|
||||
<script>
|
||||
// 全局反馈 Dock 组件
|
||||
class FeedbackDock {
|
||||
constructor() {
|
||||
this.dock = document.getElementById('feedbackDock');
|
||||
this.uiLock = document.getElementById('uiLock');
|
||||
this.tasks = [];
|
||||
this.taskStats = {
|
||||
total: 0,
|
||||
success: 0,
|
||||
fail: 0
|
||||
};
|
||||
this.toastQueue = [];
|
||||
this.isToastShowing = false;
|
||||
this.currentMode = 'task'; // 'task' or 'toast'
|
||||
}
|
||||
|
||||
// 生成唯一ID
|
||||
generateUniqueId() {
|
||||
return 'feedback_' + Math.random().toString(36).slice(2) + Date.now();
|
||||
}
|
||||
|
||||
// 开始任务
|
||||
startTask(taskConfig) {
|
||||
const taskId = this.generateUniqueId();
|
||||
const newTask = {
|
||||
id: taskId,
|
||||
name: taskConfig.name,
|
||||
type: taskConfig.type || 'custom',
|
||||
progress: 0,
|
||||
status: 'running'
|
||||
};
|
||||
|
||||
this.tasks.push(newTask);
|
||||
this.updateTaskStats();
|
||||
this.switchMode('task');
|
||||
this.show();
|
||||
this.lockUI();
|
||||
|
||||
return taskId;
|
||||
}
|
||||
|
||||
// 更新任务
|
||||
updateTask(taskId, progress) {
|
||||
const task = this.tasks.find(t => t.id === taskId);
|
||||
if (task) {
|
||||
task.progress = progress;
|
||||
this.updateTaskDock();
|
||||
}
|
||||
}
|
||||
|
||||
// 完成任务
|
||||
finishTask(taskId, status) {
|
||||
const task = this.tasks.find(t => t.id === taskId);
|
||||
if (task) {
|
||||
task.status = status || 'success';
|
||||
task.progress = 100;
|
||||
this.updateTaskStats();
|
||||
this.updateTaskDock();
|
||||
|
||||
const allCompleted = this.tasks.every(
|
||||
t => t.status === 'success' || t.status === 'fail'
|
||||
);
|
||||
if (allCompleted) {
|
||||
this.unlockUI();
|
||||
// 3秒后自动隐藏
|
||||
setTimeout(() => {
|
||||
this.clear();
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 显示 Toast
|
||||
toast(options) {
|
||||
const toastConfig = {
|
||||
type: options.type || 'info',
|
||||
message: options.message || '',
|
||||
duration: options.duration || 3000
|
||||
};
|
||||
|
||||
this.toastQueue.push(toastConfig);
|
||||
if (!this.isToastShowing) {
|
||||
this.showNextToast();
|
||||
}
|
||||
}
|
||||
|
||||
// 显示下一个 Toast
|
||||
showNextToast() {
|
||||
if (this.toastQueue.length === 0) {
|
||||
this.isToastShowing = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.isToastShowing = true;
|
||||
const toastConfig = this.toastQueue.shift();
|
||||
this.switchMode('toast');
|
||||
this.updateToast(toastConfig);
|
||||
this.show();
|
||||
|
||||
// 自动隐藏
|
||||
setTimeout(() => {
|
||||
this.hide();
|
||||
setTimeout(() => {
|
||||
this.showNextToast();
|
||||
}, 300);
|
||||
}, toastConfig.duration);
|
||||
}
|
||||
|
||||
// 切换模式
|
||||
switchMode(mode) {
|
||||
this.currentMode = mode;
|
||||
const taskContent = this.dock.querySelector('.task-content');
|
||||
const toastContent = this.dock.querySelector('.toast-content');
|
||||
|
||||
if (mode === 'task') {
|
||||
this.dock.classList.remove('toast-mode', 'success', 'error', 'warning', 'info');
|
||||
taskContent.style.display = 'block';
|
||||
toastContent.style.display = 'none';
|
||||
} else {
|
||||
this.dock.classList.add('toast-mode');
|
||||
taskContent.style.display = 'none';
|
||||
toastContent.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
// 更新任务面板
|
||||
updateTaskDock() {
|
||||
if (this.tasks.length === 0) return;
|
||||
|
||||
// 获取当前正在运行的任务，或者最后一个任务
|
||||
const currentTask = this.tasks.find(t => t.status === 'running') || this.tasks[this.tasks.length - 1];
|
||||
|
||||
if (currentTask) {
|
||||
const totalProgress = this.tasks.reduce((sum, task) => sum + task.progress, 0) / this.tasks.length;
|
||||
|
||||
this.dock.querySelector('.dock-title').textContent = currentTask.type === 'upload' ? '上传任务' : '下载任务';
|
||||
this.dock.querySelector('.progress-line .count').textContent = `${this.taskStats.success + this.taskStats.fail} / ${this.taskStats.total}`;
|
||||
this.dock.querySelector('.progress-line .percent').textContent = `${Math.round(totalProgress)}%`;
|
||||
this.dock.querySelector('.task-name').textContent = currentTask.name;
|
||||
this.dock.querySelector('.bar .bar-inner').style.width = `${currentTask.progress}%`;
|
||||
this.dock.querySelector('.task-result').textContent = `总计: ${this.taskStats.total} | 成功: ${this.taskStats.success} | 失败: ${this.taskStats.fail}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 更新 Toast
|
||||
updateToast(config) {
|
||||
const iconMap = {
|
||||
success: '✓',
|
||||
error: '✗',
|
||||
warning: '!',
|
||||
info: 'i'
|
||||
};
|
||||
|
||||
this.dock.classList.remove('success', 'error', 'warning', 'info');
|
||||
this.dock.classList.add(config.type);
|
||||
this.dock.querySelector('.dock-title').textContent = this.getToastTitle(config.type);
|
||||
this.dock.querySelector('.toast-icon').textContent = iconMap[config.type];
|
||||
this.dock.querySelector('.toast-message').textContent = config.message;
|
||||
}
|
||||
|
||||
// 获取 Toast 标题
|
||||
getToastTitle(type) {
|
||||
const titles = {
|
||||
success: '操作成功',
|
||||
error: '操作失败',
|
||||
warning: '警告',
|
||||
info: '信息'
|
||||
};
|
||||
return titles[type] || '信息';
|
||||
}
|
||||
|
||||
// 更新任务统计
|
||||
updateTaskStats() {
|
||||
this.taskStats.total = this.tasks.length;
|
||||
this.taskStats.success = this.tasks.filter(t => t.status === 'success').length;
|
||||
this.taskStats.fail = this.tasks.filter(t => t.status === 'fail').length;
|
||||
}
|
||||
|
||||
// 显示 Dock
|
||||
show() {
|
||||
this.dock.classList.add('show');
|
||||
}
|
||||
|
||||
// 隐藏 Dock
|
||||
hide() {
|
||||
this.dock.classList.remove('show');
|
||||
}
|
||||
|
||||
// 清空所有任务和 Toast
|
||||
clear() {
|
||||
this.tasks = [];
|
||||
this.taskStats = { total: 0, success: 0, fail: 0 };
|
||||
this.toastQueue = [];
|
||||
this.isToastShowing = false;
|
||||
this.hide();
|
||||
this.unlockUI();
|
||||
}
|
||||
|
||||
// 锁定 UI
|
||||
lockUI() {
|
||||
this.uiLock.style.display = 'block';
|
||||
}
|
||||
|
||||
// 解锁 UI
|
||||
unlockUI() {
|
||||
this.uiLock.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化反馈 Dock
|
||||
const feedbackDock = new FeedbackDock();
|
||||
|
||||
// 示例函数
|
||||
function startDownloadTask() {
|
||||
// 模拟批量下载任务
|
||||
const files = ['file1.pdf', 'file2.jpg', 'file3.docx', 'file4.png', 'file5.txt'];
|
||||
const taskIds = [];
|
||||
|
||||
files.forEach((file, index) => {
|
||||
const taskId = feedbackDock.startTask({
|
||||
name: file,
|
||||
type: 'download'
|
||||
});
|
||||
taskIds.push(taskId);
|
||||
|
||||
// 模拟下载进度
|
||||
let progress = 0;
|
||||
const interval = setInterval(() => {
|
||||
progress += 10;
|
||||
if (progress <= 100) {
|
||||
feedbackDock.updateTask(taskId, progress);
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
// 模拟90%成功率
|
||||
const status = Math.random() > 0.1 ? 'success' : 'fail';
|
||||
feedbackDock.finishTask(taskId, status);
|
||||
}
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
|
||||
function startUploadTask() {
|
||||
// 模拟批量上传任务
|
||||
const files = ['image1.png', 'document1.pdf', 'video1.mp4'];
|
||||
const taskIds = [];
|
||||
|
||||
files.forEach((file, index) => {
|
||||
const taskId = feedbackDock.startTask({
|
||||
name: file,
|
||||
type: 'upload'
|
||||
});
|
||||
taskIds.push(taskId);
|
||||
|
||||
// 模拟上传进度
|
||||
let progress = 0;
|
||||
const interval = setInterval(() => {
|
||||
progress += 5;
|
||||
if (progress <= 100) {
|
||||
feedbackDock.updateTask(taskId, progress);
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
// 模拟100%成功率
|
||||
feedbackDock.finishTask(taskId, 'success');
|
||||
}
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
|
||||
function showSuccessToast() {
|
||||
feedbackDock.toast({
|
||||
type: 'success',
|
||||
message: '操作成功！'
|
||||
});
|
||||
}
|
||||
|
||||
function showErrorToast() {
|
||||
feedbackDock.toast({
|
||||
type: 'error',
|
||||
message: '操作失败，请重试！'
|
||||
});
|
||||
}
|
||||
|
||||
function showWarningToast() {
|
||||
feedbackDock.toast({
|
||||
type: 'warning',
|
||||
message: '请注意，操作可能会影响其他功能！'
|
||||
});
|
||||
}
|
||||
|
||||
function showInfoToast() {
|
||||
feedbackDock.toast({
|
||||
type: 'info',
|
||||
message: '这是一条信息提示。'
|
||||
});
|
||||
}
|
||||
|
||||
function simulateDownloadFailure() {
|
||||
// 模拟单个文件下载失败
|
||||
const fileName = 'important-document.pdf';
|
||||
|
||||
// 模拟下载过程
|
||||
setTimeout(() => {
|
||||
// 下载失败，显示错误 Toast
|
||||
feedbackDock.toast({
|
||||
type: 'error',
|
||||
message: `文件 ${fileName} 下载失败`
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user