[FIX] 修復個人檔案與導覽列頭像不顯示問題,並實作即時更新邏輯
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 47s

This commit is contained in:
2026-03-13 17:50:31 +08:00
parent 42f96d54c3
commit 09e1d0dc48
2 changed files with 30 additions and 5 deletions

View File

@@ -22,8 +22,13 @@
<div class="hidden sm:flex sm:items-center sm:ms-6">
<x-dropdown align="right" width="48">
<x-slot name="trigger">
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
<div>{{ Auth::user()->name }}</div>
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150"
x-data="{ avatarUrl: '{{ Auth::user()->avatar_url }}' }"
@avatar-updated.window="avatarUrl = $event.detail.url">
<div class="flex items-center gap-x-3">
<img :src="avatarUrl" class="size-8 rounded-full object-cover ring-2 ring-gray-100 dark:ring-gray-700 shadow-sm" alt="{{ Auth::user()->name }}">
<div>{{ Auth::user()->name }}</div>
</div>
<div class="ms-1">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -74,9 +79,16 @@
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
<div class="px-4">
<div class="font-medium text-base text-gray-800 dark:text-gray-200">{{ Auth::user()->name }}</div>
<div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
<div class="px-4 flex items-center gap-x-3">
<div class="shrink-0"
x-data="{ avatarUrl: '{{ Auth::user()->avatar_url }}' }"
@avatar-updated.window="avatarUrl = $event.detail.url">
<img :src="avatarUrl" class="size-10 rounded-full object-cover ring-2 ring-gray-100 dark:ring-gray-700 shadow-sm" alt="{{ Auth::user()->name }}">
</div>
<div>
<div class="font-medium text-base text-gray-800 dark:text-gray-200">{{ Auth::user()->name }}</div>
<div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
</div>
</div>
<div class="mt-3 space-y-1">