design(v2): 完成Superdesign预审交互原型并记录验证
verify / test-and-build (push) Canceled after 0s

This commit is contained in:
2026-09-28 17:48:26 +08:00
parent e1b5ee0f7c
commit e2883bb67b
10 changed files with 555 additions and 1 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
# 兴邦预审 v2 UI Spec
状态:候选表面规格,未开发、未做浏览器验收;不把本文件当作可点击原型。输入:需求规格与详细设计草案。
状态:候选表面规格,生产UI尚未开发;Superdesign 原型单独见 [交互原型记录](12-prototype.md),不以原型替代生产验收。输入:需求规格与详细设计草案。
## 1. 交付面与骨架
+56
View File
@@ -0,0 +1,56 @@
# 兴邦智审 v2 · Superdesign 交互原型
日期:2026-09-28。目标:验证视觉风格、信息层级与核心操作,不代表新版业务功能已实现。
## 用户已选方向
深色导航+浅色工作区;高端大气、直观易用、有科技感。以深绿导航、白色证据面板和精确的关系图呈现金融评审工作台。首屏先回答“当前建议是什么、依据是什么、下一步做什么”。
## 原型范围
一个连通的项目工作台:综合预审、历史经验、推进沙盘通过页签切换。证据抽屉展示原文与缺证,补件清单弹窗说明具体材料。模型选项展示本地开源模型(演示)、Jev(未配置)和关闭。正式审批不纳入原型操作。
虚构企业与项目:恒远精密设备有限公司 / DEMO-026;3,000万元、36个月及全部材料数量均为演示数据。主审意见为“补充材料后再判断”,不展示未经校准的通过概率。
## 状态与交互约束
- 综合页:结论、两项重点问题、证据关系和下一步;来源节点可展开,关闭抽屉返回原位置。
- 历史经验:问询→补件→证据变化→历史意见,显示适用条件与例外;相似不直接导出相同结论。
- 推进沙盘:选择假设补件→运行模拟→比较变化;持续标记假设条件,返回真实预审后原意见不变。
- 模型选择:本地仅演示,Jev未配置不可调用,关闭保留主审意见及缺失专项提示;切换不能伪称已连接模型。
- 补件清单:打开/关闭、可复制内容;不提供伪造的报告下载。
- 验证入口:只展示待开展的对照方案,不展示虚构准确率。
## 原型验收(与生产验收分开)
| ID | Given / When / Then | 需求关联 |
|---|---|---|
| P-01 | Given 演示项目,When 打开首页,Then 首屏显示预审意见、关键依据、下一步及演示标识 | AC-05/07/12 |
| P-02 | Given 一条问题,When 点击证据,Then 可读原文、定位和缺失项,关闭后回到原页面 | AC-08 |
| P-03 | Given 历史案例,When 切换历史经验,Then 看到问询/补件/判断变化与适用例外 | AC-02/04 |
| P-04 | Given 模拟补件,When 运行并返回真实预审,Then 原意见未变,模拟结果有持续标识 | AC-11 |
| P-05 | Given 模型选项,When 选择关闭,Then 显示未执行专项核查;Jev未配置不可调用 | AC-17/21 |
| P-06 | Given 补件需求,When 生成清单,Then 可查看具体材料要求,无虚假的后端完成状态 | AC-07 |
| P-07 | Given 桌面/窄屏和键盘操作,When 阅读及展开界面,Then 正文无裁切、可见焦点、可退出弹层 | NFR-04 |
## 设计工具与数据边界
使用用户指定的 Superdesign,设计模型 Gemini 3.1 Pro。仅上传本轮独立编写的概念说明与虚构内容;上传现有前端源码的操作被自动审批拒绝,随后改用不含源码的概念设计。原项目源码不作为本次生成载荷。六份源码分析文件仅留本地供设计人员理解,不声称外部设计已与现有组件逐像素一致。
持久设计上下文及原型标识放 .superdesign/resume.json;临时生成日志/HTML在 .superdesign/tmp/,验证证据在 test-evidence/20260928-superdesign-prototype/。不修改现有应用路由、业务逻辑或部署。
## 实施边界
原型页面上的交互使用演示状态。源代码实现仍按 M3/M4 和项目流程落地;设计稿存在不证明接口、模型调用、权限或效果成立。视觉审阅与实际业务验收分别记录,不将作者目测称为独立验收。
## 已交付原型与检查
- [可点击预览](https://p.superdesign.dev/draft/7484f5c4-0415-4a87-a772-c42339680737)。
- [Superdesign 画布](https://superdesign.dev/teams/657ee591-1f83-46ec-8917-918dec0f0d4b/projects/88a8388d-b079-4118-833b-c8b396bf346f)。
- [本地 HTML](prototypes/prescreen-workbench.html) / [首页截图](prototypes/prescreen-overview.png)。HTML使用公开CDN样式和图标,首次打开需要网络。
草稿 7484f5c4-0415-4a87-a772-c42339680737,保存版本2。初稿由 Superdesign Gemini 3.1 Pro 生成,随后在同稿内直接补齐确定的交互、响应式和文案缺口;未额外生成视觉变体。云端回读HTML与本地已验文件一致;入库HTML仅清理3处行尾空白,内容与行为保持一致。
导出原型的20项行为检查通过:证据抽屉/关闭焦点、历史经验、空模拟守卫、假设结果与真实基线隔离、Jev禁用、本地/关闭切换、补件与验证弹窗、1440/1024/390三种宽度无文档横向溢出、移动导航及无运行脚本错误。首轮移动导航关闭失败,原因与修复留在fix-record.md,复验保留独立截图。同样20项检查在Superdesign线上预览再次通过,证据在remote-check-03/interaction-checks.json。
检查边界:使用独立无头浏览器验证演示状态;内置浏览器连接因本机环境故障未成功。作者截图自查不等于独立视觉评审;未完成全量无障碍审计,未连接业务接口或真实模型。现有生产源码不变,不重跑与此次原型无关的旧版应用套件。
+4
View File
@@ -59,3 +59,7 @@ RunSummary、EvidenceDrawer、CaseTimelinePanel、ExperienceEditor、ScenarioPan
## 缺口与门禁
needs-design-decision:完整状态色、间距尺度、响应断点、组件状态 token;owner 前端负责人;needed-by UI 实现前。需要 token 导出检查、对比度测试、键盘测试及文案 key 检查,结果纳入 test-evidence。
## 2026-09-28 原型方向补充
用户已选“深色导航+浅色工作区”。Superdesign 原型采用深绿导航、浅灰工作背景和白色证据面板,通过关系图与克制动效体现科技感。具体候选颜色、间距及交互在 .superdesign/concept-design-system.md;记录与验收见 [交互原型](12-prototype.md)。这些为原型设计决策,尚未写入生产CSS,以上已观察值的事实状态不变。
+1
View File
@@ -20,6 +20,7 @@
| [架构](02-architecture.md) | 已有能力、目标边界、职责与 ADR |
| [详细设计](03-detailed-design.md) | 候选接口、数据契约、状态、失败处理 |
| [专项判断模型切换](11-judgment-providers.md) | 无 Jev Key 的本地路径、统一契约、能力差异与切换验收 |
| [交互原型](12-prototype.md) | Superdesign 视觉方向、演示范围与原型验收 |
| [UI Spec](04-ui-spec.md) | 页面骨架、状态、权限和演示交互 |
| [设计契约](DESIGN.md) | 已观察视觉来源、语义 token 提案及缺口 |
| [实施计划](05-implementation-plan.md) | 核心代码迁移与分批交付 |
Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

+431
View File
@@ -0,0 +1,431 @@
<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>兴邦金租 - 智审工作台</title>
<meta content="same-origin" name="view-transition"/>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
// Navigation
nav: {
bg: '#102B27',
active: '#244D41',
text: '#F3F7F5',
muted: '#B1C6BE'
},
// Workspace
canvas: '#F3F5F4',
card: '#FFFFFF',
panel: '#F8FAF9',
border: '#DCE4DF',
// Typography
ink: {
main: '#182D26',
sub: '#52675C',
mute: '#64766C'
},
// Interactive
primary: {
DEFAULT: '#17634C',
hover: '#124F3D',
text: '#FFFFFF'
},
// Semantics
warning: {
text: '#805418',
bg: '#FBF2DF'
},
risk: {
text: '#A33C38',
bg: '#FBEFEC'
},
tech: {
line: '#226A7A',
bg: '#EDF5F7'
},
normal: {
text: '#17634C',
bg: '#EAF3EC'
}
},
fontFamily: {
sans: ['Microsoft YaHei', 'PingFang SC', 'sans-serif']
},
spacing: {
4: '4px',
8: '8px',
12: '12px',
16: '16px',
20: '20px',
24: '24px',
32: '32px',
40: '40px',
48: '48px'
},
borderRadius: {
button: '8px',
panel: '12px'
},
boxShadow: {
card: '0 4px 20px rgba(16,43,39,.04)'
},
transitionDuration: {
160: '160ms',
200: '200ms'
}
}
}
}
</script>
<style>
body {
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
background-color: #F3F5F4;
color: #182D26;
margin: 0;
padding: 0;
}
/* Focus rings */
*:focus-visible {
outline: 2px solid #17634C;
outline-offset: 2px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Scrollbars */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #DCE4DF;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #B1C6BE;
}
</style>
<style>
[hidden]{display:none!important}main,body [data-sd-id="9"]{min-width:0}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled,input:disabled{cursor:not-allowed}
#prototype-navigation{flex-shrink:0}#prototype-navigation a:hover,#prototype-navigation a.is-active{background:#244D41;border-radius:8px}#prototype-navigation a:first-child:hover{background:transparent}
body [data-sd-id="3"]{gap:16px}body [data-sd-id="5"]{font-size:12px}body [data-sd-id="6"]{white-space:nowrap}body [data-sd-id="11"],body [data-sd-id="14"],body [data-sd-id="20"]{flex-wrap:wrap;gap:16px}body [data-sd-id="22"]{font-size:24px}body [data-sd-id="12"]{font-weight:600}
body [data-sd-id="46"]{padding-left:0;padding-right:0;gap:12px}body [data-sd-id="46"] button{padding:12px;min-width:0}body [data-sd-id="60"]{padding:16px 12px;font-size:14px;max-width:104px}body [data-sd-id="42"]{min-height:280px}
#panel-overview body [data-sd-id="70"],#panel-overview body [data-sd-id="79"]{font-size:15px}.mobile-menu{display:none}
.proto-panel{background:#fff;border:1px solid #DCE4DF;border-radius:12px;padding:24px}.proto-panel h2,.center-dialog h2,.evidence-dialog h2{font-size:22px;font-weight:600;margin:8px 0 16px}.proto-panel h3,.evidence-dialog h3{font-size:16px;font-weight:600;margin:8px 0}.proto-panel p,.evidence-dialog p,.center-dialog p{font-size:15px;line-height:1.75;margin:8px 0 16px}.muted{color:#64766C}.section-eyebrow{font-size:12px;letter-spacing:1.5px;color:#52675C}.notice{padding:16px;border-radius:8px;background:#FBF2DF;color:#805418;font-size:14px;line-height:1.7;margin:16px 0}
.experience-timeline{list-style:none;padding:16px 0;margin:0}.experience-timeline li{display:flex;gap:16px;position:relative;padding-bottom:24px}.experience-timeline li:not(:last-child):before{content:'';position:absolute;left:19px;top:40px;bottom:0;width:1px;background:#DCE4DF}.step-num{width:40px;height:40px;display:grid;place-items:center;border:1px solid #DCE4DF;border-radius:50%;background:#F8FAF9;color:#17634C;font-size:14px;flex-shrink:0}.experience-timeline small{font-size:12px;color:#64766C}.condition-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}.condition-grid>div{background:#F8FAF9;border:1px solid #DCE4DF;border-radius:8px;padding:16px}.condition-grid strong{color:#17634C;font-size:15px}.condition-grid small{font-size:12px;color:#64766C}
.primary-button{background:#17634C;color:#fff;border:0;border-radius:8px;min-height:44px;padding:12px 24px;font-size:14px;font-weight:600;margin-top:16px}.primary-button:hover{background:#124F3D}.text-action{color:#17634C;font-size:14px;min-height:44px;text-align:left}.scenario-choice{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid #DCE4DF;border-radius:8px;margin:12px 0;cursor:pointer}.scenario-choice input{margin-top:5px;accent-color:#17634C;width:16px;height:16px}.scenario-choice small{display:block;color:#64766C;font-size:13px;margin-top:8px}
dialog{color:#182D26;border:1px solid #DCE4DF;box-shadow:0 16px 48px rgba(16,43,39,.16);padding:24px;background:#fff}dialog::backdrop{background:rgba(16,43,39,.32)}.center-dialog{width:min(560px,calc(100% - 32px));border-radius:12px;max-height:90vh}.evidence-dialog{height:100dvh;max-height:100dvh;width:min(520px,100%);max-width:100%;margin:0 0 0 auto;border-radius:12px 0 0 12px;border-right:0}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid #DCE4DF;margin-bottom:20px}.close-button{width:44px;height:44px;font-size:28px;color:#52675C;flex-shrink:0}.drawer-tabs{display:flex;gap:24px;border-bottom:1px solid #DCE4DF;margin-bottom:24px}.drawer-tabs button{min-height:44px;font-size:14px}.drawer-tabs [aria-selected=true]{border-bottom:2px solid #17634C;color:#17634C}blockquote{font-size:18px;line-height:1.9;border-left:3px solid #17634C;padding:24px;background:#F8FAF9;margin:24px 0}.checklist{list-style:decimal;padding-left:24px;font-size:15px;line-height:1.8}.checklist li{padding:8px 0}.checklist p{color:#52675C}
@media(max-width:1100px){body [data-sd-id="8"]{flex-direction:column}body [data-sd-id="82"]{width:100%;display:grid;grid-template-columns:1fr 1fr}body [data-sd-id="5"]{line-height:1.6}body [data-sd-id="6"]{display:none}}
@media(max-width:768px){.mobile-menu{display:flex;font-size:22px;min-width:44px;height:44px;align-items:center;justify-content:center}#prototype-navigation{display:none!important;position:fixed;top:68px;bottom:0;left:0;z-index:30;min-height:0!important;box-shadow:0 16px 48px rgba(16,43,39,.16)}#prototype-navigation.mobile-open{display:flex!important}body [data-sd-id="8"]{padding:20px}body [data-sd-id="3"]{padding:8px 12px}body [data-sd-id="12"]{font-size:24px}body [data-sd-id="19"]{padding:20px}body [data-sd-id="82"]{display:flex}body [data-sd-id="46"]{display:grid;grid-template-columns:1fr 1fr}body [data-sd-id="53"]{gap:12px}body [data-sd-id="60"]{max-width:none;text-align:center}body [data-sd-id="44"]{display:none}.condition-grid{grid-template-columns:1fr}body [data-sd-id="37"]{gap:24px}body [data-sd-id="26"]{gap:32px}body [data-sd-id="14"]{font-size:14px}.proto-panel{padding:20px}}
body [data-sd-id="60"]{min-width:112px;max-width:none;white-space:nowrap;text-align:center}input[type=radio]{accent-color:#17634C}#prototype-navigation>a.is-active{background:transparent}
</style></head>
<body>
<div class="min-h-screen flex w-full max-w-[1440px] mx-auto bg-canvas overflow-hidden" data-sd-id="1">
<!-- Sidebar Navigation -->
<aside id="prototype-navigation" style="width:216px;min-height:100vh;background:#102B27;color:#F3F7F5;display:flex;flex-direction:column;padding:32px 16px;font-family:'Microsoft YaHei','PingFang SC',sans-serif;box-sizing:border-box">
<a href="#overview" id="nav-link-0" style="display:block;padding:0 12px 32px;text-decoration:none;color:inherit"><strong style="font-size:22px;letter-spacing:2px">兴邦金租</strong><span style="display:block;font-size:12px;letter-spacing:3px;color:#B1C6BE;margin-top:8px">智审工作台</span></a>
<div style="padding:0 12px 12px;color:#B1C6BE;font-size:12px">业务工作区</div>
<nav aria-label="兴邦预审导航" style="display:flex;flex-direction:column;gap:8px">
<a class="flex items-center gap-3 rounded-lg px-3 py-3 text-sm" data-nav="overview" href="#overview" id="nav-link-1" style="text-decoration:none;color:inherit"><iconify-icon icon="lucide:layout-dashboard" style="width:18px;height:18px;font-size:18px"></iconify-icon>项目预审</a>
<a class="flex items-center gap-3 rounded-lg px-3 py-3 text-sm" data-nav="experience" href="#experience" id="nav-link-2" style="text-decoration:none;color:inherit"><iconify-icon icon="lucide:history" style="width:18px;height:18px;font-size:18px"></iconify-icon>历史经验</a>
<a class="flex items-center gap-3 rounded-lg px-3 py-3 text-sm" data-nav="simulation" href="#simulation" id="nav-link-3" style="text-decoration:none;color:inherit"><iconify-icon icon="lucide:git-branch" style="width:18px;height:18px;font-size:18px"></iconify-icon>推进沙盘</a>
<a class="flex items-center gap-3 rounded-lg px-3 py-3 text-sm" data-nav="validation" href="#validation" id="nav-link-4" style="text-decoration:none;color:inherit"><iconify-icon icon="lucide:chart-no-axes-combined" style="width:18px;height:18px;font-size:18px"></iconify-icon>验证看板</a>
</nav>
<div style="margin-top:auto;padding:32px 12px 0"><div style="border-top:1px solid #244D41;padding-top:24px"><span style="font-size:14px">演示评审员</span><p style="font-size:12px;line-height:1.6;color:#B1C6BE;margin:8px 0 0">历史经验驱动<br/>每一步判断都有依据</p></div></div>
</aside>
<!-- Main Workspace -->
<main class="flex-1 flex flex-col h-screen overflow-hidden" data-sd-id="2">
<!-- Persistent Notice Bar -->
<div class="bg-warning-bg text-warning-text px-32 py-12 text-[14px] flex items-center justify-between border-b border-warning-text/10 shrink-0" data-sd-id="3"><button aria-expanded="false" aria-label="打开导航" class="mobile-menu" id="mobile-menu"><iconify-icon icon="lucide:menu"></iconify-icon></button>
<div class="flex items-center gap-8" data-sd-id="4">
<iconify-icon icon="lucide:alert-circle"></iconify-icon>
<span data-sd-id="5">原型演示 · 未连接真实数据与模型。所有材料、判断、数值为虚构演示。综合意见不是正式审批意见。</span>
</div>
<div class="flex items-center gap-16" data-sd-id="6">
<span class="flex items-center gap-4" data-sd-id="7">
<iconify-icon icon="lucide:user"></iconify-icon>
演示评审员
</span>
</div>
</div>
<!-- Scrollable Content Area -->
<div class="flex-1 overflow-y-auto p-32 flex gap-24 relative" data-sd-id="8">
<!-- Left Main Column -->
<div class="flex-1 flex flex-col gap-24" data-sd-id="9">
<!-- Header / Title -->
<header class="flex flex-col gap-12" data-sd-id="10">
<div class="flex items-center gap-16" data-sd-id="11">
<h1 class="text-[28px] font-bold leading-tight" data-sd-id="12">恒远精密设备有限公司</h1>
<span class="bg-normal-bg text-normal-text px-12 py-4 rounded-full text-[12px] font-medium border border-normal-text/20" data-sd-id="13">项目 DEMO-026</span>
</div>
<div class="flex items-center gap-24 text-[16px] text-ink-sub" data-sd-id="14">
<span class="flex items-center gap-8" data-sd-id="15">
<iconify-icon icon="lucide:briefcase"></iconify-icon>
设备直租
</span>
<span class="flex items-center gap-8" data-sd-id="16">
<iconify-icon icon="lucide:coins"></iconify-icon>
融资 3,000 万元
</span>
<span class="flex items-center gap-8" data-sd-id="17">
<iconify-icon icon="lucide:calendar"></iconify-icon>
36 个月
</span>
<span class="flex items-center gap-8" data-sd-id="18">
<iconify-icon icon="lucide:settings"></iconify-icon>
装备制造
</span>
</div>
</header>
<!-- Main Judgement Hero -->
<section class="bg-card rounded-panel p-32 shadow-card border border-border flex flex-col gap-24" data-sd-id="19">
<div class="flex justify-between items-start" data-sd-id="20">
<div class="flex flex-col gap-8" data-sd-id="21">
<h2 class="text-[24px] font-bold text-ink-main" data-sd-id="22" id="real-recommendation">主审意见:补充材料后再判断</h2>
<p class="text-[16px] text-ink-sub max-w-2xl leading-relaxed" data-sd-id="23">
经营现金流与回款说明存在待核实差异,建议先补齐两项关键证据,再推进评审。
</p>
</div>
<div class="flex gap-16 items-start shrink-0" data-sd-id="24">
<button class="h-[44px] px-24 bg-primary text-primary-text rounded-button text-[14px] font-medium transition-colors duration-160 hover:bg-primary-hover flex items-center gap-8 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary" data-sd-id="25" id="btn-generate-list">
<iconify-icon icon="lucide:list-checks"></iconify-icon>
生成补件清单
</button>
</div>
</div>
<div class="flex gap-40 pt-24 border-t border-border mt-8" data-sd-id="26">
<div class="flex flex-col gap-4" data-sd-id="27">
<span class="text-[12px] text-ink-mute uppercase tracking-wider" data-sd-id="28">引用材料</span>
<span class="text-[20px] font-medium" data-sd-id="29">6 份</span>
</div>
<div class="flex flex-col gap-4" data-sd-id="30">
<span class="text-[12px] text-ink-mute uppercase tracking-wider" data-sd-id="31">参考经验</span>
<span class="text-[20px] font-medium" data-sd-id="32">3 条</span>
</div>
<div class="flex flex-col gap-4" data-sd-id="33">
<span class="text-[12px] text-warning-text uppercase tracking-wider font-medium" data-sd-id="34">待补充项</span>
<span class="text-[20px] font-medium text-warning-text" data-sd-id="35">2 项</span>
</div>
</div>
</section>
<!-- Main Content Tabs -->
<section class="flex flex-col gap-24 flex-1" data-sd-id="36">
<div aria-label="预审内容" class="flex items-center gap-32 border-b border-border" data-sd-id="37" role="tablist">
<button aria-controls="panel-overview" aria-selected="true" class="pb-12 text-[16px] font-medium text-primary border-b-2 border-primary" data-sd-id="38" data-tab="overview" id="tab-overview" role="tab">综合预审</button>
<button aria-controls="panel-experience" aria-selected="false" class="pb-12 text-[16px] font-medium text-ink-sub hover:text-ink-main transition-colors duration-160 border-b-2 border-transparent" data-sd-id="39" data-tab="experience" id="tab-experience" role="tab">历史经验</button>
<button aria-controls="panel-simulation" aria-selected="false" class="pb-12 text-[16px] font-medium text-ink-sub hover:text-ink-main transition-colors duration-160 border-b-2 border-transparent" data-sd-id="40" data-tab="simulation" id="tab-simulation" role="tab">推进沙盘</button>
</div>
<!-- Tab Panel: 综合预审 -->
<div aria-labelledby="tab-overview" class="flex flex-col gap-24" data-sd-id="41" id="panel-overview" role="tabpanel">
<!-- Evidence Graph Placeholder -->
<div class="bg-panel rounded-panel p-24 border border-border flex flex-col gap-16 min-h-[300px] relative overflow-hidden" data-sd-id="42">
<h3 class="text-[14px] font-medium text-ink-main flex items-center gap-8" data-sd-id="43">
<iconify-icon icon="lucide:git-merge"></iconify-icon>
证据关系图
</h3>
<!-- Simulated Graph SVG -->
<div class="absolute inset-0 top-[60px] flex items-center justify-center pointer-events-none opacity-50" data-sd-id="44">
<svg data-sd-id="45" height="100%" preserveaspectratio="xMidYMid meet" viewbox="0 0 800 200" width="100%">
<path d="M 100 100 L 250 100 L 400 50 L 600 100" fill="none" stroke="#226A7A" stroke-dasharray="4 4" stroke-width="2"></path>
<path d="M 250 100 L 400 150 L 600 100" fill="none" stroke="#805418" stroke-width="3"></path>
<circle cx="100" cy="100" fill="#17634C" r="6"></circle>
<circle cx="250" cy="100" fill="#17634C" r="6"></circle>
<circle cx="400" cy="50" fill="#226A7A" r="6"></circle>
<circle cx="400" cy="150" fill="#805418" r="6"></circle>
<circle cx="600" cy="100" fill="#182D26" r="8"></circle>
</svg>
</div>
<div class="flex-1 flex items-center justify-between px-48 z-10" data-sd-id="46">
<button class="bg-card border border-border px-16 py-12 rounded-panel shadow-sm hover:border-primary transition-colors text-[14px] text-ink-main flex flex-col gap-4 focus-visible:ring-2 focus-visible:ring-primary outline-none" data-sd-id="47" id="node-1">
<span class="font-medium" data-sd-id="48">回款说明</span>
<span class="text-[12px] text-ink-mute" data-sd-id="49">已提供</span>
</button>
<button class="bg-card border border-border px-16 py-12 rounded-panel shadow-sm hover:border-primary transition-colors text-[14px] text-ink-main flex flex-col gap-4 focus-visible:ring-2 focus-visible:ring-primary outline-none" data-sd-id="50" id="node-2">
<span class="font-medium" data-sd-id="51">账期变化解释</span>
<span class="text-[12px] text-ink-mute" data-sd-id="52">待核实</span>
</button>
<div class="flex flex-col gap-40" data-sd-id="53">
<button class="bg-tech-bg border border-tech-line px-16 py-12 rounded-panel shadow-sm hover:bg-tech-bg/80 transition-colors text-[14px] text-ink-main flex flex-col gap-4 focus-visible:ring-2 focus-visible:ring-tech-line outline-none" data-sd-id="54" id="node-3">
<span class="font-medium" data-sd-id="55">专项支持</span>
<span class="text-[12px] text-tech-line" data-sd-id="56">不足</span>
</button>
<button class="bg-warning-bg border border-warning-text/30 px-16 py-12 rounded-panel shadow-sm hover:bg-warning-bg/80 transition-colors text-[14px] text-ink-main flex flex-col gap-4 focus-visible:ring-2 focus-visible:ring-warning-text outline-none" data-sd-id="57" id="node-4">
<span class="font-medium" data-sd-id="58">银行流水匹配</span>
<span class="text-[12px] text-warning-text font-medium" data-sd-id="59">待补充</span>
</button>
</div>
<div class="bg-card border-2 border-ink-main px-24 py-16 rounded-panel shadow-sm text-[16px] font-bold text-ink-main" data-sd-id="60">
主审补件建议
</div>
</div>
</div>
<!-- Issues List -->
<div class="flex flex-col gap-16" data-sd-id="61">
<h3 class="text-[20px] font-bold text-ink-main" data-sd-id="62">关键问题核实</h3>
<div class="bg-card rounded-panel border border-border overflow-hidden" data-sd-id="63">
<div class="p-20 border-b border-border hover:bg-panel transition-colors flex items-start gap-16" data-sd-id="64">
<div class="mt-4 w-8 h-8 rounded-full bg-warning-text shrink-0" data-sd-id="65"></div>
<div class="flex-1 flex flex-col gap-8" data-sd-id="66">
<div class="flex justify-between items-center" data-sd-id="67">
<h4 class="text-[16px] font-medium text-ink-main" data-sd-id="68">回款依据尚不完整</h4>
<span class="text-[12px] text-warning-text bg-warning-bg px-8 py-2 rounded-full border border-warning-text/20" data-sd-id="69">待核实</span>
</div>
<p class="text-[14px] text-ink-sub leading-relaxed" data-sd-id="70">主要客户账期延长,需通过近六个月银行流水穿透核实实际回款情况,当前证据链断裂。</p>
<div class="flex gap-12 mt-8" data-sd-id="71">
<button class="text-[12px] text-primary hover:text-primary-hover font-medium flex items-center gap-4" data-sd-id="72" id="btn-open-drawer-1">
<iconify-icon icon="lucide:file-text"></iconify-icon> 查看原文与依据
</button>
</div>
</div>
</div>
<div class="p-20 hover:bg-panel transition-colors flex items-start gap-16" data-sd-id="73">
<div class="mt-4 w-8 h-8 rounded-full bg-warning-text shrink-0" data-sd-id="74"></div>
<div class="flex-1 flex flex-col gap-8" data-sd-id="75">
<div class="flex justify-between items-center" data-sd-id="76">
<h4 class="text-[16px] font-medium text-ink-main" data-sd-id="77">设备权属证明待核实</h4>
<span class="text-[12px] text-warning-text bg-warning-bg px-8 py-2 rounded-full border border-warning-text/20" data-sd-id="78">待核实</span>
</div>
<p class="text-[14px] text-ink-sub leading-relaxed" data-sd-id="79">拟租赁设备发票与实际采购清单存在部分品名不符,需核实底层资产真实权属。</p>
<div class="flex gap-12 mt-8" data-sd-id="80">
<button class="text-[12px] text-primary hover:text-primary-hover font-medium flex items-center gap-4" data-sd-id="81">
<iconify-icon icon="lucide:history"></iconify-icon> 查看历史依据
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<section aria-labelledby="tab-experience" class="proto-panel" hidden="" id="panel-experience" role="tabpanel">
<div class="section-eyebrow">EXPERIENCE / 历史示例</div><h2>一条经验,如何改变判断</h2>
<p class="muted">案例 H-018 · 制造业设备直租 · 虚构演示案例</p>
<ol class="experience-timeline">
<li><span class="step-num">01</span><div><small>初审关注</small><h3>利润增长,经营现金流偏弱</h3><p>最初意见:暂不能确认还款来源,要求说明回款变化。</p></div></li>
<li><span class="step-num">02</span><div><small>评审问询</small><h3>账期延长,还是回款能力下降?</h3><p>要求提供客户合同、应收账龄与逐笔回款记录,验证解释。</p></div></li>
<li><span class="step-num">03</span><div><small>证据补充</small><h3>银行流水与应收明细逐笔匹配</h3><p>历史示例中,补充材料支持主要客户正常结算周期变化。</p><button class="text-action" data-open-evidence="history">查看历史证据示例 ↗</button></div></li>
<li><span class="step-num">04</span><div><small>判断变化</small><h3>待核实 → 附条件推进(历史示例)</h3><p>约定持续跟踪回款。此历史意见不能直接用于当前项目。</p></div></li>
</ol>
<div class="condition-grid"><div><strong>适用条件</strong><p>客户结构稳定,回款与应收记录可逐笔匹配。</p></div><div><strong>例外边界</strong><p>收入集中、关联回款未穿透或材料真实性未核实。</p></div></div>
<div class="notice">条件相似不等于结论相同。当前项目仍缺银行流水与权属核验。</div>
</section>
<section aria-labelledby="tab-simulation" class="proto-panel" hidden="" id="panel-simulation" role="tabpanel">
<div class="section-eyebrow">SCENARIO / 条件推演</div><h2>补齐证据之后,会发生什么?</h2>
<div class="notice">模拟结果,不改变真实项目。以下仅假设证据真实且完成核验。</div>
<p class="muted">选择准备补充的材料,比较哪些争议可能得到回应。</p>
<label class="scenario-choice"><input id="assume-bank" type="checkbox"/> <span><strong>补充近六个月银行流水</strong><small>假设逐笔匹配后支持账期变化解释</small></span></label>
<label class="scenario-choice"><input id="assume-title" type="checkbox"/> <span><strong>补充设备权属证明</strong><small>假设合同、发票与设备清单一致且经核验</small></span></label>
<button class="primary-button" id="run-simulation">运行模拟</button><p aria-live="polite" class="muted" id="simulation-feedback"></p>
<div class="condition-grid" hidden="" id="simulation-comparison"><div><small>真实预审 · 保持不变</small><h3>2 项待核实</h3><p>补充材料后再判断</p></div><div><small>模拟情景 · 假设成立时</small><h3 id="sim-remaining"></h3><p id="sim-explanation"></p><strong>仍需人工复核</strong></div></div>
<button class="text-action" data-tab="overview">← 返回真实预审</button>
</section>
</section>
</div>
<!-- Right Sidebar (Action Panel) -->
<aside class="w-[320px] shrink-0 flex flex-col gap-24" data-sd-id="82">
<!-- Next Steps Action Card -->
<div class="bg-card rounded-panel p-24 border border-border shadow-card flex flex-col gap-16" data-sd-id="83">
<h3 class="text-[16px] font-bold text-ink-main flex items-center gap-8" data-sd-id="84">
<iconify-icon icon="lucide:arrow-right-circle"></iconify-icon>
下一步行动
</h3>
<div class="flex flex-col gap-12" data-sd-id="85">
<label class="flex items-start gap-12 p-12 bg-panel rounded-button border border-border cursor-pointer hover:border-primary transition-colors" data-sd-id="86">
<span class="text-primary text-[14px] font-bold shrink-0">1</span>
<div class="flex flex-col gap-4" data-sd-id="88">
<span class="text-[14px] font-medium text-ink-main" data-sd-id="89">补充近六个月银行流水</span>
<span class="text-[12px] text-ink-mute" data-sd-id="90">用于核实账期延长后的实际回款节奏</span>
</div>
</label>
<label class="flex items-start gap-12 p-12 bg-panel rounded-button border border-border cursor-pointer hover:border-primary transition-colors" data-sd-id="91">
<span class="text-primary text-[14px] font-bold shrink-0">2</span>
<div class="flex flex-col gap-4" data-sd-id="93">
<span class="text-[14px] font-medium text-ink-main" data-sd-id="94">核实设备权属</span>
<span class="text-[12px] text-ink-mute" data-sd-id="95">提供品名不符的补充说明及采购合同附件</span>
</div>
</label>
</div>
<button class="w-full h-[44px] mt-8 bg-card border border-primary text-primary rounded-button text-[14px] font-medium transition-colors duration-160 hover:bg-primary/5 flex items-center justify-center gap-8 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary" data-sd-id="96">
<iconify-icon icon="lucide:play"></iconify-icon>
模拟补件 (沙盘)
</button>
</div>
<!-- Model Config Card -->
<div class="bg-panel rounded-panel p-24 border border-border flex flex-col gap-16" data-sd-id="97">
<div class="flex justify-between items-center" data-sd-id="98">
<h3 class="text-[14px] font-medium text-ink-main" data-sd-id="99">专项核查模型</h3>
<button class="text-ink-mute hover:text-primary transition-colors" data-sd-id="100" title="验证看板">
<iconify-icon icon="lucide:bar-chart-2"></iconify-icon>
</button>
</div>
<div class="flex flex-col gap-8" data-sd-id="101">
<label class="flex justify-between items-center p-8 -mx-8 rounded-button hover:bg-black/5 cursor-pointer" data-sd-id="102">
<span class="text-[14px] text-ink-main" data-sd-id="103">本地开源模型 (演示)</span>
<input aria-label="本地开源模型(演示)" checked="" class="text-primary focus:ring-primary" data-sd-id="104" name="model" type="radio" value="local"/>
</label>
<label class="flex justify-between items-center p-8 -mx-8 rounded-button hover:bg-black/5 cursor-pointer opacity-50" data-sd-id="105" title="未配置官方服务">
<span class="text-[14px] text-ink-main" data-sd-id="106">Jev官方服务(未配置)</span>
<input aria-label="Jev官方服务(未配置)" class="text-primary focus:ring-primary" data-sd-id="107" disabled="" name="model" type="radio" value="jev"/>
</label>
<label class="flex justify-between items-center p-8 -mx-8 rounded-button hover:bg-black/5 cursor-pointer" data-sd-id="108">
<span class="text-[14px] text-ink-main" data-sd-id="109">关闭专项核查</span>
<input aria-label="关闭专项核查" class="text-primary focus:ring-primary" data-sd-id="110" name="model" type="radio" value="off"/>
</label>
</div>
<p aria-live="polite" class="text-[12px] text-ink-mute mt-4 border-t border-border pt-12" data-sd-id="111" id="model-status">
仅演示。无真实模型请求。主审仍可基于证据给出有限意见。
</p>
</div>
</aside>
</div>
</main>
<dialog aria-labelledby="evidence-title" class="evidence-dialog" id="evidence-dialog">
<header class="dialog-header"><div><div class="section-eyebrow">EVIDENCE / 演示材料</div><h2 id="evidence-title">回款说明与判断依据</h2></div><button aria-label="关闭证据抽屉" class="close-button" data-close="evidence-dialog">×</button></header>
<div aria-label="证据视图" class="drawer-tabs" role="tablist"><button aria-controls="evidence-source" aria-selected="true" data-evidence-tab="source" id="evidence-source-tab" role="tab">原文片段</button><button aria-controls="evidence-basis" aria-selected="false" data-evidence-tab="basis" id="evidence-basis-tab" role="tab">判断依据</button></div>
<section aria-labelledby="evidence-source-tab" id="evidence-source" role="tabpanel"><p class="muted" id="source-location">回款说明.pdf · 第3页 · 虚构演示</p><blockquote id="source-quote">主要客户账期延长,预计下一季度集中回款。</blockquote><div class="notice" id="source-gap">尚未提供对应银行流水,不能仅凭解释确认回款。</div><p class="muted">来源可定位不代表材料真实性已经核验。</p></section>
<section aria-labelledby="evidence-basis-tab" hidden="" id="evidence-basis" role="tabpanel"><h3>从解释到判断,仍缺一环</h3><p id="basis-copy">现有说明提出了账期变化的解释,但需要银行流水与应收账龄交叉核验。专项判断不能替代主审综合意见。</p><h3>建议下一步</h3><p id="basis-next">补充近六个月银行流水,逐笔匹配主要客户回款。</p></section>
</dialog>
<dialog aria-labelledby="checklist-title" class="center-dialog" id="checklist-dialog"><header class="dialog-header"><div><div class="section-eyebrow">NEXT ACTION / 演示清单</div><h2 id="checklist-title">项目补件清单</h2></div><button aria-label="关闭补件清单" class="close-button" data-close="checklist-dialog">×</button></header><ol class="checklist"><li><strong>近六个月银行流水与应收账龄</strong><p>标注主要客户逐笔回款,说明与合同账期的对应关系。</p></li><li><strong>设备权属材料</strong><p>提供采购合同、发票和设备清单,并解释品名差异。</p></li></ol><div class="notice">DEMO-026 · 虚构演示,未发送至任何业务系统。</div><button class="primary-button" id="copy-checklist">复制清单</button><p aria-live="polite" id="copy-status"></p></dialog>
<dialog aria-labelledby="validation-title" class="center-dialog" id="validation-dialog"><header class="dialog-header"><div><div class="section-eyebrow">VALIDATION / 验证计划</div><h2 id="validation-title">待开展脱敏盲测</h2></div><button aria-label="关闭验证计划" class="close-button" data-close="validation-dialog">×</button></header><p>先冻结样本和预测,再揭示专家参考意见。当前没有真实验证结果。</p><ol class="checklist"><li>基础预审:不使用历史经验</li><li>经验增强:主审结合已审核经验</li><li>专项增强:分别验证本地模型与 Jev(可选)</li></ol><div class="notice">关注重大问题漏检、无依据结论、有效补件与耗时。阈值在试点前约定。</div></dialog>
<script>
(()=>{
const $=s=>document.querySelector(s),all=s=>[...document.querySelectorAll(s)],sd=n=>$('[data-sd-id="'+n+'"]');
let active='overview'; const openers=new WeakMap();
function showDialog(id){const d=$('#'+id);openers.set(d,document.activeElement);d.showModal();d.querySelector('button').focus();}
all('dialog').forEach(d=>{d.addEventListener('close',()=>openers.get(d)?.focus());d.addEventListener('click',e=>{if(e.target===d){const b=d.getBoundingClientRect();if(e.clientX<b.left||e.clientX>b.right||e.clientY<b.top||e.clientY>b.bottom)d.close();}})});
all('[data-close]').forEach(b=>b.onclick=()=>$('#'+b.dataset.close).close());
function tab(name){if(name==='validation'){showDialog('validation-dialog');return;}if(!['overview','experience','simulation'].includes(name))return;active=name;all('[role=tabpanel][id^="panel-"]').forEach(p=>p.hidden=p.id!=='panel-'+name);all('[role=tab][data-tab]').forEach(b=>{const selected=b.dataset.tab===name;b.setAttribute('aria-selected',selected);b.tabIndex=selected?0:-1;b.classList.toggle('text-primary',selected);b.classList.toggle('border-primary',selected);b.classList.toggle('border-transparent',!selected)});all('[data-nav]').forEach(a=>a.classList.toggle('is-active',a.dataset.nav===name));$('#prototype-navigation').classList.remove('mobile-open');$('#mobile-menu').setAttribute('aria-expanded','false');}
all('[data-tab]').forEach(b=>b.onclick=()=>tab(b.dataset.tab));all('[data-nav]').forEach(a=>a.onclick=e=>{e.preventDefault();tab(a.dataset.nav)});
all('[role=tab][data-tab]').forEach((b,i)=>b.addEventListener('keydown',e=>{if(!['ArrowLeft','ArrowRight','Home','End'].includes(e.key))return;e.preventDefault();const tabs=all('[role=tab][data-tab]');const j=e.key==='Home'?0:e.key==='End'?2:(i+(e.key==='ArrowRight'?1:2))%3;tabs[j].click();tabs[j].focus()}));
$('#mobile-menu').onclick=()=>{const on=$('#prototype-navigation').classList.toggle('mobile-open');$('#mobile-menu').setAttribute('aria-expanded',on)};
function evidence(kind='current'){const history=kind==='history';$('#evidence-title').textContent=history?'历史回款证据示例':'回款说明与判断依据';$('#source-location').textContent=history?'历史案例 H-018 · 补件记录 · 虚构演示':'回款说明.pdf · 第3页 · 虚构演示';$('#source-quote').textContent=history?'历史示例中,主要客户实际回款与应收明细逐笔匹配。':'主要客户账期延长,预计下一季度集中回款。';$('#source-gap').textContent=history?'仅为说明经验形成过程的虚构材料,不能替代当前项目核查。':'尚未提供对应银行流水,不能仅凭解释确认回款。';$('#basis-copy').textContent=history?'历史案例补充证据支持当时的解释,适用前提是客户结构稳定且回款可逐笔匹配。当前项目尚未满足同样的证据条件。':'现有说明提出了账期变化的解释,但需要银行流水与应收账龄交叉核验。专项判断不能替代主审综合意见。';$('#evidence-source-tab').click();showDialog('evidence-dialog');}
['node-1','node-2','node-3','node-4','btn-open-drawer-1'].forEach(id=>$('#'+id).onclick=()=>evidence());all('[data-open-evidence]').forEach(b=>b.onclick=()=>evidence(b.dataset.openEvidence));
all('[data-evidence-tab]').forEach(b=>b.onclick=()=>{all('[data-evidence-tab]').forEach(x=>x.setAttribute('aria-selected',x===b));$('#evidence-source').hidden=b.dataset.evidenceTab!=='source';$('#evidence-basis').hidden=b.dataset.evidenceTab!=='basis'});
$('#btn-generate-list').onclick=()=>showDialog('checklist-dialog');sd(81).onclick=()=>tab('experience');sd(96).onclick=()=>{tab('simulation');$('#assume-bank').focus()};sd(100).onclick=()=>showDialog('validation-dialog');
all('input[name=model]').forEach(r=>r.onchange=()=>{const off=r.value==='off';$('#model-status').textContent=off?'专项核查已关闭。主审仍可基于证据与经验给出有限意见。':'本地开源模型(演示)。无真实模型请求;主审负责综合预审意见。';sd(56).textContent=off?'未执行':'不足';sd(55).textContent=off?'专项核查':'专项支持'});
$('#run-simulation').onclick=()=>{const count=Number($('#assume-bank').checked)+Number($('#assume-title').checked);if(!count){$('#simulation-feedback').textContent='请至少选择一项假设补件。';$('#simulation-comparison').hidden=true;return;}$('#simulation-feedback').textContent='模拟完成 · 假设证据真实且完成核验,未修改真实项目。';$('#sim-remaining').textContent=(2-count)+' 项仍待核实(模拟)';$('#sim-explanation').textContent=count===2?'两项争议在假设下得到回应,不代表已获批准。':'仅所选事项在假设下得到回应,其余证据仍需补充。';$('#simulation-comparison').hidden=false;};
all('#panel-simulation input').forEach(x=>x.onchange=()=>{$('#simulation-comparison').hidden=true;$('#simulation-feedback').textContent='假设已修改,请重新运行模拟。'});
$('#copy-checklist').onclick=async()=>{const text='DEMO-026 演示补件清单\n1.近六个月银行流水及应收账龄,逐笔匹配主要客户回款。\n2.设备采购合同、发票和清单,解释品名差异。';try{await navigator.clipboard.writeText(text);$('#copy-status').textContent='演示清单已复制。';}catch{$('#copy-status').textContent='浏览器未允许复制,请选择上方清单文字手动复制。'}};
tab('overview');
})();
</script></div>
</body></html>