feat: 在团队组件中添加统计信息，展示团队总人数及各级人数

src/views/user/components/team.vue

@@ -20,6 +20,8 @@ const fetchData: TableFetchData = ({ pagination, filter }) => {
   );
 };
 
+const { data } = safeClient(client.api.admin.referrals.summary.get({ query: { referralCode: props.code } }));
+
 const columns: TableBaseColumns = [
   {
     key: 'descendant.name',
@@ -68,15 +70,34 @@ const filterColumns: TableFilterColumns = [
 </script>
 
 <template>
-  <TableBase
-    ref="tableInst"
-    :fetch-data="fetchData"
-    :columns="columns"
-    :filter-columns="filterColumns"
-    :scroll-x="800"
-    :show-header-operation="false"
-    :filter-columns-count="3"
-  />
+  <div class="mt-5">
+    <NCard>
+      <NRow>
+        <NCol :span="6">
+          <NStatistic label="团队总人数" :value="data?.totalCount || 0" />
+        </NCol>
+        <NCol :span="6">
+          <NStatistic label="一级" :value="data?.level1Count || 0" />
+        </NCol>
+        <NCol :span="6">
+          <NStatistic label="二级" :value="data?.level2Count || 0" />
+        </NCol>
+        <NCol :span="6">
+          <NStatistic label="三级" :value="data?.level3Count || 0" />
+        </NCol>
+      </NRow>
+    </NCard>
+
+    <TableBase
+      ref="tableInst"
+      :fetch-data="fetchData"
+      :columns="columns"
+      :filter-columns="filterColumns"
+      :scroll-x="800"
+      :show-header-operation="false"
+      :filter-columns-count="3"
+    />
+  </div>
 </template>
 
 <style lang="css" scoped></style>