spark-store-project/spark-store
15
0
Fork 0
mirror of https://gitee.com/spark-store-project/spark-store synced 2026-05-30 01:31:06 +08:00
Code Issues 1 Packages Projects Releases Wiki Activity

refactor(AppDetailModal): 优化应用详情弹窗的布局和样式

Browse Source 
将版本号和下载量合并显示，并调整应用来源切换的布局结构
This commit is contained in:
shenmo
2026-04-16 00:21:38 +08:00
parent 68dd6a0a26
commit c907fbb5d4
1 changed files with 67 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppDetailModal.vue
+24 -27
View File
@@ -50,24 +50,36 @@
<h2 class="mt-4 text-xl font-bold text-slate-900 dark:text-white">
{{ displayApp?.name || "" }}
</h2>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
<p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
{{ displayApp?.pkgname || "" }}
</p>
</div>
<!-- 版本号和来源切换 -->
<div class="space-y-3">
<!-- 版本号 -->
<div
class="flex items-center justify-between rounded-2xl border border-slate-200/60 bg-slate-50/50 px-4 py-3 dark:border-slate-800/60 dark:bg-slate-800/50"
>
<span class="text-sm text-slate-500 dark:text-slate-400"
>版本</span
v-if="displayApp?.version || downloadCount"
class="mt-1 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-sm text-slate-500 dark:text-slate-400"
>
<span v-if="displayApp?.version">{{ displayApp.version }}</span>
<span
class="text-sm font-semibold text-slate-800 dark:text-slate-200"
>{{ displayApp?.version || "-" }}</span
v-if="displayApp?.version && downloadCount"
class="text-slate-300 dark:text-slate-600"
>·</span
>
<span v-if="downloadCount" class="flex items-center gap-1">
<svg
class="w-3.5 h-3.5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
{{ downloadCount }}
</span>
</div>
</div>
<!-- 应用来源切换 -->
@@ -121,21 +133,6 @@
</span>
</div>
<!-- 下载量 -->
<div
v-if="downloadCount"
class="flex items-center justify-between rounded-2xl border border-slate-200/60 bg-slate-50/50 px-4 py-3 dark:border-slate-800/60 dark:bg-slate-800/50"
>
<span class="text-sm text-slate-500 dark:text-slate-400"
>下载量</span
>
<span
class="text-sm font-semibold text-slate-800 dark:text-slate-200"
>{{ downloadCount }}</span
>
</div>
</div>
<!-- 功能按钮 -->
<div class="space-y-2">
<button