逻辑优化

src/components/ToolList.vue

@@ -65,89 +65,36 @@
 
 <script setup>
 import { ref, watch, computed } from "vue"
-import penUrl from '@/assets/images/pen.png'
-import knifeUrl from '@/assets/images/knife.png'
-import paintUrl from '@/assets/images/paint.png'
-import rollerUrl from '@/assets/images/roller.png'
-import mushroomUrl from '@/assets/images/mushroom.png'
-import copyingPaperUrl from '@/assets/images/copying-paper.png'
-import rubberBoardUrl from '@/assets/images/rubber-board.png'
-import engravingPaperUrl from '@/assets/images/engraving-paper.png'
-
-const props = defineProps(['requiredToolList'])
-const emit = defineEmits(['all-selected'])
-
-const requiredToolList = computed(() => {
-  return props.requiredToolList
-})
-
+import { toolList, selectedToolNum } from "@/store/index.js"
 
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
-const toolList = ref([
-  {
-    name: '笔',
-    selected: false,
-    url: penUrl,
-  },
-  {
-    name: '刻刀',
-    selected: false,
-    url: knifeUrl,
-  },
-  {
-    name: '颜料',
-    selected: false,
-    url: paintUrl,
-  },
-  {
-    name: '滚筒',
-    selected: false,
-    url: rollerUrl,
-  },
-  {
-    name: '木蘑菇',
-    selected: false,
-    url: mushroomUrl,
-  },
-  {
-    name: '复写纸',
-    selected: false,
-    url: copyingPaperUrl,
-  },
-  {
-    name: '胶版',
-    selected: false,
-    url: rubberBoardUrl,
-  },
-  {
-    name: '版画纸',
-    selected: false,
-    url: engravingPaperUrl,
-  },
-])
+const props = defineProps(['requiredToolList'])
 
