格式

c70f4cbe · lilei · 492c6043 · 1eba1ab8 · c70f4cbe · c70f4cbe
Commit c70f4cbe authored Aug 27, 2020 by lilei
18 changed files
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -10,7 +10,7 @@ module.exports = {
    // 3: ESLint + Standard config
    // extends: [ 'plugin:vue/essential', '@vue/airbnb',],
    // ESLint + Prettier
-    extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
+    extends: ['plugin:vue/recommended', 'eslint:recommended'],
    plugins: [],
    parserOptions: {
        parser: 'babel-eslint'
@@ -27,6 +27,27 @@ module.exports = {
        // "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' ? 'warn' : 'off'
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+        indent: [
+            'error',
+            4,
+            {
+                SwitchCase: 1,
+                flatTernaryExpressions: true
+            }
+        ],
+        'comma-dangle': ['error', 'never'],
+        quotes: ['error', 'single'],
+        'vue/html-indent': [
+            'error',
+            4,
+            {
+                attribute: 1,
+                baseIndent: 1,
+                closeBracket: 0,
+                alignAttributesVertically: true,
+                ignores: []
+            }
+        ]
    }
 }
--- a/src/App.vue
+++ b/src/App.vue
 <template>
    <div id="app">
-        <common-header></common-header>
+        <common-header />
        <body class="body-container">
-            <side-nav></side-nav>
+            <side-nav />
-            <router-view style="flex:1;border: 1px solid #666;"></router-view>
+            <router-view style="flex:1;border: 1px solid #666;" />
-            <right-panel></right-panel>
+            <right-panel />
        </body>
+        <modal-layer />
    </div>
 </template>
 <script>
 import CommonHeader from '@/components/header/index.vue'
+import ModalLayer from '@/components/modal/modalLayer.vue'
 export default {
    components: {
        CommonHeader,
+        ModalLayer,
        SideNav: () => import('@/components/sideNav/index.vue'),
        RightPanel: () => import('@/components/rightPanel/index.vue')
    },
@@ -37,6 +40,7 @@ export default {
    display: flex;
    flex-direction: column;
    height: 100vh;
+    position: relative;
 }
 .body-container {

--- a/src/components/header/index.vue
+++ b/src/components/header/index.vue
 <template>
    <div class="comp-commonheader">
        <h1>LAIHUA</h1>
-        <div class="current-page">当前的宝</div>
+        <div class="current-page">
-        <tip-panel></tip-panel>
+            当前的宝
+        </div>
+        <tip-panel />
+        <div
+            class="show-modal"
+            @click="showModal"
+        >
+            show-modal
+        </div>
    </div>
 </template>
@@ -15,7 +23,12 @@ export default {
        return {}
    },
    created() {},
-    mounted() {}
+    mounted() {},
+    methods: {
+        showModal() {
+            this.$modal.show('selectModal')
+        }
+    }
 }
 </script>

--- a/src/components/misc/tutorialContent.vue
+++ b/src/components/misc/tutorialContent.vue
+<template>
+    <div />
+</template>
+<script>
+export default {
+    data() {
+        return {}
+    },
+    methods: {}
+}
+</script>
+<style lang="scss" scoped></style>
--- a/src/components/modal/completeContent.vue
+++ b/src/components/modal/completeContent.vue
+<template>
+    <div>
+        complete content
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {}
+    },
+    methods: {}
+}
+</script>
+<style lang="scss" scoped></style>
--- a/src/components/modal/completeModal.vue
+++ b/src/components/modal/completeModal.vue
+<template>
+    <modal
+        name="completeModal"
+        :click-to-close="false"
+    >
+        <complete-content />
+    </modal>
+</template>
+<script>
+import CompleteContent from './completeContent'
+export default {
+    components: {
+        CompleteContent
+    },
+    data() {
+        return {}
+    },
+    methods: {}
+}
+</script>
+<style lang="scss" scoped></style>
--- a/src/components/modal/modalLayer.vue
+++ b/src/components/modal/modalLayer.vue
+<template>
+    <div class="modal-layer">
+        <complete-modal />
+        <select-modal />
+    </div>
+</template>
+<script>
+import CompleteModal from '@/components/modal/completeModal'
+import SelectModal from '@/components/modal/selectModal'
+export default {
+    components: {
+        CompleteModal,
+        SelectModal
+    },
+    data() {
+        return {}
+    },
+    methods: {}
+}
+</script>
+<style lang="scss" scoped>
+.modal-layer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+}
+</style>
--- a/src/components/modal/selectContent.vue
+++ b/src/components/modal/selectContent.vue
+<template>
+    <div>
+        <div
+            class="close-btn"
+            @click="close"
+        >
+            close
+        </div>
+        选择视频
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {}
+    },
+    methods: {
+        close() {
+            this.$modal.hide('selectModal')
+        }
+    }
+}
+</script>
+<style lang="scss" scoped></style>
--- a/src/components/modal/selectModal.vue
+++ b/src/components/modal/selectModal.vue
+<template>
+    <modal
+        name="selectModal"
+        :click-to-close="false"
+    >
+        <select-content />
+    </modal>
+</template>
+<script>
+import SelectContent from './selectContent'
+export default {
+    components: {
+        SelectContent
+    },
+    data() {
+        return {}
+    },
+    methods: {}
+}
+</script>
+<style lang="scss" scoped></style>
--- a/src/components/rightPanel/index.vue
+++ b/src/components/rightPanel/index.vue
 <template>
    <div class="comp-rightpanel">
