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

fix: 优化报销创建页面样式与洞察面板交互

Browse Source 
修复侧边栏和审计视图样式细节，完善差旅报销洞察面板和消息
组件布局，优化报销创建页面会话管理和流程状态持久化，增强
申请预览工具函数和导航图标，补充单元测试。
This commit is contained in:
caoxiaozhu
2026-05-27 10:32:08 +08:00
parent 2dcc72102d
commit b1a9c8a194
21 changed files with 922 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/assets/styles/views/approval-center-view.css
View File

@@ -74,7 +74,7 @@
height: 38px;
padding: 0 12px 0 36px;
border: 1px solid #d7e0ea;
border-radius: 8px;
border-radius: 4px;
background: #fff;
color: #0f172a;
font-size: 13px;
@@ -98,7 +98,7 @@
justify-content: center;
gap: 9px;
padding: 0 14px;
border-radius: 8px;
border-radius: 4px;
font-size: 14px;
font-weight: 750;
white-space: nowrap;

2
web/src/assets/styles/views/audit-view.css
View File

@@ -306,7 +306,7 @@
display: inline-flex;
align-items: center;
padding: 0 10px;
border-radius: 999px;
border-radius: 4px;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 12px;

2
web/src/assets/styles/views/documents-center-view.css
View File

@@ -295,7 +295,7 @@
gap: 8px;
padding: 0 18px;
border: 0;
border-radius: 10px;
border-radius: 4px;
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
color: #fff;
font-size: 14px;

14
web/src/assets/styles/views/employee-management-view.css
View File

@@ -379,9 +379,9 @@
align-items: center;
justify-content: center;
padding: 0 10px;
border-radius: 999px;
background: #eff6ff;
color: #2563eb;
border-radius: 4px;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 12px;
font-weight: 800;
}
@@ -880,7 +880,7 @@ tbody tr:last-child td {
gap: 10px;
padding: 10px 12px;
border: 1px solid #d7e0ea;
border-radius: 10px;
border-radius: 4px;
background: #fff;
color: #0f172a;
font-size: 13px;
@@ -909,7 +909,7 @@ tbody tr:last-child td {
gap: 10px;
padding: 12px;
border: 1px solid #d7e0ea;
border-radius: 12px;
border-radius: 4px;
background: #fff;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}
@@ -917,7 +917,7 @@ tbody tr:last-child td {
.manager-picker-panel input[type='search'] {
width: 100%;
border: 1px solid #d7e0ea;
border-radius: 10px;
border-radius: 4px;
background: #fff;
color: #0f172a;
font-size: 13px;
@@ -943,7 +943,7 @@ tbody tr:last-child td {
width: 100%;
padding: 10px 12px;
border: 1px solid #edf2f7;
border-radius: 10px;
border-radius: 4px;
background: #fbfdff;
text-align: left;
}

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

@@ -323,9 +323,13 @@
--assistant-viewport-inset: 10px;
}
:global(.assistant-el-overlay) {
--assistant-viewport-inset: 10px;
}
.assistant-modal,
.assistant-modal-stage {
border-radius: 18px;
border-radius: 10px;
}
.assistant-header {

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

@@ -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;