feat(web): 构建漂流瓶移动端 PWA
- 演示登录、内存令牌、单 Promise 刷新与路由守卫\n- 投瓶、捞瓶、首次回复、会话与实时聊天\n- 独立管理员登录与审核/举报工作台\n- Socket 认证续期、断线补齐与账号切换清理\n- PWA 离线壳、深海主题与移动端无障碍
This commit is contained in:
root
@@ -0,0 +1,545 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=ZCOOL+XiaoWei&display=swap");
|
||||
:root {
|
||||
font-family: "Noto Sans SC", system-ui, sans-serif;
|
||||
color: #effcff;
|
||||
background: #020b13;
|
||||
--deep: #061b2b;
|
||||
--panel: rgba(13, 48, 63, 0.72);
|
||||
--line: rgba(139, 224, 218, 0.18);
|
||||
--aqua: #76e4d5;
|
||||
--sand: #f1c27d;
|
||||
--muted: #91abb7;
|
||||
--danger: #ff8f91;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
background: #020b13;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background: radial-gradient(
|
||||
circle at 50% 0,
|
||||
#0b4050 0,
|
||||
#061b2b 38%,
|
||||
#020b13 100%
|
||||
);
|
||||
line-height: 1.55;
|
||||
}
|
||||
body:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image: radial-gradient(
|
||||
circle,
|
||||
rgba(118, 228, 213, 0.22) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: 42px 42px;
|
||||
mask-image: linear-gradient(#000, transparent 80%);
|
||||
}
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
a {
|
||||
font: inherit;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.primary,
|
||||
.secondary,
|
||||
.danger,
|
||||
.icon-link,
|
||||
.avatar {
|
||||
min-height: 44px;
|
||||
}
|
||||
button,
|
||||
a {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
button:focus-visible,
|
||||
a:focus-visible,
|
||||
input:focus-visible,
|
||||
textarea:focus-visible,
|
||||
select:focus-visible {
|
||||
outline: 3px solid var(--sand);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.app-shell {
|
||||
position: relative;
|
||||
width: min(100%, 430px);
|
||||
min-height: 100dvh;
|
||||
margin: auto;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(6, 27, 43, 0.18),
|
||||
rgba(2, 11, 19, 0.88)
|
||||
);
|
||||
box-shadow: 0 0 70px #000;
|
||||
padding-bottom: 84px;
|
||||
overflow: hidden;
|
||||
}
|
||||
main {
|
||||
min-height: calc(100dvh - 84px);
|
||||
}
|
||||
.page,
|
||||
.list,
|
||||
.settings {
|
||||
padding: 1rem 1.1rem;
|
||||
}
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
padding: max(1rem, env(safe-area-inset-top)) 1.1rem 1rem;
|
||||
}
|
||||
.topbar h1 {
|
||||
font:
|
||||
500 1.4rem "ZCOOL XiaoWei",
|
||||
serif;
|
||||
margin: 0;
|
||||
}
|
||||
.topbar small,
|
||||
.eyebrow {
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--aqua);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
.icon-link,
|
||||
.avatar {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 44px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.avatar {
|
||||
font-weight: 700;
|
||||
}
|
||||
.glass {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
backdrop-filter: blur(18px);
|
||||
border-radius: 22px;
|
||||
padding: 1.1rem;
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.login {
|
||||
padding: 8vh 1.1rem 2rem;
|
||||
}
|
||||
.hero {
|
||||
padding: 2rem 0.3rem;
|
||||
}
|
||||
.hero h1,
|
||||
.page h2,
|
||||
.sea h2 {
|
||||
font:
|
||||
500 2.1rem/1.25 "ZCOOL XiaoWei",
|
||||
serif;
|
||||
}
|
||||
.hero h1 em {
|
||||
color: var(--sand);
|
||||
font-style: normal;
|
||||
}
|
||||
.hero > p:last-child,
|
||||
.muted,
|
||||
.quota-note {
|
||||
color: var(--muted);
|
||||
}
|
||||
.orb {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: rgba(118, 228, 213, 0.12);
|
||||
color: var(--aqua);
|
||||
box-shadow: 0 0 40px rgba(118, 228, 213, 0.25);
|
||||
}
|
||||
label {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
color: #cce0e6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
background: rgba(0, 10, 18, 0.56);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 13px;
|
||||
padding: 0.72rem 0.85rem;
|
||||
resize: vertical;
|
||||
}
|
||||
textarea::placeholder,
|
||||
input::placeholder {
|
||||
color: #77919d;
|
||||
}
|
||||
.primary,
|
||||
.secondary,
|
||||
.danger {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
padding: 0.7rem 1rem;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.primary {
|
||||
color: #032128;
|
||||
background: linear-gradient(135deg, var(--aqua), #b8f3db);
|
||||
}
|
||||
.secondary {
|
||||
color: var(--aqua);
|
||||
background: rgba(118, 228, 213, 0.1);
|
||||
border: 1px solid rgba(118, 228, 213, 0.3);
|
||||
}
|
||||
.danger {
|
||||
color: #311016;
|
||||
background: var(--danger);
|
||||
}
|
||||
button:disabled {
|
||||
opacity: 0.48;
|
||||
}
|
||||
.text {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--aqua);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.error {
|
||||
color: #ffd0d0;
|
||||
background: rgba(255, 80, 90, 0.12);
|
||||
border-radius: 12px;
|
||||
padding: 0.7rem;
|
||||
}
|
||||
.demo {
|
||||
color: var(--sand);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.sea {
|
||||
position: relative;
|
||||
padding: 1.5rem 1.1rem 2rem;
|
||||
}
|
||||
.moon {
|
||||
position: absolute;
|
||||
right: -35px;
|
||||
top: -20px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle at 35% 35%,
|
||||
#b8f3db,
|
||||
#178998 58%,
|
||||
transparent 61%
|
||||
);
|
||||
opacity: 0.22;
|
||||
}
|
||||
.actions {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 1.25rem;
|
||||
border-radius: 22px;
|
||||
border: 1px solid var(--line);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(118, 228, 213, 0.18),
|
||||
rgba(5, 24, 38, 0.7)
|
||||
);
|
||||
}
|
||||
.action b {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 18px;
|
||||
background: rgba(118, 228, 213, 0.16);
|
||||
font-size: 1.7rem;
|
||||
color: var(--aqua);
|
||||
}
|
||||
.action span {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.action small {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
.quote {
|
||||
margin: 0 1.1rem;
|
||||
text-align: center;
|
||||
color: #c9e0e6;
|
||||
}
|
||||
.quota-note {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.between,
|
||||
.button-row,
|
||||
.author,
|
||||
.toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.button-row > * {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
}
|
||||
.success,
|
||||
.empty-ocean {
|
||||
margin: 4rem 1.1rem;
|
||||
text-align: center;
|
||||
}
|
||||
.success > b,
|
||||
.bottle {
|
||||
font-size: 3rem;
|
||||
color: var(--aqua);
|
||||
}
|
||||
.bottle-card blockquote {
|
||||
font:
|
||||
500 1.5rem/1.6 "ZCOOL XiaoWei",
|
||||
serif;
|
||||
margin: 2rem 0.2rem;
|
||||
}
|
||||
.author {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.author i {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.author small {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
}
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.conversation {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.3rem;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.conversation p {
|
||||
margin: 0.3rem 0;
|
||||
color: var(--muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 260px;
|
||||
}
|
||||
.conversation time {
|
||||
grid-column: 1;
|
||||
font-size: 0.7rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
.badge,
|
||||
.pill {
|
||||
border-radius: 99px;
|
||||
background: rgba(118, 228, 213, 0.15);
|
||||
color: var(--aqua);
|
||||
padding: 0.22rem 0.55rem;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
.chat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100dvh - 10px);
|
||||
}
|
||||
.messages {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
.bubble {
|
||||
max-width: 82%;
|
||||
margin: 0.7rem 0;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 18px 18px 18px 5px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.bubble p {
|
||||
margin: 0;
|
||||
}
|
||||
.bubble small {
|
||||
color: var(--muted);
|
||||
}
|
||||
.bubble.sending {
|
||||
opacity: 0.65;
|
||||
}
|
||||
.bubble.failed {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
.composer {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
|
||||
background: #061b2b;
|
||||
}
|
||||
.composer textarea {
|
||||
min-height: 48px;
|
||||
}
|
||||
.composer button {
|
||||
min-width: 48px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--aqua);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.dot {
|
||||
font-size: 0.7rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
.dot.on {
|
||||
color: var(--aqua);
|
||||
}
|
||||
.chat-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
.chat-actions .text {
|
||||
min-width: 44px;
|
||||
}
|
||||
.report-dialog {
|
||||
position: absolute;
|
||||
z-index: 12;
|
||||
top: 18%;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
background: #0b2d3b;
|
||||
}
|
||||
.report-dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.bottle-row p {
|
||||
font-family: "ZCOOL XiaoWei", serif;
|
||||
font-size: 1.12rem;
|
||||
}
|
||||
.bottle-row time,
|
||||
.bottle-row small {
|
||||
color: var(--muted);
|
||||
}
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
background: #020b13;
|
||||
padding: 0.6rem;
|
||||
border-radius: 10px;
|
||||
color: #9fc3cc;
|
||||
}
|
||||
.segmented {
|
||||
display: flex;
|
||||
padding: 0 1rem 1rem;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.segmented button {
|
||||
flex: 1;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
color: #fff;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.offline {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
background: #f1c27d;
|
||||
color: #2b1b05;
|
||||
padding: 0.35rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.tabs {
|
||||
position: fixed;
|
||||
z-index: 8;
|
||||
bottom: 0;
|
||||
width: min(100%, 430px);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 0.55rem 0.5rem calc(0.55rem + env(safe-area-inset-bottom));
|
||||
background: rgba(3, 17, 28, 0.94);
|
||||
backdrop-filter: blur(18px);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.tabs a {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.tabs a[aria-current="page"] {
|
||||
color: var(--aqua);
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
}
|
||||
code {
|
||||
color: var(--sand);
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
body {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
.app-shell {
|
||||
min-height: calc(100dvh - 4rem);
|
||||
border-radius: 32px;
|
||||
}
|
||||
.tabs {
|
||||
bottom: 2rem;
|
||||
border-radius: 0 0 32px 32px;
|
||||
}
|
||||
.chat {
|
||||
height: calc(100dvh - 4rem);
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.orb,
|
||||
.bottle {
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes float {
|
||||
50% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user