mirror of
https://gitee.com/spark-store-project/spark-store
synced 2026-04-26 09:20:18 +08:00
feat: 添加 APM 应用管理功能并优化界面
- 新增 APM 应用管理功能,支持显示已安装应用及其依赖项 - 优化已安装应用列表界面,增加应用图标和名称显示 - 调整顶部操作栏布局,将设置和关于按钮移至搜索框旁 - 修复类型定义,增加 isDependency 字段和更多应用信息 - 改进暗色模式下的界面显示效果
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user