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

src/components/PanelHeader.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+/** 面板标准头:统一 px-4.5 py-3.5 内距、text-sm 标题、text-xs 弱化描述。
+ *  右侧动作放默认插槽;标题行内的徽标/计数放 #title-extra;富文本描述放 #desc。 */
+defineProps<{ title: string; desc?: string }>()
+</script>
+
+<template>
+  <div
+    class="flex flex-wrap items-center justify-between gap-3 border-b border-line-soft px-4.5 py-3.5"
+  >
+    <div class="min-w-0">
+      <div class="flex min-w-0 items-center gap-2 text-sm font-semibold">
+        <span class="truncate">{{ title }}</span>
+        <slot name="title-extra" />
+      </div>
+      <div v-if="desc || $slots.desc" class="mt-0.5 text-xs text-ink-3">
+        <template v-if="desc">{{ desc }}</template>
+        <slot name="desc" />
+      </div>
+    </div>
+    <div v-if="$slots.default" class="flex flex-wrap items-center gap-2">
+      <slot />
+    </div>
+  </div>
+</template>