feat(dashboard): add reusable folder management component library
Extract folder management UI into reusable base components and create persona-specific wrapper components that integrate with personaStore. - Add base folder components (tree, breadcrumb, card, dialogs) with customizable labels for i18n support - Create useFolderManager composable for folder state management - Implement drag-and-drop support for moving personas between folders - Add persona-specific wrapper components connecting to personaStore - Reorganize PersonaManager into views/persona directory structure - Include comprehensive README documentation for component usage
This commit is contained in:
RC-CHN
@@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<v-dialog v-model="showDialog" max-width="450px" persistent>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>
|
||||||
|
<v-icon class="mr-2">mdi-folder-plus</v-icon>
|
||||||
|
{{ labels.title }}
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-form ref="form" v-model="formValid">
|
||||||
|
<v-text-field v-model="formData.name" :label="mergedLabels.nameLabel"
|
||||||
|
:rules="[(v: any) => !!v || mergedLabels.nameRequired]" variant="outlined"
|
||||||
|
density="comfortable" autofocus class="mb-3" />
|
||||||
|
|
||||||
|
<v-textarea v-model="formData.description" :label="labels.descriptionLabel" variant="outlined"
|
||||||
|
rows="3" density="comfortable" hide-details />
|
||||||
|
</v-form>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn variant="text" @click="closeDialog">
|
||||||
|
{{ labels.cancelButton }}
|
||||||
|
</v-btn>
|
||||||
|
<v-btn color="primary" variant="flat" @click="submitForm" :loading="loading" :disabled="!formValid">
|
||||||
|
{{ labels.createButton }}
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue';
|
||||||
|
import type { CreateFolderData } from './types';
|
||||||
|
|
||||||
|
interface DefaultLabels {
|
||||||
|
title: string;
|
||||||
|
nameLabel: string;
|
||||||
|
descriptionLabel: string;
|
||||||
|
nameRequired: string;
|
||||||
|
cancelButton: string;
|
||||||
|
createButton: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultLabels: DefaultLabels = {
|
||||||
|
title: '创建文件夹',
|
||||||
|
nameLabel: '名称',
|
||||||
|
descriptionLabel: '描述',
|
||||||
|
nameRequired: '请输入文件夹名称',
|
||||||
|
cancelButton: '取消',
|
||||||
|
createButton: '创建'
|
||||||
|
};
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'BaseCreateFolderDialog',
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
parentFolderId: {
|
||||||
|
type: String as PropType<string | null>,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
type: Object as PropType<Partial<DefaultLabels>>,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'create'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formValid: false,
|
||||||
|
loading: false,
|
||||||
|
formData: {
|
||||||
|
name: '',
|
||||||
|
description: ''
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
showDialog: {
|
||||||
|
get(): boolean {
|
||||||
|
return this.modelValue;
|
||||||
|
},
|
||||||
|
set(value: boolean) {
|
||||||
|
this.$emit('update:modelValue', value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mergedLabels(): DefaultLabels {
|
||||||
|
return { ...defaultLabels, ...this.labels };
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
modelValue(newValue: boolean) {
|
||||||
|
if (newValue) {
|
||||||
|
this.resetForm();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
resetForm() {
|
||||||
|
this.formData = {
|
||||||
|
name: '',
|
||||||
|
description: ''
|
||||||
|
};
|
||||||
|
if (this.$refs.form) {
|
||||||
|
(this.$refs.form as any).resetValidation();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
closeDialog() {
|
||||||
|
this.showDialog = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
async submitForm() {
|
||||||
|
if (!this.formValid) return;
|
||||||
|
|
||||||
|
const data: CreateFolderData = {
|
||||||
|
name: this.formData.name,
|
||||||
|
description: this.formData.description || undefined,
|
||||||
|
parent_id: this.parentFolderId
|
||||||
|
};
|
||||||
|
|
||||||
|
this.$emit('create', data);
|
||||||
|
},
|
||||||
|
|
||||||
|
setLoading(value: boolean) {
|
||||||
|
this.loading = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<v-breadcrumbs :items="computedItems" class="base-folder-breadcrumb pa-0">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small" class="mr-1">mdi-folder-outline</v-icon>
|
||||||
|
</template>
|
||||||
|
<template v-slot:item="{ item }">
|
||||||
|
<v-breadcrumbs-item :disabled="(item as any).disabled" @click="!(item as any).disabled && handleClick((item as any).folderId)"
|
||||||
|
:class="{ 'breadcrumb-link': !(item as any).disabled }">
|
||||||
|
<v-icon v-if="(item as any).isRoot" size="small" class="mr-1">mdi-home</v-icon>
|
||||||
|
{{ (item as any).title }}
|
||||||
|
</v-breadcrumbs-item>
|
||||||
|
</template>
|
||||||
|
<template v-slot:divider>
|
||||||
|
<v-icon size="small">mdi-chevron-right</v-icon>
|
||||||
|
</template>
|
||||||
|
</v-breadcrumbs>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue';
|
||||||
|
import type { BreadcrumbItem, FolderTreeNode } from './types';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'BaseFolderBreadcrumb',
|
||||||
|
props: {
|
||||||
|
breadcrumbPath: {
|
||||||
|
type: Array as PropType<FolderTreeNode[]>,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
currentFolderId: {
|
||||||
|
type: String as PropType<string | null>,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
rootFolderName: {
|
||||||
|
type: String,
|
||||||
|
default: '根目录'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['navigate'],
|
||||||
|
computed: {
|
||||||
|
computedItems(): BreadcrumbItem[] {
|
||||||
|
const items: BreadcrumbItem[] = [
|
||||||
|
{
|
||||||
|
title: this.rootFolderName,
|
||||||
|
folderId: null,
|
||||||
|
disabled: this.currentFolderId === null,
|
||||||
|
isRoot: true
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.breadcrumbPath.forEach((folder, index) => {
|
||||||
|
items.push({
|
||||||
|
title: folder.name,
|
||||||
|
folderId: folder.folder_id,
|
||||||
|
disabled: index === this.breadcrumbPath.length - 1,
|
||||||
|
isRoot: false
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return items;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(folderId: string | null) {
|
||||||
|
this.$emit('navigate', folderId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.base-folder-breadcrumb {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-link {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-link:hover {
|
||||||
|
color: rgb(var(--v-theme-primary));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,143 @@
|
|||||||
|
<template>
|
||||||
|
<v-card class="base-folder-card" :class="{ 'drag-over': isDragOver }" rounded="lg" @click="$emit('click')" @contextmenu.prevent="$emit('contextmenu', $event)"
|
||||||
|
elevation="1" hover @dragover.prevent="handleDragOver" @dragleave="handleDragLeave" @drop.prevent="handleDrop">
|
||||||
|
<v-card-text class="d-flex align-center pa-3">
|
||||||
|
<v-icon size="40" color="amber-darken-2" class="mr-3">mdi-folder</v-icon>
|
||||||
|
<div class="folder-info flex-grow-1 overflow-hidden">
|
||||||
|
<div class="text-subtitle-1 font-weight-medium text-truncate">{{ folder.name }}</div>
|
||||||
|
<div v-if="folder.description" class="text-body-2 text-medium-emphasis text-truncate">
|
||||||
|
{{ folder.description }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-menu offset-y>
|
||||||
|
<template v-slot:activator="{ props }">
|
||||||
|
<v-btn icon="mdi-dots-vertical" variant="text" size="small" v-bind="props" @click.stop />
|
||||||
|
</template>
|
||||||
|
<v-list density="compact">
|
||||||
|
<v-list-item @click.stop="$emit('open')">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small">mdi-folder-open</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ labels.open }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item @click.stop="$emit('rename')">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small">mdi-pencil</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ labels.rename }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item @click.stop="$emit('move')">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small">mdi-folder-move</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ labels.moveTo }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-divider class="my-1" />
|
||||||
|
<v-list-item @click.stop="$emit('delete')" class="text-error">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small" color="error">mdi-delete</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ labels.delete }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue';
|
||||||
|
import type { Folder } from './types';
|
||||||
|
|
||||||
|
interface DefaultLabels {
|
||||||
|
open: string;
|
||||||
|
rename: string;
|
||||||
|
moveTo: string;
|
||||||
|
delete: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultLabels: DefaultLabels = {
|
||||||
|
open: '打开',
|
||||||
|
rename: '重命名',
|
||||||
|
moveTo: '移动到...',
|
||||||
|
delete: '删除'
|
||||||
|
};
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'BaseFolderCard',
|
||||||
|
props: {
|
||||||
|
folder: {
|
||||||
|
type: Object as PropType<Folder>,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
acceptDropTypes: {
|
||||||
|
type: Array as PropType<string[]>,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
type: Object as PropType<Partial<DefaultLabels>>,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['click', 'contextmenu', 'open', 'rename', 'move', 'delete', 'item-dropped'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isDragOver: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
mergedLabels(): DefaultLabels {
|
||||||
|
return { ...defaultLabels, ...this.labels };
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleDragOver(event: DragEvent) {
|
||||||
|
if (!event.dataTransfer) return;
|
||||||
|
event.dataTransfer.dropEffect = 'move';
|
||||||
|
this.isDragOver = true;
|
||||||
|
},
|
||||||
|
handleDragLeave() {
|
||||||
|
this.isDragOver = false;
|
||||||
|
},
|
||||||
|
handleDrop(event: DragEvent) {
|
||||||
|
this.isDragOver = false;
|
||||||
|
if (!event.dataTransfer) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.dataTransfer.getData('application/json'));
|
||||||
|
if (this.acceptDropTypes.length === 0 || this.acceptDropTypes.includes(data.type)) {
|
||||||
|
this.$emit('item-dropped', {
|
||||||
|
item_id: data.id || data.persona_id || data.item_id,
|
||||||
|
item_type: data.type,
|
||||||
|
target_folder_id: this.folder.folder_id,
|
||||||
|
source_data: data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to parse drop data:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.base-folder-card {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base-folder-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.base-folder-card.drag-over {
|
||||||
|
background-color: rgba(var(--v-theme-primary), 0.15);
|
||||||
|
border: 2px dashed rgb(var(--v-theme-primary));
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-info {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,272 @@
|
|||||||
|
<template>
|
||||||
|
<div class="base-folder-tree">
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<v-text-field v-model="searchQuery" :placeholder="labels.searchPlaceholder" prepend-inner-icon="mdi-magnify"
|
||||||
|
variant="outlined" density="compact" hide-details clearable class="mb-3" />
|
||||||
|
|
||||||
|
<!-- 根目录节点 -->
|
||||||
|
<v-list density="compact" nav class="tree-list" bg-color="transparent">
|
||||||
|
<v-list-item :active="currentFolderId === null" @click="handleFolderClick(null)" rounded="lg"
|
||||||
|
:class="['root-item', { 'drag-over': isRootDragOver }]"
|
||||||
|
@dragover.prevent="handleRootDragOver" @dragleave="handleRootDragLeave" @drop.prevent="handleRootDrop">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon>mdi-home</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ labels.rootFolder }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
<!-- 文件夹树 -->
|
||||||
|
<template v-if="!treeLoading">
|
||||||
|
<BaseFolderTreeNode v-for="folder in filteredFolderTree" :key="folder.folder_id" :folder="folder"
|
||||||
|
:depth="0" :current-folder-id="currentFolderId" :search-query="searchQuery"
|
||||||
|
:expanded-folder-ids="expandedFolderIds" :accept-drop-types="acceptDropTypes"
|
||||||
|
@folder-click="handleFolderClick" @folder-context-menu="handleContextMenu"
|
||||||
|
@item-dropped="$emit('item-dropped', $event)"
|
||||||
|
@toggle-expansion="$emit('toggle-expansion', $event)"
|
||||||
|
@set-expansion="$emit('set-expansion', $event)" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<div v-if="treeLoading" class="text-center pa-4">
|
||||||
|
<v-progress-circular indeterminate size="24" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<div v-if="!treeLoading && folderTree.length === 0" class="text-center pa-4 text-medium-emphasis">
|
||||||
|
<v-icon size="32" class="mb-2">mdi-folder-outline</v-icon>
|
||||||
|
<div class="text-body-2">{{ labels.noFolders }}</div>
|
||||||
|
</div>
|
||||||
|
</v-list>
|
||||||
|
|
||||||
|
<!-- 右键菜单 -->
|
||||||
|
<v-menu v-model="contextMenu.show" :target="contextMenu.target as any" location="end" :close-on-content-click="true">
|
||||||
|
<v-list density="compact">
|
||||||
|
<v-list-item @click="openFolder">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small">mdi-folder-open</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ mergedLabels.contextMenu.open }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item @click="$emit('rename-folder', contextMenu.folder)">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small">mdi-pencil</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ mergedLabels.contextMenu.rename }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item @click="$emit('move-folder', contextMenu.folder)">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small">mdi-folder-move</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ mergedLabels.contextMenu.moveTo }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-divider class="my-1" />
|
||||||
|
<v-list-item @click="$emit('delete-folder', contextMenu.folder)" class="text-error">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small" color="error">mdi-delete</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ mergedLabels.contextMenu.delete }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue';
|
||||||
|
import type { FolderTreeNode, ContextMenuEvent } from './types';
|
||||||
|
import BaseFolderTreeNode from './BaseFolderTreeNode.vue';
|
||||||
|
|
||||||
|
interface ContextMenuState {
|
||||||
|
show: boolean;
|
||||||
|
target: [number, number] | null;
|
||||||
|
folder: FolderTreeNode | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Folder {
|
||||||
|
folder_id: string;
|
||||||
|
name: string;
|
||||||
|
parent_id: string | null;
|
||||||
|
description?: string | null;
|
||||||
|
sort_order?: number;
|
||||||
|
created_at?: string;
|
||||||
|
updated_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DefaultLabels {
|
||||||
|
searchPlaceholder: string;
|
||||||
|
rootFolder: string;
|
||||||
|
noFolders: string;
|
||||||
|
contextMenu: {
|
||||||
|
open: string;
|
||||||
|
rename: string;
|
||||||
|
moveTo: string;
|
||||||
|
delete: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultLabels: DefaultLabels = {
|
||||||
|
searchPlaceholder: '搜索文件夹...',
|
||||||
|
rootFolder: '根目录',
|
||||||
|
noFolders: '暂无文件夹',
|
||||||
|
contextMenu: {
|
||||||
|
open: '打开',
|
||||||
|
rename: '重命名',
|
||||||
|
moveTo: '移动到...',
|
||||||
|
delete: '删除'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'BaseFolderTree',
|
||||||
|
components: {
|
||||||
|
BaseFolderTreeNode
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
folderTree: {
|
||||||
|
type: Array as PropType<FolderTreeNode[]>,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
currentFolderId: {
|
||||||
|
type: String as PropType<string | null>,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
expandedFolderIds: {
|
||||||
|
type: Array as PropType<string[]>,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
treeLoading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
acceptDropTypes: {
|
||||||
|
type: Array as PropType<string[]>,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
type: Object as PropType<Partial<DefaultLabels>>,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: [
|
||||||
|
'folder-click',
|
||||||
|
'rename-folder',
|
||||||
|
'move-folder',
|
||||||
|
'delete-folder',
|
||||||
|
'item-dropped',
|
||||||
|
'toggle-expansion',
|
||||||
|
'set-expansion'
|
||||||
|
],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchQuery: '',
|
||||||
|
isRootDragOver: false,
|
||||||
|
contextMenu: {
|
||||||
|
show: false,
|
||||||
|
target: null,
|
||||||
|
folder: null
|
||||||
|
} as ContextMenuState
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
mergedLabels(): DefaultLabels {
|
||||||
|
return {
|
||||||
|
...defaultLabels,
|
||||||
|
...this.labels,
|
||||||
|
contextMenu: {
|
||||||
|
...defaultLabels.contextMenu,
|
||||||
|
...(this.labels?.contextMenu || {})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
filteredFolderTree(): FolderTreeNode[] {
|
||||||
|
if (!this.searchQuery) {
|
||||||
|
return this.folderTree;
|
||||||
|
}
|
||||||
|
const query = this.searchQuery.toLowerCase();
|
||||||
|
return this.filterTreeBySearch(this.folderTree, query);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
filterTreeBySearch(nodes: FolderTreeNode[], query: string): FolderTreeNode[] {
|
||||||
|
return nodes.filter(node => {
|
||||||
|
const matches = node.name.toLowerCase().includes(query);
|
||||||
|
const childMatches = this.filterTreeBySearch(node.children || [], query);
|
||||||
|
return matches || childMatches.length > 0;
|
||||||
|
}).map(node => ({
|
||||||
|
...node,
|
||||||
|
children: this.filterTreeBySearch(node.children || [], query)
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
handleFolderClick(folderId: string | null) {
|
||||||
|
this.$emit('folder-click', folderId);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleRootDragOver(event: DragEvent) {
|
||||||
|
if (!event.dataTransfer) return;
|
||||||
|
event.dataTransfer.dropEffect = 'move';
|
||||||
|
this.isRootDragOver = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleRootDragLeave() {
|
||||||
|
this.isRootDragOver = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleRootDrop(event: DragEvent) {
|
||||||
|
this.isRootDragOver = false;
|
||||||
|
if (!event.dataTransfer) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.dataTransfer.getData('application/json'));
|
||||||
|
if (this.acceptDropTypes.length === 0 || this.acceptDropTypes.includes(data.type)) {
|
||||||
|
this.$emit('item-dropped', {
|
||||||
|
item_id: data.id || data.persona_id || data.item_id,
|
||||||
|
item_type: data.type,
|
||||||
|
target_folder_id: null,
|
||||||
|
source_data: data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to parse drop data:', e);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleContextMenu(eventData: ContextMenuEvent) {
|
||||||
|
const { event, folder } = eventData;
|
||||||
|
this.contextMenu.target = [event.clientX, event.clientY];
|
||||||
|
this.contextMenu.folder = folder as FolderTreeNode;
|
||||||
|
this.contextMenu.show = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
openFolder() {
|
||||||
|
if (this.contextMenu.folder) {
|
||||||
|
this.$emit('folder-click', this.contextMenu.folder.folder_id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.base-folder-tree {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-item {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-item.drag-over {
|
||||||
|
background-color: rgba(var(--v-theme-primary), 0.15);
|
||||||
|
border: 2px dashed rgb(var(--v-theme-primary));
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,154 @@
|
|||||||
|
<template>
|
||||||
|
<div class="base-folder-tree-node">
|
||||||
|
<v-list-item :active="currentFolderId === folder.folder_id" @click.stop="$emit('folder-click', folder.folder_id)"
|
||||||
|
@contextmenu.prevent="handleContextMenu" rounded="lg" :style="{ paddingLeft: `${(depth + 1) * 16}px` }"
|
||||||
|
:class="['folder-item', { 'drag-over': isDragOver }]"
|
||||||
|
@dragover.prevent="handleDragOver" @dragleave="handleDragLeave" @drop.prevent="handleDrop">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-btn v-if="hasChildren" icon variant="text" size="x-small" @click.stop="toggleExpand"
|
||||||
|
class="expand-btn">
|
||||||
|
<v-icon size="16">{{ isExpanded ? 'mdi-chevron-down' : 'mdi-chevron-right' }}</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<div v-else class="expand-placeholder"></div>
|
||||||
|
<v-icon :color="currentFolderId === folder.folder_id ? 'primary' : ''">
|
||||||
|
{{ isExpanded ? 'mdi-folder-open' : 'mdi-folder' }}
|
||||||
|
</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title class="text-truncate">{{ folder.name }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
<!-- 子文件夹 -->
|
||||||
|
<v-expand-transition>
|
||||||
|
<div v-show="isExpanded && hasChildren">
|
||||||
|
<BaseFolderTreeNode v-for="child in folder.children" :key="child.folder_id" :folder="child" :depth="depth + 1"
|
||||||
|
:current-folder-id="currentFolderId" :search-query="searchQuery"
|
||||||
|
:expanded-folder-ids="expandedFolderIds" :accept-drop-types="acceptDropTypes"
|
||||||
|
@folder-click="$emit('folder-click', $event)"
|
||||||
|
@folder-context-menu="$emit('folder-context-menu', $event)"
|
||||||
|
@item-dropped="$emit('item-dropped', $event)"
|
||||||
|
@toggle-expansion="$emit('toggle-expansion', $event)"
|
||||||
|
@set-expansion="$emit('set-expansion', $event)" />
|
||||||
|
</div>
|
||||||
|
</v-expand-transition>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue';
|
||||||
|
import type { FolderTreeNode } from './types';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'BaseFolderTreeNode',
|
||||||
|
props: {
|
||||||
|
folder: {
|
||||||
|
type: Object as PropType<FolderTreeNode>,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
depth: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
currentFolderId: {
|
||||||
|
type: String as PropType<string | null>,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
searchQuery: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
expandedFolderIds: {
|
||||||
|
type: Array as PropType<string[]>,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
acceptDropTypes: {
|
||||||
|
type: Array as PropType<string[]>,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['folder-click', 'folder-context-menu', 'item-dropped', 'toggle-expansion', 'set-expansion'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isDragOver: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
hasChildren(): boolean {
|
||||||
|
return this.folder.children && this.folder.children.length > 0;
|
||||||
|
},
|
||||||
|
isExpanded(): boolean {
|
||||||
|
return this.expandedFolderIds.includes(this.folder.folder_id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
searchQuery: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newQuery: string) {
|
||||||
|
// 搜索时自动展开匹配的节点
|
||||||
|
if (newQuery && this.hasChildren) {
|
||||||
|
this.$emit('set-expansion', { folderId: this.folder.folder_id, expanded: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleExpand() {
|
||||||
|
this.$emit('toggle-expansion', this.folder.folder_id);
|
||||||
|
},
|
||||||
|
handleContextMenu(event: MouseEvent) {
|
||||||
|
this.$emit('folder-context-menu', { event, folder: this.folder });
|
||||||
|
},
|
||||||
|
handleDragOver(event: DragEvent) {
|
||||||
|
if (!event.dataTransfer) return;
|
||||||
|
event.dataTransfer.dropEffect = 'move';
|
||||||
|
this.isDragOver = true;
|
||||||
|
},
|
||||||
|
handleDragLeave() {
|
||||||
|
this.isDragOver = false;
|
||||||
|
},
|
||||||
|
handleDrop(event: DragEvent) {
|
||||||
|
this.isDragOver = false;
|
||||||
|
if (!event.dataTransfer) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.dataTransfer.getData('application/json'));
|
||||||
|
if (this.acceptDropTypes.length === 0 || this.acceptDropTypes.includes(data.type)) {
|
||||||
|
this.$emit('item-dropped', {
|
||||||
|
item_id: data.id || data.persona_id || data.item_id,
|
||||||
|
item_type: data.type,
|
||||||
|
target_folder_id: this.folder.folder_id,
|
||||||
|
source_data: data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to parse drop data:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.base-folder-tree-node {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-item {
|
||||||
|
min-height: 36px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-item.drag-over {
|
||||||
|
background-color: rgba(var(--v-theme-primary), 0.15);
|
||||||
|
border: 2px dashed rgb(var(--v-theme-primary));
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-btn {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-placeholder {
|
||||||
|
width: 28px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
<template>
|
||||||
|
<div class="base-move-target-node">
|
||||||
|
<v-list-item :active="selectedFolderId === folder.folder_id" :disabled="isDisabled"
|
||||||
|
@click.stop="!isDisabled && $emit('select', folder.folder_id)" rounded="lg"
|
||||||
|
:style="{ paddingLeft: `${(depth + 1) * 16}px` }" class="folder-item">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-btn v-if="hasChildren" icon variant="text" size="x-small" @click.stop="toggleExpand"
|
||||||
|
class="expand-btn" :disabled="isDisabled">
|
||||||
|
<v-icon size="16">{{ isExpanded ? 'mdi-chevron-down' : 'mdi-chevron-right' }}</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<div v-else class="expand-placeholder"></div>
|
||||||
|
<v-icon :color="isDisabled ? 'grey' : (selectedFolderId === folder.folder_id ? 'primary' : '')">
|
||||||
|
{{ isExpanded ? 'mdi-folder-open' : 'mdi-folder' }}
|
||||||
|
</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title class="text-truncate">{{ folder.name }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
<!-- 子文件夹 -->
|
||||||
|
<v-expand-transition>
|
||||||
|
<div v-show="isExpanded && hasChildren">
|
||||||
|
<BaseMoveTargetNode v-for="child in folder.children" :key="child.folder_id" :folder="child" :depth="depth + 1"
|
||||||
|
:selected-folder-id="selectedFolderId" :disabled-folder-ids="disabledFolderIds"
|
||||||
|
@select="$emit('select', $event)" />
|
||||||
|
</div>
|
||||||
|
</v-expand-transition>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue';
|
||||||
|
import type { FolderTreeNode } from './types';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'BaseMoveTargetNode',
|
||||||
|
props: {
|
||||||
|
folder: {
|
||||||
|
type: Object as PropType<FolderTreeNode>,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
depth: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
selectedFolderId: {
|
||||||
|
type: String as PropType<string | null>,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
disabledFolderIds: {
|
||||||
|
type: Array as PropType<string[]>,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['select'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isExpanded: true
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
hasChildren(): boolean {
|
||||||
|
return this.folder.children && this.folder.children.length > 0;
|
||||||
|
},
|
||||||
|
isDisabled(): boolean {
|
||||||
|
return this.disabledFolderIds.includes(this.folder.folder_id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleExpand() {
|
||||||
|
this.isExpanded = !this.isExpanded;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.base-move-target-node {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-item {
|
||||||
|
min-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-btn {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-placeholder {
|
||||||
|
width: 28px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,178 @@
|
|||||||
|
<template>
|
||||||
|
<v-dialog v-model="showDialog" max-width="500px" persistent>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>
|
||||||
|
<v-icon class="mr-2">mdi-folder-move</v-icon>
|
||||||
|
{{ labels.title }}
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<p class="text-body-2 text-medium-emphasis mb-4">
|
||||||
|
{{ labels.description }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- 文件夹选择树 -->
|
||||||
|
<div class="folder-select-tree">
|
||||||
|
<v-list density="compact" nav class="tree-list">
|
||||||
|
<!-- 根目录选项 -->
|
||||||
|
<v-list-item :active="selectedFolderId === null" @click="selectFolder(null)" rounded="lg"
|
||||||
|
class="mb-1">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon>mdi-home</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ labels.rootFolder }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
<!-- 文件夹树 -->
|
||||||
|
<template v-if="!treeLoading">
|
||||||
|
<BaseMoveTargetNode v-for="folder in folderTree" :key="folder.folder_id" :folder="folder"
|
||||||
|
:depth="0" :selected-folder-id="selectedFolderId" :disabled-folder-ids="disabledFolderIds"
|
||||||
|
@select="selectFolder" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<div v-if="treeLoading" class="text-center pa-4">
|
||||||
|
<v-progress-circular indeterminate size="24" />
|
||||||
|
</div>
|
||||||
|
</v-list>
|
||||||
|
</div>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn variant="text" @click="closeDialog">
|
||||||
|
{{ labels.cancelButton }}
|
||||||
|
</v-btn>
|
||||||
|
<v-btn color="primary" variant="flat" @click="submitMove" :loading="loading">
|
||||||
|
{{ labels.moveButton }}
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue';
|
||||||
|
import type { FolderTreeNode } from './types';
|
||||||
|
import BaseMoveTargetNode from './BaseMoveTargetNode.vue';
|
||||||
|
import { collectFolderAndChildrenIds } from './useFolderManager';
|
||||||
|
|
||||||
|
interface DefaultLabels {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
rootFolder: string;
|
||||||
|
cancelButton: string;
|
||||||
|
moveButton: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultLabels: DefaultLabels = {
|
||||||
|
title: '移动到文件夹',
|
||||||
|
description: '选择目标文件夹',
|
||||||
|
rootFolder: '根目录',
|
||||||
|
cancelButton: '取消',
|
||||||
|
moveButton: '移动'
|
||||||
|
};
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'BaseMoveToFolderDialog',
|
||||||
|
components: {
|
||||||
|
BaseMoveTargetNode
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
folderTree: {
|
||||||
|
type: Array as PropType<FolderTreeNode[]>,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
treeLoading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 当移动的是文件夹时，需要传入当前文件夹 ID 以禁用自身和子文件夹
|
||||||
|
currentFolderId: {
|
||||||
|
type: String as PropType<string | null>,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
// 项目当前所在的文件夹 ID（用于初始化选择）
|
||||||
|
itemCurrentFolderId: {
|
||||||
|
type: String as PropType<string | null>,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
// 是否是移动文件夹（如果是，需要禁用自身和子文件夹）
|
||||||
|
isMovingFolder: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
type: Object as PropType<Partial<DefaultLabels>>,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'move'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedFolderId: null as string | null,
|
||||||
|
loading: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
showDialog: {
|
||||||
|
get(): boolean {
|
||||||
|
return this.modelValue;
|
||||||
|
},
|
||||||
|
set(value: boolean) {
|
||||||
|
this.$emit('update:modelValue', value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mergedLabels(): DefaultLabels {
|
||||||
|
return { ...defaultLabels, ...this.labels };
|
||||||
|
},
|
||||||
|
// 禁用的文件夹 ID（不能移动到自己或子文件夹）
|
||||||
|
disabledFolderIds(): string[] {
|
||||||
|
if (!this.isMovingFolder || !this.currentFolderId) return [];
|
||||||
|
return collectFolderAndChildrenIds(this.folderTree, this.currentFolderId);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
modelValue(newValue: boolean) {
|
||||||
|
if (newValue) {
|
||||||
|
// 初始化选中为当前所在文件夹
|
||||||
|
this.selectedFolderId = this.itemCurrentFolderId;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectFolder(folderId: string | null) {
|
||||||
|
// 检查是否禁用
|
||||||
|
if (folderId && this.disabledFolderIds.includes(folderId)) return;
|
||||||
|
this.selectedFolderId = folderId;
|
||||||
|
},
|
||||||
|
|
||||||
|
closeDialog() {
|
||||||
|
this.showDialog = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
submitMove() {
|
||||||
|
this.$emit('move', this.selectedFolderId);
|
||||||
|
},
|
||||||
|
|
||||||
|
setLoading(value: boolean) {
|
||||||
|
this.loading = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.folder-select-tree {
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-list {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,349 @@
|
|||||||
|
# 通用文件夹管理组件库
|
||||||
|
|
||||||
|
这是一个可复用的文件夹管理 UI 组件库，提供了完整的文件夹树、面包屑导航、拖放操作等功能。可用于管理各种类型的项目，如 Persona、模板、知识库等。
|
||||||
|
|
||||||
|
## 组件列表
|
||||||
|
|
||||||
|
| 组件 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| `BaseFolderTree` | 文件夹树组件，支持搜索、展开/折叠、右键菜单、拖放 |
|
||||||
|
| `BaseFolderTreeNode` | 文件夹树节点组件（内部使用） |
|
||||||
|
| `BaseFolderCard` | 文件夹卡片组件，用于网格布局展示 |
|
||||||
|
| `BaseFolderBreadcrumb` | 面包屑导航组件 |
|
||||||
|
| `BaseCreateFolderDialog` | 创建文件夹对话框 |
|
||||||
|
| `BaseMoveToFolderDialog` | 移动项目到文件夹对话框 |
|
||||||
|
| `BaseMoveTargetNode` | 移动对话框中的目标文件夹节点（内部使用） |
|
||||||
|
|
||||||
|
## Composable
|
||||||
|
|
||||||
|
### `useFolderManager`
|
||||||
|
|
||||||
|
提供文件夹管理的核心逻辑，包括状态管理、导航、CRUD 操作等。
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { useFolderManager } from '@/components/folder';
|
||||||
|
|
||||||
|
const {
|
||||||
|
// 状态
|
||||||
|
folderTree,
|
||||||
|
currentFolderId,
|
||||||
|
currentFolders,
|
||||||
|
breadcrumbPath,
|
||||||
|
expandedFolderIds,
|
||||||
|
loading,
|
||||||
|
treeLoading,
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
currentFolderName,
|
||||||
|
breadcrumbItems,
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
loadFolderTree,
|
||||||
|
navigateToFolder,
|
||||||
|
refreshCurrentFolder,
|
||||||
|
createFolder,
|
||||||
|
updateFolder,
|
||||||
|
deleteFolder,
|
||||||
|
moveFolder,
|
||||||
|
toggleFolderExpansion,
|
||||||
|
setFolderExpansion,
|
||||||
|
findFolderInTree,
|
||||||
|
findPathToFolder,
|
||||||
|
filterTreeBySearch,
|
||||||
|
} = useFolderManager({
|
||||||
|
operations: {
|
||||||
|
loadFolderTree: async () => {
|
||||||
|
const response = await axios.get('/api/your-module/folder/tree');
|
||||||
|
return response.data.data;
|
||||||
|
},
|
||||||
|
loadSubFolders: async (parentId) => {
|
||||||
|
const response = await axios.get('/api/your-module/folder/list', {
|
||||||
|
params: { parent_id: parentId ?? '' }
|
||||||
|
});
|
||||||
|
return response.data.data;
|
||||||
|
},
|
||||||
|
createFolder: async (data) => {
|
||||||
|
const response = await axios.post('/api/your-module/folder/create', data);
|
||||||
|
return response.data.data.folder;
|
||||||
|
},
|
||||||
|
updateFolder: async (data) => {
|
||||||
|
await axios.post('/api/your-module/folder/update', data);
|
||||||
|
},
|
||||||
|
deleteFolder: async (folderId) => {
|
||||||
|
await axios.post('/api/your-module/folder/delete', { folder_id: folderId });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rootFolderName: '根目录',
|
||||||
|
autoLoad: true,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## 使用示例
|
||||||
|
|
||||||
|
### 基础用法
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div class="folder-manager">
|
||||||
|
<!-- 侧边栏 -->
|
||||||
|
<div class="sidebar">
|
||||||
|
<BaseFolderTree
|
||||||
|
:folder-tree="folderTree"
|
||||||
|
:current-folder-id="currentFolderId"
|
||||||
|
:expanded-folder-ids="expandedFolderIds"
|
||||||
|
:tree-loading="treeLoading"
|
||||||
|
:accept-drop-types="['item']"
|
||||||
|
:labels="treeLabels"
|
||||||
|
@folder-click="navigateToFolder"
|
||||||
|
@rename-folder="handleRenameFolder"
|
||||||
|
@move-folder="handleMoveFolder"
|
||||||
|
@delete-folder="handleDeleteFolder"
|
||||||
|
@item-dropped="handleItemDropped"
|
||||||
|
@toggle-expansion="toggleFolderExpansion"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主内容区 -->
|
||||||
|
<div class="main-content">
|
||||||
|
<!-- 面包屑 -->
|
||||||
|
<BaseFolderBreadcrumb
|
||||||
|
:breadcrumb-path="breadcrumbPath"
|
||||||
|
:current-folder-id="currentFolderId"
|
||||||
|
root-folder-name="根目录"
|
||||||
|
@navigate="navigateToFolder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 文件夹卡片 -->
|
||||||
|
<v-row>
|
||||||
|
<v-col v-for="folder in currentFolders" :key="folder.folder_id" cols="3">
|
||||||
|
<BaseFolderCard
|
||||||
|
:folder="folder"
|
||||||
|
:accept-drop-types="['item']"
|
||||||
|
:labels="cardLabels"
|
||||||
|
@click="navigateToFolder(folder.folder_id)"
|
||||||
|
@open="navigateToFolder(folder.folder_id)"
|
||||||
|
@rename="handleRenameFolder(folder)"
|
||||||
|
@move="handleMoveFolder(folder)"
|
||||||
|
@delete="handleDeleteFolder(folder)"
|
||||||
|
@item-dropped="handleItemDropped"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 创建文件夹对话框 -->
|
||||||
|
<BaseCreateFolderDialog
|
||||||
|
v-model="showCreateDialog"
|
||||||
|
:parent-folder-id="currentFolderId"
|
||||||
|
:labels="createDialogLabels"
|
||||||
|
@create="handleCreateFolder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 移动对话框 -->
|
||||||
|
<BaseMoveToFolderDialog
|
||||||
|
v-model="showMoveDialog"
|
||||||
|
:folder-tree="folderTree"
|
||||||
|
:tree-loading="treeLoading"
|
||||||
|
:current-folder-id="movingFolder?.folder_id"
|
||||||
|
:item-current-folder-id="movingFolder?.parent_id"
|
||||||
|
:is-moving-folder="true"
|
||||||
|
:labels="moveDialogLabels"
|
||||||
|
@move="handleMove"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import {
|
||||||
|
BaseFolderTree,
|
||||||
|
BaseFolderCard,
|
||||||
|
BaseFolderBreadcrumb,
|
||||||
|
BaseCreateFolderDialog,
|
||||||
|
BaseMoveToFolderDialog,
|
||||||
|
useFolderManager,
|
||||||
|
} from '@/components/folder';
|
||||||
|
|
||||||
|
const folderManager = useFolderManager({
|
||||||
|
operations: {
|
||||||
|
// ... 实现你的 API 调用
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const {
|
||||||
|
folderTree,
|
||||||
|
currentFolderId,
|
||||||
|
currentFolders,
|
||||||
|
breadcrumbPath,
|
||||||
|
expandedFolderIds,
|
||||||
|
treeLoading,
|
||||||
|
navigateToFolder,
|
||||||
|
toggleFolderExpansion,
|
||||||
|
createFolder,
|
||||||
|
} = folderManager;
|
||||||
|
|
||||||
|
const showCreateDialog = ref(false);
|
||||||
|
const showMoveDialog = ref(false);
|
||||||
|
const movingFolder = ref(null);
|
||||||
|
|
||||||
|
// 自定义标签
|
||||||
|
const treeLabels = {
|
||||||
|
searchPlaceholder: '搜索文件夹...',
|
||||||
|
rootFolder: '根目录',
|
||||||
|
noFolders: '暂无文件夹',
|
||||||
|
contextMenu: {
|
||||||
|
open: '打开',
|
||||||
|
rename: '重命名',
|
||||||
|
moveTo: '移动到...',
|
||||||
|
delete: '删除',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const cardLabels = {
|
||||||
|
open: '打开',
|
||||||
|
rename: '重命名',
|
||||||
|
moveTo: '移动到...',
|
||||||
|
delete: '删除',
|
||||||
|
};
|
||||||
|
|
||||||
|
const createDialogLabels = {
|
||||||
|
title: '创建文件夹',
|
||||||
|
nameLabel: '名称',
|
||||||
|
descriptionLabel: '描述',
|
||||||
|
nameRequired: '请输入名称',
|
||||||
|
cancelButton: '取消',
|
||||||
|
createButton: '创建',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理函数
|
||||||
|
async function handleCreateFolder(data) {
|
||||||
|
await createFolder(data);
|
||||||
|
showCreateDialog.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRenameFolder(folder) {
|
||||||
|
// 打开重命名对话框
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMoveFolder(folder) {
|
||||||
|
movingFolder.value = folder;
|
||||||
|
showMoveDialog.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDeleteFolder(folder) {
|
||||||
|
// 确认并删除
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleItemDropped({ item_id, item_type, target_folder_id }) {
|
||||||
|
// 处理拖放
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleMove(targetFolderId) {
|
||||||
|
// 执行移动
|
||||||
|
showMoveDialog.value = false;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 类型定义
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// 文件夹基础接口
|
||||||
|
interface Folder {
|
||||||
|
folder_id: string;
|
||||||
|
name: string;
|
||||||
|
parent_id: string | null;
|
||||||
|
description?: string | null;
|
||||||
|
sort_order?: number;
|
||||||
|
created_at?: string;
|
||||||
|
updated_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文件夹树节点接口
|
||||||
|
interface FolderTreeNode extends Folder {
|
||||||
|
children: FolderTreeNode[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 拖放事件数据
|
||||||
|
interface DropEventData {
|
||||||
|
item_id: string;
|
||||||
|
item_type: string;
|
||||||
|
target_folder_id: string | null;
|
||||||
|
source_data?: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建文件夹数据
|
||||||
|
interface CreateFolderData {
|
||||||
|
name: string;
|
||||||
|
parent_id?: string | null;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 国际化支持
|
||||||
|
|
||||||
|
所有组件都支持通过 `labels` prop 自定义文本，方便集成到不同的国际化方案中：
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<BaseFolderTree
|
||||||
|
:labels="{
|
||||||
|
searchPlaceholder: t('folder.search'),
|
||||||
|
rootFolder: t('folder.root'),
|
||||||
|
noFolders: t('folder.empty'),
|
||||||
|
contextMenu: {
|
||||||
|
open: t('folder.menu.open'),
|
||||||
|
rename: t('folder.menu.rename'),
|
||||||
|
moveTo: t('folder.menu.move'),
|
||||||
|
delete: t('folder.menu.delete'),
|
||||||
|
},
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 拖放支持
|
||||||
|
|
||||||
|
组件内置了拖放支持，可以通过 `acceptDropTypes` 指定接受的拖放类型：
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<!-- 只接受 'persona' 类型的拖放 -->
|
||||||
|
<BaseFolderTree
|
||||||
|
:accept-drop-types="['persona']"
|
||||||
|
@item-dropped="handleDrop"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 拖放事件处理 -->
|
||||||
|
<script setup>
|
||||||
|
function handleDrop({ item_id, item_type, target_folder_id, source_data }) {
|
||||||
|
if (item_type === 'persona') {
|
||||||
|
// 移动 persona 到目标文件夹
|
||||||
|
movePersonaToFolder(item_id, target_folder_id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 与 Pinia Store 集成
|
||||||
|
|
||||||
|
如果你更喜欢使用 Pinia Store 管理状态，可以参考现有的 `personaStore.ts` 实现：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// stores/myFolderStore.ts
|
||||||
|
import { defineStore } from 'pinia';
|
||||||
|
import type { FolderTreeNode, Folder } from '@/components/folder';
|
||||||
|
|
||||||
|
export const useMyFolderStore = defineStore('myFolder', {
|
||||||
|
state: () => ({
|
||||||
|
folderTree: [] as FolderTreeNode[],
|
||||||
|
currentFolderId: null as string | null,
|
||||||
|
currentFolders: [] as Folder[],
|
||||||
|
// ...
|
||||||
|
}),
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
async loadFolderTree() {
|
||||||
|
// ...
|
||||||
|
},
|
||||||
|
// ...
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
/**
|
||||||
|
* 通用文件夹管理组件库
|
||||||
|
*
|
||||||
|
* 提供可复用的文件夹管理 UI 组件，适用于各种需要文件夹组织功能的场景
|
||||||
|
* 如：persona 管理、模板管理、知识库管理等
|
||||||
|
*
|
||||||
|
* 使用示例:
|
||||||
|
* ```vue
|
||||||
|
* <script setup>
|
||||||
|
* import {
|
||||||
|
* BaseFolderTree,
|
||||||
|
* BaseFolderCard,
|
||||||
|
* BaseFolderBreadcrumb,
|
||||||
|
* BaseCreateFolderDialog,
|
||||||
|
* BaseMoveToFolderDialog,
|
||||||
|
* useFolderManager
|
||||||
|
* } from '@/components/folder';
|
||||||
|
*
|
||||||
|
* const folderManager = useFolderManager({
|
||||||
|
* operations: {
|
||||||
|
* loadFolderTree: async () => { ... },
|
||||||
|
* loadSubFolders: async (parentId) => { ... },
|
||||||
|
* createFolder: async (data) => { ... },
|
||||||
|
* updateFolder: async (data) => { ... },
|
||||||
|
* deleteFolder: async (folderId) => { ... },
|
||||||
|
* }
|
||||||
|
* });
|
||||||
|
* </script>
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 类型导出
|
||||||
|
export * from './types';
|
||||||
|
|
||||||
|
// Composable 导出
|
||||||
|
export { useFolderManager, collectFolderAndChildrenIds } from './useFolderManager';
|
||||||
|
export type { UseFolderManagerOptions, UseFolderManagerReturn } from './useFolderManager';
|
||||||
|
|
||||||
|
// 组件导出
|
||||||
|
export { default as BaseFolderTree } from './BaseFolderTree.vue';
|
||||||
|
export { default as BaseFolderTreeNode } from './BaseFolderTreeNode.vue';
|
||||||
|
export { default as BaseFolderCard } from './BaseFolderCard.vue';
|
||||||
|
export { default as BaseFolderBreadcrumb } from './BaseFolderBreadcrumb.vue';
|
||||||
|
export { default as BaseCreateFolderDialog } from './BaseCreateFolderDialog.vue';
|
||||||
|
export { default as BaseMoveToFolderDialog } from './BaseMoveToFolderDialog.vue';
|
||||||
|
export { default as BaseMoveTargetNode } from './BaseMoveTargetNode.vue';
|
||||||
@@ -0,0 +1,200 @@
|
|||||||
|
/**
|
||||||
|
* 通用文件夹管理组件类型定义
|
||||||
|
*
|
||||||
|
* 这是一个可复用的文件夹管理系统，可用于管理各种类型的项目（如 persona、模板、知识库等）
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 文件夹基础接口
|
||||||
|
*/
|
||||||
|
export interface Folder {
|
||||||
|
folder_id: string;
|
||||||
|
name: string;
|
||||||
|
parent_id: string | null;
|
||||||
|
description?: string | null;
|
||||||
|
sort_order?: number;
|
||||||
|
created_at?: string;
|
||||||
|
updated_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 文件夹树节点接口
|
||||||
|
*/
|
||||||
|
export interface FolderTreeNode extends Folder {
|
||||||
|
children: FolderTreeNode[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 可拖拽的项目接口（可以是文件夹或其他项目）
|
||||||
|
*/
|
||||||
|
export interface DraggableItem {
|
||||||
|
id: string;
|
||||||
|
type: string;
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 拖拽放置事件数据
|
||||||
|
*/
|
||||||
|
export interface DropEventData {
|
||||||
|
item_id: string;
|
||||||
|
item_type: string;
|
||||||
|
target_folder_id: string | null;
|
||||||
|
source_data?: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 文件夹操作接口 - 由使用方提供具体实现
|
||||||
|
*/
|
||||||
|
export interface FolderOperations {
|
||||||
|
// 加载文件夹树
|
||||||
|
loadFolderTree: () => Promise<FolderTreeNode[]>;
|
||||||
|
|
||||||
|
// 加载指定文件夹的子文件夹
|
||||||
|
loadSubFolders: (parentId: string | null) => Promise<Folder[]>;
|
||||||
|
|
||||||
|
// 创建文件夹
|
||||||
|
createFolder: (data: CreateFolderData) => Promise<Folder>;
|
||||||
|
|
||||||
|
// 更新文件夹
|
||||||
|
updateFolder: (data: UpdateFolderData) => Promise<void>;
|
||||||
|
|
||||||
|
// 删除文件夹
|
||||||
|
deleteFolder: (folderId: string) => Promise<void>;
|
||||||
|
|
||||||
|
// 移动文件夹
|
||||||
|
moveFolder?: (folderId: string, targetParentId: string | null) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建文件夹数据
|
||||||
|
*/
|
||||||
|
export interface CreateFolderData {
|
||||||
|
name: string;
|
||||||
|
parent_id?: string | null;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新文件夹数据
|
||||||
|
*/
|
||||||
|
export interface UpdateFolderData {
|
||||||
|
folder_id: string;
|
||||||
|
name?: string;
|
||||||
|
description?: string;
|
||||||
|
parent_id?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 文件夹管理器状态
|
||||||
|
*/
|
||||||
|
export interface FolderManagerState {
|
||||||
|
folderTree: FolderTreeNode[];
|
||||||
|
currentFolderId: string | null;
|
||||||
|
currentFolders: Folder[];
|
||||||
|
breadcrumbPath: FolderTreeNode[];
|
||||||
|
expandedFolderIds: string[];
|
||||||
|
loading: boolean;
|
||||||
|
treeLoading: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 面包屑项接口
|
||||||
|
*/
|
||||||
|
export interface BreadcrumbItem {
|
||||||
|
title: string;
|
||||||
|
folderId: string | null;
|
||||||
|
disabled: boolean;
|
||||||
|
isRoot: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 上下文菜单事件
|
||||||
|
*/
|
||||||
|
export interface ContextMenuEvent {
|
||||||
|
event: MouseEvent;
|
||||||
|
folder: Folder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 文件夹组件 i18n 键配置
|
||||||
|
* 允许使用方自定义翻译键
|
||||||
|
*/
|
||||||
|
export interface FolderI18nKeys {
|
||||||
|
// 搜索框
|
||||||
|
searchPlaceholder?: string;
|
||||||
|
|
||||||
|
// 根目录
|
||||||
|
rootFolder?: string;
|
||||||
|
|
||||||
|
// 侧边栏标题
|
||||||
|
sidebarTitle?: string;
|
||||||
|
|
||||||
|
// 空状态
|
||||||
|
noFolders?: string;
|
||||||
|
|
||||||
|
// 文件夹标题
|
||||||
|
foldersTitle?: string;
|
||||||
|
|
||||||
|
// 按钮
|
||||||
|
buttons?: {
|
||||||
|
create?: string;
|
||||||
|
cancel?: string;
|
||||||
|
save?: string;
|
||||||
|
delete?: string;
|
||||||
|
move?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表单
|
||||||
|
form?: {
|
||||||
|
name?: string;
|
||||||
|
description?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 验证
|
||||||
|
validation?: {
|
||||||
|
nameRequired?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 右键菜单
|
||||||
|
contextMenu?: {
|
||||||
|
open?: string;
|
||||||
|
rename?: string;
|
||||||
|
moveTo?: string;
|
||||||
|
delete?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 对话框
|
||||||
|
dialogs?: {
|
||||||
|
createTitle?: string;
|
||||||
|
renameTitle?: string;
|
||||||
|
deleteTitle?: string;
|
||||||
|
deleteMessage?: string;
|
||||||
|
deleteWarning?: string;
|
||||||
|
moveTitle?: string;
|
||||||
|
moveDescription?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 消息
|
||||||
|
messages?: {
|
||||||
|
createSuccess?: string;
|
||||||
|
createError?: string;
|
||||||
|
renameSuccess?: string;
|
||||||
|
renameError?: string;
|
||||||
|
deleteSuccess?: string;
|
||||||
|
deleteError?: string;
|
||||||
|
moveSuccess?: string;
|
||||||
|
moveError?: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通用文件夹组件 Props
|
||||||
|
*/
|
||||||
|
export interface BaseFolderProps {
|
||||||
|
// i18n 翻译函数
|
||||||
|
t?: (key: string, params?: Record<string, any>) => string;
|
||||||
|
|
||||||
|
// i18n 键配置
|
||||||
|
i18nKeys?: FolderI18nKeys;
|
||||||
|
}
|
||||||
@@ -0,0 +1,324 @@
|
|||||||
|
/**
|
||||||
|
* 通用文件夹管理 Composable
|
||||||
|
*
|
||||||
|
* 提供文件夹管理的核心逻辑，可以被不同的业务模块复用
|
||||||
|
*/
|
||||||
|
import { ref, computed, reactive, type Ref, type ComputedRef } from 'vue';
|
||||||
|
import type {
|
||||||
|
Folder,
|
||||||
|
FolderTreeNode,
|
||||||
|
FolderOperations,
|
||||||
|
CreateFolderData,
|
||||||
|
UpdateFolderData,
|
||||||
|
BreadcrumbItem,
|
||||||
|
} from './types';
|
||||||
|
|
||||||
|
export interface UseFolderManagerOptions {
|
||||||
|
// 文件夹操作实现
|
||||||
|
operations: FolderOperations;
|
||||||
|
|
||||||
|
// 根目录显示名称
|
||||||
|
rootFolderName?: string;
|
||||||
|
|
||||||
|
// 是否自动加载
|
||||||
|
autoLoad?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UseFolderManagerReturn {
|
||||||
|
// 状态
|
||||||
|
folderTree: Ref<FolderTreeNode[]>;
|
||||||
|
currentFolderId: Ref<string | null>;
|
||||||
|
currentFolders: Ref<Folder[]>;
|
||||||
|
breadcrumbPath: Ref<FolderTreeNode[]>;
|
||||||
|
expandedFolderIds: Ref<string[]>;
|
||||||
|
loading: Ref<boolean>;
|
||||||
|
treeLoading: Ref<boolean>;
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
currentFolderName: ComputedRef<string>;
|
||||||
|
breadcrumbItems: ComputedRef<BreadcrumbItem[]>;
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
loadFolderTree: () => Promise<void>;
|
||||||
|
navigateToFolder: (folderId: string | null) => Promise<void>;
|
||||||
|
refreshCurrentFolder: () => Promise<void>;
|
||||||
|
|
||||||
|
createFolder: (data: CreateFolderData) => Promise<Folder>;
|
||||||
|
updateFolder: (data: UpdateFolderData) => Promise<void>;
|
||||||
|
deleteFolder: (folderId: string) => Promise<void>;
|
||||||
|
moveFolder: (folderId: string, targetParentId: string | null) => Promise<void>;
|
||||||
|
|
||||||
|
toggleFolderExpansion: (folderId: string) => void;
|
||||||
|
setFolderExpansion: (folderId: string, expanded: boolean) => void;
|
||||||
|
|
||||||
|
findFolderInTree: (folderId: string) => FolderTreeNode | null;
|
||||||
|
findPathToFolder: (folderId: string) => FolderTreeNode[];
|
||||||
|
|
||||||
|
filterTreeBySearch: (query: string) => FolderTreeNode[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建文件夹管理 composable
|
||||||
|
*/
|
||||||
|
export function useFolderManager(options: UseFolderManagerOptions): UseFolderManagerReturn {
|
||||||
|
const { operations, rootFolderName = '根目录', autoLoad = false } = options;
|
||||||
|
|
||||||
|
// 状态
|
||||||
|
const folderTree = ref<FolderTreeNode[]>([]);
|
||||||
|
const currentFolderId = ref<string | null>(null);
|
||||||
|
const currentFolders = ref<Folder[]>([]);
|
||||||
|
const breadcrumbPath = ref<FolderTreeNode[]>([]);
|
||||||
|
const expandedFolderIds = ref<string[]>([]);
|
||||||
|
const loading = ref(false);
|
||||||
|
const treeLoading = ref(false);
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const currentFolderName = computed(() => {
|
||||||
|
if (breadcrumbPath.value.length === 0) {
|
||||||
|
return rootFolderName;
|
||||||
|
}
|
||||||
|
return breadcrumbPath.value[breadcrumbPath.value.length - 1]?.name || rootFolderName;
|
||||||
|
});
|
||||||
|
|
||||||
|
const breadcrumbItems = computed((): BreadcrumbItem[] => {
|
||||||
|
const items: BreadcrumbItem[] = [
|
||||||
|
{
|
||||||
|
title: rootFolderName,
|
||||||
|
folderId: null,
|
||||||
|
disabled: currentFolderId.value === null,
|
||||||
|
isRoot: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
breadcrumbPath.value.forEach((folder, index) => {
|
||||||
|
items.push({
|
||||||
|
title: folder.name,
|
||||||
|
folderId: folder.folder_id,
|
||||||
|
disabled: index === breadcrumbPath.value.length - 1,
|
||||||
|
isRoot: false,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return items;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 内部方法
|
||||||
|
const findPathToFolderInternal = (
|
||||||
|
nodes: FolderTreeNode[],
|
||||||
|
targetId: string,
|
||||||
|
path: FolderTreeNode[] = []
|
||||||
|
): FolderTreeNode[] | null => {
|
||||||
|
for (const node of nodes) {
|
||||||
|
if (node.folder_id === targetId) {
|
||||||
|
return [...path, node];
|
||||||
|
}
|
||||||
|
if (node.children && node.children.length > 0) {
|
||||||
|
const result = findPathToFolderInternal(node.children, targetId, [...path, node]);
|
||||||
|
if (result) return result;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateBreadcrumb = (folderId: string | null): void => {
|
||||||
|
if (folderId === null) {
|
||||||
|
breadcrumbPath.value = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const path = findPathToFolderInternal(folderTree.value, folderId);
|
||||||
|
breadcrumbPath.value = path || [];
|
||||||
|
};
|
||||||
|
|
||||||
|
// 公开方法
|
||||||
|
const loadFolderTree = async (): Promise<void> => {
|
||||||
|
treeLoading.value = true;
|
||||||
|
try {
|
||||||
|
folderTree.value = await operations.loadFolderTree();
|
||||||
|
} finally {
|
||||||
|
treeLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const navigateToFolder = async (folderId: string | null): Promise<void> => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
currentFolderId.value = folderId;
|
||||||
|
currentFolders.value = await operations.loadSubFolders(folderId);
|
||||||
|
updateBreadcrumb(folderId);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const refreshCurrentFolder = async (): Promise<void> => {
|
||||||
|
await navigateToFolder(currentFolderId.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const createFolder = async (data: CreateFolderData): Promise<Folder> => {
|
||||||
|
const folder = await operations.createFolder({
|
||||||
|
...data,
|
||||||
|
parent_id: data.parent_id ?? currentFolderId.value,
|
||||||
|
});
|
||||||
|
|
||||||
|
await Promise.all([refreshCurrentFolder(), loadFolderTree()]);
|
||||||
|
|
||||||
|
return folder;
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateFolder = async (data: UpdateFolderData): Promise<void> => {
|
||||||
|
await operations.updateFolder(data);
|
||||||
|
await Promise.all([refreshCurrentFolder(), loadFolderTree()]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteFolder = async (folderId: string): Promise<void> => {
|
||||||
|
await operations.deleteFolder(folderId);
|
||||||
|
await Promise.all([refreshCurrentFolder(), loadFolderTree()]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const moveFolder = async (folderId: string, targetParentId: string | null): Promise<void> => {
|
||||||
|
if (operations.moveFolder) {
|
||||||
|
await operations.moveFolder(folderId, targetParentId);
|
||||||
|
} else {
|
||||||
|
// 如果没有专门的移动方法，使用更新方法
|
||||||
|
await operations.updateFolder({
|
||||||
|
folder_id: folderId,
|
||||||
|
parent_id: targetParentId,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
await Promise.all([refreshCurrentFolder(), loadFolderTree()]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleFolderExpansion = (folderId: string): void => {
|
||||||
|
const index = expandedFolderIds.value.indexOf(folderId);
|
||||||
|
if (index === -1) {
|
||||||
|
expandedFolderIds.value.push(folderId);
|
||||||
|
} else {
|
||||||
|
expandedFolderIds.value.splice(index, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const setFolderExpansion = (folderId: string, expanded: boolean): void => {
|
||||||
|
const index = expandedFolderIds.value.indexOf(folderId);
|
||||||
|
if (expanded && index === -1) {
|
||||||
|
expandedFolderIds.value.push(folderId);
|
||||||
|
} else if (!expanded && index !== -1) {
|
||||||
|
expandedFolderIds.value.splice(index, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const findFolderInTree = (folderId: string): FolderTreeNode | null => {
|
||||||
|
const findNode = (nodes: FolderTreeNode[]): FolderTreeNode | null => {
|
||||||
|
for (const node of nodes) {
|
||||||
|
if (node.folder_id === folderId) {
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
if (node.children && node.children.length > 0) {
|
||||||
|
const found = findNode(node.children);
|
||||||
|
if (found) return found;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
return findNode(folderTree.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const findPathToFolder = (folderId: string): FolderTreeNode[] => {
|
||||||
|
return findPathToFolderInternal(folderTree.value, folderId) || [];
|
||||||
|
};
|
||||||
|
|
||||||
|
const filterTreeBySearch = (query: string): FolderTreeNode[] => {
|
||||||
|
if (!query) return folderTree.value;
|
||||||
|
|
||||||
|
const lowerQuery = query.toLowerCase();
|
||||||
|
|
||||||
|
const filterNodes = (nodes: FolderTreeNode[]): FolderTreeNode[] => {
|
||||||
|
return nodes
|
||||||
|
.filter((node) => {
|
||||||
|
const matches = node.name.toLowerCase().includes(lowerQuery);
|
||||||
|
const childMatches = filterNodes(node.children || []);
|
||||||
|
return matches || childMatches.length > 0;
|
||||||
|
})
|
||||||
|
.map((node) => ({
|
||||||
|
...node,
|
||||||
|
children: filterNodes(node.children || []),
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
return filterNodes(folderTree.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 自动加载
|
||||||
|
if (autoLoad) {
|
||||||
|
loadFolderTree();
|
||||||
|
navigateToFolder(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// 状态
|
||||||
|
folderTree,
|
||||||
|
currentFolderId,
|
||||||
|
currentFolders,
|
||||||
|
breadcrumbPath,
|
||||||
|
expandedFolderIds,
|
||||||
|
loading,
|
||||||
|
treeLoading,
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
currentFolderName,
|
||||||
|
breadcrumbItems,
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
loadFolderTree,
|
||||||
|
navigateToFolder,
|
||||||
|
refreshCurrentFolder,
|
||||||
|
createFolder,
|
||||||
|
updateFolder,
|
||||||
|
deleteFolder,
|
||||||
|
moveFolder,
|
||||||
|
toggleFolderExpansion,
|
||||||
|
setFolderExpansion,
|
||||||
|
findFolderInTree,
|
||||||
|
findPathToFolder,
|
||||||
|
filterTreeBySearch,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 收集文件夹及其所有子文件夹的 ID
|
||||||
|
* 用于禁用移动对话框中不能选择的目标
|
||||||
|
*/
|
||||||
|
export function collectFolderAndChildrenIds(
|
||||||
|
folderTree: FolderTreeNode[],
|
||||||
|
folderId: string
|
||||||
|
): string[] {
|
||||||
|
const ids: string[] = [folderId];
|
||||||
|
|
||||||
|
const collectChildIds = (nodes: FolderTreeNode[]): boolean => {
|
||||||
|
for (const node of nodes) {
|
||||||
|
if (node.folder_id === folderId) {
|
||||||
|
const collectAllChildren = (children: FolderTreeNode[]) => {
|
||||||
|
for (const child of children) {
|
||||||
|
ids.push(child.folder_id);
|
||||||
|
if (child.children) {
|
||||||
|
collectAllChildren(child.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (node.children) {
|
||||||
|
collectAllChildren(node.children);
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (node.children && collectChildIds(node.children)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
collectChildIds(folderTree);
|
||||||
|
return ids;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useFolderManager;
|
||||||
@@ -21,7 +21,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { useI18n, useModuleI18n } from '@/i18n/composables';
|
import { useI18n, useModuleI18n } from '@/i18n/composables';
|
||||||
import PersonaManager from '@/components/persona/PersonaManager.vue';
|
import { PersonaManager } from '@/views/persona';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PersonaPage',
|
name: 'PersonaPage',
|
||||||
|
|||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<BaseCreateFolderDialog v-model="showDialog" :parent-folder-id="parentFolderId" :labels="labels"
|
||||||
|
@create="handleCreate" ref="baseDialog" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue';
|
||||||
|
import { useModuleI18n } from '@/i18n/composables';
|
||||||
|
import { usePersonaStore } from '@/stores/personaStore';
|
||||||
|
import { mapActions } from 'pinia';
|
||||||
|
import BaseCreateFolderDialog from '@/components/folder/BaseCreateFolderDialog.vue';
|
||||||
|
import type { CreateFolderData } from '@/components/folder/types';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'CreateFolderDialog',
|
||||||
|
components: {
|
||||||
|
BaseCreateFolderDialog
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
parentFolderId: {
|
||||||
|
type: String as PropType<string | null>,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'created', 'error'],
|
||||||
|
setup() {
|
||||||
|
const { tm } = useModuleI18n('features/persona');
|
||||||
|
return { tm };
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
showDialog: {
|
||||||
|
get(): boolean {
|
||||||
|
return this.modelValue;
|
||||||
|
},
|
||||||
|
set(value: boolean) {
|
||||||
|
this.$emit('update:modelValue', value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labels() {
|
||||||
|
return {
|
||||||
|
title: this.tm('folder.createDialog.title'),
|
||||||
|
nameLabel: this.tm('folder.form.name'),
|
||||||
|
descriptionLabel: this.tm('folder.form.description'),
|
||||||
|
nameRequired: this.tm('folder.validation.nameRequired'),
|
||||||
|
cancelButton: this.tm('buttons.cancel'),
|
||||||
|
createButton: this.tm('buttons.create')
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(usePersonaStore, ['createFolder']),
|
||||||
|
|
||||||
|
async handleCreate(data: CreateFolderData) {
|
||||||
|
const baseDialog = this.$refs.baseDialog as InstanceType<typeof BaseCreateFolderDialog>;
|
||||||
|
baseDialog.setLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.createFolder({
|
||||||
|
name: data.name,
|
||||||
|
description: data.description,
|
||||||
|
parent_id: data.parent_id
|
||||||
|
});
|
||||||
|
this.$emit('created', this.tm('folder.messages.createSuccess'));
|
||||||
|
this.showDialog = false;
|
||||||
|
} catch (error: any) {
|
||||||
|
this.$emit('error', error.message || this.tm('folder.messages.createError'));
|
||||||
|
} finally {
|
||||||
|
baseDialog.setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<v-breadcrumbs :items="breadcrumbItems" class="folder-breadcrumb pa-0">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small" class="mr-1">mdi-folder-outline</v-icon>
|
||||||
|
</template>
|
||||||
|
<template v-slot:item="{ item }">
|
||||||
|
<v-breadcrumbs-item :disabled="item.disabled" @click="!item.disabled && handleClick((item as any).folderId)"
|
||||||
|
:class="{ 'breadcrumb-link': !item.disabled }">
|
||||||
|
<v-icon v-if="(item as any).isRoot" size="small" class="mr-1">mdi-home</v-icon>
|
||||||
|
{{ item.title }}
|
||||||
|
</v-breadcrumbs-item>
|
||||||
|
</template>
|
||||||
|
<template v-slot:divider>
|
||||||
|
<v-icon size="small">mdi-chevron-right</v-icon>
|
||||||
|
</template>
|
||||||
|
</v-breadcrumbs>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { useModuleI18n } from '@/i18n/composables';
|
||||||
|
import { usePersonaStore } from '@/stores/personaStore';
|
||||||
|
import { mapState, mapActions } from 'pinia';
|
||||||
|
import type { FolderTreeNode } from '@/components/folder/types';
|
||||||
|
|
||||||
|
interface BreadcrumbItem {
|
||||||
|
title: string;
|
||||||
|
folderId: string | null;
|
||||||
|
disabled: boolean;
|
||||||
|
isRoot: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'FolderBreadcrumb',
|
||||||
|
setup() {
|
||||||
|
const { tm } = useModuleI18n('features/persona');
|
||||||
|
return { tm };
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(usePersonaStore, ['breadcrumbPath', 'currentFolderId']),
|
||||||
|
|
||||||
|
breadcrumbItems(): BreadcrumbItem[] {
|
||||||
|
const items: BreadcrumbItem[] = [
|
||||||
|
{
|
||||||
|
title: this.tm('folder.rootFolder'),
|
||||||
|
folderId: null,
|
||||||
|
disabled: this.currentFolderId === null,
|
||||||
|
isRoot: true
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
(this.breadcrumbPath as FolderTreeNode[]).forEach((folder, index) => {
|
||||||
|
items.push({
|
||||||
|
title: folder.name,
|
||||||
|
folderId: folder.folder_id,
|
||||||
|
disabled: index === (this.breadcrumbPath as FolderTreeNode[]).length - 1,
|
||||||
|
isRoot: false
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return items;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(usePersonaStore, ['navigateToFolder']),
|
||||||
|
|
||||||
|
handleClick(folderId: string | null) {
|
||||||
|
this.navigateToFolder(folderId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.folder-breadcrumb {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-link {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-link:hover {
|
||||||
|
color: rgb(var(--v-theme-primary));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,120 @@
|
|||||||
|
<template>
|
||||||
|
<v-card class="folder-card" :class="{ 'drag-over': isDragOver }" rounded="lg" @click="$emit('click')" @contextmenu.prevent="$emit('contextmenu', $event)"
|
||||||
|
elevation="1" hover @dragover.prevent="handleDragOver" @dragleave="handleDragLeave" @drop.prevent="handleDrop">
|
||||||
|
<v-card-text class="d-flex align-center pa-3">
|
||||||
|
<v-icon size="40" color="amber-darken-2" class="mr-3">mdi-folder</v-icon>
|
||||||
|
<div class="folder-info flex-grow-1 overflow-hidden">
|
||||||
|
<div class="text-subtitle-1 font-weight-medium text-truncate">{{ folder.name }}</div>
|
||||||
|
<div v-if="folder.description" class="text-body-2 text-medium-emphasis text-truncate">
|
||||||
|
{{ folder.description }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-menu offset-y>
|
||||||
|
<template v-slot:activator="{ props }">
|
||||||
|
<v-btn icon="mdi-dots-vertical" variant="text" size="small" v-bind="props" @click.stop />
|
||||||
|
</template>
|
||||||
|
<v-list density="compact">
|
||||||
|
<v-list-item @click.stop="$emit('open')">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small">mdi-folder-open</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ tm('folder.contextMenu.open') }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item @click.stop="$emit('rename')">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small">mdi-pencil</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ tm('folder.contextMenu.rename') }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item @click.stop="$emit('move')">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small">mdi-folder-move</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ tm('folder.contextMenu.moveTo') }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-divider class="my-1" />
|
||||||
|
<v-list-item @click.stop="$emit('delete')" class="text-error">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small" color="error">mdi-delete</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ tm('folder.contextMenu.delete') }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue';
|
||||||
|
import { useModuleI18n } from '@/i18n/composables';
|
||||||
|
import type { Folder } from '@/components/folder/types';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'FolderCard',
|
||||||
|
props: {
|
||||||
|
folder: {
|
||||||
|
type: Object as PropType<Folder>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['click', 'contextmenu', 'open', 'rename', 'move', 'delete', 'persona-dropped'],
|
||||||
|
setup() {
|
||||||
|
const { tm } = useModuleI18n('features/persona');
|
||||||
|
return { tm };
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isDragOver: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleDragOver(event: DragEvent) {
|
||||||
|
if (event.dataTransfer) {
|
||||||
|
event.dataTransfer.dropEffect = 'move';
|
||||||
|
}
|
||||||
|
this.isDragOver = true;
|
||||||
|
},
|
||||||
|
handleDragLeave() {
|
||||||
|
this.isDragOver = false;
|
||||||
|
},
|
||||||
|
handleDrop(event: DragEvent) {
|
||||||
|
this.isDragOver = false;
|
||||||
|
if (!event.dataTransfer) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.dataTransfer.getData('application/json'));
|
||||||
|
if (data.type === 'persona') {
|
||||||
|
this.$emit('persona-dropped', {
|
||||||
|
persona_id: data.persona_id,
|
||||||
|
target_folder_id: this.folder.folder_id
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to parse drop data:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.folder-card {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-card.drag-over {
|
||||||
|
background-color: rgba(var(--v-theme-primary), 0.15);
|
||||||
|
border: 2px dashed rgb(var(--v-theme-primary));
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-info {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,320 @@
|
|||||||
|
<template>
|
||||||
|
<div class="folder-tree">
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<v-text-field v-model="searchQuery" :placeholder="tm('folder.searchPlaceholder')" prepend-inner-icon="mdi-magnify"
|
||||||
|
variant="outlined" density="compact" hide-details clearable class="mb-3" />
|
||||||
|
|
||||||
|
<!-- 根目录节点 -->
|
||||||
|
<v-list density="compact" nav class="tree-list" bg-color="transparent">
|
||||||
|
<v-list-item :active="currentFolderId === null" @click="handleFolderClick(null)" rounded="lg"
|
||||||
|
:class="['root-item', { 'drag-over': isRootDragOver }]"
|
||||||
|
@dragover.prevent="handleRootDragOver" @dragleave="handleRootDragLeave" @drop.prevent="handleRootDrop">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon>mdi-home</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ tm('folder.rootFolder') }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
<!-- 文件夹树 -->
|
||||||
|
<template v-if="!treeLoading">
|
||||||
|
<FolderTreeNode v-for="folder in filteredFolderTree" :key="folder.folder_id" :folder="folder"
|
||||||
|
:depth="0" :current-folder-id="currentFolderId" :search-query="searchQuery"
|
||||||
|
@folder-click="handleFolderClick" @folder-context-menu="handleContextMenu"
|
||||||
|
@persona-dropped="$emit('persona-dropped', $event)" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<div v-if="treeLoading" class="text-center pa-4">
|
||||||
|
<v-progress-circular indeterminate size="24" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<div v-if="!treeLoading && folderTree.length === 0" class="text-center pa-4 text-medium-emphasis">
|
||||||
|
<v-icon size="32" class="mb-2">mdi-folder-outline</v-icon>
|
||||||
|
<div class="text-body-2">{{ tm('folder.noFolders') }}</div>
|
||||||
|
</div>
|
||||||
|
</v-list>
|
||||||
|
|
||||||
|
<!-- 右键菜单 -->
|
||||||
|
<v-menu v-model="contextMenu.show" :target="contextMenu.target as any" location="end" :close-on-content-click="true">
|
||||||
|
<v-list density="compact">
|
||||||
|
<v-list-item @click="openFolder">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small">mdi-folder-open</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ tm('folder.contextMenu.open') }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item @click="renameFolder">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small">mdi-pencil</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ tm('folder.contextMenu.rename') }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item @click="$emit('move-folder', contextMenu.folder)">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small">mdi-folder-move</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ tm('folder.contextMenu.moveTo') }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-divider class="my-1" />
|
||||||
|
<v-list-item @click="confirmDeleteFolder" class="text-error">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small" color="error">mdi-delete</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ tm('folder.contextMenu.delete') }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
|
|
||||||
|
<!-- 重命名对话框 -->
|
||||||
|
<v-dialog v-model="renameDialog.show" max-width="400px" persistent>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>{{ tm('folder.renameDialog.title') }}</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field v-model="renameDialog.name" :label="tm('folder.form.name')"
|
||||||
|
:rules="[v => !!v || tm('folder.validation.nameRequired')]" variant="outlined"
|
||||||
|
density="comfortable" autofocus @keyup.enter="submitRename" />
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn variant="text" @click="renameDialog.show = false">
|
||||||
|
{{ tm('buttons.cancel') }}
|
||||||
|
</v-btn>
|
||||||
|
<v-btn color="primary" variant="flat" @click="submitRename" :loading="renameDialog.loading"
|
||||||
|
:disabled="!renameDialog.name">
|
||||||
|
{{ tm('buttons.save') }}
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
|
||||||
|
<!-- 删除确认对话框 -->
|
||||||
|
<v-dialog v-model="deleteDialog.show" max-width="450px">
|
||||||
|
<v-card>
|
||||||
|
<v-card-title class="text-error">
|
||||||
|
<v-icon class="mr-2" color="error">mdi-alert</v-icon>
|
||||||
|
{{ tm('folder.deleteDialog.title') }}
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<p>{{ tm('folder.deleteDialog.message', { name: deleteDialog.folder?.name ?? '' }) }}</p>
|
||||||
|
<p class="text-warning mt-2">
|
||||||
|
<v-icon size="small" class="mr-1">mdi-information</v-icon>
|
||||||
|
{{ tm('folder.deleteDialog.warning') }}
|
||||||
|
</p>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn variant="text" @click="deleteDialog.show = false">
|
||||||
|
{{ tm('buttons.cancel') }}
|
||||||
|
</v-btn>
|
||||||
|
<v-btn color="error" variant="flat" @click="submitDelete" :loading="deleteDialog.loading">
|
||||||
|
{{ tm('buttons.delete') }}
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { useModuleI18n } from '@/i18n/composables';
|
||||||
|
import { usePersonaStore } from '@/stores/personaStore';
|
||||||
|
import { mapState, mapActions } from 'pinia';
|
||||||
|
import FolderTreeNode from './FolderTreeNode.vue';
|
||||||
|
import type { FolderTreeNode as FolderTreeNodeType } from '@/components/folder/types';
|
||||||
|
|
||||||
|
interface ContextMenuState {
|
||||||
|
show: boolean;
|
||||||
|
target: [number, number] | null;
|
||||||
|
folder: FolderTreeNodeType | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RenameDialogState {
|
||||||
|
show: boolean;
|
||||||
|
folder: FolderTreeNodeType | null;
|
||||||
|
name: string;
|
||||||
|
loading: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DeleteDialogState {
|
||||||
|
show: boolean;
|
||||||
|
folder: FolderTreeNodeType | null;
|
||||||
|
loading: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'FolderTree',
|
||||||
|
components: {
|
||||||
|
FolderTreeNode
|
||||||
|
},
|
||||||
|
emits: ['move-folder', 'error', 'success', 'persona-dropped'],
|
||||||
|
setup() {
|
||||||
|
const { tm } = useModuleI18n('features/persona');
|
||||||
|
return { tm };
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchQuery: '',
|
||||||
|
isRootDragOver: false,
|
||||||
|
contextMenu: {
|
||||||
|
show: false,
|
||||||
|
target: null,
|
||||||
|
folder: null
|
||||||
|
} as ContextMenuState,
|
||||||
|
renameDialog: {
|
||||||
|
show: false,
|
||||||
|
folder: null,
|
||||||
|
name: '',
|
||||||
|
loading: false
|
||||||
|
} as RenameDialogState,
|
||||||
|
deleteDialog: {
|
||||||
|
show: false,
|
||||||
|
folder: null,
|
||||||
|
loading: false
|
||||||
|
} as DeleteDialogState
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(usePersonaStore, ['folderTree', 'currentFolderId', 'treeLoading']),
|
||||||
|
|
||||||
|
filteredFolderTree(): FolderTreeNodeType[] {
|
||||||
|
if (!this.searchQuery) {
|
||||||
|
return this.folderTree as FolderTreeNodeType[];
|
||||||
|
}
|
||||||
|
const query = this.searchQuery.toLowerCase();
|
||||||
|
return this.filterTreeBySearch(this.folderTree as FolderTreeNodeType[], query);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(usePersonaStore, ['navigateToFolder', 'updateFolder', 'deleteFolder']),
|
||||||
|
|
||||||
|
filterTreeBySearch(nodes: FolderTreeNodeType[], query: string): FolderTreeNodeType[] {
|
||||||
|
return nodes.filter(node => {
|
||||||
|
const matches = node.name.toLowerCase().includes(query);
|
||||||
|
const childMatches = this.filterTreeBySearch(node.children || [], query);
|
||||||
|
return matches || childMatches.length > 0;
|
||||||
|
}).map(node => ({
|
||||||
|
...node,
|
||||||
|
children: this.filterTreeBySearch(node.children || [], query)
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
handleFolderClick(folderId: string | null) {
|
||||||
|
this.navigateToFolder(folderId);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleRootDragOver(event: DragEvent) {
|
||||||
|
if (event.dataTransfer) {
|
||||||
|
event.dataTransfer.dropEffect = 'move';
|
||||||
|
}
|
||||||
|
this.isRootDragOver = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleRootDragLeave() {
|
||||||
|
this.isRootDragOver = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleRootDrop(event: DragEvent) {
|
||||||
|
this.isRootDragOver = false;
|
||||||
|
if (!event.dataTransfer) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.dataTransfer.getData('application/json'));
|
||||||
|
if (data.type === 'persona') {
|
||||||
|
this.$emit('persona-dropped', {
|
||||||
|
persona_id: data.persona_id,
|
||||||
|
target_folder_id: null
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to parse drop data:', e);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleContextMenu(eventData: { event: MouseEvent; folder: FolderTreeNodeType }) {
|
||||||
|
this.contextMenu.target = [eventData.event.clientX, eventData.event.clientY];
|
||||||
|
this.contextMenu.folder = eventData.folder;
|
||||||
|
this.contextMenu.show = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
openFolder() {
|
||||||
|
if (this.contextMenu.folder) {
|
||||||
|
this.navigateToFolder(this.contextMenu.folder.folder_id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
renameFolder() {
|
||||||
|
if (this.contextMenu.folder) {
|
||||||
|
this.renameDialog.folder = this.contextMenu.folder;
|
||||||
|
this.renameDialog.name = this.contextMenu.folder.name;
|
||||||
|
this.renameDialog.show = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async submitRename() {
|
||||||
|
if (!this.renameDialog.name || !this.renameDialog.folder) return;
|
||||||
|
|
||||||
|
this.renameDialog.loading = true;
|
||||||
|
try {
|
||||||
|
await this.updateFolder({
|
||||||
|
folder_id: this.renameDialog.folder.folder_id,
|
||||||
|
name: this.renameDialog.name
|
||||||
|
});
|
||||||
|
this.$emit('success', this.tm('folder.messages.renameSuccess'));
|
||||||
|
this.renameDialog.show = false;
|
||||||
|
} catch (error: any) {
|
||||||
|
this.$emit('error', error.message || this.tm('folder.messages.renameError'));
|
||||||
|
} finally {
|
||||||
|
this.renameDialog.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
confirmDeleteFolder() {
|
||||||
|
if (this.contextMenu.folder) {
|
||||||
|
this.deleteDialog.folder = this.contextMenu.folder;
|
||||||
|
this.deleteDialog.show = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async submitDelete() {
|
||||||
|
if (!this.deleteDialog.folder) return;
|
||||||
|
|
||||||
|
this.deleteDialog.loading = true;
|
||||||
|
try {
|
||||||
|
await this.deleteFolder(this.deleteDialog.folder.folder_id);
|
||||||
|
this.$emit('success', this.tm('folder.messages.deleteSuccess'));
|
||||||
|
this.deleteDialog.show = false;
|
||||||
|
} catch (error: any) {
|
||||||
|
this.$emit('error', error.message || this.tm('folder.messages.deleteError'));
|
||||||
|
} finally {
|
||||||
|
this.deleteDialog.loading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.folder-tree {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-item {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-item.drag-over {
|
||||||
|
background-color: rgba(var(--v-theme-primary), 0.15);
|
||||||
|
border: 2px dashed rgb(var(--v-theme-primary));
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<BaseFolderTreeNode :folder="folder" :depth="depth" :current-folder-id="currentFolderId"
|
||||||
|
:search-query="searchQuery" :expanded-folder-ids="expandedFolderIds" :accept-drop-types="['persona']"
|
||||||
|
@folder-click="$emit('folder-click', $event)"
|
||||||
|
@folder-context-menu="handleContextMenu"
|
||||||
|
@item-dropped="handleItemDropped"
|
||||||
|
@toggle-expansion="toggleFolderExpansion"
|
||||||
|
@set-expansion="handleSetExpansion" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue';
|
||||||
|
import { usePersonaStore } from '@/stores/personaStore';
|
||||||
|
import { mapState, mapActions } from 'pinia';
|
||||||
|
import BaseFolderTreeNode from '@/components/folder/BaseFolderTreeNode.vue';
|
||||||
|
import type { FolderTreeNode as FolderTreeNodeType } from '@/components/folder/types';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'FolderTreeNode',
|
||||||
|
components: {
|
||||||
|
BaseFolderTreeNode
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
folder: {
|
||||||
|
type: Object as PropType<FolderTreeNodeType>,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
depth: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
currentFolderId: {
|
||||||
|
type: String as PropType<string | null>,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
searchQuery: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['folder-click', 'folder-context-menu', 'persona-dropped'],
|
||||||
|
computed: {
|
||||||
|
...mapState(usePersonaStore, ['expandedFolderIds'])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(usePersonaStore, ['toggleFolderExpansion', 'setFolderExpansion']),
|
||||||
|
|
||||||
|
handleContextMenu(event: { event: MouseEvent; folder: FolderTreeNodeType }) {
|
||||||
|
this.$emit('folder-context-menu', event);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleItemDropped(data: { item_id: string; item_type: string; target_folder_id: string | null; source_data: any }) {
|
||||||
|
if (data.item_type === 'persona') {
|
||||||
|
this.$emit('persona-dropped', {
|
||||||
|
persona_id: data.item_id,
|
||||||
|
target_folder_id: data.target_folder_id
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSetExpansion(data: { folderId: string; expanded: boolean }) {
|
||||||
|
this.setFolderExpansion(data.folderId, data.expanded);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<BaseMoveTargetNode :folder="folder" :depth="depth" :selected-folder-id="selectedFolderId"
|
||||||
|
:disabled-folder-ids="disabledFolderIds" @select="$emit('select', $event)" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue';
|
||||||
|
import BaseMoveTargetNode from '@/components/folder/BaseMoveTargetNode.vue';
|
||||||
|
import type { FolderTreeNode } from '@/components/folder/types';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'MoveTargetNode',
|
||||||
|
components: {
|
||||||
|
BaseMoveTargetNode
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
folder: {
|
||||||
|
type: Object as PropType<FolderTreeNode>,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
depth: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
selectedFolderId: {
|
||||||
|
type: String as PropType<string | null>,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
disabledFolderIds: {
|
||||||
|
type: Array as PropType<string[]>,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['select']
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,201 @@
|
|||||||
|
<template>
|
||||||
|
<v-dialog v-model="showDialog" max-width="500px" persistent>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>
|
||||||
|
<v-icon class="mr-2">mdi-folder-move</v-icon>
|
||||||
|
{{ tm('moveDialog.title') }}
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<p class="text-body-2 text-medium-emphasis mb-4">
|
||||||
|
{{ tm('moveDialog.description', { name: itemName }) }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- 文件夹选择树 -->
|
||||||
|
<div class="folder-select-tree">
|
||||||
|
<v-list density="compact" nav class="tree-list">
|
||||||
|
<!-- 根目录选项 -->
|
||||||
|
<v-list-item :active="selectedFolderId === null" @click="selectFolder(null)" rounded="lg"
|
||||||
|
class="mb-1">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon>mdi-home</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ tm('folder.rootFolder') }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
<!-- 文件夹树 -->
|
||||||
|
<template v-if="!treeLoading">
|
||||||
|
<MoveTargetNode v-for="folder in availableFolders" :key="folder.folder_id" :folder="folder"
|
||||||
|
:depth="0" :selected-folder-id="selectedFolderId" :disabled-folder-ids="disabledFolderIds"
|
||||||
|
@select="selectFolder" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<div v-if="treeLoading" class="text-center pa-4">
|
||||||
|
<v-progress-circular indeterminate size="24" />
|
||||||
|
</div>
|
||||||
|
</v-list>
|
||||||
|
</div>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn variant="text" @click="closeDialog">
|
||||||
|
{{ tm('buttons.cancel') }}
|
||||||
|
</v-btn>
|
||||||
|
<v-btn color="primary" variant="flat" @click="submitMove" :loading="loading">
|
||||||
|
{{ tm('buttons.move') }}
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue';
|
||||||
|
import { useModuleI18n } from '@/i18n/composables';
|
||||||
|
import { usePersonaStore } from '@/stores/personaStore';
|
||||||
|
import { mapState, mapActions } from 'pinia';
|
||||||
|
import MoveTargetNode from './MoveTargetNode.vue';
|
||||||
|
import { collectFolderAndChildrenIds } from '@/components/folder/useFolderManager';
|
||||||
|
import type { FolderTreeNode } from '@/components/folder/types';
|
||||||
|
|
||||||
|
interface PersonaItem {
|
||||||
|
persona_id: string;
|
||||||
|
folder_id?: string | null;
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FolderItem {
|
||||||
|
folder_id: string;
|
||||||
|
name: string;
|
||||||
|
parent_id?: string | null;
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'MoveToFolderDialog',
|
||||||
|
components: {
|
||||||
|
MoveTargetNode
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
itemType: {
|
||||||
|
type: String as PropType<'persona' | 'folder'>,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
type: Object as PropType<PersonaItem | FolderItem | null>,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'moved', 'error'],
|
||||||
|
setup() {
|
||||||
|
const { tm } = useModuleI18n('features/persona');
|
||||||
|
return { tm };
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedFolderId: null as string | null,
|
||||||
|
loading: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(usePersonaStore, ['folderTree', 'treeLoading']),
|
||||||
|
|
||||||
|
showDialog: {
|
||||||
|
get(): boolean {
|
||||||
|
return this.modelValue;
|
||||||
|
},
|
||||||
|
set(value: boolean) {
|
||||||
|
this.$emit('update:modelValue', value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
itemName(): string {
|
||||||
|
if (!this.item) return '';
|
||||||
|
return this.itemType === 'persona'
|
||||||
|
? (this.item as PersonaItem).persona_id
|
||||||
|
: (this.item as FolderItem).name;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 禁用的文件夹 ID（不能移动到自己或子文件夹）
|
||||||
|
disabledFolderIds(): string[] {
|
||||||
|
if (this.itemType !== 'folder' || !this.item) return [];
|
||||||
|
return collectFolderAndChildrenIds(
|
||||||
|
this.folderTree as FolderTreeNode[],
|
||||||
|
(this.item as FolderItem).folder_id
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 过滤掉禁用的文件夹
|
||||||
|
availableFolders(): FolderTreeNode[] {
|
||||||
|
return this.folderTree as FolderTreeNode[];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
modelValue(newValue: boolean) {
|
||||||
|
if (newValue) {
|
||||||
|
// 初始化选中为当前所在文件夹
|
||||||
|
if (this.item) {
|
||||||
|
this.selectedFolderId = this.itemType === 'persona'
|
||||||
|
? (this.item as PersonaItem).folder_id ?? null
|
||||||
|
: (this.item as FolderItem).parent_id ?? null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(usePersonaStore, ['movePersonaToFolder', 'moveFolderToFolder']),
|
||||||
|
|
||||||
|
selectFolder(folderId: string | null) {
|
||||||
|
// 检查是否禁用
|
||||||
|
if (folderId && this.disabledFolderIds.includes(folderId)) return;
|
||||||
|
this.selectedFolderId = folderId;
|
||||||
|
},
|
||||||
|
|
||||||
|
closeDialog() {
|
||||||
|
this.showDialog = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
async submitMove() {
|
||||||
|
if (!this.item) return;
|
||||||
|
|
||||||
|
this.loading = true;
|
||||||
|
try {
|
||||||
|
if (this.itemType === 'persona') {
|
||||||
|
await this.movePersonaToFolder(
|
||||||
|
(this.item as PersonaItem).persona_id,
|
||||||
|
this.selectedFolderId
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
await this.moveFolderToFolder(
|
||||||
|
(this.item as FolderItem).folder_id,
|
||||||
|
this.selectedFolderId
|
||||||
|
);
|
||||||
|
}
|
||||||
|
this.$emit('moved', this.tm('moveDialog.success'));
|
||||||
|
this.closeDialog();
|
||||||
|
} catch (error: any) {
|
||||||
|
this.$emit('error', error.message || this.tm('moveDialog.error'));
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.folder-select-tree {
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-list {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,178 @@
|
|||||||
|
<template>
|
||||||
|
<v-card class="persona-card" :class="{ 'dragging': isDragging }" rounded="lg" @click="$emit('view')" elevation="1" hover
|
||||||
|
draggable="true" @dragstart="handleDragStart" @dragend="handleDragEnd">
|
||||||
|
<v-card-title class="d-flex justify-space-between align-center">
|
||||||
|
<div class="text-truncate ml-2">{{ persona.persona_id }}</div>
|
||||||
|
<v-menu offset-y>
|
||||||
|
<template v-slot:activator="{ props }">
|
||||||
|
<v-btn icon="mdi-dots-vertical" variant="text" size="small" v-bind="props" @click.stop />
|
||||||
|
</template>
|
||||||
|
<v-list density="compact">
|
||||||
|
<v-list-item @click.stop="$emit('edit')">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small">mdi-pencil</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ tm('buttons.edit') }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item @click.stop="$emit('move')">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small">mdi-folder-move</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ tm('persona.contextMenu.moveTo') }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-divider class="my-1" />
|
||||||
|
<v-list-item @click.stop="$emit('delete')" class="text-error">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<v-icon size="small" color="error">mdi-delete</v-icon>
|
||||||
|
</template>
|
||||||
|
<v-list-item-title>{{ tm('buttons.delete') }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
|
</v-card-title>
|
||||||
|
|
||||||
|
<v-card-text>
|
||||||
|
<div class="system-prompt-preview">
|
||||||
|
{{ truncateText(persona.system_prompt, 100) }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-3 d-flex flex-wrap ga-1">
|
||||||
|
<v-chip v-if="persona.begin_dialogs && persona.begin_dialogs.length > 0" size="small" color="secondary"
|
||||||
|
variant="tonal" prepend-icon="mdi-chat">
|
||||||
|
{{ tm('labels.presetDialogs', { count: persona.begin_dialogs.length / 2 }) }}
|
||||||
|
</v-chip>
|
||||||
|
<v-chip v-if="persona.tools === null" size="small" color="success" variant="tonal"
|
||||||
|
prepend-icon="mdi-tools">
|
||||||
|
{{ tm('form.allToolsAvailable') }}
|
||||||
|
</v-chip>
|
||||||
|
<v-chip v-else-if="persona.tools && persona.tools.length > 0" size="small" color="primary" variant="tonal"
|
||||||
|
prepend-icon="mdi-tools">
|
||||||
|
{{ persona.tools.length }} {{ tm('persona.toolsCount') }}
|
||||||
|
</v-chip>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-3 text-caption text-medium-emphasis">
|
||||||
|
{{ tm('labels.createdAt') }}: {{ formatDate(persona.created_at) }}
|
||||||
|
</div>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
|
||||||
|
<!-- Custom Drag Preview -->
|
||||||
|
<div ref="dragPreview" class="drag-preview">
|
||||||
|
<v-icon size="small" class="mr-2">mdi-account</v-icon>
|
||||||
|
<span class="text-subtitle-2">{{ persona.persona_id }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue';
|
||||||
|
import { useModuleI18n } from '@/i18n/composables';
|
||||||
|
|
||||||
|
interface Persona {
|
||||||
|
persona_id: string;
|
||||||
|
system_prompt: string;
|
||||||
|
begin_dialogs?: string[] | null;
|
||||||
|
tools?: string[] | null;
|
||||||
|
created_at?: string;
|
||||||
|
updated_at?: string;
|
||||||
|
folder_id?: string | null;
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'PersonaCard',
|
||||||
|
props: {
|
||||||
|
persona: {
|
||||||
|
type: Object as PropType<Persona>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['view', 'edit', 'move', 'delete'],
|
||||||
|
setup() {
|
||||||
|
const { tm } = useModuleI18n('features/persona');
|
||||||
|
return { tm };
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isDragging: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleDragStart(event: DragEvent) {
|
||||||
|
this.isDragging = true;
|
||||||
|
if (event.dataTransfer) {
|
||||||
|
event.dataTransfer.effectAllowed = 'move';
|
||||||
|
event.dataTransfer.setData('application/json', JSON.stringify({
|
||||||
|
type: 'persona',
|
||||||
|
persona_id: this.persona.persona_id,
|
||||||
|
persona: this.persona
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Set custom drag image
|
||||||
|
const dragPreview = this.$refs.dragPreview as HTMLElement;
|
||||||
|
if (dragPreview) {
|
||||||
|
event.dataTransfer.setDragImage(dragPreview, 15, 15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleDragEnd() {
|
||||||
|
this.isDragging = false;
|
||||||
|
},
|
||||||
|
truncateText(text: string | undefined | null, maxLength: number): string {
|
||||||
|
if (!text) return '';
|
||||||
|
return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
|
||||||
|
},
|
||||||
|
formatDate(dateString: string | undefined | null): string {
|
||||||
|
if (!dateString) return '';
|
||||||
|
return new Date(dateString).toLocaleString();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.persona-card {
|
||||||
|
height: 100%;
|
||||||
|
cursor: grab;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.persona-card:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.persona-card.dragging {
|
||||||
|
opacity: 0.5;
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.persona-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-prompt-preview {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: rgba(var(--v-theme-on-surface), 0.7);
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-preview {
|
||||||
|
position: fixed;
|
||||||
|
top: -1000px;
|
||||||
|
left: -1000px;
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
z-index: 9999;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,501 @@
|
|||||||
|
<template>
|
||||||
|
<div class="persona-manager">
|
||||||
|
<!-- 移动端顶部导航 -->
|
||||||
|
<div class="mobile-nav d-md-none mb-4">
|
||||||
|
<FolderBreadcrumb />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="manager-layout">
|
||||||
|
<!-- 左侧边栏 - 仅桌面端显示 -->
|
||||||
|
<div class="sidebar d-none d-md-block">
|
||||||
|
<div class="sidebar-header d-flex justify-space-between align-center mb-3">
|
||||||
|
<h3 class="text-h6">{{ tm('folder.sidebarTitle') }}</h3>
|
||||||
|
<v-btn icon="mdi-folder-plus" variant="text" size="small" @click="showCreateFolderDialog = true"
|
||||||
|
:title="tm('folder.createButton')" />
|
||||||
|
</div>
|
||||||
|
<FolderTree @move-folder="openMoveFolderDialog" @success="showSuccess" @error="showError"
|
||||||
|
@persona-dropped="handlePersonaDropped" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主内容区 -->
|
||||||
|
<div class="main-content">
|
||||||
|
<!-- 顶部工具栏 -->
|
||||||
|
<div class="toolbar d-flex flex-wrap justify-space-between align-center mb-4 ga-2">
|
||||||
|
<!-- 面包屑 - 仅桌面端显示 -->
|
||||||
|
<div class="d-none d-md-block">
|
||||||
|
<FolderBreadcrumb />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 操作按钮组 -->
|
||||||
|
<div class="d-flex ga-2">
|
||||||
|
<v-btn color="primary" variant="tonal" prepend-icon="mdi-plus" @click="openCreatePersonaDialog"
|
||||||
|
rounded="lg">
|
||||||
|
{{ tm('buttons.create') }}
|
||||||
|
</v-btn>
|
||||||
|
<v-btn variant="outlined" prepend-icon="mdi-folder-plus" @click="showCreateFolderDialog = true"
|
||||||
|
rounded="lg">
|
||||||
|
{{ tm('folder.createButton') }}
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<div v-if="loading" class="loading-container">
|
||||||
|
<v-row>
|
||||||
|
<v-col v-for="n in 6" :key="n" cols="12" sm="6" lg="4" xl="3">
|
||||||
|
<v-skeleton-loader type="card" rounded="lg" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 内容区域 -->
|
||||||
|
<div v-else>
|
||||||
|
<!-- 子文件夹区域 -->
|
||||||
|
<div v-if="currentFolders.length > 0" class="folders-section mb-6">
|
||||||
|
<h3 class="text-subtitle-1 font-weight-medium mb-3">
|
||||||
|
<v-icon size="small" class="mr-1">mdi-folder</v-icon>
|
||||||
|
{{ tm('folder.foldersTitle') }} ({{ currentFolders.length }})
|
||||||
|
</h3>
|
||||||
|
<v-row>
|
||||||
|
<v-col v-for="folder in currentFolders" :key="folder.folder_id" cols="12" sm="6" lg="4"
|
||||||
|
xl="3">
|
||||||
|
<FolderCard :folder="folder" @click="navigateToFolder(folder.folder_id)"
|
||||||
|
@open="navigateToFolder(folder.folder_id)" @rename="openRenameFolderDialog(folder)"
|
||||||
|
@move="openMoveFolderDialog(folder)" @delete="confirmDeleteFolder(folder)"
|
||||||
|
@persona-dropped="handlePersonaDropped" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Persona 区域 -->
|
||||||
|
<div v-if="currentPersonas.length > 0" class="personas-section">
|
||||||
|
<h3 class="text-subtitle-1 font-weight-medium mb-3">
|
||||||
|
<v-icon size="small" class="mr-1">mdi-account-heart</v-icon>
|
||||||
|
{{ tm('persona.personasTitle') }} ({{ currentPersonas.length }})
|
||||||
|
</h3>
|
||||||
|
<v-row>
|
||||||
|
<v-col v-for="persona in currentPersonas" :key="persona.persona_id" cols="12" sm="6" lg="4"
|
||||||
|
xl="3">
|
||||||
|
<PersonaCard :persona="persona" @view="viewPersona(persona)"
|
||||||
|
@edit="editPersona(persona)" @move="openMovePersonaDialog(persona)"
|
||||||
|
@delete="confirmDeletePersona(persona)" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<div v-if="currentFolders.length === 0 && currentPersonas.length === 0" class="empty-state">
|
||||||
|
<v-card class="text-center pa-8" elevation="0">
|
||||||
|
<v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-folder-open-outline</v-icon>
|
||||||
|
<h3 class="text-h5 mb-2">{{ tm('empty.folderEmpty') }}</h3>
|
||||||
|
<p class="text-body-1 text-medium-emphasis mb-4">{{ tm('empty.folderEmptyDescription') }}</p>
|
||||||
|
<div class="d-flex justify-center ga-2">
|
||||||
|
<v-btn color="primary" variant="tonal" prepend-icon="mdi-plus"
|
||||||
|
@click="openCreatePersonaDialog">
|
||||||
|
{{ tm('buttons.create') }}
|
||||||
|
</v-btn>
|
||||||
|
<v-btn variant="outlined" prepend-icon="mdi-folder-plus"
|
||||||
|
@click="showCreateFolderDialog = true">
|
||||||
|
{{ tm('folder.createButton') }}
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
</v-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 创建/编辑 Persona 对话框 -->
|
||||||
|
<PersonaForm v-model="showPersonaDialog" :editing-persona="editingPersona ?? undefined"
|
||||||
|
:current-folder-id="currentFolderId ?? undefined" @saved="handlePersonaSaved" @error="showError" />
|
||||||
|
|
||||||
|
<!-- 查看 Persona 详情对话框 -->
|
||||||
|
<v-dialog v-model="showViewDialog" max-width="700px">
|
||||||
|
<v-card v-if="viewingPersona">
|
||||||
|
<v-card-title class="d-flex justify-space-between align-center">
|
||||||
|
<span class="text-h5">{{ viewingPersona.persona_id }}</span>
|
||||||
|
<v-btn icon="mdi-close" variant="text" @click="showViewDialog = false" />
|
||||||
|
</v-card-title>
|
||||||
|
|
||||||
|
<v-card-text>
|
||||||
|
<div class="mb-4">
|
||||||
|
<h4 class="text-h6 mb-2">{{ tm('form.systemPrompt') }}</h4>
|
||||||
|
<pre class="system-prompt-content">{{ viewingPersona.system_prompt }}</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="viewingPersona.begin_dialogs && viewingPersona.begin_dialogs.length > 0" class="mb-4">
|
||||||
|
<h4 class="text-h6 mb-2">{{ tm('form.presetDialogs') }}</h4>
|
||||||
|
<div v-for="(dialog, index) in viewingPersona.begin_dialogs" :key="index" class="mb-2">
|
||||||
|
<v-chip :color="index % 2 === 0 ? 'primary' : 'secondary'" variant="tonal" size="small"
|
||||||
|
class="mb-1">
|
||||||
|
{{ index % 2 === 0 ? tm('form.userMessage') : tm('form.assistantMessage') }}
|
||||||
|
</v-chip>
|
||||||
|
<div class="dialog-content ml-2">{{ dialog }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-4">
|
||||||
|
<h4 class="text-h6 mb-2">{{ tm('form.tools') }}</h4>
|
||||||
|
<div v-if="viewingPersona.tools === null" class="text-body-2 text-medium-emphasis">
|
||||||
|
<v-chip size="small" color="success" variant="tonal" prepend-icon="mdi-check-all">
|
||||||
|
{{ tm('form.allToolsAvailable') }}
|
||||||
|
</v-chip>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="viewingPersona.tools && viewingPersona.tools.length > 0"
|
||||||
|
class="d-flex flex-wrap ga-1">
|
||||||
|
<v-chip v-for="toolName in viewingPersona.tools" :key="toolName" size="small"
|
||||||
|
color="primary" variant="tonal">
|
||||||
|
{{ toolName }}
|
||||||
|
</v-chip>
|
||||||
|
</div>
|
||||||
|
<div v-else class="text-body-2 text-medium-emphasis">
|
||||||
|
{{ tm('form.noToolsSelected') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-caption text-medium-emphasis">
|
||||||
|
<div>{{ tm('labels.createdAt') }}: {{ formatDate(viewingPersona.created_at) }}</div>
|
||||||
|
<div v-if="viewingPersona.updated_at">{{ tm('labels.updatedAt') }}:
|
||||||
|
{{ formatDate(viewingPersona.updated_at) }}</div>
|
||||||
|
</div>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
|
||||||
|
<!-- 创建文件夹对话框 -->
|
||||||
|
<CreateFolderDialog v-model="showCreateFolderDialog" :parent-folder-id="currentFolderId"
|
||||||
|
@created="showSuccess" @error="showError" />
|
||||||
|
|
||||||
|
<!-- 重命名文件夹对话框 -->
|
||||||
|
<v-dialog v-model="showRenameFolderDialog" max-width="400px" persistent>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>{{ tm('folder.renameDialog.title') }}</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field v-model="renameFolderData.name" :label="tm('folder.form.name')"
|
||||||
|
:rules="[v => !!v || tm('folder.validation.nameRequired')]" variant="outlined"
|
||||||
|
density="comfortable" autofocus @keyup.enter="submitRenameFolder" />
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn variant="text" @click="showRenameFolderDialog = false">
|
||||||
|
{{ tm('buttons.cancel') }}
|
||||||
|
</v-btn>
|
||||||
|
<v-btn color="primary" variant="flat" @click="submitRenameFolder" :loading="renameLoading"
|
||||||
|
:disabled="!renameFolderData.name">
|
||||||
|
{{ tm('buttons.save') }}
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
|
||||||
|
<!-- 移动对话框 -->
|
||||||
|
<MoveToFolderDialog v-model="showMoveDialog" :item-type="moveDialogType" :item="moveDialogItem"
|
||||||
|
@moved="showSuccess" @error="showError" />
|
||||||
|
|
||||||
|
<!-- 删除文件夹确认对话框 -->
|
||||||
|
<v-dialog v-model="showDeleteFolderDialog" max-width="450px">
|
||||||
|
<v-card>
|
||||||
|
<v-card-title class="text-error">
|
||||||
|
<v-icon class="mr-2" color="error">mdi-alert</v-icon>
|
||||||
|
{{ tm('folder.deleteDialog.title') }}
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<p>{{ tm('folder.deleteDialog.message', { name: deleteFolderData?.name ?? '' }) }}</p>
|
||||||
|
<p class="text-warning mt-2">
|
||||||
|
<v-icon size="small" class="mr-1">mdi-information</v-icon>
|
||||||
|
{{ tm('folder.deleteDialog.warning') }}
|
||||||
|
</p>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn variant="text" @click="showDeleteFolderDialog = false">
|
||||||
|
{{ tm('buttons.cancel') }}
|
||||||
|
</v-btn>
|
||||||
|
<v-btn color="error" variant="flat" @click="submitDeleteFolder" :loading="deleteLoading">
|
||||||
|
{{ tm('buttons.delete') }}
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
|
||||||
|
<!-- 消息提示 -->
|
||||||
|
<v-snackbar :timeout="3000" elevation="24" :color="messageType" v-model="showMessage" location="top">
|
||||||
|
{{ message }}
|
||||||
|
</v-snackbar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { useI18n, useModuleI18n } from '@/i18n/composables';
|
||||||
|
import { usePersonaStore } from '@/stores/personaStore';
|
||||||
|
import { mapState, mapActions } from 'pinia';
|
||||||
|
|
||||||
|
import FolderTree from './FolderTree.vue';
|
||||||
|
import FolderBreadcrumb from './FolderBreadcrumb.vue';
|
||||||
|
import FolderCard from './FolderCard.vue';
|
||||||
|
import PersonaCard from './PersonaCard.vue';
|
||||||
|
import PersonaForm from '@/components/shared/PersonaForm.vue';
|
||||||
|
import CreateFolderDialog from './CreateFolderDialog.vue';
|
||||||
|
import MoveToFolderDialog from './MoveToFolderDialog.vue';
|
||||||
|
|
||||||
|
import type { Folder, FolderTreeNode } from '@/components/folder/types';
|
||||||
|
|
||||||
|
interface Persona {
|
||||||
|
persona_id: string;
|
||||||
|
system_prompt: string;
|
||||||
|
begin_dialogs?: string[] | null;
|
||||||
|
tools?: string[] | null;
|
||||||
|
created_at?: string;
|
||||||
|
updated_at?: string;
|
||||||
|
folder_id?: string | null;
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RenameFolderData {
|
||||||
|
folder: Folder | null;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'PersonaManager',
|
||||||
|
components: {
|
||||||
|
FolderTree,
|
||||||
|
FolderBreadcrumb,
|
||||||
|
FolderCard,
|
||||||
|
PersonaCard,
|
||||||
|
PersonaForm,
|
||||||
|
CreateFolderDialog,
|
||||||
|
MoveToFolderDialog
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { tm } = useModuleI18n('features/persona');
|
||||||
|
return { t, tm };
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// Persona 相关
|
||||||
|
showPersonaDialog: false,
|
||||||
|
showViewDialog: false,
|
||||||
|
editingPersona: null as Persona | null,
|
||||||
|
viewingPersona: null as Persona | null,
|
||||||
|
|
||||||
|
// 文件夹相关
|
||||||
|
showCreateFolderDialog: false,
|
||||||
|
showRenameFolderDialog: false,
|
||||||
|
showDeleteFolderDialog: false,
|
||||||
|
renameFolderData: { folder: null, name: '' } as RenameFolderData,
|
||||||
|
deleteFolderData: null as Folder | null,
|
||||||
|
renameLoading: false,
|
||||||
|
deleteLoading: false,
|
||||||
|
|
||||||
|
// 移动对话框
|
||||||
|
showMoveDialog: false,
|
||||||
|
moveDialogType: 'persona' as 'persona' | 'folder',
|
||||||
|
moveDialogItem: null as Persona | Folder | null,
|
||||||
|
|
||||||
|
// 消息提示
|
||||||
|
showMessage: false,
|
||||||
|
message: '',
|
||||||
|
messageType: 'success' as 'success' | 'error'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(usePersonaStore, ['folderTree', 'currentFolderId', 'currentFolders', 'currentPersonas', 'loading'])
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
await this.initialize();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(usePersonaStore, ['loadFolderTree', 'navigateToFolder', 'updateFolder', 'deleteFolder', 'deletePersona', 'refreshCurrentFolder', 'movePersonaToFolder']),
|
||||||
|
|
||||||
|
async initialize() {
|
||||||
|
await Promise.all([
|
||||||
|
this.loadFolderTree(),
|
||||||
|
this.navigateToFolder(null)
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Persona 操作
|
||||||
|
openCreatePersonaDialog() {
|
||||||
|
this.editingPersona = null;
|
||||||
|
this.showPersonaDialog = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
editPersona(persona: Persona) {
|
||||||
|
this.editingPersona = persona;
|
||||||
|
this.showPersonaDialog = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
viewPersona(persona: Persona) {
|
||||||
|
this.viewingPersona = persona;
|
||||||
|
this.showViewDialog = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
handlePersonaSaved(message: string) {
|
||||||
|
this.showSuccess(message);
|
||||||
|
this.refreshCurrentFolder();
|
||||||
|
},
|
||||||
|
|
||||||
|
async confirmDeletePersona(persona: Persona) {
|
||||||
|
if (!confirm(this.tm('messages.deleteConfirm', { id: persona.persona_id }))) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.deletePersona(persona.persona_id);
|
||||||
|
this.showSuccess(this.tm('messages.deleteSuccess'));
|
||||||
|
} catch (error: any) {
|
||||||
|
this.showError(error.message || this.tm('messages.deleteError'));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
openMovePersonaDialog(persona: Persona) {
|
||||||
|
this.moveDialogType = 'persona';
|
||||||
|
this.moveDialogItem = persona;
|
||||||
|
this.showMoveDialog = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
async handlePersonaDropped({ persona_id, target_folder_id }: { persona_id: string; target_folder_id: string | null }) {
|
||||||
|
try {
|
||||||
|
await this.movePersonaToFolder(persona_id, target_folder_id);
|
||||||
|
this.showSuccess(this.tm('persona.messages.moveSuccess'));
|
||||||
|
// Navigate to the target folder
|
||||||
|
await this.navigateToFolder(target_folder_id);
|
||||||
|
} catch (error: any) {
|
||||||
|
this.showError(error.message || this.tm('persona.messages.moveError'));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 文件夹操作
|
||||||
|
openRenameFolderDialog(folder: Folder) {
|
||||||
|
this.renameFolderData = { folder, name: folder.name };
|
||||||
|
this.showRenameFolderDialog = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
async submitRenameFolder() {
|
||||||
|
if (!this.renameFolderData.name || !this.renameFolderData.folder) return;
|
||||||
|
|
||||||
|
this.renameLoading = true;
|
||||||
|
try {
|
||||||
|
await this.updateFolder({
|
||||||
|
folder_id: this.renameFolderData.folder.folder_id,
|
||||||
|
name: this.renameFolderData.name
|
||||||
|
});
|
||||||
|
this.showSuccess(this.tm('folder.messages.renameSuccess'));
|
||||||
|
this.showRenameFolderDialog = false;
|
||||||
|
} catch (error: any) {
|
||||||
|
this.showError(error.message || this.tm('folder.messages.renameError'));
|
||||||
|
} finally {
|
||||||
|
this.renameLoading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
openMoveFolderDialog(folder: Folder) {
|
||||||
|
this.moveDialogType = 'folder';
|
||||||
|
this.moveDialogItem = folder;
|
||||||
|
this.showMoveDialog = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
confirmDeleteFolder(folder: Folder) {
|
||||||
|
this.deleteFolderData = folder;
|
||||||
|
this.showDeleteFolderDialog = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
async submitDeleteFolder() {
|
||||||
|
if (!this.deleteFolderData) return;
|
||||||
|
|
||||||
|
this.deleteLoading = true;
|
||||||
|
try {
|
||||||
|
await this.deleteFolder(this.deleteFolderData.folder_id);
|
||||||
|
this.showSuccess(this.tm('folder.messages.deleteSuccess'));
|
||||||
|
this.showDeleteFolderDialog = false;
|
||||||
|
} catch (error: any) {
|
||||||
|
this.showError(error.message || this.tm('folder.messages.deleteError'));
|
||||||
|
} finally {
|
||||||
|
this.deleteLoading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 辅助方法
|
||||||
|
formatDate(dateString: string | undefined | null): string {
|
||||||
|
if (!dateString) return '';
|
||||||
|
return new Date(dateString).toLocaleString();
|
||||||
|
},
|
||||||
|
|
||||||
|
showSuccess(message: string) {
|
||||||
|
this.message = message;
|
||||||
|
this.messageType = 'success';
|
||||||
|
this.showMessage = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
showError(message: string) {
|
||||||
|
this.message = message;
|
||||||
|
this.messageType = 'error';
|
||||||
|
this.showMessage = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.persona-manager {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.manager-layout {
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
width: 280px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-right: 16px;
|
||||||
|
height: fit-content;
|
||||||
|
max-height: calc(100vh - 200px);
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-prompt-content {
|
||||||
|
max-height: 400px;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
background: rgba(var(--v-theme-surface-variant), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-content {
|
||||||
|
background-color: rgba(var(--v-theme-surface-variant), 0.3);
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
.manager-layout {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
/**
|
||||||
|
* Persona 管理相关组件
|
||||||
|
*
|
||||||
|
* 这些组件使用了 dashboard/src/components/folder 下的通用文件夹组件
|
||||||
|
* 通过包装器模式将 personaStore 的状态和方法连接到通用组件
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 主组件
|
||||||
|
export { default as PersonaManager } from './PersonaManager.vue';
|
||||||
|
|
||||||
|
// 文件夹相关组件
|
||||||
|
export { default as FolderTree } from './FolderTree.vue';
|
||||||
|
export { default as FolderTreeNode } from './FolderTreeNode.vue';
|
||||||
|
export { default as FolderBreadcrumb } from './FolderBreadcrumb.vue';
|
||||||
|
export { default as FolderCard } from './FolderCard.vue';
|
||||||
|
|
||||||
|
// 对话框组件
|
||||||
|
export { default as CreateFolderDialog } from './CreateFolderDialog.vue';
|
||||||
|
export { default as MoveToFolderDialog } from './MoveToFolderDialog.vue';
|
||||||
|
export { default as MoveTargetNode } from './MoveTargetNode.vue';
|
||||||
|
|
||||||
|
// Persona 相关组件
|
||||||
|
export { default as PersonaCard } from './PersonaCard.vue';
|
||||||
Reference in New Issue
Block a user