diff --git a/components/analytics/AnalyticsMultiLineChart.uvue b/components/analytics/AnalyticsMultiLineChart.uvue
new file mode 100644
index 00000000..b044bb4e
--- /dev/null
+++ b/components/analytics/AnalyticsMultiLineChart.uvue
@@ -0,0 +1,123 @@
+<template>
+  <view class="chart-wrap" :style="{ height: heightPx }">
+    <EChartsView :option="chartOption" class="chart" />
+  </view>
+</template>
+
+<script lang="uts">
+import EChartsView from '@/uni_modules/charts/EChartsView.vue'
+
+export default {
+  components: {
+    EChartsView
+  },
+  props: {
+    xLabels: { type: Array, default: () => [] },
+    series: { type: Array, default: () => [] },
+    height: { type: Number, default: 400 }
+  },
+  data() {
+    return {
+      heightPx: '400px',
+      chartOption: {} as any
+    }
+  },
+  watch: {
+    xLabels: { handler() { this.updateOption() }, deep: true },
+    series: { handler() { this.updateOption() }, deep: true },
+    height: { 
+      handler() { 
+        this.heightPx = `${this.height}px`
+      } 
+    }
+  },
+  mounted() {
+    this.heightPx = `${this.height}px`
+    setTimeout(() => {
+      this.updateOption()
+    }, 200)
+  },
+  methods: {
+    toPlainObject(obj: any): any {
+      if (obj == null) return null
+      if (typeof obj !== 'object') return obj
+      if (Array.isArray(obj)) {
+        return obj.map((item) => this.toPlainObject(item))
+      }
+      const plain: any = {}
+      for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          const value = obj[key]
+          if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
+            continue
+          }
+          if (value != null && typeof value === 'object' && !Array.isArray(value)) {
+            let isSimple = true
+            for (const k in value) {
+              if (typeof value[k] === 'object' && value[k] !== null) {
+                isSimple = false
+                break
+              }
+            }
+            plain[key] = isSimple ? { ...value } : this.toPlainObject(value)
+          } else {
+            plain[key] = value
+          }
+        }
+      }
+      return plain
+    },
+    updateOption() {
+      if (!this.xLabels || this.xLabels.length === 0) return
+
+      const seriesData = (this.series as Array<any>).map(s => {
+        return {
+          name: s.name,
+          type: 'line',
+          smooth: true,
+          symbolSize: 6,
+          itemStyle: { color: s.color },
+          lineStyle: { width: 2 },
+          data: s.data
+        }
+      })
+
+      const option = {
+        grid: { left: 50, right: 30, top: 20, bottom: 40 },
+        tooltip: { trigger: 'axis' },
+        legend: {
+          top: 0,
+          left: 'center',
+          itemWidth: 12,
+          itemHeight: 2,
+          textStyle: { fontSize: 12, color: '#333' }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.xLabels,
+          axisLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+          axisLabel: { 
+            color: 'rgba(0,0,0,0.45)', 
+            fontSize: 10,
+            rotate: 45
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: { show: false },
+          splitLine: { lineStyle: { color: 'rgba(0,0,0,0.05)' } },
+          axisLabel: { color: 'rgba(0,0,0,0.45)', fontSize: 10 }
+        },
+        series: seriesData
+      }
+      this.chartOption = this.toPlainObject(option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-wrap { width: 100%; position: relative; overflow: hidden; }
+.chart { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
+</style>
diff --git a/components/analytics/AnalyticsUserGenderSection.uvue b/components/analytics/AnalyticsUserGenderSection.uvue
new file mode 100644
index 00000000..41f67ab7
--- /dev/null
+++ b/components/analytics/AnalyticsUserGenderSection.uvue
@@ -0,0 +1,176 @@
+<template>
+  <view class="gender-card">
+    <view class="card-header">
+      <text class="title">用户性别比例</text>
+    </view>
+    
+    <view class="card-content">
+      <view class="chart-container">
+        <EChartsView :option="chartOption" class="donut-chart" />
+        <view class="center-text">
+          <text class="total-label">总用户数</text>
+          <text class="total-value">{{ totalUsers }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+import EChartsView from '@/uni_modules/charts/EChartsView.vue'
+
+export default {
+  components: {
+    EChartsView
+  },
+  data() {
+    return {
+      totalUsers: 525,
+      chartOption: {} as any
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.initChart()
+    }, 200)
+  },
+  methods: {
+    initChart() {
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}: {c} ({d}%)'
+        },
+        legend: {
+          top: '0%',
+          left: 'center',
+          icon: 'rect',
+          itemWidth: 15,
+          itemHeight: 15,
+          textStyle: {
+            fontSize: 12,
+            color: '#666'
+          }
+        },
+        series: [
+          {
+            name: '性别比例',
+            type: 'pie',
+            radius: ['50%', '75%'],
+            center: ['50%', '60%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 450, name: '未知', itemStyle: { color: '#999999' } },
+              { value: 50, name: '男', itemStyle: { color: '#3b82f6' } },
+              { value: 25, name: '女', itemStyle: { color: '#f97316' } }
+            ]
+          }
+        ]
+      }
+      this.chartOption = this.toPlainObject(option)
+    },
+    toPlainObject(obj: any): any {
+      if (obj == null) return null
+      if (typeof obj !== 'object') return obj
+      if (Array.isArray(obj)) {
+        return obj.map((item) => this.toPlainObject(item))
+      }
+      const plain: any = {}
+      for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          const value = obj[key]
+          if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
+            continue
+          }
+          if (value != null && typeof value === 'object' && !Array.isArray(value)) {
+            let isSimple = true
+            for (const k in value) {
+              if (typeof value[k] === 'object' && value[k] !== null) {
+                isSimple = false
+                break
+              }
+            }
+            plain[key] = isSimple ? { ...value } : this.toPlainObject(value)
+          } else {
+            plain[key] = value
+          }
+        }
+      }
+      return plain
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.gender-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 20px;
+  height: 521px;
+}
+
+.card-header {
+  margin-bottom: 20px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.card-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 400px;
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.donut-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.center-text {
+  position: absolute;
+  top: 60%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: none;
+}
+
+.total-label {
+  font-size: 14px;
+  color: #999;
+  margin-bottom: 4px;
+}
+
+.total-value {
+  font-size: 28px;
+  font-weight: bold;
+  color: #333;
+}
+</style>
diff --git a/components/analytics/AnalyticsUserMapTable.uvue b/components/analytics/AnalyticsUserMapTable.uvue
new file mode 100644
index 00000000..c3a5311e
--- /dev/null
+++ b/components/analytics/AnalyticsUserMapTable.uvue
@@ -0,0 +1,242 @@
+<template>
+  <view class="user-map-card">
+    <view class="card-header">
+      <text class="title">用户地域分布</text>
+    </view>
+    
+    <view class="card-content">
+      <!-- 左侧地图 -->
+      <view class="map-section">
+        <EChartsView :option="mapOption" class="map-chart" />
+      </view>
+      
+      <!-- 右侧表格 -->
+      <view class="table-section">
+        <view class="table-header">
+          <text class="th province">TOP省份</text>
+          <text class="th count">累积用户数</text>
+          <text class="th count">新增用户数</text>
+          <text class="th count">访客数</text>
+          <text class="th amount">支付金额</text>
+        </view>
+        <scroll-view class="table-body" scroll-y="true">
+          <view v-for="(item, index) in tableData" :key="index" class="table-row">
+            <text class="td province">{{ item.name }}</text>
+            <text class="td count">{{ item.total }}</text>
+            <text class="td count">{{ item.newUsers }}</text>
+            <text class="td count">{{ item.visitors }}</text>
+            <text class="td amount">{{ item.amount }}</text>
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+import EChartsView from '@/uni_modules/charts/EChartsView.vue'
+
+type RegionData = {
+  name: string
+  total: number
+  newUsers: number
+  visitors: number
+  amount: number
+}
+
+export default {
+  components: {
+    EChartsView
+  },
+  data() {
+    return {
+      mapOption: {} as any,
+      tableData: [
+        { name: '未知', total: 55398, newUsers: 463, visitors: 1112, amount: 287460.5 },
+        { name: '广东', total: 2697, newUsers: 0, visitors: 9, amount: 0 },
+        { name: '北京', total: 1058, newUsers: 0, visitors: 4, amount: 0 },
+        { name: '河南', total: 823, newUsers: 0, visitors: 3, amount: 0 },
+        { name: '福建', total: 799, newUsers: 0, visitors: 4, amount: 0 },
+        { name: '山东', total: 792, newUsers: 0, visitors: 0, amount: 0 },
+        { name: '浙江', total: 780, newUsers: 0, visitors: 1, amount: 0 },
+        { name: '江苏', total: 779, newUsers: 0, visitors: 4, amount: 0 },
+        { name: '四川', total: 768, newUsers: 0, visitors: 3, amount: 0 },
+        { name: '湖南', total: 520, newUsers: 0, visitors: 2, amount: 0 },
+        { name: '湖北', total: 480, newUsers: 0, visitors: 1, amount: 0 }
+      ] as Array<RegionData>
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.initMap()
+    }, 200)
+  },
+  methods: {
+    initMap() {
+      // 提取地图数据
+      const data = this.tableData.filter(it => it.name !== '未知').map(it => ({
+        name: it.name,
+        value: it.total
+      }))
+
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}<br/>累积用户: {c}'
+        },
+        visualMap: {
+          min: 0,
+          max: 3000,
+          left: 'left',
+          top: 'bottom',
+          text: ['高', '低'],
+          inRange: {
+            color: ['#fff7ed', '#fbbf24', '#f59e0b', '#d97706']
+          },
+          calculable: true
+        },
+        geo: {
+          map: 'china',
+          roam: false,
+          zoom: 1.2,
+          emphasis: {
+            itemStyle: {
+              areaColor: '#f97316'
+            },
+            label: {
+              show: true
+            }
+          },
+          itemStyle: {
+            areaColor: '#f8fafc',
+            borderColor: '#e2e8f0'
+          }
+        },
+        series: [
+          {
+            name: '用户数',
+            type: 'map',
+            geoIndex: 0,
+            data: data
+          }
+        ]
+      }
+      this.mapOption = this.toPlainObject(option)
+    },
+    toPlainObject(obj: any): any {
+      if (obj == null) return null
+      if (typeof obj !== 'object') return obj
+      if (Array.isArray(obj)) {
+        return obj.map((item) => this.toPlainObject(item))
+      }
+      const plain: any = {}
+      for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          const value = obj[key]
+          if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
+            continue
+          }
+          if (value != null && typeof value === 'object' && !Array.isArray(value)) {
+            let isSimple = true
+            for (const k in value) {
+              if (typeof value[k] === 'object' && value[k] !== null) {
+                isSimple = false
+                break
+              }
+            }
+            plain[key] = isSimple ? { ...value } : this.toPlainObject(value)
+          } else {
+            plain[key] = value
+          }
+        }
+      }
+      return plain
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.user-map-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 16px;
+}
+
+.card-header {
+  margin-bottom: 20px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: row;
+  height: 450px;
+}
+
+.map-section {
+  flex: 4;
+  height: 100%;
+}
+
+.map-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.table-section {
+  flex: 6;
+  display: flex;
+  flex-direction: column;
+  padding-left: 20px;
+}
+
+.table-header {
+  display: flex;
+  flex-direction: row;
+  background: #f8faff;
+  padding: 12px 0;
+  border-bottom: 1px solid #eef2f7;
+}
+
+.table-body {
+  flex: 1;
+  height: 0;
+}
+
+.table-row {
+  display: flex;
+  flex-direction: row;
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f2f5;
+  
+  &:hover {
+    background: #f9fbff;
+  }
+}
+
+.th, .td {
+  font-size: 13px;
+  color: #666;
+  text-align: center;
+}
+
+.province { flex: 1.5; text-align: left; padding-left: 15px; }
+.count { flex: 1.5; }
+.amount { flex: 2; }
+
+.th {
+  color: #333;
+  font-weight: 500;
+}
+
+.td {
+  color: #666;
+}
+</style>
diff --git a/layouts/admin/AdminLayout.uvue b/layouts/admin/AdminLayout.uvue
index 3dc66dd2..1b0e05e1 100644
--- a/layouts/admin/AdminLayout.uvue
+++ b/layouts/admin/AdminLayout.uvue
@@ -47,12 +47,12 @@
       />
 
       <!-- 内容展示区 (内部路由渲染) -->
