数据分析页面骨架

components/analytics/AnalyticsComboChart.uvue

@@ -54,39 +54,87 @@ export default {
       })
 
       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 } },
+        grid: { left: 60, right: 60, top: 70, bottom: 40 },
+        tooltip: { 
+          trigger: 'axis', 
+          axisPointer: { type: 'shadow' },
+          formatter: (params: any) => {
+            let result = params[0].name + '<br/>'
+            for (let i = 0; i < params.length; i++) {
+              const p = params[i]
+              if (p.seriesName === 'GMV') {
+                const val = Number(p.value)
+                const formatted = val >= 10000 ? (val / 10000).toFixed(1) + '万' : val.toFixed(0)
+                result += `${p.marker} ${p.seriesName}: ¥${formatted}<br/>`
+              } else {
+                result += `${p.marker} ${p.seriesName}: ${p.value}<br/>`
+              }
+            }
+            return result
+          }
+        },
+        legend: { 
+          top: 8, 
+          left: 8, 
+          itemWidth: 10, 
+          itemHeight: 10, 
+          textStyle: { fontSize: 12 },
+          data: ['GMV', '订单数'],
+          bottom: 'auto'
+        },
         xAxis: {
           type: 'category',
           data: x,
-          axisTick: { show: false },
+          axisTick: { alignWithLabel: true },
           axisLine: { lineStyle: { color: 'rgba(0,0,0,0.12)' } },
-          axisLabel: { color: 'rgba(0,0,0,0.55)' }
+          axisLabel: { 
+            color: 'rgba(0,0,0,0.55)',
+            rotate: x.length > 12 ? 45 : 0,
+            interval: 0
+          }
         },
         yAxis: [
           {
             type: 'value',
-            name: 'GMV',
+            name: 'GMV（元）',
+            position: 'left',
             axisLine: { show: false },
             splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } },
-            axisLabel: { color: 'rgba(0,0,0,0.55)' }
+            axisLabel: { 
+              color: 'rgba(0,0,0,0.55)',
+              formatter: (value: number) => {
+                if (value >= 10000) {
+                  return (value / 10000).toFixed(1) + '万'
+                }
+                return String(Math.round(value))
+              }
+            }
           },
           {
             type: 'value',
-            name: '订单',
+            name: '订单数',
+            position: 'right',
+            alignTicks: true,
             axisLine: { show: false },
             splitLine: { show: false },
-            axisLabel: { color: 'rgba(0,0,0,0.55)' }
+            axisLabel: { 
+              color: 'rgba(0,0,0,0.55)',
+              formatter: (value: number) => String(Math.round(value))
+            }
           }
         ],
         series: [
           {
             name: 'GMV',
             type: 'bar',
+            yAxisIndex: 0,
             data: bar,
-            barWidth: 14,
-            itemStyle: { borderRadius: [6, 6, 0, 0] }
+            barMaxWidth: 14,
+            barCategoryGap: '35%',
+            itemStyle: { 
+              borderRadius: [6, 6, 0, 0],
+              color: '#3b82f6'
+            }
           },
           {
             name: '订单数',
@@ -96,7 +144,13 @@ export default {
             smooth: true,
             symbol: 'circle',
             symbolSize: 6,
-            lineStyle: { width: 2 }
+            lineStyle: { 
+              width: 2,
+              color: '#10b981'
+            },
+            itemStyle: {
+              color: '#10b981'
+            }
           }
         ]
       }

components/analytics/AnalyticsSidebarMenu.uvue

