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; grid-template-columns: auto 1fr auto;
gap: var(--spacing-sm); gap: var(--spacing-sm);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
z-index: 2000; z-index: 1001;
} }
.nav-back { .nav-back {
ui/src/components/common/DownloadProgressWidget.vue
+1 -1
View File
@@ -209,7 +209,7 @@ onUnmounted(() => {
position: fixed; position: fixed;
top: 4.5rem; top: 4.5rem;
right: 1rem; right: 1rem;
z-index: 1000; z-index: 1002;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
} }
ui/src/components/common/RegistryWidget.vue
+36 -25
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="registry-widget"> <div class="registry-widget" :class="{ 'panel-open': isOpen }">
<!-- 注册表管理按钮 --> <!-- 注册表管理按钮 -->
<button @click="togglePanel" class="registry-toggle" :class="{ active: isOpen }" title="下载注册表管理"> <button @click="togglePanel" class="registry-toggle" :class="{ active: isOpen }" title="下载注册表管理">
<SvgIcon name="down" class="registry-icon" /> <SvgIcon name="down" class="registry-icon" />
@@ -82,9 +82,11 @@
</label> </label>
</div> </div>
<div class="storage-option" :class="{ active: selectedStorageMode === 'database', disabled: !databaseConnected }"> <div class="storage-option"
:class="{ active: selectedStorageMode === 'database', disabled: !databaseConnected }">
<label> <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-content">
<div class="option-header"> <div class="option-header">
<SvgIcon name="database" class="option-icon" /> <SvgIcon name="database" class="option-icon" />
@@ -146,20 +148,14 @@
</div> </div>
<div class="action-buttons"> <div class="action-buttons">
<button <button @click="applyStorageModeConfig" class="btn btn-enhanced btn-primary"
@click="applyStorageModeConfig" :disabled="migrationLoading || !hasStorageModeChanges || (selectedStorageMode === 'database' && !databaseConnected)">
class="btn btn-enhanced btn-primary"
:disabled="migrationLoading || !hasStorageModeChanges || (selectedStorageMode === 'database' && !databaseConnected)"
>
<SvgIcon name="save" class="btn-icon" /> <SvgIcon name="save" class="btn-icon" />
{{ migrationLoading ? '应用中...' : getApplyButtonText() }} {{ migrationLoading ? '应用中...' : getApplyButtonText() }}
</button> </button>
<button <button @click="resetStorageModeConfig" class="btn btn-enhanced btn-secondary"
@click="resetStorageModeConfig" :disabled="migrationLoading || !hasStorageModeChanges">
class="btn btn-enhanced btn-secondary"
:disabled="migrationLoading || !hasStorageModeChanges"
>
<SvgIcon name="refresh" class="btn-icon" /> <SvgIcon name="refresh" class="btn-icon" />
重置 重置
</button> </button>
@@ -167,7 +163,8 @@
</div> </div>
<div class="database-actions"> <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" /> <SvgIcon name="settings" class="btn-icon" />
数据库配置 数据库配置
</button> </button>
@@ -240,12 +237,14 @@
<div class="action-group"> <div class="action-group">
<div class="action-group-title">基础操作</div> <div class="action-group-title">基础操作</div>
<div class="action-buttons basic-actions"> <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" /> <SvgIcon name="refresh" class="btn-icon" />
刷新统计 刷新统计
</button> </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" /> <SvgIcon name="download" class="btn-icon" />
导出注册表 导出注册表
</button> </button>
@@ -263,12 +262,14 @@
<div class="action-group"> <div class="action-group">
<div class="action-group-title">高级操作</div> <div class="action-group-title">高级操作</div>
<div class="action-buttons advanced-actions"> <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" /> <SvgIcon name="rebuild" class="btn-icon" />
{{ isRebuildingRegistry ? '同步中...' : '同步文件系统' }} {{ isRebuildingRegistry ? '同步中...' : '同步文件系统' }}
</button> </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" /> <SvgIcon name="clean" class="btn-icon" />
清理注册表 清理注册表
</button> </button>
@@ -327,11 +328,8 @@
</div> </div>
<!-- 数据库配置模态框 --> <!-- 数据库配置模态框 -->
<DatabaseConfigModal <DatabaseConfigModal :visible="showDatabaseConfig" @close="closeDatabaseConfig"
:visible="showDatabaseConfig" @saved="handleDatabaseConfigSaved" />
@close="closeDatabaseConfig"
@saved="handleDatabaseConfigSaved"
/>
</div> </div>
</template> </template>
@@ -859,6 +857,11 @@ watch(config, () => {
bottom: 1rem; bottom: 1rem;
left: 1rem; left: 1rem;
z-index: 1000; z-index: 1000;
transition: z-index 0.1s ease;
}
.registry-widget.panel-open {
z-index: 1002;
} }
.registry-toggle { .registry-toggle {
@@ -1790,6 +1793,7 @@ watch(config, () => {
0% { 0% {
opacity: 0.6; opacity: 0.6;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
@@ -1821,9 +1825,12 @@ watch(config, () => {
} }
@keyframes pulse { @keyframes pulse {
0%, 100% {
0%,
100% {
transform: scale(1); transform: scale(1);
} }
50% { 50% {
transform: scale(1.1); transform: scale(1.1);
} }
@@ -1979,6 +1986,7 @@ watch(config, () => {
0% { 0% {
transform: translateX(-100%); transform: translateX(-100%);
} }
100% { 100% {
transform: translateX(100%); transform: translateX(100%);
} }
@@ -2183,9 +2191,12 @@ watch(config, () => {
} }
@keyframes pulse { @keyframes pulse {
0%, 100% {
0%,
100% {
opacity: 1; opacity: 1;
} }
50% { 50% {
opacity: 0.7; opacity: 0.7;
} }
ui/src/components/common/SettingsWidget.vue
+6 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="settings-widget"> <div class="settings-widget" :class="{ 'panel-open': isOpen }">
<!-- 设置按钮 --> <!-- 设置按钮 -->
<button @click="toggleSettings" class="settings-toggle" :class="{ active: isOpen }" title="设置"> <button @click="toggleSettings" class="settings-toggle" :class="{ active: isOpen }" title="设置">
<SvgIcon name="settings" class="settings-icon" /> <SvgIcon name="settings" class="settings-icon" />
@@ -569,6 +569,11 @@ onMounted(() => {
bottom: 2rem; bottom: 2rem;
right: 2rem; right: 2rem;
z-index: 1000; z-index: 1000;
transition: z-index 0.1s ease;
}
.settings-widget.panel-open {
z-index: 1002;
} }
.settings-toggle { .settings-toggle {
ui/src/components/common/WatchlistWidget.vue
+1 -1
View File
@@ -575,7 +575,7 @@ watch(() => route.fullPath, () => {
position: fixed; position: fixed;
top: 4.5rem; top: 4.5rem;
left: 1rem; left: 1rem;
z-index: 1000; z-index: 1002;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
ui/src/components/common/watchlist/AddModal.vue
+1 -1
View File
@@ -179,7 +179,7 @@ const handleSave = () => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 1000; z-index: 1002;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
} }
ui/src/components/common/watchlist/EditModal.vue
+1 -1
View File
@@ -61,7 +61,7 @@ const handleSave = () => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 1000; z-index: 1002;
backdrop-filter: blur(4px); 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: 1px solid var(--color-border);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
z-index: 100; z-index: 1002;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
ui/src/components/download/DownloadProgress.vue
+6 -6
View File
@@ -3,16 +3,15 @@
<div class="progress-header"> <div class="progress-header">
<h4 class="progress-title">{{ getTaskTitle(task) }}</h4> <h4 class="progress-title">{{ getTaskTitle(task) }}</h4>
<div class="progress-actions"> <div class="progress-actions">
<button v-if="task.status === 'downloading' || task.status === 'pausing'" @click="pauseTask" class="btn btn-sm btn-secondary" <button v-if="task.status === 'downloading' || task.status === 'pausing'" @click="pauseTask"
:disabled="loading || task.status === 'pausing'"> class="btn btn-sm btn-secondary" :disabled="loading || task.status === 'pausing'">
{{ task.status === 'pausing' ? '暂停中...' : '暂停' }} {{ task.status === 'pausing' ? '暂停中...' : '暂停' }}
</button> </button>
<button v-if="task.status === 'paused' || task.status === 'resuming'" @click="resumeTask" class="btn btn-sm btn-primary" <button v-if="task.status === 'paused' || task.status === 'resuming'" @click="resumeTask"
:disabled="loading || task.status === 'resuming'"> class="btn btn-sm btn-primary" :disabled="loading || task.status === 'resuming'">
{{ task.status === 'resuming' ? '恢复中...' : '恢复' }} {{ task.status === 'resuming' ? '恢复中...' : '恢复' }}
</button> </button>
<button @click="cancelTask" class="btn btn-sm btn-danger" <button @click="cancelTask" class="btn btn-sm btn-danger" :disabled="loading || task.status === 'cancelling'">
:disabled="loading || task.status === 'cancelling'">
{{ task.status === 'cancelling' ? '取消中...' : '取消' }} {{ task.status === 'cancelling' ? '取消中...' : '取消' }}
</button> </button>
</div> </div>
@@ -192,6 +191,7 @@ const cancelTask = async () => {
border-radius: 0.75rem; border-radius: 0.75rem;
padding: 1.25rem; padding: 1.25rem;
margin-bottom: 0; margin-bottom: 0;
z-index: 1002;
} }
.progress-header { .progress-header {
ui/src/views/ArtworkView.vue
+9 -6
View File
@@ -29,8 +29,8 @@
@page-change="currentImagePage = $event" /> @page-change="currentImagePage = $event" />
<!-- 右侧信息面板组件 --> <!-- 右侧信息面板组件 -->
<ArtworkInfoPanel :artwork="artwork" :downloading="downloading" :deleting="deleting" :is-downloaded="isDownloaded" <ArtworkInfoPanel :artwork="artwork" :downloading="downloading" :deleting="deleting"
:current-task="currentTask" :loading="loading" :show-navigation="showNavigation" :is-downloaded="isDownloaded" :current-task="currentTask" :loading="loading" :show-navigation="showNavigation"
:previous-artwork="previousArtwork" :next-artwork="nextArtwork" :canNavigatePrevious="canNavigateToPrevious" :previous-artwork="previousArtwork" :next-artwork="nextArtwork" :canNavigatePrevious="canNavigateToPrevious"
:canNavigateNext="canNavigateToNext" :selected-tags="selectedTags" :show-recommendations="showRecommendations" :canNavigateNext="canNavigateToNext" :selected-tags="selectedTags" :show-recommendations="showRecommendations"
:show-caption="showCaption" @download="handleDownload" @delete="handleDelete" @go-back="goBackToArtist" :show-caption="showCaption" @download="handleDownload" @delete="handleDelete" @go-back="goBackToArtist"
@@ -994,18 +994,21 @@ onUnmounted(() => {
@media (max-width: 768px) { @media (max-width: 768px) {
.artwork-page { .artwork-page {
padding: 1rem 0 0 0; /* 移除底部内边距 */ padding: 1rem 0 0 0;
/* 移除底部内边距 */
} }
.container { .container {
padding: 0 1rem; padding: 0 1rem;
margin-bottom: 0; /* 移除底部外边距 */ margin-bottom: 0;
/* 移除底部外边距 */
} }
.artwork-content { .artwork-content {
gap: 1rem; gap: 1rem;
transition: transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease;
padding-bottom: 0; /* 确保没有额外的底部内边距 */ padding-bottom: 0;
/* 确保没有额外的底部内边距 */
} }
.artwork-content.swiping { .artwork-content.swiping {
@@ -1026,7 +1029,7 @@ onUnmounted(() => {
border-radius: 2rem; border-radius: 2rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
z-index: 1000; z-index: 1002;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: all 0.3s ease; transition: all 0.3s ease;