feat: add ToolStoreDescDrawer component and integrate with ToolListContainer

[shaohuzhang1]

chore: update tool_params handling in index.vue --bug=1062339 --user=刘瑞斌 【MCP】MCP节点，从“引用变量” 切换到 “自定义” 没有清空 “引用变量” 的值 https://www.tapd.cn/62980211/s/1782327
feat: add ToolStoreDescDrawer component and integrate with ToolListContainer --story=1019826 --user=刘瑞斌 工具- 工具商店的工具，点击面板可以打开详情抽屉 https://www.tapd.cn/62980211/s/1782377

[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 seems to be a Vue.js component template file that defines an el-drawer dialog for displaying details of a tool. Here's a concise list of some improvements and potential optimizations:

1. Template Cleanup:

   • Remove leading/trailing spaces within lines.
   • Simplify attribute definitions with shorthand.

2. Script Setup Improvements:

   • Use reactive instead of ref when handling complex objects like toolDetail.
   • Inline conditional styles using CSS literals where possible.

3. Markdown Preview Enhancements:

   • Ensure the noImgZoomIn option does not affect other images on the page.
   • Consider adding a placeholder image until the actual Markdown content loads.

4. Component Documentation:

   • Add JSDoc comments to explain public methods (open) and their parameters (e.g., data, detail).
   • Document private properties (like visibleInternalDesc) and how they are used/modified.

5. State Management:

   • Instead of cloning deeply, consider reusing existing data structures if possible, or provide a method to update the detailed content without creating unnecessary copies.

Here’s an updated version with these suggestions addressed:

<template>
  <el-drawer v-model="visibleInternalDesc" size="60%" append-to-body>
    <template #header>
      <div class="flex align-center d-flex justify-content-between m-0 px-4 py-1" style="color: var(--el-color-info)">
        <el-button class="close-btn text-black cursor-pointer" link @click.prevent="toggleDrawer">
          <i class="ri-arrow-left-line mx-1"></i> 返回
        </el-button>
        <h4 class="text-xl font-bold">详情</h4>
      </div>
    </template>

    <div>
      <div class="d-flex justify-content-between mb-8">
        <el-avatar
          v-if="isAppIcon(toolDetail.icon)"
          shape="square"
          :size="64"
          class="m-2"
          bg-color="#fff"
        >
          <img :src="toolDetail.icon" alt="" />
        </el-avatar>
        <div class="pl-2 flex-grow-1">
          <h3>{{ toolDetail.name }}</h3>
          <el-tooltip placement="top-start" trigger="hover" content="描述">
            <p v-if="toolDetail.desc" class="text-gray-700">{{ toolDetail.desc }}</p>
          </el-tooltip>
        </div>
      </div>

      <div class="mb-4">
        <span class="font-medium text-sm">开发者:</span><span class="ml-2 text-base font-semibold">{{
          toolDetail?.author || '未填写' // Handle case where author might be missing
        }}</span>
      </div>

      <md-preview ref="editorRef" editor-id="preview-only" :model-value="markdownContent" bg="none" no-img-zoom-in></md-preview>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
import MdPreview from '@/components/MdPreview.vue';
import { isAppIcon } from "@/utils/common";

// Data declarations
const drawerState = reactive({ visible: false });
const markdownContent = reactive('');
const toolDetail = reactive<any>({});

const toggleDrawer = () => {
  drawerState.visible = !drawerState.visible;
};

const open = (data?: any, detail: any) => {
  Object.assign(toolDetail, detail);
  if (data) {
    markDownContent.value = data;
  }
  drawerState.visible = true;
}

defineExpose({
  open,
});
</script>

<style scoped lang="scss">
.close-btn {
  color: inherit;
}

.card-header {
  h3 {
    margin-bottom: 1rem;
  }
}
</style>

These modifications improve readability, performance, and usability while maintaining functionality.

[shaohuzhang1]

The provided code snippet is mostly clean and well-written, but there is one issue related to the ToolStoreDescDrawer component:

1. Potential Missing Initialization: The ref for toolStoreDescDrawerRef might not be initialized correctly within the same scope where it is being referenced. Ensure that if this ref needs initialization before you call its methods, it should be set up properly.

Additionally, here's a minor suggestion for optimization:

if (data?.version && storeTools.value.some(item => item.id === data.template_id)) {

instead of

storeTools.value.filter((item) => item.id === data.template_id).forEach(() => {})

This change reduces unneccesary iteration over the list when only checking existence.

Other than these changes, the code seems complete and functional, with good separation of concerns and appropriate event handling. Keep in mind that without more context about how storeTools, useRoute(), and t()` functions are used elsewhere in the application, I can't address all aspects, but the issues listed above have been identified as potential areas for improvement.

[shaohuzhang1]

The provided code snippet appears to have a logical error in its @change event handler. The original version attempts to set an empty object as the value for form_data.tool_params[form_data.params_nested][item.label.label] if there is no change, which might not be intended behavior.

Here's a corrected and optimized version of the line:

@change="handleParamChange(item)"

In addition, you should define handleParamChange somewhere in your component file to handle the parameter change more appropriately. This function can then manage state changes based on the new values or trigger further logic as needed.

Example of how you could define this function:

methods: {
  handleParamChange(item) {
    // Handle the change here, e.g., update tool_params
    const label = item.label ? item.label.label : '';
    form_data.tool_params[form_data.params_nested] = { [label]: true }; // Or any other appropriate default value
  }
}

By separating out the logic into a dedicated method, you make the code cleaner and easier to maintain.

---

For a complete example context understanding and adjustments might be required depending on surrounding JavaScript and template structures within the application workflow nodes context. Ensure that you have reviewed related components for proper data flow and interactions with the form.