美化前端
This commit is contained in:
@@ -190,10 +190,8 @@ onBeforeUnmount(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
border: 1px solid rgba(37, 99, 235, 0.14);
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 32%),
|
||||
linear-gradient(135deg, #ffffff 0%, #f8fbff 52%, #eef6ff 100%);
|
||||
border: 1px solid var(--color-border);
|
||||
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-soft) 100%);
|
||||
}
|
||||
|
||||
.control-header {
|
||||
@@ -210,19 +208,19 @@ onBeforeUnmount(() => {
|
||||
.control-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid #cbd5e1;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 999px;
|
||||
padding: 6px 12px;
|
||||
color: #475569;
|
||||
color: var(--color-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
background: color-mix(in srgb, var(--color-surface) 84%, transparent);
|
||||
}
|
||||
|
||||
.control-badge.active {
|
||||
border-color: rgba(22, 163, 74, 0.32);
|
||||
color: #15803d;
|
||||
background: #dcfce7;
|
||||
border-color: color-mix(in srgb, var(--color-success) 36%, white);
|
||||
color: color-mix(in srgb, var(--color-success) 72%, var(--color-heading));
|
||||
background: var(--color-success-soft);
|
||||
}
|
||||
|
||||
.control-body {
|
||||
@@ -235,10 +233,10 @@ onBeforeUnmount(() => {
|
||||
|
||||
.control-copy,
|
||||
.switch-card {
|
||||
border: 1px solid rgba(203, 213, 225, 0.78);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: color-mix(in srgb, var(--color-surface) 90%, transparent);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.control-copy {
|
||||
@@ -247,13 +245,13 @@ onBeforeUnmount(() => {
|
||||
|
||||
.control-copy h3 {
|
||||
margin: 0 0 0.45rem;
|
||||
color: #0f172a;
|
||||
color: var(--color-heading);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.control-copy p {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
color: var(--color-muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
@@ -269,20 +267,20 @@ onBeforeUnmount(() => {
|
||||
gap: 1rem;
|
||||
min-height: 108px;
|
||||
padding: 1rem;
|
||||
color: #334155;
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
|
||||
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
|
||||
}
|
||||
|
||||
.switch-card:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(37, 99, 235, 0.35);
|
||||
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.09);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.switch-card.enabled {
|
||||
border-color: rgba(22, 163, 74, 0.35);
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
|
||||
border-color: color-mix(in srgb, var(--color-success) 42%, white);
|
||||
background: var(--color-success-soft);
|
||||
}
|
||||
|
||||
.switch-card.saving {
|
||||
@@ -303,12 +301,12 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.switch-text strong {
|
||||
color: #0f172a;
|
||||
color: var(--color-heading);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.switch-text small {
|
||||
color: #64748b;
|
||||
color: var(--color-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
@@ -319,9 +317,9 @@ onBeforeUnmount(() => {
|
||||
width: 54px;
|
||||
height: 30px;
|
||||
border-radius: 999px;
|
||||
background: #cbd5e1;
|
||||
box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.14);
|
||||
transition: background 0.15s ease;
|
||||
background: var(--color-border-strong);
|
||||
box-shadow: inset 0 2px 4px rgba(47, 52, 50, 0.12);
|
||||
transition: background-color 0.16s ease;
|
||||
}
|
||||
|
||||
.switch-toggle::after {
|
||||
@@ -333,12 +331,12 @@ onBeforeUnmount(() => {
|
||||
height: 22px;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.24);
|
||||
transition: transform 0.15s ease;
|
||||
box-shadow: 0 4px 10px rgba(47, 52, 50, 0.18);
|
||||
transition: transform 0.16s ease;
|
||||
}
|
||||
|
||||
.switch-card.enabled .switch-toggle {
|
||||
background: linear-gradient(135deg, #16a34a, #22c55e);
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.switch-card.enabled .switch-toggle::after {
|
||||
|
||||
@@ -286,20 +286,19 @@ onMounted(refreshItems)
|
||||
|
||||
.map-source-page :deep(input) {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 9px 11px;
|
||||
color: #0f172a;
|
||||
color: var(--color-heading);
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
background: var(--color-surface);
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
transition: border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.map-source-page :deep(input:focus) {
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
|
||||
}
|
||||
|
||||
.map-source-page :deep(input[type='checkbox']) {
|
||||
@@ -317,7 +316,7 @@ onMounted(refreshItems)
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
|
||||
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-soft) 100%);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
@@ -332,17 +331,17 @@ onMounted(refreshItems)
|
||||
|
||||
.hero-stats div {
|
||||
min-width: 0;
|
||||
border: 1px solid #dbeafe;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
background: color-mix(in srgb, var(--color-surface) 84%, transparent);
|
||||
}
|
||||
|
||||
.hero-stats strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: #1d4ed8;
|
||||
color: color-mix(in srgb, var(--color-primary) 72%, var(--color-heading));
|
||||
font-size: 22px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -352,7 +351,7 @@ onMounted(refreshItems)
|
||||
.source-meta span,
|
||||
.template-tip,
|
||||
.source-url {
|
||||
color: #64748b;
|
||||
color: var(--color-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -386,7 +385,7 @@ onMounted(refreshItems)
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
color: #334155;
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -410,13 +409,13 @@ onMounted(refreshItems)
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 39px;
|
||||
border: 1px solid #dbe4ef;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 9px 11px;
|
||||
color: #334155;
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
background: #f8fafc;
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.template-tip {
|
||||
@@ -424,26 +423,26 @@ onMounted(refreshItems)
|
||||
}
|
||||
|
||||
.map-source-card {
|
||||
border: 1px solid #dbe4ef;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
background: #fff;
|
||||
box-shadow: inset 4px 0 0 #dbeafe;
|
||||
background: var(--color-surface);
|
||||
box-shadow: inset 4px 0 0 var(--color-primary-soft);
|
||||
}
|
||||
|
||||
.map-source-card.default {
|
||||
box-shadow: inset 4px 0 0 #22c55e;
|
||||
box-shadow: inset 4px 0 0 var(--color-success);
|
||||
}
|
||||
|
||||
.map-source-card.disabled {
|
||||
background: #f8fafc;
|
||||
box-shadow: inset 4px 0 0 #cbd5e1;
|
||||
background: var(--color-surface-soft);
|
||||
box-shadow: inset 4px 0 0 var(--color-border-strong);
|
||||
}
|
||||
|
||||
.source-title-row h3 {
|
||||
margin: 0;
|
||||
color: #0f172a;
|
||||
color: var(--color-heading);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@@ -451,26 +450,26 @@ onMounted(refreshItems)
|
||||
max-width: 860px;
|
||||
margin: 6px 0 0;
|
||||
overflow-wrap: anywhere;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
border-radius: 999px;
|
||||
padding: 7px 12px;
|
||||
color: #1d4ed8;
|
||||
color: color-mix(in srgb, var(--color-primary) 72%, var(--color-heading));
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
background: #dbeafe;
|
||||
background: var(--color-primary-soft);
|
||||
}
|
||||
|
||||
.status-pill.ok {
|
||||
color: #166534;
|
||||
background: #dcfce7;
|
||||
color: color-mix(in srgb, var(--color-success) 72%, var(--color-heading));
|
||||
background: var(--color-success-soft);
|
||||
}
|
||||
|
||||
.status-pill.disabled {
|
||||
color: #475569;
|
||||
background: #e2e8f0;
|
||||
color: var(--color-muted);
|
||||
background: var(--color-surface-muted);
|
||||
}
|
||||
|
||||
.source-edit-grid {
|
||||
@@ -487,16 +486,16 @@ onMounted(refreshItems)
|
||||
|
||||
.source-meta div {
|
||||
min-width: 0;
|
||||
border-radius: 12px;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 10px 12px;
|
||||
background: #f8fafc;
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.source-meta strong {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
overflow-wrap: anywhere;
|
||||
color: #0f172a;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
.actions {
|
||||
@@ -504,12 +503,12 @@ onMounted(refreshItems)
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
border: 1px dashed #cbd5e1;
|
||||
border-radius: 16px;
|
||||
border: 1px dashed var(--color-border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 24px;
|
||||
color: #64748b;
|
||||
color: var(--color-muted);
|
||||
text-align: center;
|
||||
background: #f8fafc;
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
|
||||
@@ -582,21 +582,20 @@ onBeforeUnmount(() => {
|
||||
.mqtt-forward-page :deep(input),
|
||||
.mqtt-forward-page :deep(select) {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 9px 11px;
|
||||
color: #0f172a;
|
||||
color: var(--color-heading);
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
background: var(--color-surface);
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
transition: border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.mqtt-forward-page :deep(input:focus),
|
||||
.mqtt-forward-page :deep(select:focus) {
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
|
||||
}
|
||||
|
||||
.mqtt-hero,
|
||||
@@ -610,7 +609,7 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
|
||||
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-soft) 100%);
|
||||
}
|
||||
|
||||
.mqtt-hero h2 {
|
||||
@@ -624,23 +623,23 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.hero-stats div {
|
||||
border: 1px solid #dbeafe;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
background: color-mix(in srgb, var(--color-surface) 84%, transparent);
|
||||
}
|
||||
|
||||
.hero-stats strong {
|
||||
display: block;
|
||||
color: #1d4ed8;
|
||||
color: color-mix(in srgb, var(--color-primary) 72%, var(--color-heading));
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.hero-stats span,
|
||||
.endpoint-line,
|
||||
.runtime-grid span {
|
||||
color: #64748b;
|
||||
color: var(--color-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -674,7 +673,7 @@ onBeforeUnmount(() => {
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
color: #334155;
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -687,9 +686,9 @@ onBeforeUnmount(() => {
|
||||
.edit-section,
|
||||
.forwarder-card,
|
||||
.topics-box {
|
||||
border: 1px solid #dbe4ef;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.broker-card {
|
||||
@@ -702,16 +701,16 @@ onBeforeUnmount(() => {
|
||||
|
||||
.broker-card legend {
|
||||
padding: 0 8px;
|
||||
color: #334155;
|
||||
color: var(--color-text);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.source-card {
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
|
||||
background: linear-gradient(180deg, var(--color-surface-soft) 0%, var(--color-surface) 100%);
|
||||
}
|
||||
|
||||
.target-card {
|
||||
background: linear-gradient(180deg, #f8fffb 0%, #fff 100%);
|
||||
background: linear-gradient(180deg, var(--color-success-soft) 0%, var(--color-surface) 100%);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
@@ -726,13 +725,13 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border: 1px solid #dbe4ef;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 9px 11px;
|
||||
color: #334155;
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
background: #f8fafc;
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.switch-card input,
|
||||
@@ -743,34 +742,34 @@ onBeforeUnmount(() => {
|
||||
.forwarder-card {
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
box-shadow: inset 4px 0 0 #dbeafe;
|
||||
box-shadow: inset 4px 0 0 var(--color-primary-soft);
|
||||
}
|
||||
|
||||
.forwarder-title h3 {
|
||||
color: #0f172a;
|
||||
color: var(--color-heading);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
border-radius: 999px;
|
||||
padding: 7px 12px;
|
||||
color: #92400e;
|
||||
background: #fffbeb;
|
||||
color: color-mix(in srgb, var(--color-warning) 72%, var(--color-heading));
|
||||
background: var(--color-warning-soft);
|
||||
}
|
||||
|
||||
.status-pill.ok {
|
||||
color: #166534;
|
||||
background: #dcfce7;
|
||||
color: color-mix(in srgb, var(--color-success) 72%, var(--color-heading));
|
||||
background: var(--color-success-soft);
|
||||
}
|
||||
|
||||
.status-pill.warn {
|
||||
color: #92400e;
|
||||
background: #fef3c7;
|
||||
color: color-mix(in srgb, var(--color-warning) 72%, var(--color-heading));
|
||||
background: var(--color-warning-soft);
|
||||
}
|
||||
|
||||
.status-pill.disabled {
|
||||
color: #475569;
|
||||
background: #e2e8f0;
|
||||
color: var(--color-muted);
|
||||
background: var(--color-surface-muted);
|
||||
}
|
||||
|
||||
.runtime-grid {
|
||||
@@ -781,23 +780,23 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.runtime-grid div {
|
||||
border-radius: 12px;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 10px 12px;
|
||||
background: #f8fafc;
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.runtime-grid strong {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
color: #0f172a;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
.inline-error {
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 12px;
|
||||
border: 1px solid color-mix(in srgb, var(--color-danger) 36%, white);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 10px 12px;
|
||||
color: #b91c1c;
|
||||
background: #fef2f2;
|
||||
color: color-mix(in srgb, var(--color-danger) 74%, var(--color-heading));
|
||||
background: var(--color-danger-soft);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@@ -831,24 +830,10 @@ onBeforeUnmount(() => {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-button.ghost {
|
||||
color: #1d4ed8;
|
||||
border: 1px solid #bfdbfe;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.admin-button.secondary {
|
||||
background: #475569;
|
||||
}
|
||||
|
||||
.admin-button.danger {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.topics-box {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background: #f8fafc;
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.topic-row {
|
||||
@@ -856,25 +841,25 @@ onBeforeUnmount(() => {
|
||||
grid-template-columns: minmax(180px, 1.6fr) minmax(90px, 0.7fr) minmax(150px, 1fr) repeat(2, minmax(120px, 1fr)) minmax(90px, 0.7fr) minmax(90px, 0.7fr) auto auto;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-top: 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.topic-row.new-topic {
|
||||
border: 1px dashed #93c5fd;
|
||||
border-radius: 14px;
|
||||
border: 1px dashed color-mix(in srgb, var(--color-primary) 54%, white);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.75rem;
|
||||
background: #eff6ff;
|
||||
background: var(--color-primary-soft);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
border: 1px dashed #cbd5e1;
|
||||
border-radius: 16px;
|
||||
border: 1px dashed var(--color-border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 24px;
|
||||
color: #64748b;
|
||||
color: var(--color-muted);
|
||||
text-align: center;
|
||||
background: #f8fafc;
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
|
||||
@@ -370,15 +370,15 @@ function nodeColor(nodeId: string): string {
|
||||
}
|
||||
|
||||
const hueRanges = [
|
||||
[35, 75],
|
||||
[95, 165],
|
||||
[185, 250],
|
||||
[265, 315],
|
||||
[42, 68],
|
||||
[92, 136],
|
||||
[188, 218],
|
||||
[330, 354],
|
||||
]
|
||||
const range = hueRanges[hash % hueRanges.length]
|
||||
const hue = range[0] + (hash % (range[1] - range[0]))
|
||||
const saturation = 68 + (hash % 18)
|
||||
const lightness = 32 + (hash % 10)
|
||||
const saturation = 24 + (hash % 14)
|
||||
const lightness = 42 + (hash % 12)
|
||||
return `hsl(${hue} ${saturation}% ${lightness}%)`
|
||||
}
|
||||
|
||||
|
||||
@@ -56,10 +56,10 @@ function renderTrajectory() {
|
||||
}
|
||||
|
||||
if (points.length > 1) {
|
||||
L.polyline(points, { color: '#2563eb', weight: 4, opacity: 0.8 }).addTo(layer)
|
||||
L.polyline(points, { color: '#7d8f9a', weight: 4, opacity: 0.78 }).addTo(layer)
|
||||
}
|
||||
L.circleMarker(points[0], { radius: 6, color: '#16a34a', fillColor: '#22c55e', fillOpacity: 0.9 }).bindPopup('起点').addTo(layer)
|
||||
L.circleMarker(points[points.length - 1], { radius: 6, color: '#dc2626', fillColor: '#ef4444', fillOpacity: 0.9 }).bindPopup('终点').addTo(layer)
|
||||
L.circleMarker(points[0], { radius: 6, color: '#7f9183', fillColor: '#9aaa95', fillOpacity: 0.88 }).bindPopup('起点').addTo(layer)
|
||||
L.circleMarker(points[points.length - 1], { radius: 6, color: '#b4877f', fillColor: '#c59b93', fillOpacity: 0.88 }).bindPopup('终点').addTo(layer)
|
||||
map.fitBounds(L.latLngBounds(points), { padding: [24, 24], maxZoom: 14 })
|
||||
}
|
||||
|
||||
|
||||
+451
-302
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user