spark-store-project/spark-store
15
0
Fork 0
mirror of https://gitee.com/spark-store-project/spark-store synced 2026-04-26 09:20:18 +08:00
Code Issues 1 Packages Projects Releases Wiki Activity

refactor: enhance UI components with improved styling and transitions

Browse Source 
- Updated DownloadQueue.vue to use Tailwind CSS for styling and added transition effects for better user experience.
- Refactored InstalledAppsModal.vue to improve layout and responsiveness, incorporating Tailwind CSS styles.
- Enhanced ScreenPreview.vue with transitions and improved button styles for navigation.
- Revamped ThemeToggle.vue to provide a more modern toggle button design with accessibility features.
- Updated TopActions.vue to use Tailwind CSS for buttons and layout adjustments.
- Refined UpdateAppsModal.vue with a cleaner layout, improved button styles, and better handling of loading states.
This commit is contained in:
Elysia
2026-01-30 21:02:31 +08:00
parent 0002c2f9e1
commit 2625d24668
14 changed files with 529 additions and 2005 deletions
Download Patch File Download Diff File Expand all files Collapse all files

330
src/components/DownloadQueue.vue
View File

@@ -1,104 +1,72 @@
<template>
<div class="download-queue" :class="{ 'expanded': isExpanded }">
<!-- 队列头部 -->
<div class="queue-header" @click="toggleExpand">
<div class="queue-info">
<i class="fas fa-download"></i>
<span class="queue-title">下载队列</span>
<span class="queue-count" v-if="downloads.length > 0">({{ activeDownloads }}/{{ downloads.length }})</span>
<div
class="fixed inset-x-4 bottom-4 z-40 rounded-3xl border border-slate-200/70 bg-white/95 shadow-2xl backdrop-blur dark:border-slate-800/70 dark:bg-slate-900/90 sm:left-auto sm:right-6 sm:w-96">
<div class="flex items-center justify-between px-5 py-4" @click="toggleExpand">
<div class="flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-200">
<i class="fas fa-download text-brand"></i>
<span>下载队列</span>
<span v-if="downloads.length"
class="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-500 dark:bg-slate-800/70 dark:text-slate-300">
({{ activeDownloads }}/{{ downloads.length }})
</span>
</div>
<div class="queue-actions">
<button v-if="downloads.length > 0" @click.stop="clearCompleted" class="clear-btn" title="清除已完成">
<div class="flex items-center gap-2">
<button v-if="downloads.length" type="button"
class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200/70 text-slate-500 transition hover:text-slate-900 dark:border-slate-700 dark:text-slate-400"
title="清除已完成" @click.stop="clearCompleted">
<i class="fas fa-broom"></i>
</button>
<button @click.stop="toggleExpand" class="expand-btn">
<button type="button"
class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200/70 text-slate-500 transition hover:text-slate-900 dark:border-slate-700 dark:text-slate-400"
@click.stop="toggleExpand">
<i class="fas" :class="isExpanded ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
</button>
</div>
</div>
<!-- 队列列表 -->
<transition name="slide">
<div v-show="isExpanded" class="queue-list">
<div v-if="downloads.length === 0" class="empty-state">
<i class="fas fa-inbox"></i>
<p>暂无下载任务</p>
<Transition enter-active-class="duration-200 ease-out" enter-from-class="opacity-0 -translate-y-2"
enter-to-class="opacity-100 translate-y-0" leave-active-class="duration-150 ease-in"
leave-from-class="opacity-100 translate-y-0" leave-to-class="opacity-0 -translate-y-2">
<div v-show="isExpanded" class="max-h-96 overflow-y-auto px-3 pb-4">
<div v-if="downloads.length === 0"
class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200/80 px-4 py-12 text-slate-500 dark:border-slate-800/80 dark:text-slate-400">
<i class="fas fa-inbox text-3xl"></i>
<p class="mt-3 text-sm">暂无下载任务</p>
</div>
<div v-else class="download-items">
<div
v-for="download in downloads"
:key="download.id"
class="download-item"
:class="download.status"
@click="showDownloadDetail(download)"
>
<div class="download-icon">
<img :src="download.icon" :alt="download.name" />
<div v-else class="space-y-2">
<div v-for="download in downloads" :key="download.id"
class="flex cursor-pointer items-center gap-3 rounded-2xl border border-slate-200/70 bg-white/90 p-3 shadow-sm transition hover:border-brand/40 hover:shadow-lg dark:border-slate-800/70 dark:bg-slate-900"
:class="download.status === 'failed' ? 'border-rose-300/70 dark:border-rose-500/40' : ''"
@click="showDownloadDetail(download)">
<div class="h-12 w-12 overflow-hidden rounded-xl bg-slate-100 dark:bg-slate-800">
<img :src="download.icon" :alt="download.name" class="h-full w-full object-cover" />
</div>
<div class="download-info">
<div class="download-name">{{ download.name }}</div>
<div class="download-status-text">
<!-- downloading 这部分APM用不到，留给后续的Spark Store -->
<span v-if="download.status === 'downloading'">
下载中 {{ download.progress }}%
</span>
<span v-else-if="download.status === 'installing'">
安装中...
</span>
<span v-else-if="download.status === 'completed'">
已完成
</span>
<span v-else-if="download.status === 'failed'">
失败: {{ download.error }}
</span>
<span v-else-if="download.status === 'paused'">
已暂停
</span>
<span v-else>
等待中...
</span>
</div>
<div v-if="download.status === 'downloading'" class="progress-bar">
<div class="progress-fill" :style="{ width: download.progress + '%' }"></div>
<div class="flex-1">
<p class="truncate text-sm font-semibold text-slate-800 dark:text-slate-100">{{ download.name }}</p>
<p class="text-xs text-slate-500 dark:text-slate-400">
<span v-if="download.status === 'downloading'">下载中 {{ download.progress }}%</span>
<span v-else-if="download.status === 'installing'">安装中...</span>
<span v-else-if="download.status === 'completed'">已完成</span>
<span v-else-if="download.status === 'failed'">失败: {{ download.error }}</span>
<span v-else-if="download.status === 'paused'">已暂停</span>
<span v-else>等待中...</span>
</p>
<div v-if="download.status === 'downloading'"
class="mt-2 h-1.5 rounded-full bg-slate-100 dark:bg-slate-800">
<div class="h-full rounded-full bg-brand" :style="{ width: `${download.progress}%` }"></div>
</div>
</div>
<div class="download-actions">
<!-- <button
v-if="download.status === 'downloading'"
@click.stop="pauseDownload(download.id)"
class="action-icon"
title="暂停"
>
<i class="fas fa-pause"></i>
</button>
<button
v-else-if="download.status === 'paused'"
@click.stop="resumeDownload(download.id)"
class="action-icon"
title="继续"
>
<i class="fas fa-play"></i>
</button> -->
<button
v-if="download.status === 'failed'"
@click.stop="retryDownload(download.id)"
class="action-icon"
title="重试"
>
<div class="flex items-center gap-2">
<button v-if="download.status === 'failed'" type="button"
class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-rose-200/60 text-rose-500 transition hover:bg-rose-50"
title="重试" @click.stop="retryDownload(download.id)">
<i class="fas fa-redo"></i>
</button>
<!-- <button
@click.stop="cancelDownload(download.id)"
class="action-icon"
title="取消"
>
<i class="fas fa-times"></i>
</button> -->
</div>
</div>
</div>
</div>
</transition>
</Transition>
</div>
</template>
@@ -157,201 +125,3 @@ const showDownloadDetail = (download) => {
emit('show-detail', download);
};
</script>
<style scoped>
.download-queue {
position: fixed;
bottom: 0;
right: 20px;
width: 400px;
max-height: 500px;
background: var(--card);
border-radius: 12px 12px 0 0;
box-shadow: var(--shadow);
z-index: 1000;
transition: all 0.3s ease;
}
.download-queue:not(.expanded) {
max-height: 60px;
}
.queue-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
cursor: pointer;
border-bottom: 1px solid var(--border);
user-select: none;
}
.queue-header:hover {
background: var(--glass);
border-radius: 12px 12px 0 0;
}
.queue-info {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
}
.queue-info i {
color: var(--primary);
}
.queue-count {
color: var(--muted);
font-size: 14px;
}
.queue-actions {
display: flex;
gap: 8px;
}
.clear-btn,
.expand-btn {
background: transparent;
border: none;
padding: 6px 10px;
cursor: pointer;
border-radius: 6px;
color: var(--text);
transition: all 0.2s;
}
.clear-btn:hover,
.expand-btn:hover {
background: var(--glass);
}
.queue-list {
max-height: 440px;
overflow-y: auto;
}
.slide-enter-active,
.slide-leave-active {
transition: all 0.3s ease;
}
.slide-enter-from,
.slide-leave-to {
max-height: 0;
opacity: 0;
}
.empty-state {
padding: 40px 20px;
text-align: center;
color: var(--muted);
}
.empty-state i {
font-size: 48px;
margin-bottom: 12px;
opacity: 0.5;
}
.download-items {
padding: 8px 0;
}
.download-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
cursor: pointer;
transition: background 0.2s;
}
.download-item:hover {
background: var(--glass);
}
.download-item.completed {
opacity: 0.7;
}
.download-item.failed {
background: rgba(255, 59, 48, 0.1);
}
.download-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
}
.download-icon img {
width: 100%;
height: 100%;
border-radius: 12px;
object-fit: cover;
}
.download-info {
flex: 1;
min-width: 0;
}
.download-name {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
}
.download-status-text {
font-size: 13px;
color: var(--muted);
margin-bottom: 6px;
}
.progress-bar {
width: 100%;
height: 4px;
background: var(--glass);
border-radius: 2px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--primary);
transition: width 0.3s ease;
}
.download-actions {
display: flex;
gap: 4px;
}
.action-icon {
background: transparent;
border: none;
padding: 8px;
cursor: pointer;
border-radius: 6px;
color: var(--text);
transition: all 0.2s;
}
.action-icon:hover {
background: var(--glass);
color: var(--primary);
}
@media (max-width: 768px) {
.download-queue {
right: 10px;
width: calc(100% - 20px);
max-width: 400px;
}
}
</style>