feat(explorer): add file / directory icon for file picker

koishijs · May 25, 2023 · 6897219 · 6897219
1 parent 4514ebf
commit 6897219
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 4 deletions.
diff --git a/plugins/explorer/client/file-picker.vue b/plugins/explorer/client/file-picker.vue
@@ -16,7 +16,7 @@
         </template>
         <el-scrollbar>
           <div class="entry" v-for="entry in entries" :key="entry.name" @click="handleClick(entry)">
-            {{ entry.name }}
+            <k-icon class="entry-icon" :name="entry.type"></k-icon>{{ entry.name }}
           </div>
         </el-scrollbar>
         <template #footer>
@@ -48,7 +48,7 @@ const emit = defineEmits(['update:modelValue'])
 const hint = computed(() => {
   const { filters = ['file'] } = props.schema.meta.extra
   if (filters.includes('directory')) {
-    return filters.length === 1 ? '选择目录' : '选择文件或目录'
+    return filters.length === 1 ? '选择目录' : '选择目录或文件'
   } else {
     return '选择文件'
   }
@@ -98,7 +98,7 @@ function toPrevious() {
   .back-button {
     width: 2rem;
     height: 2rem;
-    margin-right: 0.5rem;
+    margin-right: 0.75rem;
   }
 
   .el-dialog__body {
@@ -108,14 +108,22 @@ function toPrevious() {
   }
 
   .entry {
-    padding: 0.25rem 1rem;
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
     border-radius: 4px;
     font-size: 14px;
     cursor: pointer;
 
     &:hover {
       background-color: var(--k-hover-bg);
     }
+
+    .entry-icon {
+      height: 1rem;
+      width: 1.25rem;
+      margin-right: 0.5rem;
+    }
   }
 
   .el-dialog__footer {

diff --git a/plugins/explorer/client/icons/directory.vue b/plugins/explorer/client/icons/directory.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon refresh" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M447.1 96h-172.1L226.7 50.75C214.7 38.74 198.5 32 181.5 32H63.1c-35.35 0-64 28.66-64 64v320c0 35.34 28.65 64 64 64h384c35.35 0 64-28.66 64-64V160C511.1 124.7 483.3 96 447.1 96zM463.1 416c0 8.824-7.178 16-16 16h-384c-8.822 0-16-7.176-16-16V96c0-8.824 7.178-16 16-16h117.5c4.273 0 8.293 1.664 11.31 4.688L255.1 144h192c8.822 0 16 7.176 16 16V416z"/>
+  </svg>
+</template>
diff --git a/plugins/explorer/client/icons/file.vue b/plugins/explorer/client/icons/file.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon refresh" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+    <path fill="currentColor" d="M0 64C0 28.65 28.65 0 64 0H229.5C246.5 0 262.7 6.743 274.7 18.75L365.3 109.3C377.3 121.3 384 137.5 384 154.5V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64zM336 448V160H256C238.3 160 224 145.7 224 128V48H64C55.16 48 48 55.16 48 64V448C48 456.8 55.16 464 64 464H320C328.8 464 336 456.8 336 448z"/>
+  </svg>
+</template>
diff --git a/plugins/explorer/client/icons/index.ts b/plugins/explorer/client/icons/index.ts
@@ -1,8 +1,12 @@
 import { icons } from '@koishijs/client'
 import Activity from './activity.vue'
+import Directory from './directory.vue'
+import File from './file.vue'
 import Refresh from './refresh.vue'
 import Save from './save.vue'
 
 icons.register('activity:explorer', Activity)
+icons.register('directory', Directory)
+icons.register('file', File)
 icons.register('refresh', Refresh)
 icons.register('save', Save)