From 21ced84bd40290f45af8c3700b8721741ec738c4 Mon Sep 17 00:00:00 2001
From: “wangming” <“wangming@antissoft.com”>
Date: Wed, 24 Dec 2025 23:20:21 +0800
Subject: [PATCH] feat: 优化会员画像页面样式，新增门店数据页面设计方案

---
 antis-ncc-admin/src/components/member-portrait-dialog.vue | 985 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 门店数据页面设计方案.md                         | 422 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 1039 insertions(+), 368 deletions(-)
 create mode 100644 门店数据页面设计方案.md

diff --git a/antis-ncc-admin/src/components/member-portrait-dialog.vue b/antis-ncc-admin/src/components/member-portrait-dialog.vue
index 86b2b63..af7eaf5 100644
--- a/antis-ncc-admin/src/components/member-portrait-dialog.vue
+++ b/antis-ncc-admin/src/components/member-portrait-dialog.vue
@@ -1,93 +1,71 @@
 <template>
-  <el-dialog :visible.sync="visibleSync" title="会员画像" :width="'1400px'" append-to-body
+  <el-dialog :visible.sync="visibleSync" title="会员画像" :width="'1500px'" append-to-body
     custom-class="member-portrait-dialog" :close-on-click-modal="false" @closed="handleClosed">
     <div v-loading="loading" class="portrait-wrapper">
-      <!-- 顶部：基础信息栏 -->
+      <!-- 顶部：会员核心信息卡片 -->
       <div class="portrait-header">
+        <div class="header-avatar">
+          <div class="avatar-circle">
+            <i class="el-icon-user-solid"></i>
+          </div>
+        </div>
         <div class="header-main">
-          <div class="member-name">{{ baseInfo.MemberName || '—' }}</div>
+          <div class="member-name-row">
+            <h2 class="member-name">{{ baseInfo.MemberName || '—' }}</h2>
+            <el-tag v-if="baseInfo.ConsumeLevel !== undefined" :type="getConsumeLevelTagType(baseInfo.ConsumeLevel)" size="small" class="level-tag">
+              {{ getConsumeLevelText(baseInfo.ConsumeLevel) }}
+            </el-tag>
+          </div>
           <div class="member-meta">
-            <span class="meta-item">
+            <div class="meta-item">
               <i class="el-icon-phone"></i>
-              {{ baseInfo.Mobile || '—' }}
-            </span>
-            <span class="meta-item">
+              <span>{{ baseInfo.Mobile || '—' }}</span>
+            </div>
+            <div class="meta-item">
               <i class="el-icon-office-building"></i>
-              {{ baseInfo.StoreName || '—' }}
-            </span>
-            <span class="meta-item" v-if="baseInfo.Channel">
+              <span>{{ baseInfo.StoreName || '—' }}</span>
+            </div>
+            <div class="meta-item" v-if="baseInfo.Channel">
               <i class="el-icon-connection"></i>
-              {{ baseInfo.Channel }}
-            </span>
+              <span>{{ baseInfo.Channel }}</span>
+            </div>
+            <div class="meta-item" v-if="baseInfo.MemberCode">
+              <i class="el-icon-tickets"></i>
+              <span>编码：{{ baseInfo.MemberCode }}</span>
+            </div>
           </div>
         </div>
-        <div class="header-stats">
-          <div class="stat-item">
-            <div class="stat-label">剩余权益</div>
-            <div class="stat-value highlight">￥{{ formatMoney(behaviorSummary.RemainingRightsAmount) }}</div>
-          </div>
-          <div class="stat-item">
-            <div class="stat-label">累计开单</div>
-            <div class="stat-value">￥{{ formatMoney(behaviorSummary.TotalBillingAmount) }}</div>
-          </div>
-          <div class="stat-item">
-            <div class="stat-label">累计消耗</div>
-            <div class="stat-value">￥{{ formatMoney(behaviorSummary.TotalConsumeAmount) }}</div>
-          </div>
-          <div class="stat-item">
-            <div class="stat-label">沉睡天数</div>
-            <div class="stat-value" :class="{ 'text-warning': baseInfo.SleepDays > 30 }">
-              {{ baseInfo.SleepDays || 0 }} 天
+        <div class="header-right">
+          <div class="header-stats">
+            <div class="stat-card stat-primary">
+              <el-tag type="primary" size="small" class="stat-label-tag">剩余权益</el-tag>
+              <span class="stat-value">￥{{ formatMoney(behaviorSummary.RemainingRightsAmount) }}</span>
+            </div>
+            <div class="stat-card stat-success">
+              <el-tag type="success" size="small" class="stat-label-tag">累计开单</el-tag>
+              <span class="stat-value">￥{{ formatMoney(behaviorSummary.TotalBillingAmount) }}</span>
+            </div>
+            <div class="stat-card stat-info">
+              <el-tag type="info" size="small" class="stat-label-tag">累计消耗</el-tag>
+              <span class="stat-value">￥{{ formatMoney(behaviorSummary.TotalConsumeAmount) }}</span>
+            </div>
+            <div class="stat-card" :class="baseInfo.SleepDays > 30 ? 'stat-warning' : 'stat-default'">
+              <el-tag :type="baseInfo.SleepDays > 30 ? 'warning' : 'info'" size="small" class="stat-label-tag">沉睡天数</el-tag>
+              <span class="stat-value">{{ baseInfo.SleepDays || 0 }} 天</span>
             </div>
           </div>
-        </div>
-      </div>
-
-      <!-- 基础信息区域（独立于标签页） -->
-      <div class="base-info-section">
-        <div class="base-info-layout">
           <!-- 会员类型 -->
-          <div class="card-section">
-            <div class="section-title">
-              <i class="el-icon-collection-tag"></i>
-              会员类型
-            </div>
-            <div class="tag-list">
-              <div v-for="type in baseInfo.MemberTypes" :key="type.TypeName" class="member-type-item">
-                <el-tag :type="getMemberTypeTagType(type.TypeName)" size="medium" class="member-type-tag">
-                  {{ type.TypeName }}
+          <div class="member-types-section" v-if="baseInfo.MemberTypes && baseInfo.MemberTypes.length > 0">
+            <div class="member-types-list">
+              <div v-for="type in baseInfo.MemberTypes" :key="type.TypeName" class="member-type-badge">
+                <el-tag :type="getMemberTypeTagType(type.TypeName)" size="small" class="member-type-tag">
+                  {{ type.TypeName }}会员
                 </el-tag>
                 <span class="member-type-date" v-if="type.BecomeTime">
+                  <i class="el-icon-calendar"></i>
                   {{ formatDate(type.BecomeTime) }}
                 </span>
               </div>
