From 68307cf89959e2891967dae5b2580ce92894d5b4 Mon Sep 17 00:00:00 2001 From: fireceW Date: Fri, 30 Jan 2026 22:47:09 +0800 Subject: [PATCH] =?UTF-8?q?ui-v2-light:=20=E6=B5=85=E8=89=B2=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=20+=20=E6=9B=B4=E5=AE=BD=E5=B8=83=E5=B1=80=EF=BC=88co?= =?UTF-8?q?ntainer=201280px=EF=BC=8C=E6=9B=B4=E4=BA=AE=E8=83=8C=E6=99=AF?= =?UTF-8?q?=E4=B8=8E=E5=8D=A1=E7=89=87=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- chipfuzz/assets/main.js | 105 +-- chipfuzz/assets/style.css | 1595 +++++++++++++++++++---------------- chipfuzz/assets/workflow.js | 17 +- chipfuzz/index.html | 313 +++---- 4 files changed, 1078 insertions(+), 952 deletions(-) diff --git a/chipfuzz/assets/main.js b/chipfuzz/assets/main.js index a23e1e5..0fff318 100644 --- a/chipfuzz/assets/main.js +++ b/chipfuzz/assets/main.js @@ -364,10 +364,10 @@ const delta = currentCoverage - initialCoverageValue; if (delta > 0) { coverageDeltaEl.textContent = `+${delta.toFixed(3)}%`; - coverageDeltaEl.style.color = "#4ade80"; // 绿色 + coverageDeltaEl.style.color = "var(--success, #34d399)"; // 绿色 } else if (delta < 0) { coverageDeltaEl.textContent = `${delta.toFixed(3)}%`; - coverageDeltaEl.style.color = "#f87171"; // 红色 + coverageDeltaEl.style.color = "var(--danger, #f87171)"; // 红色 } else { coverageDeltaEl.textContent = "+0%"; coverageDeltaEl.style.color = "#888"; // 灰色 @@ -422,8 +422,8 @@ datasets: [{ label: isBar ? "等待数据" : "覆盖率 (%)", data: isBar ? [0] : [], - backgroundColor: isBar ? 'rgba(169, 182, 218, 0.2)' : 'rgba(231, 76, 60, 0.1)', - borderColor: isBar ? 'rgba(169, 182, 218, 0.5)' : 'rgba(231, 76, 60, 0.5)', + backgroundColor: isBar ? 'rgba(34, 211, 238, 0.2)' : 'rgba(52, 211, 153, 0.15)', + borderColor: isBar ? 'rgba(34, 211, 238, 0.6)' : 'rgba(52, 211, 153, 0.6)', borderWidth: 1 }] }, @@ -433,22 +433,22 @@ scales: isBar ? { y: { beginAtZero: true, - grid: { color: 'rgba(255, 255, 255, 0.05)' }, - ticks: { color: 'rgba(169, 182, 218, 0.8)', font: { size: 10 } } + grid: { color: 'rgba(255, 255, 255, 0.06)' }, + ticks: { color: 'rgba(180, 188, 200, 0.9)', font: { size: 10 } } }, x: { - grid: { color: 'rgba(255, 255, 255, 0.05)' }, - ticks: { color: 'rgba(169, 182, 218, 0.8)', font: { size: 10 } } + grid: { color: 'rgba(255, 255, 255, 0.06)' }, + ticks: { color: 'rgba(180, 188, 200, 0.9)', font: { size: 10 } } } } : { y: { beginAtZero: false, - grid: { color: 'rgba(255, 255, 255, 0.05)' }, - ticks: { color: 'rgba(169, 182, 218, 0.8)', font: { size: 10 } } + grid: { color: 'rgba(255, 255, 255, 0.06)' }, + ticks: { color: 'rgba(180, 188, 200, 0.9)', font: { size: 10 } } }, x: { - grid: { color: 'rgba(255, 255, 255, 0.05)' }, - ticks: { color: 'rgba(169, 182, 218, 0.8)', font: { size: 10 } } + grid: { color: 'rgba(255, 255, 255, 0.06)' }, + ticks: { color: 'rgba(180, 188, 200, 0.9)', font: { size: 10 } } } }, plugins: { @@ -456,7 +456,7 @@ display: true, position: 'top', labels: { - color: 'rgba(169, 182, 218, 0.9)', + color: 'rgba(230, 237, 243, 0.95)', font: { size: 10 }, padding: 8, usePointStyle: true @@ -501,11 +501,11 @@ const rate = summary.compile_success_rate || 0; if (rate > 0) { compileSuccessRateEl.textContent = `${rate.toFixed(2)}%`; - compileSuccessRateEl.style.color = rate >= 80 ? "#4ade80" : rate >= 50 ? "#fbbf24" : "#f87171"; + compileSuccessRateEl.style.color = rate >= 80 ? "var(--success, #34d399)" : rate >= 50 ? "var(--warning, #fbbf24)" : "var(--danger, #f87171)"; console.log(`[统计] 编译成功率: ${rate.toFixed(2)}%`); } else { compileSuccessRateEl.textContent = "-"; - compileSuccessRateEl.style.color = "#888"; + compileSuccessRateEl.style.color = "var(--muted)"; console.log('[统计] 编译成功率: 无数据'); } } @@ -518,7 +518,7 @@ const rate = summary.emulator_success_rate || 0; if (rate > 0) { emulatorSuccessRateEl.textContent = `${rate.toFixed(2)}%`; - emulatorSuccessRateEl.style.color = rate >= 80 ? "#4ade80" : rate >= 50 ? "#fbbf24" : "#f87171"; + emulatorSuccessRateEl.style.color = rate >= 80 ? "var(--success, #34d399)" : rate >= 50 ? "var(--warning, #fbbf24)" : "var(--danger, #f87171)"; console.log(`[统计] 模拟器执行成功率: ${rate.toFixed(2)}%`); } else { emulatorSuccessRateEl.textContent = "-"; @@ -535,7 +535,7 @@ const rate = summary.coverage_improved_rate ?? 0; if (rate > 0 || (summary.total_llm_generations || 0) > 0) { coverageImprovedRateEl.textContent = `${(rate || 0).toFixed(2)}%`; - coverageImprovedRateEl.style.color = rate >= 80 ? "#4ade80" : rate >= 50 ? "#fbbf24" : "#f87171"; + coverageImprovedRateEl.style.color = rate >= 80 ? "var(--success, #34d399)" : rate >= 50 ? "var(--warning, #fbbf24)" : "var(--danger, #f87171)"; console.log(`[统计] 占 LLM 生成比例: ${(rate || 0).toFixed(2)}%`); } else { coverageImprovedRateEl.textContent = "-"; @@ -620,15 +620,15 @@ { label: 'LLM 生成次数', data: llmCounts, - backgroundColor: 'rgba(74, 144, 226, 0.6)', - borderColor: 'rgba(74, 144, 226, 1)', + backgroundColor: 'rgba(34, 211, 238, 0.5)', + borderColor: 'rgba(34, 211, 238, 0.9)', borderWidth: 1 }, { label: '模拟器成功执行次数', data: emulatorCounts, - backgroundColor: 'rgba(80, 200, 120, 0.6)', - borderColor: 'rgba(80, 200, 120, 1)', + backgroundColor: 'rgba(52, 211, 153, 0.5)', + borderColor: 'rgba(52, 211, 153, 0.9)', borderWidth: 1 } ] @@ -640,24 +640,18 @@ y: { beginAtZero: true, grid: { - color: 'rgba(255, 255, 255, 0.05)' + color: 'rgba(255, 255, 255, 0.06)' }, ticks: { - color: 'rgba(169, 182, 218, 0.8)', - font: { - size: 10 - } + color: 'rgba(180, 188, 200, 0.9)', + font: { size: 10 } } }, x: { - grid: { - color: 'rgba(255, 255, 255, 0.05)' - }, + grid: { color: 'rgba(255, 255, 255, 0.06)' }, ticks: { - color: 'rgba(169, 182, 218, 0.8)', - font: { - size: 10 - }, + color: 'rgba(180, 188, 200, 0.9)', + font: { size: 10 }, maxRotation: 45, minRotation: 0 } @@ -668,10 +662,8 @@ display: true, position: 'top', labels: { - color: 'rgba(169, 182, 218, 0.9)', - font: { - size: 10 - }, + color: 'rgba(230, 237, 243, 0.95)', + font: { size: 10 }, padding: 8, usePointStyle: true } @@ -716,8 +708,8 @@ datasets: [{ label: '覆盖率 (%)', data: coveragePercentages, - borderColor: 'rgba(231, 76, 60, 1)', - backgroundColor: 'rgba(231, 76, 60, 0.1)', + borderColor: 'rgba(52, 211, 153, 0.9)', + backgroundColor: 'rgba(52, 211, 153, 0.12)', borderWidth: 2, fill: true, tension: 0.4 @@ -729,34 +721,19 @@ scales: { y: { beginAtZero: false, - grid: { - color: 'rgba(255, 255, 255, 0.05)' - }, - ticks: { - color: 'rgba(169, 182, 218, 0.8)', - font: { - size: 10 - } - }, - title: { - display: false - } + grid: { color: 'rgba(255, 255, 255, 0.06)' }, + ticks: { color: 'rgba(180, 188, 200, 0.9)', font: { size: 10 } }, + title: { display: false } }, x: { - grid: { - color: 'rgba(255, 255, 255, 0.05)' - }, + grid: { color: 'rgba(255, 255, 255, 0.06)' }, ticks: { - color: 'rgba(169, 182, 218, 0.8)', - font: { - size: 10 - }, + color: 'rgba(180, 188, 200, 0.9)', + font: { size: 10 }, maxRotation: 45, minRotation: 0 }, - title: { - display: false - } + title: { display: false } } }, plugins: { @@ -764,10 +741,8 @@ display: true, position: 'top', labels: { - color: 'rgba(169, 182, 218, 0.9)', - font: { - size: 10 - }, + color: 'rgba(230, 237, 243, 0.95)', + font: { size: 10 }, padding: 8, usePointStyle: true } diff --git a/chipfuzz/assets/style.css b/chipfuzz/assets/style.css index f99583f..e0b7a78 100644 --- a/chipfuzz/assets/style.css +++ b/chipfuzz/assets/style.css @@ -1,997 +1,1134 @@ -:root{ - --bg: #0b1020; - --bg2:#0f1730; - --card:#101a36; - --text:#e9eefc; - --muted:#a9b6da; - --line: rgba(255,255,255,.10); - --shadow: 0 18px 50px rgba(0,0,0,.35); - --primary:#7c5cff; - --primary2:#4ee6b5; - --danger:#ff4d6d; - --radius: 18px; - --radius2: 14px; - --container: 1120px; - --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; -} - -[data-theme="light"]{ - --bg:#f6f7fb; - --bg2:#ffffff; - --card:#ffffff; - --text:#0f172a; - --muted:#475569; - --line: rgba(15,23,42,.12); - --shadow: 0 18px 45px rgba(2,6,23,.12); - --primary:#5b4bff; - --primary2:#1ad6a3; -} - -*{box-sizing:border-box} -html,body{height:100%} -body{ - margin:0; - font-family:var(--sans); - color:var(--text); - background: - radial-gradient(900px 500px at 15% 10%, rgba(124,92,255,.20), transparent 60%), - radial-gradient(900px 500px at 80% 20%, rgba(78,230,181,.16), transparent 60%), - radial-gradient(900px 700px at 50% 120%, rgba(255,77,109,.10), transparent 60%), - linear-gradient(180deg, var(--bg), var(--bg2)); - line-height:1.55; -} - -a{color:inherit; text-decoration:none} -b{font-weight:700} - -.container{ +/* ============================================================ + ChipFuzzer — 全站视觉大改：配色 / 字体 / 卡片 / 表单 / 指标 + ============================================================ */ + +:root { + /* 主色：更浅的深色底 + 青色强调 */ + --bg: #101826; + --bg2: #141c2a; + --bg3: #1b2433; + --card: #182231; + --card-hover: #202b3c; + --text: #eef2f7; + --text-soft: #c1c9d4; + --muted: #8792a4; + --line: rgba(255, 255, 255, 0.08); + --line-strong: rgba(255, 255, 255, 0.14); + --shadow: 0 6px 28px rgba(0, 0, 0, 0.28); + --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.35); + --primary: #22d3ee; + --primary-dim: rgba(34, 211, 238, 0.15); + --primary-border: rgba(34, 211, 238, 0.35); + --success: #34d399; + --success-dim: rgba(52, 211, 153, 0.12); + --danger: #f87171; + --danger-dim: rgba(248, 113, 113, 0.12); + --warning: #fbbf24; + --radius: 12px; + --radius-sm: 8px; + --radius-lg: 16px; + --container: 1280px; + --space-xs: 6px; + --space-sm: 12px; + --space-md: 20px; + --space-lg: 28px; + --space-xl: 40px; + --space-2xl: 56px; + --mono: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code", Consolas, monospace; + --sans: "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif; +} + +[data-theme="light"] { + --bg: #f0f4f8; + --bg2: #ffffff; + --bg3: #e8eef4; + --card: #ffffff; + --card-hover: #f8fafc; + --text: #0f172a; + --text-soft: #334155; + --muted: #64748b; + --line: rgba(15, 23, 42, 0.08); + --line-strong: rgba(15, 23, 42, 0.14); + --shadow: 0 4px 20px rgba(15, 23, 42, 0.06); + --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.08); + --primary: #0891b2; + --primary-dim: rgba(8, 145, 178, 0.1); + --primary-border: rgba(8, 145, 178, 0.4); + --success: #059669; + --success-dim: rgba(5, 150, 105, 0.1); + --danger: #dc2626; + --danger-dim: rgba(220, 38, 38, 0.08); + --warning: #d97706; +} + +* { box-sizing: border-box; } +html, body { height: 100%; } +body { + margin: 0; + font-family: var(--sans); + font-weight: 500; + color: var(--text); + background: var(--bg); + background-image: radial-gradient(ellipse 90% 50% at 50% -10%, rgba(34, 211, 238, 0.08), transparent 60%); + line-height: 1.6; + -webkit-font-smoothing: antialiased; +} +[data-theme="light"] body { + background: var(--bg); + background-image: radial-gradient(ellipse 100% 60% at 50% -15%, var(--primary-dim), transparent 55%); +} + +a { color: inherit; text-decoration: none; } +b { font-weight: 700; } + +.container { max-width: var(--container); margin: 0 auto; - padding: 0 20px; + padding: 0 16px; } -.skip-link{ - position:absolute; - left:-999px; - top:10px; - background:var(--card); - border:1px solid var(--line); - padding:10px 14px; - border-radius:12px; - z-index:999; +.skip-link { + position: absolute; + left: -999px; + top: 10px; + background: var(--card); + border: 1px solid var(--line); + padding: 10px 14px; + border-radius: var(--radius-sm); + z-index: 999; } -.skip-link:focus{left:10px} +.skip-link:focus { left: 12px; } -.header{ +/* ----- Header ----- */ +.header { position: sticky; top: 0; z-index: 50; - backdrop-filter: blur(14px); - background: rgba(10, 15, 30, .55); + background: rgba(16, 24, 38, 0.88); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } -[data-theme="light"] .header{background: rgba(255,255,255,.70)} +[data-theme="light"] .header { + background: rgba(255, 255, 255, 0.9); + border-bottom-color: var(--line); +} -.header__inner{ - height: 74px; - display:flex; - align-items:center; - justify-content:space-between; +.header__inner { + height: 64px; + display: flex; + align-items: center; + justify-content: space-between; gap: 16px; } -.brand{display:flex; align-items:center; gap:12px; min-width:220px} -.brand__logo{ - width:42px; height:42px; - border-radius:14px; - display:grid; place-items:center; - background: - radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.55), transparent 60%), - linear-gradient(135deg, rgba(124,92,255,.95), rgba(78,230,181,.85)); - box-shadow: 0 10px 26px rgba(124,92,255,.25); - font-weight:800; - letter-spacing:.5px; -} -.brand--sm .brand__logo{width:36px;height:36px;border-radius:13px} -.brand__name{font-weight:800} -.brand__tag{color:var(--muted); font-size:12px; margin-top:2px} - -.nav{display:flex; gap:16px; align-items:center} -.nav__link{ - padding:10px 10px; - border-radius:12px; - color:var(--muted); - font-weight:600; - font-size:14px; -} -.nav__link:hover{background: rgba(255,255,255,.06); color: var(--text)} -[data-theme="light"] .nav__link:hover{background: rgba(15,23,42,.06)} - -.header__actions{display:flex; gap:10px; align-items:center} - -.btn{ - display:inline-flex; - align-items:center; - justify-content:center; - gap:10px; - border-radius: 14px; - border: 1px solid var(--line); - padding: 11px 14px; - font-weight: 700; +.brand { + display: flex; + align-items: center; + gap: 12px; + min-width: 200px; +} +.brand__logo { + width: 40px; + height: 40px; + border-radius: var(--radius-sm); + display: grid; + place-items: center; + background: linear-gradient(145deg, var(--primary), #06b6d4); + color: #0a0e17; + font-weight: 800; + font-size: 13px; + letter-spacing: -0.5px; +} +.brand--sm .brand__logo { width: 34px; height: 34px; font-size: 11px; } +.brand__name { font-weight: 700; font-size: 1.1rem; color: var(--text); } +.brand__tag { color: var(--muted); font-size: 12px; margin-top: 2px; font-weight: 500; } + +.nav { display: flex; gap: 4px; align-items: center; } +.nav__link { + padding: 8px 14px; + border-radius: var(--radius-sm); + color: var(--text-soft); + font-weight: 600; font-size: 14px; - cursor:pointer; - user-select:none; - background: rgba(255,255,255,.04); - transition: transform .12s ease, background .12s ease, border-color .12s ease; -} -.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07)} -[data-theme="light"] .btn{background: rgba(15,23,42,.03)} -[data-theme="light"] .btn:hover{background: rgba(15,23,42,.06)} -.btn:active{transform: translateY(0)} - -.btn--primary{ - border-color: rgba(124,92,255,.55); - background: linear-gradient(135deg, rgba(124,92,255,.96), rgba(78,230,181,.80)); - color: #06101a; - box-shadow: 0 18px 36px rgba(124,92,255,.22); -} -.btn--primary:hover{background: linear-gradient(135deg, rgba(124,92,255,1), rgba(78,230,181,.88))} -.btn--ghost{background: rgba(255,255,255,.03)} -.btn--danger{ - border-color: rgba(255,77,109,.45); - color: rgba(255,77,109,1); -} -.btn--danger:hover{ - background: rgba(255,77,109,.12); - border-color: rgba(255,77,109,.65); -} -.btn--sm{padding:8px 10px; border-radius:12px; font-size:13px} -.btn[aria-disabled="true"]{opacity:.6; pointer-events:none} - -/* ----- Hero：加宽、大字、减少两侧空 ----- */ -.hero{ - padding: 80px 0 56px; - text-align: center; + transition: color 0.2s, background 0.2s; +} +.nav__link:hover { + background: var(--primary-dim); + color: var(--primary); } -.hero__inner{ - max-width: min(960px, 92vw); +[data-theme="light"] .nav__link:hover { + background: var(--primary-dim); + color: var(--primary); +} + +.header__actions { display: flex; gap: 8px; align-items: center; } + +/* ----- Buttons ----- */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + border-radius: var(--radius-sm); + border: 1px solid transparent; + padding: 10px 16px; + font-family: var(--sans); + font-weight: 600; + font-size: 14px; + cursor: pointer; + user-select: none; + transition: background 0.2s, border-color 0.2s, transform 0.15s; +} +.btn:hover { transform: translateY(-1px); } +.btn:active { transform: translateY(0); } +.btn--primary { + background: linear-gradient(145deg, var(--primary), #06b6d4); + color: #0a0e17; + border-color: transparent; + box-shadow: 0 2px 12px rgba(34, 211, 238, 0.25); +} +.btn--primary:hover { + filter: brightness(1.08); + box-shadow: 0 4px 16px rgba(34, 211, 238, 0.3); +} +.btn--ghost { + background: rgba(255, 255, 255, 0.04); + border-color: var(--line); + color: var(--text-soft); +} +.btn--ghost:hover { + background: var(--primary-dim); + border-color: var(--primary-border); + color: var(--primary); +} +[data-theme="light"] .btn--ghost { + background: rgba(15, 23, 42, 0.04); + color: var(--text-soft); +} +[data-theme="light"] .btn--ghost:hover { + background: var(--primary-dim); + border-color: var(--primary-border); + color: var(--primary); +} +.btn--danger { + border-color: rgba(248, 113, 113, 0.4); + color: var(--danger); +} +.btn--danger:hover { + background: var(--danger-dim); + border-color: var(--danger); +} +.btn--sm { padding: 8px 12px; font-size: 13px; } +.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } + +/* ----- Hero（单一封面模块） ----- */ +.hero { + padding: var(--space-xl) 0 var(--space-lg); +} +.hero__shell { + max-width: var(--container); margin: 0 auto; padding: 0 24px; } -.hero__kicker{ - font-size: 14px; +.hero-card { + background: var(--card); + border: 1px solid var(--line); + border-radius: var(--radius-lg); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); + padding: var(--space-lg) var(--space-xl); + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-xl); + align-items: center; + position: relative; + overflow: hidden; +} +.hero-card::before { + content: ""; + position: absolute; + top: 0; + right: 0; + width: 50%; + height: 100%; + background: radial-gradient(ellipse at 100% 50%, rgba(34, 211, 238, 0.08), transparent 60%); + pointer-events: none; +} +[data-theme="light"] .hero-card { + background: var(--card); + box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08); +} +[data-theme="light"] .hero-visual { + background: var(--bg3); +} +@media (max-width: 900px) { + .hero-card { + grid-template-columns: 1fr; + padding: var(--space-md) var(--space-lg); + } +} +.hero-copy { + display: flex; + flex-direction: column; + gap: var(--space-sm); + position: relative; + z-index: 1; +} +.hero__kicker { + font-size: 11px; font-weight: 600; - letter-spacing: .18em; + letter-spacing: 0.2em; text-transform: uppercase; - color: var(--muted); - margin: 0 0 20px; + color: var(--primary); + margin: 0; } -.hero__title{ - font-size: clamp(52px, 14vw, 96px); +.hero__title { + font-size: clamp(40px, 8vw, 56px); font-weight: 800; - letter-spacing: -0.04em; - line-height: 1; - margin: 0 0 12px; + letter-spacing: -0.03em; + line-height: 1.1; + margin: 0; color: var(--text); } -.hero__tagline{ - font-size: 24px; +.hero__tagline { + font-size: 17px; font-weight: 600; - color: var(--primary); - margin: 0 0 24px; - letter-spacing: .02em; + color: var(--text-soft); + margin: 0; } -.hero__desc{ - font-size: 18px; - line-height: 1.7; +.hero__desc { + font-size: 15px; + line-height: 1.65; color: var(--muted); - margin: 0 0 32px; - max-width: 52ch; - margin-left: auto; - margin-right: auto; + margin: 0; } -.hero__cta{ +.hero__bullets { + list-style: none; + margin: 0; + padding: 0; display: flex; - gap: 14px; - justify-content: center; - flex-wrap: wrap; - margin-bottom: 44px; + flex-direction: column; + gap: 8px; + color: var(--text-soft); + font-size: 14px; +} +.hero__bullets li { + position: relative; + padding-left: 16px; + line-height: 1.5; +} +.hero__bullets li::before { + content: ""; + position: absolute; + left: 0; + top: 0.5em; + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--primary); + opacity: 0.9; } -.hero__cta .btn{ padding: 14px 22px; font-size: 15px; } -.hero__flow{ +.hero__cta { display: flex; - align-items: center; - justify-content: center; gap: 10px; flex-wrap: wrap; - font-size: 16px; - font-weight: 600; - color: var(--muted); + margin-top: 4px; +} +.hero__cta .btn { + padding: 11px 20px; + font-size: 14px; } -.hero__flow span:not(.hero__arrow){ opacity: .9; } -.hero__arrow{ - width: 7px; - height: 7px; - border-right: 2px solid var(--muted); - border-top: 2px solid var(--muted); - transform: rotate(45deg); - opacity: .6; +.hero-visual { + position: relative; + z-index: 1; + background: var(--bg2); + border: 1px solid var(--line); + border-radius: var(--radius); + padding: var(--space-md); } -.hero__tech{ +.hero-visual__header { display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 10px 18px; - margin-top: 40px; - padding-top: 32px; - border-top: 1px solid rgba(255,255,255,.06); - max-width: 100%; - margin-left: auto; - margin-right: auto; -} -[data-theme="light"] .hero__tech{border-top-color: rgba(15,23,42,.08)} -.hero__tech-item{ - font-size: 14px; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; + font-size: 12px; font-weight: 600; - color: var(--muted); - padding: 8px 16px; + color: var(--text-soft); + letter-spacing: 0.05em; +} +.hero-visual__pill { + padding: 4px 10px; border-radius: 999px; - background: rgba(255,255,255,.04); - border: 1px solid rgba(255,255,255,.08); + background: rgba(34, 211, 238, 0.12); + border: 1px solid rgba(34, 211, 238, 0.3); + color: var(--primary); + font-size: 11px; } -[data-theme="light"] .hero__tech-item{background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.1)} -.hero__tech-item:hover{ +.hero-flow { + display: flex; + align-items: stretch; + gap: 10px; +} +.hero-flow__node { + flex: 1; + min-height: 72px; + padding: 12px 10px; + border-radius: var(--radius-sm); + border: 1px solid var(--line); + background: rgba(255, 255, 255, 0.02); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 4px; + text-align: center; + transition: border-color 0.2s, box-shadow 0.2s; +} +.hero-flow__node strong { + font-size: 13px; color: var(--text); - border-color: rgba(124,92,255,.25); - background: rgba(124,92,255,.06); + font-weight: 700; +} +.hero-flow__node span { + font-size: 11px; + color: var(--muted); + line-height: 1.3; +} +.hero-flow__node--primary { + border-color: rgba(34, 211, 238, 0.5); + background: rgba(34, 211, 238, 0.06); + box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.15); +} +.hero-flow__node--highlight { + border-color: rgba(52, 211, 153, 0.4); + background: rgba(52, 211, 153, 0.05); +} +.hero-flow__arrow { + flex-shrink: 0; + width: 24px; + align-self: center; + text-align: center; + color: var(--primary); + opacity: 0.7; + font-size: 14px; + font-weight: 700; + line-height: 1; +} +.hero-flow__arrow::before { + content: "›"; +} +.hero-flow__caption { + margin: 10px 0 0; + font-size: 11px; + color: var(--muted); + text-align: center; } -/* 保留：其他区块可能用到的 .stats / .stat */ -.stats{ - display:grid; +/* ----- Stats (legacy) ----- */ +.stats { + display: grid; grid-template-columns: repeat(3, 1fr); - gap: 12px; + gap: var(--space-sm); margin-top: 8px; } -.stat{ +.stat { border: 1px solid var(--line); - background: rgba(255,255,255,.03); - border-radius: 18px; - padding: 16px 14px; + background: var(--bg3); + border-radius: var(--radius); + padding: 14px 16px; +} +[data-theme="light"] .stat { background: var(--bg3); } +.stat__num { font-weight: 800; font-size: 20px; color: var(--text); } +.stat__label { color: var(--muted); font-weight: 600; font-size: 11px; margin-top: 6px; } +.stat--accent { + background: var(--primary-dim); + border-color: var(--primary-border); +} +[data-theme="light"] .stat--accent { + background: var(--primary-dim); + border-color: var(--primary-border); } -[data-theme="light"] .stat{background: rgba(15,23,42,.03)} -.stat__num{font-weight: 900; font-size: 20px; color: var(--text)} -.stat__label{color: var(--muted); font-weight: 600; font-size: 11px; margin-top: 6px; line-height: 1.45} -.stat--accent{background: linear-gradient(160deg, rgba(124,92,255,.08), rgba(78,230,181,.05)); border-color: rgba(124,92,255,.18)} -[data-theme="light"] .stat--accent{background: linear-gradient(160deg, rgba(91,75,255,.08), rgba(26,214,163,.06)); border-color: rgba(91,75,255,.2)} -.panel{ +/* ----- Panel (legacy) ----- */ +.panel { border-radius: var(--radius); border: 1px solid var(--line); - background: - radial-gradient(400px 180px at 15% 5%, rgba(124,92,255,.16), transparent 60%), - radial-gradient(380px 180px at 85% 5%, rgba(78,230,181,.12), transparent 60%), - rgba(255,255,255,.03); + background: var(--card); box-shadow: var(--shadow); - overflow:hidden; -} -.panel--hero{ - border-color: rgba(124,92,255,.2); - box-shadow: 0 20px 50px rgba(0,0,0,.25), 0 0 0 1px rgba(124,92,255,.08); -} -[data-theme="light"] .panel{background: - radial-gradient(360px 160px at 20% 10%, rgba(91,75,255,.12), transparent 65%), - radial-gradient(360px 160px at 80% 10%, rgba(26,214,163,.10), transparent 65%), - rgba(15,23,42,.02); -} -[data-theme="light"] .panel--hero{border-color: rgba(91,75,255,.25)} -.panel__top{ - display:flex; - align-items:center; - justify-content:space-between; - padding: 16px 18px; - border-bottom: 1px solid var(--line); - background: rgba(0,0,0,.15); + overflow: hidden; } -[data-theme="light"] .panel__top{background: rgba(15,23,42,.04)} -.panel__title{ - font-weight: 800; - font-size: 15px; - letter-spacing: .02em; - color: var(--text); +.panel--hero { border-color: var(--primary-border); } +[data-theme="light"] .panel { background: var(--card); } +.panel__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 14px 18px; + border-bottom: 1px solid var(--line); + background: var(--bg3); } -.panel__pill{ +[data-theme="light"] .panel__top { background: var(--bg3); } +.panel__title { font-weight: 700; font-size: 14px; color: var(--text); } +.panel__pill { font-family: var(--mono); - font-size:12px; + font-size: 11px; color: var(--muted); border: 1px solid var(--line); - padding: 6px 10px; + padding: 5px 10px; border-radius: 999px; - background: rgba(255,255,255,.03); -} -.panel__dots{display:flex; gap:6px} -.panel__dots span{ - width:10px; height:10px; border-radius:99px; - background: rgba(255,255,255,.10); - border: 1px solid var(--line); -} -.panel__dots span:nth-child(1){background: rgba(255,77,109,.65); border-color: rgba(255,77,109,.35)} -.panel__dots span:nth-child(2){background: rgba(255,210,77,.55); border-color: rgba(255,210,77,.30)} -.panel__dots span:nth-child(3){background: rgba(78,230,181,.55); border-color: rgba(78,230,181,.30)} -.panel__body{padding: 18px} - -.diagram{ - display:grid; - grid-template-columns: repeat(3, 1fr); - gap: 14px; + background: var(--bg2); } -.diagram__col{display:flex; flex-direction:column; gap: 14px} -.node{ - border-radius: 16px; +.panel__dots { display: flex; gap: 6px; } +.panel__dots span { + width: 8px; + height: 8px; + border-radius: 99px; + background: var(--muted); + opacity: 0.6; +} +.panel__dots span:nth-child(1) { background: var(--danger); } +.panel__dots span:nth-child(2) { background: var(--warning); } +.panel__dots span:nth-child(3) { background: var(--success); } +.panel__body { padding: 18px; } + +.diagram { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } +.diagram__col { display: flex; flex-direction: column; gap: 14px; } +.node { + border-radius: var(--radius); border: 1px solid var(--line); - background: rgba(255,255,255,.03); - padding: 14px 14px; - transition: border-color .2s, box-shadow .2s; -} -.node:hover{ - border-color: rgba(124,92,255,.2); - box-shadow: 0 6px 20px rgba(0,0,0,.12); -} -[data-theme="light"] .node{background: rgba(15,23,42,.02)} -.node--accent{ - background: linear-gradient(145deg, rgba(124,92,255,.2), rgba(78,230,181,.1)); - border-color: rgba(124,92,255,.3); -} -.node--accent:hover{ - border-color: rgba(124,92,255,.45); - box-shadow: 0 8px 24px rgba(124,92,255,.12); -} -[data-theme="light"] .node--accent{ - background: linear-gradient(145deg, rgba(91,75,255,.12), rgba(26,214,163,.08)); - border-color: rgba(91,75,255,.25); -} -.node__title{font-weight:800; font-size:14px; color: var(--text)} -.node__desc{color:var(--muted); font-size:11px; margin-top:6px; line-height:1.5} -.panel__foot{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px} -.badge{ - font-size:11px; - font-weight:700; + background: var(--bg3); + padding: 14px; + transition: border-color 0.2s, box-shadow 0.2s; +} +.node:hover { + border-color: var(--primary-border); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); +} +[data-theme="light"] .node { background: var(--bg3); } +.node--accent { + background: var(--primary-dim); + border-color: var(--primary-border); +} +[data-theme="light"] .node--accent { background: var(--primary-dim); } +.node__title { font-weight: 700; font-size: 14px; color: var(--text); } +.node__desc { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.5; } +.panel__foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } +.badge { + font-size: 11px; + font-weight: 600; color: var(--muted); - border:1px solid var(--line); - background: rgba(255,255,255,.03); - padding: 8px 12px; + border: 1px solid var(--line); + background: var(--bg3); + padding: 6px 12px; border-radius: 999px; } -.section{padding: 46px 0} -/* hero 与下方内容衔接：过渡线、统一层级、不抢主标题 */ -.section--after-hero{ - padding-top: 44px; - padding-bottom: 48px; - border-top: 1px solid rgba(255,255,255,.06); +/* ----- Section ----- */ +.section { padding: var(--space-xl) 0; } +.section--after-hero { + padding-top: var(--space-lg); + padding-bottom: var(--space-xl); + border-top: 1px solid var(--line); } -[data-theme="light"] .section--after-hero{border-top-color: rgba(15,23,42,.08)} -.section__head{margin-bottom: 20px} -.section__head--compact{ - margin-bottom: 22px; - padding-left: 14px; +.section__head { margin-bottom: var(--space-md); } +.section__head--compact { + margin-bottom: var(--space-md); + padding-left: var(--space-sm); border-left: 3px solid var(--primary); } -.section__title{margin:0; font-size: 22px; font-weight: 700; letter-spacing:-.2px; color: var(--text)} -.section__head--compact .section__title{font-size: 20px; font-weight: 700} -.section__desc{margin: 6px 0 0; font-size: 14px; color: var(--muted); max-width: 60ch} -.section--alt{ - background: rgba(255,255,255,.02); +.section__title { + margin: 0; + font-size: 22px; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--text); +} +.section__head--compact .section__title { font-size: 20px; } +.section__desc { + margin: var(--space-xs) 0 0; + font-size: 14px; + line-height: 1.55; + color: var(--muted); + max-width: 58ch; +} +.section--alt { + background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } -[data-theme="light"] .section--alt{background: rgba(15,23,42,.02)} +[data-theme="light"] .section--alt { background: var(--bg3); } -.grid{display:grid; gap: 12px} -.grid--3{grid-template-columns: repeat(3, 1fr)} -.grid--2{grid-template-columns: repeat(2, 1fr)} +.grid { display: grid; gap: var(--space-md); } +.grid--3 { grid-template-columns: repeat(3, 1fr); } +.grid--2 { grid-template-columns: repeat(2, 1fr); } -.card{ - border-radius: var(--radius2); +/* ----- Cards ----- */ +.card { + border-radius: var(--radius); border: 1px solid var(--line); - background: rgba(255,255,255,.03); - padding: 16px 16px; - box-shadow: 0 10px 26px rgba(0,0,0,.12); -} -[data-theme="light"] .card{background: rgba(255,255,255,.9)} -.card--tight{padding: 14px 14px} -.card--wide{grid-column: 1 / -1} -.card__title{margin:0; font-size: 16px; font-weight: 850} -.card__desc{margin: 8px 0 0; color: var(--muted)} -.card__list{ - margin: 10px 0 0; - padding-left: 18px; + background: var(--card); + padding: var(--space-md); + box-shadow: var(--shadow); + transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; +} +.card:hover { + border-color: var(--line-strong); + box-shadow: var(--shadow-lg); + background: var(--card-hover); +} +[data-theme="light"] .card { background: var(--card); } +[data-theme="light"] .card:hover { border-color: var(--line-strong); background: var(--card-hover); } +.card--tight { padding: var(--space-sm); } +.card--wide { grid-column: 1 / -1; } +.card--compact .card__title { margin-bottom: 2px; font-size: 15px; } +.card--compact .card__desc { margin: 0; font-size: 12px; } +.card__head { margin-bottom: var(--space-sm); } +.card__head--row { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 12px; + flex-wrap: wrap; +} +.card__actions { display: flex; gap: 8px; flex-shrink: 0; } +.card__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); } +.card__desc { margin: var(--space-xs) 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); } +.charts-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + margin-top: var(--space-md); +} +.chart-block__label { + font-size: 12px; color: var(--muted); + margin-bottom: 8px; + font-weight: 600; } -.card__list li{margin: 6px 0} - -.timeline{ - display:grid; - grid-template-columns: 1fr; - gap: 10px; +.chart-block__canvas { + height: 160px; + position: relative; } -.step{ - display:flex; +.metrics--l2 { margin-bottom: 14px; } +.card__list { margin: var(--space-sm) 0 0; padding-left: var(--space-md); color: var(--muted); } +.card__list li { margin: var(--space-xs) 0; } + +.timeline { display: grid; grid-template-columns: 1fr; gap: 10px; } +.step { + display: flex; gap: 12px; - border-radius: var(--radius2); + border-radius: var(--radius-sm); border: 1px solid var(--line); - background: rgba(255,255,255,.03); - padding: 14px 14px; -} -[data-theme="light"] .step{background: rgba(15,23,42,.02)} -.step__badge{ - width: 34px; height: 34px; - border-radius: 12px; - display:grid; place-items:center; - font-weight: 900; - color:#06101a; - background: linear-gradient(135deg, rgba(124,92,255,1), rgba(78,230,181,.85)); + background: var(--bg3); + padding: 14px; +} +[data-theme="light"] .step { background: var(--bg3); } +.step__badge { + width: 36px; + height: 36px; + border-radius: var(--radius-sm); + display: grid; + place-items: center; + font-weight: 800; + color: #0a0e17; + background: linear-gradient(145deg, var(--primary), #06b6d4); flex: 0 0 auto; } -.step__title{margin:0; font-size: 16px} -.step__desc{margin: 6px 0 0; color: var(--muted)} +.step__title { margin: 0; font-size: 15px; } +.step__desc { margin: 6px 0 0; color: var(--muted); font-size: 13px; } -.pillRow{display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px} -.pill{ +.pillRow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } +.pill { font-family: var(--mono); font-size: 12px; - padding: 7px 10px; + padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); - background: rgba(255,255,255,.03); + background: var(--bg3); } -.codeCard{ +.codeCard { border-radius: var(--radius); border: 1px solid var(--line); - overflow:hidden; - background: rgba(255,255,255,.03); + overflow: hidden; + background: var(--card); box-shadow: var(--shadow); } -[data-theme="light"] .codeCard{background: rgba(255,255,255,.9)} -.codeCard__top{ - display:flex; - align-items:center; - justify-content:space-between; - gap: 12px; - padding: 12px 14px; +[data-theme="light"] .codeCard { background: var(--card); } +.codeCard__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; border-bottom: 1px solid var(--line); + background: var(--bg3); } -.codeCard__title{font-weight: 850} -.code{ +.codeCard__title { font-weight: 700; font-size: 14px; } +.code { margin: 0; - padding: 14px; + padding: 16px; font-family: var(--mono); - font-size: 12.5px; + font-size: 12px; line-height: 1.6; - overflow:auto; + overflow: auto; } -.codeCard__hint{ - margin: 0; - padding: 10px 14px 14px; - color: var(--muted); +.codeCard__hint { margin: 0; padding: 12px 16px; color: var(--muted); font-size: 13px; } + +.contact { + display: grid; + grid-template-columns: 1.1fr 0.9fr; + gap: var(--space-lg); + align-items: start; } +.checklist { margin: 10px 0 0; padding-left: 20px; color: var(--muted); } +.checklist li { margin: 8px 0; } -.contact{ - display:grid; - grid-template-columns: 1.1fr .9fr; +.kv { margin-top: 12px; display: grid; gap: 8px; } +.kv__row { + display: flex; + justify-content: space-between; gap: 12px; - align-items:start; + padding: 12px 14px; + border: 1px solid var(--line); + border-radius: var(--radius-sm); + background: var(--bg3); } -.checklist{margin: 10px 0 0; padding-left: 18px; color: var(--muted)} -.checklist li{margin: 7px 0} - -.kv{margin-top: 12px; display:grid; gap: 8px} -.kv__row{display:flex; justify-content:space-between; gap: 12px; padding: 10px 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03)} -[data-theme="light"] .kv__row{background: rgba(15,23,42,.02)} -.kv__k{color: var(--muted); font-weight: 750} -.kv__v{font-weight: 800} -.contact__btns{display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px} +[data-theme="light"] .kv__row { background: var(--bg3); } +.kv__k { color: var(--muted); font-weight: 600; } +.kv__v { font-weight: 700; color: var(--text); } +.contact__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } -.footer{ - padding: 22px 0 34px; -} -.footer__inner{ +/* ----- Footer ----- */ +.footer { padding: var(--space-lg) 0 var(--space-xl); } +.footer__inner { border-top: 1px solid var(--line); - padding-top: 18px; - display:flex; - align-items:flex-start; - justify-content:space-between; - gap: 12px; + padding-top: var(--space-md); + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 16px; } -.footer__meta{margin: 10px 0 0; color: var(--muted); font-size: 12px} -.footer__right{display:flex; gap: 12px; flex-wrap:wrap} -.footer__link{color: var(--muted); font-weight: 750} -.footer__link:hover{color: var(--text)} +.footer__meta { margin: 8px 0 0; color: var(--muted); font-size: 12px; } +.footer__right { display: flex; gap: 16px; flex-wrap: wrap; } +.footer__link { color: var(--muted); font-weight: 600; font-size: 14px; } +.footer__link:hover { color: var(--primary); } -.form{display:grid; gap:10px; margin-top:12px} -.field{display:grid; gap:6px} -.field__label{color: var(--muted); font-weight: 800; font-size: 12px} -.field__input{ +/* ----- Form ----- */ +.form { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); } +.field { display: grid; gap: 6px; } +.field__label { color: var(--text-soft); font-weight: 600; font-size: 13px; } +.field__input { width: 100%; - border-radius: 14px; + border-radius: var(--radius-sm); border: 1px solid var(--line); - background: rgba(255,255,255,.03); + background: var(--bg3); color: var(--text); - padding: 11px 12px; + padding: 10px 14px; outline: none; - font-weight: 650; + font-size: 14px; + font-family: var(--sans); + font-weight: 500; + transition: border-color 0.2s, box-shadow 0.2s; +} +[data-theme="light"] .field__input { background: var(--bg3); } +.field__input:focus { + border-color: var(--primary); + box-shadow: 0 0 0 3px var(--primary-dim); } -[data-theme="light"] .field__input{background: rgba(15,23,42,.02)} -.field__input:focus{border-color: rgba(124,92,255,.55); box-shadow: 0 0 0 4px rgba(124,92,255,.12)} -select.field__input{ +.field__input::placeholder { color: var(--muted); opacity: 0.9; } +select.field__input { cursor: pointer; appearance: none; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236e7681' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } -[data-theme="light"] select.field__input{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); -} - -/* 下拉选项样式 - 确保文字清晰可读 */ -select.field__input option{ - background-color: #1e293b; - color: #f1f5f9; +select.field__input option { + background-color: #111820; + color: #e6edf3; padding: 10px; - font-weight: 600; + font-weight: 500; } -[data-theme="light"] select.field__input option{ +[data-theme="light"] select.field__input option { background-color: #ffffff; color: #0f172a; } -.params{ +.params { border: 1px solid var(--line); - border-radius: 14px; + border-radius: var(--radius-sm); padding: 12px 14px; - background: rgba(255,255,255,.03); + background: var(--bg3); } -[data-theme="light"] .params{background: rgba(15,23,42,.02)} -.params__summary{ +[data-theme="light"] .params { background: var(--bg3); } +.params__summary { cursor: pointer; - font-weight: 800; + font-weight: 700; color: var(--muted); user-select: none; list-style: none; } -.params__summary::-webkit-details-marker{display: none} -.params__summary::before{ +.params__summary::-webkit-details-marker { display: none; } +.params__summary::before { content: "▶ "; display: inline-block; transition: transform 0.2s; } -.params[open] .params__summary::before{transform: rotate(90deg)} +.params[open] .params__summary::before { transform: rotate(90deg); } -.mini{margin-top:12px; display:grid; gap:8px} -.mini__row{display:flex; justify-content:space-between; gap:12px; padding: 10px 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03)} -[data-theme="light"] .mini__row{background: rgba(15,23,42,.02)} -.mini__k{color: var(--muted); font-weight: 800} -.mini__v{font-weight: 900} +.mini { margin-top: 12px; display: grid; gap: 8px; } +.mini__row { + display: flex; + justify-content: space-between; + gap: 12px; + padding: 10px 12px; + border: 1px solid var(--line); + border-radius: var(--radius-sm); + background: var(--bg3); +} +[data-theme="light"] .mini__row { background: var(--bg3); } +.mini__k { color: var(--muted); font-weight: 600; font-size: 13px; } +.mini__v { font-weight: 700; color: var(--text); font-size: 13px; } -.logbox{ +/* ----- Logbox ----- */ +.logbox { margin-top: 10px; border: 1px solid var(--line); - border-radius: 16px; - background: rgba(255,255,255,.03); - overflow:hidden; -} -[data-theme="light"] .logbox{background: rgba(15,23,42,.02)} -.logbox__top{ - display:flex; - align-items:center; - justify-content:space-between; - gap:10px; - padding: 10px 10px; + border-radius: var(--radius); + background: var(--bg2); + overflow: hidden; +} +[data-theme="light"] .logbox { background: var(--bg2); } +.logbox__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 14px; border-bottom: 1px solid var(--line); + background: var(--bg3); } -.logbox__hint{color: var(--muted); font-weight: 800; font-size: 12px} -.logbox__pre{ - margin:0; - padding: 12px; - min-height: 280px; - max-height: 420px; - overflow:auto; +.logbox__hint { color: var(--muted); font-weight: 600; font-size: 12px; } +.logbox__pre { + margin: 0; + padding: 14px; + min-height: 260px; + max-height: 400px; + overflow: auto; font-family: var(--mono); - font-size: 12.5px; - line-height: 1.55; + font-size: 12px; + line-height: 1.6; white-space: pre-wrap; word-break: break-word; + color: var(--text-soft); } -.metrics{display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:12px} -.metric{ +/* ----- Metrics (执行统计 / 覆盖率) ----- */ +.metrics { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 12px; + margin-top: 12px; +} +.metric { border: 1px solid var(--line); - border-radius: 14px; - padding: 12px 12px; - background: rgba(255,255,255,.03); -} -[data-theme="light"] .metric{background: rgba(15,23,42,.02)} -.metric:first-child{grid-column: 1 / -1} -.metric__label{color: var(--muted); font-weight: 800; font-size: 12px} -.metric__value{ - font-weight: 900; - font-size: 28px; - margin-top: 6px; - background: linear-gradient(135deg, rgba(124,92,255,1), rgba(78,230,181,1)); - -webkit-background-clip: text; - background-clip: text; - color: transparent; + border-radius: var(--radius-sm); + padding: 14px 16px; + background: var(--bg3); + transition: border-color 0.2s; +} +.metric:hover { border-color: var(--line-strong); } +[data-theme="light"] .metric { background: var(--bg3); } +.metric:first-child { grid-column: 1 / -1; } +.metric__label { + color: var(--muted); + font-weight: 600; + font-size: 12px; + margin-bottom: 6px; +} +.metric__value { + font-weight: 800; + font-size: 26px; + letter-spacing: -0.02em; + color: var(--primary); +} +.metric__value--sm { font-size: 20px; } +.metric__value--muted { color: var(--muted); } +.metric__value--success { color: var(--success); } +.metrics--compact { + grid-template-columns: repeat(3, 1fr); + gap: 10px; + margin-top: 0; +} +.metrics--compact .metric { + padding: 12px 14px; +} +.metrics--compact .metric__label { + font-size: 11px; + margin-bottom: 4px; +} +.metrics--compact .metric__value { + font-size: 20px; + margin-top: 0; + line-height: 1.2; } -.metric__value--sm{font-size: 22px} -.recent{ +.recent { border: 1px solid var(--line); - border-radius: 14px; - padding: 12px 12px; - background: rgba(255,255,255,.03); -} -[data-theme="light"] .recent{background: rgba(15,23,42,.02)} -.recent__title{font-weight: 800; font-size: 12px; color: var(--muted); margin-bottom: 8px} -.recent__list{ - max-height: 280px; - overflow:auto; - font-family: var(--mono); - font-size: 12px; - line-height: 1.6; + border-radius: var(--radius-sm); + padding: 12px 14px; + background: var(--bg3); } -.recent__empty{color: var(--muted); font-style: italic} -.recent__item{ - padding: 6px 8px; +[data-theme="light"] .recent { background: var(--bg3); } +.recent__title { font-weight: 600; font-size: 12px; color: var(--muted); margin-bottom: 8px; } +.recent__list { max-height: 260px; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.6; } +.recent__empty { color: var(--muted); font-style: italic; font-size: 13px; } +.recent__item { + padding: 8px 10px; margin: 4px 0; - border-left: 3px solid rgba(124,92,255,.65); - background: rgba(255,255,255,.02); + border-left: 3px solid var(--primary); + background: var(--primary-dim); border-radius: 4px; - font-family: 'Consolas', 'Monaco', monospace; + font-family: var(--mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; + transition: background 0.2s; } -.recent__item:hover{ +.recent__item:hover { white-space: normal; word-break: break-all; - background: rgba(124,92,255,.15); -} -[data-theme="light"] .recent__item{background: rgba(15,23,42,.02)} -[data-theme="light"] .recent__item:hover{background: rgba(124,92,255,.12)} - -@media (max-width: 980px){ - .hero{padding: 56px 0 44px} - .stats{grid-template-columns: 1fr; } - .grid--3{grid-template-columns: 1fr; } - .grid--2{grid-template-columns: 1fr; } - .contact{grid-template-columns: 1fr; } - .nav{display:none} - .brand{min-width:auto} - .diagram{grid-template-columns: 1fr} + background: rgba(34, 211, 238, 0.2); } +[data-theme="light"] .recent__item { background: var(--primary-dim); } +[data-theme="light"] .recent__item:hover { background: rgba(8, 145, 178, 0.15); } -@media (min-width: 981px) and (max-width: 1300px){ - .grid--3{grid-template-columns: repeat(2, 1fr); } -} - - -/* L2 模块覆盖率样式 */ +/* ----- L2 模块覆盖率 ----- */ .l2-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } - .l2-module-item { - padding: 10px 12px; - background: var(--bg2); - border-radius: var(--radius2); + padding: 12px 14px; + background: var(--bg3); + border-radius: var(--radius-sm); border: 1px solid var(--line); - transition: all 0.2s ease; + transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } - .l2-module-item:hover { - border-color: var(--primary); + border-color: var(--primary-border); transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(124,92,255,.15); + box-shadow: 0 4px 16px rgba(34, 211, 238, 0.12); } +[data-theme="light"] .l2-module-item { background: var(--bg3); } +[data-theme="light"] .l2-module-item:hover { box-shadow: 0 4px 16px rgba(8, 145, 178, 0.1); } -[data-theme="light"] .l2-module-item { - background: #f8fafc; -} - -[data-theme="light"] .l2-module-item:hover { - box-shadow: 0 4px 12px rgba(91,75,255,.12); -} - -/* ============================ - 验证流程实时展示（3 区块） - ============================ */ - +/* ----- 验证流程实时展示 ----- */ .workflow-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 14px; + gap: 16px; } - .workflow-summary-card { background: var(--card); - border-radius: var(--radius2); + border-radius: var(--radius); border: 1px solid var(--line); - padding: 12px 14px; + padding: 14px 16px; display: flex; flex-direction: column; - gap: 8px; + gap: 10px; min-height: 200px; + transition: border-color 0.2s, box-shadow 0.2s; } - -.workflow-summary-card .workflow-output { - flex: 1; - max-height: 400px; - min-height: 150px; +.workflow-summary-card:hover { + border-color: var(--line-strong); + box-shadow: var(--shadow); } +.workflow-summary-card .workflow-output { flex: 1; max-height: 380px; min-height: 140px; } -/* LLM 用例框：加高 + 不要紫色下拉框，内容直接全部显示 */ -.workflow-summary-card--llm { - min-height: 420px; -} +.workflow-summary-card--llm { min-height: 400px; } .workflow-summary-card--llm .workflow-output { max-height: none !important; - min-height: 380px; + min-height: 360px; overflow-y: visible !important; overflow-x: visible; scrollbar-width: none; -ms-overflow-style: none; } -.workflow-summary-card--llm .workflow-output::-webkit-scrollbar { - display: none; -} +.workflow-summary-card--llm .workflow-output::-webkit-scrollbar { display: none; } .workflow-summary-card--llm .workflow-code-preview { max-height: none !important; overflow-y: visible !important; overflow-x: auto; - min-height: 340px; + min-height: 320px; scrollbar-width: none; -ms-overflow-style: none; } -.workflow-summary-card--llm .workflow-code-preview::-webkit-scrollbar { - display: none; -} - -.workflow-summary-header { - display: flex; - flex-direction: column; - gap: 4px; -} +.workflow-summary-card--llm .workflow-code-preview::-webkit-scrollbar { display: none; } +.workflow-summary-header { display: flex; flex-direction: column; gap: 4px; } .workflow-summary-title { display: flex; align-items: center; gap: 8px; - font-size: 13px; - font-weight: 600; -} - -.workflow-summary-icon { - font-size: 16px; -} - -.workflow-summary-sub { - font-size: 11px; - color: var(--muted); - opacity: 0.9; -} - -@media (max-width: 1024px) { - .workflow-summary-grid { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } -} - -/* 流程输出样式 - 优化版 */ -.workflow-output-container { - margin-top: 20px; -} - -.workflow-output-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 12px; -} - -.workflow-output-title { font-size: 14px; - font-weight: 600; - margin: 0; + font-weight: 700; color: var(--text); } +.workflow-summary-icon { font-size: 16px; opacity: 0.9; } +.workflow-summary-sub { font-size: 12px; color: var(--muted); } +.workflow-output-container { margin-top: 20px; } +.workflow-output-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } +.workflow-output-title { font-size: 14px; font-weight: 600; margin: 0; color: var(--text); } .workflow-output-empty { color: var(--muted); text-align: center; padding: 40px 20px; - font-size: 12px; -} - -/* 每个步骤内部的小型日志面板 */ -.step-log { - display: none; - margin-top: 8px; -} - -.workflow-step-card.is-open .step-log { - display: block; + font-size: 13px; } -.step-log .workflow-output { - max-height: 160px; - padding: 8px 10px; -} +.step-log { display: none; margin-top: 8px; } +.workflow-step-card.is-open .step-log { display: block; } +.step-log .workflow-output { max-height: 160px; padding: 8px 10px; } .workflow-output { font-family: var(--mono); font-size: 11px; line-height: 1.7; scrollbar-width: thin; - scrollbar-color: var(--primary) var(--card); - background: var(--card); + scrollbar-color: var(--primary) var(--bg2); + background: var(--bg2); border: 1px solid var(--line); - border-radius: var(--radius2); - padding: 16px; - max-height: 250px; + border-radius: var(--radius-sm); + padding: 14px; + max-height: 240px; overflow-y: auto; - position: relative; -} - -.workflow-output::-webkit-scrollbar { - width: 8px; -} - -.workflow-output::-webkit-scrollbar-track { - background: var(--bg2); - border-radius: 4px; -} - -.workflow-output::-webkit-scrollbar-thumb { - background: var(--primary); - border-radius: 4px; - border: 2px solid var(--bg2); -} - -.workflow-output::-webkit-scrollbar-thumb:hover { - background: var(--primary2); + color: var(--text-soft); } +.workflow-output::-webkit-scrollbar { width: 6px; } +.workflow-output::-webkit-scrollbar-track { background: var(--bg3); border-radius: 3px; } +.workflow-output::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; opacity: 0.6; } +.workflow-output::-webkit-scrollbar-thumb:hover { opacity: 1; } -/* 输出项样式优化 */ .workflow-output-item { - margin-bottom: 10px; - padding: 10px; - background: rgba(255, 255, 255, 0.02); + margin-bottom: 8px; + padding: 10px 12px; + background: var(--bg3); border-radius: 6px; - border-left: 3px solid currentColor; - transition: all 0.2s ease; -} - -.workflow-output-item:hover { - background: rgba(255, 255, 255, 0.04); - transform: translateX(2px); + border-left: 3px solid var(--primary); + transition: background 0.2s; } +.workflow-output-item:hover { background: var(--primary-dim); } -/* 覆盖率分析摘要：四合一框 */ .workflow-cov-summary-box { padding: 12px 14px; - background: rgba(255, 255, 255, 0.03); - border-radius: 8px; + background: var(--bg3); + border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: 8px; } -.workflow-cov-summary-row { - font-size: 12px; - line-height: 1.6; - color: var(--text); - margin-bottom: 6px; -} -.workflow-cov-summary-row:last-child { - margin-bottom: 0; -} -.workflow-cov-summary-label { - opacity: 0.85; - margin-right: 8px; - font-weight: 500; -} +.workflow-cov-summary-row { font-size: 12px; line-height: 1.6; color: var(--text); margin-bottom: 6px; } +.workflow-cov-summary-row:last-child { margin-bottom: 0; } +.workflow-cov-summary-label { color: var(--muted); margin-right: 8px; font-weight: 500; } -/* 验证流程：一个 case 一块（编译命令、编译是否成功、仿真命令、仿真是否成功） */ -.workflow-case-block .workflow-case-rows { - display: flex; - flex-direction: column; - gap: 6px; - margin-top: 6px; -} +.workflow-case-block .workflow-case-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .workflow-case-row { font-size: 11px; line-height: 1.5; - color: var(--text); + color: var(--text-soft); display: flex; align-items: flex-start; gap: 8px; } -.workflow-case-label { - flex-shrink: 0; - opacity: 0.85; - font-weight: 500; - min-width: 96px; -} -.workflow-case-value { - word-break: break-word; - white-space: pre-wrap; -} -.workflow-case-value.workflow-case-ok { - color: var(--success, #4ade80); -} -.workflow-case-value.workflow-case-fail { - color: var(--danger, #f87171); -} - -.workflow-output-timestamp { - font-size: 9px; - color: var(--muted); - margin-bottom: 6px; - opacity: 0.7; - font-weight: 500; -} +.workflow-case-label { flex-shrink: 0; color: var(--muted); font-weight: 500; min-width: 96px; } +.workflow-case-value { word-break: break-word; white-space: pre-wrap; } +.workflow-case-value.workflow-case-ok { color: var(--success); } +.workflow-case-value.workflow-case-fail { color: var(--danger); } -.workflow-output-text { - color: var(--text); - word-break: break-word; - white-space: pre-wrap; -} +.workflow-output-timestamp { font-size: 9px; color: var(--muted); margin-bottom: 6px; font-weight: 500; } +.workflow-output-text { color: var(--text); word-break: break-word; white-space: pre-wrap; } .workflow-code-preview { font-family: var(--mono); font-size: 10px; line-height: 1.6; - color: var(--text); - background: rgba(0, 0, 0, 0.2); + color: var(--text-soft); + background: var(--bg2); border: 1px solid var(--line); - border-radius: 4px; - padding: 8px 10px; - margin-top: 4px; + border-radius: 6px; + padding: 10px 12px; + margin-top: 6px; overflow-x: auto; white-space: pre; word-break: normal; max-height: 200px; overflow-y: auto; } +.workflow-code-preview::-webkit-scrollbar { width: 6px; height: 6px; } +.workflow-code-preview::-webkit-scrollbar-track { background: var(--bg3); border-radius: 3px; } +.workflow-code-preview::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; opacity: 0.5; } -.workflow-code-preview::-webkit-scrollbar { - width: 6px; - height: 6px; +/* ----- 参数表格 ----- */ +.codeCard table { + width: 100%; + border-collapse: collapse; + font-size: 13px; +} +.codeCard thead { background: var(--bg3); } +.codeCard th { + text-align: left; + padding: 12px 16px; + font-weight: 700; + color: var(--text-soft); + border-bottom: 1px solid var(--line); + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.04em; +} +.codeCard td { + padding: 12px 16px; + border-bottom: 1px solid var(--line); + color: var(--text-soft); +} +.codeCard tbody tr:hover { background: var(--bg3); } +.codeCard code { + font-family: var(--mono); + font-size: 12px; + color: var(--primary); + background: var(--primary-dim); + padding: 2px 6px; + border-radius: 4px; } -.workflow-code-preview::-webkit-scrollbar-track { - background: rgba(0, 0, 0, 0.1); - border-radius: 3px; +/* ----- Responsive ----- */ +@media (max-width: 980px) { + .hero { padding: var(--space-xl) 0 var(--space-lg); } + .stats { grid-template-columns: 1fr; } + .grid--3 { grid-template-columns: 1fr; } + .grid--2 { grid-template-columns: 1fr; } + .contact { grid-template-columns: 1fr; } + .nav { display: none; } + .brand { min-width: auto; } + .diagram { grid-template-columns: 1fr; } + .metrics { grid-template-columns: 1fr 1fr; } + .charts-row { grid-template-columns: 1fr; } + .metrics--compact { grid-template-columns: 1fr 1fr; } } -.workflow-code-preview::-webkit-scrollbar-thumb { - background: var(--primary); - border-radius: 3px; +@media (min-width: 981px) and (max-width: 1200px) { + .grid--3 { grid-template-columns: repeat(2, 1fr); } } -/* 已在上面 .workflow-summary-card--llm 区块统一设置 */ +@media (max-width: 1024px) { + .workflow-summary-grid { grid-template-columns: 1fr; } +} -/* 响应式调整 */ @media (max-width: 768px) { - .workflow-steps-container { - grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); - gap: 8px; - } + .workflow-steps-container { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } + .metrics { grid-template-columns: 1fr; } } diff --git a/chipfuzz/assets/workflow.js b/chipfuzz/assets/workflow.js index 26a82d1..c3c2ab4 100644 --- a/chipfuzz/assets/workflow.js +++ b/chipfuzz/assets/workflow.js @@ -483,11 +483,12 @@ } /** 从后端 API 获取最近生成的汇编代码（只保留最新一条） */ + let _recentAssemblyCodesNetworkErrorLogged = false; async function fetchRecentAssemblyCodes() { const base = ensureApiBase(); + if (!base) return; try { const url = `${base}/api/recent-assembly-codes?limit=1`; // 只获取最新1条 - console.log('[Workflow] 请求最近汇编代码:', url); const response = await fetch(url); if (!response.ok) { @@ -496,8 +497,8 @@ return; } + _recentAssemblyCodesNetworkErrorLogged = false; // 成功后重置，方便下次断线时再提示 const data = await response.json(); - console.log('[Workflow] API 返回数据:', data); if (data.error) { console.warn('[Workflow] API 返回错误:', data.error); @@ -507,13 +508,17 @@ genListEl.innerHTML = ''; const latestCode = data.codes[0]; const fileName = latestCode.name || ''; - console.log('[Workflow] 显示最新代码:', fileName); appendItem(genListEl, fileName ? `LLM 生成用例 · ${fileName}` : 'LLM 生成用例', latestCode.key_code, true); - } else { - console.log('[Workflow] 暂无汇编代码'); } } catch (error) { - console.error('[Workflow] 获取最近汇编代码异常:', error); + if (error.name === 'TypeError' && (error.message === 'Failed to fetch' || error.message.includes('fetch'))) { + if (!_recentAssemblyCodesNetworkErrorLogged) { + _recentAssemblyCodesNetworkErrorLogged = true; + console.warn('[Workflow] 无法连接服务端，请确认后端已启动且 API 地址正确（如 http://localhost:8080）'); + } + } else { + console.error('[Workflow] 获取最近汇编代码异常:', error); + } } } diff --git a/chipfuzz/index.html b/chipfuzz/index.html index e1831ec..38833ca 100644 --- a/chipfuzz/index.html +++ b/chipfuzz/index.html @@ -11,7 +11,7 @@ @@ -47,32 +47,47 @@
-
-

硬件验证 · LLM 驱动

-

ChipFuzzer

-

芯片验证框架

-

大模型生成汇编用例，编译与硬件仿真，覆盖率统计与成功用例保存，全流程在本页实时监控。

-
- 运行监控 - 参数配置 -
- -
- LLM 生成 / 修复 / 分析 - RISC-V 汇编 · 未覆盖代码驱动 - 编译与硬件仿真 · 阶段日志 - 全局与模块覆盖率 - Agent 记忆 · 策略学习 - SPEC 集成 · 接口与信号 - 成功用例保存与复现 +
+
+
+

硬件验证 · LLM 驱动

+

ChipFuzzer

+

从生成到覆盖率闭环的硬件验证平台

+

+ LLM 生成汇编用例 → 编译与仿真 → 覆盖率统计与成功用例沉淀，全流程可观测、可复现。 +

+
    +
  • LLM 生成 / 修复 / 分析汇编，自动驱动测试
    • +
  • 编译与硬件仿真一体化，减少人工成本
    • +
  • 覆盖率与成功用例保存复现，持续提升有效性
    • +
+
+ 运行监控 + 参数配置 +
+
+
+
+ 验证闭环 + 实时 +
+
+
+ LLM 生成 + 未覆盖区域驱动 +
+ +
+ 编译 · 仿真 + 命令与日志回写 +
+ +
+ 覆盖提升 + 统计与成功用例 +
+
+
@@ -92,7 +107,7 @@

连接配置