├── .babelrc
├── .electron-vue
    ├── build.config.js
    ├── build.js
    ├── dev-client.js
    ├── dev-runner.js
    ├── webpack.main.config.js
    ├── webpack.renderer.config.js
    └── webpack.web.config.js
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── README.md
├── README_CN.md
├── build
    └── icons
    │   ├── 256x256.png
    │   ├── icon.icns
    │   └── icon.ico
├── dist
    ├── electron
    │   └── .gitkeep
    └── web
    │   └── .gitkeep
├── package-lock.json
├── package.json
├── src
    ├── index.ejs
    ├── main
    │   ├── index.dev.js
    │   └── index.js
    └── renderer
    │   ├── App.vue
    │   ├── Sidebar.vue
    │   ├── Tabs.vue
    │   ├── assets
    │       ├── .gitkeep
    │       ├── IT-Tools-preview.gif
    │       ├── alipay.gif
    │       ├── logo.png
    │       └── wechatpay.gif
    │   ├── components
    │       ├── ColorBoxPage.vue
    │       ├── CronPage.vue
    │       ├── CronPage
    │       │   └── CronHelp.vue
    │       ├── Image64Page.vue
    │       ├── JsonPage.vue
    │       ├── JsonPage
    │       │   └── JsonResultHelp.vue
    │       ├── LandingPage.vue
    │       ├── LandingPage
    │       │   └── Welcome.vue
    │       ├── RegexPage.vue
    │       ├── RegexPage
    │       │   └── RegexHelp.vue
    │       ├── TimestampPage.vue
    │       └── TimestampPage
    │       │   └── TstampHelp.vue
    │   ├── i18n.js
    │   ├── lang
    │       ├── cn.js
    │       ├── en.js
    │       └── messages.js
    │   ├── main.js
    │   ├── router
    │       └── index.js
    │   └── store
    │       ├── index.js
    │       └── modules
    │           ├── Color.js
    │           ├── Cron.js
    │           ├── Image64.js
    │           ├── Json.js
    │           ├── Menu.js
    │           ├── Regex.js
    │           ├── TStamp.js
    │           └── index.js
├── static
    └── .gitkeep
└── test
    ├── .eslintrc
    ├── e2e
        ├── index.js
        ├── specs
        │   └── Launch.spec.js
        └── utils.js
    └── unit
        ├── index.js
        ├── karma.conf.js
        └── specs
            └── LandingPage.spec.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "comments": false,
 3 |   "env": {
 4 |     "test": {
 5 |       "presets": [
 6 |         ["env", {
 7 |           "targets": { "node": 7 }
 8 |         }],
 9 |         "stage-0"
10 |       ],
11 |       "plugins": ["istanbul"]
12 |     },
13 |     "main": {
14 |       "presets": [
15 |         ["env", {
16 |           "targets": { "node": 7 }
17 |         }],
18 |         "stage-0"
19 |       ]
20 |     },
21 |     "renderer": {
22 |       "presets": [
23 |         ["env", {
24 |           "modules": false
25 |         }],
26 |         "stage-0"
27 |       ]
28 |     },
29 |     "web": {
30 |       "presets": [
31 |         ["env", {
32 |           "modules": false
33 |         }],
34 |         "stage-0"
35 |       ]
36 |     }
37 |   },
38 |   "plugins": ["transform-runtime"]
39 | }
40 | 


--------------------------------------------------------------------------------
/.electron-vue/build.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | /**
 4 |  * `electron-packager` options
 5 |  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-packager.html
 6 |  */
 7 | module.exports = {
 8 |   arch: 'x64',
 9 |   asar: true,
10 |   dir: path.join(__dirname, '../'),
11 |   icon: path.join(__dirname, '../build/icons/icon'),
12 |   ignore: /(^\/(src|test|\.[a-z]+|README|yarn|static|dist\/web))|\.gitkeep/,
13 |   out: path.join(__dirname, '../build'),
14 |   overwrite: true,
15 |   platform: process.env.BUILD_TARGET || 'all'
16 | }
17 | 


--------------------------------------------------------------------------------
/.electron-vue/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | process.env.NODE_ENV = 'production'
  4 | 
  5 | const { say } = require('cfonts')
  6 | const chalk = require('chalk')
  7 | const del = require('del')
  8 | const packager = require('electron-packager')
  9 | const webpack = require('webpack')
 10 | const Multispinner = require('multispinner')
 11 | 
 12 | const buildConfig = require('./build.config')
 13 | const mainConfig = require('./webpack.main.config')
 14 | const rendererConfig = require('./webpack.renderer.config')
 15 | const webConfig = require('./webpack.web.config')
 16 | 
 17 | const doneLog = chalk.bgGreen.white(' DONE ') + ' '
 18 | const errorLog = chalk.bgRed.white(' ERROR ') + ' '
 19 | const okayLog = chalk.bgBlue.white(' OKAY ') + ' '
 20 | const isCI = process.env.CI || false
 21 | 
 22 | if (process.env.BUILD_TARGET === 'clean') clean()
 23 | else if (process.env.BUILD_TARGET === 'web') web()
 24 | else build()
 25 | 
 26 | function clean () {
 27 |   del.sync(['build/*', '!build/icons', '!build/icons/icon.*'])
 28 |   console.log(`\n${doneLog}\n`)
 29 |   process.exit()
 30 | }
 31 | 
 32 | function build () {
 33 |   greeting()
 34 | 
 35 |   del.sync(['dist/electron/*', '!.gitkeep'])
 36 | 
 37 |   const tasks = ['main', 'renderer']
 38 |   const m = new Multispinner(tasks, {
 39 |     preText: 'building',
 40 |     postText: 'process'
 41 |   })
 42 | 
 43 |   let results = ''
 44 | 
 45 |   m.on('success', () => {
 46 |     process.stdout.write('\x1B[2J\x1B[0f')
 47 |     console.log(`\n\n${results}`)
 48 |     console.log(`${okayLog}take it away ${chalk.yellow('`electron-packager`')}\n`)
 49 |     bundleApp()
 50 |   })
 51 | 
 52 |   pack(mainConfig).then(result => {
 53 |     results += result + '\n\n'
 54 |     m.success('main')
 55 |   }).catch(err => {
 56 |     m.error('main')
 57 |     console.log(`\n  ${errorLog}failed to build main process`)
 58 |     console.error(`\n${err}\n`)
 59 |     process.exit(1)
 60 |   })
 61 | 
 62 |   pack(rendererConfig).then(result => {
 63 |     results += result + '\n\n'
 64 |     m.success('renderer')
 65 |   }).catch(err => {
 66 |     m.error('renderer')
 67 |     console.log(`\n  ${errorLog}failed to build renderer process`)
 68 |     console.error(`\n${err}\n`)
 69 |     process.exit(1)
 70 |   })
 71 | }
 72 | 
 73 | function pack (config) {
 74 |   return new Promise((resolve, reject) => {
 75 |     config.mode = 'production'
 76 |     webpack(config, (err, stats) => {
 77 |       if (err) reject(err.stack || err)
 78 |       else if (stats.hasErrors()) {
 79 |         let err = ''
 80 | 
 81 |         stats.toString({
 82 |           chunks: false,
 83 |           colors: true
 84 |         })
 85 |         .split(/\r?\n/)
 86 |         .forEach(line => {
 87 |           err += `    ${line}\n`
 88 |         })
 89 | 
 90 |         reject(err)
 91 |       } else {
 92 |         resolve(stats.toString({
 93 |           chunks: false,
 94 |           colors: true
 95 |         }))
 96 |       }
 97 |     })
 98 |   })
 99 | }
100 | 
101 | function bundleApp () {
102 |   buildConfig.mode = 'production'
103 |   packager(buildConfig, (err, appPaths) => {
104 |     if (err) {
105 |       console.log(`\n${errorLog}${chalk.yellow('`electron-packager`')} says...\n`)
106 |       console.log(err + '\n')
107 |     } else {
108 |       console.log(`\n${doneLog}\n`)
109 |     }
110 |   })
111 | }
112 | 
113 | function web () {
114 |   del.sync(['dist/web/*', '!.gitkeep'])
115 |   webConfig.mode = 'production'
116 |   webpack(webConfig, (err, stats) => {
117 |     if (err || stats.hasErrors()) console.log(err)
118 | 
119 |     console.log(stats.toString({
120 |       chunks: false,
121 |       colors: true
122 |     }))
123 | 
124 |     process.exit()
125 |   })
126 | }
127 | 
128 | function greeting () {
129 |   const cols = process.stdout.columns
130 |   let text = ''
131 | 
132 |   if (cols > 85) text = 'lets-build'
133 |   else if (cols > 60) text = 'lets-|build'
134 |   else text = false
135 | 
136 |   if (text && !isCI) {
137 |     say(text, {
138 |       colors: ['yellow'],
139 |       font: 'simple3d',
140 |       space: false
141 |     })
142 |   } else console.log(chalk.yellow.bold('\n  lets-build'))
143 |   console.log()
144 | }


--------------------------------------------------------------------------------
/.electron-vue/dev-client.js:
--------------------------------------------------------------------------------
 1 | const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 2 | 
 3 | hotClient.subscribe(event => {
 4 |   /**
 5 |    * Reload browser when HTMLWebpackPlugin emits a new index.html
 6 |    *
 7 |    * Currently disabled until jantimon/html-webpack-plugin#680 is resolved.
 8 |    * https://github.com/SimulatedGREG/electron-vue/issues/437
 9 |    * https://github.com/jantimon/html-webpack-plugin/issues/680
10 |    */
11 |   // if (event.action === 'reload') {
12 |   //   window.location.reload()
13 |   // }
14 | 
15 |   /**
16 |    * Notify `mainWindow` when `main` process is compiling,
17 |    * giving notice for an expected reload of the `electron` process
18 |    */
19 |   if (event.action === 'compiling') {
20 |     document.body.innerHTML += `
21 |       <style>
22 |         #dev-client {
23 |           background: #4fc08d;
24 |           border-radius: 4px;
25 |           bottom: 20px;
26 |           box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
27 |           color: #fff;
28 |           font-family: 'Source Sans Pro', sans-serif;
29 |           left: 20px;
30 |           padding: 8px 12px;
31 |           position: absolute;
32 |         }
33 |       </style>
34 | 
35 |       <div id="dev-client">
36 |         Compiling Main Process...
37 |       </div>
38 |     `
39 |   }
40 | })
41 | 


--------------------------------------------------------------------------------
/.electron-vue/dev-runner.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | const chalk = require('chalk')
  4 | const electron = require('electron')
  5 | const path = require('path')
  6 | const { say } = require('cfonts')
  7 | const { spawn } = require('child_process')
  8 | const webpack = require('webpack')
  9 | const WebpackDevServer = require('webpack-dev-server')
 10 | const webpackHotMiddleware = require('webpack-hot-middleware')
 11 | 
 12 | const mainConfig = require('./webpack.main.config')
 13 | const rendererConfig = require('./webpack.renderer.config')
 14 | 
 15 | let electronProcess = null
 16 | let manualRestart = false
 17 | let hotMiddleware
 18 | 
 19 | function logStats (proc, data) {
 20 |   let log = ''
 21 | 
 22 |   log += chalk.yellow.bold(`┏ ${proc} Process ${new Array((19 - proc.length) + 1).join('-')}`)
 23 |   log += '\n\n'
 24 | 
 25 |   if (typeof data === 'object') {
 26 |     data.toString({
 27 |       colors: true,
 28 |       chunks: false
 29 |     }).split(/\r?\n/).forEach(line => {
 30 |       log += '  ' + line + '\n'
 31 |     })
 32 |   } else {
 33 |     log += `  ${data}\n`
 34 |   }
 35 | 
 36 |   log += '\n' + chalk.yellow.bold(`┗ ${new Array(28 + 1).join('-')}`) + '\n'
 37 | 
 38 |   console.log(log)
 39 | }
 40 | 
 41 | function startRenderer () {
 42 |   return new Promise((resolve, reject) => {
 43 |     rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
 44 |     rendererConfig.mode = 'development'
 45 |     const compiler = webpack(rendererConfig)
 46 |     hotMiddleware = webpackHotMiddleware(compiler, {
 47 |       log: false,
 48 |       heartbeat: 2500
 49 |     })
 50 | 
 51 |     compiler.hooks.compilation.tap('compilation', compilation => {
 52 |       compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
 53 |         hotMiddleware.publish({ action: 'reload' })
 54 |         cb()
 55 |       })
 56 |     })
 57 | 
 58 |     compiler.hooks.done.tap('done', stats => {
 59 |       logStats('Renderer', stats)
 60 |     })
 61 | 
 62 |     const server = new WebpackDevServer(
 63 |       compiler,
 64 |       {
 65 |         contentBase: path.join(__dirname, '../'),
 66 |         quiet: true,
 67 |         before (app, ctx) {
 68 |           app.use(hotMiddleware)
 69 |           ctx.middleware.waitUntilValid(() => {
 70 |             resolve()
 71 |           })
 72 |         }
 73 |       }
 74 |     )
 75 | 
 76 |     server.listen(9080)
 77 |   })
 78 | }
 79 | 
 80 | function startMain () {
 81 |   return new Promise((resolve, reject) => {
 82 |     mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main)
 83 |     mainConfig.mode = 'development'
 84 |     const compiler = webpack(mainConfig)
 85 | 
 86 |     compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => {
 87 |       logStats('Main', chalk.white.bold('compiling...'))
 88 |       hotMiddleware.publish({ action: 'compiling' })
 89 |       done()
 90 |     })
 91 | 
 92 |     compiler.watch({}, (err, stats) => {
 93 |       if (err) {
 94 |         console.log(err)
 95 |         return
 96 |       }
 97 | 
 98 |       logStats('Main', stats)
 99 | 
100 |       if (electronProcess && electronProcess.kill) {
101 |         manualRestart = true
102 |         process.kill(electronProcess.pid)
103 |         electronProcess = null
104 |         startElectron()
105 | 
106 |         setTimeout(() => {
107 |           manualRestart = false
108 |         }, 5000)
109 |       }
110 | 
111 |       resolve()
112 |     })
113 |   })
114 | }
115 | 
116 | function startElectron () {
117 |   var args = [
118 |     '--inspect=5858',
119 |     path.join(__dirname, '../dist/electron/main.js')
120 |   ]
121 | 
122 |   // detect yarn or npm and process commandline args accordingly
123 |   if (process.env.npm_execpath.endsWith('yarn.js')) {
124 |     args = args.concat(process.argv.slice(3))
125 |   } else if (process.env.npm_execpath.endsWith('npm-cli.js')) {
126 |     args = args.concat(process.argv.slice(2))
127 |   }
128 | 
129 |   electronProcess = spawn(electron, args)
130 |   
131 |   electronProcess.stdout.on('data', data => {
132 |     electronLog(data, 'blue')
133 |   })
134 |   electronProcess.stderr.on('data', data => {
135 |     electronLog(data, 'red')
136 |   })
137 | 
138 |   electronProcess.on('close', () => {
139 |     if (!manualRestart) process.exit()
140 |   })
141 | }
142 | 
143 | function electronLog (data, color) {
144 |   let log = ''
145 |   data = data.toString().split(/\r?\n/)
146 |   data.forEach(line => {
147 |     log += `  ${line}\n`
148 |   })
149 |   if (/[0-9A-z]+/.test(log)) {
150 |     console.log(
151 |       chalk[color].bold('┏ Electron -------------------') +
152 |       '\n\n' +
153 |       log +
154 |       chalk[color].bold('┗ ----------------------------') +
155 |       '\n'
156 |     )
157 |   }
158 | }
159 | 
160 | function greeting () {
161 |   const cols = process.stdout.columns
162 |   let text = ''
163 | 
164 |   if (cols > 104) text = 'electron-vue'
165 |   else if (cols > 76) text = 'electron-|vue'
166 |   else text = false
167 | 
168 |   if (text) {
169 |     say(text, {
170 |       colors: ['yellow'],
171 |       font: 'simple3d',
172 |       space: false
173 |     })
174 |   } else console.log(chalk.yellow.bold('\n  electron-vue'))
175 |   console.log(chalk.blue('  getting ready...') + '\n')
176 | }
177 | 
178 | function init () {
179 |   greeting()
180 | 
181 |   Promise.all([startRenderer(), startMain()])
182 |     .then(() => {
183 |       startElectron()
184 |     })
185 |     .catch(err => {
186 |       console.error(err)
187 |     })
188 | }
189 | 
190 | init()
191 | 


--------------------------------------------------------------------------------
/.electron-vue/webpack.main.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | process.env.BABEL_ENV = 'main'
 4 | 
 5 | const path = require('path')
 6 | const { dependencies } = require('../package.json')
 7 | const webpack = require('webpack')
 8 | 
 9 | const BabiliWebpackPlugin = require('babili-webpack-plugin')
10 | 
11 | let mainConfig = {
12 |   entry: {
13 |     main: path.join(__dirname, '../src/main/index.js')
14 |   },
15 |   externals: [
16 |     ...Object.keys(dependencies || {})
17 |   ],
18 |   module: {
19 |     rules: [
20 |       {
21 |         test: /\.(js)$/,
22 |         enforce: 'pre',
23 |         exclude: /node_modules/,
24 |         use: {
25 |           loader: 'eslint-loader',
26 |           options: {
27 |             formatter: require('eslint-friendly-formatter')
28 |           }
29 |         }
30 |       },
31 |       {
32 |         test: /\.js$/,
33 |         use: 'babel-loader',
34 |         exclude: /node_modules/
35 |       },
36 |       {
37 |         test: /\.node$/,
38 |         use: 'node-loader'
39 |       }
40 |     ]
41 |   },
42 |   node: {
43 |     __dirname: process.env.NODE_ENV !== 'production',
44 |     __filename: process.env.NODE_ENV !== 'production'
45 |   },
46 |   output: {
47 |     filename: '[name].js',
48 |     libraryTarget: 'commonjs2',
49 |     path: path.join(__dirname, '../dist/electron')
50 |   },
51 |   plugins: [
52 |     new webpack.NoEmitOnErrorsPlugin()
53 |   ],
54 |   resolve: {
55 |     extensions: ['.js', '.json', '.node']
56 |   },
57 |   target: 'electron-main'
58 | }
59 | 
60 | /**
61 |  * Adjust mainConfig for development settings
62 |  */
63 | if (process.env.NODE_ENV !== 'production') {
64 |   mainConfig.plugins.push(
65 |     new webpack.DefinePlugin({
66 |       '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
67 |     })
68 |   )
69 | }
70 | 
71 | /**
72 |  * Adjust mainConfig for production settings
73 |  */
74 | if (process.env.NODE_ENV === 'production') {
75 |   mainConfig.plugins.push(
76 |     new BabiliWebpackPlugin(),
77 |     new webpack.DefinePlugin({
78 |       'process.env.NODE_ENV': '"production"'
79 |     })
80 |   )
81 | }
82 | 
83 | module.exports = mainConfig
84 | 


--------------------------------------------------------------------------------
/.electron-vue/webpack.renderer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | process.env.BABEL_ENV = 'renderer'
  4 | 
  5 | const path = require('path')
  6 | const { dependencies } = require('../package.json')
  7 | const webpack = require('webpack')
  8 | 
  9 | const BabiliWebpackPlugin = require('babili-webpack-plugin')
 10 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 11 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 12 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 13 | const { VueLoaderPlugin } = require('vue-loader')
 14 | 
 15 | /**
 16 |  * List of node_modules to include in webpack bundle
 17 |  *
 18 |  * Required for specific packages like Vue UI libraries
 19 |  * that provide pure *.vue files that need compiling
 20 |  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
 21 |  */
 22 | let whiteListedModules = ['vue']
 23 | 
 24 | let rendererConfig = {
 25 |   devtool: '#cheap-module-eval-source-map',
 26 |   entry: {
 27 |     renderer: path.join(__dirname, '../src/renderer/main.js')
 28 |   },
 29 |   externals: [
 30 |     ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
 31 |   ],
 32 |   module: {
 33 |     rules: [
 34 |       {
 35 |         test: /\.(js|vue)$/,
 36 |         enforce: 'pre',
 37 |         exclude: /node_modules/,
 38 |         use: {
 39 |           loader: 'eslint-loader',
 40 |           options: {
 41 |             formatter: require('eslint-friendly-formatter')
 42 |           }
 43 |         }
 44 |       },
 45 |       {
 46 |         test: /\.scss$/,
 47 |         use: ['vue-style-loader', 'css-loader', 'sass-loader']
 48 |       },
 49 |       {
 50 |         test: /\.sass$/,
 51 |         use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']
 52 |       },
 53 |       {
 54 |         test: /\.less$/,
 55 |         use: ['vue-style-loader', 'css-loader', 'less-loader']
 56 |       },
 57 |       {
 58 |         test: /\.css$/,
 59 |         use: ['vue-style-loader', 'css-loader']
 60 |       },
 61 |       {
 62 |         test: /\.html$/,
 63 |         use: 'vue-html-loader'
 64 |       },
 65 |       {
 66 |         test: /\.js$/,
 67 |         use: 'babel-loader',
 68 |         exclude: /node_modules/
 69 |       },
 70 |       {
 71 |         test: /\.node$/,
 72 |         use: 'node-loader'
 73 |       },
 74 |       {
 75 |         test: /\.vue$/,
 76 |         use: {
 77 |           loader: 'vue-loader',
 78 |           options: {
 79 |             extractCSS: process.env.NODE_ENV === 'production',
 80 |             loaders: {
 81 |               sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
 82 |               scss: 'vue-style-loader!css-loader!sass-loader',
 83 |               less: 'vue-style-loader!css-loader!less-loader'
 84 |             }
 85 |           }
 86 |         }
 87 |       },
 88 |       {
 89 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 90 |         use: {
 91 |           loader: 'url-loader',
 92 |           query: {
 93 |             limit: 10000,
 94 |             name: 'imgs/[name]--[folder].[ext]'
 95 |           }
 96 |         }
 97 |       },
 98 |       {
 99 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
100 |         loader: 'url-loader',
101 |         options: {
102 |           limit: 10000,
103 |           name: 'media/[name]--[folder].[ext]'
104 |         }
105 |       },
106 |       {
107 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
108 |         use: {
109 |           loader: 'url-loader',
110 |           query: {
111 |             limit: 10000,
112 |             name: 'fonts/[name]--[folder].[ext]'
113 |           }
114 |         }
115 |       }
116 |     ]
117 |   },
118 |   node: {
119 |     __dirname: process.env.NODE_ENV !== 'production',
120 |     __filename: process.env.NODE_ENV !== 'production'
121 |   },
122 |   plugins: [
123 |     new VueLoaderPlugin(),
124 |     new MiniCssExtractPlugin({filename: 'styles.css'}),
125 |     new HtmlWebpackPlugin({
126 |       filename: 'index.html',
127 |       template: path.resolve(__dirname, '../src/index.ejs'),
128 |       minify: {
129 |         collapseWhitespace: true,
130 |         removeAttributeQuotes: true,
131 |         removeComments: true
132 |       },
133 |       nodeModules: process.env.NODE_ENV !== 'production'
134 |         ? path.resolve(__dirname, '../node_modules')
135 |         : false
136 |     }),
137 |     new webpack.HotModuleReplacementPlugin(),
138 |     new webpack.NoEmitOnErrorsPlugin()
139 |   ],
140 |   output: {
141 |     filename: '[name].js',
142 |     libraryTarget: 'commonjs2',
143 |     path: path.join(__dirname, '../dist/electron')
144 |   },
145 |   resolve: {
146 |     alias: {
147 |       '@': path.join(__dirname, '../src/renderer'),
148 |       'vue$': 'vue/dist/vue.esm.js'
149 |     },
150 |     extensions: ['.js', '.vue', '.json', '.css', '.node']
151 |   },
152 |   target: 'electron-renderer'
153 | }
154 | 
155 | /**
156 |  * Adjust rendererConfig for development settings
157 |  */
158 | if (process.env.NODE_ENV !== 'production') {
159 |   rendererConfig.plugins.push(
160 |     new webpack.DefinePlugin({
161 |       '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
162 |     })
163 |   )
164 | }
165 | 
166 | /**
167 |  * Adjust rendererConfig for production settings
168 |  */
169 | if (process.env.NODE_ENV === 'production') {
170 |   rendererConfig.devtool = ''
171 | 
172 |   rendererConfig.plugins.push(
173 |     new BabiliWebpackPlugin(),
174 |     new CopyWebpackPlugin([
175 |       {
176 |         from: path.join(__dirname, '../static'),
177 |         to: path.join(__dirname, '../dist/electron/static'),
178 |         ignore: ['.*']
179 |       }
180 |     ]),
181 |     new webpack.DefinePlugin({
182 |       'process.env.NODE_ENV': '"production"'
183 |     }),
184 |     new webpack.LoaderOptionsPlugin({
185 |       minimize: true
186 |     })
187 |   )
188 | }
189 | 
190 | module.exports = rendererConfig
191 | 


