feat(front-end): 依据《详细设计》文档对前端 UI 进行全面升级

- 设计系统：品牌主色统一为品红渐变 #c2185b→#e91e63，新增品牌令牌与呼吸/入场动画
- 登录页重建：内部员工/外部账号切换、账号/手机验证码 Tab、SRM 存量提示
- 注册页重建为多步向导：企业信息→联系人→AI 审核，OCR 状态、密码复杂度校验与强度条
- 小滨 AI 助手重建：品牌渐变悬浮球+呼吸光环，角色感知主动提醒（紧急/AI完成/待办/风险/建议）
- 新增公开门户首页 /portal：Banner 轮播 + 三列公告区 + 免责声明
- 各角色主题色对齐文档：供应商=红、评标专家=蓝、招标专员=绿

Co-authored-by: Cursor <cursoragent@cursor.com>

front-end/src/app/components/XiaobinAssistant.tsx

@@ -1,20 +1,63 @@
 import { useState, useRef, useEffect } from "react";
-import { Sparkles, X, Send, Bot, Lock } from "lucide-react";
+import { useNavigate } from "react-router";
+import { X, Send, Minus, Lock, ArrowRight } from "lucide-react";
 import { Button } from "./ui/button";
 import { cn } from "./ui/utils";
 import { useRole } from "../role-context";
+import type { RoleId } from "../roles";
 
 interface Msg {
   role: "bot" | "user";
   text: string;
 }
 
