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

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

astrbot/builtin_stars/builtin_commands/commands/persona.py

@@ -1,13 +1,55 @@
 import builtins
+from typing import TYPE_CHECKING
 
 from astrbot.api import sp, star
 from astrbot.api.event import AstrMessageEvent, MessageEventResult
 
+if TYPE_CHECKING:
+    from astrbot.core.db.po import Persona
+
 
 class PersonaCommands:
     def __init__(self, context: star.Context):
         self.context = context
 
+    def _build_tree_output(
+        self,
+        folder_tree: list[dict],
+        all_personas: list["Persona"],
+        depth: int = 0,
+    ) -> list[str]:
+        """递归构建树状输出，使用短线条表示层级"""
+        lines: list[str] = []
+        # 使用短线条作为缩进前缀，每层只用 "│" 加一个空格
+        prefix = "│ " * depth
+
+        for folder in folder_tree:
+            # 输出文件夹
+            lines.append(f"{prefix}├ 📁 {folder['name']}/")
+
+            # 获取该文件夹下的人格
+            folder_personas = [
+                p for p in all_personas if p.folder_id == folder["folder_id"]
+            ]
+            child_prefix = "│ " * (depth + 1)
+
+            # 输出该文件夹下的人格
+            for persona in folder_personas:
+                lines.append(f"{child_prefix}├ 👤 {persona.persona_id}")
+
+            # 递归处理子文件夹
+            children = folder.get("children", [])
+            if children:
+                lines.extend(
+                    self._build_tree_output(
+                        children,
+                        all_personas,
+                        depth + 1,
+                    )
+                )
+
+        return lines
+
     async def persona(self, message: AstrMessageEvent):
         l = message.message_str.split(" ")  # noqa: E741
         umo = message.unified_msg_origin
@@ -69,12 +111,32 @@ class PersonaCommands:
                 .use_t2i(False),
             )
         elif l[1] == "list":
-            parts = ["人格列表：\n"]
-            for persona in self.context.provider_manager.personas:
-                parts.append(f"- {persona['name']}\n")
-            parts.append("\n\n*输入 `/persona view 人格名` 查看人格详细信息")
-            msg = "".join(parts)
-            message.set_result(MessageEventResult().message(msg))
+            # 获取文件夹树和所有人格
+            folder_tree = await self.context.persona_manager.get_folder_tree()
+            all_personas = self.context.persona_manager.personas
+
+            lines = ["📂 人格列表：\n"]
+
+            # 构建树状输出
+            tree_lines = self._build_tree_output(folder_tree, all_personas)
+            lines.extend(tree_lines)
+
+            # 输出根目录下的人格（没有文件夹的）
+            root_personas = [p for p in all_personas if p.folder_id is None]
+            if root_personas:
+                if tree_lines:  # 如果有文件夹内容，加个空行
+                    lines.append("")
+                for persona in root_personas:
+                    lines.append(f"👤 {persona.persona_id}")
+
+            # 统计信息
+            total_count = len(all_personas)
+            lines.append(f"\n共 {total_count} 个人格")
+            lines.append("\n*使用 `/persona <人格名>` 设置人格")
+            lines.append("*使用 `/persona view <人格名>` 查看详细信息")
+
+            msg = "\n".join(lines)
+            message.set_result(MessageEventResult().message(msg).use_t2i(False))
         elif l[1] == "view":
             if len(l) == 2:
                 message.set_result(MessageEventResult().message("请输入人格情景名"))

astrbot/core/db/__init__.py

@@ -14,6 +14,7 @@ from astrbot.core.db.po import (
     CommandConflict,
     ConversationV2,
     Persona,
+    PersonaFolder,
     PlatformMessageHistory,
     PlatformSession,
     PlatformStat,
@@ -253,8 +254,19 @@ class BaseDatabase(abc.ABC):
         system_prompt: str,
         begin_dialogs: list[str] | None = None,
         tools: list[str] | None = None,
+        folder_id: str | None = None,
+        sort_order: int = 0,
     ) -> Persona:
-        """Insert a new persona record."""
+        """Insert a new persona record.
+
+        Args:
+            persona_id: Unique identifier for the persona
+            system_prompt: System prompt for the persona
+            begin_dialogs: Optional list of initial dialog strings
+            tools: Optional list of tool names (None means all tools, [] means no tools)
+            folder_id: Optional folder ID to place the persona in (None means root)
+            sort_order: Sort order within the folder (default 0)
+        """
         ...
 
     @abc.abstractmethod
@@ -283,6 +295,84 @@ class BaseDatabase(abc.ABC):
         """Delete a persona by its ID."""
         ...
 
+    # ====
+    # Persona Folder Management
+    # ====
+
+    @abc.abstractmethod
+    async def insert_persona_folder(
+        self,
+        name: str,
+        parent_id: str | None = None,
+        description: str | None = None,
+        sort_order: int = 0,
+    ) -> PersonaFolder:
+        """Insert a new persona folder."""
+        ...
+
+    @abc.abstractmethod
+    async def get_persona_folder_by_id(self, folder_id: str) -> PersonaFolder | None:
+        """Get a persona folder by its folder_id."""
+        ...
+
+    @abc.abstractmethod
+    async def get_persona_folders(
+        self, parent_id: str | None = None
+    ) -> list[PersonaFolder]:
+        """Get all persona folders, optionally filtered by parent_id."""
+        ...
+
+    @abc.abstractmethod
+    async def get_all_persona_folders(self) -> list[PersonaFolder]:
+        """Get all persona folders."""
+        ...
+
+    @abc.abstractmethod
+    async def update_persona_folder(
+        self,
+        folder_id: str,
+        name: str | None = None,
+        parent_id: T.Any = None,
+        description: T.Any = None,
+        sort_order: int | None = None,
+    ) -> PersonaFolder | None:
+        """Update a persona folder."""
+        ...
+
+    @abc.abstractmethod
+    async def delete_persona_folder(self, folder_id: str) -> None:
+        """Delete a persona folder by its folder_id."""
+        ...
+
+    @abc.abstractmethod
+    async def move_persona_to_folder(
+        self, persona_id: str, folder_id: str | None
+    ) -> Persona | None:
+        """Move a persona to a folder (or root if folder_id is None)."""
+        ...
+
+    @abc.abstractmethod
+    async def get_personas_by_folder(
+        self, folder_id: str | None = None
+    ) -> list[Persona]:
+        """Get all personas in a specific folder."""
+        ...
+
+    @abc.abstractmethod
+    async def batch_update_sort_order(
+        self,
+        items: list[dict],
+    ) -> None:
+        """Batch update sort_order for personas and/or folders.
+
+        Args:
+            items: List of dicts with keys:
+                - id: The persona_id or folder_id
+                - type: Either "persona" or "folder"
+                - sort_order: The new sort_order value
+        """
+        ...
+
     @abc.abstractmethod
     async def insert_preference_or_update(
         self,

astrbot/core/db/po.py

@@ -68,6 +68,44 @@ class ConversationV2(SQLModel, table=True):
     )
 
 
