Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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/assets/fileType/web-link-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,13 @@
<el-card shadow="never" style="--el-card-padding: 8px">
<div class="flex-between">
<div class="flex align-center">
<img :src="getImgUrl(item && item?.document_name)" alt="" width="24" />
<img
src="@/assets/fileType/web-link-icon.svg"
alt=""
width="24"
v-if="item?.meta?.source_file_id || item?.meta?.source_url"
/>
<img v-else :src="getImgUrl(item && item?.document_name)" alt="" width="24" />
<div
class="ml-4 ellipsis-1"
:title="item?.document_name"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The provided code snippet has a few improvements to make it more efficient and robust:

  1. Use v-show instead of v-if in the conditional rendering to avoid unnecessary component re-renders when item?.document_name changes but the source file ID/url remains empty.
<img 
  src="@/assets/fileType/web-link-icon.svg" 
  alt=""
  width="24"
  v-show="(item?.meta?.source_file_id || item?.meta?.source_url) && !isImageType()"
/>

Add this at the top of your script or data section:

import { isImageType } from './utils'; // Import utility function if needed

// In your methods or computed properties
data() {
  return {};
}

methods: {
  isImageType() {
    const imgTypes = ['jpg', 'jpeg', 'png', 'gif'];
    return imgTypes.includes((this.item?.meta?.document_name || '').toLowerCase().split('.').pop());
  },
},
...
</script>

This change ensures that the image icon is not displayed unless either the document name is an image type or there's no associated file URL/source file ID. Also, remove unnecessary space between elements inside .flex-between.

