fix: 优化报销创建页面样式与洞察面板交互
修复侧边栏和审计视图样式细节，完善差旅报销洞察面板和消息 组件布局，优化报销创建页面会话管理和流程状态持久化，增强 申请预览工具函数和导航图标，补充单元测试。
This commit is contained in:
caoxiaozhu
@@ -1,3 +1,115 @@
|
||||
:global(.assistant-el-overlay) {
|
||||
--assistant-viewport-inset: clamp(10px, 1.25vmin, 18px);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(239, 246, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%),
|
||||
rgba(241, 245, 249, 0.98);
|
||||
}
|
||||
|
||||
:global(.assistant-el-overlay .el-overlay-dialog) {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
width: 100vw;
|
||||
height: 100dvh;
|
||||
max-height: 100dvh;
|
||||
padding: var(--assistant-viewport-inset);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global(.assistant-el-dialog.el-dialog.is-fullscreen) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global(.assistant-el-dialog .el-dialog__header) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:global(.assistant-el-dialog .assistant-el-dialog-body) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global(.assistant-dialog-zoom-enter-active),
|
||||
:global(.assistant-dialog-zoom-leave-active) {
|
||||
transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1);
|
||||
transition-duration: 180ms !important;
|
||||
}
|
||||
|
||||
:global(.assistant-dialog-zoom-leave-active) {
|
||||
transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
transition-duration: 260ms !important;
|
||||
}
|
||||
|
||||
:global(.assistant-dialog-zoom-enter-active .assistant-modal-stage),
|
||||
:global(.assistant-dialog-zoom-leave-active .assistant-modal-stage) {
|
||||
transform-origin: center center;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
:global(.assistant-dialog-zoom-enter-active .assistant-modal-stage) {
|
||||
animation: assistantWorkbenchScaleIn 260ms cubic-bezier(0.2, 0, 0, 1) both;
|
||||
animation-duration: 260ms !important;
|
||||
}
|
||||
|
||||
:global(.assistant-dialog-zoom-leave-active .assistant-modal-stage) {
|
||||
animation: assistantWorkbenchScaleOut 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
animation-duration: 260ms !important;
|
||||
}
|
||||
|
||||
:global(.assistant-dialog-zoom-enter-from),
|
||||
:global(.assistant-dialog-zoom-leave-to) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes assistantWorkbenchScaleIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.82, 0.82, 1);
|
||||
}
|
||||
|
||||
72% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.012, 1.012, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes assistantWorkbenchScaleOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
62% {
|
||||
opacity: 0.72;
|
||||
transform: scale3d(0.972, 0.972, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.94, 0.94, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.assistant-overlay {
|
||||
/* 距屏幕边缘 10-18px，随视口微调；高度使用 dvh 适配浏览器工具栏 */
|
||||
--assistant-viewport-inset: clamp(10px, 1.25vmin, 18px);
|
||||
@@ -30,7 +142,7 @@
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
border-radius: 24px;
|
||||
border-radius: 10px;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
overflow: hidden;
|
||||
@@ -67,7 +179,7 @@
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
transform: none;
|
||||
border-radius: 24px;
|
||||
border-radius: 10px;
|
||||
background:
|
||||
linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);
|
||||
box-shadow:
|
||||
@@ -78,6 +190,7 @@
|
||||
background-clip: padding-box;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.assistant-header {
|
||||
@@ -87,8 +200,8 @@
|
||||
gap: 16px;
|
||||
flex-shrink: 0;
|
||||
padding: clamp(14px, 2vh, 22px) clamp(148px, 11vw, 172px) clamp(12px, 1.6vh, 18px) clamp(18px, 2vw, 26px);
|
||||
border-bottom: 1px solid rgba(203, 213, 225, 0.78);
|
||||
background: linear-gradient(180deg, rgba(247, 250, 249, 0.82) 0%, rgba(240, 246, 244, 0.7) 100%);
|
||||
border-bottom: none;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.assistant-header-main {
|
||||
@@ -118,21 +231,46 @@
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.assistant-header h2 {
|
||||
.assistant-title {
|
||||
color: #0f172a;
|
||||
font-size: clamp(17px, 1.1vw, var(--wb-fs-title));
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.01em;
|
||||
font-size: 19px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.25;
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
text-decoration: none;
|
||||
user-select: text;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.assistant-header p {
|
||||
margin-top: 4px;
|
||||
.assistant-title + p {
|
||||
margin: 4px 0 0;
|
||||
color: #64748b;
|
||||
font-size: clamp(11px, 0.85vw, var(--wb-fs-desc));
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.assistant-subtitle {
|
||||
margin: 4px 0 0;
|
||||
color: #64748b;
|
||||
font-size: clamp(11px, 0.85vw, var(--wb-fs-desc));
|
||||
line-height: 1.55;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.assistant-header p {
|
||||
color: #64748b;
|
||||
font-size: clamp(11px, 0.85vw, var(--wb-fs-desc));
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.assistant-header-main {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.assistant-header-actions {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
@@ -537,37 +675,82 @@
|
||||
|
||||
.dialog-toolbar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px 18px 12px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgba(238, 242, 247, 0.9);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.dialog-toolbar-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.2px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.dialog-toolbar-label i {
|
||||
color: #475569;
|
||||
opacity: 0.85;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.shortcut-chip {
|
||||
min-height: 36px;
|
||||
margin-right: 0;
|
||||
flex: 0 0 auto;
|
||||
min-height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 14px;
|
||||
gap: 6px;
|
||||
padding: 0 13px;
|
||||
border: 1px solid rgba(219, 230, 240, 0.9);
|
||||
border-radius: 999px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
color: #334155;
|
||||
font-size: var(--wb-fs-chip);
|
||||
font-weight: 750;
|
||||
box-shadow: 0 4px 12px rgba(241, 245, 249, 0.78);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
box-shadow: none;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.shortcut-chip-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.shortcut-chip:hover:not(:disabled) {
|
||||
border-color: rgba(59, 130, 246, 0.45);
|
||||
background: rgba(239, 246, 255, 0.95);
|
||||
color: var(--theme-primary-active, #1d4ed8);
|
||||
}
|
||||
|
||||
.shortcut-chip i {
|
||||
color: var(--theme-primary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.shortcut-chip.active {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.38);
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.55);
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
box-shadow: none;
|
||||
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.18);
|
||||
}
|
||||
|
||||
.shortcut-chip.active i {
|
||||
@@ -580,6 +763,11 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.shortcut-chip:focus-visible {
|
||||
outline: 2px solid rgba(59, 130, 246, 0.55);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
|
||||
Reference in New Issue
Block a user