today_ai_weather/app/views/weather_arts/show.html.erb

<% content_for :head do %>
  <script type="application/ld+json">
    <%= weather_art_schema(@weather_art) %>
  </script>
<% end %>

<div class="min-h-screen">
  <!-- 返回导航 -->
  <div class="container mx-auto px-4 py-8">
    <%= link_to city_path(@weather_art.city),
                class: "btn btn-ghost gap-2" do %>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
      Back to <%= @weather_art.city.name %>
    <% end %>
  </div>

  <!-- 主要内容 -->
  <div class="container mx-auto px-4 pb-16">
    <div class="max-w-6xl mx-auto">
      <!-- 头部信息 -->
      <div class="text-center space-y-4 mb-12">
        <h1 class="text-4xl md:text-5xl font-display font-bold">
          <%= @weather_art.city.name %>
        </h1>
        <p class="text-xl text-base-content/70">
          <%= @weather_art.weather_date.strftime("%B %d, %Y") %>
        </p>
      </div>

      <!-- 主要卡片 -->
      <div class="card lg:card-side bg-base-100 shadow-2xl">
        <figure class="lg:w-1/2 relative aspect-square lg:aspect-auto">
          <% if @weather_art.image.attached? %>
            <%= image_tag @weather_art.image,
                          class: "w-full h-full object-cover" %>
          <% end %>
        </figure>

        <div class="card-body lg:w-1/2">
          <h2 class="card-title font-display text-2xl mb-6">
            <%= @weather_art.description %>
          </h2>

          <!-- 天气数据网格 -->
          <div class="grid grid-cols-2 gap-6">
            <div class="stat bg-base-200 rounded-box">
              <div class="stat-title">Temperature</div>
              <div class="stat-value"><%= @weather_art.temperature %>°C</div>
              <div class="stat-desc">Feels like <%= @weather_art.feeling_temp %>°C</div>
            </div>

            <div class="stat bg-base-200 rounded-box">
              <div class="stat-title">Wind</div>
              <div class="stat-value"><%= @weather_art.wind_scale %></div>
              <div class="stat-desc"><%= @weather_art.wind_speed %> km/h</div>
            </div>

            <div class="stat bg-base-200 rounded-box">
              <div class="stat-title">Humidity</div>
              <div class="stat-value"><%= @weather_art.humidity %>%</div>
            </div>

            <div class="stat bg-base-200 rounded-box">
              <div class="stat-title">Visibility</div>
              <div class="stat-value"><%= @weather_art.visibility %> km</div>
            </div>

            <div class="stat bg-base-200 rounded-box">
              <div class="stat-title">Pressure</div>
              <div class="stat-value"><%= @weather_art.pressure %> hPa</div>
            </div>

            <div class="stat bg-base-200 rounded-box">
              <div class="stat-title">Cloud Cover</div>
              <div class="stat-value"><%= @weather_art.cloud %>%</div>
            </div>
          </div>

          <!-- AI Prompt -->
          <div class="mt-8 bg-base-200 p-6 rounded-box">
            <h3 class="font-display font-bold text-lg mb-3">AI Prompt</h3>
            <p class="text-base-content/70"><%= @weather_art.prompt %></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>