feat: enhance cities and weather arts display

- Update CitiesController to list all cities ordered by name
- Add latest and featured weather arts in HomeController
- Display city details, including weather art history, in Cities#show
- Expand layout with a footer and enhanced navigation
- Integrate new daisyUI plugin for improved styling

These changes improve user navigation and visual presentation on both
city and weather art pages, making it easier to browse and view
information. The introduction of daisyUI also modernizes the UI with
consistent design elements.

app/controllers/cities_controller.rb

@@ -1,8 +1,9 @@
 class CitiesController < ApplicationController
   def index
-    @cities = City.friendly.find(params[:id])
+    @cities = City.all.order(:name)
   end
 
   def show
+    @city = City.friendly.find(params[:id])
   end
 end

app/controllers/home_controller.rb

@@ -1,4 +1,6 @@
 class HomeController < ApplicationController
   def index
+    @latest_arts = WeatherArt.includes(:city).order(created_at: :desc).limit(6)
+    @featured_arts = WeatherArt.includes(:city).order(created_at: :desc).limit(5)
   end
 end

app/controllers/weather_arts_controller.rb

@@ -1,4 +1,6 @@
 class WeatherArtsController < ApplicationController
   def show
+    @city = City.friendly.find(params[:city_id])
+    @weather_art = @city.weather_arts.find(params[:id])
   end
 end

app/views/cities/index.html.erb

@@ -1,2 +1,18 @@
-<h1>Cities#index</h1>
+<div class="space-y-8">
-<p>Find me in app/views/cities/index.html.erb</p>
+  <h1 class="text-3xl font-bold">Cities</h1>
+
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <% @cities.each do |city| %>
+      <div class="card bg-base-200">
+        <div class="card-body">
+          <h2 class="card-title"><%= city.name %></h2>
+          <p>Latitude: <%= city.latitude %></p>
+          <p>Longitude: <%= city.longitude %></p>
+          <div class="card-actions justify-end">
+            <%= link_to "View Weather Art", city_path(city), class: "btn btn-primary" %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

app/views/cities/show.html.erb

@@ -1,2 +1,49 @@
-<h1>Cities#show</h1>
+<div class="space-y-8">
-<p>Find me in app/views/cities/show.html.erb</p>
+  <div class="flex justify-between items-center">
+    <h1 class="text-3xl font-bold"><%= @city.name %></h1>
+    <%= link_to "Back to Cities", cities_path, class: "btn btn-ghost" %>
+  </div>
+
+  <div class="stats shadow">
+    <div class="stat">
+      <div class="stat-title">Latitude</div>
+      <div class="stat-value"><%= @city.latitude %></div>
+    </div>
+    <div class="stat">
+      <div class="stat-title">Longitude</div>
+      <div class="stat-value"><%= @city.longitude %></div>
+    </div>
+  </div>
+
+  <div class="space-y-4">
+    <h2 class="text-2xl font-bold">Weather Art History</h2>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <% @city.weather_arts.order(weather_date: :desc).each do |art| %>
+        <div class="card bg-base-200">
+          <figure>
+            <% if art.image.attached? %>
+              <%= image_tag art.image, class: "w-full h-48 object-cover" %>
+            <% end %>
+          </figure>
+          <div class="card-body">
+            <h3 class="card-title"><%= art.weather_date.strftime("%Y-%m-%d") %></h3>
+            <p><%= art.description %></p>
+            <div class="stats stats-vertical shadow">
+              <div class="stat">
+                <div class="stat-title">Temperature</div>
+                <div class="stat-value"><%= art.temperature %>°C</div>
+              </div>
+              <div class="stat">
+                <div class="stat-title">Humidity</div>
+                <div class="stat-value"><%= art.humidity %>%</div>
+              </div>
+            </div>
+            <div class="card-actions justify-end">
+              <%= link_to "View Details", city_weather_art_path(@city, art), class: "btn btn-primary" %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

app/views/home/index.html.erb

