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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/index.css +396 -354
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.js +2 -2
  4. package/dist/index.js.map +1 -1
  5. package/dist/style.css +183 -2
  6. package/package.json +1 -1
  7. package/src/components/Breadcrumb.css +7 -7
  8. package/src/components/CompressDialog.css +46 -43
  9. package/src/components/ContextMenu.css +18 -18
  10. package/src/components/FileGrid.css +18 -51
  11. package/src/components/FileIcon.css +11 -11
  12. package/src/components/FileIcon.tsx +1 -1
  13. package/src/components/FileInfoDialog.css +32 -70
  14. package/src/components/FileInfoDialog.tsx +1 -1
  15. package/src/components/FileList.css +19 -76
  16. package/src/components/FileListView.css +3 -3
  17. package/src/components/FileSidebar.css +12 -12
  18. package/src/components/ProgressDialog.css +36 -36
  19. package/src/components/SortIndicator.css +1 -1
  20. package/src/components/StatusBar.css +4 -4
  21. package/src/components/Toolbar.css +25 -25
  22. package/src/components/Window.css +18 -18
  23. package/src/index.css +183 -2
  24. package/src/index.ts +3 -0
package/src/components/FileSidebar.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .file-sidebar {
2
2
  width: 12rem;
3
- background: rgba(243, 244, 246, 0.5);
3
+ background: var(--huyooo-muted);
4
4
  backdrop-filter: blur(24px);
5
- border-right: 1px solid rgba(229, 231, 233, 0.5);
5
+ border-right: 1px solid var(--huyooo-border);
6
6
  display: flex;
7
7
  flex-direction: column;
8
8
  padding-top: 2rem;
@@ -25,12 +25,12 @@
25
25
  }
26
26
 
27
27
  .file-sidebar::-webkit-scrollbar-thumb {
28
- background: rgba(0, 0, 0, 0.2);
28
+ background: var(--huyooo-scrollbar);
29
29
  border-radius: 3px;
30
30
  }
31
31
 
32
32
  .file-sidebar::-webkit-scrollbar-thumb:hover {
33
- background: rgba(0, 0, 0, 0.3);
33
+ background: var(--huyooo-scrollbar-hover);
34
34
  }
35
35
 
36
36
  .file-sidebar-section {
@@ -43,7 +43,7 @@
43
43
  margin-bottom: 0.5rem;
44
44
  font-size: 0.75rem;
45
45
  font-weight: 600;
46
- color: rgb(107, 114, 128);
46
+ color: var(--huyooo-text-muted);
47
47
  text-transform: uppercase;
48
48
  letter-spacing: 0.05em;
49
49
  }
@@ -70,25 +70,25 @@
70
70
  cursor: pointer;
71
71
  font-size: 0.875rem;
72
72
  font-weight: 500;
73
- color: rgb(75, 85, 99);
73
+ color: var(--huyooo-text-muted);
74
74
  transition: all 200ms;
75
75
  /* no-drag 已由 section 继承 */
76
76
  }
77
77
 
78
78
  .file-sidebar-item:hover {
79
- background: rgba(229, 231, 233, 0.5);
80
- color: black;
79
+ background: var(--huyooo-muted-hover);
80
+ color: var(--huyooo-text);
81
81
  }
82
82
 
83
83
  .file-sidebar-item--active {
84
- background: rgba(209, 213, 219, 0.6);
85
- color: black;
84
+ background: var(--huyooo-muted-hover);
85
+ color: var(--huyooo-text);
86
86
  }
87
87
 
88
88
  .file-sidebar-item-icon {
89
- color: rgb(107, 114, 128);
89
+ color: var(--huyooo-text-muted);
90
90
  }
91
91
 
92
92
  .file-sidebar-item-icon--active {
93
- color: rgb(37, 99, 235);
93
+ color: var(--huyooo-primary);
94
94
  }
package/src/components/ProgressDialog.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .progress-dialog-overlay {
2
2
  position: fixed;
3
3
  inset: 0;
4
- background: rgba(0, 0, 0, 0.5);
4
+ background: var(--huyooo-overlay);
5
5
  display: flex;
6
6
  align-items: center;
7
7
  justify-content: center;
@@ -9,9 +9,9 @@
9
9
  }
10
10
 
