update
This commit is contained in:
Baobhan Sith
@@ -33,55 +33,24 @@ const handleItemClick = (item: ContextMenuItem) => {
|
||||
<template>
|
||||
<div
|
||||
v-if="isVisible"
|
||||
class="context-menu"
|
||||
class="fixed bg-background border border-border shadow-lg rounded-md z-[1002] min-w-[150px]"
|
||||
:style="{ top: `${position.y}px`, left: `${position.x}px` }"
|
||||
@click.stop
|
||||
>
|
||||
<ul>
|
||||
<ul class="list-none p-1 m-0">
|
||||
<li
|
||||
v-for="(menuItem, index) in items"
|
||||
:key="index"
|
||||
@click.stop="handleItemClick(menuItem)"
|
||||
:class="{ disabled: menuItem.disabled }"
|
||||
:class="[
|
||||
'px-4 py-1.5 cursor-pointer text-foreground text-sm flex items-center transition-colors duration-150 rounded',
|
||||
menuItem.disabled
|
||||
? 'text-text-secondary cursor-not-allowed opacity-60 bg-background'
|
||||
: 'hover:bg-hover'
|
||||
]"
|
||||
>
|
||||
{{ menuItem.label }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 从 FileManager.vue 移动过来的样式 */
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
background-color: var(--app-bg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
|
||||
z-index: 1002;
|
||||
min-width: 150px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.context-menu ul {
|
||||
list-style: none;
|
||||
padding: var(--base-margin, 0.5rem) 0; /* 使用 CSS 变量 */
|
||||
margin: 0;
|
||||
}
|
||||
.context-menu li {
|
||||
padding: 0.6rem var(--base-padding, 1rem); /* 使用 CSS 变量 */
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
font-size: 0.9em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background-color 0.15s ease; /* 添加过渡效果 */
|
||||
}
|
||||
.context-menu li:hover:not(.disabled) { /* 仅在非禁用时应用悬停效果 */
|
||||
background-color: var(--header-bg-color);
|
||||
}
|
||||
.context-menu li.disabled {
|
||||
color: var(--text-color-secondary);
|
||||
cursor: not-allowed;
|
||||
background-color: var(--app-bg-color); /* 确保禁用项背景与菜单一致 */
|
||||
opacity: 0.6;
|
||||
}
|
||||
</style>
|
||||
@@ -31,82 +31,20 @@ const handleCancel = (uploadId: string) => {
|
||||
|
||||
<template>
|
||||
<!-- 仅当有上传任务时显示 -->
|
||||
<div v-if="uploadList.length > 0" class="upload-popup">
|
||||
<h4>{{ t('fileManager.uploadTasks') }}:</h4>
|
||||
<ul>
|
||||
<li v-for="upload in uploadList" :key="upload.id">
|
||||
<span>{{ upload.filename }} ({{ t(`fileManager.uploadStatus.${upload.status}`) }})</span>
|
||||
<progress v-if="upload.status === 'uploading' || upload.status === 'pending'" :value="upload.progress" max="100"></progress>
|
||||
<span v-if="upload.status === 'uploading'"> {{ upload.progress }}%</span>
|
||||
<span v-if="upload.status === 'error'" class="error"> {{ t('fileManager.errors.generic') }}: {{ upload.error }}</span>
|
||||
<span v-if="upload.status === 'success'"> ✅</span>
|
||||
<span v-if="upload.status === 'cancelled'"> ❌ {{ t('fileManager.uploadStatus.cancelled') }}</span>
|
||||
<div v-if="uploadList.length > 0" class="fixed bottom-4 right-4 bg-background border border-border rounded-md shadow-md p-3 max-w-xs max-h-48 overflow-y-auto z-[1001] text-sm">
|
||||
<h4 class="m-0 mb-2 text-sm font-semibold border-b border-border pb-1">{{ t('fileManager.uploadTasks') }}:</h4>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li v-for="upload in uploadList" :key="upload.id" class="mb-1.5 text-xs flex items-center flex-wrap gap-2">
|
||||
<span class="flex-grow truncate" :title="upload.filename">{{ upload.filename }} ({{ t(`fileManager.uploadStatus.${upload.status}`) }})</span>
|
||||
<progress v-if="upload.status === 'uploading' || upload.status === 'pending'" :value="upload.progress" max="100" class="w-20 h-2 flex-shrink-0 [&::-webkit-progress-bar]:rounded-lg [&::-webkit-progress-value]:rounded-lg [&::-webkit-progress-bar]:bg-gray-300 [&::-webkit-progress-value]:bg-blue-600 [&::-moz-progress-bar]:bg-blue-600"></progress>
|
||||
<span v-if="upload.status === 'uploading'" class="text-xs flex-shrink-0"> {{ upload.progress }}%</span>
|
||||
<span v-if="upload.status === 'error'" class="text-red-600 basis-full text-xs"> {{ t('fileManager.errors.generic') }}: {{ upload.error }}</span>
|
||||
<span v-if="upload.status === 'success'" class="text-green-600"> ✅</span>
|
||||
<span v-if="upload.status === 'cancelled'" class="text-red-600"> ❌ {{ t('fileManager.uploadStatus.cancelled') }}</span>
|
||||
<!-- 只有在可取消状态时显示取消按钮 -->
|
||||
<button v-if="['pending', 'uploading', 'paused'].includes(upload.status)" @click="handleCancel(upload.id)" class="cancel-btn">{{ t('fileManager.actions.cancel') }}</button>
|
||||
<button v-if="['pending', 'uploading', 'paused'].includes(upload.status)" @click="handleCancel(upload.id)" class="ml-auto px-1.5 py-0.5 text-xs bg-red-100 border border-red-300 text-red-700 cursor-pointer rounded hover:bg-red-200 flex-shrink-0">{{ t('fileManager.actions.cancel') }}</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 样式从 FileManager.vue 迁移并保持一致 */
|
||||
.upload-popup {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||
padding: 0.8rem;
|
||||
max-width: 300px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
z-index: 1001; /* 确保在文件列表之上 */
|
||||
font-size: 0.9rem; /* 保持字体大小一致 */
|
||||
}
|
||||
.upload-popup h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 0.9em;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
.upload-popup ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.upload-popup li {
|
||||
margin-bottom: 0.4rem;
|
||||
font-size: 0.85em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem; /* 添加一些间隙 */
|
||||
}
|
||||
.upload-popup progress {
|
||||
/* margin: 0 0.5rem; */ /* 使用 gap 代替 */
|
||||
width: 80px;
|
||||
height: 0.8em;
|
||||
flex-shrink: 0; /* 防止进度条被压缩 */
|
||||
}
|
||||
.upload-popup .error {
|
||||
color: red;
|
||||
/* margin-left: 0.5rem; */ /* 使用 gap 代替 */
|
||||
flex-basis: 100%; /* 错误信息换行 */
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.upload-popup .cancel-btn {
|
||||
margin-left: auto; /* 将按钮推到右侧 */
|
||||
padding: 0.1rem 0.4rem;
|
||||
font-size: 0.8em;
|
||||
background-color: #f8d7da;
|
||||
border: 1px solid #f5c6cb;
|
||||
color: #721c24;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.upload-popup .cancel-btn:hover {
|
||||
background-color: #f5c6cb;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user