parent
8d6af3b657
commit
d3c5d6fb8d
@ -0,0 +1,12 @@
|
||||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
||||
}
|
||||
}],
|
||||
"stage-2"
|
||||
],
|
||||
"plugins": ["transform-vue-jsx", "transform-runtime"]
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
@ -0,0 +1,4 @@
|
||||
/build/
|
||||
/config/
|
||||
/dist/
|
||||
/*.js
|
||||
@ -0,0 +1,29 @@
|
||||
// https://eslint.org/docs/user-guide/configuring
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
},
|
||||
extends: [
|
||||
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
|
||||
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
|
||||
'plugin:vue/essential',
|
||||
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
|
||||
'standard'
|
||||
],
|
||||
// required to lint *.vue files
|
||||
plugins: [
|
||||
'vue'
|
||||
],
|
||||
// add your custom rules here
|
||||
rules: {
|
||||
// allow async-await
|
||||
'generator-star-spacing': 'off',
|
||||
// allow debugger during development
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
# Build and Release Folders
|
||||
bin-debug/
|
||||
bin-release/
|
||||
[Oo]bj/
|
||||
[Bb]in/
|
||||
|
||||
# Other files and folders
|
||||
.settings/
|
||||
|
||||
# Executables
|
||||
*.swf
|
||||
*.air
|
||||
*.ipa
|
||||
*.apk
|
||||
|
||||
# Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties`
|
||||
# should NOT be excluded as they contain compiler settings and other important
|
||||
# information for Eclipse / Flash Builder.
|
||||
node_modules
|
||||
@ -0,0 +1,10 @@
|
||||
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||
|
||||
module.exports = {
|
||||
"plugins": {
|
||||
"postcss-import": {},
|
||||
"postcss-url": {},
|
||||
// to edit target browsers: use "browserslist" field in package.json
|
||||
"autoprefixer": {}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
'use strict'
|
||||
require('./check-versions')()
|
||||
|
||||
process.env.NODE_ENV = 'production'
|
||||
|
||||
const ora = require('ora')
|
||||
const rm = require('rimraf')
|
||||
const path = require('path')
|
||||
const chalk = require('chalk')
|
||||
const webpack = require('webpack')
|
||||
const config = require('../config')
|
||||
const webpackConfig = require('./webpack.prod.conf')
|
||||
|
||||
const spinner = ora('building for production...')
|
||||
spinner.start()
|
||||
|
||||
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
|
||||
if (err) throw err
|
||||
webpack(webpackConfig, (err, stats) => {
|
||||
spinner.stop()
|
||||
if (err) throw err
|
||||
process.stdout.write(stats.toString({
|
||||
colors: true,
|
||||
modules: false,
|
||||
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
|
||||
chunks: false,
|
||||
chunkModules: false
|
||||
}) + '\n\n')
|
||||
|
||||
if (stats.hasErrors()) {
|
||||
console.log(chalk.red(' Build failed with errors.\n'))
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
console.log(chalk.cyan(' Build complete.\n'))
|
||||
console.log(chalk.yellow(
|
||||
' Tip: built files are meant to be served over an HTTP server.\n' +
|
||||
' Opening index.html over file:// won\'t work.\n'
|
||||
))
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,54 @@
|
||||
'use strict'
|
||||
const chalk = require('chalk')
|
||||
const semver = require('semver')
|
||||
const packageConfig = require('../package.json')
|
||||
const shell = require('shelljs')
|
||||
|
||||
function exec (cmd) {
|
||||
return require('child_process').execSync(cmd).toString().trim()
|
||||
}
|
||||
|
||||
const versionRequirements = [
|
||||
{
|
||||
name: 'node',
|
||||
currentVersion: semver.clean(process.version),
|
||||
versionRequirement: packageConfig.engines.node
|
||||
}
|
||||
]
|
||||
|
||||
if (shell.which('npm')) {
|
||||
versionRequirements.push({
|
||||
name: 'npm',
|
||||
currentVersion: exec('npm --version'),
|
||||
versionRequirement: packageConfig.engines.npm
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = function () {
|
||||
const warnings = []
|
||||
|
||||
for (let i = 0; i < versionRequirements.length; i++) {
|
||||
const mod = versionRequirements[i]
|
||||
|
||||
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
|
||||
warnings.push(mod.name + ': ' +
|
||||
chalk.red(mod.currentVersion) + ' should be ' +
|
||||
chalk.green(mod.versionRequirement)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (warnings.length) {
|
||||
console.log('')
|
||||
console.log(chalk.yellow('To use this template, you must update following to modules:'))
|
||||
console.log()
|
||||
|
||||
for (let i = 0; i < warnings.length; i++) {
|
||||
const warning = warnings[i]
|
||||
console.log(' ' + warning)
|
||||
}
|
||||
|
||||
console.log()
|
||||
process.exit(1)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,101 @@
|
||||
'use strict'
|
||||
const path = require('path')
|
||||
const config = require('../config')
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
const packageConfig = require('../package.json')
|
||||
|
||||
exports.assetsPath = function (_path) {
|
||||
const assetsSubDirectory = process.env.NODE_ENV === 'production'
|
||||
? config.build.assetsSubDirectory
|
||||
: config.dev.assetsSubDirectory
|
||||
|
||||
return path.posix.join(assetsSubDirectory, _path)
|
||||
}
|
||||
|
||||
exports.cssLoaders = function (options) {
|
||||
options = options || {}
|
||||
|
||||
const cssLoader = {
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: options.sourceMap
|
||||
}
|
||||
}
|
||||
|
||||
const postcssLoader = {
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
sourceMap: options.sourceMap
|
||||
}
|
||||
}
|
||||
|
||||
// generate loader string to be used with extract text plugin
|
||||
function generateLoaders (loader, loaderOptions) {
|
||||
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
|
||||
|
||||
if (loader) {
|
||||
loaders.push({
|
||||
loader: loader + '-loader',
|
||||
options: Object.assign({}, loaderOptions, {
|
||||
sourceMap: options.sourceMap
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Extract CSS when that option is specified
|
||||
// (which is the case during production build)
|
||||
if (options.extract) {
|
||||
return ExtractTextPlugin.extract({
|
||||
use: loaders,
|
||||
fallback: 'vue-style-loader'
|
||||
})
|
||||
} else {
|
||||
return ['vue-style-loader'].concat(loaders)
|
||||
}
|
||||
}
|
||||
|
||||
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
|
||||
return {
|
||||
css: generateLoaders(),
|
||||
postcss: generateLoaders(),
|
||||
less: generateLoaders('less'),
|
||||
sass: generateLoaders('sass', { indentedSyntax: true }),
|
||||
scss: generateLoaders('sass'),
|
||||
stylus: generateLoaders('stylus'),
|
||||
styl: generateLoaders('stylus')
|
||||
}
|
||||
}
|
||||
|
||||
// Generate loaders for standalone style files (outside of .vue)
|
||||
exports.styleLoaders = function (options) {
|
||||
const output = []
|
||||
const loaders = exports.cssLoaders(options)
|
||||
|
||||
for (const extension in loaders) {
|
||||
const loader = loaders[extension]
|
||||
output.push({
|
||||
test: new RegExp('\\.' + extension + '$'),
|
||||
use: loader
|
||||
})
|
||||
}
|
||||
|
||||
return output
|
||||
}
|
||||
|
||||
exports.createNotifierCallback = () => {
|
||||
const notifier = require('node-notifier')
|
||||
|
||||
return (severity, errors) => {
|
||||
if (severity !== 'error') return
|
||||
|
||||
const error = errors[0]
|
||||
const filename = error.file && error.file.split('!').pop()
|
||||
|
||||
notifier.notify({
|
||||
title: packageConfig.name,
|
||||
message: severity + ': ' + error.name,
|
||||
subtitle: filename || '',
|
||||
icon: path.join(__dirname, 'logo.png')
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
'use strict'
|
||||
const utils = require('./utils')
|
||||
const config = require('../config')
|
||||
const isProduction = process.env.NODE_ENV === 'production'
|
||||
const sourceMapEnabled = isProduction
|
||||
? config.build.productionSourceMap
|
||||
: config.dev.cssSourceMap
|
||||
|
||||
module.exports = {
|
||||
loaders: utils.cssLoaders({
|
||||
sourceMap: sourceMapEnabled,
|
||||
extract: isProduction
|
||||
}),
|
||||
cssSourceMap: sourceMapEnabled,
|
||||
cacheBusting: config.dev.cacheBusting,
|
||||
transformToRequire: {
|
||||
video: ['src', 'poster'],
|
||||
source: 'src',
|
||||
img: 'src',
|
||||
image: 'xlink:href'
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,96 @@
|
||||
'use strict'
|
||||
const path = require('path')
|
||||
const utils = require('./utils')
|
||||
const config = require('../config')
|
||||
const vueLoaderConfig = require('./vue-loader.conf')
|
||||
|
||||
function resolve (dir) {
|
||||
return path.join(__dirname, '..', dir)
|
||||
}
|
||||
|
||||
const createLintingRule = () => ({
|
||||
test: /\.(js|vue)$/,
|
||||
loader: 'eslint-loader',
|
||||
enforce: 'pre',
|
||||
include: [resolve('src'), resolve('test')],
|
||||
options: {
|
||||
formatter: require('eslint-friendly-formatter'),
|
||||
emitWarning: !config.dev.showEslintErrorsInOverlay
|
||||
}
|
||||
})
|
||||
|
||||
module.exports = {
|
||||
context: path.resolve(__dirname, '../'),
|
||||
entry: {
|
||||
app: './src/main.js'
|
||||
},
|
||||
output: {
|
||||
path: config.build.assetsRoot,
|
||||
filename: '[name].js',
|
||||
publicPath: process.env.NODE_ENV === 'production'
|
||||
? config.build.assetsPublicPath
|
||||
: config.dev.assetsPublicPath
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.vue', '.json'],
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.esm.js',
|
||||
'@': resolve('src'),
|
||||
}
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
...(config.dev.useEslint ? [createLintingRule()] : []),
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: vueLoaderConfig
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: utils.assetsPath('img/[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: utils.assetsPath('media/[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
loader: ['style', 'css', 'sass']
|
||||
}
|
||||
]
|
||||
},
|
||||
node: {
|
||||
// prevent webpack from injecting useless setImmediate polyfill because Vue
|
||||
// source contains it (although only uses it if it's native).
|
||||
setImmediate: false,
|
||||
// prevent webpack from injecting mocks to Node native modules
|
||||
// that does not make sense for the client
|
||||
dgram: 'empty',
|
||||
fs: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty',
|
||||
child_process: 'empty'
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,95 @@
|
||||
'use strict'
|
||||
const utils = require('./utils')
|
||||
const webpack = require('webpack')
|
||||
const config = require('../config')
|
||||
const merge = require('webpack-merge')
|
||||
const path = require('path')
|
||||
const baseWebpackConfig = require('./webpack.base.conf')
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
|
||||
const portfinder = require('portfinder')
|
||||
|
||||
const HOST = process.env.HOST
|
||||
const PORT = process.env.PORT && Number(process.env.PORT)
|
||||
|
||||
const devWebpackConfig = merge(baseWebpackConfig, {
|
||||
module: {
|
||||
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
|
||||
},
|
||||
// cheap-module-eval-source-map is faster for development
|
||||
devtool: config.dev.devtool,
|
||||
|
||||
// these devServer options should be customized in /config/index.js
|
||||
devServer: {
|
||||
clientLogLevel: 'warning',
|
||||
historyApiFallback: {
|
||||
rewrites: [
|
||||
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
|
||||
],
|
||||
},
|
||||
hot: true,
|
||||
contentBase: false, // since we use CopyWebpackPlugin.
|
||||
compress: true,
|
||||
host: HOST || config.dev.host,
|
||||
port: PORT || config.dev.port,
|
||||
open: config.dev.autoOpenBrowser,
|
||||
overlay: config.dev.errorOverlay
|
||||
? { warnings: false, errors: true }
|
||||
: false,
|
||||
publicPath: config.dev.assetsPublicPath,
|
||||
proxy: config.dev.proxyTable,
|
||||
quiet: true, // necessary for FriendlyErrorsPlugin
|
||||
watchOptions: {
|
||||
poll: config.dev.poll,
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': require('../config/dev.env')
|
||||
}),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
// https://github.com/ampedandwired/html-webpack-plugin
|
||||
new HtmlWebpackPlugin({
|
||||
filename: 'index.html',
|
||||
template: 'index.html',
|
||||
inject: true
|
||||
}),
|
||||
// copy custom static assets
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
from: path.resolve(__dirname, '../static'),
|
||||
to: config.dev.assetsSubDirectory,
|
||||
ignore: ['.*']
|
||||
}
|
||||
])
|
||||
]
|
||||
})
|
||||
|
||||
module.exports = new Promise((resolve, reject) => {
|
||||
portfinder.basePort = process.env.PORT || config.dev.port
|
||||
portfinder.getPort((err, port) => {
|
||||
if (err) {
|
||||
reject(err)
|
||||
} else {
|
||||
// publish the new Port, necessary for e2e tests
|
||||
process.env.PORT = port
|
||||
// add port to devServer config
|
||||
devWebpackConfig.devServer.port = port
|
||||
|
||||
// Add FriendlyErrorsPlugin
|
||||
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
|
||||
compilationSuccessInfo: {
|
||||
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
|
||||
},
|
||||
onErrors: config.dev.notifyOnErrors
|
||||
? utils.createNotifierCallback()
|
||||
: undefined
|
||||
}))
|
||||
|
||||
resolve(devWebpackConfig)
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,145 @@
|
||||
'use strict'
|
||||
const path = require('path')
|
||||
const utils = require('./utils')
|
||||
const webpack = require('webpack')
|
||||
const config = require('../config')
|
||||
const merge = require('webpack-merge')
|
||||
const baseWebpackConfig = require('./webpack.base.conf')
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
|
||||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
|
||||
|
||||
const env = require('../config/prod.env')
|
||||
|
||||
const webpackConfig = merge(baseWebpackConfig, {
|
||||
module: {
|
||||
rules: utils.styleLoaders({
|
||||
sourceMap: config.build.productionSourceMap,
|
||||
extract: false,
|
||||
usePostCSS: true
|
||||
})
|
||||
},
|
||||
devtool: config.build.productionSourceMap ? config.build.devtool : false,
|
||||
output: {
|
||||
path: config.build.assetsRoot,
|
||||
filename: utils.assetsPath('js/[name].[chunkhash].js'),
|
||||
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
|
||||
},
|
||||
plugins: [
|
||||
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': env
|
||||
}),
|
||||
new UglifyJsPlugin({
|
||||
uglifyOptions: {
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
},
|
||||
sourceMap: config.build.productionSourceMap,
|
||||
parallel: true
|
||||
}),
|
||||
// extract css into its own file
|
||||
new ExtractTextPlugin({
|
||||
filename: utils.assetsPath('css/[name].[contenthash].css'),
|
||||
// Setting the following option to `false` will not extract CSS from codesplit chunks.
|
||||
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
|
||||
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
|
||||
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
|
||||
allChunks: true,
|
||||
}),
|
||||
// Compress extracted CSS. We are using this plugin so that possible
|
||||
// duplicated CSS from different components can be deduped.
|
||||
new OptimizeCSSPlugin({
|
||||
cssProcessorOptions: config.build.productionSourceMap
|
||||
? { safe: true, map: { inline: false } }
|
||||
: { safe: true }
|
||||
}),
|
||||
// generate dist index.html with correct asset hash for caching.
|
||||
// you can customize output by editing /index.html
|
||||
// see https://github.com/ampedandwired/html-webpack-plugin
|
||||
new HtmlWebpackPlugin({
|
||||
filename: config.build.index,
|
||||
template: 'index.html',
|
||||
inject: true,
|
||||
minify: {
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
removeAttributeQuotes: true
|
||||
// more options:
|
||||
// https://github.com/kangax/html-minifier#options-quick-reference
|
||||
},
|
||||
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
|
||||
chunksSortMode: 'dependency'
|
||||
}),
|
||||
// keep module.id stable when vendor modules does not change
|
||||
new webpack.HashedModuleIdsPlugin(),
|
||||
// enable scope hoisting
|
||||
new webpack.optimize.ModuleConcatenationPlugin(),
|
||||
// split vendor js into its own file
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'vendor',
|
||||
minChunks (module) {
|
||||
// any required modules inside node_modules are extracted to vendor
|
||||
return (
|
||||
module.resource &&
|
||||
/\.js$/.test(module.resource) &&
|
||||
module.resource.indexOf(
|
||||
path.join(__dirname, '../node_modules')
|
||||
) === 0
|
||||
)
|
||||
}
|
||||
}),
|
||||
// extract webpack runtime and module manifest to its own file in order to
|
||||
// prevent vendor hash from being updated whenever app bundle is updated
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'manifest',
|
||||
minChunks: Infinity
|
||||
}),
|
||||
// This instance extracts shared chunks from code splitted chunks and bundles them
|
||||
// in a separate chunk, similar to the vendor chunk
|
||||
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'app',
|
||||
async: 'vendor-async',
|
||||
children: true,
|
||||
minChunks: 3
|
||||
}),
|
||||
|
||||
// copy custom static assets
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
from: path.resolve(__dirname, '../static'),
|
||||
to: config.build.assetsSubDirectory,
|
||||
ignore: ['.*']
|
||||
}
|
||||
])
|
||||
]
|
||||
})
|
||||
|
||||
if (config.build.productionGzip) {
|
||||
const CompressionWebpackPlugin = require('compression-webpack-plugin')
|
||||
|
||||
webpackConfig.plugins.push(
|
||||
new CompressionWebpackPlugin({
|
||||
asset: '[path].gz[query]',
|
||||
algorithm: 'gzip',
|
||||
test: new RegExp(
|
||||
'\\.(' +
|
||||
config.build.productionGzipExtensions.join('|') +
|
||||
')$'
|
||||
),
|
||||
threshold: 10240,
|
||||
minRatio: 0.8
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
if (config.build.bundleAnalyzerReport) {
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
|
||||
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
|
||||
}
|
||||
|
||||
module.exports = webpackConfig
|
||||
@ -0,0 +1,7 @@
|
||||
'use strict'
|
||||
const merge = require('webpack-merge')
|
||||
const prodEnv = require('./prod.env')
|
||||
|
||||
module.exports = merge(prodEnv, {
|
||||
NODE_ENV: '"development"'
|
||||
})
|
||||
@ -0,0 +1,76 @@
|
||||
'use strict'
|
||||
// Template version: 1.3.1
|
||||
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||
|
||||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
dev: {
|
||||
|
||||
// Paths
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
proxyTable: {},
|
||||
|
||||
// Various Dev Server settings
|
||||
host: 'localhost', // can be overwritten by process.env.HOST
|
||||
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
||||
autoOpenBrowser: false,
|
||||
errorOverlay: true,
|
||||
notifyOnErrors: true,
|
||||
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
|
||||
|
||||
// Use Eslint Loader?
|
||||
// If true, your code will be linted during bundling and
|
||||
// linting errors and warnings will be shown in the console.
|
||||
useEslint: true,
|
||||
// If true, eslint errors and warnings will also be shown in the error overlay
|
||||
// in the browser.
|
||||
showEslintErrorsInOverlay: false,
|
||||
|
||||
/**
|
||||
* Source Maps
|
||||
*/
|
||||
|
||||
// https://webpack.js.org/configuration/devtool/#development
|
||||
devtool: 'cheap-module-eval-source-map',
|
||||
|
||||
// If you have problems debugging vue-files in devtools,
|
||||
// set this to false - it *may* help
|
||||
// https://vue-loader.vuejs.org/en/options.html#cachebusting
|
||||
cacheBusting: true,
|
||||
|
||||
cssSourceMap: true
|
||||
},
|
||||
|
||||
build: {
|
||||
// Template for index.html
|
||||
index: path.resolve(__dirname, '../dist/index.html'),
|
||||
|
||||
// Paths
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: './',
|
||||
|
||||
/**
|
||||
* Source Maps
|
||||
*/
|
||||
|
||||
productionSourceMap: true,
|
||||
// https://webpack.js.org/configuration/devtool/#production
|
||||
devtool: '#source-map',
|
||||
|
||||
// Gzip off by default as many popular static hosts such as
|
||||
// Surge or Netlify already gzip all static assets for you.
|
||||
// Before setting to `true`, make sure to:
|
||||
// npm install --save-dev compression-webpack-plugin
|
||||
productionGzip: false,
|
||||
productionGzipExtensions: ['js', 'css'],
|
||||
|
||||
// Run the build command with an extra argument to
|
||||
// View the bundle analyzer report after build finishes:
|
||||
// `npm run build --report`
|
||||
// Set to `true` or `false` to always turn it on or off
|
||||
bundleAnalyzerReport: process.env.npm_config_report
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
'use strict'
|
||||
module.exports = {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
|
||||
<title>Welcome to minChat</title>
|
||||
<link rel="stylesheet" href="static/css/face.css">
|
||||
<script src="static/js/face.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,78 @@
|
||||
{
|
||||
"name": "vue-min-chat",
|
||||
"version": "1.0.0",
|
||||
"description": "一个vue.js + Element UI + node.js + socket.io + mysql在线聊天室项目",
|
||||
"author": "weilin-liao@qq.com",
|
||||
"license": "MIT",
|
||||
"private": false,
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||
"start": "npm run dev",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-ui": "^2.13.0",
|
||||
"vue": "^2.5.2",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-socket.io": "^3.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-eslint": "^8.2.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.3",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-runtime": "^6.22.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.5.0",
|
||||
"babel-preset-env": "^1.3.2",
|
||||
"babel-preset-stage-2": "^6.22.0",
|
||||
"chalk": "^2.0.1",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"css-loader": "^0.28.0",
|
||||
"eslint": "^4.15.0",
|
||||
"eslint-config-standard": "^10.2.1",
|
||||
"eslint-friendly-formatter": "^3.0.0",
|
||||
"eslint-loader": "^1.7.1",
|
||||
"eslint-plugin-import": "^2.7.0",
|
||||
"eslint-plugin-node": "^5.2.0",
|
||||
"eslint-plugin-promise": "^3.4.0",
|
||||
"eslint-plugin-standard": "^3.0.1",
|
||||
"eslint-plugin-vue": "^4.0.0",
|
||||
"extract-text-webpack-plugin": "^3.0.0",
|
||||
"file-loader": "^1.1.4",
|
||||
"friendly-errors-webpack-plugin": "^1.6.1",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"node-notifier": "^5.1.2",
|
||||
"node-sass": "^4.14.1",
|
||||
"optimize-css-assets-webpack-plugin": "^3.2.0",
|
||||
"ora": "^1.2.0",
|
||||
"portfinder": "^1.0.13",
|
||||
"postcss-import": "^11.0.0",
|
||||
"postcss-loader": "^2.0.8",
|
||||
"postcss-url": "^7.2.1",
|
||||
"rimraf": "^2.6.0",
|
||||
"sass-loader": "^7.3.1",
|
||||
"semver": "^5.3.0",
|
||||
"shelljs": "^0.7.6",
|
||||
"uglifyjs-webpack-plugin": "^1.1.1",
|
||||
"url-loader": "^0.5.8",
|
||||
"vue-loader": "^13.3.0",
|
||||
"vue-style-loader": "^3.0.1",
|
||||
"vue-template-compiler": "^2.5.2",
|
||||
"webpack": "^3.6.0",
|
||||
"webpack-bundle-analyzer": "^2.9.0",
|
||||
"webpack-dev-server": "^2.9.1",
|
||||
"webpack-merge": "^4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
[dingtalk-robot-sender](https://www.npmjs.com/package/dingtalk-robot-sender)
|
||||
@ -0,0 +1,13 @@
|
||||
module.exports = {
|
||||
Mysql: {
|
||||
host: '127.0.0.1',
|
||||
user: 'root',
|
||||
password: 'root',
|
||||
database: 'minChat'
|
||||
},
|
||||
Robot: {
|
||||
baseUrl: 'https://oapi.dingtalk.com/robot/send',
|
||||
accessToken: 'xxxxxxxxxx',
|
||||
secret: 'xxxxxxxxx'
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "vue-min-chat",
|
||||
"version": "1.0.0",
|
||||
"description": "a vue.js minChat project!",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "supervisor index.js",
|
||||
"serve": "node index.js",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "weilin-liao@qq.com",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"dingtalk-robot-sender": "^1.2.0",
|
||||
"express": "^4.17.1",
|
||||
"mongodb": "^3.5.2",
|
||||
"mysql": "^2.18.1",
|
||||
"socket.io": "^2.3.0"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
var mysql = require('mysql')
|
||||
var Config = require('./config.js')
|
||||
|
||||
const Tools = {
|
||||
/**
|
||||
* 获取当前时间
|
||||
*/
|
||||
dateTime() {
|
||||
return new Date().getTime()
|
||||
},
|
||||
/**
|
||||
* 获取在线人数
|
||||
*/
|
||||
getLineCount(concats) {
|
||||
return concats.body.length - 2
|
||||
},
|
||||
/**
|
||||
* mysql
|
||||
*/
|
||||
database(sql, values, fn) {
|
||||
const db = mysql.createConnection(Config.Mysql)
|
||||
|
||||
db.connect(err => {
|
||||
if (err) throw err
|
||||
})
|
||||
|
||||
if (values) {
|
||||
// 插入数据
|
||||
db.query(sql, values, function (err, result) {
|
||||
if (err) {
|
||||
console.log('插入数据库出错：', err)
|
||||
} else {
|
||||
fn(result)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 查询数据
|
||||
db.query(sql, function (err, result) {
|
||||
if (err) {
|
||||
console.log('查询数据库出错：', err)
|
||||
} else {
|
||||
fn(result)
|
||||
}
|
||||
})
|
||||
}
|
||||
db.end()
|
||||
}
|
||||
}
|
||||
|
||||
exports = module.exports = Tools
|
||||
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
ul,ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.el-notification__content {
|
||||
margin-top: 20px;
|
||||
p {
|
||||
display: flex;
|
||||
}
|
||||
.notify-image {
|
||||
margin-right: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.notify-content {
|
||||
.notify-title {
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
padding-right: 4px;
|
||||
background-color:#f8f8f8;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: #c6c6c6;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:window-inactive {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,34 @@
|
||||
{
|
||||
"avatars": [
|
||||
"./static/avatar/avatar_01.jpg",
|
||||
"./static/avatar/avatar_02.jpg",
|
||||
"./static/avatar/avatar_03.jpg",
|
||||
"./static/avatar/avatar_04.jpg",
|
||||
"./static/avatar/avatar_05.jpg",
|
||||
"./static/avatar/avatar_06.jpg",
|
||||
"./static/avatar/avatar_07.jpg",
|
||||
"./static/avatar/avatar_08.jpg",
|
||||
"./static/avatar/avatar_09.jpg",
|
||||
"./static/avatar/avatar_10.jpg",
|
||||
"./static/avatar/avatar_11.jpg",
|
||||
"./static/avatar/avatar_12.jpg",
|
||||
"./static/avatar/avatar_13.jpg",
|
||||
"./static/avatar/avatar_14.jpg",
|
||||
"./static/avatar/avatar_15.jpg",
|
||||
"./static/avatar/avatar_16.jpg",
|
||||
"./static/avatar/avatar_17.jpg",
|
||||
"./static/avatar/avatar_18.jpg",
|
||||
"./static/avatar/avatar_19.jpg",
|
||||
"./static/avatar/avatar_20.jpg",
|
||||
"./static/avatar/avatar_21.jpg",
|
||||
"./static/avatar/avatar_22.jpg",
|
||||
"./static/avatar/avatar_23.jpg",
|
||||
"./static/avatar/avatar_24.jpg",
|
||||
"./static/avatar/avatar_25.jpg",
|
||||
"./static/avatar/avatar_26.jpg",
|
||||
"./static/avatar/avatar_27.jpg",
|
||||
"./static/avatar/avatar_28.jpg",
|
||||
"./static/avatar/avatar_29.jpg",
|
||||
"./static/avatar/avatar_30.jpg"
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
export default new Vue()
|
||||
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* 返回底部
|
||||
*/
|
||||
function gotoBottom () {
|
||||
const box = document.getElementsByClassName('message-pabel-box')[0]
|
||||
|
||||
this.$nextTick(() => {
|
||||
box.scrollTop = box.scrollHeight
|
||||
})
|
||||
}
|
||||
// 关闭窗口
|
||||
function close () {
|
||||
window.location.href = ''
|
||||
}
|
||||
|
||||
export {
|
||||
gotoBottom,
|
||||
close
|
||||
}
|
||||
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<ul class="message-item">
|
||||
<li
|
||||
v-for="(item, index) in concats"
|
||||
:key="index"
|
||||
@click="switchGroup(index, item.id)"
|
||||
:class="['message-list', {'message-active': item.active}]">
|
||||
|
||||
<div class="message-left">
|
||||
<el-badge
|
||||
class="item"
|
||||
:max="99"
|
||||
:value="item.message.newMessageCount"
|
||||
:hidden="item.message.isNewMessage ? !item.message.isNewMessage : true">
|
||||
<img class="message-avatar" :src="item.avatar">
|
||||
</el-badge>
|
||||
</div>
|
||||
|
||||
<div class="message-right">
|
||||
<div class="message-header">
|
||||
<div class="message-title">{{item.nickName}}</div>
|
||||
<div class="message-time">{{item.message.time | formatTime}}</div>
|
||||
</div>
|
||||
<div class="message-content" v-html="item.message.content"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { gotoBottom } from '@/assets/tools'
|
||||
|
||||
export default {
|
||||
name: 'Message',
|
||||
props: {
|
||||
concats: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
gotoBottom: gotoBottom
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 切换联系对象
|
||||
*/
|
||||
switchGroup (index, id) {
|
||||
let concats = this.concats
|
||||
// 隐藏所有
|
||||
concats.map(item => {
|
||||
item.active = false
|
||||
})
|
||||
this.gotoBottom()
|
||||
// 显示当前点击的
|
||||
concats[index].active = true
|
||||
this.$forceUpdate()
|
||||
// 传递给父级
|
||||
this.$emit('switchGroup', index, id)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* time:mins
|
||||
*/
|
||||
filters: {
|
||||
formatTime (time) {
|
||||
let date = new Date(time)
|
||||
let hours = date.getHours()
|
||||
let minutes = date.getMinutes()
|
||||
if (hours < 10) {
|
||||
hours = `0${hours}`
|
||||
}
|
||||
if (minutes < 10) {
|
||||
minutes = `0${minutes}`
|
||||
}
|
||||
return `${hours}:${minutes}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-active {
|
||||
background: rgba(255, 255, 255, .4);
|
||||
}
|
||||
.message-item {
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.message-list {
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
width: 100%;
|
||||
height: 62px;
|
||||
font-size: 12px;
|
||||
box-sizing: border-box;
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, .4);
|
||||
}
|
||||
.message-left {
|
||||
margin-right: 10px;
|
||||
font-size: 0;
|
||||
.message-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.message-group {
|
||||
border: 1px solid #dedede;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.message-right {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.message-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.message-title {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
.message-time {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
.message-content {
|
||||
margin-top: 4px;
|
||||
color: #999999;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="message-input-box">
|
||||
<div class="input-tools">
|
||||
<i slot="reference" class="el-icon-s-opportunity" title="表情"></i>
|
||||
</div>
|
||||
|
||||
<el-input
|
||||
type="textarea"
|
||||
resize="none"
|
||||
:autosize="{ minRows: 3, maxRows: 3}"
|
||||
v-model="textArea"
|
||||
v-on:keyup.native="keyUp">
|
||||
</el-input>
|
||||
|
||||
<div class="footer-tools">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="sendMessage"
|
||||
class="send-button">
|
||||
发送/Send
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Bus from '@/assets/eventBus'
|
||||
import { gotoBottom } from '@/assets/tools'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
textArea: '',
|
||||
gotoBottom: gotoBottom
|
||||
}
|
||||
},
|
||||
props: {
|
||||
// 联系人列表
|
||||
concats: {
|
||||
type: Array
|
||||
},
|
||||
// 当前选择的ID
|
||||
nowSwitchId: {
|
||||
type: String
|
||||
},
|
||||
// 当前用户
|
||||
localInfo: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 表情
|
||||
this.obj = new window.Face({
|
||||
el: document.querySelector('.el-icon-s-opportunity'),
|
||||
callBack: face => {
|
||||
this.textArea += `〖${face.title}〗`
|
||||
document.querySelector('.face-warp').style.display = 'none'
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 消息类型
|
||||
*/
|
||||
nowSwitchType () {
|
||||
if (this.nowSwitchId === 'group') {
|
||||
return 'group-message'
|
||||
} else if (this.nowSwitchId === 'robots') {
|
||||
return 'robots-message'
|
||||
} else {
|
||||
return 'user-message'
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 消息过滤
|
||||
*/
|
||||
textAreaTran () {
|
||||
return this.textArea.replace(/\n/g, '').replace(new RegExp('<', 'gm'), '<')
|
||||
},
|
||||
|
||||
/**
|
||||
* 检测空白
|
||||
*/
|
||||
blankTesting () {
|
||||
if (this.textArea.replace(/\s+/g, '') === '') {
|
||||
this.$alert('不能发送空白消息', '提示', {
|
||||
confirmButtonText: '确定'
|
||||
})
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
/**
|
||||
* 按Enter发送消息
|
||||
*/
|
||||
keyUp (event) {
|
||||
if (event.key === 'Enter') {
|
||||
this.sendMessage()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 发送消息
|
||||
*/
|
||||
sendMessage () {
|
||||
let message = {
|
||||
// 类型
|
||||
type: this.nowSwitchType(),
|
||||
// 发送者ID
|
||||
id: this.localInfo.id,
|
||||
body: {
|
||||
// 消息类型
|
||||
type: 'user-message',
|
||||
// 收者ID
|
||||
gotoId: this.nowSwitchId,
|
||||
// 发送者ID
|
||||
fromId: this.localInfo.id,
|
||||
// 发送者头像
|
||||
avatar: this.localInfo.avatar,
|
||||
// 发送者昵称
|
||||
nickName: this.localInfo.nickName,
|
||||
message: {
|
||||
// 发送时间
|
||||
time: +new Date(),
|
||||
// 内容带标签
|
||||
content: this.obj.replaceFace(this.textAreaTran()),
|
||||
// 纯内容不带标签
|
||||
textContent: this.textAreaTran()
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.blankTesting()) {
|
||||
// 发送服务器
|
||||
this.$socket.emit('MESSAGE', message)
|
||||
// 传递至同级
|
||||
Bus.$emit('MESSAGE', message)
|
||||
// 消息清空
|
||||
this.textArea = ''
|
||||
// 消息置底
|
||||
this.gotoBottom()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.message-input-box {
|
||||
height: 150px;
|
||||
background-color: rgba(255, 255, 255, .85);
|
||||
border-top: 1px solid #dddddd;
|
||||
.input-tools {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
.upload-demo {
|
||||
display: inline;
|
||||
}
|
||||
i {
|
||||
margin-left: 10px;
|
||||
color: rgb(94, 94, 94);
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.el-textarea {
|
||||
.el-textarea__inner {
|
||||
padding: 5px 20px;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.footer-tools {
|
||||
text-align: right;
|
||||
.send-button {
|
||||
padding: 7px 10px;
|
||||
margin-right: 20px;
|
||||
background: #377ec8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.face-pabel {
|
||||
.face {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<div class="message-pabel-box">
|
||||
|
||||
<el-button
|
||||
class="eye-more"
|
||||
@click="eyeMore"
|
||||
v-if="nowSwitchId == 'group' && isShowMore"
|
||||
type="text">加载更多消息</el-button>
|
||||
|
||||
<ul class="message-styles-box">
|
||||
<li
|
||||
v-for="(item, index) in messageTemplate()"
|
||||
:key="index"
|
||||
:class="judgeClass(item.type)">
|
||||
|
||||
<img class="message-avatar"
|
||||
:src="item.avatar ? item.avatar : './static/avatar/avatar_14.jpg'"
|
||||
:alt="item.nickName ? item.nickName : 'Hello'">
|
||||
|
||||
<p class="message-nickname" v-if="item.type == 'server'">{{item.nickName}} {{formatTime(item.message.time)}}</p>
|
||||
<p class="message-nickname" v-else>{{formatTime(item.message.time)}} {{item.nickName}}</p>
|
||||
<p class="message-classic" v-html="item.message.content"></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Bus from '@/assets/eventBus'
|
||||
import { gotoBottom } from '@/assets/tools'
|
||||
|
||||
export default {
|
||||
name: 'MessagePabel',
|
||||
props: {
|
||||
// 选择的联系人ID
|
||||
nowSwitchId: {
|
||||
type: String
|
||||
},
|
||||
// 当前用户
|
||||
localInfo: {
|
||||
type: Object
|
||||
},
|
||||
concats: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
message: {},
|
||||
page: 0,
|
||||
isShowMore: true,
|
||||
gotoBottom: gotoBottom
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
/**
|
||||
* 接收消息
|
||||
*/
|
||||
this.sockets.subscribe('MESSAGE', message => {
|
||||
let id = message.id
|
||||
let gotoId = message.body.gotoId
|
||||
let fromId = message.body.fromId
|
||||
let content = message.body.message.content
|
||||
|
||||
message.body.message.content = content.replace(/[{]/g, '<').replace(/[}]/g, '>')
|
||||
|
||||
this.initMessageArray(gotoId, fromId)
|
||||
|
||||
// 用户在群聊发消息
|
||||
if (gotoId === 'group' && fromId === this.localInfo.id) {
|
||||
message.body.type = 'user-message'
|
||||
}
|
||||
|
||||
if (gotoId === 'group') {
|
||||
this.message['group'].push(message.body)
|
||||
} else {
|
||||
this.message[id].push(message.body)
|
||||
}
|
||||
this.$forceUpdate()
|
||||
this.gotoBottom()
|
||||
// 把消息传给父级
|
||||
this.$emit('message', message)
|
||||
})
|
||||
|
||||
/**
|
||||
* 当前用户发的消息
|
||||
*/
|
||||
Bus.$on('MESSAGE', response => {
|
||||
let body = response.body
|
||||
let gotoId = body.gotoId
|
||||
let fromId = body.fromId
|
||||
|
||||
this.initMessageArray(gotoId, fromId)
|
||||
|
||||
// 自己给自己发消息
|
||||
if (gotoId === fromId) {
|
||||
this.message[fromId].push(body)
|
||||
} else if (response.type === 'robots-message' || response.type === 'user-message') {
|
||||
this.message[gotoId].push(body)
|
||||
}
|
||||
this.$forceUpdate()
|
||||
// 把消息传给父级
|
||||
this.$emit('message', response)
|
||||
})
|
||||
|
||||
/**
|
||||
* 接收更多消息
|
||||
*/
|
||||
this.sockets.subscribe('GROUP_MESSAGE', result => {
|
||||
const box = document.getElementsByClassName('message-pabel-box')[0]
|
||||
const scroll = box.scrollHeight - box.scrollTop
|
||||
|
||||
// 是否有更多数据
|
||||
if (result.length) {
|
||||
result.map((item, index) => {
|
||||
this.message['group'].unshift(JSON.parse(item.body))
|
||||
})
|
||||
} else {
|
||||
this.isShowMore = false
|
||||
}
|
||||
|
||||
if (result.length < 9) this.isShowMore = false
|
||||
|
||||
setTimeout(() => {
|
||||
box.scrollTop = box.scrollHeight - scroll
|
||||
}, 0)
|
||||
|
||||
this.$forceUpdate()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 数组初始化
|
||||
*/
|
||||
initMessageArray (gotoId, fromId) {
|
||||
let array = this.message
|
||||
|
||||
if (!gotoId) return
|
||||
if (!array[gotoId]) {
|
||||
this.message[gotoId] = []
|
||||
}
|
||||
|
||||
if (!fromId) return
|
||||
if (!array[fromId]) {
|
||||
this.message[fromId] = []
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断Class
|
||||
*/
|
||||
judgeClass (type) {
|
||||
if (type === 'server') {
|
||||
return 'message-layout-left'
|
||||
} else {
|
||||
return 'message-layout-right'
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回聊天记录集合
|
||||
*/
|
||||
messageTemplate () {
|
||||
return this.message[this.nowSwitchId]
|
||||
},
|
||||
|
||||
/**
|
||||
* 查看更多
|
||||
*/
|
||||
eyeMore () {
|
||||
let obj = {
|
||||
id: this.localInfo.id,
|
||||
page: this.page += 1
|
||||
}
|
||||
this.initMessageArray('group')
|
||||
if (this.message['group'] !== undefined && this.page === 1) {
|
||||
obj.length = this.message['group'].length
|
||||
}
|
||||
// 发送查询消息
|
||||
this.$socket.emit('QUERY_PAGE', obj)
|
||||
},
|
||||
/**
|
||||
* 获取年月日
|
||||
*/
|
||||
formatFullYearMonthDay (date, isShowHourMinute, type) {
|
||||
date = new Date(date)
|
||||
const fullYear = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const dayDate = date.getDate()
|
||||
var hours = date.getHours()
|
||||
var minutes = date.getMinutes()
|
||||
|
||||
if (isShowHourMinute) {
|
||||
return `${fullYear}${month}${dayDate}${hours}${minutes}`
|
||||
} else {
|
||||
if (type) {
|
||||
return `${fullYear}${type}${month}${type}${dayDate}`
|
||||
} else {
|
||||
return `${fullYear}${month}${dayDate}`
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 时间格式化
|
||||
*/
|
||||
formatTime (time) {
|
||||
var date = new Date(time)
|
||||
var nowDate = new Date()
|
||||
var hours = date.getHours()
|
||||
var minutes = date.getMinutes()
|
||||
|
||||
hours = hours < 10 ? `0${hours}` : hours
|
||||
minutes = minutes < 10 ? `0${minutes}` : minutes
|
||||
|
||||
if (this.formatFullYearMonthDay(date) === this.formatFullYearMonthDay(nowDate)) {
|
||||
return `${hours}:${minutes}`
|
||||
} else {
|
||||
return `${this.formatFullYearMonthDay(date, false, '/')} ${hours}:${minutes}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.message-pabel-box {
|
||||
padding: 0 20px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: rgba(255, 255, 255, .8);
|
||||
|
||||
.eye-more {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message-styles-box {
|
||||
margin-bottom: 20px;
|
||||
.message-layout-left,
|
||||
.message-layout-right {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
.message-classic::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-width: 8px;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
.message-layout-left {
|
||||
.message-avatar {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.message-classic {
|
||||
background-color: rgba(255, 255, 255, .8);
|
||||
&::before {
|
||||
left: -16px;
|
||||
border-color: transparent rgba(255, 255, 255, .8) transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-layout-right {
|
||||
text-align: right;
|
||||
.message-avatar {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.message-classic {
|
||||
text-align: left;
|
||||
color: #ffffff;
|
||||
background-color: rgba(55, 126, 200, .8);
|
||||
&::before {
|
||||
right: -16px;
|
||||
border-color: transparent transparent transparent rgba(55, 126, 200, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #eeeeee;
|
||||
}
|
||||
.message-nickname {
|
||||
color: #777777;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.message-classic {
|
||||
position: relative;
|
||||
max-width: 45%;
|
||||
margin-top: 5px;
|
||||
display: inline-block;
|
||||
padding: 9px 12px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
border-radius: 5px;
|
||||
white-space: pre-line;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,50 @@
|
||||
// The Vue build version to load with the `import` command
|
||||
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
import VueSocketIo from 'vue-socket.io'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Icon,
|
||||
Badge,
|
||||
Dialog,
|
||||
Aside,
|
||||
Main,
|
||||
Header,
|
||||
Container,
|
||||
Upload,
|
||||
MessageBox,
|
||||
Notification
|
||||
} from 'element-ui'
|
||||
|
||||
const wesocket = {
|
||||
debug: false,
|
||||
connection: 'http://localhost:4001'
|
||||
}
|
||||
|
||||
Vue.use(Icon)
|
||||
Vue.use(Input)
|
||||
Vue.use(Button)
|
||||
Vue.use(Dialog)
|
||||
Vue.use(Aside)
|
||||
Vue.use(Badge)
|
||||
Vue.use(Main)
|
||||
Vue.use(Header)
|
||||
Vue.use(Upload)
|
||||
Vue.use(Container)
|
||||
Vue.use(new VueSocketIo(wesocket))
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.prototype.$notify = Notification
|
||||
Vue.prototype.$alert = MessageBox.alert
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
components: { App },
|
||||
template: '<App/>'
|
||||
})
|
||||
@ -0,0 +1,21 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Index from '@/view/index'
|
||||
import Chat from '@/view/chat'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Index',
|
||||
component: Index
|
||||
},
|
||||
{
|
||||
path: '/chat',
|
||||
name: 'Chat',
|
||||
component: Chat
|
||||
}
|
||||
]
|
||||
})
|
||||
@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<el-container>
|
||||
<el-aside width="250px">
|
||||
<el-header height="40px">
|
||||
<i class="el-icon-user-solid icon-message"></i>
|
||||
<span class="title">联系人</span>
|
||||
</el-header>
|
||||
|
||||
<message-group
|
||||
:concats="concats"
|
||||
@switchGroup="switchGroup" />
|
||||
</el-aside>
|
||||
|
||||
<el-main>
|
||||
<el-header height="40px">
|
||||
<span class="title" v-if="concats[nowSwitch].id == 'group'">聊天室({{lineCount}})人</span>
|
||||
<span class="title" v-else>{{concats[nowSwitch].nickName}}</span>
|
||||
</el-header>
|
||||
|
||||
<message-pabel
|
||||
:concats="concats"
|
||||
:nowSwitchId="nowSwitchId"
|
||||
:localInfo="localInfo"
|
||||
@message="message" />
|
||||
|
||||
<message-input
|
||||
:concats="concats"
|
||||
:localInfo="localInfo"
|
||||
:nowSwitchId="nowSwitchId" />
|
||||
</el-main>
|
||||
<footer class="footer">
|
||||
</footer>
|
||||
<audio id="notify-audio" src="./static/wav/tim.wav"></audio>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MessageGroup from '@/components/message-group'
|
||||
import MessagePabel from '@/components/message-pabel'
|
||||
import MessageInput from '@/components/message-input'
|
||||
export default {
|
||||
name: 'Chat',
|
||||
data () {
|
||||
return {
|
||||
lineCount: 0,
|
||||
concats: [{
|
||||
id: 0,
|
||||
active: false,
|
||||
nickName: '聊天室',
|
||||
avatar: './static/avatar/group.png',
|
||||
message: {
|
||||
time: 1580572800000,
|
||||
content: 'Welcome'
|
||||
}
|
||||
}],
|
||||
nowSwitch: 0,
|
||||
nowSwitchId: 'group',
|
||||
localInfo: {}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const params = this.$route.params
|
||||
|
||||
/**
|
||||
* 判断是否通过路由跳转过来的
|
||||
*/
|
||||
if (params.id) {
|
||||
// 保存当前用户信息
|
||||
this.localInfo = {
|
||||
id: params.id,
|
||||
avatar: params.avatar,
|
||||
nickName: params.nickName
|
||||
}
|
||||
} else {
|
||||
this.goBack()
|
||||
}
|
||||
|
||||
// 历史返回重新登陆
|
||||
if (window.history && window.history.pushState) {
|
||||
history.pushState(null, null, document.URL)
|
||||
window.addEventListener('popstate', this.goBack, false)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取联系人信息
|
||||
*/
|
||||
this.sockets.subscribe('conCats', res => {
|
||||
let body = res.body
|
||||
|
||||
// 默认选中第一个
|
||||
body.map(item => {
|
||||
item.active = false
|
||||
})
|
||||
body[0].active = true
|
||||
this.concats = body
|
||||
this.nowSwitchId = 'group'
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取在线人数及通知
|
||||
*/
|
||||
this.sockets.subscribe('onLine', res => {
|
||||
let code = res.code
|
||||
let body = res.body
|
||||
let notify = code === 2 ? '欢迎:)' : ':)'
|
||||
this.$notify({
|
||||
title: '通知',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: `
|
||||
<img class="notify-image" src="${body.avatar}">
|
||||
<div class="notify-content">
|
||||
<strong class="notify-title">${notify}</strong>
|
||||
<span><strong> ${body.notify} </strong</span>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
// 删除通知
|
||||
delete body.notify
|
||||
// 在线人数
|
||||
this.lineCount = res.lineCount
|
||||
// 添加联系人
|
||||
if (code === 2) {
|
||||
this.concats.push(body)
|
||||
} else {
|
||||
// 如果当前选择的人离开了就选中聊天室
|
||||
if (body.id === this.nowSwitchId) {
|
||||
this.concats[0].active = true
|
||||
this.nowSwitch = 0
|
||||
this.nowSwitchId = 'group'
|
||||
this.concats[0].message.newMessageCount = 0
|
||||
this.concats[0].message.isNewMessage = false
|
||||
}
|
||||
// 删除联系人
|
||||
for (let i = 0; i < this.concats.length; i++) {
|
||||
if (body.id === this.concats[i].id) {
|
||||
this.concats.splice(i, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 切换聊天对象
|
||||
*/
|
||||
switchGroup (index, id) {
|
||||
this.nowSwitchId = id
|
||||
this.nowSwitch = index
|
||||
|
||||
// 隐藏小红点
|
||||
if (this.concats[index].message.isNewMessage !== undefined) {
|
||||
this.concats[index].message.isNewMessage = false
|
||||
this.concats[index].message.newMessageCount = 0
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 接收消息
|
||||
*/
|
||||
message (respone) {
|
||||
let type = respone.type
|
||||
let body = respone.body
|
||||
let concats = this.concats
|
||||
let length = concats.length
|
||||
let id = body.gotoId
|
||||
let notifyAudio = document.getElementById('notify-audio')
|
||||
|
||||
// 服务器返回的消息
|
||||
if (type === 'server-message') {
|
||||
if (respone.id === 'robots') {
|
||||
id = 'robots'
|
||||
}
|
||||
}
|
||||
|
||||
// 更新小红点
|
||||
if (this.nowSwitchId !== id) {
|
||||
body.message.isNewMessage = true
|
||||
body.message.newMessageCount = (() => {
|
||||
for (var i = 0; i < length; i++) {
|
||||
if (id === this.concats[i].id) {
|
||||
notifyAudio.play()
|
||||
if (this.concats[i].message.newMessageCount !== undefined) {
|
||||
let count = this.concats[i].message.newMessageCount += 1
|
||||
return count
|
||||
} else {
|
||||
return 1
|
||||
}
|
||||
}
|
||||
}
|
||||
})()
|
||||
}
|
||||
|
||||
// 更新联系人消息
|
||||
for (let i = 0; i < length; i++) {
|
||||
if (concats[i].id === id) {
|
||||
Object.assign(this.concats[i].message, body.message)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭
|
||||
*/
|
||||
goBack () {
|
||||
let href = window.location.href
|
||||
window.location.href = href.split('#')[0]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MessageGroup,
|
||||
MessagePabel,
|
||||
MessageInput
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
height: 100vh;
|
||||
background-image: url('../assets/img/10.jpg');
|
||||
background-image: url('http://api.btstu.cn/sjbz/zsy.php');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
.el-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 88%;
|
||||
margin: 30px auto;
|
||||
.el-aside,
|
||||
.el-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.el-aside {
|
||||
background: rgba(235, 233, 232, .8);
|
||||
}
|
||||
.el-main {
|
||||
padding: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.el-header {
|
||||
position: relative;
|
||||
line-height: 40px;
|
||||
background: rgb(55, 126, 200);
|
||||
overflow: hidden;
|
||||
.title,
|
||||
.icon-message {
|
||||
color: #ffffff;
|
||||
}
|
||||
.icon-message {
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.title {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: -23px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
font-size: 13px;
|
||||
width: 150px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
a {
|
||||
color: #ffffff;
|
||||
&:hover {
|
||||
color: #377ec8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="Setting chat info"
|
||||
:visible.sync="dialogVisible"
|
||||
:before-close="closeWindow">
|
||||
|
||||
<div class="avatar-box">
|
||||
<el-input
|
||||
placeholder="Your nickName"
|
||||
v-model="nickName"
|
||||
maxlength="8">
|
||||
</el-input>
|
||||
<img :src="avatar || './static/avatar/avatar_01.jpg'" @click="nextAvatar">
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="login">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { avatars } from '@/assets/data'
|
||||
import { close } from '@/assets/tools'
|
||||
export default {
|
||||
name: 'Index',
|
||||
data () {
|
||||
return {
|
||||
avatar: null,
|
||||
nickName: '',
|
||||
random: 0,
|
||||
dialogVisible: true,
|
||||
closeWindow: close
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.hashAvatar()
|
||||
},
|
||||
methods: {
|
||||
// 随机头像
|
||||
hashAvatar () {
|
||||
let length = avatars.length
|
||||
let random = Math.floor(Math.random() * length)
|
||||
this.random = random
|
||||
this.avatar = avatars[random]
|
||||
},
|
||||
// 下一张头像
|
||||
nextAvatar () {
|
||||
if (this.random === avatars.length) {
|
||||
this.random = 0
|
||||
}
|
||||
this.avatar = avatars[this.random += 1]
|
||||
},
|
||||
login () {
|
||||
let nickName = this.nickName
|
||||
let avatar = avatars[this.random]
|
||||
|
||||
// 未输入名称时随机生成一个
|
||||
if (nickName.replace(/\s+/g, '') === '' || nickName === 'null') {
|
||||
this.nickName = nickName = `路人甲${Math.floor(Math.random() * 123 + Math.random() * 234)}`
|
||||
}
|
||||
// 防止某些表弟手动修改长度
|
||||
if (nickName.length > 8) {
|
||||
this.$alert('你想干嘛？小表弟？', '提示', {
|
||||
confirmButtonText: '确定'
|
||||
})
|
||||
return
|
||||
}
|
||||
// 发送登录消息
|
||||
this.$socket.emit('LOGIN', {
|
||||
type: 'onLine',
|
||||
body: {
|
||||
id: '',
|
||||
avatar: avatar,
|
||||
nickName: nickName,
|
||||
message: {
|
||||
content: '',
|
||||
time: +new Date()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 接收登录消息
|
||||
this.sockets.subscribe('LOGIN_SUCCESS', res => {
|
||||
let body = res.body
|
||||
if (!res.code) {
|
||||
this.$alert(res.msg, '提示', {
|
||||
confirmButtonText: '确定'
|
||||
})
|
||||
} else {
|
||||
// 跳转
|
||||
this.$router.push({
|
||||
name: 'Chat',
|
||||
params: {
|
||||
id: body.id,
|
||||
avatar: body.avatar,
|
||||
nickName: body.nickName
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
.el-dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 345px;
|
||||
height: 333px;
|
||||
margin: auto !important;
|
||||
.el-dialog__header {
|
||||
.el-dialog__headerbtn {
|
||||
top: 24px;
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
text-align: center;
|
||||
.el-input {
|
||||
.el-input__inner {
|
||||
padding: 0 12px;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
img {
|
||||
margin-top: 15px;
|
||||
cursor: pointer;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding-top: 0;
|
||||
.dialog-footer {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#app {
|
||||
.el-container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
.el-aside {
|
||||
width: 70px !important;
|
||||
border-radius: 0;
|
||||
.el-header {
|
||||
padding: 0 0;
|
||||
text-align: center;
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.message-item {
|
||||
.message-list {
|
||||
.message-right {
|
||||
display: none;
|
||||
}
|
||||
.message-left{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-main {
|
||||
margin-left: 0;
|
||||
border-radius: 0;
|
||||
.message-pabel-box {
|
||||
padding: 0 12px;
|
||||
}
|
||||
.message-styles-box {
|
||||
.message-classic {
|
||||
max-width: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-dialog {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
.face-warp {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
.el-message-box {
|
||||
width: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 85 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 14 KiB |
@ -0,0 +1,347 @@
|
||||
.face-warp{
|
||||
position: absolute;
|
||||
bottom: 73%;
|
||||
background-color: #fff;
|
||||
width: 338px;
|
||||
display: none;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0px 0 7px #ccc;
|
||||
padding: 10px;
|
||||
}
|
||||
.face-panel{
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.face-panel li{
|
||||
float: left;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
padding: 3px;
|
||||
}
|
||||
.face-panel li:hover{
|
||||
background-color: rgba(162,160,164,0.32);
|
||||
}
|
||||
.face-panel::after,.face-warp::after{
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
.face:after{
|
||||
display: inline-block;
|
||||
vertical-align: sub;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
padding: 10px;
|
||||
background: url(../images/face.png) no-repeat;
|
||||
}
|
||||
.face.face0:after{
|
||||
background-position: -6px -6px;
|
||||
}
|
||||
.face.face1:after{
|
||||
background-position: -32px -6px;
|
||||
}
|
||||
.face.face2:after{
|
||||
background-position: -58px -6px;
|
||||
}
|
||||
.face.face3:after{
|
||||
background-position: -84px -6px;
|
||||
}
|
||||
.face.face4:after{
|
||||
background-position: -110px -6px;
|
||||
}
|
||||
.face.face5:after{
|
||||
background-position: -136px -6px;
|
||||
}
|
||||
.face.face6:after{
|
||||
background-position: -162px -6px;
|
||||
}
|
||||
.face.face7:after{
|
||||
background-position: -188px -6px;
|
||||
}
|
||||
.face.face8:after{
|
||||
background-position: -214px -6px;
|
||||
}
|
||||
.face.face9:after{
|
||||
background-position: -240px -6px;
|
||||
}
|
||||
.face.face10:after{
|
||||
background-position: -266px -6px;
|
||||
}
|
||||
.face.face11:after{
|
||||
background-position: -292px -6px;
|
||||
}
|
||||
.face.face12:after{
|
||||
background-position: -318px -6px;
|
||||
}
|
||||
.face.face13:after{
|
||||
background-position: -344px -6px;
|
||||
}
|
||||
.face.face14:after{
|
||||
background-position: -370px -6px;
|
||||
}
|
||||
/******************************************/
|
||||
.face.face15:after{
|
||||
background-position: -6px -32px;
|
||||
}
|
||||
.face.face16:after{
|
||||
background-position: -32px -32px;
|
||||
}
|
||||
.face.face17:after{
|
||||
background-position: -58px -32px;
|
||||
}
|
||||
.face.face18:after{
|
||||
background-position: -84px -32px;
|
||||
}
|
||||
.face.face19:after{
|
||||
background-position: -110px -32px;
|
||||
}
|
||||
.face.face20:after{
|
||||
background-position: -136px -32px;
|
||||
}
|
||||
.face.face21:after{
|
||||
background-position: -162px -32px;
|
||||
}
|
||||
.face.face22:after{
|
||||
background-position: -188px -32px;
|
||||
}
|
||||
.face.face23:after{
|
||||
background-position: -214px -32px;
|
||||
}
|
||||
.face.face24:after{
|
||||
background-position: -240px -32px;
|
||||
}
|
||||
.face.face25:after{
|
||||
background-position: -266px -32px;
|
||||
}
|
||||
.face.face26:after{
|
||||
background-position: -292px -32px;
|
||||
}
|
||||
.face.face27:after{
|
||||
background-position: -318px -32px;
|
||||
}
|
||||
.face.face28:after{
|
||||
background-position: -344px -32px;
|
||||
}
|
||||
.face.face29:after{
|
||||
background-position: -370px -32px;
|
||||
}
|
||||
/***********************************************************/
|
||||
/******************************************/
|
||||
.face.face30:after{
|
||||
background-position: -6px -58px;
|
||||
}
|
||||
.face.face31:after{
|
||||
background-position: -32px -58px;
|
||||
}
|
||||
.face.face32:after{
|
||||
background-position: -58px -58px;
|
||||
}
|
||||
.face.face33:after{
|
||||
background-position: -84px -58px;
|
||||
}
|
||||
.face.face34:after{
|
||||
background-position: -110px -58px;
|
||||
}
|
||||
.face.face35:after{
|
||||
background-position: -136px -58px;
|
||||
}
|
||||
.face.face36:after{
|
||||
background-position: -162px -58px;
|
||||
}
|
||||
.face.face37:after{
|
||||
background-position: -188px -58px;
|
||||
}
|
||||
.face.face38:after{
|
||||
background-position: -214px -58px;
|
||||
}
|
||||
.face.face39:after{
|
||||
background-position: -240px -58px;
|
||||
}
|
||||
.face.face40:after{
|
||||
background-position: -266px -58px;
|
||||
}
|
||||
.face.face41:after{
|
||||
background-position: -292px -58px;
|
||||
}
|
||||
.face.face42:after{
|
||||
background-position: -318px -58px;
|
||||
}
|
||||
.face.face43:after{
|
||||
background-position: -344px -58px;
|
||||
}
|
||||
.face.face44:after{
|
||||
background-position: -370px -58px;
|
||||
}
|
||||
/*******************************************/
|
||||
.face.face45:after{
|
||||
background-position: -6px -84px;
|
||||
}
|
||||
.face.face46:after{
|
||||
background-position: -32px -84px;
|
||||
}
|
||||
.face.face47:after{
|
||||
background-position: -58px -84px;
|
||||
}
|
||||
.face.face48:after{
|
||||
background-position: -84px -84px;
|
||||
}
|
||||
.face.face49:after{
|
||||
background-position: -110px -84px;
|
||||
}
|
||||
.face.face50:after{
|
||||
background-position: -136px -84px;
|
||||
}
|
||||
.face.face51:after{
|
||||
background-position: -162px -84px;
|
||||
}
|
||||
.face.face52:after{
|
||||
background-position: -188px -84px;
|
||||
}
|
||||
.face.face53:after{
|
||||
background-position: -214px -84px;
|
||||
}
|
||||
.face.face54:after{
|
||||
background-position: -240px -84px;
|
||||
}
|
||||
.face.face55:after{
|
||||
background-position: -266px -84px;
|
||||
}
|
||||
.face.face56:after{
|
||||
background-position: -292px -84px;
|
||||
}
|
||||
.face.face57:after{
|
||||
background-position: -318px -84px;
|
||||
}
|
||||
.face.face58:after{
|
||||
background-position: -344px -84px;
|
||||
}
|
||||
.face.face59:after{
|
||||
background-position: -370px -84px;
|
||||
}
|
||||
/******************************************/
|
||||
.face.face60:after{
|
||||
background-position: -6px -110px;
|
||||
}
|
||||
.face.face61:after{
|
||||
background-position: -32px -110px;
|
||||
}
|
||||
.face.face62:after{
|
||||
background-position: -58px -110px;
|
||||
}
|
||||
.face.face63:after{
|
||||
background-position: -84px -110px;
|
||||
}
|
||||
.face.face64:after{
|
||||
background-position: -110px -110px;
|
||||
}
|
||||
.face.face65:after{
|
||||
background-position: -136px -110px;
|
||||
}
|
||||
.face.face66:after{
|
||||
background-position: -162px -110px;
|
||||
}
|
||||
.face.face67:after{
|
||||
background-position: -188px -110px;
|
||||
}
|
||||
.face.face68:after{
|
||||
background-position: -214px -110px;
|
||||
}
|
||||
.face.face69:after{
|
||||
background-position: -240px -110px;
|
||||
}
|
||||
.face.face70:after{
|
||||
background-position: -266px -110px;
|
||||
}
|
||||
.face.face71:after{
|
||||
background-position: -292px -110px;
|
||||
}
|
||||
.face.face72:after{
|
||||
background-position: -318px -110px;
|
||||
}
|
||||
.face.face73:after{
|
||||
background-position: -344px -110px;
|
||||
}
|
||||
.face.face74:after{
|
||||
background-position: -370px -110px;
|
||||
}
|
||||
/************************************/
|
||||
.face.face75:after{
|
||||
background-position: -6px -136px;
|
||||
}
|
||||
.face.face76:after{
|
||||
background-position: -32px -136px;
|
||||
}
|
||||
.face.face77:after{
|
||||
background-position: -58px -136px;
|
||||
}
|
||||
.face.face78:after{
|
||||
background-position: -84px -136px;
|
||||
}
|
||||
.face.face79:after{
|
||||
background-position: -110px -136px;
|
||||
}
|
||||
.face.face80:after{
|
||||
background-position: -136px -136px;
|
||||
}
|
||||
.face.face81:after{
|
||||
background-position: -162px -136px;
|
||||
}
|
||||
.face.face82:after{
|
||||
background-position: -188px -136px;
|
||||
}
|
||||
.face.face83:after{
|
||||
background-position: -214px -136px;
|
||||
}
|
||||
.face.face84:after{
|
||||
background-position: -240px -136px;
|
||||
}
|
||||
.face.face85:after{
|
||||
background-position: -266px -136px;
|
||||
}
|
||||
.face.face86:after{
|
||||
background-position: -292px -136px;
|
||||
}
|
||||
.face.face87:after{
|
||||
background-position: -318px -136px;
|
||||
}
|
||||
.face.face88:after{
|
||||
background-position: -344px -136px;
|
||||
}
|
||||
.face.face89:after{
|
||||
background-position: -370px -136px;
|
||||
}
|
||||
/**************************************/
|
||||
.face.face90:after{
|
||||
background-position: -6px -162px;
|
||||
}
|
||||
.face.face91:after{
|
||||
background-position: -32px -162px;
|
||||
}
|
||||
.face.face92:after{
|
||||
background-position: -58px -162px;
|
||||
}
|
||||
.face.face93:after{
|
||||
background-position: -84px -162px;
|
||||
}
|
||||
.face.face94:after{
|
||||
background-position: -110px -162px;
|
||||
}
|
||||
.face.face95:after{
|
||||
background-position: -136px -162px;
|
||||
}
|
||||
.face.face96:after{
|
||||
background-position: -162px -162px;
|
||||
}
|
||||
.face.face97:after{
|
||||
background-position: -188px -162px;
|
||||
}
|
||||
.face.face98:after{
|
||||
background-position: -214px -162px;
|
||||
}
|
||||
.face.face99:after{
|
||||
background-position: -240px -162px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 144 KiB |
@ -0,0 +1,58 @@
|
||||
(function () {
|
||||
var faceJson=[{"faceID":"face0","title":"微笑"},{"faceID":"face1","title":"撇嘴"},{"faceID":"face2","title":"色"},{"faceID":"face3","title":"发呆"},{"faceID":"face4","title":"得意"},{"faceID":"face5","title":"流泪"},{"faceID":"face6","title":"害羞"},{"faceID":"face7","title":"闭嘴"},{"faceID":"face8","title":"睡"},{"faceID":"face9","title":"大哭"},{"faceID":"face10","title":"尴尬"},{"faceID":"face11","title":"发怒"},{"faceID":"face12","title":"调皮"},{"faceID":"face13","title":"呲牙"},{"faceID":"face14","title":"惊讶"},{"faceID":"face15","title":"难过"},{"faceID":"face16","title":"酷"},{"faceID":"face17","title":"冷汗"},{"faceID":"face18","title":"抓狂"},{"faceID":"face19","title":"吐"},{"faceID":"face20","title":"偷笑"},{"faceID":"face21","title":"可爱"},{"faceID":"face22","title":"白眼"},{"faceID":"face23","title":"傲慢"},{"faceID":"face24","title":"饥饿"},{"faceID":"face25","title":"困"},{"faceID":"face26","title":"惊恐"},{"faceID":"face27","title":"流汗"},{"faceID":"face28","title":"憨笑"},{"faceID":"face29","title":"装逼"},{"faceID":"face30","title":"奋斗"},{"faceID":"face31","title":"咒骂"},{"faceID":"face32","title":"疑问"},{"faceID":"face33","title":"嘘"},{"faceID":"face34","title":"晕"},{"faceID":"face35","title":"折磨"},{"faceID":"face36","title":"衰"},{"faceID":"face37","title":"骷髅"},{"faceID":"face38","title":"敲打"},{"faceID":"face39","title":"再见"},{"faceID":"face40","title":"擦汗"},{"faceID":"face41","title":"抠鼻"},{"faceID":"face42","title":"鼓掌"},{"faceID":"face43","title":"糗大了"},{"faceID":"face44","title":"坏笑"},{"faceID":"face45","title":"左哼哼"},{"faceID":"face46","title":"右哼哼"},{"faceID":"face47","title":"哈欠"},{"faceID":"face48","title":"鄙视"},{"faceID":"face49","title":"委屈"},{"faceID":"face50","title":"快哭了"},{"faceID":"face51","title":"阴险"},{"faceID":"face52","title":"亲亲"},{"faceID":"face53","title":"吓"},{"faceID":"face54","title":"可怜"},{"faceID":"face55","title":"菜刀"},{"faceID":"face56","title":"西瓜"},{"faceID":"face57","title":"啤酒"},{"faceID":"face58","title":"篮球"},{"faceID":"face59","title":"乒乓"},{"faceID":"face60","title":"咖啡"},{"faceID":"face61","title":"饭"},{"faceID":"face62","title":"猪头"},{"faceID":"face63","title":"玫瑰"},{"faceID":"face64","title":"凋谢"},{"faceID":"face65","title":"示爱"},{"faceID":"face66","title":"爱心"},{"faceID":"face67","title":"心碎"},{"faceID":"face68","title":"蛋糕"},{"faceID":"face69","title":"闪电"},{"faceID":"face70","title":"炸弹"},{"faceID":"face71","title":"刀"},{"faceID":"face72","title":"足球"},{"faceID":"face73","title":"瓢虫"},{"faceID":"face74","title":"便便"},{"faceID":"face75","title":"月亮"},{"faceID":"face76","title":"太阳"},{"faceID":"face77","title":"礼物"},{"faceID":"face78","title":"拥抱"},{"faceID":"face79","title":"赞"},{"faceID":"face80","title":"踩"},{"faceID":"face81","title":"握手"},{"faceID":"face82","title":"胜利"},{"faceID":"face83","title":"抱拳"},{"faceID":"face84","title":"勾引"},{"faceID":"face85","title":"拳头"},{"faceID":"face86","title":"差劲"},{"faceID":"face87","title":"爱你"},{"faceID":"face88","title":"NO"},{"faceID":"face89","title":"OK"},{"faceID":"face90","title":"爱情"},{"faceID":"face91","title":"飞吻"},{"faceID":"face92","title":"跳跳"},{"faceID":"face93","title":"发抖"},{"faceID":"face94","title":"怄火"},{"faceID":"face95","title":"转圈"},{"faceID":"face96","title":"磕头"},{"faceID":"face97","title":"回头"},{"faceID":"face98","title":"跳绳"},{"faceID":"face99","title":"挥手"}];
|
||||
window.Face=function(option) {
|
||||
var deafultOpt={
|
||||
el:document.querySelector("body"),
|
||||
callBack:function () {}
|
||||
}
|
||||
deafultOpt=option;
|
||||
this.opt=deafultOpt;
|
||||
this.init();
|
||||
}
|
||||
Face.prototype={
|
||||
Constructor: Face,
|
||||
init:function () {
|
||||
var _this=this;
|
||||
var facePanel=document.createElement("ul");
|
||||
var faceWarp=document.createElement("div");
|
||||
facePanel.className="face-panel";
|
||||
faceWarp.className='face-warp';
|
||||
faceWarp.appendChild(facePanel);
|
||||
_this.opt.el.appendChild(faceWarp);
|
||||
for(var i=0;i<faceJson.length;i++){
|
||||
var face=faceJson[i];
|
||||
var li=document.createElement("li");
|
||||
li.className="face "+face.faceID;
|
||||
li.title=face.title;
|
||||
(function (face) {
|
||||
li.addEventListener('click',function (e) {
|
||||
_this.opt.callBack(face,faceWarp);
|
||||
e.preventDefault()
|
||||
e.stopPropagation();
|
||||
});
|
||||
})(face)
|
||||
facePanel.appendChild(li);
|
||||
}
|
||||
_this.opt.el.addEventListener("click",function (e) {
|
||||
faceWarp.style.display="block";
|
||||
e.preventDefault()
|
||||
e.stopPropagation();
|
||||
|
||||
});
|
||||
document.addEventListener("click",function (e) {
|
||||
faceWarp.style.display="none";
|
||||
})
|
||||
|
||||
},
|
||||
replaceFace:function (text) {
|
||||
for(var i=0;i<faceJson.length;i++){
|
||||
var face=faceJson[i];
|
||||
var str="<span class='face "+face.faceID+"' title='"+face.title+"'></span>";
|
||||
var str1='〖'+face.title+'〗';
|
||||
var reg = new RegExp(str1,"g");
|
||||
text=text.replace(reg,str);
|
||||
}
|
||||
return text;
|
||||
}
|
||||
}
|
||||
})(window)
|
||||
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue