新增对象存储/账单/保留IP页面,成本今天视图与样式收敛

src/views/TenantDetailView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NButton, NPopconfirm, NSelect, NSpin, NTabPane, NTabs, NTooltip } from 'naive-ui'
+import { NButton, NSelect, NSpin, NTabPane, NTabs, NTooltip } from 'naive-ui'
 import { computed, ref, watch } from 'vue'
 import { RouterLink, useRoute, useRouter } from 'vue-router'
 
@@ -7,7 +7,10 @@ import { deleteConfig, getConfig, verifyConfig } from '@/api/configs'
 import { listIdentityDomains } from '@/api/tenant'
 import AccountTypeBadge from '@/components/AccountTypeBadge.vue'
 import AuditLogTab from '@/components/tenant/AuditLogTab.vue'
+import ConfirmPop from '@/components/ConfirmPop.vue'
+import EmptyCard from '@/components/EmptyCard.vue'
 import CostTab from '@/components/tenant/CostTab.vue'
+import InvoiceTab from '@/components/tenant/InvoiceTab.vue'
 import DeadPlaceholder from '@/components/DeadPlaceholder.vue'
 import IdpTab from '@/components/tenant/IdpTab.vue'
 import MiscTab from '@/components/tenant/MiscTab.vue'
@@ -98,11 +101,8 @@ async function remove() {
     >
       <NSpin size="small" />
     </div>
-    <div
-      v-else-if="config.error.value"
-      class="panel px-5 py-10 text-center text-[13px] text-ink-3"
-    >
-      {{ config.error.value }}
+    <div v-else-if="config.error.value" class="panel">
+      <EmptyCard title="租户加载失败" :note="config.error.value" />
     </div>
 
     <div v-if="config.data.value" class="panel px-5 pt-4 pb-0">
@@ -136,20 +136,18 @@ async function remove() {
         <AccountTypeBadge :type="config.data.value.accountType" />
         <div class="flex-1" />
         <NButton size="small" :loading="verifying" @click="verify">立即测活</NButton>
-        <NPopconfirm negative-text="取消" positive-text="删除" @positive-click="remove">
+        <ConfirmPop
+          :title="`删除「${config.data.value.alias}」？`"
+          content="将清理面板内关联数据。"
+          note="云端日志回传链路请先在「其他」页销毁"
+          confirm-text="删除"
+          placement="bottom-end"
+          :on-confirm="remove"
+        >
           <template #trigger>
             <NButton size="small" type="error" ghost>删除租户</NButton>
           </template>
-          <div class="max-w-80 text-[13px] leading-relaxed">
-            <div class="font-medium">删除「{{ config.data.value.alias }}」？</div>
-            <div class="mt-1 text-xs text-ink-3">
-              将清理面板内关联数据：后台任务、测活 / 成本快照、回传事件、Webhook 密钥与 AI 渠道。
-            </div>
-            <div class="mt-0.5 text-xs text-ink-3">
-              OCI 云端资源不受影响；云端日志回传链路请先在「其他」页销毁。
-            </div>
-          </div>
-        </NPopconfirm>
+        </ConfirmPop>
       </div>
 
       <div class="mt-3 grid grid-cols-4 gap-4 pb-4 max-lg:grid-cols-2 max-md:grid-cols-1">
@@ -176,6 +174,7 @@ async function remove() {
         <NTabPane name="idp" tab="IDP" />
         <NTabPane name="users" tab="用户" />
         <NTabPane name="cost" tab="成本" />
+        <NTabPane name="invoice" tab="发票" />
         <NTabPane name="subs" tab="订阅" />
         <NTabPane name="audit" tab="审计日志" />
         <NTabPane name="misc" tab="其他" />
@@ -200,6 +199,7 @@ async function remove() {
         <IdpTab v-else-if="tab === 'idp'" :key="`idp-${domainId ?? ''}`" :cfg-id="cfgId" :domain-id="domainId" />
         <UsersTab v-else-if="tab === 'users'" :key="`users-${domainId ?? ''}`" :cfg-id="cfgId" :domain-id="domainId" />
         <CostTab v-else-if="tab === 'cost'" :cfg-id="cfgId" />
+        <InvoiceTab v-else-if="tab === 'invoice'" :cfg-id="cfgId" />
         <SubsTab v-else-if="tab === 'subs'" :cfg-id="cfgId" :account-type="config.data.value.accountType" />
         <AuditLogTab v-else-if="tab === 'audit'" :cfg-id="cfgId" />
         <MiscTab v-else :key="`misc-${domainId ?? ''}`" :cfg-id="cfgId" :domain-id="domainId" />