[*] refactor

heng30 · heng30 · commit 768d67108caa · 2026-04-03T11:04:53.000+08:00
diff --git a/todo.md b/todo.md
@@ -1,6 +1,13 @@
 ## 问题
-- moving filter参数面板暂停时会恢复默认值
 - subtitle需要重新设计
+
+- font 列表toggle实现逻辑过于复杂
+- font 搜索功能实现有问题，列表条目丢失
+- 刷新后导入条目丢失
+- fly in滤镜应该重构成和transform一样的模式
+- chorme-key 路径参数面板无法显示
+
+- moving filter参数面板暂停时会恢复默认值
 - color picker弹出时需要设置现有的颜色
 
 ## 待验证
diff --git a/wayshot/src/logic/video_editor/font.rs b/wayshot/src/logic/video_editor/font.rs
@@ -1,18 +1,20 @@
 use crate::{
     db::{FONT_TABLE as DB_TABLE, FontEntry},
-    db_add, db_remove_all, db_select_all, db_update,
+    db_select_all, db_update,
     logic::{toast, tr::tr, video_editor::playlist::picker_files},
     logic_cb,
     slint_generatedAppWindow::{AppWindow, FontEntry as UIFontEntry},
 };
-use slint::{ComponentHandle, Model, VecModel, Weak};
+use once_cell::sync::Lazy;
+use slint::{ComponentHandle, Model, SharedString, VecModel, Weak};
 use std::{collections::HashSet, path::PathBuf};
-use video_editor::font::get_font_family_from_file;
+use tokio::sync::RwLock;
+use video_editor::font::{get_font_family_from_file, get_fonts_info};
 
-db_add!(DB_TABLE, FontEntry);
-db_remove_all!(DB_TABLE);
 db_update!(DB_TABLE, FontEntry);
 
+static FONT_CACHE: Lazy<RwLock<Vec<FontEntry>>> = Lazy::new(|| RwLock::new(Vec::new()));
+
 #[macro_export]
 macro_rules! store_font_entries {
     ($ui:expr) => {
@@ -30,6 +32,7 @@ pub fn init(ui: &AppWindow) {
     logic_cb!(init_font_dialog, ui);
     logic_cb!(refresh_font_entries, ui);
     logic_cb!(import_font_files, ui);
+    logic_cb!(search_font_entries, ui, text);
     logic_cb!(toggle_font_marked, ui, index);
 }
 
@@ -40,7 +43,7 @@ fn init_font_dialog(ui: &AppWindow) {
         if db_fonts.is_empty() {
             refresh_font_entries_impl(ui_weak.clone()).await;
         } else {
-            sync_fonts_to_ui(ui_weak, db_fonts);
+            sync_fonts_to_ui(ui_weak, db_fonts).await;
         }
     });
 }
@@ -66,7 +69,7 @@ async fn refresh_font_entries_impl(ui_weak: Weak<AppWindow>) {
         log::warn!("Failed to clear font table: {}", e);
     }
 
