feat: enhance weather art display and functionality

- Update to include a new 'random' scope in WeatherArt model.
- Modify HomeController to fetch random and popular arts along with latest arts.
- Refactor index.html.erb to utilize a partial for rendering arts.

This update improves the display of weather art by adding a new
random selection of arts alongside popular ones, increasing user
engagement and variety. The code structure is also cleaner due
to the use of a partial view for rendering arts, promoting
the DRY principle.

app/controllers/home_controller.rb

@@ -1,7 +1,8 @@
 class HomeController < ApplicationController
   def index
-    @popular_shuffle_arts = WeatherArt.by_popularity(10).shuffle.last(6)
-    @latest_arts = WeatherArt.latest(12)
+    @popular_arts = WeatherArt.by_popularity(3)
+    @random_arts = WeatherArt.random(3)
+    @latest_arts = WeatherArt.latest(6)
     @featured_arts = WeatherArt.includes(:city).order(created_at: :desc).limit(5)
     set_meta_tags(
       title: "AI-Generated Weather Art",

app/models/weather_art.rb

@@ -31,6 +31,19 @@ class WeatherArt < ApplicationRecord
     end
   }
 
+  scope :random, ->(limit = 3) {
+    if ActiveRecord::Base.connection.adapter_name.downcase == "postgresql"
+      # PostgreSQL 优化版本
+      order(Arel.sql('RANDOM()')).limit(limit)
+    elsif ActiveRecord::Base.connection.adapter_name.downcase == "mysql2"
+      # MySQL 优化版本
+      order(Arel.sql('RAND()')).limit(limit)
+    else
+      # SQLite 或其他数据库的通用版本
+      order(Arel.sql('RANDOM()')).limit(limit)
+    end
+  }
+
   def should_generate_new_friendly_id?
     weather_date_changed? || city_id_changed? || super
   end

app/views/home/_arts.html.erb

@@ -0,0 +1,29 @@
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+  <% arts.each do |art| %>
+    <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-300">
+      <figure class="relative aspect-[4/3] overflow-hidden">
+        <% if art.image.attached? %>
+          <%= image_tag art.image, class: "w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" %>
+        <% end %>
+      </figure>
+      <div class="card-body">
+        <div class="flex justify-between items-start">
+          <div>
+            <h3 class="card-title font-display"><%= art.city.name %></h3>
+            <p class="text-base-content/70">
+              <%= art.weather_date.strftime("%B %d, %Y") %>
+            </p>
+          </div>
+          <div class="text-right">
+            <div class="text-2xl font-bold"><%= art.temperature %>°C</div>
+            <div class="text-sm text-base-content/70"><%= art.description %></div>
+          </div>
+        </div>
+        <div class="card-actions justify-end mt-4">
+          <%= link_to "View Details", city_weather_art_path(art.city, art),
+                      class: "btn btn-primary btn-outline" %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>

app/views/home/index.html.erb

@@ -25,37 +25,12 @@
 
   <!-- 最新天气艺术 -->
   <section class="container mx-auto px-4 py-16 space-y-12">
-    <h2 class="text-3xl font-display font-bold text-center">Shuffle Latest Weather Art</h2>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-      <% @latest_arts.each do |art| %>
-        <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-300">
-          <figure class="relative aspect-[4/3] overflow-hidden">
-            <% if art.image.attached? %>
-              <%= image_tag art.image, class: "w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" %>
-            <% end %>
-          </figure>
-          <div class="card-body">
-            <div class="flex justify-between items-start">
-              <div>
-                <h3 class="card-title font-display"><%= art.city.name %></h3>
-                <p class="text-base-content/70">
-                  <%= art.weather_date.strftime("%B %d, %Y") %>
-                </p>
-              </div>
-              <div class="text-right">
-                <div class="text-2xl font-bold"><%= art.temperature %>°C</div>
-                <div class="text-sm text-base-content/70"><%= art.description %></div>
-              </div>
-            </div>
-            <div class="card-actions justify-end mt-4">
-              <%= link_to "View Details", city_weather_art_path(art.city, art),
-                          class: "btn btn-primary btn-outline" %>
-            </div>
-          </div>
-        </div>
-      <% end %>
-    </div>
+    <h2 class="text-3xl font-display font-bold text-center">Latest Weather Art</h2>
+    <%= render 'home/arts', arts: @latest_arts %>
+    <h2 class="text-3xl font-display font-bold text-center">Popular Weather Art</h2>
+    <%= render 'home/arts', arts: @popular_arts %>
+    <h2 class="text-3xl font-display font-bold text-center">Random Weather Art</h2>
+    <%= render 'home/arts', arts: @random_arts %>
   </section>
 </div>
 <div class="text-center mt-12 mb-12">