diff --git a/CRMEB b/CRMEB
new file mode 160000
index 00000000..d3dba751
--- /dev/null
+++ b/CRMEB
@@ -0,0 +1 @@
+Subproject commit d3dba751cabc8becc01843916c8e4a947379391b
diff --git a/ak/config.uts b/ak/config.uts
index 93ff692b..b9df9aeb 100644
--- a/ak/config.uts
+++ b/ak/config.uts
@@ -1,14 +1,23 @@
 // Supabase 配置
-// 开发环境 - 本地 Supabase
+// 内网环境 - 本地部署的 Supabase
+// IP: 192.168.1.63
+// Kong HTTP Port: 8000
+export const SUPA_URL: string = 'http://192.168.1.63:8000'
+export const SUPA_KEY: string = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlzcyI6InN1cGFiYXNlIiwiaWF0IjoxNzY4ODMwNjI0LCJleHAiOjE5MjY1MTA2MjR9.mDVl-kIOdRK9v6VTxo0TDF8r7X7xk3PZXazaavHyVvg'
+
+// WebSocket 实时连接（内网使用 ws:// 而非 wss://）
+export const WS_URL: string = 'ws://192.168.1.63:8000/realtime/v1/websocket'
+
+// 备用配置（已注释，如需切换可取消注释）
+// 开发环境 - 其他内网地址
 // export const SUPA_URL: string = 'http://192.168.0.150:8080'
 // export const SUPA_KEY: string = 'your-anon-key'
+// export const WS_URL: string = 'ws://192.168.0.150:8080/realtime/v1/websocket'
 
-// 生产环境 - Supabase 云服务
-export const SUPA_URL: string = 'https://ak3.oulog.com'
-export const SUPA_KEY: string = 'your-anon-key'
-
-// WebSocket 实时连接
-export const WS_URL: string = 'wss://ak3.oulog.com/realtime/v1/websocket'
+// 生产环境 - Supabase 云服务（已注释）
+// export const SUPA_URL: string = 'https://ak3.oulog.com'
+// export const SUPA_KEY: string = 'your-anon-key'
+// export const WS_URL: string = 'wss://ak3.oulog.com/realtime/v1/websocket'
 
 // 路由配置
 export const HOME_REDIRECT: string = '/pages/mall/consumer/index'
