kjqwdw/pixiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui层级修复

Browse Source
This commit is contained in:
kjqwer
2025-10-13 13:34:00 +08:00
parent f274fc4b00
commit a075c94948
10 changed files with 139 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/artwork/ArtworkInfoPanel.vue
+1 -1
View File
@@ -753,7 +753,7 @@ input:checked+.slider:before {
grid-template-columns: auto 1fr auto;
gap: var(--spacing-sm);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
z-index: 2000;
z-index: 1001;
}
.nav-back {
ui/src/components/common/DownloadProgressWidget.vue
+3 -3
View File
@@ -209,7 +209,7 @@ onUnmounted(() => {
position: fixed;
top: 4.5rem;
right: 1rem;
z-index: 1000;
z-index: 1002;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
@@ -554,7 +554,7 @@ onUnmounted(() => {
background-clip: text;
}
.stat-value.success + .stat-label {
.stat-value.success+.stat-label {
color: #047857;
}
@@ -570,7 +570,7 @@ onUnmounted(() => {
background-clip: text;
}
.stat-value.error + .stat-label {
.stat-value.error+.stat-label {
color: #b91c1c;
}
ui/src/components/common/RegistryWidget.vue
+46 -35
View File
@@ -1,5 +1,5 @@
<template>
<div class="registry-widget">
<div class="registry-widget" :class="{ 'panel-open': isOpen }">
<!-- 注册表管理按钮 -->
<button @click="togglePanel" class="registry-toggle" :class="{ active: isOpen }" title="下载注册表管理">
<SvgIcon name="down" class="registry-icon" />
@@ -82,9 +82,11 @@
</label>
</div>
<div class="storage-option" :class="{ active: selectedStorageMode === 'database', disabled: !databaseConnected }">
<div class="storage-option"
:class="{ active: selectedStorageMode === 'database', disabled: !databaseConnected }">
<label>
<input type="radio" v-model="selectedStorageMode" value="database" :disabled="migrationLoading || !databaseConnected" />
<input type="radio" v-model="selectedStorageMode" value="database"
:disabled="migrationLoading || !databaseConnected" />
<div class="option-content">
<div class="option-header">
<SvgIcon name="database" class="option-icon" />
@@ -146,20 +148,14 @@
</div>
<div class="action-buttons">
<button
@click="applyStorageModeConfig"
class="btn btn-enhanced btn-primary"
:disabled="migrationLoading || !hasStorageModeChanges || (selectedStorageMode === 'database' && !databaseConnected)"
>
<button @click="applyStorageModeConfig" class="btn btn-enhanced btn-primary"
:disabled="migrationLoading || !hasStorageModeChanges || (selectedStorageMode === 'database' && !databaseConnected)">
<SvgIcon name="save" class="btn-icon" />
{{ migrationLoading ? '应用中...' : getApplyButtonText() }}
</button>
<button
@click="resetStorageModeConfig"
class="btn btn-enhanced btn-secondary"
:disabled="migrationLoading || !hasStorageModeChanges"
>
<button @click="resetStorageModeConfig" class="btn btn-enhanced btn-secondary"
:disabled="migrationLoading || !hasStorageModeChanges">
<SvgIcon name="refresh" class="btn-icon" />
重置
</button>
@@ -167,7 +163,8 @@
</div>
<div class="database-actions">
<button @click="openDatabaseConfig" class="btn btn-enhanced btn-secondary" :disabled="migrationLoading">
<button @click="openDatabaseConfig" class="btn btn-enhanced btn-secondary"
:disabled="migrationLoading">
<SvgIcon name="settings" class="btn-icon" />
数据库配置
</button>
@@ -240,12 +237,14 @@
<div class="action-group">
<div class="action-group-title">基础操作</div>
<div class="action-buttons basic-actions">
<button @click="refreshStats" class="btn btn-enhanced btn-secondary" :disabled="loading || isRebuildingRegistry">
<button @click="refreshStats" class="btn btn-enhanced btn-secondary"
:disabled="loading || isRebuildingRegistry">
<SvgIcon name="refresh" class="btn-icon" />
刷新统计
</button>
<button @click="exportRegistry" class="btn btn-enhanced btn-primary" :disabled="loading || isRebuildingRegistry">
<button @click="exportRegistry" class="btn btn-enhanced btn-primary"
:disabled="loading || isRebuildingRegistry">
<SvgIcon name="download" class="btn-icon" />
导出注册表
</button>
@@ -263,12 +262,14 @@
<div class="action-group">
<div class="action-group-title">高级操作</div>
<div class="action-buttons advanced-actions">
<button @click="rebuildRegistry" class="btn btn-enhanced btn-warning" :disabled="loading || isRebuildingRegistry">
<button @click="rebuildRegistry" class="btn btn-enhanced btn-warning"
:disabled="loading || isRebuildingRegistry">
<SvgIcon name="rebuild" class="btn-icon" />
{{ isRebuildingRegistry ? '同步中...' : '同步文件系统' }}
</button>
<button @click="cleanupRegistry" class="btn btn-enhanced btn-danger" :disabled="loading || isRebuildingRegistry">
<button @click="cleanupRegistry" class="btn btn-enhanced btn-danger"
:disabled="loading || isRebuildingRegistry">
<SvgIcon name="clean" class="btn-icon" />
清理注册表
</button>
@@ -327,11 +328,8 @@
</div>
<!-- 数据库配置模态框 -->
<DatabaseConfigModal
:visible="showDatabaseConfig"
@close="closeDatabaseConfig"
@saved="handleDatabaseConfigSaved"
/>
<DatabaseConfigModal :visible="showDatabaseConfig" @close="closeDatabaseConfig"
@saved="handleDatabaseConfigSaved" />
</div>
</template>
@@ -859,6 +857,11 @@ watch(config, () => {
bottom: 1rem;
left: 1rem;
z-index: 1000;
transition: z-index 0.1s ease;
}
.registry-widget.panel-open {
z-index: 1002;
}
.registry-toggle {
@@ -1148,7 +1151,7 @@ watch(config, () => {
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.03), transparent 50%),
radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.03), transparent 50%);
radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.03), transparent 50%);
pointer-events: none;
}
@@ -1790,6 +1793,7 @@ watch(config, () => {
0% {
opacity: 0.6;
}
100% {
opacity: 1;
}
@@ -1821,9 +1825,12 @@ watch(config, () => {
}
@keyframes pulse {
0%, 100% {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
@@ -1942,9 +1949,9 @@ watch(config, () => {
right: 0;
bottom: 0;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.1) 100%);
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.1) 100%);
animation: shimmer 2s infinite;
pointer-events: none;
}
@@ -1952,9 +1959,9 @@ watch(config, () => {
.progress-fill {
height: 100%;
background: linear-gradient(90deg,
var(--color-success, #16a34a) 0%,
var(--color-info, #06b6d4) 50%,
var(--color-warning, #f59e0b) 100%);
var(--color-success, #16a34a) 0%,
var(--color-info, #06b6d4) 50%,
var(--color-warning, #f59e0b) 100%);
border-radius: var(--radius-full, 9999px);
transition: width 0.5s ease-out;
position: relative;
@@ -1969,9 +1976,9 @@ watch(config, () => {
right: 0;
bottom: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%);
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%);
animation: progressShine 1.5s ease-in-out infinite;
}
@@ -1979,6 +1986,7 @@ watch(config, () => {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
@@ -2183,9 +2191,12 @@ watch(config, () => {
}
@keyframes pulse {
0%, 100% {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
ui/src/components/common/SettingsWidget.vue
+6 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="settings-widget">
<div class="settings-widget" :class="{ 'panel-open': isOpen }">
<!-- 设置按钮 -->
<button @click="toggleSettings" class="settings-toggle" :class="{ active: isOpen }" title="设置">
<SvgIcon name="settings" class="settings-icon" />
@@ -569,6 +569,11 @@ onMounted(() => {
bottom: 2rem;
right: 2rem;
z-index: 1000;
transition: z-index 0.1s ease;
}
.settings-widget.panel-open {
z-index: 1002;
}
.settings-toggle {
ui/src/components/common/WatchlistWidget.vue
+1 -1
View File
@@ -575,7 +575,7 @@ watch(() => route.fullPath, () => {
position: fixed;
top: 4.5rem;
left: 1rem;
z-index: 1000;
z-index: 1002;
display: flex;
flex-direction: column;
gap: 8px;
ui/src/components/common/watchlist/AddModal.vue
+1 -1
View File
@@ -179,7 +179,7 @@ const handleSave = () => {
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
z-index: 1002;
backdrop-filter: blur(4px);
}
ui/src/components/common/watchlist/EditModal.vue
+1 -1
View File
@@ -61,7 +61,7 @@ const handleSave = () => {
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
z-index: 1002;
backdrop-filter: blur(4px);
}
ui/src/components/common/watchlist/WatchlistPanel.vue
+1 -1
View File
@@ -156,7 +156,7 @@ const handleFileImport = async (event: Event) => {
border: 1px solid var(--color-border);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
z-index: 100;
z-index: 1002;
display: flex;
flex-direction: column;
overflow: hidden;
ui/src/components/download/DownloadProgress.vue
+8 -8
View File
@@ -3,16 +3,15 @@
<div class="progress-header">
<h4 class="progress-title">{{ getTaskTitle(task) }}</h4>
<div class="progress-actions">
<button v-if="task.status === 'downloading' || task.status === 'pausing'" @click="pauseTask" class="btn btn-sm btn-secondary"
:disabled="loading || task.status === 'pausing'">
<button v-if="task.status === 'downloading' || task.status === 'pausing'" @click="pauseTask"
class="btn btn-sm btn-secondary" :disabled="loading || task.status === 'pausing'">
{{ task.status === 'pausing' ? '暂停中...' : '暂停' }}
</button>
<button v-if="task.status === 'paused' || task.status === 'resuming'" @click="resumeTask" class="btn btn-sm btn-primary"
:disabled="loading || task.status === 'resuming'">
<button v-if="task.status === 'paused' || task.status === 'resuming'" @click="resumeTask"
class="btn btn-sm btn-primary" :disabled="loading || task.status === 'resuming'">
{{ task.status === 'resuming' ? '恢复中...' : '恢复' }}
</button>
<button @click="cancelTask" class="btn btn-sm btn-danger"
:disabled="loading || task.status === 'cancelling'">
<button @click="cancelTask" class="btn btn-sm btn-danger" :disabled="loading || task.status === 'cancelling'">
{{ task.status === 'cancelling' ? '取消中...' : '取消' }}
</button>
</div>
@@ -192,6 +191,7 @@ const cancelTask = async () => {
border-radius: 0.75rem;
padding: 1.25rem;
margin-bottom: 0;
z-index: 1002;
}
.progress-header {
@@ -514,7 +514,7 @@ const cancelTask = async () => {
background-clip: text;
}
.stat-value.success + .stat-label {
.stat-value.success+.stat-label {
color: #047857;
}
@@ -530,7 +530,7 @@ const cancelTask = async () => {
background-clip: text;
}
.stat-value.error + .stat-label {
.stat-value.error+.stat-label {
color: #b91c1c;
}
ui/src/views/ArtworkView.vue
+9 -6
View File
@@ -29,8 +29,8 @@
@page-change="currentImagePage = $event" />
<!-- 右侧信息面板组件 -->
<ArtworkInfoPanel :artwork="artwork" :downloading="downloading" :deleting="deleting" :is-downloaded="isDownloaded"
:current-task="currentTask" :loading="loading" :show-navigation="showNavigation"
<ArtworkInfoPanel :artwork="artwork" :downloading="downloading" :deleting="deleting"
:is-downloaded="isDownloaded" :current-task="currentTask" :loading="loading" :show-navigation="showNavigation"
:previous-artwork="previousArtwork" :next-artwork="nextArtwork" :canNavigatePrevious="canNavigateToPrevious"
:canNavigateNext="canNavigateToNext" :selected-tags="selectedTags" :show-recommendations="showRecommendations"
:show-caption="showCaption" @download="handleDownload" @delete="handleDelete" @go-back="goBackToArtist"
@@ -994,18 +994,21 @@ onUnmounted(() => {
@media (max-width: 768px) {
.artwork-page {
padding: 1rem 0 0 0; /* 移除底部内边距 */
padding: 1rem 0 0 0;
/* 移除底部内边距 */
}
.container {
padding: 0 1rem;
margin-bottom: 0; /* 移除底部外边距 */
margin-bottom: 0;
/* 移除底部外边距 */
}
.artwork-content {
gap: 1rem;
transition: transform 0.3s ease, opacity 0.3s ease;
padding-bottom: 0; /* 确保没有额外的底部内边距 */
padding-bottom: 0;
/* 确保没有额外的底部内边距 */
}
.artwork-content.swiping {
@@ -1026,7 +1029,7 @@ onUnmounted(() => {
border-radius: 2rem;
font-size: 0.875rem;
font-weight: 500;
z-index: 1000;
z-index: 1002;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;