zhuchaowe/maxkb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: refine user input style

Browse Source
This commit is contained in:
wangdan-fit2cloud 2025-03-25 18:33:14 +08:00 committed by GitHub
parent 3594fdadfa
commit ba4e55d3e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 106 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/src/assets/fx/bochaai/detail.md
View File

@ -2,15 +2,14 @@
博查工具是一个支持自然语言搜索的 Web Search API，从近百亿网页和生态内容源中搜索高质量世界知识，包括新闻、图片、视频、百科、机酒、学术等. 博查工具是一个支持自然语言搜索的 Web Search API，从近百亿网页和生态内容源中搜索高质量世界知识，包括新闻、图片、视频、百科、机酒、学术等.
## 配置 ## 配置
1. 获取API Key  1. 获取API Key 
在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。 在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
![API Key](/src/assets/fx/img/bocha_APIKey.jpg) ![API Key](/src/assets/fx/img/bocha_APIKey.jpg)
1. 在函数库中配置 1. 在函数库中配置
在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。 在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。
![启动参数](/src/assets/fx/img/bocha_setting.jpg) ![启动参数](/src/assets/fx/img/bocha_setting.jpg)
1. 在应用中使用 1. 在应用中使用
在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。 在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
![应用中使用](/src/assets/fx/img/bocha_app_used.jpg) ![应用中使用](/src/assets/fx/img/bocha_app_used.jpg)

25
ui/src/assets/fx/google_search/detail.md
View File

@ -5,19 +5,18 @@ Google 搜索工具是一个实时 API，可提取搜索引擎结果，提供来
## 配置 ## 配置
1. 创建 Google Custom Search Engine 1. 创建 Google Custom Search Engine
在[Programmable Search Engine]（https://programmablesearchengine.google.com/）中 添加 Search Engine 在[Programmable Search Engine]（https://programmablesearchengine.google.com/）中 添加 Search Engine
![google 创建引擎](/src/assets/fx/img/google_AddSearchEngine.jpg) ![google 创建引擎](/src/assets/fx/img/google_AddSearchEngine.jpg)
2. 获取cx参数 2. 获取cx参数
进入添加引擎，在【基本】菜单中获取搜索引擎的ID，即cx。 进入添加引擎，在【基本】菜单中获取搜索引擎的ID，即cx。
![google cx ](/src/assets/fx/img/google_cx.jpg) ![google cx ](/src/assets/fx/img/google_cx.jpg) 3.获取 API Key
3.获取 API Key 打开 https://developers.google.com/custom-search/v1/overview?hl=zh-cn，获取API Key。
打开 https://developers.google.com/custom-search/v1/overview?hl=zh-cn，获取API Key。 ![google API Key](/src/assets/fx/img/google_APIKey.jpg)
![google API Key](/src/assets/fx/img/google_APIKey.jpg)
4. 配置启动参数 3. 配置启动参数
在Google搜索函数的启动参数中填写配置以上参数。 在Google搜索函数的启动参数中填写配置以上参数。
![启动参数](/src/assets/fx/img/google_setting.jpg) ![启动参数](/src/assets/fx/img/google_setting.jpg)
5. 在应用中使用 4. 在应用中使用
在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。 在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
![应用中使用](/src/assets/fx/img/google_app_used.jpg) ![应用中使用](/src/assets/fx/img/google_app_used.jpg)

16
ui/src/assets/fx/langsearch/detail.md
View File

@ -2,16 +2,14 @@
博查工具是一个支持自然语言搜索的 Web Search API，从近百亿网页和生态内容源中搜索高质量世界知识，包括新闻、图片、视频、百科、机酒、学术等. 博查工具是一个支持自然语言搜索的 Web Search API，从近百亿网页和生态内容源中搜索高质量世界知识，包括新闻、图片、视频、百科、机酒、学术等.
## 配置 ## 配置
1. 获取API Key  1. 获取API Key 
在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。 在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
![API Key](/src/assets/fx/img/langsearch_APIKey.jpg) ![API Key](/src/assets/fx/img/langsearch_APIKey.jpg)
2. 在函数库中配置 2. 在函数库中配置
在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。 在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。
![启动参数](/src/assets/fx/img/langsearch_setting.jpg) ![启动参数](/src/assets/fx/img/langsearch_setting.jpg)
1. 在应用中使用 3. 在应用中使用
在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。 在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
![应用中使用](/src/assets/fx/img/langsearch_app_used.jpg) ![应用中使用](/src/assets/fx/img/langsearch_app_used.jpg)

1
ui/src/components/ai-chat/component/chat-input-operate/index.vue
View File

