更新朋友圈样式
This commit is contained in:
cc committed
1 parent
587ee630d7
commit
6d74eb65ae
6 files changed
+1676
-2119
No files matched your search
@@ -0,0 +1,185 @@
|
|||||||
|
import React, { useState } from 'react'
|
||||||
|
import { Search, Calendar, User, X, Filter, Check } from 'lucide-react'
|
||||||
|
import { Avatar } from '../Avatar'
|
||||||
|
// import JumpToDateDialog from '../JumpToDateDialog' // Assuming this is imported from parent or moved
|
||||||
|
|
||||||
|
interface Contact {
|
||||||
|
username: string
|
||||||
|
displayName: string
|
||||||
|
avatarUrl?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SnsFilterPanelProps {
|
||||||
|
searchKeyword: string
|
||||||
|
setSearchKeyword: (val: string) => void
|
||||||
|
jumpTargetDate?: Date
|
||||||
|
setJumpTargetDate: (date?: Date) => void
|
||||||
|
onOpenJumpDialog: () => void
|
||||||
|
selectedUsernames: string[]
|
||||||
|
setSelectedUsernames: (val: string[]) => void
|
||||||
|
contacts: Contact[]
|
||||||
|
contactSearch: string
|
||||||
|
setContactSearch: (val: string) => void
|
||||||
|
loading?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
|
||||||
|
searchKeyword,
|
||||||
|
setSearchKeyword,
|
||||||
|
jumpTargetDate,
|
||||||
|
setJumpTargetDate,
|
||||||
|
onOpenJumpDialog,
|
||||||
|
selectedUsernames,
|
||||||
|
setSelectedUsernames,
|
||||||
|
contacts,
|
||||||
|
contactSearch,
|
||||||
|
setContactSearch,
|
||||||
|
loading
|
||||||
|
}) => {
|
||||||
|
|
||||||
|
const filteredContacts = contacts.filter(c =>
|
||||||
|
c.displayName.toLowerCase().includes(contactSearch.toLowerCase()) ||
|
||||||
|
c.username.toLowerCase().includes(contactSearch.toLowerCase())
|
||||||
|
)
|
||||||
|
|
||||||
|
const toggleUserSelection = (username: string) => {
|
||||||
|
if (selectedUsernames.includes(username)) {
|
||||||
|
setSelectedUsernames(selectedUsernames.filter(u => u !== username))
|
||||||
|
} else {
|
||||||
|
setJumpTargetDate(undefined) // Reset date jump when selecting user
|
||||||
|
setSelectedUsernames([...selectedUsernames, username])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearFilters = () => {
|
||||||
|
setSearchKeyword('')
|
||||||
|
setSelectedUsernames([])
|
||||||
|
setJumpTargetDate(undefined)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside className="sns-filter-panel">
|
||||||
|
<div className="filter-header">
|
||||||
|
<h3>筛选条件</h3>
|
||||||
|
{(searchKeyword || jumpTargetDate || selectedUsernames.length > 0) && (
|
||||||
|
<button className="reset-all-btn" onClick={clearFilters} title="重置所有筛选">
|
||||||
|
<RefreshCw size={14} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="filter-widgets">
|
||||||
|
{/* Search Widget */}
|
||||||
|
<div className="filter-widget search-widget">
|
||||||
|
<div className="widget-header">
|
||||||
|
<Search size={14} />
|
||||||
|
<span>关键词搜索</span>
|
||||||
|
</div>
|
||||||
|
<div className="input-group">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="搜索动态内容..."
|
||||||
|
value={searchKeyword}
|
||||||
|
onChange={e => setSearchKeyword(e.target.value)}
|
||||||
|
/>
|
||||||
|
{searchKeyword && (
|
||||||
|
<button className="clear-input-btn" onClick={() => setSearchKeyword('')}>
|
||||||
|
<X size={14} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Date Widget */}
|
||||||
|
<div className="filter-widget date-widget">
|
||||||
|
<div className="widget-header">
|
||||||
|
<Calendar size={14} />
|
||||||
|
<span>时间跳转</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className={`date-picker-trigger ${jumpTargetDate ? 'active' : ''}`}
|
||||||
|
onClick={onOpenJumpDialog}
|
||||||
|
>
|
||||||
|
<span className="date-text">
|
||||||
|
{jumpTargetDate
|
||||||
|
? jumpTargetDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
|
||||||
|
: '选择日期...'}
|
||||||
|
</span>
|
||||||
|
{jumpTargetDate && (
|
||||||
|
<div
|
||||||
|
className="clear-date-btn"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
setJumpTargetDate(undefined)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<X size={12} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Widget */}
|
||||||
|
<div className="filter-widget contact-widget">
|
||||||
|
<div className="widget-header">
|
||||||
|
<User size={14} />
|
||||||
|
<span>联系人</span>
|
||||||
|
{selectedUsernames.length > 0 && (
|
||||||
|
<span className="badge">{selectedUsernames.length}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="contact-search-bar">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="查找好友..."
|
||||||
|
value={contactSearch}
|
||||||
|
onChange={e => setContactSearch(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Search size={14} className="search-icon" />
|
||||||
|
{contactSearch && (
|
||||||
|
<X size={14} className="clear-icon" onClick={() => setContactSearch('')} style={{ right: 8, top: 8, position: 'absolute', cursor: 'pointer', color: 'var(--text-tertiary)' }} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="contact-list-scroll">
|
||||||
|
{filteredContacts.map(contact => (
|
||||||
|
<div
|
||||||
|
key={contact.username}
|
||||||
|
className={`contact-row ${selectedUsernames.includes(contact.username) ? 'selected' : ''}`}
|
||||||
|
onClick={() => toggleUserSelection(contact.username)}
|
||||||
|
>
|
||||||
|
<Avatar src={contact.avatarUrl} name={contact.displayName} size={36} shape="rounded" />
|
||||||
|
<span className="contact-name">{contact.displayName}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{filteredContacts.length === 0 && (
|
||||||
|
<div className="empty-state">没有找到联系人</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function RefreshCw({ size, className }: { size?: number, className?: string }) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={size || 24}
|
||||||
|
height={size || 24}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
className={className}
|
||||||
|
>
|
||||||
|
<path d="M23 4v6h-6"></path>
|
||||||
|
<path d="M1 20v-6h6"></path>
|
||||||
|
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,327 @@
|
|||||||
|
import React, { useState } from 'react'
|
||||||
|
import { Play, Lock, Download } from 'lucide-react'
|
||||||
|
import { LivePhotoIcon } from '../../components/LivePhotoIcon'
|
||||||
|
import { RefreshCw } from 'lucide-react'
|
||||||
|
|
||||||
|
interface SnsMedia {
|
||||||
|
url: string
|
||||||
|
thumb: string
|
||||||
|
md5?: string
|
||||||
|
token?: string
|
||||||
|
key?: string
|
||||||
|
encIdx?: string
|
||||||
|
livePhoto?: {
|
||||||
|
url: string
|
||||||
|
thumb: string
|
||||||
|
token?: string
|
||||||
|
key?: string
|
||||||
|
encIdx?: string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SnsMediaGridProps {
|
||||||
|
mediaList: SnsMedia[]
|
||||||
|
onPreview: (src: string, isVideo?: boolean, liveVideoPath?: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const isSnsVideoUrl = (url?: string): boolean => {
|
||||||
|
if (!url) return false
|
||||||
|
const lower = url.toLowerCase()
|
||||||
|
return (lower.includes('snsvideodownload') || lower.includes('.mp4') || lower.includes('video')) && !lower.includes('vweixinthumb')
|
||||||
|
}
|
||||||
|
|
||||||
|
const extractVideoFrame = async (videoPath: string): Promise<string> => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const video = document.createElement('video')
|
||||||
|
video.preload = 'auto'
|
||||||
|
video.src = videoPath
|
||||||
|
video.muted = true
|
||||||
|
video.currentTime = 0 // Initial reset
|
||||||
|
// video.crossOrigin = 'anonymous' // Not needed for file:// usually
|
||||||
|
|
||||||
|
const onSeeked = () => {
|
||||||
|
try {
|
||||||
|
const canvas = document.createElement('canvas')
|
||||||
|
canvas.width = video.videoWidth
|
||||||
|
canvas.height = video.videoHeight
|
||||||
|
const ctx = canvas.getContext('2d')
|
||||||
|
if (ctx) {
|
||||||
|
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
|
||||||
|
const dataUrl = canvas.toDataURL('image/jpeg', 0.8)
|
||||||
|
resolve(dataUrl)
|
||||||
|
} else {
|
||||||
|
reject(new Error('Canvas context failed'))
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
reject(e)
|
||||||
|
} finally {
|
||||||
|
// Cleanup
|
||||||
|
video.removeEventListener('seeked', onSeeked)
|
||||||
|
video.src = ''
|
||||||
|
video.load()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
video.onloadedmetadata = () => {
|
||||||
|
if (video.duration === Infinity || isNaN(video.duration)) {
|
||||||
|
// Determine duration failed, try a fixed small offset
|
||||||
|
video.currentTime = 1
|
||||||
|
} else {
|
||||||
|
video.currentTime = Math.max(0.1, video.duration / 2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
video.onseeked = onSeeked
|
||||||
|
|
||||||
|
video.onerror = (e) => {
|
||||||
|
reject(new Error('Video load failed'))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const MediaItem = ({ media, onPreview }: { media: SnsMedia; onPreview: (src: string, isVideo?: boolean, liveVideoPath?: string) => void }) => {
|
||||||
|
const [error, setError] = useState(false)
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [thumbSrc, setThumbSrc] = useState<string>('')
|
||||||
|
const [videoPath, setVideoPath] = useState<string>('')
|
||||||
|
const [liveVideoPath, setLiveVideoPath] = useState<string>('')
|
||||||
|
const [isDecrypting, setIsDecrypting] = useState(false)
|
||||||
|
const [isGeneratingCover, setIsGeneratingCover] = useState(false)
|
||||||
|
|
||||||
|
const isVideo = isSnsVideoUrl(media.url)
|
||||||
|
const isLive = !!media.livePhoto
|
||||||
|
const targetUrl = media.thumb || media.url
|
||||||
|
|
||||||
|
// Simple effect to load image/decrypt
|
||||||
|
// Simple effect to load image/decrypt
|
||||||
|
React.useEffect(() => {
|
||||||
|
let cancelled = false
|
||||||
|
setLoading(true)
|
||||||
|
|
||||||
|
const load = async () => {
|
||||||
|
try {
|
||||||
|
if (!isVideo) {
|
||||||
|
// For images, we proxy to get the local path/base64
|
||||||
|
const result = await window.electronAPI.sns.proxyImage({
|
||||||
|
url: targetUrl,
|
||||||
|
key: media.key
|
||||||
|
})
|
||||||
|
if (cancelled) return
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
if (result.dataUrl) setThumbSrc(result.dataUrl)
|
||||||
|
else if (result.videoPath) setThumbSrc(`file://${result.videoPath.replace(/\\/g, '/')}`)
|
||||||
|
} else {
|
||||||
|
setThumbSrc(targetUrl)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pre-load live photo video if needed
|
||||||
|
if (isLive && media.livePhoto?.url) {
|
||||||
|
window.electronAPI.sns.proxyImage({
|
||||||
|
url: media.livePhoto.url,
|
||||||
|
key: media.livePhoto.key || media.key
|
||||||
|
}).then((res: any) => {
|
||||||
|
if (!cancelled && res.success && res.videoPath) {
|
||||||
|
setLiveVideoPath(`file://${res.videoPath.replace(/\\/g, '/')}`)
|
||||||
|
}
|
||||||
|
}).catch(() => { })
|
||||||
|
}
|
||||||
|
setLoading(false)
|
||||||
|
} else {
|
||||||
|
// Video logic: Decrypt -> Extract Frame
|
||||||
|
setIsGeneratingCover(true)
|
||||||
|
|
||||||
|
// First check if we already have it decryptable?
|
||||||
|
// Usually we need to call proxyImage with the video URL to decrypt it to cache
|
||||||
|
const result = await window.electronAPI.sns.proxyImage({
|
||||||
|
url: media.url,
|
||||||
|
key: media.key
|
||||||
|
})
|
||||||
|
|
||||||
|
if (cancelled) return
|
||||||
|
|
||||||
|
if (result.success && result.videoPath) {
|
||||||
|
const localPath = `file://${result.videoPath.replace(/\\/g, '/')}`
|
||||||
|
setVideoPath(localPath)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const coverDataUrl = await extractVideoFrame(localPath)
|
||||||
|
if (!cancelled) setThumbSrc(coverDataUrl)
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Frame extraction failed', err)
|
||||||
|
// Fallback to video path if extraction fails, though it might be black
|
||||||
|
// Only set thumbSrc if extraction fails, so we don't override the generated one
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.error('Video decryption for cover failed')
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsGeneratingCover(false)
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
if (!cancelled) {
|
||||||
|
setThumbSrc(targetUrl)
|
||||||
|
setLoading(false)
|
||||||
|
setIsGeneratingCover(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
load()
|
||||||
|
return () => { cancelled = true }
|
||||||
|
}, [media, isVideo, isLive, targetUrl])
|
||||||
|
|
||||||
|
const handlePreview = async (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
if (isVideo) {
|
||||||
|
// Decrypt video on demand if not already
|
||||||
|
if (!videoPath) {
|
||||||
|
setIsDecrypting(true)
|
||||||
|
try {
|
||||||
|
const res = await window.electronAPI.sns.proxyImage({
|
||||||
|
url: media.url,
|
||||||
|
key: media.key
|
||||||
|
})
|
||||||
|
if (res.success && res.videoPath) {
|
||||||
|
const local = `file://${res.videoPath.replace(/\\/g, '/')}`
|
||||||
|
setVideoPath(local)
|
||||||
|
onPreview(local, true, undefined)
|
||||||
|
} else {
|
||||||
|
alert('视频解密失败')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
} finally {
|
||||||
|
setIsDecrypting(false)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
onPreview(videoPath, true, undefined)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
onPreview(thumbSrc || targetUrl, false, liveVideoPath)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDownload = async (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const result = await window.electronAPI.sns.proxyImage({
|
||||||
|
url: media.url,
|
||||||
|
key: media.key
|
||||||
|
})
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.download = `sns_media_${Date.now()}.${isVideo ? 'mp4' : 'jpg'}`
|
||||||
|
|
||||||
|
if (result.dataUrl) {
|
||||||
|
link.href = result.dataUrl
|
||||||
|
} else if (result.videoPath) {
|
||||||
|
// For local video files, we need to fetch as blob to force download behavior
|
||||||
|
// or just use the file protocol url if the browser supports it
|
||||||
|
try {
|
||||||
|
const response = await fetch(`file://${result.videoPath}`)
|
||||||
|
const blob = await response.blob()
|
||||||
|
const url = URL.createObjectURL(blob)
|
||||||
|
link.href = url
|
||||||
|
setTimeout(() => URL.revokeObjectURL(url), 60000)
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Video fetch failed, falling back to direct link', err)
|
||||||
|
link.href = `file://${result.videoPath}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
} else {
|
||||||
|
alert('下载失败: 无法获取资源')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Download error:', e)
|
||||||
|
alert('下载出错')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`sns-media-item ${isDecrypting ? 'decrypting' : ''}`}
|
||||||
|
onClick={handlePreview}
|
||||||
|
>
|
||||||
|
{(thumbSrc && !thumbSrc.startsWith('data:') && (thumbSrc.toLowerCase().endsWith('.mp4') || thumbSrc.includes('video'))) ? (
|
||||||
|
<video
|
||||||
|
key={thumbSrc}
|
||||||
|
src={`${thumbSrc}#t=0.1`}
|
||||||
|
className="media-image"
|
||||||
|
preload="auto"
|
||||||
|
muted
|
||||||
|
playsInline
|
||||||
|
disablePictureInPicture
|
||||||
|
disableRemotePlayback
|
||||||
|
onLoadedMetadata={(e) => {
|
||||||
|
e.currentTarget.currentTime = 0.1
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
src={thumbSrc || targetUrl}
|
||||||
|
className="media-image"
|
||||||
|
loading="lazy"
|
||||||
|
onError={() => setError(true)}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isGeneratingCover && (
|
||||||
|
<div className="media-decrypting-mask">
|
||||||
|
<RefreshCw className="spin" size={24} />
|
||||||
|
<span>解密中...</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isVideo && (
|
||||||
|
<div className="media-badge video">
|
||||||
|
{/* If we have a cover, show Play. If decrypting for preview, show spin. Generating cover has its own mask. */}
|
||||||
|
{isDecrypting ? <RefreshCw className="spin" size={16} /> : <Play size={16} fill="currentColor" />}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isLive && !isVideo && (
|
||||||
|
<div className="media-badge live">
|
||||||
|
<LivePhotoIcon size={16} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="media-download-btn" onClick={handleDownload} title="下载">
|
||||||
|
<Download size={16} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SnsMediaGrid: React.FC<SnsMediaGridProps> = ({ mediaList, onPreview }) => {
|
||||||
|
if (!mediaList || mediaList.length === 0) return null
|
||||||
|
|
||||||
|
const count = mediaList.length
|
||||||
|
let gridClass = ''
|
||||||
|
|
||||||
|
if (count === 1) gridClass = 'grid-1'
|
||||||
|
else if (count === 2) gridClass = 'grid-2'
|
||||||
|
else if (count === 3) gridClass = 'grid-3'
|
||||||
|
else if (count === 4) gridClass = 'grid-4' // 2x2
|
||||||
|
else if (count <= 6) gridClass = 'grid-6' // 3 cols
|
||||||
|
else gridClass = 'grid-9' // 3x3
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`sns-media-grid ${gridClass}`}>
|
||||||
|
{mediaList.map((media, idx) => (
|
||||||
|
<MediaItem key={idx} media={media} onPreview={onPreview} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,263 @@
|
|||||||
|
import React, { useState, useMemo } from 'react'
|
||||||
|
import { Heart, ChevronRight, ImageIcon, Download, Code, MoreHorizontal } from 'lucide-react'
|
||||||
|
import { SnsPost, SnsLinkCardData } from '../../types/sns'
|
||||||
|
import { Avatar } from '../Avatar'
|
||||||
|
import { SnsMediaGrid } from './SnsMediaGrid'
|
||||||
|
|
||||||
|
// Helper functions (extracted from SnsPage.tsx but simplified/reused)
|
||||||
|
const LINK_XML_URL_TAGS = ['url', 'shorturl', 'weburl', 'webpageurl', 'jumpurl']
|
||||||
|
const LINK_XML_TITLE_TAGS = ['title', 'linktitle', 'webtitle']
|
||||||
|
const MEDIA_HOST_HINTS = ['mmsns.qpic.cn', 'vweixinthumb', 'snstimeline', 'snsvideodownload']
|
||||||
|
|
||||||
|
const isSnsVideoUrl = (url?: string): boolean => {
|
||||||
|
if (!url) return false
|
||||||
|
const lower = url.toLowerCase()
|
||||||
|
return (lower.includes('snsvideodownload') || lower.includes('.mp4') || lower.includes('video')) && !lower.includes('vweixinthumb')
|
||||||
|
}
|
||||||
|
|
||||||
|
const decodeHtmlEntities = (text: string): string => {
|
||||||
|
if (!text) return ''
|
||||||
|
return text
|
||||||
|
.replace(/<!\[CDATA\[([\s\S]*?)\]\]>/g, '$1')
|
||||||
|
.replace(/&/gi, '&')
|
||||||
|
.replace(/</gi, '<')
|
||||||
|
.replace(/>/gi, '>')
|
||||||
|
.replace(/"/gi, '"')
|
||||||
|
.replace(/'/gi, "'")
|
||||||
|
.trim()
|
||||||
|
}
|
||||||
|
|
||||||
|
const normalizeUrlCandidate = (raw: string): string | null => {
|
||||||
|
const value = decodeHtmlEntities(raw).replace(/[)\],.;]+$/, '').trim()
|
||||||
|
if (!value) return null
|
||||||
|
if (!/^https?:\/\//i.test(value)) return null
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
|
||||||
|
const simplifyUrlForCompare = (value: string): string => {
|
||||||
|
const normalized = value.trim().toLowerCase().replace(/^https?:\/\//, '')
|
||||||
|
const [withoutQuery] = normalized.split('?')
|
||||||
|
return withoutQuery.replace(/\/+$/, '')
|
||||||
|
}
|
||||||
|
|
||||||
|
const getXmlTagValues = (xml: string, tags: string[]): string[] => {
|
||||||
|
if (!xml) return []
|
||||||
|
const results: string[] = []
|
||||||
|
for (const tag of tags) {
|
||||||
|
const reg = new RegExp(`<${tag}>([\\s\\S]*?)<\\/${tag}>`, 'ig')
|
||||||
|
let match: RegExpExecArray | null
|
||||||
|
while ((match = reg.exec(xml)) !== null) {
|
||||||
|
if (match[1]) results.push(match[1])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return results
|
||||||
|
}
|
||||||
|
|
||||||
|
const getUrlLikeStrings = (text: string): string[] => {
|
||||||
|
if (!text) return []
|
||||||
|
return text.match(/https?:\/\/[^\s<>"']+/gi) || []
|
||||||
|
}
|
||||||
|
|
||||||
|
const isLikelyMediaAssetUrl = (url: string): boolean => {
|
||||||
|
const lower = url.toLowerCase()
|
||||||
|
return MEDIA_HOST_HINTS.some((hint) => lower.includes(hint))
|
||||||
|
}
|
||||||
|
|
||||||
|
const buildLinkCardData = (post: SnsPost): SnsLinkCardData | null => {
|
||||||
|
const hasVideoMedia = post.type === 15 || post.media.some((item) => isSnsVideoUrl(item.url))
|
||||||
|
if (hasVideoMedia) return null
|
||||||
|
|
||||||
|
const mediaValues = post.media
|
||||||
|
.flatMap((item) => [item.url, item.thumb])
|
||||||
|
.filter((value): value is string => Boolean(value))
|
||||||
|
const mediaSet = new Set(mediaValues.map((value) => simplifyUrlForCompare(value)))
|
||||||
|
|
||||||
|
const urlCandidates: string[] = [
|
||||||
|
post.linkUrl || '',
|
||||||
|
...getXmlTagValues(post.rawXml || '', LINK_XML_URL_TAGS),
|
||||||
|
...getUrlLikeStrings(post.rawXml || ''),
|
||||||
|
...getUrlLikeStrings(post.contentDesc || '')
|
||||||
|
]
|
||||||
|
|
||||||
|
const normalizedCandidates = urlCandidates
|
||||||
|
.map(normalizeUrlCandidate)
|
||||||
|
.filter((value): value is string => Boolean(value))
|
||||||
|
|
||||||
|
const dedupedCandidates: string[] = []
|
||||||
|
const seen = new Set<string>()
|
||||||
|
for (const candidate of normalizedCandidates) {
|
||||||
|
if (seen.has(candidate)) continue
|
||||||
|
seen.add(candidate)
|
||||||
|
dedupedCandidates.push(candidate)
|
||||||
|
}
|
||||||
|
|
||||||
|
const linkUrl = dedupedCandidates.find((candidate) => {
|
||||||
|
const simplified = simplifyUrlForCompare(candidate)
|
||||||
|
if (mediaSet.has(simplified)) return false
|
||||||
|
if (isLikelyMediaAssetUrl(candidate)) return false
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!linkUrl) return null
|
||||||
|
|
||||||
|
const titleCandidates = [
|
||||||
|
post.linkTitle || '',
|
||||||
|
...getXmlTagValues(post.rawXml || '', LINK_XML_TITLE_TAGS),
|
||||||
|
post.contentDesc || ''
|
||||||
|
]
|
||||||
|
|
||||||
|
const title = titleCandidates
|
||||||
|
.map((value) => decodeHtmlEntities(value))
|
||||||
|
.find((value) => Boolean(value) && !/^https?:\/\//i.test(value))
|
||||||
|
|
||||||
|
return {
|
||||||
|
url: linkUrl,
|
||||||
|
title: title || '网页链接',
|
||||||
|
thumb: post.media[0]?.thumb || post.media[0]?.url
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const SnsLinkCard = ({ card }: { card: SnsLinkCardData }) => {
|
||||||
|
const [thumbFailed, setThumbFailed] = useState(false)
|
||||||
|
const hostname = useMemo(() => {
|
||||||
|
try {
|
||||||
|
return new URL(card.url).hostname.replace(/^www\./i, '')
|
||||||
|
} catch {
|
||||||
|
return card.url
|
||||||
|
}
|
||||||
|
}, [card.url])
|
||||||
|
|
||||||
|
const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
try {
|
||||||
|
await window.electronAPI.shell.openExternal(card.url)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[SnsLinkCard] openExternal failed:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button type="button" className="post-link-card" onClick={handleClick}>
|
||||||
|
<div className="link-thumb">
|
||||||
|
{card.thumb && !thumbFailed ? (
|
||||||
|
<img
|
||||||
|
src={card.thumb}
|
||||||
|
alt=""
|
||||||
|
referrerPolicy="no-referrer"
|
||||||
|
loading="lazy"
|
||||||
|
onError={() => setThumbFailed(true)}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="link-thumb-fallback">
|
||||||
|
<ImageIcon size={18} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="link-meta">
|
||||||
|
<div className="link-title">{card.title}</div>
|
||||||
|
<div className="link-url">{hostname}</div>
|
||||||
|
</div>
|
||||||
|
<ChevronRight size={16} className="link-arrow" />
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SnsPostItemProps {
|
||||||
|
post: SnsPost
|
||||||
|
onPreview: (src: string, isVideo?: boolean, liveVideoPath?: string) => void
|
||||||
|
onDebug: (post: SnsPost) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SnsPostItem: React.FC<SnsPostItemProps> = ({ post, onPreview, onDebug }) => {
|
||||||
|
const linkCard = buildLinkCardData(post)
|
||||||
|
const hasVideoMedia = post.type === 15 || post.media.some((item) => isSnsVideoUrl(item.url))
|
||||||
|
const showLinkCard = Boolean(linkCard) && post.media.length <= 1 && !hasVideoMedia
|
||||||
|
const showMediaGrid = post.media.length > 0 && !showLinkCard
|
||||||
|
|
||||||
|
const formatTime = (ts: number) => {
|
||||||
|
const date = new Date(ts * 1000)
|
||||||
|
const isCurrentYear = date.getFullYear() === new Date().getFullYear()
|
||||||
|
|
||||||
|
return date.toLocaleString('zh-CN', {
|
||||||
|
year: isCurrentYear ? undefined : 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add extra class for media-only posts (no text) to adjust spacing?
|
||||||
|
// Not strictly needed but good to know
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="sns-post-item">
|
||||||
|
<div className="post-avatar-col">
|
||||||
|
<Avatar
|
||||||
|
src={post.avatarUrl}
|
||||||
|
name={post.nickname}
|
||||||
|
size={48}
|
||||||
|
shape="rounded"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="post-content-col">
|
||||||
|
<div className="post-header-row">
|
||||||
|
<div className="post-author-info">
|
||||||
|
<span className="author-name">{decodeHtmlEntities(post.nickname)}</span>
|
||||||
|
<span className="post-time">{formatTime(post.createTime)}</span>
|
||||||
|
</div>
|
||||||
|
<button className="icon-btn-ghost debug-btn" onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onDebug(post);
|
||||||
|
}} title="查看原始数据">
|
||||||
|
<Code size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{post.contentDesc && (
|
||||||
|
<div className="post-text">{decodeHtmlEntities(post.contentDesc)}</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showLinkCard && linkCard && (
|
||||||
|
<SnsLinkCard card={linkCard} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showMediaGrid && (
|
||||||
|
<div className="post-media-container">
|
||||||
|
<SnsMediaGrid mediaList={post.media} onPreview={onPreview} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(post.likes.length > 0 || post.comments.length > 0) && (
|
||||||
|
<div className="post-interactions">
|
||||||
|
{post.likes.length > 0 && (
|
||||||
|
<div className="likes-block">
|
||||||
|
<Heart size={14} className="like-icon" />
|
||||||
|
<span className="likes-text">{post.likes.join('、')}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{post.comments.length > 0 && (
|
||||||
|
<div className="comments-block">
|
||||||
|
{post.comments.map((c, idx) => (
|
||||||
|
<div key={idx} className="comment-row">
|
||||||
|
<span className="comment-user">{c.nickname}</span>
|
||||||
|
{c.refNickname && (
|
||||||
|
<>
|
||||||
|
<span className="reply-text">回复</span>
|
||||||
|
<span className="comment-user">{c.refNickname}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<span className="comment-colon">：</span>
|
||||||
|
<span className="comment-content">{c.content}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
+755
-1232
@@ -1,1202 +1,820 @@
|
|||||||
.sns-page {
|
/* Global Variables */
|
||||||
height: 100%;
|
:root {
|
||||||
background: var(--bg-primary);
|
--sns-max-width: 800px;
|
||||||
color: var(--text-primary);
|
--sns-panel-width: 320px;
|
||||||
overflow: hidden;
|
--sns-bg-color: var(--bg-primary);
|
||||||
|
--sns-card-bg: var(--bg-secondary);
|
||||||
|
--sns-border-radius-lg: 16px;
|
||||||
|
--sns-border-radius-md: 12px;
|
||||||
|
--sns-border-radius-sm: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.sns-container {
|
.sns-page-layout {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--sns-bg-color);
|
||||||
|
position: relative;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================================
|
||||||
|
Main Viewport & Feed
|
||||||
|
========================================= */
|
||||||
|
.sns-main-viewport {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: scroll;
|
||||||
|
/* Always show scrollbar track for stability */
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sns-feed-container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--sns-max-width);
|
||||||
|
padding: 20px 24px 60px 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feed-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding: 0 4px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sns-sidebar {
|
.icon-btn {
|
||||||
width: 320px;
|
background: var(--bg-tertiary);
|
||||||
background: var(--bg-secondary);
|
border: 1px solid var(--border-color);
|
||||||
border-left: 1px solid var(--border-color);
|
border-radius: var(--sns-border-radius-sm);
|
||||||
|
padding: 8px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
color: var(--primary);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.spinning {
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.posts-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================================
|
||||||
|
Post Item Component
|
||||||
|
========================================= */
|
||||||
|
.sns-post-item {
|
||||||
|
background: var(--sns-card-bg);
|
||||||
|
border-radius: var(--sns-border-radius-lg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-avatar-col {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content-col {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
/* Enable ellipsis */
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-header-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
.post-author-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
flex-shrink: 0;
|
|
||||||
z-index: 10;
|
|
||||||
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.05);
|
|
||||||
|
|
||||||
&.closed {
|
.author-name {
|
||||||
width: 0;
|
font-size: 15px;
|
||||||
opacity: 0;
|
font-weight: 700;
|
||||||
transform: translateX(100%);
|
color: var(--text-primary);
|
||||||
pointer-events: none;
|
/* Changed to primary from accent for cleaner look, or keep accent */
|
||||||
border-left: none;
|
color: var(--primary);
|
||||||
|
margin-bottom: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-header {
|
.post-time {
|
||||||
padding: 0 24px;
|
font-size: 12px;
|
||||||
height: 64px;
|
color: var(--text-tertiary);
|
||||||
box-sizing: border-box;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-btn {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
background: none;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 6px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sns-post-item:hover .debug-btn {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-text {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--text-primary);
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media-container {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-link-card {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--sns-border-radius-md);
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: left;
|
||||||
|
transition: all 0.2s;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(var(--primary-rgb), 0.08);
|
||||||
|
border-color: rgba(var(--primary-rgb), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-thumb {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: var(--sns-border-radius-sm);
|
||||||
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-thumb-fallback {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
/* justify-content: space-between; -- No longer needed as it's just h3 */
|
justify-content: center;
|
||||||
border-bottom: 1px solid var(--border-color);
|
height: 100%;
|
||||||
background: var(--bg-secondary);
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
h3 {
|
.link-meta {
|
||||||
margin: 0;
|
flex: 1;
|
||||||
font-size: 18px;
|
min-width: 0;
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-primary);
|
.link-title {
|
||||||
letter-spacing: 0;
|
font-size: 14px;
|
||||||
}
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-content {
|
.link-url {
|
||||||
flex: 1;
|
font-size: 12px;
|
||||||
overflow-y: hidden;
|
color: var(--text-tertiary);
|
||||||
/* Changed from auto to hidden to allow inner scrolling of contact list */
|
margin-top: 4px;
|
||||||
padding: 16px;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-arrow {
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-interactions {
|
||||||
|
margin-top: 12px;
|
||||||
|
padding-top: 12px;
|
||||||
|
border-top: 1px dashed var(--border-color);
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
.likes-block {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
.like-icon {
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-block {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: var(--sns-border-radius-sm);
|
||||||
|
padding: 8px 12px;
|
||||||
|
|
||||||
|
.comment-row {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-user {
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-text {
|
||||||
|
margin: 0 4px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-colon {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* =========================================
|
||||||
|
Media Grid Component
|
||||||
|
========================================= */
|
||||||
|
.sns-media-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
|
||||||
|
&.grid-1 .sns-media-item {
|
||||||
|
width: fit-content;
|
||||||
|
height: auto;
|
||||||
|
max-width: 300px;
|
||||||
|
/* Max width constraint */
|
||||||
|
max-height: 480px;
|
||||||
|
/* Increased max height a bit */
|
||||||
|
aspect-ratio: auto;
|
||||||
|
border-radius: var(--sns-border-radius-md);
|
||||||
|
|
||||||
|
img,
|
||||||
|
video {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 480px;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
display: block;
|
||||||
|
/* Remove baseline space */
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.grid-2,
|
||||||
|
&.grid-4 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
max-width: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.grid-3,
|
||||||
|
&.grid-6,
|
||||||
|
&.grid-9 {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
max-width: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sns-media-item {
|
||||||
|
position: relative;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: var(--sns-border-radius-md);
|
||||||
|
/* Consistent radius for grid items */
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: zoom-in;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
img,
|
||||||
|
video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
animation: fade-in 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
border-radius: 50%;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
pointer-events: none;
|
||||||
|
/* Let clicks pass through badge to item */
|
||||||
|
|
||||||
|
&.live {
|
||||||
|
top: 8px;
|
||||||
|
left: 8px;
|
||||||
|
transform: none;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-decrypting-mask {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
gap: 8px;
|
||||||
|
z-index: 10;
|
||||||
|
font-size: 12px;
|
||||||
|
backdrop-filter: blur(2px);
|
||||||
|
}
|
||||||
|
|
||||||
.filter-card {
|
.media-download-btn {
|
||||||
background: var(--bg-primary);
|
position: absolute;
|
||||||
border-radius: 12px;
|
bottom: 6px;
|
||||||
border: 1px solid var(--border-color);
|
right: 6px;
|
||||||
padding: 14px;
|
width: 28px;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
|
height: 28px;
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
background: rgba(0, 0, 0, 0.5);
|
||||||
flex-shrink: 0;
|
border-radius: 50%;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 0.2s;
|
||||||
|
z-index: 5;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
|
background: var(--primary);
|
||||||
}
|
transform: scale(1.1);
|
||||||
|
|
||||||
&.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;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-color: var(--accent-color);
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-weight: 500;
|
|
||||||
background: rgba(var(--accent-color-rgb), 0.05);
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.contact-card {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 200px;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Increase click area */
|
||||||
|
&::after {
|
||||||
.filter-section {
|
content: '';
|
||||||
margin-bottom: 0px;
|
position: absolute;
|
||||||
|
inset: -4px;
|
||||||
label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
color: var(--accent-color);
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input-wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.input-icon {
|
|
||||||
position: absolute;
|
|
||||||
left: 12px;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
&::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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
background: var(--hover-bg);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-filter-section {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.section-header {
|
|
||||||
padding: 16px 16px 1px 16px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
/* Increased spacing */
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-search {
|
|
||||||
padding: 0 16px 12px 16px;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
.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;
|
|
||||||
min-height: 0;
|
|
||||||
|
|
||||||
.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 {
|
&:hover .media-download-btn {
|
||||||
padding: 16px;
|
opacity: 1;
|
||||||
border-top: 1px solid var(--border-color);
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.clear-btn {
|
@keyframes fade-in {
|
||||||
width: 100%;
|
from {
|
||||||
display: flex;
|
opacity: 0;
|
||||||
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: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
to {
|
||||||
background: var(--accent-color);
|
opacity: 1;
|
||||||
color: white;
|
}
|
||||||
border-color: var(--accent-color);
|
}
|
||||||
box-shadow: 0 4px 10px rgba(var(--accent-color-rgb), 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: scale(0.98);
|
/* =========================================
|
||||||
}
|
Filter Panel Component (Right Side)
|
||||||
|
========================================= */
|
||||||
|
.sns-filter-panel {
|
||||||
|
width: var(--sns-panel-width);
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-left: 1px solid var(--border-color);
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 24px;
|
||||||
|
gap: 24px;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
.filter-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-all-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--primary);
|
||||||
|
animation: spin 0.5s ease;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sns-main {
|
.filter-widgets {
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-width: 0;
|
gap: 20px;
|
||||||
background: var(--bg-primary);
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.sns-header {
|
.filter-widget {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--sns-border-radius-md);
|
||||||
|
padding: 16px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
|
||||||
|
|
||||||
|
.widget-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
gap: 8px;
|
||||||
padding: 0 24px;
|
margin-bottom: 12px;
|
||||||
height: 64px;
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: var(--primary);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
margin-left: auto;
|
||||||
|
background: var(--primary);
|
||||||
|
color: white;
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Search Widget */
|
||||||
|
.input-group {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: var(--sns-border-radius-sm);
|
||||||
|
padding: 10px 30px 10px 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border-color: transparent;
|
||||||
|
/* Explicitly transparent */
|
||||||
|
outline: none;
|
||||||
|
/* Ensure no outline */
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-input-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 8px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Date Widget */
|
||||||
|
.date-picker-trigger {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: var(--sns-border-radius-sm);
|
||||||
|
padding: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: rgba(var(--primary-rgb), 0.08);
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-date-btn {
|
||||||
|
padding: 4px;
|
||||||
|
display: flex;
|
||||||
|
color: var(--primary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact Widget - Refactored */
|
||||||
|
.contact-widget {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 300px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.widget-header {
|
||||||
|
padding: 16px 16px 12px 16px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-search-bar {
|
||||||
|
padding: 0 16px 12px 16px;
|
||||||
|
position: relative;
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
background: var(--bg-secondary);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
z-index: 5;
|
|
||||||
|
|
||||||
.header-left {
|
input {
|
||||||
display: flex;
|
width: 100%;
|
||||||
align-items: center;
|
background: var(--bg-tertiary);
|
||||||
gap: 16px;
|
border: 1px solid transparent;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px 32px 8px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
h2 {
|
&:focus {
|
||||||
margin: 0;
|
outline: none;
|
||||||
font-size: 18px;
|
background: var(--bg-primary);
|
||||||
font-weight: 700;
|
border-color: var(--primary);
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-right {
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 28px;
|
||||||
|
top: 8px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-list-scroll {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 8px 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
|
/* Remove gap to allow borders to merge */
|
||||||
|
|
||||||
|
.contact-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
padding: 10px;
|
||||||
|
border-radius: var(--sns-border-radius-md);
|
||||||
.icon-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 8px;
|
transition: background 0.2s ease, transform 0.2s ease;
|
||||||
border-radius: 8px;
|
border: 2px solid transparent;
|
||||||
transition: all 0.2s;
|
margin-bottom: 4px;
|
||||||
display: flex;
|
/* Separation for unselected items */
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--text-primary);
|
|
||||||
background: var(--hover-bg);
|
background: var(--hover-bg);
|
||||||
|
transform: translateX(2px);
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.refresh-btn {
|
&.selected {
|
||||||
&:hover {
|
background: rgba(var(--primary-rgb), 0.1);
|
||||||
color: var(--accent-color);
|
border-color: var(--primary);
|
||||||
}
|
box-shadow: none;
|
||||||
}
|
z-index: 5;
|
||||||
}
|
margin-bottom: 0;
|
||||||
|
/* Remove margin to merge */
|
||||||
|
|
||||||
.spinning {
|
.contact-name {
|
||||||
animation: spin 1s linear infinite;
|
color: var(--primary);
|
||||||
}
|
font-weight: 600;
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.sns-content-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sns-notice-banner {
|
|
||||||
margin: 16px 24px 0 24px;
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: rgba(var(--accent-color-rgb), 0.08);
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(var(--accent-color-rgb), 0.2);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
color: var(--accent-color);
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
animation: banner-slide-down 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes banner-slide-down {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sns-content {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 24px 0;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
|
|
||||||
.active-filters-bar {
|
|
||||||
max-width: 680px;
|
|
||||||
margin: 0 auto 24px auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background: rgba(var(--accent-color-rgb), 0.08);
|
|
||||||
border: 1px solid rgba(var(--accent-color-rgb), 0.2);
|
|
||||||
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: var(--accent-color);
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 11px;
|
|
||||||
padding: 4px 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-weight: 600;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--accent-color-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.posts-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sns-post-row {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 800px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.sns-post-wrapper {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
/* If the NEXT item is also selected */
|
||||||
font-size: 12px;
|
&:has(+ .contact-row.selected) {
|
||||||
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: 20px;
|
|
||||||
|
|
||||||
.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-link-card {
|
|
||||||
width: min(460px, 100%);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 10px;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
text-align: left;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: rgba(var(--accent-color-rgb), 0.35);
|
|
||||||
background: rgba(var(--accent-color-rgb), 0.08);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-thumb {
|
|
||||||
width: 88px;
|
|
||||||
min-width: 88px;
|
|
||||||
height: 66px;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-thumb-fallback {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-meta {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
.link-title {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-url {
|
|
||||||
margin-top: 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-arrow {
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media-grid {
|
|
||||||
display: grid;
|
|
||||||
gap: 6px;
|
|
||||||
width: fit-content;
|
|
||||||
max-width: 100%;
|
|
||||||
|
|
||||||
&.media-count-1 {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
|
|
||||||
.media-item {
|
|
||||||
width: 320px;
|
|
||||||
height: 240px;
|
|
||||||
max-width: 100%;
|
|
||||||
border-radius: 12px;
|
|
||||||
aspect-ratio: auto;
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-badge {
|
|
||||||
position: absolute;
|
|
||||||
top: 8px;
|
|
||||||
left: 8px;
|
|
||||||
right: 8px;
|
|
||||||
left: auto;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
color: white;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 2;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-btn-overlay {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 6px;
|
|
||||||
right: 6px;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
transform: scale(1.1);
|
|
||||||
border-color: rgba(255, 255, 255, 0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.video-badge-container {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
z-index: 2;
|
|
||||||
pointer-events: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.video-badge {
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: white;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
||||||
transition: all 0.2s;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: white;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.decrypting-badge {
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
color: white;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
white-space: nowrap;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
||||||
|
|
||||||
.spin-icon {
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.download-btn-overlay {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-error-placeholder {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: var(--bg-deep);
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(var(--accent-color-rgb), 0.12);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-footer {
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 14px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::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;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-bottom: 0;
|
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
margin-bottom: 0;
|
border-bottom-left-radius: 0;
|
||||||
}
|
border-bottom-right-radius: 0;
|
||||||
|
padding-bottom: 12px;
|
||||||
.icon {
|
/* Compensate for missing border (+2px) */
|
||||||
margin-top: 3px;
|
|
||||||
margin-right: 10px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.likes-list {
|
|
||||||
line-height: 1.6;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments-section {
|
/* If the PREVIOUS item is selected */
|
||||||
.comment-item {
|
&.selected+.contact-row.selected {
|
||||||
margin-bottom: 8px;
|
border-top: none;
|
||||||
line-height: 1.6;
|
border-top-left-radius: 0;
|
||||||
font-size: 13px;
|
border-top-right-radius: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 12px;
|
||||||
|
/* Compensate for missing border */
|
||||||
|
}
|
||||||
|
|
||||||
&:last-child {
|
.contact-name {
|
||||||
margin-bottom: 0;
|
flex: 1;
|
||||||
}
|
font-size: 14px;
|
||||||
|
color: var(--text-secondary);
|
||||||
.comment-user {
|
white-space: nowrap;
|
||||||
color: var(--accent-color);
|
overflow: hidden;
|
||||||
font-weight: 700;
|
text-overflow: ellipsis;
|
||||||
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 {
|
.empty-state {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 40px;
|
|
||||||
color: var(--text-tertiary);
|
color: var(--text-tertiary);
|
||||||
font-size: 14px;
|
padding: 20px;
|
||||||
display: flex;
|
font-size: 12px;
|
||||||
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;
|
Status Indicators, etc.
|
||||||
padding: 80px 20px;
|
========================================= */
|
||||||
color: var(--text-tertiary);
|
.status-indicator {
|
||||||
|
text-align: center;
|
||||||
|
padding: 16px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-size: 13px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
.no-results-icon {
|
&.newer-hint {
|
||||||
margin-bottom: 20px;
|
background: rgba(var(--primary-rgb), 0.1);
|
||||||
opacity: 0.2;
|
color: var(--primary);
|
||||||
}
|
cursor: pointer;
|
||||||
|
border-radius: var(--sns-border-radius-sm);
|
||||||
|
margin: 0 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
p {
|
.no-results {
|
||||||
font-size: 16px;
|
display: flex;
|
||||||
margin-bottom: 24px;
|
flex-direction: column;
|
||||||
}
|
align-items: center;
|
||||||
|
padding: 60px 0;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
|
||||||
.reset-inline {
|
.no-results-icon {
|
||||||
background: var(--accent-color);
|
margin-bottom: 16px;
|
||||||
color: white;
|
opacity: 0.5;
|
||||||
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 {
|
.reset-inline {
|
||||||
transform: translateY(-2px);
|
margin-top: 16px;
|
||||||
box-shadow: 0 6px 20px rgba(var(--accent-color-rgb), 0.4);
|
background: none;
|
||||||
}
|
border: 1px solid var(--border-color);
|
||||||
}
|
padding: 6px 16px;
|
||||||
|
border-radius: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
from {
|
100% {
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes badge-pop {
|
/* =========================================
|
||||||
from {
|
Modal & Debug Dialog
|
||||||
transform: scale(0);
|
========================================= */
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Debug Dialog Styles
|
|
||||||
.debug-btn {
|
|
||||||
margin-left: auto;
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
padding: 6px;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--hover-bg);
|
|
||||||
color: var(--accent-color);
|
|
||||||
border-color: var(--accent-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay {
|
.modal-overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
inset: 0;
|
||||||
left: 0;
|
z-index: 1000;
|
||||||
right: 0;
|
background: rgba(0, 0, 0, 0.5);
|
||||||
bottom: 0;
|
backdrop-filter: blur(4px);
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
z-index: 10000;
|
animation: fade-in 0.2s ease;
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.debug-dialog {
|
.debug-dialog {
|
||||||
background: var(--bg-secondary);
|
background: var(--sns-card-bg);
|
||||||
border: 1px solid var(--border-color);
|
/* Use card bg */
|
||||||
border-radius: 12px;
|
border-radius: var(--sns-border-radius-lg);
|
||||||
width: 90%;
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
|
||||||
max-width: 800px;
|
width: 600px;
|
||||||
max-height: 85vh;
|
max-width: 90vw;
|
||||||
|
height: 80vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
border: 1px solid var(--border-color);
|
||||||
|
overflow: hidden;
|
||||||
|
/* Ensure header doesn't overflow corners */
|
||||||
|
animation: slide-up-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
|
||||||
.debug-dialog-header {
|
.debug-dialog-header {
|
||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
/* Distinct header bg */
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -1204,24 +822,22 @@
|
|||||||
h3 {
|
h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
background: transparent;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: var(--text-secondary);
|
color: var(--text-tertiary);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 4px;
|
padding: 6px;
|
||||||
|
border-radius: 6px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--hover-bg);
|
background: rgba(0, 0, 0, 0.05);
|
||||||
color: var(--accent-color);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1230,123 +846,30 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
background: var(--bg-primary);
|
||||||
|
|
||||||
.debug-section {
|
.json-code {
|
||||||
margin-bottom: 24px;
|
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||||
padding-bottom: 20px;
|
font-size: 12px;
|
||||||
border-bottom: 1px solid var(--border-color);
|
line-height: 1.5;
|
||||||
|
color: var(--text-primary);
|
||||||
&:last-child {
|
white-space: pre-wrap;
|
||||||
border-bottom: none;
|
word-break: break-all;
|
||||||
}
|
margin: 0;
|
||||||
|
user-select: text;
|
||||||
h4 {
|
/* Allow selection */
|
||||||
margin: 0 0 12px 0;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--accent-color);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.debug-item {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 8px 0;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
.debug-key {
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
min-width: 140px;
|
|
||||||
font-size: 13px;
|
|
||||||
font-family: 'Consolas', 'Microsoft YaHei', 'SimHei', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.debug-value {
|
|
||||||
flex: 1;
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 13px;
|
|
||||||
word-break: break-all;
|
|
||||||
font-family: 'Consolas', 'Microsoft YaHei', 'SimHei', monospace;
|
|
||||||
user-select: text;
|
|
||||||
cursor: text;
|
|
||||||
padding: 2px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-debug-item {
|
|
||||||
background: var(--bg-primary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 12px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
|
|
||||||
.media-debug-header {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
margin-bottom: 8px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-photo-debug {
|
|
||||||
margin-top: 12px;
|
|
||||||
padding-top: 12px;
|
|
||||||
border-top: 1px dashed var(--border-color);
|
|
||||||
|
|
||||||
.live-photo-label {
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--accent-color);
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.json-code {
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
overflow-x: auto;
|
|
||||||
font-family: 'Consolas', 'Monaco', monospace;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.5;
|
|
||||||
user-select: all;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-json-btn {
|
|
||||||
margin-top: 12px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
background: var(--accent-color);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--accent-hover);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 12px rgba(var(--accent-color-rgb), 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes slide-up-fade {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
+99
-887
@@ -1,426 +1,11 @@
|
|||||||
import { useEffect, useState, useRef, useCallback, useMemo } from 'react'
|
import { useEffect, useState, useRef, useCallback } from 'react'
|
||||||
import { RefreshCw, Heart, Search, Calendar, User, X, Filter, Play, ImageIcon, Zap, Download, ChevronRight, AlertTriangle } from 'lucide-react'
|
import { RefreshCw, Search, X, Download, FolderOpen } from 'lucide-react'
|
||||||
import { Avatar } from '../components/Avatar'
|
|
||||||
import { ImagePreview } from '../components/ImagePreview'
|
import { ImagePreview } from '../components/ImagePreview'
|
||||||
import JumpToDateDialog from '../components/JumpToDateDialog'
|
import JumpToDateDialog from '../components/JumpToDateDialog'
|
||||||
import { LivePhotoIcon } from '../components/LivePhotoIcon'
|
|
||||||
import './SnsPage.scss'
|
import './SnsPage.scss'
|
||||||
|
import { SnsPost } from '../types/sns'
|
||||||
interface SnsPost {
|
import { SnsPostItem } from '../components/Sns/SnsPostItem'
|
||||||
id: string
|
import { SnsFilterPanel } from '../components/Sns/SnsFilterPanel'
|
||||||
username: string
|
|
||||||
nickname: string
|
|
||||||
avatarUrl?: string
|
|
||||||
createTime: number
|
|
||||||
contentDesc: string
|
|
||||||
type?: number
|
|
||||||
media: {
|
|
||||||
url: string
|
|
||||||
thumb: string
|
|
||||||
md5?: string
|
|
||||||
token?: string
|
|
||||||
key?: string
|
|
||||||
encIdx?: string
|
|
||||||
livePhoto?: {
|
|
||||||
url: string
|
|
||||||
thumb: string
|
|
||||||
token?: string
|
|
||||||
key?: string
|
|
||||||
encIdx?: string
|
|
||||||
}
|
|
||||||
}[]
|
|
||||||
likes: string[]
|
|
||||||
comments: { id: string; nickname: string; content: string; refCommentId: string; refNickname?: string }[]
|
|
||||||
rawXml?: string // 原始 XML 数据
|
|
||||||
linkTitle?: string
|
|
||||||
linkUrl?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SnsLinkCardData {
|
|
||||||
title: string
|
|
||||||
url: string
|
|
||||||
thumb?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const LINK_XML_URL_TAGS = ['url', 'shorturl', 'weburl', 'webpageurl', 'jumpurl']
|
|
||||||
const LINK_XML_TITLE_TAGS = ['title', 'linktitle', 'webtitle']
|
|
||||||
const MEDIA_HOST_HINTS = ['mmsns.qpic.cn', 'vweixinthumb', 'snstimeline', 'snsvideodownload']
|
|
||||||
|
|
||||||
const isSnsVideoUrl = (url?: string): boolean => {
|
|
||||||
if (!url) return false
|
|
||||||
const lower = url.toLowerCase()
|
|
||||||
return (lower.includes('snsvideodownload') || lower.includes('.mp4') || lower.includes('video')) && !lower.includes('vweixinthumb')
|
|
||||||
}
|
|
||||||
|
|
||||||
const decodeHtmlEntities = (text: string): string => {
|
|
||||||
if (!text) return ''
|
|
||||||
return text
|
|
||||||
.replace(/<!\[CDATA\[([\s\S]*?)\]\]>/g, '$1')
|
|
||||||
.replace(/&/gi, '&')
|
|
||||||
.replace(/</gi, '<')
|
|
||||||
.replace(/>/gi, '>')
|
|
||||||
.replace(/"/gi, '"')
|
|
||||||
.replace(/'/gi, "'")
|
|
||||||
.trim()
|
|
||||||
}
|
|
||||||
|
|
||||||
const normalizeUrlCandidate = (raw: string): string | null => {
|
|
||||||
const value = decodeHtmlEntities(raw).replace(/[)\],.;]+$/, '').trim()
|
|
||||||
if (!value) return null
|
|
||||||
if (!/^https?:\/\//i.test(value)) return null
|
|
||||||
return value
|
|
||||||
}
|
|
||||||
|
|
||||||
const simplifyUrlForCompare = (value: string): string => {
|
|
||||||
const normalized = value.trim().toLowerCase().replace(/^https?:\/\//, '')
|
|
||||||
const [withoutQuery] = normalized.split('?')
|
|
||||||
return withoutQuery.replace(/\/+$/, '')
|
|
||||||
}
|
|
||||||
|
|
||||||
const getXmlTagValues = (xml: string, tags: string[]): string[] => {
|
|
||||||
if (!xml) return []
|
|
||||||
const results: string[] = []
|
|
||||||
for (const tag of tags) {
|
|
||||||
const reg = new RegExp(`<${tag}>([\\s\\S]*?)<\\/${tag}>`, 'ig')
|
|
||||||
let match: RegExpExecArray | null
|
|
||||||
while ((match = reg.exec(xml)) !== null) {
|
|
||||||
if (match[1]) results.push(match[1])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return results
|
|
||||||
}
|
|
||||||
|
|
||||||
const getUrlLikeStrings = (text: string): string[] => {
|
|
||||||
if (!text) return []
|
|
||||||
return text.match(/https?:\/\/[^\s<>"']+/gi) || []
|
|
||||||
}
|
|
||||||
|
|
||||||
const isLikelyMediaAssetUrl = (url: string): boolean => {
|
|
||||||
const lower = url.toLowerCase()
|
|
||||||
return MEDIA_HOST_HINTS.some((hint) => lower.includes(hint))
|
|
||||||
}
|
|
||||||
|
|
||||||
const buildLinkCardData = (post: SnsPost): SnsLinkCardData | null => {
|
|
||||||
const hasVideoMedia = post.type === 15 || post.media.some((item) => isSnsVideoUrl(item.url))
|
|
||||||
if (hasVideoMedia) return null
|
|
||||||
|
|
||||||
const mediaValues = post.media
|
|
||||||
.flatMap((item) => [item.url, item.thumb])
|
|
||||||
.filter((value): value is string => Boolean(value))
|
|
||||||
const mediaSet = new Set(mediaValues.map((value) => simplifyUrlForCompare(value)))
|
|
||||||
|
|
||||||
const urlCandidates: string[] = [
|
|
||||||
post.linkUrl || '',
|
|
||||||
...getXmlTagValues(post.rawXml || '', LINK_XML_URL_TAGS),
|
|
||||||
...getUrlLikeStrings(post.rawXml || ''),
|
|
||||||
...getUrlLikeStrings(post.contentDesc || '')
|
|
||||||
]
|
|
||||||
|
|
||||||
const normalizedCandidates = urlCandidates
|
|
||||||
.map(normalizeUrlCandidate)
|
|
||||||
.filter((value): value is string => Boolean(value))
|
|
||||||
|
|
||||||
const dedupedCandidates: string[] = []
|
|
||||||
const seen = new Set<string>()
|
|
||||||
for (const candidate of normalizedCandidates) {
|
|
||||||
if (seen.has(candidate)) continue
|
|
||||||
seen.add(candidate)
|
|
||||||
dedupedCandidates.push(candidate)
|
|
||||||
}
|
|
||||||
|
|
||||||
const linkUrl = dedupedCandidates.find((candidate) => {
|
|
||||||
const simplified = simplifyUrlForCompare(candidate)
|
|
||||||
if (mediaSet.has(simplified)) return false
|
|
||||||
if (isLikelyMediaAssetUrl(candidate)) return false
|
|
||||||
return true
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!linkUrl) return null
|
|
||||||
|
|
||||||
const titleCandidates = [
|
|
||||||
post.linkTitle || '',
|
|
||||||
...getXmlTagValues(post.rawXml || '', LINK_XML_TITLE_TAGS),
|
|
||||||
post.contentDesc || ''
|
|
||||||
]
|
|
||||||
|
|
||||||
const title = titleCandidates
|
|
||||||
.map((value) => decodeHtmlEntities(value))
|
|
||||||
.find((value) => Boolean(value) && !/^https?:\/\//i.test(value))
|
|
||||||
|
|
||||||
return {
|
|
||||||
url: linkUrl,
|
|
||||||
title: title || '网页链接',
|
|
||||||
thumb: post.media[0]?.thumb || post.media[0]?.url
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const SnsLinkCard = ({ card }: { card: SnsLinkCardData }) => {
|
|
||||||
const [thumbFailed, setThumbFailed] = useState(false)
|
|
||||||
const hostname = useMemo(() => {
|
|
||||||
try {
|
|
||||||
return new URL(card.url).hostname.replace(/^www\./i, '')
|
|
||||||
} catch {
|
|
||||||
return card.url
|
|
||||||
}
|
|
||||||
}, [card.url])
|
|
||||||
|
|
||||||
const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
try {
|
|
||||||
await window.electronAPI.shell.openExternal(card.url)
|
|
||||||
} catch (error) {
|
|
||||||
console.error('[SnsPage] openExternal failed:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button type="button" className="post-link-card" onClick={handleClick}>
|
|
||||||
<div className="link-thumb">
|
|
||||||
{card.thumb && !thumbFailed ? (
|
|
||||||
<img
|
|
||||||
src={card.thumb}
|
|
||||||
alt=""
|
|
||||||
referrerPolicy="no-referrer"
|
|
||||||
loading="lazy"
|
|
||||||
onError={() => setThumbFailed(true)}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="link-thumb-fallback">
|
|
||||||
<ImageIcon size={18} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="link-meta">
|
|
||||||
<div className="link-title">{card.title}</div>
|
|
||||||
<div className="link-url">{hostname}</div>
|
|
||||||
</div>
|
|
||||||
<ChevronRight size={16} className="link-arrow" />
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const MediaItem = ({ media, onPreview }: { media: any; onPreview: (src: string, isVideo?: boolean, liveVideoPath?: string) => void }) => {
|
|
||||||
const [error, setError] = useState(false)
|
|
||||||
const [thumbSrc, setThumbSrc] = useState<string>('') // 缩略图
|
|
||||||
const [videoPath, setVideoPath] = useState<string>('') // 视频本地路径
|
|
||||||
const [liveVideoPath, setLiveVideoPath] = useState<string>('') // Live Photo 视频路径
|
|
||||||
const [isDecrypting, setIsDecrypting] = useState(false) // 解密状态
|
|
||||||
const { url, thumb, livePhoto } = media
|
|
||||||
const isLive = !!livePhoto
|
|
||||||
const targetUrl = thumb || url // 默认显示缩略图
|
|
||||||
|
|
||||||
// 判断是否为视频
|
|
||||||
const isVideo = isSnsVideoUrl(url)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let cancelled = false
|
|
||||||
setError(false)
|
|
||||||
setThumbSrc('')
|
|
||||||
setVideoPath('')
|
|
||||||
setLiveVideoPath('')
|
|
||||||
setIsDecrypting(false)
|
|
||||||
|
|
||||||
const extractFirstFrame = (videoUrl: string) => {
|
|
||||||
const video = document.createElement('video')
|
|
||||||
video.crossOrigin = 'anonymous'
|
|
||||||
video.style.display = 'none'
|
|
||||||
video.muted = true
|
|
||||||
video.src = videoUrl
|
|
||||||
video.currentTime = 0.1
|
|
||||||
|
|
||||||
const onLoadedData = () => {
|
|
||||||
if (cancelled) return cleanup()
|
|
||||||
try {
|
|
||||||
const canvas = document.createElement('canvas')
|
|
||||||
canvas.width = video.videoWidth
|
|
||||||
canvas.height = video.videoHeight
|
|
||||||
const ctx = canvas.getContext('2d')
|
|
||||||
if (ctx) {
|
|
||||||
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
|
|
||||||
const dataUrl = canvas.toDataURL('image/jpeg', 0.8)
|
|
||||||
if (!cancelled) {
|
|
||||||
setThumbSrc(dataUrl)
|
|
||||||
setIsDecrypting(false)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (!cancelled) setIsDecrypting(false)
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('Frame extraction error', e)
|
|
||||||
if (!cancelled) setIsDecrypting(false)
|
|
||||||
} finally {
|
|
||||||
cleanup()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const onError = () => {
|
|
||||||
if (!cancelled) {
|
|
||||||
setIsDecrypting(false)
|
|
||||||
setThumbSrc(targetUrl) // Fallback
|
|
||||||
}
|
|
||||||
cleanup()
|
|
||||||
}
|
|
||||||
|
|
||||||
const cleanup = () => {
|
|
||||||
video.removeEventListener('seeked', onLoadedData)
|
|
||||||
video.removeEventListener('error', onError)
|
|
||||||
video.remove()
|
|
||||||
}
|
|
||||||
|
|
||||||
video.addEventListener('seeked', onLoadedData)
|
|
||||||
video.addEventListener('error', onError)
|
|
||||||
video.load()
|
|
||||||
}
|
|
||||||
|
|
||||||
const run = async () => {
|
|
||||||
try {
|
|
||||||
if (isVideo) {
|
|
||||||
setIsDecrypting(true)
|
|
||||||
|
|
||||||
const videoResult = await window.electronAPI.sns.proxyImage({
|
|
||||||
url: url,
|
|
||||||
key: media.key
|
|
||||||
})
|
|
||||||
|
|
||||||
if (cancelled) return
|
|
||||||
|
|
||||||
if (videoResult.success && videoResult.videoPath) {
|
|
||||||
const localUrl = videoResult.videoPath.startsWith('file:')
|
|
||||||
? videoResult.videoPath
|
|
||||||
: `file://${videoResult.videoPath.replace(/\\/g, '/')}`
|
|
||||||
setVideoPath(localUrl)
|
|
||||||
extractFirstFrame(localUrl)
|
|
||||||
} else {
|
|
||||||
console.warn('[MediaItem] Video decryption failed:', url, videoResult.error)
|
|
||||||
setIsDecrypting(false)
|
|
||||||
setError(true)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const result = await window.electronAPI.sns.proxyImage({
|
|
||||||
url: targetUrl,
|
|
||||||
key: media.key
|
|
||||||
})
|
|
||||||
|
|
||||||
if (cancelled) return
|
|
||||||
if (result.success) {
|
|
||||||
if (result.dataUrl) {
|
|
||||||
setThumbSrc(result.dataUrl)
|
|
||||||
} else if (result.videoPath) {
|
|
||||||
const localUrl = result.videoPath.startsWith('file:')
|
|
||||||
? result.videoPath
|
|
||||||
: `file://${result.videoPath.replace(/\\/g, '/')}`
|
|
||||||
setThumbSrc(localUrl)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.warn('[MediaItem] Image proxy failed:', targetUrl, result.error)
|
|
||||||
setThumbSrc(targetUrl)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isLive && livePhoto && livePhoto.url) {
|
|
||||||
window.electronAPI.sns.proxyImage({
|
|
||||||
url: livePhoto.url,
|
|
||||||
key: livePhoto.key || media.key
|
|
||||||
}).then((res: any) => {
|
|
||||||
if (cancelled) return
|
|
||||||
if (res.success && res.videoPath) {
|
|
||||||
const localUrl = res.videoPath.startsWith('file:')
|
|
||||||
? res.videoPath
|
|
||||||
: `file://${res.videoPath.replace(/\\/g, '/')}`
|
|
||||||
setLiveVideoPath(localUrl)
|
|
||||||
console.log('[MediaItem] Live video ready:', localUrl)
|
|
||||||
} else {
|
|
||||||
console.warn('[MediaItem] Live video failed:', res.error)
|
|
||||||
}
|
|
||||||
}).catch((e: any) => console.error('[MediaItem] Live video err:', e))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
if (!cancelled) {
|
|
||||||
console.error('[MediaItem] run error:', err)
|
|
||||||
setError(true)
|
|
||||||
setIsDecrypting(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
run()
|
|
||||||
return () => { cancelled = true }
|
|
||||||
}, [targetUrl, url, media.key, isVideo, isLive, livePhoto])
|
|
||||||
|
|
||||||
const handleDownload = async (e: React.MouseEvent) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
try {
|
|
||||||
const result = await window.electronAPI.sns.downloadImage({
|
|
||||||
url: url || targetUrl, // Use original url if available
|
|
||||||
key: media.key
|
|
||||||
})
|
|
||||||
if (!result.success && result.error !== '用户已取消') {
|
|
||||||
alert(`下载失败: ${result.error}`)
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Download failed:', error)
|
|
||||||
alert('下载过程中发生错误')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 点击时：如果是视频，应该传视频地址给 Preview？
|
|
||||||
// ImagePreview 目前可能只支持图片。需要检查 ImagePreview 是否支持视频。
|
|
||||||
// 假设 ImagePreview 暂不支持视频播放，我们可以在这里直接点开播放？
|
|
||||||
// 或者，传视频 URL 给 onPreview，让父组件决定/ImagePreview 决定。
|
|
||||||
// 通常做法：传给 ImagePreview，ImagePreview 识别 mp4 后播放。
|
|
||||||
|
|
||||||
// 显示用的图片：始终显示缩略图
|
|
||||||
const displaySrc = thumbSrc || targetUrl
|
|
||||||
|
|
||||||
// 预览用的地址：如果是视频，优先使用本地路径
|
|
||||||
const previewSrc = isVideo ? (videoPath || url) : (thumbSrc || url || targetUrl)
|
|
||||||
|
|
||||||
// 点击处理：解密中禁止点击
|
|
||||||
const handleClick = () => {
|
|
||||||
if (isVideo && isDecrypting) return
|
|
||||||
onPreview(previewSrc, isVideo, liveVideoPath)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`media-item ${error ? 'error' : ''} ${isVideo && isDecrypting ? 'decrypting' : ''}`} onClick={handleClick}>
|
|
||||||
{isVideo && isDecrypting ? (
|
|
||||||
<div className="video-loading-overlay" style={{
|
|
||||||
position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
|
|
||||||
alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.5)', color: '#fff',
|
|
||||||
zIndex: 2, backdropFilter: 'blur(4px)'
|
|
||||||
}}>
|
|
||||||
<RefreshCw size={24} className="spin-icon" style={{ marginBottom: 8 }} />
|
|
||||||
<span style={{ fontSize: 12 }}>解密中...</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<img
|
|
||||||
src={displaySrc}
|
|
||||||
alt=""
|
|
||||||
referrerPolicy="no-referrer"
|
|
||||||
loading="lazy"
|
|
||||||
onError={() => setError(true)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{isVideo && !isDecrypting && (
|
|
||||||
<div className="video-badge-container">
|
|
||||||
<div className="video-badge">
|
|
||||||
<Play size={16} className="play-icon" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{isLive && !isVideo && (
|
|
||||||
<div className="live-badge">
|
|
||||||
<LivePhotoIcon size={16} className="live-icon" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<button className="download-btn-overlay" onClick={handleDownload} title="Download original">
|
|
||||||
<Download size={14} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Contact {
|
interface Contact {
|
||||||
username: string
|
username: string
|
||||||
@@ -431,37 +16,36 @@ interface Contact {
|
|||||||
export default function SnsPage() {
|
export default function SnsPage() {
|
||||||
const [posts, setPosts] = useState<SnsPost[]>([])
|
const [posts, setPosts] = useState<SnsPost[]>([])
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
const [offset, setOffset] = useState(0)
|
|
||||||
const [hasMore, setHasMore] = useState(true)
|
const [hasMore, setHasMore] = useState(true)
|
||||||
const loadingRef = useRef(false)
|
const loadingRef = useRef(false)
|
||||||
|
|
||||||
// 筛选与搜索状态
|
// Filter states
|
||||||
const [searchKeyword, setSearchKeyword] = useState('')
|
const [searchKeyword, setSearchKeyword] = useState('')
|
||||||
const [selectedUsernames, setSelectedUsernames] = useState<string[]>([])
|
const [selectedUsernames, setSelectedUsernames] = useState<string[]>([])
|
||||||
const [isSidebarOpen, setIsSidebarOpen] = useState(true)
|
const [jumpTargetDate, setJumpTargetDate] = useState<Date | undefined>(undefined)
|
||||||
|
|
||||||
// 联系人列表状态
|
// Contacts state
|
||||||
const [contacts, setContacts] = useState<Contact[]>([])
|
const [contacts, setContacts] = useState<Contact[]>([])
|
||||||
const [contactSearch, setContactSearch] = useState('')
|
const [contactSearch, setContactSearch] = useState('')
|
||||||
const [contactsLoading, setContactsLoading] = useState(false)
|
const [contactsLoading, setContactsLoading] = useState(false)
|
||||||
|
|
||||||
|
// UI states
|
||||||
const [showJumpDialog, setShowJumpDialog] = useState(false)
|
const [showJumpDialog, setShowJumpDialog] = useState(false)
|
||||||
const [jumpTargetDate, setJumpTargetDate] = useState<Date | undefined>(undefined)
|
|
||||||
const [previewImage, setPreviewImage] = useState<{ src: string, isVideo?: boolean, liveVideoPath?: string } | null>(null)
|
const [previewImage, setPreviewImage] = useState<{ src: string, isVideo?: boolean, liveVideoPath?: string } | null>(null)
|
||||||
const [debugPost, setDebugPost] = useState<SnsPost | null>(null)
|
const [debugPost, setDebugPost] = useState<SnsPost | null>(null)
|
||||||
|
|
||||||
const postsContainerRef = useRef<HTMLDivElement>(null)
|
const postsContainerRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
const [hasNewer, setHasNewer] = useState(false)
|
const [hasNewer, setHasNewer] = useState(false)
|
||||||
const [loadingNewer, setLoadingNewer] = useState(false)
|
const [loadingNewer, setLoadingNewer] = useState(false)
|
||||||
const postsRef = useRef<SnsPost[]>([])
|
const postsRef = useRef<SnsPost[]>([])
|
||||||
const scrollAdjustmentRef = useRef<number>(0)
|
const scrollAdjustmentRef = useRef<number>(0)
|
||||||
|
|
||||||
// 同步 posts 到 ref 供 loadPosts 使用
|
// Sync posts ref
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
postsRef.current = posts
|
postsRef.current = posts
|
||||||
}, [posts])
|
}, [posts])
|
||||||
|
|
||||||
// 处理向上加载动态时的滚动位置保持
|
// Maintain scroll position when loading newer posts
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (scrollAdjustmentRef.current !== 0 && postsContainerRef.current) {
|
if (scrollAdjustmentRef.current !== 0 && postsContainerRef.current) {
|
||||||
const container = postsContainerRef.current;
|
const container = postsContainerRef.current;
|
||||||
@@ -488,6 +72,7 @@ export default function SnsPage() {
|
|||||||
let endTs: number | undefined = undefined
|
let endTs: number | undefined = undefined
|
||||||
|
|
||||||
if (reset) {
|
if (reset) {
|
||||||
|
// If jumping to date, set endTs to end of that day
|
||||||
if (jumpTargetDate) {
|
if (jumpTargetDate) {
|
||||||
endTs = Math.floor(jumpTargetDate.getTime() / 1000) + 86399
|
endTs = Math.floor(jumpTargetDate.getTime() / 1000) + 86399
|
||||||
}
|
}
|
||||||
@@ -496,7 +81,6 @@ export default function SnsPage() {
|
|||||||
if (currentPosts.length > 0) {
|
if (currentPosts.length > 0) {
|
||||||
const topTs = currentPosts[0].createTime
|
const topTs = currentPosts[0].createTime
|
||||||
|
|
||||||
|
|
||||||
const result = await window.electronAPI.sns.getTimeline(
|
const result = await window.electronAPI.sns.getTimeline(
|
||||||
limit,
|
limit,
|
||||||
0,
|
0,
|
||||||
@@ -526,6 +110,7 @@ export default function SnsPage() {
|
|||||||
loadingRef.current = false;
|
loadingRef.current = false;
|
||||||
return;
|
return;
|
||||||
} else {
|
} else {
|
||||||
|
// Loading older
|
||||||
const currentPosts = postsRef.current
|
const currentPosts = postsRef.current
|
||||||
if (currentPosts.length > 0) {
|
if (currentPosts.length > 0) {
|
||||||
endTs = currentPosts[currentPosts.length - 1].createTime - 1
|
endTs = currentPosts[currentPosts.length - 1].createTime - 1
|
||||||
@@ -537,7 +122,7 @@ export default function SnsPage() {
|
|||||||
0,
|
0,
|
||||||
selectedUsernames,
|
selectedUsernames,
|
||||||
searchKeyword,
|
searchKeyword,
|
||||||
startTs,
|
startTs, // default undefined
|
||||||
endTs
|
endTs
|
||||||
)
|
)
|
||||||
|
|
||||||
@@ -546,7 +131,7 @@ export default function SnsPage() {
|
|||||||
setPosts(result.timeline)
|
setPosts(result.timeline)
|
||||||
setHasMore(result.timeline.length >= limit)
|
setHasMore(result.timeline.length >= limit)
|
||||||
|
|
||||||
// 探测上方是否还有新动态（利用 DLL 过滤，而非底层 SQL）
|
// Check for newer items above topTs
|
||||||
const topTs = result.timeline[0]?.createTime || 0;
|
const topTs = result.timeline[0]?.createTime || 0;
|
||||||
if (topTs > 0) {
|
if (topTs > 0) {
|
||||||
const checkResult = await window.electronAPI.sns.getTimeline(1, 0, selectedUsernames, searchKeyword, topTs + 1, undefined);
|
const checkResult = await window.electronAPI.sns.getTimeline(1, 0, selectedUsernames, searchKeyword, topTs + 1, undefined);
|
||||||
@@ -576,7 +161,7 @@ export default function SnsPage() {
|
|||||||
}
|
}
|
||||||
}, [selectedUsernames, searchKeyword, jumpTargetDate])
|
}, [selectedUsernames, searchKeyword, jumpTargetDate])
|
||||||
|
|
||||||
// 获取联系人列表
|
// Load Contacts
|
||||||
const loadContacts = useCallback(async () => {
|
const loadContacts = useCallback(async () => {
|
||||||
setContactsLoading(true)
|
setContactsLoading(true)
|
||||||
try {
|
try {
|
||||||
@@ -622,372 +207,130 @@ export default function SnsPage() {
|
|||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
// 初始加载
|
// Initial Load & Listeners
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const checkSchema = async () => {
|
|
||||||
try {
|
|
||||||
const schema = await window.electronAPI.chat.execQuery('sns', null, "PRAGMA table_info(SnsTimeLine)");
|
|
||||||
|
|
||||||
if (schema.success && schema.rows) {
|
|
||||||
const columns = schema.rows.map((r: any) => r.name);
|
|
||||||
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error('[SnsPage] Failed to check schema:', e);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
checkSchema();
|
|
||||||
loadContacts()
|
loadContacts()
|
||||||
}, [loadContacts])
|
}, [loadContacts])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleChange = () => {
|
const handleChange = () => {
|
||||||
setPosts([])
|
// wxid changed, reset everything
|
||||||
setHasMore(true)
|
setPosts([]); setHasMore(true); setHasNewer(false);
|
||||||
setHasNewer(false)
|
setSelectedUsernames([]); setSearchKeyword(''); setJumpTargetDate(undefined);
|
||||||
setSelectedUsernames([])
|
loadContacts();
|
||||||
setSearchKeyword('')
|
loadPosts({ reset: true });
|
||||||
setJumpTargetDate(undefined)
|
|
||||||
loadContacts()
|
|
||||||
loadPosts({ reset: true })
|
|
||||||
}
|
}
|
||||||
window.addEventListener('wxid-changed', handleChange as EventListener)
|
window.addEventListener('wxid-changed', handleChange as EventListener)
|
||||||
return () => window.removeEventListener('wxid-changed', handleChange as EventListener)
|
return () => window.removeEventListener('wxid-changed', handleChange as EventListener)
|
||||||
}, [loadContacts, loadPosts])
|
}, [loadContacts, loadPosts])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadPosts({ reset: true })
|
const timer = setTimeout(() => {
|
||||||
}, [selectedUsernames, searchKeyword, jumpTargetDate])
|
loadPosts({ reset: true })
|
||||||
|
}, 500)
|
||||||
|
return () => clearTimeout(timer)
|
||||||
|
}, [selectedUsernames, searchKeyword, jumpTargetDate, loadPosts])
|
||||||
|
|
||||||
const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
|
const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
|
||||||
const { scrollTop, clientHeight, scrollHeight } = e.currentTarget
|
const { scrollTop, clientHeight, scrollHeight } = e.currentTarget
|
||||||
|
|
||||||
// 加载更旧的动态（触底）
|
|
||||||
if (scrollHeight - scrollTop - clientHeight < 400 && hasMore && !loading && !loadingNewer) {
|
if (scrollHeight - scrollTop - clientHeight < 400 && hasMore && !loading && !loadingNewer) {
|
||||||
loadPosts({ direction: 'older' })
|
loadPosts({ direction: 'older' })
|
||||||
}
|
}
|
||||||
|
|
||||||
// 加载更新的动态（触顶触发）
|
|
||||||
// 这里的阈值可以保留，但主要依赖下面的 handleWheel 捕获到顶后的上划
|
|
||||||
if (scrollTop < 10 && hasNewer && !loading && !loadingNewer) {
|
if (scrollTop < 10 && hasNewer && !loading && !loadingNewer) {
|
||||||
loadPosts({ direction: 'newer' })
|
loadPosts({ direction: 'newer' })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理到顶后的手动上滚意图
|
|
||||||
const handleWheel = (e: React.WheelEvent<HTMLDivElement>) => {
|
const handleWheel = (e: React.WheelEvent<HTMLDivElement>) => {
|
||||||
const container = postsContainerRef.current
|
const container = postsContainerRef.current
|
||||||
if (!container) return
|
if (!container) return
|
||||||
|
|
||||||
// deltaY < 0 表示向上滚，scrollTop === 0 表示已经在最顶端
|
|
||||||
if (e.deltaY < -20 && container.scrollTop <= 0 && hasNewer && !loading && !loadingNewer) {
|
if (e.deltaY < -20 && container.scrollTop <= 0 && hasNewer && !loading && !loadingNewer) {
|
||||||
|
|
||||||
loadPosts({ direction: 'newer' })
|
loadPosts({ direction: 'newer' })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const formatTime = (ts: number) => {
|
|
||||||
const date = new Date(ts * 1000)
|
|
||||||
const isCurrentYear = date.getFullYear() === new Date().getFullYear()
|
|
||||||
|
|
||||||
return date.toLocaleString('zh-CN', {
|
|
||||||
year: isCurrentYear ? undefined : 'numeric',
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const toggleUserSelection = (username: string) => {
|
|
||||||
// 选择联系人时，如果当前有时间跳转，建议清除时间跳转以避免“跳到旧动态”的困惑
|
|
||||||
// 或者保持原样。根据用户反馈“乱跳”，我们在这里选择：
|
|
||||||
// 如果用户选择了新的一个人，而之前有时间跳转，我们重置时间跳转到最新。
|
|
||||||
setJumpTargetDate(undefined);
|
|
||||||
|
|
||||||
setSelectedUsernames(prev => {
|
|
||||||
if (prev.includes(username)) {
|
|
||||||
return prev.filter(u => u !== username)
|
|
||||||
} else {
|
|
||||||
return [...prev, username]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const clearFilters = () => {
|
|
||||||
setSearchKeyword('')
|
|
||||||
setSelectedUsernames([])
|
|
||||||
setJumpTargetDate(undefined)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filteredContacts = contacts.filter(c =>
|
|
||||||
c.displayName.toLowerCase().includes(contactSearch.toLowerCase()) ||
|
|
||||||
c.username.toLowerCase().includes(contactSearch.toLowerCase())
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="sns-page">
|
<div className="sns-page-layout">
|
||||||
<div className="sns-container">
|
<div className="sns-main-viewport" onScroll={handleScroll} onWheel={handleWheel} ref={postsContainerRef}>
|
||||||
<main className="sns-main">
|
<div className="sns-feed-container">
|
||||||
<div className="sns-header">
|
<div className="feed-header">
|
||||||
<div className="header-left">
|
<h2>朋友圈</h2>
|
||||||
<h2>社交动态</h2>
|
<div className="header-actions">
|
||||||
</div>
|
|
||||||
<div className="header-right">
|
|
||||||
<button
|
<button
|
||||||
className={`icon-btn sidebar-trigger ${isSidebarOpen ? 'active' : ''}`}
|
onClick={() => loadPosts({ reset: true })}
|
||||||
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
|
|
||||||
title={isSidebarOpen ? "收起筛选" : "打开筛选"}
|
|
||||||
>
|
|
||||||
<Filter size={18} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
if (jumpTargetDate) setJumpTargetDate(undefined);
|
|
||||||
loadPosts({ reset: true });
|
|
||||||
}}
|
|
||||||
disabled={loading || loadingNewer}
|
disabled={loading || loadingNewer}
|
||||||
className="icon-btn refresh-btn"
|
className="icon-btn refresh-btn"
|
||||||
title="刷新"
|
title="从头刷新"
|
||||||
>
|
>
|
||||||
<RefreshCw size={18} className={(loading || loadingNewer) ? 'spinning' : ''} />
|
<RefreshCw size={20} className={(loading || loadingNewer) ? 'spinning' : ''} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="sns-content-wrapper">
|
{loadingNewer && (
|
||||||
<div className="sns-content custom-scrollbar" onScroll={handleScroll} onWheel={handleWheel} ref={postsContainerRef}>
|
<div className="status-indicator loading-newer">
|
||||||
<div className="posts-list">
|
<RefreshCw size={16} className="spinning" />
|
||||||
{loadingNewer && (
|
<span>正在检查更新的动态...</span>
|
||||||
<div className="status-indicator loading-newer">
|
</div>
|
||||||
<RefreshCw size={16} className="spinning" />
|
)}
|
||||||
<span>正在检查更新的动态...</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!loadingNewer && hasNewer && (
|
|
||||||
<div className="status-indicator newer-hint" onClick={() => loadPosts({ direction: 'newer' })}>
|
|
||||||
查看更新的动态
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{posts.map((post) => {
|
|
||||||
const linkCard = buildLinkCardData(post)
|
|
||||||
const hasVideoMedia = post.type === 15 || post.media.some((item) => isSnsVideoUrl(item.url))
|
|
||||||
const showLinkCard = Boolean(linkCard) && post.media.length <= 1 && !hasVideoMedia
|
|
||||||
const showMediaGrid = post.media.length > 0 && !showLinkCard
|
|
||||||
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>
|
|
||||||
<button
|
|
||||||
className="debug-btn"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
setDebugPost(post);
|
|
||||||
}}
|
|
||||||
title="查看原始数据"
|
|
||||||
>
|
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
||||||
<polyline points="16 18 22 12 16 6"></polyline>
|
|
||||||
<polyline points="8 6 2 12 8 18"></polyline>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="post-body">
|
{!loadingNewer && hasNewer && (
|
||||||
{post.contentDesc && <div className="post-text">{post.contentDesc}</div>}
|
<div className="status-indicator newer-hint" onClick={() => loadPosts({ direction: 'newer' })}>
|
||||||
|
有新动态，点击查看
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{showLinkCard && linkCard && (
|
<div className="posts-list">
|
||||||
<SnsLinkCard card={linkCard} />
|
{posts.map(post => (
|
||||||
)}
|
<SnsPostItem
|
||||||
|
key={post.id}
|
||||||
|
post={post}
|
||||||
|
onPreview={(src, isVideo, liveVideoPath) => setPreviewImage({ src, isVideo, liveVideoPath })}
|
||||||
|
onDebug={(p) => setDebugPost(p)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
{showMediaGrid && (
|
{loading && <div className="status-indicator loading-more">
|
||||||
<div className={`post-media-grid media-count-${Math.min(post.media.length, 9)}`}>
|
<RefreshCw size={16} className="spinning" />
|
||||||
{post.media.map((m, idx) => (
|
<span>正在加载更多...</span>
|
||||||
<MediaItem key={idx} media={m} onPreview={(src, isVideo, liveVideoPath) => setPreviewImage({ src, isVideo, liveVideoPath })} />
|
</div>}
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{(post.likes.length > 0 || post.comments.length > 0) && (
|
{!hasMore && posts.length > 0 && (
|
||||||
<div className="post-footer">
|
<div className="status-indicator no-more">已经到底啦</div>
|
||||||
{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 && (
|
{!loading && posts.length === 0 && (
|
||||||
<div className="comments-section">
|
<div className="no-results">
|
||||||
{post.comments.map((c, idx) => (
|
<div className="no-results-icon"><Search size={48} /></div>
|
||||||
<div key={idx} className="comment-item">
|
<p>未找到相关动态</p>
|
||||||
<span className="comment-user">{c.nickname}</span>
|
{(selectedUsernames.length > 0 || searchKeyword || jumpTargetDate) && (
|
||||||
{c.refNickname && (
|
<button onClick={() => {
|
||||||
<>
|
setSearchKeyword(''); setSelectedUsernames([]); setJumpTargetDate(undefined);
|
||||||
<span className="reply-text">回复</span>
|
}} className="reset-inline">
|
||||||
<span className="comment-user">{c.refNickname}</span>
|
重置筛选条件
|
||||||
</>
|
</button>
|
||||||
)}
|
|
||||||
<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>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</main>
|
</div>
|
||||||
|
|
||||||
{/* 侧边栏：过滤与搜索 (moved to right) */}
|
|
||||||
<aside className={`sns-sidebar ${isSidebarOpen ? 'open' : 'closed'}`}>
|
|
||||||
<div className="sidebar-header">
|
|
||||||
<h3>筛选条件</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="filter-content custom-scrollbar">
|
|
||||||
{/* 1. 搜索分组 (放到最顶上) */}
|
|
||||||
<div className="filter-card">
|
|
||||||
<div className="filter-section">
|
|
||||||
<label><Search size={14} /> 关键词搜索</label>
|
|
||||||
<div className="search-input-wrapper">
|
|
||||||
<Search size={14} className="input-icon" />
|
|
||||||
<input
|
|
||||||
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>
|
|
||||||
|
|
||||||
{/* 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>
|
|
||||||
|
|
||||||
|
|
||||||
{/* 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>
|
|
||||||
</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}>
|
|
||||||
<RefreshCw size={14} />
|
|
||||||
重置所有筛选
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<SnsFilterPanel
|
||||||
|
searchKeyword={searchKeyword}
|
||||||
|
setSearchKeyword={setSearchKeyword}
|
||||||
|
jumpTargetDate={jumpTargetDate}
|
||||||
|
setJumpTargetDate={setJumpTargetDate}
|
||||||
|
onOpenJumpDialog={() => setShowJumpDialog(true)}
|
||||||
|
selectedUsernames={selectedUsernames}
|
||||||
|
setSelectedUsernames={setSelectedUsernames}
|
||||||
|
contacts={contacts}
|
||||||
|
contactSearch={contactSearch}
|
||||||
|
setContactSearch={setContactSearch}
|
||||||
|
loading={contactsLoading}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Dialogs and Overlays */}
|
||||||
{previewImage && (
|
{previewImage && (
|
||||||
<ImagePreview
|
<ImagePreview
|
||||||
src={previewImage.src}
|
src={previewImage.src}
|
||||||
@@ -996,11 +339,10 @@ export default function SnsPage() {
|
|||||||
onClose={() => setPreviewImage(null)}
|
onClose={() => setPreviewImage(null)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<JumpToDateDialog
|
<JumpToDateDialog
|
||||||
isOpen={showJumpDialog}
|
isOpen={showJumpDialog}
|
||||||
onClose={() => {
|
onClose={() => setShowJumpDialog(false)}
|
||||||
setShowJumpDialog(false)
|
|
||||||
}}
|
|
||||||
onSelect={(date) => {
|
onSelect={(date) => {
|
||||||
setJumpTargetDate(date)
|
setJumpTargetDate(date)
|
||||||
setShowJumpDialog(false)
|
setShowJumpDialog(false)
|
||||||
@@ -1008,149 +350,19 @@ export default function SnsPage() {
|
|||||||
currentDate={jumpTargetDate || new Date()}
|
currentDate={jumpTargetDate || new Date()}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Debug Info Dialog */}
|
|
||||||
{debugPost && (
|
{debugPost && (
|
||||||
<div className="modal-overlay" onClick={() => setDebugPost(null)}>
|
<div className="modal-overlay" onClick={() => setDebugPost(null)}>
|
||||||
<div className="debug-dialog" onClick={(e) => e.stopPropagation()}>
|
<div className="debug-dialog" onClick={(e) => e.stopPropagation()}>
|
||||||
<div className="debug-dialog-header">
|
<div className="debug-dialog-header">
|
||||||
<h3>原始数据 - {debugPost.nickname}</h3>
|
<h3>原始数据</h3>
|
||||||
<button className="close-btn" onClick={() => setDebugPost(null)}>
|
<button className="close-btn" onClick={() => setDebugPost(null)}>
|
||||||
<X size={20} />
|
<X size={20} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="debug-dialog-body">
|
<div className="debug-dialog-body">
|
||||||
|
<pre className="json-code">
|
||||||
<div className="debug-section">
|
{JSON.stringify(debugPost, null, 2)}
|
||||||
<h4>ℹ 基本信息</h4>
|
</pre>
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">ID:</span>
|
|
||||||
<span className="debug-value">{debugPost.id}</span>
|
|
||||||
</div>
|
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">用户名:</span>
|
|
||||||
<span className="debug-value">{debugPost.username}</span>
|
|
||||||
</div>
|
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">昵称:</span>
|
|
||||||
<span className="debug-value">{debugPost.nickname}</span>
|
|
||||||
</div>
|
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">时间:</span>
|
|
||||||
<span className="debug-value">{new Date(debugPost.createTime * 1000).toLocaleString()}</span>
|
|
||||||
</div>
|
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">类型:</span>
|
|
||||||
<span className="debug-value">{debugPost.type}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="debug-section">
|
|
||||||
<h4> 媒体信息 ({debugPost.media.length} 项)</h4>
|
|
||||||
{debugPost.media.map((media, idx) => (
|
|
||||||
<div key={idx} className="media-debug-item">
|
|
||||||
<div className="media-debug-header">媒体 {idx + 1}</div>
|
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">URL:</span>
|
|
||||||
<span className="debug-value">{media.url}</span>
|
|
||||||
</div>
|
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">缩略图:</span>
|
|
||||||
<span className="debug-value">{media.thumb}</span>
|
|
||||||
</div>
|
|
||||||
{media.md5 && (
|
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">MD5:</span>
|
|
||||||
<span className="debug-value">{media.md5}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{media.token && (
|
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">Token:</span>
|
|
||||||
<span className="debug-value">{media.token}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{media.key && (
|
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">Key (解密密钥):</span>
|
|
||||||
<span className="debug-value">{media.key}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{media.encIdx && (
|
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">Enc Index:</span>
|
|
||||||
<span className="debug-value">{media.encIdx}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{media.livePhoto && (
|
|
||||||
<div className="live-photo-debug">
|
|
||||||
<div className="live-photo-label"> Live Photo 视频部分:</div>
|
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">视频 URL:</span>
|
|
||||||
<span className="debug-value">{media.livePhoto.url}</span>
|
|
||||||
</div>
|
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">视频缩略图:</span>
|
|
||||||
<span className="debug-value">{media.livePhoto.thumb}</span>
|
|
||||||
</div>
|
|
||||||
{media.livePhoto.token && (
|
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">视频 Token:</span>
|
|
||||||
<span className="debug-value">{media.livePhoto.token}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{media.livePhoto.key && (
|
|
||||||
<div className="debug-item">
|
|
||||||
<span className="debug-key">视频 Key:</span>
|
|
||||||
<span className="debug-value">{media.livePhoto.key}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 原始 XML */}
|
|
||||||
{debugPost.rawXml && (
|
|
||||||
<div className="debug-section">
|
|
||||||
<h4> 原始 XML 数据</h4>
|
|
||||||
<pre className="json-code">{(() => {
|
|
||||||
// XML 缩进格式化
|
|
||||||
let formatted = '';
|
|
||||||
let indent = 0;
|
|
||||||
const tab = ' ';
|
|
||||||
const parts = debugPost.rawXml.split(/(<[^>]+>)/g).filter(p => p.trim());
|
|
||||||
|
|
||||||
for (const part of parts) {
|
|
||||||
if (!part.startsWith('<')) {
|
|
||||||
if (part.trim()) formatted += part;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (part.startsWith('</')) {
|
|
||||||
indent = Math.max(0, indent - 1);
|
|
||||||
formatted += '\n' + tab.repeat(indent) + part;
|
|
||||||
} else if (part.endsWith('/>')) {
|
|
||||||
formatted += '\n' + tab.repeat(indent) + part;
|
|
||||||
} else {
|
|
||||||
formatted += '\n' + tab.repeat(indent) + part;
|
|
||||||
indent++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return formatted.trim();
|
|
||||||
})()}</pre>
|
|
||||||
<button
|
|
||||||
className="copy-json-btn"
|
|
||||||
onClick={() => {
|
|
||||||
navigator.clipboard.writeText(debugPost.rawXml || '');
|
|
||||||
alert('已复制 XML 到剪贴板');
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
复制 XML
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,47 @@
|
|||||||
|
export interface SnsLivePhoto {
|
||||||
|
url: string
|
||||||
|
thumb: string
|
||||||
|
token?: string
|
||||||
|
key?: string
|
||||||
|
encIdx?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SnsMedia {
|
||||||
|
url: string
|
||||||
|
thumb: string
|
||||||
|
md5?: string
|
||||||
|
token?: string
|
||||||
|
key?: string
|
||||||
|
encIdx?: string
|
||||||
|
livePhoto?: SnsLivePhoto
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SnsComment {
|
||||||
|
id: string
|
||||||
|
nickname: string
|
||||||
|
content: string
|
||||||
|
refCommentId: string
|
||||||
|
refNickname?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SnsPost {
|
||||||
|
id: string
|
||||||
|
username: string
|
||||||
|
nickname: string
|
||||||
|
avatarUrl?: string
|
||||||
|
createTime: number
|
||||||
|
contentDesc: string
|
||||||
|
type?: number
|
||||||
|
media: SnsMedia[]
|
||||||
|
likes: string[]
|
||||||
|
comments: SnsComment[]
|
||||||
|
rawXml?: string
|
||||||
|
linkTitle?: string
|
||||||
|
linkUrl?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SnsLinkCardData {
|
||||||
|
title: string
|
||||||
|
url: string
|
||||||
|
thumb?: string
|
||||||
|
}
|
||||||
Reference in new issue
Block a user