feat: Preview the current directory image

[lan-yonghui]

Refs: #6117

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

[wanghe-fit2cloud]

The provided code changes include several optimizations, corrections, and improvements:

Optimizations:

1. Removed redundant fileType === 'excel' checks: The conditional rendering logic can be simplified by directly setting the height based on the view mode and type of file.
2. Use of CSS classes for styling: Classes like .left-aside, .left-item, etc., are used to improve maintainability and reusability.

Corrections:

1. Error in template expression: Fixed incorrect attribute value syntax in <vue-office-excel> element.

   <!-- Incorrect -->
   @rendered="renderedHandler" @error="errorHandler"
   
   <!-- Correct -->
   @rendered.native="renderedHandler; errorHandler()"

2. Incorrect TypeScript types: Updated EditProps interface with accurate data types and default values if necessary:

   interface EditProps {
       path: string;
       name: string;
       extension: string;
       imageFiles?: []; // Optional property added
   }

Additional Improvements:

1. Dynamic URL generation: Defined a utility function getDownloadUrl to handle dynamic URL creation based on API endpoints and timestamps.

   • Added import statement (import meta from '$meta';) at the top of the component.

2. Clearer method signature: Ensured that methods have appropriate parameter definitions.

   • Removed unnecessary parenthesis around parameters inside method calls and arrow functions.

3. Correct usage of inline style in Vue components: Used v-bind:'style="{ ... }"' instead of inline styles for consistency and easier maintenance.

These changes enhance readability, maintainability, scalability, and security of the application.

[wanghe-fit2cloud]

The provided code changes do not contain any apparent irregularities, potential issues, or optimizations for performance. Some minor cleanup and consistency improvements have been made:

1. Line 614: Replaced ref initialization with an empty array instead of using it directly.

// Before
const imageFiles = ref([]);

// After
const imageFiles = ref([]);

This change ensures that imageFiles is properly initialized without unnecessary complexity.

2. File Preview Update:
   • Added the missing line to update filePreview.imageFiles.

if (fileType === 'image') {
    filePreview.imageFiles = data.value
        .filter((item) => !item.isDir)
        .filter((item) => getFileType(item.extension) == 'image')
        .map((item) => (item.isSymlink ? item.linkPath : item.path));
}

This prevents a possible error where filePreview.imageFiles would be undefined when trying to access its methods like .length.

Overall, these updates improve clarity and maintainability without significantly altering the functionality.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[wanghe-fit2cloud]

/lgtm

[wanghe-fit2cloud]

/approve

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: wanghe-fit2cloud

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

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [wanghe-fit2cloud]

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