-    let system_fonts = match video_editor::font::get_fonts_info() {
+    let system_fonts = match get_fonts_info() {
         Ok(fonts) => fonts,
         Err(e) => {
             toast::async_toast_warn(ui_weak.clone(), format!("Failed to get fonts: {}", e));
@@ -94,10 +97,13 @@ async fn refresh_font_entries_impl(ui_weak: Weak<AppWindow>) {
         font_entries.push(entry);
     }
 
-    sync_fonts_to_ui(ui_weak, font_entries);
+    sync_fonts_to_ui(ui_weak, font_entries).await;
 }
 
-fn sync_fonts_to_ui(ui_weak: Weak<AppWindow>, mut fonts: Vec<FontEntry>) {
+async fn sync_fonts_to_ui(ui_weak: Weak<AppWindow>, mut fonts: Vec<FontEntry>) {
+    let fonts_for_cache = fonts.clone();
+    *FONT_CACHE.write().await = fonts_for_cache;
+
     fonts.sort_by(|a, b| b.marked.cmp(&a.marked));
     let ui_fonts: Vec<UIFontEntry> = fonts.into_iter().map(|f| f.into()).collect();
 
@@ -119,23 +125,37 @@ fn import_font_files(ui: &AppWindow) {
             None => return,
         };
 
+        let mut imported_fonts: Vec<UIFontEntry> = Vec::new();
         for file_path in file_paths {
-            import_font_to_db(ui_weak.clone(), file_path).await;
+            if let Some(font_entry) = import_font_to_db(ui_weak.clone(), file_path).await {
+                imported_fonts.push(font_entry.into());
+            }
         }
 
-        refresh_font_entries_impl(ui_weak).await;
+        if !imported_fonts.is_empty() {
+            let mut cache = FONT_CACHE.write().await;
+            for font in &imported_fonts {
+                cache.push(font.clone().into());
+            }
+
+            _ = ui_weak.upgrade_in_event_loop(move |ui| {
+                let mut fonts: Vec<UIFontEntry> = store_font_entries!(ui).iter().collect();
+                fonts.splice(0..0, imported_fonts);
+                store_font_entries!(ui).set_vec(fonts);
+            });
+        }
     });
 }
 
-async fn import_font_to_db(ui_weak: Weak<AppWindow>, file_path: PathBuf) {
+async fn import_font_to_db(ui_weak: Weak<AppWindow>, file_path: PathBuf) -> Option<FontEntry> {
     let family = match get_font_family_from_file(&file_path) {
         Ok(f) => f,
         Err(e) => {
             toast::async_toast_warn(
                 ui_weak.clone(),
                 format!("Failed to read font file {}: {}", file_path.display(), e),
             );
-            return;
+            return None;
         }
     };
 
@@ -154,10 +174,11 @@ async fn import_font_to_db(ui_weak: Weak<AppWindow>, file_path: PathBuf) {
             ui_weak.clone(),
             format!("Failed to import font {}: {}", entry.family, e),
         );
-        return;
+        return None;
     }
 
     toast::async_toast_success(ui_weak.clone(), format!("Imported font: {}", entry.family));
+    Some(entry)
 }
 
 fn toggle_font_marked(ui: &AppWindow, index: i32) {
@@ -175,3 +196,24 @@ fn toggle_font_marked(ui: &AppWindow, index: i32) {
         store_font_entries!(ui).set_vec(fonts);
     }
 }
+
+fn search_font_entries(ui: &AppWindow, text: SharedString) {
+    let ui_weak = ui.as_weak();
+    let text = text.to_string();
+
+    tokio::spawn(async move {
+        let cache = FONT_CACHE.read().await.clone();
+
+        let filtered = if text.is_empty() {
+            cache
+        } else {
+            let keyword = text.to_lowercase();
+            cache
+                .into_iter()
+                .filter(|f| f.family.to_lowercase().contains(&keyword))
+                .collect()
+        };
+
+        sync_fonts_to_ui(ui_weak, filtered).await;
+    });
+}
diff --git a/wayshot/ui/logic.slint b/wayshot/ui/logic.slint
@@ -144,6 +144,7 @@ export global Logic {
     callback init-font-dialog();
     callback refresh-font-entries();
     callback import-font-files();
+    callback search-font-entries(text: string);
     callback toggle-font-marked(index: int);
 
     callback init-sources-dialog();
diff --git a/wayshot/ui/panel/desktop/font-dialog.slint b/wayshot/ui/panel/desktop/font-dialog.slint
@@ -12,12 +12,15 @@ import {
     IconBtn,
     MovingDialog,
     NoDataImg,
+    CenterLayout,
+    LineInput,
 } from "../../base/widgets.slint";
-import { CenterLayout } from "../../base/center-layout.slint";
 
 component HeadBar inherits HorizontalLayout {
     alignment: end;
 
+    private property <bool> show-search-bar;
+
     Rectangle {
         width: hbox.preferred-width;
         border-radius: self.height / 2;
@@ -31,9 +34,46 @@ component HeadBar inherits HorizontalLayout {
             padding-left: Theme.padding * 4;
             padding-right: Theme.padding * 4;
 
+            if show-search-bar: LineInput {
+                width: Theme.default-font-size * 16;
+                vpadding: Theme.padding / 2;
+
+                edited => {
+                    Logic.search-font-entries(self.text);
+                }
+
+                key-pressed(event) => {
+                    if (event.text == Key.Escape) {
+                        Logic.search-font-entries("");
+                        show-search-bar = false;
+                    }
+                }
+
+                Timer {
+                    interval: 200ms;
+                    running: true;
+
+                    triggered() => {
+                        parent.focus();
+                        self.running = false;
+                    }
+                }
+            }
+
             HorizontalLayout {
                 spacing: Theme.spacing * 4;
 
+                IconBtn {
+                    is-show-tip: true;
+                    tip: Logic.tr("search");
+                    icon: Icons.search-light;
+                    hover-color: Store.setting-preference.is-dark ? Theme.secondary-background.darker(50%) : Theme.secondary-background.darker(5%);
+
+                    clicked => {
+                        show-search-bar = !show-search-bar;
+                    }
+                }
+
                 IconBtn {
                     is-show-tip: true;
                     tip: Logic.tr("refresh");
@@ -63,16 +103,18 @@ component HeadBar inherits HorizontalLayout {
 
 component FontItem inherits Rectangle {
     in property <int> index;
-    in property <FontEntry> font-info;
+    in property <FontEntry> entry;
+    in-out property <length> family-width;
+    out property <length> family-preferred-width <=> family-lb.preferred-width;
 
     background: ta.has-hover ? Theme.checked-background : (Math.mod(index, 2) == 0 ? Theme.table-item-first : Theme.table-item-second);
 
     ta := TouchArea {
         mouse-cursor: MouseCursor.pointer;
 
         clicked => {
-            Store.selected-font-entry = font-info;
-            VEFilter.selected-font-path = font-info.path;
+            Store.selected-font-entry = entry;
+            VEFilter.selected-font-path = entry.path;
             Store.is-show-font-dialog = false;
         }
     }
@@ -82,38 +124,41 @@ component FontItem inherits Rectangle {
         padding: Theme.padding * 2;
         spacing: Theme.spacing * 4;
 
+        Label {
+            text: index + 1;
+            color: Theme.secondary-text-color;
+        }
+
         IconBtn {
             icon: Icons.star-round-fill;
             icon-size: Theme.icon-size;
-            colorize: font-info.marked ? Theme.warning-color : Theme.icon-color;
+            colorize: entry.marked ? Theme.warning-color : Theme.icon-color;
             hover-color: mod(index, 2) == 0 ? Theme.table-item-second : Theme.table-item-first;
 
             clicked => {
                 Logic.toggle-font-marked(index);
             }
         }
 
-        Label {
-            text: font-info.family;
+        family-lb := Label {
+            text: entry.family;
             font-weight: Theme.bold-font-weight;
-            horizontal-alignment: left;
-            overflow: elide;
+            width: root.family-width;
         }
 
         Label {
-            text: font-info.path;
+            text: entry.path;
             font-size: Theme.default-font-size * 0.8;
             color: Theme.secondary-text-color;
             horizontal-alignment: left;
-            overflow: elide;
         }
     }
 }
 
 export component FontDialog inherits MovingDialog {
     title: Logic.tr("Font");
     icon: Icons.font-light;
-    header-width: Theme.default-font-size * 48;
+    header-width: Theme.default-font-size * 56;
 
     init => {
         Logic.init-font-dialog();
@@ -146,14 +191,23 @@ export component FontDialog inherits MovingDialog {
                 x: parent.border-width;
                 y: parent.border-width;
                 width: parent.width - parent.border-width * 2;
+                viewport-width: vbox.preferred-width;
+                viewport-height: vbox.preferred-height;
 
-                if Store.font-entries.length > 0: VerticalLayout {
+                vbox := VerticalLayout {
                     alignment: start;
 
-                    for font-info[index] in Store.font-entries: FontItem {
+                    private property <length> font-item-max-family-width;
+
+                    for entry[index] in Store.font-entries: FontItem {
                         index: index;
-                        font-info: font-info;
+                        entry: entry;
                         height: font-item-height;
+                        family-width: parent.font-item-max-family-width;
+
+                        init => {
+                            parent.font-item-max-family-width = max(parent.font-item-max-family-width, self.family-preferred-width);
+                        }
                     }
                 }
             }
diff --git a/wayshot/ui/panel/desktop/video-editor/preview/preview-locate-layer.slint b/wayshot/ui/panel/desktop/video-editor/preview/preview-locate-layer.slint
@@ -34,7 +34,11 @@ export component PreviewLocateLayer inherits Rectangle {
     }
 
     init => {
+        debug("xxxxxxxxxxxxxxxxxxxxxx", VEFilter.selected-filter.detail);
+
         if (VEFilter.selected-filter.name == "fly in") {
+            debug("yyyyyyyyyyyyyyyyyyyyyyy", VEFilter.selected-filter.detail);
+
             fly-in-config = VEFilter.from-fly-in-json(VEFilter.selected-filter.detail);
             root.move-to-x = fly-in-config.move-to-x;
             root.move-to-y = fly-in-config.move-to-y;
@@ -102,4 +106,5 @@ export component PreviewLocateLayer inherits Rectangle {
             root.move-to-y = (end-handle.y + self.height / 2) / root.height;
         }
     }
-}
+}
+
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/image.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/image.slint
@@ -36,7 +36,7 @@ export component FilterImageDetail inherits Rectangle {
         }
     }
 
-    if selected-filter.name.to-lowercase() == "chroma-key": ChromaKey {
+    if selected-filter.name.to-lowercase() == "chroma key": ChromaKey {
         index: index;
         width: parent.width;
         selected-filter: selected-filter;
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video.slint
@@ -36,7 +36,7 @@ export component FilterVideoDetail inherits Rectangle {
         }
     }
 
-    if selected-filter.name.to-lowercase() == "chroma-key": ChromaKey {
+    if selected-filter.name.to-lowercase() == "chroma key": ChromaKey {
         index: index;
         width: parent.width;
         selected-filter: selected-filter;
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/chroma-key.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/chroma-key.slint
@@ -132,6 +132,7 @@ export component ChromaKey inherits Rectangle {
                 border-width: 1px;
 
                 clicked => {
+                    Store.video-editor-color-picker-color = Util.color-picker-hex-color(self.text);
                     Store.video-editor-color-picker-toggle-flag = !Store.video-editor-color-picker-toggle-flag;
                 }
             }
diff --git a/wayshot/ui/panel/desktop/video-editor/video-editor.slint b/wayshot/ui/panel/desktop/video-editor/video-editor.slint
@@ -334,6 +334,7 @@ export component VideoEditor inherits Rectangle {
     color-picker := ColorPickerPopup {
         x: (root.width - self.width) / 2;
         y: (root.height - self.height) / 4;
+        selected-color <=> Store.video-editor-color-picker-color;
 
         confirmed(color) => {
             Store.video-editor-color-picker-color = Util.color-picker-hex-color(color);
diff --git a/wayshot/ui/store.slint b/wayshot/ui/store.slint

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,11 @@ export component PreviewLocateLayer inherits Rectangle {`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`init => {`
	`37`	`+ debug("xxxxxxxxxxxxxxxxxxxxxx", VEFilter.selected-filter.detail);`
	`38`	`+`
`37`	`39`	`if (VEFilter.selected-filter.name == "fly in") {`
	`40`	`+ debug("yyyyyyyyyyyyyyyyyyyyyyy", VEFilter.selected-filter.detail);`
	`41`	`+`
`38`	`42`	`fly-in-config = VEFilter.from-fly-in-json(VEFilter.selected-filter.detail);`
`39`	`43`	`root.move-to-x = fly-in-config.move-to-x;`
`40`	`44`	`root.move-to-y = fly-in-config.move-to-y;`
`@@ -102,4 +106,5 @@ export component PreviewLocateLayer inherits Rectangle {`
`102`	`106`	`root.move-to-y = (end-handle.y + self.height / 2) / root.height;`
`103`	`107`	`}`
`104`	`108`	`}`
`105`		`-}`
	`109`	`+}`
	`110`	`+`
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ export component FilterImageDetail inherits Rectangle {`
`36`	`36`	`}`
`37`	`37`	`}`
`38`	`38`
`39`		`- if selected-filter.name.to-lowercase() == "chroma-key": ChromaKey {`
	`39`	`+ if selected-filter.name.to-lowercase() == "chroma key": ChromaKey {`
`40`	`40`	`index: index;`
`41`	`41`	`width: parent.width;`
`42`	`42`	`selected-filter: selected-filter;`
Original file line number	Diff line number	Diff line change
`@@ -132,6 +132,7 @@ export component ChromaKey inherits Rectangle {`
`132`	`132`	`border-width: 1px;`
`133`	`133`
`134`	`134`	`clicked => {`
	`135`	`+ Store.video-editor-color-picker-color = Util.color-picker-hex-color(self.text);`
`135`	`136`	`Store.video-editor-color-picker-toggle-flag = !Store.video-editor-color-picker-toggle-flag;`
`136`	`137`	`}`
`137`	`138`	`}`