huanghaosheng/VLoop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add frontend messaging experience

Browse Source
This commit is contained in:
leonincs
2026-04-26 15:47:17 +08:00
parent 0275ad7ea3
commit 624da23a1c
8 changed files with 944 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/src/views/AccountView.vue vendored
View File

@@ -349,23 +349,23 @@ watch(
width: min(420px, 100%);
}
.ghost {
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(0, 0, 0, 0.18);
color: rgba(255, 255, 255, 0.86);
border-radius: 12px;
padding: 10px 12px;
cursor: pointer;
}
.ghost {
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.055);
color: var(--text);
border-radius: 8px;
padding: 10px 12px;
cursor: pointer;
}
.ghost:hover {
background: rgba(255, 255, 255, 0.1);
}
.metric {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
border-radius: 16px;
.metric {
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.06);
border-radius: 8px;
padding: 12px 14px;
min-width: 120px;
cursor: pointer;
@@ -378,10 +378,10 @@ watch(
background: rgba(255, 255, 255, 0.1);
}
.metric.active {
background: rgba(254, 44, 85, 0.14);
border-color: rgba(254, 44, 85, 0.55);
}
.metric.active {
background: rgba(43, 161, 255, 0.14);
border-color: rgba(43, 161, 255, 0.55);
}
.metric.static {
cursor: default;
@@ -398,18 +398,18 @@ watch(
letter-spacing: 0.2px;
}
.metric-label {
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
}
.hint {
color: rgba(255, 255, 255, 0.78);
}
.hint.bad {
color: rgba(254, 44, 85, 0.92);
}
.metric-label {
font-size: 12px;
color: var(--muted);
}
.hint {
color: var(--muted);
}
.hint.bad {
color: var(--danger);
}
.drawer-backdrop {
position: fixed;
@@ -423,12 +423,12 @@ watch(
padding: 16px;
}
.drawer {
.drawer {
width: min(520px, calc(100vw - 18px));
max-height: min(78vh, 720px);
background: rgba(0, 0, 0, 0.65);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 18px;
background: rgba(13, 18, 29, 0.92);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr;
@@ -439,7 +439,7 @@ watch(
align-items: center;
justify-content: space-between;
padding: 14px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid var(--border);
}
.drawer-title {
@@ -449,8 +449,8 @@ watch(
.drawer-x {
width: 34px;
height: 34px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
@@ -465,14 +465,14 @@ watch(
gap: 10px;
}
.drawer-hint {
color: rgba(255, 255, 255, 0.78);
.drawer-hint {
color: var(--muted);
padding: 12px 0;
}
.drawer-hint.bad {
color: rgba(254, 44, 85, 0.92);
}
.drawer-hint.bad {
color: var(--danger);
}
.video-grid {
display: grid;
@@ -492,10 +492,10 @@ watch(
}
}
.video-card {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
.video-card {
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
padding: 0;
@@ -539,8 +539,8 @@ watch(
gap: 12px;
align-items: center;
padding: 10px 10px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.05);
cursor: pointer;
}
@@ -557,10 +557,10 @@ watch(
font-weight: 800;
}
.user-id {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
.user-id {
font-size: 12px;
color: var(--muted);
}
.mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;