1xiny
885 lines
27 KiB
HTML
885 lines
27 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>Issue Hub AI Redesign Board</title>
|
|
<style>
|
|
:root {
|
|
--ink: #101828;
|
|
--muted: #667085;
|
|
--line: #d9e1ec;
|
|
--soft: #f5f7fb;
|
|
--panel: #ffffff;
|
|
--blue: #2563eb;
|
|
--green: #12a37f;
|
|
--orange: #f97316;
|
|
--red: #ef4444;
|
|
--purple: #6d5dfc;
|
|
font-family:
|
|
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
|
|
color: var(--ink);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: #eef2f7;
|
|
}
|
|
|
|
.board {
|
|
width: 1800px;
|
|
min-height: 2860px;
|
|
padding: 34px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0)),
|
|
#eef2f7;
|
|
}
|
|
|
|
.board-header {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: end;
|
|
gap: 28px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.board-header h1 {
|
|
margin: 0 0 8px;
|
|
font-size: 34px;
|
|
line-height: 1.12;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.board-header p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.legend {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
color: #475467;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.legend span {
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.78);
|
|
}
|
|
|
|
.concept-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 24px;
|
|
}
|
|
|
|
.concept {
|
|
display: grid;
|
|
grid-template-columns: 360px 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
overflow: hidden;
|
|
border: 1px solid #d5deeb;
|
|
border-radius: 18px;
|
|
background: var(--panel);
|
|
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
|
|
}
|
|
|
|
.concept-head {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 12px;
|
|
align-items: start;
|
|
padding: 18px 18px 14px;
|
|
border-right: 1px solid #e6edf5;
|
|
border-bottom: 1px solid #e6edf5;
|
|
}
|
|
|
|
.tag {
|
|
display: grid;
|
|
width: 36px;
|
|
height: 36px;
|
|
place-items: center;
|
|
border-radius: 10px;
|
|
color: #fff;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.tag.a {
|
|
background: var(--blue);
|
|
}
|
|
|
|
.tag.b {
|
|
background: var(--green);
|
|
}
|
|
|
|
.tag.c {
|
|
background: var(--purple);
|
|
}
|
|
|
|
.concept-head h2 {
|
|
margin: 0 0 4px;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.concept-head p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.mock {
|
|
grid-column: 2;
|
|
grid-row: 1 / span 2;
|
|
height: 760px;
|
|
background: #f7f9fc;
|
|
padding: 14px;
|
|
}
|
|
|
|
.app {
|
|
display: grid;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border: 1px solid #d8e1ec;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
}
|
|
|
|
.app.a-layout {
|
|
grid-template-columns: 104px 1fr 340px;
|
|
}
|
|
|
|
.app.b-layout {
|
|
grid-template-columns: 104px 1fr;
|
|
}
|
|
|
|
.app.c-layout {
|
|
grid-template-columns: 96px 330px 1fr 300px;
|
|
}
|
|
|
|
.rail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 14px 10px;
|
|
background: #101828;
|
|
color: #d0d5dd;
|
|
}
|
|
|
|
.logo {
|
|
display: grid;
|
|
width: 34px;
|
|
height: 34px;
|
|
place-items: center;
|
|
margin: 0 auto 10px;
|
|
border-radius: 9px;
|
|
background: #2563eb;
|
|
color: #fff;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.nav-pill {
|
|
padding: 8px 7px;
|
|
border-radius: 9px;
|
|
font-size: 11px;
|
|
text-align: center;
|
|
}
|
|
|
|
.nav-pill.active {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
color: #fff;
|
|
}
|
|
|
|
.main {
|
|
min-width: 0;
|
|
padding: 18px;
|
|
background: #fbfcfe;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.topbar h3 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 30px;
|
|
padding: 0 11px;
|
|
border: 1px solid #cfd8e5;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
color: #344054;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.btn.primary {
|
|
border-color: transparent;
|
|
background: var(--blue);
|
|
color: #fff;
|
|
}
|
|
|
|
.btn.green {
|
|
border-color: transparent;
|
|
background: var(--green);
|
|
color: #fff;
|
|
}
|
|
|
|
.focus-strip {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: 12px;
|
|
align-items: center;
|
|
padding: 14px;
|
|
border: 1px solid #dbe4ef;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
}
|
|
|
|
.priority {
|
|
display: grid;
|
|
width: 44px;
|
|
height: 34px;
|
|
place-items: center;
|
|
border: 1px solid #ffb4aa;
|
|
border-radius: 8px;
|
|
background: #fff1ef;
|
|
color: #dd1d1d;
|
|
font-size: 17px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.focus-strip strong {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
color: #667085;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.why-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.why {
|
|
padding: 10px;
|
|
border: 1px solid #e1e8f0;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.why span {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
color: #667085;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.why strong {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.table,
|
|
.list {
|
|
overflow: hidden;
|
|
border: 1px solid #e1e8f0;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
}
|
|
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: 48px 1fr 78px 64px;
|
|
gap: 8px;
|
|
align-items: center;
|
|
min-height: 39px;
|
|
padding: 0 10px;
|
|
border-bottom: 1px solid #edf1f6;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.row.header {
|
|
min-height: 32px;
|
|
color: #667085;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.row.selected {
|
|
background: #eef5ff;
|
|
box-shadow: inset 3px 0 0 var(--blue);
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 32px;
|
|
height: 22px;
|
|
border-radius: 7px;
|
|
background: #eef2ff;
|
|
color: #3154d4;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.badge.hot {
|
|
background: #fff1ef;
|
|
color: #dd1d1d;
|
|
}
|
|
|
|
.badge.warn {
|
|
background: #fff7ed;
|
|
color: #ea580c;
|
|
}
|
|
|
|
.side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 14px;
|
|
border-left: 1px solid #e1e8f0;
|
|
background: #fff;
|
|
}
|
|
|
|
.side h4 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.section {
|
|
display: grid;
|
|
gap: 7px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #edf1f6;
|
|
}
|
|
|
|
.section:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.small-label {
|
|
color: #667085;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.paragraph {
|
|
color: #344054;
|
|
font-size: 12px;
|
|
line-height: 1.48;
|
|
}
|
|
|
|
.check {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
color: #344054;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.box {
|
|
padding: 10px;
|
|
border: 1px solid #e1e8f0;
|
|
border-radius: 10px;
|
|
background: #fbfcfe;
|
|
}
|
|
|
|
.capture {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
border: 1px solid #dbe4ef;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
}
|
|
|
|
.textarea {
|
|
height: 86px;
|
|
padding: 10px;
|
|
border: 1px solid #d9e1ec;
|
|
border-radius: 10px;
|
|
color: #98a2b3;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.status-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 12px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.lane {
|
|
min-height: 488px;
|
|
padding: 10px;
|
|
border: 1px solid #e1e8f0;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
}
|
|
|
|
.lane h4 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 0 10px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.ticket {
|
|
display: grid;
|
|
gap: 7px;
|
|
padding: 10px;
|
|
border: 1px solid #e5ebf2;
|
|
border-radius: 10px;
|
|
background: #fbfcfe;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ticket + .ticket {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.ticket strong {
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.ticket .meta {
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.inbox-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #667085;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ai-queue {
|
|
padding: 14px;
|
|
border-right: 1px solid #e1e8f0;
|
|
background: #fff;
|
|
}
|
|
|
|
.ai-queue h3 {
|
|
margin: 0 0 10px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.rank-card {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
border: 1px solid #e1e8f0;
|
|
border-radius: 12px;
|
|
background: #fbfcfe;
|
|
}
|
|
|
|
.rank-card + .rank-card {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.rank-card.active {
|
|
border-color: #adc8ff;
|
|
background: #eef5ff;
|
|
}
|
|
|
|
.rank-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.explain {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.ai-panel {
|
|
min-height: 170px;
|
|
padding: 12px;
|
|
border: 1px solid #e1e8f0;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
}
|
|
|
|
.ai-panel.purple {
|
|
border-color: #ddd6fe;
|
|
background: #f7f5ff;
|
|
}
|
|
|
|
.action-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.action-tile {
|
|
padding: 10px;
|
|
border: 1px solid #e1e8f0;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
.notes {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 16px 18px 18px;
|
|
align-content: end;
|
|
border-right: 1px solid #e6edf5;
|
|
border-top: 0;
|
|
background: #fbfcfe;
|
|
}
|
|
|
|
.notes h3 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.notes p {
|
|
margin: 0;
|
|
color: #667085;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.chip {
|
|
padding: 5px 8px;
|
|
border-radius: 999px;
|
|
background: #eef2f7;
|
|
color: #344054;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.chip.risk {
|
|
background: #fff1ef;
|
|
color: #dd1d1d;
|
|
}
|
|
|
|
.chip.good {
|
|
background: #e9fbf5;
|
|
color: #0b8f6e;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="board">
|
|
<header class="board-header">
|
|
<div>
|
|
<h1>Issue Hub AI 界面重设计方向</h1>
|
|
<p>目标：把“问题记录工具”升级成“开发者问题处理驾驶舱”，降低寻找下一件事的心智负担。</p>
|
|
</div>
|
|
<div class="legend">
|
|
<span>桌面端优先</span>
|
|
<span>高频工作台</span>
|
|
<span>AI 嵌入主流程</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="concept-grid">
|
|
<article class="concept">
|
|
<div class="concept-head">
|
|
<span class="tag a">A</span>
|
|
<div>
|
|
<h2>极简任务台</h2>
|
|
<p>推荐主方向。把“下一个问题”放到最高层级，队列和详情围绕当前处理动作组织。</p>
|
|
</div>
|
|
</div>
|
|
<div class="mock">
|
|
<div class="app a-layout">
|
|
<aside class="rail">
|
|
<div class="logo">IH</div>
|
|
<div class="nav-pill active">下一个 3</div>
|
|
<div class="nav-pill">待补 5</div>
|
|
<div class="nav-pill">全部</div>
|
|
<div class="nav-pill">设置</div>
|
|
</aside>
|
|
<section class="main">
|
|
<div class="topbar">
|
|
<h3>今天的问题处理台</h3>
|
|
<div>
|
|
<span class="btn primary">粘贴反馈</span>
|
|
<span class="btn">新建</span>
|
|
</div>
|
|
</div>
|
|
<div class="focus-strip">
|
|
<span class="priority">P0</span>
|
|
<div>
|
|
<strong>导出 Excel 时，长文本字段被截断</strong>
|
|
<div class="meta"><span>华东电力</span><span>报表中心</span><span>今天 18:00 截止</span></div>
|
|
</div>
|
|
<span class="btn primary">开始处理</span>
|
|
</div>
|
|
<div class="why-row">
|
|
<div class="why"><span>AI 排序原因</span><strong>影响验收，今日到期</strong></div>
|
|
<div class="why"><span>缺失信息</span><strong>需要示例文件</strong></div>
|
|
<div class="why"><span>建议动作</span><strong>先定位导出层</strong></div>
|
|
</div>
|
|
<div class="table">
|
|
<div class="row header"><span>优先级</span><span>问题</span><span>客户</span><span>截止</span></div>
|
|
<div class="row selected"><span class="badge hot">P0</span><strong>导出 Excel 长文本被截断</strong><span>华东电力</span><span>18:00</span></div>
|
|
<div class="row"><span class="badge warn">P1</span><strong>审批流移动端偶发卡住</strong><span>城建</span><span>明天</span></div>
|
|
<div class="row"><span class="badge warn">P1</span><strong>明细表分页切换数据重复</strong><span>物流</span><span>明天</span></div>
|
|
<div class="row"><span class="badge">P2</span><strong>附件上传提示网络错误</strong><span>制造</span><span>后天</span></div>
|
|
<div class="row"><span class="badge">P2</span><strong>仪表盘 Safari 不显示</strong><span>电力</span><span>-</span></div>
|
|
<div class="row"><span class="badge">P3</span><strong>任务评论增加成员通知</strong><span>物流</span><span>周五</span></div>
|
|
</div>
|
|
</section>
|
|
<aside class="side">
|
|
<div class="section">
|
|
<h4>当前问题</h4>
|
|
<div class="paragraph">报表中心导出 Excel 时，备注/详情等长文本字段被截断，导致数据不完整。</div>
|
|
</div>
|
|
<div class="section">
|
|
<span class="small-label">AI 建议</span>
|
|
<div class="box paragraph">建议 P0。客户验收受影响，且今天 18:00 需要方案。</div>
|
|
</div>
|
|
<div class="section">
|
|
<span class="small-label">下一步</span>
|
|
<div class="check">□ 请求原始数据与导出文件</div>
|
|
<div class="check">□ 检查 Excel 写入长度限制</div>
|
|
<div class="check">□ 生成实施回复草稿</div>
|
|
</div>
|
|
<span class="btn primary">生成回复</span>
|
|
<span class="btn">找类似问题</span>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
<div class="notes">
|
|
<h3>主路径</h3>
|
|
<p>打开即看到“当前最该处理的问题”，无需先筛选。AI 理由只解释排序，不抢主流程。</p>
|
|
<div class="chips">
|
|
<span class="chip good">长期使用负担低</span>
|
|
<span class="chip">最适合落地</span>
|
|
<span class="chip risk">AI 卖点不够强烈</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="concept">
|
|
<div class="concept-head">
|
|
<span class="tag b">B</span>
|
|
<div>
|
|
<h2>问题收件箱</h2>
|
|
<p>把实施反馈当成收件箱处理，先快速录入和分拣，再进入具体问题处理。</p>
|
|
</div>
|
|
</div>
|
|
<div class="mock">
|
|
<div class="app b-layout">
|
|
<aside class="rail">
|
|
<div class="logo">IH</div>
|
|
<div class="nav-pill active">收件箱</div>
|
|
<div class="nav-pill">快超期</div>
|
|
<div class="nav-pill">处理中</div>
|
|
<div class="nav-pill">归档</div>
|
|
</aside>
|
|
<section class="main">
|
|
<div class="topbar">
|
|
<h3>反馈收件箱</h3>
|
|
<div>
|
|
<span class="btn green">粘贴并解析</span>
|
|
<span class="btn">截图 OCR</span>
|
|
</div>
|
|
</div>
|
|
<div class="capture">
|
|
<div class="textarea">粘贴企业微信、聊天记录、日志或错误信息... AI 会提取客户、反馈人、问题摘要、截止时间和缺失信息。</div>
|
|
<div class="inbox-footer"><span>支持截图上传前确认</span><strong>Enter 分析 / Ctrl+Enter 登记</strong></div>
|
|
</div>
|
|
<div class="status-grid">
|
|
<div class="lane">
|
|
<h4>待补信息 <span>5</span></h4>
|
|
<div class="ticket"><strong>审批流移动端偶发卡住</strong><div class="meta"><span>缺少复现步骤</span><span>城建集团</span></div></div>
|
|
<div class="ticket"><strong>附件上传网络错误</strong><div class="meta"><span>缺少截图</span><span>浙江制造</span></div></div>
|
|
<div class="ticket"><strong>批量导入模板校验失败</strong><div class="meta"><span>缺少模板文件</span></div></div>
|
|
</div>
|
|
<div class="lane">
|
|
<h4>快超期 <span>3</span></h4>
|
|
<div class="ticket"><span class="badge hot">P0</span><strong>导出 Excel 长文本被截断</strong><div class="meta"><span>18:00</span><span>华东电力</span></div></div>
|
|
<div class="ticket"><span class="badge warn">P1</span><strong>明细表分页数据重复</strong><div class="meta"><span>明天 15:00</span></div></div>
|
|
</div>
|
|
<div class="lane">
|
|
<h4>高优先级 <span>4</span></h4>
|
|
<div class="ticket"><span class="badge warn">P1</span><strong>登录后订单列表一直加载</strong><div class="meta"><span>核心客户</span></div></div>
|
|
<div class="ticket"><span class="badge warn">P1</span><strong>移动审批超时</strong><div class="meta"><span>多项目影响</span></div></div>
|
|
</div>
|
|
<div class="lane">
|
|
<h4>处理中 <span>2</span></h4>
|
|
<div class="ticket"><strong>导出字段宽度自适应</strong><div class="meta"><span>定位中</span><span>张开发</span></div></div>
|
|
<div class="ticket"><strong>Safari 仪表盘兼容</strong><div class="meta"><span>待验证</span></div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<div class="notes">
|
|
<h3>主路径</h3>
|
|
<p>大量反馈先进入收件箱，AI 帮你分到“待补、快超期、高优先级、处理中”。</p>
|
|
<div class="chips">
|
|
<span class="chip good">录入体验最强</span>
|
|
<span class="chip">适合反馈很多</span>
|
|
<span class="chip risk">处理详情不如 A 直接</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="concept">
|
|
<div class="concept-head">
|
|
<span class="tag c">C</span>
|
|
<div>
|
|
<h2>AI 指挥台</h2>
|
|
<p>突出 AI 的判断、排序、风险解释和草稿动作，适合作为产品差异化方向。</p>
|
|
</div>
|
|
</div>
|
|
<div class="mock">
|
|
<div class="app c-layout">
|
|
<aside class="rail">
|
|
<div class="logo">IH</div>
|
|
<div class="nav-pill active">AI 队列</div>
|
|
<div class="nav-pill">草稿</div>
|
|
<div class="nav-pill">日报</div>
|
|
<div class="nav-pill">设置</div>
|
|
</aside>
|
|
<section class="ai-queue">
|
|
<h3>AI 推荐排序</h3>
|
|
<div class="rank-card active">
|
|
<div class="rank-top"><span class="badge hot">P0</span><strong>98</strong></div>
|
|
<strong>导出 Excel 长文本被截断</strong>
|
|
<div class="meta"><span>验收风险</span><span>今天 18:00</span></div>
|
|
</div>
|
|
<div class="rank-card">
|
|
<div class="rank-top"><span class="badge warn">P1</span><strong>88</strong></div>
|
|
<strong>审批流移动端偶发卡住</strong>
|
|
<div class="meta"><span>缺复现</span><span>明天</span></div>
|
|
</div>
|
|
<div class="rank-card">
|
|
<div class="rank-top"><span class="badge warn">P1</span><strong>84</strong></div>
|
|
<strong>登录后订单列表一直加载</strong>
|
|
<div class="meta"><span>核心客户</span></div>
|
|
</div>
|
|
<div class="rank-card">
|
|
<div class="rank-top"><span class="badge">P2</span><strong>61</strong></div>
|
|
<strong>附件上传网络错误</strong>
|
|
<div class="meta"><span>需截图</span></div>
|
|
</div>
|
|
</section>
|
|
<section class="main">
|
|
<div class="topbar">
|
|
<h3>导出 Excel 时，长文本字段被截断</h3>
|
|
<span class="btn primary">采纳 AI 排序</span>
|
|
</div>
|
|
<div class="focus-strip">
|
|
<span class="priority">P0</span>
|
|
<div>
|
|
<strong>客户验收风险，今日需要方案</strong>
|
|
<div class="meta"><span>华东电力</span><span>报表中心</span><span>置信度 91%</span></div>
|
|
</div>
|
|
<span class="btn">人工改优先级</span>
|
|
</div>
|
|
<div class="explain">
|
|
<div class="ai-panel purple">
|
|
<h4>AI 为什么排第一</h4>
|
|
<div class="paragraph">影响多个项目验收，截止时间明确，客户需要今天给出方案。尚未看到生产完全不可用，所以建议 P0/P1 边界由你确认。</div>
|
|
</div>
|
|
<div class="ai-panel">
|
|
<h4>风险点</h4>
|
|
<div class="check">□ 导出数据不完整</div>
|
|
<div class="check">□ 客户验收延期</div>
|
|
<div class="check">□ SLA 已接近截止</div>
|
|
</div>
|
|
</div>
|
|
<div class="action-strip">
|
|
<div class="action-tile">标记处理中</div>
|
|
<div class="action-tile">生成回复</div>
|
|
<div class="action-tile">找类似</div>
|
|
<div class="action-tile">生成日报</div>
|
|
</div>
|
|
<div class="table" style="margin-top: 12px">
|
|
<div class="row header"><span>动作</span><span>AI 草稿</span><span>状态</span><span>确认</span></div>
|
|
<div class="row"><span>回复</span><strong>已整理给实施的回复草稿</strong><span>待确认</span><span class="badge">查看</span></div>
|
|
<div class="row"><span>备注</span><strong>补充风险：验收数据不完整</strong><span>待确认</span><span class="badge">采纳</span></div>
|
|
<div class="row"><span>状态</span><strong>建议改为处理中</strong><span>待确认</span><span class="badge">采纳</span></div>
|
|
</div>
|
|
</section>
|
|
<aside class="side">
|
|
<div class="section">
|
|
<h4>队列问答</h4>
|
|
<div class="box paragraph">问：下一个该处理什么？<br />答：先处理华东电力导出问题，它同时满足高影响和今日截止。</div>
|
|
</div>
|
|
<div class="section">
|
|
<span class="small-label">相似问题</span>
|
|
<div class="check">导出备注字段换行丢失</div>
|
|
<div class="check">Excel 单元格宽度异常</div>
|
|
<div class="check">报表导出富文本截断</div>
|
|
</div>
|
|
<div class="section">
|
|
<span class="small-label">回复草稿</span>
|
|
<div class="paragraph">我这边先确认截断发生在查询、转换还是写入阶段，请补充导出文件和源数据截图...</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
<div class="notes">
|
|
<h3>主路径</h3>
|
|
<p>围绕 AI 排序展开：AI 给原因和草稿，人只负责确认、采纳或驳回。</p>
|
|
<div class="chips">
|
|
<span class="chip good">AI 价值最明显</span>
|
|
<span class="chip">适合演示产品亮点</span>
|
|
<span class="chip risk">日常使用会偏重</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|