fz-mirrors/AstrBot
1
0
Fork 0
mirror of https://github.com/AstrBotDevs/AstrBot synced 2026-07-18 10:00:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement persona folder for advanced persona management (#4443)

Browse Source 
* feat(db): add persona folder management for hierarchical organization

Implement hierarchical folder structure for organizing personas:
- Add PersonaFolder model with recursive parent-child relationships
- Add folder_id and sort_order fields to Persona model
- Implement CRUD operations for persona folders in database layer
- Add migration support for existing databases
- Extend PersonaManager with folder management methods
- Add dashboard API routes for folder operations

* feat(persona): add batch sort order update endpoint for personas and folders

Add new API endpoint POST /persona/reorder to batch update sort_order
for both personas and folders. This enables drag-and-drop reordering
in the dashboard UI.

Changes:
- Add abstract batch_update_sort_order method to BaseDatabase
- Implement batch_update_sort_order in SQLiteDatabase
- Add batch_update_sort_order to PersonaManager with cache refresh
- Add reorder_items route handler with input validation

* feat(persona): add folder_id and sort_order params to persona creation

Extend persona creation flow to support folder placement and ordering:
- Add folder_id and sort_order parameters to insert_persona in db layer
- Update PersonaManager.create_persona to accept and pass folder params
- Add get_folder_detail API endpoint for retrieving folder information
- Include folder_id and sort_order in persona creation response
- Add session flush/refresh to return complete persona object

* feat(dashboard): implement persona folder management UI

- Add folder management system with tree view and breadcrumbs
- Implement create, rename, delete, and move operations for folders
- Add drag-and-drop support for organizing personas and folders
- Create new PersonaManager component and Pinia store for state management
- Refactor PersonaPage to support hierarchical structure
- Update locale files with folder-related translations
- Handle empty parent_id correctly in backend route

* feat(dashboard): centralize folder expansion state in persona store

Move folder expansion logic from local component state to global Pinia
store to persist expansion state.
- Add `expandedFolderIds` state and toggle actions to `personaStore`
- Update `FolderTreeNode` to use store state instead of local data
- Automatically navigate to target folder after moving a persona

* 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

* refactor(dashboard): remove legacy persona folder management components

Remove deprecated persona folder management Vue components that have been
superseded by the new reusable folder management component library.

Deleted components:
- CreateFolderDialog.vue
- FolderBreadcrumb.vue
- FolderCard.vue
- FolderTree.vue
- FolderTreeNode.vue
- MoveTargetNode.vue
- MoveToFolderDialog.vue
- PersonaCard.vue
- PersonaManager.vue

These components are replaced by the centralized folder management
implementation introduced in commit 3fbb3db2.

* fix(dashboard): add delayed skeleton loading to prevent UI flicker

Implement a 150ms delay before showing the skeleton loader in
PersonaManager to prevent visual flicker during fast loading operations.

- Add showSkeleton state with timer-based delay mechanism
- Use v-fade-transition for smooth skeleton visibility transitions
- Clean up timer on component unmount to prevent memory leaks
- Only display skeleton when loading exceeds threshold duration

* feat(dashboard): add generic folder item selector component for persona selection

Introduce BaseFolderItemSelector.vue as a reusable component for selecting
items within folder hierarchies. Refactor PersonaSelector to use this new
base component instead of its previous flat list implementation.

Changes:
- Add BaseFolderItemSelector with folder tree navigation and item selection
- Extend folder types with SelectableItem and FolderItemSelectorLabels
- Refactor PersonaSelector to leverage the new base component
- Add i18n translations for rootFolder and emptyFolder labels

* feat(persona): add tree-view display for persona list command

Add hierarchical folder tree output for the persona list command,
showing personas organized by folders with visual tree connectors.

- Add _build_tree_output method for recursive tree structure rendering
- Display folders with 📁 icon and personas with 👤 icon
- Show root-level personas separately from folder contents
- Include total persona count in output

* refactor(persona): simplify tree-view output with shorter indentation lines

Replace complex tree connector logic with simpler depth-based indentation
using "│ " prefix. Remove unnecessary parameters (prefix, is_last) and
computed variables (has_content, total_items, item_idx) in favor of a
cleaner depth-based approach.

