发布 0.1.0:通知渠道、告警规则与多项体验修复

src/views/InstanceDetailView.vue

@@ -6,7 +6,6 @@ import {
   NPopconfirm,
   NSpin,
   useDialog,
-  useMessage,
   type DataTableColumns,
 } from 'naive-ui'
 import { computed, h, ref, watch } from 'vue'
@@ -49,10 +48,11 @@ import {
   useTransientPoll,
 } from '@/composables/useTransientPoll'
 import type { BootVolume, ConsoleConnection, PowerAction, VolumeAttachment } from '@/types/api'
+import { useToast } from '@/composables/useToast'
 
 const route = useRoute()
 const router = useRouter()
-const message = useMessage()
+const message = useToast()
 const dialog = useDialog()
 const { alias: regionAlias } = useRegionAlias()
 
@@ -133,10 +133,23 @@ const isStopped = computed(() => instance.data.value?.lifecycleState === 'STOPPE
 const isEnded = computed(() =>
   ['TERMINATED', 'TERMINATING'].includes(instance.data.value?.lifecycleState ?? ''),
 )
+
+// 区块数据首次加载中禁用对应头部按钮(loading && !data:静默轮询刷新不闪禁用态)
+const bvLoading = computed(
+  () => (bvAtts.loading.value || bvDetails.loading.value) && !bvDetails.data.value,
+)
+const volLoading = computed(() => volAtts.loading.value && !volAtts.data.value)
+const consolesLoading = computed(() => consoles.loading.value && !consoles.data.value)
 const attachedVolumeIds = computed(() => (volAtts.data.value ?? []).map((a) => a.volumeId))
 
 /** 创建时若选了随机密码，密码写在 TAG RootPassword 中，这里回显 */
 const rootPassword = computed(() => instance.data.value?.freeformTags?.RootPassword ?? '')
+// 密码默认掩码(S-01),点击查看后本页会话内保持可见
+const pwdRevealed = ref(false)
+
+function revealRootPassword() {
+  pwdRevealed.value = true
+}
 
 async function copyRootPassword() {
   await navigator.clipboard.writeText(rootPassword.value)
@@ -181,7 +194,6 @@ function openSerial() {
     instanceId: instanceId.value,
     region: region.value,
     instanceName: instance.data.value?.displayName,
-    rootPassword: rootPassword.value,
   })
 }
 
@@ -492,10 +504,28 @@ const consoleColumns: DataTableColumns<ConsoleConnection> = [
           >
             <div class="w-22 flex-none text-xs text-ink-3 max-md:w-auto">ROOT 密码</div>
             <div class="flex min-w-0 flex-1 items-center gap-1.5">
-              <code class="mono truncate text-[13px]" :title="rootPassword">{{ rootPassword }}</code>
-              <NButton size="tiny" quaternary type="primary" @click="copyRootPassword">
-                复制
-              </NButton>
+              <template v-if="pwdRevealed">
+                <code class="mono truncate text-[13px]" :title="rootPassword">{{ rootPassword }}</code>
+                <NButton size="tiny" quaternary type="primary" @click="copyRootPassword">
+                  复制
+                </NButton>
+              </template>
+              <template v-else>
+                <code class="mono text-[13px] tracking-widest select-none">••••••••</code>
+                <NButton
+                  size="tiny"
+                  quaternary
+                  type="primary"
+                  title="验证身份后查看"
+                  @click="revealRootPassword"
+                >
+                  <svg class="mr-1 h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"></path>
+                    <circle cx="12" cy="12" r="3"></circle>
+                  </svg>
+                  查看
+                </NButton>
+              </template>
             </div>
           </div>
           <div class="flex gap-3 py-2.5 max-md:flex-col max-md:gap-0.5">
@@ -593,7 +623,7 @@ const consoleColumns: DataTableColumns<ConsoleConnection> = [
         <div class="text-sm font-semibold">引导卷</div>
         <NButton
           size="small"
-          :disabled="!isStopped || isEnded"
+          :disabled="!isStopped || isEnded || bvLoading"
           :title="isStopped ? '' : '替换引导卷须实例处于 STOPPED'"
           @click="showReplaceBv = true"
         >
@@ -661,7 +691,12 @@ const consoleColumns: DataTableColumns<ConsoleConnection> = [
     <div class="panel">
       <div class="flex items-center justify-between border-b border-line-soft px-4.5 py-3.5">
         <div class="text-sm font-semibold">块存储卷</div>
-        <NButton size="small" type="primary" :disabled="isEnded" @click="showAttachVol = true">
+        <NButton
+          size="small"
+          type="primary"
+          :disabled="isEnded || volLoading"
+          @click="showAttachVol = true"
+        >
           附加块卷
         </NButton>
       </div>
@@ -682,11 +717,20 @@ const consoleColumns: DataTableColumns<ConsoleConnection> = [
       <div class="flex items-center justify-between border-b border-line-soft px-4.5 py-3.5">
         <div class="text-sm font-semibold">控制台连接（VNC / 串口）</div>
         <div class="flex items-center gap-2">
-          <NButton size="small" type="primary" :disabled="isEnded" @click="openSerial">
+          <NButton
+            size="small"
+            type="primary"
+            :disabled="isEnded || consolesLoading"
+            @click="openSerial"
+          >
             串行终端
           </NButton>
-          <NButton size="small" :disabled="isEnded" @click="openVnc">网页 VNC</NButton>
-          <NButton size="small" :disabled="isEnded" @click="showConsole = true">创建连接</NButton>
+          <NButton size="small" :disabled="isEnded || consolesLoading" @click="openVnc">
+            网页 VNC
+          </NButton>
+          <NButton size="small" :disabled="isEnded || consolesLoading" @click="showConsole = true">
+            创建连接
+          </NButton>
         </div>
       </div>
       <NDataTable