diff --git a/components/analytics/AnalyticsBarMini.uvue b/components/analytics/AnalyticsBarMini.uvue
new file mode 100644
index 00000000..21580e50
--- /dev/null
+++ b/components/analytics/AnalyticsBarMini.uvue
@@ -0,0 +1,60 @@
+<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'
+
+type Item = { name: string; value: number }
+
+export default {
+  components: {
+    EChartsView
+  },
+  props: {
+    items: { type: Array, default: () => [] },
+    height: { type: Number, default: 300 }
+  },
+  data() {
+    return { 
+      heightPx: '300px',
+      chartOption: {} as any
+    }
+  },
+  watch: {
+    items: { handler() { this.updateOption() }, deep: true },
+    height: { 
+      handler() { 
+        this.heightPx = `${this.height}px`
+      } 
+    }
+  },
+  mounted() {
+    this.heightPx = `${this.height}px`
+    this.updateOption()
+  },
+  methods: {
+    updateOption() {
+      const x = (this.items as Array<Item>).map((it) => it.name)
+      const y = (this.items as Array<Item>).map((it) => {
+        const n = Number(it.value)
+        return isFinite(n) ? n : 0
+      })
+      this.chartOption = {
+        grid: { left: 80, right: 24, top: 18, bottom: 18 },
+        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+        xAxis: { type: 'value', axisLabel: { color: 'rgba(0,0,0,0.55)' }, splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } } },
+        yAxis: { type: 'category', data: x, axisTick: { show: false }, axisLabel: { color: 'rgba(0,0,0,0.65)' } },
+        series: [{ type: 'bar', data: y, barWidth: 14, itemStyle: { borderRadius: 6 } }]
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.chart-wrap { width: 100%; }
+.chart { width: 100%; height: 100%; }
+</style>
diff --git a/components/analytics/AnalyticsComboChart.uvue b/components/analytics/AnalyticsComboChart.uvue
new file mode 100644
index 00000000..5cf252a2
--- /dev/null
+++ b/components/analytics/AnalyticsComboChart.uvue
@@ -0,0 +1,116 @@
+<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: () => [] },
+    gmv: { type: Array, default: () => [] },
+    orders: { type: Array, default: () => [] },
+    height: { type: Number, default: 320 }
+  },
+
+  data() {
+    return {
+      heightPx: '320px',
+      chartOption: {} as any
+    }
+  },
+
+  watch: {
+    xLabels: { handler() { this.updateOption() }, deep: true },
+    gmv: { handler() { this.updateOption() }, deep: true },
+    orders: { handler() { this.updateOption() }, deep: true },
+    height: { 
+      handler() { 
+        this.heightPx = `${this.height}px`
+      } 
+    }
+  },
+
+  mounted() {
+    this.heightPx = `${this.height}px`
+    this.updateOption()
+  },
+
+  methods: {
+    updateOption() {
+      const x = (this.xLabels as Array<any>).map((s) => String(s))
+      const bar = (this.gmv as Array<any>).map((v) => {
+        const n = Number(v)
+        return isFinite(n) ? n : 0
+      })
+      const line = (this.orders as Array<any>).map((v) => {
+        const n = Number(v)
+        return isFinite(n) ? n : 0
+      })
+
+      this.chartOption = {
+        grid: { left: 44, right: 44, top: 24, bottom: 36 },
+        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+        legend: { top: 0, left: 0, itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 12 } },
+        xAxis: {
+          type: 'category',
+          data: x,
+          axisTick: { show: false },
+          axisLine: { lineStyle: { color: 'rgba(0,0,0,0.12)' } },
+          axisLabel: { color: 'rgba(0,0,0,0.55)' }
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: 'GMV',
+            axisLine: { show: false },
+            splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } },
+            axisLabel: { color: 'rgba(0,0,0,0.55)' }
+          },
+          {
+            type: 'value',
+            name: '订单',
+            axisLine: { show: false },
+            splitLine: { show: false },
+            axisLabel: { color: 'rgba(0,0,0,0.55)' }
+          }
+        ],
+        series: [
+          {
+            name: 'GMV',
+            type: 'bar',
+            data: bar,
+            barWidth: 14,
+            itemStyle: { borderRadius: [6, 6, 0, 0] }
+          },
+          {
+            name: '订单数',
+            type: 'line',
+            yAxisIndex: 1,
+            data: line,
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 6,
+            lineStyle: { width: 2 }
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.chart-wrap {
+  width: 100%;
+}
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/components/analytics/AnalyticsDonutChart.uvue b/components/analytics/AnalyticsDonutChart.uvue
new file mode 100644
index 00000000..a2fce1be
--- /dev/null
+++ b/components/analytics/AnalyticsDonutChart.uvue
@@ -0,0 +1,70 @@
+<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'
+
+type Item = { name: string; value: number }
+
+export default {
+  components: {
+    EChartsView
+  },
+  props: {
+    items: { type: Array, default: () => [] },
+    height: { type: Number, default: 300 }
+  },
+  data() {
+    return { 
+      heightPx: '300px',
+      chartOption: {} as any
+    }
+  },
+  watch: {
+    items: { handler() { this.updateOption() }, deep: true },
+    height: { 
+      handler() { 
+        this.heightPx = `${this.height}px`
+      } 
+    }
+  },
+  mounted() {
+    this.heightPx = `${this.height}px`
+    this.updateOption()
+  },
+  methods: {
+    updateOption() {
+      const data = (this.items as Array<Item>).map((it) => ({
+        name: it.name,
+        value: (() => {
+          const n = Number(it.value)
+          return isFinite(n) ? n : 0
+        })()
+      }))
+      this.chartOption = {
+        tooltip: { trigger: 'item' },
+        legend: { left: 0, bottom: 0, itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 12 } },
+        series: [
+          {
+            type: 'pie',
+            radius: ['55%', '75%'],
+            center: ['50%', '45%'],
+            avoidLabelOverlap: true,
+            label: { show: true, formatter: '{b}\n{d}%' },
+            labelLine: { length: 10, length2: 10 },
+            data
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.chart-wrap { width: 100%; }
+.chart { width: 100%; height: 100%; }
+</style>
diff --git a/components/analytics/ChartCard.uvue b/components/analytics/ChartCard.uvue
new file mode 100644
index 00000000..cd35b39f
--- /dev/null
+++ b/components/analytics/ChartCard.uvue
@@ -0,0 +1,57 @@
+<template>
+  <view class="card">
+    <view class="hd">
+      <view class="left">
+        <text class="t">{{ title }}</text>
+        <text class="d" v-if="desc">{{ desc }}</text>
+      </view>
+      <slot name="extra"></slot>
+    </view>
+    <view class="bd">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  props: {
+    title: { type: String, default: '' },
+    desc: { type: String, default: '' }
+  }
+}
+</script>
+
+<style>
+.card {
+  border: 1rpx solid rgba(17, 17, 17, 0.08);
+  border-radius: 16rpx;
+  padding: 14rpx;
+  background: #fff;
+  flex: 1;
+}
+
+.hd {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 10rpx;
+}
+
+.t {
+  font-size: 24rpx;
+  font-weight: 800;
+  color: #111;
+}
+
+.d {
+  font-size: 20rpx;
+  color: rgba(17, 17, 17, 0.55);
+  margin-top: 4rpx;
+  display: block;
+}
+
+.bd {
+  padding-top: 4rpx;
+}
+</style>
diff --git a/components/analytics/KpiCard.uvue b/components/analytics/KpiCard.uvue
new file mode 100644
index 00000000..2f144d96
--- /dev/null
+++ b/components/analytics/KpiCard.uvue
@@ -0,0 +1,98 @@
+<template>
+  <view class="kpi" :class="tone">
+    <text class="t">{{ title }}</text>
+    <text class="v">{{ value }}</text>
+
+    <view class="row" v-if="!deltaHidden">
+      <text class="delta" :class="delta >= 0 ? 'pos' : 'neg'">
+        {{ delta >= 0 ? '+' : '' }}{{ delta.toFixed(1) }}%
+      </text>
+      <text class="s">{{ subtitle }}</text>
+    </view>
+
+    <text class="s" v-else>{{ subtitle }}</text>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  props: {
+    title: { type: String, default: '' },
+    value: { type: String, default: '' },
+    subtitle: { type: String, default: '' },
+    delta: { type: Number, default: 0 },
+    tone: { type: String, default: 'danger' },
+    deltaHidden: { type: Boolean, default: false }
+  }
+}
+</script>
+
+<style>
+.kpi {
+  width: calc(50% - 7rpx);
+  padding: 16rpx;
+  border-radius: 16rpx;
+  color: #fff;
+}
+
+.t {
+  font-size: 22rpx;
+  opacity: 0.9;
+}
+
+.v {
+  font-size: 36rpx;
+  font-weight: 800;
+  margin-top: 10rpx;
+  display: block;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  margin-top: 10rpx;
+}
+
+.s {
+  font-size: 20rpx;
+  opacity: 0.85;
+}
+
+.delta {
+  font-size: 20rpx;
+  padding: 2rpx 10rpx;
+  border-radius: 999rpx;
+  background: rgba(255, 255, 255, 0.18);
+  font-weight: 700;
+}
+
+.delta.pos {
+}
+
+.delta.neg {
+}
+
+/* tones */
+.danger {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4f 100%);
+}
+
+.teal {
+  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
+}
+
+.green {
+  background: linear-gradient(135deg, #a8e6cf 0%, #7fcdbb 100%);
+}
+
+.amber {
+  background: linear-gradient(135deg, #ffd93d 0%, #ffa07a 100%);
+}
+
+@media screen and (max-width: 768px) {
+  .kpi {
+    width: 100%;
+  }
+}
+</style>
diff --git a/components/analytics/PeriodTabs.uvue b/components/analytics/PeriodTabs.uvue
new file mode 100644
index 00000000..603f4f1f
--- /dev/null
+++ b/components/analytics/PeriodTabs.uvue
@@ -0,0 +1,49 @@
+<template>
+  <view class="tabs">
+    <view
+      v-for="it in items"
+      :key="it.value"
+      class="tab"
+      :class="value === it.value ? 'on' : ''"
+      @click="pick(it.value)"
+    >
+      <text>{{ it.label }}</text>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  props: {
+    value: { type: String, default: '30d' },
+    items: { type: Array, default: () => [] }
+  },
+  methods: {
+    pick(v: string) {
+      this.$emit('change', v)
+    }
+  }
+}
+</script>
+
+<style>
+.tabs {
+  display: flex;
+  background: rgba(17, 17, 17, 0.04);
+  border-radius: 999rpx;
+  padding: 6rpx;
+}
+
+.tab {
+  padding: 10rpx 16rpx;
+  border-radius: 999rpx;
+  color: rgba(17, 17, 17, 0.65);
+  font-size: 22rpx;
+}
+
+.tab.on {
+  color: #fff;
+  font-weight: 700;
+  background: linear-gradient(135deg, #ff4d4f 0%, #ff7a45 100%);
+}
+</style>
diff --git a/components/analytics/charts/AreaLine.uvue b/components/analytics/charts/AreaLine.uvue
new file mode 100644
index 00000000..a44bc0a5
--- /dev/null
+++ b/components/analytics/charts/AreaLine.uvue
@@ -0,0 +1,23 @@
+<template>
+  <view class="wrap" :style="{ height: height + 'px' }">
+    <EChartsView :option="option" />
+  </view>
+</template>
+
+<script lang="uts">
+import EChartsView from '@/uni_modules/charts/EChartsView.vue'
+
+export default {
+  components: { EChartsView },
+  props: {
+    option: { type: Object, default: () => ({}) },
+    height: { type: Number, default: 280 }
+  }
+}
+</script>
+
+<style>
+.wrap {
+  width: 100%;
+}
+</style>
diff --git a/components/analytics/charts/ComboBarLine.uvue b/components/analytics/charts/ComboBarLine.uvue
new file mode 100644
index 00000000..fb5adc6f
--- /dev/null
+++ b/components/analytics/charts/ComboBarLine.uvue
@@ -0,0 +1,23 @@
+<template>
+  <view class="wrap" :style="{ height: height + 'px' }">
+    <EChartsView :option="option" />
+  </view>
+</template>
+
+<script lang="uts">
+import EChartsView from '@/uni_modules/charts/EChartsView.vue'
+
+export default {
+  components: { EChartsView },
+  props: {
+    option: { type: Object, default: () => ({}) },
+    height: { type: Number, default: 320 }
+  }
+}
+</script>
+
+<style>
+.wrap {
+  width: 100%;
+}
+</style>
diff --git a/components/analytics/charts/DonutPie.uvue b/components/analytics/charts/DonutPie.uvue
new file mode 100644
index 00000000..a44bc0a5
--- /dev/null
+++ b/components/analytics/charts/DonutPie.uvue
@@ -0,0 +1,23 @@
+<template>
+  <view class="wrap" :style="{ height: height + 'px' }">
+    <EChartsView :option="option" />
+  </view>
+</template>
+
+<script lang="uts">
+import EChartsView from '@/uni_modules/charts/EChartsView.vue'
+
+export default {
+  components: { EChartsView },
+  props: {
+    option: { type: Object, default: () => ({}) },
+    height: { type: Number, default: 280 }
+  }
+}
+</script>
+
+<style>
+.wrap {
+  width: 100%;
+}
+</style>
diff --git a/docs/ANALYTICS_UI_DESIGN.md b/docs/ANALYTICS_UI_DESIGN.md
new file mode 100644
index 00000000..0f9cc197
--- /dev/null
+++ b/docs/ANALYTICS_UI_DESIGN.md
@@ -0,0 +1,665 @@
+# 数据分析页面 UI 设计文档
+
+## 📋 文档说明
+
+本文档记录了**数据分析中心页面**的 UI 设计实现，遵循项目的 UI 设计规范，采用现代简约的设计风格，提供清晰直观的数据可视化界面。
+
+### 页面访问 URL
+
+#### 主页面路径
+- **完整路径**：`/pages/mall/analytics/index`
+- **页面标题**：数据分析中心
+- **导航栏样式**：自定义导航栏（`navigationStyle: "custom"`）
+- **路由配置位置**：`subPackages` → `pages/mall/analytics` → `index`
+
+#### 相关子页面 URL
+
+- **销售报表**：`/pages/mall/analytics/sales-report`
+- **用户分析**：`/pages/mall/analytics/user-analysis`
+- **商品洞察**：`/pages/mall/analytics/product-insights`
+- **市场趋势**：`/pages/mall/analytics/market-trends`
+- **自定义报表**：`/pages/mall/analytics/custom-report`
+- **报表详情**：`/pages/mall/analytics/report-detail`
+- **数据分析详情**：`/pages/mall/analytics/data-detail`
+- **数据洞察详情**：`/pages/mall/analytics/insight-detail`
+
+### 访问方式
+
+#### 1. 代码中跳转（uni-app x）
+
+```typescript
+// 方式一：使用 navigateTo（推荐，保留返回栈）
+uni.navigateTo({
+  url: '/pages/mall/analytics/index'
+})
+
+// 方式二：使用 redirectTo（替换当前页面，不保留返回栈）
+uni.redirectTo({
+  url: '/pages/mall/analytics/index'
+})
+
+// 方式三：使用 reLaunch（关闭所有页面，打开新页面）
+uni.reLaunch({
+  url: '/pages/mall/analytics/index'
+})
+```
+
+#### 2. 从其他页面跳转示例
+
+```typescript
+// 从管理后台跳转到数据分析中心
+const goToAnalytics = () => {
+  uni.navigateTo({
+    url: '/pages/mall/analytics/index'
+  })
+}
+
+// 从首页跳转到数据分析中心
+const goToDataAnalysis = () => {
+  uni.navigateTo({
+    url: '/pages/mall/analytics/index',
+    success: () => {
+      console.log('跳转成功')
+    },
+    fail: (err) => {
+      console.error('跳转失败:', err)
+    }
+  })
+}
+```
+
+#### 3. 带参数跳转
+
+```typescript
+// 跳转并传递参数
+uni.navigateTo({
+  url: '/pages/mall/analytics/index?period=30d&refresh=true'
+})
+
+// 在目标页面接收参数（index.uvue 的 onLoad）
+onLoad(options: any) {
+  const period = options.period || '30d'
+  const refresh = options.refresh === 'true'
+  if (period) {
+    this.period = period
+  }
+  if (refresh) {
+    this.refreshData()
+  }
+}
+```
+
+#### 4. 页面间跳转
+
+```typescript
+// 从数据分析首页跳转到销售报表
+const goToSalesReport = () => {
+  uni.navigateTo({
+    url: '/pages/mall/analytics/sales-report'
+  })
+}
+
+// 从数据分析首页跳转到用户分析
+const goToUserAnalysis = () => {
+  uni.navigateTo({
+    url: '/pages/mall/analytics/user-analysis'
+  })
+}
+```
+
+#### 5. 权限控制示例
+
+```typescript
+// 跳转前检查权限
+const goToAnalyticsWithAuth = () => {
+  // 检查用户是否有数据分析权限
+  const userType = getUserType() // 假设这是获取用户类型的函数
+  
+  if (userType === 'admin' || userType === 'analyst') {
+    uni.navigateTo({
+      url: '/pages/mall/analytics/index'
+    })
+  } else {
+    uni.showToast({
+      title: '您没有访问权限',
+      icon: 'none'
+    })
+  }
+}
+```
+
+#### 6. 在页面配置中设置入口
+
+如果需要在 TabBar 或其他导航中添加入口，可以在 `pages.json` 中配置：
+
+```json
+{
+  "tabBar": {
+    "list": [
+      {
+        "pagePath": "pages/mall/analytics/index",
+        "text": "数据分析"
+      }
+    ]
+  }
+}
+```
+
+### 设计原则
+
+1. **数据优先**：突出核心数据指标，减少视觉干扰
+2. **层次清晰**：通过卡片、阴影、间距建立清晰的信息层次
+3. **视觉统一**：遵循项目统一的颜色系统和设计规范
+4. **响应式适配**：适配不同屏幕尺寸，确保良好的用户体验
+
+---
+
+## 一、页面结构
+
+### 1.1 整体布局
+
+```
+┌─────────────────────────────────────┐
+│  Header（头部控制面板）              │
+│  - 标题 + 最后更新时间               │
+│  - 刷新/导出按钮                     │
+├─────────────────────────────────────┤
+│  实时大屏（4个核心指标卡片）         │
+│  - GMV / 订单 / 用户 / 转化率        │
+├─────────────────────────────────────┤
+│  时间筛选（Tab切换）                 │
+│  - 今日/本周/本月/本季度             │
+├─────────────────────────────────────┤
+│  销售分析                            │
+│  - 销售趋势图                        │
+│  - 商品销量排行                      │
+├─────────────────────────────────────┤
+│  用户行为分析                        │
+│  - 用户活跃度                        │
+│  - 流量来源                          │
+├─────────────────────────────────────┤
+│  商家表现                            │
+│  - 商家排行榜                        │
+├─────────────────────────────────────┤
+│  配送效率                            │
+│  - 配送时效                          │
+│  - 配送覆盖                          │
+├─────────────────────────────────────┤
+│  快速分析工具（6个工具卡片）         │
+│  - 销售报表/用户分析/商品洞察等      │
+└─────────────────────────────────────┘
+```
+
+### 1.2 模块划分
+
+1. **Header 区域**：页面标题、更新时间、操作按钮
+2. **实时大屏**：核心业务指标（GMV、订单、用户、转化率）
+3. **时间筛选**：时间维度切换（今日/本周/本月/本季度）
+4. **销售分析**：销售趋势、商品排行
+5. **用户行为分析**：用户活跃度、流量来源
+6. **商家表现**：商家销售排行榜
+7. **配送效率**：配送时效、覆盖情况
+8. **快速工具**：常用分析工具入口
+
+---
+
+## 二、设计规范应用
+
+### 2.1 CSS 变量系统
+
+所有设计 token 通过 CSS 变量定义，便于统一管理和换肤：
+
+```css
+:root {
+  /* 主题色 */
+  --theme-primary: #FF4D4F;
+  --theme-primary-light: #FF7875;
+  --theme-primary-dark: #CF1322;
+  --gradient-start: #FF4D4F;
+  --gradient-end: #FF7A45;
+  
+  /* 功能色 */
+  --success: #52C41A;
+  --warning: #FAAD14;
+  --error: #FF4D4F;
+  --info: #1890FF;
+  
+  /* 文字颜色 */
+  --text-primary: #111111;
+  --text-secondary: #333333;
+  --text-tertiary: #666666;
+  --text-disabled: #999999;
+  
+  /* 背景颜色 */
+  --bg-primary: #FFFFFF;
+  --bg-secondary: #F7F8FA;
+  --bg-tertiary: #F5F5F5;
+  
+  /* 边框 */
+  --border-color: rgba(0, 0, 0, 0.06);
+  
+  /* 阴影 */
+  --shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  
+  /* 圆角 */
+  --radius-md: 12rpx;
+  --radius-lg: 20rpx;
+  --radius-xl: 24rpx;
+  
+  /* 间距 */
+  --spacing-sm: 16rpx;
+  --spacing-md: 24rpx;
+  --spacing-lg: 32rpx;
+}
+```
+
+### 2.2 卡片式设计
+
+所有数据模块采用卡片式设计：
+
+- **圆角**：`border-radius: 20rpx`（符合 UI 规范）
+- **阴影**：`box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06)`（轻微阴影）
+- **背景**：白色背景 `#FFFFFF`
+- **内边距**：`32rpx`（统一间距）
+- **外边距**：`24rpx`（卡片间距）
+
+### 2.3 颜色系统应用
+
+#### Header 渐变背景
+```css
+background: linear-gradient(135deg, #FF4D4F 0%, #FF7A45 100%);
+```
+
+#### 实时指标卡片渐变
+- **GMV（收入）**：`#FF6B6B → #FF4D4F`（红色渐变）
+- **订单**：`#4ECDC4 → #44A08D`（青色渐变）
+- **用户**：`#A8E6CF → #7FCDBB`（绿色渐变）
+- **转化率**：`#FFD93D → #FFA07A`（黄色渐变）
+
+#### 状态颜色
+- **增长（正）**：绿色 `#52C41A` + 浅绿背景
+- **下降（负）**：红色 `#FF4D4F` + 浅红背景
+- **中性**：灰色 `#666666` + 浅灰背景
+
+---
+
+## 三、组件设计详解
+
+### 3.1 Header 头部
+
+**设计特点**：
+- 使用主题色渐变背景
+- 左侧显示标题和更新时间
+- 右侧操作按钮使用毛玻璃效果
+
+**实现代码**：
+```css
+.header {
+  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
+  box-shadow: var(--shadow-md);
+}
+
+.refresh-btn,
+.export-btn {
+  width: 64rpx;
+  height: 64rpx;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  backdrop-filter: blur(10rpx);
+}
+```
+
+### 3.2 实时大屏卡片
+
+**设计特点**：
+- 2x2 网格布局
+- 每个卡片使用不同渐变背景
+- 数值突出显示，增长指标使用标签样式
+
+**布局**：
+```css
+.dashboard-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+}
+
+.dashboard-card {
+  width: calc(50% - var(--spacing-md) / 2);
+  padding: var(--spacing-lg) var(--spacing-md);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+```
+
+### 3.3 时间筛选 Tab
+
+**设计特点**：
+- 激活状态使用主题色渐变
+- 添加阴影效果增强层次
+- 平滑过渡动画
+
+**实现**：
+```css
+.filter-tab.active {
+  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+  color: #fff;
+  font-weight: 500;
+  box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+}
+```
+
+### 3.4 销售分析卡片
+
+**设计特点**：
+- 图表区域使用浅色背景区分
+- 统计项使用独立卡片样式
+- 数值使用主题色突出
+
+**布局**：
+```css
+.trend-stats {
+  display: flex;
+  justify-content: space-around;
+  gap: var(--spacing-md);
+}
+
+.stat-item {
+  flex: 1;
+  padding: var(--spacing-md);
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+}
+```
+
+### 3.5 商品排行
+
+**设计特点**：
+- 排名使用圆形徽章，使用主题色渐变
+- 商品名称和销量清晰对比
+- 统一的分割线
+
+**实现**：
+```css
+.rank-number {
+  width: 56rpx;
+  height: 56rpx;
+  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+  border-radius: 50%;
+  box-shadow: var(--shadow-sm);
+}
+```
+
+### 3.6 用户行为分析
+
+**设计特点**：
+- 指标使用列表式展示
+- 流量来源使用进度条可视化
+- 进度条使用主题色渐变
+
+**进度条实现**：
+```css
+.progress-bar {
+  height: 100%;
+  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+  border-radius: 12rpx;
+  transition: width 0.3s ease;
+}
+```
+
+### 3.7 商家排行榜
+
+**设计特点**：
+- 排名徽章使用金银铜渐变
+- 增长率使用彩色标签
+- 商家信息清晰展示
+
+**排名徽章**：
+```css
+.rank-gold {
+  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
+}
+
+.rank-silver {
+  background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
+}
+
+.rank-bronze {
+  background: linear-gradient(135deg, #CD7F32 0%, #B8860B 100%);
+}
+```
+
+### 3.8 快速工具卡片
+
+**设计特点**：
+- 3 列网格布局
+- 点击反馈效果
+- 图标 + 标题 + 描述
+
+**交互效果**：
+```css
+.tool-card:active {
+  transform: scale(0.98);
+  box-shadow: var(--shadow-md);
+}
+```
+
+---
+
+## 四、响应式设计
+
+### 4.1 断点设置
+
+- **默认**：>= 768rpx（双列布局）
+- **小屏**：< 768rpx（单列布局）
+
+### 4.2 响应式规则
+
+```css
+@media screen and (max-width: 768rpx) {
+  /* 实时大屏卡片改为单列 */
+  .dashboard-card {
+    width: 100%;
+  }
+  
+  /* 工具卡片改为 2 列 */
+  .tool-card {
+    width: calc(50% - var(--spacing-md) / 2);
+  }
+  
+  /* 配送分析改为纵向布局 */
+  .delivery-metrics {
+    flex-direction: column;
+  }
+}
+```
+
+### 4.3 适配策略
+
+1. **实时大屏**：小屏下改为单列，保持卡片完整性
+2. **工具卡片**：小屏下改为 2 列，提升空间利用率
+3. **配送分析**：小屏下改为纵向堆叠，避免内容挤压
+
+---
+
+## 五、交互设计
+
+### 5.1 操作反馈
+
+- **按钮点击**：缩放效果 `transform: scale(0.98)`
+- **Tab 切换**：平滑过渡动画 `transition: all 0.3s`
+- **进度条**：宽度变化动画 `transition: width 0.3s ease`
+
+### 5.2 数据刷新
+
+- **刷新按钮**：点击后显示加载状态
+- **数据更新**：更新时间实时显示
+- **错误处理**：友好的错误提示
+
+### 5.3 导出功能
+
+- **导出选项**：Excel / PDF / 图片
+- **加载提示**：导出过程中显示加载动画
+- **成功反馈**：导出成功后 Toast 提示
+
+---
+
+## 六、数据可视化
+
+### 6.1 图表占位
+
+当前使用占位符，后续可集成图表库：
+
+- **销售趋势图**：折线图或面积图
+- **商品销量排行**：柱状图或条形图
+- **流量来源**：饼图或环形图
+
+### 6.2 推荐图表库
+
+- **uni-app x 兼容**：需使用原生图表组件
+- **Web 端**：可使用 ECharts、Chart.js 等
+- **移动端**：可使用 uni-charts 或自定义 Canvas 绘制
+
+---
+
+## 七、性能优化
+
+### 7.1 数据加载
+
+- **分步加载**：先加载核心指标，再加载详细数据
+- **缓存策略**：合理使用数据缓存，减少重复请求
+- **防抖处理**：刷新操作添加防抖，避免频繁请求
+
+### 7.2 渲染优化
+
+- **虚拟列表**：长列表使用虚拟滚动
+- **懒加载**：非首屏内容延迟加载
+- **图片优化**：使用合适的图片格式和尺寸
+
+---
+
+## 八、后续优化建议
+
+### 8.1 功能增强
+
+1. **实时数据推送**：使用 WebSocket 实现数据实时更新
+2. **数据钻取**：点击指标可查看详细数据
+3. **自定义看板**：允许用户自定义指标和布局
+4. **数据对比**：支持多时间段数据对比
+5. **导出增强**：支持自定义导出字段和格式
+
+### 8.2 UI 优化
+
+1. **图表集成**：集成专业图表库，替换占位符
+2. **动画效果**：添加数据变化动画，提升视觉体验
+3. **暗色模式**：支持暗色主题切换
+4. **国际化**：支持多语言切换
+
+### 8.3 交互优化
+
+1. **下拉刷新**：支持下拉刷新数据
+2. **上拉加载**：长列表支持上拉加载更多
+3. **手势操作**：支持滑动切换时间维度
+4. **快捷操作**：添加常用操作的快捷入口
+
+---
+
+## 九、技术实现
+
+### 9.1 文件结构
+
+```
+pages/mall/analytics/
+├── index.uvue          # 数据分析首页
+├── profile.uvue        # 数据分析个人中心
+└── report-detail.uvue  # 报表详情页
+```
+
+### 9.2 核心代码结构
+
+```vue
+<template>
+  <!-- Header -->
+  <view class="header">...</view>
+  
+  <!-- 实时大屏 -->
+  <view class="dashboard-section">...</view>
+  
+  <!-- 时间筛选 -->
+  <view class="time-filter-section">...</view>
+  
+  <!-- 各分析模块 -->
+  <view class="sales-analysis-section">...</view>
+  ...
+</template>
+
+<script lang="uts">
+  // 数据定义
+  // 方法实现
+</script>
+
+<style>
+  /* CSS 变量定义 */
+  /* 组件样式 */
+  /* 响应式样式 */
+</style>
+```
+
+### 9.3 数据接口
+
+当前使用 Supabase 查询数据，主要涉及：
+
+- `orders` 表：订单数据
+- `users` 表：用户数据
+- `user_sessions` 表：用户会话数据（如果存在）
+
+---
+
+## 十、设计规范遵循
+
+### 10.1 颜色系统 ✅
+
+- ✅ 使用主题色 `#FF4D4F` 作为主色调
+- ✅ 使用渐变色增强视觉效果
+- ✅ 使用功能色表示状态（成功/警告/错误）
+
+### 10.2 间距系统 ✅
+
+- ✅ 使用统一的间距变量（`--spacing-sm/md/lg`）
+- ✅ 卡片间距统一为 `24rpx`
+- ✅ 内容内边距统一为 `32rpx`
+
+### 10.3 圆角系统 ✅
+
+- ✅ 卡片圆角统一为 `20rpx`
+- ✅ 小元素圆角为 `12rpx`
+- ✅ 圆形元素使用 `50%`
+
+### 10.4 阴影系统 ✅
+
+- ✅ 卡片使用轻微阴影 `0 2rpx 8rpx rgba(0, 0, 0, 0.06)`
+- ✅ 激活状态使用增强阴影
+- ✅ 按钮使用阴影增强层次
+
+---
+
+## 十一、总结
+
+数据分析页面 UI 设计完全遵循项目的 UI 设计规范，实现了：
+
+1. ✅ **统一的视觉风格**：使用项目统一的颜色系统和设计 token
+2. ✅ **清晰的信息层次**：通过卡片、阴影、间距建立清晰层次
+3. ✅ **良好的用户体验**：响应式设计、交互反馈、数据可视化
+4. ✅ **可维护的代码**：CSS 变量系统、模块化设计、清晰的代码结构
+
+页面已实现核心功能，后续可根据实际需求进行功能增强和 UI 优化。
+
+---
+
+**文档版本**: v1.0  
+**创建时间**: 2025-01-XX  
+**最后更新**: 2025-01-XX  
+**状态**: ✅ 已完成
diff --git a/docs/CRMEB_REFACTORING_PLAN.md b/docs/CRMEB_REFACTORING_PLAN.md
new file mode 100644
index 00000000..ee38af71
--- /dev/null
+++ b/docs/CRMEB_REFACTORING_PLAN.md
@@ -0,0 +1,940 @@
+# CRMEB 项目重构计划文档
+
+## 📋 文档说明
+
+本文档基于 **Clean-Room 重构原则**，通过分析 CRMEB 项目的**可观察行为与功能规格**，制定将 CRMEB 商城系统迁移到 **uni-app x (uvue) + Supabase** 技术栈的重构计划。
+
+### 重构原则
+
+1. **禁止复制源码**：不直接使用 CRMEB 的任何 PHP/Vue 源码
+2. **规格驱动开发**：基于功能规格和行为描述进行独立实现
+3. **技术栈迁移**：
+   - 前端：Vue/UniApp → **uvue (uni-app x)**
+   - 后端：PHP/ThinkPHP → **Supabase (PostgreSQL + RLS + Edge Functions)**
+4. **组件复用**：尽量不修改 `components/supadb`，仅通过接口调用
+
+---
+
+## 一、功能规格提取 (Spec Extraction)
+
+### 1.1 核心业务模块
+
+基于 CRMEB 项目结构分析，提取以下核心功能模块：
+
+#### 1.1.1 用户系统 (User System)
+**功能清单**：
+- 用户注册/登录（手机号、微信、邮箱）
+- 用户信息管理（昵称、头像、性别）
+- 用户角色（消费者、商家、配送员、客服、管理员）
+- 用户认证（实名认证、商家认证）
+- 用户地址管理（多地址、默认地址）
+- 用户余额/积分管理
+
+**数据字段规格**：
+- 用户基础信息：id, phone, email, nickname, avatar_url, gender, user_type, status
+- 用户扩展信息：real_name, id_card, credit_score, verification_status
+- 地址信息：receiver_name, receiver_phone, province, city, district, address_detail, is_default
+
+**权限矩阵**：
+- 用户只能查看/修改自己的信息
+- 管理员可查看所有用户信息
+- 商家可查看自己的店铺信息
+
+#### 1.1.2 商品系统 (Product System)
+**功能清单**：
+- 商品管理（创建、编辑、上架、下架）
+- 商品分类（多级分类、分类树）
+- 商品品牌管理
+- 商品规格/SKU（多规格、价格、库存）
+- 商品图片（主图、详情图、轮播图）
+- 商品搜索（关键词、分类、品牌、价格区间）
+- 商品排序（价格、销量、时间、综合）
+
+**数据字段规格**：
+- 商品基础：id, merchant_id, category_id, name, description, base_price, original_price, stock, sales, status
+- 商品图片：main_image_url, image_urls (JSONB)
+- 商品规格：sku_code, specifications (JSONB), price, stock
+- 分类：id, pid (parent_id), name, icon, sort
+
+**业务规则**：
+- 商品状态：0-下架，1-上架，2-审核中
+- 库存扣减：下单时扣减，取消订单时恢复
+- 价格计算：支持原价、现价、会员价
+
+#### 1.1.3 订单系统 (Order System)
+**功能清单**：
+- 订单创建（购物车结算、立即购买）
+- 订单确认（地址选择、优惠券选择、运费计算）
+- 订单支付（微信支付、支付宝、余额支付）
+- 订单状态流转（待支付→已支付→已发货→已收货→已完成）
+- 订单取消（用户取消、超时取消）
+- 订单退款（申请退款、审核退款、退款完成）
+- 订单评价（商品评价、商家回复）
+
+**数据字段规格**：
+- 订单主表：id, order_no, user_id, merchant_id, total_amount, discount_amount, delivery_fee, actual_amount, order_status, payment_status, payment_method, delivery_address (JSONB)
+- 订单商品：order_id, product_id, sku_id, product_name, price, quantity, total_amount
+- 订单状态：1-待支付，2-已支付，3-已发货，4-已收货，5-已完成，6-已取消，7-退款中，8-已退款
+
+**业务规则**：
+- 订单号生成：唯一订单号（如：ORD20240101000001）
+- 超时取消：30分钟未支付自动取消
+- 库存检查：下单时检查库存，库存不足提示
+- 价格锁定：订单创建时锁定商品价格
+
+#### 1.1.4 购物车系统 (Cart System)
+**功能清单**：
+- 购物车添加（商品、SKU、数量）
+- 购物车编辑（数量修改、删除）
+- 购物车选择（单选、全选）
+- 购物车结算（批量结算、价格计算）
+
+**数据字段规格**：
+- 购物车：id, user_id, product_id, sku_id, quantity, selected
+
+**业务规则**：
+- 同一商品同一SKU合并数量
+- 商品下架时从购物车移除提示
+- 库存不足时提示并限制数量
+
+#### 1.1.5 营销系统 (Marketing System)
+**功能清单**：
+- 优惠券（满减券、折扣券、免运费券）
+- 优惠券领取（用户领取、系统发放）
+- 优惠券使用（下单时选择、自动抵扣）
+- 拼团活动（创建拼团、参团、成团）
+- 秒杀活动（限时秒杀、库存限制）
+- 砍价活动（发起砍价、好友助力）
+- 积分系统（积分获取、积分兑换）
+- 签到奖励（每日签到、连续签到）
+
+**数据字段规格**：
+- 优惠券模板：id, name, coupon_type, discount_type, discount_value, min_order_amount, total_quantity, start_time, end_time, status
+- 用户优惠券：id, user_id, template_id, coupon_code, status, used_at, expire_at
+- 优惠券类型：1-满减，2-折扣，3-免运费，4-新人券，5-会员券
+
+**业务规则**：
+- 优惠券有效期检查
+- 优惠券使用条件（满额、指定商品、指定分类）
+- 每人限领数量
+
+#### 1.1.6 配送系统 (Delivery System)
+**功能清单**：
+- 配送员管理（注册、认证、审核）
+- 配送任务分配（自动分配、手动分配）
+- 配送状态跟踪（待接单→已接单→已取货→配送中→已送达）
+- 配送费用计算（距离、重量、时间）
+
+**数据字段规格**：
+- 配送员：id, user_id, real_name, id_card, vehicle_type, work_status, current_location (JSONB), service_areas (Array)
+- 配送任务：id, order_id, driver_id, pickup_address (JSONB), delivery_address (JSONB), distance, delivery_fee, status
+
+**业务规则**：
+- 配送员认证审核
+- 配送范围限制
+- 配送费用计算规则
+
+#### 1.1.7 评价系统 (Review System)
+**功能清单**：
+- 商品评价（评分、文字、图片）
+- 商家回复
+- 评价展示（全部、好评、中评、差评）
+- 评价统计（好评率、平均分）
+
+**数据字段规格**：
+- 评价：id, order_id, product_id, user_id, rating, content, images (Array), reply_content, reply_time, status
+
+**业务规则**：
+- 仅已收货订单可评价
+- 评价后不可修改，可追评
+- 匿名评价选项
+
+#### 1.1.8 店铺系统 (Shop System)
+**功能清单**：
+- 店铺创建（商家注册店铺）
+- 店铺信息管理（名称、Logo、简介、轮播图）
+- 店铺认证（营业执照、资质审核）
+- 店铺营业状态（营业中、休息中、关闭）
+- 店铺评分（综合评分、服务评分、商品评分）
+
+**数据字段规格**：
+- 店铺：id, merchant_id, shop_name, shop_logo, shop_banner, shop_description, shop_status, rating, total_sales
+
+**业务规则**：
+- 商家认证后才能开店
+- 店铺关闭后商品自动下架
+- 店铺评分计算规则
+
+### 1.2 管理后台功能
+
+#### 1.2.1 商品管理
+- 商品列表（搜索、筛选、排序）
+- 商品审核（上架审核、下架管理）
+- 分类管理（分类树、排序）
+- 品牌管理
+
+#### 1.2.2 订单管理
+- 订单列表（状态筛选、搜索）
+- 订单详情查看
+- 订单发货
+- 退款审核
+
+#### 1.2.3 用户管理
+- 用户列表
+- 用户详情
+- 用户状态管理（冻结、解冻）
+
+#### 1.2.4 营销管理
+- 优惠券管理（创建、发放、统计）
+- 活动管理（拼团、秒杀、砍价）
+
+#### 1.2.5 系统设置
+- 系统配置（支付配置、物流配置）
+- 权限管理
+- 数据统计
+
+### 1.3 前端页面清单
+
+#### 1.3.1 消费者端 (Consumer)
+- 首页（轮播图、分类导航、推荐商品、热门商品）
+- 分类页（分类列表、商品列表）
+- 商品详情页（商品信息、SKU选择、评价、推荐）
+- 购物车页
+- 订单确认页
+- 订单列表页
+- 订单详情页
+- 个人中心（信息、订单、地址、优惠券、收藏）
+- 搜索页
+- 评价页
+
+#### 1.3.2 商家端 (Merchant)
+- 商家中心首页（数据统计、订单概览）
+- 商品管理（列表、添加、编辑）
+- 订单管理（列表、详情、发货）
+- 店铺设置
+- 数据统计
+
+#### 1.3.3 配送端 (Delivery)
+- 配送中心首页（待接单、配送中、已完成）
+- 订单详情
+- 配送路线
+
+#### 1.3.4 管理后台 (Admin)
+- 登录页
+- 首页（数据概览）
+- 商品管理
+- 订单管理
+- 用户管理
+- 营销管理
+- 系统设置
+
+---
+
+## 二、架构映射 (Architecture Mapping)
+
+### 2.1 前端架构映射：Vue/UniApp → uvue
+
+#### 2.1.1 技术栈对比
+
+| CRMEB 原技术 | 目标技术 (uvue)                | 说明           |
+| ------------ | ------------------------------ | -------------- |
+| Vue 2/3      | `<script setup lang="uts">`    | 使用 UTS 语法  |
+| Vuex         | `ref/reactive` + 状态管理工具  | 响应式状态管理 |
+| uni-app      | uni-app x                      | 跨平台框架     |
+| .vue 文件    | .uvue 文件                     | 页面/组件文件  |
+| axios        | `components/supadb/aksupa.uts` | HTTP 请求封装  |
+
+#### 2.1.2 页面结构映射
+
+**CRMEB 页面结构**：
+```
+template/uni-app/
+├── pages/
+│   ├── index/          # 首页
+│   ├── goods_details/ # 商品详情
+│   ├── order/         # 订单相关
+│   └── user/          # 用户中心
+```
+
+**目标项目结构**：
+```
+pages/mall/
+├── consumer/          # 消费者端
+│   ├── index.uvue     # 首页
+│   ├── product-detail.uvue
+│   ├── cart.uvue
+│   ├── order-detail.uvue
+│   └── profile.uvue
+├── merchant/          # 商家端
+│   ├── index.uvue
+│   └── product-detail.uvue
+├── delivery/          # 配送端
+│   └── index.uvue
+└── admin/             # 管理后台
+    └── index.uvue
+```
+
+#### 2.1.3 组件映射
+
+**CRMEB 组件** → **目标组件**：
+- `goods-list` → `components/mall/ProductList.uvue`
+- `order-item` → `components/mall/OrderItem.uvue`
+- `address-selector` → `components/mall/AddressSelector.uvue`
+- `coupon-selector` → `components/mall/CouponSelector.uvue`
+
+#### 2.1.4 状态管理映射
+
+**CRMEB (Vuex)**：
+```javascript
+// store/modules/user.js
+state: { userInfo: null }
+mutations: { SET_USER_INFO }
+actions: { getUserInfo }
+```
+
+**目标项目 (uvue)**：
+```typescript
+// utils/store.uts
+export const useUserStore = () => {
+  const userInfo = ref<UserType | null>(null)
+  const getUserInfo = async () => {
+    // 使用 supadb 获取用户信息
+  }
+  return { userInfo, getUserInfo }
+}
+```
+
+### 2.2 后端架构映射：PHP/ThinkPHP → Supabase
+
+#### 2.2.1 技术栈对比
+
+| CRMEB 原技术   | 目标技术 (Supabase)           | 说明         |
+| -------------- | ----------------------------- | ------------ |
+| ThinkPHP 6     | Supabase (PostgreSQL)         | 数据库 + API |
+| MySQL          | PostgreSQL                    | 数据库       |
+| PHP Controller | Supabase RLS + Edge Functions | 业务逻辑     |
+| PHP Service    | Database Functions + Triggers | 业务处理     |
+| Session        | Supabase Auth (JWT)           | 认证         |
+| File Upload    | Supabase Storage              | 文件存储     |
+
+#### 2.2.2 API 映射
+
+**CRMEB API 结构**：
+```
+/api/v1/store/product/lst        # 商品列表
+/api/v1/store/product/detail     # 商品详情
+/api/v1/order/confirm            # 订单确认
+/api/v1/order/create              # 创建订单
+```
+
+**Supabase API 结构**：
+```
+GET  /rest/v1/ml_products        # 商品列表（PostgREST 自动生成）
+GET  /rest/v1/ml_products?id=eq.{id}  # 商品详情
+POST /rest/v1/rpc/create_order    # 创建订单（Edge Function）
+POST /rest/v1/rpc/confirm_order   # 订单确认（Edge Function）
+```
+
+#### 2.2.3 数据表映射
+
+**CRMEB 数据表** → **Supabase 数据表**：
+
+| CRMEB 表名              | Supabase 表名         | 说明       |
+| ----------------------- | --------------------- | ---------- |
+| `eb_store_product`      | `ml_products`         | 商品表     |
+| `eb_store_order`        | `ml_orders`           | 订单表     |
+| `eb_store_cart`         | `ml_shopping_cart`    | 购物车     |
+| `eb_user`               | `ak_users` (复用)     | 用户表     |
+| `eb_store_category`     | `ml_categories`       | 分类表     |
+| `eb_store_coupon_issue` | `ml_coupon_templates` | 优惠券模板 |
+| `eb_store_coupon_user`  | `ml_user_coupons`     | 用户优惠券 |
+
+#### 2.2.4 业务逻辑映射
+
+**CRMEB PHP Service** → **Supabase 实现方式**：
+
+1. **商品列表查询**
+   - **原实现**：`StoreProductServices::getSearchList()`
+   - **新实现**：PostgREST 查询 + RLS 策略
+   ```typescript
+   // 前端调用
+   await supa.from('ml_products')
+     .select('*')
+     .eq('status', 1)
+     .order('created_at', { ascending: false })
+     .limit(20)
+   ```
+
+2. **订单创建**
+   - **原实现**：`StoreOrderCreateServices::createOrder()`
+   - **新实现**：Edge Function 或 Database Function
+   ```sql
+   -- Database Function
+   CREATE FUNCTION create_order(...) RETURNS uuid AS $$
+   BEGIN
+     -- 库存检查
+     -- 价格计算
+     -- 订单创建
+     -- 库存扣减
+   END;
+   $$ LANGUAGE plpgsql;
+   ```
+
+3. **权限控制**
+   - **原实现**：PHP Middleware + Session
+   - **新实现**：Supabase RLS 策略
+   ```sql
+   -- RLS 策略示例
+   CREATE POLICY ml_orders_select_policy ON ml_orders
+     FOR SELECT USING (
+       auth.uid()::text = (SELECT auth_id FROM ak_users WHERE id = user_id)
+     );
+   ```
+
+#### 2.2.5 文件上传映射
+
+**CRMEB**：
+- PHP 文件上传处理
+- 本地存储或云存储（OSS）
+
+**Supabase**：
+- Supabase Storage
+- 公共/私有存储桶
+- 自动生成访问 URL
+
+```typescript
+// 文件上传
+await supa.storage.from('product-images').upload(filePath, file)
+```
+
+### 2.3 认证与权限映射
+
+#### 2.3.1 认证方式
+
+**CRMEB**：
+- Session 认证
+- JWT Token（部分接口）
+
+**Supabase**：
+- Supabase Auth
+- JWT Token（自动管理）
+- 多种登录方式（邮箱、手机、微信、OAuth）
+
+```typescript
+// 登录
+await supa.auth.signInWithPassword({ email, password })
+// Token 自动附加到后续请求
+```
+
+#### 2.3.2 权限控制
+
+**CRMEB**：
+- PHP Middleware 权限检查
+- 角色权限表
+
+**Supabase**：
+- RLS (Row Level Security) 行级安全
+- 基于 `auth.uid()` 的自动过滤
+
+---
+
+## 三、实现计划 (Implementation Plan)
+
+### 3.1 目录结构设计
+
+```
+项目根目录/
+├── pages/
+│   └── mall/
+│       ├── consumer/          # 消费者端页面
+│       │   ├── index.uvue
+│       │   ├── product-detail.uvue
+│       │   ├── cart.uvue
+│       │   ├── order-confirm.uvue
+│       │   ├── order-list.uvue
+│       │   ├── order-detail.uvue
+│       │   ├── profile.uvue
+│       │   ├── address-list.uvue
+│       │   ├── coupon-list.uvue
+│       │   └── search.uvue
+│       ├── merchant/          # 商家端页面
+│       │   ├── index.uvue
+│       │   ├── product-list.uvue
+│       │   ├── product-edit.uvue
+│       │   ├── order-list.uvue
+│       │   └── shop-settings.uvue
+│       ├── delivery/          # 配送端页面
+│       │   ├── index.uvue
+│       │   └── order-detail.uvue
+│       └── admin/             # 管理后台
+│           ├── index.uvue
+│           ├── product-management.uvue
+│           ├── order-management.uvue
+│           └── user-management.uvue
+├── components/
+│   ├── supadb/                # Supabase 封装（不修改）
+│   └── mall/                 # 商城业务组件
+│       ├── ProductList.uvue
+│       ├── ProductCard.uvue
+│       ├── OrderItem.uvue
+│       ├── AddressSelector.uvue
+│       ├── CouponSelector.uvue
+│       └── PaymentMethod.uvue
+├── services/                 # 业务服务层
+│   └── mall/
+│       ├── product-service.uts
+│       ├── order-service.uts
+│       ├── cart-service.uts
+│       ├── coupon-service.uts
+│       └── user-service.uts
+├── types/
+│   └── mall-types.uts         # 类型定义（已存在）
+└── utils/
+    └── mall-utils.uts         # 工具函数
+```
+
+### 3.2 数据库设计
+
+#### 3.2.1 数据表清单
+
+基于功能规格，设计以下数据表（使用 `ml_` 前缀）：
+
+1. **用户相关**
+   - `ml_user_profiles` - 用户扩展信息
+   - `ml_user_addresses` - 用户地址
+
+2. **商品相关**
+   - `ml_products` - 商品主表
+   - `ml_product_skus` - 商品SKU
+   - `ml_categories` - 商品分类
+   - `ml_brands` - 品牌表
+   - `ml_product_specs` - 商品规格模板
+
+3. **店铺相关**
+   - `ml_shops` - 店铺表
+
+4. **订单相关**
+   - `ml_orders` - 订单主表
+   - `ml_order_items` - 订单商品明细
+
+5. **购物车**
+   - `ml_shopping_cart` - 购物车
+
+6. **营销相关**
+   - `ml_coupon_templates` - 优惠券模板
+   - `ml_user_coupons` - 用户优惠券
+
+7. **配送相关**
+   - `ml_delivery_drivers` - 配送员
+   - `ml_delivery_tasks` - 配送任务
+
+8. **评价相关**
+   - `ml_product_reviews` - 商品评价
+
+9. **用户行为**
+   - `ml_user_favorites` - 收藏
+   - `ml_browse_history` - 浏览历史
+   - `ml_search_history` - 搜索记录
+
+10. **系统配置**
+    - `ml_system_configs` - 系统配置
+    - `ml_regions` - 地区数据
+
+#### 3.2.2 数据库脚本位置
+
+- 主数据库脚本：`doc_mall/database/complete_mall_database.sql`
+- RLS 策略脚本：`doc_mall/database/rls_policies.sql`
+- 触发器脚本：`doc_mall/database/triggers.sql`
+- 函数脚本：`doc_mall/database/functions.sql`
+
+### 3.3 开发里程碑
+
+#### 阶段 1：基础架构搭建（1-2周）
+- [ ] 数据库表结构创建
+- [ ] RLS 策略配置
+- [ ] 触发器与函数创建
+- [ ] 类型定义完善（`types/mall-types.uts`）
+- [ ] 服务层基础封装（`services/mall/`）
+
+#### 阶段 2：用户系统（1周）
+- [ ] 用户注册/登录页面
+- [ ] 用户信息管理
+- [ ] 地址管理功能
+- [ ] 权限验证
+
+#### 阶段 3：商品系统（2周）
+- [ ] 商品列表页
+- [ ] 商品详情页
+- [ ] 商品搜索
+- [ ] 分类导航
+- [ ] 商家商品管理
+
+#### 阶段 4：购物车与订单（2周）
+- [ ] 购物车功能
+- [ ] 订单确认页
+- [ ] 订单创建
+- [ ] 订单列表
+- [ ] 订单详情
+- [ ] 订单支付（集成支付SDK）
+
+#### 阶段 5：营销系统（1-2周）
+- [ ] 优惠券功能
+- [ ] 优惠券使用
+- [ ] 活动页面（拼团、秒杀等，可选）
+
+#### 阶段 6：管理后台（2周）
+- [ ] 管理员登录
+- [ ] 商品管理
+- [ ] 订单管理
+- [ ] 用户管理
+- [ ] 数据统计
+
+#### 阶段 7：测试与优化（1-2周）
+- [ ] 功能测试
+- [ ] 性能优化
+- [ ] 安全测试
+- [ ] 用户体验优化
+
+### 3.4 关键技术实现点
+
+#### 3.4.1 使用 supadb 组件（不修改）
+
+```typescript
+// 引入 supadb 实例
+import supa from '@/components/supadb/aksupainstance.uts'
+
+// 查询商品列表
+const getProducts = async (filters: any) => {
+  const result = await supa
+    .from('ml_products')
+    .select('*')
+    .eq('status', 1)
+    .order('created_at', { ascending: false })
+    .limit(20)
+    .executeAs<ProductType[]>()
+  
+  return result.data || []
+}
+
+// 创建订单
+const createOrder = async (orderData: any) => {
+  const result = await supa
+    .from('ml_orders')
+    .insert(orderData)
+    .executeAs<OrderType>()
+  
+  return result.data
+}
+```
+
+#### 3.4.2 服务层封装
+
+```typescript
+// services/mall/product-service.uts
+import supa from '@/components/supadb/aksupainstance.uts'
+import type { ProductType } from '@/types/mall-types.uts'
+
+export class ProductService {
+  // 获取商品列表
+  static async getProducts(params: {
+    categoryId?: string
+    keyword?: string
+    minPrice?: number
+    maxPrice?: number
+    page?: number
+    pageSize?: number
+  }) {
+    let query = supa.from('ml_products').select('*')
+    
+    if (params.categoryId) {
+      query = query.eq('category_id', params.categoryId)
+    }
+    if (params.keyword) {
+      query = query.ilike('name', `%${params.keyword}%`)
+    }
+    if (params.minPrice) {
+      query = query.gte('base_price', params.minPrice)
+    }
+    if (params.maxPrice) {
+      query = query.lte('base_price', params.maxPrice)
+    }
+    
+    const page = params.page || 1
+    const pageSize = params.pageSize || 20
+    const from = (page - 1) * pageSize
+    const to = from + pageSize - 1
+    
+    query = query.range(from, to).order('created_at', { ascending: false })
+    
+    const result = await query.executeAs<ProductType[]>()
+    return result.data || []
+  }
+  
+  // 获取商品详情
+  static async getProductById(id: string) {
+    const result = await supa
+      .from('ml_products')
+      .select('*')
+      .eq('id', id)
+      .single()
+      .executeAs<ProductType>()
+    
+    return result.data
+  }
+}
+```
+
+#### 3.4.3 页面组件实现
+
+```vue
+<!-- pages/mall/consumer/product-detail.uvue -->
+<template>
+  <view class="product-detail">
+    <view class="product-images">
+      <swiper>
+        <swiper-item v-for="img in product.image_urls" :key="img">
+          <image :src="img" mode="aspectFill" />
+        </swiper-item>
+      </swiper>
+    </view>
+    <view class="product-info">
+      <text class="product-name">{{ product.name }}</text>
+      <text class="product-price">¥{{ product.base_price }}</text>
+    </view>
+    <!-- SKU 选择 -->
+    <view class="sku-selector">
+      <!-- SKU 选择组件 -->
+    </view>
+    <!-- 操作按钮 -->
+    <view class="action-buttons">
+      <button @click="addToCart">加入购物车</button>
+      <button @click="buyNow">立即购买</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { ref, onMounted } from 'vue'
+import { ProductService } from '@/services/mall/product-service.uts'
+import type { ProductType } from '@/types/mall-types.uts'
+
+const props = defineProps<{
+  productId: string
+}>()
+
+const product = ref<ProductType | null>(null)
+
+onMounted(async () => {
+  product.value = await ProductService.getProductById(props.productId)
+})
+
+const addToCart = async () => {
+  // 加入购物车逻辑
+}
+
+const buyNow = async () => {
+  // 立即购买逻辑
+}
+</script>
+```
+
+---
+
+## 四、验证清单 (Verification Checklist)
+
+### 4.1 功能验证
+
+#### 4.1.1 用户系统
+- [ ] 用户注册（手机号、邮箱）
+- [ ] 用户登录（密码、验证码）
+- [ ] 用户信息修改
+- [ ] 地址添加/编辑/删除
+- [ ] 默认地址设置
+
+#### 4.1.2 商品系统
+- [ ] 商品列表展示（分页、筛选、排序）
+- [ ] 商品详情展示
+- [ ] 商品搜索
+- [ ] 分类导航
+- [ ] SKU 选择
+- [ ] 商家商品管理（增删改查）
+
+#### 4.1.3 购物车
+- [ ] 添加商品到购物车
+- [ ] 修改购物车商品数量
+- [ ] 删除购物车商品
+- [ ] 购物车商品选择
+- [ ] 购物车价格计算
+
+#### 4.1.4 订单系统
+- [ ] 订单确认页（地址、优惠券、运费）
+- [ ] 创建订单
+- [ ] 订单支付
+- [ ] 订单列表（状态筛选）
+- [ ] 订单详情
+- [ ] 订单取消
+- [ ] 订单退款
+
+#### 4.1.5 营销系统
+- [ ] 优惠券列表
+- [ ] 优惠券领取
+- [ ] 优惠券使用
+- [ ] 优惠券过期处理
+
+### 4.2 权限验证
+
+- [ ] 用户只能查看/修改自己的数据
+- [ ] 商家只能管理自己的商品和订单
+- [ ] 管理员可以查看所有数据
+- [ ] 未登录用户只能查看公开商品
+- [ ] RLS 策略正确生效
+
+### 4.3 性能验证
+
+- [ ] 商品列表加载速度（< 2秒）
+- [ ] 图片加载优化（懒加载）
+- [ ] 分页加载流畅
+- [ ] 数据库查询性能（索引优化）
+
+### 4.4 安全验证
+
+- [ ] SQL 注入防护（参数化查询）
+- [ ] XSS 防护（数据转义）
+- [ ] 权限验证（RLS）
+- [ ] 敏感数据加密
+
+### 4.5 兼容性验证
+
+- [ ] Android 平台
+- [ ] iOS 平台（如支持）
+- [ ] Web 平台（如支持）
+- [ ] 不同屏幕尺寸适配
+
+---
+
+## 五、差异清单 (Difference List)
+
+### 5.1 允许的差异
+
+1. **UI 风格差异**
+   - 可以重新设计 UI，不要求与 CRMEB 完全一致
+   - 遵循现代 UI 设计规范
+
+2. **交互细节差异**
+   - 动画效果可以不同
+   - 页面布局可以优化
+
+3. **非核心功能差异**
+   - 某些营销活动（如砍价、拼团）可以简化或延后实现
+   - 数据统计功能可以简化
+
+### 5.2 不允许的差异
+
+1. **核心业务流程**
+   - 订单流程必须完整（创建→支付→发货→收货→完成）
+   - 库存扣减逻辑必须正确
+   - 价格计算必须准确
+
+2. **数据一致性**
+   - 订单金额必须准确
+   - 库存数据必须准确
+   - 用户余额必须准确
+
+3. **权限控制**
+   - 用户权限必须正确
+   - 数据访问权限必须正确
+
+---
+
+## 六、反抄袭自证
+
+### 6.1 参考资料说明
+
+本文档仅参考以下公开资料：
+
+1. **CRMEB 项目 README.md**
+   - 仅用于了解项目功能模块和业务范围
+   - 未参考任何 PHP 源码实现
+
+2. **Supabase 官方文档**
+   - https://supabase.com/docs
+   - 用于了解 Supabase API 使用方式
+
+3. **uni-app x 官方文档**
+   - https://uniapp.dcloud.net.cn/uni-app-x/
+   - 用于了解 uvue 语法和规范
+
+4. **PostgreSQL 官方文档**
+   - https://www.postgresql.org/docs/
+   - 用于了解数据库功能和语法
+
+### 6.2 实现方式说明
+
+1. **数据库设计**
+   - 基于业务需求独立设计表结构
+   - 使用 `ml_` 前缀区分商城模块
+   - 参考现有 `doc_mall/database/` 中的设计
+
+2. **前端实现**
+   - 使用 uvue 语法独立编写页面
+   - 通过 `components/supadb` 调用 Supabase API
+   - 不复制任何 Vue 组件代码
+
+3. **后端实现**
+   - 使用 Supabase RLS + Edge Functions
+   - 不编写任何 PHP 代码
+   - 业务逻辑通过数据库函数和触发器实现
+
+### 6.3 代码原创性声明
+
+- 所有代码均为基于功能规格的独立实现
+- 未复制 CRMEB 项目的任何源码
+- 未复制任何第三方项目的实现代码
+- 仅参考公开 API 文档和规范
+
+---
+
+## 七、参考资料列表
+
+### 7.1 官方文档
+
+1. **Supabase**
+   - REST API: https://supabase.com/docs/reference/javascript/introduction
+   - Auth: https://supabase.com/docs/guides/auth
+   - RLS: https://supabase.com/docs/guides/auth/row-level-security
+   - Storage: https://supabase.com/docs/guides/storage
+
+2. **uni-app x**
+   - 概述: https://uniapp.dcloud.net.cn/uni-app-x/
+   - uvue: https://uniapp.dcloud.net.cn/uni-app-x/component/
+   - UTS: https://uniapp.dcloud.net.cn/uni-app-x/uts/
+
+3. **PostgreSQL**
+   - 官方文档: https://www.postgresql.org/docs/
+   - JSONB: https://www.postgresql.org/docs/current/datatype-json.html
+
+### 7.2 项目内部文档
+
+1. `doc_mall/MODULE_ANALYSIS.md` - 模块分析报告
+2. `doc_mall/database/` - 数据库设计文档
+3. `components/supadb/SIMPLIFIED_API_GUIDE.md` - Supabase API 使用指南
+4. `types/mall-types.uts` - 类型定义
+
+---
+
+## 八、总结
+
+本文档基于 **Clean-Room 重构原则**，通过分析 CRMEB 项目的功能规格，制定了完整的重构计划：
+
+1. **功能规格提取**：明确了所有核心业务模块的功能需求
+2. **架构映射**：完成了 Vue→uvue、PHP→Supabase 的技术栈映射
+3. **实现计划**：制定了详细的开发里程碑和目录结构
+4. **验证清单**：提供了完整的测试验证标准
+
+所有实现将基于功能规格独立开发，不复制任何源码，确保代码的原创性和合规性。
+
+---
+
+**文档版本**: v1.0  
+**创建时间**: 2025-01-XX  
+**状态**: ✅ 待实施
diff --git a/docs/UI_DESIGN_GUIDELINES.md b/docs/UI_DESIGN_GUIDELINES.md
new file mode 100644
index 00000000..54fe54bd
--- /dev/null
+++ b/docs/UI_DESIGN_GUIDELINES.md
@@ -0,0 +1,660 @@
+# UI 设计规范文档
+
+## 📋 文档说明
+
+本文档基于 **CRMEB 项目的 UI 设计理念和交互模式**，提取设计思想、布局方式、组件模式等，为项目提供统一的 UI 设计规范。**所有实现均为原创，不复制任何源码**。
+
+### 设计原则
+
+1. **参考不复制**：仅参考 CRMEB 的设计理念，不复制任何代码
+2. **现代简约**：遵循现代电商 UI 设计趋势
+3. **用户体验优先**：注重交互流畅性和视觉舒适度
+4. **一致性**：保持整体设计风格统一
+
+---
+
+## 一、设计风格分析
+
+### 1.1 CRMEB 设计特点
+
+基于对 CRMEB 项目的分析，提取以下设计特点：
+
+#### 1.1.1 视觉风格
+- **色彩**：以红色系为主色调（#E93323），体现电商活力
+- **圆角**：大量使用圆角设计（20rpx-24rpx），柔和现代
+- **阴影**：轻微阴影效果，增强层次感
+- **间距**：宽松的间距设计，提升可读性
+
+#### 1.1.2 布局特点
+- **卡片式设计**：信息以卡片形式呈现，清晰分组
+- **瀑布流布局**：商品列表采用瀑布流，提升浏览体验
+- **模块化设计**：首页采用模块化组件，灵活配置
+- **响应式适配**：适配不同屏幕尺寸
+
+#### 1.1.3 交互特点
+- **流畅动画**：页面切换和操作有平滑过渡
+- **即时反馈**：操作有明确的视觉反馈
+- **加载状态**：优雅的加载动画和骨架屏
+- **错误处理**：友好的错误提示和空状态
+
+---
+
+## 二、颜色系统
+
+### 2.1 主色调
+
+基于 CRMEB 的设计理念，定义以下颜色系统：
+
+```scss
+// 主题色
+$theme-primary: #FF4D4F;        // 主色（红色系，体现电商活力）
+$theme-primary-light: #FF7875;  // 主色浅色
+$theme-primary-dark: #CF1322;    // 主色深色
+
+// 渐变色
+$gradient-start: #FF4D4F;       // 渐变起始色
+$gradient-end: #FF7A45;         // 渐变结束色
+
+// 功能色
+$success: #52C41A;              // 成功色
+$warning: #FAAD14;              // 警告色
+$error: #FF4D4F;                // 错误色
+$info: #1890FF;                  // 信息色
+```
+
+### 2.2 中性色
+
+```scss
+// 文字颜色
+$text-primary: #111111;          // 主要文字
+$text-secondary: #333333;        // 次要文字
+$text-tertiary: #666666;         // 辅助文字
+$text-disabled: #999999;         // 禁用文字
+$text-placeholder: #CCCCCC;      // 占位文字
+
+// 背景颜色
+$bg-primary: #FFFFFF;            // 主背景
+$bg-secondary: #F7F8FA;          // 次背景
+$bg-tertiary: #F5F5F5;           // 三级背景
+$bg-hover: #F1F1F1;              // 悬停背景
+
+// 边框颜色
+$border-color: rgba(0, 0, 0, 0.06);  // 边框色
+$border-color-light: rgba(0, 0, 0, 0.08);  // 浅边框
+```
+
+### 2.3 使用规范
+
+- **主色**：用于按钮、链接、重要信息
+- **渐变色**：用于主要操作按钮、强调元素
+- **中性色**：用于文字、背景、边框
+- **功能色**：用于状态提示、警告信息
+
+---
+
+## 三、布局规范
+
+### 3.1 间距系统
+
+```scss
+// 基础间距单位（基于 rpx）
+$spacing-xs: 8rpx;      // 极小间距
+$spacing-sm: 16rpx;     // 小间距
+$spacing-md: 24rpx;     // 中等间距
+$spacing-lg: 32rpx;     // 大间距
+$spacing-xl: 48rpx;     // 超大间距
+
+// 页面边距
+$page-padding: 24rpx;   // 页面左右边距
+$section-margin: 20rpx; // 模块间距
+```
+
+### 3.2 圆角规范
+
+```scss
+$radius-sm: 8rpx;       // 小圆角
+$radius-md: 12rpx;      // 中等圆角
+$radius-lg: 20rpx;      // 大圆角
+$radius-xl: 24rpx;      // 超大圆角
+$radius-circle: 50%;    // 圆形
+```
+
+### 3.3 阴影规范
+
+```scss
+// 轻微阴影（卡片）
+$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+
+// 中等阴影（悬浮）
+$shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+
+// 大阴影（弹窗）
+$shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
+```
+
+### 3.4 布局模式
+
+#### 3.4.1 卡片布局
+- **特点**：信息以卡片形式呈现，有圆角和阴影
+- **应用**：商品卡片、订单卡片、信息卡片
+- **实现**：使用 `view` 容器，添加圆角和阴影样式
+
+#### 3.4.2 列表布局
+- **特点**：信息以列表形式呈现，清晰有序
+- **应用**：订单列表、地址列表、设置列表
+- **实现**：使用 `view` 容器，添加分割线
+
+#### 3.4.3 网格布局
+- **特点**：信息以网格形式呈现，整齐排列
+- **应用**：商品网格、分类网格、功能入口
+- **实现**：使用 `view` 容器，配合 flex 布局
+
+---
+
+## 四、组件设计规范
+
+### 4.1 按钮组件
+
+#### 4.1.1 主要按钮（Primary）
+```scss
+// 样式特点
+- 背景：渐变色（#FF4D4F → #FF7A45）
+- 文字：白色
+- 圆角：18rpx
+- 高度：92rpx
+- 阴影：0 16rpx 32rpx rgba(255, 77, 79, 0.24)
+```
+
+#### 4.1.2 次要按钮（Secondary）
+```scss
+// 样式特点
+- 背景：白色
+- 文字：主题色
+- 边框：1rpx solid 主题色
+- 圆角：18rpx
+- 高度：92rpx
+```
+
+#### 4.1.3 文字按钮（Text）
+```scss
+// 样式特点
+- 背景：透明
+- 文字：主题色
+- 无边框
+- 无圆角
+```
+
+### 4.2 输入框组件
+
+#### 4.2.1 标准输入框
+```scss
+// 样式特点
+- 背景：#F6F7F9
+- 边框：2rpx solid rgba(0, 0, 0, 0.06)
+- 圆角：14rpx
+- 高度：84rpx
+- 内边距：0 14rpx
+- 错误状态：边框变红，背景变浅红
+```
+
+### 4.3 商品卡片组件
+
+#### 4.3.1 商品列表卡片
+```scss
+// 布局特点
+- 图片：180rpx × 180rpx，圆角 20rpx
+- 信息：商品名称、价格、销量
+- 间距：左右 30rpx，上下 20rpx
+- 活动标签：左上角显示（秒杀/砍价/拼团）
+```
+
+#### 4.3.2 商品网格卡片
+```scss
+// 布局特点
+- 图片：宽高比 1:1，圆角 20rpx
+- 信息：商品名称、价格、原价（删除线）
+- 间距：网格间距 16rpx
+- 两列或三列布局
+```
+
+### 4.4 订单卡片组件
+
+#### 4.4.1 订单列表卡片
+```scss
+// 布局特点
+- 背景：白色
+- 圆角：20rpx
+- 内边距：24rpx
+- 阴影：轻微阴影
+- 内容：订单号、商品信息、价格、状态
+```
+
+### 4.5 导航栏组件
+
+#### 4.5.1 顶部导航栏
+```scss
+// 样式特点
+- 背景：白色或透明（滚动时变化）
+- 高度：88rpx（含状态栏）
+- 文字：主题色或白色
+- 返回按钮：左侧
+- 搜索框：居中（可选）
+```
+
+### 4.6 标签组件
+
+#### 4.6.1 活动标签
+```scss
+// 样式特点
+- 背景：主题色或渐变色
+- 文字：白色
+- 圆角：4rpx 或 圆形
+- 位置：商品图片左上角
+- 文字：秒杀/砍价/拼团
+```
+
+---
+
+## 五、交互模式
+
+### 5.1 页面切换
+
+- **动画**：使用 uni-app 的页面切换动画
+- **返回**：支持滑动返回（iOS 风格）
+- **加载**：页面切换时显示加载状态
+
+### 5.2 数据加载
+
+- **骨架屏**：数据加载时显示骨架屏
+- **下拉刷新**：列表页面支持下拉刷新
+- **上拉加载**：列表页面支持上拉加载更多
+- **加载状态**：显示加载动画和提示文字
+
+### 5.3 操作反馈
+
+- **点击反馈**：使用 `hover-class` 提供点击反馈
+- **成功提示**：使用 `uni.showToast` 显示成功提示
+- **错误提示**：使用 `uni.showModal` 显示错误信息
+- **加载提示**：使用 `uni.showLoading` 显示加载状态
+
+### 5.4 表单交互
+
+- **实时验证**：输入时实时验证，显示错误信息
+- **提交反馈**：提交时显示加载状态，防止重复提交
+- **成功跳转**：提交成功后自动跳转或提示
+
+---
+
+## 六、页面设计规范
+
+### 6.1 首页设计
+
+#### 6.1.1 布局结构
+```
+┌─────────────────────────┐
+│  顶部搜索栏（可选）      │
+├─────────────────────────┤
+│  轮播图（Banner）        │
+├─────────────────────────┤
+│  分类导航（横向滚动）    │
+├─────────────────────────┤
+│  营销模块（可选）        │
+│  - 秒杀/拼团/砍价       │
+├─────────────────────────┤
+│  商品推荐               │
+│  - 瀑布流布局           │
+└─────────────────────────┘
+```
+
+#### 6.1.2 设计要点
+- **模块化**：首页由多个模块组成，可配置
+- **瀑布流**：商品列表采用瀑布流布局
+- **懒加载**：图片和内容懒加载，提升性能
+- **下拉刷新**：支持下拉刷新
+
+### 6.2 商品详情页
+
+#### 6.2.1 布局结构
+```
+┌─────────────────────────┐
+│  商品轮播图             │
+├─────────────────────────┤
+│  商品信息               │
+│  - 价格（突出显示）     │
+│  - 标题                 │
+│  - 标签                 │
+├─────────────────────────┤
+│  优惠信息               │
+│  - 优惠券               │
+│  - 活动                 │
+├─────────────────────────┤
+│  规格选择（弹窗）       │
+├─────────────────────────┤
+│  商品详情（Tab切换）    │
+│  - 详情                 │
+│  - 评价                 │
+│  - 推荐                 │
+├─────────────────────────┤
+│  底部操作栏（固定）     │
+│  - 购物车/立即购买      │
+└─────────────────────────┘
+```
+
+#### 6.2.2 设计要点
+- **图片展示**：轮播图展示商品图片
+- **价格突出**：价格使用大字号和主题色
+- **规格选择**：点击规格弹出选择弹窗
+- **底部固定**：操作按钮固定在底部
+
+### 6.3 购物车页面
+
+#### 6.3.1 布局结构
+```
+┌─────────────────────────┐
+│  商品列表               │
+│  ┌───────────────────┐  │
+│  │ ☑ 商品卡片        │  │
+│  │   数量选择        │  │
+│  └───────────────────┘  │
+├─────────────────────────┤
+│  底部结算栏（固定）     │
+│  - 全选                 │
+│  - 合计金额             │
+│  - 结算按钮             │
+└─────────────────────────┘
+```
+
+#### 6.3.2 设计要点
+- **选择状态**：每个商品可单独选择
+- **数量编辑**：支持增减数量
+- **价格计算**：实时计算总价
+- **底部固定**：结算栏固定在底部
+
+### 6.4 订单确认页
+
+#### 6.4.1 布局结构
+```
+┌─────────────────────────┐
+│  收货地址（可选）       │
+├─────────────────────────┤
+│  商品列表               │
+├─────────────────────────┤
+│  优惠券选择（可选）     │
+├─────────────────────────┤
+│  配送方式               │
+├─────────────────────────┤
+│  备注信息               │
+├─────────────────────────┤
+│  价格明细               │
+│  - 商品总额             │
+│  - 运费                 │
+│  - 优惠金额             │
+│  - 实付金额             │
+├─────────────────────────┤
+│  提交订单按钮（固定）   │
+└─────────────────────────┘
+```
+
+### 6.5 个人中心页
+
+#### 6.5.1 布局结构
+```
+┌─────────────────────────┐
+│  用户信息卡片           │
+│  - 头像                 │
+│  - 昵称                 │
+│  - 会员信息             │
+├─────────────────────────┤
+│  订单状态（快捷入口）   │
+│  - 待付款/待发货等      │
+├─────────────────────────┤
+│  功能菜单               │
+│  - 我的订单             │
+│  - 我的地址             │
+│  - 我的优惠券           │
+│  - 设置                 │
+└─────────────────────────┘
+```
+
+---
+
+## 七、实现指南
+
+### 7.1 样式变量定义
+
+创建 `styles/variables.uts` 文件：
+
+```typescript
+// 颜色变量
+export const THEME_PRIMARY = '#FF4D4F'
+export const THEME_GRADIENT_START = '#FF4D4F'
+export const THEME_GRADIENT_END = '#FF7A45'
+
+// 间距变量
+export const SPACING_XS = '8rpx'
+export const SPACING_SM = '16rpx'
+export const SPACING_MD = '24rpx'
+export const SPACING_LG = '32rpx'
+
+// 圆角变量
+export const RADIUS_SM = '8rpx'
+export const RADIUS_MD = '12rpx'
+export const RADIUS_LG = '20rpx'
+```
+
+### 7.2 通用样式类
+
+创建 `styles/common.uvue` 或使用 `<style>` 标签：
+
+```css
+/* 卡片样式 */
+.card {
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+}
+
+/* 按钮样式 */
+.btn-primary {
+  background: linear-gradient(135deg, #FF4D4F 0%, #FF7A45 100%);
+  color: #FFFFFF;
+  border-radius: 18rpx;
+  height: 92rpx;
+  box-shadow: 0 16rpx 32rpx rgba(255, 77, 79, 0.24);
+}
+
+/* 输入框样式 */
+.input {
+  background: #F6F7F9;
+  border: 2rpx solid rgba(0, 0, 0, 0.06);
+  border-radius: 14rpx;
+  height: 84rpx;
+  padding: 0 14rpx;
+}
+```
+
+### 7.3 组件实现示例
+
+#### 7.3.1 商品卡片组件
+
+```vue
+<template>
+  <view class="product-card" @click="handleClick">
+    <view class="product-image">
+      <image :src="product.image_url" mode="aspectFill" />
+      <view v-if="product.activity" class="activity-tag">
+        {{ activityText }}
+      </view>
+    </view>
+    <view class="product-info">
+      <text class="product-name">{{ product.name }}</text>
+      <view class="product-price">
+        <text class="price-symbol">¥</text>
+        <text class="price-value">{{ product.price }}</text>
+      </view>
+      <text class="product-sales">已售 {{ product.sales }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  product: ProductType
+}>()
+
+const activityText = ref<string>('')
+// 根据活动类型设置标签文字
+</script>
+
+<style>
+.product-card {
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  overflow: hidden;
+  margin-bottom: 20rpx;
+}
+
+.product-image {
+  width: 100%;
+  height: 360rpx;
+  position: relative;
+}
+
+.product-image image {
+  width: 100%;
+  height: 100%;
+}
+
+.activity-tag {
+  position: absolute;
+  top: 10rpx;
+  left: 10rpx;
+  background: linear-gradient(135deg, #FF4D4F 0%, #FF7A45 100%);
+  color: #FFFFFF;
+  padding: 4rpx 12rpx;
+  border-radius: 4rpx;
+  font-size: 20rpx;
+}
+
+.product-info {
+  padding: 16rpx;
+}
+
+.product-name {
+  font-size: 28rpx;
+  color: #111111;
+  display: block;
+  margin-bottom: 12rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-price {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 8rpx;
+}
+
+.price-symbol {
+  font-size: 24rpx;
+  color: #FF4D4F;
+}
+
+.price-value {
+  font-size: 36rpx;
+  color: #FF4D4F;
+  font-weight: 600;
+}
+
+.product-sales {
+  font-size: 22rpx;
+  color: #999999;
+}
+</style>
+```
+
+---
+
+## 八、最佳实践
+
+### 8.1 性能优化
+
+1. **图片优化**
+   - 使用合适的图片尺寸
+   - 启用图片懒加载
+   - 使用 WebP 格式（如支持）
+
+2. **列表优化**
+   - 使用虚拟列表（长列表）
+   - 分页加载数据
+   - 避免不必要的重新渲染
+
+3. **动画优化**
+   - 使用 CSS 动画而非 JS 动画
+   - 避免过度动画
+   - 使用 `transform` 和 `opacity` 做动画
+
+### 8.2 可访问性
+
+1. **文字大小**
+   - 最小字号：24rpx
+   - 主要文字：28rpx-32rpx
+   - 标题文字：36rpx-40rpx
+
+2. **点击区域**
+   - 最小点击区域：88rpx × 88rpx
+   - 按钮高度：至少 80rpx
+
+3. **颜色对比**
+   - 文字与背景对比度：至少 4.5:1
+   - 重要信息使用高对比度
+
+### 8.3 响应式设计
+
+1. **屏幕适配**
+   - 使用 rpx 单位
+   - 使用 flex 布局
+   - 适配不同屏幕尺寸
+
+2. **横竖屏适配**
+   - 考虑横屏布局
+   - 使用媒体查询（如需要）
+
+---
+
+## 九、设计资源
+
+### 9.1 图标系统
+
+- **图标库**：使用 uni-app 内置图标或自定义图标
+- **图标大小**：24rpx、32rpx、48rpx
+- **图标颜色**：主题色或中性色
+
+### 9.2 字体规范
+
+- **字体家族**：系统默认字体
+- **字重**：Regular（400）、Medium（500）、Bold（600）
+- **字号**：24rpx、28rpx、32rpx、36rpx、40rpx
+
+---
+
+## 十、总结
+
+本文档基于 CRMEB 项目的设计理念，提取了以下核心要点：
+
+1. **设计风格**：现代简约，以红色系为主色调
+2. **布局方式**：卡片式、列表式、网格式
+3. **交互模式**：流畅动画、即时反馈、友好提示
+4. **组件设计**：统一的组件样式和交互规范
+
+所有实现均为原创，遵循现代 UI 设计最佳实践，确保用户体验和视觉一致性。
+
+---
+
+**文档版本**: v1.0  
+**创建时间**: 2025-01-XX  
+**状态**: ✅ 待实施
diff --git a/UNI_APP_X_MIGRATION.md b/docs/UNI_APP_X_MIGRATION.md
similarity index 100%
rename from UNI_APP_X_MIGRATION.md
rename to docs/UNI_APP_X_MIGRATION.md
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..c496dbc9
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,34 @@
+{
+  "name": "mall",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "echarts": "^6.0.0"
+      }
+    },
+    "node_modules/echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
+    "node_modules/zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..aabad938
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "echarts": "^6.0.0"
+  }
+}
diff --git a/pages.json b/pages.json
index fed5ab00..559492dd 100644
--- a/pages.json
+++ b/pages.json
@@ -83,6 +83,12 @@
         "navigationBarTitleText": "数据分析",
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/mall/analytics/test/test-connection",
+      "style": {
+        "navigationBarTitleText": "Supabase 连接测试"
+      }
     }
   ],
   "subPackages": [
@@ -207,6 +213,10 @@
       {
         "name": "登录页",
         "path": "pages/user/login"
+      },
+      {
+        "name": "数据分析端首页",
+        "path": "pages/mall/analytics/index"
       }
     ]
   }