-              <span v-if="!baseInfo.MemberTypes || baseInfo.MemberTypes.length === 0" class="text-muted">无</span>
-            </div>
-          </div>
-
-          <!-- 基础信息 -->
-          <div class="card-section">
-            <div class="section-title">
-              <i class="el-icon-info"></i>
-              基础信息
-            </div>
-            <div class="info-list">
-              <div class="info-item">
-                <span class="info-label">会员编码：</span>
-                <span class="info-value">{{ baseInfo.MemberCode || '—' }}</span>
-              </div>
-              <div class="info-item">
-                <span class="info-label">首次到店：</span>
-                <span class="info-value">{{ formatDateTime(baseInfo.FirstVisitTime) }}</span>
-              </div>
-              <div class="info-item">
-                <span class="info-label">最后到店：</span>
-                <span class="info-value">{{ formatDateTime(baseInfo.LastVisitTime) }}</span>
-              </div>
-              <div class="info-item">
-                <span class="info-label">消费等级：</span>
-                <span class="info-value">{{ getConsumeLevelText(baseInfo.ConsumeLevel) }}</span>
-              </div>
             </div>
           </div>
         </div>
@@ -99,81 +77,147 @@
         <el-tab-pane label="概览" name="overview">
           <div class="tab-content">
             <!-- 消费行为 -->
-            <div class="card-section">
-              <div class="section-title">
+            <div class="content-card">
+              <div class="card-header">
                 <i class="el-icon-shopping-cart-full"></i>
-                消费行为
+                <span class="card-title">消费行为</span>
               </div>
-              <div class="behavior-grid">
-                <div class="behavior-item">
-                  <div class="behavior-label">开单次数</div>
-                  <div class="behavior-value">{{ behaviorSummary.BillingCount || 0 }}</div>
-                </div>
-                <div class="behavior-item">
-                  <div class="behavior-label">消耗次数</div>
-                  <div class="behavior-value">{{ behaviorSummary.ConsumeCount || 0 }}</div>
-                </div>
-                <div class="behavior-item">
-                  <div class="behavior-label">退卡次数</div>
-                  <div class="behavior-value">{{ behaviorSummary.RefundCount || 0 }}</div>
-                </div>
-                <div class="behavior-item">
-                  <div class="behavior-label">平均开单金额</div>
-                  <div class="behavior-value">￥{{ formatMoney(behaviorSummary.AvgBillingAmount) }}</div>
-                </div>
-                <div class="behavior-item">
-                  <div class="behavior-label">平均消耗金额</div>
-                  <div class="behavior-value">￥{{ formatMoney(behaviorSummary.AvgConsumeAmount) }}</div>
-                </div>
-                <div class="behavior-item">
-                  <div class="behavior-label">最近开单</div>
-                  <div class="behavior-value">{{ formatDateTime(behaviorSummary.LastBillingTime) }}</div>
-                </div>
-                <div class="behavior-item">
-                  <div class="behavior-label">最近消耗</div>
-                  <div class="behavior-value">{{ formatDateTime(behaviorSummary.LastConsumeTime) }}</div>
-                </div>
-                <div class="behavior-item">
-                  <div class="behavior-label">首次开单</div>
-                  <div class="behavior-value">{{ formatDateTime(behaviorSummary.FirstBillingTime) }}</div>
-                </div>
-                <div class="behavior-item">
-                  <div class="behavior-label">首次消耗</div>
-                  <div class="behavior-value">{{ formatDateTime(behaviorSummary.FirstConsumeTime) }}</div>
+              <div class="card-body">
+                <div class="behavior-grid">
+                  <div class="behavior-item">
+                    <div class="behavior-icon">
+                      <i class="el-icon-document"></i>
+                    </div>
+                    <div class="behavior-content">
+                      <div class="behavior-label">开单次数</div>
+                      <div class="behavior-value">{{ behaviorSummary.BillingCount || 0 }}</div>
+                    </div>
+                  </div>
+                  <div class="behavior-item">
+                    <div class="behavior-icon">
+                      <i class="el-icon-goods"></i>
+                    </div>
+                    <div class="behavior-content">
+                      <div class="behavior-label">消耗次数</div>
+                      <div class="behavior-value">{{ behaviorSummary.ConsumeCount || 0 }}</div>
+                    </div>
+                  </div>
+                  <div class="behavior-item">
+                    <div class="behavior-icon">
+                      <i class="el-icon-refresh-left"></i>
+                    </div>
+                    <div class="behavior-content">
+                      <div class="behavior-label">退卡次数</div>
+                      <div class="behavior-value">{{ behaviorSummary.RefundCount || 0 }}</div>
+                    </div>
+                  </div>
+                  <div class="behavior-item">
+                    <div class="behavior-icon">
+                      <i class="el-icon-coin"></i>
+                    </div>
+                    <div class="behavior-content">
+                      <div class="behavior-label">平均开单金额</div>
+                      <div class="behavior-value">￥{{ formatMoney(behaviorSummary.AvgBillingAmount) }}</div>
+                    </div>
+                  </div>
+                  <div class="behavior-item">
+                    <div class="behavior-icon">
+                      <i class="el-icon-coin"></i>
+                    </div>
+                    <div class="behavior-content">
+                      <div class="behavior-label">平均消耗金额</div>
+                      <div class="behavior-value">￥{{ formatMoney(behaviorSummary.AvgConsumeAmount) }}</div>
+                    </div>
+                  </div>
+                  <div class="behavior-item">
+                    <div class="behavior-icon">
+                      <i class="el-icon-time"></i>
+                    </div>
+                    <div class="behavior-content">
+                      <div class="behavior-label">最近开单</div>
+                      <div class="behavior-value">{{ formatDateTime(behaviorSummary.LastBillingTime) }}</div>
+                    </div>
+                  </div>
+                  <div class="behavior-item">
+                    <div class="behavior-icon">
+                      <i class="el-icon-time"></i>
+                    </div>
+                    <div class="behavior-content">
+                      <div class="behavior-label">最近消耗</div>
+                      <div class="behavior-value">{{ formatDateTime(behaviorSummary.LastConsumeTime) }}</div>
+                    </div>
+                  </div>
+                  <div class="behavior-item">
+                    <div class="behavior-icon">
+                      <i class="el-icon-calendar"></i>
+                    </div>
+                    <div class="behavior-content">
+                      <div class="behavior-label">首次开单</div>
+                      <div class="behavior-value">{{ formatDateTime(behaviorSummary.FirstBillingTime) }}</div>
+                    </div>
+                  </div>
+                  <div class="behavior-item">
+                    <div class="behavior-icon">
+                      <i class="el-icon-calendar"></i>
+                    </div>
+                    <div class="behavior-content">
+                      <div class="behavior-label">首次消耗</div>
+                      <div class="behavior-value">{{ formatDateTime(behaviorSummary.FirstConsumeTime) }}</div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
 
             <!-- 近12个月趋势图 -->
-            <div class="card-section">
-              <div class="section-title">
+            <div class="content-card">
+              <div class="card-header">
                 <i class="el-icon-data-line"></i>
-                近12个月消费趋势
+                <span class="card-title">近12个月消费趋势</span>
+              </div>
+              <div class="card-body">
+                <div ref="trendChart" class="trend-chart"></div>
               </div>
