@huyooo/file-explorer-frontend-react 0.4.14 → 0.4.16

package/src/components/FileGrid.css

@@ -42,23 +42,23 @@
 
 /* 悬停效果 - 类似 macOS */
 .file-grid-item--normal:hover {
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--huyooo-muted-hover);
 }
 
 /* 选中状态 - macOS 风格的蓝色高亮 */
 .file-grid-item--selected {
-  background: rgba(0, 122, 255, 0.12);
-  border-color: rgba(0, 122, 255, 0.2);
+  background: var(--huyooo-focus-ring);
+  border-color: var(--huyooo-primary);
 }
 
 .file-grid-item--selected:hover {
-  background: rgba(0, 122, 255, 0.16);
+  background: var(--huyooo-focus-ring);
 }
 
 /* 拖拽悬停 */
 .file-grid-item--drag-over {
-  background: rgba(0, 122, 255, 0.2);
-  border-color: rgba(0, 122, 255, 0.4);
+  background: var(--huyooo-focus-ring);
+  border-color: var(--huyooo-primary);
 }
 
 /* 图标/缩略图容器 - 统一尺寸 */
@@ -83,8 +83,8 @@
   object-position: center;
   border-radius: 4px;
   /* 轻微阴影增加层次感 */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
-  background: #f5f5f5;
+  box-shadow: var(--huyooo-shadow-sm);
+  background: var(--huyooo-muted);
   /* 确保图片能作为加载占位符，平滑过渡到原图 */
   display: block;
 }
@@ -98,7 +98,7 @@
 }
 
 .file-grid-item-thumbnail--selected {
-  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.2), 0 0 0 2px rgba(0, 122, 255, 0.3);
+  box-shadow: 0 0 0 2px var(--huyooo-primary), 0 0 0 6px var(--huyooo-focus-ring);
 }
 
 /* 视频缩略图容器 */
@@ -106,10 +106,10 @@
   position: relative;
   border-radius: 4px;
   overflow: hidden;
-  background: #000;
+  background: var(--huyooo-overlay-strong);
   width: 48px;
   height: 48px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--huyooo-shadow-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -144,7 +144,7 @@
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--huyooo-overlay);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
@@ -180,7 +180,7 @@
   user-select: none;
   cursor: default;
   transition: color 100ms;
-  color: #1d1d1f;
+  color: var(--huyooo-text);
   width: 100%;
   /* 使用 flexbox 布局，让扩展名始终显示 */
   display: flex;
@@ -222,46 +222,13 @@
   line-height: 1.3;
   text-align: center;
   padding: 2px 4px;
-  border: 1px solid #007aff;
+  border: 1px solid var(--huyooo-primary);
   border-radius: 3px;
   outline: none;
-  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
-  background: white;
+  box-shadow: 0 0 0 3px var(--huyooo-focus-ring);
+  background: var(--huyooo-surface-2);
+  color: var(--huyooo-text);
   cursor: text;
 }
 
-/* 深色模式支持 */
-@media (prefers-color-scheme: dark) {
-  .file-grid-item--normal:hover {
-    background: rgba(255, 255, 255, 0.06);
-  }
-
-  .file-grid-item--selected {
-    background: rgba(10, 132, 255, 0.25);
-    border-color: rgba(10, 132, 255, 0.3);
-  }
-
-  .file-grid-item--selected:hover {
-    background: rgba(10, 132, 255, 0.3);
-  }
-
-  .file-grid-item--drag-over {
-    background: rgba(10, 132, 255, 0.35);
-    border-color: rgba(10, 132, 255, 0.5);
-  }
-
-  .file-grid-item-thumbnail {
-    background: #2c2c2e;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);
-  }
-
-  .file-grid-item-name {
-    color: #f5f5f7;
-  }
-
-  .file-grid-item-rename-input {
-    background: #1c1c1e;
-    border-color: #0a84ff;
-    color: #f5f5f7;
-  }
-}
+/* 深色模式由 token 负责 */

package/src/components/FileIcon.css

