数据分析页面骨架

pages/mall/analytics/insight-detail.uvue

@@ -0,0 +1,659 @@
+<template>
+  <view class="page" @click="closeMoreMenu">
+    <!-- 固定顶部导航栏 -->
+    <AnalyticsTopBar 
+      :title="'数据洞察详情'"
+      :lastUpdateTime="lastUpdateTime"
+      :sidebarVisible="showSidebarMenu"
+      @menu-click="handleMenu"
+      @refresh="refreshData"
+      @search="handleSearch"
+      @notification="handleNotification"
+      @fullscreen="handleFullscreen"
+      @mobile="handleMobile"
+      @dropdown="handleDropdown"
+      @settings="handleSettings"
+    />
+    
+    <view class="page-layout">
+      <!-- 侧边栏菜单组件 -->
+      <AnalyticsSidebarMenu 
+        :visible="showSidebarMenu" 
+        :currentPath="currentPath"
+        @visible-change="handleSidebarUpdate"
+      />
+      
+      <!-- 主内容区域 -->
+      <view class="main-content">
+    <view class="container">
+          <!-- 洞察详情（真实数据） -->
+          <view class="card card-full">
+            <view class="card-head">
+              <text class="card-title">{{ insight.title || '洞察详情' }}</text>
+              <view class="meta-row">
+                <text class="badge" :class="'badge-' + (insight.type || 'info')">{{ getInsightTypeText(insight.type) }}</text>
+                <text class="badge badge-impact" :class="'impact-' + (insight.impact || 'medium')">{{ getImpactText(insight.impact) }}</text>
+                <text class="meta-time" v-if="insight.created_at">{{ formatTime(insight.created_at) }}</text>
+        </view>
+      </view>
+
+            <view v-if="loading" class="state">
+              <text class="state-text">加载中...</text>
+        </view>
+            <view v-else-if="errorMsg" class="state">
+              <text class="state-text">{{ errorMsg }}</text>
+      </view>
+            <view v-else class="content">
+              <text class="content-text">{{ insight.content }}</text>
+        </view>
+      </view>
+
+          <!-- 关联报表（可选） -->
+          <view class="card" v-if="relatedReport.id">
+        <view class="card-head">
+              <text class="card-title">关联报表</text>
+              <text class="card-desc">{{ relatedReport.type }} · {{ relatedReport.period }}</text>
+        </view>
+            <view class="report-row" @click="goToReportDetail">
+              <view class="report-icon">📄</view>
+              <view class="report-info">
+                <text class="report-title">{{ relatedReport.title }}</text>
+                <text class="report-time">{{ relatedReport.generated_at ? formatTime(relatedReport.generated_at) : '' }}</text>
+            </view>
+              <text class="report-arrow">></text>
+        </view>
+      </view>
+
+      <!-- 留白 -->
+      <view style="height: 24px;"></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+import supa from '@/components/supadb/aksupainstance.uts'
+import AnalyticsSidebarMenu from '@/components/analytics/AnalyticsSidebarMenu.uvue'
+import AnalyticsTopBar from '@/components/analytics/AnalyticsTopBar.uvue'
+
+type InsightDetail = {
+  id: string
+  report_id: string
+  type: string
+  impact: string
+  title: string
+  content: string
+  created_at: string
+}
+
+type RelatedReport = {
+  id: string
+  title: string
+  type: string
+  period: string
+  generated_at: string
+}
+
+export default {
+  components: {
+    AnalyticsSidebarMenu,
+    AnalyticsTopBar
+  },
+  data() {
+    return {
+      lastUpdateTime: '',
+      showMoreMenu: false,
+      showSidebarMenu: false,
+      currentPath: '/pages/mall/analytics/insight-detail',
+      insightId: '',
+      loading: false,
+      errorMsg: '',
+      insight: {
+        id: '',
+        report_id: '',
+        type: 'info',
+        impact: 'medium',
+        title: '',
+        content: '',
+        created_at: ''
+      } as InsightDetail,
+      relatedReport: {
+        id: '',
+        title: '',
+        type: '',
+        period: '',
+        generated_at: ''
+      } as RelatedReport
+    }
+  },
+
+  onLoad(options: any) {
+    this.currentPath = '/pages/mall/analytics/insight-detail'
+    this.updateTime()
+    const insightId = (options.insightId || options.id) as string
+    if (!insightId) {
+      uni.showToast({ title: '缺少洞察ID', icon: 'none' })
+      setTimeout(() => uni.navigateBack(), 1500)
+      return
+    }
+    this.insightId = insightId
+    this.loadInsightDetail()
+  },
+
+  onShow() {
+    this.currentPath = '/pages/mall/analytics/insight-detail'
+  },
+
+  methods: {
+    async loadInsightDetail() {
+      try {
+        this.loading = true
+        this.errorMsg = ''
+      this.updateTime()
+
+        const res: any = await supa
+          .from('analytics_insights')
+          .select('id, report_id, type, impact, title, content, created_at')
+          .eq('id', this.insightId)
+
+        const rows: Array<any> = Array.isArray(res.data) ? (res.data as Array<any>) : []
+        if (rows.length === 0) {
+          this.errorMsg = '洞察不存在或无权限访问'
+          return
+        }
+        const it = rows[0]
+        this.insight = {
+          id: `${it.id}`,
+          report_id: `${it.report_id || ''}`,
+          type: `${it.type || 'info'}`,
+          impact: `${it.impact || 'medium'}`,
+          title: `${it.title || ''}`,
+          content: `${it.content || ''}`,
+          created_at: `${it.created_at || ''}`
+        }
+
+        // 关联报表（可选）
+        this.relatedReport = { id: '', title: '', type: '', period: '', generated_at: '' } as RelatedReport
+        if (this.insight.report_id) {
+          const rRes: any = await supa
+            .from('analytics_reports')
+            .select('id, title, type, period, generated_at')
+            .eq('id', this.insight.report_id)
+
+          const rRows: Array<any> = Array.isArray(rRes.data) ? (rRes.data as Array<any>) : []
+          if (rRows.length > 0) {
+            const r = rRows[0]
+            this.relatedReport = {
+              id: `${r.id}`,
+              title: `${r.title}`,
+              type: `${r.type}`,
+              period: `${r.period}`,
+              generated_at: `${r.generated_at || ''}`
+            }
+          }
+        }
+      } catch (e) {
+        console.error('loadInsightDetail failed', e)
+        this.errorMsg = '加载失败，请稍后重试'
+      } finally {
+        this.loading = false
+      }
+    },
+
+    refreshData() {
+      this.loadInsightDetail()
+      uni.showToast({ title: '已刷新', icon: 'success' })
+    },
+
+    exportReport() {
+      uni.showActionSheet({
+        itemList: ['导出Excel', '导出PDF', '导出图片'],
+        success: () => uni.showToast({ title: '导出成功', icon: 'success' })
+      })
+    },
+
+    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}`
+    },
+
+    formatTime(timeStr: string): string {
+      if (!timeStr) return ''
+      return `${timeStr}`.replace('T', ' ').split('.')[0]
+    },
+
+    getInsightTypeText(type: string): string {
+      const t = `${type || 'info'}`
+      const map: Record<string, string> = {
+        positive: '正向',
+        warning: '预警',
+        negative: '风险',
+        info: '信息'
+      }
+      return map[t] || '信息'
+    },
+
+    getImpactText(impact: string): string {
+      const impacts: Record<string, string> = {
+        high: '高影响',
+        medium: '中影响',
+        low: '低影响'
+      }
+      return impacts[impact || 'medium'] || '中影响'
+    },
+
+    goToReportDetail() {
+      if (!this.relatedReport.id) return
+      uni.navigateTo({
+        url: `/pages/mall/analytics/report-detail?reportId=${this.relatedReport.id}`
+      })
+    },
+
+    handleMenu() {
+      this.showSidebarMenu = true
+    },
+    handleSidebarUpdate(visible: boolean) {
+      this.showSidebarMenu = visible
+    },
+
+    toggleMoreMenu() {
+      this.showMoreMenu = !this.showMoreMenu
+    },
+
+    closeMoreMenu() {
+      this.showMoreMenu = false
+    },
+    handleSearch() {
+      uni.showToast({ title: '搜索', icon: 'none' })
+    },
+    handleNotification() {
+      uni.showToast({ title: '通知', icon: 'none' })
+    },
+    handleFullscreen() {
+      uni.showToast({ title: '全屏', icon: 'none' })
+    },
+    handleMobile() {
+      uni.showToast({ title: '移动端', icon: 'none' })
+    },
+    handleDropdown() {
+      uni.showToast({ title: '下拉菜单', icon: 'none' })
+    },
+    handleSettings() {
+      uni.showToast({ title: '设置', icon: 'none' })
+    }
+  }
+}
+</script>
+
+<style>
+.page {
+  min-height: 100vh;
+  background: #f6f7fb;
+}
+
+/* 页面布局：宽屏时侧边栏+内容，窄屏时全屏内容 */
+.page-layout {
+  display: flex;
+  flex-direction: row !important;
+  min-height: 100vh;
+}
+
+.main-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  padding-top: 64px; /* 为固定顶部导航栏留出空间 */
+}
+
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 16px 16px 28px;
+  box-sizing: border-box;
+}
+
+/* 顶部栏 */
+.topbar {
+  display: flex;
+  flex-direction: row !important;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  background: #fff;
+  border-radius: 14px;
+  border: 1px solid rgba(0,0,0,0.06);
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.topbar-left {
+  display: flex;
+  flex-direction: row !important;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.menu-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: #f3f4f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.menu-icon:active {
+  background: #e5e7eb;
+  transform: scale(0.95);
+}
+
+.menu-icon .icon {
+  font-size: 18px;
+  color: #111;
+  line-height: 1;
+}
+
+.title-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  min-width: 0;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #111;
+  max-width: 420px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subtitle {
+  font-size: 12px;
+  color: rgba(0,0,0,0.55);
+  max-width: 420px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.topbar-right {
+  display: flex;
+  flex-direction: row !important;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  position: relative;
+  white-space: nowrap;
+}
+
+.icon-btn-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: #f3f4f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.icon-btn-icon:active {
+  background: #e5e7eb;
+  transform: scale(0.95);
+}
+
+.icon-btn-icon .icon {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.more-btn {
+  display: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: #f3f4f6;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.more-btn.active {
+  background: #e5e7eb;
+}
+
+.more-btn .icon {
+  font-size: 18px;
+  line-height: 1;
+  color: #111;
+}
+
+/* 时间维度 tabs */
+.tabs {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: row !important;
+  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%;
+}
+
+.card-head {
+  display: flex;
+  flex-direction: row !important;
+  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);
+}
+
+.chart-box {
+  width: 100%;
+  height: 360px;
+}
+
+/* 建议列表 */
+.suggestion-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.suggestion-item {
+  display: flex;
+  flex-direction: row !important;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px;
+  background: #f9fafb;
+  border-radius: 8px;
+}
+
+.suggestion-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.suggestion-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.suggestion-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #111;
+}
+
+.suggestion-desc {
+  font-size: 12px;
+  color: rgba(0,0,0,0.65);
+  line-height: 1.5;
+}
+
+/* 异常列表 */
+.anomaly-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.anomaly-item {
+  display: flex;
+  flex-direction: row !important;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px;
+  background: #fef2f2;
+  border-radius: 8px;
+  border-left: 3px solid #ef4444;
+}
+
+.anomaly-level {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.anomaly-level.critical {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.anomaly-level.warning {
+  background: #fef3c7;
+  color: #d97706;
+}
+
+.anomaly-level.info {
+  background: #dbeafe;
+  color: #2563eb;
+}
+
+.anomaly-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.anomaly-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #111;
+}
+
+.anomaly-desc {
+  font-size: 12px;
+  color: rgba(0,0,0,0.65);
+  line-height: 1.5;
+}
+
+.anomaly-time {
+  font-size: 11px;
+  color: rgba(0,0,0,0.45);
+}
+
+/* 响应式 */
+/* 响应式：窄屏时全屏显示 */
+@media screen and (max-width: 959px) {
+  .page-layout {
+    flex-direction: column !important;
+  }
+  
+  .main-content {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .title,
+  .subtitle {
+    max-width: 200px;
+  }
+  
+  .topbar-right .btn-hidden {
+    display: none !important;
+  }
+  
+  .more-btn {
+    display: flex !important;
+  }
+}
+</style>