-        <router-view name="panel"></router-view>
+        <router-view name="panel" />
    </div>
 </template>

--- a/src/components/sideNav/index.vue
+++ b/src/components/sideNav/index.vue
 <template>
    <div class="comp-sidenav">
-        <router-link to="/">Home</router-link>
+        <router-link to="/">
-        <router-link to="/about">About</router-link>
+            Home
-        <router-link to="/cutter">cutter</router-link>
+        </router-link>
-        <router-link to="/videoConverter">转换宝</router-link>
+        <router-link to="/about">
-        <router-link to="/screenshot">screenshot</router-link>
+            About
+        </router-link>
+        <router-link to="/cutter">
+            cutter
+        </router-link>
+        <router-link to="/videoConverter">
+            转换宝
+        </router-link>
+        <router-link to="/screenshot">
+            screenshot
+        </router-link>
    </div>
 </template>

--- a/src/components/videoCutter/videoChange.vue
+++ b/src/components/videoCutter/videoChange.vue
 <template>
-    <div class="video-change" @click="changeVideo">
+    <div
+        class="video-change"
+        @click="changeVideo"
+    >
        替换视频
    </div>
 </template>

--- a/src/components/videoCutter/videoControl.vue
+++ b/src/components/videoCutter/videoControl.vue
 <template>
    <div class="video-control">
-        <div class="video-play-btn" @click="play()">播放</div>
+        <div
+            class="video-play-btn"
+            @click="play()"
+        >
+            播放
+        </div>
        <div class="video-time-content">
-            <div class="now-time">{{ nowTime | formatTime }}</div>
+            <div class="now-time">
+                {{ nowTime | formatTime }}
+            </div>
            <span>/</span>
-            <div class="total-time">{{ duration | formatTime }}</div>
+            <div class="total-time">
+                {{ duration | formatTime }}
+            </div>
        </div>
    </div>
 </template>
 <script>
 export default {
-    data() {
-        return {}
-    },
-    props: ['duration', 'nowTime'],
-    methods: {
-        play() {
-            this.$emit('play')
-        }
-    },
    filters: {
        formatTime(duration) {
            if (duration <= 0) return '00:00'
@@ -31,6 +31,15 @@ export default {
            sec = sec || '00'
            return min + ':' + sec
        }
+    },
+    props: ['duration', 'nowTime'], // eslint-disable-line
+    data() {
+        return {}
+    },
+    methods: {
+        play() {
+            this.$emit('play')
+        }
    }
 }
 </script>

--- a/src/components/videoCutter/videoPlayer.vue
+++ b/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>
+        <video
+            ref="videoDom"
+            src="https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4"
+        />
    </div>
 </template>
 <script>
@@ -33,6 +36,10 @@ export default {
            })
        })
    },
+    beforeDestroy() {
+        this.$refs.videoDom.removeEventListener('canplay')
+        this.$refs.videoDom.removeEventListener('ended')
+    },
    methods: {
        canPlayFunc() {
            this.canPlay = true
@@ -51,10 +58,6 @@ export default {
            if (!this.canPlay) return
            this.$refs.videoDom.currentTime = time
        }
-    },
-    beforeDestroy() {
-        this.$refs.videoDom.removeEventListener('canplay')
-        this.$refs.videoDom.removeEventListener('ended')
    }
 }
 </script>

--- a/src/views/screenshot.vue
+++ b/src/views/screenshot.vue
 <template>
    <div class="screenshot">
        <div class="content">
-            <video id="screenshot-video"></video>
+            <video id="screenshot-video" />
        </div>
        <div class="operate-area">
-            <input id="screenshot-input" type="file" style="display:none;" />
+            <input
+                id="screenshot-input"
+                type="file"
+                style="display:none;"
+            >
        </div>
    </div>
 </template>

--- a/src/views/videoConverter.vue
+++ b/src/views/videoConverter.vue
 <template>
    <div class="videoConverter">
        <ul>
-            <li v-for="(item, index) in taskList" :key="index">
+            <li
+                v-for="(item, index) in taskList"
+                :key="index"
+            >
                <div class="info">
