Spaces:
Running
Running
| /* 栖木流（契约 25B · 工作台第五 tab「流」）——Warm Paper 令牌，零硬编码色： | |
| 所有颜色走 theme.css 变量（深浅色自动跟随）。 | |
| 布局沿用 .xp / .bench 整页滚动容器（flex:1 + 独立滚动 + 48px 留白）。 */ | |
| .flow { | |
| flex: 1; | |
| min-width: 0; | |
| overflow-y: auto; | |
| padding: 36px 48px 48px; | |
| } | |
| /* ── 页头 ───────────────────────────────────────────────────────── */ | |
| .flow-head { | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-bottom: 24px; | |
| } | |
| .flow-title { | |
| font-family: var(--font-serif); | |
| font-size: 26px; | |
| font-weight: 600; | |
| letter-spacing: -0.01em; | |
| color: var(--text); | |
| margin: 0; | |
| } | |
| .flow-head-sub { | |
| margin: 6px 0 0; | |
| font-size: 13.5px; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| max-width: 62ch; | |
| } | |
| /* ── 流卡片列表 ─────────────────────────────────────────────────── */ | |
| .flow-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .flow-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 14px 18px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| transition: border-color 150ms ease; | |
| } | |
| .flow-item:hover { | |
| border-color: var(--border-strong); | |
| } | |
| .flow-item-main { | |
| flex: 1; | |
| min-width: 0; | |
| cursor: pointer; | |
| } | |
| .flow-item-name { | |
| font-size: 15px; | |
| font-weight: 600; | |
| color: var(--text); | |
| margin: 0; | |
| } | |
| .flow-item-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| margin-top: 4px; | |
| font-size: 12.5px; | |
| color: var(--text-secondary); | |
| } | |
| .flow-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 2px 8px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border); | |
| font-size: 11.5px; | |
| color: var(--text-secondary); | |
| background: var(--bg); | |
| white-space: nowrap; | |
| } | |
| .flow-badge.is-on { | |
| color: var(--accent); | |
| border-color: var(--accent-soft, var(--accent)); | |
| } | |
| .flow-status-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: var(--text-tertiary); | |
| flex: none; | |
| } | |
| .flow-status-dot.is-done { | |
| background: var(--success); | |
| } | |
| .flow-status-dot.is-error { | |
| background: var(--danger); | |
| } | |
| .flow-status-dot.is-running { | |
| background: var(--warning); | |
| animation: flow-pulse 1.2s ease-in-out infinite; | |
| } | |
| @keyframes flow-pulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.35; | |
| } | |
| } | |
| /* ── 按钮 ───────────────────────────────────────────────────────── */ | |
| .flow-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex: none; | |
| } | |
| .flow-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 7px 14px; | |
| border-radius: var(--radius-control); | |
| border: 1px solid var(--border); | |
| background: var(--bg); | |
| color: var(--text); | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: | |
| border-color 150ms ease, | |
| background 150ms ease; | |
| } | |
| .flow-btn:hover { | |
| border-color: var(--border-strong); | |
| } | |
| .flow-btn.is-primary { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .flow-btn.is-primary:hover { | |
| background: var(--accent-soft, transparent); | |
| } | |
| .flow-btn.is-ghost { | |
| border-color: transparent; | |
| color: var(--text-secondary); | |
| } | |
| .flow-btn:disabled { | |
| opacity: 0.45; | |
| cursor: not-allowed; | |
| } | |
| .flow-icon-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 30px; | |
| height: 30px; | |
| border-radius: var(--radius-control); | |
| border: 1px solid transparent; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: | |
| color 150ms ease, | |
| border-color 150ms ease; | |
| } | |
| .flow-icon-btn:hover { | |
| color: var(--text); | |
| border-color: var(--border); | |
| } | |
| .flow-icon-btn.is-danger:hover { | |
| color: var(--danger); | |
| border-color: var(--danger); | |
| } | |
| /* ── 开关（沿用设置中心的形状语言）──────────────────────────────── */ | |
| .flow-switch { | |
| position: relative; | |
| width: 38px; | |
| height: 22px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border); | |
| background: var(--bg); | |
| cursor: pointer; | |
| flex: none; | |
| transition: background 150ms ease; | |
| padding: 0; | |
| } | |
| .flow-switch::after { | |
| content: ""; | |
| position: absolute; | |
| top: 2px; | |
| left: 2px; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--text-secondary); | |
| transition: | |
| transform 150ms ease, | |
| background 150ms ease; | |
| } | |
| .flow-switch.is-on { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| .flow-switch.is-on::after { | |
| transform: translateX(16px); | |
| background: var(--bg-elevated); | |
| } | |
| /* ── 编辑器 ─────────────────────────────────────────────────────── */ | |
| .flow-editor { | |
| max-width: 760px; | |
| } | |
| .flow-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| margin-bottom: 18px; | |
| } | |
| .flow-label { | |
| font-size: 12.5px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .flow-input, | |
| .flow-select, | |
| .flow-textarea { | |
| padding: 9px 12px; | |
| border-radius: var(--radius-control); | |
| border: 1px solid var(--border); | |
| background: var(--bg-elevated); | |
| color: var(--text); | |
| font-size: 13.5px; | |
| font-family: inherit; | |
| outline: none; | |
| transition: border-color 150ms ease; | |
| } | |
| .flow-input:focus, | |
| .flow-select:focus, | |
| .flow-textarea:focus { | |
| border-color: var(--accent); | |
| } | |
| .flow-textarea { | |
| min-height: 72px; | |
| resize: vertical; | |
| line-height: 1.6; | |
| } | |
| .flow-inline-row { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| } | |
| .flow-inline-row > .flow-input { | |
| flex: 1; | |
| } | |
| .flow-hint { | |
| font-size: 12px; | |
| line-height: 1.6; | |
| color: var(--text-tertiary); | |
| } | |
| /* ── 步骤列表（列表式编辑：不炫技的排序 + 参数行）────────────── */ | |
| .flow-steps { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| margin-bottom: 18px; | |
| } | |
| .flow-step { | |
| display: flex; | |
| gap: 12px; | |
| padding: 14px 16px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| } | |
| .flow-step-no { | |
| width: 26px; | |
| height: 26px; | |
| border-radius: 50%; | |
| border: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| flex: none; | |
| margin-top: 2px; | |
| } | |
| .flow-step-body { | |
| flex: 1; | |
| min-width: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .flow-step-kind { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .flow-step-ops { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| flex: none; | |
| } | |
| /* ── 模板选择 ───────────────────────────────────────────────────── */ | |
| .flow-templates { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: 12px; | |
| margin-bottom: 20px; | |
| } | |
| .flow-template { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| padding: 16px; | |
| text-align: left; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| cursor: pointer; | |
| transition: border-color 150ms ease; | |
| } | |
| .flow-template:hover { | |
| border-color: var(--accent); | |
| } | |
| .flow-template-name { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .flow-template-desc { | |
| font-size: 12.5px; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| } | |
| /* ── 运行记录 ───────────────────────────────────────────────────── */ | |
| .flow-runs { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .flow-run { | |
| padding: 12px 16px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| cursor: pointer; | |
| } | |
| .flow-run:hover { | |
| border-color: var(--border-strong); | |
| } | |
| .flow-run-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 13px; | |
| color: var(--text); | |
| } | |
| .flow-run-steps { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| margin-top: 10px; | |
| } | |
| .flow-run-step { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| padding: 10px 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg); | |
| font-size: 12.5px; | |
| color: var(--text); | |
| } | |
| .flow-run-step-kind { | |
| font-weight: 600; | |
| white-space: nowrap; | |
| color: var(--text-secondary); | |
| flex: none; | |
| } | |
| .flow-run-step-output { | |
| flex: 1; | |
| min-width: 0; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| line-height: 1.55; | |
| color: var(--text); | |
| /* 耗时毫秒等数字等宽：跳动不抖行（细节质感） */ | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .flow-run-step-output.is-error { | |
| color: var(--danger); | |
| } | |
| .flow-run-step-output.is-skipped { | |
| color: var(--text-tertiary); | |
| } | |
| .flow-empty { | |
| padding: 36px 0; | |
| text-align: center; | |
| color: var(--text-tertiary); | |
| font-size: 13.5px; | |
| line-height: 1.8; | |
| } | |