mirror of
https://gitee.com/spark-store-project/spark-store
synced 2026-08-06 11:53:56 +08:00
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:
+25
-1
@@ -58,6 +58,7 @@
|
|||||||
@open-install-settings="handleOpenInstallSettings"
|
@open-install-settings="handleOpenInstallSettings"
|
||||||
@open-about="openAboutModal"
|
@open-about="openAboutModal"
|
||||||
@toggle-sidebar="isSidebarOpen = !isSidebarOpen"
|
@toggle-sidebar="isSidebarOpen = !isSidebarOpen"
|
||||||
|
@spk-link="handleSpkLink"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<CategoryBar
|
<CategoryBar
|
||||||
@@ -586,7 +587,17 @@ const categoryCounts = computed(() => {
|
|||||||
const sourceApps = displayApps.value;
|
const sourceApps = displayApps.value;
|
||||||
|
|
||||||
if (searchQuery.value.trim()) {
|
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 };
|
const counts: Record<string, number> = { all: apps.value.length };
|
||||||
@@ -2694,6 +2705,19 @@ const handleSearchInput = (value: string) => {
|
|||||||
searchQuery.value = value;
|
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 = () => {
|
const handleSearchFocus = () => {
|
||||||
currentView.value = "default";
|
currentView.value = "default";
|
||||||
if (activeTab.value === "home") activeTab.value = "all";
|
if (activeTab.value === "home") activeTab.value = "all";
|
||||||
|
|||||||
@@ -188,6 +188,17 @@
|
|||||||
<i class="fas fa-star text-xs"></i>
|
<i class="fas fa-star text-xs"></i>
|
||||||
<span>{{ favoriteButtonText }}</span>
|
<span>{{ favoriteButtonText }}</span>
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- 其他元信息 -->
|
<!-- 其他元信息 -->
|
||||||
@@ -733,6 +744,25 @@ const hideImage = (e: Event) => {
|
|||||||
(e.target as HTMLElement).style.display = "none";
|
(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 onOverlayWheel = (e: WheelEvent) => {
|
||||||
const target = e.target as HTMLElement;
|
const target = e.target as HTMLElement;
|
||||||
if (target.closest(".overflow-y-auto, .overflow-auto")) return;
|
if (target.closest(".overflow-y-auto, .overflow-auto")) return;
|
||||||
|
|||||||
@@ -125,6 +125,17 @@
|
|||||||
<i class="fas fa-star text-xs"></i>
|
<i class="fas fa-star text-xs"></i>
|
||||||
<span>{{ favoriteButtonText }}</span>
|
<span>{{ favoriteButtonText }}</span>
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
<dl
|
<dl
|
||||||
@@ -381,4 +392,22 @@ const handleFavorite = () => {
|
|||||||
const hideImage = (event: Event) => {
|
const hideImage = (event: Event) => {
|
||||||
(event.target as HTMLElement).style.display = "none";
|
(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>
|
</script>
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
id="searchBox"
|
id="searchBox"
|
||||||
v-model="localSearchQuery"
|
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"
|
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"
|
@focus="handleSearchFocus"
|
||||||
@input="handleInput"
|
@input="handleInput"
|
||||||
/>
|
/>
|
||||||
@@ -68,6 +68,7 @@ const emit = defineEmits<{
|
|||||||
(e: "open-install-settings"): void;
|
(e: "open-install-settings"): void;
|
||||||
(e: "open-about"): void;
|
(e: "open-about"): void;
|
||||||
(e: "toggle-sidebar"): void;
|
(e: "toggle-sidebar"): void;
|
||||||
|
(e: "spk-link", pkgname: string): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const localSearchQuery = ref(props.searchQuery || "");
|
const localSearchQuery = ref(props.searchQuery || "");
|
||||||
@@ -77,6 +78,18 @@ const handleSearchFocus = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleInput = () => {
|
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);
|
emit("update-search", localSearchQuery.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -96,11 +96,6 @@
|
|||||||
<i v-else class="fas fa-folder"></i>
|
<i v-else class="fas fa-folder"></i>
|
||||||
</span>
|
</span>
|
||||||
<span class="sidebar-tab-label">{{ entry.name }}</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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -45,9 +45,10 @@ const emit = defineEmits<{
|
|||||||
|
|
||||||
const totalCount = computed(() => {
|
const totalCount = computed(() => {
|
||||||
let total = 0;
|
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;
|
if (typeof v === "number") total += v;
|
||||||
});
|
}
|
||||||
return total;
|
return total;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user