diff --git a/packages/app/src/components/BrandBanner.vue b/packages/app/src/components/BrandBanner.vue index 1bbfdd8..48b33e8 100644 --- a/packages/app/src/components/BrandBanner.vue +++ b/packages/app/src/components/BrandBanner.vue @@ -35,6 +35,7 @@ diff --git a/packages/app/src/components/ProfileMenu.vue b/packages/app/src/components/ProfileMenu.vue index 8ac9960..33234f6 100644 --- a/packages/app/src/components/ProfileMenu.vue +++ b/packages/app/src/components/ProfileMenu.vue @@ -13,9 +13,13 @@ hover-stay-time="150" @tap="handleTap(item)" > - - {{ item.icon }} - + {{ item.title }} @@ -32,7 +36,6 @@ import { computed } from 'vue' interface MenuItem { key: string type: 'item' | 'separator' - icon?: string title?: string path?: string isAdmin?: boolean @@ -57,7 +60,6 @@ const menuItems = computed(() => { { key: 'membership', type: 'item', - icon: '๐Ÿ’ณ', title: 'ๆˆ‘็š„ไผšๅ‘˜ๅก', path: '/pages/profile/membership', requireAuth: true, @@ -65,7 +67,6 @@ const menuItems = computed(() => { { key: 'bookings', type: 'item', - icon: '๐Ÿ“…', title: 'ๆˆ‘็š„้ข„็บฆ', path: '/pages/profile/bookings', requireAuth: true, @@ -73,7 +74,6 @@ const menuItems = computed(() => { { key: 'info', type: 'item', - icon: '๐Ÿ‘ค', title: 'ไธชไบบไฟกๆฏ', path: '/pages/profile/info', requireAuth: true, @@ -85,14 +85,12 @@ const menuItems = computed(() => { { key: 'clear', type: 'item', - icon: '๐Ÿ—‘๏ธ', title: 'ๆธ…้™ค็ผ“ๅญ˜', action: 'clear', }, { key: 'about', type: 'item', - icon: 'โ„น๏ธ', title: 'ๅ…ณไบŽๆˆ‘ไปฌ', action: 'about', }, @@ -103,7 +101,6 @@ const menuItems = computed(() => { items.push({ key: 'admin', type: 'item', - icon: 'โš™๏ธ', title: '็ฎก็†ไธญๅฟƒ', path: '/pages/admin/index', isAdmin: true, @@ -163,26 +160,179 @@ function handleTap(item: MenuItem) { } &__icon-wrap { - width: 64rpx; - height: 64rpx; - border-radius: $radius-sm; - background: rgba($brand-color, 0.08); + width: 56rpx; + height: 56rpx; + border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: $spacing-md; + position: relative; + background: rgba($brand-color, 0.06); + // โ”€โ”€โ”€ Pure CSS Icons โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ + + // ไผšๅ‘˜ๅก โ€” ๅœ†่ง’็Ÿฉๅฝขๅก็‰‡ + ๆจช็บฟ + &--membership { + background: rgba($accent-color, 0.10); + &::before { + content: ''; + width: 26rpx; + height: 18rpx; + border: 2.5rpx solid $accent-color; + border-radius: 4rpx; + box-sizing: border-box; + } + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 1rpx); + width: 16rpx; + height: 0; + border-top: 2.5rpx solid $accent-color; + } + } + + // ้ข„็บฆ โ€” ๆ—ฅๅކ๏ผˆ็Ÿฉๅฝข + ้กถ้ƒจไธคไธชๅฐ็ซ–็บฟ๏ผ‰ + &--bookings { + background: rgba($brand-color, 0.06); + &::before { + content: ''; + width: 24rpx; + height: 22rpx; + border: 2.5rpx solid $brand-color; + border-radius: 4rpx; + border-top-width: 5rpx; + box-sizing: border-box; + } + &::after { + content: ''; + position: absolute; + top: 14rpx; + left: 50%; + transform: translateX(-50%); + width: 10rpx; + height: 0; + border-top: 2.5rpx solid $brand-color; + // ็”จ box-shadow ๆจกๆ‹Ÿไธคไธช็ซ–็บฟ + box-shadow: + -4rpx -7rpx 0 0 $brand-color, + 4rpx -7rpx 0 0 $brand-color; + } + } + + // ไธชไบบไฟกๆฏ โ€” ไบบๅฝข๏ผˆๅœ† + ่‚ฉๅผง๏ผ‰ + &--info { + background: rgba($brand-color, 0.06); + &::before { + content: ''; + width: 12rpx; + height: 12rpx; + border: 2.5rpx solid $brand-color; + border-radius: 50%; + position: absolute; + top: 16rpx; + left: 50%; + transform: translateX(-50%); + box-sizing: border-box; + } + &::after { + content: ''; + width: 22rpx; + height: 10rpx; + border: 2.5rpx solid $brand-color; + border-bottom: none; + border-radius: 12rpx 12rpx 0 0; + position: absolute; + bottom: 13rpx; + left: 50%; + transform: translateX(-50%); + box-sizing: border-box; + } + } + + // ๆธ…้™ค็ผ“ๅญ˜ โ€” ๆ—‹่ฝฌ็š„ๅˆทๆ–ฐ็ฎญๅคด๏ผˆๅœ†ๅผง๏ผ‰ + &--clear { + background: rgba($text-hint, 0.08); + &::before { + content: ''; + width: 20rpx; + height: 20rpx; + border: 2.5rpx solid $text-secondary; + border-radius: 50%; + border-right-color: transparent; + box-sizing: border-box; + } + &::after { + content: ''; + position: absolute; + top: 14rpx; + right: 15rpx; + width: 0; + height: 0; + border-left: 5rpx solid $text-secondary; + border-top: 4rpx solid transparent; + border-bottom: 4rpx solid transparent; + } + } + + // ๅ…ณไบŽๆˆ‘ไปฌ โ€” ๅœ†ๅฝขไธญๅฟƒไธ€ไธช็‚น + ็ซ–็บฟ๏ผˆinfo ๆ ‡่ฎฐ๏ผ‰ + &--about { + background: rgba($text-hint, 0.08); + &::before { + content: ''; + width: 22rpx; + height: 22rpx; + border: 2.5rpx solid $text-secondary; + border-radius: 50%; + box-sizing: border-box; + } + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 2.5rpx; + height: 8rpx; + background: $text-secondary; + border-radius: 1rpx; + box-shadow: 0 -6rpx 0 0 $text-secondary; + } + } + + // ็ฎก็†ไธญๅฟƒ โ€” ้ฝฟ่ฝฎ๏ผˆๅœ† + ๅ››ไธชๅˆปๅบฆ๏ผ‰ &--admin { background: rgba($accent-color, 0.12); + &::before { + content: ''; + width: 14rpx; + height: 14rpx; + border: 2.5rpx solid $accent-color; + border-radius: 50%; + box-sizing: border-box; + } + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 24rpx; + height: 24rpx; + transform: translate(-50%, -50%); + // ๅ››ๆกๅˆปๅบฆ็บฟ็”จ box-shadow ๅฎž็Žฐ + background: + linear-gradient($accent-color, $accent-color) center top / 2.5rpx 5rpx no-repeat, + linear-gradient($accent-color, $accent-color) center bottom / 2.5rpx 5rpx no-repeat, + linear-gradient($accent-color, $accent-color) left center / 5rpx 2.5rpx no-repeat, + linear-gradient($accent-color, $accent-color) right center / 5rpx 2.5rpx no-repeat; + } } } - &__icon { - font-size: 32rpx; - line-height: 1; - } - &__title { flex: 1; font-size: 30rpx; diff --git a/packages/app/src/components/UserCard.vue b/packages/app/src/components/UserCard.vue index 1ff0273..70e2dc1 100644 --- a/packages/app/src/components/UserCard.vue +++ b/packages/app/src/components/UserCard.vue @@ -5,7 +5,7 @@ - + Hi๏ผŒๆฌข่ฟŽๆฅๅˆฐๆ™ฎๆ‹‰ๆ @@ -25,9 +25,10 @@ mode="aspectFill" @error="onAvatarError" /> - + + @@ -105,7 +106,7 @@ watch( const avatarSrc = computed(() => { if (avatarFailed.value || !props.user?.avatarUrl) { - return '/static/default-avatar.png' + return '/static/default-avatar.jpg' } return props.user.avatarUrl }) diff --git a/packages/app/src/pages.json b/packages/app/src/pages.json index f61dee1..6e0daf6 100644 --- a/packages/app/src/pages.json +++ b/packages/app/src/pages.json @@ -3,25 +3,19 @@ { "path": "pages/home/index", "style": { - "navigationStyle": "custom", - "enableShareAppMessage": true, - "enableShareTimeline": true + "navigationStyle": "custom" } }, { "path": "pages/booking/index", "style": { - "navigationStyle": "custom", - "enableShareAppMessage": true, - "enableShareTimeline": true + "navigationStyle": "custom" } }, { "path": "pages/profile/index", "style": { - "navigationStyle": "custom", - "enableShareAppMessage": true, - "enableShareTimeline": true + "navigationStyle": "custom" } }, { diff --git a/packages/app/src/pages/admin/card-types.vue b/packages/app/src/pages/admin/card-types.vue index 72090a0..c32c2a3 100644 --- a/packages/app/src/pages/admin/card-types.vue +++ b/packages/app/src/pages/admin/card-types.vue @@ -212,6 +212,7 @@ diff --git a/packages/app/src/pages/admin/members.vue b/packages/app/src/pages/admin/members.vue index 21a3a8f..fc1b3af 100644 --- a/packages/app/src/pages/admin/members.vue +++ b/packages/app/src/pages/admin/members.vue @@ -1,16 +1,20 @@