这个功能应该是 vue-router 的功能

可以看看对应的 vue-router 的文档

对应的文档

• 白雪
• 雪娇
• 小乐

• 商品管理
  • 商品不同状态切换（tab）
  • 商品搜索
    • 根据分类实时搜索更新数据（select）
    • 根据商品名称关键字id点击搜索（input）
  • 商品编辑
    • 添加商品（路由跳转到添加页面）
    • 商品采集（暂缓）
    • 批量下架（获取到当前选中的商品批量下架）
    • 导出数据
  • 商品列表
    • 点击在下一行显示商品详情
    • 复选框选中商品
    • 点击切换商品状态
      • “在售商品”列表 点击关闭 上架，商品回收到 " 仓库中的商品 "
      • " 仓库中的商品 " 点击关闭 下架，商品上架到“在售商品”列表
    • 商品其他操作
      • 点击编辑 路由跳转到商品编辑页面
      • 点击查看评论 路由跳转到商品评论管理页面
      • 点击 移动到回收站 商品移至 “回收站的商品”列表中
      • 回收站中的商品 点击 恢复商品 商品移至 “仓库**的商品”列表

• 商品分类
  • 商品搜索
    • select选中商品类型实时更新商品列表数据，选中后鼠标上移显示删除按钮，可清空当前搜索条件
    • select 选择 显示 或者 隐藏状态实时更新商品列表数据，选中后鼠标上移显示删除按钮，可清空当前搜索条件
    • 输入商品名称关键字 id 点击搜索，没有一键清空功能，需要手动删除，然后重新点击搜索重置数据
  • 添加商品分类入口
    • 点击按钮弹出弹框，编辑分类
  • 商品列表
    • 点击展开显示当前大类下所有的子类商品信息
    • 点击切换商品是否显示状态
      • [ ]
    • 商品其他操作
      • 点击编辑 路由跳转到商品编辑页面
      • 点击查看评论 路由跳转到商品评论管理页面
      • 点击 移动到回收站 商品移至 “回收站的商品”列表中
      • 回收站中的商品 点击 恢复商品 商品移至 “仓库**的商品”列表

• 商品规格

• 商品评论

按组分块

在 webpack 的构建工具下使用： webpackChunkName

那么如果在 vite 中呢？应该如何配置？

Tasking

• 用户管理
  • 不同平台用户的tab切换
  • 用户搜索
    • 根据uid、手机号、用户昵称然后输入搜索
    • 输入信息点击重置可重新填入
    • 点击展开可根据用户详细信息进行搜索
  • 设置用户
    • 添加用户
    • 发送优惠券(前提需勾选用户)
    • 批量设置分组(前提需勾选用户)
    • 批量设置标签(前提需勾选用户)
  • 用户列表(ID、头像、昵称、分组、手机号、用户类型、余额、操作包括编辑和更多)
    • 点击对应用户左侧的展开图标会显示用户详细信息
    • 勾选用户可为其发送优惠券、批量设置分组、批量设置标签、同步公众号用户
      • 勾选之后显示“已选择x项”的信息
    • 点击余额上下箭头可按余额高低对列表数据排序
    • 点击编辑修改用户信息
    • 鼠标移入“更多”显示四个选项，分别是账户详情、积分余额、设置分组。设置标签
      • 点击账户详情展示账户详细信息
        • 消费记录
        • 积分明细
        • 持有优惠券
        • 余额变动
        • 好友关系
      • 点击积分余额修改余额和积分
      • 点击设置分组为当前用户设置分组
      • 点击设置标签为当前用户设置标签
    • 分页

• 用户分组
  • 添加分组
  • 分组列表(ID、分组名称、操作包括编辑和删除)
    • 点击编辑修改分组名称
    • 删除
    • 分页