--------------------------------------------------------------------------------
/.electron-vue/webpack.web.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | process.env.BABEL_ENV = 'web'
  4 | 
  5 | const path = require('path')
  6 | const webpack = require('webpack')
  7 | 
  8 | const BabiliWebpackPlugin = require('babili-webpack-plugin')
  9 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 10 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 11 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 12 | const { VueLoaderPlugin } = require('vue-loader')
 13 | 
 14 | let webConfig = {
 15 |   devtool: '#cheap-module-eval-source-map',
 16 |   entry: {
 17 |     web: path.join(__dirname, '../src/renderer/main.js')
 18 |   },
 19 |   module: {
 20 |     rules: [
 21 |       {
 22 |         test: /\.(js|vue)$/,
 23 |         enforce: 'pre',
 24 |         exclude: /node_modules/,
 25 |         use: {
 26 |           loader: 'eslint-loader',
 27 |           options: {
 28 |             formatter: require('eslint-friendly-formatter')
 29 |           }
 30 |         }
 31 |       },
 32 |       {
 33 |         test: /\.scss$/,
 34 |         use: ['vue-style-loader', 'css-loader', 'sass-loader']
 35 |       },
 36 |       {
 37 |         test: /\.sass$/,
 38 |         use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']
 39 |       },
 40 |       {
 41 |         test: /\.less$/,
 42 |         use: ['vue-style-loader', 'css-loader', 'less-loader']
 43 |       },
 44 |       {
 45 |         test: /\.css$/,
 46 |         use: ['vue-style-loader', 'css-loader']
 47 |       },
 48 |       {
 49 |         test: /\.html$/,
 50 |         use: 'vue-html-loader'
 51 |       },
 52 |       {
 53 |         test: /\.js$/,
 54 |         use: 'babel-loader',
 55 |         include: [ path.resolve(__dirname, '../src/renderer') ],
 56 |         exclude: /node_modules/
 57 |       },
 58 |       {
 59 |         test: /\.vue$/,
 60 |         use: {
 61 |           loader: 'vue-loader',
 62 |           options: {
 63 |             extractCSS: true,
 64 |             loaders: {
 65 |               sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
 66 |               scss: 'vue-style-loader!css-loader!sass-loader',
 67 |               less: 'vue-style-loader!css-loader!less-loader'
 68 |             }
 69 |           }
 70 |         }
 71 |       },
 72 |       {
 73 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 74 |         use: {
 75 |           loader: 'url-loader',
 76 |           query: {
 77 |             limit: 10000,
 78 |             name: 'imgs/[name].[ext]'
 79 |           }
 80 |         }
 81 |       },
 82 |       {
 83 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 84 |         use: {
 85 |           loader: 'url-loader',
 86 |           query: {
 87 |             limit: 10000,
 88 |             name: 'fonts/[name].[ext]'
 89 |           }
 90 |         }
 91 |       }
 92 |     ]
 93 |   },
 94 |   plugins: [
 95 |     new VueLoaderPlugin(),
 96 |     new MiniCssExtractPlugin({filename: 'styles.css'}),
 97 |     new HtmlWebpackPlugin({
 98 |       filename: 'index.html',
 99 |       template: path.resolve(__dirname, '../src/index.ejs'),
100 |       minify: {
101 |         collapseWhitespace: true,
102 |         removeAttributeQuotes: true,
103 |         removeComments: true
104 |       },
105 |       nodeModules: false
106 |     }),
107 |     new webpack.DefinePlugin({
108 |       'process.env.IS_WEB': 'true'
109 |     }),
110 |     new webpack.HotModuleReplacementPlugin(),
111 |     new webpack.NoEmitOnErrorsPlugin()
112 |   ],
113 |   output: {
114 |     filename: '[name].js',
115 |     path: path.join(__dirname, '../dist/web')
116 |   },
117 |   resolve: {
118 |     alias: {
119 |       '@': path.join(__dirname, '../src/renderer'),
120 |       'vue$': 'vue/dist/vue.esm.js'
121 |     },
122 |     extensions: ['.js', '.vue', '.json', '.css']
123 |   },
124 |   target: 'web'
125 | }
126 | 
127 | /**
128 |  * Adjust webConfig for production settings
129 |  */
130 | if (process.env.NODE_ENV === 'production') {
131 |   webConfig.devtool = ''
132 | 
133 |   webConfig.plugins.push(
134 |     new BabiliWebpackPlugin(),
135 |     new CopyWebpackPlugin([
136 |       {
137 |         from: path.join(__dirname, '../static'),
138 |         to: path.join(__dirname, '../dist/web/static'),
139 |         ignore: ['.*']
140 |       }
141 |     ]),
142 |     new webpack.DefinePlugin({
143 |       'process.env.NODE_ENV': '"production"'
144 |     }),
145 |     new webpack.LoaderOptionsPlugin({
146 |       minimize: true
147 |     })
148 |   )
149 | }
150 | 
151 | module.exports = webConfig
152 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | test/unit/coverage/**
2 | test/unit/*.js
3 | test/e2e/*.js
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   parser: 'babel-eslint',
 4 |   parserOptions: {
 5 |     sourceType: 'module'
 6 |   },
 7 |   env: {
 8 |     browser: true,
 9 |     node: true
10 |   },
11 |   extends: 'standard',
12 |   globals: {
13 |     __static: true
14 |   },
15 |   plugins: [
16 |     'html'
17 |   ],
18 |   'rules': {
19 |     // allow paren-less arrow functions
20 |     'arrow-parens': 0,
21 |     // allow async-await
22 |     'generator-star-spacing': 0,
23 |     // allow debugger during development
24 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | dist/electron/*
 3 | dist/web/*
 4 | build/*
 5 | !build/icons
 6 | coverage
 7 | node_modules/
 8 | npm-debug.log
 9 | npm-debug.log.*
10 | thumbs.db
11 | !.gitkeep
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | <br>
 3 | <img width="400" src="/src/renderer/assets/logo.png" alt="electron-vue">
 4 | <br>
 5 | <br>
 6 | </div>
 7 | 
 8 | <p align="center" color="#6a737d">
 9 | A programing helper for developers built with Electron & Vue.js 🚀
10 | </p>
11 | 
12 | <p align="center" style="font-size:16px;">
13 | English | [<a href="https://github.com/TsaiKoga/it-tools/blob/master/README_CN.md">简体中文</a>]
14 | </p>
15 | 
16 | 
17 | # it-tools
18 | 
19 | > Help programers quickly solve problems.
20 | > To make life easy.
21 | 
22 | Now this project including Regex Tool, Timestamp Converter, Color Box, Json Parser, Base64 Converter, Crontab Tool.
23 | 
24 | ## Features
25 | 
26 | - Regex Tool
27 | - Timestamp Converter
28 | - Color Box
29 | - JSON Parser
30 | - Base64 Converter
31 | - Crontab Tool
32 | 
33 | ### Try It
34 | [Download](https://github.com/TsaiKoga/it-tools/releases)
35 | 
36 | [Online Demo](https://tsaikoga.github.com/it-tools/web/index.html)
37 | 
38 | 
39 | ### Preview
40 | 
41 | ![IT Tools](/src/renderer/assets/IT-Tools-preview.gif)
42 | 
43 | ### Build Setup
44 | 
45 | ``` bash
46 | # install dependencies
47 | npm install
48 | 
49 | # serve with hot reload at localhost:9080
50 | npm run dev
51 | 
52 | # build electron application for production
53 | npm run build
54 | 
55 | # run unit & end-to-end tests
56 | npm test
57 | 
58 | 
59 | # lint all JS/Vue component files in `src/`
60 | npm run lint
61 | 
62 | ```
63 | 
64 | ### Donation
65 | 
66 | If this project help you reduce time to develop, you can give me a cup of coffee :)
67 | <br>
68 | <table border="0px" cellpadding="10" cellspacing="0" align="center">
69 |   <tr>
70 |     <td align="center">
71 | <img width="200" height="200" src="/src/renderer/assets/wechatpay.gif" alt="electron-vue"></td>
72 |     <td align="center"><img width="200" height="200" src="/src/renderer/assets/alipay.gif" alt="electron-vue"></td>
73 |     <td align="center">
74 | <a href="https://paypal.me/tsaikoga?locale.x=en_US" title="PayPal" onclick="javascript:window.open('https://www.paypal.com/c2/webapps/mpp/paypal-popup?locale.x=en_C2','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;"><img src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-200px.png" border="0" alt="PayPal Logo"></a></td>
75 |   </tr>
76 |   <tr>
77 |   <td align="center">Wechat Pay</td>
78 |   <td align="center">Ali Pay</td>
79 |   <td align="center">Paypal</td>
80 |   </tr>
81 | </table>
82 | <br>
83 | 
84 | ---
85 | 
86 | This project was generated with [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[8fae476](https://github.com/SimulatedGREG/electron-vue/tree/8fae4763e9d225d3691b627e83b9e09b56f6c935) using [vue-cli](https://github.com/vuejs/vue-cli). Documentation about the original structure can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
87 | 


--------------------------------------------------------------------------------
/README_CN.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | <br>
 3 | <img width="400" src="/src/renderer/assets/logo.png" alt="electron-vue">
 4 | <br>
 5 | <br>
 6 | </div>
 7 | 
 8 | <p align="center" color="#6a737d">
 9 | 这是由 Electron & Vue.js 编写的，为程序员服务的编程工具 🚀
10 | </p>
11 | 
12 | <p align="center" style="font-size:16px;">
13 | [<a href="https://github.com/TsaiKoga/it-tools/blob/master/README.md" />English</a>] | 简体中文
14 | </p>
15 | 
16 | 
17 | # it-tools
18 | 
19 | > 旨在帮助程序员快速开发的小工具.
20 | > 让生活更加美好.
21 | 
22 | 这个工具目前包括“正则表达式”、“时间戳转化”、“颜色盒子”、“Json转化”、“Base64转化“、“定时任务工具”
23 | 
24 | 
25 | ### 特点
26 | 
27 | - 正则表达式
28 | - 时间戳转化
29 | - 颜色盒子
30 | - JSON 转化
31 | - Base64 转化
32 | - 定时任务
33 | 
34 | 
35 | ### 试一下
36 | [下载桌面应用](https://github.com/TsaiKoga/it-tools/releases)
37 | 
38 | [在线演示](https://tsaikoga.github.com/it-tools/web/index.html)
39 | 
40 | 
41 | ### 预览
42 | 
43 | ![IT Tools](/src/renderer/assets/IT-Tools-preview.gif)
44 | 
45 | ### 构建步骤
46 | 
47 | ``` bash
48 | # 安装依赖
49 | npm install
50 | 
51 | # serve with hot reload at localhost:9080
52 | npm run dev
53 | 
54 | # build electron application for production
55 | npm run build
56 | 
57 | # run unit & end-to-end tests
58 | npm test
59 | 
60 | 
61 | # lint all JS/Vue component files in `src/`
62 | npm run lint
63 | 
64 | ```
65 | 
66 | 
67 | ### 捐赠
68 | 
69 | 
70 | 
71 | 如果觉您觉得项目对您有帮助，可否打赏我一杯咖啡喝:
72 | <br>
73 | <table border="0px" cellpadding="10" cellspacing="0" align="center">
74 |   <tr>
75 |     <td align="center">
76 | <img width="200" height="200" src="/src/renderer/assets/wechatpay.gif" alt="electron-vue"></td>
77 |     <td align="center"><img width="200" height="200" src="/src/renderer/assets/alipay.gif" alt="electron-vue"></td>
78 |     <td align="center">
79 | <a href="https://paypal.me/tsaikoga?locale.x=en_US" title="PayPal" onclick="javascript:window.open('https://www.paypal.com/c2/webapps/mpp/paypal-popup?locale.x=en_C2','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;"><img src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-200px.png" border="0" alt="PayPal Logo"></a></td>
80 |   </tr>
81 |   <tr>
82 |   <td align="center">微信</td>
83 |   <td align="center">支付宝</td>
84 |   <td align="center">贝宝</td>
85 |   </tr>
86 | </table>
87 | <br>
88 | 
89 | 此项目由以下工具编写：
90 |  [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[8fae476](https://github.com/SimulatedGREG/electron-vue/tree/8fae4763e9d225d3691b627e83b9e09b56f6c935) using [vue-cli](https://github.com/vuejs/vue-cli). Documentation about the original structure can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
91 | 


--------------------------------------------------------------------------------
/build/icons/256x256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TsaiKoga/it-tools/0df87d3c1e086106cc36f0cd0357812ea779aff2/build/icons/256x256.png


--------------------------------------------------------------------------------
/build/icons/icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TsaiKoga/it-tools/0df87d3c1e086106cc36f0cd0357812ea779aff2/build/icons/icon.icns


--------------------------------------------------------------------------------
/build/icons/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TsaiKoga/it-tools/0df87d3c1e086106cc36f0cd0357812ea779aff2/build/icons/icon.ico


--------------------------------------------------------------------------------
/dist/electron/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TsaiKoga/it-tools/0df87d3c1e086106cc36f0cd0357812ea779aff2/dist/electron/.gitkeep


--------------------------------------------------------------------------------
/dist/web/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TsaiKoga/it-tools/0df87d3c1e086106cc36f0cd0357812ea779aff2/dist/web/.gitkeep


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "IT-Tools",
  3 |   "productName": "IT Tools",
  4 |   "version": "1.5.1",
  5 |   "author": "TsaiKoga <caikejia007@gmail.com>",
  6 |   "description": "Help programers quickly solve problem.To be a life saver.",
  7 |   "license": "Apache-2.0",
  8 |   "main": "./dist/electron/main.js",
  9 |   "scripts": {
 10 |     "build": "node .electron-vue/build.js",
 11 |     "build:darwin": "cross-env BUILD_TARGET=darwin node .electron-vue/build.js",
 12 |     "build:linux": "cross-env BUILD_TARGET=linux node .electron-vue/build.js",
 13 |     "build:mas": "cross-env BUILD_TARGET=mas node .electron-vue/build.js",
 14 |     "build:win32": "cross-env BUILD_TARGET=win32 node .electron-vue/build.js",
 15 |     "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
 16 |     "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
 17 |     "dev": "node .electron-vue/dev-runner.js",
 18 |     "e2e": "npm run pack && mocha test/e2e",
 19 |     "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src test",
 20 |     "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test",
 21 |     "pack": "npm run pack:main && npm run pack:renderer",
 22 |     "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
 23 |     "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
 24 |     "test": "npm run unit && npm run e2e",
 25 |     "unit": "karma start test/unit/karma.conf.js",
 26 |     "postinstall": "npm run lint:fix"
 27 |   },
 28 |   "dependencies": {
 29 |     "cron-parser": "^2.13.0",
 30 |     "moment": "^2.24.0",
 31 |     "node-sass": "^4.12.0",
 32 |     "vue": "^2.5.16",
 33 |     "vue-clipboard2": "^0.3.0",
 34 |     "vue-electron": "^1.0.6",
 35 |     "vue-i18n": "^8.10.0",
 36 |     "vue-router": "^3.0.1",
 37 |     "vuex": "^3.0.1",
 38 |     "vuex-electron": "^1.0.0"
 39 |   },
 40 |   "devDependencies": {
 41 |     "ajv": "^6.5.0",
 42 |     "babel-core": "^6.26.3",
 43 |     "babel-eslint": "^8.2.3",
 44 |     "babel-loader": "^7.1.4",
 45 |     "babel-plugin-istanbul": "^5.1.1",
 46 |     "babel-plugin-transform-runtime": "^6.23.0",
 47 |     "babel-preset-env": "^1.7.0",
 48 |     "babel-preset-stage-0": "^6.24.1",
 49 |     "babel-register": "^6.26.0",
 50 |     "babili-webpack-plugin": "^0.1.2",
 51 |     "cfonts": "^2.1.2",
 52 |     "chai": "^4.1.2",
 53 |     "chalk": "^2.4.1",
 54 |     "copy-webpack-plugin": "^4.5.1",
 55 |     "cross-env": "^5.1.6",
 56 |     "css-loader": "^0.28.11",
 57 |     "del": "^3.0.0",
 58 |     "devtron": "^1.4.0",
 59 |     "electron": "^2.0.4",
 60 |     "electron-debug": "^1.5.0",
 61 |     "electron-devtools-installer": "^2.2.4",
 62 |     "electron-packager": "^13.1.0",
 63 |     "electron-rebuild": "^1.8.1",
 64 |     "eslint": "^4.19.1",
 65 |     "eslint-config-standard": "^11.0.0",
 66 |     "eslint-friendly-formatter": "^4.0.1",
 67 |     "eslint-loader": "^2.0.0",
 68 |     "eslint-plugin-html": "^4.0.3",
 69 |     "eslint-plugin-import": "^2.12.0",
 70 |     "eslint-plugin-node": "^6.0.1",
 71 |     "eslint-plugin-promise": "^3.8.0",
 72 |     "eslint-plugin-standard": "^3.1.0",
 73 |     "file-loader": "^1.1.11",
 74 |     "html-webpack-plugin": "^3.2.0",
 75 |     "inject-loader": "^4.0.1",
 76 |     "karma": "^4.3.0",
 77 |     "karma-chai": "^0.1.0",
 78 |     "karma-coverage": "^1.1.2",
 79 |     "karma-electron": "^6.0.0",
 80 |     "karma-mocha": "^1.3.0",
 81 |     "karma-sourcemap-loader": "^0.3.7",
 82 |     "karma-spec-reporter": "^0.0.32",
 83 |     "karma-webpack": "^3.0.0",
 84 |     "mini-css-extract-plugin": "0.4.0",
 85 |     "mocha": "^5.2.0",
 86 |     "multispinner": "^0.2.1",
 87 |     "node-loader": "^0.6.0",
 88 |     "require-dir": "^1.0.0",
 89 |     "sass-loader": "^7.0.3",
 90 |     "spectron": "^3.8.0",
 91 |     "style-loader": "^0.21.0",
 92 |     "url-loader": "^1.0.1",
 93 |     "vue-html-loader": "^1.2.4",
 94 |     "vue-loader": "^15.2.4",
 95 |     "vue-style-loader": "^4.1.0",
 96 |     "vue-template-compiler": "^2.5.16",
 97 |     "webpack": "^4.15.1",
 98 |     "webpack-cli": "^3.0.8",
 99 |     "webpack-dev-server": "^3.1.4",
100 |     "webpack-hot-middleware": "^2.22.2",
101 |     "webpack-merge": "^4.1.3"
102 |   }
103 | }
104 | 


--------------------------------------------------------------------------------
/src/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>it-tools</title>
 6 |     <% if (htmlWebpackPlugin.options.nodeModules) { %>
 7 |       <!-- Add `node_modules/` to global paths so `require` works properly in development -->
 8 |       <script>
 9 |         require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
10 |       </script>
11 |     <% } %>
12 |   </head>
13 |   <body>
14 |     <div id="app"></div>
15 |     <!-- Set `__static` path to static files in production -->
16 |     <% if (!process.browser) { %>
17 |       <script>
18 |         if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
19 |       </script>
20 |     <% } %>
21 | 
22 |     <!-- webpack builds are automatically injected -->
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/src/main/index.dev.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file is used specifically and only for development. It installs
 3 |  * `electron-debug` & `vue-devtools`. There shouldn't be any need to
 4 |  *  modify this file, but it can be used to extend your development
 5 |  *  environment.
 6 |  */
 7 | 
 8 | /* eslint-disable */
 9 | 
10 | // Install `electron-debug` with `devtron`
11 | require('electron-debug')({ showDevTools: true })
12 | 
13 | // Install `vue-devtools`
14 | require('electron').app.on('ready', () => {
15 |   let installExtension = require('electron-devtools-installer')
16 |   installExtension.default(installExtension.VUEJS_DEVTOOLS)
17 |     .then(() => {})
18 |     .catch(err => {
19 |       console.log('Unable to install `vue-devtools`: \n', err)
20 |     })
21 | })
22 | 
23 | // Require `main` process to boot app
24 | require('./index')


--------------------------------------------------------------------------------
/src/main/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | import { app, BrowserWindow, Menu } from 'electron'
 4 | 
 5 | /**
 6 |  * Set `__static` path to static files in production
 7 |  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
 8 |  */
 9 | if (process.env.NODE_ENV !== 'development') {
10 |   global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
11 | }
12 | 
13 | let mainWindow
14 | const winURL = process.env.NODE_ENV === 'development'
15 |   ? `http://localhost:9080`
16 |   : `file://${__dirname}/index.html`
17 | 
18 | function createWindow () {
19 |   /**
20 |    * Initial window options
21 |    */
22 |   mainWindow = new BrowserWindow({
23 |     height: 650,
24 |     width: 1100,
25 |     'minHeight': 650,
26 |     'minWidth': 1100,
27 |     useContentSize: true,
28 |     titleBarStyle: 'hiddenInset'
29 |   })
30 | 
31 |   mainWindow.loadURL(winURL)
32 | 
33 |   mainWindow.on('closed', () => {
34 |     mainWindow = null
35 |   })
36 | 
37 |   const template = [{
38 |     label: 'Application',
39 |     submenu: [
40 |       { label: 'About Application', selector: 'orderFrontStandardAboutPanel:' },
41 |       { type: 'separator' },
42 |       { label: 'Quit', accelerator: 'Command+Q', click: function () { app.quit() } }
43 |     ]}, {
44 |     label: 'Edit',
45 |     submenu: [
46 |       { label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:' },
47 |       { label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:' },
48 |       { type: 'separator' },
49 |       { label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:' },
50 |       { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
51 |       { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' },
52 |       { label: 'Select All', accelerator: 'CmdOrCtrl+A', selector: 'selectAll:' }
53 |     ]}
54 |   ]
55 | 
56 |   Menu.setApplicationMenu(Menu.buildFromTemplate(template))
57 | }
58 | 
59 | app.on('ready', createWindow)
60 | 
61 | app.on('window-all-closed', () => {
62 |   if (process.platform !== 'darwin') {
63 |     app.quit()
64 |   }
65 | })
66 | 
67 | app.on('activate', () => {
68 |   if (mainWindow === null) {
69 |     createWindow()
70 |   }
71 | })
72 | 


--------------------------------------------------------------------------------
/src/renderer/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div id="content">
 4 |       <div class="columns">
 5 |         <div class="column">
 6 |           <sidebar></sidebar>
 7 |         </div>
 8 |         <div class="column">
 9 |           <router-view>
10 |           </router-view>
11 |         </div>
12 |       </div>
13 |     </div>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 |   import Sidebar from './Sidebar'
19 | 
20 |   export default {
21 |     name: 'it-tools',
22 |     components: {
23 |       'sidebar': Sidebar
24 |     }
25 |   }
26 | </script>
27 | 
28 | <style>
29 |   /* CSS */
30 |   body {
31 |     margin: 0;
32 |     padding: 0;
33 |   }
34 |   #app {
35 |     margin: 0;
36 |     padding: 0;
37 |   }
38 |   #content {
39 |     margin: 0;
40 |     padding: 0;
41 |   }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/src/renderer/Sidebar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <transition name="slide">
  3 |       <aside class="menu broad-menu" v-if="menuState == false" key="broadMenu">
  4 |         <p class="menu-label" @click="toggleMenuSidebar">
  5 |           IT Tools
  6 |         </p>
  7 |         <ul class="menu-list">
  8 |           <router-link :to="{name: 'regex-page'}">
  9 |             <li :class="{'active': $route.name === 'regex-page'}">{{ $t('sidebar.regexTool') }}</li>
 10 |           </router-link>
 11 |           <router-link :to="{name: 'timestamp-page'}">
 12 |             <li :class="{'active': $route.name === 'timestamp-page'}">{{ $t('sidebar.timestampConverter') }}</li>
 13 |           </router-link>
 14 |           <router-link :to="{name: 'color-box-page'}">
 15 |             <li :class="{'active': $route.name === 'color-box-page'}">{{ $t('sidebar.colorBox') }}</li>
 16 |           </router-link>
 17 |           <router-link :to="{name: 'json-page'}">
 18 |             <li :class="{'active': $route.name === 'json-page'}">{{ $t('sidebar.jsonParser') }}</li>
 19 |           </router-link>
 20 |           <router-link :to="{name: 'image64-page'}">
 21 |             <li :class="{'active': $route.name === 'image64-page'}">{{ $t('sidebar.base64Converter') }}</li>
 22 |           </router-link>
 23 |           <router-link :to="{name: 'cron-page'}">
 24 |             <li :class="{'active': $route.name === 'cron-page'}">{{ $t('sidebar.cronTool') }}</li>
 25 |           </router-link>
 26 |         </ul>
 27 | 
 28 |         <div class="lang broadLang">
 29 |           <a href="javascript:void(0);" @click="toggleLanguage">
 30 |             <div class="flag" v-if="$i18n.locale === 'cn'">🇨🇳</div>
 31 |             <div class="flag" v-if="$i18n.locale === 'en'">🇬🇧</div>
 32 |           </a>
 33 |         </div>
 34 |       </aside>
 35 | 
 36 |       <aside class="menu narrow-menu" v-else key="narrowMenu">
 37 |         <p class="menu-label" @click="toggleMenuSidebar">
 38 |           IT
 39 |         </p>
 40 |         <ul class="menu-list">
 41 |           <router-link :to="{name: 'regex-page'}">
 42 |             <li :class="{'active': $route.name === 'regex-page'}">{{ $t('sidebar.regex') }}</li>
 43 |           </router-link>
 44 |           <router-link :to="{name: 'timestamp-page'}">
 45 |             <li :class="{'active': $route.name === 'timestamp-page'}">{{ $t('sidebar.time') }}</li>
 46 |           </router-link>
 47 |           <router-link :to="{name: 'color-box-page'}">
 48 |             <li :class="{'active': $route.name === 'color-box-page'}">{{ $t('sidebar.color') }}</li>
 49 |           </router-link>
 50 |           <router-link :to="{name: 'json-page'}">
 51 |             <li :class="{'active': $route.name === 'json-page'}">{{ $t('sidebar.json') }}</li>
 52 |           </router-link>
 53 |           <router-link :to="{name: 'image64-page'}">
 54 |             <li :class="{'active': $route.name === 'image64-page'}">{{ $t('sidebar.image64') }}</li>
 55 |           </router-link>
 56 |           <router-link :to="{name: 'cron-page'}">
 57 |             <li :class="{'active': $route.name === 'cron-page'}">{{ $t('sidebar.cron') }}</li>
 58 |           </router-link>
 59 |         </ul>
 60 | 
 61 |         <div class="lang">
 62 |           <a href="javascript:void(0);" @click="toggleLanguage">
 63 |             <div class="flag" v-if="$i18n.locale === 'cn'">🇨🇳</div>
 64 |             <div class="flag" v-if="$i18n.locale === 'en'">🇬🇧</div>
 65 |           </a>
 66 |         </div>
 67 |       </aside>
 68 |     </transition>
 69 | </template>
 70 | 
 71 | <script>
 72 | import { mapState, mapActions } from 'vuex'
 73 | 
 74 | export default {
 75 |   name: 'sidebar',
 76 |   methods: {
 77 |     ...mapActions('Menu', [
 78 |       'toggleMenu',
 79 |       'toggleLang'
 80 |     ]),
 81 |     toggleMenuSidebar () {
 82 |       this.toggleMenu()
 83 |     },
 84 |     toggleLanguage () {
 85 |       this.toggleLang(this.$i18n)
 86 |     }
 87 |   },
 88 |   computed: {
 89 |     ...mapState('Menu', {
 90 |       menuState: state => state.menuState,
 91 |       lang: state => state.lang
 92 |     })
 93 |   }
 94 | }
 95 | </script>
 96 | 
 97 | <style lang="scss" scoped>
 98 | $white-font-color: #ffffff;
 99 | $aside-bg-color: #333333;
100 | $aside-font-color: #cccccc;
101 | $aside-active-menu-bg-color: #566573;
102 | 
103 | aside {
104 |   position: fixed;
105 |   top: 0px;
106 |   height: 100vh;
107 |   margin-top: 0px;
108 |   padding: 10px 0px;
109 |   background: $aside-bg-color;
110 |   z-index: 9000;
111 |   p {
112 |     margin-top: 20px;
113 |     font-size: 2em;
114 |     color: $aside-font-color;
115 |     font-weight: 900;
116 |     text-align: center;
117 |     margin-bottom: 20px;
118 |     cursor: pointer;
119 |   }
120 | 
121 |   a {
122 |     padding-bottom: 11px !important;
123 |     width: 100%;
124 |     text-decoration: none;
125 |     color: $white-font-color;
126 |   }
127 | 
128 |   li {
129 |     margin: 0 0;
130 |     padding: 15px 20px;
131 |     list-style: none;
132 |     font-size: 1em;
133 |     width: 100%;
134 |     &:hover {
135 |       background-color: $aside-active-menu-bg-color;
136 |     }
137 |   }
138 |   li.active {
139 |     background-color: $aside-active-menu-bg-color;
140 |   }
141 |   .lang {
142 |     position: absolute;
143 |     color: $white-font-color;
144 |     text-align: center;
145 |     bottom: 10px;
146 |     line-height: 40px;
147 |     width: 100%;
148 |     opacity: 0.5;
149 |     .flag {
150 |       font-size: 2em;
151 |     }
152 |     &:hover {
153 |       opacity: 1;
154 |     }
155 |   }
156 |   .broadLang {
157 |     width: 7vw;
158 |     text-align: center;
159 |   }
160 | }
161 | 
162 | aside.narrow-menu {
163 |   width: 7vw;
164 |   ul {
165 |     margin: 0;
166 |     padding: 0;
167 |     li {
168 |       padding: 1.5vh 0;
169 |       text-align: center;
170 |       font-size: 1em;
171 |     }
172 |   }
173 | }
174 | aside.broad-menu {
175 |   width: 30vw;
176 | }
177 | </style>
178 | 


--------------------------------------------------------------------------------
/src/renderer/Tabs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="tabs-panel">
 3 |     <div class="tabs">
 4 |       <ul>
 5 |         <li v-for="(tab, index) in tabsNav"
 6 |             :class="{'is-active': tab['isActive']}" :key="tab['title']">
 7 |           <a href="javascript:void(0);" v-if="tab !== null" @click="goToTab(tab['title'], index)">
 8 |             {{ tab['title'] }}
 9 |           </a>
10 |         </li>
11 |       </ul>
12 |     </div>
13 | 
14 |     <div class="tab-container">
15 |       <slot></slot>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | 
22 | export default {
23 |   name: 'tabs',
24 |   props: {
25 |     tabsNav: {
26 |       type: Array
27 |     }
28 |   },
29 |   computed: {
30 |   },
31 |   methods: {
32 |     goToTab (title, index) {
33 |       this.$parent.updateNav(title, index)
34 |     }
35 |   }
36 | }
37 | </script>
38 | 
39 | 
40 | <style lang="scss" scoped>
41 |   #tabs-panel {
42 |     .tabs {
43 |       ul {
44 |         list-style: none;
45 |         text-align: left;
46 |         -webkit-app-region: drag;
47 |       }
48 |       ul li {
49 |         display: inline-block;
50 |         background-color: #a3a3a3;
51 |         padding: 1vh 2vw;
52 |         border-top-left-radius: 5px;
53 |         border-top-right-radius: 5px;
54 |         margin-right: 1vw;
55 |       }
56 |       ul li a {
57 |         text-decoration: none;
58 |         color: #333333;
59 |       }
60 |       ul li.is-active {
61 |         background-color: #e6e6e6;
62 |       }
63 |     }
64 |   }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/src/renderer/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TsaiKoga/it-tools/0df87d3c1e086106cc36f0cd0357812ea779aff2/src/renderer/assets/.gitkeep


--------------------------------------------------------------------------------
/src/renderer/assets/IT-Tools-preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TsaiKoga/it-tools/0df87d3c1e086106cc36f0cd0357812ea779aff2/src/renderer/assets/IT-Tools-preview.gif


--------------------------------------------------------------------------------
/src/renderer/assets/alipay.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TsaiKoga/it-tools/0df87d3c1e086106cc36f0cd0357812ea779aff2/src/renderer/assets/alipay.gif


--------------------------------------------------------------------------------
/src/renderer/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TsaiKoga/it-tools/0df87d3c1e086106cc36f0cd0357812ea779aff2/src/renderer/assets/logo.png


--------------------------------------------------------------------------------
/src/renderer/assets/wechatpay.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TsaiKoga/it-tools/0df87d3c1e086106cc36f0cd0357812ea779aff2/src/renderer/assets/wechatpay.gif


--------------------------------------------------------------------------------
/src/renderer/components/ColorBoxPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="color-box-page">
  3 |     <div class="header">
  4 |       <div class="current-color-bar">
  5 |         <label>{{ $t('color.currentColor') }}: </label>
  6 |         <div class="current-color-box">
  7 |           <p v-if="currentColor['name'] !== ''">{{ currentColor['name'] }}</p>
  8 |           <span class="current-color" :style="'background-color:' + currentColor['hex']" v-if="currentColor['hex']">{{ $t('color.copied') }}</span>
  9 |           <p v-if="currentColor['hex'] !== ''">{{ 'HEX: ' + currentColor['hex'] }}</p>
 10 |           <p v-if="currentColor['rgb'] !== ''">{{ 'RGB(' + currentColor['rgb'] +')' }}</p>
 11 |           <p v-if="currentColor['hsl'] !== ''">{{ 'HSL(' + currentColor['hsl'] + ')' }}</p>
 12 |         </div>
 13 |         <a href="javascript:void(0);" class="toggle-form-btn" @click="toggleFormBox" v-if="!toggleColorForm">▼</a>
 14 |         <a href="javascript:void(0);" class="toggle-form-btn" @click="toggleFormBox" v-if="toggleColorForm">▲</a>
 15 |       </div>
 16 | 
 17 |       <transition name="slide-down">
 18 |         <div class="color-form" v-if="toggleColorForm">
 19 |           <div class="hex-group">
 20 |             <label>{{ $t('color.inputHex') }}: </label>
 21 |             <div class="hex-input-group">
 22 |               <span class="hex-symbol">#</span><input type="text" name="hex" class="colorHex" @input="inputHexColor" :value="colorHex">
 23 |             </div>
 24 | 
 25 |             <div class="color-demo-container">
 26 |               <div class="color-demo"
 27 |                   :style="'background-color: #' + colorHex "
 28 |                   v-if="(colorHex !== '') && (colorHex.length === 3 || colorHex.length === 6)"
 29 |               ></div>
 30 |             </div>
 31 |           </div>
 32 | 
 33 |           <div class="rgb-group">
 34 |             <label>{{ $t('color.inputRGB') }}: </label>
 35 |             <div class="rgb-ranges-group">
 36 |               <span class="rgb-range-input-group">
 37 |                 <input type="range" min="0" max="255" @input="inputRgbColor($event, 'r')" :value="colorRgb.split(',')[0]">
 38 |                 <span class="rgb-symbol">R</span>
 39 |                 <input class="rgb-value" type="number" min="0" max="255" :value="colorRgb.split(',')[0]" @input="inputRgbColor($event, 'r')" />
 40 |               </span><br>
 41 |               <span class="rgb-range-input-group">
 42 |                 <input type="range" min="0" max="255" @input="inputRgbColor($event, 'g')" :value="colorRgb.split(',')[1]">
 43 |                 <span class="rgb-symbol">G</span>
 44 |                 <input class="rgb-value" type="number" min="0" max="255" :value="colorRgb.split(',')[1]" @input="inputRgbColor($event, 'g')" />
 45 |               </span><br>
 46 |               <span class="rgb-range-input-group">
 47 |                 <input type="range" min="0" max="255" @input="inputRgbColor($event, 'b')" :value="colorRgb.split(',')[2]">
 48 |                 <span class="rgb-symbol">B</span>
 49 |                 <input class="rgb-value" type="number" min="0" max="255" :value="colorRgb.split(',')[2]" @input="inputRgbColor($event, 'b')" />
 50 |               </span><br>
 51 |             </div>
 52 |             <div class="color-demo-container">
 53 |               <div class="color-demo"
 54 |                 :style="'background-color: rgb(' + colorRgb +')' "
 55 |                 v-if="(colorRgb !== '')"
 56 |               >
 57 |               </div>
 58 |             </div>
 59 |           </div>
 60 | 
 61 |           <div class="hsl-group">
 62 |             <label>{{ $t('color.inputHSL') }}: </label>
 63 |             <div class="hsl-input-group">
 64 |               <input type="number" name="hsl-h" min='0' max='360' class="colorHsl" @input="inputHslColor($event, 'h')" :value="colorHsl.split(',')[0]">
 65 |               <input type="number" name="hsl-s" min='0' max='255' class="colorHsl" @input="inputHslColor($event, 's')" :value="colorHsl.split(',')[1].split('%')[0]">
 66 |               <span class="hsl-symbol">%</span>
 67 |               <input type="number" name="hsl-l" min='0' max='255' class="colorHsl" @input="inputHslColor($event, 'l')" :value="colorHsl.split(',')[2].split('%')[0]">
 68 |               <span class="hsl-symbol">%</span>
 69 |             </div>
 70 | 
 71 |             <div class="color-demo-container">
 72 |               <div class="color-demo"
 73 |                   :style="'background-color: hsl(' + colorHsl + ');'"
 74 |                   v-if="(colorHsl !== '')"
 75 |               ></div>
 76 |             </div>
 77 |           </div>
 78 |         </div>
 79 |       </transition>
 80 |     </div>
 81 | 
 82 |     <div class="color-box-inner">
 83 |       <div class="color-content">
 84 |         <div class="color-row" v-for="(colorRow, rowIndx) in colorMatrix">
 85 |           <div :class="{'color-item': true, 'stretch': colorItem['anim']}"
 86 |               :style="'background-color:' + colorItem['hex']"
 87 |               @click="clickColor(colorItem, rowIndx, colIndx)"
 88 |               v-for="(colorItem, colIndx) in colorRow"
 89 |               @animationend="clickedColor(rowIndx, colIndx)"
 90 |               >
 91 |           </div>
 92 |         </div>
 93 |       </div>
 94 |     </div>
 95 |   </div>
 96 | </template>
 97 | 
 98 | <script>
 99 | import { mapState, mapActions } from 'vuex'
100 | 
101 | export default {
102 |   name: 'color-box-page',
103 |   computed: {
104 |     ...mapState('Color', {
105 |       colorMatrix: state => state.colorMatrix,
106 |       currentColor: state => state.currentColor,
107 |       toggleColorForm: state => state.toggleColorForm,
108 |       colorHex: state => state.colorHex,
109 |       colorRgb: state => state.colorRgb,
110 |       colorHsl: state => state.colorHsl
111 |     })
112 |   },
113 |   methods: {
114 |     ...mapActions('Color', [
115 |       'setCurrentColor',
116 |       'activeColor',
117 |       'disactiveColor',
118 |       'toggleForm',
119 |       'setHexColor',
120 |       'setRgbColor',
121 |       'setHslColor'
122 |     ]),
123 |     clickColor (obj, rowIndx, colIndx) {
124 |       this.activeColor({ row: rowIndx, col: colIndx })
125 |       let currentObj = { name: obj['name'] + '-' + colIndx, hex: obj['hex'], rgb: obj['rgb'], hsl: obj['hsl'] }
126 |       this.setCurrentColor(currentObj)
127 |       this.$copyText(currentObj['hex'])
128 |     },
129 |     clickedColor (rowIndx, colIndx) {
130 |       this.disactiveColor({ row: rowIndx, col: colIndx })
131 |     },
132 |     toggleFormBox () {
133 |       this.toggleForm()
134 |     },
135 |     inputHexColor (event) {
136 |       this.setHexColor(event)
137 |     },
138 |     inputRgbColor (event, sym) {
139 |       this.setRgbColor({ sym: sym, value: event.target.value })
140 |     },
141 |     inputHslColor (event, sym) {
142 |       this.setHslColor({ sym: sym, value: event.target.value })
143 |     }
144 |   }
145 | }
146 | </script>
147 | 
148 | <style lang="scss" scoped>
149 |   $white-font-color: #ffffff;
150 |   $white-bg-color: #ffffff;
151 |   $page-bg-color: #232323;
152 |   $header-bg-color: #333333;
153 |   $label-font-color: #777777;
154 |   $silver-bg-color: #cccccc;
155 |   $inner-bg-color: #7B7D7D;
156 |   $toggle-btn-bg-color: #2980B9;
157 |   $toggle-hover-btn-bg-color: #5499C7;
158 | 
159 |   %flex-layout {
160 |     display: flex;
161 |     display: -webkit-flex;
162 |   }
163 |   %flex-1 {
164 |     flex: 1;
165 |     -webkit-flex: 1;
166 |   }
167 |   %flex-2 {
168 |     flex: 2;
169 |     -webkit-flex: 2;
170 |   }
171 |   %margin-center {
172 |     margin-left: auto;
173 |     margin-right: auto;
174 |   }
175 |   %symbol-font-bg-color {
176 |     color: $white-font-color;
177 |     background: $silver-bg-color;
178 |   }
179 |   %flex-vertical-middle {
180 |     display: -webkit-flex;
181 |     display:         flex;
182 |     -webkit-align-items: center;
183 |     align-items: center;
184 |     -webkit-justify-content: center;
185 |     justify-content: center
186 |   }
187 | 
188 |   /* CSS */
189 |   #color-box-page {
190 |     @extend %flex-layout;
191 |     width: 93vw;
192 |     padding: 10px;
193 |     padding-top: 0;
194 |     background: $page-bg-color;
195 |     text-align: center;
196 |     font-family: futura,helvetica,arial;
197 |     margin-left: 7vw;
198 |     .header {
199 |       height: 8vh;
200 |       width: 91vw;
201 |       background-color: $header-bg-color;
202 |       position: fixed;
203 |       z-index: 1000;
204 |       text-align: left;
205 |       -webkit-app-region: drag;
206 |     }
207 | 
208 |     .header .current-color-bar {
209 |       @extend %flex-layout;
210 |       justify-content: space-between;
211 |     }
212 |     .header label {
213 |       line-height: 8vh;
214 |       margin-right: 1vw;
215 |       margin-left: 1vw;
216 |       font-size: 800;
217 |       color: $white-font-color;
218 |       width: 15vw;
219 |     }
220 |     .header .current-color-box {
221 |       @extend %flex-layout;
222 |       text-align: left;
223 |       line-height: 8vh;
224 |       .current-color {
225 |         height: 5vh;
226 |         width: 8vw;
227 |         margin: 1.5vh 2vw;
228 |         border-radius: 5px;
229 |         line-height: 5vh;
230 |         color: $white-font-color;
231 |         text-align: center;
232 |       }
233 |       p {
234 |         color: $white-font-color;
235 |         font-size: 0.8em;
236 |         margin-left: 1.5vw;
237 |         -webkit-app-region: no-drag;
238 |       }
239 |     }
240 | 
241 | 
242 |     .header .color-form {
243 |       background-color: $white-bg-color;
244 |       padding-top: 2vh;
245 |       label {
246 |         color: $label-font-color;
247 |       }
248 |       .hex-group,
249 |       .rgb-group,
250 |       .hsl-group {
251 |         @extend %flex-layout;
252 |         justify-content: flex-start;
253 |         padding-bottom: 8px;
254 |       }
255 |       .rgb-group .rgb-input-group,
256 |       .hsl-group .hsl-input-group{
257 |         @extend %flex-layout;
258 |         justify-content: flex-start;
259 |       }
260 |       .hex-group .hex-symbol {
261 |         @extend %symbol-font-bg-color;
262 |         height: 8vh;
263 |         font-size: 4vh;
264 |         line-height: 8vh;
265 |         padding: 0 1vw;
266 |       }
267 |       .hex-group input {
268 |         height: 8vh;
269 |         width: 11vw;
270 |         font-size: 4vh;
271 |       }
272 |       // range-input
273 |       .rgb-group input {
274 |         height: 5vh;
275 |         width: 15vw;
276 |         font-size: 4vh;
277 |         padding-left: 0;
278 |       }
279 |       .hsl-group input {
280 |         height: 8vh;
281 |         width: 8vw;
282 |         font-size: 4vh;
283 |         padding-left: 1vw;
284 |       }
285 |       .rgb-group input {
286 |         margin-right: 10px;
287 |       }
288 |       .hsl-group input[name="hsl-h"] {
289 |         margin-right: 10px;
290 |       }
291 |       .hsl-group .hsl-symbol {
292 |         @extend %symbol-font-bg-color;
293 |         font-size: 4vh;
294 |         height: 8vh;
295 |         line-height: 8vh;
296 |         padding: 0 1vw;
297 |         margin-right: 10px;
298 |       }
299 |       .hex-input-group {
300 |         @extend %flex-layout;
301 |         width: 50vw;
302 |       }
303 |       .hsl-input-group {
304 |         @extend %flex-layout;
305 |         width: 50vw;
306 |       }
307 |       .rgb-group .rgb-range-input-group {
308 |         @extend %flex-layout;
309 |         width: 50vw;
310 |         height: 5vh;
311 |         .rgb-symbol {
312 |           @extend %symbol-font-bg-color;
313 |           display: inline-block;
314 |           font-size: 3vh;
315 |           height: 5vh;
316 |           line-height: 5vh;
317 |           width: 4vw;
318 |           text-align: center;
319 |           border: 1px solid $silver-bg-color;
320 |         }
321 |         .rgb-value {
322 |           display: inline-block;
323 |           font-size: 3vh;
324 |           height: 5vh;
325 |           line-height: 5vh;
326 |           width: 5vw;
327 |           text-align: center;
328 |           border: 1px solid $silver-bg-color;
329 |           color: $silver-bg-color;
330 |         }
331 |       }
332 |       .color-demo-container {
333 |         @extend %flex-vertical-middle;
334 |       }
335 |       .color-demo {
336 |         height: 8vh;
337 |         line-height: 8vh;
338 |         width: 10vw;
339 |         border-radius: 5px;
340 |       }
341 |     }
342 |     .slide-down-enter-active {
343 |       transition: all .3s ease;
344 |     }
345 |     .slide-down-leave-active {
346 |       transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
347 |     }
348 |     .slide-down-enter, .slide-down-leave-to {
349 |       transform: translateY(0px);
350 |       opacity: 0;
351 |     }
352 | 
353 | 
354 |     .header .toggle-form-btn {
355 |       width: 5vw;
356 |       height: 8vh;
357 |       line-height: 8vh;
358 |       text-decoration: none;
359 |       text-align: center;
360 |       color: $white-font-color;
361 |       background-color: $toggle-btn-bg-color;
362 |       &:hover {
363 |         background-color: $toggle-hover-btn-bg-color;
364 |       }
365 |     }
366 | 
367 | 
368 |     .color-box-inner {
369 |       @extend %margin-center;
370 |       @extend %flex-1;
371 |       background-color: $inner-bg-color;
372 |       width: 95vw;
373 |       margin-top: 8vh;
374 |       .color-content {
375 |         text-align: center;
376 |       }
377 |       .color-content .color-row {
378 |         @extend %flex-layout;
379 |         justify-content: space-around;
380 |         flex-direction: row
381 |       }
382 |       .color-content .color-row .color-item {
383 |         @extend %flex-2;
384 |         height: 10vh;
385 |         vertical-align: middle;
386 |         cursor: pointer;
387 |       }
388 |     }
389 |     .stretch {
390 |       animation: stretch .5s;
391 |       z-index: 9001;
392 |     }
393 |     @keyframes stretch {
394 |       0% {
395 |         transform: scale(0);
396 |       }
397 |       50% {
398 |         transform: scale(3);
399 |       }
400 |       100% {
401 |         transform: scale(1);
402 |       }
403 |     }
404 |   }
405 | </style>
406 | 


--------------------------------------------------------------------------------
/src/renderer/components/CronPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="cron-page">
  3 |     <tabs :tabsNav="tabsNav">
  4 |       <div class="cron-inner" v-show="currentTab === $t('tabs.home')">
  5 |         <div class="cron-top">
  6 |           <div class="cron-top-label">
  7 |             <label>{{ $t('cron.yourCronExp') }}:</label>
  8 |           </div>
  9 |           <div class="cron-field">
 10 |             <input type="text" name="cron-exp" @input="execCron" @mouseup="termSelected" @keyup="termSelected" :value='cronExp' />
 11 |           </div>
 12 |           <div class="cron-tags-group">
 13 |             <span class="tag min" @click='selectTerm'>{{ $t('cronHelp.minute') }}</span>
 14 |             <span class="tag hour" @click='selectTerm'>{{ $t('cronHelp.hour') }}</span>
 15 |             <span class="tag dayOfMonth" @click='selectTerm'>
 16 |               <div>{{ $t('cronHelp.day') }}</div>
 17 |               <div>({{ $t('cronHelp.month') }})</div>
 18 |             </span>
 19 |             <span class="tag month" @click='selectTerm'>{{ $t('cronHelp.month') }}</span>
 20 |             <span class="tag dayOfWeek" @click='selectTerm'>
 21 |               <div>{{ $t('cronHelp.day') }}</div>
 22 |               <div>({{ $t('cronHelp.week') }})</div>
 23 |             </span>
 24 |           </div>
 25 |         </div>
 26 | 
 27 |         <div class="cron-bottom">
 28 |           <div class="date-list">
 29 |             <label>{{ $t('cron.nextExec') }}</label>
 30 |             <input type="number" name="max-count" @input="execCron" :value='dateMaxCount' min=1 max=200 class="max-count" />
 31 |             <label class="times">{{ $t('cron.times') }}:</label>
 32 |             <ul>
 33 |               <li v-for="(item, i) in cronResult['list']" v-if="cronResult['status'] > 0">{{ i + 1 }}: {{ item }}</li>
 34 |               <li v-if="cronResult['status'] < 0">{{ cronResult['content'] }}</li>
 35 |             </ul>
 36 |           </div>
 37 | 
 38 |           <div class="cron-bottom-right">
 39 |             <div class="cron-bottom-top">
 40 |               <table>
 41 |                 <tr v-for="(term, i) in termOptions[currentUnit]">
 42 |                   <th>{{ term['symbol'] }}</th>
 43 |                   <td>{{ term['explaination'] }}</td>
 44 |                 </tr>
 45 |               </table>
 46 |             </div>
 47 |             <div class="cron-bottom-content">
 48 |               {{ cronResult['content'] }}
 49 |             </div>
 50 |           </div>
 51 |         </div>
 52 |       </div>
 53 | 
 54 |       <div class="cron-inner" v-show="currentTab !== $t('tabs.home')">
 55 |         <cron-help></cron-help>
 56 |       </div>
 57 |     </tabs>
 58 |   </div>
 59 | </template>
 60 | 
 61 | <script>
 62 | import { mapState, mapActions } from 'vuex'
 63 | import Tabs from './../Tabs'
 64 | import cronHelp from './cronPage/cronHelp'
 65 | 
 66 | export default {
 67 |   name: 'cron-page',
 68 |   components: {
 69 |     'tabs': Tabs,
 70 |     'cron-help': cronHelp
 71 |   },
 72 |   computed: {
 73 |     ...mapState('Cron', {
 74 |       tabsNav: state => state.tabs,
 75 |       currentTab: state => state.currentTab,
 76 |       cronExp: state => state.cronExp,
 77 |       dateMaxCount: state => state.dateMaxCount,
 78 |       cronResult: state => state.cronResult,
 79 |       termOptions: state => state.termOptions,
 80 |       currentUnit: state => state.currentUnit
 81 |     })
 82 |   },
 83 |   methods: {
 84 |     ...mapActions('Cron', [
 85 |       'setNav',
 86 |       'cronMatch',
 87 |       'setInitState',
 88 |       'selectUnit',
 89 |       'unitBeSelected'
 90 |     ]),
 91 |     execCron (event) {
 92 |       this.cronMatch(event)
 93 |     },
 94 |     updateNav (title, index) {
 95 |       this.setNav({ title: title, index: index })
 96 |     },
 97 |     setInitStateLang () {
 98 |       if (this.$store.state.Cron.tabs[0]['title'] !== this.$i18n.t('tabs.home')) {
 99 |         let payload = {}
100 |         payload.tabs = [
101 |           { title: this.$i18n.t('tabs.home'), isActive: true },
102 |           { title: this.$i18n.t('tabs.help'), isActive: false }
103 |         ]
104 |         payload.currentTab = this.$i18n.t('tabs.home')
105 |         this.setInitState(payload)
106 |       }
107 |     },
108 |     selectTerm (event) {
109 |       this.selectUnit(event)
110 |     },
111 |     termSelected (event) {
112 |       this.unitBeSelected(event)
113 |     }
114 |   },
115 |   mounted () {
116 |     this.setInitStateLang()
117 |   },
118 |   updated () {
119 |     this.setInitStateLang()
120 |   }
121 | }
122 | </script>
123 | 
124 | <style lang="scss" scoped>
125 |   $white-font-color: #ffffff;
126 |   $page-bg-color: #232323;      // dark
127 | 
128 |   $inner-border-color: #e6e6e6; // silver
129 |   $inner-bg-color: #4C405A;
130 |   $inner-font-color: #ffffff;
131 | 
132 |   $input-border-color: #cccccc;
133 |   $black-bg-color: #333333;
134 |   $input-font-color: #ffffff;
135 |   $input-font-family: "Courier New", Courier, monospace;
136 |   $input-selected-color: #ffff80;
137 |   $input-selected-bg: rgba(255, 255, 128, 0.2);
138 | 
139 |   %flex-layout {
140 |     display: -webkit-flex;
141 |     display: flex;
142 |   }
143 |   %flex-1 {
144 |     flex: 1;
145 |     -webkit-flex: 1;
146 |   }
147 |   %flex-2 {
148 |     flex: 2;
149 |     -webkit-flex: 2;
150 |   }
151 |   %margin-center {
152 |     margin-left: auto;
153 |     margin-right: auto;
154 |   }
155 |   %input-color-style {
156 |     color: $white-font-color;
157 |     background-color: $black-bg-color;
158 |   }
159 |   %input-top-style {
160 |     @extend %input-color-style;
161 |     height: 9vh;
162 |     padding: 0 1vw;
163 |     font-size: 5vh;
164 |     border: 1px solid $input-border-color;
165 |   }
166 | 
167 |   * {
168 |     box-sizing: border-box;
169 |     margin: 0;
170 |     padding: 0;
171 |   }
172 |   body { font-family: 'Source Sans Pro', sans-serif; }
173 |   /* CSS */
174 |   #cron-page {
175 |     @extend %flex-layout;
176 |     padding: 10px;
177 |     background: $page-bg-color;
178 |     text-align: center;
179 |     font-family: futura,helvetica,arial;
180 |     height: 100vh;
181 |     width: 93vw;
182 |     margin-left: 7vw;
183 |   }
184 |   .cron-inner {
185 |     @extend %flex-1;
186 |     @extend %margin-center;
187 |     text-align: left;
188 |     border: 20px solid $inner-border-color;
189 |     background-color: $inner-bg-color;
190 |     color: $inner-font-color;
191 |     padding-right: 15px;
192 |     padding: 2vh 1vw;
193 |     width: 91vw;
194 |   }
195 |   label {
196 |     letter-spacing: 1px;
197 |     font-size: 1em;
198 |     height: 4vh;
199 |     display: block;
200 |     margin-bottom: 1vh;
201 |   }
202 |   .cron-field {
203 |     @extend %flex-layout;
204 |     height: 15vh;
205 |   }
206 |   .cron-field input {
207 |     font-family: $input-font-family;
208 |     text-align: center;
209 |     font-size: 250%;
210 |     width: 100%;
211 |     background-color: $black-bg-color;
212 |     border: 1px solid $input-border-color;
213 |     border-radius: 0.6em;
214 |     color: $input-font-color;
215 |     padding-top: 0.075rem;
216 |     outline: none;
217 |   }
218 |   .cron-field input.invalid {
219 |     border: 1px solid darkred;
220 |   }
221 |   .cron-field input::selection {
222 |     color: $input-selected-color;
223 |     background-color: $input-selected-bg;
224 |   }
225 |   .cron-tags-group {
226 |     text-align: center;
227 |     display: flex;
228 |     padding: 5px;
229 |     justify-content: center;
230 |     margin-bottom: 1vh;
231 |   }
232 |   .cron-tags-group .tag {
233 |     word-break: break-all;
234 |     cursor: pointer;
235 |     padding: 0.1em 0.36em;
236 |   }
237 |   .cron-tags-group .tag.selected {
238 |     color: $input-selected-color;
239 |   }
240 |   .cron-tags-group .tag div {
241 |   }
242 |   .cron-bottom {
243 |     display: flex;
244 |     justify-content: space-around;
245 |   }
246 |   .cron-bottom .date-list {
247 |     width: 40vw;
248 |     height: 52vh;
249 |   }
250 |   .cron-bottom .date-list label {
251 |     display: inline-block;
252 |     margin-left: 0;
253 |     margin-bottom: 2vh;
254 |   }
255 |   .cron-bottom .date-list label.times {
256 |     margin-left: 0.5vw;
257 |   }
258 |   .cron-bottom .date-list .max-count {
259 |     display: inline-block;
260 |     outline: none;
261 |     background-color: $black-bg-color;
262 |     color: $input-font-color;
263 |     padding: 0;
264 |     height: 5vh;
265 |     width: 5vw;
266 |     text-align: center;
267 |     border-radius: 5px;
268 |     font-size: 1em;
269 |     border: 1px solid $input-border-color;
270 |   }
271 |   .cron-bottom .date-list ul {
272 |     list-style: none;
273 |     overflow-y: scroll;
274 |     height: 45vh;
275 |     background-color: $black-bg-color;
276 |     color: $input-font-color;
277 |     outline: none;
278 |     border-radius: 0.6em;
279 |     border: 1px solid $input-border-color;
280 |     margin-bottom: 2vh;
281 |   }
282 |   .cron-bottom .date-list ul li {
283 |     margin-top: 1vh;
284 |     margin-bottom: 1vh;
285 |     margin-right: 2vw;
286 |     padding: 1vh 1vw;
287 |   }
288 |   .cron-bottom .cron-bottom-right {
289 |     width: 40vw;
290 |     height: 52vh;
291 |   }
292 |   .cron-bottom .cron-bottom-right table {
293 |     width: 40vw;
294 |     border-top: 1px solid $input-border-color;
295 |     border-bottom: 1px solid $input-border-color;
296 |     border-spacing: 2px;
297 |   }
298 |   .cron-bottom .cron-bottom-right table tr {
299 |     display: table-row;
300 |     border-top: 1px solid $input-border-color;
301 |     border-bottom: 1px solid $input-border-color;
302 |   }
303 |   .cron-bottom .cron-bottom-right table th,
304 |   .cron-bottom .cron-bottom-right table td {
305 |     padding: 0 2vw;
306 |   }
307 |   .cron-bottom .cron-bottom-right .cron-bottom-content {
308 |     padding-top: 2vh;
309 |     font-size: 1.5em;
310 |   }
311 | </style>
312 | 


