feat: --

src/index/views/home/components/menu/index.hljng.scss

@@ -84,7 +84,9 @@
 #gui-modes-inside,
 #gui-fullscreen,
 #gui-fullscreen-exit,
+#thumb,
 #volume,
+#viewer,
 #sharing {
   display: flex;
   flex-direction: column;
@@ -104,6 +106,17 @@
   }
 }
 
+#thumb {
+  .icon-slot {
+    transition: background ease-in 0.2s;
+    background: url('@/assets/images/hljng/like.png') no-repeat center / contain;
+  }
+
+  &.active .icon-slot {
+    background-image: url('@/assets/images/hljng/liked.png');
+  }
+}
+
 #gui-fullscreen-exit {
   .icon-slot {
     background: url('@/assets/images/hljng/narrow_off.png') no-repeat center / contain;
@@ -134,6 +147,12 @@
   }
 }
 
+#viewer {
+  .icon-slot {
+    background: url('@/assets/images/hljng/view.png') no-repeat center / contain;
+  }
+}
+
 #gui-modes-dollhouse {
   .icon-slot {
     background: url('@/assets/images/hljng/dollhouse.png') no-repeat center / contain;

src/index/views/home/components/menu/index.hljng.vue

@@ -70,6 +70,19 @@
           </a>
         </div>
         <div
+          id="thumb"
+          class="ui-icon wide"
+          :class="{ active: animationThumb }"
+          @click="handleThumb"
+        >
+          <div class="icon-slot" />
+          <span>{{ thumbNum }}</span>
+        </div>
+        <div id="viewer" class="ui-icon wide">
+          <div class="icon-slot" />
+          <span>{{ viewer }}</span>
+        </div>
+        <div
           id="gui-fullscreen"
           class="ui-icon wide"
           data-placement="top"
@@ -108,9 +121,25 @@
   import SharePopup from '../share-popup/index.vue';
 
   let helperVisible = false;
+  const THUMB_KEY = 'thumbs';
   const starSum = ref(0);
+  const viewer = ref(0);
+  const thumbNum = ref(Number(localStorage.getItem(THUMB_KEY) ?? 0));
+  const animationThumb = ref(false);
   const shareVisible = ref(false);
 
+  const handleThumb = () => {
+    if (animationThumb.value) return;
+
+    animationThumb.value = true;
+    thumbNum.value += 1;
+    localStorage.setItem(THUMB_KEY, `${thumbNum.value}`);
+
+    setTimeout(() => {
+      animationThumb.value = false;
+    }, 200);
+  };
+
   const closeHelper = () => {
     window.$('#interaction-modal').removeClass('fadeIn');
     helperVisible = false;
@@ -143,6 +172,8 @@
     window.addEventListener('keydown', handleKeydown);
     window.addEventListener('click', handleClick);
     window.addEventListener('touchmove', handleClick);
+
+    viewer.value = Number(localStorage.getItem('visitCount')) || 0;
   });
 
   onUnmounted(() => {