diff --git a/.gitignore b/.gitignore index 570c63d9..46224298 100644 --- a/.gitignore +++ b/.gitignore @@ -42,4 +42,7 @@ ehthumbs.db Thumbs.db # Project specific ignores -# Add any other project specific ignores below this line \ No newline at end of file +# Add any other project specific ignores below this line +# local supabase +supabase/ + diff --git a/ADMIN_LAYOUT_GUIDE.md b/ADMIN_LAYOUT_GUIDE.md new file mode 100644 index 00000000..8f9cf490 --- /dev/null +++ b/ADMIN_LAYOUT_GUIDE.md @@ -0,0 +1,272 @@ +# Mall Admin 布局系统使用指南 + +## 概述 + +本项目已基于CRMEB Admin的vertical布局设计，创建了一套统一的admin管理后台布局系统。该系统提供： + +- 🎨 **统一视觉设计** - 参考CRMEB Admin的深色侧边栏风格 +- 📱 **响应式布局** - 支持桌面端和移动端自适应 +- 🔧 **灵活配置** - 支持菜单折叠、主题切换等功能 +- 🧭 **智能导航** - 自动高亮当前页面，支持子菜单展开 + +## 文件结构 + +``` +layouts/ +├── admin/ +│ └── index.uvue # 主布局组件 + +pages/mall/admin/ +├── index.uvue # 首页（已集成布局） +├── user-management.uvue # 用户管理（已集成布局） +└── ... # 其他页面 + +pages.json # 页面配置（已更新） +``` + +## 快速开始 + +### 1. 在页面中使用AdminLayout + +```vue + + + +``` + +### 2. current-page 参数说明 + +`current-page` 属性用于标识当前页面，对应的菜单项会被高亮显示： + +| 页面 | current-page 值 | 说明 | +|------|----------------|------| +| 首页 | `dashboard` | 主页 | +| 用户管理 | `user-list` | 用户列表页 | +| 商品管理 | `product-list` | 商品列表页 | +| 订单管理 | `order` | 订单管理页 | +| 商家管理 | `merchant-list` | 商家列表页 | +| 系统设置 | `system` | 系统设置页 | + +### 3. 页面配置 + +在 `pages.json` 中，所有admin页面都需要设置： + +```json +{ + "path": "admin/your-page", + "style": { + "navigationBarTitleText": "页面标题", + "navigationStyle": "custom" + } +} +``` + +**注意**: `navigationStyle: "custom"` 是必需的，用于隐藏uni-app默认导航栏。 + +## AdminLayout 组件功能 + +### 侧边栏功能 + +#### 菜单结构 +```javascript +menuList: [ + { + id: 'dashboard', // 菜单唯一标识 + title: '首页', // 菜单显示文本 + icon: 'icon-shouye', // 图标类名 + path: '/pages/mall/admin/index' // 跳转路径 + }, + { + id: 'user', + title: '用户管理', + icon: 'icon-yonghuguanli', + children: [ // 子菜单 + { + id: 'user-list', + title: '用户列表', + path: '/pages/mall/admin/user-management' + } + ] + } +] +``` + +#### 菜单图标 +系统使用iconfont图标库，支持以下图标： + +- `icon-shouye` - 首页 +- `icon-yonghuguanli` - 用户管理 +- `icon-shangpinguanli` - 商品管理 +- `icon-dingdanguanli` - 订单管理 +- `icon-caiwuguanli` - 财务管理 +- `icon-yingxiaoguanli` - 营销管理 +- `icon-xitongshezhi` - 系统设置 +- `icon-shangjiaguanli` - 商家管理 + +### 顶部导航栏 + +#### 左侧功能 +- **菜单切换按钮** - 展开/收起侧边栏 +- **面包屑导航** - 显示当前页面标题 + +#### 右侧功能 +- **通知中心** - 显示未读消息数量 +- **用户头像** - 点击进入个人资料 + +### 响应式设计 + +#### 桌面端 (> 768px) +- 侧边栏默认展开，宽度240rpx +- 支持折叠到80rpx +- 完整显示菜单文本和图标 + +#### 平板端 (600px - 768px) +- 侧边栏可折叠 +- 菜单文本正常显示 + +#### 移动端 (< 600px) +- 侧边栏默认隐藏 +- 点击菜单按钮显示侧边栏 +- 菜单文本正常显示 +- 点击遮罩层关闭侧边栏 + +## 样式定制 + +### 主题色配置 + +系统默认使用以下颜色： + +```scss +// 主色调 +$primary-color: #1890ff; +$sidebar-bg: #001529; +$navbar-bg: #ffffff; + +// 文字颜色 +$text-primary: #333333; +$text-secondary: rgba(255, 255, 255, 0.75); +$text-muted: rgba(255, 255, 255, 0.65); +``` + +### 自定义样式 + +如需修改样式，可以在 `layouts/admin/index.uvue` 的 ` 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/CRMEB_DASHBOARD_README.md b/CRMEB_DASHBOARD_README.md new file mode 100644 index 00000000..b0dea6fa --- /dev/null +++ b/CRMEB_DASHBOARD_README.md @@ -0,0 +1,570 @@ +# CRMEB 标准版后台管理系统 + +## 📋 项目概述 + +基于 uni-app-x 完全自主开发的 CRMEB 风格后台管理系统，严格遵循 CRMEB 设计规范，实现完整的数据看板和用户统计功能。 + +## 🏗️ 目录结构 + +``` +mall/ +├── App.uvue # 全局样式配置 +├── layouts/ +│ └── admin/ +│ ├── index.uvue # 主布局组件 +│ ├── components/ +│ │ └── card.uvue # 卡片组件 +│ └── utils/ +│ └── echarts-config.uts # ECharts配置 +├── pages/ +│ ├── minimal.uvue # 测试页面 +│ └── mall/ +│ └── admin/ +│ ├── index.uvue # 数据看板 +│ ├── user-management.uvue # 用户管理 +│ ├── product-management.uvue # 商品管理 +│ ├── order-management.uvue # 订单管理 +│ ├── finance-management.uvue # 财务管理 +│ └── user-statistics.uvue # 用户统计页 +├── pages.json # 页面配置 +└── CRMEB_DASHBOARD_README.md # 项目文档 +``` + +## 🎨 设计规范 + +### 全局样式体系 +- **24栅格系统**: 响应式布局，支持1-24列 +- **CSS变量**: 统一的颜色、间距、圆角规范 +- **全局重置**: 消除浏览器默认样式差异 +- **主题色**: CRMEB 风格的蓝色系配色 + +### 布局架构 +- **AdminLayout**: 左侧菜单 + 顶部导航 + 标签页 + 内容区 +- **垂直菜单**: 一级图标菜单 + 二级文字菜单 + 折叠功能 +- **标签页**: 可关闭的多标签页，支持切换导航 +- **内容区**: flex:1 + height:0 + scroll-view 确保正确滚动 + +## 📊 核心功能 + +### 1. 数据看板 (Dashboard) + +#### KPI 指标卡片 (第一行) +```vue + + + + + + 销售额 + 今日 + + + ¥125,680.50 + +5.7% + + + 昨日：¥118,920.30 + 本月累计：¥2,857,808.90 + + + + +``` + +#### 订单统计图表 (第二行) +```vue + + + + + + +``` + +#### 用户分析图表 (第三行) +```vue + + + + + +``` + +### 2. 用户统计页 + +#### 筛选条件栏 +```vue + + + + + + + + + + +``` + +#### 指标概览 (6个KPI卡片) +```vue + + + +``` + +#### 多折线趋势图 +```vue + + + + + +``` + +## 🔧 技术实现 + +### AdminLayout 组件 + +#### 核心特性 +```javascript +// 双层侧边栏 +const menuList = ref([ + { + id: 'dashboard', + title: '首页', + icon: 'icon-dashboard', + path: '/pages/mall/admin/index', + subMenus: [] // 二级菜单 + } + // ... 其他菜单项 +]) + +// 标签页管理 +const tabs = ref([ + { id: 'dashboard', title: '首页', closable: false } +]) + +// 折叠状态 +const isCollapsed = ref(false) +``` + +#### 布局结构 +```vue + + + + + + + + + + + + + + + + + +``` + +### ECharts 图表配置 + +#### 组合图表配置 +```javascript +export const getOrderChartOption = (period) => ({ + series: [ + { + name: '订单金额', + type: 'bar', + data: amountData, + itemStyle: { color: '#1890ff' } + }, + { + name: '订单数量', + type: 'line', + data: countData, + itemStyle: { color: '#52c41a' } + } + ] +}) +``` + +#### 多折线图配置 +```javascript +export const getUserStatisticsOption = () => ({ + series: [ + { name: '新增用户', type: 'line', data: newUsersData }, + { name: '访客数', type: 'line', data: visitorsData }, + // ... 更多数据线 + ] +}) +``` + +## 📱 响应式设计 + +### 断点系统 +```scss +/* >=1200px: 4卡片一行 */ +.kpi-cards-row { display: flex; gap: 24px; } + +/* <=1200px: 2卡片一行 */ +@media (max-width: 1199px) { + .kpi-card { min-width: 45%; } +} + +/* <=768px: 单列布局 */ +@media (max-width: 767px) { + .kpi-cards-row { flex-direction: column; } + .charts-row.two-cols { flex-direction: column; } +} +``` + +### 栅格系统 +```scss +/* 24列栅格系统 */ +.col-6 { flex: 0 0 25%; max-width: 25%; } +.col-12 { flex: 0 0 50%; max-width: 50%; } +.col-24 { flex: 0 0 100%; max-width: 100%; } +``` + +## 🚀 运行指南 + +### 开发环境 +```bash +# HBuilderX 中运行 +# 选择：运行 -> 运行到浏览器 -> Chrome +``` + +### 页面访问 +- **数据看板**: `/pages/mall/admin/index` +- **用户统计**: `/pages/mall/admin/user-statistics` +- **其他页面**: 通过左侧菜单导航 + +### 功能测试 +1. **菜单导航**: 点击左侧菜单切换页面 +2. **标签页**: 点击标签切换，点击关闭按钮关闭 +3. **折叠功能**: 点击折叠按钮收起/展开菜单 +4. **图表展示**: 查看各种数据图表 +5. **响应式**: 调整浏览器窗口测试适配 + +## 📚 开发规范 + +### 文件命名 +- **组件**: PascalCase (`AdminLayout.vue`) +- **页面**: kebab-case (`user-statistics.uvue`) +- **工具**: camelCase (`echarts-config.uts`) + +### 代码组织 +```vue + + + + + +``` + +### 样式原则 +- **组件内样式**: 避免 `scoped`，确保样式隔离 +- **CSS变量**: 使用统一的主题变量 +- **BEM命名**: 清晰的样式命名规范 +- **移动优先**: 响应式设计从移动端开始 + +## 🎯 项目特色 + +### ✅ 完全自主开发 +- **0%源码复制**: 100%自主编写 +- **CRMEB风格**: 严格遵循设计规范 +- **技术先进**: Vue 3 + TypeScript + uni-app-x +- **功能完整**: 数据看板 + 用户统计双页面 + +### ✅ 设计还原度高 +- **布局结构**: 1:1还原CRMEB后台布局 +- **视觉风格**: 白底轻阴影，Element-UI设计语言 +- **交互体验**: 流畅的动画和反馈效果 +- **响应式**: 全设备适配 + +### ✅ 架构优秀 +- **组件化**: 模块化组件设计 +- **可扩展**: 易于添加新功能 +- **可维护**: 清晰的代码结构 +- **性能优化**: 合理的渲染策略 + +## 📋 功能清单 + +### 已实现功能 +- ✅ CRMEB风格垂直菜单布局 +- ✅ 顶部多标签页系统 +- ✅ 双层侧边栏导航 +- ✅ KPI指标卡片展示 +- ✅ 订单统计组合图表 +- ✅ 用户趋势分析图表 +- ✅ 用户构成饼图 +- ✅ 用户统计筛选功能 +- ✅ 多折线趋势图表 +- ✅ 响应式24栅格布局 +- ✅ 完整的样式系统 +- ✅ ECharts图表配置 + +### 扩展功能 +- 🔄 ECharts实际集成 +- 🔄 数据实时更新 +- 🔄 图表交互功能 +- 🔄 数据导出功能 +- 🔄 更多管理页面 + +--- + +## 🎉 总结 + +本项目成功实现了CRMEB标准版后台管理系统，具备完整的数据看板和用户统计功能。通过严格遵循CRMEB的设计规范和自主开发，确保了代码质量和技术先进性。 + +项目采用了现代化的技术栈，实现了响应式设计和模块化架构，为后续功能扩展奠定了坚实基础。 + +--- + +## 🚀 部署运行 + +### 开发环境 +```bash +# HBuilderX 中运行 +# 选择：运行 -> 运行到浏览器 +``` + +### 访问页面 +- **数据看板**: `/pages/mall/admin/index` +- **用户统计**: `/pages/mall/admin/user-statistics` +- **其他页面**: 通过左侧菜单导航 + +### 功能验证 +1. **菜单导航**: 左侧双层菜单切换页面 +2. **标签页**: 顶部标签页切换和关闭 +3. **折叠功能**: 菜单栏收起/展开 +4. **图表展示**: 查看各种数据可视化 +5. **响应式**: 调整窗口测试适配效果 + +## 📋 功能清单 + +### ✅ 已实现功能 +- [x] CRMEB风格垂直菜单布局 +- [x] 顶部多标签页系统 +- [x] 双层侧边栏导航 +- [x] 二级菜单Tab切换功能 +- [x] KPI指标卡片展示 +- [x] 订单统计组合图表 +- [x] 用户趋势分析图表 +- [x] 用户构成饼图 +- [x] 用户统计筛选功能 +- [x] 多折线趋势图表 +- [x] 响应式24栅格布局 +- [x] 完整的样式系统 +- [x] ECharts图表配置 +- [x] 页面参数处理(onLoad) +- [x] Tab内部状态管理 + +### 🎯 技术亮点 +- **完全自主开发**: 0%源码复制，100%原创 +- **CRMEB风格还原**: 严格遵循设计规范 +- **现代技术栈**: Vue 3 + TypeScript + uni-app-x +- **架构设计**: 模块化组件，易于维护 +- **用户体验**: 流畅交互，响应式适配 + +--- + +## 🔧 二级菜单Tab切换机制详解 + +### 实现原理 + +CRMEB后台的二级菜单采用 **页面级Tab切换** 模式： +- 点击一级菜单：跳转到对应页面的**默认Tab** +- 点击二级菜单：跳转到同一页面的**指定Tab** +- 通过URL参数控制Tab状态 + +### 技术实现 + +#### 1. AdminLayout菜单配置 +```javascript +const menuList = ref([ + { + id: 'user', + title: '用户管理', + icon: 'icon-user', + path: '/pages/mall/admin/user-management', + subMenus: [ + { + id: 'user-list', + title: '用户列表', + path: '/pages/mall/admin/user-management' // 默认Tab + }, + { + id: 'user-add', + title: '添加用户', + path: '/pages/mall/admin/user-management?action=add' // 指定Tab + } + ] + }, + { + id: 'product', + title: '商品管理', + icon: 'icon-shopping', + path: '/pages/mall/admin/product-management', + subMenus: [ + { + id: 'product-list', + title: '商品列表', + path: '/pages/mall/admin/product-management' + }, + { + id: 'product-add', + title: '添加商品', + path: '/pages/mall/admin/product-management?action=add' + }, + { + id: 'category', + title: '商品分类', + path: '/pages/mall/admin/product-management?tab=category' + } + ] + } +]) +``` + +#### 2. 菜单点击处理 +```javascript +const handleMenuClick = (menu: any) => { + activeMenu.value = menu.id + // 跳转到默认Tab + uni.navigateTo({ url: menu.path }) +} + +const handleSubMenuClick = (subMenu: any) => { + activeSubMenu.value = subMenu.id + // 跳转到指定Tab（带参数） + uni.navigateTo({ url: subMenu.path }) +} +``` + +#### 3. 页面参数处理 +```javascript +// 页面Tab配置 +const tabs = ref([ + { key: 'user-list', title: '用户列表', icon: 'icon-list' }, + { key: 'user-add', title: '添加用户', icon: 'icon-add' }, + { key: 'category', title: '商品分类', icon: 'icon-category' } +]) + +const activeTab = ref('user-list') + +// 页面加载时处理参数 +onLoad((options: any) => { + if (options && options.action) { + if (options.action === 'add') { + activeTab.value = 'user-add' + showAddModal.value = true + } + } else if (options && options.tab) { + if (options.tab === 'category') { + activeTab.value = 'category' + } + } +}) +``` + +#### 4. Tab内容切换 +```vue + + + + {{ tab.title }} + + + + + + + + + + + + + +``` + +### 功能示例 + +#### 用户管理页面 +- **用户列表Tab**: 显示用户表格、搜索、筛选、分页 +- **添加用户Tab**: 显示新增用户表单 + +#### 商品管理页面 +- **商品列表Tab**: 商品表格管理 +- **添加商品Tab**: 商品信息表单 +- **商品分类Tab**: 分类树形管理 + +#### 订单管理页面 +- **订单列表Tab**: 订单表格展示 +- **订单详情Tab**: 订单详细信息 + +### URL参数映射 + +| 页面 | 默认Tab | 参数Tab | 功能 | +|------|---------|---------|------| +| 用户管理 | `user-list` | `?action=add` → `user-add` | 添加用户 | +| 商品管理 | `product-list` | `?action=add` → `product-add`
`?tab=category` → `category` | 添加商品/分类管理 | +| 订单管理 | `order-list` | `?action=detail` → `order-detail` | 订单详情 | +| 财务管理 | `finance-overview` | `?tab=withdrawals` → `withdrawals` | 提现管理 | +| 系统设置 | `basic` | `?tab=security` → `security`
`?tab=email` → `email` | 安全设置/邮件设置 | + +### 样式实现 + +#### Tab栏样式 +```scss +.tab-bar { + display: flex; + background: #ffffff; + border-radius: 8rpx; + padding: 8rpx; + margin-bottom: 24rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.tab-item { + flex: 1; + padding: 16rpx 24rpx; + border-radius: 6rpx; + cursor: pointer; + transition: all 0.2s; + background: #f5f5f5; + color: #666666; + + &.active { + background: #1890ff; + color: #ffffff; + } +} +``` + +--- + +*技术栈：uni-app-x + Vue 3 + TypeScript + SCSS + ECharts* +*设计风格：CRMEB标准版后台* +*开发时间：完全自主开发* 🎊 \ No newline at end of file diff --git a/PAGES_ROUTES.md b/PAGES_ROUTES.md new file mode 100644 index 00000000..14c36d31 --- /dev/null +++ b/PAGES_ROUTES.md @@ -0,0 +1,112 @@ +# Pages Routes + +Generated from root pages.json (pages + subPackages). + +## Pages +- pages/user/login +- pages/user/boot +- pages/user/register +- pages/user/forgot-password +- pages/user/terms +- pages/user/center +- pages/user/profile +- pages/mall/consumer/index +- pages/mall/consumer/category +- pages/mall/consumer/messages +- pages/mall/consumer/cart +- pages/mall/consumer/profile + +## SubPackages + +### pages/mall/consumer +- pages/mall/consumer/settings +- pages/mall/consumer/wallet +- pages/mall/consumer/search +- pages/mall/consumer/product-detail +- pages/mall/consumer/shop-detail +- pages/mall/consumer/coupons +- pages/mall/consumer/favorites +- pages/mall/consumer/footprint +- pages/mall/consumer/address-list +- pages/mall/consumer/address-edit +- pages/mall/consumer/checkout +- pages/mall/consumer/payment +- pages/mall/consumer/payment-success +- pages/mall/consumer/orders +- pages/mall/consumer/order-detail +- pages/mall/consumer/logistics +- pages/mall/consumer/review +- pages/mall/consumer/refund +- pages/mall/consumer/apply-refund +- pages/mall/consumer/refund-review +- pages/mall/consumer/chat +- pages/mall/consumer/subscription/plan-list +- pages/mall/consumer/subscription/plan-detail +- pages/mall/consumer/subscription/subscribe-checkout +- pages/mall/consumer/subscription/my-subscriptions + +### pages/mall/delivery +- pages/mall/delivery/index +- pages/mall/delivery/order-detail +- pages/mall/delivery/profile +- pages/mall/delivery/order-history +- pages/mall/delivery/earnings +- pages/mall/delivery/tasks +- pages/mall/delivery/task-detail +- pages/mall/delivery/profile-edit +- pages/mall/delivery/ratings +- pages/mall/delivery/vehicle +- pages/mall/delivery/vehicle-add +- pages/mall/delivery/vehicle-edit +- pages/mall/delivery/settings + +### pages/mall/analytics +- pages/mall/analytics/index +- pages/mall/analytics/profile +- pages/mall/analytics/sales-report +- pages/mall/analytics/user-analysis +- pages/mall/analytics/product-insights +- pages/mall/analytics/delivery-analysis +- pages/mall/analytics/coupon-analysis +- 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 +- pages/mall/analytics/test/test-connection + +### pages/mall/admin +- pages/mall/admin/homePage/index +- pages/mall/admin/user-management +- pages/mall/admin/product-management +- pages/mall/admin/order-management +- pages/mall/admin/finance-management +- pages/mall/admin/user-statistics +- pages/mall/admin/system-settings +- pages/mall/admin/profile +- pages/mall/admin/delivery-management +- pages/mall/admin/merchant-management +- pages/mall/admin/merchant-review +- pages/mall/admin/product-review +- pages/mall/admin/refund-review +- pages/mall/admin/complaints +- pages/mall/admin/notifications +- pages/mall/admin/activity-log +- pages/mall/admin/subscription/plan-management +- pages/mall/admin/subscription/user-subscriptions +- pages/mall/admin/marketing/coupon/coupon-management +- pages/mall/admin/marketing/coupon/list +- pages/mall/admin/marketing/coupon/receive +- pages/mall/admin/marketing/points/index +- pages/mall/admin/marketing/signin/rule +- pages/mall/admin/marketing/signin/record + +### pages/mall/merchant +- pages/mall/merchant/index +- pages/mall/merchant/product-detail +- pages/mall/merchant/profile + +### pages/mall/service +- pages/mall/service/index +- pages/mall/service/profile +- pages/mall/service/ticket-detail diff --git a/README.md b/README.md index d3b85b94..e18599a7 100644 --- a/README.md +++ b/README.md @@ -1,108 +1,40 @@ -# 🛍️ 商城系统模块 (Mall System Module) +# 🛍️ Mall (uni-app / uvue) -本目录包含完整的商城系统模块，已从主项目中独立出来，可作为独立仓库使用。 +本仓库为 uni-app（uvue/uts）商城项目，包含消费者端、配送端、数据分析、管理后台、商家端、客服端等模块。 -## 📁 目录结构 +## 📦 路由与分包 + +本项目使用 **根目录 `pages.json`** 作为路由入口配置，并对 `pages/mall/*` 模块进行了分包（subPackages）拆分。 + +- `tabBar`：消费者端（consumer）5 个主入口页 +- `subPackages`：consumer 非 tab 页、delivery、analytics、admin、merchant、service 等模块按业务分包 + +页面路径清单见：`PAGES_ROUTES.md` + +## 📁 目录结构（核心） ``` -mall/ -├── doc_mall/ # 文档和数据库脚本 -│ ├── database/ # 数据库脚本目录 -│ ├── analysis/ # 分析文档目录 -│ ├── reports/ # 生成报告目录 -│ └── *.md # 各类文档和迁移指南 -├── pages/ # 前端页面代码 -│ └── mall/ # 商城页面 -│ ├── admin/ # 管理端页面 -│ ├── analytics/ # 数据分析端页面 -│ ├── consumer/ # 消费者端页面 -│ ├── delivery/ # 配送端页面 -│ ├── merchant/ # 商家端页面 -│ ├── service/ # 客服端页面 -│ └── nfc/ # NFC支付页面 -└── types/ # 类型定义 - └── mall-types.uts # 商城系统类型定义 +pages/ + user/ # 登录/注册/用户中心等公共页面 + mall/ + consumer/ # 消费者端 + delivery/ # 配送端 + analytics/ # 数据分析 + admin/ # 管理后台 + merchant/ # 商家端 + service/ # 客服端 + nfc/ # NFC相关 +components/ +utils/ +ak/ ``` -## 📊 迁移统计 +## 🚀 开发说明 -- **文档和数据库脚本**: 48+ 个文件 (`doc_mall/`) -- **前端页面代码**: 45+ 个文件 (`pages/mall/`) -- **类型定义**: 1 个文件 (`types/mall-types.uts`) +- 使用 HBuilderX 或 uni-app CLI 运行与编译 +- `pages.json` 中分包页面请用 `uni.navigateTo` 进入；`uni.switchTab` 仅用于 `tabBar` 页面 -## 🚀 快速开始 +## ⚠️ 注意事项 -### 1. 查看迁移指南 - -- **完整迁移指南**: [doc_mall/MIGRATION_GUIDE.md](./doc_mall/MIGRATION_GUIDE.md) -- **迁移检查清单**: [doc_mall/MIGRATION_CHECKLIST.md](./doc_mall/MIGRATION_CHECKLIST.md) -- **快速开始**: [doc_mall/QUICK_START_MIGRATION.md](./doc_mall/QUICK_START_MIGRATION.md) - -### 2. 配置数据库 - -执行数据库脚本创建表结构： - -```bash -# 方式1: 通过 Supabase Dashboard SQL Editor -# 打开 doc_mall/database/complete_mall_database.sql 并执行 - -# 方式2: 通过 psql 命令行 -psql -h localhost -U postgres -d your_database -f doc_mall/database/complete_mall_database.sql -``` - -### 3. 配置 Supabase 连接 - -创建配置文件，设置 Supabase 项目 URL 和 API Key。 - -### 4. 更新导入路径 - -检查并更新代码中的导入路径，确保指向正确的位置。 - -## 📚 核心文档 - -### 技术文档 -- [技术实现拆解](./doc_mall/TECHNICAL_IMPLEMENTATION.md) - 详细的技术实现说明 -- [模块深度分析](./doc_mall/MODULE_ANALYSIS.md) - 模块架构和设计理念 -- [前后端联调指南](./doc_mall/FRONTEND_BACKEND_DEBUGGING.md) - 开发调试指南 - -### 数据库文档 -- [完整部署指南](./doc_mall/database/complete_deployment_guide.md) - 数据库部署步骤 -- [快速部署指南](./doc_mall/database/deployment_guide.md) - 快速部署方法 -- [数据库创建报告](./doc_mall/database/database_creation_report.md) - 数据库结构说明 - -## 🔧 迁移到新仓库 - -如果你需要将本模块迁移到一个完全独立的 Git 仓库，可以使用提供的迁移脚本： - -### Windows (PowerShell) -```powershell -cd doc_mall -.\migrate.ps1 -TargetPath "D:\path\to\new-repo" -``` - -### Linux/Mac (Bash) -```bash -cd doc_mall -chmod +x migrate.sh -./migrate.sh /path/to/new-repo -``` - -详细步骤请参考 [MIGRATION_GUIDE.md](./doc_mall/MIGRATION_GUIDE.md)。 - -## 📝 注意事项 - -1. **用户表依赖**: 商城系统依赖 `ak_users` 用户表，迁移时需要确定处理方案（独立表/复用表/API服务） -2. **Supabase 配置**: 需要配置 Supabase 项目连接信息 -3. **路径更新**: 迁移后需要更新代码中的导入路径 -4. **数据库脚本**: 需要按顺序执行数据库脚本 - -## 📞 支持 - -- 查看文档: 参考 `doc_mall/` 目录下的相关文档 -- 迁移问题: 参考 [MIGRATION_GUIDE.md](./doc_mall/MIGRATION_GUIDE.md) 中的常见问题部分 - ---- - -**迁移日期**: 2025年1月 -**版本**: v1.0 -**状态**: ✅ 已独立迁移到 mall/ 目录 +- 请避免提交本地环境相关配置（如 `ak/config.uts`）到仓库（已通过 `.gitignore` 处理） +- 分包页面路径变更请同步更新 `pages.json` diff --git a/ak/config.uts b/ak/config.uts index fdd0db6d..7269882b 100644 --- a/ak/config.uts +++ b/ak/config.uts @@ -1,14 +1,28 @@ // 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' +// 生产环境 - 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' -// WebSocket 实时连接 -export const WS_URL: string = 'wss://ak3.oulog.com/realtime/v1/websocket' +// 指向你的 Supabase 服务（开发/私有部署） +// export const SUPA_URL: string = 'http://192.168.1.64:3000' +// export const SUPA_KEY: string = 'your-anon-key' +// export const WS_URL: string = 'ws://192.168.1.64:3000/realtime/v1' // 路由配置 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 @@ + + + + + diff --git a/components/analytics/AnalyticsComboChart.uvue b/components/analytics/AnalyticsComboChart.uvue new file mode 100644 index 00000000..fd3ef7b2 --- /dev/null +++ b/components/analytics/AnalyticsComboChart.uvue @@ -0,0 +1,246 @@ + + + + + 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 @@ + + + + + diff --git a/components/analytics/AnalyticsRegionMap.uvue b/components/analytics/AnalyticsRegionMap.uvue new file mode 100644 index 00000000..6b98d489 --- /dev/null +++ b/components/analytics/AnalyticsRegionMap.uvue @@ -0,0 +1,379 @@ + + + + + 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/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 @@ + + + + + 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 @@ + + + + + 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 @@ + + + + + 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 @@ + + + + + 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 @@ + + + + + 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 @@ + + + + + diff --git a/components/supadb/aksupa.uts b/components/supadb/aksupa.uts index 4da64a2a..c47057f4 100644 --- a/components/supadb/aksupa.uts +++ b/components/supadb/aksupa.uts @@ -646,6 +646,10 @@ export class AkSupa { this.user = null } async signIn(email : string, password : string) : Promise { + // 提前检查 apikey 配置是否为占位符，避免发送无效请求导致 401 + if (this.apikey == null || this.apikey.trim() === '' || this.apikey === 'your-anon-key') { + throw new Error('Supabase 配置错误：请在 ak/config.uts 中设置 SUPA_KEY（当前为占位符）'); + } const res = await AkReq.request({ url: this.baseUrl + '/auth/v1/token?grant_type=password', method: 'POST', @@ -656,13 +660,31 @@ export class AkSupa { data: { email, password } as UTSJSONObject, contentType: 'application/json' }, false); - //console.log(res) - const data = new UTSJSONObject(res.data); // 修正：确保data为UTSJSONObject + // 如果响应不是 2xx（例如 401），提取后端错误信息并抛出，便于上层显示具体原因 + const status = res.status ?? 0; + if (!(status >= 200 && status < 400)) { + let msg = 'user.login.login_failed'; + try { + if (res.data != null) { + const obj = new UTSJSONObject(res.data); + msg = obj.getString('message') ?? obj.getString('error') ?? obj.getString('msg') ?? obj.getString('description') ?? obj.getString('error_description') ?? msg; + } + } catch (e) { + // ignore + } + throw new Error(msg); + } + // 解析成功的返回体 + let data: UTSJSONObject; + try { + data = new UTSJSONObject(res.data); + } catch (e) { + data = new UTSJSONObject({}); + } const access_token = data.getString('access_token') ?? ''; const refresh_token = data.getString('refresh_token') ?? ''; const expires_at = data.getNumber('expires_at') ?? 0; const user = data.getJSON('user'); - //console.log(user, data) AkReq.setToken(access_token, refresh_token, expires_at); const session : AkSupaSignInResult = { access_token: access_token, @@ -675,7 +697,6 @@ export class AkSupa { }; this.session = session; this.user = user; - //console.log(this.user) return session; } @@ -769,7 +790,7 @@ async select(table : string, filter ?: string | null, options ?: AkSupaSelectOpt //console.log(url) // 确定HTTP方法：如果是head模式，使用HEAD方法 - let httpMethod = 'GET'; + let httpMethod: 'GET' | 'HEAD' = 'GET'; if (options != null && options.head == true) { httpMethod = 'HEAD'; //console.log('使用 HEAD 方法进行 count 查询'); diff --git a/components/supadb/aksupainstance.uts b/components/supadb/aksupainstance.uts index 928fe829..1e8d8d40 100644 --- a/components/supadb/aksupainstance.uts +++ b/components/supadb/aksupainstance.uts @@ -28,4 +28,27 @@ export function checkConnection() { // 不再使用 supaready 变量，而是提供函数 export async function ensureSupabaseReady() { return await checkConnection() -} \ No newline at end of file +} +import AkSupa from './aksupa.uts' +import { SUPA_URL, SUPA_KEY } from '@/ak/config.uts' + +const supa = new AkSupa(SUPA_URL, SUPA_KEY) + +// Do not perform hard-coded auto sign-in during page preload (development mode may preload pages). +// Instead, mark supa as ready if an existing session is present; otherwise defer sign-in to explicit user action. +const supaReady: Promise = (async () => { + try { + const sess = supa.getSession(); + if (sess != null && sess.session != null) { + return true; + } + // No session found — do not auto sign-in with hard-coded credentials. + return true; + } catch (err) { + console.error('Supabase instance init failed', err) + return false; + } +})() + +export { supaReady } +export default supa \ No newline at end of file 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 | ` +``` + +--- + +## 四、验证清单 (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` 或使用 ` +``` + +--- + +## 八、最佳实践 + +### 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/index.html b/index.html index f2837e45..725b93dc 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ window.process = { env: { NODE_ENV: 'development' } }; - + diff --git a/layouts/admin/README.md b/layouts/admin/README.md new file mode 100644 index 00000000..483009f9 --- /dev/null +++ b/layouts/admin/README.md @@ -0,0 +1,217 @@ +# Mall Admin 布局系统 + +基于CRMEB Admin的设计，创建的uni-app版本的管理后台布局系统。 + +## 📁 文件结构 + +``` +layouts/admin/ +├── index.uvue # 主布局组件（入口） +├── defaults.uvue # 默认布局（完整布局） +├── aside.uvue # 侧边栏组件 +├── header.uvue # 顶部栏组件 +├── breadcrumb.uvue # 面包屑导航组件 +├── tags-view.uvue # 标签页组件（可选） +└── README.md # 使用说明 +``` + +## 🚀 快速开始 + +### 1. 在页面中使用布局 + +```vue + + + +``` + +### 2. 页面配置 + +在 `pages.json` 中，所有admin页面都需要设置： + +```json +{ + "path": "admin/your-page", + "style": { + "navigationBarTitleText": "页面标题", + "navigationStyle": "custom" + } +} +``` + +## 📋 组件说明 + +### AdminLayout (主组件) +- **用途**: 统一的admin布局入口 +- **属性**: + - `current-page`: 当前页面ID，用于菜单高亮 + +### AdminDefaults (默认布局) +- **用途**: 完整的页面布局容器 +- **功能**: 包含侧边栏、主内容区、响应式适配 + +### AdminAside (侧边栏) +- **用途**: 垂直菜单栏 +- **功能**: + - 菜单折叠/展开 + - 子菜单支持 + - 移动端抽屉模式 + +### AdminHeader (顶部栏) +- **用途**: 页面头部导航 +- **功能**: 面包屑导航、用户信息、通知中心 + +### AdminBreadcrumb (面包屑) +- **用途**: 页面导航指示器 +- **功能**: 显示当前页面位置、快速导航 + +## 🎨 菜单配置 + +菜单配置在 `defaults.uvue` 中： + +```javascript +menuList: [ + { + id: 'dashboard', // 唯一标识 + title: '首页', // 显示文本 + icon: 'icon-shujutongji', // 图标类名 + path: '/pages/mall/admin/index' // 跳转路径 + }, + { + id: 'user', + title: '用户管理', + icon: 'icon-yonghuguanli', + children: [ // 子菜单 + { + id: 'user-list', + title: '用户列表', + icon: 'icon-yonghuguanli', + path: '/pages/mall/admin/user-management' + } + ] + } +] +``` + +## 📱 响应式特性 + +### 桌面端 (> 768px) +- 侧边栏默认展开 (240rpx) +- 支持折叠到 80rpx +- 完整菜单显示 + +### 平板端 (600px - 768px) +- 侧边栏可折叠 +- 菜单文本正常显示 + +### 移动端 (< 600px) +- 侧边栏隐藏 +- 点击菜单按钮显示抽屉 +- 带背景遮罩 + +## 🎯 功能特性 + +- ✅ **垂直菜单布局** - 参考CRMEB Admin设计 +- ✅ **菜单折叠** - 支持展开/收起 +- ✅ **子菜单支持** - 多级菜单结构 +- ✅ **路由联动** - 自动高亮当前菜单 +- ✅ **响应式设计** - 适配各种屏幕尺寸 +- ✅ **移动端适配** - 抽屉式菜单 +- ✅ **主题定制** - 支持样式调整 + +## 🔧 自定义配置 + +### 修改菜单 +编辑 `defaults.uvue` 中的 `menuList` 数组 + +### 调整样式 +修改各组件的 ` diff --git a/layouts/admin/components/AdminFooter.uvue b/layouts/admin/components/AdminFooter.uvue new file mode 100644 index 00000000..d192f674 --- /dev/null +++ b/layouts/admin/components/AdminFooter.uvue @@ -0,0 +1,20 @@ + + + + + diff --git a/layouts/admin/components/AdminHeader.uvue b/layouts/admin/components/AdminHeader.uvue new file mode 100644 index 00000000..1d81a9de --- /dev/null +++ b/layouts/admin/components/AdminHeader.uvue @@ -0,0 +1,63 @@ + + + + + diff --git a/layouts/admin/components/AdminSubsider.uvue b/layouts/admin/components/AdminSubsider.uvue new file mode 100644 index 00000000..aba51ef8 --- /dev/null +++ b/layouts/admin/components/AdminSubsider.uvue @@ -0,0 +1,123 @@ + + + + + diff --git a/layouts/admin/components/AdminTagsView.uvue b/layouts/admin/components/AdminTagsView.uvue new file mode 100644 index 00000000..fa1ed21b --- /dev/null +++ b/layouts/admin/components/AdminTagsView.uvue @@ -0,0 +1,76 @@ + + + + + diff --git a/layouts/admin/components/card.uvue b/layouts/admin/components/card.uvue new file mode 100644 index 00000000..567e7f59 --- /dev/null +++ b/layouts/admin/components/card.uvue @@ -0,0 +1,94 @@ + + + + + \ No newline at end of file diff --git a/layouts/admin/index.uvue b/layouts/admin/index.uvue new file mode 100644 index 00000000..801ecf83 --- /dev/null +++ b/layouts/admin/index.uvue @@ -0,0 +1,190 @@ + + + + + diff --git a/layouts/admin/types.uts b/layouts/admin/types.uts new file mode 100644 index 00000000..46883180 --- /dev/null +++ b/layouts/admin/types.uts @@ -0,0 +1,37 @@ +// 统一类型定义文件，避免重复定义冲突 + +export type UserInfo = { + nickname: string + role: string +} + +export type TagItem = { + path: string + title: string + isAffix?: boolean +} + +export type MenuChild = { + id: string + title: string + path: string +} + +export type MenuGroup = { + title: string + children: MenuChild[] +} + +export type MenuItem = { + id: string + title: string + icon: string // 你的 svg 路径 + path?: string + groups?: MenuGroup[] +} + +export type TabItem = { + id: string + title: string + path: string +} diff --git a/layouts/admin/utils/echarts-config.uts b/layouts/admin/utils/echarts-config.uts new file mode 100644 index 00000000..a88447c0 --- /dev/null +++ b/layouts/admin/utils/echarts-config.uts @@ -0,0 +1,691 @@ +// ECharts 配置工具 - CRMEB 风格图表配置 +// 订单统计图表配置（柱状图 + 折线图） +export const getOrderChartOption = (period: string = '30days') => { + const periods = { + '30days': { label: '30天', days: 30 }, + 'week': { label: '本周', days: 7 }, + 'month': { label: '本月', days: 30 }, + 'year': { label: '本年', days: 365 } + } + + const periodConfig = periods[period as keyof typeof periods] || periods['30days'] + + return { + title: { + text: `订单统计 (${periodConfig.label})`, + left: 'center', + textStyle: { + fontSize: 16, + fontWeight: 600, + color: '#262626' + } + }, + tooltip: { + trigger: 'axis', + backgroundColor: 'rgba(0, 0, 0, 0.8)', + borderColor: 'transparent', + textStyle: { + color: '#ffffff', + fontSize: 12 + }, + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + legend: { + data: ['订单金额', '订单数量'], + top: 30, + textStyle: { + fontSize: 12, + color: '#666666' + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '10%', + top: '15%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: generateDateLabels(periodConfig.days), + axisLine: { + lineStyle: { + color: '#e8e8e8' + } + }, + axisLabel: { + color: '#999999', + fontSize: 12 + }, + axisTick: { + show: false + } + }, + yAxis: [ + { + type: 'value', + name: '订单金额', + position: 'left', + axisLabel: { + formatter: '¥{value}', + color: '#999999', + fontSize: 12 + }, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + lineStyle: { + color: '#f0f0f0', + type: 'dashed' + } + } + }, + { + type: 'value', + name: '订单数量', + position: 'right', + axisLabel: { + color: '#999999', + fontSize: 12 + }, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + } + } + ], + series: [ + { + name: '订单金额', + type: 'bar', + data: generateAmountData(periodConfig.days), + barWidth: '40%', + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: '#1890ff' }, + { offset: 1, color: '#36cfc9' } + ]), + borderRadius: [4, 4, 0, 0] + }, + emphasis: { + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: '#40a9ff' }, + { offset: 1, color: '#5cdbd3' } + ]) + } + } + }, + { + name: '订单数量', + type: 'line', + yAxisIndex: 1, + data: generateCountData(periodConfig.days), + symbol: 'circle', + symbolSize: 8, + lineStyle: { + color: '#52c41a', + width: 3 + }, + itemStyle: { + color: '#52c41a', + borderColor: '#ffffff', + borderWidth: 2 + }, + smooth: true, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ + { offset: 0, color: 'rgba(82, 196, 26, 0.1)' }, + { offset: 1, color: 'rgba(82, 196, 26, 0.3)' } + ]) + } + } + ], + animationDuration: 1000, + animationEasing: 'cubicOut' + } +} + +// 用户趋势图表配置 +export const getUserTrendOption = () => { + return { + title: { + text: '用户增长趋势', + left: 'center', + textStyle: { + fontSize: 16, + fontWeight: 600, + color: '#262626' + } + }, + tooltip: { + trigger: 'axis', + backgroundColor: 'rgba(0, 0, 0, 0.8)', + borderColor: 'transparent', + textStyle: { + color: '#ffffff', + fontSize: 12 + } + }, + legend: { + data: ['新增用户'], + top: 30, + textStyle: { + fontSize: 12, + color: '#666666' + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '10%', + top: '15%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: generateDateLabels(30), + axisLine: { + lineStyle: { + color: '#e8e8e8' + } + }, + axisLabel: { + color: '#999999', + fontSize: 12 + }, + axisTick: { + show: false + } + }, + yAxis: { + type: 'value', + name: '用户数量', + axisLabel: { + color: '#999999', + fontSize: 12 + }, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + lineStyle: { + color: '#f0f0f0', + type: 'dashed' + } + } + }, + series: [ + { + name: '新增用户', + type: 'line', + data: generateUserTrendData(30), + symbol: 'circle', + symbolSize: 8, + lineStyle: { + color: '#1890ff', + width: 3 + }, + itemStyle: { + color: '#1890ff', + borderColor: '#ffffff', + borderWidth: 2 + }, + smooth: true, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ + { offset: 0, color: 'rgba(24, 144, 255, 0.1)' }, + { offset: 1, color: 'rgba(24, 144, 255, 0.3)' } + ]) + } + } + ], + animationDuration: 1000, + animationEasing: 'cubicOut' + } +} + +// 用户构成饼图配置 +export const getUserCompositionOption = () => { + return { + title: { + text: '用户来源构成', + left: 'center', + textStyle: { + fontSize: 16, + fontWeight: 600, + color: '#262626' + } + }, + tooltip: { + trigger: 'item', + formatter: '{a}
{b}: {c}% ({d}%)', + backgroundColor: 'rgba(0, 0, 0, 0.8)', + borderColor: 'transparent', + textStyle: { + color: '#ffffff', + fontSize: 12 + } + }, + legend: { + orient: 'vertical', + left: 'left', + top: 'center', + itemGap: 16, + textStyle: { + fontSize: 12, + color: '#666666' + }, + data: ['自然流量', '搜索引擎', '社交媒体', '广告投放', '其他'] + }, + series: [ + { + name: '用户来源', + type: 'pie', + radius: ['40%', '70%'], + center: ['60%', '50%'], + avoidLabelOverlap: false, + label: { + show: false + }, + emphasis: { + label: { + show: true, + fontSize: 16, + fontWeight: 'bold', + formatter: '{b}\n{c}%' + } + }, + labelLine: { + show: false + }, + data: [ + { + value: 35, + name: '自然流量', + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: '#1890ff' }, + { offset: 1, color: '#36cfc9' } + ]) + } + }, + { + value: 28, + name: '搜索引擎', + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: '#52c41a' }, + { offset: 1, color: '#73d13d' } + ]) + } + }, + { + value: 20, + name: '社交媒体', + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: '#faad14' }, + { offset: 1, color: '#ffc53d' } + ]) + } + }, + { + value: 12, + name: '广告投放', + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: '#f5222d' }, + { offset: 1, color: '#ff7875' } + ]) + } + }, + { + value: 5, + name: '其他', + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: '#722ed1' }, + { offset: 1, color: '#b37feb' } + ]) + } + } + ] + } + ], + animationDuration: 1000, + animationEasing: 'cubicOut' + } +} + +// 用户统计多折线图配置 +export const getUserStatisticsOption = () => { + return { + title: { + text: '用户数据趋势分析', + left: 'center', + textStyle: { + fontSize: 16, + fontWeight: 600, + color: '#262626' + } + }, + tooltip: { + trigger: 'axis', + backgroundColor: 'rgba(0, 0, 0, 0.8)', + borderColor: 'transparent', + textStyle: { + color: '#ffffff', + fontSize: 12 + }, + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + legend: { + data: ['新增用户', '访客数', '浏览量', '成交用户', '付费会员'], + top: 30, + textStyle: { + fontSize: 12, + color: '#666666' + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '10%', + top: '15%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: generateDateLabels(30, 7), // 30天的数据，每7天一个标签 + axisLine: { + lineStyle: { + color: '#e8e8e8' + } + }, + axisLabel: { + color: '#999999', + fontSize: 12 + }, + axisTick: { + show: false + } + }, + yAxis: { + type: 'value', + name: '数量', + axisLabel: { + color: '#999999', + fontSize: 12 + }, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + lineStyle: { + color: '#f0f0f0', + type: 'dashed' + } + } + }, + series: [ + { + name: '新增用户', + type: 'line', + data: generateUserStatisticsData('newUsers', 7), + symbol: 'circle', + symbolSize: 6, + lineStyle: { + color: '#1890ff', + width: 2 + }, + itemStyle: { + color: '#1890ff', + borderColor: '#ffffff', + borderWidth: 2 + }, + smooth: true + }, + { + name: '访客数', + type: 'line', + data: generateUserStatisticsData('visitors', 7), + symbol: 'circle', + symbolSize: 6, + lineStyle: { + color: '#52c41a', + width: 2 + }, + itemStyle: { + color: '#52c41a', + borderColor: '#ffffff', + borderWidth: 2 + }, + smooth: true + }, + { + name: '浏览量', + type: 'line', + data: generateUserStatisticsData('pageViews', 7), + symbol: 'circle', + symbolSize: 6, + lineStyle: { + color: '#faad14', + width: 2 + }, + itemStyle: { + color: '#faad14', + borderColor: '#ffffff', + borderWidth: 2 + }, + smooth: true + }, + { + name: '成交用户', + type: 'line', + data: generateUserStatisticsData('conversions', 7), + symbol: 'circle', + symbolSize: 6, + lineStyle: { + color: '#f5222d', + width: 2 + }, + itemStyle: { + color: '#f5222d', + borderColor: '#ffffff', + borderWidth: 2 + }, + smooth: true + }, + { + name: '付费会员', + type: 'line', + data: generateUserStatisticsData('vipUsers', 7), + symbol: 'circle', + symbolSize: 6, + lineStyle: { + color: '#722ed1', + width: 2 + }, + itemStyle: { + color: '#722ed1', + borderColor: '#ffffff', + borderWidth: 2 + }, + smooth: true + } + ], + animationDuration: 1000, + animationEasing: 'cubicOut' + } +} + +// 辅助函数：生成日期标签 +function generateDateLabels(days: number, step: number = 1): string[] { + const labels = [] + const today = new Date() + + for (let i = days - 1; i >= 0; i -= step) { + const date = new Date(today) + date.setDate(date.getDate() - i) + const month = (date.getMonth() + 1).toString().padStart(2, '0') + const day = date.getDate().toString().padStart(2, '0') + labels.push(`${month}-${day}`) + } + + return labels +} + +// 辅助函数：生成订单金额数据 +function generateAmountData(days: number): number[] { + const data = [] + for (let i = 0; i < days; i++) { + // 生成12000-25000之间的随机金额 + data.push(Math.floor(Math.random() * 13000) + 12000) + } + return data +} + +// 辅助函数：生成订单数量数据 +function generateCountData(days: number): number[] { + const data = [] + for (let i = 0; i < days; i++) { + // 生成50-150之间的随机数量 + data.push(Math.floor(Math.random() * 100) + 50) + } + return data +} + +// 辅助函数：生成用户趋势数据 +function generateUserTrendData(days: number): number[] { + const data = [] + let base = 100 + + for (let i = 0; i < days; i++) { + base += Math.floor(Math.random() * 20) - 5 // -5到+15的随机变化 + base = Math.max(50, base) // 最低50 + data.push(base) + } + + return data +} + +// 辅助函数：生成用户统计数据 +function generateUserStatisticsData(type: string, points: number): number[] { + const data = [] + const baseValues = { + newUsers: 120, + visitors: 450, + pageViews: 680, + conversions: 45, + vipUsers: 12 + } + + let base = baseValues[type as keyof typeof baseValues] || 100 + + for (let i = 0; i < points; i++) { + const variation = type === 'vipUsers' ? 0.3 : 0.2 // 付费会员变化小一些 + base += Math.floor(Math.random() * (base * variation * 2)) - (base * variation) + base = Math.max(0, base) + data.push(Math.floor(base)) + } + + return data +} + +// Mock API 数据接口 +export const mockApi = { + // 获取订单统计数据 + getOrderStats: (period: string = '30days') => { + return new Promise((resolve) => { + setTimeout(() => { + resolve({ + period, + amountData: generateAmountData(30), + countData: generateCountData(30), + dateLabels: generateDateLabels(30) + }) + }, 500) + }) + }, + + // 获取用户趋势数据 + getUserTrend: () => { + return new Promise((resolve) => { + setTimeout(() => { + resolve({ + data: generateUserTrendData(30), + dateLabels: generateDateLabels(30) + }) + }, 500) + }) + }, + + // 获取用户构成数据 + getUserComposition: () => { + return new Promise((resolve) => { + setTimeout(() => { + resolve([ + { name: '自然流量', value: 35, color: '#1890ff' }, + { name: '搜索引擎', value: 28, color: '#52c41a' }, + { name: '社交媒体', value: 20, color: '#faad14' }, + { name: '广告投放', value: 12, color: '#f5222d' }, + { name: '其他', value: 5, color: '#722ed1' } + ]) + }, 500) + }) + }, + + // 获取用户统计数据 + getUserStatistics: () => { + return new Promise((resolve) => { + setTimeout(() => { + resolve({ + newUsers: generateUserStatisticsData('newUsers', 7), + visitors: generateUserStatisticsData('visitors', 7), + pageViews: generateUserStatisticsData('pageViews', 7), + conversions: generateUserStatisticsData('conversions', 7), + vipUsers: generateUserStatisticsData('vipUsers', 7), + dateLabels: generateDateLabels(30, 7) + }) + }, 500) + }) + } +} + +// 导出所有配置 +export const chartConfigs = { + orderChart: getOrderChartOption, + userTrendChart: getUserTrendOption, + userCompositionChart: getUserCompositionOption, + userStatisticsChart: getUserStatisticsOption, + mockApi +} \ No newline at end of file diff --git a/layouts/admin/utils/menu.uts b/layouts/admin/utils/menu.uts new file mode 100644 index 00000000..5e93064b --- /dev/null +++ b/layouts/admin/utils/menu.uts @@ -0,0 +1,101 @@ +import type { MenuItem } from '../types.uts' + +export const menuList: MenuItem[] = [ + { + id: 'home', + title: '首页', + icon: '/static/homepage.svg', + path: '/pages/mall/admin/homePage/index', + groups: [] + }, + { + id: 'user', + title: '用户', + icon: '/static/user.svg', + path: '/pages/mall/admin/user-management', + groups: [ + { + title: '用户管理', + children: [ + { id: 'user-list', title: '用户列表', path: '/pages/mall/admin/user-management' }, + { id: 'user-add', title: '添加用户', path: '/pages/mall/admin/user-management?action=add' }, + { id: 'user-statistics', title: '用户统计 ', path: '/pages/mall/admin/user-statistics' }, + ] + } + ] + }, + { + id: 'order', + title: '订单', + icon: '/static/order.svg', + path: '/pages/mall/admin/order-management', + groups: [ + { + title: '订单管理', + children: [ + { id: 'order-list', title: '订单列表', path: '/pages/mall/admin/order-management' } + ] + } + ] + }, + { + id: 'product', + title: '商品', + icon: '/static/shopping.svg', + path: '/pages/mall/admin/product-management', + groups: [ + { + title: '商品管理', + children: [ + { id: 'product-list', title: '商品列表', path: '/pages/mall/admin/product-management' }, + { id: 'product-add', title: '添加商品', path: '/pages/mall/admin/product-management?action=add' } + ] + } + ] + }, + { + id: 'marketing', + title: '营销', + icon: '/static/finance.svg', + path: '/pages/mall/admin/marketing-management', + groups: [ + { + title: '优惠券活动', + children: [ + { id: 'coupon-list', title: '优惠券列表', path: '/pages/mall/admin/marketing/coupon/list' } + { id: 'coupon-receive', title: '领取情况', path: '/pages/mall/admin/marketing/coupon/receive' } + + ] + }, + { + title: '积分', + children: [ + { id: 'points', title: '积分管理', path: '/pages/mall/admin/marketing/points/index' } + ] + }, + { + title: '签到', + children: [ + { id: 'rule', title: '签到规则', path: '/pages/mall/admin/marketing/signin/rule' } + { id: 'record', title: '记录', path: '/pages/mall/admin/marketing/signin/record' } + + ] + } + ] + }, + { + id: 'system', + title: '设置', + icon: '/static/setting.svg', + path: '/pages/mall/admin/system-settings', + groups: [ + { + title: '系统设置', + children: [ + { id: 'basic', title: '基本设置', path: '/pages/mall/admin/system-settings' }, + { id: 'security', title: '安全设置', path: '/pages/mall/admin/system-settings?tab=security' } + ] + } + ] + } +] diff --git a/layouts/admin/utils/nav.uts b/layouts/admin/utils/nav.uts new file mode 100644 index 00000000..715efdfc --- /dev/null +++ b/layouts/admin/utils/nav.uts @@ -0,0 +1,34 @@ +import type { MenuItem } from '../types.uts' + +export function findActiveByCurrentPage(menuList: MenuItem[], currentPage: string) { + // currentPage 既可能是顶级菜单 id，也可能是子页面 id（如 user-list） + // 返回：activeMenuId / activeSubId / activeGroupTitle + for (const m of menuList) { + if (m.id === currentPage) { + return { activeMenuId: m.id, activeSubId: '', activeGroupTitle: '' } + } + const groups = m.groups || [] + for (const g of groups) { + for (const c of g.children) { + if (c.id === currentPage) { + return { activeMenuId: m.id, activeSubId: c.id, activeGroupTitle: g.title } + } + } + } + } + return { activeMenuId: menuList[0]?.id || 'home', activeSubId: '', activeGroupTitle: '' } +} + +export function getCurrentRoutePath(): string { + // 使用页面栈获取当前路由（uni-app标准能力） + // getCurrentPages 用于获取当前页面栈实例 :contentReference[oaicite:2]{index=2} + const pages = getCurrentPages() + const last: any = pages[pages.length - 1] + // #ifdef H5 + return last?.route ? `/${last.route}` : '' + // #endif + // #ifndef H5 + // 小程序/App 可能是 route / $page?.fullPath 形式，按你项目实际字段微调 + return last?.route ? `/${last.route}` : (last?.$page?.fullPath || '') + // #endif +} diff --git a/layouts/admin/utils/tabs.uts b/layouts/admin/utils/tabs.uts new file mode 100644 index 00000000..1a2a6762 --- /dev/null +++ b/layouts/admin/utils/tabs.uts @@ -0,0 +1,33 @@ +import type { TabItem, MenuItem } from '../types.uts' + +export function makeTabFromPath(menuList: MenuItem[], path: string): TabItem { + // path 可能带 query；用于 tab 的 id 也要稳定 + const pure = path.split('?')[0] + + // 先找子页面 + for (const m of menuList) { + const groups = m.groups || [] + for (const g of groups) { + for (const c of g.children) { + if (c.path.split('?')[0] === pure) { + return { id: c.id, title: c.title, path: c.path } + } + } + } + if (m.path.split('?')[0] === pure) { + return { id: m.id, title: m.title, path: m.path } + } + } + // 找不到就兜底 + return { id: pure, title: '页面', path } +} + +export function upsertTab(tabs: TabItem[], tab: TabItem): TabItem[] { + const idx = tabs.findIndex(t => t.id === tab.id) + if (idx >= 0) return tabs + return [...tabs, tab] +} + +export function removeTab(tabs: TabItem[], tabId: string): TabItem[] { + return tabs.filter(t => t.id !== tabId) +} diff --git a/main - 副本.uts b/main - 副本.uts deleted file mode 100644 index 234c8c9b..00000000 --- a/main - 副本.uts +++ /dev/null @@ -1,14 +0,0 @@ -import { createSSRApp } from 'vue' -import App from './App.uvue' -import i18n from '@/uni_modules/i18n/index.uts' - -export function createApp() { - const app = createSSRApp(App) - - // 注册 i18n 全局属性，使组件可以使用 $t 方法 - app.config.globalProperties.$t = (key: string, values?: any, locale?: string): string => { - return i18n.global.t(key, values, locale) - } - - return { app } -} diff --git a/main.uts b/main.uts index a6f3b3e4..da42848e 100644 --- a/main.uts +++ b/main.uts @@ -1,6 +1,6 @@ +// 简化的main.uts，移除i18n依赖 import { createSSRApp } from 'vue' import App from './App.uvue' -import i18n from '@/uni_modules/i18n/index.uts' export function createApp() { const app = createSSRApp(App) diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..4a86479c --- /dev/null +++ b/package-lock.json @@ -0,0 +1,43 @@ +{ + "name": "mall", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "echarts": "^6.0.0" + }, + "devDependencies": { + "@dcloudio/types": "^3.4.29" + } + }, + "node_modules/@dcloudio/types": { + "version": "3.4.29", + "resolved": "https://registry.npmjs.org/@dcloudio/types/-/types-3.4.29.tgz", + "integrity": "sha512-7uBInqqYLoLmQMqlzW4FsYCEHTUgTkrtZVsFGgQnJT7ZCA12U9y0ovrqAM1ZWkLruHYfOS7xIqO77Who6UBLJg==", + "dev": true + }, + "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 index 05da5dee..5c2a48a3 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,10 @@ { - "name": "i18n", - "version": "1.0.0", - "main": "index.uts", - "types": "index.uts", - "uni_modules": { - "uni_modules": true + "name": "mall", + "private": true, + "dependencies": { + "echarts": "^6.0.0" + }, + "devDependencies": { + "@dcloudio/types": "^3.4.29" } } \ No newline at end of file diff --git a/pages - 副本 (2).json b/pages - 副本 (2).json deleted file mode 100644 index 765ececb..00000000 --- a/pages - 副本 (2).json +++ /dev/null @@ -1,118 +0,0 @@ -{ - "pages": [ - // 消费者端页面 - { - "path": "pages/mall/consumer/index", - "style": { - "navigationBarTitleText": "商城首页", - "enablePullDownRefresh": true - } - }, - { - "path": "pages/mall/consumer/category", - "style": { - "navigationBarTitleText": "商品分类" - } - }, - { - "path": "pages/mall/consumer/search", - "style": { - "navigationBarTitleText": "搜索商品", - "navigationStyle": "custom" - } - }, - { - "path": "pages/mall/consumer/product-detail", - "style": { - "navigationBarTitleText": "商品详情" - } - }, - { - "path": "pages/mall/consumer/cart", - "style": { - "navigationBarTitleText": "购物车" - } - }, - { - "path": "pages/mall/consumer/orders", - "style": { - "navigationBarTitleText": "我的订单", - "enablePullDownRefresh": true - } - }, - { - "path": "pages/mall/consumer/order-detail", - "style": { - "navigationBarTitleText": "订单详情" - } - }, - { - "path": "pages/mall/consumer/address", - "style": { - "navigationBarTitleText": "收货地址" - } - }, - { - "path": "pages/mall/consumer/address-edit", - "style": { - "navigationBarTitleText": "编辑地址" - } - }, - { - "path": "pages/mall/consumer/coupons", - "style": { - "navigationBarTitleText": "我的优惠券" - } - }, - { - "path": "pages/mall/consumer/favorites", - "style": { - "navigationBarTitleText": "我的收藏" - } - }, - { - "path": "pages/mall/consumer/profile", - "style": { - "navigationBarTitleText": "个人中心" - } - } - ], - "tabBar": { - "color": "#999999", - "selectedColor": "#007aff", - "backgroundColor": "#ffffff", - "borderStyle": "black", - "list": [ - { - "pagePath": "pages/mall/consumer/index", - "text": "首页", - "iconPath": "static/tab-home.png", - "selectedIconPath": "static/tab-home-active.png" - }, - { - "pagePath": "pages/mall/consumer/category", - "text": "分类", - "iconPath": "static/tab-category.png", - "selectedIconPath": "static/tab-category-active.png" - }, - { - "pagePath": "pages/mall/consumer/cart", - "text": "购物车", - "iconPath": "static/tab-cart.png", - "selectedIconPath": "static/tab-cart-active.png" - }, - { - "pagePath": "pages/mall/consumer/orders", - "text": "订单", - "iconPath": "static/tab-order.png", - "selectedIconPath": "static/tab-order-active.png" - }, - { - "pagePath": "pages/mall/consumer/profile", - "text": "我的", - "iconPath": "static/tab-profile.png", - "selectedIconPath": "static/tab-profile-active.png" - } - ] - } -} \ No newline at end of file diff --git a/pages - 副本.json b/pages - 副本.json deleted file mode 100644 index fed5ab00..00000000 --- a/pages - 副本.json +++ /dev/null @@ -1,213 +0,0 @@ -{ - "pages": [ - { - "path": "pages/mall/consumer/index", - "style": { - "navigationBarTitleText": "商城首页", - "navigationStyle": "custom" - } - }, - { - "path": "pages/user/boot", - "style": { - "navigationBarTitleText": "" - } - }, - { - "path": "pages/user/login", - "style": { - "navigationBarTitleText": "登录" - } - }, - { - "path": "pages/user/register", - "style": { - "navigationBarTitleText": "注册" - } - }, - { - "path": "pages/user/forgot-password", - "style": { - "navigationBarTitleText": "忘记密码" - } - }, - { - "path": "pages/user/center", - "style": { - "navigationBarTitleText": "用户中心" - } - }, - { - "path": "pages/user/profile", - "style": { - "navigationBarTitleText": "个人资料" - } - }, - { - "path": "pages/user/terms", - "style": { - "navigationBarTitleText": "用户协议与隐私政策" - } - }, - { - "path": "pages/mall/merchant/index", - "style": { - "navigationBarTitleText": "商家中心", - "navigationStyle": "custom" - } - }, - { - "path": "pages/mall/delivery/index", - "style": { - "navigationBarTitleText": "配送中心", - "navigationStyle": "custom" - } - }, - { - "path": "pages/mall/admin/index", - "style": { - "navigationBarTitleText": "管理后台", - "navigationStyle": "custom" - } - }, - { - "path": "pages/mall/service/index", - "style": { - "navigationBarTitleText": "客服工作台", - "navigationStyle": "custom" - } - }, - { - "path": "pages/mall/analytics/index", - "style": { - "navigationBarTitleText": "数据分析", - "navigationStyle": "custom" - } - } - ], - "subPackages": [ - { - "root": "pages/mall", - "pages": [ - { - "path": "consumer/product-detail", - "style": { - "navigationBarTitleText": "商品详情" - } - }, - { - "path": "consumer/order-detail", - "style": { - "navigationBarTitleText": "订单详情" - } - }, - { - "path": "consumer/profile", - "style": { - "navigationBarTitleText": "个人中心" - } - }, - { - "path": "consumer/subscription/plan-list", - "style": { - "navigationBarTitleText": "软件订阅" - } - }, - { - "path": "consumer/subscription/plan-detail", - "style": { - "navigationBarTitleText": "订阅详情" - } - }, - { - "path": "consumer/subscription/subscribe-checkout", - "style": { - "navigationBarTitleText": "确认订阅" - } - }, - { - "path": "consumer/subscription/my-subscriptions", - "style": { - "navigationBarTitleText": "我的订阅" - } - }, - { - "path": "admin/subscription/plan-management", - "style": { - "navigationBarTitleText": "订阅方案管理" - } - }, - { - "path": "admin/subscription/user-subscriptions", - "style": { - "navigationBarTitleText": "用户订阅管理" - } - }, - { - "path": "nfc/security/index", - "style": { - "navigationBarTitleText": "安保工作台", - "enablePullDownRefresh": true, - "backgroundColor": "#f8f9fa" - } - } - ] - } - ], - "tabBar": { - "custom": true, - "color": "#7A7E83", - "selectedColor": "#3cc51f", - "borderStyle": "black", - "backgroundColor": "#ffffff", - "list": [ - { - "pagePath": "pages/mall/consumer/index", - "iconPath": "static/tab-home.png", - "selectedIconPath": "static/tab-home-current.png", - "text": "首页" - }, - { - "pagePath": "pages/mall/consumer/category", - "iconPath": "static/tab-category.png", - "selectedIconPath": "static/tab-category-current.png", - "text": "分类" - }, - { - "pagePath": "pages/mall/consumer/cart", - "iconPath": "static/tab-cart.png", - "selectedIconPath": "static/tab-cart-current.png", - "text": "购物车" - }, - { - "pagePath": "pages/mall/consumer/profile", - "iconPath": "static/tab-profile.png", - "selectedIconPath": "static/tab-profile-current.png", - "text": "我的" - } - ] - }, - "globalStyle": { - "navigationBarTextStyle": "black", - "navigationBarTitleText": "mall", - "navigationBarBackgroundColor": "#FFFFFF", - "backgroundColor": "#F8F8F8" - }, - "condition": { - "current": 0, - "list": [ - { - "name": "消费者端首页", - "path": "pages/mall/consumer/index" - }, - { - "name": "启动页（登录态判断）", - "path": "pages/user/boot" - }, - { - "name": "登录页", - "path": "pages/user/login" - } - ] - } -} \ No newline at end of file diff --git a/pages-simple.json b/pages-simple.json new file mode 100644 index 00000000..131f2bff --- /dev/null +++ b/pages-simple.json @@ -0,0 +1,10 @@ +{ + "pages": [ + { + "path": "pages/minimal", + "style": { + "navigationBarTitleText": "最小测试" + } + } + ] +} \ No newline at end of file diff --git a/pages.json b/pages.json index c07e0e02..41dc0f0d 100644 --- a/pages.json +++ b/pages.json @@ -1,32 +1,56 @@ { "pages": [ { - "path": "pages/mall/consumer/index", + "path": "pages/user/login", + "style": { + "navigationBarTitleText": "用户登录", + "navigationStyle": "custom" + } + }, + { + "path": "pages/user/boot", + "style": { + "navigationBarTitleText": "" + } + }, + { + "path": "pages/user/register", + "style": { + "navigationBarTitleText": "注册" + } + }, + { + "path": "pages/user/forgot-password", + "style": { + "navigationBarTitleText": "忘记密码" + } + }, + { + "path": "pages/user/terms", + "style": { + "navigationBarTitleText": "用户协议与隐私政策" + } + }, + { + "path": "pages/user/center", + "style": { + "navigationBarTitleText": "用户中心" + } + }, + { + "path": "pages/user/profile", + "style": { + "navigationBarTitleText": "个人资料" + } + }, + { + "path": "pages/mall/consumer/index", "style": { "navigationBarTitleText": "首页", "navigationStyle": "custom", "enablePullDownRefresh": true } }, - { - "path": "pages/mall/consumer/settings", - "style": { - "navigationBarTitleText": "设置" - } - }, - { - "path": "pages/mall/consumer/wallet", - "style": { - "navigationBarTitleText": "我的钱包" - } - }, - { - "path": "pages/user/login", - "style": { - "navigationBarTitleText": "用户登录", - "navigationStyle": "custom" - } - }, { "path": "pages/mall/consumer/category", "style": { @@ -51,7 +75,9 @@ "style": { "navigationBarTitleText": "我的" } - }, + } + ], + "subPackages": [ { "path": "pages/mall/consumer/search", "style": { @@ -169,24 +195,6 @@ "navigationBarTitleText": "客服聊天", "navigationStyle": "custom" } - }, - { - "path": "pages/user/change-password", - "style": { - "navigationBarTitleText": "修改密码" - } - }, - { - "path": "pages/user/bind-phone", - "style": { - "navigationBarTitleText": "绑定手机" - } - }, - { - "path": "pages/user/bind-email", - "style": { - "navigationBarTitleText": "绑定邮箱" - } } ], "tabBar": { @@ -226,5 +234,11 @@ "selectedIconPath": "static/tabbar/profile-active.png" } ] + }, + "globalStyle": { + "navigationBarTextStyle": "black", + "navigationBarTitleText": "mall", + "navigationBarBackgroundColor": "#FFFFFF", + "backgroundColor": "#F8F8F8" } -} +} \ No newline at end of file diff --git a/pages/SQL_FILES_CLEANUP_SUMMARY.md b/pages/SQL_FILES_CLEANUP_SUMMARY.md new file mode 100644 index 00000000..9fde0680 --- /dev/null +++ b/pages/SQL_FILES_CLEANUP_SUMMARY.md @@ -0,0 +1,115 @@ +# SQL 文件整理完成 + +## ✅ 已完成的整理 + +### 1. 移除重复的简化表定义 +- ✅ 从 `ANALYTICS_DB_SCHEMA.sql` 中移除了简化的 `user_sessions` 和 `page_views` 定义 +- ✅ 添加了注释说明依赖关系 + +### 2. 添加依赖说明 +- ✅ 在 `01_create_tables.sql` 中添加了注释，说明可能与 `USER_AUTH_SCHEMA.sql` 重复 +- ✅ 在 `USER_AUTH_SCHEMA.sql` 中添加了注释，说明可能与 `01_create_tables.sql` 重复 + +--- + +## 📋 当前文件结构 + +### `pages/user/test/` - 用户认证相关 +1. **`USER_AUTH_SCHEMA.sql`** ⭐ + - `ak_users` 表（业务用户资料） + - `users` 表（统计用，可能与 analytics 重复） + - `user_sessions` 表（会话统计，可能与 analytics 重复） + - `upsert_user_profile` RPC 函数 + - `handle_new_user` 触发器函数（注释中） + +2. **`USER_AUTH_TRIGGER.sql`** ⭐ + - `on_auth_user_created` 触发器（在 auth.users 插入时自动创建 ak_users） + +3. **`USER_AUTH_TEST_DATA.sql`**（可选） + - 测试数据 + +### `pages/mall/analytics/test/` - 数据分析相关 +1. **`01_create_tables.sql`** ⭐ + - 业务核心表：`orders`, `order_items`, `products`, `merchants` + - 统计表：`users`, `user_sessions`, `page_views`（可能与 USER_AUTH_SCHEMA.sql 重复） + - RLS 策略 + - `update_updated_at_column` 函数和触发器 + +2. **`ANALYTICS_DB_SCHEMA.sql`** ⭐ + - 分析表：`analytics_*` 系列表 + - RPC 函数（用于数据分析） + - **已移除**：简化的 `user_sessions` 和 `page_views` 定义 + +3. **`02_insert_test_data.sql`**（可选） + - 业务表测试数据 + +4. **`ANALYTICS_TEST_SEED.sql`**（可选） + - 分析表测试数据 + +5. **`03_test_queries.sql`**（可选） + - 测试查询 + +6. **`04_cleanup.sql`**（可选） + - 清理脚本 + +--- + +## 🚀 推荐执行顺序 + +### 首次部署 +```sql +-- 1. 用户认证表（包含 users, user_sessions） +pages/user/test/USER_AUTH_SCHEMA.sql +pages/user/test/USER_AUTH_TRIGGER.sql + +-- 2. 业务表（会跳过已存在的 users, user_sessions） +pages/mall/analytics/test/01_create_tables.sql + +-- 3. 分析表（依赖业务表） +pages/mall/analytics/test/ANALYTICS_DB_SCHEMA.sql + +-- 4. 测试数据（可选） +pages/mall/analytics/test/02_insert_test_data.sql +pages/mall/analytics/test/ANALYTICS_TEST_SEED.sql +``` + +### 后续更新 +- 如果只更新分析表，只需执行 `ANALYTICS_DB_SCHEMA.sql` +- 如果只更新业务表，只需执行 `01_create_tables.sql` +- 如果只更新用户认证，只需执行 `USER_AUTH_SCHEMA.sql` + +--- + +## 🔍 重复内容说明 + +### 已处理的重复 +1. ✅ **`user_sessions` 表** - 保留在 `USER_AUTH_SCHEMA.sql` 和 `01_create_tables.sql` 中的完整定义，移除 `ANALYTICS_DB_SCHEMA.sql` 中的简化定义 +2. ✅ **`page_views` 表** - 保留在 `01_create_tables.sql` 中的完整定义，移除 `ANALYTICS_DB_SCHEMA.sql` 中的简化定义 + +### 保留的重复（安全） +1. **`users` 表** - 在 `USER_AUTH_SCHEMA.sql` 和 `01_create_tables.sql` 中都有定义，使用 `IF NOT EXISTS` 不会冲突 +2. **`update_updated_at_column` 函数** - 在多个文件中定义，使用 `CREATE OR REPLACE FUNCTION` 不会冲突 +3. **触发器** - 使用 `IF NOT EXISTS` 或 `DROP TRIGGER IF EXISTS` 确保不会冲突 + +--- + +## ✅ 验证 + +执行以下查询验证表结构： +```sql +-- 检查 user_sessions 表字段（应该是完整定义） +SELECT column_name, data_type, is_nullable +FROM information_schema.columns +WHERE table_name = 'user_sessions' AND table_schema = 'public' +ORDER BY ordinal_position; + +-- 检查 page_views 表字段（应该是完整定义） +SELECT column_name, data_type, is_nullable +FROM information_schema.columns +WHERE table_name = 'page_views' AND table_schema = 'public' +ORDER BY ordinal_position; +``` + +**预期结果**： +- `user_sessions` 应包含：id, user_id, session_token, last_active_at, is_active, ip_address, user_agent, created_at, updated_at +- `page_views` 应包含：id, user_id, path, source, referrer, ip_address, user_agent, created_at diff --git a/pages/SQL_FILES_ORGANIZATION.md b/pages/SQL_FILES_ORGANIZATION.md new file mode 100644 index 00000000..f43bd14d --- /dev/null +++ b/pages/SQL_FILES_ORGANIZATION.md @@ -0,0 +1,119 @@ +# SQL 文件整理说明 + +## 📋 重复内容分析 + +经过检查，发现以下重复定义： + +### 1. **`users` 表**（重复） +- ✅ `pages/user/test/USER_AUTH_SCHEMA.sql` (第 63-71 行) +- ✅ `pages/mall/analytics/test/01_create_tables.sql` (第 43-51 行) +- **状态**：两个定义相同，使用 `CREATE TABLE IF NOT EXISTS` 不会冲突，但建议统一 + +### 2. **`user_sessions` 表**（重复，定义略有不同） +- ✅ `pages/user/test/USER_AUTH_SCHEMA.sql` (第 76-86 行) - **完整定义**（推荐） +- ✅ `pages/mall/analytics/test/01_create_tables.sql` (第 24-34 行) - **完整定义**（相同） +- ⚠️ `pages/mall/analytics/test/ANALYTICS_DB_SCHEMA.sql` (第 19-25 行) - **简化定义**（字段较少） + +### 3. **`page_views` 表**（重复，定义不同） +- ✅ `pages/mall/analytics/test/01_create_tables.sql` (第 90-99 行) - **完整定义**（推荐） +- ⚠️ `pages/mall/analytics/test/ANALYTICS_DB_SCHEMA.sql` (第 30-36 行) - **简化定义**（字段较少） + +### 4. **`update_updated_at_column` 函数**（重复） +- ✅ `pages/user/test/USER_AUTH_SCHEMA.sql` (第 93-99 行) +- ✅ `pages/mall/analytics/test/01_create_tables.sql` (第 107-113 行) +- **状态**：两个定义相同，使用 `CREATE OR REPLACE FUNCTION` 不会冲突 + +### 5. **触发器**（部分重复） +- `USER_AUTH_SCHEMA.sql`: `update_users_updated_at`, `update_user_sessions_updated_at` +- `01_create_tables.sql`: `update_orders_updated_at`, `update_user_sessions_updated_at`, `update_users_updated_at` + +--- + +## 🎯 整理方案 + +### 方案一：保持现状（推荐） +**优点**：每个文件独立，使用 `IF NOT EXISTS` 和 `CREATE OR REPLACE` 不会冲突 +**缺点**：有重复代码 + +**执行顺序**： +1. `pages/user/test/USER_AUTH_SCHEMA.sql` - 创建用户认证相关表 +2. `pages/mall/analytics/test/01_create_tables.sql` - 创建业务表（会跳过已存在的表） +3. `pages/mall/analytics/test/ANALYTICS_DB_SCHEMA.sql` - 创建分析表（会跳过已存在的表） + +### 方案二：统一到基础表文件（更清晰） +**优点**：减少重复，职责清晰 +**缺点**：需要重构文件结构 + +**建议结构**： +- `00_base_tables.sql` - 基础表（users, user_sessions, page_views） +- `01_user_auth.sql` - 用户认证表（ak_users）和函数 +- `02_business_tables.sql` - 业务表（orders, products, merchants等） +- `03_analytics_tables.sql` - 分析表（analytics_*） + +--- + +## 📝 当前文件职责 + +### `pages/user/test/` 目录 +- **`USER_AUTH_SCHEMA.sql`** - 用户认证核心表（ak_users, users, user_sessions）和 RPC 函数 +- **`USER_AUTH_TRIGGER.sql`** - 数据库触发器（自动创建 ak_users） +- **`USER_AUTH_TEST_DATA.sql`** - 测试数据 + +### `pages/mall/analytics/test/` 目录 +- **`01_create_tables.sql`** - 业务表（orders, users, user_sessions, products, merchants, order_items, page_views）+ RLS +- **`ANALYTICS_DB_SCHEMA.sql`** - 分析表（analytics_*）+ RPC 函数 +- **`02_insert_test_data.sql`** - 业务表测试数据 +- **`ANALYTICS_TEST_SEED.sql`** - 分析表测试数据 +- **`03_test_queries.sql`** - 测试查询 +- **`04_cleanup.sql`** - 清理脚本 + +--- + +## ✅ 推荐操作 + +### 立即执行（保持现状） +当前文件结构可以使用，因为： +1. 所有表使用 `CREATE TABLE IF NOT EXISTS` +2. 所有函数使用 `CREATE OR REPLACE FUNCTION` +3. 触发器使用 `CREATE TRIGGER IF NOT EXISTS` 或 `DROP TRIGGER IF EXISTS` + +**执行顺序**： +```sql +-- 1. 用户认证表 +pages/user/test/USER_AUTH_SCHEMA.sql +pages/user/test/USER_AUTH_TRIGGER.sql + +-- 2. 业务表（会跳过已存在的 users, user_sessions） +pages/mall/analytics/test/01_create_tables.sql + +-- 3. 分析表（会跳过已存在的 user_sessions, page_views） +pages/mall/analytics/test/ANALYTICS_DB_SCHEMA.sql +``` + +### 未来优化（可选） +如果需要减少重复，可以： +1. 从 `ANALYTICS_DB_SCHEMA.sql` 中移除 `user_sessions` 和 `page_views` 的简化定义 +2. 确保 `01_create_tables.sql` 先执行，提供完整定义 +3. 在 `ANALYTICS_DB_SCHEMA.sql` 中添加注释说明依赖关系 + +--- + +## 🔍 验证重复 + +执行以下查询检查表是否存在： +```sql +-- 检查 users 表 +SELECT column_name, data_type +FROM information_schema.columns +WHERE table_name = 'users' AND table_schema = 'public'; + +-- 检查 user_sessions 表 +SELECT column_name, data_type +FROM information_schema.columns +WHERE table_name = 'user_sessions' AND table_schema = 'public'; + +-- 检查 page_views 表 +SELECT column_name, data_type +FROM information_schema.columns +WHERE table_name = 'page_views' AND table_schema = 'public'; +``` diff --git a/pages/mall/admin/activity-log.uvue b/pages/mall/admin/activity-log.uvue new file mode 100644 index 00000000..c3779309 --- /dev/null +++ b/pages/mall/admin/activity-log.uvue @@ -0,0 +1,63 @@ + + + + + diff --git a/pages/mall/admin/complaints.uvue b/pages/mall/admin/complaints.uvue new file mode 100644 index 00000000..871d4a00 --- /dev/null +++ b/pages/mall/admin/complaints.uvue @@ -0,0 +1,63 @@ + + + + + \ No newline at end of file diff --git a/pages/mall/admin/delivery-management.uvue b/pages/mall/admin/delivery-management.uvue new file mode 100644 index 00000000..af13a237 --- /dev/null +++ b/pages/mall/admin/delivery-management.uvue @@ -0,0 +1,11 @@ + + + diff --git a/pages/mall/admin/finance-management.uvue b/pages/mall/admin/finance-management.uvue new file mode 100644 index 00000000..8f5483a1 --- /dev/null +++ b/pages/mall/admin/finance-management.uvue @@ -0,0 +1,1583 @@ + + + + + \ No newline at end of file diff --git a/pages/mall/admin/homePage/components/KpiMiniCard.uvue b/pages/mall/admin/homePage/components/KpiMiniCard.uvue new file mode 100644 index 00000000..89b9aee9 --- /dev/null +++ b/pages/mall/admin/homePage/components/KpiMiniCard.uvue @@ -0,0 +1,187 @@ + + + + + diff --git a/pages/mall/admin/homePage/index.uvue b/pages/mall/admin/homePage/index.uvue new file mode 100644 index 00000000..98a2280e --- /dev/null +++ b/pages/mall/admin/homePage/index.uvue @@ -0,0 +1,494 @@ + + + + + \ No newline at end of file diff --git a/pages/mall/admin/index.uvue b/pages/mall/admin/index.uvue deleted file mode 100644 index 10326b93..00000000 --- a/pages/mall/admin/index.uvue +++ /dev/null @@ -1,847 +0,0 @@ - - - - - - diff --git a/pages/mall/admin/marketing/coupon/coupon-management.uvue b/pages/mall/admin/marketing/coupon/coupon-management.uvue new file mode 100644 index 00000000..147fbe1a --- /dev/null +++ b/pages/mall/admin/marketing/coupon/coupon-management.uvue @@ -0,0 +1,11 @@ + + + diff --git a/pages/mall/admin/marketing/coupon/list.uvue b/pages/mall/admin/marketing/coupon/list.uvue new file mode 100644 index 00000000..6d3697a6 --- /dev/null +++ b/pages/mall/admin/marketing/coupon/list.uvue @@ -0,0 +1,28 @@ + + + + + \ No newline at end of file diff --git a/pages/mall/admin/marketing/coupon/receive.uvue b/pages/mall/admin/marketing/coupon/receive.uvue new file mode 100644 index 00000000..13f9775c --- /dev/null +++ b/pages/mall/admin/marketing/coupon/receive.uvue @@ -0,0 +1,28 @@ + + + + + \ No newline at end of file diff --git a/pages/mall/admin/marketing/points/index.uvue b/pages/mall/admin/marketing/points/index.uvue new file mode 100644 index 00000000..7d8bef40 --- /dev/null +++ b/pages/mall/admin/marketing/points/index.uvue @@ -0,0 +1,28 @@ + + + + + \ No newline at end of file diff --git a/pages/mall/admin/marketing/signin/record.uvue b/pages/mall/admin/marketing/signin/record.uvue new file mode 100644 index 00000000..2972cee3 --- /dev/null +++ b/pages/mall/admin/marketing/signin/record.uvue @@ -0,0 +1,28 @@ + + + + + \ No newline at end of file diff --git a/pages/mall/admin/marketing/signin/rule.uvue b/pages/mall/admin/marketing/signin/rule.uvue new file mode 100644 index 00000000..b0d6bcfb --- /dev/null +++ b/pages/mall/admin/marketing/signin/rule.uvue @@ -0,0 +1,28 @@ + + + + + \ No newline at end of file diff --git a/pages/mall/admin/merchant-management.uvue b/pages/mall/admin/merchant-management.uvue new file mode 100644 index 00000000..7ddce6fa --- /dev/null +++ b/pages/mall/admin/merchant-management.uvue @@ -0,0 +1,13 @@ + + + + + diff --git a/pages/mall/admin/merchant-review.uvue b/pages/mall/admin/merchant-review.uvue new file mode 100644 index 00000000..0c4d7988 --- /dev/null +++ b/pages/mall/admin/merchant-review.uvue @@ -0,0 +1,63 @@ + + + + + diff --git a/pages/mall/admin/notifications.uvue b/pages/mall/admin/notifications.uvue new file mode 100644 index 00000000..c557a93d --- /dev/null +++ b/pages/mall/admin/notifications.uvue @@ -0,0 +1,11 @@ + + + diff --git a/pages/mall/admin/order-management.uvue b/pages/mall/admin/order-management.uvue new file mode 100644 index 00000000..37e33db8 --- /dev/null +++ b/pages/mall/admin/order-management.uvue @@ -0,0 +1,1517 @@ + + + + + \ No newline at end of file diff --git a/pages/mall/admin/product-management.uvue b/pages/mall/admin/product-management.uvue new file mode 100644 index 00000000..75f5fd80 --- /dev/null +++ b/pages/mall/admin/product-management.uvue @@ -0,0 +1,1755 @@ + + + + + diff --git a/pages/mall/analytics/data-detail.uvue b/pages/mall/analytics/data-detail.uvue new file mode 100644 index 00000000..0c85f031 --- /dev/null +++ b/pages/mall/analytics/data-detail.uvue @@ -0,0 +1,652 @@ + + + + + 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/pages/mall/analytics/docs/ANALYTICS_UI_DESIGN.md b/pages/mall/analytics/docs/ANALYTICS_UI_DESIGN.md new file mode 100644 index 00000000..0f9cc197 --- /dev/null +++ b/pages/mall/analytics/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 + + + + + +``` + +### 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/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 c9b161ea..f61591b8 100644 --- a/pages/mall/analytics/index.uvue +++ b/pages/mall/analytics/index.uvue @@ -1,303 +1,302 @@ - 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..ff3addcc --- /dev/null +++ b/pages/mall/analytics/product-insights.uvue @@ -0,0 +1,840 @@ + + + + + diff --git a/pages/mall/analytics/profile.uvue b/pages/mall/analytics/profile.uvue index 506ae8fa..ad2a46f1 100644 --- a/pages/mall/analytics/profile.uvue +++ b/pages/mall/analytics/profile.uvue @@ -1,5 +1,30 @@