Skip to content

Commit 17cff8f

Browse files
stuffishstuffish
committed
merge
2 parents d82f0d7 + b865f5d commit 17cff8f

24 files changed

+1050
-617
lines changed

‎README.md

+108-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
# new
1+
# ChatUI
22

3-
> A Vue.js project
3+
![image](https://github.com/stuffish/ChatUI/blob/master/preview/preview.gif)
44

5-
## Build Setup
5+
# Build Setup
66

77
``` bash
88
# install dependencies
@@ -11,11 +11,111 @@ npm install
1111
# serve with hot reload at localhost:8080
1212
npm run dev
1313

14-
# build for production with minification
15-
npm run build
14+
```
1615

17-
# build for production and view the bundle analyzer report
18-
npm run build --report
16+
# Code Organization
17+
```
18+
├── build
19+
├── config
20+
├── preview // project preview image
21+
├── src // the source files
22+
│ ├── assets // static image resource
23+
│ ├── components
24+
│ │ ├── chat_area.vue // provide chatting view
25+
│ │ ├── chat_cell.vue // a cell include contact simple data
26+
│   │   ├── chat_dialog.vue     // pop dialog
27+
│   │   ├── chat_group.vue   // chat-cell group
28+
│ │ ├── chat_header.vue // top header
29+
│ │ └── chat_pop_bubble.vue // small bubble clickable
30+
│ ├── pages
31+
│   │   ├── chat.vue             // chat-each-other view
32+
│ │ ├── index.vue // contact list
33+
│ │ ├── overview.vue // contact profile view
34+
│ │ ├── page_transition.vue // page transition animate
35+
│ │ ├── pay.vue // pay for VIP
36+
│ │ └── theme.vue // change theme
37+
│ ├── router
38+
│ │ └── index.js // vue router setting
39+
│ ├── scripts // scripts resource
40+
│ ├── styles // css resource
41+
│ ├── App.vue // page entry file
42+
│ └── main.js // program entry file, load components
43+
├── .babelrc
44+
├── .gitigore
45+
├── data.json // analog data of back end
46+
├── index.html // entry html
47+
├── LICENSE
48+
├── package-lock.json
49+
├── package.json
50+
└── README.md
1951
```
2052

21-
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
53+
# Components
54+
## ChatArea
55+
56+
>Provide the conversation view and the message sender of each chatting.
57+
>### Menu props
58+
>| props | Introductions | type | default |
59+
>| :------------ | :------------ | :------------ | :------------ |
60+
>| height | Chatting area height. | Number | 300 |
61+
>| contactAvatar | URL of other avartar, display on the left. | String | - |
62+
>| ownerAvatar | URL of own avartar, display on the right. | String | - |
63+
>| oriData | Chat message, once at start time. | Array | [] |
64+
>### Menu events
65+
>| events | Introductions | return |
66+
>| :------------ | :------------ | :------------ |
67+
>| on-avatar-click | Triggered when a avatar is clicked. | Which avatar was clicked (0: own, 1: other). |
68+
>| load-more | Drag to top and get more data. | A function callback contains success status and data. |
69+
>| on-msg-send | Triggered when the message to be sent is ready and the sending button is clicked. | The message of sending. |
70+
>
71+
>When you received a new message, use `this.$bus.emit('new-chat-data', message)`with `vue-bus` on parent to provide the new message to this component.
72+
73+
## ChatCell
74+
75+
> A cell include contact avatar, nickname, last massage and time.
76+
>### Menu props
77+
>| props | Introductions | type | default |
78+
>| :------------ | :------------ | :------------ | :------------ |
79+
>| avatar | Avartar URL. | String | '' |
80+
>| nickname | Nickname or display name. | String | '' |
81+
>| msg | The last message. | String | '' |
82+
>| time | The sent time of last message. | String | '' |
83+
>| circle-avatar | Display the avatar in circle or not. | Boolean | false |
84+
85+
## ChatGroup
86+
> The contacts list container, each info including other's avatar, the last message of the chat, the last time. Consists of the `chat-cell` component.
87+
>### Menu props
88+
>| props | Introductions | type | default |
89+
>| :------------ | :------------ | :------------ | :------------ |
90+
>| data | Contacts list data. | Array| [] |
91+
>### Menu events
92+
>| events | Introductions | return |
93+
>| :------------ | :------------ | :------------ |
94+
>| on-cell-click | A item is clicked. | click index, content. |
95+
96+
## ChatDialog
97+
> Pop a dialog in custom.
98+
>### Menu props
99+
>| props | Introductions | type | default |
100+
>| :------------ | :------------ | :------------ | :------------ |
101+
>| type | Dialog type (text dialog or input dialog). | Number | 0 |
102+
>| show | Dialog display. | Boolean | false |
103+
>| title | Dialog title. | String | false |
104+
>| content | Dialog content. | String | '' |
105+
>| positive-btn | Display text on positive button. | String | 'Confirm'|
106+
>| negative-btn | Display text on negative button. | String | 'Cancel'|
107+
>### Menu events
108+
>| events | Introductions | return |
109+
>| :------------ | :------------ | :------------ |
110+
>| positive-btn-click | When the positive button is pressed. | content |
111+
>| negative-btn-click | When the nagative button is pressed. | - |
112+
113+
## ChatHeader
114+
>The top header.
115+
>### Menu props
116+
>| props | Introductions | type | default |
117+
>| :------------ | :------------ | :------------ | :------------ |
118+
>| height | The height occupied by the header. | Number | 50 |
119+
>| back | Display the back option. | Boolean | true |
120+
>| title | The content of the header. | String | '' |
121+
>| fixed | The position of the header use fixed or not. | Boolean | false |

‎data.json renamed to ‎api/data.json

File renamed without changes.

‎build/webpack.base.conf.js

+51-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,63 @@
11
'use strict'
22
const path = require('path')
3+
const glob = require('globby')
34
const utils = require('./utils')
5+
const merge = require('webpack-merge')
46
const config = require('../config')
57
const vueLoaderConfig = require('./vue-loader.conf')
8+
const ExtractTextPlugin = require('extract-text-webpack-plugin')
69

710
function resolve (dir) {
811
return path.join(__dirname, '..', dir)
912
}
1013

14+
const CSS_PATH = {
15+
css: {
16+
pattern: ['../src/styles/**/[^_]*.scss', '../src/styles/**/*.scss', '../src/styles/*.scss'],
17+
// dst: path.resolve(__dirname, 'static/build/webpack'),
18+
dst: config.build.assetsLib,
19+
}
20+
}
1121

22+
function getCSSEntries(config) {
23+
let fileList = glob.sync(config.pattern)
24+
return fileList.reduce(function (previous, current) {
25+
let filePath = path.parse(path.relative(config.src, current))
26+
let withoutSuffix = path.join(filePath.dir, filePath.name)
27+
previous[withoutSuffix] = path.resolve(__dirname, current)
28+
return previous
29+
}, {})
30+
}
31+
const wpconfig = {
32+
devtool: 'cheap-module-eval-source-map',
33+
context: path.resolve(__dirname, '../'),
34+
entry: getCSSEntries(CSS_PATH.css),
35+
output: {
36+
path: CSS_PATH.css.dst,
37+
filename: 'style.css',
38+
publicPath: process.env.NODE_ENV === 'production'
39+
? config.build.assetsPublicPath
40+
: config.dev.assetsPublicPath
41+
},
42+
module: {
43+
rules: [
44+
{
45+
test: /\.scss$/,
46+
use: ExtractTextPlugin.extract({
47+
use: ['style-loader', 'css-loader', 'sass-loader']
48+
})
49+
}
50+
]
51+
},
52+
resolve: {
53+
extensions: ['.scss']
54+
},
55+
plugins: [
56+
new ExtractTextPlugin('/lib/style.css'),
57+
]
58+
}
1259

13-
module.exports = {
60+
module.exports = merge(wpconfig, {
1461
context: path.resolve(__dirname, '../'),
1562
entry: {
1663
app: './src/main.js'
@@ -64,7 +111,8 @@ module.exports = {
64111
limit: 10000,
65112
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
66113
}
67-
}
114+
},
115+
68116
]
69117
},
70118
node: {
@@ -79,4 +127,4 @@ module.exports = {
79127
tls: 'empty',
80128
child_process: 'empty'
81129
}
82-
}
130+
})

