mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-06-14 04:00:07 +08:00
916 lines
26 KiB
HTML
916 lines
26 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>ClawPanel 更新弹窗设计预览</title>
|
|
<link rel="icon" href="../public/favicon.ico">
|
|
<style>
|
|
:root, [data-theme="light"] {
|
|
--bg-primary: #f8f9fb;
|
|
--bg-secondary: #ffffff;
|
|
--bg-tertiary: #f0f1f3;
|
|
--bg-card: rgba(0, 0, 0, 0.02);
|
|
--bg-card-hover: rgba(0, 0, 0, 0.04);
|
|
--bg-glass: rgba(0, 0, 0, 0.03);
|
|
--bg-glass-hover: rgba(0, 0, 0, 0.06);
|
|
--border-primary: rgba(0, 0, 0, 0.08);
|
|
--border-secondary: rgba(0, 0, 0, 0.04);
|
|
--text-primary: #18181b;
|
|
--text-secondary: #52525b;
|
|
--text-tertiary: #a1a1aa;
|
|
--text-inverse: #ffffff;
|
|
--accent: #6366f1;
|
|
--accent-hover: #4f46e5;
|
|
--accent-muted: rgba(99, 102, 241, 0.1);
|
|
--success: #16a34a;
|
|
--success-muted: rgba(22, 163, 74, 0.1);
|
|
--warning: #d97706;
|
|
--warning-muted: rgba(217, 119, 6, 0.1);
|
|
--error: #dc2626;
|
|
--error-muted: rgba(220, 38, 38, 0.1);
|
|
--info: #2563eb;
|
|
--info-muted: rgba(37, 99, 235, 0.1);
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg-primary: #0a0a0f;
|
|
--bg-secondary: #12121a;
|
|
--bg-tertiary: #1a1a26;
|
|
--bg-card: rgba(255, 255, 255, 0.03);
|
|
--bg-card-hover: rgba(255, 255, 255, 0.06);
|
|
--bg-glass: rgba(255, 255, 255, 0.05);
|
|
--bg-glass-hover: rgba(255, 255, 255, 0.08);
|
|
--border-primary: rgba(255, 255, 255, 0.08);
|
|
--border-secondary: rgba(255, 255, 255, 0.04);
|
|
--text-primary: #e4e4e7;
|
|
--text-secondary: #a1a1aa;
|
|
--text-tertiary: #71717a;
|
|
--text-inverse: #0a0a0f;
|
|
--accent: #818cf8;
|
|
--accent-hover: #a5b4fc;
|
|
--accent-muted: rgba(99, 102, 241, 0.15);
|
|
--success: #22c55e;
|
|
--success-muted: rgba(34, 197, 94, 0.15);
|
|
--warning: #f59e0b;
|
|
--warning-muted: rgba(245, 158, 11, 0.15);
|
|
--error: #ef4444;
|
|
--error-muted: rgba(239, 68, 68, 0.15);
|
|
--info: #3b82f6;
|
|
--info-muted: rgba(59, 130, 246, 0.15);
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
:root {
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 12px;
|
|
--space-lg: 16px;
|
|
--space-xl: 24px;
|
|
--radius-sm: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
|
|
--font-mono: "SF Mono", "Fira Code", "JetBrains Mono", Consolas, monospace;
|
|
--font-size-xs: 11px;
|
|
--font-size-sm: 13px;
|
|
--font-size-md: 14px;
|
|
--font-size-lg: 16px;
|
|
--font-size-xl: 20px;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-sans);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
button, a {
|
|
font: inherit;
|
|
}
|
|
|
|
.app {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-columns: 220px minmax(0, 1fr);
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.sidebar {
|
|
background: var(--bg-secondary);
|
|
border-right: 1px solid var(--border-primary);
|
|
padding: var(--space-md) var(--space-sm);
|
|
min-width: 0;
|
|
}
|
|
|
|
.brand {
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0 8px;
|
|
margin-bottom: var(--space-md);
|
|
font-weight: 700;
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
.brand img {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.section-label {
|
|
margin: 18px 8px 7px;
|
|
color: var(--text-tertiary);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.nav-item {
|
|
min-height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 1px 0;
|
|
padding: 0 10px;
|
|
border-radius: var(--radius-md);
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.nav-item svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: var(--accent-muted);
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-item.active svg {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.main {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.preview-topbar {
|
|
min-height: 58px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
padding: 12px var(--space-xl);
|
|
border-bottom: 1px solid var(--border-primary);
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.preview-topbar h1 {
|
|
margin: 0;
|
|
font-size: var(--font-size-lg);
|
|
line-height: 1.3;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.preview-topbar p {
|
|
margin: 2px 0 0;
|
|
color: var(--text-tertiary);
|
|
font-size: var(--font-size-xs);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.topbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.segmented {
|
|
min-height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 3px;
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.segmented button {
|
|
min-height: 28px;
|
|
padding: 0 10px;
|
|
border: 0;
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: var(--font-size-sm);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.segmented button[aria-pressed="true"] {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
box-shadow: var(--shadow-sm);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.icon-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 680px;
|
|
padding: var(--space-xl);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboard-preview {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: var(--space-lg);
|
|
opacity: .45;
|
|
filter: saturate(.9);
|
|
}
|
|
|
|
.card {
|
|
min-height: 128px;
|
|
padding: var(--space-lg);
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--bg-secondary);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.card.wide {
|
|
grid-column: span 2;
|
|
min-height: 220px;
|
|
}
|
|
|
|
.card h2 {
|
|
margin: 0 0 10px;
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
.fake-row {
|
|
height: 12px;
|
|
margin-top: 10px;
|
|
border-radius: 99px;
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.fake-row.short { width: 58%; }
|
|
.fake-row.mid { width: 78%; }
|
|
|
|
.modal-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-xl);
|
|
background: rgba(0, 0, 0, .45);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.update-modal {
|
|
width: min(560px, 100%);
|
|
max-height: calc(100vh - 80px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: var(--radius-xl);
|
|
background: var(--bg-secondary);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.modal-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-md);
|
|
padding: 20px 20px 16px;
|
|
border-bottom: 1px solid var(--border-primary);
|
|
}
|
|
|
|
.modal-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: grid;
|
|
place-items: center;
|
|
flex: 0 0 auto;
|
|
border-radius: var(--radius-lg);
|
|
background: var(--accent-muted);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.modal-icon.success {
|
|
background: var(--success-muted);
|
|
color: var(--success);
|
|
}
|
|
|
|
.modal-icon.warning {
|
|
background: var(--warning-muted);
|
|
color: var(--warning);
|
|
}
|
|
|
|
.modal-icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.modal-title-wrap {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.modal-kicker {
|
|
margin: 0 0 4px;
|
|
color: var(--text-tertiary);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.modal-title {
|
|
margin: 0;
|
|
font-size: var(--font-size-xl);
|
|
line-height: 1.35;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.modal-desc {
|
|
margin: 8px 0 0;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.close-btn {
|
|
width: 34px;
|
|
height: 34px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 0;
|
|
border-radius: var(--radius-md);
|
|
background: transparent;
|
|
color: var(--text-tertiary);
|
|
cursor: pointer;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
background: var(--bg-glass-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 16px 20px 18px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.version-strip {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
margin-bottom: var(--space-lg);
|
|
padding: 12px;
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--bg-card);
|
|
}
|
|
|
|
.version-cell {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.version-cell span {
|
|
color: var(--text-tertiary);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.version-cell strong,
|
|
.mono {
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.arrow-chip {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.asset-panel,
|
|
.progress-panel,
|
|
.notice-panel {
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--bg-secondary);
|
|
overflow: hidden;
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
.asset-head,
|
|
.progress-head,
|
|
.notice-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
padding: 12px 14px;
|
|
border-bottom: 1px solid var(--border-primary);
|
|
background: var(--bg-card);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.asset-head span,
|
|
.progress-head span,
|
|
.notice-head span {
|
|
color: var(--text-tertiary);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.asset-body {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: var(--space-md);
|
|
align-items: center;
|
|
padding: 14px;
|
|
}
|
|
|
|
.asset-name {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 5px;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.asset-name code,
|
|
.hash-line code {
|
|
font-family: var(--font-mono);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.asset-name span {
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.badge {
|
|
min-height: 26px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border-radius: 999px;
|
|
padding: 0 9px;
|
|
background: var(--success-muted);
|
|
color: var(--success);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hash-line {
|
|
margin: 0 0 var(--space-lg);
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-xs);
|
|
line-height: 1.55;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.change-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: grid;
|
|
gap: 9px;
|
|
}
|
|
|
|
.change-list li {
|
|
display: grid;
|
|
grid-template-columns: 18px minmax(0, 1fr);
|
|
gap: 8px;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.change-list svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-top: 2px;
|
|
color: var(--success);
|
|
}
|
|
|
|
.progress-body,
|
|
.notice-body {
|
|
padding: 14px;
|
|
}
|
|
|
|
.progress-track {
|
|
height: 8px;
|
|
border-radius: 99px;
|
|
background: var(--bg-tertiary);
|
|
overflow: hidden;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.progress-fill {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--success);
|
|
}
|
|
|
|
.notice-body {
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.pill-row {
|
|
display: flex;
|
|
gap: 7px;
|
|
flex-wrap: wrap;
|
|
margin: 0 0 var(--space-lg);
|
|
}
|
|
|
|
.pill {
|
|
min-height: 26px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: 999px;
|
|
padding: 0 9px;
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pill.warning {
|
|
background: var(--warning-muted);
|
|
color: var(--warning);
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--space-sm);
|
|
padding: 14px 20px;
|
|
border-top: 1px solid var(--border-primary);
|
|
background: var(--bg-card);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
min-height: 36px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 7px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: var(--bg-glass-hover);
|
|
}
|
|
|
|
.btn-primary {
|
|
border-color: var(--accent);
|
|
background: var(--accent);
|
|
color: var(--text-inverse);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--accent-hover);
|
|
border-color: var(--accent-hover);
|
|
color: var(--text-inverse);
|
|
}
|
|
|
|
.hidden { display: none !important; }
|
|
|
|
@media (max-width: 820px) {
|
|
.app {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.preview-topbar {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.topbar-actions,
|
|
.segmented {
|
|
width: 100%;
|
|
}
|
|
|
|
.segmented {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.content {
|
|
min-height: 760px;
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.dashboard-preview {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.card.wide {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.modal-overlay {
|
|
align-items: flex-start;
|
|
padding: var(--space-md);
|
|
overflow: auto;
|
|
}
|
|
|
|
.update-modal {
|
|
max-height: none;
|
|
}
|
|
|
|
.modal-head,
|
|
.modal-body,
|
|
.modal-actions {
|
|
padding-left: var(--space-lg);
|
|
padding-right: var(--space-lg);
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.asset-body,
|
|
.version-strip {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.arrow-chip {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.modal-actions {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.modal-actions .btn {
|
|
width: 100%;
|
|
min-height: 44px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<aside class="sidebar" aria-label="ClawPanel 侧边栏预览">
|
|
<div class="brand">
|
|
<img src="../public/images/logo.png" alt="ClawPanel">
|
|
<span>ClawPanel</span>
|
|
</div>
|
|
<div class="section-label">OpenClaw</div>
|
|
<div class="nav-item active">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>
|
|
仪表盘
|
|
</div>
|
|
<div class="nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
|
|
服务管理
|
|
</div>
|
|
<div class="nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20v-6M6 20V10M18 20V4"/></svg>
|
|
模型配置
|
|
</div>
|
|
<div class="section-label">System</div>
|
|
<div class="nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1.82V22a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 8.6 20a1.65 1.65 0 0 0-1.82-.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1.82-.33H2a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4 8.6a1.65 1.65 0 0 0-.33-1.82l-.06-.06A2 2 0 1 1 6.44 3.9l.06.06A1.65 1.65 0 0 0 8.6 4.6a1.65 1.65 0 0 0 1-.6A1.65 1.65 0 0 0 9.91 2V2a2 2 0 1 1 4 0v.09A1.65 1.65 0 0 0 15 4.6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 8.6a1.65 1.65 0 0 0 .6 1 1.65 1.65 0 0 0 1.82.33H22a2 2 0 1 1 0 4h-.09A1.65 1.65 0 0 0 19.4 15Z"/></svg>
|
|
设置
|
|
</div>
|
|
<div class="nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
|
|
关于
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main">
|
|
<header class="preview-topbar">
|
|
<div>
|
|
<h1>版本更新弹窗预览</h1>
|
|
<p>安装包更新版：贴近客户端现有 modal、按钮和变量体系。</p>
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<div class="segmented" role="group" aria-label="切换更新场景">
|
|
<button type="button" data-scenario="installer" aria-pressed="true">完整安装包</button>
|
|
<button type="button" data-scenario="notice" aria-pressed="false">公告</button>
|
|
</div>
|
|
<button class="icon-btn" type="button" id="theme-toggle" aria-label="切换明暗模式">
|
|
<svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v2m0 14v2m9-9h-2M5 12H3m15.36-6.36-1.41 1.41M7.05 16.95l-1.41 1.41m12.72 0-1.41-1.41M7.05 7.05 5.64 5.64"/><circle cx="12" cy="12" r="4"/></svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="content" aria-label="更新弹窗预览区域">
|
|
<div class="dashboard-preview" aria-hidden="true">
|
|
<div class="card">
|
|
<h2>服务状态</h2>
|
|
<div class="fake-row mid"></div>
|
|
<div class="fake-row short"></div>
|
|
<div class="fake-row"></div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>Gateway</h2>
|
|
<div class="fake-row"></div>
|
|
<div class="fake-row mid"></div>
|
|
<div class="fake-row short"></div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>版本</h2>
|
|
<div class="fake-row short"></div>
|
|
<div class="fake-row"></div>
|
|
<div class="fake-row mid"></div>
|
|
</div>
|
|
<div class="card wide">
|
|
<h2>最近日志</h2>
|
|
<div class="fake-row"></div>
|
|
<div class="fake-row mid"></div>
|
|
<div class="fake-row"></div>
|
|
<div class="fake-row short"></div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>下载镜像</h2>
|
|
<div class="fake-row mid"></div>
|
|
<div class="fake-row"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay">
|
|
<article class="update-modal" data-panel="installer" aria-label="完整安装包更新">
|
|
<header class="modal-head">
|
|
<div class="modal-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
|
|
</div>
|
|
<div class="modal-title-wrap">
|
|
<p class="modal-kicker">检测到新版本</p>
|
|
<h2 class="modal-title">ClawPanel v0.18.0 可用</h2>
|
|
<p class="modal-desc">已根据当前系统选择推荐安装包。下载会先走官网镜像，失败时可切换 GitHub 备用入口。</p>
|
|
</div>
|
|
<button class="close-btn" type="button" aria-label="关闭">
|
|
<svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
|
|
</button>
|
|
</header>
|
|
<div class="modal-body">
|
|
<div class="version-strip">
|
|
<div class="version-cell"><span>当前版本</span><strong>0.17.0</strong></div>
|
|
<div class="arrow-chip">
|
|
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
|
|
</div>
|
|
<div class="version-cell"><span>最新版本</span><strong>0.18.0</strong></div>
|
|
</div>
|
|
|
|
<div class="asset-panel">
|
|
<div class="asset-head">
|
|
<strong>推荐下载</strong>
|
|
<span>Windows x64 · 9.5 MB</span>
|
|
</div>
|
|
<div class="asset-body">
|
|
<div class="asset-name">
|
|
<code>ClawPanel_0.18.0_x64-setup.exe</code>
|
|
<span>轻量安装包，适合已安装 WebView2 的 Win10 / Win11</span>
|
|
</div>
|
|
<span class="badge">官方镜像</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="hash-line">SHA256 <code>59d9f6a839b98f3d6d3123cba32102354a88201b71bd85936da28d475e0feeab</code></p>
|
|
|
|
<ul class="change-list">
|
|
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5"/></svg><span>Hermes Agent 控制项补齐，减少手动编辑配置。</span></li>
|
|
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5"/></svg><span>官网镜像下载链路稳定，国内下载速度更好。</span></li>
|
|
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5"/></svg><span>修复 Dashboard 并发加载导致的状态覆盖。</span></li>
|
|
</ul>
|
|
</div>
|
|
<footer class="modal-actions">
|
|
<button class="btn" type="button">忽略此版本</button>
|
|
<a class="btn" href="#">GitHub 备用</a>
|
|
<a class="btn btn-primary" href="#">下载推荐安装包</a>
|
|
</footer>
|
|
</article>
|
|
|
|
<article class="update-modal hidden" data-panel="notice" aria-label="官网公告">
|
|
<header class="modal-head">
|
|
<div class="modal-icon warning">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/></svg>
|
|
</div>
|
|
<div class="modal-title-wrap">
|
|
<p class="modal-kicker">官网公告</p>
|
|
<h2 class="modal-title">旧版安装包存在兼容风险</h2>
|
|
<p class="modal-desc">当前版本仍可继续使用。建议在空闲时更新完整安装包，避免后续新命令缺失导致部分页面不可用。</p>
|
|
</div>
|
|
<button class="close-btn" type="button" aria-label="关闭">
|
|
<svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
|
|
</button>
|
|
</header>
|
|
<div class="modal-body">
|
|
<div class="notice-panel">
|
|
<div class="notice-head">
|
|
<strong>服务端通知</strong>
|
|
<span>critical · zh-CN</span>
|
|
</div>
|
|
<div class="notice-body">
|
|
这条消息通过官网公告接口投放。关闭后会按 <span class="mono">dismissKey</span> 记忆；服务端更换 key 后可重新触达。
|
|
</div>
|
|
</div>
|
|
<div class="pill-row">
|
|
<span class="pill warning">可关闭</span>
|
|
<span class="pill">只显示一次</span>
|
|
<span class="pill">不走 Web Push</span>
|
|
</div>
|
|
</div>
|
|
<footer class="modal-actions">
|
|
<button class="btn" type="button">知道了</button>
|
|
<a class="btn btn-primary" href="#">查看处理建议</a>
|
|
</footer>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
const scenarioButtons = Array.from(document.querySelectorAll('[data-scenario]'))
|
|
const panels = Array.from(document.querySelectorAll('[data-panel]'))
|
|
|
|
scenarioButtons.forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
const scenario = button.dataset.scenario
|
|
scenarioButtons.forEach((item) => item.setAttribute('aria-pressed', String(item === button)))
|
|
panels.forEach((panel) => panel.classList.toggle('hidden', panel.dataset.panel !== scenario))
|
|
})
|
|
})
|
|
|
|
document.getElementById('theme-toggle').addEventListener('click', () => {
|
|
const root = document.documentElement
|
|
root.dataset.theme = root.dataset.theme === 'dark' ? 'light' : 'dark'
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|