15308555518/ MaxKB
1
0
Fork 0
mirror of https://github.com/1Panel-dev/MaxKB.git synced 2025-12-26 01:33:05 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

perf: refine user input style

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，从近百亿网页和生态内容源中搜索高质量世界知识，包括新闻、图片、视频、百科、机酒、学术等.
## 配置
1. 获取API Key 
在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
![API Key](/src/assets/fx/img/bocha_APIKey.jpg)
在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
![API Key](/src/assets/fx/img/bocha_APIKey.jpg)
1. 在函数库中配置
在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。
![启动参数](/src/assets/fx/img/bocha_setting.jpg)
在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。
![启动参数](/src/assets/fx/img/bocha_setting.jpg)
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
在[Programmable Search Engine]（https://programmablesearchengine.google.com/）中 添加 Search Engine
![google 创建引擎](/src/assets/fx/img/google_AddSearchEngine.jpg)
在[Programmable Search Engine]（https://programmablesearchengine.google.com/）中 添加 Search Engine
![google 创建引擎](/src/assets/fx/img/google_AddSearchEngine.jpg)
2. 获取cx参数
进入添加引擎，在【基本】菜单中获取搜索引擎的ID，即cx。
![google cx ](/src/assets/fx/img/google_cx.jpg)
3.获取 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)
进入添加引擎，在【基本】菜单中获取搜索引擎的ID，即cx。
![google cx ](/src/assets/fx/img/google_cx.jpg) 3.获取 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)
4. 配置启动参数
在Google搜索函数的启动参数中填写配置以上参数。
![启动参数](/src/assets/fx/img/google_setting.jpg)
3. 配置启动参数
在Google搜索函数的启动参数中填写配置以上参数。
![启动参数](/src/assets/fx/img/google_setting.jpg)
5. 在应用中使用
在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
![应用中使用](/src/assets/fx/img/google_app_used.jpg)
4. 在应用中使用
在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
![应用中使用](/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，从近百亿网页和生态内容源中搜索高质量世界知识，包括新闻、图片、视频、百科、机酒、学术等.
## 配置
1. 获取API Key 
在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
![API Key](/src/assets/fx/img/langsearch_APIKey.jpg)
在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
![API Key](/src/assets/fx/img/langsearch_APIKey.jpg)
2. 在函数库中配置
在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。
![启动参数](/src/assets/fx/img/langsearch_setting.jpg)
1. 在应用中使用
在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
![应用中使用](/src/assets/fx/img/langsearch_app_used.jpg)
在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。
![启动参数](/src/assets/fx/img/langsearch_setting.jpg)
3. 在应用中使用
在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
![应用中使用](/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) {
.ai-chat {
height: calc(100% - 100px);
&__operate {
position: fixed;
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)) &&
type !== 'log'
"
class="mb-16 w-full"
style="padding: 0 24px; max-width: 400px"
class="user-form-container mb-16 w-full"
>
<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">
@ -16,9 +15,14 @@
{{ inputFieldConfig.title }}
</span>
</div>
<el-scrollbar max-height="160">
<el-scrollbar :max-height="first ? 0 : 450">
<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
:key="dynamicsFormRefresh"
v-model="form_data_context"
@ -40,6 +44,7 @@
</div>
</el-collapse-transition>
</el-scrollbar>
<div class="text-right mr-8">
<el-button type="primary" v-if="first" @click="confirmHandle">{{
$t('chat.operation.startChat')
@ -359,4 +364,13 @@ onMounted(() => {
handleInputFieldList()
})
</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>
<div ref="aiChatRef" class="ai-chat" :class="type">
<div
ref="aiChatRef"
class="ai-chat"
:class="type"
:style="{ height: firsUserInput ? '100%' : undefined }"
>
<div
v-show="showUserInputContent"
:class="firsUserInput ? 'firstUserInput' : 'popperUserInput'"
@ -521,7 +526,15 @@ defineExpose({
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
.user-form-container {
max-width: 70%;
}
}
.debug-ai-chat {
.user-form-container {
max-width: 100%;
}
}
.popperUserInput {
position: absolute;
@ -531,4 +544,11 @@ defineExpose({
width: calc(100% - 50px);
max-width: 400px;
}
@media only screen and (max-width: 768px) {
.firstUserInput {
.user-form-container {
max-width: 100%;
}
}
}
</style>

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

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

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

@ -152,12 +152,21 @@
size="small"
class="mr-4"
/>
<el-divider direction="vertical" />
<el-dropdown trigger="click">
<el-button text @click.stop>
<el-icon><MoreFilled /></el-icon>
</el-button>
<template #dropdown>
<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
:disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
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-button link @click="zoomOut">
<el-tooltip
class="box-item"
effect="dark"
:content="$t('views.applicationWorkflow.control.zoomOut')"
placement="top"
@ -14,7 +13,6 @@
</el-button>
<el-button link @click="zoomIn">
<el-tooltip
class="box-item"
effect="dark"
:content="$t('views.applicationWorkflow.control.zoomIn')"
placement="top"
@ -26,7 +24,6 @@
</el-button>
<el-button link @click="fitView">
<el-tooltip
class="box-item"
effect="dark"
:content="$t('views.applicationWorkflow.control.fitView')"
placement="top"
@ -40,7 +37,6 @@
<el-divider direction="vertical" />
<el-button link @click="retract">
<el-tooltip
class="box-item"
effect="dark"
:content="$t('views.applicationWorkflow.control.retract')"
placement="top"
@ -54,7 +50,6 @@
</el-button>
<el-button link @click="extend">
<el-tooltip
class="box-item"
effect="dark"
:content="$t('views.applicationWorkflow.control.extend')"
placement="top"
@ -68,7 +63,6 @@
</el-button>
<el-button link @click="layout">
<el-tooltip
class="box-item"
effect="dark"
:content="$t('views.applicationWorkflow.control.beautify')"
placement="top"

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

@ -15,7 +15,7 @@
<script setup lang="ts">
import { isAppIcon } from '@/utils/application'
const props = defineProps<{
item: {
item?: {
name: 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>
<template #label>
<div class="flex-between">
<div>{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</div>
<el-button
type="primary"
link
@click="openMcpServersDialog"
@refreshForm="refreshParam"
>
<el-icon><Setting /></el-icon>
</el-button>
</div>
</template>
</el-form-item>
<div class="flex-between mb-16">
<div class="lighter">{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</div>
<el-button type="primary" link @click="openMcpServersDialog" @refreshForm="refreshParam">
<el-icon><Setting /></el-icon>
</el-button>
</div>
<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>
<template #label>
<div class="flex-between w-full">
@ -171,6 +143,25 @@
</template>
<el-switch size="small" v-model="chat_data.model_setting.reasoning_content_enable" />
</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-card>

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

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