feat: UI优化和功能完善

- 添加公共分页组件，支持上边显示、分页大小10
- 侧边栏/Header按Liner风格优化，添加动画效果
- 异常处理列表支持分页和明细弹窗
- 任务结果页面支持已匹配列表分页
- 修复Dialog弹窗背景透明问题
- 新增dropdown-menu组件
- 添加parsed_file_record模型和回填脚本
- 前端枚举中文化

frontend/components/layout/Header.tsx

@@ -1,11 +1,34 @@
 "use client";
 
+import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { LogOut, User } from "lucide-react";
+import { 
+  LogOut, 
+  User, 
+  Bell,
+  Moon,
+  Sun,
+  Workflow
+} from "lucide-react";
 import { useAuthStore } from "@/lib/stores/auth-store";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { api } from "@/lib/api/client";
 import ENDPOINTS from "@/lib/api/endpoints";
+import { cn } from "@/lib/utils";
+
+const ROLE_LABELS: Record<string, string> = {
+  admin: "管理员",
+  accountant: "会计",
+  viewer: "查看者",
+};
 
 export function Header() {
   const router = useRouter();
@@ -13,68 +36,78 @@ export function Header() {
 
   const handleLogout = async () => {
     try {
-      // 调用后端登出接口
       await api.post(ENDPOINTS.AUTH.LOGOUT);
     } catch {
       // 即使后端失败也清除本地状态
     }
     
-    // 清除本地状态
     logout();
-    
-    // 跳转到登录页
     router.push("/login");
   };
 
   if (!user) return null;
 
   return (
-    <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <header className="sticky top-0 z-50 w-full border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60">
       <div className="flex h-14 items-center justify-between px-6">
         {/* 左侧 - Logo 和系统名称 */}
         <div className="flex items-center gap-3">
           <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="lucide lucide-shield w-4 h-4 text-primary"
-              aria-hidden="true"
-            >
-              <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
-            </svg>
+            <Workflow className="w-4 h-4 text-primary" />
+          </div>
+          <div className="flex flex-col">
+            <span className="text-sm font-semibold text-foreground leading-tight">财务AI助手</span>
+            <span className="text-[10px] text-muted-foreground">S2F 智能对账</span>
           </div>
-          <span className="font-semibold text-foreground">财务AI助手</span>
         </div>
 
-        {/* 右侧 - 用户信息和登出 */}
-        <div className="flex items-center gap-4">
-          {/* 用户信息 */}
-          <div className="flex items-center gap-3 text-sm">
-            <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-muted/50">
-              <User className="w-4 h-4 text-muted-foreground" />
-              <span className="font-medium text-foreground">{user.full_name}</span>
-              <span className="text-muted-foreground">·</span>
-              <span className="text-muted-foreground">{user.role}</span>
-            </div>
-          </div>
-
-          {/* 登出按钮 */}
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={handleLogout}
-            className="gap-2 text-muted-foreground hover:text-foreground"
-          >
-            <LogOut className="w-4 h-4" />
-            <span>登出</span>
+        {/* 右侧 - 用户信息和操作 */}
+        <div className="flex items-center gap-2">
+          {/* 通知按钮 */}
+          <Button variant="ghost" size="icon" className="relative">
+            <Bell className="w-4 h-4" />
+            <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full" />
           </Button>
+
+          {/* 用户下拉菜单 */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="gap-2 h-9 px-2">
+                <div className="w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center">
+                  <User className="w-3.5 h-3.5 text-primary" />
+                </div>
+                <div className="flex flex-col items-start">
+                  <span className="text-sm font-medium text-foreground leading-tight">
+                    {user.full_name}
+                  </span>
+                  <span className="text-[10px] text-muted-foreground">
+                    {ROLE_LABELS[user.role] || user.role}
+                  </span>
+                </div>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              <DropdownMenuLabel className="font-normal">
+                <div className="flex flex-col space-y-1">
+                  <p className="text-sm font-medium">{user.full_name}</p>
+                  <p className="text-xs text-muted-foreground">{user.email}</p>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem className="gap-2">
+                <User className="w-4 h-4" />
+                个人设置
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem 
+                onClick={handleLogout}
+                className="gap-2 text-destructive focus:text-destructive"
+              >
+                <LogOut className="w-4 h-4" />
+                退出登录
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
       </div>
     </header>

frontend/components/layout/Sidebar.tsx

@@ -44,7 +44,7 @@ export function Sidebar() {
   return (
     <aside 
       className={cn(
-        "sticky top-14 h-[calc(100vh-3.5rem)] border-r border-border bg-background transition-all duration-300 flex flex-col",
+        "sticky top-14 h-[calc(100vh-3.5rem)] border-r border-border bg-card transition-all duration-300 flex flex-col",
         collapsed ? "w-16" : "w-56"
       )}
     >
@@ -62,25 +62,40 @@ export function Sidebar() {
                 "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all relative group",
                 isActive 
                   ? "bg-primary/10 text-primary" 
-                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                  : "text-muted-foreground hover:bg-accent hover:text-foreground",
                 collapsed && "justify-center px-0"
               )}
             >
+              {/* Active indicator bar */}
               {isActive && (
-                <motion.div
-                  layoutId="activeNav"
-                  className="absolute inset-0 bg-primary/10 rounded-lg -z-10"
-                  transition={{ type: "spring", bounce: 0.2, duration: 0.4 }}
-                />
+                <>
+                  <motion.div
+                    layoutId="activeIndicator"
+                    className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-primary rounded-r-full"
+                    transition={{ type: "spring", bounce: 0.2, duration: 0.4 }}
+                  />
+                  <motion.div
+                    layoutId="activeBg"
+                    className="absolute inset-0 bg-primary/10 rounded-lg -z-10"
+                    transition={{ type: "spring", bounce: 0.2, duration: 0.4 }}
+                  />
+                </>
               )}
+              
               <Icon className={cn("w-5 h-5 shrink-0", isActive && "text-primary")} />
+              
               {!collapsed && (
-                <span className="text-body font-medium">{item.label}</span>
+                <span className={cn(
+                  "text-sm font-medium",
+                  isActive && "text-primary"
+                )}>
+                  {item.label}
+                </span>
               )}
               
               {/* Tooltip for collapsed state */}
               {collapsed && (
-                <div className="absolute left-full ml-2 px-2 py-1 bg-foreground text-background text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
+                <div className="absolute left-full ml-2 px-2 py-1 bg-foreground text-background text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 shadow-md">
                   {item.label}
                 </div>
               )}
@@ -90,16 +105,24 @@ export function Sidebar() {
       </nav>
 
       {/* Collapse toggle */}
-      <button
-        onClick={() => setCollapsed(!collapsed)}
-        className="flex items-center justify-center h-10 border-t border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-      >
-        {collapsed ? (
-          <ChevronRight className="w-4 h-4" />
-        ) : (
-          <ChevronLeft className="w-4 h-4" />
-        )}
-      </button>
+      <div className="border-t border-border">
+        <button
+          onClick={() => setCollapsed(!collapsed)}
+          className={cn(
+            "flex items-center h-10 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors",
+            collapsed ? "justify-center w-full" : "px-4 gap-2"
+          )}
+        >
+          {collapsed ? (
+            <ChevronRight className="w-4 h-4" />
+          ) : (
+            <>
+              <ChevronLeft className="w-4 h-4" />
+              <span className="text-xs">收起菜单</span>
+            </>
+          )}
+        </button>
+      </div>
     </aside>
   );
 }