hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-25 07:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: show settings as modal dialog

Browse Source
This commit is contained in:
aits2026
2026-03-10 13:32:19 +08:00
parent 5b2e48badd
commit 37796c98c9
4 changed files with 248 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/pages/SettingsPage.scss
View File

@@ -1,17 +1,38 @@
.settings-modal-overlay {
position: fixed;
top: 41px;
left: 0;
right: 0;
bottom: 0;
z-index: 2050;
display: flex;
align-items: center;
justify-content: center;
padding: 28px 32px;
background: rgba(15, 23, 42, 0.28);
backdrop-filter: blur(10px);
}
.settings-page {
display: flex;
flex-direction: column;
height: 100%;
margin: -24px;
width: min(1160px, calc(100vw - 96px));
height: min(820px, calc(100vh - 120px));
max-height: 100%;
padding: 24px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 24px;
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
overflow: hidden;
}
.settings-header {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 20px;
gap: 20px;
margin-bottom: 18px;
flex-shrink: 0;
h1 {
@@ -22,29 +43,76 @@
}
}
.settings-title-block {
display: flex;
flex-direction: column;
gap: 6px;
p {
margin: 0;
font-size: 13px;
color: var(--text-tertiary);
line-height: 1.6;
}
}
.settings-actions {
display: flex;
align-items: center;
gap: 12px;
}
.settings-close-btn {
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--border-color);
border-radius: 10px;
background: var(--bg-secondary);
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
&:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
border-color: rgba(139, 115, 85, 0.28);
}
}
.settings-layout {
flex: 1;
min-height: 0;
display: flex;
gap: 20px;
overflow: hidden;
}
.settings-tabs {
display: flex;
gap: 4px;
padding: 4px;
background: var(--bg-tertiary);
border-radius: 12px;
margin-bottom: 20px;
flex-direction: column;
gap: 6px;
padding: 12px;
width: 220px;
flex-shrink: 0;
width: fit-content;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 20px;
overflow-y: auto;
}
.tab-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
width: 100%;
justify-content: flex-start;
padding: 11px 14px;
border: none;
border-radius: 8px;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
@@ -67,6 +135,7 @@
.settings-body {
flex: 1;
overflow-y: auto;
min-width: 0;
padding-right: 8px;
&::-webkit-scrollbar {
@@ -85,8 +154,10 @@
.tab-content {
background: var(--bg-secondary);
border-radius: 16px;
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 24px;
min-height: 100%;
.section-desc {
font-size: 13px;
@@ -932,7 +1003,7 @@
padding: 10px 24px;
border-radius: 9999px;
font-size: 14px;
z-index: 100;
z-index: 2200;
animation: slideDown 0.3s ease;
&.success {
@@ -946,6 +1017,27 @@
}
}
@media (max-width: 960px) {
.settings-modal-overlay {
padding: 20px;
}
.settings-page {
width: min(100%, calc(100vw - 40px));
height: min(100%, calc(100vh - 82px));
padding: 20px;
}
.settings-layout {
flex-direction: column;
}
.settings-tabs {
width: 100%;
max-height: 220px;
}
}
@keyframes slideDown {
from {
opacity: 0;