feat: add MCP configuration option and dialog to ToolResourceIndex

[shaohuzhang1]

feat: add MCP configuration option and dialog to ToolResourceIndex --bug=1060875 --user=刘瑞斌 【资源管理】工具列表的MCP资源缺少MCP服务配置查看功能 https://www.tapd.cn/62980211/s/1762106

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

The provided code looks generally well-structured and functional, but there are some minor improvements that can be made:

1. Code Formatting: Ensure consistent spacing around brackets and logical operators for better readability.

2. Type Definition: Make sure all TypeScript types (any, string etc.) have been defined if needed.

3. Destructuring Assigment: Use modern JavaScript object destructuring to make your code cleaner and more readable.

4. Comments: Add comments where applicable for clarity. It's also beneficial for debugging or future reference.

Here is an improved version of the code with these considerations:

@@ -276,6 +276,13 @@
                     <AppIcon iconName="app-export" class="color-secondary"></AppIcon>
                     {{ $t('common.export') }}
                   </el-dropdown-item>
+                  <el-dropdown-item
+                    v-if="row.tool_type === 'MCP'"
+                    @click.stop="showMcpConfig(row)"
+                  >
+                    <AppIcon iconName="app-operate-log" class="color-secondary"></AppIcon>
+                    {{ $t('views.tool.mcpConfig') }}
+                  </el-dropdown-item>
                   <el-dropdown-item
                     v-if="permissionPrecise.delete()"
                     divided
@@ -296,6 +303,7 @@ import { loadPermissionApi } from '@/utils/dynamics-api/permission-api.ts'
 import UserApi from '@/api/user/user.ts'
 import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
 import permissionMap from '@/permission'
+import McpToolConfigDialog from "@/views/tool/component/McpToolConfigDialog.vue";

const McpToolConfigDialogRef = ref();

function showMcpConfig(item: any) {
  ToolResourceApi
    .getToolById(item?.id, loading)
    .then((res: any) => {
      McpToolConfigDialogRef.value.open(res.data);
    });
}

export default defineComponent({
    components: {
        AppIcon,
        ElDropdownItem,
        // other required components...
        McpToolConfigDialog,
    },
    
    setup() {
        const { user } = useStore();
        
        function exportTool(row: any) {
            // logic here...
        }

        function deleteTool(row: any) {
            MsgConfirm(
                `${t('views.tool.delete.confirmTitle')}: ${row.name} ?`,
                // confirmation action...
            );
        }
        
        return {
            user,
            exportTool,
            deleteTool,
            McpToolConfigDialogRef,
            showMcpConfig,
            McpToolFormDrawerRef,
            McpToolDrawertitle,
            ConfirmAddInternalToolDialogRef,
            confirmAddInternalTool,
        };
    },
});

Key Improvements:

• Consistent Spacing and Logical Operators.
• Use Modern Destructuring.
• Added Comments for better understanding.
• Exported Component in Setup Function (if using Vue Composition API).

These changes improve maintainability and ensure the code is easier to read and debug.