shenjianZ
/
news-classifier
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 增加网站icon；优化任务历史的任务卡片滚动逻辑

This commit is contained in:
shenjianZ 2026-01-22 17:57:39 +08:00
parent ea4e09d674
commit 0444c200ee
3 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
crawler-module/frontend/index.html
View File

@ -1,10 +1,10 @@
<!doctype html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>frontend</title>
<title>新闻爬虫系统</title>
</head>
<body>
<div id="root"></div>

13
crawler-module/frontend/public/favicon.svg Normal file
View File

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#ea580c;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="64" height="64" rx="12" fill="url(#grad1)"/>
<path d="M16 20 L32 12 L48 20 L48 32 L32 40 L16 32 Z" fill="white" opacity="0.9"/>
<path d="M16 32 L16 44 L32 52 L32 40" fill="white" opacity="0.7"/>
<path d="M48 32 L48 44 L32 52 L32 40" fill="white" opacity="0.5"/>
<circle cx="32" cy="28" r="4" fill="#3b82f6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 660 B

20
crawler-module/frontend/src/pages/Tasks.tsx
View File

@ -17,6 +17,7 @@ export function Tasks() {
const [logs, setLogs] = useState<LogEntry[]>([])
const wsRef = useRef<WebSocket | null>(null)
const logsEndRef = useRef<HTMLDivElement>(null)
const taskCardRefs = useRef<Map<string, HTMLDivElement>>(new Map())
useEffect(() => {
loadTasks()
@ -30,6 +31,13 @@ export function Tasks() {
useEffect(() => {
if (expandedTask) {
connectWebSocket(expandedTask)
// 滚动到任务卡片
setTimeout(() => {
const cardElement = taskCardRefs.current.get(expandedTask)
if (cardElement) {
cardElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
}
}, 100)
}
return () => {
if (wsRef.current) {
@ -40,10 +48,11 @@ export function Tasks() {
}, [expandedTask])
useEffect(() => {
if (logsEndRef.current) {
logsEndRef.current.scrollIntoView({ behavior: 'smooth' })
// 只在首次展开时滚动到日志区域，而不是每次日志更新都滚动
if (logsEndRef.current && logs.length === 0) {
logsEndRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
}
}, [logs])
}, [logs.length])
const loadTasks = async () => {
try {
@ -157,6 +166,11 @@ const loadTasks = async () => {
{tasks.map((task) => (
<motion.div
key={task.id}
ref={(el) => {
if (el) {
taskCardRefs.current.set(task.id, el as HTMLDivElement)
}
}}
variants={itemVariants}
className="glass-card rounded-2xl overflow-hidden"
>