--------------------------------------------------------------------------------
/src/renderer/components/CronPage/CronHelp.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cron-help">
  3 |     <div class="doc">
  4 |       <h2></h2>
  5 |       <div class="quick-ref">
  6 |         <div class="cron-explain">
  7 |           <table class="explain-table">
  8 |             <tbody>
  9 |               <tr>
 10 |                 <td class="title">{{ $t('cronHelp.minute') }}</td>
 11 |                 <td class="title">{{ $t('cronHelp.hour') }}</td>
 12 |                 <td class="title">{{ $t('cronHelp.day') }}</td>
 13 |                 <td class="title">{{ $t('cronHelp.month') }}</td>
 14 |                 <td class="title">{{ $t('cronHelp.day') }}</td>
 15 |               </tr>
 16 | 
 17 |               <tr>
 18 |                 <td>*	{{ $t('cronHelp.anyValue') }}</td>
 19 |                 <td>*	{{ $t('cronHelp.anyValue') }}</td>
 20 |                 <td>*	{{ $t('cronHelp.anyValue') }}</td>
 21 |                 <td>*	{{ $t('cronHelp.anyValue') }}</td>
 22 |                 <td>*	{{ $t('cronHelp.anyValue') }}</td>
 23 |               </tr>
 24 |               <tr>
 25 |                 <td>,	{{ $t('cronHelp.valueListSeparator') }}</td>
 26 |                 <td>,	{{ $t('cronHelp.valueListSeparator') }}</td>
 27 |                 <td>,	{{ $t('cronHelp.valueListSeparator') }}</td>
 28 |                 <td>,	{{ $t('cronHelp.valueListSeparator') }}</td>
 29 |                 <td>,	{{ $t('cronHelp.valueListSeparator') }}</td>
 30 |               </tr>
 31 |               <tr>
 32 |                 <td>-	{{ $t('cronHelp.rangeOfValues') }}</td>
 33 |                 <td>-	{{ $t('cronHelp.rangeOfValues') }}</td>
 34 |                 <td>-	{{ $t('cronHelp.rangeOfValues') }}</td>
 35 |                 <td>-	{{ $t('cronHelp.rangeOfValues') }}</td>
 36 |                 <td>-	{{ $t('cronHelp.rangeOfValues') }}</td>
 37 |               </tr>
 38 |               <tr>
 39 |                 <td>/	{{ $t('cronHelp.stepValues') }}</td>
 40 |                 <td>/	{{ $t('cronHelp.stepValues') }}</td>
 41 |                 <td>/	{{ $t('cronHelp.stepValues') }}</td>
 42 |                 <td>/	{{ $t('cronHelp.stepValues') }}</td>
 43 |                 <td>/	{{ $t('cronHelp.stepValues') }}</td>
 44 |               </tr>
 45 |               <tr>
 46 |                 <td>0-59 {{ $t('cronHelp.allowedValues') }}</td>
 47 |                 <td>0-23 {{ $t('cronHelp.allowedValues') }}</td>
 48 |                 <td>1-31 {{ $t('cronHelp.allowedValues') }}</td>
 49 |                 <td>1-12 {{ $t('cronHelp.allowedValues') }}</td>
 50 |                 <td>0-6 {{ $t('cronHelp.allowedValues') }}</td>
 51 |               </tr>
 52 |               <tr>
 53 |                 <td></td>
 54 |                 <td></td>
 55 |                 <td></td>
 56 |                 <td>JAN-DEC {{ $t('cronHelp.alternativeSingleValues') }}</td>
 57 |                 <td>SUN-SAT {{ $t('cronHelp.alternativeSingleValues') }}</td>
 58 |               </tr>
 59 |             </tbody>
 60 |           </table>
 61 |         </div>
 62 |         <div class="cron-graph">
 63 |           <pre>
 64 |             *    *    *    *    *    *
 65 |             -    -    -    -    -    -
 66 |             |    |    |    |    |    |
 67 |             |    |    |    |    |    + {{ $t('cronHelp.year') }} [{{ $t('cronHelp.optional') }}]
 68 |             |    |    |    |    +----- {{ $t('cronHelp.dayOfWeek') }} (0 - 7) (Sunday=0 or 7)
 69 |             |    |    |    +---------- {{ $t('cronHelp.month') }} (1 - 12)
 70 |             |    |    +--------------- {{ $t('cronHelp.dayOfMonth' )}} (1 - 31)
 71 |             |    +-------------------- {{ $t('cronHelp.hour') }} (0 - 23)
 72 |             +------------------------- {{ $t('cronHelp.minute') }} (0 - 59)
 73 |           </pre>
 74 |         </div>
 75 |       </div>
 76 |     </div>
 77 |   </div>
 78 | </template>
 79 | 
 80 | <script>
 81 | export default {
 82 |   name: 'cron-help'
 83 | }
 84 | </script>
 85 | 
 86 | <style lang="scss" scoped>
 87 |   $border-color: #cecece;
 88 |   %flex-layout {
 89 |     display: flex;
 90 |     -webkit-flex: flex;
 91 |     flex-direction: column;
 92 |   }
 93 | 
 94 |   .cron-help {
 95 |     font-family: Nunito,Helvetica Neue,Helvetica,Arial,sans-serif;
 96 |     .doc {
 97 |       h2 {
 98 |         text-align: center;
 99 |         margin-bottom: 3vh;
100 |       }
101 |       .quick-ref {
102 |         @extend %flex-layout;
103 |       }
104 |       .cron-explain {
105 |         display: block;
106 |         width: 89vw;
107 |       }
108 |       table.explain-table {
109 |         border: 1px solid $border-color;
110 |         width: 86vw;
111 |       }
112 |       table tr {
113 |         height: 3.7vh;
114 |       }
115 |       table.explain-table tr td {
116 |         padding: 1vh 1vw;
117 |         border: 1px solid $border-color;
118 |       }
119 |       table tr td.title {
120 |         text-align: center;
121 |         font-weight: bold;
122 |       }
123 |       .cron-graph {
124 |         text-align: left;
125 |         margin-top: 3vh;
126 |         margin-left: 10px;
127 |         margin-right: 10px;
128 |         border-top: 1px solid $border-color;
129 |         padding-top: 4vh;
130 |       }
131 |       .cron-graph pre {
132 |       }
133 |     }
134 |   }
135 | </style>
136 | 


--------------------------------------------------------------------------------
/src/renderer/components/Image64Page.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="image64-page">
  3 |     <div class="image64-inner">
  4 |       <div class="image-part">
  5 |         <img v-if="base64" :src="base64" />
  6 |         <div v-else>{{ $t('image64.dragImgHere') }}</div>
  7 |         <input type="file" name="imageUpload" class="image-upload-field" ref="fileInput" @change="readImg">
  8 |       </div>
  9 |       <div class="base64-part">
 10 |         <div class="base64-btns-group">
 11 |           <div class="copy-btn" @click="copyBase64">{{ $t('image64.copy') }}</div>
 12 |           <div class="clean-btn" @click="cleanAll"> {{ $t('image64.clean') }} </div>
 13 |         </div>
 14 |         <textarea name="base64Area" class="base64-area" ref="base64Input" :value="base64" @input="setBase64" :placeholder="$t('image64.inputBase64Here')"></textarea>
 15 |       </div>
 16 |     </div>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | import { mapState, mapActions } from 'vuex'
 22 | 
 23 | export default {
 24 |   name: 'image64-page',
 25 |   components: {
 26 |   },
 27 |   computed: {
 28 |     ...mapState('Image64', {
 29 |       'base64': state => state.base64
 30 |     })
 31 |   },
 32 |   methods: {
 33 |     ...mapActions('Image64', [
 34 |       'setImage',
 35 |       'resetAll'
 36 |     ]),
 37 |     checkImageValid (file) {
 38 |       const imageTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif']
 39 |       return imageTypes.includes(file['type'])
 40 |     },
 41 |     readImg (event) {
 42 |       const input = this.$refs.fileInput
 43 |       const files = input.files
 44 |       console.log(files[0])
 45 |       if (files && files[0]) {
 46 |         let isValid = this.checkImageValid(files[0])
 47 |         if (!isValid) return null
 48 |         const reader = new FileReader()
 49 |         reader.onload = e => {
 50 |           this.setImage(e.target.result)
 51 |         }
 52 |         reader.readAsDataURL(files[0])
 53 |         this.$emit('input', files[0])
 54 |       }
 55 |     },
 56 |     copyBase64 () {
 57 |       console.log(this.$refs['base64Input'].value)
 58 |       this.$copyText(this.$refs['base64Input'].value)
 59 |     },
 60 |     setBase64 (event) {
 61 |       this.setImage(event.target.value)
 62 |     },
 63 |     cleanAll () {
 64 |       this.resetAll()
 65 |     }
 66 |   }
 67 | 
 68 | }
 69 | </script>
 70 | 
 71 | <style lang="scss" scoped>
 72 |   * {
 73 |     box-sizing: border-box;
 74 |     margin: 0;
 75 |     padding: 0;
 76 |   }
 77 |   body { font-family: 'Source Sans Pro', sans-serif; }
 78 |   /* CSS */
 79 |   $white-font-color: #ffffff;
 80 |   $inner-border-color: #e6e6e6;
 81 |   $inner-bg-color: rgba(9, 20, 28, 1);
 82 | 
 83 |   $image64-page-bg-color: #232323;
 84 | 
 85 |   $base64-area-bg-color: #172a3a;
 86 |   $base64-area-font-color: rgba(255, 255, 255, 0.3);
 87 | 
 88 |   $btn-bg-color: #0f202d;
 89 |   $btn-font-color: hsla(0,0%,100%,.5);
 90 | 
 91 |   %flex-layout {
 92 |     display: -webkit-flex;
 93 |     display: flex;
 94 |   }
 95 |   %flex-1 {
 96 |     -webkit-flex: 1;
 97 |     flex: 1;
 98 |   }
 99 |   %margin-center {
100 |     margin-left: auto;
101 |     margin-right: auto;
102 |   }
103 |   %inner-border {
104 |     border: 20px solid $inner-border-color;
105 |     background-color: $inner-bg-color;
106 |   }
107 |   %base64-area-font {
108 |     font-size: 16px;
109 |     letter-spacing: 0.53px;
110 |   }
111 | 
112 |   #image64-page {
113 |     @extend %flex-layout;
114 |     padding: 10px;
115 |     background: $image64-page-bg-color;
116 |     text-align: center;
117 |     font-family: futura,helvetica,arial;
118 |     height: 100vh;
119 |     margin-left: 7vw;
120 |     .image64-inner {
121 |       @extend %inner-border;
122 |       @extend %flex-layout;
123 |       @extend %flex-1;
124 |       @extend %margin-center;
125 |     }
126 |     .image-part {
127 |       width: 50%;
128 |       height: 100%;
129 |       border-radius: 5px;
130 |       color: #999999;
131 |       font-size: 2em;
132 |       text-align: center;
133 |       line-height: 95vh;
134 |       position: relative;
135 |       img {
136 |         width: 100%;
137 |         height: 100%;
138 |         position: absolute;
139 |         top: 0;
140 |         left: 0;
141 |       }
142 |     }
143 |     .image-upload-field {
144 |       width: 40vw;
145 |       height: 90vh;
146 |       opacity: 0;
147 |       z-index: 1000;
148 |       position: absolute;
149 |       top: 0;
150 |       left: 0;
151 |     }
152 |     .base64-part {
153 |       width: 50%;
154 |       height: 100%;
155 |       position: relative;
156 |       .base64-btns-group {
157 |         height: 10%;
158 |         width: 100%;
159 |         background-color: #172a3a;
160 |         border-bottom: 1px solid #0f202d;
161 |         justify-content: space-between;
162 |       }
163 |       .base64-btns-group .copy-btn,
164 |       .base64-btns-group .clean-btn {
165 |         border-radius: 2px;
166 |         font-weight: 600;
167 |         font-size: 14px;
168 |         text-transform: uppercase;
169 |         background-color: $btn-bg-color;
170 |         color: $btn-font-color;
171 |         letter-spacing: .53px;
172 |         font-family: Open Sans, sans-serif;
173 |         padding: 5px 10px;
174 |         cursor: pointer;
175 |         display: inline-block;
176 |         margin-top: 3%;
177 |         &:hover {
178 |           color: $white-font-color;
179 |         }
180 |       }
181 |       .base64-area {
182 |         @extend %base64-area-font;
183 |         width: 100%;
184 |         height: 90%;
185 |         background-color: $base64-area-bg-color;
186 |         color: $base64-area-font-color;
187 |         padding: 15px;
188 |         outline: none;
189 |         border: 0;
190 |       }
191 |     }
192 |   }
193 | </style>
194 | 


