@huyooo/file-explorer-frontend-vue 0.4.10 → 0.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huyooo/file-explorer-frontend-vue",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "description": "File Explorer Frontend - Vue components for file management",
   "type": "module",
   "main": "./dist/index.js",
@@ -29,8 +29,7 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@iconify/vue": "^5.0.0",
-    "lucide-vue-next": "^0.460.0"
+    "@iconify/vue": "^5.0.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",

package/src/components/CompressDialog.vue

@@ -5,11 +5,11 @@
         <!-- 头部 -->
         <div class="compress-dialog-header">
           <div class="compress-dialog-title">
-            <Archive :size="20" />
+            <Icon icon="lucide:archive" width="20" height="20" />
             <span>压缩文件</span>
           </div>
           <button class="compress-dialog-close" @click="emit('cancel')">
-            <X :size="18" />
+            <Icon icon="lucide:x" width="18" height="18" />
           </button>
         </div>
 
@@ -17,7 +17,7 @@
         <div class="compress-dialog-content">
           <!-- 文件信息 -->
           <div class="compress-dialog-info">
-            <FileArchive :size="16" />
+            <Icon icon="lucide:file-archive" width="16" height="16" />
             <span>{{ fileDisplayName }}</span>
           </div>
 
@@ -115,7 +115,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
-import { Archive, FileArchive, X } from 'lucide-vue-next';
+import { Icon } from '@iconify/vue';
 import type { CompressFormat, CompressLevel, CompressOptions } from '../types';
 
 type CompressDialogOptions = Omit<CompressOptions, 'outputDir'>;

package/src/components/FileInfoDialog.vue

@@ -15,7 +15,7 @@
             </span>
           </div>
           <button class="file-info-dialog-close" @click="emit('close')">
-            <X :size="18" />
+            <Icon icon="lucide:x" width="18" height="18" />
           </button>
         </div>
 
@@ -24,7 +24,7 @@
           <!-- 类型 -->
           <div class="file-info-row">
             <div class="file-info-label">
-              <File :size="14" />
+              <Icon icon="lucide:file" width="14" height="14" />
               <span>类型</span>
             </div>
             <div class="file-info-value">
@@ -35,7 +35,7 @@
           <!-- 大小 -->
           <div v-if="item.type !== FileType.FOLDER && item.size" class="file-info-row">
             <div class="file-info-label">
-              <HardDrive :size="14" />
+              <Icon icon="lucide:hard-drive" width="14" height="14" />
               <span>大小</span>
             </div>
             <div class="file-info-value">
@@ -46,7 +46,7 @@
           <!-- 位置 -->
           <div class="file-info-row">
             <div class="file-info-label">
-              <MapPin :size="14" />
+              <Icon icon="lucide:map-pin" width="14" height="14" />
               <span>位置</span>
             </div>
             <div class="file-info-value file-info-value--path" :title="directory">
@@ -57,7 +57,7 @@
           <!-- 完整路径 -->
           <div class="file-info-row">
             <div class="file-info-label">
-              <MapPin :size="14" />
+              <Icon icon="lucide:map-pin" width="14" height="14" />
               <span>完整路径</span>
             </div>
             <div class="file-info-value file-info-value--path" :title="item.id">
@@ -68,7 +68,7 @@
           <!-- 修改时间 -->
           <div v-if="item.dateModified" class="file-info-row">
             <div class="file-info-label">
-              <Clock :size="14" />
+              <Icon icon="lucide:clock" width="14" height="14" />
               <span>修改时间</span>
             </div>
             <div class="file-info-value">
@@ -91,19 +91,6 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted } from 'vue';
 import { Icon } from '@iconify/vue';
-import { 
-  File, 
-  Image, 
-  Video, 
-  Music, 
-  FileText, 
-  Code,
-  Archive,
-  X,
-  MapPin,
-  HardDrive,
-  Clock
-} from 'lucide-vue-next';
 import { FileType, type FileItem } from '../types';
 import { getFileTypeIcon } from '../utils/fileTypeIcon';
 

