style: Knowledge base workflow debugging page style adjustment

ui/src/components/ai-chat/component/knowledge-source-component/ExecutionDetailContent.vue

@@ -1,75 +1,73 @@
 <template>
-  <el-scrollbar>
-    <div class="execution-details p-8">
-      <div v-if="isWorkFlow(props.appType)">
-        <template v-for="(item, index) in arraySort(props.detail ?? [], 'index')" :key="index">
-          <ExecutionDetailCard :data="item"> </ExecutionDetailCard>
-        </template>
-      </div>
-
-      <template v-else>
-        <div class="card-never border-r-6 mb-12">
-          <h5 class="p-8-12">
-            {{ $t('chat.paragraphSource.question') }}
-          </h5>
-          <div class="p-8-12 border-t-dashed lighter">
-            <span class="mb-8">user: {{ problem }}</span>
-          </div>
-        </div>
-        <div v-if="paddedProblem" class="card-never border-r-6 mb-12">
-          <h5 class="p-8-12">
-            {{ $t('chat.paragraphSource.questionPadded') }}
-          </h5>
-          <div class="p-8-12 border-t-dashed lighter">
-            <span class="mb-8">user: {{ paddedProblem }}</span>
-          </div>
-        </div>
-        <div v-if="system" class="card-never border-r-6 mb-12">
-          <h5 class="p-8-12">
-            {{ $t('views.application.form.roleSettings.label') }}
-          </h5>
-          <div class="p-8-12 border-t-dashed lighter">
-            <span class="mb-8">{{ system }}</span>
-          </div>
-        </div>
-
-        <div class="card-never border-r-6 mb-12">
-          <h5 class="p-8-12">
-            {{ $t('chat.history') }}
-          </h5>
-          <div class="p-8-12 border-t-dashed lighter">
-            <div v-for="(msg, index) in historyRecord" :key="index">
-              <span>{{ msg.role }}: </span>
-              <span>{{ msg.content }}</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="card-never border-r-6 mb-12">
-          <h5 class="p-8-12">
-            {{ $t('chat.executionDetails.currentChat') }}
-          </h5>
-          <div class="p-8-12 border-t-dashed lighter">
-            <div class="mb-8">{{ $t('chat.executionDetails.knowedMessage') }}:</div>
-            <div v-for="(msg, index) in currentChat" :key="index">
-              <span>{{ msg.content }}</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="card-never border-r-6 mb-12">
-          <h5 class="p-8-12">
-            {{ $t('chat.executionDetails.answer') }}
-          </h5>
-          <div class="p-8-12 border-t-dashed lighter">
-            <div v-for="(msg, index) in AiResponse" :key="index">
-              <span>{{ msg.content }}</span>
-            </div>
-          </div>
-        </div>
+  <div class="execution-details">
+    <div v-if="isWorkFlow(props.appType)">
+      <template v-for="(item, index) in arraySort(props.detail ?? [], 'index')" :key="index">
+        <ExecutionDetailCard :data="item"> </ExecutionDetailCard>
       </template>
     </div>