-const selectedToolNum = computed(() => {
-  return toolList.value.filter((item) => {
-    return item.selected
-  }).length
+const requiredToolList = computed(() => {
+  return props.requiredToolList
 })
 
-watch(selectedToolNum, (vNew) => {
-  if (vNew === requiredToolList.value.length) {
-    emit('all-selected')
+/**
+ * 选中工具逻辑
+ */
+function onClickToolItem(idx) {
+  if (requiredToolList.value.includes(idx)) {
+    if (toolList.value[idx].selected === false) {
+      toolList.value[idx].selected = true
+      window.alert('选择正确')
+    }
+  } else {
+    window.alert('您拿错工具了~请重新选择')
   }
-})
-
-watch(requiredToolList, () => {
-  toolList.value.forEach((item) => {
-    item.selected = false
-  })
-})
+}
 
+/**
+ * 左右scroll逻辑
+ */
 const toolListEl = ref(null)
 const isShowLeftArrow = ref(false)
 const isShowRightArrow = ref(true)
@@ -169,18 +116,6 @@ function onClickLeftArrow() {
 function onClickRightArrow() {
   toolListEl.value.scrollLeft += toolListEl.value.scrollWidth / 8
 }
-
-function onClickToolItem(idx) {
-  if (requiredToolList.value.includes(idx)) {
-    if (toolList.value[idx].selected === false) {
-      toolList.value[idx].selected = true
-      window.alert('选择正确')
-    }
-  } else {
-    window.alert('您拿错工具了~请重新选择')
-  }
-}
-
 </script>
 
 <style lang="less" scoped>

src/config.js

@@ -7,7 +7,6 @@ export default {
     {
       name: '将线稿复写至胶板上',
       toolIdxList: [5, 6],
-      hasToolOrder: false,
     },
     {
       name: '雕刻胶版',
@@ -16,12 +15,10 @@ export default {
     {
       name: '用滚筒将颜料铺平',
       toolIdxList: [2, 3],
-      hasToolOrder: true,
     },
     {
       name: '蒙上版画纸，用木蘑菇压实',
       toolIdxList: [4, 7],
-      hasToolOrder: true,
     },
     {
       name: '完成转印',

src/store/index.js

@@ -1,4 +1,71 @@
+import { ref, watch, computed } from "vue"
 import { createStore } from 'vuex'
+import penUrl from '@/assets/images/pen.png'
+import knifeUrl from '@/assets/images/knife.png'
+import paintUrl from '@/assets/images/paint.png'
+import rollerUrl from '@/assets/images/roller.png'
+import mushroomUrl from '@/assets/images/mushroom.png'
+import copyingPaperUrl from '@/assets/images/copying-paper.png'
+import rubberBoardUrl from '@/assets/images/rubber-board.png'
+import engravingPaperUrl from '@/assets/images/engraving-paper.png'
+
+
+export const toolList = ref([
+  {
+    name: '笔',
+    selected: false,
+    url: penUrl,
+  },
+  {
+    name: '刻刀',
+    selected: false,
+    url: knifeUrl,
+  },
+  {
+    name: '颜料',
+    selected: false,
+    url: paintUrl,
+  },
+  {
+    name: '滚筒',
+    selected: false,
+    url: rollerUrl,
+  },
+  {
+    name: '木蘑菇',
+    selected: false,
+    url: mushroomUrl,
+  },
+  {
+    name: '复写纸',
+    selected: false,
+    url: copyingPaperUrl,
+  },
+  {
+    name: '胶版',
+    selected: false,
+    url: rubberBoardUrl,
+  },
+  {
+    name: '版画纸',
+    selected: false,
+    url: engravingPaperUrl,
+  },
+])
+export const selectedToolNum = computed(() => {
+  return toolList.value.filter((item) => {
+    return item.selected
+  }).length
+})
+
+export const workState = ref('init') // init, working, done
+watch(workState, (vNew) => {
+  if (vNew === 'init') {
+    toolList.value.forEach((item) => {
+      item.selected = false
+    })
+  }
+})
 
 export default createStore({
   state: {

src/views/DrawView.vue

@@ -7,46 +7,33 @@
     />
     <StepView1
       v-if="curStepIdx === 0"
-      :can-work="canWork"
-      @work-begin="onWorkBegin"
-      @done="onWorkDone"
+      :required-tool-list="currentStepInfo.toolIdxList"
     />
     <StepView2
       v-if="curStepIdx === 1"
-      :can-work="canWork"
-      @work-begin="onWorkBegin"
-      @done="onWorkDone"
+      :required-tool-list="currentStepInfo.toolIdxList"
     />
     <StepView3
       v-if="curStepIdx === 2"
-      :can-work="canWork"
-      @work-begin="onWorkBegin"
-      @done="onWorkDone"
+      :required-tool-list="currentStepInfo.toolIdxList"
     />
     <StepView4
       v-if="curStepIdx === 3"
-      :can-work="canWork"
-      @work-begin="onWorkBegin"
-      @done="onWorkDone"
+      :required-tool-list="currentStepInfo.toolIdxList"
     />
     <StepView5
       v-if="curStepIdx === 4"
-      :can-work="canWork"
-      @work-begin="onWorkBegin"
-      @done="onWorkDone"
+      :required-tool-list="currentStepInfo.toolIdxList"
     />
     <StepView6
       v-if="curStepIdx === 5"
-      :can-work="canWork"
-      @work-begin="onWorkBegin"
-      @done="onWorkDone"
+      :required-tool-list="currentStepInfo.toolIdxList"
     />
 
     <tool-list
       v-show="workState === 'init'"
       class="tool-list"
       :required-tool-list="currentStepInfo.toolIdxList"
-      @all-selected="onAllToolSelected"
     />
     <button
       v-show="workState === 'done'"
@@ -59,6 +46,7 @@
 </template>
 
 <script setup>
+import { toolList, selectedToolNum, workState } from "@/store/index.js"
 // import { onClickOutside } from '@vueuse/core'
 import { computed, inject, ref, nextTick } from 'vue'
 import ProgressComp from "@/components/ProgressComp.vue"
@@ -84,24 +72,9 @@ const currentStepInfo = computed(() => {
   return config.stepList[curStepIdx.value]
 })
 
-function onAllToolSelected() {
-  canWork.value = true
-}
-
-const canWork = ref(false)
-const workState = ref('init') // init, working, done
-function onWorkBegin() {
-  workState.value = 'working'
-}
-function onWorkDone() {
-  console.log('done!!!')
-  workState.value = 'done'
-}
-
 function onClickNext() {
   workState.value = 'init'
   curStepIdx.value++
-  canWork.value = false
 }
 </script>
 

src/views/StepView1.vue

@@ -7,60 +7,48 @@
       draggable="false"
     >
     <video
-      v-show="state === 'working' || state === 'done'"
+      v-show="workState === 'working' || workState === 'done'"
       ref="videoRef"
       src="@/assets/videos/step-1.mp4"
       playsinline
       webkit-playsinline="true"
       muted
-      @ended="state = 'done'"
+      @ended="workState = 'done'"
     />
-    <!-- <img
-      v-show="state === 'done'"
-      class="effect effect-begin"
-      src="@/assets/images/step-1-final.png"
-      alt=""
-      draggable="false"
-    > -->
   </div>
 </template>
 
 <script setup>
-import { watchArray } from "@vueuse/core"
 import { ref, computed, watch } from "vue"
-
-const props = defineProps(['canWork'])
-const emit = defineEmits(['work-begin', 'done'])
-const videoRef = ref(null)
+import { toolList, selectedToolNum, workState } from "@/store/index.js"
 
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
-const state = ref('init') // init, working, done
-watch(state, (vNew) => {
-  if (vNew === 'working') {
-    emit('work-begin')
-    videoRef.value.play()
-  } else if (vNew === 'done') {
-    console.log('emitting done...')
-    emit('done')
-  }
-})
-
+const props = defineProps(['requiredToolList'])
 
-const canWork = computed(() => {
-  return props.canWork
+const requiredToolList = computed(() => {
+  return props.requiredToolList
 })
-watch(canWork, (vNew) => {
-  if (vNew) {
+
+watch(selectedToolNum, (vNew) => {
+  if (vNew === requiredToolList.value.length) {
     setTimeout(() => {
-      state.value = 'working'
+      workState.value = 'working'
     }, 500)
   }
 })
 
+const videoRef = ref(null)
+
+watch(workState, (vNew) => {
+  if (vNew === 'working') {
+    videoRef.value.play()
+  }
+})
+
 </script>
 
 <style lang="less" scoped>

src/views/StepView2.vue

@@ -1,67 +1,54 @@
 <template>
   <div class="working-area">
-    <!-- <img
-      v-show="isRubberBoardSelected"
-      class="effect effect-2"
-      src="@/assets/images/rubber-board-big.png"
-      alt=""
-      draggable="false"
-    > -->
     <img
-      class="effect effect-1"
-      src="@/assets/images/step-1-final.png"
+      class="effect effect-begin"
+      src="@/assets/images/step-0-final.png"
       alt=""
       draggable="false"
     >
-
     <video
-      v-show="state === 'working' || state === 'done'"
+      v-show="workState === 'working' || workState === 'done'"
       ref="videoRef"
-      src="@/assets/videos/step-2.mp4"
+      src="@/assets/videos/step-1.mp4"
       playsinline
       webkit-playsinline="true"
       muted
-      @ended="state = 'done'"
+      @ended="workState = 'done'"
     />
   </div>
 </template>
 
 <script setup>
-import { watchArray } from "@vueuse/core"
 import { ref, computed, watch } from "vue"
-
-const props = defineProps(['canWork'])
-const emit = defineEmits(['work-begin', 'done'])
-const videoRef = ref(null)
+import { toolList, selectedToolNum, workState } from "@/store/index.js"
 
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
-const state = ref('init') // init, working, done
-watch(state, (vNew) => {
-  if (vNew === 'working') {
-    emit('work-begin')
-    videoRef.value.play()
-  } else if (vNew === 'done') {
-    console.log('emitting done...')
-    emit('done')
-  }
-})
-
+const props = defineProps(['requiredToolList'])
 
-const canWork = computed(() => {
-  return props.canWork
+const requiredToolList = computed(() => {
+  return props.requiredToolList
 })
-watch(canWork, (vNew) => {
-  if (vNew) {
+
+watch(selectedToolNum, (vNew) => {
+  if (vNew === requiredToolList.value.length) {
     setTimeout(() => {
-      state.value = 'working'
+      workState.value = 'working'
     }, 500)
   }
 })
 
+const videoRef = ref(null)
+
+watch(workState, (vNew) => {
+  if (vNew === 'working') {
+    videoRef.value.play()
+  }
+})
+
 </script>
 
 <style lang="less" scoped>

src/views/StepView3.vue

@@ -1,13 +1,77 @@
 <template>
-  <div>
-    setp1!!!!
+  <div class="working-area">
+    <img
+      class="effect effect-begin"
+      src="@/assets/images/step-0-final.png"
+      alt=""
+      draggable="false"
+    >
+    <video
+      v-show="workState === 'working' || workState === 'done'"
+      ref="videoRef"
+      src="@/assets/videos/step-1.mp4"
+      playsinline
+      webkit-playsinline="true"
+      muted
+      @ended="workState = 'done'"
+    />
   </div>
 </template>
 
 <script setup>
+import { ref, computed, watch } from "vue"
+import { toolList, selectedToolNum, workState } from "@/store/index.js"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const props = defineProps(['requiredToolList'])
+
+const requiredToolList = computed(() => {
+  return props.requiredToolList
+})
+
+watch(selectedToolNum, (vNew) => {
+  if (vNew === requiredToolList.value.length) {
+    setTimeout(() => {
+      workState.value = 'working'
+    }, 500)
+  }
+})
+
+const videoRef = ref(null)
+
+watch(workState, (vNew) => {
+  if (vNew === 'working') {
+    videoRef.value.play()
+  }
+})
 
 </script>
 
 <style lang="less" scoped>
-
+.working-area{
+  position: absolute;
+  left: 50%;
+  top: calc(314 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  transform: translate(-50%, -50%);
+  width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+  >img.effect{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+  >video{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>

src/views/StepView4.vue

@@ -1,13 +1,77 @@
 <template>
-  <div>
-    setp1!!!!
+  <div class="working-area">
+    <img
+      class="effect effect-begin"
+      src="@/assets/images/step-0-final.png"
+      alt=""
+      draggable="false"
+    >
+    <video
+      v-show="workState === 'working' || workState === 'done'"
+      ref="videoRef"
+      src="@/assets/videos/step-1.mp4"
+      playsinline
+      webkit-playsinline="true"
+      muted
+      @ended="workState = 'done'"
+    />
   </div>
 </template>
 
 <script setup>
+import { ref, computed, watch } from "vue"
+import { toolList, selectedToolNum, workState } from "@/store/index.js"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const props = defineProps(['requiredToolList'])
+
+const requiredToolList = computed(() => {
+  return props.requiredToolList
+})
+
+watch(selectedToolNum, (vNew) => {
+  if (vNew === requiredToolList.value.length) {
+    setTimeout(() => {
+      workState.value = 'working'
+    }, 500)
+  }
+})
+
+const videoRef = ref(null)
+
+watch(workState, (vNew) => {
+  if (vNew === 'working') {
+    videoRef.value.play()
+  }
+})
 
 </script>
 
 <style lang="less" scoped>
-
+.working-area{
+  position: absolute;
+  left: 50%;
+  top: calc(314 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  transform: translate(-50%, -50%);
+  width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+  >img.effect{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+  >video{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>

src/views/StepView5.vue

@@ -1,13 +1,77 @@
 <template>
-  <div>
-    setp1!!!!
+  <div class="working-area">
+    <img
+      class="effect effect-begin"
+      src="@/assets/images/step-0-final.png"
+      alt=""
+      draggable="false"
+    >
+    <video
+      v-show="workState === 'working' || workState === 'done'"
+      ref="videoRef"
+      src="@/assets/videos/step-1.mp4"
+      playsinline
+      webkit-playsinline="true"
+      muted
+      @ended="workState = 'done'"
+    />
   </div>
 </template>
 
 <script setup>
+import { ref, computed, watch } from "vue"
+import { toolList, selectedToolNum, workState } from "@/store/index.js"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const props = defineProps(['requiredToolList'])
+
+const requiredToolList = computed(() => {
+  return props.requiredToolList
+})
+
+watch(selectedToolNum, (vNew) => {
+  if (vNew === requiredToolList.value.length) {
+    setTimeout(() => {
+      workState.value = 'working'
+    }, 500)
+  }
+})
+
+const videoRef = ref(null)
+
+watch(workState, (vNew) => {
+  if (vNew === 'working') {
+    videoRef.value.play()
+  }
+})
 
 </script>
 
 <style lang="less" scoped>
-
+.working-area{
+  position: absolute;
+  left: 50%;
+  top: calc(314 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  transform: translate(-50%, -50%);
+  width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+  >img.effect{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+  >video{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>