wangys/urbanLifeline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web iframe结构实现

Browse Source
This commit is contained in:
wangys
2025-12-13 14:13:31 +08:00
parent e002f0d989
commit 1776aa2d1e
53 changed files with 3280 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
urbanLifelineWeb/packages/workcase/src/views/public/AIChat/AIChatView.scss Normal file
View File

@@ -0,0 +1,247 @@
.ai-chat-system {
display: flex;
height: 100vh;
background: #f5f7fa;
// 左侧边栏
.chat-sidebar {
width: 200px;
background: #fff;
border-right: 1px solid #e4e7ed;
display: flex;
flex-direction: column;
.sidebar-header {
padding: 20px 16px;
border-bottom: 1px solid #e4e7ed;
h1 {
font-size: 16px;
margin: 0;
color: #303133;
}
}
.nav-section {
padding: 12px 8px;
.nav-item.new-chat {
background: #409eff;
color: #fff;
&:hover {
background: #66b1ff;
}
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin-bottom: 2px;
border-radius: 6px;
cursor: pointer;
color: #606266;
transition: all 0.2s;
&:hover {
background: #f5f7fa;
}
&.active {
background: #ecf5ff;
color: #409eff;
}
span {
font-size: 14px;
}
}
}
.sidebar-footer {
margin-top: auto;
padding: 16px;
text-align: center;
font-size: 12px;
color: #c0c4cc;
border-top: 1px solid #e4e7ed;
}
}
// 主内容区
.chat-main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: #f5f7fa;
.chat-header {
padding: 24px 32px;
background: #fff;
border-bottom: 1px solid #e4e7ed;
h1 {
font-size: 24px;
margin: 0 0 8px 0;
color: #303133;
}
.subtitle {
font-size: 14px;
color: #909399;
margin: 0;
}
}
.chat-area {
flex: 1;
background: #fff;
margin: 24px 32px;
border-radius: 8px;
display: flex;
flex-direction: column;
overflow: hidden;
.ai-info {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid #e4e7ed;
.ai-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: #f0f2f5;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.ai-details {
flex: 1;
}
.ai-name {
font-size: 16px;
font-weight: 600;
color: #303133;
margin-bottom: 4px;
}
.ai-status {
font-size: 12px;
color: #67c23a;
display: flex;
align-items: center;
gap: 6px;
.status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #67c23a;
animation: pulse 2s infinite;
}
}
}
.messages {
flex: 1;
padding: 20px;
overflow-y: auto;
background: #f5f7fa;
.message {
display: flex;
margin-bottom: 16px;
&.user {
justify-content: flex-end;
.message-content {
background: #409eff;
color: #fff;
}
}
.message-content {
max-width: 60%;
padding: 12px 16px;
background: #fff;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.message-text {
line-height: 1.6;
word-wrap: break-word;
}
.message-time {
font-size: 11px;
color: #c0c4cc;
margin-top: 6px;
}
}
}
.quick-actions {
display: flex;
gap: 12px;
padding: 12px 20px;
border-top: 1px solid #e4e7ed;
border-bottom: 1px solid #e4e7ed;
background: #fff;
.quick-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: #f5f7fa;
border: 1px solid #e4e7ed;
border-radius: 16px;
font-size: 13px;
color: #606266;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: #ecf5ff;
border-color: #409eff;
color: #409eff;
}
}
}
.input-area {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: #fff;
.attach-icon {
font-size: 20px;
color: #909399;
cursor: pointer;
}
}
}
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}