--------------------------------------------------------------------------------
/src/renderer/components/JsonPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="json-page">
  3 |     <div class="json-inner">
  4 |       <div class="json-field">
  5 |         <textarea name="json-value"
  6 |                   class="json-textarea"
  7 |                   rows="8" cols="50"
  8 |                   :placeholder="$t('json.inputJsonTip')"
  9 |                   :value="jsonStr"
 10 |                   @input="convertJsonToObj"></textarea>
 11 |       </div>
 12 | 
 13 |       <div class="json-result">
 14 |         <json-result-help :renderResult="jsonHtml"></json-result-help>
 15 |       </div>
 16 |     </div>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | import { mapState, mapActions } from 'vuex'
 22 | import JsonResultHelp from './JsonPage/JsonResultHelp'
 23 | 
 24 | export default {
 25 |   name: 'json-page',
 26 |   components: {
 27 |     'json-result-help': JsonResultHelp
 28 |   },
 29 |   computed: {
 30 |     ...mapState('Json', {
 31 |       'jsonStr': state => state.jsonStr,
 32 |       'jsonHtml': state => state.jsonHtml,
 33 |       'xmlHtml': state => state.xmlHtml
 34 |     })
 35 |   },
 36 |   methods: {
 37 |     ...mapActions('Json', [
 38 |       'setJsonText',
 39 |       'convertJson'
 40 |     ]),
 41 |     convertJsonToObj (event) {
 42 |       this.setJsonText(event.target.value)
 43 |       this.convertJson()
 44 |     }
 45 |   }
 46 | 
 47 | }
 48 | </script>
 49 | 
 50 | <style lang="scss" scoped>
 51 |   * {
 52 |     box-sizing: border-box;
 53 |     margin: 0;
 54 |     padding: 0;
 55 |   }
 56 |   body { font-family: 'Source Sans Pro', sans-serif; }
 57 |   /* CSS */
 58 |   $white-font: #ffffff;
 59 |   $inner-border-color: #e6e6e6;
 60 |   $inner-bg-color: rgba(9, 20, 28, 1);
 61 | 
 62 |   $json-page-bg-color: #232323;
 63 |   $json-field-bg-color: #172a3a;
 64 | 
 65 |   $json-textarea-font-color: hsla(0,0%,100%,.3);
 66 |   $json-textarea-bg-color: #0f202d;
 67 |   $json-result-font-color: hsla(0,0%,100%,.4);
 68 |   $json-result-bg-color: #172a3a;
 69 | 
 70 |   %flex-layout {
 71 |     display: -webkit-flex;
 72 |     display: flex;
 73 |   }
 74 |   %flex-1 {
 75 |     -webkit-flex: 1;
 76 |     flex: 1;
 77 |   }
 78 |   %margin-center {
 79 |     margin-left: auto;
 80 |     margin-right: auto;
 81 |   }
 82 |   %inner-border {
 83 |     border: 20px solid $inner-border-color;
 84 |     background-color: $inner-bg-color;
 85 |   }
 86 |   %json-textarea-font {
 87 |     font-size: 16px;
 88 |     letter-spacing: 0.53px;
 89 |   }
 90 | 
 91 |   #json-page {
 92 |     @extend %flex-layout;
 93 |     padding: 10px;
 94 |     background: $json-page-bg-color;
 95 |     text-align: center;
 96 |     font-family: futura,helvetica,arial;
 97 |     height: 100vh;
 98 |     width: 93vw;
 99 |     margin-left: 7vw;
100 |   }
101 |   .json-inner {
102 |     @extend %inner-border;
103 |     @extend %flex-layout;
104 |     @extend %flex-1;
105 |     @extend %margin-center;
106 |     text-align: left;
107 |     padding-right: 15px;
108 |     color: $white-font;
109 |     padding: 2vh 1vw;
110 |     width: 90vw;
111 |     justify-content: space-around;
112 |     -webkit-app-region: drag;
113 |     .json-field {
114 |       background-color: $json-field-bg-color;
115 |       -webkit-app-region: no-drag;
116 |     }
117 |     .json-field .json-textarea {
118 |       @extend %flex-1;
119 |       @extend %json-textarea-font;
120 |       color: $json-textarea-font-color;
121 |       background-color: $json-textarea-bg-color;
122 |       padding: 8px;
123 |       height: 100%;
124 |       outline: none;
125 |       border: 0;
126 |     }
127 |     .json-result {
128 |       @extend %flex-1;
129 |       @extend %json-textarea-font;
130 |       overflow: scroll;
131 |       padding: 5px;
132 |       background-color: $json-result-bg-color;
133 |       color: $json-result-font-color;
134 |       -webkit-app-region: no-drag;
135 |     }
136 |   }
137 | </style>
138 | 


--------------------------------------------------------------------------------
/src/renderer/components/JsonPage/JsonResultHelp.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="json-result-help">
  3 |     <div class="btn-bar">
  4 |       <div class="xml-btn" @click="toggleXML" v-if="!isXML"> {{ $t('json.toXML') }} </div>
  5 |       <div class="xml-btn" @click="toggleXML" v-if="isXML"> {{ $t('json.toJSON') }} </div>
  6 |       <div class="reset-btn" @click="resetInput"> {{ $t('json.reset') }} </div>
  7 |       <div class="copy-btn" @click="copyObject"> {{ $t('json.copy') }} </div>
  8 |     </div>
  9 |     <div v-html="renderResult" ref="json-result-elem">
 10 |     </div>
 11 |   </div>
 12 | </template>
 13 | 
 14 | <script>
 15 | import { mapState, mapActions } from 'vuex'
 16 | export default {
 17 | 
 18 |   name: 'json-result-help',
 19 |   props: {
 20 |     renderResult: {
 21 |       type: String
 22 |     }
 23 |   },
 24 |   computed: {
 25 |     ...mapState('Json', {
 26 |       'isXML': state => state.isXML
 27 |     })
 28 |   },
 29 |   mounted () {
 30 |     let foldBtns = this.$refs['json-result-elem'].getElementsByClassName('foldBtn')
 31 |     Array.prototype.forEach.call(foldBtns, (btn) => {
 32 |       btn.addEventListener('click', (event) => {
 33 |         this.foldJson(event)
 34 |       })
 35 |     })
 36 |   },
 37 |   updated () {
 38 |     let foldBtns = this.$refs['json-result-elem'].getElementsByClassName('foldBtn')
 39 |     Array.prototype.forEach.call(foldBtns, (btn) => {
 40 |       btn.addEventListener('click', (event) => {
 41 |         this.foldJson(event)
 42 |       })
 43 |     })
 44 |   },
 45 |   methods: {
 46 |     ...mapActions('Json', [
 47 |       'jsonToXML',
 48 |       'convertJson',
 49 |       'setJsonText'
 50 |     ]),
 51 |     foldJson (event) {
 52 |       event.preventDefault()
 53 |       event.target.parentNode.setAttribute('style', 'display:none;')
 54 |       if (event.target.parentNode.className === 'foldOn') {
 55 |         event.target.parentNode.nextElementSibling.setAttribute('style', 'display:inline;')
 56 |       } else {
 57 |         event.target.parentNode.previousElementSibling.setAttribute('style', 'display:inline;')
 58 |       }
 59 |     },
 60 |     copyObject () {
 61 |       this.$copyText(this.$refs['json-result-elem'].innerText)
 62 |     },
 63 |     toggleXML (event) {
 64 |       event.preventDefault()
 65 |       if (this.isXML) {
 66 |         this.convertJson()
 67 |       } else {
 68 |         this.jsonToXML()
 69 |       }
 70 |     },
 71 |     resetInput (event) {
 72 |       event.preventDefault()
 73 |       this.setJsonText('')
 74 |       this.convertJson()
 75 |     }
 76 |   }
 77 | }
 78 | </script>
 79 | 
 80 | <style lang="scss">
 81 |   $white-font-color: #ffffff;
 82 |   $json-key-color: #92278f;
 83 |   $json-number-color: #25aae2;
 84 |   $json-string-color: #29b973;
 85 |   $json-boolean-color: #f18f01;
 86 |   $json-null-color: #F4D03F;
 87 |   $fold-btn-on-color: #999999;
 88 |   $error-msg-color: #D4AC0D;
 89 |   $btn-bar-border-color: #0f202d;
 90 |   $xml-string-color: #29b973;
 91 |   $xml-val-color: #25aae2;
 92 |   $btn-bg-color: #0f202d;
 93 |   $btn-font-color: hsla(0,0%,100%,.5);
 94 | 
 95 | 
 96 |   %flex-layout {
 97 |     display: flex;
 98 |     display: -webkit-flex;
 99 |   }
100 |   %fold-marker-background {
101 |     background: #08f;
102 |     background: -webkit-linear-gradient(#43a8ff,#0f83e8);
103 |     background: linear-gradient(#43a8ff,#0f83e8);
104 |   }
105 |   %fold-marker-shadow {
106 |     box-shadow: 0 1px 1px rgba(0,0,0,.2), inset 0 0 0 1px rgba(0,0,0,.1);
107 |     text-shadow: 0 -1px rgba(0,0,0,.1);
108 |   }
109 | 
110 |   .json-result-help {
111 |     padding-left: 1vw !important;
112 |     position: relative;
113 |     .json-key {
114 |       color: $json-key-color;
115 |       margin-right: 2px;
116 |     }
117 |     .json-value {
118 |       margin-left: 2px;
119 |     }
120 |     .json-number {
121 |       color: $json-number-color;
122 |     }
123 |     .json-string {
124 |       color: $json-string-color;
125 |     }
126 |     .json-boolean {
127 |       color: $json-boolean-color;
128 |     }
129 |     .json-null {
130 |       color: $json-null-color;
131 |     }
132 |     .foldBtnOn {
133 |       color: $fold-btn-on-color;
134 |       &:before {
135 |         content: "\25BE";
136 |         cursor: pointer;
137 |       }
138 |     }
139 |     .fold-marker {
140 |       @extend %fold-marker-background;
141 |       @extend %fold-marker-shadow;
142 |       border-radius: 4px;
143 |       color: $white-font-color;
144 |       font-family: arial;
145 |       font-size: 12px;
146 |       line-height: 0;
147 |       margin: 0 3px;
148 |       padding: 0 4px 1px;
149 |       cursor: pointer;
150 |     }
151 |     .error {
152 |       font-size: 20px;
153 |       font-weight: bold;
154 |     }
155 |     .error-pos-msg p {
156 |       color: $error-msg-color;
157 |       display: inline;
158 |     }
159 |     .btn-bar {
160 |       @extend %flex-layout;
161 |       position: relative;
162 |       padding: 10px 0;
163 |       border-bottom: 1px solid $btn-bar-border-color;
164 |       justify-content: space-between;
165 |     }
166 |     .xml-string {
167 |       color: $xml-string-color;
168 |     }
169 |     .xml-val {
170 |       color: $xml-val-color;
171 |     }
172 |     .btn-bar .copy-btn,
173 |     .btn-bar .reset-btn,
174 |     .btn-bar .xml-btn {
175 |       border-radius: 2px;
176 |       font-weight: 600;
177 |       font-size: 14px;
178 |       text-transform: uppercase;
179 |       background-color: $btn-bg-color;
180 |       color: $btn-font-color;
181 |       letter-spacing: .53px;
182 |       font-family: Open Sans, sans-serif;
183 |       padding: 5px 10px;
184 |       cursor: pointer;
185 |       &:hover {
186 |         color: $white-font-color;
187 |       }
188 |     }
189 |   }
190 | </style>
191 | 


--------------------------------------------------------------------------------
/src/renderer/components/LandingPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Welcome></Welcome>
 3 | </template>
 4 | 
 5 | <script>
 6 |   import Welcome from './LandingPage/Welcome'
 7 | 
 8 |   export default {
 9 |     name: 'landing-page',
10 |     components: { Welcome },
11 |     methods: {
12 |       open (link) {
13 |         this.$electron.shell.openExternal(link)
14 |       }
15 |     }
16 |   }
17 | </script>
18 | 
19 | <style>
20 |   @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
21 | 
22 |   * {
23 |     box-sizing: border-box;
24 |     margin: 0;
25 |     padding: 0;
26 |   }
27 | 
28 |   body { font-family: 'Source Sans Pro', sans-serif; }
29 | 
30 | 
31 | </style>
32 | 


--------------------------------------------------------------------------------
/src/renderer/components/LandingPage/Welcome.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="g-container">
 3 |     <div class="g-view" v-for="i in 10" :key="i">
 4 |       <div class="g-text">
 5 |         {{ appName }}
 6 |       </div>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   export default {
13 |     data () {
14 |       return {
15 |         appName: 'IT Tools'
16 |       }
17 |     }
18 |   }
19 | </script>
20 | 
21 | <style lang="scss" scoped>
22 | $count: 10;
23 | body {
24 | }
25 | 
26 | .g-container {
27 |   position: relative;
28 |   margin: 0 auto;
29 |   width: 100vw;
30 |   height: 100vh;
31 |   filter: blur(0.2vw) contrast(8);
32 |   -webkit-app-region: drag;
33 | }
34 | 
35 | .g-view {
36 |   top: 50%;
37 |   left: 50%;
38 |   transform: translate(-50%, -50%) rotate(0deg) scale(1);
39 |   position: absolute;
40 |   overflow: hidden;
41 |   font-size: 8vw;
42 |   height: 18vw;
43 |   font-weight: 800;
44 | }
45 | 
46 | .g-text {
47 |   top: 50%;
48 |   left: 50%;
49 |   transform: translate(-50%, -50%);
50 |   position: absolute;
51 |   width: 30vw;
52 |   text-align: center;
53 | }
54 | 
55 | @for $i from 0 through $count {
56 |   .g-view:nth-child(#{$i}) {
57 |     width: #{$i * 3}vw;
58 |     animation: rotate 1.5s ease-in #{$i * 140}ms;
59 |     z-index: 10 - $i;
60 | 
61 |       &::before {
62 |         $j: $i - 1;
63 |         content: "";
64 |         position: absolute;
65 |         top: 50%;
66 |         left: 50%;
67 |         transform: translate(-50%, -50%);
68 |         width: #{$j * 3}vw;
69 |         height: 10vw;
70 |         background: #fff;
71 |         z-index: 1;
72 |       }
73 |   }
74 | }
75 | 
76 | @keyframes rotate {
77 |   0% {
78 |     transform: translate(-50%, -50%) rotate(0deg) scaleX(1);
79 |   }
80 |   50% {
81 |     transform: translate(-50%, -50%) rotate(180deg) scaleX(0.3);
82 |   }
83 |   100% {
84 |     transform: translate(-50%, -50%) rotate(360deg) scaleX(1);
85 |   }
86 | }
87 | 
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/renderer/components/RegexPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="regex-page">
  3 |     <tabs :tabsNav="tabsNav">
  4 |       <div class="regex-inner" v-show="currentTab === $t('tabs.home')">
  5 |         <div class="regex-top">
  6 |           <div class="regex-top-label">
  7 |             <label>{{ $t('regex.yourRegexExp') }}:</label>
  8 |           </div>
  9 |           <div class="regex-top-fields">
 10 |             <div class="regex-diagonal">/</div>
 11 |             <div class="regex-diagnoal-input">
 12 |               <input type="text" name="regex-exp" @input='execRegex' :value='regexExp' />
 13 |             </div>
 14 | 
 15 |             <div class="regex-diagonal">/</div>
 16 |             <div>
 17 |               <input type="text" name="regex-opt" @input="execRegex" :value="regexOpt" />
 18 |             </div>
 19 |           </div>
 20 | 
 21 |         </div>
 22 | 
 23 |         <div class="regex-bottom">
 24 |           <div class="regex-content">
 25 |             <label>{{ $t('regex.yourTestStr') }}: </label>
 26 |             <textarea class="regex-textarea" name="regex-content" @input="execRegex" :value='regexCont'></textarea>
 27 |           </div>
 28 | 
 29 |           <div class="result-content result-init" v-if="regexResult['status'] == 0">
 30 |             {{ regexResult['content'] }}
 31 |           </div>
 32 | 
 33 | 
 34 |           <div class="result-content result-match" v-if="regexResult['status'] == 1">
 35 |             <div>
 36 |               <div class="regex-match-btn">
 37 |                 <label>{{ $t('regex.matchResult') }}:</label>
 38 |                 <a href="javascript:void(0)" class="clean-fields" @click="cleanAllFields">{{ $t('regex.clearFields') }}</a>
 39 |               </div>
 40 |               <div class="result-item">
 41 |                 <div v-for="contArray in regexResult['matchedContext']">
 42 |                   <span v-if="!Array.isArray(contArray)">{{ contArray }}</span>
 43 |                   <span v-else v-for="(cont, indx) in contArray" :class="indx%2 !== 0 ? 'match' : null">{{ cont }}</span>
 44 |                 </div>
 45 |               </div>
 46 |             </div>
 47 |             <ul v-if="regexResult['content'].length > 0">
 48 |               <label>{{ $t('regex.matchGroups') }}:</label>
 49 |               <div class="match-groups">
 50 |                 <li v-for="(itemGroup, index) in regexResult['content']">
 51 |                   <div class="group-item">
 52 |                     <label>{{ $t('regex.matchGroup') }} {{ index + 1 }}:</label>
 53 |                     <ul>
 54 |                       <li v-if="i !== 0" v-for="(item, i) in itemGroup">{{ i }}: {{ item }}</li>
 55 |                     </ul>
 56 |                   </div>
 57 |                 </li>
 58 |               </div>
 59 |             </ul>
 60 |           </div>
 61 | 
 62 |           <div class="result-content result-not-match" v-if="regexResult['status'] == -1">
 63 |             {{ regexResult['content'] }}
 64 |           </div>
 65 |         </div>
 66 |       </div>
 67 | 
 68 |       <div class="regex-inner" v-show="currentTab !== $t('tabs.home')">
 69 |         <regex-help></regex-help>
 70 |       </div>
 71 |     </tabs>
 72 |   </div>
 73 | </template>
 74 | 
 75 | <script>
 76 | import { mapState, mapActions } from 'vuex'
 77 | import Tabs from './../Tabs'
 78 | import RegexHelp from './RegexPage/RegexHelp'
 79 | 
 80 | export default {
 81 |   name: 'regex-page',
 82 |   components: {
 83 |     'tabs': Tabs,
 84 |     'regex-help': RegexHelp
 85 |   },
 86 |   computed: {
 87 |     ...mapState('Regex', {
 88 |       tabsNav: state => state.tabs,
 89 |       currentTab: state => state.currentTab,
 90 |       regexExp: state => state.regexExp,
 91 |       regexOpt: state => state.regexOpt,
 92 |       regexCont: state => state.regexCont,
 93 |       regexResult: state => state.regexResult})
 94 |   },
 95 |   methods: {
 96 |     ...mapActions('Regex', [
 97 |       'setNav',
 98 |       'cleanFields',
 99 |       'regexMatch',
100 |       'setInitState'
101 |     ]),
102 |     cleanAllFields () {
103 |       this.cleanFields()
104 |     },
105 |     execRegex (event) {
106 |       this.regexMatch(event)
107 |     },
108 |     updateNav (title, index) {
109 |       this.setNav({ title: title, index: index })
110 |     },
111 |     setInitStateLang () {
112 |       if (this.$store.state.Regex.tabs[0]['title'] !== this.$i18n.t('tabs.home')) {
113 |         let payload = {}
114 |         payload.tabs = [
115 |           { title: this.$i18n.t('tabs.home'), isActive: true },
116 |           { title: this.$i18n.t('tabs.help'), isActive: false }
117 |         ]
118 |         payload.regexResult = { status: 0, content: this.$i18n.t('regex.heresResult') }
119 |         payload.currentTab = this.$i18n.t('tabs.home')
120 |         this.setInitState(payload)
121 |       }
122 |     }
123 |   },
124 |   mounted () {
125 |     this.setInitStateLang()
126 |   },
127 |   updated () {
128 |     this.setInitStateLang()
129 |   }
130 | }
131 | </script>
132 | 
133 | <style lang="scss" scoped>
134 |   $white-font-color: #ffffff;
135 |   $page-bg-color: #232323;      // dark
136 | 
137 |   $inner-border-color: #e6e6e6; // silver
138 |   $inner-bg-color: #4A708B;
139 |   $inner-font-color: #ffffff;
140 | 
141 |   $clear-btn-font-border-color: #6e6e6e;
142 | 
143 |   $result-init-border-color: #779a73;
144 |   $result-init-bg-color: #cdf3c9;
145 |   $result-init-font-color: #283a26;
146 | 
147 |   $result-not-match-border-color: #EEA2AD;
148 |   $result-not-match-font-color: #EE6A50;
149 |   $result-not-match-bg-color: #EED5D2;
150 | 
151 |   $input-border-color: #dddddd;
152 |   $macth-group-label-color: #84bde7;
153 |   $match-font-color: #0066b3;
154 |   $match-bg-color: #bfe4ff;
155 |   $black-bg-color: #000000;
156 | 
157 |   %flex-layout {
158 |     display: -webkit-flex;
159 |     display: flex;
160 |   }
161 |   %flex-1 {
162 |     flex: 1;
163 |     -webkit-flex: 1;
164 |   }
165 |   %flex-2 {
166 |     flex: 2;
167 |     -webkit-flex: 2;
168 |   }
169 |   %margin-center {
170 |     margin-left: auto;
171 |     margin-right: auto;
172 |   }
173 |   %input-color-style {
174 |     color: $white-font-color;
175 |     background-color: $black-bg-color;
176 |   }
177 |   %input-top-style {
178 |     @extend %input-color-style;
179 |     height: 9vh;
180 |     padding: 0 1vw;
181 |     font-size: 5vh;
182 |     border: 1px solid $input-border-color;
183 |   }
184 | 
185 |   * {
186 |     box-sizing: border-box;
187 |     margin: 0;
188 |     padding: 0;
189 |   }
190 |   body { font-family: 'Source Sans Pro', sans-serif; }
191 |   /* CSS */
192 |   #regex-page {
193 |     @extend %flex-layout;
194 |     padding: 10px;
195 |     background: $page-bg-color;
196 |     text-align: center;
197 |     font-family: futura,helvetica,arial;
198 |     height: 100vh;
199 |     width: 93vw;
200 |     margin-left: 7vw;
201 |   }
202 |   .regex-inner {
203 |     @extend %flex-1;
204 |     @extend %margin-center;
205 |     text-align: left;
206 |     border: 20px solid $inner-border-color;
207 |     background-color: $inner-bg-color;
208 |     color: $inner-font-color;
209 |     padding-right: 15px;
210 |     padding: 2vh 1vw;
211 |     width: 91vw;
212 |   }
213 |   .regex-top {
214 |     height: 15vh;
215 |   }
216 |   .regex-top-fields {
217 |     @extend %flex-layout;
218 |   }
219 |   label {
220 |     letter-spacing: 1px;
221 |     font-size: 1em;
222 |     height: 4vh;
223 |     display: block;
224 |     margin-left: 2vw;
225 |     margin-bottom: 1vh;
226 |   }
227 |   .regex-diagonal {
228 |     @extend %flex-1;
229 |     font-size: 5vh;
230 |     color: $white-font-color;
231 |     margin: 0;
232 |     text-align: center;
233 |     line-height: 9vh;
234 |   }
235 |   .regex-diagnoal-input {
236 |     flex: 19;
237 |     margin: auto;
238 |   }
239 |   .regex-top input[name=regex-exp] {
240 |     width: 72vw;
241 |     @extend %input-top-style;
242 |   }
243 |   .regex-top input[name=regex-opt] {
244 |     width: 10vw;
245 |     @extend %input-top-style;
246 |   }
247 | 
248 |   .regex-bottom {
249 |     padding-top: 3vh;
250 |     height: 64vh;
251 |   }
252 |   .regex-bottom {
253 |     @extend %flex-layout;
254 |   }
255 |   .regex-bottom .regex-match-btn {
256 |     @extend %flex-layout;
257 |   }
258 |   .regex-bottom .regex-match-btn label {
259 |     @extend %flex-2;
260 |   }
261 |   .regex-bottom .regex-match-btn .clean-fields {
262 |     @extend %flex-1;
263 |     margin-right: 1vw;
264 |     background-color: $clear-btn-font-border-color;
265 |     color: $white-font-color;
266 |     border: 1px solid $white-font-color;
267 |     letter-spacing: 1px;
268 |     text-decoration: none;
269 |     text-align: center;
270 |     font-size: 0.9em;
271 |     height: 4vh;
272 |     line-height: 4vh;
273 |     border-radius: 5px;
274 |     margin-bottom: 5px;
275 |     &:hover {
276 |       border: 1px solid $clear-btn-font-border-color;
277 |       color: $clear-btn-font-border-color;
278 |       background: white;
279 |     }
280 |   }
281 |   .regex-bottom .regex-textarea {
282 |     @extend %input-color-style;
283 |     height: 55vh;
284 |     width: 40vw;
285 |     padding: 1vh 1vw;
286 |     font-size: 3vh;
287 |     margin-left: 2vw;
288 |   }
289 |   .regex-content {
290 |     display: inline-block;
291 |     @extend %flex-1;
292 |   }
293 |   .result-content {
294 |     @extend %flex-1;
295 |     display: inline-block;
296 |     text-align: center;
297 |     margin-top: 5vh;
298 |     height: 55vh;
299 |   }
300 |   .result-init {
301 |     border: 10px solid $result-init-border-color;
302 |     background-color: $result-init-bg-color;
303 |     color: $result-init-font-color;
304 |     line-height: 55vh;
305 |   }
306 |   .result-not-match {
307 |     border: 10px solid $result-not-match-border-color;
308 |     background-color: $result-not-match-bg-color;
309 |     color: $result-not-match-font-color;
310 |     line-height: 55vh;
311 |   }
312 |   .result-match {
313 |     text-align: left;
314 |     overflow-y: scroll;
315 |     ul {
316 |       list-style: none;
317 |       .match-groups {
318 |         @extend %input-color-style;
319 |         white-space: pre-wrap;
320 |         word-wrap: break-word;
321 |         border: 1px solid $input-border-color;
322 |         padding: 15px;
323 |         margin-bottom: 10px;
324 |       }
325 |       .match-groups label {
326 |         font-family: futura,helvetica,arial;
327 |         font-variant: small-caps;
328 |         color: $macth-group-label-color;
329 |         font-size: 12px;
330 |         margin: 0;
331 |         height: 0vh;
332 |       }
333 |       .match-groups .group-item {
334 |         font-size: 0.9em;
335 |         margin-bottom: 2vh;
336 |       }
337 |     }
338 |     .result-item {
339 |       @extend %input-color-style;
340 |       white-space: pre-wrap;
341 |       word-wrap: break-word;
342 |       border: 1px solid $input-border-color;
343 |       padding: 15px;
344 |       margin-bottom: 10px;
345 |     }
346 |     span {
347 |       display: inline;
348 |       margin: 0;
349 |       padding: 0;
350 |     }
351 |     .match {
352 |       padding: 2px;
353 |       color: $match-font-color;
354 |       background-color: $match-bg-color;
355 |     }
356 |   }
357 | </style>
358 | 


--------------------------------------------------------------------------------
/src/renderer/components/RegexPage/RegexHelp.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="regex-help">
  3 |     <div class="doc">
  4 |       <h2>{{ $t('regexHelp.title') }}</h2>
  5 |       <div class="quick-ref">
  6 |         <table>
  7 |           <tbody>
  8 | 
  9 |           <tr>
 10 |             <td>[abc]</td>	<td>{{ $t('regexHelp.squareBracket') }}</td>
 11 |           </tr>
 12 | 
 13 |           <tr>
 14 |             <td>[^abc]</td>	<td>{{ $t('regexHelp.squareNot') }}</td>
 15 |           </tr>
 16 | 
 17 |           <tr>
 18 |             <td>[a-z]</td>	<td>{{ $t('regexHelp.squareAny') }}</td>
 19 |           </tr>
 20 | 
 21 |           <tr>
 22 |             <td>[a-zA-Z]</td>	<td>{{ $t('regexHelp.squareRange') }}</td>
 23 |           </tr>
 24 | 
 25 |           <tr>
 26 |             <td>^</td>	<td>{{ $t('regexHelp.startOfLine') }}</td>
 27 |           </tr>
 28 | 
 29 |           <tr>
 30 |             <td>$</td>	<td>{{ $t('regexHelp.endOfLine') }}</td>
 31 |           </tr>
 32 | 
 33 |           <tr>
 34 |             <td>\A</td>	<td>{{ $t('regexHelp.startOfStr') }}</td>
 35 |           </tr>
 36 | 
 37 |           <tr>
 38 |             <td>\z</td>	<td>{{ $t('regexHelp.endOfStr') }}</td>
 39 |           </tr>
 40 | 
 41 |           <tr>
 42 |             <td>.	</td> <td>{{ $t('regexHelp.anyChar') }}</td>
 43 |           </tr>
 44 | 
 45 |           <tr>
 46 |             <td>\s	</td><td>{{ $t('regexHelp.anyWSpace') }}</td>
 47 |           </tr>
 48 | 
 49 |           <tr>
 50 |             <td>\S	</td><td>{{ $t('regexHelp.anyNWSpace') }}</td>
 51 |           </tr>
 52 | 
 53 |           <tr>
 54 |             <td>\d	</td><td>{{ $t('regexHelp.anyDigit') }}</td>
 55 |           </tr>
 56 | 
 57 |           <tr>
 58 |             <td>a.+?</td><td>{{ $t('regexHelp.stopAtFirstA') }}</td>
 59 |           </tr>
 60 | 
 61 |           <tr>
 62 |             <td>(?=Tom)</td><td>{{ $t('regexHelp.matchBeforeTom') }}</td>
 63 |           </tr>
 64 |         </tbody>
 65 |         </table>
 66 | 
 67 |         <table>
 68 |           <tbody>
 69 | 
 70 |           <tr>
 71 |             <td>\D</td><td>{{ $t('regexHelp.anyNDigit') }}</td>
 72 |           </tr>
 73 | 
 74 |           <tr>
 75 |             <td>\w</td><td>{{ $t('regexHelp.anyWordChar') }}</td>
 76 |           </tr>
 77 | 
 78 |           <tr>
 79 |             <td>\W</td><td>{{ $t('regexHelp.anyNWordChar') }}</td>
 80 |           </tr>
 81 | 
 82 |           <tr>
 83 |             <td>\b</td><td>{{ $t('regexHelp.anyWordB') }}</td>
 84 |           </tr>
 85 | 
 86 |           <tr>
 87 |             <td>(...)</td><td>{{ $t('regexHelp.capEnclosed') }}</td>
 88 |           </tr>
 89 | 
 90 |           <tr>
 91 |             <td>(a|b)</td><td>{{ $t('regexHelp.or') }}</td>
 92 |           </tr>
 93 | 
 94 |           <tr>
 95 |             <td>a?</td><td>{{ $t('regexHelp.zeroOne') }}</td>
 96 |           </tr>
 97 | 
 98 |           <tr>
 99 |             <td>a*</td><td>{{ $t('regexHelp.moreThanZero') }}</td>
100 |           </tr>
101 | 
102 |           <tr>
103 |             <td>a+</td><td>{{ $t('regexHelp.moreThanOne') }}</td>
104 |           </tr>
105 | 
106 |           <tr>
107 |             <td>a{3}</td><td>{{ $t('regexHelp.exactly3') }}</td>
108 |           </tr>
109 | 
110 |           <tr>
111 |             <td>a{3,}</td><td>{{ $t('regexHelp.moreThan3') }}</td>
112 |           </tr>
113 | 
114 |           <tr>
115 |             <td>a{3,6}</td><td>{{ $t('regexHelp.between') }}</td>
116 |           </tr>
117 | 
118 |           <tr>
119 |             <td>(?:Tom)</td><td>{{ $t('regexHelp.matchTom') }}</td>
120 |           </tr>
121 | 
122 |           <tr>
123 |             <td>(?<=Tom)</td><td>{{ $t('regexHelp.matchBehindTom') }}</td>
124 |           </tr>
125 |           </tbody>
126 |         </table>
127 |       </div>
128 | 
129 |       <div class="regex-options">
130 |         <p>{{ $t('regexHelp.options') }}:</p>
131 |         <p>
132 |           <code>i</code>
133 |            {{ $t('regexHelp.caseI') }}
134 |            <code>u</code>
135 |             {{ $t('regexHelp.unicode') }}
136 |            <br/>
137 |            <code>s</code>
138 |             {{ $t('regexHelp.newLine') }}
139 |            <code>y</code>
140 |             {{ $t('regexHelp.indexMatch') }}
141 |         </p>
142 |       </div>
143 |     </div>
144 |   </div>
145 | </template>
146 | 
147 | <script>
148 | export default {
149 |   name: 'regex-help'
150 | }
151 | </script>
152 | 
153 | <style lang="scss" scoped>
154 |   $border-color: #cecece;
155 |   %flex-layout {
156 |     display: flex;
157 |     -webkit-flex: flex;
158 |     justify-content: flex-start;
159 |   }
160 | 
161 |   .regex-help {
162 |     font-family: Nunito,Helvetica Neue,Helvetica,Arial,sans-serif;
163 |     .doc {
164 |       h2 {
165 |         text-align: center;
166 |         margin-bottom: 3vh;
167 |       }
168 |       .quick-ref {
169 |         @extend %flex-layout;
170 |       }
171 |       table {
172 |         width: 44.5vw;
173 |       }
174 |       table tr {
175 |         height: 3.7vh;
176 |       }
177 |       .regex-options {
178 |         @extend %flex-layout;
179 |         text-align: left;
180 |         margin-top: 3vh;
181 |         margin-left: 10px;
182 |         margin-right: 10px;
183 |         border-top: 1px solid $border-color;
184 |         padding-top: 4px;
185 |       }
186 |       .regex-options code {
187 |         margin-left: 25px;
188 |         margin-right: 8px;
189 |       }
190 |     }
191 |   }
192 | </style>
193 | 


--------------------------------------------------------------------------------
/src/renderer/components/TimestampPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="timestamp-page">
  3 |     <tabs :tabsNav="tabsNav">
  4 |       <div class="timestamp-inner" v-show="currentTab === $t('tabs.home')">
  5 |         <div class="header">
  6 |           <label>{{ $t('timestamp.unitTimeChosen') }}: </label>
  7 |           <select class="unit" name="unit" @change="selectUnit">
  8 |             <option value=1 :selected="unit === 1" >{{ $t('timestamp.sec') }}</option>
  9 |             <option value=1000 :selected="unit === 1000">{{ $t('timestamp.microSec') }}</option>
 10 |           </select>
 11 |           <button type="button" name="reset" @click="resetAll">{{ $t('timestamp.reset') }}</button>
 12 |         </div>
 13 | 
 14 |         <div class="content">
 15 |           <div class="timestamp-field">
 16 |             <div class="arrow-footer">
 17 |               <div class="arrow-part">
 18 |               </div>
 19 |             </div>
 20 |             <input type="text" name="timestamp" class="timestamp-input" :value="timestampField" :placeholder="$t('timestamp.inputTimestamp')" @input="convertToDatetime" />
 21 |             <div class="arrow-body">
 22 |             </div>
 23 |             <div class="convert-datetime-field">
 24 |               {{ datetimeResult || $t('timestamp.datetimeResult') }}
 25 |             </div>
 26 |             <div class="arrow-head">
 27 |               <div class="arrow-part">
 28 |               </div>
 29 |             </div>
 30 |           </div>
 31 | 
 32 |           <div class="">
 33 |           </div>
 34 | 
 35 |           <div class="datetime-field">
 36 |             <div class="arrow-head">
 37 |               <div class="arrow-part">
 38 |               </div>
 39 |             </div>
 40 |             <div class="convert-timestamp-field">
 41 |               {{ timestampResult || $t('timestamp.timestampResult') }}
 42 |             </div>
 43 |             <div class="arrow-body">
 44 |             </div>
 45 |             <input type="text" name="datetime" class="datetime-input" :value="datetimeField" :placeholder="$t('timestamp.inputDatetime')" @input="convertToTimestamp" />
 46 |             <div class="arrow-footer">
 47 |               <div class="arrow-part">
 48 |               </div>
 49 |             </div>
 50 |           </div>
 51 |         </div>
 52 | 
 53 |         <div class="footer">
 54 |         </div>
 55 |       </div>
 56 | 
 57 |       <div class="timestamp-inner" v-show="currentTab !== $t('tabs.home')">
 58 |         <tstamp-help></tstamp-help>
 59 |       </div>
 60 |     </tabs>
 61 |   </div>
 62 | </template>
 63 | 
 64 | <script>
 65 | import { mapState, mapActions } from 'vuex'
 66 | import Tabs from './../Tabs'
 67 | import TstampHelp from './TimestampPage/TstampHelp'
 68 | 
 69 | export default {
 70 |   name: 'timestamp-page',
 71 |   components: {
 72 |     'tabs': Tabs,
 73 |     'tstamp-help': TstampHelp
 74 |   },
 75 |   methods: {
 76 |     ...mapActions('TStamp', [
 77 |       'setInitState',
 78 |       'setNav',
 79 |       'resetInput',
 80 |       'setUnit',
 81 |       'timestampConvert',
 82 |       'datetimeConvert'
 83 |     ]),
 84 |     resetAll () {
 85 |       this.resetInput()
 86 |     },
 87 |     selectUnit (event) {
 88 |       this.setUnit(event)
 89 |     },
 90 |     convertToDatetime (event) {
 91 |       this.timestampConvert(event)
 92 |     },
 93 |     convertToTimestamp (event) {
 94 |       this.datetimeConvert(event)
 95 |     },
 96 |     updateNav (title, index) {
 97 |       this.setNav({ title: title, index: index })
 98 |     },
 99 |     setInitStateLang () {
100 |       if (this.$store.state.TStamp.tabs[0]['title'] !== this.$i18n.t('tabs.home')) {
101 |         let payload = {}
102 |         payload.tabs = [
103 |           { title: this.$i18n.t('tabs.home'), isActive: true },
104 |           { title: this.$i18n.t('tabs.help'), isActive: false }
105 |         ]
106 |         payload.currentTab = this.$i18n.t('tabs.home')
107 |         this.setInitState(payload)
108 |       }
109 |     }
110 |   },
111 |   computed: {
112 |     ...mapState('TStamp', {
113 |       tabsNav: state => state.tabs,
114 |       currentTab: state => state.currentTab,
115 |       unit: state => state.unit,
116 |       datetimeResult: state => state.datetimeResult,
117 |       timestampResult: state => state.timestampResult,
118 |       timestampField: state => state.timestampField,
119 |       datetimeField: state => state.datetimeField})
120 |   },
121 |   mounted () {
122 |     this.setInitStateLang()
123 |   },
124 |   updated () {
125 |     this.setInitStateLang()
126 |   }
127 | }
128 | </script>
129 | 
130 | <style lang="scss" scoped>
131 |   /* CSS */
132 |   $arrow-color: #00b1d1;        // blue
133 |   $inner-border-color: #e6e6e6; // silver
134 |   $inner-bg-color: #7B7D7D;     // gray
135 |   $page-bg-color: #232323;      // dark
136 |   $reset-btn-color: #5D6D7E;    // wet asphalt 4
137 |   $reset-btn-font-border-color: #34495E; // wet asphalt 5
138 |   $reset-btn-bg-color: #D6DBDF; // wet asphalt 1
139 |   $result-font-color: #f90;     // orange
140 | 
141 |   %inner-border {
142 |     border: 20px solid $inner-border-color;
143 |     background-color: $inner-bg-color;
144 |   }
145 |   %flex-layout {
146 |     display: -webkit-flex;
147 |     display: flex;
148 |   }
149 |   %right-arrow-header {
150 |     border-top-color: transparent;
151 |     border-right-color: $arrow-color;
152 |     border-bottom-color: transparent;
153 |     border-left-color: $arrow-color;
154 |     border-width: 6vh 0 6vh 5vw;
155 |     border-style: solid;
156 |   }
157 |   %right-arrow-footer {
158 |     border-style: solid;
159 |     border-color: $arrow-color;
160 |     border-top-color: $arrow-color;
161 |     border-width: 6vh 0 6vh 5vw;
162 |     border-left-color: transparent;
163 |   }
164 |   %left-arrow-header {
165 |     border-top-color: transparent;
166 |     border-right-color: $arrow-color;
167 |     border-bottom-color: transparent;
168 |     border-left-color: $arrow-color;
169 |     border-width: 6vh 5vw 6vh 0;
170 |     border-style: solid;
171 |   }
172 |   %left-arrow-footer {
173 |     border-style: solid;
174 |     border-color: $arrow-color;
175 |     border-width: 6vh 5vw 6vh 0;
176 |     border-right-color: transparent;
177 |   }
178 |   %input-style {
179 |     -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.14);
180 |     box-shadow: 0 1px 3px 0 rgba(0,0,0,.14);
181 |     border-radius: 2px;
182 |     background: #fff;
183 |     color: $arrow-color;
184 |     border: none;
185 |     width: 25vw;
186 |     height: 15vh;
187 |     line-height: 15vh;
188 |     padding: 0 1vw;
189 |     font-size: 1.5em;
190 |   }
191 | 
192 |   #timestamp-page {
193 |     width: 93vw;
194 |     padding: 10px;
195 |     height: 100vh;
196 |     background: $page-bg-color;
197 |     text-align: center;
198 |     font-family: futura,helvetica,arial;
199 |     @extend %flex-layout;
200 |     margin-left: 7vw;
201 |     .timestamp-inner {
202 |       @extend %inner-border;
203 |       padding-right: 15px;
204 |       margin-left: auto;
205 |       margin-right: auto;
206 |       -webkit-flex: 1;
207 |       flex: 1;
208 |       padding: 2vh 5vw;
209 |       width: 91vw;
210 |     }
211 |     .header {
212 |       height: 25vh;
213 |       line-height: 25vh;
214 |       text-align: center;
215 |       @extend %flex-layout;
216 |       -webkit-align-items: center;
217 |         align-items: center;
218 |       -webkit-justify-content: center;
219 |               justify-content: center;
220 |     }
221 |     .header label {
222 |       color: white;
223 |       font-size: 4vh;
224 |       margin-right: 1vw;
225 |     }
226 |     .header button[name='reset'] {
227 |       height: 10vh;
228 |       font-size: 5vh;
229 |       background-color: $reset-btn-color;
230 |       color: white;
231 |       padding: 0 2vw;
232 |       margin-left: 1vw;
233 |       border-radius: 10px;
234 |       border: 4px solid white;
235 |       cursor: pointer;
236 |       &:hover {
237 |         background-color: $reset-btn-bg-color;
238 |         border: 4px solid $reset-btn-font-border-color;
239 |         color: $reset-btn-font-border-color;
240 |       }
241 |     }
242 |     .header .unit {
243 |       height: 10vh;
244 |       font-size: 1em;
245 |       width: 15vw;
246 |       margin-right: 5vw;
247 |     }
248 |     .content {
249 |       text-align: center;
250 |       height: 50vh;
251 |       padding: 0 2vw;
252 |     }
253 |     .content .timestamp-field,
254 |     .content .datetime-field {
255 |       height: 15vh;
256 |       margin-bottom: 10vh;
257 |       margin-right: 1vw;
258 |       @extend %flex-layout;
259 |       -webkit-align-items: center;
260 |       align-items: center;
261 |       -webkit-justify-content: center;
262 |       justify-content: center;
263 |     }
264 | 
265 |     .content .timestamp-field .arrow-body,
266 |     .content .datetime-field .arrow-body {
267 |       background: $arrow-color;
268 |       border-color: $arrow-color;
269 |       flex: 1;
270 |       -webkit-flex: 1;
271 |       line-height: 12vh;
272 |       height: 12vh;
273 |     }
274 |     .content .timestamp-field .arrow-head {
275 |       background: $arrow-color;
276 |       border-color: $arrow-color;
277 |       width: 5vw;
278 |       height: 12vh;
279 |     }
280 |     .content .timestamp-field .arrow-head .arrow-part::after {
281 |       top: 0;
282 |       content: '';
283 |       display: block;
284 |       margin-left: 5vw;
285 |       @extend %right-arrow-header;
286 |     }
287 |     .content .timestamp-field .arrow-footer {
288 |       background: $arrow-color;
289 |       border-color: $arrow-color;
290 |       width: 5vw;
291 |       height: 12vh;
292 |       position: relative;
293 |     }
294 |     .content .timestamp-field .arrow-footer .arrow-part::after {
295 |       content: '';
296 |       display: block;
297 |       position: absolute;
298 |       left: -5vw;
299 |       @extend %right-arrow-footer;
300 |     }
301 |     .content .datetime-field .arrow-head {
302 |       background: $arrow-color;
303 |       border-color: $arrow-color;
304 |       width: 5vw;
305 |       height: 12vh;
306 |       position: relative;
307 |     }
308 |     .content .datetime-field .arrow-head .arrow-part::after {
309 |       position: absolute;
310 |       top: 0;
311 |       bottom: 0;
312 |       left: -5vw;
313 |       content: '';
314 |       @extend %left-arrow-header;
315 |       display: block;
316 |     }
317 |     .content .datetime-field .arrow-footer {
318 |       background: $arrow-color;
319 |       border-color: $arrow-color;
320 |       width: 5vw;
321 |       height: 12vh;
322 |     }
323 |     .content .datetime-field .arrow-footer .arrow-part::after {
324 |       content: '';
325 |       display: block;
326 |       @extend %left-arrow-footer;
327 |       margin-left: 5vw;
328 |     }
329 | 
330 |     .content .timestamp-field .timestamp-input,
331 |     .content .datetime-field .datetime-input {
332 |       @extend %input-style;
333 |       flex: 3;
334 |       -webkit-flex: 3;
335 |       text-align: center;
336 |       &:focus {
337 |         outline: none;
338 |       }
339 |     }
340 |     .content .timestamp-field .convert-datetime-field,
341 |     .content .datetime-field .convert-timestamp-field {
342 |       @extend %input-style;
343 |       color: $result-font-color;
344 |       flex: 3;
345 |       -webkit-flex: 3;
346 |     }
347 | 
348 |     .footer {
349 |       text-align: center;
350 |     }
351 |   }
352 | </style>
353 | 


