YG-Soft/X-Financial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(web): update chat and travel reimbursement styles

Browse Source 
- chat-view.css: update chat view styling
- travel-reimbursement-create-view.css: update travel reimbursement form styles
This commit is contained in:
caoxiaozhu
2026-05-12 01:26:56 +00:00
parent 441e27145d
commit e3548dfaba
2 changed files with 201 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
web/src/assets/styles/views/chat-view.css
View File

@@ -2,7 +2,7 @@
.qa-layout { height: 100%; min-height: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr) 395px; gap: 14px; overflow: hidden; }
.left-column, .right-column { height: 100%; min-height: 0; overflow: hidden; }
.left-column { display: grid; grid-template-rows: minmax(0, 1fr); }
.right-column { display: grid; grid-template-rows: minmax(0, 1.06fr) minmax(0, .94fr); gap: 12px; }
.right-column { display: grid; grid-template-rows: minmax(0, 1.12fr) minmax(0, .86fr) minmax(0, .82fr); gap: 12px; }
.side-panel, .info-panel { min-height: 0; padding: 16px 20px; overflow: hidden; }
.conversation-list, .info-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.side-panel header, .info-panel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
@@ -37,6 +37,25 @@
.answer-card footer button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #64748b; }
.answer-card footer button:hover { background: #f1f5f9; color: #0f9f78; }
.agent-answer { margin: 0; padding: 12px 16px; font-size: 14px; line-height: 1.65; }
.agent-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; max-width: 760px; }
.agent-meta-chip { min-height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: #eef7f2; color: #0f766e; font-size: 12px; font-weight: 760; }
.agent-detail-block { max-width: 760px; margin-top: 10px; display: grid; gap: 8px; }
.agent-detail-block > strong { color: #0f172a; font-size: 12px; font-weight: 820; }
.agent-detail-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.agent-risk-chip, .agent-action-chip { min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 760; }
.agent-risk-chip { background: #fff1f2; color: #be123c; }
.agent-action-chip { background: #eff6ff; color: #1d4ed8; }
.agent-citation-list { display: grid; gap: 8px; }
.agent-citation-card { padding: 10px 12px; border: 1px solid #dce5ef; border-radius: 10px; background: #f8fbff; }
.agent-citation-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.agent-citation-card header span { color: #0f172a; font-size: 13px; font-weight: 760; }
.agent-citation-card header small { color: #64748b; font-size: 11px; }
.agent-citation-card p { margin: 0; color: #334155; font-size: 12px; line-height: 1.6; }
.agent-draft-card { max-width: 760px; margin-top: 10px; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: linear-gradient(180deg, #ffffff, #f8fafc); }
.agent-draft-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.agent-draft-card header strong { color: #0f172a; font-size: 13px; font-weight: 800; }
.agent-draft-card header span { color: #b45309; font-size: 12px; font-weight: 760; }
.agent-draft-card pre { margin: 0; white-space: pre-wrap; word-break: break-word; color: #334155; font-size: 12px; line-height: 1.65; font-family: inherit; }
.composer-wrap { border-top: 1px solid #eef2f7; padding: 10px 14px 12px; background: #fff; }
.prompt-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; overflow-x: auto; }
.prompt-toolbar span { flex: 0 0 auto; color: #64748b; font-size: 13px; font-weight: 800; }
@@ -51,6 +70,7 @@
.send-button { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 8px; background: #10b981; color: #fff; font-size: 20px; box-shadow: 0 8px 18px rgba(16, 185, 129, .20); transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.send-button:hover { background: #0ea672; box-shadow: 0 10px 22px rgba(16, 185, 129, .24); }
.send-button:active { transform: scale(.96); }
.send-button:disabled { background: #94a3b8; box-shadow: none; transform: none; }
.hot-top-panel h3 i { color: #ef4444; }
.top-question-list { display: grid; align-content: start; gap: 8px; padding-right: 4px; }
.top-question-list button { min-height: 42px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; align-items: center; gap: 10px; padding: 0 8px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #334155; text-align: left; }
@@ -66,6 +86,31 @@
.similar-row span i { color: #64748b; font-size: 17px; }
.similar-row strong { height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #e8f8f0; color: #15945f; font-size: 13px; font-weight: 850; }
.similar-row > i { color: #94a3b8; }
.semantic-debug-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.semantic-debug-body { min-height: 0; display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); gap: 12px; }
.semantic-debug-input { display: grid; gap: 8px; }
.semantic-debug-input span { color: #334155; font-size: 13px; font-weight: 800; }
.semantic-debug-input textarea { min-height: 98px; resize: vertical; padding: 12px 13px; border: 1px solid #d7e0ea; border-radius: 10px; background: linear-gradient(180deg, #ffffff, #f7fbff); color: #0f172a; font-size: 13px; line-height: 1.6; }
.semantic-debug-input textarea:focus { outline: none; border-color: rgba(16, 185, 129, .48); box-shadow: 0 0 0 3px rgba(16, 185, 129, .11); }
.semantic-debug-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.semantic-chip { min-height: 30px; padding: 0 10px; border: 1px solid #d8e3ed; border-radius: 999px; background: #f8fbff; color: #334155; font-size: 12px; font-weight: 760; text-align: left; }
.semantic-chip:hover { border-color: rgba(16, 185, 129, .32); background: #eefbf5; color: #0f8f68; }
.semantic-debug-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.semantic-parse-btn { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; border-radius: 9px; background: linear-gradient(135deg, #0f766e, #10b981); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 10px 20px rgba(16, 185, 129, .18); }
.semantic-parse-btn:disabled { background: #cbd5e1; box-shadow: none; }
.semantic-inline-meta { color: #64748b; font-size: 12px; }
.semantic-debug-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff1f2; color: #be123c; font-size: 12px; line-height: 1.55; }
.semantic-result-stack { min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 12px; overflow: hidden; }
.semantic-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.semantic-result-card { min-height: 64px; display: grid; align-content: space-between; gap: 8px; padding: 12px; border: 1px solid #dce5ef; border-radius: 10px; background: linear-gradient(180deg, #ffffff, #f8fbff); }
.semantic-result-card span { color: #64748b; font-size: 12px; font-weight: 700; }
.semantic-result-card strong { color: #0f172a; font-size: 14px; font-weight: 850; word-break: break-word; }
.semantic-field-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.semantic-field-list section { min-height: 72px; padding: 12px; border-radius: 10px; background: #f8fafc; }
.semantic-field-list h4, .semantic-json-block h4 { margin: 0 0 6px; color: #0f766e; font-size: 12px; font-weight: 850; letter-spacing: .02em; }
.semantic-field-list p { margin: 0; color: #334155; font-size: 12px; line-height: 1.6; word-break: break-word; }
.semantic-json-block { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.semantic-json-block pre { min-height: 0; margin: 0; padding: 12px; overflow: auto; border-radius: 10px; background: #0f172a; color: #d7f7ea; font-size: 11px; line-height: 1.55; }
@media (max-width: 1480px) { .qa-layout { grid-template-columns: 300px minmax(0, 1fr) 360px; } }
@media (max-width: 1280px) {
.qa-layout { grid-template-columns: 1fr; overflow-y: auto; }
@@ -74,4 +119,5 @@
@media (max-width: 760px) {
.left-column, .right-column { grid-template-columns: 1fr; }
.composer { grid-template-columns: minmax(0, 1fr) 48px; }
.semantic-result-grid, .semantic-field-list { grid-template-columns: 1fr; }
}

154
web/src/assets/styles/views/travel-reimbursement-create-view.css
View File

@@ -232,6 +232,147 @@
font-size: 14px;
}
.message-meta-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.message-meta-chip,
.capability-chip,
.risk-chip,
.message-risk-chip,
.message-action-chip {
min-height: 28px;
display: inline-flex;
align-items: center;
padding: 0 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
}
.message-meta-chip,
.capability-chip {
background: #eef6ff;
color: #1d4ed8;
}
.risk-chip,
.message-risk-chip {
background: #fff1f2;
color: #be123c;
}
.message-action-chip {
background: #ecfdf5;
color: #059669;
}
.message-detail-block {
margin-top: 12px;
display: grid;
gap: 8px;
}
.message-detail-block > strong {
color: #0f172a;
font-size: 12px;
font-weight: 850;
}
.message-detail-chip-row,
.capability-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.message-citation-list,
.citation-stack,
.action-list {
display: grid;
gap: 10px;
}
.message-citation-card,
.citation-card,
.action-card {
padding: 12px 14px;
border: 1px solid #e2e8f0;
border-radius: 16px;
background: #f8fbff;
}
.message-citation-card header,
.citation-card header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.message-citation-card header span,
.citation-card header strong,
.action-card strong {
color: #0f172a;
font-size: 13px;
font-weight: 850;
}
.message-citation-card header small,
.citation-card header span {
color: #64748b;
font-size: 11px;
font-weight: 700;
}
.message-citation-card p,
.citation-card p,
.action-card p,
.draft-preview pre {
margin: 0;
color: #475569;
font-size: 12px;
line-height: 1.65;
}
.draft-preview {
margin-top: 12px;
padding: 12px 14px;
border: 1px solid #dbe3ec;
border-radius: 16px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.draft-preview header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.draft-preview header strong {
color: #0f172a;
font-size: 13px;
font-weight: 850;
}
.draft-preview header span {
color: #b45309;
font-size: 12px;
font-weight: 800;
}
.draft-preview pre {
white-space: pre-wrap;
word-break: break-word;
font-family: inherit;
}
.message-files,
.composer-files {
display: flex;
@@ -294,6 +435,10 @@
outline: none;
}
.composer-shell textarea:disabled {
color: #94a3b8;
}
.composer-foot {
display: flex;
align-items: center;
@@ -324,6 +469,11 @@
font-size: 20px;
}
.tool-btn:disabled {
opacity: 0.48;
cursor: not-allowed;
}
.composer-tip {
color: #94a3b8;
font-size: 12px;
@@ -591,6 +741,10 @@
font-weight: 850;
}
.action-card {
background: #fff;
}
.receipt-row p,
.receipt-row span {
color: #64748b;