-              <div ref="trendChart" class="trend-chart"></div>
             </div>
 
             <!-- 消费分析 -->
-            <div v-if="consumptionAnalysis" class="card-section">
-              <div class="section-title">
+            <div v-if="consumptionAnalysis" class="content-card">
+              <div class="card-header">
                 <i class="el-icon-data-analysis"></i>
-                消费分析
+                <span class="card-title">消费分析</span>
               </div>
-              <div class="analysis-layout">
-                <div class="analysis-item">
-                  <div class="analysis-label">消费频率</div>
-                  <div class="analysis-value">{{ formatMoney(consumptionAnalysis.ConsumeFrequency) }} 次/月</div>
-                </div>
-                <div class="analysis-item">
-                  <div class="analysis-label">开单频率</div>
-                  <div class="analysis-value">{{ formatMoney(consumptionAnalysis.BillingFrequency) }} 次/月</div>
-                </div>
-                <div class="analysis-item">
-                  <div class="analysis-label">消费活跃度</div>
-                  <div class="analysis-value">
-                    <el-tag :type="consumptionAnalysis.IsActive ? 'success' : 'info'" size="small">
-                      {{ consumptionAnalysis.IsActive ? '活跃' : '不活跃' }}
-                    </el-tag>
+              <div class="card-body">
+                <div class="analysis-layout">
+                  <div class="analysis-item">
+                    <div class="analysis-icon">
+                      <i class="el-icon-timer"></i>
+                    </div>
+                    <div class="analysis-content">
+                      <div class="analysis-label">消费频率</div>
+                      <div class="analysis-value">{{ formatMoney(consumptionAnalysis.ConsumeFrequency) }} 次/月</div>
+                    </div>
+                  </div>
+                  <div class="analysis-item">
+                    <div class="analysis-icon">
+                      <i class="el-icon-timer"></i>
+                    </div>
+                    <div class="analysis-content">
+                      <div class="analysis-label">开单频率</div>
+                      <div class="analysis-value">{{ formatMoney(consumptionAnalysis.BillingFrequency) }} 次/月</div>
+                    </div>
+                  </div>
+                  <div class="analysis-item">
+                    <div class="analysis-icon">
+                      <i class="el-icon-success"></i>
+                    </div>
+                    <div class="analysis-content">
+                      <div class="analysis-label">消费活跃度</div>
+                      <div class="analysis-value">
+                        <el-tag :type="consumptionAnalysis.IsActive ? 'success' : 'info'" size="small">
+                          {{ consumptionAnalysis.IsActive ? '活跃' : '不活跃' }}
+                        </el-tag>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -184,26 +228,28 @@
         <!-- 权益明细 -->
         <el-tab-pane label="权益明细" name="assets">
           <div class="tab-content">
-            <div class="card-section">
-              <div class="section-title">
+            <div class="content-card">
+              <div class="card-header">
                 <i class="el-icon-wallet"></i>
-                权益明细
+                <span class="card-title">权益明细</span>
+              </div>
+              <div class="card-body">
+                <el-table :data="remainingItems" size="small" border stripe>
+                  <el-table-column prop="ItemName" label="品项名称" min-width="140" />
+                  <el-table-column prop="SourceType" label="来源类型" width="90" />
+                  <el-table-column prop="UnitPrice" label="单价" width="90">
+                    <template slot-scope="scope">￥{{ formatMoney(scope.row.UnitPrice) }}</template>
+                  </el-table-column>
+                  <el-table-column prop="TotalQuantity" label="总数量" width="80" />
+                  <el-table-column prop="ConsumedQuantity" label="已消费" width="80" />
+                  <el-table-column prop="RefundedQuantity" label="已退款" width="80" />
+                  <el-table-column prop="DeductedQuantity" label="已扣除" width="80" />
+                  <el-table-column prop="RemainingQuantity" label="剩余" width="80" />
+                  <el-table-column prop="RemainingValue" label="剩余价值" width="120">
+                    <template slot-scope="scope">￥{{ formatMoney(scope.row.RemainingValue) }}</template>
+                  </el-table-column>
+                </el-table>
               </div>
-              <el-table :data="remainingItems" size="small" border stripe>
-                <el-table-column prop="ItemName" label="品项名称" min-width="140" />
-                <el-table-column prop="SourceType" label="来源类型" width="90" />
-                <el-table-column prop="UnitPrice" label="单价" width="90">
-                  <template slot-scope="scope">￥{{ formatMoney(scope.row.UnitPrice) }}</template>
-                </el-table-column>
-                <el-table-column prop="TotalQuantity" label="总数量" width="80" />
-                <el-table-column prop="ConsumedQuantity" label="已消费" width="80" />
-                <el-table-column prop="RefundedQuantity" label="已退款" width="80" />
-                <el-table-column prop="DeductedQuantity" label="已扣除" width="80" />
-                <el-table-column prop="RemainingQuantity" label="剩余" width="80" />
-                <el-table-column prop="RemainingValue" label="剩余价值" width="120">
-                  <template slot-scope="scope">￥{{ formatMoney(scope.row.RemainingValue) }}</template>
-                </el-table-column>
-              </el-table>
             </div>
           </div>
         </el-tab-pane>
@@ -211,24 +257,32 @@
         <!-- 开单列表 -->
         <el-tab-pane label="开单列表" name="billing">
           <div class="tab-content">
-            <el-table v-loading="billingLoading" :data="billingList" size="small" border stripe>
-              <el-table-column prop="BillingDate" label="开单日期" width="160">
-                <template slot-scope="scope">{{ formatDateTime(scope.row.BillingDate) }}</template>
-              </el-table-column>
-              <el-table-column prop="StoreName" label="门店" width="150" />
-              <el-table-column prop="Amount" label="实付金额" width="120">
-                <template slot-scope="scope">￥{{ formatMoney(scope.row.Amount) }}</template>
-              </el-table-column>
-              <el-table-column prop="DebtAmount" label="欠款金额" width="120">
-                <template slot-scope="scope">￥{{ formatMoney(scope.row.DebtAmount) }}</template>
-              </el-table-column>
-              <el-table-column prop="ActivityName" label="活动名称" min-width="150" />
-            </el-table>
-            <div class="pagination-bar">
-              <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]"
-                :total="billingPagination.total" :current-page="billingPagination.pageIndex"
-                :page-size="billingPagination.pageSize" @size-change="handleBillingSizeChange"
-                @current-change="handleBillingPageChange" />
+            <div class="content-card">
+              <div class="card-header">
+                <i class="el-icon-document"></i>
+                <span class="card-title">开单列表</span>
+              </div>
+              <div class="card-body">
+                <el-table v-loading="billingLoading" :data="billingList" size="small" border stripe>
+                  <el-table-column prop="BillingDate" label="开单日期" width="160">
+                    <template slot-scope="scope">{{ formatDateTime(scope.row.BillingDate) }}</template>
+                  </el-table-column>
+                  <el-table-column prop="StoreName" label="门店" width="150" />
+                  <el-table-column prop="Amount" label="实付金额" width="120">
+                    <template slot-scope="scope">￥{{ formatMoney(scope.row.Amount) }}</template>
+                  </el-table-column>
+                  <el-table-column prop="DebtAmount" label="欠款金额" width="120">
+                    <template slot-scope="scope">￥{{ formatMoney(scope.row.DebtAmount) }}</template>
+                  </el-table-column>
+                  <el-table-column prop="ActivityName" label="活动名称" min-width="150" />
+                </el-table>
+                <div class="pagination-bar">
+                  <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]"
+                    :total="billingPagination.total" :current-page="billingPagination.pageIndex"
+                    :page-size="billingPagination.pageSize" @size-change="handleBillingSizeChange"
+                    @current-change="handleBillingPageChange" />
+                </div>
+              </div>
             </div>
           </div>
         </el-tab-pane>