--------------------------------------------------------------------------------
/src/renderer/components/TimestampPage/TstampHelp.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="tstamp-help">
  3 |     <h2></h2>
  4 | 
  5 |     <div class="doc">
  6 |       <table>
  7 |         <tbody>
  8 |           <tr>
  9 |             <td class="title">Swift</td>
 10 |             <td>
 11 |               <pre><span class="cls-var">NSDate</span>().<span class="var">timeIntervalSince1970</span></pre>
 12 |             </td>
 13 |           </tr>
 14 | 
 15 |           <tr>
 16 |             <td class="title">Go</td>
 17 |             <td>
 18 | <pre><span class="key-method">import</span> (<span class="str">"time"</span>)
 19 | <span class="method">int32</span>(<span class="cls-var">time</span>.<span class="method">Now</span>().<span class="method">Unix</span>())</pre>
 20 |             </td>
 21 |           </tr>
 22 | 
 23 |           <tr>
 24 |             <td rowspan="2" class="title">Java</td>
 25 |             <td>
 26 |               <pre><div class="comment">// pure java</div>(<span class="key-method">int</span>) (<span class="cls-var">System</span>.<span class="method">currentTimeMillis</span>() / <span class="int">1000</span>)</pre>
 27 |             </td>
 28 |           </tr>
 29 |           <tr>
 30 |             <td>
 31 |               <pre><div class="comment">// joda</div>(<span class="key-method">int</span>) (<span class="cls-var">DateTime</span>.<span class="method">now</span>().<span class="method">getMillis</span>() / <span class="int">1000</span>)</pre>
 32 |             </td>
 33 |           </tr>
 34 | 
 35 |           <tr>
 36 |             <td class="title">Javascript</td>
 37 |             <td>
 38 |               <pre><span class="cls-var">Math</span>.<span class="method">round</span>(<span class="key-method">new</span> <span class="cls-var">Date</span>() / <span class="int">1000</span>)</pre>
 39 |             </td>
 40 |           </tr>
 41 | 
 42 |           <tr>
 43 |             <td class="title">Objective-C</td>
 44 |             <td>
 45 |               <pre>[[<span class="cls-var">NSDate</span> date] <span class="var">timeIntervalSince1970</span>]</pre>
 46 |             </td>
 47 |           </tr>
 48 | 
 49 |           <tr>
 50 |             <td class="title">MySQL</td>
 51 |             <td>
 52 |               <pre><span class="cls-var">SELECT</span> <span class="method">unix_timestamp</span>(<span class="method">now</span>())</pre>
 53 |             </td>
 54 |           </tr>
 55 | 
 56 |           <tr>
 57 |             <td rowspan="2" class="title">PHP</td>
 58 |             <td>
 59 |               <pre><div class="comment">// pure php</div><span class="method">time</span>()</pre>
 60 |             </td>
 61 |           </tr>
 62 |           <tr>
 63 |             <td>
 64 |               <pre><div class="comment">// Carbon\Carbon</div><span class="cls-var">Carbon</span>::<span class="method">now</span>()->timestamp</pre>
 65 |             </td>
 66 |           </tr>
 67 | 
 68 |           <tr>
 69 |             <td class="title">Python</td>
 70 |             <td>
 71 |               <pre><span class="key-method">import</span> <span class="var">time</span>
 72 | <span class="var">time</span>.<span class='method'>time</span>()</pre>
 73 |             </td>
 74 |           </tr>
 75 | 
 76 |           <tr>
 77 |             <td class="title">Ruby</td>
 78 |             <td>
 79 |               <pre><span class="cls-var">Time</span>.now.to_i</pre>
 80 |             </td>
 81 |           </tr>
 82 | 
 83 |           <tr>
 84 |             <td class="title">Shell</td>
 85 |             <td>
 86 |               <pre><span class="key-method">date</span> +%s</pre>
 87 |             </td>
 88 |           </tr>
 89 | 
 90 |           <tr>
 91 |             <td class="title">Groovy</td>
 92 |             <td>
 93 |               <pre>(<span class="key-method">new</span> <span class="cls-var">Date</span>().time / <span class='int'>1000</span>).<span class="method">intValue</span>()</pre>
 94 |             </td>
 95 |           </tr>
 96 | 
 97 |           <tr>
 98 |             <td class="title">Lua</td>
 99 |             <td>
100 |               <pre><span class="cls-var">os.</span><span class="key-method">time()</span></pre>
101 |             </td>
102 |           </tr>
103 | 
104 |           <tr>
105 |             <td class="title">.NET/C#</td>
106 |             <td>
107 |               <pre>(<span class="cls-var">DateTime</span>.Now.<span class="method">ToUniversalTime</span>().Ticks - <span class="int">621355968000000000</span>) / <span class="int">10000000</span></pre>
108 |             </td>
109 |           </tr>
110 |         </tbody>
111 |       </table>
112 |     </div>
113 |   </div>
114 | </template>
115 | 
116 | <script>
117 |   export default {
118 |     name: 'tstamp-help'
119 |   }
120 | </script>
121 | 
122 | <style lang="scss" scoped>
123 |   $table-bg-color: #0f202d;
124 |   $comment-font-color: #777777;
125 |   $str-font-color: #1ABC9C;
126 |   $method-font-color: #5DADE2;
127 |   $int-font-color: #F5B041;
128 |   $var-font-color: #E74C3C;
129 |   $class-font-color: #F7DC6F;
130 |   $key-method-font-color: #A569BD;
131 | 
132 |   .tstamp-help {
133 |     .doc {
134 |       display: flex;
135 |       display: -webkit-flex;
136 |       text-align: center;
137 |       table {
138 |         text-align: left;
139 |         margin: auto auto;
140 |         width: 80vw;
141 |       }
142 |       table tr td {
143 |         padding: 1px 10px;
144 |         background-color: $table-bg-color;
145 |       }
146 |       table tr td.title {
147 |         color: hsla(0,0%,100%,.3);
148 |         font-size: 1em;
149 |       }
150 |       table tr td pre {
151 |         color: white;
152 |         border-radius: 2px;
153 |         padding: 2px 10px;
154 |       }
155 |       table tr td .comment {
156 |         color: $comment-font-color;
157 |       }
158 |       table tr td .str {
159 |         color: $str-font-color;
160 |       }
161 |       table tr td .method {
162 |         color: $method-font-color;
163 |       }
164 |       table tr td .int {
165 |         color: $int-font-color;
166 |       }
167 |       table tr td .var {
168 |         color:  $var-font-color;
169 |       }
170 |       table tr td .cls-var {
171 |         color: $class-font-color;
172 |       }
173 |       table tr td .key-method {
174 |         color: $key-method-font-color;
175 |       }
176 |     }
177 |   }
178 | </style>
179 | 


--------------------------------------------------------------------------------
/src/renderer/i18n.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueI18n from 'vue-i18n'
 3 | import { messages } from './lang/messages'
 4 | 
 5 | Vue.use(VueI18n)
 6 | if (!window.localStorage.getItem('locale')) {
 7 |   window.localStorage.setItem('locale', 'en')
 8 | }
 9 | 
10 | const i18n = new VueI18n({
11 |   locale: window.localStorage.getItem('locale'),
12 |   messages: messages
13 | })
14 | 
15 | export default i18n
16 | 


--------------------------------------------------------------------------------
/src/renderer/lang/cn.js:
--------------------------------------------------------------------------------
  1 | export const cn = {
  2 |   tabs: {
  3 |     home: '首页',
  4 |     help: '帮助'
  5 |   },
  6 |   // Sidebar
  7 |   sidebar: {
  8 |     regexTool: '正则表达式工具',
  9 |     timestampConverter: '时间戳转化',
 10 |     colorBox: '颜色盒子',
 11 |     jsonParser: 'JSON 转化',
 12 |     base64Converter: 'Base64 转化',
 13 |     cronTool: '定时任务工具',
 14 |     regex: '正',
 15 |     time: '时',
 16 |     color: '色',
 17 |     json: '键',
 18 |     image64: '图',
 19 |     cron: '定'
 20 |   },
 21 |   // Regex Tool
 22 |   regex: {
 23 |     yourRegexExp: '您的正则表达式',
 24 |     yourTestStr: '需要测试的字符串',
 25 |     clearFields: '清除所有输入',
 26 |     matchResult: '匹配结果',
 27 |     noMatches: '没有匹配到内容 ...',
 28 |     matchGroups: '匹配所有分组',
 29 |     matchGroup: '匹配分组',
 30 |     cleanFields: '清除输入框',
 31 |     heresResult: '这里显示结果。',
 32 |     uHaveAnUnmatchedPats: '您有一个括号缺少一边。',
 33 |     expError: '表达式错误',
 34 |     invalidOpt: '非法选项'
 35 |   },
 36 |   regexHelp: {
 37 |     title: '正则表达式速查表',
 38 |     squareBracket: '其中一个字符: a, b, 或 c',
 39 |     squareNot: '任意字符除了: a, b, 或 c',
 40 |     squareAny: 'a 到 z 中的任意字符',
 41 |     squareRange: 'a 到 z 或 A 到 Z 中的任意字符',
 42 |     startOfLine: '行开始符',
 43 |     endOfLine: '行结束符',
 44 |     startOfStr: '字符串开始符',
 45 |     endOfStr: '字符串结束符',
 46 |     anyChar: '任意一个字符',
 47 |     anyWSpace: '任意空白字符',
 48 |     anyNWSpace: '任意非空白字符',
 49 |     anyDigit: '任意数字',
 50 |     stopAtFirstA: '非贪婪：只在第一个 a 停止',
 51 |     matchBeforeTom: '匹配 Tom 前面的字符',
 52 | 
 53 |     anyNDigit: '任意非数字',
 54 |     anyWordChar: '任何词语字符 (字母, 数字, 下划线)',
 55 |     anyNWordChar: '任意非词语字符',
 56 |     anyWordB: '任意词语分界符',
 57 |     capEnclosed: '所有被括号包住的内容',
 58 |     or: 'a 或者 b',
 59 |     zeroOne: '0 或者 1 个 a',
 60 |     moreThanZero: '大于 0 个 a',
 61 |     moreThanOne: '大于 1 个 a',
 62 |     exactly3: '正好 3 个 a',
 63 |     moreThan3: '大于 3 个 a',
 64 |     between: '3 到 6 个 a',
 65 |     matchTom: '匹配 Tom',
 66 |     matchBehindTom: '匹配 Tom 后面的字符',
 67 | 
 68 |     options: '选项',
 69 |     caseI: '不区分大小写',
 70 |     unicode: '将规则做为 Unicode 序列',
 71 |     newLine: '允许用 . 匹配新行',
 72 |     indexMatch: '只匹配目标字符串中此正则表达式的 lastIndex 属性所指示的索引（不尝试匹配任何后续索引）'
 73 |   },
 74 |   // Timestamp Converter
 75 |   timestamp: {
 76 |     unitTimeChosen: '选择时间单位',
 77 |     sec: '秒',
 78 |     microSec: '毫秒',
 79 |     reset: '重置',
 80 |     inputTimestamp: '输入时间戳',
 81 |     datetimeResult: '日期时间结果',
 82 |     timestampResult: '时间戳结果',
 83 |     inputDatetime: '输入日期时间'
 84 |   },
 85 |   // Color box
 86 |   color: {
 87 |     currentColor: '当前颜色',
 88 |     copied: '已复制',
 89 |     inputHex: '输入十六进制',
 90 |     inputRGB: '输入 RGB',
 91 |     inputHSL: '输入 HSL'
 92 |   },
 93 |   // Json Parser
 94 |   json: {
 95 |     error: '错误',
 96 |     toXML: '转为 XML',
 97 |     toJSON: '转为 JSON',
 98 |     reset: '重置',
 99 |     copy: '复制',
100 |     seems: '貌似',
101 |     missing: '没有 ',
102 |     missingComma: '没有逗号',
103 |     missingKV: '在逗号后面没有键值对.',
104 |     missingElemInArray: '数组中缺少元素',
105 |     missingCommaInArray: '数组中缺少逗号',
106 |     undefinedVal: '键值对的值未定义',
107 |     undefinedKey: '键值对的键未定义.',
108 |     near: '错误发生在',
109 |     notBool: '错误: 非 Boolean 值',
110 |     notNum: '非数值number...',
111 |     notNull: '错误：非 null 值',
112 |     moreBehind: '后面多了字符',
113 |     inputJsonTip: '此处输入 JSON 字符串\n\n注意: 键值对要用双引号括起来'
114 |   },
115 |   // Image Converter
116 |   image64: {
117 |     copy: '复制',
118 |     clean: '清除',
119 |     dragImgHere: '拖动 😺 图片到此处，Base64 👉',
120 |     inputBase64Here: '您也可以在这里输入 Base64 码，图片将会显示 👈'
121 |   },
122 |   cron: {
123 |     yourCronExp: '您的定时任务表达式',
124 |     heresResult: '这里显示结果',
125 |     expError: '表达式错误',
126 |     nextExec: '接下来执行如下的',
127 |     times: '次',
128 |     every: '每',
129 |     at: '在',
130 |     in: '在',
131 |     on: '在',
132 |     from: '从',
133 |     through: '到',
134 |     and: '和',
135 |     of: '的'
136 |   },
137 |   cronHelp: {
138 |     minute: '分钟',
139 |     hour: '小时',
140 |     day: '天',
141 |     month: '月',
142 |     year: '年',
143 |     week: '周',
144 |     dayOfWeekUnit: '周[按周区分的天]',
145 |     dayOfMonthUnit: '号[按月区分的天]',
146 |     dayOfMonth: '号',
147 |     dayOfWeek: '周',
148 |     sunday: '周日',
149 |     monday: '周一',
150 |     tuesday: '周二',
151 |     wednesday: '周三',
152 |     thursday: '周四',
153 |     friday: '周五',
154 |     saturday: '周六',
155 |     yearly: '每年',
156 |     annually: '每年一次',
157 |     monthly: '每月',
158 |     daily: '每天',
159 |     hourly: '每小时',
160 |     afterReboot: '重启后',
161 |     optional: '可选',
162 |     anyValue: '任一值',
163 |     valueListSeparator: '分隔开的值',
164 |     rangeOfValues: '范围内的值',
165 |     stepValues: '阶步值',
166 |     allowedValues: '允许的值',
167 |     alternativeSingleValues: '可变的值',
168 |     nonStandard: '非标准的',
169 |     notWorkEveryCron: '并非所有定时任务都能生效',
170 |     expNotComplete: '表达式不完善'
171 |   }
172 | }
173 | 


--------------------------------------------------------------------------------
/src/renderer/lang/en.js:
--------------------------------------------------------------------------------
  1 | export const en = {
  2 |   tabs: {
  3 |     home: 'Home',
  4 |     help: 'Help'
  5 |   },
  6 |   // Sidebar
  7 |   sidebar: {
  8 |     regexTool: 'Regex Tool',
  9 |     timestampConverter: 'Timestamp Converter',
 10 |     colorBox: 'Color Box',
 11 |     jsonParser: 'Json Parser',
 12 |     base64Converter: 'Base64 Converter',
 13 |     cronTool: 'Crontab Tool',
 14 |     regex: 'Regex',
 15 |     time: 'Time',
 16 |     color: 'Color',
 17 |     json: 'Json',
 18 |     image64: 'Image',
 19 |     cron: 'Cron'
 20 |   },
 21 |   // Regex Tool
 22 |   regex: {
 23 |     yourRegexExp: 'Your regular expression',
 24 |     yourTestStr: 'Your test string',
 25 |     clearFields: 'Clear Fields',
 26 |     matchResult: 'Match Result',
 27 |     noMatches: 'No matches ...',
 28 |     matchGroups: 'Match Groups',
 29 |     matchGroup: 'Match Group',
 30 |     cleanFields: 'Clean Fields',
 31 |     heresResult: 'Here\'s result.',
 32 |     uHaveAnUnmatchedPats: 'You have an unmatched parenthesis.',
 33 |     expError: 'Expression Error',
 34 |     invalidOpt: 'Invalid Option'
 35 |   },
 36 |   regexHelp: {
 37 |     title: 'Regex quick reference',
 38 |     squareBracket: 'A single character of: a, b, or c',
 39 |     squareNot: 'Any single character except: a, b, or c',
 40 |     squareAny: 'Any single character in the range a-z',
 41 |     squareRange: 'Any single character in the range a-z or A-Z',
 42 |     startOfLine: 'Start of line',
 43 |     endOfLine: 'End of line',
 44 |     startOfStr: 'Start of string',
 45 |     endOfStr: 'End of string',
 46 |     anyChar: 'Any single character',
 47 |     anyWSpace: 'Any whitespace character',
 48 |     anyNWSpace: 'Any non-whitespace character',
 49 |     anyDigit: 'Any digit',
 50 |     stopAtFirstA: 'Not greedy: Stop at first a',
 51 |     matchBeforeTom: 'Match char before Tom',
 52 | 
 53 |     anyNDigit: 'Any non-digit',
 54 |     anyWordChar: 'Any word character (letter, number, underscore)',
 55 |     anyNWordChar: 'Any non-word character',
 56 |     anyWordB: 'Any word boundary',
 57 |     capEnclosed: 'Capture everything enclosed',
 58 |     or: 'a or b',
 59 |     zeroOne: 'Zero or one of a',
 60 |     moreThanZero: 'Zero or more of a',
 61 |     moreThanOne: 'One or more of a',
 62 |     exactly3: 'Exactly 3 of a',
 63 |     moreThan3: '3 or more of a',
 64 |     between: 'Between 3 and 6 of a',
 65 |     matchTom: 'Only match Tom',
 66 |     matchBehindTom: 'Match char behind Tom',
 67 | 
 68 |     options: 'Options',
 69 |     caseI: 'case insensitive',
 70 |     unicode: 'treat pattern as a sequence of Unicode code points',
 71 |     newLine: 'allows . to match newlines',
 72 |     indexMatch: 'matches only from the index indicated by the lastIndex property of this regular expression in the target string (and does not attempt to match from any later indexes)'
 73 |   },
 74 |   // Timestamp Converter
 75 |   timestamp: {
 76 |     unitTimeChosen: 'Choose the unit of time',
 77 |     sec: 'Second',
 78 |     microSec: 'Micro Second',
 79 |     reset: 'Reset',
 80 |     inputTimestamp: 'Input timestamp',
 81 |     datetimeResult: 'Datetime Result',
 82 |     timestampResult: 'Timestamp Result',
 83 |     inputDatetime: 'Input Datetime'
 84 |   },
 85 |   // Color box
 86 |   color: {
 87 |     currentColor: 'Current Color',
 88 |     copied: 'Copied',
 89 |     inputHex: 'Input Hex',
 90 |     inputRGB: 'Input RGB',
 91 |     inputHSL: 'Input HSL'
 92 |   },
 93 |   // Json Parser
 94 |   json: {
 95 |     error: 'Error',
 96 |     toXML: 'TO XML',
 97 |     toJSON: 'TO JSON',
 98 |     reset: 'Reset',
 99 |     copy: 'Copy',
100 |     ps: 'PS:The Key Value must be enclosed in double quotation marks.',
101 |     seems: 'It seems that ',
102 |     missing: 'missing',
103 |     missingComma: 'missing comma',
104 |     missingKV: 'missing key-value after comma.',
105 |     missingElemInArray: 'missing element in array.',
106 |     missingCommaInArray: 'missing comma in array.',
107 |     undefinedVal: 'the value is undefined.',
108 |     undefinedKey: 'the Key is undefined.',
109 |     near: 'This error occured near',
110 |     notBool: 'Error: It\'s not Boolean',
111 |     notNull: 'Error: It\'s not null',
112 |     notNum: 'it\'s not number...',
113 |     moreBehind: 'More character in the end',
114 |     inputJsonTip: 'Input your Json here.\n\nPS:The Key Value must be enclosed in double quotation marks.'
115 |   },
116 |   // Image Converter
117 |   image64: {
118 |     copy: 'COPY',
119 |     clean: 'CLEAN',
120 |     dragImgHere: 'Drag your 😺 image here. Base64 👉',
121 |     inputBase64Here: 'You can input Base64 code here, and the image will be shown 👈.'
122 |   },
123 |   // crontab
124 |   cron: {
125 |     yourCronExp: 'Your Crontab expression',
126 |     heresResult: 'Here\'s result.',
127 |     expError: 'Expression error.',
128 |     nextExec: 'Execute like as follow next ',
129 |     times: 'times',
130 |     every: 'every',
131 |     at: 'At',
132 |     in: 'In',
133 |     on: 'On',
134 |     from: 'from',
135 |     through: 'through',
136 |     and: 'and',
137 |     of: 'of'
138 |   },
139 |   cronHelp: {
140 |     minute: 'minute',
141 |     hour: 'hour',
142 |     day: 'day',
143 |     month: 'month',
144 |     year: 'year',
145 |     week: 'week',
146 |     optional: 'optional',
147 |     dayOfWeekUnit: 'day-of-month',
148 |     dayOfMonthUnit: 'day-of-month',
149 |     dayOfMonth: 'day-of-month',
150 |     dayOfWeek: 'day-of-week',
151 |     sunday: 'Sunday',
152 |     monday: 'Monday',
153 |     tuesday: 'Tuesday',
154 |     wednesday: 'Wensday',
155 |     thursday: 'Thursday',
156 |     friday: 'Friday',
157 |     saturday: 'Saturday',
158 |     yearly: 'Yearly',
159 |     annually: 'Annually',
160 |     monthly: 'Monthly',
161 |     daily: 'Daily',
162 |     hourly: 'Hourly',
163 |     afterReboot: 'After rebooting',
164 |     anyValue: 'any value',
165 |     valueListSeparator: 'value list separator',
166 |     rangeOfValues: 'range of values',
167 |     stepValues: 'step values',
168 |     allowedValues: 'allowed values',
169 |     alternativeSingleValues: 'alternative single values',
170 |     nonStandard: 'non-standard',
171 |     notWorkEveryCron: 'May not work with every cron',
172 |     expNotComplete: 'The expression is not completed'
173 |   }
174 | }
175 | 