@ -749,7 +749,6 @@ onMounted(() => {
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.ai-chat { .ai-chat {
height: calc(100% - 100px);
&__operate { &__operate {
position: fixed; position: fixed;
bottom: 0; bottom: 0;

24
ui/src/components/ai-chat/component/user-form/index.vue
View File

@ -4,8 +4,7 @@
(inputFieldList.length > 0 || (type === 'debug-ai-chat' && apiInputFieldList.length > 0)) && (inputFieldList.length > 0 || (type === 'debug-ai-chat' && apiInputFieldList.length > 0)) &&
type !== 'log' type !== 'log'
" "
class="mb-16 w-full" class="user-form-container mb-16 w-full"
style="padding: 0 24px; max-width: 400px"
> >
<el-card shadow="always" class="border-r-8" style="--el-card-padding: 16px 8px"> <el-card shadow="always" class="border-r-8" style="--el-card-padding: 16px 8px">
<div class="flex align-center cursor w-full" style="padding: 0 8px"> <div class="flex align-center cursor w-full" style="padding: 0 8px">
@ -16,9 +15,14 @@
{{ inputFieldConfig.title }} {{ inputFieldConfig.title }}
</span> </span>
</div> </div>
<el-scrollbar max-height="160">
<el-scrollbar :max-height="first ? 0 : 450">
<el-collapse-transition> <el-collapse-transition>
<div v-show="showUserInput" class="mt-16" style="padding: 0 8px"> <div
v-show="showUserInput"
class="mt-16"
style="padding: 0 8px; height: calc(100% - 100px)"
>
<DynamicsForm <DynamicsForm
:key="dynamicsFormRefresh" :key="dynamicsFormRefresh"
v-model="form_data_context" v-model="form_data_context"
@ -40,6 +44,7 @@
</div> </div>
</el-collapse-transition> </el-collapse-transition>
</el-scrollbar> </el-scrollbar>
<div class="text-right mr-8"> <div class="text-right mr-8">
<el-button type="primary" v-if="first" @click="confirmHandle">{{ <el-button type="primary" v-if="first" @click="confirmHandle">{{
$t('chat.operation.startChat') $t('chat.operation.startChat')
@ -359,4 +364,13 @@ onMounted(() => {
handleInputFieldList() handleInputFieldList()
}) })
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.user-form-container {
padding: 0 24px;
}
@media only screen and (max-width: 768px) {
.user-form-container {
max-width: 100%;
}
}
</style>

24
ui/src/components/ai-chat/index.vue
View File

@ -1,5 +1,10 @@
<template> <template>
<div ref="aiChatRef" class="ai-chat" :class="type"> <div
ref="aiChatRef"
class="ai-chat"
:class="type"
:style="{ height: firsUserInput ? '100%' : undefined }"
>
<div <div
v-show="showUserInputContent" v-show="showUserInputContent"
:class="firsUserInput ? 'firstUserInput' : 'popperUserInput'" :class="firsUserInput ? 'firstUserInput' : 'popperUserInput'"
@ -521,7 +526,15 @@ defineExpose({
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; overflow: auto;
.user-form-container {
max-width: 70%;
}
}
.debug-ai-chat {
.user-form-container {
max-width: 100%;
}
} }
.popperUserInput { .popperUserInput {
position: absolute; position: absolute;
@ -531,4 +544,11 @@ defineExpose({
width: calc(100% - 50px); width: calc(100% - 50px);
max-width: 400px; max-width: 400px;
} }
@media only screen and (max-width: 768px) {
.firstUserInput {
.user-form-container {
max-width: 100%;
}
}
}
</style> </style>

4
ui/src/layout/components/sidebar/SidebarItem.vue
View File

@ -58,8 +58,8 @@ function showMenu() {
} }
} }
function clickHandle(item: any) { function clickHandle(item?: any) {
if (isWorkFlow(type) && item.name === 'AppSetting') { if (isWorkFlow(type) && item?.name === 'AppSetting') {
router.push({ path: `/application/${id}/workflow` }) router.push({ path: `/application/${id}/workflow` })
} }
} }

9
ui/src/views/function-lib/index.vue
View File

@ -152,12 +152,21 @@
size="small" size="small"
class="mr-4" class="mr-4"
/> />
<el-divider direction="vertical" />
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<el-button text @click.stop> <el-button text @click.stop>
<el-icon><MoreFilled /></el-icon> <el-icon><MoreFilled /></el-icon>
</el-button> </el-button>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item
v-if="!item.template_id"
:disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
@click.stop="openCreateDialog(item)"
>
<el-icon><EditPen /></el-icon>
{{ $t('common.edit') }}
</el-dropdown-item>
<el-dropdown-item <el-dropdown-item
:disabled="item.permission_type === 'PUBLIC' && !canEdit(item)" :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
v-if="!item.template_id" v-if="!item.template_id"

6
ui/src/workflow/common/NodeControl.vue
View File

@ -2,7 +2,6 @@
<el-card shadow="always" style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px"> <el-card shadow="always" style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px">
<el-button link @click="zoomOut"> <el-button link @click="zoomOut">
<el-tooltip <el-tooltip
class="box-item"
effect="dark" effect="dark"
:content="$t('views.applicationWorkflow.control.zoomOut')" :content="$t('views.applicationWorkflow.control.zoomOut')"
placement="top" placement="top"
@ -14,7 +13,6 @@
</el-button> </el-button>
<el-button link @click="zoomIn"> <el-button link @click="zoomIn">
<el-tooltip <el-tooltip
class="box-item"
effect="dark" effect="dark"
:content="$t('views.applicationWorkflow.control.zoomIn')" :content="$t('views.applicationWorkflow.control.zoomIn')"
placement="top" placement="top"
@ -26,7 +24,6 @@
</el-button> </el-button>
<el-button link @click="fitView"> <el-button link @click="fitView">
<el-tooltip <el-tooltip
class="box-item"
effect="dark" effect="dark"
:content="$t('views.applicationWorkflow.control.fitView')" :content="$t('views.applicationWorkflow.control.fitView')"
placement="top" placement="top"
@ -40,7 +37,6 @@
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button link @click="retract"> <el-button link @click="retract">
<el-tooltip <el-tooltip
class="box-item"
effect="dark" effect="dark"
:content="$t('views.applicationWorkflow.control.retract')" :content="$t('views.applicationWorkflow.control.retract')"
placement="top" placement="top"
@ -54,7 +50,6 @@
</el-button> </el-button>
<el-button link @click="extend"> <el-button link @click="extend">
<el-tooltip <el-tooltip
class="box-item"
effect="dark" effect="dark"
:content="$t('views.applicationWorkflow.control.extend')" :content="$t('views.applicationWorkflow.control.extend')"
placement="top" placement="top"
@ -68,7 +63,6 @@
</el-button> </el-button>
<el-button link @click="layout"> <el-button link @click="layout">
<el-tooltip <el-tooltip
class="box-item"
effect="dark" effect="dark"
:content="$t('views.applicationWorkflow.control.beautify')" :content="$t('views.applicationWorkflow.control.beautify')"
placement="top" placement="top"

2
ui/src/workflow/icons/function-lib-node-icon.vue
View File

@ -15,7 +15,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { isAppIcon } from '@/utils/application' import { isAppIcon } from '@/utils/application'
const props = defineProps<{ const props = defineProps<{
item: { item?: {
name: string name: string
icon: string icon: string
} }

59
ui/src/workflow/nodes/ai-chat-node/index.vue
View File

@ -116,41 +116,13 @@
/> />
</el-form-item> </el-form-item>
<el-form-item> <div class="flex-between mb-16">
<template #label> <div class="lighter">{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</div>
<div class="flex-between"> <el-button type="primary" link @click="openMcpServersDialog" @refreshForm="refreshParam">
<div>{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</div> <el-icon><Setting /></el-icon>
<el-button </el-button>
type="primary" </div>
link
@click="openMcpServersDialog"
@refreshForm="refreshParam"
>
<el-icon><Setting /></el-icon>
</el-button>
</div>
</template>
</el-form-item>
<el-form-item @click.prevent>
<template #label>
<div class="flex align-center">
<div class="mr-4">
<span
>{{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
}}<span class="danger">*</span></span
>
</div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
<template #content>
{{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.tooltip') }}
</template>
<AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
</el-tooltip>
</div>
</template>
<el-switch size="small" v-model="chat_data.is_result" />
</el-form-item>
<el-form-item @click.prevent> <el-form-item @click.prevent>
<template #label> <template #label>
<div class="flex-between w-full"> <div class="flex-between w-full">
@ -171,6 +143,25 @@
</template> </template>
<el-switch size="small" v-model="chat_data.model_setting.reasoning_content_enable" /> <el-switch size="small" v-model="chat_data.model_setting.reasoning_content_enable" />
</el-form-item> </el-form-item>
<el-form-item @click.prevent>
<template #label>
<div class="flex align-center">
<div class="mr-4">
<span
>{{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
}}<span class="danger">*</span></span
>
</div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
<template #content>
{{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.tooltip') }}
</template>
<AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
</el-tooltip>
</div>
</template>
<el-switch size="small" v-model="chat_data.is_result" />
</el-form-item>
</el-form> </el-form>
</el-card> </el-card>

5
ui/src/workflow/nodes/mcp-node/index.vue
View File

@ -38,17 +38,18 @@
:key="item.value" :key="item.value"
:label="item.name" :label="item.name"
:value="item.name" :value="item.name"
class="flex align-center"
> >
<el-tooltip <el-tooltip
class="box-item"
effect="dark" effect="dark"
:content="item.description" :content="item.description"
placement="top-start" placement="top-start"
popper-class="max-w-350"
> >
<AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon> <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
</el-tooltip> </el-tooltip>
<span>{{ item.name }}</span> <span class="ml-4">{{ item.name }}</span>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>