feat: 添加 APM 应用管理功能并优化界面

- 新增 APM 应用管理功能,支持显示已安装应用及其依赖项
- 优化已安装应用列表界面,增加应用图标和名称显示
- 调整顶部操作栏布局,将设置和关于按钮移至搜索框旁
- 修复类型定义,增加 isDependency 字段和更多应用信息
- 改进暗色模式下的界面显示效果
This commit is contained in:
2026-03-24 20:47:55 +08:00
parent 480a7f3b77
commit 7ff079276e
13 changed files with 326 additions and 158 deletions
+15 -8
View File
@@ -89,12 +89,21 @@
<div class="border-t border-slate-200 pt-4 dark:border-slate-800">
<button
v-if="apmAvailable"
type="button"
class="flex w-full items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-left text-sm font-medium text-slate-600 transition hover:border-brand/30 hover:bg-brand/5 hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:text-slate-300 dark:hover:bg-slate-800"
@click="openAbout"
@click="$emit('list')"
>
<i class="fas fa-info-circle"></i>
<span>关于</span>
<i class="fas fa-download"></i>
<span>APM 应用管理</span>
</button>
<button
type="button"
class="flex w-full items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-left text-sm font-medium text-slate-600 transition hover:border-brand/30 hover:bg-brand/5 hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:text-slate-300 dark:hover:bg-slate-800"
@click="$emit('update')"
>
<i class="fas fa-sync-alt"></i>
<span>软件更新</span>
</button>
</div>
</div>
@@ -110,13 +119,15 @@ defineProps<{
activeCategory: string;
categoryCounts: Record<string, number>;
themeMode: "light" | "dark" | "auto";
apmAvailable: boolean;
}>();
const emit = defineEmits<{
(e: "toggle-theme"): void;
(e: "select-category", category: string): void;
(e: "close"): void;
(e: "open-about"): void;
(e: "list"): void;
(e: "update"): void;
}>();
const toggleTheme = () => {
@@ -126,8 +137,4 @@ const toggleTheme = () => {
const selectCategory = (category: string) => {
emit("select-category", category);
};
const openAbout = () => {
emit("open-about");
};
</script>