├── .eslintignore ├── .gitignore ├── IChat-vue3.zip ├── IChat群聊演示.zip ├── LICENSE ├── README.en.md ├── README.md ├── babel.config.js ├── doc └── img │ ├── Ailpay.png │ ├── IChat-Say.png │ ├── IChat-group.png │ ├── IChat-group_info.png │ ├── IChat-system.png │ ├── MChat-group.png │ ├── MChat-say.png │ ├── Wechat.png │ ├── demo_1.png │ ├── demo_gif.gif │ ├── icon │ ├── Chrome.png │ ├── Firefox.png │ ├── Safari.png │ └── ie10.png │ ├── mchatIndexDemo.png │ ├── play.png │ ├── qq_group.png │ ├── sample_1.png │ └── vue_mchat_demo.gif ├── package.json ├── packages ├── IChat │ ├── index.js │ └── src │ │ ├── index.vue │ │ └── store │ │ ├── cache.js │ │ ├── helper.js │ │ ├── index.js │ │ └── watcher.js ├── MChat │ ├── chatTabs.vue │ ├── index.js │ └── index.vue ├── chat │ ├── chatList.vue │ ├── convertContext.js │ ├── emoji.js │ ├── emoji │ │ ├── 0.gif │ │ ├── 1.gif │ │ ├── 10.gif │ │ ├── 11.gif │ │ ├── 12.gif │ │ ├── 13.gif │ │ ├── 14.gif │ │ ├── 15.gif │ │ ├── 16.gif │ │ ├── 17.gif │ │ ├── 18.gif │ │ ├── 19.gif │ │ ├── 2.gif │ │ ├── 20.gif │ │ ├── 21.gif │ │ ├── 22.gif │ │ ├── 23.gif │ │ ├── 24.gif │ │ ├── 25.gif │ │ ├── 26.gif │ │ ├── 27.gif │ │ ├── 28.gif │ │ ├── 29.gif │ │ ├── 3.gif │ │ ├── 30.gif │ │ ├── 31.gif │ │ ├── 32.gif │ │ ├── 33.gif │ │ ├── 34.gif │ │ ├── 35.gif │ │ ├── 36.gif │ │ ├── 37.gif │ │ ├── 38.gif │ │ ├── 39.gif │ │ ├── 4.gif │ │ ├── 40.gif │ │ ├── 41.gif │ │ ├── 42.gif │ │ ├── 43.gif │ │ ├── 44.gif │ │ ├── 45.gif │ │ ├── 46.gif │ │ ├── 47.gif │ │ ├── 48.gif │ │ ├── 49.gif │ │ ├── 5.gif │ │ ├── 50.gif │ │ ├── 51.gif │ │ ├── 52.gif │ │ ├── 53.gif │ │ ├── 54.gif │ │ ├── 55.gif │ │ ├── 56.gif │ │ ├── 57.gif │ │ ├── 58.gif │ │ ├── 59.gif │ │ ├── 6.gif │ │ ├── 60.gif │ │ ├── 61.gif │ │ ├── 62.gif │ │ ├── 63.gif │ │ ├── 64.gif │ │ ├── 65.gif │ │ ├── 66.gif │ │ ├── 67.gif │ │ ├── 68.gif │ │ ├── 69.gif │ │ ├── 7.gif │ │ ├── 70.gif │ │ ├── 71.gif │ │ ├── 8.gif │ │ └── 9.gif │ ├── enterBox.vue │ ├── index.vue │ └── tools.vue ├── element │ ├── dialog │ │ ├── index.js │ │ └── index.vue │ ├── icon │ │ ├── index.js │ │ └── src │ │ │ └── icon.vue │ ├── message-box │ │ ├── index.js │ │ └── src │ │ │ ├── main.js │ │ │ └── main.vue │ ├── notification │ │ ├── index.js │ │ └── src │ │ │ ├── main.js │ │ │ └── main.vue │ └── popover │ │ ├── index.js │ │ └── src │ │ ├── directive.js │ │ └── main.vue ├── groupList │ ├── component │ │ ├── NoticeBox.vue │ │ ├── UserItem.vue │ │ └── UserList.vue │ ├── index.js │ └── index.vue ├── index.js ├── main │ ├── index.js │ └── src │ │ ├── main.vue │ │ └── page │ │ ├── chatPage │ │ ├── content │ │ │ ├── chat │ │ │ │ ├── chatList.vue │ │ │ │ ├── convertContext.js │ │ │ │ ├── drawer │ │ │ │ │ ├── NoticeBox.vue │ │ │ │ │ ├── UserItem.vue │ │ │ │ │ ├── UserList.vue │ │ │ │ │ └── index.vue │ │ │ │ ├── emoji.js │ │ │ │ ├── emoji │ │ │ │ │ ├── 0.gif │ │ │ │ │ ├── 1.gif │ │ │ │ │ ├── 10.gif │ │ │ │ │ ├── 11.gif │ │ │ │ │ ├── 12.gif │ │ │ │ │ ├── 13.gif │ │ │ │ │ ├── 14.gif │ │ │ │ │ ├── 15.gif │ │ │ │ │ ├── 16.gif │ │ │ │ │ ├── 17.gif │ │ │ │ │ ├── 18.gif │ │ │ │ │ ├── 19.gif │ │ │ │ │ ├── 2.gif │ │ │ │ │ ├── 20.gif │ │ │ │ │ ├── 21.gif │ │ │ │ │ ├── 22.gif │ │ │ │ │ ├── 23.gif │ │ │ │ │ ├── 24.gif │ │ │ │ │ ├── 25.gif │ │ │ │ │ ├── 26.gif │ │ │ │ │ ├── 27.gif │ │ │ │ │ ├── 28.gif │ │ │ │ │ ├── 29.gif │ │ │ │ │ ├── 3.gif │ │ │ │ │ ├── 30.gif │ │ │ │ │ ├── 31.gif │ │ │ │ │ ├── 32.gif │ │ │ │ │ ├── 33.gif │ │ │ │ │ ├── 34.gif │ │ │ │ │ ├── 35.gif │ │ │ │ │ ├── 36.gif │ │ │ │ │ ├── 37.gif │ │ │ │ │ ├── 38.gif │ │ │ │ │ ├── 39.gif │ │ │ │ │ ├── 4.gif │ │ │ │ │ ├── 40.gif │ │ │ │ │ ├── 41.gif │ │ │ │ │ ├── 42.gif │ │ │ │ │ ├── 43.gif │ │ │ │ │ ├── 44.gif │ │ │ │ │ ├── 45.gif │ │ │ │ │ ├── 46.gif │ │ │ │ │ ├── 47.gif │ │ │ │ │ ├── 48.gif │ │ │ │ │ ├── 49.gif │ │ │ │ │ ├── 5.gif │ │ │ │ │ ├── 50.gif │ │ │ │ │ ├── 51.gif │ │ │ │ │ ├── 52.gif │ │ │ │ │ ├── 53.gif │ │ │ │ │ ├── 54.gif │ │ │ │ │ ├── 55.gif │ │ │ │ │ ├── 56.gif │ │ │ │ │ ├── 57.gif │ │ │ │ │ ├── 58.gif │ │ │ │ │ ├── 59.gif │ │ │ │ │ ├── 6.gif │ │ │ │ │ ├── 60.gif │ │ │ │ │ ├── 61.gif │ │ │ │ │ ├── 62.gif │ │ │ │ │ ├── 63.gif │ │ │ │ │ ├── 64.gif │ │ │ │ │ ├── 65.gif │ │ │ │ │ ├── 66.gif │ │ │ │ │ ├── 67.gif │ │ │ │ │ ├── 68.gif │ │ │ │ │ ├── 69.gif │ │ │ │ │ ├── 7.gif │ │ │ │ │ ├── 70.gif │ │ │ │ │ ├── 71.gif │ │ │ │ │ ├── 8.gif │ │ │ │ │ └── 9.gif │ │ │ │ ├── enterBox.vue │ │ │ │ ├── index.vue │ │ │ │ └── tools.vue │ │ │ ├── index.vue │ │ │ └── message │ │ │ │ └── index.vue │ │ ├── index.vue │ │ └── tabs │ │ │ └── index.vue │ │ └── manage │ │ ├── content │ │ ├── friend.vue │ │ ├── group.vue │ │ └── index.vue │ │ ├── index.vue │ │ └── tabItem.vue ├── mixins │ └── emitter.js ├── rightBox │ ├── index.js │ ├── index.vue │ └── util.js ├── static │ ├── images │ │ ├── default_avatar.png │ │ └── unnotic.png │ └── media │ │ ├── default.wav │ │ └── tip.wav ├── styles │ ├── animation.scss │ ├── apply-box.scss │ ├── common │ │ └── var.scss │ ├── dialog.scss │ ├── iChat.scss │ ├── icon │ │ ├── demo.css │ │ ├── demo_index.html │ │ ├── iconfont.css │ │ ├── iconfont.eot │ │ ├── iconfont.js │ │ ├── iconfont.json │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 │ ├── im.scss │ ├── index.scss │ ├── massage-box.scss │ ├── mixins │ │ ├── config.scss │ │ ├── function.scss │ │ ├── mixins.scss │ │ └── utils.scss │ ├── notification.scss │ ├── popover.scss │ ├── popper.scss │ └── variables.scss ├── system │ └── apply │ │ ├── index.js │ │ └── src │ │ ├── main.js │ │ └── main.vue └── util │ ├── StringUtil.js │ ├── aria-dialog.js │ ├── aria-utils.js │ ├── cache.js │ ├── constant.js │ ├── dom.js │ ├── eventHub.js │ ├── layer.js │ ├── merge.js │ ├── play.js │ ├── popup │ ├── index.js │ ├── popper.js │ └── popup-manager.js │ ├── scroll.js │ ├── scrollbar-width.js │ ├── types.js │ ├── util.js │ ├── validate.js │ ├── vdom.js │ └── vue-popper.js ├── public ├── avatar │ ├── avatar_ax.png │ ├── avatar_meteor.png │ ├── bi.png │ ├── chuyin.png │ ├── group_msdt.jpg │ ├── group_pxzx.png │ ├── group_xxtx.png │ ├── heiqi.png │ ├── kailu.png │ ├── kan.png │ ├── kekeluo.png │ ├── lian.png │ ├── linai.png │ ├── linnai.png │ ├── qq_group.png │ ├── riheli.png │ ├── shengmu.png │ ├── temp1.jpg │ ├── temp2.jpg │ ├── ue.png │ ├── ue1.png │ ├── user_avatar.png │ ├── xue.png │ ├── yalisha.png │ ├── yixu.png │ ├── youjiali.png │ ├── zhenbu.png │ ├── zhenqin.png │ ├── 千歌.png │ ├── 咲恋.png │ ├── 女仆.png │ ├── 深月.png │ └── 美咲.png ├── emoticon │ ├── emoticon_1.jpg │ └── emoticon_pa.png ├── favicon.ico ├── images │ └── group_1.jpg └── index.html ├── src ├── App.vue ├── HelloWord.vue ├── IChatConstant.js ├── Test.vue ├── constant.js ├── main.js ├── readme │ ├── IChatSample.vue │ ├── MChatSample.vue │ └── index.vue └── test │ ├── IChatTest.vue │ ├── MChatTest.vue │ ├── applyTest.vue │ └── dialogTest.vue └── vue.config.js /.eslintignore: -------------------------------------------------------------------------------- 1 | *.sh 2 | node_modules 3 | lib 4 | *.md 5 | *.scss 6 | *.woff 7 | *.ttf -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | lib 5 | package-lock.json 6 | 7 | # local env files 8 | .env.local 9 | .env.*.local 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | **/*.log 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /IChat-vue3.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/IChat-vue3.zip -------------------------------------------------------------------------------- /IChat群聊演示.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/IChat群聊演示.zip -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018-present july-meteor 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.en.md: -------------------------------------------------------------------------------- 1 |

2 |

3 | MChat

4 | 5 |

6 | 7 |

8 | 9 | vue 10 | 11 | 12 | Build Status 13 | 14 | 15 | 16 | license 17 | 18 |

19 | 20 | 简体中文 | [English](README.en.md) 21 | 22 | # 如果觉得还行,请给一个👉 star,谢谢😎 ! 有疑问请加群。 23 | 24 | ## 简介 25 | 26 | ### 这是一款基于 vue.js 开发的聊天室组件库，在提供基础封装的同时，最大程度的增加扩展性。 27 | 28 | 下面是效果演示图： 29 | 30 | ![演示图](/doc/img/vue_mchat_demo.gif) 31 | 32 | MChat组件效果图： 33 | 34 | ![MChat群聊界面](/doc/img/MChat-group.png) 35 | 36 | ![MChat群聊界面1](/doc/img/MChat-say.png) 37 | 38 | IChat组件效果图： 39 | 40 | ![IChat群聊界面](/doc/img/IChat-group.png) 41 | 42 | ![IChat群聊界面1](/doc/img/IChat-Say.png) 43 | 44 | ![IChat群组信息](/doc/img/IChat-group_info.png) 45 | 46 | ![IChat系统消息信息](/doc/img/IChat-system.png) 47 | 48 | ## 项目来由 49 | 50 | ``` 51 | vue-mchat 是本人前端阶段性学习总结的项目，因为并非前端开发工程师所以还是有不少瑕疵。 52 | 53 | 如果有问题或者需求可以加群问，或者提 `Issues`! 54 | ``` 55 | 56 | *** 57 | 58 | #### 如何安装 59 | 60 | * 使用 `npm` 安装 61 | 62 | ``` bash 63 | npm install vue-mchat 64 | ``` 65 | ##### 使用 66 | 67 | 在`main.js`中引入 68 | 69 | ``` bash 70 | # npm 下载方式 71 | // 进入css 72 | import 'MChat/lib/MChat.css' 73 | //引入组件 74 | import MChat from 'MChat' 75 | // 使用vue加载组件 76 | Vue.use(MChat) 77 | # 78 | ``` 79 | 80 | #### 如何进行二次开发 81 | 82 | ##### 方案一： 83 | 84 | 直接将 `pacages` 文件夹复制到你需要的项目，在 `main.js` 中引入 `vue-mchat`: 85 | 86 | ```JavaScript 87 | import App from './App.vue' 88 | import MChat from '../packages/index' 89 | 90 | Vue.use(MChat) 91 | ``` 92 | 93 | ##### 方案二： 94 | 95 | 在 `vue-mchat` 的基础上进行开发，通过打包成js库引入： 96 | 97 | 在 `vue-mchat` 目录下执行： 98 | 99 | ```bash 100 | npm run lib 101 | ``` 102 | 103 | 可获得 `lib` 文件其中包含 `MChat` 的编译文件库，将 `lib` 整个复制到项目里，在 `main.js` 中引入: 104 | 105 | ```JavaScript 106 | import '../lib/MChat.css' 107 | import MChat from '../lib/MChat.umd' 108 | 109 | Vue.use(MChat) 110 | ``` 111 | 112 | ## 🌰 加群获得群聊版本代码 113 | 114 | [群聊演示地址](http://www.julymeteor.com/im/) 115 | [文档-示例](http://www.julymeteor.com/chat/) 116 | 117 | ## QQ交流群 118 | 119 | ![共同进步](/doc/img/qq_group.png) 120 | 121 | ## Browsers support 122 | 123 | Modern browsers and Internet Explorer 10+. 124 | 125 | | ![IE](/doc/img/icon/ie10.png)
IE / Edge | ![Firefox](/doc/img/icon/Firefox.png)
Firefox | ![Chrome](/doc/img/icon/Chrome.png)
Chrome | ![](/doc/img/icon/Safari.png)
Safari | 126 | | --------- | --------- | --------- | --------- | 127 | | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions 128 | 129 | ## License 130 | 131 | [MIT](/LICENSE) 132 | 133 | Copyright (c) 2020-present july-meteor 134 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |

