update

packages/frontend/src/components/FileManagerContextMenu.vue

@@ -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>

packages/frontend/src/components/FileUploadPopup.vue

@@ -31,82 +31,20 @@ const handleCancel = (uploadId: string) => {
 
 <template>
   <!-- 仅当有上传任务时显示 -->
-  <div v-if="uploadList.length > 0" class="upload-popup">
+  <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>{{ t('fileManager.uploadTasks') }}:</h4>
+    <h4 class="m-0 mb-2 text-sm font-semibold border-b border-border pb-1">{{ t('fileManager.uploadTasks') }}:</h4>
-    <ul>
+    <ul class="list-none p-0 m-0">
-      <li v-for="upload in uploadList" :key="upload.id">
+      <li v-for="upload in uploadList" :key="upload.id" class="mb-1.5 text-xs flex items-center flex-wrap gap-2">
-        <span>{{ upload.filename }} ({{ t(`fileManager.uploadStatus.${upload.status}`) }})</span>
+        <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"></progress>
+        <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'"> {{ upload.progress }}%</span>
+        <span v-if="upload.status === 'uploading'" class="text-xs flex-shrink-0"> {{ upload.progress }}%</span>
-        <span v-if="upload.status === 'error'" class="error"> {{ t('fileManager.errors.generic') }}: {{ upload.error }}</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'"> ✅</span>
+        <span v-if="upload.status === 'success'" class="text-green-600"> ✅</span>
-        <span v-if="upload.status === 'cancelled'"> ❌ {{ t('fileManager.uploadStatus.cancelled') }}</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>