@yss123/cage-cli 0.2.0 → 0.3.1

package/graph-ui/business.css

@@ -0,0 +1,1011 @@
+/* 业务板块逐层进入流程图；节点、分支与箭头表达执行关系，代码按需展开。 */
+/* 业务地图专属样式，由 index.html 在基础 style.css 之后加载。
+ * 配合 business.ts 与 flowchart.ts 的 DOM/SVG 状态，区分板块入口、流程画布、审批子图与证据详情；不决定业务执行。 */
+.business-journeys {
+  margin: 22px 0 30px;
+}
+.business-journeys .business-flow-entry {
+  border-left: 3px solid #397a56;
+  padding: 25px;
+}
+.business-operations {
+  margin-top: 28px;
+  border-top: 1px solid #e1e8db;
+  padding-top: 18px;
+}
+.business-operations > summary {
+  color: #567260;
+  font-size: 13px;
+  cursor: pointer;
+}
+.business-process-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px 22px;
+  margin: 0 0 12px;
+  color: #4b6856;
+  font-size: 13px;
+}
+.business-process-controls > p {
+  flex-basis: 100%;
+  margin: 0 0 3px;
+  line-height: 1.8;
+}
+.business-process-controls label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  cursor: pointer;
+}
+.business-process-controls input {
+  accent-color: #397a56;
+  width: 16px;
+  height: 16px;
+}
+.business-process-legend {
+  font-size: 12px;
+  color: #627c69;
+  line-height: 1.8;
+  margin: 0 0 18px;
+}
+.flow-node.association .flow-node-shape {
+  fill: #f4f7ef;
+  stroke-dasharray: 5 4;
+}
+.flow-edge.association .flow-edge-line {
+  stroke: #8b9975;
+  stroke-dasharray: 5 4;
+}
+/* 业务模式隐藏完整本体画布的旧工具区，保留同页共用的视图切换和检索入口。 */
+.explorer.business-mode {
+  display: block;
+  height: auto;
+  min-height: 520px;
+  max-height: none;
+  overflow: clip;
+}
+.business-page .overview {
+  display: none;
+}
+.business-page .page-heading .eyebrow,
+.business-page .page-heading p {
+  display: none;
+}
+.business-page .page-heading {
+  margin-bottom: 22px;
+}
+.business-health {
+  display: none;
+}
+.business-page .business-health {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 15px;
+  font-size: 10px;
+  color: #819378;
+}
+.business-mode .graph-subbar,
+.business-mode .relation-guide,
+.business-mode .canvas,
+.business-mode .graph-footer,
+.business-mode > .inspector {
+  display: none;
+}
+.business-mode .graph-toolbar {
+  background: #fcfdfa;
+}
+.business-mode .graph-panel {
+  height: auto;
+}
+.business-view {
+  padding: 26px 30px 36px;
+}
+.business-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  color: #7b8e81;
+  font-size: 12px;
+  margin-bottom: 22px;
+}
+.business-breadcrumb a:hover {
+  color: var(--green);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+.business-breadcrumb strong {
+  color: #30483d;
+  font-weight: 500;
+}
+.business-intro,
+.business-scene-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 26px;
+}
+.business-kicker {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 2px;
+  color: #7e927e;
+  margin-bottom: 11px;
+}
+.business-intro h2,
+.business-scene-heading h2 {
+  margin: 0;
+  font-size: clamp(21px, 2vw, 29px);
+  line-height: 1.6;
+  letter-spacing: -0.5px;
+  font-weight: 600;
+  color: #244638;
+  overflow-wrap: anywhere;
+}
+.business-intro p {
+  font-size: 13px;
+  color: #758477;
+  line-height: 1.9;
+  margin: 12px 0 0;
+}
+.business-total {
+  flex-shrink: 0;
+  border: 1px solid #dce7d9;
+  color: #4d7757;
+  background: #f0f5ec;
+  border-radius: 30px;
+  padding: 7px 13px;
+  font-size: 12px;
+}
+/* 板块卡片和对象标签构成从业务主题进入流程的导航；实际跳转使用脚本生成的锚点 URL。 */
+.business-blocks {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
+  gap: 18px;
+}
+.business-block {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #dce5d8;
+  border-radius: 9px;
+  padding: 25px 23px 0;
+  background: linear-gradient(135deg, #f6f9f2 0%, #fff 70%);
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s,
+    transform 0.15s;
+  min-height: 253px;
+}
+.business-block:hover {
+  border-color: #71a18a;
+  box-shadow: 0 8px 24px #28462f0e;
+  transform: translateY(-2px);
+}
+.business-block-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.business-number {
+  font:
+    23px 'Bahnschrift',
+    sans-serif;
+  font-weight: 300;
+  color: #97b293;
+}
+.business-block-kind {
+  font-size: 10px;
+  color: #83967b;
+  letter-spacing: 1.5px;
+}
+.business-block h3 {
+  font-size: 20px;
+  line-height: 1.6;
+  margin: 19px 0 12px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.business-object-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+}
+.business-object-chips > span,
+.object-chip-button {
+  border: 1px solid #e5ebdf;
+  background: #f6f8f2;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 11px;
+  line-height: 1.5;
+  color: #637660;
+}
+.object-chip-button:hover {
+  border-color: #729b7a;
+}
+.business-block-description {
+  font-size: 12px;
+  color: #879380;
+  line-height: 1.9;
+  margin: 16px 0 20px;
+  flex: 1;
+}
+.business-block-footer {
+  border-top: 1px solid #e6ecdf;
+  padding: 16px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 11px;
+  color: #829179;
+}
+.business-block-footer strong {
+  color: #3c7055;
+  font-weight: 500;
+}
+.business-reading-note {
+  border-top: 1px solid #e8ece2;
+  margin-top: 35px;
+  padding-top: 22px;
+  font-size: 12px;
+  color: #8c9985;
+  line-height: 1.9;
+}
+.business-reading-note strong {
+  color: #5e7c60;
+  font-weight: 500;
+}
+.business-reading-note p {
+  margin: 5px 0 0;
+}
+.business-scene-heading .button {
+  flex-shrink: 0;
+}
+.business-scene-description,
+.business-flow-intro {
+  font-size: 12px;
+  color: #7e8c7a;
+  line-height: 1.9;
+  margin: 20px 0;
+}
+.business-section-title {
+  margin: 30px 0 14px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #72906c;
+  letter-spacing: 1px;
+}
+.business-flow-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
+  gap: 13px;
+}
+.business-flow-entry {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e1e8db;
+  border-radius: 7px;
+  padding: 20px;
+  background: #fff;
+  transition:
+    border-color 0.15s,
+    background 0.15s;
+}
+.business-flow-entry:hover {
+  border-color: #709d80;
+  background: #fafcf7;
+}
+.business-flow-entry > small {
+  font-size: 10px;
+  color: #8b9e83;
+}
+.business-flow-entry h4 {
+  font-size: 15px;
+  line-height: 1.7;
+  margin: 10px 0 6px;
+  overflow-wrap: anywhere;
+}
+.business-flow-entry p {
+  font-size: 11px;
+  line-height: 1.9;
+  color: #82917a;
+  margin: 0 0 16px;
+  flex: 1;
+}
+.business-flow-count {
+  font-size: 10px;
+  color: #4c7c58;
+}
+/* 流程画布与详情栏的工作区；inspecting 控制详情空间，画布尺寸变化由 ResizeObserver 通知相机。 */
+.business-workspace {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 20px;
+  align-items: start;
+}
+.business-workspace.inspecting {
+  grid-template-columns: minmax(0, 1fr) 350px;
+}
+.business-flowchart {
+  min-width: 0;
+  border: 1px solid #dce6d7;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.flowchart-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 15px;
+  background: #fbfcf8;
+  border-bottom: 1px solid #e4eadf;
+}
+.flowchart-toolbar > strong {
+  font-size: 12px;
+  font-weight: 500;
+  color: #668262;
+}
+.flowchart-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+.flowchart-controls button,
+.flowchart-zoom button {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #82957a;
+  min-width: 34px;
+  height: 32px;
+  padding: 4px 10px;
+  font-size: 12px;
+}
+.flowchart-controls button:hover,
+.flowchart-controls button[aria-pressed='true'],
+.flowchart-zoom button:hover {
+  background: #edf3e7;
+  border-color: #d7e3cf;
+  color: #416e47;
+}
+.flowchart-zoom {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  max-width: calc(100% - 32px);
+  align-items: center;
+  gap: 2px;
+  background: #fff;
+  border: 1px solid #d6e1d2;
+  border-radius: 7px;
+  box-shadow: 0 3px 16px #294b2414;
+  padding: 5px;
+}
+.flowchart-zoom .flowchart-percentage {
+  min-width: 58px;
+  color: #3d6951;
+  font-variant-numeric: tabular-nums;
+}
+.flowchart-zoom button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+/* 画布禁止浏览器默认触控滚动，由手势状态机接管；SVG 内坐标仍由相机 transform 控制。 */
+.flowchart-canvas {
+  position: relative;
+  width: 100%;
+  height: 640px;
+  overflow: hidden;
+  overscroll-behavior: contain;
+  background:
+    radial-gradient(#dfe7d8 0.7px, transparent 0.8px) 0 0 / 20px 20px,
+    #fcfdf9;
+}
+.flowchart-canvas > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  outline: none;
+}
+.flowchart-canvas > svg:focus-visible {
+  box-shadow: inset 0 0 0 2px #87a786;
+}
+.flowchart-canvas.mode-pan .flow-node,
+.flowchart-canvas.mode-pan .flow-edge {
+  cursor: grab;
+}
+.flowchart-canvas > svg.interacting,
+.flowchart-canvas > svg.interacting * {
+  cursor: grabbing !important;
+}
+/* 展开模式将当前工作区覆盖视窗，保留画布和详情；退出时复用同一阅读状态，不创建第二幅图。 */
+.flow-workspace.expanded {
+  position: fixed;
+  inset: 12px;
+  z-index: 100;
+  padding: 12px;
+  background: #f8faf5;
+  border: 1px solid #cfdcc7;
+  border-radius: 12px;
+  box-shadow: 0 0 0 20px #243d2866;
+  align-items: stretch;
+  gap: 14px;
+}
+.flow-workspace.expanded .business-flowchart {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.flow-workspace.expanded .flowchart-canvas {
+  height: auto;
+  flex: 1;
+  min-height: 0;
+}
+.flow-workspace.expanded .business-detail {
+  height: 100%;
+  max-height: 100%;
+}
+.flowchart-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 8px;
+  border-top: 1px solid #e4eadf;
+  background: #fbfcf8;
+  padding: 11px 13px;
+  font-size: 9px;
+  color: #8b9a81;
+  line-height: 1.8;
+}
+.flow-node {
+  cursor: grab;
+}
+.flow-node-shape {
+  fill: #fff;
+  stroke: #c4d6bc;
+  stroke-width: 1.3;
+  filter: drop-shadow(0 3px 4px #294a2810);
+}
+.flow-node.decision .flow-node-shape {
+  fill: #f9f7ee;
+  stroke: #c4b88a;
+}
+.flow-node.approval-subflow .flow-node-shape {
+  fill: #fafaf3;
+  stroke: #b5bf9e;
+}
+/* 审批容器内部的条件、任务和跳过支路样式；布局尺寸和换行已由 approval-flow.ts 计算。 */
+.approval-flow-content {
+  pointer-events: none;
+}
+.approval-flow-title {
+  fill: #35573b;
+  font-size: 17px;
+  font-weight: 600;
+}
+.approval-flow-subtitle,
+.approval-flow-hint {
+  fill: #6c7f60;
+  font-size: 11px;
+}
+.approval-flow-line {
+  fill: none;
+  stroke: #8ba28e;
+  stroke-width: 1.3;
+  stroke-linejoin: round;
+}
+.approval-flow-line.skip {
+  stroke: #a5ae92;
+}
+.approval-flow-label-box {
+  fill: #fafaf3;
+}
+.approval-flow-branch {
+  fill: #61774f;
+  font-size: 12px;
+}
+.approval-task-shape {
+  fill: #fffef8;
+  stroke: #bac9ad;
+}
+.approval-task-title {
+  fill: #35573b;
+  font-size: 16px;
+  font-weight: 600;
+}
+.approval-task-actor,
+.approval-task-rule {
+  fill: #5b7151;
+  font-size: 12px;
+}
+.approval-task-number-shape {
+  fill: #e8eddb;
+}
+.approval-task-number {
+  fill: #61794c;
+  font-size: 10px;
+  font-weight: 600;
+}
+.approval-condition-shape {
+  fill: #f7f2de;
+  stroke: #bfb27e;
+}
+.approval-condition-title {
+  fill: #6c6031;
+  font-size: 12px;
+  font-weight: 500;
+}
+/* AND 网关与分支标题使用独立形状，不能被误认成一个需要审批的任务；坐标由递归测量布局提供。 */
+.approval-gateway-shape {
+  fill: #e9f0e4;
+  stroke: #72916f;
+  stroke-width: 1.5;
+}
+.approval-gateway-title {
+  fill: #35573b;
+  font-size: 12px;
+  font-weight: 600;
+}
+.approval-branch-shape {
+  fill: #f2f5ed;
+  stroke: #b5c5ab;
+  stroke-dasharray: 4 3;
+}
+.approval-flow-merge {
+  fill: #8ba28e;
+}
+.approval-flow-outcome {
+  fill: #3c6f48;
+  font-size: 12px;
+  font-weight: 500;
+}
+.approval-flow-rejection {
+  fill: #926451;
+  font-size: 11px;
+}
+.flow-node:hover .flow-node-shape,
+.flow-node:focus-visible .flow-node-shape {
+  stroke: #668c60;
+  stroke-width: 2;
+}
+.flow-node.selected .flow-node-shape {
+  fill: #edf5e7;
+  stroke: #3e7e50;
+  stroke-width: 2;
+}
+.flow-node.path-source .flow-node-shape,
+.flow-node.path-target .flow-node-shape {
+  stroke: #397a56;
+  stroke-width: 2.5;
+}
+.flow-node.path-target .flow-node-shape {
+  fill: #edf5e7;
+}
+.flow-node-title {
+  fill: #305539;
+  font-size: 16px;
+  font-weight: 600;
+  pointer-events: none;
+}
+.flow-node-state {
+  fill: #819574;
+  font-size: 11px;
+  pointer-events: none;
+}
+.flow-node-boundary {
+  fill: #84966e;
+  font-size: 10px;
+  pointer-events: none;
+}
+/* 主线、次要分支、关联及异步边分别呈现；透明粗命中线便于选择，不扩大实际可见线条。 */
+.flow-edge {
+  cursor: pointer;
+}
+.flow-edge-line {
+  fill: none;
+  stroke: #537f60;
+  stroke-width: 2;
+  stroke-linejoin: round;
+}
+.flow-edge-direction {
+  fill: #537f60;
+  pointer-events: none;
+}
+.flow-edge.branch .flow-edge-line {
+  stroke: #a57950;
+  stroke-width: 1.7;
+}
+.flow-edge.branch .flow-edge-direction {
+  fill: #a57950;
+}
+.flow-edge.branch .flow-edge-label {
+  fill: #8c6545;
+}
+.flow-edge.association .flow-edge-line {
+  stroke: #8ba28e;
+  stroke-width: 1.3;
+}
+.flow-edge.async .flow-edge-line {
+  stroke-dasharray: 5 4;
+}
+.flow-edge-hit {
+  fill: none;
+  stroke: transparent;
+  stroke-width: 15;
+}
+.flow-edge-label-box {
+  fill: #fcfdf9;
+}
+.flow-edge-label {
+  fill: #527253;
+  font-size: 11px;
+}
+.flow-edge:hover .flow-edge-line,
+.flow-edge.selected .flow-edge-line {
+  stroke: #397a56;
+  stroke-width: 2;
+}
+.flow-edge.selected .flow-edge-label {
+  fill: #3e7250;
+}
+.flow-edge:hover .flow-edge-direction,
+.flow-edge.selected .flow-edge-direction {
+  fill: #397a56;
+}
+.business-detail-close {
+  position: absolute;
+  right: 13px;
+  top: 12px;
+  background: none;
+  color: #7f9174;
+  font-size: 22px;
+  padding: 0 5px;
+}
+/* 步骤详情承担说明、来源和技术入口，选中态跟随 URL；源码仅在展开时由脚本请求。 */
+.business-detail {
+  min-width: 0;
+  border: 1px solid #dce6d7;
+  background: #fbfcf8;
+  border-radius: 8px;
+  padding: 24px;
+  position: relative;
+  max-height: 728px;
+  overflow: auto;
+}
+.business-detail > h3 {
+  font-size: 19px;
+  line-height: 1.7;
+  margin: 0 0 20px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.business-detail-tabs {
+  display: flex;
+  gap: 25px;
+  border-bottom: 1px solid #dfe7d8;
+  margin-bottom: 22px;
+}
+.business-detail-tabs button {
+  padding: 0 0 11px;
+  background: none;
+  font-size: 12px;
+  color: #8a987f;
+  border-bottom: 2px solid transparent;
+}
+.business-detail-tabs button.active {
+  color: #346c4e;
+  border-color: #346c4e;
+}
+.business-detail-section {
+  margin: 0 0 23px;
+}
+.business-detail-section h4 {
+  font-size: 11px;
+  font-weight: 500;
+  color: #6a8765;
+  margin: 0 0 9px;
+}
+.business-detail-section p {
+  font-size: 12px;
+  line-height: 1.95;
+  margin: 6px 0;
+  color: #4c6349;
+  overflow-wrap: anywhere;
+}
+.business-detail .source-note {
+  color: #8b9981;
+  font-size: 10px;
+}
+.business-evidence {
+  display: block;
+  text-align: left;
+  width: 100%;
+  border-bottom: 1px solid #e5ebdf;
+  background: none;
+  padding: 10px 0;
+  font-size: 11px;
+  line-height: 1.7;
+  color: #557a52;
+}
+.business-technical-link {
+  display: block;
+  background: none;
+  color: #8a9981;
+  font-size: 10px;
+  padding: 20px 0 0;
+}
+.business-source-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+.business-source-picker button {
+  background: #f0f4eb;
+  color: #7a8d70;
+  border: 1px solid #e1e8d9;
+  border-radius: 4px;
+  padding: 6px 9px;
+  font-size: 10px;
+  text-align: left;
+  line-height: 1.7;
+}
+.business-source-picker button.active {
+  color: #37694a;
+  border-color: #83a481;
+  background: #eaf2e3;
+}
+.business-empty {
+  font-size: 13px;
+  color: #84947b;
+  line-height: 2;
+  padding: 35px 0;
+}
+.business-approval-steps {
+  padding-left: 0;
+  list-style: none;
+  font-size: 12px;
+  line-height: 1.9;
+}
+.business-approval-steps > li {
+  margin: 10px 0;
+  padding-left: 3px;
+}
+.business-approval-steps strong {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+}
+.business-approval-steps p {
+  font-size: 10px;
+}
+/* 并行分支在规则详情中保留树层级，独立左边线区分分支，不靠列表编号暗示执行先后。 */
+.business-approval-branches {
+  margin: 8px 0;
+  padding-left: 16px;
+  list-style: none;
+  border-left: 2px solid #b5c5ab;
+}
+.business-approval-branches > li {
+  margin: 10px 0 14px;
+}
+/* 源码预览按行显示并保留原始缩进，横向溢出在代码框内滚动；行号只参与显示。 */
+.source-preview {
+  min-width: 0;
+  margin-top: 12px;
+}
+.source-preview > summary {
+  font-size: 11px;
+  color: #6a865e;
+  cursor: pointer;
+  line-height: 1.9;
+}
+.source-body {
+  min-width: 0;
+  margin-top: 13px;
+}
+.source-tools {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 10px;
+  color: #7d9372;
+  line-height: 1.8;
+  margin-bottom: 10px;
+}
+.source-tools > span {
+  overflow-wrap: anywhere;
+}
+.source-tools button {
+  flex-shrink: 0;
+}
+.source-code {
+  border: 1px solid #dce5d5;
+  border-radius: 5px;
+  overflow: auto;
+  background: #f1f5ec;
+  padding: 14px 0;
+  margin: 0;
+  font:
+    11px/1.95 'Cascadia Code',
+    Consolas,
+    monospace;
+  color: #38593c;
+  tab-size: 2;
+  max-height: 55vh;
+}
+.source-line {
+  display: block;
+  white-space: pre;
+  min-height: 1.95em;
+  padding-right: 17px;
+}
+.source-line::before {
+  content: attr(data-line);
+  display: inline-block;
+  position: sticky;
+  left: 0;
+  width: 43px;
+  text-align: right;
+  margin-right: 14px;
+  padding-right: 11px;
+  color: #97a78b;
+  border-right: 1px solid #dae3d1;
+  background: #f1f5ec;
+  user-select: none;
+}
+.source-error {
+  font-size: 11px;
+  color: #9c6b4e;
+  line-height: 1.9;
+  overflow-wrap: anywhere;
+}
+.aggregate-list a.aggregate-button {
+  display: flex;
+  align-items: center;
+}
+.aggregate-button > span:nth-child(2) {
+  overflow-wrap: anywhere;
+}
+@media (min-width: 1600px) {
+  .business-blocks {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+/* 随视窗收窄调整卡片与工作区宽度；后续断点将详情移到下方，并缩短触控画布高度。 */
+@media (max-width: 1150px) {
+  .business-view {
+    padding: 24px 20px;
+  }
+  .business-workspace {
+    gap: 18px;
+  }
+  .business-workspace.inspecting {
+    grid-template-columns: minmax(0, 1fr) 310px;
+  }
+  .business-detail {
+    padding: 18px;
+  }
+}
+@media (max-width: 800px) {
+  .business-workspace,
+  .business-workspace.inspecting {
+    grid-template-columns: 1fr;
+  }
+  .business-detail {
+    max-height: none;
+  }
+  .flow-workspace.expanded.inspecting .business-detail {
+    position: absolute;
+    z-index: 5;
+    top: 82px;
+    right: 12px;
+    bottom: 12px;
+    width: min(350px, calc(100% - 24px));
+    height: auto;
+    box-shadow: -8px 0 30px #294b2424;
+  }
+  .business-intro,
+  .business-scene-heading {
+    align-items: start;
+  }
+  .business-total {
+    display: none;
+  }
+  .business-intro h2 {
+    font-size: 23px;
+  }
+}
+@media (max-width: 980px) {
+  .app-shell:has(.business-page) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .app-shell:has(.business-page) .sidebar {
+    display: none;
+  }
+  .app-shell:has(.business-page) .mobile-filters {
+    display: inline-flex;
+  }
+  .app-shell:has(.business-page) .sidebar.open {
+    display: flex;
+    position: fixed;
+    top: 69px;
+    bottom: 0;
+    left: 0;
+    width: 220px;
+    z-index: 20;
+    overflow: auto;
+    box-shadow: 8px 0 30px #243b2520;
+  }
+}
+@media (max-width: 640px) {
+  .business-view {
+    padding: 20px 16px;
+  }
+  .business-intro h2 {
+    font-size: 21px;
+  }
+  .business-scene-heading {
+    flex-direction: column;
+    gap: 12px;
+  }
+  .business-block {
+    min-height: 235px;
+    padding: 21px 20px 0;
+  }
+  .business-breadcrumb {
+    gap: 7px;
+    margin-bottom: 23px;
+    font-size: 11px;
+  }
+  .flowchart-canvas {
+    height: 550px;
+  }
+  .flowchart-toolbar {
+    padding: 10px;
+  }
+  .flowchart-controls button {
+    padding: 4px 8px;
+    font-size: 11px;
+  }
+  .flowchart-zoom {
+    left: 10px;
+    bottom: 10px;
+  }
+  .flowchart-zoom button {
+    padding: 4px 7px;
+  }
+  .flowchart-toolbar > strong {
+    display: none;
+  }
+  .flowchart-footer {
+    font-size: 9px;
+    padding: 8px 10px;
+  }
+}
+/* 尊重系统减少动画偏好，只移除过渡效果，不影响拖动和相机坐标计算。 */
+@media (prefers-reduced-motion: reduce) {
+  .business-block,
+  .business-flow-entry {
+    transition: none;
+  }
+}