-                    <div class="cove">视频封面</div>
+                    <div class="cove">
+                        视频封面
+                    </div>
                    <div>
                        <div>{{ item.name }}.mp4</div>
                        <div>时长:{{ item.duration }}</div>
                    </div>
                </div>
                <div class="operationPanel">
-                    <div class="wait" v-show="item.state == 0">
+                    <div
+                        v-show="item.state == 0"
+                        class="wait"
+                    >
                        <div>输出格式</div>
-                        <div class="selectionFormat">mp4</div>
+                        <div class="selectionFormat">
-                        <div class="delete" @click="clearTask(item)">删除</div>
+                            mp4
+                        </div>
+                        <div
+                            class="delete"
+                            @click="clearTask(item)"
+                        >
+                            删除
+                        </div>
                    </div>
-                    <div class="active" v-show="item.state == 1">
+                    <div
+                        v-show="item.state == 1"
+                        class="active"
+                    >
                        <div class="progress">
                            <div>转换中{{ item.progress }}%</div>
                            <div class="slide">
-                                <div></div>
+                                <div />
                            </div>
                        </div>
-                        <div class="stop" @click="stopTask(item)">取消</div>
+                        <div
+                            class="stop"
+                            @click="stopTask(item)"
+                        >
+                            取消
+                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="editBar">
-            <div class="addVideo" @click="addVideo">添加视频</div>
+            <div
-            <div class="clearList" @click="clearAllTasks">清空列表</div>
+                class="addVideo"
-            <div class="clearWatermark">去除水印</div>
+                @click="addVideo"
+            >
+                添加视频
+            </div>
+            <div
+                class="clearList"
+                @click="clearAllTasks"
+            >
+                清空列表
+            </div>
+            <div class="clearWatermark">
+                去除水印
+            </div>
        </div>
-        <div class="startAll" @click="startAllTasks">开始转换</div>
+        <div
+            class="startAll"
+            @click="startAllTasks"
+        >
+            开始转换
+        </div>
    </div>
 </template>
@@ -51,6 +91,18 @@ export default {
    },
    computed: {},
    watch: {},
+    created() {
+        for (let i = 1; i < 10; i++) {
+            this.taskList.push({
+                cover: '',
+                name: '视频片段' + i,
+                duration: '10:00',
+                state: 0,
+                progress: 60,
+                outputFormat: 'mp4'
+            })
+        }
+    },
    methods: {
        addVideo() {
            this.taskList.push({
@@ -79,18 +131,6 @@ export default {
                task.state = 1
            })
        }
-    },
-    created() {
-        for (let i = 1; i < 10; i++) {
-            this.taskList.push({
-                cover: '',
-                name: '视频片段' + i,
-                duration: '10:00',
-                state: 0,
-                progress: 60,
-                outputFormat: 'mp4'
-            })
-        }
    }
 }
 </script>

--- a/src/views/videoCutter.vue
+++ b/src/views/videoCutter.vue
 <template>
    <div class="video-cutter">
        <div class="video-content">
-            <VideoPlayer @currentTime="changeTime" @end="playEnd" @timeupdate="timeupdate" />
+            <VideoPlayer
+                @currentTime="changeTime"
+                @end="playEnd"
+                @timeupdate="timeupdate"
+            />
        </div>
        <div class="video-btn">
            <videoChange @changeVideo="changeVideo" />
-            <videoControl :duration="duration" :nowTime="nowTime" @play="videoPlay" />
+            <videoControl
-            <div></div>
+                :duration="duration"
+                :now-time="nowTime"
+                @play="videoPlay"
+            />
+            <div />
        </div>
-        <div></div>
+        <div />
-        <div></div>
+        <div />
    </div>
 </template>
 <script>
 export default {
+    name: 'VideoCutter',
    components: {
        VideoPlayer: () => import('@/components/videoCutter/videoPlayer.vue'),
        VideoChange: () => import('@/components/videoCutter/videoChange.vue'),
        VideoControl: () => import('@/components/videoCutter/videoControl.vue')
    },
-    name: 'videoCutter',
    data() {
        return {
            name: '',

--- a/vue.config.js
+++ b/vue.config.js
@@ -8,7 +8,7 @@
 * @
 */
 // console.log(`process.env1:`, process.env);
-console.log(`process.env.NODE_ENV1:`, process.env.NODE_ENV)
+console.log('process.env.NODE_ENV1:', process.env.NODE_ENV)
 module.exports = {
    // outputDir: process.env.outputDir,
@@ -43,7 +43,7 @@ module.exports = {
    css: {
        loaderOptions: {
            sass: {
-                prependData: `@import "@/assets/style/index.scss";`
+                prependData: '@import "@/assets/style/index.scss";'
            }
        }
    }