Expand Down
3 changes: 1 addition & 2 deletions ui/src/components/resource-authorization-drawer/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
:title="$t('views.system.resourceAuthorization.title')"
size="60%"
:append-to-body="true"
:modal="false"
>
<div class="flex-between mb-16">
<el-button
Expand Down Expand Up @@ -159,7 +158,7 @@ const { user } = useStore()
const props = defineProps<{
type: string
}>()
const permissionOptions = computed(() => {
const permissionOptions = computed(() => {
return getPermissionOptions()
})
const drawerVisible = ref(false)
Expand Down
3 changes: 1 addition & 2 deletions ui/src/stores/modules/chat-user.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import type {ChatProfile, ChatUserProfile} from '@/api/type/chat'
import type {LoginRequest} from '@/api/type/user'
import type {Ref} from 'vue'
import {getBrowserLang} from '@/locales/index'
import LoginApi from "@/api/user/login.ts";
import useUserStore from "@/stores/modules/user.ts";

interface ChatUser {
// 用户id
Expand Down Expand Up @@ -46,6 +44,7 @@ const useChatUserStore = defineStore('chat-user', {
},
applicationProfile() {
return ChatAPI.applicationProfile().then((ok) => {
console.log('applicationProfile', ok.data)
this.application = ok.data
localStorage.setItem(`${this.accessToken}-locale`, ok.data?.language || this.getLanguage())
})
Expand Down
2 changes: 1 addition & 1 deletion ui/src/styles/component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@
// radio-button-group
.app-radio-button-group {
background: #ffffff;
border: 1px solid var(--app-border-color-dark);
border: 1px solid var(--el-border-color);
border-radius: var(--el-border-radius-base);
.el-radio-button {
padding: 3px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -442,6 +442,10 @@
$t('views.applicationOverview.appInfo.SettingDisplayDialog.showExecutionDetail')
"
/>
<el-checkbox
v-model="xpackForm.show_history"
:label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.showHistory')"
/>
<el-checkbox
v-model="xpackForm.show_guide"
:label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.displayGuide')"
Expand Down Expand Up @@ -483,12 +487,9 @@ import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
import { isAppIcon } from '@/utils/common'
import { MsgSuccess, MsgError } from '@/utils/message'
import { langList, t } from '@/locales'
import useStore from '@/stores'
import { cloneDeep } from 'lodash'
import { loadSharedApi } from '@/utils/dynamics-api/shared-api'

const { user } = useStore()

const route = useRoute()
const {
params: { id },
Expand Down
1 change: 0 additions & 1 deletion ui/src/views/application-workflow/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,6 @@ function back() {
MsgConfirm(t('common.tip'), t('views.applicationWorkflow.tip.saveMessage'), {
confirmButtonText: t('views.applicationWorkflow.setting.exitSave'),
cancelButtonText: t('views.applicationWorkflow.setting.exit'),
type: 'warning',
distinguishCancelAndClose: true,
})
.then(() => {
Expand Down
18 changes: 14 additions & 4 deletions ui/src/views/chat/component/HistoryPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<el-menu
:default-active="currentChatId"
:collapse="isPcCollapse"
collapse-transition
:collapse-transition="false"
popper-class="chat-pc-popper"
class="h-full"
>
Expand Down Expand Up @@ -37,7 +37,11 @@
<AppIcon iconName="app-create-chat"></AppIcon>
<span class="ml-4">{{ $t('chat.createChat') }}</span>
</el-button>
<div v-show="!isPcCollapse" class="flex-between p-8 pb-0 color-secondary mt-8">
<div
v-show="!isPcCollapse"
class="flex-between p-8 pb-0 color-secondary mt-8"
v-if="applicationDetail.show_history || hasPermission(EditionConst.IS_CE, 'OR')"
>
<span>{{ $t('chat.history') }}</span>
<el-tooltip effect="dark" :content="$t('chat.clearChat')" placement="right">
<el-button text @click.stop="clearChat">
Expand All @@ -46,7 +50,11 @@
</el-tooltip>
</div>
</div>
<div v-show="!isPcCollapse" class="left-height">
<div
v-show="!isPcCollapse"
class="left-height"
v-if="applicationDetail.show_history || hasPermission(EditionConst.IS_CE, 'OR')"
>
<el-scrollbar>
<div class="p-16 pt-0">
<common-list
Expand Down Expand Up @@ -103,7 +111,7 @@
<template #title>{{ $t('chat.createChat') }}</template>
</el-menu-item>

<el-sub-menu v-show="isPcCollapse" index="2">
<el-sub-menu v-show="isPcCollapse" index="2" v-if="applicationDetail.show_history || hasPermission(EditionConst.IS_CE, 'OR')">
<template #title>
<AppIcon iconName="app-history-outlined" />
</template>
Expand Down Expand Up @@ -163,6 +171,8 @@
import { ref } from 'vue'
import { isAppIcon } from '@/utils/common'
import EditTitleDialog from './EditTitleDialog.vue'
import { EditionConst } from '@/utils/permission/data'
import { hasPermission } from '@/utils/permission/index'
const props = defineProps<{
applicationDetail: any
chatLogData: any[]
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This code appears to be modifying an Echarts-based component in a Vue application with multiple conditional statements related to whether or not the device is in desktop mode (isPcCollapse). There are no apparent syntax errors or logical issues but there might be some improvements on formatting readability, clarity, and performance.

Irregularities and Suggestions:

  1. Duplicated Conditional Rendering:

    <div
      v-show="!isPcCollapse"
      class="flex-between p-8 pb-0 color-secondary mt-8"
      v-if="applicationDetail.show_history || hasPermission(EditionConst.IS_CE, 'OR')"
    >
      <!-- Content here -->
    </div>

    The condition v-if="(applicationDetail.show_history || hasPermission(EditionConst.IS_CE, 'OR')) && !isPcCollapse" can be simplified using short-circuiting logic to avoid unnecessary evaluation of hasPermission.

  2. Redundant Conditionality inside Components:

    • In the <common-list> and <el-scrollbar> components where conditions seem to control visibility based on the same variable or permissions, consider creating utility functions (like shouldShowHistoryList) that encapsulate the logic instead of duplicating it across different areas.
  3. Unused Variables/Functions:

    • Ensure all used variables and functions have been declared (ref(), import paths, etc.) before they're referenced within templates.
      Remove unused imports (ApplicationIcon,AppTooltip etc.)
  4. Code Readability & Formatting:

    • Group imports together logically.
    • Ensure consistent spacing around operators and keywords like equal signs (=).
      Avoid overly complex nested structures if possible, which improves readability.

Overall, this code should function correctly, however refining it would make it more maintainable and efficient.

<template>
<div v-show="!isPcCollapse">
  <ElScrollbar when-scroll="auto" class="">
    <CommonList
      v-if="applicationDetail.show_history || shouldShowHistoryList()"
    >
      <!-- List content here -->
    </ CommonList>
  ElScrollbar>

  <div class="" v-if="applicationDetail.show_history || shouldShowHistoryList()">
    ...
  </ div>
</div>

Make sure you replace shouldShowHistoryList() with either a helper method in the script section or directly evaluate the permission checks according to best practices.

Expand Down
8 changes: 3 additions & 5 deletions ui/src/views/tool/component/McpToolConfigDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,16 @@
class="mcp-config-dialog"
>
<el-form label-width="auto" label-position="top">
<el-form-item>
<el-form-item @mouseenter.stop="showIcon = true" @mouseleave.stop="showIcon = false">
<el-input
type="textarea"
v-model="mcp_servers"
rows="8"
disabled
class="config-textarea"
@mouseenter.stop="showIcon = true"
@mouseleave.stop="showIcon = false"
></el-input>
<el-button circle class="copy-icon" v-if="showIcon" @click="copyClick(mcp_servers)">
<AppIcon iconName="app-copy" class="color-secondary"/>
<el-button circle class="copy-icon" v-show="showIcon" @click.stop="copyClick(mcp_servers)">
<AppIcon iconName="app-copy" class="color-secondary" />
</el-button>
</el-form-item>
</el-form>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

  • The @mouseenter and @mouseleave events are called whenever a mouse enters or leaves the element they are attached to. It seems that you intend to show an icon when either condition is met.
  • In both instances where the button has been wrapped with <el-button> instead of just the closing bracket, there's still one more opening brace at the end. This doesn't pose an issue for HTML as long as it's balanced, but good practice is to have only one closing tag per line.
    • Suggestion: Ensure each closing tag stands on its own line to make the code cleaner.
<!-- Code after modifications -->
<cl<|fim_suffix|>ntent="">

In summary:

  1. Review the event handlers for better readability (mouseenter, mouseleave) ensuring they function correctly as intended.
  2. Remove redundant braces around the elements.
  3. Maintain proper indentation for clarity.

Expand Down
4 changes: 2 additions & 2 deletions ui/src/workflow/nodes/form-node/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -111,14 +111,14 @@
}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('common.required')" width="85">
<el-table-column :label="$t('common.required')" width="55">
<template #default="{ row }">
<div @click.stop>
<el-switch disabled size="small" v-model="row.required" />
</div>
</template>
</el-table-column>
<el-table-column :label="$t('common.operation')" align="left" width="90">
<el-table-column :label="$t('common.operation')" align="left" width="80">
<template #default="{ row, $index }">
<span class="mr-4">
<el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
Expand Down
Loading