首页接口重构

web-vue/packages/biz/views/biz/myDocker/index.vue

@@ -115,40 +115,57 @@
                 <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="启动"
+                        popper-class="docker-popconfirm"
-                        placement="top"
+                        title="确认启动该容器吗?"
-                        :show-after="200"
+                        @confirm="handleDockerAction('start', row)"
                       >
+                        <template #reference>
+                          <el-tooltip content="启动" placement="top" :show-after="200">
                             <el-button
                               link
                               type="primary"
                               :icon="VideoPlay"
                               :loading="actionLoadingMap[row.containerId] === 'start'"
-                          @click="handleDockerAction('start', row)"
                             />
                           </el-tooltip>
+                        </template>
+                      </el-popconfirm>
                       <template v-else>
+                        <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'"
-                            @click="handleDockerAction('restart', row)"
                               />
                             </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'"
-                            @click="handleDockerAction('stop', row)"
                               />
                             </el-tooltip>
                           </template>
+                        </el-popconfirm>
+                      </template>
                       <el-tooltip content="详情" placement="top" :show-after="200">
                         <el-button
                           link
@@ -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;