smart-admin-web 10.15.0 → 10.20.1

package/dist/views/system/ai-usage/index2.vue.js

@@ -1,384 +1,492 @@
-import { defineComponent as oe, ref as n, onMounted as ne, computed as d, watch as Q, h as p, openBlock as i, createElementBlock as m, createVNode as r, unref as l, withCtx as u, createElementVNode as o, toDisplayString as c, createTextVNode as N, Fragment as M, renderList as Y, createBlock as L, createCommentVNode as ie } from "vue";
-import { useMessage as ue, NProgress as de, NCard as $, NDatePicker as ce, NButton as z, NSelect as j, NInput as ve, NGrid as pe, NGi as me, NSkeleton as H, NNumberAnimation as ye, NTabs as ge, NTabPane as fe, NDataTable as ke, NTag as J } from "naive-ui";
-import { useI18n as he } from "vue-i18n";
-import { SmartTable as be } from "smart-naive-table";
-import Ue from "../../../components/Chart/LineChart.vue.js";
-import { aiProviderApi as _e, aiUsageApi as B } from "../../../api/index.js";
-import { AI_USAGE_GROUP_BY as b, AI_USAGE_SOURCE as Te } from "../../../types/api.js";
-import { translateError as E } from "../../../utils/error.js";
-import { fmtDateTime as we } from "../../../utils/format.js";
-const Se = { class: "view" }, Ce = { class: "filter-bar" }, xe = { class: "filter-item" }, Ne = { class: "filter-label" }, Me = { class: "date-filter-row" }, Le = { class: "quick-range" }, $e = { class: "filter-item" }, De = { class: "filter-label" }, Pe = { class: "filter-item" }, Re = { class: "filter-label" }, Ae = { class: "filter-item" }, Ie = { class: "filter-label" }, qe = { class: "metric-body" }, ze = {
+import { defineComponent as ce, ref as o, onMounted as de, computed as d, watch as W, h as n, openBlock as u, createElementBlock as v, createVNode as r, unref as l, withCtx as c, createElementVNode as i, toDisplayString as p, createTextVNode as N, Fragment as $, renderList as Y, createBlock as A, createCommentVNode as pe } from "vue";
+import { useMessage as me, NProgress as ve, NTag as j, NCard as R, NDatePicker as ge, NButton as q, NSelect as J, NInput as fe, NSkeleton as X, NNumberAnimation as ye, NTabs as he, NTabPane as ke } from "naive-ui";
+import { useI18n as be } from "vue-i18n";
+import { SmartTable as Z } from "smart-naive-table";
+import Ue from "../../../components/AppIcon.vue.js";
+import _e from "../../../components/Chart/LineChart.vue.js";
+import { aiProviderApi as Te, aiUsageApi as E } from "../../../api/index.js";
+import { AI_USAGE_GROUP_BY as h, AI_USAGE_SOURCE as we } from "../../../types/api.js";
+import { translateError as K } from "../../../utils/error.js";
+import { fmtDateTime as xe } from "../../../utils/format.js";
+import { SEARCH_ACTIONS as Ce, deriveHeaderFilters as Se } from "../../../utils/tableFilter.js";
+import { TABLE_TOOLBAR as ee } from "../../../utils/tableToolbar.js";
+import ae from "../../../components/TableTotal/index.vue.js";
+const Me = { class: "view" }, Ne = { class: "filter-bar" }, $e = { class: "filter-item filter-item--range" }, Ae = { class: "filter-label faint" }, Re = { class: "date-filter-row" }, ze = { class: "quick-range" }, Le = { class: "filter-item" }, Pe = { class: "filter-label faint" }, De = { class: "filter-item" }, Be = { class: "filter-label faint" }, Ie = { class: "filter-item" }, qe = { class: "filter-label faint" }, Ee = { class: "metrics" }, Ke = { class: "metric-body" }, Oe = { class: "metric-main" }, Ve = {
   key: 1,
   class: "metric-val tabular"
-}, Be = {
+}, Fe = {
   key: 0,
   class: "metric-suffix"
-}, Ee = { class: "metric-label" }, We = /* @__PURE__ */ oe({
+}, Ge = { class: "metric-label muted" }, He = {
+  class: "metric-icon",
+  "aria-hidden": "true"
+}, ia = /* @__PURE__ */ ce({
   __name: "index",
-  setup(Ge) {
-    const { t } = he(), D = ue();
-    function G(e) {
-      const a = e.getFullYear(), s = String(e.getMonth() + 1).padStart(2, "0"), v = String(e.getDate()).padStart(2, "0");
-      return `${a}-${s}-${v}`;
-    }
-    function K(e) {
-      const a = /* @__PURE__ */ new Date();
-      return a.setDate(a.getDate() - e), a;
+  setup(Qe) {
+    const { t: a } = be(), z = me();
+    function O(e) {
+      const t = e.getFullYear(), s = String(e.getMonth() + 1).padStart(2, "0"), m = String(e.getDate()).padStart(2, "0");
+      return `${t}-${s}-${m}`;
     }
     function V(e) {
-      return [G(K(e - 1)), G(K(0))];
+      const t = /* @__PURE__ */ new Date();
+      return t.setDate(t.getDate() - e), t;
+    }
+    function F(e) {
+      return [O(V(e - 1)), O(V(0))];
     }
-    const g = n(V(7)), f = n(7);
-    function P(e) {
-      g.value = V(e), f.value = e;
+    const k = o(F(7)), b = o(7);
+    function L(e) {
+      k.value = F(e), b.value = e;
     }
-    function W(e) {
-      e && (g.value = e, f.value = null);
+    function te(e) {
+      e && (k.value = e, b.value = null);
     }
-    const U = n(null), _ = n(null), T = n(null), F = n([]);
-    ne(async () => {
+    const _ = o(null), T = o(null), w = o(null), G = o([]);
+    de(async () => {
       try {
-        const { items: e } = await _e.page({ page: 1, pageSize: 100 });
-        F.value = e.map((a) => ({ label: a.name, value: a.code }));
+        const { items: e } = await Te.page({ page: 1, pageSize: 100 });
+        G.value = e.map((t) => ({ label: t.name, value: t.code }));
       } catch {
       }
     });
-    const k = d(() => {
+    const U = d(() => {
       const e = {
-        from: `${g.value[0]}T00:00:00`,
-        to: `${g.value[1]}T23:59:59`
+        from: `${k.value[0]}T00:00:00`,
+        to: `${k.value[1]}T23:59:59`
       };
-      return U.value && (e.providerCode = U.value), _.value && (e.model = _.value), T.value && (e.scene = T.value), e;
-    }), O = [
-      { value: b.Provider, labelKey: "provider" },
-      { value: b.Model, labelKey: "model" },
-      { value: b.Scene, labelKey: "scene" },
-      { value: b.User, labelKey: "user" }
-    ], h = n(b.Provider), R = n(null), w = n(!0);
-    let S = 0;
-    async function X() {
-      const e = ++S;
-      w.value = !0;
+      return _.value && (e.providerCode = _.value), T.value && (e.model = T.value), w.value && (e.scene = w.value), e;
+    }), H = [
+      { value: h.Provider, labelKey: "provider" },
+      { value: h.Model, labelKey: "model" },
+      { value: h.Scene, labelKey: "scene" },
+      { value: h.User, labelKey: "user" }
+    ], g = o(h.Provider), P = o(null), x = o(!0);
+    let C = 0;
+    async function le() {
+      const e = ++C;
+      x.value = !0;
       try {
-        const a = await B.summary({ ...k.value, groupBy: h.value });
-        if (e !== S) return;
-        R.value = a;
-      } catch (a) {
-        if (e !== S) return;
-        D.error(E(a));
+        const t = await E.summary({ ...U.value, groupBy: g.value });
+        if (e !== C) return;
+        P.value = t;
+      } catch (t) {
+        if (e !== C) return;
+        z.error(K(t));
       } finally {
-        e === S && (w.value = !1);
+        e === C && (x.value = !1);
       }
     }
-    Q([k, h], X, { immediate: !0 });
-    const y = d(() => {
+    W([U, g], le, { immediate: !0 });
+    const f = d(() => {
       var e;
-      return ((e = R.value) == null ? void 0 : e.totals) ?? null;
-    }), A = d(() => {
+      return ((e = P.value) == null ? void 0 : e.totals) ?? null;
+    }), D = d(() => {
       var e;
-      return ((e = R.value) == null ? void 0 : e.groups) ?? [];
-    }), I = d(() => {
-      const e = A.value.reduce((s, v) => s + v.callCount, 0);
-      return e ? A.value.reduce((s, v) => s + v.avgLatencyMs * v.callCount, 0) / e : null;
-    }), Z = d(() => {
-      var e, a, s;
+      return ((e = P.value) == null ? void 0 : e.groups) ?? [];
+    }), B = d(() => {
+      const e = D.value.reduce((s, m) => s + m.callCount, 0);
+      return e ? D.value.reduce((s, m) => s + m.avgLatencyMs * m.callCount, 0) / e : null;
+    }), se = d(() => {
+      var e, t, s;
       return [
-        { key: "totalTokens", value: ((e = y.value) == null ? void 0 : e.totalTokens) ?? 0, empty: !y.value },
-        { key: "totalCalls", value: ((a = y.value) == null ? void 0 : a.callCount) ?? 0, empty: !y.value },
-        { key: "failureCount", value: ((s = y.value) == null ? void 0 : s.failureCount) ?? 0, empty: !y.value },
+        {
+          key: "totalTokens",
+          icon: "ph:coins",
+          value: ((e = f.value) == null ? void 0 : e.totalTokens) ?? 0,
+          empty: !f.value
+        },
+        {
+          key: "totalCalls",
+          icon: "ph:lightning",
+          value: ((t = f.value) == null ? void 0 : t.callCount) ?? 0,
+          empty: !f.value
+        },
+        {
+          key: "failureCount",
+          icon: "ph:warning-circle",
+          value: ((s = f.value) == null ? void 0 : s.failureCount) ?? 0,
+          empty: !f.value
+        },
         {
           key: "avgLatency",
-          value: I.value != null ? Math.round(I.value) : 0,
+          icon: "ph:timer",
+          value: B.value != null ? Math.round(B.value) : 0,
           suffix: "ms",
-          empty: I.value == null
+          empty: B.value == null
         }
       ];
-    }), ee = d(() => {
-      const e = O.find((a) => a.value === h.value);
-      return t(`aiUsage.groupBy.${(e == null ? void 0 : e.labelKey) ?? "provider"}`);
-    }), te = d(() => [
-      { title: () => ee.value, key: "label", render: (e) => e.label ?? e.key },
+    }), re = d(() => {
+      const e = H.find((t) => t.value === g.value);
+      return a(`aiUsage.groupBy.${(e == null ? void 0 : e.labelKey) ?? "provider"}`);
+    }), y = (e) => n("span", { class: "num" }, e.toLocaleString()), ne = d(() => [
+      {
+        title: () => re.value,
+        key: "label",
+        minWidth: 160,
+        search: {},
+        // 静态数据:条件由 SmartTable 前端求值
+        // 厂商 / 模型 / 场景是编码类文本,等宽;用户维度是姓名,保持正文
+        render: (e) => n(
+          "span",
+          { class: g.value === h.User ? "" : "mono" },
+          e.label ?? e.key
+        )
+      },
       {
-        title: () => t("aiUsage.trend.inputTokens"),
+        title: () => a("aiUsage.trend.inputTokens"),
         key: "inputTokens",
-        render: (e) => e.inputTokens.toLocaleString()
+        width: 120,
+        align: "right",
+        render: (e) => y(e.inputTokens)
       },
       {
-        title: () => t("aiUsage.trend.outputTokens"),
+        title: () => a("aiUsage.trend.outputTokens"),
         key: "outputTokens",
-        render: (e) => e.outputTokens.toLocaleString()
+        width: 120,
+        align: "right",
+        render: (e) => y(e.outputTokens)
       },
       {
-        title: () => t("aiUsage.metric.totalCalls"),
+        title: () => a("aiUsage.metric.totalCalls"),
         key: "callCount",
-        render: (e) => e.callCount.toLocaleString()
+        width: 110,
+        align: "right",
+        render: (e) => y(e.callCount)
       },
       {
-        title: () => t("aiUsage.table.latency"),
+        title: () => a("aiUsage.table.latency"),
         key: "avgLatencyMs",
-        render: (e) => `${Math.round(e.avgLatencyMs)} ms`
+        width: 100,
+        align: "right",
+        render: (e) => n("span", { class: "num" }, `${Math.round(e.avgLatencyMs)} ms`)
       },
       {
-        title: () => t("aiUsage.share"),
+        title: () => a("aiUsage.share"),
         key: "sharePercent",
-        render: (e) => p("div", { class: "share-cell" }, [
-          p("div", { class: "share-bar" }, [
-            p(de, {
+        minWidth: 200,
+        render: (e) => n("div", { class: "share-cell" }, [
+          n("div", { class: "share-bar" }, [
+            n(ve, {
               type: "line",
               percentage: Math.round(e.sharePercent),
               showIndicator: !1,
               height: 6
             })
           ]),
-          p("span", { class: "share-text" }, `${e.sharePercent.toFixed(1)}%`)
+          n("span", { class: "share-text num muted" }, `${e.sharePercent.toFixed(1)}%`)
         ])
       }
-    ]), C = n([]), q = n(!0);
-    let x = 0;
-    async function ae() {
-      const e = ++x;
-      q.value = !0;
+    ]), S = o([]), I = o(!0);
+    let M = 0;
+    async function ie() {
+      const e = ++M;
+      I.value = !0;
       try {
-        const a = await B.trend(k.value);
-        if (e !== x) return;
-        C.value = a;
-      } catch (a) {
-        if (e !== x) return;
-        D.error(E(a));
+        const t = await E.trend(U.value);
+        if (e !== M) return;
+        S.value = t;
+      } catch (t) {
+        if (e !== M) return;
+        z.error(K(t));
       } finally {
-        e === x && (q.value = !1);
+        e === M && (I.value = !1);
       }
     }
-    Q(k, ae, { immediate: !0 });
-    const le = d(() => C.value.map((e) => e.date)), se = d(() => [
-      { name: t("aiUsage.trend.inputTokens"), data: C.value.map((e) => e.inputTokens) },
-      { name: t("aiUsage.trend.outputTokens"), data: C.value.map((e) => e.outputTokens) }
-    ]), re = [
+    W(U, ie, { immediate: !0 });
+    const oe = d(() => S.value.map((e) => e.date)), ue = d(() => [
+      { name: a("aiUsage.trend.inputTokens"), data: S.value.map((e) => e.inputTokens) },
+      { name: a("aiUsage.trend.outputTokens"), data: S.value.map((e) => e.outputTokens) }
+    ]), Q = [
       {
         key: "createTime",
-        title: () => t("aiUsage.table.createTime"),
+        title: () => a("aiUsage.table.createTime"),
         width: 170,
-        render: (e) => we(e.createTime)
+        render: (e) => n("span", { class: "num muted", style: "white-space: nowrap" }, xe(e.createTime))
+      },
+      {
+        key: "providerCode",
+        title: () => a("aiUsage.table.provider"),
+        width: 120,
+        render: (e) => n("span", { class: "mono" }, e.providerCode)
+      },
+      {
+        key: "model",
+        title: () => a("aiUsage.table.model"),
+        width: 140,
+        ellipsis: { tooltip: !0 },
+        render: (e) => n("span", { class: "mono" }, e.model)
+      },
+      {
+        key: "scene",
+        title: () => a("aiUsage.table.scene"),
+        width: 120,
+        render: (e) => n("span", { class: "mono muted" }, e.scene || "—")
       },
-      { key: "providerCode", title: () => t("aiUsage.table.provider"), width: 120 },
-      { key: "model", title: () => t("aiUsage.table.model"), width: 140, ellipsis: { tooltip: !0 } },
-      { key: "scene", title: () => t("aiUsage.table.scene"), width: 120, render: (e) => e.scene || "—" },
       {
         key: "userId",
-        title: () => t("aiUsage.table.user"),
+        title: () => a("aiUsage.table.user"),
         width: 90,
-        render: (e) => e.userId != null ? String(e.userId) : "—"
+        render: (e) => n("span", { class: "num" }, e.userId != null ? String(e.userId) : "—")
       },
       {
         key: "inputTokens",
-        title: () => t("aiUsage.table.inputTokens"),
+        title: () => a("aiUsage.table.inputTokens"),
         width: 110,
-        render: (e) => e.inputTokens.toLocaleString()
+        align: "right",
+        render: (e) => y(e.inputTokens)
       },
       {
         key: "outputTokens",
-        title: () => t("aiUsage.table.outputTokens"),
+        title: () => a("aiUsage.table.outputTokens"),
         width: 110,
-        render: (e) => e.outputTokens.toLocaleString()
+        align: "right",
+        render: (e) => y(e.outputTokens)
       },
       {
         key: "totalTokens",
-        title: () => t("aiUsage.table.totalTokens"),
+        title: () => a("aiUsage.table.totalTokens"),
         width: 110,
-        render: (e) => e.totalTokens.toLocaleString()
+        align: "right",
+        render: (e) => y(e.totalTokens)
       },
       {
         key: "latencyMs",
-        title: () => t("aiUsage.table.latency"),
-        width: 90,
-        render: (e) => `${e.latencyMs} ms`
+        title: () => a("aiUsage.table.latency"),
+        width: 100,
+        align: "right",
+        render: (e) => n("span", { class: "num" }, `${e.latencyMs.toLocaleString()} ms`)
       },
       {
         key: "success",
-        title: () => t("aiUsage.table.status"),
+        title: () => a("aiUsage.table.status"),
         width: 90,
+        // options 只给搜索控件当下拉选项(单元格仍走下面的 render);后端 Success == 精确匹配,所以只开「等于」
+        options: [
+          { label: () => a("aiUsage.table.success"), value: !0 },
+          { label: () => a("aiUsage.table.failed"), value: !1 }
+        ],
+        search: { actions: Ce.exact },
         // 失败行用原生 title 兜底展示 errorMessage,不必为一个只读明细表再引入 NTooltip
-        render: (e) => p("span", { title: !e.success && e.errorMessage ? e.errorMessage : void 0 }, [
-          p(
-            J,
+        render: (e) => n("span", { title: !e.success && e.errorMessage ? e.errorMessage : void 0 }, [
+          n(
+            j,
             { size: "small", bordered: !1, type: e.success ? "success" : "error" },
-            () => e.success ? t("aiUsage.table.success") : t("aiUsage.table.failed")
+            () => e.success ? a("aiUsage.table.success") : a("aiUsage.table.failed")
           )
         ])
       },
       {
         key: "streamed",
-        title: () => t("aiUsage.table.streamed"),
+        title: () => a("aiUsage.table.streamed"),
         width: 80,
-        render: (e) => p(
-          J,
+        render: (e) => n(
+          j,
           { size: "small", bordered: !1 },
-          () => e.streamed ? t("common.yes") : t("common.no")
+          () => e.streamed ? a("common.yes") : a("common.no")
         )
       },
       {
         key: "usageSource",
-        title: () => t("aiUsage.table.usageSource"),
+        title: () => a("aiUsage.table.usageSource"),
         width: 110,
-        render: (e) => e.usageSource === Te.Reported ? t("aiUsage.table.usageSourceReported") : t("aiUsage.table.usageSourceMissing")
+        render: (e) => e.usageSource === we.Reported ? a("aiUsage.table.usageSourceReported") : a("aiUsage.table.usageSourceMissing")
       }
     ];
-    return (e, a) => (i(), m("div", Se, [
-      r(l($), { bordered: !0 }, {
-        default: u(() => [
-          o("div", Ce, [
-            o("div", xe, [
-              o("span", Ne, c(l(t)("aiUsage.filter.dateRange")), 1),
-              o("div", Me, [
-                r(l(ce), {
-                  "formatted-value": g.value,
+    return Se(Q), (e, t) => (u(), v("div", Me, [
+      r(l(R), {
+        class: "a-card",
+        size: "small",
+        bordered: !0,
+        "content-style": "padding: 12px 14px"
+      }, {
+        default: c(() => [
+          i("div", Ne, [
+            i("div", $e, [
+              i("span", Ae, p(l(a)("aiUsage.filter.dateRange")), 1),
+              i("div", Re, [
+                r(l(ge), {
+                  "formatted-value": k.value,
                   type: "daterange",
                   "value-format": "yyyy-MM-dd",
-                  style: { width: "240px" },
-                  "onUpdate:formattedValue": W
+                  class: "date-picker",
+                  "onUpdate:formattedValue": te
                 }, null, 8, ["formatted-value"]),
-                o("div", Le, [
-                  r(l(z), {
+                i("div", ze, [
+                  r(l(q), {
                     size: "small",
                     quaternary: "",
-                    type: f.value === 1 ? "primary" : "default",
-                    onClick: a[0] || (a[0] = (s) => P(1))
+                    type: b.value === 1 ? "primary" : "default",
+                    onClick: t[0] || (t[0] = (s) => L(1))
                   }, {
-                    default: u(() => [
-                      N(c(l(t)("aiUsage.filter.today")), 1)
+                    default: c(() => [
+                      N(p(l(a)("aiUsage.filter.today")), 1)
                     ]),
                     _: 1
                   }, 8, ["type"]),
-                  r(l(z), {
+                  r(l(q), {
                     size: "small",
                     quaternary: "",
-                    type: f.value === 7 ? "primary" : "default",
-                    onClick: a[1] || (a[1] = (s) => P(7))
+                    type: b.value === 7 ? "primary" : "default",
+                    onClick: t[1] || (t[1] = (s) => L(7))
                   }, {
-                    default: u(() => [
-                      N(c(l(t)("aiUsage.filter.last7Days")), 1)
+                    default: c(() => [
+                      N(p(l(a)("aiUsage.filter.last7Days")), 1)
                     ]),
                     _: 1
                   }, 8, ["type"]),
-                  r(l(z), {
+                  r(l(q), {
                     size: "small",
                     quaternary: "",
-                    type: f.value === 30 ? "primary" : "default",
-                    onClick: a[2] || (a[2] = (s) => P(30))
+                    type: b.value === 30 ? "primary" : "default",
+                    onClick: t[2] || (t[2] = (s) => L(30))
                   }, {
-                    default: u(() => [
-                      N(c(l(t)("aiUsage.filter.last30Days")), 1)
+                    default: c(() => [
+                      N(p(l(a)("aiUsage.filter.last30Days")), 1)
                     ]),
                     _: 1
                   }, 8, ["type"])
                 ])
               ])
             ]),
-            o("div", $e, [
-              o("span", De, c(l(t)("aiUsage.filter.provider")), 1),
-              r(l(j), {
-                value: U.value,
-                "onUpdate:value": a[3] || (a[3] = (s) => U.value = s),
-                options: F.value,
+            i("div", Le, [
+              i("span", Pe, p(l(a)("aiUsage.filter.provider")), 1),
+              r(l(J), {
+                value: _.value,
+                "onUpdate:value": t[3] || (t[3] = (s) => _.value = s),
+                options: G.value,
                 clearable: "",
                 filterable: "",
-                style: { width: "180px" },
-                placeholder: l(t)("aiUsage.filter.providerAll")
+                class: "filter-ctl",
+                placeholder: l(a)("aiUsage.filter.providerAll")
               }, null, 8, ["value", "options", "placeholder"])
             ]),
-            o("div", Pe, [
-              o("span", Re, c(l(t)("aiUsage.filter.model")), 1),
-              r(l(j), {
-                value: _.value,
-                "onUpdate:value": a[4] || (a[4] = (s) => _.value = s),
+            i("div", De, [
+              i("span", Be, p(l(a)("aiUsage.filter.model")), 1),
+              r(l(J), {
+                value: T.value,
+                "onUpdate:value": t[4] || (t[4] = (s) => T.value = s),
                 options: [],
                 filterable: "",
                 tag: "",
                 clearable: "",
-                style: { width: "180px" },
-                placeholder: l(t)("aiUsage.filter.modelAll")
+                class: "filter-ctl",
+                placeholder: l(a)("aiUsage.filter.modelAll")
               }, null, 8, ["value", "placeholder"])
             ]),
-            o("div", Ae, [
-              o("span", Ie, c(l(t)("aiUsage.filter.scene")), 1),
-              r(l(ve), {
-                value: T.value,
-                "onUpdate:value": a[5] || (a[5] = (s) => T.value = s),
+            i("div", Ie, [
+              i("span", qe, p(l(a)("aiUsage.filter.scene")), 1),
+              r(l(fe), {
+                value: w.value,
+                "onUpdate:value": t[5] || (t[5] = (s) => w.value = s),
                 clearable: "",
-                style: { width: "180px" },
-                placeholder: l(t)("aiUsage.filter.scenePlaceholder")
+                class: "filter-ctl",
+                placeholder: l(a)("aiUsage.filter.scenePlaceholder")
               }, null, 8, ["value", "placeholder"])
             ])
           ])
         ]),
         _: 1
       }),
-      r(l(pe), {
-        cols: "1 s:2 l:4",
-        responsive: "screen",
-        "x-gap": 16,
-        "y-gap": 16
+      i("div", Ee, [
+        (u(!0), v($, null, Y(se.value, (s) => (u(), A(l(R), {
+          key: s.key,
+          class: "a-card",
+          size: "small",
+          bordered: !0,
+          "content-style": "padding: 12px 14px"
+        }, {
+          default: c(() => [
+            i("div", Ke, [
+              i("div", Oe, [
+                x.value ? (u(), A(l(X), {
+                  key: 0,
+                  text: "",
+                  width: "72px",
+                  height: "34px"
+                })) : (u(), v("div", Ve, [
+                  s.empty ? (u(), v($, { key: 0 }, [
+                    N("—")
+                  ], 64)) : (u(), v($, { key: 1 }, [
+                    r(l(ye), {
+                      from: 0,
+                      to: s.value,
+                      "show-separator": ""
+                    }, null, 8, ["to"]),
+                    s.suffix ? (u(), v("small", Fe, p(" " + s.suffix), 1)) : pe("", !0)
+                  ], 64))
+                ])),
+                i("div", Ge, p(l(a)(`aiUsage.metric.${s.key}`)), 1)
+              ]),
+              i("div", He, [
+                r(Ue, {
+                  icon: s.icon,
+                  size: 15
+                }, null, 8, ["icon"])
+              ])
+            ])
+          ]),
+          _: 2
+        }, 1024))), 128))
+      ]),
+      r(l(R), {
+        title: l(a)("aiUsage.trend.title"),
+        class: "a-card",
+        size: "small",
+        bordered: !0,
+        "content-style": "padding: 8px 14px 12px"
       }, {
-        default: u(() => [
-          (i(!0), m(M, null, Y(Z.value, (s) => (i(), L(l(me), {
-            key: s.key
-          }, {
-            default: u(() => [
-              r(l($), { bordered: !0 }, {
-                default: u(() => [
-                  o("div", qe, [
-                    w.value ? (i(), L(l(H), {
-                      key: 0,
-                      text: "",
-                      width: "72px",
-                      height: "34px"
-                    })) : (i(), m("div", ze, [
-                      s.empty ? (i(), m(M, { key: 0 }, [
-                        N("—")
-                      ], 64)) : (i(), m(M, { key: 1 }, [
-                        r(l(ye), {
-                          from: 0,
-                          to: s.value,
-                          "show-separator": ""
-                        }, null, 8, ["to"]),
-                        s.suffix ? (i(), m("span", Be, c(" " + s.suffix), 1)) : ie("", !0)
-                      ], 64))
-                    ])),
-                    o("div", Ee, c(l(t)(`aiUsage.metric.${s.key}`)), 1)
-                  ])
-                ]),
-                _: 2
-              }, 1024)
-            ]),
-            _: 2
-          }, 1024))), 128))
+        default: c(() => [
+          I.value ? (u(), A(l(X), {
+            key: 0,
+            height: "320px",
+            sharp: !1
+          })) : (u(), A(_e, {
+            key: 1,
+            categories: oe.value,
+            series: ue.value
+          }, null, 8, ["categories", "series"]))
         ]),
         _: 1
-      }),
-      r(l($), { bordered: !0 }, {
-        default: u(() => [
-          r(l(ge), {
-            value: h.value,
-            "onUpdate:value": a[6] || (a[6] = (s) => h.value = s),
+      }, 8, ["title"]),
+      r(l(R), {
+        class: "a-card",
+        size: "small",
+        bordered: !0,
+        "content-style": "padding: 4px 14px 12px"
+      }, {
+        default: c(() => [
+          r(l(he), {
+            value: g.value,
+            "onUpdate:value": t[6] || (t[6] = (s) => g.value = s),
             type: "line",
             animated: ""
           }, {
-            default: u(() => [
-              (i(), m(M, null, Y(O, (s) => r(l(fe), {
+            default: c(() => [
+              (u(), v($, null, Y(H, (s) => r(l(ke), {
                 key: s.value,
                 name: s.value,
-                tab: l(t)(`aiUsage.groupBy.${s.labelKey}`),
+                tab: l(a)(`aiUsage.groupBy.${s.labelKey}`),
                 "display-directive": "show:lazy"
               }, {
-                default: u(() => [
-                  r(l(ke), {
-                    columns: te.value,
-                    data: A.value,
-                    loading: w.value,
-                    "row-key": (v) => v.key,
-                    bordered: !1,
-                    size: "small"
-                  }, null, 8, ["columns", "data", "loading", "row-key"])
+                default: c(() => [
+                  r(l(Z), {
+                    columns: ne.value,
+                    data: D.value,
+                    "row-key": "key",
+                    loading: x.value,
+                    search: { container: "table" },
+                    toolbar: l(ee),
+                    "card-props": { bordered: !1 },
+                    "scroll-x": 720,
+                    "card-on-narrow": "",
+                    "storage-key": "sys-ai-usage-group"
+                  }, {
+                    "pagination-prefix": c(({ itemCount: m }) => [
+                      r(ae, { count: m }, null, 8, ["count"])
+                    ]),
+                    _: 1
+                  }, 8, ["columns", "data", "loading", "toolbar"])
                 ]),
                 _: 1
               }, 8, ["name", "tab"])), 64))
@@ -388,36 +496,26 @@ const Se = { class: "view" }, Ce = { class: "filter-bar" }, xe = { class: "filte
         ]),
         _: 1
       }),
-      r(l($), {
-        title: l(t)("aiUsage.trend.title"),
-        bordered: !0
+      r(l(Z), {
+        columns: Q,
+        fetcher: l(E).page,
+        params: U.value,
+        search: { container: "table" },
+        toolbar: l(ee),
+        "default-page-size": 20,
+        "card-on-narrow": "",
+        "storage-key": "sys-ai-usage",
+        onError: t[7] || (t[7] = (s) => l(z).error(l(K)(s)))
       }, {
-        default: u(() => [
-          q.value ? (i(), L(l(H), {
-            key: 0,
-            height: "320px",
-            sharp: !1
-          })) : (i(), L(Ue, {
-            key: 1,
-            categories: le.value,
-            series: se.value
-          }, null, 8, ["categories", "series"]))
+        "pagination-prefix": c(({ itemCount: s }) => [
+          r(ae, { count: s }, null, 8, ["count"])
         ]),
         _: 1
-      }, 8, ["title"]),
-      r(l(be), {
-        columns: re,
-        fetcher: l(B).page,
-        params: k.value,
-        search: !1,
-        "default-page-size": 20,
-        "storage-key": "sys-ai-usage",
-        onError: a[7] || (a[7] = (s) => l(D).error(l(E)(s)))
-      }, null, 8, ["fetcher", "params"])
+      }, 8, ["fetcher", "params", "toolbar"])
     ]));
   }
 });
 export {
-  We as default
+  ia as default
 };
 //# sourceMappingURL=index2.vue.js.map