初始化
This commit is contained in:
24kycj
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"comments": false,
|
||||
"env": {
|
||||
"main": {
|
||||
"presets": [
|
||||
["env", {
|
||||
"targets": { "node": 7 }
|
||||
}],
|
||||
"stage-0"
|
||||
]
|
||||
},
|
||||
"renderer": {
|
||||
"presets": [
|
||||
["env", {
|
||||
"modules": false
|
||||
}],
|
||||
"stage-0"
|
||||
]
|
||||
},
|
||||
"web": {
|
||||
"presets": [
|
||||
["env", {
|
||||
"modules": false
|
||||
}],
|
||||
"stage-0"
|
||||
]
|
||||
}
|
||||
},
|
||||
"plugins": ["transform-runtime"]
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
'use strict'
|
||||
|
||||
process.env.NODE_ENV = 'production'
|
||||
|
||||
const { say } = require('cfonts')
|
||||
const chalk = require('chalk')
|
||||
const del = require('del')
|
||||
const { spawn } = require('child_process')
|
||||
const webpack = require('webpack')
|
||||
const Listr = require('listr')
|
||||
|
||||
|
||||
const mainConfig = require('./webpack.main.config')
|
||||
const rendererConfig = require('./webpack.renderer.config')
|
||||
const webConfig = require('./webpack.web.config')
|
||||
|
||||
const doneLog = chalk.bgGreen.white(' DONE ') + ' '
|
||||
const errorLog = chalk.bgRed.white(' ERROR ') + ' '
|
||||
const okayLog = chalk.bgBlue.white(' OKAY ') + ' '
|
||||
const isCI = process.env.CI || false
|
||||
|
||||
if (process.env.BUILD_TARGET === 'clean') clean()
|
||||
else if (process.env.BUILD_TARGET === 'web') web()
|
||||
else build()
|
||||
|
||||
function clean () {
|
||||
del.sync(['build/*', '!build/icons', '!build/icons/icon.*'])
|
||||
console.log(`\n${doneLog}\n`)
|
||||
process.exit()
|
||||
}
|
||||
|
||||
async function build () {
|
||||
greeting()
|
||||
|
||||
del.sync(['dist/electron/*', '!.gitkeep'])
|
||||
|
||||
const tasks = ['main', 'renderer']
|
||||
const m = new Multispinner(tasks, {
|
||||
preText: 'building',
|
||||
postText: 'process'
|
||||
})
|
||||
|
||||
let results = ''
|
||||
|
||||
const tasks = new Listr(
|
||||
[
|
||||
{
|
||||
title: 'building master process',
|
||||
task: async () => {
|
||||
await pack(mainConfig)
|
||||
.then(result => {
|
||||
results += result + '\n\n'
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(`\n ${errorLog}failed to build main process`)
|
||||
console.error(`\n${err}\n`)
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'building renderer process',
|
||||
task: async () => {
|
||||
await pack(rendererConfig)
|
||||
.then(result => {
|
||||
results += result + '\n\n'
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(`\n ${errorLog}failed to build renderer process`)
|
||||
console.error(`\n${err}\n`)
|
||||
})
|
||||
}
|
||||
}
|
||||
],
|
||||
{ concurrent: 2 }
|
||||
)
|
||||
|
||||
await tasks
|
||||
.run()
|
||||
.then(() => {
|
||||
process.stdout.write('\x1B[2J\x1B[0f')
|
||||
console.log(`\n\n${results}`)
|
||||
console.log(`${okayLog}take it away ${chalk.yellow('`electron-builder`')}\n`)
|
||||
process.exit()
|
||||
})
|
||||
.catch(err => {
|
||||
process.exit(1)
|
||||
})
|
||||
}
|
||||
|
||||
function pack (config) {
|
||||
return new Promise((resolve, reject) => {
|
||||
config.mode = 'production'
|
||||
webpack(config, (err, stats) => {
|
||||
if (err) reject(err.stack || err)
|
||||
else if (stats.hasErrors()) {
|
||||
let err = ''
|
||||
|
||||
stats.toString({
|
||||
chunks: false,
|
||||
colors: true
|
||||
})
|
||||
.split(/\r?\n/)
|
||||
.forEach(line => {
|
||||
err += ` ${line}\n`
|
||||
})
|
||||
|
||||
reject(err)
|
||||
} else {
|
||||
resolve(stats.toString({
|
||||
chunks: false,
|
||||
colors: true
|
||||
}))
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function web () {
|
||||
del.sync(['dist/web/*', '!.gitkeep'])
|
||||
webConfig.mode = 'production'
|
||||
webpack(webConfig, (err, stats) => {
|
||||
if (err || stats.hasErrors()) console.log(err)
|
||||
|
||||
console.log(stats.toString({
|
||||
chunks: false,
|
||||
colors: true
|
||||
}))
|
||||
|
||||
process.exit()
|
||||
})
|
||||
}
|
||||
|
||||
function greeting () {
|
||||
const cols = process.stdout.columns
|
||||
let text = ''
|
||||
|
||||
if (cols > 85) text = 'lets-build'
|
||||
else if (cols > 60) text = 'lets-|build'
|
||||
else text = false
|
||||
|
||||
if (text && !isCI) {
|
||||
say(text, {
|
||||
colors: ['yellow'],
|
||||
font: 'simple3d',
|
||||
space: false
|
||||
})
|
||||
} else console.log(chalk.yellow.bold('\n lets-build'))
|
||||
console.log()
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
|
||||
|
||||
hotClient.subscribe(event => {
|
||||
/**
|
||||
* Reload browser when HTMLWebpackPlugin emits a new index.html
|
||||
*
|
||||
* Currently disabled until jantimon/html-webpack-plugin#680 is resolved.
|
||||
* https://github.com/SimulatedGREG/electron-vue/issues/437
|
||||
* https://github.com/jantimon/html-webpack-plugin/issues/680
|
||||
*/
|
||||
// if (event.action === 'reload') {
|
||||
// window.location.reload()
|
||||
// }
|
||||
|
||||
/**
|
||||
* Notify `mainWindow` when `main` process is compiling,
|
||||
* giving notice for an expected reload of the `electron` process
|
||||
*/
|
||||
if (event.action === 'compiling') {
|
||||
document.body.innerHTML += `
|
||||
<style>
|
||||
#dev-client {
|
||||
background: #4fc08d;
|
||||
border-radius: 4px;
|
||||
bottom: 20px;
|
||||
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
|
||||
color: #fff;
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
left: 20px;
|
||||
padding: 8px 12px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="dev-client">
|
||||
Compiling Main Process...
|
||||
</div>
|
||||
`
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,191 @@
|
||||
'use strict'
|
||||
|
||||
const chalk = require('chalk')
|
||||
const electron = require('electron')
|
||||
const path = require('path')
|
||||
const { say } = require('cfonts')
|
||||
const { spawn } = require('child_process')
|
||||
const webpack = require('webpack')
|
||||
const WebpackDevServer = require('webpack-dev-server')
|
||||
const webpackHotMiddleware = require('webpack-hot-middleware')
|
||||
|
||||
const mainConfig = require('./webpack.main.config')
|
||||
const rendererConfig = require('./webpack.renderer.config')
|
||||
|
||||
let electronProcess = null
|
||||
let manualRestart = false
|
||||
let hotMiddleware
|
||||
|
||||
function logStats (proc, data) {
|
||||
let log = ''
|
||||
|
||||
log += chalk.yellow.bold(`┏ ${proc} Process ${new Array((19 - proc.length) + 1).join('-')}`)
|
||||
log += '\n\n'
|
||||
|
||||
if (typeof data === 'object') {
|
||||
data.toString({
|
||||
colors: true,
|
||||
chunks: false
|
||||
}).split(/\r?\n/).forEach(line => {
|
||||
log += ' ' + line + '\n'
|
||||
})
|
||||
} else {
|
||||
log += ` ${data}\n`
|
||||
}
|
||||
|
||||
log += '\n' + chalk.yellow.bold(`┗ ${new Array(28 + 1).join('-')}`) + '\n'
|
||||
|
||||
console.log(log)
|
||||
}
|
||||
|
||||
function startRenderer () {
|
||||
return new Promise((resolve, reject) => {
|
||||
rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
|
||||
rendererConfig.mode = 'development'
|
||||
const compiler = webpack(rendererConfig)
|
||||
hotMiddleware = webpackHotMiddleware(compiler, {
|
||||
log: false,
|
||||
heartbeat: 2500
|
||||
})
|
||||
|
||||
compiler.hooks.compilation.tap('compilation', compilation => {
|
||||
compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
|
||||
hotMiddleware.publish({ action: 'reload' })
|
||||
cb()
|
||||
})
|
||||
})
|
||||
|
||||
compiler.hooks.done.tap('done', stats => {
|
||||
logStats('Renderer', stats)
|
||||
})
|
||||
|
||||
const server = new WebpackDevServer(
|
||||
compiler,
|
||||
{
|
||||
contentBase: path.join(__dirname, '../'),
|
||||
quiet: true,
|
||||
hot: true,
|
||||
before (app, ctx) {
|
||||
app.use(hotMiddleware)
|
||||
ctx.middleware.waitUntilValid(() => {
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
server.listen(9080)
|
||||
})
|
||||
}
|
||||
|
||||
function startMain () {
|
||||
return new Promise((resolve, reject) => {
|
||||
mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main)
|
||||
mainConfig.mode = 'development'
|
||||
const compiler = webpack(mainConfig)
|
||||
|
||||
compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => {
|
||||
logStats('Main', chalk.white.bold('compiling...'))
|
||||
hotMiddleware.publish({ action: 'compiling' })
|
||||
done()
|
||||
})
|
||||
|
||||
compiler.watch({}, (err, stats) => {
|
||||
if (err) {
|
||||
console.log(err)
|
||||
return
|
||||
}
|
||||
|
||||
logStats('Main', stats)
|
||||
|
||||
if (electronProcess && electronProcess.kill) {
|
||||
manualRestart = true
|
||||
process.kill(electronProcess.pid)
|
||||
electronProcess = null
|
||||
startElectron()
|
||||
|
||||
setTimeout(() => {
|
||||
manualRestart = false
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function startElectron () {
|
||||
var args = [
|
||||
'--inspect=5858',
|
||||
path.join(__dirname, '../dist/electron/main.js')
|
||||
]
|
||||
|
||||
// detect yarn or npm and process commandline args accordingly
|
||||
if (process.env.npm_execpath.endsWith('yarn.js')) {
|
||||
args = args.concat(process.argv.slice(3))
|
||||
} else if (process.env.npm_execpath.endsWith('npm-cli.js')) {
|
||||
args = args.concat(process.argv.slice(2))
|
||||
}
|
||||
|
||||
electronProcess = spawn(electron, args)
|
||||
|
||||
electronProcess.stdout.on('data', data => {
|
||||
electronLog(data, 'blue')
|
||||
})
|
||||
electronProcess.stderr.on('data', data => {
|
||||
electronLog(data, 'red')
|
||||
})
|
||||
|
||||
electronProcess.on('close', () => {
|
||||
if (!manualRestart) process.exit()
|
||||
})
|
||||
}
|
||||
|
||||
function electronLog (data, color) {
|
||||
let log = ''
|
||||
data = data.toString().split(/\r?\n/)
|
||||
data.forEach(line => {
|
||||
log += ` ${line}\n`
|
||||
})
|
||||
if (/[0-9A-z]+/.test(log)) {
|
||||
console.log(
|
||||
chalk[color].bold('┏ Electron -------------------') +
|
||||
'\n\n' +
|
||||
log +
|
||||
chalk[color].bold('┗ ----------------------------') +
|
||||
'\n'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function greeting () {
|
||||
const cols = process.stdout.columns
|
||||
let text = ''
|
||||
|
||||
if (cols > 104) text = 'electron-vue'
|
||||
else if (cols > 76) text = 'electron-|vue'
|
||||
else text = false
|
||||
|
||||
if (text) {
|
||||
say(text, {
|
||||
colors: ['yellow'],
|
||||
font: 'simple3d',
|
||||
space: false
|
||||
})
|
||||
} else console.log(chalk.yellow.bold('\n electron-vue'))
|
||||
console.log(chalk.blue(' getting ready...') + '\n')
|
||||
}
|
||||
|
||||
function init () {
|
||||
greeting()
|
||||
|
||||
Promise.all([startRenderer(), startMain()])
|
||||
.then(() => {
|
||||
startElectron()
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
init()
|
||||
@@ -0,0 +1,83 @@
|
||||
'use strict'
|
||||
|
||||
process.env.BABEL_ENV = 'main'
|
||||
|
||||
const path = require('path')
|
||||
const { dependencies } = require('../package.json')
|
||||
const webpack = require('webpack')
|
||||
|
||||
const MinifyPlugin = require("babel-minify-webpack-plugin")
|
||||
|
||||
let mainConfig = {
|
||||
entry: {
|
||||
main: path.join(__dirname, '../src/main/index.js')
|
||||
},
|
||||
externals: [
|
||||
...Object.keys(dependencies || {})
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js)$/,
|
||||
enforce: 'pre',
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'eslint-loader',
|
||||
options: {
|
||||
formatter: require('eslint-friendly-formatter')
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.node$/,
|
||||
use: 'node-loader'
|
||||
}
|
||||
]
|
||||
},
|
||||
node: {
|
||||
__dirname: process.env.NODE_ENV !== 'production',
|
||||
__filename: process.env.NODE_ENV !== 'production'
|
||||
},
|
||||
output: {
|
||||
filename: '[name].js',
|
||||
libraryTarget: 'commonjs2',
|
||||
path: path.join(__dirname, '../dist/electron')
|
||||
},
|
||||
plugins: [
|
||||
new webpack.NoEmitOnErrorsPlugin()
|
||||
],
|
||||
resolve: {
|
||||
extensions: ['.js', '.json', '.node']
|
||||
},
|
||||
target: 'electron-main'
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjust mainConfig for development settings
|
||||
*/
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
mainConfig.plugins.push(
|
||||
new webpack.DefinePlugin({
|
||||
'__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjust mainConfig for production settings
|
||||
*/
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
mainConfig.plugins.push(
|
||||
new MinifyPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': '"production"'
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
module.exports = mainConfig
|
||||
@@ -0,0 +1,206 @@
|
||||
'use strict'
|
||||
|
||||
process.env.BABEL_ENV = 'renderer'
|
||||
|
||||
const path = require('path')
|
||||
const { dependencies } = require('../package.json')
|
||||
const webpack = require('webpack')
|
||||
const config = require('../config/index.js')
|
||||
|
||||
const MinifyPlugin = require("babel-minify-webpack-plugin")
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const { VueLoaderPlugin } = require('vue-loader')
|
||||
|
||||
/**
|
||||
* List of node_modules to include in webpack bundle
|
||||
*
|
||||
* Required for specific packages like Vue UI libraries
|
||||
* that provide pure *.vue files that need compiling
|
||||
* https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
|
||||
*/
|
||||
let whiteListedModules = ['vue']
|
||||
|
||||
let rendererConfig = {
|
||||
devtool: '#cheap-module-eval-source-map',
|
||||
entry: {
|
||||
renderer: path.join(__dirname, '../src/renderer/main.js')
|
||||
},
|
||||
externals: [
|
||||
...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|vue)$/,
|
||||
enforce: 'pre',
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'eslint-loader',
|
||||
options: {
|
||||
formatter: require('eslint-friendly-formatter')
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: ['vue-style-loader', 'css-loader', 'sass-loader']
|
||||
},
|
||||
{
|
||||
test: /\.sass$/,
|
||||
use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: ['vue-style-loader', 'css-loader', 'less-loader']
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['vue-style-loader', 'css-loader']
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
use: 'vue-html-loader'
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.node$/,
|
||||
use: 'node-loader'
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
use: {
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
extractCSS: process.env.NODE_ENV === 'production',
|
||||
loaders: {
|
||||
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
|
||||
scss: 'vue-style-loader!css-loader!sass-loader',
|
||||
less: 'vue-style-loader!css-loader!less-loader'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
|
||||
use: {
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'imgs/[name]--[folder].[ext]'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: 'media/[name]--[folder].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
||||
use: {
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'fonts/[name]--[folder].[ext]'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
node: {
|
||||
__dirname: process.env.NODE_ENV !== 'production',
|
||||
__filename: process.env.NODE_ENV !== 'production'
|
||||
},
|
||||
plugins: [
|
||||
new VueLoaderPlugin(),
|
||||
new MiniCssExtractPlugin({filename: 'styles.css'}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': process.env.NODE_ENV === 'production' ? config.build.env : config.dev.env
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
filename: 'index.html',
|
||||
template: path.resolve(__dirname, '../src/index.ejs'),
|
||||
templateParameters(compilation, assets, options) {
|
||||
return {
|
||||
compilation: compilation,
|
||||
webpack: compilation.getStats().toJson(),
|
||||
webpackConfig: compilation.options,
|
||||
htmlWebpackPlugin: {
|
||||
files: assets,
|
||||
options: options,
|
||||
},
|
||||
process,
|
||||
};
|
||||
},
|
||||
minify: {
|
||||
collapseWhitespace: true,
|
||||
removeAttributeQuotes: true,
|
||||
removeComments: true
|
||||
},
|
||||
nodeModules: process.env.NODE_ENV !== 'production'
|
||||
? path.resolve(__dirname, '../node_modules')
|
||||
: false
|
||||
}),
|
||||
new webpack.NoEmitOnErrorsPlugin()
|
||||
],
|
||||
output: {
|
||||
filename: '[name].js',
|
||||
libraryTarget: 'commonjs2',
|
||||
path: path.join(__dirname, '../dist/electron')
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.join(__dirname, '../src/renderer'),
|
||||
'vue$': 'vue/dist/vue.esm.js'
|
||||
},
|
||||
extensions: ['.js', '.vue', '.json', '.css', '.node']
|
||||
},
|
||||
target: 'electron-renderer'
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjust rendererConfig for development settings
|
||||
*/
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
rendererConfig.plugins.push(
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
'__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjust rendererConfig for production settings
|
||||
*/
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
rendererConfig.devtool = ''
|
||||
|
||||
rendererConfig.plugins.push(
|
||||
new MinifyPlugin(),
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
from: path.join(__dirname, '../static'),
|
||||
to: path.join(__dirname, '../dist/electron/static'),
|
||||
ignore: ['.*']
|
||||
}
|
||||
]),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': '"production"'
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
module.exports = rendererConfig
|
||||
@@ -0,0 +1,163 @@
|
||||
'use strict'
|
||||
|
||||
process.env.BABEL_ENV = 'web'
|
||||
|
||||
const path = require('path')
|
||||
const webpack = require('webpack')
|
||||
|
||||
const MinifyPlugin = require("babel-minify-webpack-plugin")
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const { VueLoaderPlugin } = require('vue-loader')
|
||||
|
||||
let webConfig = {
|
||||
devtool: '#cheap-module-eval-source-map',
|
||||
entry: {
|
||||
web: path.join(__dirname, '../src/renderer/main.js')
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|vue)$/,
|
||||
enforce: 'pre',
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'eslint-loader',
|
||||
options: {
|
||||
formatter: require('eslint-friendly-formatter')
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: ['vue-style-loader', 'css-loader', 'sass-loader']
|
||||
},
|
||||
{
|
||||
test: /\.sass$/,
|
||||
use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: ['vue-style-loader', 'css-loader', 'less-loader']
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['vue-style-loader', 'css-loader']
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
use: 'vue-html-loader'
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: 'babel-loader',
|
||||
include: [ path.resolve(__dirname, '../src/renderer') ],
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
use: {
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
extractCSS: true,
|
||||
loaders: {
|
||||
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
|
||||
scss: 'vue-style-loader!css-loader!sass-loader',
|
||||
less: 'vue-style-loader!css-loader!less-loader'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
|
||||
use: {
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'imgs/[name].[ext]'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
||||
use: {
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'fonts/[name].[ext]'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new VueLoaderPlugin(),
|
||||
new MiniCssExtractPlugin({filename: 'styles.css'}),
|
||||
new HtmlWebpackPlugin({
|
||||
filename: 'index.html',
|
||||
template: path.resolve(__dirname, '../src/index.ejs'),
|
||||
templateParameters(compilation, assets, options) {
|
||||
return {
|
||||
compilation: compilation,
|
||||
webpack: compilation.getStats().toJson(),
|
||||
webpackConfig: compilation.options,
|
||||
htmlWebpackPlugin: {
|
||||
files: assets,
|
||||
options: options,
|
||||
},
|
||||
process,
|
||||
};
|
||||
},
|
||||
minify: {
|
||||
collapseWhitespace: true,
|
||||
removeAttributeQuotes: true,
|
||||
removeComments: true
|
||||
},
|
||||
nodeModules: false
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.IS_WEB': 'true'
|
||||
}),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NoEmitOnErrorsPlugin()
|
||||
],
|
||||
output: {
|
||||
filename: '[name].js',
|
||||
path: path.join(__dirname, '../dist/web')
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.join(__dirname, '../src/renderer'),
|
||||
'vue$': 'vue/dist/vue.esm.js'
|
||||
},
|
||||
extensions: ['.js', '.vue', '.json', '.css']
|
||||
},
|
||||
target: 'web'
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjust webConfig for production settings
|
||||
*/
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
webConfig.devtool = ''
|
||||
|
||||
webConfig.plugins.push(
|
||||
new MinifyPlugin(),
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
from: path.join(__dirname, '../static'),
|
||||
to: path.join(__dirname, '../dist/web/static'),
|
||||
ignore: ['.*']
|
||||
}
|
||||
]),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': '"production"'
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
module.exports = webConfig
|
||||
@@ -0,0 +1,3 @@
|
||||
build/*.js
|
||||
src/renderer/assets/**
|
||||
dist/**
|
||||
@@ -0,0 +1,21 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
parser: 'babel-eslint',
|
||||
parserOptions: {
|
||||
sourceType: 'module'
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
node: true
|
||||
},
|
||||
globals: {
|
||||
__static: true
|
||||
},
|
||||
plugins: [
|
||||
'html'
|
||||
],
|
||||
'rules': {
|
||||
// allow debugger during development
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
|
||||
}
|
||||
}
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
.DS_Store
|
||||
dist/electron/*
|
||||
dist/web/*
|
||||
build/*
|
||||
!build/icons
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
npm-debug.log.*
|
||||
thumbs.db
|
||||
!.gitkeep
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 200,
|
||||
"proseWrap": "never",
|
||||
"bracketSpacing": true
|
||||
}
|
||||
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
osx_image: xcode8.3
|
||||
sudo: required
|
||||
dist: trusty
|
||||
language: c
|
||||
matrix:
|
||||
include:
|
||||
- os: osx
|
||||
- os: linux
|
||||
env: CC=clang CXX=clang++ npm_config_clang=1
|
||||
compiler: clang
|
||||
cache:
|
||||
directories:
|
||||
- node_modules
|
||||
- "$HOME/.electron"
|
||||
- "$HOME/.cache"
|
||||
addons:
|
||||
apt:
|
||||
packages:
|
||||
- libgnome-keyring-dev
|
||||
- icnsutils
|
||||
before_install:
|
||||
- if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then brew install git-lfs; fi
|
||||
- if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi
|
||||
install:
|
||||
- nvm install 10
|
||||
- curl -o- -L https://yarnpkg.com/install.sh | bash
|
||||
- source ~/.bashrc
|
||||
- npm install -g xvfb-maybe
|
||||
- yarn
|
||||
before_script:
|
||||
- git lfs pull
|
||||
script:
|
||||
- yarn run build
|
||||
branches:
|
||||
only:
|
||||
- master
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"i18n-ally.localesPaths": [
|
||||
"src/renderer/lang"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
# soon-worker-disk
|
||||
|
||||
> KaShu SoonWorkerDisk
|
||||
|
||||
#### Build Setup
|
||||
|
||||
``` bash
|
||||
# install dependencies
|
||||
npm install
|
||||
|
||||
# serve with hot reload at localhost:9080
|
||||
npm run dev
|
||||
|
||||
# build electron application for production
|
||||
npm run build
|
||||
|
||||
|
||||
# lint all JS/Vue component files in `src/`
|
||||
npm run lint
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
This project was generated with [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[8d4ed60](https://github.com/SimulatedGREG/electron-vue/tree/8d4ed607d65300381a8f47d97923eb07832b1a9a) using [vue-cli](https://github.com/vuejs/vue-cli). Documentation about the original structure can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
|
||||
@@ -0,0 +1,29 @@
|
||||
version: 0.1.{build}
|
||||
|
||||
branches:
|
||||
only:
|
||||
- master
|
||||
|
||||
image: Visual Studio 2017
|
||||
platform:
|
||||
- x64
|
||||
|
||||
cache:
|
||||
- node_modules
|
||||
- '%APPDATA%\npm-cache'
|
||||
- '%USERPROFILE%\.electron'
|
||||
- '%USERPROFILE%\AppData\Local\Yarn\cache'
|
||||
|
||||
init:
|
||||
- git config --global core.autocrlf input
|
||||
|
||||
install:
|
||||
- ps: Install-Product node 8 x64
|
||||
- git reset --hard HEAD
|
||||
- yarn
|
||||
- node --version
|
||||
|
||||
build_script:
|
||||
- yarn build
|
||||
|
||||
test: off
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
@@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
NODE_ENV: '"development"',
|
||||
BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"'
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
build: {
|
||||
env: require('./prod.env')
|
||||
},
|
||||
dev: {
|
||||
env: require('./dev.env')
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
NODE_ENV: '"production"',
|
||||
BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"'
|
||||
}
|
||||
Vendored
Vendored
+112
@@ -0,0 +1,112 @@
|
||||
{
|
||||
"name": "soonworkerdisk",
|
||||
"version": "0.0.1",
|
||||
"author": "24kycj <1637269896@qq.com>",
|
||||
"description": "KaShu SoonWorkerDisk",
|
||||
"license": "MIT",
|
||||
"main": "./dist/electron/main.js",
|
||||
"scripts": {
|
||||
"build": "node .electron-vue/build.js && electron-builder",
|
||||
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
|
||||
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
|
||||
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
|
||||
"dev": "node .electron-vue/dev-runner.js",
|
||||
"lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
|
||||
"lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
|
||||
"pack": "npm run pack:main && npm run pack:renderer",
|
||||
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
|
||||
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
|
||||
"postinstall": "npm run lint:fix"
|
||||
},
|
||||
"build": {
|
||||
"productName": "soonworkerdisk",
|
||||
"appId": "com.kashu.soonworkerdisk",
|
||||
"directories": {
|
||||
"output": "build"
|
||||
},
|
||||
"files": [
|
||||
"dist/electron/**/*"
|
||||
],
|
||||
"dmg": {
|
||||
"contents": [
|
||||
{
|
||||
"x": 410,
|
||||
"y": 150,
|
||||
"type": "link",
|
||||
"path": "/Applications"
|
||||
},
|
||||
{
|
||||
"x": 130,
|
||||
"y": 150,
|
||||
"type": "file"
|
||||
}
|
||||
]
|
||||
},
|
||||
"mac": {
|
||||
"icon": "build/icons/icon.icns"
|
||||
},
|
||||
"win": {
|
||||
"icon": "build/icons/icon.ico"
|
||||
},
|
||||
"linux": {
|
||||
"icon": "build/icons"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.18.0",
|
||||
"element-ui": "^2.15.14",
|
||||
"js-cookie": "^3.0.5",
|
||||
"nprogress": "^0.2.0",
|
||||
"vue": "^2.5.16",
|
||||
"vue-devtools": "^5.1.4",
|
||||
"vue-electron": "^1.0.6",
|
||||
"vue-i18n": "7.8.1",
|
||||
"vue-router": "^3.0.1",
|
||||
"vuex": "^3.0.1",
|
||||
"vuex-electron": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"ajv": "^6.5.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-eslint": "^8.2.3",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-minify-webpack-plugin": "^0.3.1",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"cfonts": "^2.1.2",
|
||||
"chalk": "^2.4.1",
|
||||
"copy-webpack-plugin": "^4.5.1",
|
||||
"cross-env": "^5.1.6",
|
||||
"css-loader": "^0.28.11",
|
||||
"del": "^3.0.0",
|
||||
"devtron": "^1.4.0",
|
||||
"electron": "^2.0.4",
|
||||
"electron-builder": "^20.19.2",
|
||||
"electron-debug": "^1.5.0",
|
||||
"electron-devtools-installer": "^2.2.4",
|
||||
"eslint": "^4.19.1",
|
||||
"eslint-friendly-formatter": "^4.0.1",
|
||||
"eslint-loader": "^2.0.0",
|
||||
"eslint-plugin-html": "^4.0.3",
|
||||
"file-loader": "^1.1.11",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"listr": "^0.14.3",
|
||||
"mini-css-extract-plugin": "0.4.0",
|
||||
"node-loader": "^0.6.0",
|
||||
"node-sass": "^4.9.2",
|
||||
"sass-loader": "^7.0.3",
|
||||
"style-loader": "^0.21.0",
|
||||
"url-loader": "^1.0.1",
|
||||
"vue-html-loader": "^1.2.4",
|
||||
"vue-loader": "^15.2.4",
|
||||
"vue-style-loader": "^4.1.0",
|
||||
"vue-template-compiler": "^2.5.16",
|
||||
"webpack": "^4.15.1",
|
||||
"webpack-cli": "^3.0.8",
|
||||
"webpack-dev-server": "^3.1.4",
|
||||
"webpack-hot-middleware": "^2.22.2",
|
||||
"webpack-merge": "^4.1.3"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>soonworkerdisk</title>
|
||||
<% if (htmlWebpackPlugin.options.nodeModules) { %>
|
||||
<!-- Add `node_modules/` to global paths so `require` works properly in development -->
|
||||
<script>
|
||||
require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
|
||||
</script>
|
||||
<% } %>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- Set `__static` path to static files in production -->
|
||||
<% if (!process.browser) { %>
|
||||
<script>
|
||||
if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
|
||||
</script>
|
||||
<% } %>
|
||||
|
||||
<!-- webpack builds are automatically injected -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* This file is used specifically and only for development. It installs
|
||||
* `electron-debug` & `vue-devtools`. There shouldn't be any need to
|
||||
* modify this file, but it can be used to extend your development
|
||||
* environment.
|
||||
*/
|
||||
|
||||
/* eslint-disable */
|
||||
|
||||
// Install `electron-debug` with `devtron`
|
||||
require('electron-debug')({ showDevTools: true })
|
||||
|
||||
// Install `vue-devtools`
|
||||
require('electron').app.on('ready', () => {
|
||||
let installExtension = require('electron-devtools-installer')
|
||||
installExtension.default(installExtension.VUEJS_DEVTOOLS)
|
||||
.then(() => {})
|
||||
.catch(err => {
|
||||
console.log('Unable to install `vue-devtools`: \n', err)
|
||||
})
|
||||
})
|
||||
|
||||
// Require `main` process to boot app
|
||||
require('./index')
|
||||
@@ -0,0 +1,66 @@
|
||||
import { app, BrowserWindow } from 'electron'
|
||||
import '../renderer/store'
|
||||
|
||||
/**
|
||||
* Set `__static` path to static files in production
|
||||
* https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
|
||||
*/
|
||||
if (process.env.NODE_ENV !== 'development') {
|
||||
global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
|
||||
}
|
||||
|
||||
let mainWindow
|
||||
const winURL = process.env.NODE_ENV === 'development'
|
||||
? `http://localhost:9080`
|
||||
: `file://${__dirname}/index.html`
|
||||
|
||||
function createWindow () {
|
||||
/**
|
||||
* Initial window options
|
||||
*/
|
||||
mainWindow = new BrowserWindow({
|
||||
height: 1080,
|
||||
useContentSize: true,
|
||||
width: 1920
|
||||
})
|
||||
|
||||
mainWindow.loadURL(winURL)
|
||||
|
||||
mainWindow.on('closed', () => {
|
||||
mainWindow = null
|
||||
})
|
||||
}
|
||||
|
||||
app.on('ready', createWindow)
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit()
|
||||
}
|
||||
})
|
||||
|
||||
app.on('activate', () => {
|
||||
if (mainWindow === null) {
|
||||
createWindow()
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Auto Updater
|
||||
*
|
||||
* Uncomment the following code below and install `electron-updater` to
|
||||
* support auto updating. Code Signing with a valid certificate is required.
|
||||
* https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating
|
||||
*/
|
||||
|
||||
/*
|
||||
import { autoUpdater } from 'electron-updater'
|
||||
|
||||
autoUpdater.on('update-downloaded', () => {
|
||||
autoUpdater.quitAndInstall()
|
||||
})
|
||||
|
||||
app.on('ready', () => {
|
||||
if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates()
|
||||
})
|
||||
*/
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import './styles/index.scss'; // 全局自定义的css样式
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function login(username, password) {
|
||||
return request({
|
||||
url: '/user/login',
|
||||
method: 'post',
|
||||
data: {
|
||||
username,
|
||||
password
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function getInfo(token) {
|
||||
return request({
|
||||
url: '/user/info',
|
||||
method: 'get',
|
||||
params: { token }
|
||||
})
|
||||
}
|
||||
|
||||
export function logout() {
|
||||
return request({
|
||||
url: '/user/logout',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div id="wrapper">
|
||||
<img id="logo" src="~@/assets/logo.png" alt="electron-vue">
|
||||
<main>
|
||||
<div class="left-side">
|
||||
<span class="title">
|
||||
Welcome to your new project!
|
||||
</span>
|
||||
<system-information></system-information>
|
||||
</div>
|
||||
|
||||
<div class="right-side">
|
||||
<div class="doc">
|
||||
<div class="title">Getting Started</div>
|
||||
<p>
|
||||
electron-vue comes packed with detailed documentation that covers everything from
|
||||
internal configurations, using the project structure, building your application,
|
||||
and so much more.
|
||||
</p>
|
||||
<button @click="open('https://simulatedgreg.gitbooks.io/electron-vue/content/')">Read the Docs</button><br><br>
|
||||
</div>
|
||||
<div class="doc">
|
||||
<div class="title alt">Other Documentation</div>
|
||||
<button class="alt" @click="open('https://electron.atom.io/docs/')">Electron</button>
|
||||
<button class="alt" @click="open('https://vuejs.org/v2/guide/')">Vue.js</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SystemInformation from './LandingPage/SystemInformation'
|
||||
|
||||
export default {
|
||||
name: 'landing-page',
|
||||
components: { SystemInformation },
|
||||
methods: {
|
||||
open (link) {
|
||||
this.$electron.shell.openExternal(link)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body { font-family: 'Source Sans Pro', sans-serif; }
|
||||
|
||||
#wrapper {
|
||||
background:
|
||||
radial-gradient(
|
||||
ellipse at top left,
|
||||
rgba(255, 255, 255, 1) 40%,
|
||||
rgba(229, 229, 229, .9) 100%
|
||||
);
|
||||
height: 100vh;
|
||||
padding: 60px 80px;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
#logo {
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
width: 420px;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
main > div { flex-basis: 50%; }
|
||||
|
||||
.left-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
color: #555;
|
||||
font-size: 23px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #2c3e50;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.title.alt {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.doc p {
|
||||
color: black;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.doc button {
|
||||
font-size: .8em;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
padding: 0.75em 2em;
|
||||
border-radius: 2em;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
background-color: #4fc08d;
|
||||
transition: all 0.15s ease;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #4fc08d;
|
||||
}
|
||||
|
||||
.doc button.alt {
|
||||
color: #42b983;
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">Information</div>
|
||||
<div class="items">
|
||||
<div class="item">
|
||||
<div class="name">Path:</div>
|
||||
<div class="value">{{ path }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="name">Route Name:</div>
|
||||
<div class="value">{{ name }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="name">Vue.js:</div>
|
||||
<div class="value">{{ vue }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="name">Electron:</div>
|
||||
<div class="value">{{ electron }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="name">Node:</div>
|
||||
<div class="value">{{ node }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="name">Platform:</div>
|
||||
<div class="value">{{ platform }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
electron: process.versions.electron,
|
||||
name: this.$route.name,
|
||||
node: process.versions.node,
|
||||
path: this.$route.path,
|
||||
platform: require('os').platform(),
|
||||
vue: require('vue/package.json').version
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
color: #888;
|
||||
font-size: 18px;
|
||||
font-weight: initial;
|
||||
letter-spacing: .25px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.items { margin-top: 8px; }
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.item .name {
|
||||
color: #6a6a6a;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.item .value {
|
||||
color: #35495e;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
|
||||
<div>
|
||||
<svg-icon class-name="international-icon" icon-class="language" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :disabled="language==='zhCN'" command="zhCN">
|
||||
简体中文
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="language==='en'" command="en">
|
||||
English
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="language==='zhTW'" command="zhTW">
|
||||
繁体中文
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
language() {
|
||||
return this.$store.getters.language
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLanguage(lang) {
|
||||
this.$i18n.locale = lang
|
||||
this.$store.dispatch('app/setLanguage', lang)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,23 @@
|
||||
export default {
|
||||
route: {
|
||||
dashboard: 'Dashboard',
|
||||
documentation: 'Documentation',
|
||||
},
|
||||
navbar: {
|
||||
dashboard: 'Dashboard',
|
||||
github: 'Github',
|
||||
logOut: 'Log Out',
|
||||
profile: 'Profile',
|
||||
theme: 'Theme',
|
||||
size: 'Global Size'
|
||||
},
|
||||
login: {
|
||||
title: 'Login Form',
|
||||
logIn: 'Login',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
any: 'any',
|
||||
thirdparty: 'Or connect with',
|
||||
thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import Cookies from 'js-cookie'
|
||||
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
|
||||
import elementZhCNLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
|
||||
import elementZhTWLocale from 'element-ui/lib/locale/lang/zh-TW'// element-ui lang
|
||||
import enLocale from './en'
|
||||
import zhCNLocale from './zh-CN'
|
||||
import zhTWLocale from './zh-TW'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
...enLocale,
|
||||
...elementEnLocale
|
||||
},
|
||||
zhCN: {
|
||||
...zhCNLocale,
|
||||
...elementZhCNLocale
|
||||
},
|
||||
zhTW: {
|
||||
...zhTWLocale,
|
||||
...elementZhTWLocale
|
||||
}
|
||||
}
|
||||
export function getLanguage() {
|
||||
const chooseLanguage = Cookies.get('language')
|
||||
if (chooseLanguage) return chooseLanguage
|
||||
|
||||
// if has not choose language
|
||||
const language = (navigator.language || navigator.browserLanguage).toLowerCase()
|
||||
const locales = Object.keys(messages)
|
||||
for (const locale of locales) {
|
||||
if (language.indexOf(locale) > -1) {
|
||||
return locale
|
||||
}
|
||||
}
|
||||
return 'zhCN'
|
||||
}
|
||||
const i18n = new VueI18n({
|
||||
// set locale
|
||||
// options: en | zhCN | zhTW
|
||||
locale: getLanguage(),
|
||||
// set locale messages
|
||||
messages
|
||||
})
|
||||
|
||||
export default i18n
|
||||
@@ -0,0 +1,21 @@
|
||||
export default {
|
||||
route: {
|
||||
dashboard: '首页',
|
||||
},
|
||||
navbar: {
|
||||
dashboard: '首页',
|
||||
github: '项目地址',
|
||||
logOut: '退出登录',
|
||||
profile: '个人中心',
|
||||
theme: '换肤',
|
||||
size: '布局大小'
|
||||
},
|
||||
login: {
|
||||
title: '系统登录',
|
||||
logIn: '登录',
|
||||
username: '账号',
|
||||
password: '密码',
|
||||
any: '随便填',
|
||||
thirdparty: '第三方登录',
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
export default {
|
||||
route: {
|
||||
dashboard: '首页',
|
||||
},
|
||||
navbar: {
|
||||
dashboard: '首页',
|
||||
github: '项目地址',
|
||||
logOut: '退出登录',
|
||||
profile: '个人中心',
|
||||
theme: '换肤',
|
||||
size: '布局大小'
|
||||
},
|
||||
login: {
|
||||
title: '系统登录',
|
||||
logIn: '登录',
|
||||
username: '账号',
|
||||
password: '密码',
|
||||
any: '随便填',
|
||||
thirdparty: '第三方登录',
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import Vue from 'vue'
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
|
||||
import i18n from './lang' // internationalization
|
||||
import './permission' // permission control
|
||||
|
||||
if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
|
||||
Vue.http = Vue.prototype.$http = axios
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(ElementUI, {
|
||||
size: Cookies.get('size') || 'medium', // set element-ui default size
|
||||
i18n: (key, value) => i18n.t(key, value)
|
||||
})
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
components: { App },
|
||||
router,
|
||||
store,
|
||||
i18n,
|
||||
template: '<App/>'
|
||||
}).$mount('#app')
|
||||
@@ -0,0 +1,40 @@
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import NProgress from 'nprogress' // Progress 进度条
|
||||
import 'nprogress/nprogress.css'// Progress 进度条样式
|
||||
import { Message } from 'element-ui'
|
||||
|
||||
const whiteList = ['/login'] // 不重定向白名单
|
||||
router.beforeEach((to, from, next) => {
|
||||
NProgress.start()
|
||||
if (!store.getters.token) {
|
||||
if (to.path === '/login') {
|
||||
next({ path: '/' })
|
||||
NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
|
||||
} else {
|
||||
if (store.getters.roles.length === 0) {
|
||||
store.dispatch('GetInfo').then(res => { // 拉取用户信息
|
||||
next()
|
||||
}).catch((err) => {
|
||||
store.dispatch('FedLogOut').then(() => {
|
||||
Message.error(err || 'Verification failed, please login again')
|
||||
next({ path: '/' })
|
||||
})
|
||||
})
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (whiteList.indexOf(to.path) !== -1) {
|
||||
next()
|
||||
} else {
|
||||
next('/login')
|
||||
NProgress.done()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
router.afterEach(() => {
|
||||
NProgress.done() // 结束Progress
|
||||
})
|
||||
@@ -0,0 +1,12 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{ path: '/login', component: () => import('@/views/login/index') },
|
||||
{ path: '/404', component: () => import('@/views/404') },
|
||||
{ path: '/', component: () => import('@/views/dashboard/index'), name: '首页' }
|
||||
]
|
||||
})
|
||||
@@ -0,0 +1,10 @@
|
||||
const getters = {
|
||||
language: state => state.app.language,
|
||||
size: state => state.app.size,
|
||||
device: state => state.app.device,
|
||||
token: state => state.user.token,
|
||||
avatar: state => state.user.avatar,
|
||||
name: state => state.user.name,
|
||||
roles: state => state.user.roles,
|
||||
}
|
||||
export default getters
|
||||
@@ -0,0 +1,19 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import getters from './getters'
|
||||
|
||||
import { createPersistedState, createSharedMutations } from 'vuex-electron'
|
||||
|
||||
import modules from './modules'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
modules,
|
||||
getters,
|
||||
plugins: [
|
||||
createPersistedState(),
|
||||
createSharedMutations()
|
||||
],
|
||||
strict: process.env.NODE_ENV !== 'production'
|
||||
})
|
||||
@@ -0,0 +1,25 @@
|
||||
const state = {
|
||||
main: 0
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
DECREMENT_MAIN_COUNTER (state) {
|
||||
state.main--
|
||||
},
|
||||
INCREMENT_MAIN_COUNTER (state) {
|
||||
state.main++
|
||||
}
|
||||
}
|
||||
|
||||
const actions = {
|
||||
someAsyncTask ({ commit }) {
|
||||
// do something async
|
||||
commit('INCREMENT_MAIN_COUNTER')
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
state,
|
||||
mutations,
|
||||
actions
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import Cookies from 'js-cookie'
|
||||
import { getLanguage } from '@/lang/index'
|
||||
|
||||
const state = {
|
||||
device: 'desktop',
|
||||
language: getLanguage(),
|
||||
size: Cookies.get('size') || 'medium'
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
TOGGLE_DEVICE: (state, device) => {
|
||||
state.device = device
|
||||
},
|
||||
SET_LANGUAGE: (state, language) => {
|
||||
state.language = language
|
||||
Cookies.set('language', language)
|
||||
},
|
||||
SET_SIZE: (state, size) => {
|
||||
state.size = size
|
||||
Cookies.set('size', size)
|
||||
}
|
||||
}
|
||||
|
||||
const actions = {
|
||||
toggleDevice({ commit }, device) {
|
||||
commit('TOGGLE_DEVICE', device)
|
||||
},
|
||||
setLanguage({ commit }, language) {
|
||||
commit('SET_LANGUAGE', language)
|
||||
},
|
||||
setSize({ commit }, size) {
|
||||
commit('SET_SIZE', size)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
state,
|
||||
mutations,
|
||||
actions
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* The file enables `@/store/index.js` to import all vuex modules
|
||||
* in a one-shot manner. There should not be any reason to edit this file.
|
||||
*/
|
||||
|
||||
const files = require.context('.', false, /\.js$/)
|
||||
const modules = {}
|
||||
|
||||
files.keys().forEach(key => {
|
||||
if (key === './index.js') return
|
||||
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
|
||||
})
|
||||
|
||||
export default modules
|
||||
@@ -0,0 +1,87 @@
|
||||
import { login, logout, getInfo } from '@/api/login'
|
||||
import { getToken, setToken, removeToken } from '@/utils/auth'
|
||||
|
||||
const user = {
|
||||
state: {
|
||||
token: getToken(),
|
||||
name: '',
|
||||
avatar: '',
|
||||
roles: []
|
||||
},
|
||||
|
||||
mutations: {
|
||||
SET_TOKEN: (state, token) => {
|
||||
state.token = token
|
||||
},
|
||||
SET_NAME: (state, name) => {
|
||||
state.name = name
|
||||
},
|
||||
SET_AVATAR: (state, avatar) => {
|
||||
state.avatar = avatar
|
||||
},
|
||||
SET_ROLES: (state, roles) => {
|
||||
state.roles = roles
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
// 登录
|
||||
Login({ commit }, userInfo) {
|
||||
const username = userInfo.username.trim()
|
||||
return new Promise((resolve, reject) => {
|
||||
login(username, userInfo.password).then(response => {
|
||||
const data = response.data
|
||||
setToken(data.token)
|
||||
commit('SET_TOKEN', data.token)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
GetInfo({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getInfo(state.token).then(response => {
|
||||
const data = response.data
|
||||
if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
|
||||
commit('SET_ROLES', data.roles)
|
||||
} else {
|
||||
reject('getInfo: roles must be a non-null array !')
|
||||
}
|
||||
commit('SET_NAME', data.name)
|
||||
commit('SET_AVATAR', data.avatar)
|
||||
resolve(response)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 登出
|
||||
LogOut({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
logout(state.token).then(() => {
|
||||
commit('SET_TOKEN', '')
|
||||
commit('SET_ROLES', [])
|
||||
removeToken()
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 前端 登出
|
||||
FedLogOut({ commit }) {
|
||||
return new Promise(resolve => {
|
||||
removeToken()
|
||||
commit('SET_TOKEN', '')
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default user
|
||||
@@ -0,0 +1,29 @@
|
||||
//to reset element-ui default css
|
||||
.el-upload {
|
||||
input[type="file"] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
|
||||
.el-dialog {
|
||||
transform: none;
|
||||
left: 0;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
//element ui upload
|
||||
.upload-container {
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
.el-upload-dragger {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
@import './variables.scss';
|
||||
@import './mixin.scss';
|
||||
@import './transition.scss';
|
||||
@import './element-ui.scss';
|
||||
@import './sidebar.scss';
|
||||
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
div:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
&:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//main-container全局样式
|
||||
.app-main{
|
||||
min-height: 100%
|
||||
}
|
||||
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* flex布局 */
|
||||
.flex_box {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex_row_between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex_row_center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex_row_around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.flex_row_end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.flex_col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex_col_top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.flex_col_bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.flex_wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex_shrink {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* 文字溢出隐藏 */
|
||||
.text_hidden {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.text_more {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.text_three {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scrollBar {
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin relative {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
#app {
|
||||
|
||||
// 主体区域
|
||||
.main-container {
|
||||
min-height: 100%;
|
||||
transition: margin-left .28s;
|
||||
margin-left: 180px;
|
||||
}
|
||||
|
||||
// 侧边栏
|
||||
.sidebar-container {
|
||||
.horizontal-collapse-transition {
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
||||
}
|
||||
transition: width .28s;
|
||||
width: 180px !important;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
font-size: 0px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.el-menu {
|
||||
border: none;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 36px !important;
|
||||
}
|
||||
.main-container {
|
||||
margin-left: 36px;
|
||||
}
|
||||
.submenu-title-noDropdown {
|
||||
padding-left: 10px !important;
|
||||
position: relative;
|
||||
.el-tooltip {
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
}
|
||||
.el-submenu {
|
||||
&>.el-submenu__title {
|
||||
padding-left: 10px !important;
|
||||
&>span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
.el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-container .nest-menu .el-submenu>.el-submenu__title,
|
||||
.sidebar-container .el-submenu .el-menu-item {
|
||||
min-width: 180px !important;
|
||||
background-color: $subMenuBg !important;
|
||||
&:hover {
|
||||
background-color: $menuHover !important;
|
||||
}
|
||||
}
|
||||
.el-menu--collapse .el-menu .el-submenu {
|
||||
min-width: 180px !important;
|
||||
}
|
||||
|
||||
//适配移动端
|
||||
.mobile {
|
||||
.main-container {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.sidebar-container {
|
||||
top: 50px;
|
||||
transition: transform .28s;
|
||||
width: 180px !important;
|
||||
}
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(-180px, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.withoutAnimation {
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
//globl transition css
|
||||
|
||||
/*fade*/
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.28s;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/*fade*/
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.breadcrumb-enter,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.breadcrumb-move {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.breadcrumb-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
//sidebar
|
||||
$menuBg:#304156;
|
||||
$subMenuBg:#1f2d3d;
|
||||
$menuHover:#001528;
|
||||
@@ -0,0 +1,15 @@
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
const TokenKey = 'Admin-Token'
|
||||
|
||||
export function getToken() {
|
||||
return Cookies.get(TokenKey)
|
||||
}
|
||||
|
||||
export function setToken(token) {
|
||||
return Cookies.set(TokenKey, token)
|
||||
}
|
||||
|
||||
export function removeToken() {
|
||||
return Cookies.remove(TokenKey)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import i18n from '@/lang'
|
||||
|
||||
const title = 'SOONWORKERDISK'
|
||||
|
||||
export default function getPageTitle(key) {
|
||||
const hasKey = i18n.te(`route.${key}`)
|
||||
if (hasKey) {
|
||||
const pageName = i18n.t(`route.${key}`)
|
||||
return `${pageName} - ${title}`
|
||||
}
|
||||
return `${title}`
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
// translate router.meta.title, be used in breadcrumb sidebar tagsview
|
||||
export function generateTitle(title) {
|
||||
const hasKey = this.$te('route.' + title)
|
||||
|
||||
if (hasKey) {
|
||||
// $t :this method from vue-i18n, inject in @/lang/index.js
|
||||
const translatedTitle = this.$t('route.' + title)
|
||||
|
||||
return translatedTitle
|
||||
}
|
||||
return title
|
||||
}
|
||||
@@ -0,0 +1,357 @@
|
||||
/**
|
||||
* Created by PanJiaChen on 16/11/18.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Parse the time to string
|
||||
* @param {(Object|string|number)} time
|
||||
* @param {string} cFormat
|
||||
* @returns {string | null}
|
||||
*/
|
||||
export function parseTime(time, cFormat) {
|
||||
if (arguments.length === 0 || !time) {
|
||||
return null
|
||||
}
|
||||
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
|
||||
let date
|
||||
if (typeof time === 'object') {
|
||||
date = time
|
||||
} else {
|
||||
if ((typeof time === 'string')) {
|
||||
if ((/^[0-9]+$/.test(time))) {
|
||||
// support "1548221490638"
|
||||
time = parseInt(time)
|
||||
} else {
|
||||
// support safari
|
||||
// https://stackoverflow.com/questions/4310953/invalid-date-in-safari
|
||||
time = time.replace(new RegExp(/-/gm), '/')
|
||||
}
|
||||
}
|
||||
|
||||
if ((typeof time === 'number') && (time.toString().length === 10)) {
|
||||
time = time * 1000
|
||||
}
|
||||
date = new Date(time)
|
||||
}
|
||||
const formatObj = {
|
||||
y: date.getFullYear(),
|
||||
m: date.getMonth() + 1,
|
||||
d: date.getDate(),
|
||||
h: date.getHours(),
|
||||
i: date.getMinutes(),
|
||||
s: date.getSeconds(),
|
||||
a: date.getDay()
|
||||
}
|
||||
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
|
||||
const value = formatObj[key]
|
||||
// Note: getDay() returns 0 on Sunday
|
||||
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
|
||||
return value.toString().padStart(2, '0')
|
||||
})
|
||||
return time_str
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} time
|
||||
* @param {string} option
|
||||
* @returns {string}
|
||||
*/
|
||||
export function formatTime(time, option) {
|
||||
if (('' + time).length === 10) {
|
||||
time = parseInt(time) * 1000
|
||||
} else {
|
||||
time = +time
|
||||
}
|
||||
const d = new Date(time)
|
||||
const now = Date.now()
|
||||
|
||||
const diff = (now - d) / 1000
|
||||
|
||||
if (diff < 30) {
|
||||
return '刚刚'
|
||||
} else if (diff < 3600) {
|
||||
// less 1 hour
|
||||
return Math.ceil(diff / 60) + '分钟前'
|
||||
} else if (diff < 3600 * 24) {
|
||||
return Math.ceil(diff / 3600) + '小时前'
|
||||
} else if (diff < 3600 * 24 * 2) {
|
||||
return '1天前'
|
||||
}
|
||||
if (option) {
|
||||
return parseTime(time, option)
|
||||
} else {
|
||||
return (
|
||||
d.getMonth() +
|
||||
1 +
|
||||
'月' +
|
||||
d.getDate() +
|
||||
'日' +
|
||||
d.getHours() +
|
||||
'时' +
|
||||
d.getMinutes() +
|
||||
'分'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} url
|
||||
* @returns {Object}
|
||||
*/
|
||||
export function getQueryObject(url) {
|
||||
url = url == null ? window.location.href : url
|
||||
const search = url.substring(url.lastIndexOf('?') + 1)
|
||||
const obj = {}
|
||||
const reg = /([^?&=]+)=([^?&=]*)/g
|
||||
search.replace(reg, (rs, $1, $2) => {
|
||||
const name = decodeURIComponent($1)
|
||||
let val = decodeURIComponent($2)
|
||||
val = String(val)
|
||||
obj[name] = val
|
||||
return rs
|
||||
})
|
||||
return obj
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} input value
|
||||
* @returns {number} output value
|
||||
*/
|
||||
export function byteLength(str) {
|
||||
// returns the byte length of an utf8 string
|
||||
let s = str.length
|
||||
for (var i = str.length - 1; i >= 0; i--) {
|
||||
const code = str.charCodeAt(i)
|
||||
if (code > 0x7f && code <= 0x7ff) s++
|
||||
else if (code > 0x7ff && code <= 0xffff) s += 2
|
||||
if (code >= 0xDC00 && code <= 0xDFFF) i--
|
||||
}
|
||||
return s
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array} actual
|
||||
* @returns {Array}
|
||||
*/
|
||||
export function cleanArray(actual) {
|
||||
const newArray = []
|
||||
for (let i = 0; i < actual.length; i++) {
|
||||
if (actual[i]) {
|
||||
newArray.push(actual[i])
|
||||
}
|
||||
}
|
||||
return newArray
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Object} json
|
||||
* @returns {Array}
|
||||
*/
|
||||
export function param(json) {
|
||||
if (!json) return ''
|
||||
return cleanArray(
|
||||
Object.keys(json).map(key => {
|
||||
if (json[key] === undefined) return ''
|
||||
return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
|
||||
})
|
||||
).join('&')
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} url
|
||||
* @returns {Object}
|
||||
*/
|
||||
export function param2Obj(url) {
|
||||
const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
|
||||
if (!search) {
|
||||
return {}
|
||||
}
|
||||
const obj = {}
|
||||
const searchArr = search.split('&')
|
||||
searchArr.forEach(v => {
|
||||
const index = v.indexOf('=')
|
||||
if (index !== -1) {
|
||||
const name = v.substring(0, index)
|
||||
const val = v.substring(index + 1, v.length)
|
||||
obj[name] = val
|
||||
}
|
||||
})
|
||||
return obj
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} val
|
||||
* @returns {string}
|
||||
*/
|
||||
export function html2Text(val) {
|
||||
const div = document.createElement('div')
|
||||
div.innerHTML = val
|
||||
return div.textContent || div.innerText
|
||||
}
|
||||
|
||||
/**
|
||||
* Merges two objects, giving the last one precedence
|
||||
* @param {Object} target
|
||||
* @param {(Object|Array)} source
|
||||
* @returns {Object}
|
||||
*/
|
||||
export function objectMerge(target, source) {
|
||||
if (typeof target !== 'object') {
|
||||
target = {}
|
||||
}
|
||||
if (Array.isArray(source)) {
|
||||
return source.slice()
|
||||
}
|
||||
Object.keys(source).forEach(property => {
|
||||
const sourceProperty = source[property]
|
||||
if (typeof sourceProperty === 'object') {
|
||||
target[property] = objectMerge(target[property], sourceProperty)
|
||||
} else {
|
||||
target[property] = sourceProperty
|
||||
}
|
||||
})
|
||||
return target
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} element
|
||||
* @param {string} className
|
||||
*/
|
||||
export function toggleClass(element, className) {
|
||||
if (!element || !className) {
|
||||
return
|
||||
}
|
||||
let classString = element.className
|
||||
const nameIndex = classString.indexOf(className)
|
||||
if (nameIndex === -1) {
|
||||
classString += '' + className
|
||||
} else {
|
||||
classString =
|
||||
classString.substr(0, nameIndex) +
|
||||
classString.substr(nameIndex + className.length)
|
||||
}
|
||||
element.className = classString
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} type
|
||||
* @returns {Date}
|
||||
*/
|
||||
export function getTime(type) {
|
||||
if (type === 'start') {
|
||||
return new Date().getTime() - 3600 * 1000 * 24 * 90
|
||||
} else {
|
||||
return new Date(new Date().toDateString())
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Function} func
|
||||
* @param {number} wait
|
||||
* @param {boolean} immediate
|
||||
* @return {*}
|
||||
*/
|
||||
export function debounce(func, wait, immediate) {
|
||||
let timeout, args, context, timestamp, result
|
||||
|
||||
const later = function() {
|
||||
// 据上一次触发时间间隔
|
||||
const last = +new Date() - timestamp
|
||||
|
||||
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
|
||||
if (last < wait && last > 0) {
|
||||
timeout = setTimeout(later, wait - last)
|
||||
} else {
|
||||
timeout = null
|
||||
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
|
||||
if (!immediate) {
|
||||
result = func.apply(context, args)
|
||||
if (!timeout) context = args = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return function(...args) {
|
||||
context = this
|
||||
timestamp = +new Date()
|
||||
const callNow = immediate && !timeout
|
||||
// 如果延时不存在，重新设定延时
|
||||
if (!timeout) timeout = setTimeout(later, wait)
|
||||
if (callNow) {
|
||||
result = func.apply(context, args)
|
||||
context = args = null
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This is just a simple version of deep copy
|
||||
* Has a lot of edge cases bug
|
||||
* If you want to use a perfect deep copy, use lodash's _.cloneDeep
|
||||
* @param {Object} source
|
||||
* @returns {Object}
|
||||
*/
|
||||
export function deepClone(source) {
|
||||
if (!source && typeof source !== 'object') {
|
||||
throw new Error('error arguments', 'deepClone')
|
||||
}
|
||||
const targetObj = source.constructor === Array ? [] : {}
|
||||
Object.keys(source).forEach(keys => {
|
||||
if (source[keys] && typeof source[keys] === 'object') {
|
||||
targetObj[keys] = deepClone(source[keys])
|
||||
} else {
|
||||
targetObj[keys] = source[keys]
|
||||
}
|
||||
})
|
||||
return targetObj
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array} arr
|
||||
* @returns {Array}
|
||||
*/
|
||||
export function uniqueArr(arr) {
|
||||
return Array.from(new Set(arr))
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
export function createUniqueString() {
|
||||
const timestamp = +new Date() + ''
|
||||
const randomNum = parseInt((1 + Math.random()) * 65536) + ''
|
||||
return (+(randomNum + timestamp)).toString(32)
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if an element has a class
|
||||
* @param {HTMLElement} elm
|
||||
* @param {string} cls
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function hasClass(ele, cls) {
|
||||
return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
|
||||
}
|
||||
|
||||
/**
|
||||
* Add class to element
|
||||
* @param {HTMLElement} elm
|
||||
* @param {string} cls
|
||||
*/
|
||||
export function addClass(ele, cls) {
|
||||
if (!hasClass(ele, cls)) ele.className += ' ' + cls
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove class from element
|
||||
* @param {HTMLElement} elm
|
||||
* @param {string} cls
|
||||
*/
|
||||
export function removeClass(ele, cls) {
|
||||
if (hasClass(ele, cls)) {
|
||||
const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
|
||||
ele.className = ele.className.replace(reg, ' ')
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
*Created by PanJiaChen on 16/11/29.
|
||||
* @param {Sting} url
|
||||
* @param {Sting} title
|
||||
* @param {Number} w
|
||||
* @param {Number} h
|
||||
*/
|
||||
export default function openWindow(url, title, w, h) {
|
||||
// Fixes dual-screen position Most browsers Firefox
|
||||
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left
|
||||
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top
|
||||
|
||||
const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width
|
||||
const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height
|
||||
|
||||
const left = ((width / 2) - (w / 2)) + dualScreenLeft
|
||||
const top = ((height / 2) - (h / 2)) + dualScreenTop
|
||||
const newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left)
|
||||
|
||||
// Puts focus on the newWindow
|
||||
if (window.focus) {
|
||||
newWindow.focus()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import store from '@/store'
|
||||
|
||||
/**
|
||||
* @param {Array} value
|
||||
* @returns {Boolean}
|
||||
* @example see @/views/permission/directive.vue
|
||||
*/
|
||||
export default function checkPermission(value) {
|
||||
if (value && value instanceof Array && value.length > 0) {
|
||||
const roles = store.getters && store.getters.roles
|
||||
const permissionRoles = value
|
||||
|
||||
const hasPermission = roles.some(role => {
|
||||
return permissionRoles.includes(role)
|
||||
})
|
||||
return hasPermission
|
||||
} else {
|
||||
console.error(`need roles! Like v-permission="['admin','editor']"`)
|
||||
return false
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import axios from 'axios'
|
||||
import { MessageBox, Message } from 'element-ui'
|
||||
import store from '@/store'
|
||||
import { getToken } from '@/utils/auth'
|
||||
|
||||
// create an axios instance
|
||||
const service = axios.create({
|
||||
baseURL: process.env.BASE_API, // url = base url + request url
|
||||
// withCredentials: true, // send cookies when cross-domain requests
|
||||
timeout: 5000 // request timeout
|
||||
})
|
||||
|
||||
// request interceptor
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
// do something before request is sent
|
||||
|
||||
if (store.getters.token) {
|
||||
// let each request carry token
|
||||
// ['X-Token'] is a custom headers key
|
||||
// please modify it according to the actual situation
|
||||
config.headers['X-Token'] = getToken()
|
||||
}
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
// do something with request error
|
||||
console.log(error) // for debug
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// response interceptor
|
||||
service.interceptors.response.use(
|
||||
/**
|
||||
* If you want to get http information such as headers or status
|
||||
* Please return response => response
|
||||
*/
|
||||
|
||||
/**
|
||||
* Determine the request status by custom code
|
||||
* Here is just an example
|
||||
* You can also judge the status by HTTP Status Code
|
||||
*/
|
||||
response => {
|
||||
const res = response.data
|
||||
|
||||
// if the custom code is not 20000, it is judged as an error.
|
||||
if (res.code !== 20000) {
|
||||
Message({
|
||||
message: res.message || 'Error',
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
})
|
||||
|
||||
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
|
||||
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
|
||||
// to re-login
|
||||
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
|
||||
confirmButtonText: 'Re-Login',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
store.dispatch('user/resetToken').then(() => {
|
||||
location.reload()
|
||||
})
|
||||
})
|
||||
}
|
||||
return Promise.reject(new Error(res.message || 'Error'))
|
||||
} else {
|
||||
return res
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log('err' + error) // for debug
|
||||
Message({
|
||||
message: error.message,
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
})
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default service
|
||||
@@ -0,0 +1,58 @@
|
||||
Math.easeInOutQuad = function(t, b, c, d) {
|
||||
t /= d / 2
|
||||
if (t < 1) {
|
||||
return c / 2 * t * t + b
|
||||
}
|
||||
t--
|
||||
return -c / 2 * (t * (t - 2) - 1) + b
|
||||
}
|
||||
|
||||
// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
|
||||
var requestAnimFrame = (function() {
|
||||
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
|
||||
})()
|
||||
|
||||
/**
|
||||
* Because it's so fucking difficult to detect the scrolling element, just move them all
|
||||
* @param {number} amount
|
||||
*/
|
||||
function move(amount) {
|
||||
document.documentElement.scrollTop = amount
|
||||
document.body.parentNode.scrollTop = amount
|
||||
document.body.scrollTop = amount
|
||||
}
|
||||
|
||||
function position() {
|
||||
return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} to
|
||||
* @param {number} duration
|
||||
* @param {Function} callback
|
||||
*/
|
||||
export function scrollTo(to, duration, callback) {
|
||||
const start = position()
|
||||
const change = to - start
|
||||
const increment = 20
|
||||
let currentTime = 0
|
||||
duration = (typeof (duration) === 'undefined') ? 500 : duration
|
||||
var animateScroll = function() {
|
||||
// increment the time
|
||||
currentTime += increment
|
||||
// find the value with the quadratic in-out easing function
|
||||
var val = Math.easeInOutQuad(currentTime, start, change, duration)
|
||||
// move the document.body
|
||||
move(val)
|
||||
// do the animation unless its over
|
||||
if (currentTime < duration) {
|
||||
requestAnimFrame(animateScroll)
|
||||
} else {
|
||||
if (callback && typeof (callback) === 'function') {
|
||||
// the animation is done so lets callback
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
animateScroll()
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
/**
|
||||
* Created by PanJiaChen on 16/11/18.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function isExternal(path) {
|
||||
return /^(https?:|mailto:|tel:)/.test(path)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validUsername(str) {
|
||||
const valid_map = ['admin', 'editor']
|
||||
return valid_map.indexOf(str.trim()) >= 0
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} url
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validURL(url) {
|
||||
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.,?'\\+&%$#=~_-]+))*$/
|
||||
return reg.test(url)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validLowerCase(str) {
|
||||
const reg = /^[a-z]+$/
|
||||
return reg.test(str)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validUpperCase(str) {
|
||||
const reg = /^[A-Z]+$/
|
||||
return reg.test(str)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validAlphabets(str) {
|
||||
const reg = /^[A-Za-z]+$/
|
||||
return reg.test(str)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} email
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validEmail(email) {
|
||||
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,}))$/
|
||||
return reg.test(email)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function isString(str) {
|
||||
if (typeof str === 'string' || str instanceof String) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array} arg
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function isArray(arg) {
|
||||
if (typeof Array.isArray === 'undefined') {
|
||||
return Object.prototype.toString.call(arg) === '[object Array]'
|
||||
}
|
||||
return Array.isArray(arg)
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div style="background:#f0f2f5;margin-top: -20px;">
|
||||
<div class="wscn-http404">
|
||||
<div class="pic-404">
|
||||
<img class="pic-404__parent" :src="img_404" alt="404">
|
||||
<img class="pic-404__child left" :src="img_404_cloud" alt="404">
|
||||
<img class="pic-404__child mid" :src="img_404_cloud" alt="404">
|
||||
<img class="pic-404__child right" :src="img_404_cloud" alt="404">
|
||||
</div>
|
||||
<div class="bullshit">
|
||||
<div class="bullshit__oops">OOPS!</div>
|
||||
<div class="bullshit__info">版权所有<a class="link-type" href="https://wallstreetcn.com" target='_blank'>华尔街见闻</a></div>
|
||||
<div class="bullshit__headline">{{ message }}</div>
|
||||
<div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
|
||||
<a href="/" class="bullshit__return-home">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import img_404 from '@/assets/404_images/404.png'
|
||||
import img_404_cloud from '@/assets/404_images/404_cloud.png'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
img_404,
|
||||
img_404_cloud
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
message() {
|
||||
return '特朗普说这个页面你不能进......'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.wscn-http404 {
|
||||
position: relative;
|
||||
width: 1200px;
|
||||
margin: 20px auto 60px;
|
||||
padding: 0 100px;
|
||||
overflow: hidden;
|
||||
.pic-404 {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 600px;
|
||||
padding: 150px 0;
|
||||
overflow: hidden;
|
||||
&__parent {
|
||||
width: 100%;
|
||||
}
|
||||
&__child {
|
||||
position: absolute;
|
||||
&.left {
|
||||
width: 80px;
|
||||
top: 17px;
|
||||
left: 220px;
|
||||
opacity: 0;
|
||||
animation-name: cloudLeft;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
&.mid {
|
||||
width: 46px;
|
||||
top: 10px;
|
||||
left: 420px;
|
||||
opacity: 0;
|
||||
animation-name: cloudMid;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
&.right {
|
||||
width: 62px;
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
opacity: 0;
|
||||
animation-name: cloudRight;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
@keyframes cloudLeft {
|
||||
0% {
|
||||
top: 17px;
|
||||
left: 220px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 33px;
|
||||
left: 188px;
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
top: 81px;
|
||||
left: 92px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 97px;
|
||||
left: 60px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes cloudMid {
|
||||
0% {
|
||||
top: 10px;
|
||||
left: 420px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 40px;
|
||||
left: 360px;
|
||||
opacity: 1;
|
||||
}
|
||||
70% {
|
||||
top: 130px;
|
||||
left: 180px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 160px;
|
||||
left: 120px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes cloudRight {
|
||||
0% {
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 120px;
|
||||
left: 460px;
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
top: 180px;
|
||||
left: 340px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 200px;
|
||||
left: 300px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bullshit {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 300px;
|
||||
padding: 150px 0;
|
||||
overflow: hidden;
|
||||
&__oops {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
color: #1482f0;
|
||||
opacity: 0;
|
||||
margin-bottom: 20px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__headline {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
color: #1482f0;
|
||||
opacity: 0;
|
||||
margin-bottom: 10px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__info {
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
color: grey;
|
||||
opacity: 0;
|
||||
margin-bottom: 30px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__return-home {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 110px;
|
||||
height: 36px;
|
||||
background: #1482f0;
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
opacity: 0;
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
transform: translateY(60px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,662 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<img class="login_bg" src="@/assets/images/index.png" />
|
||||
<div style="height: 100%; position: relative; display: none;">
|
||||
<div
|
||||
v-if="beginStep && parseInt(currentStep) >= 0 && parseInt(currentStep) < 8"
|
||||
class="bg_box"
|
||||
style="position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5)"
|
||||
></div>
|
||||
<div style="height: 100%; width: 100%; display: flex">
|
||||
<div :span="3" style="height: 100%; width: 164px">
|
||||
<div class="grid-content bg-purple left">
|
||||
<div class="title">
|
||||
{{ $t('index.wordSpace') }}
|
||||
</div>
|
||||
<!-- @click="() => (printData = index)" -->
|
||||
<div class="card" v-for="item of infoData" :key="item.PrinterID" style="background-color: #f5f5f5; text-align: left">
|
||||
<span style="font-size: 18px; margin-left: 40px">{{ getPrintName(item.PrinterID, true) }}</span>
|
||||
<span style="font-size: 9px">{{ item.PrinterType == '-1' ? $t('index.workspacenodata') : item.PrinterType }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :span="18" style="height: 100%; width: calc(100% - 328px)">
|
||||
<div class="grid-content bg-purple-light mid" id="rte" style="position: relative">
|
||||
<div class="title" style="position: relative; height: 45px; display: flex; justify-content: space-between">
|
||||
<el-popover v-if="guideStep" :placement="guideStep[0].placement" width="250" trigger="manual" v-model="guideStep[0].show">
|
||||
<div class="guide_box">
|
||||
<div class="guide_title">
|
||||
{{ $t('guide.title') }}<span>（{{ parseInt(currentStep) + 1 }}/{{ guideStep.length }}）</span>
|
||||
</div>
|
||||
<div class="guide_desc">{{ $t(`guide.step1`) }}</div>
|
||||
<div class="guide_btns">
|
||||
<el-button @click="exitGuide" class="guide_btn1" size="mini" type="text">{{ $t('guide.skip') }}</el-button>
|
||||
<el-button v-if="parseInt(currentStep) > 0" @click="prevStep" class="guide_btn1" size="mini">{{ $t('guide.prev') }}</el-button>
|
||||
<el-button @click="nextStep" class="guide_btn2" size="mini" type="primary">{{ parseInt(currentStep) == guideStep.length - 1 ? $t('guide.complete') : $t('guide.next') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="reference" :class="{ guide_body: beginStep && currentStep == 0 }" class="switch" style="position: relative; left: 0; top: 3px">
|
||||
<el-switch active-color="#13ce66" inactive-color="#ff4949" @change="handleOpenSwitch" :value="state"> </el-switch>
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-popover v-if="guideStep" :placement="guideStep[1].placement" width="250" trigger="manual" v-model="guideStep[1].show">
|
||||
<div class="guide_box">
|
||||
<div class="guide_title">
|
||||
{{ $t('guide.title') }}<span>（{{ parseInt(currentStep) + 1 }}/{{ guideStep.length }}）</span>
|
||||
</div>
|
||||
<div class="guide_desc">{{ $t(`guide.step2`) }}</div>
|
||||
<div class="guide_btns">
|
||||
<el-button @click="exitGuide" class="guide_btn1" size="mini" type="text">{{ $t('guide.skip') }}</el-button>
|
||||
<el-button v-if="parseInt(currentStep) > 0" @click="prevStep" class="guide_btn1" size="mini">{{ $t('guide.prev') }}</el-button>
|
||||
<el-button @click="nextStep" class="guide_btn2" size="mini" type="primary">{{ currentStep == guideStep.length - 1 ? $t('guide.complete') : $t('guide.next') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="reference" :class="{ guide_body: beginStep && currentStep == 1 }" class="information" style="font-size: 15px; display: flex; gap: 25px; position: relative; top: 5px">
|
||||
<div style="display: inline-block">
|
||||
<div style="text-decoration: underline">
|
||||
{{ $t('main.doneCopyNum') }}
|
||||
</div>
|
||||
<div>{{ doneCopyNum }}</div>
|
||||
</div>
|
||||
<div style="display: inline-block">
|
||||
<div style="text-decoration: underline">
|
||||
{{ $t('main.cancelCopyNum') }}
|
||||
</div>
|
||||
<div>{{ cancelCopyNum }}</div>
|
||||
</div>
|
||||
<div style="display: inline-block">
|
||||
<div style="text-decoration: underline">
|
||||
{{ $t('main.failNum') }}
|
||||
</div>
|
||||
<div>{{ failNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-popover v-if="guideStep" :placement="guideStep[2].placement" width="250" trigger="manual" v-model="guideStep[2].show">
|
||||
<div class="guide_box">
|
||||
<div class="guide_title">
|
||||
{{ $t('guide.title') }}<span>（{{ parseInt(currentStep) + 1 }}/{{ guideStep.length }}）</span>
|
||||
</div>
|
||||
<div class="guide_desc">{{ $t(`guide.step3`) }}</div>
|
||||
<div class="guide_btns">
|
||||
<el-button @click="exitGuide" class="guide_btn1" size="mini" type="text">{{ $t('guide.skip') }}</el-button>
|
||||
<el-button v-if="parseInt(currentStep) > 0" @click="prevStep" class="guide_btn1" size="mini">{{ $t('guide.prev') }}</el-button>
|
||||
<el-button @click="nextStep" class="guide_btn2" size="mini" type="primary">{{ currentStep == guideStep.length - 1 ? $t('guide.complete') : $t('guide.next') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center" class="add" slot="reference" :class="{ guide_body: beginStep && currentStep == 2 }">
|
||||
<span style="font-size: 18px; line-height: 45px">{{ $t('main.submitTask') }}</span>
|
||||
<el-popover v-if="guideStep" :placement="guideStep[7].placement" width="250" trigger="manual" v-model="guideStep[7].show">
|
||||
<div class="guide_box">
|
||||
<div class="guide_title">
|
||||
{{ $t('guide.title') }}<span>（{{ parseInt(currentStep) + 1 }}/{{ guideStep.length }}）</span>
|
||||
</div>
|
||||
<div class="guide_desc">{{ $t(`guide.step8`) }}</div>
|
||||
<div class="guide_btns">
|
||||
<el-button @click="exitGuide" class="guide_btn1" size="mini" type="text">{{ $t('guide.skip') }}</el-button>
|
||||
<el-button v-if="parseInt(currentStep) > 0" @click="prevStep" class="guide_btn1" size="mini">{{ $t('guide.prev') }}</el-button>
|
||||
<el-button @click="nextStep" class="guide_btn2" size="mini" type="primary">{{ currentStep == guideStep.length - 1 ? $t('guide.complete') : $t('guide.next') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 10px" slot="reference" :class="{ guide_body: beginStep && currentStep == 7 }">
|
||||
<el-button type="primary" @click="newWork" :disabled="infoData.length == 0 && state == false">
|
||||
{{ $t('index.newWork') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<el-button type="primary" @click="newNetWork" v-if="false">
|
||||
{{ $t('index.newWork') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="openWork()" v-if="true" :disabled="infoData.length == 0 && state == false">
|
||||
{{ $t('admin.openWork') }}
|
||||
</el-button>
|
||||
<!--
|
||||
<el-select v-model="selectLan">
|
||||
<el-option
|
||||
v-for="item in languages"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option> </el-select
|
||||
>
|
||||
<el-button icon="el-icon-video-play" @click="start_job">启动任务</el-button>
|
||||
<el-button icon="el-icon-video-pause" @click="suspend_job">暂停任务</el-button>
|
||||
<el-button icon="el-icon-circle-close">停止任务</el-button>-->
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="user">
|
||||
<span style="margin-right: 20px">{{ $t('admin.hello') }} {{ user }}</span>
|
||||
<router-link to="/admin" v-if="isAdmin">{{ $t('main.adminMange') }}</router-link>
|
||||
<router-link to="/">{{ $t('main.out') }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<el-popover v-if="guideStep" :placement="guideStep[4].placement" width="250" trigger="manual" v-model="guideStep[4].show">
|
||||
<div class="guide_box">
|
||||
<div class="guide_title">
|
||||
{{ $t('guide.title') }}<span>（{{ parseInt(currentStep) + 1 }}/{{ guideStep.length }}）</span>
|
||||
</div>
|
||||
<div class="guide_desc">{{ $t(`guide.step5`) }}</div>
|
||||
<div class="guide_btns">
|
||||
<el-button @click="exitGuide" class="guide_btn1" size="mini" type="text">{{ $t('guide.skip') }}</el-button>
|
||||
<el-button v-if="parseInt(currentStep) > 0" @click="prevStep" class="guide_btn1" size="mini">{{ $t('guide.prev') }}</el-button>
|
||||
<el-button @click="nextStep" class="guide_btn2" size="mini" type="primary">{{ currentStep == guideStep.length - 1 ? $t('guide.complete') : $t('guide.next') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brief" slot="reference" :class="{ guide_body: beginStep && currentStep == 4 }">
|
||||
<el-row :gutter="20" style="height: 100%">
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<div class="grid-content bg-purple b_left" style="padding-top: 1px !important; display: flex; align-items: center">
|
||||
<!-- <div class="b_title">{{ $t("main.systemInformation") }}</div> -->
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||||
<img v-if="os.CardsoonModel" :src="os.CardsoonModel.indexOf(`TH80N`) != -1 ? N80N : N800N" width="150" height="95" />
|
||||
<span style="font-weight: bold; font-size: 18px">{{ $t('main.systemInformation') }}</span>
|
||||
</div>
|
||||
<div style="margin-left: 20px">
|
||||
<div class="item">{{ $t('main.deviceType') }}{{ os.CardsoonModel }}</div>
|
||||
<div class="item">{{ $t('main.serialNumber') }}{{ os.SystemSn }}</div>
|
||||
<div class="item">{{ $t('main.hostName') }}{{ os.hostname }}</div>
|
||||
<div class="item">{{ $t('main.hostIp') }}{{ os.ip }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<div class="grid-content bg-purple b_mid" style="padding-top: 1px !important; display: flex; align-items: center">
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||||
<span style="font-weight: bold; font-size: 18px">{{ $t('main.hardwareConfiguration') }}</span>
|
||||
</div>
|
||||
<div style="margin-left: 20px">
|
||||
<!-- <div class="item">
|
||||
{{ $t("main.hardwareConfiguration") }}
|
||||
</div> -->
|
||||
<div class="item">{{ $t('main.Cpu') }}{{ os.cpu }}</div>
|
||||
<div class="item">{{ $t('main.Memory') }}{{ os.ram }}</div>
|
||||
<div class="item">{{ $t('main.hardDrive') }}{{ os.HD }}</div>
|
||||
<div class="item">
|
||||
{{ $t('main.cacheSpace') }}：{{ os.remainCacheSpace }} /
|
||||
{{ os.totalCacheSpace }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-popover>
|
||||
<!-- <div
|
||||
class="brief"
|
||||
v-if="infoData.length != 0 && false"
|
||||
style="margin-top: 20px; height: 200px"
|
||||
>
|
||||
<el-row :gutter="10" style="height: 100%">
|
||||
<el-col :span="6" style="height: 100%">
|
||||
<div
|
||||
class="grid-content bg-purple b_left"
|
||||
style="padding-top: 1px !important"
|
||||
>
|
||||
<div class="b_title">
|
||||
{{ $t("index.systemState") }}
|
||||
</div>
|
||||
<div style="margin-top: 30px">
|
||||
<div class="item">
|
||||
{{ $t("index.wordSpaceOnline")
|
||||
}}{{
|
||||
printerStatus[infoData[printData].PrinterID]
|
||||
? $t(
|
||||
`index.${
|
||||
printerStatus[infoData[printData].PrinterID]
|
||||
}`
|
||||
)
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
<div class="item">
|
||||
{{ $t("index.equipModel")
|
||||
}}{{ infoData[printData].ModeName.replace("Fagoo", "") }}
|
||||
</div>
|
||||
<div class="item">
|
||||
{{ $t("index.series") }}{{ infoData[printData].SerialNo }}
|
||||
</div>
|
||||
<div class="item">
|
||||
{{ $t("index.machineVers")
|
||||
}}{{ infoData[printData].FirewareVersion }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5" style="height: 100%">
|
||||
<div
|
||||
class="grid-content bg-purple b_left"
|
||||
style="padding-top: 1px !important; border-right: 0"
|
||||
>
|
||||
<div class="b_title"></div>
|
||||
<div style="margin-top: 30px">
|
||||
<div class="item">
|
||||
{{ $t("index.numbers") }}{{ infoData[printData].CardNum }}
|
||||
</div>
|
||||
<div class="item">
|
||||
{{ $t("index.dice")
|
||||
}}{{
|
||||
infoData[printData].DualSide == 1
|
||||
? this.$t("index.twoDice")
|
||||
: this.infoData[printData] != null
|
||||
? this.$t("index.sigleDice")
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
<div class="item">
|
||||
{{ $t("index.ribbonType")
|
||||
}}{{ infoData[printData].RibbonType }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="5" style="height: 100%">
|
||||
<div
|
||||
class="grid-content bg-purple b_mid"
|
||||
style="
|
||||
padding-top: 1px !important;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<el-progress
|
||||
type="circle"
|
||||
:format="ribbonFormat"
|
||||
:key="printData"
|
||||
width="75"
|
||||
:percentage="
|
||||
infoData[printData].RibbonAmount == undefined ||
|
||||
infoData[printData].RibbonAmount == '0'
|
||||
? 0
|
||||
: (
|
||||
(infoData[printData].RibbonAmount /
|
||||
getRibbonAmount) *
|
||||
100
|
||||
).toFixed(0)
|
||||
"
|
||||
:color="'#67C23A'"
|
||||
></el-progress>
|
||||
|
||||
<div style="margin-left: 20px">
|
||||
<div>{{ $t("index.ribbonNumber") }}</div>
|
||||
<div>
|
||||
{{ infoData[printData].RibbonAmount }}/{{
|
||||
getRibbonAmount
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" style="height: 100%">
|
||||
<div
|
||||
class="grid-content bg-purple b_mid"
|
||||
style="
|
||||
padding-top: 1px !important;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<el-progress
|
||||
type="circle"
|
||||
:key="printData"
|
||||
:format="remaCapaFormat"
|
||||
width="75"
|
||||
:percentage="
|
||||
infoData[printData].PrinterRemaCapa == undefined ||
|
||||
infoData[printData].PrinterRemaCapa == '0'
|
||||
? 0
|
||||
: (
|
||||
(infoData[printData].PrinterRemaCapa /
|
||||
getPrinterRemaCapaAmount) *
|
||||
100
|
||||
).toFixed(0)
|
||||
"
|
||||
:color="'#67C23A'"
|
||||
></el-progress>
|
||||
<div style="margin-left: 20px">
|
||||
<div>
|
||||
{{ $t("index.inCardState") }}
|
||||
</div>
|
||||
<div>
|
||||
<el-button-group>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="() => printerTypeChange('auto')"
|
||||
>{{ $t("index.autoRefresh") }}</el-button
|
||||
>
|
||||
<el-dropdown @command="handleTypeCommand">
|
||||
<el-button type="primary" size="mini"
|
||||
>{{ $t("index.refreshMore")
|
||||
}}<i class="el-icon-arrow-down el-icon--right"></i
|
||||
></el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
v-for="item in _PrinterTypeList"
|
||||
:command="item.value"
|
||||
>{{ item.label }}</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-button-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div> -->
|
||||
<el-popover v-if="guideStep" :placement="guideStep[5].placement" width="250" trigger="manual" v-model="guideStep[5].show">
|
||||
<div class="guide_box">
|
||||
<div class="guide_title">
|
||||
{{ $t('guide.title') }}<span>（{{ parseInt(currentStep) + 1 }}/{{ guideStep.length }}）</span>
|
||||
</div>
|
||||
<div class="guide_desc">{{ $t(`guide.step6`) }}</div>
|
||||
<div class="guide_btns">
|
||||
<el-button @click="exitGuide" class="guide_btn1" size="mini" type="text">{{ $t('guide.skip') }}</el-button>
|
||||
<el-button v-if="parseInt(currentStep) > 0" @click="prevStep" class="guide_btn1" size="mini">{{ $t('guide.prev') }}</el-button>
|
||||
<el-button @click="nextStep" class="guide_btn2" size="mini" type="primary">{{ currentStep == guideStep.length - 1 ? $t('guide.complete') : $t('guide.next') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="reference" :class="{ guide_body: beginStep && currentStep == 5 }" class="machines work" style="height: 130px; margin-top: 10px">
|
||||
<el-table :data="infoData" max-height="180" size="mini" style="width: 100%" :empty-text="$t('index.nodata')" row-class-name="rowclass">
|
||||
<el-table-column prop="gzz" :label="$t('main.tableMachine')" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ getPrintName(scope.row.PrinterID, true) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" :label="$t('main.tableState')" min-width="80">
|
||||
<template slot-scope="scope">{{ $t('main.tableOnline') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="SerialNo" :label="$t('main.tableSerialNo')" min-width="80"> </el-table-column>
|
||||
<el-table-column prop="RibbonType" :label="$t('main.tableRibbonType')" min-width="80"> </el-table-column>
|
||||
<el-table-column prop="RibbonAmount" :label="$t('main.tableRibbonAmount')" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-progress
|
||||
:color="customColors"
|
||||
:width="45"
|
||||
define-back-color="#ebeef5"
|
||||
:format="() => scope.row.RibbonAmount"
|
||||
:stroke-width="3"
|
||||
:percentage="
|
||||
scope.row.RibbonAmount == undefined || scope.row.RibbonAmount == '0'
|
||||
? 0
|
||||
: parseFloat(((scope.row.RibbonAmount / getRibbonAmount(scope.row.ModeName, scope.row.RibbonType)) * 100).toFixed(0))
|
||||
"
|
||||
></el-progress>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="PrinterType" :label="$t('main.tablePrinterType')" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-dropdown trigger="click" @command="(e) => handleMachineCommand(e, scope.row.PrinterID)">
|
||||
<span class="el-dropdown-link" style="color: #000; font-size: 12px"> {{ scope.row.PrinterType }}<i class="el-icon-arrow-down el-icon--right"></i> </span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="auto">
|
||||
<span style="color: #000; font-size: 12px">{{ $t('main.autoSetting') }}</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="null">
|
||||
<span style="color: #000; font-size: 12px">{{ $t('main.cancelSetting') }}</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-for="item in _PrinterTypeList" :key="item.value" :command="item.value">
|
||||
<span style="color: #000; font-size: 12px">{{ item.label }}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="PrinterRemaCapa" :label="$t('main.tablePrinterRemaCapa')" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-progress
|
||||
:color="customColors"
|
||||
:width="45"
|
||||
define-back-color="#ebeef5"
|
||||
:format="() => (scope.row.PrinterRemaCapa > 0 ? scope.row.PrinterRemaCapa : 0)"
|
||||
:stroke-width="3"
|
||||
:percentage="
|
||||
scope.row.PrinterRemaCapa == undefined || scope.row.PrinterRemaCapa == '0'
|
||||
? 0
|
||||
: parseFloat((((scope.row.PrinterRemaCapa > 0 ? scope.row.PrinterRemaCapa : 0) / getPrinterRemaCapaAmount(scope.row.ModeName)) * 100).toFixed(0))
|
||||
"
|
||||
></el-progress>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-popover v-if="guideStep" :placement="guideStep[6].placement" width="250" trigger="manual" v-model="guideStep[6].show">
|
||||
<div class="guide_box">
|
||||
<div class="guide_title">
|
||||
{{ $t('guide.title') }}<span>（{{ parseInt(currentStep) + 1 }}/{{ guideStep.length }}）</span>
|
||||
</div>
|
||||
<div class="guide_desc">{{ $t(`guide.step7`) }}</div>
|
||||
<div class="guide_btns">
|
||||
<el-button @click="exitGuide" class="guide_btn1" size="mini" type="text">{{ $t('guide.skip') }}</el-button>
|
||||
<el-button v-if="parseInt(currentStep) > 0" @click="prevStep" class="guide_btn1" size="mini">{{ $t('guide.prev') }}</el-button>
|
||||
<el-button @click="nextStep" class="guide_btn2" size="mini" type="primary">{{ currentStep == guideStep.length - 1 ? $t('guide.complete') : $t('guide.next') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="reference" :class="{ guide_body: beginStep && currentStep == 6 }">
|
||||
<el-tabs v-model="activeName" style="background-color: #fff; padding-bottom: 20px; max-height: 240px; margin-top: 10px 20px">
|
||||
<el-tab-pane :label="$t(`index.workList`)" name="first">
|
||||
<div class="work">
|
||||
<el-table :data="tasks" max-height="180" style="width: 100%" size="mini" :empty-text="$t('index.nodata')" row-class-name="rowclass">
|
||||
<el-table-column label="#" min-width="38">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="jId" :label="$t('index.wordID')" min-width="130"> </el-table-column>
|
||||
<el-table-column prop="DataSource" :label="$t('index.wordOrigin')" min-width="85"> </el-table-column>
|
||||
<el-table-column :label="$t('index.wordSpace')" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
{{ getPrintName(scope.row.PrinterID, true) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('main.USBType')" min-width="90">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.PrinterType }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="80" prop="TaskCapacity" :label="$t('main.TaskCapacity')"> </el-table-column>
|
||||
<el-table-column v-if="false" prop="DataDir" :label="$t('main.taskFile')"> </el-table-column>
|
||||
<el-table-column prop="CreateTime" :label="$t('index.createTime')" min-width="120"> </el-table-column>
|
||||
<el-table-column
|
||||
v-if="false"
|
||||
prop="usb_version"
|
||||
:label="$t('main.USBVersion')"
|
||||
:filters="[
|
||||
{ text: '2.0', value: 2 },
|
||||
{ text: '3.0', value: 3 }
|
||||
]"
|
||||
:filter-method="filterHandler"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="FinishTime" :label="$t('index.finishedTime')" min-width="120"> </el-table-column>
|
||||
<el-table-column prop="JobCompletion" min-width="60" :label="$t('index.finishedNumber')"> </el-table-column>
|
||||
<el-table-column :label="$t('index.state')" prop="JobStatus" width="110">
|
||||
<template slot-scope="scope">
|
||||
<el-dropdown trigger="click" @command="(e) => handleTaskCommand(e, scope.row.JobID)" :disabled="scope.row.JobStatus != 'Fail'">
|
||||
<span class="el-dropdown-link" style="color: #000; font-size: 12px">
|
||||
{{ jobState(scope.row.JobStatus) }}
|
||||
<i class="el-icon-arrow-down el-icon--right" v-if="scope.row.JobStatus == 'Fail'"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="refresh">
|
||||
<span style="color: #000; font-size: 12px">{{ $t('main.commandRefresh') }}</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="delete">
|
||||
<span style="color: #000; font-size: 12px">{{ $t('main.commandDelete') }}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-progress
|
||||
:color="customColors"
|
||||
:width="45"
|
||||
define-back-color="#ebeef5"
|
||||
:stroke-width="3"
|
||||
:percentage="parseFloat(scope.row.TaskPercentage.replace(`%`, ``))"
|
||||
v-if="scope.row.JobStatus == `Copying`"
|
||||
></el-progress>
|
||||
<!-- <el-button
|
||||
style="margin-left: 5px; height: 30px; width: 30px"
|
||||
icon="el-icon-refresh"
|
||||
circle
|
||||
v-if="scope.row.JobStatus == 'Fail'"
|
||||
@click="restart_job(scope.$index)"
|
||||
type="primary"
|
||||
size="mini"
|
||||
>
|
||||
</el-button>
|
||||
<el-button
|
||||
style="margin-left: 5px; height: 30px; width: 30px"
|
||||
icon="el-icon-delete"
|
||||
circle
|
||||
v-if="scope.row.JobStatus == 'Fail'"
|
||||
@click="remove_job(scope.$index)"
|
||||
type="danger"
|
||||
size="mini"
|
||||
>
|
||||
</el-button>
|
||||
<el-button
|
||||
style="margin-left: 5px; height: 30px; width: 30px"
|
||||
icon="el-icon-video-pause"
|
||||
circle
|
||||
v-else-if="scope.row.JobStatus == 'Printing'"
|
||||
@click="suspend_job(scope.$index)"
|
||||
type="primary"
|
||||
size="mini"
|
||||
>
|
||||
</el-button>
|
||||
<el-button
|
||||
style="margin-left: 5px; height: 30px; width: 30px"
|
||||
icon="el-icon-video-play"
|
||||
circle
|
||||
v-else-if="scope.row.JobStatus == '暂停'"
|
||||
@click="start_job(scope.$index)"
|
||||
type="primary"
|
||||
>
|
||||
</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--<el-table-column prop="process" label="进度">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="info"
|
||||
label="信息">
|
||||
</el-table-column>-->
|
||||
</el-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t(`index.curLog`)" name="second">
|
||||
<div class="work">
|
||||
<div class="w_title">
|
||||
<div class="w_right">
|
||||
<el-button type="text" icon="el-icon-document-copy" v-if="isAdmin" @click="getWLogData()">
|
||||
{{ $t('index.openHistoryLog') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c_log" v-html="log"></div></div
|
||||
></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-popover>
|
||||
<s-footer></s-footer>
|
||||
</div>
|
||||
</div>
|
||||
<div :span="3" style="height: 100%; width: 164px">
|
||||
<div class="grid-content bg-purple right" style="overflow: hidden">
|
||||
<el-popover v-if="guideStep" :placement="guideStep[3].placement" width="250" trigger="manual" v-model="guideStep[3].show">
|
||||
<div class="guide_box">
|
||||
<div class="guide_title">
|
||||
{{ $t('guide.title') }}<span>（{{ parseInt(currentStep) + 1 }}/{{ guideStep.length }}）</span>
|
||||
</div>
|
||||
<div class="guide_desc">{{ $t(`guide.step4`) }}</div>
|
||||
<div class="guide_btns">
|
||||
<el-button @click="exitGuide" class="guide_btn1" size="mini" type="text">{{ $t('guide.skip') }}</el-button>
|
||||
<el-button v-if="parseInt(currentStep) > 0" @click="prevStep" class="guide_btn1" size="mini">{{ $t('guide.prev') }}</el-button>
|
||||
<el-button @click="nextStep" class="guide_btn2" size="mini" type="primary">{{ currentStep == guideStep.length - 1 ? $t('guide.complete') : $t('guide.next') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title" slot="reference" :class="{ guide_body: beginStep && currentStep == 3 }">
|
||||
{{ $t('index.notice') }}
|
||||
<!--<div class="log" v-for="(item, index) of infoData.sysLogs">
|
||||
{{ item }}
|
||||
</div>-->
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<warnCard v-for="item of errList" :data="item" @ok="okWarning" v-if="item.show" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogVisible">
|
||||
<el-dialog :visible.sync="dialogVisible" width="1200px" :destroy-on-close="true" :close-on-click-modal="false" :title="$t('index.newWork')">
|
||||
<work
|
||||
:dice="DualSide == 1 ? 2 : 1"
|
||||
@jobPost="closeWork"
|
||||
@addError="addError"
|
||||
:isNew="isNew"
|
||||
:saveWorkList="saveWorkList"
|
||||
:printerList="infoData"
|
||||
:shareDisk="shareDisk"
|
||||
:isCopy="isLocal"
|
||||
:filterPassedType="filterPassedType"
|
||||
:sizeType="_PrinterTypeList"
|
||||
>
|
||||
</work>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div v-if="dialogNetVisible">
|
||||
<el-dialog :visible.sync="dialogNetVisible" width="1200px" :destroy-on-close="true" :close-on-click-modal="false" :title="$t('index.newWork')">
|
||||
<worknet :dice="DualSide == 1 ? 2 : 1" @jobPost="closeNetWork" :printerList="infoData"> </worknet>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<el-dialog :title="$t('index.entireLog')" :visible.sync="dialogWholeLog">
|
||||
<div class="wLog" v-html="wlog" style="text-align: left"></div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 开始用户引导 -->
|
||||
<el-dialog class="guide_dialog" top="30vh" :show-close="false" title="温馨提示" :visible.sync="showStep" width="350px" :close-on-click-modal="false">
|
||||
<div class="start_box">
|
||||
<div class="start_content">欢迎使用卡树自动拷贝打印系统，我们将引导您使用本系统，请您耐心接受引导</div>
|
||||
<div class="start_hide">
|
||||
<el-checkbox v-model="hideStep">我已熟悉系统，不再显示引导</el-checkbox>
|
||||
</div>
|
||||
<div class="start_btn">
|
||||
<el-button @click="startStep" type="primary">开始引导</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
computed: {
|
||||
...mapGetters(['name', 'roles'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.dashboard-container {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.login_bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<img class="login_bg" src="@/assets/images/login_bg.png" />
|
||||
<div class="flex_box form_box">
|
||||
<el-form class="flex_box flex_col flex_row_center login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
|
||||
<img class="login_logo" src="@/assets/images/logo.png" />
|
||||
<div class="login_box">
|
||||
<div class="login_title">用户登录</div>
|
||||
<div class="login_label">用户名</div>
|
||||
<el-form-item prop="username">
|
||||
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="username" />
|
||||
</el-form-item>
|
||||
<div class="login_label">密码</div>
|
||||
<el-form-item prop="password">
|
||||
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
|
||||
placeholder="password"></el-input>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="login_check">
|
||||
<el-checkbox v-model="isChecked">记住账号密码</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="login_btn" type="primary" :loading="loading" @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { validUsername } from '@/utils/validate'
|
||||
|
||||
export default {
|
||||
name: 'login',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (!validUsername(value)) {
|
||||
callback(new Error('请输入正确的用户名'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入您的密码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
loginForm: {
|
||||
username: 'admin',
|
||||
password: 'admin'
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||
},
|
||||
isChecked: true,
|
||||
loading: false,
|
||||
pwdType: 'password'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('Login', this.loginForm).then(() => {
|
||||
this.loading = false
|
||||
this.$router.push({ path: '/' })
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
$bg:#F1F1F1;
|
||||
$light_gray:#000000;
|
||||
|
||||
/* reset element-ui css */
|
||||
.login-container {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
width: 100%;
|
||||
background: #F1F1F1;
|
||||
border-radius: 30px;
|
||||
color: #000;
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
padding: 12px 5px 12px 15px;
|
||||
color: $light_gray;
|
||||
height: 60px;
|
||||
font-size: 24px;
|
||||
border-radius: 30px;
|
||||
&:-webkit-autofill {
|
||||
border-radius: 30px;
|
||||
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
|
||||
-webkit-text-fill-color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
$bg:#F1F1F1;
|
||||
$dark_gray:#889aa4;
|
||||
$light_gray:#eee;
|
||||
.login-container {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.login_bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.form_box {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 0 0 120px;
|
||||
}
|
||||
.login-form {
|
||||
height: 100%;
|
||||
.login_logo {
|
||||
width: 844px;
|
||||
height: 158px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.login_box {
|
||||
width: 450px;
|
||||
background-color: #fff;
|
||||
border-radius: 24px;
|
||||
padding: 48px;
|
||||
.login_title {
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
color: #00C325;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.login_label {
|
||||
font-size: 24px;
|
||||
color: #B2B2B2;
|
||||
line-height: 36px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.login_check {
|
||||
::v-deep {
|
||||
.el-checkbox__inner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: #00C325;
|
||||
border-color: #00C325;
|
||||
}
|
||||
.el-checkbox__inner::after {
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
left: 8px;
|
||||
}
|
||||
.el-checkbox__label {
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: #00C325;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login_btn {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: #F1F1F1;
|
||||
border-radius: 33px;
|
||||
border: 3px solid #00BCC3;
|
||||
font-size: 24px;
|
||||
color: #00BCC3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
span {
|
||||
&:first-of-type {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.svg-container {
|
||||
padding: 6px 5px 6px 15px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
&_login {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: $light_gray;
|
||||
margin: 0px auto 40px auto;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user