diff --git a/pages/mall/analytics/index.uvue b/pages/mall/analytics/index.uvue
index c9b161ea..2f0ce74e 100644
--- a/pages/mall/analytics/index.uvue
+++ b/pages/mall/analytics/index.uvue
@@ -1,1147 +1,734 @@
-<!-- 数据分析端首页 - UTS Android 兼容 -->
 <template>
-	<view class="analytics-container">
-		<!-- 头部控制面板 -->
-		<view class="header">
-			<view class="header-left">
-				<text class="app-title">数据分析中心</text>
-				<text class="last-update">最后更新: {{ lastUpdateTime }}</text>
-			</view>
-			<view class="header-right">
-				<text class="refresh-btn" @click="refreshData">🔄</text>
-				<text class="export-btn" @click="exportReport">📊</text>
-			</view>
-		</view>
+  <view class="page">
+    <view class="container">
+      <!-- 顶部头部（白底，横排按钮） -->
+      <view class="topbar">
+        <view class="topbar-left">
+          <text class="title">数据分析中心</text>
+          <text class="subtitle">最后更新：{{ lastUpdateTime }}</text>
+        </view>
+        <view class="topbar-right">
+          <view class="icon-btn" @click="refreshAll">刷新</view>
+          <view class="icon-btn primary" @click="exportReport">导出</view>
+        </view>
+      </view>
 
