feat: add SPK share link support and optimize category count calculation

- add SPK share button in app detail pages and support parsing SPK links in search box
- fix category total count to exclude the all entry
- remove redundant count badge from sidebar tabs
- rewrite category count calculation with proper filtering of all entry
- update search category count logic to use base apps for all tab count
This commit is contained in:
2026-07-14 13:39:20 +08:00
parent b233fea4d5
commit 750e1d89e4
6 changed files with 101 additions and 9 deletions
+25 -1
View File
@@ -58,6 +58,7 @@
@open-install-settings="handleOpenInstallSettings"
@open-about="openAboutModal"
@toggle-sidebar="isSidebarOpen = !isSidebarOpen"
@spk-link="handleSpkLink"
/>
</div>
<CategoryBar
@@ -586,7 +587,17 @@ const categoryCounts = computed(() => {
const sourceApps = displayApps.value;
if (searchQuery.value.trim()) {
return countSearchMatchesByCategory(sourceApps, searchQuery.value);
// all 统计所有应用中的搜索匹配数(不随 tab 变化)
const allCounts = countSearchMatchesByCategory(
baseApps.value,
searchQuery.value,
);
// 各分类统计当前 tab 中的搜索匹配数
const tabCounts = countSearchMatchesByCategory(
sourceApps,
searchQuery.value,
);
return { ...tabCounts, all: allCounts.all };
}
const counts: Record<string, number> = { all: apps.value.length };
@@ -2694,6 +2705,19 @@ const handleSearchInput = (value: string) => {
searchQuery.value = value;
};
const handleSpkLink = (pkgname: string) => {
currentView.value = "default";
activeTab.value = "all";
// 尝试从已加载的应用中查找
const target = apps.value.find((a) => a.pkgname === pkgname);
if (target) {
openDetail({ ...target, _fromDeepLink: true });
} else {
// 找不到时回退到搜索
searchQuery.value = pkgname;
}
};
const handleSearchFocus = () => {
currentView.value = "default";
if (activeTab.value === "home") activeTab.value = "all";
+30
View File
@@ -188,6 +188,17 @@
<i class="fas fa-star text-xs"></i>
<span>{{ favoriteButtonText }}</span>
</button>
<button
type="button"
class="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-600 transition hover:bg-slate-50 hover:text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
@click="copySpkLink"
>
<i
class="fas text-xs"
:class="spkCopied ? 'fa-check' : 'fa-share-alt'"
></i>
<span>{{ spkCopied ? '已复制链接' : 'SPK 分享' }}</span>
</button>
</div>
<!-- 其他元信息 -->
@@ -733,6 +744,25 @@ const hideImage = (e: Event) => {
(e.target as HTMLElement).style.display = "none";
};
const spkCopied = ref(false);
let spkCopiedTimer: ReturnType<typeof setTimeout> | null = null;
const copySpkLink = async () => {
if (!displayApp.value?.pkgname) return;
const spkLink = `spk://store/${displayApp.value.category || "unknown"}/${displayApp.value.pkgname}`;
try {
await navigator.clipboard.writeText(spkLink);
spkCopied.value = true;
if (spkCopiedTimer) clearTimeout(spkCopiedTimer);
spkCopiedTimer = setTimeout(() => {
spkCopied.value = false;
}, 2000);
} catch {
// 降级方案:使用 prompt
prompt("请手动复制 SPK 分享链接:", spkLink);
}
};
const onOverlayWheel = (e: WheelEvent) => {
const target = e.target as HTMLElement;
if (target.closest(".overflow-y-auto, .overflow-auto")) return;
+29
View File
@@ -125,6 +125,17 @@
<i class="fas fa-star text-xs"></i>
<span>{{ favoriteButtonText }}</span>
</button>
<button
type="button"
class="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-600 transition hover:bg-slate-50 hover:text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
@click="copySpkLink"
>
<i
class="fas text-xs"
:class="spkCopied ? 'fa-check' : 'fa-share-alt'"
></i>
<span>{{ spkCopied ? '已复制链接' : 'SPK 分享' }}</span>
</button>
</div>
<dl
@@ -381,4 +392,22 @@ const handleFavorite = () => {
const hideImage = (event: Event) => {
(event.target as HTMLElement).style.display = "none";
};
const spkCopied = ref(false);
let spkCopiedTimer: ReturnType<typeof setTimeout> | null = null;
const copySpkLink = async () => {
if (!displayApp.value?.pkgname) return;
const spkLink = `spk://store/${displayApp.value.category || "unknown"}/${displayApp.value.pkgname}`;
try {
await navigator.clipboard.writeText(spkLink);
spkCopied.value = true;
if (spkCopiedTimer) clearTimeout(spkCopiedTimer);
spkCopiedTimer = setTimeout(() => {
spkCopied.value = false;
}, 2000);
} catch {
prompt("请手动复制 SPK 分享链接:", spkLink);
}
};
</script>
+14 -1
View File
@@ -19,7 +19,7 @@
id="searchBox"
v-model="localSearchQuery"
class="w-full rounded-2xl border border-slate-200/70 bg-white/80 py-3 pl-12 pr-20 text-sm text-slate-700 shadow-sm outline-none transition placeholder:text-slate-400 focus:border-brand/50 focus:ring-4 focus:ring-brand/10 dark:border-slate-800/70 dark:bg-slate-900/60 dark:text-slate-200"
placeholder="搜索应用名 / 包名 / 标签"
placeholder="搜索应用名 / 包名 / 标签 / 粘贴 SPK 分享链接"
@focus="handleSearchFocus"
@input="handleInput"
/>
@@ -68,6 +68,7 @@ const emit = defineEmits<{
(e: "open-install-settings"): void;
(e: "open-about"): void;
(e: "toggle-sidebar"): void;
(e: "spk-link", pkgname: string): void;
}>();
const localSearchQuery = ref(props.searchQuery || "");
@@ -77,6 +78,18 @@ const handleSearchFocus = () => {
};
const handleInput = () => {
const value = localSearchQuery.value.trim();
// 检测 SPK 分享链接: spk://store/{category}/{pkgname}
const spkMatch = value.match(/^spk:\/\/search\/(.+)$/i) ||
value.match(/^spk:\/\/store\/[^/]+\/(.+)$/i);
if (spkMatch) {
const pkgname = spkMatch[1].trim();
if (pkgname) {
localSearchQuery.value = "";
emit("spk-link", pkgname);
return;
}
}
emit("update-search", localSearchQuery.value);
};
-5
View File
@@ -96,11 +96,6 @@
<i v-else class="fas fa-folder"></i>
</span>
<span class="sidebar-tab-label">{{ entry.name }}</span>
<span
v-if="entryCounts[entry.id]"
class="ml-auto rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-500 dark:bg-slate-800/70 dark:text-slate-300"
>{{ entryCounts[entry.id] }}</span
>
</button>
</div>
+3 -2
View File
@@ -45,9 +45,10 @@ const emit = defineEmits<{
const totalCount = computed(() => {
let total = 0;
Object.values(props.categoryCounts).forEach((v) => {
for (const [key, v] of Object.entries(props.categoryCounts)) {
if (key === "all") continue; // all 是总计,不是分类
if (typeof v === "number") total += v;
});
}
return total;
});