GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-05 15:36:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化工作流操作调整布局和删除键设置

Browse Source
This commit is contained in:
jxxghp
2025-04-02 14:21:08 +08:00
parent 7a691fe4e7
commit 697fd57bc7
1 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dialog/WorkflowActionsDialog.vue
+31 -29
View File
@@ -187,7 +187,7 @@ onMounted(() => {
:edge-updater-radius="10" :edge-updater-radius="10"
@dragover="onDragOver" @dragover="onDragOver"
@dragleave="onDragLeave" @dragleave="onDragLeave"
delete-key-code="Delete" :delete-key-code="['Delete', 'Backspace']"
auto-connect auto-connect
> >
<MiniMap /> <MiniMap />
@@ -226,49 +226,51 @@ onMounted(() => {
} }
.dnd-flow { .dnd-flow {
flex-direction: column;
display: flex; display: flex;
height: 100%; flex-direction: column;
block-size: 100%;
} }
.dnd-flow aside { .dnd-flow aside {
color: #fff;
font-weight: 700;
border-right: 1px solid #eee;
padding: 15px 10px;
font-size: 12px;
background: #10b981bf; background: #10b981bf;
-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3); border-inline-end: 1px solid #eee;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 30%);
box-shadow: 0 5px 10px #0000004d; box-shadow: 0 5px 10px #0000004d;
color: #fff;
font-size: 12px;
font-weight: 700;
padding-block: 15px;
padding-inline: 10px;
} }
.dnd-flow aside .nodes > * { .dnd-flow aside .nodes > * {
margin-bottom: 10px; box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 25%);
box-shadow: 5px 5px 10px 2px #00000040;
cursor: grab; cursor: grab;
font-weight: 500; font-weight: 500;
-webkit-box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.25); margin-block-end: 10px;
box-shadow: 5px 5px 10px 2px #00000040;
} }
.dnd-flow aside .description { .dnd-flow aside .description {
margin-bottom: 10px; margin-block-end: 10px;
}
.dnd-flow .vue-flow-wrapper {
flex-grow: 1;
height: 100%;
} }
@media screen and (min-width: 640px) { .dnd-flow .vue-flow-wrapper {
flex-grow: 1;
block-size: 100%;
}
@media screen and (width >= 640px) {
.dnd-flow { .dnd-flow {
flex-direction: row; flex-direction: row;
} }
.dnd-flow aside { .dnd-flow aside {
max-width: 25%; max-inline-size: 25%;
} }
} }
@media screen and (max-width: 639px) { @media screen and (width <= 639px) {
.dnd-flow aside .nodes { .dnd-flow aside .nodes {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -278,27 +280,27 @@ onMounted(() => {
.dropzone-background { .dropzone-background {
position: relative; position: relative;
height: 100%; block-size: 100%;
width: 100%; inline-size: 100%;
} }
.dropzone-background .overlay { .dropzone-background .overlay {
position: absolute; position: absolute;
top: 0; z-index: 1;
left: 0;
height: 100%;
width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 1; block-size: 100%;
inline-size: 100%;
inset-block-start: 0;
inset-inline-start: 0;
pointer-events: none; pointer-events: none;
} }
.vue-flow__handle { .vue-flow__handle {
height: 24px;
width: 8px;
border-radius: 4px; border-radius: 4px;
block-size: 24px;
inline-size: 8px;
} }
.vue-flow__edge-path, .vue-flow__edge-path,