11
11
  .progress-dialog {
12
- background: white;
12
+ background: var(--huyooo-panel-bg);
13
13
  border-radius: 12px;
14
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
14
+ box-shadow: var(--huyooo-shadow-lg);
15
15
  width: 380px;
16
16
  max-width: 90vw;
17
17
  overflow: hidden;
@@ -24,7 +24,7 @@
24
24
  align-items: center;
25
25
  justify-content: space-between;
26
26
  padding: 16px 20px;
27
- border-bottom: 1px solid rgb(229, 231, 233);
27
+ border-bottom: 1px solid var(--huyooo-border);
28
28
  }
29
29
 
30
30
  .progress-dialog-title {
@@ -33,7 +33,7 @@
33
33
  gap: 10px;
34
34
  font-weight: 600;
35
35
  font-size: 16px;
36
- color: rgb(17, 24, 39);
36
+ color: var(--huyooo-text);
37
37
  }
38
38
 
39
39
  .progress-dialog-close {
@@ -41,7 +41,7 @@
41
41
  border: none;
42
42
  padding: 4px;
43
43
  cursor: pointer;
44
- color: rgb(107, 114, 128);
44
+ color: var(--huyooo-text-muted);
45
45
  border-radius: 4px;
46
46
  display: flex;
47
47
  align-items: center;
@@ -49,8 +49,8 @@
49
49
  }
50
50
 
51
51
  .progress-dialog-close:hover {
52
- background: rgb(243, 244, 246);
53
- color: rgb(55, 65, 81);
52
+ background: var(--huyooo-muted);
53
+ color: var(--huyooo-text);
54
54
  }
55
55
 