@@ -0,0 +1,275 @@
+<!-- 数据分析侧边栏菜单组件 -->
+<template>
+  <view>
+    <!-- 侧边栏菜单 -->
+    <view class="sidebar-menu" :class="{ active: showMenu, 'always-visible': isWideScreen }" @click.stop>
+      <view class="sidebar-content">
+        <view 
+          v-for="item in menuItems" 
+          :key="item.path"
+          class="menu-item" 
+          :class="{ active: currentPath === item.path }"
+          @click="navigateToPage(item.path)"
+        >
+          <text class="menu-icon">{{ item.icon }}</text>
+          <text class="menu-text">{{ item.title }}</text>
+        </view>
+      </view>
+    </view>
+    <!-- 遮罩层（仅窄屏时显示） -->
+    <view class="sidebar-overlay" v-if="showMenu && !isWideScreen" @click="closeMenu"></view>
+  </view>
+</template>
+
+<script lang="uts">
+// 菜单项类型
+type MenuItem = {
+  path: string
+  title: string
+  icon: string
+}
+
+// 菜单配置
+const MENU_ITEMS: Array<MenuItem> = [
+  { path: '/pages/mall/analytics/index', title: '数据分析中心', icon: '📊' },
+  { path: '/pages/mall/analytics/profile', title: '个人中心', icon: '👤' },
+  { path: '/pages/mall/analytics/sales-report', title: '销售报表', icon: '💰' },
+  { path: '/pages/mall/analytics/user-analysis', title: '用户分析', icon: '👥' },
+  { path: '/pages/mall/analytics/product-insights', title: '商品洞察', icon: '📦' },
+  { path: '/pages/mall/analytics/delivery-analysis', title: '配送效率分析', icon: '🚚' },
+  { path: '/pages/mall/analytics/coupon-analysis', title: '优惠券效果分析', icon: '🎫' },
+  { path: '/pages/mall/analytics/market-trends', title: '市场趋势', icon: '📈' },
+  { path: '/pages/mall/analytics/custom-report', title: '自定义报表', icon: '📋' },
+  { path: '/pages/mall/analytics/report-detail', title: '报表详情', icon: '📄' },
+  { path: '/pages/mall/analytics/data-detail', title: '数据分析详情', icon: '🔍' },
+  { path: '/pages/mall/analytics/insight-detail', title: '数据洞察详情', icon: '💡' }
+]
+
+export default {
+  props: {
+    // 是否显示菜单
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 当前页面路径
+    currentPath: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['visible-change'],
+  data() {
+    return {
+      showMenu: false,
+      menuItems: MENU_ITEMS,
+      isWideScreen: false,
+      screenWidth: 0
+    }
+  },
+  watch: {
+    visible(newVal: boolean) {
+      // 宽屏时自动显示，窄屏时根据 visible 控制
+      if (this.isWideScreen) {
+        this.showMenu = true
+      } else {
+        this.showMenu = newVal
+      }
+    },
+    showMenu(newVal: boolean) {
+      // 同步到父组件（仅窄屏时）
+      if (!this.isWideScreen) {
+        this.$emit('visible-change', newVal)
+      }
+    }
+  },
+  onLoad() {
+    this.checkScreenSize()
+  },
+  onShow() {
+    // 每次显示时检查屏幕尺寸
+    this.checkScreenSize()
+  },
+  methods: {
+    checkScreenSize() {
+      // 获取屏幕宽度
+      const systemInfo = uni.getSystemInfoSync()
+      this.screenWidth = systemInfo.windowWidth || systemInfo.screenWidth
+      // 宽屏阈值：960px（与页面响应式断点一致）
+      this.isWideScreen = this.screenWidth >= 960
+      
+      // 宽屏时自动显示菜单
+      if (this.isWideScreen) {
+        this.showMenu = true
+      }
+    },
+    
+    closeMenu() {
+      // 宽屏时不允许关闭
+      if (this.isWideScreen) {
+        return
+      }
+      this.showMenu = false
+      this.$emit('visible-change', false)
+    },
+    
+    navigateToPage(path: string) {
+      if (this.currentPath === path) {
+        // 窄屏时关闭菜单
+        if (!this.isWideScreen) {
+          this.closeMenu()
+        }
+        return
+      }
+      uni.navigateTo({
+        url: path,
+        fail: () => {
+          uni.showToast({ title: '页面跳转失败', icon: 'none' })
+        }
+      })
+      // 窄屏时关闭菜单
+      if (!this.isWideScreen) {
+        this.closeMenu()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+/* 侧边栏菜单 */
+.sidebar-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 998;
+  animation: fadeIn 0.3s ease;
+}
+
+.sidebar-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 280px;
+  height: 100vh;
+  background: #fff;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+  z-index: 999;
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 窄屏：抽屉效果 */
+.sidebar-menu.active {
+  transform: translateX(0);
+}
+
+/* 宽屏：固定显示在左侧 */
+.sidebar-menu.always-visible {
+  position: relative;
+  transform: translateX(0);
+  box-shadow: none;
+  border-right: 1px solid rgba(0, 0, 0, 0.06);
+  z-index: 1;
+}
+
+.sidebar-header {
+  display: flex;
+  flex-direction: row !important;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.sidebar-close {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.sidebar-close:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.sidebar-close .icon {
+  font-size: 20px;
+  color: #666;
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.menu-item {
+  display: flex;
+  flex-direction: row !important;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.menu-item:hover {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.menu-item.active {
+  background: rgba(59, 130, 246, 0.1);
+  border-left: 3px solid #3b82f6;
+}
+
+.menu-item.active .menu-text {
+  color: #3b82f6;
+  font-weight: 600;
+}
+
+.menu-icon {
+  font-size: 20px;
+  width: 24px;
+  text-align: center;
+}
+
+.menu-text {
+  font-size: 15px;
+  color: #333;
+  flex: 1;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* 响应式：宽屏时固定显示 */
+@media screen and (min-width: 960px) {
+  .sidebar-menu {
+    position: relative;
+    transform: translateX(0);
+    box-shadow: none;
+    border-right: 1px solid rgba(0, 0, 0, 0.06);
+    z-index: 1;
+  }
+  
+  .sidebar-overlay {
+    display: none;
+  }
+}
+</style>

components/analytics/AnalyticsTopBar.uvue

@@ -0,0 +1,332 @@
+<!-- 数据分析顶部导航栏组件 -->
+<template>
+  <view class="analytics-topbar">
+    <view class="topbar-left">
+      <!-- 仅窄屏且侧边栏未打开时显示菜单按钮 -->
+      <view class="menu-icon" v-if="showMenuIcon" @click="handleMenu">
+        <text class="icon">☰</text>
+      </view>
+      <view class="title-group">
+        <text class="title">{{ title }}</text>
+        <text class="subtitle">最后更新：{{ lastUpdateTime }}</text>
+      </view>
+    </view>
+    <view class="topbar-right">
+      <!-- 宽屏时显示的按钮 -->
+      <view class="icon-btn-icon btn-visible" @click="handleRefresh">
+        <text class="icon">🔄</text>
+      </view>
+      <view class="icon-btn-icon btn-visible" @click="handleSearch">
+        <text class="icon">🔍</text>
+      </view>
+      <view class="icon-btn-icon notification btn-hidden" @click="handleNotification">
+        <text class="icon">🔔</text>
+        <view class="badge"></view>
+      </view>
+      <view class="icon-btn-icon btn-hidden" @click="handleFullscreen">
+        <text class="icon">⛶</text>
+      </view>
+      <view class="icon-btn-icon btn-hidden" @click="handleMobile">
+        <text class="icon">📱</text>
+      </view>
+      <view class="dropdown btn-visible" @click="handleDropdown">
+        <text class="dropdown-text">crmeb demo</text>
+        <text class="dropdown-arrow">▼</text>
+      </view>
+      <view class="icon-btn-icon btn-hidden" @click="handleSettings">
+        <text class="icon">⚙️</text>
+      </view>
+      
+      <!-- 更多按钮（窄屏时显示） -->
+      <view class="more-btn" :class="{ active: showMoreMenu }" @click.stop="toggleMoreMenu">
+        <text class="icon">⋯</text>
+      </view>
+    </view>
+    
+    <!-- 更多菜单下拉 -->
+    <view class="more-menu" v-if="showMoreMenu" @click.stop>
+      <view class="more-menu-item" @click="handleNotification">
+        <text class="icon">🔔</text>
+        <text>通知</text>
+      </view>
+      <view class="more-menu-item" @click="handleFullscreen">
+        <text class="icon">⛶</text>
+        <text>全屏</text>
+      </view>
+      <view class="more-menu-item" @click="handleMobile">
+        <text class="icon">📱</text>
+        <text>移动端</text>
+      </view>
+      <view class="more-menu-item" @click="handleSettings">
+        <text class="icon">⚙️</text>
+        <text>设置</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '数据分析中心'
+    },
+    lastUpdateTime: {
+      type: String,
+      default: ''
+    },
+    // 由页面传入：当前侧边栏是否处于“打开/显示”状态（窄屏下用于隐藏菜单按钮）
+    sidebarVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      showMoreMenu: false,
+      isWideScreen: false
+    }
+  },
+  computed: {
+    showMenuIcon(): boolean {
+      // 宽屏不显示；窄屏仅在侧边栏未打开时显示
+      return !this.isWideScreen && !this.sidebarVisible
+    }
+  },
+  onLoad() {
+    this.checkScreenSize()
+  },
+  onShow() {
+    this.checkScreenSize()
+  },
+  methods: {
+    checkScreenSize() {
+      const systemInfo = uni.getSystemInfoSync()
+      const w = systemInfo.windowWidth || systemInfo.screenWidth
+      // 与侧边栏一致：960px 以上视为宽屏
+      this.isWideScreen = w >= 960
+    },
+    handleMenu() {
+      this.$emit('menu-click')
+    },
+    handleRefresh() {
+      this.$emit('refresh')
+    },
+    handleSearch() {
+      this.$emit('search')
+    },
+    handleNotification() {
+      this.showMoreMenu = false
+      this.$emit('notification')
+    },
+    handleFullscreen() {
+      this.showMoreMenu = false
+      this.$emit('fullscreen')
+    },
+    handleMobile() {
+      this.showMoreMenu = false
+      this.$emit('mobile')
+    },
+    handleDropdown() {
+      this.$emit('dropdown')
+    },
+    handleSettings() {
+      this.showMoreMenu = false
+      this.$emit('settings')
+    },
+    toggleMoreMenu() {
+      this.showMoreMenu = !this.showMoreMenu
+    }
+  }
+}
+</script>
+
+<style>
+.analytics-topbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 64px;
+  background: #ffffff;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  padding: 0 16px;
+  z-index: 1000;
+  box-sizing: border-box;
+}
+
+.topbar-left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.menu-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: #f3f4f6;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.menu-icon .icon {
+  font-size: 18px;
+  color: #333;
+}
+
+.title-group {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  min-width: 0;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #111;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subtitle {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.55);
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: 8px;
+}
+
+.topbar-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.icon-btn-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: #f3f4f6;
+  position: relative;
+  margin-left: 8px;
+}
+
+.icon-btn-icon .icon {
+  font-size: 18px;
+  color: #333;
+}
+
+.icon-btn-icon.notification .badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 8px;
+  height: 8px;
+  background: #ef4444;
+  border-radius: 50%;
+  border: 2px solid #ffffff;
+}
+
+.dropdown {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: #f3f4f6;
+  margin-left: 8px;
+}
+
+.dropdown-text {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.dropdown-arrow {
+  font-size: 10px;
+  color: #666;
+}
+
+.more-btn {
+  width: 40px;
+  height: 40px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: #f3f4f6;
+  position: relative;
+  margin-left: 8px;
+}
+
+.more-btn .icon {
+  font-size: 20px;
+  color: #333;
+}
+
+.more-menu {
+  position: absolute;
+  top: 100%;
+  right: 16px;
+  margin-top: 8px;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 8px 0;
+  min-width: 160px;
+  z-index: 1001;
+}
+
+.more-menu-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+}
+
+.more-menu-item .icon {
+  font-size: 18px;
+}
+
+.more-menu-item text {
+  font-size: 14px;
+  color: #333;
+}
+
+/* 响应式 */
+@media screen and (max-width: 960px) {
+  .btn-hidden {
+    display: none !important;
+  }
+  
+  .more-btn {
+    display: flex !important;
+  }
+  
+  .title,
+  .subtitle {
+    max-width: 200px;
+  }
+}
+</style>