feat: 风险可见性控制与差旅详情页交互优化

- 新增风险可见性工具函数与风险日趋势图表组件
- 优化差旅请求详情页费用模型与视图交互
- 完善顶部导航栏样式与应用壳路由逻辑
- 补充风险可见性、风险看板与差旅详情测试覆盖

web/src/assets/styles/components/top-bar.css

@@ -881,6 +881,176 @@
   line-height: 1.5;
 }
 
+.help-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.help-wrap.is-open .help-btn {
+  border: 1px solid var(--theme-primary-light-5);
+  background: var(--theme-primary-light-9);
+  color: var(--theme-primary-active);
+}
+
+.help-btn {
+  border: 1px solid transparent;
+  border-radius: 4px;
+  transition:
+    border-color 180ms var(--ease),
+    background 180ms var(--ease),
+    color 180ms var(--ease);
+}
+
+.help-panel-enter-active,
+.help-panel-leave-active {
+  transition:
+    opacity 220ms var(--ease),
+    transform 220ms var(--ease);
+}
+
+.help-panel-enter-from,
+.help-panel-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .help-panel-enter-active,
+  .help-panel-leave-active {
+    transition-duration: 1ms;
+  }
+
+  .help-panel-enter-from,
+  .help-panel-leave-to {
+    transform: none;
+  }
+}
+
+.help-popover {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 60;
+  width: min(300px, calc(100vw - 32px));
+  overflow: hidden;
+  border: 1px solid #d7e0ea;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
+}
+
+.help-popover::before {
+  content: "";
+  display: block;
+  height: 3px;
+  background: linear-gradient(
+    90deg,
+    var(--theme-primary-active) 0%,
+    var(--theme-primary-light-3, #7eb3d4) 100%
+  );
+}
+
+.help-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  border-bottom: 1px solid #edf2f7;
+  background: #fafbfd;
+}
+
+.help-head-icon {
+  width: 32px;
+  height: 32px;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--theme-primary-light-6);
+  border-radius: 4px;
+  background: #fff;
+  color: var(--theme-primary-active);
+  font-size: 17px;
+}
+
+.help-head-copy {
+  min-width: 0;
+  flex: 1 1 auto;
+  display: grid;
+  gap: 2px;
+}
+
+.help-head-copy strong {
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.help-head-copy small {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.help-close-btn {
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  display: inline-grid;
+  place-items: center;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #64748b;
+  font-size: 18px;
+  transition:
+    background 160ms var(--ease),
+    color 160ms var(--ease);
+}
+
+.help-close-btn:hover {
+  background: #eef2f7;
+  color: #0f172a;
+}
+
+.help-meta {
+  margin: 0;
+  padding: 10px 14px 12px;
+  display: grid;
+  gap: 8px;
+}
+
+.help-meta-row {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
+}
+
+.help-meta-row--block {
+  grid-template-columns: 1fr;
+  gap: 4px;
+}
+
+.help-meta-row dt {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.help-meta-row dd {
+  margin: 0;
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.45;
+}
+
+.help-meta-row--block dd {
+  color: #475569;
+  font-size: 12px;
+  font-weight: 600;
+}
+
 .company-switcher {
   max-width: min(220px, 28vw);
   height: 38px;