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

src/components/tenant/QuotaTab.vue

@@ -127,19 +127,29 @@ const baseColumns: DataTableColumns<LimitItem> = [
   },
 ]
 
+/** 字节类配额可达百亿级,列宽须容纳千分位全量数值,禁止折行 */
 const availColumns: DataTableColumns<LimitItem> = [
   {
     title: '已用',
     key: 'used',
-    width: 80,
-    render: (r) => h('span', { class: 'tabular-nums' }, r.used === undefined ? '—' : String(r.used)),
+    width: 120,
+    render: (r) =>
+      h(
+        'span',
+        { class: 'tabular-nums whitespace-nowrap' },
+        r.used === undefined ? '—' : r.used.toLocaleString('en-US'),
+      ),
   },
   {
     title: '可用',
     key: 'available',
-    width: 80,
+    width: 120,
     render: (r) =>
-      h('span', { class: 'tabular-nums' }, r.available === undefined ? '—' : String(r.available)),
+      h(
+        'span',
+        { class: 'tabular-nums whitespace-nowrap' },
+        r.available === undefined ? '—' : r.available.toLocaleString('en-US'),
+      ),
   },
   {
     title: '用量',
@@ -221,7 +231,7 @@ const columns = computed(() => (withAvail.value ? [...baseColumns, ...availColum
       :data="rows"
       :loading="limits.loading.value"
       :pagination="pagination"
-      :scroll-x="withAvail ? 660 : 380"
+      :scroll-x="withAvail ? 760 : 380"
       :row-key="(r: LimitItem) => r.name + (r.availabilityDomain ?? '')"
     />
     <FootNote>