dashboard/src/components/shared/PersonaForm.vue

<template>
    <v-dialog v-model="showDialog" :max-width="$vuetify.display.smAndDown ? undefined : '1200px'" scrollable>
        <v-card class="persona-form-card" :class="{ 'persona-form-card-mobile': $vuetify.display.smAndDown }">
            <v-card-title class="persona-form-title text-h2 px-6 pt-6 pl-6">
                {{ editingPersona ? tm('dialog.edit.title') : tm('dialog.create.title') }}
            </v-card-title>

            <v-card-text class="persona-form-content">
                <!-- 创建位置提示 -->
                <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-row class="persona-form-layout">
                        <v-col cols="12" md="6" class="persona-basic-col">
                            <v-text-field v-model="personaForm.persona_id" :label="tm('form.personaId')"
                                :rules="personaIdRules" :disabled="editingPersona" variant="outlined"
                                density="comfortable" class="mb-4" />

                            <v-textarea v-model="personaForm.system_prompt" :label="tm('form.systemPrompt')"
                                :rules="systemPromptRules" variant="outlined" rows="16" class="mb-4" />

                            <v-textarea
                                v-model="personaForm.custom_error_message"
                                :label="tm('form.customErrorMessage')"
                                :hint="tm('form.customErrorMessageHelp')"
                                variant="outlined"
                                rows="4"
                                persistent-hint
                                clearable
                                class="mb-4"
                            />
                        </v-col>

                        <v-col cols="12" md="6" class="persona-panels-col">
                            <v-expansion-panels v-model="expandedPanels" multiple>
                        <!-- 工具选择面板 -->
                        <v-expansion-panel value="tools">
                            <v-expansion-panel-title>
                                <v-icon class="mr-2">mdi-tools</v-icon>
                                {{ tm('form.tools') }}
                                <v-chip v-if="Array.isArray(personaForm.tools) && personaForm.tools.length > 0"
                                    size="small" color="primary" variant="tonal" class="ml-2">
                                    {{ personaForm.tools.length }}
                                </v-chip>
                            </v-expansion-panel-title>

                            <v-expansion-panel-text>
                                <div class="mb-3">
                                    <p class="text-body-2 text-medium-emphasis">
                                        {{ tm('form.toolsHelp') }}
                                    </p>
                                </div>

                                <v-radio-group class="mt-2" v-model="toolSelectValue" hide-details="true">
                                    <v-radio label="默认使用全部函数工具" value="0"></v-radio>
                                    <v-radio label="选择指定函数工具" value="1">
                                    </v-radio>
                                </v-radio-group>

                                <div v-if="toolSelectValue === '1'" class="mt-3 selected-config-area">

                                    <!-- 工具搜索 -->
                                    <v-text-field v-model="toolSearch" :label="tm('form.searchTools')"
                                        prepend-inner-icon="mdi-magnify" variant="outlined" density="compact"
                                        hide-details clearable class="mb-3" />


                                    <!-- MCP 服务器 -->
                                    <div v-if="mcpServers.length > 0" class="mb-4">
                                        <h4 class="text-subtitle-2 mb-2">{{ tm('form.mcpServersQuickSelect') }}</h4>
                                        <div class="d-flex flex-wrap ga-2">
                                            <v-chip v-for="server in mcpServers" :key="server.name"
                                                :color="isServerSelected(server) ? 'primary' : 'default'"
                                                :variant="isServerSelected(server) ? 'flat' : 'outlined'" size="small"
                                                clickable @click="toggleMcpServer(server)"
                                                :disabled="!server.tools || server.tools.length === 0">
                                                <v-icon start size="small">mdi-server</v-icon>
                                                {{ server.name }}
                                                <v-chip-text v-if="server.tools" class="ml-1">
                                                    ({{ server.tools.length }})
                                                </v-chip-text>
                                            </v-chip>
                                        </div>
                                    </div>

                                    <!-- 工具选择列表 -->
                                    <div v-if="filteredTools.length > 0" class="tools-selection">
                                        <v-virtual-scroll :items="filteredTools" height="300" item-height="72">
                                            <template v-slot:default="{ item }">
                                                <v-list-item :key="item.name" density="comfortable"
                                                    @click="toggleTool(item.name)">
                                                    <template v-slot:prepend>
                                                        <v-checkbox-btn :model-value="isToolSelected(item.name)"
                                                            @click.stop="toggleTool(item.name)" />
                                                    </template>

                                                    <v-list-item-title>
                                                        {{ item.name }}

                                                        <v-chip v-if="item.origin" size="x-small" color="info" class="mr-2"
                                                            variant="tonal">
                                                            {{ item.origin }}
                                                        </v-chip>
                                                        <v-chip v-if="item.origin_name" size="x-small" color="info"
                                                            variant="outlined">
                                                            {{ item.origin_name }}
                                                        </v-chip>

                                                    </v-list-item-title>

                                                    <v-list-item-subtitle v-if="item.description">
                                                        {{ truncateText(item.description, 100) }}
                                                    </v-list-item-subtitle>
                                                </v-list-item>
                                            </template>
                                        </v-virtual-scroll>
                                    </div>

                                    <div v-else-if="!loadingTools && availableTools.length === 0"
                                        class="text-center pa-4">
                                        <v-icon size="48" color="grey-lighten-2" class="mb-2">mdi-tools</v-icon>
                                        <p class="text-body-2 text-medium-emphasis">{{ tm('form.noToolsAvailable')
                                        }}
                                        </p>
                                    </div>

                                    <div v-else-if="!loadingTools && filteredTools.length === 0"
                                        class="text-center pa-4">
                                        <v-icon size="48" color="grey-lighten-2" class="mb-2">mdi-magnify</v-icon>
                                        <p class="text-body-2 text-medium-emphasis">{{ tm('form.noToolsFound') }}
                                        </p>
                                    </div>

                                    <!-- 加载状态 -->
                                    <div v-if="loadingTools" class="text-center pa-4">
                                        <v-progress-circular indeterminate color="primary" />
                                        <p class="text-body-2 text-medium-emphasis mt-2">{{ tm('form.loadingTools')
                                        }}
                                        </p>
                                    </div>

                                    <!-- 已选择的工具 -->
                                    <div class="mt-4">
                                        <h4 class="text-subtitle-2 mb-2">
                                            {{ tm('form.selectedTools') }}
                                            <span v-if="personaForm.tools === null" class="text-success">
                                                ({{ tm('form.allSelected') }})
                                            </span>
                                            <span v-else-if="Array.isArray(personaForm.tools)">
                                                ({{ personaForm.tools.length }})
                                            </span>
                                        </h4>
                                        <div v-if="Array.isArray(personaForm.tools) && personaForm.tools.length > 0"
                                            class="d-flex flex-wrap ga-1" style="max-height: 100px; overflow-y: auto;">
                                            <v-chip v-for="toolName in personaForm.tools" :key="toolName" size="small"
                                                color="primary" variant="tonal" closable
                                                @click:close="removeTool(toolName)">
                                                {{ toolName }}
                                            </v-chip>
                                        </div>
                                        <div v-else class="text-body-2 text-medium-emphasis">
                                            {{ tm('form.noToolsSelected') }}
                                        </div>
                                    </div>
                                </div>

                            </v-expansion-panel-text>
                        </v-expansion-panel>

                        <!-- Skills 选择面板 -->
                        <v-expansion-panel value="skills">
                            <v-expansion-panel-title>
                                <v-icon class="mr-2">mdi-lightning-bolt</v-icon>
                                {{ tm('form.skills') }}
                                <v-chip v-if="Array.isArray(personaForm.skills) && personaForm.skills.length > 0"
                                    size="small" color="primary" variant="tonal" class="ml-2">
                                    {{ personaForm.skills.length }}
                                </v-chip>
                            </v-expansion-panel-title>

                            <v-expansion-panel-text>
                                <div class="mb-3">
                                    <p class="text-body-2 text-medium-emphasis">
                                        {{ tm('form.skillsHelp') }}
                                    </p>
                                </div>

                                <v-radio-group class="mt-2" v-model="skillSelectValue" hide-details="true">
                                    <v-radio :label="tm('form.skillsAllAvailable')" value="0"></v-radio>
                                    <v-radio :label="tm('form.skillsSelectSpecific')" value="1"></v-radio>
                                </v-radio-group>

                                <div v-if="skillSelectValue === '1'" class="mt-3 selected-config-area">
                                    <v-text-field v-model="skillSearch" :label="tm('form.searchSkills')"
                                        prepend-inner-icon="mdi-magnify" variant="outlined" density="compact"
                                        hide-details clearable class="mb-3" />

                                    <div v-if="filteredSkills.length > 0" class="skills-selection">
                                        <v-virtual-scroll :items="filteredSkills" height="240" item-height="48">
                                            <template v-slot:default="{ item }">
                                                <v-list-item :key="item.name" density="comfortable"
                                                    @click="toggleSkill(item.name)">
                                                    <template v-slot:prepend>
                                                        <v-checkbox-btn :model-value="isSkillSelected(item.name)"
                                                            @click.stop="toggleSkill(item.name)" />
                                                    </template>
                                                    <v-list-item-title>
                                                        {{ item.name }}
                                                    </v-list-item-title>
                                                    <v-list-item-subtitle v-if="item.description">
                                                        {{ truncateText(item.description, 100) }}
                                                    </v-list-item-subtitle>
                                                </v-list-item>
                                            </template>
                                        </v-virtual-scroll>
                                    </div>

                                    <div v-else-if="!loadingSkills && availableSkills.length === 0"
                                        class="text-center pa-4">
                                        <v-icon size="48" color="grey-lighten-2"
                                            class="mb-2">mdi-lightning-bolt</v-icon>
                                        <p class="text-body-2 text-medium-emphasis">{{ tm('form.noSkillsAvailable') }}
                                        </p>
                                    </div>

                                    <div v-else-if="!loadingSkills && filteredSkills.length === 0"
                                        class="text-center pa-4">
                                        <v-icon size="48" color="grey-lighten-2" class="mb-2">mdi-magnify</v-icon>
                                        <p class="text-body-2 text-medium-emphasis">{{ tm('form.noSkillsFound') }}
                                        </p>
                                    </div>

                                    <div v-if="loadingSkills" class="text-center pa-4">
                                        <v-progress-circular indeterminate color="primary" />
                                        <p class="text-body-2 text-medium-emphasis mt-2">{{ tm('form.loadingSkills') }}
                                        </p>
                                    </div>

                                    <div class="mt-4">
                                        <h4 class="text-subtitle-2 mb-2">
                                            {{ tm('form.selectedSkills') }}
                                            <span v-if="personaForm.skills === null" class="text-success">
                                                ({{ tm('form.allSelected') }})
                                            </span>
                                            <span v-else-if="Array.isArray(personaForm.skills)">
                                                ({{ personaForm.skills.length }})
                                            </span>
                                        </h4>
                                        <div v-if="Array.isArray(personaForm.skills) && personaForm.skills.length > 0"
                                            class="d-flex flex-wrap ga-1" style="max-height: 100px; overflow-y: auto;">
                                            <v-chip v-for="skillName in personaForm.skills" :key="skillName"
                                                size="small" color="primary" variant="tonal" closable
                                                @click:close="removeSkill(skillName)">
                                                {{ skillName }}
                                            </v-chip>
                                        </div>
                                        <div v-else class="text-body-2 text-medium-emphasis">
                                            {{ tm('form.noSkillsSelected') }}
                                        </div>
                                    </div>
                                </div>
                            </v-expansion-panel-text>
                        </v-expansion-panel>

                        <!-- 预设对话面板 -->
                        <v-expansion-panel value="dialogs">
                            <v-expansion-panel-title>
                                <v-icon class="mr-2">mdi-chat</v-icon>
                                {{ tm('form.presetDialogs') }}
                                <v-chip v-if="personaForm.begin_dialogs.length > 0" size="small" color="primary"
                                    variant="tonal" class="ml-2">
                                    {{ personaForm.begin_dialogs.length / 2 }}
                                </v-chip>
                            </v-expansion-panel-title>

                            <v-expansion-panel-text>
                                <div class="mb-3">
                                    <p class="text-body-2 text-medium-emphasis">
                                        {{ tm('form.presetDialogsHelp') }}
                                    </p>
                                </div>

                                <div v-for="(dialog, index) in personaForm.begin_dialogs" :key="index" class="mb-3">
                                    <v-textarea v-model="personaForm.begin_dialogs[index]"
                                        :label="index % 2 === 0 ? tm('form.userMessage') : tm('form.assistantMessage')"
                                        :rules="getDialogRules(index)" variant="outlined" rows="2"
                                        density="comfortable">
                                        <template v-slot:append>
                                            <v-btn icon="mdi-delete" variant="text" size="small" color="error"
                                                @click="removeDialog(index)" />
                                        </template>
                                    </v-textarea>
                                </div>

                                <v-btn variant="outlined" prepend-icon="mdi-plus" @click="addDialogPair" block>
                                    {{ tm('buttons.addDialogPair') }}
                                </v-btn>
                            </v-expansion-panel-text>
                        </v-expansion-panel>
                            </v-expansion-panels>
                        </v-col>
                    </v-row>
                </v-form>
            </v-card-text>

            <v-card-actions class="persona-form-actions">
                <v-btn v-if="editingPersona" color="error" variant="text" @click="deletePersona">
                    {{ tm('buttons.delete') }}
                </v-btn>
                <v-spacer />
                <v-btn color="grey" variant="text" @click="closeDialog">
                    {{ tm('buttons.cancel') }}
                </v-btn>
                <v-btn color="primary" variant="flat" @click="savePersona" :loading="saving" :disabled="!formValid">
                    {{ tm('buttons.save') }}
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
import axios from 'axios';
import { useModuleI18n } from '@/i18n/composables';
import {
    askForConfirmation as askForConfirmationDialog,
    useConfirmDialog
} from '@/utils/confirmDialog';

