首页接口重构

This commit is contained in:
2026-04-13 17:57:51 +08:00
parent 7889c54a85
commit 44d6658160

View File

@@ -101,8 +101,8 @@
<div class="docker-table__body"> <div class="docker-table__body">
<el-table :data="currentContainers" height="100%" :border="false" :show-header="true"> <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="created" label="创建时间" width="150" show-overflow-tooltip />
<el-table-column prop="containerId" label="容器ID" min-width="100" 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="names" label="容器名称" min-width="100" show-overflow-tooltip />
<el-table-column prop="image" 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> <el-table-column prop="status" label="运行状态" width="135" show-overflow-tooltip>
@@ -115,39 +115,56 @@
<el-table-column label="操作" width="200" align="center"> <el-table-column label="操作" width="200" align="center">
<template #default="{ row }"> <template #default="{ row }">
<div class="action-group"> <div class="action-group">
<el-tooltip <el-popconfirm
v-if="isContainerStopped(row.status)" v-if="isContainerStopped(row.status)"
content="启动" popper-class="docker-popconfirm"
placement="top" title="确认启动该容器吗?"
:show-after="200" @confirm="handleDockerAction('start', row)"
> >
<el-button <template #reference>
link <el-tooltip content="启动" placement="top" :show-after="200">
type="primary" <el-button
:icon="VideoPlay" link
:loading="actionLoadingMap[row.containerId] === 'start'" type="primary"
@click="handleDockerAction('start', row)" :icon="VideoPlay"
/> :loading="actionLoadingMap[row.containerId] === 'start'"
</el-tooltip> />
</el-tooltip>
</template>
</el-popconfirm>
<template v-else> <template v-else>
<el-tooltip content="重启" placement="top" :show-after="200"> <el-popconfirm
<el-button popper-class="docker-popconfirm"
link title="确认重启该容器吗?"
type="warning" @confirm="handleDockerAction('restart', row)"
:icon="RefreshRight" >
:loading="actionLoadingMap[row.containerId] === 'restart'" <template #reference>
@click="handleDockerAction('restart', row)" <el-tooltip content="重启" placement="top" :show-after="200">
/> <el-button
</el-tooltip> link
<el-tooltip content="停止" placement="top" :show-after="200"> type="warning"
<el-button :icon="RefreshRight"
link :loading="actionLoadingMap[row.containerId] === 'restart'"
type="danger" />
:icon="SwitchButton" </el-tooltip>
:loading="actionLoadingMap[row.containerId] === 'stop'" </template>
@click="handleDockerAction('stop', row)" </el-popconfirm>
/> <el-popconfirm
</el-tooltip> 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> </template>
<el-tooltip content="详情" placement="top" :show-after="200"> <el-tooltip content="详情" placement="top" :show-after="200">
<el-button <el-button
@@ -158,15 +175,15 @@
@click="handleDockerDetail('inspect', row)" @click="handleDockerDetail('inspect', row)"
/> />
</el-tooltip> </el-tooltip>
<el-tooltip content="日志" placement="top" :show-after="200"> <el-tooltip content="日志" placement="top" :show-after="200">
<el-button <el-button
link link
type="info" type="info"
:icon="Tickets" :icon="Tickets"
:loading="detailLoadingMap[row.containerId] === 'logs'" :loading="detailLoadingMap[row.containerId] === 'logs'"
@click="handleDockerDetail('logs', row)" @click="handleDockerDetail('logs', row)"
/> />
</el-tooltip> </el-tooltip>
</div> </div>
</template> </template>
</el-table-column> </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) { @media (max-width: 1100px) {
.docker-layout { .docker-layout {
grid-template-columns: 1fr; grid-template-columns: 1fr;