56
56
  .progress-dialog-content {
@@ -62,7 +62,7 @@
62
62
 
63
63
  .progress-dialog-status {
64
64
  font-size: 14px;
65
- color: rgb(55, 65, 81);
65
+ color: var(--huyooo-text);
66
66
  text-align: center;
67
67
  }
68
68
 
@@ -75,14 +75,14 @@
75
75
  .progress-dialog-bar {
76
76
  flex: 1;
77
77
  height: 8px;
78
- background: rgb(229, 231, 233);
78
+ background: var(--huyooo-border);
79
79
  border-radius: 4px;
80
80
  overflow: hidden;
81
81
  }
82
82
 
83
83
  .progress-dialog-bar-fill {
84
84
  height: 100%;
85
- background: rgb(59, 130, 246);
85
+ background: var(--huyooo-primary);
86
86
  border-radius: 4px;
87
87
  transition: width 0.3s ease;
88
88
  }
@@ -90,14 +90,14 @@
90
90
  .progress-dialog-percent {
91
91
  font-size: 13px;
92
92
  font-weight: 500;
93
- color: rgb(55, 65, 81);
93
+ color: var(--huyooo-text);
94
94
  min-width: 40px;
95
95
  text-align: right;
96
96
  }
97
97
 
98
98
  .progress-dialog-current-file {
99
99
  font-size: 12px;
100
- color: rgb(107, 114, 128);
100
+ color: var(--huyooo-text-muted);
101
101
  text-align: center;
102
102
  white-space: nowrap;
103
103
  overflow: hidden;
@@ -106,23 +106,23 @@
106
106
 
107
107
  .progress-dialog-count {
108
108
  font-size: 12px;
109
- color: rgb(107, 114, 128);
109
+ color: var(--huyooo-text-muted);
110
110
  text-align: center;
111
111
  }
112
112
 
113
113
  .progress-dialog-error {
114
114
  padding: 12px;
115
- background: rgb(254, 242, 242);
116
- border: 1px solid rgb(254, 202, 202);
115
+ background: var(--huyooo-danger-bg);
116
+ border: 1px solid var(--huyooo-danger-border);
117
117
  border-radius: 6px;
118
- color: rgb(185, 28, 28);
118
+ color: var(--huyooo-danger);
119
119
  font-size: 13px;
120
120
  }
121
121
 
122
122
  .progress-dialog-output {
123
123
  padding: 12px;
124
- background: rgb(240, 253, 244);
125
- border: 1px solid rgb(187, 247, 208);
124
+ background: var(--huyooo-success-bg);
125
+ border: 1px solid var(--huyooo-success-border);
126
126
  border-radius: 6px;
127
127
  font-size: 12px;
128
128
  display: flex;
@@ -131,12 +131,12 @@
131
131
  }
132
132
 
133
133
  .progress-dialog-output-label {
134
- color: rgb(22, 101, 52);
134
+ color: var(--huyooo-success);
135
135
  font-weight: 500;
136
136
  }
137
137
 
138
138
  .progress-dialog-output-path {
139
- color: rgb(21, 128, 61);
139
+ color: var(--huyooo-success);
140
140
  word-break: break-all;
141
141
  }
142
142
 
@@ -145,7 +145,7 @@
145
145
  justify-content: flex-end;
146
146
  gap: 12px;
147
147
  padding: 16px 20px;
148
- border-top: 1px solid rgb(229, 231, 233);
148
+ border-top: 1px solid var(--huyooo-border);
149
149
  }
150
150
 
151
151
  .progress-dialog-btn {
@@ -161,39 +161,39 @@
161
161
  }
162
162
 
163
163
  .progress-dialog-btn-cancel {
164
- background: white;
165
- border: 1px solid rgb(209, 213, 219);
166
- color: rgb(55, 65, 81);
164
+ background: var(--huyooo-surface-2);
165
+ border: 1px solid var(--huyooo-border);
166
+ color: var(--huyooo-text);
167
167
  }
168
168
 
169
169
  .progress-dialog-btn-cancel:hover {
170
- background: rgb(249, 250, 251);
170
+ background: var(--huyooo-surface);
171
171
  }
172
172
 
173
173
  .progress-dialog-btn-folder {
174
- background: rgb(240, 253, 244);
175
- border: 1px solid rgb(187, 247, 208);
176
- color: rgb(22, 101, 52);
174
+ background: var(--huyooo-success-bg);
175
+ border: 1px solid var(--huyooo-success-border);
176
+ color: var(--huyooo-success);
177
177
  }
178
178
 
179
179
  .progress-dialog-btn-folder:hover {
180
- background: rgb(220, 252, 231);
180
+ background: color-mix(in srgb, var(--huyooo-success-bg) 75%, var(--huyooo-success) 25%);
181
181
  }
182
182
 
183
183
  .progress-dialog-btn-close {
184
- background: rgb(59, 130, 246);
185
- border: 1px solid rgb(59, 130, 246);
184
+ background: var(--huyooo-primary);
185
+ border: 1px solid var(--huyooo-primary);
186
186
  color: white;
187
187
  }
188
188
 
189
189
  .progress-dialog-btn-close:hover {
190
- background: rgb(37, 99, 235);
190
+ background: var(--huyooo-primary-hover, var(--huyooo-primary));
191
191
  }
192
192
 
193
193
  /* 旋转动画 */
194
194
  .progress-dialog-icon-spin {
195
195
  animation: spin 1s linear infinite;
196
- color: rgb(59, 130, 246);
196
+ color: var(--huyooo-primary);
197
197
  }
198
198
 
199
199
  @keyframes spin {
@@ -202,10 +202,10 @@
202
202
  }
203
203
 
204
204
  .progress-dialog-icon-success {
205
- color: rgb(34, 197, 94);
205
+ color: var(--huyooo-success);
206
206
  }
207
207
 
208
208
  .progress-dialog-icon-error {
209
- color: rgb(239, 68, 68);
209
+ color: var(--huyooo-danger);
210
210
  }
211
211
 
package/src/components/SortIndicator.css CHANGED
@@ -2,6 +2,6 @@
2
2
  margin-left: 4px;
3
3
  display: inline-flex;
4
4
  align-items: center;
5
- color: rgb(59, 130, 246);
5
+ color: var(--huyooo-primary);
6
6
  }
7
7
 
