+
+ )}
+
+ );
+}
diff --git a/front-end/src/app/components/figma/ImageWithFallback.tsx b/front-end/src/app/components/figma/ImageWithFallback.tsx
new file mode 100644
index 0000000..0e26139
--- /dev/null
+++ b/front-end/src/app/components/figma/ImageWithFallback.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+ 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes
+
+
+ {sensitive && (
+
+
+
+
+
+
+
+ 智能助手 · 小滨
+
+ 在线 · 操作教学 & 业务咨询
+
+
+
+ )}
+
+
+ {msgs.map((m, i) => (
+
+
+
+
+ ))}
+ {msgs.length <= 1 && (
+
+ {m.text}
+
+
+
+ )}
+
+ 猜你想问:
+ {quickReplies.map((q) => ( + + ))} +
+ 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"
+ />
+
+
+
+
+ ) : (
+
+ 
+
+
+
+ );
+}
diff --git a/front-end/src/app/components/layout/Sidebar.tsx b/front-end/src/app/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..0a8627d
--- /dev/null
+++ b/front-end/src/app/components/layout/Sidebar.tsx
@@ -0,0 +1,65 @@
+import { NavLink, useLocation } from "react-router";
+import { Hexagon } from "lucide-react";
+import { cn } from "../ui/utils";
+import { useRole } from "../../role-context";
+import { ICONS } from "../shared/icons";
+
+export function Sidebar() {
+ const { pathname } = useLocation();
+ const { role } = useRole();
+
+ return (
+
+ );
+}
diff --git a/front-end/src/app/components/shared/common.tsx b/front-end/src/app/components/shared/common.tsx
new file mode 100644
index 0000000..a8278f3
--- /dev/null
+++ b/front-end/src/app/components/shared/common.tsx
@@ -0,0 +1,190 @@
+import { Sparkles, Check } from "lucide-react";
+import { cn } from "../ui/utils";
+import { Badge } from "../ui/badge";
+import type { ProjectStatus } from "../../data/mock";
+
+/** AI 生成 / AI 能力标签 */
+export function AiBadge({ label = "AI 生成", className }: { label?: string; className?: string }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {/* 流程敏感期开关(演示) */}
+
+
+ {/* 角色切换 */}
+
+
+
+ {role.name}
+
+
+ 切换角色（演示）
+ {
+ setRole(id);
+ navigate("/app");
+ }}
+ >
+
+ {r.name}
+ {id === roleId &&
+ );
+ })}
+
+
+
+
+
+
+
+
+
+ {initials}
+
+
+
+
+ 个人设置
+ 账号安全
+ navigate("/")} className="text-destructive">
+
+
+
+
+
+
+ {role.user}
+ {role.name}
+
+
+ );
+}
+
+const statusColor: Record
+
+ {actions && {title}
+ {description &&{description}
} +{actions}
}
+
+ {steps.map((s, i) => {
+ const done = i < current;
+ const active = i === current;
+ return (
+
+ );
+}
+
+export interface ApprovalNode {
+ name: string;
+ role: string;
+ status: "completed" | "current" | "pending";
+ time?: string;
+}
+
+/** 审批流程跟踪条 */
+export function ApprovalTracker({ nodes }: { nodes: ApprovalNode[] }) {
+ return (
+
+
+ );
+ })}
+
+
+ {i < steps.length - 1 && (
+
+ )}
+
+ {done ?
+
+ {s}
+
+
+ {nodes.map((n, i) => (
+
+ );
+}
diff --git a/front-end/src/app/components/shared/icons.ts b/front-end/src/app/components/shared/icons.ts
new file mode 100644
index 0000000..b456f52
--- /dev/null
+++ b/front-end/src/app/components/shared/icons.ts
@@ -0,0 +1,55 @@
+import {
+ LayoutDashboard,
+ FolderKanban,
+ Building2,
+ UserCog,
+ BarChart3,
+ Settings,
+ ClipboardCheck,
+ ShieldAlert,
+ PackageOpen,
+ PackagePlus,
+ Wallet,
+ FileSignature,
+ GitMerge,
+ Users,
+ Workflow,
+ KeyRound,
+ ScrollText,
+ Network,
+ FileCheck2,
+ Gavel,
+ FileText,
+ Award,
+ Eye,
+ CheckCircle2,
+ TrendingUp,
+} from "lucide-react";
+
+export const ICONS: Record
+
+ ))}
+
+
+
+ {n.status === "completed" ?
+ {i < nodes.length - 1 && (
+
+ )}
+
+
+
+ {n.role}
+ {n.status === "current" && (
+ 审批中
+ )}
+ {n.status === "completed" && (
+ 已通过
+ )}
+
+ {n.name}
+ {n.time &&{n.time}
} +{children}
+
+ {children}
+
+
+
+
+ );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+ const { orientation } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselPrevious({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps
+
+ {children}
+
+
+