feat: 新增 AI 智能助手对话页面（/ai）
- 布局沿用数字孪生页接口：左侧 AI 对话区 + 右侧企业分布面板 - 新增共享 ParkSidePanel 组件（分区/企业名录/详情/实时动态）， 数字孪生与 AI 助手页右侧完全一致 - 新增 AiChatPanel 对话组件：欢迎语 + 消息流 + 快捷提问 + 输入发送， 内置园区知识库模拟回复（入驻/政策/场地/AI 赋能/分区/企业/融资/就业/导师） - 路由与导航循环加入 /ai（数据大屏 → 数字孪生 → AI 助手 → 媒体轮播） - usePageNav 忽略输入框/文本域按键，避免输入方向键误切页面 - 新增 send/eraser/headset/circle-dot 图标，全部遵守 bd- 浅色科技 UI 规范
This commit is contained in:
Pine
@@ -1751,6 +1751,246 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ============ AI 智能助手对话区（/ai 左侧） ============ */
|
||||
.bd-chat {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.15));
|
||||
border: 1px solid rgba(120, 160, 220, 0.14);
|
||||
}
|
||||
.bd-chat-head {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255,255,255,0.6);
|
||||
border-bottom: 1px solid rgba(120,160,220,0.14);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
.bd-chat-logo {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: linear-gradient(140deg, var(--bd-blue), var(--bd-cyan));
|
||||
box-shadow: 0 4px 12px rgba(47,107,255,0.28);
|
||||
}
|
||||
.bd-chat-titles {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.bd-chat-titles b {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: var(--bd-ink);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.bd-chat-titles span {
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
font-size: 10.5px;
|
||||
color: var(--bd-sub);
|
||||
}
|
||||
.bd-chat-model {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
color: var(--bd-green);
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
background: rgba(23,178,106,0.08);
|
||||
border: 1px solid rgba(23,178,106,0.22);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bd-chat-model i {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--bd-green);
|
||||
box-shadow: 0 0 6px rgba(23,178,106,0.8);
|
||||
}
|
||||
.bd-chat-clear {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(120,160,220,0.2);
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.7);
|
||||
color: var(--bd-sub);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.bd-chat-clear:hover {
|
||||
color: var(--bd-red);
|
||||
border-color: rgba(240,68,56,0.35);
|
||||
background: rgba(240,68,56,0.06);
|
||||
}
|
||||
.bd-chat-msgs {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 16px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.bd-msg {
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
max-width: 86%;
|
||||
}
|
||||
.bd-msg.ai {
|
||||
align-self: flex-start;
|
||||
}
|
||||
.bd-msg.me {
|
||||
align-self: flex-end;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.bd-msg-avatar {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: linear-gradient(140deg, var(--bd-blue), var(--bd-cyan));
|
||||
box-shadow: 0 3px 8px rgba(47,107,255,0.22);
|
||||
}
|
||||
.bd-msg-bubble {
|
||||
padding: 9px 13px;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.65;
|
||||
border-radius: 12px;
|
||||
color: #33415c;
|
||||
background: rgba(255,255,255,0.85);
|
||||
border: 1px solid rgba(120,160,220,0.16);
|
||||
box-shadow: 0 3px 10px rgba(56,100,170,0.06);
|
||||
white-space: pre-line;
|
||||
word-break: break-word;
|
||||
}
|
||||
.bd-msg.me .bd-msg-bubble {
|
||||
color: #fff;
|
||||
background: linear-gradient(140deg, var(--bd-blue), var(--bd-blue-deep));
|
||||
border-color: transparent;
|
||||
box-shadow: 0 4px 14px rgba(47,107,255,0.25);
|
||||
}
|
||||
.bd-typing {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.bd-typing i {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #9fb0c6;
|
||||
animation: bdTyping 1.2s ease-in-out infinite;
|
||||
}
|
||||
.bd-typing i:nth-child(2) { animation-delay: 0.15s; }
|
||||
.bd-typing i:nth-child(3) { animation-delay: 0.3s; }
|
||||
@keyframes bdTyping {
|
||||
0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
|
||||
30% { opacity: 1; transform: translateY(-3px); }
|
||||
}
|
||||
.bd-chat-quick {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 0 16px 10px;
|
||||
}
|
||||
.bd-chat-quick button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 11px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--bd-blue);
|
||||
background: rgba(47,107,255,0.07);
|
||||
border: 1px solid rgba(47,107,255,0.16);
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.bd-chat-quick button:hover {
|
||||
background: rgba(47,107,255,0.14);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.bd-chat-input {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 0 16px 16px;
|
||||
padding: 8px 8px 8px 14px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255,255,255,0.85);
|
||||
border: 1px solid rgba(120,160,220,0.22);
|
||||
box-shadow: 0 4px 16px rgba(56,100,170,0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
.bd-chat-input input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 12.5px;
|
||||
color: var(--bd-ink);
|
||||
font-family: inherit;
|
||||
}
|
||||
.bd-chat-input input::placeholder {
|
||||
color: #9fb0c6;
|
||||
}
|
||||
.bd-chat-send {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 9px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(140deg, var(--bd-blue), var(--bd-cyan));
|
||||
box-shadow: 0 4px 12px rgba(47,107,255,0.3);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.bd-chat-send:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 16px rgba(47,107,255,0.38);
|
||||
}
|
||||
.bd-chat-send:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
/* 移动端/窄屏：消息宽度放开 */
|
||||
@media (max-width: 1100px) {
|
||||
.bd-msg { max-width: 94%; }
|
||||
}
|
||||
|
||||
/* 页眉左右切换按钮（← 左页 · 右页 →，可点击） */
|
||||
.bd-nav-keys {
|
||||
display: inline-flex;
|
||||
|
||||
Reference in New Issue
Block a user