feat(P25-2/P25-3/P26-2/P28-1/P24-2/P29-3): 落地内部OA够用版前端入口与运营页面

关联 Issue: P25-2, P25-3, P25-4, P26-2, P26-4, P28-1, P28-2, P28-3, P28-4, P24-2, P29-3

client/src/components/common/RiskFlagsCard.tsx

@@ -0,0 +1,34 @@
+import type { RiskFlag } from "../../api/feeControl";
+
+export function RiskFlagsCard({ items, title = "风险项" }: { items: RiskFlag[]; title?: string }) {
+  if (!items.length) {
+    return null;
+  }
+
+  return (
+    <div className="card-std space-y-3 p-6" data-testid="risk-flags-card">
+      <h3 className="text-base font-semibold text-zinc-900">{title}</h3>
+      <div className="space-y-3">
+        {items.map((item) => (
+          <div
+            key={item.id}
+            className={
+              item.level === "high"
+                ? "rounded-lg border border-red-200 bg-red-50 p-3"
+                : item.level === "medium"
+                  ? "rounded-lg border border-amber-200 bg-amber-50 p-3"
+                  : "rounded-lg border border-zinc-200 bg-zinc-50 p-3"
+            }
+          >
+            <div className="flex items-center justify-between gap-3">
+              <div className="font-medium text-zinc-900">{item.title}</div>
+              <span className="text-xs uppercase text-zinc-500">{item.level}</span>
+            </div>
+            {item.detail ? <div className="mt-1 text-sm text-zinc-600">{item.detail}</div> : null}
+            <div className="mt-2 text-xs text-zinc-500">来源：{item.source} · 状态：{item.status}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}