customer-user-system

鲸灵客服中心用户端

基本架构

1. 此项目包含客服中心渲染用户端页面所需的 UI 组件、业务组件、业务功能 JS 文件、图片等资源
2. 项目内部提供预览页面，供开发联调使用
3. 项目打包产出一个 npm 包文件，供业务线中通过 npm install 方式引入使用，通过调用暴露的 init 方法初始化用户端客服界面
4. 项目使用 webuy-webpack 脚手架生成基本架构和目录组织（vue、webpack、webuy-ui、webuylibs、scss）
5. 项目开发使用 vue-jsx 语法，webpack 升级 4.x 版本，babel 升级 7.x 版本

目录结构

lib/                    打包后库文件
dist/                   打包后预览文件
packages/api/           按模块划分接口api
packages/assets/        scss、雪碧图
packages/common/        通用js、scss
packages/components     业务组件
packages/service/       服务逻辑
packages/store/         数据中心
packages/ui/            ui组件
packages/utils/         通用方法
packages/index.js       库入口文件
packages/index.vue      库根组件
src/                    业务预览页面

UI 组件

1. ChatMessage 文本（含表情）消息
2. ChatWrap 聊天对话气泡(含昵称、头像)
3. SystemMessage 系统消息
4. ImageMessage 图片消息
5. VideoMessage 视频消息
6. TimeMessage 时间消息
7. VideoMessage 视频播放

业务组件

1. LineMessageCard 排队消息卡片
2. GoodsMessageCard 商品消息卡片
3. OrderMessageCard 订单消息卡片
4. ReplyMessageCard 评价消息卡片
5. OrderPopup 订单消息弹窗
6. BottomBanner 加号按钮弹窗
7. GoodsSendCard 携带商品卡片
8. MessageList 消息列表
9. MessageTemplate 消息类型解析
10. OrderCard 订单（子订单列表内）

通用方法

1. getImageTemplateSize() // 获取聊天窗口中图片/视频资源模版尺寸
2. getImageSize() // 获取 oss 图片资源尺寸后缀
3. timeHandler() // 消息时间计算规则

三方库和插件

1. qq 基础表情包（base64 格式）emoji.min.js
2. wx SDK jweixin-1.3.2.js
3. im 依赖 json2.js webim.min.js
4. 测试环境引入 vconsole.min.js

图片资源

1. 内部 icon 图片资源统一用雪碧图

相关命令

# 发布npm测试包
npm version prerelease
npm publish --tag beta

# 依赖安装
npm install

# 本地启动
npm run dev --env=xxx

# 库打包
npm run build --env=xxx

# 预览打包
npm run preview --env=xxx

参考文档
[本模版gitlab仓库](http://gitlab.webuy.ai/lib/webuy-webpack)
[git模版下载工具](https://www.npmjs.com/package/download-git-repo)
[官方webpack模版](http://vuejs-templates.github.io/webpack/)
[vue-loader文档](http://vuejs.github.io/vue-loader)