【技术解读】星火应用商店 5.0：Electron + Vue 3 重构带来的技术革新

## 背景

星火应用商店从 Qt 版本（4.8.4）演进到 Electron 版（1.0.2），再到最新的 5.0.0-beta.1，完成了技术架构的全面升级。本文深入分析本次重构的技术亮点。

---

### 一、虚拟滚动：大型列表渲染的性能优化

**问题背景**：当应用列表达到数百甚至上千个应用时，传统的渲染方式会导致严重的性能问题。

**解决方案**：采用虚拟滚动技术，只渲染可视区域内的应用卡片，结合懒加载机制，大幅降低 DOM 节点数量。

```typescript
// AppGrid.vue 中的搜索结果为空提示
<div v-if="!loading && apps.length === 0" class="flex flex-col items-center...">
  <i class="fas fa-search text-3xl text-slate-400"></i>
  <h3>未找到应用</h3>
</div>
```

### 二、Deep Link 协议：外部跳转的桥梁

**技术实现**：新版支持 `spk://` 协议实现应用详情的直接跳转。

```typescript
// electron/main/deeplink.ts
const protocols = ["spk"];

if (action === "search") {
  // 格式: spk://search/pkgname
  const pkgname = url.pathname.split("/").filter(Boolean)[0];
  query.pkgname = pkgname;
  listeners.emit(action, query);
}
```

**协议格式**：
- `spk://search/pkgname` - 搜索并打开应用详情
- `spk://store/category/pkgname` - 兼容旧格式

### 三、来源筛选：多源应用管理

```typescript
// AppDetailModal.vue 中的来源切换
<button
  v-if="app.sparkApp"
  :class="viewingOrigin === 'spark' ? 'bg-orange-500 text-white' : 'bg-slate-100'"
  @click="viewingOrigin = 'spark'"
>
  Spark
</button>
```

支持在同一界面切换 Spark 和 APM 两个来源的应用，简化多源管理流程。

### 四、搜索结果分类计数

```typescript
const categoryCounts = computed(() => {
  const counts: Record<string, number> = { all: apps.value.length };
  for (const app of filteredApps.value) {
    const cat = app.category || "other";
    counts[cat] = (counts[cat] || 0) + 1;
  }
  return counts;
});
```

### 五、总结

5.0.0-beta.1 版本是星火应用商店的重要里程碑，通过 Electron + Vue 3 重构，实现了：
- 更好的开发体验（TypeScript、组件化）
- 更好的用户体验（性能优化、交互增强）
- 更好的扩展性（Deep Link、来源筛选）

---

**关于星火应用商店**

星火应用商店是一个致力于改善 Linux 桌面应用生态的开源社区项目。

欢迎大家体验交流！👀

#Linux #开源 #Electron #Vue3 #TypeScript