From 90b83972ec05ca82e9a6733875d03ca9928e0833 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Wed, 4 Nov 2026 20:12:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(benefits):=20=E5=A2=9E=E5=8A=A0=E6=9D=83?=
 =?UTF-8?q?=E7=9B=8A=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/internal/modules/pointsmall/dto.go    |  23 +-
 .../internal/modules/pointsmall/repository.go |  13 +
 .../modules/pointsmall/repository_test.go     |  30 +
 .../benefits/views/BenefitsCenterView.vue     | 994 ++++++++++++++++++
 .../src/features/points/api/pointsMall.ts     |  11 +
 frontend/src/layouts/AppLayout.css            |  28 +
 frontend/src/layouts/AppLayout.vue            |  10 +
 frontend/src/router/accountRoutes.ts          |   7 +
 frontend/src/router/mobileRoutes.ts           |   7 +
 9 files changed, 1117 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/features/benefits/views/BenefitsCenterView.vue

diff --git a/backend/internal/modules/pointsmall/dto.go b/backend/internal/modules/pointsmall/dto.go
index 7711ae5..b9edab4 100644
--- a/backend/internal/modules/pointsmall/dto.go
+++ b/backend/internal/modules/pointsmall/dto.go
@@ -17,12 +17,23 @@ var (
 )
 
 type SummaryDTO struct {
-	AvailablePoints     int64  `json:"available_points"`
-	LifetimePoints      int64  `json:"lifetime_points"`
-	LevelCode           string `json:"level_code"`
-	LevelName           string `json:"level_name"`
-	PointsPerYuan       int64  `json:"points_per_yuan"`
-	PointsMultiplierBps int    `json:"points_multiplier_bps"`
+	AvailablePoints     int64            `json:"available_points"`
+	LifetimePoints      int64            `json:"lifetime_points"`
+	LevelCode           string           `json:"level_code"`
+	LevelName           string           `json:"level_name"`
+	PointsPerYuan       int64            `json:"points_per_yuan"`
+	PointsMultiplierBps int              `json:"points_multiplier_bps"`
+	GrowthEnabled       bool             `json:"growth_enabled"`
+	Levels              []GrowthLevelDTO `json:"levels"`
+}
+
+type GrowthLevelDTO struct {
+	Code                 string `json:"code"`
+	Name                 string `json:"name"`
+	MinPoints            int64  `json:"min_points"`
+	PointsMultiplierBps  int    `json:"points_multiplier_bps"`
+	DiscountBps          int    `json:"discount_bps"`
+	DepositFreeQuotaCent int64  `json:"deposit_free_quota_cent"`
 }
 
 type ProductDTO struct {
diff --git a/backend/internal/modules/pointsmall/repository.go b/backend/internal/modules/pointsmall/repository.go
index 6f577c1..1b02558 100644
--- a/backend/internal/modules/pointsmall/repository.go
+++ b/backend/internal/modules/pointsmall/repository.go
@@ -35,6 +35,17 @@ func (r *Repository) Summary(ctx context.Context, userID uint64) (*SummaryDTO, e
 		return nil, err
 	}
 	level := rentergrowth.LevelForPoints(cfg, user.RenterGrowthPoints)
+	levels := make([]GrowthLevelDTO, 0, len(cfg.Levels))
+	for _, item := range cfg.Levels {
+		levels = append(levels, GrowthLevelDTO{
+			Code:                 item.Code,
+			Name:                 item.Name,
+			MinPoints:            item.MinPoints,
+			PointsMultiplierBps:  item.PointsMultiplierBps,
+			DiscountBps:          item.DiscountBps,
+			DepositFreeQuotaCent: item.DepositFreeQuotaCent,
+		})
+	}
 	return &SummaryDTO{
 		AvailablePoints:     user.PointsAvailable,
 		LifetimePoints:      user.RenterGrowthPoints,
@@ -42,6 +53,8 @@ func (r *Repository) Summary(ctx context.Context, userID uint64) (*SummaryDTO, e
 		LevelName:           level.Name,
 		PointsPerYuan:       cfg.PointsPerYuan,
 		PointsMultiplierBps: level.PointsMultiplierBps,
+		GrowthEnabled:       cfg.Enabled,
+		Levels:              levels,
 	}, nil
 }
 
diff --git a/backend/internal/modules/pointsmall/repository_test.go b/backend/internal/modules/pointsmall/repository_test.go
index bc0a062..48a23a7 100644
--- a/backend/internal/modules/pointsmall/repository_test.go
+++ b/backend/internal/modules/pointsmall/repository_test.go
@@ -76,3 +76,33 @@ func TestRedeemDeductsAvailablePointsAndStock(t *testing.T) {
 		t.Fatalf("redemption status = %s, want completed", completed.Status)
 	}
 }
