安全页重构:免密登录与活跃会话;按钮规范统一

src/views/InstanceDetailView.vue

@@ -23,6 +23,8 @@ import {
   listConsoleConnections,
   listVolumeAttachments,
   terminateInstance,
+  terminatingInstances,
+  terminatingKey,
   updateInstance,
 } from '@/api/instances'
 import EmptyCard from '@/components/EmptyCard.vue'
@@ -226,11 +228,20 @@ async function act(fn: () => Promise<unknown>, ok: string) {
   }
 }
 
-function power(action: PowerAction) {
-  void act(
-    () => instanceAction(cfgId.value, instanceId.value, action, region.value),
-    `${action} 已提交`,
-  )
+/** 电源操作在飞行中的动作,对应按钮 loading、整组防连点 */
+const powering = ref<'' | PowerAction>('')
+
+async function power(action: PowerAction) {
+  if (powering.value || terminating.value) return
+  powering.value = action
+  try {
+    await act(
+      () => instanceAction(cfgId.value, instanceId.value, action, region.value),
+      `${action} 已提交`,
+    )
+  } finally {
+    powering.value = ''
+  }
 }
 
 const moreOptions = [
@@ -238,22 +249,35 @@ const moreOptions = [
   { label: 'SOFTRESET（系统内重启）', key: 'SOFTRESET' },
 ]
 
+/** 终止飞行中(api 层共享锁):跨 Dialog/视图/重挂载互斥 */
+const terminating = computed(() =>
+  terminatingInstances.has(terminatingKey(cfgId.value, instanceId.value)),
+)
+
+/** 首次点击即锁定两个互斥分支,防慢请求期间「删除/保留引导卷」并发提交 */
 function terminate() {
-  dialog.warning({
+  if (terminating.value) {
+    message.warning('终止请求正在处理中')
+    return
+  }
+  let fired = false
+  const submit = (preserve: boolean) => {
+    if (fired || terminating.value) return false
+    fired = true
+    d.positiveButtonProps = { disabled: true }
+    d.negativeButtonProps = { disabled: true }
+    return act(
+      () => terminateInstance(cfgId.value, instanceId.value, preserve, region.value),
+      preserve ? '终止请求已提交（保留引导卷）' : '终止请求已提交',
+    )
+  }
+  const d = dialog.warning({
     title: '终止实例',
     content: '终止后实例不可恢复。是否同时保留引导卷？',
     positiveText: '终止并删除引导卷',
     negativeText: '终止但保留引导卷',
-    onPositiveClick: () =>
-      act(
-        () => terminateInstance(cfgId.value, instanceId.value, false, region.value),
-        '终止请求已提交',
-      ),
-    onNegativeClick: () =>
-      act(
-        () => terminateInstance(cfgId.value, instanceId.value, true, region.value),
-        '终止请求已提交（保留引导卷）',
-      ),
+    onPositiveClick: () => submit(false),
+    onNegativeClick: () => submit(true),
   })
 }
 
@@ -426,20 +450,56 @@ const consoleColumns: DataTableColumns<ConsoleConnection> = [
         <div class="flex-1" />
         <!-- 操作按钮组:移动端整组独立成行,不随标题换行散落 -->
         <div class="flex items-center gap-2 max-md:w-full">
-          <NButton v-if="isStopped" size="small" :disabled="isEnded" @click="power('START')">
+          <NButton
+            v-if="isStopped"
+            size="small"
+            :loading="powering === 'START'"
+            :disabled="isEnded || !!powering || terminating"
+            @click="power('START')"
+          >
             启动
           </NButton>
-          <NButton v-else size="small" :disabled="isEnded" @click="power('STOP')">停止</NButton>
-          <NButton size="small" :disabled="isEnded" @click="power('RESET')">重启</NButton>
-          <NButton size="small" type="error" ghost :disabled="isEnded" @click="terminate">
+          <ConfirmPop
+            v-else
+            title="停止实例?"
+            content="实例将关机,其上服务与连接中断。"
+            kind="warn"
+            confirm-text="停止"
+            :on-confirm="() => power('STOP')"
+          >
+            <template #trigger>
+              <NButton size="small" :loading="powering === 'STOP'" :disabled="isEnded || !!powering || terminating">
+                停止
+              </NButton>
+            </template>
+          </ConfirmPop>
+          <ConfirmPop
+            title="重启实例?"
+            content="实例将立即重启,期间服务中断。"
+            kind="warn"
+            confirm-text="重启"
+            :on-confirm="() => power('RESET')"
+          >
+            <template #trigger>
+              <NButton size="small" :loading="powering === 'RESET'" :disabled="isEnded || !!powering || terminating">重启</NButton>
+            </template>
+          </ConfirmPop>
+          <NButton
+            size="small"
+            type="error"
+            ghost
+            :loading="terminating"
+            :disabled="isEnded || !!powering || terminating"
+            @click="terminate"
+          >
             终止
           </NButton>
           <NDropdown
             :options="moreOptions"
-            :disabled="isEnded"
+            :disabled="isEnded || !!powering || terminating"
             @select="(key: string) => power(key as PowerAction)"
           >
-            <NButton size="small" quaternary :disabled="isEnded">⋯</NButton>
+            <NButton size="small" quaternary :disabled="isEnded || !!powering || terminating">⋯</NButton>
           </NDropdown>
         </div>
       </div>