Merge remote-tracking branch 'origin/develop' into develop

# Conflicts:
#	src/main.js

.editorconfig

 root = true
 
 
-# 对所有文件有效  //[*js]只对js文件有效
+# 对所有文件有效.
+# [*js]只对js文件有效
+# [*.{js,jsx,ts,tsx,vue}]对指定文件类型有效
 [*]
 charset = utf-8
 

.eslintignore

@@ -2,6 +2,7 @@ package.json
 package-lock.json
 yarn.lock
 !.eslintrc.js
+.eslintrc.js
 # 忽略有所md文件
 *.md
 assets/

.eslintrc.js

@@ -3,12 +3,15 @@ module.exports = {
     env: {
         node: true
     },
-    extends: [
-        'plugin:vue/essential',
-        'eslint:recommended',
-        '@vue/prettier',
-        'plugin:prettier/recommended'
-    ],
+    // 1: ESLint with error prevention only
+    // extends: ['plugin:vue/essential', 'eslint:recommended'],
+    // 2: ESLint + Airbnb config
+    // extends: ['plugin:vue/essential', '@vue/airbnb',],
+    // 3: ESLint + Standard config
+    // extends: [ 'plugin:vue/essential', '@vue/airbnb',],
+    // ESLint + Prettier
+    extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
+    plugins: [],
     parserOptions: {
         parser: 'babel-eslint'
     },
@@ -20,220 +23,10 @@ module.exports = {
      * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
      */
     rules: {
-        // 是否开启prettier校验,默认开启
-        // "prettier/prettier": "off",
+        // 是否开启prettier校验,默认开启.可选 warn / error / off
+        // "prettier/prettier": "warn",
         // "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
         'no-console': [0, { llow: ['warn', 'error'] }],
-        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-        //缩进风格.默认4，否则会报错
-        indent: [
-            2,
-            4,
-            {
-                SwitchCase: 1 // 针对switch case的缩进
-            }
-        ],
-        'linebreak-style': ['error', 'unix'],
-        'no-irregular-whitespace': [
-            1,
-            { skipComments: true, skipTemplates: true, skipRegExps: true }
-        ],
-        // 强制双引号
-        // "quotes": ["error", "double"],
-        // 语句强制分号结尾
-        // "semi": ["error", "always"],
-        // "semi": false,
-        // 分号前后空格。默认选项禁止分号之前有空格，强制分号之后有空格。
-        'semi-spacing': [
-            1,
-            {
-                before: false,
-                after: true
-            }
-        ],
-        // 变量声明后必须使用；参数arg不做限制
-        'no-unused-vars': [
-            1,
-            {
-                vars: 'all',
-                args: 'none'
-            }
-        ],
-        // 禁止对原生对象或只读的全局对象进行赋值
-        'no-native-reassign': 2,
-        // 变量声明、数组字面量、对象字面量、函数参数 和 序列中的逗号前不能有空格，后面必须有一个空格
-        'comma-spacing': [
-            1,
-            {
-                before: false,
-                after: true
-            }
-        ],
-        // 是否用驼峰风格命名变量：never || always
-        camelcase: ['error', { properties: 'never' }],
-        // 强制函数括号之前的空格的一致性.
-        // 每个选项可以设置为 "always"、"never" 或 "ignore"
-        'space-before-function-paren': [
-            'warn',
-            {
-                // 针对匿名函数表达式 (比如 function () {})
-                anonymous: 'always',
-                // 针对命名的函数表达式 (比如 function foo () {})。
-                named: 'never',
-                // 针对异步的箭头函数表达式(比如 async () => {})
-                asyncArrow: 'always'
-            }
-        ],
-        // 该规则禁止在 return、throw、continue 和 break 语句后出现不可达代码。
-        'no-unreachable': 1,
-        // 消除非故意 case 落空行为
-        'no-fallthrough': 1,
-        // 在条件语句中，很容易将一个比较运算符（像 ==）错写成赋值运算符（如 =）
-        // 所以，该规则禁止在 if、for、while 和 do...while 语句中出现模棱两可的赋值操作符
-        'no-cond-assign': [2, 'always'],
-        // 强制多行的三目运算符换行
-        'multiline-ternary': [1, 'always-multiline'],
-        // else关键字要与花括号保持在同一行。
-        // 'brace-style': 1,
-        // 'block-spacing': 1, //单行代码块两边加空格。
-        // 'spaced-comment': 1, //注释首尾留空格
-        'vue/html-indent': [
-            'error',
-            4,
-            {
-                attribute: 1,
-                baseIndent: 1,
-                closeBracket: 0,
-                alignAttributesVertically: true,
-                ignores: []
-            }
-        ],
-        // 是否禁止在正则表达式中出现控制字符
-        'no-control-regex': 0,
-        // 指定html各种元素、svg、vue组件自闭和标签的规则
-        'vue/html-self-closing': [
-            'error',
-            {
-                html: {
-                    void: 'never',
-                    normal: 'never',
-                    component: 'never'
-                },
-                svg: 'always',
-                math: 'always'
-            }
-        ],
-        // 每一行的属性数量
-        'vue/max-attributes-per-line': [
-            'error',
-            {
-                // 单行的话，每行属性的数量
-                singleline: 2,
-                // 多行的话，每行属性的数量
-                multiline: {
-                    max: 1,
-                    // 第一个属性是否与开始标签在同一行
-                    allowFirstLine: false
-                }
-            }
-        ],
-        'vue/multiline-html-element-content-newline': [
-            'error',
-            {
-                ignoreWhenEmpty: true,
-                ignores: ['pre', 'textarea'],
-                allowEmptyLines: false
-            }
-        ],
-        // 单行元素内容是否换行
-        'vue/singleline-html-element-content-newline': [
-            0,
-            {
-                ignoreWhenEmpty: true,
-                ignores: ['pre', 'textarea'],
-                ignoreWhenNoAttributes: true
-            }
-        ],
-        // 多行元素闭合标签（右括号）换行规则
-        'vue/html-closing-bracket-newline': [
-            'error',
-            {
-                singleline: 'never',
-                multiline: 'never'
-            }
-        ],
-        // 单行元素闭合标签（右括号）换行规则
-        'vue/html-closing-bracket-spacing': [
-            'error',
-            {
-                startTag: 'never',
-                endTag: 'never',
-                selfClosingTag: 'never'
-            }
-        ],
-        // 属性值引号："double" | "single"
-        'vue/html-quotes': ['error', 'double'],
-        // 组件name属性值的格式
-        // PascalCase:驼峰 || kebab-case:连接线
-        'vue/name-property-casing': ['warn', 'PascalCase'],
-        // v-bind写法。shorthand：简写 || longform：不缩写
-        'vue/v-bind-style': ['error', 'shorthand'],
-        'vue/v-on-style': ['error', 'shorthand'],
-        // html元素中属性顺序
-        'vue/attributes-order': [
-            'warn',
-            {
-                order: [
-                    'DEFINITION',
-                    'LIST_RENDERING',
-                    'CONDITIONALS',
-                    'RENDER_MODIFIERS',
-                    'GLOBAL',
-                    'UNIQUE',
-                    'TWO_WAY_BINDING',
-                    'OTHER_DIRECTIVES',
-                    'OTHER_ATTR',
-                    'EVENTS',
-                    'CONTENT'
-                ]
-            }
-        ],
-        // 组件中属性的顺序
-        'vue/order-in-components': [
-            'warn',
-            {
-                order: [
-                    'el',
-                    'name',
-                    'parent',
-                    'functional',
-                    ['delimiters', 'comments'],
-                    ['components', 'directives', 'filters'],
-                    'extends',
-                    'mixins',
-                    'inheritAttrs',
-                    'model',
-                    ['props', 'propsData'],
-                    'data',
-                    'computed',
-                    'watch',
-                    'LIFECYCLE_HOOKS',
-                    'methods',
-                    ['template', 'render'],
-                    'renderError'
-                ]
-            }
-        ],
-        // 强制在v-on方法后加括号
-        'vue/v-on-function-call': [2, 'never'],
-        // 报告<template>中的语法错误
-        'vue/no-parsing-error': [
-            2,
-            {
-                'x-invalid-end-tag': false
-            }
-        ],
-        // 去掉检测无用转义的规则
-        'no-useless-escape': [0]
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
     }
 }

.prettierrc.js

 module.exports = {
+    // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
+    ignorePath: ".prettierignore",
     // 与eslint集成（让prettier使用eslint的代码格式进行校验）
     eslintIntegration: true,
     // 换行长度
-    printWidth: 100,
+    printWidth: 150,
     // tab缩进大小,默认为2
     tabWidth: 4,
     // 使用tab缩进，默认false
     useTabs: false,
-    // 使用分号, 默认true
+    // 是否使用分号, 默认true
     semi: false,
-    // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
+    // 是否使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
     singleQuote: true,
     // 行尾逗号,默认none,可选 none|es5|all
     // es5 包括es5中的数组、对象
@@ -31,5 +33,11 @@ module.exports = {
     // 箭头函数参数括号 默认avoid 可选 avoid| always
     // avoid 能省略括号的时候就省略 例如x => x
     // always 总是有括号
-    arrowParens: 'always'
+    arrowParens: 'always',
+    // 结尾是 \n \r \n\r auto
+    endOfline: "auto",
+    // 在jsx中把'>' 是否单独放一行
+    jsxBracketSameLine: false,
 }
+
+

README.md

-# laihua-toolkit
+
+[toc]
+
+## 项目介绍
 
 > node 12.18.3
 > npm 6.14.6
@@ -6,32 +9,33 @@
 来画工具宝
 
 
-## Project setup
+## 运行
+安装依赖：
 ```
 npm install
 ```
 
-### 本地开发
+本地开发：
 ```
 npm run serve
 ```
 
-### 测试环境打包
+测试环境打包：
 ```
 npm run passports
 ```
 
-### 生产环境打包
+生产环境打包：
 ```
 npm run build
 ```
 
-### 打包后本地预览
+打包后本地预览：
 ```
 npm run start
 ```
 
-### 格式校验及自动修复
+格式校验及自动修复：
 修复eslint报错：
 ```
 npm run fix
@@ -42,5 +46,38 @@ npm run fix
 npm run prettier
 ```
 
-### Customize configuration
+## 开发
+### 分支
+`develop`: 开发分支
+
+### 目录结构
+├── CHANGELOG.md    // 更新日志
+├── README.md
+├── babel.config.js
+├── config
+│   └── baseUrl.js
+├── package.json
+├── public
+│   ├── favicon.ico
+│   ├── img
+│   ├── index.html
+│   └── robots.txt
+├── src  // 源码目录
+│   ├── App.vue   // 入口文件
+│   ├── assets
+│   ├── components  // 组件目录
+│   ├── main.js
+│   ├── registerServiceWorker.js
+│   ├── router
+│   ├── store
+│   └── views    // 页面组件目录
+├── vue.config.js
+└── yarn.lock
+
+注意：
+1. 页面级组件（通俗理解为与路由对应的组件）统一放在`views`目录下。
+2. 页面组件内的小组件、功能组件统一放在`components`目录下。例如，页面组件`pageA.vue`中拆分出了`pageheader.vue`组件，那么在`components`目录下新建一个**与页面同名的`pageA`目录**，`pageA`的相关组件放进去即可。
+
+## Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+****

package.json

@@ -34,6 +34,7 @@
     "core-js": "^3.6.5",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
+    "vue-bus": "^1.2.1",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",
     "vue-js-modal": "^2.0.0-rc.6"
@@ -45,7 +46,7 @@
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.0",
-    "@vue/cli-plugin-eslint": "^4.5.0",
+    "@vue/cli-plugin-eslint": "^4.5.4",
     "@vue/cli-plugin-pwa": "^4.5.0",
     "@vue/cli-service": "^4.5.0",
     "@vue/eslint-config-prettier": "^6.0.0",
@@ -53,7 +54,7 @@
     "commitizen": "^4.2.0",
     "cz-conventional-changelog": "^3.2.1",
     "element-ui": "^2.13.2",
-    "eslint": "^6.7.2",
+    "eslint": "^6.8.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.2.2",
     "husky": "^3.1.0",

src/App.vue

@@ -29,17 +29,6 @@ export default {
 </script>
 
 <style lang="scss">
-* {
-    box-sizing: border-box;
-    line-height: 1;
-    margin: 0;
-    padding: 0;
-}
-html,
-body {
-    padding: 0;
-    margin: 0;
-}
 #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -50,6 +39,7 @@ body {
     flex-direction: column;
     height: 100vh;
 }
+
 .body-container {
     flex: 1;
     display: flex;

src/assets/style/index.scss

+
+// 所有样式文件的入口
+
+@import "./reset";
+@import "./variable";
+

src/assets/style/reset.scss

+
+
+* {
+    box-sizing: border-box;
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+}
+
+
+span,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+a,
+p,
+ul,
+li {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    font-size: 14px;
+    background-color: #fff;
+    color: #000;
+    letter-spacing: 0.5px;
+    font-family: "Microsoft YaHei", "微软雅黑", "Source Sans Pro", Arial, sans-serif;
+    // 顺滑滚动
+    scroll-behavior: smooth;
+}
+
+
+ul,
+li {
+    list-style: none;
+}
+
+
+a,
+a:hover,
+a:focus,
+a:visited {
+    color: #000;
+}
+
+a {
+    text-decoration: none;
+    outline: none;
+}
+
+/* 去掉获取焦点时的蓝色发光边框 */
+input,
+textarea,
+video,
+button {
+    outline: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+}
+
+/*解决谷歌浏览器中的input背景色默认是黄色*/
+input:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
+}
+
+

src/assets/style/variable.scss

+
+// 样式变量文件
+
+$color-1: pink;
+$bg-color:rgb(229,185,40);

src/components/rightPanel/index.vue

 <template>
     <div class="comp-rightpanel">
-        rightpanel
+        <router-view name="panel"></router-view>
     </div>
 </template>
 

src/views/bao1.vue → src/components/rightPanel/screenshotPanel.vue

 <template>
-    <div class="comp-bao1">
-        bao1
+    <div>
+        screenshotPanel
     </div>
 </template>
 
@@ -14,6 +14,4 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-/* @import url(); 引入css类 */
-</style>
+<style></style>

src/components/sideNav/index.vue

@@ -2,8 +2,9 @@
     <div class="comp-sidenav">
         <router-link to="/">Home</router-link>
         <router-link to="/about">About</router-link>
-        <router-link to="/bao1">bao1</router-link>
-        <router-link to="/bao2">bao2</router-link>
+        <router-link to="/cutter">cutter</router-link>
+        <router-link to="/videoConverter">videoConverter</router-link>
+        <router-link to="/screenshot">screenshot</router-link>
     </div>
 </template>
 

src/components/videoCutter/videoPlayer.vue

+<template>
+    <div class="video-player">
+        <video ref="videoDom" src="https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4"></video>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            state: 'pluse',
+            times: 0,
+            canPlay: false
+        }
+    },
+    mounted() {
+        this.$bus.on('videoPlayer.play', (data) => {
+            console.log(data)
+            // if(data.state)
+        })
+        this.$nextTick(() => {
+            this.$refs.videoDom.addEventListener('canplay', () => {
+                this.canPlay = true
+            })
+        })
+    },
+    methods: {
+        play() {
+            if (!this.canPlay) return
+            this.$refs.videoDom.play()
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.video-player {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: beige;
+
+    video {
+        max-width: 100%;
+        max-height: 100%;
+    }
+}
+</style>

src/main.js

@@ -3,15 +3,19 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import './registerServiceWorker'
+import './assets/style/index.scss'
 import axios from 'axios'
+import VueBus from 'vue-bus'
 import VModal from 'vue-js-modal'
 
+Vue.use(VueBus)
+Vue.use(VModal)
+
 import baseURL from '../config/baseUrl.js'
 console.log('baseURL:', baseURL)
 
 Vue.config.productionTip = false
 Vue.prototype.$http = axios
-Vue
 
 new Vue({
     router,

src/registerServiceWorker.js

@@ -5,10 +5,7 @@ import { register } from 'register-service-worker'
 if (process.env.NODE_ENV === 'production') {
     register(`${process.env.BASE_URL}service-worker.js`, {
         ready() {
-            console.log(
-                'App is being served from cache by a service worker.\n' +
-                    'For more details, visit https://goo.gl/AFskqB'
-            )
+            console.log('App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB')
         },
         registered() {
             console.log('Service worker has been registered.')

src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Bao3 from '../views/bao3.vue'
+import Screenshot from '../views/screenshot.vue'
+import screenshotPanel from '../components/rightPanel/screenshotPanel.vue'
 
 Vue.use(VueRouter)
 
@@ -19,14 +21,21 @@ const routes = [
         component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
     },
     {
-        path: '/bao1',
-        name: 'Bao1',
-        component: () => import(/* webpackChunkName: "bao1" */ '../views/bao1.vue')
+        path: '/cutter',
+        name: 'Cutter',
+        component: () => import(/* webpackChunkName: "bao1" */ '../views/videoCutter.vue')
     },
     {
-        path: '/bao2',
-        name: 'Bao2',
-        component: () => import(/* webpackChunkName: "bao2" */ '../views/bao2.vue')
+        path: '/videoConverter',
+        name: 'VideoConverter',
+        component: () => import(/* webpackChunkName: "bao2" */ '../views/videoConverter.vue')
+    },
+    {
+        path: '/screenshot',
+        components: {
+            default: Screenshot,
+            panel: screenshotPanel
+        }
     }
 ]
 

src/views/screenshot.vue

+<template>
+    <div class="screenshot">screenshot view</div>
+</template>
+
+<script>
+export default {
+    name: 'Screenshot',
+    data() {
+        return {}
+    },
+    created() {},
+    mounted() {}
+}
+</script>
+
+<style lang="scss" scoped>
+.screenshot {
+    width: 100%;
+    height: 100%;
+    margin: 30px;
+}
+</style>

src/views/videoConverter.vue

+<template>
+    <div class="videoConverter">转换baby</div>
+</template>
+
+<script>
+export default {
+    name: 'VideoConverter',
+    components: {},
+    props: {},
+    data() {
+        return {}
+    },
+    computed: {},
+    watch: {},
+    methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.videoConverter {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    border: 0px solid black;
+    margin: 0px;
+}
+</style>

src/views/videoCutter.vue

+<template>
+    <div class="video-cutter">
+        <div class="video-content">
+            <video-player></video-player>
+        </div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+</template>
+
+<script>
+import VideoPlayer from '@/components/videoCutter/videoPlayer.vue'
+export default {
+    components: {
+        VideoPlayer
+    },
+    data() {
+        return {
+            name: ''
+        }
+    },
+    created() {},
+    mounted() {}
+}
+</script>
+
+<style scoped lang="scss">
+/* @import url(); 引入css类 */
+.video-cutter {
+    width: 100%;
+    height: 100%;
+}
+.video-content {
+    width: 100%;
+    height: 700px;
+}
+</style>

vue.config.js

-// console.log(`process.env1:`, process.env)
+// console.log(`process.env1:`, process.env);
 console.log(`process.env.NODE_ENV1:`, process.env.NODE_ENV)
-// dsf
-//dfdfdfsdf
+
 module.exports = {
     // outputDir: process.env.outputDir,
     // assetsDir: 'static',
@@ -20,5 +19,23 @@ module.exports = {
                 pathRewrite: { '^/webapi': '/' }
             }
         }
+    },
+    chainWebpack: (config) => {
+        config.module
+            .rule('eslint')
+            .use('eslint-loader')
+            .loader('eslint-loader')
+            .tap((options) => {
+                // 保存自动eslint修复
+                options.fix = true
+                return options
+            })
+    },
+    css: {
+        loaderOptions: {
+            sass: {
+                prependData: `@import "@/assets/style/index.scss";`
+            }
+        }
     }
 }