* feat(dashboard): add duplicate persona ID validation in create form

Add frontend validation to prevent creating personas with duplicate IDs.
Load existing persona IDs when opening the create form and validate
against them in real-time.

- Add existingPersonaIds array and loadExistingPersonaIds method
- Add validation rule to check for duplicate persona IDs
- Add i18n messages for duplicate ID error (en-US and zh-CN)
- Fix minLength validation to require at least 1 character

* i18n(persona): add createButton translation key for folder dialog

Move create button label to folder-specific translation path
instead of using generic buttons.create key.

* feat(persona): show target folder name in persona creation dialog

Add visual feedback showing which folder a new persona will be created in.

- Add info alert in PersonaForm displaying the target folder name
- Pass currentFolderName prop from PersonaManager and PersonaSelector
- Add recursive findFolderName helper to resolve folder ID to name
- Add i18n translations for createInFolder and rootFolder labels

* style:format code

* fix: remove 'persistent' attribute from dialog components

---------

Co-authored-by: Soulter <905617992@qq.com>
This commit is contained in:
Ruochen Pan
2026-01-21 13:05:33 +08:00
committed by GitHub
parent c09bbfb8ac
commit 8910ab3a47
36 changed files with 5722 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
dashboard/src/components/folder/BaseCreateFolderDialog.vue Normal file
View File

@@ -0,0 +1,132 @@
<template>
<v-dialog v-model="showDialog" max-width="450px">
<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>

84
dashboard/src/components/folder/BaseFolderBreadcrumb.vue Normal file
View File

@@ -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>

143
dashboard/src/components/folder/BaseFolderCard.vue Normal file
View File

@@ -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>

513
dashboard/src/components/folder/BaseFolderItemSelector.vue Normal file
View File

