Skip to content

fix: upload file style #2953

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wangdan-fit2cloud merged 1 commit into from
Apr 22, 2025
+28 −22
Merged

fix: upload file style #2953

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 27 additions & 21 deletions ui/src/components/ai-chat/component/chat-input-operate/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,23 +31,25 @@
class="file cursor"
>
<div
class="flex align-center"
class="flex-between align-center"
@mouseenter.stop="mouseenter(item)"
@mouseleave.stop="mouseleave()"
>
<div class="flex align-center">
<img :src="getImgUrl(item && item?.name)" alt="" width="24" />
<div class="ml-4 ellipsis-1" :title="item && item?.name">
{{ item && item?.name }}
</div>
</div>
<div
@click="deleteFile(index, 'document')"
class="delete-icon color-secondary"
v-if="showDelete === item.url"
>
<el-icon>
<el-icon style="font-size: 16px; top: 2px">
<CircleCloseFilled />
</el-icon>
</div>
<img :src="getImgUrl(item && item?.name)" alt="" width="24" />
<div class="ml-4 ellipsis-1" :title="item && item?.name">
{{ item && item?.name }}
</div>
</div>
</el-card>
</el-col>
Expand All @@ -67,23 +69,25 @@
class="file cursor"
>
<div
class="flex align-center"
class="flex-between align-center"
@mouseenter.stop="mouseenter(item)"
@mouseleave.stop="mouseleave()"
>
<div class="flex align-center">
<img :src="getImgUrl(item && item?.name)" alt="" width="24" />
<div class="ml-4 ellipsis-1" :title="item && item?.name">
{{ item && item?.name }}
</div>
</div>
<div
@click="deleteFile(index, 'document')"
class="delete-icon color-secondary"
v-if="showDelete === item.url"
>
<el-icon>
<el-icon style="font-size: 16px; top: 2px">
<CircleCloseFilled />
</el-icon>
</div>
<img :src="getImgUrl(item && item?.name)" alt="" width="24" />
<div class="ml-4 ellipsis-1" :title="item && item?.name">
{{ item && item?.name }}
</div>
</div>
</el-card>
</el-col>
Expand All @@ -100,31 +104,33 @@
>
<el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
<div
class="flex align-center"
class="flex-between align-center"
@mouseenter.stop="mouseenter(item)"
@mouseleave.stop="mouseleave()"
>
<div class="flex align-center">
<img :src="getImgUrl(item && item?.name)" alt="" width="24" />
<div class="ml-4 ellipsis-1" :title="item && item?.name">
{{ item && item?.name }}
</div>
</div>
<div
@click="deleteFile(index, 'audio')"
class="delete-icon color-secondary"
v-if="showDelete === item.url"
>
<el-icon>
<el-icon style="font-size: 16px; top: 2px">
<CircleCloseFilled />
</el-icon>
</div>
<img :src="getImgUrl(item && item?.name)" alt="" width="24" />
<div class="ml-4 ellipsis-1" :title="item && item?.name">
{{ item && item?.name }}
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-space wrap>
<template v-for="(item, index) in uploadImageList" :key="index">
<div
class="file cursor border border-r-4"
class="file file-image cursor border border-r-4"
v-if="item.url"
@mouseenter.stop="mouseenter(item)"
@mouseleave.stop="mouseleave()"
Expand All @@ -134,7 +140,7 @@
class="delete-icon color-secondary"
v-if="showDelete === item.url"
>
<el-icon>
<el-icon style="font-size: 16px; top: 2px">
<CircleCloseFilled />
</el-icon>
</div>
Expand Down Expand Up @@ -939,7 +945,7 @@ onMounted(() => {
}
}
}
.file {
.file-image {
position: relative;
overflow: inherit;

Copy link
Copy Markdown
Contributor

@shaohuzhang1 shaohuzhang1 Apr 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are a few issues and suggestions to improve the provided code:

  1. Duplicate Code: The repeated code block for <template v-for...> can be refactored into a single component. This will make the code cleaner and more maintainable.

  2. Flexbox Layout Improvements:

    • class="flex-between" should be replaced with flex: space-between or similar properties that control equal spacing between elements.
    • You might want to adjust padding or margin styles to ensure better alignment of text within the flex container.

  3. Responsive Design:

    • Ensure that width="24" is responsive if the card or images need to scale down based on window size or other factors.

  4. Icon Styles:

    • There's an issue with the icon style in the delete button where the vertical positioning isn't consistent across different browsers (e.g., Firefox).
      Consider updating the CSS class used for the icons.

  5. Consistent Class Names:

    • Use .color-secondary consistently across all color definitions, e.g., .primary-color, .error-color.
      Also, consider using standard class names like .delete-button instead of custom ones.

  6. Optimization Suggestions:

    • If loading times become problematic due to heavy image processing, consider optimizing image quality during uploads or loading from a CDN.
      Implement lazy loading techniques if possible to reduce initial load time, but be cautious not to sacrifice responsiveness too much.

Here’s a simplified version of how some parts of the code could be improved:

Revised Code Snippet

<!-- Refactored template snippet -->
<template v-for="(item, index) in fileList" :key="index">
  <el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
    <div
      class="file-content flex-between align-center"
      @mouseenter.stop="mouseenter(item)"
      @mouseleave.stop="mouseleave()"
    >
      <div>
        <img :src="getImgUrl(item.name)" alt="" width="24" />
        <span class="ml-4 ellipsis-1">{{ item.name }}</span>
      </div>
      <button @click="deleteFile(index)" class="delete-button color-secondary">
        <circle-close-filled></circle-close-filled>
      </button>
    </div>
  </el-card>
</template>

<style scoped>
.file-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.delete-button {
  background-color: transparent;
  border:none;
  outline: none;
}
</style>

<script setup>
import { CircleCloseFilled } from '@element-plus/icons-vue';
// Other components & logic imports

const fileList = reactive([
  // Your list items here
]);

const getImgUrl = (name) => {
  return `/path/to/images/${encodeURIComponent(name)}.png`;
};
</script>

This revision reduces redundancy by extracting common content and behavior into separate classes, making it easier to maintain and understand.

Expand Down
2 changes: 1 addition & 1 deletion ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@
>
<div class="flex-between">
<div class="flex align-center">
<img class="mr-12" src="@/assets/icon_file-doc.svg" alt="" />
<img class="mr-12" :width="32" src="@/assets/fileType/unknown-icon.svg" alt="" />
<div>
<p class="line-height-22 mt-4">
{{ $t('common.fileUpload.other') }}
Copy link
Copy Markdown
Contributor

@shaohuzhang1 shaohuzhang1 Apr 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code snippet suggests two changes that could potentially improve efficiency and clarity:

  1. Consistent Use of v-bind: The line that modifies the width attribute is using single quotes ('), whereas others use double quotes ("). It's good practice to ensure consistency in template syntax, especially when including variables inside double quotes.

  2. Code Readability:

        >
      >
        <div class="flex-between">
          <div class="flex align-center">

  •          <img class="mr-12" src="@/assets/icon_file-doc.svg" alt="" />

  •          <!-- Add necessary space padding here -->
         <div style="padding-right: 1rem;">


Adding some space padding (e.g., a margin or padding) to the `.div` element can improve its readability and make it visually distinct from neighboring elements.

These minor improvements aim to enhance coding standards and maintainability.

Expand Down