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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huyooo/file-explorer-frontend-vue",
-  "version": "0.4.12",
+  "version": "0.4.15",
   "description": "File Explorer Frontend - Vue components for file management",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/Breadcrumb.vue

@@ -81,30 +81,30 @@ const handleClick = (item: BreadcrumbItem, index: number) => {
   border: none;
   background: transparent;
   cursor: pointer;
-  color: rgb(75, 85, 99);
+  color: var(--huyooo-text-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .file-breadcrumb-link:hover {
-  background: rgba(229, 231, 233, 0.6);
-  color: rgb(17, 24, 39);
+  background: var(--huyooo-muted-hover);
+  color: var(--huyooo-text);
 }
 
 .file-breadcrumb-link--current {
   font-weight: 600;
-  color: rgb(17, 24, 39);
-  background: rgba(229, 231, 233, 0.5);
+  color: var(--huyooo-text);
+  background: var(--huyooo-muted);
   cursor: default;
 }
 
 .file-breadcrumb-link--current:hover {
-  background: rgba(229, 231, 233, 0.5);
+  background: var(--huyooo-muted);
 }
 
 .file-breadcrumb-separator {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
   margin: 0 0.25rem;
   flex-shrink: 0;
 }

package/src/components/CompressDialog.vue

@@ -214,7 +214,7 @@ const handleConfirm = () => {
 .compress-dialog-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--huyooo-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -222,9 +222,9 @@ const handleConfirm = () => {
 }
 
 .compress-dialog {
-  background: white;
+  background: var(--huyooo-panel-bg);
   border-radius: 12px;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--huyooo-shadow-lg);
   width: 420px;
   max-width: 90vw;
   max-height: 90vh;
@@ -238,7 +238,7 @@ const handleConfirm = () => {
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid rgb(229, 231, 233);
+  border-bottom: 1px solid var(--huyooo-border);
 }
 
 .compress-dialog-title {
@@ -247,7 +247,7 @@ const handleConfirm = () => {
   gap: 8px;
   font-weight: 600;
   font-size: 16px;
-  color: rgb(17, 24, 39);
+  color: var(--huyooo-text);
 }
 
 .compress-dialog-close {
@@ -255,7 +255,7 @@ const handleConfirm = () => {
   border: none;
   padding: 4px;
   cursor: pointer;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   border-radius: 4px;
   display: flex;
   align-items: center;
@@ -263,8 +263,8 @@ const handleConfirm = () => {
 }
 
 .compress-dialog-close:hover {
-  background: rgb(243, 244, 246);
-  color: rgb(55, 65, 81);
+  background: var(--huyooo-muted);
+  color: var(--huyooo-text);
 }
 
 .compress-dialog-content {
@@ -280,9 +280,9 @@ const handleConfirm = () => {
   align-items: center;
   gap: 8px;
   padding: 12px;
-  background: rgb(249, 250, 251);
+  background: var(--huyooo-surface);
   border-radius: 8px;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
   font-size: 14px;
 }
 
@@ -295,7 +295,7 @@ const handleConfirm = () => {
 .compress-dialog-field > label {
   font-size: 13px;
   font-weight: 500;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
 }
 
 .compress-dialog-input-group {
@@ -306,54 +306,57 @@ const handleConfirm = () => {
 .compress-dialog-input-group input {
   flex: 1;
   padding: 8px 12px;
-  border: 1px solid rgb(209, 213, 219);
+  border: 1px solid var(--huyooo-border);
   border-radius: 6px 0 0 6px;
   font-size: 14px;
   outline: none;
   transition: border-color 0.2s;
+  background: var(--huyooo-surface-2);
+  color: var(--huyooo-text);
 }
 
 .compress-dialog-input-group input:focus {
-  border-color: rgb(59, 130, 246);
+  border-color: var(--huyooo-primary);
 }
 
 .compress-dialog-ext {
   padding: 8px 12px;
-  background: rgb(243, 244, 246);
-  border: 1px solid rgb(209, 213, 219);
+  background: var(--huyooo-muted);
+  border: 1px solid var(--huyooo-border);
   border-left: none;
   border-radius: 0 6px 6px 0;
   font-size: 14px;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
 }
 
 .compress-dialog-toggle-password {
   padding: 8px 12px;
-  background: rgb(243, 244, 246);
-  border: 1px solid rgb(209, 213, 219);
+  background: var(--huyooo-muted);
+  border: 1px solid var(--huyooo-border);
   border-left: none;
   border-radius: 0 6px 6px 0;
   font-size: 12px;
-  color: rgb(59, 130, 246);
+  color: var(--huyooo-primary);
   cursor: pointer;
 }
 
 .compress-dialog-toggle-password:hover {
-  background: rgb(229, 231, 235);
+  background: var(--huyooo-muted-hover);
 }
 
 .compress-dialog-field select {
   padding: 8px 12px;
-  border: 1px solid rgb(209, 213, 219);
+  border: 1px solid var(--huyooo-border);
   border-radius: 6px;
   font-size: 14px;
   outline: none;
-  background: white;
+  background: var(--huyooo-surface-2);
+  color: var(--huyooo-text);
   cursor: pointer;
 }
 
 .compress-dialog-field select:focus {
-  border-color: rgb(59, 130, 246);
+  border-color: var(--huyooo-primary);
 }
 
 .compress-dialog-levels {
@@ -367,19 +370,19 @@ const handleConfirm = () => {
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  border: 1px solid rgb(229, 231, 233);
+  border: 1px solid var(--huyooo-border);
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .compress-dialog-level:hover {
-  background: rgb(249, 250, 251);
+  background: var(--huyooo-surface);
 }
 
 .compress-dialog-level:has(input:checked) {
-  border-color: rgb(59, 130, 246);
-  background: rgb(239, 246, 255);
+  border-color: var(--huyooo-primary);
+  background: var(--huyooo-focus-ring);
 }
 
 .compress-dialog-level input {
@@ -389,12 +392,12 @@ const handleConfirm = () => {
 .compress-dialog-level-label {
   font-size: 14px;
   font-weight: 500;
-  color: rgb(17, 24, 39);
+  color: var(--huyooo-text);
 }
 
 .compress-dialog-level-desc {
   font-size: 12px;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   margin-left: auto;
 }
 
@@ -404,7 +407,7 @@ const handleConfirm = () => {
   gap: 8px;
   cursor: pointer;
   font-size: 14px;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
 }
 
 .compress-dialog-checkbox input {
@@ -415,7 +418,7 @@ const handleConfirm = () => {
 
 .compress-dialog-preview {
   padding: 10px 12px;
-  background: rgb(249, 250, 251);
+  background: var(--huyooo-surface);
   border-radius: 6px;
   font-size: 12px;
   display: flex;
@@ -424,11 +427,11 @@ const handleConfirm = () => {
 }
 
 .compress-dialog-preview-label {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
 }
 
 .compress-dialog-preview-path {
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
   word-break: break-all;
 }
 
@@ -437,7 +440,7 @@ const handleConfirm = () => {
   justify-content: flex-end;
   gap: 12px;
   padding: 16px 20px;
-  border-top: 1px solid rgb(229, 231, 233);
+  border-top: 1px solid var(--huyooo-border);
 }
 
 .compress-dialog-btn {
@@ -450,28 +453,28 @@ const handleConfirm = () => {
 }
 
 .compress-dialog-btn-cancel {
-  background: white;
-  border: 1px solid rgb(209, 213, 219);
-  color: rgb(55, 65, 81);
+  background: var(--huyooo-surface-2);
+  border: 1px solid var(--huyooo-border);
+  color: var(--huyooo-text);
 }
 
 .compress-dialog-btn-cancel:hover {
-  background: rgb(249, 250, 251);
+  background: var(--huyooo-surface);
 }
 
 .compress-dialog-btn-confirm {
-  background: rgb(59, 130, 246);
-  border: 1px solid rgb(59, 130, 246);
+  background: var(--huyooo-primary);
+  border: 1px solid var(--huyooo-primary);
   color: white;
 }
 
 .compress-dialog-btn-confirm:hover {
-  background: rgb(37, 99, 235);
+  background: var(--huyooo-primary-hover, var(--huyooo-primary));
 }
 
 .compress-dialog-btn-confirm:disabled {
-  background: rgb(156, 163, 175);
-  border-color: rgb(156, 163, 175);
+  background: var(--huyooo-text-disabled);
+  border-color: var(--huyooo-text-disabled);
   cursor: not-allowed;
 }
 </style>

package/src/components/ContextMenu.vue

@@ -405,11 +405,11 @@ const closeSubmenu = () => {
   position: fixed;
   z-index: 10000;
   width: 220px; /* 固定宽度，与 calculateMenuPosition 中的 MENU_WIDTH 一致 */
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--huyooo-menu-bg);
   backdrop-filter: blur(24px);
-  border: 1px solid rgba(229, 231, 233, 0.5);
+  border: 1px solid var(--huyooo-border);
   border-radius: 0.5rem;
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--huyooo-menu-shadow);
   padding: 0.25rem 0;
   font-size: 0.875rem;
   user-select: none;
@@ -434,7 +434,7 @@ const closeSubmenu = () => {
   align-items: center;
   gap: 0.5rem;
   padding: 0.375rem 1rem;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
   transition: all 200ms;
   border: none;
   background: transparent;
@@ -442,7 +442,7 @@ const closeSubmenu = () => {
 }
 
 .context-menu-item:hover {
-  background: rgb(59, 130, 246);
+  background: var(--huyooo-primary);
   color: white;
 }
 
@@ -451,7 +451,7 @@ const closeSubmenu = () => {
 }
 
 .context-menu-item:hover .context-menu-item-shortcut {
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--huyooo-on-primary-muted);
 }
 
 .context-menu-item--disabled {
@@ -461,24 +461,24 @@ const closeSubmenu = () => {
 
 .context-menu-item--disabled:hover {
   background: transparent;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
 }
 
 .context-menu-item--disabled:hover .context-menu-item-icon {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
 }
 
 .context-menu-item--danger {
-  color: rgb(220, 38, 38);
+  color: var(--huyooo-danger);
 }
 
 .context-menu-item--danger:hover {
-  background: rgb(220, 38, 38);
+  background: var(--huyooo-danger);
   color: white;
 }
 
 .context-menu-item--danger .context-menu-item-icon {
-  color: rgb(220, 38, 38);
+  color: var(--huyooo-danger);
 }
 
 .context-menu-item--danger:hover .context-menu-item-icon {
@@ -490,7 +490,7 @@ const closeSubmenu = () => {
 }
 
 .context-menu-item--active {
-  background: rgb(59, 130, 246);
+  background: var(--huyooo-primary);
   color: white;
 }
 
@@ -499,11 +499,11 @@ const closeSubmenu = () => {
 }
 
 .context-menu-item--active .context-menu-item-shortcut {
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--huyooo-on-primary-muted);
 }
 
 .context-menu-item-icon {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   flex-shrink: 0;
 }
 
@@ -512,18 +512,18 @@ const closeSubmenu = () => {
 }
 
 .context-menu-item-shortcut {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
   font-size: 0.6875rem;
 }
 
 .context-menu-separator {
   height: 1px;
-  background: rgb(229, 231, 233);
+  background: var(--huyooo-border);
   margin: 0.25rem 0.5rem;
 }
 
 .context-menu-item-check {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   flex-shrink: 0;
   margin-left: auto;
 }
@@ -534,7 +534,7 @@ const closeSubmenu = () => {
 }
 
 .context-menu-item-arrow {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
   flex-shrink: 0;
   margin-left: auto;
 }

package/src/components/FileGrid.vue

@@ -278,23 +278,23 @@ const handleEscapeKey = (e: KeyboardEvent) => {
 
 /* 悬停效果 - 类似 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);
 }
 
 /* 图标/缩略图容器 - 统一尺寸 */
@@ -319,8 +319,8 @@ const handleEscapeKey = (e: KeyboardEvent) => {
   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;
 }
@@ -334,7 +334,7 @@ const handleEscapeKey = (e: KeyboardEvent) => {
 }
 
 .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);
 }
 
 /* 视频缩略图容器 */
@@ -342,10 +342,10 @@ const handleEscapeKey = (e: KeyboardEvent) => {
   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;
@@ -380,7 +380,7 @@ const handleEscapeKey = (e: KeyboardEvent) => {
   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;
@@ -416,7 +416,7 @@ const handleEscapeKey = (e: KeyboardEvent) => {
   user-select: none;
   cursor: default;
   transition: color 100ms;
-  color: #1d1d1f;
+  color: var(--huyooo-text);
   width: 100%;
   /* 使用 flexbox 布局，让扩展名始终显示 */
   display: flex;
@@ -458,47 +458,14 @@ const handleEscapeKey = (e: KeyboardEvent) => {
   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 负责 */
 </style>

package/src/components/FileIcon.vue

@@ -90,43 +90,43 @@ const iconClass = computed(() => {
 
 <style scoped>
 .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-filetype-image);
 }
 
 .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-filetype-music);
 }
 
 .file-icon--video {
-  color: rgb(37, 99, 235);
+  color: var(--huyooo-filetype-video);
 }
 
 .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-filetype-archive);
 }
 
 .file-icon--default {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
 }
 </style>