页面美化

src/components/TreeEntry.vue

@@ -57,15 +57,15 @@ function onClick() {
   <template v-if="entry.is_dir">
     <!-- Folder label -->
     <div
-      class="flex items-center gap-1 px-2 py-1 rounded-md text-sm text-[#5c574e] hover:bg-[#ede8de] cursor-pointer select-none"
+      class="tree-folder flex items-center gap-1 px-2 py-1 rounded-md text-sm cursor-pointer select-none"
       :style="{ paddingLeft: `${depth * 16 + 8}px` }"
       @click="onClick"
     >
       <i
-        class="ri-arrow-right-s-line text-sm text-[#b8b3a8] transition-transform shrink-0"
+        class="tree-arrow ri-arrow-right-s-line text-sm transition-transform shrink-0"
         :class="expanded && entry.children ? 'rotate-90' : ''"
       ></i>
-      <i class="ri-folder-line text-base text-[#bf6a3b]/70 shrink-0"></i>
+      <i class="tree-entry-icon ri-folder-line text-base shrink-0"></i>
       <span class="truncate">{{ entry.name }}</span>
     </div>
 
@@ -87,15 +87,47 @@ function onClick() {
   <div
     v-else
     :class="[
-      'flex items-center gap-1.5 px-2 py-1 rounded-md text-sm cursor-pointer transition-colors',
+      'tree-file flex items-center gap-1.5 px-2 py-1 rounded-md text-sm cursor-pointer transition-colors',
       isActive
-        ? 'bg-[#ede8de] text-[#bf6a3b] font-medium'
-        : 'text-[#8c877d] hover:bg-[#ede8de] hover:text-[#38342e]',
+        ? 'tree-file-active font-medium'
+        : 'tree-file-idle',
     ]"
     :style="{ paddingLeft: `${depth * 16 + 8}px` }"
     @click="onClick"
   >
-    <i class="ri-file-line text-sm text-[#bf6a3b]/60 shrink-0"></i>
+    <i class="tree-entry-icon ri-file-line text-sm shrink-0"></i>
     <span class="truncate">{{ entry.name }}</span>
   </div>
 </template>
+
+<style scoped>
+.tree-folder {
+  color: var(--app-text-soft);
+}
+
+.tree-folder:hover {
+  background: var(--app-hover);
+}
+
+.tree-arrow {
+  color: var(--app-subtle);
+}
+
+.tree-entry-icon {
+  color: color-mix(in srgb, var(--app-accent) 68%, transparent);
+}
+
+.tree-file-idle {
+  color: var(--app-muted);
+}
+
+.tree-file-idle:hover {
+  background: var(--app-hover);
+  color: var(--app-text);
+}
+
+.tree-file-active {
+  background: var(--app-hover);
+  color: var(--app-accent);
+}
+</style>