refactor(daily-news): 重构每日资讯采集流程并添加用户交互确认
- 重构核心流程，添加用户交互确认步骤 - 新增微信公众号发布支持 - 更新文档和任务说明以反映新流程 - 优化各平台内容生成模板
This commit is contained in:
@@ -1,138 +1,86 @@
|
||||
# APM 应用商店 5.0 发布：虚拟滚动与 Deep Link 技术解析
|
||||
【技术解读】星火应用商店 5.0：Electron + Vue 3 重构带来的技术革新
|
||||
|
||||
## 前言
|
||||
## 背景
|
||||
|
||||
APM 应用商店近期发布了 5.0.0-beta.1 版本，这是一次重大的版本跨越。本文将从技术视角深度解析这次更新的核心改进。
|
||||
星火应用商店从 Qt 版本（4.8.4）演进到 Electron 版（1.0.2），再到最新的 5.0.0-beta.1，完成了技术架构的全面升级。本文深入分析本次重构的技术亮点。
|
||||
|
||||
---
|
||||
|
||||
## 一、版本背景
|
||||
### 一、虚拟滚动：大型列表渲染的性能优化
|
||||
|
||||
APM (AmberPM) 是星火应用商店的跨发行版包管理解决方案，基于 fuse-overlayfs + dpkg + AmberCE 容器化兼容层构建。
|
||||
**问题背景**：当应用列表达到数百甚至上千个应用时，传统的渲染方式会导致严重的性能问题。
|
||||
|
||||
**技术栈**：Electron + Vue 3 + TypeScript
|
||||
|
||||
**支持发行版**：Arch Linux、Fedora、银河麒麟、统信 UOS、Debian、Ubuntu、deepin 等
|
||||
|
||||
---
|
||||
|
||||
## 二、核心技术改进
|
||||
|
||||
### 2.1 虚拟滚动技术应用
|
||||
|
||||
**问题背景**
|
||||
|
||||
应用商店需要展示大量应用条目，传统渲染方式将所有元素挂载到 DOM，导致：
|
||||
- 首屏加载缓慢
|
||||
- 滚动时帧率下降
|
||||
- 内存占用持续增长
|
||||
|
||||
**解决方案**
|
||||
|
||||
引入虚拟滚动（Virtual Scrolling）技术，核心原理：
|
||||
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ Viewport（可视区域） │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ Visible Items (N个) │ │
|
||||
│ └───────────────────────────┘ │
|
||||
│ │
|
||||
│ ← Buffer (缓冲区域) → │
|
||||
└─────────────────────────────────┘
|
||||
↓
|
||||
仅渲染可见区域 + 缓冲区域的元素
|
||||
```
|
||||
|
||||
关键实现：
|
||||
- 计算可视区域高度
|
||||
- 动态计算需渲染的起始/结束索引
|
||||
- 使用 `translateY` 定位已渲染元素
|
||||
- 滚动时更新可视区域，触发重新渲染
|
||||
|
||||
### 2.2 Deep Link 协议设计
|
||||
|
||||
**URL Scheme 设计**
|
||||
**解决方案**：采用虚拟滚动技术，只渲染可视区域内的应用卡片，结合懒加载机制，大幅降低 DOM 节点数量。
|
||||
|
||||
```typescript
|
||||
// store://app/detail/{package_name}
|
||||
const deepLinkPattern = /^store:\/\/app\/detail\/(.+)$/;
|
||||
// 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>
|
||||
```
|
||||
|
||||
// 处理函数
|
||||
function handleDeepLink(url: string) {
|
||||
const match = url.match(deepLinkPattern);
|
||||
if (match) {
|
||||
const packageName = match[1];
|
||||
router.push(`/app/${packageName}`);
|
||||
}
|
||||
### 二、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);
|
||||
}
|
||||
```
|
||||
|
||||
**Electron 中的处理**
|
||||
**协议格式**：
|
||||
- `spk://search/pkgname` - 搜索并打开应用详情
|
||||
- `spk://store/category/pkgname` - 兼容旧格式
|
||||
|
||||
### 三、来源筛选：多源应用管理
|
||||
|
||||
```typescript
|
||||
// main/handle-url-scheme.ts
|
||||
import { app } from 'electron';
|
||||
// AppDetailModal.vue 中的来源切换
|
||||
<button
|
||||
v-if="app.sparkApp"
|
||||
:class="viewingOrigin === 'spark' ? 'bg-orange-500 text-white' : 'bg-slate-100'"
|
||||
@click="viewingOrigin = 'spark'"
|
||||
>
|
||||
Spark
|
||||
</button>
|
||||
```
|
||||
|
||||
app.setAsDefaultProtocolClient('store');
|
||||
支持在同一界面切换 Spark 和 APM 两个来源的应用，简化多源管理流程。
|
||||
|
||||
app.on('open-url', (event, url) => {
|
||||
event.preventDefault();
|
||||
handleDeepLink(url);
|
||||
### 四、搜索结果分类计数
|
||||
|
||||
```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;
|
||||
});
|
||||
```
|
||||
|
||||
### 2.3 安装体验优化
|
||||
### 五、总结
|
||||
|
||||
```typescript
|
||||
// 安装前检查 APM
|
||||
async function preInstallCheck() {
|
||||
const apmInstalled = await checkAPMInstalled();
|
||||
if (!apmInstalled) {
|
||||
showAPMInstallPrompt();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
```
|
||||
5.0.0-beta.1 版本是星火应用商店的重要里程碑，通过 Electron + Vue 3 重构，实现了：
|
||||
- 更好的开发体验（TypeScript、组件化）
|
||||
- 更好的用户体验（性能优化、交互增强）
|
||||
- 更好的扩展性（Deep Link、来源筛选）
|
||||
|
||||
---
|
||||
|
||||
## 三、其他改进
|
||||
**关于星火应用商店**
|
||||
|
||||
| 改进类型 | 内容 |
|
||||
|----------|------|
|
||||
| 搜索增强 | 分类计数、空结果提示 |
|
||||
| 界面优化 | 模态框交互、按钮样式 |
|
||||
| Bug 修复 | 下载重试、列表解析、命令替换 |
|
||||
星火应用商店是一个致力于改善 Linux 桌面应用生态的开源社区项目。
|
||||
|
||||
---
|
||||
欢迎大家体验交流！👀
|
||||
|
||||
## 四、版本变更统计
|
||||
|
||||
| 变更类型 | 数量 |
|
||||
|----------|------|
|
||||
| Features | 10+ |
|
||||
| Bug Fixes | 8+ |
|
||||
| Performance | 3+ |
|
||||
|
||||
---
|
||||
|
||||
## 五、获取与反馈
|
||||
|
||||
- **GitHub**：https://github.com/shenmo7192/apm-app-store
|
||||
- **官网**：https://amber-pm.spark-app.store/
|
||||
|
||||
---
|
||||
|
||||
## 结语
|
||||
|
||||
从 1.x 到 5.0 的跨越体现了项目在技术和体验上的持续投入。虚拟滚动和 Deep Link 的引入标志着应用商店向成熟商业产品迈进的决心。
|
||||
|
||||
期待 5.0 正式版的发布。
|
||||
|
||||
---
|
||||
|
||||
**相关链接**：
|
||||
- 星火应用商店：https://www.spark-app.store/
|
||||
- 星火社区：https://bbs.spark-app.store/
|
||||
#Linux #开源 #Electron #Vue3 #TypeScript
|
||||
|
||||
Reference in New Issue
Block a user