+class PersonaFolder(SQLModel, table=True):
+    """Persona 文件夹，支持递归层级结构。
+
+    用于组织和管理多个 Persona，类似于文件系统的目录结构。
+    """
+
+    __tablename__: str = "persona_folders"
+
+    id: int | None = Field(
+        primary_key=True,
+        sa_column_kwargs={"autoincrement": True},
+        default=None,
+    )
+    folder_id: str = Field(
+        max_length=36,
+        nullable=False,
+        unique=True,
+        default_factory=lambda: str(uuid.uuid4()),
+    )
+    name: str = Field(max_length=255, nullable=False)
+    parent_id: str | None = Field(default=None, max_length=36)
+    """父文件夹ID，NULL表示根目录"""
+    description: str | None = Field(default=None, sa_type=Text)
+    sort_order: int = Field(default=0)
+    created_at: datetime = Field(default_factory=lambda: datetime.now(timezone.utc))
+    updated_at: datetime = Field(
+        default_factory=lambda: datetime.now(timezone.utc),
+        sa_column_kwargs={"onupdate": datetime.now(timezone.utc)},
+    )
+
+    __table_args__ = (
+        UniqueConstraint(
+            "folder_id",
+            name="uix_persona_folder_id",
+        ),
+    )
+
+
 class Persona(SQLModel, table=True):
     """Persona is a set of instructions for LLMs to follow.
 
@@ -87,6 +125,10 @@ class Persona(SQLModel, table=True):
     """a list of strings, each representing a dialog to start with"""
     tools: list | None = Field(default=None, sa_type=JSON)
     """None means use ALL tools for default, empty list means no tools, otherwise a list of tool names."""
+    folder_id: str | None = Field(default=None, max_length=36)
+    """所属文件夹ID，NULL 表示在根目录"""
+    sort_order: int = Field(default=0)
+    """排序顺序"""
     created_at: datetime = Field(default_factory=lambda: datetime.now(timezone.utc))
     updated_at: datetime = Field(
         default_factory=lambda: datetime.now(timezone.utc),

astrbot/core/db/sqlite.py

@@ -16,6 +16,7 @@ from astrbot.core.db.po import (
     CommandConflict,
     ConversationV2,
     Persona,
+    PersonaFolder,
     PlatformMessageHistory,
     PlatformSession,
     PlatformStat,
@@ -51,8 +52,30 @@ class SQLiteDatabase(BaseDatabase):
             await conn.execute(text("PRAGMA temp_store=MEMORY"))
             await conn.execute(text("PRAGMA mmap_size=134217728"))
             await conn.execute(text("PRAGMA optimize"))
+            # 确保 personas 表有 folder_id 和 sort_order 列（前向兼容）
+            await self._ensure_persona_folder_columns(conn)
             await conn.commit()
 
+    async def _ensure_persona_folder_columns(self, conn) -> None:
+        """确保 personas 表有 folder_id 和 sort_order 列。
+
+        这是为了支持旧版数据库的平滑升级。新版数据库通过 SQLModel
+        的 metadata.create_all 自动创建这些列。
+        """
+        result = await conn.execute(text("PRAGMA table_info(personas)"))
+        columns = {row[1] for row in result.fetchall()}
+
+        if "folder_id" not in columns:
+            await conn.execute(
+                text(
+                    "ALTER TABLE personas ADD COLUMN folder_id VARCHAR(36) DEFAULT NULL"
+                )
+            )
+        if "sort_order" not in columns:
+            await conn.execute(
+                text("ALTER TABLE personas ADD COLUMN sort_order INTEGER DEFAULT 0")
+            )
+
     # ====
     # Platform Statistics
     # ====
@@ -541,6 +564,8 @@ class SQLiteDatabase(BaseDatabase):
         system_prompt,
         begin_dialogs=None,
         tools=None,
+        folder_id=None,
+        sort_order=0,
     ):
         """Insert a new persona record."""
         async with self.get_db() as session:
@@ -551,8 +576,12 @@ class SQLiteDatabase(BaseDatabase):
                     system_prompt=system_prompt,
                     begin_dialogs=begin_dialogs or [],
                     tools=tools,
+                    folder_id=folder_id,
+                    sort_order=sort_order,
                 )
                 session.add(new_persona)
+                await session.flush()
+                await session.refresh(new_persona)
                 return new_persona
 
     async def get_persona_by_id(self, persona_id):
@@ -605,6 +634,207 @@ class SQLiteDatabase(BaseDatabase):
                     delete(Persona).where(col(Persona.persona_id) == persona_id),
                 )
 
+    # ====
+    # Persona Folder Management
+    # ====
+
+    async def insert_persona_folder(
+        self,
+        name: str,
+        parent_id: str | None = None,
+        description: str | None = None,
+        sort_order: int = 0,
+    ) -> PersonaFolder:
+        """Insert a new persona folder."""
+        async with self.get_db() as session:
+            session: AsyncSession
+            async with session.begin():
+                new_folder = PersonaFolder(
+                    name=name,
+                    parent_id=parent_id,
+                    description=description,
+                    sort_order=sort_order,
+                )
+                session.add(new_folder)
+                await session.flush()
+                await session.refresh(new_folder)
+                return new_folder
+
+    async def get_persona_folder_by_id(self, folder_id: str) -> PersonaFolder | None:
+        """Get a persona folder by its folder_id."""
+        async with self.get_db() as session:
+            session: AsyncSession
+            query = select(PersonaFolder).where(PersonaFolder.folder_id == folder_id)
+            result = await session.execute(query)
+            return result.scalar_one_or_none()
+
+    async def get_persona_folders(
+        self, parent_id: str | None = None
+    ) -> list[PersonaFolder]:
+        """Get all persona folders, optionally filtered by parent_id.
+
+        Args:
+            parent_id: If None, returns root folders only. If specified, returns
+                       children of that folder.
+        """
+        async with self.get_db() as session:
+            session: AsyncSession
+            if parent_id is None:
+                # Get root folders (parent_id is NULL)
+                query = (
+                    select(PersonaFolder)
+                    .where(col(PersonaFolder.parent_id).is_(None))
+                    .order_by(col(PersonaFolder.sort_order), col(PersonaFolder.name))
+                )
+            else:
+                query = (
+                    select(PersonaFolder)
+                    .where(PersonaFolder.parent_id == parent_id)
+                    .order_by(col(PersonaFolder.sort_order), col(PersonaFolder.name))
+                )
+            result = await session.execute(query)
+            return list(result.scalars().all())
+
+    async def get_all_persona_folders(self) -> list[PersonaFolder]:
+        """Get all persona folders."""
+        async with self.get_db() as session:
+            session: AsyncSession
+            query = select(PersonaFolder).order_by(
+                col(PersonaFolder.sort_order), col(PersonaFolder.name)
+            )
+            result = await session.execute(query)
+            return list(result.scalars().all())
+
+    async def update_persona_folder(
+        self,
+        folder_id: str,
+        name: str | None = None,
+        parent_id: T.Any = NOT_GIVEN,
+        description: T.Any = NOT_GIVEN,
+        sort_order: int | None = None,
+    ) -> PersonaFolder | None:
+        """Update a persona folder."""
+        async with self.get_db() as session:
+            session: AsyncSession
+            async with session.begin():
+                query = update(PersonaFolder).where(
+                    col(PersonaFolder.folder_id) == folder_id
+                )
+                values: dict[str, T.Any] = {}
+                if name is not None:
+                    values["name"] = name
+                if parent_id is not NOT_GIVEN:
+                    values["parent_id"] = parent_id
+                if description is not NOT_GIVEN:
+                    values["description"] = description
+                if sort_order is not None:
+                    values["sort_order"] = sort_order
+                if not values:
+                    return None
+                query = query.values(**values)
+                await session.execute(query)
+        return await self.get_persona_folder_by_id(folder_id)
+
+    async def delete_persona_folder(self, folder_id: str) -> None:
+        """Delete a persona folder by its folder_id.
+
+        Note: This will also set folder_id to NULL for all personas in this folder,
+        moving them to the root directory.
+        """
+        async with self.get_db() as session:
+            session: AsyncSession
+            async with session.begin():
+                # Move personas to root directory
+                await session.execute(
+                    update(Persona)
+                    .where(col(Persona.folder_id) == folder_id)
+                    .values(folder_id=None)
+                )
+                # Delete the folder
+                await session.execute(
+                    delete(PersonaFolder).where(
+                        col(PersonaFolder.folder_id) == folder_id
+                    ),
+                )
+
+    async def move_persona_to_folder(
+        self, persona_id: str, folder_id: str | None
+    ) -> Persona | None:
+        """Move a persona to a folder (or root if folder_id is None)."""
+        async with self.get_db() as session:
+            session: AsyncSession
+            async with session.begin():
+                await session.execute(
+                    update(Persona)
+                    .where(col(Persona.persona_id) == persona_id)
+                    .values(folder_id=folder_id)
+                )
+        return await self.get_persona_by_id(persona_id)
+
+    async def get_personas_by_folder(
+        self, folder_id: str | None = None
+    ) -> list[Persona]:
+        """Get all personas in a specific folder.
+
+        Args:
+            folder_id: If None, returns personas in root directory.
+        """
+        async with self.get_db() as session:
+            session: AsyncSession
+            if folder_id is None:
+                query = (
+                    select(Persona)
+                    .where(col(Persona.folder_id).is_(None))
+                    .order_by(col(Persona.sort_order), col(Persona.persona_id))
+                )
+            else:
+                query = (
+                    select(Persona)
+                    .where(Persona.folder_id == folder_id)
+                    .order_by(col(Persona.sort_order), col(Persona.persona_id))
+                )
+            result = await session.execute(query)
+            return list(result.scalars().all())
+
+    async def batch_update_sort_order(
+        self,
+        items: list[dict],
+    ) -> None:
+        """Batch update sort_order for personas and/or folders.
+
+        Args:
+            items: List of dicts with keys:
+                - id: The persona_id or folder_id
+                - type: Either "persona" or "folder"
+                - sort_order: The new sort_order value
+        """
+        if not items:
+            return
+
+        async with self.get_db() as session:
+            session: AsyncSession
+            async with session.begin():
+                for item in items:
+                    item_id = item.get("id")
+                    item_type = item.get("type")
+                    sort_order = item.get("sort_order")
+
+                    if item_id is None or item_type is None or sort_order is None:
+                        continue
+
+                    if item_type == "persona":
+                        await session.execute(
+                            update(Persona)
+                            .where(col(Persona.persona_id) == item_id)
+                            .values(sort_order=sort_order)
+                        )
+                    elif item_type == "folder":
+                        await session.execute(
+                            update(PersonaFolder)
+                            .where(col(PersonaFolder.folder_id) == item_id)
+                            .values(sort_order=sort_order)
+                        )
+
     async def insert_preference_or_update(self, scope, scope_id, key, value):
         """Insert a new preference record or update if it exists."""
         async with self.get_db() as session:

astrbot/core/persona_mgr.py

@@ -1,7 +1,7 @@
 from astrbot import logger
 from astrbot.core.astrbot_config_mgr import AstrBotConfigManager
 from astrbot.core.db import BaseDatabase
-from astrbot.core.db.po import Persona, Personality
+from astrbot.core.db.po import Persona, PersonaFolder, Personality
 from astrbot.core.platform.message_session import MessageSession
 
 DEFAULT_PERSONALITY = Personality(
@@ -94,14 +94,164 @@ class PersonaManager:
         """获取所有 personas"""
         return await self.db.get_personas()
 
+    async def get_personas_by_folder(
+        self, folder_id: str | None = None
+    ) -> list[Persona]:
+        """获取指定文件夹中的 personas
+
+        Args:
+            folder_id: 文件夹 ID，None 表示根目录
+        """
+        return await self.db.get_personas_by_folder(folder_id)
+
+    async def move_persona_to_folder(
+        self, persona_id: str, folder_id: str | None
+    ) -> Persona | None:
+        """移动 persona 到指定文件夹
+
+        Args:
+            persona_id: Persona ID
+            folder_id: 目标文件夹 ID，None 表示移动到根目录
+        """
+        persona = await self.db.move_persona_to_folder(persona_id, folder_id)
+        if persona:
+            for i, p in enumerate(self.personas):
+                if p.persona_id == persona_id:
+                    self.personas[i] = persona
+                    break
+        return persona
+
+    # ====
+    # Persona Folder Management
+    # ====
+
+    async def create_folder(
+        self,
+        name: str,
+        parent_id: str | None = None,
+        description: str | None = None,
+        sort_order: int = 0,
+    ) -> PersonaFolder:
+        """创建新的文件夹"""
+        return await self.db.insert_persona_folder(
+            name=name,
+            parent_id=parent_id,
+            description=description,
+            sort_order=sort_order,
+        )
+
+    async def get_folder(self, folder_id: str) -> PersonaFolder | None:
+        """获取指定文件夹"""
+        return await self.db.get_persona_folder_by_id(folder_id)
+
+    async def get_folders(self, parent_id: str | None = None) -> list[PersonaFolder]:
+        """获取文件夹列表
+
+        Args:
+            parent_id: 父文件夹 ID，None 表示获取根目录下的文件夹
+        """
+        return await self.db.get_persona_folders(parent_id)
+
+    async def get_all_folders(self) -> list[PersonaFolder]:
+        """获取所有文件夹"""
+        return await self.db.get_all_persona_folders()
+
+    async def update_folder(
+        self,
+        folder_id: str,
+        name: str | None = None,
+        parent_id: str | None = None,
+        description: str | None = None,
+        sort_order: int | None = None,
+    ) -> PersonaFolder | None:
+        """更新文件夹信息"""
+        return await self.db.update_persona_folder(
+            folder_id=folder_id,
+            name=name,
+            parent_id=parent_id,
+            description=description,
+            sort_order=sort_order,
+        )
+
+    async def delete_folder(self, folder_id: str) -> None:
+        """删除文件夹
+
+        Note: 文件夹内的 personas 会被移动到根目录
+        """
+        await self.db.delete_persona_folder(folder_id)
+
+    async def batch_update_sort_order(self, items: list[dict]) -> None:
+        """批量更新 personas 和/或 folders 的排序顺序
+
+        Args:
+            items: 包含以下键的字典列表：
+                - id: persona_id 或 folder_id
+                - type: "persona" 或 "folder"
+                - sort_order: 新的排序顺序值
+        """
+        await self.db.batch_update_sort_order(items)
+        # 刷新缓存
+        self.personas = await self.get_all_personas()
+        self.get_v3_persona_data()
+
+    async def get_folder_tree(self) -> list[dict]:
+        """获取文件夹树形结构
+
+        Returns:
+            树形结构的文件夹列表，每个文件夹包含 children 子列表
+        """
+        all_folders = await self.get_all_folders()
+        folder_map: dict[str, dict] = {}
+
+        # 创建文件夹字典
+        for folder in all_folders:
+            folder_map[folder.folder_id] = {
+                "folder_id": folder.folder_id,
+                "name": folder.name,
+                "parent_id": folder.parent_id,
+                "description": folder.description,
+                "sort_order": folder.sort_order,
+                "children": [],
+            }
+
+        # 构建树形结构
+        root_folders = []
+        for folder_id, folder_data in folder_map.items():
+            parent_id = folder_data["parent_id"]
+            if parent_id is None:
+                root_folders.append(folder_data)
+            elif parent_id in folder_map:
+                folder_map[parent_id]["children"].append(folder_data)
+
+        # 递归排序
+        def sort_folders(folders: list[dict]) -> list[dict]:
+            folders.sort(key=lambda f: (f["sort_order"], f["name"]))
+            for folder in folders:
+                if folder["children"]:
+                    folder["children"] = sort_folders(folder["children"])
+            return folders
+
+        return sort_folders(root_folders)
+
     async def create_persona(
         self,
         persona_id: str,
         system_prompt: str,
         begin_dialogs: list[str] | None = None,
         tools: list[str] | None = None,
+        folder_id: str | None = None,
+        sort_order: int = 0,
     ) -> Persona:
-        """创建新的 persona。tools 参数为 None 时表示使用所有工具，空列表表示不使用任何工具"""
+        """创建新的 persona。
+
+        Args:
+            persona_id: Persona 唯一标识
+            system_prompt: 系统提示词
+            begin_dialogs: 预设对话列表
+            tools: 工具列表，None 表示使用所有工具，空列表表示不使用任何工具
+            folder_id: 所属文件夹 ID，None 表示根目录
+            sort_order: 排序顺序
+        """
         if await self.db.get_persona_by_id(persona_id):
             raise ValueError(f"Persona with ID {persona_id} already exists.")
         new_persona = await self.db.insert_persona(
@@ -109,6 +259,8 @@ class PersonaManager:
             system_prompt,
             begin_dialogs,
             tools=tools,
+            folder_id=folder_id,
+            sort_order=sort_order,
         )
         self.personas.append(new_persona)
         self.get_v3_persona_data()

astrbot/dashboard/routes/persona.py

@@ -23,6 +23,15 @@ class PersonaRoute(Route):
             "/persona/create": ("POST", self.create_persona),
             "/persona/update": ("POST", self.update_persona),
             "/persona/delete": ("POST", self.delete_persona),
+            "/persona/move": ("POST", self.move_persona),
+            "/persona/reorder": ("POST", self.reorder_items),
+            # Folder routes
+            "/persona/folder/list": ("GET", self.list_folders),
+            "/persona/folder/tree": ("GET", self.get_folder_tree),
+            "/persona/folder/detail": ("POST", self.get_folder_detail),
+            "/persona/folder/create": ("POST", self.create_folder),
+            "/persona/folder/update": ("POST", self.update_folder),
+            "/persona/folder/delete": ("POST", self.delete_folder),
         }
         self.db_helper = db_helper
         self.persona_mgr = core_lifecycle.persona_mgr
@@ -31,7 +40,14 @@ class PersonaRoute(Route):
     async def list_personas(self):
         """获取所有人格列表"""
         try:
-            personas = await self.persona_mgr.get_all_personas()
+            # 支持按文件夹筛选
+            folder_id = request.args.get("folder_id")
+            if folder_id is not None:
+                personas = await self.persona_mgr.get_personas_by_folder(
+                    folder_id if folder_id else None
+                )
+            else:
+                personas = await self.persona_mgr.get_all_personas()
             return (
                 Response()
                 .ok(
@@ -41,6 +57,8 @@ class PersonaRoute(Route):
                             "system_prompt": persona.system_prompt,
                             "begin_dialogs": persona.begin_dialogs or [],
                             "tools": persona.tools,
+                            "folder_id": persona.folder_id,
+                            "sort_order": persona.sort_order,
                             "created_at": persona.created_at.isoformat()
                             if persona.created_at
                             else None,
@@ -78,6 +96,8 @@ class PersonaRoute(Route):
                         "system_prompt": persona.system_prompt,
                         "begin_dialogs": persona.begin_dialogs or [],
                         "tools": persona.tools,
+                        "folder_id": persona.folder_id,
+                        "sort_order": persona.sort_order,
                         "created_at": persona.created_at.isoformat()
                         if persona.created_at
                         else None,
@@ -100,6 +120,8 @@ class PersonaRoute(Route):
             system_prompt = data.get("system_prompt", "").strip()
             begin_dialogs = data.get("begin_dialogs", [])
             tools = data.get("tools")
+            folder_id = data.get("folder_id")  # None 表示根目录
+            sort_order = data.get("sort_order", 0)
 
             if not persona_id:
                 return Response().error("人格ID不能为空").__dict__
@@ -120,6 +142,8 @@ class PersonaRoute(Route):
                 system_prompt=system_prompt,
                 begin_dialogs=begin_dialogs if begin_dialogs else None,
                 tools=tools if tools else None,
+                folder_id=folder_id,
+                sort_order=sort_order,
             )
 
             return (
@@ -132,6 +156,8 @@ class PersonaRoute(Route):
                             "system_prompt": persona.system_prompt,
                             "begin_dialogs": persona.begin_dialogs or [],
                             "tools": persona.tools or [],
+                            "folder_id": persona.folder_id,
+                            "sort_order": persona.sort_order,
                             "created_at": persona.created_at.isoformat()
                             if persona.created_at
                             else None,
@@ -200,3 +226,234 @@ class PersonaRoute(Route):
         except Exception as e:
             logger.error(f"删除人格失败: {e!s}\n{traceback.format_exc()}")
             return Response().error(f"删除人格失败: {e!s}").__dict__
+
+    async def move_persona(self):
+        """移动人格到指定文件夹"""
+        try:
+            data = await request.get_json()
+            persona_id = data.get("persona_id")
+            folder_id = data.get("folder_id")  # None 表示移动到根目录
+
+            if not persona_id:
+                return Response().error("缺少必要参数: persona_id").__dict__
+
+            await self.persona_mgr.move_persona_to_folder(persona_id, folder_id)
+
+            return Response().ok({"message": "人格移动成功"}).__dict__
+        except ValueError as e:
+            return Response().error(str(e)).__dict__
+        except Exception as e:
+            logger.error(f"移动人格失败: {e!s}\n{traceback.format_exc()}")
+            return Response().error(f"移动人格失败: {e!s}").__dict__
+
+    # ====
+    # Folder Routes
+    # ====
+
+    async def list_folders(self):
+        """获取文件夹列表"""
+        try:
+            parent_id = request.args.get("parent_id")
+            # 空字符串视为 None（根目录）
+            if parent_id == "":
+                parent_id = None
+            folders = await self.persona_mgr.get_folders(parent_id)
+            return (
+                Response()
+                .ok(
+                    [
+                        {
+                            "folder_id": folder.folder_id,
+                            "name": folder.name,
+                            "parent_id": folder.parent_id,
+                            "description": folder.description,
+                            "sort_order": folder.sort_order,
+                            "created_at": folder.created_at.isoformat()
+                            if folder.created_at
+                            else None,
+                            "updated_at": folder.updated_at.isoformat()
+                            if folder.updated_at
+                            else None,
+                        }
+                        for folder in folders
+                    ],
+                )
+                .__dict__
+            )
+        except Exception as e:
+            logger.error(f"获取文件夹列表失败: {e!s}\n{traceback.format_exc()}")
+            return Response().error(f"获取文件夹列表失败: {e!s}").__dict__
+
+    async def get_folder_tree(self):
+        """获取文件夹树形结构"""
+        try:
+            tree = await self.persona_mgr.get_folder_tree()
+            return Response().ok(tree).__dict__
+        except Exception as e:
+            logger.error(f"获取文件夹树失败: {e!s}\n{traceback.format_exc()}")
+            return Response().error(f"获取文件夹树失败: {e!s}").__dict__
+
+    async def get_folder_detail(self):
+        """获取指定文件夹的详细信息"""
+        try:
+            data = await request.get_json()
+            folder_id = data.get("folder_id")
+
+            if not folder_id:
+                return Response().error("缺少必要参数: folder_id").__dict__
+
+            folder = await self.persona_mgr.get_folder(folder_id)
+            if not folder:
+                return Response().error("文件夹不存在").__dict__
+
+            return (
+                Response()
+                .ok(
+                    {
+                        "folder_id": folder.folder_id,
+                        "name": folder.name,
+                        "parent_id": folder.parent_id,
+                        "description": folder.description,
+                        "sort_order": folder.sort_order,
+                        "created_at": folder.created_at.isoformat()
+                        if folder.created_at
+                        else None,
+                        "updated_at": folder.updated_at.isoformat()
+                        if folder.updated_at
+                        else None,
+                    },
+                )
+                .__dict__
+            )
+        except Exception as e:
+            logger.error(f"获取文件夹详情失败: {e!s}\n{traceback.format_exc()}")
+            return Response().error(f"获取文件夹详情失败: {e!s}").__dict__
+
+    async def create_folder(self):
+        """创建文件夹"""
+        try:
+            data = await request.get_json()
+            name = data.get("name", "").strip()
+            parent_id = data.get("parent_id")
+            description = data.get("description")
+            sort_order = data.get("sort_order", 0)
+
+            if not name:
+                return Response().error("文件夹名称不能为空").__dict__
+
+            folder = await self.persona_mgr.create_folder(
+                name=name,
+                parent_id=parent_id,
+                description=description,
+                sort_order=sort_order,
+            )
+
+            return (
+                Response()
+                .ok(
+                    {
+                        "message": "文件夹创建成功",
+                        "folder": {
+                            "folder_id": folder.folder_id,
+                            "name": folder.name,
+                            "parent_id": folder.parent_id,
+                            "description": folder.description,
+                            "sort_order": folder.sort_order,
+                            "created_at": folder.created_at.isoformat()
+                            if folder.created_at
+                            else None,
+                            "updated_at": folder.updated_at.isoformat()
+                            if folder.updated_at
+                            else None,
+                        },
+                    },
+                )
+                .__dict__
+            )
+        except Exception as e:
+            logger.error(f"创建文件夹失败: {e!s}\n{traceback.format_exc()}")
+            return Response().error(f"创建文件夹失败: {e!s}").__dict__
+
+    async def update_folder(self):
+        """更新文件夹信息"""
+        try:
+            data = await request.get_json()
+            folder_id = data.get("folder_id")
+            name = data.get("name")
+            parent_id = data.get("parent_id")
+            description = data.get("description")
+            sort_order = data.get("sort_order")
+
+            if not folder_id:
+                return Response().error("缺少必要参数: folder_id").__dict__
+
+            await self.persona_mgr.update_folder(
+                folder_id=folder_id,
+                name=name,
+                parent_id=parent_id,
+                description=description,
+                sort_order=sort_order,
+            )
+
+            return Response().ok({"message": "文件夹更新成功"}).__dict__
+        except Exception as e:
+            logger.error(f"更新文件夹失败: {e!s}\n{traceback.format_exc()}")
+            return Response().error(f"更新文件夹失败: {e!s}").__dict__
+
+    async def delete_folder(self):
+        """删除文件夹"""
+        try:
+            data = await request.get_json()
+            folder_id = data.get("folder_id")
+
+            if not folder_id:
+                return Response().error("缺少必要参数: folder_id").__dict__
+
+            await self.persona_mgr.delete_folder(folder_id)
+
+            return Response().ok({"message": "文件夹删除成功"}).__dict__
+        except Exception as e:
+            logger.error(f"删除文件夹失败: {e!s}\n{traceback.format_exc()}")
+            return Response().error(f"删除文件夹失败: {e!s}").__dict__
+
+    async def reorder_items(self):
+        """批量更新排序顺序
+
+        请求体格式:
+        {
+            "items": [
+                {"id": "persona_id_1", "type": "persona", "sort_order": 0},
+                {"id": "persona_id_2", "type": "persona", "sort_order": 1},
+                {"id": "folder_id_1", "type": "folder", "sort_order": 0},
+                ...
+            ]
+        }
+        """
+        try:
+            data = await request.get_json()
+            items = data.get("items", [])
+
+            if not items:
+                return Response().error("items 不能为空").__dict__
+
+            # 验证每个 item 的格式
+            for item in items:
+                if not all(k in item for k in ("id", "type", "sort_order")):
+                    return (
+                        Response()
+                        .error("每个 item 必须包含 id, type, sort_order 字段")
+                        .__dict__
+                    )
+                if item["type"] not in ("persona", "folder"):
+                    return (
+                        Response()
+                        .error("type 字段必须是 'persona' 或 'folder'")
+                        .__dict__
+                    )
+
+            await self.persona_mgr.batch_update_sort_order(items)
+
+            return Response().ok({"message": "排序更新成功"}).__dict__
+        except Exception as e:
+            logger.error(f"更新排序失败: {e!s}\n{traceback.format_exc()}")
+            return Response().error(f"更新排序失败: {e!s}").__dict__

dashboard/src/components/folder/BaseCreateFolderDialog.vue

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

dashboard/src/components/folder/BaseFolderBreadcrumb.vue

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

dashboard/src/components/folder/BaseFolderCard.vue

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

dashboard/src/components/folder/BaseFolderItemSelector.vue

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

dashboard/src/components/folder/BaseFolderTree.vue

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

dashboard/src/components/folder/BaseFolderTreeNode.vue

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

dashboard/src/components/folder/BaseMoveTargetNode.vue

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

dashboard/src/components/folder/BaseMoveToFolderDialog.vue

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

dashboard/src/components/folder/README.md

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

dashboard/src/components/folder/index.ts

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

dashboard/src/components/folder/types.ts

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

dashboard/src/components/folder/useFolderManager.ts

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

dashboard/src/components/shared/PersonaForm.vue

@@ -1,11 +1,23 @@
 <template>
-    <v-dialog v-model="showDialog" max-width="500px" persistent>
+    <v-dialog v-model="showDialog" max-width="500px">
         <v-card>
             <v-card-title class="text-h2">
                 {{ editingPersona ? tm('dialog.edit.title') : tm('dialog.create.title') }}
             </v-card-title>
 
             <v-card-text>
+                <!-- 创建位置提示 -->
+                <v-alert
+                    v-if="!editingPersona"
+                    type="info"
+                    variant="tonal"
+                    density="compact"
+                    class="mb-4"
+                    icon="mdi-folder-outline"
+                >
+                    {{ tm('form.createInFolder', { folder: folderDisplayName }) }}
+                </v-alert>
+
                 <v-form ref="personaForm" v-model="formValid">
                     <v-text-field v-model="personaForm.persona_id" :label="tm('form.personaId')"
                         :rules="personaIdRules" :disabled="editingPersona" variant="outlined" density="comfortable"
@@ -209,6 +221,14 @@ export default {
         editingPersona: {
             type: Object,
             default: null
+        },
+        currentFolderId: {
+            type: String,
+            default: null
+        },
+        currentFolderName: {
+            type: String,
+            default: null
         }
     },
     emits: ['update:modelValue', 'saved', 'error'],
@@ -225,15 +245,18 @@ export default {
             mcpServers: [],
             availableTools: [],
             loadingTools: false,
+            existingPersonaIds: [], // 已存在的人格ID列表
             personaForm: {
                 persona_id: '',
                 system_prompt: '',
                 begin_dialogs: [],
-                tools: []
+                tools: [],
+                folder_id: null
             },
             personaIdRules: [
                 v => !!v || this.tm('validation.required'),
-                v => (v && v.length >= 0) || this.tm('validation.minLength', { min: 2 }),
+                v => (v && v.length >= 1) || this.tm('validation.minLength', { min: 1 }),
+                v => !this.existingPersonaIds.includes(v) || this.tm('validation.personaIdExists'),
             ],
             systemPromptRules: [
                 v => !!v || this.tm('validation.required'),
@@ -262,6 +285,18 @@ export default {
                 (tool.description && tool.description.toLowerCase().includes(search)) ||
                 (tool.mcp_server_name && tool.mcp_server_name.toLowerCase().includes(search))
             );
+        },
+        folderDisplayName() {
+            // 优先使用传入的文件夹名称
+            if (this.currentFolderName) {
+                return this.currentFolderName;
+            }
+            // 如果没有文件夹 ID，显示根目录
+            if (!this.currentFolderId) {
+                return this.tm('form.rootFolder');
+            }
+            // 否则显示文件夹 ID（作为备用）
+            return this.currentFolderId;
         }
     },
 
@@ -273,6 +308,8 @@ export default {
                     this.initFormWithPersona(this.editingPersona);
                 } else {
                     this.initForm();
+                    // 只在创建新人格时加载已存在的人格列表
+                    this.loadExistingPersonaIds();
                 }
                 this.loadMcpServers();
                 this.loadTools();
@@ -310,7 +347,8 @@ export default {
                 persona_id: '',
                 system_prompt: '',
                 begin_dialogs: [],
-                tools: []
+                tools: [],
+                folder_id: this.currentFolderId
             };
             this.toolSelectValue = '0';
             this.expandedPanels = [];
@@ -321,7 +359,8 @@ export default {
                 persona_id: persona.persona_id,
                 system_prompt: persona.system_prompt,
                 begin_dialogs: [...(persona.begin_dialogs || [])],
-                tools: persona.tools === null ? null : [...(persona.tools || [])]
+                tools: persona.tools === null ? null : [...(persona.tools || [])],
+                folder_id: persona.folder_id
             };
             // 根据 tools 的值设置 toolSelectValue
             this.toolSelectValue = persona.tools === null ? '0' : '1';
@@ -363,6 +402,18 @@ export default {
             }
         },
 
+        async loadExistingPersonaIds() {
+            try {
+                const response = await axios.get('/api/persona/list');
+                if (response.data.status === 'ok') {
+                    this.existingPersonaIds = (response.data.data || []).map(p => p.persona_id);
+                }
+            } catch (error) {
+                // 加载失败不影响表单使用，只是无法进行前端重名校验
+                this.existingPersonaIds = [];
+            }
+        },
+
         async savePersona() {
             if (!this.formValid) return;
 

dashboard/src/components/shared/PersonaSelector.vue

@@ -1,84 +1,46 @@
 <template>
-  <div class="d-flex align-center justify-space-between">
-    <span v-if="!modelValue" style="color: rgb(var(--v-theme-primaryText));">
-      {{ tm('personaSelector.notSelected') }}
-    </span>
-    <span v-else>
-      {{ modelValue === 'default' ? tm('personaSelector.defaultPersona') : modelValue }}
-    </span>
-    <v-btn size="small" color="primary" variant="tonal" @click="openDialog">
-      {{ buttonText || tm('personaSelector.buttonText') }}
-    </v-btn>
-  </div>
-
-  <!-- Persona Selection Dialog -->
-  <v-dialog v-model="dialog" max-width="600px">
-    <v-card>
-      <v-card-title class="text-h3 py-4" style="font-weight: normal;">
-        {{ tm('personaSelector.dialogTitle') }}
-      </v-card-title>
-      
-      <v-card-text class="pa-2" style="max-height: 400px; overflow-y: auto;">
-        <v-progress-linear v-if="loading" indeterminate color="primary"></v-progress-linear>
-        
-        <v-list v-if="!loading && personaList.length > 0" density="compact">
-          <v-list-item
-            v-for="persona in personaList"
-            :key="persona.persona_id"
-            :value="persona.persona_id"
-            @click="selectPersona(persona)"
-            :active="selectedPersona === persona.persona_id"
-            rounded="md"
-            class="ma-1">
-            <v-list-item-title>{{ persona.persona_id === 'default' ? tm('personaSelector.defaultPersona') : persona.persona_id }}</v-list-item-title>
-            <v-list-item-subtitle>
-              {{ persona.system_prompt ? persona.system_prompt.substring(0, 50) + '...' : tm('personaSelector.noDescription') }}
-            </v-list-item-subtitle>
-            
-            <template v-slot:append>
-              <v-icon v-if="selectedPersona === persona.persona_id" color="primary">mdi-check-circle</v-icon>
-            </template>
-          </v-list-item>
-        </v-list>
-        
-        <div v-else-if="!loading && personaList.length === 0" class="text-center py-8">
-          <v-icon size="64" color="grey-lighten-1">mdi-account-off</v-icon>
-          <p class="text-grey mt-4">{{ tm('personaSelector.noPersonas') }}</p>
-        </div>
-      </v-card-text>
-      
-      <v-card-actions class="pa-4">
-        <v-btn variant="text" color="primary" prepend-icon="mdi-plus" @click="openCreatePersona">
-          {{ tm('personaSelector.createPersona') }}
-        </v-btn>
-        <v-spacer></v-spacer>
-        <v-btn variant="text" @click="cancelSelection">{{ t('core.common.cancel') }}</v-btn>
-        <v-btn
-          color="primary"
-          @click="confirmSelection"
-          :disabled="!selectedPersona">
-          {{ t('core.common.confirm') }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+  <BaseFolderItemSelector
+    :model-value="modelValue"
+    @update:model-value="handleUpdate"
+    :folder-tree="folderTree"
+    :items="currentPersonas as any"
+    :tree-loading="treeLoading"
+    :items-loading="itemsLoading"
+    :labels="labels"
+    :show-create-button="true"
+    :default-item="defaultPersona"
+    item-id-field="persona_id"
+    item-name-field="persona_id"
+    item-description-field="system_prompt"
+    :display-value-formatter="formatDisplayValue"
+    @navigate="handleNavigate"
+    @create="openCreatePersona"
+  />
 
   <!-- 创建人格对话框 -->
-  <PersonaForm 
+  <PersonaForm
     v-model="showCreateDialog"
-    :editing-persona="null"
-    :mcp-servers="mcpServers"
-    :available-tools="availableTools"
-    :loading-tools="loadingTools"
+    :editing-persona="undefined"
+    :current-folder-id="currentFolderId ?? undefined"
+    :current-folder-name="currentFolderName ?? undefined"
     @saved="handlePersonaCreated"
     @error="handleError" />
 </template>
 
-<script setup>
-import { ref, watch } from 'vue'
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
 import axios from 'axios'
+import BaseFolderItemSelector from '@/components/folder/BaseFolderItemSelector.vue'
 import PersonaForm from './PersonaForm.vue'
 import { useI18n, useModuleI18n } from '@/i18n/composables'
+import type { FolderTreeNode, SelectableItem } from '@/components/folder/types'
+
+interface Persona {
+  persona_id: string
+  system_prompt: string
+  folder_id?: string | null
+  [key: string]: any
+}
 
 const props = defineProps({
   modelValue: {
@@ -95,91 +57,142 @@ const emit = defineEmits(['update:modelValue'])
 const { t } = useI18n()
 const { tm } = useModuleI18n('core.shared')
 
-const dialog = ref(false)
-const personaList = ref([])
-const loading = ref(false)
-const selectedPersona = ref('')
+// 状态
+const folderTree = ref<FolderTreeNode[]>([])
+const currentPersonas = ref<Persona[]>([])
+const treeLoading = ref(false)
+const itemsLoading = ref(false)
 const showCreateDialog = ref(false)
+const currentFolderId = ref<string | null>(null)
 
-// 监听 modelValue 变化，同步到 selectedPersona
-watch(() => props.modelValue, (newValue) => {
-  selectedPersona.value = newValue || ''
-}, { immediate: true })
-
-async function openDialog() {
-  selectedPersona.value = props.modelValue || ''
-  dialog.value = true
-  await loadPersonas()
+// 默认人格
+const defaultPersona: SelectableItem = {
+  id: 'default',
+  persona_id: 'default',
+  name: tm('personaSelector.defaultPersona'),
+  system_prompt: 'You are a helpful and friendly assistant.'
 }
 
-async function loadPersonas() {
-  loading.value = true
+// 递归查找文件夹名称
+function findFolderName(nodes: FolderTreeNode[], folderId: string): string | null {
+  for (const node of nodes) {
+    if (node.folder_id === folderId) {
+      return node.name
+    }
+    if (node.children && node.children.length > 0) {
+      const found = findFolderName(node.children, folderId)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// 当前文件夹名称
+const currentFolderName = computed(() => {
+  if (!currentFolderId.value) {
+    return null // 根目录，PersonaForm 会使用 tm('form.rootFolder')
+  }
+  return findFolderName(folderTree.value, currentFolderId.value)
+})
+
+// 标签配置
+const labels = computed(() => ({
+  dialogTitle: tm('personaSelector.dialogTitle'),
+  notSelected: tm('personaSelector.notSelected'),
+  buttonText: props.buttonText || tm('personaSelector.buttonText'),
+  noItems: tm('personaSelector.noPersonas'),
+  defaultItem: tm('personaSelector.defaultPersona'),
+  noDescription: tm('personaSelector.noDescription'),
+  createButton: tm('personaSelector.createPersona'),
+  confirmButton: t('core.common.confirm'),
+  cancelButton: t('core.common.cancel'),
+  rootFolder: tm('personaSelector.rootFolder') || '全部人格',
+  emptyFolder: tm('personaSelector.emptyFolder') || '此文件夹为空'
+}))
+
+// 格式化显示值
+function formatDisplayValue(value: string): string {
+  if (value === 'default') {
+    return tm('personaSelector.defaultPersona')
+  }
+  return value
+}
+
+// 处理值更新
+function handleUpdate(value: string) {
+  emit('update:modelValue', value)
+}
+
+// 加载文件夹树
+async function loadFolderTree() {
+  treeLoading.value = true
   try {
-    const response = await axios.get('/api/persona/list')
+    const response = await axios.get('/api/persona/folder/tree')
     if (response.data.status === 'ok') {
-      const personas = response.data.data || []
-      // 添加默认人格选项
-      personaList.value = [
-        {
-          persona_id: 'default',
-          system_prompt: 'You are a helpful and friendly assistant.'
-        },
-        ...personas
-      ]
+      folderTree.value = response.data.data || []
     }
   } catch (error) {
-    console.error('加载人格列表失败:', error)
-    personaList.value = [
-      {
-        persona_id: 'default',
-        system_prompt: 'You are a helpful and friendly assistant.'
-      }
-    ]
+    console.error('加载文件夹树失败:', error)
+    folderTree.value = []
   } finally {
-    loading.value = false
+    treeLoading.value = false
   }
 }
 
-function selectPersona(persona) {
-  selectedPersona.value = persona.persona_id
+// 加载指定文件夹的人格
+async function loadPersonasInFolder(folderId: string | null) {
+  itemsLoading.value = true
+  try {
+    // 使用 /api/persona/list 端点，通过 folder_id 参数筛选
+    const params = new URLSearchParams()
+    if (folderId !== null) {
+      params.set('folder_id', folderId)
+    } else {
+      // 根目录：folder_id 为空字符串表示获取根目录下的人格
+      params.set('folder_id', '')
+    }
+    const response = await axios.get(`/api/persona/list?${params.toString()}`)
+    if (response.data.status === 'ok') {
+      currentPersonas.value = response.data.data || []
+    }
+  } catch (error) {
+    console.error('加载人格列表失败:', error)
+    currentPersonas.value = []
+  } finally {
+    itemsLoading.value = false
+  }
 }
 
-function confirmSelection() {
-  emit('update:modelValue', selectedPersona.value)
-  dialog.value = false
-}
-
-function cancelSelection() {
-  selectedPersona.value = props.modelValue || ''
-  dialog.value = false
+// 处理文件夹导航
+async function handleNavigate(folderId: string | null) {
+  currentFolderId.value = folderId
+  await loadPersonasInFolder(folderId)
 }
 
+// 打开创建人格对话框
 function openCreatePersona() {
   showCreateDialog.value = true
 }
 
-async function handlePersonaCreated(message) {
+// 人格创建成功
+async function handlePersonaCreated(message: string) {
   console.log('人格创建成功:', message)
   showCreateDialog.value = false
-  // 刷新人格列表
-  await loadPersonas()
+  // 刷新当前文件夹的人格列表
+  await loadPersonasInFolder(currentFolderId.value)
 }
 
-function handleError(error) {
+// 错误处理
+function handleError(error: string) {
   console.error('创建人格失败:', error)
 }
+
+// 初始化加载文件夹树
+onMounted(() => {
+  loadFolderTree()
+})
 </script>
 
 <style scoped>
-.v-list-item {
-  transition: all 0.2s 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);
-}
+/* 样式继承自 BaseFolderItemSelector */
 </style>

dashboard/src/i18n/locales/en-US/core/shared.json

@@ -57,7 +57,9 @@
     "createPersona": "Create New Persona",
     "cancelSelection": "Cancel",
     "confirmSelection": "Confirm Selection",
-    "selectPersonaPool": "Select Persona Pool..."
+    "selectPersonaPool": "Select Persona Pool...",
+    "rootFolder": "All Personas",
+    "emptyFolder": "This folder is empty"
   },
   "t2iTemplateEditor": {
     "buttonText": "Customize T2I Template",

dashboard/src/i18n/locales/en-US/features/persona.json

@@ -9,6 +9,7 @@
     "delete": "Delete",
     "cancel": "Cancel",
     "save": "Save",
+    "move": "Move",
     "addDialogPair": "Add Dialog Pair"
   },
   "labels": {
@@ -36,7 +37,9 @@
     "noToolsFound": "No matching tools found",
     "loadingTools": "Loading tools...",
     "allToolsAvailable": "Use all available tools",
-    "noToolsSelected": "No tools selected"
+    "noToolsSelected": "No tools selected",
+    "createInFolder": "Will be created in \"{folder}\"",
+    "rootFolder": "All Personas"
   },
   "dialog": {
     "create": {
@@ -48,13 +51,16 @@
   },
   "empty": {
     "title": "No Persona Configured",
-    "description": "Create your first persona to start using personalized chatbots"
+    "description": "Create your first persona to start using personalized chatbots",
+    "folderEmpty": "This folder is empty",
+    "folderEmptyDescription": "Create a new persona or folder to get started"
   },
   "validation": {
     "required": "This field is required",
     "minLength": "Minimum {min} characters required",
     "alphanumeric": "Only letters, numbers, underscores and hyphens are allowed",
-    "dialogRequired": "{type} cannot be empty"
+    "dialogRequired": "{type} cannot be empty",
+    "personaIdExists": "This persona name already exists"
   },
   "messages": {
     "loadError": "Failed to load persona list",
@@ -63,5 +69,63 @@
     "deleteConfirm": "Are you sure you want to delete persona \"{id}\"? This action cannot be undone.",
     "deleteSuccess": "Deleted successfully",
     "deleteError": "Delete failed"
+  },
+  "persona": {
+    "personasTitle": "Personas",
+    "toolsCount": "tools",
+    "contextMenu": {
+      "moveTo": "Move to..."
+    },
+    "messages": {
+      "moveSuccess": "Persona moved successfully",
+      "moveError": "Failed to move persona"
+    }
+  },
+  "folder": {
+    "sidebarTitle": "Folders",
+    "rootFolder": "Root",
+    "foldersTitle": "Folders",
+    "noFolders": "No folders yet",
+    "createButton": "New Folder",
+    "searchPlaceholder": "Search folders...",
+    "form": {
+      "name": "Folder Name",
+      "description": "Description (optional)"
+    },
+    "validation": {
+      "nameRequired": "Folder name is required"
+    },
+    "contextMenu": {
+      "open": "Open",
+      "rename": "Rename",
+      "moveTo": "Move to...",
+      "delete": "Delete"
+    },
+    "createDialog": {
+      "title": "Create New Folder",
+      "createButton": "Create"
+    },
+    "renameDialog": {
+      "title": "Rename Folder"
+    },
+    "deleteDialog": {
+      "title": "Delete Folder",
+      "message": "Are you sure you want to delete folder \"{name}\"?",
+      "warning": "All personas inside will be moved to root folder."
+    },
+    "messages": {
+      "createSuccess": "Folder created successfully",
+      "createError": "Failed to create folder",
+      "renameSuccess": "Folder renamed successfully",
+      "renameError": "Failed to rename folder",
+      "deleteSuccess": "Folder deleted successfully",
+      "deleteError": "Failed to delete folder"
+    }
+  },
+  "moveDialog": {
+    "title": "Move to Folder",
+    "description": "Select a destination folder for \"{name}\"",
+    "success": "Moved successfully",
+    "error": "Failed to move"
   }
 }

dashboard/src/i18n/locales/zh-CN/core/shared.json

@@ -57,7 +57,9 @@
     "createPersona": "创建新人格",
     "cancelSelection": "取消",
     "confirmSelection": "确认选择",
-    "selectPersonaPool": "选择人格池..."
+    "selectPersonaPool": "选择人格池...",
+    "rootFolder": "全部人格",
+    "emptyFolder": "此文件夹为空"
   },
   "t2iTemplateEditor": {
     "buttonText": "自定义 T2I 模板",

dashboard/src/i18n/locales/zh-CN/features/persona.json

@@ -9,6 +9,7 @@
     "delete": "删除",
     "cancel": "取消",
     "save": "保存",
+    "move": "移动",
     "addDialogPair": "添加对话对"
   },
   "labels": {
@@ -36,7 +37,9 @@
     "noToolsFound": "未找到匹配的工具",
     "loadingTools": "正在加载工具...",
     "allToolsAvailable": "使用所有可用工具",
-    "noToolsSelected": "未选择任何工具"
+    "noToolsSelected": "未选择任何工具",
+    "createInFolder": "将在「{folder}」中创建",
+    "rootFolder": "全部人格"
   },
   "dialog": {
     "create": {
@@ -48,13 +51,16 @@
   },
   "empty": {
     "title": "暂无人格配置",
-    "description": "来创建一个吧！"
+    "description": "来创建一个吧！",
+    "folderEmpty": "此文件夹为空",
+    "folderEmptyDescription": "创建新的人格或文件夹开始使用"
   },
   "validation": {
     "required": "此字段为必填项",
     "minLength": "最少需要 {min} 个字符",
     "alphanumeric": "只能包含字母、数字、下划线和连字符",
-    "dialogRequired": "{type}不能为空"
+    "dialogRequired": "{type}不能为空",
+    "personaIdExists": "该人格名称已存在"
   },
   "messages": {
     "loadError": "加载人格列表失败",
@@ -63,5 +69,63 @@
     "deleteConfirm": "确定要删除人格 \"{id}\" 吗？此操作不可撤销。",
     "deleteSuccess": "删除成功",
     "deleteError": "删除失败"
+  },
+  "persona": {
+    "personasTitle": "人格",
+    "toolsCount": "个工具",
+    "contextMenu": {
+      "moveTo": "移动到..."
+    },
+    "messages": {
+      "moveSuccess": "人格移动成功",
+      "moveError": "移动人格失败"
+    }
+  },
+  "folder": {
+    "sidebarTitle": "文件夹",
+    "rootFolder": "根目录",
+    "foldersTitle": "文件夹",
+    "noFolders": "暂无文件夹",
+    "createButton": "新建文件夹",
+    "searchPlaceholder": "搜索文件夹...",
+    "form": {
+      "name": "文件夹名称",
+      "description": "描述（可选）"
+    },
+    "validation": {
+      "nameRequired": "文件夹名称不能为空"
+    },
+    "contextMenu": {
+      "open": "打开",
+      "rename": "重命名",
+      "moveTo": "移动到...",
+      "delete": "删除"
+    },
+    "createDialog": {
+      "title": "创建新文件夹",
+      "createButton": "创建"
+    },
+    "renameDialog": {
+      "title": "重命名文件夹"
+    },
+    "deleteDialog": {
+      "title": "删除文件夹",
+      "message": "确定要删除文件夹 \"{name}\" 吗？",
+      "warning": "文件夹内的所有人格将被移动到根目录。"
+    },
+    "messages": {
+      "createSuccess": "文件夹创建成功",
+      "createError": "创建文件夹失败",
+      "renameSuccess": "文件夹重命名成功",
+      "renameError": "重命名文件夹失败",
+      "deleteSuccess": "文件夹删除成功",
+      "deleteError": "删除文件夹失败"
+    }
+  },
+  "moveDialog": {
+    "title": "移动到文件夹",
+    "description": "为 \"{name}\" 选择目标文件夹",
+    "success": "移动成功",
+    "error": "移动失败"
   }
 }

dashboard/src/stores/personaStore.ts

@@ -0,0 +1,333 @@
+/**
+ * Persona 文件夹管理 Store
+ */
+import { defineStore } from 'pinia';
+import axios from 'axios';
+
+// 类型定义
+export interface PersonaFolder {
+  folder_id: string;
+  name: string;
+  parent_id: string | null;
+  description: string | null;
+  sort_order: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Persona {
+  persona_id: string;
+  system_prompt: string;
+  begin_dialogs: string[];
+  tools: string[] | null;
+  folder_id: string | null;
+  sort_order: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface FolderTreeNode {
+  folder_id: string;
+  name: string;
+  parent_id: string | null;
+  description: string | null;
+  sort_order: number;
+  children: FolderTreeNode[];
+}
+
+export interface ReorderItem {
+  id: string;
+  type: 'persona' | 'folder';
+  sort_order: number;
+}
+
+export const usePersonaStore = defineStore({
+  id: 'persona',
+  state: () => ({
+    folderTree: [] as FolderTreeNode[],
+    currentFolderId: null as string | null,
+    currentFolders: [] as PersonaFolder[],
+    currentPersonas: [] as Persona[],
+    breadcrumbPath: [] as FolderTreeNode[],
+    expandedFolderIds: [] as string[], // Store expanded folder IDs
+    loading: false,
+    treeLoading: false,
+  }),
+
+  getters: {
+    // 当前文件夹名称
+    currentFolderName(): string {
+      if (this.breadcrumbPath.length === 0) {
+        return '根目录';
+      }
+      return this.breadcrumbPath[this.breadcrumbPath.length - 1]?.name || '根目录';
+    },
+  },
+
+  actions: {
+    /**
+     * Toggle folder expansion state
+     */
+    toggleFolderExpansion(folderId: string) {
+      const index = this.expandedFolderIds.indexOf(folderId);
+      if (index === -1) {
+        this.expandedFolderIds.push(folderId);
+      } else {
+        this.expandedFolderIds.splice(index, 1);
+      }
+    },
+
+    /**
+     * Set folder expansion state
+     */
+    setFolderExpansion(folderId: string, expanded: boolean) {
+      const index = this.expandedFolderIds.indexOf(folderId);
+      if (expanded && index === -1) {
+        this.expandedFolderIds.push(folderId);
+      } else if (!expanded && index !== -1) {
+        this.expandedFolderIds.splice(index, 1);
+      }
+    },
+
+    /**
+     * 加载文件夹树形结构
+     */
+    async loadFolderTree(): Promise<void> {
+      this.treeLoading = true;
+      try {
+        const response = await axios.get('/api/persona/folder/tree');
+        if (response.data.status === 'ok') {
+          this.folderTree = response.data.data || [];
+        } else {
+          throw new Error(response.data.message || '获取文件夹树失败');
+        }
+      } finally {
+        this.treeLoading = false;
+      }
+    },
+
+    /**
+     * 导航到指定文件夹
+     */
+    async navigateToFolder(folderId: string | null): Promise<void> {
+      this.loading = true;
+      try {
+        this.currentFolderId = folderId;
+
+        // 并行加载子文件夹和 Persona
+        const [foldersRes, personasRes] = await Promise.all([
+          axios.get('/api/persona/folder/list', {
+            params: { parent_id: folderId ?? '' }
+          }),
+          axios.get('/api/persona/list', {
+            params: { folder_id: folderId ?? '' }
+          }),
+        ]);
+
+        if (foldersRes.data.status === 'ok') {
+          this.currentFolders = foldersRes.data.data || [];
+        }
+
+        if (personasRes.data.status === 'ok') {
+          this.currentPersonas = personasRes.data.data || [];
+        }
+
+        // 更新面包屑
+        this.updateBreadcrumb(folderId);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    /**
+     * 更新面包屑路径
+     */
+    updateBreadcrumb(folderId: string | null): void {
+      if (folderId === null) {
+        this.breadcrumbPath = [];
+        return;
+      }
+
+      // 从树中查找路径
+      const path: FolderTreeNode[] = [];
+      const findPath = (nodes: FolderTreeNode[], targetId: string): boolean => {
+        for (const node of nodes) {
+          if (node.folder_id === targetId) {
+            path.push(node);
+            return true;
+          }
+          if (node.children.length > 0 && findPath(node.children, targetId)) {
+            path.unshift(node);
+            return true;
+          }
+        }
+        return false;
+      };
+
+      findPath(this.folderTree, folderId);
+      this.breadcrumbPath = path;
+    },
+
+    /**
+     * 刷新当前文件夹内容
+     */
+    async refreshCurrentFolder(): Promise<void> {
+      await this.navigateToFolder(this.currentFolderId);
+    },
+
+    /**
+     * 移动 Persona 到文件夹
+     */
+    async movePersonaToFolder(personaId: string, targetFolderId: string | null): Promise<void> {
+      const response = await axios.post('/api/persona/move', {
+        persona_id: personaId,
+        folder_id: targetFolderId
+      });
+
+      if (response.data.status !== 'ok') {
+        throw new Error(response.data.message || '移动人格失败');
+      }
+
+      // 刷新当前文件夹内容和文件夹树
+      await Promise.all([
+        this.refreshCurrentFolder(),
+        this.loadFolderTree(),
+      ]);
+    },
+
+    /**
+     * 移动文件夹到另一个文件夹
+     */
+    async moveFolderToFolder(folderId: string, targetParentId: string | null): Promise<void> {
+      const response = await axios.post('/api/persona/folder/update', {
+        folder_id: folderId,
+        parent_id: targetParentId
+      });
+
+      if (response.data.status !== 'ok') {
+        throw new Error(response.data.message || '移动文件夹失败');
+      }
+
+      // 刷新当前文件夹内容和文件夹树
+      await Promise.all([
+        this.refreshCurrentFolder(),
+        this.loadFolderTree(),
+      ]);
+    },
+
+    /**
+     * 创建文件夹
+     */
+    async createFolder(data: {
+      name: string;
+      parent_id?: string | null;
+      description?: string;
+    }): Promise<PersonaFolder> {
+      const response = await axios.post('/api/persona/folder/create', {
+        ...data,
+        parent_id: data.parent_id ?? this.currentFolderId,
+      });
+
+      if (response.data.status !== 'ok') {
+        throw new Error(response.data.message || '创建文件夹失败');
+      }
+
+      // 刷新当前文件夹内容和文件夹树
+      await Promise.all([
+        this.refreshCurrentFolder(),
+        this.loadFolderTree(),
+      ]);
+
+      return response.data.data.folder;
+    },
+
+    /**
+     * 更新文件夹
+     */
+    async updateFolder(data: {
+      folder_id: string;
+      name?: string;
+      description?: string;
+    }): Promise<void> {
+      const response = await axios.post('/api/persona/folder/update', data);
+
+      if (response.data.status !== 'ok') {
+        throw new Error(response.data.message || '更新文件夹失败');
+      }
+
+      // 刷新当前文件夹内容和文件夹树
+      await Promise.all([
+        this.refreshCurrentFolder(),
+        this.loadFolderTree(),
+      ]);
+    },
+
+    /**
+     * 删除文件夹
+     */
+    async deleteFolder(folderId: string): Promise<void> {
+      const response = await axios.post('/api/persona/folder/delete', {
+        folder_id: folderId
+      });
+
+      if (response.data.status !== 'ok') {
+        throw new Error(response.data.message || '删除文件夹失败');
+      }
+
+      // 刷新当前文件夹内容和文件夹树
+      await Promise.all([
+        this.refreshCurrentFolder(),
+        this.loadFolderTree(),
+      ]);
+    },
+
+    /**
+     * 删除 Persona
+     */
+    async deletePersona(personaId: string): Promise<void> {
+      const response = await axios.post('/api/persona/delete', {
+        persona_id: personaId
+      });
+
+      if (response.data.status !== 'ok') {
+        throw new Error(response.data.message || '删除人格失败');
+      }
+
+      // 刷新当前文件夹内容
+      await this.refreshCurrentFolder();
+    },
+
+    /**
+     * 批量更新排序
+     */
+    async reorderItems(items: ReorderItem[]): Promise<void> {
+      const response = await axios.post('/api/persona/reorder', { items });
+
+      if (response.data.status !== 'ok') {
+        throw new Error(response.data.message || '更新排序失败');
+      }
+
+      // 刷新当前文件夹内容
+      await this.refreshCurrentFolder();
+    },
+
+    /**
+     * 根据文件夹 ID 查找树节点
+     */
+    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.length > 0) {
+            const found = findNode(node.children);
+            if (found) return found;
+          }
+        }
+        return null;
+      };
+      return findNode(this.folderTree);
+    },
+  }
+});

dashboard/src/views/PersonaPage.vue

@@ -2,277 +2,38 @@
     <div class="persona-page">
         <v-container fluid class="pa-0">
             <!-- 页面标题 -->
-            <v-row class="d-flex justify-space-between align-center px-4 py-3 pb-8">
+            <v-row class="d-flex justify-space-between align-center px-4 py-3 pb-6">
                 <div>
                     <h1 class="text-h1 font-weight-bold mb-2">
                         <v-icon color="black" class="me-2">mdi-heart</v-icon>{{ t('core.navigation.persona') }}
                     </h1>
-                    <p class="text-subtitle-1 text-medium-emphasis mb-4">
+                    <p class="text-subtitle-1 text-medium-emphasis mb-0">
                         {{ tm('page.description') }}
                     </p>
                 </div>
-                <div>
-                    <v-btn color="primary" variant="tonal" prepend-icon="mdi-plus" @click="openCreateDialog"
-                        rounded="xl" size="x-large">
-                        {{ tm('buttons.create') }}
-                    </v-btn>
-                </div>
             </v-row>
 
-
-            <!-- 人格卡片网格 -->
-            <v-row>
-                <v-col v-for="persona in personas" :key="persona.persona_id" cols="12" md="6" lg="4" xl="3">
-                    <v-card class="persona-card" rounded="md" @click="viewPersona(persona)">
-                        <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="editPersona(persona)">
-                                        <v-list-item-title>
-                                            <v-icon class="mr-2" size="small">mdi-pencil</v-icon>
-                                            {{ tm('buttons.edit') }}
-                                        </v-list-item-title>
-                                    </v-list-item>
-                                    <v-list-item @click="deletePersona(persona)" class="text-error">
-                                        <v-list-item-title>
-                                            <v-icon class="mr-2" size="small">mdi-delete</v-icon>
-                                            {{ 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" v-if="persona.begin_dialogs && persona.begin_dialogs.length > 0">
-                                <v-chip size="small" color="secondary" variant="tonal" prepend-icon="mdi-chat">
-                                    {{ tm('labels.presetDialogs', { count: persona.begin_dialogs.length / 2 }) }}
-                                </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>
-                </v-col>
-
-                <!-- 空状态 -->
-                <v-col v-if="personas.length === 0 && !loading" cols="12">
-                    <v-card class="text-center pa-8" elevation="0">
-                        <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-account-group</v-icon>
-                        <h3 class="text-h5 mb-2">{{ tm('empty.title') }}</h3>
-                        <p class="text-body-1 text-medium-emphasis mb-4">{{ tm('empty.description') }}</p>
-                        <v-btn color="primary" variant="tonal" prepend-icon="mdi-plus" @click="openCreateDialog">
-                            {{ tm('buttons.createFirst') }}
-                        </v-btn>
-                    </v-card>
-                </v-col>
-            </v-row>
-
-            <!-- 加载状态 -->
-            <v-row v-if="loading">
-                <v-col v-for="n in 6" :key="n" cols="12" md="6" lg="4" xl="3">
-                    <v-skeleton-loader type="card" rounded="lg"></v-skeleton-loader>
-                </v-col>
-            </v-row>
+            <!-- 主容器组件 -->
+            <PersonaManager />
         </v-container>
-
-        <!-- 创建/编辑人格对话框 -->
-        <PersonaForm 
-            v-model="showPersonaDialog"
-            :editing-persona="editingPersona"
-            @saved="handlePersonaSaved"
-            @error="showError" />
-
-        <!-- 查看人格详情对话框 -->
-        <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>
-
-        <!-- 消息提示 -->
-        <v-snackbar :timeout="3000" elevation="24" :color="messageType" v-model="showMessage" location="top">
-            {{ message }}
-        </v-snackbar>
     </div>
 </template>
 
 <script>
-import axios from 'axios';
 import { useI18n, useModuleI18n } from '@/i18n/composables';
-import PersonaForm from '@/components/shared/PersonaForm.vue';
+import { PersonaManager } from '@/views/persona';
 
 export default {
     name: 'PersonaPage',
     components: {
-        PersonaForm
+        PersonaManager
     },
     setup() {
         const { t } = useI18n();
         const { tm } = useModuleI18n('features/persona');
         return { t, tm };
-    },
-    data() {
-        return {
-            personas: [],
-            loading: false,
-            showPersonaDialog: false,
-            showViewDialog: false,
-            editingPersona: null,
-            viewingPersona: null,
-            showMessage: false,
-            message: '',
-            messageType: 'success'
-        }
-    },
-
-    mounted() {
-        this.loadPersonas();
-    },
-
-    methods: {
-        async loadPersonas() {
-            this.loading = true;
-            try {
-                const response = await axios.get('/api/persona/list');
-                if (response.data.status === 'ok') {
-                    this.personas = response.data.data;
-                } else {
-                    this.showError(response.data.message || this.tm('messages.loadError'));
-                }
-            } catch (error) {
-                this.showError(error.response?.data?.message || this.tm('messages.loadError'));
-            }
-            this.loading = false;
-        },
-
-        openCreateDialog() {
-            this.editingPersona = null;
-            this.showPersonaDialog = true;
-        },
-
-        editPersona(persona) {
-            this.editingPersona = persona;
-            this.showPersonaDialog = true;
-        },
-
-        viewPersona(persona) {
-            this.viewingPersona = persona;
-            this.showViewDialog = true;
-        },
-
-        handlePersonaSaved(message) {
-            this.showSuccess(message);
-            this.loadPersonas();
-        },
-
-        async deletePersona(persona) {
-            if (!confirm(this.tm('messages.deleteConfirm', { id: persona.persona_id }))) {
-                return;
-            }
-
-            try {
-                const response = await axios.post('/api/persona/delete', {
-                    persona_id: persona.persona_id
-                });
-
-                if (response.data.status === 'ok') {
-                    this.showSuccess(response.data.message || this.tm('messages.deleteSuccess'));
-                    await this.loadPersonas();
-                } else {
-                    this.showError(response.data.message || this.tm('messages.deleteError'));
-                }
-            } catch (error) {
-                this.showError(error.response?.data?.message || this.tm('messages.deleteError'));
-            }
-        },
-
-        truncateText(text, maxLength) {
-            if (!text) return '';
-            return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
-        },
-
-        formatDate(dateString) {
-            if (!dateString) return '';
-            return new Date(dateString).toLocaleString();
-        },
-
-        showSuccess(message) {
-            this.message = message;
-            this.messageType = 'success';
-            this.showMessage = true;
-        },
-
-        showError(message) {
-            this.message = message;
-            this.messageType = 'error';
-            this.showMessage = true;
-        }
     }
-}
+};
 </script>
 
 <style scoped>
@@ -280,43 +41,4 @@ export default {
     padding: 20px;
     padding-top: 8px;
 }
-
-.persona-card {
-    transition: all 0.3s ease;
-    height: 100%;
-    cursor: pointer;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-}
 </style>

dashboard/src/views/persona/CreateFolderDialog.vue

@@ -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('folder.createDialog.createButton')
+            };
+        }
+    },
+    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>

dashboard/src/views/persona/FolderBreadcrumb.vue

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

dashboard/src/views/persona/FolderCard.vue

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

dashboard/src/views/persona/FolderTree.vue

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

dashboard/src/views/persona/FolderTreeNode.vue

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

dashboard/src/views/persona/MoveTargetNode.vue

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

dashboard/src/views/persona/MoveToFolderDialog.vue

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

dashboard/src/views/persona/PersonaCard.vue

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

dashboard/src/views/persona/PersonaManager.vue

@@ -0,0 +1,557 @@
+<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>
+
+                <!-- 加载状态 - 只有加载超过阈值才显示骨架屏 -->
+                <v-fade-transition>
+                    <div v-if="showSkeleton" 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>
+                </v-fade-transition>
+
+                <!-- 内容区域 -->
+                <div v-if="!loading">
+                    <!-- 子文件夹区域 -->
+                    <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" :current-folder-name="currentFolderName ?? 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">
+            <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',
+
+            // 骨架屏延迟显示控制
+            showSkeleton: false,
+            skeletonTimer: null as ReturnType<typeof setTimeout> | null
+        };
+    },
+    computed: {
+        ...mapState(usePersonaStore, ['folderTree', 'currentFolderId', 'currentFolders', 'currentPersonas', 'loading']),
+        currentFolderName(): string | null {
+            if (!this.currentFolderId) {
+                return null; // 根目录，PersonaForm 会使用 tm('form.rootFolder')
+            }
+            // 递归查找文件夹名称
+            const findName = (nodes: FolderTreeNode[], id: string): string | null => {
+                for (const node of nodes) {
+                    if (node.folder_id === id) {
+                        return node.name;
+                    }
+                    if (node.children && node.children.length > 0) {
+                        const found = findName(node.children, id);
+                        if (found) return found;
+                    }
+                }
+                return null;
+            };
+            return findName(this.folderTree, this.currentFolderId);
+        }
+    },
+    watch: {
+        // 监听 loading 状态变化，实现延迟显示骨架屏
+        loading: {
+            handler(newVal: boolean) {
+                if (newVal) {
+                    // 加载开始时，延迟 150ms 后才显示骨架屏
+                    // 如果加载在 150ms 内完成，则不显示骨架屏，避免闪烁
+                    this.skeletonTimer = setTimeout(() => {
+                        if (this.loading) {
+                            this.showSkeleton = true;
+                        }
+                    }, 150);
+                } else {
+                    // 加载结束，立即隐藏骨架屏并清除定时器
+                    if (this.skeletonTimer) {
+                        clearTimeout(this.skeletonTimer);
+                        this.skeletonTimer = null;
+                    }
+                    this.showSkeleton = false;
+                }
+            },
+            immediate: true
+        }
+    },
+    beforeUnmount() {
+        // 组件卸载时清除定时器
+        if (this.skeletonTimer) {
+            clearTimeout(this.skeletonTimer);
+        }
+    },
+    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>

dashboard/src/views/persona/index.ts

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