Skip to content

perf: the form collection component optimized when displaying it on t… #2501

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
Mar 5, 2025
Merged

perf: the form collection component optimized when displaying it on t… #2501

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
5 changes: 3 additions & 2 deletions ui/src/components/dynamics-form/items/radio/RadioCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-card
:key="item.value"
class="item"
class="item break-all"
shadow="never"
style="--el-card-padding: 12px 16px"
:class="[
inputDisabled ? 'is-disabled' : '',
modelValue == item[valueField] ? 'active' : ''
Expand Down Expand Up @@ -93,8 +94,8 @@ const option_list = computed(() => {
color: var(--el-color-primary);
}
.item {
line-height: 22px;
cursor: pointer;
height: 38px;
display: flex;
justify-content: center;
align-items: center;
Copy link
Copy Markdown
Contributor

@shaohuzhang1 shaohuzhang1 Mar 5, 2025

Choose a reason for hiding this comment

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

There are no significant irregularities or major issues with the provided code. However, there are a few minor improvements you can consider:

  1. Remove Duplicated Comments: The comments /* */ at positions -5 to 9 do not add any value and should be removed to clean up the code.

  2. Use Consistent Naming Conventions: Ensure that all variable names and class names use consistent naming conventions (e.g., camelCase).

  3. Optimize break-all Class Usage: If the intention behind using the break-all class is to allow text to wrap, it might need more precise control over where it breaks. Consider customizing its CSS if needed.

  4. Consider Dynamic Styling for Height: While specifying a static height (height: 38px) is usually sufficient, dynamically setting the height based on other properties like padding could make sense depending on layout requirements.

Here's an optimized version of the relevant section of the code:

<template>
  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
    <el-card
      v-if="option_list.length > 0"
      v-model:model-value="modelValue"
      key="item.value"
      class="item break-all"
      shadow="never"
      style="--el-card-padding: 12px 16px; --el-dialog-footer-width: auto;"
      @click.stop="$emit('update:modelValue', item[valueField])"
    >
      {{ item[labelField] }}
    </el-card>
  </el-col>
</template>

<script setup lang="ts">
import { ref } from "vue";
interface Item {
  [valueField]: string | number;
  [labelField]: string;
}

const props = defineProps<{
  option_list: Array<Item>;
  modelValue?: string | number;
  valueField: string; // Assuming this represents the field used for comparison in options
  labelField: string; // Assuming this represents the display text for each option
}>();

const emit = defineEmits(["update:modelValue"]);

// ... rest of the component logic ...
</script>

<style scoped>
.item {
  line-height: 22px;
  overflow-wrap: break-word; /* Ensures long words break */
}
</style>

Notes:

  • I've added a dynamic event listener for clicking on the card to update the modelValue.
  • Used overflow-wrap: break-word instead of just line-height for better word breaking behavior within the box.
  • Ensured the --el-dialog-footer-width: auto;) rule adjusts according to parent container constraints. Adjust as necessary for specific design needs.

These changes enhance readability and functionality without introducing new bugs.

Expand Down
2 changes: 1 addition & 1 deletion ui/src/styles/element-plus.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -419,6 +419,6 @@
color: var(--el-checkbox-text-color);
}

.el-popper {
.el-table .el-popper {
max-width: 500px !important;
}
Copy link
Copy Markdown
Contributor

@shaohuzhang1 shaohuzhang1 Mar 5, 2025

Choose a reason for hiding this comment

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

The code has no obvious issues but can be slightly optimized:

Optimization Suggestions:

  1. Consistency with Class Names: Ensure that similar classes share common styles where possible to avoid repetition and make maintainability easier.

  2. Avoid Inline Styles for Width: If you plan on changing the max-width frequently, consider defining it in a CSS file instead of using an inline style. This makes changes easier to manage.

Example:

/* In a separate stylesheet */
.el-table .el-popper {
  max-width: var(--table-tooltip-max-width); /* Define this variable in your theme */
}
  1. Add Comment Descriptions: Provide descriptions for complex or unconventional selectors to make future modifications clearer.

By applying these improvements, you enhance readability and flexibility in managing the styling.