enhance ui of running overlay

This commit is contained in:
geekgeekrun
2026-02-11 01:52:43 +08:00
parent 26a3beaced
commit 19a80cf18d
@@ -5,35 +5,50 @@
:close-on-click-modal="false" :close-on-click-modal="false"
:close-on-press-escape="false" :close-on-press-escape="false"
:show-close="false" :show-close="false"
width="400px"
@closed="fillEmptySteps"
> >
<!-- v-if="stepsForRender.some(it => ['todo', 'pending', 'rejected'].includes(it.status))" --> <div flex flex-col flex-items-center>
<div> <div class="dialog-header" w-full>
<ul m0 pl0> <div
<li h160px
v-for="(item, index) in stepsForRender" w-full
:key="index" :style="{
list-style-none backgroundImage: 'linear-gradient(#666, #666)'
flex }"
justify-start ></div>
pt4px
pb4px
>
<div>
<span v-if="item.status === 'todo'">🕐</span>
<span v-if="item.status === 'pending'">👉</span>
<span v-if="item.status === 'fulfilled'"></span>
<span v-if="item.status === 'rejected'"></span>
</div>
<span ml8px>{{ item.describe }}</span>
</li>
</ul>
</div>
<div flex justify-between items-center w-full>
<div>
{{ runningStatusTextMapByCode[currentRunningStatus] }}
</div> </div>
<div> <div class="dialog-main" w-full mt--20px>
<slot name="op-buttons" :current-running-status="currentRunningStatus" /> <!-- v-if="stepsForRender.some(it => ['todo', 'pending', 'rejected'].includes(it.status))" -->
<div>
<ul m0 pl0>
<li
v-for="(item, index) in stepsForRender"
:key="index"
list-style-none
flex
justify-start
pt4px
pb4px
>
<div>
<span v-if="item.status === 'todo'">🕐</span>
<span v-if="item.status === 'pending'">👉</span>
<span v-if="item.status === 'fulfilled'"></span>
<span v-if="item.status === 'rejected'"></span>
</div>
<span ml8px>{{ item.describe }}</span>
</li>
</ul>
</div>
<div flex justify-between items-center w-full>
<div>
{{ runningStatusTextMapByCode[currentRunningStatus] }}
</div>
<div>
<slot name="op-buttons" :current-running-status="currentRunningStatus" />
</div>
</div>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
@@ -159,7 +174,26 @@ ipcRenderer.on('worker-exited', (ev, payload) => {
display: none; display: none;
} }
.el-dialog__body { .el-dialog__body {
overflow: hidden; // overflow: hidden;
}
.dialog-header {
display: none;
// display: flex;
// justify-content: center;
// border-radius: 20px 20px 0 0;
// overflow: hidden;
}
background-color: transparent;
box-shadow: none;
padding: 0;
border-radius: 0;
.dialog-main {
box-sizing: border-box;
background: var(--el-dialog-bg-color);
box-shadow: var(--el-dialog-box-shadow);
padding: var(--el-dialog-padding-primary);
//border-radius: 0 0 20px 20px;
border-radius: 20px;
} }
} }
} }