507 lines
35 KiB
HTML
507 lines
35 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>兴邦金租 · 智审工作台</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||
<link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&f[]=satoshi@400,500,700&display=swap">
|
||
<style>
|
||
:root {
|
||
--xb-nav: #102B27;
|
||
--xb-nav-hover: #1A3E38;
|
||
--xb-canvas: #F3F5F4;
|
||
--xb-surface: #FFFFFF;
|
||
--xb-primary: #17634C;
|
||
--xb-text: #182D26;
|
||
--xb-muted: #52675C;
|
||
--xb-line: #DCE4DF;
|
||
--xb-ai: #A33C38;
|
||
--xb-manual: #226A7A;
|
||
--xb-radius: 12px;
|
||
}
|
||
body {
|
||
font-family: 'Satoshi', 'General Sans', 'PingFang SC', system-ui, sans-serif;
|
||
color: var(--xb-text);
|
||
background-color: var(--xb-canvas);
|
||
}
|
||
.tracking-tight { letter-spacing: -0.02em; }
|
||
.xb-sidebar { width: 260px; background: var(--xb-nav); color: #E0EAE5; z-index: 50; }
|
||
.xb-nav-link { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 8px; font-size: 14px; color: #A5C0B3; transition: all 0.2s; }
|
||
.xb-nav-link:hover { background: var(--xb-nav-hover); color: #FFF; }
|
||
.xb-nav-link.active { background: #244D41; color: #FFF; font-weight: 500; }
|
||
.xb-card { background: var(--xb-surface); border: 1px solid var(--xb-line); border-radius: var(--xb-radius); transition: box-shadow 0.2s; }
|
||
.xb-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
|
||
.xb-btn-primary { background: var(--xb-primary); color: white; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; transition: opacity 0.2s; }
|
||
.xb-btn-primary:hover { opacity: 0.9; }
|
||
.xb-tag-ai { background: #FBEFEC; color: var(--xb-ai); border: 1px solid #E9C9C4; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
|
||
.xb-tag-manual { background: #EDF5F7; color: var(--xb-manual); border: 1px solid #C9E1E6; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
|
||
.radar-area { fill: rgba(23, 99, 76, 0.1); stroke: var(--xb-primary); stroke-width: 2; }
|
||
.radar-axis { stroke: var(--xb-line); stroke-dasharray: 4; }
|
||
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
|
||
.page-transition { view-transition-name: main-content; }
|
||
::view-transition-old(main-content) { animation: fade-out 0.3s; }
|
||
::view-transition-new(main-content) { animation: fade-in 0.3s; }
|
||
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
|
||
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
|
||
.scroll-hide::-webkit-scrollbar { display: none; }
|
||
</style>
|
||
</head>
|
||
<body class="antialiased">
|
||
<div id="root" class="flex min-h-screen">
|
||
<!-- Sidebar Navigation -->
|
||
<aside class="xb-sidebar fixed inset-y-0 left-0 flex flex-col p-6">
|
||
<div class="flex items-center gap-3 mb-12">
|
||
<div class="w-10 h-10 bg-[#17634C] rounded-xl flex items-center justify-center text-white font-bold text-xl">兴</div>
|
||
<div>
|
||
<h1 class="text-white font-bold text-lg leading-tight tracking-tight">兴邦金租</h1>
|
||
<p class="text-[10px] text-[#A5C0B3] uppercase tracking-[0.2em] opacity-60">Intellectual Audit</p>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="flex-1 space-y-1">
|
||
<p class="text-[11px] text-[#52675C] font-semibold mb-3 px-2">工作区</p>
|
||
<a href="#" id="nav-prescreen" class="xb-nav-link active">
|
||
<iconify-icon icon="lucide:shield-check" class="text-lg"></iconify-icon>
|
||
<span>AI 预审</span>
|
||
</a>
|
||
<a href="#" id="nav-assets" class="xb-nav-link">
|
||
<iconify-icon icon="lucide:database" class="text-lg"></iconify-icon>
|
||
<span>配置资产中心</span>
|
||
</a>
|
||
<a href="#" id="nav-trajectory" class="xb-nav-link">
|
||
<iconify-icon icon="lucide:git-branch" class="text-lg"></iconify-icon>
|
||
<span>轨迹复盘</span>
|
||
</a>
|
||
|
||
<div class="pt-8">
|
||
<p class="text-[11px] text-[#52675C] font-semibold mb-3 px-2">受控环境</p>
|
||
<div class="bg-[#173830] border border-[#29483E] rounded-xl p-4">
|
||
<p class="text-[12px] text-[#B5CABE] leading-relaxed">
|
||
miniOpenClaw 编排<br/>
|
||
只读 Tools · 证据留痕<br/>
|
||
<span class="text-[#52675C] text-[10px] mt-2 block">V2.4.1 Production</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="mt-auto">
|
||
<a href="#" id="nav-assistant" class="xb-nav-link">
|
||
<iconify-icon icon="lucide:bot" class="text-lg"></iconify-icon>
|
||
<span>业务助手</span>
|
||
</a>
|
||
<div class="mt-6 flex items-center gap-3 px-2 pt-6 border-t border-white/10">
|
||
<div class="w-8 h-8 rounded-full bg-[#244D41] flex items-center justify-center text-xs font-bold">JD</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p class="text-xs font-medium text-white truncate">张经理 (Manager)</p>
|
||
<p class="text-[10px] text-[#A5C0B3]">业务一部</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main Content Area -->
|
||
<main class="flex-1 ml-[260px] flex flex-col">
|
||
<!-- Top Header -->
|
||
<header class="h-16 bg-white/80 backdrop-blur-md border-b border-var(--xb-line) flex items-center justify-between px-8 sticky top-0 z-40">
|
||
<div class="flex items-center gap-4">
|
||
<nav class="flex text-sm text-var(--xb-muted)" aria-label="Breadcrumb">
|
||
<span>智能预审平台</span>
|
||
<span class="mx-2 text-gray-300">/</span>
|
||
<span class="text-var(--xb-text) font-medium" id="current-page-name">AI 预审</span>
|
||
</nav>
|
||
</div>
|
||
<div class="flex items-center gap-6">
|
||
<div class="flex items-center gap-2 px-3 py-1.5 bg-[#EEEAE0] border border-[#E2DAC9] rounded-full">
|
||
<div class="status-dot bg-amber-600"></div>
|
||
<span class="text-[11px] font-medium text-[#6E634E]">模拟演示环境 · 数据已脱敏</span>
|
||
</div>
|
||
<button id="header-notify-btn" class="text-var(--xb-muted) hover:text-var(--xb-text)">
|
||
<iconify-icon icon="lucide:bell" class="text-xl"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Dashboard Content (AI 预审 View) -->
|
||
<div class="p-8 max-w-[1400px] mx-auto w-full space-y-8 page-transition" id="view-prescreen">
|
||
<div class="flex justify-between items-end">
|
||
<div>
|
||
<p class="text-[12px] font-bold text-var(--xb-primary) tracking-widest uppercase mb-1">Case Analysis</p>
|
||
<h2 class="text-3xl font-bold tracking-tight">华东某精密装备售后回租项目</h2>
|
||
<p class="text-var(--xb-muted) mt-2">项目编号: DEMO-P001 | 行业: 高端制造 | 预计金额: 3,500 万元</p>
|
||
</div>
|
||
<div class="flex gap-3">
|
||
<button id="btn-refresh-audit" class="flex items-center gap-2 px-4 py-2 border border-var(--xb-line) rounded-lg text-sm hover:bg-white transition-colors">
|
||
<iconify-icon icon="lucide:refresh-cw"></iconify-icon>
|
||
<span>重新扫描材料</span>
|
||
</button>
|
||
<button id="btn-submit-audit" class="xb-btn-primary flex items-center gap-2">
|
||
<iconify-icon icon="lucide:play"></iconify-icon>
|
||
<span>开始正式预审</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-12 gap-8">
|
||
<!-- Left: Probability & Analysis -->
|
||
<div class="col-span-12 lg:col-span-8 space-y-8">
|
||
<!-- Hero Result -->
|
||
<div class="xb-card p-8 bg-gradient-to-br from-white to-[#F8FAF9] flex items-center gap-12">
|
||
<div class="relative w-48 h-48">
|
||
<svg class="w-full h-full -rotate-90" viewBox="0 0 100 100">
|
||
<circle cx="50" cy="50" r="44" stroke="#E3EBE6" stroke-width="8" fill="none"/>
|
||
<circle cx="50" cy="50" r="44" stroke="url(#grad1)" stroke-width="8" stroke-dasharray="276" stroke-dashoffset="160" stroke-linecap="round" fill="none"/>
|
||
<defs>
|
||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#17634C" />
|
||
<stop offset="100%" style="stop-color:#75BCA0" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
<div class="absolute inset-0 flex flex-col items-center justify-center text-center">
|
||
<span class="text-4xl font-bold tracking-tight text-var(--xb-primary)">42<span class="text-lg">%</span></span>
|
||
<span class="text-[10px] text-var(--xb-muted) font-medium mt-1">模拟通过概率</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex-1">
|
||
<div class="inline-flex items-center gap-2 px-2 py-0.5 bg-amber-50 text-amber-700 border border-amber-200 rounded text-[10px] font-bold mb-4">
|
||
<iconify-icon icon="lucide:alert-triangle"></iconify-icon>
|
||
建议补充材料后复核
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3">关键证据链缺失</h3>
|
||
<p class="text-sm text-var(--xb-muted) leading-relaxed mb-6">当前材料无法闭环验证“租金覆盖率”与“设备物权权属”。AI Agent 已识别出 2 项核心核查阻塞,建议在正式送审前完成补件沙盘演练。</p>
|
||
<div class="flex gap-2">
|
||
<span class="xb-tag-ai">✧ 租金来源待核</span>
|
||
<span class="xb-tag-ai">✧ 权属凭证不全</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Evidence Radar -->
|
||
<div class="xb-card overflow-hidden">
|
||
<div class="px-6 py-4 border-b border-var(--xb-line) flex justify-between items-center bg-gray-50/50">
|
||
<h4 class="text-sm font-bold">证据成熟度雷达 (Evidence Matrix)</h4>
|
||
<span class="text-[11px] text-var(--xb-muted)">雷达面积不与概率挂钩,仅反映维度覆盖度</span>
|
||
</div>
|
||
<div class="p-8 flex flex-col lg:flex-row gap-8 items-center">
|
||
<div class="flex-1 flex justify-center">
|
||
<svg width="300" height="300" viewBox="0 0 300 300">
|
||
<!-- Radar Grid -->
|
||
<polygon points="150,50 245,100 245,200 150,250 55,200 55,100" fill="none" stroke="#E0E8E1"/>
|
||
<polygon points="150,100 197.5,125 197.5,175 150,200 102.5,175 102.5,125" fill="none" stroke="#E0E8E1"/>
|
||
<line x1="150" y1="150" x2="150" y2="50" class="radar-axis"/>
|
||
<line x1="150" y1="150" x2="245" y2="100" class="radar-axis"/>
|
||
<line x1="150" y1="150" x2="245" y2="200" class="radar-axis"/>
|
||
<line x1="150" y1="150" x2="150" y2="250" class="radar-axis"/>
|
||
<line x1="150" y1="150" x2="55" y2="200" class="radar-axis"/>
|
||
<line x1="150" y1="150" x2="55" y2="100" class="radar-axis"/>
|
||
<!-- Radar Data Area -->
|
||
<polygon points="150,80 220,115 190,180 150,230 80,180 100,120" class="radar-area"/>
|
||
<!-- Labels -->
|
||
<text x="150" y="40" text-anchor="middle" class="text-[10px] fill-var(--xb-muted)">租金覆盖</text>
|
||
<text x="260" y="95" text-anchor="start" class="text-[10px] fill-var(--xb-muted)">租赁物权属</text>
|
||
<text x="260" y="210" text-anchor="start" class="text-[10px] fill-var(--xb-muted)">经营连续性</text>
|
||
<text x="150" y="270" text-anchor="middle" class="text-[10px] fill-var(--xb-muted)">租赁物估值</text>
|
||
<text x="40" y="210" text-anchor="end" class="text-[10px] fill-var(--xb-muted)">增信结构</text>
|
||
<text x="40" y="95" text-anchor="end" class="text-[10px] fill-var(--xb-muted)">材料一致性</text>
|
||
</svg>
|
||
</div>
|
||
<div class="w-full lg:w-72 space-y-4">
|
||
<div class="p-4 rounded-xl bg-var(--xb-canvas) border border-var(--xb-line)">
|
||
<h5 class="text-xs font-bold mb-2 flex items-center gap-2">
|
||
<iconify-icon icon="lucide:info" class="text-var(--xb-primary)"></iconify-icon>
|
||
待办建议
|
||
</h5>
|
||
<ul class="space-y-3">
|
||
<li class="text-xs text-var(--xb-muted) flex items-start gap-2">
|
||
<span class="status-dot bg-amber-500 mt-1"></span>
|
||
<span>补充近6个月银行流水以对齐租金计划</span>
|
||
</li>
|
||
<li class="text-xs text-var(--xb-muted) flex items-start gap-2">
|
||
<span class="status-dot bg-amber-500 mt-1"></span>
|
||
<span>上传增值税发票清单确认权属唯一性</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<button id="btn-open-assistant" class="w-full flex items-center justify-between px-4 py-3 bg-white border border-var(--xb-line) rounded-xl text-sm font-medium hover:border-var(--xb-primary) transition-all group">
|
||
<div class="flex items-center gap-2">
|
||
<iconify-icon icon="lucide:sparkles" class="text-var(--xb-ai)"></iconify-icon>
|
||
<span>问问业务助手</span>
|
||
</div>
|
||
<iconify-icon icon="lucide:chevron-right" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right: Sandbox & Controls -->
|
||
<div class="col-span-12 lg:col-span-4 space-y-8">
|
||
<!-- Sandbox Section -->
|
||
<div class="xb-card p-6 bg-[#F8FBF8] border-[#E0EAE1]">
|
||
<h4 class="text-sm font-bold mb-6 flex items-center gap-2">
|
||
<iconify-icon icon="lucide:git-pull-request" class="text-var(--xb-primary)"></iconify-icon>
|
||
补件推演沙盘
|
||
</h4>
|
||
<div class="space-y-4">
|
||
<label class="flex items-start gap-3 p-4 bg-white border border-var(--xb-line) rounded-xl cursor-pointer hover:border-var(--xb-primary) transition-all">
|
||
<input type="checkbox" class="mt-1 w-4 h-4 rounded border-gray-300 text-var(--xb-primary) focus:ring-var(--xb-primary)">
|
||
<div>
|
||
<span class="text-sm font-bold">补充租金覆盖材料</span>
|
||
<p class="text-[11px] text-var(--xb-muted) mt-1">假设经营流水与报表可交叉验证,消除租金来源疑虑</p>
|
||
</div>
|
||
</label>
|
||
<label class="flex items-start gap-3 p-4 bg-white border border-var(--xb-line) rounded-xl cursor-pointer hover:border-var(--xb-primary) transition-all">
|
||
<input type="checkbox" class="mt-1 w-4 h-4 rounded border-gray-300 text-var(--xb-primary) focus:ring-var(--xb-primary)">
|
||
<div>
|
||
<span class="text-sm font-bold">补充租赁物权属材料</span>
|
||
<p class="text-[11px] text-var(--xb-muted) mt-1">假设所有发票与清单一致,排除权属争议风险</p>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="mt-8 pt-6 border-t border-var(--xb-line)">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="flex flex-col">
|
||
<span class="text-[10px] text-var(--xb-muted) font-bold uppercase tracking-widest">Simulated Result</span>
|
||
<div class="flex items-baseline gap-2 mt-1">
|
||
<span class="text-2xl font-bold text-var(--xb-primary)">64%</span>
|
||
<span class="text-xs text-var(--xb-primary) bg-[#EDF5EF] px-1.5 py-0.5 rounded font-medium">+22%</span>
|
||
</div>
|
||
</div>
|
||
<button id="btn-save-scenario" class="text-xs font-bold text-var(--xb-primary) hover:underline">保存并生成预演报告</button>
|
||
</div>
|
||
<p class="text-[10px] text-var(--xb-muted) leading-relaxed italic">
|
||
* 此为基于人工配置情景的模拟增量值,不代表最终审批结果。系统仅演示材料齐全度对业务逻辑的影响。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Applied Cards Detail -->
|
||
<div class="xb-card overflow-hidden">
|
||
<div class="px-6 py-4 border-b border-var(--xb-line) bg-gray-50/50">
|
||
<h4 class="text-sm font-bold">本次加载技能包 (Skills & Rules)</h4>
|
||
</div>
|
||
<div class="p-4 space-y-3">
|
||
<div class="flex items-center justify-between p-3 rounded-lg border border-var(--xb-line) hover:bg-gray-50">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded bg-[#FBEFEC] flex items-center justify-center text-var(--xb-ai)">
|
||
<iconify-icon icon="lucide:sparkles"></iconify-icon>
|
||
</div>
|
||
<div>
|
||
<p class="text-xs font-bold">租金计划交叉核验</p>
|
||
<p class="text-[10px] text-var(--xb-muted)">SK-01 · AI 提炼</p>
|
||
</div>
|
||
</div>
|
||
<iconify-icon icon="lucide:chevron-right" class="text-gray-300"></iconify-icon>
|
||
</div>
|
||
<div class="flex items-center justify-between p-3 rounded-lg border border-var(--xb-line) hover:bg-gray-50">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded bg-[#EDF5F7] flex items-center justify-center text-var(--xb-manual)">
|
||
<iconify-icon icon="lucide:clipboard-check"></iconify-icon>
|
||
</div>
|
||
<div>
|
||
<p class="text-xs font-bold">权属凭证校验规则</p>
|
||
<p class="text-[10px] text-var(--xb-muted)">RU-02 · 人工创建</p>
|
||
</div>
|
||
</div>
|
||
<iconify-icon icon="lucide:chevron-right" class="text-gray-300"></iconify-icon>
|
||
</div>
|
||
<div class="flex items-center justify-between p-3 rounded-lg border border-var(--xb-line) hover:bg-gray-50">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded bg-gray-100 flex items-center justify-center text-gray-500">
|
||
<iconify-icon icon="lucide:file-text"></iconify-icon>
|
||
</div>
|
||
<div>
|
||
<p class="text-xs font-bold">对公租赁审核模板</p>
|
||
<p class="text-[10px] text-var(--xb-muted)">TP-V2 · 预设模板</p>
|
||
</div>
|
||
</div>
|
||
<iconify-icon icon="lucide:chevron-right" class="text-gray-300"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<a href="#" id="link-manage-assets" class="block p-4 text-center text-xs font-medium text-var(--xb-muted) hover:text-var(--xb-primary) border-t border-var(--xb-line) bg-gray-50/30">前往配置资产中心调整装配 →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- View: 配置资产中心 (Hidden by default, shown via navigation) -->
|
||
<div class="p-8 max-w-[1400px] mx-auto w-full space-y-8 hidden page-transition" id="view-assets">
|
||
<div class="flex justify-between items-end">
|
||
<div>
|
||
<p class="text-[12px] font-bold text-var(--xb-primary) tracking-widest uppercase mb-1">Resource Center</p>
|
||
<h2 class="text-3xl font-bold tracking-tight">配置资产中心</h2>
|
||
<p class="text-var(--xb-muted) mt-2">管理数据卡、Skills、Rules及预审模版;支持发布与多版本管控</p>
|
||
</div>
|
||
<button id="btn-create-asset" class="xb-btn-primary flex items-center gap-2">
|
||
<iconify-icon icon="lucide:plus"></iconify-icon>
|
||
<span>创建新资产</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="flex gap-8 border-b border-var(--xb-line) scroll-hide overflow-x-auto">
|
||
<button id="tab-skills" class="px-4 py-3 text-sm font-bold border-b-2 border-var(--xb-primary) text-var(--xb-primary)">Skills 卡片池 (12)</button>
|
||
<button id="tab-rules" class="px-4 py-3 text-sm font-medium text-var(--xb-muted) hover:text-var(--xb-text)">Rules 卡片池 (8)</button>
|
||
<button id="tab-datacards" class="px-4 py-3 text-sm font-medium text-var(--xb-muted) hover:text-var(--xb-text)">数据事实卡 (4)</button>
|
||
<button id="tab-templates" class="px-4 py-3 text-sm font-medium text-var(--xb-muted) hover:text-var(--xb-text)">模板语言卡 (3)</button>
|
||
<button id="tab-models" class="px-4 py-3 text-sm font-medium text-var(--xb-muted) hover:text-var(--xb-text)">模型设置</button>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||
<!-- Asset Card Sample AI -->
|
||
<div class="xb-card p-6 flex flex-col">
|
||
<div class="flex justify-between items-start mb-4">
|
||
<span class="xb-tag-ai tracking-tight">✧ AI 提炼</span>
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-green-500"></span>
|
||
<span class="text-[10px] text-var(--xb-muted) font-medium">已发布</span>
|
||
</div>
|
||
</div>
|
||
<h4 class="font-bold text-sm mb-2">经营性现金流分析</h4>
|
||
<p class="text-xs text-var(--xb-muted) line-clamp-2 leading-relaxed flex-1">从银行流水及纳税申报表中提取月度现金流入,与租金计划进行交叉对齐,识别潜在违约风险。</p>
|
||
<div class="mt-6 pt-4 border-t border-var(--xb-line) flex justify-between items-center">
|
||
<span class="text-[10px] text-var(--xb-muted)">v1.2.4 · 2023.11.20</span>
|
||
<button id="btn-edit-asset-1" class="text-xs font-bold text-var(--xb-primary)">管理详情</button>
|
||
</div>
|
||
</div>
|
||
<!-- Asset Card Sample Manual -->
|
||
<div class="xb-card p-6 flex flex-col">
|
||
<div class="flex justify-between items-start mb-4">
|
||
<span class="xb-tag-manual">+ 人工创建</span>
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-gray-300"></span>
|
||
<span class="text-[10px] text-var(--xb-muted) font-medium">草稿</span>
|
||
</div>
|
||
</div>
|
||
<h4 class="font-bold text-sm mb-2">租赁物权属负面核验</h4>
|
||
<p class="text-xs text-var(--xb-muted) line-clamp-2 leading-relaxed flex-1">根据发票号码段在全国发票查验平台及中登网进行唯一性确认,防止重复融资。</p>
|
||
<div class="mt-6 pt-4 border-t border-var(--xb-line) flex justify-between items-center">
|
||
<span class="text-[10px] text-var(--xb-muted)">v1.0.0 · 2023.12.01</span>
|
||
<button id="btn-edit-asset-2" class="text-xs font-bold text-var(--xb-primary)">管理详情</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- View: 轨迹复盘 (Hidden by default) -->
|
||
<div class="p-8 max-w-[1400px] mx-auto w-full space-y-8 hidden page-transition" id="view-trajectory">
|
||
<div class="flex justify-between items-end">
|
||
<div>
|
||
<p class="text-[12px] font-bold text-var(--xb-primary) tracking-widest uppercase mb-1">Audit Trace</p>
|
||
<h2 class="text-3xl font-bold tracking-tight">判断轨迹复盘</h2>
|
||
<p class="text-var(--xb-muted) mt-2">回溯 AI 判断链路,对比评审会结果,持续优化技能包</p>
|
||
</div>
|
||
<select id="select-run-history" class="px-4 py-2 border border-var(--xb-line) rounded-lg text-sm bg-white outline-none focus:border-var(--xb-primary)">
|
||
<option>DEMO-R01 · 2023-11-20 · 42%</option>
|
||
<option>DEMO-R02 · 2023-11-22 · 64%</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Time & Step Axis -->
|
||
<div class="xb-card p-10">
|
||
<div class="relative flex justify-between items-center">
|
||
<div class="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-0.5 bg-var(--xb-line) -z-10"></div>
|
||
<!-- Steps -->
|
||
<div class="flex flex-col items-center gap-4 bg-var(--xb-canvas)">
|
||
<div class="w-10 h-10 rounded-full bg-var(--xb-primary) text-white flex items-center justify-center font-bold ring-8 ring-white shadow-sm">1</div>
|
||
<span class="text-xs font-bold">初步材料解析</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-4 bg-var(--xb-canvas)">
|
||
<div class="w-10 h-10 rounded-full bg-var(--xb-primary) text-white flex items-center justify-center font-bold ring-8 ring-white shadow-sm">2</div>
|
||
<span class="text-xs font-bold">Skills 核查执行</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-4 bg-var(--xb-canvas)">
|
||
<div class="w-10 h-10 rounded-full bg-var(--xb-primary) text-white flex items-center justify-center font-bold ring-8 ring-white shadow-sm">3</div>
|
||
<span class="text-xs font-bold">Rules 适用匹配</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-4 bg-var(--xb-canvas)">
|
||
<div class="w-10 h-10 rounded-full bg-gray-200 text-gray-400 flex items-center justify-center font-bold ring-8 ring-white">4</div>
|
||
<span class="text-xs font-bold text-gray-400">会议决策建议</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-16 grid grid-cols-2 gap-12">
|
||
<div class="space-y-6">
|
||
<h4 class="text-sm font-bold flex items-center gap-2">
|
||
<iconify-icon icon="lucide:message-square" class="text-var(--xb-primary)"></iconify-icon>
|
||
Jev 专项质检反馈 (Quality Check)
|
||
</h4>
|
||
<div class="p-6 rounded-xl border border-var(--xb-line) bg-gray-50/50">
|
||
<p class="text-sm text-var(--xb-muted) italic">“租金测算模块的现金流提取准确率 98.5%,但对‘季付’规则的例外场景识别存在偏差,已触发 Skill 修订建议。”</p>
|
||
<div class="mt-4 flex gap-4">
|
||
<button id="btn-apply-fix" class="text-xs font-bold text-var(--xb-primary) px-3 py-1.5 bg-white border border-var(--xb-primary) rounded-lg">转为改进草稿</button>
|
||
<span class="text-[10px] text-var(--xb-muted) self-center">Jev 仅作质检,不参与审批权重</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-6">
|
||
<h4 class="text-sm font-bold flex items-center gap-2">
|
||
<iconify-icon icon="lucide:users" class="text-var(--xb-primary)"></iconify-icon>
|
||
评审会结果记录
|
||
</h4>
|
||
<div class="space-y-4">
|
||
<div class="flex justify-between items-center py-2 border-b border-var(--xb-line)">
|
||
<span class="text-sm text-var(--xb-muted)">最终结论</span>
|
||
<span class="text-sm font-bold text-red-600">未通过 (Denied)</span>
|
||
</div>
|
||
<div class="flex justify-between items-center py-2 border-b border-var(--xb-line)">
|
||
<span class="text-sm text-var(--xb-muted)">核心分歧</span>
|
||
<span class="text-sm font-bold">权属资料真实性存疑</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- JavaScript for Basic Interactions -->
|
||
<script>
|
||
const navItems = {
|
||
'nav-prescreen': 'view-prescreen',
|
||
'nav-assets': 'view-assets',
|
||
'nav-trajectory': 'view-trajectory'
|
||
};
|
||
|
||
const pageNames = {
|
||
'nav-prescreen': 'AI 预审',
|
||
'nav-assets': '配置资产中心',
|
||
'nav-trajectory': '轨迹复盘'
|
||
};
|
||
|
||
Object.keys(navItems).forEach(id => {
|
||
document.getElementById(id).addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
|
||
// Update Active Link
|
||
Object.keys(navItems).forEach(key => {
|
||
document.getElementById(key).classList.remove('active');
|
||
});
|
||
document.getElementById(id).classList.add('active');
|
||
|
||
// Update View
|
||
Object.values(navItems).forEach(viewId => {
|
||
document.getElementById(viewId).classList.add('hidden');
|
||
});
|
||
document.getElementById(navItems[id]).classList.remove('hidden');
|
||
|
||
// Update Breadcrumb
|
||
document.getElementById('current-page-name').textContent = pageNames[id];
|
||
});
|
||
});
|
||
|
||
// Mock Toast
|
||
const showToast = (msg) => {
|
||
console.log('Toast:', msg);
|
||
alert(msg); // Placeholder for a real toast component
|
||
};
|
||
|
||
document.getElementById('btn-submit-audit').onclick = () => showToast('正式预审任务已提交至 AI Agent 队列...');
|
||
document.getElementById('btn-save-scenario').onclick = () => showToast('复审预演报告已生成并关联至项目轨迹。');
|
||
</script>
|
||
</body>
|
||
</html> |