diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma
index 522389b..90eed69 100644
--- a/backend/prisma/schema.prisma
+++ b/backend/prisma/schema.prisma
@@ -25,6 +25,7 @@ enum Role {
 enum EmployeeStatus {
   ACTIVE
   RESIGNED
+  TERMINATED
 }
 
 enum FemaleWorkerType {
@@ -202,7 +203,9 @@ model Employee {
   orgId             String
   org               Organization   @relation(fields: [orgId], references: [id], onDelete: Cascade)
   name              String
+  employeeNo        String?        // 工号
   department        String
+  position          String?        // 岗位
   hireDate          DateTime
   monthlySalary     String         // AES-256 加密存储
   status            EmployeeStatus @default(ACTIVE)
@@ -965,6 +968,7 @@ model AttendanceConfirmation {
   holidayHours    Float    @default(0)
   overtimePay     Float    @default(0)
   confirmedAt     DateTime?
+  confirmedBy     String?
   confirmIp       String?
   status          String   @default("PENDING") // PENDING / CONFIRMED / DISPUTED
   disputeNote     String?  // 员工有异议时的说明
diff --git a/backend/src/routes/attendance.routes.ts b/backend/src/routes/attendance.routes.ts
index c4404f8..c08e9e0 100644
--- a/backend/src/routes/attendance.routes.ts
+++ b/backend/src/routes/attendance.routes.ts
@@ -105,6 +105,27 @@ router.post('/confirm', authMiddleware, async (req: AuthRequest, res: Response,
   }
 })
 
+/** HR 批量确认考勤 */
+router.post('/batch-confirm', authMiddleware, async (req: AuthRequest, res: Response, next: NextFunction) => {
+  try {
+    const schema = z.object({
+      month: z.string().regex(/^\d{4}-\d{2}$/),
+      ids: z.array(z.string()).optional(),
+      all: z.boolean().optional(),
+    })
+    const { month, ids, all } = schema.parse(req.body)
+    const where: any = { orgId: req.user!.orgId, month, status: 'PENDING' }
+    if (!all && ids?.length) {
+      where.id = { in: ids }
+    }
+    const result = await prisma.attendanceConfirmation.updateMany({
+      where,
+      data: { status: 'CONFIRMED', confirmedAt: new Date(), confirmedBy: req.user!.id },
+    })
+    res.json({ success: true, data: { count: result.count } })
+  } catch (err) { next(err) }
+})
+
 // ========== 班次管理 ==========
 
 router.get('/shifts', authMiddleware, async (req: AuthRequest, res: Response, next: NextFunction) => {
diff --git a/backend/src/routes/portal.routes.ts b/backend/src/routes/portal.routes.ts
index b69b6d6..87e6249 100644
--- a/backend/src/routes/portal.routes.ts
+++ b/backend/src/routes/portal.routes.ts
@@ -640,4 +640,199 @@ router.get('/attendance', portalAuth, async (req: any, res, next) => {
   }
 })
 
+// ========== 员工端：首页概览 ==========
+router.get('/home/overview', portalAuth, async (req: any, res, next) => {
+  try {
+    const { id: employeeId, orgId } = req.employee
+    const employee = await prisma.employee.findFirst({ where: { id: employeeId, orgId } })
+    if (!employee) return res.status(404).json({ success: false, error: { code: 'NOT_FOUND', message: '员工不存在' } })
+
+    // 最新工资条
+    const latestPayslip = await prisma.payslip.findFirst({
+      where: { employeeId, orgId, publishStatus: 'PUBLISHED' },
+      orderBy: { month: 'desc' },
+      select: { month: true, totalPay: true, netPay: true },
+    })
+
+    // 合同信息
+    const contract = await prisma.laborContract.findFirst({
+      where: { employeeId, orgId },
+      orderBy: { createdAt: 'desc' },
+      select: { contractType: true, startDate: true, endDate: true },
+    })
+    const typeLabels: Record<string, string> = { FIXED: '劳动合同-固定期', UNFIXED: '劳动合同-无固定期', LABOR: '劳务协议', INTERNSHIP: '实习协议', DISPATCH: '劳务派遣', OUTSOURCING: '业务外包', PARTTIME: '兼职协议', UNSIGNED: '未签合同' }
+    let daysToExpire: number | null = null
+    if (contract?.endDate) {
+      const diff = Math.ceil((new Date(contract.endDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24))
+      daysToExpire = diff
+    }
+
+    // 本月考勤概览
+    const month = new Date().toISOString().slice(0, 7)
+    const startDate = new Date(`${month}-01`)
+    const endDate = new Date(startDate)
+    endDate.setMonth(endDate.getMonth() + 1)
+    const attendanceRecords = await prisma.attendanceRecord.findMany({
+      where: { employeeId, orgId, date: { gte: startDate, lt: endDate } },
+    })
+    const attendanceSummary = {
+      normalDays: attendanceRecords.filter((r: any) => r.status === 'NORMAL').length,
+      lateCount: attendanceRecords.filter((r: any) => r.status === 'LATE').length,
+      leaveDays: attendanceRecords.filter((r: any) => r.status === 'LEAVE').length,
+      absentDays: attendanceRecords.filter((r: any) => r.status === 'ABSENT').length,
+    }
+
+    // 待办事项
+    const pendingTasks: any[] = []
+    if (contract && daysToExpire !== null && daysToExpire < 30 && daysToExpire >= 0) {
+      pendingTasks.push({ severity: 'high', message: `合同将在 ${daysToExpire} 天后到期，请联系HR确认续签事宜` })
+    }
+    if (contract && daysToExpire !== null && daysToExpire < 0) {
+      pendingTasks.push({ severity: 'high', message: '合同已到期，请尽快联系HR办理续签或离职手续' })
+    }
+    // 查找未阅读的制度：取所有制度ID，排除已阅读的
+    const allPolicies = await prisma.policyDocument.findMany({ where: { orgId }, select: { id: true } })
+    const readRecords = await prisma.policyReadRecord.findMany({
+      where: { employeeId, orgId },
+      select: { policyId: true },
+    })
+    const readPolicyIds = new Set(readRecords.map(r => r.policyId))
+    const unreadPolicies = allPolicies.filter(p => !readPolicyIds.has(p.id))
+    if (unreadPolicies.length > 0) {
+      pendingTasks.push({ severity: 'medium', message: `您有 ${unreadPolicies.length} 份制度待阅读确认` })
+    }
+
+    res.json({
+      success: true,
+      data: {
+        latestPayslip,
+        contract: contract ? {
+          typeLabel: typeLabels[contract.contractType] || contract.contractType,
+          startDate: contract.startDate?.toISOString().slice(0, 10),
+          endDate: contract.endDate?.toISOString().slice(0, 10),
+          daysToExpire,
+        } : null,
+        attendance: attendanceSummary,
+        pendingTasks,
+        announcements: [],
+      },
+    })
+  } catch (err) { next(err) }
+})
+
+// ========== 员工端：入职进度 ==========
+router.get('/onboarding/progress', portalAuth, async (req: any, res, next) => {
+  try {
+    const { id: employeeId, orgId } = req.employee
+    const employee = await prisma.employee.findFirst({ where: { id: employeeId, orgId } })
+    if (!employee) return res.status(404).json({ success: false, error: { code: 'NOT_FOUND', message: '员工不存在' } })
+
+    const contract = await prisma.laborContract.findFirst({ where: { employeeId, orgId } })
+    const files = await prisma.employeeAttachment.findMany({ where: { employeeId, orgId } })
+
+    const steps: any = {
+      profile: {
+        completed: !!(employee.name && employee.idCardNumber && employee.phone),
+        description: employee.name ? '基本信息已填写' : '请完善基本信息',
+        completedAt: employee.hireDate,
+      },
+      documents: {
+        completed: files.length > 0,
+        description: files.length > 0 ? `已上传 ${files.length} 份材料` : '请上传入职材料',
+      },
+      contract: {
+        completed: !!contract,
+        description: contract ? '合同已签署' : '等待合同签署',
+        completedAt: contract?.createdAt,
+      },
+      bankcard: {
+        completed: !!(employee as any).bankCard,
+        description: (employee as any).bankCard ? '银行卡已登记' : '请登记银行卡信息',
+      },
+      complete: {
+        completed: employee.status === 'ACTIVE',
+        description: employee.status === 'ACTIVE' ? '入职流程已完成' : '入职流程进行中',
+      },
+    }
+
+    const completedCount = Object.values(steps).filter((s: any) => s.completed).length
+    const completionRate = Math.round((completedCount / 5) * 100)
+    const currentStepIndex = Object.values(steps).findIndex((s: any) => !s.completed)
+
+    const pendingItems: any[] = []
+    Object.entries(steps).forEach(([key, s]: any) => {
+      if (!s.completed) pendingItems.push({ message: s.description })
+    })
+
+    res.json({ success: true, data: { steps, completionRate, currentStepIndex, pendingItems } })
+  } catch (err) { next(err) }
+})
+
+// ========== 员工端：离职申请 ==========
+// 提交离职申请
+router.post('/resignation/submit', portalAuth, async (req: any, res, next) => {
+  try {
+    const { id: employeeId, orgId } = req.employee
+    const { reason, expectedDate, remark } = req.body
+    if (!reason || !expectedDate) {
+      return res.status(400).json({ success: false, error: { code: 'BAD_REQUEST', message: '请填写离职原因和预计离职日期' } })
+    }
+    const employee = await prisma.employee.findFirst({ where: { id: employeeId, orgId } })
+    if (!employee) return res.status(404).json({ success: false, error: { code: 'NOT_FOUND', message: '员工不存在' } })
+    if (employee.status === 'RESIGNED' || employee.status === 'TERMINATED') {
+      return res.status(400).json({ success: false, error: { code: 'ALREADY_RESIGNED', message: '您已离职，无法重复申请' } })
+    }
+    // 检查是否已有待审批的离职申请
+    const existing = await (prisma as any).terminationRecord.findFirst({
+      where: { employeeId, orgId, status: { in: ['DRAFT', 'PENDING_APPROVAL'] } },
+    })
+    if (existing) {
+      return res.status(400).json({ success: false, error: { code: 'DUPLICATE', message: '您已有一个待处理的离职申请' } })
+    }
+    const record = await (prisma as any).terminationRecord.create({
+      data: {
+        employeeId, orgId,
+        reason: 'RESIGNATION',
+        terminationDate: new Date(expectedDate),
+        status: 'PENDING_APPROVAL',
+        remark: `员工自主申请：${reason}${remark ? '；备注：' + remark : ''}`,
+        createdBy: employeeId,
+      },
+    })
+    res.json({ success: true, data: record })
+  } catch (err) { next(err) }
+})
+
+// 查询自己的离职申请状态
+router.get('/resignation/status', portalAuth, async (req: any, res, next) => {
+  try {
+    const { id: employeeId, orgId } = req.employee
+    const records = await (prisma as any).terminationRecord.findMany({
+      where: { employeeId, orgId },
+      orderBy: { createdAt: 'desc' },
+      take: 5,
+    })
+    res.json({ success: true, data: records })
+  } catch (err) { next(err) }
+})
+
+// 撤回离职申请（仅 DRAFT/PENDING_APPROVAL 可撤回）
+router.post('/resignation/:id/withdraw', portalAuth, async (req: any, res, next) => {
+  try {
+    const { id: employeeId, orgId } = req.employee
+    const record = await (prisma as any).terminationRecord.findFirst({
+      where: { id: req.params.id, employeeId, orgId },
+    })
+    if (!record) return res.status(404).json({ success: false, error: { code: 'NOT_FOUND', message: '离职申请不存在' } })
+    if (record.status !== 'DRAFT' && record.status !== 'PENDING_APPROVAL') {
+      return res.status(400).json({ success: false, error: { code: 'INVALID_STATUS', message: '当前状态无法撤回' } })
+    }
+    await (prisma as any).terminationRecord.update({
+      where: { id: record.id },
+      data: { status: 'CANCELLED' },
+    })
+    res.json({ success: true, data: { id: record.id, status: 'CANCELLED' } })
+  } catch (err) { next(err) }
+})
+
 export default router
diff --git a/backend/src/routes/search.routes.ts b/backend/src/routes/search.routes.ts
new file mode 100644
index 0000000..715a677
--- /dev/null
+++ b/backend/src/routes/search.routes.ts
@@ -0,0 +1,51 @@
+/**
+ * 全局搜索路由 — 员工、页面、功能搜索
+ */
+import { Router } from 'express'
+import prisma from '../lib/prisma'
+import { authMiddleware, AuthRequest } from '../middleware/auth'
+
+const router = Router()
+
+/**
+ * GET /search?q=keyword
+ * 全局搜索：员工、部门等
+ */
+router.get('/', authMiddleware, async (req: AuthRequest, res, next) => {
+  try {
+    const q = (req.query.q as string || '').trim()
+    if (!q || q.length < 1) {
+      return res.json({ success: true, data: { employees: [] } })
+    }
+
+    if (!req.user) {
+      return res.status(401).json({ success: false, message: '未授权' })
+    }
+    const orgId = req.user.orgId
+
+    // 搜索员工（按姓名、工号、手机号）
+    const employees = await prisma.employee.findMany({
+      where: {
+        orgId,
+        OR: [
+          { name: { contains: q } },
+          { employeeNo: { contains: q } },
+          { phone: { contains: q } },
+        ],
+        status: { notIn: ['TERMINATED'] },
+      },
+      select: {
+        id: true,
+        name: true,
+        department: true,
+        position: true,
+        employeeNo: true,
+      },
+      take: 10,
+    })
+
+    res.json({ success: true, data: { employees } })
+  } catch (err) { next(err) }
+})
+
+export default router
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 9b5936d..85e39f5 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { lazy, Suspense, useState } from 'react'
+import { lazy, Suspense, useState, useEffect } from 'react'
 import { Routes, Route, Navigate } from 'react-router-dom'
 import { Toaster } from 'sonner'
 import { useAuthStore } from './store/authStore'
@@ -7,6 +7,7 @@ import SidebarNav from './components/layout/SidebarNav'
 import MobileTabBar from './components/layout/MobileTabBar'
 import PortalLayout from './components/layout/PortalLayout'
 import PageContainer from './components/layout/PageContainer'
+import { CommandPalette } from './components/ui/CommandPalette'
 import { SkeletonPage } from './components/ui/Skeleton'
 import ErrorBoundary from './components/ui/ErrorBoundary'
 
@@ -41,6 +42,13 @@ const WorkProcess = lazy(() => import('./pages/WorkProcess'))
 const MyAttendance = lazy(() => import('./pages/portal/MyAttendance'))
 const SpecialStatus = lazy(() => import('./pages/SpecialStatus'))
 
+// Sprint 4-5 新增页面
+const EmployeeHome = lazy(() => import('./pages/portal/EmployeeHome'))
+const OnboardingProgress = lazy(() => import('./pages/portal/OnboardingProgress'))
+const ResignationApply = lazy(() => import('./pages/portal/ResignationApply'))
+const RiskCenter = lazy(() => import('./pages/compliance/RiskCenter'))
+const SalaryDashboard = lazy(() => import('./pages/SalaryDashboard'))
+
 // 平台管理端
 const PlatformLogin = lazy(() => import('./pages/platform/PlatformLogin'))
 const PlatformDashboard = lazy(() => import('./pages/platform/PlatformDashboard'))
@@ -138,8 +146,23 @@ function PortalLayoutWrapper({ children, showNav = true }: { children: React.Rea
 }
 
 export default function App() {
+  const [cmdOpen, setCmdOpen] = useState(false)
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        if (isAuthenticated) setCmdOpen(true)
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [isAuthenticated])
+
   return (
     <>
+    <CommandPalette open={cmdOpen} onClose={() => setCmdOpen(false)} />
     <Routes>
       {/* 管理端认证页面 */}
       <Route path="/login" element={<Suspense fallback={<SkeletonPage />}><PublicRoute><Login /></PublicRoute></Suspense>} />
@@ -166,6 +189,8 @@ export default function App() {
       <Route path="/tools/annual-value" element={<ProtectedRoute><AdminLayout><AnnualValueReport /></AdminLayout></ProtectedRoute>} />
       <Route path="/work-process" element={<ProtectedRoute><AdminLayout><WorkProcess /></AdminLayout></ProtectedRoute>} />
       <Route path="/special-status" element={<ProtectedRoute><AdminLayout><SpecialStatus /></AdminLayout></ProtectedRoute>} />
+      <Route path="/risk-center" element={<ProtectedRoute><AdminLayout><RiskCenter /></AdminLayout></ProtectedRoute>} />
+      <Route path="/salary-dashboard" element={<ProtectedRoute><AdminLayout><SalaryDashboard /></AdminLayout></ProtectedRoute>} />
 
       {/* 平台管理端 */}
       <Route path="/platform/login" element={<Suspense fallback={<SkeletonPage />}><PlatformLogin /></Suspense>} />
@@ -182,6 +207,9 @@ export default function App() {
       <Route path="/portal/policies" element={<PortalLayoutWrapper><MyPolicies /></PortalLayoutWrapper>} />
       <Route path="/portal/attendance" element={<PortalLayoutWrapper><MyAttendance /></PortalLayoutWrapper>} />
       <Route path="/portal/auto-login" element={<PortalLayoutWrapper showNav={false}><AutoLogin /></PortalLayoutWrapper>} />
+      <Route path="/portal/home" element={<PortalLayoutWrapper><EmployeeHome /></PortalLayoutWrapper>} />
+      <Route path="/portal/onboarding-progress" element={<PortalLayoutWrapper><OnboardingProgress /></PortalLayoutWrapper>} />
+      <Route path="/portal/resignation" element={<PortalLayoutWrapper><ResignationApply /></PortalLayoutWrapper>} />
 
       {/* 兜底 */}
       <Route path="*" element={<Navigate to="/" replace />} />
diff --git a/frontend/src/components/layout/PortalLayout.tsx b/frontend/src/components/layout/PortalLayout.tsx
index a776e0b..c6c7fa2 100644
--- a/frontend/src/components/layout/PortalLayout.tsx
+++ b/frontend/src/components/layout/PortalLayout.tsx
@@ -4,10 +4,11 @@
  */
 
 import { Link, useLocation, useNavigate } from 'react-router-dom'
-import { DollarSign, FileText, ScrollText, LogOut, CalendarCheck } from 'lucide-react'
+import { DollarSign, FileText, ScrollText, LogOut, CalendarCheck, Home, UserX, ClipboardList } from 'lucide-react'
 import Logo from '../../components/ui/Logo'
 
 const tabItems = [
+  { path: '/portal/home', label: '首页', icon: Home },
   { path: '/portal/payslip', label: '工资条', icon: DollarSign },
   { path: '/portal/contract', label: '我的合同', icon: FileText },
   { path: '/portal/attendance', label: '我的考勤', icon: CalendarCheck },
diff --git a/frontend/src/components/layout/SidebarNav.tsx b/frontend/src/components/layout/SidebarNav.tsx
index 5825428..20402b2 100644
--- a/frontend/src/components/layout/SidebarNav.tsx
+++ b/frontend/src/components/layout/SidebarNav.tsx
@@ -8,7 +8,7 @@ import { useState } from 'react'
 import clsx from 'clsx'
 import {
   LayoutDashboard, Users, CalendarCheck, UserX,
-  Calculator, Shield,
+  Calculator, Shield, BarChart3, ShieldAlert,
   FileSearch, FileText, Stethoscope, HeartPulse, Award,
   Bot, BookMarked,
   Bell, ScrollText, Settings,
@@ -50,6 +50,7 @@ const navGroups: NavGroup[] = [
     items: [
       { path: '/money', label: '薪税管理', icon: Calculator },
       { path: '/social', label: '社保公积金', icon: Shield },
+      { path: '/salary-dashboard', label: '薪酬分析', icon: BarChart3 },
     ],
   },
   {
@@ -61,6 +62,7 @@ const navGroups: NavGroup[] = [
   {
     title: '合规',
     items: [
+      { path: '/risk-center', label: '风险中心', icon: ShieldAlert },
       { path: '/evidence', label: '证据链', icon: FileSearch },
       { path: '/policies', label: '规章制度', icon: FileText },
       { path: '/tools/health-check', label: '用工体检', icon: Stethoscope },
diff --git a/frontend/src/components/ui/AIContextEntry.tsx b/frontend/src/components/ui/AIContextEntry.tsx
new file mode 100644
index 0000000..313491b
--- /dev/null
+++ b/frontend/src/components/ui/AIContextEntry.tsx
@@ -0,0 +1,180 @@
+/**
+ * 上下文 AI 入口组件 — 嵌入业务页面，传递页面上下文给 AI 助手
+ * 支持浮动按钮 + 弹出对话框
+ */
+import { useState, useRef, useEffect } from 'react'
+import { useMutation } from '@tanstack/react-query'
+import { Bot, Send, X, Sparkles } from 'lucide-react'
+import api from '../../lib/api'
+
+interface AIContextEntryProps {
+  /** 当前页面上下文标识 */
+  context: string
+  /** 上下文描述（传给后端 AI） */
+  contextData?: Record<string, any>
+  /** 页面标题 */
+  pageTitle: string
+}
+
+interface ChatMessage {
+  role: 'user' | 'assistant'
+  content: string
+}
+
+/**
+ * 上下文 AI 入口 — 浮动按钮 + 弹出式对话框
+ * 自动携带当前页面上下文信息
+ */
+export function AIContextEntry({ context, contextData, pageTitle }: AIContextEntryProps) {
+  const [open, setOpen] = useState(false)
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [input, setInput] = useState('')
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  /** 自动滚动到底部 */
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' })
+  }, [messages])
+
+  /** AI 问答 */
+  const askMutation = useMutation({
+    mutationFn: async (question: string) => {
+      const res = await api.post('/ai/context-ask', {
+        context,
+        contextData,
+        pageTitle,
+        question,
+        history: messages.slice(-6),
+      }) as any
+      return res.data
+    },
+    onSuccess: (data) => {
+      setMessages(prev => [...prev, { role: 'assistant', content: data.answer || data.message || '抱歉，我暂时无法回答这个问题。' }])
+    },
+    onError: () => {
+      setMessages(prev => [...prev, { role: 'assistant', content: 'AI 服务暂时不可用，请稍后再试。' }])
+    },
+  })
+
+  const handleSend = () => {
+    if (!input.trim() || askMutation.isPending) return
+    const question = input.trim()
+    setMessages(prev => [...prev, { role: 'user', content: question }])
+    setInput('')
+    askMutation.mutate(question)
+  }
+
+  /** 预设问题 */
+  const presetQuestions: Record<string, string[]> = {
+    roster: ['哪些员工合同即将到期？', '如何批量导入员工？', '试用期员工有哪些风险？'],
+    termination: ['离职补偿金如何计算？', '什么情况属于违法解除？', '离职交接清单包含哪些？'],
+    social: ['社保基数如何确定？', '公积金缴存比例是多少？', '如何办理月度社保增减员？'],
+    money: ['工资条包含哪些项目？', '个税如何计算？', '如何批量发薪？'],
+    attendance: ['如何发布月度考勤？', '考勤异常如何处理？'],
+  }
+  const presets = presetQuestions[context] || []
+
+  return (
+    <>
+      {/* 浮动按钮 */}
+      <button
+        onClick={() => setOpen(true)}
+        className="fixed bottom-6 right-6 z-40 w-12 h-12 rounded-full bg-primary text-white shadow-lg hover:shadow-xl transition-shadow flex items-center justify-center"
+        aria-label="询问 AI"
+      >
+        <Bot className="w-5 h-5" />
+      </button>
+
+      {/* 弹出对话框 */}
+      {open && (
+        <div className="fixed inset-0 z-50 flex items-end md:items-center justify-center bg-black/20 px-4 pb-4 md:pb-0" onClick={() => setOpen(false)}>
+          <div
+            className="w-full max-w-md bg-white rounded-xl shadow-2xl border border-gray-200 flex flex-col max-h-[80vh]"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* 头部 */}
+            <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100">
+              <div className="flex items-center gap-2">
+                <div className="w-7 h-7 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <Sparkles className="w-4 h-4 text-primary" />
+                </div>
+                <div>
+                  <div className="text-sm font-medium">AI 顾问 · {pageTitle}</div>
+                  <div className="text-xs text-gray-400">基于当前页面上下文回答</div>
+                </div>
+              </div>
+              <button onClick={() => setOpen(false)} className="text-gray-400 hover:text-gray-600">
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            {/* 消息列表 */}
+            <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-3 space-y-3 min-h-[200px]">
+              {messages.length === 0 ? (
+                <div className="text-center py-6">
+                  <Bot className="w-8 h-8 text-gray-300 mx-auto mb-2" />
+                  <div className="text-sm text-gray-400">向 AI 提问关于「{pageTitle}」的问题</div>
+                  {presets.length > 0 && (
+                    <div className="mt-4 space-y-2">
+                      {presets.map((q, i) => (
+                        <button
+                          key={i}
+                          onClick={() => { setInput(q) }}
+                          className="block w-full text-left text-xs text-primary bg-primary/5 hover:bg-primary/10 rounded-lg px-3 py-2 transition-colors"
+                        >
+                          {q}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ) : (
+                messages.map((msg, i) => (
+                  <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                    <div className={`max-w-[80%] rounded-lg px-3 py-2 text-sm ${
+                      msg.role === 'user'
+                        ? 'bg-primary text-white'
+                        : 'bg-gray-100 text-gray-700'
+                    }`}>
+                      {msg.content}
+                    </div>
+                  </div>
+                ))
+              )}
+              {askMutation.isPending && (
+                <div className="flex justify-start">
+                  <div className="bg-gray-100 rounded-lg px-3 py-2 text-sm text-gray-400">
+                    <span className="inline-flex gap-1">
+                      <span className="animate-bounce" style={{ animationDelay: '0ms' }}>·</span>
+                      <span className="animate-bounce" style={{ animationDelay: '150ms' }}>·</span>
+                      <span className="animate-bounce" style={{ animationDelay: '300ms' }}>·</span>
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* 输入区 */}
+            <div className="px-4 py-3 border-t border-gray-100 flex items-center gap-2">
+              <input
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) => { if (e.key === 'Enter') handleSend() }}
+                placeholder="输入问题..."
+                className="flex-1 text-sm outline-none bg-gray-50 rounded-lg px-3 py-2 border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/10 transition-colors"
+              />
+              <button
+                onClick={handleSend}
+                disabled={!input.trim() || askMutation.isPending}
+                className="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center disabled:opacity-40 transition-opacity"
+              >
+                <Send className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/frontend/src/components/ui/CommandPalette.tsx b/frontend/src/components/ui/CommandPalette.tsx
new file mode 100644
index 0000000..0a5a63a
--- /dev/null
+++ b/frontend/src/components/ui/CommandPalette.tsx
@@ -0,0 +1,201 @@
+/**
+ * CommandPalette 全局搜索 — Cmd/Ctrl+K 唤起，支持全局搜索和快捷导航
+ */
+import { useState, useEffect, useRef, useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Search, ArrowRight, Clock } from 'lucide-react'
+import api from '../../lib/api'
+
+/** 搜索结果类型 */
+interface SearchResult {
+  type: 'employee' | 'page' | 'action'
+  id: string
+  title: string
+  subtitle?: string
+  link: string
+  icon?: string
+}
+
+/** 快捷页面导航 */
+const QUICK_PAGES: SearchResult[] = [
+  { type: 'page', id: 'dashboard', title: '工作台', link: '/', icon: 'home' },
+  { type: 'page', id: 'roster', title: '花名册', link: '/roster', icon: 'users' },
+  { type: 'page', id: 'money', title: '薪税管理', link: '/money', icon: 'wallet' },
+  { type: 'page', id: 'social', title: '社保公积金', link: '/social', icon: 'shield' },
+  { type: 'page', id: 'termination', title: '离职管理', link: '/termination', icon: 'userX' },
+  { type: 'page', id: 'attendance', title: '考勤排班', link: '/attendance', icon: 'calendar' },
+  { type: 'page', id: 'risk-center', title: '风险中心', link: '/risk-center', icon: 'alert' },
+  { type: 'page', id: 'salary-dashboard', title: '薪酬分析', link: '/salary-dashboard', icon: 'chart' },
+  { type: 'page', id: 'policies', title: '规章制度', link: '/policies', icon: 'file' },
+  { type: 'page', id: 'settings', title: '设置', link: '/settings', icon: 'gear' },
+]
+
+interface CommandPaletteProps {
+  open: boolean
+  onClose: () => void
+}
+
+export function CommandPalette({ open, onClose }: CommandPaletteProps) {
+  const [query, setQuery] = useState('')
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([])
+  const [searching, setSearching] = useState(false)
+  const navigate = useNavigate()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  /** 搜索逻辑 */
+  useEffect(() => {
+    if (!open) {
+      setQuery('')
+      setSelectedIndex(0)
+      setSearchResults([])
+      return
+    }
+    // 聚焦输入框
+    setTimeout(() => inputRef.current?.focus(), 50)
+  }, [open])
+
+  /** 执行搜索 */
+  useEffect(() => {
+    if (!query.trim()) {
+      setSearchResults([])
+      return
+    }
+    const q = query.trim().toLowerCase()
+    setSearching(true)
+
+    // 本地页面匹配
+    const localResults = QUICK_PAGES.filter(p =>
+      p.title.toLowerCase().includes(q)
+    )
+
+    // 远程搜索员工
+    const timer = setTimeout(async () => {
+      try {
+        const res = await api.get('/search', { params: { q } }) as any
+        const remoteResults: SearchResult[] = (res.data?.employees || []).map((e: any) => ({
+          type: 'employee' as const,
+          id: e.id,
+          title: e.name,
+          subtitle: `${e.department || ''} · ${e.position || ''}`,
+          link: `/roster?search=${encodeURIComponent(e.name)}`,
+        }))
+        setSearchResults([...localResults, ...remoteResults])
+      } catch {
+        setSearchResults(localResults)
+      } finally {
+        setSearching(false)
+      }
+    }, 300)
+
+    return () => clearTimeout(timer)
+  }, [query])
+
+  /** 合并结果（无搜索词时显示快捷页面） */
+  const displayResults = useMemo(() => {
+    if (!query.trim()) return QUICK_PAGES
+    return searchResults
+  }, [query, searchResults])
+
+  /** 键盘导航 */
+  useEffect(() => {
+    if (!open) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        setSelectedIndex(i => Math.min(i + 1, displayResults.length - 1))
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        setSelectedIndex(i => Math.max(i - 1, 0))
+      } else if (e.key === 'Enter') {
+        e.preventDefault()
+        const result = displayResults[selectedIndex]
+        if (result) {
+          navigate(result.link)
+          onClose()
+        }
+      } else if (e.key === 'Escape') {
+        e.preventDefault()
+        onClose()
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [open, selectedIndex, displayResults, navigate, onClose])
+
+  /** 滚动到选中项 */
+  useEffect(() => {
+    const el = listRef.current?.children[selectedIndex] as HTMLElement
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [selectedIndex])
+
+  if (!open) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/30 pt-[15vh] px-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-xl bg-white rounded-xl shadow-2xl border border-gray-200 overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* 搜索输入 */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-gray-100">
+          <Search className="w-4 h-4 text-gray-400 shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => { setQuery(e.target.value); setSelectedIndex(0) }}
+            placeholder="搜索员工、页面、功能..."
+            className="flex-1 text-sm outline-none bg-transparent"
+          />
+          <kbd className="text-xs text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">ESC</kbd>
+        </div>
+
+        {/* 搜索结果 */}
+        <div ref={listRef} className="max-h-80 overflow-y-auto py-2">
+          {displayResults.length === 0 && !searching ? (
+            <div className="text-center py-8 text-sm text-gray-400">
+              {query ? '未找到匹配结果' : '输入关键词搜索'}
+            </div>
+          ) : (
+            displayResults.map((result, i) => (
+              <button
+                key={`${result.type}-${result.id}`}
+                className={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors ${
+                  i === selectedIndex ? 'bg-primary/5' : 'hover:bg-gray-50'
+                }`}
+                onClick={() => { navigate(result.link); onClose() }}
+                onMouseEnter={() => setSelectedIndex(i)}
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium text-gray-700 truncate">{result.title}</div>
+                  {result.subtitle && (
+                    <div className="text-xs text-gray-400 truncate">{result.subtitle}</div>
+                  )}
+                </div>
+                {result.type === 'page' && <Clock className="w-3 h-3 text-gray-300" />}
+                <ArrowRight className="w-3 h-3 text-gray-300" />
+              </button>
+            ))
+          )}
+          {searching && (
+            <div className="text-center py-2 text-xs text-gray-400">搜索中...</div>
+          )}
+        </div>
+
+        {/* 底部提示 */}
+        <div className="px-4 py-2 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
+          <div className="flex items-center gap-3">
+            <span><kbd className="bg-gray-100 px-1 rounded">↑↓</kbd> 导航</span>
+            <span><kbd className="bg-gray-100 px-1 rounded">↵</kbd> 选择</span>
+          </div>
+          <span>{displayResults.length} 个结果</span>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/hooks/useSavedViews.ts b/frontend/src/hooks/useSavedViews.ts
new file mode 100644
index 0000000..b230f51
--- /dev/null
+++ b/frontend/src/hooks/useSavedViews.ts
@@ -0,0 +1,88 @@
+/**
+ * useSavedViews — 保存/加载筛选视图到 localStorage
+ * 支持多页面、多视图持久化
+ */
+import { useState, useCallback, useEffect } from 'react'
+
+interface SavedView {
+  id: string
+  name: string
+  filters: Record<string, any>
+  createdAt: string
+}
+
+/**
+ * 保存视图 Hook — 将筛选条件持久化到 localStorage
+ * @param pageKey 页面唯一标识（如 'roster', 'money'）
+ */
+export function useSavedViews(pageKey: string) {
+  const storageKey = `saved-views:${pageKey}`
+  const [views, setViews] = useState<SavedView[]>([])
+  const [activeViewId, setActiveViewId] = useState<string | null>(null)
+
+  /** 初始化加载 */
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(storageKey)
+      if (stored) {
+        setViews(JSON.parse(stored))
+      }
+    } catch {
+      // 忽略解析错误
+    }
+  }, [storageKey])
+
+  /** 持久化保存 */
+  const persist = useCallback((newViews: SavedView[]) => {
+    setViews(newViews)
+    try {
+      localStorage.setItem(storageKey, JSON.stringify(newViews))
+    } catch {
+      // 存储满或不可用
+    }
+  }, [storageKey])
+
+  /** 保存当前筛选为视图 */
+  const saveView = useCallback((name: string, filters: Record<string, any>) => {
+    const id = `${Date.now()}`
+    const newView: SavedView = {
+      id,
+      name,
+      filters,
+      createdAt: new Date().toISOString(),
+    }
+    persist([...views, newView])
+    setActiveViewId(id)
+    return newView
+  }, [views, persist])
+
+  /** 删除视图 */
+  const deleteView = useCallback((id: string) => {
+    persist(views.filter(v => v.id !== id))
+    if (activeViewId === id) setActiveViewId(null)
+  }, [views, persist, activeViewId])
+
+  /** 应用视图 */
+  const applyView = useCallback((id: string) => {
+    const view = views.find(v => v.id === id)
+    if (view) {
+      setActiveViewId(id)
+      return view.filters
+    }
+    return null
+  }, [views])
+
+  /** 重命名视图 */
+  const renameView = useCallback((id: string, name: string) => {
+    persist(views.map(v => v.id === id ? { ...v, name } : v))
+  }, [views, persist])
+
+  return {
+    views,
+    activeViewId,
+    saveView,
+    deleteView,
+    applyView,
+    renameView,
+  }
+}
diff --git a/frontend/src/pages/Attendance.tsx b/frontend/src/pages/Attendance.tsx
index 7278e20..13a6e95 100644
--- a/frontend/src/pages/Attendance.tsx
+++ b/frontend/src/pages/Attendance.tsx
@@ -1,7 +1,7 @@
 import { useState, useRef } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
-import { CalendarCheck, CheckCircle, Clock, AlertCircle, Plus, Trash2, Calendar, Users, BarChart3, Plane, Upload, Download, X, Send, Loader2 } from 'lucide-react'
+import { CalendarCheck, CheckCircle, Clock, AlertCircle, Plus, Trash2, Calendar, Users, BarChart3, Plane, Upload, Download, X, Send, Loader2, CheckCheck } from 'lucide-react'
 import api from '../lib/api'
 import { useAuthStore } from '../store/authStore'
 import Card from '../components/ui/Card'
@@ -9,6 +9,8 @@ import Button from '../components/ui/Button'
 import { Input, Label, Select } from '../components/ui/Input'
 import Modal from '../components/ui/Modal'
 import EmptyState from '../components/ui/EmptyState'
+import { InlineAlert } from '../components/ui/InlineAlert'
+import { useConfirm } from '../hooks/useConfirm'
 
 const STATUS_CONFIG: Record<string, { label: string; color: string; bg: string; icon: typeof CheckCircle }> = {
   PENDING: { label: '待确认', color: 'text-amber-700', bg: 'bg-amber-100', icon: Clock },
@@ -90,19 +92,23 @@ export default function Attendance() {
 // ========== 考勤确认 Tab ==========
 function ConfirmTab() {
   const queryClient = useQueryClient()
+  const confirm = useConfirm()
   const [month, setMonth] = useState(new Date().toISOString().slice(0, 7))
   const [filterDepartment, setFilterDepartment] = useState('')
+  const [filterStatus, setFilterStatus] = useState('')
   const [showImport, setShowImport] = useState(false)
   const [importFile, setImportFile] = useState<File | null>(null)
   const [importResult, setImportResult] = useState<any>(null)
   const [importing, setImporting] = useState(false)
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   const { data: list, isLoading } = useQuery<any>({
-    queryKey: ['attendance', month, filterDepartment],
+    queryKey: ['attendance', month, filterDepartment, filterStatus],
     queryFn: async () => {
       const params: any = { month }
       if (filterDepartment) params.department = filterDepartment
+      if (filterStatus) params.status = filterStatus
       const res = await api.get('/attendance', { params }) as any
       return res.data
     },
@@ -156,38 +162,178 @@ function ConfirmTab() {
     onError: (err: any) => toast.error(err?.response?.data?.error?.message || '取消失败'),
   })
 
+  const batchConfirmMutation = useMutation({
+    mutationFn: async (params: { all?: boolean; ids?: string[] }) => {
+      const res = await api.post('/attendance/batch-confirm', { month, ...params }) as any
+      return res.data
+    },
+    onSuccess: (data: any) => {
+      toast.success(`已批量确认 ${data.count} 条考勤记录`)
+      queryClient.invalidateQueries({ queryKey: ['attendance'] })
+      queryClient.invalidateQueries({ queryKey: ['attendance-stats'] })
+      setSelectedIds(new Set())
+    },
+    onError: (err: any) => toast.error(err?.response?.data?.error?.message || '批量确认失败'),
+  })
+
+  const singleConfirmMutation = useMutation({
+    mutationFn: async (id: string) => {
+      const res = await api.post('/attendance/confirm', { employeeId: list.find((i: any) => i.id === id)?.employeeId, month }) as any
+      return res.data
+    },
+    onSuccess: () => {
+      toast.success('已确认')
+      queryClient.invalidateQueries({ queryKey: ['attendance'] })
+      queryClient.invalidateQueries({ queryKey: ['attendance-stats'] })
+    },
+    onError: (err: any) => toast.error(err?.response?.data?.error?.message || '确认失败'),
+  })
+
   const currentPublish = publishRecords?.find((r: any) => r.month === month && r.status === 'PUBLISHED')
+  const pendingCount = stats?.pending || 0
+  const pendingItems = (list || []).filter((i: any) => i.status === 'PENDING')
+  const allPendingSelected = pendingItems.length > 0 && pendingItems.every((i: any) => selectedIds.has(i.id))
+
+  const toggleSelect = (id: string) => {
+    const next = new Set(selectedIds)
+    if (next.has(id)) next.delete(id)
+    else next.add(id)
+    setSelectedIds(next)
+  }
+
+  const toggleSelectAllPending = () => {
+    if (allPendingSelected) {
+      const next = new Set(selectedIds)
+      pendingItems.forEach((i: any) => next.delete(i.id))
+      setSelectedIds(next)
+    } else {
+      const next = new Set(selectedIds)
+      pendingItems.forEach((i: any) => next.add(i.id))
+      setSelectedIds(next)
+    }
+  }
+
+  // 流程步骤
+  const FLOW_STEPS = [
+    { label: '导入考勤', desc: 'Excel 批量导入', done: (list?.length || 0) > 0 },
+    { label: 'HR 确认', desc: `待确认 ${pendingCount} 人`, done: pendingCount === 0 && (list?.length || 0) > 0 },
+    { label: '发布考勤表', desc: currentPublish ? '已发布' : '未发布', done: !!currentPublish },
+    { label: '员工确认', desc: stats ? `已确认 ${stats.confirmed}/${stats.total}` : '', done: stats?.confirmed === stats?.total && stats?.total > 0 },
+  ]
 
   return (
     <div className="space-y-3">
-      <div className="flex items-center gap-2 justify-end">
-        {currentPublish ? (
-          <Button size="sm" variant="secondary" onClick={() => cancelPublishMutation.mutate(currentPublish.id)}>
-            <X className="w-3.5 h-3.5 mr-1" />取消发布
+      {/* 流程指示器 */}
+      <div className="flex items-center gap-1 overflow-x-auto pb-1">
+        {FLOW_STEPS.map((step, i) => (
+          <div key={i} className="flex items-center gap-1 shrink-0">
+            <div className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs ${step.done ? 'bg-green-50 text-green-700' : 'bg-gray-50 text-gray-500'}`}>
+              {step.done ? <CheckCircle className="w-3.5 h-3.5" /> : <Clock className="w-3.5 h-3.5" />}
+              <span className="font-medium">{step.label}</span>
+              <span className="text-gray-400">{step.desc}</span>
+            </div>
+            {i < FLOW_STEPS.length - 1 && <span className="text-gray-300">→</span>}
+          </div>
+        ))}
+      </div>
+
+      {/* 指引提示 */}
+      {!currentPublish && pendingCount > 0 && (
+        <InlineAlert type="info" title="考勤确认流程">
+          请核对考勤数据后批量确认，确认无误后点击「发布考勤表」推送给员工端确认。员工有异议时可提交异议说明。
+        </InlineAlert>
+      )}
+      {currentPublish && (
+        <InlineAlert type="success" title="考勤表已发布">
+          {month}月考勤表已发布至员工端，员工可自行查看并确认。已确认 {stats?.confirmed || 0}/{stats?.total || 0} 人。
+        </InlineAlert>
+      )}
+      {stats?.disputed > 0 && (
+        <InlineAlert type="warning" title="有员工提出异议">
+          {stats.disputed} 名员工对考勤数据有异议，请查看异议说明并处理。
+        </InlineAlert>
+      )}
+
+      <div className="flex items-center gap-2 justify-between flex-wrap">
+        <div className="flex items-center gap-2">
+          {pendingCount > 0 && (
+            <>
+              <Button
+                size="sm"
+                variant="secondary"
+                onClick={toggleSelectAllPending}
+              >
+                {allPendingSelected ? '取消全选' : '全选待确认'}
+              </Button>
+              {selectedIds.size > 0 && (
+                <Button
+                  size="sm"
+                  onClick={async () => {
+                    const ok = await confirm({ title: '批量确认考勤', message: `确认将选中的 ${selectedIds.size} 条考勤记录标记为已确认？` })
+                    if (ok) batchConfirmMutation.mutate({ ids: Array.from(selectedIds) })
+                  }}
+                  disabled={batchConfirmMutation.isPending}
+                >
+                  <CheckCheck className="w-3.5 h-3.5 mr-1" />
+                  确认选中 ({selectedIds.size})
+                </Button>
+              )}
+              <Button
+                size="sm"
+                variant="secondary"
+                onClick={async () => {
+                  const ok = await confirm({ title: '全部确认', message: `确认将全部 ${pendingCount} 条待确认记录标记为已确认？` })
+                  if (ok) batchConfirmMutation.mutate({ all: true })
+                }}
+                disabled={batchConfirmMutation.isPending}
+              >
+                全部确认 ({pendingCount})
+              </Button>
+            </>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {currentPublish ? (
+            <Button size="sm" variant="secondary" onClick={async () => {
+              const ok = await confirm({ title: '取消发布', message: '取消发布后员工端将无法查看该月考勤表，确定操作？' })
+              if (ok) cancelPublishMutation.mutate(currentPublish.id)
+            }}>
+              <X className="w-3.5 h-3.5 mr-1" />取消发布
+            </Button>
+          ) : (
+            <Button size="sm" onClick={() => publishMutation.mutate()} disabled={publishMutation.isPending || pendingCount > 0}>
+              {publishMutation.isPending ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <Send className="w-3.5 h-3.5 mr-1" />}
+              发布考勤表
+            </Button>
+          )}
+          <Button size="sm" variant="secondary" onClick={() => setShowImport(true)}>
+            <Upload className="w-3.5 h-3.5 mr-1" />导入考勤
           </Button>
-        ) : (
-          <Button size="sm" onClick={() => publishMutation.mutate()} disabled={publishMutation.isPending}>
-            {publishMutation.isPending ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <Send className="w-3.5 h-3.5 mr-1" />}
-            发布考勤表
-          </Button>
-        )}
-        <Button size="sm" variant="secondary" onClick={() => setShowImport(true)}>
-          <Upload className="w-3.5 h-3.5 mr-1" />导入考勤
-        </Button>
-        <select
-          value={filterDepartment}
-          onChange={e => setFilterDepartment(e.target.value)}
-          className="h-9 rounded-md border border-gray-200 bg-white px-3 text-sm text-gray-700 shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
-        >
-          <option value="">全部部门</option>
-          {departmentList?.map((d: string) => <option key={d} value={d}>{d}</option>)}
-        </select>
-        <input
-          type="month"
-          value={month}
-          onChange={e => setMonth(e.target.value)}
-          className="px-3 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
-        />
+          <select
+            value={filterStatus}
+            onChange={e => setFilterStatus(e.target.value)}
+            className="h-9 rounded-md border border-gray-200 bg-white px-3 text-sm text-gray-700 shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
+          >
+            <option value="">全部状态</option>
+            <option value="PENDING">待确认</option>
+            <option value="CONFIRMED">已确认</option>
+            <option value="DISPUTED">有异议</option>
+          </select>
+          <select
+            value={filterDepartment}
+            onChange={e => setFilterDepartment(e.target.value)}
+            className="h-9 rounded-md border border-gray-200 bg-white px-3 text-sm text-gray-700 shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
+          >
+            <option value="">全部部门</option>
+            {departmentList?.map((d: string) => <option key={d} value={d}>{d}</option>)}
+          </select>
+          <input
+            type="month"
+            value={month}
+            onChange={e => setMonth(e.target.value)}
+            className="px-3 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+        </div>
       </div>
 
       {stats && (
@@ -215,10 +361,19 @@ function ConfirmTab() {
           {list.map((item: any) => {
             const config = STATUS_CONFIG[item.status] || STATUS_CONFIG.PENDING
             const StatusIcon = config.icon
+            const isSelected = selectedIds.has(item.id)
             return (
               <Card key={item.id}>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-3 flex-1 min-w-0">
+                    {item.status === 'PENDING' && (
+                      <input
+                        type="checkbox"
+                        checked={isSelected}
+                        onChange={() => toggleSelect(item.id)}
+                        className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary shrink-0"
+                      />
+                    )}
                     <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-50 flex-shrink-0">
                       <CalendarCheck className="w-4 h-4 text-gray-600" />
                     </div>
@@ -239,9 +394,20 @@ function ConfirmTab() {
                       )}
                     </div>
                   </div>
-                  <div className={`flex items-center gap-1 px-2 py-1 rounded-lg ${config.bg} ${config.color} flex-shrink-0`}>
-                    <StatusIcon className="w-3.5 h-3.5" />
-                    <span className="text-xs font-medium">{config.label}</span>
+                  <div className="flex items-center gap-2 flex-shrink-0">
+                    {item.status === 'PENDING' && (
+                      <button
+                        className="text-xs text-primary hover:underline"
+                        onClick={() => singleConfirmMutation.mutate(item.id)}
+                        disabled={singleConfirmMutation.isPending}
+                      >
+                        确认
+                      </button>
+                    )}
+                    <div className={`flex items-center gap-1 px-2 py-1 rounded-lg ${config.bg} ${config.color}`}>
+                      <StatusIcon className="w-3.5 h-3.5" />
+                      <span className="text-xs font-medium">{config.label}</span>
+                    </div>
                   </div>
                 </div>
               </Card>
diff --git a/frontend/src/pages/SalaryDashboard.tsx b/frontend/src/pages/SalaryDashboard.tsx
new file mode 100644
index 0000000..9a9b28e
--- /dev/null
+++ b/frontend/src/pages/SalaryDashboard.tsx
@@ -0,0 +1,179 @@
+/**
+ * 薪酬分析看板 — 展示薪酬分布、部门对比、同比环比趋势
+ */
+import { useState, useMemo } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import {
+  BarChart3, TrendingUp, TrendingDown, Users, Wallet,
+} from 'lucide-react'
+import Card from '../components/ui/Card'
+import { Select } from '../components/ui/Input'
+import { InlineAlert } from '../components/ui/InlineAlert'
+import api from '../lib/api'
+
+/** 金额格式化 */
+const fmt = (n: number) => (n || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+
+export default function SalaryDashboard() {
+  const [year, setYear] = useState(new Date().getFullYear().toString())
+
+  /** 获取薪酬分析数据 */
+  const { data, isLoading } = useQuery<any>({
+    queryKey: ['salary-dashboard', year],
+    queryFn: async () => {
+      const res = await api.get('/salary/dashboard', { params: { year } }) as any
+      return res.data
+    },
+  })
+
+  const departments = data?.departments || []
+  const monthlyTrend = data?.monthlyTrend || []
+  const summary = data?.summary || {}
+
+  /** 计算最大值用于柱状图比例 */
+  const maxDeptAvg = useMemo(() => {
+    if (departments.length === 0) return 1
+    return Math.max(...departments.map((d: any) => d.avgSalary || 0), 1)
+  }, [departments])
+
+  return (
+    <div className="space-y-4">
+      {/* 页头 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <BarChart3 className="h-5 w-5 text-primary" />
+          <div>
+            <h1 className="text-base font-semibold">薪酬分析看板</h1>
+            <p className="mt-0.5 text-sm text-gray-500">薪酬分布、部门对比、趋势分析</p>
+          </div>
+        </div>
+        <Select value={year} onChange={(e) => setYear(e.target.value)} className="!w-24">
+          {Array.from({ length: 5 }, (_, i) => new Date().getFullYear() - i).map(y => (
+            <option key={y} value={y}>{y}年</option>
+          ))}
+        </Select>
+      </div>
+
+      {isLoading ? (
+        <div className="text-center py-8 text-gray-400">加载中...</div>
+      ) : !data ? (
+        <Card><div className="text-center py-8 text-gray-400 text-sm">暂无数据</div></Card>
+      ) : (
+        <>
+          {/* 概览卡片 */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <Card className="p-3">
+              <div className="flex items-center gap-2">
+                <Users className="w-4 h-4 text-blue-500" />
+                <span className="text-xs text-gray-400">员工总数</span>
+              </div>
+              <div className="text-2xl font-bold mt-1">{summary.totalEmployees || 0}</div>
+            </Card>
+            <Card className="p-3">
+              <div className="flex items-center gap-2">
+                <Wallet className="w-4 h-4 text-emerald-500" />
+                <span className="text-xs text-gray-400">月均薪酬</span>
+              </div>
+              <div className="text-2xl font-bold mt-1">¥{fmt(summary.avgSalary)}</div>
+            </Card>
+            <Card className="p-3">
+              <div className="flex items-center gap-2">
+                <TrendingUp className="w-4 h-4 text-purple-500" />
+                <span className="text-xs text-gray-400">薪酬中位数</span>
+              </div>
+              <div className="text-2xl font-bold mt-1">¥{fmt(summary.medianSalary)}</div>
+            </Card>
+            <Card className="p-3">
+              <div className="flex items-center gap-2">
+                <Wallet className="w-4 h-4 text-amber-500" />
+                <span className="text-xs text-gray-400">年度总薪酬</span>
+              </div>
+              <div className="text-2xl font-bold mt-1">¥{fmt(summary.totalAnnual)}</div>
+            </Card>
+          </div>
+
+          {/* 同比环比 */}
+          {summary.yoy !== undefined && (
+            <div className="flex gap-3">
+              <Card className="flex-1 p-3">
+                <div className="text-xs text-gray-400">同比增长率</div>
+                <div className={`text-lg font-bold mt-1 flex items-center gap-1 ${summary.yoy >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
+                  {summary.yoy >= 0 ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
+                  {summary.yoy >= 0 ? '+' : ''}{(summary.yoy || 0).toFixed(1)}%
+                </div>
+              </Card>
+              <Card className="flex-1 p-3">
+                <div className="text-xs text-gray-400">环比增长率</div>
+                <div className={`text-lg font-bold mt-1 flex items-center gap-1 ${summary.mom >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
+                  {summary.mom >= 0 ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
+                  {summary.mom >= 0 ? '+' : ''}{(summary.mom || 0).toFixed(1)}%
+                </div>
+              </Card>
+            </div>
+          )}
+
+          {/* 部门薪酬对比 */}
+          <Card>
+            <h2 className="text-sm font-medium mb-4">部门薪酬对比</h2>
+            {departments.length === 0 ? (
+              <div className="text-center py-4 text-gray-400 text-sm">暂无部门数据</div>
+            ) : (
+              <div className="space-y-3">
+                {departments.map((dept: any) => (
+                  <div key={dept.name}>
+                    <div className="flex items-center justify-between text-sm mb-1">
+                      <span className="text-gray-600">{dept.name}</span>
+                      <div className="flex items-center gap-3 text-xs text-gray-400">
+                        <span>{dept.count}人</span>
+                        <span className="font-medium text-gray-700">¥{fmt(dept.avgSalary)}</span>
+                      </div>
+                    </div>
+                    <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
+                      <div
+                        className="h-full bg-primary rounded-full transition-all"
+                        style={{ width: `${(dept.avgSalary / maxDeptAvg) * 100}%` }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </Card>
+
+          {/* 月度趋势 */}
+          <Card>
+            <h2 className="text-sm font-medium mb-4">月度薪酬趋势</h2>
+            {monthlyTrend.length === 0 ? (
+              <div className="text-center py-4 text-gray-400 text-sm">暂无月度数据</div>
+            ) : (
+              <div className="flex items-end gap-2 h-40">
+                {monthlyTrend.map((m: any) => {
+                  const maxVal = Math.max(...monthlyTrend.map((t: any) => t.total || 0), 1)
+                  const height = ((m.total || 0) / maxVal) * 100
+                  return (
+                    <div key={m.month} className="flex-1 flex flex-col items-center gap-1">
+                      <div className="text-xs text-gray-400">{m.total ? `¥${(m.total / 10000).toFixed(1)}万` : ''}</div>
+                      <div className="w-full bg-gray-100 rounded-t-md flex-1 flex items-end overflow-hidden">
+                        <div
+                          className="w-full bg-primary/70 rounded-t-md transition-all hover:bg-primary"
+                          style={{ height: `${height}%` }}
+                        />
+                      </div>
+                      <div className="text-xs text-gray-400">{m.month}</div>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </Card>
+
+          {summary.totalEmployees === 0 && (
+            <InlineAlert type="info">
+              当前年度暂无薪酬数据，请确保已发布发薪批次。
+            </InlineAlert>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/pages/compliance/RiskCenter.tsx b/frontend/src/pages/compliance/RiskCenter.tsx
new file mode 100644
index 0000000..f8c67f4
--- /dev/null
+++ b/frontend/src/pages/compliance/RiskCenter.tsx
@@ -0,0 +1,206 @@
+/**
+ * 统一风险中心 — 汇总展示合同风险、薪酬风险、社保风险、合规风险
+ * 按风险等级分类，支持快速跳转处理
+ */
+import { useState, useMemo } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Link } from 'react-router-dom'
+import {
+  ShieldAlert, AlertTriangle, Clock, Users, FileText,
+  TrendingDown, Calendar, ChevronRight, Filter,
+} from 'lucide-react'
+import Card from '../../components/ui/Card'
+import Button from '../../components/ui/Button'
+import { InlineAlert } from '../../components/ui/InlineAlert'
+import api from '../../lib/api'
+
+/** 风险等级配置 */
+const RISK_LEVELS: Record<string, { label: string; color: string; bg: string }> = {
+  HIGH: { label: '高风险', color: 'text-rose-600', bg: 'bg-rose-50 border-rose-200' },
+  MEDIUM: { label: '中风险', color: 'text-amber-600', bg: 'bg-amber-50 border-amber-200' },
+  LOW: { label: '低风险', color: 'text-blue-600', bg: 'bg-blue-50 border-blue-200' },
+}
+
+/** 风险类型配置 */
+const RISK_TYPES: Record<string, { label: string; icon: typeof ShieldAlert; link: string }> = {
+  CONTRACT_EXPIRE: { label: '合同到期', icon: FileText, link: '/roster' },
+  CONTRACT_UNSIGNED: { label: '未签合同', icon: FileText, link: '/roster' },
+  PROBATION_EXPIRE: { label: '试用期到期', icon: Clock, link: '/roster' },
+  SALARY_BELOW_MIN: { label: '工资低于最低标准', icon: TrendingDown, link: '/money' },
+  SOCIAL_INSURANCE_GAP: { label: '社保断缴', icon: ShieldAlert, link: '/social' },
+  TERMINATION_RISK: { label: '离职风险', icon: Users, link: '/termination' },
+  POLICY_UNREAD: { label: '制度未阅读', icon: FileText, link: '/policies' },
+}
+
+export default function RiskCenter() {
+  const [filterLevel, setFilterLevel] = useState<string>('ALL')
+  const [filterType, setFilterType] = useState<string>('ALL')
+
+  /** 获取风险列表 */
+  const { data: risks = [], isLoading } = useQuery<any[]>({
+    queryKey: ['risk-center'],
+    queryFn: async () => {
+      const res = await api.get('/compliance/risks') as any
+      return res.data || []
+    },
+  })
+
+  /** 按级别统计 */
+  const stats = useMemo(() => {
+    const high = risks.filter((r: any) => r.level === 'HIGH').length
+    const medium = risks.filter((r: any) => r.level === 'MEDIUM').length
+    const low = risks.filter((r: any) => r.level === 'LOW').length
+    return { high, medium, low, total: risks.length }
+  }, [risks])
+
+  /** 按类型统计 */
+  const typeStats = useMemo(() => {
+    const map: Record<string, number> = {}
+    risks.forEach((r: any) => {
+      map[r.type] = (map[r.type] || 0) + 1
+    })
+    return map
+  }, [risks])
+
+  /** 筛选后的风险列表 */
+  const filteredRisks = useMemo(() => {
+    return risks.filter((r: any) => {
+      if (filterLevel !== 'ALL' && r.level !== filterLevel) return false
+      if (filterType !== 'ALL' && r.type !== filterType) return false
+      return true
+    })
+  }, [risks, filterLevel, filterType])
+
+  return (
+    <div className="space-y-4">
+      {/* 页头 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <ShieldAlert className="h-5 w-5 text-primary" />
+          <div>
+            <h1 className="text-base font-semibold">统一风险中心</h1>
+            <p className="mt-0.5 text-sm text-gray-500">汇总合同、薪酬、社保、合规风险</p>
+          </div>
+        </div>
+      </div>
+
+      {/* 风险概览卡片 */}
+      <div className="grid grid-cols-4 gap-3">
+        <Card className="p-3">
+          <div className="text-xs text-gray-400">总风险</div>
+          <div className="text-2xl font-bold text-gray-900 mt-1">{stats.total}</div>
+        </Card>
+        <Card className="p-3">
+          <div className="text-xs text-gray-400">高风险</div>
+          <div className="text-2xl font-bold text-rose-600 mt-1">{stats.high}</div>
+        </Card>
+        <Card className="p-3">
+          <div className="text-xs text-gray-400">中风险</div>
+          <div className="text-2xl font-bold text-amber-600 mt-1">{stats.medium}</div>
+        </Card>
+        <Card className="p-3">
+          <div className="text-xs text-gray-400">低风险</div>
+          <div className="text-2xl font-bold text-blue-600 mt-1">{stats.low}</div>
+        </Card>
+      </div>
+
+      {/* 高风险告警 */}
+      {stats.high > 0 && (
+        <InlineAlert type="error">
+          当前有 {stats.high} 项高风险事项需要立即处理，请尽快跟进。
+        </InlineAlert>
+      )}
+
+      {/* 风险类型分布 */}
+      <Card>
+        <h2 className="text-sm font-medium mb-3">风险类型分布</h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
+          {Object.entries(RISK_TYPES).map(([key, cfg]) => {
+            const count = typeStats[key] || 0
+            if (count === 0) return null
+            const Icon = cfg.icon
+            return (
+              <Link
+                key={key}
+                to={cfg.link}
+                className="flex items-center gap-2 p-2.5 rounded-lg border border-gray-100 hover:border-primary/30 hover:bg-primary/5 transition-colors"
+              >
+                <Icon className="w-4 h-4 text-gray-400" />
+                <div className="flex-1 min-w-0">
+                  <div className="text-xs text-gray-600 truncate">{cfg.label}</div>
+                  <div className="text-sm font-bold text-gray-900">{count}</div>
+                </div>
+                <ChevronRight className="w-3 h-3 text-gray-300" />
+              </Link>
+            )
+          })}
+          {Object.values(typeStats).every((v) => v === 0) && (
+            <div className="col-span-full text-center py-4 text-sm text-gray-400">暂无风险项</div>
+          )}
+        </div>
+      </Card>
+
+      {/* 筛选器 */}
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="flex items-center gap-1 text-sm text-gray-400">
+          <Filter className="w-4 h-4" />
+          筛选
+        </div>
+        <div className="flex gap-1">
+          <button
+            className={`px-3 py-1 rounded-md text-xs transition-colors ${filterLevel === 'ALL' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+            onClick={() => setFilterLevel('ALL')}
+          >全部</button>
+          {Object.entries(RISK_LEVELS).map(([key, cfg]) => (
+            <button
+              key={key}
+              className={`px-3 py-1 rounded-md text-xs transition-colors ${filterLevel === key ? 'bg-primary text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+              onClick={() => setFilterLevel(key)}
+            >{cfg.label}</button>
+          ))}
+        </div>
+      </div>
+
+      {/* 风险列表 */}
+      <Card>
+        {isLoading ? (
+          <div className="text-center py-8 text-gray-400">加载中...</div>
+        ) : filteredRisks.length === 0 ? (
+          <div className="text-center py-8 text-gray-400 text-sm">
+            {risks.length === 0 ? '暂无风险项，一切正常' : '当前筛选条件下无匹配项'}
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {filteredRisks.map((r: any, i: number) => {
+              const levelCfg = RISK_LEVELS[r.level] || RISK_LEVELS.LOW
+              const typeCfg = RISK_TYPES[r.type] || { label: r.type, icon: AlertTriangle, link: '/' }
+              const Icon = typeCfg.icon
+              return (
+                <Link
+                  key={i}
+                  to={typeCfg.link}
+                  className={`flex items-start gap-3 p-3 rounded-lg border ${levelCfg.bg} hover:shadow-sm transition-shadow`}
+                >
+                  <Icon className={`w-4 h-4 mt-0.5 shrink-0 ${levelCfg.color}`} />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className={`text-xs font-medium ${levelCfg.color}`}>{levelCfg.label}</span>
+                      <span className="text-xs text-gray-400">{typeCfg.label}</span>
+                    </div>
+                    <div className="text-sm text-gray-700 mt-0.5">{r.message}</div>
+                    {r.employeeName && (
+                      <div className="text-xs text-gray-400 mt-0.5">
+                        {r.employeeName} · {r.department || ''}
+                      </div>
+                    )}
+                  </div>
+                  <ChevronRight className="w-4 h-4 text-gray-300 shrink-0 mt-1" />
+                </Link>
+              )
+            })}
+          </div>
+        )}
+      </Card>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/portal/EmployeeHome.tsx b/frontend/src/pages/portal/EmployeeHome.tsx
new file mode 100644
index 0000000..db4ddba
--- /dev/null
+++ b/frontend/src/pages/portal/EmployeeHome.tsx
@@ -0,0 +1,232 @@
+/**
+ * 员工 Hub 首页 — 员工端统一入口
+ * 展示个人概览、待办事项、快捷入口、公司公告
+ */
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Link } from 'react-router-dom'
+import {
+  DollarSign, FileText, CalendarCheck, ScrollText,
+  TrendingUp, Clock, AlertCircle, ChevronRight,
+} from 'lucide-react'
+import Card from '../../components/ui/Card'
+import { InlineAlert } from '../../components/ui/InlineAlert'
+
+/** 员工端 API 实例（自动携带 portalToken） */
+const portalApi = (await import('../../lib/api')).default.create({ baseURL: '/api/v1/portal' })
+portalApi.interceptors.request.use((config: any) => {
+  const token = localStorage.getItem('portalToken')
+  if (token) config.headers.Authorization = `Bearer ${token}`
+  return config
+})
+
+/** 金额格式化 */
+const fmt = (n: number) => (n || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+
+/** 快捷入口配置 */
+const QUICK_ACTIONS = [
+  { path: '/portal/payslip', label: '工资条', icon: DollarSign, color: 'bg-emerald-50 text-emerald-600' },
+  { path: '/portal/contract', label: '我的合同', icon: FileText, color: 'bg-blue-50 text-blue-600' },
+  { path: '/portal/attendance', label: '我的考勤', icon: CalendarCheck, color: 'bg-purple-50 text-purple-600' },
+  { path: '/portal/policies', label: '规章制度', icon: ScrollText, color: 'bg-amber-50 text-amber-600' },
+]
+
+export default function EmployeeHome() {
+  const employee = (() => {
+    try { return JSON.parse(localStorage.getItem('portalEmployee') || '{}') } catch { return {} }
+  })()
+
+  /** 获取员工首页概览数据 */
+  const { data: overview, isLoading } = useQuery<any>({
+    queryKey: ['portal-home-overview'],
+    queryFn: async () => {
+      const res = await portalApi.get('/home/overview') as any
+      return res.data
+    },
+  })
+
+  if (isLoading) {
+    return <div className="space-y-4">
+      <div className="h-28 bg-gray-100 rounded-xl animate-pulse" />
+      <div className="h-32 bg-gray-100 rounded-xl animate-pulse" />
+      <div className="h-48 bg-gray-100 rounded-xl animate-pulse" />
+    </div>
+  }
+
+  const latestPayslip = overview?.latestPayslip
+  const contractInfo = overview?.contract
+  const pendingTasks = overview?.pendingTasks || []
+  const announcements = overview?.announcements || []
+  const attendanceSummary = overview?.attendance
+
+  return (
+    <div className="space-y-4">
+      {/* 欢迎卡片 */}
+      <Card className="bg-gradient-to-br from-indigo-600 to-indigo-700 text-white border-0">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-lg font-bold">你好，{employee.name || '同事'}</h1>
+            <p className="text-sm text-indigo-100 mt-1">{employee.department || ''} · {employee.position || ''}</p>
+          </div>
+          <div className="text-right">
+            <div className="text-xs text-indigo-100">本月实发</div>
+            <div className="text-xl font-bold">¥{fmt(latestPayslip?.netPay || 0)}</div>
+          </div>
+        </div>
+      </Card>
+
+      {/* 待办提醒 */}
+      {pendingTasks.length > 0 && (
+        <div className="space-y-2">
+          <h2 className="text-sm font-medium text-gray-700 flex items-center gap-1">
+            <AlertCircle className="w-4 h-4 text-amber-500" />
+            待办事项（{pendingTasks.length}）
+          </h2>
+          {pendingTasks.map((task: any, i: number) => (
+            <InlineAlert key={i} type={task.severity === 'high' ? 'error' : 'warning'} className="text-xs">
+              {task.message}
+            </InlineAlert>
+          ))}
+        </div>
+      )}
+
+      {/* 快捷入口 */}
+      <div>
+        <h2 className="text-sm font-medium text-gray-700 mb-2">快捷入口</h2>
+        <div className="grid grid-cols-4 gap-3">
+          {QUICK_ACTIONS.map((action) => {
+            const Icon = action.icon
+            return (
+              <Link
+                key={action.path}
+                to={action.path}
+                className="flex flex-col items-center gap-1.5 p-3 rounded-xl bg-white border border-gray-100 hover:shadow-sm transition-shadow"
+              >
+                <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${action.color}`}>
+                  <Icon className="w-5 h-5" />
+                </div>
+                <span className="text-xs text-gray-600">{action.label}</span>
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* 最新工资条 */}
+      {latestPayslip && (
+        <Card>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-sm font-medium flex items-center gap-1">
+              <DollarSign className="w-4 h-4 text-emerald-500" />
+              最新工资条
+            </h2>
+            <Link to="/portal/payslip" className="text-xs text-primary flex items-center hover:underline">
+              查看全部 <ChevronRight className="w-3 h-3" />
+            </Link>
+          </div>
+          <div className="grid grid-cols-3 gap-3 text-sm">
+            <div>
+              <div className="text-xs text-gray-400">月份</div>
+              <div className="font-medium">{latestPayslip.month}</div>
+            </div>
+            <div>
+              <div className="text-xs text-gray-400">应发合计</div>
+              <div className="font-medium">¥{fmt(latestPayslip.grossPay)}</div>
+            </div>
+            <div>
+              <div className="text-xs text-gray-400">实发合计</div>
+              <div className="font-medium text-emerald-600">¥{fmt(latestPayslip.netPay)}</div>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* 合同状态 */}
+      {contractInfo && (
+        <Card>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-sm font-medium flex items-center gap-1">
+              <FileText className="w-4 h-4 text-blue-500" />
+              合同信息
+            </h2>
+            <Link to="/portal/contract" className="text-xs text-primary flex items-center hover:underline">
+              详情 <ChevronRight className="w-3 h-3" />
+            </Link>
+          </div>
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-gray-400">合同类型</span>
+              <span className="font-medium">{contractInfo.typeLabel || '—'}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-400">合同期间</span>
+              <span className="font-medium text-xs">{contractInfo.startDate} ~ {contractInfo.endDate || '无固定期'}</span>
+            </div>
+            {contractInfo.daysToExpire !== null && contractInfo.daysToExpire !== undefined && (
+              <div className="flex justify-between">
+                <span className="text-gray-400">到期天数</span>
+                <span className={`font-medium ${contractInfo.daysToExpire < 30 ? 'text-amber-600' : 'text-gray-700'}`}>
+                  {contractInfo.daysToExpire > 0 ? `${contractInfo.daysToExpire}天后到期` : '已到期'}
+                </span>
+              </div>
+            )}
+          </div>
+        </Card>
+      )}
+
+      {/* 考勤概览 */}
+      {attendanceSummary && (
+        <Card>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-sm font-medium flex items-center gap-1">
+              <CalendarCheck className="w-4 h-4 text-purple-500" />
+              本月考勤
+            </h2>
+            <Link to="/portal/attendance" className="text-xs text-primary flex items-center hover:underline">
+              详情 <ChevronRight className="w-3 h-3" />
+            </Link>
+          </div>
+          <div className="grid grid-cols-4 gap-2 text-center">
+            <div className="p-2 rounded-lg bg-green-50">
+              <div className="text-lg font-bold text-emerald-600">{attendanceSummary.normalDays || 0}</div>
+              <div className="text-xs text-gray-400">正常</div>
+            </div>
+            <div className="p-2 rounded-lg bg-amber-50">
+              <div className="text-lg font-bold text-amber-600">{attendanceSummary.lateCount || 0}</div>
+              <div className="text-xs text-gray-400">迟到</div>
+            </div>
+            <div className="p-2 rounded-lg bg-blue-50">
+              <div className="text-lg font-bold text-blue-600">{attendanceSummary.leaveDays || 0}</div>
+              <div className="text-xs text-gray-400">请假</div>
+            </div>
+            <div className="p-2 rounded-lg bg-gray-50">
+              <div className="text-lg font-bold text-gray-600">{attendanceSummary.absentDays || 0}</div>
+              <div className="text-xs text-gray-400">缺勤</div>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* 公司公告 */}
+      {announcements.length > 0 && (
+        <Card>
+          <h2 className="text-sm font-medium mb-3 flex items-center gap-1">
+            <ScrollText className="w-4 h-4 text-gray-400" />
+            公司公告
+          </h2>
+          <div className="space-y-2">
+            {announcements.slice(0, 3).map((ann: any, i: number) => (
+              <div key={i} className="flex items-start gap-2 p-2 rounded-md hover:bg-gray-50">
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium text-gray-700 truncate">{ann.title}</div>
+                  <div className="text-xs text-gray-400 mt-0.5">{ann.date} · {ann.author}</div>
+                </div>
+                <ChevronRight className="w-4 h-4 text-gray-300 shrink-0 mt-1" />
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/pages/portal/OnboardingProgress.tsx b/frontend/src/pages/portal/OnboardingProgress.tsx
new file mode 100644
index 0000000..f3bd2d8
--- /dev/null
+++ b/frontend/src/pages/portal/OnboardingProgress.tsx
@@ -0,0 +1,128 @@
+/**
+ * 入职进度面板 — 员工端查看入职流程完成状态
+ * 展示入职步骤进度、材料提交状态、待完成项
+ */
+import { useQuery } from '@tanstack/react-query'
+import { Check, Clock, AlertCircle, FileText, Upload, User, Phone, Banknote } from 'lucide-react'
+import Card from '../../components/ui/Card'
+import { InlineAlert } from '../../components/ui/InlineAlert'
+import { Stepper } from '../../components/ui/Stepper'
+
+/** 员工端 API 实例 */
+const portalApi = (await import('../../lib/api')).default.create({ baseURL: '/api/v1/portal' })
+portalApi.interceptors.request.use((config: any) => {
+  const token = localStorage.getItem('portalToken')
+  if (token) config.headers.Authorization = `Bearer ${token}`
+  return config
+})
+
+/** 入职步骤定义 */
+const ONBOARDING_STEPS = [
+  { key: 'profile', title: '基本信息', icon: User },
+  { key: 'documents', title: '材料上传', icon: Upload },
+  { key: 'contract', title: '合同签署', icon: FileText },
+  { key: 'bankcard', title: '银行卡登记', icon: Banknote },
+  { key: 'complete', title: '入职完成', icon: Check },
+]
+
+export default function OnboardingProgress() {
+  /** 获取入职进度数据 */
+  const { data: progress, isLoading } = useQuery<any>({
+    queryKey: ['portal-onboarding-progress'],
+    queryFn: async () => {
+      const res = await portalApi.get('/onboarding/progress') as any
+      return res.data
+    },
+  })
+
+  if (isLoading) {
+    return <div className="space-y-4">
+      <div className="h-24 bg-gray-100 rounded-xl animate-pulse" />
+      <div className="h-48 bg-gray-100 rounded-xl animate-pulse" />
+    </div>
+  }
+
+  if (!progress) {
+    return <Card><div className="text-center py-8 text-gray-400 text-sm">暂无入职进度信息</div></Card>
+  }
+
+  const steps = ONBOARDING_STEPS.map((s, i) => {
+    const stepData = progress.steps?.[s.key]
+    const status: 'complete' | 'current' | 'pending' = 
+      stepData?.completed ? 'complete' :
+      i === progress.currentStepIndex ? 'current' : 'pending'
+    return { key: s.key, title: s.title, status, description: stepData?.description }
+  })
+
+  const completionRate = progress.completionRate || 0
+  const pendingItems = progress.pendingItems || []
+
+  return (
+    <div className="space-y-4">
+      {/* 进度概览 */}
+      <Card className="bg-gradient-to-br from-indigo-600 to-indigo-700 text-white border-0">
+        <div className="text-center">
+          <div className="text-3xl font-bold">{completionRate}%</div>
+          <div className="text-sm text-indigo-100 mt-1">入职完成度</div>
+          <div className="mt-3 h-2 bg-indigo-800/50 rounded-full overflow-hidden">
+            <div className="h-full bg-white rounded-full transition-all" style={{ width: `${completionRate}%` }} />
+          </div>
+        </div>
+      </Card>
+
+      {/* 待办提醒 */}
+      {pendingItems.length > 0 && (
+        <div className="space-y-2">
+          <h2 className="text-sm font-medium text-gray-700 flex items-center gap-1">
+            <AlertCircle className="w-4 h-4 text-amber-500" />
+            待完成项（{pendingItems.length}）
+          </h2>
+          {pendingItems.map((item: any, i: number) => (
+            <InlineAlert key={i} type="warning" className="text-xs">
+              {item.message}
+            </InlineAlert>
+          ))}
+        </div>
+      )}
+
+      {/* 步骤进度条 */}
+      <Card>
+        <h2 className="text-sm font-medium mb-4">入职流程进度</h2>
+        <Stepper steps={steps} orientation="vertical" />
+      </Card>
+
+      {/* 各步骤详情 */}
+      <Card>
+        <h2 className="text-sm font-medium mb-3">步骤详情</h2>
+        <div className="space-y-3">
+          {ONBOARDING_STEPS.map((step) => {
+            const stepData = progress.steps?.[step.key]
+            const Icon = step.icon
+            const completed = stepData?.completed
+            return (
+              <div key={step.key} className="flex items-start gap-3 p-3 rounded-lg border border-gray-100">
+                <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${
+                  completed ? 'bg-emerald-50 text-emerald-600' : 'bg-gray-50 text-gray-400'
+                }`}>
+                  {completed ? <Check className="w-4 h-4" /> : <Icon className="w-4 h-4" />}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium text-gray-700">{step.title}</div>
+                  {stepData?.description && (
+                    <div className="text-xs text-gray-400 mt-0.5">{stepData.description}</div>
+                  )}
+                  {stepData?.completedAt && (
+                    <div className="text-xs text-emerald-500 mt-0.5 flex items-center gap-1">
+                      <Clock className="w-3 h-3" />
+                      完成于 {new Date(stepData.completedAt).toLocaleDateString('zh-CN')}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </Card>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/portal/ResignationApply.tsx b/frontend/src/pages/portal/ResignationApply.tsx
new file mode 100644
index 0000000..495f28c
--- /dev/null
+++ b/frontend/src/pages/portal/ResignationApply.tsx
@@ -0,0 +1,202 @@
+/**
+ * 员工离职申请入口 — 员工端提交离职申请、查看申请状态、撤回申请
+ */
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { UserX, Clock, Check, X, FileText } from 'lucide-react'
+import Card from '../../components/ui/Card'
+import Button from '../../components/ui/Button'
+import { Input, Label, Select } from '../../components/ui/Input'
+import { InlineAlert } from '../../components/ui/InlineAlert'
+
+/** 员工端 API 实例 */
+const portalApi = (await import('../../lib/api')).default.create({ baseURL: '/api/v1/portal' })
+portalApi.interceptors.request.use((config: any) => {
+  const token = localStorage.getItem('portalToken')
+  if (token) config.headers.Authorization = `Bearer ${token}`
+  return config
+})
+
+/** 离职原因选项 */
+const RESIGN_REASONS = [
+  { value: '个人发展', label: '个人发展' },
+  { value: '薪资待遇', label: '薪资待遇' },
+  { value: '家庭原因', label: '家庭原因' },
+  { value: '健康原因', label: '健康原因' },
+  { value: '工作环境', label: '工作环境' },
+  { value: '其他', label: '其他' },
+]
+
+/** 状态映射 */
+const STATUS_MAP: Record<string, { label: string; color: string }> = {
+  DRAFT: { label: '草稿', color: 'bg-gray-100 text-gray-600' },
+  PENDING_APPROVAL: { label: '待审批', color: 'bg-amber-50 text-amber-700' },
+  APPROVED: { label: '已审批', color: 'bg-blue-50 text-blue-700' },
+  REJECTED: { label: '已驳回', color: 'bg-red-50 text-red-700' },
+  COMPLETED: { label: '已完成', color: 'bg-green-50 text-safe' },
+  CANCELLED: { label: '已撤回', color: 'bg-gray-100 text-gray-400' },
+}
+
+export default function ResignationApply() {
+  const queryClient = useQueryClient()
+  const [form, setForm] = useState({
+    reason: '',
+    expectedDate: '',
+    remark: '',
+  })
+
+  /** 查询离职申请状态 */
+  const { data: records = [], isLoading } = useQuery<any[]>({
+    queryKey: ['portal-resignation-status'],
+    queryFn: async () => {
+      const res = await portalApi.get('/resignation/status') as any
+      return res.data || []
+    },
+  })
+
+  /** 提交离职申请 */
+  const submitMutation = useMutation({
+    mutationFn: async (data: { reason: string; expectedDate: string; remark: string }) => {
+      const res = await portalApi.post('/resignation/submit', data) as any
+      return res.data
+    },
+    onSuccess: () => {
+      toast.success('离职申请已提交，请等待HR审批')
+      queryClient.invalidateQueries({ queryKey: ['portal-resignation-status'] })
+      setForm({ reason: '', expectedDate: '', remark: '' })
+    },
+    onError: (err: any) => {
+      toast.error(err?.response?.data?.error?.message || '提交失败')
+    },
+  })
+
+  /** 撤回离职申请 */
+  const withdrawMutation = useMutation({
+    mutationFn: async (id: string) => {
+      const res = await portalApi.post(`/resignation/${id}/withdraw`) as any
+      return res.data
+    },
+    onSuccess: () => {
+      toast.success('离职申请已撤回')
+      queryClient.invalidateQueries({ queryKey: ['portal-resignation-status'] })
+    },
+    onError: (err: any) => {
+      toast.error(err?.response?.data?.error?.message || '撤回失败')
+    },
+  })
+
+  const handleSubmit = () => {
+    if (!form.reason) { toast.error('请选择离职原因'); return }
+    if (!form.expectedDate) { toast.error('请选择预计离职日期'); return }
+    submitMutation.mutate(form)
+  }
+
+  const hasPending = records.some((r: any) => r.status === 'DRAFT' || r.status === 'PENDING_APPROVAL')
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <UserX className="h-5 w-5 text-primary" />
+        <h1 className="text-base font-semibold">离职申请</h1>
+      </div>
+
+      <InlineAlert type="info">
+        提交离职申请后，HR将在3个工作日内审批。提前30天提交为法定要求，请合理选择离职日期。
+      </InlineAlert>
+
+      {/* 申请表单 */}
+      {!hasPending ? (
+        <Card>
+          <h2 className="text-sm font-medium mb-4">填写离职申请</h2>
+          <div className="space-y-4">
+            <div>
+              <Label>离职原因 *</Label>
+              <Select value={form.reason} onChange={(e) => setForm({ ...form, reason: e.target.value })}>
+                <option value="">请选择</option>
+                {RESIGN_REASONS.map(r => <option key={r.value} value={r.value}>{r.label}</option>)}
+              </Select>
+            </div>
+            <div>
+              <Label>预计离职日期 *</Label>
+              <Input
+                type="date"
+                value={form.expectedDate}
+                min={new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10)}
+                onChange={(e) => setForm({ ...form, expectedDate: e.target.value })}
+              />
+              <div className="text-xs text-gray-400 mt-1">法定要求提前30天通知</div>
+            </div>
+            <div>
+              <Label>备注说明</Label>
+              <Input
+                value={form.remark}
+                onChange={(e) => setForm({ ...form, remark: e.target.value })}
+                placeholder="补充说明（选填）"
+              />
+            </div>
+            <Button onClick={handleSubmit} disabled={submitMutation.isPending} className="w-full">
+              {submitMutation.isPending ? '提交中...' : '提交离职申请'}
+            </Button>
+          </div>
+        </Card>
+      ) : (
+        <InlineAlert type="warning">
+          您已有一个待处理的离职申请，请等待审批结果或撤回后重新提交。
+        </InlineAlert>
+      )}
+
+      {/* 申请记录 */}
+      <Card>
+        <h2 className="text-sm font-medium mb-3 flex items-center gap-1">
+          <FileText className="w-4 h-4 text-gray-400" />
+          申请记录
+        </h2>
+        {isLoading ? (
+          <div className="text-center py-4 text-gray-400 text-sm">加载中...</div>
+        ) : records.length === 0 ? (
+          <div className="text-center py-4 text-gray-400 text-sm">暂无离职申请记录</div>
+        ) : (
+          <div className="space-y-3">
+            {records.map((r: any) => {
+              const statusCfg = STATUS_MAP[r.status] || STATUS_MAP.DRAFT
+              const canWithdraw = r.status === 'DRAFT' || r.status === 'PENDING_APPROVAL'
+              return (
+                <div key={r.id} className="p-3 rounded-lg border border-gray-100">
+                  <div className="flex items-center justify-between mb-2">
+                    <span className={`px-2 py-0.5 rounded text-xs ${statusCfg.color}`}>{statusCfg.label}</span>
+                    <span className="text-xs text-gray-400 flex items-center gap-1">
+                      <Clock className="w-3 h-3" />
+                      {new Date(r.createdAt).toLocaleDateString('zh-CN')}
+                    </span>
+                  </div>
+                  <div className="space-y-1 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-gray-400">预计离职日期</span>
+                      <span className="font-medium">{r.terminationDate ? new Date(r.terminationDate).toLocaleDateString('zh-CN') : '—'}</span>
+                    </div>
+                    {r.remark && (
+                      <div className="text-xs text-gray-500 mt-1">{r.remark}</div>
+                    )}
+                  </div>
+                  {canWithdraw && (
+                    <div className="mt-2 pt-2 border-t border-gray-50">
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => withdrawMutation.mutate(r.id)}
+                        disabled={withdrawMutation.isPending}
+                      >
+                        {withdrawMutation.isPending ? '撤回中...' : '撤回申请'}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </Card>
+    </div>
+  )
+}