songtianlun
f6b9dcf187
- Implement locale extraction and fallback mechanism - Add translation files for English and Chinese - Update views to use translated strings for various UI elements This commit introduces support for multiple languages in the application, enhancing accessibility for users. It includes a fallback mechanism for locales and updates to the user interface to display translated content.
52 lines
2.5 KiB
Plaintext
52 lines
2.5 KiB
Plaintext
<div class="mt-8 mb-2 max-w-2xl mx-auto">
|
|
<%= form_with url: cities_path, method: :get,
|
|
class: "relative",
|
|
data: {
|
|
controller: "search",
|
|
turbo_frame: "cities_results",
|
|
turbo_action: "advance"
|
|
} do |f| %>
|
|
<div class="relative">
|
|
<!-- 搜索图标 -->
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-4 z-10">
|
|
<svg class="w-5 h-5 text-base-content/70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- 搜索输入框 -->
|
|
<%= f.text_field :query,
|
|
value: params[:query] ? URI.decode_www_form_component(params[:query]) : nil,
|
|
class: "w-full pl-12 pr-12 py-3 rounded-full bg-base-200/80 backdrop-blur border border-base-300 focus:outline-none focus:ring-2 focus:ring-primary/50 transition",
|
|
placeholder: t("text.search_cities"),
|
|
autocomplete: "off",
|
|
data: {
|
|
action: "input->search#submit",
|
|
search_target: "input"
|
|
} %>
|
|
|
|
<!-- 右侧按钮区域（清除按钮或加载动画） -->
|
|
<!-- 更简单的环形 loading 图标版本 -->
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-4 z-10"
|
|
data-search-target="statusIcon">
|
|
<% if params[:query].present? %>
|
|
<%= link_to cities_path,
|
|
class: "text-base-content/50 hover:text-base-content transition",
|
|
data: { search_target: "clearButton" } do %>
|
|
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
<% end %>
|
|
<% end %>
|
|
<!-- 简单的环形 loading -->
|
|
<div class="hidden" data-search-target="spinner">
|
|
<div class="w-5 h-5 border-2 border-base-content/20 border-t-base-content/70 rounded-full animate-spin"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<%= f.hidden_field :region, value: params[:region] if params[:region] %>
|
|
<%= f.hidden_field :country, value: params[:country] if params[:country] %>
|
|
<% end %>
|
|
</div> |