style: 工具栏重排——面包屑放大居左,流程名与统计移至右侧操作区旁
This commit is contained in:
1 parent
69e9554250
commit
e00a1e4743
2 files changed
+44
-16
No files matched your search
@@ -177,14 +177,17 @@ export function EditorPage({ catalog, onToast, onBack }: EditorPageProps) {
|
|||||||
|
|
||||||
<section className="panel canvas-panel" aria-label="流程画布">
|
<section className="panel canvas-panel" aria-label="流程画布">
|
||||||
<div className="canvas-toolbar">
|
<div className="canvas-toolbar">
|
||||||
|
<div className="editor-breadcrumb">
|
||||||
|
<button type="button" className="back-link" onClick={onBack}>
|
||||||
|
<ArrowLeft className="icon" /> 任务中心
|
||||||
|
</button>
|
||||||
|
<span className="breadcrumb-sep">/</span>
|
||||||
|
<span className="breadcrumb-current">编辑流程</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span className="spacer" />
|
||||||
|
|
||||||
<div className="flow-meta">
|
<div className="flow-meta">
|
||||||
<div className="editor-breadcrumb">
|
|
||||||
<button type="button" className="back-link" onClick={onBack}>
|
|
||||||
<ArrowLeft className="icon" /> 任务中心
|
|
||||||
</button>
|
|
||||||
<span>/</span>
|
|
||||||
<span>编辑流程</span>
|
|
||||||
</div>
|
|
||||||
<input
|
<input
|
||||||
className="flow-name"
|
className="flow-name"
|
||||||
value={flow.name}
|
value={flow.name}
|
||||||
|
|||||||
@@ -593,12 +593,19 @@ textarea:focus-visible {
|
|||||||
background: rgba(255, 255, 255, 0.94);
|
background: rgba(255, 255, 255, 0.94);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.canvas-toolbar .spacer {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.flow-meta {
|
.flow-meta {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
flex: 1;
|
flex: none;
|
||||||
|
max-width: 300px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flow-name {
|
.flow-name {
|
||||||
@@ -610,7 +617,9 @@ textarea:focus-visible {
|
|||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
width: 100%;
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flow-name:focus {
|
.flow-name:focus {
|
||||||
@@ -621,6 +630,7 @@ textarea:focus-visible {
|
|||||||
.flow-sub {
|
.flow-sub {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: 10.5px;
|
font-size: 10.5px;
|
||||||
@@ -3213,30 +3223,45 @@ textarea:focus-visible {
|
|||||||
|
|
||||||
/* ---------- 编辑器返回路径与上下连线 ---------- */
|
/* ---------- 编辑器返回路径与上下连线 ---------- */
|
||||||
.editor-breadcrumb {
|
.editor-breadcrumb {
|
||||||
min-height: 18px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 5px;
|
gap: 7px;
|
||||||
|
color: var(--ink-2);
|
||||||
|
font-size: 12.5px;
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-sep {
|
||||||
color: var(--faint);
|
color: var(--faint);
|
||||||
font-size: 10px;
|
font-size: 11.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-current {
|
||||||
|
color: var(--ink-2);
|
||||||
|
font-weight: 650;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-link {
|
.back-link {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 5px;
|
||||||
color: var(--blue-dark);
|
color: var(--blue-dark);
|
||||||
font-size: 10px;
|
font-size: 12.5px;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
|
padding: 4px 8px;
|
||||||
|
margin-left: -8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: background 0.14s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-link:hover {
|
.back-link:hover {
|
||||||
color: var(--blue);
|
color: var(--blue);
|
||||||
|
background: var(--blue-soft);
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-link .icon {
|
.back-link .icon {
|
||||||
width: 13px;
|
width: 15px;
|
||||||
height: 13px;
|
height: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rpa-error-handle {
|
.rpa-error-handle {
|
||||||
|
|||||||
Reference in new issue
Block a user