feat(frontend): 对齐万华门户风格并更新全量截图文档
- 新增门户导航子页面（交易信息、政策法规、操作指南、常见问题、采购平台）并统一门户壳层样式 - 按万华站点风格重构首页与登录页（导航、轮播、公告、登录区） - 优化小滨助手：首页/登录页接入、可拖拽吸边、圆形图标、圆形外框与切换动画优化 - 重新生成全量页面截图并更新《滨化智慧招标平台-前端界面截图汇总.docx》 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Generated
+48
@@ -67,6 +67,7 @@
|
||||
"devDependencies": {
|
||||
"@tailwindcss/vite": "4.1.12",
|
||||
"@vitejs/plugin-react": "4.7.0",
|
||||
"playwright": "^1.61.1",
|
||||
"tailwindcss": "4.1.12",
|
||||
"vite": "6.3.5"
|
||||
},
|
||||
@@ -4766,6 +4767,53 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright": {
|
||||
"version": "1.61.1",
|
||||
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
|
||||
"integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"playwright-core": "1.61.1"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright-core": {
|
||||
"version": "1.61.1",
|
||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
|
||||
"integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"playwright-core": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright/node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.5.15",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
|
||||
|
||||
@@ -67,6 +67,7 @@
|
||||
"devDependencies": {
|
||||
"@tailwindcss/vite": "4.1.12",
|
||||
"@vitejs/plugin-react": "4.7.0",
|
||||
"playwright": "^1.61.1",
|
||||
"tailwindcss": "4.1.12",
|
||||
"vite": "6.3.5"
|
||||
},
|
||||
@@ -87,4 +88,4 @@
|
||||
"vite": "6.3.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
# -*- coding: utf-8 -*-
|
||||
import json
|
||||
import os
|
||||
from datetime import date
|
||||
|
||||
from docx import Document
|
||||
from docx.shared import Inches, Pt, RGBColor
|
||||
from docx.enum.text import WD_ALIGN_PARAGRAPH
|
||||
from docx.oxml.ns import qn
|
||||
from PIL import Image
|
||||
|
||||
HERE = os.path.dirname(os.path.abspath(__file__))
|
||||
ROOT = os.path.abspath(os.path.join(HERE, "..", ".."))
|
||||
SHOTS = os.path.join(ROOT, "shots")
|
||||
OUT = os.path.join(ROOT, "滨化智慧招标平台-前端界面截图汇总.docx")
|
||||
BRAND = RGBColor(0x15, 0x65, 0xC0)
|
||||
BRAND_HEX = "1565C0"
|
||||
PAGE_W_IN = 6.3
|
||||
|
||||
with open(os.path.join(SHOTS, "manifest.json"), "r", encoding="utf-8") as f:
|
||||
manifest = json.load(f)
|
||||
|
||||
order = []
|
||||
for m in manifest:
|
||||
if m["section"] not in order:
|
||||
order.append(m["section"])
|
||||
manifest.sort(key=lambda x: order.index(x["section"]))
|
||||
|
||||
doc = Document()
|
||||
style = doc.styles["Normal"]
|
||||
style.font.name = "Microsoft YaHei"
|
||||
style.font.size = Pt(10.5)
|
||||
style.element.rPr.rFonts.set(qn("w:eastAsia"), "Microsoft YaHei")
|
||||
|
||||
for sec in doc.sections:
|
||||
sec.top_margin = Inches(0.8)
|
||||
sec.bottom_margin = Inches(0.8)
|
||||
sec.left_margin = Inches(0.8)
|
||||
sec.right_margin = Inches(0.8)
|
||||
|
||||
def set_font(run, size=None, bold=None, color=None):
|
||||
run.font.name = "Microsoft YaHei"
|
||||
run._element.rPr.rFonts.set(qn("w:eastAsia"), "Microsoft YaHei")
|
||||
if size:
|
||||
run.font.size = Pt(size)
|
||||
if bold is not None:
|
||||
run.font.bold = bold
|
||||
if color is not None:
|
||||
run.font.color.rgb = color
|
||||
|
||||
# 封面
|
||||
for _ in range(4):
|
||||
doc.add_paragraph()
|
||||
p = doc.add_paragraph()
|
||||
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
|
||||
r = p.add_run("滨化集团智慧招标平台")
|
||||
set_font(r, size=30, bold=True, color=BRAND)
|
||||
p = doc.add_paragraph()
|
||||
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
|
||||
r = p.add_run("Smart Tendering Platform (STP)")
|
||||
set_font(r, size=14, color=RGBColor(0x88, 0x88, 0x88))
|
||||
doc.add_paragraph()
|
||||
p = doc.add_paragraph()
|
||||
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
|
||||
r = p.add_run("前端界面截图汇总")
|
||||
set_font(r, size=22, bold=True)
|
||||
for _ in range(6):
|
||||
doc.add_paragraph()
|
||||
|
||||
sections_order = []
|
||||
for m in manifest:
|
||||
if m["section"] not in sections_order:
|
||||
sections_order.append(m["section"])
|
||||
|
||||
meta = [
|
||||
("文档类型", "前端界面（UI）截图汇总"),
|
||||
("覆盖范围", "门户页 / 登录页 / 新增导航页 / 工作台 / 业务页 / 弹窗"),
|
||||
("截图数量", f"{len(manifest)} 张"),
|
||||
("章节数量", f"{len(sections_order)} 章"),
|
||||
("生成日期", date.today().strftime("%Y 年 %m 月 %d 日")),
|
||||
]
|
||||
for k, v in meta:
|
||||
p = doc.add_paragraph()
|
||||
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
|
||||
r = p.add_run(f"{k}：")
|
||||
set_font(r, size=11, bold=True)
|
||||
r = p.add_run(v)
|
||||
set_font(r, size=11, color=RGBColor(0x44, 0x44, 0x44))
|
||||
|
||||
# 目录
|
||||
doc.add_page_break()
|
||||
p = doc.add_paragraph()
|
||||
r = p.add_run("目 录")
|
||||
set_font(r, size=18, bold=True, color=BRAND)
|
||||
doc.add_paragraph()
|
||||
for sec in sections_order:
|
||||
cnt = sum(1 for m in manifest if m["section"] == sec)
|
||||
p = doc.add_paragraph()
|
||||
r = p.add_run(sec)
|
||||
set_font(r, size=12, bold=True)
|
||||
r = p.add_run(f" （{cnt} 张）")
|
||||
set_font(r, size=10.5, color=RGBColor(0x88, 0x88, 0x88))
|
||||
|
||||
fig_no = 0
|
||||
current = None
|
||||
for m in manifest:
|
||||
img = os.path.join(SHOTS, m["file"])
|
||||
if not os.path.exists(img):
|
||||
continue
|
||||
if m["section"] != current:
|
||||
current = m["section"]
|
||||
doc.add_page_break()
|
||||
p = doc.add_paragraph()
|
||||
r = p.add_run(current)
|
||||
set_font(r, size=17, bold=True, color=BRAND)
|
||||
pPr = p._p.get_or_add_pPr()
|
||||
pbdr = pPr.makeelement(qn("w:pBdr"), {})
|
||||
bottom = pbdr.makeelement(qn("w:bottom"), {
|
||||
qn("w:val"): "single", qn("w:sz"): "12",
|
||||
qn("w:space"): "4", qn("w:color"): BRAND_HEX,
|
||||
})
|
||||
pbdr.append(bottom)
|
||||
pPr.append(pbdr)
|
||||
doc.add_paragraph()
|
||||
|
||||
fig_no += 1
|
||||
cap = doc.add_paragraph()
|
||||
r = cap.add_run(f"图 {fig_no} {m['title']}")
|
||||
set_font(r, size=11, bold=True, color=RGBColor(0x22, 0x22, 0x22))
|
||||
|
||||
with Image.open(img) as im:
|
||||
w, h = im.size
|
||||
ratio = h / w
|
||||
width_in = PAGE_W_IN
|
||||
height_in = width_in * ratio
|
||||
max_h = 8.6
|
||||
if height_in > max_h:
|
||||
height_in = max_h
|
||||
width_in = height_in / ratio
|
||||
p = doc.add_paragraph()
|
||||
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
|
||||
p.add_run().add_picture(img, width=Inches(width_in))
|
||||
doc.add_paragraph()
|
||||
|
||||
doc.save(OUT)
|
||||
print(f"已生成：{OUT}")
|
||||
print(f"共 {fig_no} 张截图，{len(sections_order)} 个章节")
|
||||
|
||||
@@ -0,0 +1,145 @@
|
||||
import { chromium } from "playwright";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const OUT = path.resolve(__dirname, "../../shots");
|
||||
const BASE = process.env.BASE_URL || "http://localhost:5174";
|
||||
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
||||
|
||||
fs.rmSync(OUT, { recursive: true, force: true });
|
||||
fs.mkdirSync(OUT, { recursive: true });
|
||||
|
||||
const manifest = [];
|
||||
let idx = 0;
|
||||
|
||||
async function expand(page) {
|
||||
await page.evaluate(() => {
|
||||
document.querySelectorAll(".h-screen").forEach((el) => {
|
||||
el.style.height = "auto";
|
||||
el.style.minHeight = "100vh";
|
||||
el.style.overflow = "visible";
|
||||
});
|
||||
document.querySelectorAll(".overflow-hidden").forEach((el) => (el.style.overflow = "visible"));
|
||||
document.querySelectorAll("main").forEach((el) => {
|
||||
el.style.overflow = "visible";
|
||||
el.style.height = "auto";
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function shot(page, section, title, { full = true, wait = 500, expandLayout = true } = {}) {
|
||||
idx += 1;
|
||||
const file = `${String(idx).padStart(2, "0")}.png`;
|
||||
if (expandLayout) await expand(page).catch(() => {});
|
||||
await sleep(wait);
|
||||
await page.screenshot({ path: path.join(OUT, file), fullPage: full });
|
||||
manifest.push({ file, section, title });
|
||||
console.log(`[${idx}] ${section} / ${title} -> ${file}`);
|
||||
}
|
||||
|
||||
async function goto(page, url) {
|
||||
await page.goto(BASE + url, { waitUntil: "networkidle" }).catch(async () => {
|
||||
await page.goto(BASE + url, { waitUntil: "domcontentloaded" });
|
||||
});
|
||||
await sleep(450);
|
||||
}
|
||||
|
||||
async function clickIf(page, locator, wait = 300) {
|
||||
const n = await locator.count();
|
||||
if (n > 0) {
|
||||
await locator.first().click().catch(() => {});
|
||||
await sleep(wait);
|
||||
}
|
||||
}
|
||||
|
||||
async function switchRole(page, name) {
|
||||
await page.locator("header button:has(svg.lucide-refresh-cw)").first().click();
|
||||
await sleep(250);
|
||||
await page.getByRole("menuitem", { name }).first().click();
|
||||
await sleep(700);
|
||||
}
|
||||
|
||||
async function run() {
|
||||
const browser = await chromium.launch();
|
||||
const page = await browser.newPage({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1.3 });
|
||||
page.setDefaultTimeout(15000);
|
||||
|
||||
const A = "一、门户与登录";
|
||||
await goto(page, "/portal");
|
||||
await shot(page, A, "首页（门户）", { wait: 700 });
|
||||
await clickIf(page, page.getByRole("link", { name: "交易信息" }));
|
||||
await shot(page, A, "门户导航 · 交易信息页");
|
||||
await goto(page, "/portal/policies");
|
||||
await shot(page, A, "门户导航 · 政策法规页");
|
||||
await goto(page, "/portal/guides");
|
||||
await shot(page, A, "门户导航 · 操作指南页");
|
||||
await goto(page, "/portal/faq");
|
||||
await shot(page, A, "门户导航 · 常见问题页");
|
||||
await goto(page, "/portal/procurement-platform");
|
||||
await shot(page, A, "门户导航 · 采购平台页");
|
||||
await goto(page, "/");
|
||||
await shot(page, A, "登录页（含可拖拽小滨）", { full: false, expandLayout: false });
|
||||
|
||||
const B = "二、角色工作台";
|
||||
await goto(page, "/app");
|
||||
await shot(page, B, "招标专员工作台", { wait: 800 });
|
||||
for (const rn of ["采购需求人员", "评标专家", "评标委员会工作领导小组", "供应商", "系统管理员", "合规 / 审计"]) {
|
||||
await switchRole(page, rn);
|
||||
await shot(page, B, `${rn}工作台`, { wait: 700 });
|
||||
}
|
||||
await switchRole(page, "招标专员");
|
||||
|
||||
const C = "三、核心业务页面";
|
||||
for (const [url, title] of [
|
||||
["/app/delegation", "发起招标委托"],
|
||||
["/app/projects", "项目管理列表"],
|
||||
["/app/projects/P2026001", "项目详情"],
|
||||
["/app/projects/P2026001/shortlist", "供应商长短名单"],
|
||||
["/app/projects/P2026001/sourcing", "AI智慧寻源"],
|
||||
["/app/projects/P2026001/opening", "开标大厅"],
|
||||
["/app/projects/P2026001/evaluation", "在线评标室"],
|
||||
["/app/deposits", "保证金管理"],
|
||||
["/app/suppliers", "供应商管理"],
|
||||
["/app/experts", "专家管理"],
|
||||
["/app/reports", "报表中心"],
|
||||
["/app/exceptions", "异常决策"],
|
||||
["/app/expert-tasks", "评标任务"],
|
||||
["/app/bidding", "投标中心"],
|
||||
["/app/audit-logs", "审计日志"],
|
||||
["/app/collusion", "围串标分析"],
|
||||
["/app/evidence", "存证验证"],
|
||||
["/app/admin/users", "用户与权限管理"],
|
||||
["/app/admin/keys", "密钥管理"],
|
||||
["/app/settings", "系统设置"],
|
||||
]) {
|
||||
await goto(page, url);
|
||||
await shot(page, C, title, { wait: 600 });
|
||||
}
|
||||
|
||||
const D = "四、弹窗与抽屉";
|
||||
await goto(page, "/app/suppliers");
|
||||
await clickIf(page, page.locator("tbody tr"), 700);
|
||||
await shot(page, D, "供应商详情抽屉", { full: false, expandLayout: false });
|
||||
|
||||
await goto(page, "/app/expert-tasks");
|
||||
await clickIf(page, page.getByRole("button", { name: /确认邀请/ }), 500);
|
||||
await clickIf(page, page.getByRole("button", { name: /签署评标承诺书/ }), 700);
|
||||
await shot(page, D, "评标纪律承诺书弹窗", { full: false, expandLayout: false });
|
||||
|
||||
await goto(page, "/app/admin/keys");
|
||||
await clickIf(page, page.getByRole("button", { name: /手动触发密钥漂移/ }), 700);
|
||||
await shot(page, D, "密钥漂移二次授权弹窗", { full: false, expandLayout: false });
|
||||
|
||||
fs.writeFileSync(path.join(OUT, "manifest.json"), JSON.stringify(manifest, null, 2));
|
||||
await browser.close();
|
||||
console.log(`完成：共 ${manifest.length} 张截图`);
|
||||
}
|
||||
|
||||
run().catch((e) => {
|
||||
console.error(e);
|
||||
fs.writeFileSync(path.join(OUT, "manifest.json"), JSON.stringify(manifest, null, 2));
|
||||
process.exit(1);
|
||||
});
|
||||
|
||||
@@ -5,6 +5,11 @@ import { AppLayout } from "./components/layout/AppLayout";
|
||||
import { LoginPage } from "./pages/LoginPage";
|
||||
import { RegisterPage } from "./pages/RegisterPage";
|
||||
import { PortalHome } from "./pages/PortalHome";
|
||||
import { TradingInfoPage } from "./pages/portal/TradingInfoPage";
|
||||
import { PoliciesPage } from "./pages/portal/PoliciesPage";
|
||||
import { GuidesPage } from "./pages/portal/GuidesPage";
|
||||
import { FaqPage } from "./pages/portal/FaqPage";
|
||||
import { ProcurementPlatformPage } from "./pages/portal/ProcurementPlatformPage";
|
||||
import { Workbench } from "./pages/Workbench";
|
||||
import { Delegation } from "./pages/Delegation";
|
||||
import { ProjectList } from "./pages/ProjectList";
|
||||
@@ -34,6 +39,11 @@ export default function App() {
|
||||
<Routes>
|
||||
<Route path="/" element={<LoginPage />} />
|
||||
<Route path="/portal" element={<PortalHome />} />
|
||||
<Route path="/portal/trading-info" element={<TradingInfoPage />} />
|
||||
<Route path="/portal/policies" element={<PoliciesPage />} />
|
||||
<Route path="/portal/guides" element={<GuidesPage />} />
|
||||
<Route path="/portal/faq" element={<FaqPage />} />
|
||||
<Route path="/portal/procurement-platform" element={<ProcurementPlatformPage />} />
|
||||
<Route path="/register" element={<RegisterPage />} />
|
||||
<Route path="/app" element={<AppLayout />}>
|
||||
<Route index element={<Workbench />} />
|
||||
|
||||
@@ -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">
|
||||
全流程线上闭环，事找人主动式智能体验
|
||||
|
||||
@@ -1,17 +1,27 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate, Link } from "react-router";
|
||||
import { Hexagon, User, Lock, Smartphone, ShieldCheck, ArrowRight, Eye, EyeOff, Info } from "lucide-react";
|
||||
import { Hexagon, User, Lock, Smartphone, ShieldCheck, Eye, EyeOff } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { cn } from "../components/ui/utils";
|
||||
import { XiaobinAssistant } from "../components/XiaobinAssistant";
|
||||
|
||||
type Mode = "employee" | "vendor";
|
||||
type Tab = "account" | "mobile";
|
||||
type LoginRole = "purchaser" | "supplier" | "expert" | "other";
|
||||
|
||||
const ROLE_BUTTONS: { id: LoginRole; label: string; en: string }[] = [
|
||||
{ id: "purchaser", label: "采购人", en: "Purchaser" },
|
||||
{ id: "supplier", label: "供应商", en: "Supplier" },
|
||||
{ id: "expert", label: "专家", en: "Expert" },
|
||||
{ id: "other", label: "其他", en: "Other" },
|
||||
];
|
||||
|
||||
export function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
const [mode, setMode] = useState<Mode>("vendor");
|
||||
const [tab, setTab] = useState<Tab>("account");
|
||||
const [loginRole, setLoginRole] = useState<LoginRole>("supplier");
|
||||
const [account, setAccount] = useState("zhangwei");
|
||||
const [pwd, setPwd] = useState("123456");
|
||||
const [showPwd, setShowPwd] = useState(false);
|
||||
@@ -48,70 +58,59 @@ export function LoginPage() {
|
||||
navigate("/app");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full overflow-hidden bg-[#f5f7fa]">
|
||||
{/* 左侧品牌区 */}
|
||||
<div className="relative hidden w-1/2 flex-col justify-between overflow-hidden bg-brand-gradient p-12 text-white lg:flex">
|
||||
<Link to="/portal" className="flex items-center gap-3">
|
||||
<div className="flex size-11 items-center justify-center rounded-xl bg-white/15 backdrop-blur">
|
||||
<Hexagon className="size-6" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-lg font-semibold">滨化集团智慧招标平台</div>
|
||||
<div className="text-sm text-white/70">Smart Tendering Platform</div>
|
||||
</div>
|
||||
</Link>
|
||||
function selectRole(role: LoginRole) {
|
||||
setLoginRole(role);
|
||||
// 与现有登录逻辑联动：供应商走外部账号，其他角色默认走内部员工
|
||||
if (role === "supplier") {
|
||||
setMode("vendor");
|
||||
setTab("account");
|
||||
} else {
|
||||
setMode("employee");
|
||||
setTab("account");
|
||||
}
|
||||
}
|
||||
|
||||
<div className="relative z-10">
|
||||
<h1 className="text-white" style={{ fontSize: 44, lineHeight: 1.2, fontWeight: 700, letterSpacing: 2 }}>
|
||||
智慧招标平台
|
||||
</h1>
|
||||
<p className="mt-5 max-w-md text-white/80">
|
||||
AI 原生 · 全流程线上闭环 · 主动式智能
|
||||
return (
|
||||
<div className="min-h-screen bg-[#f3f5f8]">
|
||||
<header className="border-b bg-[#0f4ea6] text-white">
|
||||
<div className="mx-auto flex h-14 max-w-[1200px] items-center justify-between px-6">
|
||||
<Link to="/portal" className="flex items-center gap-2">
|
||||
<Hexagon className="size-5" />
|
||||
<span className="text-base font-semibold">滨化电子招标投标交易网</span>
|
||||
</Link>
|
||||
<div className="text-xs text-white/80">欢迎登录 STP 系统</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto grid max-w-[1200px] grid-cols-12 gap-4 px-6 py-8">
|
||||
<section className="col-span-12 border bg-white p-5 lg:col-span-4">
|
||||
<h2 className="text-lg font-semibold">用户登录</h2>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
还没有账号？
|
||||
<Link to="/register" className="ml-1 text-primary hover:underline">去注册</Link>
|
||||
</p>
|
||||
<p className="mt-2 max-w-md text-sm text-white/60">
|
||||
覆盖公开招标 · 邀请招标 · 竞争性谈判 · 单一来源
|
||||
</p>
|
||||
<div className="mt-8 grid grid-cols-3 gap-4">
|
||||
{[
|
||||
{ k: "全流程", v: "9 大阶段闭环" },
|
||||
{ k: "AI 寻源", v: "委托效率 +60%" },
|
||||
{ k: "链上存证", v: "投标哈希上链" },
|
||||
].map((s) => (
|
||||
<div key={s.k} className="rounded-xl bg-white/10 p-4 backdrop-blur">
|
||||
<div className="text-lg font-semibold">{s.k}</div>
|
||||
<div className="mt-1 text-xs text-white/70">{s.v}</div>
|
||||
</div>
|
||||
|
||||
{/* 角色登录按钮：对齐万华站点风格 */}
|
||||
<div className="mt-4 grid grid-cols-2 gap-2">
|
||||
{ROLE_BUTTONS.map((r) => (
|
||||
<button
|
||||
key={r.id}
|
||||
type="button"
|
||||
onClick={() => selectRole(r.id)}
|
||||
className={cn(
|
||||
"border px-3 py-3 text-center transition-colors",
|
||||
loginRole === r.id
|
||||
? "border-primary bg-[#eef5ff] text-primary"
|
||||
: "border-[#d9dee7] bg-white text-[#374151] hover:border-primary/60 hover:bg-[#f8fbff]",
|
||||
)}
|
||||
>
|
||||
<div className="text-sm font-medium leading-none">{r.label}</div>
|
||||
<div className="mt-1 text-[11px] text-[#6b7280]">{r.en}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-white/50">© 2026 滨化集团 ｜ 智慧招标平台 V1.0</div>
|
||||
|
||||
{/* 装饰 */}
|
||||
<div className="pointer-events-none absolute -right-24 top-1/4 size-80 rounded-full bg-white/10 blur-3xl" />
|
||||
<div className="pointer-events-none absolute -bottom-16 right-1/3 size-60 rounded-full bg-white/10 blur-3xl" />
|
||||
<div className="pointer-events-none absolute left-1/2 top-1/2 size-72 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/10" />
|
||||
<div className="pointer-events-none absolute left-1/2 top-1/2 size-52 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/10" />
|
||||
</div>
|
||||
|
||||
{/* 右侧表单区 */}
|
||||
<div className="flex flex-1 items-center justify-center p-8">
|
||||
<div className="w-full max-w-[400px]">
|
||||
<div className="mb-6 lg:hidden">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hexagon className="size-7 text-primary" />
|
||||
<span className="font-semibold">滨化智慧招标平台</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<h2 className="text-foreground" style={{ fontSize: 24 }}>欢迎登录</h2>
|
||||
<p className="mt-1 text-sm text-muted-foreground">登录您的账户，开始智能招采之旅</p>
|
||||
</div>
|
||||
|
||||
{/* 角色切换开关: 内部员工 / 外部账号 */}
|
||||
<div className="mt-6 flex rounded-full bg-muted p-1">
|
||||
<div className="mt-4 flex border bg-[#f8fafc] p-1">
|
||||
{(
|
||||
[
|
||||
{ id: "employee" as Mode, label: "内部员工" },
|
||||
@@ -123,20 +122,19 @@ export function LoginPage() {
|
||||
type="button"
|
||||
onClick={() => setMode(m.id)}
|
||||
className={cn(
|
||||
"flex-1 rounded-full py-2 text-sm font-medium transition-all",
|
||||
mode === m.id ? "bg-brand-gradient text-white shadow-sm" : "text-muted-foreground hover:text-foreground",
|
||||
"flex-1 py-2 text-sm",
|
||||
mode === m.id ? "bg-primary font-medium text-white" : "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{m.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-2 text-center text-xs text-primary">
|
||||
{mode === "employee" ? "当前：内部员工模式（走 IAM 集团统一认证）" : "当前：外部账号模式（走平台账号 / SRM 认证）"}
|
||||
<p className="mt-1 text-[11px] text-muted-foreground">
|
||||
当前角色：{ROLE_BUTTONS.find((x) => x.id === loginRole)?.label}
|
||||
</p>
|
||||
|
||||
{/* Tab: 账号登录 / 手机验证码 */}
|
||||
<div className="mt-5 flex border-b border-border">
|
||||
<div className="mt-3 flex border-b border-border">
|
||||
{(
|
||||
[
|
||||
{ id: "account" as Tab, label: "账号登录" },
|
||||
@@ -148,17 +146,17 @@ export function LoginPage() {
|
||||
type="button"
|
||||
onClick={() => setTab(t.id)}
|
||||
className={cn(
|
||||
"relative -mb-px px-4 pb-2.5 text-sm transition-colors",
|
||||
tab === t.id ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground",
|
||||
"relative px-4 py-2 text-sm",
|
||||
tab === t.id ? "font-medium text-primary" : "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{t.label}
|
||||
{tab === t.id && <span className="absolute inset-x-2 -bottom-px h-0.5 rounded-full bg-brand-gradient" />}
|
||||
{tab === t.id && <span className="absolute inset-x-1 bottom-0 h-0.5 bg-primary" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<form className="mt-5 space-y-4" onSubmit={submit}>
|
||||
<form className="mt-4 space-y-3" onSubmit={submit}>
|
||||
{tab === "account" ? (
|
||||
<>
|
||||
<div>
|
||||
@@ -248,12 +246,12 @@ export function LoginPage() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="h-11 w-full bg-brand-gradient text-base hover:opacity-90">
|
||||
登 录 <ArrowRight className="size-4" />
|
||||
<Button type="submit" className="h-10 w-full text-base">
|
||||
登 录
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="mt-5 text-center text-sm text-muted-foreground">
|
||||
<div className="mt-4 text-center text-sm text-muted-foreground">
|
||||
还没有账号？
|
||||
{mode === "employee" ? (
|
||||
<span className="ml-1 text-muted-foreground/70">员工账号由 HR 系统统一同步</span>
|
||||
@@ -263,22 +261,57 @@ export function LoginPage() {
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-4 border bg-[#fffbea] px-3 py-2 text-xs text-[#92400e]">
|
||||
原 SRM 注册用户，可直接使用 SRM 账号登录，无需重复注册。
|
||||
</div>
|
||||
|
||||
{/* SRM 温馨提示 */}
|
||||
{mode === "vendor" && (
|
||||
<div className="mt-5 flex items-start gap-2 rounded-lg border border-[#ffcc80] bg-[#fff3e0] px-3 py-2.5 text-xs text-[#e65100]">
|
||||
<Info className="mt-0.5 size-4 shrink-0" />
|
||||
<span>原 SRM 注册用户，可直接使用 SRM 账号密码登录，无需重复注册。</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<div className="mt-4 text-center">
|
||||
<Link to="/portal" className="text-xs text-muted-foreground hover:text-primary">
|
||||
浏览平台首页与公开招标公告 →
|
||||
返回门户首页
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="col-span-12 space-y-4 lg:col-span-8">
|
||||
<div className="border bg-white">
|
||||
<div className="border-b bg-[#f8fafc] px-4 py-3 text-sm font-semibold">交易信息</div>
|
||||
<ul className="space-y-1 p-4 text-sm">
|
||||
{[
|
||||
["[公开招标] 扣电测试柜框架", "2026-07-13"],
|
||||
["[公开招标] 2026年橡胶密封件框架招标O型圈", "2026-07-13"],
|
||||
["[公开招标] 万华莱州100MW分散式风电项目EPC工程总承包[变更公告]", "2026-07-13"],
|
||||
["[公开招标] 万华旋塞阀框架包一 金属旋塞阀、包二 衬氟旋塞阀", "2026-07-10"],
|
||||
["[公开招标] 改性TPU熟化料仓", "2026-07-09"],
|
||||
].map(([title, date]) => (
|
||||
<li key={title} className="flex items-center gap-3 border-b border-dashed py-1.5">
|
||||
<span className="line-clamp-1 flex-1 hover:text-primary">{title}</span>
|
||||
<span className="text-xs text-muted-foreground">{date}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="border bg-white">
|
||||
<div className="border-b bg-[#f8fafc] px-4 py-3 text-sm font-semibold">通知公告</div>
|
||||
<div className="space-y-1 p-4 text-sm text-muted-foreground">
|
||||
<p>万华蓬莱园区高温管道耐火衬里类物资供应商招募</p>
|
||||
<p>万华化学桨叶冷却机类供应商招募</p>
|
||||
<p>万华化学洗车平台服务类供应商招募</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border bg-white">
|
||||
<div className="border-b bg-[#f8fafc] px-4 py-3 text-sm font-semibold">操作指南</div>
|
||||
<div className="space-y-1 p-4 text-sm text-muted-foreground">
|
||||
<p>供应商注册操作指南</p>
|
||||
<p>投标文件制作软件操作手册</p>
|
||||
<p>系统使用常见问题处理</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<XiaobinAssistant pageType="login" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,224 +1,221 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router";
|
||||
import { Hexagon, ArrowRight, Sparkles, Bot } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router";
|
||||
import { UserRound, Building2, Briefcase, Users } from "lucide-react";
|
||||
import { cn } from "../components/ui/utils";
|
||||
import { PortalShell } from "./portal/PortalShell";
|
||||
import { XiaobinAssistant } from "../components/XiaobinAssistant";
|
||||
|
||||
const NAV = ["首页", "招标公告", "定标公告", "企业新闻"];
|
||||
type Notice = { title: string; date: string };
|
||||
|
||||
const ROLES = [
|
||||
{ key: "purchaser", label: "采购人", en: "Purchaser", icon: Building2 },
|
||||
{ key: "supplier", label: "供应商", en: "Supplier", icon: Briefcase },
|
||||
{ key: "expert", label: "专家", en: "Expert", icon: UserRound },
|
||||
{ key: "other", label: "其他", en: "Other", icon: Users },
|
||||
];
|
||||
const NOTICE_TABS = ["招标公告", "资格预审公告", "中标候选人公示", "结果公告", "终止公告"];
|
||||
const BANNERS = [
|
||||
{
|
||||
title: "AI 赋能的智慧招标",
|
||||
subtitle: "全流程线上闭环，主动智能寻源，自动风险评估",
|
||||
tags: ["智能招标委托", "供应商 AI 寻源", "自动化评标辅助"],
|
||||
title: "廉洁过节",
|
||||
subtitle: "阳光招采 · 公开透明 · 全流程可追溯",
|
||||
style: "from-[#1f4d8f] via-[#2e6dc2] to-[#5c8fe0]",
|
||||
},
|
||||
{
|
||||
title: "一次注册，双平台通用",
|
||||
subtitle: "自动同步 SRM，建立统一供应商身份，秒级 AI 审核即时生效",
|
||||
tags: ["营业执照 OCR", "工商实时验真", "SRM 无感登录"],
|
||||
title: "上线试运行",
|
||||
subtitle: "智慧招标平台已上线，欢迎采购人、供应商、专家使用",
|
||||
style: "from-[#0d5f89] via-[#0f7da8] to-[#4ba6c9]",
|
||||
},
|
||||
{
|
||||
title: "阳光招采，全程存证",
|
||||
subtitle: "投标文件加密上链，评审操作哈希存证，围串标智能预警",
|
||||
tags: ["链上存证", "盲评脱敏", "AI 雷同检测"],
|
||||
title: "轮播图片2",
|
||||
subtitle: "统一门户、统一身份、统一公告发布",
|
||||
style: "from-[#2f5f3f] via-[#3b8460] to-[#66a37f]",
|
||||
},
|
||||
];
|
||||
|
||||
const TENDERS = [
|
||||
{ title: "年产5万吨聚丙烯项目设备采购", meta: "2026-07-01 ｜ 货物", status: "报名中", color: "#2e7d32", dot: "#4caf50" },
|
||||
{ title: "数字化交付平台开发服务", meta: "2026-06-29 ｜ 服务", status: "即将截止", color: "#e65100", dot: "#ff9800" },
|
||||
{ title: "2026年度防腐保温工程框架", meta: "2026-06-28 ｜ 工程", status: "已截止", color: "#9e9e9e", dot: "#bdbdbd" },
|
||||
];
|
||||
const NOTICE_DATA: Record<string, Notice[]> = {
|
||||
招标公告: [
|
||||
{ title: "[公开招标] 2026年地脚螺栓、不锈钢及五金紧固件框架招标", date: "2026-07-13" },
|
||||
{ title: "[公开招标] 万华莱州100MW分散式风电项目EPC工程总承包[变更公告]", date: "2026-07-13" },
|
||||
{ title: "[公开招标] 2026年橡胶密封件框架招标O型圈", date: "2026-07-13" },
|
||||
{ title: "[公开招标] 万华旋塞阀框架包一 金属旋塞阀、包二 衬氟旋塞阀", date: "2026-07-10" },
|
||||
{ title: "[公开招标] 改性TPU熟化料仓", date: "2026-07-09" },
|
||||
],
|
||||
资格预审公告: [
|
||||
{ title: "滨州园区危化品运输服务资格预审公告", date: "2026-07-11" },
|
||||
{ title: "公辅系统维保服务资格预审公告", date: "2026-07-10" },
|
||||
{ title: "智慧园区网络安全服务资格预审公告", date: "2026-07-08" },
|
||||
],
|
||||
中标候选人公示: [
|
||||
{ title: "[公开招标] 牵引车租赁服务框架中标候选人公示", date: "2026-07-07" },
|
||||
{ title: "[公开招标] 电池材料项目地质勘察工程中标候选人公示", date: "2026-07-06" },
|
||||
{ title: "[公开招标] 四轮防爆巡检机器人系统中标候选人公示", date: "2026-06-26" },
|
||||
],
|
||||
结果公告: [
|
||||
{ title: "[公开招标] HDPE管道管件框架招标中标结果公告", date: "2026-07-07" },
|
||||
{ title: "[公开招标] 万华起重框架招标包一 单梁起重机中标结果公告", date: "2026-07-02" },
|
||||
{ title: "[公开招标] 万华海阳绿电直连光伏组件项目中标结果公告", date: "2026-06-30" },
|
||||
],
|
||||
终止公告: [
|
||||
{ title: "国标切断双偏心蝶阀框架招标废标公告", date: "2026-07-06" },
|
||||
{ title: "TPU四期熟化料仓招标废标公告", date: "2026-07-01" },
|
||||
{ title: "万华滨州碳酸锂项目冷却窑废标公告", date: "2026-06-24" },
|
||||
],
|
||||
};
|
||||
|
||||
const AWARDS = [
|
||||
{ title: "催化剂采购项目（包1）", meta: "2026-07-01 ｜ 中标方：滨化催化剂有限公司" },
|
||||
{ title: "厂区安防监控升级项目", meta: "2026-06-30 ｜ 中标方：海康威视" },
|
||||
{ title: "办公楼装修工程", meta: "2026-06-28 ｜ 中标方：滨州建工集团" },
|
||||
];
|
||||
|
||||
const NEWS = [
|
||||
{ title: "滨化集团获评“省级智能工厂”", meta: "2026-07-01 ｜ 集团动态" },
|
||||
{ title: "2026 年供应商大会圆满举办", meta: "2026-06-25 ｜ 合作伙伴" },
|
||||
{ title: "智慧招标平台正式上线运营", meta: "2026-06-01 ｜ 平台公告" },
|
||||
];
|
||||
|
||||
function AnnouncementCard({
|
||||
title,
|
||||
tag,
|
||||
headerColor,
|
||||
items,
|
||||
moreBg,
|
||||
moreText,
|
||||
}: {
|
||||
title: string;
|
||||
tag: string;
|
||||
headerColor: string;
|
||||
items: { title: string; meta: string; status?: string; color?: string; dot?: string }[];
|
||||
moreBg: string;
|
||||
moreText: string;
|
||||
}) {
|
||||
function NoticeList({ items }: { items: Notice[] }) {
|
||||
return (
|
||||
<div className="flex flex-col overflow-hidden rounded-2xl bg-white shadow-[0_4px_16px_rgba(0,0,0,0.06)]">
|
||||
<div className="px-5 py-3 text-white" style={{ backgroundColor: headerColor }}>
|
||||
<div className="text-base font-bold">{title}</div>
|
||||
<div className="text-[11px] text-white/80">{tag}</div>
|
||||
</div>
|
||||
<div className="flex-1 space-y-2 p-4">
|
||||
{items.map((it) => (
|
||||
<div key={it.title} className="cursor-pointer rounded-lg bg-[#fafafa] px-3 py-2.5 transition-colors hover:bg-[#f0f2f7]">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="truncate text-sm text-[#1a2332]">{it.title}</span>
|
||||
{it.status && (
|
||||
<span className="flex shrink-0 items-center gap-1 text-xs" style={{ color: it.color }}>
|
||||
<span className="size-1.5 rounded-full" style={{ backgroundColor: it.dot }} />
|
||||
{it.status}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-[#8895aa]">{it.meta}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="px-4 pb-4">
|
||||
<button
|
||||
className="w-full rounded-full py-1.5 text-xs font-bold transition-opacity hover:opacity-80"
|
||||
style={{ backgroundColor: moreBg, color: moreText }}
|
||||
<ul className="space-y-1.5">
|
||||
{items.map((item) => (
|
||||
<li
|
||||
key={item.title}
|
||||
className="flex items-center gap-3 border-b border-dashed border-[#e5e7eb] py-1.5 text-sm"
|
||||
>
|
||||
查看全部 →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span className="line-clamp-1 flex-1 text-[#1f2937] hover:text-primary">{item.title}</span>
|
||||
<span className="shrink-0 text-xs text-[#6b7280]">{item.date}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export function PortalHome() {
|
||||
const navigate = useNavigate();
|
||||
const [banner, setBanner] = useState(0);
|
||||
const [activeNav, setActiveNav] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => setBanner((b) => (b + 1) % BANNERS.length), 5000);
|
||||
return () => clearInterval(t);
|
||||
}, []);
|
||||
|
||||
const b = BANNERS[banner];
|
||||
const [activeTab, setActiveTab] = useState(NOTICE_TABS[0]);
|
||||
const [activeBanner, setActiveBanner] = useState(0);
|
||||
const banner = BANNERS[activeBanner];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#f5f7fa]">
|
||||
{/* 顶部导航 */}
|
||||
<header className="sticky top-0 z-30 bg-brand-gradient shadow-sm">
|
||||
<div className="mx-auto flex h-[68px] max-w-[1200px] items-center px-8">
|
||||
<Link to="/portal" className="flex items-baseline gap-2 text-white">
|
||||
<Hexagon className="size-6 self-center" />
|
||||
<span className="text-xl font-bold">智慧招标平台</span>
|
||||
<span className="hidden text-xs text-white/70 sm:inline">Smart Tendering Platform</span>
|
||||
</Link>
|
||||
<nav className="ml-12 hidden gap-1 md:flex">
|
||||
{NAV.map((n, i) => (
|
||||
<button
|
||||
key={n}
|
||||
onClick={() => setActiveNav(i)}
|
||||
className={cn(
|
||||
"group relative px-4 py-2 text-sm text-white/80 transition-colors hover:text-white",
|
||||
activeNav === i && "font-bold text-white",
|
||||
)}
|
||||
>
|
||||
{n}
|
||||
<span
|
||||
className={cn(
|
||||
"absolute inset-x-4 -bottom-0.5 h-0.5 rounded-full bg-white transition-all",
|
||||
activeNav === i ? "opacity-100" : "opacity-0 group-hover:opacity-60",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
className="rounded-lg border border-white/60 px-4 py-1.5 text-sm text-white transition-colors hover:bg-white/15"
|
||||
>
|
||||
登录
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigate("/register")}
|
||||
className="rounded-lg bg-white px-4 py-1.5 text-sm font-bold text-primary transition-transform hover:-translate-y-0.5"
|
||||
>
|
||||
注册
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto max-w-[1200px] px-8 pb-16">
|
||||
{/* Banner 轮播 */}
|
||||
<section className="relative mt-6 overflow-hidden rounded-2xl bg-gradient-to-br from-[#fce4ec] to-[#f3e5f5] shadow-[0_6px_24px_rgba(0,0,0,0.08)]">
|
||||
<div className="flex min-h-[280px] flex-col justify-center px-12 py-10">
|
||||
<div className="mb-3 inline-flex w-fit items-center gap-1.5 rounded-full bg-white/70 px-3 py-1 text-xs text-primary">
|
||||
<Sparkles className="size-3.5" /> AI 原生 · 全流程线上闭环
|
||||
<PortalShell active="home">
|
||||
<section className="grid grid-cols-12 gap-4">
|
||||
<div className="col-span-12 border bg-white lg:col-span-3">
|
||||
<div className="border-b bg-[#f8fafc] px-4 py-3">
|
||||
<h2 className="text-base font-semibold">用户登录</h2>
|
||||
<p className="mt-1 text-xs text-[#6b7280]">
|
||||
还没有账号，<button onClick={() => navigate("/register")} className="text-primary hover:underline">去注册</button>
|
||||
</p>
|
||||
</div>
|
||||
<h1 key={banner} className="animate-slide-up text-primary" style={{ fontSize: 34, fontWeight: 700 }}>
|
||||
{b.title}
|
||||
</h1>
|
||||
<p className="mt-3 text-lg text-[#4a5568]">{b.subtitle}</p>
|
||||
<div className="mt-3 flex flex-wrap gap-x-5 gap-y-1 text-sm text-[#8895aa]">
|
||||
{b.tags.map((t) => (
|
||||
<span key={t}>• {t}</span>
|
||||
<div className="grid grid-cols-2 gap-2 p-4">
|
||||
{ROLES.map((r) => {
|
||||
const Icon = r.icon;
|
||||
return (
|
||||
<button
|
||||
key={r.key}
|
||||
onClick={() => navigate("/")}
|
||||
className="flex flex-col items-center justify-center border border-[#d9dee7] px-3 py-3.5 text-center hover:border-primary hover:bg-[#f8fbff]"
|
||||
>
|
||||
<Icon className="size-5 text-primary" />
|
||||
<span className="mt-2 text-sm">{r.label}</span>
|
||||
<span className="text-[11px] text-[#6b7280]">{r.en}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="space-y-3 px-4 pb-4">
|
||||
<input
|
||||
placeholder="账号 / 手机号"
|
||||
className="h-9 w-full border border-[#d9dee7] bg-white px-3 text-sm outline-none focus:border-primary"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="密码"
|
||||
className="h-9 w-full border border-[#d9dee7] bg-white px-3 text-sm outline-none focus:border-primary"
|
||||
/>
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
className="h-9 w-full bg-primary text-sm font-medium text-white hover:bg-[#0f4ea6]"
|
||||
>
|
||||
登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 border bg-white lg:col-span-9">
|
||||
<div className="relative h-[310px] overflow-hidden">
|
||||
<div className={cn("absolute inset-0 bg-gradient-to-br", banner.style)} />
|
||||
<div className="absolute inset-0 bg-black/20" />
|
||||
<div className="relative flex h-full flex-col justify-end p-7 text-white">
|
||||
<div className="text-3xl font-bold tracking-wide">{banner.title}</div>
|
||||
<div className="mt-2 text-sm text-white/90">{banner.subtitle}</div>
|
||||
</div>
|
||||
<div className="absolute left-5 top-5 rounded bg-black/35 px-2 py-1 text-xs text-white/90">
|
||||
首页轮播
|
||||
</div>
|
||||
<div className="absolute bottom-4 right-5 flex gap-2">
|
||||
{BANNERS.map((b, idx) => (
|
||||
<button
|
||||
key={b.title}
|
||||
onClick={() => setActiveBanner(idx)}
|
||||
className={cn(
|
||||
"rounded px-2.5 py-1 text-xs",
|
||||
idx === activeBanner ? "bg-white text-[#1f2937]" : "bg-black/35 text-white",
|
||||
)}
|
||||
>
|
||||
{b.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="border bg-white">
|
||||
<div className="border-b bg-[#f8fafc] px-4 py-3">
|
||||
<h2 className="text-base font-semibold">交易信息</h2>
|
||||
</div>
|
||||
<div className="border-b px-3">
|
||||
<div className="flex flex-wrap items-center">
|
||||
{NOTICE_TABS.map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={cn(
|
||||
"relative px-4 py-3 text-sm",
|
||||
activeTab === tab ? "font-semibold text-primary" : "text-[#4b5563] hover:text-primary",
|
||||
)}
|
||||
>
|
||||
{tab}
|
||||
{activeTab === tab && <span className="absolute inset-x-2 bottom-0 h-0.5 bg-primary" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => navigate("/register")}
|
||||
className="mt-6 inline-flex w-fit items-center gap-1.5 rounded-lg bg-brand-gradient px-6 py-2.5 text-sm font-bold text-white shadow-md transition-transform hover:scale-105"
|
||||
>
|
||||
了解更多 <ArrowRight className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
{/* 指示器 */}
|
||||
<div className="absolute bottom-6 right-12 flex gap-2">
|
||||
{BANNERS.map((_, i) => (
|
||||
<button
|
||||
key={i}
|
||||
aria-label={`切换到第 ${i + 1} 张`}
|
||||
onClick={() => setBanner(i)}
|
||||
className={cn("h-2 rounded-full transition-all", i === banner ? "w-6 bg-primary" : "w-2 bg-[#d1d5db]")}
|
||||
<div className="p-4">
|
||||
<NoticeList items={NOTICE_DATA[activeTab]} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid grid-cols-12 gap-4">
|
||||
<div className="col-span-12 border bg-white lg:col-span-6">
|
||||
<div className="border-b bg-[#f8fafc] px-4 py-3 text-sm font-semibold">通知公告</div>
|
||||
<div className="p-4">
|
||||
<NoticeList
|
||||
items={[
|
||||
{ title: "万华蓬莱园区高温管道耐火衬里类物资供应商招募", date: "2026-07-10" },
|
||||
{ title: "万华化学桨叶冷却机类供应商招募", date: "2026-07-10" },
|
||||
{ title: "万华化学洗车平台服务类供应商招募", date: "2026-06-25" },
|
||||
]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-12 border bg-white lg:col-span-6">
|
||||
<div className="border-b bg-[#f8fafc] px-4 py-3 text-sm font-semibold">常见问题 / 操作指南</div>
|
||||
<div className="grid grid-cols-2 gap-2 p-4 text-sm">
|
||||
{[
|
||||
"系统使用常见问题处理",
|
||||
"常见问题帮助",
|
||||
"供应商注册操作指南",
|
||||
"投标文件制作软件操作手册",
|
||||
"标证通申请-投标单位操作指南",
|
||||
"浏览器切换IE模式",
|
||||
].map((x) => (
|
||||
<button key={x} className="border px-3 py-2 text-left hover:border-primary hover:bg-[#f8fbff]">
|
||||
{x}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 公告区 */}
|
||||
<section className="mt-8">
|
||||
<h2 className="mb-4 flex items-center gap-2 text-[#1a2332]" style={{ fontSize: 20, fontWeight: 700 }}>
|
||||
📢 最新公告
|
||||
</h2>
|
||||
<div className="grid gap-5 md:grid-cols-3">
|
||||
<AnnouncementCard title="招标公告" tag="最新发布" headerColor="#c2185b" items={TENDERS} moreBg="#fce4ec" moreText="#c2185b" />
|
||||
<AnnouncementCard title="定标公告" tag="最新定标" headerColor="#1565c0" items={AWARDS} moreBg="#e3f2fd" moreText="#1565c0" />
|
||||
<AnnouncementCard title="企业新闻" tag="集团动态" headerColor="#e65100" items={NEWS} moreBg="#fff3e0" moreText="#e65100" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 免责声明 */}
|
||||
<section className="mt-8 rounded-2xl bg-white p-6 text-center shadow-[0_4px_16px_rgba(0,0,0,0.06)]">
|
||||
<div className="text-sm font-semibold text-[#4a5568]">免责声明</div>
|
||||
<p className="mx-auto mt-2 max-w-3xl text-xs leading-relaxed text-[#8895aa]">
|
||||
本平台所有招标信息均由滨化集团或其下属公司发布，信息真实有效。供应商应对投标行为负责，本平台保留对违规行为的处理权。
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-[#8895aa]">隐私政策 ｜ 服务协议 ｜ 法律声明 ｜ © 2026 滨化集团 ｜ 鲁ICP备XXXXXXXX号</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* AI 助手浮标 */}
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
className="group fixed bottom-8 right-8 z-50 flex size-[68px] items-center justify-center rounded-full bg-brand-gradient text-white shadow-xl transition-transform hover:scale-105"
|
||||
aria-label="小滨 AI 助手"
|
||||
>
|
||||
<span className="pointer-events-none absolute inset-0 rounded-full bg-brand-gradient animate-breathe" />
|
||||
<span className="relative flex flex-col items-center leading-none">
|
||||
<Bot className="size-5" />
|
||||
<span className="mt-0.5 text-[9px] text-white/90">小滨</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<XiaobinAssistant pageType="portal" />
|
||||
</PortalShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
import { useState } from "react";
|
||||
import { PortalShell } from "./PortalShell";
|
||||
import { cn } from "../../components/ui/utils";
|
||||
|
||||
const FAQS = [
|
||||
{
|
||||
q: "供应商账号如何注册？",
|
||||
a: "点击首页「用户登录」中的「供应商」入口，进入注册页后按营业执照信息与联系人信息提交即可。",
|
||||
},
|
||||
{
|
||||
q: "投标文件制作软件在哪里下载？",
|
||||
a: "请在「操作指南」页面下载「投标文件制作专用软件」，并按手册完成安装配置。",
|
||||
},
|
||||
{
|
||||
q: "忘记密码怎么办？",
|
||||
a: "在登录页点击「忘记密码」，通过注册手机号验证后可重置密码。",
|
||||
},
|
||||
{
|
||||
q: "为什么页面显示异常？",
|
||||
a: "建议使用最新版 Chrome 或 Edge；如为内网环境，请按指南开启 IE 兼容模式。",
|
||||
},
|
||||
];
|
||||
|
||||
export function FaqPage() {
|
||||
const [open, setOpen] = useState(0);
|
||||
return (
|
||||
<PortalShell active="faq">
|
||||
<section className="border bg-white">
|
||||
<div className="border-b bg-[#f8fafc] px-4 py-3">
|
||||
<h1 className="text-base font-semibold">常见问题</h1>
|
||||
</div>
|
||||
<div className="divide-y">
|
||||
{FAQS.map((item, idx) => (
|
||||
<div key={item.q} className="px-4 py-3">
|
||||
<button
|
||||
onClick={() => setOpen(idx)}
|
||||
className={cn("w-full text-left text-sm", open === idx ? "font-medium text-primary" : "")}
|
||||
>
|
||||
Q{idx + 1}. {item.q}
|
||||
</button>
|
||||
{open === idx && <p className="mt-2 text-sm text-muted-foreground">{item.a}</p>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</PortalShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import { PortalShell } from "./PortalShell";
|
||||
|
||||
const GUIDES = [
|
||||
"万华电子招投标平台-供应商注册操作指南",
|
||||
"电子招标投标平台投标文件制作软件操作手册",
|
||||
"标证通申请-投标单位操作指南",
|
||||
"投标文件制作专用软件安装说明",
|
||||
"浏览器切换IE模式",
|
||||
"系统使用常见问题处理",
|
||||
];
|
||||
|
||||
export function GuidesPage() {
|
||||
return (
|
||||
<PortalShell active="guide">
|
||||
<section className="border bg-white">
|
||||
<div className="border-b bg-[#f8fafc] px-4 py-3">
|
||||
<h1 className="text-base font-semibold">操作指南</h1>
|
||||
</div>
|
||||
<ul className="p-4 text-sm">
|
||||
{GUIDES.map((g, i) => (
|
||||
<li key={g} className="flex items-center gap-3 border-b border-dashed py-2">
|
||||
<span className="text-muted-foreground">{String(i + 1).padStart(2, "0")}.</span>
|
||||
<button className="line-clamp-1 flex-1 text-left hover:text-primary">{g}</button>
|
||||
<button className="shrink-0 border px-2 py-1 text-xs hover:border-primary hover:text-primary">
|
||||
下载
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</PortalShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
import { PortalShell } from "./PortalShell";
|
||||
|
||||
const POLICIES = [
|
||||
{ title: "中华人民共和国招标投标法", source: "国家法律法规", date: "2026-03-12" },
|
||||
{ title: "电子招标投标办法", source: "国家发展改革委", date: "2026-02-20" },
|
||||
{ title: "滨化集团采购管理办法（2026版）", source: "集团制度", date: "2026-01-15" },
|
||||
{ title: "供应商管理与准入规范", source: "集团制度", date: "2025-12-10" },
|
||||
{ title: "评标专家行为规范与回避制度", source: "集团制度", date: "2025-11-08" },
|
||||
];
|
||||
|
||||
export function PoliciesPage() {
|
||||
return (
|
||||
<PortalShell active="policy">
|
||||
<section className="border bg-white">
|
||||
<div className="border-b bg-[#f8fafc] px-4 py-3">
|
||||
<h1 className="text-base font-semibold">政策法规</h1>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-3 p-4">
|
||||
{POLICIES.map((p) => (
|
||||
<button
|
||||
key={p.title}
|
||||
className="col-span-12 border px-4 py-3 text-left hover:border-primary hover:bg-[#f8fbff] lg:col-span-6"
|
||||
>
|
||||
<div className="text-sm font-medium">{p.title}</div>
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
{p.source} ｜ 更新时间：{p.date}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</PortalShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
import { Link } from "react-router";
|
||||
import { Hexagon } from "lucide-react";
|
||||
import { cn } from "../../components/ui/utils";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
type NavKey = "home" | "trading" | "policy" | "guide" | "faq" | "platform";
|
||||
|
||||
const NAV_ITEMS: { key: NavKey; label: string; to: string }[] = [
|
||||
{ key: "home", label: "首页", to: "/portal" },
|
||||
{ key: "trading", label: "交易信息", to: "/portal/trading-info" },
|
||||
{ key: "policy", label: "政策法规", to: "/portal/policies" },
|
||||
{ key: "guide", label: "操作指南", to: "/portal/guides" },
|
||||
{ key: "faq", label: "常见问题", to: "/portal/faq" },
|
||||
{ key: "platform", label: "采购平台", to: "/portal/procurement-platform" },
|
||||
];
|
||||
|
||||
export function PortalShell({
|
||||
active,
|
||||
children,
|
||||
}: {
|
||||
active: NavKey;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#f5f7fa] text-[#1f2937]">
|
||||
<header className="border-b bg-white">
|
||||
<div className="mx-auto flex h-11 max-w-[1260px] items-center px-6 text-xs text-[#6b7280]">
|
||||
<span>欢迎来到万华电子招标投标交易网！</span>
|
||||
</div>
|
||||
<div className="border-t border-b bg-[#0f4ea6]">
|
||||
<div className="mx-auto flex h-16 max-w-[1260px] items-center px-6">
|
||||
<Link to="/portal" className="flex items-center gap-2 text-white">
|
||||
<Hexagon className="size-6" />
|
||||
<div className="leading-tight">
|
||||
<div className="text-lg font-semibold">智慧招标平台</div>
|
||||
<div className="text-[11px] text-white/80">Smart Tendering Platform</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="border-b bg-white">
|
||||
<div className="mx-auto flex h-11 max-w-[1260px] items-center px-6">
|
||||
{NAV_ITEMS.map((item, i) => (
|
||||
<Link
|
||||
key={item.key}
|
||||
to={item.to}
|
||||
className={cn(
|
||||
"mr-1 border-r px-5 text-sm leading-8",
|
||||
i === NAV_ITEMS.length - 1 && "border-r-0",
|
||||
item.key === active
|
||||
? "bg-primary font-semibold text-white"
|
||||
: "text-[#374151] hover:bg-[#f2f6fc] hover:text-primary",
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto max-w-[1260px] space-y-4 px-6 py-4">{children}</main>
|
||||
|
||||
<footer className="mt-6 border-t bg-white">
|
||||
<div className="mx-auto max-w-[1260px] space-y-2 px-6 py-5 text-xs text-[#6b7280]">
|
||||
<div>友情链接：万华集团 ｜ 万华化学供应商注册系统 ｜ 万华化学集团股份有限公司</div>
|
||||
<div>招投标相关网站：中国招投标协会 ｜ 中国招标投标公共服务平台 ｜ 中国国际招标网 ｜ 中国采购与招标网</div>
|
||||
<div>版权所有：滨化集团股份有限公司 ｜ 技术支持：国泰新点软件股份有限公司</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
import { useNavigate } from "react-router";
|
||||
import { Building2, Briefcase, UserRound, Users } from "lucide-react";
|
||||
import { PortalShell } from "./PortalShell";
|
||||
|
||||
const ENTRIES = [
|
||||
{
|
||||
title: "采购人入口",
|
||||
desc: "发起采购、发布公告、组织评标与定标管理",
|
||||
icon: Building2,
|
||||
action: "进入采购人工作台",
|
||||
},
|
||||
{
|
||||
title: "供应商入口",
|
||||
desc: "注册报名、下载文件、在线投标、保证金管理",
|
||||
icon: Briefcase,
|
||||
action: "进入供应商工作台",
|
||||
},
|
||||
{
|
||||
title: "专家入口",
|
||||
desc: "接受邀请、签署承诺、在线评标与评分提交",
|
||||
icon: UserRound,
|
||||
action: "进入专家工作台",
|
||||
},
|
||||
{
|
||||
title: "其他入口",
|
||||
desc: "审计监察、系统管理等角色入口",
|
||||
icon: Users,
|
||||
action: "进入其他角色入口",
|
||||
},
|
||||
];
|
||||
|
||||
export function ProcurementPlatformPage() {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<PortalShell active="platform">
|
||||
<section className="border bg-white">
|
||||
<div className="border-b bg-[#f8fafc] px-4 py-3">
|
||||
<h1 className="text-base font-semibold">采购平台</h1>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-4 p-4">
|
||||
{ENTRIES.map((entry) => {
|
||||
const Icon = entry.icon;
|
||||
return (
|
||||
<div key={entry.title} className="col-span-12 border p-4 lg:col-span-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className="size-5 text-primary" />
|
||||
<h2 className="text-sm font-semibold">{entry.title}</h2>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-muted-foreground">{entry.desc}</p>
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
className="mt-4 border border-primary px-3 py-1.5 text-xs text-primary hover:bg-[#eef5ff]"
|
||||
>
|
||||
{entry.action}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</PortalShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
import { useState } from "react";
|
||||
import { cn } from "../../components/ui/utils";
|
||||
import { PortalShell } from "./PortalShell";
|
||||
|
||||
type Notice = { title: string; date: string };
|
||||
|
||||
const NOTICE_TABS = ["招标公告", "资格预审公告", "中标候选人公示", "结果公告", "终止公告"];
|
||||
|
||||
const NOTICE_DATA: Record<string, Notice[]> = {
|
||||
招标公告: [
|
||||
{ title: "[公开招标] 扣电测试柜框架", date: "2026-07-13" },
|
||||
{ title: "[公开招标] 2026年地脚螺栓、不锈钢及五金紧固件框架招标", date: "2026-07-13" },
|
||||
{ title: "[公开招标] 万华莱州100MW分散式风电项目EPC工程总承包[变更公告]", date: "2026-07-13" },
|
||||
{ title: "[公开招标] TPU掺混特种线项目FFS包装机[变更公告]", date: "2026-07-13" },
|
||||
],
|
||||
资格预审公告: [
|
||||
{ title: "滨州园区危化品运输服务资格预审公告", date: "2026-07-11" },
|
||||
{ title: "公辅系统维保服务资格预审公告", date: "2026-07-10" },
|
||||
{ title: "智慧园区网络安全服务资格预审公告", date: "2026-07-08" },
|
||||
],
|
||||
中标候选人公示: [
|
||||
{ title: "[公开招标] 牵引车租赁服务框架中标候选人公示", date: "2026-07-07" },
|
||||
{ title: "[公开招标] 电池材料项目地质勘察工程中标候选人公示", date: "2026-07-06" },
|
||||
{ title: "[公开招标] 四轮防爆巡检机器人系统中标候选人公示", date: "2026-06-26" },
|
||||
],
|
||||
结果公告: [
|
||||
{ title: "[公开招标] HDPE管道管件框架招标中标结果公告", date: "2026-07-07" },
|
||||
{ title: "[公开招标] 万华起重框架招标包一 单梁起重机中标结果公告", date: "2026-07-02" },
|
||||
{ title: "[公开招标] 万华海阳绿电直连光伏组件项目中标结果公告", date: "2026-06-30" },
|
||||
],
|
||||
终止公告: [
|
||||
{ title: "国标切断双偏心蝶阀框架招标废标公告", date: "2026-07-06" },
|
||||
{ title: "TPU四期熟化料仓招标废标公告", date: "2026-07-01" },
|
||||
{ title: "万华滨州碳酸锂项目冷却窑废标公告", date: "2026-06-24" },
|
||||
],
|
||||
};
|
||||
|
||||
export function TradingInfoPage() {
|
||||
const [activeTab, setActiveTab] = useState(NOTICE_TABS[0]);
|
||||
return (
|
||||
<PortalShell active="trading">
|
||||
<section className="border bg-white">
|
||||
<div className="border-b bg-[#f8fafc] px-4 py-3">
|
||||
<h1 className="text-base font-semibold">交易信息</h1>
|
||||
</div>
|
||||
<div className="border-b px-3">
|
||||
<div className="flex flex-wrap items-center">
|
||||
{NOTICE_TABS.map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={cn(
|
||||
"relative px-4 py-3 text-sm",
|
||||
activeTab === tab ? "font-semibold text-primary" : "text-[#4b5563] hover:text-primary",
|
||||
)}
|
||||
>
|
||||
{tab}
|
||||
{activeTab === tab && <span className="absolute inset-x-2 bottom-0 h-0.5 bg-primary" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<ul className="space-y-1 p-4">
|
||||
{NOTICE_DATA[activeTab].map((n) => (
|
||||
<li key={n.title} className="flex items-center gap-3 border-b border-dashed py-2 text-sm">
|
||||
<span className="line-clamp-1 flex-1 hover:text-primary">{n.title}</span>
|
||||
<span className="text-xs text-muted-foreground">{n.date}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</PortalShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
:root {
|
||||
--font-size: 14px;
|
||||
--background: #f5f7fa;
|
||||
--background: #f3f5f8;
|
||||
--foreground: #1a2332;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #1a2332;
|
||||
@@ -10,17 +10,17 @@
|
||||
--popover-foreground: #1a2332;
|
||||
--primary: #1565c0;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #e3f2fd;
|
||||
--secondary: #eef4fb;
|
||||
--secondary-foreground: #0d47a1;
|
||||
--muted: #f1f5f9;
|
||||
--muted-foreground: #64748b;
|
||||
--accent: #e3f2fd;
|
||||
--accent: #eef4fb;
|
||||
--accent-foreground: #0d47a1;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e2e8f0;
|
||||
--input: transparent;
|
||||
--input-background: #f7f8fc;
|
||||
--input-background: #f9fafb;
|
||||
--switch-background: #cbd5e1;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-normal: 400;
|
||||
@@ -30,10 +30,10 @@
|
||||
--chart-3: #f59e0b;
|
||||
--chart-4: #7e57c2;
|
||||
--chart-5: #ef5350;
|
||||
--radius: 0.75rem;
|
||||
--radius: 0.35rem;
|
||||
/* 品牌渐变(全平台统一科技蓝，呼应滨化 LOGO): #0d47a1 → #1e88e5 */
|
||||
--brand-from: #0d47a1;
|
||||
--brand-to: #1e88e5;
|
||||
--brand-from: #0f4ea6;
|
||||
--brand-to: #0c428d;
|
||||
--sidebar: #0d2137;
|
||||
--sidebar-foreground: #d6e4f5;
|
||||
--sidebar-primary: #1e88e5;
|
||||
@@ -185,9 +185,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 平台品牌工具类与动效(依据《详细设计》统一视觉语言) ===== */
|
||||
/* ===== 平台品牌工具类与动效（统一科技蓝） ===== */
|
||||
@layer utilities {
|
||||
/* 品牌渐变背景: #c2185b → #e91e63 */
|
||||
/* 品牌渐变背景 */
|
||||
.bg-brand-gradient {
|
||||
background-image: linear-gradient(135deg, var(--brand-from), var(--brand-to));
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 429 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 445 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 338 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 300 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 358 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 281 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 283 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 248 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 264 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
@@ -0,0 +1,187 @@
|
||||
[
|
||||
{
|
||||
"file": "01.png",
|
||||
"section": "一、门户与登录",
|
||||
"title": "首页（门户）"
|
||||
},
|
||||
{
|
||||
"file": "02.png",
|
||||
"section": "一、门户与登录",
|
||||
"title": "门户导航 · 交易信息页"
|
||||
},
|
||||
{
|
||||
"file": "03.png",
|
||||
"section": "一、门户与登录",
|
||||
"title": "门户导航 · 政策法规页"
|
||||
},
|
||||
{
|
||||
"file": "04.png",
|
||||
"section": "一、门户与登录",
|
||||
"title": "门户导航 · 操作指南页"
|
||||
},
|
||||
{
|
||||
"file": "05.png",
|
||||
"section": "一、门户与登录",
|
||||
"title": "门户导航 · 常见问题页"
|
||||
},
|
||||
{
|
||||
"file": "06.png",
|
||||
"section": "一、门户与登录",
|
||||
"title": "门户导航 · 采购平台页"
|
||||
},
|
||||
{
|
||||
"file": "07.png",
|
||||
"section": "一、门户与登录",
|
||||
"title": "登录页（含可拖拽小滨）"
|
||||
},
|
||||
{
|
||||
"file": "08.png",
|
||||
"section": "二、角色工作台",
|
||||
"title": "招标专员工作台"
|
||||
},
|
||||
{
|
||||
"file": "09.png",
|
||||
"section": "二、角色工作台",
|
||||
"title": "采购需求人员工作台"
|
||||
},
|
||||
{
|
||||
"file": "10.png",
|
||||
"section": "二、角色工作台",
|
||||
"title": "评标专家工作台"
|
||||
},
|
||||
{
|
||||
"file": "11.png",
|
||||
"section": "二、角色工作台",
|
||||
"title": "评标委员会工作领导小组工作台"
|
||||
},
|
||||
{
|
||||
"file": "12.png",
|
||||
"section": "二、角色工作台",
|
||||
"title": "供应商工作台"
|
||||
},
|
||||
{
|
||||
"file": "13.png",
|
||||
"section": "二、角色工作台",
|
||||
"title": "系统管理员工作台"
|
||||
},
|
||||
{
|
||||
"file": "14.png",
|
||||
"section": "二、角色工作台",
|
||||
"title": "合规 / 审计工作台"
|
||||
},
|
||||
{
|
||||
"file": "15.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "发起招标委托"
|
||||
},
|
||||
{
|
||||
"file": "16.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "项目管理列表"
|
||||
},
|
||||
{
|
||||
"file": "17.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "项目详情"
|
||||
},
|
||||
{
|
||||
"file": "18.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "供应商长短名单"
|
||||
},
|
||||
{
|
||||
"file": "19.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "AI智慧寻源"
|
||||
},
|
||||
{
|
||||
"file": "20.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "开标大厅"
|
||||
},
|
||||
{
|
||||
"file": "21.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "在线评标室"
|
||||
},
|
||||
{
|
||||
"file": "22.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "保证金管理"
|
||||
},
|
||||
{
|
||||
"file": "23.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "供应商管理"
|
||||
},
|
||||
{
|
||||
"file": "24.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "专家管理"
|
||||
},
|
||||
{
|
||||
"file": "25.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "报表中心"
|
||||
},
|
||||
{
|
||||
"file": "26.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "异常决策"
|
||||
},
|
||||
{
|
||||
"file": "27.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "评标任务"
|
||||
},
|
||||
{
|
||||
"file": "28.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "投标中心"
|
||||
},
|
||||
{
|
||||
"file": "29.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "审计日志"
|
||||
},
|
||||
{
|
||||
"file": "30.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "围串标分析"
|
||||
},
|
||||
{
|
||||
"file": "31.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "存证验证"
|
||||
},
|
||||
{
|
||||
"file": "32.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "用户与权限管理"
|
||||
},
|
||||
{
|
||||
"file": "33.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "密钥管理"
|
||||
},
|
||||
{
|
||||
"file": "34.png",
|
||||
"section": "三、核心业务页面",
|
||||
"title": "系统设置"
|
||||
},
|
||||
{
|
||||
"file": "35.png",
|
||||
"section": "四、弹窗与抽屉",
|
||||
"title": "供应商详情抽屉"
|
||||
},
|
||||
{
|
||||
"file": "36.png",
|
||||
"section": "四、弹窗与抽屉",
|
||||
"title": "评标纪律承诺书弹窗"
|
||||
},
|
||||
{
|
||||
"file": "37.png",
|
||||
"section": "四、弹窗与抽屉",
|
||||
"title": "密钥漂移二次授权弹窗"
|
||||
}
|
||||
]
|
||||
Binary file not shown.
Reference in New Issue
Block a user