@@ -1,41 +1,41 @@
 .file-icon--folder {
-  color: rgb(96, 165, 250);
-  fill: rgb(96, 165, 250);
+  color: var(--huyooo-primary);
+  fill: var(--huyooo-primary);
 }
 
 .file-icon--image {
-  color: rgb(168, 85, 247);
+  color: var(--huyooo-primary);
 }
 
 .file-icon--text {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
 }
 
 .file-icon--code {
-  color: rgb(34, 197, 94);
+  color: var(--huyooo-success);
 }
 
 .file-icon--music {
-  color: rgb(248, 113, 113);
+  color: var(--huyooo-danger);
 }
 
 .file-icon--video {
-  color: rgb(37, 99, 235);
+  color: var(--huyooo-primary);
 }
 
 .file-icon--pdf {
-  color: rgb(220, 38, 38);
+  color: var(--huyooo-danger);
 }
 
 .file-icon--application {
-  color: rgb(139, 92, 246);
+  color: var(--huyooo-primary);
 }
 
 .file-icon--archive {
-  color: rgb(234, 179, 8);
+  color: var(--huyooo-warning);
 }
 
 .file-icon--default {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
 }
 

package/src/components/FileIcon.tsx

@@ -17,7 +17,7 @@ export function FileIcon({ type, name, className = '', size = 24 }: FileIconProp
     if (type === FileType.FOLDER) {
       // 文件夹：先查特定类型图标，否则用默认 folder
       const folderIcon = name ? getFolderTypeIcon(name) : undefined;
-      return folderIcon ?? 'flat-color-icons:folder';
+      return folderIcon ?? 'ic:round-folder';
     }
     
     // 如果有文件名，使用 material-icon-theme 图标映射（传递 type 作为兜底）

package/src/components/FileInfoDialog.css

@@ -3,7 +3,7 @@
 .file-info-dialog-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--huyooo-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -17,15 +17,15 @@
 }
 
 .file-info-dialog {
-  background: #ffffff;
-  border: 1px solid #e0e0e0;
+  background: var(--huyooo-panel-bg);
+  border: 1px solid var(--huyooo-border);
   border-radius: 12px;
   width: 420px;
   max-width: 90vw;
   max-height: 80vh;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--huyooo-menu-shadow);
   animation: file-info-slideIn 0.2s ease-out;
 }
 
@@ -40,14 +40,7 @@
   }
 }
 
-/* 深色模式 */
-@media (prefers-color-scheme: dark) {
-  .file-info-dialog {
-    background: #2d2d2d;
-    border-color: #404040;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  }
-}
+/* 深色模式由 token 负责 */
 
 /* 头部 */
 .file-info-dialog-header {
@@ -55,15 +48,11 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--huyooo-border);
   gap: 12px;
 }
 
