Merge 4e7de956c8 into 96096ea0ff
This commit is contained in:
Gloris Cedeno
GitHub
commit
4069fd606a
|
|
@ -0,0 +1 @@
|
||||||
|
3.12
|
||||||
|
|
@ -18,8 +18,9 @@
|
||||||
font-family: 'JetBrains Mono', 'Space Grotesk', 'Noto Sans SC', monospace;
|
font-family: 'JetBrains Mono', 'Space Grotesk', 'Noto Sans SC', monospace;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
color: #000000;
|
color: var(--text-primary);
|
||||||
background-color: #ffffff;
|
background-color: var(--bg-primary);
|
||||||
|
transition: background-color 0.2s, color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 滚动条样式 */
|
/* 滚动条样式 */
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
/* ===== Light mode (default) ===== */
|
||||||
|
:root {
|
||||||
|
--bg-primary: #ffffff;
|
||||||
|
--bg-secondary: #f5f5f5;
|
||||||
|
--bg-surface: #fafafa;
|
||||||
|
--bg-input: #fafafa;
|
||||||
|
--bg-hover: #f0f0f0;
|
||||||
|
|
||||||
|
--text-primary: #000000;
|
||||||
|
--text-secondary: #333333;
|
||||||
|
--text-muted: #666666;
|
||||||
|
--text-faint: #999999;
|
||||||
|
|
||||||
|
--border: #e0e0e0;
|
||||||
|
--border-light: #eeeeee;
|
||||||
|
--border-medium: #cccccc;
|
||||||
|
|
||||||
|
--accent: #ff6b35;
|
||||||
|
--status-success: #1a936f;
|
||||||
|
--status-error: #c5283d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Dark mode ===== */
|
||||||
|
html.dark {
|
||||||
|
--bg-primary: #111111;
|
||||||
|
--bg-secondary: #1a1a1a;
|
||||||
|
--bg-surface: #1e1e1e;
|
||||||
|
--bg-input: #1a1a1a;
|
||||||
|
--bg-hover: #2a2a2a;
|
||||||
|
|
||||||
|
--text-primary: #e5e5e5;
|
||||||
|
--text-secondary: #cccccc;
|
||||||
|
--text-muted: #a0a0a0;
|
||||||
|
--text-faint: #555555;
|
||||||
|
|
||||||
|
--border: #2e2e2e;
|
||||||
|
--border-light: #222222;
|
||||||
|
--border-medium: #3a3a3a;
|
||||||
|
|
||||||
|
--accent: #ff6b35;
|
||||||
|
--status-success: #1a936f;
|
||||||
|
--status-error: #c5283d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Global dark mode overrides ===== */
|
||||||
|
html.dark body {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark ::-webkit-scrollbar-track {
|
||||||
|
background: #1a1a1a;
|
||||||
|
}
|
||||||
|
html.dark ::-webkit-scrollbar-thumb {
|
||||||
|
background: #444;
|
||||||
|
}
|
||||||
|
html.dark ::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #666;
|
||||||
|
}
|
||||||
|
|
@ -818,10 +818,11 @@ onUnmounted(() => {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #FAFAFA;
|
background-color: var(--bg-surface);
|
||||||
background-image: radial-gradient(#D0D0D0 1.5px, transparent 1.5px);
|
background-image: radial-gradient(var(--border) 1.5px, transparent 1.5px);
|
||||||
background-size: 24px 24px;
|
background-size: 24px 24px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
transition: background-color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-header {
|
.panel-header {
|
||||||
|
|
@ -834,14 +835,14 @@ onUnmounted(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0));
|
background: linear-gradient(to bottom, var(--bg-surface) 60%, transparent);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-title {
|
.panel-title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -855,24 +856,24 @@ onUnmounted(() => {
|
||||||
.tool-btn {
|
.tool-btn {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
border: 1px solid #E0E0E0;
|
border: 1px solid var(--border);
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-btn:hover {
|
.tool-btn:hover {
|
||||||
background: #F5F5F5;
|
background: var(--bg-hover);
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
border-color: #CCC;
|
border-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-btn .btn-text {
|
.tool-btn .btn-text {
|
||||||
|
|
@ -902,7 +903,7 @@ onUnmounted(() => {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-icon {
|
.empty-icon {
|
||||||
|
|
@ -916,11 +917,11 @@ onUnmounted(() => {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 24px;
|
bottom: 24px;
|
||||||
left: 24px;
|
left: 24px;
|
||||||
background: rgba(255,255,255,0.95);
|
background: var(--bg-primary);
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid #EAEAEA;
|
border: 1px solid var(--border);
|
||||||
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
|
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -928,7 +929,7 @@ onUnmounted(() => {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #E91E63;
|
color: #e91e63;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
|
|
@ -946,7 +947,7 @@ onUnmounted(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #555;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-dot {
|
.legend-dot {
|
||||||
|
|
@ -968,11 +969,11 @@ onUnmounted(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
padding: 8px 14px;
|
padding: 8px 14px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
border: 1px solid #E0E0E0;
|
border: 1px solid var(--border);
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -996,7 +997,7 @@ onUnmounted(() => {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background-color: #E0E0E0;
|
background-color: var(--border-medium);
|
||||||
border-radius: 22px;
|
border-radius: 22px;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
}
|
}
|
||||||
|
|
@ -1008,7 +1009,7 @@ onUnmounted(() => {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
left: 3px;
|
left: 3px;
|
||||||
bottom: 3px;
|
bottom: 3px;
|
||||||
background-color: white;
|
background-color: var(--bg-primary);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
}
|
}
|
||||||
|
|
@ -1023,7 +1024,7 @@ input:checked + .slider:before {
|
||||||
|
|
||||||
.toggle-label {
|
.toggle-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Detail Panel - Right Side */
|
/* Detail Panel - Right Side */
|
||||||
|
|
@ -1033,10 +1034,10 @@ input:checked + .slider:before {
|
||||||
right: 20px;
|
right: 20px;
|
||||||
width: 320px;
|
width: 320px;
|
||||||
max-height: calc(100% - 100px);
|
max-height: calc(100% - 100px);
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
border: 1px solid #EAEAEA;
|
border: 1px solid var(--border);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-family: 'Noto Sans SC', system-ui, sans-serif;
|
font-family: 'Noto Sans SC', system-ui, sans-serif;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
|
@ -1050,14 +1051,14 @@ input:checked + .slider:before {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
background: #FAFAFA;
|
background: var(--bg-surface);
|
||||||
border-bottom: 1px solid #EEE;
|
border-bottom: 1px solid var(--border-light);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-title {
|
.detail-title {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1075,14 +1076,14 @@ input:checked + .slider:before {
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
transition: color 0.2s;
|
transition: color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-close:hover {
|
.detail-close:hover {
|
||||||
color: #333;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-content {
|
.detail-content {
|
||||||
|
|
@ -1099,14 +1100,14 @@ input:checked + .slider:before {
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-label {
|
.detail-label {
|
||||||
color: #888;
|
color: var(--text-faint);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
min-width: 80px;
|
min-width: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.detail-value {
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
flex: 1;
|
flex: 1;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
@ -1114,24 +1115,24 @@ input:checked + .slider:before {
|
||||||
.detail-value.uuid-text {
|
.detail-value.uuid-text {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value.fact-text {
|
.detail-value.fact-text {
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: #444;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-section {
|
.detail-section {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
padding-top: 14px;
|
padding-top: 14px;
|
||||||
border-top: 1px solid #F0F0F0;
|
border-top: 1px solid var(--border-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1147,19 +1148,19 @@ input:checked + .slider:before {
|
||||||
}
|
}
|
||||||
|
|
||||||
.property-key {
|
.property-key {
|
||||||
color: #888;
|
color: var(--text-faint);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
min-width: 90px;
|
min-width: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.property-value {
|
.property-value {
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-text {
|
.summary-text {
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: #444;
|
color: var(--text-muted);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1172,11 +1173,11 @@ input:checked + .slider:before {
|
||||||
.label-tag {
|
.label-tag {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
background: #F5F5F5;
|
background: var(--bg-secondary);
|
||||||
border: 1px solid #E0E0E0;
|
border: 1px solid var(--border);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #555;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.episodes-list {
|
.episodes-list {
|
||||||
|
|
@ -1188,24 +1189,24 @@ input:checked + .slider:before {
|
||||||
.episode-tag {
|
.episode-tag {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
background: #F8F8F8;
|
background: var(--bg-surface);
|
||||||
border: 1px solid #E8E8E8;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Edge relation header */
|
/* Edge relation header */
|
||||||
.edge-relation-header {
|
.edge-relation-header {
|
||||||
background: #F8F8F8;
|
background: var(--bg-surface);
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
@ -1317,8 +1318,8 @@ input:checked + .slider:before {
|
||||||
.self-loop-count {
|
.self-loop-count {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
background: rgba(255,255,255,0.8);
|
background: var(--bg-surface);
|
||||||
padding: 2px 8px;
|
padding: 2px 8px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
@ -1330,8 +1331,8 @@ input:checked + .slider:before {
|
||||||
}
|
}
|
||||||
|
|
||||||
.self-loop-item {
|
.self-loop-item {
|
||||||
background: #FAFAFA;
|
background: var(--bg-secondary);
|
||||||
border: 1px solid #EAEAEA;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1340,24 +1341,24 @@ input:checked + .slider:before {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
background: #F5F5F5;
|
background: var(--bg-hover);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.2s;
|
transition: background 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.self-loop-item-header:hover {
|
.self-loop-item-header:hover {
|
||||||
background: #EEEEEE;
|
background: var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.self-loop-item.expanded .self-loop-item-header {
|
.self-loop-item.expanded .self-loop-item-header {
|
||||||
background: #E8E8E8;
|
background: var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.self-loop-index {
|
.self-loop-index {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #888;
|
color: var(--text-faint);
|
||||||
background: #E0E0E0;
|
background: var(--border-medium);
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -1365,7 +1366,7 @@ input:checked + .slider:before {
|
||||||
.self-loop-name {
|
.self-loop-name {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1377,20 +1378,20 @@ input:checked + .slider:before {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #888;
|
color: var(--text-faint);
|
||||||
background: #E0E0E0;
|
background: var(--border-medium);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.self-loop-item.expanded .self-loop-toggle {
|
.self-loop-item.expanded .self-loop-toggle {
|
||||||
background: #D0D0D0;
|
background: var(--border);
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.self-loop-item-content {
|
.self-loop-item-content {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border-top: 1px solid #EAEAEA;
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.self-loop-item-content .detail-row {
|
.self-loop-item-content .detail-row {
|
||||||
|
|
|
||||||
|
|
@ -66,11 +66,12 @@ onUnmounted(() => {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Light theme (default - for white header backgrounds) */
|
/* Inherits color from parent so it works on both dark navbars and light headers */
|
||||||
.switcher-trigger {
|
.switcher-trigger {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #333;
|
color: inherit;
|
||||||
border: 1px solid #CCC;
|
border: 1px solid currentColor;
|
||||||
|
opacity: 0.75;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
|
|
@ -78,11 +79,11 @@ onUnmounted(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
transition: border-color 0.2s, opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher-trigger:hover {
|
.switcher-trigger:hover {
|
||||||
border-color: #999;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.caret {
|
.caret {
|
||||||
|
|
@ -94,30 +95,30 @@ onUnmounted(() => {
|
||||||
top: 100%;
|
top: 100%;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-surface, #fff);
|
||||||
border: 1px solid #DDD;
|
border: 1px solid var(--border, #ddd);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher-option {
|
.switcher-option {
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: #333;
|
color: var(--text-secondary, #333);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
transition: background 0.15s;
|
transition: background 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher-option:hover {
|
.switcher-option:hover {
|
||||||
background: #F0F0F0;
|
background: var(--bg-hover, #f0f0f0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher-option.active {
|
.switcher-option.active {
|
||||||
color: var(--orange, #FF4500);
|
color: var(--accent, #ff6b35);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -275,7 +275,7 @@ watch(() => props.systemLogs.length, () => {
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.workbench-panel {
|
.workbench-panel {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #FAFAFA;
|
background-color: var(--bg-secondary);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -292,13 +292,13 @@ watch(() => props.systemLogs.length, () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-card {
|
.step-card {
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||||
border: 1px solid #EAEAEA;
|
border: 1px solid var(--border);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
position: relative; /* For absolute overlay */
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-card.active {
|
.step-card.active {
|
||||||
|
|
@ -323,18 +323,19 @@ watch(() => props.systemLogs.length, () => {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #E0E0E0;
|
color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-card.active .step-num,
|
.step-card.active .step-num,
|
||||||
.step-card.completed .step-num {
|
.step-card.completed .step-num {
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-title {
|
.step-title {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
|
|
@ -348,18 +349,18 @@ watch(() => props.systemLogs.length, () => {
|
||||||
.badge.success { background: #E8F5E9; color: #2E7D32; }
|
.badge.success { background: #E8F5E9; color: #2E7D32; }
|
||||||
.badge.processing { background: #FF5722; color: #FFF; }
|
.badge.processing { background: #FF5722; color: #FFF; }
|
||||||
.badge.accent { background: #FF5722; color: #FFF; }
|
.badge.accent { background: #FF5722; color: #FFF; }
|
||||||
.badge.pending { background: #F5F5F5; color: #999; }
|
.badge.pending { background: var(--bg-hover); color: var(--text-faint); }
|
||||||
|
|
||||||
.api-note {
|
.api-note {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
@ -378,7 +379,7 @@ watch(() => props.systemLogs.length, () => {
|
||||||
.tag-label {
|
.tag-label {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #AAA;
|
color: var(--text-faint);
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
@ -390,12 +391,12 @@ watch(() => props.systemLogs.length, () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.entity-tag {
|
.entity-tag {
|
||||||
background: #F5F5F5;
|
background: var(--bg-hover);
|
||||||
border: 1px solid #EEE;
|
border: 1px solid var(--border);
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
@ -405,22 +406,22 @@ watch(() => props.systemLogs.length, () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.entity-tag.clickable:hover {
|
.entity-tag.clickable:hover {
|
||||||
background: #E0E0E0;
|
background: var(--border-medium);
|
||||||
border-color: #CCC;
|
border-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ontology Detail Overlay */
|
/* Ontology Detail Overlay */
|
||||||
.ontology-detail-overlay {
|
.ontology-detail-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 60px; /* Below header roughly */
|
top: 60px;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
background: rgba(255, 255, 255, 0.98);
|
background: var(--bg-surface);
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(4px);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
border: 1px solid #EAEAEA;
|
border: 1px solid var(--border);
|
||||||
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -435,8 +436,8 @@ watch(() => props.systemLogs.length, () => {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
border-bottom: 1px solid #EAEAEA;
|
border-bottom: 1px solid var(--border);
|
||||||
background: #FAFAFA;
|
background: var(--bg-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-title-group {
|
.detail-title-group {
|
||||||
|
|
@ -448,8 +449,8 @@ watch(() => props.systemLogs.length, () => {
|
||||||
.detail-type-badge {
|
.detail-type-badge {
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #FFF;
|
color: var(--bg-primary);
|
||||||
background: #000;
|
background: var(--text-primary);
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
@ -459,19 +460,20 @@ watch(() => props.systemLogs.length, () => {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-btn:hover {
|
.close-btn:hover {
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-body {
|
.detail-body {
|
||||||
|
|
@ -482,11 +484,11 @@ watch(() => props.systemLogs.length, () => {
|
||||||
|
|
||||||
.detail-desc {
|
.detail-desc {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #444;
|
color: var(--text-secondary);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
border-bottom: 1px dashed #EAEAEA;
|
border-bottom: 1px dashed var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-section {
|
.detail-section {
|
||||||
|
|
@ -497,7 +499,7 @@ watch(() => props.systemLogs.length, () => {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #AAA;
|
color: var(--text-faint);
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -514,23 +516,23 @@ watch(() => props.systemLogs.length, () => {
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
background: #F9F9F9;
|
background: var(--bg-secondary);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attr-name {
|
.attr-name {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.attr-type {
|
.attr-type {
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attr-desc {
|
.attr-desc {
|
||||||
color: #555;
|
color: var(--text-muted);
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
}
|
}
|
||||||
|
|
@ -543,11 +545,11 @@ watch(() => props.systemLogs.length, () => {
|
||||||
|
|
||||||
.example-tag {
|
.example-tag {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
border: 1px solid #E0E0E0;
|
border: 1px solid var(--border);
|
||||||
padding: 3px 8px;
|
padding: 3px 8px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
color: #555;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.conn-item {
|
.conn-item {
|
||||||
|
|
@ -556,18 +558,18 @@ watch(() => props.systemLogs.length, () => {
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
background: #F5F5F5;
|
background: var(--bg-hover);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.conn-node {
|
.conn-node {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.conn-arrow {
|
.conn-arrow {
|
||||||
color: #BBB;
|
color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Step 02 Stats */
|
/* Step 02 Stats */
|
||||||
|
|
@ -575,7 +577,7 @@ watch(() => props.systemLogs.length, () => {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
background: #F9F9F9;
|
background: var(--bg-secondary);
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
@ -588,13 +590,13 @@ watch(() => props.systemLogs.length, () => {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -603,8 +605,8 @@ watch(() => props.systemLogs.length, () => {
|
||||||
/* Step 03 Button */
|
/* Step 03 Button */
|
||||||
.action-btn {
|
.action-btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #000;
|
background: var(--text-primary);
|
||||||
color: #FFF;
|
color: var(--bg-primary);
|
||||||
border: none;
|
border: none;
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
@ -619,7 +621,8 @@ watch(() => props.systemLogs.length, () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn:disabled {
|
.action-btn:disabled {
|
||||||
background: #CCC;
|
background: var(--border-medium);
|
||||||
|
color: var(--text-muted);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -667,7 +670,7 @@ watch(() => props.systemLogs.length, () => {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
height: 80px; /* Approx 4 lines visible */
|
height: 80px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding-right: 4px;
|
padding-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="env-setup-panel">
|
<div class="env-setup-panel">
|
||||||
<div class="scroll-container">
|
<div class="scroll-container">
|
||||||
<!-- Step 01: 模拟实例 -->
|
<!-- Step 01: 模拟实例 -->
|
||||||
|
|
@ -1088,7 +1088,7 @@ onUnmounted(() => {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #FAFAFA;
|
background: var(--bg-secondary);
|
||||||
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1103,11 +1103,11 @@ onUnmounted(() => {
|
||||||
|
|
||||||
/* Step Card */
|
/* Step Card */
|
||||||
.step-card {
|
.step-card {
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||||
border: 1px solid #EAEAEA;
|
border: 1px solid var(--border);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -1134,12 +1134,12 @@ onUnmounted(() => {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #E0E0E0;
|
color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-card.active .step-num,
|
.step-card.active .step-num,
|
||||||
.step-card.completed .step-num {
|
.step-card.completed .step-num {
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-title {
|
.step-title {
|
||||||
|
|
@ -1158,7 +1158,7 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.badge.success { background: #E8F5E9; color: #2E7D32; }
|
.badge.success { background: #E8F5E9; color: #2E7D32; }
|
||||||
.badge.processing { background: #FF5722; color: #FFF; }
|
.badge.processing { background: #FF5722; color: #FFF; }
|
||||||
.badge.pending { background: #F5F5F5; color: #999; }
|
.badge.pending { background: var(--bg-hover); color: var(--text-faint); }
|
||||||
.badge.accent { background: #E3F2FD; color: #1565C0; }
|
.badge.accent { background: #E3F2FD; color: #1565C0; }
|
||||||
|
|
||||||
.card-content {
|
.card-content {
|
||||||
|
|
@ -1168,13 +1168,13 @@ onUnmounted(() => {
|
||||||
.api-note {
|
.api-note {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
@ -1198,8 +1198,8 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn.primary {
|
.action-btn.primary {
|
||||||
background: #000;
|
background: var(--text-primary);
|
||||||
color: #FFF;
|
color: var(--bg-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn.primary:hover:not(:disabled) {
|
.action-btn.primary:hover:not(:disabled) {
|
||||||
|
|
@ -1207,12 +1207,12 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn.secondary {
|
.action-btn.secondary {
|
||||||
background: #F5F5F5;
|
background: var(--bg-hover);
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn.secondary:hover:not(:disabled) {
|
.action-btn.secondary:hover:not(:disabled) {
|
||||||
background: #E5E5E5;
|
background: var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn:disabled {
|
.action-btn:disabled {
|
||||||
|
|
@ -1237,7 +1237,7 @@ onUnmounted(() => {
|
||||||
|
|
||||||
/* Info Card */
|
/* Info Card */
|
||||||
.info-card {
|
.info-card {
|
||||||
background: #F5F5F5;
|
background: var(--bg-hover);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
|
|
@ -1248,7 +1248,7 @@ onUnmounted(() => {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
border-bottom: 1px dashed #E0E0E0;
|
border-bottom: 1px dashed var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-row:last-child {
|
.info-row:last-child {
|
||||||
|
|
@ -1257,7 +1257,7 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.info-label {
|
.info-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-value {
|
.info-value {
|
||||||
|
|
@ -1275,7 +1275,7 @@ onUnmounted(() => {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
background: #F9F9F9;
|
background: var(--bg-secondary);
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
@ -1288,13 +1288,13 @@ onUnmounted(() => {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -1303,7 +1303,7 @@ onUnmounted(() => {
|
||||||
/* Profiles Preview */
|
/* Profiles Preview */
|
||||||
.profiles-preview {
|
.profiles-preview {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
border-top: 1px solid #E5E5E5;
|
border-top: 1px solid var(--border);
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1317,7 +1317,7 @@ onUnmounted(() => {
|
||||||
.preview-title {
|
.preview-title {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
@ -1345,8 +1345,8 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-card {
|
.profile-card {
|
||||||
background: #FAFAFA;
|
background: var(--bg-secondary);
|
||||||
border: 1px solid #E5E5E5;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1354,8 +1354,8 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-card:hover {
|
.profile-card:hover {
|
||||||
border-color: #999;
|
border-color: var(--border-medium);
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-header {
|
.profile-header {
|
||||||
|
|
@ -1368,13 +1368,13 @@ onUnmounted(() => {
|
||||||
.profile-realname {
|
.profile-realname {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-username {
|
.profile-username {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-meta {
|
.profile-meta {
|
||||||
|
|
@ -1383,15 +1383,15 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.profile-profession {
|
.profile-profession {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
background: #F0F0F0;
|
background: var(--bg-hover);
|
||||||
padding: 2px 8px;
|
padding: 2px 8px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-bio {
|
.profile-bio {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #444;
|
color: var(--text-secondary);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin: 0 0 10px 0;
|
margin: 0 0 10px 0;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
|
|
@ -1416,7 +1416,7 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.topic-more {
|
.topic-more {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1428,7 +1428,7 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.config-block {
|
.config-block {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
border-top: 1px solid #E5E5E5;
|
border-top: 1px solid var(--border);
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1448,7 +1448,7 @@ onUnmounted(() => {
|
||||||
.config-block-title {
|
.config-block-title {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
@ -1456,8 +1456,8 @@ onUnmounted(() => {
|
||||||
.config-block-badge {
|
.config-block-badge {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
background: #F1F5F9;
|
background: var(--bg-hover);
|
||||||
color: #475569;
|
color: var(--text-muted);
|
||||||
padding: 2px 8px;
|
padding: 2px 8px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
@ -1470,7 +1470,7 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-item {
|
.config-item {
|
||||||
background: #F9F9F9;
|
background: var(--bg-secondary);
|
||||||
padding: 12px 14px;
|
padding: 12px 14px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -1480,14 +1480,14 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.config-item-label {
|
.config-item-label {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #94A3B8;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-item-value {
|
.config-item-value {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1E293B;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Time Periods */
|
/* Time Periods */
|
||||||
|
|
@ -1503,21 +1503,21 @@ onUnmounted(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
background: #F9F9F9;
|
background: var(--bg-secondary);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.period-label {
|
.period-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #64748B;
|
color: var(--text-muted);
|
||||||
min-width: 70px;
|
min-width: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.period-hours {
|
.period-hours {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #475569;
|
color: var(--text-muted);
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1555,16 +1555,16 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.agent-card {
|
.agent-card {
|
||||||
background: #F9F9F9;
|
background: var(--bg-secondary);
|
||||||
border: 1px solid #E5E5E5;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.agent-card:hover {
|
.agent-card:hover {
|
||||||
border-color: #999;
|
border-color: var(--border-medium);
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Agent Card Header */
|
/* Agent Card Header */
|
||||||
|
|
@ -1574,7 +1574,7 @@ onUnmounted(() => {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
border-bottom: 1px solid #F1F5F9;
|
border-bottom: 1px solid var(--border-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.agent-identity {
|
.agent-identity {
|
||||||
|
|
@ -1586,13 +1586,13 @@ onUnmounted(() => {
|
||||||
.agent-id {
|
.agent-id {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #94A3B8;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.agent-name {
|
.agent-name {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1E293B;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.agent-tags {
|
.agent-tags {
|
||||||
|
|
@ -1602,8 +1602,8 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.agent-type {
|
.agent-type {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #64748B;
|
color: var(--text-muted);
|
||||||
background: #F1F5F9;
|
background: var(--bg-hover);
|
||||||
padding: 2px 8px;
|
padding: 2px 8px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -1617,8 +1617,8 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.stance-neutral {
|
.stance-neutral {
|
||||||
background: #F1F5F9;
|
background: var(--bg-hover);
|
||||||
color: #64748B;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stance-supportive {
|
.stance-supportive {
|
||||||
|
|
@ -1644,7 +1644,7 @@ onUnmounted(() => {
|
||||||
.timeline-label {
|
.timeline-label {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #94A3B8;
|
color: var(--text-faint);
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
|
|
@ -1654,14 +1654,14 @@ onUnmounted(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
background: #F8FAFC;
|
background: var(--bg-secondary);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-hour {
|
.timeline-hour {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: #E2E8F0;
|
background: var(--border);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
@ -1676,7 +1676,7 @@ onUnmounted(() => {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
color: #94A3B8;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Agent Params */
|
/* Agent Params */
|
||||||
|
|
@ -1700,14 +1700,14 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.param-item .param-label {
|
.param-item .param-label {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #94A3B8;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.param-item .param-value {
|
.param-item .param-value {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #475569;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.param-value.with-bar {
|
.param-value.with-bar {
|
||||||
|
|
@ -1733,7 +1733,7 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.param-value.neutral {
|
.param-value.neutral {
|
||||||
color: #64748B;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.param-value.highlight {
|
.param-value.highlight {
|
||||||
|
|
@ -1748,7 +1748,7 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.platform-card {
|
.platform-card {
|
||||||
background: #F9F9F9;
|
background: var(--bg-secondary);
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
@ -1756,13 +1756,13 @@ onUnmounted(() => {
|
||||||
.platform-card-header {
|
.platform-card-header {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
border-bottom: 1px solid #E5E5E5;
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.platform-name {
|
.platform-name {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.platform-params {
|
.platform-params {
|
||||||
|
|
@ -1779,14 +1779,14 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.param-label {
|
.param-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #64748B;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.param-value {
|
.param-value {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1E293B;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Reasoning Content */
|
/* Reasoning Content */
|
||||||
|
|
@ -1798,13 +1798,13 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.reasoning-item {
|
.reasoning-item {
|
||||||
padding: 12px 14px;
|
padding: 12px 14px;
|
||||||
background: #F9F9F9;
|
background: var(--bg-secondary);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reasoning-text {
|
.reasoning-text {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #555;
|
color: var(--text-muted);
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -1825,7 +1825,7 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-modal {
|
.profile-modal {
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
|
|
@ -1841,7 +1841,7 @@ onUnmounted(() => {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
border-bottom: 1px solid #F0F0F0;
|
border-bottom: 1px solid #F0F0F0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1859,19 +1859,19 @@ onUnmounted(() => {
|
||||||
.modal-realname {
|
.modal-realname {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-username {
|
.modal-username {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-profession {
|
.modal-profession {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
background: #F5F5F5;
|
background: var(--bg-hover);
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -1883,7 +1883,7 @@ onUnmounted(() => {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
border: none;
|
border: none;
|
||||||
background: none;
|
background: none;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1896,7 +1896,7 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-btn:hover {
|
.close-btn:hover {
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-body {
|
.modal-body {
|
||||||
|
|
@ -1924,7 +1924,7 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.info-label {
|
.info-label {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -1933,7 +1933,7 @@ onUnmounted(() => {
|
||||||
.info-value {
|
.info-value {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-value.mbti {
|
.info-value.mbti {
|
||||||
|
|
@ -1950,7 +1950,7 @@ onUnmounted(() => {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
|
|
@ -1958,13 +1958,13 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.section-bio {
|
.section-bio {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
background: #F9F9F9;
|
background: var(--bg-secondary);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border-left: 3px solid #E0E0E0;
|
border-left: 3px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 话题标签 */
|
/* 话题标签 */
|
||||||
|
|
@ -1998,30 +1998,30 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.dimension-card {
|
.dimension-card {
|
||||||
background: #F8F9FA;
|
background: var(--bg-secondary);
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border-left: 3px solid #DDD;
|
border-left: 3px solid var(--border);
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dimension-card:hover {
|
.dimension-card:hover {
|
||||||
background: #F0F0F0;
|
background: var(--bg-hover);
|
||||||
border-left-color: #999;
|
border-left-color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dim-title {
|
.dim-title {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dim-desc {
|
.dim-desc {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #888;
|
color: var(--text-faint);
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2045,7 +2045,7 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.section-persona {
|
.section-persona {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #555;
|
color: var(--text-muted);
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
|
|
@ -2054,7 +2054,7 @@ onUnmounted(() => {
|
||||||
/* System Logs */
|
/* System Logs */
|
||||||
.system-logs {
|
.system-logs {
|
||||||
background: #000;
|
background: #000;
|
||||||
color: #DDD;
|
color: var(--border-medium);
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
border-top: 1px solid #222;
|
border-top: 1px solid #222;
|
||||||
|
|
@ -2068,7 +2068,7 @@ onUnmounted(() => {
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #888;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-content {
|
.log-content {
|
||||||
|
|
@ -2097,12 +2097,12 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-time {
|
.log-time {
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
min-width: 75px;
|
min-width: 75px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-msg {
|
.log-msg {
|
||||||
color: #CCC;
|
color: var(--border-medium);
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2131,17 +2131,17 @@ onUnmounted(() => {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.narrative-box {
|
.narrative-box {
|
||||||
background: #FFFFFF;
|
background: var(--bg-primary);
|
||||||
padding: 20px 24px;
|
padding: 20px 24px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 1px solid #EEF2F6;
|
border: 1px solid var(--border-light);
|
||||||
box-shadow: 0 4px 24px rgba(0,0,0,0.03);
|
box-shadow: 0 4px 24px rgba(0,0,0,0.03);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
@ -2150,7 +2150,7 @@ onUnmounted(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
|
|
@ -2169,7 +2169,7 @@ onUnmounted(() => {
|
||||||
.narrative-text {
|
.narrative-text {
|
||||||
font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
|
font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #334155;
|
color: var(--text-secondary);
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
|
|
@ -2177,7 +2177,7 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.topics-section {
|
.topics-section {
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hot-topics-grid {
|
.hot-topics-grid {
|
||||||
|
|
@ -2197,12 +2197,12 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.hot-topic-more {
|
.hot-topic-more {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
padding: 4px 6px;
|
padding: 4px 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.initial-posts-section {
|
.initial-posts-section {
|
||||||
border-top: 1px solid #EAEAEA;
|
border-top: 1px solid var(--border);
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2211,7 +2211,7 @@ onUnmounted(() => {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
border-left: 2px solid #F0F0F0;
|
border-left: 2px solid var(--border-light);
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2230,10 +2230,10 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-content {
|
.timeline-content {
|
||||||
background: #F9F9F9;
|
background: var(--bg-secondary);
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid #EEE;
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-header {
|
.post-header {
|
||||||
|
|
@ -2245,7 +2245,7 @@ onUnmounted(() => {
|
||||||
.post-role {
|
.post-role {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2259,7 +2259,7 @@ onUnmounted(() => {
|
||||||
.post-username {
|
.post-username {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
@ -2270,7 +2270,7 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.post-text {
|
.post-text {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #555;
|
color: var(--text-muted);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -2279,7 +2279,7 @@ onUnmounted(() => {
|
||||||
.rounds-config-section {
|
.rounds-config-section {
|
||||||
margin: 24px 0;
|
margin: 24px 0;
|
||||||
padding-top: 24px;
|
padding-top: 24px;
|
||||||
border-top: 1px solid #EAEAEA;
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounds-header {
|
.rounds-header {
|
||||||
|
|
@ -2298,19 +2298,19 @@ onUnmounted(() => {
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1E293B;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-desc {
|
.section-desc {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #94A3B8;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc-highlight {
|
.desc-highlight {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1E293B;
|
color: var(--text-primary);
|
||||||
background: #F1F5F9;
|
background: var(--bg-hover);
|
||||||
padding: 1px 6px;
|
padding: 1px 6px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin: 0 2px;
|
margin: 0 2px;
|
||||||
|
|
@ -2328,7 +2328,7 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch-control:hover {
|
.switch-control:hover {
|
||||||
background: #F8FAFC;
|
background: var(--bg-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch-control input {
|
.switch-control input {
|
||||||
|
|
@ -2338,7 +2338,7 @@ onUnmounted(() => {
|
||||||
.switch-track {
|
.switch-track {
|
||||||
width: 36px;
|
width: 36px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background: #E2E8F0;
|
background: var(--border);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||||
|
|
@ -2351,14 +2351,14 @@ onUnmounted(() => {
|
||||||
top: 2px;
|
top: 2px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||||
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch-control input:checked + .switch-track {
|
.switch-control input:checked + .switch-track {
|
||||||
background: #000;
|
background: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch-control input:checked + .switch-track::after {
|
.switch-control input:checked + .switch-track::after {
|
||||||
|
|
@ -2368,11 +2368,11 @@ onUnmounted(() => {
|
||||||
.switch-label {
|
.switch-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #64748B;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch-control input:checked ~ .switch-label {
|
.switch-control input:checked ~ .switch-label {
|
||||||
color: #1E293B;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Slider Content */
|
/* Slider Content */
|
||||||
|
|
@ -2397,20 +2397,20 @@ onUnmounted(() => {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.val-unit {
|
.val-unit {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-meta-info {
|
.slider-meta-info {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #64748B;
|
color: var(--text-muted);
|
||||||
background: #F1F5F9;
|
background: var(--bg-hover);
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -2424,7 +2424,7 @@ onUnmounted(() => {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
background: #E2E8F0;
|
background: var(--border);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
outline: none;
|
outline: none;
|
||||||
background-image: linear-gradient(#000, #000);
|
background-image: linear-gradient(#000, #000);
|
||||||
|
|
@ -2438,7 +2438,7 @@ onUnmounted(() => {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
border: 2px solid #000;
|
border: 2px solid #000;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
|
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
|
||||||
|
|
@ -2461,7 +2461,7 @@ onUnmounted(() => {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #94A3B8;
|
color: var(--text-faint);
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2472,11 +2472,11 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mark-recommend:hover {
|
.mark-recommend:hover {
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mark-recommend.active {
|
.mark-recommend.active {
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2496,7 +2496,7 @@ onUnmounted(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
background: #F8FAFC;
|
background: var(--bg-secondary);
|
||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
@ -2530,8 +2530,8 @@ onUnmounted(() => {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #64748B;
|
color: var(--text-muted);
|
||||||
background: #FFFFFF;
|
background: var(--bg-primary);
|
||||||
border: 1px solid #E2E8F0;
|
border: 1px solid #E2E8F0;
|
||||||
padding: 3px 8px;
|
padding: 3px 8px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
|
@ -2547,14 +2547,14 @@ onUnmounted(() => {
|
||||||
.auto-desc p {
|
.auto-desc p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #64748B;
|
color: var(--text-muted);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.highlight-tip {
|
.highlight-tip {
|
||||||
margin-top: 4px !important;
|
margin-top: 4px !important;
|
||||||
font-size: 12px !important;
|
font-size: 12px !important;
|
||||||
color: #000 !important;
|
color: var(--text-primary) !important;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="simulation-panel">
|
<div class="simulation-panel">
|
||||||
<!-- Top Control Bar -->
|
<!-- Top Control Bar -->
|
||||||
<div class="control-bar">
|
<div class="control-bar">
|
||||||
|
|
@ -704,19 +704,19 @@ onUnmounted(() => {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #FFFFFF;
|
background: var(--bg-primary);
|
||||||
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Control Bar --- */
|
/* --- Control Bar --- */
|
||||||
.control-bar {
|
.control-bar {
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1px solid #EAEAEA;
|
border-bottom: 1px solid var(--border);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
}
|
}
|
||||||
|
|
@ -733,8 +733,8 @@ onUnmounted(() => {
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: #FAFAFA;
|
background: var(--bg-secondary);
|
||||||
border: 1px solid #EAEAEA;
|
border: 1px solid var(--border);
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
min-width: 140px;
|
min-width: 140px;
|
||||||
|
|
@ -744,8 +744,8 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.platform-status.active {
|
.platform-status.active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
border-color: #333;
|
border-color: var(--text-secondary);
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.platform-status.completed {
|
.platform-status.completed {
|
||||||
|
|
@ -793,7 +793,7 @@ onUnmounted(() => {
|
||||||
.tooltip-title {
|
.tooltip-title {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
|
|
@ -825,13 +825,13 @@ onUnmounted(() => {
|
||||||
.platform-name {
|
.platform-name {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.platform-status.twitter .platform-icon { color: #000; }
|
.platform-status.twitter .platform-icon { color: var(--text-primary); }
|
||||||
.platform-status.reddit .platform-icon { color: #000; }
|
.platform-status.reddit .platform-icon { color: var(--text-primary); }
|
||||||
|
|
||||||
.platform-stats {
|
.platform-stats {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -846,7 +846,7 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
|
|
@ -855,12 +855,12 @@ onUnmounted(() => {
|
||||||
.stat-value {
|
.stat-value {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-total, .stat-unit {
|
.stat-total, .stat-unit {
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -888,12 +888,12 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn.primary {
|
.action-btn.primary {
|
||||||
background: #000;
|
background: var(--text-primary);
|
||||||
color: #FFF;
|
color: var(--bg-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn.primary:hover:not(:disabled) {
|
.action-btn.primary:hover:not(:disabled) {
|
||||||
background: #333;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn:disabled {
|
.action-btn:disabled {
|
||||||
|
|
@ -906,7 +906,7 @@ onUnmounted(() => {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Timeline Header */
|
/* Timeline Header */
|
||||||
|
|
@ -916,7 +916,7 @@ onUnmounted(() => {
|
||||||
background: rgba(255, 255, 255, 0.9);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
border-bottom: 1px solid #EAEAEA;
|
border-bottom: 1px solid var(--border);
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -927,15 +927,15 @@ onUnmounted(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
background: #F5F5F5;
|
background: var(--bg-hover);
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.total-count {
|
.total-count {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.platform-breakdown {
|
.platform-breakdown {
|
||||||
|
|
@ -950,9 +950,9 @@ onUnmounted(() => {
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breakdown-divider { color: #DDD; }
|
.breakdown-divider { color: var(--border-medium); }
|
||||||
.breakdown-item.twitter { color: #000; }
|
.breakdown-item.twitter { color: var(--text-primary); }
|
||||||
.breakdown-item.reddit { color: #000; }
|
.breakdown-item.reddit { color: var(--text-primary); }
|
||||||
|
|
||||||
/* --- Timeline Feed --- */
|
/* --- Timeline Feed --- */
|
||||||
.timeline-feed {
|
.timeline-feed {
|
||||||
|
|
@ -987,8 +987,8 @@ onUnmounted(() => {
|
||||||
top: 24px;
|
top: 24px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
border: 1px solid #CCC;
|
border: 1px solid var(--border-medium);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
@ -1006,16 +1006,16 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.timeline-item.twitter .marker-dot { background: #000; }
|
.timeline-item.twitter .marker-dot { background: #000; }
|
||||||
.timeline-item.reddit .marker-dot { background: #000; }
|
.timeline-item.reddit .marker-dot { background: #000; }
|
||||||
.timeline-item.twitter .timeline-marker { border-color: #000; }
|
.timeline-item.twitter .timeline-marker { border-color: var(--text-primary); }
|
||||||
.timeline-item.reddit .timeline-marker { border-color: #000; }
|
.timeline-item.reddit .timeline-marker { border-color: var(--text-primary); }
|
||||||
|
|
||||||
/* Card Layout */
|
/* Card Layout */
|
||||||
.timeline-card {
|
.timeline-card {
|
||||||
width: calc(100% - 48px);
|
width: calc(100% - 48px);
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
border: 1px solid #EAEAEA;
|
border: 1px solid var(--border);
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.02);
|
box-shadow: 0 2px 10px rgba(0,0,0,0.02);
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
@ -1023,7 +1023,7 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.timeline-card:hover {
|
.timeline-card:hover {
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||||||
border-color: #DDD;
|
border-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Left side (Twitter) */
|
/* Left side (Twitter) */
|
||||||
|
|
@ -1053,7 +1053,7 @@ onUnmounted(() => {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
border-bottom: 1px solid #F5F5F5;
|
border-bottom: 1px solid var(--border-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.agent-info {
|
.agent-info {
|
||||||
|
|
@ -1065,8 +1065,8 @@ onUnmounted(() => {
|
||||||
.avatar-placeholder {
|
.avatar-placeholder {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background: #000;
|
background: var(--text-primary);
|
||||||
color: #FFF;
|
color: var(--bg-primary);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -1079,7 +1079,7 @@ onUnmounted(() => {
|
||||||
.agent-name {
|
.agent-name {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-meta {
|
.header-meta {
|
||||||
|
|
@ -1089,7 +1089,7 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.platform-indicator {
|
.platform-indicator {
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
@ -1105,33 +1105,33 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Monochromatic Badges */
|
/* Monochromatic Badges */
|
||||||
.badge-post { background: #F0F0F0; color: #333; border-color: #E0E0E0; }
|
.badge-post { background: var(--bg-hover); color: var(--text-secondary); border-color: var(--border-medium); }
|
||||||
.badge-comment { background: #F0F0F0; color: #666; border-color: #E0E0E0; }
|
.badge-comment { background: var(--bg-hover); color: var(--text-muted); border-color: var(--border-medium); }
|
||||||
.badge-action { background: #FFF; color: #666; border: 1px solid #E0E0E0; }
|
.badge-action { background: var(--bg-primary); color: var(--text-muted); border: 1px solid #E0E0E0; }
|
||||||
.badge-meta { background: #FAFAFA; color: #999; border: 1px dashed #DDD; }
|
.badge-meta { background: var(--bg-secondary); color: var(--text-faint); border: 1px dashed #DDD; }
|
||||||
.badge-idle { opacity: 0.5; }
|
.badge-idle { opacity: 0.5; }
|
||||||
|
|
||||||
.content-text {
|
.content-text {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-text.main-text {
|
.content-text.main-text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Info Blocks (Quote, Repost, etc) */
|
/* Info Blocks (Quote, Repost, etc) */
|
||||||
.quoted-block, .repost-content {
|
.quoted-block, .repost-content {
|
||||||
background: #F9F9F9;
|
background: var(--bg-secondary);
|
||||||
border: 1px solid #EEE;
|
border: 1px solid var(--border);
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #555;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.quote-header, .repost-info, .like-info, .search-info, .follow-info, .vote-info, .idle-info, .comment-context {
|
.quote-header, .repost-info, .like-info, .search-info, .follow-info, .vote-info, .idle-info, .comment-context {
|
||||||
|
|
@ -1140,19 +1140,19 @@ onUnmounted(() => {
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-small {
|
.icon-small {
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
.icon-small.filled {
|
.icon-small.filled {
|
||||||
color: #999; /* Keep icons neutral unless highlighted */
|
color: var(--text-faint); /* Keep icons neutral unless highlighted */
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-query {
|
.search-query {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
background: #F0F0F0;
|
background: var(--bg-hover);
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
@ -1162,7 +1162,7 @@ onUnmounted(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #BBB;
|
color: var(--border-medium);
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1176,7 +1176,7 @@ onUnmounted(() => {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
color: #CCC;
|
color: var(--border-medium);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
|
|
@ -1186,13 +1186,13 @@ onUnmounted(() => {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid #EAEAEA;
|
border: 1px solid var(--border);
|
||||||
animation: ripple 2s infinite;
|
animation: ripple 2s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes ripple {
|
@keyframes ripple {
|
||||||
0% { transform: scale(0.8); opacity: 1; border-color: #CCC; }
|
0% { transform: scale(0.8); opacity: 1; border-color: var(--border-medium); }
|
||||||
100% { transform: scale(2.5); opacity: 0; border-color: #EAEAEA; }
|
100% { transform: scale(2.5); opacity: 0; border-color: var(--border); }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Animation */
|
/* Animation */
|
||||||
|
|
@ -1213,7 +1213,7 @@ onUnmounted(() => {
|
||||||
/* Logs */
|
/* Logs */
|
||||||
.system-logs {
|
.system-logs {
|
||||||
background: #000;
|
background: #000;
|
||||||
color: #DDD;
|
color: var(--border-medium);
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
border-top: 1px solid #222;
|
border-top: 1px solid #222;
|
||||||
|
|
@ -1227,7 +1227,7 @@ onUnmounted(() => {
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-content {
|
.log-content {
|
||||||
|
|
@ -1249,8 +1249,8 @@ onUnmounted(() => {
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-time { color: #555; min-width: 75px; }
|
.log-time { color: var(--text-muted); min-width: 75px; }
|
||||||
.log-msg { color: #BBB; word-break: break-all; }
|
.log-msg { color: var(--border-medium); word-break: break-all; }
|
||||||
.mono { font-family: 'JetBrains Mono', monospace; }
|
.mono { font-family: 'JetBrains Mono', monospace; }
|
||||||
|
|
||||||
/* Loading spinner for button */
|
/* Loading spinner for button */
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,4 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="interaction-panel">
|
<div class="interaction-panel">
|
||||||
<!-- Main Split Layout -->
|
<!-- Main Split Layout -->
|
||||||
<div class="main-split-layout">
|
<div class="main-split-layout">
|
||||||
|
|
@ -966,7 +966,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #F8F9FA;
|
background: var(--bg-secondary);
|
||||||
font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
|
font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -987,7 +987,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.left-panel.report-style {
|
.left-panel.report-style {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
min-width: 450px;
|
min-width: 450px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-primary);
|
||||||
border-right: 1px solid #E5E7EB;
|
border-right: 1px solid #E5E7EB;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -1036,8 +1036,8 @@ watch(() => props.simulationId, (newId) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.report-tag {
|
.report-tag {
|
||||||
background: #000000;
|
background: var(--text-primary);
|
||||||
color: #FFFFFF;
|
color: var(--bg-primary);
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
|
|
@ -1047,7 +1047,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
|
|
||||||
.report-id {
|
.report-id {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
}
|
}
|
||||||
|
|
@ -1056,7 +1056,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
font-family: 'Times New Roman', Times, serif;
|
font-family: 'Times New Roman', Times, serif;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #111827;
|
color: var(--text-primary);
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
margin: 0 0 16px 0;
|
margin: 0 0 16px 0;
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
|
|
@ -1065,7 +1065,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.sub-title {
|
.sub-title {
|
||||||
font-family: 'Times New Roman', Times, serif;
|
font-family: 'Times New Roman', Times, serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin: 0 0 30px 0;
|
margin: 0 0 30px 0;
|
||||||
|
|
@ -1074,7 +1074,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
|
|
||||||
.header-divider {
|
.header-divider {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: #E5E7EB;
|
background: var(--border);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1106,12 +1106,12 @@ watch(() => props.simulationId, (newId) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-header-row.clickable:hover {
|
.section-header-row.clickable:hover {
|
||||||
background-color: #F9FAFB;
|
background-color: var(--bg-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapse-icon {
|
.collapse-icon {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
|
|
@ -1124,7 +1124,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.section-number {
|
.section-number {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #E5E7EB;
|
color: var(--border);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: color 0.3s ease;
|
transition: color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
@ -1133,27 +1133,27 @@ watch(() => props.simulationId, (newId) => {
|
||||||
font-family: 'Times New Roman', Times, serif;
|
font-family: 'Times New Roman', Times, serif;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #111827;
|
color: var(--text-primary);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
transition: color 0.3s ease;
|
transition: color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* States */
|
/* States */
|
||||||
.report-section-item.is-pending .section-number {
|
.report-section-item.is-pending .section-number {
|
||||||
color: #E5E7EB;
|
color: var(--border);
|
||||||
}
|
}
|
||||||
.report-section-item.is-pending .section-title {
|
.report-section-item.is-pending .section-title {
|
||||||
color: #D1D5DB;
|
color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.report-section-item.is-active .section-number,
|
.report-section-item.is-active .section-number,
|
||||||
.report-section-item.is-completed .section-number {
|
.report-section-item.is-completed .section-number {
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.report-section-item.is-active .section-title,
|
.report-section-item.is-active .section-title,
|
||||||
.report-section-item.is-completed .section-title {
|
.report-section-item.is-completed .section-title {
|
||||||
color: #111827;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-body {
|
.section-body {
|
||||||
|
|
@ -1166,7 +1166,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
|
font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
color: #374151;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.generated-content :deep(p) {
|
.generated-content :deep(p) {
|
||||||
|
|
@ -1177,7 +1177,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.generated-content :deep(.md-h3),
|
.generated-content :deep(.md-h3),
|
||||||
.generated-content :deep(.md-h4) {
|
.generated-content :deep(.md-h4) {
|
||||||
font-family: 'Times New Roman', Times, serif;
|
font-family: 'Times New Roman', Times, serif;
|
||||||
color: #111827;
|
color: var(--text-primary);
|
||||||
margin-top: 1.5em;
|
margin-top: 1.5em;
|
||||||
margin-bottom: 0.8em;
|
margin-bottom: 0.8em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -1201,25 +1201,25 @@ watch(() => props.simulationId, (newId) => {
|
||||||
border-left: 3px solid #E5E7EB;
|
border-left: 3px solid #E5E7EB;
|
||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
margin: 1.5em 0;
|
margin: 1.5em 0;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-family: 'Times New Roman', Times, serif;
|
font-family: 'Times New Roman', Times, serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.generated-content :deep(.code-block) {
|
.generated-content :deep(.code-block) {
|
||||||
background: #F9FAFB;
|
background: var(--bg-secondary);
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.generated-content :deep(strong) {
|
.generated-content :deep(strong) {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #111827;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Loading State */
|
/* Loading State */
|
||||||
|
|
@ -1227,7 +1227,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -1244,7 +1244,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.loading-text {
|
.loading-text {
|
||||||
font-family: 'Times New Roman', Times, serif;
|
font-family: 'Times New Roman', Times, serif;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
color: #4B5563;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
|
|
@ -1267,7 +1267,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.waiting-animation {
|
.waiting-animation {
|
||||||
|
|
@ -1307,7 +1307,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #FFFFFF;
|
background: var(--bg-primary);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1330,7 +1330,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-bar-icon {
|
.action-bar-icon {
|
||||||
color: #1F2937;
|
color: var(--text-primary);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1343,13 +1343,13 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.action-bar-title {
|
.action-bar-title {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1F2937;
|
color: var(--text-primary);
|
||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-bar-subtitle {
|
.action-bar-subtitle {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-bar-subtitle.mono {
|
.action-bar-subtitle.mono {
|
||||||
|
|
@ -1371,8 +1371,8 @@ watch(() => props.simulationId, (newId) => {
|
||||||
padding: 8px 14px;
|
padding: 8px 14px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
background: #F3F4F6;
|
background: var(--bg-hover);
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1381,13 +1381,13 @@ watch(() => props.simulationId, (newId) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-pill:hover {
|
.tab-pill:hover {
|
||||||
background: #E5E7EB;
|
background: var(--border);
|
||||||
color: #374151;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-pill.active {
|
.tab-pill.active {
|
||||||
background: #1F2937;
|
background: var(--text-primary);
|
||||||
color: #FFFFFF;
|
color: var(--bg-primary);
|
||||||
box-shadow: 0 2px 8px rgba(31, 41, 55, 0.15);
|
box-shadow: 0 2px 8px rgba(31, 41, 55, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1403,7 +1403,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.tab-divider {
|
.tab-divider {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background: #E5E7EB;
|
background: var(--border);
|
||||||
margin: 0 6px;
|
margin: 0 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1432,7 +1432,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
|
|
||||||
.survey-pill.active {
|
.survey-pill.active {
|
||||||
background: #047857;
|
background: #047857;
|
||||||
color: #FFFFFF;
|
color: var(--bg-primary);
|
||||||
box-shadow: 0 2px 8px rgba(4, 120, 87, 0.2);
|
box-shadow: 0 2px 8px rgba(4, 120, 87, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1440,7 +1440,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.interaction-header {
|
.interaction-header {
|
||||||
padding: 16px 24px;
|
padding: 16px 24px;
|
||||||
border-bottom: 1px solid #E5E7EB;
|
border-bottom: 1px solid #E5E7EB;
|
||||||
background: #FAFAFA;
|
background: var(--bg-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-switcher {
|
.tab-switcher {
|
||||||
|
|
@ -1455,23 +1455,23 @@ watch(() => props.simulationId, (newId) => {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-btn:hover {
|
.tab-btn:hover {
|
||||||
background: #F9FAFB;
|
background: var(--bg-secondary);
|
||||||
border-color: #D1D5DB;
|
border-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-btn.active {
|
.tab-btn.active {
|
||||||
background: #1F2937;
|
background: var(--text-primary);
|
||||||
color: #FFFFFF;
|
color: var(--bg-primary);
|
||||||
border-color: #1F2937;
|
border-color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-btn svg {
|
.tab-btn svg {
|
||||||
|
|
@ -1504,8 +1504,8 @@ watch(() => props.simulationId, (newId) => {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
min-width: 44px;
|
min-width: 44px;
|
||||||
min-height: 44px;
|
min-height: 44px;
|
||||||
background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
|
background: var(--text-primary);
|
||||||
color: #FFFFFF;
|
color: var(--bg-primary);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -1524,33 +1524,33 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.tools-card-name {
|
.tools-card-name {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1F2937;
|
color: var(--text-primary);
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tools-card-subtitle {
|
.tools-card-subtitle {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tools-card-toggle {
|
.tools-card-toggle {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-primary);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tools-card-toggle:hover {
|
.tools-card-toggle:hover {
|
||||||
background: #F9FAFB;
|
background: var(--bg-secondary);
|
||||||
border-color: #D1D5DB;
|
border-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tools-card-toggle svg {
|
.tools-card-toggle svg {
|
||||||
|
|
@ -1575,9 +1575,9 @@ watch(() => props.simulationId, (newId) => {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-primary);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1624,13 +1624,13 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.tool-name {
|
.tool-name {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1F2937;
|
color: var(--text-primary);
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-desc {
|
.tool-desc {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
|
|
@ -1656,8 +1656,8 @@ watch(() => props.simulationId, (newId) => {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
min-width: 44px;
|
min-width: 44px;
|
||||||
min-height: 44px;
|
min-height: 44px;
|
||||||
background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
|
background: var(--text-primary);
|
||||||
color: #FFFFFF;
|
color: var(--bg-primary);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -1676,7 +1676,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.profile-card-name {
|
.profile-card-name {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1F2937;
|
color: var(--text-primary);
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1685,16 +1685,16 @@ watch(() => props.simulationId, (newId) => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-card-handle {
|
.profile-card-handle {
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-card-profession {
|
.profile-card-profession {
|
||||||
padding: 2px 8px;
|
padding: 2px 8px;
|
||||||
background: #E5E7EB;
|
background: var(--border);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
@ -1703,21 +1703,21 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.profile-card-toggle {
|
.profile-card-toggle {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-primary);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-card-toggle:hover {
|
.profile-card-toggle:hover {
|
||||||
background: #F9FAFB;
|
background: var(--bg-secondary);
|
||||||
border-color: #D1D5DB;
|
border-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-card-toggle svg {
|
.profile-card-toggle svg {
|
||||||
|
|
@ -1738,24 +1738,24 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.profile-card-label {
|
.profile-card-label {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-card-bio {
|
.profile-card-bio {
|
||||||
background: #FFFFFF;
|
background: var(--bg-primary);
|
||||||
padding: 12px 14px;
|
padding: 12px 14px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-card-bio p {
|
.profile-card-bio p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: #4B5563;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Target Selector */
|
/* Target Selector */
|
||||||
|
|
@ -1767,7 +1767,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.selector-label {
|
.selector-label {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
@ -1785,22 +1785,22 @@ watch(() => props.simulationId, (newId) => {
|
||||||
padding: 10px 16px;
|
padding: 10px 16px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #374151;
|
color: var(--text-secondary);
|
||||||
background: #F9FAFB;
|
background: var(--bg-secondary);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.target-option:hover {
|
.target-option:hover {
|
||||||
border-color: #D1D5DB;
|
border-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.target-option.active {
|
.target-option.active {
|
||||||
background: #1F2937;
|
background: var(--text-primary);
|
||||||
color: #FFFFFF;
|
color: var(--bg-primary);
|
||||||
border-color: #1F2937;
|
border-color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Agent Dropdown */
|
/* Agent Dropdown */
|
||||||
|
|
@ -1824,8 +1824,8 @@ watch(() => props.simulationId, (newId) => {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
min-width: 240px;
|
min-width: 240px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-primary);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||||
max-height: 320px;
|
max-height: 320px;
|
||||||
|
|
@ -1837,7 +1837,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
padding: 12px 16px 8px;
|
padding: 12px 16px 8px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
border-bottom: 1px solid #F3F4F6;
|
border-bottom: 1px solid #F3F4F6;
|
||||||
|
|
@ -1854,8 +1854,8 @@ watch(() => props.simulationId, (newId) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-item:hover {
|
.dropdown-item:hover {
|
||||||
background: #F9FAFB;
|
background: var(--bg-secondary);
|
||||||
border-left-color: #1F2937;
|
border-left-color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-item:first-of-type {
|
.dropdown-item:first-of-type {
|
||||||
|
|
@ -1871,8 +1871,8 @@ watch(() => props.simulationId, (newId) => {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
min-width: 32px;
|
min-width: 32px;
|
||||||
min-height: 32px;
|
min-height: 32px;
|
||||||
background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
|
background: var(--text-primary);
|
||||||
color: #FFFFFF;
|
color: var(--bg-primary);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -1894,7 +1894,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.agent-name {
|
.agent-name {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1F2937;
|
color: var(--text-primary);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -1902,7 +1902,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
|
|
||||||
.agent-role {
|
.agent-role {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -1925,7 +1925,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-icon {
|
.empty-icon {
|
||||||
|
|
@ -1963,13 +1963,13 @@ watch(() => props.simulationId, (newId) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-message.user .message-avatar {
|
.chat-message.user .message-avatar {
|
||||||
background: #1F2937;
|
background: var(--text-primary);
|
||||||
color: #FFFFFF;
|
color: var(--bg-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-message.assistant .message-avatar {
|
.chat-message.assistant .message-avatar {
|
||||||
background: #F3F4F6;
|
background: var(--bg-hover);
|
||||||
color: #374151;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-content {
|
.message-content {
|
||||||
|
|
@ -1996,12 +1996,12 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.sender-name {
|
.sender-name {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #374151;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-time {
|
.message-time {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-text {
|
.message-text {
|
||||||
|
|
@ -2012,14 +2012,14 @@ watch(() => props.simulationId, (newId) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-message.user .message-text {
|
.chat-message.user .message-text {
|
||||||
background: #1F2937;
|
background: var(--text-primary);
|
||||||
color: #FFFFFF;
|
color: var(--bg-primary);
|
||||||
border-bottom-right-radius: 4px;
|
border-bottom-right-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-message.assistant .message-text {
|
.chat-message.assistant .message-text {
|
||||||
background: #F3F4F6;
|
background: var(--bg-hover);
|
||||||
color: #374151;
|
color: var(--text-secondary);
|
||||||
border-bottom-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2052,7 +2052,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.message-text :deep(.md-oli)::before {
|
.message-text :deep(.md-oli)::before {
|
||||||
content: counter(list-counter) ".";
|
content: counter(list-counter) ".";
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #374151;
|
color: var(--text-secondary);
|
||||||
min-width: 20px;
|
min-width: 20px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -2072,7 +2072,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
padding: 10px 14px;
|
padding: 10px 14px;
|
||||||
background: #F3F4F6;
|
background: var(--bg-hover);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border-bottom-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -2107,7 +2107,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
resize: none;
|
resize: none;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
|
@ -2117,19 +2117,19 @@ watch(() => props.simulationId, (newId) => {
|
||||||
|
|
||||||
.chat-input:focus {
|
.chat-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #1F2937;
|
border-color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-input:disabled {
|
.chat-input:disabled {
|
||||||
background: #F9FAFB;
|
background: var(--bg-secondary);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-btn {
|
.send-btn {
|
||||||
width: 44px;
|
width: 44px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
background: #1F2937;
|
background: var(--text-primary);
|
||||||
color: #FFFFFF;
|
color: var(--bg-primary);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -2144,8 +2144,8 @@ watch(() => props.simulationId, (newId) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-btn:disabled {
|
.send-btn:disabled {
|
||||||
background: #E5E7EB;
|
background: var(--border);
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2192,12 +2192,12 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.setup-section .section-header .section-title {
|
.setup-section .section-header .section-title {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #374151;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.selection-count {
|
.selection-count {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Agents Grid */
|
/* Agents Grid */
|
||||||
|
|
@ -2216,15 +2216,15 @@ watch(() => props.simulationId, (newId) => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
background: #F9FAFB;
|
background: var(--bg-secondary);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.agent-checkbox:hover {
|
.agent-checkbox:hover {
|
||||||
border-color: #D1D5DB;
|
border-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.agent-checkbox.checked {
|
.agent-checkbox.checked {
|
||||||
|
|
@ -2241,8 +2241,8 @@ watch(() => props.simulationId, (newId) => {
|
||||||
height: 28px;
|
height: 28px;
|
||||||
min-width: 28px;
|
min-width: 28px;
|
||||||
min-height: 28px;
|
min-height: 28px;
|
||||||
background: #E5E7EB;
|
background: var(--border);
|
||||||
color: #374151;
|
color: var(--text-secondary);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -2266,7 +2266,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1F2937;
|
color: var(--text-primary);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -2275,7 +2275,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.checkbox-role {
|
.checkbox-role {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -2318,7 +2318,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
|
|
||||||
.action-link {
|
.action-link {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -2326,12 +2326,12 @@ watch(() => props.simulationId, (newId) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-link:hover {
|
.action-link:hover {
|
||||||
color: #1F2937;
|
color: var(--text-primary);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-divider {
|
.action-divider {
|
||||||
color: #E5E7EB;
|
color: var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Survey Input */
|
/* Survey Input */
|
||||||
|
|
@ -2339,7 +2339,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
resize: none;
|
resize: none;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
|
@ -2349,7 +2349,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
|
|
||||||
.survey-input:focus {
|
.survey-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #1F2937;
|
border-color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.survey-submit-btn {
|
.survey-submit-btn {
|
||||||
|
|
@ -2357,8 +2357,8 @@ watch(() => props.simulationId, (newId) => {
|
||||||
padding: 14px 24px;
|
padding: 14px 24px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #FFFFFF;
|
color: var(--bg-primary);
|
||||||
background: #1F2937;
|
background: var(--text-primary);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -2375,8 +2375,8 @@ watch(() => props.simulationId, (newId) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.survey-submit-btn:disabled {
|
.survey-submit-btn:disabled {
|
||||||
background: #E5E7EB;
|
background: var(--border);
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2384,7 +2384,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||||
border-top-color: #FFFFFF;
|
border-top-color: var(--bg-primary);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: spin 0.8s linear infinite;
|
animation: spin 0.8s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
@ -2410,12 +2410,12 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.results-title {
|
.results-title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1F2937;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.results-count {
|
.results-count {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.results-list {
|
.results-list {
|
||||||
|
|
@ -2425,8 +2425,8 @@ watch(() => props.simulationId, (newId) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-card {
|
.result-card {
|
||||||
background: #F9FAFB;
|
background: var(--bg-secondary);
|
||||||
border: 1px solid #E5E7EB;
|
border: 1px solid var(--border);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
@ -2443,8 +2443,8 @@ watch(() => props.simulationId, (newId) => {
|
||||||
height: 36px;
|
height: 36px;
|
||||||
min-width: 36px;
|
min-width: 36px;
|
||||||
min-height: 36px;
|
min-height: 36px;
|
||||||
background: #1F2937;
|
background: var(--text-primary);
|
||||||
color: #FFFFFF;
|
color: var(--bg-primary);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -2463,12 +2463,12 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.result-name {
|
.result-name {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1F2937;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-role {
|
.result-role {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #9CA3AF;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-question {
|
.result-question {
|
||||||
|
|
@ -2476,11 +2476,11 @@ watch(() => props.simulationId, (newId) => {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 12px 14px;
|
padding: 12px 14px;
|
||||||
background: #FFFFFF;
|
background: var(--bg-primary);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-question svg {
|
.result-question svg {
|
||||||
|
|
@ -2491,7 +2491,7 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.result-answer {
|
.result-answer {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
color: #374151;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Markdown Styles */
|
/* Markdown Styles */
|
||||||
|
|
@ -2502,28 +2502,28 @@ watch(() => props.simulationId, (newId) => {
|
||||||
:deep(.md-h2) {
|
:deep(.md-h2) {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1F2937;
|
color: var(--text-primary);
|
||||||
margin: 24px 0 12px 0;
|
margin: 24px 0 12px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.md-h3) {
|
:deep(.md-h3) {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #374151;
|
color: var(--text-secondary);
|
||||||
margin: 20px 0 10px 0;
|
margin: 20px 0 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.md-h4) {
|
:deep(.md-h4) {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #4B5563;
|
color: var(--text-muted);
|
||||||
margin: 16px 0 8px 0;
|
margin: 16px 0 8px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.md-h5) {
|
:deep(.md-h5) {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #6B7280;
|
color: var(--text-muted);
|
||||||
margin: 12px 0 6px 0;
|
margin: 12px 0 6px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2541,15 +2541,15 @@ watch(() => props.simulationId, (newId) => {
|
||||||
.result-answer :deep(.md-quote) {
|
.result-answer :deep(.md-quote) {
|
||||||
margin: 12px 0;
|
margin: 12px 0;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
background: #F9FAFB;
|
background: var(--bg-secondary);
|
||||||
border-left: 3px solid #1F2937;
|
border-left: 3px solid #1F2937;
|
||||||
color: #4B5563;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.code-block) {
|
:deep(.code-block) {
|
||||||
margin: 12px 0;
|
margin: 12px 0;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
background: #1F2937;
|
background: var(--text-primary);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -2557,16 +2557,16 @@ watch(() => props.simulationId, (newId) => {
|
||||||
:deep(.code-block code) {
|
:deep(.code-block code) {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #E5E7EB;
|
color: var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.inline-code) {
|
:deep(.inline-code) {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
background: #F3F4F6;
|
background: var(--bg-hover);
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
color: #1F2937;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.md-hr) {
|
:deep(.md-hr) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<template>
|
||||||
|
<button
|
||||||
|
class="theme-toggle"
|
||||||
|
@click="toggle"
|
||||||
|
:title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
|
||||||
|
>
|
||||||
|
<span class="toggle-icon">{{ isDark ? '☀' : '☾' }}</span>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
|
||||||
|
const isDark = ref(false)
|
||||||
|
|
||||||
|
const applyTheme = (dark) => {
|
||||||
|
document.documentElement.classList.toggle('dark', dark)
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggle = () => {
|
||||||
|
isDark.value = !isDark.value
|
||||||
|
applyTheme(isDark.value)
|
||||||
|
localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const saved = localStorage.getItem('theme')
|
||||||
|
if (saved) {
|
||||||
|
isDark.value = saved === 'dark'
|
||||||
|
} else {
|
||||||
|
isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||||
|
}
|
||||||
|
applyTheme(isDark.value)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.theme-toggle {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
color: #fff;
|
||||||
|
padding: 4px 10px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
border-color: #ff6b35;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
import './assets/theme.css'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import i18n from './i18n'
|
import i18n from './i18n'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<div class="nav-brand">MIROFISH</div>
|
<div class="nav-brand">MIROFISH</div>
|
||||||
<div class="nav-links">
|
<div class="nav-links">
|
||||||
|
<ThemeToggle />
|
||||||
<LanguageSwitcher />
|
<LanguageSwitcher />
|
||||||
<a href="https://github.com/666ghj/MiroFish" target="_blank" class="github-link">
|
<a href="https://github.com/666ghj/MiroFish" target="_blank" class="github-link">
|
||||||
{{ $t('nav.visitGithub') }} <span class="arrow">↗</span>
|
{{ $t('nav.visitGithub') }} <span class="arrow">↗</span>
|
||||||
|
|
@ -216,6 +217,7 @@ import { ref, computed } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import HistoryDatabase from '../components/HistoryDatabase.vue'
|
import HistoryDatabase from '../components/HistoryDatabase.vue'
|
||||||
import LanguageSwitcher from '../components/LanguageSwitcher.vue'
|
import LanguageSwitcher from '../components/LanguageSwitcher.vue'
|
||||||
|
import ThemeToggle from '../components/ThemeToggle.vue'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
|
|
@ -312,35 +314,27 @@ const startSimulation = () => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* 全局变量与重置 */
|
/* Font variables */
|
||||||
:root {
|
:root {
|
||||||
--black: #000000;
|
|
||||||
--white: #FFFFFF;
|
|
||||||
--orange: #FF4500;
|
|
||||||
--gray-light: #F5F5F5;
|
|
||||||
--gray-text: #666666;
|
|
||||||
--border: #E5E5E5;
|
|
||||||
/*
|
|
||||||
使用 Space Grotesk 作为主要标题字体，JetBrains Mono 作为代码/标签字体
|
|
||||||
确保已在 index.html 引入这些 Google Fonts
|
|
||||||
*/
|
|
||||||
--font-mono: 'JetBrains Mono', monospace;
|
--font-mono: 'JetBrains Mono', monospace;
|
||||||
--font-sans: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
--font-sans: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
||||||
--font-cn: 'Noto Sans SC', system-ui, sans-serif;
|
--font-cn: 'Noto Sans SC', system-ui, sans-serif;
|
||||||
|
--orange: #ff4500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-container {
|
.home-container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: var(--white);
|
background: var(--bg-primary);
|
||||||
font-family: var(--font-sans);
|
font-family: var(--font-sans);
|
||||||
color: var(--black);
|
color: var(--text-primary);
|
||||||
|
transition: background-color 0.2s, color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 顶部导航 */
|
/* 顶部导航 — always dark */
|
||||||
.navbar {
|
.navbar {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
background: var(--black);
|
background: #000;
|
||||||
color: var(--white);
|
color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -361,7 +355,7 @@ const startSimulation = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.github-link {
|
.github-link {
|
||||||
color: var(--white);
|
color: #fff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
|
|
@ -411,7 +405,7 @@ const startSimulation = () => {
|
||||||
|
|
||||||
.orange-tag {
|
.orange-tag {
|
||||||
background: var(--orange);
|
background: var(--orange);
|
||||||
color: var(--white);
|
color: #fff;
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
|
|
@ -419,7 +413,7 @@ const startSimulation = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.version-text {
|
.version-text {
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
@ -430,11 +424,11 @@ const startSimulation = () => {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin: 0 0 40px 0;
|
margin: 0 0 40px 0;
|
||||||
letter-spacing: -2px;
|
letter-spacing: -2px;
|
||||||
color: var(--black);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient-text {
|
.gradient-text {
|
||||||
background: linear-gradient(90deg, #000000 0%, #444444 100%);
|
background: linear-gradient(90deg, var(--text-primary) 0%, var(--text-muted) 100%);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -443,7 +437,7 @@ const startSimulation = () => {
|
||||||
.hero-desc {
|
.hero-desc {
|
||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
color: var(--gray-text);
|
color: var(--text-muted);
|
||||||
max-width: 640px;
|
max-width: 640px;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
@ -455,7 +449,7 @@ const startSimulation = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.highlight-bold {
|
.highlight-bold {
|
||||||
color: var(--black);
|
color: var(--text-primary);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -466,19 +460,19 @@ const startSimulation = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.highlight-code {
|
.highlight-code {
|
||||||
background: rgba(0, 0, 0, 0.05);
|
background: var(--bg-secondary);
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
color: var(--black);
|
color: var(--text-primary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slogan-text {
|
.slogan-text {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
font-weight: 520;
|
font-weight: 520;
|
||||||
color: var(--black);
|
color: var(--text-primary);
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
border-left: 3px solid var(--orange);
|
border-left: 3px solid var(--orange);
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
|
|
@ -518,7 +512,7 @@ const startSimulation = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-logo {
|
.hero-logo {
|
||||||
max-width: 500px; /* 调整logo大小 */
|
max-width: 500px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -563,7 +557,7 @@ const startSimulation = () => {
|
||||||
.panel-header {
|
.panel-header {
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
|
@ -582,7 +576,7 @@ const startSimulation = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-desc {
|
.section-desc {
|
||||||
color: var(--gray-text);
|
color: var(--text-muted);
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
@ -597,6 +591,7 @@ const startSimulation = () => {
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
padding: 20px 30px;
|
padding: 20px 30px;
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
|
background: var(--bg-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-value {
|
.metric-value {
|
||||||
|
|
@ -608,7 +603,7 @@ const startSimulation = () => {
|
||||||
|
|
||||||
.metric-label {
|
.metric-label {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 项目模拟步骤介绍 */
|
/* 项目模拟步骤介绍 */
|
||||||
|
|
@ -616,12 +611,13 @@ const startSimulation = () => {
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
background: var(--bg-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.steps-header {
|
.steps-header {
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -648,7 +644,7 @@ const startSimulation = () => {
|
||||||
.step-num {
|
.step-num {
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--black);
|
color: var(--text-primary);
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -664,7 +660,7 @@ const startSimulation = () => {
|
||||||
|
|
||||||
.step-desc {
|
.step-desc {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: var(--gray-text);
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 右侧交互控制台 */
|
/* 右侧交互控制台 */
|
||||||
|
|
@ -673,8 +669,9 @@ const startSimulation = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.console-box {
|
.console-box {
|
||||||
border: 1px solid #CCC; /* 外部实线 */
|
border: 1px solid var(--border-medium);
|
||||||
padding: 8px; /* 内边距形成双重边框感 */
|
padding: 8px;
|
||||||
|
background: var(--bg-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.console-section {
|
.console-section {
|
||||||
|
|
@ -691,11 +688,11 @@ const startSimulation = () => {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-zone {
|
.upload-zone {
|
||||||
border: 1px dashed #CCC;
|
border: 1px dashed var(--border-medium);
|
||||||
height: 200px;
|
height: 200px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -703,7 +700,7 @@ const startSimulation = () => {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
background: #FAFAFA;
|
background: var(--bg-input);
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-zone.has-files {
|
.upload-zone.has-files {
|
||||||
|
|
@ -711,8 +708,8 @@ const startSimulation = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-zone:hover {
|
.upload-zone:hover {
|
||||||
background: #F0F0F0;
|
background: var(--bg-hover);
|
||||||
border-color: #999;
|
border-color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-placeholder {
|
.upload-placeholder {
|
||||||
|
|
@ -722,24 +719,25 @@ const startSimulation = () => {
|
||||||
.upload-icon {
|
.upload-icon {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border: 1px solid #DDD;
|
border: 1px solid var(--border);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 0 auto 15px;
|
margin: 0 auto 15px;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-title {
|
.upload-title {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-hint {
|
.upload-hint {
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-list {
|
.file-list {
|
||||||
|
|
@ -753,9 +751,9 @@ const startSimulation = () => {
|
||||||
.file-item {
|
.file-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: var(--white);
|
background: var(--bg-primary);
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
border: 1px solid #EEE;
|
border: 1px solid var(--border-light);
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
}
|
}
|
||||||
|
|
@ -770,7 +768,7 @@ const startSimulation = () => {
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.console-divider {
|
.console-divider {
|
||||||
|
|
@ -784,21 +782,21 @@ const startSimulation = () => {
|
||||||
content: '';
|
content: '';
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: #EEE;
|
background: var(--border-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.console-divider span {
|
.console-divider span {
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
color: #BBB;
|
color: var(--text-faint);
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-wrapper {
|
.input-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid #DDD;
|
border: 1px solid var(--border);
|
||||||
background: #FAFAFA;
|
background: var(--bg-input);
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-input {
|
.code-input {
|
||||||
|
|
@ -812,6 +810,11 @@ const startSimulation = () => {
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
outline: none;
|
outline: none;
|
||||||
min-height: 150px;
|
min-height: 150px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-input::placeholder {
|
||||||
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.model-badge {
|
.model-badge {
|
||||||
|
|
@ -820,13 +823,13 @@ const startSimulation = () => {
|
||||||
right: 15px;
|
right: 15px;
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
color: #AAA;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-engine-btn {
|
.start-engine-btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: var(--black);
|
background: #000;
|
||||||
color: var(--white);
|
color: #fff;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
|
|
@ -844,8 +847,8 @@ const startSimulation = () => {
|
||||||
|
|
||||||
/* 可点击状态（非禁用） */
|
/* 可点击状态（非禁用） */
|
||||||
.start-engine-btn:not(:disabled) {
|
.start-engine-btn:not(:disabled) {
|
||||||
background: var(--black);
|
background: #000;
|
||||||
border: 1px solid var(--black);
|
border: 1px solid #000;
|
||||||
animation: pulse-border 2s infinite;
|
animation: pulse-border 2s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -860,11 +863,24 @@ const startSimulation = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-engine-btn:disabled {
|
.start-engine-btn:disabled {
|
||||||
background: #E5E5E5;
|
background: var(--bg-secondary);
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
transform: none;
|
transform: none;
|
||||||
border: 1px solid #E5E5E5;
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode button override */
|
||||||
|
html.dark .start-engine-btn:not(:disabled) {
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border-color: var(--border-medium);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark .start-engine-btn:hover:not(:disabled) {
|
||||||
|
background: var(--orange);
|
||||||
|
border-color: var(--orange);
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 引导动画：微妙的边框脉冲 */
|
/* 引导动画：微妙的边框脉冲 */
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
|
<ThemeToggle />
|
||||||
<LanguageSwitcher />
|
<LanguageSwitcher />
|
||||||
<div class="step-divider"></div>
|
<div class="step-divider"></div>
|
||||||
<div class="workflow-step">
|
<div class="workflow-step">
|
||||||
|
|
@ -73,6 +74,7 @@ import { getProject, getGraphData } from '../api/graph'
|
||||||
import { getSimulation } from '../api/simulation'
|
import { getSimulation } from '../api/simulation'
|
||||||
import { getReport } from '../api/report'
|
import { getReport } from '../api/report'
|
||||||
import LanguageSwitcher from '../components/LanguageSwitcher.vue'
|
import LanguageSwitcher from '../components/LanguageSwitcher.vue'
|
||||||
|
import ThemeToggle from '../components/ThemeToggle.vue'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
@ -223,22 +225,25 @@ onMounted(() => {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition: background-color 0.2s, color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
.app-header {
|
.app-header {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
border-bottom: 1px solid #EAEAEA;
|
border-bottom: 1px solid var(--border);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-center {
|
.header-center {
|
||||||
|
|
@ -253,11 +258,12 @@ onMounted(() => {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-switcher {
|
.view-switcher {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: #F5F5F5;
|
background: var(--bg-secondary);
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
|
@ -269,22 +275,23 @@ onMounted(() => {
|
||||||
padding: 6px 16px;
|
padding: 6px 16px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch-btn.active {
|
.switch-btn.active {
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-right {
|
.header-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.workflow-step {
|
.workflow-step {
|
||||||
|
|
@ -297,18 +304,18 @@ onMounted(() => {
|
||||||
.step-num {
|
.step-num {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-name {
|
.step-name {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-divider {
|
.step-divider {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
background-color: #E0E0E0;
|
background-color: var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-indicator {
|
.status-indicator {
|
||||||
|
|
@ -316,7 +323,7 @@ onMounted(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -324,13 +331,13 @@ onMounted(() => {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #CCC;
|
background: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-indicator.ready .dot { background: #4CAF50; }
|
.status-indicator.ready .dot { background: #4caf50; }
|
||||||
.status-indicator.processing .dot { background: #FF9800; animation: pulse 1s infinite; }
|
.status-indicator.processing .dot { background: #ff9800; animation: pulse 1s infinite; }
|
||||||
.status-indicator.completed .dot { background: #4CAF50; }
|
.status-indicator.completed .dot { background: #4caf50; }
|
||||||
.status-indicator.error .dot { background: #F44336; }
|
.status-indicator.error .dot { background: #f44336; }
|
||||||
|
|
||||||
@keyframes pulse { 50% { opacity: 0.5; } }
|
@keyframes pulse { 50% { opacity: 0.5; } }
|
||||||
|
|
||||||
|
|
@ -350,6 +357,12 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-wrapper.left {
|
.panel-wrapper.left {
|
||||||
border-right: 1px solid #EAEAEA;
|
border-right: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ThemeToggle on light header needs dark styling */
|
||||||
|
.header-right :deep(.theme-toggle) {
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
|
<ThemeToggle />
|
||||||
<LanguageSwitcher />
|
<LanguageSwitcher />
|
||||||
<div class="step-divider"></div>
|
<div class="step-divider"></div>
|
||||||
<div class="workflow-step">
|
<div class="workflow-step">
|
||||||
|
|
@ -86,6 +87,7 @@ import Step2EnvSetup from '../components/Step2EnvSetup.vue'
|
||||||
import { generateOntology, getProject, buildGraph, getTaskStatus, getGraphData } from '../api/graph'
|
import { generateOntology, getProject, buildGraph, getTaskStatus, getGraphData } from '../api/graph'
|
||||||
import { getPendingUpload, clearPendingUpload } from '../store/pendingUpload'
|
import { getPendingUpload, clearPendingUpload } from '../store/pendingUpload'
|
||||||
import LanguageSwitcher from '../components/LanguageSwitcher.vue'
|
import LanguageSwitcher from '../components/LanguageSwitcher.vue'
|
||||||
|
import ThemeToggle from '../components/ThemeToggle.vue'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
@ -414,22 +416,25 @@ onUnmounted(() => {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition: background-color 0.2s, color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
.app-header {
|
.app-header {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
border-bottom: 1px solid #EAEAEA;
|
border-bottom: 1px solid var(--border);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-center {
|
.header-center {
|
||||||
|
|
@ -444,11 +449,12 @@ onUnmounted(() => {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-switcher {
|
.view-switcher {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: #F5F5F5;
|
background: var(--bg-secondary);
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
|
@ -460,16 +466,16 @@ onUnmounted(() => {
|
||||||
padding: 6px 16px;
|
padding: 6px 16px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch-btn.active {
|
.switch-btn.active {
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-indicator {
|
.status-indicator {
|
||||||
|
|
@ -477,7 +483,7 @@ onUnmounted(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -485,6 +491,7 @@ onUnmounted(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.workflow-step {
|
.workflow-step {
|
||||||
|
|
@ -497,30 +504,30 @@ onUnmounted(() => {
|
||||||
.step-num {
|
.step-num {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-name {
|
.step-name {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-divider {
|
.step-divider {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
background-color: #E0E0E0;
|
background-color: var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot {
|
.dot {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #CCC;
|
background: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-indicator.processing .dot { background: #FF5722; animation: pulse 1s infinite; }
|
.status-indicator.processing .dot { background: #ff5722; animation: pulse 1s infinite; }
|
||||||
.status-indicator.completed .dot { background: #4CAF50; }
|
.status-indicator.completed .dot { background: #4caf50; }
|
||||||
.status-indicator.error .dot { background: #F44336; }
|
.status-indicator.error .dot { background: #f44336; }
|
||||||
|
|
||||||
@keyframes pulse { 50% { opacity: 0.5; } }
|
@keyframes pulse { 50% { opacity: 0.5; } }
|
||||||
|
|
||||||
|
|
@ -540,6 +547,12 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-wrapper.left {
|
.panel-wrapper.left {
|
||||||
border-right: 1px solid #EAEAEA;
|
border-right: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ThemeToggle on light header needs dark styling */
|
||||||
|
.header-right :deep(.theme-toggle) {
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -10,10 +10,13 @@
|
||||||
<div class="step-name">图谱构建</div>
|
<div class="step-name">图谱构建</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-right">
|
||||||
|
<ThemeToggle />
|
||||||
<div class="nav-status">
|
<div class="nav-status">
|
||||||
<span class="status-dot" :class="statusClass"></span>
|
<span class="status-dot" :class="statusClass"></span>
|
||||||
<span class="status-text">{{ statusText }}</span>
|
<span class="status-text">{{ statusText }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- 主内容区 -->
|
<!-- 主内容区 -->
|
||||||
|
|
@ -416,6 +419,7 @@ import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
import { generateOntology, getProject, buildGraph, getTaskStatus, getGraphData } from '../api/graph'
|
import { generateOntology, getProject, buildGraph, getTaskStatus, getGraphData } from '../api/graph'
|
||||||
import { getPendingUpload, clearPendingUpload } from '../store/pendingUpload'
|
import { getPendingUpload, clearPendingUpload } from '../store/pendingUpload'
|
||||||
|
import ThemeToggle from '../components/ThemeToggle.vue'
|
||||||
import * as d3 from 'd3'
|
import * as d3 from 'd3'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
@ -1091,24 +1095,15 @@ onUnmounted(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* 变量 */
|
|
||||||
:root {
|
|
||||||
--black: #000000;
|
|
||||||
--white: #FFFFFF;
|
|
||||||
--orange: #FF6B35;
|
|
||||||
--gray-light: #F5F5F5;
|
|
||||||
--gray-border: #E0E0E0;
|
|
||||||
--gray-text: #666666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process-page {
|
.process-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: var(--white);
|
background: var(--bg-primary);
|
||||||
font-family: 'JetBrains Mono', 'Noto Sans SC', monospace;
|
font-family: 'JetBrains Mono', 'Noto Sans SC', monospace;
|
||||||
overflow: hidden; /* Prevent body scroll in fullscreen */
|
overflow: hidden;
|
||||||
|
transition: background-color 0.2s, color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 导航栏 */
|
/* 导航栏 — always dark */
|
||||||
.navbar {
|
.navbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -1121,6 +1116,12 @@ onUnmounted(() => {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-brand {
|
.nav-brand {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -1191,7 +1192,7 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.status-text {
|
.status-text {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 主内容区 */
|
/* 主内容区 */
|
||||||
|
|
@ -1204,12 +1205,12 @@ onUnmounted(() => {
|
||||||
/* 左侧面板 - 50% default */
|
/* 左侧面板 - 50% default */
|
||||||
.left-panel {
|
.left-panel {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
flex: none; /* Fixed width initially */
|
flex: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-right: 1px solid #E0E0E0;
|
border-right: 1px solid var(--border);
|
||||||
transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
background: #fff;
|
background: var(--bg-primary);
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1223,8 +1224,8 @@ onUnmounted(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
border-bottom: 1px solid #E0E0E0;
|
border-bottom: 1px solid var(--border);
|
||||||
background: #fff;
|
background: var(--bg-primary);
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1250,7 +1251,7 @@ onUnmounted(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-item {
|
.stat-item {
|
||||||
|
|
@ -1261,11 +1262,11 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.stat-val {
|
.stat-val {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-divider {
|
.stat-divider {
|
||||||
color: #eee;
|
color: var(--border-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-buttons {
|
.action-buttons {
|
||||||
|
|
@ -1284,13 +1285,13 @@ onUnmounted(() => {
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn:hover:not(:disabled) {
|
.action-btn:hover:not(:disabled) {
|
||||||
background: #F5F5F5;
|
background: var(--bg-secondary);
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn:disabled {
|
.action-btn:disabled {
|
||||||
|
|
@ -1345,7 +1346,7 @@ onUnmounted(() => {
|
||||||
.loading-ring:nth-child(1) {
|
.loading-ring:nth-child(1) {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
border-top-color: #000;
|
border-top-color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-ring:nth-child(2) {
|
.loading-ring:nth-child(2) {
|
||||||
|
|
@ -1373,13 +1374,13 @@ onUnmounted(() => {
|
||||||
.loading-text,
|
.loading-text,
|
||||||
.waiting-text {
|
.waiting-text {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.waiting-hint {
|
.waiting-hint {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1434,9 +1435,9 @@ onUnmounted(() => {
|
||||||
right: 16px;
|
right: 16px;
|
||||||
width: 320px;
|
width: 320px;
|
||||||
max-height: calc(100% - 32px);
|
max-height: calc(100% - 32px);
|
||||||
background: #fff;
|
background: var(--bg-primary);
|
||||||
border: 1px solid #E0E0E0;
|
border: 1px solid var(--border);
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -1448,14 +1449,14 @@ onUnmounted(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
background: #FAFAFA;
|
background: var(--bg-surface);
|
||||||
border-bottom: 1px solid #E0E0E0;
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-title {
|
.detail-title {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-badge {
|
.detail-badge {
|
||||||
|
|
@ -1475,13 +1476,13 @@ onUnmounted(() => {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: color 0.2s;
|
transition: color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-close:hover {
|
.detail-close:hover {
|
||||||
color: #333;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-content {
|
.detail-content {
|
||||||
|
|
@ -1498,21 +1499,21 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.detail-label {
|
.detail-label {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
min-width: 70px;
|
min-width: 70px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.detail-value {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value.uuid {
|
.detail-value.uuid {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-section {
|
.detail-section {
|
||||||
|
|
@ -1522,11 +1523,11 @@ onUnmounted(() => {
|
||||||
.detail-summary {
|
.detail-summary {
|
||||||
margin: 8px 0 0 0;
|
margin: 8px 0 0 0;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: #F9F9F9;
|
background: var(--bg-surface);
|
||||||
border-left: 3px solid #FF6B35;
|
border-left: 3px solid #ff6b35;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-labels {
|
.detail-labels {
|
||||||
|
|
@ -1538,9 +1539,9 @@ onUnmounted(() => {
|
||||||
.label-tag {
|
.label-tag {
|
||||||
padding: 2px 8px;
|
padding: 2px 8px;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
background: #F0F0F0;
|
background: var(--bg-hover);
|
||||||
border: 1px solid #E0E0E0;
|
border: 1px solid var(--border);
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 边详情关系展示 */
|
/* 边详情关系展示 */
|
||||||
|
|
@ -1551,48 +1552,48 @@ onUnmounted(() => {
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background: #F9F9F9;
|
background: var(--bg-surface);
|
||||||
border: 1px solid #E0E0E0;
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.edge-source,
|
.edge-source,
|
||||||
.edge-target {
|
.edge-target {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.edge-arrow {
|
.edge-arrow {
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.edge-type {
|
.edge-type {
|
||||||
padding: 2px 8px;
|
padding: 2px 8px;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
background: #FF6B35;
|
background: #ff6b35;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value.highlight {
|
.detail-value.highlight {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-subtitle {
|
.detail-subtitle {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
margin: 16px 0 12px 0;
|
margin: 16px 0 12px 0;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
border-bottom: 1px solid #E0E0E0;
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Properties 属性列表 */
|
/* Properties 属性列表 */
|
||||||
.properties-list {
|
.properties-list {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: #F9F9F9;
|
background: var(--bg-surface);
|
||||||
border: 1px solid #E0E0E0;
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.property-item {
|
.property-item {
|
||||||
|
|
@ -1606,13 +1607,13 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.property-key {
|
.property-key {
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.property-value {
|
.property-value {
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1629,9 +1630,9 @@ onUnmounted(() => {
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
background: #F0F0F0;
|
background: var(--bg-hover);
|
||||||
border: 1px solid #E0E0E0;
|
border: 1px solid var(--border);
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1647,8 +1648,8 @@ onUnmounted(() => {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
border-top: 1px solid #E0E0E0;
|
border-top: 1px solid var(--border);
|
||||||
background: #FAFAFA;
|
background: var(--bg-surface);
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-item {
|
.legend-item {
|
||||||
|
|
@ -1665,11 +1666,11 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-label {
|
.legend-label {
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-count {
|
.legend-count {
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 右侧面板 - 50% default */
|
/* 右侧面板 - 50% default */
|
||||||
|
|
@ -1678,7 +1679,7 @@ onUnmounted(() => {
|
||||||
flex: none;
|
flex: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #fff;
|
background: var(--bg-primary);
|
||||||
transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, transform 0.3s ease;
|
transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, transform 0.3s ease;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
@ -1691,6 +1692,7 @@ onUnmounted(() => {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* dark-header stays black regardless of theme */
|
||||||
.right-panel .panel-header.dark-header {
|
.right-panel .panel-header.dark-header {
|
||||||
background: #000;
|
background: #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
@ -1698,7 +1700,7 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-panel .header-icon {
|
.right-panel .header-icon {
|
||||||
color: #FF6B35;
|
color: #ff6b35;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1712,7 +1714,7 @@ onUnmounted(() => {
|
||||||
/* 流程阶段 */
|
/* 流程阶段 */
|
||||||
.process-phase {
|
.process-phase {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
border: 1px solid #E0E0E0;
|
border: 1px solid var(--border);
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
}
|
}
|
||||||
|
|
@ -1723,11 +1725,11 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.process-phase.active {
|
.process-phase.active {
|
||||||
border-color: #FF6B35;
|
border-color: #ff6b35;
|
||||||
}
|
}
|
||||||
|
|
||||||
.process-phase.completed {
|
.process-phase.completed {
|
||||||
border-color: #1A936F;
|
border-color: #1a936f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-header {
|
.phase-header {
|
||||||
|
|
@ -1735,31 +1737,31 @@ onUnmounted(() => {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
background: #FAFAFA;
|
background: var(--bg-surface);
|
||||||
border-bottom: 1px solid #E0E0E0;
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.process-phase.active .phase-header {
|
.process-phase.active .phase-header {
|
||||||
background: #FFF5F2;
|
background: rgba(255, 107, 53, 0.07);
|
||||||
}
|
}
|
||||||
|
|
||||||
.process-phase.completed .phase-header {
|
.process-phase.completed .phase-header {
|
||||||
background: #F2FAF6;
|
background: rgba(26, 147, 111, 0.07);
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-num {
|
.phase-num {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #ddd;
|
color: var(--border-medium);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.process-phase.active .phase-num {
|
.process-phase.active .phase-num {
|
||||||
color: #FF6B35;
|
color: #ff6b35;
|
||||||
}
|
}
|
||||||
|
|
||||||
.process-phase.completed .phase-num {
|
.process-phase.completed .phase-num {
|
||||||
color: #1A936F;
|
color: #1a936f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-info {
|
.phase-info {
|
||||||
|
|
@ -1770,28 +1772,29 @@ onUnmounted(() => {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-api {
|
.phase-api {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-status {
|
.phase-status {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
background: #eee;
|
background: var(--bg-hover);
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-status.active {
|
.phase-status.active {
|
||||||
background: #FF6B35;
|
background: #ff6b35;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phase-status.completed {
|
.phase-status.completed {
|
||||||
background: #1A936F;
|
background: #1a936f;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1810,9 +1813,9 @@ onUnmounted(() => {
|
||||||
.entity-tag {
|
.entity-tag {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
background: #F5F5F5;
|
background: var(--bg-secondary);
|
||||||
border: 1px solid #E0E0E0;
|
border: 1px solid var(--border);
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 关系列表 */
|
/* 关系列表 */
|
||||||
|
|
@ -1825,7 +1828,7 @@ onUnmounted(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 6px 0;
|
padding: 6px 0;
|
||||||
border-bottom: 1px dashed #eee;
|
border-bottom: 1px dashed var(--border-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.relation-item:last-child {
|
.relation-item:last-child {
|
||||||
|
|
@ -1834,21 +1837,21 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.rel-source,
|
.rel-source,
|
||||||
.rel-target {
|
.rel-target {
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rel-arrow {
|
.rel-arrow {
|
||||||
color: #ccc;
|
color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rel-name {
|
.rel-name {
|
||||||
color: #FF6B35;
|
color: #ff6b35;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.relation-more {
|
.relation-more {
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1858,48 +1861,48 @@ onUnmounted(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background: #FFF5F2;
|
background: rgba(255, 107, 53, 0.07);
|
||||||
border: 1px solid #FFE0D6;
|
border: 1px solid rgba(255, 107, 53, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-spinner {
|
.progress-spinner {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
border: 2px solid #FFE0D6;
|
border: 2px solid rgba(255, 107, 53, 0.3);
|
||||||
border-top-color: #FF6B35;
|
border-top-color: #ff6b35;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: spin 1s linear infinite;
|
animation: spin 1s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-text {
|
.progress-text {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 等待状态 */
|
/* 等待状态 */
|
||||||
.waiting-state {
|
.waiting-state {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
background: #F9F9F9;
|
background: var(--bg-surface);
|
||||||
border: 1px dashed #E0E0E0;
|
border: 1px dashed var(--border);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.waiting-hint {
|
.waiting-hint {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 进度条 */
|
/* 进度条 */
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
height: 6px;
|
height: 6px;
|
||||||
background: #E0E0E0;
|
background: var(--border);
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-fill {
|
.progress-fill {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #FF6B35;
|
background: #ff6b35;
|
||||||
transition: width 0.3s;
|
transition: width 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1910,11 +1913,11 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-message {
|
.progress-message {
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-percent {
|
.progress-percent {
|
||||||
color: #FF6B35;
|
color: #ff6b35;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1928,20 +1931,20 @@ onUnmounted(() => {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background: #F5F5F5;
|
background: var(--bg-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-value {
|
.result-value {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-label {
|
.result-label {
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
|
|
@ -1950,7 +1953,7 @@ onUnmounted(() => {
|
||||||
.next-step-section {
|
.next-step-section {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
padding-top: 24px;
|
padding-top: 24px;
|
||||||
border-top: 1px solid #E0E0E0;
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.next-step-btn {
|
.next-step-btn {
|
||||||
|
|
@ -1970,12 +1973,26 @@ onUnmounted(() => {
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html.dark .next-step-btn:not(:disabled) {
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border-medium);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
.next-step-btn:hover:not(:disabled) {
|
.next-step-btn:hover:not(:disabled) {
|
||||||
background: #FF6B35;
|
background: #ff6b35;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark .next-step-btn:hover:not(:disabled) {
|
||||||
|
background: #ff6b35;
|
||||||
|
border-color: #ff6b35;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.next-step-btn:disabled {
|
.next-step-btn:disabled {
|
||||||
background: #ccc;
|
background: var(--bg-secondary);
|
||||||
|
color: var(--text-faint);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1985,8 +2002,8 @@ onUnmounted(() => {
|
||||||
|
|
||||||
/* 项目信息面板 */
|
/* 项目信息面板 */
|
||||||
.project-panel {
|
.project-panel {
|
||||||
border-top: 1px solid #E0E0E0;
|
border-top: 1px solid var(--border);
|
||||||
background: #FAFAFA;
|
background: var(--bg-surface);
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-header {
|
.project-header {
|
||||||
|
|
@ -1994,16 +2011,17 @@ onUnmounted(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
border-bottom: 1px solid #E0E0E0;
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-icon {
|
.project-icon {
|
||||||
color: #FF6B35;
|
color: #ff6b35;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-title {
|
.project-title {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-details {
|
.project-details {
|
||||||
|
|
@ -2015,7 +2033,7 @@ onUnmounted(() => {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
border-bottom: 1px dashed #E0E0E0;
|
border-bottom: 1px dashed var(--border);
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2024,12 +2042,12 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-label {
|
.item-label {
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-value {
|
.item-value {
|
||||||
color: #333;
|
color: var(--text-secondary);
|
||||||
text-align: right;
|
text-align: right;
|
||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
|
@ -2038,7 +2056,7 @@ onUnmounted(() => {
|
||||||
.item-value.code {
|
.item-value.code {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 响应式 */
|
/* 响应式 */
|
||||||
|
|
@ -2050,7 +2068,7 @@ onUnmounted(() => {
|
||||||
.left-panel {
|
.left-panel {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-bottom: 1px solid #E0E0E0;
|
border-bottom: 1px solid var(--border);
|
||||||
height: 50vh;
|
height: 50vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2065,4 +2083,18 @@ onUnmounted(() => {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* D3 graph dark mode overrides (D3 sets fill/stroke as inline styles, so we use !important) */
|
||||||
|
html.dark .graph-svg text {
|
||||||
|
fill: #aaaaaa !important;
|
||||||
|
}
|
||||||
|
html.dark .graph-svg .links line {
|
||||||
|
stroke: #444444 !important;
|
||||||
|
}
|
||||||
|
html.dark .graph-svg .node-circle {
|
||||||
|
stroke: #111111 !important;
|
||||||
|
}
|
||||||
|
html.dark .graph-svg .link-labels text {
|
||||||
|
fill: #666666 !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="main-view">
|
<div class="main-view">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<header class="app-header">
|
<header class="app-header">
|
||||||
|
|
@ -21,6 +21,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
|
<ThemeToggle />
|
||||||
<LanguageSwitcher />
|
<LanguageSwitcher />
|
||||||
<div class="step-divider"></div>
|
<div class="step-divider"></div>
|
||||||
<div class="workflow-step">
|
<div class="workflow-step">
|
||||||
|
|
@ -73,6 +74,7 @@ import { getProject, getGraphData } from '../api/graph'
|
||||||
import { getSimulation } from '../api/simulation'
|
import { getSimulation } from '../api/simulation'
|
||||||
import { getReport } from '../api/report'
|
import { getReport } from '../api/report'
|
||||||
import LanguageSwitcher from '../components/LanguageSwitcher.vue'
|
import LanguageSwitcher from '../components/LanguageSwitcher.vue'
|
||||||
|
import ThemeToggle from '../components/ThemeToggle.vue'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
@ -222,7 +224,7 @@ onMounted(() => {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
@ -230,12 +232,12 @@ onMounted(() => {
|
||||||
/* Header */
|
/* Header */
|
||||||
.app-header {
|
.app-header {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
border-bottom: 1px solid #EAEAEA;
|
border-bottom: 1px solid var(--border);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -256,7 +258,7 @@ onMounted(() => {
|
||||||
|
|
||||||
.view-switcher {
|
.view-switcher {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: #F5F5F5;
|
background: var(--bg-secondary);
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
|
@ -268,15 +270,15 @@ onMounted(() => {
|
||||||
padding: 6px 16px;
|
padding: 6px 16px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch-btn.active {
|
.switch-btn.active {
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -296,18 +298,18 @@ onMounted(() => {
|
||||||
.step-num {
|
.step-num {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-name {
|
.step-name {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-divider {
|
.step-divider {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
background-color: #E0E0E0;
|
background-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-indicator {
|
.status-indicator {
|
||||||
|
|
@ -315,7 +317,7 @@ onMounted(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -323,7 +325,7 @@ onMounted(() => {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #CCC;
|
background: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-indicator.processing .dot { background: #FF9800; animation: pulse 1s infinite; }
|
.status-indicator.processing .dot { background: #FF9800; animation: pulse 1s infinite; }
|
||||||
|
|
@ -348,6 +350,12 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-wrapper.left {
|
.panel-wrapper.left {
|
||||||
border-right: 1px solid #EAEAEA;
|
border-right: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ThemeToggle on light header */
|
||||||
|
.header-right :deep(.theme-toggle) {
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="main-view">
|
<div class="main-view">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<header class="app-header">
|
<header class="app-header">
|
||||||
|
|
@ -21,6 +21,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
|
<ThemeToggle />
|
||||||
<LanguageSwitcher />
|
<LanguageSwitcher />
|
||||||
<div class="step-divider"></div>
|
<div class="step-divider"></div>
|
||||||
<div class="workflow-step">
|
<div class="workflow-step">
|
||||||
|
|
@ -76,6 +77,7 @@ import Step3Simulation from '../components/Step3Simulation.vue'
|
||||||
import { getProject, getGraphData } from '../api/graph'
|
import { getProject, getGraphData } from '../api/graph'
|
||||||
import { getSimulation, getSimulationConfig, stopSimulation, closeSimulationEnv, getEnvStatus } from '../api/simulation'
|
import { getSimulation, getSimulationConfig, stopSimulation, closeSimulationEnv, getEnvStatus } from '../api/simulation'
|
||||||
import LanguageSwitcher from '../components/LanguageSwitcher.vue'
|
import LanguageSwitcher from '../components/LanguageSwitcher.vue'
|
||||||
|
import ThemeToggle from '../components/ThemeToggle.vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
@ -320,7 +322,7 @@ onUnmounted(() => {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
@ -328,12 +330,12 @@ onUnmounted(() => {
|
||||||
/* Header */
|
/* Header */
|
||||||
.app-header {
|
.app-header {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
border-bottom: 1px solid #EAEAEA;
|
border-bottom: 1px solid var(--border);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -354,7 +356,7 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.view-switcher {
|
.view-switcher {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: #F5F5F5;
|
background: var(--bg-secondary);
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
|
@ -366,15 +368,15 @@ onUnmounted(() => {
|
||||||
padding: 6px 16px;
|
padding: 6px 16px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch-btn.active {
|
.switch-btn.active {
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -394,18 +396,18 @@ onUnmounted(() => {
|
||||||
.step-num {
|
.step-num {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-name {
|
.step-name {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-divider {
|
.step-divider {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
background-color: #E0E0E0;
|
background-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-indicator {
|
.status-indicator {
|
||||||
|
|
@ -413,7 +415,7 @@ onUnmounted(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -421,7 +423,7 @@ onUnmounted(() => {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #CCC;
|
background: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-indicator.processing .dot { background: #FF5722; animation: pulse 1s infinite; }
|
.status-indicator.processing .dot { background: #FF5722; animation: pulse 1s infinite; }
|
||||||
|
|
@ -446,7 +448,13 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-wrapper.left {
|
.panel-wrapper.left {
|
||||||
border-right: 1px solid #EAEAEA;
|
border-right: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ThemeToggle on light header */
|
||||||
|
.header-right :deep(.theme-toggle) {
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="main-view">
|
<div class="main-view">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<header class="app-header">
|
<header class="app-header">
|
||||||
|
|
@ -21,6 +21,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
|
<ThemeToggle />
|
||||||
<LanguageSwitcher />
|
<LanguageSwitcher />
|
||||||
<div class="step-divider"></div>
|
<div class="step-divider"></div>
|
||||||
<div class="workflow-step">
|
<div class="workflow-step">
|
||||||
|
|
@ -73,6 +74,7 @@ import Step2EnvSetup from '../components/Step2EnvSetup.vue'
|
||||||
import { getProject, getGraphData } from '../api/graph'
|
import { getProject, getGraphData } from '../api/graph'
|
||||||
import { getSimulation, stopSimulation, getEnvStatus, closeSimulationEnv } from '../api/simulation'
|
import { getSimulation, stopSimulation, getEnvStatus, closeSimulationEnv } from '../api/simulation'
|
||||||
import LanguageSwitcher from '../components/LanguageSwitcher.vue'
|
import LanguageSwitcher from '../components/LanguageSwitcher.vue'
|
||||||
|
import ThemeToggle from '../components/ThemeToggle.vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
@ -307,7 +309,7 @@ onMounted(async () => {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
@ -315,12 +317,12 @@ onMounted(async () => {
|
||||||
/* Header */
|
/* Header */
|
||||||
.app-header {
|
.app-header {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
border-bottom: 1px solid #EAEAEA;
|
border-bottom: 1px solid var(--border);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -341,7 +343,7 @@ onMounted(async () => {
|
||||||
|
|
||||||
.view-switcher {
|
.view-switcher {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: #F5F5F5;
|
background: var(--bg-secondary);
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
|
@ -353,15 +355,15 @@ onMounted(async () => {
|
||||||
padding: 6px 16px;
|
padding: 6px 16px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch-btn.active {
|
.switch-btn.active {
|
||||||
background: #FFF;
|
background: var(--bg-primary);
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -381,18 +383,18 @@ onMounted(async () => {
|
||||||
.step-num {
|
.step-num {
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #999;
|
color: var(--text-faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-name {
|
.step-name {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #000;
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-divider {
|
.step-divider {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
background-color: #E0E0E0;
|
background-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-indicator {
|
.status-indicator {
|
||||||
|
|
@ -400,7 +402,7 @@ onMounted(async () => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -408,7 +410,7 @@ onMounted(async () => {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #CCC;
|
background: var(--border-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-indicator.processing .dot { background: #FF5722; animation: pulse 1s infinite; }
|
.status-indicator.processing .dot { background: #FF5722; animation: pulse 1s infinite; }
|
||||||
|
|
@ -433,7 +435,13 @@ onMounted(async () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-wrapper.left {
|
.panel-wrapper.left {
|
||||||
border-right: 1px solid #EAEAEA;
|
border-right: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ThemeToggle on light header */
|
||||||
|
.header-right :deep(.theme-toggle) {
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-color: var(--border-medium);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue