[Feature] Delete file or folder. (#9)
diff --git a/studio/components/files/index.tsx b/studio/components/files/index.tsx
index c28ad30..27c306f 100644
--- a/studio/components/files/index.tsx
+++ b/studio/components/files/index.tsx
@@ -43,7 +43,7 @@
export const Files = defineComponent({
name: 'files',
props,
- emits: ['select', 'inputBlur'],
+ emits: ['select', 'inputBlur', 'delete'],
setup(props, { emit, expose }) {
const keyRef = ref()
const treeRef = ref()
@@ -101,6 +101,9 @@
const onContextMenuSelect = (key: string) => {
showDropdownRef.value = false
+ if (key === 'delete') {
+ emit('delete', Number(id))
+ }
}
const onClickoutside = () => {
diff --git a/studio/components/studio-sider/index.tsx b/studio/components/studio-sider/index.tsx
index 61a5654..43b0284 100644
--- a/studio/components/studio-sider/index.tsx
+++ b/studio/components/studio-sider/index.tsx
@@ -27,8 +27,14 @@
const widthRef = ref(300)
const inputRef = ref()
const fileRef = ref()
- const { state, onCreateFile, onCreateFolder, onSelectFile, onInputBlur } =
- useFile(inputRef, fileRef)
+ const {
+ state,
+ onCreateFile,
+ onCreateFolder,
+ onSelectFile,
+ onInputBlur,
+ onDelete
+ } = useFile(inputRef, fileRef)
return () => (
<NLayoutSider class={styles['studio-sider']} width={widthRef.value}>
@@ -45,6 +51,7 @@
data={state.files}
onSelect={onSelectFile}
onInputBlur={onInputBlur}
+ onDelete={onDelete}
inputRef={inputRef}
selected-keys={[state.currentKey]}
ref={fileRef}
diff --git a/studio/components/studio-sider/use-file.ts b/studio/components/studio-sider/use-file.ts
index ee44e2b..cf88ede 100644
--- a/studio/components/studio-sider/use-file.ts
+++ b/studio/components/studio-sider/use-file.ts
@@ -16,7 +16,8 @@
*/
import { reactive, Ref, nextTick } from 'vue'
import { useMessage } from 'naive-ui'
-import { addFile } from '@/service/modules/file'
+import { remove } from 'lodash'
+import { addFile, deleteFile } from '@/service/modules/file'
import { useLocale } from '@/hooks'
import { sameNameValidator } from './helper'
import type { IFileState, FileType, IFileRecord } from './types'
@@ -24,14 +25,16 @@
export const useFile = (inputRef: Ref, fileRef: Ref) => {
const state = reactive({
currentKey: 0,
- files: [{ type: '', id: 1, name: '123', pid: 0 }],
+ files: [{ type: '', id: 1, name: '123', pid: 0, children: [] }],
isCreating: false
} as IFileState)
const message = useMessage()
const { t } = useLocale()
- const filesCached = {} as { [key: number]: IFileRecord }
+ const filesCached = {
+ 1: { type: '', id: 1, name: '123', pid: 0, children: [] }
+ } as { [key: number]: IFileRecord }
const freshFiles = () => {
fileRef.value.refresh()
@@ -130,5 +133,30 @@
}
}
- return { state, onCreateFile, onCreateFolder, onSelectFile, onInputBlur }
+ const onDelete = async (id: number) => {
+ const deletedRecord = filesCached[id]
+ if (!deletedRecord.type && deletedRecord.children?.length) {
+ message.error(t('delete_tips'))
+ return
+ }
+ await deleteFile(id)
+
+ const children =
+ deletedRecord.pid === 0
+ ? state.files
+ : filesCached[deletedRecord.pid].children || []
+
+ remove(children, (record) => record.id === id)
+
+ delete filesCached[id]
+ }
+
+ return {
+ state,
+ onCreateFile,
+ onCreateFolder,
+ onSelectFile,
+ onInputBlur,
+ onDelete
+ }
}
diff --git a/studio/locales/en_US.ts b/studio/locales/en_US.ts
index de6db9b..81ab60d 100644
--- a/studio/locales/en_US.ts
+++ b/studio/locales/en_US.ts
@@ -19,7 +19,8 @@
success: 'Success',
saved_successfully: 'Saved successfully',
same_name_tips: 'Same name exits for files at the same level.',
- delete: 'Delete'
+ delete: 'Delete',
+ delete_tips: 'Please delete the files in this folder first.'
}
export type Locale = typeof enUS
diff --git a/studio/locales/zh_CN.ts b/studio/locales/zh_CN.ts
index 2eccfba..e8d1367 100644
--- a/studio/locales/zh_CN.ts
+++ b/studio/locales/zh_CN.ts
@@ -19,5 +19,6 @@
success: '成功',
saved_successfully: '保存成功',
same_name_tips: '同级文件存在相同名字',
- delete: '删除'
+ delete: '删除',
+ delete_tips: '请先删除文件夹下的文件'
}
