Skip to main content

新页面

<!-- resources/js/Pages/Profile.vue -->
<script setup>
import { Head } from '@inertiajs/vue3'; // Inertia 的 Head 组件用于设置标题
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'; // Breeze 提供的认证布局
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { Button } from '@/Components/ui/button';

// 定义从后端接收的 props
const props = defineProps({
    user: Object,
});
</script>

<template>
    <!-- 使用 Head 组件设置页面标题 -->
    <Head title="用户资料" />

    <!-- 使用 Breeze 提供的布局，保持风格统一 -->
    <AuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                用户资料
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-gray-900">
                        <!-- 使用 Shadcn 的 Card 组件构建卡片 -->
                        <Card class="max-w-md mx-auto">
                            <CardHeader>
                                <CardTitle>个人信息</CardTitle>
                                <CardDescription>这是你的公开资料。</CardDescription>
                            </CardHeader>
                            <CardContent>
                                <!-- 使用 Tailwind CSS 进行布局 -->
                                <div class="space-y-4">
                                    <div>
                                        <p class="text-sm font-medium text-gray-500">姓名</p>
                                        <p class="text-lg">{{ user.name }}</p>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-500">邮箱</p>
                                        <p class="text-lg">{{ user.email }}</p>
                                    </div>
                                    <!-- 使用 Shadcn 的 Button 组件 -->
                                    <Button class="w-full">编辑资料</Button>
                                </div>
                            </CardContent>
                        </Card>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

 

Back to top