+
+func TestSummaryIncludesGrowthLevelRules(t *testing.T) {
+	db := database.NewTestDB()
+	user := model.User{
+		Phone:              "13900009602",
+		RenterGrowthPoints: 1000,
+		PointsAvailable:    432,
+	}
+	if err := db.Create(&user).Error; err != nil {
+		t.Fatalf("create user failed: %v", err)
+	}
+
+	summary, err := NewRepository(db).Summary(t.Context(), user.ID)
+	if err != nil {
+		t.Fatalf("summary failed: %v", err)
+	}
+	if !summary.GrowthEnabled || len(summary.Levels) != 4 {
+		t.Fatalf("growth config = enabled %v levels %d", summary.GrowthEnabled, len(summary.Levels))
+	}
+	if summary.LevelCode != "diamond" || summary.PointsMultiplierBps != 15_000 {
+		t.Fatalf(
+			"current level = %s multiplier %d, want diamond/15000",
+			summary.LevelCode,
+			summary.PointsMultiplierBps,
+		)
+	}
+	if summary.Levels[2].DiscountBps != 9800 || summary.Levels[2].DepositFreeQuotaCent != 100_000 {
+		t.Fatalf("diamond rules = %+v", summary.Levels[2])
+	}
+}
diff --git a/frontend/src/features/benefits/views/BenefitsCenterView.vue b/frontend/src/features/benefits/views/BenefitsCenterView.vue
new file mode 100644
index 0000000..1f7931f
--- /dev/null
+++ b/frontend/src/features/benefits/views/BenefitsCenterView.vue
@@ -0,0 +1,994 @@
+<script setup lang="ts">
+import { ArrowRight, CircleCheck, GoldMedal, Present, Shop } from '@element-plus/icons-vue'
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import {
+  fetchPointsSummary,
+  type GrowthLevelRule,
+  type PointsSummary,
+} from '@/features/points/api/pointsMall'
+import {
+  fetchQualityOwnerStatus,
+  type QualityOwnerStatus,
+} from '@/features/quality-owner/api/qualityOwner'
+import { readError } from '@/shared/utils/error'
+
+const props = withDefaults(defineProps<{ mobile?: boolean }>(), { mobile: false })
+const router = useRouter()
+const loading = ref(true)
+const errorMessage = ref('')
+const summary = ref<PointsSummary | null>(null)
+const qualityOwner = ref<QualityOwnerStatus | null>(null)
+const selectedLevelCode = ref('')
+const isMobile = computed(() => props.mobile)
+
+const levels = computed(() => summary.value?.levels || [])
+const currentLevel = computed(
+  () =>
+    levels.value.find(level => level.code === summary.value?.level_code) || levels.value[0] || null
+)
+const selectedLevel = computed(
+  () => levels.value.find(level => level.code === selectedLevelCode.value) || currentLevel.value
+)
+const nextLevel = computed(() => {
+  const current = currentLevel.value
+  if (!current) return null
+  const index = levels.value.findIndex(level => level.code === current.code)
+  return levels.value[index + 1] || null
+})
+const levelProgress = computed(() => {
+  if (!summary.value || !currentLevel.value || !nextLevel.value) return 100
+  const range = nextLevel.value.min_points - currentLevel.value.min_points
+  if (range <= 0) return 100
+  const progress = ((summary.value.lifetime_points - currentLevel.value.min_points) / range) * 100
+  return Math.min(100, Math.max(0, progress))
+})
+const pointsToNextLevel = computed(() => {
+  if (!summary.value || !nextLevel.value) return 0
+  return Math.max(0, nextLevel.value.min_points - summary.value.lifetime_points)
+})
+const qualityOwnerActive = computed(() => Boolean(qualityOwner.value?.active))
+
+onMounted(load)
+
+async function load() {
+  loading.value = true
+  errorMessage.value = ''
+  try {
+    const [nextSummary, nextQualityOwner] = await Promise.all([
+      fetchPointsSummary(),
+      fetchQualityOwnerStatus(),
+    ])
+    summary.value = nextSummary
+    qualityOwner.value = nextQualityOwner
+    selectedLevelCode.value = nextSummary.level_code || nextSummary.levels[0]?.code || ''
+  } catch (error) {
+    errorMessage.value = readError(error, '权益中心加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectLevel(level: GrowthLevelRule) {
+  selectedLevelCode.value = level.code
+}
+
+function goBack() {
+  router.push(isMobile.value ? '/m/profile' : '/profile')
+}
+
+function openPointsMall() {
+  router.push(isMobile.value ? '/m/points-mall' : '/points-mall')
+}
+
+function openQualityOwner() {
+  router.push(isMobile.value ? '/m/profile' : '/profile')
+}
+
+function multiplierText(level: GrowthLevelRule | null) {
+  if (!level) return '-'
+  return `${(level.points_multiplier_bps / 10000).toFixed(2)}x`
+}
+
+function payRatioText(level: GrowthLevelRule | null) {
+  if (!level) return '-'
+  const ratio = level.discount_bps / 100
+  return ratio >= 100 ? '原价' : `${ratio.toFixed(2).replace(/\.?0+$/, '')}%`
+}
+
+function discountText(level: GrowthLevelRule | null) {
+  if (!level || level.discount_bps >= 10000) return '暂无租金折扣'
+  const discount = (10000 - level.discount_bps) / 100
+  return `租金立省 ${discount.toFixed(2).replace(/\.?0+$/, '')}%`
+}
+
+function quotaText(level: GrowthLevelRule | null) {
+  if (!level || level.deposit_free_quota_cent <= 0) return '暂无等级免押额度'
+  return `享 ¥${formatCent(level.deposit_free_quota_cent)} 等级免押额度`
+}
+
+function formatCent(value: number) {
+  return (value / 100).toLocaleString('zh-CN', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  })
+}
+
+function formatBps(value: number | undefined, fallback: number) {
+  const amount = (value ?? fallback) / 100
+  return `${amount.toFixed(amount % 1 === 0 ? 0 : 1)}%`
+}
+</script>
+
+<template>
+  <main class="benefits-center" :class="{ 'is-mobile': isMobile }">
+    <header class="benefits-header">
+      <button type="button" class="back-button" @click="goBack">返回</button>
+      <div>
+        <span>MEMBER BENEFITS</span>
+        <h1>权益中心</h1>
+        <p>VIP 成长、优质号主和积分商城权益集中查看。</p>
+      </div>
+    </header>
+
+    <p v-if="errorMessage" class="notice is-error">{{ errorMessage }}</p>
+    <p v-if="loading" class="notice">权益信息加载中...</p>
+
+    <template v-else-if="summary">
+      <section class="vip-overview">
+        <div class="vip-copy">
+          <span class="vip-kicker">
+            <el-icon><GoldMedal /></el-icon>
+            VIP PROGRAM
+          </span>
+          <h2>{{ summary.level_name }}会员</h2>
+          <p v-if="!summary.growth_enabled">积分等级权益当前暂未启用。</p>
+          <p v-else-if="nextLevel">
+            再获得 <strong>{{ pointsToNextLevel }}</strong> 积分升级为
+            <strong>{{ nextLevel.name }}</strong>
+          </p>
+          <p v-else>你已达到当前最高等级，继续消费积分仍可用于商城兑换。</p>
+          <div class="level-progress">
+            <div class="level-progress-head">
+              <span>当前累计 {{ summary.lifetime_points }} 积分</span>
+              <span v-if="nextLevel">目标 {{ nextLevel.min_points }} 积分</span>
+              <span v-else>已满级</span>
+            </div>
+            <div class="level-progress-track">
+              <span :style="{ width: `${levelProgress}%` }"></span>
+            </div>
+          </div>
+        </div>
+        <div class="vip-stats">
+          <div>
+            <span>当前等级</span>
+            <strong>{{ summary.level_name }}</strong>
+          </div>
+          <div>
+            <span>积分倍率</span>
+            <strong>{{ multiplierText(currentLevel) }}</strong>
+          </div>
+          <div>
+            <span>可用积分</span>
+            <strong>{{ summary.available_points }}</strong>
+          </div>
+          <div>
+            <span>积分规则</span>
+            <strong>¥1 = {{ summary.points_per_yuan }} 积分</strong>
+          </div>
+        </div>
+      </section>
+
+      <section class="level-section">
+        <div class="section-heading">
+          <div>
+            <span>VIP LEVELS</span>
+            <h2>成长等级权益</h2>
+          </div>
+          <small>积分只增不减，兑换商品不会导致等级下降</small>
+        </div>
+
+        <div class="level-tabs">
+          <button
+            v-for="level in levels"
+            :key="level.code"
+            type="button"
+            :class="{
+              active: selectedLevel?.code === level.code,
+              current: currentLevel?.code === level.code,
+            }"
+            @click="selectLevel(level)"
+          >
+            <span>{{ level.name }}</span>
+            <small>{{ level.min_points }} 积分</small>
+            <em v-if="currentLevel?.code === level.code">当前</em>
+          </button>
+        </div>
+
+        <div v-if="selectedLevel" class="level-detail">
+          <div class="level-detail-head">
+            <div>
+              <span>{{ selectedLevel.name }}等级权益</span>
+              <strong>{{ selectedLevel.min_points }} 积分起</strong>
+            </div>
+            <em :class="{ current: currentLevel?.code === selectedLevel.code }">
+              {{ currentLevel?.code === selectedLevel.code ? '当前等级' : '等级预览' }}
+            </em>
+          </div>
+          <div class="level-benefits">
+            <div>
+              <el-icon><GoldMedal /></el-icon>
+              <span>积分加速</span>
+              <strong>{{ multiplierText(selectedLevel) }}</strong>
+              <small>消费获得积分时按该倍率累计</small>
+            </div>
+            <div>
+              <el-icon><Present /></el-icon>
+              <span>租金权益</span>
+              <strong>{{ payRatioText(selectedLevel) }}</strong>
+              <small>{{ discountText(selectedLevel) }}</small>
+            </div>
+            <div>
+              <el-icon><CircleCheck /></el-icon>
+              <span>等级免押</span>
+              <strong>
+                {{
+                  selectedLevel.deposit_free_quota_cent > 0
+                    ? `¥${formatCent(selectedLevel.deposit_free_quota_cent)}`
+                    : '¥0'
+                }}
+              </strong>
+              <small>{{ quotaText(selectedLevel) }}</small>
+            </div>
+            <div>
+              <el-icon><Shop /></el-icon>
+              <span>积分商城</span>
+              <strong>全场开放</strong>
+              <small>租客和卖家均可使用积分兑换</small>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="benefit-grid">
+        <article class="quality-owner-benefit">
+          <div class="benefit-heading">
+            <div class="benefit-icon quality">
+              <el-icon><GoldMedal /></el-icon>
+            </div>
+            <div>
+              <span>PREMIUM OWNER</span>
+              <h2>优质号主</h2>
+            </div>
+            <em :class="{ active: qualityOwnerActive }">
+              {{ qualityOwnerActive ? '已开通' : '未开通' }}
+            </em>
+          </div>
+          <p>开通后可发布到极品专区，并在该专区享受优质号主专享保险服务费率。</p>
+          <div class="quality-metrics">
+            <div>
+              <span>开通保证金</span>
+              <strong>¥{{ formatCent(qualityOwner?.required_deposit_cent || 20000) }}</strong>
+            </div>
+            <div>
+              <span>普通保险服务费</span>
+              <strong>{{ formatBps(qualityOwner?.insurance_fee_bps, 800) }}</strong>
+            </div>
+            <div>
+              <span>极品专区保险服务费</span>
+              <strong>{{ formatBps(qualityOwner?.premium_insurance_fee_bps, 400) }}</strong>
+            </div>
+          </div>
+          <ul>
+            <li>
+              <el-icon><CircleCheck /></el-icon>发布商品到极品专区
+            </li>
+            <li>
+              <el-icon><CircleCheck /></el-icon>专享更低的无忧租号保险费率
+            </li>
+            <li>
+              <el-icon><CircleCheck /></el-icon>个人中心及商品页展示优质号主标识
+            </li>
+          </ul>
+          <button type="button" class="quality-action" @click="openQualityOwner">
+            {{ qualityOwnerActive ? '管理优质号主' : '前往开通' }}
+            <el-icon><ArrowRight /></el-icon>
+          </button>
+        </article>
+
+        <article class="points-benefit">
+          <div class="benefit-heading">
+            <div class="benefit-icon points">
+              <el-icon><Shop /></el-icon>
+            </div>
+            <div>
+              <span>POINTS MALL</span>
+              <h2>积分商城</h2>
+            </div>
+            <em>持续开放</em>
+          </div>
+          <p>租客按实际租金支出、卖家按实际租金收入获得积分，兑换虚拟权益与优惠商品。</p>
+          <div class="points-balance">
+            <div>
+              <span>可用积分</span>
+              <strong>{{ summary.available_points }}</strong>
+            </div>
+            <div>
+              <span>累计积分</span>
+              <strong>{{ summary.lifetime_points }}</strong>
+            </div>
+          </div>
+          <ul>
+            <li>
+              <el-icon><CircleCheck /></el-icon>租客和卖家均可兑换
+            </li>
+            <li>
+              <el-icon><CircleCheck /></el-icon>兑换后不影响成长等级
+            </li>
+            <li>
+              <el-icon><CircleCheck /></el-icon>积分商城不定时更新虚拟商品
+            </li>
+          </ul>
+          <button type="button" class="points-action" @click="openPointsMall">
+            进入积分商城
+            <el-icon><ArrowRight /></el-icon>
+          </button>
+        </article>
+      </section>
+    </template>
+  </main>
+</template>
+
+<style scoped>
+.benefits-center {
+  width: 100%;
+  max-width: none;
+  min-height: 100vh;
+  padding: 28px max(20px, calc((100% - 1180px) / 2)) 56px;
+  background: #f5f7fb;
+  color: #20242a;
+}
+
+.benefits-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 18px;
+}
+
+.benefits-header > div {
+  display: grid;
+  gap: 4px;
+}
+
+.benefits-header span,
+.section-heading span,
+.benefit-heading span {
+  color: #ff6a00;
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0.04em;
+}
+
+.benefits-header h1 {
+  margin: 0;
+  font-size: 30px;
+}
+
+.benefits-header p {
+  margin: 0;
+  color: #6b7280;
+  font-size: 13px;
+}
+
+.back-button {
+  min-height: 34px;
+  padding: 0 13px;
+  border: 1px solid #ffd6bf;
+  border-radius: 17px;
+  background: #fff;
+  color: #d94f00;
+  font-weight: 800;
+}
+
+.vip-overview {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(380px, 0.75fr);
+  gap: 1px;
+  margin-top: 22px;
+  overflow: hidden;
+  border: 1px solid #ffd6bf;
+  border-radius: 14px;
+  background: #ffd6bf;
+}
+
+.vip-copy,
+.vip-stats {
+  background: #fff;
+}
+
+.vip-copy {
+  padding: 26px 28px;
+  background: linear-gradient(135deg, #fff8f3 0%, #fff 72%);
+}
+
+.vip-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #ff6a00;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.vip-copy h2 {
+  margin: 8px 0 6px;
+  color: #9a3412;
+  font-size: 28px;
+}
+
+.vip-copy p {
+  margin: 0;
+  color: #6b7280;
+  font-size: 13px;
+}
+
+.vip-copy p strong {
+  color: #c2410c;
+}
+
+.level-progress {
+  display: grid;
+  gap: 7px;
+  margin-top: 22px;
+}
+
+.level-progress-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  color: #8b95a5;
+  font-size: 11px;
+}
+
+.level-progress-track {
+  height: 8px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #ffeadf;
+}
+
+.level-progress-track span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #ff8a3d 0%, #ff6a00 100%);
+}
+
+.vip-stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.vip-stats > div {
+  display: grid;
+  align-content: center;
+  gap: 4px;
+  min-height: 90px;
+  padding: 14px 18px;
+  border-left: 1px solid #f1f2f5;
+  border-bottom: 1px solid #f1f2f5;
+}
+
+.vip-stats > div:nth-child(odd) {
+  border-left: 0;
+}
+
+.vip-stats > div:nth-last-child(-n + 2) {
+  border-bottom: 0;
+}
+
+.vip-stats span {
+  color: #8b95a5;
+  font-size: 11px;
+}
+
+.vip-stats strong {
+  color: #c2410c;
+  font-size: 19px;
+}
+
+.level-section {
+  margin-top: 18px;
+  padding: 22px;
+  border: 1px solid #e5e7eb;
+  border-radius: 14px;
+  background: #fff;
+}
+
+.section-heading {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.section-heading h2,
+.benefit-heading h2 {
+  margin: 4px 0 0;
+  font-size: 20px;
+}
+
+.section-heading small {
+  color: #8b95a5;
+  font-size: 11px;
+}
+
+.level-tabs {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.level-tabs button {
+  position: relative;
+  display: grid;
+  gap: 4px;
+  min-height: 74px;
+  padding: 12px 14px;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: #475569;
+  text-align: left;
+}
+
+.level-tabs button span {
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.level-tabs button small {
+  color: #8b95a5;
+  font-size: 11px;
+}
+
+.level-tabs button em {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: #ff6a00;
+  color: #fff;
+  font-size: 9px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.level-tabs button.current {
+  border-color: #ffb37a;
+}
+
+.level-tabs button.active {
+  border-color: #ff6a00;
+  background: #fff8f3;
+  color: #c2410c;
+  box-shadow: 0 6px 16px rgba(255, 106, 0, 0.1);
+}
+
+.level-detail {
+  margin-top: 14px;
+  overflow: hidden;
+  border: 1px solid #ffe2d1;
+  border-radius: 12px;
+}
+
+.level-detail-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 18px;
+  background: #fff8f3;
+}
+
+.level-detail-head div {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.level-detail-head span {
+  color: #4b5563;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.level-detail-head strong {
+  color: #c2410c;
+}
+
+.level-detail-head em {
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: #f1f5f9;
+  color: #64748b;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.level-detail-head em.current {
+  background: #ffeadf;
+  color: #c2410c;
+}
+
+.level-benefits {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.level-benefits > div {
+  display: grid;
+  align-content: start;
+  gap: 5px;
+  min-height: 132px;
+  padding: 18px;
+  border-left: 1px solid #f1f2f5;
+}
+
+.level-benefits > div:first-child {
+  border-left: 0;
+}
+
+.level-benefits .el-icon {
+  color: #ff6a00;
+  font-size: 20px;
+}
+
+.level-benefits span {
+  color: #6b7280;
+  font-size: 11px;
+}
+
+.level-benefits strong {
+  color: #c2410c;
+  font-size: 17px;
+}
+
+.level-benefits small {
+  color: #9ca3af;
+  font-size: 10px;
+  line-height: 1.5;
+}
+
+.benefit-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 18px;
+}
+
+.quality-owner-benefit,
+.points-benefit {
+  padding: 22px;
+  border-radius: 14px;
+}
+
+.quality-owner-benefit {
+  border: 1px solid #ddd6fe;
+  background: linear-gradient(145deg, #faf8ff 0%, #fff 58%);
+}
+
+.points-benefit {
+  border: 1px solid #ffd6bf;
+  background: linear-gradient(145deg, #fff8f3 0%, #fff 58%);
+}
+
+.benefit-heading {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+}
+
+.benefit-icon {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  place-items: center;
+  border-radius: 10px;
+  font-size: 20px;
+}
+
+.benefit-icon.quality {
+  background: #f1ebff;
+  color: #7c3aed;
+}
+
+.benefit-icon.points {
+  background: #ffeadf;
+  color: #ff6a00;
+}
+
+.quality-owner-benefit .benefit-heading span {
+  color: #7c3aed;
+}
+
+.benefit-heading em {
+  padding: 4px 9px;
+  border-radius: 999px;
+  background: #fff7ed;
+  color: #c2410c;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.quality-owner-benefit .benefit-heading em {
+  background: #f3e8ff;
+  color: #7e22ce;
+}
+
+.benefit-heading em.active {
+  background: #ecfdf5;
+  color: #047857;
+}
+
+.quality-owner-benefit > p,
+.points-benefit > p {
+  margin: 16px 0 0;
+  color: #6b7280;
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+.quality-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+  margin-top: 16px;
+  overflow: hidden;
+  border: 1px solid #ede9fe;
+  border-radius: 10px;
+  background: #ede9fe;
+}
+
+.quality-metrics > div {
+  display: grid;
+  gap: 4px;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.86);
+}
+
+.quality-metrics span,
+.points-balance span {
+  color: #8b95a5;
+  font-size: 10px;
+}
+
+.quality-metrics strong {
+  color: #6d28d9;
+  font-size: 16px;
+}
+
+.quality-owner-benefit ul,
+.points-benefit ul {
+  display: grid;
+  gap: 9px;
+  margin: 16px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.quality-owner-benefit li,
+.points-benefit li {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: #4b5563;
+  font-size: 12px;
+}
+
+.quality-owner-benefit li .el-icon {
+  color: #7c3aed;
+}
+
+.points-benefit li .el-icon {
+  color: #ff6a00;
+}
+
+.points-balance {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1px;
+  margin-top: 16px;
+  overflow: hidden;
+  border: 1px solid #ffe2d1;
+  border-radius: 10px;
+  background: #ffe2d1;
+}
+
+.points-balance > div {
+  display: grid;
+  gap: 4px;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.88);
+}
+
+.points-balance strong {
+  color: #c2410c;
+  font-size: 20px;
+}
+
+.quality-action,
+.points-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 38px;
+  margin-top: 18px;
+  padding: 0 15px;
+  border: 0;
+  border-radius: 19px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.quality-action {
+  background: #7c3aed;
+}
+
+.points-action {
+  background: #ff6a00;
+}
+
+.notice {
+  margin: 18px 0;
+  padding: 18px;
+  border-radius: 10px;
+  background: #fff;
+  color: #6b7280;
+  text-align: center;
+}
+
+.notice.is-error {
+  color: #b91c1c;
+}
+
+.benefits-center.is-mobile {
+  padding: 18px 12px 90px;
+}
+
+.is-mobile .benefits-header h1 {
+  font-size: 24px;
+}
+
+.is-mobile .vip-overview,
+.is-mobile .benefit-grid {
+  grid-template-columns: 1fr;
+}
+
+.is-mobile .vip-copy {
+  padding: 22px;
+}
+
+.is-mobile .vip-copy h2 {
+  font-size: 24px;
+}
+
+.is-mobile .vip-stats {
+  border-top: 1px solid #f1f2f5;
+}
+
+.is-mobile .level-section {
+  padding: 18px 14px;
+}
+
+.is-mobile .section-heading {
+  display: grid;
+  align-items: start;
+}
+
+.is-mobile .level-tabs {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.is-mobile .level-benefits {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.is-mobile .level-benefits > div:nth-child(odd) {
+  border-left: 0;
+}
+
+.is-mobile .level-benefits > div:nth-child(n + 3) {
+  border-top: 1px solid #f1f2f5;
+}
+
+.is-mobile .quality-owner-benefit,
+.is-mobile .points-benefit {
+  padding: 18px;
+}
+
+.is-mobile .quality-metrics {
+  grid-template-columns: 1fr;
+}
+
+.is-mobile .quality-action,
+.is-mobile .points-action {
+  width: 100%;
+}
+
+@media (max-width: 900px) {
+  .vip-overview,
+  .benefit-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .vip-stats {
+    border-top: 1px solid #f1f2f5;
+  }
+
+  .level-benefits {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .level-benefits > div:nth-child(odd) {
+    border-left: 0;
+  }
+
+  .level-benefits > div:nth-child(n + 3) {
+    border-top: 1px solid #f1f2f5;
+  }
+}
+
+@media (max-width: 600px) {
+  .benefits-center {
+    padding: 18px 12px 90px;
+  }
+
+  .benefits-header h1 {
+    font-size: 24px;
+  }
+
+  .vip-copy {
+    padding: 22px;
+  }
+
+  .vip-copy h2 {
+    font-size: 24px;
+  }
+
+  .level-section {
+    padding: 18px 14px;
+  }
+
+  .section-heading {
+    display: grid;
+    align-items: start;
+  }
+
+  .level-tabs {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .quality-owner-benefit,
+  .points-benefit {
+    padding: 18px;
+  }
+
+  .quality-metrics {
+    grid-template-columns: 1fr;
+  }
+
+  .quality-action,
+  .points-action {
+    width: 100%;
+  }
+}
+</style>
diff --git a/frontend/src/features/points/api/pointsMall.ts b/frontend/src/features/points/api/pointsMall.ts
index b7c9fa4..6207c1c 100644
--- a/frontend/src/features/points/api/pointsMall.ts
+++ b/frontend/src/features/points/api/pointsMall.ts
@@ -8,6 +8,17 @@ export interface PointsSummary {
   level_name: string
   points_per_yuan: number
   points_multiplier_bps: number
+  growth_enabled: boolean
+  levels: GrowthLevelRule[]
+}
+
+export interface GrowthLevelRule {
+  code: string
+  name: string
+  min_points: number
+  points_multiplier_bps: number
+  discount_bps: number
+  deposit_free_quota_cent: number
 }
 
 export interface PointsLedgerItem {
diff --git a/frontend/src/layouts/AppLayout.css b/frontend/src/layouts/AppLayout.css
index 9967524..ac91361 100644
--- a/frontend/src/layouts/AppLayout.css
+++ b/frontend/src/layouts/AppLayout.css
@@ -101,6 +101,7 @@
 .pc-nav-link {
   position: relative;
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
@@ -109,6 +110,7 @@
   font-size: 14px;
   font-weight: 700;
   text-decoration: none;
+  white-space: nowrap;
   transition: all 0.18s ease;
 }
 
@@ -801,3 +803,29 @@
     display: none;
   }
 }
+
+@media (max-width: 1500px) {
+  .pc-topbar {
+    gap: 14px;
+    padding: 0 20px;
+  }
+
+  .pc-nav {
+    gap: 2px;
+    margin-left: 0;
+  }
+
+  .pc-nav-link {
+    padding: 8px 10px;
+    font-size: 13px;
+  }
+
+  .pc-nav-link .el-icon {
+    display: none;
+  }
+
+  .pc-search {
+    min-width: 160px;
+    padding: 0 12px;
+  }
+}
diff --git a/frontend/src/layouts/AppLayout.vue b/frontend/src/layouts/AppLayout.vue
index 8e272fe..b0cf6a8 100644
--- a/frontend/src/layouts/AppLayout.vue
+++ b/frontend/src/layouts/AppLayout.vue
@@ -11,6 +11,7 @@ import {
   DocumentChecked,
   EditPen,
   Finished,
+  GoldMedal,
   House,
   Search,
   Service,
@@ -41,6 +42,7 @@ const navItems = [
   { label: '消息', to: '/messages', icon: ChatDotRound },
   { label: '钱包', to: '/wallet', icon: Wallet },
   { label: '邀请返利', to: '/invitations', icon: Coin },
+  { label: '权益中心', to: '/benefits', icon: GoldMedal },
   { label: '公告', to: '/announcements', icon: Bell },
 ]
 const buyerServiceItems = [
@@ -329,6 +331,14 @@ async function handleSupportClick() {
                       <el-icon><Coin /></el-icon>
                       <span>邀请返利</span>
                     </RouterLink>
+                    <RouterLink
+                      class="dropdown-basic-item"
+                      to="/benefits"
+                      @click="showUserDropdown = false"
+                    >
+                      <el-icon><GoldMedal /></el-icon>
+                      <span>权益中心</span>
+                    </RouterLink>
                   </div>
 
                   <div class="dropdown-divider"></div>
diff --git a/frontend/src/router/accountRoutes.ts b/frontend/src/router/accountRoutes.ts
index a2f1f65..db893d8 100644
--- a/frontend/src/router/accountRoutes.ts
+++ b/frontend/src/router/accountRoutes.ts
@@ -19,6 +19,13 @@ export const accountRoutes: RouteRecordRaw[] = [
     component: () => import('@/features/auth/views/ProfileView.vue'),
     meta: { requiresAuth: true },
   },
+  {
+    path: '/benefits',
+    name: 'benefits',
+    component: () => import('@/features/benefits/views/BenefitsCenterView.vue'),
+    meta: { requiresAuth: true },
+    props: { mobile: false },
+  },
   {
     path: '/points-mall',
     name: 'points-mall',
diff --git a/frontend/src/router/mobileRoutes.ts b/frontend/src/router/mobileRoutes.ts
index 38fdc3d..6037f0d 100644
--- a/frontend/src/router/mobileRoutes.ts
+++ b/frontend/src/router/mobileRoutes.ts
@@ -89,6 +89,13 @@ export const mobileRoutes: RouteRecordRaw[] = [
     component: () => import('@/features/invitation/views/UserInvitationView.vue'),
     meta: { layout: 'blank', requiresAuth: true },
   },
+  {
+    path: '/m/benefits',
+    name: 'mobile-benefits',
+    component: () => import('@/features/benefits/views/BenefitsCenterView.vue'),
+    meta: { layout: 'blank', requiresAuth: true },
+    props: { mobile: true },
+  },
   {
     path: '/m/profile',
     name: 'mobile-profile',