mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-03-25 07:16:51 +00:00
feat(export): pin session table edge columns
This commit is contained in:
aits2026
@@ -1722,9 +1722,12 @@
|
|||||||
--contacts-default-visible-rows: 10;
|
--contacts-default-visible-rows: 10;
|
||||||
--contacts-default-list-height: calc(var(--contacts-row-height) * var(--contacts-default-visible-rows));
|
--contacts-default-list-height: calc(var(--contacts-row-height) * var(--contacts-default-visible-rows));
|
||||||
--contacts-select-col-width: 34px;
|
--contacts-select-col-width: 34px;
|
||||||
|
--contacts-avatar-col-width: 44px;
|
||||||
--contacts-inline-padding: 12px;
|
--contacts-inline-padding: 12px;
|
||||||
|
--contacts-column-gap: 12px;
|
||||||
--contacts-name-text-width: 10em;
|
--contacts-name-text-width: 10em;
|
||||||
--contacts-main-col-width: calc(44px + 12px + var(--contacts-name-text-width));
|
--contacts-main-col-width: calc(var(--contacts-avatar-col-width) + var(--contacts-column-gap) + var(--contacts-name-text-width));
|
||||||
|
--contacts-left-sticky-width: calc(var(--contacts-select-col-width) + var(--contacts-main-col-width) + var(--contacts-column-gap));
|
||||||
--contacts-message-col-width: 120px;
|
--contacts-message-col-width: 120px;
|
||||||
--contacts-media-col-width: 72px;
|
--contacts-media-col-width: 72px;
|
||||||
--contacts-action-col-width: 140px;
|
--contacts-action-col-width: 140px;
|
||||||
@@ -1886,13 +1889,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.contacts-list-header {
|
.contacts-list-header {
|
||||||
|
--contacts-header-bg: color-mix(in srgb, var(--bg-secondary) 90%, var(--bg-primary));
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: var(--contacts-column-gap);
|
||||||
padding: 10px var(--contacts-inline-padding) 8px;
|
padding: 10px var(--contacts-inline-padding) 8px;
|
||||||
min-width: max(100%, var(--contacts-table-min-width));
|
min-width: max(100%, var(--contacts-table-min-width));
|
||||||
border-bottom: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
|
border-bottom: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
|
||||||
background: color-mix(in srgb, var(--bg-secondary) 90%, var(--bg-primary));
|
background: var(--contacts-header-bg);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--text-tertiary);
|
color: var(--text-tertiary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -1909,6 +1913,30 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.contacts-list-header-left {
|
||||||
|
position: sticky;
|
||||||
|
left: 0;
|
||||||
|
z-index: 12;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--contacts-column-gap);
|
||||||
|
width: var(--contacts-left-sticky-width);
|
||||||
|
min-width: var(--contacts-left-sticky-width);
|
||||||
|
max-width: var(--contacts-left-sticky-width);
|
||||||
|
background: var(--contacts-header-bg);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: calc(-1 * var(--contacts-column-gap));
|
||||||
|
width: var(--contacts-column-gap);
|
||||||
|
background: var(--contacts-header-bg);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.contacts-list-header-select {
|
.contacts-list-header-select {
|
||||||
width: var(--contacts-select-col-width);
|
width: var(--contacts-select-col-width);
|
||||||
min-width: var(--contacts-select-col-width);
|
min-width: var(--contacts-select-col-width);
|
||||||
@@ -1974,8 +2002,8 @@
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 8;
|
z-index: 13;
|
||||||
background: var(--bg-secondary);
|
background: var(--contacts-header-bg);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
@@ -1986,7 +2014,7 @@
|
|||||||
left: -8px;
|
left: -8px;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background: linear-gradient(to right, transparent, var(--bg-secondary));
|
background: linear-gradient(to right, transparent, var(--contacts-header-bg));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2110,14 +2138,16 @@
|
|||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
|
|
||||||
&.selected .contact-item {
|
&.selected .contact-item {
|
||||||
background: rgba(var(--primary-rgb), 0.08);
|
--contacts-row-bg: rgba(var(--primary-rgb), 0.08);
|
||||||
|
background: var(--contacts-row-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-item {
|
.contact-item {
|
||||||
|
--contacts-row-bg: var(--bg-secondary);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: var(--contacts-column-gap);
|
||||||
padding: 12px 6px 12px var(--contacts-inline-padding);
|
padding: 12px 6px 12px var(--contacts-inline-padding);
|
||||||
min-width: max(100%, var(--contacts-table-min-width));
|
min-width: max(100%, var(--contacts-table-min-width));
|
||||||
height: 72px;
|
height: 72px;
|
||||||
@@ -2125,9 +2155,36 @@
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
background: var(--contacts-row-bg);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--bg-hover);
|
--contacts-row-bg: var(--bg-hover);
|
||||||
|
background: var(--contacts-row-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-left-sticky {
|
||||||
|
position: sticky;
|
||||||
|
left: 0;
|
||||||
|
z-index: 11;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
align-self: stretch;
|
||||||
|
gap: var(--contacts-column-gap);
|
||||||
|
width: var(--contacts-left-sticky-width);
|
||||||
|
min-width: var(--contacts-left-sticky-width);
|
||||||
|
max-width: var(--contacts-left-sticky-width);
|
||||||
|
background: var(--contacts-row-bg);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: calc(-1 * var(--contacts-column-gap));
|
||||||
|
width: var(--contacts-column-gap);
|
||||||
|
background: var(--contacts-row-bg);
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2496,6 +2553,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
align-self: stretch;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
width: var(--contacts-action-col-width);
|
width: var(--contacts-action-col-width);
|
||||||
min-width: var(--contacts-action-col-width);
|
min-width: var(--contacts-action-col-width);
|
||||||
@@ -2503,7 +2562,18 @@
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
background: transparent;
|
background: var(--contacts-row-bg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: -8px;
|
||||||
|
width: 8px;
|
||||||
|
pointer-events: none;
|
||||||
|
background: linear-gradient(to right, transparent, var(--contacts-row-bg));
|
||||||
|
}
|
||||||
|
|
||||||
.row-action-main {
|
.row-action-main {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|||||||
@@ -5876,27 +5876,29 @@ function ExportPage() {
|
|||||||
return (
|
return (
|
||||||
<div className={`contact-row ${checked ? 'selected' : ''}`}>
|
<div className={`contact-row ${checked ? 'selected' : ''}`}>
|
||||||
<div className="contact-item">
|
<div className="contact-item">
|
||||||
<div className="row-select-cell">
|
<div className="row-left-sticky">
|
||||||
<button
|
<div className="row-select-cell">
|
||||||
className={`select-icon-btn ${checked ? 'checked' : ''}`}
|
<button
|
||||||
type="button"
|
className={`select-icon-btn ${checked ? 'checked' : ''}`}
|
||||||
disabled={!canExport}
|
type="button"
|
||||||
onClick={() => toggleSelectSession(contact.username)}
|
disabled={!canExport}
|
||||||
title={canExport ? (checked ? '取消选择' : '选择会话') : '该联系人暂无会话记录'}
|
onClick={() => toggleSelectSession(contact.username)}
|
||||||
>
|
title={canExport ? (checked ? '取消选择' : '选择会话') : '该联系人暂无会话记录'}
|
||||||
{checked ? <CheckSquare size={16} /> : <Square size={16} />}
|
>
|
||||||
</button>
|
{checked ? <CheckSquare size={16} /> : <Square size={16} />}
|
||||||
</div>
|
</button>
|
||||||
<div className="contact-avatar">
|
</div>
|
||||||
{contact.avatarUrl ? (
|
<div className="contact-avatar">
|
||||||
<img src={contact.avatarUrl} alt="" loading="lazy" />
|
{contact.avatarUrl ? (
|
||||||
) : (
|
<img src={contact.avatarUrl} alt="" loading="lazy" />
|
||||||
<span>{getAvatarLetter(contact.displayName)}</span>
|
) : (
|
||||||
)}
|
<span>{getAvatarLetter(contact.displayName)}</span>
|
||||||
</div>
|
)}
|
||||||
<div className="contact-info">
|
</div>
|
||||||
<div className="contact-name">{contact.displayName}</div>
|
<div className="contact-info">
|
||||||
<div className="contact-remark">{contact.alias || contact.username}</div>
|
<div className="contact-name">{contact.displayName}</div>
|
||||||
|
<div className="contact-remark">{contact.alias || contact.username}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="row-message-count">
|
<div className="row-message-count">
|
||||||
<div className="row-message-stats">
|
<div className="row-message-stats">
|
||||||
@@ -6394,19 +6396,21 @@ function ExportPage() {
|
|||||||
onPointerUp={handleContactsHeaderPointerUp}
|
onPointerUp={handleContactsHeaderPointerUp}
|
||||||
onPointerCancel={handleContactsHeaderPointerCancel}
|
onPointerCancel={handleContactsHeaderPointerCancel}
|
||||||
>
|
>
|
||||||
<span className="contacts-list-header-select">
|
<span className="contacts-list-header-left">
|
||||||
<button
|
<span className="contacts-list-header-select">
|
||||||
className={`select-icon-btn ${isAllVisibleSelected ? 'checked' : ''}`}
|
<button
|
||||||
type="button"
|
className={`select-icon-btn ${isAllVisibleSelected ? 'checked' : ''}`}
|
||||||
onClick={toggleSelectAllVisible}
|
type="button"
|
||||||
disabled={visibleSelectableCount === 0}
|
onClick={toggleSelectAllVisible}
|
||||||
title={isAllVisibleSelected ? '取消全选当前筛选联系人' : '全选当前筛选联系人'}
|
disabled={visibleSelectableCount === 0}
|
||||||
>
|
title={isAllVisibleSelected ? '取消全选当前筛选联系人' : '全选当前筛选联系人'}
|
||||||
{isAllVisibleSelected ? <CheckSquare size={16} /> : <Square size={16} />}
|
>
|
||||||
</button>
|
{isAllVisibleSelected ? <CheckSquare size={16} /> : <Square size={16} />}
|
||||||
</span>
|
</button>
|
||||||
<span className="contacts-list-header-main">
|
</span>
|
||||||
<span className="contacts-list-header-main-label">{contactsHeaderMainLabel}</span>
|
<span className="contacts-list-header-main">
|
||||||
|
<span className="contacts-list-header-main-label">{contactsHeaderMainLabel}</span>
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span className="contacts-list-header-count">总消息数</span>
|
<span className="contacts-list-header-count">总消息数</span>
|
||||||
<span className="contacts-list-header-media">表情包</span>
|
<span className="contacts-list-header-media">表情包</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user