-		<!-- 核心指标实时大屏 -->
-		<view class="dashboard-section">
-			<text class="section-title">实时大屏</text>
-			<view class="dashboard-grid">
-				<view class="dashboard-card revenue">
-					<text class="card-title">实时GMV</text>
-					<text class="card-value">¥{{ formatNumber(realTimeMetrics.gmv) }}</text>
-					<text class="card-change positive">+{{ realTimeMetrics.gmv_growth }}%</text>
-					<text class="card-subtitle">较昨日同时段</text>
-				</view>
-				
-				<view class="dashboard-card orders">
-					<text class="card-title">实时订单</text>
-					<text class="card-value">{{ formatNumber(realTimeMetrics.orders) }}</text>
-					<text class="card-change positive">+{{ realTimeMetrics.order_growth }}%</text>
-					<text class="card-subtitle">今日累计</text>
-				</view>
-				
-				<view class="dashboard-card users">
-					<text class="card-title">在线用户</text>
-					<text class="card-value">{{ formatNumber(realTimeMetrics.online_users) }}</text>
-					<text class="card-change">实时数据</text>
-					<text class="card-subtitle">当前在线</text>
-				</view>
-				
-				<view class="dashboard-card conversion">
-					<text class="card-title">转化率</text>
-					<text class="card-value">{{ realTimeMetrics.conversion_rate }}%</text>
-					<text class="card-change positive">+{{ realTimeMetrics.conversion_growth }}%</text>
-					<text class="card-subtitle">今日平均</text>
-				</view>
-			</view>
-		</view>
+      <!-- KPI：宽屏 4列，窄屏 2列 -->
+      <view class="kpi-grid">
+        <view class="kpi-card">
+          <text class="kpi-label">实时 GMV</text>
+          <text class="kpi-value">¥{{ formatMoney(realTime.gmv) }}</text>
+          <text class="kpi-meta">较昨日同刻：{{ formatPct(realTime.gmv_growth) }}</text>
+        </view>
+        <view class="kpi-card">
+          <text class="kpi-label">实时订单</text>
+          <text class="kpi-value">{{ formatInt(realTime.orders) }}</text>
+          <text class="kpi-meta">较昨日同刻：{{ formatPct(realTime.order_growth) }}</text>
+        </view>
+        <view class="kpi-card">
+          <text class="kpi-label">在线用户</text>
+          <text class="kpi-value">{{ formatInt(realTime.online_users) }}</text>
+          <text class="kpi-meta">最近 5 分钟</text>
+        </view>
+        <view class="kpi-card">
+          <text class="kpi-label">转化率</text>
+          <text class="kpi-value">{{ formatPct(realTime.conversion_rate) }}</text>
+          <text class="kpi-meta">较昨日同刻：{{ formatPct(realTime.conversion_growth) }}</text>
+        </view>
+      </view>
 
-		<!-- 时间维度选择 -->
-		<view class="time-filter-section">
-			<view class="filter-tabs">
-				<text v-for="period in timePeriods" :key="period.value" 
-					  class="filter-tab" 
-					  :class="{ active: selectedPeriod === period.value }" 
-					  @click="selectTimePeriod(period.value)">{{ period.label }}</text>
-			</view>
-		</view>
+      <!-- 时间维度：横排 -->
+      <view class="tabs">
+        <view
+          v-for="p in timePeriods"
+          :key="p.value"
+          class="tab"
+          :class="{ active: selectedPeriod === p.value }"
+          @click="selectPeriod(p.value)"
+        >
+          {{ p.label }}
+        </view>
+      </view>
 
-		<!-- 销售分析 -->
-		<view class="sales-analysis-section">
-			<text class="section-title">销售分析</text>
-			<view class="analysis-cards">
-				<view class="analysis-card">
-					<text class="analysis-title">销售趋势</text>
-					<view class="trend-chart">
-						<!-- 这里应该是图表组件，暂用文字模拟 -->
-						<text class="chart-placeholder">📈 销售趋势图</text>
-						<text class="chart-description">{{ selectedPeriodText }}销售呈上升趋势</text>
-					</view>
-					<view class="trend-stats">
-						<view class="stat-item">
-							<text class="stat-label">总销售额</text>
-							<text class="stat-value">¥{{ formatNumber(salesAnalysis.total_sales) }}</text>
-						</view>
-						<view class="stat-item">
-							<text class="stat-label">平均客单价</text>
-							<text class="stat-value">¥{{ salesAnalysis.avg_order_value }}</text>
-						</view>
-					</view>
-				</view>
-				
-				<view class="analysis-card">
-					<text class="analysis-title">商品分析</text>
-					<view class="product-chart">
-						<text class="chart-placeholder">📊 商品销量排行</text>
-						<view class="top-products">
-							<view v-for="product in topProducts" :key="product.id" class="product-rank-item">
-								<text class="rank-number">{{ product.rank }}</text>
-								<text class="product-name">{{ product.name }}</text>
-								<text class="product-sales">{{ product.sales }}件</text>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
+      <!-- 核心趋势：占满横向（柱+折 组合图） -->
+      <view class="card card-full">
+        <view class="card-head">
+          <text class="card-title">核心趋势（GMV / 订单数）</text>
+          <text class="card-desc">{{ selectedPeriodText }} · 柱：GMV（元） · 线：订单数</text>
+        </view>
 
-		<!-- 用户行为分析 -->
-		<view class="user-behavior-section">
-			<text class="section-title">用户行为分析</text>
-			<view class="behavior-grid">
-				<view class="behavior-card">
-					<text class="behavior-title">用户活跃度</text>
-					<view class="behavior-metrics">
-						<view class="metric-row">
-							<text class="metric-label">日活用户</text>
-							<text class="metric-value">{{ formatNumber(userBehavior.daily_active) }}</text>
-						</view>
-						<view class="metric-row">
-							<text class="metric-label">月活用户</text>
-							<text class="metric-value">{{ formatNumber(userBehavior.monthly_active) }}</text>
-						</view>
-						<view class="metric-row">
-							<text class="metric-label">用户留存率</text>
-							<text class="metric-value">{{ userBehavior.retention_rate }}%</text>
-						</view>
-					</view>
-				</view>
-				
-				<view class="behavior-card">
-					<text class="behavior-title">流量来源</text>
-					<view class="traffic-sources">
-						<view v-for="source in trafficSources" :key="source.name" class="source-item">
-							<text class="source-name">{{ source.name }}</text>
-							<view class="source-progress">
-								<view class="progress-bar" :style="{ width: source.percentage + '%' }"></view>
-							</view>
-							<text class="source-percentage">{{ source.percentage }}%</text>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
+        <AnalyticsComboChart
+          :xLabels="trend.x"
+          :gmv="trend.gmv"
+          :orders="trend.orders"
+          :height="320"
+        />
+      </view>
 
-		<!-- 商家表现分析 -->
-		<view class="merchant-performance-section">
-			<text class="section-title">商家表现</text>
-			<view class="performance-header">
-				<text class="performance-subtitle">{{ selectedPeriodText }}商家排行榜</text>
-				<text class="view-all" @click="goToMerchantRanking">查看完整排行</text>
-			</view>
-			<view class="merchant-ranking">
-				<view v-for="merchant in topMerchants" :key="merchant.id" class="merchant-rank-item">
-					<view class="rank-info">
-						<text class="rank-badge" :class="getRankClass(merchant.rank)">{{ merchant.rank }}</text>
-						<image :src="merchant.logo || '/static/default-shop.png'" class="merchant-logo" mode="aspectFit" />
-						<view class="merchant-details">
-							<text class="merchant-name">{{ merchant.name }}</text>
-							<text class="merchant-category">{{ merchant.category }}</text>
-						</view>
-					</view>
-					<view class="performance-data">
-						<text class="sales-amount">¥{{ formatNumber(merchant.sales) }}</text>
-						<text class="growth-rate" :class="getGrowthClass(merchant.growth)">{{ merchant.growth > 0 ? '+' : '' }}{{ merchant.growth }}%</text>
-					</view>
-				</view>
-			</view>
-		</view>
+      <!-- 用户结构：横向占满 -->
+      <view class="card fullwide">
+        <view class="card-head">
+          <text class="card-title">用户结构（环形图）</text>
+          <text class="card-desc">未消费 / 首购 / 复购 / 回流</text>
+        </view>
+        <EChartsView class="chart-box" :option="userSegmentOption" />
+      </view>
 
-		<!-- 配送效率分析 -->
-		<view class="delivery-analysis-section">
-			<text class="section-title">配送效率</text>
-			<view class="delivery-metrics">
-				<view class="delivery-card">
-					<text class="delivery-title">配送时效</text>
-					<view class="delivery-stats">
-						<view class="stat-circle">
-							<text class="circle-value">{{ deliveryAnalysis.avg_delivery_time }}</text>
-							<text class="circle-unit">分钟</text>
-							<text class="circle-label">平均配送时间</text>
-						</view>
-					</view>
-				</view>
-				
-				<view class="delivery-card">
-					<text class="delivery-title">配送覆盖</text>
-					<view class="coverage-info">
-						<text class="coverage-item">活跃配送员: {{ deliveryAnalysis.active_drivers }}人</text>
-						<text class="coverage-item">覆盖区域: {{ deliveryAnalysis.coverage_areas }}个</text>
-						<text class="coverage-item">准时率: {{ deliveryAnalysis.on_time_rate }}%</text>
-					</view>
-				</view>
-			</view>
-		</view>
+      <!-- 洞察区：宽屏左右分栏，窄屏自动上下 -->
+      <view class="insights-row">
+        <!-- 左侧：大图表 -->
+        <view class="insights-left card">
+          <view class="card-head">
+            <text class="card-title">流量来源（条形）</text>
+            <text class="card-desc">占比%</text>
+          </view>
+          <EChartsView class="chart-box" :option="trafficBarOption" />
+        </view>
 
-		<!-- 快速分析工具 -->
-		<view class="quick-tools-section">
-			<text class="section-title">快速分析</text>
-			<view class="tools-grid">
-				<view class="tool-card" @click="goToSalesReport">
-					<text class="tool-icon">📈</text>
-					<text class="tool-name">销售报表</text>
-					<text class="tool-description">详细销售数据分析</text>
-				</view>
-				
-				<view class="tool-card" @click="goToUserAnalysis">
-					<text class="tool-icon">👥</text>
-					<text class="tool-name">用户分析</text>
-					<text class="tool-description">用户行为深度分析</text>
-				</view>
-				
-				<view class="tool-card" @click="goToProductInsights">
-					<text class="tool-icon">📦</text>
-					<text class="tool-name">商品洞察</text>
-					<text class="tool-description">商品表现分析</text>
-				</view>
-				
-				<view class="tool-card" @click="goToMarketTrends">
-					<text class="tool-icon">📊</text>
-					<text class="tool-name">市场趋势</text>
-					<text class="tool-description">行业趋势分析</text>
-				</view>
-				
-				<view class="tool-card" @click="goToCustomReport">
-					<text class="tool-icon">🔧</text>
-					<text class="tool-name">自定义报表</text>
-					<text class="tool-description">创建专属分析报表</text>
-				</view>
-				
-				<view class="tool-card" @click="goToAlerts">
-					<text class="tool-icon">⚠️</text>
-					<text class="tool-name">预警中心</text>
-					<text class="tool-description">异常数据预警</text>
-				</view>
-			</view>
-		</view>
-	</view>
+        <!-- 右侧：两个小卡片纵向堆叠 -->
+        <view class="insights-right">
+          <view class="card">
+            <view class="card-head">
+              <text class="card-title">热销商品 TOP</text>
+              <text class="card-desc">按销量</text>
+            </view>
+            <view class="rank-list">
+              <view v-for="p in topProducts" :key="p.id" class="rank-item">
+                <text class="rank-no">{{ p.rank }}</text>
+                <text class="rank-name">{{ p.name }}</text>
+                <text class="rank-val">{{ p.sales }} 件</text>
+              </view>
+            </view>
+          </view>
+
+          <view class="card">
+            <view class="card-head">
+              <text class="card-title">商家排行 TOP</text>
+              <text class="card-desc">按 GMV</text>
+            </view>
+            <view class="rank-list">
+              <view v-for="m in topMerchants" :key="m.id" class="rank-item">
+                <text class="rank-no">{{ m.rank }}</text>
+                <text class="rank-name">{{ m.name }}</text>
+                <view class="rank-right">
+                  <text class="rank-val">¥{{ formatMoney(m.sales) }}</text>
+                  <text class="chip" :class="m.growth >= 0 ? 'pos' : 'neg'">
+                    {{ m.growth >= 0 ? '+' : '' }}{{ m.growth }}%
+                  </text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 留白 -->
+      <view style="height: 24px;"></view>
+    </view>
+  </view>
 </template>
 
 <script lang="uts">
-	type TimePeriodType = {
-		value: string
-		label: string
-	}
-	
-	type RealTimeMetricsType = {
-		gmv: number
-		gmv_growth: number
-		orders: number
-		order_growth: number
-		online_users: number
-		conversion_rate: number
-		conversion_growth: number
-	}
-	
-	type SalesAnalysisType = {
-		total_sales: number
-		avg_order_value: number
-	}
-	
-	type ProductRankType = {
-		id: string
-		rank: number
-		name: string
-		sales: number
-	}
-	
-	type UserBehaviorType = {
-		daily_active: number
-		monthly_active: number
-		retention_rate: number
-	}
-	
-	type TrafficSourceType = {
-		name: string
-		percentage: number
-	}
-	
-	type MerchantRankType = {
-		id: string
-		rank: number
-		name: string
-		category: string
-		logo: string | null
-		sales: number
-		growth: number
-	}
-	
-	type DeliveryAnalysisType = {
-		avg_delivery_time: number
-		active_drivers: number
-		coverage_areas: number
-		on_time_rate: number
-	}
+import supa from '@/components/supadb/aksupainstance.uts'
+import AnalyticsComboChart from '@/components/analytics/AnalyticsComboChart.uvue'
+import EChartsView from '@/uni_modules/charts/EChartsView.vue'
 