-  </el-scrollbar>
+
+    <template v-else>
+      <div class="card-never border-r-6 mb-12">
+        <h5 class="p-8-12">
+          {{ $t('chat.paragraphSource.question') }}
+        </h5>
+        <div class="p-8-12 border-t-dashed lighter">
+          <span class="mb-8">user: {{ problem }}</span>
+        </div>
+      </div>
+      <div v-if="paddedProblem" class="card-never border-r-6 mb-12">
+        <h5 class="p-8-12">
+          {{ $t('chat.paragraphSource.questionPadded') }}
+        </h5>
+        <div class="p-8-12 border-t-dashed lighter">
+          <span class="mb-8">user: {{ paddedProblem }}</span>
+        </div>
+      </div>
+      <div v-if="system" class="card-never border-r-6 mb-12">
+        <h5 class="p-8-12">
+          {{ $t('views.application.form.roleSettings.label') }}
+        </h5>
+        <div class="p-8-12 border-t-dashed lighter">
+          <span class="mb-8">{{ system }}</span>
+        </div>
+      </div>
+
+      <div class="card-never border-r-6 mb-12">
+        <h5 class="p-8-12">
+          {{ $t('chat.history') }}
+        </h5>
+        <div class="p-8-12 border-t-dashed lighter">
+          <div v-for="(msg, index) in historyRecord" :key="index">
+            <span>{{ msg.role }}: </span>
+            <span>{{ msg.content }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-never border-r-6 mb-12">
+        <h5 class="p-8-12">
+          {{ $t('chat.executionDetails.currentChat') }}
+        </h5>
+        <div class="p-8-12 border-t-dashed lighter">
+          <div class="mb-8">{{ $t('chat.executionDetails.knowedMessage') }}:</div>
+          <div v-for="(msg, index) in currentChat" :key="index">
+            <span>{{ msg.content }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-never border-r-6 mb-12">
+        <h5 class="p-8-12">
+          {{ $t('chat.executionDetails.answer') }}
+        </h5>
+        <div class="p-8-12 border-t-dashed lighter">
+          <div v-for="(msg, index) in AiResponse" :key="index">
+            <span>{{ msg.content }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, computed } from 'vue'
@@ -145,13 +143,9 @@ const AiResponse = computed(() => {
   const messages = messageList.value?.filter((item: any) => item.role != 'system')
   return messages.slice(messages.length - 1, messages.length)
 })
-
-
 </script>
 <style lang="scss" scoped>
 .execution-details {
-  max-height: calc(100vh - 260px);
-
   .arrow-icon {
     transition: 0.2s;
   }

ui/src/components/ai-chat/component/knowledge-source-component/ParagraphSourceContent.vue

@@ -1,14 +1,12 @@
 <template>
-  <el-scrollbar>
-    <div class="paragraph-source-height p-8">
-      <div v-if="props.detail?.paragraph_list.length > 0" class="w-full">
-        <template v-for="(item, index) in props.detail.paragraph_list" :key="index">
-          <ParagraphCard :data="item" :content="item.content" :index="index" />
-        </template>
-      </div>
-      <span v-else> {{ $t('chat.KnowledgeSource.noSource') }}</span>
+  <div class="paragraph-source-height">
+    <div v-if="props.detail?.paragraph_list.length > 0" class="w-full">
+      <template v-for="(item, index) in props.detail.paragraph_list" :key="index">
+        <ParagraphCard :data="item" :content="item.content" :index="index" />
+      </template>
     </div>
-  </el-scrollbar>
+    <span v-else> {{ $t('chat.KnowledgeSource.noSource') }}</span>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -18,8 +16,4 @@ const props = defineProps<{
   detail?: any
 }>()
 </script>
-<style lang="scss" scoped>
-.paragraph-source-height {
-  max-height: calc(100vh - 260px);
-}
-</style>
+<style lang="scss" scoped></style>

ui/src/components/ai-chat/component/knowledge-source-component/index.vue

@@ -116,13 +116,16 @@
           </div> -->
         </div>
       </template>
-      <div class="mb-8">
-        <component
-          :is="currentComponent"
-          :detail="currentChatDetail"
-          :appType="appType"
-        ></component>
-      </div>
+
+      <el-scrollbar>
+        <div class="mb-8 p-8" style="max-height: calc(100vh - 260px)">
+          <component
+            :is="currentComponent"
+            :detail="currentChatDetail"
+            :appType="appType"
+          ></component>
+        </div>
+      </el-scrollbar>
     </el-dialog>
   </div>
 </template>

ui/src/components/dynamics-form/items/tree/Tree.vue

@@ -1,14 +1,5 @@
 <template>
-  <div style="width: 100%">
-    <div class="update-info flex p-8-12 border-r-6 mb-16">
-      <div class="mt-4">
-        <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
-      </div>
-      <div class="ml-16 lighter">
-        <p>{{ $t('views.document.feishu.tip1') }}</p>
-        <p>{{ $t('views.document.feishu.tip2') }}</p>
-      </div>
-    </div>
+  <div v-loading="loading" class="w-full">
     <div class="card-never border-r-6 mb-16">
       <el-checkbox
         v-model="allCheck"

ui/src/components/dynamics-form/items/upload/LocalFileUpload.vue

@@ -1,18 +1,5 @@
 <template>
   <div v-loading="loading" class="w-full">
-    <div class="update-info flex p-8-12 border-r-6 mb-16">
-      <div class="mt-4">
-        <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
-      </div>
-      <div class="ml-16 lighter">
-        <p>{{ $t('views.document.fileType.txt.tip1') }}</p>
-        <p>
-          2. {{ $t('views.document.tip.fileLimitCountTip1') }} {{ file_count_limit }}
-          {{ $t('views.document.tip.fileLimitCountTip2') }},
-          {{ $t('views.document.tip.fileLimitSizeTip1') }} {{ file_size_limit }} MB
-        </p>
-      </div>
-    </div>
     <el-upload
       :webkitdirectory="false"
       class="w-full"
@@ -40,14 +27,23 @@
           </em>
         </p>
         <div class="upload__decoration">
+          <p>
+            {{ $t('views.document.tip.fileLimitCountTip1') }} {{ file_count_limit }}
+            {{ $t('views.document.tip.fileLimitCountTip2') }},
+            {{ $t('views.document.tip.fileLimitSizeTip1') }} {{ file_size_limit }} MB
+          </p>
           <p>{{ $t('views.document.upload.formats') }}{{ formats }}</p>
         </div>
       </div>
     </el-upload>
-    <el-row :gutter="8" v-if="modelValue?.length">
+    <el-row :gutter="8" v-if="modelValue?.length" class="mt-16">
       <template v-for="(item, index) in modelValue" :key="index">
         <el-col :span="12" class="mb-8">
-          <el-card shadow="never" class="file-List-card">
+          <el-card
+            shadow="never"
+            class="file-List-card"
+            style="--el-card-padding: 8px 12px; line-height: normal"
+          >
             <div class="flex-between">
               <div class="flex">
                 <img :src="getImgUrl(item && item?.name)" alt="" width="40" />

ui/src/components/workflow-dropdown-menu/index.vue

@@ -4,8 +4,8 @@
 <script setup lang="ts">
 import { inject } from 'vue'
 import { WorkflowMode } from '@/enums/application'
-import ApplicationDropdownMenu from '@/components/dropdown_menu/application/index.vue'
-import KnowledgeDropdownMenu from '@/components/dropdown_menu/knowledge/index.vue'
+import ApplicationDropdownMenu from '@/components/workflow-dropdown-menu/application/index.vue'
+import KnowledgeDropdownMenu from '@/components/workflow-dropdown-menu/knowledge/index.vue'
 const workflow_mode = inject('workflowMode') || WorkflowMode.Application
 defineProps({
   show: {

ui/src/locales/lang/en-US/views/tool.ts

@@ -17,6 +17,7 @@ export default {
     editDataSource: 'Edit Data Source',
     copyDataSource: 'Copy Data Source',
     selectDataSource: 'Select Data Source',
+    requiredMessage: 'Please select data source',
   },
   toolStore: {
     title: 'Tool Store',

ui/src/locales/lang/en-US/views/workflow.ts

@@ -501,4 +501,9 @@ You are a master of problem optimization, adept at accurately inferring user int
   },
   SystemPromptPlaceholder: 'System Prompt, can reference variables in the system, such as',
   UserPromptPlaceholder: 'User Prompt, can reference variables in the system, such as',
+   debug: {
+    executionResult: 'Execution Result',
+    executionSuccess: 'Execution Succeeded',
+    executionFailed: 'Execution Failed',
+  },
 }

ui/src/locales/lang/zh-CN/views/tool.ts

@@ -17,6 +17,7 @@ export default {
     editDataSource: '编辑数据源',
     copyDataSource: '复制数据源',
     selectDataSource: '选择数据源',
+    requiredMessage: '请选择数据源',
   },
   toolStore: {
     title: '工具商店',

ui/src/locales/lang/zh-CN/views/workflow.ts

@@ -513,4 +513,9 @@ export default {
   },
   SystemPromptPlaceholder: '系统提示词，可以引用系统中的变量：如',
   UserPromptPlaceholder: '用户提示词，可以引用系统中的变量：如',
+  debug: {
+    executionResult: '执行结果',
+    executionSuccess: '执行成功',
+    executionFailed: '执行失败',
+  },
 }

ui/src/locales/lang/zh-Hant/views/tool.ts

@@ -13,10 +13,11 @@ export default {
   updatedVersion: '更新版本',
   dataSource: {
     title: '數據源',
-    createDataSource: '创建数据源',
-    editDataSource: '编辑数据源',
+    createDataSource: '創建數據源',
+    editDataSource: '編輯數據源',
     copyDataSource: '複製數據源',
-    selectDataSource: '选择数据源',
+    selectDataSource: '選擇數據源',
+    requiredMessage: '請選擇數據源',
   },
   toolStore: {
     title: '工具商店',

ui/src/locales/lang/zh-Hant/views/workflow.ts

@@ -486,4 +486,9 @@ export default {
   },
   SystemPromptPlaceholder: '系統提示詞，可以引用系統中的變量：如',
   UserPromptPlaceholder: '用戶提示詞，可以引用系統中的變量：如',
+  debug: {
+    executionResult: '執行結果',
+    executionSuccess: '執行成功',
+    executionFailed: '執行失敗',
+  },
 }

ui/src/styles/element-plus.scss

@@ -383,3 +383,8 @@
 .el-tabs__active-bar {
   height: 3px;
 }
+
+// el-upload
+.el-upload {
+    --el-upload-dragger-padding-horizontal: 32px;
+}

ui/src/views/application-workflow/index.vue

@@ -145,7 +145,7 @@ import { ref, onMounted, onBeforeUnmount, computed, nextTick, provide } from 'vu
 import { useRouter, useRoute } from 'vue-router'
 import type { Action } from 'element-plus'
 import Workflow from '@/workflow/index.vue'
-import DropdownMenu from '@/components/dropdown_menu/index.vue'
+import DropdownMenu from '@/components/workflow-dropdown-menu/index.vue'
 import PublishHistory from '@/views/application-workflow/component/PublishHistory.vue'
 import { isAppIcon, resetUrl } from '@/utils/common'
 import { MsgSuccess, MsgError, MsgConfirm } from '@/utils/message'

ui/src/views/chat/pc/index.vue

@@ -196,17 +196,20 @@
               </span>
             </div>
           </div>
-          <div class="execution-detail-content" v-loading="rightPanelLoading">
-            <ParagraphSourceContent
-              v-if="rightPanelType === 'knowledgeSource'"
-              :detail="rightPanelDetail"
-            />
-            <ExecutionDetailContent
-              v-if="rightPanelType === 'executionDetail'"
-              :detail="executionDetail"
-              :appType="applicationDetail?.type"
-            />
-            <ParagraphDocumentContent :detail="rightPanelDetail" v-else />
+
+          <div class="execution-detail-content mb-8" v-loading="rightPanelLoading">
+            <el-scrollbar>
+              <ParagraphSourceContent
+                v-if="rightPanelType === 'knowledgeSource'"
+                :detail="rightPanelDetail"
+              />
+              <ExecutionDetailContent
+                v-if="rightPanelType === 'executionDetail'"
+                :detail="executionDetail"
+                :appType="applicationDetail?.type"
+              />
+              <ParagraphDocumentContent :detail="rightPanelDetail" v-else />
+            </el-scrollbar>
           </div>
         </div>
       </div>
@@ -569,7 +572,7 @@ function closeExecutionDetail() {
       .execution-detail-content {
         flex: 1;
         overflow: hidden;
-        height: calc(100% - 63px);
+        height: calc(100% - 45px);
 
         .execution-details {
           padding: 16px;

ui/src/views/knowledge-workflow/component/DebugDrawer.vue

@@ -2,7 +2,7 @@
   <el-drawer
     v-model="drawerVisible"
     :title="$t('common.debug')"
-    size="60%"
+    size="800px"
     direction="rtl"
     destroy-on-close
     :before-close="close"

ui/src/views/knowledge-workflow/component/action/DataSource.vue

@@ -7,23 +7,35 @@
     label-position="top"
     require-asterisk-position="right"
     :other-params="{ current_workspace_id: workspace_id, current_knowledge_id: knowledge_id }"
-
   >
     <template #default>
-      <el-form-item prop="node_id" :rules="base_form_data_rule.node_id">
-        <el-radio-group @change="sourceChange" v-model="base_form_data.node_id">
-          <el-radio :value="node.id" border size="large" v-for="node in source_node_list" :key="node.id">
-            <div class="flex align-center">
-              <component
-                :is="iconComponent(`${node.type}-icon`)"
-                class="mr-8"
-                :size="24"
-                :item="node?.properties.node_data"
-              />
-              {{ node.properties.stepName }}
-            </div>
-          </el-radio>
-        </el-radio-group>
+      <h4 class="title-decoration-1 mb-16 mt-4">{{ $t('views.tool.dataSource.selectDataSource') }}</h4>
+      <el-form-item
+        :label="$t('views.tool.dataSource.title')"
+        prop="node_id"
+        :rules="base_form_data_rule.node_id"
+      >
+        <el-row class="w-full" gutter="8">
+          <el-col :span="8" v-for="node in source_node_list" :key="node.id">
+            <el-card
+              shadow="never"
+              class="card-checkbox cursor w-full mb-8"
+              :class="base_form_data.node_id === node.id ? 'active' : ''"
+              style="--el-card-padding: 4px 12px"
+              @click="sourceChange(node.id)"
+            >
+              <div class="flex align-center">
+                <component
+                  :is="iconComponent(`${node.type}-icon`)"
+                  class="mr-8"
+                  :size="20"
+                  :item="node?.properties.node_data"
+                />
+                {{ node.properties.stepName }}
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
       </el-form-item>
     </template>
   </DynamicsForm>
@@ -38,6 +50,7 @@ import type { Dict } from '@/api/type/common'
 import type { FormRules } from 'element-plus'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
 import { useRoute } from 'vue-router'
+import { t } from '@/locales'
 import useStore from '@/stores'
 const { user } = useStore()
 const route = useRoute()
@@ -85,6 +98,7 @@ const {
   params: { id, from },
 } = route as any
 const sourceChange = (node_id: string) => {
+  base_form_data.value.node_id = node_id
   const n = source_node_list.value.find((n: any) => n.id == node_id)
   node_id = n
     ? [WorkflowType.DataSourceLocalNode, WorkflowType.DataSourceWebNode].includes(n.type)
@@ -109,7 +123,7 @@ const base_form_data_rule = ref<FormRules>({
   node_id: {
     required: true,
     trigger: 'blur',
-    message: '数据源必选',
+    message: t('views.tool.dataSource.requiredMessage'),
   },
 })
 const validate = () => {

ui/src/views/knowledge-workflow/component/action/Result.vue

@@ -1,5 +1,26 @@
 <template>
   <div>
+    <h4 class="title-decoration-1 mb-16 mt-4">
+      {{ $t('views.workflow.debug.executionResult') }}
+    </h4>
+    <div class="mb-16">
+      <!-- 执行结果 -->
+      <!-- <el-alert
+            v-if="isSuccess"
+            :title="$t('views.workflow.debug.executionSuccess')"
+            type="success"
+            show-icon
+            :closable="false"
+          />
+          <el-alert
+            v-else
+            :title="$t('views.workflow.debug.executionFailed')"
+            type="error"
+            show-icon
+            :closable="false"
+          /> -->
+    </div>
+    <p class="lighter mb-8">{{ $t('chat.executionDetails.title') }}</p>
     <ExecutionDetailContent :detail="detail" app-type="WORK_FLOW"></ExecutionDetailContent>
   </div>
 </template>
@@ -24,7 +45,8 @@ const knowledge_action = ref<any>()
 let pollingTimer: any = null
 
 const getKnowledgeWorkflowAction = () => {
-  knowledgeApi.getWorkflowAction(props.knowledge_id, props.id)
+  knowledgeApi
+    .getWorkflowAction(props.knowledge_id, props.id)
     .then((ok) => {
       knowledge_action.value = ok.data
       if (['SUCCESS', 'FAILURE', 'REVOKED'].includes(state.value)) {
@@ -53,6 +75,5 @@ getKnowledgeWorkflowAction()
 onUnmounted(() => {
   stopPolling()
 })
-
 </script>
 <style lang="scss"></style>

ui/src/views/knowledge-workflow/index.vue

@@ -142,7 +142,7 @@ import { ref, onBeforeMount, onBeforeUnmount, computed, nextTick, provide } from
 import { useRouter, useRoute } from 'vue-router'
 import type { Action } from 'element-plus'
 import Workflow from '@/workflow/index.vue'
-import DropdownMenu from '@/components/dropdown_menu/index.vue'
+import DropdownMenu from '@/components/workflow-dropdown-menu/index.vue'
 import PublishHistory from '@/views/knowledge-workflow/component/PublishHistory.vue'
 import { isAppIcon, resetUrl } from '@/utils/common'
 import { MsgSuccess, MsgError, MsgConfirm } from '@/utils/message'

ui/src/views/knowledge/create-component/CreateWorkflowKnowledgeDialog.vue

@@ -10,38 +10,6 @@
     <!-- 基本信息 -->
     <BaseForm ref="BaseFormRef" v-if="dialogVisible" :apiType="apiType" />
 
-    <div class="w-full" v-if="dialogVisible">
-      <el-row :gutter="16">
-        <el-col :span="12">
-          <el-card
-            class="template-radio-card cursor text-center flex-center"
-            shadow="never"
-            @click="selectedType('blank')"
-            :class="appTemplate === 'blank' ? 'active' : ''"
-          >
-            <div class="flex-center p-24">
-              <AppIcon iconName="app-add-outlined" class="mr-12"></AppIcon>
-              {{ $t('views.knowledge.form.appTemplate.blank.title') }}
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="12">
-          <CardBox
-            :title="$t('views.knowledge.form.appTemplate.basic.title')"
-            :description="$t('views.knowledge.form.appTemplate.basic.description')"
-            shadow="never"
-            class="template-radio-card cursor"
-            :class="appTemplate === 'basic' ? 'active' : ''"
-            @click="selectedType('basic')"
-          >
-            <template #icon>
-              <img src="@/assets/knowledge/icon_basic_template.svg" alt="" />
-            </template>
-          </CardBox>
-        </el-col>
-      </el-row>
-    </div>
-
     <template #footer>
       <span class="dialog-footer">
         <el-button @click.prevent="dialogVisible = false" :loading="loading">
@@ -117,16 +85,6 @@ const submitHandle = async () => {
   }
 }
 
-const appTemplate = ref('blank')
-const workflowDefault = ref<any>({
-  // edges: [],
-  // nodes: baseNodes,
-})
-function selectedType(type: string) {
-  appTemplate.value = type
-  // workflowDefault.value = applicationTemplate[type]
-}
-
 defineExpose({ open })
 </script>
 <style lang="scss" scoped></style>

ui/src/views/model/component/CreateModelDialog.vue

@@ -239,7 +239,6 @@ import type { FormField } from '@/components/dynamics-form/type'
 import DynamicsForm from '@/components/dynamics-form/index.vue'
 import type { FormRules } from 'element-plus'
 import { MsgError, MsgSuccess, MsgWarning } from '@/utils/message'
-import { PermissionType, PermissionDesc } from '@/enums/model'
 import { input_type_list } from '@/components/dynamics-form/constructor/data'
 import AddParamDrawer from '@/views/model/component/AddParamDrawer.vue'
 import { t } from '@/locales'

ui/src/workflow/common/NodeContainer.vue

@@ -181,7 +181,7 @@ import { MsgError, MsgConfirm } from '@/utils/message'
 import type { FormInstance } from 'element-plus'
 import { t } from '@/locales'
 import { useRoute } from 'vue-router'
-import DropdownMenu from '@/components/dropdown_menu/index.vue'
+import DropdownMenu from '@/components/workflow-dropdown-menu/index.vue'
 const w = inject('workflowMode')
 console.log(w)
 const route = useRoute()