fix cards ui and data extract

src-tauri/src/lib.rs

@@ -6,7 +6,7 @@ use std::os::windows::process::CommandExt;
 use tokio::sync::mpsc;
 use tauri::{AppHandle, Manager, State, Emitter};
 use serde::Serialize;
-use winget::{Software, list_all_software, list_updates};
+use winget::{Software, list_all_software, list_updates, ensure_winget_dependencies};
 
 struct AppState {
     install_tx: mpsc::Sender<String>,
@@ -79,6 +79,13 @@ pub fn run() {
         .setup(move |app| {
             let handle = app.handle().clone();
             
+            // 确保依赖项已安装 (这是一个耗时的过程，建议在异步任务中运行)
+            tauri::async_runtime::spawn(async move {
+                let _ = tokio::task::spawn_blocking(|| {
+                    let _ = ensure_winget_dependencies();
+                }).await;
+            });
+
             // 在 setup 闭包中初始化，此时运行时已就绪
             let (tx, mut rx) = mpsc::channel::<String>(100);
             

src-tauri/src/winget.rs

@@ -14,78 +14,102 @@ pub struct Software {
     pub progress: f32,
 }
 
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "PascalCase")]
+struct WingetPackage {
+    pub id: String,
+    pub name: String,
+    pub installed_version: Option<String>,
+    pub available_versions: Option<Vec<String>>,
+}
+
+pub fn ensure_winget_dependencies() -> Result<(), String> {
+    // 1. 检查 winget
+    let winget_check = Command::new("winget")
+        .arg("--version")
+        .creation_flags(0x08000000)
+        .status();
+
+    if winget_check.is_err() || !winget_check.unwrap().success() {
+        // 如果没有 winget，尝试安装 (这里简化处理，实际可能需要更复杂的脚本)
+        println!("Winget not found, attempting to install...");
+        let _ = Command::new("powershell")
+            .args(["-Command", "Invoke-WebRequest -Uri https://github.com/microsoft/winget-cli/releases/latest/download/Microsoft.DesktopAppInstaller_8wekyb3d8bbwe.msixbundle -OutFile ./winget.msixbundle; Add-AppxPackage ./winget.msixbundle; Remove-Item ./winget.msixbundle"])
+            .creation_flags(0x08000000)
+            .status();
+    }
+
+    // 2. 检查 Microsoft.WinGet.Client 模块
+    let module_check = Command::new("powershell")
+        .args(["-Command", "Get-Module -ListAvailable Microsoft.WinGet.Client"])
+        .creation_flags(0x08000000)
+        .output();
+
+    if let Ok(out) = module_check {
+        if out.stdout.is_empty() {
+            println!("Microsoft.WinGet.Client module not found, installing...");
+            let install_res = Command::new("powershell")
+                .args(["-Command", "Install-Module -Name Microsoft.WinGet.Client -Force -AllowClobber -Scope CurrentUser -ErrorAction SilentlyContinue"])
+                .creation_flags(0x08000000)
+                .status();
+            
+            if install_res.is_err() || !install_res.unwrap().success() {
+                return Err("Failed to install Microsoft.WinGet.Client module".to_string());
+            }
+        }
+    }
+
+    Ok(())
+}
+
 pub fn list_all_software() -> Vec<Software> {
-    // winget list
+    // 使用 PowerShell 获取结构化 JSON
-    let output = Command::new("winget")
+    let output = Command::new("powershell")
-        .args(["list", "--accept-source-agreements"])
+        .args(["-Command", "Get-WinGetPackage | Select-Object Name, Id, InstalledVersion, IsUpdateAvailable, AvailableVersions | ConvertTo-Json"])
-        .creation_flags(0x08000000) // CREATE_NO_WINDOW
+        .creation_flags(0x08000000)
         .output();
 
     match output {
-        Ok(out) => parse_winget_output(String::from_utf8_lossy(&out.stdout).to_string()),
+        Ok(out) => parse_json_output(String::from_utf8_lossy(&out.stdout).to_string()),
         Err(_) => vec![],
     }
 }
 
 pub fn list_updates() -> Vec<Software> {
-    // winget upgrade
+    // 过滤出有更新的软件
-    let output = Command::new("winget")
+    let output = Command::new("powershell")
-        .args(["upgrade", "--accept-source-agreements"])
+        .args(["-Command", "Get-WinGetPackage | Where-Object { $_.IsUpdateAvailable } | Select-Object Name, Id, InstalledVersion, IsUpdateAvailable, AvailableVersions | ConvertTo-Json"])
         .creation_flags(0x08000000)
         .output();
 
     match output {
-        Ok(out) => parse_winget_output(String::from_utf8_lossy(&out.stdout).to_string()),
+        Ok(out) => parse_json_output(String::from_utf8_lossy(&out.stdout).to_string()),
         Err(_) => vec![],
     }
 }
 
-fn parse_winget_output(output: String) -> Vec<Software> {
+fn parse_json_output(json_str: String) -> Vec<Software> {
-    let mut softwares = Vec::new();
+    if json_str.trim().is_empty() {
-    let lines: Vec<&str> = output.lines().collect();
+        return vec![];
-    
-    if lines.len() < 3 {
-        return softwares;
     }
 
-    // 查找表头行以确定列偏移量
+    // 处理单个对象或数组的情况
-    // 通常格式: Name  Id  Version  Available  Source
+    let packages: Vec<WingetPackage> = if json_str.trim().starts_with('[') {
-    let header_idx = lines.iter().position(|l| l.contains("Id") && l.contains("Name")).unwrap_or(0);
+        serde_json::from_str(&json_str).unwrap_or_default()
-    let header = lines[header_idx];
-    
-    let id_pos = header.find("Id").unwrap_or(0);
-    let version_pos = header.find("Version").unwrap_or(0);
-    let available_pos = header.find("Available").unwrap_or(header.len());
-    let source_pos = header.find("Source").unwrap_or(header.len());
-
-    for line in &lines[header_idx + 2..] {
-        if line.trim().is_empty() || line.starts_with('-') {
-            continue;
-        }
-
-        if line.len() < version_pos { continue; }
-
-        let name = line[..id_pos].trim().to_string();
-        let id = line[id_pos..version_pos].trim().to_string();
-        let version = line[version_pos..available_pos.min(line.len())].trim().to_string();
-        
-        let available_version = if available_pos < line.len() {
-            Some(line[available_pos..source_pos.min(line.len())].trim().to_string())
     } else {
-            None
+        serde_json::from_str::<WingetPackage>(&json_str)
+            .map(|p| vec![p])
+            .unwrap_or_default()
     };
 
-        softwares.push(Software {
+    packages.into_iter().map(|p| Software {
-            id,
+        id: p.id,
-            name,
+        name: p.name,
         description: None,
-            version: Some(version),
+        version: p.installed_version,
-            available_version,
+        available_version: p.available_versions.and_then(|v| v.first().cloned()),
         icon_url: None,
         status: "idle".to_string(),
         progress: 0.0,
-        });
+    }).collect()
-    }
-
-    softwares
 }

src/components/SoftwareCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="software-card">
-    <div class="card-header">
+    <div class="card-left">
       <div class="icon-container">
         <img v-if="software.icon_url" :src="software.icon_url" :alt="software.name" class="software-icon" />
         <div v-else class="icon-placeholder" :style="{ backgroundColor: placeholderColor }">
@@ -8,20 +8,22 @@
         </div>
       </div>
       <div class="info">
+        <div class="title-row">
           <h3 class="name">{{ software.name }}</h3>
-        <p class="id">{{ software.id }}</p>
+          <span class="id-badge">{{ software.id }}</span>
         </div>
-    </div>
-    
-    <div class="card-body">
         <p class="description" v-if="software.description">{{ software.description }}</p>
         <div class="version-info">
-        <span class="version">当前: {{ software.version || '--' }}</span>
+          <span class="version-tag">当前: {{ software.version || '--' }}</span>
-        <span class="available" v-if="software.available_version">可用: {{ software.available_version }}</span>
+          <span class="version-tag available" v-if="software.available_version">
+            最新: {{ software.available_version }}
+          </span>
+        </div>
       </div>
     </div>
 
-    <div class="card-actions">
+    <div class="card-right" v-if="actionLabel || software.status !== 'idle'">
+      <div class="action-wrapper">
         <button 
           v-if="software.status === 'idle'" 
           @click="$emit('install', software.id)"
@@ -30,7 +32,7 @@
           {{ actionLabel }}
         </button>
         
-      <div v-else-if="software.status === 'installing' || software.status === 'pending'" class="progress-container">
+        <div v-else-if="software.status === 'installing' || software.status === 'pending'" class="progress-status">
           <div class="progress-ring">
             <svg viewBox="0 0 32 32">
               <circle class="bg" cx="16" cy="16" r="14" fill="none" stroke-width="4" />
@@ -39,7 +41,7 @@
               />
             </svg>
           </div>
-        <span class="status-text">安装中...</span>
+          <span class="status-text">{{ software.status === 'pending' ? '等待中...' : '安装中...' }}</span>
         </div>
 
         <div v-else-if="software.status === 'success'" class="status-success">
@@ -51,6 +53,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -83,33 +86,36 @@ const placeholderColor = computed(() => {
 <style scoped>
 .software-card {
   background: white;
-  border-radius: var(--radius-card);
+  border-radius: 20px;
-  padding: 24px;
+  padding: 16px 24px;
   box-shadow: var(--card-shadow);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition: all 0.2s ease;
   display: flex;
-  flex-direction: column;
+  align-items: center;
-  gap: 16px;
+  justify-content: space-between;
   border: 1px solid rgba(0, 0, 0, 0.02);
+  margin-bottom: 12px;
 }
 
 .software-card:hover {
-  transform: translateY(-4px);
+  transform: scale(1.01);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
 }
 
-.card-header {
+.card-left {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 20px;
+  flex: 1;
 }
 
 .icon-container {
-  width: 56px;
+  width: 48px;
-  height: 56px;
+  height: 48px;
-  border-radius: 14px;
+  border-radius: 12px;
   overflow: hidden;
   flex-shrink: 0;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
 }
 
 .software-icon {
@@ -125,51 +131,81 @@ const placeholderColor = computed(() => {
   align-items: center;
   justify-content: center;
   color: white;
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 700;
 }
 
-.info .name {
+.info {
-  font-size: 17px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.name {
+  font-size: 16px;
   font-weight: 600;
   color: var(--text-main);
 }
 
-.info .id {
+.id-badge {
-  font-size: 13px;
+  font-size: 11px;
   color: var(--text-sec);
-}
+  background: var(--bg-light);
-
+  padding: 2px 8px;
-.card-body {
+  border-radius: 6px;
-  flex-grow: 1;
+  font-family: monospace;
 }
 
 .description {
-  font-size: 14px;
+  font-size: 13px;
   color: var(--text-sec);
-  line-height: 1.5;
+  line-height: 1.4;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  margin-bottom: 8px;
+  max-width: 500px;
 }
 
 .version-info {
   display: flex;
-  gap: 12px;
+  gap: 8px;
-  font-size: 12px;
+}
+
+.version-tag {
+  font-size: 11px;
   color: var(--text-sec);
+  font-weight: 500;
+}
+
+.version-tag.available {
+  color: var(--primary-color);
+  background: rgba(0, 122, 255, 0.08);
+  padding: 0 6px;
+  border-radius: 4px;
+}
+
+.card-right {
+  margin-left: 20px;
+  min-width: 120px;
+  display: flex;
+  justify-content: flex-end;
 }
 
 .install-btn {
-  width: 100%;
+  padding: 8px 24px;
-  padding: 10px;
   background-color: var(--bg-light);
   border: none;
-  border-radius: var(--radius-btn);
+  border-radius: 20px;
   color: var(--primary-color);
   font-weight: 600;
+  font-size: 14px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
@@ -179,16 +215,15 @@ const placeholderColor = computed(() => {
   color: white;
 }
 
-.progress-container {
+.progress-status {
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 10px;
-  gap: 12px;
 }
 
 .progress-ring {
-  width: 24px;
+  width: 20px;
-  height: 24px;
+  height: 20px;
 }
 
 .progress-ring svg {
@@ -201,24 +236,25 @@ const placeholderColor = computed(() => {
 
 .progress-ring .fg {
   stroke: var(--primary-color);
+  stroke-linecap: round;
   transition: stroke-dashoffset 0.3s ease;
 }
 
 .status-text {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   color: var(--primary-color);
 }
 
 .status-success {
-  text-align: center;
   color: #34C759;
   font-weight: 600;
+  font-size: 14px;
 }
 
 .status-error {
-  text-align: center;
   color: #FF3B30;
   font-weight: 600;
+  font-size: 14px;
 }
 </style>

src/views/AllSoftware.vue

@@ -20,13 +20,11 @@
       <p>正在读取已安装软件列表...</p>
     </div>
 
-    <div v-else class="software-grid">
+    <div v-else class="software-list">
       <SoftwareCard 
         v-for="item in filteredSoftware" 
         :key="item.id" 
         :software="item"
-        action-label="重新安装"
-        @install="store.install"
       />
     </div>
   </main>
@@ -66,27 +64,27 @@ const filteredSoftware = computed(() => {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
-  margin-bottom: 40px;
+  margin-bottom: 30px;
 }
 
 .header-left h1 {
-  font-size: 34px;
+  font-size: 32px;
   font-weight: 700;
 }
 
 .header-left .count {
-  font-size: 15px;
+  font-size: 14px;
   color: var(--text-sec);
   margin-top: 4px;
 }
 
 .search-input {
-  width: 300px;
+  width: 280px;
-  padding: 12px 20px;
+  padding: 10px 16px;
   border-radius: 12px;
   border: 1px solid var(--border-color);
   background-color: white;
-  font-size: 15px;
+  font-size: 14px;
   outline: none;
   transition: all 0.2s ease;
 }
@@ -96,10 +94,9 @@ const filteredSoftware = computed(() => {
   box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
 }
 
-.software-grid {
+.software-list {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  flex-direction: column;
-  gap: 24px;
 }
 
 .loading-state {
@@ -112,13 +109,13 @@ const filteredSoftware = computed(() => {
 }
 
 .spinner {
-  width: 40px;
+  width: 32px;
-  height: 40px;
+  height: 32px;
-  border: 4px solid rgba(0, 122, 255, 0.1);
+  border: 3px solid rgba(0, 122, 255, 0.1);
   border-top-color: var(--primary-color);
   border-radius: 50%;
   animation: spin 1s linear infinite;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 @keyframes spin {

src/views/Essentials.vue

@@ -5,7 +5,7 @@
       <button @click="installAll" class="primary-btn">一键安装全部</button>
     </header>
     
-    <div class="software-grid">
+    <div class="software-list">
       <SoftwareCard 
         v-for="item in store.essentials" 
         :key="item.id" 
@@ -49,11 +49,11 @@ const installAll = () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 40px;
+  margin-bottom: 30px;
 }
 
 .content-header h1 {
-  font-size: 34px;
+  font-size: 32px;
   font-weight: 700;
   letter-spacing: -0.5px;
 }
@@ -62,10 +62,10 @@ const installAll = () => {
   background-color: var(--primary-color);
   color: white;
   border: none;
-  padding: 12px 24px;
+  padding: 10px 20px;
-  border-radius: var(--radius-btn);
+  border-radius: 12px;
   font-weight: 600;
-  font-size: 15px;
+  font-size: 14px;
   cursor: pointer;
   box-shadow: var(--btn-shadow);
   transition: all 0.2s ease;
@@ -76,9 +76,8 @@ const installAll = () => {
   transform: translateY(-1px);
 }
 
-.software-grid {
+.software-list {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  flex-direction: column;
-  gap: 24px;
 }
 </style>

src/views/Updates.vue

@@ -20,7 +20,7 @@
       <p>所有软件已是最新版本</p>
     </div>
 
-    <div v-else class="software-grid">
+    <div v-else class="software-list">
       <SoftwareCard 
         v-for="item in store.updates" 
         :key="item.id" 
@@ -65,11 +65,11 @@ const updateAll = () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 40px;
+  margin-bottom: 30px;
 }
 
 .content-header h1 {
-  font-size: 34px;
+  font-size: 32px;
   font-weight: 700;
 }
 
@@ -80,10 +80,10 @@ const updateAll = () => {
 
 .primary-btn, .secondary-btn {
   border: none;
-  padding: 12px 24px;
+  padding: 10px 20px;
-  border-radius: var(--radius-btn);
+  border-radius: 12px;
   font-weight: 600;
-  font-size: 15px;
+  font-size: 14px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
@@ -105,10 +105,9 @@ const updateAll = () => {
   color: var(--text-main);
 }
 
-.software-grid {
+.software-list {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  flex-direction: column;
-  gap: 24px;
 }
 
 .loading-state, .empty-state {
@@ -121,18 +120,18 @@ const updateAll = () => {
 }
 
 .spinner {
-  width: 40px;
+  width: 32px;
-  height: 40px;
+  height: 32px;
-  border: 4px solid rgba(0, 122, 255, 0.1);
+  border: 3px solid rgba(0, 122, 255, 0.1);
   border-top-color: var(--primary-color);
   border-radius: 50%;
   animation: spin 1s linear infinite;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 .empty-icon {
-  font-size: 48px;
+  font-size: 40px;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 @keyframes spin {