mama/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] 完善個人資料頭像上傳功能與導覽列介面優化

Browse Source
This commit is contained in:
sky121113
2026-03-13 09:30:07 +08:00
parent 773396fc90
commit ea460cf6d9
15 changed files with 234 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
resources/views/profile/partials/update-profile-information-form.blade.php
View File

@@ -13,10 +13,54 @@
@csrf
</form>
<form method="post" action="{{ route('profile.update') }}" class="mt-8 space-y-6">
<form method="post" action="{{ route('profile.update') }}" class="mt-8 space-y-6" enctype="multipart/form-data">
@csrf
@method('patch')
<!-- Avatar Upload -->
<div x-data="{ photoName: null, photoPreview: null }" class="flex flex-col items-center gap-y-4 mb-8 bg-slate-50/50 dark:bg-slate-900/50 p-6 rounded-3xl border border-slate-100 dark:border-slate-800">
<div class="relative group">
<!-- Current Avatar / Preview -->
<div class="size-24 rounded-full overflow-hidden ring-4 ring-white dark:ring-gray-800 shadow-xl">
<template x-if="! photoPreview">
<img src="{{ $user->avatar_url }}" class="size-full object-cover" alt="{{ $user->name }}">
</template>
<template x-if="photoPreview">
<img :src="photoPreview" class="size-full object-cover">
</template>
</div>
<!-- Upload Overlay -->
<label for="avatar" class="absolute inset-0 flex items-center justify-center bg-black/40 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
<svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</label>
</div>
<div class="text-center">
<input type="file" id="avatar" name="avatar" class="hidden"
accept="image/*"
@change="
photoName = $event.target.files[0].name;
const reader = new FileReader();
reader.onload = (e) => {
photoPreview = e.target.result;
};
reader.readAsDataURL($event.target.files[0]);
">
<button type="button" @click="$refs.avatarInput.click()" class="text-xs font-black text-cyan-600 dark:text-cyan-500 uppercase tracking-widest hover:text-cyan-700 transition-colors">
{{ __('Change Avatar') }}
</button>
<p class="mt-1 text-[10px] text-slate-400 font-bold uppercase tracking-wider">{{ __('JPG, PNG or GIF. Max 2MB.') }}</p>
<x-input-error class="mt-2" :messages="$errors->get('avatar')" />
</div>
<!-- Hidden ref for clicking -->
<input type="file" x-ref="avatarInput" class="hidden" accept="image/*" @change="/* same as above but easier to click */">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<x-input-label for="name" :value="__('Name')" class="text-xs font-black text-slate-500 uppercase tracking-widest mb-2 ml-1" />