-const quickReplies = [
-  "如何发起招标委托?",
-  "邀请招标和公开招标有什么区别?",
-  "在线评标怎么打分?",
-  "供应商如何入库?",
-];
+type ProactiveType = "urgent" | "ai" | "todo" | "risk" | "suggestion";
+
+interface Proactive {
+  type: ProactiveType;
+  title: string;
+  content: string;
+  to?: string;
+  actionLabel?: string;
+}
+
+const TYPE_STYLE: Record<ProactiveType, { bg: string; border: string; title: string; badge: string }> = {
+  urgent: { bg: "bg-[#fff3e0]", border: "border-[#ffcc80]", title: "text-[#e65100]", badge: "🔥" },
+  ai: { bg: "bg-[#e8f5e9]", border: "border-[#a5d6a7]", title: "text-[#2e7d32]", badge: "✅" },
+  todo: { bg: "bg-[#e3f2fd]", border: "border-[#90caf9]", title: "text-[#0d47a1]", badge: "📋" },
+  risk: { bg: "bg-[#ffebee]", border: "border-[#ef9a9a]", title: "text-[#c62828]", badge: "⚠️" },
+  suggestion: { bg: "bg-[#f5f5f5]", border: "border-[#e0e0e0]", title: "text-[#455a64]", badge: "💡" },
+};
+
+// 各角色的主动提醒(最多 3~4 条，按优先级)
+const PROACTIVE: Partial<Record<RoleId, Proactive[]>> = {
+  specialist: [
+    { type: "urgent", title: "BID-2026-005 今日需开标", content: "“2026年度防腐保温工程框架”已到开标时间，请立即组织评标", to: "/app/projects", actionLabel: "去处理" },
+    { type: "ai", title: "AI 已完成：寻源报告生成", content: "“年产5万吨聚丙烯项目”已自动寻源，匹配到 12 家潜在供应商", to: "/app/projects", actionLabel: "查看" },
+    { type: "todo", title: "您有 3 个委托单待审核", content: "来自技术部、采购部的委托申请已提交，请及时审核确认", to: "/app/delegation", actionLabel: "去审核" },
+  ],
+  supplier: [
+    { type: "urgent", title: "报名即将截止", content: "“年产5万吨聚丙烯项目”报名将于 7月15日截止，请尽快完成报名", to: "/app/bidding", actionLabel: "去报名" },
+    { type: "todo", title: "2 笔保证金待缴纳", content: "有 2 个项目需缴纳投标保证金，逾期将影响投标资格", to: "/app/bidding", actionLabel: "去缴纳" },
+    { type: "ai", title: "开标结果已公布", content: "“数字化交付平台”项目已完成开标，点击查看评标结果", to: "/app/bidding", actionLabel: "查看" },
+  ],
+  expert: [
+    { type: "urgent", title: "您收到催化剂采购项目的评标邀请", content: "请查看详情，接受邀请或申请回避（剩余不足 24 小时）", to: "/app/expert-tasks", actionLabel: "去查看" },
+    { type: "todo", title: "《评标纪律承诺书》待签署", content: "进入评审前需先签署当前项目的评标纪律承诺书", to: "/app/expert-tasks", actionLabel: "去签署" },
+    { type: "suggestion", title: "3 个评审项目待完成", content: "建议优先处理即将截止的评审任务，避免影响评审资格", to: "/app/expert-tasks", actionLabel: "查看" },
+  ],
+  approver: [
+    { type: "todo", title: "待审批事项 2 项", content: "有 2 个定标 / 立项审批等待您处理", to: "/app/approvals", actionLabel: "去审批" },
+  ],
+  committee: [
+    { type: "risk", title: "异常决策待处理", content: "检测到 1 个项目触发异常上报，需领导小组决策", to: "/app/exceptions", actionLabel: "去处理" },
+  ],
+  auditor: [
+    { type: "risk", title: "围串标风险提示", content: "AI 检测到 1 组投标文件相似度偏高，建议核查", to: "/app/collusion", actionLabel: "去核查" },
+  ],
+};
+
+const quickReplies = ["如何发起招标委托?", "公开招标和邀请招标的区别?", "在线评标怎么打分?", "供应商如何入库?"];
 
 const knowledge: Record<string, string> = {
   委托:
@@ -26,17 +69,20 @@ const knowledge: Record<string, string> = {
   入库:
     "在「供应商管理」页点击「发起入库流程」,或在短名单管理中对供应商点击「发起入库」,系统将自动同步工商风险信息并进入审批。",
   合并:
-    "您好,当系统中存在同类型未完成立项的委托时,系统会自动推送合并建议。您可以在立项阶段的「合并招标建议」卡片中查看并确认合并。需要我为您演示具体步骤吗?",
+    "当系统中存在同类型未完成立项的委托时,系统会自动推送合并建议。您可以在立项阶段的「合并招标建议」卡片中查看并确认合并。",
   上传:
-    "进入「投标中心」→ 选择项目 → 在「上传投标文件」区域上传文件,系统会自动加密并上链存证。开标前任何人都无法查看,只有您本人可查看和修改,投标截止前还可撤回重传。",
+    "进入「投标中心」→ 选择项目 → 在「上传投标文件」区域上传文件,系统会自动加密并上链存证。开标前任何人都无法查看,投标截止前还可撤回重传。",
 };
 
 const dataKeywords = ["报价", "投标价", "多少钱", "金额", "中标", "得分", "分数", "名单", "谁"];
 
 export function XiaobinAssistant() {
-  const { sensitive } = useRole();
+  const { sensitive, role, roleId } = useRole();
+  const navigate = useNavigate();
   const [open, setOpen] = useState(false);
+  const [showChat, setShowChat] = useState(false);
   const [input, setInput] = useState("");
+  const [proactive, setProactive] = useState<Proactive[]>(PROACTIVE[roleId] ?? []);
   const [msgs, setMsgs] = useState<Msg[]>([
     {
       role: "bot",
@@ -45,14 +91,21 @@ export function XiaobinAssistant() {
   ]);
   const endRef = useRef<HTMLDivElement>(null);
 
+  // 切换角色时刷新主动提醒
   useEffect(() => {
-    endRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [msgs, open]);
+    setProactive(PROACTIVE[roleId] ?? []);
+  }, [roleId]);
+
+  useEffect(() => {
+    if (showChat) endRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [msgs, showChat]);
+
+  const gradient = `linear-gradient(135deg, ${role.bannerFrom}, ${role.bannerTo})`;
+  const unread = proactive.length;
 
   function answer(q: string) {
-    // 流程敏感期:拒答数据类问题
     if (sensitive && dataKeywords.some((k) => q.includes(k))) {
-      return "当前为教学模式（流程敏感期），数据类问题暂无法回答。暂未到查看时间，请等待系统通知。我可以继续为您讲解系统操作哦~";
+      return "当前为流程敏感期（如开标前），数据类问题暂无法回答。请等待系统通知。我可以继续为您讲解系统操作哦~";
     }
     const key = Object.keys(knowledge).find((k) => q.includes(k));
     return key
@@ -63,80 +116,141 @@ export function XiaobinAssistant() {
   function send(text: string) {
     const q = text.trim();
     if (!q) return;
+    setShowChat(true);
     setMsgs((m) => [...m, { role: "user", text: q }]);
     setInput("");
-    setTimeout(() => {
-      setMsgs((m) => [...m, { role: "bot", text: answer(q) }]);
-    }, 500);
+    setTimeout(() => setMsgs((m) => [...m, { role: "bot", text: answer(q) }]), 500);
+  }
+
+  function handleAction(p: Proactive) {
+    if (p.to) navigate(p.to);
+    setOpen(false);
   }
 
   return (
     <>
+      {/* 悬浮球 + 呼吸光环 */}
       {!open && (
         <button
           onClick={() => setOpen(true)}
-          className="fixed bottom-6 right-6 z-50 flex items-center gap-2 rounded-full bg-gradient-to-r from-violet-500 to-blue-600 px-4 py-3 text-white shadow-lg shadow-blue-500/30 transition-transform hover:scale-105"
+          className="group fixed bottom-8 right-8 z-50 flex size-[68px] items-center justify-center rounded-full text-white shadow-xl transition-transform hover:scale-105"
+          style={{ backgroundImage: gradient }}
+          aria-label="打开小滨 AI 助手"
         >
-          <Sparkles className="size-5" />
-          <span className="text-sm font-medium">小滨助手</span>
+          <span className="pointer-events-none absolute inset-0 rounded-full animate-breathe" style={{ backgroundImage: gradient }} />
+          <span className="relative flex flex-col items-center leading-none">
+            <span className="text-sm font-bold">小滨</span>
+            <span className="mt-0.5 text-[9px] text-white/90">AI 助手</span>
+          </span>
+          {unread > 0 && (
+            <span className="absolute -right-1 -top-1 flex size-5 items-center justify-center rounded-full bg-[#f44336] text-[10px] font-bold text-white">
+              {unread}
+            </span>
+          )}
         </button>
       )}
 
       {open && (
-        <div className="fixed bottom-6 right-6 z-50 flex h-[540px] w-[380px] flex-col overflow-hidden rounded-2xl border bg-card shadow-2xl">
-          <div className="flex items-center justify-between bg-gradient-to-r from-violet-500 to-blue-600 px-4 py-3 text-white">
+        <div className="fixed bottom-8 right-8 z-50 flex h-[520px] w-[360px] flex-col overflow-hidden rounded-2xl border bg-card shadow-2xl">
+          {/* 头部 */}
+          <div className="flex items-center justify-between px-4 py-3 text-white" style={{ backgroundImage: gradient }}>
             <div className="flex items-center gap-2.5">
-              <div className="flex size-9 items-center justify-center rounded-full bg-white/20">
-                <Bot className="size-5" />
-              </div>
+              <div className="flex size-9 items-center justify-center rounded-full bg-white/20 text-sm font-bold">滨</div>
               <div className="leading-tight">
-                <div className="text-sm font-semibold">智能助手 · 小滨</div>
-                <div className="flex items-center gap-1 text-[11px] text-white/80">
-                  <span className="size-1.5 rounded-full bg-emerald-300" /> 在线 · 操作教学 & 业务咨询
+                <div className="text-sm font-semibold">小滨 AI 助手</div>
+                <div className="flex items-center gap-1 text-[11px] text-white/85">
+                  <span className="size-1.5 rounded-full bg-emerald-300" /> 在线 · 已为您分析今日待办
                 </div>
               </div>
             </div>
-            <button onClick={() => setOpen(false)} className="rounded-md p-1 hover:bg-white/15">
-              <X className="size-4" />
-            </button>
+            <div className="flex items-center gap-1">
+              <button onClick={() => setOpen(false)} className="rounded-md p-1 hover:bg-white/15" title="最小化">
+                <Minus className="size-4" />
+              </button>
+              <button onClick={() => setOpen(false)} className="rounded-md p-1 hover:bg-white/15" title="关闭">
+                <X className="size-4" />
+              </button>
+            </div>
           </div>
 
           {sensitive && (
             <div className="flex items-center gap-1.5 border-b bg-amber-50 px-4 py-2 text-xs text-amber-700">
-              <Lock className="size-3.5" /> 当前为教学模式，数据类问题暂无法回答
+              <Lock className="size-3.5" /> 当前为流程敏感期，数据类问题暂无法回答
             </div>
           )}
 
           <div className="flex-1 space-y-3 overflow-y-auto bg-muted/30 p-4">
-            {msgs.map((m, i) => (
-              <div key={i} className={cn("flex", m.role === "user" ? "justify-end" : "justify-start")}>
-                <div
-                  className={cn(
-                    "max-w-[80%] rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed",
-                    m.role === "user"
-                      ? "rounded-br-sm bg-primary text-primary-foreground"
-                      : "rounded-bl-sm border bg-card text-card-foreground",
-                  )}
-                >
-                  {m.text}
+            {!showChat ? (
+              <>
+                {proactive.length === 0 && (
+                  <div className="rounded-xl border bg-card p-4 text-center text-sm text-muted-foreground">
+                    🎉 暂无待办，继续保持！
+                  </div>
+                )}
+                {proactive.map((p, i) => {
+                  const st = TYPE_STYLE[p.type];
+                  return (
+                    <div key={i} className={cn("animate-slide-up rounded-xl border p-3", st.bg, st.border)}>
+                      <div className="flex items-start justify-between gap-2">
+                        <div className={cn("text-[13px] font-bold", st.title)}>
+                          {st.badge} {p.title}
+                        </div>
+                        <button
+                          onClick={() => setProactive((ps) => ps.filter((_, idx) => idx !== i))}
+                          className="text-muted-foreground/60 hover:text-muted-foreground"
+                        >
+                          <X className="size-3.5" />
+                        </button>
+                      </div>
+                      <p className="mt-1 text-xs leading-relaxed text-[#4a5568]">{p.content}</p>
+                      {p.to && (
+                        <button
+                          onClick={() => handleAction(p)}
+                          className={cn("mt-2 inline-flex items-center gap-0.5 text-xs font-bold underline", st.title)}
+                        >
+                          {p.actionLabel ?? "去处理"} <ArrowRight className="size-3" />
+                        </button>
+                      )}
+                    </div>
+                  );
+                })}
+                <div className="pt-1">
+                  <p className="mb-2 text-xs text-muted-foreground">猜你想问：</p>
+                  <div className="space-y-2">
+                    {quickReplies.map((q) => (
+                      <button
+                        key={q}
+                        onClick={() => send(q)}
+                        className="block w-full rounded-lg border bg-card px-3 py-2 text-left text-xs text-foreground transition-colors hover:border-primary hover:text-primary"
+                      >
+                        {q}
+                      </button>
+                    ))}
+                  </div>
                 </div>
-              </div>
-            ))}
-            {msgs.length <= 1 && (
-              <div className="space-y-2 pt-2">
-                <p className="text-xs text-muted-foreground">猜你想问:</p>
-                {quickReplies.map((q) => (
-                  <button
-                    key={q}
-                    onClick={() => send(q)}
-                    className="block w-full rounded-lg border bg-card px-3 py-2 text-left text-xs text-foreground transition-colors hover:border-primary hover:text-primary"
-                  >
-                    {q}
-                  </button>
+              </>
+            ) : (
+              <>
+                <button onClick={() => setShowChat(false)} className="text-xs text-primary hover:underline">
+                  ← 返回待办提醒
+                </button>
+                {msgs.map((m, i) => (
+                  <div key={i} className={cn("flex", m.role === "user" ? "justify-end" : "justify-start")}>
+                    <div
+                      className={cn(
+                        "max-w-[80%] rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed",
+                        m.role === "user"
+                          ? "rounded-br-sm bg-primary text-primary-foreground"
+                          : "rounded-bl-sm border bg-card text-card-foreground",
+                      )}
+                    >
+                      {m.text}
+                    </div>
+                  </div>
                 ))}
-              </div>
+                <div ref={endRef} />
+              </>
             )}
-            <div ref={endRef} />
           </div>
 
           <div className="flex items-center gap-2 border-t bg-card p-3">
@@ -145,9 +259,9 @@ export function XiaobinAssistant() {
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && send(input)}
               placeholder="输入您的问题…"
-              className="h-9 flex-1 rounded-lg border bg-input-background px-3 text-sm outline-none focus:border-primary"
+              className="h-9 flex-1 rounded-full border bg-input-background px-3.5 text-sm outline-none focus:border-primary"
             />
-            <Button size="icon" onClick={() => send(input)} className="size-9 shrink-0">
+            <Button size="icon" onClick={() => send(input)} className="size-9 shrink-0 rounded-full" style={{ backgroundImage: gradient }}>
               <Send className="size-4" />
             </Button>
           </div>