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

package/src/components/FileInfoDialog.vue

@@ -202,7 +202,7 @@ onUnmounted(() => {
 .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;
@@ -216,15 +216,15 @@ onUnmounted(() => {
 }
 
 .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;
 }
 
@@ -239,14 +239,7 @@ onUnmounted(() => {
   }
 }
 
-/* 深色模式 */
-@media (prefers-color-scheme: dark) {
-  .file-info-dialog {
-    background: #2d2d2d;
-    border-color: #404040;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  }
-}
+/* 深色模式由全局 data-theme + token 负责，这里不再写组件内 @media */
 
 /* 头部 */
 .file-info-dialog-header {
@@ -254,15 +247,11 @@ onUnmounted(() => {
   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;
@@ -275,17 +264,13 @@ onUnmounted(() => {
 .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;
@@ -295,7 +280,7 @@ onUnmounted(() => {
   height: 28px;
   border: none;
   background: transparent;
-  color: #666;
+  color: var(--huyooo-text-muted);
   border-radius: 6px;
   cursor: pointer;
   flex-shrink: 0;
@@ -303,19 +288,11 @@ onUnmounted(() => {
 }
 
 .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 {
@@ -338,15 +315,11 @@ onUnmounted(() => {
   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;
@@ -354,32 +327,25 @@ onUnmounted(() => {
 
 .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 {
@@ -389,35 +355,35 @@ onUnmounted(() => {
 }
 
 .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);
 }
 
 /* 底部 */
@@ -425,14 +391,10 @@ onUnmounted(() => {
   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;
@@ -441,12 +403,12 @@ onUnmounted(() => {
   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));
 }
 </style>
 

package/src/components/FileList.vue

@@ -213,13 +213,13 @@ const handleEscapeKey = (e: KeyboardEvent) => {
 /* 表头 - 更紧凑 */
 .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-panel-bg);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   z-index: 10;
@@ -228,7 +228,7 @@ const handleEscapeKey = (e: KeyboardEvent) => {
 
 .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;
@@ -236,7 +236,7 @@ const handleEscapeKey = (e: KeyboardEvent) => {
 }
 
 .file-list-header-cell:hover {
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--huyooo-muted-hover);
 }
 
 .file-list-header-cell--name {
@@ -273,36 +273,36 @@ const handleEscapeKey = (e: KeyboardEvent) => {
 
 /* 奇数行 - 轻微斑马纹 */
 .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;
 }
@@ -318,14 +318,14 @@ const handleEscapeKey = (e: KeyboardEvent) => {
 
 /* 选中时单元格颜色 */
 .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;
 }
 
@@ -334,7 +334,7 @@ const handleEscapeKey = (e: KeyboardEvent) => {
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
-  color: #1d1d1f;
+  color: var(--huyooo-text);
   cursor: default;
   font-weight: 400;
 }
@@ -351,71 +351,14 @@ const handleEscapeKey = (e: KeyboardEvent) => {
   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 负责 */
 </style>

package/src/components/FileListView.vue

@@ -298,15 +298,15 @@ defineExpose({
   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;
 }

package/src/components/FileSidebar.vue

@@ -63,9 +63,9 @@ const handleNavigate = (item: SidebarItem) => {
 <style scoped>
 .file-sidebar {
   width: 12rem;
-  background: rgba(243, 244, 246, 0.5);
+  background: var(--huyooo-muted);
   backdrop-filter: blur(24px);
-  border-right: 1px solid rgba(229, 231, 233, 0.5);
+  border-right: 1px solid var(--huyooo-border);
   display: flex;
   flex-direction: column;
   padding-top: 2rem;
@@ -88,12 +88,12 @@ const handleNavigate = (item: SidebarItem) => {
 }
 
 .file-sidebar::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--huyooo-scrollbar);
   border-radius: 3px;
 }
 
 .file-sidebar::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--huyooo-scrollbar-hover);
 }
 
 .file-sidebar-section {
@@ -106,7 +106,7 @@ const handleNavigate = (item: SidebarItem) => {
   margin-bottom: 0.5rem;
   font-size: 0.75rem;
   font-weight: 600;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -133,26 +133,26 @@ const handleNavigate = (item: SidebarItem) => {
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 500;
-  color: rgb(75, 85, 99);
+  color: var(--huyooo-text-muted);
   transition: all 200ms;
   /* no-drag 已由 section 继承 */
 }
 
 .file-sidebar-item:hover {
-  background: rgba(229, 231, 233, 0.5);
-  color: black;
+  background: var(--huyooo-muted-hover);
+  color: var(--huyooo-text);
 }
 
 .file-sidebar-item--active {
-  background: rgba(209, 213, 219, 0.6);
-  color: black;
+  background: var(--huyooo-muted-hover);
+  color: var(--huyooo-text);
 }
 
 .file-sidebar-item-icon {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
 }
 
 .file-sidebar-item-icon--active {
-  color: rgb(37, 99, 235);
+  color: var(--huyooo-primary);
 }
 </style>