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

新增了导出联系人的功能

Browse Source
This commit is contained in:
xuncha
2026-01-27 19:25:34 +08:00
parent 836b0f9df4
commit f55507cd99
10 changed files with 1155 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

469
src/pages/ContactsPage.scss Normal file
View File

@@ -0,0 +1,469 @@
.contacts-page {
display: flex;
flex-direction: column;
height: 100%;
padding: 2rem;
gap: 1.5rem;
overflow: hidden;
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
h1 {
font-size: 1.75rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 8px;
background: var(--bg-secondary);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s;
&:hover:not(:disabled) {
background: var(--bg-tertiary);
color: var(--text-primary);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
svg.spin {
animation: spin 1s linear infinite;
}
}
}
.contacts-filters {
display: flex;
flex-direction: column;
gap: 1rem;
.search-bar {
position: relative;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 12px;
transition: all 0.2s;
&:focus-within {
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px var(--brand-primary-alpha);
}
svg {
color: var(--text-tertiary);
flex-shrink: 0;
}
input {
flex: 1;
border: none;
background: transparent;
color: var(--text-primary);
font-size: 0.9375rem;
outline: none;
&::placeholder {
color: var(--text-tertiary);
}
}
.clear-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
border: none;
background: transparent;
color: var(--text-tertiary);
cursor: pointer;
border-radius: 4px;
transition: all 0.2s;
&:hover {
background: var(--bg-tertiary);
color: var(--text-secondary);
}
}
}
.type-filters {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
.filter-checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
&:checked+.custom-checkbox {
background: var(--brand-primary);
border-color: var(--brand-primary);
&::after {
opacity: 1;
transform: scale(1);
}
}
}
.custom-checkbox {
position: relative;
width: 18px;
height: 18px;
border: 2px solid var(--border-secondary);
border-radius: 4px;
background: var(--bg-primary);
transition: all 0.2s;
&::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
opacity: 0;
transition: all 0.2s;
}
}
svg {
color: var(--text-secondary);
flex-shrink: 0;
}
span {
color: var(--text-primary);
font-size: 0.9375rem;
}
&:hover .custom-checkbox {
border-color: var(--brand-primary);
}
}
}
.contacts-count {
font-size: 0.875rem;
color: var(--text-tertiary);
}
}
.export-section {
padding: 1.5rem;
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 1rem;
h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.export-format {
display: flex;
align-items: center;
gap: 0.75rem;
label {
font-size: 0.9375rem;
color: var(--text-secondary);
white-space: nowrap;
}
select {
padding: 0.5rem 0.75rem;
border: 1px solid var(--border-primary);
border-radius: 8px;
background: var(--bg-primary);
color: var(--text-primary);
font-size: 0.9375rem;
cursor: pointer;
transition: all 0.2s;
&:hover {
border-color: var(--brand-primary);
}
&:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px var(--brand-primary-alpha);
}
}
}
.export-options {
display: flex;
gap: 1rem;
label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
span {
font-size: 0.9375rem;
color: var(--text-primary);
}
}
}
.export-folder {
.folder-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border: 1px solid var(--border-primary);
border-radius: 8px;
background: var(--bg-primary);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s;
font-size: 0.9375rem;
&:hover {
border-color: var(--brand-primary);
color: var(--text-primary);
}
span {
flex: 1;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.export-action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
background: #3b82f6;
color: #ffffff;
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
&:hover:not(:disabled) {
background: #2563eb;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
background: #9ca3af;
}
}
}
.contacts-content {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
.loading-state,
.empty-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
color: var(--text-tertiary);
svg.spin {
animation: spin 1s linear infinite;
color: var(--brand-primary);
}
}
.contacts-list {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-right: 0.5rem;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: var(--border-secondary);
border-radius: 3px;
&:hover {
background: var(--border-primary);
}
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 12px;
transition: all 0.2s;
&:hover {
background: var(--bg-tertiary);
border-color: var(--border-secondary);
}
.contact-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: var(--bg-tertiary);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
span {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-secondary);
}
}
.contact-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
.contact-name {
font-size: 1rem;
font-weight: 500;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact-remark {
font-size: 0.875rem;
color: var(--text-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.contact-type {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 500;
flex-shrink: 0;
&.friend {
background: var(--brand-primary-alpha);
color: var(--brand-primary);
}
&.group {
background: rgba(52, 211, 153, 0.1);
color: rgb(52, 211, 153);
}
&.official {
background: rgba(251, 191, 36, 0.1);
color: rgb(251, 191, 36);
}
&.other {
background: var(--bg-tertiary);
color: var(--text-tertiary);
}
svg {
flex-shrink: 0;
}
}
}
}
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}