mirror of
https://gitee.com/spark-store-project/spark-store
synced 2026-08-06 09:13:57 +08:00
shenmo7192
7420466d92
1. 替换单引号为双引号统一字符串格式 2. 拆分过长的函数调用与条件判断行提升可读性 3. 简化多行console.log调用为单行格式 4. 为侧边栏添加条目计数标签展示功能
109 lines
3.9 KiB
Vue
109 lines
3.9 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex flex-col gap-4 lg:flex-row lg:items-center">
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-slate-200/70 bg-white text-slate-500 shadow-sm transition hover:bg-slate-50 lg:hidden dark:border-slate-800/70 dark:bg-slate-900 dark:text-slate-400 dark:hover:bg-slate-800"
|
|
@click="$emit('toggle-sidebar')"
|
|
title="切换侧边栏"
|
|
>
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<div class="flex w-full flex-1 items-center gap-3">
|
|
<div class="relative flex-1">
|
|
<label for="searchBox" class="sr-only">搜索应用</label>
|
|
<i
|
|
class="fas fa-search pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"
|
|
></i>
|
|
<input
|
|
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="搜索应用名 / 包名 / 标签 / 粘贴 SPK 分享链接"
|
|
@focus="handleSearchFocus"
|
|
@input="handleInput"
|
|
/>
|
|
<button
|
|
v-if="localSearchQuery"
|
|
type="button"
|
|
class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300 transition-colors"
|
|
@click="clearSearch"
|
|
title="清除搜索"
|
|
>
|
|
<i class="fas fa-times-circle"></i>
|
|
</button>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-slate-200/70 bg-white text-slate-500 shadow-sm transition hover:bg-slate-50 dark:border-slate-800/70 dark:bg-slate-900 dark:text-slate-400 dark:hover:bg-slate-800"
|
|
@click="$emit('open-install-settings')"
|
|
title="安装设置"
|
|
>
|
|
<i class="fas fa-cog"></i>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-slate-200/70 bg-white text-slate-500 shadow-sm transition hover:bg-slate-50 dark:border-slate-800/70 dark:bg-slate-900 dark:text-slate-400 dark:hover:bg-slate-800"
|
|
@click="$emit('open-about')"
|
|
title="关于"
|
|
>
|
|
<i class="fas fa-info-circle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
|
|
const props = defineProps<{
|
|
searchQuery: string;
|
|
activeTab: string;
|
|
appsCount: number;
|
|
}>();
|
|
const emit = defineEmits<{
|
|
(e: "update-search", query: string): void;
|
|
(e: "search-focus"): void;
|
|
(e: "open-install-settings"): void;
|
|
(e: "open-about"): void;
|
|
(e: "toggle-sidebar"): void;
|
|
(e: "spk-link", pkgname: string): void;
|
|
}>();
|
|
|
|
const localSearchQuery = ref(props.searchQuery || "");
|
|
|
|
const handleSearchFocus = () => {
|
|
emit("search-focus");
|
|
};
|
|
|
|
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);
|
|
};
|
|
|
|
const clearSearch = () => {
|
|
localSearchQuery.value = "";
|
|
emit("update-search", "");
|
|
};
|
|
|
|
watch(
|
|
() => props.searchQuery,
|
|
(newVal) => {
|
|
localSearchQuery.value = newVal || "";
|
|
},
|
|
);
|
|
</script>
|