--------------------------------------------------------------------------------
/src/renderer/lang/messages.js:
--------------------------------------------------------------------------------
1 | import { cn } from './cn'
2 | import { en } from './en'
3 | 
4 | export const messages = {
5 |   en: en,
6 |   cn: cn
7 | }
8 | 


--------------------------------------------------------------------------------
/src/renderer/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueClipboard from 'vue-clipboard2'
 3 | 
 4 | import App from './App'
 5 | import router from './router'
 6 | import store from './store'
 7 | import i18n from './i18n'
 8 | 
 9 | if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
10 | Vue.config.productionTip = false
11 | Vue.use(VueClipboard)
12 | 
13 | /* eslint-disable no-new */
14 | new Vue({
15 |   components: { App },
16 |   router,
17 |   store,
18 |   i18n,
19 |   template: '<App/>'
20 | }).$mount('#app')
21 | 


--------------------------------------------------------------------------------
/src/renderer/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | 
 6 | export default new Router({
 7 |   routes: [
 8 |     {
 9 |       path: '/',
10 |       name: 'landing-page',
11 |       component: require('@/components/LandingPage').default
12 |     },
13 |     {
14 |       path: '/regex-page',
15 |       name: 'regex-page',
16 |       component: require('@/components/RegexPage').default
17 |     },
18 |     {
19 |       path: '/timestamp-page',
20 |       name: 'timestamp-page',
21 |       component: require('@/components/TimestampPage').default
22 |     },
23 |     {
24 |       path: '/color-box-page',
25 |       name: 'color-box-page',
26 |       component: require('@/components/ColorBoxPage').default
27 |     },
28 |     {
29 |       path: '/json-page',
30 |       name: 'json-page',
31 |       component: require('@/components/JsonPage').default
32 |     },
33 |     {
34 |       path: '/image64-page',
35 |       name: 'image64-page',
36 |       component: require('@/components/Image64Page').default
37 |     },
38 |     {
39 |       path: '/cron-page',
40 |       name: 'cron-page',
41 |       component: require('@/components/CronPage').default
42 |     }
43 |   ]
44 | })
45 | 


--------------------------------------------------------------------------------
/src/renderer/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | // import { createPersistedState, createSharedMutations } from 'vuex-electron'
 5 | // import { createPersistedState } from 'vuex-electron'
 6 | 
 7 | import modules from './modules'
 8 | 
 9 | Vue.use(Vuex)
10 | 
11 | export default new Vuex.Store({
12 |   modules,
13 |   plugins: [
14 |     // createPersistedState(),
15 |     // createSharedMutations()
16 |     // createPersistedState()
17 |   ],
18 |   strict: process.env.NODE_ENV !== 'production'
19 | })
20 | 


--------------------------------------------------------------------------------
/src/renderer/store/modules/Color.js:
--------------------------------------------------------------------------------
  1 | const state = {
  2 |   colorMatrix: [
  3 |     [{ hex: '#F9EBEA', rgb: '249,235,234', hsl: '6,54%,95%', anim: false, name: 'pomegranate' },
  4 |       { hex: '#F2D7D5', rgb: '242,215,213', hsl: '6,54%,89%', anim: false, name: 'pomegranate' },
  5 |       { hex: '#E6B0AA', rgb: '230,176,170', hsl: '6,54%,78%', anim: false, name: 'pomegranate' },
  6 |       { hex: '#D98880', rgb: '217,136,128', hsl: '6,54%,68%', anim: false, name: 'pomegranate' },
  7 |       { hex: '#CD6155', rgb: '205,97,85', hsl: '6,54%,57%', anim: false, name: 'pomegranate' },
  8 |       { hex: '#C0392B', rgb: '192,57,43', hsl: '6,63%,46%', anim: false, name: 'pomegranate' },
  9 |       { hex: '#A93226', rgb: '169,50,38', hsl: '6,63%,41%', anim: false, name: 'pomegranate' },
 10 |       { hex: '#922B21', rgb: '146,43,33', hsl: '6,63%,35%', anim: false, name: 'pomegranate' },
 11 |       { hex: '#7B241C', rgb: '123,36,28', hsl: '6,63%,29%', anim: false, name: 'pomegranate' },
 12 |       { hex: '#641E16', rgb: '100, 30, 22', hsl: '6, 63%, 24%', anim: false, name: 'pomegranate' }],
 13 | 
 14 |     [{ hex: '#FDEDEC', rgb: '253,237,236', hsl: '6,78%,96%', anim: false, name: 'alizarin' },
 15 |       { hex: '#FADBD8', rgb: '250,219,216', hsl: '6,78%,91%', anim: false, name: 'alizarin' },
 16 |       { hex: '#F5B7B1', rgb: '245,183,177', hsl: '6,78%,83%', anim: false, name: 'alizarin' },
 17 |       { hex: '#F1948A', rgb: '241,148,138', hsl: '6,78%,74%', anim: false, name: 'alizarin' },
 18 |       { hex: '#EC7063', rgb: '236,112,99', hsl: '6,78%,66%', anim: false, name: 'alizarin' },
 19 |       { hex: '#E74C3C', rgb: '231,76,60', hsl: '6,78%,57%', anim: false, name: 'alizarin' },
 20 |       { hex: '#CB4335', rgb: '203,67,53', hsl: '6,59%,50%', anim: false, name: 'alizarin' },
 21 |       { hex: '#B03A2E', rgb: '176,58,46', hsl: '6,59%,43%', anim: false, name: 'alizarin' },
 22 |       { hex: '#943126', rgb: '148,49,38', hsl: '6,59%,37%', anim: false, name: 'alizarin' },
 23 |       { hex: '#78281F', rgb: '120,40,31', hsl: '6,59%,30%', anim: false, name: 'alizarin' }],
 24 | 
 25 |     [{ hex: '#F5EEF8', rgb: '245, 238, 248', hsl: '283, 39%, 95%', anim: false, name: 'amethyst' },
 26 |       { hex: '#EBDEF0', rgb: '235, 222, 240', hsl: '283, 39%, 91%', anim: false, name: 'amethyst' },
 27 |       { hex: '#D7BDE2', rgb: '215, 189, 226', hsl: '283, 39%, 81%', anim: false, name: 'amethyst' },
 28 |       { hex: '#C39BD3', rgb: '195, 155, 211', hsl: '283, 39%, 72%', anim: false, name: 'amethyst' },
 29 |       { hex: '#AF7AC5', rgb: '175, 122, 197', hsl: '283, 39%, 63%', anim: false, name: 'amethyst' },
 30 |       { hex: '#9B59B6', rgb: '155, 89, 182', hsl: '283, 39%, 53%', anim: false, name: 'amethyst' },
 31 |       { hex: '#884EA0', rgb: '136, 78, 160', hsl: '283, 34%, 47%', anim: false, name: 'amethyst' },
 32 |       { hex: '#76448A', rgb: '118, 68, 138', hsl: '283, 34%, 40%', anim: false, name: 'amethyst' },
 33 |       { hex: '#633974', rgb: '99, 57, 116', hsl: '283, 34%, 34%', anim: false, name: 'amethyst' },
 34 |       { hex: '#512E5F', rgb: '81, 46, 95', hsl: '283, 34%, 28%', anim: false, name: 'amethyst' }],
 35 | 
 36 |     [{ hex: '#F4ECF7', rgb: '244, 236, 247', hsl: '282, 39%, 95%', anim: false, name: 'wisteria' },
 37 |       { hex: '#E8DAEF', rgb: '232, 218, 239', hsl: '282, 39%, 89%', anim: false, name: 'wisteria' },
 38 |       { hex: '#D2B4DE', rgb: '210, 180, 222', hsl: '282, 39%, 79%', anim: false, name: 'wisteria' },
 39 |       { hex: '#BB8FCE', rgb: '187, 143, 206', hsl: '282, 39%, 68%', anim: false, name: 'wisteria' },
 40 |       { hex: '#A569BD', rgb: '165, 105, 189', hsl: '282, 39%, 58%', anim: false, name: 'wisteria' },
 41 |       { hex: '#8E44AD', rgb: '142, 68, 173', hsl: '282, 44%, 47%', anim: false, name: 'wisteria' },
 42 |       { hex: '#7D3C98', rgb: '125, 60, 152', hsl: '282, 44%, 42%', anim: false, name: 'wisteria' },
 43 |       { hex: '#6C3483', rgb: '108, 52, 131', hsl: '282, 44%, 36%', anim: false, name: 'wisteria' },
 44 |       { hex: '#5B2C6F', rgb: '91, 44, 111', hsl: '282, 44%, 30%', anim: false, name: 'wisteria' },
 45 |       { hex: '#4A235A', rgb: '74, 35, 90', hsl: '282, 44%, 25%', anim: false, name: 'wisteria' }],
 46 | 
 47 |     [{ hex: '#EAF2F8', rgb: '234, 242, 248', hsl: '204, 51%, 94%', anim: false, name: 'belize hole' },
 48 |       { hex: '#D4E6F1', rgb: '212, 230, 241', hsl: '204, 51%, 89%', anim: false, name: 'belize hole' },
 49 |       { hex: '#A9CCE3', rgb: '169, 204, 227', hsl: '204, 51%, 78%', anim: false, name: 'belize hole' },
 50 |       { hex: '#7FB3D5', rgb: '127, 179, 213', hsl: '204, 51%, 67%', anim: false, name: 'belize hole' },
 51 |       { hex: '#5499C7', rgb: '84, 153, 199', hsl: '204, 51%, 55%', anim: false, name: 'belize hole' },
 52 |       { hex: '#2980B9', rgb: '41, 128, 185', hsl: '204, 64%, 44%', anim: false, name: 'belize hole' },
 53 |       { hex: '#2471A3', rgb: '36, 113, 163', hsl: '204, 64%, 39%', anim: false, name: 'belize hole' },
 54 |       { hex: '#1F618D', rgb: '31, 97, 141', hsl: '204, 64%, 34%', anim: false, name: 'belize hole' },
 55 |       { hex: '#1A5276', rgb: '26, 82, 118', hsl: '204, 64%, 28%', anim: false, name: 'belize hole' },
 56 |       { hex: '#154360', rgb: '21, 67, 96', hsl: '204, 64%, 23%', anim: false, name: 'belize hole' }],
 57 | 
 58 |     [{ hex: '#EBF5FB', rgb: '235, 245, 251', hsl: '204, 70%, 95%', anim: false, name: 'peter river' },
 59 |       { hex: '#D6EAF8', rgb: '214, 234, 248', hsl: '204, 70%, 91%', anim: false, name: 'peter river' },
 60 |       { hex: '#AED6F1', rgb: '174, 214, 241', hsl: '204, 70%, 81%', anim: false, name: 'peter river' },
 61 |       { hex: '#85C1E9', rgb: '133, 193, 233', hsl: '204, 70%, 72%', anim: false, name: 'peter river' },
 62 |       { hex: '#5DADE2', rgb: '93, 173, 226', hsl: '204, 70%, 63%', anim: false, name: 'peter river' },
 63 |       { hex: '#3498DB', rgb: '52, 152, 219', hsl: '204, 70%, 53%', anim: false, name: 'peter river' },
 64 |       { hex: '#2E86C1', rgb: '46, 134, 193', hsl: '204, 62%, 47%', anim: false, name: 'peter river' },
 65 |       { hex: '#2874A6', rgb: '40, 116, 166', hsl: '204, 62%, 40%', anim: false, name: 'peter river' },
 66 |       { hex: '#21618C', rgb: '33, 97, 140', hsl: '204, 62%, 34%', anim: false, name: 'peter river' },
 67 |       { hex: '#1B4F72', rgb: '27, 79, 114', hsl: '204, 62%, 28%', anim: false, name: 'peter river' }],
 68 | 
 69 |     [{ hex: '#E8F8F5', rgb: '232, 248, 245', hsl: '168, 55%, 94%', anim: false, name: 'turquoise' },
 70 |       { hex: '#D1F2EB', rgb: '209, 242, 235', hsl: '168, 55%, 88%', anim: false, name: 'turquoise' },
 71 |       { hex: '#A3E4D7', rgb: '163, 228, 215', hsl: '168, 55%, 77%', anim: false, name: 'turquoise' },
 72 |       { hex: '#76D7C4', rgb: '118, 215, 196', hsl: '168, 55%, 65%', anim: false, name: 'turquoise' },
 73 |       { hex: '#48C9B0', rgb: '72, 201, 176', hsl: '168, 55%, 54%', anim: false, name: 'turquoise' },
 74 |       { hex: '#1ABC9C', rgb: '26, 188, 156', hsl: '168, 76%, 42%', anim: false, name: 'turquoise' },
 75 |       { hex: '#17A589', rgb: '23, 165, 137', hsl: '168, 76%, 37%', anim: false, name: 'turquoise' },
 76 |       { hex: '#148F77', rgb: '20, 143, 119', hsl: '168, 76%, 32%', anim: false, name: 'turquoise' },
 77 |       { hex: '#117864', rgb: '17, 120, 100', hsl: '168, 76%, 27%', anim: false, name: 'turquoise' },
 78 |       { hex: '#0E6251', rgb: '14, 98, 81', hsl: '168, 76%, 22%', anim: false, name: 'turquoise' }],
 79 | 
 80 |     [{ hex: '#E8F6F3', rgb: '232, 246, 243', hsl: '168, 42%, 94%', anim: false, name: 'green sea' },
 81 |       { hex: '#D0ECE7', rgb: '208, 236, 231', hsl: '168, 42%, 87%', anim: false, name: 'green sea' },
 82 |       { hex: '#A2D9CE', rgb: '162, 217, 206', hsl: '168, 42%, 74%', anim: false, name: 'green sea' },
 83 |       { hex: '#73C6B6', rgb: '115, 198, 182', hsl: '168, 42%, 61%', anim: false, name: 'green sea' },
 84 |       { hex: '#45B39D', rgb: '69, 179, 157', hsl: '168, 45%, 49%', anim: false, name: 'green sea' },
 85 |       { hex: '#16A085', rgb: '22, 160, 133', hsl: '168, 76%, 36%', anim: false, name: 'green sea' },
 86 |       { hex: '#138D75', rgb: '19, 141, 117', hsl: '168, 76%, 31%', anim: false, name: 'green sea' },
 87 |       { hex: '#117A65', rgb: '17, 122, 101', hsl: '168, 76%, 27%', anim: false, name: 'green sea' },
 88 |       { hex: '#0E6655', rgb: '14, 102, 85', hsl: '168, 76%, 23%', anim: false, name: 'green sea' },
 89 |       { hex: '#0B5345', rgb: '11, 83, 69', hsl: '168, 76%, 19%', anim: false, name: 'green sea' }],
 90 | 
 91 |     [{ hex: '#E9F7EF', rgb: '233, 247, 239', hsl: '145, 45%, 94%', anim: false, name: 'nephritis' },
 92 |       { hex: '#D4EFDF', rgb: '212, 239, 223', hsl: '145, 45%, 88%', anim: false, name: 'nephritis' },
 93 |       { hex: '#A9DFBF', rgb: '169, 223, 191', hsl: '145, 45%, 77%', anim: false, name: 'nephritis' },
 94 |       { hex: '#7DCEA0', rgb: '125, 206, 160', hsl: '145, 45%, 65%', anim: false, name: 'nephritis' },
 95 |       { hex: '#52BE80', rgb: '82, 190, 128', hsl: '145, 45%, 53%', anim: false, name: 'nephritis' },
 96 |       { hex: '#27AE60', rgb: '39, 174, 96', hsl: '145, 63%, 42%', anim: false, name: 'nephritis' },
 97 |       { hex: '#229954', rgb: '34, 153, 84', hsl: '145, 63%, 37%', anim: false, name: 'nephritis' },
 98 |       { hex: '#1E8449', rgb: '30, 132, 73', hsl: '145, 63%, 32%', anim: false, name: 'nephritis' },
 99 |       { hex: '#196F3D', rgb: '25, 111, 61', hsl: '145, 63%, 27%', anim: false, name: 'nephritis' },
100 |       { hex: '#145A32', rgb: '20, 90, 50', hsl: '145, 63%, 22%', anim: false, name: 'nephritis' }],
101 | 
102 |     [{ hex: '#EAFAF1', rgb: '234, 250, 241', hsl: '145, 61%, 95%', anim: false, name: 'emerald' },
103 |       { hex: '#D5F5E3', rgb: '213, 245, 227', hsl: '145, 61%, 90%', anim: false, name: 'emerald' },
104 |       { hex: '#ABEBC6', rgb: '171, 235, 198', hsl: '145, 61%, 80%', anim: false, name: 'emerald' },
105 |       { hex: '#82E0AA', rgb: '130, 224, 170', hsl: '145, 61%, 69%', anim: false, name: 'emerald' },
106 |       { hex: '#58D68D', rgb: '88, 214, 141', hsl: '145, 61%, 59%', anim: false, name: 'emerald' },
107 |       { hex: '#2ECC71', rgb: '46, 204, 113', hsl: '145, 63%, 49%', anim: false, name: 'emerald' },
108 |       { hex: '#28B463', rgb: '40, 180, 99', hsl: '145, 63%, 43%', anim: false, name: 'emerald' },
109 |       { hex: '#239B56', rgb: '35, 155, 86', hsl: '145, 63%, 37%', anim: false, name: 'emerald' },
110 |       { hex: '#1D8348', rgb: '29, 131, 72', hsl: '145, 63%, 31%', anim: false, name: 'emerald' },
111 |       { hex: '#186A3B', rgb: '24, 106, 59', hsl: '145, 63%, 25%', anim: false, name: 'emerald' }],
112 | 
113 |     [{ hex: '#FEF9E7', rgb: '254, 249, 231', hsl: '48, 89%, 95%', anim: false, name: 'sunflower' },
114 |       { hex: '#FCF3CF', rgb: '252, 243, 207', hsl: '48, 89%, 90%', anim: false, name: 'sunflower' },
115 |       { hex: '#F9E79F', rgb: '249, 231, 159', hsl: '48, 89%, 80%', anim: false, name: 'sunflower' },
116 |       { hex: '#F7DC6F', rgb: '247, 220, 111', hsl: '48, 89%, 70%', anim: false, name: 'sunflower' },
117 |       { hex: '#F4D03F', rgb: '244, 208, 63', hsl: '48, 89%, 60%', anim: false, name: 'sunflower' },
118 |       { hex: '#F1C40F', rgb: '241, 196, 15', hsl: '48, 89%, 50%', anim: false, name: 'sunflower' },
119 |       { hex: '#D4AC0D', rgb: '212, 172, 13', hsl: '48, 88%, 44%', anim: false, name: 'sunflower' },
120 |       { hex: '#B7950B', rgb: '183, 149, 11', hsl: '48, 88%, 38%', anim: false, name: 'sunflower' },
121 |       { hex: '#9A7D0A', rgb: '154, 125, 10', hsl: '48, 88%, 32%', anim: false, name: 'sunflower' },
122 |       { hex: '#7D6608', rgb: '125, 102, 8', hsl: '48, 88%, 26%', anim: false, name: 'sunflower' }],
123 | 
124 |     [{ hex: '#FEF5E7', rgb: '254, 245, 231', hsl: '37, 90%, 95%', anim: false, name: 'orange' },
125 |       { hex: '#FDEBD0', rgb: '253, 235, 208', hsl: '37, 90%, 90%', anim: false, name: 'orange' },
126 |       { hex: '#FAD7A0', rgb: '250, 215, 160', hsl: '37, 90%, 80%', anim: false, name: 'orange' },
127 |       { hex: '#F8C471', rgb: '248, 196, 113', hsl: '37, 90%, 71%', anim: false, name: 'orange' },
128 |       { hex: '#F5B041', rgb: '245, 176, 65', hsl: '37, 90%, 61%', anim: false, name: 'orange' },
129 |       { hex: '#F39C12', rgb: '243, 156, 18', hsl: '37, 90%, 51%', anim: false, name: 'orange' },
130 |       { hex: '#D68910', rgb: '214, 137, 16', hsl: '37, 86%, 45%', anim: false, name: 'orange' },
131 |       { hex: '#B9770E', rgb: '185, 119, 14', hsl: '37, 86%, 39%', anim: false, name: 'orange' },
132 |       { hex: '#9C640C', rgb: '156, 100, 12', hsl: '37, 86%, 33%', anim: false, name: 'orange' },
133 |       { hex: '#7E5109', rgb: '126, 81, 9', hsl: '37, 86%, 27%', anim: false, name: 'orange' }],
134 | 
135 |     [{ hex: '#FDF2E9', rgb: '253, 242, 233', hsl: '28, 80%, 95%', anim: false, name: 'carrot' },
136 |       { hex: '#FAE5D3', rgb: '250, 229, 211', hsl: '28, 80%, 90%', anim: false, name: 'carrot' },
137 |       { hex: '#F5CBA7', rgb: '245, 203, 167', hsl: '28, 80%, 81%', anim: false, name: 'carrot' },
138 |       { hex: '#F0B27A', rgb: '240, 178, 122', hsl: '28, 80%, 71%', anim: false, name: 'carrot' },
139 |       { hex: '#EB984E', rgb: '235, 152, 78', hsl: '28, 80%, 61%', anim: false, name: 'carrot' },
140 |       { hex: '#E67E22', rgb: '230, 126, 34', hsl: '28, 80%, 52%', anim: false, name: 'carrot' },
141 |       { hex: '#CA6F1E', rgb: '202, 111, 30', hsl: '28, 74%, 46%', anim: false, name: 'carrot' },
142 |       { hex: '#AF601A', rgb: '175, 96, 26', hsl: '28, 74%, 39%', anim: false, name: 'carrot' },
143 |       { hex: '#935116', rgb: '147, 81, 22', hsl: '28, 74%, 33%', anim: false, name: 'carrot' },
144 |       { hex: '#784212', rgb: '120, 66, 18', hsl: '28, 74%, 27%', anim: false, name: 'carrot' }],
145 | 
146 |     [{ hex: '#FBEEE6', rgb: '251, 238, 230', hsl: '24, 71%, 94%', anim: false, name: 'pumpkin' },
147 |       { hex: '#F6DDCC', rgb: '246, 221, 204', hsl: '24, 71%, 88%', anim: false, name: 'pumpkin' },
148 |       { hex: '#EDBB99', rgb: '237, 187, 153', hsl: '24, 71%, 77%', anim: false, name: 'pumpkin' },
149 |       { hex: '#E59866', rgb: '229, 152, 102', hsl: '24, 71%, 65%', anim: false, name: 'pumpkin' },
150 |       { hex: '#DC7633', rgb: '220, 118, 51', hsl: '24, 71%, 53%', anim: false, name: 'pumpkin' },
151 |       { hex: '#D35400', rgb: '211, 84, 0', hsl: '24, 100%, 41%', anim: false, name: 'pumpkin' },
152 |       { hex: '#BA4A00', rgb: '186, 74, 0', hsl: '24, 100%, 36%', anim: false, name: 'pumpkin' },
153 |       { hex: '#A04000', rgb: '160, 64, 0', hsl: '24, 100%, 31%', anim: false, name: 'pumpkin' },
154 |       { hex: '#873600', rgb: '135, 54, 0', hsl: '24, 100%, 26%', anim: false, name: 'pumpkin' },
155 |       { hex: '#6E2C00', rgb: '110, 44, 0', hsl: '24, 100%, 22%', anim: false, name: 'pumpkin' }],
156 | 
157 |     [{ hex: '#FDFEFE', rgb: '253, 254, 254', hsl: '192, 15%, 99%', anim: false, name: 'clouds' },
158 |       { hex: '#FBFCFC', rgb: '251, 252, 252', hsl: '192, 15%, 99%', anim: false, name: 'clouds' },
159 |       { hex: '#F7F9F9', rgb: '247, 249, 249', hsl: '192, 15%, 97%', anim: false, name: 'clouds' },
160 |       { hex: '#F4F6F7', rgb: '244, 246, 247', hsl: '192, 15%, 96%', anim: false, name: 'clouds' },
161 |       { hex: '#F0F3F4', rgb: '240, 243, 244', hsl: '192, 15%, 95%', anim: false, name: 'clouds' },
162 |       { hex: '#ECF0F1', rgb: '236, 240, 241', hsl: '192, 15%, 94%', anim: false, name: 'clouds' },
163 |       { hex: '#D0D3D4', rgb: '208, 211, 212', hsl: '192, 5%, 82%', anim: false, name: 'clouds' },
164 |       { hex: '#B3B6B7', rgb: '179, 182, 183', hsl: '192, 3%, 71%', anim: false, name: 'clouds' },
165 |       { hex: '#979A9A', rgb: '151, 154, 154', hsl: '192, 2%, 60%', anim: false, name: 'clouds' },
166 |       { hex: '#7B7D7D', rgb: '123, 125, 125', hsl: '192, 1%, 49%', anim: false, name: 'clouds' }],
167 | 
168 |     [{ hex: '#F8F9F9', rgb: '248, 249, 249', hsl: '204, 8%, 98%', anim: false, name: 'silver' },
169 |       { hex: '#F2F3F4', rgb: '242, 243, 244', hsl: '204, 8%, 95%', anim: false, name: 'silver' },
170 |       { hex: '#E5E7E9', rgb: '229, 231, 233', hsl: '204, 8%, 90%', anim: false, name: 'silver' },
171 |       { hex: '#D7DBDD', rgb: '215, 219, 221', hsl: '204, 8%, 86%', anim: false, name: 'silver' },
172 |       { hex: '#CACFD2', rgb: '202, 207, 210', hsl: '204, 8%, 81%', anim: false, name: 'silver' },
173 |       { hex: '#BDC3C7', rgb: '189, 195, 199', hsl: '204, 8%, 76%', anim: false, name: 'silver' },
174 |       { hex: '#A6ACAF', rgb: '166, 172, 175', hsl: '204, 5%, 67%', anim: false, name: 'silver' },
175 |       { hex: '#909497', rgb: '144, 148, 151', hsl: '204, 4%, 58%', anim: false, name: 'silver' },
176 |       { hex: '#797D7F', rgb: '121, 125, 127', hsl: '204, 3%, 49%', anim: false, name: 'silver' },
177 |       { hex: '#626567', rgb: '98, 101, 103', hsl: '204, 3%, 40%', anim: false, name: 'silver' }],
178 | 
179 |     [{ hex: '#F4F6F6', rgb: '244, 246, 246', hsl: '184, 9%, 96%', anim: false, name: 'concrete' },
180 |       { hex: '#EAEDED', rgb: '234, 237, 237', hsl: '184, 9%, 92%', anim: false, name: 'concrete' },
181 |       { hex: '#D5DBDB', rgb: '213, 219, 219', hsl: '184, 9%, 85%', anim: false, name: 'concrete' },
182 |       { hex: '#BFC9CA', rgb: '191, 201, 202', hsl: '184, 9%, 77%', anim: false, name: 'concrete' },
183 |       { hex: '#AAB7B8', rgb: '170, 183, 184', hsl: '184, 9%, 69%', anim: false, name: 'concrete' },
184 |       { hex: '#95A5A6', rgb: '149, 165, 166', hsl: '184, 9%, 62%', anim: false, name: 'concrete' },
185 |       { hex: '#839192', rgb: '131, 145, 146', hsl: '184, 6%, 54%', anim: false, name: 'concrete' },
186 |       { hex: '#717D7E', rgb: '113, 125, 126', hsl: '184, 5%, 47%', anim: false, name: 'concrete' },
187 |       { hex: '#5F6A6A', rgb: '95, 106, 106', hsl: '184, 5%, 40%', anim: false, name: 'concrete' },
188 |       { hex: '#4D5656', rgb: '77, 86, 86', hsl: '184, 5%, 32%', anim: false, name: 'concrete' }],
189 | 
190 |     [{ hex: '#F2F4F4', rgb: '242, 244, 244', hsl: '184, 6%, 95%', anim: false, name: 'asbestos' },
191 |       { hex: '#E5E8E8', rgb: '229, 232, 232', hsl: '184, 6%, 91%', anim: false, name: 'asbestos' },
192 |       { hex: '#CCD1D1', rgb: '204, 209, 209', hsl: '184, 6%, 81%', anim: false, name: 'asbestos' },
193 |       { hex: '#B2BABB', rgb: '178, 186, 187', hsl: '184, 6%, 72%', anim: false, name: 'asbestos' },
194 |       { hex: '#99A3A4', rgb: '153, 163, 164', hsl: '184, 6%, 62%', anim: false, name: 'asbestos' },
195 |       { hex: '#7F8C8D', rgb: '127, 140, 141', hsl: '184, 6%, 53%', anim: false, name: 'asbestos' },
196 |       { hex: '#707B7C', rgb: '112, 123, 124', hsl: '184, 5%, 46%', anim: false, name: 'asbestos' },
197 |       { hex: '#616A6B', rgb: '97, 106, 107', hsl: '184, 5%, 40%', anim: false, name: 'asbestos' },
198 |       { hex: '#515A5A', rgb: '81, 90, 90', hsl: '184, 5%, 34%', anim: false, name: 'asbestos' },
199 |       { hex: '#424949', rgb: '66, 73, 73', hsl: '184, 5%, 27%', anim: false, name: 'asbestos' }],
200 | 
201 |     [{ hex: '#EBEDEF', rgb: '235, 237, 239', hsl: '210, 12%, 93%', anim: false, name: 'wet asphalt' },
202 |       { hex: '#D6DBDF', rgb: '214, 219, 223', hsl: '210, 12%, 86%', anim: false, name: 'wet asphalt' },
203 |       { hex: '#AEB6BF', rgb: '174, 182, 191', hsl: '210, 12%, 71%', anim: false, name: 'wet asphalt' },
204 |       { hex: '#85929E', rgb: '133, 146, 158', hsl: '210, 12%, 57%', anim: false, name: 'wet asphalt' },
205 |       { hex: '#5D6D7E', rgb: '93, 109, 126', hsl: '210, 15%, 43%', anim: false, name: 'wet asphalt' },
206 |       { hex: '#34495E', rgb: '52, 73, 94', hsl: '210, 29%, 29%', anim: false, name: 'wet asphalt' },
207 |       { hex: '#2E4053', rgb: '46, 64, 83', hsl: '210, 29%, 25%', anim: false, name: 'wet asphalt' },
208 |       { hex: '#283747', rgb: '40, 55, 71', hsl: '210, 29%, 22%', anim: false, name: 'wet asphalt' },
209 |       { hex: '#212F3C', rgb: '33, 47, 60', hsl: '210, 29%, 18%', anim: false, name: 'wet asphalt' },
210 |       { hex: '#1B2631', rgb: '27, 38, 49', hsl: '210, 29%, 15%', anim: false, name: 'wet asphalt' }],
211 | 
212 |     [{ hex: '#EAECEE', rgb: '234, 236, 238', hsl: '210, 9%, 92%', anim: false, name: 'midnight blue' },
213 |       { hex: '#D5D8DC', rgb: '213, 216, 220', hsl: '210, 9%, 85%', anim: false, name: 'midnight blue' },
214 |       { hex: '#ABB2B9', rgb: '171, 178, 185', hsl: '210, 9%, 70%', anim: false, name: 'midnight blue' },
215 |       { hex: '#808B96', rgb: '128, 139, 150', hsl: '210, 9%, 55%', anim: false, name: 'midnight blue' },
216 |       { hex: '#566573', rgb: '86, 101, 115', hsl: '210, 14%, 39%', anim: false, name: 'midnight blue' },
217 |       { hex: '#2C3E50', rgb: '44, 62, 80', hsl: '210, 29%, 24%', anim: false, name: 'midnight blue' },
218 |       { hex: '#273746', rgb: '39, 55, 70', hsl: '210, 29%, 21%', anim: false, name: 'midnight blue' },
219 |       { hex: '#212F3D', rgb: '33, 47, 61', hsl: '210, 29%, 18%', anim: false, name: 'midnight blue' },
220 |       { hex: '#1C2833', rgb: '28, 40, 51', hsl: '210, 29%, 16%', anim: false, name: 'midnight blue' },
221 |       { hex: '#17202A', rgb: '23, 32, 42', hsl: '210, 29%, 13%', anim: false, name: 'midnight blue' }]
222 |   ],
223 |   currentColor: { hex: '', rgb: '', hsl: '', name: '', index: 0 },
224 |   toggleColorForm: false,
225 |   colorHex: 'ffffff',
226 |   colorRgb: '255,255,255',
227 |   colorHsl: '0,0%,100%'
228 | }
229 | 
230 | const mutations = {
231 |   SET_CURRENT_COLOR (state, obj) {
232 |     state.currentColor = obj
233 |   },
234 |   ACTIVE_COLOR (state, payload) {
235 |     state.colorMatrix[payload.row][payload.col]['anim'] = true
236 |   },
237 |   DISACTIVE_COLOR (state, payload) {
238 |     state.colorMatrix[payload.row][payload.col]['anim'] = false
239 |   },
240 |   TOGGLE_FORM (state) {
241 |     state.toggleColorForm = !state.toggleColorForm
242 |   },
243 |   SET_HEX_COLOR (state, value) {
244 |     function hexToRgb (hex) {
245 |       // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
246 |       let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
247 |       hex = hex.replace(shorthandRegex, function (m, r, g, b) {
248 |         return r + r + g + g + b + b
249 |       })
250 | 
251 |       let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
252 |       return result ? [
253 |         parseInt(result[1], 16),
254 |         parseInt(result[2], 16),
255 |         parseInt(result[3], 16)
256 |       ] : null
257 |     }
258 | 
259 |     function rgb2hsl (r, g, b) {
260 |       let a = Math.max(r, g, b)
261 |       let n = a - Math.min(r, g, b)
262 |       let f = (1 - Math.abs(a + a - n - 1))
263 |       let h = n && ((a === r) ? (g - b) / n : ((a === g) ? 2 + (b - r) / n : 4 + (r - g) / n))
264 |       return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2]
265 |     }
266 | 
267 |     try {
268 |       state.colorHex = value
269 |       state.colorRgb = hexToRgb(state.colorHex).join(',')
270 |       let rgbArrayBase = state.colorRgb.split(',').map((rgb) => rgb / 255)
271 |       state.colorHsl = rgb2hsl(...rgbArrayBase).map((hsl, index) => {
272 |         return index ? (hsl * 100).toFixed(0) + '%' : hsl.toFixed(0)
273 |       }).join(',')
274 |     } catch (err) {
275 |       console.log(err.message)
276 |     }
277 |   },
278 | 
279 |   SET_RGB_COLOR (state, payload) {
280 |     function rgb2hsl (r, g, b) {
281 |       let a = Math.max(r, g, b)
282 |       let n = a - Math.min(r, g, b)
283 |       let f = (1 - Math.abs(a + a - n - 1))
284 |       let h = n && ((a === r) ? (g - b) / n : ((a === g) ? 2 + (b - r) / n : 4 + (r - g) / n))
285 |       return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2]
286 |     }
287 |     let rgb2hex = (r, g, b) => [r, g, b].map(x => Math.round(x * 255).toString(16).padStart(2, 0)).join('')
288 | 
289 |     try {
290 |       let rgbArray = state.colorRgb.split(',')
291 |       if (payload.sym === 'r') {
292 |         rgbArray[0] = payload.value
293 |       } else if (payload.sym === 'g') {
294 |         rgbArray[1] = payload.value
295 |       } else if (payload.sym === 'b') {
296 |         rgbArray[2] = payload.value
297 |       } else {
298 |         rgbArray = [255, 255, 255]
299 |       }
300 |       let rgbArrayBase = rgbArray.map((rgb) => rgb / 255)
301 |       state.colorRgb = rgbArray.join(',')
302 |       state.colorHex = rgb2hex(...rgbArrayBase)
303 |       state.colorHsl = rgb2hsl(...rgbArrayBase).map((hsl, index) => {
304 |         return index ? (hsl * 100).toFixed(0) + '%' : hsl.toFixed(0)
305 |       }).join(',')
306 |     } catch (err) {
307 |       console.log(err.message)
308 |     }
309 |   },
310 | 
311 |   SET_HSL_COLOR (state, payload) {
312 |     let hsl2rgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)) => [f(0), f(8), f(4)]
313 |     let rgb2hex = (r, g, b) => [r, g, b].map(x => Math.round(x * 255).toString(16).padStart(2, 0)).join('')
314 |     try {
315 |       let hslArray = state.colorHsl.split(',')
316 |       let hslArrayBase = hslArray.map((hsl, i) => {
317 |         return i ? (hsl.split('%')[0] / 100) : hsl
318 |       })
319 |       if (payload.sym === 'h') {
320 |         hslArray[0] = payload.value
321 |         hslArrayBase[0] = payload.value
322 |       } else if (payload.sym === 's') {
323 |         hslArray[1] = payload.value + '%'
324 |         hslArrayBase[1] = payload.value / 100
325 |       } else if (payload.sym === 'l') {
326 |         hslArray[2] = payload.value + '%'
327 |         hslArrayBase[2] = payload.value / 100
328 |       } else {
329 |         hslArray = ['0', '0%', '100%']
330 |       }
331 |       state.colorHsl = hslArray.join(',')
332 |       state.colorRgb = hsl2rgb(...hslArrayBase).map(x => x * 255 | 0).join(',')
333 |       let rgbArrayBase = state.colorRgb.split(',').map((rgb) => rgb / 255)
334 |       state.colorHex = rgb2hex(...rgbArrayBase)
335 |     } catch (err) {
336 |       console.log(err.message)
337 |     }
338 |   }
339 | }
340 | 
341 | const actions = {
342 |   setCurrentColor ({ commit }, obj) {
343 |     commit('SET_CURRENT_COLOR', obj)
344 |   },
345 |   activeColor ({ commit }, payload) {
346 |     commit('ACTIVE_COLOR', payload)
347 |   },
348 |   disactiveColor ({ commit }, payload) {
349 |     commit('DISACTIVE_COLOR', payload)
350 |   },
351 |   toggleForm ({ commit }) {
352 |     commit('TOGGLE_FORM')
353 |   },
354 |   setHexColor ({ commit }, payload) {
355 |     commit('SET_HEX_COLOR', payload.target.value)
356 |   },
357 |   setRgbColor ({ commit }, payload) {
358 |     commit('SET_RGB_COLOR', payload)
359 |   },
360 |   setHslColor ({ commit }, payload) {
361 |     commit('SET_HSL_COLOR', payload)
362 |   }
363 | }
364 | 
365 | export default {
366 |   state,
367 |   mutations,
368 |   actions
369 | }
370 | 


