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

src/typings/components.d.ts

@@ -48,6 +48,7 @@ declare module 'vue' {
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCol: typeof import('naive-ui')['NCol']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDatePicker: typeof import('naive-ui')['NDatePicker']
@@ -73,6 +74,7 @@ declare module 'vue' {
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NPopover: typeof import('naive-ui')['NPopover']
+    NRow: typeof import('naive-ui')['NRow']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
@@ -141,6 +143,7 @@ declare global {
   const NButton: typeof import('naive-ui')['NButton']
   const NCard: typeof import('naive-ui')['NCard']
   const NCheckbox: typeof import('naive-ui')['NCheckbox']
+  const NCol: typeof import('naive-ui')['NCol']
   const NColorPicker: typeof import('naive-ui')['NColorPicker']
   const NDataTable: typeof import('naive-ui')['NDataTable']
   const NDatePicker: typeof import('naive-ui')['NDatePicker']
@@ -166,6 +169,7 @@ declare global {
   const NModal: typeof import('naive-ui')['NModal']
   const NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
   const NPopover: typeof import('naive-ui')['NPopover']
+  const NRow: typeof import('naive-ui')['NRow']
   const NScrollbar: typeof import('naive-ui')['NScrollbar']
   const NSelect: typeof import('naive-ui')['NSelect']
   const NSpace: typeof import('naive-ui')['NSpace']

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
+  <div class="mt-5">
-    ref="tableInst"
+    <NCard>
-    :fetch-data="fetchData"
+      <NRow>
-    :columns="columns"
+        <NCol :span="6">
-    :filter-columns="filterColumns"
+          <NStatistic label="团队总人数" :value="data?.totalCount || 0" />
-    :scroll-x="800"
+        </NCol>
-    :show-header-operation="false"
+        <NCol :span="6">
-    :filter-columns-count="3"
+          <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>