feat: AIHR 智能人力资源管理系统初始提交

- 员工花名册管理（加密存储、导入导出）
- 薪酬管理（发薪批次、薪酬模版、加班费计算、工资条）
- 社保公积金（多城市配置、版本管理、基数调整）
- 解聘管理（6步流程、证据链、工作交接）
- AI 助手（合同审查、风险预测、RAG 知识库）
- Dashboard 仪表盘
- 设置与通知

frontend/src/components/ui/Skeleton.tsx

@@ -0,0 +1,61 @@
+import clsx from 'clsx'
+
+interface SkeletonProps {
+  className?: string
+  lines?: number
+}
+
+/**
+ * 骨架屏组件
+ * 用于数据加载时的占位显示，减少布局闪烁
+ */
+export function Skeleton({ className }: SkeletonProps) {
+  return <div className={clsx('animate-pulse rounded bg-gray-200', className)} />
+}
+
+/**
+ * 多行文本骨架屏
+ */
+export function SkeletonText({ lines = 3, className }: SkeletonProps) {
+  return (
+    <div className={clsx('space-y-2', className)}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton key={i} className={clsx('h-4', i === lines - 1 && 'w-2/3')} />
+      ))}
+    </div>
+  )
+}
+
+/**
+ * 卡片骨架屏
+ */
+export function SkeletonCard() {
+  return (
+    <div className="p-4 rounded-lg border border-gray-200 space-y-3">
+      <Skeleton className="h-5 w-1/3" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-2/3" />
+    </div>
+  )
+}
+
+/**
+ * 页面级骨架屏
+ */
+export function SkeletonPage() {
+  return (
+    <div className="space-y-4">
+      <Skeleton className="h-8 w-48" />
+      <div className="flex gap-1">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Skeleton key={i} className="h-8 w-20" />
+        ))}
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <SkeletonCard key={i} />
+        ))}
+      </div>
+    </div>
+  )
+}