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> <!doctype html>
<html lang="en"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>frontend</title> <title>新闻爬虫系统</title>
</head> </head>
<body> <body>
<div id="root"></div> <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 [logs, setLogs] = useState<LogEntry[]>([])
const wsRef = useRef<WebSocket | null>(null) const wsRef = useRef<WebSocket | null>(null)
const logsEndRef = useRef<HTMLDivElement>(null) const logsEndRef = useRef<HTMLDivElement>(null)
const taskCardRefs = useRef<Map<string, HTMLDivElement>>(new Map())
useEffect(() => { useEffect(() => {
loadTasks() loadTasks()
@ -30,6 +31,13 @@ export function Tasks() {
useEffect(() => { useEffect(() => {
if (expandedTask) { if (expandedTask) {
connectWebSocket(expandedTask) connectWebSocket(expandedTask)
// 滚动到任务卡片
setTimeout(() => {
const cardElement = taskCardRefs.current.get(expandedTask)
if (cardElement) {
cardElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
}
}, 100)
} }
return () => { return () => {
if (wsRef.current) { if (wsRef.current) {
@ -40,10 +48,11 @@ export function Tasks() {
}, [expandedTask]) }, [expandedTask])
useEffect(() => { 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 () => { const loadTasks = async () => {
try { try {
@ -157,6 +166,11 @@ const loadTasks = async () => {
{tasks.map((task) => ( {tasks.map((task) => (
<motion.div <motion.div
key={task.id} key={task.id}
ref={(el) => {
if (el) {
taskCardRefs.current.set(task.id, el as HTMLDivElement)
}
}}
variants={itemVariants} variants={itemVariants}
className="glass-card rounded-2xl overflow-hidden" className="glass-card rounded-2xl overflow-hidden"
> >