Skip to content
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

fix: Fix style confusion #2697

Merged
merged 1 commit into from
Mar 26, 2025
Merged

fix: Fix style confusion #2697

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
1 change: 1 addition & 0 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
@@ -1,5 +1,6 @@
<template>
<div class="item-content mb-16 lighter">

<template v-for="(answer_text, index) in answer_text_list" :key="index">
<div class="avatar mr-8" v-if="application.show_avatar">
<img v-if="application.avatar" :src="application.avatar" height="28px" width="28px" />
Expand Down
21 changes: 17 additions & 4 deletions ui/src/components/ai-chat/component/chat-input-operate/TouchChat.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
:disabled="props.disabled"
>
按住说话
</el-button>
Expand Down Expand Up @@ -47,6 +48,10 @@ const props = defineProps({
start: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['TouchStart', 'TouchEnd'])
Expand All @@ -57,11 +62,19 @@ const dialogVisible = ref(false)
const message = ref('按住说话')

watch(
() => props.time,
(val) => {
if (val && val === 60) {
() => [props.time, props.start],
([time, start]) => {
if (start) {
isTouching.value = true
dialogVisible.value = true
message.value = '松开发送，上滑取消'
if (time === 60) {
dialogVisible.value = false
emit('TouchEnd', isTouching.value)
isTouching.value = false
}
} else {
dialogVisible.value = false
emit('TouchEnd', isTouching.value)
isTouching.value = false
}
}
Expand Down
15 changes: 13 additions & 2 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 @@ -120,6 +120,7 @@
@TouchEnd="TouchEnd"
:time="recorderTime"
:start="!mediaRecorderStatus"
:disabled="loading"
/>
<el-input
v-else
Expand Down Expand Up @@ -149,7 +150,12 @@
</el-button>
</span>
<span class="flex align-center" v-else>
<el-button text @click="startRecording" v-if="mediaRecorderStatus">
<el-button
:disabled="loading"
text
@click="startRecording"
v-if="mediaRecorderStatus"
>
<el-icon>
<Microphone />
</el-icon>
Expand All @@ -166,7 +172,7 @@
</span>
</template>

<template v-if="!startRecorderTime && !recorderLoading">
<template v-if="(!startRecorderTime && !recorderLoading) || mode === 'mobile'">
<span v-if="props.applicationDetails.file_upload_enable" class="flex align-center ml-4">
<el-upload
action="#"
Expand Down Expand Up @@ -515,7 +521,12 @@ const stopRecording = () => {
// 上传录音文件
const uploadRecording = async (audioBlob: Blob) => {
try {
// 非自动发送切换输入框
if (!props.applicationDetails.stt_autosend) {
isMicrophone.value = false
}
recorderLoading.value = true

const formData = new FormData()
formData.append('file', audioBlob, 'recording.mp3')
applicationApi
Expand Down
24 changes: 1 addition & 23 deletions ui/src/components/dynamics-form/items/label/TooltipLabel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,26 +17,4 @@ defineProps<{
tooltip: string
}>()
</script>
<style lang="scss" scoped>
.aiMode-param-dialog {
padding: 8px 8px 24px 8px;

.el-dialog__header {
padding: 16px 16px 0 16px;
}

.el-dialog__body {
padding: 16px !important;
}

.dialog-max-height {
height: 550px;
}

.custom-slider {
.el-input-number.is-without-controls .el-input__wrapper {
padding: 0 !important;
}
}
}
</style>
<style lang="scss" scoped></style>
2 changes: 1 addition & 1 deletion ui/src/locales/lang/zh-CN/views/dataset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default {
datasetName: {
label: '知识库名称',
placeholder: '请输入知识库名称',
requiredMessage: '请输入应用名称'
requiredMessage: '请输入知识库名称'
},
datasetDescription: {
label: '知识库描述',
Expand Down
2 changes: 1 addition & 1 deletion ui/src/locales/lang/zh-Hant/views/dataset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default {
datasetName: {
label: '知識庫名稱',
placeholder: '請輸入知識庫名稱',
requiredMessage: '請輸入應用名稱'
requiredMessage: '請輸入知識庫名稱'
},
datasetDescription: {
label: '知識庫描述',
Expand Down
19 changes: 19 additions & 0 deletions ui/src/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -772,3 +772,22 @@ h5 {
background: #d6e2ff;
line-height: 25px;
}

// 参数设置dialog
.param-dialog {
padding: 8px 8px 24px 8px;
.el-dialog__header {
padding: 16px 16px 0 16px;
}
.el-dialog__body {
padding: 0 !important;
}
.dialog-max-height {
height: 550px;
}
.custom-slider {
.el-input-number.is-without-controls .el-input__wrapper {
padding: 0 !important;
}
}
}
26 changes: 2 additions & 24 deletions ui/src/views/application/component/AIModeParamSettingDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<el-dialog
align-center
:title="$t('common.paramSetting')"
class="aiMode-param-dialog"
class="param-dialog"
v-model="dialogVisible"
style="width: 550px"
append-to-body
Expand Down Expand Up @@ -89,26 +89,4 @@ const submit = async () => {
defineExpose({ open, reset_default })
</script>

<style lang="scss" scoped>
.aiMode-param-dialog {
padding: 8px 8px 24px 8px;

.el-dialog__header {
padding: 16px 16px 0 16px;
}

.el-dialog__body {
padding: 16px !important;
}

.dialog-max-height {
height: 550px;
}

.custom-slider {
.el-input-number.is-without-controls .el-input__wrapper {
padding: 0 !important;
}
}
}
</style>
<style lang="scss" scoped></style>
Copy link
Contributor

Choose a reason for hiding this comment

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

The provided code looks mostly correct, but there are some minor areas for improvement:

  1. Remove Unused CSS Classes:
    The dialog-max-height class is not used anywhere in the component, so you can remove it.

  2. Simplify SCSS Styles:
    Some styles like .el-input-number.is-without-controls .el-input__wrapper { padding: 0 !important; } could be simplified to a base style that applies when specific classes are present.

Here's the updated code with these improvements:

<template>
  <el-dialog
    align-center
    :title="$t('common.paramSetting')"
    class="param-dialog"
    v-model="dialogVisible"
    style="width: 550px"
    append-to-body
  >
    <!-- Component content goes here -->
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const dialogVisible = ref(false)
// Other data props and methods go here

defineExpose({ open, reset_default })
</script>

<style scoped lang="scss">
.param-dialog {
  padding: 8px 8px 24px 8px;

  .el-dialog__header {
    padding: 16px 16px 0 16px;
  }

  .el-dialog__body {
    padding: 16px !important;
  }

  // Simplified custom input number wrapper styling
  .el-input-number.is-without-controls.el-input__wrapper {
    padding-right: calc(2 * var(--el-padding-base));
  }
}
</style>

Key Changes:

  • Removed the dialog-max-height class.
  • Simplified the .el-input-number.is-without-controls el-input__wrapper styling by removing padding-left, which was redundant given the current padding on both sides (var(--el-padding-base)).

These changes make the code cleaner and more efficient while preserving its functionality.

2 changes: 1 addition & 1 deletion ui/src/views/application/component/AddDatasetDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ const refresh = () => {

defineExpose({ open })
</script>
<style lang="scss" scoped>
<style lang="scss">
.addDataset-dialog {
padding: 0;
.el-dialog__header {
Expand Down
41 changes: 13 additions & 28 deletions ui/src/views/application/component/McpServersDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,21 @@
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<el-form label-position="top" ref="paramFormRef" :model="form"
require-asterisk-position="right">
<el-form
label-position="top"
ref="paramFormRef"
:model="form"
require-asterisk-position="right"
>
<el-form-item label="MCP" prop="mcp_enable">
<el-switch v-model="form.mcp_enable" />
</el-form-item>
<el-form-item v-if="form.mcp_enable" label="MCP Server Config" prop="mcp_servers"
:rules="[{ required: true, message: $t('common.required') }]">
<el-form-item
v-if="form.mcp_enable"
label="MCP Server Config"
prop="mcp_servers"
:rules="[{ required: true, message: $t('common.required') }]"
>
<el-input
v-model="form.mcp_servers"
:rows="6"
Expand Down Expand Up @@ -49,7 +57,6 @@ const mcpServerJson = `{
}
}`


const form = ref<any>({
mcp_servers: '',
mcp_enable: false
Expand Down Expand Up @@ -82,26 +89,4 @@ const submit = () => {

defineExpose({ open })
</script>
<style lang="scss" scoped>
.param-dialog {
padding: 8px 8px 24px 8px;

.el-dialog__header {
padding: 16px 16px 0 16px;
}

.el-dialog__body {
padding: 0 !important;
}

.dialog-max-height {
height: 560px;
}

.custom-slider {
.el-input-number.is-without-controls .el-input__wrapper {
padding: 0 !important;
}
}
}
</style>
<style lang="scss" scoped></style>
Copy link
Contributor

Choose a reason for hiding this comment

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

There appear to be several issues and improvements that can be made to the provided code:

Issues and Improvements

  1. Comments in JSX/TSX:

    • The comments in the template section (lines 9 to 35) use Vue's <template> syntax (: for directives), but they are not recognized by ESLint as part of a JSX context. Ensure you have the necessary configuration for ESLint to recognize these.

  2. Style Scoped Syntax:

    • In the style section, there is a comment block with an empty <style lang="scss">...</style> element. Comment blocks typically belong inside specific tags like <!-- --> or should not be enclosed within other HTML elements.

  3. Code Duplication:

    • There appears to be a small duplication in the import statement at line 16, where it imports both $t from '@vue/composition-api' and defineExpose from '@vue/runtime-core'. This could be combined if possible without affecting functionality.

Optimization Suggestions

  1. Remove Unused Imports:

    • Verify if the unused import statements (import { $t } from '@vue/composition-api';) need to be removed. These might be left over from previous versions or accidental includes.

  2. Consistent Styling:

    • Ensure consistent styling practices throughout the file. For example, consistently use single quotes or double quotes around strings, align properties, etc.

  3. Avoid Nested Functions:

    • While this is generally good practice, avoid unnecessary nested functions unless absolutely necessary. However, your current structure does not contain any deeply nested functions, so no immediate improvement here.

  4. Type Checks:

    • Consider adding type checks explicitly in TypeScript/Vue3 components to ensure robustness. Adding types will help catch potential errors during development and production runs.

  5. Documentation Comments:

    • Add JavaScriptDoc-style comments for public methods or non-obvious logic sections to enhance maintainability and documentation.

By addressing these points, the code becomes more readable and maintainable while ensuring proper behavior and compatibility across different environments.

20 changes: 2 additions & 18 deletions ui/src/views/application/component/ParamSettingDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,22 +326,6 @@ function changeHandle(val: string) {

defineExpose({ open })
</script>
<style lang="scss" scoped>
.param-dialog {
padding: 8px 8px 24px 8px;
.el-dialog__header {
padding: 16px 16px 0 16px;
}
.el-dialog__body {
padding: 0 !important;
}
.dialog-max-height {
height: 560px;
}
.custom-slider {
.el-input-number.is-without-controls .el-input__wrapper {
padding: 0 !important;
}
}
}
<style lang="scss">

</style>
24 changes: 1 addition & 23 deletions ui/src/views/application/component/ReasoningParamSettingDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,26 +84,4 @@ const submit = () => {

defineExpose({ open })
</script>
<style lang="scss" scoped>
.param-dialog {
padding: 8px 8px 24px 8px;

.el-dialog__header {
padding: 16px 16px 0 16px;
}

.el-dialog__body {
padding: 0 !important;
}

.dialog-max-height {
height: 560px;
}

.custom-slider {
.el-input-number.is-without-controls .el-input__wrapper {
padding: 0 !important;
}
}
}
</style>
<style lang="scss" scoped></style>
Loading