@@ -1,2 +1,46 @@
-<h1>Home#index</h1>
+<div class="space-y-8">
-<p>Find me in app/views/home/index.html.erb</p>
+  <!-- 头部标题 -->
+  <div class="text-center space-y-4">
+    <h1 class="text-4xl font-bold">AI Weather Art</h1>
+    <p class="text-xl text-base-content/70">Discover the beauty of weather through AI-generated art</p>
+  </div>
+
+  <!-- 轮播图 -->
+  <div class="carousel w-full rounded-box">
+    <% WeatherArt.last(5).each_with_index do |art, index| %>
+      <div id="slide<%= index %>" class="carousel-item relative w-full">
+        <% if art.image.attached? %>
+          <%= image_tag art.image, class: "w-full aspect-video object-cover" %>
+        <% end %>
+        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
+          <a href="#slide<%= index == 0 ? 4 : index - 1 %>" class="btn btn-circle">❮</a>
+          <a href="#slide<%= index == 4 ? 0 : index + 1 %>" class="btn btn-circle">❯</a>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- 最新天气艺术 -->
+  <div class="space-y-4">
+    <h2 class="text-2xl font-bold">Latest Weather Art</h2>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <% WeatherArt.last(6).each do |art| %>
+        <div class="card bg-base-200">
+          <figure>
+            <% if art.image.attached? %>
+              <%= image_tag art.image, class: "w-full h-48 object-cover" %>
+            <% end %>
+          </figure>
+          <div class="card-body">
+            <h3 class="card-title"><%= art.city.name %></h3>
+            <p><%= art.weather_date.strftime("%Y-%m-%d") %></p>
+            <p><%= art.description %></p>
+            <div class="card-actions justify-end">
+              <%= link_to "View Details", city_weather_art_path(art.city, art), class: "btn btn-primary" %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

app/views/layouts/application.html.erb

@@ -18,12 +18,30 @@
     <link rel="apple-touch-icon" href="/icon.png">
 
     <%# Includes all stylesheet files in app/assets/stylesheets %>
-    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
     <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
   </head>
 
-  <body>
+  <body class="min-h-screen bg-base-100">
+  <div class="navbar bg-base-100">
+    <div class="container mx-auto">
+      <div class="flex-1">
+        <%= link_to "AI Weather Art", root_path, class: "btn btn-ghost normal-case text-xl" %>
+      </div>
+      <div class="flex-none">
+        <%= link_to "Cities", cities_path, class: "btn btn-ghost normal-case" %>
+      </div>
+    </div>
+  </div>
+
+  <main class="container mx-auto px-4 py-8">
     <%= yield %>
+  </main>
+
+  <footer class="footer footer-center p-4 bg-base-200 text-base-content">
+    <div>
+      <p>Copyright © 2024 - All rights reserved by AI Weather Art</p>
+    </div>
+  </footer>
   </body>
 </html>

app/views/weather_arts/show.html.erb

@@ -1,2 +1,46 @@
-<h1>WeatherArts#show</h1>
+<div class="space-y-8">
-<p>Find me in app/views/weather_arts/show.html.erb</p>
+  <div class="flex justify-between items-center">
+    <h1 class="text-3xl font-bold"><%= @weather_art.city.name %> - <%= @weather_art.weather_date.strftime("%Y-%m-%d") %></h1>
+    <%= link_to "Back to City", city_path(@weather_art.city), class: "btn btn-ghost" %>
+  </div>
+
+  <div class="card lg:card-side bg-base-200 shadow-xl">
+    <figure class="lg:w-1/2">
+      <% 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"><%= @weather_art.description %></h2>
+
+      <div class="stats stats-vertical shadow">
+        <div class="stat">
+          <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">
+          <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">
+          <div class="stat-title">Humidity</div>
+          <div class="stat-value"><%= @weather_art.humidity %>%</div>
+        </div>
+
+        <div class="stat">
+          <div class="stat-title">Visibility</div>
+          <div class="stat-value"><%= @weather_art.visibility %> km</div>
+        </div>
+      </div>
+
+      <div class="mt-4">
+        <h3 class="font-bold">AI Prompt:</h3>
+        <p class="text-sm"><%= @weather_art.prompt %></p>
+      </div>
+    </div>
+  </div>
+</div>

