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

<!-- app/views/cities/show.html.erb -->
<div class="container mx-auto px-4 py-8">
  <!-- 城市信息头部 -->
  <div class="bg-base-200 rounded-box p-8 mb-8">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
      <div>
        <h1 class="text-4xl font-bold mb-2"><%= @city.name %></h1>
        <div class="flex items-center gap-2 text-base-content/70">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
          </svg>
          <span><%= @city.country %></span>
        </div>
      </div>

      <!-- 当前天气信息 -->
      <% if @current_weather_art = @city.current_weather_art %>
        <div class="stats shadow">
          <div class="stat">
            <div class="stat-title">Temperature</div>
            <div class="stat-value"><%= @current_weather_art.temperature %>°C</div>
          </div>
          <div class="stat">
            <div class="stat-title">Condition</div>
          </div>
        </div>
      <% end %>
    </div>
  </div>

  <!-- 日期筛选器 -->
  <div class="flex flex-col md:flex-row gap-4 items-center justify-between mb-8">
    <div class="flex items-center gap-4">
      <h2 class="text-2xl font-bold">Weather Art History</h2>
      <div class="badge badge-primary"><%= @weather_arts.total_count %> artworks</div>
    </div>

    <%= form_tag city_path(@city), method: :get, class: "join" do %>
      <%= date_field_tag :start_date, params[:start_date],
                         class: "join-item input input-bordered w-full max-w-xs",
                         placeholder: "Start Date" %>
      <%= date_field_tag :end_date, params[:end_date],
                         class: "join-item input input-bordered w-full max-w-xs",
                         placeholder: "End Date" %>
      <%= submit_tag "Filter", class: "join-item btn btn-primary" %>
    <% end %>
  </div>

  <!-- 天气艺术网格 -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
    <% @weather_arts.each do |art| %>
      <div class="card bg-base-100 shadow-xl group hover:scale-105 transition-transform duration-200"
           data-controller="modal"
           data-action="click->modal#open">
        <!-- 卡片主体 -->
        <figure class="relative">
          <%= image_tag art.image_url,
                        class: "w-full h-64 object-cover" %>
          <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/70 to-transparent text-white">
            <div class="text-lg font-bold"><%= art.weather_date.strftime("%B %d, %Y") %></div>
            <div class="flex items-center gap-2">
              <span><%= art.temperature %>°C</span>
              <span class="text-xs">|</span>
              <span><%= art.description %></span>
            </div>
          </div>
        </figure>

        <!-- 模态框内容 -->
        <dialog id="modal_<%= art.id %>" class="modal">
          <div class="modal-box max-w-4xl">
            <h3 class="font-bold text-lg mb-4">
              Weather Art - <%= art.weather_date.strftime("%B %d, %Y") %>
            </h3>
            <%= image_tag art.image_url, class: "w-full rounded-lg mb-4" %>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
              <div class="stat bg-base-200 rounded-box">
                <div class="stat-title">Temperature</div>
                <div class="stat-value text-lg"><%= art.temperature %>°C</div>
              </div>
              <div class="stat bg-base-200 rounded-box">
                <div class="stat-title">Humidity</div>
                <div class="stat-value text-lg"><%= art.humidity %>%</div>
              </div>
              <div class="stat bg-base-200 rounded-box">
                <div class="stat-title">Wind Speed</div>
                <div class="stat-value text-lg"><%= art.wind_speed %></div>
              </div>
              <div class="stat bg-base-200 rounded-box">
                <div class="stat-title">Condition</div>
                <div class="stat-value text-lg"><%= art.description %></div>
              </div>
            </div>
            <div class="bg-base-200 p-4 rounded-box mb-4">
              <h4 class="font-bold mb-2">AI Prompt</h4>
              <p class="text-sm"><%= art.prompt %></p>
            </div>
            <div class="modal-action">
              <form method="dialog">
                <button class="btn">Close</button>
              </form>
            </div>
          </div>
          <form method="dialog" class="modal-backdrop">
            <button>close</button>
          </form>
        </dialog>
      </div>
    <% end %>
  </div>

  <!-- 分页 -->
  <div class="flex justify-center">
    <%= paginate @weather_arts %>
  </div>
</div>

<!-- Stimulus Controller for Modal -->
<%# app/javascript/controllers/modal_controller.js %>
<script type="module">
    import { Controller } from "@hotwired/stimulus"

    export default class extends Controller {
        open(event) {
            const modalId = this.element.querySelector('dialog').id
            const modal = document.getElementById(modalId)
            modal.showModal()
        }
    }
</script>