[Ken709-mp4]

Summary

This pull request implements an Apple‑style Liquid Glass visual redesign for the TIOL photo manager frontend. Changes include moving rating filters into dropdown panels, refactoring search‑bar controls into segmented buttons, adding the new Liquid Glass theme with custom menu background‑color support, and fixing locale switching for dynamically‑rendered content on application startup.

Major Changes

1. Filter Panel Refactoring

• Removed the rating‑filter <select> element from the search bar and relocated rating controls inside the #color‑filter dropdown panel.
• Rating filtering is now implemented as 0‑5 star checkboxes supporting multi‑selection, reusing the existing activeRatings Set logic.
• The rating filter within the Rejects view has been updated to use identical checkboxes matching the photo menu, placed inside #reject‑cond‑panel.
• Removed the deprecated ratingFilterRejects dropdown and legacy minRating logic; all rating filtering now consistently uses activeRatings.

2. Liquid Glass Visual Style

• Applied the .glass Liquid Glass styling class across components: #color‑filter, dialog modals, preview panels, selection bars, sidebars, search bar, photo cards, toolbars and status bar.
• Implemented global gradient backgrounds, backdrop‑filter frosted‑glass effects, semi‑transparent borders, and hover/active state transition animations.
• Added fade‑in and scale entrance animations. The .fx‑anim‑off utility class disables all animations.

3. Settings Page Enhancements

• Added the new Liquid Glass theme option alongside Dark and Light themes.
• Introduced a menu background‑color color picker. Persistence is handled via Tauri invoke("set_setting") / invoke("get_setting").
• Adjusted left margin and maximum width for .settings to eliminate edge‑clipping layout issues.

4. Search‑Bar Controls

• Replaced the semantic/tag search‑mode <select> dropdown with capsule‑style segmented buttons: .searchbar__mode‑segment / .searchbar__mode‑btn.
• Added horizontal padding to the main .view content container to prevent content from touching window edges.

5. Tag‑Editing Dialogs

• Reduced opacity for tag‑edit, confirmation and rating modals to strengthen the glass‑morphism aesthetic.

6. Internationalization (i18n)

• Added and synchronized new locale keys settings.themeLiquidGlass, settings.menuBgColor in:
  • src/locales/zh‑CN.json
  • src/locales/en‑US.json
  • src/locales/messages.js (regenerated by running node scripts/gen‑messages.js)
• Fixed locale rendering bug for dynamic content on startup:
  • Functions renderRejectConds(), renderFilterDots(), renderRejectRatings() previously hard‑coded to en‑US on module initialization.
  • After initI18n() loads persisted user language and runs applyStaticI18n(), dynamic panels are re‑rendered, ensuring correct localization immediately after launch.

Testing

• Multiple npm run tauri dev test runs confirm the application launches normally and all UI changes function correctly.
• The observed libonnxruntime.dylib missing‑library panic for the AI engine is unrelated to these frontend modifications.

Commit Log

• ab38298 feat: liquid‑glass UI redesign — rating filter moved into menu, unified glass panels, custom menu background color
• d4ec13e fix(filter‑panel): keep dropdown open during selection, add explicit close × button
• 67293cc feat: liquid‑glass redesign v2 — gradients & animations, remove panel close ×
• 9ddba34 feat: searchbar segmented mode buttons + main content padding
• 81997b9 feat: settings layout padding, transparent edit dialogs, rejects rating checkboxes
• 983750a fix(i18n): re‑render dynamic locale content after startup language initialization

摘要

本次 PR 对 TIOL 照片管理器的前端界面进行了一轮 Apple 风格的「液态玻璃」重设计：将星级筛选移入下拉面板、统一搜索栏控件为分段按钮、新增 Liquid Glass 主题与菜单背景色自定义，并修复了启动时动态内容的语言切换问题。

主要改动

1. 筛选面板重构

• 把搜索栏中的星级筛选 <select> 移除，移入 #color-filter 下拉面板。
• 星级筛选改为 0–5 星复选框，支持多选，逻辑沿用 activeRatings Set。
• 废片（Rejects）视图的星级筛选也改为与照片菜单一致的复选框，放置在 #reject-cond-panel 内。
• 移除废弃的 ratingFilterRejects 下拉框与 minRating 逻辑，统一使用 activeRatings。

2. 液态玻璃视觉风格

• 为 #color-filter、对话框、预览面板、选择栏、侧边栏、搜索栏、照片卡片、工具栏、状态栏等逐步应用 .glass 液态玻璃样式。
• 引入全局渐变背景、毛玻璃（backdrop-filter）、半透明边框、悬停/激活过渡动画。
• 添加淡入、缩放等进入动画（fx-anim-off 类可关闭动画）。

3. 设置页增强

• 在「主题」选项中新增 Liquid Glass，与 Dark / Light 并列。
• 新增 菜单背景色 取色器，通过 Tauri invoke("set_setting") / invoke("get_setting") 持久化到设置键。
• 调整设置页 .settings 的左边距与最大宽度，避免左侧贴边。

4. 搜索栏控件

• 将语义/标签搜索模式的 <select> 替换为分段胶囊按钮（.searchbar__mode-segment / .searchbar__mode-btn）。
• 为主内容区 .view 增加左右内边距，避免内容贴到窗口边缘。

5. 编辑标签菜单

• 降低编辑标签 / 确认 / 评分等对话框的不透明度，使玻璃感更明显。

6. 国际化

• 新增并同步 settings.themeLiquidGlass、settings.menuBgColor 等 key 到：
  • src/locales/zh-CN.json
  • src/locales/en-US.json
  • src/locales/messages.js（已运行 node scripts/gen-messages.js 重新生成）
• 修复启动时动态生成内容的语言问题：
  • renderRejectConds()、renderFilterDots()、renderRejectRatings() 在模块加载时使用默认 en-US。
  • 现在在 initI18n() 解析出保存的语言并调用 applyStaticI18n() 后，重新渲染这些动态面板，确保启动即显示正确语言。

测试

• 已多次运行 npm run tauri dev，应用窗口正常打开，UI 改动生效。
• 运行时会报 libonnxruntime.dylib 缺失导致的 AI 引擎 panic，与本次前端改动无关。

提交记录

• ab38298 feat: liquid-glass UI redesign — rating filter in menu, unified glass panels, custom menu bg color
• d4ec13e fix(filter-panel): keep dropdown open while selecting, add explicit close ×
• 67293cc feat: liquid-glass redesign v2 — gradients, animations, remove filter close ×
• 9ddba34 feat: searchbar segmented mode buttons + content padding
• 81997b9 feat: settings padding, transparent edit dialog, rejects rating checkboxes
• 983750a fix(i18n): re-render dynamic locale content after startup language load