export default {
    name: 'PersonaForm',
    props: {
        modelValue: {
            type: Boolean,
            default: false
        },
        editingPersona: {
            type: Object,
            default: null
        },
        currentFolderId: {
            type: String,
            default: null
        },
        currentFolderName: {
            type: String,
            default: null
        }
    },
    emits: ['update:modelValue', 'saved', 'error', 'deleted'],
    setup() {
        const { tm } = useModuleI18n('features/persona');
        const confirmDialog = useConfirmDialog();
        return { tm, confirmDialog };
    },
    data() {
        return {
            toolSelectValue: '0', // 默认选择全部工具
            saving: false,
            expandedPanels: [],
            formValid: false,
            mcpServers: [],
            availableTools: [],
            loadingTools: false,
            availableSkills: [],
            loadingSkills: false,
            existingPersonaIds: [], // 已存在的人格ID列表
            personaForm: {
                persona_id: '',
                system_prompt: '',
                custom_error_message: '',
                begin_dialogs: [],
                tools: [],
                skills: [],
                folder_id: null
            },
            personaIdRules: [
                v => !!v || this.tm('validation.required'),
                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'),
                v => (v && v.length >= 10) || this.tm('validation.minLength', { min: 10 })
            ],
            toolSearch: '',
            skillSearch: '',
            skillSelectValue: '0'
        }
    },

    computed: {
        showDialog: {
            get() {
                return this.modelValue;
            },
            set(value) {
                this.$emit('update:modelValue', value);
            }
        },
        filteredTools() {
            if (!this.toolSearch) {
                return this.availableTools;
            }
            const search = this.toolSearch.toLowerCase();
            return this.availableTools.filter(tool =>
                tool.name.toLowerCase().includes(search) ||
                (tool.description && tool.description.toLowerCase().includes(search)) ||
                (tool.mcp_server_name && tool.mcp_server_name.toLowerCase().includes(search))
            );
        },
        filteredSkills() {
            if (!this.skillSearch) {
                return this.availableSkills;
            }
            const search = this.skillSearch.toLowerCase();
            return this.availableSkills.filter(skill =>
                skill.name.toLowerCase().includes(search) ||
                (skill.description && skill.description.toLowerCase().includes(search))
            );
        },
        folderDisplayName() {
            // 优先使用传入的文件夹名称
            if (this.currentFolderName) {
                return this.currentFolderName;
            }
            // 如果没有文件夹 ID，显示根目录
            if (!this.currentFolderId) {
                return this.tm('form.rootFolder');
            }
            // 否则显示文件夹 ID（作为备用）
            return this.currentFolderId;
        }
    },

    watch: {
        modelValue(newValue) {
            if (newValue) {
                // 只有在不是编辑状态时才初始化空表单
                if (this.editingPersona) {
                    this.initFormWithPersona(this.editingPersona);
                } else {
                    this.initForm();
                    // 只在创建新人格时加载已存在的人格列表
                    this.loadExistingPersonaIds();
                }
                this.loadMcpServers();
                this.loadTools();
                this.loadSkills();
            }
        },
        editingPersona: {
            immediate: true,
            handler(newPersona) {
                // 只有在对话框打开时才处理editingPersona的变化
                if (this.modelValue) {
                    if (newPersona) {
                        this.initFormWithPersona(newPersona);
                    } else {
                        this.initForm();
                    }
                }
            }
        },
        toolSelectValue(newValue) {
            if (newValue === '0') {
                // 选择全部工具
                this.personaForm.tools = null;
            } else if (newValue === '1') {
                // 选择指定工具，如果当前是null，则转换为空数组
                if (this.personaForm.tools === null) {
                    this.personaForm.tools = [];
                }
            }
        },
        skillSelectValue(newValue) {
            if (newValue === '0') {
                this.personaForm.skills = null;
            } else if (newValue === '1') {
                if (this.personaForm.skills === null) {
                    this.personaForm.skills = [];
                }
            }
        }
    },

    methods: {
        initForm() {
            this.personaForm = {
                persona_id: '',
                system_prompt: '',
                custom_error_message: '',
                begin_dialogs: [],
                tools: [],
                skills: [],
                folder_id: this.currentFolderId
            };
            this.toolSelectValue = '0';
            this.skillSelectValue = '0';
            this.expandedPanels = this.getDefaultExpandedPanels();
        },

        initFormWithPersona(persona) {
            this.personaForm = {
                persona_id: persona.persona_id,
                system_prompt: persona.system_prompt,
                custom_error_message: persona.custom_error_message || '',
                begin_dialogs: [...(persona.begin_dialogs || [])],
                tools: persona.tools === null ? null : [...(persona.tools || [])],
                skills: persona.skills === null ? null : [...(persona.skills || [])],
                folder_id: persona.folder_id
            };
            // 根据 tools 的值设置 toolSelectValue
            this.toolSelectValue = persona.tools === null ? '0' : '1';
            this.skillSelectValue = persona.skills === null ? '0' : '1';
            this.expandedPanels = this.getDefaultExpandedPanels();
        },

        getDefaultExpandedPanels() {
            return this.$vuetify.display.smAndDown ? [] : ['tools', 'skills', 'dialogs'];
        },

        closeDialog() {
            this.showDialog = false;
        },

        async loadMcpServers() {
            try {
                const response = await axios.get('/api/tools/mcp/servers');
                if (response.data.status === 'ok') {
                    this.mcpServers = response.data.data || [];
                } else {
                    this.$emit('error', response.data.message || 'Failed to load MCP servers');
                }
            } catch (error) {
                this.$emit('error', error.response?.data?.message || 'Failed to load MCP servers');
                this.mcpServers = [];
            }
        },

        async loadTools() {
            this.loadingTools = true;
            try {
                const response = await axios.get('/api/tools/list');
                if (response.data.status === 'ok') {
                    this.availableTools = response.data.data || [];
                } else {
                    this.$emit('error', response.data.message || 'Failed to load tools');
                }
            } catch (error) {
                this.$emit('error', error.response?.data?.message || 'Failed to load tools');
                this.availableTools = [];
            } finally {
                this.loadingTools = false;
            }
        },

        async loadSkills() {
            this.loadingSkills = true;
            try {
                const response = await axios.get('/api/skills');
                if (response.data.status === 'ok') {
                    const payload = response.data.data || [];
                    if (Array.isArray(payload)) {
                        this.availableSkills = payload.filter(skill => skill.active !== false);
                    } else {
                        const skills = payload.skills || [];
                        this.availableSkills = skills.filter(skill => skill.active !== false);
                    }
                } else {
                    this.$emit('error', response.data.message || 'Failed to load skills');
                }
            } catch (error) {
                this.$emit('error', error.response?.data?.message || 'Failed to load skills');
                this.availableSkills = [];
            } finally {
                this.loadingSkills = false;
            }
        },

        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;

            // 验证预设对话不能为空
            if (this.personaForm.begin_dialogs.length > 0) {
                for (let i = 0; i < this.personaForm.begin_dialogs.length; i++) {
                    if (!this.personaForm.begin_dialogs[i] || this.personaForm.begin_dialogs[i].trim() === '') {
                        const dialogType = i % 2 === 0 ? this.tm('form.userMessage') : this.tm('form.assistantMessage');
                        this.$emit('error', this.tm('validation.dialogRequired', { type: dialogType }));
                        return;
                    }
                }
            }

            this.saving = true;
            try {
                const url = this.editingPersona ? '/api/persona/update' : '/api/persona/create';
                const response = await axios.post(url, this.personaForm);

                if (response.data.status === 'ok') {
                    this.$emit('saved', response.data.message || this.tm('messages.saveSuccess'));
                    this.closeDialog();
                } else {
                    this.$emit('error', response.data.message || this.tm('messages.saveError'));
                }
            } catch (error) {
                this.$emit('error', error.response?.data?.message || this.tm('messages.saveError'));
            }
            this.saving = false;
        },

        async deletePersona() {
            if (!this.editingPersona) return;

            if (
                !(await askForConfirmationDialog(
                    this.tm('messages.deleteConfirm', { id: this.editingPersona.persona_id }),
                    this.confirmDialog,
                ))
            ) {
                return;
            }

            this.saving = true;
            try {
                const response = await axios.post('/api/persona/delete', {
                    persona_id: this.editingPersona.persona_id
                });

                if (response.data.status === 'ok') {
                    this.$emit('deleted', response.data.message || this.tm('messages.deleteSuccess'));
                    this.closeDialog();
                } else {
                    this.$emit('error', response.data.message || this.tm('messages.deleteError'));
                }
            } catch (error) {
                this.$emit('error', error.response?.data?.message || this.tm('messages.deleteError'));
            } finally {
                this.saving = false;
            }
        },

        addDialogPair() {
            this.personaForm.begin_dialogs.push('', '');
            // 自动展开预设对话面板
            if (!this.expandedPanels.includes('dialogs')) {
                this.expandedPanels.push('dialogs');
            }
        },

        removeDialog(index) {
            // 如果是偶数索引（用户消息），删除用户消息和对应的助手消息
            if (index % 2 === 0 && index + 1 < this.personaForm.begin_dialogs.length) {
                this.personaForm.begin_dialogs.splice(index, 2);
            }
            // 如果是奇数索引（助手消息），删除助手消息和对应的用户消息
            else if (index % 2 === 1 && index - 1 >= 0) {
                this.personaForm.begin_dialogs.splice(index - 1, 2);
            }
        },

        toggleMcpServer(server) {
            if (!server.tools || server.tools.length === 0) return;

            // 如果当前是全选状态，需要先转换为具体的工具列表
            if (this.personaForm.tools === null) {
                // 从全选状态转换为去除该服务器工具的状态
                this.personaForm.tools = this.availableTools.map(tool => tool.name)
                    .filter(toolName => !server.tools.includes(toolName));
                this.toolSelectValue = '1'; // 切换到指定工具模式
                return;
            }

            // 确保tools是数组
            if (!Array.isArray(this.personaForm.tools)) {
                this.personaForm.tools = [];
                this.toolSelectValue = '1';
            }

            // 检查是否所有服务器的工具都已选中
            const serverTools = server.tools;
            const allSelected = serverTools.every(toolName => this.personaForm.tools.includes(toolName));

            if (allSelected) {
                // 移除所有服务器工具
                this.personaForm.tools = this.personaForm.tools.filter(
                    toolName => !serverTools.includes(toolName)
                );
            } else {
                // 添加所有服务器工具
                serverTools.forEach(toolName => {
                    if (!this.personaForm.tools.includes(toolName)) {
                        this.personaForm.tools.push(toolName);
                    }
                });
            }
        },

        toggleTool(toolName) {
            // 如果当前是全选状态，需要先转换为具体的工具列表
            if (this.personaForm.tools === null) {
                // 如果是全选状态，点击某个工具表示要取消选择该工具
                // 所以创建一个包含所有其他工具的数组
                this.personaForm.tools = this.availableTools.map(tool => tool.name).filter(name => name !== toolName);
                this.toolSelectValue = '1'; // 切换到指定工具模式
            } else if (Array.isArray(this.personaForm.tools)) {
                const index = this.personaForm.tools.indexOf(toolName);
                if (index !== -1) {
                    // 如果工具已选择，移除工具
                    this.personaForm.tools.splice(index, 1);
                } else {
                    // 如果工具未选择，添加工具
                    this.personaForm.tools.push(toolName);
                }
            } else {
                // 如果tools不是数组也不是null，初始化为数组
                this.personaForm.tools = [toolName];
                this.toolSelectValue = '1';
            }
        },

        removeTool(toolName) {
            // 如果当前是全选状态，需要先转换为具体的工具列表
            if (this.personaForm.tools === null) {
                // 创建一个包含所有工具的数组，然后移除指定工具
                this.personaForm.tools = this.availableTools.map(tool => tool.name).filter(name => name !== toolName);
                this.toolSelectValue = '1'; // 切换到指定工具模式
            } else if (Array.isArray(this.personaForm.tools)) {
                const index = this.personaForm.tools.indexOf(toolName);
                if (index !== -1) {
                    this.personaForm.tools.splice(index, 1);
                }
            }
        },

        toggleSkill(skillName) {
            if (this.personaForm.skills === null) {
                this.personaForm.skills = this.availableSkills.map(skill => skill.name)
                    .filter(name => name !== skillName);
                this.skillSelectValue = '1';
            } else if (Array.isArray(this.personaForm.skills)) {
                const index = this.personaForm.skills.indexOf(skillName);
                if (index !== -1) {
                    this.personaForm.skills.splice(index, 1);
                } else {
                    this.personaForm.skills.push(skillName);
                }
            } else {
                this.personaForm.skills = [skillName];
                this.skillSelectValue = '1';
            }
        },

        removeSkill(skillName) {
            if (this.personaForm.skills === null) {
                this.personaForm.skills = this.availableSkills.map(skill => skill.name)
                    .filter(name => name !== skillName);
                this.skillSelectValue = '1';
            } else if (Array.isArray(this.personaForm.skills)) {
                const index = this.personaForm.skills.indexOf(skillName);
                if (index !== -1) {
                    this.personaForm.skills.splice(index, 1);
                }
            }
        },

        truncateText(text, maxLength) {
            if (!text) return '';
            return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
        },

        getDialogRules(index) {
            const dialogType = index % 2 === 0 ? this.tm('form.userMessage') : this.tm('form.assistantMessage');
            return [
                v => !!v || this.tm('validation.dialogRequired', { type: dialogType }),
                v => (v && v.trim().length > 0) || this.tm('validation.dialogRequired', { type: dialogType })
            ];
        },

        isToolSelected(toolName) {
            // 如果是全选状态，所有工具都被选中
            if (this.personaForm.tools === null) {
                return true;
            }
            return Array.isArray(this.personaForm.tools) && this.personaForm.tools.includes(toolName);
        },

        isSkillSelected(skillName) {
            if (this.personaForm.skills === null) {
                return true;
            }
            return Array.isArray(this.personaForm.skills) && this.personaForm.skills.includes(skillName);
        },

        isServerSelected(server) {
            if (!server.tools || server.tools.length === 0) return false;

            // 如果是全选状态，所有服务器都被选中
            if (this.personaForm.tools === null) {
                return true;
            }

            // 检查服务器的所有工具是否都已选中
            return Array.isArray(this.personaForm.tools) &&
                server.tools.every(toolName => this.personaForm.tools.includes(toolName));
        }
    }
}
</script>

