feat: initialize drainage network frontend
This commit is contained in:
+487
@@ -0,0 +1,487 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
background: #eaf1f8;
|
||||
--canvas-map: #eaf1f8;
|
||||
--canvas-map-grid: rgba(37, 99, 235, 0.06);
|
||||
--canvas-panel: rgba(255, 255, 255, 0.76);
|
||||
--canvas-panel-strong: rgba(255, 255, 255, 0.92);
|
||||
--action-blue: #2563eb;
|
||||
--action-blue-hover: #1d4ed8;
|
||||
--action-blue-soft: #dbeafe;
|
||||
--ink: #0f172a;
|
||||
--ink-secondary: #334155;
|
||||
--ink-muted: #64748b;
|
||||
--border-soft: rgba(255, 255, 255, 0.62);
|
||||
--border-strong: rgba(148, 163, 184, 0.34);
|
||||
--shadow-control: 0 14px 34px rgba(15, 23, 42, 0.18);
|
||||
--shadow-panel: 0 24px 70px rgba(30, 64, 115, 0.2);
|
||||
--shadow-focus: 0 30px 90px rgba(15, 23, 42, 0.26);
|
||||
--background: 210 40% 98%;
|
||||
--foreground: 222 47% 11%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222 47% 11%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222 47% 11%;
|
||||
--primary: 221 83% 53%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 214 32% 91%;
|
||||
--secondary-foreground: 222 47% 11%;
|
||||
--muted: 210 40% 96%;
|
||||
--muted-foreground: 215 16% 47%;
|
||||
--accent: 210 40% 96%;
|
||||
--accent-foreground: 222 47% 11%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214 32% 91%;
|
||||
--input: 214 32% 91%;
|
||||
--ring: 221 83% 53%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family:
|
||||
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
"PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
input:focus-visible {
|
||||
outline: 2px solid #0f172a;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.map-grid {
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08)),
|
||||
linear-gradient(90deg, var(--canvas-map-grid) 1px, transparent 1px),
|
||||
linear-gradient(var(--canvas-map-grid) 1px, transparent 1px),
|
||||
var(--canvas-map);
|
||||
background-size:
|
||||
auto,
|
||||
68px 68px,
|
||||
68px 68px,
|
||||
auto;
|
||||
}
|
||||
|
||||
.command-panel {
|
||||
border: 1px solid var(--border-soft);
|
||||
background: var(--canvas-panel);
|
||||
box-shadow: var(--shadow-panel);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.agent-panel-band {
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
}
|
||||
|
||||
.agent-panel-conversation {
|
||||
background: rgba(255, 255, 255, 0.34);
|
||||
}
|
||||
|
||||
.agent-panel-message {
|
||||
border: 1px solid rgba(226, 232, 240, 0.72);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
}
|
||||
|
||||
.agent-streaming-response {
|
||||
display: block;
|
||||
--sd-animation: agent-stream-token-in;
|
||||
--sd-duration: 260ms;
|
||||
--sd-easing: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.agent-chart-line {
|
||||
animation: agent-chart-line-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
transform-origin: center;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.agent-chart-point,
|
||||
.agent-chart-bar {
|
||||
animation: agent-chart-mark-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
transform-box: fill-box;
|
||||
transform-origin: center bottom;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.agent-panel-nested {
|
||||
border: 1px solid rgba(203, 213, 225, 0.72);
|
||||
background: rgba(248, 250, 252, 0.9);
|
||||
}
|
||||
|
||||
.agent-panel-control {
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
}
|
||||
|
||||
.agent-panel-icon-button {
|
||||
border: 1px solid rgba(203, 213, 225, 0.72);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-panel-icon-button:hover {
|
||||
border-color: rgba(37, 99, 235, 0.26);
|
||||
background: rgba(239, 246, 255, 0.94);
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.agent-panel-primary-icon,
|
||||
.agent-panel-primary-action {
|
||||
border: 1px solid rgba(37, 99, 235, 0.24);
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-panel-primary-icon:hover,
|
||||
.agent-panel-primary-action:hover {
|
||||
border-color: rgba(29, 78, 216, 0.34);
|
||||
background: #1d4ed8;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.agent-panel-primary-icon:disabled,
|
||||
.agent-panel-primary-action:disabled {
|
||||
background: #93c5fd;
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
.scheduled-feed-scroll,
|
||||
.scheduled-feed-detail-scroll,
|
||||
.agent-conversation-scroll {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(100, 116, 139, 0.26) transparent;
|
||||
scrollbar-gutter: stable;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.scheduled-feed-scroll::-webkit-scrollbar,
|
||||
.scheduled-feed-detail-scroll::-webkit-scrollbar,
|
||||
.agent-conversation-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.scheduled-feed-scroll::-webkit-scrollbar-track,
|
||||
.scheduled-feed-detail-scroll::-webkit-scrollbar-track,
|
||||
.agent-conversation-scroll::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.scheduled-feed-scroll::-webkit-scrollbar-thumb,
|
||||
.scheduled-feed-detail-scroll::-webkit-scrollbar-thumb,
|
||||
.agent-conversation-scroll::-webkit-scrollbar-thumb {
|
||||
background: rgba(100, 116, 139, 0.24);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.scheduled-feed-scroll:hover::-webkit-scrollbar-thumb,
|
||||
.scheduled-feed-detail-scroll:hover::-webkit-scrollbar-thumb,
|
||||
.agent-conversation-scroll:hover::-webkit-scrollbar-thumb {
|
||||
background: rgba(100, 116, 139, 0.36);
|
||||
}
|
||||
|
||||
.scheduled-feed-panel-shell {
|
||||
transition:
|
||||
width 180ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
max-height 180ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
opacity 150ms ease-out;
|
||||
}
|
||||
|
||||
.scheduled-feed-detail-enter {
|
||||
animation: scheduled-feed-detail-show 140ms ease-out 180ms both;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.scheduled-feed-layout {
|
||||
grid-template-columns: 0 minmax(0, 1fr);
|
||||
column-gap: 0;
|
||||
transition:
|
||||
grid-template-columns 180ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
column-gap 180ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
will-change: grid-template-columns;
|
||||
}
|
||||
|
||||
.scheduled-feed-layout-expanded {
|
||||
grid-template-columns: minmax(0, 1fr) 432px;
|
||||
column-gap: 0.75rem;
|
||||
}
|
||||
|
||||
.scheduled-feed-layout-collapsed {
|
||||
grid-template-columns: 0 minmax(0, 1fr);
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
.scheduled-feed-shell-enter {
|
||||
animation:
|
||||
scheduled-feed-shell-show 170ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
agent-panel-fade 140ms ease-out;
|
||||
transform-origin: top right;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.scheduled-feed-shell-exit {
|
||||
animation:
|
||||
scheduled-feed-shell-hide 170ms cubic-bezier(0.5, 0, 0.2, 1) forwards,
|
||||
agent-panel-dim 140ms ease-in forwards;
|
||||
pointer-events: none;
|
||||
transform-origin: top right;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.agent-panel-confirmation {
|
||||
border: 1px solid rgba(254, 215, 170, 0.92);
|
||||
background: rgba(255, 247, 237, 0.96);
|
||||
}
|
||||
|
||||
.agent-panel-enter {
|
||||
animation:
|
||||
agent-panel-reveal 170ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
agent-panel-fade 150ms ease-out;
|
||||
transform-origin: left top;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.agent-panel-collapse {
|
||||
animation:
|
||||
agent-panel-dismiss 170ms cubic-bezier(0.5, 0, 0.2, 1) forwards,
|
||||
agent-panel-dim 150ms ease-in forwards;
|
||||
pointer-events: none;
|
||||
transform-origin: left top;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.agent-rail-enter {
|
||||
animation:
|
||||
agent-rail-shell 170ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
agent-panel-fade 130ms ease-out;
|
||||
transform-origin: left top;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.agent-rail-item {
|
||||
animation: agent-rail-item 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.agent-rail-item:nth-child(2) {
|
||||
animation-delay: 24ms;
|
||||
}
|
||||
|
||||
.agent-rail-item:nth-child(3) {
|
||||
animation-delay: 42ms;
|
||||
}
|
||||
|
||||
.agent-rail-item:nth-child(4) {
|
||||
animation-delay: 58ms;
|
||||
}
|
||||
|
||||
@keyframes agent-panel-reveal {
|
||||
from {
|
||||
transform: translateX(-8px) scale(0.985);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes agent-panel-fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes agent-panel-dim {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes agent-panel-dismiss {
|
||||
from {
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-8px) scale(0.985);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes agent-rail-shell {
|
||||
from {
|
||||
transform: translateX(-5px) scale(0.94);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes agent-rail-item {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-3px) scale(0.92);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes agent-stream-token-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
filter: blur(0.75px);
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 0.88;
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes agent-chart-line-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(3px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes agent-chart-mark-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px) scaleY(0.75);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scheduled-feed-detail-show {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scheduled-feed-shell-show {
|
||||
from {
|
||||
transform: translateX(10px) translateY(-4px) scale(0.985);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0) translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scheduled-feed-shell-hide {
|
||||
from {
|
||||
transform: translateX(0) translateY(0) scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(10px) translateY(-4px) scale(0.985);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.agent-panel-enter,
|
||||
.agent-panel-collapse,
|
||||
.agent-rail-enter,
|
||||
.agent-rail-item,
|
||||
.scheduled-feed-shell-enter,
|
||||
.scheduled-feed-shell-exit,
|
||||
.scheduled-feed-detail-enter {
|
||||
animation: none;
|
||||
clip-path: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.scheduled-feed-layout {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.scheduled-feed-panel-shell {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.agent-streaming-response [data-sd-animate] {
|
||||
animation: none;
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.agent-chart-line,
|
||||
.agent-chart-point,
|
||||
.agent-chart-bar {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-group {
|
||||
border: 1px solid rgba(255, 255, 255, 0.7) !important;
|
||||
border-radius: 14px !important;
|
||||
box-shadow: 0 14px 36px rgba(30, 64, 115, 0.14) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl button {
|
||||
width: 34px !important;
|
||||
height: 34px !important;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl-attrib {
|
||||
border-radius: 8px 0 0 0 !important;
|
||||
color: #475569 !important;
|
||||
}
|
||||
Reference in New Issue
Block a user