feat: 同步报销流程与工作台改动

web/src/assets/styles/components/personal-workbench.css

@@ -26,6 +26,8 @@
   --workbench-chart-amber: var(--chart-amber, #b58b4c);
 
   width: 100%;
+  max-width: 1680px;
+  margin: 0 auto;
   height: 100%;
   min-width: 0;
   display: grid;
@@ -581,6 +583,27 @@
   font-weight: 850;
 }
 
+.progress-section-head {
+  align-items: center;
+}
+
+.progress-range-select {
+  width: 124px;
+  flex: 0 0 124px;
+}
+
+.progress-range-select .el-select__wrapper {
+  min-height: 32px;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px var(--workbench-line) inset;
+  background: rgba(255, 255, 255, 0.86);
+}
+
+.progress-range-select .el-select__wrapper.is-focused,
+.progress-range-select .el-select__wrapper:hover {
+  box-shadow: 0 0 0 1px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.38) inset;
+}
+
 .title-with-badge {
   display: inline-flex;
   align-items: center;
@@ -632,7 +655,65 @@
   display: grid;
   min-height: 0;
   height: 100%;
-  grid-auto-rows: minmax(0, 1fr);
+  align-content: start;
+  grid-auto-rows: minmax(56px, auto);
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-right: 4px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28) transparent;
+}
+
+.progress-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.progress-list::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.24);
+}
+
+.progress-empty-state {
+  min-height: 220px;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 8px;
+  padding: 28px 18px;
+  border: 1px dashed rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22);
+  border-radius: 4px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.42)),
+    rgba(var(--theme-primary-rgb, 58, 124, 165), 0.025);
+  color: var(--workbench-muted);
+  text-align: center;
+}
+
+.progress-empty-icon {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
+  border-radius: 4px;
+  background: var(--workbench-primary-soft);
+  color: var(--workbench-primary-active);
+  font-size: 22px;
+}
+
+.progress-empty-state strong {
+  color: var(--workbench-ink);
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.progress-empty-state p {
+  max-width: 260px;
+  margin: 0;
+  color: var(--workbench-muted);
+  font-size: 12px;
+  line-height: 1.55;
 }
 
 .progress-row:first-child {
@@ -645,15 +726,25 @@
   animation-delay: calc(300ms + var(--item-index, 0) * 80ms);
 }
 
-.progress-identity,
+.progress-identity {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
 .progress-result {
-  gap: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 12px;
+}
+
+.progress-identity strong {
+  margin-bottom: 2px;
 }
 
 .progress-identity strong,
 .progress-result strong {
-  margin-bottom: 2px;
-
   overflow: hidden;
   color: var(--workbench-ink);
   font-size: 13px;
@@ -751,45 +842,6 @@
   text-align: left;
 }
 
-.progress-row.has-long-duration-divider {
-  margin-top: 13px;
-  padding-top: 13px;
-  border-top: 0;
-}
-
-.progress-row.has-long-duration-divider::before {
-  content: "10日以上";
-  position: absolute;
-  top: -9px;
-  left: 50%;
-  z-index: 1;
-  display: inline-flex;
-  align-items: center;
-  height: 18px;
-  padding: 0 10px;
-  transform: translateX(-50%);
-  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28);
-  border-radius: 4px;
-  background: color-mix(in srgb, var(--theme-primary) 11%, #ffffff);
-  box-shadow: 0 4px 10px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.12);
-  color: var(--theme-primary-active);
-  font-size: 11px;
-  font-weight: 850;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.progress-row.has-long-duration-divider::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.26);
-  pointer-events: none;
-}
-
 .progress-time-wrapper {
   display: flex;
   align-items: center;