‎build/webpack.dev.conf.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ const PORT = process.env.PORT && Number(process.env.PORT)
1313

1414
const express = require('express');
1515
const app = express();
16-
var appData = require('../data.json');
17-
var apiRoutes = express.Router();
16+
const appData = require('../api/data.json');
17+
const apiRoutes = express.Router();
1818
app.use('/api', apiRoutes);
1919

2020
const devWebpackConfig = merge(baseWebpackConfig, {

‎config/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,12 @@ module.exports = {
4040
// just be aware of this issue when enabling this option.
4141
cssSourceMap: false,
4242
},
43-
4443
build: {
4544
// Template for index.html
4645
index: path.resolve(__dirname, '../dist/index.html'),
4746

4847
// Paths
48+
assetsLib: path.resolve(__dirname, '../lib'),
4949
assetsRoot: path.resolve(__dirname, '../dist'),
5050
assetsSubDirectory: 'static',
5151
assetsPublicPath: '/',

‎index.html

-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,5 @@
77
</head>
88
<body>
99
<div id="app"></div>
10-
<!-- built files will be auto injected -->
1110
</body>
1211
</html>

‎package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "chat_ui",
33
"main": "index.js",
4-
"description": "A Vue.js project",
4+
"description": "a simple chat ui in mobile with vue",
55
"version": "0.1.0",
66
"author": "stuffish",
77
"engines" : {
@@ -11,7 +11,8 @@
1111
"scripts": {
1212
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
1313
"start": "npm run dev",
14-
"build": "node build/build.js"
14+
"build": "node build/build.js",
15+
"build-style": "node build/build-style.js"
1516
},
1617
"dependencies": {
1718
"css-loader": "^0.28.7",
@@ -50,6 +51,7 @@
5051
"postcss-import": "^11.0.0",
5152
"postcss-loader": "^2.0.8",
5253
"rimraf": "^2.6.0",
54+
"sass-map": "^0.3.4",
5355
"semver": "^5.3.0",
5456
"shelljs": "^0.7.6",
5557
"uglifyjs-webpack-plugin": "^1.1.1",

‎src/App.vue

+4
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,8 @@ export default {
2525
@import "styles/base/reset.scss";
2626
@import "styles/base/animate.scss";
2727
@import "'//at.alicdn.com/t/font_463713_020jnoxnk4kj4i.css'";
28+
#app {
29+
width: 100vw;
30+
height: 100vh;
31+
}
2832
</style>

0 commit comments

Comments
 (0)