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

单个好友导出ui优化

Browse Source
This commit is contained in:
xuncha
2026-02-19 17:54:55 +08:00
parent e88c859f4f
commit 804a65f52b
3 changed files with 537 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
src/pages/GroupAnalyticsPage.scss
View File

@@ -802,21 +802,180 @@
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
span {
> span {
font-size: 12px;
color: var(--text-secondary);
}
}
select {
width: 100%;
border: 1px solid var(--border-color);
border-radius: 10px;
.select-trigger {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border-color);
border-radius: 9999px;
background: var(--bg-primary);
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
cursor: pointer;
transition: all 0.2s;
&:hover {
border-color: var(--text-tertiary);
}
&.open {
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
}
.select-value {
flex: 1;
min-width: 0;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.select-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: color-mix(in srgb, var(--bg-primary) 85%, var(--bg-secondary));
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 6px;
box-shadow: var(--shadow-md);
z-index: 30;
max-height: 280px;
overflow-y: auto;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.select-option {
width: 100%;
text-align: left;
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
border: none;
border-radius: 10px;
background: transparent;
cursor: pointer;
transition: all 0.15s;
color: var(--text-primary);
font-size: 13px;
&:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
font-size: 13px;
padding: 8px 10px;
}
&.active {
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--primary);
}
}
.option-label {
font-weight: 500;
}
.option-desc {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.4;
}
.member-select-trigger-value {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.member-select-dropdown {
padding: 8px;
}
.member-select-search {
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 7px 9px;
margin-bottom: 8px;
background: var(--bg-tertiary);
svg {
color: var(--text-tertiary);
flex-shrink: 0;
}
input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
outline: none;
color: var(--text-primary);
font-size: 12px;
}
}
.member-select-options {
display: flex;
flex-direction: column;
gap: 4px;
}
.member-select-empty {
padding: 10px 8px;
text-align: center;
font-size: 12px;
color: var(--text-tertiary);
}
.member-select-option {
display: grid;
grid-template-columns: 28px 1fr;
gap: 8px;
align-items: center;
padding: 8px 10px;
.member-option-main {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.member-option-meta {
grid-column: 2 / 3;
font-size: 11px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.active {
.member-option-main,
.member-option-meta {
color: var(--primary);
}
}
}
@@ -866,36 +1025,62 @@
gap: 12px;
}
.member-export-switch {
.member-export-chip-group {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: var(--text-primary);
input {
width: 16px;
height: 16px;
cursor: pointer;
}
flex-direction: column;
gap: 8px;
}
.member-export-checkboxes {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
.chip-group-label {
font-size: 12px;
color: var(--text-secondary);
}
label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
.member-export-chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.export-filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 10px;
cursor: pointer;
user-select: none;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
transition: all 0.2s ease;
white-space: nowrap;
&:hover {
background: var(--bg-hover);
border-color: var(--text-tertiary);
color: var(--text-primary);
transform: translateY(-1px);
}
input {
width: 16px;
height: 16px;
cursor: pointer;
&.active {
background: var(--primary-light);
border-color: var(--primary);
color: var(--primary);
}
&.disabled,
&:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
&:hover {
background: var(--bg-secondary);
border-color: var(--border-color);
color: var(--text-secondary);
}
}
}