feat: 一些朋友圈功能的优化实现
This commit is contained in:
cc committed
1 parent
bdbb85175a
commit
a100f4ef97
8 files changed
+1127
-562
No files matched your search
@@ -39,13 +39,23 @@ jobs:
|
||||
npx tsc
|
||||
npx vite build
|
||||
|
||||
- name: Inject Configuration
|
||||
shell: bash
|
||||
run: |
|
||||
npm pkg set build.releaseInfo.releaseNotes=$'仅适配微信 4.0 及以上版本\n\n修复了一些已知问题\n\n详情前往 Telegram 群查看'
|
||||
|
||||
- name: Package and Publish
|
||||
env:
|
||||
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
run: |
|
||||
npx electron-builder --publish always
|
||||
npx electron-builder --publish always
|
||||
|
||||
- name: Update Release Notes
|
||||
env:
|
||||
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
shell: bash
|
||||
run: |
|
||||
cat <<EOF > release_notes.md
|
||||
## 更新日志
|
||||
修复了一些已知问题
|
||||
|
||||
## 加入我们的群
|
||||
[点击加入 Telegram 群](https://t.me/+hn3QzNc4DbA0MzNl)
|
||||
EOF
|
||||
|
||||
gh release edit "$GITHUB_REF_NAME" --notes-file release_notes.md
|
||||
@@ -673,6 +673,10 @@ function registerIpcHandlers() {
|
||||
return chatService.getMessageById(sessionId, localId)
|
||||
})
|
||||
|
||||
ipcMain.handle('chat:execQuery', async (_, kind: string, path: string | null, sql: string) => {
|
||||
return chatService.execQuery(kind, path, sql)
|
||||
})
|
||||
|
||||
ipcMain.handle('sns:getTimeline', async (_, limit: number, offset: number, usernames?: string[], keyword?: string, startTime?: number, endTime?: number) => {
|
||||
return snsService.getTimeline(limit, offset, usernames, keyword, startTime, endTime)
|
||||
})
|
||||
|
||||
+3
-1
@@ -118,7 +118,9 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
||||
const listener = (_: any, payload: { msgId: string; text: string }) => callback(payload)
|
||||
ipcRenderer.on('chat:voiceTranscriptPartial', listener)
|
||||
return () => ipcRenderer.removeListener('chat:voiceTranscriptPartial', listener)
|
||||
}
|
||||
},
|
||||
execQuery: (kind: string, path: string | null, sql: string) =>
|
||||
ipcRenderer.invoke('chat:execQuery', kind, path, sql)
|
||||
},
|
||||
|
||||
|
||||
|
||||
@@ -3367,6 +3367,19 @@ class ChatService {
|
||||
}
|
||||
return parsed
|
||||
}
|
||||
|
||||
async execQuery(kind: string, path: string | null, sql: string): Promise<{ success: boolean; rows?: any[]; error?: string }> {
|
||||
try {
|
||||
const connectResult = await this.ensureConnected()
|
||||
if (!connectResult.success) {
|
||||
return { success: false, error: connectResult.error || '数据库未连接' }
|
||||
}
|
||||
return wcdbService.execQuery(kind, path, sql)
|
||||
} catch (e) {
|
||||
console.error('ChatService: 执行自定义查询失败:', e)
|
||||
return { success: false, error: String(e) }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const chatService = new ChatService()
|
||||
Binary file not shown.
+721
-360
@@ -10,47 +10,63 @@
|
||||
}
|
||||
|
||||
.sns-sidebar {
|
||||
width: 280px;
|
||||
width: 300px;
|
||||
background: var(--bg-secondary);
|
||||
border-right: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
flex-shrink: 0;
|
||||
z-index: 10;
|
||||
|
||||
&.closed {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 16px 20px;
|
||||
padding: 18px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-primary);
|
||||
|
||||
.title-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--hover-bg);
|
||||
color: var(--text-primary);
|
||||
color: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -58,93 +74,114 @@
|
||||
.filter-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
/* 自定义滚动条 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--border-color);
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 10px 20px;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
background: var(--bg-tertiary);
|
||||
.filter-card {
|
||||
background: var(--bg-primary);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
padding: 14px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--accent-color);
|
||||
&:hover {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
.date-inputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
&.jump-date-card {
|
||||
.jump-date-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
input[type="date"] {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
color: var(--text-primary);
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
&.active {
|
||||
border-color: var(--accent-color);
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
background: rgba(var(--accent-color-rgb), 0.05);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--accent-color);
|
||||
.icon {
|
||||
color: var(--accent-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-color);
|
||||
background: var(--bg-primary);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(var(--accent-color-rgb), 0.08);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.icon {
|
||||
opacity: 0.5;
|
||||
transition: all 0.2s;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.clear-jump-date-inline {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
background: rgba(var(--accent-color-rgb), 0.06);
|
||||
border: 1px dashed rgba(var(--accent-color-rgb), 0.3);
|
||||
color: var(--accent-color);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
padding: 6px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
text-align: center;
|
||||
&.contact-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0; // 改为 0 以支持 flex 压缩
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-filter-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 200px;
|
||||
padding: 12px 0 0 0;
|
||||
|
||||
.section-header {
|
||||
padding: 0 20px 8px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.filter-section {
|
||||
margin-bottom: 20px;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
@@ -152,118 +189,294 @@
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
|
||||
.selected-count {
|
||||
font-size: 11px;
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
padding: 1px 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-search {
|
||||
margin: 0 20px 10px 20px;
|
||||
position: relative;
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 6px 10px 6px 28px;
|
||||
font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--accent-color);
|
||||
svg {
|
||||
color: var(--accent-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 10px;
|
||||
|
||||
.contact-item {
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
gap: 10px;
|
||||
margin-bottom: 2px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: var(--hover-bg);
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
color: var(--text-tertiary);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(var(--accent-color-rgb), 0.1);
|
||||
input {
|
||||
width: 100%;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
padding: 10px 10px 10px 36px;
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
.contact-name {
|
||||
color: var(--accent-color);
|
||||
font-weight: 600;
|
||||
&::placeholder {
|
||||
color: var(--text-tertiary);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
background: var(--bg-primary);
|
||||
box-shadow: 0 0 0 4px rgba(var(--accent-color-rgb), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.clear-input {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s;
|
||||
|
||||
.check-mark {
|
||||
color: var(--accent-color);
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
&:hover {
|
||||
color: var(--text-secondary);
|
||||
background: var(--hover-bg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-filter-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.section-header {
|
||||
padding: 16px 16px 1px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.clear-selection-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
background: rgba(var(--accent-color-rgb), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.selected-count {
|
||||
font-size: 10px;
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-contacts {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
.contact-search {
|
||||
padding: 0 16px 12px 16px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 26px;
|
||||
color: var(--text-tertiary);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
padding: 8px 30px 8px 30px;
|
||||
font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
transition: all 0.2s;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.clear-search-icon {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-secondary);
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px 8px;
|
||||
margin: 0 4px 8px 4px;
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
gap: 12px;
|
||||
margin-bottom: 2px;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: var(--hover-bg);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(var(--accent-color-rgb), 0.08);
|
||||
|
||||
.contact-name {
|
||||
color: var(--accent-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.check-box {
|
||||
border-color: var(--accent-color);
|
||||
background: var(--accent-color);
|
||||
|
||||
.inner-check {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
.active-badge {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: var(--accent-color);
|
||||
border: 2px solid var(--bg-secondary);
|
||||
border-radius: 50%;
|
||||
animation: badge-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--text-secondary);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.check-box {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
|
||||
.inner-check {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 1px;
|
||||
background: white;
|
||||
transform: scale(0);
|
||||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-contacts {
|
||||
padding: 32px 16px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: var(--text-tertiary);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 16px 20px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
|
||||
.clear-btn {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--hover-bg);
|
||||
color: var(--text-primary);
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 4px 10px rgba(var(--accent-color-rgb), 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -274,25 +487,40 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
background: var(--bg-primary);
|
||||
|
||||
.sns-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
height: 60px;
|
||||
padding: 0 24px;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background: var(--bg-secondary);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 5;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 16px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.sidebar-trigger {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
background: var(--hover-bg);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -302,15 +530,21 @@
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background: var(--hover-bg);
|
||||
color: var(--text-primary);
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
&.refresh-btn {
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -319,249 +553,364 @@
|
||||
}
|
||||
}
|
||||
|
||||
.sns-content-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.sns-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
padding: 24px 0;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
.active-filters {
|
||||
.active-filters-bar {
|
||||
max-width: 680px;
|
||||
margin: 0 auto 16px auto;
|
||||
margin: 0 auto 24px auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(var(--accent-color-rgb), 0.05);
|
||||
background: rgba(var(--accent-color-rgb), 0.08);
|
||||
border: 1px solid rgba(var(--accent-color-rgb), 0.2);
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
color: var(--accent-color);
|
||||
|
||||
.filter-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.clear-chip-btn {
|
||||
background: none;
|
||||
background: var(--accent-color);
|
||||
border: none;
|
||||
color: var(--text-tertiary);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
text-decoration: underline;
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-secondary);
|
||||
background: var(--accent-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sns-post {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 24px;
|
||||
max-width: 680px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
.posts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.post-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
.sns-post-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-info {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.sns-post-wrapper {
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
.sns-post {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
|
||||
transition: transform 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.post-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
|
||||
.post-info {
|
||||
margin-left: 14px;
|
||||
|
||||
.nickname {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-body {
|
||||
margin-bottom: 16px;
|
||||
.post-body {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.post-text {
|
||||
margin-bottom: 12px;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.6;
|
||||
font-size: 15px;
|
||||
word-break: break-word;
|
||||
}
|
||||
.post-text {
|
||||
margin-bottom: 14px;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.7;
|
||||
font-size: 15px;
|
||||
color: var(--text-primary);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.post-media-grid {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
.post-media-grid {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
|
||||
&.media-count-1 {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.media-item {
|
||||
max-width: 400px;
|
||||
aspect-ratio: unset;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
&.media-count-2,
|
||||
&.media-count-4 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
&.media-count-3,
|
||||
&.media-count-5,
|
||||
&.media-count-6,
|
||||
&.media-count-7,
|
||||
&.media-count-8,
|
||||
&.media-count-9 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
&.media-count-1 {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.media-item {
|
||||
aspect-ratio: 1;
|
||||
width: 320px;
|
||||
height: 240px;
|
||||
max-width: 100%;
|
||||
border-radius: 12px;
|
||||
aspect-ratio: auto;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&.media-count-2,
|
||||
&.media-count-4 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
&.media-count-3,
|
||||
&.media-count-5,
|
||||
&.media-count-6,
|
||||
&.media-count-7,
|
||||
&.media-count-8,
|
||||
&.media-count-9 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.media-item {
|
||||
width: 160px; // 多图模式下项固定大小（或由 grid 控制，但确保有高度）
|
||||
height: 160px;
|
||||
aspect-ratio: 1;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.media-error-placeholder {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.error {
|
||||
background: transparent;
|
||||
border: 1px dashed var(--border-color);
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
background: var(--bg-deep);
|
||||
color: var(--text-tertiary);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.post-video-placeholder {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: rgba(var(--accent-color-rgb), 0.1);
|
||||
color: var(--accent-color);
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
font-size: 13.5px;
|
||||
.post-video-placeholder {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: rgba(var(--accent-color-rgb), 0.08);
|
||||
color: var(--accent-color);
|
||||
padding: 10px 18px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(var(--accent-color-rgb), 0.1);
|
||||
cursor: pointer;
|
||||
|
||||
.likes-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
color: var(--accent-color);
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-top: 3.5px;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.likes-list {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.comments-section {
|
||||
.comment-item {
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.5;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.comment-user {
|
||||
color: var(--accent-color);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-text {
|
||||
color: var(--text-tertiary);
|
||||
margin: 0 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.comment-separator {
|
||||
color: var(--text-secondary);
|
||||
margin-left: -2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(var(--accent-color-rgb), 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-more,
|
||||
.no-more,
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 14px;
|
||||
.post-footer {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
position: relative;
|
||||
|
||||
.reset-inline {
|
||||
margin-top: 12px;
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 20px;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-bottom: 8px solid var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.likes-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
color: var(--accent-color);
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
box-shadow: 0 2px 6px rgba(var(--accent-color-rgb), 0.3);
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-top: 3px;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.likes-list {
|
||||
line-height: 1.6;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.comments-section {
|
||||
.comment-item {
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.6;
|
||||
font-size: 13px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.comment-user {
|
||||
color: var(--accent-color);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-text {
|
||||
color: var(--text-tertiary);
|
||||
margin: 0 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
&.loading-more,
|
||||
&.loading-newer {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
&.newer-hint {
|
||||
background: rgba(var(--accent-color-rgb), 0.08);
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
border: 1px dashed rgba(var(--accent-color-rgb), 0.2);
|
||||
transition: all 0.2s;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(var(--accent-color-rgb), 0.15);
|
||||
border-style: solid;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
color: var(--text-tertiary);
|
||||
|
||||
.no-results-icon {
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.reset-inline {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 15px rgba(var(--accent-color-rgb), 0.3);
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(var(--accent-color-rgb), 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -576,4 +925,16 @@
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes badge-pop {
|
||||
from {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
+369
-195
@@ -1,7 +1,8 @@
|
||||
import { useEffect, useState, useRef, useCallback } from 'react'
|
||||
import { RefreshCw, Heart, Search, Calendar, User, X, Filter } from 'lucide-react'
|
||||
import { useEffect, useState, useRef, useCallback, useMemo } from 'react'
|
||||
import { RefreshCw, Heart, Search, Calendar, User, X, Filter, Play, ImageIcon } from 'lucide-react'
|
||||
import { Avatar } from '../components/Avatar'
|
||||
import { ImagePreview } from '../components/ImagePreview'
|
||||
import JumpToDateDialog from '../components/JumpToDateDialog'
|
||||
import './SnsPage.scss'
|
||||
|
||||
interface SnsPost {
|
||||
@@ -20,23 +21,21 @@ interface SnsPost {
|
||||
const MediaItem = ({ url, thumb, onPreview }: { url: string, thumb: string, onPreview: () => void }) => {
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="media-item error">
|
||||
<span>无法加载</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="media-item">
|
||||
<img
|
||||
src={thumb || url}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
onClick={onPreview}
|
||||
onError={() => setError(true)}
|
||||
/>
|
||||
<div className={`media-item ${error ? 'error' : ''}`}>
|
||||
{!error ? (
|
||||
<img
|
||||
src={thumb || url}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
onClick={onPreview}
|
||||
onError={() => setError(true)}
|
||||
/>
|
||||
) : (
|
||||
<div className="media-error-placeholder" onClick={onPreview}>
|
||||
<ImageIcon size={24} style={{ opacity: 0.3 }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -57,32 +56,102 @@ export default function SnsPage() {
|
||||
// 筛选与搜索状态
|
||||
const [searchKeyword, setSearchKeyword] = useState('')
|
||||
const [selectedUsernames, setSelectedUsernames] = useState<string[]>([])
|
||||
const [startDate, setStartDate] = useState('')
|
||||
const [endDate, setEndDate] = useState('')
|
||||
const [isSidebarOpen, setIsSidebarOpen] = useState(true)
|
||||
|
||||
// 联系人列表状态
|
||||
const [contacts, setContacts] = useState<Contact[]>([])
|
||||
const [contactSearch, setContactSearch] = useState('')
|
||||
const [contactsLoading, setContactsLoading] = useState(false)
|
||||
const [showJumpDialog, setShowJumpDialog] = useState(false)
|
||||
const [jumpTargetDate, setJumpTargetDate] = useState<Date | undefined>(undefined)
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null)
|
||||
|
||||
const loadPosts = useCallback(async (reset = false) => {
|
||||
const postsContainerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const [hasNewer, setHasNewer] = useState(false)
|
||||
const [loadingNewer, setLoadingNewer] = useState(false)
|
||||
const postsRef = useRef<SnsPost[]>([])
|
||||
const scrollAdjustmentRef = useRef<number>(0)
|
||||
|
||||
// 同步 posts 到 ref 供 loadPosts 使用
|
||||
useEffect(() => {
|
||||
postsRef.current = posts
|
||||
}, [posts])
|
||||
|
||||
// 处理向上加载动态时的滚动位置保持
|
||||
useEffect(() => {
|
||||
if (scrollAdjustmentRef.current !== 0 && postsContainerRef.current) {
|
||||
const container = postsContainerRef.current;
|
||||
const newHeight = container.scrollHeight;
|
||||
const diff = newHeight - scrollAdjustmentRef.current;
|
||||
if (diff > 0) {
|
||||
container.scrollTop += diff;
|
||||
}
|
||||
scrollAdjustmentRef.current = 0;
|
||||
}
|
||||
}, [posts])
|
||||
|
||||
const loadPosts = useCallback(async (options: { reset?: boolean, direction?: 'older' | 'newer' } = {}) => {
|
||||
const { reset = false, direction = 'older' } = options
|
||||
if (loadingRef.current) return
|
||||
|
||||
loadingRef.current = true
|
||||
setLoading(true)
|
||||
if (direction === 'newer') setLoadingNewer(true)
|
||||
else setLoading(true)
|
||||
|
||||
try {
|
||||
const currentOffset = reset ? 0 : offset
|
||||
const limit = 20
|
||||
let startTs: number | undefined = undefined
|
||||
let endTs: number | undefined = undefined
|
||||
|
||||
// 转换日期为秒级时间戳
|
||||
const startTs = startDate ? Math.floor(new Date(startDate).getTime() / 1000) : undefined
|
||||
const endTs = endDate ? Math.floor(new Date(endDate).getTime() / 1000) + 86399 : undefined // 包含当天
|
||||
if (reset) {
|
||||
if (jumpTargetDate) {
|
||||
endTs = Math.floor(jumpTargetDate.getTime() / 1000) + 86399
|
||||
}
|
||||
} else if (direction === 'newer') {
|
||||
const currentPosts = postsRef.current
|
||||
if (currentPosts.length > 0) {
|
||||
const topTs = currentPosts[0].createTime
|
||||
console.log('[SnsPage] Fetching newer posts starts from:', topTs + 1);
|
||||
|
||||
const result = await window.electronAPI.sns.getTimeline(
|
||||
limit,
|
||||
0,
|
||||
selectedUsernames,
|
||||
searchKeyword,
|
||||
topTs + 1,
|
||||
undefined
|
||||
);
|
||||
|
||||
if (result.success && result.timeline && result.timeline.length > 0) {
|
||||
if (postsContainerRef.current) {
|
||||
scrollAdjustmentRef.current = postsContainerRef.current.scrollHeight;
|
||||
}
|
||||
|
||||
const existingIds = new Set(currentPosts.map(p => p.id));
|
||||
const uniqueNewer = result.timeline.filter(p => !existingIds.has(p.id));
|
||||
|
||||
if (uniqueNewer.length > 0) {
|
||||
setPosts(prev => [...uniqueNewer, ...prev]);
|
||||
}
|
||||
setHasNewer(result.timeline.length >= limit);
|
||||
} else {
|
||||
setHasNewer(false);
|
||||
}
|
||||
}
|
||||
setLoadingNewer(false);
|
||||
loadingRef.current = false;
|
||||
return;
|
||||
} else {
|
||||
const currentPosts = postsRef.current
|
||||
if (currentPosts.length > 0) {
|
||||
endTs = currentPosts[currentPosts.length - 1].createTime - 1
|
||||
}
|
||||
}
|
||||
|
||||
const result = await window.electronAPI.sns.getTimeline(
|
||||
limit,
|
||||
currentOffset,
|
||||
0,
|
||||
selectedUsernames,
|
||||
searchKeyword,
|
||||
startTs,
|
||||
@@ -92,11 +161,24 @@ export default function SnsPage() {
|
||||
if (result.success && result.timeline) {
|
||||
if (reset) {
|
||||
setPosts(result.timeline)
|
||||
setOffset(limit)
|
||||
setHasMore(result.timeline.length >= limit)
|
||||
|
||||
// 探测上方是否还有新动态（利用 DLL 过滤，而非底层 SQL）
|
||||
const topTs = result.timeline[0]?.createTime || 0;
|
||||
if (topTs > 0) {
|
||||
const checkResult = await window.electronAPI.sns.getTimeline(1, 0, selectedUsernames, searchKeyword, topTs + 1, undefined);
|
||||
setHasNewer(!!(checkResult.success && checkResult.timeline && checkResult.timeline.length > 0));
|
||||
} else {
|
||||
setHasNewer(false);
|
||||
}
|
||||
|
||||
if (postsContainerRef.current) {
|
||||
postsContainerRef.current.scrollTop = 0
|
||||
}
|
||||
} else {
|
||||
setPosts(prev => [...prev, ...result.timeline!])
|
||||
setOffset(prev => prev + limit)
|
||||
if (result.timeline.length > 0) {
|
||||
setPosts(prev => [...prev, ...result.timeline!])
|
||||
}
|
||||
if (result.timeline.length < limit) {
|
||||
setHasMore(false)
|
||||
}
|
||||
@@ -106,9 +188,10 @@ export default function SnsPage() {
|
||||
console.error('Failed to load SNS timeline:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoadingNewer(false)
|
||||
loadingRef.current = false
|
||||
}
|
||||
}, [offset, selectedUsernames, searchKeyword, startDate, endDate])
|
||||
}, [selectedUsernames, searchKeyword, jumpTargetDate])
|
||||
|
||||
// 获取联系人列表
|
||||
const loadContacts = async () => {
|
||||
@@ -116,30 +199,14 @@ export default function SnsPage() {
|
||||
try {
|
||||
const result = await window.electronAPI.chat.getSessions()
|
||||
if (result.success && result.sessions) {
|
||||
// 系统账号和特殊前缀
|
||||
const systemAccounts = ['filehelper', 'fmessage', 'newsapp', 'weixin', 'qqmail', 'tmessage', 'floatbottle', 'medianote', 'brandsessionholder'];
|
||||
|
||||
// 初步提取并过滤联系人
|
||||
const initialContacts = result.sessions
|
||||
.filter((s: any) => {
|
||||
if (!s.username) return false;
|
||||
const u = s.username.toLowerCase();
|
||||
|
||||
// 1. 排除群聊 (WeChat 群组以 @chatroom 结尾)
|
||||
if (u.includes('@chatroom') || u.endsWith('@chatroom') || u.endsWith('@openim')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 2. 排除公众号 (通常以 gh_ 开头)
|
||||
if (u.startsWith('gh_')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 3. 排除系统账号
|
||||
if (systemAccounts.includes(u) || u.includes('helper') || u.includes('sessionholder')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (u.includes('@chatroom') || u.endsWith('@chatroom') || u.endsWith('@openim')) return false;
|
||||
if (u.startsWith('gh_')) return false;
|
||||
if (systemAccounts.includes(u) || u.includes('helper') || u.includes('sessionholder')) return false;
|
||||
return true;
|
||||
})
|
||||
.map((s: any) => ({
|
||||
@@ -149,7 +216,6 @@ export default function SnsPage() {
|
||||
}))
|
||||
setContacts(initialContacts)
|
||||
|
||||
// 异步进一步富化（获取更多准确的昵称和头像）
|
||||
const usernames = initialContacts.map(c => c.username)
|
||||
const enriched = await window.electronAPI.chat.enrichSessionsContactInfo(usernames)
|
||||
if (enriched.success && enriched.contacts) {
|
||||
@@ -173,18 +239,52 @@ export default function SnsPage() {
|
||||
}
|
||||
}
|
||||
|
||||
// 初始加载
|
||||
useEffect(() => {
|
||||
const checkSchema = async () => {
|
||||
try {
|
||||
const schema = await window.electronAPI.chat.execQuery('sns', null, "PRAGMA table_info(SnsTimeLine)");
|
||||
console.log('[SnsPage] SnsTimeLine Schema:', schema);
|
||||
if (schema.success && schema.rows) {
|
||||
const columns = schema.rows.map((r: any) => r.name);
|
||||
console.log('[SnsPage] Available columns:', columns);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[SnsPage] Failed to check schema:', e);
|
||||
}
|
||||
};
|
||||
checkSchema();
|
||||
loadContacts()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadPosts(true)
|
||||
}, [selectedUsernames, searchKeyword, startDate, endDate])
|
||||
loadPosts({ reset: true })
|
||||
}, [selectedUsernames, searchKeyword, jumpTargetDate])
|
||||
|
||||
const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
|
||||
const { scrollTop, clientHeight, scrollHeight } = e.currentTarget
|
||||
if (scrollHeight - scrollTop - clientHeight < 200 && hasMore && !loading) {
|
||||
loadPosts()
|
||||
|
||||
// 加载更旧的动态（触底）
|
||||
if (scrollHeight - scrollTop - clientHeight < 400 && hasMore && !loading && !loadingNewer) {
|
||||
loadPosts({ direction: 'older' })
|
||||
}
|
||||
|
||||
// 加载更新的动态（触顶触发）
|
||||
// 这里的阈值可以保留，但主要依赖下面的 handleWheel 捕获到顶后的上划
|
||||
if (scrollTop < 10 && hasNewer && !loading && !loadingNewer) {
|
||||
loadPosts({ direction: 'newer' })
|
||||
}
|
||||
}
|
||||
|
||||
// 处理到顶后的手动上滚意图
|
||||
const handleWheel = (e: React.WheelEvent<HTMLDivElement>) => {
|
||||
const container = postsContainerRef.current
|
||||
if (!container) return
|
||||
|
||||
// deltaY < 0 表示向上滚，scrollTop === 0 表示已经在最顶端
|
||||
if (e.deltaY < -20 && container.scrollTop <= 0 && hasNewer && !loading && !loadingNewer) {
|
||||
console.log('[SnsPage] Wheel-up detected at top, loading newer posts...');
|
||||
loadPosts({ direction: 'newer' })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -202,6 +302,11 @@ export default function SnsPage() {
|
||||
}
|
||||
|
||||
const toggleUserSelection = (username: string) => {
|
||||
// 选择联系人时，如果当前有时间跳转，建议清除时间跳转以避免“跳到旧动态”的困惑
|
||||
// 或者保持原样。根据用户反馈“乱跳”，我们在这里选择：
|
||||
// 如果用户选择了新的一个人，而之前有时间跳转，我们重置时间跳转到最新。
|
||||
setJumpTargetDate(undefined);
|
||||
|
||||
setSelectedUsernames(prev => {
|
||||
if (prev.includes(username)) {
|
||||
return prev.filter(u => u !== username)
|
||||
@@ -214,8 +319,7 @@ export default function SnsPage() {
|
||||
const clearFilters = () => {
|
||||
setSearchKeyword('')
|
||||
setSelectedUsernames([])
|
||||
setStartDate('')
|
||||
setEndDate('')
|
||||
setJumpTargetDate(undefined)
|
||||
}
|
||||
|
||||
const filteredContacts = contacts.filter(c =>
|
||||
@@ -223,89 +327,122 @@ export default function SnsPage() {
|
||||
c.username.toLowerCase().includes(contactSearch.toLowerCase())
|
||||
)
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="sns-page">
|
||||
<div className="sns-container">
|
||||
{/* 侧边栏：过滤与搜索 */}
|
||||
<aside className={`sns-sidebar ${isSidebarOpen ? 'open' : 'closed'}`}>
|
||||
<div className="sidebar-header">
|
||||
<h3>朋友圈筛选</h3>
|
||||
<div className="title-wrapper">
|
||||
<Filter size={18} className="title-icon" />
|
||||
<h3>筛选条件</h3>
|
||||
</div>
|
||||
<button className="toggle-btn" onClick={() => setIsSidebarOpen(false)}>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="filter-content">
|
||||
{/* 关键词与时间 */}
|
||||
<div className="filter-group">
|
||||
<div className="filter-content custom-scrollbar">
|
||||
{/* 1. 搜索分组 (放到最顶上) */}
|
||||
<div className="filter-card">
|
||||
<div className="filter-section">
|
||||
<label><Search size={14} /> 关键词内容</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索正文..."
|
||||
value={searchKeyword}
|
||||
onChange={e => setSearchKeyword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="filter-section">
|
||||
<label><Calendar size={14} /> 时间范围</label>
|
||||
<div className="date-inputs">
|
||||
<label><Search size={14} /> 关键词搜索</label>
|
||||
<div className="search-input-wrapper">
|
||||
<Search size={14} className="input-icon" />
|
||||
<input
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={e => setStartDate(e.target.value)}
|
||||
/>
|
||||
<span>至</span>
|
||||
<input
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={e => setEndDate(e.target.value)}
|
||||
type="text"
|
||||
placeholder="搜索动态内容..."
|
||||
value={searchKeyword}
|
||||
onChange={e => setSearchKeyword(e.target.value)}
|
||||
/>
|
||||
{searchKeyword && (
|
||||
<button className="clear-input" onClick={() => setSearchKeyword('')}>
|
||||
<X size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 联系人列表 */}
|
||||
<div className="contact-filter-section">
|
||||
<div className="section-header">
|
||||
<label><User size={14} /> 联系人筛选</label>
|
||||
{selectedUsernames.length > 0 && (
|
||||
<span className="selected-count">已选 {selectedUsernames.length}</span>
|
||||
{/* 2. 日期跳转 (放搜索下面) */}
|
||||
<div className="filter-card jump-date-card">
|
||||
<div className="filter-section">
|
||||
<label><Calendar size={14} /> 时间跳转</label>
|
||||
<button className={`jump-date-btn ${jumpTargetDate ? 'active' : ''}`} onClick={() => setShowJumpDialog(true)}>
|
||||
<span className="text">
|
||||
{jumpTargetDate ? jumpTargetDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' }) : '选择跳转日期...'}
|
||||
</span>
|
||||
<Calendar size={14} className="icon" />
|
||||
</button>
|
||||
{jumpTargetDate && (
|
||||
<button className="clear-jump-date-inline" onClick={() => setJumpTargetDate(undefined)}>
|
||||
返回最新动态
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="contact-search">
|
||||
<Search size={12} className="search-icon" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索好友..."
|
||||
value={contactSearch}
|
||||
onChange={e => setContactSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="contact-list custom-scrollbar">
|
||||
{filteredContacts.map(contact => (
|
||||
<div
|
||||
key={contact.username}
|
||||
className={`contact-item ${selectedUsernames.includes(contact.username) ? 'active' : ''}`}
|
||||
onClick={() => toggleUserSelection(contact.username)}
|
||||
>
|
||||
<Avatar src={contact.avatarUrl} name={contact.displayName} size={28} shape="rounded" />
|
||||
<span className="contact-name">{contact.displayName}</span>
|
||||
{selectedUsernames.includes(contact.username) && (
|
||||
<div className="check-mark">✓</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 3. 联系人筛选 (放最下面，高度自适应) */}
|
||||
<div className="filter-card contact-card">
|
||||
<div className="contact-filter-section">
|
||||
<div className="section-header">
|
||||
<label><User size={14} /> 联系人</label>
|
||||
<div className="header-actions">
|
||||
{selectedUsernames.length > 0 && (
|
||||
<button className="clear-selection-btn" onClick={() => setSelectedUsernames([])}>清除</button>
|
||||
)}
|
||||
{selectedUsernames.length > 0 && (
|
||||
<span className="selected-count">{selectedUsernames.length}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{contacts.length === 0 && !contactsLoading && (
|
||||
<div className="empty-contacts">无可显示联系人</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="contact-search">
|
||||
<Search size={12} className="search-icon" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索好友..."
|
||||
value={contactSearch}
|
||||
onChange={e => setContactSearch(e.target.value)}
|
||||
/>
|
||||
{contactSearch && (
|
||||
<X size={12} className="clear-search-icon" onClick={() => setContactSearch('')} />
|
||||
)}
|
||||
</div>
|
||||
<div className="contact-list custom-scrollbar">
|
||||
{filteredContacts.map(contact => (
|
||||
<div
|
||||
key={contact.username}
|
||||
className={`contact-item ${selectedUsernames.includes(contact.username) ? 'active' : ''}`}
|
||||
onClick={() => toggleUserSelection(contact.username)}
|
||||
>
|
||||
<div className="avatar-wrapper">
|
||||
<Avatar src={contact.avatarUrl} name={contact.displayName} size={32} shape="rounded" />
|
||||
{selectedUsernames.includes(contact.username) && (
|
||||
<div className="active-badge"></div>
|
||||
)}
|
||||
</div>
|
||||
<span className="contact-name">{contact.displayName}</span>
|
||||
<div className="check-box">
|
||||
{selectedUsernames.includes(contact.username) && <div className="inner-check"></div>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{filteredContacts.length === 0 && (
|
||||
<div className="empty-contacts">无可显示联系人</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sidebar-footer">
|
||||
<button className="clear-btn" onClick={clearFilters}>清除全部筛选</button>
|
||||
<button className="clear-btn" onClick={clearFilters}>
|
||||
<RefreshCw size={14} />
|
||||
重置所有筛选
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -313,109 +450,146 @@ export default function SnsPage() {
|
||||
<div className="sns-header">
|
||||
<div className="header-left">
|
||||
{!isSidebarOpen && (
|
||||
<button className="icon-btn" onClick={() => setIsSidebarOpen(true)}>
|
||||
<button className="icon-btn sidebar-trigger" onClick={() => setIsSidebarOpen(true)}>
|
||||
<Filter size={20} />
|
||||
</button>
|
||||
)}
|
||||
<h2>朋友圈</h2>
|
||||
<h2>社交动态</h2>
|
||||
</div>
|
||||
<div className="header-right">
|
||||
<button onClick={() => loadPosts(true)} disabled={loading} className="icon-btn refresh-btn">
|
||||
<RefreshCw size={18} className={loading ? 'spinning' : ''} />
|
||||
<button
|
||||
onClick={() => {
|
||||
if (jumpTargetDate) setJumpTargetDate(undefined);
|
||||
loadPosts({ reset: true });
|
||||
}}
|
||||
disabled={loading || loadingNewer}
|
||||
className="icon-btn refresh-btn"
|
||||
>
|
||||
<RefreshCw size={18} className={(loading || loadingNewer) ? 'spinning' : ''} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sns-content" onScroll={handleScroll}>
|
||||
{selectedUsernames.length > 0 && (
|
||||
<div className="active-filters">
|
||||
<span>筛选中: {selectedUsernames.length} 位好友</span>
|
||||
<button onClick={() => setSelectedUsernames([])} className="clear-chip-btn">清除</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{posts.map(post => (
|
||||
<div key={post.id} className="sns-post">
|
||||
<div className="post-header">
|
||||
<Avatar
|
||||
src={post.avatarUrl}
|
||||
name={post.nickname}
|
||||
size={44}
|
||||
shape="rounded"
|
||||
/>
|
||||
<div className="post-info">
|
||||
<div className="nickname">{post.nickname}</div>
|
||||
<div className="time">{formatTime(post.createTime)}</div>
|
||||
<div className="sns-content-wrapper">
|
||||
<div className="sns-content custom-scrollbar" onScroll={handleScroll} onWheel={handleWheel} ref={postsContainerRef}>
|
||||
<div className="posts-list">
|
||||
{loadingNewer && (
|
||||
<div className="status-indicator loading-newer">
|
||||
<RefreshCw size={16} className="spinning" />
|
||||
<span>正在检查更新的动态...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!loadingNewer && hasNewer && (
|
||||
<div className="status-indicator newer-hint" onClick={() => loadPosts({ direction: 'newer' })}>
|
||||
查看更新的动态
|
||||
</div>
|
||||
)}
|
||||
{posts.map((post, index) => {
|
||||
return (
|
||||
<div key={post.id} className="sns-post-row">
|
||||
<div className="sns-post-wrapper">
|
||||
<div className="sns-post">
|
||||
<div className="post-header">
|
||||
<Avatar
|
||||
src={post.avatarUrl}
|
||||
name={post.nickname}
|
||||
size={44}
|
||||
shape="rounded"
|
||||
/>
|
||||
<div className="post-info">
|
||||
<div className="nickname">{post.nickname}</div>
|
||||
<div className="time">{formatTime(post.createTime)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="post-body">
|
||||
{post.contentDesc && <div className="post-text">{post.contentDesc}</div>}
|
||||
<div className="post-body">
|
||||
{post.contentDesc && <div className="post-text">{post.contentDesc}</div>}
|
||||
|
||||
{post.type === 15 ? (
|
||||
<div className="post-video-placeholder">
|
||||
[视频]
|
||||
</div>
|
||||
) : post.media.length > 0 && (
|
||||
<div className={`post-media-grid media-count-${Math.min(post.media.length, 9)}`}>
|
||||
{post.media.map((m, idx) => (
|
||||
<MediaItem key={idx} url={m.url} thumb={m.thumb} onPreview={() => setPreviewImage(m.url)} />
|
||||
))}
|
||||
{post.type === 15 ? (
|
||||
<div className="post-video-placeholder">
|
||||
<Play size={20} />
|
||||
<span>视频动态</span>
|
||||
</div>
|
||||
) : post.media.length > 0 && (
|
||||
<div className={`post-media-grid media-count-${Math.min(post.media.length, 9)}`}>
|
||||
{post.media.map((m, idx) => (
|
||||
<MediaItem key={idx} url={m.url} thumb={m.thumb} onPreview={() => setPreviewImage(m.url)} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(post.likes.length > 0 || post.comments.length > 0) && (
|
||||
<div className="post-footer">
|
||||
{post.likes.length > 0 && (
|
||||
<div className="likes-section">
|
||||
<Heart size={14} className="icon" />
|
||||
<span className="likes-list">
|
||||
{post.likes.join('、')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{post.comments.length > 0 && (
|
||||
<div className="comments-section">
|
||||
{post.comments.map((c, idx) => (
|
||||
<div key={idx} className="comment-item">
|
||||
<span className="comment-user">{c.nickname}</span>
|
||||
{c.refNickname && (
|
||||
<>
|
||||
<span className="reply-text">回复</span>
|
||||
<span className="comment-user">{c.refNickname}</span>
|
||||
</>
|
||||
)}
|
||||
<span className="comment-separator">: </span>
|
||||
<span className="comment-content">{c.content}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{loading && <div className="status-indicator loading-more">
|
||||
<RefreshCw size={16} className="spinning" />
|
||||
<span>正在加载更多...</span>
|
||||
</div>}
|
||||
{!hasMore && posts.length > 0 && <div className="status-indicator no-more">已经到底啦</div>}
|
||||
{!loading && posts.length === 0 && (
|
||||
<div className="no-results">
|
||||
<div className="no-results-icon"><Search size={48} /></div>
|
||||
<p>未找到相关动态</p>
|
||||
{(selectedUsernames.length > 0 || searchKeyword) && (
|
||||
<button onClick={clearFilters} className="reset-inline">
|
||||
重置搜索条件
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(post.likes.length > 0 || post.comments.length > 0) && (
|
||||
<div className="post-footer">
|
||||
{post.likes.length > 0 && (
|
||||
<div className="likes-section">
|
||||
<Heart size={14} className="icon" />
|
||||
<span className="likes-list">
|
||||
{post.likes.join('、')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{post.comments.length > 0 && (
|
||||
<div className="comments-section">
|
||||
{post.comments.map((c, idx) => (
|
||||
<div key={idx} className="comment-item">
|
||||
<span className="comment-user">{c.nickname}</span>
|
||||
{c.refNickname && (
|
||||
<>
|
||||
<span className="reply-text">回复</span>
|
||||
<span className="comment-user">{c.refNickname}</span>
|
||||
</>
|
||||
)}
|
||||
<span className="comment-separator">: </span>
|
||||
<span className="comment-content">{c.content}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{loading && <div className="loading-more">加载中...</div>}
|
||||
{!hasMore && posts.length > 0 && <div className="no-more">没有更多了</div>}
|
||||
{!loading && posts.length === 0 && (
|
||||
<div className="no-results">
|
||||
<p>没有找到符合条件的朋友圈</p>
|
||||
{selectedUsernames.length > 0 && (
|
||||
<button onClick={() => setSelectedUsernames([])} className="reset-inline">
|
||||
清除人员筛选
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{previewImage && (
|
||||
<ImagePreview src={previewImage} onClose={() => setPreviewImage(null)} />
|
||||
)}
|
||||
<JumpToDateDialog
|
||||
isOpen={showJumpDialog}
|
||||
onClose={() => {
|
||||
setShowJumpDialog(false)
|
||||
}}
|
||||
onSelect={(date) => {
|
||||
setJumpTargetDate(date)
|
||||
setShowJumpDialog(false)
|
||||
}}
|
||||
currentDate={jumpTargetDate || new Date()}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Vendored
+1
@@ -100,6 +100,7 @@ export interface ElectronAPI {
|
||||
resolveVoiceCache: (sessionId: string, msgId: string) => Promise<{ success: boolean; hasCache: boolean; data?: string }>
|
||||
getVoiceTranscript: (sessionId: string, msgId: string, createTime?: number) => Promise<{ success: boolean; transcript?: string; error?: string }>
|
||||
onVoiceTranscriptPartial: (callback: (payload: { msgId: string; text: string }) => void) => () => void
|
||||
execQuery: (kind: string, path: string | null, sql: string) => Promise<{ success: boolean; rows?: any[]; error?: string }>
|
||||
}
|
||||
|
||||
image: {
|
||||
|
||||
Reference in new issue
Block a user