refactor: 重构

Author: Hub-yang

src/views/Day32_GoodCheapFast/Index.vue

@@ -1,67 +1,39 @@
 <script setup>
-import { ref } from 'vue'
-
-const good = ref(false)
-const cheap = ref(false)
-const fast = ref(false)
+const typeOption = reactive({
+  good: false,
+  cheap: false,
+  fast: false,
+})
 function handleChange(flag) {
-  if (good.value && cheap.value && fast.value) {
+  if (typeOption.good && typeOption.cheap && typeOption.fast) {
     if (flag === 'good')
-      fast.value = false
+      typeOption.fast = false
 
     if (flag === 'cheap')
-      good.value = false
+      typeOption.good = false
 
     if (flag === 'fast')
-      cheap.value = false
+      typeOption.cheap = false
   }
 }
 </script>
 
 <template>
-  <div class="body">
+  <div class="body base_container">
     <h2>How do you want your project to be?</h2>
 
-    <div class="toggle-container">
-      <input
-        id="good"
-        v-model="good"
-        type="checkbox"
-        class="toggle"
-        @change="handleChange('good')"
-      >
-      <label for="good" class="label">
-        <div class="ball" />
-      </label>
-      <span>Good</span>
-    </div>
-
-    <div class="toggle-container">
-      <input
-        id="cheap"
-        v-model="cheap"
-        type="checkbox"
-        class="toggle"
-        @change="handleChange('cheap')"
-      >
-      <label for="cheap" class="label">
-        <div class="ball" />
-      </label>
-      <span>Cheap</span>
-    </div>
-
-    <div class="toggle-container">
+    <div v-for="key in Object.keys(typeOption)" :key class="toggle-container">
       <input
-        id="fast"
-        v-model="fast"
+        :id="key"
+        v-model="typeOption[key]"
         type="checkbox"
         class="toggle"
-        @change="handleChange('fast')"
+        @change="handleChange(key)"
       >
-      <label for="fast" class="label">
+      <label :for="key" class="label">
         <div class="ball" />
       </label>
-      <span>Fast</span>
+      <span>{{ key.charAt(0).toUpperCase() + key.slice(1) }}</span>
     </div>
   </div>
 </template>

src/views/Day32_GoodCheapFast/index.scss

@@ -6,10 +6,6 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
-  width: 100vw;
-  overflow: hidden;
-  margin: 0;
 
   .toggle-container {
     display: flex;

src/views/Day33_NotesApp/Index.vue

@@ -2,19 +2,18 @@
 const notesList = ref([])
 
 onMounted(() => {
-  notesList.value = JSON.parse(localStorage.getItem('noteslist'))
-    ? JSON.parse(localStorage.getItem('noteslist'))
-    : []
+  const cache = JSON.parse(localStorage.getItem('noteslist'))
+  notesList.value = cache || []
 })
 
 function addNote() {
-  const obj = reactive({
+  const note = {
     text: '',
     showMain: true,
     showTextArea: true,
-  })
+  }
 
-  notesList.value.push(obj)
+  notesList.value.push(note)
 }
 
 function editNote(idx) {
@@ -27,25 +26,23 @@ function removeNote(idx) {
 
 watch(
   notesList,
-  (val) => {
-    localStorage.setItem('noteslist', JSON.stringify(val))
-  },
+  val => localStorage.setItem('noteslist', JSON.stringify(val)),
   { deep: true },
 )
 </script>
 
 <template>
-  <div class="body">
+  <div class="body base_container">
     <button id="add" class="add" @click="addNote">
       <i class="fas fa-plus" /> Add note
     </button>
 
-    <div v-for="(note, index) in notesList" :key="index" class="note">
+    <div v-for="(note, idx) in notesList" :key="idx" class="note">
       <div class="tools">
-        <button class="edit" @click="editNote(index)">
+        <button class="edit" @click="editNote(idx)">
           <i class="fas fa-edit" />
         </button>
-        <button class="delete" @click="removeNote(index)">
+        <button class="delete" @click="removeNote(idx)">
           <i class="fas fa-trash-alt" />
         </button>
       </div>

src/views/Day33_NotesApp/index.scss

@@ -4,10 +4,9 @@
   background-color: #7bdaf3;
   font-family: 'Poppins', sans-serif;
   display: flex;
+  height: fit-content;
+  min-height: calc(100vh - 100px);
   flex-wrap: wrap;
-  margin: 0;
-  min-height: 100vh;
-  width: 100vw;
   padding-top: 3rem;
 
   .add {

src/views/Day34_AnimatedCountdown/Index.vue

@@ -1,12 +1,8 @@
 <script setup>
-import { onMounted, ref } from 'vue'
-
 const count = ref(3)
 let timer
 const infinity = ref('infinite')
-onMounted(() => {
-  runAnimation()
-})
+onMounted(() => runAnimation())
 
 function replay() {
   count.value = 3
@@ -25,19 +21,20 @@ function runAnimation() {
     }
   }, 1000)
 }
+
+onUnmounted(() => clearInterval(timer))
 </script>
 
 <template>
-  <div class="body">
+  <div class="body base_container">
     <div class="counter" :class="[infinity ? '' : 'hide']">
       <div class="nums">
-        <span class="in_out" :style="{ '--infinite': infinity }">{{
-          count
-        }}</span>
+        <span class="in_out" :style="{ '--infinite': infinity }">
+          {{ count }}
+        </span>
       </div>
       <h4>Get Ready</h4>
     </div>
-
     <div class="final" :class="[infinity ? '' : 'show']">
       <h1>GO</h1>
       <button class="replay" @click="replay">

src/views/Day34_AnimatedCountdown/index.scss

@@ -2,11 +2,7 @@
 
 .body {
   font-family: 'Roboto', sans-serif;
-  margin: 0;
-  height: 100vh;
-  width: 100vw;
   background-color: skyblue;
-  overflow: hidden;
   position: relative;
 
   .counter {

src/views/Day35_ImageCarousel/Index.vue

@@ -1,7 +1,5 @@
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
-
-const imgList = reactive([
+const imgList = [
   {
     url: 'src/assets/imgs/001.jpg',
     alt: 'first-image',
@@ -18,15 +16,14 @@ const imgList = reactive([
     url: 'src/assets/imgs/004.jpg',
     alt: 'fourth-image',
   },
-])
+]
 
 const idx = ref(0)
 const translateX = ref(0)
 const imgWidth = ref(850)
-let interval
-onMounted(() => {
-  interval = setInterval(run, 2000)
-})
+let timer
+onMounted(() => timer = setInterval(run, 2000))
+onUnmounted(() => clearInterval(timer))
 
 const refTranslateX = computed(() => `${translateX.value}px`)
 const refImgWidth = computed(() => `${imgWidth.value}px`)
@@ -46,8 +43,8 @@ function run() {
 }
 
 function resetInterval() {
-  clearInterval(interval)
-  interval = setInterval(run, 2000)
+  clearInterval(timer)
+  timer = setInterval(run, 2000)
 }
 
 function prevImg() {
@@ -64,15 +61,15 @@ function nextImg() {
 </script>
 
 <template>
-  <div class="body">
+  <div class="body base_container">
     <div class="carousel" :style="{ '--imgWidth': refImgWidth }">
       <div class="image-container" :style="{ '--translateX': refTranslateX }">
         <img
-          v-for="(img, index) in imgList"
-          :key="index"
+          v-for="({ url: src, alt }) in imgList"
+          :key="src"
           :style="{ '--imgWidth': refImgWidth }"
-          :src="img.url"
-          :alt="img.alt"
+          :src
+          :alt
         >
       </div>
 

src/views/Day35_ImageCarousel/index.scss

@@ -6,9 +6,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100vh;
-  width: 100vw;
-  margin: 0;
 
   img {
     width: var(--imgWidth);

src/views/Day36_HoverBoard/Index.vue

@@ -1,6 +1,4 @@
 <script setup>
-import { ref } from 'vue'
-
 // 面板背景色
 const bgColor = ref('#1d1d1d')
 // 颜色列表
@@ -24,11 +22,11 @@ function getRandomColor() {
 </script>
 
 <template>
-  <div class="body">
+  <div class="body base_container">
     <div id="container" class="container">
       <div
-        v-for="i in 500"
-        :key="i"
+        v-for="key in 500"
+        :key
         class="square"
         @mouseover="setColor"
         @mouseout="removeColor"

src/views/Day36_HoverBoard/index.scss

@@ -3,10 +3,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100vh;
-  width: 100vw;
-  overflow: hidden;
-  margin: 0;
 
   .container {
     display: flex;