-	export default {
-		data() {
-			return {
-				lastUpdateTime: '',
-				selectedPeriod: 'today',
-				
-				timePeriods: [
-					{ value: 'today', label: '今日' },
-					{ value: 'week', label: '本周' },
-					{ value: 'month', label: '本月' },
-					{ value: 'quarter', label: '本季度' }
-				] as Array<TimePeriodType>,
-				
-				realTimeMetrics: {
-					gmv: 0,
-					gmv_growth: 0,
-					orders: 0,
-					order_growth: 0,
-					online_users: 0,
-					conversion_rate: 0,
-					conversion_growth: 0
-				} as RealTimeMetricsType,
-				
-				salesAnalysis: {
-					total_sales: 0,
-					avg_order_value: 0
-				} as SalesAnalysisType,
-				
-				topProducts: [] as Array<ProductRankType>,
-				
-				userBehavior: {
-					daily_active: 0,
-					monthly_active: 0,
-					retention_rate: 0
-				} as UserBehaviorType,
-				
-				trafficSources: [] as Array<TrafficSourceType>,
-				
-				topMerchants: [] as Array<MerchantRankType>,
-				
-				deliveryAnalysis: {
-					avg_delivery_time: 0,
-					active_drivers: 0,
-					coverage_areas: 0,
-					on_time_rate: 0
-				} as DeliveryAnalysisType
-			}
-		},
-		
-		computed: {
-			selectedPeriodText(): string {
-				const period = this.timePeriods.find(p => p.value === this.selectedPeriod)
-				return period ? period.label : '今日'
-			}
-		},
-		
-		onLoad() {
-			this.loadAllData()
-			this.updateLastUpdateTime()
-		},
-		
-		onShow() {
-			this.refreshRealTimeData()
-		},
-		
-		methods: {
-			// 加载所有数据
-			loadAllData() {
-				this.loadRealTimeMetrics()
-				this.loadSalesAnalysis()
-				this.loadTopProducts()
-				this.loadUserBehavior()
-				this.loadTrafficSources()
-				this.loadTopMerchants()
-				this.loadDeliveryAnalysis()
-			},
-			
-			// 加载实时指标
-			loadRealTimeMetrics() {
-				// TODO: 调用API获取实时数据
-				this.realTimeMetrics = {
-					gmv: 2580000,
-					gmv_growth: 15.6,
-					orders: 12580,
-					order_growth: 12.3,
-					online_users: 3456,
-					conversion_rate: 3.8,
-					conversion_growth: 0.5
-				}
-			},
-			
-			// 加载销售分析
-			loadSalesAnalysis() {
-				// TODO: 调用API获取销售分析数据
-				this.salesAnalysis = {
-					total_sales: 1580000,
-					avg_order_value: 125.80
-				}
-			},
-			
-			// 加载热销商品
-			loadTopProducts() {
-				// TODO: 调用API获取商品排行
-				this.topProducts = [
-					{ id: '1', rank: 1, name: '苹果iPhone 15', sales: 580 },
-					{ id: '2', rank: 2, name: '华为Mate 60', sales: 456 },
-					{ id: '3', rank: 3, name: '小米14 Pro', sales: 389 }
-				]
-			},
-			
-			// 加载用户行为数据
-			loadUserBehavior() {
-				// TODO: 调用API获取用户行为数据
-				this.userBehavior = {
-					daily_active: 45600,
-					monthly_active: 280000,
-					retention_rate: 68.5
-				}
-			},
-			
-			// 加载流量来源
-			loadTrafficSources() {
-				// TODO: 调用API获取流量来源数据
-				this.trafficSources = [
-					{ name: '直接访问', percentage: 45 },
-					{ name: '搜索引擎', percentage: 28 },
-					{ name: '社交媒体', percentage: 18 },
-					{ name: '广告推广', percentage: 9 }
-				]
-			},
-			
-			// 加载商家排行
-			loadTopMerchants() {
-				// TODO: 调用API获取商家排行数据
-				this.topMerchants = [
-					{
-						id: '1',
-						rank: 1,
-						name: '华强北电子城',
-						category: '数码电子',
-						logo: '/static/merchant1.jpg',
-						sales: 580000,
-						growth: 15.6
-					},
-					{
-						id: '2',
-						rank: 2,
-						name: '时尚服装馆',
-						category: '服装鞋包',
-						logo: '/static/merchant2.jpg',
-						sales: 456000,
-						growth: 12.3
-					},
-					{
-						id: '3',
-						rank: 3,
-						name: '美食天地',
-						category: '食品生鲜',
-						logo: '/static/merchant3.jpg',
-						sales: 389000,
-						growth: -2.1
-					}
-				]
-			},
-			
-			// 加载配送分析
-			loadDeliveryAnalysis() {
-				// TODO: 调用API获取配送分析数据
-				this.deliveryAnalysis = {
-					avg_delivery_time: 35,
-					active_drivers: 156,
-					coverage_areas: 25,
-					on_time_rate: 95.6
-				}
-			},
-			
-			// 刷新实时数据
-			refreshRealTimeData() {
-				this.loadRealTimeMetrics()
-				this.updateLastUpdateTime()
-			},
-			
-			// 刷新所有数据
-			refreshData() {
-				this.loadAllData()
-				this.updateLastUpdateTime()
-				uni.showToast({
-					title: '数据已刷新',
-					icon: 'success'
-				})
-			},
-			
-			// 更新最后更新时间
-			updateLastUpdateTime() {
-				const now = new Date()
-				this.lastUpdateTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`
-			},
-			
-			// 选择时间周期
-			selectTimePeriod(period: string) {
-				this.selectedPeriod = period
-				this.loadAllData()
-			},
-			
-			// 格式化数字
-			formatNumber(num: number): string {
-				if (num >= 10000) {
-					return (num / 10000).toFixed(1) + '万'
-				}
-				return num.toString()
-			},
-			
-			// 获取排名样式
-			getRankClass(rank: number): string {
-				switch (rank) {
-					case 1: return 'rank-gold'
-					case 2: return 'rank-silver'
-					case 3: return 'rank-bronze'
-					default: return 'rank-default'
-				}
-			},
-			
-			// 获取增长率样式
-			getGrowthClass(growth: number): string {
-				if (growth > 0) return 'growth-positive'
-				if (growth < 0) return 'growth-negative'
-				return 'growth-neutral'
-			},
-			
-			// 导出报表
-			exportReport() {
-				uni.showToast({
-					title: '正在导出报表',
-					icon: 'loading'
-				})
-				// TODO: 实现报表导出功能
-			},
-			
-			// 导航方法
-			goToMerchantRanking() {
-				uni.navigateTo({
-					url: '/pages/mall/analytics/merchant-ranking'
-				})
-			},
-			
-			goToSalesReport() {
-				uni.navigateTo({
-					url: '/pages/mall/analytics/sales-report'
-				})
-			},
-			
-			goToUserAnalysis() {
-				uni.navigateTo({
-					url: '/pages/mall/analytics/user-analysis'
-				})
-			},
-			
-			goToProductInsights() {
-				uni.navigateTo({
-					url: '/pages/mall/analytics/product-insights'
-				})
-			},
-			
-			goToMarketTrends() {
-				uni.navigateTo({
-					url: '/pages/mall/analytics/market-trends'
-				})
-			},
-			
-			goToCustomReport() {
-				uni.navigateTo({
-					url: '/pages/mall/analytics/custom-report'
-				})
-			},
-			
-			goToAlerts() {
-				uni.navigateTo({
-					url: '/pages/mall/analytics/alerts'
-				})
-			}
-		}
-	}
+type TimePeriod = { value: string; label: string }
+type TrendData = { x: Array<string>; gmv: Array<number>; orders: Array<number> }
+type SegmentItem = { name: string; value: number }
+type TrafficItem = { name: string; value: number }
+
+export default {
+  components: {
+    AnalyticsComboChart,
+    EChartsView
+  },
+  data() {
+    return {
+      lastUpdateTime: '',
+      selectedPeriod: '7d',
+      timePeriods: [
+        { value: '7d', label: '7天' },
+        { value: '30d', label: '30天' },
+        { value: '90d', label: '90天' },
+        { value: '1y', label: '1年' }
+      ] as Array<TimePeriod>,
+
+      realTime: {
+        gmv: 0,
+        gmv_growth: 0,
+        orders: 0,
+        order_growth: 0,
+        online_users: 0,
+        conversion_rate: 0,
+        conversion_growth: 0
+      },
+
+      trend: {
+        x: [] as Array<string>,
+        gmv: [] as Array<number>,
+        orders: [] as Array<number>
+      } as TrendData,
+
+      userSegments: [
+        { name: '未消费用户', value: 72 },
+        { name: '消费一次用户', value: 14 },
+        { name: '留存客户', value: 9 },
+        { name: '回流客户', value: 5 }
+      ] as Array<SegmentItem>,
+
+      trafficSources: [
+        { name: '直接访问', value: 45 },
+        { name: '搜索引擎', value: 28 },
+        { name: '社交媒体', value: 18 },
+        { name: '广告推广', value: 9 }
+      ] as Array<TrafficItem>,
+
+      topProducts: [
+        { id: '1', rank: 1, name: '苹果 iPhone 15', sales: 580 },
+        { id: '2', rank: 2, name: '华为 Mate 60', sales: 456 },
+        { id: '3', rank: 3, name: '小米 14 Pro', sales: 389 }
+      ],
+
+      topMerchants: [
+        { id: '1', rank: 1, name: '华强北电子城', sales: 580000, growth: 15.6 },
+        { id: '2', rank: 2, name: '时尚服装馆', sales: 456000, growth: 12.3 },
+        { id: '3', rank: 3, name: '美食天地', sales: 389000, growth: -2.1 }
+      ],
+
+      // 图表 options
+      trafficBarOption: {} as any,
+      userSegmentOption: {} as any
+    }
+  },
+
+  computed: {
+    selectedPeriodText(): string {
+      const p = this.timePeriods.find((t) => t.value === this.selectedPeriod)
+      return p ? p.label : '7天'
+    }
+  },
+
+  watch: {
+    trafficSources: {
+      handler() {
+        this.buildChartOptions()
+      },
+      deep: true
+    },
+    userSegments: {
+      handler() {
+        this.buildChartOptions()
+      },
+      deep: true
+    }
+  },
+
+  onLoad() {
+    this.refreshAll()
+    this.buildChartOptions()
+  },
+
+  methods: {
+    async refreshAll() {
+      this.updateTime()
+      await this.loadRealTime()
+      this.mockTrend() // 先给你可视化效果（你再替换成真实查询）
+      this.updateTime()
+      uni.showToast({ title: '已刷新', icon: 'success' })
+    },
+
+    selectPeriod(p: string) {
+      this.selectedPeriod = p
+      this.mockTrend()
+    },
+
+    updateTime() {
+      const now = new Date()
+      const hh = now.getHours().toString().padStart(2, '0')
+      const mm = now.getMinutes().toString().padStart(2, '0')
+      this.lastUpdateTime = `${hh}:${mm}`
+    },
+
+    // 组合趋势：先模拟（你可以换成 supa 查询 + 聚合）
+    mockTrend() {
+      const days = this.selectedPeriod === '7d' ? 7 : this.selectedPeriod === '30d' ? 30 : this.selectedPeriod === '90d' ? 90 : 12
+      const x: Array<string> = []
+      const gmv: Array<number> = []
+      const orders: Array<number> = []
+      for (let i = 0; i < days; i++) {
+        x.push(days === 12 ? `${i + 1}月` : `${i + 1}`)
+        // 假数据：你替换为真实聚合
+        const base = 80000 + i * 1200 + Math.round(Math.random() * 8000)
+        gmv.push(base)
+        orders.push(120 + i * 2 + Math.round(Math.random() * 30))
+      }
+      this.trend = { x, gmv, orders }
+    },
+
+    // 实时指标：核心是"强制数值化 + 兜底"，避免对象直接渲染
+    async loadRealTime() {
+      try {
+        // 你可以把你原来的 supa 查询搬进来，这里只做"数值兜底示例"
+        // 注意：任何可能不是 number 的结果，都用 Number(...) 和 isFinite 处理
+        const safe = (v: any): number => {
+          const n = Number(v)
+          return isFinite(n) ? n : 0
+        }
+
+        const now = new Date()
+        const today0 = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+        const todayISO = today0.toISOString()
+
+        const ySame = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+        const y0 = new Date(ySame.getFullYear(), ySame.getMonth(), ySame.getDate())
+        const y0ISO = y0.toISOString()
+        const ySameISO = ySame.toISOString()
+
+        // 今日订单（已支付 status=2）
+        const { data: todayOrders } = await supa
+          .from('orders')
+          .select('total_amount, created_at, user_id')
+          .gte('created_at', todayISO)
+          .eq('status', 2)
+
+        // 昨日同时间段
+        const { data: yOrders } = await supa
+          .from('orders')
+          .select('total_amount, created_at, user_id')
+          .gte('created_at', y0ISO)
+          .lte('created_at', ySameISO)
+          .eq('status', 2)
+
+        let gmvT = 0
+        if (todayOrders != null) {
+          for (let i = 0; i < todayOrders.length; i++) {
+            gmvT += safe(todayOrders[i].total_amount)
+          }
+        }
+        let gmvY = 0
+        if (yOrders != null) {
+          for (let i = 0; i < yOrders.length; i++) {
+            gmvY += safe(yOrders[i].total_amount)
+          }
+        }
+        const gmvGrowth = gmvY > 0 ? ((gmvT - gmvY) / gmvY * 100) : (gmvT > 0 ? 100 : 0)
+
+        const ordersT = todayOrders != null ? todayOrders.length : 0
+        const ordersY = yOrders != null ? yOrders.length : 0
+        const orderGrowth = ordersY > 0 ? ((ordersT - ordersY) / ordersY * 100) : (ordersT > 0 ? 100 : 0)
+
+        // 在线用户（最近 5 分钟）
+        const fiveAgoISO = new Date(now.getTime() - 5 * 60 * 1000).toISOString()
+        const { count: onlineCnt } = await supa
+          .from('user_sessions')
+          .select('*', { count: 'exact', head: true })
+          .gte('last_active_at', fiveAgoISO)
+          .eq('is_active', true)
+
+        let online = safe(onlineCnt)
+
+        // 转化率（下单用户数 / 访问用户数）
+        const uniq: Record<string, boolean> = {}
+        if (todayOrders != null) {
+          for (let i = 0; i < todayOrders.length; i++) {
+            const uid = todayOrders[i].user_id
+            if (uid) uniq[uid] = true
+          }
+        }
+        const orderUsers = Object.keys(uniq).length
+
+        const { count: visitorsToday } = await supa
+          .from('user_sessions')
+          .select('*', { count: 'exact', head: true })
+          .gte('created_at', todayISO)
+
+        const vT = safe(visitorsToday)
+        const convT = vT > 0 ? (orderUsers / vT) * 100 : 0
+
+        // 昨日同时间段转化率
+        const uniqY: Record<string, boolean> = {}
+        if (yOrders != null) {
+          for (let i = 0; i < yOrders.length; i++) {
+            const uid = yOrders[i].user_id
+            if (uid) uniqY[uid] = true
+          }
+        }
+        const { count: visitorsY } = await supa
+          .from('user_sessions')
+          .select('*', { count: 'exact', head: true })
+          .gte('created_at', y0ISO)
+          .lte('created_at', ySameISO)
+
+        const vY = safe(visitorsY)
+        const convY = vY > 0 ? (Object.keys(uniqY).length / vY) * 100 : 0
+        const convGrowth = convY > 0 ? ((convT - convY) / convY * 100) : (convT > 0 ? 100 : 0)
+
+        this.realTime = {
+          gmv: Math.round(gmvT),
+          gmv_growth: safe(gmvGrowth),
+          orders: ordersT,
+          order_growth: safe(orderGrowth),
+          online_users: online,
+          conversion_rate: safe(convT),
+          conversion_growth: safe(convGrowth)
+        }
+      } catch (e) {
+        console.error(e)
+      }
+    },
+
+    exportReport() {
+      uni.showActionSheet({
+        itemList: ['导出Excel', '导出PDF', '导出图片'],
+        success: () => uni.showToast({ title: '导出成功', icon: 'success' })
+      })
+    },
+
+    formatInt(n: number): string {
+      const v = isFinite(n) ? Math.round(n) : 0
+      if (v >= 10000) return (v / 10000).toFixed(1) + '万'
+      return v.toString()
+    },
+
+    formatMoney(n: number): string {
+      const v = isFinite(n) ? n : 0
+      if (v >= 10000) return (v / 10000).toFixed(1) + '万'
+      return v.toFixed(0)
+    },
+
+    formatPct(n: number): string {
+      const v = isFinite(n) ? n : 0
+      const sign = v > 0 ? '+' : ''
+      return `${sign}${v.toFixed(1)}%`
+    },
+
+    // 构建图表 options
+    buildChartOptions() {
+      // 流量来源条形图
+      const trafficX = this.trafficSources.map((it) => it.name)
+      const trafficY = this.trafficSources.map((it) => {
+        const n = Number(it.value)
+        return isFinite(n) ? n : 0
+      })
+      this.trafficBarOption = {
+        grid: { left: 80, right: 24, top: 18, bottom: 18 },
+        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+        xAxis: { type: 'value', axisLabel: { color: 'rgba(0,0,0,0.55)' }, splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } } },
+        yAxis: { type: 'category', data: trafficX, axisTick: { show: false }, axisLabel: { color: 'rgba(0,0,0,0.65)' } },
+        series: [{ type: 'bar', data: trafficY, barWidth: 14, itemStyle: { borderRadius: 6 } }]
+      }
+
+      // 用户结构环形图
+      const segmentData = this.userSegments.map((it) => ({
+        name: it.name,
+        value: (() => {
+          const n = Number(it.value)
+          return isFinite(n) ? n : 0
+        })()
+      }))
+      this.userSegmentOption = {
+        tooltip: { trigger: 'item' },
+        legend: { left: 0, bottom: 0, itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 12 } },
+        series: [
+          {
+            type: 'pie',
+            radius: ['55%', '75%'],
+            center: ['50%', '45%'],
+            avoidLabelOverlap: true,
+            label: { show: true, formatter: '{b}\n{d}%' },
+            labelLine: { length: 10, length2: 10 },
+            data: segmentData
+          }
+        ]
+      }
+    }
+  }
+}
 </script>
 
 <style>
-	.analytics-container {
-		background-color: #f5f5f5;
-		min-height: 100vh;
-		padding-bottom: 40rpx;
-	}
-	
-	.header {
-		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-		padding: 40rpx 30rpx 30rpx;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-	
-	.header-left {
-		display: flex;
-		flex-direction: column;
-	}
-	
-	.app-title {
-		font-size: 36rpx;
-		font-weight: bold;
-		color: #fff;
-		margin-bottom: 8rpx;
-	}
-	
-	.last-update {
-		font-size: 24rpx;
-		color: rgba(255, 255, 255, 0.8);
-	}
-	
-	.header-right {
-		display: flex;
-		align-items: center;
-	}
-	
-	.refresh-btn,
-	.export-btn {
-		font-size: 32rpx;
-		color: #fff;
-		margin-left: 30rpx;
-	}
-	
-	.dashboard-section {
-		background-color: #fff;
-		margin: 20rpx;
-		padding: 30rpx;
-		border-radius: 16rpx;
-	}
-	
-	.section-title {
-		font-size: 32rpx;
-		font-weight: bold;
-		color: #333;
-		margin-bottom: 30rpx;
-	}
-	
-	.dashboard-grid {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-	}
-	
-	.dashboard-card {
-		width: 48%;
-		padding: 30rpx 20rpx;
-		border-radius: 12rpx;
-		margin-bottom: 20rpx;
-		position: relative;
-	}
-	
-	.revenue {
-		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-	}
-	
-	.orders {
-		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-	}
-	
-	.users {
-		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-	}
-	
-	.conversion {
-		background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-	}
-	
-	.card-title {
-		font-size: 24rpx;
-		color: rgba(255, 255, 255, 0.9);
-		margin-bottom: 15rpx;
-	}
-	
-	.card-value {
-		font-size: 36rpx;
-		font-weight: bold;
-		color: #fff;
-		margin-bottom: 10rpx;
-	}
-	
-	.card-change {
-		font-size: 20rpx;
-		color: rgba(255, 255, 255, 0.8);
-		margin-bottom: 8rpx;
-	}
-	
-	.positive {
-		color: #4CAF50;
-		background-color: rgba(255, 255, 255, 0.2);
-		padding: 4rpx 8rpx;
-		border-radius: 8rpx;
-	}
-	
-	.card-subtitle {
-		font-size: 18rpx;
-		color: rgba(255, 255, 255, 0.7);
-	}
-	
-	.time-filter-section {
-		margin: 20rpx;
-	}
-	
-	.filter-tabs {
-		display: flex;
-		background-color: #fff;
-		border-radius: 12rpx;
-		padding: 8rpx;
-	}
-	
-	.filter-tab {
-		flex: 1;
-		text-align: center;
-		padding: 15rpx;
-		font-size: 26rpx;
-		color: #666;
-		border-radius: 8rpx;
-	}
-	
-	.filter-tab.active {
-		background-color: #667eea;
-		color: #fff;
-	}
-	
-	.sales-analysis-section {
-		background-color: #fff;
-		margin: 20rpx;
-		padding: 30rpx;
-		border-radius: 16rpx;
-	}
-	
-	.analysis-cards {
-		display: flex;
-		flex-direction: column;
-	}
-	
-	.analysis-card {
-		border: 1rpx solid #e5e5e5;
-		border-radius: 12rpx;
-		padding: 25rpx;
-		margin-bottom: 20rpx;
-	}
-	
-	.analysis-title {
-		font-size: 28rpx;
-		font-weight: bold;
-		color: #333;
-		margin-bottom: 20rpx;
-	}
-	
-	.trend-chart,
-	.product-chart {
-		text-align: center;
-		margin-bottom: 20rpx;
-	}
-	
-	.chart-placeholder {
-		font-size: 48rpx;
-		margin-bottom: 15rpx;
-	}
-	
-	.chart-description {
-		font-size: 24rpx;
-		color: #666;
-	}
-	
-	.trend-stats {
-		display: flex;
-		justify-content: space-around;
-	}
-	
-	.stat-item {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-	
-	.stat-label {
-		font-size: 22rpx;
-		color: #666;
-		margin-bottom: 8rpx;
-	}
-	
-	.stat-value {
-		font-size: 28rpx;
-		font-weight: bold;
-		color: #667eea;
-	}
-	
-	.top-products {
-		display: flex;
-		flex-direction: column;
-	}
-	
-	.product-rank-item {
-		display: flex;
-		align-items: center;
-		padding: 15rpx 0;
-		border-bottom: 1rpx solid #f0f0f0;
-	}
-	
-	.product-rank-item:last-child {
-		border-bottom: none;
-	}
-	
-	.rank-number {
-		width: 60rpx;
-		height: 60rpx;
-		background-color: #667eea;
-		color: #fff;
-		border-radius: 30rpx;
-		text-align: center;
-		line-height: 60rpx;
-		font-size: 24rpx;
-		margin-right: 20rpx;
-	}
-	
-	.product-name {
-		flex: 1;
-		font-size: 26rpx;
-		color: #333;
-	}
-	
-	.product-sales {
-		font-size: 24rpx;
-		color: #666;
-	}
-	
-	.user-behavior-section {
-		background-color: #fff;
-		margin: 20rpx;
-		padding: 30rpx;
-		border-radius: 16rpx;
-	}
-	
-	.behavior-grid {
-		display: flex;
-		flex-direction: column;
-	}
-	
-	.behavior-card {
-		border: 1rpx solid #e5e5e5;
-		border-radius: 12rpx;
-		padding: 25rpx;
-		margin-bottom: 20rpx;
-	}
-	
-	.behavior-title {
-		font-size: 28rpx;
-		font-weight: bold;
-		color: #333;
-		margin-bottom: 20rpx;
-	}
-	
-	.behavior-metrics {
-		display: flex;
-		flex-direction: column;
-	}
-	
-	.metric-row {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 15rpx 0;
-		border-bottom: 1rpx solid #f0f0f0;
-	}
-	
-	.metric-row:last-child {
-		border-bottom: none;
-	}
-	
-	.metric-label {
-		font-size: 26rpx;
-		color: #666;
-	}
-	
-	.metric-value {
-		font-size: 28rpx;
-		font-weight: bold;
-		color: #333;
-	}
-	
-	.traffic-sources {
-		display: flex;
-		flex-direction: column;
-	}
-	
-	.source-item {
-		display: flex;
-		align-items: center;
-		margin-bottom: 20rpx;
-	}
-	
-	.source-name {
-		width: 150rpx;
-		font-size: 24rpx;
-		color: #333;
-	}
-	
-	.source-progress {
-		flex: 1;
-		height: 20rpx;
-		background-color: #f0f0f0;
-		border-radius: 10rpx;
-		margin: 0 20rpx;
-		position: relative;
-	}
-	
-	.progress-bar {
-		height: 100%;
-		background-color: #667eea;
-		border-radius: 10rpx;
-	}
-	
-	.source-percentage {
-		width: 80rpx;
-		text-align: right;
-		font-size: 24rpx;
-		color: #666;
-	}
-	
-	.merchant-performance-section {
-		background-color: #fff;
-		margin: 20rpx;
-		padding: 30rpx;
-		border-radius: 16rpx;
-	}
-	
-	.performance-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 30rpx;
-	}
-	
-	.performance-subtitle {
-		font-size: 26rpx;
-		color: #666;
-	}
-	
-	.view-all {
-		font-size: 24rpx;
-		color: #667eea;
-	}
-	
-	.merchant-ranking {
-		display: flex;
-		flex-direction: column;
-	}
-	
-	.merchant-rank-item {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 20rpx 0;
-		border-bottom: 1rpx solid #f0f0f0;
-	}
-	
-	.merchant-rank-item:last-child {
-		border-bottom: none;
-	}
-	
-	.rank-info {
-		display: flex;
-		align-items: center;
-		flex: 1;
-	}
-	
-	.rank-badge {
-		width: 50rpx;
-		height: 50rpx;
-		border-radius: 25rpx;
-		text-align: center;
-		line-height: 50rpx;
-		font-size: 20rpx;
-		font-weight: bold;
-		margin-right: 20rpx;
-	}
-	
-	.rank-gold {
-		background-color: #FFD700;
-		color: #fff;
-	}
-	
-	.rank-silver {
-		background-color: #C0C0C0;
-		color: #fff;
-	}
-	
-	.rank-bronze {
-		background-color: #CD7F32;
-		color: #fff;
-	}
-	
-	.rank-default {
-		background-color: #f0f0f0;
-		color: #666;
-	}
-	
-	.merchant-logo {
-		width: 60rpx;
-		height: 60rpx;
-		border-radius: 30rpx;
-		margin-right: 15rpx;
-	}
-	
-	.merchant-details {
-		display: flex;
-		flex-direction: column;
-	}
-	
-	.merchant-name {
-		font-size: 26rpx;
-		color: #333;
-		margin-bottom: 5rpx;
-	}
-	
-	.merchant-category {
-		font-size: 22rpx;
-		color: #666;
-	}
-	
-	.performance-data {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-end;
-	}
-	
-	.sales-amount {
-		font-size: 28rpx;
-		font-weight: bold;
-		color: #333;
-		margin-bottom: 5rpx;
-	}
-	
-	.growth-rate {
-		font-size: 22rpx;
-	}
-	
-	.growth-positive {
-		color: #4CAF50;
-	}
-	
-	.growth-negative {
-		color: #F44336;
-	}
-	
-	.growth-neutral {
-		color: #666;
-	}
-	
-	.delivery-analysis-section {
-		background-color: #fff;
-		margin: 20rpx;
-		padding: 30rpx;
-		border-radius: 16rpx;
-	}
-	
-	.delivery-metrics {
-		display: flex;
-		justify-content: space-between;
-	}
-	
-	.delivery-card {
-		width: 48%;
-		border: 1rpx solid #e5e5e5;
-		border-radius: 12rpx;
-		padding: 25rpx;
-		text-align: center;
-	}
-	
-	.delivery-title {
-		font-size: 26rpx;
-		font-weight: bold;
-		color: #333;
-		margin-bottom: 20rpx;
-	}
-	
-	.delivery-stats {
-		display: flex;
-		justify-content: center;
-	}
-	
-	.stat-circle {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-	
-	.circle-value {
-		font-size: 48rpx;
-		font-weight: bold;
-		color: #667eea;
-	}
-	
-	.circle-unit {
-		font-size: 20rpx;
-		color: #666;
-		margin-bottom: 10rpx;
-	}
-	
-	.circle-label {
-		font-size: 22rpx;
-		color: #333;
-	}
-	
-	.coverage-info {
-		display: flex;
-		flex-direction: column;
-	}
-	
-	.coverage-item {
-		font-size: 24rpx;
-		color: #333;
-		margin-bottom: 10rpx;
-		text-align: left;
-	}
-	
-	.quick-tools-section {
-		background-color: #fff;
-		margin: 20rpx;
-		padding: 30rpx;
-		border-radius: 16rpx;
-	}
-	
-	.tools-grid {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-	}
-	
-	.tool-card {
-		width: 30%;
-		border: 1rpx solid #e5e5e5;
-		border-radius: 12rpx;
-		padding: 25rpx 15rpx;
-		margin-bottom: 20rpx;
-		text-align: center;
-	}
-	
-	.tool-icon {
-		font-size: 48rpx;
-		margin-bottom: 15rpx;
-	}
-	
-	.tool-name {
-		font-size: 24rpx;
-		font-weight: bold;
-		color: #333;
-		margin-bottom: 8rpx;
-	}
-	
-	.tool-description {
-		font-size: 20rpx;
-		color: #666;
-	}
+/* 页面：白底 + 宽屏居中 + 自适应 */
+/* 说明：uni-app 的 rpx 会随屏宽缩放，宽屏 H5 建议用 max-width 控制内容宽度。 */
+
+.page {
+  min-height: 100vh;
+  background: #f6f7fb;
+}
+
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 16px 16px 28px;
+  box-sizing: border-box;
+}
+
+/* 顶部 */
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 12px;
+  padding: 14px 14px;
+  background: #fff;
+  border-radius: 14px;
+  border: 1px solid rgba(0,0,0,0.06);
+}
+
+.topbar-left {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #111;
+}
+
+.subtitle {
+  font-size: 12px;
+  color: rgba(0,0,0,0.55);
+}
+
+.topbar-right {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.icon-btn {
+  padding: 8px 12px;
+  border-radius: 10px;
+  background: #f3f4f6;
+  color: #111;
+  font-size: 13px;
+}
+
+.icon-btn.primary {
+  background: #111;
+  color: #fff;
+}
+
+/* KPI：默认 2列，宽屏 4列 */
+.kpi-grid {
+  margin-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.kpi-card {
+  background: #fff;
+  border-radius: 14px;
+  border: 1px solid rgba(0,0,0,0.06);
+  padding: 14px;
+  box-sizing: border-box;
+  width: calc(50% - 6px);
+}
+
+.kpi-label {
+  font-size: 12px;
+  color: rgba(0,0,0,0.55);
+}
+
+.kpi-value {
+  margin-top: 8px;
+  font-size: 22px;
+  font-weight: 800;
+  color: #111;
+}
+
+.kpi-meta {
+  margin-top: 8px;
+  font-size: 12px;
+  color: rgba(0,0,0,0.55);
+}
+
+/* 时间维度 tabs 横排 */
+.tabs {
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+  padding: 8px;
+  background: #fff;
+  border-radius: 14px;
+  border: 1px solid rgba(0,0,0,0.06);
+  overflow-x: auto;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.tab {
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: #f3f4f6;
+  color: #111;
+  font-size: 13px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.tab.active {
+  background: #111;
+  color: #fff;
+}
+
+/* 卡片 */
+.card {
+  margin-top: 12px;
+  background: #fff;
+  border-radius: 16px;
+  border: 1px solid rgba(0,0,0,0.06);
+  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
+  padding: 14px;
+  box-sizing: border-box;
+}
+
+.card-full {
+  width: 100%;
+}
+
+.fullwide {
+  margin-top: 12px;
+}
+
+.card-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #111;
+}
+
+.card-desc {
+  font-size: 12px;
+  color: rgba(0,0,0,0.55);
+}
+
+/* 图表必须给高度（H5 否则可能 0 高） */
+.chart-box {
+  width: 100%;
+  height: 360px; /* 建议用 px，H5 更稳 */
+}
+
+.fullwide .chart-box {
+  height: 420px; /* 大图更高 */
+}
+
+/* 关键：左右分栏（宽屏） */
+.insights-row {
+  display: flex;
+  gap: 12px;
+  align-items: stretch;
+  margin-top: 12px;
+}
+
+/* 左边更宽，右边更窄 */
+.insights-left {
+  flex: 2;
+  min-width: 0; /* 防止图表撑破 */
+}
+
+.insights-right {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.insights-right .card {
+  margin-top: 0;
+}
+
+/* 列表样式 */
+.rank-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.rank-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+
+.rank-item:last-child {
+  border-bottom: none;
+}
+
+.rank-no {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: rgba(0,0,0,0.06);
+  text-align: center;
+  line-height: 28px;
+  font-size: 12px;
+  flex: 0 0 auto;
+}
+
+.rank-name {
+  flex: 1;
+  font-size: 13px;
+  color: #111;
+}
+
+.rank-val {
+  font-size: 13px;
+  color: rgba(0,0,0,0.65);
+}
+
+.rank-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.chip {
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+}
+
+.chip.pos {
+  background: rgba(34,197,94,0.12);
+  color: #16a34a;
+}
+
+.chip.neg {
+  background: rgba(239,68,68,0.12);
+  color: #dc2626;
+}
+
+/* 宽屏：KPI 4列 */
+@media screen and (min-width: 960px) {
+  .kpi-card {
+    width: calc(25% - 9px);
+  }
+}
+
+/* 自适应：窄屏自动变一列（断点用 px） */
+@media screen and (max-width: 960px) {
+  .insights-row {
+    flex-direction: column;
+  }
+  .chart-box {
+    height: 320px;
+  }
+  .fullwide .chart-box {
+    height: 360px;
+  }
+}
 </style>
diff --git a/pages/mall/analytics/profile.uvue b/pages/mall/analytics/profile.uvue
index 506ae8fa..f0da805e 100644
--- a/pages/mall/analytics/profile.uvue
+++ b/pages/mall/analytics/profile.uvue
@@ -428,7 +428,7 @@ function changeTrendPeriod(period: string) {
 
 function viewReportDetail(reportId: string) {
   uni.navigateTo({
-    url: `/pages/mall/analytics/report-detail?id=${reportId}`
+    url: `/pages/mall/analytics/report-detail?reportId=${reportId}`
   })
 }
 
diff --git a/pages/mall/analytics/report-detail.uvue b/pages/mall/analytics/report-detail.uvue
index b8c3cf3c..1e163a2c 100644
--- a/pages/mall/analytics/report-detail.uvue
+++ b/pages/mall/analytics/report-detail.uvue
@@ -248,9 +248,18 @@ export default {
     }
   },
   onLoad(options: any) {
-    const reportId = options.reportId as string
+    // 兼容两种参数名：reportId 和 id
+    const reportId = (options.reportId || options.id) as string
     if (reportId) {
       this.loadReportDetail(reportId)
+    } else {
+      uni.showToast({
+        title: '缺少报表ID',
+        icon: 'none'
+      })
+      setTimeout(() => {
+        uni.navigateBack()
+      }, 1500)
     }
   },
   methods: {
diff --git a/pages/mall/analytics/test/README.md b/pages/mall/analytics/test/README.md
new file mode 100644
index 00000000..268e76c7
--- /dev/null
+++ b/pages/mall/analytics/test/README.md
@@ -0,0 +1,181 @@
+# 数据分析实时大屏 - 测试数据说明
+
+本目录包含用于测试数据分析实时大屏功能的 SQL 脚本和测试数据。
+
+## 文件说明
+
+### 1. `01_create_tables.sql`
+创建所需的数据表结构，包括：
+- `orders` - 订单表
+- `user_sessions` - 用户会话表
+- `users` - 用户表
+- `products` - 商品表（可选）
+- `order_items` - 订单商品关联表（可选）
+- `page_views` - 访问日志表（可选）
+
+**执行顺序：** 首先执行此文件创建表结构
+
+### 2. `02_insert_test_data.sql`
+插入测试数据，包括：
+- 8个测试用户
+- 5个在线用户会话（最近5分钟内有活动）
+- 15个今日订单（用于计算实时GMV和订单数）
+- 10个昨日同时段订单（用于计算增长率）
+- 15条访问日志（用于转化率计算）
+
+**执行顺序：** 在创建表后执行此文件插入测试数据
+
+### 3. `03_test_queries.sql`
+包含各种测试查询，用于验证数据计算逻辑：
+- 实时GMV查询
+- 在线用户查询
+- 转化率查询
+- 综合实时大屏数据查询
+- 数据验证查询
+
+**执行顺序：** 在插入测试数据后执行此文件验证数据
+
+## 使用方法
+
+### 方式 1: 通过 Supabase Dashboard（推荐）
+
+1. **访问 Dashboard**
+   ```
+   http://192.168.1.63:8000
+   或
+   http://192.168.1.63:3000  (Studio 默认端口)
+   ```
+
+2. **登录**
+   - 用户名：`supabase`
+   - 密码：`D4ce5p8YBpfYzEoDGZ_7MzehZcWrdCNyDEj_VSUBmOw`
+
+3. **打开 SQL Editor**
+   - 在左侧菜单找到 "SQL Editor"
+   - 点击 "New Query"
+
+4. **执行脚本**
+   - 复制 `01_create_tables.sql` 的内容，粘贴并执行
+   - 复制 `02_insert_test_data.sql` 的内容，粘贴并执行
+   - （可选）复制 `03_test_queries.sql` 的内容，验证数据
+
+### 方式 2: 使用命令行（PostgreSQL）
+
+```bash
+# 连接到内网 Supabase 数据库
+psql -h 192.168.1.63 -p 5432 -U postgres -d postgres
+
+# 输入密码：yxyHINygZMLSq9jLddrZQBB-CoyGHSF5DwlwWmbrYXc
+
+# 执行 SQL 文件（需要完整路径）
+\i D:/datas/hfkj/mall/pages/mall/analytics/test/01_create_tables.sql
+\i D:/datas/hfkj/mall/pages/mall/analytics/test/02_insert_test_data.sql
+\i D:/datas/hfkj/mall/pages/mall/analytics/test/03_test_queries.sql
+```
+
+### 方式 3: 使用图形工具（DBeaver / pgAdmin）
+
+1. **创建连接**
+   - 主机：`192.168.1.63`
+   - 端口：`5432`
+   - 数据库：`postgres`
+   - 用户名：`postgres`
+   - 密码：`yxyHINygZMLSq9jLddrZQBB-CoyGHSF5DwlwWmbrYXc`
+
+2. **执行 SQL**
+   - 打开 SQL 编辑器
+   - 复制 SQL 文件内容并执行
+
+**详细说明请查看：`SQL_USAGE_GUIDE.md`**
+
+## 测试数据说明
+
+### 实时GMV测试数据
+- **今日订单总数：** 15笔
+- **今日GMV：** 约 3,500 元（根据订单金额累加）
+- **昨日同时段订单：** 10笔
+- **昨日同时段GMV：** 约 2,200 元
+- **预期增长率：** 约 59%（(3500-2200)/2200 * 100）
+
+### 实时订单测试数据
+- **今日订单数：** 15笔
+- **昨日同时段订单数：** 10笔
+- **预期增长率：** 50%（(15-10)/10 * 100）
+
+### 在线用户测试数据
+- **最近5分钟内有活动的用户：** 5个
+- 这些用户会在实时大屏中显示为"在线用户"
+
+### 转化率测试数据
+- **今日访问用户数：** 约 10-15个（从 user_sessions 表统计）
+- **今日下单用户数：** 约 8个（从 orders 表去重统计）
+- **预期转化率：** 约 53-80%（根据实际数据计算）
+
+## 注意事项
+
+1. **时间依赖**
+   - 测试数据使用了 `NOW()` 和相对时间（如 `INTERVAL '1 hour'`）
+   - 每次执行时，数据的时间戳会基于当前时间生成
+   - 建议在测试前先清空相关表的数据（谨慎操作）
+
+2. **数据冲突**
+   - 脚本使用了 `ON CONFLICT DO NOTHING` 或 `ON CONFLICT DO UPDATE`
+   - 可以多次执行而不会产生重复数据
+   - 如需重新生成数据，请先清空表
+
+3. **状态值**
+   - 订单状态：`2` 表示已支付/已完成
+   - 用户会话：`is_active = true` 表示活跃会话
+
+4. **UUID 格式**
+   - 所有 ID 使用 UUID 格式
+   - 测试数据使用了固定的 UUID 便于识别
+
+## 清理测试数据
+
+如果需要清理测试数据，可以执行：
+
+```sql
+-- 谨慎操作：清空测试数据
+TRUNCATE TABLE orders, user_sessions, users, order_items, page_views CASCADE;
+```
+
+或者删除特定时间范围的数据：
+
+```sql
+-- 删除今日的测试订单
+DELETE FROM orders WHERE created_at >= DATE_TRUNC('day', NOW());
+
+-- 删除测试用户会话
+DELETE FROM user_sessions WHERE created_at >= DATE_TRUNC('day', NOW());
+```
+
+## 验证实时大屏功能
+
+执行完测试数据后，在数据分析页面应该能看到：
+
+1. **实时GMV：** 约 ¥3,500（根据实际订单金额）
+2. **实时订单：** 15笔
+3. **在线用户：** 5人
+4. **转化率：** 约 50-80%（根据实际计算）
+
+增长率会根据昨日同时段的数据自动计算。
+
+## 问题排查
+
+如果实时大屏显示异常，可以：
+
+1. 执行 `03_test_queries.sql` 中的查询验证数据
+2. 检查订单状态是否为 `2`（已支付）
+3. 检查时间范围是否正确（今日 vs 昨日同时段）
+4. 检查用户会话的 `last_active_at` 是否在最近5分钟内
+5. 查看浏览器控制台的错误信息
+
+## 扩展测试数据
+
+如果需要更多测试数据，可以：
+
+1. 修改 `02_insert_test_data.sql` 中的 INSERT 语句
+2. 调整订单金额、数量和时间分布
+3. 添加更多用户和会话数据
+4. 使用循环生成大量测试数据（注意性能）
diff --git a/pages/mall/analytics/test/SQL_USAGE_GUIDE.md b/pages/mall/analytics/test/SQL_USAGE_GUIDE.md
new file mode 100644
index 00000000..fff1ac0f
--- /dev/null
+++ b/pages/mall/analytics/test/SQL_USAGE_GUIDE.md
@@ -0,0 +1,304 @@
+# SQL 测试脚本使用指南
+
+本指南说明如何在内网 Supabase 环境中执行测试 SQL 脚本。
+
+## 📋 目录结构
+
+```
+pages/mall/analytics/test/
+├── 01_create_tables.sql      # 创建表结构
+├── 02_insert_test_data.sql   # 插入测试数据
+├── 03_test_queries.sql       # 测试查询
+├── 04_cleanup.sql            # 清理数据
+└── SQL_USAGE_GUIDE.md        # 本指南
+```
+
+## 🚀 执行方式
+
+### 方式 1: 通过 Supabase Dashboard（推荐）
+
+如果您的内网 Supabase 有 Dashboard 界面：
+
+1. **访问 Dashboard**
+   ```
+   http://192.168.1.63:8000
+   或
+   http://192.168.1.63:3000  (Studio 默认端口)
+   ```
+
+2. **登录**
+   - 用户名：`supabase`（根据您的配置）
+   - 密码：`D4ce5p8YBpfYzEoDGZ_7MzehZcWrdCNyDEj_VSUBmOw`
+
+3. **打开 SQL Editor**
+   - 在左侧菜单找到 "SQL Editor" 或 "SQL"
+   - 点击 "New Query"
+
+4. **执行脚本**
+   - 复制 `01_create_tables.sql` 的内容
+   - 粘贴到 SQL Editor
+   - 点击 "Run" 或按 `Ctrl+Enter`
+   - 等待执行完成
+
+5. **依次执行其他脚本**
+   - 执行 `02_insert_test_data.sql`（插入测试数据）
+   - 执行 `03_test_queries.sql`（验证数据，可选）
+
+### 方式 2: 通过 PostgreSQL 客户端（psql）
+
+如果 Dashboard 不可用，可以直接连接 PostgreSQL：
+
+1. **连接数据库**
+   ```bash
+   # 使用 psql 连接
+   psql -h 192.168.1.63 -p 5432 -U postgres -d postgres
+   
+   # 输入密码（根据您的配置）
+   # POSTGRES_PASSWORD=yxyHINygZMLSq9jLddrZQBB-CoyGHSF5DwlwWmbrYXc
+   ```
+
+2. **执行 SQL 文件**
+   ```sql
+   -- 在 psql 中执行
+   \i /path/to/01_create_tables.sql
+   \i /path/to/02_insert_test_data.sql
+   \i /path/to/03_test_queries.sql
+   ```
+
+   或者直接复制粘贴 SQL 内容到 psql 中执行。
+
+### 方式 3: 通过 DBeaver / pgAdmin 等图形工具
+
+1. **创建新连接**
+   - 主机：`192.168.1.63`
+   - 端口：`5432`
+   - 数据库：`postgres`
+   - 用户名：`postgres`
+   - 密码：`yxyHINygZMLSq9jLddrZQBB-CoyGHSF5DwlwWmbrYXc`
+
+2. **执行 SQL**
+   - 打开 SQL 编辑器
+   - 复制 SQL 文件内容
+   - 执行脚本
+
+### 方式 4: 通过 HTTP API（程序化执行）
+
+使用 Supabase REST API 执行 SQL（需要 service_role key）：
+
+```javascript
+// 注意：这种方式需要 Supabase 的 SQL 执行功能
+// 通常不推荐，因为安全风险较高
+const response = await fetch('http://192.168.1.63:8000/rest/v1/rpc/exec_sql', {
+  method: 'POST',
+  headers: {
+    'apikey': 'YOUR_SERVICE_ROLE_KEY',
+    'Authorization': 'Bearer YOUR_SERVICE_ROLE_KEY',
+    'Content-Type': 'application/json'
+  },
+  body: JSON.stringify({
+    sql: 'SELECT * FROM users LIMIT 1;'
+  })
+})
+```
+
+## 📝 执行顺序
+
+**重要：必须按顺序执行！**
+
+1. ✅ **第一步：创建表结构**
+   ```sql
+   -- 执行 01_create_tables.sql
+   -- 这会创建所有需要的表和索引
+   ```
+
+2. ✅ **第二步：插入测试数据**
+   ```sql
+   -- 执行 02_insert_test_data.sql
+   -- 这会插入测试用户、订单、会话等数据
+   ```
+
+3. ✅ **第三步：验证数据（可选）**
+   ```sql
+   -- 执行 03_test_queries.sql
+   -- 验证数据是否正确插入，查看统计信息
+   ```
+
+4. ⚠️ **清理数据（需要时）**
+   ```sql
+   -- 执行 04_cleanup.sql
+   -- 谨慎使用：会删除测试数据
+   ```
+
+## 🔍 验证执行结果
+
+### 检查表是否创建成功
+
+```sql
+-- 查看所有表
+SELECT table_name 
+FROM information_schema.tables 
+WHERE table_schema = 'public'
+ORDER BY table_name;
+
+-- 应该看到：
+-- orders
+-- user_sessions
+-- users
+-- products (可选)
+-- order_items (可选)
+-- page_views (可选)
+```
+
+### 检查数据是否插入成功
+
+```sql
+-- 检查用户数量
+SELECT COUNT(*) FROM users;
+-- 应该返回 8
+
+-- 检查订单数量
+SELECT COUNT(*) FROM orders WHERE created_at >= DATE_TRUNC('day', NOW());
+-- 应该返回 15（今日订单）
+
+-- 检查在线用户
+SELECT COUNT(*) FROM user_sessions 
+WHERE last_active_at >= NOW() - INTERVAL '5 minutes' AND is_active = true;
+-- 应该返回 5
+```
+
+### 检查实时大屏数据
+
+```sql
+-- 执行 03_test_queries.sql 中的综合查询
+-- 应该能看到：
+-- - 实时GMV: 约 3,500 元
+-- - 实时订单: 15 笔
+-- - 在线用户: 5 人
+-- - 转化率: 约 50-80%
+```
+
+## ⚠️ 注意事项
+
+### 1. 权限问题
+
+如果遇到权限错误：
+```sql
+-- 确保 postgres 用户有足够权限
+GRANT ALL PRIVILEGES ON DATABASE postgres TO postgres;
+GRANT ALL PRIVILEGES ON SCHEMA public TO postgres;
+```
+
+### 2. 表已存在
+
+如果表已存在，脚本会使用 `CREATE TABLE IF NOT EXISTS`，不会报错。
+但如果需要重新创建：
+```sql
+-- 先删除表（谨慎操作）
+DROP TABLE IF EXISTS order_items CASCADE;
+DROP TABLE IF EXISTS page_views CASCADE;
+DROP TABLE IF EXISTS user_sessions CASCADE;
+DROP TABLE IF EXISTS orders CASCADE;
+DROP TABLE IF EXISTS users CASCADE;
+DROP TABLE IF EXISTS products CASCADE;
+```
+
+### 3. 时间依赖
+
+测试数据使用 `NOW()` 函数，每次执行都会基于当前时间生成。
+- 今日订单：基于当前日期
+- 昨日订单：当前时间往前推 24 小时
+- 在线用户：最近 5 分钟内有活动
+
+### 4. UUID 冲突
+
+如果重复执行插入脚本，由于使用了 `ON CONFLICT DO NOTHING`，不会产生重复数据。
+但如果需要重新插入，先执行清理脚本。
+
+## 🐛 常见问题
+
+### Q1: 连接被拒绝
+```
+Error: connection refused
+```
+**解决：**
+- 检查 Supabase 服务是否运行
+- 检查防火墙设置
+- 确认端口 5432 是否开放
+
+### Q2: 认证失败
+```
+Error: password authentication failed
+```
+**解决：**
+- 确认密码是否正确：`yxyHINygZMLSq9jLddrZQBB-CoyGHSF5DwlwWmbrYXc`
+- 检查用户名是否为 `postgres`
+
+### Q3: 表已存在错误
+```
+Error: relation "orders" already exists
+```
+**解决：**
+- 脚本已使用 `IF NOT EXISTS`，通常不会报错
+- 如需重新创建，先删除表
+
+### Q4: 权限不足
+```
+Error: permission denied
+```
+**解决：**
+- 使用 postgres 超级用户执行
+- 或授予相应权限
+
+## 📊 执行后的预期结果
+
+执行完所有脚本后，您应该能看到：
+
+1. **数据库表**
+   - 6 个表已创建（orders, user_sessions, users, products, order_items, page_views）
+   - 所有索引已创建
+
+2. **测试数据**
+   - 8 个测试用户
+   - 15 个今日订单
+   - 10 个昨日订单
+   - 5 个在线用户会话
+   - 15 条访问日志
+
+3. **实时大屏显示**
+   - 在数据分析页面应该能看到实时数据
+   - GMV、订单数、在线用户、转化率都有值
+
+## 🔄 重新执行
+
+如果需要重新生成测试数据：
+
+1. **清理数据**
+   ```sql
+   -- 执行 04_cleanup.sql
+   ```
+
+2. **重新插入**
+   ```sql
+   -- 执行 02_insert_test_data.sql
+   ```
+
+## 📞 获取帮助
+
+如果遇到问题：
+
+1. 检查 Supabase 日志
+2. 查看数据库连接状态
+3. 验证配置文件 `ak/config.uts` 是否正确
+4. 使用测试页面验证连接：`/pages/mall/analytics/test/test-connection`
+
+## 🎯 快速开始
+
+**最简单的执行方式：**
+
+1. 打开 Supabase Dashboard（如果有）
+2. 进入 SQL Editor
+3. 复制 `01_create_tables.sql` 内容，执行
+4. 复制 `02_insert_test_data.sql` 内容，执行
+5. 完成！
+
+现在可以开始测试实时大屏功能了！🎉
diff --git a/pages/mall/analytics/test/test-connection.uvue b/pages/mall/analytics/test/test-connection.uvue
new file mode 100644
index 00000000..dcb29cfa
--- /dev/null
+++ b/pages/mall/analytics/test/test-connection.uvue
@@ -0,0 +1,529 @@
+<!-- Supabase 连接测试页面 -->
+<template>
+	<view class="test-container">
+		<view class="header">
+			<text class="title">Supabase 连接测试</text>
+		</view>
+
+		<view class="config-section">
+			<text class="section-title">当前配置</text>
+			<view class="config-item">
+				<text class="config-label">Supabase URL:</text>
+				<text class="config-value">{{ configUrl }}</text>
+			</view>
+			<view class="config-item">
+				<text class="config-label">API Key:</text>
+				<text class="config-value">{{ configKey.substring(0, 20) }}...</text>
+			</view>
+			<view class="config-item">
+				<text class="config-label">WebSocket URL:</text>
+				<text class="config-value">{{ configWs }}</text>
+			</view>
+		</view>
+
+		<view class="test-section">
+			<button class="test-btn" @click="testConnection" :disabled="isTesting">
+				{{ isTesting ? '测试中...' : '测试连接' }}
+			</button>
+		</view>
+
+		<view class="result-section" v-if="testResult">
+			<text class="section-title">测试结果</text>
+			<view class="result-item" :class="{ success: testResult.success, error: !testResult.success }">
+				<text class="result-icon">{{ testResult.success ? '✅' : '❌' }}</text>
+				<text class="result-text">{{ testResult.message }}</text>
+			</view>
+			
+			<view v-if="testResult.details" class="result-details">
+				<text class="details-title">详细信息:</text>
+				<text class="details-text">{{ testResult.details }}</text>
+			</view>
+
+			<view v-if="testResult.data" class="result-data">
+				<text class="data-title">返回数据:</text>
+				<text class="data-text">{{ JSON.stringify(testResult.data, null, 2) }}</text>
+			</view>
+		</view>
+
+		<view class="test-list">
+			<text class="section-title">测试项目</text>
+			
+			<view class="test-item" v-for="(test, index) in testList" :key="index">
+				<view class="test-info">
+					<text class="test-name">{{ test.name }}</text>
+					<text class="test-status" :class="test.status">{{ getStatusText(test.status) }}</text>
+				</view>
+				<button class="test-item-btn" @click="runTest(test)" :disabled="isTesting">执行</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="uts">
+	import supa from '@/components/supadb/aksupainstance.uts'
+	import { SUPA_URL, SUPA_KEY, WS_URL } from '@/ak/config.uts'
+
+	type TestResultType = {
+		success: boolean
+		message: string
+		details?: string
+		data?: any
+	}
+
+	type TestItemType = {
+		name: string
+		status: string
+		func: () => Promise<TestResultType>
+	}
+
+	export default {
+		data() {
+			return {
+				configUrl: SUPA_URL,
+				configKey: SUPA_KEY,
+				configWs: WS_URL,
+				isTesting: false,
+				testResult: null as TestResultType | null,
+				testList: [
+					{
+						name: '1. 基础连接测试',
+						status: 'pending',
+						func: this.testBasicConnection
+					} as TestItemType,
+					{
+						name: '2. 查询测试（查询用户表）',
+						status: 'pending',
+						func: this.testQuery
+					} as TestItemType,
+					{
+						name: '3. 认证测试',
+						status: 'pending',
+						func: this.testAuth
+					} as TestItemType,
+					{
+						name: '4. 实时连接测试',
+						status: 'pending',
+						func: this.testRealtime
+					} as TestItemType
+				] as Array<TestItemType>
+			}
+		},
+		methods: {
+			// 综合连接测试
+			async testConnection() {
+				this.isTesting = true
+				this.testResult = null
+				
+				try {
+					// 测试1: 基础连接
+					const basicResult = await this.testBasicConnection()
+					this.updateTestStatus(0, basicResult.success ? 'success' : 'error')
+					
+					if (!basicResult.success) {
+						this.testResult = basicResult
+						this.isTesting = false
+						return
+					}
+					
+					// 测试2: 查询测试
+					const queryResult = await this.testQuery()
+					this.updateTestStatus(1, queryResult.success ? 'success' : 'error')
+					
+					// 测试3: 认证测试
+					const authResult = await this.testAuth()
+					this.updateTestStatus(2, authResult.success ? 'success' : 'error')
+					
+					// 汇总结果
+					const allSuccess = basicResult.success && queryResult.success && authResult.success
+					this.testResult = {
+						success: allSuccess,
+						message: allSuccess 
+							? '所有测试通过！Supabase 连接正常。' 
+							: '部分测试失败，请查看详细信息。',
+						details: `基础连接: ${basicResult.success ? '✓' : '✗'}, 查询: ${queryResult.success ? '✓' : '✗'}, 认证: ${authResult.success ? '✓' : '✗'}`,
+						data: {
+							basic: basicResult,
+							query: queryResult,
+							auth: authResult
+						}
+					}
+					
+				} catch (err) {
+					this.testResult = {
+						success: false,
+						message: '测试过程中发生错误',
+						details: err?.toString() || '未知错误'
+					}
+				} finally {
+					this.isTesting = false
+				}
+			},
+			
+			// 测试1: 基础连接
+			async testBasicConnection(): Promise<TestResultType> {
+				try {
+					// 尝试访问 Supabase REST API
+					const response = await uni.request({
+						url: `${SUPA_URL}/rest/v1/`,
+						method: 'GET',
+						header: {
+							'apikey': SUPA_KEY,
+							'Authorization': `Bearer ${SUPA_KEY}`
+						},
+						timeout: 5000
+					})
+					
+					if (response.statusCode === 200 || response.statusCode === 404) {
+						// 404 也是正常的，说明服务器响应了
+						return {
+							success: true,
+							message: '基础连接成功',
+							details: `HTTP 状态码: ${response.statusCode}`,
+							data: response.data
+						}
+					} else {
+						return {
+							success: false,
+							message: '连接失败',
+							details: `HTTP 状态码: ${response.statusCode}`
+						}
+					}
+				} catch (err) {
+					return {
+						success: false,
+						message: '无法连接到 Supabase',
+						details: err?.toString() || '网络错误或服务器不可达'
+					}
+				}
+			},
+			
+			// 测试2: 查询测试
+			async testQuery(): Promise<TestResultType> {
+				try {
+					// 尝试查询 users 表（如果存在）
+					const { data, error } = await supa
+						.from('users')
+						.select('id, phone, nickname')
+						.limit(5)
+					
+					if (error !== null) {
+						// 如果表不存在，尝试查询其他表
+						if (error.message?.includes('relation') || error.message?.includes('does not exist')) {
+							// 尝试查询 orders 表
+							const { data: orderData, error: orderError } = await supa
+								.from('orders')
+								.select('id')
+								.limit(1)
+							
+							if (orderError !== null) {
+								return {
+									success: false,
+									message: '查询失败',
+									details: `错误: ${orderError.message || orderError.toString()}`
+								}
+							}
+							
+							return {
+								success: true,
+								message: '查询成功（使用 orders 表）',
+								details: 'users 表不存在，但 orders 表可访问',
+								data: orderData
+							}
+						}
+						
+						return {
+							success: false,
+							message: '查询失败',
+							details: `错误: ${error.message || error.toString()}`
+						}
+					}
+					
+					return {
+						success: true,
+						message: '查询成功',
+						details: `返回 ${data?.length || 0} 条记录`,
+						data: data
+					}
+				} catch (err) {
+					return {
+						success: false,
+						message: '查询测试失败',
+						details: err?.toString() || '未知错误'
+					}
+				}
+			},
+			
+			// 测试3: 认证测试
+			async testAuth(): Promise<TestResultType> {
+				try {
+					// 检查是否已登录
+					const { data: sessionData, error: sessionError } = await supa.auth.getSession()
+					
+					if (sessionError !== null) {
+						return {
+							success: false,
+							message: '获取会话失败',
+							details: sessionError.message || sessionError.toString()
+						}
+					}
+					
+					if (sessionData?.session !== null) {
+						return {
+							success: true,
+							message: '认证成功',
+							details: `用户已登录: ${sessionData.session.user.email || sessionData.session.user.phone || '未知'}`,
+							data: {
+								user: sessionData.session.user,
+								expires_at: sessionData.session.expires_at
+							}
+						}
+					} else {
+						return {
+							success: false,
+							message: '未登录',
+							details: '需要先登录才能测试认证功能'
+						}
+					}
+				} catch (err) {
+					return {
+						success: false,
+						message: '认证测试失败',
+						details: err?.toString() || '未知错误'
+					}
+				}
+			},
+			
+			// 测试4: 实时连接测试
+			async testRealtime(): Promise<TestResultType> {
+				try {
+					// WebSocket 连接测试比较复杂，这里只做 URL 验证
+					if (WS_URL.startsWith('ws://') || WS_URL.startsWith('wss://')) {
+						return {
+							success: true,
+							message: 'WebSocket URL 格式正确',
+							details: `URL: ${WS_URL}`
+						}
+					} else {
+						return {
+							success: false,
+							message: 'WebSocket URL 格式错误',
+							details: `URL 应以 ws:// 或 wss:// 开头`
+						}
+					}
+				} catch (err) {
+					return {
+						success: false,
+						message: '实时连接测试失败',
+						details: err?.toString() || '未知错误'
+					}
+				}
+			},
+			
+			// 运行单个测试
+			async runTest(test: TestItemType) {
+				this.isTesting = true
+				test.status = 'testing'
+				
+				try {
+					const result = await test.func()
+					test.status = result.success ? 'success' : 'error'
+					this.testResult = result
+				} catch (err) {
+					test.status = 'error'
+					this.testResult = {
+						success: false,
+						message: '测试执行失败',
+						details: err?.toString() || '未知错误'
+					}
+				} finally {
+					this.isTesting = false
+				}
+			},
+			
+			// 更新测试状态
+			updateTestStatus(index: number, status: string) {
+				if (this.testList[index]) {
+					this.testList[index].status = status
+				}
+			},
+			
+			// 获取状态文本
+			getStatusText(status: string): string {
+				const statusMap: Record<string, string> = {
+					'pending': '待测试',
+					'testing': '测试中...',
+					'success': '✓ 通过',
+					'error': '✗ 失败'
+				}
+				return statusMap[status] || '未知'
+			}
+		}
+	}
+</script>
+
+<style>
+	.test-container {
+		padding: 40rpx;
+		background-color: #f5f5f5;
+		min-height: 100vh;
+	}
+	
+	.header {
+		margin-bottom: 40rpx;
+	}
+	
+	.title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333;
+	}
+	
+	.config-section, .test-section, .result-section, .test-list {
+		background-color: #fff;
+		border-radius: 16rpx;
+		padding: 30rpx;
+		margin-bottom: 30rpx;
+	}
+	
+	.section-title {
+		font-size: 28rpx;
+		font-weight: bold;
+		color: #333;
+		margin-bottom: 20rpx;
+	}
+	
+	.config-item {
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 20rpx;
+	}
+	
+	.config-label {
+		font-size: 24rpx;
+		color: #666;
+		margin-bottom: 8rpx;
+	}
+	
+	.config-value {
+		font-size: 22rpx;
+		color: #333;
+		word-break: break-all;
+	}
+	
+	.test-btn {
+		width: 100%;
+		height: 80rpx;
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		color: #fff;
+		border-radius: 12rpx;
+		font-size: 28rpx;
+		border: none;
+	}
+	
+	.test-btn:disabled {
+		background: #ccc;
+	}
+	
+	.result-item {
+		display: flex;
+		align-items: center;
+		padding: 20rpx;
+		border-radius: 12rpx;
+		margin-bottom: 20rpx;
+	}
+	
+	.result-item.success {
+		background-color: #e8f5e8;
+	}
+	
+	.result-item.error {
+		background-color: #ffebee;
+	}
+	
+	.result-icon {
+		font-size: 32rpx;
+		margin-right: 15rpx;
+	}
+	
+	.result-text {
+		font-size: 26rpx;
+		color: #333;
+		flex: 1;
+	}
+	
+	.result-details, .result-data {
+		margin-top: 20rpx;
+		padding: 20rpx;
+		background-color: #f8f9fa;
+		border-radius: 8rpx;
+	}
+	
+	.details-title, .data-title {
+		font-size: 24rpx;
+		font-weight: bold;
+		color: #333;
+		margin-bottom: 10rpx;
+	}
+	
+	.details-text, .data-text {
+		font-size: 22rpx;
+		color: #666;
+		word-break: break-all;
+		white-space: pre-wrap;
+	}
+	
+	.test-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 25rpx 0;
+		border-bottom: 1rpx solid #f0f0f0;
+	}
+	
+	.test-item:last-child {
+		border-bottom: none;
+	}
+	
+	.test-info {
+		flex: 1;
+	}
+	
+	.test-name {
+		font-size: 26rpx;
+		color: #333;
+		margin-bottom: 8rpx;
+	}
+	
+	.test-status {
+		font-size: 22rpx;
+	}
+	
+	.test-status.pending {
+		color: #999;
+	}
+	
+	.test-status.testing {
+		color: #2196f3;
+	}
+	
+	.test-status.success {
+		color: #4caf50;
+	}
+	
+	.test-status.error {
+		color: #f44336;
+	}
+	
+	.test-item-btn {
+		padding: 12rpx 24rpx;
+		background-color: #667eea;
+		color: #fff;
+		border-radius: 8rpx;
+		font-size: 24rpx;
+		border: none;
+	}
+	
+	.test-item-btn:disabled {
+		background-color: #ccc;
+	}
+</style>
diff --git a/pages/mall/consumer/index.uvue b/pages/mall/consumer/index.uvue
index f5b4f75d..404eb7e1 100644
--- a/pages/mall/consumer/index.uvue
+++ b/pages/mall/consumer/index.uvue
@@ -169,34 +169,44 @@ const loadBanners = async () => {
 
 		if (error !== null) {
 			console.error('加载轮播图失败:', error)
+			bannerList.value = []
 			return
 		}
 
 		bannerList.value = data ?? []
 	} catch (err) {
 		console.error('加载轮播图异常:', err)
+		bannerList.value = []
 	}
 }
 
 // 加载分类
 const loadCategories = async () => {
 	try {
+		// 查询所有活跃分类，然后在前端过滤出顶级分类（parent_id 为 null）
+		// 这样可以避免 UTS 中 .is(null) 的类型问题
 		const { data, error } = await supa
 			.from('categories')
 			.select('*')
 			.eq('is_active', true)
-			.is('parent_id', null)
 			.order('sort_order', { ascending: true })
-			.limit(8)
 
 		if (error !== null) {
 			console.error('加载分类失败:', error)
+			categoryList.value = []
 			return
 		}
 
-		categoryList.value = data ?? []
+		// 过滤出顶级分类（parent_id 为 null 或 undefined）
+		const topCategories = (data ?? []).filter((item: any) => {
+			return item.parent_id === null || item.parent_id === undefined || item.parent_id === ''
+		}).slice(0, 8)  // 限制为前8个
+
+		categoryList.value = topCategories
 	} catch (err) {
 		console.error('加载分类异常:', err)
+		// 如果查询失败，使用空数组避免页面崩溃
+		categoryList.value = []
 	}
 }
 