3 | MChat

4 | 5 |

6 | 7 |

8 | 9 | vue 10 | 11 | 12 | Build Status 13 | 14 | 15 | 16 | license 17 | 18 |

19 | 20 | 简体中文 | [English](README.en.md) 21 | 22 | # 如果觉得还行,请给一个👉 star,谢谢😎 ! 有疑问请加群。 23 | 24 | ## 简介 25 | 26 | ### 这是一款基于 vue.js 开发的聊天室组件库，在提供基础封装的同时，最大程度的增加扩展性。 27 | 28 | 下面是效果演示图： 29 | 30 | ![演示图](/doc/img/vue_mchat_demo.gif) 31 | 32 | MChat组件效果图： 33 | 34 | ![MChat群聊界面](/doc/img/MChat-group.png) 35 | 36 | ![MChat群聊界面1](/doc/img/MChat-say.png) 37 | 38 | IChat组件效果图： 39 | 40 | ![IChat群聊界面](/doc/img/IChat-group.png) 41 | 42 | ![IChat群聊界面1](/doc/img/IChat-Say.png) 43 | 44 | ![IChat群组信息](/doc/img/IChat-group_info.png) 45 | 46 | ![IChat系统消息信息](/doc/img/IChat-system.png) 47 | 48 | ## 项目来由 49 | 50 | ``` 51 | vue-mchat 是本人前端阶段性学习总结的项目，因为并非前端开发工程师所以还是有不少瑕疵。 52 | 53 | 如果有问题或者需求可以加群问，或者提 `Issues`! 54 | ``` 55 | 56 | *** 57 | 58 | #### 如何安装 59 | 60 | * 使用 `npm` 安装 61 | 62 | ``` bash 63 | npm install vue-mchat 64 | ``` 65 | ##### 使用 66 | 67 | 在`main.js`中引入 68 | 69 | ``` bash 70 | # npm 下载方式 71 | // 进入css 72 | import 'MChat/lib/MChat.css' 73 | //引入组件 74 | import MChat from 'MChat' 75 | // 使用vue加载组件 76 | Vue.use(MChat) 77 | # 78 | ``` 79 | 80 | #### 如何进行二次开发 81 | 82 | ##### 方案一： 83 | 84 | 直接将 `pacages` 文件夹复制到你需要的项目，在 `main.js` 中引入 `vue-mchat`: 85 | 86 | ```JavaScript 87 | import App from './App.vue' 88 | import MChat from '../packages/index' 89 | 90 | Vue.use(MChat) 91 | ``` 92 | 93 | ##### 方案二： 94 | 95 | 在 `vue-mchat` 的基础上进行开发，通过打包成js库引入： 96 | 97 | 在 `vue-mchat` 目录下执行： 98 | 99 | ```bash 100 | npm run lib 101 | ``` 102 | 103 | 可获得 `lib` 文件其中包含 `MChat` 的编译文件库，将 `lib` 整个复制到项目里，在 `main.js` 中引入: 104 | 105 | ```JavaScript 106 | import '../lib/MChat.css' 107 | import MChat from '../lib/MChat.umd' 108 | 109 | Vue.use(MChat) 110 | ``` 111 | 112 | ## 演示代码和vue3版本在项目目录下，serve 使用的是 node.js 数据库采用的是 Mongodb 113 | 114 | [群聊演示地址](http://120.77.44.62/im/) 115 | [文档-示例](http://120.77.44.62/) 116 | 117 | ## QQ交流群 118 | 119 | ![共同进步](/doc/img/qq_group.png) 120 | 121 | ## Browsers support 122 | 123 | Modern browsers and Internet Explorer 10+. 124 | 125 | | ![IE](/doc/img/icon/ie10.png)
IE / Edge | ![Firefox](/doc/img/icon/Firefox.png)
Firefox | ![Chrome](/doc/img/icon/Chrome.png)
Chrome | ![](/doc/img/icon/Safari.png)
Safari | 126 | | --------- | --------- | --------- | --------- | 127 | | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions 128 | 129 | ## License 130 | 131 | [MIT](/LICENSE) 132 | 133 | Copyright (c) 2020-present july-meteor 134 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /doc/img/Ailpay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/Ailpay.png -------------------------------------------------------------------------------- /doc/img/IChat-Say.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/IChat-Say.png -------------------------------------------------------------------------------- /doc/img/IChat-group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/IChat-group.png -------------------------------------------------------------------------------- /doc/img/IChat-group_info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/IChat-group_info.png -------------------------------------------------------------------------------- /doc/img/IChat-system.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/IChat-system.png -------------------------------------------------------------------------------- /doc/img/MChat-group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/MChat-group.png -------------------------------------------------------------------------------- /doc/img/MChat-say.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/MChat-say.png -------------------------------------------------------------------------------- /doc/img/Wechat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/Wechat.png -------------------------------------------------------------------------------- /doc/img/demo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/demo_1.png -------------------------------------------------------------------------------- /doc/img/demo_gif.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/demo_gif.gif -------------------------------------------------------------------------------- /doc/img/icon/Chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/icon/Chrome.png -------------------------------------------------------------------------------- /doc/img/icon/Firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/icon/Firefox.png -------------------------------------------------------------------------------- /doc/img/icon/Safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/icon/Safari.png -------------------------------------------------------------------------------- /doc/img/icon/ie10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/icon/ie10.png -------------------------------------------------------------------------------- /doc/img/mchatIndexDemo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/mchatIndexDemo.png -------------------------------------------------------------------------------- /doc/img/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/play.png -------------------------------------------------------------------------------- /doc/img/qq_group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/qq_group.png -------------------------------------------------------------------------------- /doc/img/sample_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/sample_1.png -------------------------------------------------------------------------------- /doc/img/vue_mchat_demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/doc/img/vue_mchat_demo.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-mchat", 3 | "version": "1.2.0", 4 | "description": "这是一款基于 vue.js 开发的聊天室组件库，在提供基础封装的同时，最大程度的增加扩展性。", 5 | "author": "july-meteor <747718944@qq.com>", 6 | "main": "lib/MChat.umd.min.js", 7 | "private": false, 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/july-meteor/vue-mchat" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/july-meteor/vue-mchat/issues" 14 | }, 15 | "homepage": "https://github.com/july-meteor/vue-mchat/blob/master/README.md", 16 | "unpkg": "lib/MChat.umd.js", 17 | "keywords": [ 18 | "vue", 19 | "IM", 20 | "chat" 21 | ], 22 | "license": "MIT", 23 | "scripts": { 24 | "serve": "vue-cli-service serve", 25 | "build": "vue-cli-service build", 26 | "lint": "vue-cli-service lint", 27 | "lib": "vue-cli-service build --target lib --name MChat --dest lib ./packages/index.js" 28 | }, 29 | "dependencies": { 30 | "iscroll": "^5.2.0", 31 | "vue": "^2.6.11" 32 | }, 33 | "devDependencies": { 34 | "@vue/cli-plugin-babel": "^4.3.1", 35 | "@vue/cli-plugin-eslint": "^4.3.1", 36 | "@vue/cli-service": "^4.3.1", 37 | "babel-eslint": "^10.1.0", 38 | "core-js": "^3.6.5", 39 | "eslint": "^6.8.0", 40 | "eslint-plugin-vue": "^6.2.2", 41 | "node-sass": "^4.13.1", 42 | "sass-loader": "^8.0.2", 43 | "vue-template-compiler": "^2.6.11" 44 | }, 45 | "eslintConfig": { 46 | "root": true, 47 | "env": { 48 | "node": true 49 | }, 50 | "extends": [ 51 | "plugin:vue/essential", 52 | "eslint:recommended" 53 | ], 54 | "parserOptions": { 55 | "parser": "babel-eslint" 56 | }, 57 | "rules": {} 58 | }, 59 | "browserslist": [ 60 | "> 1%", 61 | "last 2 versions", 62 | "not dead" 63 | ], 64 | "files": [ 65 | "lib", 66 | "README.md", 67 | "LICENSE" 68 | ] 69 | } 70 | -------------------------------------------------------------------------------- /packages/IChat/index.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * chat interface 插槽 4 | */ 5 | 6 | // 导入组件，组件必须声明 name 7 | import IChat from './src' 8 | 9 | IChat.install = function (Vue) { 10 | Vue.component(IChat.name, IChat) 11 | } 12 | 13 | export default IChat -------------------------------------------------------------------------------- /packages/IChat/src/store/cache.js: -------------------------------------------------------------------------------- 1 | 2 | import { setStore, getStore, removeStore ,clearStore} from '../../../util/cache' 3 | 4 | /** 5 | * 这里对cache类型进行封装 6 | * 目前的需求 缓存类型并不适合使用 cookies作为存储方案 7 | * 8 | */ 9 | 10 | 11 | 12 | export const setCache = (key, params, type = 'session') => { 13 | 14 | setStore({ name: key, content: params, type }) 15 | } 16 | 17 | export const getCache = (key) => { 18 | return getStore({ name: key }) || undefined; 19 | } 20 | 21 | 22 | export const removeCache = (key) => { 23 | removeStore({ name: key }) 24 | } 25 | 26 | export const clearCache = ()=>{ 27 | clearStore({type:true}) 28 | } -------------------------------------------------------------------------------- /packages/IChat/src/store/helper.js: -------------------------------------------------------------------------------- 1 | import Store from './index' 2 | 3 | export function createStore(initialState ={}) { 4 | const store = new Store(); 5 | // 装填 配置 6 | Object.keys(initialState).forEach(key => { 7 | store.states[key] = initialState[key]; 8 | }); 9 | return store; 10 | } 11 | 12 | export function mapStates(mapper) { 13 | const res = {}; 14 | Object.keys(mapper).forEach(key => { 15 | const value = mapper[key]; 16 | let fn; 17 | if (typeof value === 'string') { 18 | fn = function() { 19 | return this.store.states[value]; 20 | }; 21 | } else if (typeof value === 'function') { 22 | fn = function() { 23 | return value.call(this, this.store.states); 24 | }; 25 | } else { 26 | console.error('invalid value type'); 27 | } 28 | if (fn) { 29 | res[key] = fn; 30 | } 31 | }); 32 | return res; 33 | }; 34 | 35 | 36 | -------------------------------------------------------------------------------- /packages/IChat/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Watcher from './watcher' 2 | 3 | /** 4 | * channel 的数据过滤列表 5 | */ 6 | const channel_group_model = ["id", 'name', 'type', 'userList', 'notices', 'avatar']; 7 | const channel_friend_model = ["id", 'name', 'type', 'online', 'avatar']; 8 | 9 | import { setCache, removeCache } from './cache' 10 | 11 | /** 12 | * cache key 13 | */ 14 | const key_channels = 'key_channels' 15 | const key_sys_msg = 'key_sys_msg' 16 | 17 | 18 | Watcher.prototype.mutations = { 19 | 20 | setFriends(states, friends) 21 | { 22 | states.friends = friends; 23 | }, 24 | // 针对单人删除 25 | setFriend(states, item) { 26 | 27 | }, 28 | 29 | setGroups(states, groups) { 30 | states.groups = groups; 31 | }, 32 | //对话排序变更 33 | changeChannel() { 34 | 35 | 36 | }, 37 | // 插入对话 38 | insertChannel(states, channel) { 39 | states.channel.unshift(filterChannelParams(channel)); 40 | setCache(key_channels, states.channel); 41 | }, 42 | // 替换 43 | replaceChannel(states, channel) { 44 | const { id, type } = channel; 45 | let len = states.channel.length; 46 | if (len < 1) { 47 | return 48 | } 49 | for (let i = 0; i < len; i++) { 50 | let model = states.channel[i] 51 | if (model.id === id && model.type === type) { 52 | replaceChannelParams(channel, model); 53 | break; 54 | } 55 | } 56 | setCache(key_channels, states.channel); 57 | }, 58 | // 删除对话 59 | removeChannel(states, index) { 60 | // delete 会留下 空项 61 | // delete states.channel[index] 62 | states.channel.splice(index, 1) 63 | setCache(key_channels, states.channel); 64 | }, 65 | //设置系统消息 66 | setSystemMessage(states, data) { 67 | states.systemMessage.messages = data; 68 | }, 69 | // 插入新的消息 70 | updateSystemMessage(states, message) { 71 | let len = states.systemMessage.messages.length; 72 | let mark = -1; 73 | for (let i = 0; i < len; i++) { 74 | let item = states.systemMessage.messages[i]; 75 | if (item.id === message.id) { 76 | mark = i; 77 | break; 78 | } 79 | } 80 | if (mark < 0) { 81 | states.systemMessage.messages.push(message); 82 | } else { 83 | states.systemMessage.messages[mark] = message; 84 | } 85 | } 86 | } 87 | 88 | function indexSystemMessage(list = []) { 89 | let channels = list; 90 | let len = channels.length; 91 | for (let i = 0; i < len; i++) { 92 | let model = channels[i] 93 | if (model.id === -1 && model.type === "sys_msg") { 94 | return i; 95 | } 96 | } 97 | } 98 | /** 99 | * 100 | * 过滤一些非必要属性 101 | * @param {*} channel 102 | */ 103 | function filterChannelParams(channel) { 104 | let data = {}, filters = []; 105 | if (channel.type === 'group') { 106 | filters = channel_group_model; 107 | } else if (channel.type === 'friend') { 108 | filters = channel_friend_model; 109 | } else if (channel.type === 'sys_msg') { 110 | return channel; 111 | } 112 | 113 | for (let key of filters) { 114 | data[key] = channel[key]; 115 | } 116 | return data; 117 | } 118 | 119 | /** 120 | * 121 | * 上面注释掉的方法是为了警示自己。 122 | * 上方 的方法和这个方法的本质差别在于一个是过滤出新的对象，一个是改变对象的引用 123 | * 对应组件中改变的是chat这个属性，里面内容改变vue是无法监听到的。 124 | * 125 | * @param {*} data 126 | * @param {*} channel 127 | */ 128 | function replaceChannelParams(data, channel) { 129 | let filters = []; 130 | if (data.type === 'group') { 131 | filters = channel_group_model; 132 | } else if (data.type === 'friend') { 133 | filters = channel_friend_model; 134 | } else if (data.type === 'sys_msg') { 135 | channel = data; 136 | } 137 | for (let key of filters) { 138 | channel[key] = data[key]; 139 | } 140 | } 141 | 142 | 143 | // 提交属性 144 | Watcher.prototype.commit = function (name, ...args) { 145 | const mutations = this.mutations; 146 | if (mutations[name]) { 147 | mutations[name].apply(this, [this.states].concat(args)); 148 | } else { 149 | throw new Error(`Action not found: ${name}`); 150 | } 151 | }; 152 | export default Watcher; -------------------------------------------------------------------------------- /packages/MChat/index.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * chat interface 插槽 4 | */ 5 | 6 | // 导入组件，组件必须声明 name 7 | import MChat from './index.vue' 8 | // import '../styles/im.scss' 9 | 10 | 11 | MChat.install = function (Vue) { 12 | Vue.component(MChat.name, MChat) 13 | } 14 | 15 | export default MChat -------------------------------------------------------------------------------- /packages/chat/convertContext.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 用得到的工具类 3 | */ 4 | import emojis from "./emoji"; 5 | 6 | 7 | //转换 聊天内容 8 | export function ConvertContext(content) { 9 | //支持的html标签 10 | var html = function (end) { 11 | return new RegExp('\\n*\\[' + (end || '') + '(pre|div|p|table|thead|th|tbody|tr|td|ul|li|ol|li|dl|dt|dd|h2|h3|h4|h5)([\\s\\S]*?)\\]\\n*', 'g'); 12 | }; 13 | content = (content || '').replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&') 14 | .replace(//g, '>').replace(/'/g, ''').replace(/"/g, '"') //XSS 15 | .replace(/@(\S+)(\s+?|$)/g, '@$1$2') //转义@ 16 | // .replace(/\s{2}/g, ' ') //转义空格 17 | .replace(/img\[([^\s]+?)\]/g, function (img) { //转义图片 18 | return ''; 19 | }) 20 | .replace(/file\([\s\S]+?\)\[[\s\S]*?\]/g, function (str) { //转义文件 21 | var href = (str.match(/file\(([\s\S]+?)\)\[/) || [])[1]; 22 | var text = (str.match(/\)\[([\s\S]*?)\]/) || [])[1]; 23 | if (!href) return str; 24 | return '' + (text || href) + ''; 25 | }) 26 | .replace(/emoji\[([^\s[\]]+?)\]/g, function (emoji) { //转义表情 27 | var alt = emoji.replace(/^emoji/g, ''); 28 | return '' + alt + ''; 29 | }).replace(/audio\[([^\s]+?)\]/g, function (i) { 30 | return '
' 31 | }).replace(/video\[([^\s]+?)\]/g, function (i) { 32 | return '' 33 | }).replace(/a\([\s\S]+?\)\[[\s\S]*?\]/g, function (str) { //转义链接 34 | var href = (str.match(/a\(([\s\S]+?)\)\[/) || [])[1]; 35 | var text = (str.match(/\)\[([\s\S]*?)\]/) || [])[1]; 36 | if (!href) return str; 37 | return '' + (text || href) + ''; 38 | }).replace(html(), '<$1 $2>').replace(html('/'), '') //转移HTML代码 39 | .replace(/\n/g, '
') 40 | //转义换行 41 | 42 | return (content); 43 | 44 | } 45 | 46 | 47 | 48 | 49 | 50 | 51 | export function ConvertRecord(data) { 52 | let contenxt = ConvertContext(data.content); 53 | let tiem = dateFormat(data.timestamp) 54 | let leftName = data.mine ? "" : data.username; 55 | let rightName = data.mine ? data.username : ""; 56 | 57 | let mineHtml = data.mine ? "class='layim-chat-mine'" : "" 58 | let htmlContext = "
  • " 59 | htmlContext += "
    " 60 | htmlContext += "" + leftName + "" + tiem + "" + rightName + "
    " 61 | htmlContext += "
    " + contenxt + "
    • " 62 | 63 | return htmlContext; 64 | } 65 | 66 | //补齐数位 67 | var digit = function (num) { 68 | return num < 10 ? '0' + (num | 0) : num; 69 | }; 70 | 71 | export function dateFormat(timestamp) { 72 | var d = new Date(timestamp || new Date()); 73 | return d.getFullYear() + '-' + digit(d.getMonth() + 1) + '-' + digit(d.getDate()) 74 | + ' ' + digit(d.getHours()) + ':' + digit(d.getMinutes()) + ':' + digit(d.getSeconds()); 75 | } 76 | 77 | -------------------------------------------------------------------------------- /packages/chat/emoji.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 表情库 3 | * 4 | * 5 | */ 6 | 7 | const emoji_dir = './emoji/' 8 | 9 | //表情库 10 | var emojis = function () { 11 | var alt = ["[微笑]", "[嘻嘻]", "[哈哈]", "[可爱]", "[可怜]", "[挖鼻]", "[吃惊]", "[害羞]", "[挤眼]", "[闭嘴]", "[鄙视]", "[爱你]", "[泪]", "[偷笑]", "[亲亲]", "[生病]", "[太开心]", "[白眼]", "[右哼哼]", "[左哼哼]", "[嘘]", "[衰]", "[委屈]", "[吐]", "[哈欠]", "[抱抱]", "[怒]", "[疑问]", "[馋嘴]", "[拜拜]", "[思考]", "[汗]", "[困]", "[睡]", "[钱]", "[失望]", "[酷]", "[色]", "[哼]", "[鼓掌]", "[晕]", "[悲伤]", "[抓狂]", "[黑线]", "[阴险]", "[怒骂]", "[互粉]", "[心]", "[伤心]", "[猪头]", "[熊猫]", "[兔子]", "[ok]", "[耶]", "[good]", "[NO]", "[赞]", "[来]", "[弱]", "[草泥马]", "[神马]", "[囧]", "[浮云]", "[给力]", "[围观]", "[威武]", "[奥特曼]", "[礼物]", "[钟]", "[话筒]", "[蜡烛]", "[蛋糕]"], arr = {}; 12 | alt.forEach((item, index) => { 13 | arr[item] = require( emoji_dir + index + '.gif'); 14 | }); 15 | return arr 16 | }(); 17 | 18 | 19 | export default emojis 20 | -------------------------------------------------------------------------------- /packages/chat/emoji/0.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/0.gif -------------------------------------------------------------------------------- /packages/chat/emoji/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/1.gif -------------------------------------------------------------------------------- /packages/chat/emoji/10.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/10.gif -------------------------------------------------------------------------------- /packages/chat/emoji/11.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/11.gif -------------------------------------------------------------------------------- /packages/chat/emoji/12.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/12.gif -------------------------------------------------------------------------------- /packages/chat/emoji/13.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/13.gif -------------------------------------------------------------------------------- /packages/chat/emoji/14.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/14.gif -------------------------------------------------------------------------------- /packages/chat/emoji/15.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/15.gif -------------------------------------------------------------------------------- /packages/chat/emoji/16.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/16.gif -------------------------------------------------------------------------------- /packages/chat/emoji/17.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/17.gif -------------------------------------------------------------------------------- /packages/chat/emoji/18.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/18.gif -------------------------------------------------------------------------------- /packages/chat/emoji/19.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/19.gif -------------------------------------------------------------------------------- /packages/chat/emoji/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/2.gif -------------------------------------------------------------------------------- /packages/chat/emoji/20.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/20.gif -------------------------------------------------------------------------------- /packages/chat/emoji/21.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/21.gif -------------------------------------------------------------------------------- /packages/chat/emoji/22.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/22.gif -------------------------------------------------------------------------------- /packages/chat/emoji/23.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/23.gif -------------------------------------------------------------------------------- /packages/chat/emoji/24.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/24.gif -------------------------------------------------------------------------------- /packages/chat/emoji/25.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/25.gif -------------------------------------------------------------------------------- /packages/chat/emoji/26.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/26.gif -------------------------------------------------------------------------------- /packages/chat/emoji/27.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/27.gif -------------------------------------------------------------------------------- /packages/chat/emoji/28.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/28.gif -------------------------------------------------------------------------------- /packages/chat/emoji/29.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/29.gif -------------------------------------------------------------------------------- /packages/chat/emoji/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/3.gif -------------------------------------------------------------------------------- /packages/chat/emoji/30.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/30.gif -------------------------------------------------------------------------------- /packages/chat/emoji/31.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/31.gif -------------------------------------------------------------------------------- /packages/chat/emoji/32.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/32.gif -------------------------------------------------------------------------------- /packages/chat/emoji/33.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/33.gif -------------------------------------------------------------------------------- /packages/chat/emoji/34.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/34.gif -------------------------------------------------------------------------------- /packages/chat/emoji/35.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/35.gif -------------------------------------------------------------------------------- /packages/chat/emoji/36.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/36.gif -------------------------------------------------------------------------------- /packages/chat/emoji/37.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/37.gif -------------------------------------------------------------------------------- /packages/chat/emoji/38.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/38.gif -------------------------------------------------------------------------------- /packages/chat/emoji/39.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/39.gif -------------------------------------------------------------------------------- /packages/chat/emoji/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/4.gif -------------------------------------------------------------------------------- /packages/chat/emoji/40.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/40.gif -------------------------------------------------------------------------------- /packages/chat/emoji/41.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/41.gif -------------------------------------------------------------------------------- /packages/chat/emoji/42.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/42.gif -------------------------------------------------------------------------------- /packages/chat/emoji/43.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/43.gif -------------------------------------------------------------------------------- /packages/chat/emoji/44.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/44.gif -------------------------------------------------------------------------------- /packages/chat/emoji/45.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/45.gif -------------------------------------------------------------------------------- /packages/chat/emoji/46.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/46.gif -------------------------------------------------------------------------------- /packages/chat/emoji/47.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/47.gif -------------------------------------------------------------------------------- /packages/chat/emoji/48.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/48.gif -------------------------------------------------------------------------------- /packages/chat/emoji/49.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/49.gif -------------------------------------------------------------------------------- /packages/chat/emoji/5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/5.gif -------------------------------------------------------------------------------- /packages/chat/emoji/50.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/50.gif -------------------------------------------------------------------------------- /packages/chat/emoji/51.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/51.gif -------------------------------------------------------------------------------- /packages/chat/emoji/52.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/52.gif -------------------------------------------------------------------------------- /packages/chat/emoji/53.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/53.gif -------------------------------------------------------------------------------- /packages/chat/emoji/54.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/54.gif -------------------------------------------------------------------------------- /packages/chat/emoji/55.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/55.gif -------------------------------------------------------------------------------- /packages/chat/emoji/56.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/56.gif -------------------------------------------------------------------------------- /packages/chat/emoji/57.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/57.gif -------------------------------------------------------------------------------- /packages/chat/emoji/58.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/58.gif -------------------------------------------------------------------------------- /packages/chat/emoji/59.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/59.gif -------------------------------------------------------------------------------- /packages/chat/emoji/6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/6.gif -------------------------------------------------------------------------------- /packages/chat/emoji/60.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/60.gif -------------------------------------------------------------------------------- /packages/chat/emoji/61.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/61.gif -------------------------------------------------------------------------------- /packages/chat/emoji/62.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/62.gif -------------------------------------------------------------------------------- /packages/chat/emoji/63.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/63.gif -------------------------------------------------------------------------------- /packages/chat/emoji/64.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/64.gif -------------------------------------------------------------------------------- /packages/chat/emoji/65.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/65.gif -------------------------------------------------------------------------------- /packages/chat/emoji/66.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/66.gif -------------------------------------------------------------------------------- /packages/chat/emoji/67.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/67.gif -------------------------------------------------------------------------------- /packages/chat/emoji/68.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/68.gif -------------------------------------------------------------------------------- /packages/chat/emoji/69.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/69.gif -------------------------------------------------------------------------------- /packages/chat/emoji/7.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/7.gif -------------------------------------------------------------------------------- /packages/chat/emoji/70.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/70.gif -------------------------------------------------------------------------------- /packages/chat/emoji/71.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/71.gif -------------------------------------------------------------------------------- /packages/chat/emoji/8.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/8.gif -------------------------------------------------------------------------------- /packages/chat/emoji/9.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/chat/emoji/9.gif -------------------------------------------------------------------------------- /packages/chat/enterBox.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/chat/tools.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 105 | 106 | -------------------------------------------------------------------------------- /packages/element/dialog/index.js: -------------------------------------------------------------------------------- 1 | import MDialog from './index.vue' 2 | 3 | MDialog.install = function (Vue) { 4 | Vue.component(MDialog.name, MDialog) 5 | } 6 | 7 | export default MDialog -------------------------------------------------------------------------------- /packages/element/icon/index.js: -------------------------------------------------------------------------------- 1 | import MIcon from './src/icon.vue'; 2 | 3 | /* istanbul ignore next */ 4 | MIcon.install = function(Vue) { 5 | Vue.component(MIcon.name, MIcon); 6 | }; 7 | 8 | export default MIcon; 9 | -------------------------------------------------------------------------------- /packages/element/icon/src/icon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /packages/element/message-box/index.js: -------------------------------------------------------------------------------- 1 | import MessageBox from './src/main.js'; 2 | export default MessageBox; 3 | -------------------------------------------------------------------------------- /packages/element/notification/index.js: -------------------------------------------------------------------------------- 1 | import Notification from './src/main.js'; 2 | export default Notification; 3 | -------------------------------------------------------------------------------- /packages/element/notification/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Main from './main.vue'; 3 | import merge from '../../../util/merge'; 4 | import { isVNode } from '../../../util/vdom'; 5 | import { PopupManager } from '../../../util/popup'; 6 | 7 | const NotificationConstructor = Vue.extend(Main); 8 | 9 | let instance; 10 | let instances = []; 11 | let seed = 1; 12 | 13 | const Notification = function(options) { 14 | if (Vue.prototype.$isServer) return; 15 | options = merge({}, options); 16 | const userOnClose = options.onClose; 17 | const id = 'notification_' + seed++; 18 | const position = options.position || 'top-right'; 19 | 20 | options.onClose = function() { 21 | Notification.close(id, userOnClose); 22 | }; 23 | 24 | instance = new NotificationConstructor({ 25 | data: options 26 | }); 27 | 28 | if (isVNode(options.message)) { 29 | instance.$slots.default = [options.message]; 30 | options.message = 'REPLACED_BY_VNODE'; 31 | } 32 | instance.id = id; 33 | instance.$mount(); 34 | document.body.appendChild(instance.$el); 35 | instance.visible = true; 36 | instance.dom = instance.$el; 37 | instance.dom.style.zIndex = PopupManager.nextZIndex(); 38 | 39 | let verticalOffset = options.offset || 0; 40 | instances.filter(item => item.position === position).forEach(item => { 41 | verticalOffset += item.$el.offsetHeight + 16; 42 | }); 43 | verticalOffset += 16; 44 | instance.verticalOffset = verticalOffset; 45 | instances.push(instance); 46 | return instance; 47 | }; 48 | 49 | ['success', 'warning', 'info', 'error'].forEach(type => { 50 | Notification[type] = options => { 51 | if (typeof options === 'string' || isVNode(options)) { 52 | options = { 53 | message: options 54 | }; 55 | } 56 | options.type = type; 57 | return Notification(options); 58 | }; 59 | }); 60 | 61 | Notification.close = function(id, userOnClose) { 62 | let index = -1; 63 | const len = instances.length; 64 | const instance = instances.filter((instance, i) => { 65 | if (instance.id === id) { 66 | index = i; 67 | return true; 68 | } 69 | return false; 70 | })[0]; 71 | if (!instance) return; 72 | 73 | if (typeof userOnClose === 'function') { 74 | userOnClose(instance); 75 | } 76 | instances.splice(index, 1); 77 | 78 | if (len <= 1) return; 79 | const position = instance.position; 80 | const removedHeight = instance.dom.offsetHeight; 81 | for (let i = index; i < len - 1 ; i++) { 82 | if (instances[i].position === position) { 83 | instances[i].dom.style[instance.verticalProperty] = 84 | parseInt(instances[i].dom.style[instance.verticalProperty], 10) - removedHeight - 16 + 'px'; 85 | } 86 | } 87 | }; 88 | 89 | Notification.closeAll = function() { 90 | for (let i = instances.length - 1; i >= 0; i--) { 91 | instances[i].close(); 92 | } 93 | }; 94 | 95 | export default Notification; 96 | -------------------------------------------------------------------------------- /packages/element/notification/src/main.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 152 | 153 | -------------------------------------------------------------------------------- /packages/element/popover/index.js: -------------------------------------------------------------------------------- 1 | import Popover from './src/main'; 2 | import directive from './src/directive'; 3 | import Vue from 'vue'; 4 | 5 | Vue.directive('popover', directive); 6 | 7 | /* istanbul ignore next */ 8 | Popover.install = function(Vue) { 9 | Vue.directive('popover', directive); 10 | Vue.component(Popover.name, Popover); 11 | }; 12 | Popover.directive = directive; 13 | 14 | export default Popover; 15 | -------------------------------------------------------------------------------- /packages/element/popover/src/directive.js: -------------------------------------------------------------------------------- 1 | const getReference = (el, binding, vnode) => { 2 | const _ref = binding.expression ? binding.value : binding.arg; 3 | const popper = vnode.context.$refs[_ref]; 4 | if (popper) { 5 | if (Array.isArray(popper)) { 6 | popper[0].$refs.reference = el; 7 | } else { 8 | popper.$refs.reference = el; 9 | } 10 | } 11 | }; 12 | 13 | export default { 14 | bind(el, binding, vnode) { 15 | getReference(el, binding, vnode); 16 | }, 17 | inserted(el, binding, vnode) { 18 | getReference(el, binding, vnode); 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /packages/groupList/component/NoticeBox.vue: -------------------------------------------------------------------------------- 1 | 15 | 46 | -------------------------------------------------------------------------------- /packages/groupList/component/UserItem.vue: -------------------------------------------------------------------------------- 1 | 14 | 61 | -------------------------------------------------------------------------------- /packages/groupList/component/UserList.vue: -------------------------------------------------------------------------------- 1 | 23 | 66 | 67 | -------------------------------------------------------------------------------- /packages/groupList/index.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * chat interface 插槽 4 | */ 5 | 6 | // 导入组件，组件必须声明 name 7 | import MChatGroupList from './index.vue' 8 | 9 | 10 | MChatGroupList.install = function (Vue) { 11 | Vue.component(MChatGroupList.name, MChatGroupList) 12 | } 13 | 14 | export default MChatGroupList -------------------------------------------------------------------------------- /packages/groupList/index.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /packages/index.js: -------------------------------------------------------------------------------- 1 | import MChat from './MChat' 2 | import EventHub from './util/eventHub' 3 | import MChatRightBox from './rightBox' 4 | import MChatRightList from './groupList' 5 | import MDialog from './element/dialog' 6 | import MIcon from './element/icon' 7 | import MessageBox from './element/message-box' 8 | import MPopver from './element/popover' 9 | import Notification from './element/notification' 10 | import ApplyBox from './system/apply' 11 | import IChat from './IChat' 12 | 13 | 14 | 15 | 16 | import './styles/index.scss' 17 | 18 | 19 | const components = [MChat, MChatRightBox, MChatRightList, MDialog, 20 | MPopver, 21 | MessageBox, 22 | Notification, 23 | ApplyBox, 24 | IChat, 25 | ] 26 | 27 | 28 | 29 | 30 | 31 | // const req = require.context('./SvgIcon/svg/', false, /\.svg$/) 32 | // const requireAll = requireContext => requireContext.keys().map(requireContext) 33 | // const iconMap = requireAll(req) 34 | 35 | 36 | // 初始化 函数 ，需要将 mcaht组件 自动挂载到 app 下 37 | const install = function (Vue) { 38 | if (install.installed) return 39 | install.installed = true 40 | components.forEach(component => { 41 | //自动挂载 42 | Vue.component(component.name, component); 43 | }); 44 | // 45 | //观察者 46 | Vue.prototype.$im = EventHub 47 | /** 48 | * 挂件 49 | */ 50 | Vue.prototype.$IMessage = MessageBox; 51 | Vue.prototype.$IAlert = MessageBox.alert; 52 | Vue.prototype.$IConfirm = MessageBox.confirm; 53 | Vue.prototype.$IPrompt = MessageBox.prompt; 54 | Vue.prototype.$INotify = Notification; 55 | 56 | Vue.prototype.$applyFriend = ApplyBox.applyFriend; 57 | Vue.prototype.$applyGroup = ApplyBox.applyGroup; 58 | Vue.prototype.$confirmGroup = ApplyBox.confirmGroup; 59 | Vue.prototype.$confirmFriend = ApplyBox.confirmFriend; 60 | }; 61 | 62 | 63 | if (typeof window !== 'undefined' && window.Vue) { 64 | install(window.Vue) 65 | } 66 | 67 | 68 | export default { 69 | version: '1.0.0', 70 | install, 71 | ...components 72 | } -------------------------------------------------------------------------------- /packages/main/index.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * chat interface 插槽 4 | */ 5 | 6 | // 导入组件，组件必须声明 name 7 | import ChatMain from './src/main' 8 | 9 | ChatMain.install = function (Vue) { 10 | Vue.component(ChatMain.name, ChatMain) 11 | } 12 | 13 | export default ChatMain -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/convertContext.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 用得到的工具类 3 | */ 4 | import emojis from "./emoji"; 5 | 6 | 7 | //转换 聊天内容 8 | export function ConvertContext(content) { 9 | //支持的html标签 10 | var html = function (end) { 11 | return new RegExp('\\n*\\[' + (end || '') + '(pre|div|p|table|thead|th|tbody|tr|td|ul|li|ol|li|dl|dt|dd|h2|h3|h4|h5)([\\s\\S]*?)\\]\\n*', 'g'); 12 | }; 13 | content = (content || '').replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&') 14 | .replace(//g, '>').replace(/'/g, ''').replace(/"/g, '"') //XSS 15 | .replace(/@(\S+)(\s+?|$)/g, '@$1$2') //转义@ 16 | // .replace(/\s{2}/g, ' ') //转义空格 17 | .replace(/img\[([^\s]+?)\]/g, function (img) { //转义图片 18 | return ''; 19 | }) 20 | .replace(/file\([\s\S]+?\)\[[\s\S]*?\]/g, function (str) { //转义文件 21 | var href = (str.match(/file\(([\s\S]+?)\)\[/) || [])[1]; 22 | var text = (str.match(/\)\[([\s\S]*?)\]/) || [])[1]; 23 | if (!href) return str; 24 | return '' + (text || href) + ''; 25 | }) 26 | .replace(/emoji\[([^\s[\]]+?)\]/g, function (emoji) { //转义表情 27 | var alt = emoji.replace(/^emoji/g, ''); 28 | return '' + alt + ''; 29 | }).replace(/audio\[([^\s]+?)\]/g, function (i) { 30 | return '
    ' 31 | }).replace(/video\[([^\s]+?)\]/g, function (i) { 32 | return '' 33 | }).replace(/a\([\s\S]+?\)\[[\s\S]*?\]/g, function (str) { //转义链接 34 | var href = (str.match(/a\(([\s\S]+?)\)\[/) || [])[1]; 35 | var text = (str.match(/\)\[([\s\S]*?)\]/) || [])[1]; 36 | if (!href) return str; 37 | return '' + (text || href) + ''; 38 | }).replace(html(), '<$1 $2>').replace(html('/'), '') //转移HTML代码 39 | .replace(/\n/g, '
    ') 40 | //转义换行 41 | 42 | return (content); 43 | 44 | } 45 | 46 | 47 | 48 | 49 | 50 | 51 | export function ConvertRecord(data) { 52 | let contenxt = ConvertContext(data.content); 53 | let tiem = dateFormat(data.timestamp) 54 | let leftName = data.mine ? "" : data.username; 55 | let rightName = data.mine ? data.username : ""; 56 | 57 | let mineHtml = data.mine ? "class='layim-chat-mine'" : "" 58 | let htmlContext = "
  • " 59 | htmlContext += "
    " 60 | htmlContext += "" + leftName + "" + tiem + "" + rightName + "
    " 61 | htmlContext += "
    " + contenxt + "
    • " 62 | 63 | return htmlContext; 64 | } 65 | 66 | //补齐数位 67 | var digit = function (num) { 68 | return num < 10 ? '0' + (num | 0) : num; 69 | }; 70 | 71 | export function dateFormat(timestamp) { 72 | var d = new Date(timestamp || new Date()); 73 | return d.getFullYear() + '-' + digit(d.getMonth() + 1) + '-' + digit(d.getDate()) 74 | + ' ' + digit(d.getHours()) + ':' + digit(d.getMinutes()) + ':' + digit(d.getSeconds()); 75 | } 76 | 77 | -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/drawer/NoticeBox.vue: -------------------------------------------------------------------------------- 1 | 15 | 46 | -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/drawer/UserItem.vue: -------------------------------------------------------------------------------- 1 | 14 | 62 | -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/drawer/UserList.vue: -------------------------------------------------------------------------------- 1 | 23 | 66 | 67 | -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/drawer/index.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 表情库 3 | * 4 | * 5 | */ 6 | 7 | const emoji_dir = './emoji/' 8 | 9 | //表情库 10 | var emojis = function () { 11 | var alt = ["[微笑]", "[嘻嘻]", "[哈哈]", "[可爱]", "[可怜]", "[挖鼻]", "[吃惊]", "[害羞]", "[挤眼]", "[闭嘴]", "[鄙视]", "[爱你]", "[泪]", "[偷笑]", "[亲亲]", "[生病]", "[太开心]", "[白眼]", "[右哼哼]", "[左哼哼]", "[嘘]", "[衰]", "[委屈]", "[吐]", "[哈欠]", "[抱抱]", "[怒]", "[疑问]", "[馋嘴]", "[拜拜]", "[思考]", "[汗]", "[困]", "[睡]", "[钱]", "[失望]", "[酷]", "[色]", "[哼]", "[鼓掌]", "[晕]", "[悲伤]", "[抓狂]", "[黑线]", "[阴险]", "[怒骂]", "[互粉]", "[心]", "[伤心]", "[猪头]", "[熊猫]", "[兔子]", "[ok]", "[耶]", "[good]", "[NO]", "[赞]", "[来]", "[弱]", "[草泥马]", "[神马]", "[囧]", "[浮云]", "[给力]", "[围观]", "[威武]", "[奥特曼]", "[礼物]", "[钟]", "[话筒]", "[蜡烛]", "[蛋糕]"], arr = {}; 12 | alt.forEach((item, index) => { 13 | arr[item] = require( emoji_dir + index + '.gif'); 14 | }); 15 | return arr 16 | }(); 17 | 18 | 19 | export default emojis 20 | -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/0.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/0.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/1.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/10.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/10.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/11.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/11.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/12.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/12.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/13.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/13.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/14.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/14.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/15.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/15.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/16.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/16.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/17.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/17.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/18.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/18.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/19.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/19.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/2.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/20.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/20.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/21.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/21.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/22.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/22.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/23.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/23.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/24.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/24.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/25.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/25.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/26.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/26.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/27.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/27.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/28.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/28.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/29.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/29.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/3.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/30.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/30.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/31.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/31.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/32.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/32.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/33.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/33.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/34.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/34.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/35.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/35.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/36.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/36.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/37.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/37.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/38.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/38.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/39.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/39.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/4.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/40.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/40.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/41.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/41.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/42.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/42.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/43.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/43.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/44.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/44.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/45.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/45.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/46.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/46.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/47.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/47.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/48.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/48.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/49.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/49.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/5.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/50.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/50.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/51.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/51.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/52.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/52.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/53.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/53.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/54.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/54.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/55.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/55.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/56.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/56.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/57.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/57.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/58.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/58.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/59.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/59.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/6.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/60.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/60.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/61.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/61.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/62.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/62.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/63.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/63.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/64.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/64.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/65.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/65.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/66.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/66.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/67.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/67.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/68.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/68.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/69.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/69.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/7.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/7.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/70.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/70.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/71.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/71.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/8.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/8.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/emoji/9.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/main/src/page/chatPage/content/chat/emoji/9.gif -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/chat/tools.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 117 | 118 | 140 | -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/index.vue: -------------------------------------------------------------------------------- 1 | 131 | -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/content/message/index.vue: -------------------------------------------------------------------------------- 1 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /packages/main/src/page/chatPage/tabs/index.vue: -------------------------------------------------------------------------------- 1 | 117 | 118 | 137 | -------------------------------------------------------------------------------- /packages/main/src/page/manage/content/friend.vue: -------------------------------------------------------------------------------- 1 | 95 | 96 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /packages/main/src/page/manage/content/group.vue: -------------------------------------------------------------------------------- 1 | 90 | 91 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /packages/main/src/page/manage/content/index.vue: -------------------------------------------------------------------------------- 1 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /packages/main/src/page/manage/index.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /packages/main/src/page/manage/tabItem.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 139 | 140 | 153 | -------------------------------------------------------------------------------- /packages/mixins/emitter.js: -------------------------------------------------------------------------------- 1 | function broadcast(componentName, eventName, params) { 2 | this.$children.forEach(child => { 3 | var name = child.$options.componentName; 4 | 5 | if (name === componentName) { 6 | child.$emit.apply(child, [eventName].concat(params)); 7 | } else { 8 | broadcast.apply(child, [componentName, eventName].concat([params])); 9 | } 10 | }); 11 | } 12 | export default { 13 | methods: { 14 | dispatch(componentName, eventName, params) { 15 | var parent = this.$parent || this.$root; 16 | var name = parent.$options.componentName; 17 | 18 | while (parent && (!name || name !== componentName)) { 19 | parent = parent.$parent; 20 | 21 | if (parent) { 22 | name = parent.$options.componentName; 23 | } 24 | } 25 | if (parent) { 26 | parent.$emit.apply(parent, [eventName].concat(params)); 27 | } 28 | }, 29 | broadcast(componentName, eventName, params) { 30 | broadcast.call(this, componentName, eventName, params); 31 | } 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /packages/rightBox/index.js: -------------------------------------------------------------------------------- 1 | // 导入组件，组件必须声明 name 2 | import MChatRightBox from './index.vue' 3 | 4 | 5 | MChatRightBox.install = function (Vue) { 6 | Vue.component(MChatRightBox.name, MChatRightBox) 7 | } 8 | 9 | export default MChatRightBox -------------------------------------------------------------------------------- /packages/rightBox/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /packages/rightBox/util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 参考了 element-ui 3 | */ 4 | 5 | 6 | export function compose(...funcs) { 7 | if (funcs.length === 0) { 8 | return arg => arg; 9 | } 10 | if (funcs.length === 1) { 11 | return funcs[0]; 12 | } 13 | return funcs.reduce((a, b) => (...args) => a(b(...args))); 14 | } 15 | 16 | /** 17 | * 合并 options 18 | */ 19 | export function mergeOptions(defaults, config) { 20 | const options = {}; 21 | let key; 22 | for (key in defaults) { 23 | options[key] = defaults[key]; 24 | } 25 | for (key in config) { 26 | if (hasOwn(config, key)) { 27 | const value = config[key]; 28 | if (typeof value !== 'undefined') { 29 | options[key] = value; 30 | } 31 | } 32 | } 33 | return options; 34 | } 35 | 36 | function hasOwn(obj, key) { 37 | return Object.prototype.hasOwnProperty.call(obj, key); 38 | } -------------------------------------------------------------------------------- /packages/static/images/default_avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/static/images/default_avatar.png -------------------------------------------------------------------------------- /packages/static/images/unnotic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/static/images/unnotic.png -------------------------------------------------------------------------------- /packages/static/media/default.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/static/media/default.wav -------------------------------------------------------------------------------- /packages/static/media/tip.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/static/media/tip.wav -------------------------------------------------------------------------------- /packages/styles/apply-box.scss: -------------------------------------------------------------------------------- 1 | 2 | .apply-friend-box { 3 | margin: 15px; 4 | font-size: 0; 5 | //width: 405px; 6 | .apply-img { 7 | display: inline-block; 8 | *display: inline; 9 | *zoom: 1; 10 | vertical-align: top; 11 | font-size: 14px; 12 | width: 100px; 13 | margin-right: 20px; 14 | text-align: center; 15 | img { 16 | width: 100px; 17 | height: 100px; 18 | margin-bottom: 10px; 19 | } 20 | } 21 | 22 | .apply-remark, .accept-box { 23 | display: inline-block; 24 | font-size: 14px; 25 | text-align: left; 26 | width: 280px; 27 | span { 28 | font-weight: bold; 29 | font-size: 13px; 30 | width: 100%; 31 | margin-bottom: 10px; 32 | } 33 | p { 34 | padding: 5px; 35 | font-size: 12px; 36 | color: gray; 37 | } 38 | textarea { 39 | border-color: #e6e6e6; 40 | border-width: 1px; 41 | border-style: solid; 42 | background-color: #fff; 43 | border-radius: 2px; 44 | height: 65px; 45 | min-height: 65px; 46 | resize: none; 47 | line-height: 20px; 48 | padding: 6px 10px; 49 | display: block; 50 | width: 100%; 51 | } 52 | select { 53 | border: 1px solid #e6e6e6; 54 | height: 38px; 55 | line-height: 1.3; 56 | line-height: 38px \9 57 | ; 58 | background-color: #fff; 59 | border-radius: 2px; 60 | width: 100%; 61 | margin-bottom: 10px; 62 | padding: 0 10px; 63 | font-family: inherit; 64 | font-size: inherit; 65 | font-style: inherit; 66 | font-weight: inherit; 67 | appearance: none; 68 | -moz-appearance: none; /* Firefox */ 69 | -webkit-appearance: none; /* Safari 和 Chrome */ 70 | option { 71 | font-family: inherit; 72 | font-size: inherit; 73 | font-style: inherit; 74 | font-weight: inherit; 75 | outline: 0; 76 | } 77 | } 78 | 79 | } 80 | 81 | } -------------------------------------------------------------------------------- /packages/styles/dialog.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | .dialog__wrapper { 4 | position: fixed; 5 | top: 0; 6 | right: 0; 7 | bottom: 0; 8 | left: 0; 9 | overflow: auto; 10 | margin: 0; 11 | } 12 | 13 | .dialog { 14 | -webkit-overflow-scrolling: touch; 15 | top: 150px; 16 | left: 0; 17 | margin: 0; 18 | padding: 0; 19 | background-color: #fff; 20 | -webkit-background-clip: content; 21 | border-radius: 2px; 22 | box-shadow: 1px 1px 50px rgba(0, 0, 0, .3); 23 | position: fixed; 24 | _position: absolute; 25 | pointer-events: auto; 26 | 27 | &.dialog__center{ 28 | .dialog_body, .dialog_foote{ 29 | text-align: center; 30 | } 31 | } 32 | 33 | 34 | .dialog_head { 35 | padding: 0 80px 0 20px; 36 | height: 42px; 37 | line-height: 42px; 38 | border-bottom: 1px solid #eee; 39 | font-size: 14px; 40 | color: #333; 41 | overflow: hidden; 42 | background-color: #F8F8F8; 43 | border-radius: 2px 2px 0 0; 44 | text-align: left; 45 | .dialog_title, &.dialog_title { 46 | 47 | } 48 | .dialog_header_group{ 49 | position: absolute; 50 | right: 0; 51 | top: 0; 52 | font-size: 16px; 53 | line-height: initial; 54 | text-align: left; 55 | } 56 | .dialog_header_btn { 57 | background: transparent; 58 | border: none; 59 | outline: none; 60 | cursor: pointer; 61 | font-size: 16px; 62 | padding: 10px; 63 | position: relative; 64 | _overflow: hidden; 65 | display: inline-block; 66 | *display: inline; 67 | *zoom: 1; 68 | vertical-align: top; 69 | color: #959595; 70 | &:hover { 71 | color: #409eff; 72 | } 73 | } 74 | } 75 | .dialog_body { 76 | padding: 5px; 77 | color: #606266; 78 | font-size: 14px; 79 | word-break: break-all; 80 | &.dialog_content { 81 | position: relative; 82 | overflow: auto; 83 | } 84 | } 85 | .dialog_foote { 86 | padding: 5px 10px 10px 10px ; 87 | text-align: right; 88 | box-sizing: border-box; 89 | .dialog-footer { 90 | box-sizing: border-box; 91 | } 92 | button:first-child { 93 | margin-right: 10px; 94 | } 95 | } 96 | } 97 | 98 | button, input, optgroup, option, select, textarea { 99 | font-family: inherit; 100 | font-size: inherit; 101 | font-style: inherit; 102 | font-weight: inherit; 103 | outline: 0; 104 | } 105 | 106 | 107 | 108 | .dialog-fade-enter-active { 109 | animation: bounceIn .3s; 110 | } 111 | 112 | .dialog-fade-leave-active { 113 | animation: bounceOut .3s; 114 | } 115 | 116 | -------------------------------------------------------------------------------- /packages/styles/icon/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/styles/icon/iconfont.eot -------------------------------------------------------------------------------- /packages/styles/icon/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/styles/icon/iconfont.ttf -------------------------------------------------------------------------------- /packages/styles/icon/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/styles/icon/iconfont.woff -------------------------------------------------------------------------------- /packages/styles/icon/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/packages/styles/icon/iconfont.woff2 -------------------------------------------------------------------------------- /packages/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import "popover"; 2 | @import "dialog"; 3 | @import "massage-box"; 4 | @import "notification"; 5 | @import "icon/iconfont.css"; 6 | @import "apply-box"; 7 | @import "iChat"; 8 | @import "im"; 9 | 10 | li { 11 | list-style: none; 12 | } 13 | 14 | body { 15 | height: 100%; 16 | -moz-osx-font-smoothing: grayscale; 17 | -webkit-font-smoothing: antialiased; 18 | text-rendering: optimizeLegibility; 19 | font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; 20 | } 21 | 22 | label { 23 | font-weight: 700; 24 | } 25 | 26 | html { 27 | height: 100%; 28 | box-sizing: border-box; 29 | } 30 | 31 | #app { 32 | height: 100%; 33 | } 34 | 35 | *, 36 | *:before, 37 | *:after { 38 | box-sizing: inherit; 39 | } 40 | 41 | .no-padding { 42 | padding: 0px !important; 43 | } 44 | 45 | .padding-content { 46 | padding: 4px 0; 47 | } 48 | 49 | a:focus, 50 | a:active { 51 | outline: none; 52 | } 53 | 54 | a, 55 | a:focus, 56 | a:hover { 57 | cursor: pointer; 58 | color: inherit; 59 | text-decoration: none; 60 | } 61 | 62 | div:focus { 63 | outline: none; 64 | } 65 | 66 | .fr { 67 | float: right; 68 | } 69 | 70 | .fl { 71 | float: left; 72 | } 73 | 74 | .pr-5 { 75 | padding-right: 5px; 76 | } 77 | 78 | .pl-5 { 79 | padding-left: 5px; 80 | } 81 | 82 | .block { 83 | display: block; 84 | } 85 | 86 | .pointer { 87 | cursor: pointer; 88 | } 89 | 90 | .inlineBlock { 91 | display: block; 92 | } 93 | 94 | .clearfix { 95 | &:after { 96 | visibility: hidden; 97 | display: block; 98 | font-size: 0; 99 | content: " "; 100 | clear: both; 101 | height: 0; 102 | } 103 | } 104 | 105 | 106 | /** 107 | 按钮 108 | */ 109 | .m-button{ 110 | display: inline-block; 111 | line-height: 1; 112 | white-space: nowrap; 113 | cursor: pointer; 114 | background: #fff; 115 | border: 1px solid #dcdfe6; 116 | color: #606266; 117 | -webkit-appearance: none; 118 | text-align: center; 119 | box-sizing: border-box; 120 | outline: none; 121 | margin: 0; 122 | transition: .1s; 123 | font-weight: 500; 124 | -moz-user-select: none; 125 | -webkit-user-select: none; 126 | -ms-user-select: none; 127 | padding: 12px 20px; 128 | font-size: 14px; 129 | border-radius: 4px; 130 | &.m-button-primary{ 131 | background-color: #409eff; 132 | color: #fff; 133 | &:hover{ 134 | background-color: #6EB4FC; 135 | color: #fff;; 136 | } 137 | &:focus{ 138 | background-color: #6EB4FC; 139 | color: #fff;; 140 | } 141 | } 142 | } 143 | 144 | .m-button+.m-button { 145 | margin-left: 10px; 146 | } 147 | 148 | // 遮盖层 149 | .v-modal { 150 | position: fixed; 151 | left: 0; 152 | top: 0; 153 | width: 100%; 154 | height: 100%; 155 | opacity: .5; 156 | background: #000; 157 | } 158 | -------------------------------------------------------------------------------- /packages/styles/mixins/config.scss: -------------------------------------------------------------------------------- 1 | $namespace: 'm'; // 以防冲突 2 | $element-separator: '__'; 3 | $modifier-separator: '--'; 4 | $state-prefix: 'is-'; 5 | -------------------------------------------------------------------------------- /packages/styles/mixins/function.scss: -------------------------------------------------------------------------------- 1 | @import "config"; 2 | 3 | /* BEM support Func 4 | -------------------------- */ 5 | @function selectorToString($selector) { 6 | $selector: inspect($selector); 7 | $selector: str-slice($selector, 2, -2); 8 | @return $selector; 9 | } 10 | 11 | @function containsModifier($selector) { 12 | $selector: selectorToString($selector); 13 | 14 | @if str-index($selector, $modifier-separator) { 15 | @return true; 16 | } @else { 17 | @return false; 18 | } 19 | } 20 | 21 | @function containWhenFlag($selector) { 22 | $selector: selectorToString($selector); 23 | 24 | @if str-index($selector, '.' + $state-prefix) { 25 | @return true 26 | } @else { 27 | @return false 28 | } 29 | } 30 | 31 | @function containPseudoClass($selector) { 32 | $selector: selectorToString($selector); 33 | 34 | @if str-index($selector, ':') { 35 | @return true 36 | } @else { 37 | @return false 38 | } 39 | } 40 | 41 | @function hitAllSpecialNestRule($selector) { 42 | 43 | @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector); 44 | } 45 | -------------------------------------------------------------------------------- /packages/styles/mixins/mixins.scss: -------------------------------------------------------------------------------- 1 | @import "function"; 2 | 3 | 4 | $--sm: 768px !default; 5 | $--md: 992px !default; 6 | $--lg: 1200px !default; 7 | $--xl: 1920px !default; 8 | 9 | $--breakpoints: ( 10 | 'xs' : (max-width: $--sm - 1), 11 | 'sm' : (min-width: $--sm), 12 | 'md' : (min-width: $--md), 13 | 'lg' : (min-width: $--lg), 14 | 'xl' : (min-width: $--xl) 15 | ); 16 | 17 | /* Break-points 18 | -------------------------- */ 19 | @mixin res($key, $map: $--breakpoints) { 20 | // 循环断点Map，如果存在则返回 21 | @if map-has-key($map, $key) { 22 | @media only screen and #{inspect(map-get($map, $key))} { 23 | @content; 24 | } 25 | } @else { 26 | @warn "Undefeined points: `#{$map}`"; 27 | } 28 | } 29 | 30 | /* Scrollbar 31 | -------------------------- */ 32 | @mixin scroll-bar { 33 | $--scrollbar-thumb-background: #b4bccc; 34 | $--scrollbar-track-background: #fff; 35 | 36 | &::-webkit-scrollbar { 37 | z-index: 11; 38 | width: 6px; 39 | 40 | &:horizontal { 41 | height: 6px; 42 | } 43 | 44 | &-thumb { 45 | border-radius: 5px; 46 | width: 6px; 47 | background: $--scrollbar-thumb-background; 48 | } 49 | 50 | &-corner { 51 | background: $--scrollbar-track-background; 52 | } 53 | 54 | &-track { 55 | background: $--scrollbar-track-background; 56 | 57 | &-piece { 58 | background: $--scrollbar-track-background; 59 | width: 6px; 60 | } 61 | } 62 | } 63 | } 64 | 65 | /* Placeholder 66 | -------------------------- */ 67 | @mixin placeholder { 68 | &::-webkit-input-placeholder { 69 | @content 70 | } 71 | 72 | &::-moz-placeholder { 73 | @content 74 | } 75 | 76 | &:-ms-input-placeholder { 77 | @content 78 | } 79 | } 80 | 81 | /* BEM 82 | -------------------------- */ 83 | @mixin b($block) { 84 | $B: $namespace+'-'+$block !global; 85 | 86 | .#{$B} { 87 | @content; 88 | } 89 | } 90 | 91 | @mixin e($element) { 92 | $E: $element !global; 93 | $selector: &; 94 | $currentSelector: ""; 95 | @each $unit in $element { 96 | $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","}; 97 | } 98 | 99 | @if hitAllSpecialNestRule($selector) { 100 | @at-root { 101 | #{$selector} { 102 | #{$currentSelector} { 103 | @content; 104 | } 105 | } 106 | } 107 | } @else { 108 | @at-root { 109 | #{$currentSelector} { 110 | @content; 111 | } 112 | } 113 | } 114 | } 115 | 116 | @mixin m($modifier) { 117 | $selector: &; 118 | $currentSelector: ""; 119 | @each $unit in $modifier { 120 | $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","}; 121 | } 122 | 123 | @at-root { 124 | #{$currentSelector} { 125 | @content; 126 | } 127 | } 128 | } 129 | 130 | @mixin configurable-m($modifier, $E-flag: false) { 131 | $selector: &; 132 | $interpolation: ''; 133 | 134 | @if $E-flag { 135 | $interpolation: $element-separator + $E-flag; 136 | } 137 | 138 | @at-root { 139 | #{$selector} { 140 | .#{$B+$interpolation+$modifier-separator+$modifier} { 141 | @content; 142 | } 143 | } 144 | } 145 | } 146 | 147 | @mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) { 148 | $modifierCombo: ''; 149 | 150 | @if $modifier { 151 | $modifierCombo: $modifier-separator + $modifier; 152 | } 153 | 154 | @at-root { 155 | #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} { 156 | @content 157 | } 158 | } 159 | } 160 | 161 | @mixin meb($modifier: false, $element: $E, $block: $B) { 162 | $selector: &; 163 | $modifierCombo: ''; 164 | 165 | @if $modifier { 166 | $modifierCombo: $modifier-separator + $modifier; 167 | } 168 | 169 | @at-root { 170 | #{$selector} { 171 | .#{$block+$element-separator+$element+$modifierCombo} { 172 | @content 173 | } 174 | } 175 | } 176 | } 177 | 178 | @mixin when($state) { 179 | @at-root { 180 | &.#{$state-prefix + $state} { 181 | @content; 182 | } 183 | } 184 | } 185 | 186 | @mixin extend-rule($name) { 187 | @extend #{'%shared-'+$name}; 188 | } 189 | 190 | @mixin share-rule($name) { 191 | $rule-name: '%shared-'+$name; 192 | 193 | @at-root #{$rule-name} { 194 | @content 195 | } 196 | } 197 | 198 | @mixin pseudo($pseudo) { 199 | @at-root #{&}#{':#{$pseudo}'} { 200 | @content 201 | } 202 | } 203 | 204 | -------------------------------------------------------------------------------- /packages/styles/mixins/utils.scss: -------------------------------------------------------------------------------- 1 | @mixin utils-user-select($value) { 2 | -moz-user-select: $value; 3 | -webkit-user-select: $value; 4 | -ms-user-select: $value; 5 | } 6 | 7 | @mixin utils-clearfix { 8 | $selector: &; 9 | 10 | @at-root { 11 | #{$selector}::before, 12 | #{$selector}::after { 13 | display: table; 14 | content: ""; 15 | } 16 | #{$selector}::after { 17 | clear: both 18 | } 19 | } 20 | } 21 | 22 | @mixin utils-vertical-center { 23 | $selector: &; 24 | 25 | @at-root { 26 | #{$selector}::after { 27 | display: inline-block; 28 | content: ""; 29 | height: 100%; 30 | vertical-align: middle 31 | } 32 | } 33 | } 34 | 35 | @mixin utils-ellipsis { 36 | overflow: hidden; 37 | text-overflow: ellipsis; 38 | white-space: nowrap; 39 | } -------------------------------------------------------------------------------- /packages/styles/notification.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(notification) { 5 | display: flex; 6 | width: $--notification-width; 7 | padding: $--notification-padding; 8 | border-radius: $--notification-radius; 9 | box-sizing: border-box; 10 | border: 1px solid $--notification-border-color; 11 | position: fixed; 12 | background-color: $--color-white; 13 | box-shadow: $--notification-shadow; 14 | transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s; 15 | overflow: hidden; 16 | 17 | &.right { 18 | right: 16px; 19 | } 20 | 21 | &.left { 22 | left: 16px; 23 | } 24 | 25 | @include e(group) { 26 | margin-left: $--notification-group-margin-left; 27 | margin-right: $--notification-group-margin-right; 28 | } 29 | 30 | @include e(title) { 31 | font-weight: bold; 32 | font-size: $--notification-title-font-size; 33 | color: $--notification-title-color; 34 | margin: 0; 35 | } 36 | 37 | @include e(content) { 38 | font-size: $--notification-content-font-size; 39 | line-height: 21px; 40 | margin: 6px 0 0 0; 41 | color: $--notification-content-color; 42 | text-align: justify; 43 | 44 | p { 45 | margin: 0; 46 | } 47 | } 48 | 49 | @include e(icon) { 50 | height: $--notification-icon-size; 51 | width: $--notification-icon-size; 52 | font-size: $--notification-icon-size; 53 | } 54 | 55 | @include e(closeBtn) { 56 | position: absolute; 57 | top: 18px; 58 | right: 15px; 59 | cursor: pointer; 60 | color: $--notification-close-color; 61 | font-size: $--notification-close-font-size; 62 | 63 | &:hover { 64 | color: $--notification-close-hover-color; 65 | } 66 | } 67 | 68 | .m-icon-success { 69 | color: $--notification-success-icon-color; 70 | } 71 | 72 | .m-icon-error { 73 | color: $--notification-danger-icon-color; 74 | } 75 | 76 | .m-icon-info { 77 | color: $--notification-info-icon-color; 78 | } 79 | 80 | .m-icon-warning { 81 | color: $--notification-warning-icon-color; 82 | } 83 | } 84 | 85 | .el-notification-fade-enter { 86 | &.right { 87 | right: 0; 88 | transform: translateX(100%); 89 | } 90 | 91 | &.left { 92 | left: 0; 93 | transform: translateX(-100%); 94 | } 95 | } 96 | 97 | .el-notification-fade-leave-active { 98 | opacity: 0; 99 | } 100 | -------------------------------------------------------------------------------- /packages/styles/popover.scss: -------------------------------------------------------------------------------- 1 | @import "./mixins/mixins"; 2 | @import "./popper"; 3 | 4 | @include b(popover) { 5 | position: absolute; 6 | background: #FFFFFF; 7 | min-width: 150px; 8 | border-radius: 4px; 9 | border: 1px solid #EBEEF5; 10 | padding: 12px; 11 | z-index: 2000; 12 | color: #606266; 13 | line-height: 1.4; 14 | text-align: justify; 15 | font-size: 14px; 16 | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); 17 | word-break: break-all; 18 | 19 | @include m(plain) { 20 | padding: 12px; 21 | } 22 | 23 | @include e(title) { 24 | color: #303133; 25 | font-size: 16px; 26 | line-height: 1; 27 | margin-bottom: 12px; 28 | } 29 | 30 | @include e(reference) { 31 | &:focus:not(.focusing), &:focus:hover { 32 | outline-width: 0; 33 | } 34 | } 35 | 36 | &:focus:active, &:focus { 37 | outline-width: 0; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /packages/styles/popper.scss: -------------------------------------------------------------------------------- 1 | @import "./mixins/mixins"; 2 | 3 | 4 | @include b(popper) { 5 | .popper__arrow, 6 | .popper__arrow::after { 7 | position: absolute; 8 | display: block; 9 | width: 0; 10 | height: 0; 11 | border-color: transparent; 12 | border-style: solid; 13 | } 14 | 15 | .popper__arrow { 16 | border-width: 6px; 17 | filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)) 18 | } 19 | 20 | .popper__arrow::after { 21 | content: " "; 22 | border-width: 6px; 23 | } 24 | 25 | &[x-placement^="top"] { 26 | margin-bottom: #{6px + 6}; 27 | } 28 | 29 | &[x-placement^="top"] .popper__arrow { 30 | bottom: -6px; 31 | left: 50%; 32 | margin-right: #{6px / 2}; 33 | border-top-color: #FFFFFF; 34 | border-bottom-width: 0; 35 | 36 | &::after { 37 | bottom: 1px; 38 | margin-left: -6px; 39 | border-top-color: #FFFFFF; 40 | border-bottom-width: 0; 41 | } 42 | } 43 | 44 | &[x-placement^="bottom"] { 45 | margin-top: #{6px + 6}; 46 | } 47 | 48 | &[x-placement^="bottom"] .popper__arrow { 49 | top: -6px; 50 | left: 50%; 51 | margin-right: #{6px / 2}; 52 | border-top-width: 0; 53 | border-bottom-color: #FFFFFF; 54 | 55 | &::after { 56 | top: 1px; 57 | margin-left: -6px; 58 | border-top-width: 0; 59 | border-bottom-color: #FFFFFF; 60 | } 61 | } 62 | 63 | &[x-placement^="right"] { 64 | margin-left: #{6px + 6}; 65 | } 66 | 67 | &[x-placement^="right"] .popper__arrow { 68 | top: 50%; 69 | left: -6px; 70 | margin-bottom: #{6px / 2}; 71 | border-right-color: #FFFFFF; 72 | border-left-width: 0; 73 | 74 | &::after { 75 | bottom: -6px; 76 | left: 1px; 77 | border-right-color: #FFFFFF; 78 | border-left-width: 0; 79 | } 80 | } 81 | 82 | &[x-placement^="left"] { 83 | margin-right: #{6px + 6}; 84 | } 85 | 86 | &[x-placement^="left"] .popper__arrow { 87 | top: 50%; 88 | right: -6px; 89 | margin-bottom: #{6px / 2}; 90 | border-right-width: 0; 91 | border-left-color: #FFFFFF; 92 | 93 | &::after { 94 | right: 1px; 95 | bottom: -6px; 96 | margin-left: -6px; 97 | border-right-width: 0; 98 | border-left-color: #FFFFFF; 99 | } 100 | } 101 | } -------------------------------------------------------------------------------- /packages/styles/variables.scss: -------------------------------------------------------------------------------- 1 | // base color 2 | 3 | //标签盒子 4 | $tabsbox: #EFEFEF; 5 | $tabsTitle: #EEEAE8; 6 | // 标签中后 7 | $tabActicve: #C8C6C6; 8 | $tabHover: #E1E1E1; 9 | $chat: #F6F6F6; 10 | 11 | $pane: #ffffff; 12 | 13 | //内容 14 | //标题 15 | $title: #F5F5F5; 16 | //文字内容框 17 | $content: #F5F5F5; 18 | $footer: #ffffff; 19 | 20 | //按钮悬停 默认选中效果 21 | $btnHover: #2D93CA; 22 | 23 | $contentText: #000; 24 | 25 | $mineText: #9EEA6A; 26 | $mineTextHover: #98E165; 27 | $otherText: #fff; 28 | $otherTextHvoer: #F6F6F6; 29 | 30 | $btn: #F5F5F5; 31 | $btnColor: #606060; 32 | $btnHover: #129611; 33 | $btnHoverColor: #fff; 34 | $tabsWidth: 180px; 35 | $tabsLabel: 80px; 36 | 37 | $userlistWidt: 198px; 38 | // 600 39 | $contentWidth: calc(590px - 198px); 40 | 41 | $chatMainOffset: 180px; 42 | 43 | $foolterWidth: calc(600px - 130px); 44 | 45 | // 右边box 设置 相关 46 | $rightBoxWidth: 148px; 47 | 48 | $rightBoxCloseOffset: 139px; 49 | 50 | $noticeBoxHight: 146px; 51 | // 用户列表大小 52 | $userListBoxHight: 200px; 53 | 54 | :export { 55 | tabsbox: $tabsbox; 56 | tabActicve: $tabActicve; 57 | tabHover: $tabHover; 58 | title: $title; 59 | content: $content; 60 | footer: $footer; 61 | btnHover: $btnHover; 62 | tabsTitle: $tabsTitle; 63 | chat: $chat; 64 | pane: $pane; 65 | mineText: $mineText; 66 | mineTextHover: $mineTextHover; 67 | otherText: $otherText; 68 | otherTextHvoer: $otherTextHvoer; 69 | btn: $btn; 70 | btnColor: $btnColor; 71 | btnHover: $btnHover; 72 | btnHoverColor: $btnHoverColor; 73 | contentText: $contentText; 74 | contentWidth: $contentWidth; 75 | foolterWidth: $foolterWidth; 76 | userlistWidt: $userlistWidt; 77 | tabsWidth: $tabsWidth; 78 | tabsLabel: $tabsLabel; 79 | rightBoxWidth: $rightBoxWidth; 80 | rightBoxCloseOffset: $rightBoxCloseOffset; 81 | noticeBoxHight: $noticeBoxHight; 82 | userListBoxHight: $userListBoxHight; 83 | } -------------------------------------------------------------------------------- /packages/system/apply/index.js: -------------------------------------------------------------------------------- 1 | import ApplyBox from './src/main.js'; 2 | export default ApplyBox; 3 | -------------------------------------------------------------------------------- /packages/util/StringUtil.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 忽略大小写判断字符串是否相同 3 | * @param str1 4 | * @param str2 5 | * @returns {boolean} 6 | */ 7 | export const isStrEqualsIgnorecase = (str1, str2) => { 8 | if (str1.toUpperCase() === str2.toUpperCase()) { 9 | return true 10 | } 11 | return false 12 | } 13 | /** 14 | * 判断是否为空 15 | */ 16 | export function isEmpty(val) { 17 | if (typeof val === 'boolean') { 18 | return false 19 | } 20 | if (typeof val === 'number') { 21 | return false 22 | } 23 | if (val instanceof Array) { 24 | if (val.length === 0) return true 25 | } else if (val instanceof Object) { 26 | if (JSON.stringify(val) === '{}') return true 27 | } else { 28 | if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '') return true 29 | return false 30 | } 31 | return false 32 | } 33 | 34 | -------------------------------------------------------------------------------- /packages/util/aria-dialog.js: -------------------------------------------------------------------------------- 1 | import Utils from './aria-utils'; 2 | 3 | /** 4 | * @constructor 5 | * @desc Dialog object providing modal focus management. 6 | * 7 | * Assumptions: The element serving as the dialog container is present in the 8 | * DOM and hidden. The dialog container has role='dialog'. 9 | * 10 | * @param dialogId 11 | * The ID of the element serving as the dialog container. 12 | * @param focusAfterClosed 13 | * Either the DOM node or the ID of the DOM node to focus when the 14 | * dialog closes. 15 | * @param focusFirst 16 | * Optional parameter containing either the DOM node or the ID of the 17 | * DOM node to focus when the dialog opens. If not specified, the 18 | * first focusable element in the dialog will receive focus. 19 | */ 20 | var aria = aria || {}; 21 | var tabEvent; 22 | 23 | aria.Dialog = function(dialog, focusAfterClosed, focusFirst) { 24 | this.dialogNode = dialog; 25 | if (this.dialogNode === null || this.dialogNode.getAttribute('role') !== 'dialog') { 26 | throw new Error('Dialog() requires a DOM element with ARIA role of dialog.'); 27 | } 28 | 29 | if (typeof focusAfterClosed === 'string') { 30 | this.focusAfterClosed = document.getElementById(focusAfterClosed); 31 | } else if (typeof focusAfterClosed === 'object') { 32 | this.focusAfterClosed = focusAfterClosed; 33 | } else { 34 | this.focusAfterClosed = null; 35 | } 36 | 37 | if (typeof focusFirst === 'string') { 38 | this.focusFirst = document.getElementById(focusFirst); 39 | } else if (typeof focusFirst === 'object') { 40 | this.focusFirst = focusFirst; 41 | } else { 42 | this.focusFirst = null; 43 | } 44 | 45 | if (this.focusFirst) { 46 | this.focusFirst.focus(); 47 | } else { 48 | Utils.focusFirstDescendant(this.dialogNode); 49 | } 50 | 51 | this.lastFocus = document.activeElement; 52 | tabEvent = (e) => { 53 | this.trapFocus(e); 54 | }; 55 | this.addListeners(); 56 | }; 57 | 58 | aria.Dialog.prototype.addListeners = function() { 59 | document.addEventListener('focus', tabEvent, true); 60 | }; 61 | 62 | aria.Dialog.prototype.removeListeners = function() { 63 | document.removeEventListener('focus', tabEvent, true); 64 | }; 65 | 66 | aria.Dialog.prototype.closeDialog = function() { 67 | this.removeListeners(); 68 | if (this.focusAfterClosed) { 69 | setTimeout(() => { 70 | this.focusAfterClosed.focus(); 71 | }); 72 | } 73 | }; 74 | 75 | aria.Dialog.prototype.trapFocus = function(event) { 76 | if (Utils.IgnoreUtilFocusChanges) { 77 | return; 78 | } 79 | if (this.dialogNode.contains(event.target)) { 80 | this.lastFocus = event.target; 81 | } else { 82 | Utils.focusFirstDescendant(this.dialogNode); 83 | if (this.lastFocus === document.activeElement) { 84 | Utils.focusLastDescendant(this.dialogNode); 85 | } 86 | this.lastFocus = document.activeElement; 87 | } 88 | }; 89 | 90 | export default aria.Dialog; 91 | -------------------------------------------------------------------------------- /packages/util/aria-utils.js: -------------------------------------------------------------------------------- 1 | var aria = aria || {}; 2 | 3 | aria.Utils = aria.Utils || {}; 4 | 5 | /** 6 | * @desc Set focus on descendant nodes until the first focusable element is 7 | * found. 8 | * @param element 9 | * DOM node for which to find the first focusable descendant. 10 | * @returns 11 | * true if a focusable element is found and focus is set. 12 | */ 13 | aria.Utils.focusFirstDescendant = function(element) { 14 | for (var i = 0; i < element.childNodes.length; i++) { 15 | var child = element.childNodes[i]; 16 | if (aria.Utils.attemptFocus(child) || aria.Utils.focusFirstDescendant(child)) { 17 | return true; 18 | } 19 | } 20 | return false; 21 | }; 22 | 23 | /** 24 | * @desc Find the last descendant node that is focusable. 25 | * @param element 26 | * DOM node for which to find the last focusable descendant. 27 | * @returns 28 | * true if a focusable element is found and focus is set. 29 | */ 30 | 31 | aria.Utils.focusLastDescendant = function(element) { 32 | for (var i = element.childNodes.length - 1; i >= 0; i--) { 33 | var child = element.childNodes[i]; 34 | if (aria.Utils.attemptFocus(child) || aria.Utils.focusLastDescendant(child)) { 35 | return true; 36 | } 37 | } 38 | return false; 39 | }; 40 | 41 | /** 42 | * @desc Set Attempt to set focus on the current node. 43 | * @param element 44 | * The node to attempt to focus on. 45 | * @returns 46 | * true if element is focused. 47 | */ 48 | aria.Utils.attemptFocus = function(element) { 49 | if (!aria.Utils.isFocusable(element)) { 50 | return false; 51 | } 52 | aria.Utils.IgnoreUtilFocusChanges = true; 53 | try { 54 | element.focus(); 55 | } catch (e) { 56 | } 57 | aria.Utils.IgnoreUtilFocusChanges = false; 58 | return (document.activeElement === element); 59 | }; 60 | 61 | aria.Utils.isFocusable = function(element) { 62 | if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)) { 63 | return true; 64 | } 65 | 66 | if (element.disabled) { 67 | return false; 68 | } 69 | 70 | switch (element.nodeName) { 71 | case 'A': 72 | return !!element.href && element.rel !== 'ignore'; 73 | case 'INPUT': 74 | return element.type !== 'hidden' && element.type !== 'file'; 75 | case 'BUTTON': 76 | case 'SELECT': 77 | case 'TEXTAREA': 78 | return true; 79 | default: 80 | return false; 81 | } 82 | }; 83 | 84 | /** 85 | * 触发一个事件 86 | * mouseenter, mouseleave, mouseover, keyup, change, click 等 87 | * @param {Element} elm 88 | * @param {String} name 89 | * @param {*} opts 90 | */ 91 | aria.Utils.triggerEvent = function(elm, name, ...opts) { 92 | let eventName; 93 | 94 | if (/^mouse|click/.test(name)) { 95 | eventName = 'MouseEvents'; 96 | } else if (/^key/.test(name)) { 97 | eventName = 'KeyboardEvent'; 98 | } else { 99 | eventName = 'HTMLEvents'; 100 | } 101 | const evt = document.createEvent(eventName); 102 | 103 | evt.initEvent(name, ...opts); 104 | elm.dispatchEvent 105 | ? elm.dispatchEvent(evt) 106 | : elm.fireEvent('on' + name, evt); 107 | 108 | return elm; 109 | }; 110 | 111 | aria.Utils.keys = { 112 | tab: 9, 113 | enter: 13, 114 | space: 32, 115 | left: 37, 116 | up: 38, 117 | right: 39, 118 | down: 40, 119 | esc: 27 120 | }; 121 | 122 | export default aria.Utils; 123 | -------------------------------------------------------------------------------- /packages/util/cache.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * cache 工具类 4 | * web 浏览器存在3种类型 5 | * 1、cookies 6 | * 2、session 7 | * 3、storeage localStoreage sessionStorage 8 | * sessionStorage 单页面存在 9 | * localStoreage 本地内存存储 10 | * 11 | * 这里默认使用localStoreage作为存储 12 | */ 13 | 14 | 15 | // import Cookies from 'js-cookie' 16 | import { isEmpty } from './StringUtil' 17 | 18 | // 项目cache key 19 | const keyPre = 'IChat_' 20 | 21 | /** 22 | * 23 | */ 24 | export const setStore = (params = {}) => { 25 | let { 26 | name, 27 | content, 28 | type 29 | } = params 30 | name = keyPre + name 31 | const obj = { 32 | dataType: typeof (content), 33 | content: content, 34 | type: type, 35 | datetime: new Date().getTime() 36 | } 37 | 38 | convertStor(type).setItem(name, JSON.stringify(obj)) 39 | 40 | } 41 | 42 | const convertStor = (type) => { 43 | let storeage 44 | if (type) { 45 | storeage = window.sessionStorage 46 | } else { 47 | storeage = window.localStorage 48 | } 49 | 50 | return storeage 51 | } 52 | 53 | export const getStore = (params = {}) => { 54 | let { 55 | name, 56 | debug 57 | } = params 58 | name = keyPre + name 59 | 60 | let obj = {} 61 | let content 62 | obj = convertStor(true).getItem(name) 63 | if (isEmpty(obj)) obj = convertStor(false).getItem(name) 64 | if (isEmpty(obj)) return 65 | try { 66 | obj = JSON.parse(obj) 67 | } catch (e) { 68 | return obj 69 | } 70 | 71 | if (debug) { 72 | return obj 73 | } 74 | if (obj.dataType === 'string') { 75 | content = obj.content 76 | } else if (obj.dataType === 'number') { 77 | content = Number(obj.content) 78 | } else if (obj.dataType === 'boolean') { 79 | content = eval(obj.content) 80 | } else if (obj.dataType === 'object') { 81 | content = obj.content 82 | } 83 | return content 84 | } 85 | 86 | /** 87 | * 删除store 88 | */ 89 | export const removeStore = (params = {}) => { 90 | let { 91 | name, 92 | type 93 | } = params 94 | name = keyPre + name 95 | convertStor(type) 96 | } 97 | 98 | /** 99 | * 清空全部localStorage 100 | */ 101 | export const clearStore = (params = {}) => { 102 | const { type } = params 103 | if (type) { 104 | window.sessionStorage.clear() 105 | } else { 106 | window.localStorage.clear() 107 | } 108 | } 109 | 110 | /** 111 | * 获取全部localStorage 112 | */ 113 | export const getAllStore = (params = {}) => { 114 | const list = [] 115 | const { 116 | type 117 | } = params 118 | if (type) { 119 | for (let i = 0; i <= window.sessionStorage.length; i++) { 120 | list.push({ 121 | name: window.sessionStorage.key(i), 122 | content: getStore({ 123 | name: window.sessionStorage.key(i), 124 | type: 'session' 125 | }) 126 | }) 127 | } 128 | } else { 129 | for (let i = 0; i <= window.localStorage.length; i++) { 130 | list.push({ 131 | name: window.localStorage.key(i), 132 | content: getStore({ 133 | name: window.localStorage.key(i) 134 | }) 135 | }) 136 | } 137 | } 138 | return list 139 | } 140 | 141 | // export const getCookies = (key) => { return Cookies.get(key) } 142 | // 143 | // export function setCookies(key, params) { return Cookies.set(key, params) } 144 | // 145 | // export function removeCookies(key) { return Cookies.remove(key) } 146 | -------------------------------------------------------------------------------- /packages/util/constant.js: -------------------------------------------------------------------------------- 1 | 2 | export const default_avatar = require('../static/images/default_avatar.png') 3 | 4 | export const default_unnoticed = require("../static/images/unnotic.png") 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/util/eventHub.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 为了更好的打印日志分析，这里自己编写观察者时间中心 3 | */ 4 | 5 | 6 | //声明一个函数对象 eventHub 7 | var EventHub = function () { 8 | // 订阅列表 9 | this.calls = {}; 10 | } 11 | /** 12 | * 利用 js 自带的call()函数 13 | * 通知订阅的人们 14 | **/ 15 | EventHub.prototype.each = function (obj, fn) { 16 | var _this = this, key; 17 | if (typeof fn !== 'function') return _this; 18 | obj = obj || []; 19 | if (obj.constructor === Object) { 20 | for (key in obj) { 21 | if (fn.call(obj[key], key, obj[key])) break; 22 | } 23 | } else { 24 | for (key = 0; key < obj.length; key++) { 25 | if (fn.call(obj[key], key, obj[key])) break; 26 | } 27 | } 28 | return _this; 29 | } 30 | 31 | 32 | // 订阅方法 33 | EventHub.prototype.on = function (channel, callback) { 34 | if (typeof callback === 'function') { 35 | this.calls[channel] ? this.calls[channel].push(callback) : this.calls[channel] = [callback]; 36 | } 37 | return this; 38 | } 39 | 40 | 41 | //通知方法 42 | EventHub.prototype.emit = function (channel, data) { 43 | this.each(this.calls[channel], function (index, item) { 44 | item && item(data); 45 | }) 46 | } 47 | 48 | 49 | /** 50 | * 这是一个跟业务相关的额外扩展 51 | */ 52 | 53 | // EventHub.prototype.send = function ( data) { 54 | // this.emit('send',data); 55 | // } 56 | 57 | 58 | 59 | 60 | var eventHub = new EventHub(); 61 | 62 | 63 | 64 | export default eventHub; 65 | 66 | -------------------------------------------------------------------------------- /packages/util/layer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 图层拖拽工具类 3 | */ 4 | export function layerDrag(e, el, moveOut = false) { 5 | let X = e.clientX - el.offsetLeft; 6 | let Y = e.clientY - el.offsetTop; 7 | let fixed = false; 8 | document.onmousemove = function (e) { 9 | e.preventDefault(); 10 | let l = e.clientX - X; 11 | let t = e.clientY - Y; 12 | if (!moveOut) { 13 | let win = document.body; 14 | //控制元素不被拖出窗口外 15 | let stX = fixed ? 0 : win.scrollLeft, 16 | stY = fixed ? 0 : win.scrollTop; 17 | let setRig = win.clientWidth - el.clientWidth + stX 18 | , setBot = win.clientHeight - el.clientHeight + stY; 19 | l < stX && (l = stX); 20 | l > setRig && (l = setRig); 21 | t < stY && (t = stY); 22 | t > setBot && (t = setBot); 23 | } 24 | el.style.left = `${l}px`; 25 | el.style.top = `${t}px`; 26 | }; 27 | document.onmouseup = function () { 28 | document.onmousemove = null; 29 | document.onmouseup = null; 30 | }; 31 | } 32 | 33 | 34 | export function layerCenter(el) { 35 | let win = document.body; 36 | el.style.left = (win.clientWidth - 10 - el.clientWidth) / 2 + "px"; 37 | el.style.top = (win.clientHeight - 70 - el.clientHeight) / 2 + "px"; 38 | } 39 | 40 | /** 41 | * left bottom 42 | */ 43 | export function layerTipLB(el) { 44 | let win = document.body; 45 | el.style.left = (win.clientWidth - 10 - el.clientWidth) + "px"; 46 | el.style.top = win.clientHeight - 70 + "px"; 47 | } 48 | 49 | export function layerTipLT(el) { 50 | let win = document.body; 51 | el.style.left = (win.clientWidth - 10 - el.clientWidth) + "px"; 52 | el.style.top = 0 + "px"; 53 | } 54 | 55 | export function layerTipRB(el) { 56 | let win = document.body; 57 | el.style.left = 0 + "px"; 58 | el.style.top = win.clientHeight - 70 + "px"; 59 | } 60 | 61 | export function layerPosition(el, position) { 62 | switch (position) { 63 | case "center": 64 | layerCenter(el); 65 | break 66 | case "lt": 67 | layerTipLT(el); 68 | break; 69 | case "rb": 70 | layerTipRB(el) 71 | break; 72 | default: 73 | break; 74 | } 75 | 76 | } -------------------------------------------------------------------------------- /packages/util/merge.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 合并prop 3 | * @param target 4 | * @returns {*} 5 | */ 6 | export default function(target) { 7 | for (let i = 1, j = arguments.length; i < j; i++) { 8 | let source = arguments[i] || {}; 9 | for (let prop in source) { 10 | if (source.hasOwnProperty(prop)) { 11 | let value = source[prop]; 12 | if (value !== undefined) { 13 | target[prop] = value; 14 | } 15 | } 16 | } 17 | } 18 | 19 | return target; 20 | }; 21 | -------------------------------------------------------------------------------- /packages/util/play.js: -------------------------------------------------------------------------------- 1 | // 提示音文件 2 | // 3 | // 为了部署方便 4 | const tipSound = require('../static/media/tip.wav'); 5 | 6 | 7 | export function playTipSound(url = tipSound) { 8 | playMedia(url) 9 | } 10 | 11 | 12 | function playMedia(src) { 13 | var borswer = window.navigator.userAgent.toLowerCase(); 14 | if (borswer.indexOf("ie") >= 0) { 15 | //IE内核浏览器不支持 audion，则使用 embed 播放 16 | let embedPlay = document.getElementById("embedPlay") 17 | if (!embedPlay) { 18 | let body = document.getElementsByTagName("body")[0] 19 | // 创建 节点 20 | let el_embed = document.createElement("embed"); 21 | el_embed.id = 'embedPlay' 22 | el_embed.name = 'embedPlay' 23 | el_embed.hidden = true 24 | el_embed.autostart = true 25 | el_embed.loop = false 26 | body.append(el_embed); 27 | embedPlay = el_embed 28 | } 29 | if (embedPlay.src != src) { 30 | embedPlay.src = src 31 | } 32 | embedPlay.volume = 100; 33 | //embed.play();这个不需要 34 | } else { 35 | let audioPlay = document.getElementById("audioPlay") 36 | if (!audioPlay) { 37 | let body = document.getElementsByTagName("body")[0] 38 | // 创建 节点 39 | let el_audio = document.createElement("audio") 40 | el_audio.id = 'audioPlay' 41 | el_audio.hidden = true 42 | body.append(el_audio); 43 | audioPlay = el_audio 44 | } 45 | //浏览器支持 audion 46 | if (audioPlay.src != src) { 47 | audioPlay.src = src 48 | } 49 | // 为了防止 The play() request was interrupted by a new load request 这个异常。所以音乐延迟播放 50 | let playPromise = audioPlay.play(); 51 | if (playPromise) { 52 | playPromise.then(() => { 53 | // 音频加载成功 54 | // 音频的播放需要耗时 55 | setTimeout(() => { 56 | // 后续操作 57 | }, audioPlay.duration * 1000); // audio.duration 为音频的时长单位为秒 58 | }).catch((e) => { 59 | // 音频加载失败 60 | }); 61 | } 62 | 63 | } 64 | } 65 | 66 | 67 | -------------------------------------------------------------------------------- /packages/util/scroll.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | import IScroll from 'iscroll' 3 | 4 | /** 5 | * http://caibaojian.com/iscroll-5/scrollers.html 6 | * 已读未读是根据 每次新增数据 li 链上挂上 node 来判断 7 | * 8 | */ 9 | 10 | 11 | class Scroll extends IScroll { 12 | domNodes = [] 13 | isCroll = null 14 | readPosition = 0 15 | // 之前是在第几个 16 | beforeIndex = 0 17 | 18 | constructor(node, options) { 19 | super(node, options) 20 | } 21 | 22 | get nodePosition() { 23 | return this.domNodes 24 | } 25 | 26 | // 根据节点来判断是否已读 27 | get unread() { 28 | let result = 0 29 | this.domNodes.forEach(i => { 30 | const {read} = i 31 | if (!read) { 32 | result += 1 33 | } 34 | }) 35 | return result 36 | } 37 | 38 | get isTop() { 39 | let top = false 40 | let {y} = this 41 | if (y === 0) top = true 42 | return top 43 | } 44 | 45 | // 增加节点 46 | addNode(top, node) { 47 | if (!this.domNodes.find(i => { 48 | if (i.node === node) return i 49 | })) { 50 | this.domNodes.push({node, read: false, top}) 51 | } 52 | } 53 | 54 | 55 | // 重新设置顶点 56 | resetTop() { 57 | const postion = this.domNodes 58 | if (!postion) return 59 | const newPosition = postion.map(({node, read}) => { 60 | return { 61 | node, read, top: node.offsetTop 62 | } 63 | }) 64 | newPosition.sort((a, b) => a.top - b.top) 65 | this.domNodes = newPosition 66 | const index = this._findIndex() 67 | index > -1 && this.read(index) 68 | } 69 | 70 | // 之前的node 71 | beforeNode() { 72 | const beforeIndex = this.domNodes.length - this.beforeIndex; 73 | if (!beforeIndex) { 74 | return null; 75 | } 76 | return this.domNodes[beforeIndex] 77 | } 78 | 79 | // 80 | read() { 81 | this.domNodes.forEach((i, j) => { 82 | i.read = true 83 | }) 84 | } 85 | 86 | // 87 | reading() { 88 | const key = index || this.findCurrentIndex() 89 | let bottom = this.isBottom 90 | this.domNodes.forEach((i, j) => { 91 | if (bottom || key > j) { 92 | i.read = true 93 | } 94 | }) 95 | } 96 | 97 | 98 | get isBottom() { 99 | let result = false 100 | const {y, maxScrollY} = this 101 | result = Math.abs(y) >= Math.abs(maxScrollY) 102 | return result 103 | } 104 | 105 | // 查找当前的索引 106 | findCurrentIndex() { 107 | const {y} = this 108 | let currentTop = Math.abs(y) 109 | if (currentTop == 0) return 0 110 | const doms = this.domNodes 111 | let result = -1 112 | doms.forEach((i, j) => { 113 | const {top} = i 114 | if (result === -1 || currentTop >= top) { 115 | result = j + 1 116 | } 117 | }) 118 | return result 119 | } 120 | 121 | // 保存当前位置 122 | savePosition() { 123 | this.saveCurrentIndex() 124 | } 125 | 126 | saveCurrentIndex() { 127 | const nodeIndex = this.findCurrentIndex() 128 | // 这个索引需要从末尾往上找才 129 | this.beforeIndex = this.domNodes.length - nodeIndex; 130 | } 131 | 132 | // 前往先前的坐标点 133 | toBeforePosition() { 134 | if (this.beforeNode()) { 135 | let {node} = this.beforeNode() 136 | if (node) { 137 | this.scrollToElement(node, 0, 0, -30) 138 | } 139 | } 140 | } 141 | } 142 | 143 | export default Scroll 144 | -------------------------------------------------------------------------------- /packages/util/scrollbar-width.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | let scrollBarWidth; 4 | 5 | export default function() { 6 | if (Vue.prototype.$isServer) return 0; 7 | if (scrollBarWidth !== undefined) return scrollBarWidth; 8 | 9 | const outer = document.createElement('div'); 10 | outer.className = 'el-scrollbar__wrap'; 11 | outer.style.visibility = 'hidden'; 12 | outer.style.width = '100px'; 13 | outer.style.position = 'absolute'; 14 | outer.style.top = '-9999px'; 15 | document.body.appendChild(outer); 16 | 17 | const widthNoScroll = outer.offsetWidth; 18 | outer.style.overflow = 'scroll'; 19 | 20 | const inner = document.createElement('div'); 21 | inner.style.width = '100%'; 22 | outer.appendChild(inner); 23 | 24 | const widthWithScroll = inner.offsetWidth; 25 | outer.parentNode.removeChild(outer); 26 | scrollBarWidth = widthNoScroll - widthWithScroll; 27 | 28 | return scrollBarWidth; 29 | }; 30 | -------------------------------------------------------------------------------- /packages/util/types.js: -------------------------------------------------------------------------------- 1 | export function isString(obj) { 2 | return Object.prototype.toString.call(obj) === '[object String]'; 3 | } 4 | 5 | export function isObject(obj) { 6 | return Object.prototype.toString.call(obj) === '[object Object]'; 7 | } 8 | 9 | export function isHtmlElement(node) { 10 | return node && node.nodeType === Node.ELEMENT_NODE; 11 | } 12 | 13 | export const isFunction = (functionToCheck) => { 14 | var getType = {}; 15 | return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'; 16 | }; 17 | 18 | export const isUndefined = (val)=> { 19 | return val === void 0; 20 | }; 21 | 22 | export const isDefined = (val) => { 23 | return val !== undefined && val !== null; 24 | }; 25 | -------------------------------------------------------------------------------- /packages/util/validate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 验证集合 3 | */ 4 | 5 | /** 6 | * 身份证号码验证 7 | * @param str1 8 | * @returns {boolean} 9 | */ 10 | export const isIdCardNo = str => { 11 | const regex = /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/ 12 | if (!regex.test(str)) { 13 | regex.lastIndex = 0 14 | return false 15 | } else { 16 | regex.lastIndex = 0 17 | return true 18 | } 19 | } 20 | 21 | /** 22 | * 只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$” 23 | */ 24 | export const isaccount = str => { 25 | const regex = /^[a-zA-Z0-9_]+$/ 26 | if (!regex.test(str)) { 27 | regex.lastIndex = 0 28 | return false 29 | } else { 30 | regex.lastIndex = 0 31 | return true 32 | } 33 | } 34 | 35 | /** 36 | * Created by PanJiaChen on 16/11/18. 37 | */ 38 | 39 | /** 40 | * @param {string} path 41 | * @returns {Boolean} 42 | */ 43 | export function isExternal(path) { 44 | return /^(https?:|mailto:|tel:)/.test(path) 45 | } 46 | 47 | /** 48 | * @param {string} str 49 | * @returns {Boolean} 50 | */ 51 | export function validUsername(str) { 52 | const valid_map = ['admin', 'editor'] 53 | return valid_map.indexOf(str.trim()) >= 0 54 | } 55 | 56 | /** 57 | * @param {string} url 58 | * @returns {Boolean} 59 | */ 60 | export function validURL(url) { 61 | const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/ 62 | return reg.test(url) 63 | } 64 | 65 | /** 66 | * @param {string} str 67 | * @returns {Boolean} 68 | */ 69 | export function validLowerCase(str) { 70 | const reg = /^[a-z]+$/ 71 | return reg.test(str) 72 | } 73 | 74 | /** 75 | * @param {string} str 76 | * @returns {Boolean} 77 | */ 78 | export function validUpperCase(str) { 79 | const reg = /^[A-Z]+$/ 80 | return reg.test(str) 81 | } 82 | 83 | /** 84 | * @param {string} str 85 | * @returns {Boolean} 86 | */ 87 | export function validAlphabets(str) { 88 | const reg = /^[A-Za-z]+$/ 89 | return reg.test(str) 90 | } 91 | 92 | /** 93 | * @param {string} email 94 | * @returns {Boolean} 95 | */ 96 | export function validEmail(email) { 97 | const reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ 98 | return reg.test(email) 99 | } 100 | 101 | /** 102 | * @param {string} str 103 | * @returns {Boolean} 104 | */ 105 | export function isString(str) { 106 | if (typeof str === 'string' || str instanceof String) { 107 | return true 108 | } 109 | return false 110 | } 111 | 112 | /** 113 | * @param {Array} arg 114 | * @returns {Boolean} 115 | */ 116 | export function isArray(arg) { 117 | if (typeof Array.isArray === 'undefined') { 118 | return Object.prototype.toString.call(arg) === '[object Array]' 119 | } 120 | return Array.isArray(arg) 121 | } 122 | -------------------------------------------------------------------------------- /packages/util/vdom.js: -------------------------------------------------------------------------------- 1 | import { hasOwn } from './util'; 2 | 3 | export function isVNode(node) { 4 | return node !== null && typeof node === 'object' && hasOwn(node, 'componentOptions'); 5 | }; 6 | -------------------------------------------------------------------------------- /public/avatar/avatar_ax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/avatar_ax.png -------------------------------------------------------------------------------- /public/avatar/avatar_meteor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/avatar_meteor.png -------------------------------------------------------------------------------- /public/avatar/bi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/bi.png -------------------------------------------------------------------------------- /public/avatar/chuyin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/chuyin.png -------------------------------------------------------------------------------- /public/avatar/group_msdt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/group_msdt.jpg -------------------------------------------------------------------------------- /public/avatar/group_pxzx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/group_pxzx.png -------------------------------------------------------------------------------- /public/avatar/group_xxtx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/group_xxtx.png -------------------------------------------------------------------------------- /public/avatar/heiqi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/heiqi.png -------------------------------------------------------------------------------- /public/avatar/kailu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/kailu.png -------------------------------------------------------------------------------- /public/avatar/kan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/kan.png -------------------------------------------------------------------------------- /public/avatar/kekeluo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/kekeluo.png -------------------------------------------------------------------------------- /public/avatar/lian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/lian.png -------------------------------------------------------------------------------- /public/avatar/linai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/linai.png -------------------------------------------------------------------------------- /public/avatar/linnai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/linnai.png -------------------------------------------------------------------------------- /public/avatar/qq_group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/qq_group.png -------------------------------------------------------------------------------- /public/avatar/riheli.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/riheli.png -------------------------------------------------------------------------------- /public/avatar/shengmu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/shengmu.png -------------------------------------------------------------------------------- /public/avatar/temp1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/temp1.jpg -------------------------------------------------------------------------------- /public/avatar/temp2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/temp2.jpg -------------------------------------------------------------------------------- /public/avatar/ue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/ue.png -------------------------------------------------------------------------------- /public/avatar/ue1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/ue1.png -------------------------------------------------------------------------------- /public/avatar/user_avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/user_avatar.png -------------------------------------------------------------------------------- /public/avatar/xue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/xue.png -------------------------------------------------------------------------------- /public/avatar/yalisha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/yalisha.png -------------------------------------------------------------------------------- /public/avatar/yixu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/yixu.png -------------------------------------------------------------------------------- /public/avatar/youjiali.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/youjiali.png -------------------------------------------------------------------------------- /public/avatar/zhenbu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/zhenbu.png -------------------------------------------------------------------------------- /public/avatar/zhenqin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/zhenqin.png -------------------------------------------------------------------------------- /public/avatar/千歌.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/千歌.png -------------------------------------------------------------------------------- /public/avatar/咲恋.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/咲恋.png -------------------------------------------------------------------------------- /public/avatar/女仆.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/女仆.png -------------------------------------------------------------------------------- /public/avatar/深月.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/深月.png -------------------------------------------------------------------------------- /public/avatar/美咲.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/avatar/美咲.png -------------------------------------------------------------------------------- /public/emoticon/emoticon_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/emoticon/emoticon_1.jpg -------------------------------------------------------------------------------- /public/emoticon/emoticon_pa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/emoticon/emoticon_pa.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/favicon.ico -------------------------------------------------------------------------------- /public/images/group_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/july-meteor/vue-mchat/88be4186d1083e07f873ea2b38ddc262d5f99cfc/public/images/group_1.jpg -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-meteor-chat 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 16 | 17 | 24 | -------------------------------------------------------------------------------- /src/HelloWord.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | -------------------------------------------------------------------------------- /src/Test.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 59 | 60 | -------------------------------------------------------------------------------- /src/constant.js: -------------------------------------------------------------------------------- 1 | /** 2 | * tomcat 部署 图片名称不能使用中文 3 | */ 4 | 5 | // 用户列表 6 | const user_list = [ 7 | { 8 | id: 1, 9 | name: "七月", 10 | online: true, 11 | type: "", 12 | avatar:"", 13 | role:'master' 14 | }, 15 | { 16 | id: 1, 17 | name: "初音", 18 | online: true, 19 | type: "", 20 | avatar: require("../public/avatar/chuyin.png"), 21 | role:'manager' 22 | }, 23 | { 24 | id: 2, 25 | name: "雪", 26 | online: false, 27 | type: "", 28 | avatar: require("../public/avatar/xue.png"), 29 | role:'manager' 30 | }, 31 | { 32 | id: 3, 33 | name: "可可罗", 34 | online: false, 35 | type: "", 36 | avatar: require("../public/avatar/kekeluo.png"), 37 | }, 38 | { 39 | id: 4, 40 | name: "栞", 41 | online: false, 42 | type: "", 43 | avatar: require("../public/avatar/kan.png"), 44 | }, 45 | ]; 46 | 47 | // 公告列表 48 | const notice_list = [ 49 | { 50 | id: 1, 51 | type: "文件", 52 | title: "RocketMQ原理.dock", 53 | }, 54 | { 55 | id: 2, 56 | type: "公告", 57 | title: "公主连接Rank推荐", 58 | }, 59 | ] 60 | 61 | // 历史记录 62 | const history = [ 63 | { 64 | username: "历史记录", 65 | avatar: require("../public/avatar/temp2.jpg"), 66 | id: 1, 67 | type: "group", 68 | content: "audio[https://www.w3school.com.cn/i/horse.mp3]", 69 | cid: 0, 70 | mine: false, 71 | fromid: 3, 72 | timestamp: new Date(), 73 | }, 74 | ]; 75 | 76 | // 测试发送数据 77 | const test_send_msg = [ 78 | { 79 | username: "小白", 80 | avatar: require("../public/avatar/temp1.jpg"), 81 | id: 1, 82 | type: "group", 83 | content: "img[/emoticon/emoticon_1.jpg]", 84 | cid: 0, 85 | mine: false, 86 | fromid: 2, 87 | timestamp: new Date(), 88 | }, 89 | { 90 | username: "小奶", 91 | avatar: require("../public/avatar/temp2.jpg"), 92 | id: 1, 93 | type: "group", 94 | content: "video[https://www.w3school.com.cn/i/movie.mp4]", 95 | cid: 0, 96 | mine: false, 97 | fromid: 3, 98 | timestamp: new Date(), 99 | }, 100 | { 101 | username: "老八", 102 | avatar: require("../public/avatar/temp2.jpg"), 103 | id: 1, 104 | type: "group", 105 | content: "audio[https://www.w3school.com.cn/i/horse.mp3]", 106 | cid: 0, 107 | mine: false, 108 | fromid: 3, 109 | timestamp: new Date(), 110 | }, 111 | ] 112 | 113 | const mine = { 114 | // 昵称 115 | username: "七月", 116 | // 用户id 117 | id: "10001", 118 | //状态 119 | status: "online", 120 | //签名 121 | sign: "与其感慨路难行,不如马上出发！", 122 | avatar: require("../public/avatar/avatar_meteor.png"), 123 | } 124 | 125 | const chats = [ 126 | 127 | { 128 | id: 1, 129 | name: "海喵突基队", 130 | type: "group", 131 | avatar: require("../public/images/group_1.jpg"), 132 | userList: user_list, 133 | notices: [], 134 | master:1 135 | }, 136 | { 137 | id: -1, 138 | name: "系统消息", 139 | type: "sys_msg", 140 | online: false, 141 | }, 142 | { 143 | id: 2, 144 | name: "初音", 145 | type: "friend", 146 | online: true, 147 | avatar: require("../public/avatar/chuyin.png"), 148 | }, 149 | { 150 | id: 3, 151 | name: "雪爷", 152 | type: "friend", 153 | online: false, 154 | avatar: require("../public/avatar/xue.png"), 155 | }, 156 | 157 | ] 158 | 159 | export default { 160 | notice_list, 161 | user_list, 162 | history, 163 | test_send_msg, 164 | mine, 165 | chats 166 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import MChat from '../packages/index' 4 | // 5 | // import './lib/MChat.css' 6 | // import MChat from './lib/MChat.umd' 7 | 8 | 9 | 10 | 11 | Vue.use(MChat) 12 | 13 | Vue.config.productionTip = false; 14 | 15 | new Vue({ 16 | render: h => h(App), 17 | }).$mount('#app'); 18 | -------------------------------------------------------------------------------- /src/test/applyTest.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 30 | 31 | -------------------------------------------------------------------------------- /src/test/dialogTest.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 59 | 60 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const port = 8080 3 | const svgIconDir = 'packages/SvgIcon' 4 | 5 | const name = 'Meteor Chat' // page title 6 | function resolve(dir) { 7 | return path.join(__dirname, dir) 8 | } 9 | module.exports = { 10 | 11 | publicPath: './', 12 | outputDir: 'chat', 13 | assetsDir: 'static', 14 | // lintOnSave: process.env.NODE_ENV === 'development', 15 | lintOnSave: false, 16 | productionSourceMap: false, 17 | devServer: { 18 | port: port, 19 | open: true, 20 | overlay: { 21 | warnings: false, 22 | errors: true 23 | }, 24 | }, 25 | configureWebpack: { 26 | name: name, 27 | resolve: { 28 | alias: { 29 | '@': resolve('src') 30 | }, 31 | extensions: ['.js', '.vue', '.json', '.ts'], 32 | }, 33 | 34 | }, 35 | chainWebpack(config) { 36 | config.plugins.delete('preload') // TODO: need test 37 | config.plugins.delete('prefetch') // TODO: need test 38 | 39 | // set svg-sprite-loader 40 | config.module 41 | .rule('svg') 42 | .exclude.add(resolve(svgIconDir)) 43 | .end() 44 | config.module 45 | .rule('icons') 46 | .test(/\.svg$/) 47 | .include.add(resolve(svgIconDir)) 48 | .end() 49 | .use('svg-sprite-loader') 50 | .loader('svg-sprite-loader') 51 | .options({ 52 | symbolId: 'icon-[name]' 53 | }) 54 | .end() 55 | 56 | // set preserveWhitespace 57 | config.module 58 | .rule('vue') 59 | .use('vue-loader') 60 | .loader('vue-loader') 61 | .tap(options => { 62 | options.compilerOptions.preserveWhitespace = true 63 | return options 64 | }) 65 | .end() 66 | // ts链式配置 67 | 68 | config.module 69 | .rule('ts') 70 | .test(/\.tsx?$/) 71 | .use('ts-loader') 72 | .loader('ts-loader') 73 | .options({ 74 | appendTsSuffixTo: [/\.vue$/], 75 | }).end() 76 | 77 | config.module 78 | .rule('images') 79 | .use('url-loader') 80 | .loader('url-loader') 81 | .tap(options => { 82 | options.limit = 999999999; 83 | return options 84 | }).end() 85 | } 86 | } 87 | --------------------------------------------------------------------------------