style(统计业务): 统一统计页面样式和布局

- 引入公共样式文件，简化各统计页面的样式管理
- 优化统计页面的容器布局，采用flex布局以提升响应式表现
- 统一表单项的样式，确保一致性和可读性
- 移除冗余的样式定义，提升代码整洁度

src/router/index.js

@@ -94,7 +94,8 @@ const mainRoutes = {
     { path: '/reportList-lingshuFullYear', component: _import('modules/reportList/lingshuFullYear'), name: 'reportList-lingshuFullYear', meta: { title: '灵枢年度报表', isTab: true } },
     { path: '/content-psychologicalForum', component: _import('modules/content/psychologicalForum'), name: 'content-psychologicalForum', meta: { title: '心理论坛', isTab: true } },
     { path: '/statisticsBusiness-courseStatistics', component: _import('modules/statisticsBusiness/courseStatistics/index'), name: 'statisticsBusiness-courseStatistics', meta: { title: '课程统计', isTab: true } },
-    { path: '/statisticsBusiness-vipStatistics', component: _import('modules/statisticsBusiness/vipStatistics/index'), name: 'statisticsBusiness-vipStatistics', meta: { title: 'VIP统计', isTab: true } }
+    { path: '/statisticsBusiness-vipStatistics', component: _import('modules/statisticsBusiness/vipStatistics/index'), name: 'statisticsBusiness-vipStatistics', meta: { title: 'VIP统计', isTab: true } },
+    { path: '/statisticsBusiness-userStatistics', component: _import('modules/statisticsBusiness/userStatistics/index'), name: 'statisticsBusiness-userStatistics', meta: { title: '用户统计', isTab: true } },
   ],
   beforeEnter (to, from, next) {
     let token = Vue.cookie.get('token')

src/views/modules/statisticsBusiness/courseStatistics/amountStatistics.vue

@@ -217,22 +217,13 @@ export default {
 </script>
 
 <style scoped lang="less">
+@import '../styles/statistics-common.less';
+
 .course-statistics-container {
-  display: flex;
+  .sb-page-height-with-table();
-  flex-direction: column;
-  height: calc(100vh - 220px);
-
-  .table-container {
-    flex: 1;
-    overflow: hidden;
-  }
 }
 
-.el-form .el-form-item {
+.sb-form-item-ten();
-  margin-bottom: 10px !important;
-}
 
-/deep/ .el-dialog__wrapper .el-dialog__body {
+.sb-dialog-body-no-top-padding();
-  padding-top: 0 !important;
-}
 </style>

src/views/modules/statisticsBusiness/courseStatistics/courseStatistics.vue

@@ -414,15 +414,10 @@ export default {
 </script>
 
 <style scoped lang="less">
-.course-statistics-container {
+@import '../styles/statistics-common.less';
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 220px);
 
-  .table-container {
+.course-statistics-container {
-    flex: 1;
+  .sb-page-height-with-table();
-    overflow: hidden;
-  }
 }
 
 .dialog-header {
@@ -438,11 +433,7 @@ export default {
   color: #303133;
 }
 
-.el-form .el-form-item {
+.sb-form-item-ten();
-  margin-bottom: 10px !important;
-}
 
-/deep/ .el-dialog__wrapper .el-dialog__body {
+.sb-dialog-body-no-top-padding();
-  padding-top: 0 !important;
-}
 </style>

src/views/modules/statisticsBusiness/courseStatistics/index.vue

@@ -31,8 +31,8 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
-.el-form .el-form-item {
+@import '../styles/statistics-common.less';
-  margin-bottom: 10px !important;
+
-}
+.sb-form-item-ten();
 </style>

src/views/modules/statisticsBusiness/courseStatistics/labelStatistics.vue

@@ -177,18 +177,11 @@ export default {
 </script>
 
 <style scoped lang="less">
+@import '../styles/statistics-common.less';
+
 .course-label-statistics-container {
-  display: flex;
+  .sb-page-height-with-table();
-  flex-direction: column;
-  height: calc(100vh - 220px);
-
-  .table-container {
-    flex: 1;
-    overflow: hidden;
-  }
 }
 
-.el-form .el-form-item {
+.sb-form-item-ten();
-  margin-bottom: 10px !important;
-}
 </style>

src/views/modules/statisticsBusiness/styles/statistics-common.less

@@ -0,0 +1,153 @@
+.sb-form-item-zero() {
+  .el-form-item {
+    margin-bottom: 0 !important;
+  }
+}
+
+.sb-form-item-ten() {
+  .el-form .el-form-item {
+    margin-bottom: 10px !important;
+  }
+}
+
+.sb-table-compact() {
+  /deep/ .el-table .cell,
+  /deep/ .el-table th > .cell {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    line-height: 20px;
+  }
+}
+
+.sb-statistics-table-min() {
+  /deep/ .statistics-table {
+    min-height: 500px;
+  }
+
+  /deep/ .statistics-table .el-table__body-wrapper,
+  /deep/ .statistics-table .el-table__empty-block {
+    min-height: 452px;
+  }
+}
+
+.sb-page-height-with-table() {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 220px);
+
+  .table-container {
+    flex: 1;
+    overflow: hidden;
+  }
+}
+
+.sb-dialog-body-no-top-padding() {
+  /deep/ .el-dialog__wrapper .el-dialog__body {
+    padding-top: 0 !important;
+  }
+}
+
+.sb-white-panel(@padding: 8px) {
+  background: #fff;
+  border-radius: 4px;
+  padding: @padding;
+}
+
+.sb-flex-column-fill() {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.sb-detail-header(@mb: 16px) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: @mb;
+}
+
+.sb-title-16() {
+  font-size: 16px;
+  font-weight: 700;
+  color: #303133;
+}
+
+.sb-summary-card-text() {
+  .summary-card__label {
+    margin-bottom: 8px;
+    font-size: 14px;
+    color: #606266;
+  }
+
+  .summary-card__value {
+    font-size: 24px;
+    font-weight: 700;
+    color: #1f2d3d;
+  }
+}
+
+.sb-summary-section-flex(@gap: 12px) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: @gap;
+}
+
+.sb-summary-card-shell(
+  @basis: 180px,
+  @width: 180px,
+  @minHeight: 180px,
+  @padding: 16px,
+  @bg: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%)
+) {
+  display: flex;
+  flex: 1 1 @basis;
+  width: @width;
+  flex-direction: column;
+  min-height: @minHeight;
+  padding: @padding;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background: @bg;
+  box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
+}
+
+.sb-summary-card-two-columns(@basis: 280px, @width: 280px) {
+  flex-basis: @basis;
+  width: @width;
+}
+
+.sb-summary-card-title(@mb: 14px) {
+  margin-bottom: @mb;
+  .sb-title-16();
+}
+
+.sb-summary-card-body(@gap: 10px) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: @gap;
+}
+
+.sb-summary-card-body-two-columns(@rowGap: 10px, @colGap: 30px) {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: @rowGap @colGap;
+}
+
+.sb-summary-line(@gap: 12px) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: @gap;
+  line-height: 1.5;
+}
+
+.sb-summary-line-label() {
+  color: #606266;
+}
+
+.sb-summary-line-value() {
+  font-weight: 700;
+  color: #1f2d3d;
+  text-align: right;
+}