• 用户标签
  • 添加分类
  • 点击不同的tab展示出改分类/小组下的所有标签
  • 点击不同的tab设置可以编辑和删除该分类/该小组
  • 添加标签
    • 在对应的tab分类/小组下添加对应标签的列表(ID、标签名称、操作包括修改和删除)
      • 点击修改可修改分类和标签名称
      • 点击删除显示气泡确认框
    • 分页

Tasking

• 用户打开 /admin/home url 的时候可以跳转到 home 页面
  • 配置对应的 router config
• 需要实现基础的 Layer 层，作为布局组件
  • 基于原本逻辑的话，实现 main 组件（main 组件将会作为 BasicLayer 组件）
    • 路径：src/components/main/main.vue
• 实现 Home 组件
  • 路径：src/pages/index/index.vue

订单管理

订单相关统计

• 订单数量
• 订单金额
• 微信支付金额
• 余额支付金额

订单状态

• 按钮显示订单所有的状态，文字描述+当前状态订单的数量
• 点击按钮，根据状态筛选出符合的订单显示在订单列表

创建时间

• 点击控件，显示时间选择框
• 时间选择框左侧有个列表，可以点击选择时段，所显示的时段显示在控件上
• 时间选择框右侧上半部分为日历，可以自定义选择时段，所显示的时段显示在控件上
• 时间选择框右侧下半部分，左侧按钮为选择时间和选择日期的切换，即时分和日历的切换
• 时间选择框右侧下半部分，右侧清空按钮，能清空显示在控件上的时段
• 时间选择框右侧下半部分，右侧确定按钮，根据控件上显示的时段筛选出符合的订单显示在订单列表
• 当控件上有时段，鼠标移入控件，控件上的日历图标变成×，点击×也可以清空显示在控件上的时段

搜索

• 下拉菜单，以全部、订单号、UID、用户姓名、用户电话或商品名称（模糊）为关键词进行搜索
• 输入框，输入具体的搜索关键词
• 搜索按钮，根据关键词筛选出符合的订单显示在订单列表

订单列表

• 表格头内容：全选|全不选、订单号、订单类型、用户信息、商品信息、实际支付、支付时间、支付状态、订单状态、操作
• 操作包含两个按钮，编辑、更多
• 点击编辑按钮，出现【修改订单】模态框，内容包含：
  • 订单编号（只读）
  • 商品总价，可编辑，具有递增递减按钮
  • 原始邮费，可编辑，具有递增递减按钮
  • 实际支付金额，可编辑，具有递增递减按钮
  • 实际支付邮费，可编辑，具有递增递减按钮
  • 赠送积分，可编辑，具有递增递减按钮
• 【修改订单】模态框底部有提交按钮，可以保存修改
• 【修改订单】模态框顶部有×按钮，可以取消修改
• 鼠标移入更多按钮，出现下拉菜单，包含订单详情、订单记录、删除订单
• 订单详情，暂时还看不到长啥样
• 点击订单记录，出现【订单记录】模态框，内容为表格，表格头包含：订单ID、操作记录、操作时间
• 点击删除订单，出现【删除订单】模态框，包含取消、确定两个按钮
• 分页，显示共几条、分页按钮、每页显示几条的下拉框、跳至第几页的输入框
• 每行有个箭头，点击展开一个详情，详情内容包括商品总价 下单时间 用户备注 商家备注

功能解析

1. 配置 router
2. 确认页面的结构
   • 自己写的组件
   • 来此组件库的组件
3. 确认数据的来源
   • vuex
   • vue-router
4. 基于组件的核心功能列出 tasking （逐一实现）
   • 注意点，先可以只实现最核心的逻辑
   • 创建一个 issues，然后列出 taksing ，这样的方便在白板里面做任务跟进
5. 页面的样式
   • 直接复用之前的样式
   • 需要确保 class name 不可以改变

ps： 如果这个页面的逻辑看不懂的话，可以多看会（浸泡）

https://pinia.esm.dev/core-concepts/state.html

tasking

• h
• hh
• hheihei

xxxxxx