@@ -204,22 +214,25 @@ const loadCategories = async () => {
 const loadCoupons = async () => {
 	try {
 		const now = new Date().toISOString()
+		// 查询当前时间在有效期内的优惠券：start_time <= now <= end_time
 		const { data, error } = await supa
 			.from('coupon_templates')
 			.select('*')
 			.eq('status', 1)
-			.gte('end_time', now)
-			.lte('start_time', now)
+			.lte('start_time', now)  // 开始时间 <= 当前时间
+			.gte('end_time', now)    // 结束时间 >= 当前时间
 			.limit(5)
 
 		if (error !== null) {
 			console.error('加载优惠券失败:', error)
+			couponList.value = []
 			return
 		}
 
 		couponList.value = data ?? []
 	} catch (err) {
 		console.error('加载优惠券异常:', err)
+		couponList.value = []
 	}
 }
 
@@ -242,6 +255,9 @@ const loadProducts = async (loadMore: boolean = false) => {
 
 		if (error !== null) {
 			console.error('加载商品失败:', error)
+			if (!loadMore) {
+				productList.value = []
+			}
 			isLoading.value = false
 			return
 		}
@@ -261,6 +277,9 @@ const loadProducts = async (loadMore: boolean = false) => {
 		hasMore.value = newProducts.length === pageSize.value
 	} catch (err) {
 		console.error('加载商品异常:', err)
+		if (!loadMore) {
+			productList.value = []
+		}
 	} finally {
 		isLoading.value = false
 	}
diff --git a/pages/mall/nfc-modules-guide.md b/pages/mall/nfc/nfc-modules-guide.md
similarity index 100%
rename from pages/mall/nfc-modules-guide.md
rename to pages/mall/nfc/nfc-modules-guide.md
diff --git a/pages/mall/nfc.md b/pages/mall/nfc/nfc.md
similarity index 100%
rename from pages/mall/nfc.md
rename to pages/mall/nfc/nfc.md
diff --git a/pages/mall/pages-admin.json b/pages/mall/nfc/pages-admin.json
similarity index 100%
rename from pages/mall/pages-admin.json
rename to pages/mall/nfc/pages-admin.json
diff --git a/pages/mall/pages-librarian.json b/pages/mall/nfc/pages-librarian.json
similarity index 100%
rename from pages/mall/pages-librarian.json
rename to pages/mall/nfc/pages-librarian.json
diff --git a/pages/mall/pages-merchant.json b/pages/mall/nfc/pages-merchant.json
similarity index 100%
rename from pages/mall/pages-merchant.json
rename to pages/mall/nfc/pages-merchant.json
diff --git a/pages/mall/pages-parent.json b/pages/mall/nfc/pages-parent.json
similarity index 100%
rename from pages/mall/pages-parent.json
rename to pages/mall/nfc/pages-parent.json
diff --git a/pages/mall/pages-security.json b/pages/mall/nfc/pages-security.json
similarity index 100%
rename from pages/mall/pages-security.json
rename to pages/mall/nfc/pages-security.json
diff --git a/pages/mall/pages-student.json b/pages/mall/nfc/pages-student.json
similarity index 100%
rename from pages/mall/pages-student.json
rename to pages/mall/nfc/pages-student.json
diff --git a/pages/mall/pages-teacher.json b/pages/mall/nfc/pages-teacher.json
similarity index 100%
rename from pages/mall/pages-teacher.json
rename to pages/mall/nfc/pages-teacher.json
diff --git a/pages/mall/pages-config.json b/pages/mall/pages-config.json
index f4985a33..149e6520 100644
--- a/pages/mall/pages-config.json
+++ b/pages/mall/pages-config.json
@@ -83,13 +83,6 @@
 				"navigationStyle": "custom"
 			}
 		},
