Views/Home/Index.cshtml

@{
    ViewData["Title"] = "首页";
    var categories = ViewBag.Categories as List<ToolHub.Models.Category> ?? new List<ToolHub.Models.Category>();
    var hotTools = ViewBag.HotTools as List<ToolHub.Models.Tool> ?? new List<ToolHub.Models.Tool>();
    var newTools = ViewBag.NewTools as List<ToolHub.Models.Tool> ?? new List<ToolHub.Models.Tool>();
}

<!-- 页面头部 -->
<div class="container" style="padding: 2rem 0 1rem;">
    <div style="text-align: center; margin-bottom: 2rem;">
        <h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--dark);">
            <span class="text-gradient">ToolHub</span> 工具平台
        </h1>
        <p style="color: var(--dark-2); font-size: 1rem;">发现和使用最好的在线工具</p>
    </div>

    <!-- 快速工具入口 -->
    <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;">
        <a href="@Url.Action("Tools", "Home", new { categoryId = 1 })" class="quick-tool">
            <i class="fas fa-file-pdf" style="color: var(--danger);"></i>
            <span>PDF转换</span>
        </a>
        <a href="@Url.Action("Tools", "Home", new { categoryId = 2 })" class="quick-tool">
            <i class="fas fa-image" style="color: var(--primary);"></i>
            <span>图片工具</span>
        </a>
        <a href="@Url.Action("Tools", "Home", new { categoryId = 5 })" class="quick-tool">
            <i class="fas fa-calculator" style="color: var(--success);"></i>
            <span>数据换算</span>
        </a>
        <a href="@Url.Action("Tools", "Home")" class="quick-tool">
            <i class="fas fa-ellipsis-h" style="color: var(--dark-2);"></i>
            <span>更多工具</span>
        </a>
    </div>
</div>

<!-- 用户最近使用工具 -->
@if (User.Identity?.IsAuthenticated == true)
{
    <section class="container mb-8">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
            <h3 style="font-size: 1.25rem; font-weight: 700; color: var(--dark);">
                <i class="fas fa-clock" style="color: var(--warning); margin-right: 0.5rem;"></i>
                最近使用
            </h3>
            <a href="@Url.Action("Tools", "Home")" class="btn btn-outline btn-sm">
                查看更多
            </a>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6">
            <!-- 这里将通过AJAX动态加载最近使用的工具 -->
            <div id="recent-tools-container">
                <div style="grid-column: 1 / -1; text-align: center; padding: 2rem; color: var(--dark-2);">
                    <i class="fas fa-clock" style="font-size: 2rem; margin-bottom: 1rem; display: block; opacity: 0.5;"></i>
                    暂无最近使用的工具
                </div>
            </div>
        </div>
    </section>

    <!-- 用户收藏工具 -->
    <section class="container mb-8">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
            <h3 style="font-size: 1.25rem; font-weight: 700; color: var(--dark);">
                <i class="fas fa-heart" style="color: var(--danger); margin-right: 0.5rem;"></i>
                我的收藏
            </h3>
            <a href="@Url.Action("Tools", "Home")" class="btn btn-outline btn-sm">
                查看更多
            </a>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6">
            <!-- 这里将通过AJAX动态加载收藏的工具 -->
            <div id="favorite-tools-container">
                <div style="grid-column: 1 / -1; text-align: center; padding: 2rem; color: var(--dark-2);">
                    <i class="fas fa-heart" style="font-size: 2rem; margin-bottom: 1rem; display: block; opacity: 0.5;"></i>
                    暂无收藏的工具
                </div>
            </div>
        </div>
    </section>
}

<!-- 最新工具区域 -->
@if (newTools.Any())
{
    <section class="container mb-8">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
            <h3 style="font-size: 1.25rem; font-weight: 700; color: var(--dark);">
                <i class="fas fa-sparkles" style="color: var(--accent); margin-right: 0.5rem;"></i>
                最新工具
            </h3>
            <a href="@Url.Action("Tools", "Home")" class="btn btn-outline btn-sm">
                查看更多
            </a>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
            @foreach (var tool in newTools.Take(6))
            {
                <div class="card" style="padding: 1.5rem; text-align: center;" data-tool-id="@tool.Id">
                    <div style="width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--light-1); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: var(--primary); transition: var(--transition);">
                        <i class="@tool.Icon" style="font-size: 1.5rem;"></i>
                    </div>
                    <h4 style="font-weight: 600; margin-bottom: 0.5rem; font-size: 0.9rem;">@tool.Name</h4>
                    <p style="font-size: 0.75rem; color: var(--dark-2); line-height: 1.4; margin: 0;">
                        @(tool.Description?.Length > 30 ? tool.Description.Substring(0, 30) + "..." : tool.Description)
                    </p>
                    @if (tool.IsNew)
                    {
                        <span class="badge" style="background: var(--accent); color: white; font-size: 0.65rem; margin-top: 0.5rem; display: inline-block;">新品</span>
                    }
                </div>
            }
        </div>
    </section>
}

<!-- 热门工具区域 -->
@if (hotTools.Any())
{
    <section class="container mb-8">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
            <h3 style="font-size: 1.25rem; font-weight: 700; color: var(--dark);">
                <i class="fas fa-fire" style="color: var(--danger); margin-right: 0.5rem;"></i>
                热门工具
            </h3>
            <a href="@Url.Action("Tools", "Home")" class="btn btn-outline btn-sm">
                查看更多
            </a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
            @foreach (var tool in hotTools.Take(4))
            {
                <div class="card tool-card" data-tool-id="@tool.Id">
                    @if (!string.IsNullOrEmpty(tool.Image))
                    {
                        <img src="@tool.Image" alt="@tool.Name" class="card-img" />
                    }
                    else
                    {
                        <div class="card-img" style="background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center;">
                            <i class="@tool.Icon" style="font-size: 3rem; color: white;"></i>
                        </div>
                    }
                    
                    @if (tool.IsHot)
                    {
                        <div class="tool-badge hot">热门</div>
                    }

                    <div class="card-body">
                        <h4 class="card-title">@tool.Name</h4>
                        <p class="card-text">@(tool.Description ?? "")</p>
                        
                        <div class="card-footer">
                            <div class="tool-stats">
                                @if (tool.Rating > 0)
                                {
                                    <div class="tool-rating">
                                        <i class="fas fa-star rating-stars"></i>
                                        <span>@tool.Rating.ToString("F1")</span>
                                    </div>
                                }
                                <span>@(tool.ViewCount > 1000 ? (tool.ViewCount / 1000).ToString("F0") + "K" : tool.ViewCount.ToString()) 次使用</span>
                            </div>
                            <a href="@(tool.Url ?? "#")" class="btn btn-primary btn-sm" target="_blank">
                                使用
                            </a>
                        </div>
                    </div>
                </div>
            }
        </div>
    </section>
}

@section Scripts {
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
}