manager/my-spring
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页接口重构

Browse Source
This commit is contained in:
gaoxq
2026-04-13 17:57:51 +08:00
parent 7889c54a85
commit 44d6658160
1 changed files with 97 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
web-vue/packages/biz/views/biz/myDocker/index.vue
View File

@@ -101,8 +101,8 @@
<div class="docker-table__body">
<el-table :data="currentContainers" height="100%" :border="false" :show-header="true">
<el-table-column prop="created" label="创建时间" width="150" show-overflow-tooltip />
<el-table-column prop="containerId" label="容器ID" min-width="100" show-overflow-tooltip />
<el-table-column prop="created" label="创建时间" width="150" show-overflow-tooltip />
<el-table-column prop="containerId" label="容器ID" min-width="100" show-overflow-tooltip />
<el-table-column prop="names" label="容器名称" min-width="100" show-overflow-tooltip />
<el-table-column prop="image" label="镜像名称" min-width="100" show-overflow-tooltip />
<el-table-column prop="status" label="运行状态" width="135" show-overflow-tooltip>
@@ -115,39 +115,56 @@
<el-table-column label="操作" width="200" align="center">
<template #default="{ row }">
<div class="action-group">
<el-tooltip
<el-popconfirm
v-if="isContainerStopped(row.status)"
content="启动"
placement="top"
:show-after="200"
popper-class="docker-popconfirm"
title="确认启动该容器吗?"
@confirm="handleDockerAction('start', row)"
>
<el-button
link
type="primary"
:icon="VideoPlay"
:loading="actionLoadingMap[row.containerId] === 'start'"
@click="handleDockerAction('start', row)"
/>
</el-tooltip>
<template #reference>
<el-tooltip content="启动" placement="top" :show-after="200">
<el-button
link
type="primary"
:icon="VideoPlay"
:loading="actionLoadingMap[row.containerId] === 'start'"
/>
</el-tooltip>
</template>
</el-popconfirm>
<template v-else>
<el-tooltip content="重启" placement="top" :show-after="200">
<el-button
link
type="warning"
:icon="RefreshRight"
:loading="actionLoadingMap[row.containerId] === 'restart'"
@click="handleDockerAction('restart', row)"
/>
</el-tooltip>
<el-tooltip content="停止" placement="top" :show-after="200">
<el-button
link
type="danger"
:icon="SwitchButton"
:loading="actionLoadingMap[row.containerId] === 'stop'"
@click="handleDockerAction('stop', row)"
/>
</el-tooltip>
<el-popconfirm
popper-class="docker-popconfirm"
title="确认重启该容器吗?"
@confirm="handleDockerAction('restart', row)"
>
<template #reference>
<el-tooltip content="重启" placement="top" :show-after="200">
<el-button
link
type="warning"
:icon="RefreshRight"
:loading="actionLoadingMap[row.containerId] === 'restart'"
/>
</el-tooltip>
</template>
</el-popconfirm>
<el-popconfirm
popper-class="docker-popconfirm"
title="确认停止该容器吗?"
@confirm="handleDockerAction('stop', row)"
>
<template #reference>
<el-tooltip content="停止" placement="top" :show-after="200">
<el-button
link
type="danger"
:icon="SwitchButton"
:loading="actionLoadingMap[row.containerId] === 'stop'"
/>
</el-tooltip>
</template>
</el-popconfirm>
</template>
<el-tooltip content="详情" placement="top" :show-after="200">
<el-button
@@ -158,15 +175,15 @@
@click="handleDockerDetail('inspect', row)"
/>
</el-tooltip>
<el-tooltip content="日志" placement="top" :show-after="200">
<el-button
link
type="info"
:icon="Tickets"
:loading="detailLoadingMap[row.containerId] === 'logs'"
@click="handleDockerDetail('logs', row)"
/>
</el-tooltip>
<el-tooltip content="日志" placement="top" :show-after="200">
<el-button
link
type="info"
:icon="Tickets"
:loading="detailLoadingMap[row.containerId] === 'logs'"
@click="handleDockerDetail('logs', row)"
/>
</el-tooltip>
</div>
</template>
</el-table-column>
@@ -976,6 +993,45 @@
}
}
.docker-popconfirm {
.el-popconfirm__main {
color: rgb(51 65 85);
}
}
html[data-theme='dark'] .docker-popconfirm {
background: rgb(20, 20, 20);
border-color: rgb(51 65 85);
box-shadow: 0 12px 30px rgb(0 0 0 / 28%);
.el-popconfirm__main {
color: rgb(226 232 240);
}
.el-button--default {
border-color: rgb(71 85 105);
background: rgb(30 41 59);
color: rgb(226 232 240);
}
.el-button--default:hover {
border-color: rgb(96 165 250);
background: rgb(37 99 235 / 18%);
color: rgb(241 245 249);
}
.el-button--primary {
border-color: rgb(59 130 246);
background: rgb(37 99 235);
color: rgb(248 250 252);
}
.el-button--primary:hover {
border-color: rgb(96 165 250);
background: rgb(59 130 246);
}
}
@media (max-width: 1100px) {
.docker-layout {
grid-template-columns: 1fr;