You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
477 lines
7.5 KiB
Plaintext
477 lines
7.5 KiB
Plaintext
|
|
// // 滚动条样式
|
|
// .chat-list::-webkit-scrollbar {
|
|
// width: 6px;
|
|
// }
|
|
|
|
// .chat-list::-webkit-scrollbar-track {
|
|
// background: #f1f1f1;
|
|
// border-radius: 3px;
|
|
// }
|
|
|
|
// .chat-list::-webkit-scrollbar-thumb {
|
|
// background: #c1c1c1;
|
|
// border-radius: 3px;
|
|
// }
|
|
|
|
// .chat-list::-webkit-scrollbar-thumb:hover {
|
|
// background: #a8a8a8;
|
|
// }
|
|
|
|
// // 响应式设计
|
|
// @media (max-width: 768px) {
|
|
// .sidebar-column {
|
|
// position: absolute !important;
|
|
// z-index: 1000;
|
|
// height: 100vh !important;
|
|
// box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
|
|
// }
|
|
|
|
// .content-column {
|
|
// padding: 8px;
|
|
// }
|
|
|
|
// .chat-conversation-card {
|
|
// .chat-messages {
|
|
// margin: 8px;
|
|
// }
|
|
|
|
// .chat-list {
|
|
// padding: 12px;
|
|
// }
|
|
|
|
// .message-bubble {
|
|
// max-width: 85% !important;
|
|
// }
|
|
|
|
// .chat-input {
|
|
// padding: 12px;
|
|
// }
|
|
// }
|
|
|
|
// .chat-sidebar {
|
|
// padding: 12px;
|
|
|
|
// .conversation-item {
|
|
// padding: 8px;
|
|
|
|
// .conversation-content .conversation-title .title-text {
|
|
// max-width: 100px;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
// @keyframes fadeIn {
|
|
// from {
|
|
// opacity: 0;
|
|
// transform: translateY(10px);
|
|
// }
|
|
|
|
// to {
|
|
// opacity: 1;
|
|
// transform: translateY(0);
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
// @keyframes slideIn {
|
|
// from {
|
|
// opacity: 0;
|
|
// transform: translateX(-10px);
|
|
// }
|
|
|
|
// to {
|
|
// opacity: 1;
|
|
// transform: translateX(0);
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
/* DeepSeek 风格仿制样式 */
|
|
|
|
.ds-chat-page {
|
|
position: relative;
|
|
height: 100%;
|
|
min-height: 100vh;
|
|
// background: #f5f7fb;
|
|
display: flex;
|
|
overflow-y: hidden;
|
|
flex-direction: column;
|
|
padding-bottom: 140px;
|
|
/* 给输入区预留空间 */
|
|
color: #1f2329;
|
|
// background: #f5f6fa;
|
|
border-radius: 8px;
|
|
// padding: 16px 20px 5px 20px;
|
|
padding: 0px 20px 0px 20px;
|
|
min-height: 100%;
|
|
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
|
|
}
|
|
|
|
.ds-chat-scroll {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.ds-chat-scroll::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.ds-chat-scroll::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 0, 0, .15);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.ds-chat-inner {
|
|
max-width: 860px;
|
|
margin: 0 auto;
|
|
padding: 40px 24px 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ds-empty {
|
|
text-align: center;
|
|
margin-top: 80px;
|
|
|
|
h3 {
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
p {
|
|
color: #667085;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.ds-message-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
margin-bottom: 28px;
|
|
line-height: 1.6;
|
|
|
|
&.from-user {
|
|
flex-direction: row-reverse;
|
|
|
|
.ds-message-body {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.ds-message-content {
|
|
background: #f4f4f4;
|
|
color: #111;
|
|
border-radius: 20px;
|
|
font-size: 17px;
|
|
// border: 1px solid #3478f6;
|
|
// box-shadow: 0 2px 6px rgba(52, 120, 246, .3);
|
|
|
|
p {
|
|
color: #111;
|
|
}
|
|
}
|
|
|
|
.ds-message-meta {
|
|
justify-content: flex-end;
|
|
|
|
.role {
|
|
color: #3478f6;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.thinking .ds-message-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
|
|
.ds-avatar {
|
|
width: 34px;
|
|
height: 34px;
|
|
flex-shrink: 0;
|
|
border-radius: 8px;
|
|
background: #e9eef5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
color: #355070;
|
|
|
|
&.user {
|
|
background: #e9eef5; // 用户头像也用这个颜色
|
|
color: #4f5fa3;
|
|
}
|
|
}
|
|
|
|
.ds-message-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 100%;
|
|
// flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.ds-message-meta {
|
|
font-size: 12px;
|
|
color: #86909c;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 4px;
|
|
|
|
.role {
|
|
font-weight: 600;
|
|
color: #1f2329;
|
|
}
|
|
|
|
.actions {
|
|
margin-left: auto;
|
|
opacity: 0;
|
|
transition: opacity .2s;
|
|
display: flex;
|
|
gap: 4px;
|
|
|
|
.ant-btn {
|
|
padding: 0 4px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ds-message-row:hover .ds-message-meta .actions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ds-message-content {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
min-width: 48px;
|
|
background: #fff;
|
|
border: 1px solid #e3e8ef;
|
|
border-radius: 14px;
|
|
padding: 6px 16px;
|
|
font-size: 17px;
|
|
color: #1f2329;
|
|
position: relative;
|
|
overflow: hidden;
|
|
word-break: break-word;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
|
|
|
|
p {
|
|
margin: 0 0 8px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
code {
|
|
background: #f2f4f8;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-family: ui-monospace, Menlo, Consolas, monospace;
|
|
font-size: 13px;
|
|
}
|
|
|
|
pre {
|
|
background: #0f1115;
|
|
color: #e9edf2;
|
|
padding: 14px 16px;
|
|
border-radius: 12px;
|
|
overflow: auto;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
|
|
code {
|
|
background: transparent;
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
.typing-dots {
|
|
display: inline-flex;
|
|
gap: 4px;
|
|
margin-left: 6px;
|
|
|
|
i {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: #3478f6;
|
|
border-radius: 50%;
|
|
display: block;
|
|
animation: blink 1s infinite ease-in-out;
|
|
}
|
|
|
|
i:nth-child(2) {
|
|
animation-delay: .2s;
|
|
}
|
|
|
|
i:nth-child(3) {
|
|
animation-delay: .4s;
|
|
}
|
|
}
|
|
|
|
@keyframes blink {
|
|
|
|
0%,
|
|
80%,
|
|
100% {
|
|
opacity: .2;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
opacity: 1;
|
|
transform: translateY(-3px);
|
|
}
|
|
}
|
|
|
|
.ds-input-bar {
|
|
// display: flex;
|
|
// align-items: flex-end;
|
|
// position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
margin-bottom: 10vh;
|
|
// background: linear-gradient(to top, #f5f7fb 40%, rgba(245, 247, 251, 0));
|
|
// padding: 32px 0 28px;
|
|
z-index: 20;
|
|
}
|
|
|
|
.ds-input-inner {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
width: 900px;
|
|
margin: 0 auto;
|
|
background: #fff;
|
|
border: 1px solid #d9dde3;
|
|
border-radius: 20px;
|
|
padding: 12px 14px 12px 16px;
|
|
|
|
gap: 12px;
|
|
box-shadow: 0 6px 28px -8px rgba(33, 53, 79, .18), 0 4px 12px -4px rgba(33, 53, 79, .08);
|
|
}
|
|
|
|
.ds-textarea-wrap {
|
|
display: flex;
|
|
flex: 1;
|
|
|
|
.ant-input {
|
|
font-size: 19px;
|
|
line-height: 1.5;
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.ant-input:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.ds-uploading {
|
|
|
|
.ant-btn.ant-btn-icon-only .anticon {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.ant-btn {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
color: #111;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&:hover {
|
|
background: #f2f3f4;
|
|
color: #111;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.ds-input-actions {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
.ant-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 500;
|
|
padding: 0 0px;
|
|
margin: 0;
|
|
height: 36px;
|
|
width: 36px;
|
|
background-color: #b0c1ff;
|
|
border: none;
|
|
color: #fff;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.ds-input-hint {
|
|
max-width: 860px;
|
|
margin: 6px auto 0;
|
|
font-size: 12px;
|
|
color: #808791;
|
|
display: flex;
|
|
gap: 8px;
|
|
|
|
a {
|
|
color: #3478f6;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.sep {
|
|
opacity: .3;
|
|
}
|
|
}
|
|
.ds-select,
|
|
.ds-select .ant-select-selector,
|
|
.ds-select .ant-select-selection-item,
|
|
.ds-select .ant-select-dropdown {
|
|
font-size: 12px !important;
|
|
color: #808791 !important;
|
|
}
|
|
.ds-select-dropdown .ant-select-item {
|
|
font-size: 12px !important;
|
|
color: #808791 !important;
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
|
|
.ds-chat-inner,
|
|
.ds-input-inner,
|
|
.ds-input-hint {
|
|
max-width: 100%;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.ds-input-inner {
|
|
border-radius: 16px;
|
|
}
|
|
} |