package/src/components/FileListView.vue

@@ -12,7 +12,7 @@
 
     <!-- 空文件夹 -->
     <div v-else-if="items.length === 0" class="file-list-view-empty">
-      <FolderOpen :size="64" class="file-list-view-empty-icon" />
+      <Icon icon="lucide:folder-open" width="64" height="64" class="file-list-view-empty-icon" />
       <p>文件夹为空</p>
     </div>
 
@@ -63,7 +63,7 @@
 
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue';
-import { FolderOpen } from 'lucide-vue-next';
+import { Icon } from '@iconify/vue';
 import FileGrid from './FileGrid.vue';
 import FileList from './FileList.vue';
 import { FileType, type FileItem, type SortConfig, type FileExplorerAdapter } from '../types';

package/src/components/ProgressDialog.vue

@@ -5,11 +5,11 @@
         <!-- 头部 -->
         <div class="progress-dialog-header">
           <div class="progress-dialog-title">
-            <component :is="statusIcon" :size="24" :class="statusIconClass" />
+            <Icon :icon="statusIconName" width="24" height="24" :class="statusIconClass" />
             <span>{{ title }}</span>
           </div>
           <button v-if="isCompleted" class="progress-dialog-close" @click="handleClose">
-            <X :size="18" />
+            <Icon icon="lucide:x" width="18" height="18" />
           </button>
         </div>
 
@@ -65,7 +65,7 @@
             class="progress-dialog-btn progress-dialog-btn-folder" 
             @click="emit('openFolder', progress.outputPath!)"
           >
-            <FolderOpen :size="16" />
+            <Icon icon="lucide:folder-open" width="16" height="16" />
             打开文件夹
           </button>
           <button 
@@ -83,7 +83,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { X, Loader2, CheckCircle, XCircle, Archive, FolderOpen } from 'lucide-vue-next';
+import { Icon } from '@iconify/vue';
 
 /** 进度状态 */
 export type ProgressStatus = 'pending' | 'processing' | 'success' | 'error';
@@ -116,12 +116,12 @@ const emit = defineEmits<{
 const title = computed(() => props.progress.type === 'compress' ? '压缩文件' : '解压文件');
 const isCompleted = computed(() => props.progress.status === 'success' || props.progress.status === 'error');
 
-const statusIcon = computed(() => {
+const statusIconName = computed(() => {
   switch (props.progress.status) {
-    case 'processing': return Loader2;
-    case 'success': return CheckCircle;
-    case 'error': return XCircle;
-    default: return Archive;
+    case 'processing': return 'lucide:loader-2';
+    case 'success': return 'lucide:check-circle';
+    case 'error': return 'lucide:x-circle';
+    default: return 'lucide:archive';
   }
 });
 

package/src/components/Window.vue

@@ -21,21 +21,21 @@
               @click.stop="handleClose" 
               class="window-control-button window-control-button--close"
             >
-              <X :size="7" class="window-control-icon" />
+              <Icon icon="lucide:x" width="7" height="7" class="window-control-icon" />
             </button>
             <button 
               v-if="showMinimize"
               @click.stop="handleMinimize" 
               class="window-control-button window-control-button--minimize"
             >
-              <Minus :size="7" class="window-control-icon" />
+              <Icon icon="lucide:minus" width="7" height="7" class="window-control-icon" />
             </button>
             <button 
               v-if="showMaximize"
               @click.stop="handleMaximize" 
               class="window-control-button window-control-button--maximize"
             >
-              <Maximize2 :size="7" class="window-control-icon" />
+              <Icon icon="lucide:maximize-2" width="7" height="7" class="window-control-icon" />
             </button>
           </div>
           
@@ -97,7 +97,7 @@
 
 <script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted } from 'vue';
-import { X, Minus, Maximize2 } from 'lucide-vue-next';
+import { Icon } from '@iconify/vue';
 import { useWindowDrag } from '../composables/useWindowDrag';
 import { useWindowResize } from '../composables/useWindowResize';