641 lines
19 KiB
HTML
641 lines
19 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>AI HR P0 页面组合原型</title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: #eef2f7;
|
|
color: #172033;
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
}
|
|
|
|
.app {
|
|
display: grid;
|
|
grid-template-columns: 224px 1fr;
|
|
min-height: 1150px;
|
|
background: #f4f7fb;
|
|
}
|
|
|
|
.sidebar {
|
|
background: #1d2d3f;
|
|
color: #cbd6e3;
|
|
padding: 18px 14px;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 24px;
|
|
color: #fff;
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.brand img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
height: 44px;
|
|
padding: 0 12px;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: #3b9bff;
|
|
color: #fff;
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 18px;
|
|
text-align: center;
|
|
}
|
|
|
|
.main {
|
|
display: grid;
|
|
grid-template-rows: 56px 1fr;
|
|
min-width: 0;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 24px;
|
|
border-bottom: 1px solid #e3e8f0;
|
|
background: #fff;
|
|
color: #7c8798;
|
|
}
|
|
|
|
.tenant {
|
|
width: 240px;
|
|
height: 34px;
|
|
border: 1px solid #dfe5ee;
|
|
border-radius: 8px;
|
|
color: #98a2b3;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.content {
|
|
padding: 22px;
|
|
}
|
|
|
|
.meta-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.meta-title {
|
|
margin: 0 0 5px;
|
|
font-size: 24px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.meta-sub {
|
|
margin: 0;
|
|
color: #657184;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.meta-date {
|
|
color: #657184;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.screen {
|
|
min-height: 500px;
|
|
border: 1px solid #dfe6f0;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
box-shadow: 0 12px 28px rgba(17, 29, 48, 0.05);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.screen-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 18px;
|
|
border-bottom: 1px solid #edf1f6;
|
|
}
|
|
|
|
.screen-title {
|
|
margin: 0;
|
|
color: #4971b6;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 24px;
|
|
padding: 0 10px;
|
|
border-radius: 6px;
|
|
background: #e9f3ff;
|
|
color: #2374c9;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tag.red {
|
|
background: #ffe8e9;
|
|
color: #c80f1f;
|
|
}
|
|
|
|
.tag.green {
|
|
background: #e5f8ee;
|
|
color: #16834c;
|
|
}
|
|
|
|
.tag.orange {
|
|
background: #fff1dc;
|
|
color: #bf6900;
|
|
}
|
|
|
|
.screen-body {
|
|
padding: 16px 18px 18px;
|
|
}
|
|
|
|
.two-col {
|
|
display: grid;
|
|
grid-template-columns: 260px 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
.card {
|
|
border: 1px solid #e5eaf3;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.card.pad {
|
|
padding: 14px;
|
|
}
|
|
|
|
.card-title {
|
|
margin: 0 0 12px;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.field {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: #7a8597;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.input {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 36px;
|
|
padding: 0 10px;
|
|
border: 1px solid #dfe5ee;
|
|
border-radius: 7px;
|
|
color: #253348;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 96px;
|
|
height: 36px;
|
|
padding: 0 14px;
|
|
border: 0;
|
|
border-radius: 7px;
|
|
background: #f65f61;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.button.ghost {
|
|
border: 1px solid #dfe5ee;
|
|
background: #fff;
|
|
color: #3f4c60;
|
|
}
|
|
|
|
.question {
|
|
display: grid;
|
|
grid-template-columns: 28px 1fr auto;
|
|
gap: 10px;
|
|
align-items: start;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #eef2f7;
|
|
}
|
|
|
|
.num {
|
|
display: grid;
|
|
width: 28px;
|
|
height: 28px;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
background: #eef4ff;
|
|
color: #356bb4;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.answer-box {
|
|
min-height: 78px;
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
border: 1px solid #e1e7f0;
|
|
border-radius: 8px;
|
|
background: #f9fbfe;
|
|
color: #49576b;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.score-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.score {
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
background: #f7f9fc;
|
|
text-align: center;
|
|
}
|
|
|
|
.score strong {
|
|
display: block;
|
|
color: #d70f20;
|
|
font-size: 21px;
|
|
}
|
|
|
|
.chat {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.bubble {
|
|
max-width: 88%;
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
color: #253348;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.bubble.customer {
|
|
background: #f1f5fb;
|
|
}
|
|
|
|
.bubble.trainee {
|
|
justify-self: end;
|
|
background: #ffe9ea;
|
|
}
|
|
|
|
.bubble.coach {
|
|
border: 1px dashed #ffbe73;
|
|
background: #fff8ed;
|
|
}
|
|
|
|
.meter {
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: #ecf1f7;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.meter span {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: linear-gradient(90deg, #f65f61, #31b367);
|
|
}
|
|
|
|
.upload {
|
|
display: grid;
|
|
min-height: 112px;
|
|
place-items: center;
|
|
border: 1px dashed #cbd5e1;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
color: #637085;
|
|
}
|
|
|
|
.transcript {
|
|
max-height: 190px;
|
|
overflow: hidden;
|
|
color: #344255;
|
|
font-size: 13px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.summary-item {
|
|
min-height: 88px;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
color: #435269;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.search {
|
|
display: grid;
|
|
grid-template-columns: 1fr 92px;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.sop-layout {
|
|
display: grid;
|
|
grid-template-columns: 190px 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
.category {
|
|
padding: 10px;
|
|
border-bottom: 1px solid #edf1f6;
|
|
color: #4b5b72;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.category.active {
|
|
color: #c80f1f;
|
|
background: #fff0f1;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.quote {
|
|
padding: 12px;
|
|
border-left: 4px solid #d70f20;
|
|
border-radius: 6px;
|
|
background: #fff6f6;
|
|
color: #374256;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.doc {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #edf1f6;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.muted {
|
|
color: #7a8597;
|
|
}
|
|
|
|
.footer-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<img src="../../frontend/src/assets/logo/logo.png" alt="" />
|
|
<span>物业AI人力资源系统</span>
|
|
</div>
|
|
<div class="nav-item active"><span class="nav-icon">●</span> 首页</div>
|
|
<div class="nav-item"><span class="nav-icon">▣</span> AI 面试</div>
|
|
<div class="nav-item"><span class="nav-icon">◈</span> 三角色对练</div>
|
|
<div class="nav-item"><span class="nav-icon">▤</span> 案例沉淀</div>
|
|
<div class="nav-item"><span class="nav-icon">☰</span> SOP 知识库</div>
|
|
<div class="nav-item"><span class="nav-icon">⚙</span> 系统管理</div>
|
|
</aside>
|
|
|
|
<main class="main">
|
|
<header class="topbar">
|
|
<div>首页 / P0 页面原型总览</div>
|
|
<div class="tenant">选择租户</div>
|
|
</header>
|
|
|
|
<section class="content">
|
|
<div class="meta-line">
|
|
<div>
|
|
<h1 class="meta-title">P0 四个页面关键状态</h1>
|
|
<p class="meta-sub">先确认页面信息架构，再逐个落 plus-ui；英雄路径优先保证 AI 面试可端到端演示。</p>
|
|
</div>
|
|
<div class="meta-date">数据截至：2026-07-02 10:00:00</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<article class="screen">
|
|
<div class="screen-head">
|
|
<h2 class="screen-title">AI 面试出题</h2>
|
|
<span class="tag red">英雄路径 A</span>
|
|
</div>
|
|
<div class="screen-body two-col">
|
|
<aside class="card pad">
|
|
<h3 class="card-title">面试对象</h3>
|
|
<div class="field">
|
|
<span class="label">候选人</span>
|
|
<div class="input">张明 · 生活顾问</div>
|
|
</div>
|
|
<div class="field">
|
|
<span class="label">项目</span>
|
|
<div class="input">银城花园 / 住宅</div>
|
|
</div>
|
|
<div class="field">
|
|
<span class="label">岗位画像</span>
|
|
<div class="input">投诉处理、催缴沟通、SOP 执行</div>
|
|
</div>
|
|
<div class="footer-actions">
|
|
<button class="button">生成题目</button>
|
|
</div>
|
|
</aside>
|
|
<section>
|
|
<div class="card pad">
|
|
<h3 class="card-title">AI 生成面试题</h3>
|
|
<div class="question">
|
|
<span class="num">1</span>
|
|
<div>业主因漏水情绪激动到前台投诉，你第一句话怎么说？</div>
|
|
<span class="tag green">已答</span>
|
|
</div>
|
|
<div class="question">
|
|
<span class="num">2</span>
|
|
<div>催缴物业费时，业主质疑服务不到位，你如何回应？</div>
|
|
<span class="tag orange">作答中</span>
|
|
</div>
|
|
<div class="answer-box">候选人回答：先表示理解和歉意，确认业主具体不满意的服务点，再说明缴费与服务改进可以并行处理。</div>
|
|
<div class="score-row">
|
|
<div class="score"><span>表达</span><strong>86</strong></div>
|
|
<div class="score"><span>SOP</span><strong>82</strong></div>
|
|
<div class="score"><span>情绪</span><strong>90</strong></div>
|
|
<div class="score"><span>总分</span><strong>86</strong></div>
|
|
</div>
|
|
<div class="footer-actions">
|
|
<button class="button ghost">保存草稿</button>
|
|
<button class="button">完成评分</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="screen">
|
|
<div class="screen-head">
|
|
<h2 class="screen-title">三角色对练</h2>
|
|
<span class="tag red">育 / 用核心</span>
|
|
</div>
|
|
<div class="screen-body two-col">
|
|
<aside class="card pad">
|
|
<h3 class="card-title">场景配置</h3>
|
|
<div class="field">
|
|
<span class="label">场景</span>
|
|
<div class="input">客服应对投诉</div>
|
|
</div>
|
|
<div class="field">
|
|
<span class="label">AI 业主</span>
|
|
<div class="input">高情绪、追问进度、质疑服务</div>
|
|
</div>
|
|
<div class="field">
|
|
<span class="label">教练提示</span>
|
|
<div class="input">仅在漏关键步骤时提示</div>
|
|
</div>
|
|
<p class="muted">信任度</p>
|
|
<div class="meter"><span style="width: 68%"></span></div>
|
|
</aside>
|
|
<section class="card pad">
|
|
<h3 class="card-title">对练实时过程</h3>
|
|
<div class="chat">
|
|
<div class="bubble customer">AI业主：你们说今天处理，到现在都没人联系我，这个房子还怎么住？</div>
|
|
<div class="bubble trainee">学员：我先帮您确认报修单和现场照片，今天 30 分钟内给您明确回复。</div>
|
|
<div class="bubble coach">AI教练：先安抚，再确认诉求。</div>
|
|
<div class="bubble customer">AI业主：我不要流程，我要知道谁负责、什么时候来。</div>
|
|
</div>
|
|
<div class="score-row">
|
|
<div class="score"><span>合规</span><strong>78</strong></div>
|
|
<div class="score"><span>沟通</span><strong>84</strong></div>
|
|
<div class="score"><span>情绪</span><strong>72</strong></div>
|
|
<div class="score"><span>建议</span><strong>2条</strong></div>
|
|
</div>
|
|
<div class="footer-actions">
|
|
<button class="button ghost">继续一轮</button>
|
|
<button class="button">结束并评分</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="screen">
|
|
<div class="screen-head">
|
|
<h2 class="screen-title">案例语音整理</h2>
|
|
<span class="tag orange">样片兜底</span>
|
|
</div>
|
|
<div class="screen-body two-col">
|
|
<aside class="card pad">
|
|
<h3 class="card-title">上传与转写</h3>
|
|
<div class="upload">拖入语音 / 选择样例录音</div>
|
|
<p class="muted">ASR 转写结果</p>
|
|
<div class="transcript">
|
|
业主反映地下车库长期积水，担心车辆受损。管家先确认车位号与积水时间，安排工程人员排查排水沟，并在业主群同步处理进度。
|
|
</div>
|
|
<div class="footer-actions">
|
|
<button class="button">AI 整理</button>
|
|
</div>
|
|
</aside>
|
|
<section class="card pad">
|
|
<h3 class="card-title">结构化案例稿</h3>
|
|
<div class="summary-grid">
|
|
<div class="summary-item"><strong>背景</strong><br />雨后车库积水，业主担心车辆与安全问题。</div>
|
|
<div class="summary-item"><strong>处理</strong><br />确认位置、派工排查、群内同步、次日复盘。</div>
|
|
<div class="summary-item"><strong>结果</strong><br />排水沟堵塞已清理，业主确认问题解决。</div>
|
|
<div class="summary-item"><strong>亮点</strong><br />响应快、过程透明、主动同步进度。</div>
|
|
</div>
|
|
<p>
|
|
<span class="tag green">投诉处理</span>
|
|
<span class="tag">车库</span>
|
|
<span class="tag orange">高情绪</span>
|
|
</p>
|
|
<div class="footer-actions">
|
|
<button class="button ghost">送审</button>
|
|
<button class="button">入库</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="screen">
|
|
<div class="screen-head">
|
|
<h2 class="screen-title">SOP 知识库</h2>
|
|
<span class="tag green">可引用 SOP 内容</span>
|
|
</div>
|
|
<div class="screen-body">
|
|
<div class="search">
|
|
<div class="input">业主投诉漏水，管家第一步怎么处理？</div>
|
|
<button class="button">检索</button>
|
|
</div>
|
|
<div class="sop-layout">
|
|
<aside class="card">
|
|
<div class="category active">投诉处理 SOP</div>
|
|
<div class="category">催缴沟通 SOP</div>
|
|
<div class="category">报修跟进 SOP</div>
|
|
<div class="category">交付接待 SOP</div>
|
|
<div class="category">巡检记录 SOP</div>
|
|
</aside>
|
|
<section>
|
|
<div class="quote">
|
|
AI 回答：先安抚业主情绪并确认具体影响范围；同步记录房号、报修时间、现场照片；再创建工单并明确首次反馈时限。引用：投诉处理 SOP v1.0 第 2、3、5 条。
|
|
</div>
|
|
<div class="card pad" style="margin-top: 12px">
|
|
<h3 class="card-title">命中文档</h3>
|
|
<div class="doc"><strong>投诉处理 SOP v1.0</strong><span class="tag green">引用 3 段</span></div>
|
|
<div class="doc"><strong>报修跟进 SOP v1.0</strong><span class="tag">引用 2 段</span></div>
|
|
<div class="doc"><strong>高情绪沟通话术</strong><span class="tag orange">建议补充</span></div>
|
|
</div>
|
|
<div class="footer-actions">
|
|
<button class="button ghost">查看原文</button>
|
|
<button class="button">生成训练题</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|