--------------------------------------------------------------------------------
/src/renderer/store/modules/Cron.js:
--------------------------------------------------------------------------------
  1 | import i18n from './../../i18n'
  2 | import * as moment from 'moment'
  3 | import * as parser from 'cron-parser'
  4 | 
  5 | const CRON_DATETIME_MAX_LIMIT = 200
  6 | const CRON_DATETIME_DEFAULT_COUNT = 7
  7 | const CRON_SPECIAL_TYPES = [ '@yearly', '@annually', '@monthly', '@daily', '@hourly', '@reboot' ]
  8 | const CRON_SELECTED_UNIT = {
  9 |   'min': false,
 10 |   'hour': false,
 11 |   'dayOfMonth': false,
 12 |   'month': false,
 13 |   'dayOfWeek': false
 14 | }
 15 | const CRON_OPTIONS = {
 16 |   currentDate: moment.utc().local().format('YYYY-MM-DD HH:mm:ss'),
 17 |   utc: true
 18 | }
 19 | 
 20 | const helpers = {
 21 |   getTermOptions () {
 22 |     return {
 23 |       default: [
 24 |         { symbol: '*', explaination: i18n.t('cronHelp.anyValue') },
 25 |         { symbol: ',', explaination: i18n.t('cronHelp.valueListSeparator') },
 26 |         { symbol: '-', explaination: i18n.t('cronHelp.rangeOfValues') },
 27 |         { symbol: '/', explaination: i18n.t('cronHelp.stepValues') },
 28 |         { symbol: '@yearly', explaination: i18n.t('cronHelp.nonStandard') },
 29 |         { symbol: '@annually', explaination: i18n.t('cronHelp.nonStandard') },
 30 |         { symbol: '@monthly', explaination: i18n.t('cronHelp.nonStandard') },
 31 |         { symbol: '@daily', explaination: i18n.t('cronHelp.nonStandard') },
 32 |         { symbol: '@hourly', explaination: i18n.t('cronHelp.nonStandard') },
 33 |         { symbol: '@reboot', explaination: i18n.t('cronHelp.nonStandard') }
 34 |       ],
 35 |       min: [
 36 |         { symbol: '*', explaination: i18n.t('cronHelp.anyValue') },
 37 |         { symbol: ',', explaination: i18n.t('cronHelp.valueListSeparator') },
 38 |         { symbol: '-', explaination: i18n.t('cronHelp.rangeOfValues') },
 39 |         { symbol: '/', explaination: i18n.t('cronHelp.stepValues') },
 40 |         { symbol: '0-59', explaination: i18n.t('cronHelp.allowedValues') }
 41 |       ],
 42 |       hour: [
 43 |         { symbol: '*', explaination: i18n.t('cronHelp.anyValue') },
 44 |         { symbol: ',', explaination: i18n.t('cronHelp.valueListSeparator') },
 45 |         { symbol: '-', explaination: i18n.t('cronHelp.rangeOfValues') },
 46 |         { symbol: '/', explaination: i18n.t('cronHelp.stepValues') },
 47 |         { symbol: '0-23', explaination: i18n.t('cronHelp.allowedValues') }
 48 |       ],
 49 |       dayOfMonth: [
 50 |         { symbol: '*', explaination: i18n.t('cronHelp.anyValue') },
 51 |         { symbol: ',', explaination: i18n.t('cronHelp.valueListSeparator') },
 52 |         { symbol: '-', explaination: i18n.t('cronHelp.rangeOfValues') },
 53 |         { symbol: '/', explaination: i18n.t('cronHelp.stepValues') },
 54 |         { symbol: '1-31', explaination: i18n.t('cronHelp.allowedValues') }
 55 |       ],
 56 |       month: [
 57 |         { symbol: '*', explaination: i18n.t('cronHelp.anyValue') },
 58 |         { symbol: ',', explaination: i18n.t('cronHelp.valueListSeparator') },
 59 |         { symbol: '-', explaination: i18n.t('cronHelp.rangeOfValues') },
 60 |         { symbol: '/', explaination: i18n.t('cronHelp.stepValues') },
 61 |         { symbol: '1-12', explaination: i18n.t('cronHelp.allowedValues') },
 62 |         { symbol: 'JAN-DEC', explaination: i18n.t('cronHelp.alternativeSingleValues') }
 63 |       ],
 64 |       dayOfWeek: [
 65 |         { symbol: '*', explaination: i18n.t('cronHelp.anyValue') },
 66 |         { symbol: ',', explaination: i18n.t('cronHelp.valueListSeparator') },
 67 |         { symbol: '-', explaination: i18n.t('cronHelp.rangeOfValues') },
 68 |         { symbol: '/', explaination: i18n.t('cronHelp.stepValues') },
 69 |         { symbol: '0-6', explaination: i18n.t('cronHelp.allowedValues') },
 70 |         { symbol: 'SUN-SAT', explaination: i18n.t('cronHelp.alternativeSingleValues') }
 71 |       ]
 72 |     }
 73 |   },
 74 | 
 75 |   translateSpecialWord () {
 76 |     if (state.cronExp === '@yearly') {
 77 |       state.cronResult['content'] = i18n.t('cronHelp.yearly')
 78 |       return true
 79 |     }
 80 |     if (state.cronExp === '@annually') {
 81 |       state.cronResult['content'] = i18n.t('cronHelp.annually')
 82 |       return true
 83 |     }
 84 |     if (state.cronExp === '@monthly') {
 85 |       state.cronResult['content'] = i18n.t('cronHelp.monthly')
 86 |       return true
 87 |     }
 88 |     if (state.cronExp === '@daily') {
 89 |       state.cronResult['content'] = i18n.t('cronHelp.daily')
 90 |       return true
 91 |     }
 92 |     if (state.cronExp === '@hourly') {
 93 |       state.cronResult['content'] = i18n.t('cronHelp.hourly')
 94 |       return true
 95 |     }
 96 |     if (state.cronExp === '@reboot') {
 97 |       state.cronResult['content'] = i18n.t('cronHelp.afterReboot')
 98 |       return true
 99 |     }
100 |     return false
101 |   },
102 | 
103 |   translateToLanguage (state) {
104 |     if (this.translateSpecialWord()) return true
105 | 
106 |     let phrases = state.cronExp.split(/\s+/)
107 |     switch (state.currentUnit) {
108 |       case 'min':
109 |         state.cronResult['content'] = i18n.t('cron.at') + ' ' + this.translateLanguageByMode(phrases[0], 'minute')
110 |         break
111 |       case 'hour':
112 |         state.cronResult['content'] = i18n.t('cron.at') + ' ' + this.translateLanguageByMode(phrases[1], 'hour')
113 |         break
114 |       case 'dayOfMonth':
115 |         state.cronResult['content'] = i18n.t('cron.on') + ' ' + this.translateLanguageByMode(phrases[2], 'dayOfMonth')
116 |         break
117 |       case 'month':
118 |         state.cronResult['content'] = i18n.t('cron.in') + ' ' + this.translateLanguageByMode(phrases[3], 'month')
119 |         break
120 |       case 'dayOfWeek':
121 |         state.cronResult['content'] = i18n.t('cron.on') + ' ' + this.translateLanguageByMode(phrases[4], 'dayOfWeek')
122 |         break
123 |       default:
124 |         state.cronResult['content'] = ''
125 |         break
126 |     }
127 |     if (i18n.locale === 'cn') state.cronResult['content'] = state.cronResult['content'].replace(/\s/g, '')
128 |   },
129 | 
130 |   translateLanguageByMode (phrase, mode) {
131 |     let terms = phrase.split(',')
132 |     if (terms.length === 1) return this.translateEachTerm(terms[0], mode)
133 |     if (terms.length > 1) {
134 |       let lang = ''
135 |       if (i18n.locale === 'en' && mode === 'dayOfMonth') lang += i18n.t('cronHelp.dayOfMonth')
136 |       for (let i = 0; i < terms.length; i++) {
137 |         if (i === (terms.length - 2)) {
138 |           lang = lang + this.translateEachTerm(terms[i], mode) + ' ' + i18n.t('cron.and') + ' '
139 |         } else if (i === (terms.length - 1)) {
140 |           lang = lang + ' ' + this.translateEachTerm(terms[i], mode) + ' '
141 |         } else {
142 |           lang = lang + this.translateEachTerm(terms[i], mode) + ', '
143 |         }
144 |       }
145 |       return lang
146 |     } else {
147 |       return ''
148 |     }
149 |   },
150 | 
151 |   translateEachTerm (term, mode, fromRange = false) {
152 |     if (term === '*') {
153 |       return this.translateEveryTerm(mode)
154 |     } else if (term.match(/\//)) {
155 |       let skip = term.split(/\//)
156 |       let _range = this.translateRange(skip[0], mode, true)
157 |       if (i18n.locale === 'cn') {
158 |         return i18n.t('cron.every') + _range + i18n.t('cron.of') + i18n.t('cron.every') + this.translateOrdinalSuffix(skip[1], mode)
159 |       } else {
160 |         return i18n.t('cron.every') + ' ' + this.translateOrdinalSuffix(skip[1], mode) + ' ' + _range
161 |       }
162 |     } else if (term.match(/-/)) {
163 |       return this.translateRange(term, mode)
164 |     } else {
165 |       if (mode === 'dayOfWeek') {
166 |         return this.getDayOfWeek(term)
167 |       } else if (mode === 'month') {
168 |         return this.getMonthName(term)
169 |       } else {
170 |         return (i18n.locale === 'en' && (fromRange || mode === 'dayOfMonth')) ? term : (term + ' ' + i18n.t('cronHelp.' + mode))
171 |       }
172 |     }
173 |   },
174 | 
175 |   translateEveryTerm (mode) {
176 |     if (mode === 'dayOfWeek' && i18n.locale === 'cn') return '每周的每一天'
177 |     if (mode === 'dayOfMonth' && i18n.locale === 'cn') return '每月的每一天'
178 |     return i18n.t('cron.every') + ' ' + i18n.t('cronHelp.' + mode)
179 |   },
180 | 
181 |   translateRange (term, mode, fromStep = false) {
182 |     if (term === '*') {
183 |       return ''
184 |     } else if (term.match('-')) {
185 |       let range = term.split(/-/)
186 |       let rangeLang = i18n.t('cron.from') + ' ' + this.translateEachTerm(range[0], mode, true) + ' ' + i18n.t('cron.through') + ' ' + this.translateEachTerm(range[1], mode, true)
187 |       return (i18n.locale === 'en' && !fromStep) ? (i18n.t('cronHelp.' + mode) + ' ' + rangeLang) : rangeLang
188 |     } else if (fromStep === true) {
189 |       let rangeLang = i18n.t('cron.from') + ' ' + this.translateEachTerm(term, mode, true) + ' ' + i18n.t('cron.through') + ' ' + this.translateEachTerm(this.getTheEndByMode(mode), mode, true)
190 |       return (i18n.locale === 'en' && !fromStep) ? (i18n.t('cronHelp.' + mode) + ' ' + rangeLang) : rangeLang
191 |     }
192 |   },
193 | 
194 |   translateOrdinalSuffix (num, mode) {
195 |     if (i18n.locale === 'en') {
196 |       if (parseInt(num) === 1) return '1st' + ' ' + i18n.t('cronHelp.' + mode)
197 |       if (parseInt(num) === 2) return '2nd' + ' ' + i18n.t('cronHelp.' + mode)
198 |       if (parseInt(num) === 3) return '3rd' + ' ' + i18n.t('cronHelp.' + mode)
199 |       if (parseInt(num) > 3) return num + 'th' + ' ' + i18n.t('cronHelp.' + mode)
200 |     } else {
201 |       let lang = '第' + num
202 |       return (mode === 'dayOfWeek' || mode === 'dayOfMonth') ? lang + '天' : lang + i18n.t('cronHelp.' + mode)
203 |     }
204 |   },
205 | 
206 |   getDayOfWeek (num) {
207 |     let dayOfWeek = [
208 |       i18n.t('cronHelp.sunday'),
209 |       i18n.t('cronHelp.monday'),
210 |       i18n.t('cronHelp.tuesday'),
211 |       i18n.t('cronHelp.wednesday'),
212 |       i18n.t('cronHelp.thursday'),
213 |       i18n.t('cronHelp.friday'),
214 |       i18n.t('cronHelp.saturday')
215 |     ]
216 |     let aliases = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
217 |     let numStr = String(num).toLowerCase()
218 |     if (aliases.includes(numStr)) {
219 |       num = aliases.findIndex(x => x === numStr)
220 |     }
221 |     return dayOfWeek[num]
222 |   },
223 | 
224 |   getDayOfMonth (num) {
225 |     return (state.locale === 'en') ? num : (num + i18n.t('cronHelp.dayOfMonth'))
226 |   },
227 | 
228 |   getMonthName (num) {
229 |     let dayOfMonth = {
230 |       1: 'January',
231 |       2: 'February',
232 |       3: 'March',
233 |       4: 'April',
234 |       5: 'May',
235 |       6: 'June',
236 |       7: 'July',
237 |       8: 'August',
238 |       9: 'September',
239 |       10: 'October',
240 |       11: 'November',
241 |       12: 'December'
242 |     }
243 | 
244 |     let aliases = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']
245 |     let numStr = String(num).toLowerCase()
246 |     if (aliases.includes(numStr)) {
247 |       num = aliases.findIndex(x => x === numStr) + 1
248 |     }
249 | 
250 |     return (i18n.locale === 'en') ? dayOfMonth[num] : (num + i18n.t('cronHelp.month'))
251 |   },
252 | 
253 |   getTheEndByMode (mode) {
254 |     if (mode === 'minute') return '59'
255 |     if (mode === 'hour') return '23'
256 |     if (mode === 'dayOfMonth') return '31'
257 |     if (mode === 'month') return '12'
258 |     if (mode === 'dayOfWeek') return '0'
259 |   }
260 | 
261 | }
262 | 
263 | const state = {
264 |   tabs: [
265 |     { title: i18n.t('tabs.home'), isActive: true },
266 |     { title: i18n.t('tabs.help'), isActive: false }
267 |   ],
268 |   currentTab: i18n.t('tabs.home'),
269 |   cronExp: '* * * * *',
270 |   dateMaxCount: CRON_DATETIME_DEFAULT_COUNT,
271 |   cronResult: {
272 |     status: 0,
273 |     content: i18n.t('cron.heresResult'),
274 |     list: []
275 |   },
276 |   termOptions: helpers.getTermOptions(),
277 |   currentUnit: 'default'
278 | }
279 | 
280 | const mutations = {
281 |   SET_INIT_STATE (state, payload) {
282 |     state.tabs = payload.tabs
283 |     state.currentTab = payload.currentTab
284 |     state.cronResult = { status: 0, content: i18n.t('cron.heresResult'), list: [] }
285 |     state.termOptions = helpers.getTermOptions()
286 |   },
287 | 
288 |   SET_NAV (state, payload) {
289 |     state.tabs.forEach((tabs, i) => {
290 |       if (i === payload.index) {
291 |         state.tabs[payload.index]['isActive'] = true
292 |         state.currentTab = payload.title
293 |       } else {
294 |         state.tabs[i]['isActive'] = false
295 |       }
296 |     })
297 |   },
298 | 
299 |   CRON_MATCH (state, target) {
300 |     if (target.name === 'cron-exp') {
301 |       state.cronExp = target.value
302 |     }
303 |     if (target.name === 'max-count') {
304 |       if (target.value >= 1 && target.value <= CRON_DATETIME_MAX_LIMIT) {
305 |         state.dateMaxCount = parseInt(target.value)
306 |       } else if (target.value > CRON_DATETIME_MAX_LIMIT) {
307 |         state.dateMaxCount = CRON_DATETIME_MAX_LIMIT
308 |       } else if (target.value === '') {
309 |         state.dateMaxCount = ''
310 |         return false
311 |       } else {
312 |         state.dateMaxCount = CRON_DATETIME_DEFAULT_COUNT
313 |       }
314 |     }
315 | 
316 |     try {
317 |       let expTerms = state.cronExp.split(/\s+/)
318 |       let terms = expTerms.filter((term) => term.length !== 0)
319 |       state.cronResult = { status: -1, content: '', list: [] }
320 |       if (terms.length < 5 && !CRON_SPECIAL_TYPES.includes(state.cronExp)) {
321 |         target.classList.add('invalid')
322 |         state.cronResult = { status: -1, content: i18n.t('cronHelp.expNotComplete'), list: [] }
323 |         return false
324 |       } else {
325 |         target.classList.remove('invalid')
326 |         if (state.cronExp === '@reboot') {
327 |           state.cronResult = { status: 1, content: i18n.t('cronHelp.afterReboot'), list: [] }
328 |           return false
329 |         }
330 |       }
331 |       let interval = (state.cronExp === '@annually') ? parser.parseExpression('0 0 1 1 *', CRON_OPTIONS) : parser.parseExpression(state.cronExp, CRON_OPTIONS)
332 |       Array(parseInt(state.dateMaxCount)).fill(1).forEach((_, i) => {
333 |         state.cronResult['list'].push(interval.next()['_date'].format('YYYY-MM-DD HH:mm:ss dddd'))
334 |       })
335 |       state.cronResult['status'] = 1
336 |       if (state.cronResult['status'] >= 0) helpers.translateToLanguage(state)
337 |     } catch (err) {
338 |       console.log('Error: ' + err.message)
339 |       target.classList.add('invalid')
340 |       state.cronResult = { status: -1, content: err.message, list: [] }
341 |       return false
342 |     }
343 |   },
344 | 
345 |   SELECT_UNIT (state, target) {
346 |     let children = target.currentTarget.parentNode.childNodes
347 |     children.forEach((child, i) => {
348 |       if (child.classList && child.classList.contains('tag')) {
349 |         child.classList.remove('selected')
350 |       }
351 |     })
352 |     target.currentTarget.classList.add('selected')
353 |     selectTextInInput()
354 |     if (state.cronResult['status'] >= 0) helpers.translateToLanguage(state)
355 | 
356 |     function selectTextInInput () {
357 |       let expTerms = state.cronExp.split(' ')
358 |       let terms = expTerms.filter((term) => term.length !== 0)
359 |       if (terms.length === 5) {
360 |         let cronInput = document.getElementsByName('cron-exp')[0]
361 |         cronInput.focus()
362 |         if (target.currentTarget.classList.contains('min')) {
363 |           cronInput.setSelectionRange(0, terms[0].length)
364 |           state.currentUnit = 'min'
365 |         }
366 |         if (target.currentTarget.classList.contains('hour')) {
367 |           cronInput.setSelectionRange((terms[0].length + 1), (terms[1].length + terms[0].length + 1))
368 |           state.currentUnit = 'hour'
369 |         }
370 |         if (target.currentTarget.classList.contains('dayOfMonth')) {
371 |           let endTermLen = getStrLengthInArray(terms, 0, 3)
372 |           let endPos = endTermLen + 2
373 |           let startTermLen = getStrLengthInArray(terms, 0, 2)
374 |           let startPos = startTermLen + 2
375 |           cronInput.setSelectionRange(startPos, endPos)
376 |           state.currentUnit = 'dayOfMonth'
377 |         }
378 |         if (target.currentTarget.classList.contains('month')) {
379 |           let endTermLen = getStrLengthInArray(terms, 0, 4)
380 |           let endPos = endTermLen + 3
381 |           let startTermLen = getStrLengthInArray(terms, 0, 3)
382 |           let startPos = startTermLen + 3
383 |           cronInput.setSelectionRange(startPos, endPos)
384 |           state.currentUnit = 'month'
385 |         }
386 |         if (target.currentTarget.classList.contains('dayOfWeek')) {
387 |           let endTermLen = getStrLengthInArray(terms, 0, 5)
388 |           let endPos = endTermLen + 4
389 |           let startTermLen = getStrLengthInArray(terms, 0, 4)
390 |           let startPos = startTermLen + 4
391 |           cronInput.setSelectionRange(startPos, endPos)
392 |           state.currentUnit = 'dayOfWeek'
393 |         }
394 |       }
395 | 
396 |       function getStrLengthInArray (array, start, end) {
397 |         return array.slice(start, end).map((elem, i) => { return elem.length }).reduce((sum, x) => sum + x)
398 |       }
399 |     }
400 |   },
401 | 
402 |   UNIT_BE_SELECTED (state, target) {
403 |     let ctl = target.currentTarget
404 |     let startPos = ctl.selectionStart
405 |     let endPos = ctl.selectionEnd
406 | 
407 |     let expTerms = state.cronExp.split(' ')
408 |     let terms = expTerms.filter((term) => term.length !== 0)
409 |     if (terms.length === 5) {
410 |       let ranges = getStrRange(terms)
411 |       let unit = Object.keys(CRON_SELECTED_UNIT)
412 |       let tagList = Array.from(document.getElementsByClassName('tag'))
413 |       for (let tag of tagList) {
414 |         tag.classList.remove('selected')
415 |       }
416 |       ranges.forEach((range, i) => {
417 |         if (startPos >= range[0] && startPos <= range[1] && endPos >= range[0] && endPos <= range[1]) {
418 |           document.getElementsByClassName(unit[i])[0].classList.add('selected')
419 |           state.currentUnit = unit[i]
420 |           if (state.cronResult['status'] >= 0) helpers.translateToLanguage(state)
421 |         }
422 |       })
423 |     }
424 | 
425 |     if (CRON_SPECIAL_TYPES.includes(state.cronExp)) {
426 |       state.currentUnit = 'default'
427 |     }
428 | 
429 |     function getStrRange (array) {
430 |       let pos = 0
431 |       let ranges = array.map(function (elem, i) {
432 |         let range = [pos, pos + elem.length]
433 |         pos = pos + elem.length
434 |         pos += 1 // add space
435 |         return range
436 |       })
437 |       return ranges
438 |     }
439 |   }
440 | }
441 | 
442 | const actions = {
443 |   setInitState ({ commit }, payload) {
444 |     commit('SET_INIT_STATE', payload)
445 |   },
446 |   setNav ({ commit }, payload) {
447 |     commit('SET_NAV', payload)
448 |   },
449 |   cronMatch ({ commit }, payload) {
450 |     commit('CRON_MATCH', payload.target)
451 |   },
452 |   selectUnit ({ commit }, payload) {
453 |     commit('SELECT_UNIT', payload)
454 |   },
455 |   unitBeSelected ({ commit }, payload) {
456 |     commit('UNIT_BE_SELECTED', payload)
457 |   }
458 | }
459 | 
460 | export default {
461 |   state,
462 |   mutations,
463 |   actions
464 | }
465 | 


--------------------------------------------------------------------------------
/src/renderer/store/modules/Image64.js:
--------------------------------------------------------------------------------
 1 | const state = {
 2 |   base64: ''
 3 | }
 4 | 
 5 | const mutations = {
 6 |   SET_IMAGE (state, payload) {
 7 |     let image = payload
 8 |     state.base64 = image
 9 |   },
10 |   RESET_ALL () {
11 |     state.base64 = ''
12 |   }
13 | }
14 | 
15 | const actions = {
16 |   setImage ({ commit }, payload) {
17 |     commit('SET_IMAGE', payload)
18 |   },
19 |   resetAll ({ commit }) {
20 |     commit('RESET_ALL')
21 |   }
22 | }
23 | 
24 | export default {
25 |   state,
26 |   mutations,
27 |   actions
28 | }
29 | 


--------------------------------------------------------------------------------
/src/renderer/store/modules/Json.js:
--------------------------------------------------------------------------------
  1 | import i18n from './../../i18n'
  2 | 
  3 | const state = {
  4 |   jsonStr: '',
  5 |   jsonResult: '',
  6 |   jsonHtml: '',
  7 |   error: { 'code': 0, 'msg': '' },
  8 |   isXML: false
  9 | }
 10 | 
 11 | const ESCAPE_SYM = [
 12 |   ['<', '&lt;'],
 13 |   ['>', '&gt;'],
 14 |   ['&nbsp', '&amp;nbsp'],
 15 |   ['&quot', '&amp;quot']
 16 | ]
 17 | 
 18 | const mutations = {
 19 |   SET_JSON_TEXT (state, value) {
 20 |     state.jsonStr = value
 21 |   },
 22 | 
 23 |   CONVERT_JSON (state) {
 24 |     let i = 0
 25 |     let indentInit = 0
 26 |     let indentSym = '&nbsp;'
 27 |     let indentCount = 4
 28 | 
 29 |     state.error = { 'code': 0, 'msg': '' }
 30 |     state.jsonResult = parseValue()
 31 |     skipSpace()
 32 |     if (i < state.jsonStr.length) {
 33 |       state.jsonResult = errorTermination(i18n.t('json.moreBehind'))
 34 |     }
 35 |     state.jsonHtml = renderHtml(state.jsonResult, indentInit)
 36 |     state.isXML = false
 37 | 
 38 |     function escapeString (txt) {
 39 |       ESCAPE_SYM.forEach((symItem) => {
 40 |         let rex = new RegExp(symItem[0], 'g')
 41 |         txt = txt.replace(rex, symItem[1])
 42 |       })
 43 |       return txt
 44 |     }
 45 | 
 46 |     function unicodeToChinese (str) {
 47 |       return unescape(str.replace(/\\u/g, '%u'))
 48 |     }
 49 | 
 50 |     function renderHtml (result, indtIndx) {
 51 |       let rsltHtml = ''
 52 |       let indentI = indtIndx + 1
 53 |       if (state.error['code'] === -1) {
 54 |         rsltHtml = '<div class="error">' + i18n.t('json.error') + ':</div> <div class="error-msg">' + state.error['msg'] + '</div><div class="error-pos-msg">' + i18n.t('json.near') + ' <p>' + state.error['posMsg'] + '</p> </div>'
 55 |       } else if (Array.isArray(result)) {
 56 |         let arrayHtml = ''
 57 |         let arrayItemCount = 0
 58 |         result.forEach((item, index) => {
 59 |           arrayItemCount++
 60 |           let itemHtml = ''
 61 |           if (typeof item === 'number') {
 62 |             if (index < (result.length - 1)) {
 63 |               itemHtml = indentSym.repeat(indentCount * indentI) + '<span class="json-number">' + item + '</span>,<br>'
 64 |             } else {
 65 |               itemHtml = indentSym.repeat(indentCount * indentI) + '<span class="json-number">' + item + '</span><br>'
 66 |             }
 67 |           } else if (typeof item === 'string') {
 68 |             if (index < (result.length - 1)) {
 69 |               itemHtml = indentSym.repeat(indentCount * indentI) + '<span class="json-string">"' + unicodeToChinese(item) + '"</span>,<br>'
 70 |             } else {
 71 |               itemHtml = indentSym.repeat(indentCount * indentI) + '<span class="json-string">"' + unicodeToChinese(item) + '"</span><br>'
 72 |             }
 73 |           } else if (typeof item === 'boolean') {
 74 |             if (index < (result.length - 1)) {
 75 |               itemHtml = indentSym.repeat(indentCount * indentI) + '<span class="json-boolean">' + item + '</span>,<br>'
 76 |             } else {
 77 |               itemHtml = indentSym.repeat(indentCount * indentI) + '<span class="json-boolean">' + item + '</span><br>'
 78 |             }
 79 |           } else if (item === null) {
 80 |             if (index < (result.length - 1)) {
 81 |               itemHtml = indentSym.repeat(indentCount * indentI) + '<span class="json-null">' + item + '</span>,<br>'
 82 |             } else {
 83 |               itemHtml = indentSym.repeat(indentCount * indentI) + '<span class="json-null">' + item + '</span><br>'
 84 |             }
 85 |           } else {
 86 |             if (index < (result.length - 1)) {
 87 |               itemHtml = indentSym.repeat(indentCount * indentI) + renderHtml(item, indentI) + ',<br>'
 88 |             } else {
 89 |               itemHtml = indentSym.repeat(indentCount * indentI) + renderHtml(item, indentI) + '<br>'
 90 |             }
 91 |           }
 92 |           arrayHtml += itemHtml
 93 |         })
 94 |         rsltHtml = '<span class="foldOn" data-type="array">[<span class="foldBtn foldBtnOn" @click="foldJson"></span><br>' + arrayHtml + indentSym.repeat(indentCount * indtIndx) + ']</span><span class="foldOff" style="display:none;">[<span class="foldBtn fold-marker" @click="foldJson">Array[' + arrayItemCount + '] ↔</span>]</span>'
 95 |       } else if (typeof result === 'object') {
 96 |         let resultKeyVal = ''
 97 |         for (let index = 0; index < Object.entries(result).length; index++) {
 98 |           // deal with key
 99 |           let keyval = Object.entries(result)[index]
100 |           let resultKey
101 |           // if (typeof keyval[0] === 'number' || (keyval[0] === '0')) {
102 |           if (typeof keyval[0] === 'number') {
103 |             return 'Error!'
104 |           } else {
105 |             resultKey = indentSym.repeat(indentCount * indentI) + '<span class="json-key">"' + unicodeToChinese(escapeString(keyval[0])) + '"</span>:'
106 |           }
107 | 
108 |           // deal with value
109 |           let resultVal
110 |           if (typeof keyval[1] === 'number') {
111 |             if (index < (Object.entries(result).length - 1)) {
112 |               resultVal = '<span class="json-number">' + keyval[1] + '</span>,<br>'
113 |             } else {
114 |               resultVal = '<span class="json-number">' + keyval[1] + '</span><br>'
115 |             }
116 |           } else if (typeof keyval[1] === 'string') {
117 |             if (index < (Object.entries(result).length - 1)) {
118 |               resultVal = '<span class="json-string">"' + unicodeToChinese(escapeString(keyval[1])) + '"</span>,<br>'
119 |             } else {
120 |               resultVal = '<span class="json-string">"' + unicodeToChinese(escapeString(keyval[1])) + '"</span><br>'
121 |             }
122 |           } else if (keyval[1] === null) {
123 |             if (index < (Object.entries(result).length - 1)) {
124 |               resultVal = '<span class="json-null">null</span>,<br>'
125 |             } else {
126 |               resultVal = '<span class="json-null">null</span><br>'
127 |             }
128 |           } else {
129 |             if (index < (Object.entries(result).length - 1)) {
130 |               resultVal = renderHtml(keyval[1], indentI) + ',<br>'
131 |             } else {
132 |               resultVal = renderHtml(keyval[1], indentI) + '<br>'
133 |             }
134 |           }
135 | 
136 |           // adding ',' if it's not the last key-val
137 |           resultKeyVal += (resultKey + resultVal)
138 |         }
139 |         rsltHtml = '<span class="foldOn" data-type="object">{<span class="foldBtn foldBtnOn" @click="foldJson"></span><br>' + resultKeyVal + indentSym.repeat(indentCount * indtIndx) + '}</span><span class="foldOff" style="display:none;">{</i><span class="foldBtn fold-marker" @click="foldJson">Object ↔</span>}</span>'
140 |       } else if (typeof result === 'boolean') {
141 |         rsltHtml = '<span class="json-boolean">' + result + '</span>'
142 |       } else {
143 |         return rsltHtml
144 |       }
145 |       return rsltHtml
146 |     }
147 | 
148 |     function parseValue (isKey = false) {
149 |       skipSpace()
150 |       if (isKey) {
151 |         if (state.jsonStr[i] === `"`) {
152 |           i++
153 |           return parseString()
154 |         } else {
155 |           return undefined
156 |         }
157 |       } else {
158 |         for (; i < state.jsonStr.length; i++) {
159 |           if (state.jsonStr[i] === `{`) {
160 |             i++
161 |             return parseObject()
162 |           }
163 |           if (state.jsonStr[i] === `[`) {
164 |             i++
165 |             return parseArray()
166 |           }
167 |           if (state.jsonStr[i] === `"`) {
168 |             i++
169 |             return parseString()
170 |           }
171 |           if (state.jsonStr[i] === `t` || state.jsonStr[i] === `f`) {
172 |             return parseBoolean()
173 |           }
174 |           if (state.jsonStr[i] === `n`) {
175 |             return parserNull()
176 |           }
177 |           if (/[0-9.e\-+]/i.test(state.jsonStr[i])) {
178 |             return parseNumber()
179 |           } else {
180 |             return undefined
181 |           }
182 |         }
183 |       }
184 |     }
185 | 
186 |     function parseObject () {
187 |       let res = {}
188 |       let value
189 |       skipSpace()
190 |       while (state.jsonStr[i] !== `}` && i < state.jsonStr.length) {
191 |         let comma = false
192 | 
193 |         let key = parseValue(true)
194 |         if (key === undefined) return errorTermination(i18n.t('json.undefinedKey'))
195 |         skipSpace()
196 |         if (state.jsonStr[i] !== `:`) return errorTermination(i18n.t('json.missing') + ' : ')
197 |         i++ // 跳过`:`
198 |         value = parseValue()
199 |         if (value === undefined) return errorTermination(i18n.t('json.undefinedVal'))
200 |         res[key] = value
201 |         skipSpace()
202 |         while (/[ ,]/.test(state.jsonStr[i]) && i < state.jsonStr.length - 1) {
203 |           comma = true
204 |           i++ // 跳过`,`
205 |         }
206 |         skipSpace()
207 |         if (state.jsonStr[i] === `}` && comma) return errorTermination(i18n.t('json.missingKV'))
208 |         if (state.jsonStr[i] !== `}` && !comma) return errorTermination(i18n.t('json.missingComma') + ' : ,')
209 |       }
210 | 
211 |       if (state.jsonStr[i] !== `}`) return errorTermination(i18n.t('json.missing') + ' } ...')
212 |       i++ // 跳过“}”
213 |       return res
214 |     }
215 | 
216 |     function parseArray () {
217 |       let res = []
218 |       let value
219 |       skipSpace()
220 |       while (state.jsonStr[i] !== `]` && i < state.jsonStr.length - 1) {
221 |         let comma = false
222 | 
223 |         value = parseValue()
224 |         res.push(value)
225 |         skipSpace()
226 |         while (/[ ,]/.test(state.jsonStr[i]) && i < state.jsonStr.length - 1) {
227 |           comma = true
228 |           i++ // 跳过`,`
229 |         }
230 |         skipSpace()
231 |         if (state.jsonStr[i] === `]` && comma) return errorTermination(i18n.t('json.missingElemInArray'))
232 |         if (state.jsonStr[i] !== `]` && !comma) return errorTermination(i18n.t('json.missingCommaInArray'))
233 |         if (/[ ,]/.test(state.jsonStr[i]) === false && value === undefined) return errorTermination('the element is undefined...')
234 |       }
235 |       if (state.jsonStr[i] !== `]`) return errorTermination(i18n.t('json.missing') + ' ] ...')
236 |       i++ // 跳过结束“]”
237 |       return res
238 |     }
239 | 
240 |     function parseString () {
241 |       /**
242 |        * 直接获取到这串字符串 key 或 value
243 |        */
244 |       let res = ``
245 |       let j = i
246 |       while ((state.jsonStr[i] !== `"` || (state.jsonStr[i] === `"` && state.jsonStr[i - 1] === `\\`)) && i < state.jsonStr.length) {
247 |         i++
248 |       }
249 |       res = state.jsonStr.slice(j, i)
250 |       if (state.jsonStr[i] !== `"`) return errorTermination(i18n.t('json.missing') + ' " ')
251 |       i++ // 跳过字符串结尾引号结束`"`
252 |       return res
253 |     }
254 | 
255 |     function parseBoolean () {
256 |       if (state.jsonStr[i] === `t` && i < state.jsonStr.length) {
257 |         if ((i + 3) < state.jsonStr.length && state.jsonStr[i + 1] === `r` && state.jsonStr[i + 2] === `u` && state.jsonStr[i + 3] === `e`) {
258 |           i = i + 4
259 |           return true
260 |         } else {
261 |           return i18n.t('json.notBool')
262 |         }
263 |       } else {
264 |         if ((i + 4) < state.jsonStr.length && state.jsonStr[i + 1] === `a` && state.jsonStr[i + 2] === `l` && state.jsonStr[i + 3] === `s` && state.jsonStr[i + 4] === `e`) {
265 |           i = i + 5
266 |           return false
267 |         } else {
268 |           return i18n.t('json.notBool')
269 |         }
270 |       }
271 |     }
272 | 
273 |     function parseNumber () {
274 |       let res = ``
275 |       let j = i
276 |       while (/[0-9.e\-+]/i.test(state.jsonStr[i]) && i < state.jsonStr.length) {
277 |         i++
278 |       }
279 |       res = Number(state.jsonStr.slice(j, i))
280 |       if (isNaN(res)) return errorTermination(i18n.t('json.notNum'))
281 |       return res
282 |     }
283 | 
284 |     function parserNull () {
285 |       if ((i + 3) < state.jsonStr.length && state.jsonStr[i] === `n` && state.jsonStr[i + 1] === `u` && state.jsonStr[i + 2] === `l` && state.jsonStr[i + 3] === `l`) {
286 |         i = i + 4
287 |         return null
288 |       } else {
289 |         return i18n.t('json.notNull')
290 |       }
291 |     }
292 | 
293 |     function skipSpace () {
294 |       while (/[ \n\r\t\b]/.test(state.jsonStr[i]) && i < state.jsonStr.length) {
295 |         i++ // 跳过空白
296 |       }
297 |     }
298 | 
299 |     function errorPosMsg () {
300 |       let strPosMsg = state.jsonStr.slice(0, i)
301 |       return strPosMsg
302 |     }
303 | 
304 |     function errorTermination (msg) {
305 |       state.error = {'code': -1, 'posMsg': errorPosMsg(), 'msg': i18n.t('json.seems') + msg}
306 |       return state.error
307 |     }
308 |   },
309 | 
310 |   JSON_TO_XML (state) {
311 |     let indentInit = 0
312 |     let indentSym = '&nbsp;'
313 |     let indentCount = 2
314 |     let result = state.jsonResult
315 | 
316 |     state.jsonHtml = '&lt;?xml version=<span class="xml-string">"1.0"</span> encoding=<span class="xml-string">"UTF-8"</span>?&gt;&lt;root&gt;<br/>'
317 |     state.jsonHtml += renderXML(result, indentInit)
318 |     state.jsonHtml += '&lt;/root&gt;'
319 |     state.isXML = true
320 | 
321 |     function renderXML (jsonResult, indtIndx) {
322 |       let xmlResult = ''
323 |       let indentI = indtIndx + 1
324 |       if (Array.isArray(jsonResult)) {
325 |         jsonResult.forEach((item, index) => {
326 |           if (typeof item === 'object' || Array.isArray(item)) {
327 |             xmlResult += ('<br/>' + indentSym.repeat(indentCount * indentI) + '&lt;' + index + '&gt;<br>')
328 |             xmlResult += renderXML(item, indentI)
329 |             xmlResult += (indentSym.repeat(indentCount * indentI) + '&lt;/' + index + '&gt;<br>')
330 |           } else {
331 |             xmlResult += (indentSym.repeat(indentCount * indentI) + '&lt;' + index + '&gt;')
332 |             xmlResult += ('<span class="xml-val">' + item + '</span>')
333 |             xmlResult += ('&lt;/' + index + '&gt;<br>')
334 |           }
335 |         })
336 |       } else if (typeof jsonResult === 'object') {
337 |         for (let index = 0; index < Object.entries(jsonResult).length; index++) {
338 |           let keyval = Object.entries(jsonResult)[index]
339 |           xmlResult += (indentSym.repeat(indentCount * indentI) + '&lt;' + keyval[0] + '&gt;')
340 |           if (typeof keyval[1] === 'object' || Array.isArray(keyval[1])) {
341 |             xmlResult += '<br>'
342 |             xmlResult += renderXML(keyval[1], indentI)
343 |             xmlResult += (indentSym.repeat(indentCount * indentI) + '&lt;/' + keyval[0] + '&gt;<br>')
344 |           } else {
345 |             xmlResult += ('<span class="xml-val">' + keyval[1] + '</span>')
346 |             xmlResult += ('&lt;/' + keyval[0] + '&gt;<br>')
347 |           }
348 |         }
349 |       } else {
350 |         xmlResult = jsonResult
351 |       }
352 |       return xmlResult
353 |     }
354 |   }
355 | }
356 | 
357 | const actions = {
358 |   setJsonText ({ commit }, value) {
359 |     commit('SET_JSON_TEXT', value)
360 |   },
361 |   convertJson ({ commit }) {
362 |     commit('CONVERT_JSON')
363 |   },
364 |   jsonToXML ({ commit }) {
365 |     commit('JSON_TO_XML')
366 |   }
367 | }
368 | 
369 | export default {
370 |   state,
371 |   mutations,
372 |   actions
373 | }
374 | 


--------------------------------------------------------------------------------
/src/renderer/store/modules/Menu.js:
--------------------------------------------------------------------------------
 1 | const state = {
 2 |   menuState: true,
 3 |   lang: 'en'
 4 | }
 5 | 
 6 | const mutations = {
 7 |   TOGGLE_MENU (state) {
 8 |     state.menuState = !state.menuState
 9 |   },
10 |   TOGGLE_LANG (state, i18n) {
11 |     if (i18n.locale === 'cn') {
12 |       state.lang = 'en'
13 |     } else {
14 |       state.lang = 'cn'
15 |     }
16 |     i18n.locale = state.lang
17 |     window.localStorage.setItem('locale', state.lang)
18 |   }
19 | }
20 | 
21 | const actions = {
22 |   toggleMenu ({ commit }) {
23 |     // do something async
24 |     commit('TOGGLE_MENU')
25 |   },
26 |   toggleLang ({ commit }, i18n) {
27 |     commit('TOGGLE_LANG', i18n)
28 |   }
29 | }
30 | 
31 | export default {
32 |   state,
33 |   mutations,
34 |   actions
35 | }
36 | 


--------------------------------------------------------------------------------
/src/renderer/store/modules/Regex.js:
--------------------------------------------------------------------------------
  1 | import i18n from './../../i18n'
  2 | 
  3 | const state = {
  4 |   tabs: [
  5 |     { title: i18n.t('tabs.home'), isActive: true },
  6 |     { title: i18n.t('tabs.help'), isActive: false }
  7 |   ],
  8 |   currentTab: i18n.t('tabs.home'),
  9 |   regexExp: '',
 10 |   regexOpt: '',
 11 |   regexCont: '',
 12 |   regexResult: { status: 0, content: i18n.t('regex.heresResult') }
 13 | }
 14 | 
 15 | const mutations = {
 16 |   SET_INIT_STATE (state, payload) {
 17 |     state.tabs = payload.tabs
 18 |     state.currentTab = payload.currentTab
 19 |     state.regexResult = payload.regexResult
 20 |   },
 21 |   SET_NAV (state, payload) {
 22 |     state.tabs.forEach((tabs, i) => {
 23 |       if (i === payload.index) {
 24 |         state.tabs[payload.index]['isActive'] = true
 25 |         state.currentTab = payload.title
 26 |       } else {
 27 |         state.tabs[i]['isActive'] = false
 28 |       }
 29 |     })
 30 |   },
 31 |   CLEAN_FIELDS (state) {
 32 |     state.regexExp = ''
 33 |     state.regexOpt = ''
 34 |     state.regexCont = ''
 35 |     state.regexResult = { status: 0, content: i18n.t('regex.heresResult') }
 36 |   },
 37 |   REGEX_MATCH (state, target) {
 38 |     if (target.name === 'regex-exp') {
 39 |       state.regexExp = target.value
 40 |     }
 41 |     if (target.name === 'regex-opt') {
 42 |       state.regexOpt = target.value
 43 |     }
 44 |     if (target.name === 'regex-content') {
 45 |       state.regexCont = target.value
 46 |     }
 47 | 
 48 |     // Main Match Method:
 49 |     function matchContext (regexGlobal, result, flag) {
 50 |       let matchedContext = []
 51 |       let matchedGroups = []
 52 |       let reGroup = []
 53 |       let beginPos = 0
 54 |       let preventingTag = 0
 55 |       while ((reGroup = regexGlobal.exec(result['input'])) !== null) {
 56 |         if (preventingTag > reGroup['index']) break
 57 |         matchedContext.push(reGroup['input'].slice(beginPos, reGroup['index']))
 58 |         matchedContext.push(reGroup[0])
 59 |         beginPos = reGroup['index'] + reGroup[0].length
 60 |         if (flag > 1) matchedGroups.push(reGroup)
 61 |         preventingTag++
 62 |       }
 63 |       if (beginPos !== result['input'].length) {
 64 |         matchedContext.push(result['input'].slice(beginPos, result['input'].length))
 65 |       }
 66 |       let regexResult = { status: 1, content: matchedGroups, matchedContext: matchedContext }
 67 |       return regexResult
 68 |     }
 69 | 
 70 |     // Do the Regex Match:
 71 |     function execMatchContent (state, regexCont) {
 72 |       let regexResult
 73 |       try {
 74 |         let re = new RegExp(state.regexExp, state.regexOpt)
 75 |         let reGb = new RegExp(state.regexExp, state.regexOpt + 'g')
 76 |         let result = regexCont.match(re)
 77 | 
 78 |         if (result === null) {
 79 |           regexResult = { status: -1, content: i18n.t('regex.noMatches'), matchedContext: regexCont }
 80 |         } else {
 81 |           if (state.regexExp === '()') {
 82 |             let matchedContext = []
 83 |             regexCont.split('').forEach((val, index) => {
 84 |               matchedContext.push(val)
 85 |               matchedContext.push('')
 86 |             })
 87 |             let matchedGroups = [...Array(regexCont.length)].map(() => [regexCont, ''])
 88 |             regexResult = { status: 1, content: matchedGroups, matchedContext: matchedContext }
 89 |           } else {
 90 |             regexResult = matchContext(reGb, result, result.length)
 91 |           }
 92 |         }
 93 |       } catch (err) {
 94 |         console.log(err.message)
 95 |         if (err.message.match(/expression/)) {
 96 |           if (err.message.match(/Unterminated\s+group/)) {
 97 |             regexResult = { status: -1, content: i18n.t('regex.uHaveAnUnmatchedPats'), matchedContext: regexCont }
 98 |           } else {
 99 |             regexResult = { status: -1, content: i18n.t('regex.expError'), matchedContext: regexCont }
100 |           }
101 |         } else if (err.message.match(/constructor/)) {
102 |           regexResult = { status: -1, content: i18n.t('regex.invalidOpt'), matchedContext: regexCont }
103 |         } else {
104 |           regexResult = { status: -1, content: i18n.t('regex.noMatches'), matchedContext: regexCont }
105 |         }
106 |       }
107 |       return regexResult
108 |     }
109 | 
110 |     if (state.regexCont === '' || state.regexExp === '') {
111 |       state.regexResult = { status: 0, content: i18n.t('regex.heresResult') }
112 |     } else {
113 |       let regexResults = []
114 |       // loop more sample test content
115 |       state.regexCont.split('\n').forEach((content) => {
116 |         regexResults.push(execMatchContent(state, content))
117 |       })
118 |       let matchedContexts = []
119 |       let contents = []
120 |       let errorFlag = 1
121 |       console.log(regexResults)
122 |       regexResults.forEach((result) => {
123 |         if (result['status'] === 1) {
124 |           if (result['content'].length > 0) contents = contents.concat(result['content'])
125 |           errorFlag = 0
126 |         }
127 |         matchedContexts.push(result['matchedContext'])
128 |       })
129 |       if (errorFlag === 0) {
130 |         state.regexResult = { status: 1, content: contents, matchedContext: matchedContexts }
131 |       } else {
132 |         state.regexResult = regexResults[0]
133 |       }
134 |       console.log(state.regexResult)
135 |     }
136 |   }
137 | }
138 | 
139 | const actions = {
140 |   setInitState ({ commit }, payload) {
141 |     commit('SET_INIT_STATE', payload)
142 |   },
143 |   setNav ({ commit }, payload) {
144 |     commit('SET_NAV', payload)
145 |   },
146 |   cleanFields ({ commit }) {
147 |     commit('CLEAN_FIELDS')
148 |   },
149 |   regexMatch ({ commit }, payload) {
150 |     commit('REGEX_MATCH', payload.target)
151 |   }
152 | }
153 | 
154 | export default {
155 |   state,
156 |   mutations,
157 |   actions
158 | }
159 | 


--------------------------------------------------------------------------------
/src/renderer/store/modules/TStamp.js:
--------------------------------------------------------------------------------
  1 | import * as moment from 'moment'
  2 | import i18n from './../../i18n'
  3 | 
  4 | const state = {
  5 |   tabs: [
  6 |     { title: i18n.t('tabs.home'), isActive: true },
  7 |     { title: i18n.t('tabs.help'), isActive: false }
  8 |   ],
  9 |   currentTab: i18n.t('tabs.home'),
 10 |   timestampField: '',
 11 |   datetimeField: '',
 12 |   unit: 1,
 13 |   datetimeResult: '',
 14 |   timestampResult: ''
 15 | }
 16 | 
 17 | const mutations = {
 18 |   SET_INIT_STATE (state, payload) {
 19 |     state.tabs = payload.tabs
 20 |     state.currentTab = payload.currentTab
 21 |   },
 22 |   SET_NAV (state, payload) {
 23 |     state.tabs.forEach((tabs, i) => {
 24 |       if (i === payload.index) {
 25 |         state.tabs[payload.index]['isActive'] = true
 26 |         state.currentTab = payload.title
 27 |       } else {
 28 |         state.tabs[i]['isActive'] = false
 29 |       }
 30 |     })
 31 |   },
 32 | 
 33 |   RESET_INPUT (state) {
 34 |     state.timestampField = ''
 35 |     state.datetimeField = ''
 36 |     state.datetimeResult = ''
 37 |     state.timestampResult = ''
 38 |   },
 39 | 
 40 |   SET_UNIT (state, value) {
 41 |     state.unit = value
 42 |   },
 43 | 
 44 |   TIMESTAMP_CONVERT (state, value) {
 45 |     if (value === '') {
 46 |       state.datetimeResult = ''
 47 |     } else {
 48 |       state.timestampField = value
 49 |       try {
 50 |         let timeStamp = state.timestampField
 51 |         if (typeof state.timestampField !== 'number') {
 52 |           timeStamp = Number(state.timestampField)
 53 |         }
 54 |         let result = moment.unix(timeStamp / state.unit).format('YYYY-MM-DD HH:mm:ss')
 55 |         state.datetimeResult = result
 56 |       } catch (err) {
 57 |         console.log(err.message)
 58 |         let result = 'Convert Error'
 59 |         state.datetimeResult = result
 60 |       }
 61 |     }
 62 |   },
 63 | 
 64 |   DATETIME_CONVERT (state, value) {
 65 |     if (value === '') {
 66 |       state.timestampResult = ''
 67 |     } else {
 68 |       state.datetimeField = value
 69 |       try {
 70 |         state.unit.toString() === '1000' ? state.timestampResult = moment(state.datetimeField).valueOf().toString() : state.timestampResult = moment(state.datetimeField).format('X')
 71 |       } catch (err) {
 72 |         console.log(err.message)
 73 |         let result = 'Convert Error'
 74 |         state.timestampResult = result
 75 |       }
 76 |     }
 77 |   }
 78 | }
 79 | 
 80 | const actions = {
 81 |   setInitState ({ commit }, payload) {
 82 |     commit('SET_INIT_STATE', payload)
 83 |   },
 84 | 
 85 |   setNav ({ commit }, payload) {
 86 |     commit('SET_NAV', payload)
 87 |   },
 88 | 
 89 |   resetInput ({ commit }) {
 90 |     commit('RESET_INPUT')
 91 |   },
 92 | 
 93 |   setUnit ({ commit }, payload) {
 94 |     commit('SET_UNIT', payload.target.value)
 95 |   },
 96 | 
 97 |   timestampConvert ({ commit }, payload) {
 98 |     commit('TIMESTAMP_CONVERT', payload.target.value)
 99 |   },
100 |   datetimeConvert ({ commit }, payload) {
101 |     commit('DATETIME_CONVERT', payload.target.value)
102 |   }
103 | }
104 | 
105 | export default {
106 |   state,
107 |   mutations,
108 |   actions
109 | }
110 | 


--------------------------------------------------------------------------------
/src/renderer/store/modules/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * The file enables `@/store/index.js` to import all vuex modules
 3 |  * in a one-shot manner. There should not be any reason to edit this file.
 4 |  */
 5 | 
 6 | const files = require.context('.', false, /\.js$/)
 7 | const modules = {}
 8 | 
 9 | files.keys().forEach(key => {
10 |   if (key === './index.js') return
11 |   modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
12 |   modules[key.replace(/(\.\/|\.js)/g, '')]['namespaced'] = true
13 | })
14 | 
15 | export default modules
16 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TsaiKoga/it-tools/0df87d3c1e086106cc36f0cd0357812ea779aff2/static/.gitkeep


--------------------------------------------------------------------------------
/test/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "mocha": true
 4 |   },
 5 |   "globals": {
 6 |     "assert": true,
 7 |     "expect": true,
 8 |     "should": true,
 9 |     "__static": true
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/test/e2e/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | // Set BABEL_ENV to use proper env config
 4 | process.env.BABEL_ENV = 'test'
 5 | 
 6 | // Enable use of ES6+ on required files
 7 | require('babel-register')({
 8 |   ignore: /node_modules/
 9 | })
10 | 
11 | // Attach Chai APIs to global scope
12 | const { expect, should, assert } = require('chai')
13 | global.expect = expect
14 | global.should = should
15 | global.assert = assert
16 | 
17 | // Require all JS files in `./specs` for Mocha to consume
18 | require('require-dir')('./specs')
19 | 


--------------------------------------------------------------------------------
/test/e2e/specs/Launch.spec.js:
--------------------------------------------------------------------------------
 1 | import utils from '../utils'
 2 | 
 3 | describe('Launch', function () {
 4 |   beforeEach(utils.beforeEach)
 5 |   afterEach(utils.afterEach)
 6 | 
 7 |   it('shows the proper application title', function () {
 8 |     return this.app.client.getTitle()
 9 |       .then(title => {
10 |         expect(title).to.equal('it-tools')
11 |       })
12 |   })
13 | })
14 | 


--------------------------------------------------------------------------------
/test/e2e/utils.js:
--------------------------------------------------------------------------------
 1 | import electron from 'electron'
 2 | import { Application } from 'spectron'
 3 | 
 4 | export default {
 5 |   afterEach () {
 6 |     this.timeout(10000)
 7 | 
 8 |     if (this.app && this.app.isRunning()) {
 9 |       return this.app.stop()
10 |     }
11 |   },
12 |   beforeEach () {
13 |     this.timeout(10000)
14 |     this.app = new Application({
15 |       path: electron,
16 |       args: ['dist/electron/main.js'],
17 |       startTimeout: 10000,
18 |       waitTimeout: 10000
19 |     })
20 | 
21 |     return this.app.start()
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/test/unit/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | Vue.config.devtools = false
 3 | Vue.config.productionTip = false
 4 | 
 5 | // require all test files (files that ends with .spec.js)
 6 | const testsContext = require.context('./specs', true, /\.spec$/)
 7 | testsContext.keys().forEach(testsContext)
 8 | 
 9 | // require all src files except main.js for coverage.
10 | // you can also change this to match only the subset of files that
11 | // you want coverage for.
12 | const srcContext = require.context('../../src/renderer', true, /^\.\/(?!main(\.js)?$)/)
13 | srcContext.keys().forEach(srcContext)
14 | 


--------------------------------------------------------------------------------
/test/unit/karma.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | const path = require('path')
 4 | const merge = require('webpack-merge')
 5 | const webpack = require('webpack')
 6 | 
 7 | const baseConfig = require('../../.electron-vue/webpack.renderer.config')
 8 | const projectRoot = path.resolve(__dirname, '../../src/renderer')
 9 | 
10 | // Set BABEL_ENV to use proper preset config
11 | process.env.BABEL_ENV = 'test'
12 | 
13 | let webpackConfig = merge(baseConfig, {
14 |   devtool: '#inline-source-map',
15 |   plugins: [
16 |     new webpack.DefinePlugin({
17 |       'process.env.NODE_ENV': '"testing"'
18 |     })
19 |   ]
20 | })
21 | 
22 | // don't treat dependencies as externals
23 | delete webpackConfig.entry
24 | delete webpackConfig.externals
25 | delete webpackConfig.output.libraryTarget
26 | 
27 | // apply vue option to apply isparta-loader on js
28 | webpackConfig.module.rules
29 |   .find(rule => rule.use.loader === 'vue-loader').use.options.loaders.js = 'babel-loader'
30 | 
31 | module.exports = config => {
32 |   config.set({
33 |     browsers: ['visibleElectron'],
34 |     client: {
35 |       useIframe: false
36 |     },
37 |     coverageReporter: {
38 |       dir: './coverage',
39 |       reporters: [
40 |         { type: 'lcov', subdir: '.' },
41 |         { type: 'text-summary' }
42 |       ]
43 |     },
44 |     customLaunchers: {
45 |       'visibleElectron': {
46 |         base: 'Electron',
47 |         flags: ['--show']
48 |       }
49 |     },
50 |     frameworks: ['mocha', 'chai'],
51 |     files: ['./index.js'],
52 |     preprocessors: {
53 |       './index.js': ['webpack', 'sourcemap']
54 |     },
55 |     reporters: ['spec', 'coverage'],
56 |     singleRun: true,
57 |     webpack: webpackConfig,
58 |     webpackMiddleware: {
59 |       noInfo: true
60 |     }
61 |   })
62 | }
63 | 


--------------------------------------------------------------------------------
/test/unit/specs/LandingPage.spec.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import LandingPage from '@/components/LandingPage'
 3 | 
 4 | describe('LandingPage.vue', () => {
 5 |   it('should render correct contents', () => {
 6 |     const vm = new Vue({
 7 |       el: document.createElement('div'),
 8 |       render: h => h(LandingPage)
 9 |     }).$mount()
10 | 
11 |     expect(vm.$el.querySelector('.g-container .g-view .g-text').textContent).to.contain('IT Tools')
12 |   })
13 | })
14 | 


--------------------------------------------------------------------------------