-@media (prefers-color-scheme: dark) {
-  .file-info-dialog-header {
-    border-bottom-color: #404040;
-  }
-}
+/* 深色模式由 token 负责 */
 
 .file-info-dialog-title {
   display: flex;
@@ -76,17 +65,13 @@
 .file-info-dialog-name {
   font-size: 16px;
   font-weight: 600;
-  color: #1a1a1a;
+  color: var(--huyooo-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-@media (prefers-color-scheme: dark) {
-  .file-info-dialog-name {
-    color: #e0e0e0;
-  }
-}
+/* 深色模式由 token 负责 */
 
 .file-info-dialog-close {
   display: flex;
@@ -96,7 +81,7 @@
   height: 28px;
   border: none;
   background: transparent;
-  color: #666;
+  color: var(--huyooo-text-muted);
   border-radius: 6px;
   cursor: pointer;
   flex-shrink: 0;
@@ -104,19 +89,11 @@
 }
 
 .file-info-dialog-close:hover {
-  background: #f0f0f0;
-  color: #333;
+  background: var(--huyooo-muted);
+  color: var(--huyooo-text);
 }
 
-@media (prefers-color-scheme: dark) {
-  .file-info-dialog-close {
-    color: #888;
-  }
-  .file-info-dialog-close:hover {
-    background: #404040;
-    color: #e0e0e0;
-  }
-}
+/* 深色模式由 token 负责 */
 
 /* 内容 */
 .file-info-dialog-content {
@@ -139,15 +116,11 @@
   gap: 6px;
   width: 90px;
   flex-shrink: 0;
-  color: #666;
+  color: var(--huyooo-text-muted);
   font-size: 13px;
 }
 
-@media (prefers-color-scheme: dark) {
-  .file-info-label {
-    color: #888;
-  }
-}
+/* 深色模式由 token 负责 */
 
 .file-info-label svg {
   flex-shrink: 0;
@@ -155,32 +128,25 @@
 
 .file-info-value {
   flex: 1;
-  color: #1a1a1a;
+  color: var(--huyooo-text);
   font-size: 13px;
   word-break: break-all;
   line-height: 1.4;
 }
 
-@media (prefers-color-scheme: dark) {
-  .file-info-value {
-    color: #e0e0e0;
-  }
-}
+/* 深色模式由 token 负责 */
 
 .file-info-value--path {
   font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
   font-size: 12px;
-  background: #f5f5f5;
+  background: var(--huyooo-code-bg);
+  color: var(--huyooo-code-text);
   padding: 4px 8px;
   border-radius: 4px;
   user-select: all;
 }
 
-@media (prefers-color-scheme: dark) {
-  .file-info-value--path {
-    background: #383838;
-  }
-}
+/* 深色模式由 token 负责 */
 
 /* 图标样式 */
 .file-info-icon {
@@ -190,35 +156,35 @@
 }
 
 .file-info-icon--folder {
-  color: #dcb67a;
+  color: var(--huyooo-filetype-folder);
 }
 
 .file-info-icon--image {
-  color: #7ec699;
+  color: var(--huyooo-filetype-image);
 }
 
 .file-info-icon--video {
-  color: #c678dd;
+  color: var(--huyooo-filetype-video);
 }
 
 .file-info-icon--music {
-  color: #e06c75;
+  color: var(--huyooo-filetype-music);
 }
 
 .file-info-icon--document {
-  color: #61afef;
+  color: var(--huyooo-filetype-document);
 }
 
 .file-info-icon--code {
-  color: #98c379;
+  color: var(--huyooo-filetype-code);
 }
 
 .file-info-icon--archive {
-  color: #d19a66;
+  color: var(--huyooo-filetype-archive);
 }
 
 .file-info-icon--file {
-  color: #abb2bf;
+  color: var(--huyooo-filetype-file);
 }
 
 /* 底部 */
@@ -226,14 +192,10 @@
   display: flex;
   justify-content: flex-end;
   padding: 12px 20px;
-  border-top: 1px solid #e0e0e0;
+  border-top: 1px solid var(--huyooo-border);
 }
 
-@media (prefers-color-scheme: dark) {
-  .file-info-dialog-footer {
-    border-top-color: #404040;
-  }
-}
+/* 深色模式由 token 负责 */
 
 .file-info-dialog-btn {
   padding: 6px 16px;
@@ -242,11 +204,11 @@
   font-size: 13px;
   cursor: pointer;
   transition: all 0.15s ease;
-  background: #007aff;
+  background: var(--huyooo-primary);
   color: white;
 }
 
 .file-info-dialog-btn:hover {
-  background: #0066d6;
+  background: var(--huyooo-primary-hover, var(--huyooo-primary));
 }
 

package/src/components/FileInfoDialog.tsx

@@ -23,7 +23,7 @@ export interface FileInfoDialogProps {
 function getFileIcon(type: FileType, name?: string) {
   // 文件夹使用 material-icon-theme:folder
   if (type === FileType.FOLDER) {
-    return <Icon icon="flat-color-icons:folder" width={48} height={48} className="file-info-icon" />;
+    return <Icon icon="ic:round-folder" width={48} height={48} className="file-info-icon" />;
   }
   
   // 如果有文件名，使用 material-icon-theme 图标映射（传递 type 作为兜底）

package/src/components/FileList.css

@@ -19,13 +19,13 @@
 /* 表头 - 更紧凑 */
 .file-list-header {
   font-size: 11px;
-  color: #86868b;
+  color: var(--huyooo-text-muted);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.3px;
   position: sticky;
   top: 0;
-  background: rgba(255, 255, 255, 0.92);
+  background: var(--huyooo-surface);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   z-index: 10;
@@ -34,7 +34,7 @@
 
 .file-list-header-cell {
   padding: 6px 12px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  border-bottom: 1px solid var(--huyooo-border);
   cursor: pointer;
   text-align: left;
   font-weight: 500;
@@ -42,7 +42,7 @@
 }
 
 .file-list-header-cell:hover {
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--huyooo-muted-hover);
 }
 
 .file-list-header-cell--name {
@@ -79,36 +79,36 @@
 
 /* 奇数行 - 轻微斑马纹 */
 .file-list-row--odd {
-  background: rgba(0, 0, 0, 0.015);
+  background: color-mix(in srgb, var(--huyooo-muted) 20%, transparent);
 }
 
 /* 悬停效果 */
 .file-list-row--even:hover,
 .file-list-row--odd:hover {
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--huyooo-muted-hover);
 }
 
 /* 选中状态 - macOS 风格整行高亮 */
 .file-list-row--selected {
-  background: #007aff;
+  background: var(--huyooo-primary);
   color: white;
 }
 
 .file-list-row--selected:hover {
-  background: #0066d6;
+  background: var(--huyooo-primary-hover, var(--huyooo-primary));
 }
 
 /* 拖拽悬停 */
 .file-list-row--drag-over {
-  background: rgba(0, 122, 255, 0.15);
-  border-bottom-color: rgba(0, 122, 255, 0.3);
+  background: var(--huyooo-focus-ring);
+  border-bottom-color: var(--huyooo-primary);
 }
 
 /* 单元格 - 更紧凑的行高 */
 .file-list-cell {
   padding: 4px 12px;
   white-space: nowrap;
-  color: #6e6e73;
+  color: var(--huyooo-text-muted);
   vertical-align: middle;
   height: 28px;
 }
@@ -124,14 +124,14 @@
 
 /* 选中时单元格颜色 */
 .file-list-cell--selected {
-  color: rgba(255, 255, 255, 0.75);
+  color: var(--huyooo-on-primary-muted);
 }
 
 /* 大小列 - 等宽字体 */
 .file-list-cell--size {
   font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
   font-size: 11px;
-  color: #8e8e93;
+  color: var(--huyooo-text-disabled);
   font-variant-numeric: tabular-nums;
 }
 
@@ -140,7 +140,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
-  color: #1d1d1f;
+  color: var(--huyooo-text);
   cursor: default;
   font-weight: 400;
 }
@@ -157,70 +157,13 @@
   flex: 1;
   font-size: 13px;
   padding: 2px 6px;
-  border: 1px solid #007aff;
+  border: 1px solid var(--huyooo-primary);
   border-radius: 4px;
   outline: none;
-  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
-  background: white;
+  box-shadow: 0 0 0 3px var(--huyooo-focus-ring);
+  background: var(--huyooo-surface-2);
+  color: var(--huyooo-text);
   cursor: text;
 }
 
-/* 深色模式支持 */
-@media (prefers-color-scheme: dark) {
-  .file-list-header {
-    background: rgba(28, 28, 30, 0.92);
-    color: #98989d;
-  }
-
-  .file-list-header-cell {
-    border-bottom-color: rgba(255, 255, 255, 0.08);
-  }
-
-  .file-list-header-cell:hover {
-    background: rgba(255, 255, 255, 0.04);
-  }
-
-  .file-list-row--odd {
-    background: rgba(255, 255, 255, 0.02);
-  }
-
-  .file-list-row--even:hover,
-  .file-list-row--odd:hover {
-    background: rgba(255, 255, 255, 0.06);
-  }
-
-  .file-list-row--selected {
-    background: #0a84ff;
-  }
-
-  .file-list-row--selected:hover {
-    background: #0077ed;
-  }
-
-  .file-list-row--drag-over {
-    background: rgba(10, 132, 255, 0.2);
-    border-bottom-color: rgba(10, 132, 255, 0.4);
-  }
-
-  .file-list-cell {
-    color: #98989d;
-  }
-
-  .file-list-cell--size {
-    color: #6e6e73;
-  }
-
-  .file-list-name {
-    color: #f5f5f7;
-  }
-
-  .file-list-name--selected {
-    color: white;
-  }
-
-  .file-list-rename-input {
-    background: #1c1c1e;
-    border-color: #0a84ff;
-    color: #f5f5f7;
-  }
-}
+/* 深色模式由 token 负责 */

package/src/components/FileListView.css

@@ -13,15 +13,15 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
   gap: 16px;
 }
 
 .file-list-view-spinner {
   width: 32px;
   height: 32px;
-  border: 3px solid rgba(156, 163, 175, 0.2);
-  border-top-color: rgb(59, 130, 246);
+  border: 3px solid color-mix(in srgb, var(--huyooo-text-disabled) 20%, transparent);
+  border-top-color: var(--huyooo-primary);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }