feat: 完成 P1 全部功能 + 修复 proxy 导出 + 切换 MySQL 端口至 14013
## P1 功能（20 项） - 站内消息系统、家长仪表盘、学生考勤管理 - Excel 导入导出、用户批量导入、成绩导出 - 排课规则+自动排课+课表调整 - 成绩趋势+对比分析、密码安全策略、速率限制 - 数据变更日志、文件预览+存储策略、全文检索 - 依赖审计集成 CI、数据库定时备份、E2E 测试完善 - 通知偏好管理 ## 基础设施修复 - src/proxy.ts: 将 middleware 导出重命名为 proxy（Next.js 16 要求） - .env: MySQL 端口从 13002 切换至 14013 - scripts/create-db.ts: 新增数据库初始化脚本 ## 架构文档同步 - 004_architecture_impact_map.md 和 005_architecture_data.json 完整记录所有新增表、模块、路由、权限、依赖关系
This commit is contained in:
SpecialX
221
src/shared/components/global-search.tsx
Normal file
221
src/shared/components/global-search.tsx
Normal file
@@ -0,0 +1,221 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import Link from "next/link"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Search, FileText, BookOpen, FileQuestion, Megaphone, Loader2 } from "lucide-react"
|
||||
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { useDebounce } from "@/shared/hooks/use-debounce"
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
|
||||
type ResultType = "question" | "textbook" | "exam" | "announcement"
|
||||
|
||||
interface SearchResultItem {
|
||||
id: string
|
||||
title: string
|
||||
snippet: string
|
||||
type: ResultType
|
||||
href: string
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
interface SearchResponse {
|
||||
success: boolean
|
||||
results: SearchResultItem[]
|
||||
total: number
|
||||
query: string
|
||||
}
|
||||
|
||||
const TYPE_ICON: Record<ResultType, React.ComponentType<{ className?: string }>> = {
|
||||
question: FileQuestion,
|
||||
textbook: BookOpen,
|
||||
exam: FileText,
|
||||
announcement: Megaphone,
|
||||
}
|
||||
|
||||
const TYPE_LABEL: Record<ResultType, string> = {
|
||||
question: "Question",
|
||||
textbook: "Textbook",
|
||||
exam: "Exam",
|
||||
announcement: "Announcement",
|
||||
}
|
||||
|
||||
interface GlobalSearchProps {
|
||||
className?: string
|
||||
placeholder?: string
|
||||
}
|
||||
|
||||
export function GlobalSearch({
|
||||
className,
|
||||
placeholder = "Search... (Cmd+K)",
|
||||
}: GlobalSearchProps) {
|
||||
const router = useRouter()
|
||||
const [query, setQuery] = React.useState("")
|
||||
const [open, setOpen] = React.useState(false)
|
||||
const [loading, setLoading] = React.useState(false)
|
||||
const [results, setResults] = React.useState<SearchResultItem[]>([])
|
||||
const [error, setError] = React.useState<string | null>(null)
|
||||
const [activeIndex, setActiveIndex] = React.useState(0)
|
||||
|
||||
const debouncedQuery = useDebounce(query, 300)
|
||||
const containerRef = React.useRef<HTMLDivElement>(null)
|
||||
const inputRef = React.useRef<HTMLInputElement>(null)
|
||||
|
||||
// Cmd/Ctrl + K 快捷键聚焦
|
||||
React.useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
|
||||
e.preventDefault()
|
||||
inputRef.current?.focus()
|
||||
setOpen(true)
|
||||
}
|
||||
if (e.key === "Escape") {
|
||||
setOpen(false)
|
||||
inputRef.current?.blur()
|
||||
}
|
||||
}
|
||||
window.addEventListener("keydown", handler)
|
||||
return () => window.removeEventListener("keydown", handler)
|
||||
}, [])
|
||||
|
||||
// 点击外部关闭
|
||||
React.useEffect(() => {
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||||
setOpen(false)
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handler)
|
||||
return () => document.removeEventListener("mousedown", handler)
|
||||
}, [])
|
||||
|
||||
// 防抖后发起搜索
|
||||
React.useEffect(() => {
|
||||
const q = debouncedQuery.trim()
|
||||
if (!q) {
|
||||
setResults([])
|
||||
setError(null)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
let cancelled = false
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
fetch(`/api/search?q=${encodeURIComponent(q)}&type=all&pageSize=20`)
|
||||
.then((r) => r.json())
|
||||
.then((data: SearchResponse) => {
|
||||
if (cancelled) return
|
||||
if (!data.success) {
|
||||
setError("Search failed")
|
||||
setResults([])
|
||||
} else {
|
||||
setResults(data.results)
|
||||
setActiveIndex(0)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
if (cancelled) return
|
||||
setError("Network error")
|
||||
setResults([])
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setLoading(false)
|
||||
})
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [debouncedQuery])
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault()
|
||||
setActiveIndex((i) => Math.min(i + 1, results.length - 1))
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault()
|
||||
setActiveIndex((i) => Math.max(i - 1, 0))
|
||||
} else if (e.key === "Enter") {
|
||||
e.preventDefault()
|
||||
const item = results[activeIndex]
|
||||
if (item) {
|
||||
setOpen(false)
|
||||
router.push(item.href)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const showDropdown = open && query.trim().length > 0
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className={cn("relative", className)}>
|
||||
<Search className="text-muted-foreground absolute top-2.5 left-2.5 size-4" />
|
||||
<Input
|
||||
ref={inputRef}
|
||||
type="search"
|
||||
placeholder={placeholder}
|
||||
className="w-[200px] pl-9 lg:w-[300px]"
|
||||
value={query}
|
||||
onChange={(e) => {
|
||||
setQuery(e.target.value)
|
||||
setOpen(true)
|
||||
}}
|
||||
onFocus={() => setOpen(true)}
|
||||
onKeyDown={handleKeyDown}
|
||||
aria-label="Global search"
|
||||
/>
|
||||
{showDropdown ? (
|
||||
<div className="absolute top-full right-0 z-50 mt-1 w-[min(480px,calc(100vw-2rem))] rounded-md border bg-popover p-0 shadow-md">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center gap-2 px-4 py-8 text-sm text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Searching...
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="px-4 py-8 text-center text-sm text-destructive">{error}</div>
|
||||
) : results.length === 0 ? (
|
||||
<div className="px-4 py-8 text-center text-sm text-muted-foreground">
|
||||
No results found for “{query}”
|
||||
</div>
|
||||
) : (
|
||||
<ul className="max-h-[60vh] overflow-auto py-1" role="listbox">
|
||||
{results.map((item, idx) => {
|
||||
const Icon = TYPE_ICON[item.type]
|
||||
return (
|
||||
<li key={`${item.type}-${item.id}`} role="option" aria-selected={idx === activeIndex}>
|
||||
<Link
|
||||
href={item.href}
|
||||
onClick={() => {
|
||||
setOpen(false)
|
||||
setQuery("")
|
||||
}}
|
||||
className={cn(
|
||||
"flex items-start gap-3 px-3 py-2 text-sm transition-colors hover:bg-accent",
|
||||
idx === activeIndex && "bg-accent"
|
||||
)}
|
||||
onMouseEnter={() => setActiveIndex(idx)}
|
||||
>
|
||||
<Icon className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="truncate font-medium">{item.title}</p>
|
||||
<span className="shrink-0 text-xs text-muted-foreground">
|
||||
{TYPE_LABEL[item.type]}
|
||||
</span>
|
||||
</div>
|
||||
{item.snippet ? (
|
||||
<p className="mt-0.5 line-clamp-1 text-xs text-muted-foreground">
|
||||
{item.snippet}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
29
src/shared/components/ui/switch.tsx
Normal file
29
src/shared/components/ui/switch.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SwitchPrimitives from "@radix-ui/react-switch"
|
||||
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
|
||||
const Switch = React.forwardRef<
|
||||
React.ElementRef<typeof SwitchPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
))
|
||||
Switch.displayName = SwitchPrimitives.Root.displayName
|
||||
|
||||
export { Switch }
|
||||
Reference in New Issue
Block a user