refactor (slight, although many files)

src/components/durationjs.vue

@@ -4,14 +4,18 @@
     <div v-if="totalSeconds === 0" class="text-center">
       <p>0</p>
     </div>
-    <div v-else class="flex justify-center items-center gap-1" id="cyp-timerange-show">
+    <!-- 這一段不是彈窗而是固定在畫面上的時間內容 -->
+    <div id="cyp-timerange-show" v-else class="flex justify-center items-center gap-1">
       <p v-show="days != 0">{{ days }}d</p>
       <p v-show="hours != 0">{{ hours }}h</p>
       <p v-show="minutes != 0">{{ minutes }}m</p>
       <p v-show="seconds != 0">{{ seconds }}s</p>
     </div>
   </div>
-  <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect"
+  <!-- 以下這段落是使用者點開來才會彈出的畫面 -->
+  <div id="dhms_input_popup_container" 
+    class="duration-container absolute left-0 top-full translate-y-2"
+    v-show="openTimeSelect"
     v-closable="{id: size, handler: onClose}">
     <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
       <input
@@ -81,7 +85,7 @@ export default {
   },
   data() {
     return {
-      display: 'dhms',
+      display: 'dhms', // d: day; h: hour; m: month; s: second.
       seconds: 0,
       minutes: 0,
       hours: 0,
@@ -211,8 +215,11 @@ export default {
      * @param {event} event input 傳入的事件
      */
     onKeyUp(event) {
+      // 正規表達式 \D 即不是 0-9 的字符
       event.target.value = event.target.value.replace(/\D/g, '');
 
+      // 38：上箭頭鍵（Arrow Up）
+      // 40：下箭頭鍵（Arrow Down）
       if (event.keyCode === 38 || event.keyCode === 40) {
         this.actionUpDown(event.target, event.keyCode === 38, true);
       };