@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/views/AiToolManager.vue

@@ -0,0 +1,2372 @@
+<template>
+  <div class="ai-tool-manager">
+    <!-- 技能 -->
+    <div class="tool-section">
+      <div class="section-header">
+        <span class="section-title">技能</span>
+      </div>
+      <div class="tool-cards">
+        <div
+          v-for="skill in skillTools"
+          :key="skill.ID"
+          class="tool-card skill-card"
+          @click="handleSkillClick(skill)"
+        >
+          <div class="card-header">
+            <div class="card-title-group">
+              <span class="card-title">{{ skill['SKILL|NAME'] || skill.NAME }}</span>
+              <span class="card-code">| {{ skill['SKILL|CODE'] }}</span>
+            </div>
+            <el-button
+              type="primary" link
+              icon="el-icon-delete-solid"
+              class="card-delete-btn"
+              @click.stop="handleDelete(skill)"
+            />
+          </div>
+          <div class="card-content">
+            <div class="card-line">技能描述：{{ skill['SKILL|DESC'] }}</div>
+          </div>
+        </div>
+        <div class="tool-card add-card" @click="handleAdd('skill')">
+          <div class="add-icon">+</div>
+          <div class="add-text">添加技能</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 对象接口工具 -->
+    <div class="tool-section">
+      <div class="section-header">
+        <span class="section-title">对象接口工具</span>
+      </div>
+      <div class="tool-cards">
+        <div
+          v-for="tool in interfaceTools"
+          :key="tool.ID"
+          class="tool-card interface-card clickable"
+          @click="handleApiClick(tool)"
+        >
+          <div class="card-header">
+            <div class="card-title-group">
+              <el-tag v-if="tool['API|FRAME_API']" size="small" type="warning">通用</el-tag>
+              <span class="card-title">{{ tool['API|LABEL'] || tool.NAME }}</span>
+              <span class="card-code">| {{ tool['API|NAME'] }}</span>
+            </div>
+            <el-button
+              type="primary" link
+              icon="el-icon-delete-solid"
+              class="card-delete-btn"
+              @click.stop="handleDelete(tool)"
+            />
+          </div>
+          <div class="card-content">
+            <div class="card-line">所属对象：{{ tool['API|ENTITY#'] || tool['META#'] }}</div>
+            <div class="card-line">接口说明：{{ tool['API|PARAM_EXPLAIN'] }}</div>
+          </div>
+        </div>
+        <div class="tool-card add-card" @click="handleAdd('interface')">
+          <div class="add-icon">+</div>
+          <div class="add-text">添加对象接口工具</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 外部接口工具 -->
+    <div class="tool-section">
+      <div class="section-header">
+        <span class="section-title">外部接口工具</span>
+      </div>
+      <div class="tool-cards">
+        <div
+          v-for="tool in externalTools"
+          :key="tool.ID"
+          class="tool-card external-card"
+        >
+          <div class="card-header">
+            <div class="card-title-group">
+              <span class="card-title">{{ tool['OUT_API|NAME'] || tool.NAME }}</span>
+            </div>
+            <el-button
+              type="primary" link
+              icon="el-icon-delete-solid"
+              class="card-delete-btn"
+              @click.stop="handleDelete(tool)"
+            />
+          </div>
+          <div class="card-content">
+            <div class="card-line">接口说明：{{ tool['OUT_API|NOTICE'] }}</div>
+          </div>
+        </div>
+        <div class="tool-card add-card" @click="handleAdd('external')">
+          <div class="add-icon">+</div>
+          <div class="add-text">添加外部接口工具</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 内置工具 -->
+    <div class="tool-section">
+      <div class="section-header">
+        <span class="section-title">内置工具</span>
+      </div>
+      <div class="tool-cards">
+        <div
+          v-for="tool in sysTools"
+          :key="tool.ID"
+          class="tool-card sys-tool-card"
+        >
+          <div class="card-header">
+            <div class="card-title-group">
+              <span class="card-title">{{ tool['SYS_TOOL|NAME'] || tool.NAME }}</span>
+              <span class="card-code">| {{ tool['SYS_TOOL|CODE'] }}</span>
+            </div>
+            <el-button
+              type="text"
+              icon="el-icon-delete-solid"
+              class="card-delete-btn"
+              @click.stop="handleDelete(tool)"
+            />
+          </div>
+          <div class="card-content">
+            <div class="card-line">工具描述：{{ tool['SYS_TOOL|DESC'] }}</div>
+          </div>
+        </div>
+        <div class="tool-card add-card" @click="handleAdd('systool')">
+          <div class="add-icon">+</div>
+          <div class="add-text">添加内置工具</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- MCP工具 -->
+    <div class="tool-section">
+      <div class="section-header">
+        <span class="section-title">MCP工具</span>
+      </div>
+      <div class="tool-cards">
+        <div
+          v-for="tool in mcpTools"
+          :key="tool.ID"
+          class="tool-card mcp-card"
+        >
+          <div class="card-header">
+            <div class="card-title-group">
+              <span class="card-title">{{ tool['MCP|NAME'] || tool.NAME }}</span>
+              <span class="card-code">| {{ tool['MCP|CODE'] }}</span>
+            </div>
+            <el-button
+              type="primary" link
+              icon="el-icon-delete-solid"
+              class="card-delete-btn"
+              @click.stop="handleDelete(tool)"
+            />
+          </div>
+          <div class="card-content">
+            <div class="card-line">请求类型：{{ tool['MCP|TYPE'] }}</div>
+            <div class="card-line">地址/命令：{{ tool['MCP|URL'] || tool['MCP|COMMAND'] }}</div>
+          </div>
+        </div>
+        <div class="tool-card add-card" @click="handleAdd('mcp')">
+          <div class="add-icon">+</div>
+          <div class="add-text">添加MCP工具</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 子智能体工具 -->
+    <div class="tool-section">
+      <div class="section-header">
+        <span class="section-title">子智能体工具</span>
+      </div>
+      <draggable
+        v-model="subAgentTools"
+        class="tool-cards"
+        v-bind="subAgentDragOptions"
+        @end="handleSubAgentDragEnd"
+      >
+        <div
+          v-for="tool in subAgentTools"
+          :key="tool.ID"
+          class="tool-card subagent-card"
+        >
+          <div class="card-icon-wrapper">
+            <img :src="getSubAgentIcon(tool)" alt="icon" />
+          </div>
+          <div class="card-main">
+            <div class="card-header">
+              <div class="card-title-group">
+                <span class="card-title">{{ tool['SUB_AGENT|NAME'] || tool.NAME }}</span>
+                <span class="card-code">| {{ tool['SUB_AGENT|CODE'] }}</span>
+              </div>
+              <el-button
+                type="primary" link
+                icon="el-icon-delete-solid"
+                class="card-delete-btn"
+                @click.stop="handleDelete(tool)"
+              />
+            </div>
+            <div class="card-content">
+              <div class="card-line">应用简介：{{ tool['SUB_AGENT|AGENT_PROMPT'] }}</div>
+            </div>
+          </div>
+        </div>
+        <template v-slot:footer>
+        <div class="tool-card add-card" @click="handleAdd('subagent')">
+          <div class="add-icon">+</div>
+          <div class="add-text">添加子智能体</div>
+        </div>
+        </template>
+      </draggable>
+    </div>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog
+      :title="dialogTitle"
+      v-model="dialogVisible"
+      width="600px"
+      :close-on-click-modal="false"
+    >
+      <el-form ref="toolForm" :model="formData" :rules="formRules" label-width="120px">
+        <el-form-item label="工具名称" prop="NAME">
+          <el-input v-model="formData.NAME" placeholder="请输入工具名称" />
+        </el-form-item>
+
+        <el-form-item label="工具类型" prop="TYPE">
+          <el-select v-model="formData.TYPE" placeholder="请选择工具类型" style="width: 100%" disabled>
+            <el-option label="对象接口工具" value="interface" />
+            <el-option label="外部接口工具" value="external" />
+            <el-option label="MCP工具" value="mcp" />
+            <el-option label="子智能体工具" value="subagent" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="工具描述" prop="DESC">
+          <el-input
+            v-model="formData.DESC"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入工具描述"
+          />
+        </el-form-item>
+
+        <!-- 对象接口工具字段 -->
+        <template v-if="formData.TYPE === 'interface'">
+          <el-form-item label="对象接口" prop="ACTION">
+            <el-input v-model="formData.ACTION" placeholder="请选择对象接口" readonly>
+              <template v-slot:append><el-button icon="el-icon-search" @click="showApiDialog">选择接口</el-button></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="对象" prop="META">
+            <el-input v-model="formData.META" placeholder="对象名称" readonly />
+          </el-form-item>
+        </template>
+
+        <!-- 外部接口工具字段 -->
+        <template v-if="formData.TYPE === 'external'">
+          <el-form-item label="外部接口" prop="API">
+            <el-input v-model="formData.API" placeholder="请输入外部接口地址" />
+          </el-form-item>
+          <el-form-item label="认证票据" prop="TOKEN">
+            <el-input v-model="formData.TOKEN" placeholder="请输入认证票据" />
+          </el-form-item>
+        </template>
+
+        <!-- MCP工具字段 -->
+        <template v-if="formData.TYPE === 'mcp'">
+          <el-form-item label="MCP地址" prop="MCP_URL">
+            <el-input v-model="formData.MCP_URL" placeholder="请输入MCP地址" />
+          </el-form-item>
+        </template>
+
+        <!-- 子智能体工具字段 -->
+        <template v-if="formData.TYPE === 'subagent'">
+          <el-form-item label="工作流" prop="WORKFLOW">
+            <el-input v-model="formData.WORKFLOW" type="textarea" :rows="3" placeholder="请输入工作流配置" />
+          </el-form-item>
+          <el-form-item label="Skills文件" prop="SKILL_FILE">
+            <el-upload
+              class="upload-demo"
+              action="#"
+              :auto-upload="false"
+              :on-change="handleFileChange"
+              :file-list="fileList"
+            >
+              <el-button size="small" type="primary">选择文件</el-button>
+            </el-upload>
+          </el-form-item>
+        </template>
+
+        <!-- 通用字段 -->
+        <el-form-item label="是否启用" prop="ENABLE">
+          <el-switch v-model="formData.ENABLE" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+
+        <el-form-item label="需要用户确认" prop="CONFIRM">
+          <el-switch v-model="formData.CONFIRM" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+
+        <el-form-item label="表单页面" prop="FORM_PAGE">
+          <el-input v-model="formData.FORM_PAGE" placeholder="请输入表单页面ID" />
+        </el-form-item>
+
+        <el-form-item label="结果页面" prop="RESULT_PAGE">
+          <el-input v-model="formData.RESULT_PAGE" placeholder="请输入结果页面ID" />
+        </el-form-item>
+
+        <el-form-item label="使用表单页面" prop="USE_FORM_PAGE">
+          <el-switch v-model="formData.USE_FORM_PAGE" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+
+        <el-form-item label="使用结果页面" prop="USE_RESULT_PAGE">
+          <el-switch v-model="formData.USE_RESULT_PAGE" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+      </el-form>
+
+      <template v-slot:footer><div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </div></template>
+    </el-dialog>
+
+    <!-- 对象接口选择对话框 -->
+    <el-dialog
+      title="添加对象接口工具"
+      v-model="apiDialogVisible"
+      width="1100px"
+      :close-on-click-modal="false"
+      class="api-select-dialog"
+    >
+      <div class="api-dialog-content">
+        <!-- 左侧：接口列表 -->
+        <div class="api-list-panel">
+          <el-tabs v-model="apiActiveTab" @tab-click="handleApiTabChange" class="api-tabs">
+            <!-- 通用接口标签页 -->
+            <el-tab-pane label="通用接口" name="frame">
+              <el-table
+                ref="frameApiTable"
+                :data="frameApiList"
+                height="380"
+                @selection-change="handleApiSelectionChange"
+              >
+                <el-table-column type="selection" width="50" align="center" />
+                <el-table-column type="index" label="序号" width="70" align="center" />
+                <el-table-column prop="LABEL" label="接口名称" min-width="140" show-overflow-tooltip>
+                  <template v-slot="scope">
+                    <el-link type="primary" :underline="false">{{ scope.row.LABEL }}</el-link>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="NAME" label="接口命令" width="120" show-overflow-tooltip />
+                <el-table-column prop="ENTITY#" label="所属对象" width="120" show-overflow-tooltip />
+                <el-table-column prop="PARAM_EXPLAIN" label="接口说明" min-width="220" show-overflow-tooltip />
+              </el-table>
+              <el-pagination
+                v-if="frameApiTotal > frameApiPageSize"
+                v-model:current-page="frameApiCurrentPage"
+                :page-size="frameApiPageSize"
+                layout="total, prev, pager, next"
+                :total="frameApiTotal"
+                @current-change="handleFrameApiPageChange"
+                style="margin-top: 12px; text-align: right;"
+              />
+            </el-tab-pane>
+
+            <!-- 对象接口标签页 -->
+            <el-tab-pane label="对象接口" name="entity">
+              <div class="filter-bar">
+                <div class="filter-item">
+                  <label>选择对象：</label>
+                  <epx-object
+                    v-model="selectedEntity"
+                    :fieldConfigs="{
+                      attriLabel: '',
+                      codeKey: 'FM_ENTITY',
+                      state: 'EDIT',
+                      placeholder: '请选择对象',
+                      isMultiple: '0'
+                    }"
+                    @change="handleEntityChange"
+                  />
+                </div>
+              </div>
+
+              <el-table
+                v-if="selectedEntity"
+                ref="apiTable"
+                :data="apiList"
+                height="330"
+                @selection-change="handleApiSelectionChange"
+              >
+                <el-table-column type="selection" width="50" align="center" />
+                <el-table-column type="index" label="序号" width="70" align="center" />
+                <el-table-column prop="LABEL" label="接口名称" min-width="140" show-overflow-tooltip>
+                  <template v-slot="scope">
+                    <el-link type="primary" :underline="false">{{ scope.row.LABEL }}</el-link>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="NAME" label="接口命令" width="120" show-overflow-tooltip />
+                <el-table-column prop="PARAM_EXPLAIN" label="接口说明" min-width="220" show-overflow-tooltip />
+              </el-table>
+
+              <div v-if="!selectedEntity" class="empty-table-tip">
+                <i class="el-icon-info"></i>
+                <p>请先选择对象</p>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+
+        <!-- 右侧：已选择列表 -->
+        <div class="api-selected-panel">
+          <div class="panel-header">
+            <span>已选择</span>
+          </div>
+          <div class="selected-list">
+            <div
+              v-for="(api, index) in selectedApis"
+              :key="api.ID"
+              class="selected-item"
+            >
+              <div class="item-header">
+                <el-tag v-if="api._isFrame" size="small" type="success" class="frame-tag">通用</el-tag>
+                <span class="item-title">{{ api.LABEL }} | {{ api.NAME }}</span>
+                <el-button
+                  type="primary" link
+                  icon="el-icon-delete-solid"
+                  class="delete-btn"
+                  @click="removeSelectedApi(index)"
+                />
+              </div>
+              <div class="item-content">
+                <div class="content-line">所属对象：{{ api['ENTITY#'] || (selectedEntity && selectedEntity.name) }}</div>
+                <div class="content-line">接口说明：{{ api.PARAM_EXPLAIN }}</div>
+              </div>
+            </div>
+            <div v-if="selectedApis.length === 0" class="empty-tip">
+              请从左侧选择接口
+            </div>
+          </div>
+          <div class="panel-footer">
+            <span class="count-text">已选择 {{ selectedApis.length }} 个</span>
+            <div class="footer-actions">
+              <el-button size="small" @click="apiDialogVisible = false">取消</el-button>
+              <el-button size="small" type="primary" @click="confirmApiSelection">保存</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 外部接口选择对话框 -->
+    <el-dialog
+      title="添加外部接口工具"
+      v-model="externalApiDialogVisible"
+      width="1100px"
+      :close-on-click-modal="false"
+      class="api-select-dialog"
+    >
+      <div class="api-dialog-content">
+        <!-- 左侧：接口列表 -->
+        <div class="api-list-panel">
+          <el-table
+            ref="externalApiTable"
+            :data="externalApiList"
+            height="420"
+            @selection-change="handleExternalApiSelectionChange"
+          >
+            <el-table-column type="selection" width="50" align="center" />
+            <el-table-column type="index" label="序号" width="70" align="center" />
+            <el-table-column prop="NAME" label="接口名称" min-width="180" show-overflow-tooltip>
+              <template v-slot="scope">
+                <el-link type="primary" :underline="false">{{ scope.row.NAME }}</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column prop="NOTICE" label="接口说明" min-width="300" show-overflow-tooltip />
+          </el-table>
+
+          <el-pagination
+            v-if="externalApiTotal > externalApiPageSize"
+            v-model:current-page="externalApiCurrentPage"
+            :page-size="externalApiPageSize"
+            layout="total, prev, pager, next"
+            :total="externalApiTotal"
+            @current-change="handleExternalApiPageChange"
+            style="margin-top: 12px; text-align: right;"
+          />
+        </div>
+
+        <!-- 右侧：已选择列表 -->
+        <div class="api-selected-panel">
+          <div class="panel-header">
+            <span>已选择</span>
+          </div>
+          <div class="selected-list">
+            <div
+              v-for="(api, index) in selectedExternalApis"
+              :key="api.ID"
+              class="selected-item"
+            >
+              <div class="item-header">
+                <span class="item-title">{{ api.NAME }}</span>
+                <el-button
+                  type="primary" link
+                  icon="el-icon-delete-solid"
+                  class="delete-btn"
+                  @click="removeSelectedExternalApi(index)"
+                />
+              </div>
+              <div class="item-content">
+                <div class="content-line">接口说明：{{ api.NOTICE }}</div>
+              </div>
+            </div>
+            <div v-if="selectedExternalApis.length === 0" class="empty-tip">
+              请从左侧选择接口
+            </div>
+          </div>
+          <div class="panel-footer">
+            <span class="count-text">已选择 {{ selectedExternalApis.length }} 个</span>
+            <div class="footer-actions">
+              <el-button size="small" @click="externalApiDialogVisible = false">取消</el-button>
+              <el-button size="small" type="primary" @click="confirmExternalApiSelection">保存</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 子智能体选择对话框 -->
+    <el-dialog
+      title="添加子智能体工具"
+      v-model="subAgentDialogVisible"
+      width="1100px"
+      :close-on-click-modal="false"
+      class="api-select-dialog"
+    >
+      <div class="api-dialog-content">
+        <!-- 左侧：子智能体列表 -->
+        <div class="api-list-panel">
+          <el-table
+            ref="subAgentTable"
+            :data="subAgentList"
+            height="420"
+            @selection-change="handleSubAgentSelectionChange"
+          >
+            <el-table-column type="selection" width="50" align="center" />
+            <el-table-column type="index" label="序号" width="70" align="center" />
+            <el-table-column prop="NAME" label="应用名称" min-width="140" show-overflow-tooltip>
+              <template v-slot="scope">
+                <el-link type="primary" :underline="false">{{ scope.row.NAME }}</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column prop="CODE" label="应用编号" width="120" show-overflow-tooltip />
+            <el-table-column prop="AGENT_PROMPT" label="应用简介" min-width="220" show-overflow-tooltip />
+          </el-table>
+
+          <el-pagination
+            v-if="subAgentTotal > subAgentPageSize"
+            v-model:current-page="subAgentCurrentPage"
+            :page-size="subAgentPageSize"
+            layout="total, prev, pager, next"
+            :total="subAgentTotal"
+            @current-change="handleSubAgentPageChange"
+            style="margin-top: 12px; text-align: right;"
+          />
+        </div>
+
+        <!-- 右侧：已选择列表 -->
+        <div class="api-selected-panel">
+          <div class="panel-header">
+            <span>已选择</span>
+          </div>
+          <div class="selected-list">
+            <div
+              v-for="(agent, index) in selectedSubAgents"
+              :key="agent.ID"
+              class="selected-item"
+            >
+              <div class="item-header">
+                <div class="item-header-left">
+                  <div class="item-icon">
+                    <img :src="getSelectedAgentIcon(agent)" alt="icon" />
+                  </div>
+                  <span class="item-title">{{ agent.NAME }}</span>
+                </div>
+                <el-button
+                  type="primary" link
+                  icon="el-icon-delete-solid"
+                  class="delete-btn"
+                  @click="removeSelectedSubAgent(index)"
+                />
+              </div>
+              <div class="item-content">
+                <div class="content-line">应用编号：{{ agent.CODE }}</div>
+                <div class="content-line">应用简介：{{ agent.AGENT_PROMPT }}</div>
+              </div>
+            </div>
+            <div v-if="selectedSubAgents.length === 0" class="empty-tip">
+              请从左侧选择子智能体
+            </div>
+          </div>
+          <div class="panel-footer">
+            <span class="count-text">已选择 {{ selectedSubAgents.length }} 个</span>
+            <div class="footer-actions">
+              <el-button size="small" @click="subAgentDialogVisible = false">取消</el-button>
+              <el-button size="small" type="primary" @click="confirmSubAgentSelection">保存</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 技能选择对话框 -->
+    <el-dialog
+      title="添加技能"
+      v-model="skillDialogVisible"
+      width="1100px"
+      :close-on-click-modal="false"
+      class="api-select-dialog"
+    >
+      <div class="api-dialog-content">
+        <!-- 左侧：技能列表 -->
+        <div class="api-list-panel">
+          <el-tabs v-model="skillActiveTab" @tab-click="handleSkillTabChange" class="api-tabs">
+            <el-tab-pane label="系统技能" name="system" />
+            <el-tab-pane label="平台技能" name="platform" />
+          </el-tabs>
+          <el-table
+            ref="skillTable"
+            :data="skillList"
+            height="380"
+            @select="handleSkillSelect"
+            @select-all="handleSkillSelectAll"
+          >
+            <el-table-column type="selection" width="50" align="center" />
+            <el-table-column type="index" label="序号" width="70" align="center" />
+            <el-table-column prop="NAME" label="技能名称" min-width="140" show-overflow-tooltip>
+              <template v-slot="scope">
+                <el-link type="primary" :underline="false">{{ scope.row.NAME }}</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column prop="CODE" label="编号" width="120" show-overflow-tooltip />
+            <el-table-column prop="DESC" label="技能描述" min-width="220" show-overflow-tooltip />
+          </el-table>
+
+          <el-pagination
+            v-if="skillTotal > skillPageSize"
+            v-model:current-page="skillCurrentPage"
+            :page-size="skillPageSize"
+            layout="total, prev, pager, next"
+            :total="skillTotal"
+            @current-change="handleSkillPageChange"
+            style="margin-top: 12px; text-align: right;"
+          />
+        </div>
+
+        <!-- 右侧：已选择列表 -->
+        <div class="api-selected-panel">
+          <div class="panel-header">
+            <span>已选择</span>
+          </div>
+          <div class="selected-list">
+            <div
+              v-for="(skill, index) in selectedSkills"
+              :key="skill.ID"
+              class="selected-item"
+            >
+              <div class="item-header">
+                <span class="item-title">{{ skill.NAME }}</span>
+                <el-button
+                  type="primary" link
+                  icon="el-icon-delete-solid"
+                  class="delete-btn"
+                  @click="removeSelectedSkill(index)"
+                />
+              </div>
+              <div class="item-content">
+                <div class="content-line">编号：{{ skill.CODE }}</div>
+                <div class="content-line">技能描述：{{ skill.DESC }}</div>
+              </div>
+            </div>
+            <div v-if="selectedSkills.length === 0" class="empty-tip">
+              请从左侧选择技能
+            </div>
+          </div>
+          <div class="panel-footer">
+            <span class="count-text">已选择 {{ selectedSkills.length }} 个</span>
+            <div class="footer-actions">
+              <el-button size="small" @click="skillDialogVisible = false">取消</el-button>
+              <el-button size="small" type="primary" @click="confirmSkillSelection">保存</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 内置工具选择对话框 -->
+    <el-dialog
+      title="添加内置工具"
+      v-model="sysToolDialogVisible"
+      width="1100px"
+      :close-on-click-modal="false"
+      class="api-select-dialog"
+    >
+      <div class="api-dialog-content">
+        <!-- 左侧：内置工具列表 -->
+        <div class="api-list-panel">
+          <el-table
+            ref="sysToolTable"
+            :data="sysToolList"
+            height="420"
+            @selection-change="handleSysToolSelectionChange"
+          >
+            <el-table-column type="selection" width="50" align="center" />
+            <el-table-column type="index" label="序号" width="70" align="center" />
+            <el-table-column prop="NAME" label="名称" min-width="140" show-overflow-tooltip>
+              <template v-slot="scope">
+                <el-link type="primary" :underline="false">{{ scope.row.NAME }}</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column prop="CODE" label="工具标识" width="160" show-overflow-tooltip />
+            <el-table-column prop="DESC" label="工具描述" min-width="220" show-overflow-tooltip />
+          </el-table>
+
+          <el-pagination
+            v-if="sysToolTotal > sysToolPageSize"
+            v-model:current-page="sysToolCurrentPage"
+            :page-size="sysToolPageSize"
+            layout="total, prev, pager, next"
+            :total="sysToolTotal"
+            @current-change="handleSysToolPageChange"
+            style="margin-top: 12px; text-align: right;"
+          />
+        </div>
+
+        <!-- 右侧：已选择列表 -->
+        <div class="api-selected-panel">
+          <div class="panel-header">
+            <span>已选择</span>
+          </div>
+          <div class="selected-list">
+            <div
+              v-for="(sysTool, index) in selectedSysTools"
+              :key="sysTool.ID"
+              class="selected-item"
+            >
+              <div class="item-header">
+                <span class="item-title">{{ sysTool.NAME }}</span>
+                <el-button
+                  type="text"
+                  icon="el-icon-delete-solid"
+                  class="delete-btn"
+                  @click="removeSelectedSysTool(index)"
+                />
+              </div>
+              <div class="item-content">
+                <div class="content-line">工具标识：{{ sysTool.CODE }}</div>
+                <div class="content-line">工具描述：{{ sysTool.DESC }}</div>
+              </div>
+            </div>
+            <div v-if="selectedSysTools.length === 0" class="empty-tip">
+              请从左侧选择内置工具
+            </div>
+          </div>
+          <div class="panel-footer">
+            <span class="count-text">已选择 {{ selectedSysTools.length }} 个</span>
+            <div class="footer-actions">
+              <el-button size="small" @click="sysToolDialogVisible = false">取消</el-button>
+              <el-button size="small" type="primary" @click="confirmSysToolSelection">保存</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- MCP选择对话框 -->
+    <el-dialog
+      title="添加MCP工具"
+      v-model="mcpDialogVisible"
+      width="1100px"
+      :close-on-click-modal="false"
+      class="api-select-dialog"
+    >
+      <div class="api-dialog-content">
+        <!-- 左侧：MCP列表 -->
+        <div class="api-list-panel">
+          <el-table
+            ref="mcpTable"
+            :data="mcpList"
+            height="420"
+            @selection-change="handleMcpSelectionChange"
+          >
+            <el-table-column type="selection" width="50" align="center" />
+            <el-table-column type="index" label="序号" width="70" align="center" />
+            <el-table-column prop="NAME" label="名称" min-width="140" show-overflow-tooltip>
+              <template v-slot="scope">
+                <el-link type="primary" :underline="false">{{ scope.row.NAME }}</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column prop="CODE" label="编号" width="120" show-overflow-tooltip />
+            <el-table-column prop="TYPE" label="请求类型" width="100" show-overflow-tooltip />
+            <el-table-column prop="URL" label="地址" min-width="180" show-overflow-tooltip />
+          </el-table>
+
+          <el-pagination
+            v-if="mcpTotal > mcpPageSize"
+            v-model:current-page="mcpCurrentPage"
+            :page-size="mcpPageSize"
+            layout="total, prev, pager, next"
+            :total="mcpTotal"
+            @current-change="handleMcpPageChange"
+            style="margin-top: 12px; text-align: right;"
+          />
+        </div>
+
+        <!-- 右侧：已选择列表 -->
+        <div class="api-selected-panel">
+          <div class="panel-header">
+            <span>已选择</span>
+          </div>
+          <div class="selected-list">
+            <div
+              v-for="(mcp, index) in selectedMcps"
+              :key="mcp.ID"
+              class="selected-item"
+            >
+              <div class="item-header">
+                <span class="item-title">{{ mcp.NAME }}</span>
+                <el-button
+                  type="primary" link
+                  icon="el-icon-delete-solid"
+                  class="delete-btn"
+                  @click="removeSelectedMcp(index)"
+                />
+              </div>
+              <div class="item-content">
+                <div class="content-line">编号：{{ mcp.CODE }}</div>
+                <div class="content-line">请求类型：{{ mcp.TYPE }}</div>
+                <div class="content-line">地址：{{ mcp.URL }}</div>
+              </div>
+            </div>
+            <div v-if="selectedMcps.length === 0" class="empty-tip">
+              请从左侧选择MCP
+            </div>
+          </div>
+          <div class="panel-footer">
+            <span class="count-text">已选择 {{ selectedMcps.length }} 个</span>
+            <div class="footer-actions">
+              <el-button size="small" @click="mcpDialogVisible = false">取消</el-button>
+              <el-button size="small" type="primary" @click="confirmMcpSelection">保存</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import draggable from '@epxing/core/src/components/draggable'
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-ai-tool-manager',
+  mixins: [component],
+  components: {
+    draggable
+  },
+  computed: {
+    // 子智能体拖拽配置：仅卡片可拖，删除按钮不触发拖拽
+    subAgentDragOptions () {
+      return {
+        animation: 200,
+        draggable: '.subagent-card',
+        filter: '.card-delete-btn',
+        preventOnFilter: false,
+        ghostClass: 'subagent-ghost'
+      }
+    },
+    // 获取子智能体图标URL
+    getSubAgentIcon () {
+      return (tool) => {
+        const imageId = tool['SUB_AGENT|IMAGE']
+        if (imageId) {
+          return this.$util.getFileUrl(imageId)
+        }
+        return require('@/assets/images/app.png')
+      }
+    },
+    // 获取已选择子智能体图标URL
+    getSelectedAgentIcon () {
+      return (agent) => {
+        if (agent.IMAGE) {
+          return this.$util.getFileUrl(agent.IMAGE)
+        }
+        return require('@/assets/images/app.png')
+      }
+    }
+  },
+  data () {
+    return {
+      interfaceTools: [],
+      externalTools: [],
+      mcpTools: [],
+      subAgentTools: [],
+      skillTools: [],
+      sysTools: [],
+      dialogVisible: false,
+      dialogTitle: '新增工具',
+      isEdit: false,
+      submitLoading: false,
+      fileList: [],
+      // 对象接口选择对话框
+      apiDialogVisible: false,
+      apiActiveTab: 'frame',
+      apiList: [],
+      apiTotal: 0,
+      apiCurrentPage: 1,
+      apiPageSize: 10,
+      apiSearchKeyword: '',
+      selectedApis: [],
+      selectedEntity: null,
+      // 通用接口
+      frameApiList: [],
+      frameApiTotal: 0,
+      frameApiCurrentPage: 1,
+      frameApiPageSize: 10,
+      // 外部接口选择对话框
+      externalApiDialogVisible: false,
+      externalApiList: [],
+      externalApiTotal: 0,
+      externalApiCurrentPage: 1,
+      externalApiPageSize: 10,
+      selectedExternalApis: [],
+      // 子智能体选择对话框
+      subAgentDialogVisible: false,
+      subAgentList: [],
+      subAgentTotal: 0,
+      subAgentCurrentPage: 1,
+      subAgentPageSize: 10,
+      selectedSubAgents: [],
+      // 技能选择对话框
+      skillDialogVisible: false,
+      skillActiveTab: 'system',
+      skillList: [],
+      skillTotal: 0,
+      skillCurrentPage: 1,
+      skillPageSize: 10,
+      selectedSkills: [],
+      // MCP选择对话框
+      mcpDialogVisible: false,
+      mcpList: [],
+      mcpTotal: 0,
+      mcpCurrentPage: 1,
+      mcpPageSize: 10,
+      selectedMcps: [],
+      // 内置工具选择对话框
+      sysToolDialogVisible: false,
+      sysToolList: [],
+      sysToolTotal: 0,
+      sysToolCurrentPage: 1,
+      sysToolPageSize: 10,
+      selectedSysTools: [],
+      formData: {
+        ID: '',
+        NAME: '',
+        TYPE: '',
+        DESC: '',
+        ACTION: '',
+        META: '',
+        API: '',
+        TOKEN: '',
+        MCP_URL: '',
+        WORKFLOW: '',
+        SKILL_FILE: '',
+        ENABLE: 1,
+        CONFIRM: 0,
+        FORM_PAGE: '',
+        RESULT_PAGE: '',
+        USE_FORM_PAGE: 0,
+        USE_RESULT_PAGE: 0
+      },
+      formRules: {
+        NAME: [
+          { required: true, message: '请输入工具名称', trigger: 'blur' }
+        ],
+        TYPE: [
+          { required: true, message: '请选择工具类型', trigger: 'change' }
+        ],
+        DESC: [
+          { required: true, message: '请输入工具描述', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.loadTools()
+  },
+  methods: {
+    // 加载工具列表
+    loadTools () {
+      this.$http.list({
+        action: 'list',
+        entityId: 'FM_AI_TOOL',
+        'scope.AGENT': this.$query.id,
+        order_field: 'ORDER',
+        order_mode: 'asc',
+        columnFieldNames: 'ID,NAME#,TYPE,DESC,ORDER,ACTION,META#,API,TOKEN,MCP_URL,WORKFLOW,SKILL_FILE,ENABLE,CONFIRM,FORM_PAGE,RESULT_PAGE,USE_FORM_PAGE,USE_RESULT_PAGE,API|LABEL,API|NAME,API|ENTITY#,API|PARAM_EXPLAIN,API|FRAME_API,OUT_API|NOTICE,SUB_AGENT|NAME,SUB_AGENT|AGENT_PROMPT,SUB_AGENT|CODE,SUB_AGENT|IMAGE,SKILL,SKILL|NAME,SKILL|CODE,SKILL|DESC,MCP,MCP|NAME,MCP|CODE,MCP|TYPE,MCP|URL,MCP|COMMAND,SYS_TOOL,SYS_TOOL|NAME,SYS_TOOL|CODE,SYS_TOOL|DESC'
+      })
+        .then(data => {
+          const tools = data.entitys || []
+          this.interfaceTools = tools.filter(t => t.TYPE === 'function')
+          this.externalTools = tools.filter(t => t.TYPE === 'api')
+          this.mcpTools = tools.filter(t => t.TYPE === 'mcp')
+          this.subAgentTools = tools.filter(t => t.TYPE === 'subagent')
+          this.skillTools = tools.filter(t => t.TYPE === 'skills')
+          this.sysTools = tools.filter(t => t.TYPE === 'sys_tool')
+        })
+        .catch(err => {
+          this.$message.error(err.message || '加载工具列表失败')
+        })
+    },
+
+    // 新增工具
+    handleAdd (type) {
+      if (type === 'interface') {
+        // 对象接口工具直接打开接口选择对话框
+        this.showApiDialog()
+      } else if (type === 'external') {
+        // 外部接口工具打开外部接口选择对话框
+        this.showExternalApiDialog()
+      } else if (type === 'subagent') {
+        // 子智能体工具打开子智能体选择对话框
+        this.showSubAgentDialog()
+      } else if (type === 'skill') {
+        // 技能打开技能选择对话框
+        this.showSkillDialog()
+      } else if (type === 'mcp') {
+        // MCP工具打开MCP选择对话框
+        this.showMcpDialog()
+      } else if (type === 'systool') {
+        // 内置工具打开内置工具选择对话框
+        this.showSysToolDialog()
+      } else {
+        // 其他类型打开表单对话框
+        this.isEdit = false
+        this.dialogTitle = '新增工具'
+        this.dialogVisible = true
+        this.fileList = []
+        this.formData = {
+          ID: '',
+          NAME: '',
+          TYPE: type,
+          DESC: '',
+          ACTION: '',
+          META: '',
+          API: '',
+          TOKEN: '',
+          MCP_URL: '',
+          WORKFLOW: '',
+          SKILL_FILE: '',
+          ENABLE: 1,
+          CONFIRM: 0,
+          FORM_PAGE: '',
+          RESULT_PAGE: '',
+          USE_FORM_PAGE: 0,
+          USE_RESULT_PAGE: 0
+        }
+      }
+    },
+
+    // 编辑工具
+    handleEdit (tool) {
+      this.isEdit = true
+      this.dialogTitle = '编辑工具'
+      this.dialogVisible = true
+      this.fileList = tool.SKILL_FILE ? [{ name: tool.SKILL_FILE }] : []
+      this.formData = { ...tool }
+    },
+
+    // 删除工具
+    handleDelete (tool) {
+      this.$confirm('确定要删除该工具吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http.removeMulti({
+          entityId: 'FM_AI_TOOL',
+          ids: tool.ID
+        })
+          .then(() => {
+            this.$message.success('删除成功')
+            this.loadTools()
+          })
+          .catch(err => {
+            this.$message.error(err.message || '删除失败')
+          })
+      }).catch(() => {})
+    },
+
+    // 下拉菜单命令
+    handleCommand (command, tool) {
+      if (command === 'edit') {
+        this.handleEdit(tool)
+      } else if (command === 'delete') {
+        this.handleDelete(tool)
+      }
+    },
+
+    // 文件上传
+    handleFileChange (file, fileList) {
+      this.fileList = fileList
+      this.formData.SKILL_FILE = file.name
+    },
+
+    // 显示对象接口选择对话框
+    showApiDialog () {
+      this.apiDialogVisible = true
+      this.apiSearchKeyword = ''
+      this.apiCurrentPage = 1
+      this.selectedApis = []
+      this.selectedEntity = null
+      this.apiList = []
+      this.apiTotal = 0
+      this.apiActiveTab = 'frame'
+      this.frameApiCurrentPage = 1
+      this.frameApiList = []
+      this.frameApiTotal = 0
+      this.loadFrameApiList()
+    },
+
+    // 标签页切换
+    handleApiTabChange (tab) {
+      if (tab.name === 'frame' && this.frameApiList.length === 0) {
+        this.loadFrameApiList()
+      }
+    },
+
+    // 加载通用接口列表
+    loadFrameApiList () {
+      this.$http.list({
+        action: 'list',
+        entityId: 'FM_ENTITY_API',
+        page: this.frameApiCurrentPage,
+        limit: this.frameApiPageSize,
+        'scope.FRAME_API': '1',
+        columnFieldNames: 'ID,ENTITY#,NAME,LABEL#,PARAM_EXPLAIN,FRAME_API'
+      })
+        .then(data => {
+          this.frameApiList = data.entitys || []
+          this.frameApiTotal = data.total || 0
+        })
+        .catch(err => {
+          this.$message.error(err.message || '加载通用接口列表失败')
+        })
+    },
+
+    // 通用接口分页切换
+    handleFrameApiPageChange (page) {
+      this.frameApiCurrentPage = page
+      this.loadFrameApiList()
+    },
+
+    // 对象选择变化
+    handleEntityChange (value) {
+      this.selectedEntity = value
+      this.apiCurrentPage = 1
+      this.loadApiList()
+    },
+
+    // 加载对象接口列表
+    loadApiList () {
+      // 如果没有选择对象，不加载列表
+      if (!this.selectedEntity) {
+        this.apiList = []
+        this.apiTotal = 0
+        return
+      }
+
+      const params = {
+        action: 'getEntityAllApi',
+        entityId: 'FM_ENTITY_API',
+        metaId: this.selectedEntity.id || this.selectedEntity
+      }
+
+      this.$http.list(params)
+        .then(data => {
+          this.apiList = data.entitys || []
+          this.apiTotal = this.apiList.length
+        })
+        .catch(err => {
+          this.$message.error(err.message || '加载接口列表失败')
+        })
+    },
+
+    // 搜索接口
+    handleApiSearch () {
+      this.apiCurrentPage = 1
+      this.loadApiList()
+    },
+
+    // 分页切换
+    handleApiPageChange (page) {
+      this.apiCurrentPage = page
+      this.loadApiList()
+    },
+
+    // 接口选择变化
+    handleApiSelectionChange (selection) {
+      // 保留不同标签页的已选项，合并去重
+      const isFrame = this.apiActiveTab === 'frame'
+      // 给选中项打标记
+      const tagged = selection.map(item => ({ ...item, _isFrame: isFrame }))
+      // 过滤掉当前标签页的旧选项，保留另一标签页的选项
+      const otherTab = this.selectedApis.filter(a => a._isFrame !== isFrame)
+      this.selectedApis = [...otherTab, ...tagged]
+    },
+
+    // 移除已选择的接口
+    removeSelectedApi (index) {
+      this.selectedApis.splice(index, 1)
+      // 同步更新表格选中状态
+      this.$refs.apiTable.clearSelection()
+      this.selectedApis.forEach(api => {
+        const row = this.apiList.find(item => item.ID === api.ID)
+        if (row) {
+          this.$refs.apiTable.toggleRowSelection(row, true)
+        }
+      })
+    },
+
+    // 确认接口选择
+    confirmApiSelection () {
+      if (this.selectedApis.length === 0) {
+        this.$message.warning('请至少选择一个接口')
+        return
+      }
+
+      // 批量创建工具
+      const promises = this.selectedApis.map(api => {
+        const toolData = {
+          NAME: api.LABEL,
+          TYPE: 'function',
+          DESC: api.PARAM_EXPLAIN || api.LABEL,
+          ACTION: api.ID,
+          META: api.ENTITY || this.selectedEntity.id,
+          AGENT: this.$query.id,
+          CLIENT: this.CLIENT,
+          SYSTEM: this.SYSTEM,
+          ENABLE: '1'
+        }
+
+        return this.$http.save({
+          action: 'save',
+          entityId: 'FM_AI_TOOL',
+          bean: toolData
+        })
+      })
+
+      Promise.all(promises)
+        .then(() => {
+          this.$message.success(`成功创建 ${this.selectedApis.length} 个工具`)
+          this.apiDialogVisible = false
+          this.loadTools()
+        })
+        .catch(err => {
+          this.$message.error(err.message || '创建工具失败')
+        })
+    },
+
+    // 显示外部接口选择对话框
+    showExternalApiDialog () {
+      this.externalApiDialogVisible = true
+      this.externalApiCurrentPage = 1
+      this.selectedExternalApis = []
+      this.loadExternalApiList()
+    },
+
+    // 加载外部接口列表
+    loadExternalApiList () {
+      const params = {
+        action: 'list',
+        entityId: 'FM_API_IN',
+        page: this.externalApiCurrentPage,
+        limit: this.externalApiPageSize,
+        columnFieldNames: 'ID,CLIENT#,SYSTEM#,ENV#,NAME#,URL,NOTICE,METHOD,CONTENT_TYPE,ENABLE_RETRY,RETRY_COUNT,REQUEST_TIMEOUT,ASSERTION,ERROR_MSG,API_TYPE#,NEED_AUTH'
+      }
+
+      this.$http.list(params)
+        .then(data => {
+          this.externalApiList = data.entitys || []
+          this.externalApiTotal = data.total || 0
+        })
+        .catch(err => {
+          this.$message.error(err.message || '加载外部接口列表失败')
+        })
+    },
+
+    // 外部接口分页切换
+    handleExternalApiPageChange (page) {
+      this.externalApiCurrentPage = page
+      this.loadExternalApiList()
+    },
+
+    // 外部接口选择变化
+    handleExternalApiSelectionChange (selection) {
+      this.selectedExternalApis = selection
+    },
+
+    // 移除已选择的外部接口
+    removeSelectedExternalApi (index) {
+      this.selectedExternalApis.splice(index, 1)
+      // 同步更新表格选中状态
+      this.$refs.externalApiTable.clearSelection()
+      this.selectedExternalApis.forEach(api => {
+        const row = this.externalApiList.find(item => item.ID === api.ID)
+        if (row) {
+          this.$refs.externalApiTable.toggleRowSelection(row, true)
+        }
+      })
+    },
+
+    // 确认外部接口选择
+    confirmExternalApiSelection () {
+      if (this.selectedExternalApis.length === 0) {
+        this.$message.warning('请至少选择一个接口')
+        return
+      }
+
+      // 批量创建工具
+      const promises = this.selectedExternalApis.map(api => {
+        const toolData = {
+          NAME: api.NAME,
+          TYPE: 'api',
+          DESC: api.NOTICE || api.NAME,
+          API: api.ID,
+          AGENT: this.$query.id,
+          CLIENT: this.CLIENT,
+          SYSTEM: this.SYSTEM,
+          ENABLE: '1'
+        }
+
+        return this.$http.save({
+          action: 'save',
+          entityId: 'FM_AI_TOOL',
+          bean: toolData
+        })
+      })
+
+      Promise.all(promises)
+        .then(() => {
+          this.$message.success(`成功创建 ${this.selectedExternalApis.length} 个工具`)
+          this.externalApiDialogVisible = false
+          this.loadTools()
+        })
+        .catch(err => {
+          this.$message.error(err.message || '创建工具失败')
+        })
+    },
+
+    // 显示子智能体选择对话框
+    showSubAgentDialog () {
+      this.subAgentDialogVisible = true
+      this.subAgentCurrentPage = 1
+      this.selectedSubAgents = []
+      this.loadSubAgentList()
+    },
+
+    // 加载子智能体列表
+    loadSubAgentList () {
+      const params = {
+        action: 'list',
+        entityId: 'FM_SERVICE',
+        page: this.subAgentCurrentPage,
+        limit: this.subAgentPageSize,
+        'scope.TYPE': 'agent',
+        columnFieldNames: 'ID,CLIENT#,SYSTEM#,NAME#,CODE,STATUS#,AGENT_PROMPT,AGENT_TYPE,IMAGE'
+      }
+
+      this.$http.list(params)
+        .then(data => {
+          this.subAgentList = data.entitys || []
+          this.subAgentTotal = data.total || 0
+        })
+        .catch(err => {
+          this.$message.error(err.message || '加载子智能体列表失败')
+        })
+    },
+
+    // 子智能体分页切换
+    handleSubAgentPageChange (page) {
+      this.subAgentCurrentPage = page
+      this.loadSubAgentList()
+    },
+
+    // 子智能体拖拽排序结束，保存新的排序号
+    handleSubAgentDragEnd (evt) {
+      if (evt.oldIndex === evt.newIndex) return
+      const orderString = this.subAgentTools.reduce((str, tool, index) => (str += tool.ID + ':' + (index + 1) + ','), '')
+      this.$http.$post({
+        action: 'moveList',
+        entityId: 'FM_AI_TOOL',
+        orderString
+      })
+        .then(() => {
+          this.$message.success('排序成功')
+          this.loadTools()
+        })
+        .catch(err => {
+          this.$message.error(err.message || '排序失败')
+          this.loadTools()
+        })
+    },
+
+    // 子智能体选择变化
+    handleSubAgentSelectionChange (selection) {
+      this.selectedSubAgents = selection
+    },
+
+    // 移除已选择的子智能体
+    removeSelectedSubAgent (index) {
+      this.selectedSubAgents.splice(index, 1)
+      // 同步更新表格选中状态
+      this.$refs.subAgentTable.clearSelection()
+      this.selectedSubAgents.forEach(agent => {
+        const row = this.subAgentList.find(item => item.ID === agent.ID)
+        if (row) {
+          this.$refs.subAgentTable.toggleRowSelection(row, true)
+        }
+      })
+    },
+
+    // 确认子智能体选择
+    confirmSubAgentSelection () {
+      if (this.selectedSubAgents.length === 0) {
+        this.$message.warning('请至少选择一个子智能体')
+        return
+      }
+
+      // 批量创建工具
+      const promises = this.selectedSubAgents.map(agent => {
+        const toolData = {
+          NAME: agent.NAME,
+          TYPE: 'subagent',
+          DESC: agent.AGENT_PROMPT || agent.NAME,
+          SUB_AGENT: agent.ID,
+          AGENT: this.$query.id,
+          CLIENT: this.CLIENT,
+          SYSTEM: this.SYSTEM,
+          ENABLE: '1'
+        }
+
+        return this.$http.save({
+          action: 'save',
+          entityId: 'FM_AI_TOOL',
+          bean: toolData
+        })
+      })
+
+      Promise.all(promises)
+        .then(() => {
+          this.$message.success(`成功创建 ${this.selectedSubAgents.length} 个工具`)
+          this.subAgentDialogVisible = false
+          this.loadTools()
+        })
+        .catch(err => {
+          this.$message.error(err.message || '创建工具失败')
+        })
+    },
+
+    // 显示技能选择对话框
+    showSkillDialog () {
+      this.skillDialogVisible = true
+      this.skillActiveTab = 'system'
+      this.skillCurrentPage = 1
+      this.selectedSkills = []
+      this.loadSkillList()
+    },
+
+    // 加载技能列表
+    loadSkillList () {
+      const params = {
+        action: 'list',
+        entityId: 'FM_AI_SKILL',
+        page: this.skillCurrentPage,
+        limit: this.skillPageSize,
+        'scope.STATUS': '1',
+        columnFieldNames: 'ID,NAME#,CODE,TYPE#,DESC,STATUS'
+      }
+      if (this.skillActiveTab === 'platform') {
+        params['scope.SYSTEM|CODE'] = window.BASE_SYSTEM_ID
+      } else {
+        params['scope.SYSTEM'] = this.SYSTEM
+      }
+      this.$http.list(params)
+        .then(data => {
+          this.skillList = data.entitys || []
+          this.skillTotal = data.total || 0
+          this.$nextTick(() => this.syncSkillTableSelection())
+        })
+        .catch(err => {
+          this.$message.error(err.message || '加载技能列表失败')
+        })
+    },
+
+    // 同步表格选中状态（保留跨标签页/分页的已选项）
+    syncSkillTableSelection () {
+      if (!this.$refs.skillTable) return
+      this.$refs.skillTable.clearSelection()
+      this.selectedSkills.forEach(skill => {
+        const row = this.skillList.find(item => item.ID === skill.ID)
+        if (row) {
+          this.$refs.skillTable.toggleRowSelection(row, true)
+        }
+      })
+    },
+
+    // 技能标签页切换
+    handleSkillTabChange () {
+      this.skillCurrentPage = 1
+      this.loadSkillList()
+    },
+
+    // 技能分页切换
+    handleSkillPageChange (page) {
+      this.skillCurrentPage = page
+      this.loadSkillList()
+    },
+
+    // 单行勾选/取消勾选
+    handleSkillSelect (selection, row) {
+      const isSelected = selection.includes(row)
+      const idx = this.selectedSkills.findIndex(s => s.ID === row.ID)
+      if (isSelected) {
+        if (idx === -1) {
+          this.selectedSkills.push({ ...row, _tab: this.skillActiveTab })
+        }
+      } else if (idx >= 0) {
+        this.selectedSkills.splice(idx, 1)
+      }
+    },
+
+    // 全选/取消全选（仅影响当前列表内的项）
+    handleSkillSelectAll (selection) {
+      const currentTab = this.skillActiveTab
+      const currentIds = this.skillList.map(item => item.ID)
+      const others = this.selectedSkills.filter(s => !currentIds.includes(s.ID))
+      const tagged = selection.map(item => ({ ...item, _tab: currentTab }))
+      this.selectedSkills = [...others, ...tagged]
+    },
+
+    // 移除已选择的技能
+    removeSelectedSkill (index) {
+      this.selectedSkills.splice(index, 1)
+      this.syncSkillTableSelection()
+    },
+
+    // 确认技能选择
+    confirmSkillSelection () {
+      if (this.selectedSkills.length === 0) {
+        this.$message.warning('请至少选择一个技能')
+        return
+      }
+
+      const promises = this.selectedSkills.map(skill => {
+        const toolData = {
+          NAME: skill.NAME,
+          TYPE: 'skills',
+          DESC: skill.DESC || skill.NAME,
+          SKILL: skill.ID,
+          AGENT: this.$query.id,
+          CLIENT: this.CLIENT,
+          SYSTEM: this.SYSTEM,
+          ENABLE: '1'
+        }
+
+        return this.$http.save({
+          action: 'save',
+          entityId: 'FM_AI_TOOL',
+          bean: toolData
+        })
+      })
+
+      Promise.all(promises)
+        .then(() => {
+          this.$message.success(`成功创建 ${this.selectedSkills.length} 个技能`)
+          this.skillDialogVisible = false
+          this.loadTools()
+        })
+        .catch(err => {
+          this.$message.error(err.message || '创建技能失败')
+        })
+    },
+
+    // 显示MCP选择对话框
+    showMcpDialog () {
+      this.mcpDialogVisible = true
+      this.mcpCurrentPage = 1
+      this.selectedMcps = []
+      this.loadMcpList()
+    },
+
+    // 加载MCP列表
+    loadMcpList () {
+      this.$http.list({
+        action: 'list',
+        entityId: 'FM_AI_MCP',
+        page: this.mcpCurrentPage,
+        limit: this.mcpPageSize,
+        'scope.ENABLE': '1',
+        columnFieldNames: 'ID,NAME#,CODE,TYPE#,URL,COMMAND,TOKEN,ENABLE'
+      })
+        .then(data => {
+          this.mcpList = data.entitys || []
+          this.mcpTotal = data.total || 0
+        })
+        .catch(err => {
+          this.$message.error(err.message || '加载MCP列表失败')
+        })
+    },
+
+    // MCP分页切换
+    handleMcpPageChange (page) {
+      this.mcpCurrentPage = page
+      this.loadMcpList()
+    },
+
+    // MCP选择变化
+    handleMcpSelectionChange (selection) {
+      this.selectedMcps = selection
+    },
+
+    // 移除已选择的MCP
+    removeSelectedMcp (index) {
+      this.selectedMcps.splice(index, 1)
+      this.$refs.mcpTable.clearSelection()
+      this.selectedMcps.forEach(mcp => {
+        const row = this.mcpList.find(item => item.ID === mcp.ID)
+        if (row) {
+          this.$refs.mcpTable.toggleRowSelection(row, true)
+        }
+      })
+    },
+
+    // 确认MCP选择
+    confirmMcpSelection () {
+      if (this.selectedMcps.length === 0) {
+        this.$message.warning('请至少选择一个MCP')
+        return
+      }
+
+      const promises = this.selectedMcps.map(mcp => {
+        const toolData = {
+          NAME: mcp.NAME,
+          TYPE: 'mcp',
+          DESC: mcp.NAME,
+          MCP: mcp.ID,
+          AGENT: this.$query.id,
+          CLIENT: this.CLIENT,
+          SYSTEM: this.SYSTEM,
+          ENABLE: '1'
+        }
+
+        return this.$http.save({
+          action: 'save',
+          entityId: 'FM_AI_TOOL',
+          bean: toolData
+        })
+      })
+
+      Promise.all(promises)
+        .then(() => {
+          this.$message.success(`成功创建 ${this.selectedMcps.length} 个MCP工具`)
+          this.mcpDialogVisible = false
+          this.loadTools()
+        })
+        .catch(err => {
+          this.$message.error(err.message || '创建MCP工具失败')
+        })
+    },
+
+    // 显示内置工具选择对话框
+    showSysToolDialog () {
+      this.sysToolDialogVisible = true
+      this.sysToolCurrentPage = 1
+      this.selectedSysTools = []
+      this.loadSysToolList()
+    },
+
+    // 加载内置工具列表
+    loadSysToolList () {
+      this.$http.list({
+        action: 'list',
+        entityId: 'FM_AI_SYS_TOOL',
+        page: this.sysToolCurrentPage,
+        limit: this.sysToolPageSize,
+        'scope.ENABLE': '1',
+        columnFieldNames: 'ID,NAME,CODE,DESC,ENABLE'
+      })
+        .then(data => {
+          this.sysToolList = data.entitys || []
+          this.sysToolTotal = data.total || 0
+        })
+        .catch(err => {
+          this.$message.error(err.message || '加载内置工具列表失败')
+        })
+    },
+
+    // 内置工具分页切换
+    handleSysToolPageChange (page) {
+      this.sysToolCurrentPage = page
+      this.loadSysToolList()
+    },
+
+    // 内置工具选择变化
+    handleSysToolSelectionChange (selection) {
+      this.selectedSysTools = selection
+    },
+
+    // 移除已选择的内置工具
+    removeSelectedSysTool (index) {
+      this.selectedSysTools.splice(index, 1)
+      this.$refs.sysToolTable.clearSelection()
+      this.selectedSysTools.forEach(sysTool => {
+        const row = this.sysToolList.find(item => item.ID === sysTool.ID)
+        if (row) {
+          this.$refs.sysToolTable.toggleRowSelection(row, true)
+        }
+      })
+    },
+
+    // 确认内置工具选择
+    confirmSysToolSelection () {
+      if (this.selectedSysTools.length === 0) {
+        this.$message.warning('请至少选择一个内置工具')
+        return
+      }
+
+      const promises = this.selectedSysTools.map(sysTool => {
+        const toolData = {
+          NAME: sysTool.NAME,
+          TYPE: 'sys_tool',
+          DESC: sysTool.DESC || sysTool.NAME,
+          SYS_TOOL: sysTool.ID,
+          AGENT: this.$query.id,
+          CLIENT: this.CLIENT,
+          SYSTEM: this.SYSTEM,
+          ENABLE: '1'
+        }
+
+        return this.$http.save({
+          action: 'save',
+          entityId: 'FM_AI_TOOL',
+          bean: toolData
+        })
+      })
+
+      Promise.all(promises)
+        .then(() => {
+          this.$message.success(`成功创建 ${this.selectedSysTools.length} 个内置工具`)
+          this.sysToolDialogVisible = false
+          this.loadTools()
+        })
+        .catch(err => {
+          this.$message.error(err.message || '创建内置工具失败')
+        })
+    },
+
+    // 提交表单
+    handleSubmit () {
+      this.$refs.toolForm.validate(valid => {
+        if (valid) {
+          this.submitLoading = true
+          const action = this.isEdit ? 'update' : 'save'
+          this.$http[action]({
+            action,
+            entityId: 'FM_AI_TOOL',
+            entity: JSON.stringify(this.formData)
+          })
+            .then(() => {
+              this.$message.success(this.isEdit ? '更新成功' : '新增成功')
+              this.dialogVisible = false
+              this.loadTools()
+            })
+            .catch(err => {
+              this.$message.error(err.message || '操作失败')
+            })
+            .finally(() => {
+              this.submitLoading = false
+            })
+        }
+      })
+    },
+
+    // 点击技能卡片打开页面弹窗
+    handleSkillClick (skill) {
+      if (!this.$configs.skillPageId) {
+        this.$message.warning('未配置技能页面')
+        return
+      }
+      this.goPage({
+        pageId: this.$configs.skillPageId,
+        openMode: '2',
+        params: {
+          id: skill.SKILL
+        }
+      })
+    },
+
+    // 点击对象接口查看接口文档
+    handleApiClick (tool) {
+      if (!this.$configs.apiPageId) {
+        this.$message.warning('未配置接口文档页面')
+        return
+      }
+      this.goPage({
+        pageId: this.$configs.apiPageId,
+        openMode: '2',
+        params: {
+          metaId: tool['API|ENTITY'] || tool.META,
+          api: tool['API|NAME']
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ai-tool-manager {
+  padding: 10px 0;
+  background: var(--epx-bg);
+  min-height: 100vh;
+}
+
+.tool-section {
+  margin-bottom: 20px;
+  background: var(--epx-bg-card);
+  padding: 20px;
+  border-radius: var(--epx-radius-l);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.section-header {
+  margin-bottom: 16px;
+  padding-left: 12px;
+  border-left: 3px solid #409eff;
+}
+
+.section-title {
+  font-size: var(--epx-font-size-l);
+  font-weight: 600;
+  color: var(--epx-text);
+}
+
+.tool-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+}
+
+.tool-card {
+  background: #F1FAFF;
+  border: 1px solid var(--epx-border);
+  border-radius: var(--epx-radius-l);
+  padding: 12px 16px;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.tool-card.skill-card {
+  background: #FFF0F8;
+}
+
+.tool-card.interface-card {
+  background: #F1FAFF;
+}
+
+.tool-card.mcp-card {
+  background: #E6F8EB;
+}
+
+.tool-card.sys-tool-card {
+  background: #FFF8E1;
+}
+
+.tool-card.subagent-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: #F1F0FF;
+  border-color: var(--epx-border);
+  cursor: move;
+}
+
+/* 拖拽排序时的占位卡片 */
+.tool-card.subagent-ghost {
+  opacity: 0.5;
+  border: 1px dashed #409eff;
+}
+
+.tool-card.external-card {
+  background: #FFF6ED;
+  border-color: var(--epx-border);
+}
+
+.card-icon-wrapper {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: var(--epx-radius-l);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--epx-bg-card);
+}
+
+.card-icon-wrapper img {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+
+.card-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.tool-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.tool-card:hover .card-delete-btn {
+  opacity: 1;
+}
+
+.tool-card.clickable:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-color: #409eff;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 8px;
+}
+
+.card-header-left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 8px;
+}
+
+.card-icon {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border-radius: var(--epx-radius-base);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--epx-bg-card);
+}
+
+.card-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card-title {
+  font-size: var(--epx-font-size-base);
+  font-weight: 600;
+  color: var(--epx-text);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
+}
+
+.card-code {
+  font-size: var(--epx-font-size-base);
+  font-weight: 400;
+  color: var(--epx-text-secondary);
+  margin-left: 4px;
+  flex-shrink: 0;
+}
+
+.card-title-group {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  gap: 4px;
+}
+
+.card-delete-btn {
+  padding: 0 !important;
+  margin-left: 12px;
+  font-size: var(--epx-font-size-l);
+  color: #f56c6c;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.3s;
+  min-width: auto;
+}
+
+.card-delete-btn:hover {
+  color: #f56c6c;
+}
+
+.card-delete-btn  :deep(i) {
+  font-size: var(--epx-font-size-l);
+}
+
+.card-tag-frame {
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
+.card-content .card-line {
+  font-size: var(--epx-font-size-base);
+  line-height: 1.5;
+  color: var(--epx-text);
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+
+.card-content .card-line:last-child {
+  margin-bottom: 0;
+}
+
+.tool-card.add-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 102px;
+  border: 2px dashed var(--epx-border);
+  background: transparent;
+}
+
+.tool-card.add-card:hover {
+  border-color: #409eff;
+  background: transparent;
+}
+
+.add-icon {
+  font-size: 48px;
+  color: var(--epx-text-secondary);
+  margin-bottom: 8px;
+  line-height: 1;
+}
+
+.add-text {
+  font-size: var(--epx-font-size-base);
+  color: var(--epx-text);
+}
+
+/* 当前页面所有弹窗的统一样式 */
+.ai-tool-manager  :deep(.el-dialog) {
+  border-radius: var(--epx-radius-l);
+  overflow: hidden;
+}
+
+.ai-tool-manager  :deep(.el-dialog__header) {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--epx-border);
+}
+
+.ai-tool-manager  :deep(.el-dialog__title) {
+  font-size: var(--epx-font-size-l);
+  font-weight: 500;
+}
+
+.ai-tool-manager  :deep(.el-dialog__headerbtn) {
+  top: 16px;
+  right: 20px;
+}
+
+.ai-tool-manager  :deep(.el-dialog__body) {
+  max-height: 80vh;
+  overflow-y: auto;
+  padding: 0;
+}
+
+/* 对象接口选择对话框特殊样式 */
+.api-select-dialog  :deep(.el-dialog__body) {
+  padding: 0;
+}
+
+.api-select-dialog  :deep(.el-dialog__footer) {
+  display: none;
+}
+
+.api-dialog-content {
+  display: flex;
+  gap: 0;
+  height: 500px;
+}
+
+.api-list-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 12px 16px 16px;
+  background: var(--epx-bg-card);
+}
+
+.filter-bar {
+  margin-bottom: 12px;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+}
+
+.filter-item label {
+  font-size: var(--epx-font-size-base);
+  color: var(--epx-text);
+  margin-right: 8px;
+  white-space: nowrap;
+}
+
+.filter-item  :deep(.epx-object) {
+  flex: 1;
+}
+
+.api-list-panel  :deep(.el-table) {
+  font-size: 13px;
+}
+
+.api-list-panel  :deep(.el-table th) {
+  background: transparent;
+  color: var(--epx-text);
+  font-weight: 600;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--epx-border);
+}
+
+.api-list-panel  :deep(.el-table td) {
+  padding: 8px 0;
+  border-bottom: 1px solid var(--epx-border);
+}
+
+.api-list-panel  :deep(.el-table .el-table__header-wrapper .el-checkbox .el-checkbox__inner) {
+  border-color: var(--epx-border);
+}
+
+.api-list-panel  :deep(.el-table::before) {
+  display: none;
+}
+
+.api-list-panel  :deep(.el-table .el-table__row:hover) {
+  background: var(--epx-bg);
+}
+
+.api-list-panel  :deep(.el-table .el-table__body tr.current-row > td) {
+  background-color: transparent !important;
+}
+
+.api-list-panel  :deep(.el-pagination) {
+  padding: 8px 0 0;
+}
+
+.empty-table-tip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 360px;
+  color: var(--epx-text-secondary);
+}
+
+.empty-table-tip i {
+  font-size: 48px;
+  margin-bottom: 12px;
+}
+
+.empty-table-tip p {
+  font-size: var(--epx-font-size-base);
+  margin: 0;
+}
+
+.api-tabs  :deep(.el-tabs__header) {
+  margin-bottom: 12px;
+}
+
+.api-tabs  :deep(.el-tabs__item) {
+  font-size: var(--epx-font-size-base);
+}
+
+.frame-tag {
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
+.item-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.api-selected-panel {
+  width: 340px;
+  border-left: 1px solid var(--epx-border);
+  display: flex;
+  flex-direction: column;
+  background: var(--epx-bg-card);
+}
+
+.panel-header {
+  padding: 10px 16px;
+  background: var(--epx-bg-card);
+  border-bottom: 1px solid var(--epx-border);
+  font-weight: 500;
+  font-size: var(--epx-font-size-base);
+  color: var(--epx-text);
+}
+
+.selected-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background: var(--epx-bg-card);
+}
+
+.selected-item {
+  background: rgba(64, 158, 255, 0.1);
+  border: 1px solid var(--epx-border);
+  border-radius: var(--epx-radius-base);
+  padding: 10px;
+  margin-bottom: 12px;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.selected-item:last-child {
+  margin-bottom: 0;
+}
+
+.selected-item:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.selected-item:hover .delete-btn {
+  opacity: 1;
+}
+
+.item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 10px;
+}
+
+.item-header-left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 8px;
+}
+
+.item-icon {
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  border-radius: var(--epx-radius-base);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--epx-bg-card);
+}
+
+.item-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.item-title {
+  font-size: var(--epx-font-size-base);
+  font-weight: 500;
+  color: var(--epx-text);
+  flex: 1;
+  line-height: 1.5;
+}
+
+.delete-btn {
+  padding: 0;
+  margin-left: 12px;
+  font-size: var(--epx-font-size-l);
+  color: #f56c6c;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.delete-btn:hover {
+  color: #f56c6c;
+}
+
+.delete-btn i {
+  font-size: var(--epx-font-size-l);
+}
+
+.item-content .content-line {
+  font-size: var(--epx-font-size-s);
+  line-height: 1.8;
+  color: var(--epx-text);
+  margin-bottom: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+
+.item-content .content-line:last-child {
+  margin-bottom: 0;
+}
+
+.empty-tip {
+  text-align: center;
+  color: var(--epx-text-secondary);
+  font-size: var(--epx-font-size-base);
+  padding: 60px 0;
+}
+
+.panel-footer {
+  padding: 10px 16px;
+  background: var(--epx-bg-card);
+  border-top: 1px solid var(--epx-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.count-text {
+  font-size: 13px;
+  color: var(--epx-text);
+}
+
+.footer-actions {
+  display: flex;
+  gap: 8px;
+}
+</style>