@@ -236,23 +290,31 @@
         <!-- 消耗列表 -->
         <el-tab-pane label="消耗列表" name="consume">
           <div class="tab-content">
-            <el-table v-loading="consumeLoading" :data="consumeList" size="small" border stripe>
-              <el-table-column prop="ConsumeDate" label="消耗日期" width="160">
-                <template slot-scope="scope">{{ formatDateTime(scope.row.ConsumeDate) }}</template>
-              </el-table-column>
-              <el-table-column prop="StoreName" label="门店" width="150" />
-              <el-table-column prop="Amount" label="消耗金额" width="120">
-                <template slot-scope="scope">￥{{ formatMoney(scope.row.Amount) }}</template>
-              </el-table-column>
-              <el-table-column prop="LaborCost" label="手工费" width="120">
-                <template slot-scope="scope">￥{{ formatMoney(scope.row.LaborCost) }}</template>
-              </el-table-column>
-            </el-table>
-            <div class="pagination-bar">
-              <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]"
-                :total="consumePagination.total" :current-page="consumePagination.pageIndex"
-                :page-size="consumePagination.pageSize" @size-change="handleConsumeSizeChange"
-                @current-change="handleConsumePageChange" />
+            <div class="content-card">
+              <div class="card-header">
+                <i class="el-icon-goods"></i>
+                <span class="card-title">消耗列表</span>
+              </div>
+              <div class="card-body">
+                <el-table v-loading="consumeLoading" :data="consumeList" size="small" border stripe>
+                  <el-table-column prop="ConsumeDate" label="消耗日期" width="160">
+                    <template slot-scope="scope">{{ formatDateTime(scope.row.ConsumeDate) }}</template>
+                  </el-table-column>
+                  <el-table-column prop="StoreName" label="门店" width="150" />
+                  <el-table-column prop="Amount" label="消耗金额" width="120">
+                    <template slot-scope="scope">￥{{ formatMoney(scope.row.Amount) }}</template>
+                  </el-table-column>
+                  <el-table-column prop="LaborCost" label="手工费" width="120">
+                    <template slot-scope="scope">￥{{ formatMoney(scope.row.LaborCost) }}</template>
+                  </el-table-column>
+                </el-table>
+                <div class="pagination-bar">
+                  <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]"
+                    :total="consumePagination.total" :current-page="consumePagination.pageIndex"
+                    :page-size="consumePagination.pageSize" @size-change="handleConsumeSizeChange"
+                    @current-change="handleConsumePageChange" />
+                </div>
+              </div>
             </div>
           </div>
         </el-tab-pane>
@@ -260,24 +322,32 @@
         <!-- 退卡列表 -->
         <el-tab-pane label="退卡列表" name="refund">
           <div class="tab-content">
-            <el-table v-loading="refundLoading" :data="refundList" size="small" border stripe>
-              <el-table-column prop="RefundDate" label="退卡日期" width="160">
-                <template slot-scope="scope">{{ formatDateTime(scope.row.RefundDate) }}</template>
-              </el-table-column>
-              <el-table-column prop="StoreName" label="门店" width="150" />
-              <el-table-column prop="RefundAmount" label="退卡金额" width="120">
-                <template slot-scope="scope">￥{{ formatMoney(scope.row.RefundAmount) }}</template>
-              </el-table-column>
-              <el-table-column prop="ActualRefundAmount" label="实际退款" width="120">
-                <template slot-scope="scope">￥{{ formatMoney(scope.row.ActualRefundAmount) }}</template>
-              </el-table-column>
-              <el-table-column prop="RefundReason" label="退卡原因" min-width="150" />
-            </el-table>
-            <div class="pagination-bar">
-              <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]"
-                :total="refundPagination.total" :current-page="refundPagination.pageIndex"
-                :page-size="refundPagination.pageSize" @size-change="handleRefundSizeChange"
-                @current-change="handleRefundPageChange" />
+            <div class="content-card">
+              <div class="card-header">
+                <i class="el-icon-refresh-left"></i>
+                <span class="card-title">退卡列表</span>
+              </div>
+              <div class="card-body">
+                <el-table v-loading="refundLoading" :data="refundList" size="small" border stripe>
+                  <el-table-column prop="RefundDate" label="退卡日期" width="160">
+                    <template slot-scope="scope">{{ formatDateTime(scope.row.RefundDate) }}</template>
+                  </el-table-column>
+                  <el-table-column prop="StoreName" label="门店" width="150" />
+                  <el-table-column prop="RefundAmount" label="退卡金额" width="120">
+                    <template slot-scope="scope">￥{{ formatMoney(scope.row.RefundAmount) }}</template>
+                  </el-table-column>
+                  <el-table-column prop="ActualRefundAmount" label="实际退款" width="120">
+                    <template slot-scope="scope">￥{{ formatMoney(scope.row.ActualRefundAmount) }}</template>
+                  </el-table-column>
+                  <el-table-column prop="RefundReason" label="退卡原因" min-width="150" />
+                </el-table>
+                <div class="pagination-bar">
+                  <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]"
+                    :total="refundPagination.total" :current-page="refundPagination.pageIndex"
+                    :page-size="refundPagination.pageSize" @size-change="handleRefundSizeChange"
+                    @current-change="handleRefundPageChange" />
+                </div>
+              </div>
             </div>
           </div>
         </el-tab-pane>
@@ -620,6 +690,16 @@ export default {
       }
       return levelMap[level] || '普通'
     },
