refactor: optimize ui

web-tech-tw · Oct 31, 2024 · 1ae0c55 · 1ae0c55
1 parent 6550965
commit 1ae0c55
Show file tree

Hide file tree

Showing 13 changed files with 95 additions and 60 deletions.
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
@@ -1,12 +1,12 @@
 <template>
   <footer class="mt-16 pb-16 text-sm leading-6">
     <div class="max-w-7xl mx-auto mt-11 divide-y divide-gray-200 px-4 sm:px-6 md:px-8">
-      「Sara 系統」是一個開放原始碼的無密碼式身份認證解決方案。
+      「template.inte」是前端 Web 通用模板，請自行修改內容。
     </div>
     <div class="max-w-7xl mx-auto mt-5 divide-y divide-gray-200 px-4 sm:px-6 md:px-8 text-sky-700">
       <a
         class="mr-3"
-        href="https://github.com/web-tech-tw/sara"
+        href="https://github.com/web-tech-tw/template.inte"
       >網站原始碼</a>
       <a
         class="mr-3"

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -16,15 +16,15 @@
         <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>
@@ -55,27 +55,27 @@ const isMenuItemExist = computed(() => {
   return 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/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" />
@@ -71,11 +71,11 @@ watch(parentMenuState, (value) => {
   }
 });
 
-const handleMobileMenuCloseClick = () => {
+const onClickMobileMenuClose = () => {
   emit("close");
 }
 
-const handleItemClick = (item) => {
+const onClickItem = (item) => {
   parentMenuState.value = false;
   item.onClick();
 }

diff --git a/src/components/AppHeaderMobileIconButton.vue b/src/components/AppHeaderMobileIconButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     aria-expanded="false"
-    class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500"
+    class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
     type="button"
   >
     <slot />

diff --git a/src/components/AppHeaderMobileMenuDropdown.vue b/src/components/AppHeaderMobileMenuDropdown.vue
@@ -2,9 +2,9 @@
   <div class="relative">
     <button
       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-amber-500 w-full"
+      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-indigo-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>
@@ -47,14 +47,14 @@ watch(parentMenuState, (value) => {
   }
 });
 
-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,18 +1,23 @@
 <template>
-  <div class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 cursor-pointer">
+  <button
+    class="-m-3 p-3 flex w-full items-center rounded-md text-gray-900 hover:text-gray-700"
+    type="button"
+  >
     <dynamic-hero-icon
+      v-if="props.icon"
       :name="props.icon"
-      class="rounded-full w-6 h-6"
+      class="rounded-full w-6 h-6 mr-4"
     />
-    <div class="ml-4">
-      <p class="text-base font-medium text-gray-900">
+    <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>
@@ -29,7 +34,8 @@ const props = defineProps({
   },
   icon: {
     type: String,
-    required: true,
-  }
+    required: false,
+    default: () => "",
+  },
 });
 </script>
diff --git a/src/components/AppHeaderMobileMenuItem.vue b/src/components/AppHeaderMobileMenuItem.vue
@@ -1,13 +1,19 @@
 <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
+      v-if="props.icon"
       :name="props.icon"
-      class="rounded-full w-6 h-6"
+      class="rounded-full w-6 h-6 mr-4"
     />
-    <span class="ml-3 text-base font-medium text-gray-900">{{ props.name }}</span>
+    <slot name="prepend" />
+    <div class="text-left">
+      <div class="text-base font-medium">
+        {{ props.name }}
+      </div>
+    </div>
   </button>
 </template>
 
@@ -21,7 +27,8 @@ const props = defineProps({
   },
   icon: {
     type: String,
-    required: true,
+    required: false,
+    default: () => "",
   },
 });
 </script>
diff --git a/src/components/AppHeaderMobileMenuSara.vue b/src/components/AppHeaderMobileMenuSara.vue
@@ -3,19 +3,19 @@
     v-if="profile === null"
     name="登入"
     icon="ArrowRightOnRectangleIcon"
-    @click="handleClick"
+    @click="onClick"
   />
   <app-header-mobile-menu-item
     v-else
     :name="nickname"
     :logo="avatarUrl"
-    @click="handleClick"
+    @click="onClick"
   >
     <template #prepend>
       <img
         :src="identicon"
         :alt="nickname"
-        class="rounded-full w-6 h-6"
+        class="rounded-full w-6 h-6 mr-4"
       >
     </template>
   </app-header-mobile-menu-item>
@@ -42,7 +42,7 @@ const identicon = computed(() => {
     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();
 }

diff --git a/src/components/AppHeaderNormalMenuDropdown.vue b/src/components/AppHeaderNormalMenuDropdown.vue
@@ -2,9 +2,9 @@
   <div class="relative">
     <button
       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-amber-500"
+      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-indigo-500"
       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>
@@ -47,14 +47,14 @@ watch(parentMenuState, (value) => {
   }
 });
 
-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/AppHeaderNormalMenuDropdownItem.vue b/src/components/AppHeaderNormalMenuDropdownItem.vue
@@ -1,18 +1,23 @@
 <template>
-  <div class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 cursor-pointer">
+  <button
+    class="-m-3 p-3 flex w-full items-center rounded-md text-gray-900 hover:text-gray-700"
+    type="button"
+  >
     <dynamic-hero-icon
+      v-if="props.icon"
       :name="props.icon"
-      class="rounded-full w-6 h-6"
+      class="rounded-full w-6 h-6 mr-4"
     />
-    <div class="ml-4">
-      <p class="text-base font-medium text-gray-900">
+    <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>
@@ -29,7 +34,8 @@ const props = defineProps({
   },
   icon: {
     type: String,
-    required: true,
-  }
+    required: false,
+    default: () => "",
+  },
 });
 </script>
diff --git a/src/components/AppHeaderNormalMenuItem.vue b/src/components/AppHeaderNormalMenuItem.vue
@@ -1,10 +1,13 @@
 <template>
   <button
     aria-expanded="false"
-    class="text-base font-medium text-gray-500 hover:text-gray-900"
+    class="text-gray-500 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-indigo-500"
     type="button"
   >
-    {{ props.name }}
+    <slot name="prepend" />
+    <span class="text-base font-medium">
+      {{ props.name }}
+    </span>
   </button>
 </template>