detect

src/components/SoftwareCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="software-card">
+  <div class="software-card" :class="{ 'installed-mode': software.status === 'installed' }">
     <div class="card-left">
       <div class="icon-container">
         <img v-if="software.icon_url" :src="software.icon_url" :alt="software.name" class="software-icon" />
@@ -31,6 +31,14 @@
         >
           {{ actionLabel }}
         </button>
+
+        <button 
+          v-else-if="software.status === 'installed'" 
+          disabled
+          class="installed-btn"
+        >
+          已安装
+        </button>
         
         <div v-else-if="software.status === 'installing' || software.status === 'pending'" class="progress-status">
           <div class="progress-ring">
@@ -215,6 +223,17 @@ const placeholderColor = computed(() => {
   color: white;
 }
 
+.installed-btn {
+  padding: 8px 24px;
+  background-color: #E5E5E7;
+  border: none;
+  border-radius: 20px;
+  color: #86868B;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: not-allowed;
+}
+
 .progress-status {
   display: flex;
   align-items: center;

src/store/software.ts

@@ -9,6 +9,32 @@ export const useSoftwareStore = defineStore('software', {
     allSoftware: [] as any[],
     loading: false
   }),
+  getters: {
+    mergedEssentials: (state) => {
+      return state.essentials.map(item => {
+        const isInstalled = state.allSoftware.some(s => s.id.toLowerCase() === item.id.toLowerCase());
+        const hasUpdate = state.updates.some(s => s.id.toLowerCase() === item.id.toLowerCase());
+        
+        let displayStatus = item.status;
+        let actionLabel = '安装';
+        
+        if (isInstalled) {
+          if (hasUpdate) {
+            actionLabel = '更新';
+          } else if (displayStatus === 'idle') {
+            displayStatus = 'installed';
+            actionLabel = '已安装';
+          }
+        }
+        
+        return {
+          ...item,
+          status: displayStatus,
+          actionLabel
+        };
+      });
+    }
+  },
   actions: {
     async fetchEssentials() {
       this.essentials = await invoke('get_essentials')
@@ -23,6 +49,19 @@ export const useSoftwareStore = defineStore('software', {
       this.allSoftware = await invoke('get_all_software')
       this.loading = false
     },
+    async fetchAllData() {
+      this.loading = true;
+      // 并行获取三类数据
+      const [essentials, all, updates] = await Promise.all([
+        invoke('get_essentials'),
+        invoke('get_all_software'),
+        invoke('get_updates')
+      ]);
+      this.essentials = essentials as any[];
+      this.allSoftware = all as any[];
+      this.updates = updates as any[];
+      this.loading = false;
+    },
     async install(id: string) {
       const software = this.findSoftware(id)
       if (software) software.status = 'pending'

src/views/Essentials.vue

@@ -1,16 +1,24 @@
 <template>
   <main class="content">
     <header class="content-header">
-      <h1>装机必备</h1>
-      <button @click="installAll" class="primary-btn">一键安装全部</button>
+      <div class="header-left">
+        <h1>装机必备</h1>
+        <p class="subtitle" v-if="store.loading">正在同步软件状态...</p>
+      </div>
+      <button @click="installAll" class="primary-btn" :disabled="store.loading">一键安装全部</button>
     </header>
     
-    <div class="software-list">
+    <div v-if="store.loading && store.mergedEssentials.length === 0" class="loading-state">
+      <div class="spinner"></div>
+      <p>正在读取必备软件列表...</p>
+    </div>
+
+    <div v-else class="software-list">
       <SoftwareCard 
-        v-for="item in store.essentials" 
+        v-for="item in store.mergedEssentials" 
         :key="item.id" 
         :software="item"
-        action-label="安装"
+        :action-label="item.actionLabel"
         @install="store.install"
       />
     </div>
@@ -25,12 +33,12 @@ import { onMounted } from 'vue';
 const store = useSoftwareStore();
 
 onMounted(() => {
-  store.fetchEssentials();
+  store.fetchAllData();
   store.initListener();
 });
 
 const installAll = () => {
-  store.essentials.forEach(s => {
+  store.mergedEssentials.forEach(s => {
     if (s.status === 'idle') {
       store.install(s.id);
     }
@@ -58,6 +66,12 @@ const installAll = () => {
   letter-spacing: -0.5px;
 }
 
+.subtitle {
+  font-size: 14px;
+  color: var(--text-sec);
+  margin-top: 4px;
+}
+
 .primary-btn {
   background-color: var(--primary-color);
   color: white;
@@ -76,8 +90,37 @@ const installAll = () => {
   transform: translateY(-1px);
 }
 
+.primary-btn:disabled {
+  background-color: var(--border-color);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
 .software-list {
   display: flex;
   flex-direction: column;
 }
+
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  color: var(--text-sec);
+}
+
+.spinner {
+  width: 32px;
+  height: 32px;
+  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: 16px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
 </style>