Skip to content

Pr@main/perf style #2548

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 2 commits into from
Mar 12, 2025
Merged

Pr@main/perf style #2548

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5be90e
fix: Setting avatar save prompt error(#2523)
wangdan-fit2cloud Mar 11, 2025
86726c3
perf: optimization style
wangdan-fit2cloud Mar 12, 2025
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: 4 additions & 1 deletion ui/src/components/ai-chat/KnowledgeSource.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,10 @@
</el-row>
</div>

<div class="border-t color-secondary flex-between mt-12" style="padding-top: 12px">
<div
class="border-t color-secondary flex-between mt-12"
style="padding-top: 12px; padding-bottom: 8px"
>
<div>
<span class="mr-8">
{{ $t('chat.KnowledgeSource.consume') }}: {{ data?.message_tokens + data?.answer_tokens }}
Expand Down
10 changes: 5 additions & 5 deletions ui/src/components/ai-chat/component/answer-content/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<LogoIcon v-else height="32px" width="32px" />
</div>
<div class="content" @mouseup="openControl">
<el-card shadow="always" class="mb-8 border-r-8">
<el-card shadow="always" class="mb-8 border-r-8" style="--el-card-padding: 6px 16px">
<MdRenderer
v-if="
(chatRecord.write_ed === undefined || chatRecord.write_ed === true) &&
Expand All @@ -27,12 +27,12 @@
:send-message="chatMessage"
></MdRenderer>
</template>
<span v-else-if="chatRecord.is_stop" shadow="always">
<p v-else-if="chatRecord.is_stop" shadow="always" style="margin: 0.5rem 0">
{{ $t('chat.tip.stopAnswer') }}
</span>
<span v-else shadow="always">
</p>
<p v-else shadow="always" style="margin: 0.5rem 0">
{{ $t('chat.tip.answerLoading') }} <span class="dotting"></span>
</span>
</p>
<!-- 知识来源 -->
<div v-if="showSource(chatRecord) && index === chatRecord.answer_text_list.length - 1">
<KnowledgeSource :data="chatRecord" :type="application.type" />
Copy link
Copy Markdown
Contributor

@shaohuzhang1 shaohuzhang1 Mar 12, 2025

Choose a reason for hiding this comment

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

The changes proposed involve two main optimizations:

  1. Enhanced MD Renderer Styling: By setting --el-card-padding in the <el-card> component with inline styles (style="..."). This change enhances readability, maintainability, and reduces the need to pass padding props through nested components.

  2. Removed Unnecessary Shadows: The commented-out lines that set shadows (shadow="always" on both the <span> inside the v-else-if conditions) have been removed. While these might be intended for styling purposes, since they do not affect visual output directly, it is cleaner to remove extraneous CSS rules unless absolutely necessary.

Expand Down
9 changes: 5 additions & 4 deletions ui/src/styles/element-plus.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
--el-color-info: #8f959e !important;
--el-disabled-bg-color: #eff0f1 !important;
--el-text-color-primary: #1f2329;
--el-font-line-height-primary: 22px;
}

.el-button {
Expand Down Expand Up @@ -134,7 +135,7 @@
}
.el-message-box__headerbtn {
right: 10px;
top: 15px;
top: 16px;
.el-message-box__close {
font-size: 20px;
}
Expand Down Expand Up @@ -267,7 +268,7 @@
}

.el-select__wrapper.is-disabled {
background-color: var(--el-disabled-bg-color)!important;
background-color: var(--el-disabled-bg-color) !important;
}
.el-select__placeholder {
font-weight: 400;
Expand Down Expand Up @@ -350,7 +351,7 @@
}

.radio_content .is-disabled {
background-color: var(--el-disabled-bg-color)!important;;
background-color: var(--el-disabled-bg-color) !important;
}

.el-input-number.is-controls-right .el-input__wrapper {
Expand Down Expand Up @@ -421,4 +422,4 @@

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

@shaohuzhang1 shaohuzhang1 Mar 12, 2025

Choose a reason for hiding this comment

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

The provided CSS code doesn't have any errors. However, there's a minor issue with the last closing brace on the ".el-input-numb" block (`}") that needs to be closed properly.

Here is your updated code:

/* Previous lines remain unchanged */

.el-table .el-popper {
  max-width: 500px !important;
}

This should fix the syntax error and ensure no additional changes are needed in this snippet. If you need further assistance or modifications, please let me know!

4 changes: 2 additions & 2 deletions ui/src/views/application-overview/component/EditAvatarDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,15 +121,15 @@ function submit() {
if (radioType.value === 'default') {
application.asyncPutApplication(id as string, { icon: defaultIcon }, loading).then((res) => {
emit('refresh')
MsgSuccess(t('views.applicationOverview.appInfo.EditAvatarDialog.setSuccess'))
MsgSuccess(t('common.saveSuccess'))
dialogVisible.value = false
})
} else if (radioType.value === 'custom' && iconFile.value) {
let fd = new FormData()
fd.append('file', iconFile.value.raw)
overviewApi.putAppIcon(id as string, fd, loading).then((res: any) => {
emit('refresh')
MsgSuccess(t('views.applicationOverview.appInfo.EditAvatarDialog.setSuccess'))
MsgSuccess(t('common.saveSuccess'))
dialogVisible.value = false
})
} else {
Expand Down
6 changes: 5 additions & 1 deletion ui/src/views/hit-test/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,14 @@
v-if="first"
:image="emptyImg"
:description="$t('views.application.hitTest.emptyMessage1')"
style="padding-top: 160px"
:image-size="125"
/>
<el-empty
v-else-if="paragraphDetail.length == 0"
:description="$t('views.application.hitTest.emptyMessage2')"
style="padding-top: 160px"
:image-size="125"
/>
<el-row v-else>
<el-col
Expand Down Expand Up @@ -385,7 +389,7 @@ onMounted(() => {})
}

.hit-test-height {
height: calc(var(--app-main-height) - 170px);
height: calc(var(--app-main-height) - 135px);
}
.document-card {
height: 210px;
Copy link
Copy Markdown
Contributor

@shaohuzhang1 shaohuzhang1 Mar 12, 2025

Choose a reason for hiding this comment

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

In your provided code snippet, there are no irregularities or major concerns beyond minor stylistic and functional improvements:

  1. Styling: The use of style directly within elements is acceptable if you want to apply specific styles locally without defining them globally in CSS.

  2. Conditional Rendering Improvements:

    • Adding padding top (padding-top: 160px) might enhance visual appearance and alignment with other components.
    • Specifying an image size can help maintain consistency in the design, but ensure this doesn't clash too much with the existing layout and images.

  3. Row Heights:

    • Increasing the row height from height: 210px; to height: var(--app-main-height) - 135px; ensures more consistent spacing when using flexbox or grid layouts inside .el-row. Make sure this update aligns well with your overall application styling scheme.

Overall, the changes you've made improve readability and potentially usability by providing additional visual guidance and ensuring better alignment across different sections of the component. However, it's important to verify that these adjustments do not negatively impact the user experience or compatibility with other parts of the system.

Expand Down
3 changes: 2 additions & 1 deletion ui/src/workflow/nodes/variable-assign-node/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,8 @@
title="JSON"
v-model="item.value"
:style="{
height: '100px'
height: '100px',
width: '155px'
}"
@submitDialog="(val: string) => (form_data.variable_list[index].value = val)"
/>
Expand Down