From b6184b4fecc01ea57423812d2e2d5fb4d198c946 Mon Sep 17 00:00:00 2001
From: huangzhenbao <17818024429@163.com>
Date: Fri, 6 Feb 2026 16:37:21 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=83=A8=E5=88=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/admin/AdminLayout.uvue                | 11 ++++-
 layouts/admin/styles/admin-responsive.css     | 33 ++++++++++++++
 pages/mall/admin/marketing-management.uvue    | 28 +++++-------
 pages/mall/admin/order-management.uvue        | 28 +++++-------
 pages/mall/admin/order/list.uvue              | 24 +++-------
 .../product/product-statistics/index.uvue     | 27 ++++-------
 pages/mall/admin/setting/system/config.uvue   | 15 ++++---
 pages/mall/admin/user/management/index.uvue   | 24 +++-------
 pages/mall/admin/user/statistics/index.uvue   | 45 +++++++------------
 9 files changed, 109 insertions(+), 126 deletions(-)

diff --git a/layouts/admin/AdminLayout.uvue b/layouts/admin/AdminLayout.uvue
index 0f8ecc18..40c95cb7 100644
--- a/layouts/admin/AdminLayout.uvue
+++ b/layouts/admin/AdminLayout.uvue
@@ -407,6 +407,11 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .layout-root {
+  --admin-page-padding-desktop: 12px;
+  --admin-page-padding-mobile: 8px;
+  --admin-section-gap: 12px;
+  --admin-card-padding: 16px;
+
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -491,10 +496,12 @@ onMounted(() => {
 
 .content-inner {
   min-height: calc(100vh - 120px);
-  padding: 12px;
+  padding: var(--admin-page-padding-desktop);
+  display: flex;
+  flex-direction: column;
 }
 
 .content-inner.is-mobile {
-  padding: 8px;
+  padding: var(--admin-page-padding-mobile);
 }
 </style>
diff --git a/layouts/admin/styles/admin-responsive.css b/layouts/admin/styles/admin-responsive.css
index 9d8f6141..52c6dda8 100644
--- a/layouts/admin/styles/admin-responsive.css
+++ b/layouts/admin/styles/admin-responsive.css
@@ -61,3 +61,36 @@
     grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   }
 }
+
+/* ===== 后台通用紧凑布局规范 (CRMEB 1:1) ===== */
+
+/* 页面根容器: 去除各页面自带的 padding，由 Layout 统一管理 */
+.admin-page {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* 垂直区块容器: 统一控制卡片、组件之间的间距 */
+.admin-sections {
+  display: flex;
+  flex-direction: column;
+  gap: var(--admin-section-gap);
+  width: 100%;
+}
+
+/* 通用网格: 用于图表布局等 */
+.admin-grid {
+  display: grid;
+  gap: var(--admin-section-gap);
+  width: 100%;
+}
+
+/* 统一卡片内部间距: 替代业务组件或页面内硬编码的 padding */
+.admin-card {
+  padding: var(--admin-card-padding) !important;
+  background: #ffffff;
+  border-radius: 4px;
+}
diff --git a/pages/mall/admin/marketing-management.uvue b/pages/mall/admin/marketing-management.uvue
index 9921de20..57e1ddcd 100644
--- a/pages/mall/admin/marketing-management.uvue
+++ b/pages/mall/admin/marketing-management.uvue
@@ -1,14 +1,16 @@
 <template>
   <AdminLayout currentPage="marketing">
-      <view class="Page">
-      <view class="Header">
-        <text class="Title">营销管理</text>
-        <text class="SubTitle">marketing-management</text>
-      </view>
+    <view class="admin-page">
+      <view class="admin-sections">
+        <view class="admin-card Header">
+          <text class="Title">营销管理</text>
+          <text class="SubTitle">marketing-management</text>
+        </view>
 
-      <view class="Card">
-        <text class="Label">页面参数（query）</text>
-        <text class="Mono">{{ params }}</text>
+        <view class="admin-card Card">
+          <text class="Label">页面参数（query）</text>
+          <text class="Mono">{{ params }}</text>
+        </view>
       </view>
     </view>
   </AdminLayout>
@@ -27,13 +29,7 @@ onLoad((options) => {
 </script>
 
 <style>
-.Page {
-  padding: 24rpx;
-}
 .Header {
-  padding: 24rpx;
-  border-radius: 16rpx;
-  background: #ffffff;
 }
 .Title {
   font-size: 36rpx;
@@ -45,10 +41,6 @@ onLoad((options) => {
   opacity: 0.7;
 }
 .Card {
-  margin-top: 24rpx;
-  padding: 24rpx;
-  border-radius: 16rpx;
-  background: #ffffff;
 }
 .Label {
   font-size: 26rpx;
diff --git a/pages/mall/admin/order-management.uvue b/pages/mall/admin/order-management.uvue
index 776621fe..71eba904 100644
--- a/pages/mall/admin/order-management.uvue
+++ b/pages/mall/admin/order-management.uvue
@@ -1,14 +1,16 @@
 <template>
   <AdminLayout :currentPage="currentPage">
-      <view class="Page">
-      <view class="Header">
-        <text class="Title">订单</text>
-        <text class="SubTitle">order-management</text>
-      </view>
+    <view class="admin-page">
+      <view class="admin-sections">
+        <view class="admin-card Header">
+          <text class="Title">订单</text>
+          <text class="SubTitle">order-management</text>
+        </view>
 
-      <view class="Card">
-        <text class="Label">页面参数（query）</text>
-        <text class="Mono">{{ params }}</text>
+        <view class="admin-card Card">
+          <text class="Label">页面参数（query）</text>
+          <text class="Mono">{{ params }}</text>
+        </view>
       </view>
     </view>
   </AdminLayout>
@@ -33,13 +35,7 @@ onLoad((options: Record<string, string>) => {
 </script>
 
 <style>
-.Page {
-  padding: 24rpx;
-}
 .Header {
-  padding: 24rpx;
-  border-radius: 16rpx;
-  background: #ffffff;
 }
 .Title {
   font-size: 36rpx;
@@ -51,10 +47,6 @@ onLoad((options: Record<string, string>) => {
   opacity: 0.7;
 }
 .Card {
-  margin-top: 24rpx;
-  padding: 24rpx;
-  border-radius: 16rpx;
-  background: #ffffff;
 }
 .Label {
   font-size: 26rpx;
diff --git a/pages/mall/admin/order/list.uvue b/pages/mall/admin/order/list.uvue
index cb94c635..f646c182 100644
--- a/pages/mall/admin/order/list.uvue
+++ b/pages/mall/admin/order/list.uvue
@@ -1,8 +1,9 @@
 <template>
-  <view class="order-list-page">
-    <!-- 筛选区域 -->
-    <view class="filter-card">
-      <view class="filter-row">
+  <view class="admin-page">
+    <view class="admin-sections">
+      <!-- 筛选区域 -->
+      <view class="admin-card filter-card">
+        <view class="filter-row">
         <view class="filter-item">
           <text class="label">订单类型：</text>
           <view class="mock-select">
@@ -42,7 +43,7 @@
     </view>
 
     <!-- 列表数据区域 -->
-    <view class="content-card">
+    <view class="admin-card content-card">
       <!-- 状态 Tabs -->
       <view class="status-tabs">
         <view 
@@ -133,6 +134,7 @@
         </view>
       </view>
     </view>
+    </view>
   </view>
 </template>
 
@@ -222,17 +224,7 @@ const orderData = ref([
 </script>
 
 <style scoped lang="scss">
-.order-list-page {
-  padding: 16px;
-  background-color: #f0f2f5;
-  min-height: 100vh;
-}
-
 .filter-card {
-  background-color: #fff;
-  padding: 24px;
-  border-radius: 4px;
-  margin-bottom: 16px;
 }
 
 .filter-row {
@@ -338,8 +330,6 @@ const orderData = ref([
 .btn-default { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; }
 
 .content-card {
-  background-color: #fff;
-  border-radius: 4px;
 }
 
 .status-tabs {
diff --git a/pages/mall/admin/product/product-statistics/index.uvue b/pages/mall/admin/product/product-statistics/index.uvue
index 07760492..304e3d8b 100644
--- a/pages/mall/admin/product/product-statistics/index.uvue
+++ b/pages/mall/admin/product/product-statistics/index.uvue
@@ -1,7 +1,8 @@
 <template>
-  <view class="product-statistic-page">
-    <!-- 商品概况头部 -->
-    <view class="page-header-row">
+  <view class="admin-page">
+    <view class="admin-sections">
+      <!-- 商品概况头部 -->
+      <view class="admin-card page-header-row">
       <view class="title-wrap">
         <text class="page-title">商品概况</text>
         <view class="info-icon">?</view>
@@ -18,7 +19,7 @@
 
     <!-- 统计指标网格 (使用统一响应式网格) -->
     <view class="kpi-grid">
-      <view v-for="(item, index) in statItems" :key="index" class="stat-card">
+      <view v-for="(item, index) in statItems" :key="index" class="admin-card stat-card">
         <view class="stat-main">
           <view class="icon-box" :style="{ backgroundColor: item.bgColor }">
             <text class="stat-emoji">{{ item.emoji }}</text>
@@ -41,7 +42,7 @@
     </view>
 
     <!-- 图表卡片 -->
-    <view class="chart-card">
+    <view class="admin-card chart-card">
       <view class="chart-header">
         <view class="legend-wrap">
           <view class="legend-item"><view class="dot purple"></view><text>商品浏览量</text></view>
@@ -59,7 +60,7 @@
     </view>
 
     <!-- 商品排行 -->
-    <view class="ranking-card">
+    <view class="admin-card ranking-card">
       <view class="ranking-header">
         <text class="ranking-title">商品排行</text>
         <view class="ranking-filters">
@@ -108,6 +109,7 @@
         </view>
       </view>
     </view>
+    </view>
   </view>
 </template>
 
@@ -314,18 +316,11 @@ function initChart() {
 </script>
 
 <style scoped lang="scss">
-.product-statistic-page {
-  padding: 16px;
-  background-color: #f0f2f5;
-  min-height: 100vh;
-}
-
 .page-header-row {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
 }
 
 .title-wrap {
@@ -369,9 +364,6 @@ function initChart() {
 
 /* stat-grid 已废弃，由全局 kpi-grid 接管 */
 .stat-card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
   min-width: 0; 
 }
 
@@ -412,9 +404,6 @@ function initChart() {
 .arrow { font-size: 10px; margin-left: 2px; }
 
 .chart-card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 24px;
 }
 
 .chart-header {
diff --git a/pages/mall/admin/setting/system/config.uvue b/pages/mall/admin/setting/system/config.uvue
index e2e14b17..6d9ac126 100644
--- a/pages/mall/admin/setting/system/config.uvue
+++ b/pages/mall/admin/setting/system/config.uvue
@@ -1,8 +1,9 @@
 <template>
-  <view class="system-settings-page">
-    <view class="settings-card">
-      <!-- 顶部导航标签 (1:1 复刻 CRMEB: 横向排列) -->
-      <view class="tabs-container">
+  <view class="admin-page">
+    <view class="admin-sections">
+      <view class="admin-card settings-card">
+        <!-- 顶部导航标签 (1:1 复刻 CRMEB: 横向排列) -->
+        <view class="tabs-container">
         <scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false" :enable-flex="true">
           <view class="tabs-bar">
             <view 
@@ -225,6 +226,7 @@
         </view>
       </view>
     </view>
+    </view>
   </view>
 </template>
 
@@ -277,8 +279,9 @@ const handleSubmit = () => {
 </script>
 
 <style scoped>
-.system-settings-page { padding: 20px; background-color: #f5f7f9; min-height: 100vh; }
-.settings-card { background-color: #fff; border-radius: 4px; padding: 20px; box-shadow: 0 1px 4px rgba(0,21,41,0.08); }
+.settings-card {
+  box-shadow: 0 1px 4px rgba(0,21,41,0.08);
+}
 
 /* 核心修复：确保 Tabs 横向排列并且可以滑动 */
 .tabs-container { margin-bottom: 30px; border-bottom: 1px solid #e8eaec; width: 100%; overflow: hidden; }
diff --git a/pages/mall/admin/user/management/index.uvue b/pages/mall/admin/user/management/index.uvue
index 36de2d25..bee23ddf 100644
--- a/pages/mall/admin/user/management/index.uvue
+++ b/pages/mall/admin/user/management/index.uvue
@@ -1,8 +1,9 @@
 <template>
-  <view class="user-list-page">
-    <!-- 筛选面板 -->
-    <view class="filter-card">
-      <view class="filter-row">
+  <view class="admin-page">
+    <view class="admin-sections">
+      <!-- 筛选面板 -->
+      <view class="admin-card filter-card">
+        <view class="filter-row">
         <view class="filter-item">
           <text class="label">用户搜索：</text>
           <view class="input-group">
@@ -39,7 +40,7 @@
     </view>
 
     <!-- 内容卡片 -->
-    <view class="content-card">
+    <view class="admin-card content-card">
       <!-- 平台切换 Tabs -->
       <view class="tabs-row">
         <view 
@@ -143,6 +144,7 @@
       </view>
     </view>
   </view>
+</view>
 </template>
 
 <script setup lang="uts">
@@ -183,18 +185,8 @@ function onDetail(user: any) {
 </script>
 
 <style scoped lang="scss">
-.user-list-page {
-  padding: 16px;
-  background-color: #f0f2f5;
-  min-height: 100vh;
-}
-
 /* 筛选卡片 */
 .filter-card {
-  background: #fff;
-  border-radius: 4px;
-  padding: 24px;
-  margin-bottom: 16px;
 }
 
 .filter-row {
@@ -307,8 +299,6 @@ function onDetail(user: any) {
 
 /* 内容卡片 */
 .content-card {
-  background: #fff;
-  border-radius: 4px;
   padding: 0;
   overflow: visible; /* 必须 visible 以显示下拉菜单 */
 }
diff --git a/pages/mall/admin/user/statistics/index.uvue b/pages/mall/admin/user/statistics/index.uvue
index eac33535..d9bfca71 100644
--- a/pages/mall/admin/user/statistics/index.uvue
+++ b/pages/mall/admin/user/statistics/index.uvue
@@ -1,9 +1,10 @@
 <template>
-  <view class="statistic-page">
-    <!-- 筛选栏 -->
-    <view class="filter-card">
-      <view class="filter-item">
-        <text class="filter-label">用户渠道：</text>
+  <view class="admin-page">
+    <view class="admin-sections">
+      <!-- 筛选栏 -->
+      <view class="admin-card filter-card">
+        <view class="filter-item">
+          <text class="filter-label">用户渠道：</text>
         <view class="select-box">
           <text class="select-text">全部</text>
           <text class="select-arrow">▼</text>
@@ -25,7 +26,7 @@
     </view>
 
     <!-- 用户概况卡片区 (使用 6-2-1 响应式网格) -->
-    <view class="section-card">
+    <view class="admin-card section-card">
       <view class="section-header">
         <text class="section-title">用户概况</text>
         <text class="info-icon">❓</text>
@@ -66,13 +67,14 @@
       </view>
     </view>
 
-    <!-- 地域分布与性别比例 -->
-    <view class="analysis-row">
-      <view class="map-col">
-        <AnalyticsUserMapTable />
-      </view>
-      <view class="gender-col">
-        <AnalyticsUserGenderSection />
+      <!-- 地域分布与性别比例 -->
+      <view class="analysis-row">
+        <view class="map-col">
+          <AnalyticsUserMapTable />
+        </view>
+        <view class="gender-col">
+          <AnalyticsUserGenderSection />
+        </view>
       </view>
     </view>
   </view>
@@ -114,21 +116,11 @@ function onExport() {
 </script>
 
 <style scoped>
-.statistic-page {
-  padding: 16px;
-  background-color: #f0f2f5;
-  min-height: 100vh;
-}
-
 .filter-card {
-  background-color: #fff;
-  border-radius: 4px;
-  padding: 16px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 32px;
-  margin-bottom: 16px;
 }
 
 .filter-item {
@@ -200,10 +192,6 @@ function onExport() {
 }
 
 .section-card {
-  background-color: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 20px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
 }
 
@@ -296,8 +284,7 @@ function onExport() {
 .analysis-row {
   display: grid;
   grid-template-columns: 2fr 1fr;
-  gap: 20px;
-  margin-top: 16px;
+  gap: var(--admin-section-gap);
   width: 100%;
 }