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

View File

@@ -69,32 +69,42 @@
:key="app.pkgname"
class="flex flex-col gap-3 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-sm dark:border-slate-800/70 dark:bg-slate-900/70 sm:flex-row sm:items-center sm:justify-between"
>
<div>
<div class="flex items-center gap-2">
<p
class="text-base font-semibold text-slate-900 dark:text-white"
>
{{ app.pkgname }}
</p>
<span
v-if="app.flags && app.flags.includes('automatic')"
class="rounded-md bg-rose-100 px-2 py-0.5 text-[11px] font-semibold text-rose-600 dark:bg-rose-500/20 dark:text-rose-400"
>
依赖项
</span>
</div>
<div class="flex items-center gap-3">
<div
class="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400"
v-if="app.icons"
class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800"
>
<span>{{ app.version }}</span>
<span>·</span>
<span>{{ app.arch }}</span>
<template
v-if="app.flags && !app.flags.includes('automatic')"
<img
v-if="app.icons.startsWith('/')"
:src="`file://${app.icons}`"
class="h-8 w-8 object-contain"
alt=""
/>
<i v-else class="fas fa-cube text-xl text-slate-400"></i>
</div>
<div>
<div class="flex items-center gap-2">
<p
class="text-base font-semibold text-slate-900 dark:text-white"
>
{{ app.name }}
</p>
<span
v-if="app.isDependency"
class="rounded-md bg-rose-100 px-2 py-0.5 text-[11px] font-semibold text-rose-600 dark:bg-rose-500/20 dark:text-rose-400"
>
依赖项
</span>
</div>
<div
class="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400"
>
<span class="font-mono">{{ app.pkgname }}</span>
<span>·</span>
<span>{{ app.flags }}</span>
</template>
<span>{{ app.version }}</span>
<span>·</span>
<span>{{ app.arch }}</span>
</div>
</div>
</div>
<button