<style scoped>
.persona-form-card {
    border-radius: 12px;
    overflow: hidden;
}

.persona-form-content {
    max-height: min(78vh, 760px);
    overflow-y: auto;
}

.persona-form-title {
    line-height: 1.3;
}

.persona-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: rgb(var(--v-theme-surface));
    border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
}

.selected-config-area {
    margin-left: 32px;
}

.persona-form-layout {
    align-items: flex-start;
}

.tools-selection {
    max-height: 300px;
    overflow-y: auto;
}

.skills-selection {
    max-height: 300px;
    overflow-y: auto;
}

.v-virtual-scroll {
    padding-bottom: 16px;
}

@media (max-width: 600px) {
    .persona-form-card-mobile {
        border-radius: 0;
    }

    .persona-form-content {
        max-height: calc(100vh - 128px);
        padding: 16px !important;
    }

    .persona-basic-col,
    .persona-panels-col {
        padding-top: 0 !important;
    }

    .persona-form-title {
        font-size: 1.15rem !important;
        padding: 12px 16px !important;
    }

    .selected-config-area {
        margin-left: 0;
    }

    .tools-selection,
    .skills-selection {
        max-height: 38vh;
    }

    .persona-form-actions {
        padding: 12px 16px !important;
        gap: 8px;
    }

    .persona-form-actions .v-btn {
        min-width: 0;
    }
}
</style>