@@ -0,0 +1,513 @@
<template>
<div class="folder-item-selector">
<!-- 触发按钮区域 -->
<div class="d-flex align-center justify-space-between">
<span v-if="!modelValue" style="color: rgb(var(--v-theme-primaryText));">
{{ labels.notSelected || '未选择' }}
</span>
<span v-else>
{{ displayValue }}
</span>
<v-btn size="small" color="primary" variant="tonal" @click="openDialog">
{{ labels.buttonText || '选择...' }}
</v-btn>
</div>
<!-- 选择对话框 -->
<v-dialog v-model="dialog" max-width="1000px" min-width="800px">
<v-card class="selector-dialog-card">
<v-card-title class="dialog-title d-flex align-center py-4 px-5">
<v-icon class="mr-3" color="primary">mdi-account-circle</v-icon>
<span>{{ labels.dialogTitle || '选择项目' }}</span>
</v-card-title>
<v-divider />
<v-card-text class="pa-0" style="height: 600px; max-height: 80vh; overflow: hidden;">
<div class="selector-layout">
<!-- 左侧文件夹树 -->
<div class="folder-sidebar">
<div class="sidebar-header pa-3 pb-2">
<span class="text-caption text-medium-emphasis font-weight-medium">
<v-icon size="small" class="mr-1">mdi-folder-multiple</v-icon>
文件夹
</span>
</div>
<v-list density="compact" nav class="tree-list pa-2" bg-color="transparent">
<!-- 根目录 -->
<v-list-item :active="currentFolderId === null" @click="navigateToFolder(null)"
rounded="lg" class="mb-1 root-item">
<template v-slot:prepend>
<v-icon size="20" :color="currentFolderId === null ? 'primary' : ''">mdi-home</v-icon>
</template>
<v-list-item-title class="text-body-2">{{ 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="currentFolderId"
:disabled-folder-ids="[]" @select="navigateToFolder" />
</template>
<div v-if="treeLoading" class="text-center pa-4">
<v-progress-circular indeterminate size="20" color="primary" />
</div>
</v-list>
</div>
<!-- 右侧项目列表 -->
<div class="items-panel">
<!-- 面包屑导航 -->
<div class="breadcrumb-bar px-4 py-3">
<v-breadcrumbs :items="breadcrumbItems" density="compact" class="pa-0">
<template v-slot:item="{ item }">
<v-breadcrumbs-item :disabled="(item as any).disabled"
@click="!(item as any).disabled && navigateToFolder((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.title }}
</v-breadcrumbs-item>
</template>
<template v-slot:divider>
<v-icon size="small" color="grey">mdi-chevron-right</v-icon>
</template>
</v-breadcrumbs>
</div>
<v-divider />
<!-- 项目列表 -->
<div class="items-list">
<v-progress-linear v-if="itemsLoading" indeterminate
color="primary" height="2"></v-progress-linear>
<!-- 子文件夹 -->
<v-list v-if="!itemsLoading" lines="two" class="pa-3 items-content">
<template v-if="currentSubFolders.length > 0">
<div class="section-label text-caption text-medium-emphasis mb-2 px-2">子文件夹</div>
<v-list-item v-for="folder in currentSubFolders" :key="'folder-' + folder.folder_id"
@click="navigateToFolder(folder.folder_id)" rounded="lg" class="mb-1 folder-item">
<template v-slot:prepend>
<v-avatar size="36" color="amber-lighten-4" class="mr-3">
<v-icon color="amber-darken-2" size="20">mdi-folder</v-icon>
</v-avatar>
</template>
<v-list-item-title class="font-weight-medium">{{ folder.name }}</v-list-item-title>
<template v-slot:append>
<v-icon size="20" color="grey">mdi-chevron-right</v-icon>
</template>
</v-list-item>
</template>
<!-- 项目列表 -->
<template v-if="currentItems.length > 0">
<div class="section-label text-caption text-medium-emphasis mb-2 px-2" :class="{ 'mt-4': currentSubFolders.length > 0 }">可选项目</div>
<v-list-item v-for="item in currentItems" :key="'item-' + getItemId(item)"
:value="getItemId(item)" @click="selectItem(item)"
:active="selectedItemId === getItemId(item)" rounded="lg" class="mb-1 persona-item"
:class="{ 'selected-item': selectedItemId === getItemId(item) }">
<template v-slot:prepend>
<v-avatar size="36" :color="selectedItemId === getItemId(item) ? 'primary-lighten-4' : 'grey-lighten-3'" class="mr-3">
<v-icon :color="selectedItemId === getItemId(item) ? 'primary' : 'grey-darken-1'" size="20">mdi-account</v-icon>
</v-avatar>
</template>
<v-list-item-title class="font-weight-medium">{{ getItemName(item) }}</v-list-item-title>
<v-list-item-subtitle v-if="getItemDescription(item)" class="text-truncate">
{{ truncateText(getItemDescription(item), 80) }}
</v-list-item-subtitle>
<template v-slot:append>
<v-icon v-if="selectedItemId === getItemId(item)"
color="primary" size="22">mdi-check-circle</v-icon>
</template>
</v-list-item>
</template>
<!-- 空状态 -->
<div v-if="currentSubFolders.length === 0 && currentItems.length === 0"
class="empty-state text-center py-12">
<v-icon size="64" color="grey-lighten-2">mdi-folder-open-outline</v-icon>
<p class="text-grey mt-4 text-body-2">{{ labels.emptyFolder || labels.noItems || '此文件夹为空' }}</p>
</div>
</v-list>
</div>
</div>
</div>
</v-card-text>
<v-card-actions class="pa-4">
<v-btn v-if="showCreateButton" variant="text" color="primary" prepend-icon="mdi-plus"
@click="$emit('create')">
{{ labels.createButton || '新建' }}
</v-btn>
<v-spacer></v-spacer>
<v-btn variant="text" @click="cancelSelection">{{ labels.cancelButton || '取消' }}</v-btn>
<v-btn color="primary" @click="confirmSelection" :disabled="!selectedItemId">
{{ labels.confirmButton || '确认' }}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script lang="ts">
import { defineComponent, type PropType } from 'vue';
import BaseMoveTargetNode from './BaseMoveTargetNode.vue';
import type { FolderTreeNode, FolderItemSelectorLabels, SelectableItem } from './types';
export default defineComponent({
name: 'BaseFolderItemSelector',
components: {
BaseMoveTargetNode
},
props: {
modelValue: {
type: String,
default: ''
},
// 文件夹树数据
folderTree: {
type: Array as PropType<FolderTreeNode[]>,
default: () => []
},
// 当前项目列表
items: {
type: Array as PropType<SelectableItem[]>,
default: () => []
},
// 加载状态
treeLoading: {
type: Boolean,
default: false
},
itemsLoading: {
type: Boolean,
default: false
},
// 标签配置
labels: {
type: Object as PropType<Partial<FolderItemSelectorLabels>>,
default: () => ({})
},
// 是否显示创建按钮
showCreateButton: {
type: Boolean,
default: false
},
// 默认项（如 "默认人格"）
defaultItem: {
type: Object as PropType<SelectableItem | null>,
default: null
},
// 项目字段映射
itemIdField: {
type: String,
default: 'id'
},
itemNameField: {
type: String,
default: 'name'
},
itemDescriptionField: {
type: String,
default: 'description'
},
// 显示值的格式化函数（用于显示选中项的名称）
displayValueFormatter: {
type: Function as unknown as PropType<((value: string) => string) | null>,
default: null
}
},
emits: ['update:modelValue', 'navigate', 'create'],
data() {
return {
dialog: false,
selectedItemId: '' as string,
currentFolderId: null as string | null,
breadcrumbPath: [] as FolderTreeNode[]
};
},
computed: {
displayValue(): string {
if (this.displayValueFormatter) {
return this.displayValueFormatter(this.modelValue);
}
// 如果是默认项
if (this.defaultItem && this.modelValue === this.getItemId(this.defaultItem)) {
return this.labels.defaultItem || this.getItemName(this.defaultItem);
}
return this.modelValue;
},
currentItems(): SelectableItem[] {
const items: SelectableItem[] = [];
// 如果在根目录且有默认项，添加到列表开头
if (this.currentFolderId === null && this.defaultItem) {
items.push(this.defaultItem);
}
// 添加当前文件夹的项目
items.push(...this.items);
return items;
},
currentSubFolders(): FolderTreeNode[] {
if (this.currentFolderId === null) {
return this.folderTree;
}
const folder = this.findFolderInTree(this.currentFolderId);
return folder?.children || [];
},
breadcrumbItems(): any[] {
const items: any[] = [
{
title: this.labels.rootFolder || '根目录',
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: {
getItemId(item: SelectableItem): string {
return String(item[this.itemIdField] || item.id || '');
},
getItemName(item: SelectableItem): string {
return String(item[this.itemNameField] || item.name || '');
},
getItemDescription(item: SelectableItem): string {
return String(item[this.itemDescriptionField] || item.description || '');
},
truncateText(text: string, maxLength: number): string {
if (!text) return '';
return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
},
openDialog() {
this.selectedItemId = this.modelValue || '';
this.currentFolderId = null;
this.breadcrumbPath = [];
this.dialog = true;
this.$emit('navigate', null);
},
navigateToFolder(folderId: string | null) {
this.currentFolderId = folderId;
this.updateBreadcrumb(folderId);
this.$emit('navigate', folderId);
},
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(this.folderTree);
},
findPathToFolder(folderId: string): FolderTreeNode[] {
const findPath = (nodes: FolderTreeNode[], path: FolderTreeNode[]): FolderTreeNode[] | null => {
for (const node of nodes) {
if (node.folder_id === folderId) {
return [...path, node];
}
if (node.children && node.children.length > 0) {
const result = findPath(node.children, [...path, node]);
if (result) return result;
}
}
return null;
};
return findPath(this.folderTree, []) || [];
},
updateBreadcrumb(folderId: string | null) {
if (folderId === null) {
this.breadcrumbPath = [];
} else {
this.breadcrumbPath = this.findPathToFolder(folderId);
}
},
selectItem(item: SelectableItem) {
this.selectedItemId = this.getItemId(item);
},
confirmSelection() {
this.$emit('update:modelValue', this.selectedItemId);
this.dialog = false;
},
cancelSelection() {
this.selectedItemId = this.modelValue || '';
this.dialog = false;
}
}
});
</script>
<style scoped>
.selector-dialog-card {
border-radius: 12px;
overflow: hidden;
}
.dialog-title {
font-size: 1.25rem;
font-weight: 500;
}
.selector-layout {
display: flex;
height: 100%;
}
.folder-sidebar {
width: 280px;
border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
overflow-y: auto;
flex-shrink: 0;
background-color: transparent;
}
.sidebar-header {
border-bottom: 1px solid rgba(var(--v-border-color), 0.5);
}
.items-panel {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
background-color: rgb(var(--v-theme-surface));
}
.breadcrumb-bar {
background-color: transparent;
min-height: 56px;
display: flex;
align-items: center;
}
.items-list {
flex: 1;
overflow-y: auto;
}
.items-content {
background-color: transparent;
}
.tree-list {
padding: 0;
}
.section-label {
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.7rem;
}
.breadcrumb-link {
cursor: pointer;
transition: color 0.2s;
}
.breadcrumb-link:hover {
color: rgb(var(--v-theme-primary));
}
.root-item {
margin-bottom: 4px;
}
.folder-item {
transition: all 0.15s ease;
}
.folder-item:hover {
background-color: rgba(var(--v-theme-primary), 0.06);
}
.persona-item {
transition: all 0.15s ease;
border: 1px solid transparent;
}
.persona-item:hover {
background-color: rgba(var(--v-theme-primary), 0.04);
}
.persona-item.selected-item {
background-color: rgba(var(--v-theme-primary), 0.08);
border-color: rgba(var(--v-theme-primary), 0.3);
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
}
.v-list-item {
transition: all 0.15s ease;
}
.v-list-item:hover {
background-color: rgba(var(--v-theme-primary), 0.04);
}
.v-list-item.v-list-item--active {
background-color: rgba(var(--v-theme-primary), 0.08);
}
@media (max-width: 600px) {
.selector-layout {
flex-direction: column;
height: auto;
max-height: 500px;
}
.folder-sidebar {
width: 100%;
border-right: none;
border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
max-height: 150px;
}
.items-list {
max-height: 300px;
}
}
</style>

272
dashboard/src/components/folder/BaseFolderTree.vue Normal file
View File

@@ -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>

154
dashboard/src/components/folder/BaseFolderTreeNode.vue Normal file
View File

@@ -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>

93
dashboard/src/components/folder/BaseMoveTargetNode.vue Normal file
View File

@@ -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>

178
dashboard/src/components/folder/BaseMoveToFolderDialog.vue Normal file
View File

@@ -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>

349
dashboard/src/components/folder/README.md Normal file
View File

@@ -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() {
// ...
},
// ...
},
});
```

46
dashboard/src/components/folder/index.ts Normal file
View File

@@ -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';

249
dashboard/src/components/folder/types.ts Normal file
View File

@@ -0,0 +1,249 @@
/**
* 通用文件夹管理组件类型定义
*
* 这是一个可复用的文件夹管理系统，可用于管理各种类型的项目（如 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;
}
/**
* 可选择的项目基础接口
*/
export interface SelectableItem {
id: string;
name: string;
description?: string | null;
folder_id?: string | null;
[key: string]: any;
}
/**
* 文件夹项目选择器操作接口
*/
export interface FolderItemSelectorOperations<T extends SelectableItem> {
// 加载文件夹树
loadFolderTree: () => Promise<FolderTreeNode[]>;
// 加载指定文件夹下的项目
loadItemsInFolder: (folderId: string | null) => Promise<T[]>;
// 创建项目（可选）
createItem?: (data: any) => Promise<T>;
}
/**
* 文件夹项目选择器标签配置
*/
export interface FolderItemSelectorLabels {
// 对话框
dialogTitle?: string;
notSelected?: string;
buttonText?: string;
// 项目列表
noItems?: string;
defaultItem?: string;
noDescription?: string;
emptyFolder?: string;
// 按钮
createButton?: string;
confirmButton?: string;
cancelButton?: string;
// 文件夹
rootFolder?: string;
}

324
dashboard/src/components/folder/useFolderManager.ts Normal file
View File

@@ -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;