-      <scroll-view class="content" scroll-y="true">
+      <view class="content-scroll">
         <view class="content-inner">
           <component :is="currentComponent" />
         </view>
         <AdminFooter />
-      </scroll-view>
+      </view>
     </view>
   </view>
 </template>
@@ -215,8 +215,9 @@ onMounted(() => {
   background: #f0f2f5;
 }
 
-.content {
+.content-scroll {
   flex: 1;
+  overflow-y: scroll;
   background: #f0f2f5;
 }
 
diff --git a/layouts/admin/components/AdminAside.uvue b/layouts/admin/components/AdminAside.uvue
index 612834c9..a662125d 100644
--- a/layouts/admin/components/AdminAside.uvue
+++ b/layouts/admin/components/AdminAside.uvue
@@ -4,7 +4,7 @@
       <text class="logo-text">{{ collapsed ? 'M' : 'MALL' }}</text>
     </view>
 
-    <scroll-view class="aside-menu" scroll-y="true">
+    <view class="aside-menu">
       <view 
         v-for="menu in topMenus" 
         :key="menu.id"
@@ -19,7 +19,7 @@
           <text>{{ menu.title }}</text>
         </view>
       </view>
-    </scroll-view>
+    </view>
 
     <view class="aside-footer" @click="onToggle">
       <view class="toggle-btn">
@@ -46,15 +46,16 @@ const emit = defineEmits<{
 
 function getIconText(icon: string): string {
   const iconMap: Record<string, string> = {
-    'home': 'H',
-    'user': 'U',
-    'product': 'P',
-    'order': 'O',
-    'marketing': 'M',
-    'content': 'C',
-    'finance': 'F',
-    'statistic': 'S',
-    'setting': 'T'
+    'home': '🏠',
+    'user': '👥',
+    'product': '📦',
+    'order': '📜',
+    'marketing': '📉',
+    'content': '📝',
+    'finance': '💰',
+    'statistic': '📊',
+    'setting': '⚙️',
+    'maintenance': '🛠️'
   }
   return iconMap[icon] || icon.charAt(0).toUpperCase()
 }
@@ -107,6 +108,7 @@ function onLogoClick(): void {
 .aside-menu {
   flex: 1;
   padding: 8px 0;
+  overflow-y: scroll;
 }
 
 .menu-item {
diff --git a/layouts/admin/components/AdminAside_old.uvue.bak b/layouts/admin/components/AdminAside_old.uvue.bak
deleted file mode 100644
index 59073afb..00000000
--- a/layouts/admin/components/AdminAside_old.uvue.bak
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <view 
-    class="aside"
-    :style="{ width: asideWidth + 'px' }"
-  >
-    <view class="aside-header">
-      <view class="logo">
-        <text class="logo-text"> 商城后台</text>
-      </view>
-    </view>
-
-    <view class="aside-menu">
-      <view
-        v-for="m in menuList"
-        :key="m.id"
-        class="aside-item"
-        :class="{ active: activeMenuId === m.id }"
-        @click="$emit('menu-click', m.id)"
-      >
-        <image class="aside-icon" :src="m.icon" mode="aspectFit" />
-        <text class="aside-title" v-if="!collapsed">{{ m.title }}</text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="uts">
-import type { MenuItem } from '../types.uts'
-
-defineProps<{
-  collapsed: boolean
-  menuList: MenuItem[]
-  activeMenuId: string
-  asideWidth:number
-}>()
-
-defineEmits<{
-  (e:'menu-click', menuId: string): void
-}>()
-</script>
-
-<style>
-.aside{
-  background: #1f2a37;
-  height: 100vh;
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  display:flex;
-  flex-direction: column;
-  z-index: 1000;
-}
-.aside-header{
-  height: 56px;
-  display:flex;
-  flex-direction:row;
-  align-items:center;
-  justify-content: space-between;
-  padding: 0 12px;
-  border-bottom: 1px solid rgba(255,255,255,0.08);
-}
-.logo-text{ 
-  color:#fff; 
-  font-size:20px; 
-  font-weight:600; 
-  display:flex;
-  justify-content:center;
-  align-items:center;
-  text-align:center;
-}
-.collapse-btn{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
-.collapse-text{ color:rgba(255,255,255,0.7); }
-
-.aside-menu{ padding: 8px 0; }
-.aside-item{
-  height: 54px;
-  display:flex;
-  flex-direction: column;
-  align-items:center;
-  justify-content:center;
-  gap: 6px;
-  margin: 6px 10px;
-  border-radius: 8px;
-}
-.aside-item.active{ background:#1677ff; }
-.aside-icon{ width:22px; height:22px; }
-.aside-title{ color:#fff; font-size:12px; }
-</style>
diff --git a/layouts/admin/components/AdminSubsider.uvue b/layouts/admin/components/AdminSubsider.uvue
index 1b621580..076e4f3b 100644
--- a/layouts/admin/components/AdminSubsider.uvue
+++ b/layouts/admin/components/AdminSubsider.uvue
@@ -4,7 +4,7 @@
       <text class="header-title">{{ topMenuTitle }}</text>
     </view>
 
-    <scroll-view class="subsider-menu" scroll-y="true">
+    <view class="subsider-menu">
       <view v-for="group in groups" :key="group.id" class="menu-group">
         <view class="group-title">
           <text>{{ group.title }}</text>
@@ -20,7 +20,7 @@
           <text class="item-title">{{ route.title }}</text>
         </view>
       </view>
-    </scroll-view>
+    </view>
   </view>
 </template>
 
@@ -79,6 +79,7 @@ function onRouteClick(routeId: string): void {
 .subsider-menu {
   flex: 1;
   padding: 8px 0;
+  overflow-y: scroll;
 }
 
 .menu-group {
diff --git a/layouts/admin/components/AdminSubsider_old.uvue.bak b/layouts/admin/components/AdminSubsider_old.uvue.bak
deleted file mode 100644
index a4d60bb7..00000000
--- a/layouts/admin/components/AdminSubsider_old.uvue.bak
+++ /dev/null
@@ -1,396 +0,0 @@
-<template>
-  <view
-    class="sub-sider"
-    :style="{ left: props.asideWidth + 'px', width: props.siderWidth + 'px' }"
-  >
-    <view class="sub-header">
-      <text class="sub-title">{{ activeMenuTitle }}</text>
-    </view>
-
-    <scroll-view class="sub-body" scroll-y="true">
-      <view
-        v-for="g in groups"
-        :key="groupKey(g)"
-        class="group"
-      >
-        <!-- ✅ 改：点击标题时，如果该组没有 children 但有 path，则当成“叶子菜单”直接跳 -->
-        <view class="group-title" @click="handleGroupTitleClick(g)">
-          <text class="group-title-text">{{ g.title }}</text>
-
-          <!-- ✅ 改：只有有 children 才显示箭头 -->
-          <text
-            v-if="groupChildren(g).length > 0"
-            class="group-arrow"
-            :class="{ open: isGroupOpen(groupKey(g)) }"
-          >v</text>
-        </view>
-
-        <!-- ✅ 改：v-show 的条件不变，但 children 的遍历必须兜底 -->
-        <view v-show="isGroupOpen(groupKey(g))" class="group-children">
-          <view
-            v-for="c in groupChildren(g)"
-            :key="c.id"
-            class="sub-item"
-            :class="{ active: resolvedActiveId === c.id }"
-            @click.stop="handleClick(c)"
-          >
-            <text class="sub-item-text" :class="{ activeText: resolvedActiveId === c.id }">
-              {{ c.title }}
-            </text>
-          </view>
-        </view>
-      </view>
-    </scroll-view>
-  </view>
-</template>
-
-<script setup lang="uts">
-import { ref, computed, watch, withDefaults, onMounted } from 'vue'
-import type { MenuGroup, MenuChild } from '../types.uts'
-
-const props = withDefaults(defineProps<{
-  activeMenuTitle: string
-  groups: MenuGroup[]
-  activeSubId: string
-  activeMenuId?: string | null
-  asideWidth: number
-  siderWidth: number
-}>(), {
-  activeMenuId: 'home',
-})
-
-const emit = defineEmits<{
-  (e: 'sub-click', child: MenuChild): void
-}>()
-
-/** 只展开一个分组（更像 CRMEB） */
-const openGroupKey = ref<string>('')
-
-/** 给 group 一个稳定 key：优先用 id（如果你 types 里没有 id，就用 title） */
-const groupKey = (g: MenuGroup): string => {
-  // @ts-ignore
-  const anyG: any = g as any
-  return (anyG.id && (anyG.id as string)) ? (anyG.id as string) : g.title
-}
-
-/** ✅ 核心：group.children 兜底成 []（因为 children 现在可选/可空） */
-const groupChildren = (g: MenuGroup): MenuChild[] => {
-  // @ts-ignore
-  const anyG: any = g as any
-  // @ts-ignore
-  const list = anyG.children as (MenuChild[] | null | undefined)
-  return list && list.length > 0 ? list : []
-}
-
-/** ✅ 兼容四级：child.children 兜底成 [] */
-const childChildren = (c: MenuChild): MenuChild[] => {
-  // @ts-ignore
-  const anyC: any = c as any
-  // @ts-ignore
-  const list = anyC.children as (MenuChild[] | null | undefined)
-  return list && list.length > 0 ? list : []
-}
-
-/** ✅ 叶子 group（无 children）如果有 path，则构造一个“伪 MenuChild”用于 emit 跳转 */
-const groupAsChild = (g: MenuGroup): MenuChild | null => {
-  // @ts-ignore
-  const anyG: any = g as any
-  // @ts-ignore
-  const p = anyG.path as (string | null | undefined)
-  if (!p) return null
-  return { id: groupKey(g), title: g.title, path: p } as MenuChild
-}
-
-const normalizePath = (p: string): string => {
-  if (!p) return ''
-  const s = p.startsWith('/') ? p.slice(1) : p
-  const q = s.indexOf('?')
-  return q >= 0 ? s.slice(0, q) : s
-}
-
-/** 扁平查找：id -> child（✅ 改：遍历时用 groupChildren/childChildren） */
-const findChildById = (id: string): MenuChild | null => {
-  if (!id) return null
-
-  for (const g of props.groups) {
-    // ✅ 叶子 group 也能命中
-    const gLeaf = groupAsChild(g)
-    if (gLeaf && gLeaf.id === id) return gLeaf
-
-    for (const c of groupChildren(g)) {
-      if (c.id === id) return c
-      const deep = childChildren(c)
-      if (deep.length > 0) {
-        const hit = findFirstMatchInChildren(id, deep)
-        if (hit) return hit
-      }
-    }
-  }
-  return null
-}
-
-const findFirstMatchInChildren = (id: string, list: MenuChild[]): MenuChild | null => {
-  for (const n of list) {
-    if (n.id === id) return n
-    const deep = childChildren(n)
-    if (deep.length > 0) {
-      const hit = findFirstMatchInChildren(id, deep)
-      if (hit) return hit
-    }
-  }
-  return null
-}
-
-const findChildByPath = (path: string): MenuChild | null => {
-  const target = normalizePath(path)
-  if (!target) return null
-
-  for (const g of props.groups) {
-    // ✅ 叶子 group 也能按 path 命中
-    const gLeaf = groupAsChild(g)
-    if (gLeaf && normalizePath(gLeaf.path) === target) return gLeaf
-
-    for (const c of groupChildren(g)) {
-      if (normalizePath(c.path) === target) return c
-      const deep = childChildren(c)
-      if (deep.length > 0) {
-        const hit = findFirstMatchByPath(target, deep)
-        if (hit) return hit
-      }
-    }
-  }
-  return null
-}
-
-const findFirstMatchByPath = (targetNorm: string, list: MenuChild[]): MenuChild | null => {
-  for (const n of list) {
-    if (normalizePath(n.path) === targetNorm) return n
-    const deep = childChildren(n)
-    if (deep.length > 0) {
-      const hit = findFirstMatchByPath(targetNorm, deep)
-      if (hit) return hit
-    }
-  }
-  return null
-}
-
-/** 找到某个 child 属于哪个 group，用于自动展开该组（✅ 改：遍历兜底） */
-const findGroupKeyByChildId = (id: string): string => {
-  for (const g of props.groups) {
-    const gLeaf = groupAsChild(g)
-    if (gLeaf && gLeaf.id === id) return groupKey(g)
-
-    for (const c of groupChildren(g)) {
-      if (c.id === id) return groupKey(g)
-      const deep = childChildren(c)
-      if (deep.length > 0) {
-        const hit = findFirstMatchInChildren(id, deep)
-        if (hit) return groupKey(g)
-      }
-    }
-  }
-  return props.groups.length > 0 ? groupKey(props.groups[0]) : ''
-}
-
-/** 递归取第一个 leaf 菜单（✅ 改：children 兜底） */
-const firstLeaf = (): MenuChild | null => {
-  if (!props.groups || props.groups.length === 0) return null
-  const g0 = props.groups[0]
-  const g0Children = groupChildren(g0)
-
-  // ✅ 如果第一个 group 是叶子（无 children 但有 path），也能返回
-  if (g0Children.length === 0) {
-    return groupAsChild(g0)
-  }
-
-  const c0 = g0Children[0]
-  const deep = childChildren(c0)
-  if (deep.length > 0) return findFirstLeafInChildren(deep)
-  return c0
-}
-
-const findFirstLeafInChildren = (list: MenuChild[]): MenuChild | null => {
-  if (!list || list.length === 0) return null
-  const n = list[0]
-  const deep = childChildren(n)
-  if (deep.length > 0) return findFirstLeafInChildren(deep)
-  return n
-}
-
-/** 高亮兜底：按 activeSubId -> route/path 再匹配一次 */
-const resolvedActiveId = computed((): string => {
-  const byId = findChildById(props.activeSubId)
-  if (byId) return byId.id
-
-  try {
-    const pages = getCurrentPages()
-    if (pages && pages.length > 0) {
-      // @ts-ignore
-      const cur: any = pages[pages.length - 1]
-      // @ts-ignore
-      const route: string = cur.route ? (cur.route as string) : ''
-      const hit = findChildByPath(route)
-      if (hit) return hit.id
-    }
-  } catch (e) {}
-
-  return props.activeSubId || ''
-})
-
-const isGroupOpen = (key: string): boolean => {
-  if (!openGroupKey.value) {
-    return props.groups && props.groups.length > 0 ? groupKey(props.groups[0]) === key : false
-  }
-  return openGroupKey.value === key
-}
-
-const toggleGroup = (key: string) => {
-  openGroupKey.value = (openGroupKey.value === key) ? '' : key
-}
-
-/** ✅ 新增：点 group 标题时的行为 */
-const handleGroupTitleClick = (g: MenuGroup) => {
-  const list = groupChildren(g)
-  // 有 children：正常展开/收起
-  if (list.length > 0) {
-    toggleGroup(groupKey(g))
-    return
-  }
-  // 无 children：如果有 path，当成叶子菜单直接跳
-  const leaf = groupAsChild(g)
-  if (leaf) {
-    openGroupKey.value = groupKey(g)
-    emit('sub-click', leaf)
-  }
-}
-
-const handleClick = (c: MenuChild) => {
-  openGroupKey.value = findGroupKeyByChildId(c.id)
-  emit('sub-click', c)
-}
-
-/** 自动：groups 变更/activeSubId 无效时，只做状态同步（展开对应 group），不触发导航 */
-const ensureDefault = () => {
-  if (!props.groups || props.groups.length === 0) return
-
-  const hit = findChildById(props.activeSubId)
-  if (hit) { openGroupKey.value = findGroupKeyByChildId(hit.id); return }
-
-  // ✅ 再按当前 route 找一次
-  try {
-    const pages = getCurrentPages()
-    // @ts-ignore
-    const cur: any = pages[pages.length - 1]
-    const route: string = cur?.route ?? ''
-    const byRoute = findChildByPath(route)
-    if (byRoute) { openGroupKey.value = findGroupKeyByChildId(byRoute.id); return }
-  } catch(e) {}
-
-  const first = firstLeaf()
-  if (first) openGroupKey.value = findGroupKeyByChildId(first.id)
-}
-
-// ✅ 移除 watch(immediate: true) 中的自动 emit，仅在 groups/activeSubId 变更时同步状态
-watch(
-  () => props.groups,
-  () => { ensureDefault() },
-  { immediate: false, deep: true }
-)
-
-watch(
-  () => props.activeSubId,
-  () => { ensureDefault() },
-  { immediate: false }
-)
-
-// ✅ 初始化时只做一次状态同步（不通过 watch immediate）
-onMounted(() => {
-  ensureDefault()
-})
-</script>
-
-<style>
-/* 原样保留你的样式 */
-.sub-sider{
-  background:#ffffff;
-  border-right: 1px solid #e5e7eb;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: 900;
-}
-
-.sub-header{
-  height: 56px;
-  display:flex;
-  align-items:center;
-  border-bottom: 1px solid #eef2f7;
-}
-.sub-title{
-  font-size:16px;
-  font-weight:700;
-  color:#111827;
-  display:flex;
-  justify-content:center;
-  align-items:center;
-}
-
-.sub-body{
-  height: calc(100vh - 56px);
-}
-
-.group{ padding: 8px 0; }
-
-.group-title{
-  height: 42px;
-  margin: 8px 12px 6px 12px;
-  padding: 0 14px;
-  display:flex;
-  align-items:center;
-  justify-content: space-between;
-  background: #f6f7fb;
-  border-radius: 8px;
-}
-
-.group-title-text{
-  font-size: 14px;
-  font-weight: 700;
-  color:#111827;
-}
-
-.group-arrow{
-  font-size: 12px;
-  color: #6b7280;
-  transform: rotate(0deg);
-}
-.group-arrow.open{
-  transform: rotate(180deg);
-}
-
-.group-children{
-  padding: 0 12px 6px 12px;
-}
-
-.sub-item{
-  height: 34px;
-  margin: 4px 0;
-  padding: 0 14px 0 28px;
-  display:flex;
-  align-items:center;
-  border-radius: 8px;
-}
-
-.sub-item.active{
-  background: #eaf2ff;
-}
-
-.sub-item-text{
-  font-size: 13px;
-  color:#374151;
-}
-.sub-item-text.activeText{
-  color:#1677ff;
-  font-weight: 700;
-}
-</style>
diff --git a/layouts/admin/router/adminComponentMap.uts b/layouts/admin/router/adminComponentMap.uts
index d8d8b71d..e1549903 100644
--- a/layouts/admin/router/adminComponentMap.uts
+++ b/layouts/admin/router/adminComponentMap.uts
@@ -18,15 +18,18 @@ import PlaceholderPage from '@/layouts/admin/components/PlaceholderPage.uvue'
 import HomeIndex from '@/layouts/admin/pages/HomeIndex.uvue'
 
 // 导入用户模块（纯组件，不包含 AdminLayout）
+import UserStatistic from '@/pages/mall/admin/user/Statistic.uvue'
 import UserList from '@/pages/mall/admin/user/list.uvue'
 import UserLevel from '@/pages/mall/admin/user/level.uvue'
 import UserGroup from '@/pages/mall/admin/user/group.uvue'
 import UserLabel from '@/pages/mall/admin/user/label.uvue'
+import MemberConfig from '@/pages/mall/admin/user/MemberConfig.uvue'
 // 其他用户模块组件暂时使用 PlaceholderPage
 // import UserGradeType from '@/pages/mall/admin/user/grade/type.uvue'
 // import UserGradeCard from '@/pages/mall/admin/user/grade/card.uvue'
 // import UserGradeRecord from '@/pages/mall/admin/user/grade/record.uvue'
 // import UserGradeRight from '@/pages/mall/admin/user/grade/right.uvue'
+// import UserMemberConfig from '@/pages/mall/admin/user/MemberConfig.uvue'
 
 // 导入商品模块（纯组件，不包含 AdminLayout）
 import ProductList from '@/pages/mall/admin/product/list.uvue'
@@ -39,6 +42,11 @@ import ProductProtection from '@/pages/mall/admin/product/protection.uvue'
 
 // 导入订单模块（纯组件，不包含 AdminLayout）
 import OrderList from '@/pages/mall/admin/order/list.uvue'
+import OrderStatistic from '@/pages/mall/admin/order/order-statistics/index.uvue'
+import OrderRefund from '@/pages/mall/admin/order/aftersales-order/index.uvue'
+import OrderCashier from '@/pages/mall/admin/order/cashier-order/index.uvue'
+import OrderVerify from '@/pages/mall/admin/order/write-off-records/index.uvue'
+import OrderConfig from '@/pages/mall/admin/order/order-configuration/index.uvue'
 
 // 营销、内容、财务、数据、设置模块暂时使用 PlaceholderPage
 // 避免循环依赖问题
@@ -63,10 +71,12 @@ export const componentMap: Map<string, any> = new Map([
   ['HomeIndex', HomeIndex],
   
   // 用户模块
+  ['UserStatistic', UserStatistic],
   ['UserList', UserList],
   ['UserLevel', UserLevel],
   ['UserGroup', UserGroup],
   ['UserLabel', UserLabel],
+  ['UserMemberConfig', MemberConfig],
   ['UserGradeType', PlaceholderPage],  // 暂时使用占位组件
   ['UserGradeCard', PlaceholderPage],
   ['UserGradeRecord', PlaceholderPage],
@@ -83,6 +93,11 @@ export const componentMap: Map<string, any> = new Map([
   
   // 订单模块
   ['OrderList', OrderList],
+  ['OrderStatistic', OrderStatistic],
+  ['OrderRefund', OrderRefund],
+  ['OrderCashier', OrderCashier],
+  ['OrderVerify', OrderVerify],
+  ['OrderConfig', OrderConfig],
   
   // 营销模块 - 暂时使用占位组件
   ['MarketingCoupon', PlaceholderPage],
diff --git a/layouts/admin/router/adminRoutes.uts b/layouts/admin/router/adminRoutes.uts
index cd32859d..c782323f 100644
--- a/layouts/admin/router/adminRoutes.uts
+++ b/layouts/admin/router/adminRoutes.uts
@@ -72,8 +72,8 @@ export const topMenus: TopMenu[] = [
     path: '/pages/mall/admin/user/list',
     order: 2,
     groups: [
-      { id: 'user-manage', title: '用户管理', order: 1 },
-      { id: 'user-grade', title: '会员管理', order: 2 }
+      { id: 'user-manage', title: '', order: 1 },
+      { id: 'member-manage', title: '会员管理', order: 2 }
     ]
   },
   {
@@ -93,7 +93,7 @@ export const topMenus: TopMenu[] = [
     path: '/pages/mall/admin/order/list',
     order: 4,
     groups: [
-      { id: 'order-manage', title: '订单管理', order: 1 }
+      { id: 'order-manage', title: '', order: 1 }
     ]
   },
   {
@@ -168,6 +168,16 @@ export const routes: RouteRecord[] = [
   },
 
   // ========== 用户模块 ==========
+  {
+    id: 'user_statistic',
+    title: '用户统计',
+    path: '/pages/mall/admin/user/Statistic',
+    componentKey: 'UserStatistic',
+    parentId: 'user',
+    groupId: 'user-manage',
+    auth: ['admin-user-statistic-index'],
+    order: 1
+  },
   {
     id: 'user_list',
     title: '用户管理',
@@ -176,16 +186,6 @@ export const routes: RouteRecord[] = [
     parentId: 'user',
     groupId: 'user-manage',
     auth: ['admin-user-user-index'],
-    order: 1
-  },
-  {
-    id: 'user_level',
-    title: '用户等级',
-    path: '/pages/mall/admin/user/level',
-    componentKey: 'UserLevel',
-    parentId: 'user',
-    groupId: 'user-manage',
-    auth: ['user-user-level'],
     order: 2
   },
   {
@@ -208,15 +208,35 @@ export const routes: RouteRecord[] = [
     auth: ['user-user-label'],
     order: 4
   },
+  {
+    id: 'user_level',
+    title: '用户等级',
+    path: '/pages/mall/admin/user/level',
+    componentKey: 'UserLevel',
+    parentId: 'user',
+    groupId: 'user-manage',
+    auth: ['user-user-level'],
+    order: 5
+  },
+  {
+    id: 'user_member_config',
+    title: '用户配置',
+    path: '/pages/mall/admin/user/MemberConfig',
+    componentKey: 'UserMemberConfig',
+    parentId: 'user',
+    groupId: 'user-manage',
+    auth: ['admin-user-member-config'],
+    order: 6
+  },
   {
     id: 'user_type',
     title: '会员类型',
     path: '/pages/mall/admin/user/grade/type',
     componentKey: 'UserGradeType',
     parentId: 'user',
-    groupId: 'user-grade',
+    groupId: 'member-manage',
     auth: ['admin-user-member-type'],
-    order: 5
+    order: 1
   },
   {
     id: 'user_card',
@@ -224,9 +244,9 @@ export const routes: RouteRecord[] = [
     path: '/pages/mall/admin/user/grade/card',
     componentKey: 'UserGradeCard',
     parentId: 'user',
-    groupId: 'user-grade',
+    groupId: 'member-manage',
     auth: ['admin-user-grade-card'],
-    order: 6
+    order: 2
   },
   {
     id: 'user_record',
@@ -234,9 +254,9 @@ export const routes: RouteRecord[] = [
     path: '/pages/mall/admin/user/grade/record',
     componentKey: 'UserGradeRecord',
     parentId: 'user',
-    groupId: 'user-grade',
+    groupId: 'member-manage',
     auth: ['admin-user-grade-record'],
-    order: 7
+    order: 3
   },
   {
     id: 'user_right',
@@ -244,9 +264,9 @@ export const routes: RouteRecord[] = [
     path: '/pages/mall/admin/user/grade/right',
     componentKey: 'UserGradeRight',
     parentId: 'user',
-    groupId: 'user-grade',
+    groupId: 'member-manage',
     auth: ['admin-user-grade-right'],
-    order: 8
+    order: 4
   },
 
   // ========== 商品模块 ==========
@@ -323,6 +343,16 @@ export const routes: RouteRecord[] = [
   },
 
   // ========== 订单模块 ==========
+  {
+    id: 'order_statistic',
+    title: '订单统计',
+    path: '/pages/mall/admin/order/statistic',
+    componentKey: 'OrderStatistic',
+    parentId: 'order',
+    groupId: 'order-manage',
+    auth: ['admin-order-statistic-index'],
+    order: 1
+  },
   {
     id: 'order_list',
     title: '订单管理',
@@ -332,7 +362,47 @@ export const routes: RouteRecord[] = [
     groupId: 'order-manage',
     auth: ['admin-order-storeOrder-index'],
     keepAlive: true,
-    order: 1
+    order: 2
+  },
+  {
+    id: 'order_refund',
+    title: '售后订单',
+    path: '/pages/mall/admin/order/refund',
+    componentKey: 'OrderRefund',
+    parentId: 'order',
+    groupId: 'order-manage',
+    auth: ['admin-order-refund-index'],
+    order: 3
+  },
+  {
+    id: 'order_cashier',
+    title: '收银订单',
+    path: '/pages/mall/admin/order/cashier',
+    componentKey: 'OrderCashier',
+    parentId: 'order',
+    groupId: 'order-manage',
+    auth: ['admin-order-cashier-index'],
+    order: 4
+  },
+  {
+    id: 'order_verify',
+    title: '核销记录',
+    path: '/pages/mall/admin/order/verify',
+    componentKey: 'OrderVerify',
+    parentId: 'order',
+    groupId: 'order-manage',
+    auth: ['admin-order-verify-index'],
+    order: 5
+  },
+  {
+    id: 'order_config',
+    title: '订单配置',
+    path: '/pages/mall/admin/order/config',
+    componentKey: 'OrderConfig',
+    parentId: 'order',
+    groupId: 'order-manage',
+    auth: ['admin-order-config-index'],
+    order: 6
   },
 
   // ========== 营销模块 ==========
diff --git a/pages/mall/admin/order/aftersales-order/index.uvue b/pages/mall/admin/order/aftersales-order/index.uvue
index 5519b3e4..36ebdde2 100644
--- a/pages/mall/admin/order/aftersales-order/index.uvue
+++ b/pages/mall/admin/order/aftersales-order/index.uvue
@@ -1,18 +1,15 @@
 <template>
-  <AdminLayout :currentPage="currentPage">
-    <view class="page">
-      <view class="header">
-        <text class="title">{{ title }}</text>
-        <text class="sub-title">售后订单管理与申请处理</text>
-      </view>
+  <view class="page">
+    <view class="header">
+      <text class="title">{{ title }}</text>
+      <text class="sub-title">售后订单管理与申请处理</text>
     </view>
-  </AdminLayout>
+  </view>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
-import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
-const currentPage = ref<string>('order-aftersale')
+
 const title = ref<string>('售后订单')
 </script>
 
diff --git a/pages/mall/admin/order/cashier-order/index.uvue b/pages/mall/admin/order/cashier-order/index.uvue
index 39e53a8c..5aba5247 100644
--- a/pages/mall/admin/order/cashier-order/index.uvue
+++ b/pages/mall/admin/order/cashier-order/index.uvue
@@ -1,18 +1,15 @@
 <template>
-  <AdminLayout :currentPage="currentPage">
-    <view class="page">
-      <view class="header">
-        <text class="title">{{ title }}</text>
-        <text class="sub-title">收银台订单，管理线下收银记录</text>
-      </view>
+  <view class="page">
+    <view class="header">
+      <text class="title">{{ title }}</text>
+      <text class="sub-title">收银台订单，管理线下收银记录</text>
     </view>
-  </AdminLayout>
+  </view>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
-import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
-const currentPage = ref<string>('order-cashier')
+
 const title = ref<string>('收银订单')
 </script>
 
diff --git a/pages/mall/admin/order/list.uvue b/pages/mall/admin/order/list.uvue
index 28fe926e..ffbcbe2a 100644
--- a/pages/mall/admin/order/list.uvue
+++ b/pages/mall/admin/order/list.uvue
@@ -1,15 +1,136 @@
 <template>
-  <view class="page-container">
-    <view class="page-header">
-      <text class="page-title">订单管理</text>
-      <text class="page-subtitle">Component: OrderList</text>
+  <view class="order-list-page">
+    <!-- 筛选区域 -->
+    <view class="filter-card">
+      <view class="filter-row">
+        <view class="filter-item">
+          <text class="label">订单类型：</text>
+          <view class="mock-select">
+            <text>全部订单</text>
+            <view class="arrow-down"></view>
+          </view>
+        </view>
+        <view class="filter-item">
+          <text class="label">支付方式：</text>
+          <view class="mock-select">
+            <text>全部</text>
+            <view class="arrow-down"></view>
+          </view>
+        </view>
+        <view class="filter-item long">
+          <text class="label">创建时间：</text>
+          <view class="mock-date-range">
+            <image class="cal-icon" src="/static/icons/calendar.png" mode="aspectFit" />
+            <text class="placeholder">开始日期  -  结束日期</text>
+          </view>
+        </view>
+        <view class="filter-item search">
+          <text class="label">订单搜索：</text>
+          <view class="search-group">
+            <view class="search-select">
+              <text>全部</text>
+              <view class="arrow-down"></view>
+            </view>
+            <input class="search-input" placeholder="请输入" />
+          </view>
+        </view>
+      </view>
+      <view class="btn-row">
+        <button class="btn btn-primary">查询</button>
+        <button class="btn btn-default">重置</button>
+      </view>
     </view>
-    
-    <view class="page-content">
-      <view class="placeholder-card">
-        <text class="placeholder-title">页面占位</text>
-        <text class="placeholder-desc">该功能模块正在开发中</text>
-        <text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
+
+    <!-- 列表数据区域 -->
+    <view class="content-card">
+      <!-- 状态 Tabs -->
+      <view class="status-tabs">
+        <view 
+          v-for="(tab, index) in statusTabs" 
+          :key="index"
+          class="tab-item"
+          :class="{ active: activeTab === index }"
+          @click="activeTab = index"
+        >
+          <text class="tab-text">{{ tab.name }}</text>
+          <text v-if="tab.count" class="tab-count">({{ tab.count }})</text>
+        </view>
+      </view>
+
+      <!-- 操作按钮 -->
+      <view class="action-bar">
+        <button class="action-btn btn-blue">订单核销</button>
+        <button class="action-btn btn-outline">批量发货</button>
+        <button class="action-btn btn-outline">批量删除</button>
+        <button class="action-btn btn-outline">订单导出</button>
+      </view>
+
+      <!-- 数据表格 -->
+      <view class="order-table">
+        <view class="thead">
+          <view class="th col-check">
+            <checkbox :checked="false" color="#1890ff" />
+          </view>
+          <view class="th col-order">订单号 | 类型</view>
+          <view class="th col-product">商品信息</view>
+          <view class="th col-user">用户信息</view>
+          <view class="th col-price">实际支付</view>
+          <view class="th col-pay">支付方式</view>
+          <view class="th col-time">支付时间</view>
+          <view class="th col-status">订单状态</view>
+          <view class="th col-op">操作</view>
+        </view>
+        
+        <view class="tbody">
+          <view v-for="(item, index) in orderData" :key="index" class="tr">
+            <view class="td col-check">
+              <checkbox :checked="false" color="#1890ff" />
+            </view>
+            <!-- 订单号|类型 -->
+            <view class="td col-order">
+              <text class="order-sn">{{ item.sn }}</text>
+              <text class="order-type" :class="item.typeColor">[{{ item.typeName }}]</text>
+              <text v-if="item.cancelStatus" class="cancel-text">{{ item.cancelStatus }}</text>
+            </view>
+            <!-- 商品信息 -->
+            <view class="td col-product">
+              <view class="product-info-wrap">
+                <image class="p-img" :src="item.product.img" mode="aspectFill" />
+                <text class="p-name">{{ item.product.name }}</text>
+              </view>
+            </view>
+            <!-- 用户信息 -->
+            <view class="td col-user">
+              <text class="u-info">{{ item.user.phone }} | {{ item.user.id }}</text>
+            </view>
+            <!-- 实际支付 -->
+            <view class="td col-price">
+              <text class="price-val">{{ item.actualPrice }}</text>
+            </view>
+            <!-- 支付方式 -->
+            <view class="td col-pay">
+              <text class="pay-text">{{ item.payMethod }}</text>
+            </view>
+            <!-- 支付时间 -->
+            <view class="td col-time">
+              <text class="time-text">{{ item.payTime }}</text>
+            </view>
+            <!-- 订单状态 -->
+            <view class="td col-status">
+              <text class="status-text">{{ item.statusName }}</text>
+            </view>
+            <!-- 操作 -->
+            <view class="td col-op">
+              <view class="op-links">
+                <text class="op-link primary" v-if="item.primaryAction">{{ item.primaryAction }}</text>
+                <view class="op-link-more">
+                  <text class="more-text">更多</text>
+                  <view class="arrow-down-blue"></view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
       </view>
     </view>
   </view>
@@ -18,64 +139,344 @@
 <script setup lang="uts">
 import { ref } from 'vue'
 
-// TODO: 实现 订单管理 的具体功能
-const loading = ref<boolean>(false)
+const activeTab = ref(2) // 默认选中待发货或待核销（手动对齐截图）
+
+const statusTabs = [
+  { name: '全部', count: null },
+  { name: '待支付', count: 793 },
+  { name: '待发货', count: 3695 },
+  { name: '待核销', count: null },
+  { name: '待收货', count: null },
+  { name: '待评价', count: null },
+  { name: '已完成', count: null },
+  { name: '已退款', count: null },
+  { name: '已删除', count: null }
+]
+
+const orderData = ref([
+  {
+    sn: 'cp541336970228400128',
+    typeName: '秒杀订单',
+    typeColor: 'blue',
+    cancelStatus: '用户已取消',
+    product: {
+      img: 'https://img.crmeb.com/crmeb_demo/75211.png',
+      name: '爱奇艺智能 奇遇LT01 投影仪 家用卧室 超高清手机便携投影机 (4K超清 支持...'
+    },
+    user: { phone: '188****4074', id: '82694' },
+    actualPrice: '未支付',
+    payMethod: '--',
+    payTime: '--',
+    statusName: '未支付',
+    primaryAction: ''
+  },
+  {
+    sn: 'cp541289248708362240',
+    typeName: '核销订单',
+    typeColor: 'purple',
+    cancelStatus: '',
+    product: {
+      img: 'https://img.crmeb.com/crmeb_demo/75211.png',
+      name: '阿迪达斯官网 adidas BBALL CAP COT 男女训练运动帽子FQ5270 传奇墨水...'
+    },
+    user: { phone: '你就给', id: '82703' },
+    actualPrice: '90.1',
+    payMethod: '余额支付',
+    payTime: '2026-02-02 16:10:17',
+    statusName: '未核销',
+    primaryAction: '立即核销'
+  },
+  {
+    sn: 'cp541268226856714240',
+    typeName: '普通订单',
+    typeColor: 'green',
+    cancelStatus: '',
+    product: {
+      img: 'https://img.crmeb.com/crmeb_demo/75211.png',
+      name: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060'
+    },
+    user: { phone: '王毅不睡了', id: '82689' },
+    actualPrice: '未支付',
+    payMethod: '--',
+    payTime: '--',
+    statusName: '未支付',
+    primaryAction: '编辑'
+  },
+  {
+    sn: 'cp541262080745930752',
+    typeName: '秒杀订单',
+    typeColor: 'blue',
+    cancelStatus: '',
+    product: {
+      img: 'https://img.crmeb.com/crmeb_demo/75211.png',
+      name: '爱奇艺智能 奇遇LT01 投影仪 家用卧室 超高清手机便携投影机 (4K超清 支持...'
+    },
+    user: { phone: '177****8361', id: '82697' },
+    actualPrice: '未支付',
+    payMethod: '--',
+    payTime: '--',
+    statusName: '未支付',
+    primaryAction: '编辑'
+  }
+])
 </script>
 
 <style scoped lang="scss">
-.page-container {
-  padding: 20px;
+.order-list-page {
+  padding: 16px;
+  background-color: #f0f2f5;
   min-height: 100vh;
-  background: #f5f5f5;
 }
 
-.page-header {
-  margin-bottom: 20px;
-}
-
-.page-title {
-  display: block;
-  font-size: 24px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 8px;
-}
-
-.page-subtitle {
-  display: block;
-  font-size: 14px;
-  color: #999;
-}
-
-.page-content {
-  background: #fff;
-  border-radius: 4px;
+.filter-card {
+  background-color: #fff;
   padding: 24px;
+  border-radius: 4px;
+  margin-bottom: 16px;
 }
 
-.placeholder-card {
-  text-align: center;
-  padding: 60px 20px;
+.filter-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 24px;
 }
 
-.placeholder-title {
-  display: block;
-  font-size: 18px;
-  font-weight: 600;
-  color: #666;
-  margin-bottom: 12px;
+.filter-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  
+  .label {
+    font-size: 14px;
+    color: #333;
+    width: 70px;
+  }
 }
 
-.placeholder-desc {
-  display: block;
+.mock-select {
+  width: 160px;
+  height: 32px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 0 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  text { font-size: 14px; color: #595959; }
+}
+
+.mock-date-range {
+  width: 240px;
+  height: 32px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 0 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .cal-icon { width: 14px; height: 14px; margin-right: 8px; opacity: 0.4; }
+  .placeholder { font-size: 14px; color: #bfbfbf; }
+}
+
+.search-group {
+  display: flex;
+  flex-direction: row;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  height: 32px;
+  overflow: hidden;
+}
+
+.search-select {
+  width: 80px;
+  border-right: 1px solid #d9d9d9;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  background-color: #fafafa;
+  text { font-size: 14px; color: #595959; }
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  padding: 0 12px;
   font-size: 14px;
-  color: #999;
-  margin-bottom: 8px;
+  width: 120px;
 }
 
-.placeholder-info {
-  display: block;
-  font-size: 12px;
-  color: #1890ff;
+.arrow-down {
+  width: 0; height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid #bfbfbf;
+}
+
+.btn-row {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.btn {
+  height: 32px;
+  padding: 0 16px;
+  font-size: 14px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+}
+
+.btn-primary { background-color: #1890ff; color: #fff; border: none; }
+.btn-default { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; }
+
+.content-card {
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.status-tabs {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #f0f0f0;
+  padding: 0 16px;
+}
+
+.tab-item {
+  padding: 16px 20px;
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+  
+  .tab-text { font-size: 14px; color: #595959; }
+  .tab-count { font-size: 14px; color: #595959; }
+  
+  &.active {
+    .tab-text, .tab-count { color: #1890ff; font-weight: 500; }
+    &::after {
+      content: '';
+      position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #1890ff;
+    }
+  }
+}
+
+.action-bar {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}
+
+.action-btn {
+  height: 32px;
+  padding: 0 16px;
+  font-size: 14px;
+  border-radius: 4px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+
+.btn-blue { background-color: #1890ff; color: #fff; border: none; }
+.btn-outline { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; }
+
+/* 表格样式 */
+.order-table {
+  width: 100%;
+}
+
+.thead {
+  display: flex;
+  flex-direction: row;
+  background-color: #f0f7ff;
+}
+
+.th {
+  padding: 12px 8px;
+  font-size: 14px;
+  color: #595959;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+}
+
+.tr {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #f0f0f0;
+  &:hover { background-color: #fafafa; }
+}
+
+.td {
+  padding: 16px 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* 列宽控制 */
+.col-check { width: 50px; justify-content: center; align-items: center; }
+.col-order { width: 220px; }
+.col-product { flex: 1; }
+.col-user { width: 160px; }
+.col-price { width: 100px; }
+.col-pay { width: 100px; }
+.col-time { width: 160px; }
+.col-status { width: 100px; }
+.col-op { width: 120px; }
+
+/* 单元格具体内容样式 */
+.order-sn { font-size: 13px; color: #262626; margin-bottom: 4px; }
+.order-type { font-size: 12px; }
+.blue { color: #1890ff; }
+.purple { color: #722ed1; }
+.green { color: #52c41a; }
+.cancel-text { font-size: 12px; color: #ff4d4f; margin-top: 4px; }
+
+.product-info-wrap {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.p-img { width: 44px; height: 44px; border-radius: 4px; background-color: #f5f5f5; flex-shrink: 0; }
+.p-name { font-size: 13px; color: #595959; line-height: 1.5; }
+
+.u-info { font-size: 13px; color: #595959; }
+.price-val { font-size: 14px; color: #262626; }
+.pay-text, .time-text, .status-text { font-size: 13px; color: #595959; }
+
+.op-links {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.op-link { font-size: 13px; cursor: pointer; }
+.primary { color: #1890ff; }
+
+.op-link-more {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+.more-text { font-size: 13px; color: #1890ff; }
+.arrow-down-blue {
+  width: 0; height: 0;
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  border-top: 4px solid #1890ff;
 }
 </style>
diff --git a/pages/mall/admin/order/order-configuration/index.uvue b/pages/mall/admin/order/order-configuration/index.uvue
index 712196ca..7832ada0 100644
--- a/pages/mall/admin/order/order-configuration/index.uvue
+++ b/pages/mall/admin/order/order-configuration/index.uvue
@@ -1,18 +1,15 @@
 <template>
-  <AdminLayout :currentPage="currentPage">
-    <view class="page">
-      <view class="header">
-        <text class="title">{{ title }}</text>
-        <text class="sub-title">订单配置，设置订单相关参数</text>
-      </view>
+  <view class="page">
+    <view class="header">
+      <text class="title">{{ title }}</text>
+      <text class="sub-title">订单配置，设置订单相关参数</text>
     </view>
-  </AdminLayout>
+  </view>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
-import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
-const currentPage = ref<string>('order-config')
+
 const title = ref<string>('订单配置')
 </script>
 
diff --git a/pages/mall/admin/order/order-statistics/index.uvue b/pages/mall/admin/order/order-statistics/index.uvue
index ad0aa396..40582f86 100644
--- a/pages/mall/admin/order/order-statistics/index.uvue
+++ b/pages/mall/admin/order/order-statistics/index.uvue
@@ -1,21 +1,599 @@
 <template>
-  <AdminLayout :currentPage="currentPage">
-    <view class="page">
-      <view class="header">
-        <text class="title">{{ title }}</text>
-        <text class="sub-title">订单交易统计数据</text>
+  <view class="order-statistic-page">
+    <!-- 时间选择卡片 -->
+    <view class="filter-card">
+      <view class="filter-item">
+        <text class="filter-label">时间选择：</text>
+        <view class="date-picker-mock">
+          <image class="calendar-icon" src="/static/icons/calendar.png" mode="aspectFit" />
+          <text class="date-range">2026/01/04  -  2026/02/02</text>
+        </view>
       </view>
     </view>
-  </AdminLayout>
+
+    <!-- 数据汇总卡片 -->
+    <view class="stat-cards-row">
+      <!-- 订单量 -->
+      <view class="stat-card">
+        <view class="icon-wrap blue-bg">
+          <view class="custom-icon icon-order"></view>
+        </view>
+        <view class="stat-info">
+          <text class="stat-value">209</text>
+          <text class="stat-desc">订单量</text>
+        </view>
+      </view>
+
+      <!-- 订单销售额 -->
+      <view class="stat-card">
+        <view class="icon-wrap orange-bg">
+          <view class="custom-icon icon-money"></view>
+        </view>
+        <view class="stat-info">
+          <text class="stat-value">443254.62</text>
+          <text class="stat-desc">订单销售额</text>
+        </view>
+      </view>
+
+      <!-- 退款订单数 -->
+      <view class="stat-card">
+        <view class="icon-wrap green-bg">
+          <view class="custom-icon icon-refund"></view>
+        </view>
+        <view class="stat-info">
+          <text class="stat-value">0</text>
+          <text class="stat-desc">退款订单数</text>
+        </view>
+      </view>
+
+      <!-- 退款金额 -->
+      <view class="stat-card last-card">
+        <view class="icon-wrap pink-bg">
+          <view class="custom-icon icon-refund-money"></view>
+        </view>
+        <view class="stat-info">
+          <text class="stat-value">0</text>
+          <text class="stat-desc">退款金额</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 营业趋势图表 -->
+    <view class="chart-card">
+      <view class="card-header">
+        <text class="card-title">营业趋势</text>
+      </view>
+      <view class="chart-container">
+        <EChartsView :option="trendOption" class="trend-chart" />
+      </view>
+    </view>
+
+    <!-- 底部双图表区域 -->
+    <view class="bottom-charts-row">
+      <!-- 订单来源分析 -->
+      <view class="bottom-chart-card">
+        <view class="card-header-row">
+          <text class="card-title">订单来源分析</text>
+          <view class="style-toggle">
+            <text class="toggle-text">切换样式</text>
+          </view>
+        </view>
+        <view class="pie-chart-container">
+          <EChartsView :option="sourceOption" class="source-chart" />
+        </view>
+      </view>
+
+      <!-- 订单类型分析 -->
+      <view class="bottom-chart-card">
+        <view class="card-header-row">
+          <text class="card-title">订单类型分析</text>
+          <view class="style-toggle">
+            <text class="toggle-text">切换样式</text>
+          </view>
+        </view>
+        <view class="type-table-container">
+          <view class="table-header">
+            <text class="th-text col-id">序号</text>
+            <text class="th-text col-name">来源</text>
+            <text class="th-text col-money">金额</text>
+            <text class="th-text col-rate">占比率</text>
+          </view>
+          <view class="table-body">
+            <view v-for="(item, index) in orderTypeData" :key="index" class="table-row">
+              <text class="td-text col-id">{{ index + 1 }}</text>
+              <text class="td-text col-name">{{ item.name }}</text>
+              <text class="td-text col-money">{{ item.amount }}</text>
+              <view class="col-rate rate-box">
+                <view class="progress-wrap">
+                  <view class="progress-bar" :style="{ width: item.rate + '%', backgroundColor: '#1890ff' }"></view>
+                </view>
+                <text class="rate-val">{{ item.rate }}%</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
-import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
-const currentPage = ref<string>('order-statistics')
+import { ref, onMounted } from 'vue'
+import EChartsView from '@/uni_modules/charts/EChartsView.vue'
+
 const title = ref<string>('订单统计')
+const trendOption = ref<any>({})
+const sourceOption = ref<any>({})
+
+const orderTypeData = ref([
+  { name: '普通订单', amount: '430986.62', rate: '97.23' },
+  { name: '拼团订单', amount: '7127', rate: '1.60' },
+  { name: '预售订单', amount: '4835', rate: '1.09' },
+  { name: '秒杀订单', amount: '306', rate: '0.06' },
+  { name: '砍价订单', amount: '0', rate: '0.00' }
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    initCharts()
+  }, 300)
+})
+
+/**
+ * 转换 UTS 对象为纯 JS 对象，确保 ECharts 能正确解析
+ */
+function toPlainObject(obj: any): any {
+  if (obj == null) return null
+  if (typeof obj !== 'object') return obj
+  if (Array.isArray(obj)) {
+    return obj.map((item: any) : any => toPlainObject(item))
+  }
+  const plain: any = {}
+  const keys = Object.keys(obj)
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i]
+    const value = obj[key]
+    if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
+      continue
+    }
+    if (value != null && typeof value === 'object') {
+      plain[key] = toPlainObject(value)
+    } else {
+      plain[key] = value
+    }
+  }
+  return plain
+}
+
+function initCharts() {
+  initTrendChart()
+  initSourceChart()
+}
+
+function initSourceChart() {
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c} ({d}%)'
+    },
+    legend: {
+      orient: 'vertical',
+      right: '10%',
+      top: 'center',
+      itemWidth: 10,
+      itemHeight: 10,
+      icon: 'circle',
+      textStyle: { color: '#8c8c8c' }
+    },
+    color: ['#1890ff', '#52c41a', '#597ef7', '#ffc53d', '#ff7875'],
+    series: [
+      {
+        name: '订单来源',
+        type: 'pie',
+        radius: ['45%', '70%'],
+        center: ['40%', '50%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          position: 'outside',
+          formatter: '{b}'
+        },
+        labelLine: {
+          show: true
+        },
+        data: [
+          { value: 1048, name: '公众号' },
+          { value: 735, name: '小程序' },
+          { value: 580, name: 'H5' },
+          { value: 484, name: 'PC' },
+          { value: 300, name: 'APP' }
+        ]
+      }
+    ]
+  }
+  sourceOption.value = toPlainObject(option)
+}
+
+function initTrendChart() {
+  const dates = [
+    '01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10', '01-11', '01-12', '01-13',
+    '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23',
+    '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-01', '02-02'
+  ]
+
+  const orderAmount = [
+    8000, 2000, 9000, 1000, 138000, 6000, 1000, 500, 800, 200, 
+    5000, 35000, 7000, 1000, 12000, 1000, 100000, 16000, 18000, 1000,
+    1200, 1500, 68000, 1000, 10000, 2000, 4000, 8000, 2000, 1000
+  ]
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line',
+        lineStyle: { color: '#ccc', width: 1 }
+      }
+    },
+    legend: {
+      data: ['订单金额', '订单量', '退款金额', '退款订单量'],
+      top: 10,
+      right: 'center',
+      icon: 'circle',
+      textStyle: { color: '#8c8c8c' }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '10%',
+      top: '60px',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: dates,
+      axisLine: { lineStyle: { color: '#e8e8e8' } },
+      axisLabel: { color: '#8c8c8c', rotate: 45 }
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { type: 'dashed', color: '#f0f0f0' } },
+      axisLabel: { color: '#8c8c8c' }
+    },
+    series: [
+      {
+        name: '订单金额',
+        type: 'line',
+        smooth: false,
+        symbol: 'circle',
+        symbolSize: 6,
+        itemStyle: { color: '#5b8ff9' },
+        lineStyle: { width: 2 },
+        data: orderAmount
+      },
+      {
+        name: '订单量',
+        type: 'line',
+        itemStyle: { color: '#5ad8a6' },
+        data: dates.map((_ : string) : number => Math.floor(Math.random() * 20))
+      },
+      {
+        name: '退款金额',
+        type: 'line',
+        itemStyle: { color: '#ff9d4d' },
+        data: dates.map((_ : string) : number => 0)
+      },
+      {
+        name: '退款订单量',
+        type: 'line',
+        itemStyle: { color: '#9270ca' },
+        data: dates.map((_ : string) : number => 0)
+      }
+    ]
+  }
+
+  trendOption.value = toPlainObject(option)
+}
 </script>
 
+<style scoped lang="scss">
+.order-statistic-page {
+  padding: 16px;
+  background-color: #f0f2f5;
+  min-height: 100%;
+}
+
+.filter-card {
+  background-color: #fff;
+  padding: 24px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.filter-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.filter-label {
+  font-size: 14px;
+  color: #333;
+  margin-right: 12px;
+}
+
+.date-picker-mock {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 4px 12px;
+  width: 240px;
+}
+
+.calendar-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  opacity: 0.45;
+}
+
+.date-range {
+  font-size: 14px;
+  color: #595959;
+}
+
+.stat-cards-row {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.chart-card {
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 24px;
+}
+
+.card-header {
+  margin-bottom: 20px;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #1a1a1a;
+}
+
+.chart-container {
+  width: 100%;
+  height: 400px;
+}
+
+.trend-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.bottom-charts-row {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.bottom-chart-card {
+  flex: 1;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 24px;
+}
+
+.card-header-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.style-toggle {
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 2px 8px;
+}
+
+.toggle-text {
+  font-size: 12px;
+  color: #595959;
+}
+
+.pie-chart-container {
+  width: 100%;
+  height: 320px;
+}
+
+.source-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.type-table-container {
+  width: 100%;
+}
+
+.table-header {
+  display: flex;
+  flex-direction: row;
+  background-color: #e6f7ff;
+  padding: 12px 0;
+  border-radius: 4px 4px 0 0;
+}
+
+.th-text {
+  font-size: 14px;
+  color: #595959;
+}
+
+/* 统一列宽与对齐方式 */
+.col-id { width: 80px; text-align: center; }
+.col-name { flex: 1; text-align: left; padding-left: 40px; }
+.col-money { width: 180px; text-align: left; }
+.col-rate { width: 240px; text-align: left; }
+
+.table-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 16px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.td-text {
+  font-size: 14px;
+  color: #262626;
+}
+
+.rate-box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start; /* 改为左对齐，与表头对齐样式一致 */
+}
+
+.progress-wrap {
+  width: 120px;
+  height: 6px;
+  background-color: #f5f5f5;
+  border-radius: 3px;
+  margin-right: 12px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  border-radius: 3px;
+}
+
+.rate-val {
+  font-size: 13px;
+  color: #595959;
+  width: 50px;
+  text-align: right;
+}
+
+.stat-card {
+  flex: 1;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.icon-wrap {
+  width: 54px;
+  height: 54px;
+  border-radius: 27px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20px;
+}
+
+/* 颜色背景 - 1:1 匹配截图 */
+.blue-bg {
+  background-color: #e6f7ff;
+  border: 2px solid #bae7ff;
+}
+.orange-bg {
+  background-color: #fff7e6;
+  border: 2px solid #ffe58f;
+}
+.green-bg {
+  background-color: #f6ffed;
+  border: 2px solid #b7eb8f;
+}
+.pink-bg {
+  background-color: #fff0f6;
+  border: 2px solid #ffadd2;
+}
+
+.stat-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: 500;
+  color: #1a1a1a;
+  line-height: 1.2;
+}
+
+.stat-desc {
+  font-size: 13px;
+  color: #8c8c8c;
+  margin-top: 4px;
+}
+
+/* 自定义图标 1:1 形状模拟 - 内部使用伪元素或形状模拟截图形状 */
+.custom-icon {
+  width: 24px;
+  height: 24px;
+  position: relative;
+}
+
+.icon-order {
+  background-color: #1890ff;
+  border-radius: 4px;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 6px; left: 4px; right: 4px; height: 2px;
+    background: #fff;
+  }
+}
+
+.icon-money {
+  background-color: #faad14;
+  border-radius: 50%;
+  &::after {
+    content: '￥';
+    color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    display: flex; justify-content: center; align-items: center; height: 100%;
+  }
+}
+
+.icon-refund {
+  background-color: #52c41a;
+  border-radius: 4px;
+  &::before {
+    content: '↺';
+    color: #fff;
+    font-size: 16px;
+    display: flex; justify-content: center; align-items: center; height: 100%;
+  }
+}
+
+.icon-refund-money {
+  background-color: #eb2f96;
+  border-radius: 50%;
+  &::after {
+    content: '−';
+    color: #fff;
+    font-size: 18px;
+    display: flex; justify-content: center; align-items: center; height: 100%;
+  }
+}
+</style>
+
 <style scoped lang="scss">
 @import '@/uni.scss';
 .page { padding: $space-lg; }
diff --git a/pages/mall/admin/order/write-off-records/index.uvue b/pages/mall/admin/order/write-off-records/index.uvue
index 3b29b15c..831951d4 100644
--- a/pages/mall/admin/order/write-off-records/index.uvue
+++ b/pages/mall/admin/order/write-off-records/index.uvue
@@ -1,18 +1,15 @@
 <template>
-  <AdminLayout :currentPage="currentPage">
-    <view class="page">
-      <view class="header">
-        <text class="title">{{ title }}</text>
-        <text class="sub-title">核销记录，查看优惠券和卡券核销情况</text>
-      </view>
+  <view class="page">
+    <view class="header">
+      <text class="title">{{ title }}</text>
+      <text class="sub-title">核销记录，查看优惠券和卡券核销情况</text>
     </view>
-  </AdminLayout>
+  </view>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
-import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
-const currentPage = ref<string>('order-verify')
+
 const title = ref<string>('核销记录')
 </script>
 
diff --git a/pages/mall/admin/user/MemberConfig.uvue b/pages/mall/admin/user/MemberConfig.uvue
new file mode 100644
index 00000000..02bed9c3
--- /dev/null
+++ b/pages/mall/admin/user/MemberConfig.uvue
@@ -0,0 +1,341 @@
+<template>
+  <view class="user-config-page">
+    <view class="config-card">
+      <!-- 顶部 Tab 切换 -->
+      <view class="config-tabs">
+        <view 
+          class="tab-item" 
+          :class="{ active: activeTab === 0 }"
+          @click="activeTab = 0"
+        >
+          <text>用户等级配置</text>
+        </view>
+        <view 
+          class="tab-item" 
+          :class="{ active: activeTab === 1 }"
+          @click="activeTab = 1"
+        >
+          <text>新用户设置</text>
+        </view>
+      </view>
+      
+      <view class="config-content">
+        <!-- 用户等级配置表单 -->
+        <view v-if="activeTab === 0" class="config-form">
+          <view class="form-item">
+            <view class="item-label">
+              <text class="label-text">用户等级启用：</text>
+            </view>
+            <view class="item-content">
+              <radio-group class="radio-group" @change="onLevelEnabledChange">
+                <label class="radio-label">
+                  <radio value="1" :checked="levelConfig.enabled === '1'" color="#2f54eb" />
+                  <text class="radio-text">开启</text>
+                </label>
+                <label class="radio-label">
+                  <radio value="0" :checked="levelConfig.enabled === '0'" color="#2f54eb" />
+                  <text class="radio-text">关闭</text>
+                </label>
+              </radio-group>
+              <text class="item-desc">商城用户等级功能开启关闭</text>
+            </view>
+          </view>
+
+          <view class="form-item">
+            <view class="item-label">
+              <text class="label-text">订单赠送经验：</text>
+            </view>
+            <view class="item-content">
+              <input class="config-input" v-model="levelConfig.orderExp" type="number" />
+              <text class="item-desc">下单赠送用户经验比例 (实际支付1元赠送多少经验)</text>
+            </view>
+          </view>
+
+          <view class="form-item">
+            <view class="item-label">
+              <text class="label-text">邀新赠送经验：</text>
+            </view>
+            <view class="item-content">
+              <input class="config-input" v-model="levelConfig.inviteExp" type="number" />
+              <text class="item-desc">邀请一个新用户赠送用户经验值</text>
+            </view>
+          </view>
+
+          <view class="form-actions">
+            <button class="submit-btn" type="primary" @click="onSubmit">提交</button>
+          </view>
+        </view>
+
+        <!-- 新用户设置表单 -->
+        <view v-else class="config-form">
+          <view class="form-item">
+            <view class="item-label">
+              <text class="label-text">用户默认头像：</text>
+            </view>
+            <view class="item-content">
+              <view class="avatar-upload">
+                <image class="avatar-preview" src="https://img.crmeb.com/crmeb_demo/75211.png" mode="aspectFill" />
+                <view class="upload-mask">
+                  <text class="upload-icon">+</text>
+                </view>
+              </view>
+              <text class="item-desc">内用户默认头像，后台添加用户以及用户登录的默认头像显示，尺寸(80*80)</text>
+            </view>
+          </view>
+
+          <view class="form-item">
+            <view class="item-label">
+              <text class="label-text">强制手机号登录：</text>
+            </view>
+            <view class="item-content">
+              <radio-group class="radio-group" @change="onForcePhoneChange">
+                <label class="radio-label">
+                  <radio value="1" :checked="newUserConfig.forcePhone === '1'" color="#2f54eb" />
+                  <text class="radio-text">强制</text>
+                </label>
+                <label class="radio-label">
+                  <radio value="0" :checked="newUserConfig.forcePhone === '0'" color="#2f54eb" />
+                  <text class="radio-text">不强制</text>
+                </label>
+              </radio-group>
+              <text class="item-desc">用户在授权之后强制绑定手机号，可以实现用户多端统一</text>
+            </view>
+          </view>
+
+          <view class="form-item">
+            <view class="item-label">
+              <text class="label-text">赠送余额(元)：</text>
+            </view>
+            <view class="item-content">
+              <input class="config-input" v-model="newUserConfig.giftBalance" type="number" />
+              <text class="item-desc">新用户奖励金额，必须大于等于0，0为不赠送</text>
+            </view>
+          </view>
+
+          <view class="form-item">
+            <view class="item-label">
+              <text class="label-text">赠送积分：</text>
+            </view>
+            <view class="item-content">
+              <input class="config-input" v-model="newUserConfig.giftIntegral" type="number" />
+              <text class="item-desc">新用户奖励积分，必须大于等于0，0为不赠送</text>
+            </view>
+          </view>
+
+          <view class="form-actions">
+            <button class="submit-btn" type="primary" @click="onSubmit">提交</button>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { ref } from 'vue'
+
+const activeTab = ref(0)
+
+const levelConfig = ref({
+  enabled: '1',
+  orderExp: '1',
+  inviteExp: '100'
+})
+
+const newUserConfig = ref({
+  forcePhone: '1',
+  giftBalance: '88888',
+  giftIntegral: '88888'
+})
+
+function onLevelEnabledChange(e: any) {
+  levelConfig.value.enabled = e.detail.value
+}
+
+function onForcePhoneChange(e: any) {
+  newUserConfig.value.forcePhone = e.detail.value
+}
+
+function onSubmit() {
+  uni.showLoading({ title: '提交中...' })
+  setTimeout(() => {
+    uni.hideLoading()
+    uni.showToast({
+      title: '修改成功',
+      icon: 'success'
+    })
+  }, 800)
+}
+</script>
+
+<style scoped lang="scss">
+.user-config-page {
+  padding: 16px;
+  background-color: #f0f2f5;
+  min-height: 100vh;
+}
+
+.config-card {
+  background-color: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.config-tabs {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #f0f0f0;
+  padding: 0 24px;
+}
+
+.tab-item {
+  padding: 16px 20px;
+  cursor: pointer;
+  position: relative;
+  
+  text {
+    font-size: 15px;
+    color: #666;
+  }
+
+  &.active {
+    text {
+      color: #1890ff;
+      font-weight: 500;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: #1890ff;
+    }
+  }
+}
+
+.config-content {
+  padding: 32px 24px;
+}
+
+.config-form {
+  max-width: 800px;
+}
+
+.form-item {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 30px;
+  align-items: flex-start;
+}
+
+.item-label {
+  width: 160px;
+  padding-top: 6px;
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 24px;
+}
+
+.label-text {
+  font-size: 14px;
+  color: #333;
+}
+
+.item-content {
+  flex: 1;
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+  margin-bottom: 8px;
+}
+
+.radio-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+}
+
+.radio-text {
+  font-size: 14px;
+  color: #333;
+}
+
+.config-input {
+  width: 400px;
+  height: 36px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 0 12px;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.item-desc {
+  display: block;
+  font-size: 12px;
+  color: #bfbfbf;
+}
+
+.avatar-upload {
+  width: 60px;
+  height: 60px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  position: relative;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.avatar-preview {
+  width: 100%;
+  height: 100%;
+}
+
+.upload-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+  
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.upload-icon {
+  color: #fff;
+  font-size: 24px;
+}
+
+.form-actions {
+  margin-top: 48px;
+  padding-left: 184px;
+}
+
+.submit-btn {
+  width: 72px;
+  height: 32px;
+  background-color: #2f54eb;
+  border-color: #2f54eb;
+  color: #fff;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  margin: 0;
+}
+</style>
diff --git a/pages/mall/admin/user/Statistic.uvue b/pages/mall/admin/user/Statistic.uvue
new file mode 100644
index 00000000..838febcd
--- /dev/null
+++ b/pages/mall/admin/user/Statistic.uvue
@@ -0,0 +1,306 @@
+<template>
+  <view class="statistic-page">
+    <!-- 筛选栏 -->
+    <view class="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>
+        </view>
+      </view>
+      
+      <view class="filter-item">
+        <text class="filter-label">选择时间：</text>
+        <view class="date-picker-box">
+          <text class="date-icon">📅</text>
+          <text class="date-text">2026/01/04 - 2026/02/02</text>
+        </view>
+      </view>
+
+      <view class="filter-btns">
+        <button class="btn primary" @click="onSearch">查询</button>
+        <button class="btn" @click="onExport">导出</button>
+      </view>
+    </view>
+
+    <!-- 用户概况卡片区 -->
+    <view class="section-card">
+      <view class="section-header">
+        <text class="section-title">用户概况</text>
+        <text class="info-icon">ⓘ</text>
+      </view>
+
+      <view class="kpi-row">
+        <view class="kpi-card" v-for="item in kpiData" :key="item.title">
+          <view class="kpi-icon-box" :style="{ backgroundColor: item.bg }">
+            <text class="kpi-icon">{{ item.icon }}</text>
+          </view>
+          <view class="kpi-content">
+            <text class="kpi-label">{{ item.title }}</text>
+            <text class="kpi-value">{{ item.value }}</text>
+            <view class="kpi-meta">
+              <text class="meta-label">环比增长：</text>
+              <text class="meta-value" :class="item.trend">{{ item.percent }} {{ item.trend === 'up' ? '▲' : '▼' }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 图表区 -->
+      <view class="chart-container">
+        <view class="chart-header">
+          <view class="header-left"></view>
+          <view class="header-right">
+            <text class="download-icon">📥</text>
+          </view>
+        </view>
+        <AnalyticsMultiLineChart 
+          :xLabels="chartData.x" 
+          :series="chartData.series"
+          :height="450"
+        />
+      </view>
+    </view>
+
+    <!-- 地域分布与性别比例 -->
+    <view class="analysis-row">
+      <view class="map-col">
+        <AnalyticsUserMapTable />
+      </view>
+      <view class="gender-col">
+        <AnalyticsUserGenderSection />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { ref } from 'vue'
+import AnalyticsMultiLineChart from '@/components/analytics/AnalyticsMultiLineChart.uvue'
+import AnalyticsUserMapTable from '@/components/analytics/AnalyticsUserMapTable.uvue'
+import AnalyticsUserGenderSection from '@/components/analytics/AnalyticsUserGenderSection.uvue'
+
+const kpiData = [
+  { title: '累计用户', value: '80834', percent: '0.84%', trend: 'up', icon: '👤', bg: '#f3e8ff' },
+  { title: '访客数', value: '1138', percent: '1.04%', trend: 'down', icon: '👤', bg: '#e0f2fe' },
+  { title: '浏览量', value: '9519', percent: '2.34%', trend: 'down', icon: '👁️', bg: '#dcfce7' },
+  { title: '新增用户数', value: '680', percent: '4.36%', trend: 'down', icon: '👤', bg: '#ffedd5' },
+  { title: '成交用户数', value: '132', percent: '11.86%', trend: 'up', icon: '👤', bg: '#f3e8ff' },
+  { title: '付费会员数', value: '79', percent: '7.05%', trend: 'down', icon: '💎', bg: '#f3e8ff' }
+]
+
+const chartData = {
+  x: ['01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23', '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-01', '02-02'],
+  series: [
+    { name: '新增用户数', color: '#1890ff', data: [40, 30, 25, 30, 22, 10, 20, 32, 28, 15, 8, 12, 18, 22, 15, 12, 25, 30, 28, 25, 35, 20, 18, 22, 20, 15, 10, 8, 15, 38] },
+    { name: '访客数', color: '#52c41a', data: [70, 75, 65, 55, 65, 50, 45, 35, 50, 68, 72, 65, 50, 48, 55, 65, 75, 62, 58, 85, 70, 55, 48, 58, 65, 72, 68, 60, 45, 50] },
+    { name: '浏览量', color: '#fa8c16', data: [520, 500, 420, 280, 580, 180, 220, 100, 180, 450, 500, 400, 320, 340, 150, 280, 450, 320, 440, 460, 320, 260, 320, 280, 380, 400, 320, 330, 250, 300] },
+    { name: '成交用户数', color: '#722ed1', data: [15, 12, 10, 8, 18, 5, 8, 4, 6, 12, 15, 10, 8, 9, 4, 10, 12, 8, 10, 12, 8, 6, 10, 8, 12, 14, 10, 8, 5, 8] },
+    { name: '新增付费用户数', color: '#f5222d', data: [5, 4, 3, 2, 6, 1, 2, 1, 2, 4, 5, 3, 2, 3, 1, 3, 4, 2, 3, 4, 2, 2, 3, 2, 4, 5, 3, 2, 1, 3] }
+  ]
+}
+
+function onSearch() {
+  uni.showToast({ title: '搜索中...' })
+}
+
+function onExport() {
+  uni.showToast({ title: '导出中...' })
+}
+</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 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-label {
+  font-size: 14px;
+  color: #333;
+}
+
+.select-box {
+  width: 180px;
+  height: 32px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+}
+
+.select-text { font-size: 14px; color: #333; }
+.select-arrow { font-size: 10px; color: #bfbfbf; }
+
+.date-picker-box {
+  min-width: 240px;
+  height: 32px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 12px;
+  gap: 8px;
+}
+
+.date-icon { font-size: 14px; }
+.date-text { font-size: 14px; color: #333; }
+
+.filter-btns {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn {
+  height: 32px;
+  padding: 0 16px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  margin: 0;
+}
+
+.btn.primary {
+  background-color: #1890ff;
+  border-color: #1890ff;
+  color: #fff;
+}
+
+.section-card {
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.section-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #262626;
+}
+
+.info-icon {
+  font-size: 14px;
+  color: #bfbfbf;
+}
+
+.kpi-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.kpi-card {
+  flex: 1;
+  min-width: 200px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+  padding: 8px;
+}
+
+.kpi-icon-box {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.kpi-icon { font-size: 20px; }
+
+.kpi-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.kpi-label { font-size: 14px; color: #8c8c8c; }
+.kpi-value { font-size: 24px; font-weight: 500; color: #262626; }
+
+.kpi-meta {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 12px;
+}
+
+.meta-label { color: #8c8c8c; }
+.meta-value.up { color: #ff4d4f; }
+.meta-value.down { color: #52c41a; }
+
+.chart-container {
+  border-top: 1px solid #f0f0f0;
+  padding-top: 24px;
+}
+
+.chart-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.download-icon {
+  font-size: 18px;
+  color: #8c8c8c;
+  cursor: pointer;
+}
+
+.analysis-row {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  margin-top: 16px;
+  width: 100%;
+}
+
+.map-col {
+  flex: 7;
+}
+
+.gender-col {
+  flex: 3;
+}
+</style>
diff --git a/pages/mall/admin/user/list.uvue b/pages/mall/admin/user/list.uvue
index ed5537f0..6e9b4259 100644
--- a/pages/mall/admin/user/list.uvue
+++ b/pages/mall/admin/user/list.uvue
@@ -1,15 +1,123 @@
 <template>
-  <view class="page-container">
-    <view class="page-header">
-      <text class="page-title">用户管理</text>
-      <text class="page-subtitle">Component: UserList</text>
+  <view class="user-list-page">
+    <!-- 筛选面板 -->
+    <view class="filter-card">
+      <view class="filter-row">
+        <view class="filter-item">
+          <text class="label">用户搜索：</text>
+          <view class="input-group">
+            <view class="compact-select">
+              <text>请选择</text>
+              <text class="arrow">▼</text>
+            </view>
+            <input class="filter-input" placeholder="请输入用户" />
+          </view>
+        </view>
+        
+        <view class="filter-item">
+          <text class="label">用户等级：</text>
+          <view class="filter-select">
+            <text class="select-placeholder">请选择用户等级</text>
+            <text class="arrow">▼</text>
+          </view>
+        </view>
+
+        <view class="filter-item">
+          <text class="label">用户分组：</text>
+          <view class="filter-select">
+            <text class="select-placeholder">请选择用户分组</text>
+            <text class="arrow">▼</text>
+          </view>
+        </view>
+
+        <view class="filter-btns">
+          <button class="btn primary" @click="onSearch">搜索</button>
+          <button class="btn" @click="onReset">重置</button>
+          <text class="expand-btn">展开 ∨</text>
+        </view>
+      </view>
     </view>
-    
-    <view class="page-content">
-      <view class="placeholder-card">
-        <text class="placeholder-title">页面占位</text>
-        <text class="placeholder-desc">该功能模块正在开发中</text>
-        <text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
+
+    <!-- 内容卡片 -->
+    <view class="content-card">
+      <!-- 平台切换 Tabs -->
+      <view class="tabs-row">
+        <view 
+          v-for="(tab, index) in tabs" 
+          :key="index"
+          class="tab-item"
+          :class="{ active: activeTab === index }"
+          @click="activeTab = index"
+        >
+          <text>{{ tab }}</text>
+        </view>
+      </view>
+
+      <!-- 操作按钮行 -->
+      <view class="action-bar">
+        <button class="btn primary small" @click="onAddUser">添加用户</button>
+        <button class="btn ghost small">发送优惠券</button>
+        <button class="btn ghost small">发送图文消息</button>
+        <button class="btn ghost small">批量设置分组</button>
+        <button class="btn ghost small">批量设置标签</button>
+        <button class="btn ghost small">导出</button>
+      </view>
+
+      <!-- 用户列表表格 -->
+      <view class="table-container">
+        <!-- 表头 -->
+        <view class="table-header">
+          <view class="col col-check"><checkbox :checked="isAllChecked" /></view>
+          <view class="col col-expand"></view>
+          <view class="col col-id"><text>用户ID</text></view>
+          <view class="col col-avatar"><text>头像</text></view>
+          <view class="col col-name"><text>姓名</text></view>
+          <view class="col col-member"><text>付费会员</text></view>
+          <view class="col col-level"><text>用户等级</text></view>
+          <view class="col col-group"><text>分组</text></view>
+          <view class="col col-spread"><text>分销等级</text></view>
+          <view class="col col-phone"><text>手机号</text></view>
+          <view class="col col-type"><text>用户类型</text></view>
+          <view class="col col-balance sortable">
+            <text>余额</text>
+            <text class="sort-icon">↕</text>
+          </view>
+          <view class="col col-ops"><text>操作</text></view>
+        </view>
+
+        <!-- 表格内容 -->
+        <view class="table-body">
+          <view v-for="user in userList" :key="user.id" class="table-row">
+            <view class="col col-check"><checkbox :checked="user.checked" /></view>
+            <view class="col col-expand"><text class="expand-arrow">›</text></view>
+            <view class="col col-id"><text>{{ user.id }}</text></view>
+            <view class="col col-avatar">
+              <image class="avatar-img" :src="user.avatar" mode="aspectFill" />
+            </view>
+            <view class="col col-name">
+              <text class="name-text">{{ user.nickname }}</text>
+            </view>
+            <view class="col col-member">
+              <text :class="user.isMember === '是' ? 'status-yes' : 'status-no'">{{ user.isMember }}</text>
+            </view>
+            <view class="col col-level"><text>{{ user.level }}</text></view>
+            <view class="col col-group"><text>{{ user.group }}</text></view>
+            <view class="col col-spread"><text>{{ user.spreadLevel }}</text></view>
+            <view class="col col-phone"><text>{{ user.phone }}</text></view>
+            <view class="col col-type"><text>{{ user.userType }}</text></view>
+            <view class="col col-balance"><text>{{ user.balance }}</text></view>
+            <view class="col col-ops">
+              <text class="op-link" @click="onDetail(user)">详情</text>
+              <view class="op-divider"></view>
+              <text class="op-link more">更多 ⌵</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 分页区域 (模拟) -->
+      <view class="pagination">
+        <text class="page-info">共 80834 条数据</text>
       </view>
     </view>
   </view>
@@ -18,64 +126,310 @@
 <script setup lang="uts">
 import { ref } from 'vue'
 
-// TODO: 实现 用户管理 的具体功能
-const loading = ref<boolean>(false)
+const activeTab = ref(0)
+const tabs = ['全部', '微信公众号', '微信小程序', 'H5', 'PC', 'APP']
+const isAllChecked = ref(false)
+
+const userList = ref([
+  { id: '77414', avatar: 'https://img.crmeb.com/crmeb_demo/77414.png', nickname: '199****0268', isMember: '否', level: '无', group: '无', spreadLevel: '', phone: '199****0268', userType: '公众号', balance: '88888.00', checked: false },
+  { id: '75311', avatar: 'https://img.crmeb.com/crmeb_demo/75311.png', nickname: 'wljbhg', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100002.00', checked: false },
+  { id: '75305', avatar: 'https://img.crmeb.com/crmeb_demo/75305.png', nickname: '相见欢', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
+  { id: '75296', avatar: 'https://img.crmeb.com/crmeb_demo/75296.png', nickname: '..', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
+  { id: '75293', avatar: 'https://img.crmeb.com/crmeb_demo/75293.png', nickname: '钟(钏)华', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
+  { id: '75289', avatar: 'https://img.crmeb.com/crmeb_demo/75289.png', nickname: '小二上酒', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
+  { id: '75257', avatar: 'https://img.crmeb.com/crmeb_demo/75257.png', nickname: '5+7', isMember: '是', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
+  { id: '75226', avatar: 'https://img.crmeb.com/crmeb_demo/75226.png', nickname: '慢步前行', isMember: '是', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
+  { id: '75211', avatar: 'https://img.crmeb.com/crmeb_demo/75211.png', nickname: '难得糊涂', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false }
+])
+
+function onSearch() {
+  uni.showToast({ title: '搜索中...', icon: 'none' })
+}
+
+function onReset() {
+  uni.showToast({ title: '已重置', icon: 'none' })
+}
+
+function onAddUser() {
+  uni.showToast({ title: '添加用户', icon: 'none' })
+}
+
+function onDetail(user: any) {
+  uni.showToast({ title: '查看用户: ' + user.id, icon: 'none' })
+}
 </script>
 
 <style scoped lang="scss">
-.page-container {
-  padding: 20px;
+.user-list-page {
+  padding: 16px;
+  background-color: #f0f2f5;
   min-height: 100vh;
-  background: #f5f5f5;
 }
 
-.page-header {
-  margin-bottom: 20px;
-}
-
-.page-title {
-  display: block;
-  font-size: 24px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 8px;
-}
-
-.page-subtitle {
-  display: block;
-  font-size: 14px;
-  color: #999;
-}
-
-.page-content {
+/* 筛选卡片 */
+.filter-card {
   background: #fff;
   border-radius: 4px;
   padding: 24px;
+  margin-bottom: 16px;
 }
 
-.placeholder-card {
-  text-align: center;
-  padding: 60px 20px;
+.filter-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 24px;
 }
 
-.placeholder-title {
-  display: block;
+.filter-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.label {
+  font-size: 14px;
+  color: #333;
+  width: 70px;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: row;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  height: 32px;
+  width: 260px;
+}
+
+.compact-select {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 12px;
+  border-right: 1px solid #d9d9d9;
+  background: #fafafa;
+  text { font-size: 14px; color: #666; }
+  .arrow { font-size: 10px; margin-left: 4px; color: #bfbfbf; }
+}
+
+.filter-input {
+  flex: 1;
+  height: 30px;
+  padding: 0 12px;
+  font-size: 14px;
+}
+
+.filter-select {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  height: 32px;
+  width: 220px;
+  padding: 0 12px;
+  background: #fff;
+}
+
+.select-placeholder { font-size: 14px; color: #bfbfbf; }
+.arrow { font-size: 10px; color: #bfbfbf; }
+
+.filter-btns {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn {
+  height: 32px;
+  padding: 0 16px;
+  font-size: 14px;
+  border-radius: 2px;
+  border: 1px solid #d9d9d9;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0;
+}
+
+.btn.primary {
+  background: #2f54eb;
+  border-color: #2f54eb;
+  color: #fff;
+}
+
+.btn.ghost {
+  color: #2f54eb;
+  border-color: #2f54eb;
+  background: #fff;
+}
+
+.btn.small {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 13px;
+}
+
+.expand-btn {
+  font-size: 14px;
+  color: #2f54eb;
+  cursor: pointer;
+}
+
+/* 内容卡片 */
+.content-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 0;
+  overflow: hidden;
+}
+
+/* Tabs */
+.tabs-row {
+  display: flex;
+  flex-direction: row;
+  padding: 0 24px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.tab-item {
+  padding: 16px 20px;
+  cursor: pointer;
+  position: relative;
+  text { font-size: 15px; color: #666; }
+
+  &.active {
+    text { color: #2f54eb; font-weight: 500; }
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: #2f54eb;
+    }
+  }
+}
+
+/* 操作栏 */
+.action-bar {
+  padding: 16px 24px;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}
+
+/* 表格 */
+.table-container {
+  padding: 0 24px 24px;
+}
+
+.table-header {
+  display: flex;
+  flex-direction: row;
+  background: #f8faff;
+  border-bottom: 1px solid #f0f0f0;
+  padding: 12px 0;
+}
+
+.table-row {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #f0f0f0;
+  padding: 16px 0;
+  align-items: center;
+  
+  &:hover {
+    background: #fafafa;
+  }
+}
+
+.col {
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #333;
+}
+
+.col-check { width: 40px; justify-content: center; }
+.col-expand { width: 30px; justify-content: center; }
+.col-id { width: 80px; }
+.col-avatar { width: 80px; justify-content: center; }
+.col-name { width: 140px; }
+.col-member { width: 90px; justify-content: center; }
+.col-level { width: 90px; justify-content: center; }
+.col-group { width: 110px; justify-content: center; }
+.col-spread { width: 110px; justify-content: center; }
+.col-phone { width: 130px; }
+.col-type { width: 90px; }
+.col-balance { width: 110px; }
+.col-ops { flex: 1; min-width: 120px; justify-content: flex-end; padding-right: 16px; }
+
+.table-header .col {
+  color: #5c5c5c;
+  font-weight: 500;
+}
+
+.sort-icon {
+  font-size: 12px;
+  margin-left: 4px;
+  color: #bfbfbf;
+}
+
+.expand-arrow {
+  color: #bfbfbf;
   font-size: 18px;
-  font-weight: 600;
-  color: #666;
-  margin-bottom: 12px;
 }
 
-.placeholder-desc {
-  display: block;
+.avatar-img {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  background: #f5f5f5;
+}
+
+.name-text {
+  font-weight: 400;
+}
+
+.status-yes { color: #52c41a; }
+.status-no { color: #ff4d4f; }
+
+.op-link {
+  color: #2f54eb;
+  cursor: pointer;
+  font-size: 14px;
+  
+  &.more {
+    margin-left: 4px;
+  }
+}
+
+.op-divider {
+  width: 1px;
+  height: 14px;
+  background: #e8e8e8;
+  margin: 0 8px;
+}
+
+.pagination {
+  padding: 16px 24px;
+  border-top: 1px solid #f0f0f0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.page-info {
   font-size: 14px;
   color: #999;
-  margin-bottom: 8px;
-}
-
-.placeholder-info {
-  display: block;
-  font-size: 12px;
-  color: #1890ff;
 }
 </style>