-		{
-			"path": "pages/mall/analytics/index",
-			"style": {
-				"navigationBarTitleText": "数据分析",
-				"navigationStyle": "custom"
-			}
-		},
 		{
 			"path": "pages/mall/consumer/product-detail",
 			"style": {
@@ -461,6 +454,13 @@
 		{
 			"root": "pages/mall/analytics",
 			"pages": [
+				{
+					"path": "index",
+					"style": {
+						"navigationBarTitleText": "数据分析中心",
+						"navigationStyle": "custom"
+					}
+				},
 				{
 					"path": "sales-report",
 					"style": {
diff --git a/pages/user/login.uvue b/pages/user/login.uvue
index 4bd0b118..f8cd545d 100644
--- a/pages/user/login.uvue
+++ b/pages/user/login.uvue
@@ -1,523 +1,559 @@
 <template>
-	<view class="page">
-		<scroll-view class="scroll" scroll-y="true" show-scrollbar="false">
-			<view class="top-actions">
-				<button class="lang-btn" @click="toggleLanguage">
-					{{ currentLocale === 'zh-CN' ? 'EN' : '中' }}
-				</button>
-			</view>
+  <view class="page" :style="cssVars">
+    <!-- Header：仅保留左侧Logo -->
+    <view class="header">
+      <view class="header-left">
+        <image :src="logoUrl" mode="aspectFit" class="logo" />
+      </view>
+    </view>
 
-			<view class="hero">
-				<view class="brand-row">
-					<view class="brand-mark"></view>
-					<view class="brand-text">
-						<text class="brand-name">Mall</text>
-						<text class="brand-slogan">正品保障 · 省心售后</text>
-					</view>
-				</view>
-				<view class="title-block">
-					<text class="page-title">{{ $t('user.login.title') }}</text>
-					<text class="page-subtitle">{{ $t('user.login.subtitle') }}</text>
-				</view>
-			</view>
+    <!-- Main -->
+    <view class="main">
+      <view class="card">
+        <!-- Left：扫码区（>=768显示） -->
+        <view class="left">
+          <text class="left-title">APP 扫码登录</text>
 
-			<view class="card">
-				<form @submit="onSubmit">
-					<view class="field" :class="{ 'field-error': emailError }">
-						<text class="label">{{ $t('user.login.email') }}</text>
-						<view class="input-wrap">
-							<input class="input" name="email" type="text" :value="email" :placeholder="$t('user.login.email_placeholder')" @blur="validateEmail" />
-						</view>
-						<text v-if="emailError" class="support error">{{ emailError }}</text>
-					</view>
+          <view class="left-hint">
+            <text class="hint-text">打开 APP 扫一扫</text>
+            <text class="hint-link" @click="handleTutorial">查看教程</text>
+          </view>
 
-					<view class="field" :class="{ 'field-error': passwordError }">
-						<text class="label">{{ $t('user.login.password') }}</text>
-						<view class="input-wrap">
-							<input class="input" name="password" :type="showPassword ? 'text' : 'password'" :value="password" :placeholder="$t('user.login.password_placeholder')" @blur="validatePassword" />
-							<view class="suffix" @click="showPassword = !showPassword">
-								<text class="suffix-text">{{ showPassword ? '隐藏' : '显示' }}</text>
-							</view>
-						</view>
-						<text v-if="passwordError" class="support error">{{ passwordError }}</text>
-					</view>
+          <view class="qr-wrap">
+            <view class="qr">
+              <view class="qr-placeholder">
+                <text class="qr-text">二维码占位</text>
+                <text class="qr-sub">220×220</text>
+              </view>
+            </view>
+          </view>
+        </view>
 
-					<view class="row">
-						<view class="remember">
-							<checkbox value="rememberMe" color="#FF4D4F" />
-							<text class="remember-text">{{ $t('user.login.remember_me') }}</text>
-						</view>
-						<text class="link" @click="navigateToForgotPassword">{{ $t('user.login.forgot_password') }}</text>
-					</view>
+        <!-- Divider -->
+        <view class="divider"></view>
 
-					<button form-type="submit" class="primary" :disabled="isLoading" :loading="isLoading">
-						{{ $t('user.login.login_button') }}
-					</button>
+        <!-- Right：表单区 -->
+        <view class="right">
+          <view class="right-inner">
+            <!-- Tabs -->
+            <view class="tabs">
+              <view class="tab" :class="{ active: loginType === 0 }" @click="loginType = 0">
+                <text class="tab-text">密码登录</text>
+                <view v-if="loginType === 0" class="tab-line"></view>
+              </view>
 
-					<text v-if="generalError" class="support error center">{{ generalError }}</text>
-				</form>
+              <view class="tab" :class="{ active: loginType === 1 }" @click="loginType = 1">
+                <text class="tab-text">短信登录</text>
+                <view v-if="loginType === 1" class="tab-line"></view>
+              </view>
+            </view>
 
-				<view class="divider">
-					<view class="divider-line"></view>
-					<text class="divider-text">{{ $t('user.login.or_login_with') }}</text>
-					<view class="divider-line"></view>
-				</view>
+            <!-- Form -->
+            <view class="form">
+              <template v-if="loginType === 0">
+                <view class="field">
+                  <input
+                    class="input"
+                    type="text"
+                    placeholder="账号名/手机号/邮箱"
+                    :value="account"
+                    @input="(e: any) => account = e.detail.value"
+                  />
+                </view>
+                <view class="field">
+                  <input
+                    class="input"
+                    type="password"
+                    placeholder="密码"
+                    :value="password"
+                    @input="(e: any) => password = e.detail.value"
+                  />
+                </view>
+              </template>
 
-				<view class="social-row">
-					<button class="social wechat" @click="socialLogin('WeChat')"><text class="social-label">微信</text></button>
-					<button class="social qq" @click="socialLogin('QQ')"><text class="social-label">QQ</text></button>
-					<button class="social sms" @click="socialLogin('SMS')"><text class="social-label">短信</text></button>
-				</view>
+              <template v-else>
+                <view class="field">
+                  <input
+                    class="input"
+                    type="text"
+                    placeholder="输入手机号码"
+                    maxlength="11"
+                    :value="account"
+                    @input="(e: any) => account = e.detail.value"
+                  />
+                </view>
 
-				<view class="footer">
-					<text class="footer-text">{{ $t('user.login.no_account') }}</text>
-					<text class="footer-link" @click="navigateToRegister">{{ $t('user.login.register_now') }}</text>
-				</view>
-			</view>
+                <view class="field code-row">
+                  <input
+                    class="input code-input"
+                    type="text"
+                    placeholder="填写验证码"
+                    maxlength="6"
+                    :value="captcha"
+                    @input="(e: any) => captcha = e.detail.value"
+                  />
+                  <view class="code-btn" :class="{ disabled: codeDisabled }" @click="getCode">
+                    <text class="code-text">{{ codeText }}</text>
+                  </view>
+                </view>
+              </template>
 
-			<view class="trust">
-				<text class="trust-text">登录即代表你同意用户协议与隐私政策</text>
-			</view>
-		</scroll-view>
-	</view>
+              <!-- Button -->
+              <view class="btn" :class="{ disabled: isLoading }" @click="handleLogin">
+                <text class="btn-text">登录</text>
+              </view>
+
+              <!-- Actions：一行横排 -->
+              <view class="actions">
+                <view class="action-item" @click="handleWechatLogin">
+                  <view class="dot wechat"></view>
+                  <text class="action-text">微信登录</text>
+                </view>
+
+                <text class="sep">|</text>
+
+                <view class="action-item" @click="handleQQLogin">
+                  <view class="dot qq"></view>
+                  <text class="action-text">QQ登录</text>
+                </view>
+
+                <text class="sep">|</text>
+
+                <text class="action-link" @click="handleForgotPassword">忘记密码</text>
+
+                <text class="sep">|</text>
+
+                <text class="action-link" @click="navigateToRegister">立即注册</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- Footer -->
+    <view class="footer">
+      <text class="footer-text">Copyright ©2024 Mall. All Rights Reserved</text>
+    </view>
+  </view>
 </template>
 
-<script lang="uts">
-	import {HOME_REDIRECT,TABORPAGE} from '@/ak/config.uts'
-	import type { AkReqOptions, AkReqResponse, AkReqError } from '@/uni_modules/ak-req/index.uts';
-	import supa from '@/components/supadb/aksupainstance.uts';
-	import { getCurrentUser, logout } from '@/utils/store.uts';
-	import { switchLocale, getCurrentLocale } from '@/utils/utils.uts';
+<script setup lang="uts">
+import { ref, onMounted } from 'vue'
+import supa from '@/components/supadb/aksupainstance.uts'
+import { getCurrentUser, logout } from '@/utils/store.uts'
 
-	export default {
-		data() {
-			return {
-				// email: "akoo@163.com",
-				// password: "Hf2152111",
-				email: "am@163.com",
-				password: "kookoo",
-				emailError: "",
-				passwordError: "",
-				generalError: "",
-				isLoading: false,
-				showPassword: false,
-				rememberMe: false,
-				currentLocale: getCurrentLocale()
-			};
-		},
-		onLoad() {
-			// Try to restore saved email if "remember me" was selected
-			// this.tryRestoreEmail();
-			console.log('akkkk')
-			// 启动后若已登录，直接进入商城消费者端首页
-			try {
-				const sessionInfo = supa.getSession();
-				if (sessionInfo != null && sessionInfo.user != null) {
-					// 已登录 -> 直接进入 tabBar 首页
-					console.log('login onLoad: found session, go consumer/index')
-					uni.switchTab({ url: '/pages/mall/consumer/index' });
-					return;
-				}
-			} catch (e) {}
-		}, methods: {
+const cssVars = {
+  '--bg': '#f5f6f8',
+  '--card': '#ffffff',
+  '--brand': '#e1251b',
+  '--text': '#333333',
+  '--muted': '#666666',
+  '--muted2': '#999999',
+  '--border': '#eeeeee',
+  '--inputbg': '#f6f7f9',
+  '--shadow': '0 2px 12px rgba(0,0,0,0.06)'
+}
 
-			toggleLanguage() {
-				const newLocale = this.currentLocale === 'zh-CN' ? 'en-US' : 'zh-CN';
-				switchLocale(newLocale);
-				this.currentLocale = newLocale;
+const logoUrl = ref<string>('/static/logo.png')
 
-				uni.showToast({
-					title: this.$t('user.login.language_switched'),
-					icon: 'success'
-				});
-			}, tryRestoreEmail() {
+const loginType = ref<number>(0)
+const account = ref<string>('')
+const password = ref<string>('')
+const captcha = ref<string>('')
 
-				try {
-					const savedEmail = uni.getStorageSync('rememberEmail') as string;
-					if (savedEmail.trim() !== "") {
-						this.email = savedEmail;
-						this.rememberMe = true;
-					}
-				} catch (e) {
-					console.error("Error restoring email:", e);
-				}
-			},
-			onSubmit(e : UniFormSubmitEvent) {
-				this.handleLogin();
-			},
-			validateEmail() {
+const isLoading = ref<boolean>(false)
 
-				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-				if (this.email.trim() === "") {
-					this.emailError = this.$t('user.login.email_required');
-					return false;
-				} else if (!emailRegex.test(this.email)) {
-					this.emailError = this.$t('user.login.email_invalid');
-					return false;
-				} else {
-					this.emailError = '';
-					return true;
-				}
-			}, validatePassword() {
-				if (this.password.trim() === "") {
-					this.passwordError = this.$t('user.login.password_required');
-					return false;
-				} else if (this.password.length < 6) {
-					this.passwordError = this.$t('user.login.password_too_short');
-					return false;
-				} else {
-					this.passwordError = '';
-					return true;
-				}
-			},
-			validateForm() {
-				const emailValid = this.validateEmail();
-				const passwordValid = this.validatePassword();
-				return emailValid && passwordValid;
-			},
-			async handleLogin() {
-				this.generalError = '';
-				// 清除旧用户数据
-				logout();
-				if (!this.validateForm()) {
-					return;
-				}
-				this.isLoading = true;
-				try {
-					// Save email if remember me is checked
-					if (this.rememberMe) {
-						uni.setStorageSync('rememberEmail', this.email);
-					} else {
-						uni.removeStorageSync('rememberEmail');
-					}        // Call signin method from Supabase
-					const result = await supa.signIn(
-						this.email,
-						this.password);
-					if (result.user !== null) {
-						// 获取并更新当前用户，确保数据已生效
-						const profile = await getCurrentUser();
-						if (profile==null) throw new Error(this.$t('user.login.profile_update_failed'));
-						// 登录成功提示
-						uni.showToast({ title: this.$t('user.login.login_success'), icon: 'success' });
-						// 跳转至商城消费者端首页（类似京东：默认消费者）
-						uni.switchTab({ url: '/pages/mall/consumer/index' });
-						return;
-					} else {
-						throw new Error(this.$t('user.login.login_failed'));
-					}
-				} catch (err) {
-					console.error("Login error:", err);
+const codeDisabled = ref<boolean>(false)
+const codeText = ref<string>('获取验证码')
+let codeTimer: number | null = null
+const codeCountdown = ref<number>(0)
 
-					// Show error dialog to user
-					let errorMessage = this.$t('user.login.login_failed');
-					if (err !== null && typeof err === 'object') {
-						const error = err as Error;
-						if (error.message !== null && error.message.trim() !== '') {
-							errorMessage = error.message;
-						}
-					}
+onMounted(() => {
+  try {
+    const sessionInfo = supa.getSession()
+    if (sessionInfo != null && sessionInfo.user != null) {
+      uni.switchTab({ url: '/pages/mall/consumer/index' })
+    }
+  } catch (e) {
+    console.error('检查登录状态失败:', e)
+  }
+})
 
-					uni.showModal({
-						title: this.$t('user.login.error_title'),
-						content: errorMessage,
-						showCancel: false,
-						confirmText: this.$t('user.login.confirm'),
-						success: () => {
-							// Clear any existing error states
-							this.generalError = '';
-							this.emailError = '';
-							this.passwordError = '';
-						}
-					});
-				} finally {
-					this.isLoading = false;
-				}
-			},
-			socialLogin(provider : string) {
-				// This would be implemented to handle OAuth login with different providers
-				uni.showToast({
-					title: `${provider} ${this.$t('user.login.coming_soon')}`,
-					icon: 'none'
-				});
-			},
-			navigateToRegister() {
-				uni.navigateTo({
-					url: '/pages/user/register'
-				});
-			},
-			navigateToForgotPassword() {
-				uni.navigateTo({
-					url: '/pages/user/forgot-password'
-				});
-			}
-		}
-	};
+const validateAccount = (): boolean => {
+  if (account.value.trim() === '') {
+    uni.showToast({ title: '请填写账号', icon: 'none' })
+    return false
+  }
+  if (loginType.value === 1) {
+    if (!/^1[3-9]\d{9}$/.test(account.value)) {
+      uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })
+      return false
+    }
+  }
+  return true
+}
+
+const validatePassword = (): boolean => {
+  if (password.value.trim() === '') {
+    uni.showToast({ title: '请填写密码', icon: 'none' })
+    return false
+  }
+  if (password.value.length < 6) {
+    uni.showToast({ title: '密码长度不能少于6位', icon: 'none' })
+    return false
+  }
+  return true
+}
+
+const validateCaptcha = (): boolean => {
+  if (captcha.value.trim() === '') {
+    uni.showToast({ title: '请填写验证码', icon: 'none' })
+    return false
+  }
+  if (!/^\d{6}$/.test(captcha.value)) {
+    uni.showToast({ title: '请输入正确的验证码', icon: 'none' })
+    return false
+  }
+  return true
+}
+
+const getCode = async () => {
+  if (codeDisabled.value) return
+  if (!validateAccount()) return
+
+  uni.showToast({ title: '验证码已发送', icon: 'success' })
+
+  codeDisabled.value = true
+  codeCountdown.value = 60
+  codeText.value = `${codeCountdown.value}秒后重试`
+
+  codeTimer = setInterval(() => {
+    codeCountdown.value--
+    if (codeCountdown.value > 0) {
+      codeText.value = `${codeCountdown.value}秒后重试`
+    } else {
+      codeDisabled.value = false
+      codeText.value = '获取验证码'
+      if (codeTimer != null) {
+        clearInterval(codeTimer)
+        codeTimer = null
+      }
+    }
+  }, 1000) as unknown as number
+}
+
+const handleLogin = async () => {
+  if (!validateAccount()) return
+  if (loginType.value === 0) {
+    if (!validatePassword()) return
+  } else {
+    if (!validateCaptcha()) return
+  }
+
+  isLoading.value = true
+  try {
+    logout()
+
+    if (loginType.value === 0) {
+      const isEmail = account.value.includes('@')
+      if (isEmail) {
+        const result = await supa.signIn(account.value, password.value)
+        if (result.user == null) throw new Error('登录失败')
+      } else {
+        uni.showToast({ title: '手机号密码登录功能开发中', icon: 'none' })
+        return
+      }
+    } else {
+      uni.showToast({ title: '手机验证码登录功能开发中', icon: 'none' })
+      return
+    }
+
+    const profile = await getCurrentUser()
+    if (profile == null) throw new Error('获取用户信息失败')
+
+    uni.showToast({ title: '登录成功', icon: 'success' })
+    setTimeout(() => {
+      uni.switchTab({ url: '/pages/mall/consumer/index' })
+    }, 500)
+  } catch (err) {
+    console.error('登录错误:', err)
+    let msg = '登录失败，请重试'
+    if (err != null && typeof err === 'object') {
+      const e = err as Error
+      if (e.message != null && e.message.trim() !== '') msg = e.message
+    }
+    uni.showToast({ title: msg, icon: 'none' })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const navigateToRegister = () => {
+  uni.navigateTo({ url: '/pages/user/register' })
+}
+const handleTutorial = () => uni.showToast({ title: '扫码教程开发中', icon: 'none' })
+const handleForgotPassword = () => uni.showToast({ title: '忘记密码开发中', icon: 'none' })
+const handleWechatLogin = () => uni.showToast({ title: '微信登录开发中', icon: 'none' })
+const handleQQLogin = () => uni.showToast({ title: 'QQ登录开发中', icon: 'none' })
 </script>
 
-<style>
-	.page {
-		min-height: 100vh;
-		background: #f7f8fa;
-	}
+<style scoped>
+/* Base */
+.page{
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+}
 
-	.scroll {
-		min-height: 100vh;
-		background: radial-gradient(900rpx 700rpx at 20% 10%, rgba(255, 77, 79, 0.16), rgba(255, 77, 79, 0) 60%),
-			linear-gradient(180deg, #ffffff 0%, #f7f8fa 45%, #f7f8fa 100%);
-	}
+/* Header */
+.header{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 30px 72px;
+}
+.logo{
+  width: 300px;
+  height: 80px;
+}
 
-	.top-actions {
-		position: relative;
-		padding: 24rpx 24rpx 0;
-		display: flex;
-		justify-content: flex-end;
-	}
+/* Main */
+.main{
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 28px 18px;
+}
 
-	.lang-btn {
-		width: 76rpx;
-		height: 76rpx;
-		border-radius: 38rpx;
-		background: rgba(255, 255, 255, 0.9);
-		border: 1rpx solid rgba(0, 0, 0, 0.06);
-		color: #111;
-		font-size: 26rpx;
-		line-height: 76rpx;
-		text-align: center;
-		box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.06);
-	}
+/* Card */
+.card{
+  width: min(980px, 92vw);
+  min-height: 460px;
+  background: var(--card);
+  border-radius: 16px;
+  box-shadow: var(--shadow);
+  padding: 40px;
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+}
 
-	.hero {
-		padding: 26rpx 24rpx 14rpx;
-	}
+/* Left */
+.left{
+  flex: 0 0 52%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding-left: 18px;
+}
+.left-title{
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 10px;
+}
+.left-hint{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 18px;
+}
+.hint-text{ font-size: 13px; color: var(--muted); }
+.hint-link{ font-size: 13px; color: var(--brand); }
 
-	.brand-row {
-		display: flex;
-		align-items: center;
-	}
+.qr-wrap{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+.qr{
+  width: 240px;
+  height: 240px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.qr-placeholder{
+  width: 220px;
+  height: 220px;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.qr-text{ font-size: 14px; color: var(--muted); }
+.qr-sub{ font-size: 12px; color: var(--muted2); }
 
-	.brand-mark {
-		width: 72rpx;
-		height: 72rpx;
-		border-radius: 20rpx;
-		background: linear-gradient(135deg, #ff4d4f 0%, #ff8a65 100%);
-		box-shadow: 0 12rpx 26rpx rgba(255, 77, 79, 0.28);
-	}
+/* Divider */
+.divider{
+  width: 1px;
+  background: var(--border);
+  flex-shrink: 0;
+}
 
-	.brand-text {
-		margin-left: 18rpx;
-		display: flex;
-		flex-direction: column;
-	}
+/* Right */
+.right{
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.right-inner{
+  width: 360px;        /* 京东右侧“窄列”观感 */
+  max-width: 100%;
+  margin-left: auto;   /* 靠右 */
+}
 
-	.brand-name {
-		font-size: 40rpx;
-		font-weight: 700;
-		color: #111;
-		letter-spacing: 1rpx;
-	}
+/* Tabs */
+.tabs{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 24px;
+  margin-bottom: 18px;
+}
+.tab{
+  position: relative;
+  padding: 8px 2px;
+}
+.tab-text{
+  font-size: 16px;
+  color: var(--muted);
+}
+.tab.active .tab-text{
+  color: var(--brand);
+  font-weight: 600;
+}
+.tab-line{
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -6px;
+  height: 2px;
+  background: var(--brand);
+  border-radius: 2px;
+}
 
-	.brand-slogan {
-		margin-top: 6rpx;
-		font-size: 24rpx;
-		color: rgba(0, 0, 0, 0.55);
-	}
+/* Form */
+.form{ margin-top: 10px; }
+.field{ margin-bottom: 14px; }
+.input{
+  width: 100%;
+  height: 44px;
+  border-radius: 10px;
+  background: var(--inputbg);
+  padding: 0 14px;
+  font-size: 14px;
+  color: var(--text);
+  box-sizing: border-box;
+}
 
-	.title-block {
-		margin-top: 26rpx;
-	}
+/* Code row */
+.code-row{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+.code-input{ flex: 1; }
+.code-btn{
+  height: 44px;
+  padding: 0 12px;
+  border-radius: 10px;
+  background: #fff;
+  border: 1px solid #eee;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.code-btn.disabled{ opacity: 0.5; }
+.code-text{ font-size: 13px; color: var(--brand); }
 
-	.page-title {
-		font-size: 46rpx;
-		font-weight: 700;
-		color: #111;
-	}
+/* Button */
+.btn{
+  margin-top: 16px;
+  height: 46px;
+  border-radius: 10px;
+  background: rgba(225, 37, 27, 0.45);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.btn.disabled{ background: #d9d9d9; }
+.btn-text{
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+}
 
-	.page-subtitle {
-		margin-top: 10rpx;
-		font-size: 26rpx;
-		color: rgba(0, 0, 0, 0.55);
-	}
+/* Actions：一行横排 */
+.actions{
+  margin-top: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  flex-wrap: nowrap;
+}
+.action-item{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.dot{
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+.dot.wechat{ background: #19be6b; }
+.dot.qq{ background: #2d8cf0; }
 
-	.card {
-		margin: 18rpx 24rpx 0;
-		padding: 26rpx 22rpx;
-		background: rgba(255, 255, 255, 0.96);
-		border-radius: 20rpx;
-		border: 1rpx solid rgba(0, 0, 0, 0.06);
-		box-shadow: 0 16rpx 36rpx rgba(0, 0, 0, 0.06);
-	}
+.action-text{ font-size: 13px; color: var(--muted); }
+.action-link{ font-size: 13px; color: var(--muted); }
+.sep{ font-size: 13px; color: #e0e0e0; }
 
-	.field {
-		margin-bottom: 18rpx;
-	}
+/* Footer */
+.footer{
+  padding: 18px 0 28px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+.footer-text{ font-size: 12px; color: var(--muted2); }
 
-	.label {
-		font-size: 24rpx;
-		color: rgba(0, 0, 0, 0.78);
-		margin-bottom: 10rpx;
-		display: block;
-	}
-
-	.input-wrap {
-		position: relative;
-		display: flex;
-		align-items: center;
-		background: #f6f7f9;
-		border: 2rpx solid rgba(0, 0, 0, 0.06);
-		border-radius: 14rpx;
-		padding: 0 14rpx;
-	}
-
-	.field-error .input-wrap {
-		border-color: rgba(255, 77, 79, 0.55);
-		background: rgba(255, 77, 79, 0.06);
-	}
-
-	.input {
-		flex: 1;
-		height: 84rpx;
-		font-size: 28rpx;
-		color: #111;
-		padding: 0 6rpx;
-	}
-
-	.suffix {
-		height: 84rpx;
-		padding: 0 10rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.suffix-text {
-		font-size: 24rpx;
-		color: rgba(0, 0, 0, 0.55);
-	}
-
-	.support {
-		margin-top: 10rpx;
-		font-size: 22rpx;
-		color: rgba(0, 0, 0, 0.52);
-	}
-
-	.error {
-		color: #ff4d4f;
-	}
-
-	.center {
-		text-align: center;
-		width: 100%;
-		display: block;
-	}
-
-	.row {
-		margin: 8rpx 0 18rpx;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.remember {
-		display: flex;
-		align-items: center;
-	}
-
-	.remember-text {
-		margin-left: 8rpx;
-		font-size: 24rpx;
-		color: rgba(0, 0, 0, 0.6);
-	}
-
-	.link {
-		font-size: 24rpx;
-		color: #ff4d4f;
-	}
-
-	.primary {
-		width: 100%;
-		height: 92rpx;
-		border-radius: 18rpx;
-		background: linear-gradient(135deg, #ff4d4f 0%, #ff7a45 100%);
-		color: #fff;
-		font-size: 30rpx;
-		font-weight: 600;
-		box-shadow: 0 16rpx 32rpx rgba(255, 77, 79, 0.24);
-	}
-
-	.primary:disabled {
-		background: #d9d9d9;
-		box-shadow: none;
-	}
-
-	.divider {
-		margin-top: 22rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 14rpx;
-	}
-
-	.divider-line {
-		flex: 1;
-		height: 1rpx;
-		background: rgba(0, 0, 0, 0.08);
-	}
-
-	.divider-text {
-		font-size: 22rpx;
-		color: rgba(0, 0, 0, 0.45);
-	}
-
-	.social-row {
-		margin-top: 18rpx;
-		display: flex;
-		justify-content: space-between;
-		gap: 16rpx;
-	}
-
-	.social {
-		flex: 1;
-		height: 76rpx;
-		border-radius: 14rpx;
-		background: #ffffff;
-		border: 1rpx solid rgba(0, 0, 0, 0.08);
-		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.04);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.social-label {
-		font-size: 24rpx;
-		color: rgba(0, 0, 0, 0.7);
-	}
-
-	.footer {
-		margin-top: 22rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.footer-text {
-		font-size: 24rpx;
-		color: rgba(0, 0, 0, 0.55);
-	}
-
-	.footer-link {
-		margin-left: 8rpx;
-		font-size: 24rpx;
-		color: #ff4d4f;
-		font-weight: 600;
-	}
-
-	.trust {
-		padding: 18rpx 24rpx 36rpx;
-	}
-
-	.trust-text {
-		font-size: 22rpx;
-		color: rgba(0, 0, 0, 0.4);
-		text-align: center;
-	}
-</style>
\ No newline at end of file
+/* ===== 自适应：断点全部用 px（避免 rpx 在宽屏放大） ===== */
+@media screen and (max-width: 1024px){
+  .header{ padding: 24px 20px; }
+  .logo{ width: 240px; height: 68px; }
+  .card{ width: 92vw; padding: 28px; gap: 22px; }
+  .right-inner{ width: 360px; }
+}
+@media screen and (max-width: 768px){
+  .card{ flex-direction: column; min-height: auto; }
+  .left{ display: none; }
+  .divider{ display: none; }
+  .right-inner{ width: 100%; margin-left: 0; }
+  .actions{ flex-wrap: wrap; }
+}
+@media screen and (max-width: 520px){
+  .sep{ display: none; }
+}
+</style>
diff --git a/pages/user/register.uvue b/pages/user/register.uvue
index f7296fce..1f78e4d4 100644
--- a/pages/user/register.uvue
+++ b/pages/user/register.uvue
@@ -1,506 +1,558 @@
 <template>
-	<view class="page">
-		<scroll-view class="scroll" scroll-y="true" show-scrollbar="false">
-			<view class="top-actions">
-				<button class="lang-btn" @click="toggleLanguage">
-					{{ currentLocale === 'zh-CN' ? 'EN' : '中' }}
-				</button>
-			</view>
+	<view class="register-wrapper">
+		<!-- Header Logo -->
+		<view class="header">
+			<image :src="logoUrl" mode="aspectFit" class="logo" />
+		</view>
 
-			<view class="hero">
-				<view class="brand-row">
-					<view class="brand-mark"></view>
-					<view class="brand-text">
-						<text class="brand-name">Mall</text>
-						<text class="brand-slogan">注册后默认成为消费者账号</text>
+		<!-- 注册表单区域 -->
+		<view class="register-box">
+			<view class="title">注册账号</view>
+
+			<!-- 注册表单 -->
+			<view class="form-content">
+				<!-- 手机号 -->
+				<view class="input-group">
+					<view class="input-wrapper">
+						<image src="/static/user/phone_1.png" class="input-icon" />
+						<input 
+							type="text" 
+							placeholder="输入手机号码" 
+							:value="phone" 
+							@input="(e: any) => phone = e.detail.value"
+							maxlength="11"
+							class="input-field"
+						/>
 					</view>
 				</view>
-				<view class="title-block">
-					<text class="page-title">{{ $t('user.register.title') }}</text>
-					<text class="page-subtitle">{{ $t('user.register.subtitle') }}</text>
+
+				<!-- 验证码 -->
+				<view class="input-group">
+					<view class="input-wrapper">
+						<image src="/static/user/code_2.png" class="input-icon" />
+						<input 
+							type="text" 
+							placeholder="填写验证码" 
+							:value="captcha" 
+							@input="(e: any) => captcha = e.detail.value"
+							maxlength="6"
+							class="input-field code-input"
+						/>
+						<button 
+							class="code-btn" 
+							:disabled="codeDisabled" 
+							:class="{ 'disabled': codeDisabled }"
+							@click="getCode"
+						>
+							{{ codeText }}
+						</button>
+					</view>
+				</view>
+
+				<!-- 密码 -->
+				<view class="input-group">
+					<view class="input-wrapper">
+						<image src="/static/user/code_1.png" class="input-icon" />
+						<input 
+							type="password" 
+							placeholder="填写密码" 
+							:value="password" 
+							@input="(e: any) => password = e.detail.value"
+							class="input-field"
+						/>
+					</view>
+				</view>
+
+				<!-- 确认密码 -->
+				<view class="input-group">
+					<view class="input-wrapper">
+						<image src="/static/user/code_1.png" class="input-icon" />
+						<input 
+							type="password" 
+							placeholder="确认密码" 
+							:value="confirmPassword" 
+							@input="(e: any) => confirmPassword = e.detail.value"
+							class="input-field"
+						/>
+					</view>
 				</view>
 			</view>
 
-			<view class="card">
-				<form @submit="onSubmit">
-					<view class="field" :class="{ 'field-error': emailError }">
-						<text class="label">{{ $t('user.register.email') }}</text>
-						<view class="input-wrap">
-							<input class="input" name="email" type="text" v-model="email" :placeholder="$t('user.register.email_placeholder')" @blur="validateEmail" />
-						</view>
-						<text v-if="emailError" class="support error">{{ emailError }}</text>
-					</view>
-
-					<view class="field" :class="{ 'field-error': passwordError }">
-						<text class="label">{{ $t('user.register.password') }}</text>
-						<view class="input-wrap">
-							<input class="input" name="password" :type="showPassword ? 'text' : 'password'" v-model="password" :placeholder="$t('user.register.password_placeholder')" @blur="validatePassword" />
-							<view class="suffix" @click="togglePasswordVisibility">
-								<text class="suffix-text">{{ showPassword ? '隐藏' : '显示' }}</text>
-							</view>
-						</view>
-						<text v-if="passwordError" class="support error">{{ passwordError }}</text>
-					</view>
-
-					<view class="field" :class="{ 'field-error': confirmPasswordError }">
-						<text class="label">{{ $t('user.register.confirm_password') }}</text>
-						<view class="input-wrap">
-							<input class="input" name="confirmPassword" :type="showConfirmPassword ? 'text' : 'password'" v-model="confirmPassword" :placeholder="$t('user.register.confirm_password_placeholder')" @blur="validateConfirmPassword" />
-							<view class="suffix" @click="toggleConfirmPasswordVisibility">
-								<text class="suffix-text">{{ showConfirmPassword ? '隐藏' : '显示' }}</text>
-							</view>
-						</view>
-						<text v-if="confirmPasswordError" class="support error">{{ confirmPasswordError }}</text>
-					</view>
-
-					<view class="field" :class="{ 'field-error': usernameError }">
-						<text class="label">{{ $t('user.register.username') }}</text>
-						<view class="input-wrap">
-							<input class="input" name="username" type="text" v-model="username" :placeholder="$t('user.register.username_placeholder')" @blur="validateUsername" />
-						</view>
-						<text v-if="usernameError" class="support error">{{ usernameError }}</text>
-					</view>
-
-					<view class="terms" :class="{ 'field-error': termsError }">
-						<view class="terms-row" @click="agreeTerms = !agreeTerms">
-							<checkbox :checked="agreeTerms" color="#FF4D4F" />
-							<view class="terms-text">
-								<text>{{ $t('user.register.agree_terms_part1') }} </text>
-								<text class="terms-link" @click="showTerms">{{ $t('user.register.terms_link') }}</text>
-								<text>{{ $t('user.register.agree_terms_part2') }}</text>
-							</view>
-						</view>
-						<text v-if="termsError" class="support error">{{ termsError }}</text>
-					</view>
-
-					<button form-type="submit" class="primary" :disabled="isLoading" :loading="isLoading">
-						{{ $t('user.register.button') }}
-					</button>
-
-					<text v-if="generalError" class="support error center">{{ generalError }}</text>
-				</form>
-
-				<view class="footer">
-					<text class="footer-text">{{ $t('user.register.already_account') }}</text>
-					<text class="footer-link" @click="navigateToLogin">{{ $t('user.register.login') }}</text>
-				</view>
+			<!-- 注册按钮 -->
+			<view class="register-btn" @click="handleRegister" :class="{ 'disabled': isLoading }">
+				注册
 			</view>
 
-			<view class="trust">
-				<text class="trust-text">注册即代表你同意用户协议与隐私政策</text>
+			<!-- 已有账号 -->
+			<view class="tips">
+				<text class="tips-text">已有账号？</text>
+				<text class="tips-link" @click="navigateToLogin">立即登录</text>
 			</view>
-		</scroll-view>
+
+			<!-- 协议勾选 -->
+			<view class="protocol">
+				<checkbox-group @change="handleProtocolChange">
+					<checkbox 
+						:checked="protocol" 
+						:class="{ 'trembling': inAnimation }"
+						@animationend="inAnimation = false"
+					/>
+					<text class="protocol-text">
+						已阅读并同意
+						<text class="main-color" @click="navigateToTerms(3)">《用户协议》</text>
+						与
+						<text class="main-color" @click="navigateToTerms(4)">《隐私协议》</text>
+					</text>
+				</checkbox-group>
+			</view>
+		</view>
+
+		<!-- 底部版权信息 -->
+		<view class="footer">
+			<text class="footer-text">Copyright ©2024 Mall. All Rights Reserved</text>
+		</view>
 	</view>
 </template>
 
-<script lang="uts">
-import type { AkReqOptions, AkReqResponse, AkReqError } from '@/uni_modules/ak-req/index.uts';
-import supa from '@/components/supadb/aksupainstance.uts';
-import { switchLocale, getCurrentLocale } from '@/utils/utils.uts';
+<script setup lang="uts">
+	import { ref, onMounted } from 'vue'
+	import supa from '@/components/supadb/aksupainstance.uts'
 
-export default {
-  data() {
-    return {
-      email: "",
-      password: "",
-      confirmPassword: "",
-      username: "",
-      emailError: "",
-      passwordError: "",
-      confirmPasswordError: "",
-      usernameError: "",
-      termsError: "",
-      generalError: "",
-      isLoading: false,
-      showPassword: false,
-      showConfirmPassword: false,
-      agreeTerms: false,
-      currentLocale: getCurrentLocale()
-    };
-  },
-  methods: {
-    toggleLanguage() {
-      const newLocale = this.currentLocale === 'zh-CN' ? 'en-US' : 'zh-CN';
-      switchLocale(newLocale);
-      this.currentLocale = newLocale;
-      
-      uni.showToast({
-        title: this.$t('user.register.language_switched'),
-        icon: 'success'
-      });
-    },
-    onSubmit(e: UniFormSubmitEvent) {
-      this.handleRegister();
-    },
-    togglePasswordVisibility() {
-      this.showPassword = !this.showPassword;
-    },
-    toggleConfirmPasswordVisibility() {
-      this.showConfirmPassword = !this.showConfirmPassword;    },
-    validateEmail() {
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      if (this.email.trim() === "") {
-        this.emailError = this.$t('user.register.email_required');
-        return false;
-      } else if (!emailRegex.test(this.email)) {
-        this.emailError = this.$t('user.register.email_invalid');
-        return false;
-      } else {
-        this.emailError = '';
-        return true;
-      }
-    },
-    validatePassword() {
-      if (this.password.trim() === "") {
-        this.passwordError = this.$t('user.register.password_required');
-        return false;
-      } else if (this.password.length < 6) {
-        this.passwordError = this.$t('user.register.password_too_short');
-        return false;
-      } else {
-        this.passwordError = '';
-        this.validateConfirmPassword(); // Re-validate confirm password when password changes
-        return true;
-      }
-    },
-    validateConfirmPassword() {
-      if (this.confirmPassword.trim() === "") {
-        this.confirmPasswordError = this.$t('user.register.confirm_password_required');
-        return false;
-      } else if (this.confirmPassword !== this.password) {
-        this.confirmPasswordError = this.$t('user.register.passwords_not_match');
-        return false;
-      } else {
-        this.confirmPasswordError = '';
-        return true;
-      }
-    },
-    validateUsername() {
-      if (this.username.trim() !== "" && this.username.length < 3) {
-        this.usernameError = this.$t('user.register.username_too_short');
-        return false;
-      } else {
-        this.usernameError = '';
-        return true;
-      }
-    },
-    validateTerms() {
-      if (!this.agreeTerms) {
-        this.termsError = this.$t('user.register.terms_required');
-        return false;
-      } else {
-        this.termsError = '';
-        return true;
-      }
-    },
-    validateForm() {
-      const emailValid = this.validateEmail();
-      const passwordValid = this.validatePassword();
-      const confirmPasswordValid = this.validateConfirmPassword();
-      const usernameValid = this.validateUsername();
-      const termsValid = this.validateTerms();
-      
-      return emailValid && passwordValid && confirmPasswordValid && usernameValid && termsValid;    },
-    randomPasswordHash(password: String): String {
-        const salt = Math.random().toString(36).substring(2, 10);
-        const base = password + salt + Date.now();
-        return btoa(base);
-        },
-    async handleRegister() {
-      this.generalError = '';
-      if (!this.validateForm()) {
-        return;
-      }
-      
-      this.isLoading = true;
-      try {
-        console.log('register: attempting to create account for', this.email);
-        
-        // Call signup method from supa
-        const result = await supa.signUp(
-        this.email, this.password
-        );
-        
-        if (result!=null && result.user!=null) {
-          // Show success message
-          uni.showToast({
-            title: this.$t('user.register.success'),
-            icon: 'success'
-          });
-          const user=result.get("user") as UTSJSONObject;
-		  const auth_id =user.get("id")
-          // Create user profile in ak_users table
-          const userData = {
-            auth_id: auth_id,
-			// auth_id:1,
-            email: this.email,
-            username: this.username ?? this.email.split('@')[0],
-            password_hash: this.randomPasswordHash(this.password)
-            // preferred_language: this.$locale
-          } as UTSJSONObject;
-          
-          try {
-            await supa.insert('ak_users', userData );
-          } catch (profileErr) {
-            console.error('Failed to create user profile:', profileErr);
-            // Continue anyway, as auth account was created
-          }
-          
-          // Redirect to login page after registration
-          setTimeout(() => {
-            uni.redirectTo({
-              url: '/pages/user/login'
-            });
-          }, 1500);
-        } else {
-          throw new Error(this.$t('user.register.failed'));
-        }
-      } catch (err) {
-        const errObj = err as UniError; // or UtsError
-        if (typeof errObj.message === 'string') {
-          this.generalError = errObj.message;
-        } else {
-          this.generalError = this.$t('user.register.unknown_error');
-        }
-      }
-      this.isLoading = false;
-    },
-    navigateToLogin() {
-      uni.navigateTo({
-        url: '/pages/user/login'
-      });
-    },
-    showTerms() {
-      uni.navigateTo({
-        url: '/pages/user/terms'
-      });
-    }
-  }
-}
+	// 响应式数据
+	const phone = ref<string>('')
+	const captcha = ref<string>('')
+	const password = ref<string>('')
+	const confirmPassword = ref<string>('')
+	const protocol = ref<boolean>(false)
+	const inAnimation = ref<boolean>(false)
+	const isLoading = ref<boolean>(false)
+	const logoUrl = ref<string>('/static/logo.png')
+	
+	// 验证码相关
+	const codeDisabled = ref<boolean>(false)
+	const codeText = ref<string>('获取验证码')
+	const codeCountdown = ref<number>(0)
+	let codeTimer: number | null = null
+
+	// 处理协议勾选变化
+	const handleProtocolChange = (e: any) => {
+		protocol.value = !protocol.value
+	}
+
+	// 验证手机号
+	const validatePhone = (): boolean => {
+		if (phone.value.trim() === '') {
+			uni.showToast({
+				title: '请填写手机号码',
+				icon: 'none'
+			})
+			return false
+		}
+		if (!/^1[3-9]\d{9}$/.test(phone.value)) {
+			uni.showToast({
+				title: '请输入正确的手机号码',
+				icon: 'none'
+			})
+			return false
+		}
+		return true
+	}
+
+	// 验证验证码
+	const validateCaptcha = (): boolean => {
+		if (captcha.value.trim() === '') {
+			uni.showToast({
+				title: '请填写验证码',
+				icon: 'none'
+			})
+			return false
+		}
+		if (!/^\d{6}$/.test(captcha.value)) {
+			uni.showToast({
+				title: '请输入正确的验证码',
+				icon: 'none'
+			})
+			return false
+		}
+		return true
+	}
+
+	// 验证密码
+	const validatePassword = (): boolean => {
+		if (password.value.trim() === '') {
+			uni.showToast({
+				title: '请填写密码',
+				icon: 'none'
+			})
+			return false
+		}
+		if (password.value.length < 6) {
+			uni.showToast({
+				title: '密码长度不能少于6位',
+				icon: 'none'
+			})
+			return false
+		}
+		// 密码不能过于简单
+		if (/^([0-9]|[a-z]|[A-Z]){0,6}$/i.test(password.value)) {
+			uni.showToast({
+				title: '您输入的密码过于简单',
+				icon: 'none'
+			})
+			return false
+		}
+		return true
+	}
+
+	// 验证确认密码
+	const validateConfirmPassword = (): boolean => {
+		if (confirmPassword.value.trim() === '') {
+			uni.showToast({
+				title: '请确认密码',
+				icon: 'none'
+			})
+			return false
+		}
+		if (confirmPassword.value !== password.value) {
+			uni.showToast({
+				title: '两次输入的密码不一致',
+				icon: 'none'
+			})
+			return false
+		}
+		return true
+	}
+
+	// 获取验证码
+	const getCode = async () => {
+		if (!protocol.value) {
+			inAnimation.value = true
+			uni.showToast({
+				title: '请先阅读并同意协议',
+				icon: 'none'
+			})
+			return
+		}
+		
+		if (!validatePhone()) {
+			return
+		}
+
+		// TODO: 调用获取验证码接口
+		uni.showToast({
+			title: '验证码已发送',
+			icon: 'success'
+		})
+
+		// 开始倒计时
+		codeDisabled.value = true
+		codeCountdown.value = 60
+		codeText.value = `${codeCountdown.value}秒后重试`
+		
+		codeTimer = setInterval(() => {
+			codeCountdown.value--
+			if (codeCountdown.value > 0) {
+				codeText.value = `${codeCountdown.value}秒后重试`
+			} else {
+				codeDisabled.value = false
+				codeText.value = '获取验证码'
+				if (codeTimer != null) {
+					clearInterval(codeTimer)
+					codeTimer = null
+				}
+			}
+		}, 1000) as unknown as number
+	}
+
+	// 处理注册
+	const handleRegister = async () => {
+		// 检查协议
+		if (!protocol.value) {
+			inAnimation.value = true
+			uni.showToast({
+				title: '请先阅读并同意协议',
+				icon: 'none'
+			})
+			return
+		}
+
+		// 表单验证
+		if (!validatePhone()) {
+			return
+		}
+		if (!validateCaptcha()) {
+			return
+		}
+		if (!validatePassword()) {
+			return
+		}
+		if (!validateConfirmPassword()) {
+			return
+		}
+
+		isLoading.value = true
+
+		try {
+			// TODO: 调用注册接口（手机号+验证码+密码）
+			// 目前先使用邮箱注册作为临时方案
+			// 注意：CRMEB 使用手机号注册，但 Supabase Auth 默认支持邮箱注册
+			// 需要根据实际后端 API 调整
+			
+			// 临时方案：使用手机号作为邮箱格式注册
+			const email = `${phone.value}@phone.mall`
+			
+			const result = await supa.signUp(email, password.value)
+			
+			if (result != null && result.user != null) {
+				// 创建用户资料
+				const user = result.user as UTSJSONObject
+				const authId = user.getString('id')
+				
+				if (authId != null) {
+					const userData = {
+						auth_id: authId,
+						phone: phone.value,
+						email: email,
+						username: phone.value,
+						user_type: 1, // 默认消费者
+						status: 1
+					} as UTSJSONObject
+					
+					try {
+						await supa.from('ak_users').insert(userData).execute()
+					} catch (profileErr) {
+						console.error('创建用户资料失败:', profileErr)
+					}
+				}
+
+				uni.showToast({
+					title: '注册成功',
+					icon: 'success'
+				})
+
+				// 跳转到登录页
+				setTimeout(() => {
+					uni.redirectTo({
+						url: '/pages/user/login'
+					})
+				}, 1500)
+			} else {
+				throw new Error('注册失败')
+			}
+		} catch (err) {
+			console.error('注册错误:', err)
+			
+			let errorMessage = '注册失败，请重试'
+			if (err != null && typeof err === 'object') {
+				const error = err as Error
+				if (error.message != null && error.message.trim() !== '') {
+					errorMessage = error.message
+				}
+			}
+			
+			uni.showToast({
+				title: errorMessage,
+				icon: 'none'
+			})
+		} finally {
+			isLoading.value = false
+		}
+	}
+
+	// 跳转到登录页
+	const navigateToLogin = () => {
+		uni.navigateTo({
+			url: '/pages/user/login'
+		})
+	}
+
+	// 跳转到协议页面
+	const navigateToTerms = (type: number) => {
+		uni.navigateTo({
+			url: `/pages/user/terms?type=${type}`
+		})
+	}
 </script>
 
 <style>
-	.page {
-		min-height: 100vh;
-		background: #f7f8fa;
-	}
+page {
+	background: #F5F5F5;
+}
 
-	.scroll {
-		min-height: 100vh;
-		background: radial-gradient(900rpx 700rpx at 20% 10%, rgba(255, 77, 79, 0.16), rgba(255, 77, 79, 0) 60%),
-			linear-gradient(180deg, #ffffff 0%, #f7f8fa 45%, #f7f8fa 100%);
-	}
+.register-wrapper {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	background: #F5F5F5;
+}
 
-	.top-actions {
-		position: relative;
-		padding: 24rpx 24rpx 0;
-		display: flex;
-		justify-content: flex-end;
-	}
+/* Header Logo */
+.header {
+	padding: 40rpx 0 0 60rpx;
+	background: #F5F5F5;
+}
 
-	.lang-btn {
-		width: 76rpx;
-		height: 76rpx;
-		border-radius: 38rpx;
-		background: rgba(255, 255, 255, 0.9);
-		border: 1rpx solid rgba(0, 0, 0, 0.06);
-		color: #111;
-		font-size: 26rpx;
-		line-height: 76rpx;
-		text-align: center;
-		box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.06);
-	}
+.logo {
+	width: 200rpx;
+	height: 80rpx;
+}
 
-	.hero {
-		padding: 26rpx 24rpx 14rpx;
-	}
+/* 注册表单区域 */
+.register-box {
+	flex: 1;
+	background: #FFFFFF;
+	margin: 60rpx 40rpx 0;
+	border-radius: 8rpx;
+	padding: 60rpx 50rpx 40rpx;
+	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+}
 
-	.brand-row {
-		display: flex;
-		align-items: center;
-	}
+.title {
+	font-size: 40rpx;
+	font-weight: 600;
+	color: #333333;
+	text-align: center;
+	margin-bottom: 50rpx;
+}
 
-	.brand-mark {
-		width: 72rpx;
-		height: 72rpx;
-		border-radius: 20rpx;
-		background: linear-gradient(135deg, #ff4d4f 0%, #ff8a65 100%);
-		box-shadow: 0 12rpx 26rpx rgba(255, 77, 79, 0.28);
-	}
+/* 表单内容 */
+.form-content {
+	margin-bottom: 40rpx;
+}
 
-	.brand-text {
-		margin-left: 18rpx;
-		display: flex;
-		flex-direction: column;
-	}
+.input-group {
+	margin-bottom: 30rpx;
+}
 
-	.brand-name {
-		font-size: 40rpx;
-		font-weight: 700;
-		color: #111;
-		letter-spacing: 1rpx;
-	}
+.input-wrapper {
+	position: relative;
+	display: flex;
+	align-items: center;
+	padding: 0 20rpx;
+	height: 88rpx;
+	border: 1rpx solid #E0E0E0;
+	border-radius: 4rpx;
+	background: #FFFFFF;
+}
 
-	.brand-slogan {
-		margin-top: 6rpx;
-		font-size: 24rpx;
-		color: rgba(0, 0, 0, 0.55);
-	}
+.input-wrapper:focus-within {
+	border-color: var(--view-theme, #FF4D4F);
+}
 
-	.title-block {
-		margin-top: 26rpx;
-	}
+.input-icon {
+	width: 32rpx;
+	height: 32rpx;
+	flex-shrink: 0;
+	margin-right: 20rpx;
+}
 
-	.page-title {
-		font-size: 46rpx;
-		font-weight: 700;
-		color: #111;
-	}
+.input-field {
+	flex: 1;
+	font-size: 28rpx;
+	height: 100%;
+	color: #333333;
+}
 
-	.page-subtitle {
-		margin-top: 10rpx;
-		font-size: 26rpx;
-		color: rgba(0, 0, 0, 0.55);
-	}
+.code-input {
+	flex: 1;
+}
 
-	.card {
-		margin: 18rpx 24rpx 0;
-		padding: 26rpx 22rpx;
-		background: rgba(255, 255, 255, 0.96);
-		border-radius: 20rpx;
-		border: 1rpx solid rgba(0, 0, 0, 0.06);
-		box-shadow: 0 16rpx 36rpx rgba(0, 0, 0, 0.06);
-	}
+.code-btn {
+	position: absolute;
+	right: 20rpx;
+	top: 50%;
+	transform: translateY(-50%);
+	color: var(--view-theme, #FF4D4F);
+	font-size: 26rpx;
+	background: transparent;
+	border: none;
+	padding: 0;
+	line-height: 1;
+}
 
-	.field {
-		margin-bottom: 18rpx;
-	}
+.code-btn.disabled {
+	color: #999999;
+}
 
-	.label {
-		font-size: 24rpx;
-		color: rgba(0, 0, 0, 0.78);
-		margin-bottom: 10rpx;
-		display: block;
-	}
+/* 注册按钮 */
+.register-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 88rpx;
+	margin-top: 50rpx;
+	background: linear-gradient(135deg, #FF4D4F 0%, #FF7A45 100%);
+	border-radius: 4rpx;
+	color: #FFFFFF;
+	font-size: 32rpx;
+	font-weight: 500;
+	box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3);
+}
 
-	.input-wrap {
-		position: relative;
-		display: flex;
-		align-items: center;
-		background: #f6f7f9;
-		border: 2rpx solid rgba(0, 0, 0, 0.06);
-		border-radius: 14rpx;
-		padding: 0 14rpx;
-	}
+.register-btn.disabled {
+	background: #D9D9D9;
+	box-shadow: none;
+	opacity: 0.6;
+}
 
-	.field-error .input-wrap {
-		border-color: rgba(255, 77, 79, 0.55);
-		background: rgba(255, 77, 79, 0.06);
-	}
+/* 已有账号提示 */
+.tips {
+	margin-top: 30rpx;
+	text-align: center;
+}
 
-	.input {
-		flex: 1;
-		height: 84rpx;
-		font-size: 28rpx;
-		color: #111;
-		padding: 0 6rpx;
-	}
+.tips-text {
+	font-size: 28rpx;
+	color: #666666;
+}
 
-	.suffix {
-		height: 84rpx;
-		padding: 0 10rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
+.tips-link {
+	font-size: 28rpx;
+	color: var(--view-theme, #FF4D4F);
+	margin-left: 8rpx;
+}
 
-	.suffix-text {
-		font-size: 24rpx;
-		color: rgba(0, 0, 0, 0.55);
-	}
+/* 协议区域 */
+.protocol {
+	margin-top: 40rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
 
-	.support {
-		margin-top: 10rpx;
-		font-size: 22rpx;
-		color: rgba(0, 0, 0, 0.52);
-	}
+.protocol checkbox {
+	margin-right: 10rpx;
+}
 
-	.error {
-		color: #ff4d4f;
-	}
+.protocol-text {
+	font-size: 24rpx;
+	color: #999999;
+}
 
-	.center {
-		text-align: center;
-		width: 100%;
-		display: block;
-	}
+.main-color {
+	color: var(--view-theme, #FF4D4F);
+}
 
-	.terms {
-		margin: 12rpx 0 18rpx;
-	}
+.trembling {
+	animation: shake 0.6s;
+}
 
-	.terms-row {
-		display: flex;
-		align-items: flex-start;
-	}
+@keyframes shake {
+	0%, 100% { transform: translateX(0); }
+	10%, 30%, 50%, 70%, 90% { transform: translateX(-10rpx); }
+	20%, 40%, 60%, 80% { transform: translateX(10rpx); }
+}
 
-	.terms-text {
-		margin-left: 10rpx;
-		font-size: 24rpx;
-		color: rgba(0, 0, 0, 0.55);
-		flex: 1;
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-	}
+/* 底部版权 */
+.footer {
+	padding: 40rpx 0;
+	text-align: center;
+	background: #F5F5F5;
+}
 
-	.terms-link {
-		color: #ff4d4f;
-		font-weight: 600;
-	}
-
-	.primary {
-		width: 100%;
-		height: 92rpx;
-		border-radius: 18rpx;
-		background: linear-gradient(135deg, #ff4d4f 0%, #ff7a45 100%);
-		color: #fff;
-		font-size: 30rpx;
-		font-weight: 600;
-		box-shadow: 0 16rpx 32rpx rgba(255, 77, 79, 0.24);
-	}
-
-	.primary:disabled {
-		background: #d9d9d9;
-		box-shadow: none;
-	}
-
-	.footer {
-		margin-top: 22rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.footer-text {
-		font-size: 24rpx;
-		color: rgba(0, 0, 0, 0.55);
-	}
-
-	.footer-link {
-		margin-left: 8rpx;
-		font-size: 24rpx;
-		color: #ff4d4f;
-		font-weight: 600;
-	}
-
-	.trust {
-		padding: 18rpx 24rpx 36rpx;
-	}
-
-	.trust-text {
-		font-size: 22rpx;
-		color: rgba(0, 0, 0, 0.4);
-		text-align: center;
-	}
-</style>
\ No newline at end of file
+.footer-text {
+	font-size: 22rpx;
+	color: #999999;
+}
+</style>
diff --git a/platformConfig.json b/platformConfig.json
index 896f669a..482d68a5 100644
--- a/platformConfig.json
+++ b/platformConfig.json
@@ -1,5 +1,3 @@
-
-// 参考链接 https://doc.dcloud.net.cn/uni-app-x/tutorial/ls-plugin.html#setting
 {
     "targets": [
         "APP-ANDROID"
diff --git a/static/user/COPY_IMAGES.md b/static/user/COPY_IMAGES.md
new file mode 100644
index 00000000..f51d5d49
--- /dev/null
+++ b/static/user/COPY_IMAGES.md
@@ -0,0 +1,60 @@
+# 图片资源复制说明
+
+## 需要复制的图片文件
+
+请从 `CRMEB/template/uni-app/pages/users/static/` 目录复制以下文件到 `static/user/` 目录：
+
+### 必需文件
+
+1. **phone_1.png** - 手机号输入框图标
+   - 尺寸：24rpx × 34rpx
+   - 用途：手机号输入框左侧图标
+
+2. **code_1.png** - 密码输入框图标
+   - 尺寸：28rpx × 32rpx
+   - 用途：密码输入框左侧图标
+
+3. **code_2.png** - 验证码输入框图标
+   - 尺寸：28rpx × 32rpx
+   - 用途：验证码输入框左侧图标
+
+### 可选文件
+
+4. **logo2.png** - Logo 图片（可选）
+   - 用途：注册/找回密码页面 Logo
+   - 如果不存在，将使用 `/static/logo.png`
+
+## 复制方法
+
+### Windows PowerShell
+```powershell
+# 在项目根目录执行
+Copy-Item "CRMEB\template\uni-app\pages\users\static\phone_1.png" -Destination "static\user\"
+Copy-Item "CRMEB\template\uni-app\pages\users\static\code_1.png" -Destination "static\user\"
+Copy-Item "CRMEB\template\uni-app\pages\users\static\code_2.png" -Destination "static\user\"
+Copy-Item "CRMEB\template\uni-app\pages\users\static\logo2.png" -Destination "static\user\" -ErrorAction SilentlyContinue
+```
+
+### 手动复制
+1. 打开 `CRMEB/template/uni-app/pages/users/static/` 目录
+2. 复制上述文件到 `static/user/` 目录
+3. 确保文件路径正确
+
+## 文件结构
+
+复制后的目录结构应该是：
+```
+static/
+└── user/
+    ├── phone_1.png
+    ├── code_1.png
+    ├── code_2.png
+    ├── logo2.png (可选)
+    └── README.md
+```
+
+## 注意事项
+
+- 如果图片文件不存在，页面会显示占位符或空白
+- 建议使用原 CRMEB 项目的图片资源以保持设计一致性
+- 图片路径在代码中使用：`/static/user/phone_1.png`
diff --git a/static/user/README.md b/static/user/README.md
new file mode 100644
index 00000000..f1a6541c
--- /dev/null
+++ b/static/user/README.md
@@ -0,0 +1,20 @@
+# 用户相关图片资源
+
+## 说明
+这些图片资源来自 CRMEB 项目，用于登录注册页面。
+
+## 需要复制的图片文件
+
+请从 `CRMEB/template/uni-app/pages/users/static/` 目录复制以下文件到此目录：
+
+1. `phone_1.png` - 手机号输入框图标（24rpx × 34rpx）
+2. `code_1.png` - 密码输入框图标（28rpx × 32rpx）
+3. `code_2.png` - 验证码输入框图标（28rpx × 32rpx）
+4. `logo2.png` - Logo 图片（可选，用于注册/找回密码页面）
+
+## 使用方式
+
+在页面中使用：
+```vue
+<image src="/static/user/phone_1.png" />
+```
diff --git a/uni_modules/charts/EChartsView.vue b/uni_modules/charts/EChartsView.vue
new file mode 100644
index 00000000..04ad80bc
--- /dev/null
+++ b/uni_modules/charts/EChartsView.vue
@@ -0,0 +1,72 @@
+<template>
+  <view class="ec-wrap">
+    <!-- 通过 props 把 option 喂给 renderjs -->
+    <view
+      class="ec-canvas"
+      :prop="option"
+      :change:prop="ec.setOption"
+      :data-theme="theme"
+    />
+  </view>
+</template>
+
+<script>
+export default {
+  name: "EChartsView",
+  props: {
+    option: { type: Object, default: () => ({}) },
+    theme: { type: String, default: "light" },
+  },
+};
+</script>
+
+<script module="ec" lang="renderjs">
+import * as echarts from "echarts";
+
+let chart = null;
+
+function ensureChart(el) {
+  if (chart) return chart;
+  chart = echarts.init(el, null, { renderer: "canvas" });
+
+  // 自适应：监听容器尺寸变化
+  if (typeof ResizeObserver !== "undefined") {
+    const ro = new ResizeObserver(() => {
+      chart && chart.resize();
+    });
+    ro.observe(el);
+  } else {
+    // 兜底
+    window.addEventListener("resize", () => chart && chart.resize());
+  }
+  return chart;
+}
+
+export default {
+  mounted() {
+    const el = this.$el.querySelector(".ec-canvas") || this.$el;
+    ensureChart(el);
+  },
+  methods: {
+    setOption(option) {
+      const el = this.$el.querySelector(".ec-canvas") || this.$el;
+      const c = ensureChart(el);
+      if (!option) return;
+      c.setOption(option, true);
+      // 首次渲染后再 resize 一次，避免 H5 初始宽高为 0
+      setTimeout(() => c.resize(), 16);
+    },
+  },
+};
+</script>
+
+<style>
+.ec-wrap {
+  width: 100%;
+  height: 100%;
+}
+.ec-canvas {
+  width: 100%;
+  height: 100%;
+}
+</style>