mirror of https://github.com/sunface/rust-course
sunface
5 years ago
parent
2701a556b0
commit
1d1fc6d06e
@ -1,12 +0,0 @@
|
|||||||
{
|
|
||||||
"presets": [
|
|
||||||
["env", {
|
|
||||||
"modules": false,
|
|
||||||
"targets": {
|
|
||||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
"stage-2"
|
|
||||||
],
|
|
||||||
"plugins": ["transform-vue-jsx", "transform-runtime"]
|
|
||||||
}
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
root = true
|
|
||||||
|
|
||||||
[*]
|
|
||||||
charset = utf-8
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 2
|
|
||||||
end_of_line = lf
|
|
||||||
insert_final_newline = true
|
|
||||||
trim_trailing_whitespace = true
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
.DS_Store
|
|
||||||
node_modules/
|
|
||||||
/dist/
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.idea
|
|
||||||
.vscode
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
// https://github.com/michael-ciniawsky/postcss-load-config
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
"plugins": {
|
|
||||||
"postcss-import": {},
|
|
||||||
"postcss-url": {},
|
|
||||||
// to edit target browsers: use "browserslist" field in package.json
|
|
||||||
"autoprefixer": {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
# vue-starter
|
|
||||||
|
|
||||||
> A vuejs starter project integrated with vuex, vue-router, less, iview
|
|
||||||
|
|
||||||
## Build Setup
|
|
||||||
|
|
||||||
``` bash
|
|
||||||
# install dependencies
|
|
||||||
npm install
|
|
||||||
|
|
||||||
# serve with hot reload at localhost:8080
|
|
||||||
npm run dev
|
|
||||||
|
|
||||||
# build for production with minification
|
|
||||||
npm run build
|
|
||||||
|
|
||||||
# build for production and view the bundle analyzer report
|
|
||||||
npm run build --report
|
|
||||||
```
|
|
||||||
|
|
||||||
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
require('./check-versions')()
|
|
||||||
|
|
||||||
process.env.NODE_ENV = 'production'
|
|
||||||
|
|
||||||
const ora = require('ora')
|
|
||||||
const rm = require('rimraf')
|
|
||||||
const path = require('path')
|
|
||||||
const chalk = require('chalk')
|
|
||||||
const webpack = require('webpack')
|
|
||||||
const config = require('../config')
|
|
||||||
const webpackConfig = require('./webpack.prod.conf')
|
|
||||||
|
|
||||||
const spinner = ora('building for production...')
|
|
||||||
spinner.start()
|
|
||||||
|
|
||||||
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
|
|
||||||
if (err) throw err
|
|
||||||
webpack(webpackConfig, (err, stats) => {
|
|
||||||
spinner.stop()
|
|
||||||
if (err) throw err
|
|
||||||
process.stdout.write(stats.toString({
|
|
||||||
colors: true,
|
|
||||||
modules: false,
|
|
||||||
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
|
|
||||||
chunks: false,
|
|
||||||
chunkModules: false
|
|
||||||
}) + '\n\n')
|
|
||||||
|
|
||||||
if (stats.hasErrors()) {
|
|
||||||
console.log(chalk.red(' Build failed with errors.\n'))
|
|
||||||
process.exit(1)
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(chalk.cyan(' Build complete.\n'))
|
|
||||||
console.log(chalk.yellow(
|
|
||||||
' Tip: built files are meant to be served over an HTTP server.\n' +
|
|
||||||
' Opening index.html over file:// won\'t work.\n'
|
|
||||||
))
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
const chalk = require('chalk')
|
|
||||||
const semver = require('semver')
|
|
||||||
const packageConfig = require('../package.json')
|
|
||||||
const shell = require('shelljs')
|
|
||||||
|
|
||||||
function exec (cmd) {
|
|
||||||
return require('child_process').execSync(cmd).toString().trim()
|
|
||||||
}
|
|
||||||
|
|
||||||
const versionRequirements = [
|
|
||||||
{
|
|
||||||
name: 'node',
|
|
||||||
currentVersion: semver.clean(process.version),
|
|
||||||
versionRequirement: packageConfig.engines.node
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
if (shell.which('npm')) {
|
|
||||||
versionRequirements.push({
|
|
||||||
name: 'npm',
|
|
||||||
currentVersion: exec('npm --version'),
|
|
||||||
versionRequirement: packageConfig.engines.npm
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = function () {
|
|
||||||
const warnings = []
|
|
||||||
|
|
||||||
for (let i = 0; i < versionRequirements.length; i++) {
|
|
||||||
const mod = versionRequirements[i]
|
|
||||||
|
|
||||||
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
|
|
||||||
warnings.push(mod.name + ': ' +
|
|
||||||
chalk.red(mod.currentVersion) + ' should be ' +
|
|
||||||
chalk.green(mod.versionRequirement)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (warnings.length) {
|
|
||||||
console.log('')
|
|
||||||
console.log(chalk.yellow('To use this template, you must update following to modules:'))
|
|
||||||
console.log()
|
|
||||||
|
|
||||||
for (let i = 0; i < warnings.length; i++) {
|
|
||||||
const warning = warnings[i]
|
|
||||||
console.log(' ' + warning)
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log()
|
|
||||||
process.exit(1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,101 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
const path = require('path')
|
|
||||||
const config = require('../config')
|
|
||||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
|
||||||
const packageConfig = require('../package.json')
|
|
||||||
|
|
||||||
exports.assetsPath = function (_path) {
|
|
||||||
const assetsSubDirectory = process.env.NODE_ENV === 'production'
|
|
||||||
? config.build.assetsSubDirectory
|
|
||||||
: config.dev.assetsSubDirectory
|
|
||||||
|
|
||||||
return path.posix.join(assetsSubDirectory, _path)
|
|
||||||
}
|
|
||||||
|
|
||||||
exports.cssLoaders = function (options) {
|
|
||||||
options = options || {}
|
|
||||||
|
|
||||||
const cssLoader = {
|
|
||||||
loader: 'css-loader',
|
|
||||||
options: {
|
|
||||||
sourceMap: options.sourceMap
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const postcssLoader = {
|
|
||||||
loader: 'postcss-loader',
|
|
||||||
options: {
|
|
||||||
sourceMap: options.sourceMap
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// generate loader string to be used with extract text plugin
|
|
||||||
function generateLoaders (loader, loaderOptions) {
|
|
||||||
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
|
|
||||||
|
|
||||||
if (loader) {
|
|
||||||
loaders.push({
|
|
||||||
loader: loader + '-loader',
|
|
||||||
options: Object.assign({}, loaderOptions, {
|
|
||||||
sourceMap: options.sourceMap
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// Extract CSS when that option is specified
|
|
||||||
// (which is the case during production build)
|
|
||||||
if (options.extract) {
|
|
||||||
return ExtractTextPlugin.extract({
|
|
||||||
use: loaders,
|
|
||||||
fallback: 'vue-style-loader'
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return ['vue-style-loader'].concat(loaders)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
|
|
||||||
return {
|
|
||||||
css: generateLoaders(),
|
|
||||||
postcss: generateLoaders(),
|
|
||||||
less: generateLoaders('less'),
|
|
||||||
sass: generateLoaders('sass', { indentedSyntax: true }),
|
|
||||||
scss: generateLoaders('sass'),
|
|
||||||
stylus: generateLoaders('stylus'),
|
|
||||||
styl: generateLoaders('stylus')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generate loaders for standalone style files (outside of .vue)
|
|
||||||
exports.styleLoaders = function (options) {
|
|
||||||
const output = []
|
|
||||||
const loaders = exports.cssLoaders(options)
|
|
||||||
|
|
||||||
for (const extension in loaders) {
|
|
||||||
const loader = loaders[extension]
|
|
||||||
output.push({
|
|
||||||
test: new RegExp('\\.' + extension + '$'),
|
|
||||||
use: loader
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return output
|
|
||||||
}
|
|
||||||
|
|
||||||
exports.createNotifierCallback = () => {
|
|
||||||
const notifier = require('node-notifier')
|
|
||||||
|
|
||||||
return (severity, errors) => {
|
|
||||||
if (severity !== 'error') return
|
|
||||||
|
|
||||||
const error = errors[0]
|
|
||||||
const filename = error.file && error.file.split('!').pop()
|
|
||||||
|
|
||||||
notifier.notify({
|
|
||||||
title: packageConfig.name,
|
|
||||||
message: severity + ': ' + error.name,
|
|
||||||
subtitle: filename || '',
|
|
||||||
icon: path.join(__dirname, 'logo.png')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
const utils = require('./utils')
|
|
||||||
const config = require('../config')
|
|
||||||
const isProduction = process.env.NODE_ENV === 'production'
|
|
||||||
const sourceMapEnabled = isProduction
|
|
||||||
? config.build.productionSourceMap
|
|
||||||
: config.dev.cssSourceMap
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
loaders: utils.cssLoaders({
|
|
||||||
sourceMap: sourceMapEnabled,
|
|
||||||
extract: isProduction
|
|
||||||
}),
|
|
||||||
cssSourceMap: sourceMapEnabled,
|
|
||||||
cacheBusting: config.dev.cacheBusting,
|
|
||||||
transformToRequire: {
|
|
||||||
video: ['src', 'poster'],
|
|
||||||
source: 'src',
|
|
||||||
img: 'src',
|
|
||||||
image: 'xlink:href'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
const path = require('path')
|
|
||||||
const utils = require('./utils')
|
|
||||||
const config = require('../config')
|
|
||||||
const vueLoaderConfig = require('./vue-loader.conf')
|
|
||||||
|
|
||||||
function resolve (dir) {
|
|
||||||
return path.join(__dirname, '..', dir)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
context: path.resolve(__dirname, '../'),
|
|
||||||
entry: {
|
|
||||||
app: './src/main.js'
|
|
||||||
},
|
|
||||||
output: {
|
|
||||||
path: config.build.assetsRoot,
|
|
||||||
filename: '[name].js',
|
|
||||||
publicPath: process.env.NODE_ENV === 'production'
|
|
||||||
? config.build.assetsPublicPath
|
|
||||||
: config.dev.assetsPublicPath
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
extensions: ['.js', '.vue', '.json'],
|
|
||||||
alias: {
|
|
||||||
'vue$': 'vue/dist/vue.esm.js',
|
|
||||||
'@': resolve('src'),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
module: {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
test: /\.vue$/,
|
|
||||||
loader: 'vue-loader',
|
|
||||||
options: vueLoaderConfig
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.js$/,
|
|
||||||
loader: 'babel-loader',
|
|
||||||
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
|
|
||||||
loader: 'url-loader',
|
|
||||||
options: {
|
|
||||||
limit: 10000,
|
|
||||||
name: utils.assetsPath('img/[name].[hash:7].[ext]')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
|
|
||||||
loader: 'url-loader',
|
|
||||||
options: {
|
|
||||||
limit: 10000,
|
|
||||||
name: utils.assetsPath('media/[name].[hash:7].[ext]')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.less$/,
|
|
||||||
loader: "style-loader!css-loader!less-loader",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
|
||||||
loader: 'url-loader',
|
|
||||||
options: {
|
|
||||||
limit: 10000,
|
|
||||||
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
node: {
|
|
||||||
// prevent webpack from injecting useless setImmediate polyfill because Vue
|
|
||||||
// source contains it (although only uses it if it's native).
|
|
||||||
setImmediate: false,
|
|
||||||
// prevent webpack from injecting mocks to Node native modules
|
|
||||||
// that does not make sense for the client
|
|
||||||
dgram: 'empty',
|
|
||||||
fs: 'empty',
|
|
||||||
net: 'empty',
|
|
||||||
tls: 'empty',
|
|
||||||
child_process: 'empty'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
const utils = require('./utils')
|
|
||||||
const webpack = require('webpack')
|
|
||||||
const config = require('../config')
|
|
||||||
const merge = require('webpack-merge')
|
|
||||||
const path = require('path')
|
|
||||||
const baseWebpackConfig = require('./webpack.base.conf')
|
|
||||||
const CopyWebpackPlugin = require('copy-webpack-plugin')
|
|
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|
||||||
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
|
|
||||||
const portfinder = require('portfinder')
|
|
||||||
|
|
||||||
const HOST = process.env.HOST
|
|
||||||
const PORT = process.env.PORT && Number(process.env.PORT)
|
|
||||||
|
|
||||||
const devWebpackConfig = merge(baseWebpackConfig, {
|
|
||||||
module: {
|
|
||||||
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
|
|
||||||
},
|
|
||||||
// cheap-module-eval-source-map is faster for development
|
|
||||||
devtool: config.dev.devtool,
|
|
||||||
|
|
||||||
// these devServer options should be customized in /config/index.js
|
|
||||||
devServer: {
|
|
||||||
clientLogLevel: 'warning',
|
|
||||||
historyApiFallback: {
|
|
||||||
rewrites: [
|
|
||||||
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
hot: true,
|
|
||||||
contentBase: false, // since we use CopyWebpackPlugin.
|
|
||||||
compress: true,
|
|
||||||
host: HOST || config.dev.host,
|
|
||||||
port: PORT || config.dev.port,
|
|
||||||
open: config.dev.autoOpenBrowser,
|
|
||||||
overlay: config.dev.errorOverlay
|
|
||||||
? { warnings: false, errors: true }
|
|
||||||
: false,
|
|
||||||
publicPath: config.dev.assetsPublicPath,
|
|
||||||
proxy: config.dev.proxyTable,
|
|
||||||
quiet: true, // necessary for FriendlyErrorsPlugin
|
|
||||||
watchOptions: {
|
|
||||||
poll: config.dev.poll,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
new webpack.DefinePlugin({
|
|
||||||
'process.env': require('../config/dev.env')
|
|
||||||
}),
|
|
||||||
new webpack.HotModuleReplacementPlugin(),
|
|
||||||
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
|
|
||||||
new webpack.NoEmitOnErrorsPlugin(),
|
|
||||||
// https://github.com/ampedandwired/html-webpack-plugin
|
|
||||||
new HtmlWebpackPlugin({
|
|
||||||
filename: 'index.html',
|
|
||||||
template: 'index.html',
|
|
||||||
inject: true
|
|
||||||
}),
|
|
||||||
// copy custom static assets
|
|
||||||
new CopyWebpackPlugin([
|
|
||||||
{
|
|
||||||
from: path.resolve(__dirname, '../static'),
|
|
||||||
to: config.dev.assetsSubDirectory,
|
|
||||||
ignore: ['.*']
|
|
||||||
}
|
|
||||||
])
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
module.exports = new Promise((resolve, reject) => {
|
|
||||||
portfinder.basePort = process.env.PORT || config.dev.port
|
|
||||||
portfinder.getPort((err, port) => {
|
|
||||||
if (err) {
|
|
||||||
reject(err)
|
|
||||||
} else {
|
|
||||||
// publish the new Port, necessary for e2e tests
|
|
||||||
process.env.PORT = port
|
|
||||||
// add port to devServer config
|
|
||||||
devWebpackConfig.devServer.port = port
|
|
||||||
|
|
||||||
// Add FriendlyErrorsPlugin
|
|
||||||
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
|
|
||||||
compilationSuccessInfo: {
|
|
||||||
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
|
|
||||||
},
|
|
||||||
onErrors: config.dev.notifyOnErrors
|
|
||||||
? utils.createNotifierCallback()
|
|
||||||
: undefined
|
|
||||||
}))
|
|
||||||
|
|
||||||
resolve(devWebpackConfig)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@ -1,145 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
const path = require('path')
|
|
||||||
const utils = require('./utils')
|
|
||||||
const webpack = require('webpack')
|
|
||||||
const config = require('../config')
|
|
||||||
const merge = require('webpack-merge')
|
|
||||||
const baseWebpackConfig = require('./webpack.base.conf')
|
|
||||||
const CopyWebpackPlugin = require('copy-webpack-plugin')
|
|
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|
||||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
|
||||||
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
|
|
||||||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
|
|
||||||
|
|
||||||
const env = require('../config/prod.env')
|
|
||||||
|
|
||||||
const webpackConfig = merge(baseWebpackConfig, {
|
|
||||||
module: {
|
|
||||||
rules: utils.styleLoaders({
|
|
||||||
sourceMap: config.build.productionSourceMap,
|
|
||||||
extract: true,
|
|
||||||
usePostCSS: true
|
|
||||||
})
|
|
||||||
},
|
|
||||||
devtool: config.build.productionSourceMap ? config.build.devtool : false,
|
|
||||||
output: {
|
|
||||||
path: config.build.assetsRoot,
|
|
||||||
filename: utils.assetsPath('js/[name].[chunkhash].js'),
|
|
||||||
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
|
||||||
new webpack.DefinePlugin({
|
|
||||||
'process.env': env
|
|
||||||
}),
|
|
||||||
new UglifyJsPlugin({
|
|
||||||
uglifyOptions: {
|
|
||||||
compress: {
|
|
||||||
warnings: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
sourceMap: config.build.productionSourceMap,
|
|
||||||
parallel: true
|
|
||||||
}),
|
|
||||||
// extract css into its own file
|
|
||||||
new ExtractTextPlugin({
|
|
||||||
filename: utils.assetsPath('css/[name].[contenthash].css'),
|
|
||||||
// Setting the following option to `false` will not extract CSS from codesplit chunks.
|
|
||||||
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
|
|
||||||
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
|
|
||||||
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
|
|
||||||
allChunks: true,
|
|
||||||
}),
|
|
||||||
// Compress extracted CSS. We are using this plugin so that possible
|
|
||||||
// duplicated CSS from different components can be deduped.
|
|
||||||
new OptimizeCSSPlugin({
|
|
||||||
cssProcessorOptions: config.build.productionSourceMap
|
|
||||||
? { safe: true, map: { inline: false } }
|
|
||||||
: { safe: true }
|
|
||||||
}),
|
|
||||||
// generate dist index.html with correct asset hash for caching.
|
|
||||||
// you can customize output by editing /index.html
|
|
||||||
// see https://github.com/ampedandwired/html-webpack-plugin
|
|
||||||
new HtmlWebpackPlugin({
|
|
||||||
filename: config.build.index,
|
|
||||||
template: 'index.html',
|
|
||||||
inject: true,
|
|
||||||
minify: {
|
|
||||||
removeComments: true,
|
|
||||||
collapseWhitespace: true,
|
|
||||||
removeAttributeQuotes: true
|
|
||||||
// more options:
|
|
||||||
// https://github.com/kangax/html-minifier#options-quick-reference
|
|
||||||
},
|
|
||||||
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
|
|
||||||
chunksSortMode: 'dependency'
|
|
||||||
}),
|
|
||||||
// keep module.id stable when vendor modules does not change
|
|
||||||
new webpack.HashedModuleIdsPlugin(),
|
|
||||||
// enable scope hoisting
|
|
||||||
new webpack.optimize.ModuleConcatenationPlugin(),
|
|
||||||
// split vendor js into its own file
|
|
||||||
new webpack.optimize.CommonsChunkPlugin({
|
|
||||||
name: 'vendor',
|
|
||||||
minChunks (module) {
|
|
||||||
// any required modules inside node_modules are extracted to vendor
|
|
||||||
return (
|
|
||||||
module.resource &&
|
|
||||||
/\.js$/.test(module.resource) &&
|
|
||||||
module.resource.indexOf(
|
|
||||||
path.join(__dirname, '../node_modules')
|
|
||||||
) === 0
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
// extract webpack runtime and module manifest to its own file in order to
|
|
||||||
// prevent vendor hash from being updated whenever app bundle is updated
|
|
||||||
new webpack.optimize.CommonsChunkPlugin({
|
|
||||||
name: 'manifest',
|
|
||||||
minChunks: Infinity
|
|
||||||
}),
|
|
||||||
// This instance extracts shared chunks from code splitted chunks and bundles them
|
|
||||||
// in a separate chunk, similar to the vendor chunk
|
|
||||||
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
|
|
||||||
new webpack.optimize.CommonsChunkPlugin({
|
|
||||||
name: 'app',
|
|
||||||
async: 'vendor-async',
|
|
||||||
children: true,
|
|
||||||
minChunks: 3
|
|
||||||
}),
|
|
||||||
|
|
||||||
// copy custom static assets
|
|
||||||
new CopyWebpackPlugin([
|
|
||||||
{
|
|
||||||
from: path.resolve(__dirname, '../static'),
|
|
||||||
to: config.build.assetsSubDirectory,
|
|
||||||
ignore: ['.*']
|
|
||||||
}
|
|
||||||
])
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
if (config.build.productionGzip) {
|
|
||||||
const CompressionWebpackPlugin = require('compression-webpack-plugin')
|
|
||||||
|
|
||||||
webpackConfig.plugins.push(
|
|
||||||
new CompressionWebpackPlugin({
|
|
||||||
asset: '[path].gz[query]',
|
|
||||||
algorithm: 'gzip',
|
|
||||||
test: new RegExp(
|
|
||||||
'\\.(' +
|
|
||||||
config.build.productionGzipExtensions.join('|') +
|
|
||||||
')$'
|
|
||||||
),
|
|
||||||
threshold: 10240,
|
|
||||||
minRatio: 0.8
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (config.build.bundleAnalyzerReport) {
|
|
||||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
|
|
||||||
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = webpackConfig
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
const merge = require('webpack-merge')
|
|
||||||
const prodEnv = require('./prod.env')
|
|
||||||
|
|
||||||
module.exports = merge(prodEnv, {
|
|
||||||
NODE_ENV: '"development"',
|
|
||||||
WEB_ADDR: '"http://localhost:10086"'
|
|
||||||
})
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
// Template version: 1.3.1
|
|
||||||
// see http://vuejs-templates.github.io/webpack for documentation.
|
|
||||||
|
|
||||||
const path = require('path')
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
dev: {
|
|
||||||
|
|
||||||
// Paths
|
|
||||||
assetsSubDirectory: 'static',
|
|
||||||
assetsPublicPath: '/',
|
|
||||||
proxyTable: {},
|
|
||||||
|
|
||||||
// Various Dev Server settings
|
|
||||||
host: 'localhost', // can be overwritten by process.env.HOST
|
|
||||||
port: 9532, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
|
||||||
autoOpenBrowser: true,
|
|
||||||
errorOverlay: true,
|
|
||||||
notifyOnErrors: true,
|
|
||||||
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Source Maps
|
|
||||||
*/
|
|
||||||
|
|
||||||
// https://webpack.js.org/configuration/devtool/#development
|
|
||||||
devtool: 'cheap-module-eval-source-map',
|
|
||||||
|
|
||||||
// If you have problems debugging vue-files in devtools,
|
|
||||||
// set this to false - it *may* help
|
|
||||||
// https://vue-loader.vuejs.org/en/options.html#cachebusting
|
|
||||||
cacheBusting: true,
|
|
||||||
|
|
||||||
cssSourceMap: true
|
|
||||||
},
|
|
||||||
|
|
||||||
build: {
|
|
||||||
// Template for index.html
|
|
||||||
index: path.resolve(__dirname, '../dist/index.html'),
|
|
||||||
|
|
||||||
// Paths
|
|
||||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
|
||||||
assetsSubDirectory: 'static',
|
|
||||||
assetsPublicPath: '/',
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Source Maps
|
|
||||||
*/
|
|
||||||
|
|
||||||
productionSourceMap: true,
|
|
||||||
// https://webpack.js.org/configuration/devtool/#production
|
|
||||||
devtool: '#source-map',
|
|
||||||
|
|
||||||
// Gzip off by default as many popular static hosts such as
|
|
||||||
// Surge or Netlify already gzip all static assets for you.
|
|
||||||
// Before setting to `true`, make sure to:
|
|
||||||
// npm install --save-dev compression-webpack-plugin
|
|
||||||
productionGzip: false,
|
|
||||||
productionGzipExtensions: ['js', 'css'],
|
|
||||||
|
|
||||||
// Run the build command with an extra argument to
|
|
||||||
// View the bundle analyzer report after build finishes:
|
|
||||||
// `npm run build --report`
|
|
||||||
// Set to `true` or `false` to always turn it on or off
|
|
||||||
bundleAnalyzerReport: process.env.npm_config_report
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
module.exports = {
|
|
||||||
NODE_ENV: '"production"'
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
||||||
<title>im.dev</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<!-- built files will be auto injected -->
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,72 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "mafanr",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "A Vue.js project",
|
|
||||||
"author": "sunface <cto@188.com>",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
|
||||||
"start": "npm run dev",
|
|
||||||
"build": "node build/build.js"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"axios": "0.17.1",
|
|
||||||
"element-ui": "^2.11.1",
|
|
||||||
"js-cookie": "2.2.0",
|
|
||||||
"mavon-editor": "^2.7.5",
|
|
||||||
"vue": "^2.6.10",
|
|
||||||
"vue-i18n": "^8.11.2",
|
|
||||||
"vue-router": "^3.0.3",
|
|
||||||
"vuex": "^3.1.1"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"autoprefixer": "^7.1.2",
|
|
||||||
"babel-core": "^6.22.1",
|
|
||||||
"babel-helper-vue-jsx-merge-props": "^2.0.3",
|
|
||||||
"babel-loader": "^7.1.1",
|
|
||||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
|
||||||
"babel-plugin-transform-runtime": "^6.22.0",
|
|
||||||
"babel-plugin-transform-vue-jsx": "^3.5.0",
|
|
||||||
"babel-preset-env": "^1.3.2",
|
|
||||||
"babel-preset-stage-2": "^6.22.0",
|
|
||||||
"chalk": "^2.0.1",
|
|
||||||
"copy-webpack-plugin": "^4.0.1",
|
|
||||||
"css-loader": "^0.23.1",
|
|
||||||
"extract-text-webpack-plugin": "^3.0.0",
|
|
||||||
"file-loader": "^1.1.4",
|
|
||||||
"friendly-errors-webpack-plugin": "^1.6.1",
|
|
||||||
"html-loader": "^0.3.0",
|
|
||||||
"html-webpack-plugin": "^2.30.1",
|
|
||||||
"less": "^2.7.1",
|
|
||||||
"less-loader": "^2.2.3",
|
|
||||||
"node-notifier": "^5.1.2",
|
|
||||||
"optimize-css-assets-webpack-plugin": "^3.2.0",
|
|
||||||
"ora": "^1.2.0",
|
|
||||||
"portfinder": "^1.0.13",
|
|
||||||
"postcss-import": "^11.0.0",
|
|
||||||
"postcss-loader": "^2.0.8",
|
|
||||||
"postcss-url": "^7.2.1",
|
|
||||||
"rimraf": "^2.6.0",
|
|
||||||
"semver": "^5.3.0",
|
|
||||||
"shelljs": "^0.7.6",
|
|
||||||
"style-loader": "^0.13.1",
|
|
||||||
"uglifyjs-webpack-plugin": "^1.1.1",
|
|
||||||
"url-loader": "^0.5.8",
|
|
||||||
"vue-loader": "^13.3.0",
|
|
||||||
"vue-style-loader": "^3.0.1",
|
|
||||||
"vue-template-compiler": "^2.6.10",
|
|
||||||
"webpack": "^3.6.0",
|
|
||||||
"webpack-bundle-analyzer": "^2.9.0",
|
|
||||||
"webpack-dev-server": "^2.9.1",
|
|
||||||
"webpack-merge": "^4.1.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 6.0.0",
|
|
||||||
"npm": ">= 3.0.0"
|
|
||||||
},
|
|
||||||
"browserslist": [
|
|
||||||
"> 1%",
|
|
||||||
"last 2 versions",
|
|
||||||
"not ie <= 8"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'App'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#app {
|
|
||||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
</style>
|
|
||||||
|
Before Width: | Height: | Size: 160 KiB |
|
Before Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
@ -1,37 +0,0 @@
|
|||||||
@font-face {font-family: "iconfont";
|
|
||||||
src: url('iconfont.eot?t=1568170482672'); /* IE9 */
|
|
||||||
src: url('iconfont.eot?t=1568170482672#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
||||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPEAAsAAAAACEgAAAN1AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDOAqDQIMIATYCJAMYCw4ABCAFhG0HZBs6BxEVnHnIfh7GtojtKjpzws2LWP1NWda478HzlIe9yZ+kKYRT11ZW9lFAunYSIKBu37nvH9BA+KhzQ/ntkUc7TIGy16YH1Uf/w/1Ml+L57NtcolqjEgc4HtC0Isl2gHgK4tl08D8Bu6EAP5Jkp8pXrF4fG40+SAGqe5dObbATSnRFpMJGYRXM1JFqFia2Mdk4D8z0/l69IW82GJiCvlftjhXaU9qNcQuK4zk0F4exw+kBfh4IkB1oUN0LjR2RwJmd4Kf6a4oC29AbMJQzv1vQ8xhcXvZWGJXBAYBgbOMfzwRloYcHAFAdLhPcGAuBgJsXgQFuPgQK3PwINLgFszABsAZMt4EBwEGKzxCr49cpvwD9gsiYOrDHrbtt6diJJw/a3bzZ8NatRjduNLh+3afHaeDVx1vaLFi6cX1kg/mL1m2IGiZrblYMOn49xVh9owLz10c3Cjx1q5EfteQBpH39G8zfGK38OX469e12u/HhGxVCY+eU7bpjSq97zY7drBhy/HqZLtun/hrVemOjWmXN/6P0kT+nFWOFO/7bJCtLtss2h7+No0d00OC7vdQsOXxYbN5Mjg4GQwNvFpKnFVmSrdbhIaVruq3I3+HSZuXKtUvXpkIz8O8eUGTB+mHDkoTD+x1HObrXVqWdQt4f0bqgSED3ejb2HL8QaPik59muFb5mV5G+NP5Fc6oXzd7VHQDPkSvigHdIBkhpL3SA8cYTf/2qh9Hhcr7/rYKLf7P9NQB3Voz5jB5ej3bEgU/Dasz6hnLtVKByNY6usrTCstAOnyZ0MDWyRQ5iNwA/QwNfzwthHg4lipyI6ZhtIiMw8CERBJsMtMZnBxN/8oOFTSnwI5tK8/0J1xdBaV8g03gCihA7wSCIQyCEuIDW+AdgEuUdWIQkwCt8F75i6TFdlIu4MO6w/oPeKAhTw4Uf+Y4yuyXGOR7hG2PSFhjaPu15w4BxiDHpR47MAkQkD69kP3SO4IhkcONWMR/nrhNFX2o38qfCkwgtGNqB1T+gbUggnNKsyPz+HZIyZxErCqrU31CU6MrBoNU3QL8JQ6OCS7kn+SGNGBOAEBEPvBJ/5DikCY/ibgbasJbqYD+cdUYx0VTYTi/2d7kM8KOfY2UoUVqZylI+XB92uu1HOWWqdvFgj4FTsziuu+olMOUpqSXIMuH408vpBAAAAA==') format('woff2'),
|
|
||||||
url('iconfont.woff?t=1568170482672') format('woff'),
|
|
||||||
url('iconfont.ttf?t=1568170482672') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
|
||||||
url('iconfont.svg?t=1568170482672#iconfont') format('svg'); /* iOS 4.1- */
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconfont {
|
|
||||||
font-family: "iconfont" !important;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-undo:before {
|
|
||||||
content: "\e633";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-sousuo:before {
|
|
||||||
content: "\e632";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-comments-alt:before {
|
|
||||||
content: "\e618";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-jiantou_shang:before {
|
|
||||||
content: "\e634";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-jiantou_xia:before {
|
|
||||||
content: "\e636";
|
|
||||||
}
|
|
||||||
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 203 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,12 +0,0 @@
|
|||||||
export default {
|
|
||||||
nav: {
|
|
||||||
signIn : 'Sign in',
|
|
||||||
signInTitle: "Welcome to I'm Dev",
|
|
||||||
whySignIn: 'Sign in to get personalized story recommendations, follow authors and topics you love, and interact with stories.',
|
|
||||||
signInFooter: "I'm Dev is 100% open-source, if you are intrest in building developer commnity, please join us in github.",
|
|
||||||
navSearchHolder: 'Search in Dev',
|
|
||||||
setLang: 'Lang',
|
|
||||||
setTheme: 'Theme',
|
|
||||||
readingLang: 'Reading Lang',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
import Vue from 'vue'
|
|
||||||
import VueI18n from 'vue-i18n'
|
|
||||||
import Cookies from 'js-cookie'
|
|
||||||
|
|
||||||
import eleEN from 'element-ui/lib/locale/lang/en'
|
|
||||||
import eleZh from 'element-ui/lib/locale/lang/zh-CN'
|
|
||||||
|
|
||||||
import enLocale from './en'
|
|
||||||
import zhLocale from './zh'
|
|
||||||
|
|
||||||
Vue.use(VueI18n)
|
|
||||||
Vue.locale = () => {}
|
|
||||||
|
|
||||||
const messages = {
|
|
||||||
en: {
|
|
||||||
...enLocale,
|
|
||||||
...eleEN
|
|
||||||
},
|
|
||||||
zh: {
|
|
||||||
...zhLocale,
|
|
||||||
...eleZh
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const i18n = new VueI18n({
|
|
||||||
// set locale
|
|
||||||
// options: en or zh
|
|
||||||
locale: Cookies.get('imdev-lang') || 'en',
|
|
||||||
// set locale messages
|
|
||||||
messages
|
|
||||||
})
|
|
||||||
|
|
||||||
export default i18n
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
export default {
|
|
||||||
nav: {
|
|
||||||
signIn : '登录',
|
|
||||||
signInTitle: "欢迎来到I'm Dev开发者社区",
|
|
||||||
whySignIn: '登录后你可以创建自己的资料、发表文章，接收个性化推荐收藏喜欢的文章、与其它成员互动等',
|
|
||||||
signInFooter: "I'm Dev的源码是100%开源的,如果你对参与创建个性化社区充满兴趣，欢迎加入我们的组织",
|
|
||||||
navSearchHolder: 'Search in Dev',
|
|
||||||
setLang: '语言设置',
|
|
||||||
setTheme: '主题设置',
|
|
||||||
readingLang: '阅读语言偏好'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
import Vue from 'vue'
|
|
||||||
import Router from 'vue-router'
|
|
||||||
|
|
||||||
import Nav from '@/views/nav'
|
|
||||||
Vue.use(Router)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const router = new Router({
|
|
||||||
mode: 'history',
|
|
||||||
routes: [
|
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
component: Nav,
|
|
||||||
children: [
|
|
||||||
{ path: '/', meta: {'title':'im.dev'}, component: () => import('@/views/home')},
|
|
||||||
{ path: '/dev/article/new', meta: {'title':'Post - im.dev'},component: () => import('@/views/article/edit')},
|
|
||||||
{
|
|
||||||
path: '/dev/setting',
|
|
||||||
component: () => import('@/views/setting/nav'),
|
|
||||||
redirect: '/dev/setting/account',
|
|
||||||
meta: '综合监控',
|
|
||||||
children: [
|
|
||||||
{ path: '/dev/setting/account',meta: {'title':'Settings - im.dev'}, component: () => import('@/views/setting/account')},
|
|
||||||
{ path: '/dev/setting/profile',meta: {'title':'Settings - im.dev'}, component: () => import('@/views/setting/profile')},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{ path: '/:uname/:arID', meta: {'title':'Article - im.dev',},component: () => import('@/views/article/detail')},
|
|
||||||
{ path: '/:uname/:arID/edit', meta: {'title':'Post - im.dev'},component: () => import('@/views/article/edit')},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// { path: '/404', component: () => import('@/views/errorPage/page404')},
|
|
||||||
// { path: '*', redirect: '/404'}
|
|
||||||
],
|
|
||||||
scrollBehavior (to, from, savedPosition) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (savedPosition) {
|
|
||||||
resolve(savedPosition)
|
|
||||||
} else {
|
|
||||||
resolve( { x: 0, y: 0 })
|
|
||||||
}
|
|
||||||
}, 500)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
|
||||||
if (to.meta.title) {
|
|
||||||
document.title = to.meta.title
|
|
||||||
}
|
|
||||||
next()
|
|
||||||
})
|
|
||||||
|
|
||||||
export default router
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
const getters = {
|
|
||||||
//misc
|
|
||||||
service: state => state.misc.service
|
|
||||||
}
|
|
||||||
export default getters
|
|
||||||
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
import Vue from 'vue'
|
|
||||||
import Vuex from 'vuex'
|
|
||||||
import misc from './modules/misc'
|
|
||||||
import user from './modules/user'
|
|
||||||
import post from './modules/post'
|
|
||||||
import getters from './getters'
|
|
||||||
|
|
||||||
Vue.use(Vuex)
|
|
||||||
|
|
||||||
const store = new Vuex.Store({
|
|
||||||
modules: {
|
|
||||||
misc,
|
|
||||||
user,
|
|
||||||
post
|
|
||||||
},
|
|
||||||
getters
|
|
||||||
})
|
|
||||||
|
|
||||||
export default store
|
|
||||||
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
import Cookies from 'js-cookie'
|
|
||||||
|
|
||||||
const misc = {
|
|
||||||
state: {
|
|
||||||
theme: Cookies.get('imdev-theme') || 'light',
|
|
||||||
lang: Cookies.get('imdev-lang') || 'en',
|
|
||||||
readingLang: getReadingLang(self.lang),
|
|
||||||
needSignin: 0,
|
|
||||||
navFixed : true
|
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
SET_THEME: (state, theme) => {
|
|
||||||
state.theme = theme
|
|
||||||
Cookies.set('imdev-theme', theme)
|
|
||||||
},
|
|
||||||
SET_LANG: (state, lang) => {
|
|
||||||
state.lang = lang
|
|
||||||
Cookies.set('imdev-lang', lang)
|
|
||||||
},
|
|
||||||
SET_READING_LANG: (state, lang) => {
|
|
||||||
if (lang.length == 0) {
|
|
||||||
Cookies.remove('imdev-reading-lang')
|
|
||||||
} else {
|
|
||||||
state.readingLang = lang
|
|
||||||
Cookies.set('imdev-reading-lang', JSON.stringify(lang))
|
|
||||||
}
|
|
||||||
},
|
|
||||||
SET_NEEDSIGNIN: (state, _) => {
|
|
||||||
state.needSignin++
|
|
||||||
},
|
|
||||||
SET_NAVFIXED: (state, val) => {
|
|
||||||
state.navFixed = val
|
|
||||||
}
|
|
||||||
},
|
|
||||||
actions: {
|
|
||||||
setTheme({ commit }, theme) {
|
|
||||||
commit('SET_THEME', theme)
|
|
||||||
},
|
|
||||||
setLang({ commit }, val) {
|
|
||||||
commit('SET_LANG', val)
|
|
||||||
},
|
|
||||||
setReadingLang({ commit }, val) {
|
|
||||||
commit('SET_READING_LANG', val)
|
|
||||||
},
|
|
||||||
setNeedSignin({ commit }, val) {
|
|
||||||
commit('SET_NEEDSIGNIN', val)
|
|
||||||
},
|
|
||||||
setNavFixed({ commit }, val) {
|
|
||||||
commit('SET_NAVFIXED', val)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getReadingLang() {
|
|
||||||
var lang = Cookies.get('imdev-lang') || 'en'
|
|
||||||
var c = Cookies.get('imdev-reading-lang')
|
|
||||||
if (c == undefined) {
|
|
||||||
return [lang]
|
|
||||||
} else {
|
|
||||||
return JSON.parse(c)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default misc
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import Cookies from 'js-cookie'
|
|
||||||
|
|
||||||
const post = {
|
|
||||||
state: {
|
|
||||||
contentToBottm: 0
|
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
SET_ContentToBottm: (state, _) => {
|
|
||||||
state.contentToBottm++
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actions: {
|
|
||||||
setContentToBottm({ commit }, val) {
|
|
||||||
commit('SET_ContentToBottm', val)
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default post
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
// overide global focus style
|
|
||||||
h1 {
|
|
||||||
font-size: 36px;
|
|
||||||
margin-block-start: .4em;
|
|
||||||
margin-block-end: .4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size:19px;
|
|
||||||
font-weight:500;
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
font-size:17px;
|
|
||||||
font-weight:500;
|
|
||||||
margin-block-start: .5em;
|
|
||||||
margin-block-end: .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
:focus {
|
|
||||||
outline-color: transparent;
|
|
||||||
outline-width: 0;
|
|
||||||
outline-style: none;
|
|
||||||
}
|
|
||||||
input::-webkit-input-placeholder {
|
|
||||||
color: #aab2bd;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 2px !important;
|
|
||||||
height: 2px;
|
|
||||||
background-color: #e5e5e5 !important;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background-color: #b7b7b7 !important;
|
|
||||||
border-radius: 3px !important;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: 0 0 0px #808080 inset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-border {
|
|
||||||
input {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
border:none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-modal {
|
|
||||||
.el-dialog {
|
|
||||||
box-shadow: none !important;
|
|
||||||
position: absolute;
|
|
||||||
top: 45%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
cursor: zoom-out;
|
|
||||||
}
|
|
||||||
.el-dialog__header {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.el-dialog__body {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-message.el-message--error.network-error {
|
|
||||||
top: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.el-message {
|
|
||||||
min-width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-divider {
|
|
||||||
margin: 13px 0;
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
@import './var.less';
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: @main-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button.el-button--info {
|
|
||||||
background-color: #f5f6f7;
|
|
||||||
color: @grey-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog__wrapper.white-bg-modal {
|
|
||||||
background-color: rgba(255,255,255,.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,631 +0,0 @@
|
|||||||
@import './var.less';
|
|
||||||
.meta-word {
|
|
||||||
color:@grey-color;
|
|
||||||
}
|
|
||||||
.bold-meta-word {
|
|
||||||
color:@light-grey-color;
|
|
||||||
font-weight:700;
|
|
||||||
}
|
|
||||||
.border-bottom {
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-regular {
|
|
||||||
color: @regular-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.global-nav {
|
|
||||||
.write-post {
|
|
||||||
text-decoration:none;color:black;background:#66e2d5;padding:2px 12px;border:2px solid #0a0a0a;border-radius:3px;font-weight:bold;font-size:14px
|
|
||||||
}
|
|
||||||
.sign-in-modal {
|
|
||||||
.el-dialog__header {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.el-dialog__body {
|
|
||||||
padding: 0 0;
|
|
||||||
padding-bottom: 40px;
|
|
||||||
}
|
|
||||||
.sign-in-panel {
|
|
||||||
height: 100%;
|
|
||||||
background: url(../../assets/login.png) no-repeat;
|
|
||||||
background-size: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.user-panel {
|
|
||||||
div {
|
|
||||||
cursor: pointer;
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.fade-enter-active,
|
|
||||||
.fade-leave-active {
|
|
||||||
transition: all 0.6s;
|
|
||||||
}
|
|
||||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
|
||||||
// opacity: 0;
|
|
||||||
transform: translateY(-50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-leave-active,
|
|
||||||
.fade-enter-active {
|
|
||||||
transition: all 0.4s;
|
|
||||||
}
|
|
||||||
.nav {
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba(255, 255, 255, 0);
|
|
||||||
position: fixed;
|
|
||||||
|
|
||||||
// box-shadow: rgba(0, 0, 0, 0.0470588) 0px 4px 12px 0px;
|
|
||||||
padding-top: 8px;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
}
|
|
||||||
.nav.toTop {
|
|
||||||
position: fixed;
|
|
||||||
// box-shadow: rgba(0, 0, 0, 0.0470588) 0px 4px 12px 0px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
background-color: white;
|
|
||||||
z-index: 999;
|
|
||||||
// transition:transform 300ms ease;
|
|
||||||
// transform: translateY(100px)
|
|
||||||
}
|
|
||||||
.nav.inTop {
|
|
||||||
// box-shadow: rgba(0, 0, 0, 0.0470588) 0px 4px 12px 0px;;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-detail {
|
|
||||||
.discuss {
|
|
||||||
background-color: #fafafa
|
|
||||||
}
|
|
||||||
.squares {
|
|
||||||
.square {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 25px;
|
|
||||||
a {
|
|
||||||
color: rgba(0,0,0,.8)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.clap {
|
|
||||||
position: relative;
|
|
||||||
outline: 1px solid transparent;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid #bdc3c7;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
.clap:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: block;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 39px;
|
|
||||||
height: 39px;
|
|
||||||
}
|
|
||||||
.clap:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid #333;
|
|
||||||
transition: border-color 0.3s ease-in;
|
|
||||||
}
|
|
||||||
.clap:hover:after {
|
|
||||||
animation: shockwave 1s ease-in infinite;
|
|
||||||
}
|
|
||||||
.clap svg {
|
|
||||||
width: 20px;
|
|
||||||
fill: none;
|
|
||||||
stroke: #333;
|
|
||||||
stroke-width: 1px;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
.clap.liked {
|
|
||||||
border: 1px solid #333;
|
|
||||||
}
|
|
||||||
.clap.liked svg {
|
|
||||||
stroke: #333;
|
|
||||||
stroke-width: 2px;
|
|
||||||
}
|
|
||||||
.clap svg.checked {
|
|
||||||
fill: #333;
|
|
||||||
stroke: #fff;
|
|
||||||
stroke-width: 2px;
|
|
||||||
}
|
|
||||||
@keyframes shockwave {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
box-shadow: 0 0 2px #333;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 0;
|
|
||||||
box-shadow: 0 0 50px #145b32, inset 0 0 10px #333
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-edit {
|
|
||||||
.render {
|
|
||||||
border:1px solid #eee;border-bottom:none;border-right:none;
|
|
||||||
}
|
|
||||||
.tags {
|
|
||||||
.el-input.el-input--suffix input{
|
|
||||||
background-color: #f5f6f7;
|
|
||||||
border-radius: 100px
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.component-render {
|
|
||||||
.content p {
|
|
||||||
margin: 0 0 8px
|
|
||||||
}
|
|
||||||
.content blockquote h1:last-child,
|
|
||||||
.content blockquote h2:last-child,
|
|
||||||
.content blockquote h3:last-child,
|
|
||||||
.content blockquote h4:last-child,
|
|
||||||
.content blockquote h5:last-child,
|
|
||||||
.content blockquote h6:last-child,
|
|
||||||
.content blockquote li:last-child,
|
|
||||||
.content blockquote ol:last-child,
|
|
||||||
.content blockquote p:last-child,
|
|
||||||
.content blockquote ul:last-child {
|
|
||||||
margin-bottom: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .video-package .video-description p {
|
|
||||||
margin: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.content li p {
|
|
||||||
overflow: visible
|
|
||||||
}
|
|
||||||
|
|
||||||
.content a {
|
|
||||||
color: rgba(0, 0, 0, .84);
|
|
||||||
text-decoration: none;
|
|
||||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .68) 50%, rgba(0, 0, 0, 0) 50%);
|
|
||||||
background-repeat: repeat-x;
|
|
||||||
background-size: 2px .2em;
|
|
||||||
background-position: 0 1.07em
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* .content a:hover {
|
|
||||||
color: #3194d0;
|
|
||||||
text-decoration: underline
|
|
||||||
} */
|
|
||||||
|
|
||||||
|
|
||||||
/* .content a.active,
|
|
||||||
.content a:active,
|
|
||||||
.content a:focus {
|
|
||||||
color: #3194d0
|
|
||||||
} */
|
|
||||||
|
|
||||||
.content a.disabled,
|
|
||||||
.content a.disabled.active,
|
|
||||||
.content a.disabled:active,
|
|
||||||
.content a.disabled:focus,
|
|
||||||
.content a.disabled:hover,
|
|
||||||
.content a[disabled],
|
|
||||||
.content a[disabled].active,
|
|
||||||
.content a[disabled]:active,
|
|
||||||
.content a[disabled]:focus,
|
|
||||||
.content a[disabled]:hover {
|
|
||||||
cursor: not-allowed;
|
|
||||||
color: #f5f5f5
|
|
||||||
}
|
|
||||||
|
|
||||||
.content ol,
|
|
||||||
.content p,
|
|
||||||
.content ul {
|
|
||||||
word-break: break-word!important;
|
|
||||||
word-break: break-all
|
|
||||||
}
|
|
||||||
|
|
||||||
.content hr {
|
|
||||||
margin: 0 0 20px;
|
|
||||||
border-top: 1px solid #ddd
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.content h1 {
|
|
||||||
font-size: 26px
|
|
||||||
}
|
|
||||||
|
|
||||||
.content h2 {
|
|
||||||
font-size: 24px
|
|
||||||
}
|
|
||||||
|
|
||||||
.content h3 {
|
|
||||||
font-size: 22px
|
|
||||||
}
|
|
||||||
|
|
||||||
.content h4 {
|
|
||||||
font-size: 20px
|
|
||||||
}
|
|
||||||
|
|
||||||
.content h5 {
|
|
||||||
font-size: 18px
|
|
||||||
}
|
|
||||||
|
|
||||||
.content h6 {
|
|
||||||
font-size: 16px
|
|
||||||
}
|
|
||||||
|
|
||||||
.content img {
|
|
||||||
max-width: 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.content blockquote {
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 18px !important;
|
|
||||||
color: rgba(0, 0, 0, .68);
|
|
||||||
padding-left: 25px;
|
|
||||||
padding-top:4px;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
box-shadow:rgba(0, 0, 0, 0.843137) 3px 0px 0px 0px inset;
|
|
||||||
margin-inline-start: 0px !important;
|
|
||||||
margin-inline-end: 0px !important;
|
|
||||||
margin-left:-20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.content ol .image-package,
|
|
||||||
.content ul .image-package {
|
|
||||||
width: auto!important;
|
|
||||||
margin-left: 0!important
|
|
||||||
}
|
|
||||||
|
|
||||||
.content code {
|
|
||||||
background: rgba(0, 0, 0, .05);
|
|
||||||
padding: 3px 4px;
|
|
||||||
margin: 0 2px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content pre {
|
|
||||||
font-size: 14px;
|
|
||||||
word-wrap: normal;
|
|
||||||
word-break: break-word!important;
|
|
||||||
word-break: break-all;
|
|
||||||
white-space: pre;
|
|
||||||
overflow: auto;
|
|
||||||
border-radius: 0;
|
|
||||||
/* border: .3px solid #ddd;*/
|
|
||||||
page-break-inside: avoid;
|
|
||||||
display: block;
|
|
||||||
/* line-height: 1.42857; */
|
|
||||||
color: #333;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
border-radius: 4px;
|
|
||||||
line-height: 27px;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content pre code {
|
|
||||||
padding: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
/* white-space: pre */
|
|
||||||
font-size: inherit;
|
|
||||||
color: inherit;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.content table {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
border: 0px solid #ddd;
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-left: none;
|
|
||||||
word-break: normal;
|
|
||||||
display: table;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content table tr:nth-of-type(2n) {
|
|
||||||
background-color: rgba(243, 243, 243, 0.3)
|
|
||||||
}
|
|
||||||
|
|
||||||
.content table thead th {
|
|
||||||
vertical-align: middle;
|
|
||||||
text-align: left;
|
|
||||||
color: rgba(0, 0, 0, .64);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content table tr {
|
|
||||||
border-top: .3px solid #ddd;
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content table thead tr {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content table td,
|
|
||||||
.content table th {
|
|
||||||
padding: 12px 8px;
|
|
||||||
border: 0px solid #ddd;
|
|
||||||
line-height: 20px;
|
|
||||||
vertical-align: middle
|
|
||||||
}
|
|
||||||
|
|
||||||
.content table th {
|
|
||||||
font-weight: 500
|
|
||||||
}
|
|
||||||
|
|
||||||
.content table .image-package {
|
|
||||||
width: auto;
|
|
||||||
margin-left: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .image-package .image-container {
|
|
||||||
z-index: 100;
|
|
||||||
position: relative;
|
|
||||||
background-color: #eee;
|
|
||||||
transition: background-color .1s linear;
|
|
||||||
margin: 0 auto
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .image-package .image-container .image-container-fill {
|
|
||||||
z-index: 50
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .image-package .image-container .image-view {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .image-package .image-container .image-view img.image-loading {
|
|
||||||
will-change: filter, opacity;
|
|
||||||
-webkit-filter: blur(4px);
|
|
||||||
filter: blur(4px);
|
|
||||||
opacity: .3
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .image-package .image-container .image-view img {
|
|
||||||
transition: all .15s linear;
|
|
||||||
z-index: 100;
|
|
||||||
will-change: filter, opacity;
|
|
||||||
-webkit-filter: blur(0);
|
|
||||||
filter: blur(0);
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.content img {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
vertical-align: middle;
|
|
||||||
border: 0;
|
|
||||||
cursor: -webkit-zoom-in;
|
|
||||||
transition: all .25s ease-in-out
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.content .image-package .image-caption:empty {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .video-package {
|
|
||||||
position: relative;
|
|
||||||
margin: -20px auto 20px;
|
|
||||||
text-align: center
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .video-package .video-placeholder-area {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
height: 110px;
|
|
||||||
padding: 10px;
|
|
||||||
padding-left: 120px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid #d9d9d9;
|
|
||||||
background-color: hsla(0, 0%, 71%, .1);
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .video-package .video-placeholder-area:after {
|
|
||||||
content: " ";
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
left: -1px;
|
|
||||||
display: block;
|
|
||||||
width: 110px;
|
|
||||||
height: 110px;
|
|
||||||
background-color: rgba(0, 0, 0, .3);
|
|
||||||
background-image: url(//cdn2.jianshu.io/assets/common/play-btn-c4bc06b9dfe063495b6b8277b14bc5c3.png);
|
|
||||||
background-position: 30px;
|
|
||||||
background-size: 50px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
transition: all .1s linear
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .video-package .video-placeholder-area:hover:after {
|
|
||||||
background-color: transparent
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .video-package .video-placeholder-area .video-cover {
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
left: -1px;
|
|
||||||
display: block;
|
|
||||||
width: 110px;
|
|
||||||
height: 110px;
|
|
||||||
opacity: .8;
|
|
||||||
transition: opacity .1s linear
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .video-package .video-description {
|
|
||||||
min-width: 20%;
|
|
||||||
min-height: 22px;
|
|
||||||
display: none;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-bottom: 1px solid #d9d9d9;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #999;
|
|
||||||
line-height: 1.7
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .video-package .video-description:empty {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .video-package .video-close-button,
|
|
||||||
.content .video-package .video-provider-button {
|
|
||||||
text-align: left;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 0;
|
|
||||||
line-height: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: opacity .1s linear
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .video-package .video-close-button i,
|
|
||||||
.content .video-package .video-provider-button i {
|
|
||||||
position: relative;
|
|
||||||
top: 1px
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .video-package .video-provider-button {
|
|
||||||
float: right
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .hljs {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .hljs-center {
|
|
||||||
text-align: center
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .hljs-right {
|
|
||||||
text-align: right
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .hljs-left {
|
|
||||||
text-align: left
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.component-editor {
|
|
||||||
.v-note-wrapper {
|
|
||||||
z-index: 10 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-note-wrapper .v-note-panel {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-note-wrapper .v-note-op .v-right-item {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.setting-nav {
|
|
||||||
.header {
|
|
||||||
|
|
||||||
}
|
|
||||||
.item {
|
|
||||||
padding: 15px 12px 8px;
|
|
||||||
}
|
|
||||||
.item.selected {
|
|
||||||
border-bottom: solid 3px #cfd7ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.discuss {
|
|
||||||
.write-comment {
|
|
||||||
.header-buttons {
|
|
||||||
margin-top:-190px
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.comments {
|
|
||||||
padding-bottom:30px
|
|
||||||
}
|
|
||||||
.no-comments {
|
|
||||||
.iconfont {
|
|
||||||
color:rgba(0, 121, 211, 0.4);font-size: 30px
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sorter {
|
|
||||||
color:@grey-color;
|
|
||||||
|
|
||||||
}
|
|
||||||
.comments {
|
|
||||||
background:white;
|
|
||||||
padding:5px 25px;
|
|
||||||
margin-top:0px;
|
|
||||||
.comment {
|
|
||||||
i.vote-highlighted {
|
|
||||||
color: rgb(255, 69, 0);
|
|
||||||
}
|
|
||||||
.upvote {
|
|
||||||
position:absolute;
|
|
||||||
margin-left:-21px;
|
|
||||||
margin-top:-2px;
|
|
||||||
color: @light-grey-color;
|
|
||||||
font-size:10px
|
|
||||||
}
|
|
||||||
.downvote {
|
|
||||||
position:absolute;
|
|
||||||
margin-left:-21px;
|
|
||||||
margin-top:9px;
|
|
||||||
color:@light-grey-color;
|
|
||||||
font-size:10px
|
|
||||||
}
|
|
||||||
.header {
|
|
||||||
color:rgb(124,124,124);
|
|
||||||
.uname {
|
|
||||||
color:rgb(0, 121, 211);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.footer {
|
|
||||||
color:@light-grey-color;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-note-wrapper {
|
|
||||||
min-height: 150px !important;
|
|
||||||
.v-note-op.shadow {
|
|
||||||
box-shadow: none;
|
|
||||||
border-bottom: 1px solid #efefef
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
font-size:13px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.reply-comment {
|
|
||||||
.v-note-wrapper {
|
|
||||||
border:1px solid #eee
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
@grey-color: rgba(0,0,0,.54);
|
|
||||||
@light-grey-color: rgb(135, 138, 140);
|
|
||||||
|
|
||||||
@main-color: #303133;
|
|
||||||
@regular-color: #606266;
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
/* ----------------------------margin------------------------ */
|
|
||||||
.margin-0-auto { margin: 0 auto}
|
|
||||||
|
|
||||||
.margin-left-5 {margin-left: 5px};.margin-left-10 {margin-left: 10px};.margin-left-15 {margin-left: 15px};.margin-left-20 {margin-left: 20px};.margin-left-30 {margin-left: 30px};.margin-left-40 {margin-left: 40px};.margin-left-50 {margin-left: 50px};.margin-left-60 {margin-left: 60px};
|
|
||||||
.margin-left--20 {margin-left: -20px};
|
|
||||||
|
|
||||||
.margin-right-5 {margin-right: 5px};.margin-right-10 {margin-right: 10px};.margin-right-15 {margin-right: 15px};.margin-right-20 {margin-right: 20px};.margin-right-30 {margin-right: 30px};.margin-right-40 {margin-right: 40px};
|
|
||||||
|
|
||||||
.margin-top-2 {margin-top: 2px};.margin-top-5 {margin-top: 5px};.margin-top-8 {margin-top: 8px};.margin-top-10 {margin-top: 10px};.margin-top-15 {margin-top: 15px};.margin-top-20 {margin-top: 20px};.margin-top-25 {margin-top: 25px};.margin-top-30 {margin-top: 30px};.margin-top-40 {margin-top: 40px};.margin-top-60 {margin-top: 60px};.margin-top-80 {margin-top: 80px};.margin-top-100 {margin-top: 100px};
|
|
||||||
.margin-top--30 {margin-top: -30px};.margin-top--35 {margin-top: -35px};.margin-top--40 {margin-top: -40px};.margin-top--50 {margin-top: -50px};
|
|
||||||
|
|
||||||
.margin-bottom-5 {margin-bottom: 5px};.margin-bottom-10 {margin-bottom: 10px};.margin-bottom-15 {margin-bottom: 15px};.margin-bottom-20 { margin-bottom: 20px}.margin-bottom-30 {margin-bottom: 30px };.margin-bottom-40 {margin-bottom: 40px };.margin-bottom-50 {margin-bottom: 50px };
|
|
||||||
|
|
||||||
/* ----------------------------padding------------------------ */
|
|
||||||
.padding-5 {padding: 5px 5px};.padding-10 { padding: 10px 10px};.padding-20 {padding: 20px 20px};
|
|
||||||
|
|
||||||
.padding-left-5 {padding-left: 5px};.padding-left-8 {padding-left: 8px};.padding-left-10 {padding-left: 10px};.padding-left-15 {padding-left: 15px};.padding-left-20 {padding-left: 20px};
|
|
||||||
|
|
||||||
.padding-right-5 {padding-right: 5px}.padding-right-10 {padding-right: 10px};.padding-right-15 {padding-right: 15px};.padding-right-20 {padding-right: 20px};
|
|
||||||
|
|
||||||
.padding-top-5 {padding-top: 5px};.padding-top-10 {padding-top: 10px};.padding-top-15 {padding-top: 15px};.padding-top-20 {padding-top: 20px};.padding-top-40 {padding-top: 40px};.padding-top-50 {padding-top: 650px};.padding-top-55 {padding-top: 55px};.padding-top-60 {padding-top: 60px};
|
|
||||||
|
|
||||||
.padding-bottom-5 { padding-bottom: 5px};.padding-bottom-10 {padding-bottom: 10px};.padding-bottom-15 {padding-bottom: 15px};.padding-bottom-20 {padding-bottom: 20px};.padding-bottom-30 {padding-bottom: 30px};.padding-bottom-40 {padding-bottom: 40px};
|
|
||||||
|
|
||||||
/* ----------------------------height/width------------------------ */
|
|
||||||
.height-40{height:40px};.height-45{height:45px};.height-50{height:50px};.height-100{height:100px};.height-150{height:150px};.height-200{height:200px};
|
|
||||||
|
|
||||||
.width-40{width:40px};.width-50{width:50px};.width-100{width:100px};.width-150{width:150px};.width-200{width:200px};.width-300{width:300px};
|
|
||||||
|
|
||||||
.width-100p {width: 100%};
|
|
||||||
|
|
||||||
.max-width-280 {width: 280px};.max-width-300 {width: 300px}
|
|
||||||
|
|
||||||
/* ----------------------------font------------------------ */
|
|
||||||
.font-size-12 {font-size:12px;};.font-size-13 {font-size:13px;};.font-size-14 {font-size:14px;};.font-size-15 {font-size:15px;};.font-size-16 {font-size:16px;};.font-size-18 {font-size:18px;};.font-size-20 {font-size:20px;};.font-size-22 {font-size:22px;};.font-size-24 {font-size:24px;};
|
|
||||||
|
|
||||||
.font-weight-500 {font-weight: 500;};.font-weight-bold {font-weight: bold;}
|
|
||||||
|
|
||||||
/* ----------------------------position------------------------ */
|
|
||||||
.position-fixed {position: fixed};.position-absolute {position: absolute};.position-relative{position: relative};
|
|
||||||
|
|
||||||
/* ----------------------------z-index------------------------ */
|
|
||||||
.z-index-1 {z-index: 1};.z-index-100 {z-index: 100};.z-index-1000 {z-index: 1000};
|
|
||||||
|
|
||||||
/* ----------------------------border------------------------ */
|
|
||||||
.border-none {border:noen};.border-top-none{border-top: none};.border-bottom-none{border-bottom: none};.border-left-none{border-left: none};.border-right-none{border-right: none};
|
|
||||||
|
|
||||||
.border-radius-3{border-radius: 3px};.border-radius-100{border-radius: 100px};
|
|
||||||
|
|
||||||
// 鼠标悬浮
|
|
||||||
.cursor-pointer:hover {
|
|
||||||
cursor: pointer
|
|
||||||
}
|
|
||||||
|
|
||||||
.float-right {
|
|
||||||
float: right
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-align-center {
|
|
||||||
text-align:center
|
|
||||||
}
|
|
||||||
.vertical-align-middle {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.display-inline-block {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overflow-y-auto{
|
|
||||||
overflow-y: auto
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-decoration-none {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import Cookies from 'js-cookie'
|
|
||||||
|
|
||||||
const TokenKey = 'MF-Token'
|
|
||||||
|
|
||||||
export function getToken() {
|
|
||||||
return Cookies.get(TokenKey)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setToken(token) {
|
|
||||||
return Cookies.set(TokenKey, token)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function removeToken() {
|
|
||||||
return Cookies.remove(TokenKey)
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
const langOptions = [
|
|
||||||
{label:'English',value:'en'},
|
|
||||||
{label:"Chinese",value:'zh'}
|
|
||||||
]
|
|
||||||
|
|
||||||
export default langOptions;
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
// 该模块用来请求API网关
|
|
||||||
import axios from 'axios'
|
|
||||||
import { Message } from 'element-ui'
|
|
||||||
import { getToken } from '@/utils/auth'
|
|
||||||
import store from '@/store'
|
|
||||||
|
|
||||||
|
|
||||||
// create an axios instance
|
|
||||||
const service = axios.create({
|
|
||||||
baseURL: process.env.WEB_ADDR, // api的base_url
|
|
||||||
timeout: 10000 // request timeout
|
|
||||||
})
|
|
||||||
|
|
||||||
// request interceptor
|
|
||||||
service.interceptors.request.use(
|
|
||||||
config => {
|
|
||||||
// 设置token
|
|
||||||
config.headers['token'] = getToken()
|
|
||||||
return config
|
|
||||||
},
|
|
||||||
error => {
|
|
||||||
// Do something with request error
|
|
||||||
Promise.reject(error)
|
|
||||||
})
|
|
||||||
|
|
||||||
// respone interceptor
|
|
||||||
service.interceptors.response.use(
|
|
||||||
response => {
|
|
||||||
return response
|
|
||||||
},
|
|
||||||
error => {
|
|
||||||
var response = error.response
|
|
||||||
if (response == undefined) {
|
|
||||||
Message.error({
|
|
||||||
message: error.message,
|
|
||||||
duration: 3000,
|
|
||||||
customClass: 'network-error'
|
|
||||||
})
|
|
||||||
return Promise.reject(error)
|
|
||||||
}
|
|
||||||
if (response.data.err_code == 1001) {
|
|
||||||
store.dispatch("setNeedSignin", 1)
|
|
||||||
store.dispatch("ClearUserInfo")
|
|
||||||
return Promise.reject(response.data.message+' : '+ response.data.err_code)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (response.data.err_code != 0) {
|
|
||||||
Message(
|
|
||||||
{
|
|
||||||
showClose: true,
|
|
||||||
message: response.data.message+' : '+ response.data.err_code,
|
|
||||||
type: 'error'
|
|
||||||
}
|
|
||||||
)
|
|
||||||
return Promise.reject(response.data.message+' : '+ response.data.err_code)
|
|
||||||
}
|
|
||||||
|
|
||||||
Message.error(error.message)
|
|
||||||
return Promise.reject(error)
|
|
||||||
})
|
|
||||||
|
|
||||||
export default service
|
|
||||||
@ -1,230 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="home markdown article-edit">
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="24" :offset="0">
|
|
||||||
<div class="tags no-border">
|
|
||||||
<el-input size="small" v-model="tempArticle.title" class="inline-input width-200" placeholder="Title" @blur="setTitle"></el-input>
|
|
||||||
<el-select class="margin-left-10 width-300" size="small" v-model="tempArticle.tags" multiple filterable remote placeholder="Tags" @change="setTags" :remote-method="queryTags" :loading="tagsLoading" allow-create default-first-option>
|
|
||||||
<el-option v-for="item in tags" :key="item" :label="item" :value="item"></el-option>
|
|
||||||
</el-select>
|
|
||||||
|
|
||||||
<el-select
|
|
||||||
v-model="tempArticle.lang"
|
|
||||||
placeholder="lang for article"
|
|
||||||
size="small"
|
|
||||||
class="width-150"
|
|
||||||
>
|
|
||||||
<el-option v-for="o in langOptions" :key="o.label" :label="o.label" :value="o.value"></el-option>
|
|
||||||
</el-select>
|
|
||||||
<span>
|
|
||||||
<el-button size="medium" type="info" class="border-radius-100" @click="preview">PREVIEW</el-button>
|
|
||||||
<el-button size="medium" type="info" class="border-radius-100" @click="saveNew(1)" v-show="tempArticle.status == 1 || mode=='new'">SAVE DRAFT</el-button>
|
|
||||||
<el-button size="medium" type="info" class="border-radius-100" @click="saveChanges" v-show="tempArticle.status == 2">SAVE CHANGES</el-button>
|
|
||||||
<el-button size="medium" type="primary" class="border-radius-100" @click="saveNew(2)" v-show="tempArticle.status != 2">PUBLISH</el-button>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="float-right margin-top-5 margin-right-10 font-size-18">
|
|
||||||
<el-tooltip content="Revert to the previous save" class="margin-right-15" v-show="mode=='edit'"><i class="el-icon-back cursor-pointer" @click="clearChanges" ></i></el-tooltip>
|
|
||||||
<el-tooltip content="Delete this post" v-show="mode=='edit'"><i class="el-icon-delete cursor-pointer"></i></el-tooltip>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<editor :editorHeight="editorHeight" class="margin-top-5" parent="article" :md="tempArticle.md" @articleSetMD="articleSetMD"></editor>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" v-if="previewReset" class="margin-top-5 render">
|
|
||||||
<render id ="render-content" :content="tempArticle.render" :style="{'height':editorHeight}" class="padding-10 overflow-y-auto"></render>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import request from "@/utils/request";
|
|
||||||
import render from "../components/render"
|
|
||||||
import editor from "../components/editor"
|
|
||||||
import langOptions from "@/utils/data"
|
|
||||||
export default {
|
|
||||||
components: {render,editor},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
tagsLoading: false,
|
|
||||||
tags: [],
|
|
||||||
allTags: ['go','golang','rust','java','javascript'], // query tags from remote server
|
|
||||||
tempArticle: {
|
|
||||||
title: '',
|
|
||||||
tags: [],
|
|
||||||
md :'',
|
|
||||||
render: '',
|
|
||||||
lang: this.$store.state.misc.lang
|
|
||||||
},
|
|
||||||
tempRender :'',
|
|
||||||
previewReset: false,
|
|
||||||
editorHeight: 'calc(100vh - 125px)',
|
|
||||||
localStoreID : window.location.origin + window.location.pathname,
|
|
||||||
|
|
||||||
// for edit only
|
|
||||||
mode: 'new',
|
|
||||||
arID: '',
|
|
||||||
|
|
||||||
langOptions: langOptions,
|
|
||||||
previewed : false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
"$store.state.user.id"() {
|
|
||||||
if (this.$store.state.user.id != '') {
|
|
||||||
this.init()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
clearChanges() {
|
|
||||||
request({
|
|
||||||
url: "/web/article/beforeEdit",
|
|
||||||
method: "GET",
|
|
||||||
params: {
|
|
||||||
article_id: this.arID
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
this.tempArticle = res.data.data
|
|
||||||
localStorage.removeItem(this.localStoreID)
|
|
||||||
});
|
|
||||||
},
|
|
||||||
articleSetMD(md,render) {
|
|
||||||
this.tempArticle.md = md
|
|
||||||
// console.log(render)
|
|
||||||
this.tempRender = render
|
|
||||||
localStorage.setItem(this.localStoreID, JSON.stringify(this.tempArticle))
|
|
||||||
},
|
|
||||||
preview() {
|
|
||||||
request({
|
|
||||||
url: "/web/post/preview",
|
|
||||||
method: "POST",
|
|
||||||
params: {
|
|
||||||
render: this.tempRender
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
this.tempArticle.render = res.data.data
|
|
||||||
this.previewReset = true
|
|
||||||
// make the render area scroll to bottom
|
|
||||||
if (this.previewed) {
|
|
||||||
setTimeout(function() {
|
|
||||||
var r = document.getElementById('render-content')
|
|
||||||
r.scrollTop = r.scrollHeight
|
|
||||||
} ,300)
|
|
||||||
} else {
|
|
||||||
this.previewed = true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
saveChanges() {
|
|
||||||
if (this.tempArticle.title == '') {
|
|
||||||
this.$message.error('Title cant be blank')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.tempArticle.render = this.tempRender
|
|
||||||
request({
|
|
||||||
url: "/web/article/saveChanges",
|
|
||||||
method: "POST",
|
|
||||||
params: {
|
|
||||||
content: JSON.stringify(this.tempArticle)
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
localStorage.removeItem(this.localStoreID)
|
|
||||||
this.$router.push('/' + res.data.data)
|
|
||||||
});
|
|
||||||
},
|
|
||||||
saveNew(opType) {
|
|
||||||
if (this.tempArticle.title == '') {
|
|
||||||
this.$message.error('Title cant be blank')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.tempArticle.render = this.tempRender
|
|
||||||
this.tempArticle.cover_image = 'https://res.cloudinary.com/practicaldev/image/fetch/s--irWUM2_k--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--5kGvHb_---/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://thepracticaldev.s3.amazonaws.com/i/adfopvch5w18u9lqpev9.jpg'
|
|
||||||
request({
|
|
||||||
url: "/web/article/saveNew",
|
|
||||||
method: "POST",
|
|
||||||
params: {
|
|
||||||
type: opType,
|
|
||||||
content: JSON.stringify(this.tempArticle)
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
localStorage.removeItem(this.localStoreID)
|
|
||||||
this.$router.push('/' + res.data.data)
|
|
||||||
});
|
|
||||||
},
|
|
||||||
setTags(val) {
|
|
||||||
if (this.tempArticle.tags.length!=0) {
|
|
||||||
var last = this.tempArticle.tags[this.tempArticle.tags.length-1]
|
|
||||||
if (last.trim() == '') {
|
|
||||||
this.$message.warning("tag cant be blank")
|
|
||||||
this.tempArticle.tags.pop()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (this.tempArticle.tags.length > 3) {
|
|
||||||
this.$message.warning("tags length is limited to 3")
|
|
||||||
this.tempArticle.tags.pop()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
localStorage.setItem(this.localStoreID, JSON.stringify(this.tempArticle))
|
|
||||||
},
|
|
||||||
setTitle() {
|
|
||||||
localStorage.setItem(this.localStoreID, JSON.stringify(this.tempArticle))
|
|
||||||
},
|
|
||||||
queryTags(q) {
|
|
||||||
if (q !== '') {
|
|
||||||
this.tagsLoading = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
this.tagsLoading = false;
|
|
||||||
this.tags = this.allTags.filter(item => {
|
|
||||||
return item.toLowerCase()
|
|
||||||
.indexOf(q.toLowerCase()) > -1;
|
|
||||||
});
|
|
||||||
}, 200);
|
|
||||||
} else {
|
|
||||||
this.tags = [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
init() {
|
|
||||||
this.arID = this.$route.params.arID;
|
|
||||||
if (this.arID != undefined) {
|
|
||||||
this.mode = 'edit'
|
|
||||||
// check ar already in cache
|
|
||||||
var ar = localStorage.getItem(this.localStoreID)
|
|
||||||
if (ar != null) {
|
|
||||||
this.tempArticle = JSON.parse(ar)
|
|
||||||
} else {
|
|
||||||
request({
|
|
||||||
url: "/web/article/beforeEdit",
|
|
||||||
method: "GET",
|
|
||||||
params: {
|
|
||||||
article_id: this.arID
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
this.tempArticle = res.data.data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
if (this.mode == 'new') {
|
|
||||||
var ar = localStorage.getItem(this.localStoreID)
|
|
||||||
if (ar != null) {
|
|
||||||
this.tempArticle = JSON.parse(ar)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.init()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,361 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="discuss padding-20" >
|
|
||||||
<!-- comment editor -->
|
|
||||||
<div class="write-comment">
|
|
||||||
<editor placeholder="Add to the discussion" editorHeight="200px" parent="discuss" :md="tempComment.md" @discussSetMD="discussSetMD" v-if="!commentPreviewd"></editor>
|
|
||||||
<render paddingTop="46px" paddingLeft="20px" :content="tempComment.render" class="height-200" v-else></render>
|
|
||||||
<span class="position-relative float-right z-index-1000 margin-right-20 header-buttons">
|
|
||||||
<span class="bold-meta-word font-size-12 cursor-pointer" @click="previewComment" v-if="!commentPreviewd">PREVIEW</span>
|
|
||||||
<span class="bold-meta-word font-size-12 cursor-pointer" @click="commentPreviewd=false" v-else>MARKDOWN</span>
|
|
||||||
|
|
||||||
<span class="bold-meta-word font-size-12 cursor-pointer margin-left-10" @click="publishComment">PUBLISH</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="sorter font-weight-bold font-size-12 margin-top-30 padding-bottom-5">SORT BY <span>BEST</span></div>
|
|
||||||
<div class="comments" v-if="comments.length>0">
|
|
||||||
<div class="comment margin-top-30" v-for="c in comments" :key="c.id" :style="{'margin-left':c.depth * 23 + 'px'}">
|
|
||||||
<i class="iconfont icon-jiantou_shang cursor-pointer upvote" :class="{'vote-highlighted':c.liked==1}" @click="upvoteComment(c)"></i>
|
|
||||||
<i class="iconfont icon-jiantou_xia cursor-pointer downvote" :class="{'vote-highlighted':c.liked==2}" @click="downvoteComment(c)"></i>
|
|
||||||
|
|
||||||
<div class="header font-size-12">
|
|
||||||
<router-link class="uname text-decoration-none" :to="`/${c.uname}`" v-if="c.status==0">{{c.unickname}}</router-link>
|
|
||||||
<span v-else>[deleted]</span>
|
|
||||||
<span class="margin-left-5">{{c.likes}} agreed · {{c.date}} <i v-if="c.edit_date!=undefined">· edited {{c.edit_date}}</i></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- edit reply editor -->
|
|
||||||
<div class="write-comment reply-comment margin-top-10" v-if="currentEditCommentID == c.id">
|
|
||||||
<editor editorHeight="150px" parent="discuss" :toolbarsShow="false" :md="tempEditReply.md" @discussSetMD="editReplySetMD"></editor>
|
|
||||||
</div>
|
|
||||||
<!-- body and footer, hide when editing -->
|
|
||||||
<render :content="c.render" class="body font-size-14 margin-top-8" v-else></render>
|
|
||||||
<div class="footer font-weight-bold font-size-12 margin-top-10">
|
|
||||||
<span v-if="currentEditCommentID != c.id">
|
|
||||||
<span class="cursor-pointer" @click="reply(c.id)" v-if="c.status!=1">Reply</span>
|
|
||||||
<span class="cursor-pointer margin-left-5 margin-right-10" v-if="$store.state.user.id==c.uid && c.status!=1" @click="editReply(c)">Edit</span>
|
|
||||||
<el-dropdown placement="bottom-start" v-if="$store.state.user.id==c.uid">
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
<i class="el-icon-more cursor-pointer"></i>
|
|
||||||
</span>
|
|
||||||
<el-dropdown-menu slot="dropdown">
|
|
||||||
<el-dropdown-item @click.native="deleteComment(c.id)" v-show="c.status!=1"><i class="el-icon-delete" ></i>Delete comment</el-dropdown-item>
|
|
||||||
<el-dropdown-item @click.native="revertComment(c.id)" v-show="c.status==1"><i class="iconfont icon-undo"></i>Revert comment</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
|
|
||||||
|
|
||||||
<span v-if="currentCommentID == c.id" class="float-right">
|
|
||||||
<span class="cursor-pointer" @click="previewReply" v-if="!replyPreviewd">Preview</span>
|
|
||||||
<span class="cursor-pointer" @click="replyPreviewd=false" v-else>Markdown</span>
|
|
||||||
|
|
||||||
<span class=" cursor-pointer margin-left-5" @click="publishReply(c.id)">Publish</span>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span v-else class="float-right">
|
|
||||||
<span class=" cursor-pointer margin-left-5" @click="cancelEditReply">Cancel</span>
|
|
||||||
<span class=" cursor-pointer margin-left-5" @click="publishEditReply(c.id)">Publish</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<!-- reply editor -->
|
|
||||||
<div class="write-comment reply-comment margin-top-10" v-if="currentCommentID == c.id">
|
|
||||||
<editor placeholder="Add to the discussion" editorHeight="150px" parent="discuss" :toolbarsShow="false" :md="tempReply.md" @discussSetMD="replySetMD" v-if="!replyPreviewd"></editor>
|
|
||||||
<render :content="tempReply.render" class="height-150" v-else></render>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="text-align-center padding-top-40 padding-bottom-40 no-comments">
|
|
||||||
<i class="iconfont icon-comments-alt"/>
|
|
||||||
<div class="meta-word font-size-18 margin-top-20" >No Comments Yet</div>
|
|
||||||
<div class="meta-word font-size-16 margin-top-15">Be the first to share what you think!</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import editor from "./editor"
|
|
||||||
import render from "./render"
|
|
||||||
import request from "@/utils/request";
|
|
||||||
export default {
|
|
||||||
props: ['postAuthorID','postID','postType'],
|
|
||||||
components: {editor,render},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tempComment: {
|
|
||||||
md : '',
|
|
||||||
render: ''
|
|
||||||
},
|
|
||||||
tempCommentRender: '',
|
|
||||||
commentPreviewd : false,
|
|
||||||
|
|
||||||
comments: [],
|
|
||||||
currentCommentID: '',
|
|
||||||
|
|
||||||
tempReply: {
|
|
||||||
md:'',
|
|
||||||
render: ''
|
|
||||||
},
|
|
||||||
replyPreviewd : false,
|
|
||||||
tempReplyRender: '',
|
|
||||||
|
|
||||||
currentEditCommentID: '',
|
|
||||||
tempEditReply: {
|
|
||||||
md: '',
|
|
||||||
render: ''
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
"$store.state.user.id"() {
|
|
||||||
if (this.$store.state.user.id != '') {
|
|
||||||
this.init()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
revertComment(id) {
|
|
||||||
request({
|
|
||||||
url: "/web/comment/revert",
|
|
||||||
method: "POST",
|
|
||||||
params: {
|
|
||||||
id: id
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
for (var i=0;i<this.comments.length;i++) {
|
|
||||||
if (this.comments[i].id == id) {
|
|
||||||
this.comments[i].md = res.data.data.md
|
|
||||||
this.comments[i].render = res.data.data.render
|
|
||||||
this.comments[i].uname = res.data.data.uname
|
|
||||||
this.comments[i].unickname = res.data.data.unickname
|
|
||||||
this.comments[i].status = 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
deleteComment(id) {
|
|
||||||
this.$confirm('Are you sure you want to delete your comment?', 'Delete comment', {
|
|
||||||
confirmButtonText: 'DELETE',
|
|
||||||
cancelButtonText: 'Cancel',
|
|
||||||
type: 'warning',
|
|
||||||
center: true
|
|
||||||
}).then(() => {
|
|
||||||
request({
|
|
||||||
url: "/web/comment/delete",
|
|
||||||
method: "POST",
|
|
||||||
params: {
|
|
||||||
id: id
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
for (var i=0;i<this.comments.length;i++) {
|
|
||||||
if (this.comments[i].id == id) {
|
|
||||||
this.comments[i].status= 1
|
|
||||||
this.comments[i].md = '[Deleted]'
|
|
||||||
this.comments[i].render = '[Deleted]'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}).catch(() => {
|
|
||||||
});
|
|
||||||
},
|
|
||||||
upvoteComment(c) {
|
|
||||||
request({
|
|
||||||
url: "/web/comment/like",
|
|
||||||
method: "POST",
|
|
||||||
params: {
|
|
||||||
id: c.id
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
if (c.liked == 0) {
|
|
||||||
c.liked = 1
|
|
||||||
c.likes++
|
|
||||||
} else if (c.liked == 1) {
|
|
||||||
c.liked = 0
|
|
||||||
c.likes --
|
|
||||||
} else {
|
|
||||||
c.liked = 1
|
|
||||||
c.likes = c.likes + 2
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
downvoteComment(c) {
|
|
||||||
request({
|
|
||||||
url: "/web/comment/dislike",
|
|
||||||
method: "POST",
|
|
||||||
params: {
|
|
||||||
id: c.id
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
if (c.liked == 0) {
|
|
||||||
c.liked = 2
|
|
||||||
c.likes--
|
|
||||||
} else if (c.liked == 1) {
|
|
||||||
c.liked = 2
|
|
||||||
c.likes = c.likes - 2
|
|
||||||
} else {
|
|
||||||
c.liked = 0
|
|
||||||
c.likes ++
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
previewReply() {
|
|
||||||
this.replyPreviewd = true
|
|
||||||
request({
|
|
||||||
url: "/web/post/preview",
|
|
||||||
method: "POST",
|
|
||||||
params: {
|
|
||||||
render: this.tempReplyRender
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
this.tempReply.render = res.data.data
|
|
||||||
});
|
|
||||||
},
|
|
||||||
editReplySetMD(md,render) {
|
|
||||||
this.tempEditReply.md = md
|
|
||||||
this.tempEditReply.render = render
|
|
||||||
},
|
|
||||||
replySetMD(md,render) {
|
|
||||||
this.tempReply.md = md
|
|
||||||
this.tempReplyRender = render
|
|
||||||
},
|
|
||||||
cancelEditReply() {
|
|
||||||
for (var i=0;i<this.comments.length;i++) {
|
|
||||||
if (this.comments[i].id == this.currentEditCommentID) {
|
|
||||||
if (this.comments[i].md != this.tempEditReply.md) {
|
|
||||||
this.$confirm('Are you sure that you want to discard your changes?', 'Cancel Edit', {
|
|
||||||
confirmButtonText: 'Discard',
|
|
||||||
cancelButtonText: 'Keep',
|
|
||||||
type: 'warning',
|
|
||||||
center: true
|
|
||||||
}).then(() => {
|
|
||||||
this.currentEditCommentID = ''
|
|
||||||
this.tempEditReply.md = ''
|
|
||||||
}).catch(() => {
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.currentEditCommentID = ''
|
|
||||||
this.tempEditReply.md = ''
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
editReply(c) {
|
|
||||||
this.currentEditCommentID = c.id
|
|
||||||
this.currentCommentID = ''
|
|
||||||
this.tempEditReply = {
|
|
||||||
md: c.md,
|
|
||||||
render: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
reply(id) {
|
|
||||||
if (id == this.currentCommentID) {
|
|
||||||
this.currentCommentID = ''
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.currentCommentID = id
|
|
||||||
this.currentEditCommentID = ''
|
|
||||||
},
|
|
||||||
publishEditReply(id) {
|
|
||||||
request({
|
|
||||||
url: "/web/comment/edit",
|
|
||||||
method: "POST",
|
|
||||||
params: {
|
|
||||||
id: id,
|
|
||||||
content: JSON.stringify(this.tempEditReply)
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
this.currentEditCommentID = ''
|
|
||||||
for (var i=0;i<this.comments.length;i++) {
|
|
||||||
if (this.comments[i].id == id) {
|
|
||||||
this.comments[i].md = this.tempEditReply.md
|
|
||||||
this.comments[i].render = this.tempEditReply.render
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.tempEditReply = {
|
|
||||||
md: '',
|
|
||||||
render: ''
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
publishReply(id) {
|
|
||||||
this.tempReply.render = this.tempReplyRender
|
|
||||||
request({
|
|
||||||
url: "/web/comment/reply",
|
|
||||||
method: "POST",
|
|
||||||
params: {
|
|
||||||
pid: id,
|
|
||||||
post_id: this.postID,
|
|
||||||
post_type: this.postType,
|
|
||||||
content: JSON.stringify(this.tempReply)
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
this.tempReply = {
|
|
||||||
md : '',
|
|
||||||
render: ''
|
|
||||||
}
|
|
||||||
this.tempReplyRender = ''
|
|
||||||
this.replyPreviewd = false
|
|
||||||
this.currentCommentID = ''
|
|
||||||
var newComments = []
|
|
||||||
for (var i=0;i<this.comments.length;i++) {
|
|
||||||
newComments.push(this.comments[i])
|
|
||||||
if (this.comments[i].id == res.data.data.pid) {
|
|
||||||
res.data.data.depth = this.comments[i].depth + 1
|
|
||||||
newComments.push(res.data.data)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.comments = newComments
|
|
||||||
});
|
|
||||||
},
|
|
||||||
publishComment() {
|
|
||||||
this.tempComment.render = this.tempCommentRender
|
|
||||||
request({
|
|
||||||
url: "/web/comment/create",
|
|
||||||
method: "POST",
|
|
||||||
params: {
|
|
||||||
post_id: this.postID,
|
|
||||||
post_type: this.postType,
|
|
||||||
content: JSON.stringify(this.tempComment)
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
this.tempComment = {
|
|
||||||
md : '',
|
|
||||||
render: ''
|
|
||||||
}
|
|
||||||
this.tempCommentRender = ''
|
|
||||||
this.commentPreviewd = false
|
|
||||||
this.comments.unshift(res.data.data)
|
|
||||||
});
|
|
||||||
},
|
|
||||||
previewComment() {
|
|
||||||
this.commentPreviewd = true
|
|
||||||
request({
|
|
||||||
url: "/web/post/preview",
|
|
||||||
method: "POST",
|
|
||||||
params: {
|
|
||||||
render: this.tempCommentRender
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
this.tempComment.render = res.data.data
|
|
||||||
});
|
|
||||||
},
|
|
||||||
discussSetMD(md,render) {
|
|
||||||
this.tempComment.md = md
|
|
||||||
this.tempCommentRender = render
|
|
||||||
},
|
|
||||||
init() {
|
|
||||||
request({
|
|
||||||
url: "/web/comment/query",
|
|
||||||
method: "GET",
|
|
||||||
params: {
|
|
||||||
post_id: this.postID,
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
this.comments = res.data.data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.init()
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="component-editor">
|
|
||||||
<mavon-editor ref="areditor" :style="{height:editorHeight}" :language="$store.state.misc.lang" :value="md" :ishljs = "true" :toolbars="toolbars" :toolbarsFlag="toolbarsShow" :tabSize="2" @change="setMD" :subfield="false" @imgAdd="imgAdd" :placeholder="placeholder"></mavon-editor>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: ['md','parent','editorHeight',"placeholder","toolbarsShow"],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
toolbars: {
|
|
||||||
bold: false, // 粗体
|
|
||||||
italic: true, // 斜体
|
|
||||||
header: false, // 标题
|
|
||||||
underline: true, // 下划线
|
|
||||||
strikethrough: true, // 中划线
|
|
||||||
mark: true, // 标记
|
|
||||||
superscript: true, // 上角标
|
|
||||||
subscript: true, // 下角标
|
|
||||||
quote: false, // 引用
|
|
||||||
ol: false, // 有序列表
|
|
||||||
ul: false, // 无序列表
|
|
||||||
link: true, // 链接
|
|
||||||
imagelink: true, // 图片链接
|
|
||||||
code: true, // code
|
|
||||||
table: true, // 表格
|
|
||||||
/* 2.1.8 */
|
|
||||||
alignleft: true, // 左对齐
|
|
||||||
aligncenter: true, // 居中
|
|
||||||
alignright: true, // 右对齐
|
|
||||||
help: true
|
|
||||||
},
|
|
||||||
mdSetted: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setMD(md,render) {
|
|
||||||
var _this = this
|
|
||||||
if (!this.mdSetted) {
|
|
||||||
setTimeout(function() {
|
|
||||||
_this.mdSetted = true
|
|
||||||
_this.$emit(_this.parent + 'SetMD',md,_this.$refs.areditor.d_render)
|
|
||||||
},200)
|
|
||||||
} else {
|
|
||||||
this.$emit(this.parent + 'SetMD',md,this.$refs.areditor.d_render)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
imgAdd: function(fn, _) {
|
|
||||||
// this.$refs.areditor.$img2Url(fn, "http://test.ccd");
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="component-render overflow-y-auto">
|
|
||||||
<div class="content markdown-body" id="render-content" v-html="content" @click="viewImg" :style="{'padding-top':paddingTop,'padding-left':paddingLeft}"></div>
|
|
||||||
<el-dialog class="white-bg-modal image-modal" :visible.sync="imageModalVisible" top="5vh">
|
|
||||||
<el-row align="middle" justify="center" @click.native="cancelViewImage">
|
|
||||||
<el-col :xs="{span:24,offset:0}" :sm="{span:24,offset:0}" :md="{span: 24,offset:0}" :lg="{ span: 24, offset: 0 }">
|
|
||||||
<img :src="currentImg" alt="" class="width-100p"/>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: ['content','paddingTop','paddingLeft'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
imageModalVisible: false,
|
|
||||||
currentImg: ''
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
viewImg: function(e) {
|
|
||||||
if (e.srcElement.localName == "img") {
|
|
||||||
this.imageModalVisible = true;
|
|
||||||
this.currentImg = e.srcElement.currentSrc;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
cancelViewImage() {
|
|
||||||
this.imageModalVisible = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="user-card padding-10" :style="{'border': '1px solid ' + user.text_color,'box-shadow':'1px 1px 0px ' +user.text_color }">
|
|
||||||
<div>
|
|
||||||
<el-avatar
|
|
||||||
:src="user.avatar"
|
|
||||||
slot="reference"
|
|
||||||
class="display-inline-block vertical-align-middle cursor-pointer"
|
|
||||||
@click.native="userHome"
|
|
||||||
></el-avatar>
|
|
||||||
<router-link :to="'/' + user.name" class="position-absolute margin-left-10 font-weight-500 cursor-pointer text-decoration-none">{{user.nickname}}</router-link>
|
|
||||||
<router-link :to="'/' + user.name" class="position-absolute margin-top-25 margin-left-10 font-size-14 cursor-pointer text-decoration-none">@{{user.name}}</router-link >
|
|
||||||
</div>
|
|
||||||
<div class="margin-top-15 margin-left-10" v-html="user.about" v-if="user.about!='' && user.about!=undefined">
|
|
||||||
</div>
|
|
||||||
<div class="text-align-center padding-top-10 padding-bottom-10 font-weight-bold border-radius-3 cursor-pointer margin-top-10" :style="{'background-color':user.bg_color,'color':followColor()}">FOLLOW</div>
|
|
||||||
|
|
||||||
<div class="margin-top-10 margin-left-10" v-if="user.website!='' && user.website!=undefined">
|
|
||||||
<div class="color-regular font-weight-500">website</div>
|
|
||||||
<div>{{user.website}}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="margin-top-10 margin-left-10" v-if="user.employer!='' && user.employer!=undefined">
|
|
||||||
<div class="color-regular font-weight-500">work</div>
|
|
||||||
<div v-html="user.employer"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="margin-top-10 margin-left-10" v-if="user.education!='' && user.education!=undefined">
|
|
||||||
<div class="color-regular font-weight-500">education</div>
|
|
||||||
<div v-html="user.education"></div>
|
|
||||||
</div>
|
|
||||||
<el-divider></el-divider>
|
|
||||||
<el-row class="margin-top-10 padding-left-10 padding-right-10">
|
|
||||||
<el-col :span="12">
|
|
||||||
<div class="color-regular font-weight-500">location</div>
|
|
||||||
<div><i class="el-icon-location" :style="{color:user.text_color}"></i><span class="font-size-14">{{user.location}}</span></div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<div class="color-regular font-weight-500">joined</div>
|
|
||||||
<div><i class="el-icon-date margin-right-5" :style="{color:user.text_color}"></i><span class="font-size-14">{{user.create_date}}</span></div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import request from "@/utils/request";
|
|
||||||
export default {
|
|
||||||
props: ['user'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
followColor() {
|
|
||||||
if (this.user.bg_color == '#000' && this.user.text_color=='#000') {
|
|
||||||
return '#fff'
|
|
||||||
}
|
|
||||||
return this.user.text_color
|
|
||||||
},
|
|
||||||
userHome() {
|
|
||||||
this.$router.push('/' + this.user.name)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="home">
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="20" :offset="2">
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
<p>content</p>
|
|
||||||
|
|
||||||
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'Home',
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="setting-account margin-top-20">
|
|
||||||
<el-card shadow="hover">
|
|
||||||
<div>aaaa</div>
|
|
||||||
</el-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import request from "@/utils/request";
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="setting-nav">
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="20" :offset="2">
|
|
||||||
<div class="header padding-bottom-10 border-bottom" >
|
|
||||||
<h3 class="big-title margin-bottom-30"><i class="el-icon-s-tools margin-right-10"></i>User Settings</h3>
|
|
||||||
<span v-for="i in items" :key="i" :class="{'selected': selItem==i,'meta-word':selItem!=i}" class="cursor-pointer item font-weight-500" @click="selectItem(i)">{{names[i]}}</span>
|
|
||||||
</div>
|
|
||||||
<router-view></router-view>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
items: [],
|
|
||||||
level: {},
|
|
||||||
|
|
||||||
path : '',
|
|
||||||
selItem : '',
|
|
||||||
|
|
||||||
|
|
||||||
appNames: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
$route() {
|
|
||||||
this.initItem()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
selectItem(i) {
|
|
||||||
this.$router.push('/dev/setting/' + i)
|
|
||||||
},
|
|
||||||
initItem() {
|
|
||||||
this.path = window.location.pathname
|
|
||||||
this.items = ['account','profile']
|
|
||||||
this.level = {account:2,profile:2}
|
|
||||||
this.names = {account: 'Account',profile:'Profile'}
|
|
||||||
this.selItem = this.path.split('/')[3]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initItem()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
@ -1,151 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="setting-profile margin-top-20">
|
|
||||||
<el-row v-if="user.id!=undefined">
|
|
||||||
<el-col :span="13" class="padding-left-20 padding-right-20">
|
|
||||||
<div>
|
|
||||||
<h4>Display name</h4>
|
|
||||||
<div class="meta-word font-size-12">Set a display name. This does not change your username.</div>
|
|
||||||
<el-input size="medium" class="margin-top-5 margin-bottom-5" v-model="user.nickname" :maxlength="30"></el-input>
|
|
||||||
<div class="meta-word font-size-12">{{30-user.nickname.length}} Characters</div>
|
|
||||||
</div>
|
|
||||||
<div class="margin-top-20">
|
|
||||||
<h4>About</h4>
|
|
||||||
<div class="meta-word font-size-12">A brief description of yourself shown on your profile.</div>
|
|
||||||
<el-input type="textarea" class="margin-top-5 margin-bottom-5" v-model="user.about" :maxlength="500"></el-input>
|
|
||||||
<div class="meta-word font-size-12">{{500-user.about.length}} Characters</div>
|
|
||||||
</div>
|
|
||||||
<div class="margin-top-20">
|
|
||||||
<h4>Website url</h4>
|
|
||||||
<el-input size="medium" placeholder="https://yoursite.com" v-model="user.website" :maxlength="30"></el-input>
|
|
||||||
<div class="meta-word font-size-12 margin-top-5">{{30-user.website.length}} Characters</div>
|
|
||||||
</div>
|
|
||||||
<div class="margin-top-20">
|
|
||||||
<h4>Location </h4>
|
|
||||||
<el-input size="medium" placeholder="Your location" v-model="user.location" :maxlength="30"></el-input>
|
|
||||||
<div class="meta-word font-size-12 margin-top-5">{{30-user.location.length}} Characters</div>
|
|
||||||
</div>
|
|
||||||
<div class="margin-top-30">
|
|
||||||
<h4>Background color</h4>
|
|
||||||
<el-color-picker @change="changBgColor" color-format="hex" class="position-absolute" size="small" v-model="user.bg_color"></el-color-picker>
|
|
||||||
<span class="meta-word font-size-12 margin-left-40">The background color used in your home page</span>
|
|
||||||
</div>
|
|
||||||
<div class="margin-top-30 margin-bottom-50">
|
|
||||||
<h4>Text color </h4>
|
|
||||||
<el-color-picker @change="changTextColor" color-format="hex" class="position-absolute" size="small" v-model="user.text_color"></el-color-picker>
|
|
||||||
<span class="meta-word font-size-12 margin-left-40">The text color used in your home page</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-divider content-position="left" >Job/Working</el-divider>
|
|
||||||
<div class="margin-top-40">
|
|
||||||
<h4>Education</h4>
|
|
||||||
<div class="meta-word font-size-12">A brief description of your education.</div>
|
|
||||||
<el-input type="textarea" class="margin-top-5 margin-bottom-5" v-model="user.education" :maxlength="500"></el-input>
|
|
||||||
<div class="meta-word font-size-12">{{500-user.education.length}} Characters</div>
|
|
||||||
</div>
|
|
||||||
<div class="margin-top-20">
|
|
||||||
<h4>Employer</h4>
|
|
||||||
<div class="meta-word font-size-12">e.g : Development Team Leader at <a href="https://google.com">Google</a></div>
|
|
||||||
<el-input type="textarea" class="margin-top-5 margin-bottom-5" v-model="user.employer" :maxlength="500"></el-input>
|
|
||||||
<div class="meta-word font-size-12">{{500-user.employer.length}} Characters</div>
|
|
||||||
</div>
|
|
||||||
<div class="margin-top-20">
|
|
||||||
<h4>Skills </h4>
|
|
||||||
<div class="meta-word font-size-12">What programming skills do you have? Are your a expert?</div>
|
|
||||||
<el-input type="textarea" class="margin-top-5 margin-bottom-5" v-model="user.skills" :maxlength="500"></el-input>
|
|
||||||
<div class="meta-word font-size-12">{{500-user.skills.length}} Characters</div>
|
|
||||||
</div>
|
|
||||||
<div class="margin-top-20">
|
|
||||||
<h4>Working Experience</h4>
|
|
||||||
<div class="meta-word font-size-12">Your working experience and the projects you participated</div>
|
|
||||||
<el-input type="textarea" class="margin-top-5 margin-bottom-5" v-model="user.working_exp" :maxlength="500"></el-input>
|
|
||||||
<div class="meta-word font-size-12">{{500-user.working_exp.length}} Characters</div>
|
|
||||||
</div>
|
|
||||||
<div class="margin-top-20">
|
|
||||||
<h4>Available for</h4>
|
|
||||||
<div class="meta-word font-size-12">What kinds of collaborations or works are you available for?</div>
|
|
||||||
<el-input type="textarea" class="margin-top-5 margin-bottom-5" v-model="user.available_for" :maxlength="500"></el-input>
|
|
||||||
<div class="meta-word font-size-12">{{500-user.available_for.length}} Characters</div>
|
|
||||||
</div>
|
|
||||||
<div class="margin-top-20">
|
|
||||||
<h4>Looking for work</h4>
|
|
||||||
|
|
||||||
<el-switch
|
|
||||||
class="position-absolute"
|
|
||||||
v-model="user.lfw"
|
|
||||||
active-color="#13ce66">
|
|
||||||
</el-switch>
|
|
||||||
<span class="meta-word font-size-12 margin-left-50">Are you looking for a work now?</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="margin-top-20">
|
|
||||||
<el-button type="primary" @click="setProfile">SUBMIT</el-button>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="6" :offset="1">
|
|
||||||
<UserCard :user="user"></UserCard>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import request from "@/utils/request";
|
|
||||||
import UserCard from "../components/user-card";
|
|
||||||
export default {
|
|
||||||
components: {UserCard},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
user: {}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
"$store.state.user.id"() {
|
|
||||||
if (this.$store.state.user.id != '') {
|
|
||||||
this.init()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changBgColor(val) {
|
|
||||||
if (val==null) {
|
|
||||||
this.user.bg_color='#000'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
changTextColor(val) {
|
|
||||||
if (val==null) {
|
|
||||||
this.user.text_color='#000'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setProfile() {
|
|
||||||
request({
|
|
||||||
url: "/user/profile/set",
|
|
||||||
method: "POST",
|
|
||||||
params: {
|
|
||||||
user: JSON.stringify(this.user)
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
this.$message.success("Saved")
|
|
||||||
});
|
|
||||||
},
|
|
||||||
init() {
|
|
||||||
request({
|
|
||||||
url: "/user/profile",
|
|
||||||
method: "GET",
|
|
||||||
params: {
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
this.user = res.data.data
|
|
||||||
if (this.user.lfw ==0) {
|
|
||||||
this.user.lfw = false
|
|
||||||
} else {
|
|
||||||
this.user.lfw = true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.init()
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
Loading…
Reference in new issue