src/views/modules/statisticsBusiness/userStatistics/homeUser.vue

@@ -0,0 +1,14 @@
+<template>
+  <userStatisticsBase mode="day" />
+</template>
+
+<script>
+import userStatisticsBase from './userStatisticsBase'
+
+export default {
+  components: {
+    userStatisticsBase
+  }
+}
+</script>
+

src/views/modules/statisticsBusiness/userStatistics/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="mod-config">
+    <el-tabs v-model="activeTab" type="card">
+      <el-tab-pane label="首页" name="homeUser" />
+      <el-tab-pane label="月度" name="monthUser" />
+      <el-tab-pane label="年度" name="yearUser" />
+      <el-tab-pane label="留存率" name="retainUser" />
+    </el-tabs>
+    <keep-alive>
+      <component :is="activeTab" />
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import homeUser from './homeUser'
+import monthUser from './monthUser'
+import yearUser from './yearUser'
+import retainUser from './retainUser'
+
+export default {
+  components: {
+    homeUser,
+    monthUser,
+    yearUser,
+    retainUser
+  },
+  data() {
+    return {
+      activeTab: 'homeUser'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '../styles/statistics-common.less';
+
+.sb-form-item-ten();
+</style>

src/views/modules/statisticsBusiness/userStatistics/monthUser.vue

@@ -0,0 +1,14 @@
+<template>
+  <userStatisticsBase mode="month" />
+</template>
+
+<script>
+import userStatisticsBase from './userStatisticsBase'
+
+export default {
+  components: {
+    userStatisticsBase
+  }
+}
+</script>
+

src/views/modules/statisticsBusiness/userStatistics/retainUser.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="retain-statistics-container" v-loading="loading">
+    <div class="query-section">
+      <el-form :inline="true" @keyup.enter.native="getDataList">
+        <el-form-item label="统计月份">
+          <el-date-picker
+            v-model="currentMonth"
+            type="month"
+            format="yyyy-MM"
+            value-format="yyyy-MM"
+            placeholder="请选择月份"
+            size="small"
+            popper-append-to-body
+            :picker-options="pickerOptions"
+            @change="getDataList"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" @click="getDataList">刷新</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="success"
+            size="small"
+            :loading="exportLoading"
+            @click="exportData"
+          >
+            下载报表
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="table-section">
+      <div ref="tableContainer" class="table-container">
+        <el-table
+          :data="tableData"
+          border
+          :max-height="tableHeight"
+          :header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
+          :cell-style="{ textAlign: 'center', padding: '6px 0' }"
+        >
+          <el-table-column prop="dayTime" label="日期" min-width="120" />
+          <el-table-column prop="count" label="新增用户数" min-width="110" />
+          <el-table-column prop="nextDay" label="次日留存用户数" min-width="130" />
+          <el-table-column prop="nextRate" label="次日留存率" min-width="110" />
+          <el-table-column prop="day7" label="7日留存用户数" min-width="120" />
+          <el-table-column prop="rate7" label="7日留存率" min-width="100" />
+          <el-table-column prop="day30" label="30日留存用户数" min-width="130" />
+          <el-table-column prop="rate30" label="30日留存率" min-width="110" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import http from '@/utils/httpRequest'
+
+function formatMonth(date) {
+  const y = date.getFullYear()
+  const m = `${date.getMonth() + 1}`.padStart(2, '0')
+  return `${y}-${m}`
+}
+
+function normalizeNumber(value) {
+  if (value === null || value === undefined || value === '') return 0
+  const num = Number(value)
+  return Number.isNaN(num) ? 0 : num
+}
+
+function formatRate(value) {
+  if (value === null || value === undefined || value === '') return '0%'
+  if (typeof value === 'string') {
+    const text = value.trim()
+    if (!text) return '0%'
+    if (text.includes('%')) return text
+    const num = Number(text)
+    if (Number.isNaN(num)) return '0%'
+    if (num <= 1) return `${(num * 100).toFixed(0)}%`
+    return `${num.toFixed(0)}%`
+  }
+  const num = Number(value)
+  if (Number.isNaN(num)) return '0%'
+  if (num <= 1) return `${(num * 100).toFixed(0)}%`
+  return `${num.toFixed(0)}%`
+}
+
+export default {
+  data() {
+    return {
+      loading: false,
+      exportLoading: false,
+      currentMonth: '',
+      tableData: [],
+      tableHeight: 500,
+      pickerOptions: {
+        disabledDate(time) {
+          const now = new Date()
+          return time.getTime() > now.getTime()
+        }
+      }
+    }
+  },
+  activated() {
+    if (!this.currentMonth) {
+      this.currentMonth = formatMonth(new Date())
+    }
+    this.getDataList()
+    this.$nextTick(() => {
+      this.calculateTableHeight()
+    })
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleResize)
+    this.$nextTick(() => {
+      this.calculateTableHeight()
+    })
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    handleResize() {
+      this.calculateTableHeight()
+    },
+    calculateTableHeight() {
+      if (this.$refs.tableContainer) {
+        this.tableHeight = this.$refs.tableContainer.offsetHeight || 500
+      } else {
+        this.tableHeight = 500
+      }
+    },
+    normalizeRows(userList = []) {
+      return userList.map((item) => ({
+        dayTime: item.dayTime || '--',
+        count: normalizeNumber(item.count),
+        nextDay: normalizeNumber(item.nextDay),
+        nextRate: formatRate(item.nextRate),
+        day7: normalizeNumber(item['7Day']),
+        rate7: formatRate(item['7Rate']),
+        day30: normalizeNumber(item['30Day']),
+        rate30: formatRate(item['30Rate'])
+      }))
+    },
+    getDataList() {
+      if (!this.currentMonth) {
+        this.currentMonth = formatMonth(new Date())
+      }
+      this.loading = true
+      http({
+        url: http.adornUrl('/master/statisticsBusinessUser/getUserRegisterStayInfo'),
+        method: 'post',
+        data: http.adornData({
+          date: this.currentMonth
+        })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.tableData = this.normalizeRows(data.userList || [])
+        } else {
+          this.tableData = []
+        }
+      }).finally(() => {
+        this.loading = false
+        this.$nextTick(() => {
+          this.calculateTableHeight()
+        })
+      })
+    },
+    exportData() {
+      if (!this.currentMonth) {
+        this.currentMonth = formatMonth(new Date())
+      }
+      this.exportLoading = true
+      http({
+        url: http.adornUrl('/master/statisticsBusinessUser/exportUserRegisterStayInfo'),
+        method: 'post',
+        data: http.adornData({
+          date: this.currentMonth
+        }),
+        responseType: 'blob'
+      }).then((response) => {
+        const blob = new Blob([response.data])
+        const link = document.createElement('a')
+        link.href = URL.createObjectURL(blob)
+        link.download = `留存率统计报表-${this.currentMonth}.xlsx`
+        link.click()
+        URL.revokeObjectURL(link.href)
+      }).catch(() => {
+        this.$message.error('下载失败，请稍后重试')
+      }).finally(() => {
+        this.exportLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '../styles/statistics-common.less';
+
+.retain-statistics-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 220px);
+  gap: 8px;
+}
+
+.query-section,
+.table-section {
+  .sb-white-panel(8px);
+}
+
+.table-section {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.sb-form-item-zero();
+
+.table-container {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.sb-table-compact();
+</style>

src/views/modules/statisticsBusiness/userStatistics/userStatisticsBase.vue

@@ -0,0 +1,362 @@
+<template>
+  <div class="user-statistics-page" v-loading="loading">
+    <div v-if="mode !== 'day'" class="query-section">
+      <el-form :inline="true" @keyup.enter.native="getDataList">
+        <el-form-item :label="queryLabel">
+          <el-date-picker
+            v-model="currentDate"
+            :type="pickerType"
+            :format="displayFormat"
+            :value-format="valueFormat"
+            placeholder="请选择"
+            size="small"
+            popper-append-to-body
+            :picker-options="pickerOptions"
+            @change="handleQueryChange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" @click="refreshData">刷新</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="summary-section">
+      <div class="summary-card">
+        <div class="summary-card__label">{{ timePrefix }}登录人数</div>
+        <div class="summary-card__value">{{ summary.loginCount }}</div>
+      </div>
+      <div class="summary-card">
+        <div class="summary-card__label">{{ timePrefix }}注册人数</div>
+        <div class="summary-card__value">{{ summary.createCount }}</div>
+      </div>
+      <div class="summary-card">
+        <div class="summary-card__label">截止今日 近30天内活跃人数</div>
+        <div class="summary-card__value">{{ summary.userCountFor30Day }}</div>
+      </div>
+    </div>
+
+    <div class="table-section">
+      <div class="table-header">
+        <div class="table-title">用户统计明细（{{ total }}）</div>
+        <el-button
+          type="success"
+          size="small"
+          :loading="exportLoading"
+          @click="exportData"
+        >下载报表</el-button>
+      </div>
+
+      <el-table
+        :data="tableData"
+        border
+        :height="mode !== 'day' ? 470 : 520"
+        :header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
+        :cell-style="{ textAlign: 'center', padding: '6px 0' }"
+      >
+        <el-table-column type="index" label="序号" width="70" :index="indexMethod" />
+        <el-table-column prop="name" label="姓名" min-width="100" />
+        <el-table-column prop="tel" label="电话" min-width="130" />
+        <el-table-column prop="createTime" label="注册时间" min-width="120" />
+        <el-table-column prop="loginCity" label="城市" min-width="100" />
+        <el-table-column prop="come" label="注册来源" min-width="110" />
+        <el-table-column prop="socialIdentity" label="社会身份" min-width="120" />
+        <el-table-column prop="identity" label="app用户身份" min-width="120" />
+        <el-table-column prop="jf" label="天医币" min-width="90" />
+        <el-table-column prop="point" label="积分" min-width="90" />
+        <el-table-column prop="beforVip" label="曾vip" min-width="100" />
+        <el-table-column prop="nowVip" label="现vip" min-width="100" />
+        <el-table-column prop="ubo" label="是否买过课程" min-width="110" />
+        <el-table-column prop="ucbl" label="是否复购" min-width="90" />
+        <el-table-column prop="ucerCount" label="课程证几张" min-width="100" />
+        <el-table-column prop="loginTime" label="上次登录时间" min-width="160" />
+        <el-table-column prop="loginMachine" label="设备" min-width="90" />
+        <el-table-column prop="sex" label="性别" min-width="80" />
+        <el-table-column prop="nowWatch" label="当日学习时长" min-width="110" />
+        <el-table-column prop="watch7" label="近七天学习时间" min-width="120" />
+        <el-table-column prop="totalWatch" label="总学习时长" min-width="100" />
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-size="limit"
+        :total="total"
+        layout="total, prev, pager, next, sizes"
+        :page-sizes="[10, 20, 30, 50]"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        style="margin-top: 15px; text-align: right;"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import http from '@/utils/httpRequest'
+
+function formatDate(date) {
+  const y = date.getFullYear()
+  const m = `${date.getMonth() + 1}`.padStart(2, '0')
+  const d = `${date.getDate()}`.padStart(2, '0')
+  return `${y}-${m}-${d}`
+}
+
+function formatMonth(date) {
+  const y = date.getFullYear()
+  const m = `${date.getMonth() + 1}`.padStart(2, '0')
+  return `${y}-${m}`
+}
+
+function formatYear(date) {
+  return `${date.getFullYear()}`
+}
+
+function normalizeText(value) {
+  if (value === null || value === undefined || value === '') {
+    return '--'
+  }
+  const text = String(value).trim()
+  return text || '--'
+}
+
+function normalizeNumber(value) {
+  if (value === null || value === undefined || value === '') {
+    return 0
+  }
+  const num = Number(value)
+  return Number.isNaN(num) ? 0 : num
+}
+
+export default {
+  props: {
+    mode: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      exportLoading: false,
+      currentDate: '',
+      summary: {
+        loginCount: 0,
+        createCount: 0,
+        userCountFor30Day: 0
+      },
+      tableData: [],
+      page: 1,
+      limit: 10,
+      total: 0
+    }
+  },
+  computed: {
+    queryLabel() {
+      if (this.mode === 'day') return '统计日期'
+      if (this.mode === 'month') return '统计月份'
+      return '统计年份'
+    },
+    pickerType() {
+      if (this.mode === 'day') return 'date'
+      if (this.mode === 'month') return 'month'
+      return 'year'
+    },
+    displayFormat() {
+      if (this.mode === 'day') return 'yyyy-MM-dd'
+      if (this.mode === 'month') return 'yyyy-MM'
+      return 'yyyy'
+    },
+    valueFormat() {
+      return this.displayFormat
+    },
+    timePrefix() {
+      if (this.mode === 'day') return '当日'
+      if (this.mode === 'month') return '当月'
+      return '当年'
+    },
+    pickerOptions() {
+      return {
+        disabledDate(time) {
+          const now = new Date()
+          return time.getTime() > now.getTime()
+        }
+      }
+    }
+  },
+  activated() {
+    if (!this.currentDate) {
+      this.currentDate = this.getDefaultDate()
+    }
+    this.getDataList()
+  },
+  methods: {
+    indexMethod(index) {
+      return (this.page - 1) * this.limit + index + 1
+    },
+    handleQueryChange() {
+      this.page = 1
+      this.getDataList()
+    },
+    refreshData() {
+      this.page = 1
+      this.getDataList()
+    },
+    handleSizeChange(val) {
+      this.limit = val
+      this.page = 1
+      this.getDataList()
+    },
+    handleCurrentChange(val) {
+      this.page = val
+      this.getDataList()
+    },
+    getDefaultDate() {
+      const now = new Date()
+      if (this.mode === 'day') return formatDate(now)
+      if (this.mode === 'month') return formatMonth(now)
+      return formatYear(now)
+    },
+    normalizeRows(userList = []) {
+      return userList.map((item) => ({
+        name: normalizeText(item.name),
+        tel: normalizeText(item.tel),
+        createTime: normalizeText(item.createTime),
+        loginCity: normalizeText(item.loginCity),
+        come: normalizeText(item.come),
+        socialIdentity: normalizeText(item.socialIdentity),
+        identity: normalizeText(item.identity),
+        jf: normalizeNumber(item.jf),
+        point: normalizeNumber(item.point),
+        beforVip: normalizeText(item.beforVip),
+        nowVip: normalizeText(item.nowVip),
+        ubo: normalizeText(item.ubo),
+        ucbl: normalizeText(item.ucbl),
+        ucerCount: normalizeNumber(item.ucerCount),
+        loginTime: normalizeText(item.loginTime),
+        loginMachine: normalizeText(item.loginMachine),
+        sex: normalizeText(item.sex),
+        nowWatch: normalizeNumber(item.nowWatch),
+        watch7: normalizeNumber(item['7Watch']),
+        totalWatch: normalizeNumber(item.totalWatch)
+      }))
+    },
+    getDataList() {
+      if (!this.currentDate) {
+        this.currentDate = this.getDefaultDate()
+      }
+      this.loading = true
+      http({
+        url: http.adornUrl('/master/statisticsBusinessUser/getUserStatistics'),
+        method: 'post',
+        data: http.adornData({
+          date: this.currentDate,
+          page: this.page,
+          limit: this.limit
+        })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.summary = {
+            loginCount: normalizeNumber(data.loginCount),
+            createCount: normalizeNumber(data.createCount),
+            userCountFor30Day: normalizeNumber(data.userCountFor30Day)
+          }
+          this.tableData = this.normalizeRows(data.userList || [])
+          this.total = normalizeNumber(data.totalSize)
+        } else {
+          this.summary = { loginCount: 0, createCount: 0, userCountFor30Day: 0 }
+          this.tableData = []
+          this.total = 0
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    exportData() {
+      if (!this.currentDate) {
+        this.currentDate = this.getDefaultDate()
+      }
+      this.exportLoading = true
+      http({
+        url: http.adornUrl('/master/statisticsBusinessUser/exportUserStatistics'),
+        method: 'post',
+        data: http.adornData({
+          date: this.currentDate
+        }),
+        responseType: 'blob'
+      }).then((response) => {
+        const blob = new Blob([response.data])
+        const link = document.createElement('a')
+        link.href = URL.createObjectURL(blob)
+        link.download = `用户统计报表-${this.currentDate}.xlsx`
+        link.click()
+        URL.revokeObjectURL(link.href)
+      }).catch(() => {
+        this.$message.error('下载失败，请稍后重试')
+      }).finally(() => {
+        this.exportLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '../styles/statistics-common.less';
+
+.sb-form-item-zero();
+.sb-table-compact();
+
+.user-statistics-page {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.query-section,
+.summary-section,
+.table-section {
+  .sb-white-panel(8px);
+  padding-bottom: 0;
+}
+
+.query-section {
+  padding-top: 0;
+}
+
+.summary-section {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 12px;
+}
+
+.summary-card {
+  .sb-summary-card-shell(180px, auto, auto);
+  min-width: 180px;
+}
+
+.summary-card__label {
+  margin-bottom: 8px;
+}
+
+.table-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.table-title {
+  .sb-title-16();
+}
+
+.sb-summary-card-text();
+
+@media (max-width: 1200px) {
+  .summary-section {
+    flex-wrap: wrap;
+  }
+
+  .summary-card {
+    min-width: 200px;
+  }
+}
+</style>

src/views/modules/statisticsBusiness/userStatistics/yearUser.vue

@@ -0,0 +1,14 @@
+<template>
+  <userStatisticsBase mode="year" />
+</template>
+
+<script>
+import userStatisticsBase from './userStatisticsBase'
+
+export default {
+  components: {
+    userStatisticsBase
+  }
+}
+</script>
+

src/views/modules/statisticsBusiness/vipStatistics/allVip.vue

@@ -235,25 +235,11 @@ export default {
 </script>
 
 <style scoped lang="less">
-.el-form-item {
+@import '../styles/statistics-common.less';
-  margin-bottom: 0 !important;
-}
 
-/deep/ .el-table .cell,
+.sb-form-item-zero();
-/deep/ .el-table th > .cell {
+.sb-table-compact();
-  padding-top: 4px;
+.sb-statistics-table-min();
-  padding-bottom: 4px;
-  line-height: 20px;
-}
-
-/deep/ .statistics-table {
-  min-height: 500px;
-}
-
-/deep/ .statistics-table .el-table__body-wrapper,
-/deep/ .statistics-table .el-table__empty-block {
-  min-height: 452px;
-}
 
 .all-vip-statistics {
   display: flex;
@@ -263,9 +249,7 @@ export default {
 
 .summary-section,
 .detail-section {
-  background: #fff;
+  .sb-white-panel(8px);
-  border-radius: 4px;
-  padding: 8px;
 }
 
 .summary-section {
@@ -276,25 +260,16 @@ export default {
 
 .summary-block__title {
   margin-bottom: 16px;
-  font-size: 16px;
+  .sb-title-16();
-  font-weight: 700;
-  color: #303133;
 }
 
 .summary-grid {
-  display: flex;
+  .sb-summary-section-flex(12px);
-  flex-wrap: wrap;
-  gap: 12px;
 }
 
 .summary-card {
-  flex: 1 1 120px;
+  .sb-summary-card-shell(120px, 120px, auto);
-  width: 120px;
   min-width: 120px;
-  padding: 16px;
-  border: 1px solid #ebeef5;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
 }
 
 .summary-card--expired {
@@ -307,35 +282,22 @@ export default {
 
 .summary-card__label {
   margin-bottom: 8px;
-  font-size: 14px;
-  color: #606266;
-}
-
-.summary-card__value {
-  font-size: 24px;
-  font-weight: 700;
-  color: #1f2d3d;
 }
 
 .detail-section {
-  display: flex;
+  .sb-flex-column-fill();
-  flex: 1;
-  flex-direction: column;
 }
 
 .detail-header {
-  display: flex;
+  .sb-detail-header(16px);
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
 }
 
 .detail-title {
-  font-size: 16px;
+  .sb-title-16();
-  font-weight: 700;
-  color: #303133;
 }
 
+.sb-summary-card-text();
+
 .table-container {
   flex: 1;
 }

src/views/modules/statisticsBusiness/vipStatistics/expiresStatisticsBase.vue

@@ -203,21 +203,10 @@ export default {
 </script>
 
 <style scoped lang="less">
-/deep/ .el-table .cell,
+@import '../styles/statistics-common.less';
-/deep/ .el-table th > .cell {
-  padding-top: 4px;
-  padding-bottom: 4px;
-  line-height: 20px;
-}
 
-/deep/ .statistics-table {
+.sb-table-compact();
-  min-height: 500px;
+.sb-statistics-table-min();
-}
-
-/deep/ .statistics-table .el-table__body-wrapper,
-/deep/ .statistics-table .el-table__empty-block {
-  min-height: 452px;
-}
 
 .vip-expires-statistics {
   display: flex;
@@ -227,66 +216,47 @@ export default {
 
 .summary-section,
 .detail-section {
-  background: #fff;
+  .sb-white-panel(8px);
-  border-radius: 4px;
-  padding: 8px;
 }
 
 .detail-section {
-  display: flex;
+  .sb-flex-column-fill();
-  flex: 1;
-  flex-direction: column;
 }
 
 .section-title {
   margin-bottom: 16px;
-  font-size: 16px;
+  .sb-title-16();
-  font-weight: 700;
-  color: #303133;
 }
 
 .summary-grid {
-  display: flex;
+  .sb-summary-section-flex(12px);
-  flex-wrap: wrap;
-  gap: 12px;
 }
 
 .summary-card {
-  flex: 1 1 120px;
+  .sb-summary-card-shell(
-  width: 120px;
+    120px,
+    120px,
+    auto,
+    16px,
+    linear-gradient(180deg, #f7fbff 0%, #ffffff 100%)
+  );
   min-width: 120px;
-  padding: 16px;
-  border: 1px solid #ebeef5;
-  border-radius: 8px;
-  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
-  box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
 }
 
 .summary-card__label {
   margin-bottom: 8px;
-  font-size: 14px;
-  color: #606266;
-}
-
-.summary-card__value {
-  font-size: 24px;
-  font-weight: 700;
-  color: #1f2d3d;
 }
 
 .detail-header {
-  display: flex;
+  .sb-detail-header(16px);
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
 }
 
 .detail-title {
-  font-size: 16px;
+  .sb-title-16();
-  font-weight: 700;
-  color: #303133;
 }
 
+.sb-summary-card-text();
+
 .table-container {
   flex: 1;
 }

src/views/modules/statisticsBusiness/vipStatistics/index.vue

@@ -41,8 +41,8 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
-.el-form .el-form-item {
+@import '../styles/statistics-common.less';
-  margin-bottom: 10px !important;
+
-}
+.sb-form-item-ten();
 </style>

src/views/modules/statisticsBusiness/vipStatistics/monthVip.vue

@@ -215,25 +215,11 @@ export default {
 </script>
 
 <style scoped lang="less">
-.el-form-item {
+@import '../styles/statistics-common.less';
-  margin-bottom: 0 !important;
-}
 
-/deep/ .el-table .cell,
+.sb-form-item-zero();
-/deep/ .el-table th > .cell {
+.sb-table-compact();
-  padding-top: 4px;
+.sb-statistics-table-min();
-  padding-bottom: 4px;
-  line-height: 20px;
-}
-
-/deep/ .statistics-table {
-  min-height: 500px;
-}
-
-/deep/ .statistics-table .el-table__body-wrapper,
-/deep/ .statistics-table .el-table__empty-block {
-  min-height: 452px;
-}
 
 .month-vip-statistics {
   display: flex;
@@ -244,90 +230,60 @@ export default {
 .query-section,
 .summary-section,
 .detail-section {
-  background: #fff;
+  .sb-white-panel(8px);
-  border-radius: 4px;
+}
-  padding: 8px;
+
+.query-section {
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .summary-section {
-  display: flex;
+  .sb-summary-section-flex(12px);
-  flex-wrap: wrap;
-  gap: 12px;
 }
 
 .summary-card {
-  display: flex;
+  .sb-summary-card-shell(180px, 180px, 190px);
-  flex-direction: column;
-  flex: 1 1 180px;
-  width: 180px;
-  min-height: 190px;
-  padding: 16px;
-  border: 1px solid #ebeef5;
-  border-radius: 8px;
-  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
-  box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
 }
 
 .summary-card--two-columns {
-  flex-basis: 280px;
+  .sb-summary-card-two-columns(280px, 280px);
-  width: 280px;
 }
 
 .summary-card__title {
-  margin-bottom: 14px;
+  .sb-summary-card-title(14px);
-  font-size: 16px;
-  font-weight: 700;
-  color: #303133;
 }
 
 .summary-card__body {
-  display: flex;
+  .sb-summary-card-body(10px);
-  flex: 1;
-  flex-direction: column;
-  gap: 10px;
 }
 
 .summary-card--two-columns .summary-card__body {
-  display: grid;
+  .sb-summary-card-body-two-columns(10px, 30px);
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 30px;
 }
 
 .summary-line {
-  display: flex;
+  .sb-summary-line(12px);
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  line-height: 1.5;
 }
 
 .summary-line__label {
-  color: #606266;
+  .sb-summary-line-label();
 }
 
 .summary-line__value {
-  font-weight: 700;
+  .sb-summary-line-value();
-  color: #1f2d3d;
-  text-align: right;
 }
 
 .detail-section {
-  display: flex;
+  .sb-flex-column-fill();
-  flex: 1;
-  flex-direction: column;
 }
 
 .detail-header {
-  display: flex;
+  .sb-detail-header(16px);
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
 }
 
 .detail-title {
-  font-size: 16px;
+  .sb-title-16();
-  font-weight: 700;
-  color: #303133;
 }
 
 .table-container {

src/views/modules/statisticsBusiness/vipStatistics/yearVip.vue

@@ -232,16 +232,10 @@ export default {
 </script>
 
 <style scoped lang="less">
-.el-form-item {
+@import '../styles/statistics-common.less';
-  margin-bottom: 0 !important;
-}
 
-/deep/ .el-table .cell,
+.sb-form-item-zero();
-/deep/ .el-table th > .cell {
+.sb-table-compact();
-  padding-top: 4px;
-  padding-bottom: 4px;
-  line-height: 20px;
-}
 
 .year-vip-statistics {
   display: flex;
@@ -252,78 +246,53 @@ export default {
 .query-section,
 .summary-section,
 .table-section {
-  padding: 8px;
+  .sb-white-panel(8px);
-  background: #fff;
+}
-  border-radius: 4px;
+
+.query-section {
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .summary-section {
-  display: flex;
+  .sb-summary-section-flex(12px);
-  flex-wrap: wrap;
-  gap: 12px;
 }
 
 .summary-card {
-  display: flex;
+  .sb-summary-card-shell(180px, 180px, 180px);
-  flex: 1 1 180px;
-  width: 180px;
-  flex-direction: column;
-  min-height: 180px;
-  padding: 16px;
-  border: 1px solid #ebeef5;
-  border-radius: 8px;
-  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
-  box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
 }
 
 .summary-card--two-columns {
-  flex-basis: 280px;
+  .sb-summary-card-two-columns(280px, 280px);
-  width: 280px;
 }
 
 .summary-card__title {
-  margin-bottom: 14px;
+  .sb-summary-card-title(14px);
-  font-size: 16px;
-  font-weight: 700;
-  color: #303133;
 }
 
 .summary-card__body {
-  display: flex;
+  .sb-summary-card-body(10px);
-  flex: 1;
-  flex-direction: column;
-  gap: 10px;
 }
 
 .summary-card--two-columns .summary-card__body {
-  display: grid;
+  .sb-summary-card-body-two-columns(10px, 30px);
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 30px;
 }
 
 .summary-line {
-  display: flex;
+  .sb-summary-line(12px);
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  line-height: 1.5;
 }
 
 .summary-line__label {
-  color: #606266;
+  .sb-summary-line-label();
 }
 
 .summary-line__value {
-  font-weight: 700;
+  .sb-summary-line-value();
-  color: #1f2d3d;
-  text-align: right;
 }
 
 .table-title {
   margin-bottom: 12px;
-  font-size: 16px;
+  .sb-title-16();
-  font-weight: 700;
-  color: #303133;
 }
 
 @media (max-width: 1200px) {