独立渲染引擎就绪引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TRIZ 理想解: 隐藏式静压康达效应气流分配系统</title>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
/* 核心调色板：深邃未来工业风 */
--bg-color: #050914;
--panel-bg: #0b1221;
--grid-color: rgba(56, 189, 248, 0.05);
--glass-color: rgba(16, 26, 46, 0.8);
--glass-border: rgba(56, 189, 248, 0.3);
--air-primary: #00f0ff;
--air-secondary: #0066ff;
--pressure-color: #ff4d00;
--pressure-glow: rgba(255, 77, 0, 0.4);
--text-main: #e2e8f0;
--text-muted: #64748b;
/* 动态变量 (由 JS 控制) */
--flow-speed: 2s;
--flow-opacity: 0.8;
--pressure-intensity: 0.6;
--particle-density: 200;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-color);
color: var(--text-main);
font-family: 'Rajdhani', 'PingFang SC', 'Microsoft YaHei', sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-image:
linear-gradient(var(--grid-color) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
background-size: 30px 30px;
}
/* 扫描线特效 */
body::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
background-size: 100% 4px, 3px 100%;
pointer-events: none;
z-index: 999;
}
.dashboard {
width: 95vw;
max-width: 1600px;
height: 90vh;
display: grid;
grid-template-columns: 350px 1fr;
gap: 24px;
position: relative;
z-index: 10;
}
/* 控制面板 */
.control-panel {
background: var(--panel-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px;
box-shadow: 0 0 30px rgba(0, 240, 255, 0.05) inset;
backdrop-filter: blur(10px);
}
.panel-header {
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 16px;
}
.panel-title {
font-size: 24px;
font-weight: 700;
color: var(--air-primary);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.panel-title::before {
content: '';
display: block;
width: 12px;
height: 12px;
background: var(--air-primary);
box-shadow: 0 0 10px var(--air-primary);
border-radius: 50%;
animation: pulse 2s infinite;
}
.panel-subtitle {
font-size: 14px;
color: var(--text-muted);
line-height: 1.5;
}
.triz-highlight {
background: rgba(0, 240, 255, 0.1);
border-left: 3px solid var(--air-primary);
padding: 12px;
font-size: 13px;
margin-top: 10px;
border-radius: 0 8px 8px 0;
}
/* 交互控件 */
.control-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.control-label {
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 600;
color: var(--text-main);
}
.control-value {
color: var(--air-primary);
font-family: 'Rajdhani', monospace;
font-weight: 700;
font-size: 18px;
}
/* 自定义滑块 */
input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 12px;
background: var(--air-primary);
cursor: pointer;
box-shadow: 0 0 10px var(--air-primary);
border-radius: 2px;
margin-top: -8px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
}
input[type=range]:focus {
outline: none;
}
/* 状态指示器 */
.status-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: auto;
}
.status-card {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
padding: 16px;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.status-card .label {
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
}
.status-card .value {
font-family: 'Rajdhani', monospace;
font-size: 22px;
color: var(--text-main);
font-weight: 700;
}
.status-card.warning .value {
color: var(--pressure-color);
text-shadow: 0 0 10px var(--pressure-glow);
}
/* 可视化主区域 */
.visualization-area {
position: relative;
background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
border: 1px solid var(--glass-border);
border-radius: 12px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.svg-container {
width: 100%;
height: 100%;
}
/* HUD 叠加层 */
.hud-overlay {
position: absolute;
top: 20px;
left: 20px;
pointer-events: none;
font-family: 'Rajdhani', monospace;
color: rgba(255,255,255,0.4);
font-size: 12px;
letter-spacing: 1px;
line-height: 1.8;
}
/* SVG 动画与样式 */
.flow-path {
fill: none;
stroke: var(--air-primary);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 10 30;
animation: flowAnim var(--flow-speed) linear infinite;
opacity: var(--flow-opacity);
filter: drop-shadow(0 0 4px var(--air-primary));
}
.flow-path.secondary {
stroke: var(--air-secondary);
stroke-width: 1.5;
stroke-dasharray: 5 40;
animation-duration: calc(var(--flow-speed) * 1.2);
filter: drop-shadow(0 0 2px var(--air-secondary));
}
.flow-film {
fill: url(#film-gradient);
opacity: 0.3;
animation: pulseFilm 3s ease-in-out infinite alternate;
}
.pressure-box {
fill: url(#pressure-gradient);
stroke: #333;
stroke-width: 2;
transition: fill 0.3s ease;
}
.pressure-glow {
fill: none;
stroke: var(--pressure-color);
stroke-width: 4;
opacity: var(--pressure-intensity);
filter: drop-shadow(0 0 8px var(--pressure-color));
transition: opacity 0.3s ease;
}
/* 局部放大镜特效 */
.zoom-lens {
filter: drop-shadow(0 10px 20px rgba(0,0,0,0.8));
}
.lens-border {
fill: rgba(5, 9, 20, 0.95);
stroke: var(--air-primary);
stroke-width: 2;
}
.coanda-flow {
fill: none;
stroke: var(--air-primary);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 8 16;
animation: flowAnim calc(var(--flow-speed) * 0.5) linear infinite;
filter: drop-shadow(0 0 5px var(--air-primary));
}
/* 关键帧动画 */
@keyframes flowAnim {
from { stroke-dashoffset: 1000; }
to { stroke-dashoffset: 0; }
}
@keyframes pulse {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 240, 255, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); }
}
@keyframes pulseFilm {
0% { opacity: 0.2; }
100% { opacity: 0.4; }
}
/* 响应式调整 */
@media (max-width: 1024px) {
.dashboard {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
}
</style>
</head>
<body>
<div class="dashboard">
<!-- 左侧控制与信息面板 -->
<div class="control-panel">
<div class="panel-header">
<h1 class="panel-title">康达气膜系统</h1>
<div class="panel-subtitle">TRIZ 理想解: 隐藏式边界静压气流分配系统</div>
<div class="triz-highlight">
<strong>IFR 核心逻辑：</strong><br>
消除内部挡板矛盾。利用天幕隐藏黑边作为“静压箱”资源，通过微米狭缝挤压气流，诱发康达效应（贴壁效应），实现大面积均匀层流。
</div>
</div>
<div class="control-group">
<div class="control-label">
<span>系统风扇功率 (风压)</span>
<span class="control-value" id="pressure-val">60%</span>
</div>
<input type="range" id="pressure-slider" min="10" max="100" value="60">
</div>
<div class="control-group">
<div class="control-label">
<span>出风狭缝宽度 (微调)</span>
<span class="control-value" id="slit-val">0.35 mm</span>
</div>
<input type="range" id="slit-slider" min="20" max="50" value="35">
</div>
<div class="status-grid">
<div class="status-card warning">
<span class="label">边缘静压 (P_static)</span>
<span class="value" id="stat-pressure">240 Pa</span>
</div>
<div class="status-card">
<span class="label">贴壁流速 (V_coanda)</span>
<span class="value" id="stat-velocity">12.5 m/s</span>
</div>
<div class="status-card">
<span class="label">层流覆盖率</span>
<span class="value" id="stat-coverage">98.2%</span>
</div>
<div class="status-card">
<span class="label">系统状态</span>
<span class="value" style="color: #4ade80;">层流稳态</span>
</div>
</div>
</div>
<!-- 右侧 SVG 可视化区域 -->
<div class="visualization-area">
<div class="hud-overlay">
SYS.TARGET: WIDE_GLASS_SURFACE<br>
AERO.MODE: COANDA_EFFECT<br>
BAFFLES: ZERO_PHYSICAL<br>
GRID_ALIGN: ACTIVE
</div>
<svg class="svg-container" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid meet">
<defs>
<!-- 发光滤镜 -->
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- 静压箱渐变 -->
<linearGradient id="pressure-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#1f2937" />
<stop offset="100%" stop-color="#111827" />
</linearGradient>
<!-- 气膜大面积渐变 -->
<linearGradient id="film-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="rgba(0, 240, 255, 0.8)" />
<stop offset="40%" stop-color="rgba(0, 102, 255, 0.4)" />
<stop offset="100%" stop-color="rgba(0, 102, 255, 0)" />
</linearGradient>
<!-- 局部放大镜裁剪路径 -->
<clipPath id="lens-clip">
<circle cx="950" cy="600" r="160" />
</clipPath>
<!-- 箭头标记 -->
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="var(--air-primary)" />
</marker>
</defs>
<!-- ================= 主视图：天幕俯视/透视结构 ================= -->
<g id="main-view" transform="translate(100, 50)">
<!-- 玻璃主面板 -->
<rect x="100" y="50" width="600" height="650" rx="20" fill="var(--glass-color)" stroke="var(--glass-border)" stroke-width="2" />
<!-- 玻璃高光 -->
<path d="M 100 70 Q 400 50 700 70 L 700 150 Q 400 100 100 150 Z" fill="rgba(255,255,255,0.03)" pointer-events="none" />
<!-- U型隐藏式静压边缘 (作为TRIZ的已有资源) -->
<!-- 左侧 -->
<path d="M 50 20 L 100 50 L 100 700 L 50 720 Z" class="pressure-box" />
<!-- 顶部 -->
<path d="M 50 20 L 750 20 L 700 50 L 100 50 Z" class="pressure-box" />
<!-- 右侧 -->
<path d="M 750 20 L 700 50 L 700 700 L 750 720 Z" class="pressure-box" />
<!-- 静压建立指示 (橙色发光线，代表压力均等化) -->
<path d="M 90 680 L 90 40 L 710 40 L 710 680" class="pressure-glow" />
<!-- 大面积层流气膜 (康达效应展开) -->
<rect x="100" y="50" width="600" height="500" rx="20" class="flow-film" />
<!-- 动态气流粒子线 (模拟层流平滑扫过) -->
<g id="airflow-lines">
<!-- 顶部吹出 -->
<path d="M 150 50 C 150 200, 150 400, 150 700" class="flow-path" />
<path d="M 250 50 C 250 200, 250 400, 250 700" class="flow-path secondary" />
<path d="M 350 50 C 350 200, 350 400, 350 700" class="flow-path" />
<path d="M 400 50 C 400 200, 400 400, 400 700" class="flow-path secondary" />
<path d="M 450 50 C 450 200, 450 400, 450 700" class="flow-path" />
<path d="M 550 50 C 550 200, 550 400, 550 700" class="flow-path secondary" />
<path d="M 650 50 C 650 200, 650 400, 650 700" class="flow-path" />
<!-- 两侧吹出，利用康达效应向中间汇聚并向下流 -->
<!-- 左侧向右下 -->
<path d="M 100 150 C 200 150, 200 400, 200 700" class="flow-path" />
<path d="M 100 250 C 250 250, 300 450, 300 700" class="flow-path secondary" />
<path d="M 100 350 C 200 350, 250 500, 250 700" class="flow-path" />
<!-- 右侧向左下 -->
<path d="M 700 150 C 600 150, 600 400, 600 700" class="flow-path" />
<path d="M 700 250 C 550 250, 500 450, 500 700" class="flow-path secondary" />
<path d="M 700 350 C 600 350, 550 500, 550 700" class="flow-path" />
</g>
<!-- 排气口指示 -->
<g transform="translate(400, 720)">
<text x="0" y="0" fill="var(--text-muted)" font-size="14" text-anchor="middle" letter-spacing="4">EXHAUST ZONE / 宽口排气区</text>
<path d="M -200 15 Q 0 40 200 15" fill="none" stroke="var(--text-muted)" stroke-width="1" stroke-dasharray="4 4" />
</g>
<!-- 标注线 -->
<line x1="710" y1="200" x2="820" y2="150" stroke="var(--text-muted)" stroke-width="1" />
<text x="830" y="145" fill="var(--text-main)" font-size="14" font-weight="600">隐藏式渐变截面静压箱</text>
<text x="830" y="165" fill="var(--pressure-color)" font-size="12">建立均匀系统前置压力</text>
<line x1="400" y1="300" x2="820" y2="300" stroke="var(--text-muted)" stroke-width="1" />
<circle cx="400" cy="300" r="4" fill="var(--air-primary)" />
<text x="830" y="295" fill="var(--text-main)" font-size="14" font-weight="600">无挡板中空层 (IFR状态)</text>
<text x="830" y="315" fill="var(--air-primary)" font-size="12">宽广层流气膜扫过</text>
</g>
<!-- ================= 局部放大：截面微米狭缝与康达效应 ================= -->
<!-- 连接线 -->
<path d="M 200 100 L 800 450" stroke="rgba(255,255,255,0.2)" stroke-width="2" stroke-dasharray="5 5" />
<path d="M 200 100 L 950 440" stroke="rgba(255,255,255,0.2)" stroke-width="2" stroke-dasharray="5 5" />
<g class="zoom-lens">
<!-- 放大镜外框底色与裁剪 -->
<circle cx="950" cy="600" r="160" class="lens-border" />
<circle cx="950" cy="600" r="150" fill="#0b1221" />
<g clip-path="url(#lens-clip)">
<!-- 背景网格 -->
<path d="M 800 450 L 1100 450 M 800 500 L 1100 500 M 800 550 L 1100 550 M 800 600 L 1100 600 M 800 650 L 1100 650 M 800 700 L 1100 700 M 800 750 L 1100 750" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
<path d="M 850 400 L 850 800 M 900 400 L 900 800 M 950 400 L 950 800 M 1000 400 L 1000 800 M 1050 400 L 1050 800" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
<!-- 玻璃内表面剖面 (上层玻璃) -->
<rect x="850" y="520" width="260" height="40" fill="rgba(16, 26, 46, 0.9)" stroke="var(--glass-border)" stroke-width="2" />
<text x="960" y="545" fill="var(--text-muted)" font-size="14" font-weight="600" text-anchor="middle">玻璃基板 GLASS SUBSTRATE</text>
<!-- 玻璃内表面发光层 (表示气流贴附) -->
<rect x="850" y="560" width="260" height="4" fill="var(--air-primary)" filter="url(#glow)" opacity="0.8" />
<!-- 隐藏边框/静压箱剖面 -->
<path d="M 800 450 L 890 450 L 890 560 L 800 560 Z" fill="#1f2937" stroke="#4b5563" stroke-width="2" />
<path d="M 800 560 L 850 560 L 850 620 L 800 620 Z" fill="#1f2937" stroke="#4b5563" stroke-width="2" />
<!-- 静压红色区域 -->
<circle cx="845" cy="505" r="30" fill="var(--pressure-glow)" filter="url(#glow)" />
<text x="845" y="510" fill="var(--pressure-color)" font-size="18" font-weight="700" text-anchor="middle">P+</text>
<!-- 微米级狭缝结构 (<5度夹角) -->
<!-- 出风口下唇边，做成极细的锐角 -->
<path d="M 850 560 L 870 564 L 850 580 Z" fill="#374151" stroke="#9ca3af" stroke-width="1" />
<!-- 气流箭头组 (展示挤出后贴壁) -->
<!-- 挤出流 -->
<path d="M 860 562 C 870 563, 880 564, 890 564" class="coanda-flow" marker-end="url(#arrow)" />
<!-- 贴壁流 (康达效应) -->
<path d="M 890 564 C 920 564, 950 564, 1050 564" class="coanda-flow" marker-end="url(#arrow)" />
<path d="M 910 568 C 940 568, 970 568, 1050 568" class="coanda-flow" style="stroke-width: 1.5; opacity: 0.6;" />
<path d="M 930 572 C 960 572, 990 572, 1050 572" class="coanda-flow" style="stroke-width: 1; opacity: 0.3;" />
</g>
<!-- 放大镜刻度与装饰 -->
<circle cx="950" cy="600" r="160" fill="none" stroke="var(--air-primary)" stroke-width="2" stroke-dasharray="10 5 2 5" />
<!-- 准星 -->
<path d="M 950 430 L 950 445 M 950 755 L 950 770 M 780 600 L 795 600 M 1105 600 L 1120 600" stroke="var(--air-primary)" stroke-width="2" />
<rect x="880" y="730" width="140" height="24" rx="4" fill="#000" stroke="var(--air-primary)" />
<text x="950" y="747" fill="var(--air-primary)" font-size="12" font-weight="700" text-anchor="middle" letter-spacing="1">微观剖面图: 康达效应</text>
</g>
<!-- 狭缝参数标注 -->
<g transform="translate(860, 520)">
<line x1="10" y1="38" x2="10" y2="20" stroke="var(--air-primary)" stroke-width="1" />
<line x1="10" y1="46" x2="10" y2="60" stroke="var(--air-primary)" stroke-width="1" />
<text x="15" y="25" fill="var(--text-main)" font-size="12">狭缝 0.2-0.5mm</text>
<text x="15" y="70" fill="var(--text-main)" font-size="12">夹角 < 5°</text>
</g>
</svg>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const pressureSlider = document.getElementById('pressure-slider');
const slitSlider = document.getElementById('slit-slider');
const pressureVal = document.getElementById('pressure-val');
const slitVal = document.getElementById('slit-val');
const statPressure = document.getElementById('stat-pressure');
const statVelocity = document.getElementById('stat-velocity');
const statCoverage = document.getElementById('stat-coverage');
const root = document.documentElement;
// 核心动画参数更新函数
function updateSimulation() {
const pressure = parseInt(pressureSlider.value); // 10 - 100
const slit = parseInt(slitSlider.value); // 20 - 50 (0.20 - 0.50 mm)
// 更新UI显示
pressureVal.textContent = pressure + '%';
slitVal.textContent = (slit / 100).toFixed(2) + ' mm';
// 计算物理模拟状态 (简化模型)
// 风压与输入功率成正比
const calculatedPressure = Math.round(pressure * 4); // 40 - 400 Pa
// 流速 = 压力 / 狭缝宽度的某个系数 (狭缝越小，相同压力下流速越快，但有上限)
const velocity = (calculatedPressure / slit * 1.5).toFixed(1);
// 覆盖率：压力适中且流速足够时覆盖率最高，过大可能导致紊流下降
let coverage = 100 - Math.abs(calculatedPressure - 250) * 0.05 - Math.abs(slit - 35) * 0.2;
coverage = Math.min(Math.max(coverage, 60), 99.8).toFixed(1);
// 渲染数据面板
statPressure.textContent = calculatedPressure + ' Pa';
statVelocity.textContent = velocity + ' m/s';
statCoverage.textContent = coverage + '%';
// 更新 CSS 变量驱动动画改变
// 速度：风压越高，动画速度时间越短 (1.5s - 4s)
const speed = 4 - (pressure / 100) * 2.5;
root.style.setProperty('--flow-speed', speed + 's');
// 气流透明度/亮度：由覆盖率和风压决定
root.style.setProperty('--flow-opacity', (pressure / 100 * 0.5 + 0.5).toString());
// 静压箱亮度
root.style.setProperty('--pressure-intensity', (pressure / 100 * 0.8 + 0.2).toString());
// 警告状态：如果压力过大或狭缝过大导致流速下降
const pressureCard = statPressure.parentElement;
if (calculatedPressure > 350 || calculatedPressure < 100) {
pressureCard.classList.add('warning');
} else {
pressureCard.classList.remove('warning');
}
}
// 绑定事件
pressureSlider.addEventListener('input', updateSimulation);
slitSlider.addEventListener('input', updateSimulation);
// 初始化 (自动播放无需额外JS控制，CSS Keyframes已在DOMContentLoaded后自然执行)
updateSimulation();
});
</script>
</body>
</html>
积分规则：第一轮对话扣减8分，后续每轮扣6分
等待动画代码生成...