package/src/components/StatusBar.css CHANGED
@@ -1,13 +1,13 @@
1
1
  .file-status-bar {
2
- height: 1.5rem;
3
- background-color: rgb(249, 250, 251);
4
- border-top: 1px solid rgb(229, 231, 233);
2
+ height: 32px;
3
+ background-color: var(--huyooo-surface-2);
4
+ border-top: 1px solid var(--huyooo-border);
5
5
  display: flex;
6
6
  align-items: center;
7
7
  justify-content: center;
8
8
  padding: 0 8px;
9
9
  font-size: 10px;
10
- color: rgb(107, 114, 128);
10
+ color: var(--huyooo-text-muted);
11
11
  user-select: none;
12
12
  flex-shrink: 0;
13
13
  z-index: 20;
package/src/components/Toolbar.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .file-toolbar {
2
- height: 3rem;
3
- background: rgba(249, 250, 251, 0.9);
2
+ height: 48px;
3
+ background: var(--huyooo-surface);
4
4
  backdrop-filter: blur(12px);
5
- border-bottom: 1px solid rgb(229, 231, 233);
5
+ border-bottom: 1px solid var(--huyooo-border);
6
6
  display: flex;
7
7
  align-items: center;
8
8
  padding: 0 1rem;
@@ -19,8 +19,8 @@
19
19
  .file-toolbar-nav {
20
20
  display: flex;
21
21
  align-items: center;
22
- color: rgb(75, 85, 99);
23
- background: rgba(229, 231, 233, 0.5);
22
+ color: var(--huyooo-text-muted);
23
+ background: var(--huyooo-muted);
24
24
  border-radius: 0.5rem;
25
25
  padding: 0.125rem;
26
26
  flex-shrink: 0;
@@ -37,22 +37,22 @@
37
37
  display: flex;
38
38
  align-items: center;
39
39
  justify-content: center;
40
- color: rgb(31, 41, 55);
40
+ color: var(--huyooo-text);
41
41
  }
42
42
 
43
43
  .file-toolbar-button:hover:not(:disabled) {
44
- background: rgb(209, 213, 219);
44
+ background: var(--huyooo-muted-hover);
45
45
  }
46
46
 
47
47
  .file-toolbar-button:disabled {
48
- color: rgb(156, 163, 175);
48
+ color: var(--huyooo-text-disabled);
49
49
  cursor: default;
50
50
  }
51
51
 
52
52
  .file-toolbar-button--active {
53
- background: white;
54
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
55
- color: rgb(31, 41, 55);
53
+ background: var(--huyooo-surface-2);
54
+ box-shadow: var(--huyooo-shadow-sm);
55
+ color: var(--huyooo-text);
56
56
  }
57
57
 
58
58
  .file-toolbar-breadcrumb {
@@ -95,16 +95,16 @@
95
95
  left: 0.625rem;
96
96
  top: 50%;
97
97
  transform: translateY(-50%);
98
- color: rgb(156, 163, 175);
98
+ color: var(--huyooo-text-disabled);
99
99
  transition: color 200ms;
100
100
  }
101
101
 
102
102
  .file-toolbar-search:focus-within .file-toolbar-search-icon {
103
- color: rgb(59, 130, 246);
103
+ color: var(--huyooo-primary);
104
104
  }
105
105
 
106
106
  .file-toolbar-search-input {
107
- background: rgb(243, 244, 246);
107
+ background: var(--huyooo-muted);
108
108
  border: 1px solid transparent;
109
109
  border-radius: 0.375rem;
110
110
  padding-left: 2rem;
@@ -115,36 +115,36 @@
115
115
  outline: none;
116
116
  transition: all 200ms;
117
117
  width: 8rem;
118
- color: rgb(55, 65, 81);
118
+ color: var(--huyooo-text);
119
119
  }
120
120
 
121
121
  .file-toolbar-search-input::placeholder {
122
- color: rgb(156, 163, 175);
122
+ color: var(--huyooo-text-disabled);
123
123
  }
124
124
 
125
125
  .file-toolbar-search-input:focus {
126
- background: white;
127
- border-color: rgb(96, 165, 250);
128
- box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
126
+ background: var(--huyooo-surface-2);
127
+ border-color: var(--huyooo-primary);
128
+ box-shadow: 0 0 0 2px var(--huyooo-focus-ring);
129
129
  width: 12rem;
130
130
  }
131
131
 
132
132
  .file-toolbar-view-toggle {
133
133
  display: flex;
134
134
  align-items: center;
135
- background: rgba(229, 231, 233, 0.5);
135
+ background: var(--huyooo-muted);
136
136
  border-radius: 0.5rem;
137
137
  padding: 0.125rem;
138
- color: rgb(75, 85, 99);
138
+ color: var(--huyooo-text-muted);
139
139
  }
140
140
 
141
141
  .file-toolbar-view-toggle .file-toolbar-button--active {
142
- background: white;
143
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
144
- color: rgb(31, 41, 55);
142
+ background: var(--huyooo-surface-2);
143
+ box-shadow: var(--huyooo-shadow-sm);
144
+ color: var(--huyooo-text);
145
145
  }
146
146
 
147
147
  .file-toolbar-view-toggle .file-toolbar-button:not(.file-toolbar-button--active):hover {
148
- background: rgba(209, 213, 219, 0.5);
148
+ background: var(--huyooo-muted-hover);
149
149
  }
150
150
 
package/src/components/Window.css CHANGED
@@ -2,7 +2,7 @@
2
2
  position: fixed;
3
3
  inset: 0;
4
4
  z-index: 100;
5
- background: rgba(0, 0, 0, 0.3);
5
+ background: var(--huyooo-overlay);
6
6
  animation: fade-in 200ms ease-out;
7
7
  display: flex;
8
8
  align-items: center;
@@ -13,10 +13,10 @@
13
13
  position: absolute;
14
14
  display: flex;
15
15
  flex-direction: column;
16
- background: rgba(255, 255, 255, 0.95);
16
+ background: var(--huyooo-panel-bg);
17
17
  backdrop-filter: blur(24px);
18
- border: 1px solid rgb(229, 231, 233);
19
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
18
+ border: 1px solid var(--huyooo-border);
19
+ box-shadow: var(--huyooo-shadow-lg);
20
20
  border-radius: 0.5rem;
21
21
  overflow: hidden;
22
22
  animation: window-fade-in 200ms ease-out;
@@ -28,10 +28,10 @@
28
28
  align-items: center;
29
29
  justify-content: space-between;
30
30
  padding: 0 0.75rem;
31
- border-bottom: 1px solid rgb(229, 231, 233);
31
+ border-bottom: 1px solid var(--huyooo-border);
32
32
  flex-shrink: 0;
33
33
  user-select: none;
34
- background: rgba(249, 250, 251, 0.8);
34
+ background: var(--huyooo-surface);
35
35
  z-index: 20;
36
36
  cursor: grab;
37
37
  }
@@ -54,7 +54,7 @@
54
54
  align-items: center;
55
55
  justify-content: center;
56
56
  border: 1px solid;
57
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
57
+ box-shadow: var(--huyooo-shadow-sm);
58
58
  outline: none;
59
59
  cursor: pointer;
60
60
  padding: 0;
@@ -78,22 +78,22 @@
78
78
  }
