feat(frontend): 对齐万华门户风格并更新全量截图文档
- 新增门户导航子页面（交易信息、政策法规、操作指南、常见问题、采购平台）并统一门户壳层样式 - 按万华站点风格重构首页与登录页（导航、轮播、公告、登录区） - 优化小滨助手：首页/登录页接入、可拖拽吸边、圆形图标、圆形外框与切换动画优化 - 重新生成全量页面截图并更新《滨化智慧招标平台-前端界面截图汇总.docx》 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { useNavigate } from "react-router";
|
||||
import { X, Send, Minus, Lock, ArrowRight, Sparkles } from "lucide-react";
|
||||
import { X, Send, Minus, Lock, ArrowRight, Sparkles, Bot } from "lucide-react";
|
||||
import { Button } from "./ui/button";
|
||||
import { cn } from "./ui/utils";
|
||||
import { useRole } from "../role-context";
|
||||
@@ -131,14 +131,48 @@ const knowledge: { key: string; ans: Knowledge }[] = [
|
||||
|
||||
const dataKeywords = ["报价", "投标价", "多少钱", "金额", "中标", "得分", "分数", "名单", "谁"];
|
||||
|
||||
export function XiaobinAssistant() {
|
||||
type PageType = "app" | "portal" | "login";
|
||||
|
||||
function getPointer(e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent) {
|
||||
if ("touches" in e && e.touches.length > 0) {
|
||||
return { x: e.touches[0].clientX, y: e.touches[0].clientY };
|
||||
}
|
||||
if ("changedTouches" in e && e.changedTouches.length > 0) {
|
||||
return { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY };
|
||||
}
|
||||
if ("clientX" in e) {
|
||||
return { x: e.clientX, y: e.clientY };
|
||||
}
|
||||
return { x: 0, y: 0 };
|
||||
}
|
||||
|
||||
const ENTRY_PROACTIVE: Proactive[] = [
|
||||
{
|
||||
type: "todo",
|
||||
title: "欢迎使用智慧招标平台",
|
||||
content: "您可以直接从首页查看交易信息、政策法规与操作指南。",
|
||||
to: "/portal/trading-info",
|
||||
actionLabel: "查看交易信息",
|
||||
},
|
||||
{
|
||||
type: "ai",
|
||||
title: "新用户建议先注册",
|
||||
content: "供应商用户可先完成注册与实名认证，后续即可参与报名与投标。",
|
||||
to: "/register",
|
||||
actionLabel: "立即注册",
|
||||
},
|
||||
];
|
||||
|
||||
export function XiaobinAssistant({ pageType = "app" }: { pageType?: PageType }) {
|
||||
const { sensitive, role, roleId } = useRole();
|
||||
const navigate = useNavigate();
|
||||
// 默认展开：用户进入工作台即可看到小滨的主动提醒，可随时收起
|
||||
const [open, setOpen] = useState(true);
|
||||
// 工作台默认展开；首页/登录页默认收起，避免遮挡主内容
|
||||
const [open, setOpen] = useState(pageType === "app");
|
||||
const [showChat, setShowChat] = useState(false);
|
||||
const [input, setInput] = useState("");
|
||||
const [proactive, setProactive] = useState<Proactive[]>(PROACTIVE[roleId] ?? []);
|
||||
const [proactive, setProactive] = useState<Proactive[]>(
|
||||
pageType === "app" ? PROACTIVE[roleId] ?? [] : ENTRY_PROACTIVE,
|
||||
);
|
||||
const [msgs, setMsgs] = useState<Msg[]>([
|
||||
{
|
||||
role: "bot",
|
||||
@@ -146,16 +180,97 @@ export function XiaobinAssistant() {
|
||||
},
|
||||
]);
|
||||
const endRef = useRef<HTMLDivElement>(null);
|
||||
const dragRef = useRef({ dragging: false, dx: 0, dy: 0, sx: 0, sy: 0, moved: false });
|
||||
const [pos, setPos] = useState({ x: 0, y: 0 });
|
||||
const [dragging, setDragging] = useState(false);
|
||||
const EDGE_GAP = 20;
|
||||
|
||||
const panelSize = open ? { w: 360, h: 520 } : { w: 68, h: 68 };
|
||||
|
||||
function clamp(x: number, y: number) {
|
||||
const pad = EDGE_GAP;
|
||||
const maxX = Math.max(pad, window.innerWidth - panelSize.w - pad);
|
||||
const maxY = Math.max(pad, window.innerHeight - panelSize.h - pad);
|
||||
return {
|
||||
x: Math.min(Math.max(x, pad), maxX),
|
||||
y: Math.min(Math.max(y, pad), maxY),
|
||||
};
|
||||
}
|
||||
|
||||
function startDrag(e: React.MouseEvent | React.TouchEvent) {
|
||||
const p = getPointer(e);
|
||||
dragRef.current.dragging = true;
|
||||
dragRef.current.sx = p.x;
|
||||
dragRef.current.sy = p.y;
|
||||
dragRef.current.moved = false;
|
||||
setDragging(true);
|
||||
dragRef.current.dx = p.x - pos.x;
|
||||
dragRef.current.dy = p.y - pos.y;
|
||||
}
|
||||
|
||||
function snapToEdge(x: number, y: number) {
|
||||
const pad = EDGE_GAP;
|
||||
const maxX = Math.max(pad, window.innerWidth - panelSize.w - pad);
|
||||
const maxY = Math.max(pad, window.innerHeight - panelSize.h - pad);
|
||||
const targetX = x <= maxX / 2 ? pad : maxX;
|
||||
return {
|
||||
x: targetX,
|
||||
y: Math.min(Math.max(y, pad), maxY),
|
||||
};
|
||||
}
|
||||
|
||||
// 切换角色时刷新主动提醒
|
||||
useEffect(() => {
|
||||
setProactive(PROACTIVE[roleId] ?? []);
|
||||
}, [roleId]);
|
||||
if (pageType === "app") setProactive(PROACTIVE[roleId] ?? []);
|
||||
}, [roleId, pageType]);
|
||||
|
||||
useEffect(() => {
|
||||
if (showChat) endRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [msgs, showChat]);
|
||||
|
||||
// 初始位置（右下角）
|
||||
useEffect(() => {
|
||||
const w = pageType === "app" ? 360 : 68;
|
||||
const h = pageType === "app" ? 520 : 68;
|
||||
const p = clamp(window.innerWidth - w - 32, window.innerHeight - h - 32);
|
||||
setPos(p);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [pageType]);
|
||||
|
||||
useEffect(() => {
|
||||
function onMove(e: MouseEvent | TouchEvent) {
|
||||
if (!dragRef.current.dragging) return;
|
||||
const p = getPointer(e);
|
||||
if (!dragRef.current.moved && (Math.abs(p.x - dragRef.current.sx) > 4 || Math.abs(p.y - dragRef.current.sy) > 4)) {
|
||||
dragRef.current.moved = true;
|
||||
}
|
||||
const next = clamp(p.x - dragRef.current.dx, p.y - dragRef.current.dy);
|
||||
setPos(next);
|
||||
}
|
||||
function onUp() {
|
||||
if (!dragRef.current.dragging) return;
|
||||
dragRef.current.dragging = false;
|
||||
setDragging(false);
|
||||
setPos((prev) => snapToEdge(prev.x, prev.y));
|
||||
}
|
||||
function onResize() {
|
||||
setPos((prev) => clamp(prev.x, prev.y));
|
||||
}
|
||||
window.addEventListener("mousemove", onMove);
|
||||
window.addEventListener("touchmove", onMove, { passive: false });
|
||||
window.addEventListener("mouseup", onUp);
|
||||
window.addEventListener("touchend", onUp);
|
||||
window.addEventListener("resize", onResize);
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", onMove);
|
||||
window.removeEventListener("touchmove", onMove);
|
||||
window.removeEventListener("mouseup", onUp);
|
||||
window.removeEventListener("touchend", onUp);
|
||||
window.removeEventListener("resize", onResize);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [open]);
|
||||
|
||||
const gradient = `linear-gradient(135deg, ${role.bannerFrom}, ${role.bannerTo})`;
|
||||
const unread = proactive.length;
|
||||
|
||||
@@ -191,166 +306,194 @@ export function XiaobinAssistant() {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 悬浮球 + 呼吸光环（收起状态） */}
|
||||
<div
|
||||
className={cn(
|
||||
"fixed z-50",
|
||||
open ? "border bg-card shadow-2xl" : "border-0 bg-transparent shadow-none",
|
||||
open ? "overflow-hidden" : "overflow-visible",
|
||||
dragging ? "" : "transition-[left,top,width,height,border-radius] duration-260 ease-out",
|
||||
)}
|
||||
style={{
|
||||
left: pos.x,
|
||||
top: pos.y,
|
||||
width: open ? 360 : 68,
|
||||
height: open ? 520 : 68,
|
||||
borderRadius: open ? 16 : "9999px",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!open && !dragRef.current.moved) setOpen(true);
|
||||
}}
|
||||
>
|
||||
{!open && (
|
||||
<button
|
||||
onClick={() => setOpen(true)}
|
||||
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"
|
||||
<div
|
||||
onMouseDown={startDrag}
|
||||
onTouchStart={startDrag}
|
||||
className="relative flex size-full cursor-grab items-center justify-center rounded-full text-white shadow-xl ring-1 ring-white/35 active:cursor-grabbing"
|
||||
style={{ backgroundImage: gradient }}
|
||||
aria-label="打开小滨 AI 助手"
|
||||
>
|
||||
<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 className="flex size-8 items-center justify-center rounded-full bg-white/22 ring-1 ring-white/35">
|
||||
<Bot className="size-4.5" />
|
||||
</span>
|
||||
<span className="mt-1 text-[10px] font-medium text-white/95">小滨</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">
|
||||
<span className="absolute right-0 top-0 z-10 flex size-5 translate-x-1/3 -translate-y-1/3 items-center justify-center rounded-full border-2 border-white bg-[#f44336] text-[10px] font-bold text-white shadow-sm">
|
||||
{unread}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{open && (
|
||||
<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 text-sm font-bold">滨</div>
|
||||
<div className="leading-tight">
|
||||
<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" title="收起">
|
||||
<Minus className="size-4" />
|
||||
</button>
|
||||
</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" /> 当前为流程敏感期，数据类问题暂无法回答
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 space-y-3 overflow-y-auto bg-muted/30 p-4">
|
||||
{!showChat ? (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
📢 为您整理的今日提醒（{proactive.length}）
|
||||
</span>
|
||||
{proactive.length > 0 && (
|
||||
<button
|
||||
onClick={() => setShowChat(true)}
|
||||
className="text-xs text-primary hover:underline"
|
||||
>
|
||||
去提问 →
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{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 rounded-md bg-white/70 px-2 py-1 text-xs font-bold", 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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<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-[85%] 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",
|
||||
)}
|
||||
>
|
||||
<div>{m.text}</div>
|
||||
{m.actions && m.actions.length > 0 && (
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{m.actions.map((a) => (
|
||||
<button
|
||||
key={a.to}
|
||||
onClick={() => navigate(a.to)}
|
||||
className="inline-flex items-center gap-1 rounded-lg bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90"
|
||||
>
|
||||
<Sparkles className="size-3.5" /> {a.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div ref={endRef} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 border-t bg-card p-3">
|
||||
<input
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && send(input)}
|
||||
placeholder="输入您的问题…"
|
||||
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 rounded-full" style={{ backgroundImage: gradient }}>
|
||||
<Send className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-full w-full flex-col",
|
||||
open ? "opacity-100" : "pointer-events-none opacity-0",
|
||||
dragging ? "" : "transition-opacity duration-180",
|
||||
)}
|
||||
>
|
||||
{/* 头部 */}
|
||||
<div
|
||||
className="flex cursor-move items-center justify-between px-4 py-3 text-white"
|
||||
style={{ backgroundImage: gradient }}
|
||||
onMouseDown={startDrag}
|
||||
onTouchStart={startDrag}
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<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">小滨 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" title="收起">
|
||||
<Minus className="size-4" />
|
||||
</button>
|
||||
</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" /> 当前为流程敏感期，数据类问题暂无法回答
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 space-y-3 overflow-y-auto bg-muted/30 p-4">
|
||||
{!showChat ? (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
📢 为您整理的今日提醒（{proactive.length}）
|
||||
</span>
|
||||
{proactive.length > 0 && (
|
||||
<button
|
||||
onClick={() => setShowChat(true)}
|
||||
className="text-xs text-primary hover:underline"
|
||||
>
|
||||
去提问 →
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{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 rounded-md bg-white/70 px-2 py-1 text-xs font-bold", 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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<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-[85%] 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",
|
||||
)}
|
||||
>
|
||||
<div>{m.text}</div>
|
||||
{m.actions && m.actions.length > 0 && (
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{m.actions.map((a) => (
|
||||
<button
|
||||
key={a.to}
|
||||
onClick={() => navigate(a.to)}
|
||||
className="inline-flex items-center gap-1 rounded-lg bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90"
|
||||
>
|
||||
<Sparkles className="size-3.5" /> {a.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div ref={endRef} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 border-t bg-card p-3">
|
||||
<input
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && send(input)}
|
||||
placeholder="输入您的问题…"
|
||||
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 rounded-full" style={{ backgroundImage: gradient }}>
|
||||
<Send className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -21,15 +21,15 @@ export function AppLayout() {
|
||||
const initials = role.user.slice(0, 2);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden bg-background">
|
||||
<div className="flex h-screen overflow-hidden bg-[#f3f5f8]">
|
||||
<Sidebar />
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
<header className="flex h-16 shrink-0 items-center justify-between border-b bg-card px-6">
|
||||
<header className="flex h-14 shrink-0 items-center justify-between border-b bg-white px-5">
|
||||
<div className="relative w-96 max-w-[40vw]">
|
||||
<Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<input
|
||||
placeholder="搜索项目编号 / 名称…"
|
||||
className="h-9 w-full rounded-lg border bg-input-background pl-9 pr-3 text-sm outline-none focus:border-primary"
|
||||
className="h-8 w-full border bg-[#f9fafb] pl-9 pr-3 text-sm outline-none focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -37,10 +37,10 @@ export function AppLayout() {
|
||||
<button
|
||||
onClick={() => setSensitive(!sensitive)}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs transition-colors",
|
||||
"flex items-center gap-1.5 border px-2.5 py-1 text-xs transition-colors",
|
||||
sensitive
|
||||
? "border-amber-300 bg-amber-50 text-amber-700"
|
||||
: "border-border text-muted-foreground hover:bg-muted",
|
||||
: "border-border text-muted-foreground hover:bg-[#f3f4f6]",
|
||||
)}
|
||||
title="切换流程敏感期(影响小滨安全模式与数据可见性)"
|
||||
>
|
||||
@@ -50,7 +50,7 @@ export function AppLayout() {
|
||||
|
||||
{/* 角色切换 */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-xs outline-none hover:bg-muted">
|
||||
<DropdownMenuTrigger className="flex items-center gap-2 border px-2.5 py-1 text-xs outline-none hover:bg-[#f3f4f6]">
|
||||
<span className="size-2 rounded-full" style={{ backgroundColor: role.color }} />
|
||||
<span className="font-medium text-foreground">{role.name}</span>
|
||||
<RefreshCw className="size-3.5 text-muted-foreground" />
|
||||
@@ -77,7 +77,7 @@ export function AppLayout() {
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<button className="relative rounded-lg p-2 text-muted-foreground hover:bg-muted">
|
||||
<button className="relative border p-1.5 text-muted-foreground hover:bg-[#f3f4f6]">
|
||||
<Bell className="size-5" />
|
||||
<span className="absolute right-1.5 top-1.5 flex size-4 items-center justify-center rounded-full bg-destructive text-[10px] text-white">
|
||||
5
|
||||
@@ -85,7 +85,7 @@ export function AppLayout() {
|
||||
</button>
|
||||
<div className="h-6 w-px bg-border" />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="flex items-center gap-2.5 rounded-lg px-2 py-1.5 outline-none hover:bg-muted">
|
||||
<DropdownMenuTrigger className="flex items-center gap-2.5 border px-2 py-1 outline-none hover:bg-[#f3f4f6]">
|
||||
<Avatar className="size-8">
|
||||
<AvatarFallback className="text-xs text-white" style={{ backgroundColor: role.color }}>
|
||||
{initials}
|
||||
@@ -109,7 +109,7 @@ export function AppLayout() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 overflow-y-auto p-6">
|
||||
<main className="flex-1 overflow-y-auto p-4">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -9,9 +9,9 @@ export function Sidebar() {
|
||||
const { role } = useRole();
|
||||
|
||||
return (
|
||||
<aside className="flex w-60 shrink-0 flex-col bg-sidebar text-sidebar-foreground">
|
||||
<div className="flex h-16 items-center gap-2.5 px-5">
|
||||
<div className="flex size-9 items-center justify-center rounded-lg bg-primary">
|
||||
<aside className="flex w-[232px] shrink-0 flex-col border-r bg-[#0b2a4a] text-sidebar-foreground">
|
||||
<div className="flex h-14 items-center gap-2.5 px-4">
|
||||
<div className="flex size-8 items-center justify-center bg-primary">
|
||||
<Hexagon className="size-5 text-white" />
|
||||
</div>
|
||||
<div className="leading-tight">
|
||||
@@ -21,7 +21,7 @@ export function Sidebar() {
|
||||
</div>
|
||||
|
||||
{/* 当前角色标识 */}
|
||||
<div className="mx-3 mb-2 flex items-center gap-2 rounded-lg bg-white/5 px-3 py-2">
|
||||
<div className="mx-3 mb-2 flex items-center gap-2 border border-white/10 bg-white/5 px-3 py-2">
|
||||
<span className="size-2 rounded-full" style={{ backgroundColor: role.color }} />
|
||||
<div className="leading-tight">
|
||||
<div className="text-xs font-medium text-white">{role.name}</div>
|
||||
@@ -39,10 +39,10 @@ export function Sidebar() {
|
||||
to={item.to}
|
||||
end={item.end}
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-colors",
|
||||
"flex items-center gap-3 px-3 py-2.5 text-sm transition-colors",
|
||||
active
|
||||
? "bg-primary text-white shadow-sm"
|
||||
: "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-white",
|
||||
? "bg-primary text-white"
|
||||
: "text-sidebar-foreground/80 hover:bg-[#143a61] hover:text-white",
|
||||
)}
|
||||
>
|
||||
<Icon className="size-[18px]" />
|
||||
@@ -53,7 +53,7 @@ export function Sidebar() {
|
||||
</nav>
|
||||
|
||||
<div className="border-t border-sidebar-border/40 p-4">
|
||||
<div className="rounded-lg bg-sidebar-accent/40 p-3">
|
||||
<div className="border border-white/10 bg-sidebar-accent/40 p-3">
|
||||
<div className="text-xs font-medium text-white">AI 原生招标平台</div>
|
||||
<p className="mt-1 text-[11px] leading-relaxed text-sidebar-foreground/60">
|
||||
全流程线上闭环，事找人主动式智能体验
|
||||
|
||||
Reference in New Issue
Block a user