+    getConsumeLevelTagType(level) {
+      const typeMap = {
+        0: 'info',
+        1: '',
+        2: 'warning',
+        3: 'success',
+        4: 'danger'
+      }
+      return typeMap[level] || 'info'
+    },
     getMemberTypeTagType(typeName) {
       const typeMap = {
         '生美': 'success',
@@ -651,178 +731,262 @@ export default {
 <style lang="scss" scoped>
 .member-portrait-dialog {
   .el-dialog {
-    border-radius: 14px;
+    border-radius: 16px;
     overflow: hidden;
   }
 
   .el-dialog__header {
-    padding: 16px 20px;
-    border-bottom: 1px solid #ebeef5;
+    padding: 20px 24px;
+    border-bottom: 1px solid #e4e7ed;
+    background: #409EFF;
+    color: #fff;
+
+    .el-dialog__title {
+      color: #fff;
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .el-dialog__close {
+      color: #fff;
+      font-size: 20px;
+
+      &:hover {
+        color: rgba(255, 255, 255, 0.8);
+      }
+    }
   }
 
   .el-dialog__body {
-    padding: 20px;
+    padding: 24px;
     background: #f5f7fa;
     color: #303133;
     overflow-y: auto;
-    max-height: calc(90vh - 100px);
+    max-height: calc(90vh - 120px);
   }
 }
 
 .portrait-wrapper {
+  // 顶部会员信息卡片
   .portrait-header {
     background: #fff;
-    border: 1px solid #ebeef5;
-    border-radius: 10px;
-    padding: 16px 20px;
-    margin-bottom: 16px;
+    border-radius: 12px;
+    padding: 24px;
+    margin-bottom: 20px;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    align-items: flex-start;
+    gap: 24px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    border: 1px solid #e4e7ed;
+
+    .header-avatar {
+      flex-shrink: 0;
+
+      .avatar-circle {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        background: #409EFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        font-size: 36px;
+        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+      }
+    }
 
     .header-main {
       flex: 1;
+      min-width: 0;
 
-      .member-name {
-        font-size: 22px;
-        font-weight: 600;
-        color: #303133;
-        margin-bottom: 10px;
+      .member-name-row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 16px;
+
+        .member-name {
+          font-size: 24px;
+          font-weight: 700;
+          color: #303133;
+          margin: 0;
+          line-height: 1.2;
+        }
+
+        .level-tag {
+          font-weight: 600;
+        }
       }
 
       .member-meta {
         display: flex;
-        gap: 16px;
         flex-wrap: wrap;
+        gap: 20px;
 
         .meta-item {
-          font-size: 13px;
+          font-size: 14px;
           color: #606266;
           display: flex;
           align-items: center;
-          gap: 6px;
+          gap: 8px;
 
           i {
             color: #909399;
+            font-size: 16px;
+          }
+
+          span {
+            line-height: 1.5;
           }
         }
       }
     }
 
-    .header-stats {
+    .header-right {
       display: flex;
-      gap: 24px;
-
-      .stat-item {
-        text-align: center;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 16px;
+      flex-shrink: 0;
 
-        .stat-label {
-          font-size: 12px;
-          color: #909399;
-          margin-bottom: 6px;
-        }
+      .header-stats {
+        display: flex;
+        gap: 16px;
+        flex-shrink: 0;
 
-        .stat-value {
-          font-size: 16px;
-          font-weight: 600;
-          color: #303133;
+        .stat-card {
+          min-width: 100px;
+          padding: 6px 12px;
+          border-radius: 6px;
+          border: 1px solid #e4e7ed;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          transition: all 0.2s ease;
 
-          &.highlight {
-            color: #409EFF;
+          &:hover {
+            opacity: 0.9;
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
           }
 
-          &.text-warning {
-            color: #E6A23C;
+          .stat-label-tag {
+            font-weight: 600;
+            font-size: 12px;
+            padding: 2px 10px;
+            margin: 0;
+            flex-shrink: 0;
           }
-        }
-      }
-    }
-  }
-
-  .base-info-section {
-    margin-bottom: 12px;
 
-    .base-info-layout {
-      display: flex;
-      gap: 12px;
-
-      .card-section {
-        flex: 1;
-        padding: 10px 12px;
-        margin-bottom: 0;
+          .stat-value {
+            font-size: 13px;
+            font-weight: 600;
+            color: #303133;
+            white-space: nowrap;
+            line-height: 1.2;
+            flex: 1;
+            min-width: 0;
+          }
 
-        .section-title {
-          font-size: 13px;
-          margin-bottom: 8px;
-        }
+          &.stat-primary {
+            background: #409EFF;
 
-        .tag-list {
-          gap: 6px;
+            .stat-value {
+              color: #fff;
+            }
+          }
 
-          .member-type-item {
-            padding: 6px 8px;
-            font-size: 12px;
+          &.stat-success {
+            background: #67C23A;
 
-            .member-type-tag {
-              font-size: 12px;
-              padding: 2px 10px;
+            .stat-value {
+              color: #fff;
             }
+          }
 
-            .member-type-date {
-              font-size: 11px;
+          &.stat-info {
+            background: #909399;
+
+            .stat-value {
+              color: #fff;
             }
           }
-        }
 
-        .info-list {
-          .info-item {
-            padding: 4px 0;
-            font-size: 12px;
+          &.stat-warning {
+            background: #E6A23C;
 
-            .info-label {
-              width: 75px;
-              font-size: 12px;
+            .stat-value {
+              color: #fff;
             }
+          }
 
-            .info-value {
-              font-size: 12px;
+          &.stat-default {
+            background: #606266;
+
+            .stat-value {
+              color: #fff;
             }
           }
         }
       }
-    }
-  }
 
-  .portrait-tabs {
-    ::v-deep .el-tabs__header {
-      margin-bottom: 16px;
-    }
+      .member-types-section {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+
+        .member-types-label {
+          font-size: 13px;
+          color: #909399;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          flex-shrink: 0;
+
+          i {
+            color: #409EFF;
+            font-size: 14px;
+          }
+        }
 
-    ::v-deep .el-tabs__content {
-      .tab-content {
-        .analysis-layout {
+        .member-types-list {
           display: flex;
-          gap: 20px;
           flex-wrap: wrap;
+          gap: 12px;
 
-          .analysis-item {
-            min-width: 150px;
-            padding: 12px;
+          .member-type-badge {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 6px 12px;
             background: #f8f9fa;
             border-radius: 6px;
-            border: 1px solid #ebeef5;
+            border: 1px solid #e4e7ed;
+            transition: all 0.2s ease;
 
-            .analysis-label {
+            &:hover {
+              background: #f0f2f5;
+              border-color: #409EFF;
+            }
+
+            .member-type-tag {
+              font-weight: 600;
               font-size: 12px;
-              color: #909399;
-              margin-bottom: 6px;
+              padding: 2px 10px;
             }
 
-            .analysis-value {
-              font-size: 14px;
-              color: #303133;
-              font-weight: 500;
+            .member-type-date {
+              font-size: 12px;
+              color: #909399;
+              display: flex;
+              align-items: center;
+              gap: 4px;
+
+              i {
+                font-size: 12px;
+              }
             }
           }
         }
@@ -830,117 +994,202 @@ export default {
     }
   }
 
-  .card-section {
-    background: #fff;
-    border: 1px solid #ebeef5;
-    border-radius: 10px;
-    padding: 14px;
-    margin-bottom: 16px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 
-    .section-title {
+  // 选项卡样式
+  .portrait-tabs {
+    ::v-deep .el-tabs__header {
+      margin-bottom: 20px;
+      background: #fff;
+      padding: 0 20px;
+      border-radius: 12px;
+      border: 1px solid #e4e7ed;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    }
+
+    ::v-deep .el-tabs__nav-wrap::after {
+      display: none;
+    }
+
+    ::v-deep .el-tabs__item {
       font-size: 14px;
-      font-weight: 600;
-      color: #303133;
-      margin-bottom: 12px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
+      font-weight: 500;
+      padding: 0 24px;
+      height: 50px;
+      line-height: 50px;
 
-      i {
+      &.is-active {
         color: #409EFF;
+        font-weight: 600;
+      }
+    }
+
+    ::v-deep .el-tabs__active-bar {
+      background-color: #409EFF;
+      height: 3px;
+    }
+
+    .tab-content {
+      .content-card {
+        background: #fff;
+        border-radius: 12px;
+        border: 1px solid #e4e7ed;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        margin-bottom: 20px;
+        overflow: hidden;
+
+        .card-header {
+          padding: 18px 20px;
+          background: #f8f9fa;
+          border-bottom: 1px solid #e4e7ed;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          i {
+            font-size: 18px;
+            color: #409EFF;
+          }
+
+          .card-title {
+            font-size: 15px;
+            font-weight: 600;
+            color: #303133;
+          }
+        }
+
+        .card-body {
+          padding: 20px;
+        }
       }
     }
   }
 
+  // 消费行为网格
   .behavior-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
+    gap: 16px;
 
     .behavior-item {
       background: #f8f9fa;
-      padding: 10px;
-      border-radius: 6px;
-      border: 1px solid #ebeef5;
+      border-radius: 10px;
+      border: 1px solid #e4e7ed;
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      transition: all 0.3s ease;
 
-      .behavior-label {
-        font-size: 12px;
-        color: #909399;
-        margin-bottom: 6px;
+      &:hover {
+        background: #fff;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        transform: translateY(-2px);
       }
 
-      .behavior-value {
-        font-size: 13px;
-        color: #303133;
-        font-weight: 500;
+      .behavior-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 8px;
+        background: #409EFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        font-size: 18px;
+        flex-shrink: 0;
       }
-    }
-  }
-
-  .tag-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
 
-    .member-type-item {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      padding: 8px;
-      background: #f8f9fa;
-      border-radius: 6px;
-      border-left: 3px solid #409EFF;
+      .behavior-content {
+        flex: 1;
+        min-width: 0;
 
-      .member-type-tag {
-        font-weight: 600;
-        font-size: 13px;
-        padding: 4px 12px;
-      }
+        .behavior-label {
+          font-size: 12px;
+          color: #909399;
+          margin-bottom: 6px;
+        }
 
-      .member-type-date {
-        font-size: 12px;
-        color: #909399;
-        margin-left: auto;
+        .behavior-value {
+          font-size: 15px;
+          color: #303133;
+          font-weight: 600;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       }
     }
   }
 
-  .info-list {
-    .info-item {
+  // 消费分析布局
+  .analysis-layout {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+
+    .analysis-item {
+      flex: 1;
+      min-width: 200px;
+      background: #f8f9fa;
+      border-radius: 10px;
+      border: 1px solid #e4e7ed;
+      padding: 16px;
       display: flex;
-      padding: 6px 0;
-      border-bottom: 1px solid #f0f0f0;
+      align-items: center;
+      gap: 12px;
+      transition: all 0.3s ease;
 
-      &:last-child {
-        border-bottom: none;
+      &:hover {
+        background: #fff;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        transform: translateY(-2px);
       }
 
-      .info-label {
-        font-size: 13px;
-        color: #909399;
-        width: 90px;
+      .analysis-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 8px;
+        background: #67C23A;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        font-size: 18px;
         flex-shrink: 0;
       }
 
-      .info-value {
-        font-size: 13px;
-        color: #303133;
+      .analysis-content {
         flex: 1;
+        min-width: 0;
+
+        .analysis-label {
+          font-size: 12px;
+          color: #909399;
+          margin-bottom: 6px;
+        }
+
+        .analysis-value {
+          font-size: 15px;
+          color: #303133;
+          font-weight: 600;
+        }
       }
     }
   }
 
+  // 趋势图
   .trend-chart {
     width: 100%;
-    height: 350px;
+    height: 400px;
   }
 
+  // 分页
   .pagination-bar {
     display: flex;
     justify-content: flex-end;
-    padding: 10px 0 4px 0;
-    margin-top: 12px;
+    padding: 16px 0 0 0;
+    margin-top: 16px;
+    border-top: 1px solid #e4e7ed;
   }
 
   .text-muted {
diff --git a/门店数据页面设计方案.md b/门店数据页面设计方案.md
new file mode 100644
index 0000000..46e7108
--- /dev/null
+++ b/门店数据页面设计方案.md
@@ -0,0 +1,422 @@
+# 门店数据页面设计方案
+
+## 一、现有门店数据结构分析
+
+### 1.1 门店基础信息表 (lq_mdxx)
+
+**核心字段：**
+- **基本信息**：门店编码(mdbm)、单据门店编号(djmdbh)、店名(dm)、城市(cs)、地址(dz)
+- **联系信息**：姓名(xm)、电话号码(dhhm)、座机(zj)
+- **状态信息**：最新状态(zxzt)、开业时间(kysj)、状态(status)
+- **组织归属**：事业部(syb)、教育部(jyb)、科技部(kjb)、大项目部(dxmb)
+- **归属时间**：归属起始时间(gsqssj)、归属终止时间(gszzsj)
+- **工商信息**：工商名称(gsmc)、法人(fr)、有无社保(ywsb)
+- **门店分类**：门店类型(StoreType: 200平门店/旗舰店)、门店类别(StoreCategory: A类/B类/C类)
+- **目标设置**：
+  - 门店生命线(xsyj)
+  - 消耗业绩(xhyj)
+  - 项目数(xms)
+  - 人头1(rt1)、人头2(rt2)
+  - 人次(rc)
+- **人员信息**：在职人数(zzrs)
+
+### 1.2 门店相关业务表
+
+**开单相关：**
+- `lq_kd_kdjlb` - 开单记录表（门店业绩来源）
+- `lq_kd_pxmx` - 开单品项明细表
+- `lq_kd_jksyj` - 开单健康师业绩表
+
+**消耗相关：**
+- `lq_xh_hyhk` - 会员耗卡表（消耗业绩来源）
+- `lq_xh_pxmx` - 耗卡品项明细表
+- `lq_xh_jksyj` - 耗卡健康师业绩表
+- `lq_xh_kjbsyj` - 耗卡科技部业绩表
+
+**退卡相关：**
+- `lq_hytk_hytk` - 会员退卡表
+- `lq_tkjlb` - 退卡记录表
+
+**统计相关：**
+- `lq_statistics_store_total_performance` - 门店总业绩统计表
+- `lq_share_statistics_store` - 门店股份统计表
+
+## 二、现有门店相关接口梳理
+
+### 2.1 门店基础信息接口 (LqMdxxService)
+
+| 接口路径 | 方法 | 功能说明 |
+|---------|------|---------|
+| `/api/Extend/LqMdxx/{id}` | GET | 获取门店详细信息 |
+| `/api/Extend/LqMdxx` | GET | 获取门店列表（分页，支持多条件筛选） |
+| `/api/Extend/LqMdxx` | POST | 新建门店信息 |
+| `/api/Extend/LqMdxx/{id}` | PUT | 更新门店信息 |
+| `/api/Extend/LqMdxx/{id}/targets` | PUT | 更新门店目标字段 |
+| `/api/Extend/LqMdxx/{id}` | DELETE | 删除门店（软删除） |
+| `/api/Extend/LqMdxx/Selector` | GET | 获取门店下拉选择数据 |
+| `/api/Extend/LqMdxx/Selector/StoreCategory` | GET | 获取门店类别下拉选择 |
+| `/api/Extend/LqMdxx/Selector/StoreType` | GET | 获取门店类型下拉选择 |
+
+### 2.2 门店报表接口 (LqReportService)
+
+| 接口路径 | 方法 | 功能说明 |
+|---------|------|---------|
+| `/api/Extend/LqReport/get-store-performance-trend` | POST | 获取门店业绩趋势数据（月度/周度/日度） |
+| `/api/Extend/LqReport/get-store-performance-ranking` | POST | 获取门店业绩排行榜 |
+| `/api/Extend/LqReport/get-store-item-statistics` | POST | 获取门店项目指标统计数据 |
+| `/api/Extend/LqReport/get-store-remaining-rights` | POST | 获取门店剩余权益统计 |
+| `/api/Extend/LqReport/get-store-performance-comparison` | POST | 获取门店业绩对比数据 |
+
+### 2.3 门店日报接口 (LqDailyReportService)
+
+| 接口路径 | 方法 | 功能说明 |
+|---------|------|---------|
+| `/api/Extend/LqDailyReport/get-store-daily-statistics` | POST | 获取门店每日运营统计数据 |
+
+### 2.4 门店统计接口 (LqStatisticsService)
+
+| 接口路径 | 方法 | 功能说明 |
+|---------|------|---------|
+| `/api/Extend/LqStatistics/GetStorePerformanceList` | GET | 获取门店业绩统计列表（消耗业绩） |
+| `/api/Extend/LqStatistics/GetStoreOrderPerformanceList` | GET | 获取门店开单业绩统计列表 |
+| `/api/Extend/LqStatistics/StoreStatistics` | POST | 获取门店统计信息（支持日期范围） |
+
+## 三、门店数据页面可展示维度
+
+### 3.1 门店概览（Dashboard）
+
+**核心指标卡片：**
+1. **门店总数**：当前状态为"开店"的门店数量
+2. **本月总业绩**：所有门店本月开单业绩总和
+3. **本月消耗业绩**：所有门店本月消耗业绩总和
+4. **本月完成率**：总消耗业绩 / 总目标业绩
+5. **活跃门店数**：本月有开单或消耗的门店数量
+6. **平均单店业绩**：总业绩 / 门店数
+
+**数据来源：**
+- 门店列表：`/api/Extend/LqMdxx`
+- 业绩统计：`/api/Extend/LqStatistics/GetStoreOrderPerformanceList` 或 `/api/Extend/LqStatistics/GetStorePerformanceList`
+
+### 3.2 门店列表页
+
+**展示内容：**
+- 门店基本信息：店名、编码、城市、地址、状态
+- 门店分类：门店类型、门店类别
+- 组织归属：所属事业部/教育部/科技部/大项目部
+- 目标信息：门店生命线、消耗业绩目标、项目数目标
+- 实时业绩：本月开单业绩、本月消耗业绩、完成率
+- 运营指标：人头数、人次、项目数
+
+**功能：**
+- 多条件筛选（城市、状态、门店类型、门店类别、组织归属）
+- 排序（按业绩、完成率等）
+- 分页展示
+- 点击门店进入详情页
+
+**数据来源：**
+- 门店列表：`/api/Extend/LqMdxx`
+- 业绩数据：`/api/Extend/LqStatistics/StoreStatistics`（实时计算）
+
+### 3.3 门店详情页
+
+#### 3.3.1 门店基础信息卡片
+
+**展示内容：**
+- 门店基本信息：店名、编码、城市、地址、联系方式
+- 门店状态：最新状态、开业时间、在职人数
+- 组织归属：所属部门、归属时间范围
+- 门店分类：门店类型、门店类别
+- 目标设置：各项目标值（可编辑）
+
+**数据来源：**
+- `/api/Extend/LqMdxx/{id}`
+
+#### 3.3.2 业绩概览
+
+**核心指标：**
+- **开单业绩**：本月开单金额、开单次数、平均开单金额
+- **消耗业绩**：本月消耗金额、消耗次数、平均消耗金额
+- **完成率**：消耗业绩 / 目标业绩
+- **剩余权益**：门店会员剩余权益总额
+- **退卡情况**：退卡金额、退卡次数
+
+**数据来源：**
+- `/api/Extend/LqStatistics/StoreStatistics`
+- `/api/Extend/LqReport/get-store-remaining-rights`
+
+#### 3.3.3 业绩趋势图
+
+**展示内容：**
+- 近12个月开单业绩趋势（折线图）
+- 近12个月消耗业绩趋势（折线图）
+- 开单与消耗对比（双折线图）
+
+**数据来源：**
+- `/api/Extend/LqReport/get-store-performance-trend`
+
+#### 3.3.4 运营指标分析
+
+**展示内容：**
+- **人头数**：去重后的消费会员数
+- **人次**：日度去重客户数
+- **项目数**：消耗项目总数（原始项目数、加班项目数、陪同项目数）
+- **客单价**：消耗业绩 / 消耗人次
+- **项目单价**：消耗业绩 / 项目数
+
+**数据来源：**
+- `/api/Extend/LqDailyReport/get-store-daily-statistics`
+
+#### 3.3.5 项目指标统计
+
+**展示内容：**
+- 消耗项目数、消耗率
+- 客单项目数、消耗客单价
+- 开单金额、消耗金额
+- 消耗人次
+
+**数据来源：**
+- `/api/Extend/LqReport/get-store-item-statistics`
+
+#### 3.3.6 品项分析
+
+**展示内容：**
+- 各品项消耗金额排行（柱状图）
+- 各品项消耗次数排行
+- 品项分类占比（饼图：生美/科美/医美/产品）
+
+**数据来源：**
+- `/api/Extend/LqReport/get-store-item-statistics`（需要扩展接口支持品项明细）
+
+#### 3.3.7 每日运营数据
+
+**展示内容：**
+- 日期、人头数、人次、项目数、消耗业绩
+- 支持时间范围筛选
+- 表格展示，支持排序
+
+**数据来源：**
+- `/api/Extend/LqDailyReport/get-store-daily-statistics`
+
+#### 3.3.8 门店对比分析
+
+**展示内容：**
+- 与同类型门店对比（门店类型、门店类别）
+- 与同组织门店对比（事业部/教育部/科技部）
+- 业绩排名、完成率排名
+
+**数据来源：**
+- `/api/Extend/LqReport/get-store-performance-comparison`
+- `/api/Extend/LqReport/get-store-performance-ranking`
+
+### 3.4 门店排行榜
+
+**展示内容：**
+- 门店业绩排行榜（条形图）
+- 门店完成率排行榜
+- 门店消耗业绩排行榜
+- 支持按月份筛选
+
+**数据来源：**
+- `/api/Extend/LqReport/get-store-performance-ranking`
+
+### 3.5 门店对比分析页
+
+**展示内容：**
+- 多门店业绩对比（折线图）
+- 多门店完成率对比（柱状图）
+- 多门店运营指标对比（表格）
+
+**数据来源：**
+- `/api/Extend/LqReport/get-store-performance-comparison`
+
+## 四、页面设计方案
+
+### 4.1 页面结构
+
+```
+门店数据页面
+├── 门店概览（Dashboard）
+│   ├── 核心指标卡片（6个）
+│   ├── 门店业绩趋势图（近12个月）
+│   ├── 门店排行榜（Top 10）
+│   └── 门店分布地图（可选）
+│
+├── 门店列表
+│   ├── 筛选条件栏
+│   ├── 门店列表表格
+│   └── 分页组件
+│
+├── 门店详情（点击门店进入）
+│   ├── 基础信息卡片
+│   ├── 业绩概览卡片
+│   ├── 业绩趋势图
+│   ├── 运营指标分析
+│   ├── 项目指标统计
+│   ├── 品项分析
+│   ├── 每日运营数据表格
+│   └── 门店对比分析
+│
+└── 门店对比（多门店对比）
+    ├── 门店选择器
+    ├── 业绩对比图表
+    └── 指标对比表格
+```
+
+### 4.2 页面布局建议
+
+**参考现有页面风格：**
+- 使用卡片式布局（参考 `form9.vue` 领导驾驶舱）
+- 统一的颜色方案（主色：#409EFF）
+- 统计卡片高度100px，内边距12px，圆角12px
+- 图表使用 ECharts
+- 表格使用 NCC-table 或 Element UI Table
+
+### 4.3 交互设计
+
+**筛选功能：**
+- 时间范围选择（年月选择器）
+- 门店多选（支持全选）
+- 城市筛选
+- 门店类型/类别筛选
+- 组织归属筛选
+- 状态筛选
+
+**数据刷新：**
+- 手动刷新按钮
+- 自动刷新（可选，如每5分钟）
+
+**数据导出：**
+- 支持导出Excel
+- 支持导出PDF（可选）
+
+## 五、需要新增的接口
+
+### 5.1 门店概览数据接口
+
+**接口路径：** `/api/Extend/LqReport/get-store-overview`
+
+**功能：** 获取门店概览的核心指标数据
+
+**返回数据：**
+```json
+{
+  "totalStores": 50,
+  "activeStores": 45,
+  "monthBillingAmount": 1000000.00,
+  "monthConsumeAmount": 800000.00,
+  "completionRate": 80.00,
+  "avgStorePerformance": 20000.00
+}
+```
+
+### 5.2 门店品项明细统计接口
+
+**接口路径：** `/api/Extend/LqReport/get-store-item-detail-statistics`
+
+**功能：** 获取门店各品项的消耗统计（用于品项分析）
+
+**参数：**
+- storeId: 门店ID
+- startTime: 开始时间
+- endTime: 结束时间
+
+**返回数据：**
+```json
+{
+  "storeId": "xxx",
+  "storeName": "xxx",
+  "items": [
+    {
+      "itemId": "xxx",
+      "itemName": "xxx",
+      "itemCategory": "生美",
+      "consumeAmount": 10000.00,
+      "consumeCount": 50,
+      "consumeQuantity": 100
+    }
+  ]
+}
+```
+
+### 5.3 门店多维度对比接口（扩展）
+
+**接口路径：** `/api/Extend/LqReport/get-store-multi-comparison`
+
+**功能：** 支持多门店、多指标、多时间段的对比分析
+
+## 六、技术实现建议
+
+### 6.1 前端组件
+
+**主要组件：**
+- `store-dashboard.vue` - 门店概览页
+- `store-list.vue` - 门店列表页
+- `store-detail.vue` - 门店详情页
+- `store-comparison.vue` - 门店对比页
+- `store-stat-card.vue` - 统计卡片组件（可复用）
+- `store-trend-chart.vue` - 趋势图组件（可复用）
+
+### 6.2 后端服务
+
+**建议创建：** `StoreDataService.cs` 专门用于门店数据统计
+
+**职责：**
+- 聚合多个数据源的统计结果
+- 提供统一的门店数据查询接口
+- 缓存常用统计数据（提升性能）
+
+### 6.3 数据缓存策略
+
+**建议：**
+- 门店基础信息：缓存30分钟
+- 门店业绩数据：缓存10分钟（实时性要求高）
+- 门店趋势数据：缓存1小时（历史数据变化少）
+
+## 七、开发优先级建议
+
+### 第一阶段（核心功能）
+1. ✅ 门店列表页（基础信息展示、筛选、排序）
+2. ✅ 门店详情页（基础信息、业绩概览、趋势图）
+3. ✅ 门店概览Dashboard（核心指标卡片）
+
+### 第二阶段（增强功能）
+4. ✅ 门店运营指标分析
+5. ✅ 门店项目指标统计
+6. ✅ 门店排行榜
+
+### 第三阶段（高级功能）
+7. ✅ 门店品项分析
+8. ✅ 门店对比分析
+9. ✅ 门店每日运营数据表格
+
+### 第四阶段（优化功能）
+10. ✅ 数据导出功能
+11. ✅ 数据缓存优化
+12. ✅ 性能优化
+
+## 八、注意事项
+
+### 8.1 数据权限
+- 需要根据用户组织权限过滤门店数据
+- 参考现有权限控制逻辑（如 `LqZjlMdsmxszService.GetManagedStores`）
+
+### 8.2 数据一致性
+- 统计数据和列表数据使用相同的过滤条件
+- 时间范围、门店筛选保持一致
+
+### 8.3 性能优化
+- 大数据量查询使用分页
+- 复杂统计查询考虑使用统计表（如 `lq_statistics_store_total_performance`）
+- 避免N+1查询问题
+
+### 8.4 数据准确性
+- 确保统计逻辑与业务逻辑一致
+- 注意 `F_IsEffective = 1` 的有效数据过滤
+- 注意门店状态过滤（`zxzt = '开店'`）
+
+## 九、参考现有页面
+
+- **领导驾驶舱** (`form9.vue`) - 参考布局和样式
+- **会员画像** (`member-portrait-dialog.vue`) - 参考详情页设计
+- **KPI数据穿透** (`kpi-drill-dialog.vue`) - 参考数据展示方式
+
--
libgit2 0.21.4