refactor: optimize ui

web-tech-tw · Nov 1, 2024 · 1e66e6a · 1e66e6a
1 parent a9ea649
commit 1e66e6a
Show file tree

Hide file tree

Showing 14 changed files with 183 additions and 84 deletions.
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -7,7 +7,7 @@
             <h1 class="flex-auto text-lg font-semibold text-gray-900">
               {{ title }}
             </h1>
-            <p class="flex-auto text-sm font-normal text-gray-500">
+            <p class="flex-auto text-md font-normal text-gray-500">
               {{ subtitle }}
             </p>
           </router-link>
@@ -16,23 +16,23 @@
         <app-header-mobile-icon-button
           v-if="isMenuItemExist"
           class="-mr-2 -my-2 md:hidden"
-          @click="handleMobileMenuBtnOpenClick"
+          @click="onClickMobileMenuBtnOpen"
         >
           <bars4-icon class="h-6 w-6" />
         </app-header-mobile-icon-button>
       </div>
     </div>
     <app-header-mobile
       v-show="isMobileMenuOpened"
-      @close="handleMobileMenuBtnCloseClick"
+      @close="onClickMobileMenuBtnClose"
     />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, provide } from "vue";
+import { ref, onMounted, onUnmounted, provide } from "vue";
 
-import { Bars4Icon } from "@heroicons/vue/24/solid"
+import { Bars4Icon } from "@heroicons/vue/24/outline"
 
 import {
   title,
@@ -51,31 +51,29 @@ const isMobileMenuOpened = ref(false);
 const parentMenuState = ref(true);
 provide("parent-menu-state", parentMenuState);
 
-const isMenuItemExist = computed(() => {
-  return isSaraEnabled || menuItems.length;
-});
+const isMenuItemExist = isSaraEnabled || menuItems.length;
 
-const handleMobileMenuBtnOpenClick = () => {
+const onClickMobileMenuBtnOpen = () => {
   isMobileMenuOpened.value = true;
   parentMenuState.value = true;
 }
 
-const handleMobileMenuBtnCloseClick = () => {
+const onClickMobileMenuBtnClose = () => {
   isMobileMenuOpened.value = false;
   parentMenuState.value = false;
 }
 
-const handleDocumentClick = (e) => {
+const onDocumentClick = (e) => {
   if (!document.querySelector(".app-header").contains(e.target)) {
     parentMenuState.value = false;
   }
 };
 
 onMounted(() => {
-  document.addEventListener("click", handleDocumentClick);
+  document.addEventListener("click", onDocumentClick);
 });
 
 onUnmounted(() => {
-  document.removeEventListener("click", handleDocumentClick);
+  document.removeEventListener("click", onDocumentClick);
 });
 </script>
diff --git a/src/components/AppHeaderMenuData.js b/src/components/AppHeaderMenuData.js
@@ -1,7 +1,7 @@
 export const title = "Chew 口香糖";
 export const subtitle = "文字片段分享";
 
-export const isSaraEnabled = false;
+export const isSaraEnabled = true;
 export const onClickSara = () => {
   const {
     VITE_SARA_INTE_HOST: saraInteHost,

diff --git a/src/components/AppHeaderMobile.vue b/src/components/AppHeaderMobile.vue
@@ -4,7 +4,7 @@
       <div class="pt-5 pb-6 px-5">
         <div
           class="flex items-center justify-between"
-          @click="handleMobileMenuCloseClick"
+          @click="onClickMobileMenuClose"
         >
           <div>
             <h1 class="flex-auto text-lg font-semibold text-gray-900 sm:hidden">
@@ -36,7 +36,7 @@
                 v-else
                 :name="item.name"
                 :icon="item.icon"
-                @click="handleItemClick(item)"
+                @click="onClickItem(item)"
               />
             </div>
             <app-header-mobile-menu-sara v-if="isSaraEnabled" />
@@ -50,7 +50,7 @@
 <script setup>
 import { inject, watch } from "vue";
 
-import { XMarkIcon } from "@heroicons/vue/24/solid"
+import { XMarkIcon } from "@heroicons/vue/24/outline"
 
 import AppHeaderMobileMenuItem from "./AppHeaderMobileMenuItem.vue"
 import AppHeaderMobileMenuDropdown from "./AppHeaderMobileMenuDropdown.vue"
@@ -64,18 +64,18 @@ import {
 
 const emit = defineEmits(["close"]);
 
-const parentMenuState = inject("parent-menu-state")
+const parentMenuState = inject("parent-menu-state");
 watch(parentMenuState, (value) => {
   if (!value) {
     emit("close");
   }
 });
 
-const handleMobileMenuCloseClick = () => {
+const onClickMobileMenuClose = () => {
   emit("close");
 }
 
-const handleItemClick = (item) => {
+const onClickItem = (item) => {
   parentMenuState.value = false;
   item.onClick();
 }

diff --git a/src/components/AppHeaderMobileMenuDropdown.vue b/src/components/AppHeaderMobileMenuDropdown.vue
@@ -4,7 +4,7 @@
       aria-expanded="false"
       class="text-gray-500 group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-violet-500 w-full"
       type="button"
-      @click="handleDropdownClick"
+      @click="onClickDropdown"
     >
       <span>{{ props.name }}</span>
       <chevron-down-icon class="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500" />
@@ -23,7 +23,7 @@
             :name="child.name"
             :description="child.description"
             :icon="child.icon"
-            @click="handleItemClick(child)"
+            @click="onClickItem(child)"
           />
         </div>
       </div>
@@ -34,27 +34,27 @@
 <script setup>
 import { ref, inject, watch } from "vue";
 
-import { ChevronDownIcon } from "@heroicons/vue/24/solid"
+import { ChevronDownIcon } from "@heroicons/vue/24/outline"
 
 import AppHeaderMobileMenuDropdownItem from "./AppHeaderMobileMenuDropdownItem.vue";
 
 const isDropdownOpened = ref(false);
 
-const parentMenuState = inject("parent-menu-state")
+const parentMenuState = inject("parent-menu-state");
 watch(parentMenuState, (value) => {
   if (!value) {
     isDropdownOpened.value = false;
   }
 });
 
-const handleDropdownClick = () => {
+const onClickDropdown = () => {
   isDropdownOpened.value = !isDropdownOpened.value;
   if (isDropdownOpened.value) {
     parentMenuState.value = true;
   }
 };
 
-const handleItemClick = (item) => {
+const onClickItem = (item) => {
   parentMenuState.value = false;
   item.onClick();
 }

diff --git a/src/components/AppHeaderMobileMenuDropdownItem.vue b/src/components/AppHeaderMobileMenuDropdownItem.vue
@@ -1,22 +1,35 @@
 <template>
-  <div class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 cursor-pointer">
-    <dynamic-hero-icon
-      :name="props.icon"
-      class="rounded-full w-6 h-6"
-    />
-    <div class="ml-4">
-      <p class="text-base font-medium text-gray-900">
+  <button
+    class="-m-3 p-3 flex w-full items-center rounded-md text-gray-900 hover:text-gray-700"
+    type="button"
+  >
+    <div v-if="props.icon">
+      <dynamic-hero-icon
+        v-if="isHeroIcon"
+        :name="props.icon"
+        class="rounded-full w-6 h-6 mr-4"
+      />
+      <dynamic-image-icon
+        v-else
+        :name="props.icon"
+        class="rounded-full w-6 h-6 mr-4"
+      />
+    </div>
+    <slot name="prepend" />
+    <div class="text-left">
+      <div class="text-base font-medium">
         {{ props.name }}
-      </p>
-      <p class="mt-1 text-sm text-gray-500">
+      </div>
+      <div class="mt-1 text-sm">
         {{ props.description }}
-      </p>
+      </div>
     </div>
-  </div>
+  </button>
 </template>
 
 <script setup>
-import DynamicHeroIcon from "./DynamicHeroIcon.vue"
+import DynamicHeroIcon from "./DynamicHeroIcon.vue";
+import DynamicImageIcon from "./DynamicImageIcon.vue";
 
 const props = defineProps({
   name: {
@@ -29,7 +42,10 @@ const props = defineProps({
   },
   icon: {
     type: String,
-    required: true,
-  }
+    required: false,
+    default: () => "",
+  },
 });
+
+const isHeroIcon = props.icon.endsWith("Icon");
 </script>
diff --git a/src/components/AppHeaderMobileMenuItem.vue b/src/components/AppHeaderMobileMenuItem.vue
@@ -1,18 +1,32 @@
 <template>
   <button
-    class="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50 w-full"
+    class="-m-3 p-3 flex w-full items-center rounded-md text-gray-900 hover:text-gray-700"
     type="button"
   >
-    <dynamic-hero-icon
-      :name="props.icon"
-      class="rounded-full w-6 h-6"
-    />
-    <span class="ml-3 text-base font-medium text-gray-900">{{ props.name }}</span>
+    <div v-if="props.icon">
+      <dynamic-hero-icon
+        v-if="isHeroIcon"
+        :name="props.icon"
+        class="rounded-full w-6 h-6 mr-4"
+      />
+      <dynamic-image-icon
+        v-else
+        :name="props.icon"
+        class="rounded-full w-6 h-6 mr-4"
+      />
+    </div>
+    <slot name="prepend" />
+    <div class="text-left">
+      <div class="text-base font-medium">
+        {{ props.name }}
+      </div>
+    </div>
   </button>
 </template>
 
 <script setup>
-import DynamicHeroIcon from "./DynamicHeroIcon.vue"
+import DynamicHeroIcon from "./DynamicHeroIcon.vue";
+import DynamicImageIcon from "./DynamicImageIcon.vue";
 
 const props = defineProps({
   name: {
@@ -21,7 +35,10 @@ const props = defineProps({
   },
   icon: {
     type: String,
-    required: true,
+    required: false,
+    default: () => "",
   },
 });
+
+const isHeroIcon = props.icon.endsWith("Icon");
 </script>
diff --git a/src/components/AppHeaderMobileMenuSara.vue b/src/components/AppHeaderMobileMenuSara.vue
@@ -3,14 +3,21 @@
     v-if="profile === null"
     name="登入"
     icon="ArrowRightOnRectangleIcon"
-    @click="handleClick"
+    @click="onClick"
   />
   <app-header-mobile-menu-item
     v-else
     :name="nickname"
-    icon="UserIcon"
-    @click="handleClick"
-  />
+    @click="onClick"
+  >
+    <template #prepend>
+      <img
+        :src="identicon"
+        :alt="nickname"
+        class="rounded-full w-6 h-6 mr-4"
+      >
+    </template>
+  </app-header-mobile-menu-item>
 </template>
 
 <script setup>
@@ -27,9 +34,14 @@ const profile = useProfile();
 const nickname = computed(() => {
     const { nickname } = profile;
     return nickname;
-})
+});
+
+const identicon = computed(() => {
+    const {avatar_hash: avatarHash} = profile;
+    return `https://api.gravatar.com/avatar/${avatarHash}?d=identicon`;
+});
 
-const handleClick = () => {
+const onClick = () => {
   onClickSara(profile);
 };
 </script>
diff --git a/src/components/AppHeaderNormal.vue b/src/components/AppHeaderNormal.vue
@@ -12,7 +12,7 @@
       <app-header-normal-menu-item
         v-else
         :name="item.name"
-        @click="handleItemClick(item)"
+        @click="onClickItem(item)"
       />
     </div>
     <app-header-normal-menu-sara v-if="isSaraEnabled" />
@@ -33,7 +33,7 @@ import {
 
 const parentMenuState = inject("parent-menu-state");
 
-const handleItemClick = (item) => {
+const onClickItem = (item) => {
   parentMenuState.value = false;
   item.onClick();
 }