package-lock.json

@@ -15,6 +15,7 @@
         "tailwindcss": "^3.4.17"
       },
       "devDependencies": {
+        "daisyui": "^4.12.23",
         "esbuild": "^0.24.2"
       }
     },
@@ -545,6 +546,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-selector-tokenizer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -557,6 +569,36 @@
         "node": ">=4"
       }
     },
+    "node_modules/culori": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/daisyui": {
+      "version": "4.12.23",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.23.tgz",
+      "integrity": "sha512-EM38duvxutJ5PD65lO/AFMpcw+9qEy6XAZrTpzp7WyaPeO/l+F/Qiq0ECHHmFNcFXh5aVoALY4MGrrxtCiaQCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-selector-tokenizer": "^0.8",
+        "culori": "^3",
+        "picocolors": "^1",
+        "postcss-js": "^4"
+      },
+      "engines": {
+        "node": ">=16.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/daisyui"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -666,6 +708,13 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fastq": {
       "version": "1.18.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",

package.json

@@ -2,6 +2,7 @@
   "name": "app",
   "private": true,
   "devDependencies": {
+    "daisyui": "^4.12.23",
     "esbuild": "^0.24.2"
   },
   "scripts": {

tailwind.config.js

@@ -4,5 +4,8 @@ module.exports = {
     './app/helpers/**/*.rb',
     './app/assets/stylesheets/**/*.css',
     './app/javascript/**/*.js'
-  ]
+  ],
+  plugins: [
+    require('daisyui'),
+  ],
 }

yarn.lock

@@ -467,11 +467,34 @@ cross-spawn@^7.0.0:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-selector-tokenizer@^0.8:
+  version "0.8.0"
+  resolved "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz"
+  integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==
+  dependencies:
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+culori@^3:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz"
+  integrity sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==
+
+daisyui@^4.12.23:
+  version "4.12.23"
+  resolved "https://registry.npmjs.org/daisyui/-/daisyui-4.12.23.tgz"
+  integrity sha512-EM38duvxutJ5PD65lO/AFMpcw+9qEy6XAZrTpzp7WyaPeO/l+F/Qiq0ECHHmFNcFXh5aVoALY4MGrrxtCiaQCQ==
+  dependencies:
+    css-selector-tokenizer "^0.8"
+    culori "^3"
+    picocolors "^1"
+    postcss-js "^4"
+
 detect-libc@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz"
@@ -554,6 +577,11 @@ fast-glob@^3.3.2:
     merge2 "^1.3.0"
     micromatch "^4.0.8"
 
+fastparse@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
 fastq@^1.6.0:
   version "1.18.0"
   resolved "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz"
@@ -808,7 +836,7 @@ path-scurry@^1.11.1:
     lru-cache "^10.2.0"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
 
-picocolors@^1.0.1, picocolors@^1.1.1:
+picocolors@^1, picocolors@^1.0.1, picocolors@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
@@ -837,7 +865,7 @@ postcss-import@^15.1.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-js@^4.0.1:
+postcss-js@^4, postcss-js@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz"
   integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
@@ -928,7 +956,7 @@ run-parallel@^1.1.9:
 
 sass@^1.83.4:
   version "1.83.4"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.83.4.tgz#5ccf60f43eb61eeec300b780b8dcb85f16eec6d1"
+  resolved "https://registry.npmjs.org/sass/-/sass-1.83.4.tgz"
   integrity sha512-B1bozCeNQiOgDcLd33e2Cs2U60wZwjUUXzh900ZyQF5qUasvMdDZYbQ566LJu7cqR+sAHlAfO6RMkaID5s6qpA==
   dependencies:
     chokidar "^4.0.0"