feat: 添加卸载确认模态框，支持卸载进度显示

electron/main/backend/install-manager.ts

@@ -301,7 +301,15 @@ ipcMain.on('remove-installed', async (_event, pkgname: string) => {
   let output = '';
   
   child.stdout.on('data', (data) => {
-    output += data.toString();
+    const chunk = data.toString();
+    output += chunk;
+    webContents.send('remove-progress', chunk);
+  });
+
+  child.stderr.on('data', (data) => {
+    const chunk = data.toString();
+    output += chunk;
+    webContents.send('remove-progress', chunk);
   });
 
   child.on('close', (code) => {

src/App.vue

@@ -14,7 +14,7 @@
     </main>
 
     <AppDetailModal data-app-modal="detail" :show="showModal" :app="currentApp" :screenshots="screenshots"
-      :isinstalled="currentAppIsInstalled" @close="closeDetail" @install="handleInstall" @remove="handleRemove"
+      :isinstalled="currentAppIsInstalled" @close="closeDetail" @install="handleInstall" @remove="requestUninstallFromDetail"
       @open-preview="openScreenPreview" />
 
     <ScreenPreview :show="showPreview" :screenshots="screenshots" :current-screen-index="currentScreenIndex"
@@ -36,6 +36,9 @@
       :error="updateError" :has-selected="hasSelectedUpgrades" @close="closeUpdateModal"
       @refresh="refreshUpgradableApps" @toggle-all="toggleAllUpgrades"
       @upgrade-selected="upgradeSelectedApps" @upgrade-one="upgradeSingleApp" />
+
+    <UninstallConfirmModal :show="showUninstallModal" :app="uninstallTargetApp" @close="closeUninstallModal"
+      @success="onUninstallSuccess" />
   </div>
 </template>
 
@@ -52,9 +55,10 @@ import DownloadQueue from './components/DownloadQueue.vue';
 import DownloadDetail from './components/DownloadDetail.vue';
 import InstalledAppsModal from './components/InstalledAppsModal.vue';
 import UpdateAppsModal from './components/UpdateAppsModal.vue';
+import UninstallConfirmModal from './components/UninstallConfirmModal.vue';
 import { APM_STORE_ARCHITECTURE, APM_STORE_BASE_URL, currentApp, currentAppIsInstalled } from './global/storeConfig';
 import { downloads } from './global/downloadStatus';
-import { handleInstall, handleRetry, handleRemove, handleUpgrade } from './modeuls/processInstall';
+import { handleInstall, handleRetry, handleUpgrade } from './modeuls/processInstall';
 
 const logger = pino();
 
@@ -85,6 +89,8 @@ const showUpdateModal = ref(false);
 const upgradableApps = ref([]);
 const updateLoading = ref(false);
 const updateError = ref('');
+const showUninstallModal = ref(false);
+const uninstallTargetApp = ref(null);
 
 // 计算属性
 const filteredApps = computed(() => {
@@ -293,25 +299,37 @@ const refreshInstalledApps = async () => {
   }
 };
 
-const uninstallInstalledApp = async (app) => {
+const requestUninstall = (app) => {
-  if (!app?.pkgname) return;
+  uninstallTargetApp.value = app;
-  const target = installedApps.value.find(item => item.pkgname === app.pkgname);
+  showUninstallModal.value = true;
-  if (target) target.removing = true;
+};
-  try {
+
-    const result = await window.ipcRenderer.invoke('uninstall-installed', app.pkgname);
+const requestUninstallFromDetail = () => {
-    if (!result?.success) {
+  if (currentApp.value) {
-      installedError.value = result?.message || '卸载失败';
+    requestUninstall(currentApp.value);
-    } else {
-      installedApps.value = installedApps.value.filter(item => item.pkgname !== app.pkgname);
-    }
-  } catch (error) {
-    installedError.value = error?.message || '卸载失败';
-  } finally {
-    const restore = installedApps.value.find(item => item.pkgname === app.pkgname);
-    if (restore) restore.removing = false;
   }
 };
 
+const closeUninstallModal = () => {
+  showUninstallModal.value = false;
+  uninstallTargetApp.value = null;
+};
+
+const onUninstallSuccess = () => {
+  // 刷新已安装列表（如果在显示）
+  if (showInstalledModal.value) {
+    refreshInstalledApps();
+  }
+  // 更新当前详情页状态（如果在显示）
+  if (showModal.value && currentApp.value) {
+    checkAppInstalled(currentApp.value);
+  }
+};
+
+const uninstallInstalledApp = (app) => {
+  requestUninstall(app);
+};
+
 const openApmStoreUrl = (url, { fallbackText } = {}) => {
   try {
     window.location.href = url;

src/components/UninstallConfirmModal.vue

@@ -0,0 +1,170 @@
+<template>
+  <Transition enter-active-class="duration-200 ease-out" enter-from-class="opacity-0 scale-95"
+    enter-to-class="opacity-100 scale-100" leave-active-class="duration-150 ease-in"
+    leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
+    <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/70 p-4"
+      @click.self="handleClose">
+      <div class="relative w-full max-w-lg overflow-hidden rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900">
+        
+        <div class="mb-6 flex items-center gap-4">
+          <div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-rose-100 to-rose-50 shadow-inner dark:from-rose-900/30 dark:to-rose-800/20">
+            <i class="fas fa-trash-alt text-2xl text-rose-500"></i>
+          </div>
+          <div>
+            <h3 class="text-xl font-bold text-slate-900 dark:text-white">卸载应用</h3>
+            <p class="text-sm text-slate-500 dark:text-slate-400">
+              您确定要卸载 <span class="font-semibold text-slate-700 dark:text-slate-200">{{ appName }}</span> 吗？
+            </p>
+            <p class="text-xs text-slate-400 mt-1">{{ appPkg }}</p>
+          </div>
+        </div>
+
+        <!-- Terminal Output -->
+        <div v-if="uninstalling || completed" 
+          class="mb-6 max-h-48 overflow-y-auto rounded-xl border border-slate-200/50 bg-slate-900 p-3 font-mono text-xs text-slate-300 shadow-inner scrollbar-muted dark:border-slate-700">
+          <div v-for="(line, index) in logs" :key="index" class="whitespace-pre-wrap break-all">{{ line }}</div>
+          <div ref="logEnd"></div>
+        </div>
+
+        <div v-if="error" class="mb-4 rounded-xl border border-rose-200/50 bg-rose-50 p-3 text-sm text-rose-600 dark:border-rose-900/30 dark:bg-rose-900/20 dark:text-rose-400">
+          {{ error }}
+        </div>
+
+        <div class="flex items-center justify-end gap-3">
+          <button v-if="!uninstalling" type="button"
+            class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+            @click="handleClose">
+            取消
+          </button>
+          
+          <button v-if="!uninstalling && !completed" type="button"
+            class="inline-flex items-center gap-2 rounded-xl bg-rose-500 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-rose-500/30 transition hover:bg-rose-600 hover:-translate-y-0.5"
+            @click="confirmUninstall">
+            <i class="fas fa-trash"></i>
+            确认卸载
+          </button>
+
+          <button v-if="completed" type="button"
+            class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600"
+            @click="handleFinish">
+            完成
+          </button>
+        </div>
+
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { computed, defineProps, defineEmits, ref, watch, nextTick, onUnmounted } from 'vue';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    required: true
+  },
+  app: {
+    type: Object,
+    default: null
+  }
+});
+
+const emit = defineEmits(['close', 'success']);
+
+const uninstalling = ref(false);
+const completed = ref(false);
+const logs = ref([]);
+const error = ref('');
+const logEnd = ref(null);
+
+const appName = computed(() => props.app?.Name || props.app?.name || '未知应用');
+const appPkg = computed(() => props.app?.Pkgname || props.app?.pkgname || '');
+
+const handleClose = () => {
+  if (uninstalling.value && !completed.value) return; // Prevent closing while uninstalling
+  reset();
+  emit('close');
+};
+
+const handleFinish = () => {
+  reset();
+  emit('success'); // Parent should refresh list
+  emit('close'); 
+};
+
+const reset = () => {
+  uninstalling.value = false;
+  completed.value = false;
+  logs.value = [];
+  error.value = '';
+};
+
+const confirmUninstall = () => {
+  if (!appPkg.value) {
+    error.value = '无效的包名';
+    return;
+  }
+  
+  uninstalling.value = true;
+  logs.value = ['正在请求卸载: ' + appPkg.value + '...'];
+  
+  window.ipcRenderer.send('remove-installed', appPkg.value);
+};
+
+// Listeners
+const onProgress = (_event, chunk) => {
+  if (!uninstalling.value) return;
+  // Split by newline but handle chunks correctly? 
+  // For simplicity, just appending lines if chunk contains newlines, or appending to last line?
+  // Let's just push lines. The backend output might come in partial chunks.
+  // A simple way is just to push the chunk and let CSS whitespace-pre-wrap handle it.
+  // But strictly, we might want to split lines.
+  logs.value.push(chunk);
+  scrollToBottom();
+};
+
+const onComplete = (_event, result) => {
+  if (!uninstalling.value) return; // Ignore if not current session
+  
+  const msgObj = typeof result.message === 'string' ? JSON.parse(result.message) : result.message;
+  
+  if (result.success) {
+    logs.value.push('\n[完成] ' + (msgObj.message || '卸载成功'));
+    completed.value = true;
+  } else {
+    logs.value.push('\n[错误] ' + (msgObj.message || '卸载失败'));
+    error.value = msgObj.message || '卸载失败';
+    // Allow trying again or closing?
+    // We stay in "uninstalling" state visually or switch to completed=true but with error?
+    // Let's set completed=true so user can click "Finish" (Close).
+    completed.value = true;
+  }
+  scrollToBottom();
+};
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (logEnd.value) {
+      logEnd.value.scrollIntoView({ behavior: 'smooth' });
+    }
+  });
+};
+
+watch(() => props.show, (val) => {
+  if (val) {
+    // specific setup if needed
+    window.ipcRenderer.on('remove-progress', onProgress);
+    window.ipcRenderer.on('remove-complete', onComplete);
+  } else {
+    window.ipcRenderer.off('remove-progress', onProgress);
+    window.ipcRenderer.off('remove-complete', onComplete);
+  }
+});
+
+onUnmounted(() => {
+  window.ipcRenderer.off('remove-progress', onProgress);
+  window.ipcRenderer.off('remove-complete', onComplete);
+});
+
+</script>