oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2025-12-01 22:27:11 +08:00
1 parent 494f1ad01f
commit 0ab2796dd4
21 files changed
+1583 -472
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/base-project/base-app/test3.html
+120 -429
View File
@@ -1,457 +1,148 @@
<!DOCTYPE html>
<html lang="zh-CN">
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查询进度步骤条 - 精确对齐版本</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 40px 20px;
}
.g3-main-content-indicator{
display: block;
}
<meta charset="UTF-8" />
<title>高级邀请页面</title>
<style>
body {
margin: 0;
font-family: "Inter", sans-serif;
background: #f3f4f7;
}
.g3-main-content-indicator-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 15px;
color: #1a2980;
}
/* 顶部渐变 Header */
.header {
width: 100%;
padding: 40px 24px;
background: linear-gradient(135deg, #4d8dff, #6fa5ff);
color: white;
font-size: 26px;
font-weight: 600;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.progress-steps {
display: flex;
justify-content: space-between;
position: relative;
margin: 60px 0px;
counter-reset: step;
}
/* 内容卡片 */
.container {
margin-top: -32px;
padding: 0 24px 40px;
}
.step {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.card {
background: white;
padding: 24px;
border-radius: 20px;
box-shadow: 0 6px 20px rgba(0,0,0,0.06);
margin-bottom: 24px;
}
.step-connector {
position: absolute;
top: 28px;
height: 4px;
background-color: #e0e0e0;
z-index: 1;
}
.title-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.step-progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background: #4b6cb7;
transition: width 0.8s ease, background-color 0.8s ease;
z-index: 2;
}
.title {
font-size: 20px;
font-weight: 600;
}
.step-progress.success {
background: linear-gradient(to right, #4CAF50, #2E7D32);
}
.invite-code {
font-size: 40px;
font-weight: 700;
letter-spacing: 4px;
color: #333;
text-align: center;
margin-top: 12px;
}
.step-progress.failed {
background: linear-gradient(to right, #f44336, #c62828);
}
.copy-btn {
display: flex;
justify-content: center;
margin-top: 8px;
font-size: 14px;
color: #4d8dff;
cursor: pointer;
}
.step-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
color: #999;
font-weight: bold;
border: 4px solid white;
box-shadow: 0 0 0 3px #e0e0e0;
transition: all 0.5s ease;
position: relative;
z-index: 4;
font-size: 24px;
}
/* 二维码卡片设计 */
.qr-card {
background: white;
padding: 20px;
border-radius: 20px;
text-align: center;
box-shadow: 0 4px 14px rgba(0,0,0,0.05);
margin-bottom: 24px;
}
.step.active .step-icon {
background: #4b6cb7;
color: white;
box-shadow: 0 0 0 3px #b8c6f0;
animation: pulse 1.5s infinite;
}
.qr-img {
width: 190px;
height: 190px;
border-radius: 12px;
border: 1px solid #eee;
}
.step.completed .step-icon {
background: #4CAF50;
color: white;
box-shadow: 0 0 0 3px #a5d6a7;
}
.badge {
background: #eef1ff;
padding: 6px 14px;
border-radius: 14px;
font-size: 14px;
color: #4d5bff;
}
.step.failed .step-icon {
background: #f44336;
color: white;
box-shadow: 0 0 0 3px #ffcdd2;
}
.member-item {
padding: 14px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 16px;
}
.step.completed .step-icon::after {
content: '✓';
font-size: 24px;
}
.step.failed .step-icon::after {
content: '✕';
font-size: 24px;
}
.step-label {
margin-top: 10px;
text-align: center;
font-size: 14px;
color: #666;
font-weight: 500;
max-width: 100px;
}
.step.active .step-label {
color: #4b6cb7;
font-weight: 600;
}
.step.completed .step-label {
color: #4CAF50;
}
.step.failed .step-label {
color: #f44336;
font-weight: 600;
}
.progress-info {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
margin-top: 20px;
text-align: center;
border-left: 4px solid #4b6cb7;
display: flex;
flex-direction: column;
justify-content: center;
}
.progress-info.failed {
border-left-color: #f44336;
}
.progress-info.success {
border-left-color: #4CAF50;
}
.progress-status {
font-size: 16px;
color: #333;
margin-bottom: 10px;
}
.progress-details {
font-size: 18px;
line-height: 1.5;
}
.progress-time {
display: inline-block;
background: #e3f2fd;
padding: 3px 8px;
border-radius: 4px;
font-size: 16px;
color: #1565c0;
margin-top: 5px;
}
</style>
.member-item:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<div id="statusIndicator" class="g3-main-content-indicator">
<div class="g3-main-content-indicator-title">查询状态</div>
<div class="progress-steps">
<!-- 步骤1 -->
<div class="step active" id="step1">
<div class="step-icon">1</div>
<div class="step-label">验证查询条件</div>
</div>
<!-- 步骤2 -->
<div class="step" id="step2">
<div class="step-icon">2</div>
<div class="step-label">发出请求</div>
</div>
<!-- Header -->
<div class="header">邀请好友加入空间</div>
<!-- 步骤3 -->
<div class="step" id="step3">
<div class="step-icon">3</div>
<div class="step-label">等待响应</div>
</div>
<!-- 内容 -->
<div class="container">
<!-- 步骤4 -->
<div class="step" id="step4">
<div class="step-icon">4</div>
<div class="step-label">查询成功</div>
</div>
<!-- 连接线1-2 -->
<div class="step-connector" id="connector1" style="left: 12.5%; width: 25%;">
<div class="step-progress" id="progress1"></div>
</div>
<!-- 连接线2-3 -->
<div class="step-connector" id="connector2" style="left: 37.5%; width: 25%;">
<div class="step-progress" id="progress2"></div>
</div>
<!-- 连接线3-4 -->
<div class="step-connector" id="connector3" style="left: 62.5%; width: 25%;">
<div class="step-progress" id="progress3"></div>
</div>
</div>
<div class="progress-info" id="progressInfo">
<div class="progress-details" id="progressDetails">
检查查询参数的有效性，确保数据请求符合系统要求。
<div class="progress-time">已用时间: <span id="timeElapsed">0分00秒</span></div>
</div>
</div>
<!-- 邀请码卡片 -->
<div class="card">
<div class="title-row">
<div class="title">我的邀请码</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const steps = document.querySelectorAll('.step');
const stepProgresses = document.querySelectorAll('.step-progress');
const connectors = document.querySelectorAll('.step-connector');
const progressInfoElement = document.getElementById('progressInfo');
const progressDetails = document.getElementById('progressDetails');
const timeElapsed = document.getElementById('timeElapsed');
let currentStep = 1;
let isRunning = false;
let hasFailed = false;
let timerInterval;
let seconds = 0;
let stepStatus = [null, 'active', null, null, null];
<div class="invite-code">123456</div>
<div class="copy-btn">点击复制邀请码</div>
</div>
<!-- 二维码卡片 -->
<div class="qr-card">
<img
src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=demo"
class="qr-img"
alt="二维码"
/>
<p style="margin-top: 12px; color: #666; font-size: 14px;">
扫码加入我的共享空间
</p>
</div>
// 计算连接线位置
function calculateConnectorPositions() {
const stepWidth = 100 / steps.length; // 每个步骤占据的宽度百分比
<!-- 成员卡片 -->
<div class="card">
<div class="title-row">
<div class="title">空间成员</div>
<div class="badge">3 人</div>
</div>
connectors.forEach((connector, index) => {
// 计算连接线的起始位置和宽度
const left = (index + 0.5) * stepWidth; // 从第一个步骤的中心开始
const width = stepWidth; // 连接线宽度等于步骤宽度
<div class="member-item">成员 A</div>
<div class="member-item">成员 B</div>
<div class="member-item">成员 C</div>
</div>
connector.style.left = left + `%`;
connector.style.width = width + `%`;
});
}
</div>
// 更新步骤状态
function updateSteps() {
steps.forEach((step, index) => {
step.classList.remove('active', 'completed', 'failed');
if (index + 1 < currentStep) {
step.classList.add('completed');
} else if (index + 1 === currentStep) {
if (currentStep > steps.length) {
// 如果所有步骤已完成，最后一个步骤显示为完成状态
step.classList.add('completed');
} else {
step.classList.add('active');
}
}
});
}
// 更新进度条
function updateProgressBars() {
// 重置所有进度条
stepProgresses.forEach((progress, index) => {
progress.style.width = '0';
progress.classList.remove('success', 'failed');
});
// 设置已完成的进度条
for (let i = 1; i < currentStep; i++) {
if (i <= stepProgresses.length) {
const progress = document.getElementById(`progress` + i);
if (progress) {
progress.style.width = '100%';
// 根据步骤状态设置颜色
if (stepStatus[i] === 'completed') {
progress.classList.add('success');
} else if (stepStatus[i] === 'failed') {
progress.classList.add('failed');
}
}
}
}
}
// 标记步骤失败
function markStepFailed(stepIndex, error) {
stepStatus[stepIndex] = 'failed';
hasFailed = true;
steps[stepIndex - 1].classList.remove('active', 'completed');
steps[stepIndex - 1].classList.add('failed');
// 标记前一个连接线为失败
if (stepIndex > 1) {
const prevProgress = document.getElementById("progress" + (stepIndex - 1));
if (prevProgress) {
prevProgress.classList.add('failed');
}
}
progressInfoElement.classList.add('failed');
isRunning = false;
stopTimer();
updateProgressBars();
}
// 标记步骤成功
function markStepCompleted(stepIndex) {
stepStatus[stepIndex] = 'completed';
updateSteps();
// 标记前一个连接线为成功
if (stepIndex > 1) {
const prevProgress = document.getElementById("progress" + (stepIndex - 1));
if (prevProgress) {
prevProgress.classList.add('success');
}
}
updateProgressBars();
}
// 标记所有步骤完成
function markAllStepsCompleted() {
for (let i = 1; i <= steps.length; i++) {
stepStatus[i] = 'completed';
}
updateSteps();
updateProgressBars();
}
// 更新状态信息
function updateStatus() {
const statusTexts = [
'',
'正在验证查询条件...',
'正在向服务器发出请求...',
'正在等待服务器响应...',
'查询成功，正在处理结果...'
];
const detailTexts = [
'',
'检查查询参数的有效性，确保数据请求符合系统要求。',
'将查询请求发送到远程服务器，建立数据连接。',
'等待服务器处理查询请求并返回结果。',
'处理查询结果并准备返回，即将完成整个过程。'
];
progressDetails.innerHTML = detailTexts[currentStep] +
'<div class="progress-time">已用时间: <span id="timeElapsed">'
+ formatTime(seconds) +
'</span></div>';
progressInfoElement.classList.remove('failed');
}
// 格式化时间显示
function formatTime(totalSeconds) {
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
return minutes + "分" + seconds.toString().padStart(2, "0") + "秒";
}
// 开始计时器
function startTimer() {
seconds = 0;
timerInterval = setInterval(() => {
seconds++;
timeElapsed.textContent = formatTime(seconds);
}, 1000);
}
// 停止计时器
function stopTimer() {
clearInterval(timerInterval);
}
// 初始化
updateSteps();
updateProgressBars();
updateStatus();
function runStep() {
if (currentStep > steps.length) {
// 查询完成
isRunning = false;
stopTimer();
markAllStepsCompleted();
progressDetails.innerHTML =
'数据查询已成功完成，结果已准备就绪。' +
'<div class="progress-time">总用时: <span id="timeElapsed">'
+ formatTime(seconds) +
'</span></div>';
return;
}
updateStatus();
updateSteps();
updateProgressBars();
const stepWillFail = Math.random() < 0.2;
const duration = [0,1000,1000,1000,1000][currentStep];
setTimeout(() => {
if (stepWillFail && !hasFailed) {
markStepFailed(currentStep, "模拟失败");
hasFailed = true;
return;
}
markStepCompleted(currentStep);
currentStep++;
runStep(); // ✅ 递归调用下一步
}, duration);
}
runStep();
})
</script>
</body>
</html>