Files
gongxue-base/apps/admin/src/components/AiChat/style.css
wangziqi ab4765cee5 feat: Excel 导入预检与动态问答,AI 聊天/文件解析体验修复
- imports: 新增 preflight_import 预检报告(判定/分阶段统计/阻断归因/问题/下一步/错误示例),导入任务 settings 落库(映射/校区/更新/重复/未匹配策略),预览应用策略,向导提交写操作日志
- ai-chat: 新增 excel_analyze(ExcelJS)工具,移除附件/上下文截断,start_import_wizard 支持确认参数,ui.import_preflight SSE,预览确认写操作日志
- admin: ImportPreflightCard 渲染与持久化,聊天抽屉布局/侧边栏修复,考勤页 CSS 引入,费用/学生页接口 schema 校验修复
2026-08-05 21:12:50 +08:00

509 lines
8.2 KiB
CSS

.ai-chat-drawer .ant-drawer-body {
overflow: hidden;
}
.ai-chat-title {
display: flex;
align-items: center;
gap: 8px;
}
.ai-chat-sender-header {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ai-chat-sender-footer {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ai-chat-sender-footer .ant-sender-switch {
margin-inline: 0;
}
.ai-chat-layout {
position: relative;
display: flex;
height: 100%;
min-height: 0;
background: #fff;
}
.ai-chat-sidebar {
position: relative;
display: flex;
flex-direction: column;
flex: 0 0 0;
width: 0;
min-width: 0;
overflow: hidden;
background: #f7f7f8;
border-right: 1px solid #e5e5e7;
transition: flex-basis 180ms ease;
}
.ai-chat-sidebar.is-open {
flex-basis: 248px;
width: 248px;
padding: 12px 8px;
}
.ai-chat-sidebar .ant-conversations {
width: 232px;
flex: 1;
min-height: 0;
height: auto;
overflow-y: auto;
}
.ai-chat-sidebar .ant-conversations-creation {
margin-bottom: 8px;
}
.ai-chat-conversation-label {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.ai-chat-conversation-label__title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-chat-conversation-check {
flex: none;
pointer-events: none;
margin-inline-end: 2px;
}
/* 运行中指示:使用 antd LoadingOutlined 旋转图标 */
.ai-chat-conversation-loading {
color: #007aff;
font-size: 12px;
flex: none;
}
.ai-chat-streaming-placeholder {
display: inline-flex;
align-items: center;
color: #007aff;
font-size: 16px;
padding: 4px 2px;
}
/* 失败 / 已停止:极简状态文字,不再使用 Tag */
.ai-chat-conversation-state {
display: inline-flex;
align-items: center;
gap: 4px;
flex: none;
font-size: 12px;
line-height: 1;
}
.ai-chat-conversation-state i {
width: 5px;
height: 5px;
border-radius: 50%;
}
.ai-chat-conversation-state.is-error {
color: #ff4d4f;
}
.ai-chat-conversation-state.is-error i {
background: #ff4d4f;
}
.ai-chat-conversation-state.is-stopped {
color: #8c8c8c;
}
.ai-chat-conversation-state.is-stopped i {
background: #bfbfbf;
}
.ai-chat-sidebar__loading {
position: absolute;
inset: 68px 0 auto;
}
.ai-chat-sidebar__footer {
flex: none;
display: flex;
align-items: center;
gap: 2px;
padding-top: 8px;
margin-top: 8px;
border-top: 1px solid #f0f0f0;
min-width: 0;
}
.ai-chat-sidebar__selected-count {
margin-right: auto;
padding: 0 4px;
font-size: 12px;
color: #8c8c8c;
white-space: nowrap;
}
.ai-chat-main {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
min-height: 0;
}
.ai-chat-main .ai-chat-toolbar {
order: 0;
}
.ai-chat-main .ai-chat-messages {
order: 1;
}
.ai-chat-main .ai-chat-composer {
order: 2;
}
.ai-chat-toolbar {
display: flex;
flex: 0 0 48px;
align-items: center;
gap: 8px;
min-width: 0;
padding: 0 12px;
border-bottom: 1px solid #ededf0;
}
.ai-chat-toolbar .ant-typography {
flex: 1 1 auto;
min-width: 0;
font-weight: 600;
}
.ai-chat-welcome {
display: grid;
width: min(720px, 100%);
gap: 20px;
padding: 32px;
}
.ai-chat-welcome .ant-welcome-icon {
color: #007aff;
}
.ai-chat-messages {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
min-height: 0;
overflow: hidden;
}
.ai-chat-messages > .ant-bubble-list {
width: 100%;
height: 100%;
padding: 20px clamp(16px, 4vw, 48px);
}
.ai-chat-messages .ant-bubble {
position: relative;
}
.ai-chat-messages .ant-bubble-content {
max-width: min(100%, 680px);
}
.ai-chat-messages .ant-bubble-extra {
position: absolute;
top: 2px;
right: 10px;
z-index: 2;
}
.ai-chat-hover-actions {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid #eceef2;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
opacity: 0;
transform: translateY(-3px);
transition:
opacity 0.15s ease,
transform 0.15s ease;
pointer-events: none;
}
.ai-chat-messages .ant-bubble:hover .ai-chat-hover-actions,
.ai-chat-hover-actions:focus-within {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.ai-chat-hover-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 6px;
color: #5f6672;
font-size: 14px;
cursor: pointer;
user-select: none;
}
.ai-chat-hover-action:hover {
background: #f0f2f5;
color: #1f2329;
}
.ai-chat-hover-action.is-danger:hover {
background: #fff1f0;
color: #cf1322;
}
.ai-chat-user-text {
max-width: 100%;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.ai-chat-user-content {
max-width: 100%;
}
.ai-chat-user-edit {
width: min(520px, 100%);
}
.ai-chat-answer {
width: 100%;
min-width: 0;
}
.ai-chat-answer .ant-space-item,
.ai-chat-answer .ant-x-markdown {
min-width: 0;
max-width: 100%;
}
.ai-chat-answer pre,
.ai-chat-answer table {
max-width: 100%;
overflow-x: auto;
}
.ai-chat-answer .ant-thought-chain {
padding: 10px 12px;
background: #f7f8fa;
border: 1px solid #eceef2;
border-radius: 10px;
}
.ai-chat-composer {
flex: 0 0 auto;
padding: 12px clamp(12px, 3vw, 32px) 14px;
background: #fff;
border-top: 1px solid #ededf0;
}
.ai-chat-composer > .ant-sender {
max-width: 820px;
margin: 0 auto;
}
.ai-chat-composer .ant-attachments {
max-width: 820px;
}
.ai-chat-composer .ant-sender-input:focus,
.ai-chat-composer .ant-sender-input:focus-visible,
.ai-chat-composer .ant-sender-input:focus-within {
outline: none;
box-shadow: none;
}
.ai-chat-composer .ant-sender-prefix {
display: flex;
align-items: center;
align-self: center;
}
.ai-chat-composer .ant-sender-prefix .ant-btn {
color: #8a8f99;
}
.ai-chat-disclaimer {
display: block;
margin-top: 6px;
font-size: 11px;
text-align: center;
}
@media (max-width: 575px) {
.ai-chat-sidebar {
position: absolute;
z-index: 2;
inset: 0 auto 0 0;
box-shadow: 8px 0 24px rgba(0, 0, 0, 0.08);
}
.ai-chat-sidebar.is-open {
width: min(82vw, 300px);
flex-basis: min(82vw, 300px);
}
.ai-chat-sidebar .ant-conversations {
width: calc(min(82vw, 300px) - 16px);
}
.ai-chat-messages > .ant-bubble-list {
padding: 14px 12px;
}
.ai-chat-messages .ant-bubble-content {
max-width: 92%;
}
}
.ai-chat-dynamic-form {
margin-top: 10px;
padding: 12px 14px;
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #fafafa;
max-width: 420px;
}
.ai-chat-dynamic-form__desc {
font-size: 12px;
}
.ai-chat-dynamic-form .ant-form-item {
margin-bottom: 10px;
}
.ai-chat-dynamic-form__number,
.ai-chat-dynamic-form__date {
width: 100%;
}
.ai-chat-dynamic-form__error {
margin-bottom: 10px;
}
.ai-chat-review {
width: 100%;
min-width: 0;
}
.ai-chat-review-card {
margin-top: 10px;
padding: 12px 14px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #fff;
}
.ai-chat-review-card__title {
font-size: 15px;
}
.ai-chat-review-card__summary {
margin: 4px 0 8px !important;
font-size: 12px;
}
.ai-chat-review-card__footer {
margin-top: 6px;
padding-top: 10px;
border-top: 1px dashed #e5e7eb;
}
.ai-chat-review-card__step {
margin-top: 10px;
}
.ai-chat-review-card__group {
margin-top: 12px;
padding: 10px;
border: 1px solid #e8e8e8;
border-radius: 8px;
background: #fafafa;
}
.ai-chat-review-card__sheets {
padding: 4px 0;
}
.ai-chat-review-card__sheet {
padding: 8px 10px;
border: 1px solid #f0f0f0;
border-radius: 6px;
background: #fff;
cursor: pointer;
transition: border-color 0.2s;
}
.ai-chat-review-card__sheet:hover {
border-color: #1677ff;
}
.ai-chat-review-card__step-result {
font-size: 12px;
}
.ai-chat-review-card__step-error {
margin-top: 8px;
}
.ai-chat-review__issues {
margin: 4px 0 0;
padding-left: 18px;
font-size: 12px;
}
.ai-chat-review__error {
margin-top: 8px;
}
.ai-chat-chart {
width: 100%;
min-width: 0;
}
.ai-chat-chart-card {
margin-top: 10px;
padding: 12px 14px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #fff;
}
.ai-chat-chart-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}