# visual-chain-store

**Repository Path**: ge-xiubin/visual-chain-store

## Basic Information

- **Project Name**: visual-chain-store
- **Description**: 连锁餐饮可视化平台
- **Primary Language**: Unknown
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-10
- **Last Updated**: 2025-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目：连锁餐饮可视化平台


技术栈：React19 + TypeScript + Vite6 + React Router + Zustand + Sass + ECharts + Ant Design 等

# 相关技术

路由守卫：检查是否登录/角色权限，未登录会跳转登录页面

路由：子页面：门店总览，单店信息，数据对比，信息管理，使用懒加载与Suspense进行优化

状态管理：使用zusand，使用persist、immer等中间件，使用createJSONStorage本地存储
管理鼠标悬停与基础对比状态、存储当前切换到的日/月，存储当前门店与对比门店的数据

屏幕适配：使用百分比/vw/vh  基本实现不同分辨率屏幕适配

封装axios：请求拦截器、响应拦截器、管理Token，封装请求方法

Mock：模拟后端接口，拦截发送的请求信息，还有用户数据

echarts：封装基本echarts组件，实现折线图、饼图、柱状图、雷达图、水滴图、漏斗图

自定义封装常用组件，如搜索框   使用防抖节流进行优化：搜索框、月份滑动条

css预处理器：使用Sass器管理常用的样式，减少CSS重复的代码，使用module.scss隔离样式


# 页面功能

导航：不同页面跳转导航，用户基本信息，可退出用户登录

登录页面：
验证码：滑动条，验证成功才能登录。支持刷新，直接集成，可手写实现
加盐哈希密码，存储token，mock接口验证
支持多用户，管理员/普通用户 普通用户无信息管理权限，通过路由守卫鉴权

门店总览页面：
自定义中国地图，使用高德地图api，显示数据点代表门店，支出全国/省/市的区域下钻与缩放
地图上的点的显示位置对应所在地，城市位置与经纬度映射
鼠标悬停显示门店基本信息，可跳转查看详细信息，也可以进行对比，点击对比，在地图上选择门店进行对比，可跳转进行详细对比
左侧：列表展示年营业额top门店，轮播图组件，手动实现评论自动滚动组件，使用动画+step  
右侧：展示品牌信息，echarts展示品牌以及连锁店的数据

单店信息：
使用图表可视化方式，展示门店基本信息
月份滑动条选择月份，展示当前门店不同月份的数据
日期选择器，可选择并查看指定日期的数据
搜索功能，搜索门店并设置为当前要查看的门店

对比页面：
展示两个门店的基本信息进行对比，使用表格中展示数据以及差异，使用不同颜色高亮显示，可使用选择框选择不同节假日时段进行对比
月份滑动条选择月份，查看并对比当两个门店同月的数据
搜索功能，搜索门店并设置为当前门店或对比门店

AI智能分析模块：
点击生成门店对比报告，使用websocket，调用讯飞星火api进行分析

PDF导出模块：
支持预览、导出、添加水印功能
使用react-pdf，将门店信息/AI智能分析内容写为pdf
react-pdf不支持antd的水印，所以要手写，支持有水印/无水印切换，需要强制重新创建实例

信息管理页面：
实现基础crud功能，列表展示门店基本信息
新增和修改复用同一模态框，内容为表单，删除时有二次提醒
搜索功能，搜索门店并在列表中展示相关的门店信息
分页功能，自定义分页器，只显离当前页码最近的5页，支持页码跳转