79
79
 
80
80
  .window-control-button--close {
81
- background-color: rgb(255, 95, 87);
82
- border-color: rgb(224, 68, 62);
81
+ background-color: var(--huyooo-window-close-bg);
82
+ border-color: var(--huyooo-window-close-border);
83
83
  }
84
84
 
85
85
  .window-control-button--minimize {
86
- background-color: rgb(254, 188, 46);
87
- border-color: rgb(216, 158, 36);
86
+ background-color: var(--huyooo-window-minimize-bg);
87
+ border-color: var(--huyooo-window-minimize-border);
88
88
  }
89
89
 
90
90
  .window-control-button--maximize {
91
- background-color: rgb(40, 200, 64);
92
- border-color: rgb(26, 171, 41);
91
+ background-color: var(--huyooo-window-maximize-bg);
92
+ border-color: var(--huyooo-window-maximize-border);
93
93
  }
94
94
 
95
95
  .window-control-icon {
96
- color: rgba(0, 0, 0, 0.5);
96
+ color: var(--huyooo-window-control-icon);
97
97
  opacity: 0;
98
98
  transition: opacity 200ms;
99
99
  width: 7px;
@@ -106,15 +106,15 @@
106
106
  }
107
107
 
108
108
  .window-control-button--close:hover {
109
- background-color: rgba(255, 95, 87, 0.8);
109
+ background-color: color-mix(in srgb, var(--huyooo-window-close-bg) 80%, transparent);
110
110
  }
111
111
 
112
112
  .window-control-button--minimize:hover {
113
- background-color: rgba(254, 188, 46, 0.8);
113
+ background-color: color-mix(in srgb, var(--huyooo-window-minimize-bg) 80%, transparent);
114
114
  }
115
115
 
116
116
  .window-control-button--maximize:hover {
117
- background-color: rgba(40, 200, 64, 0.8);
117
+ background-color: color-mix(in srgb, var(--huyooo-window-maximize-bg) 80%, transparent);
118
118
  }
119
119
 
120
120
  .window-title-info {
@@ -131,7 +131,7 @@
131
131
  .window-title-text {
132
132
  font-weight: 500;
133
133
  font-size: 0.75rem;
134
- color: rgb(75, 85, 99);
134
+ color: var(--huyooo-text-muted);
135
135
  overflow: hidden;
136
136
  text-overflow: ellipsis;
137
137
  white-space: nowrap;