187 lines
8.7 KiB
Markdown
187 lines
8.7 KiB
Markdown
# 云岚到家-机构端
|
||
#### 项目简介
|
||
> 当代人们的生活节奏越来越快，很多人因为工作和其他事情没有时间去处理家务事，因此需要家政服务来帮助他们解决日常生活中的问题。云岚到家家政项目是一种在线服务，将家政服务与互联网技术相结合，为用户提供更加便捷的家政服务。
|
||
|
||
项目迭代日志：
|
||
23年3月30 - 合并更新 处理无法合并问题
|
||
#### 研发规范遵循：
|
||
|
||
- 主体使用驼峰命名
|
||
- 公共样式使用 - 连接命名
|
||
- 内部样式 驼峰命名
|
||
- 页面命名 使用小写开头的驼峰命名
|
||
- 组件使用大写开头命名
|
||
|
||
#### 产品原型及设计
|
||
- 设计稿： https://codesign.qq.com/app/design/P4VlZMr6dzjq6wL/board?team_id=6dqN292MdajaBXe
|
||
- 产品原型： https://codesign.qq.com/app/prototype/a4Jd0NaP739AMkb/detail
|
||
|
||
#### 运行环境 - 初始开发环境及工具
|
||
|
||
- 项目开发环境: win10 + node: v16.19.0 + npm: 8.12.1 || pnpm: 6.32.8
|
||
|
||
#### 访问地址
|
||
|
||
|
||
#### 技术栈应用
|
||
Vue 3 + TypeScript +Tdesign + Vite + pinia
|
||
#### 项目结构
|
||
```html
|
||
├── commitlint.config.js - commintlint 规范
|
||
├── docker - docker 部署配置文件
|
||
│ └── nginx.conf - 若开启 browerhistroy 可参考配置
|
||
├── docs - 项目展示图 - 首页截图
|
||
├── globals.d.ts - 通用声明文件
|
||
├── index.html - 主 html 文件
|
||
├── mock - mock 目录
|
||
│ └── index.ts
|
||
├── node_modules - 项目依赖
|
||
├── package-lock.json
|
||
├── package.json
|
||
├── public - 公用资源文件
|
||
│ └── favicon.ico
|
||
├── shims-vue.d.ts
|
||
├── src - 页面代码
|
||
│ ├── api 请求相关
|
||
│ ├── assets 公共资源
|
||
│ │ ├── images 图片资源
|
||
│ ├── api - 接口
|
||
│ ├── components - 公用组件
|
||
│ │ ├── Delete - 删除弹层：只需从父组件传删除的内容提示
|
||
│ │ ├── Confirm - 确认弹层：只需从父组件传确认的内容提示
|
||
│ │ ├── expBall - 展示版本更新内容的小球球
|
||
│ │ ├── ImageMagnify - 查看图片弹层
|
||
│ │ ├── NoData - 无数据的空页面形式
|
||
│ │ ├── product-card - 产品卡片
|
||
│ │ ├── result - 结果
|
||
│ │ ├── editDialog - 编辑弹窗
|
||
│ │ ├── thumbnail - 缩略图
|
||
│ │ ├── trend - 趋势图
|
||
│ │ ├── Message - 提示弹层
|
||
│ │ │ ├──Success - 成功通知弹窗
|
||
│ │ │ ├──ProdDisabled - 禁用提示弹窗
|
||
│ │ ├── switchBar - tab切换
|
||
│ │ │ ├──switchBar - tab切换
|
||
│ │ │ ├──switchBarindex - 首页tab切换
|
||
│ │ │ ├──switchBartop - 线条tab
|
||
│ ├── czriComponents - 组件包：常用，但是原有组件库实现不了，因此进行了二次开发
|
||
│ │ ├──index.less - 组件包样式
|
||
│ ├── layouts - 页面架构
|
||
│ │ ├──components - 页面架构公共组件
|
||
│ │ │ ├──Breadcrumb - 面包屑
|
||
│ │ │ ├──Content - 内置组件，避免重复渲染DOM
|
||
│ │ │ ├──Footer - 底部公司名称
|
||
│ │ │ ├──LayoutContentSide - 侧边栏
|
||
│ │ │ ├──LayoutHeader - 侧边栏头部
|
||
│ │ │ ├──Loginfo - 侧边栏退出区域
|
||
│ │ │ ├──Notice - 通知中心，弃用
|
||
│ │ │ ├──Search - 搜索功能
|
||
│ │ ├──simpleComponents - 框架公用内容
|
||
│ │ │ ├──MenuContent - 简版布局
|
||
│ │ │ ├──SideNav - 列表菜单
|
||
│ │──index.vue - 框架布局
|
||
│ │──setting.vue = 设置框架风格
|
||
│ ├── config - 项目配置
|
||
│ │ ├──configuration - 配置项目地址和api
|
||
│ │ ├──global - 配重全局内容
|
||
│ │ ├──proxy.ts - 代理样式
|
||
│ │ ├──style.ts - 配置全局样式风格
|
||
│ ├── pages - 页面展示目录
|
||
│ │ ├──dashboard - 首页，工作台
|
||
│ │ ├──coupon - 优惠券管理页
|
||
│ │ │ ├──addCoupon - 新增，编辑优惠券
|
||
│ │ │ ├──index - 列表页
|
||
│ │ ├──coupon - 客户管理页
|
||
│ │ ├──default - 公共缺省页
|
||
│ │ ├──institution - 企业管理
|
||
│ │ │ ├──authentication - 企业认证管理
|
||
│ │ │ ├──information - 企业信息管理
|
||
│ │ ├──personnel - 服务人员管理
|
||
│ │ │ ├──authentication - 服务人员认证管理
|
||
│ │ │ ├──information - 服务人员信息管理
|
||
│ │ ├──order - 订单管理
|
||
│ │ │ ├──dispatchList - 派单列表（已废弃）
|
||
│ │ │ ├──historyList - 历史订单列表
|
||
│ │ │ │ ├──orderDetail - 历史订单详情
|
||
│ │ │ │ ├──index - 列表页
|
||
│ │ │ ├──refundList - 退款订单列表（已废弃）
|
||
│ │ │ ├──orderList - 订单列表
|
||
│ │ │ │ ├──orderDetail - 历史订单详情
|
||
│ │ │ │ ├──index - 列表页
|
||
│ │ ├──reply - 原评价页面，现修改解决方案，已废弃
|
||
│ │ ├──service - 服务管理
|
||
│ │ │ ├──serviceType - 服务类型管理
|
||
│ │ │ ├──service - 服务项管理
|
||
│ │ │ │ ├──index - 服务项列表
|
||
│ │ │ │ ├──addService - 新增，编辑服务项
|
||
│ │ │ ├──region - 区域管理
|
||
│ │ │ │ ├──editRegion - 设置服务
|
||
│ │ │ │ ├──index - 区域列表
|
||
│ │ │ │ ├──setBusiness - 调度配置
|
||
│ │ ├──login - 登录页
|
||
│ │ ├──user - 个人中心
|
||
│ ├── router - 定义路由页面
|
||
│ ├── style - 样式
|
||
│ │ ├──componentsReast - 组件重置、全局样式
|
||
│ │ ├──theme - 全局颜色值、公用样式
|
||
│ │ index.less - 样式总入口
|
||
│ │ normal.less - 普通框架样式
|
||
│ │ noSecondMenu.less - 普通框架简化版样式
|
||
│ │ top.less - 上左右布局
|
||
│ ├── utils 封装工具目录
|
||
│ ├── main.ts - 项目入口文件
|
||
│ ├── permission.ts - 路有权限控制
|
||
├── tsconfig.json - ts配置文件
|
||
├── README.md - 说明文档
|
||
└── vite.config.js - vite 配置文件
|
||
```
|
||
#### 安装运行
|
||
|
||
``` bash
|
||
## 安装依赖
|
||
npm install || yarn
|
||
##或
|
||
cnpm install || yarn
|
||
## 启动项目
|
||
|
||
# 启动
|
||
npm run dev
|
||
# 启动链接测试环境
|
||
npm run start
|
||
|
||
## 构建正式环境 - 打包
|
||
npm run build
|
||
|
||
```
|
||
#### 插件
|
||
nprogress 进度条
|
||
|
||
viteMockServe vite 的数据模拟插件
|
||
|
||
vueJsx
|
||
> 使用jsx 语法 jsx语法可以更好地跟Typescript结合 在阅读UI框架源码时，发现在知名UI组件库Ant Design Vue跟Naive UI皆使用tsx语法开发
|
||
vite-svg-loader
|
||
|
||
|
||
|
||
#### 参考
|
||
|
||
vite
|
||
vue3
|
||
pinia 中文文档 :类vuex
|
||
vue-router
|
||
Tdesign
|
||
Tdesign-cli
|
||
|
||
tsconfig.json配置
|
||
#### 文档
|
||
tsconfig.json 配置整理
|
||
vite.config.js vite配置文件
|
||
|
||
src/config/proxy.ts 后端地址配置，
|
||
|
||
release：生成环境下的后端地址，使用npm run build有效 ，
|
||
|
||
vite.config.ts：配置npm run dev的代理地址
|
||
|