优化launcher的删除体验

Author: Silwings-git

components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
   }

src-tauri/Cargo.lock

@@ -37,3 +37,4 @@ sqlx = { version = "0.5", features = ["runtime-tokio-rustls", "sqlite"] }
 tokio = { version = "1.43.0", features = ["full"] }
 rand = "0.8.5"
 lazy_static = "1.5.0"
+itertools = "0.14.0"

src-tauri/Cargo.toml

@@ -1,13 +1,14 @@
 use anyhow::Result;
 use rand::{Rng, distributions::Alphanumeric};
+use serde::Deserialize;
 use tauri::{AppHandle, State};
 use tracing::info;
 
 use crate::{
     DatabaseManager,
     db::{
         launcher,
-        launcher_resource::{self, LauncherResource},
+        launcher_resource::{self, CreateResourceParam, LauncherResource},
     },
     error::OneClickLaunchError,
     events::{
@@ -27,7 +28,9 @@ pub async fn craete_launcher(
     db: State<'_, DatabaseManager>,
     name: Option<String>,
 ) -> Result<i64, OneClickLaunchError> {
-    let name = name.unwrap_or_else(generate_default_launcher_name);
+    let name = name
+        .filter(|s| !s.is_empty())
+        .unwrap_or_else(generate_default_launcher_name);
     let launcher_id = launcher::create(&db.pool, &name, None).await?;
 
     let _ = EventDispatcher::<LauncherBasicInfoUpdated>::send_event(
@@ -229,6 +232,35 @@ pub async fn add_resource(
     Ok(resource_id)
 }
 
+/// 为启动器添加资源
+#[tauri::command]
+pub async fn add_resources(
+    db: State<'_, DatabaseManager>,
+    launcher_id: i64,
+    resources: Vec<ResourceParam>,
+) -> Result<(), OneClickLaunchError> {
+    let crps = resources
+        .into_iter()
+        .map(|r| CreateResourceParam {
+            name: r
+                .name
+                .filter(|s| !s.is_empty())
+                .unwrap_or_else(|| generate_name(r.path.as_str())),
+            path: r.path,
+        })
+        .collect::<Vec<CreateResourceParam>>();
+
+    launcher_resource::create_resources(&db.pool, launcher_id, &crps).await?;
+
+    Ok(())
+}
+
+#[derive(Deserialize, Debug)]
+pub struct ResourceParam {
+    pub name: Option<String>,
+    pub path: String,
+}
+
 fn generate_name(path: &str) -> String {
     if path.starts_with("http") {
         return path.to_string();

src-tauri/src/api/launcher_api.rs

@@ -1,4 +1,5 @@
 use anyhow::Result;
+use itertools::Itertools;
 use sqlx::{Executor, Sqlite};
 
 /// 使用FromRow宏把数据库中读取出来的数据转换成LauncherResource结构
@@ -11,6 +12,11 @@ pub struct LauncherResource {
     pub path: String,
 }
 
+pub struct CreateResourceParam {
+    pub name: String,
+    pub path: String,
+}
+
 pub async fn initialize<'a, E>(executor: E) -> Result<()>
 where
     E: Executor<'a, Database = Sqlite>,
@@ -43,6 +49,29 @@ where
     Ok(id)
 }
 
+// 批量新增
+pub async fn create_resources<'a, E>(
+    executor: E,
+    launcher_id: i64,
+    resources: &[CreateResourceParam],
+) -> Result<()>
+where
+    E: Executor<'a, Database = Sqlite>,
+{
+    let mut query = String::from("INSERT INTO launcher_resource (launcher_id,name,path) VALUES ");
+
+    let values = resources
+        .iter()
+        .map(|r| format!(r#"('{}','{}','{}')"#, launcher_id, r.name, r.path))
+        .join(",");
+
+    query.push_str(values.as_str());
+
+    sqlx::query(&query).execute(executor).await?;
+
+    Ok(())
+}
+
 // 修改名称
 pub async fn modify_name<'a, E>(executor: E, resource_id: i64, name: &str) -> Result<()>
 where

src-tauri/src/db/launcher_resource.rs

@@ -174,6 +174,7 @@ pub async fn run() -> Result<()> {
             launcher_api::delete_launcher,
             launcher_api::modify_launcher_sort,
             launcher_api::add_resource,
+            launcher_api::add_resources,
             launcher_api::modify_resource_name,
             launcher_api::delete_resource,
             launcher_api::query_launchers,
@@ -298,17 +299,16 @@ fn handle_window_event(window: &tauri::Window, event: &tauri::WindowEvent) {
             }
         }
         tauri::WindowEvent::DragDrop(drag_drop_event) => {
-            // todo 优化
-            // 发送一个DragDropResource的事件,让前端打来导入框
-            if let DragDropEvent::Drop { paths, .. } = drag_drop_event {
-                if !paths.is_empty() {
+            match drag_drop_event {
+                DragDropEvent::Drop { paths, .. } if !paths.is_empty() => {
                     let _ = EventDispatcher::<DragDropResource>::send_event(
                         window.app_handle(),
                         DragDropResourcePaylod {
                             paths: paths.clone(),
                         },
                     );
                 }
+                _ => {}
             }
         }
         tauri::WindowEvent::Resized(physical_size) => {

src-tauri/src/lib.rs

@@ -20,10 +20,10 @@
             <div style="display: flex;align-items: center; gap: 10px;">
 
                 <el-tooltip v-if="isNewLauncher" content="取消新建" placement="top">
-                    <Close theme="outline" size="20" fill="#333" @click="handleNewLauncher" />
+                    <Close theme="outline" size="20" fill="#a19797" @click="handleNewLauncher" />
                 </el-tooltip>
                 <el-tooltip v-else content="新建编组" placement="top">
-                    <Add theme="outline" size="20" fill="#333" @click="handleNewLauncher" />
+                    <Add theme="outline" size="20" fill="#a19797" @click="handleNewLauncher" />
                 </el-tooltip>
 
                 <el-select v-if="!isNewLauncher" append-to=".home" v-model="targetLauncher" style="width: 240px;"
@@ -35,7 +35,6 @@
             </div>
         </div>
 
-        <!-- 按钮 -->
         <div style="display: flex; justify-content: flex-end;gap:10px;align-items: center; margin-top: 20px;">
             <button class="cancel-button" @click="cancelDragDrop">取消</button>
             <button class="confirm-button" @click="confirmDragDrop">确定</button>
@@ -66,7 +65,7 @@ export default {
         const theme = inject('theme');
         const selectPathList = ref(props.pathList);
         const launchers = ref([]);
-        const targetLauncher = ref({});
+        const targetLauncher = ref();
         const isNewLauncher = ref(false);
         const newLauncherName = ref("");
 
@@ -77,7 +76,9 @@ export default {
 
         const initTargetLauncher = async () => {
             if (launchers.value.length > 0) {
-                targetLauncher.value = launchers.value[0];
+                targetLauncher.value = launchers.value[0].id;
+            } else if (launchers.value.length == 0) {
+                isNewLauncher.value = true;
             }
         };
 
@@ -88,18 +89,25 @@ export default {
 
         const cancelDragDrop = async () => {
             emit("cancel_drag_drop");
-        } 
-        
+        }
+
         const confirmDragDrop = async () => {
-            // todo 
-            console.log("保存")
+            let launcherId;
+            if (isNewLauncher.value) {
+                launcherId = await invoke("craete_launcher", { "name": newLauncherName.value });
+            } else {
+                launcherId = targetLauncher.value;
+            }
+
+            await invoke("add_resources", { "launcherId": launcherId, "resources": selectPathList.value.map(path => ({ "path": path })) });
+
             emit("confirm_drag_drop");
         }
 
-        // 在组件挂载时加载主题
         onMounted(() => {
-            queryLaunchers();
-            initTargetLauncher();
+            queryLaunchers().then(() => {
+                initTargetLauncher();
+            })
         });
 
         return {
@@ -142,12 +150,13 @@ label {
 
 button {
     padding: 10px 20px;
-    background-color: #409eff;;
+    background-color: #409eff;
+    ;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    border-color: #409eff; 
+    border-color: #409eff;
 }
 
 button:hover {
@@ -189,11 +198,12 @@ input[type="checkbox"] {
 
 .confirm-button {
     background-color: #409eff;
-    border-color: #409eff; 
+    border-color: #409eff;
     color: #fff;
 }
+
 .confirm-button:hover {
-    background-color: #66b1ff; 
+    background-color: #66b1ff;
     border-color: #66b1ff;
 }
 </style>

src/DragDropResource.vue

@@ -23,18 +23,18 @@
         :class="['launcher-lite-container-item', theme]" @launcher-updated="refreshLaunchers"
         @launcher-moved="moveLauncher" />
     </div>
-    <!-- 悬浮框 -->
+    <!-- 设置 -->
     <div v-if="showSetting" :class="['modal-overlay', theme]" @click="closeSetting">
       <div :class="['modal-content', theme]" @click.stop>
         <span class="close-btn" @click="closeSetting">&times;</span>
         <settings />
       </div>
     </div>
-    <!-- 悬浮框 -->
+    <!-- 拖拽文件 -->
     <div v-if="dragDropResourcePaths.length > 0" :class="['modal-overlay', theme]" @click="closeSetting">
       <div :class="['modal-content', theme]" @click.stop>
         <dragDropResource :pathList="dragDropResourcePaths" @cancel_drag_drop="cleanDragDropResourcePaths"
-          @confirm_drag_drop="cleanDragDropResourcePaths" />
+          @confirm_drag_drop="confirmDragDrop" />
       </div>
     </div>
   </div>
@@ -134,7 +134,12 @@ export default {
     };
 
     const cleanDragDropResourcePaths = async () => {
-      dragDropResourcePaths.value = [];
+      dragDropResourcePaths.value.splice(0, dragDropResourcePaths.value.length);
+    };
+
+    const confirmDragDrop = async () => {
+      dragDropResourcePaths.value.splice(0, dragDropResourcePaths.value.length);
+      await refreshLaunchers();
     };
 
     // 在组件挂载时加载主题
@@ -159,7 +164,8 @@ export default {
       openSetting,
       closeSetting,
       dragDropResourcePaths,
-      cleanDragDropResourcePaths
+      cleanDragDropResourcePaths,
+      confirmDragDrop
     };
   }
 };