style: improve taskItem style (cuixueshe#147)

apps/frontend/src/components/task/TaskItem.vue

@@ -2,6 +2,7 @@
 import { NPopover } from 'naive-ui'
 import type { Project, Task } from 'services/task'
 import { changeTaskTitle } from 'services/task'
+import { ref } from 'vue'
 import { useTaskOperationMessage, useTaskRightContextMenu } from '@/composable'
 import { TaskState, useTaskStore, useThemeStore } from '@/store'
 
@@ -13,16 +14,29 @@ interface Props {
 const props = defineProps<Props>()
 const taskStore = useTaskStore()
 const themeStore = useThemeStore()
+const { isHover, hoverEvents } = useHandleHover()
 
 const { showCompleteMessage } = useTaskOperationMessage()
 const { showContextMenu } = useTaskRightContextMenu()
 
 const checkboxColors: Record<TaskState, string> = {
-  [TaskState.ACTIVE]: 'bg-#ccc',
+  [TaskState.ACTIVE]: 'bg-transparent',
   [TaskState.COMPLETED]: 'bg-#007A78',
   [TaskState.GIVE_UP]: 'bg-#FF2200',
   [TaskState.REMOVED]: 'bg-#ccc',
 }
+function useHandleHover() {
+  const isHover = ref(false)
+  const hoverEvents: Record<string, () => void> = {
+    mouseover: () => isHover.value = true,
+    mousemove: () => isHover.value = true,
+    mouseleave: () => isHover.value = false,
+  }
+  return {
+    isHover,
+    hoverEvents,
+  }
+}
 
 function handleRightClickTask(e: MouseEvent, task: Task) {
   taskStore.changeActiveTask(task)
@@ -55,23 +69,16 @@ function handleCompleteTodo(e: Event) {
 
 <template>
   <div
-    :data-id="props.task.id"
-    class="flex flex-row w-full items-center"
-    @click.right="handleRightClickTask($event, task)"
+    :data-id="props.task.id" class="flex flex-row w-full items-center"
+    @click.right="handleRightClickTask($event, task)" v-on="hoverEvents"
   >
     <i
-      class="cursor-move text-gray-200 dark:text-#3B3B3B flex-shrink-0 i-mdi-format-align-justify text-sm"
+      v-if="isHover"
+      class="cursor-move text-gray dark:text-white flex-shrink-0 i-mdi-format-align-justify opacity-75 hover:opacity-100"
     />
+    <i v-else class="w-1.2em h-1.2em flex-shrink-0" />
     <div
-      flex
-      justify-start
-      items-center
-      gap-5px
-      h-40px
-      py-5px
-      flex-1
-      pl-10px
-      :class="[
+      flex justify-start items-center gap-5px h-40px py-5px flex-1 pl-10px :class="[
         themeStore.isDark ? 'hover:bg-[#474747]/50' : 'hover:bg-[#ECF1FF]/50',
         taskStore.currentActiveTask?.id === task.id
           ? themeStore.isDark
@@ -85,11 +92,7 @@ function handleCompleteTodo(e: Event) {
         <div class="flex justify-start items-center gap-5px">
           <NPopover trigger="hover">
             <template #trigger>
-              <button
-                :class="[checkboxColors[task.state]]"
-                class="w-5 h-5 rounded-1"
-                @click="handleCompleteTodo"
-              />
+              <button :class="[checkboxColors[task.state]]" class="w-5 h-5 rounded-1" @click="handleCompleteTodo" />
             </template>
             <div>在垃圾桶里面的 Task 是不可以直接被恢复的哦</div>
           </NPopover>
@@ -101,13 +104,11 @@ function handleCompleteTodo(e: Event) {
       <template v-else>
         <button
           :class="[checkboxColors[task.state]]"
-          class="w-5 h-5 rounded-1"
+          class="w-5 h-5 rounded-1 border border-solid border-black opacity-75 dark:border-white hover:opacity-100"
           @click="handleCompleteTodo"
         />
         <div
-          class="w-full cursor-pointer focus:outline-0"
-          contenteditable="true"
-          @input="handleInput($event, task)"
+          class="w-full cursor-pointer focus:outline-0" contenteditable="true" @input="handleInput($event, task)"
           @focus="handleClickTask(task)"
         >
           {{ task.title }}