feat: 完成23项系统优化 - 花名册社保状态列/身份证复制/附件类型扩展, 用工办理姓名检索/直接提交/文书查看/批量证明, 风险中心跳转筛选+批量处理, 日历7/15/35天分组+逾期统计, 考勤单条编辑+按人导出, 工资条查看状态+工资流水导出, 辞职申请附件上传, 交接清单PDF下载, 操作完成下一步引导, 休假审批入口, 人效成本分部门

frontend/src/pages/SalaryDashboard.tsx

@@ -4,7 +4,7 @@
 import { useState, useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import {
-  BarChart3, TrendingUp, TrendingDown, Users, Wallet,
+  BarChart3, TrendingUp, TrendingDown, Users, Wallet, DollarSign, Gauge,
 } from 'lucide-react'
 import Card from '../components/ui/Card'
 import { Select } from '../components/ui/Input'
@@ -15,11 +15,15 @@ import { salaryDashboardApi } from '../lib/api-services'
 
 /** 金额格式化 */
 const fmt = (n: number) => (n || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+const fmtShort = (n: number) => {
+  if (!n) return '0'
+  if (n >= 10000) return `${(n / 10000).toFixed(1)}万`
+  return n.toFixed(0)
+}
 
 export default function SalaryDashboard() {
   const [year, setYear] = useState(new Date().getFullYear().toString())
 
-  /** 获取薪酬分析数据 */
   const { data, isLoading, isError, error, refetch } = useQuery<any>({
     queryKey: ['salary-dashboard', year],
     queryFn: async () => {
@@ -31,17 +35,25 @@ export default function SalaryDashboard() {
   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])
 
+  const maxMonthly = useMemo(() => {
+    if (monthlyTrend.length === 0) return 1
+    return Math.max(...monthlyTrend.map((t: any) => t.total || 0), 1)
+  }, [monthlyTrend])
+
+  const summaryCards = [
+    { icon: Users, label: '员工总数', value: summary.totalEmployees || 0, suffix: '', color: 'text-blue-600', bg: 'bg-blue-50', border: 'border-blue-100' },
+    { icon: Wallet, label: '月均薪酬', value: `¥${fmt(summary.avgSalary)}`, suffix: '', color: 'text-emerald-600', bg: 'bg-emerald-50', border: 'border-emerald-100' },
+    { icon: Gauge, label: '薪酬中位数', value: `¥${fmt(summary.medianSalary)}`, suffix: '', color: 'text-purple-600', bg: 'bg-purple-50', border: 'border-purple-100' },
+    { icon: DollarSign, label: '年度总薪酬', value: `¥${fmt(summary.totalAnnual)}`, suffix: '', color: 'text-amber-600', bg: 'bg-amber-50', border: 'border-amber-100' },
+  ]
+
   return (
     <div className="space-y-4">
-      <PageGuide>
-        薪酬分析看板展示企业薪酬分布、部门间薪酬对比及年度趋势变化。选择年份后查看各部门薪酬数据、同比环比变化。用于辅助薪酬决策和成本控制。
-      </PageGuide>
       {/* 页头 */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
@@ -58,6 +70,11 @@ export default function SalaryDashboard() {
         </Select>
       </div>
 
+      {/* 操作说明 — 紧跟标题下方 */}
+      <PageGuide>
+        薪酬分析看板展示企业薪酬分布、部门间薪酬对比及年度趋势变化。选择年份后查看各部门薪酬数据、同比环比变化。用于辅助薪酬决策和成本控制。
+      </PageGuide>
+
       {isLoading ? (
         <div className="text-center py-8 text-gray-400">加载中...</div>
       ) : isError ? (
@@ -68,110 +85,136 @@ export default function SalaryDashboard() {
         <>
           {/* 概览卡片 */}
           <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>
+            {summaryCards.map((card, i) => {
+              const Icon = card.icon
+              return (
+                <Card key={i} className={`p-4 border ${card.border}`}>
+                  <div className="flex items-center justify-between">
+                    <div className={`flex items-center justify-center w-8 h-8 rounded-lg ${card.bg}`}>
+                      <Icon className={`w-4 h-4 ${card.color}`} />
+                    </div>
+                  </div>
+                  <div className="text-xs text-gray-400 mt-2">{card.label}</div>
+                  <div className={`text-xl font-bold mt-0.5 ${card.color}`}>{card.value}{card.suffix}</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 className="grid grid-cols-2 gap-3">
+              <Card className="p-4">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs text-gray-400">同比增长率</span>
+                  <div className={`flex items-center gap-1 text-sm font-bold ${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>
                 </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)}%
+              <Card className="p-4">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs text-gray-400">环比增长率</span>
+                  <div className={`flex items-center gap-1 text-sm font-bold ${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>
                 </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 className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            {/* 部门薪酬对比 */}
+            <Card className="p-4">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-sm font-medium">部门薪酬对比</h2>
+                {departments.length > 0 && (
+                  <span className="text-xs text-gray-400">共 {departments.length} 个部门</span>
+                )}
               </div>
-            )}
-          </Card>
+              {departments.length === 0 ? (
+                <div className="text-center py-4 text-gray-400 text-sm">暂无部门数据</div>
+              ) : (
+                <div className="space-y-2.5 max-h-[420px] overflow-y-auto pr-1">
+                  {departments.map((dept: any, idx: number) => {
+                    const pct = (dept.avgSalary / maxDeptAvg) * 100
+                    const isTop3 = idx < 3
+                    return (
+                      <div key={dept.name} className="group">
+                        <div className="flex items-center justify-between text-sm mb-1">
+                          <div className="flex items-center gap-2 min-w-0">
+                            {isTop3 && (
+                              <span className={`flex-shrink-0 w-4 h-4 rounded text-[10px] flex items-center justify-center font-bold ${
+                                idx === 0 ? 'bg-amber-100 text-amber-700' : idx === 1 ? 'bg-gray-200 text-gray-600' : 'bg-orange-100 text-orange-700'
+                              }`}>{idx + 1}</span>
+                            )}
+                            <span className="text-gray-600 truncate">{dept.name}</span>
+                          </div>
+                          <div className="flex items-center gap-2 text-xs flex-shrink-0">
+                            <span className="text-gray-400">{dept.count}人</span>
+                            <span className="text-gray-400">人均</span>
+                            <span className="font-semibold text-gray-800">¥{fmt(dept.avgSalary)}</span>
+                          </div>
+                        </div>
+                        <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
+                          <div
+                            className={`h-full rounded-full transition-all group-hover:opacity-80 ${
+                              isTop3 ? 'bg-gradient-to-r from-primary to-primary/70' : 'bg-primary/40'
+                            }`}
+                            style={{ width: `${pct}%` }}
+                          />
+                        </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>
-                  )
-                })}
+            {/* 月度趋势 */}
+            <Card className="p-4">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-sm font-medium">月度薪酬趋势</h2>
+                {monthlyTrend.length > 0 && (
+                  <span className="text-xs text-gray-400">单位：万元</span>
+                )}
               </div>
-            )}
-          </Card>
+              {monthlyTrend.length === 0 ? (
+                <div className="text-center py-4 text-gray-400 text-sm">暂无月度数据</div>
+              ) : (
+                <div className="relative">
+                  {/* 网格参考线 */}
+                  <div className="absolute inset-0 flex flex-col justify-between pointer-events-none">
+                    {[0, 1, 2, 3].map(i => (
+                      <div key={i} className="border-t border-dashed border-gray-100" />
+                    ))}
+                  </div>
+                  <div className="flex items-end gap-1.5 h-48 relative">
+                    {monthlyTrend.map((m: any) => {
+                      const height = ((m.total || 0) / maxMonthly) * 100
+                      return (
+                        <div key={m.month} className="flex-1 flex flex-col items-center gap-1 group cursor-pointer">
+                          <div className="text-[10px] text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
+                            {m.total ? `¥${fmtShort(m.total)}` : ''}
+                          </div>
+                          <div className="w-full bg-gray-50 rounded-t-md flex-1 flex items-end overflow-hidden">
+                            <div
+                              className="w-full bg-gradient-to-t from-primary/60 to-primary rounded-t-md transition-all group-hover:from-primary group-hover:to-primary/80"
+                              style={{ height: `${height}%` }}
+                            />
+                          </div>
+                          <div className="text-[10px] text-gray-400">{m.month}</div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              )}
+            </Card>
+          </div>
 
           {summary.totalEmployees === 0 && (
             <InlineAlert type="info">