azmat1127/yingqing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善前端UI

Browse Source
This commit is contained in:
Azmat@qq.com
2026-08-20 10:41:28 +08:00
parent dcd9bf6b5e
commit b883fed981
15 changed files with 1182 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/frontend/src/styles.css
+53 -16
View File
@@ -92,7 +92,7 @@ img, svg, video { display: block; max-width: 100%; }
.divider { height: 1px; background: var(--border); margin: 14px 0; }
/* ─── App shell ─── */
.app { display: grid; grid-template-columns: 164px 1fr; min-height: 100vh; }
.app { display: grid; grid-template-columns: var(--sidebar-width, 192px) 1fr; min-height: 100vh; }
/* ─── Sidebar ─── */
aside.sidebar {
@@ -177,15 +177,46 @@ nav a.disabled:hover { background: transparent; color: var(--ink-4); }
.user .em { font-size: 13px; }
/* ─── Main + grid background ─── */
main { position: relative; overflow: hidden; background: var(--bg); }
main { position: relative; overflow: hidden; background: #fff; }
.grid-bg {
position: absolute; inset: 0; pointer-events: none;
position: absolute;
inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><circle cx='60' cy='60' r='0.9' fill='%23CFCABB'/></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><g stroke='%23E2DED2' stroke-width='1' fill='none' stroke-dasharray='1.5 4'><path d='M240 0 L240 240'/><path d='M0 240 L240 240'/></g></svg>");
background-size: 60px 60px, 240px 240px;
mask-image: radial-gradient(ellipse 95% 80% at 50% 35%, #000 25%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse 95% 80% at 50% 35%, #000 25%, transparent 95%);
linear-gradient(rgba(0, 47, 167, 0.16) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 47, 167, 0.16) 1px, transparent 1px);
background-size: 48px 48px;
background-position: -1px -1px;
-webkit-mask-image: linear-gradient(
90deg,
#000 0%,
rgba(0, 0, 0, 0.58) 2%,
rgba(0, 0, 0, 0.3) 16%,
rgba(0, 0, 0, 0.12) 30%,
rgba(0, 0, 0, 0.03) 40%,
transparent 46%,
transparent 54%,
rgba(0, 0, 0, 0.03) 60%,
rgba(0, 0, 0, 0.12) 70%,
rgba(0, 0, 0, 0.3) 84%,
rgba(0, 0, 0, 0.58) 98%,
#000 100%
);
mask-image: linear-gradient(
90deg,
#000 0%,
rgba(0, 0, 0, 0.58) 2%,
rgba(0, 0, 0, 0.3) 16%,
rgba(0, 0, 0, 0.12) 30%,
rgba(0, 0, 0, 0.03) 40%,
transparent 46%,
transparent 54%,
rgba(0, 0, 0, 0.03) 60%,
rgba(0, 0, 0, 0.12) 70%,
rgba(0, 0, 0, 0.3) 84%,
rgba(0, 0, 0, 0.58) 98%,
#000 100%
);
}
.scatter { position: absolute; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.05; color: var(--ink-4); white-space: pre; pointer-events: none; opacity: .8; letter-spacing: .04em; }
.tag-corner { position: absolute; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .06em; pointer-events: none; opacity: .85; z-index: 1; }
@@ -490,21 +521,23 @@ table.t tbody tr:hover { background: var(--bg-soft); }
.modal-bg {
position: fixed; inset: 0;
background: rgba(21, 20, 15, .42);
display: none; align-items: center; justify-content: center;
display: flex; align-items: center; justify-content: center;
z-index: 999;
opacity: 0;
transition: opacity .2s;
visibility: hidden;
pointer-events: none;
transition: opacity .2s ease, visibility .2s ease;
}
.modal-bg.show { display: flex; opacity: 1; }
.modal-bg.show { opacity: 1; visibility: visible; pointer-events: auto; }
.modal {
background: var(--card);
border: 1px solid var(--border);
max-width: 480px; width: 90%;
position: relative;
transform: scale(.96);
transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
transform: translateY(8px) scale(.98);
transition: transform .22s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-bg.show .modal { transform: scale(1); }
.modal-bg.show .modal { transform: none; }
.modal::before, .modal::after { content: '+'; position: absolute; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1; }
.modal::before { top: -8px; left: -8px; }
.modal::after { bottom: -8px; right: -8px; }
@@ -524,10 +557,14 @@ table.t tbody tr:hover { background: var(--bg-soft); }
.drawer-bg {
position: fixed; inset: 0;
background: rgba(21, 20, 15, .32);
display: none;
display: block;
z-index: 90;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s ease, visibility .2s ease;
}
.drawer-bg.show { display: block; }
.drawer-bg.show { opacity: 1; visibility: visible; pointer-events: auto; }
.drawer {
position: fixed; right: 0; top: 0; bottom: 0;
width: 540px; max-width: 100vw;