refactor: split project into web and server directories
- Move frontend to web/ directory - Add server/ directory for backend - Restructure project for前后端分离架构 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
1716
web/src/assets/styles/views/approval-center-view.css
Normal file
1716
web/src/assets/styles/views/approval-center-view.css
Normal file
File diff suppressed because it is too large
Load Diff
676
web/src/assets/styles/views/audit-view.css
Normal file
676
web/src/assets/styles/views/audit-view.css
Normal file
@@ -0,0 +1,676 @@
|
||||
.skill-center {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.skill-view-enter-active,
|
||||
.skill-view-leave-active {
|
||||
transition: opacity 220ms ease, transform 300ms var(--ease);
|
||||
}
|
||||
|
||||
.skill-view-enter-from,
|
||||
.skill-view-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(14px);
|
||||
}
|
||||
|
||||
.skill-list,
|
||||
.skill-detail {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.skill-detail {
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.skill-list {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto minmax(0, 1fr);
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.status-tabs {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.status-tabs button {
|
||||
position: relative;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.status-tabs button.active {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.status-tabs button.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -13px;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.list-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 14px 0 10px;
|
||||
}
|
||||
|
||||
.filter-set {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-btn,
|
||||
.create-btn,
|
||||
.row-action {
|
||||
min-height: 36px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.create-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 14px;
|
||||
border: 0;
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 18px rgba(5, 150, 105, 0.18);
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin: 0 0 12px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hint .mdi {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 1120px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 14px 12px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
color: #334155;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
cursor: pointer;
|
||||
transition: background 180ms ease;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
tbody tr.spotlight {
|
||||
background: linear-gradient(90deg, rgba(16, 185, 129, 0.05), rgba(59, 130, 246, 0.03));
|
||||
}
|
||||
|
||||
.skill-name-cell {
|
||||
display: grid;
|
||||
grid-template-columns: 38px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.skill-avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 11px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.skill-avatar.emerald { background: linear-gradient(135deg, #10b981, #059669); }
|
||||
.skill-avatar.violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
|
||||
.skill-avatar.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
|
||||
.skill-avatar.amber { background: linear-gradient(135deg, #f59e0b, #ea580c); }
|
||||
|
||||
.skill-name-cell strong {
|
||||
display: block;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.skill-name-cell span:last-child {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.scope-pill,
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 26px;
|
||||
padding: 0 9px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scope-pill {
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.status-pill.success {
|
||||
background: #dcfce7;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.status-pill.warning {
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.status-pill.draft {
|
||||
background: #eef2ff;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
.row-action {
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgba(16, 185, 129, 0.32);
|
||||
background: #fff;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.detail-scroll {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.detail-hero {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.skill-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.skill-badge.emerald { background: linear-gradient(135deg, #10b981, #059669); }
|
||||
.skill-badge.violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
|
||||
.skill-badge.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
|
||||
.skill-badge.amber { background: linear-gradient(135deg, #f59e0b, #ea580c); }
|
||||
|
||||
.hero-title h2 {
|
||||
margin-top: 10px;
|
||||
color: #0f172a;
|
||||
font-size: 24px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.hero-title p {
|
||||
margin-top: 8px;
|
||||
max-width: 820px;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hero-stat {
|
||||
padding: 14px 16px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, #ffffff, #f8fafc);
|
||||
border: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.hero-stat span {
|
||||
display: block;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero-stat strong {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: #0f172a;
|
||||
font-size: 20px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.78fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.detail-main,
|
||||
.detail-side {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.detail-card,
|
||||
.side-card {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-head h3 {
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.card-head p {
|
||||
margin-top: 6px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.edit-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: #ecfeff;
|
||||
color: #0891b2;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.field.span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.field span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.field input,
|
||||
.field textarea,
|
||||
.prompt-block textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
padding: 10px 12px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.prompt-stack {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.prompt-block {
|
||||
padding: 14px;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 12px;
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
.prompt-block header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.prompt-block strong {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.prompt-block header span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.contract-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.contract-panel {
|
||||
padding: 14px;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 12px;
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
.contract-panel h4 {
|
||||
margin: 0 0 10px;
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.contract-panel ul {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.test-row,
|
||||
.tool-row,
|
||||
.history-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.test-row:first-child,
|
||||
.tool-row:first-child,
|
||||
.history-row:first-child {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.test-row strong,
|
||||
.tool-row strong,
|
||||
.history-row strong {
|
||||
display: block;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.test-row span,
|
||||
.tool-row span,
|
||||
.history-row span,
|
||||
.history-row small {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.test-state,
|
||||
.tool-state {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.test-state.success,
|
||||
.tool-state.safe {
|
||||
background: #dcfce7;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.test-state.warning,
|
||||
.tool-state.active {
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag-list span {
|
||||
min-height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.publish-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.publish-card p,
|
||||
.publish-summary span {
|
||||
margin-top: 6px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.publish-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 42px;
|
||||
padding: 0 12px;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.publish-summary strong {
|
||||
color: #059669;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px 0 0;
|
||||
border-top: 1px solid #e5eaf0;
|
||||
}
|
||||
|
||||
.detail-action-group {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.back-action,
|
||||
.minor-action,
|
||||
.major-action {
|
||||
height: 38px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.back-action {
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.minor-action {
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.major-action {
|
||||
border: 1px solid #059669;
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 12px rgba(5, 150, 105, .16);
|
||||
}
|
||||
|
||||
.mini-btn.primary {
|
||||
border-color: transparent;
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
.hero-stats,
|
||||
.form-grid,
|
||||
.contract-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.skill-list,
|
||||
.detail-card,
|
||||
.side-card,
|
||||
.detail-hero {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.list-toolbar,
|
||||
.card-head,
|
||||
.detail-actions,
|
||||
.detail-action-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.status-tabs,
|
||||
.filter-set {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hero-stats,
|
||||
.form-grid,
|
||||
.contract-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.field.span-2 {
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
77
web/src/assets/styles/views/chat-view.css
Normal file
77
web/src/assets/styles/views/chat-view.css
Normal file
@@ -0,0 +1,77 @@
|
||||
.qa-view { height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); gap: 0; overflow: hidden; animation: fadeUp 240ms var(--ease) both; }
|
||||
.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; }
|
||||
.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; }
|
||||
.side-panel h3, .info-panel h3 { display: inline-flex; align-items: center; gap: 8px; color: #0f172a; font-size: 17px; font-weight: 850; }
|
||||
.outline-action, .info-panel header button { height: 34px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d8e3ed; border-radius: 8px; background: #fff; color: #0f9f78; font-size: 13px; font-weight: 750; white-space: nowrap; }
|
||||
.outline-action { padding: 0 12px; }
|
||||
.info-panel header button { border: 0; color: #64748b; }
|
||||
.session-scroll, .top-question-list, .similar-scroll { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
|
||||
.session-scroll { display: grid; align-content: start; gap: 4px; padding-right: 4px; }
|
||||
.session-row { width: 100%; min-height: 48px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #334155; text-align: left; }
|
||||
.session-row.active, .session-row:hover { background: #eaf8f1; color: #0f8f68; }
|
||||
.session-row span { color: #10b981; }
|
||||
.session-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
|
||||
.session-row time { color: #94a3b8; font-size: 12px; }
|
||||
.chat-panel { height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
|
||||
.message-stream { min-height: 0; display: grid; align-content: start; gap: 16px; padding: 16px 18px 8px; overflow-y: auto; scrollbar-width: thin; }
|
||||
.talk-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; }
|
||||
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 850; }
|
||||
.user-avatar { background: linear-gradient(135deg, #26364d, #61748a); }
|
||||
.assistant-avatar { background: #10b981; font-size: 20px; }
|
||||
.talk-content header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
|
||||
.talk-content header strong { color: #334155; font-size: 14px; font-weight: 800; }
|
||||
.talk-content header time { color: #94a3b8; font-size: 12px; }
|
||||
.user-question { display: inline-block; margin: 0; padding: 9px 16px; border-radius: 8px; background: #e8f5ef; color: #334155; font-size: 14px; line-height: 1.5; }
|
||||
.answer-card, .agent-answer { max-width: 760px; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; color: #334155; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); }
|
||||
.answer-card { display: grid; gap: 10px; padding: 13px 18px; }
|
||||
.answer-card.compact { gap: 10px; }
|
||||
.answer-card h4 { margin: 0 0 5px; color: #10a272; font-size: 13px; font-weight: 850; }
|
||||
.answer-card p, .answer-card ul { margin: 0; font-size: 14px; line-height: 1.58; }
|
||||
.answer-card ul { padding-left: 18px; }
|
||||
.answer-card footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: #64748b; font-size: 12px; }
|
||||
.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; }
|
||||
.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; }
|
||||
.prompt-toolbar button { height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid #dce5ef; border-radius: 8px; background: #fff; color: #334155; font-size: 13px; font-weight: 750; }
|
||||
.prompt-toolbar button i { color: #10b981; }
|
||||
.prompt-toolbar .icon-refresh { width: 34px; padding: 0; justify-content: center; }
|
||||
.composer { min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 10px; padding: 8px; border: 1px solid #cbd8e5; border-radius: 8px; background: linear-gradient(180deg, #fff, #fbfdff); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
|
||||
.composer:focus-within { border-color: rgba(16, 185, 129, .58); background: #fff; box-shadow: 0 0 0 3px rgba(16, 185, 129, .11), 0 10px 24px rgba(15, 23, 42, .06); }
|
||||
.composer textarea { height: 48px; min-height: 48px; resize: none; border: 0; padding: 5px 8px; background: transparent; color: #0f172a; font-size: 14px; line-height: 1.55; }
|
||||
.composer textarea::placeholder { color: #94a3b8; }
|
||||
.composer textarea:focus { outline: none; }
|
||||
.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); }
|
||||
.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; }
|
||||
.top-question-list button:hover { border-color: rgba(16, 185, 129, .32); color: #0f9f78; }
|
||||
.top-question-list strong { color: #10b981; font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; }
|
||||
.top-question-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 750; }
|
||||
.top-question-list i { color: #94a3b8; }
|
||||
.similar-panel { display: grid; }
|
||||
.similar-scroll { display: grid; align-content: start; padding-right: 4px; }
|
||||
.similar-row { min-height: 46px; display: grid; grid-template-columns: minmax(0, 1fr) 48px 14px; align-items: center; gap: 10px; border: 0; border-top: 1px solid #eef2f7; background: transparent; color: #334155; text-align: left; }
|
||||
.similar-row:first-child { border-top: 0; }
|
||||
.similar-row span { min-width: 0; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
|
||||
.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; }
|
||||
@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; }
|
||||
.left-column, .right-column { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.left-column, .right-column { grid-template-columns: 1fr; }
|
||||
.composer { grid-template-columns: minmax(0, 1fr) 48px; }
|
||||
}
|
||||
658
web/src/assets/styles/views/employee-management-view.css
Normal file
658
web/src/assets/styles/views/employee-management-view.css
Normal file
@@ -0,0 +1,658 @@
|
||||
.employee-center {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.employee-view-enter-active,
|
||||
.employee-view-leave-active {
|
||||
transition: opacity 220ms ease, transform 280ms var(--ease);
|
||||
}
|
||||
|
||||
.employee-view-enter-from,
|
||||
.employee-view-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(14px);
|
||||
}
|
||||
|
||||
.employee-list,
|
||||
.employee-detail {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.employee-list {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto minmax(0, 1fr);
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.employee-detail {
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.status-tabs {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.status-tabs button {
|
||||
position: relative;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.status-tabs button.active {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.status-tabs button.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -13px;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.list-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 14px 0 10px;
|
||||
}
|
||||
|
||||
.filter-set {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-search {
|
||||
position: relative;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.list-search .mdi {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #64748b;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.list-search input {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 0 12px 0 36px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.filter-btn,
|
||||
.create-btn,
|
||||
.row-action {
|
||||
min-height: 36px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.create-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 14px;
|
||||
border: 0;
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 18px rgba(5, 150, 105, 0.18);
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin: 0 0 12px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 1320px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 14px 12px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
color: #334155;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
cursor: pointer;
|
||||
transition: background 180ms ease;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
tbody tr.spotlight {
|
||||
background: linear-gradient(90deg, rgba(16, 185, 129, 0.05), rgba(59, 130, 246, 0.03));
|
||||
}
|
||||
|
||||
.employee-cell {
|
||||
display: grid;
|
||||
grid-template-columns: 38px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.employee-avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 11px;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.employee-cell strong {
|
||||
display: block;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.employee-cell span:last-child {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.level-pill,
|
||||
.status-pill,
|
||||
.role-pill,
|
||||
.more-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 26px;
|
||||
padding: 0 9px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.level-pill {
|
||||
background: #eef2ff;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.status-pill.success {
|
||||
background: #dcfce7;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.status-pill.warning {
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.status-pill.neutral {
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.role-stack {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.role-pill {
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.more-pill {
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.row-action {
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgba(16, 185, 129, 0.32);
|
||||
background: #fff;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.detail-scroll {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.detail-hero {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.hero-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.hero-avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, #10b981, #047857);
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.hero-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 26px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.hero-copy h2 {
|
||||
margin-top: 10px;
|
||||
color: #0f172a;
|
||||
font-size: 24px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
margin-top: 8px;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hero-stat {
|
||||
padding: 14px 16px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, #ffffff, #f8fafc);
|
||||
border: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.hero-stat span {
|
||||
display: block;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero-stat strong {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: #0f172a;
|
||||
font-size: 18px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.82fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.detail-main,
|
||||
.detail-side {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.detail-card,
|
||||
.side-card {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-head h3 {
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.card-head p {
|
||||
margin-top: 6px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.count-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: #ecfeff;
|
||||
color: #0891b2;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.field span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.field input {
|
||||
width: 100%;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.role-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.role-card {
|
||||
display: grid;
|
||||
grid-template-columns: 18px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
padding: 14px;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 14px;
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
.role-card.active {
|
||||
border-color: rgba(16, 185, 129, 0.32);
|
||||
background: linear-gradient(180deg, rgba(240, 253, 244, 0.85), #ffffff);
|
||||
}
|
||||
|
||||
.role-card input {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.role-copy strong {
|
||||
display: block;
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.role-copy p {
|
||||
margin-top: 6px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.bullet-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin: 14px 0 0;
|
||||
padding-left: 18px;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.history-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.history-row:first-child {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.history-row strong {
|
||||
display: block;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.history-row span,
|
||||
.history-row small {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.publish-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.publish-card p,
|
||||
.publish-summary span {
|
||||
margin-top: 6px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.publish-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 42px;
|
||||
padding: 0 12px;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.publish-summary strong {
|
||||
color: #059669;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px 0 0;
|
||||
border-top: 1px solid #e5eaf0;
|
||||
}
|
||||
|
||||
.detail-action-group {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.back-action,
|
||||
.minor-action,
|
||||
.major-action {
|
||||
height: 38px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.back-action {
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.minor-action {
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.major-action {
|
||||
border: 1px solid #059669;
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.16);
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
.hero-stats,
|
||||
.form-grid,
|
||||
.role-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.employee-list,
|
||||
.detail-card,
|
||||
.side-card,
|
||||
.detail-hero {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.list-toolbar,
|
||||
.card-head,
|
||||
.detail-actions,
|
||||
.detail-action-group,
|
||||
.hero-profile {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.status-tabs,
|
||||
.filter-set {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.list-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-stats,
|
||||
.form-grid,
|
||||
.role-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
687
web/src/assets/styles/views/login-view.css
Normal file
687
web/src/assets/styles/views/login-view.css
Normal file
@@ -0,0 +1,687 @@
|
||||
.login-page {
|
||||
position: relative;
|
||||
min-height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(620px, .96fr) minmax(520px, .84fr);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: clamp(32px, 4.8vw, 76px);
|
||||
padding: 48px clamp(40px, 5vw, 86px);
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(120deg, rgba(236,253,245,.72), transparent 34%),
|
||||
linear-gradient(105deg, #f8fafc 0%, #f4fbf8 44%, #f8fafc 100%);
|
||||
}
|
||||
|
||||
.login-page::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px),
|
||||
linear-gradient(0deg, rgba(15,23,42,.04) 1px, transparent 1px),
|
||||
radial-gradient(circle at 28% 72%, rgba(16,185,129,.12), transparent 28%),
|
||||
radial-gradient(circle at 75% 22%, rgba(245,158,11,.08), transparent 30%);
|
||||
background-size: 72px 72px, 72px 72px, auto, auto;
|
||||
mask-image: linear-gradient(100deg, rgba(0,0,0,.7), rgba(0,0,0,.32) 48%, rgba(0,0,0,.16));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login-page::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -9vw;
|
||||
top: 13vh;
|
||||
z-index: 0;
|
||||
width: min(820px, 58vw);
|
||||
height: min(560px, 64vh);
|
||||
border: 1px solid rgba(148,163,184,.22);
|
||||
border-radius: 18px;
|
||||
background:
|
||||
linear-gradient(90deg, transparent 0 28%, rgba(15,23,42,.055) 28% calc(28% + 1px), transparent calc(28% + 1px)),
|
||||
repeating-linear-gradient(0deg, transparent 0 35px, rgba(15,23,42,.05) 36px),
|
||||
linear-gradient(135deg, rgba(255,255,255,.74), rgba(236,253,245,.32));
|
||||
box-shadow: 0 34px 80px rgba(15,23,42,.08);
|
||||
transform: rotate(-7deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.page-brand {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: clamp(42px, 6vw, 86px);
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #111827;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
:deep(.logo-mark) {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
:deep(.logo-mark svg) {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
align-self: stretch;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-items: start;
|
||||
padding-top: 40px;
|
||||
transform: translateX(34px);
|
||||
}
|
||||
|
||||
.eyebrow-text {
|
||||
color: #059669;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin-top: 16px;
|
||||
color: #0f172a;
|
||||
font-size: clamp(38px, 3.8vw, 54px);
|
||||
line-height: 1.12;
|
||||
font-weight: 950;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
margin-top: 14px;
|
||||
color: #111827;
|
||||
font-size: clamp(23px, 2.15vw, 31px);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
margin-top: 14px;
|
||||
color: #64748b;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-stage {
|
||||
position: relative;
|
||||
width: min(760px, 100%);
|
||||
height: 350px;
|
||||
margin-top: 22px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.hero-stage::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 285px;
|
||||
bottom: 38px;
|
||||
width: 230px;
|
||||
height: 62px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(90deg, rgba(16,185,129,.16), rgba(245,158,11,.12));
|
||||
filter: blur(4px);
|
||||
}
|
||||
|
||||
.flow-line {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
display: block;
|
||||
border: 1px solid rgba(16,185,129,.18);
|
||||
border-left: 0;
|
||||
border-bottom: 0;
|
||||
border-radius: 0 22px 0 0;
|
||||
}
|
||||
|
||||
.flow-line::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #10b981;
|
||||
box-shadow: 0 0 0 5px rgba(16,185,129,.12);
|
||||
}
|
||||
|
||||
.flow-a {
|
||||
left: 190px;
|
||||
top: 76px;
|
||||
width: 170px;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.flow-b {
|
||||
left: 190px;
|
||||
bottom: 96px;
|
||||
width: 142px;
|
||||
height: 82px;
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
.flow-c {
|
||||
right: 182px;
|
||||
top: 96px;
|
||||
width: 132px;
|
||||
height: 70px;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.metric-card,
|
||||
.document-card,
|
||||
.round-badge {
|
||||
position: absolute;
|
||||
border: 1px solid rgba(215, 224, 234, .86);
|
||||
background: rgba(255,255,255,.78);
|
||||
box-shadow: 0 18px 36px rgba(65, 88, 110, .10);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
z-index: 2;
|
||||
width: 166px;
|
||||
min-height: 110px;
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
padding: 17px 18px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.metric-card span {
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.metric-card strong {
|
||||
color: #0f172a;
|
||||
font-size: 25px;
|
||||
line-height: 1;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.metric-card small {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.up { color: #059669; }
|
||||
.danger { color: #ef4444; }
|
||||
|
||||
.amount { left: 20px; top: 20px; }
|
||||
.risk { left: 42px; bottom: 24px; }
|
||||
.audit { right: 22px; top: 24px; }
|
||||
.sla { right: 40px; bottom: 20px; }
|
||||
|
||||
.mini-bars {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 6px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.mini-bars i {
|
||||
width: 14px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
background: linear-gradient(180deg, #93c5fd, #dbeafe);
|
||||
}
|
||||
.mini-bars i:nth-child(1) { height: 11px; }
|
||||
.mini-bars i:nth-child(2) { height: 18px; }
|
||||
.mini-bars i:nth-child(3) { height: 24px; }
|
||||
.mini-bars i:nth-child(4) { height: 32px; }
|
||||
|
||||
.document-card {
|
||||
z-index: 1;
|
||||
left: 286px;
|
||||
top: 44px;
|
||||
width: 220px;
|
||||
height: 214px;
|
||||
padding: 28px 28px;
|
||||
border-radius: 16px;
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
|
||||
.document-card span {
|
||||
color: #1e293b;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.document-card > i {
|
||||
display: block;
|
||||
height: 10px;
|
||||
margin-top: 22px;
|
||||
border-radius: 999px;
|
||||
background: #e4ebf5;
|
||||
}
|
||||
.document-card > i:nth-of-type(2) { width: 78%; margin-top: 16px; }
|
||||
.document-card > i:nth-of-type(3) { width: 54%; margin-top: 16px; }
|
||||
|
||||
.doc-check {
|
||||
position: absolute;
|
||||
right: -16px;
|
||||
bottom: -12px;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, #6ee7b7, #059669);
|
||||
color: #fff;
|
||||
font-size: 27px;
|
||||
box-shadow: 0 14px 28px rgba(5,150,105,.25);
|
||||
}
|
||||
|
||||
.shield-art {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 316px;
|
||||
bottom: 0;
|
||||
width: 155px;
|
||||
height: 155px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 22px 24px rgba(125, 91, 54, .16));
|
||||
}
|
||||
|
||||
.round-badge {
|
||||
z-index: 4;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
color: #3b82f6;
|
||||
font-size: 24px;
|
||||
font-weight: 950;
|
||||
}
|
||||
|
||||
.round-badge.ai {
|
||||
left: 258px;
|
||||
top: 30px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
color: #3b82f6;
|
||||
font-size: 21px;
|
||||
box-shadow: 0 14px 30px rgba(59,130,246,.14);
|
||||
}
|
||||
|
||||
.feature-strip {
|
||||
width: min(760px, 100%);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
margin-top: 18px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.feature-strip article {
|
||||
min-height: 78px;
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(215, 224, 234, .82);
|
||||
border-radius: 13px;
|
||||
background: rgba(255,255,255,.76);
|
||||
box-shadow: 0 12px 30px rgba(65, 88, 110, .08);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.feature-strip article > span {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 11px;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.feature-strip .green { background: #dff7ee; color: #059669; }
|
||||
.feature-strip .red { background: #fee2e2; color: #ef4444; }
|
||||
.feature-strip .blue { background: #dbeafe; color: #3b82f6; }
|
||||
|
||||
.feature-strip strong {
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.feature-strip p {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
color: #64748b;
|
||||
font-size: 11.5px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
justify-self: center;
|
||||
display: grid;
|
||||
padding: 58px 60px 44px;
|
||||
border: 1px solid rgba(215, 224, 234, .96);
|
||||
border-radius: 20px;
|
||||
background: rgba(255,255,255,.86);
|
||||
box-shadow: 0 24px 64px rgba(65, 88, 110, .16);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.card-brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
color: #0f172a;
|
||||
font-size: 22px;
|
||||
font-weight: 950;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-head h2 {
|
||||
color: #0f172a;
|
||||
font-size: 34px;
|
||||
line-height: 1.15;
|
||||
font-weight: 950;
|
||||
}
|
||||
|
||||
.card-head p {
|
||||
margin-top: 12px;
|
||||
color: #64748b;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.field {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 52px;
|
||||
}
|
||||
|
||||
.field > .mdi {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
color: #64748b;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.field input {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
padding: 0 50px 0 48px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,.86);
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||
}
|
||||
|
||||
.field input::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.field input:focus {
|
||||
border-color: #10b981;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(16,185,129,.13);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field-icon-btn {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.field-icon-btn:hover {
|
||||
background: #f1f5f9;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.form-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.remember {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.remember input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: #059669;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #2563eb;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.submit-btn,
|
||||
.sso-btn {
|
||||
height: 52px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
margin-top: 4px;
|
||||
border: 0;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
color: #fff;
|
||||
box-shadow: 0 16px 30px rgba(5,150,105,.20);
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background: linear-gradient(135deg, #13c990, #047857);
|
||||
}
|
||||
|
||||
.divider {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 28px;
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.divider::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.divider span {
|
||||
position: relative;
|
||||
padding: 0 16px;
|
||||
background: rgba(255,255,255,.9);
|
||||
}
|
||||
|
||||
.sso-btn {
|
||||
border: 1px solid #10b981;
|
||||
background: rgba(255,255,255,.78);
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.sso-btn:hover {
|
||||
background: #ecfdf5;
|
||||
}
|
||||
|
||||
.security-note {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 34px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.security-note .mdi {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.login-page {
|
||||
grid-template-columns: minmax(520px, 1fr) minmax(480px, 540px);
|
||||
gap: 44px;
|
||||
padding-inline: 48px;
|
||||
}
|
||||
|
||||
.hero-stage {
|
||||
transform: scale(.88);
|
||||
transform-origin: left center;
|
||||
margin-bottom: -32px;
|
||||
}
|
||||
|
||||
.feature-strip {
|
||||
width: 520px;
|
||||
gap: 14px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.login-card { max-width: 500px; }
|
||||
}
|
||||
|
||||
@media (max-height: 840px) and (min-width: 981px) {
|
||||
.hero {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.hero-stage {
|
||||
margin-top: 16px;
|
||||
transform: scale(.9);
|
||||
transform-origin: left center;
|
||||
margin-bottom: -22px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding-block: 38px 28px;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
gap: 14px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.security-note {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.login-page {
|
||||
min-height: 100dvh;
|
||||
grid-template-columns: 1fr;
|
||||
padding: 92px 28px 28px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.page-brand {
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
max-width: 520px;
|
||||
padding: 40px 28px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.login-page {
|
||||
padding-inline: 22px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 32px 22px 24px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.card-head h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.form-meta {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
387
web/src/assets/styles/views/overview-view.css
Normal file
387
web/src/assets/styles/views/overview-view.css
Normal file
@@ -0,0 +1,387 @@
|
||||
.dashboard {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
animation: fadeUp 260ms var(--ease) both;
|
||||
}
|
||||
|
||||
.kpi-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
position: relative;
|
||||
padding: 12px 14px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: 3px solid var(--accent);
|
||||
animation: dashboardItemIn 520ms var(--ease) both;
|
||||
animation-delay: var(--delay, 0ms);
|
||||
transition: box-shadow 200ms ease, transform 200ms ease;
|
||||
}
|
||||
|
||||
.kpi-card:hover {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.kpi-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.kpi-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 7px;
|
||||
background: color-mix(in srgb, var(--accent) 10%, white);
|
||||
color: var(--accent);
|
||||
font-size: 14px;
|
||||
flex: 0 0 auto;
|
||||
animation: iconPop 560ms var(--ease) both;
|
||||
animation-delay: calc(var(--delay, 0ms) + 100ms);
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
display: block;
|
||||
min-height: 22px;
|
||||
color: #0f172a;
|
||||
font-size: clamp(16px, 1.2vw, 20px);
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.kpi-trend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
padding-top: 6px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.kpi-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.kpi-badge.up {
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.kpi-badge.down {
|
||||
background: rgba(22, 163, 74, 0.08);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.kpi-badge .mdi {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.kpi-delta {
|
||||
color: #94a3b8;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
padding: 20px;
|
||||
transition: box-shadow 200ms ease, transform 200ms ease;
|
||||
animation: dashboardItemIn 560ms var(--ease) both;
|
||||
}
|
||||
|
||||
.top-grid .dashboard-card:nth-child(1) { animation-delay: 80ms; }
|
||||
.top-grid .dashboard-card:nth-child(2) { animation-delay: 150ms; }
|
||||
.top-grid .dashboard-card:nth-child(3) { animation-delay: 220ms; }
|
||||
.bottom-grid .dashboard-card:nth-child(1) { animation-delay: 290ms; }
|
||||
.bottom-grid .dashboard-card:nth-child(2) { animation-delay: 360ms; }
|
||||
.bottom-grid .dashboard-card:nth-child(3) { animation-delay: 430ms; }
|
||||
|
||||
.dashboard-card:hover {
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.trend-panel,
|
||||
.rank-panel {
|
||||
grid-column: span 6;
|
||||
}
|
||||
|
||||
.donut-panel,
|
||||
.bottleneck-panel,
|
||||
.budget-panel {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-head h3 {
|
||||
color: #1e293b;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.card-head .mdi {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
|
||||
.card-select {
|
||||
height: 30px;
|
||||
min-width: 82px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.panel-note {
|
||||
margin-top: 8px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bottleneck-panel,
|
||||
.budget-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bottleneck-panel .text-link,
|
||||
.budget-panel .text-link {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.bottleneck-list {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.bottleneck-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
animation: listRowIn 460ms var(--ease) both;
|
||||
animation-delay: var(--delay, 0ms);
|
||||
}
|
||||
|
||||
.reviewer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.reviewer-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #e2f6ef;
|
||||
color: #047857;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.reviewer strong,
|
||||
.reviewer-stats strong {
|
||||
display: block;
|
||||
color: #1e293b;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.reviewer span,
|
||||
.reviewer-stats span {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.reviewer-stats {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status-tag.danger {
|
||||
background: rgba(239,68,68,.10);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.status-tag.warning {
|
||||
background: rgba(245,158,11,.10);
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.status-tag.success {
|
||||
background: rgba(16,185,129,.10);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.text-link {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 0 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
background: transparent;
|
||||
color: #10b981;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@keyframes dashboardItemIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes listRowIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes iconPop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.82);
|
||||
}
|
||||
70% {
|
||||
opacity: 1;
|
||||
transform: scale(1.04);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.kpi-card,
|
||||
.dashboard-card,
|
||||
.bottleneck-row {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
.kpi-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.trend-panel,
|
||||
.rank-panel {
|
||||
grid-column: span 12;
|
||||
}
|
||||
|
||||
.donut-panel,
|
||||
.bottleneck-panel,
|
||||
.budget-panel {
|
||||
grid-column: span 6;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.kpi-grid,
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.trend-panel,
|
||||
.rank-panel,
|
||||
.donut-panel,
|
||||
.bottleneck-panel,
|
||||
.budget-panel {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.donut-wrap {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.rank-row {
|
||||
grid-template-columns: 24px 64px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.rank-value {
|
||||
grid-column: 2 / -1;
|
||||
}
|
||||
|
||||
.budget-summary {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
643
web/src/assets/styles/views/policies-view.css
Normal file
643
web/src/assets/styles/views/policies-view.css
Normal file
@@ -0,0 +1,643 @@
|
||||
.knowledge-page {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
animation: fadeUp 220ms var(--ease) both;
|
||||
}
|
||||
|
||||
.knowledge-grid {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 0;
|
||||
gap: 0;
|
||||
transition: grid-template-columns 320ms var(--ease), gap 320ms var(--ease);
|
||||
}
|
||||
|
||||
.knowledge-grid.has-preview {
|
||||
grid-template-columns: minmax(560px, 1fr) minmax(420px, 0.82fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.knowledge-main,
|
||||
.preview-column {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.knowledge-main {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.library-panel {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
padding: 16px 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.panel-title h2,
|
||||
.preview-head h2 {
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.panel-title p,
|
||||
.preview-head p {
|
||||
margin-top: 6px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.preview-hint {
|
||||
min-height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
transition: background 220ms ease, color 220ms ease;
|
||||
}
|
||||
|
||||
.preview-hint.active {
|
||||
background: #dcfce7;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.library-body {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 180px minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.folder-rail {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
border-right: 1px solid #edf2f7;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.folder-search {
|
||||
height: 36px;
|
||||
display: grid;
|
||||
grid-template-columns: 18px minmax(0, 1fr) 24px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 8px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.folder-search input {
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.folder-search input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.folder-search button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.folder-tree {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 6px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.folder-tree button {
|
||||
min-height: 34px;
|
||||
display: grid;
|
||||
grid-template-columns: 18px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 9px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.folder-tree button.active {
|
||||
background: #dcfce7;
|
||||
color: #059669;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.folder-tree b {
|
||||
min-width: 24px;
|
||||
height: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.new-folder-btn {
|
||||
min-height: 36px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border: 1px solid rgba(16, 185, 129, .28);
|
||||
border-radius: 8px;
|
||||
background: #f0fdf4;
|
||||
color: #059669;
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.document-area {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.upload-zone {
|
||||
min-height: 112px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: 8px;
|
||||
border: 1px dashed #93c5fd;
|
||||
border-radius: 10px;
|
||||
background: #f8fbff;
|
||||
color: #334155;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.upload-zone i {
|
||||
color: #2563eb;
|
||||
font-size: 31px;
|
||||
}
|
||||
|
||||
.upload-zone strong {
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.upload-zone span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.doc-table-wrap {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 690px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px 10px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
color: #24324a;
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f7fafc;
|
||||
color: #64748b;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.doc-row {
|
||||
cursor: pointer;
|
||||
transition: background 180ms ease, box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.doc-row:hover {
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.doc-row.selected {
|
||||
background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.04));
|
||||
box-shadow: inset 3px 0 0 #10b981;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-name .pdf,
|
||||
.viewer-filetype.pdf { color: #ef4444; }
|
||||
.file-name .word,
|
||||
.viewer-filetype.word { color: #2563eb; }
|
||||
.file-name .excel,
|
||||
.viewer-filetype.excel { color: #10b981; }
|
||||
|
||||
.doc-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 22px;
|
||||
padding: 0 7px;
|
||||
border-radius: 6px;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.state-tag {
|
||||
min-height: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.state-tag.success {
|
||||
background: #dcfce7;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.state-tag.warning {
|
||||
background: #ffedd5;
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.list-foot {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.list-foot button {
|
||||
min-height: 32px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.pager button {
|
||||
width: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pager button.active {
|
||||
border-color: #059669;
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.list-foot input {
|
||||
width: 42px;
|
||||
height: 30px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 7px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preview-column {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-panel {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto minmax(0, 1fr);
|
||||
padding: 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.preview-kicker {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.preview-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mini-action,
|
||||
.icon-action,
|
||||
.viewer-toolbar-actions button {
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.mini-action {
|
||||
min-height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.icon-action {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.preview-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.preview-meta span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: #f8fafc;
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.preview-viewer {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.viewer-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 44px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.viewer-filetype {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.viewer-toolbar-actions {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.viewer-toolbar-actions button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.page-stage {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.page-sheet {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
padding: 18px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
|
||||
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
|
||||
animation: previewSheetIn 360ms var(--ease) both;
|
||||
animation-delay: var(--page-delay, 0ms);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.page-title strong {
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.page-title span,
|
||||
.page-title b {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.summary-item span {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.summary-item strong {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.content-block {
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.content-block h3 {
|
||||
margin: 0 0 8px;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.content-block ul {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.preview-panel-enter-active,
|
||||
.preview-panel-leave-active {
|
||||
transition: opacity 240ms ease, transform 320ms var(--ease);
|
||||
}
|
||||
|
||||
.preview-panel-enter-from,
|
||||
.preview-panel-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(24px) scale(0.98);
|
||||
}
|
||||
|
||||
@keyframes previewSheetIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(14px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
.knowledge-grid.has-preview {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.knowledge-grid,
|
||||
.knowledge-grid.has-preview {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.library-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.folder-rail {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
padding: 0 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.panel-title,
|
||||
.preview-head,
|
||||
.viewer-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.summary-grid,
|
||||
.list-foot {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
523
web/src/assets/styles/views/requests-view.css
Normal file
523
web/src/assets/styles/views/requests-view.css
Normal file
@@ -0,0 +1,523 @@
|
||||
.travel-page {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
animation: fadeUp 220ms var(--ease) both;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.travel-list {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
|
||||
padding: 16px 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-search {
|
||||
position: relative;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.list-search .mdi {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #64748b;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.list-search input {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 0 12px 0 36px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.list-search input::placeholder {
|
||||
color: #8da0b4;
|
||||
}
|
||||
|
||||
.list-search input:focus {
|
||||
border-color: #10b981;
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.status-tabs {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
margin-top: 14px;
|
||||
border-bottom: 1px solid #dbe4ee;
|
||||
}
|
||||
|
||||
.status-tabs button {
|
||||
position: relative;
|
||||
min-height: 36px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.status-tabs button.active {
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.status-tabs button.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -1px;
|
||||
height: 3px;
|
||||
border-radius: 999px 999px 0 0;
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.list-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.filter-set {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.create-request-btn {
|
||||
min-height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 18px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 10px 24px rgba(5, 150, 105, 0.2);
|
||||
transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
|
||||
}
|
||||
|
||||
.create-request-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 14px 28px rgba(5, 150, 105, 0.24);
|
||||
filter: saturate(1.02);
|
||||
}
|
||||
|
||||
.filter-btn,
|
||||
.page-size {
|
||||
min-height: 38px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 9px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
min-width: 120px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.date-range-filter {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.date-range-trigger {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.date-range-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 110px;
|
||||
}
|
||||
|
||||
.date-range-popover {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
left: 0;
|
||||
width: 320px;
|
||||
z-index: 40;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
|
||||
}
|
||||
|
||||
.date-range-popover header,
|
||||
.date-range-popover footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.date-range-popover header strong {
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.date-range-popover header button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.date-range-popover header button:hover {
|
||||
background: #f1f5f9;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.date-range-fields {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.date-range-fields label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.date-range-fields span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-range-fields input {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 8px;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.date-range-fields input:focus {
|
||||
border-color: #10b981;
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ghost-btn,
|
||||
.apply-btn {
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.ghost-btn {
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
border: 0;
|
||||
background: #10b981;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.apply-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.filter-btn:hover,
|
||||
.page-size:hover {
|
||||
border-color: rgba(16, 185, 129, .32);
|
||||
color: #0f9f78;
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
margin-top: 10px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.hint .mdi {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
margin-top: 10px;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
table {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-width: 1140px;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
colgroup col {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 13px 12px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
color: #24324a;
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background: #f7fafc;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: linear-gradient(90deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, .03));
|
||||
}
|
||||
|
||||
tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.doc-id {
|
||||
color: #059669;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
min-height: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 9px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-tag.info {
|
||||
border-color: #bfdbfe;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.status-tag.success {
|
||||
border-color: #bbf7d0;
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.status-tag.warning {
|
||||
border-color: #fed7aa;
|
||||
background: #fff7ed;
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.status-tag.neutral {
|
||||
border-color: #cbd5e1;
|
||||
background: #f8fafc;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.list-foot {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.page-summary {
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.pager button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.pager button:hover:not(.active) {
|
||||
background: #fff;
|
||||
color: #059669;
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
|
||||
}
|
||||
|
||||
.pager button.active {
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 16px rgba(5, 150, 105, .20);
|
||||
}
|
||||
|
||||
.page-nav {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.page-size {
|
||||
justify-self: end;
|
||||
min-width: 112px;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
|
||||
}
|
||||
|
||||
.page-size-wrap {
|
||||
position: relative;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.page-size-dropdown {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
right: 0;
|
||||
z-index: 40;
|
||||
display: grid;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-size-dropdown button {
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
padding: 0 20px;
|
||||
transition: background 120ms ease, color 120ms ease;
|
||||
}
|
||||
|
||||
.page-size-dropdown button:hover {
|
||||
background: #f0fdf4;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.page-size-dropdown button.active {
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.list-toolbar,
|
||||
.list-foot {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.travel-list {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.status-tabs {
|
||||
gap: 18px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.filter-btn,
|
||||
.page-size {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-set {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list-foot {
|
||||
display: grid;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
.pager,
|
||||
.page-size {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
756
web/src/assets/styles/views/travel-reimbursement-create-view.css
Normal file
756
web/src/assets/styles/views/travel-reimbursement-create-view.css
Normal file
@@ -0,0 +1,756 @@
|
||||
.assistant-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(15, 23, 42, 0.46);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.assistant-modal {
|
||||
width: min(1480px, calc(100vw - 48px));
|
||||
height: min(920px, calc(100vh - 40px));
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
border-radius: 28px;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(16, 185, 129, 0.08), transparent 24%),
|
||||
linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
|
||||
box-shadow:
|
||||
0 24px 80px rgba(15, 23, 42, 0.22),
|
||||
0 2px 12px rgba(15, 23, 42, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.assistant-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 24px 28px 20px;
|
||||
border-bottom: 1px solid #e5edf5;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
.assistant-header-main {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.assistant-badge {
|
||||
min-height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
color: #059669;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.assistant-header h2 {
|
||||
color: #0f172a;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.assistant-header p {
|
||||
margin-top: 4px;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.assistant-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.source-pill {
|
||||
min-height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: #64748b;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.assistant-layout {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 18px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.assistant-layout.has-insight {
|
||||
grid-template-columns: minmax(0, 1.18fr) 420px;
|
||||
}
|
||||
|
||||
.dialog-panel,
|
||||
.insight-panel {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
border: 1px solid #e7eef6;
|
||||
border-radius: 24px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.dialog-panel {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-toolbar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
padding: 18px 20px 14px;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
}
|
||||
|
||||
.shortcut-chip {
|
||||
min-height: 36px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #dbe6f0;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.shortcut-chip i {
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.message-row {
|
||||
display: grid;
|
||||
grid-template-columns: 38px minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.message-row.user {
|
||||
grid-template-columns: minmax(0, 1fr) 38px;
|
||||
}
|
||||
|
||||
.message-row.user .message-avatar {
|
||||
order: 2;
|
||||
background: #dbeafe;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.message-row.user .message-bubble {
|
||||
order: 1;
|
||||
justify-self: end;
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(37, 99, 235, 0.04));
|
||||
border-color: rgba(37, 99, 235, 0.16);
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #dff7ee;
|
||||
color: #059669;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
max-width: min(100%, 720px);
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #e1e8f0;
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
color: #24324a;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.message-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.message-meta strong {
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.message-meta time {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.message-bubble p {
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.message-files,
|
||||
.composer-files {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.file-chip {
|
||||
min-height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.file-chip.active {
|
||||
background: #eef6ff;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.composer {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
.hidden-file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.composer-shell {
|
||||
border: 1px solid #d6e1ea;
|
||||
border-radius: 22px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.composer-shell textarea {
|
||||
width: 100%;
|
||||
min-height: 84px;
|
||||
resize: none;
|
||||
border: 0;
|
||||
padding: 18px 18px 8px;
|
||||
background: transparent;
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.composer-shell textarea::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.composer-shell textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.composer-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 0 14px 14px;
|
||||
}
|
||||
|
||||
.composer-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.tool-btn,
|
||||
.send-btn {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.composer-tip {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
background: #10b981;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
box-shadow: 0 10px 22px rgba(16, 185, 129, 0.22);
|
||||
}
|
||||
|
||||
.send-btn:disabled {
|
||||
opacity: 0.48;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.insight-panel {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.insight-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
}
|
||||
|
||||
.intent-pill {
|
||||
min-height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.intent-pill.welcome {
|
||||
background: #eef2ff;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.intent-pill.draft {
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.intent-pill.approval {
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.intent-pill.recognition {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.intent-pill.note {
|
||||
background: #fdf2f8;
|
||||
color: #db2777;
|
||||
}
|
||||
|
||||
.insight-head h3 {
|
||||
margin-top: 10px;
|
||||
color: #0f172a;
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.insight-head p {
|
||||
margin-top: 6px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.confidence-card {
|
||||
min-width: 92px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 16px;
|
||||
background: #f8fafc;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.confidence-card span {
|
||||
display: block;
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.confidence-card strong {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #0f172a;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.insight-body {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 14px;
|
||||
padding: 18px 20px 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.insight-card {
|
||||
padding: 16px;
|
||||
border: 1px solid #e7eef6;
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.insight-card.primary {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.card-head h4 {
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
min-height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-pill.success {
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.status-pill.warning {
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.status-pill.note {
|
||||
background: #fdf2f8;
|
||||
color: #db2777;
|
||||
}
|
||||
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.metric-grid.single {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
padding: 12px 14px;
|
||||
border-radius: 16px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.metric-item span {
|
||||
display: block;
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.metric-item strong {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.timeline-list,
|
||||
.bullet-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.timeline-list li {
|
||||
display: grid;
|
||||
grid-template-columns: 14px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-top: 5px;
|
||||
border-radius: 999px;
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.timeline-list li.done .timeline-dot,
|
||||
.timeline-list li.current .timeline-dot {
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.timeline-list strong {
|
||||
display: block;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.timeline-list p,
|
||||
.bullet-list li,
|
||||
.welcome-card p,
|
||||
.note-block p {
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.receipt-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.receipt-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
border-radius: 16px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.receipt-row strong,
|
||||
.welcome-card strong,
|
||||
.note-block strong {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.receipt-row p,
|
||||
.receipt-row span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.receipt-side {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.receipt-side strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.note-block {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.note-block span {
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.welcome-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.welcome-card {
|
||||
padding: 14px;
|
||||
border-radius: 18px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.welcome-card i {
|
||||
color: #10b981;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.welcome-card strong {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.assistant-modal-enter-active,
|
||||
.assistant-modal-leave-active {
|
||||
transition: opacity 220ms ease;
|
||||
}
|
||||
|
||||
.assistant-modal-enter-active .assistant-modal,
|
||||
.assistant-modal-leave-active .assistant-modal {
|
||||
transition: transform 260ms ease, opacity 220ms ease;
|
||||
}
|
||||
|
||||
.assistant-modal-enter-from,
|
||||
.assistant-modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.assistant-modal-enter-from .assistant-modal,
|
||||
.assistant-modal-leave-to .assistant-modal {
|
||||
transform: translateY(10px) scale(0.985);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.insight-switch-enter-active,
|
||||
.insight-switch-leave-active {
|
||||
transition: opacity 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.insight-switch-enter-from,
|
||||
.insight-switch-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
.insight-panel-enter-active,
|
||||
.insight-panel-leave-active {
|
||||
transition: opacity 220ms ease, transform 240ms ease;
|
||||
}
|
||||
|
||||
.insight-panel-enter-from,
|
||||
.insight-panel-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(18px);
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.assistant-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.insight-panel {
|
||||
min-height: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.assistant-modal {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.assistant-header {
|
||||
padding: 18px 18px 16px;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.assistant-header-actions {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.assistant-layout {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.dialog-toolbar {
|
||||
padding: 16px 16px 12px;
|
||||
}
|
||||
|
||||
.shortcut-chip {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.message-row,
|
||||
.message-row.user {
|
||||
grid-template-columns: 34px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.message-row.user .message-avatar {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.message-row.user .message-bubble {
|
||||
order: 0;
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.composer {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.composer-foot {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.metric-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
1164
web/src/assets/styles/views/travel-request-detail-view.css
Normal file
1164
web/src/assets/styles/views/travel-request-detail-view.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user