feat(explorer): support symlink, close #244

plugins/explorer/client/file-picker.vue

@@ -88,7 +88,7 @@ const entries = computed(() => {
   const { filters } = options.value
   return children.filter((entry) => {
     if (entry.type === 'directory') return true
-    if (entry.type === 'file') {
+    if (entry.type === 'file' || entry.type === 'symlink') {
       if (filters.includes('file')) return true
       return filters.some((filter) => {
         const index = entry.name.lastIndexOf('.')

plugins/explorer/client/icons/directory.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg class="k-icon refresh" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <svg class="k-icon" 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>

plugins/explorer/client/icons/file.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg class="k-icon refresh" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+  <svg class="k-icon" 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>

plugins/explorer/client/icons/index.ts

@@ -4,9 +4,11 @@ import Directory from './directory.vue'
 import File from './file.vue'
 import Refresh from './refresh.vue'
 import Save from './save.vue'
+import Symlink from './symlink.vue'
 
 icons.register('activity:explorer', Activity)
 icons.register('directory', Directory)
 icons.register('file', File)
 icons.register('refresh', Refresh)
 icons.register('save', Save)
+icons.register('symlink', Symlink)

plugins/explorer/client/icons/symlink.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path fill="currentColor" d="M280 80C266.7 80 256 69.25 256 56C256 42.75 266.7 32 280 32H424C437.3 32 448 42.75 448 56V200C448 213.3 437.3 224 424 224C410.7 224 400 213.3 400 200V113.9L200.1 312.1C191.6 322.3 176.4 322.3 167 312.1C157.7 303.6 157.7 288.4 167 279L366.1 80H280zM0 120C0 89.07 25.07 64 56 64H168C181.3 64 192 74.75 192 88C192 101.3 181.3 112 168 112H56C51.58 112 48 115.6 48 120V424C48 428.4 51.58 432 56 432H360C364.4 432 368 428.4 368 424V312C368 298.7 378.7 288 392 288C405.3 288 416 298.7 416 312V424C416 454.9 390.9 480 360 480H56C25.07 480 0 454.9 0 424V120z"/>
+  </svg>
+</template>

plugins/explorer/client/index.vue

@@ -46,7 +46,7 @@
       </el-scrollbar>
     </template>
 
-    <k-empty v-if="files[active]?.type !== 'file'">在左侧栏选择要查看的文件</k-empty>
+    <k-empty v-if="!files[active] || files[active].type === 'directory'">在左侧栏选择要查看的文件</k-empty>
     <div v-else-if="files[active]?.loading">
       <div class="el-loading-spinner">
         <svg class="circular" viewBox="25 25 50 50">
@@ -130,7 +130,7 @@ ctx.action('explorer.tree.upload', {
 })
 
 ctx.action('explorer.tree.download', {
-  disabled: ({ explorer }) => explorer.tree.type !== 'file',
+  disabled: ({ explorer }) => explorer.tree.type === 'directory',
   action: ({ explorer }) => downloadFile(explorer.tree.filename),
 })
 
@@ -224,7 +224,7 @@ function filterNode(value: string, data: TreeEntry) {
   return data.name.toLowerCase().includes(keyword.value.toLowerCase())
 }
 
-function createEntry(entry: TreeEntry, type: 'file' | 'directory') {
+function createEntry(entry: TreeEntry, type: 'file' | 'symlink' | 'directory') {
   cancelRename()
   renaming.value = entry.filename + '/'
   files[renaming.value] = {
@@ -311,7 +311,7 @@ function getLanguage(filename: string) {
 }
 
 watch(() => files[active.value], async (entry) => {
-  if (entry?.type !== 'file') return
+  if (!entry || entry.type === 'directory') return
   if (typeof entry.oldValue !== 'string') {
     entry.loading = send('explorer/read', entry.filename)
     const { base64, mime } = await entry.loading
@@ -334,7 +334,7 @@ model.onDidChangeContent((e) => {
 })
 
 async function handleClick(data: TreeEntry) {
-  if (data.type !== 'file') return
+  if (data.type === 'directory') return
   active.value = data.filename
 }
 

plugins/explorer/src/index.ts

@@ -1,7 +1,7 @@
 import { Context, Schema } from 'koishi'
 import { DataService } from '@koishijs/console'
 import { join, relative, resolve } from 'path'
-import { mkdir, readdir, readFile, rename, rm, writeFile } from 'fs/promises'
+import { mkdir, readdir, readFile, readlink, rename, rm, writeFile } from 'fs/promises'
 import { FSWatcher, watch } from 'chokidar'
 import { detect } from 'chardet'
 import FileType from 'file-type'
@@ -32,9 +32,10 @@ export interface File {
 }
 
 export interface Entry {
-  type: 'file' | 'directory'
+  type: 'file' | 'directory' | 'symlink'
   name: string
   mime?: string
+  target?: string
   filename?: string
   children?: this[]
   oldValue?: string
@@ -128,6 +129,8 @@ class Explorer extends DataService<Entry[]> {
         return { type: 'file', name: dirent.name }
       } else if (dirent.isDirectory()) {
         return { type: 'directory', name: dirent.name, children: await this.traverse(filename) }
+      } else if (dirent.isSymbolicLink()) {
+        return { type: 'symlink', name: dirent.name, target: await readlink(filename) }
       }
     })).then((entries) => entries
       .filter(Boolean)
@@ -158,7 +161,7 @@ namespace Explorer {
     ignored: Schema
       .array(String)
       .role('table')
-      .default(['**/node_modules', '**/.*', 'data/accounts/*/data', 'cache']),
+      .default(['**/node_modules', '**/.*', 'cache']),
   }).i18n({
     'zh-CN': zhCN,
   })