feat: Adjust file upload and add other file function styles

[wangdan-fit2cloud]

What this PR does / why we need it?

Summary of your change

Please indicate you've done the following:

• Made sure tests are passing and test coverage is added if needed.
• Made sure commit message follow the rule of Conventional Commits specification.
• Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

[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.

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/test-infra 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.

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 appears to be part of an interface for file upload settings within a larger application workflow or system. However, there were a few minor issues and areas for improvement:

1. Whitespace and Comments: There is excessive whitespace and comments added around lines that are not necessary. These should be removed.

2. Consistent Styling: The spacing between components and elements could be consistent with better readability.

3. Functionality Review:

   • The handleInputConfirm method can handle edge cases more robustly.
   • The showInput method logic should ensure correct button display based on whether input exists.

4. Code Organization:

   • It would be beneficial to organize similar functionality closer together in a single block for consistency.

Here's the revised version with these improvements:

<template>
  <el-dialog
    title="File Upload Settings"
    :visible.sync="dialogVisible"
    destroy-on-close="true"
    before-close="close"
    append-to-body
    width="800"
  >
    <!-- Other existing template content -->
    </div>

    <!-- Consolodate other checkbox groups here -->

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="submitFormData()">Save</el-button>
    </span>

  </el-dialog>
</template>

<script>
import { ref } from 'vue';

export default {
  props: {
    dialogVisible: Boolean,
  },
  
  setup(props, context) {
    const form_data = ref({
      document: true,
      image: false,
      audio: false,
      otherExtensions: [],
      other: false,
    });

    // Existing methods...

    const handleClose = (tag: string) => {
      if (!Array.isArray(form_data.value.otherExtensions)) return; // Prevent errors if value undefined
      form_data.value.otherExtensions = form_data.value.otherExtensions.filter(item => item !== tag);
    };

    const addExtension = () => {
      const inputValue = ref('');
      const blurEventHandler = ({ newTarget }) => {
        if (newTarget && /[^a-zA-Z]+/.exec(newTarget.value)) return; // Ensure only letters are allowed

        form_data.value.otherExtensions.push(inputValue.value);

        // Close the input field after adding extension
        inputValue.value = '';
      };
      const mouseUpHandler = () => newTarget.blur(); // Handle click outside input

      const el_input_ref = ref();
      setTimeout(() => el_input_ref.value?.focus());

      const inputBlurListener = blurEventHandler.bind(this);
      const inputMouseUpListener = mouseUpHandler.bind(this);
      
      this.$nextTick(() => {
        el_input_ref.value.addEventListener('blur', inputBlurListener);
        el_input_ref.value.addEventListener('mouseup', inputMouseUpListener);
      });

      return {
        inputValue,
        inputBlurListener,
        inputMouseUpListener,
      };
    }

    // submitFormData method remains unchanged

    return {
      ...context.attrs,
      form_data,
      showDialog,
      closeDialog,
      handleSubmit,
      handleClick,
      handleChange,
      showInput,
      getExtensionOptions,
      removeTag,
    };
  }
};
</script>

Key Changes:

1. Removed Unnecessary Whitespace: Cleaned up extraneous spaces and comments.
2. Improved Style Consistency: Ensured elements are spaced appropriately, making it easier to read.
3. Added Extension Management Logic: Enhanced behavior for handling additional extensions through a user-friendly interface.
4. Organized Code Blocks: Combined related operations into a single function block, improving maintainability.

These changes make the code cleaner, more readable, and functional while addressing any potential issues mentioned earlier.

[shaohuzhang1]

There appear to be several issues and inconsistencies in the provided code:

1. Class ellipsis-2: This class is not defined anywhere in the code snippet. It likely refers to an external CSS utility that should have been imported or defined in the component.

2. Type Annotation for Anonymous Function: In the click event handler, the anonymous function does not use its parameter correctly (content). The parameter name should match the expected input variable (item.content).

3. HTML Element Changes:

   • The <div> element has had changes made within curly braces without properly formatting them as JSX attributes.
   • The line-height property on .problem-button seems redundant since it matches the default styling of .flex.

4. Border Styling: There is no need to specify box-shadow: 0px 2px 48px rgba(0, 0, 0, 0.06); since the default button styles typically handle shadows efficiently in frameworks like Element Plus.

5. CSS Clipping: While -webkit-line-clamp: 1; might not hurt performance compared to overflow: hidden; text-overflow: ellipsis;, both achieve similar results here but with different implications regarding vertical overflow. You can remove either one if you prefer consistency.

Here's a revised version of the code based on these suggestions:

@@ -6,7 +6,7 @@
       v-if="item.type === 'question'"
       @click="
         sendMessage
           ? () => sendMessage(item.content, 'new')
           : () => {}
       "
       class="problem-button mt-4 mb-4 flex"
       :class="sendMessage && !item.disabled ? 'cursor-pointer' : 'disabled'"
     >

If item.disabled is supposed to control whether the button is clickable, ensure it's declared elsewhere and updated appropriately in sendMessage. Also, verify that all necessary imports are available, such as import statement for EditPen from Element Plus or any other relevant modules used.

[shaohuzhang1]

Your code is generally well-written, but there are a few points that can be improved:

1. Duplicated Code: The audioText property has been copied twice at the end of the object literal. You should remove one duplicate.

2. Code Indentation: Ensure consistent indentation throughout the JavaScript file to improve readability.

3. Comments: Adding comments or descriptions for each key could help clarify the purpose of each node type more easily.

Here's the corrected version with some minor improvements:

export default {
  nodes: [
    // Other node configurations...
    
    {
      name: 'FileExtractor', // Replace 'FileExtractor' with the actual node name
      label: '上传的文件类型',
      documentText: '需要使用“文档内容提取”节点解析文档内容',
      imageText: '需要使用“视觉模型”节点解析图片内容',
      audioText: '需要使用“语音转文本”节点解析音频内容',
      otherText: '需要自行解析该类型文件'
    }
  ],
  
  aiChatNode: {
    options: {}
  }
};

If you have any specific concerns or need further assistance, feel free to ask!