87 lines
2.5 KiB
Markdown
87 lines
2.5 KiB
Markdown
【技术解读】星火应用商店 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
|