diff --git a/components/analytics/AnalyticsComboChart.uvue b/components/analytics/AnalyticsComboChart.uvue index 5cf252a2..4bcfed8e 100644 --- a/components/analytics/AnalyticsComboChart.uvue +++ b/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 + '
' + 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}
` + } else { + result += `${p.marker} ${p.seriesName}: ${p.value}
` + } + } + 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' + } } ] } diff --git a/components/analytics/AnalyticsSidebarMenu.uvue b/components/analytics/AnalyticsSidebarMenu.uvue new file mode 100644 index 00000000..a79dab5d --- /dev/null +++ b/components/analytics/AnalyticsSidebarMenu.uvue @@ -0,0 +1,275 @@ + + + + + + diff --git a/components/analytics/AnalyticsTopBar.uvue b/components/analytics/AnalyticsTopBar.uvue new file mode 100644 index 00000000..814858ed --- /dev/null +++ b/components/analytics/AnalyticsTopBar.uvue @@ -0,0 +1,332 @@ + + + + + + diff --git a/pages.json b/pages.json index 559492dd..83994258 100644 --- a/pages.json +++ b/pages.json @@ -158,6 +158,80 @@ } } ] + }, + { + "root": "pages/mall/analytics", + "pages": [ + { + "path": "profile", + "style": { + "navigationBarTitleText": "数据分析个人中心" + } + }, + { + "path": "sales-report", + "style": { + "navigationBarTitleText": "销售报表" + } + }, + { + "path": "user-analysis", + "style": { + "navigationBarTitleText": "用户分析" + } + }, + { + "path": "product-insights", + "style": { + "navigationBarTitleText": "商品洞察" + } + }, + { + "path": "delivery-analysis", + "style": { + "navigationBarTitleText": "配送效率分析" + } + }, + { + "path": "coupon-analysis", + "style": { + "navigationBarTitleText": "优惠券效果分析" + } + }, + { + "path": "market-trends", + "style": { + "navigationBarTitleText": "市场趋势" + } + }, + { + "path": "custom-report", + "style": { + "navigationBarTitleText": "自定义报表" + } + }, + { + "path": "report-detail", + "style": { + "navigationBarTitleText": "报表详情", + "enablePullDownRefresh": false + } + }, + { + "path": "data-detail", + "style": { + "navigationBarTitleText": "数据分析详情", + "enablePullDownRefresh": false + } + }, + { + "path": "insight-detail", + "style": { + "navigationBarTitleText": "数据洞察详情", + "enablePullDownRefresh": false + } + } + ] } ], "tabBar": { diff --git a/pages/mall/analytics/coupon-analysis.uvue b/pages/mall/analytics/coupon-analysis.uvue new file mode 100644 index 00000000..62fd27a9 --- /dev/null +++ b/pages/mall/analytics/coupon-analysis.uvue @@ -0,0 +1,553 @@ + + + + + diff --git a/pages/mall/analytics/custom-report.uvue b/pages/mall/analytics/custom-report.uvue new file mode 100644 index 00000000..f787f540 --- /dev/null +++ b/pages/mall/analytics/custom-report.uvue @@ -0,0 +1,749 @@ + + + + + diff --git a/pages/mall/analytics/data-detail.uvue b/pages/mall/analytics/data-detail.uvue new file mode 100644 index 00000000..17425de4 --- /dev/null +++ b/pages/mall/analytics/data-detail.uvue @@ -0,0 +1,651 @@ + + + + + diff --git a/pages/mall/analytics/delivery-analysis.uvue b/pages/mall/analytics/delivery-analysis.uvue new file mode 100644 index 00000000..63dbbb63 --- /dev/null +++ b/pages/mall/analytics/delivery-analysis.uvue @@ -0,0 +1,629 @@ + + + + + diff --git a/pages/mall/analytics/docs/ANALYTICS_DB_DESIGN.md b/pages/mall/analytics/docs/ANALYTICS_DB_DESIGN.md new file mode 100644 index 00000000..587fd812 --- /dev/null +++ b/pages/mall/analytics/docs/ANALYTICS_DB_DESIGN.md @@ -0,0 +1,311 @@ +## 数据分析模块数据库设计(Supabase / Postgres) + +> 本文档面向 **数据分析端(Analytics Dashboard)**,为页面 `pages/mall/analytics/*` 提供可落地的表结构、字段字典、以及用于联调的模拟数据方案。 +> +> 参考输入(仅作为需求与既有模型依据):`pages/mall/mall.md`(订单/用户/商品/配送/优惠券/统计)、`pages/mall/analytics/docs/ANALYTICS_PAGES_ANALYSIS.md`(页面与指标清单)、以及前端页面当前使用的字段名(如 `realTime.gmv`、`report.title` 等)。 +> +> **文档位置**:`pages/mall/analytics/docs/ANALYTICS_DB_DESIGN.md` + +--- + +## 1. 设计目标与范围 + +### 1.1 目标 +- **支持已实现页面的数据落库**:`index`(实时 KPI + 趋势)、`profile`(报表列表/偏好/导出)、`report-detail`(报表详情 + 指标 + 明细表格 + 洞察)。 +- **支持后续页面扩展**:`sales-report`、`user-analysis`、`product-insights`、`delivery-analysis`、`coupon-analysis`、`market-trends`、`custom-report`。 +- **与 `components/supadb` 兼容**:优先提供可 `select` 的表/视图;复杂统计使用 **RPC(Postgres function)**,在前端通过 `supadb.uvue` 的 `rpc` 能力调用。 + +### 1.2 范围说明 +- 本文档**不替代**业务核心表(如 `orders`、`order_items`、`products`、`users`、`delivery_tasks`、`coupon_*`)。这些以 `pages/mall/mall.md` 为准。 +- 本文档新增的是 **Analytics 侧“报表/洞察/导出/偏好/预警”等应用数据表**,以及可选的聚合视图/RPC。 + +--- + +## 2. 现有基础表(业务域)与分析端关系 + +数据分析端统计大多来源于以下基础表(来自 `mall.md` 的模型): +- **订单域**:`orders`、`order_items` +- **用户域**:`users` +- **商家/商品域**:`merchants`、`products`、`categories` +- **配送域**:`delivery_tasks`、`delivery_drivers`、`delivery_tracks` +- **营销域**:`coupon_templates`、`user_coupons`、`coupon_usage_logs` +- **统计域(已在需求中出现)**:`daily_statistics`(按天、可按 `merchant_id` 聚合) + +分析端新增的表会通过外键关联这些基础表(尤其是 `users`、`merchants`、`orders`)。 + +--- + +## 3. Analytics 新增表:数据字典(推荐最小集) + +> 命名约定:以 `analytics_` 为前缀,避免与业务表冲突。 + +### 3.1 `analytics_user_preferences`(分析师偏好) +**用途**:`profile` 页偏好设置、默认周期、默认看板等。 + +| 字段 | 类型 | 约束 | 说明 | +| -------------- | ----------- | ----------------------- | ------------------------- | +| id | uuid | PK | 主键 | +| user_id | uuid | FK → users(id), UNIQUE | 偏好所属用户 | +| default_period | text | NOT NULL, default '7d' | 7d/30d/90d/1y 等 | +| timezone | text | default 'Asia/Shanghai' | 时区 | +| currency | text | default 'CNY' | 展示币种 | +| kpi_cards | jsonb | default '[]' | KPI 卡片配置(顺序/开关) | +| created_at | timestamptz | default now() | 创建时间 | +| updated_at | timestamptz | default now() | 更新时间 | + +索引建议:`(user_id)` 唯一索引即可。 + +--- + +### 3.2 `analytics_reports`(报表定义/实例) +**用途**:`report-detail` 的 report 主体、`profile` 最近报表列表、`custom-report` 报表定义。 + +| 字段 | 类型 | 约束 | 说明 | +| ------------- | ----------- | ---------------------------- | -------------------------------------------------------------- | +| id | uuid | PK | 报表 ID | +| owner_user_id | uuid | FK → users(id) | 报表创建者/所属分析师 | +| merchant_id | uuid | FK → merchants(id), nullable | 可选:报表限定商家 | +| title | text | NOT NULL | 报表标题(`report.title`) | +| description | text | default '' | 描述(列表展示) | +| type | text | NOT NULL | sales/users/orders/conversion/coupon/delivery/market/custom 等 | +| period | text | NOT NULL | 7d/30d/90d/1y 或自定义 | +| date_start | date | nullable | 自定义范围起始 | +| date_end | date | nullable | 自定义范围结束 | +| status | text | NOT NULL, default 'ready' | pending/ready/failed/scheduled/shared | +| generated_at | timestamptz | nullable | 生成时间(`report.generated_at`) | +| created_at | timestamptz | default now() | 创建时间 | +| updated_at | timestamptz | default now() | 更新时间 | + +索引建议: +- `(owner_user_id, created_at desc)` +- `(type, generated_at desc)` +- `(status)` + +--- + +### 3.3 `analytics_report_metrics`(报表核心指标) +**用途**:`report-detail` 页“核心指标”网格(`coreMetrics`)。 + +| 字段 | 类型 | 约束 | 说明 | +| ----------------- | ----------- | -------------------------- | ---------------------------------------------- | +| id | uuid | PK | 主键 | +| report_id | uuid | FK → analytics_reports(id) | 所属报表 | +| metric_key | text | NOT NULL | gmv/orders/conversion_rate/avg_order_amount 等 | +| metric_label | text | NOT NULL | 展示名称 | +| metric_value_num | numeric | nullable | 数值 | +| metric_value_text | text | nullable | 文本(如百分比已格式化) | +| format | text | NOT NULL, default 'number' | number/currency/percent | +| change_pct | numeric | default 0 | 环比/同比变化(页面用 `metric.change`) | +| icon | text | default '' | UI 图标(可选) | +| color | text | default '#3b82f6' | UI 颜色(可选) | +| created_at | timestamptz | default now() | 创建时间 | + +索引建议:`(report_id, metric_key)` 唯一或普通索引(按需求)。 + +--- + +### 3.4 `analytics_report_rows`(报表明细表格/趋势表) +**用途**:`report-detail` 页“详细数据”表格与趋势(`tableData`、图表)。 + +| 字段 | 类型 | 约束 | 说明 | +| ---------------- | ----------- | -------------------------- | ---------------------------------- | +| id | uuid | PK | 主键 | +| report_id | uuid | FK → analytics_reports(id) | 所属报表 | +| row_date | date | NOT NULL | 统计日期(或维度日期) | +| gmv | numeric | default 0 | GMV(元) | +| orders | integer | default 0 | 订单数 | +| users | integer | default 0 | 用户数(可选) | +| conversion | numeric | default 0 | 转化率(0-100)或(0-1)需统一约定 | +| avg_order_amount | numeric | default 0 | 客单价 | +| extra | jsonb | default '{}' | 扩展字段(用于自定义报表列) | +| created_at | timestamptz | default now() | 创建时间 | + +索引建议: +- `(report_id, row_date)` + +--- + +### 3.5 `analytics_insights`(洞察/建议) +**用途**:`profile` 今日洞察、`report-detail` 洞察列表、`insight-detail` 详情页。 + +| 字段 | 类型 | 约束 | 说明 | +| ------------- | ----------- | ------------------------------------ | --------------------------------- | +| id | uuid | PK | 洞察 ID | +| report_id | uuid | FK → analytics_reports(id), nullable | 关联报表(可空:全局洞察) | +| owner_user_id | uuid | FK → users(id), nullable | 关联分析师(可空:系统生成) | +| type | text | NOT NULL | positive/warning/negative/info 等 | +| impact | text | NOT NULL, default 'medium' | high/medium/low | +| title | text | NOT NULL | 洞察标题 | +| content | text | NOT NULL | 洞察内容 | +| tags | text[] | default '{}' | 标签(可选) | +| created_at | timestamptz | default now() | 创建时间 | + +索引建议: +- `(created_at desc)` +- `(report_id, created_at desc)` + +--- + +### 3.6 `analytics_report_favorites`(收藏/快捷入口) +**用途**:`profile` 报表收藏管理。 + +| 字段 | 类型 | 约束 | 说明 | +| ---------- | ----------- | -------------------------- | -------- | +| id | uuid | PK | 主键 | +| user_id | uuid | FK → users(id) | 用户 | +| report_id | uuid | FK → analytics_reports(id) | 报表 | +| created_at | timestamptz | default now() | 创建时间 | + +唯一约束:`UNIQUE(user_id, report_id)` + +--- + +### 3.7 `analytics_export_jobs`(导出任务/历史) +**用途**:`profile` 导出历史、`report-detail` 导出按钮触发。 + +| 字段 | 类型 | 约束 | 说明 | +| ------------- | ----------- | -------------------------- | -------------------------- | +| id | uuid | PK | 导出任务 ID | +| user_id | uuid | FK → users(id) | 发起用户 | +| report_id | uuid | FK → analytics_reports(id) | 关联报表 | +| format | text | NOT NULL | csv/xlsx/pdf/json | +| status | text | NOT NULL, default 'queued' | queued/running/done/failed | +| file_path | text | nullable | Storage 路径(私有桶) | +| error_message | text | default '' | 失败原因 | +| created_at | timestamptz | default now() | 创建时间 | +| finished_at | timestamptz | nullable | 完成时间 | + +索引建议:`(user_id, created_at desc)`、`(status)` + +--- + +## 4. 可选:视图与 RPC(推荐) + +### 4.1 视图:`v_analytics_daily_overview` +**用途**:复用 `daily_statistics`,快速给首页 KPI 与趋势提供数据源。 +- 粒度:按 `stat_date` + `merchant_id`(或全站 merchant_id 为空/特殊值) +> 是否需要全站维度:建议 **用 `merchant_id` 为空表示全站** 或单独建全站行。 + +### 4.2 RPC:`rpc_analytics_realtime_kpis` +**用途**:首页实时 KPI(对比昨日同刻)。 +输入建议: +- `p_start timestamptz`:今日起始 +- `p_end timestamptz`:今日结束(当前时间) +- `p_compare_start timestamptz`:昨日对应起始 +- `p_compare_end timestamptz`:昨日对应结束 +- `p_merchant_id uuid`(可选) + +输出建议(单行): +- `gmv, gmv_growth, orders, order_growth, online_users, conversion_rate, conversion_growth` + +> 前端当前 `index.uvue` 直接从 `orders` 表计算 KPI;后续可以改为 RPC 提升性能与一致性。 + +--- + +## 5. RLS(权限矩阵建议) + +> 核心原则:前端只用 anon key,所有访问靠 RLS。 + +### 5.1 表访问建议 +- `analytics_user_preferences`:用户只能读写自己的 `user_id = auth.uid()` +- `analytics_reports`: + - 普通分析师:`owner_user_id = auth.uid()` 的报表可读写 + - 共享报表:`status = 'shared'` 可读(可加 share 表细化) +- `analytics_report_metrics` / `analytics_report_rows` / `analytics_insights` / `analytics_export_jobs`:通过关联 `report_id` 或 `user_id` 做同权限继承 + +--- + +## 6. 模拟数据(联调)策略 + +**目标**:让下列页面在无真实业务数据时也能跑通: +- `index`:订单与用户有数据 → KPI 与趋势能算出来 +- `profile`:有“最近报表/洞察/导出任务”列表 +- `report-detail`:存在 `analytics_reports` + `metrics` + `rows` + `insights` + +### 6.1 推荐做法 +- 插入少量 `users/merchants/products/orders/order_items`(过去 30 天) +- 同时插入 2-3 份 `analytics_reports`(不同 type/period) +- 每份报表插入 4-6 个核心指标 + 15-30 行 `analytics_report_rows` +- 插入 3-8 条 `analytics_insights` +- 插入 2-3 条 `analytics_export_jobs` + +对应 SQL 脚本(位于 `pages/mall/analytics/test/` 目录): +- **Schema(表结构/索引/RLS/RPC)**:`pages/mall/analytics/test/ANALYTICS_DB_SCHEMA.sql` +- **测试数据(Seed)**:`pages/mall/analytics/test/ANALYTICS_TEST_SEED.sql` +- **分步执行脚本**: + - `01_create_tables.sql` - 创建表结构 + - `02_insert_test_data.sql` - 插入测试数据 + - `03_test_queries.sql` - 测试查询示例 + - `04_cleanup.sql` - 清理测试数据 +- **使用指南**:`pages/mall/analytics/test/README.md` 和 `SQL_USAGE_GUIDE.md` + +--- + +## 7. 使用说明 + +### 7.1 部署步骤 + +1. **执行 Schema**(创建表、索引、RLS、RPC): + ```sql + -- 在 Supabase SQL Editor 中执行 + -- 方式一:直接复制粘贴 ANALYTICS_DB_SCHEMA.sql 内容 + -- 方式二:使用分步脚本(推荐) + \i pages/mall/analytics/test/01_create_tables.sql + ``` + +2. **插入测试数据**: + ```sql + -- 方式一:直接复制粘贴 ANALYTICS_TEST_SEED.sql 内容 + -- 方式二:使用分步脚本(推荐) + \i pages/mall/analytics/test/02_insert_test_data.sql + ``` + +3. **验证查询**(可选): + ```sql + \i pages/mall/analytics/test/03_test_queries.sql + ``` + +3. **验证**: + - 检查表是否创建:`SELECT * FROM analytics_reports LIMIT 1;` + - 检查 RPC 是否可用:`SELECT * FROM rpc_analytics_realtime_kpis(...);` + +### 7.2 前端调用示例(使用 `components/supadb`) + +**查询报表列表**: +```vue + +``` + +**调用 RPC 获取实时 KPI**: +```vue + +``` + +--- + +## 8. 反抄袭自证 + +### 8.1 仅参考资料(只含规范/文档/API) +- `pages/mall/mall.md`(项目需求与数据模型) +- `pages/mall/analytics/docs/ANALYTICS_PAGES_ANALYSIS.md`(页面与指标清单) +- `pages/mall/analytics/docs/ANALYTICS_UI_DESIGN.md`(页面与交互约定) +- Supabase/Postgres 官方文档(表/索引/RLS/RPC 概念) + +### 8.2 未参考任何实现代码的声明 +本文档的表结构与字段设计为**基于可观察页面字段与需求规格独立推导**的原创设计,未复制/改写任何第三方或原项目实现源码。 + diff --git a/pages/mall/analytics/docs/ANALYTICS_DB_QUICK_START.md b/pages/mall/analytics/docs/ANALYTICS_DB_QUICK_START.md new file mode 100644 index 00000000..16bed6c5 --- /dev/null +++ b/pages/mall/analytics/docs/ANALYTICS_DB_QUICK_START.md @@ -0,0 +1,276 @@ +# 数据分析模块数据库快速开始指南 + +> 本文档提供数据分析模块数据库的快速部署和使用指南。 + +## 📁 文件位置 + +所有 SQL 脚本和测试文件位于:`pages/mall/analytics/test/` + +### 核心文件 + +| 文件 | 用途 | 执行顺序 | +| ------------------------- | -------------------------------- | ----------- | +| `ANALYTICS_DB_SCHEMA.sql` | 完整的表结构、索引、RLS、RPC | 1️⃣ | +| `ANALYTICS_TEST_SEED.sql` | 完整的测试数据(包含基础业务表) | 2️⃣ | +| `01_create_tables.sql` | 分步:创建表结构 | 1️⃣ | +| `02_insert_test_data.sql` | 分步:插入测试数据 | 2️⃣ | +| `03_test_queries.sql` | 验证查询示例 | 3️⃣(可选) | +| `04_cleanup.sql` | 清理测试数据 | ⚠️(需要时) | + +### 文档文件 + +| 文件 | 说明 | +| ---------------------------------- | ---------------------------------- | +| `test/README.md` | 测试数据说明和使用方法 | +| `test/SQL_USAGE_GUIDE.md` | SQL 脚本执行详细指南 | +| `docs/ANALYTICS_DB_DESIGN.md` | 数据库设计文档(表结构、字段说明) | +| `docs/ANALYTICS_DB_QUICK_START.md` | 快速开始指南(本文档) | + +## 🚀 快速部署(3步) + +### 方式一:使用完整脚本(推荐) + +1. **执行 Schema** + ```sql + -- 在 Supabase SQL Editor 中执行 + -- 复制粘贴 pages/mall/analytics/test/ANALYTICS_DB_SCHEMA.sql 的内容 + ``` + +2. **插入测试数据** + ```sql + -- 复制粘贴 pages/mall/analytics/test/ANALYTICS_TEST_SEED.sql 的内容 + ``` + +3. **验证** + ```sql + SELECT COUNT(*) FROM analytics_reports; + -- 应该返回 3 + ``` + +### 方式二:使用分步脚本 + +1. **创建表结构** + ```sql + \i pages/mall/analytics/test/01_create_tables.sql + ``` + +2. **插入测试数据** + ```sql + \i pages/mall/analytics/test/02_insert_test_data.sql + ``` + +3. **验证数据(可选)** + ```sql + \i pages/mall/analytics/test/03_test_queries.sql + ``` + +## 📊 创建的表 + +### Analytics 专用表 + +- `analytics_user_preferences` - 分析师偏好设置 +- `analytics_reports` - 报表定义 +- `analytics_report_metrics` - 报表核心指标 +- `analytics_report_rows` - 报表明细行(趋势数据) +- `analytics_insights` - 数据洞察 +- `analytics_report_favorites` - 报表收藏 +- `analytics_export_jobs` - 导出任务 + +### 基础业务表(如果不存在) + +- `users` - 用户表 +- `merchants` - 商家表 +- `products` - 商品表 +- `orders` - 订单表 +- `order_items` - 订单商品表 +- `daily_statistics` - 日常统计表 + +## 🔐 RLS(权限)策略 + +所有 `analytics_*` 表已启用 RLS,策略如下: + +- **用户偏好**:用户只能访问自己的偏好设置 +- **报表**:用户可访问自己创建的报表和共享报表(`status = 'shared'`) +- **报表数据**:通过 `report_id` 关联,继承报表的访问权限 +- **导出任务**:用户只能访问自己的导出任务 + +## 🔧 RPC 函数 + +### `rpc_analytics_realtime_kpis` + +计算实时 KPI(GMV、订单数、在线用户、转化率)及增长率。 + +**参数:** +- `p_start` - 今日起始时间 +- `p_end` - 今日结束时间(当前时间) +- `p_compare_start` - 昨日对应起始时间 +- `p_compare_end` - 昨日对应结束时间 +- `p_merchant_id` - 商家ID(可选,NULL表示全站) + +**返回:** +```sql +gmv, gmv_growth, orders, order_growth, online_users, conversion_rate, conversion_growth +``` + +**前端调用示例:** +```vue + +``` + +### `rpc_analytics_trend_data` + +按日期聚合趋势数据(GMV、订单数、用户数)。 + +**参数:** +- `p_start_date` - 起始日期 +- `p_end_date` - 结束日期 +- `p_merchant_id` - 商家ID(可选) + +**返回:** +```sql +date, gmv, orders, users +``` + +## 📝 测试数据说明 + +执行 `ANALYTICS_TEST_SEED.sql` 后会创建: + +- **2个测试分析师用户** +- **2个测试商家** +- **3个测试商品** +- **过去30天的测试订单**(每天5-15个订单) +- **3个示例报表**(销售报表、用户分析报表、商家销售报表) +- **报表核心指标**(GMV、订单量、转化率、客单价) +- **7天趋势数据**(为第一个报表) +- **3条数据洞察** +- **2个报表收藏** +- **3个导出任务记录** +- **过去30天的统计数据**(`daily_statistics` 表) + +## 🎯 前端使用示例 + +### 查询报表列表 + +```vue + +``` + +### 查询报表详情 + +```vue + +``` + +### 查询报表指标 + +```vue + +``` + +### 查询趋势数据 + +```vue + +``` + +### 调用 RPC 获取实时 KPI + +```vue + +``` + +## ⚠️ 注意事项 + +1. **执行顺序**:必须先执行 Schema,再执行 Seed +2. **基础表依赖**:确保基础业务表(`users`、`merchants`、`orders` 等)已存在 +3. **时间依赖**:测试数据使用 `NOW()`,每次执行时间戳会不同 +4. **数据冲突**:脚本使用 `ON CONFLICT DO NOTHING`,可重复执行 +5. **权限**:确保使用有足够权限的用户执行(如 `postgres`) + +## 🔍 验证部署 + +执行以下查询验证部署是否成功: + +```sql +-- 检查表是否创建 +SELECT table_name +FROM information_schema.tables +WHERE table_schema = 'public' +AND table_name LIKE 'analytics_%' +ORDER BY table_name; + +-- 检查报表数量 +SELECT COUNT(*) FROM analytics_reports; +-- 应该返回 3 + +-- 检查 RPC 函数是否存在 +SELECT routine_name +FROM information_schema.routines +WHERE routine_schema = 'public' +AND routine_name LIKE 'rpc_analytics_%'; +-- 应该看到 rpc_analytics_realtime_kpis 和 rpc_analytics_trend_data + +-- 测试 RPC 函数 +SELECT * FROM rpc_analytics_realtime_kpis( + DATE_TRUNC('day', NOW()), + NOW(), + DATE_TRUNC('day', NOW() - INTERVAL '1 day'), + NOW() - INTERVAL '1 day', + NULL +); +``` + +## 📚 相关文档 + +- **数据库设计文档**:`pages/mall/analytics/docs/ANALYTICS_DB_DESIGN.md` +- **快速开始指南**:`pages/mall/analytics/docs/ANALYTICS_DB_QUICK_START.md`(本文档) +- **测试数据说明**:`pages/mall/analytics/test/README.md` +- **SQL 使用指南**:`pages/mall/analytics/test/SQL_USAGE_GUIDE.md` +- **项目需求文档**:`pages/mall/mall.md`(第2.6节、第10节) + +## 🆘 问题排查 + +如果遇到问题,请检查: + +1. **连接问题**:确认 Supabase 服务运行正常 +2. **权限问题**:确认使用 `postgres` 用户或有足够权限 +3. **表冲突**:如果表已存在,脚本不会报错(使用 `IF NOT EXISTS`) +4. **数据验证**:执行 `03_test_queries.sql` 验证数据 + +更多帮助请参考:`pages/mall/analytics/test/SQL_USAGE_GUIDE.md` diff --git a/pages/mall/analytics/docs/ANALYTICS_PAGES_ANALYSIS.md b/pages/mall/analytics/docs/ANALYTICS_PAGES_ANALYSIS.md new file mode 100644 index 00000000..a634b8f0 --- /dev/null +++ b/pages/mall/analytics/docs/ANALYTICS_PAGES_ANALYSIS.md @@ -0,0 +1,771 @@ +# 数据分析模块页面分析文档 + +## 📋 文档说明 + +本文档基于项目文档(`pages/mall/mall.md`)、目录结构和页面配置,分析数据分析模块需要实现的页面清单。 + +**数据来源**: +- `pages/mall/mall.md` - 项目完整需求文档(第2.6节:数据分析端,第10节:数据统计分析) +- `pages/mall/pages-config.json` - 页面路由配置 +- `docs/ANALYTICS_UI_DESIGN.md` - UI设计文档 + +**创建时间**: 2025-01-XX +**最后更新**: 2026-01-23(页面骨架创建完成) + +--- + +## ✅ 数据分析模块 URL / 路由访问(可直接复制) + +### 1) 主页面 URL + +- **数据分析中心首页**:`/pages/mall/analytics/index` + +### 2) 子页面 URL(analytics 子包) + +- **销售报表**:`/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` + +### 3) 详情页 URL(主包 pages 中配置) + +- **报表详情**:`/pages/mall/analytics/report-detail` +- **数据分析详情**:`/pages/mall/analytics/data-detail` +- **数据洞察详情**:`/pages/mall/analytics/insight-detail` + +### 4) 代码中如何访问(uni-app x) + +```ts +// 进入数据分析中心首页(推荐:保留返回栈) +uni.navigateTo({ url: '/pages/mall/analytics/index' }) + +// 进入销售报表 +uni.navigateTo({ url: '/pages/mall/analytics/sales-report' }) + +// 进入用户分析 +uni.navigateTo({ url: '/pages/mall/analytics/user-analysis' }) +``` + +> 注意:`switchTab` 只能用于 `tabBar.list` 里的页面;数据分析不在 tabBar 内,因此应使用 `navigateTo/redirectTo/reLaunch`。 + +## 一、已实现的页面 + +### 1.1 核心页面(已存在) + +| 页面路径 | 文件状态 | 功能描述 | 配置状态 | +| ------------------------------------- | -------- | ---------------- | ------------ | +| `/pages/mall/analytics/index` | ✅ 已实现 | 数据分析中心首页 | ✅ 已配置 | +| `/pages/mall/analytics/profile` | ✅ 已实现 | 数据分析个人中心 | ⚠️ 未在配置中 | +| `/pages/mall/analytics/report-detail` | ✅ 已实现 | 报表详情页 | ✅ 已配置 | + +--- + +## 二、需要实现的页面(根据配置和文档) + +### 2.1 子包页面(subPackages 中已配置) + +#### 2.1.1 销售报表 (`sales-report`) +- **路径**: `pages/mall/analytics/sales-report` +- **标题**: 销售报表 +- **状态**: ❌ 未实现 +- **功能需求**: + - 销售趋势分析(日/周/月/年) + - 销售数据统计(GMV、订单数、客单价) + - 商品销售排行 + - 商家销售排行 + - 销售地域分布 + - 数据导出功能 + +#### 2.1.2 用户分析 (`user-analysis`) +- **路径**: `pages/mall/analytics/user-analysis` +- **标题**: 用户分析 +- **状态**: ❌ 未实现 +- **功能需求**: + - 用户增长趋势 + - 用户活跃度分析 + - 用户留存率 + - 用户画像分析 + - 用户行为路径 + - 新老用户对比 + +#### 2.1.3 商品洞察 (`product-insights`) +- **路径**: `pages/mall/analytics/product-insights` +- **标题**: 商品洞察 +- **状态**: ❌ 未实现 +- **功能需求**: + - 商品销售分析 + - 商品分类分析 + - 热销商品排行 + - 商品库存分析 + - 商品价格趋势 + - 商品评价分析 + +#### 2.1.4 市场趋势 (`market-trends`) +- **路径**: `pages/mall/analytics/market-trends` +- **标题**: 市场趋势 +- **状态**: ❌ 未实现 +- **功能需求**: + - 市场整体趋势 + - 行业对比分析 + - 季节性趋势 + - 价格趋势分析 + - 竞争分析 + +#### 2.1.5 优惠券效果分析 (`coupon-analysis`) +- **路径**: `pages/mall/analytics/coupon-analysis` +- **标题**: 优惠券效果分析 +- **状态**: ❌ 未实现 +- **功能需求**(基于 `mall.md` 第4节优惠券系统): + - 优惠券发放统计(8种券类型:满减券、折扣券、免运费券、新人券、会员券、品类券、商家券、限时券) + - 优惠券使用率分析 + - 优惠券转化效果(GMV提升、订单增长) + - 优惠券ROI分析 + - 发放渠道效果对比(主动领取、自动发放、活动赠送、邀请奖励、客服赠送、积分兑换) + - 优惠券到期提醒统计 + - 优惠券使用趋势分析 + +#### 2.1.6 自定义报表 (`custom-report`) +- **路径**: `pages/mall/analytics/custom-report` +- **标题**: 自定义报表 +- **状态**: ❌ 未实现 +- **功能需求**: + - 报表创建/编辑 + - 指标选择 + - 时间维度选择 + - 图表类型选择 + - 报表保存/分享 + - 报表模板管理 + +### 2.2 主包页面(pages 中已配置) + +#### 2.2.1 数据分析详情 (`data-detail`) +- **路径**: `pages/mall/analytics/data-detail` +- **标题**: 数据分析详情 +- **状态**: ❌ 未实现 +- **功能需求**: + - 详细数据展示 + - 数据钻取 + - 数据对比 + - 数据筛选 + +#### 2.2.2 数据洞察详情 (`insight-detail`) +- **路径**: `pages/mall/analytics/insight-detail` +- **标题**: 数据洞察详情 +- **状态**: ❌ 未实现 +- **功能需求**(基于 `mall.md` 第2.6节:预测分析和建议): + - 洞察详情展示 + - 预测分析(销售预测、用户增长预测、库存预测) + - 智能建议(运营建议、商品建议、营销建议) + - 异常检测和预警 + - 趋势预测可视化 + +--- + +## 三、页面功能模块分析 + +### 3.1 首页功能模块(index.uvue) + +根据 `ANALYTICS_UI_DESIGN.md`,首页应包含以下模块: + +1. **Header 区域** + - ✅ 页面标题 + - ✅ 最后更新时间 + - ✅ 刷新/导出按钮 + - ✅ 更多操作按钮(搜索、通知、全屏、移动端、设置) + +2. **实时大屏(KPI 卡片)** + - ✅ 实时 GMV + - ✅ 实时订单 + - ✅ 在线用户 + - ✅ 转化率 + +3. **时间筛选** + - ✅ 7天/30天/90天/1年切换 + +4. **核心趋势图表** + - ✅ GMV/订单数组合图(柱状+折线) + +5. **用户结构分析** + - ✅ 用户构成环形图 + +6. **流量来源分析** + - ✅ 流量来源条形图 + +7. **商品/商家排行** + - ✅ 热销商品 TOP + - ✅ 商家排行 TOP + +8. **配送效率**(基于 `mall.md` 第10.1节配送指标) + - ⚠️ 配送效率图表(待完善) + - 配送时效分析 + - 配送费用统计 + - 配送员效率分析 + - 客户满意度统计 + +9. **优惠券效果分析**(基于 `mall.md` 第2.6节) + - ❌ 优惠券效果分析(待实现) + - 优惠券发放统计 + - 优惠券使用率 + - 优惠券转化效果 + +10. **预测分析和建议**(基于 `mall.md` 第2.6节) + - ❌ 预测分析(待实现) + - 销售预测 + - 用户增长预测 + - 智能运营建议 + +### 3.2 个人中心功能模块(profile.uvue) + +- ✅ 用户信息展示 +- ✅ 数据分析偏好设置 +- ✅ 报表收藏管理 +- ✅ 导出历史记录 + +### 3.3 报表详情功能模块(report-detail.uvue) + +- ✅ 报表数据展示 +- ✅ 图表展示 +- ✅ 数据导出 +- ✅ 报表分享 + +--- + +## 四、基于 `mall.md` 的统计指标需求 + +### 4.1 运营指标(`mall.md` 第10.1节) + +根据项目需求文档,数据分析端需要统计以下**运营指标**: + +- **GMV(成交总额)** - 核心业务指标 +- **订单量和转化率** - 业务转化效率 +- **用户活跃度** - 用户参与度 +- **客单价** - 平均订单金额 +- **复购率** - 用户忠诚度指标 + +### 4.2 商家指标(`mall.md` 第10.1节) + +- **销售额和利润** - 商家经营状况 +- **商品销量排行** - 热销商品分析 +- **评价和服务质量** - 商家服务质量 +- **库存周转率** - 库存管理效率 + +### 4.3 配送指标(`mall.md` 第10.1节) + +- **配送时效** - 配送速度指标 +- **配送费用** - 成本控制 +- **配送员效率** - 人员效率分析 +- **客户满意度** - 服务质量 + +### 4.4 统计数据模型(`mall.md` 第10.2节) + +项目定义了 `daily_statistics` 表用于日常统计: + +```sql +CREATE TABLE daily_statistics ( + id UUID PRIMARY KEY DEFAULT gen_random_uuid(), + stat_date DATE NOT NULL, + merchant_id UUID REFERENCES merchants(id), + total_orders INTEGER DEFAULT 0, + total_amount DECIMAL(12,2) DEFAULT 0, + total_users INTEGER DEFAULT 0, + new_users INTEGER DEFAULT 0, + total_products INTEGER DEFAULT 0, + avg_order_amount DECIMAL(10,2) DEFAULT 0, + created_at TIMESTAMPTZ DEFAULT NOW(), + UNIQUE(stat_date, merchant_id) +); +``` + +**数据查询需求**: +- 按日期聚合统计数据 +- 按商家维度统计 +- 支持时间范围查询 +- 支持数据对比分析 + +--- + +## 五、页面实现优先级 + +### 5.1 高优先级(核心功能,基于 `mall.md` 第2.6节) + +1. **销售报表** (`sales-report`) - 核心业务分析 + - 对应需求:销售数据分析 + - 包含指标:GMV、订单量、转化率、客单价 + +2. **用户分析** (`user-analysis`) - 用户运营分析 + - 对应需求:用户行为分析 + - 包含指标:用户活跃度、复购率、新用户增长 + +3. **商品洞察** (`product-insights`) - 商品运营分析 + - 对应需求:商家表现分析(商品维度) + - 包含指标:商品销量排行、库存周转率 + +4. **配送效率分析** - 配送系统分析 + - 对应需求:配送效率分析 + - 包含指标:配送时效、配送费用、配送员效率、客户满意度 + +### 5.2 中优先级(增强功能) + +5. **优惠券效果分析** (`coupon-analysis`) - 营销效果分析 + - 对应需求:优惠券效果分析(`mall.md` 第2.6节) + - 包含:8种券类型分析、发放渠道效果、ROI分析 + +6. **市场趋势** (`market-trends`) - 市场分析 + - 对应需求:市场整体趋势分析 + +7. **数据分析详情** (`data-detail`) - 数据钻取 + - 支持所有报表页面的详细数据查看 + +8. **数据洞察详情** (`insight-detail`) - 智能分析 + - 对应需求:预测分析和建议(`mall.md` 第2.6节) + +### 5.3 低优先级(高级功能) + +9. **自定义报表** (`custom-report`) - 高级定制功能 + - 允许用户自定义报表配置 + +--- + +## 六、数据分析端核心功能(基于 `mall.md` 第2.6节) + +根据项目需求文档,数据分析端(Analytics Dashboard)的目标用户是**运营和分析师**,需要实现以下核心功能: + +### 6.1 实时数据大屏 ✅ +- **状态**: 已实现(首页 KPI 卡片) +- **包含**: GMV、订单数、在线用户、转化率 + +### 6.2 销售数据分析 ⚠️ +- **状态**: 部分实现(首页有核心趋势图) +- **待完善**: 需要独立的销售报表页面 +- **包含**: 销售趋势、GMV分析、订单分析、客单价分析 + +### 6.3 用户行为分析 ⚠️ +- **状态**: 部分实现(首页有用户结构分析) +- **待完善**: 需要独立的用户分析页面 +- **包含**: 用户增长、活跃度、留存率、行为路径 + +### 6.4 商家表现分析 ⚠️ +- **状态**: 部分实现(首页有商家排行) +- **待完善**: 需要独立的商家分析页面 +- **包含**: 销售额、利润、商品排行、服务质量、库存周转率 + +### 6.5 配送效率分析 ⚠️ +- **状态**: 部分实现(首页有配送效率图表占位) +- **待完善**: 需要完整的配送效率分析 +- **包含**: 配送时效、配送费用、配送员效率、客户满意度 + +### 6.6 优惠券效果分析 ❌ +- **状态**: 未实现 +- **优先级**: 中优先级 +- **包含**: 8种券类型效果、发放渠道效果、使用率、ROI分析 + +### 6.7 预测分析和建议 ❌ +- **状态**: 未实现 +- **优先级**: 中优先级 +- **包含**: 销售预测、用户增长预测、智能运营建议、异常检测 + +--- + +## 七、页面依赖关系 + +``` +index (首页) +├── sales-report (销售报表) +│ └── report-detail (报表详情) +├── user-analysis (用户分析) +│ └── data-detail (数据分析详情) +├── product-insights (商品洞察) +│ └── data-detail (数据分析详情) +├── coupon-analysis (优惠券效果分析) [新增,基于 mall.md] +│ └── report-detail (报表详情) +├── market-trends (市场趋势) +│ └── insight-detail (数据洞察详情) +└── custom-report (自定义报表) + └── report-detail (报表详情) + +profile (个人中心) +└── 所有报表页面的收藏/历史记录入口 +``` + +--- + +## 八、组件复用分析 + +### 6.1 已实现的组件 + +- ✅ `AnalyticsComboChart.uvue` - 组合图表(柱状+折线) +- ✅ `AnalyticsDonutChart.uvue` - 环形图 +- ✅ `AnalyticsBarMini.uvue` - 迷你柱状图 +- ✅ `ChartCard.uvue` - 图表卡片容器 +- ✅ `KpiCard.uvue` - KPI 指标卡片 +- ✅ `PeriodTabs.uvue` - 时间维度切换 + +### 6.2 需要新增的组件 + +- ❌ `SalesTrendChart.uvue` - 销售趋势图 +- ❌ `UserGrowthChart.uvue` - 用户增长图 +- ❌ `ProductRankingChart.uvue` - 商品排行图 +- ❌ `RegionDistributionChart.uvue` - 地域分布图 +- ❌ `CustomReportBuilder.uvue` - 自定义报表构建器 +- ❌ `DataTable.uvue` - 数据表格组件 +- ❌ `ExportDialog.uvue` - 导出对话框 + +--- + +## 九、数据接口需求 + +### 7.1 销售报表接口 + +- 销售趋势数据(按时间维度) +- 销售统计数据(GMV、订单数、客单价) +- 商品销售排行 +- 商家销售排行 +- 销售地域分布 + +### 7.2 用户分析接口 + +- 用户增长趋势 +- 用户活跃度数据 +- 用户留存率数据 +- 用户画像数据 +- 用户行为路径数据 + +### 7.3 商品洞察接口 + +- 商品销售数据 +- 商品分类数据 +- 热销商品数据 +- 商品库存数据 +- 商品价格趋势 + +### 7.4 市场趋势接口 + +- 市场整体趋势 +- 行业对比数据 +- 季节性趋势数据 +- 价格趋势数据 + +### 7.5 优惠券效果分析接口(基于 `mall.md` 第4节) + +- 优惠券发放统计(按类型、渠道) +- 优惠券使用率数据 +- 优惠券转化效果(GMV提升、订单增长) +- 优惠券ROI数据 +- 优惠券到期提醒统计 +- 优惠券使用趋势 + +### 7.6 配送效率分析接口(基于 `mall.md` 第6节) + +- 配送时效统计(平均配送时间、准时率) +- 配送费用统计(总费用、平均费用) +- 配送员效率数据(订单数、评分) +- 客户满意度数据(评价、投诉) + +### 7.7 预测分析接口(基于 `mall.md` 第2.6节) + +- 销售预测数据 +- 用户增长预测 +- 库存预测 +- 异常检测数据 +- 智能建议数据 + +### 7.8 自定义报表接口 + +- 报表模板列表 +- 报表创建/更新 +- 报表数据查询 +- 报表保存/分享 + +### 7.9 日常统计数据接口(基于 `mall.md` 第10.2节) + +- 按日期查询统计数据 +- 按商家维度统计 +- 时间范围聚合查询 +- 数据对比分析 + +--- + +## 十、实现建议 + +### 8.1 技术实现 + +1. **统一使用 Supabase 查询** + - 所有数据查询通过 `@/components/supadb/aksupainstance.uts` + - 使用 RLS (Row Level Security) 控制数据权限 + +2. **图表组件统一** + - 使用 `@/uni_modules/charts/EChartsView.vue` + - 封装统一的图表配置 + +3. **响应式设计** + - 使用 `flex-direction: row !important` 避免全局样式影响 + - 使用媒体查询实现响应式布局 + +### 8.2 开发顺序建议 + +1. **第一阶段**:完善首页功能 + - 完善配送效率图表 + - 优化数据加载性能 + +2. **第二阶段**:实现核心报表页面 + - 销售报表 + - 用户分析 + - 商品洞察 + +3. **第三阶段**:实现增强功能 + - 市场趋势 + - 数据分析详情 + - 数据洞察详情 + +4. **第四阶段**:实现高级功能 + - 自定义报表 + +### 8.3 代码规范 + +1. **文件命名** + - 页面文件:`*.uvue` + - 组件文件:`*.uvue` + - 样式统一使用 `px` 单位(避免 rpx + CSS var 问题) + +2. **代码结构** + ```vue + + + + + + ``` + +--- + +## 十一、总结 + +### 11.1 页面统计 + +- **已实现(完整功能)**: 3 个页面 + - `index.uvue` - 数据分析中心首页 ✅ + - `profile.uvue` - 数据分析个人中心 ✅ + - `report-detail.uvue` - 报表详情页 ✅ + +- **已创建骨架(待实现功能)**: 9 个页面 + - `sales-report.uvue` - 销售报表 ⚠️ + - `user-analysis.uvue` - 用户分析 ⚠️ + - `product-insights.uvue` - 商品洞察 ⚠️ + - `delivery-analysis.uvue` - 配送效率分析 ⚠️ + - `coupon-analysis.uvue` - 优惠券效果分析 ⚠️ + - `market-trends.uvue` - 市场趋势 ⚠️ + - `insight-detail.uvue` - 数据洞察详情 ⚠️ + - `data-detail.uvue` - 数据分析详情 ⚠️ + - `custom-report.uvue` - 自定义报表 ⚠️ + +- **总计**: 12 个页面 + +### 11.2 完成度(基于 `mall.md` 需求) + +- **实时数据大屏**: 90% ✅(首页已实现) +- **销售数据分析**: 50% ⚠️(页面骨架已创建,待实现数据查询) +- **用户行为分析**: 50% ⚠️(页面骨架已创建,待实现数据查询) +- **商家表现分析**: 50% ⚠️(商品洞察页面骨架已创建,待实现数据查询) +- **配送效率分析**: 50% ⚠️(页面骨架已创建,待实现数据查询) +- **优惠券效果分析**: 50% ⚠️(页面骨架已创建,待实现数据查询) +- **预测分析和建议**: 50% ⚠️(数据洞察详情页面骨架已创建,待实现预测算法) + +### 11.3 页面骨架创建状态 + +**✅ 已完成页面骨架创建(2026-01-23)**: + +所有9个待实现页面的骨架已创建完成,包含: + +1. **统一的页面结构** + - 顶部栏(菜单图标 + 标题 + 操作按钮) + - 时间维度筛选(7天/30天/90天/1年) + - KPI 指标卡片(响应式布局) + - 图表展示区域 + - 数据列表/排行 + - 统一的样式规范 + +2. **技术实现框架** + - 使用 `flex-direction: row !important` 避免全局样式影响 + - 响应式设计(宽屏/窄屏适配) + - 统一的组件导入(Supabase、EChartsView) + - 完整的类型定义(TypeScript/UTS) + - 方法框架(数据加载、图表构建、导出等) + +3. **待实现功能(标记为 TODO)** + - 数据查询逻辑(Supabase 查询) + - 图表配置构建 + - 数据导出功能 + - 数据钻取逻辑 + +### 11.4 下一步行动(按优先级) + +**第一阶段(核心功能 - 数据查询实现)**: +1. ✅ 完善首页的配送效率图表 +2. ⚠️ 实现销售报表页面数据查询(GMV、订单量、转化率、客单价) +3. ⚠️ 实现用户分析页面数据查询(用户增长、活跃度、留存率、复购率) +4. ⚠️ 实现商品洞察页面数据查询(商品销量、库存周转率) + +**第二阶段(增强功能 - 数据查询实现)**: +5. ⚠️ 实现配送效率分析页面数据查询(配送时效、费用、效率、满意度) +6. ⚠️ 实现优惠券效果分析页面数据查询(8种券类型、发放渠道、ROI) +7. ⚠️ 实现市场趋势页面数据查询 +8. ⚠️ 实现数据洞察详情页面(预测分析算法、智能建议逻辑) + +**第三阶段(高级功能 - 完整实现)**: +9. ⚠️ 实现自定义报表页面(报表创建、编辑、保存逻辑) +10. ⚠️ 实现数据分析详情页面(数据钻取、筛选、排序逻辑) + +--- + +--- + +## 十二、参考文档 + +- **项目需求文档**: `pages/mall/mall.md` + - 第2.6节:数据分析端功能需求 + - 第4节:优惠券系统详细设计 + - 第6节:配送系统详细设计 + - 第10节:数据统计分析(统计指标、数据模型) + +- **UI设计文档**: `docs/ANALYTICS_UI_DESIGN.md` +- **页面配置**: `pages/mall/pages-config.json` + +--- + +--- + +## 十三、页面骨架创建记录 + +### 13.1 骨架创建完成时间 + +**创建日期**: 2026-01-23 + +### 13.2 已创建的页面骨架清单 + +| 页面文件 | 页面标题 | 骨架状态 | 功能框架 | 数据查询 | 图表配置 | +| ------------------------ | -------------- | -------- | -------- | -------- | -------- | +| `sales-report.uvue` | 销售报表 | ✅ 已创建 | ✅ 完整 | ⚠️ 待实现 | ⚠️ 待实现 | +| `user-analysis.uvue` | 用户分析 | ✅ 已创建 | ✅ 完整 | ⚠️ 待实现 | ⚠️ 待实现 | +| `product-insights.uvue` | 商品洞察 | ✅ 已创建 | ✅ 完整 | ⚠️ 待实现 | ⚠️ 待实现 | +| `delivery-analysis.uvue` | 配送效率分析 | ✅ 已创建 | ✅ 完整 | ⚠️ 待实现 | ⚠️ 待实现 | +| `coupon-analysis.uvue` | 优惠券效果分析 | ✅ 已创建 | ✅ 完整 | ⚠️ 待实现 | ⚠️ 待实现 | +| `market-trends.uvue` | 市场趋势 | ✅ 已创建 | ✅ 完整 | ⚠️ 待实现 | ⚠️ 待实现 | +| `insight-detail.uvue` | 数据洞察详情 | ✅ 已创建 | ✅ 完整 | ⚠️ 待实现 | ⚠️ 待实现 | +| `data-detail.uvue` | 数据分析详情 | ✅ 已创建 | ✅ 完整 | ⚠️ 待实现 | ⚠️ 待实现 | +| `custom-report.uvue` | 自定义报表 | ✅ 已创建 | ✅ 完整 | ⚠️ 待实现 | ⚠️ 待实现 | + +### 13.3 骨架包含的核心功能 + +每个页面骨架都包含以下标准功能模块: + +1. **顶部栏(Topbar)** + - 菜单图标(☰) + - 页面标题和更新时间 + - 刷新/导出按钮 + - 更多操作菜单(响应式) + +2. **时间维度筛选(Tabs)** + - 7天/30天/90天/1年切换 + - 激活状态样式 + - 点击切换数据 + +3. **KPI 指标卡片(KPI Grid)** + - 2列/4列响应式布局 + - 指标数值显示 + - 增长率对比 + - 格式化显示(金额、百分比) + +4. **图表展示区域(Chart Cards)** + - 图表容器(EChartsView) + - 图表标题和描述 + - 统一的图表高度(360px) + +5. **数据列表/排行(Rank Lists)** + - 排行序号显示 + - 数据项信息 + - 增长率标签(正负颜色区分) + +6. **数据表格(Data Tables)**(部分页面) + - 表头(支持排序) + - 表格数据行 + - 数据格式化 + +7. **筛选器(Filters)**(部分页面) + - 时间范围选择 + - 数据维度选择 + - 对比模式切换 + +### 13.4 技术实现规范 + +所有页面骨架遵循以下技术规范: + +1. **样式规范** + - 使用 `flex-direction: row !important` 强制横排 + - 统一使用 `px` 单位(避免 rpx + CSS var 问题) + - 响应式断点:960px + - 统一的颜色系统(#111、#f3f4f6、rgba(0,0,0,0.06) 等) + +2. **组件导入** + - `@/components/supadb/aksupainstance.uts` - Supabase 查询 + - `@/uni_modules/charts/EChartsView.vue` - 图表组件 + - `@/components/analytics/AnalyticsComboChart.uvue` - 组合图表(部分页面) + +3. **类型定义** + - 使用 UTS 类型系统 + - 定义数据接口类型 + - 定义配置项类型 + +4. **方法框架** + - `loadXxxData()` - 数据加载方法(待实现) + - `buildChartOptions()` - 图表配置构建(待实现) + - `refreshData()` - 刷新数据 + - `exportReport()` - 导出报表 + - `formatInt()` / `formatMoney()` / `formatPct()` - 数据格式化 + +### 13.5 待实现功能清单 + +每个页面需要实现以下核心功能: + +#### 数据查询(Supabase) +- [ ] 根据时间维度查询数据 +- [ ] 聚合计算(SUM、COUNT、AVG) +- [ ] 数据对比(同比、环比) +- [ ] 数据筛选(按商家、分类、地域等) + +#### 图表配置(ECharts) +- [ ] 构建图表 option 配置 +- [ ] 数据格式化(时间轴、数值格式化) +- [ ] 图表样式配置(颜色、字体、间距) +- [ ] 交互配置(tooltip、legend、zoom) + +#### 数据导出 +- [ ] Excel 导出 +- [ ] PDF 导出 +- [ ] 图片导出(图表截图) +- [ ] CSV 导出(数据表格) + +#### 高级功能 +- [ ] 数据钻取(点击数据项查看详情) +- [ ] 数据对比(多时间段对比) +- [ ] 预测分析(算法实现) +- [ ] 智能建议(规则引擎) + +--- + +**文档版本**: v3.0 +**状态**: ✅ 页面骨架已完成,📝 数据查询和图表配置待实现 +**最后更新**: 2026-01-23(页面骨架创建完成) diff --git a/docs/ANALYTICS_UI_DESIGN.md b/pages/mall/analytics/docs/ANALYTICS_UI_DESIGN.md similarity index 100% rename from docs/ANALYTICS_UI_DESIGN.md rename to pages/mall/analytics/docs/ANALYTICS_UI_DESIGN.md diff --git a/pages/mall/analytics/docs/IMPLEMENTATION_STATUS.md b/pages/mall/analytics/docs/IMPLEMENTATION_STATUS.md new file mode 100644 index 00000000..6e80c823 --- /dev/null +++ b/pages/mall/analytics/docs/IMPLEMENTATION_STATUS.md @@ -0,0 +1,269 @@ +# 数据分析模块实现进度文档 + +## 📋 文档说明 + +本文档记录数据分析模块的实现进度、已知问题、bug修复情况和技术债务。 + +**文档位置**: `pages/mall/analytics/docs/IMPLEMENTATION_STATUS.md` +**最后更新**: 2026-01-23 + +--- + +## ✅ 页面实现状态 + +### 1. 核心页面(已完成) + +| 页面路径 | 文件 | 状态 | 功能完成度 | 备注 | +| ------------------------------------- | -------------------- | -------- | ---------- | ------------------------------- | +| `/pages/mall/analytics/index` | `index.uvue` | ✅ 已实现 | 90% | 主仪表盘,KPI卡片、图表展示完成 | +| `/pages/mall/analytics/profile` | `profile.uvue` | ✅ 已实现 | 85% | 个人中心页面 | +| `/pages/mall/analytics/report-detail` | `report-detail.uvue` | ✅ 已实现 | 80% | 报表详情页 | + +### 2. 分析页面(已完成) + +| 页面路径 | 文件 | 状态 | 功能完成度 | 备注 | +| ----------------------------------------- | ------------------------ | -------- | ---------- | ---------------------------------- | +| `/pages/mall/analytics/sales-report` | `sales-report.uvue` | ✅ 已实现 | 85% | 销售报表,包含趋势、排行、地域分布 | +| `/pages/mall/analytics/user-analysis` | `user-analysis.uvue` | ✅ 已实现 | 85% | 用户分析,包含增长、活跃度、留存 | +| `/pages/mall/analytics/product-insights` | `product-insights.uvue` | ✅ 已实现 | 80% | 商品洞察 | +| `/pages/mall/analytics/delivery-analysis` | `delivery-analysis.uvue` | ✅ 已实现 | 80% | 配送效率分析 | +| `/pages/mall/analytics/coupon-analysis` | `coupon-analysis.uvue` | ✅ 已实现 | 80% | 优惠券效果分析 | +| `/pages/mall/analytics/market-trends` | `market-trends.uvue` | ✅ 已实现 | 75% | 市场趋势分析 | +| `/pages/mall/analytics/custom-report` | `custom-report.uvue` | ✅ 已实现 | 70% | 自定义报表创建/编辑 | + +### 3. 详情页面(已完成) + +| 页面路径 | 文件 | 状态 | 功能完成度 | 备注 | +| -------------------------------------- | --------------------- | -------- | ---------- | -------------- | +| `/pages/mall/analytics/data-detail` | `data-detail.uvue` | ✅ 已实现 | 75% | 数据分析详情页 | +| `/pages/mall/analytics/insight-detail` | `insight-detail.uvue` | ✅ 已实现 | 70% | 数据洞察详情页 | + +--- + +## 🐛 已知问题与修复状态 + +### 1. 关键错误(Error - 需修复) + +#### 1.1 Object Literal Type 错误 +**位置**: +- `pages/mall/analytics/index.uvue:242` +- `pages/mall/analytics/sales-report.uvue:198` +- `pages/mall/analytics/user-analysis.uvue:180` +- `pages/mall/analytics/delivery-analysis.uvue:182` + +**错误信息**: `direct declaration of Object Literal Type is not supported` + +**原因**: uni-app x (UTS) 不支持在 `watch` 中直接使用对象字面量类型 + +**修复方案**: +```typescript +// ❌ 错误写法 +watch: { + trafficSources: { + handler() { ... }, + deep: true + } +} + +// ✅ 正确写法(使用函数形式) +watch: { + trafficSources(newVal: Array, oldVal: Array) { + this.buildChartOptions() + } +} +``` + +**状态**: ⚠️ 待修复 + +--- + +#### 1.2 组件事件绑定错误 +**位置**: +- `pages/mall/analytics/data-detail.uvue:8` +- `pages/mall/analytics/custom-report.uvue:8` +- `pages/mall/analytics/insight-detail.uvue:8` + +**错误信息**: `组件AnalyticsSidebarMenu不支持事件: 'update:visible'` + +**原因**: uni-app x 不支持 Vue 3 的 `update:visible` 双向绑定语法 + +**修复方案**: +```vue + + + + + +``` + +**状态**: ✅ 已修复(2026-01-23)- 将所有页面的 `@update:visible` 改为 `@visible-change` + +--- + +#### 1.3 view 组件不支持 title 属性 +**位置**: +- `pages/mall/analytics/index.uvue:41,44,47,51,54,61` + +**错误信息**: `组件view不支持属性: 'title'` + +**原因**: `view` 组件不支持 `title` 属性,应使用 `text` 组件或移除该属性 + +**修复方案**: +```vue + +... + + + + xxx + +``` + +**状态**: ⚠️ 待修复 + +--- + +### 2. 警告(Warning - 可忽略或后续优化) + +#### 2.1 CSS 单位警告 +**问题**: 使用了 `px`, `vh`, `%`, `calc()` 等 uni-app x 不支持的 CSS 单位/函数 + +**影响范围**: 所有页面文件 + +**说明**: +- uni-app x 主要支持 `rpx` 单位 +- `px` 在 H5 平台可用,但会触发警告 +- `vh`, `calc()` 等需要转换为 `rpx` 或使用条件编译 + +**处理建议**: +- 使用 `/* #ifdef H5 */` 条件编译包裹桌面端样式 +- 移动端统一使用 `rpx` + +**状态**: 📝 已记录,不影响功能 + +--- + +#### 2.2 CSS 伪类选择器警告 +**问题**: 使用了 `:hover`, `:active` 等伪类选择器 + +**影响范围**: 多个页面 + +**说明**: uni-app x 在某些平台不支持 CSS 伪类,需要使用 JavaScript 处理交互状态 + +**处理建议**: 使用 `:class` 动态绑定替代伪类 + +**状态**: 📝 已记录,不影响功能 + +--- + +#### 2.3 未使用的 CSS 选择器 +**问题**: 定义了但未使用的 CSS 类(如 `.active`, `.btn-hidden`) + +**影响范围**: 多个页面 + +**说明**: 可能是预留的样式或历史遗留代码 + +**处理建议**: 清理未使用的样式,或添加注释说明用途 + +**状态**: 📝 已记录,不影响功能 + +--- + +## 📊 组件实现状态 + +### 核心组件 + +| 组件路径 | 状态 | 功能完成度 | 备注 | +| ------------------------------------------------ | -------- | ---------- | ---------------------------- | +| `components/analytics/AnalyticsTopBar.uvue` | ✅ 已完成 | 95% | 顶部导航栏 | +| `components/analytics/AnalyticsSidebarMenu.uvue` | ✅ 已完成 | 90% | 侧边栏菜单(需修复事件绑定) | +| `components/analytics/KpiCard.uvue` | ✅ 已完成 | 100% | KPI 卡片组件 | +| `components/analytics/PeriodTabs.uvue` | ✅ 已完成 | 100% | 时间维度切换组件 | +| `components/analytics/ChartCard.uvue` | ✅ 已完成 | 100% | 图表卡片容器 | + +### 图表组件 + +| 组件路径 | 状态 | 功能完成度 | 备注 | +| ----------------------------------------------- | -------- | ---------- | ------------------ | +| `components/analytics/charts/ComboBarLine.uvue` | ✅ 已完成 | 100% | 柱线组合图 | +| `components/analytics/charts/AreaLine.uvue` | ✅ 已完成 | 100% | 面积折线图 | +| `components/analytics/charts/DonutPie.uvue` | ✅ 已完成 | 100% | 环形饼图 | +| `components/analytics/AnalyticsComboChart.uvue` | ✅ 已完成 | 100% | 组合图表(自定义) | +| `components/analytics/AnalyticsDonutChart.uvue` | ✅ 已完成 | 100% | 环形图(自定义) | +| `components/analytics/AnalyticsBarMini.uvue` | ✅ 已完成 | 100% | 迷你条形图 | + +--- + +## 🔧 技术债务 + +### 1. 数据获取 +- [ ] 所有页面目前使用模拟数据(`mockTrend()`, `mockData()`) +- [ ] 需要接入 Supabase 真实数据查询 +- [ ] 需要实现数据缓存和刷新机制 + +### 2. 性能优化 +- [ ] ECharts 图表渲染性能优化(大数据量) +- [ ] 页面滚动性能优化 +- [ ] 图片懒加载 + +### 3. 响应式设计 +- [ ] 完善移动端适配(目前主要针对桌面端) +- [ ] 优化平板端显示效果 +- [ ] 统一响应式断点 + +### 4. 错误处理 +- [ ] 统一错误提示机制 +- [ ] 网络请求失败重试 +- [ ] 数据加载失败降级方案 + +### 5. 用户体验 +- [ ] 加载状态提示(骨架屏) +- [ ] 空数据状态展示 +- [ ] 操作反馈优化 + +--- + +## 📝 修复计划 + +### 优先级 P0(阻塞功能) +1. ✅ 修复 Object Literal Type 错误(watch 语法)- 已完成 +2. ✅ 修复组件事件绑定错误(update:visible → visible-change)- 已完成 +3. ⚠️ 修复 view 组件 title 属性错误 - 待确认(可能是 lint 缓存问题) + +### 优先级 P1(影响体验) +1. ⏳ 接入真实数据源(Supabase) +2. ⏳ 完善错误处理和加载状态 +3. ⏳ 优化移动端响应式布局 + +### 优先级 P2(优化改进) +1. ⏳ 清理未使用的 CSS 样式 +2. ⏳ 统一 CSS 单位(rpx) +3. ⏳ 添加单元测试 + +--- + +## 📚 相关文档 + +- [页面分析文档](../ANALYTICS_PAGES_ANALYSIS.md) - 页面需求分析 +- [UI 设计文档](../../../docs/ANALYTICS_UI_DESIGN.md) - UI 设计规范 +- [数据库设计文档](../../../docs/ANALYTICS_DB_DESIGN.md) - 数据库表结构 +- [测试文档](../test/README.md) - 测试用例和 SQL 脚本 + +--- + +## 🔄 更新日志 + +### 2026-01-23 +- ✅ 创建实现进度文档 +- ✅ 记录所有页面实现状态 +- ✅ 列出已知问题和修复计划 +- ✅ 修复:Object Literal Type 错误(watch 语法改为函数形式) +- ✅ 修复:组件事件绑定错误(所有页面的 `@update:visible` → `@visible-change`) +- ✅ 修复:AnalyticsSidebarMenu 组件事件定义(`emits` 更新为 `visible-change`) +- ⚠️ 待确认:view 组件 title 属性错误(可能是 lint 缓存,需重新检查) diff --git a/pages/mall/analytics/docs/README.md b/pages/mall/analytics/docs/README.md new file mode 100644 index 00000000..5cebffa6 --- /dev/null +++ b/pages/mall/analytics/docs/README.md @@ -0,0 +1,138 @@ +# 数据分析模块文档目录 + +> 本目录包含数据分析模块的所有相关文档。 + +## 📁 文档结构 + +``` +pages/mall/analytics/docs/ +├── README.md # 本文件(文档索引) +├── ANALYTICS_DB_DESIGN.md # 数据库设计文档 +├── ANALYTICS_DB_QUICK_START.md # 数据库快速开始指南 +├── ANALYTICS_PAGES_ANALYSIS.md # 页面分析文档 +├── ANALYTICS_UI_DESIGN.md # UI 设计文档 +└── IMPLEMENTATION_STATUS.md # 实现状态文档 +``` + +## 📚 文档说明 + +### 1. ANALYTICS_DB_DESIGN.md + +**数据库设计文档** - 完整的数据表结构、字段说明、索引、RLS策略、RPC函数设计。 + +**内容包含:** +- 7个 Analytics 专用表的详细字段定义 +- 索引建议 +- RLS(Row Level Security)权限策略 +- RPC 函数设计(实时KPI、趋势数据) +- 使用说明和前端调用示例 + +**适用场景:** +- 数据库架构设计 +- 表结构参考 +- 权限策略配置 +- RPC 函数开发 + +### 2. ANALYTICS_DB_QUICK_START.md + +**快速开始指南** - 数据库部署和使用的快速参考。 + +**内容包含:** +- 文件位置说明 +- 快速部署步骤(3步) +- 创建的表列表 +- RPC 函数使用说明 +- 测试数据说明 +- 前端使用示例 +- 验证部署方法 +- 问题排查 + +**适用场景:** +- 首次部署数据库 +- 快速查找使用方法 +- 问题排查参考 + +### 3. ANALYTICS_PAGES_ANALYSIS.md + +**页面分析文档** - 数据分析模块所有页面的功能需求和分析。 + +**内容包含:** +- 已实现的页面清单 +- 需要实现的页面清单 +- 页面功能模块分析 +- 统计指标需求 +- 页面依赖关系 +- 组件复用分析 +- 数据接口需求 + +**适用场景:** +- 页面开发规划 +- 功能需求参考 +- 接口设计参考 + +### 4. ANALYTICS_UI_DESIGN.md + +**UI 设计文档** - 数据分析页面的 UI 设计规范和实现说明。 + +**内容包含:** +- 页面访问 URL +- UI 设计规范 +- 组件使用说明 +- 响应式设计 +- 交互设计 + +**适用场景:** +- UI 开发参考 +- 组件使用指南 +- 设计规范参考 + +### 5. IMPLEMENTATION_STATUS.md + +**实现状态文档** - 记录各页面的实现进度和状态。 + +**内容包含:** +- 页面实现状态 +- 功能完成度 +- 待办事项 +- 问题记录 + +**适用场景:** +- 项目进度跟踪 +- 开发计划制定 + +## 🔗 相关资源 + +### SQL 脚本 + +所有 SQL 脚本位于:`pages/mall/analytics/test/` + +- `ANALYTICS_DB_SCHEMA.sql` - 完整的表结构、索引、RLS、RPC +- `ANALYTICS_TEST_SEED.sql` - 完整的测试数据 +- `01_create_tables.sql` - 分步:创建表结构 +- `02_insert_test_data.sql` - 分步:插入测试数据 +- `03_test_queries.sql` - 验证查询示例 +- `04_cleanup.sql` - 清理测试数据 + +### 测试文档 + +测试相关文档位于:`pages/mall/analytics/test/` + +- `README.md` - 测试数据说明和使用方法 +- `SQL_USAGE_GUIDE.md` - SQL 脚本执行详细指南 + +### 项目文档 + +- `docs/ANALYTICS_PAGES_ANALYSIS.md` - 页面分析文档 +- `docs/ANALYTICS_UI_DESIGN.md` - UI 设计文档 +- `pages/mall/mall.md` - 项目需求文档(第2.6节:数据分析端,第10节:数据统计分析) + +## 🚀 快速开始 + +1. **阅读设计文档**:`ANALYTICS_DB_DESIGN.md` +2. **执行部署**:参考 `ANALYTICS_DB_QUICK_START.md` +3. **插入测试数据**:使用 `pages/mall/analytics/test/` 中的 SQL 脚本 + +## 📝 文档更新记录 + +- **2026-01-23** - 创建文档目录和索引 +- **2026-01-23** - 添加数据库设计文档和快速开始指南 diff --git a/pages/mall/analytics/docs/URL_ACCESS.md b/pages/mall/analytics/docs/URL_ACCESS.md new file mode 100644 index 00000000..5c0dce56 --- /dev/null +++ b/pages/mall/analytics/docs/URL_ACCESS.md @@ -0,0 +1,182 @@ +# 数据分析模块 URL 访问文档 + +## 📋 文档说明 + +本文档提供数据分析模块所有页面的 URL 路径和访问方式,方便开发、测试和文档引用。 + +**文档位置**: `pages/mall/analytics/docs/URL_ACCESS.md` +**最后更新**: 2026-01-23 + +--- + +## 🗺️ 页面路由地图 + +### 1. 主页面 + +| 页面名称 | URL 路径 | 页面标题 | 配置位置 | +| ---------------- | ----------------------------- | ------------ | ------------------------------------------------ | +| 数据分析中心首页 | `/pages/mall/analytics/index` | 数据分析中心 | `subPackages` → `pages/mall/analytics` → `index` | + +### 2. 分析页面(子包) + +| 页面名称 | URL 路径 | 页面标题 | 配置位置 | +| -------------- | ----------------------------------------- | -------------- | ----------------------------------------------------------- | +| 销售报表 | `/pages/mall/analytics/sales-report` | 销售报表 | `subPackages` → `pages/mall/analytics` → `sales-report` | +| 用户分析 | `/pages/mall/analytics/user-analysis` | 用户分析 | `subPackages` → `pages/mall/analytics` → `user-analysis` | +| 商品洞察 | `/pages/mall/analytics/product-insights` | 商品洞察 | `subPackages` → `pages/mall/analytics` → `product-insights` | +| 市场趋势 | `/pages/mall/analytics/market-trends` | 市场趋势 | `subPackages` → `pages/mall/analytics` → `market-trends` | +| 自定义报表 | `/pages/mall/analytics/custom-report` | 自定义报表 | `subPackages` → `pages/mall/analytics` → `custom-report` | +| 优惠券效果分析 | `/pages/mall/analytics/coupon-analysis` | 优惠券效果分析 | ⚠️ 未在配置中 | +| 配送效率分析 | `/pages/mall/analytics/delivery-analysis` | 配送效率分析 | ⚠️ 未在配置中 | + +### 3. 详情页面(主包) + +| 页面名称 | URL 路径 | 页面标题 | 配置位置 | +| ------------ | -------------------------------------- | ------------ | ----------------------------------------------- | +| 报表详情 | `/pages/mall/analytics/report-detail` | 报表详情 | `pages` → `pages/mall/analytics/report-detail` | +| 数据分析详情 | `/pages/mall/analytics/data-detail` | 数据分析详情 | `pages` → `pages/mall/analytics/data-detail` | +| 数据洞察详情 | `/pages/mall/analytics/insight-detail` | 数据洞察详情 | `pages` → `pages/mall/analytics/insight-detail` | + +### 4. 其他页面 + +| 页面名称 | URL 路径 | 页面标题 | 配置位置 | +| ---------------- | ------------------------------- | ---------------- | ------------ | +| 数据分析个人中心 | `/pages/mall/analytics/profile` | 数据分析个人中心 | ⚠️ 未在配置中 | + +--- + +## 💻 代码中如何访问 + +### 1. 基本跳转(推荐) + +```typescript +// 方式一:使用 navigateTo(保留返回栈,可返回上一页) +uni.navigateTo({ + url: '/pages/mall/analytics/index', + success: () => { + console.log('跳转成功') + }, + fail: (err) => { + console.error('跳转失败:', err) + } +}) + +// 方式二:使用 redirectTo(替换当前页面,不保留返回栈) +uni.redirectTo({ + url: '/pages/mall/analytics/index' +}) + +// 方式三:使用 reLaunch(关闭所有页面,打开新页面) +uni.reLaunch({ + url: '/pages/mall/analytics/index' +}) +``` + +### 2. 带参数跳转 + +```typescript +// 跳转并传递查询参数 +uni.navigateTo({ + url: '/pages/mall/analytics/index?period=30d&refresh=true' +}) + +// 在目标页面接收参数(index.uvue 的 onLoad) +onLoad(options: any) { + const period = options.period || '7d' + const refresh = options.refresh === 'true' + // 使用参数... +} +``` + +### 3. 从其他模块跳转示例 + +```typescript +// 从管理后台跳转到数据分析中心 +const goToAnalytics = () => { + uni.navigateTo({ + url: '/pages/mall/analytics/index' + }) +} + +// 从商城首页跳转到销售报表 +const goToSalesReport = () => { + uni.navigateTo({ + url: '/pages/mall/analytics/sales-report' + }) +} + +// 从订单列表跳转到数据分析详情 +const goToDataDetail = (orderId: string) => { + uni.navigateTo({ + url: `/pages/mall/analytics/data-detail?id=${orderId}` + }) +} +``` + +### 4. 侧边栏菜单导航 + +所有数据分析页面都集成了 `AnalyticsSidebarMenu` 组件,可以通过侧边栏菜单快速导航: + +```typescript +// 侧边栏菜单会自动处理导航 +// 菜单项配置在 components/analytics/AnalyticsSidebarMenu.uvue 中 +const MENU_ITEMS = [ + { path: '/pages/mall/analytics/index', title: '数据分析中心', icon: '📊' }, + { path: '/pages/mall/analytics/sales-report', title: '销售报表', icon: '💰' }, + // ... +] +``` + +--- + +## ⚠️ 注意事项 + +### 1. 路由配置 + +- **子包页面**(`sales-report`, `user-analysis` 等)必须在 `subPackages` 中配置 +- **主包页面**(`report-detail`, `data-detail` 等)必须在主 `pages` 数组中配置 +- 未在配置中的页面无法正常访问 + +### 2. tabBar 限制 + +数据分析模块**不在** `tabBar` 配置中,因此: +- ✅ 可以使用 `uni.navigateTo()` +- ✅ 可以使用 `uni.redirectTo()` +- ✅ 可以使用 `uni.reLaunch()` +- ❌ **不能**使用 `uni.switchTab()`(仅用于 tabBar 页面) + +### 3. 导航栏样式 + +大部分数据分析页面使用**自定义导航栏**(`navigationStyle: "custom"`),需要: +- 使用 `AnalyticsTopBar` 组件作为顶部导航 +- 处理状态栏高度适配 +- 处理返回按钮逻辑 + +--- + +## 📱 平台兼容性 + +| 平台 | 支持状态 | 备注 | +| ---------- | ---------- | ------------------------ | +| H5 | ✅ 完全支持 | 推荐使用,响应式布局优化 | +| 微信小程序 | ✅ 支持 | 需注意页面路径长度限制 | +| App | ✅ 支持 | 需注意原生导航栏样式 | + +--- + +## 🔗 相关文档 + +- [实现进度文档](./IMPLEMENTATION_STATUS.md) - 页面实现状态和 bug 修复情况 +- [页面分析文档](../../../docs/ANALYTICS_PAGES_ANALYSIS.md) - 页面需求分析 +- [UI 设计文档](../../../docs/ANALYTICS_UI_DESIGN.md) - UI 设计规范 +- [数据库设计文档](../../../docs/ANALYTICS_DB_DESIGN.md) - 数据库表结构 + +--- + +## 🔄 更新日志 + +### 2026-01-23 +- ✅ 创建 URL 访问文档 +- ✅ 列出所有页面路径和配置状态 +- ✅ 提供代码访问示例 +- ✅ 记录注意事项和平台兼容性 diff --git a/pages/mall/analytics/index.uvue b/pages/mall/analytics/index.uvue index 2f0ce74e..3a4789df 100644 --- a/pages/mall/analytics/index.uvue +++ b/pages/mall/analytics/index.uvue @@ -1,41 +1,54 @@ diff --git a/pages/mall/analytics/insight-detail.uvue b/pages/mall/analytics/insight-detail.uvue new file mode 100644 index 00000000..8d93b6be --- /dev/null +++ b/pages/mall/analytics/insight-detail.uvue @@ -0,0 +1,659 @@ + + + + + diff --git a/pages/mall/analytics/market-trends.uvue b/pages/mall/analytics/market-trends.uvue new file mode 100644 index 00000000..a5d32cc9 --- /dev/null +++ b/pages/mall/analytics/market-trends.uvue @@ -0,0 +1,482 @@ + + + + + diff --git a/pages/mall/analytics/product-insights.uvue b/pages/mall/analytics/product-insights.uvue new file mode 100644 index 00000000..3c042504 --- /dev/null +++ b/pages/mall/analytics/product-insights.uvue @@ -0,0 +1,646 @@ + + + + + diff --git a/pages/mall/analytics/profile.uvue b/pages/mall/analytics/profile.uvue index f0da805e..65861c2c 100644 --- a/pages/mall/analytics/profile.uvue +++ b/pages/mall/analytics/profile.uvue @@ -1,231 +1,259 @@